* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #0f172a;
  color: #e5e7eb;
}

.container {
  display: grid;
  grid-template-columns: 450px 1fr;
  height: 100vh;
}

.sidebar {
  background: #111827;
  border-right: 1px solid #374151;
  padding: 20px;
  overflow-y: auto;
}

.sidebar h1 {
  margin: 0 0 16px;
  font-size: 22px;
  color: #f9fafb;
}

.sidebar p {
  margin: 0 0 18px;
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
}

.card {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.card h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

label {
  display: block;
  margin: 10px 0 6px;
  font-size: 13px;
  color: #d1d5db;
}

input,
select,
textarea,
button {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #4b5563;
  padding: 10px 12px;
  font-size: 14px;
}

input,
select,
textarea {
  background: #0f172a;
  color: #f9fafb;
}

textarea {
  resize: none;            /* 마우스 드래그로 칸 늘리기 해제 */
  overflow: hidden;        /* 내용에 따라 높이 자동 조절(JS) */
  font-family: inherit;
  line-height: 1.45;
  min-height: 42px;
  box-sizing: border-box;
}

button {
  margin-top: 14px;
  background: #2563eb;
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background: #1d4ed8;
}

.btn-secondary {
  background: #374151;
  margin-top: 8px;
}

.btn-secondary:hover {
  background: #4b5563;
}

.map-wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
  background: #0b1220;
}

.map-toolbar {
  position: absolute;
  top: 10px;
  right: 14px;
  left: auto;
  z-index: 1200;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  max-width: 66%;   /* 상단 필터 바 너비 2/3 + 우측 정렬(우측 앵커) */
}

.leaflet-top.leaflet-right {
  top: 70px;
}

/* =========================================================
   지도 선택창 (레이어 컨트롤) — 선박관리사이트와 동일한 톤
========================================================= */
.leaflet-control-layers,
.leaflet-control-layers label,
.leaflet-control-layers span {
  color: #000 !important;
}

.leaflet-control-layers label {
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}

.leaflet-control-layers input[type="checkbox"],
.leaflet-control-layers input[type="radio"] {
  width: 13px;
  height: 13px;
  margin: 0;
  flex: 0 0 13px;
}

.leaflet-control-layers-selector {
  margin-top: 0 !important;
  margin-right: 0 !important;
}

.user-draw-control {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.user-draw-control button {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid #374151;
  background: #1f2937;
  color: #f9fafb;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  line-height: 34px;
  text-align: center;
}

.user-draw-control button:last-child {
  border-bottom: none;
}

.user-draw-control button:hover {
  background: #374151;
}

.user-draw-control button.active {
  background: #2563eb;
  color: #fff;
}

.user-draw-control button.line-color-btn {
  font-weight: 900;
}

.user-draw-control button.line-color-red {
  color: #e11d48;
}

.user-draw-control button.line-color-blue {
  color: #2563eb;
}

.user-draw-control button.line-color-yellow {
  color: #eab308;
}

.user-draw-control button.line-color-btn.active {
  background: #374151;
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

.user-draw-control button.circle-color-btn {
  font-weight: 900;
  font-size: 18px;
}

.user-draw-control button.circle-color-blue {
  color: #2563eb;
}

.user-draw-control button.circle-color-red {
  color: #e11d48;
}

.user-draw-control button.circle-color-btn.active {
  background: #374151;
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

.user-draw-control button.star-btn {
  color: #facc15;
  font-size: 17px;
  text-shadow: -1px 0 #e11d48, 0 1px #e11d48, 1px 0 #e11d48, 0 -1px #e11d48;
}

.user-draw-control button.star-btn.active {
  background: #374151;
  color: #facc15;
  outline: 2px solid #e11d48;
  outline-offset: -3px;
}

.position-table-panel {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 600;
  width: 720px;
  max-width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  color: #111827;
  overflow: hidden;
}

.position-table-panel[hidden] {
  display: none;
}

.position-table-panel-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}

.position-table-panel-title-text {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.2px;
}

.position-table-panel-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
}

.position-table-panel-body {
  overflow-y: auto;
  max-height: 390px;
  padding: 0;
  background: #ffffff;
}

.position-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #ffffff;
}

.position-table thead th {
  position: sticky;
  top: 0;
  background: #f9fafb;
  color: #374151;
  font-weight: 700;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.position-table tbody td {
  padding: 5px 10px;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
  white-space: nowrap;
  background: #ffffff;
}

.position-table .pt-col-cond,
.position-table .pt-col-nport {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.position-table tbody tr:nth-child(even) td {
  background: #f3f4f6;
}

.position-table tbody tr:hover td {
  background: #dbeafe;
}

.position-table .pt-col-no {
  width: 36px;
  text-align: right;
  color: #6b7280;
}

.position-table .pt-col-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.position-table .pt-col-pos {
  font-family: 'Consolas', 'Menlo', monospace;
  color: #1d4ed8;
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

.position-table-empty {
  padding: 14px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

.bunker-table-panel {
  width: 560px;
  left: auto;
  right: 12px;
  bottom: 12px;
}

.bunker-table .pt-col-date {
  color: #6b7280;
  white-space: nowrap;
}

.bunker-table .pt-col-fuel {
  font-family: 'Consolas', 'Menlo', monospace;
  color: #1d4ed8;
  text-align: right;
  white-space: nowrap;
}

.bunker-table thead th.pt-col-fuel {
  text-align: right;
  color: #374151;
}

.soh-track-panel {
  width: 400px;
  left: auto;
  right: 12px;
  bottom: 12px;
}

.soh-track-table .pt-col-time {
  font-family: 'Consolas', 'Menlo', monospace;
  color: #374151;
  white-space: nowrap;
}

.soh-track-table thead th.pt-col-time {
  color: #374151;
}

.user-text-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 문자입력(T) 라벨 = '선박명' 라벨과 동일한 흰색배경·검정글자 박스,
   글자크기도 '선박명' 글자크기 바(--map-route-label-size)에 연동 (곽팀장 2026-08-03) */
.user-text-label span {
  display: inline-block;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #94a3b8;
  border-radius: 5px;
  padding: 1px 6px;
  font-weight: 800;
  font-size: var(--map-route-label-size, 12px);
  line-height: 1.35;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.measure-control {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  margin-top: 20px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.measure-control button {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 18px;
  cursor: pointer;
  line-height: 36px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.leaflet-touch .measure-control button {
  width: 44px;
  height: 44px;
  line-height: 40px;
  font-size: 20px;
}

.measure-control button:hover {
  background: #f3f4f6;
}

.measure-control button.active {
  background: #16a34a;
  color: #fff;
}

.measure-control button#scheduleBtn.active {
  background: #2563eb;
  color: #fff;
}

.measure-control button#portsBtn.active {
  background: #c2410c;
  color: #fff;
}

.measure-control button#sireValidityBtn svg path {
  transition: fill 0.15s ease;
}

.measure-control button#sireValidityBtn:hover svg path {
  fill: #0f172a;
}

/* 우클릭 위경도(도분법) 팝업 */
.coord-popup .leaflet-popup-content {
  margin: 8px 10px;
}

.coord-pop {
  font-variant-numeric: tabular-nums;
}

.coord-pop .coord-dm {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

/* 마우스 이동에 따라 실시간 위경도 표시 (화면 아래 중앙) */
.coord-readout {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 700;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(250, 204, 21, 0.55);
  color: #facc15;
  font-family: 'Consolas', 'Menlo', monospace;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.coord-readout[hidden] {
  display: none;
}

.measure-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.measure-label span {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.measure-label-seg span {
  background: rgba(255, 255, 255, 0.92);
  color: #14532d;
  border: 1px solid #16a34a;
}

.measure-label-total span {
  background: #16a34a;
  color: #fff;
  border: 1px solid #14532d;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transform: translate(-50%, -150%);
}

@media (max-width: 1100px) {
  .user-draw-control,
  .leaflet-control-layers,
  .measure-control,
  .position-table-panel {
    display: none !important;
  }
}

.search-box {
  position: relative;
  flex: 0 0 180px;
  min-width: 180px;
  max-width: 180px;
}

.search-box input {
  width: 100%;
  height: 45px;
  margin: 0;
  padding: 0 14px;
  border-radius: 12px;
  background: #172036;
  border: 1px solid #334155;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  box-shadow: none;
}

.search-box input::placeholder {
  color: #94a3b8;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
  max-height: 260px;
  overflow-y: auto;
  display: none;
}

.search-dropdown.show {
  display: block;
}

.search-item {
  padding: 10px 12px;
  font-size: 13px;
  color: #f8fafc;
  cursor: pointer;
  border-bottom: 1px solid rgba(51, 65, 85, 0.6);
}

.search-item:last-child {
  border-bottom: none;
}

.search-item:hover {
  background: #1e293b;
}

.toolbar-chip {
  background: #172036;
  border: 1px solid #334155;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.toolbar-chip-btn {
  width: auto;
  min-width: 112px;
  min-height: 45px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #172036;
  border: 1px solid #334155;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.18s ease;
  box-shadow: none;
  flex: 0 0 auto;
  margin-top: 0;
}

.toolbar-chip-btn[hidden] {
  display: none !important;
}

/* 실시간위치(vesseltracker) 박스 */
.rt-box { margin-top: 8px; padding: 8px 10px; border-radius: 8px; text-align: center; }
.rt-box.rt-on { background: rgba(22,163,74,0.16); border: 1px solid #16a34a; }
.rt-box.rt-off { background: rgba(148,163,184,0.14); border: 1px solid #64748b; }
.rt-status { font-size: 12px; font-weight: 800; color: #111827; display: flex; align-items: center; justify-content: center; gap: 6px; }
.rt-sub { font-size: 11px; color: #374151; margin-top: 2px; }
.rt-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rt-dot.on { background: #22c55e; box-shadow: 0 0 5px #22c55e; }
.rt-dot.off { background: #94a3b8; }
.rt-btn { margin-top: 7px; width: 100%; border: none; border-radius: 6px; padding: 7px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.rt-btn.on { background: #16a34a; color: #fff; }
.rt-btn.off { background: #475569; color: #fff; }

/* CHECK POINT 깃발 마커 */
.cp-flag { background: none !important; border: none !important; }
/* CP 이름표는 깃대에서 넉넉히 띄운다 — 곽팀장 2026-09-28 "좀더 안쪽으로, 공간을 좀더 띄우자" */
.cp-flag-wrap { display: flex; align-items: center; gap: 10px; white-space: nowrap; position: relative; }
/* CP 이름표 방향 — 초록 항로선 '안쪽'(무산담 반도 쪽)에 놓이도록 CP별로 지정 (곽팀장 2026-08-19).
   기본(오른쪽)은 서쪽 구간(CP-S·CP-A)에서 안쪽이 되고, 동쪽 구간(CP-Z·CP-H)은 왼쪽,
   북쪽 꼭대기(CP-D)는 아래쪽이 안쪽이다. 깃대 밑(=좌표)을 기준으로 절대배치한다. */
.cp-flag-wrap.cp-label-left > .cp-flag-label,
.cp-flag-wrap.cp-label-below > .cp-flag-label { position: absolute; }
.cp-flag-wrap.cp-label-left > .cp-flag-label { left: 0; top: 50%; transform: translate(-100%, -50%); margin-left: -12px; }
.cp-flag-wrap.cp-label-below > .cp-flag-label { left: 0; top: 100%; transform: translateX(-88%); margin-top: 10px; }
/* CP-S 이름표만 깃발보다 **아래(남쪽·육지 쪽)** 로 떨어뜨린다 — 곽팀장 2026-09-28.
   깃발(=CP 좌표)은 그대로. 이름표가 항로선 위에 앉아 선박 아이콘·진행방향 화살표를
   가리던 것을 피한다(그 자리에서 나가는 배의 화살표가 이름표에 묻혔다). */
.cp-flag-wrap.cp-label-drop > .cp-flag-label { position: relative; top: 30px; left: -14px; }
.cp-flag-icon { line-height: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); display: inline-flex; }
.cp-flag-label {
  font-size: var(--map-route-label-size, 12px);
  font-weight: 700;
  color: #fff;
  background: rgba(22, 163, 74, 0.95);
  padding: 1px 5px;
  border-radius: 4px;
  text-shadow: none;
}

/* 호르무즈 IN/OUT 항로 웨이포인트 */
.route-wp { background: none !important; border: none !important; }
.route-wp-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55));
}
.route-wp-flag-icon { line-height: 0; display: inline-flex; }
.route-wp-label {
  font-size: var(--map-route-label-size, 12px);
  font-weight: 800;
  color: #fff;
  background: var(--route-color);
  padding: 1px 5px;
  border-radius: 4px;
}

.bab-route-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55));
}
.bab-route-label {
  position: absolute;
  font-size: var(--map-route-label-size, 12px);
  font-weight: 900;
  color: #1f2937;
  background: var(--route-color);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.15;
}
.bab-route-label-right {
  left: 22px;
  top: 1px;
}
.bab-route-label-left {
  right: 40px;
  top: 1px;
}
.bab-route-label-bottom {
  left: 0;
  top: 42px;
}

/* 홍해 항로 추정 현재위치 마커 */
.redsea-est-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.redsea-est-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #facc15;
  border: 2px solid #111827;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.9);
  display: inline-block;
  flex: none;
}

.redsea-est-label {
  font-size: 11px;
  font-weight: 800;
  color: #1f2937;
  background: #facc15;
  padding: 1px 5px;
  border-radius: 4px;
}

/* AIS ON/OFF — 배지 없이 색깔 글자만 (ON 파랑 / OFF 주황, 곽팀장 지시 2026-07-22) */
.ais-on {
  color: #3b82f6;
  font-weight: 800;
}

.ais-off {
  color: #f97316;
  font-weight: 800;
}

.toolbar-chip-btn:hover {
  transform: none;
  border-color: rgba(96, 165, 250, 0.45);
  background: #1e293b;
}

.toolbar-chip-btn.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.toolbar-chip-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #aeb9ca;
  line-height: 1.1;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.9;
}

.toolbar-chip-value {
  display: block;
  font-size: 17px;
  font-weight: 900;
  color: #f8fafc;
  line-height: 1;
  white-space: nowrap;
}

.vessel-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
}

.vessel-item {
  background: #0f172a;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 12px;
}

.vessel-item strong {
  display: block;
  margin-bottom: 8px;
  color: #f9fafb;
  font-size: 14px;
}

.vessel-item small {
  display: block;
  color: #9ca3af;
  line-height: 1.5;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.actions button {
  margin-top: 0;
  padding: 8px 10px;
  font-size: 12px;
  width: auto;
}

.delete-btn {
  background: #dc2626;
}

.delete-btn:hover {
  background: #b91c1c;
}

.upload-btn {
  background: #0ea5e9;
}

.upload-btn:hover {
  background: #0284c7;
}

.view-btn {
  background: #14b8a6;
}

.view-btn:hover {
  background: #0f766e;
}

.ship-icon-wrap {
  background: transparent;
  border: none;
}

.ship-icon {
  position: relative;
  width: 26px;
  height: 26px;
  transform-origin: center center;
}

.ship-icon svg {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.ship-name-icon {
  background: transparent;
  border: none;
}

.ship-name-text {
  display: inline-block;
  background: transparent;
  color: #0f172a;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow:
    0 0 2px rgba(255,255,255,0.96),
    0 0 4px rgba(255,255,255,0.96),
    0 1px 0 rgba(255,255,255,0.96);
  pointer-events: none;
}

.label-layer {
  position: absolute;
  inset: 0;
  z-index: 800;
  pointer-events: none;
}

.label-layer .map-label {
  pointer-events: auto;
}

.leader-line {
  position: absolute;
  height: 2px;
  background: rgba(100, 116, 139, 0.65);
  transform-origin: 0 50%;
  z-index: 790;
  pointer-events: none;
}

.map-label {
  position: absolute;
  width: 230px;
  min-height: 90px;
  background: rgba(255, 255, 255, 0.98);
  color: #111827;
  border-radius: 10px;
  border: 2px solid #d1d5db;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.34;
  pointer-events: auto;
  z-index: 900;
}

.map-label.green {
  border: 2px solid #22c55e;
  background: #f0fdf4;
}

.map-label.yellow {
  border: 2px solid #eab308;
  background: #fefce8;
}

.map-label.red {
  border: 2px solid #dc2626;
  background: #fef2f2;
}

.map-label .title {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
  color: #1f2937;
}

.map-label .line {
  margin-bottom: 1px;
  word-break: keep-all;
}

.map-label .line:last-child {
  margin-bottom: 0;
}

.map-label .label-name {
  font-weight: 700;
  color: #111827;
}

.map-label-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.map-mini-btn {
  width: auto;
  min-width: 48px;
  padding: 5px 9px;
  margin-top: 0;
  font-size: 11px;
  border-radius: 8px;
  font-weight: 800;
}

.map-mini-btn.edit {
  background: #2563eb;
}

.map-mini-btn.upload {
  background: #0ea5e9;
}

.map-mini-btn.view {
  background: #14b8a6;
}

.map-value-green {
  color: #16a34a;
  font-weight: 900;
}

.map-value-yellow {
  color: #a16207;
  font-weight: 900;
}

.map-value-red {
  color: #dc2626;
  font-weight: 900;
}

.map-value-normal {
  color: #374151;
  font-weight: 600;
}

.list-value-green {
  color: #16a34a;
  font-weight: 900;
}

.list-value-yellow {
  color: #a16207;
  font-weight: 900;
}

.list-value-red {
  color: #dc2626;
  font-weight: 900;
}

.list-value-normal {
  color: #cbd5e1;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .container {
    display: block;
    height: 100vh;
  }

  .sidebar {
    display: none;
  }

  .map-wrap {
    height: 100vh;
  }

  #map {
    height: 100vh;
  }

  .map-toolbar {
    left: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
    justify-content: flex-start;
  }

  .search-box {
    flex: 0 0 180px;
    min-width: 180px;
    max-width: 180px;
  }

  .toolbar-chip-btn {
    min-width: 112px;
  }
}
.report-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.report-topbar h2 {
  margin: 0;
}

.report-view-btn {
  width: auto;
  min-width: 120px;
  margin-top: 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.report-view-btn:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.report-page-body {
  margin: 0;
  background: #f5f7fa;
  color: #111827;
  font-family: Arial, sans-serif;
}

.report-page {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  padding: 24px 20px 32px;
}

.report-page-wide {
  max-width: 1900px;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #d1d5db;
}

.report-header h1 {
  margin: 0 0 4px;
  font-size: 28px;
  color: #111827;
  letter-spacing: 0;
  font-weight: 700;
}

.report-subtitle {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

.report-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.report-action-btn {
  width: auto;
  min-width: 120px;
  margin-top: 0;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #1e3a5f;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.report-action-btn:hover {
  background: #16304d;
}

.report-action-btn.secondary {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.report-action-btn.secondary:hover {
  background: #f8fafc;
}

.report-summary-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.report-summary-grid-wide {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.report-summary-card {
  background: #ffffff;
  border: 1px solid #d7dde5;
  border-radius: 8px;
  padding: 14px 14px;
  box-shadow: none;
}

.report-summary-card .label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 700;
  margin-bottom: 8px;
}

.report-summary-card .value {
  font-size: 26px;
  color: #111827;
  font-weight: 700;
  line-height: 1;
}

.report-summary-card-main {
  border-top: 3px solid #1e3a5f;
}

.report-summary-card.good {
  border-top: 3px solid #15803d;
}

.report-summary-card.warning {
  border-top: 3px solid #c2410c;
}

.report-summary-card.danger {
  border-top: 3px solid #b91c1c;
}

.report-table-wrap {
  background: #ffffff;
  border: 1px solid #d7dde5;
  border-radius: 8px;
  overflow: auto;
  box-shadow: none;
}

.report-table {
  width: 100%;
  min-width: 1650px;
  border-collapse: collapse;
}

.report-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #334155;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 12px 10px;
  border: 1px solid #475569;
  text-align: center;
  white-space: nowrap;
}

.report-table tbody td {
  font-size: 12px;
  color: #111827;
  padding: 10px 8px;
  border: 1px solid #dbe2ea;
  text-align: center;
  vertical-align: top;
  background: #ffffff;
  font-weight: 600;
}

.report-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.report-table td.left {
  text-align: left;
}

.report-table td.strong {
  font-weight: 700;
}

.report-table-enhanced tbody td {
  font-weight: 600;
}

.report-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
  background: #f3f4f6;
  color: #374151;
}

.report-badge.good {
  background: #edf7ed;
  color: #166534;
  border-color: #bbd9bf;
}

.report-badge.warning {
  background: #fff4e8;
  color: #9a3412;
  border-color: #f0c9a6;
}

.report-badge.danger {
  background: #fef0f0;
  color: #b91c1c;
  border-color: #efc2c2;
}

.report-badge.normal {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #d1d5db;
}

@media (max-width: 1500px) {
  .report-summary-grid-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .report-page {
    padding: 16px 10px 24px;
  }

  .report-header {
    flex-direction: column;
  }

  .report-summary-grid-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-header h1 {
    font-size: 24px;
  }
}

@media print {
  .report-actions {
    display: none;
  }

  .report-page {
    max-width: none;
    padding: 0;
  }

  .report-table-wrap {
    box-shadow: none;
    border: 1px solid #cbd5e1;
    overflow: visible;
  }

  .report-table thead th {
    position: static;
    background: #e5e7eb;
    color: #111827;
    border: 1px solid #cbd5e1;
  }

  .report-table tbody td,
  .report-table thead th {
    font-size: 11px;
    padding: 7px 5px;
  }

  .report-summary-card {
    box-shadow: none;
  }
}

#vesselForm button {
  width: 100%;
}

#vesselForm button + button {
  margin-top: 10px;
}


.position-result-modal[hidden] {
  display: none !important;
}

.position-result-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
}

.position-result-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.position-result-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: #16181d;
  color: #f8fafc;
  border: 1px solid #3f3f46;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.position-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.position-result-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #f8fafc;
}

.position-result-close {
  width: auto;
  min-width: 110px;
  margin-top: 0;
  padding: 12px 20px;
  border-radius: 18px;
  background: #94a3b8;
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
}

.position-result-close:hover {
  background: #cbd5e1;
}

.position-result-summary {
  background: #1f2937;
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 18px;
  white-space: pre-line;
}

.position-result-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #f8fafc;
}

.position-result-list {
  border: 1px solid #334155;
  border-radius: 16px;
  background: #0b1736;
  padding: 18px;
  min-height: 90px;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-line;
  line-height: 1.7;
  font-size: 15px;
}

.position-result-list-item {
  margin: 0 0 4px 0;
}

.position-result-list-item:last-child {
  margin-bottom: 0;
}

.form-row.hidden-by-category {
  display: none !important;
}

.map-toolbar-search-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-value-orange {
  color: #f97316; /* 주황 */
  font-weight: 600;
}

.list-value-orange {
  color: #f97316;
  font-weight: 600;
}


.toolbar-chip-toggle {
  min-width: 112px;
  min-height: 52px;
  padding: 6px 10px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}

.toolbar-chip-toggle .toolbar-chip-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #aeb9ca;
  line-height: 1.1;
  margin-bottom: 2px;
  white-space: nowrap;
}

.toolbar-chip-sub {
  display: block;
  font-size: 17px;   /* 59척과 동일 */
  font-weight: 900;  /* 59척과 동일 */
  color: #f8fafc;
  line-height: 1;
  white-space: nowrap;
}

.report-badge.neutral {
  background: #f1f5f9;   /* 연한 회색 */
  color: #64748b;        /* 회색 텍스트 */
  border-color: #cbd5e1;
}

.report-table-fixed .col-ag-supply {
  width: 600px;
}

.ag-supply-cell {
  white-space: normal;
  word-break: keep-all;
}





/* =========================================
   동의서 사이트 안내판 최종 완성형 CSS
   기존 CSS 맨 아래에 그대로 추가
========================================= */

.map-label.map-label-redesign {
  width: 430px;
  max-width: calc(100vw - 32px);
  min-height: 120px;
  max-height: calc(100vh - 120px); /* 살짝 줄임 */
  padding: 8px 10px;            /* 10px 12px → 축소 */
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 12px;
  border: 2px solid #f97316;
  background: #f4efe8;
  color: #111827;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  font-size: 11px;
  line-height: 1.3;
  pointer-events: auto;
  z-index: 900;
}

.map-label.map-label-redesign.green {
  border-color: #22c55e;
  background: #f0fdf4;
}

.map-label.map-label-redesign.yellow {
  border-color: #eab308;
  background: #fefce8;
}

.map-label.map-label-redesign.red {
  border-color: #ef4444;
  background: #fef2f2;
}

.map-label.map-label-redesign.orange {
  border-color: #f97316;
  background: #fff7ed;
}

/* 적하상태 미입력(회색 아이콘) — 아이콘 색 통일(2026-07-28)로 신설 */
.map-label.map-label-redesign.gray {
  border-color: #94a3b8;
  background: #f8fafc;
}

/* 스크롤바 */
.map-label.map-label-redesign::-webkit-scrollbar {
  width: 8px;
}

.map-label.map-label-redesign::-webkit-scrollbar-track {
  background: #e7dfd3;
  border-radius: 8px;
}

.map-label.map-label-redesign::-webkit-scrollbar-thumb {
  background: #c7b9a3;
  border-radius: 8px;
}

/* 헤더 */
.detail-panel-header {
  padding: 0 0 4px;
  background: transparent;
}

.detail-panel-title {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.05;
  color: #111827;
  letter-spacing: -0.3px;
  margin: 0 0 2px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 섹션 구분선 */
.detail-divider {
  height: 1px;
  background: rgba(17, 24, 39, 0.22);
  margin: 4px 0 6px;   /* 기존 6px 0 8px */
}

/* 섹션 블록 */
.detail-section-block {
  padding: 0;
  margin: 0 0 2px;
}

/* 섹션 제목: 항목과 확실히 구분 */
.detail-section-title {
  display: block;
  font-size: 14px;   /* 기존 14px → 줄임 */
  font-weight: 900;
  line-height: 1.2;
  color: #111827;
  background: #e7dfd3;
  border-left: 4px solid #f97316;
  border-radius: 4px;
  padding: 3px 6px;   /* 기존 4px 8px */
  margin: 0 0 4px;    /* 기존 6px */
  letter-spacing: -0.1px;
}

.map-label.map-label-redesign.green .detail-section-title {
  border-left: 4px solid #22c55e;
}

.map-label.map-label-redesign.yellow .detail-section-title {
  border-left: 4px solid #eab308;
}

.map-label.map-label-redesign.red .detail-section-title {
  border-left: 4px solid #ef4444;
}

.map-label.map-label-redesign.orange .detail-section-title {
  border-left: 4px solid #f97316;
}

.map-label.map-label-redesign.gray .detail-section-title {
  border-left: 4px solid #94a3b8;
}

.detail-section-body {
  padding: 0;
}

/* 행 */
.detail-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 6px;           /* 기존 8px */
  align-items: start;
  margin-bottom: 2px; /* 기존 4px */
}

.detail-row:last-child {
  margin-bottom: 0;
}

/* 소항목 */
.detail-key {
  font-size: 11px;
  font-weight: 700;
  color: #4b5563;
  line-height: 1.35;
  word-break: keep-all;
}

/* 값 */
.detail-val {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;   /* 기존 1.35 */
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.detail-val.multiline {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* footer 버튼 영역 */
.detail-panel-footer {
  display: flex;
  gap: 6px;
  margin-top: 6px;    /* 기존 10px */
  padding-top: 4px;   /* 기존 8px */
}
/* footer 오른쪽 끝: 현재 위치(도/분/초) */
.detail-panel-footer .detail-pos {
  margin-left: auto;
  align-self: center;
  font-size: 11.5px;
  color: #1f3350;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

/* 버튼 공통 */
.map-label.map-label-redesign .map-mini-btn {
  width: auto;
  min-width: 58px;
  padding: 6px 10px;
  margin-top: 0;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  box-shadow: none;
  cursor: pointer;
}

.map-label.map-label-redesign .map-mini-btn.close {
  background: #2563eb;
  color: #ffffff;
}

.map-label.map-label-redesign .map-mini-btn.close:hover {
  background: #1d4ed8;
}

.map-label.map-label-redesign .map-mini-btn.view {
  background: #14b8a6;
  color: #ffffff;
}

.map-label.map-label-redesign .map-mini-btn.view:hover {
  background: #0f766e;
}

.map-label.map-label-redesign .map-mini-btn.upload {
  background: #0ea5e9;
  color: #ffffff;
}

.map-label.map-label-redesign .map-mini-btn.upload:hover {
  background: #0284c7;
}

.map-label.map-label-redesign .map-mini-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 상태값 강조 */
.map-label.map-label-redesign .map-value-green {
  color: #16a34a;
  font-weight: 900;
}

.map-label.map-label-redesign .map-value-yellow {
  color: #ca8a04;
  font-weight: 900;
}

.map-label.map-label-redesign .map-value-red {
  color: #dc2626;
  font-weight: 900;
}

.map-label.map-label-redesign .map-value-orange {
  color: #ea580c;
  font-weight: 900;
}

.map-label.map-label-redesign .map-value-normal {
  color: #111827;
  font-weight: 700;
}

/* 전체 글자 조금 더 또렷하게 */
.map-label.map-label-redesign * {
  box-sizing: border-box;
}

/* 작은 화면 */
@media (max-width: 1100px) {
  .map-label.map-label-redesign {
    width: 300px;
    max-height: calc(100vh - 100px);
    padding: 9px 10px;
  }

  .detail-panel-title {
  font-size: 18px;   /* 기존 18px → 줄임 */
  font-weight: 900;  /* 그대로 유지 */
}

  .detail-section-title {
    font-size: 13px;
  }

  .detail-row {
    grid-template-columns: 104px 1fr;
    gap: 6px;
  }

  .detail-key,
  .detail-val,
  .map-label.map-label-redesign .map-mini-btn {
    font-size: 12px;
  }
}







#vesselName[readonly] {
  
  color: #ffffff;
  border: 1px solid #272727;
  cursor: not-allowed;
}
/* =========================================================
   Accordion form layout for consent site
========================================================= */
.accordion-section {
  border: 1px solid #374151;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #0f172a;
}

.accordion-header {
  width: 100%;
  margin-top: 0;
  padding: 12px 14px;
  border-radius: 0;
  border: none;
  background: #172036;
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.accordion-header:hover {
  background: #1e293b;
}

.accordion-arrow {
  font-size: 12px;
  color: #cbd5e1;
  transition: transform 0.18s ease;
}

.accordion-panel {
  display: none;
  padding: 12px 14px 14px;
  border-top: 1px solid #334155;
}

.accordion-section.open .accordion-panel {
  display: block;
}

.accordion-section.open .accordion-arrow {
  transform: rotate(0deg);
}

.accordion-section:not(.open) .accordion-arrow {
  transform: rotate(-90deg);
}

.accordion-panel .form-row:first-child label {
  margin-top: 0;
}

#basicInfoUploadBtn {
  background: #0f766e;
}

#basicInfoUploadBtn:hover {
  background: #0d9488;
}


/* =========================================================
   Consent site custom updates - 2026-05-06
========================================================= */
.double-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.double-btn-row > button {
  margin-top: 0;
}
.upload-action-btn {
  background: #0f766e;
}
.upload-action-btn:hover {
  background: #0d9488;
}
.ship-list-card[hidden] {
  display: none !important;
}

.detail-inline-table-block {
  margin-top: 8px;
}

.voyage-bunker-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.voyage-bunker-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: transparent;
  border: 1px solid rgba(17, 24, 39, 0.22);
}

.voyage-bunker-table col.rob-col-main {
  width: 18%;
}
.voyage-bunker-table col.rob-col-sub {
  width: 20%;
}
.voyage-bunker-table col.rob-col-val {
  width: 22%;
}
.voyage-bunker-table th,
.voyage-bunker-table td {
  border: 1px solid rgba(17, 24, 39, 0.18);
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.2;
  background: transparent;
  color: #111827;
}
.voyage-bunker-table .rob-main-label,
.voyage-bunker-table .rob-sub-label {
  font-weight: 900;
  text-align: center;
  word-break: keep-all;
}
.voyage-bunker-table .rob-main-label {
  white-space: nowrap;
}
.voyage-bunker-table .rob-main-label-two-line span {
  display: block;
}
.voyage-bunker-table .rob-value-cell {
  text-align: center;
  font-weight: 800;
}
.voyage-bunker-table .rob-row-spacer {
  border-left: none;
  border-right: none;
  background: transparent;
}
.voyage-bunker-table .rob-cargo-cell {
  text-align: center;
}
.cargo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}
.cargo-pill-laden {
  background: rgba(234, 88, 12, 0.16);
  color: #c2410c;
  border: 1px solid rgba(234, 88, 12, 0.35);
}
.cargo-pill-ballast {
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.35);
}
.cargo-pill-neutral {
  background: rgba(107, 114, 128, 0.14);
  color: #374151;
  border: 1px solid rgba(107, 114, 128, 0.35);
}
.map-label.mobile-overlay {
  left: 8px !important;
  right: 8px !important;
  top: 8px !important;
  width: calc(100% - 16px) !important;
  max-width: none !important;
  max-height: calc(100vh - 16px) !important;
  z-index: 1500;
}
@media (max-width: 1100px) {
  .map-label.map-label-redesign {
    width: min(430px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 10px 10px 12px;
  }
  .detail-inline-table-block {
    margin-top: 6px;
  }
  .voyage-bunker-table th,
  .voyage-bunker-table td {
    font-size: 11px;
    padding: 5px 6px;
  }
  .cargo-pill {
    min-width: 80px;
    font-size: 11px;
  }
}


/* =========================================================
   FINAL OVERRIDE: 선박관리사이트 CSS 기준 동의서 안내판 디자인 적용
   - 사용자가 제공한 선박관리사이트 style.css의 ROB 표, 안내판, 모바일 방식을 기준으로 맞춤
========================================================= */
:root {
  --bg-main: #0f172a;
  --bg-sub: #111827;
  --bg-soft: #172036;
  --bg-map: #0b1220;
  --panel-main: #1f2937;
  --panel-soft: #1e293b;
  --line-main: #374151;
  --line-soft: #334155;
  --text-main: #f9fafb;
  --text-soft: #d1d5db;
  --text-muted: #9ca3af;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --secondary: #374151;
  --secondary-hover: #4b5563;
  --success: #16a34a;
  --warning: #ea580c;
  --danger: #dc2626;
  --info: #2563eb;
  --idx-sidebar-bg: #111827;
  --idx-sidebar-border: #374151;
  --idx-page-title: #f9fafb;
  --idx-page-text: #e5e7eb;
  --idx-page-text-soft: #9ca3af;
  --idx-card-bg: #1f2937;
  --idx-card-border: #374151;
  --idx-card-title: #f8fafc;
  --idx-card-radius: 14px;
  --idx-accordion-bg: rgba(15, 23, 42, 0.32);
  --idx-accordion-border: #334155;
  --idx-accordion-header-bg: #1e293b;
  --idx-accordion-header-text: #f8fafc;
  --idx-accordion-header-icon: #93c5fd;
  --idx-accordion-content-bg: transparent;
  --idx-label-text: #ffffff;
  --idx-input-bg: #0f172a;
  --idx-input-border: #4b5563;
  --idx-input-text: #f9fafb;
  --idx-input-placeholder: #94a3b8;
  --idx-input-focus-border: #60a5fa;
  --idx-input-focus-shadow: rgba(96, 165, 250, 0.20);
  --idx-btn-primary-bg: #2563eb;
  --idx-btn-primary-hover: #1d4ed8;
  --idx-btn-primary-text: #ffffff;
  --idx-btn-secondary-bg: #374151;
  --idx-btn-secondary-hover: #4b5563;
  --idx-btn-secondary-text: #f8fafc;
  --idx-report-btn-bg: #1e3a5f;
  --idx-report-btn-hover: #16304d;
  --idx-report-btn-text: #ffffff;
  --idx-cost-card-bg: rgba(15, 23, 42, 0.28);
  --idx-cost-card-border: #334155;
}

body {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
}

.container {
  grid-template-columns: 450px 1fr !important;
}

.sidebar {
  background: var(--idx-sidebar-bg) !important;
  border-right: 1px solid var(--idx-sidebar-border) !important;
  color: var(--idx-page-text) !important;
}

.card {
  background: var(--idx-card-bg) !important;
  border: 1px solid var(--idx-card-border) !important;
  border-radius: 0 !important;
}

.sidebar input,
.sidebar select,
.sidebar textarea,
.sidebar button,
.btn-secondary,
.report-view-btn {
  border-radius: 0 !important;
}

.map-toolbar {
  left: 5% !important;
  right: 10px !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}

.toolbar-chip-btn {
  height: 45px !important;
  padding: 5px 10px !important;
  border-radius: 12px !important;
  background: #172036 !important;
  border: 1px solid #334155 !important;
  color: #fff !important;
  flex: 1 1 0 !important;
  min-width: 70px !important;
}

.toolbar-chip-btn.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

.toolbar-chip-label {
  font-size: clamp(9px, 0.8vw, 11px) !important;
}
.toolbar-chip-value {
  font-size: clamp(13px, 1.2vw, 17px) !important;
}

/* 안내판 전체를 선박관리사이트 지도 상세 카드 톤으로 통일 */
.map-label.map-label-redesign {
  width: 430px !important;
  min-height: 120px !important;
  max-height: calc(100vh - 110px) !important;
  padding: 11px 14px 10px 12px !important;
  border-radius: 16px !important;
  border: 2px solid #d1d5db !important;
  background: #f8fafc !important;
  color: #111827 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
  font-size: 11px !important;
  line-height: 1.28 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: #c7b9a3 transparent;
}
.map-label.map-label-redesign::-webkit-scrollbar { width: 10px; }
.map-label.map-label-redesign::-webkit-scrollbar-track {
  background: transparent;
  margin: 12px 0;
  border-radius: 999px;
}
.map-label.map-label-redesign::-webkit-scrollbar-thumb {
  background: #c7b9a3;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 42px;
}
.map-label.map-label-redesign.green {
  border-color: #22c55e !important;
  background: #f0fdf4 !important;
}
.map-label.map-label-redesign.orange {
  border-color: #f97316 !important;
  background: #fff7ed !important;
}
.map-label.map-label-redesign.yellow {
  border-color: #eab308 !important;
  background: #fefce8 !important;
}
.map-label.map-label-redesign.red {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
}

.detail-panel-title {
  font-size: 16px !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
  color: #111827 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.1 !important;
}
.detail-divider {
  height: 1px !important;
  background: rgba(148, 163, 184, 0.30) !important;
  margin: 8px 0 8px !important;
}
.detail-section-title {
  display: flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  margin-bottom: 6px !important;
  background: rgba(15, 23, 42, 0.07) !important;
  border-left: 4px solid #94a3b8 !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  color: #111827 !important;
  line-height: 1 !important;
}
.map-label.map-label-redesign.green .detail-section-title { border-left-color: #22c55e !important; }
.map-label.map-label-redesign.orange .detail-section-title { border-left-color: #f97316 !important; }
.map-label.map-label-redesign.yellow .detail-section-title { border-left-color: #eab308 !important; }
.map-label.map-label-redesign.red .detail-section-title { border-left-color: #dc2626 !important; }
.detail-row {
  display: grid !important;
  grid-template-columns: 92px 1fr !important;
  gap: 8px !important;
  align-items: start !important;
  margin-bottom: 3px !important;
}
.detail-key {
  text-align: left !important;
  font-weight: 800 !important;
  color: #475569 !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
}
.detail-val {
  text-align: left !important;
  color: #111827 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
}

/* 선박관리사이트와 동일한 항차/ROB 표 디자인 */
.map-voyage-rob-wrap {
  margin-top: 8px !important;
}
.map-label.map-label-redesign .voyage-rob-table {
  display: grid !important;
  grid-template-columns: 76px 84px minmax(0, 1fr) 84px minmax(0, 1fr) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.42) !important;
  border-left: 1px solid rgba(148, 163, 184, 0.42) !important;
  background: transparent !important;
  overflow: hidden !important;
  width: 100% !important;
}
.map-label.map-label-redesign .voyage-rob-table > * {
  min-width: 0 !important;
  border-right: 1px solid rgba(148, 163, 184, 0.42) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.42) !important;
}
.map-label.map-label-redesign .rob-main-label,
.map-label.map-label-redesign .rob-sub-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 25px !important;
  padding: 3px 6px !important;
  color: #1f2937 !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  text-align: center !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
.map-label.map-label-redesign .rob-main-label {
  background: rgba(15, 23, 42, 0.08) !important;
}
.map-label.map-label-redesign .rob-sub-label {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #334155 !important;
}
.rob-main-label-two-line {
  flex-direction: column !important;
  gap: 1px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
}
.rob-main-label-two-line span {
  display: block !important;
  white-space: nowrap !important;
}
.rob-rowspan-2 { grid-row: span 2 !important; }
.rob-span-2 { grid-column: span 2 !important; }
.rob-span-3 { grid-column: span 3 !important; }
.rob-span-4 { grid-column: span 4 !important; }
.map-label.map-label-redesign .rob-value-cell {
  min-height: 25px !important;
  background: transparent !important;
}
.rob-display-value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 25px !important;
  padding: 3px 4px !important;
  background: transparent !important;
  color: #111827 !important;
  font-size: 9.9px !important;
  font-weight: 900 !important;
  text-align: center !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}
.cargo-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 74px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-size: 9.8px !important;
  font-weight: 900 !important;
}
.cargo-pill-laden {
  background: rgba(234, 88, 12, 0.16) !important;
  color: #c2410c !important;
  border: 1px solid rgba(234, 88, 12, 0.35) !important;
}
.cargo-pill-ballast {
  background: rgba(37, 99, 235, 0.14) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(37, 99, 235, 0.35) !important;
}
.cargo-pill-neutral {
  background: rgba(107, 114, 128, 0.14) !important;
  color: #374151 !important;
  border: 1px solid rgba(107, 114, 128, 0.35) !important;
}

.detail-panel-footer {
  display: flex !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding-top: 7px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.30) !important;
}
.map-label.map-label-redesign .map-mini-btn {
  width: auto !important;
  min-width: 44px !important;
  padding: 5px 9px !important;
  margin-top: 0 !important;
  font-size: 10.5px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

/* 업로드 버튼 한 줄 배치 */
.double-btn-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.double-btn-row > button {
  margin-top: 0 !important;
}
.upload-action-btn,
#basicInfoUploadBtn,
#positionUpdateBtn {
  background: var(--idx-btn-secondary-bg) !important;
  color: var(--idx-btn-secondary-text) !important;
}
.upload-action-btn:hover,
#basicInfoUploadBtn:hover,
#positionUpdateBtn:hover {
  background: var(--idx-btn-secondary-hover) !important;
}
.ship-list-card[hidden] {
  display: none !important;
}

/* 모바일 안내판: 선박관리사이트와 같은 전체화면 안내판 */
@media (max-width: 1100px) {
  .label-layer.mobile-fullscreen-active {
    z-index: 1400 !important;
    pointer-events: auto !important;
  }
  .label-layer.mobile-fullscreen-active .leader-line {
    display: none !important;
  }
  .map-label.map-label-redesign.mobile-overlay,
  .map-label.map-label-redesign.mobile-fullscreen {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 14px 28px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1401 !important;
  }
  .map-label.map-label-redesign .voyage-rob-table {
    grid-template-columns: 76px 78px minmax(0, 1fr) 78px minmax(0, 1fr) !important;
  }
  .map-label.map-label-redesign .rob-main-label,
  .map-label.map-label-redesign .rob-sub-label,
  .rob-display-value {
    font-size: 10.5px !important;
  }
}


/* =========================================================
   2026-05-06 update: ship-management ROB layout with M/E R/H
========================================================= */
.map-label.map-label-redesign .voyage-rob-table-new {
  grid-template-columns: 78px 76px minmax(0, 1fr) 76px minmax(0, 1fr) !important;
}
.map-label.map-label-redesign .voyage-rob-table-new .rob-sub-label {
  font-size: 10px !important;
}
.map-label.map-label-redesign .voyage-rob-table-new .rob-main-label {
  font-size: 10.5px !important;
}
.map-label.map-label-redesign .voyage-rob-table-new .rob-display-value {
  font-size: 10.2px !important;
}
.map-label.map-label-redesign .rob-display-value .map-value-orange,
.map-label.map-label-redesign .rob-display-value .map-value-blue,
.map-label.map-label-redesign .rob-display-value .map-value-normal {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  font-weight: 900 !important;
}
.map-label.map-label-redesign .rob-display-value .map-value-orange {
  color: #ea580c !important;
}
.map-label.map-label-redesign .rob-display-value .map-value-blue {
  color: #2563eb !important;
}
@media (max-width: 1100px) {
  .map-label.map-label-redesign .voyage-rob-table-new {
    grid-template-columns: 72px 68px minmax(0, 1fr) 68px minmax(0, 1fr) !important;
  }
}


/* =========================================================
   Position Last Update 표시
   - 안내판 R.O.B 표 오른쪽 하단
========================================================= */
.map-label.map-label-redesign .rob-last-update {
  margin-top: 4px !important;
  display: flex !important;
  justify-content: space-between !important;  /* 위경도=왼쪽, Last Update=오른쪽 */
  align-items: baseline !important;
  gap: 12px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #475569 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.1px !important;
}
.map-label.map-label-redesign .rob-last-update .rob-pos {
  text-align: left !important;
  color: #1f3350 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.map-label.map-label-redesign .rob-last-update .rob-lu {
  text-align: right !important;
  white-space: nowrap !important;
}


/* =========================================================
   2026-05-07 update: LADEN 노란색을 선박관리사이트 기준으로 통일
   - 선박관리사이트 기준: border #eab308, background #fefce8
========================================================= */
.map-label.map-label-redesign.yellow {
  border-color: #eab308 !important;
  background: #fefce8 !important;
}
.map-label.map-label-redesign.yellow .detail-section-title {
  border-left-color: #eab308 !important;
}
.map-label.map-label-redesign .map-value-yellow {
  color: #a16207 !important;
  font-weight: 900 !important;
}
.map-label.map-label-redesign .rob-display-value .map-value-yellow {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  color: #a16207 !important;
  font-weight: 900 !important;
}
@media (max-width: 1100px) {
  .map-label.map-label-redesign.mobile-overlay.yellow,
  .map-label.map-label-redesign.mobile-fullscreen.yellow {
    border-color: #eab308 !important;
    background: #fefce8 !important;
  }
}


/* =========================================================
   2026-05-07 fix: 모바일에서 상단 검색/필터바가 안내판을 가리지 않도록 보정
   - 기존 문제: .map-toolbar z-index 1200, .label-layer z-index 800이라 필터바가 안내판 위로 노출됨
   - 수정: 모바일 안내판 표시 시 labelLayer를 toolbar보다 위로 올림
========================================================= */
@media (max-width: 1100px) {
  .map-toolbar {
    z-index: 700 !important;
  }

  .label-layer.mobile-fullscreen-active {
    z-index: 1600 !important;
    pointer-events: auto !important;
  }

  .label-layer.mobile-fullscreen-active .leader-line {
    display: none !important;
  }

  .label-layer.mobile-fullscreen-active .map-label.map-label-redesign.mobile-overlay,
  .label-layer.mobile-fullscreen-active .map-label.map-label-redesign.mobile-fullscreen {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 14px 28px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1601 !important;
  }
}


/* =========================================================
   FINAL OVERRIDE: 안내판 중앙 고정 및 여러 안내판 보기 제거
   - PC: 안내판은 JS 계산값에 따라 화면 중앙 배치
   - Mobile: 기존 전체화면 안내판 유지
========================================================= */
.map-label.map-label-redesign.center-fixed-label {
  width: 430px !important;
  max-width: calc(100vw - 32px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#toggleAllLabelsBtn,
#allViewStateText {
  display: none !important;
}


/* =========================================================
   2026-05-07 fix: 안내판 위치 재조정
   - 상단 필터 버튼 아래부터 안내판 시작
   - 하단에는 닫기 버튼이 보일 정도의 안전 여백 유지
   - JS 기준: top 72px, bottomSafeMargin 88px
========================================================= */
.map-label.map-label-redesign.center-fixed-label {
  max-height: calc(100vh - 160px) !important;
  padding-bottom: 8px !important;
}

.map-label.map-label-redesign.center-fixed-label .detail-panel-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
  background: inherit !important;
  margin-left: -2px !important;
  margin-right: -2px !important;
  padding: 7px 2px 6px !important;
}

/* =========================================================
   사이드바 오버레이 + 접기/펼치기 토글
   - 사이드바는 지도 위에 떠 있는 오버레이로 동작합니다.
   - 사이드바가 열리거나 닫혀도 지도(.map-wrap) 크기는 변하지 않습니다.
========================================================= */
.container,
.container.sidebar-collapsed {
  display: block !important;
  position: relative !important;
  height: 100vh !important;
  width: 100% !important;
  grid-template-columns: none !important;
}

.map-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
}

.sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 450px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  z-index: 1100 !important;
  overflow-y: auto !important;
  transform: translateX(0);
  transition: transform 0.28s ease;
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.45);
  padding-top: 56px !important; /* 토글 버튼이 제목을 덮지 않도록 여백 */
}

.container.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
  pointer-events: none;
}

.sidebar-toggle-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1600;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  background: #1f2937;
  color: #f9fafb;
  border: 1px solid #374151;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease;
}

.sidebar-toggle-btn:hover {
  background: #374151;
}

.sidebar-toggle-btn .sidebar-toggle-icon {
  display: inline-block;
  pointer-events: none;
}

/* 좌측 편집바(선/마커/글자 등 Leaflet 컨트롤)가 사이드바 토글 버튼과
   겹치지 않도록 아래로 내림 (토글 버튼: top 10~44px). */
.leaflet-top.leaflet-left {
  top: 44px;
}

/* 상단 필터바는 입력판이 펼쳐졌을 때의 가용 영역만큼만 사용하도록
   고정 — 입력판이 닫혀 있어도 동일한 좌우 칸을 유지합니다. */
@media (min-width: 1101px) {
  .map-toolbar {
    left: 470px !important;
  }
}

@media (max-width: 1100px) {
  .sidebar-toggle-btn {
    display: none !important;
  }

  .sidebar {
    display: none !important;
  }

  /* 좌측 컨트롤(편집바)은 토글 버튼이 사라지므로 원래 위치(top 10px)로 */
  .leaflet-top.leaflet-left {
    top: 0;
  }
}

/* 리포트 페이지 배경은 흰색 (body 전역 어두운 배경 !important 규칙을 덮어씁니다) */
body.report-page-body {
  background: #ffffff !important;
}

/* =========================================================
   운항일정 / 항구별 팝업 (모달 공통 + light theme 테이블)
========================================================= */
.custom-alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 99999;
}

.custom-alert-overlay.hidden {
  display: none;
}

.custom-alert-box {
  width: min(400px, 40vw);
  max-height: 82vh;
  background: #111827;
  color: #f3f4f6;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #374151;
}

.custom-alert-title {
  padding: 20px 24px 12px;
  font-size: 24px;
  font-weight: 700;
}

.custom-alert-message {
  padding: 0 24px 20px;
  white-space: pre-wrap;
  line-height: 1.7;
  overflow-y: auto;
  max-height: 55vh;
  font-size: 16px;
}

.custom-alert-actions {
  padding: 0 24px 24px;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 8px;
}

.custom-alert-ok {
  min-width: 92px;
  height: 52px;
  border-radius: 999px;
  border: 2px solid #93c5fd;
  background: #bfdbfe;
  color: #1e3a8a;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.schedule-modal-box {
  width: min(1400px, 98vw);
  max-height: 90vh;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

.schedule-modal-box .custom-alert-title {
  padding: 14px 20px 8px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  border-bottom: 1px solid #e5e7eb;
}

.schedule-modal-subtitle {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

.schedule-modal-box .custom-alert-message.schedule-modal-body {
  padding: 12px 16px;
  background: #ffffff;
  color: #1f2937;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 76vh;
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}

.schedule-modal-box .custom-alert-actions {
  padding: 8px 16px 12px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  gap: 8px;
}

.schedule-modal-box .custom-alert-ok {
  min-width: 64px;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid #93c5fd;
  background: #dbeafe;
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 600;
}

.schedule-modal-box .custom-alert-ok:hover {
  background: #bfdbfe;
}

.schedule-modal-box .custom-alert-ok.cost-report-cancel-btn {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}

.schedule-modal-box .custom-alert-ok.cost-report-cancel-btn:hover {
  background: #e5e7eb;
}

.schedule-table-wrap {
  background: #ffffff;
  border-radius: 0;
  border: none;
  overflow: visible;
  width: 100%;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: clamp(9px, 0.78vw, 12px);
  color: #1f2937;
}

.schedule-table th,
.schedule-table td {
  border: 1px solid #e5e7eb;
  padding: 3px 6px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-table thead th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 700;
  z-index: 2;
  border-bottom: 2px solid #94a3b8;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

.schedule-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

.schedule-table tbody tr:hover {
  background: #eff6ff;
}

.schedule-table .col-no {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

.schedule-table .col-vessel {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.schedule-table .col-cond,
.schedule-table .col-cargo {
  text-align: center;
}

.schedule-table .col-date {
  text-align: center;
}

.schedule-table .empty-cell {
  color: #9ca3af;
  font-style: italic;
}

.schedule-empty {
  padding: 24px;
  text-align: center;
  color: #6b7280;
}

.ports-table .col-rank {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

.ports-table .col-port-name {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.ports-table .col-count {
  text-align: center;
}

.ports-table tbody tr.port-row {
  cursor: pointer;
}

.ports-table tbody tr.port-row:hover {
  background: #dbeafe;
}

.port-detail-status {
  font-weight: 700;
}

.port-detail-status.in-port {
  color: #15803d;
}

.port-detail-status.inbound {
  color: #1d4ed8;
}

/* 주요 항만 라벨 (지도에 항상 표시) */
.leaflet-tooltip.port-label {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #0ea5e9;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 500;
  color: #0c4a6e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.leaflet-tooltip.port-label::before {
  display: none;
}

/* SOH 통항완료 REPORT 표 */
.soh-report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.soh-report-table th, .soh-report-table td {
  border: 1px solid #e2e8f0; padding: 7px 9px; text-align: left; vertical-align: top;
}
.soh-report-table thead th {
  background: #0e3c5e; color: #fff; font-weight: 700; white-space: nowrap; text-align: center;
}
.soh-report-table td.soh-rep-name { font-weight: 700; white-space: nowrap; }
.soh-report-table .soh-rep-pos { color: #94a3b8; font-size: 11px; }
.soh-report-table tbody tr:nth-child(even) { background: #f8fafc; }

/* ===== 선박명 펼치기(위치보고용) ===== */
/* 펼치기 모드에서는 기본(겹치는) 선박명 마커를 숨김 */
.name-spread-active .ship-name-icon { display: none !important; }

#nameSpreadLayer .name-spread-label {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #94a3b8;
  border-radius: 5px;
  padding: 1px 6px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  cursor: move;
  z-index: 800;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  user-select: none;
  line-height: 1.35;
}
#nameSpreadLayer .name-spread-label.dragging { opacity: 0.85; }

/* 전체 글자크기 조정 바 — 지도 왼쪽 아래 고정 (펼치기 모드에서만 표시) */
.name-spread-fontbar {
  display: none;   /* 펼치기 모드에서만 flex로 표시 */
  position: absolute;
  left: 12px;
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 10002;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  white-space: nowrap;
  width: max-content;
  max-width: none;
  background: #ffffff;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}
.name-spread-fontbar .nsf-label {
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  margin-right: 2px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.name-spread-fontbar .nsf-btn,
.name-spread-fontbar .nsf-size { flex: 0 0 auto; }
/* 전역 button(width:100%·padding·margin-top) 상속 리셋 */
.name-spread-fontbar .nsf-btn {
  width: auto;
  margin: 0;
  min-width: 40px;
  padding: 3px 10px;
  border-radius: 6px;
  line-height: 1.3;
}
.name-spread-fontbar .nsf-btn {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 5px;
  cursor: pointer;
  color: #0f172a;
}
.name-spread-fontbar .nsf-btn:hover { background: #e2e8f0; }
.name-spread-fontbar .nsf-size {
  font-size: 11px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
  color: #0f172a;
}

/* =========================
   🧭 ENC 해도 (호르무즈) — '해도' 버튼으로 켜는 벡터 해도
   ========================= */
.measure-control button#encChartBtn.active { background: #c2185b; color: #fff; }

.enc-sym { background: none !important; border: none !important; }
.enc-sym svg { display: block; overflow: visible; }
.enc-arrow { opacity: 0.9; }

/* 해도 라벨(등질·묘박지명)은 줌 단계에 따라만 보인다 — 낮은 줌에서 글자가 화면을 덮는다 */
.leaflet-tooltip.enc-label {
  display: none;
  background: rgba(255, 255, 255, 0.82);
  border: none;
  box-shadow: none;
  color: #86094a;
  font-size: 10px;
  font-weight: 700;
  padding: 0 3px;
  white-space: nowrap;
}
.leaflet-tooltip.enc-label::before { display: none; }
.enc-labels-on .leaflet-tooltip.enc-label.enc-label-area { display: block; }
.enc-labels-all .leaflet-tooltip.enc-label { display: block; }

.enc-legend {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-size: 11px;
  line-height: 1.5;
  color: #0f172a;
  max-width: 260px;
  margin-bottom: 70px !important;   /* 좌하단 'AI 분석' 플로팅 버튼(bottom:24px, 높이 ~44px) 위로 */
}
.enc-legend-title { font-weight: 800; color: #c2185b; margin-bottom: 3px; }
.enc-legend-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.enc-legend-zoom { margin-top: 3px; color: #475569; }
.enc-legend-note { margin-top: 4px; color: #64748b; font-size: 10px; line-height: 1.35; }
.enc-lg-line, .enc-lg-bd { display: inline-block; width: 20px; height: 0; border-top: 2.5px dashed #c2185b; }
.enc-lg-bd { border-top: 1.6px solid #c2185b; }
.enc-lg-anch { display: inline-block; width: 14px; height: 9px; border: 1.4px dashed #c2185b; background: rgba(194, 24, 91, 0.08); }
.enc-lg-light { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #111827; box-shadow: 3px -3px 0 -1px #c2185b; }
.enc-lg-buoy { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #dc2626; border: 1px solid #111827; }
.enc-lg-wreck { display: inline-block; width: 14px; height: 0; border-top: 1.6px solid #111827; }
.enc-lg-plat { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.2px solid #111827; }

@media (max-width: 820px) {
  .enc-legend { max-width: 180px; font-size: 10px; padding: 6px 8px; }
  .enc-legend-note { display: none; }
}
@media (max-width: 767px) {
  /* 모바일은 AI 버튼이 bottom:110px 로 올라온다 */
  .enc-legend { margin-bottom: 168px !important; }
}

/* =========================================================
   통항계획 팝업 — 모바일은 전체 화면 (곽팀장 2026-09-05)
   표가 6~8열이라 좁은 카드로 보면 좌우 스크롤만 남는다.
   폰에서는 여백/라운드를 없애고 화면 전체를 팝업으로 쓴다.
========================================================= */
@media (max-width: 767px) {
  #transitPlanModal.custom-alert-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  #transitPlanModal .custom-alert-box {
    width: 100% !important;
    max-width: none !important;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  #transitPlanModal .custom-alert-title {
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: 6px;
    flex: 0 0 auto;
  }
  /* 제목 옆 '기준 · …' 줄은 탭마다 따로 있으므로 폰에서는 숨긴다(세로 공간 확보) */
  #transitPlanModal .schedule-modal-subtitle { display: none; }
  #transitPlanModal .custom-alert-message.schedule-modal-body {
    flex: 1 1 auto;
    max-height: none;
    -webkit-overflow-scrolling: touch;
  }
  #transitPlanModal .custom-alert-actions {
    flex: 0 0 auto;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  /* 터치 타깃 확보 — 닫기/다시 불러오기 */
  #transitPlanModal .custom-alert-ok {
    height: 44px;
    font-size: 15px;
  }
}
/* 팝업이 열려 있는 동안 떠다니는 버튼(FAB)이 표·닫기버튼을 가리지 않게 */
body.transit-plan-open #sohFab,
body.transit-plan-open #sohMailFab,
body.transit-plan-open #sohPlanFab,
body.transit-plan-open #sohSiteFab {
  display: none !important;
}

/* =========================================================
   통항계획 팝업 ①②③ — 모바일 카드 뷰 (곽팀장 2026-09-05)
   폰에서는 열 많은 표 대신 '선박 한 척 = 카드 한 장' 으로 접어 가로 스크롤을 없앤다.
   데스크톱은 기존 넓은 표(.tp-wide) 그대로, 카드는 숨김.
========================================================= */
/* 날짜 탭 — 통항 시작일별(곽팀장 2026-09-05). 하루치만 한 화면에 본다. */
:is(#transitPlanModalContent,#transitRegContent) .tp-tabs {
  display: flex;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #ffffff;
  border-bottom: 2px solid #e5e7eb;
  margin: 0 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 가로 스크롤바 — **아주 가늘게 · 배경 투명 · 글자 아래칸**(곽팀장 지시 2026-09-05).
     종전에는 굵은 바가 탭 글자에 붙어 겹쳐 보였다. 아래 여백을 줘 바가 글자와 떨어진 칸에 눕는다. */
  padding-bottom: 9px;       /* 스크롤바(4px)가 눕는 아래칸 — 탭 글자·밑줄과 겹치지 않게 */
  scrollbar-width: thin;                     /* 파이어폭스 */
  scrollbar-color: #cbd5e1 transparent;
}
:is(#transitPlanModalContent,#transitRegContent) .tp-tabs::-webkit-scrollbar { height: 4px; }
:is(#transitPlanModalContent,#transitRegContent) .tp-tabs::-webkit-scrollbar-track { background: transparent; }
:is(#transitPlanModalContent,#transitRegContent) .tp-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
:is(#transitPlanModalContent,#transitRegContent) .tp-tabs::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
:is(#transitPlanModalContent,#transitRegContent) .tp-tab {
  flex: 1 0 auto;
  width: auto;               /* 사이트 기본 button{width:100%} 무력화 */
  min-width: 84px;
  padding: 7px 10px 6px;
  margin: 0;                 /* 아래로 끌어내리지 않는다 — 내리면 밑줄이 스크롤바 자리를 덮는다 */
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
}
:is(#transitPlanModalContent,#transitRegContent) .tp-tab.is-on { color: #1d4ed8; border-bottom-color: #1d4ed8; }
:is(#transitPlanModalContent,#transitRegContent) .tp-tab-n {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}
:is(#transitPlanModalContent,#transitRegContent) .tp-tab.is-on .tp-tab-n { color: #60a5fa; }
#transitPlanModalContent .tp-startday {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
}
:is(#transitPlanModalContent,#transitRegContent) .tp-tab-today {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}
#transitPlanModalContent .tp-panel { display: none; }
#transitPlanModalContent .tp-panel.is-on { display: block; }

/* 통합표 머리 — 기준 날짜/회차 한 줄 (곽팀장 2026-09-05: 탭 없이 한 화면) */
#transitPlanModalContent .tp-basis {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 6px;
  font-size: 11.5px;
  line-height: 1.35;
}
#transitPlanModalContent .tp-basis-date { font-weight: 800; font-size: 14px; color: #1d4ed8; }
#transitPlanModalContent .tp-basis-meta { color: #64748b; }
#transitPlanModalContent .tp-basis-warn {
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
}
#transitPlanModalContent .tp-legend { margin: 6px 0 0; color: #64748b; font-size: 12px; }
/* 표 제목을 없앴으므로(3단계 통합) 두 표 사이는 여백과 옅은 선으로만 가른다 */
/* 선박명은 **항상 한 줄** — 두 줄로 접지 않는다(곽팀장 지시 2026-09-05) */
#transitPlanModalContent .tp-vname { white-space: nowrap; }
/* 표를 넉넉하게 — 행 높이를 1.5배로(곽팀장 지시 2026-09-05). 3px → 9px 위아래 여백 */
#transitPlanModalContent .tp-wide .schedule-table th,
#transitPlanModalContent .tp-wide .schedule-table td { padding: 9px 6px; }
/* 동의서 칸은 세 줄로 쌓는다 — 줄 사이를 붙여 높이를 아낀다 */
#transitPlanModalContent .tp-consent-cell { white-space: nowrap; line-height: 1.35; }
/* [보고] 칸에는 버튼 말고 아무것도 그리지 않는다 — 칸 자체의 글자 크기를 0 으로 두어
   빈칸·공백 같은 군더더기가 점처럼 찍히는 것을 막는다(곽팀장 2026-09-05 '보고 끝 점' 건). */
/* 맨 오른쪽 칸 = [🗺][보고] 두 버튼. 가로로 나란히 두고 줄바꿈시키지 않는다(곽팀장 2026-09-17). */
#transitPlanModalContent .tp-repcell {
  font-size: 0; padding-left: 3px; padding-right: 3px;
  white-space: nowrap; text-align: center;
}
#transitPlanModalContent .tp-repcell > * {
  display: inline-block; vertical-align: middle; margin: 0 2px 0 0; font-size: 11px;
}
#transitPlanModalContent .tp-repcell .trp-btn { margin: 0; font-size: 11px; }
#transitPlanModalContent .tp-st-done { color: #15803d; font-weight: 700; white-space: nowrap; }
/* CP 칸에 실적과 함께 보이는 계획 시각(작은 글씨) */
#transitPlanModalContent .tp-cp-plan {
  display: block;
  font-size: 9.5px;
  line-height: 1.15;
  color: #94a3b8;
  font-weight: 400;
}
/* CP 칸 LT 밑에 붙는 Z·KST 보조 표기 — 작고 연하게
   (KST 곽팀장 지시 2026-09-06 · Z 추가 지시 2026-09-22 — 순서는 LT → Z → KST) */
#transitPlanModalContent .tp-cp-kst,
#transitPlanModalContent .tp-cp-z {
  display: block;
  font-size: 9.5px;
  line-height: 1.2;
  color: #94a3b8;
  font-weight: 400;
}
#transitPlanModalContent .tp-st-abort { color: #b91c1c; font-weight: 700; white-space: nowrap; }
/* 날짜 탭 안 구역 제목 — ① 통항예정 / ② CP 계획 · 통항 중 */
#transitPlanModalContent .tp-sec {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0 6px;
  padding-bottom: 3px;
  border-bottom: 2px solid #cbd5e1;
}
#transitPlanModalContent .tp-sec-n { font-weight: 800; color: #0f172a; }
#transitPlanModalContent .tp-sec-t { font-weight: 800; font-size: 14px; color: #0f172a; }
#transitPlanModalContent .tp-sec-m { color: #64748b; font-size: 12px; }
#transitPlanModalContent .tp-more { margin: 8px 0 0; font-size: 12px; }
#transitPlanModalContent .tp-more > summary { cursor: pointer; color: #334155; font-weight: 700; }
#transitPlanModalContent .tp-links {
  margin: 10px 0 2px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* '다른 화면' 칸 — 통항준비·동의서 화면과 같은 모양 (곽팀장 2026-09-05) */
#transitPlanModalContent .tp-nav {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
#transitPlanModalContent .tp-nav-title {
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 2px;
}
#transitPlanModalContent .tp-link .sm { display: none; }
#transitPlanModalContent .tp-link {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  background: #dbeafe;
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

#transitPlanModalContent .tp-cards { display: none; }

@media (max-width: 767px) {
  #transitPlanModalContent .tp-wide { display: none; }
  #transitPlanModalContent .tp-cards { display: block; }
  /* ① 통항예정 구역은 폰에서 감춘다 — 같은 내용이 ②표(계획·통항중)에 이미 있다 (곽팀장 2026-09-05) */

  #transitPlanModalContent .tp-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 8px 5px;
    margin: 0 0 7px;
    background: #ffffff;
  }
  /* ②표에서 오늘 통항예정 선박은 넓은 표와 같은 강조(연보라) */
  #transitPlanModalContent .tp-card-today {
    background: #eef2ff;
    border-color: #c7d2fe;
  }
  #transitPlanModalContent .tp-card-head {
    display: flex;
    align-items: center;      /* baseline 이면 '비고' 칩 때문에 줄 높이가 33px 로 뜬다 */
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
    line-height: 1.25;
  }
  #transitPlanModalContent .tp-card-head .tp-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #transitPlanModalContent .tp-card-head .tp-bound { flex: 0 0 auto; white-space: nowrap; }
  #transitPlanModalContent .tp-name {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
  }
  #transitPlanModalContent .tp-bound { font-size: 12px; font-weight: 700; }
  #transitPlanModalContent .tp-sub {
    margin: 1px 0 4px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
  }

  /* 항목줄(①표: 통항 시작·선원 동의서·준비완료) */
  #transitPlanModalContent .tp-kv { margin: 2px 0 4px; }
  #transitPlanModalContent .tp-kv-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
  }
  #transitPlanModalContent .tp-kv-row:first-child { border-top: none; }
  #transitPlanModalContent .tp-kv-k {
    flex: 0 0 52px;
    color: #64748b;
    font-size: 11px;
  }
  #transitPlanModalContent .tp-kv-v { flex: 1 1 auto; min-width: 0; color: #0f172a; font-size: 11.5px; }

  /* CP 5칸 미니표 — 표 폭을 화면에 맞춘다(min-width 없음 = 좌우 스크롤 없음) */
  #transitPlanModalContent .tp-mini {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }
  #transitPlanModalContent .tp-mini th,
  #transitPlanModalContent .tp-mini td {
    text-align: center !important;
    padding: 3px 2px;
    font-size: 11px;
    white-space: nowrap;
  }
  /* '지연/빠름' 글자가 있는 칸만 키가 커져 표가 들쭉날쭉하던 것 — 칸 높이를 고정한다
     (곽팀장 2026-09-05). 두 줄이 들어갈 높이를 늘 확보하고 가운데 정렬. */
  #transitPlanModalContent .tp-mini td {
    height: 36px;
    vertical-align: middle;
    line-height: 1.2;
  }
  /* '지연/빠름' 은 늘 같은 자리를 차지하게 — 있고 없고로 줄 수가 바뀌지 않는다 */
  #transitPlanModalContent .tp-mini td > span,
  #transitPlanModalContent .tp-mini .tp-mark { font-size: 10px; }
  /* 열 이름 줄은 카드마다 반복되니 작게 — 여러 척인 날도 한 화면에 가깝게 */
  #transitPlanModalContent .tp-mini th {
    padding: 1px 2px;
    font-size: 10px;
    font-weight: 700;
    color: #334155;
  }
  /* ✔/△ 마크는 아랫줄로 — 시각 + 마크가 한 줄이면 칸을 넘친다(실측 66 > 62px) */
  #transitPlanModalContent .tp-mini .tp-mark {
    display: block;
    line-height: 1.1;
    font-size: 10px;
  }
  #transitPlanModalContent .tp-kv-sep { color: #cbd5e1; }
  #transitPlanModalContent .tp-band { padding: 0 0 2px; }
  /* 원문 열기 버튼 4개는 폰에서도 **한 줄** — 폭을 똑같이 나눠 갖는다 (곽팀장 2026-09-05) */
  #transitPlanModalContent .tp-links {
    flex-wrap: nowrap;
    gap: 5px;
    margin: 10px 0 2px;
  }
  #transitPlanModalContent .tp-link {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 2px;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
  }
  /* 폰에서는 짧은 이름 — 글자를 잘라 '…' 로 흐리지 않고 이름을 바꿔 단다 */
  #transitPlanModalContent .tp-link .lg { display: none; }
  #transitPlanModalContent .tp-link .sm { display: inline; }
}

/* ==================== 통항보고 초안 (통항 모니터링 선박별 [보고]) ==================== */
/* 버튼 자리는 **동의서 반대편 끝** — 표에서는 선박칸 왼쪽 끝, 카드에서는 머리줄 오른쪽 끝
   (동의서는 표 오른쪽 끝 열 · 카드 아래끝 줄). 곽팀장 2026-09-05 */
#transitPlanModalContent .trp-btn {
  /* 전역 button{width:100%;margin-top:14px} 을 덮는다 — 안 그러면 표칸 한 줄을 다 먹는다 */
  display: inline-block;
  width: auto;
  flex: 0 0 auto;
  margin: 0 6px 0 0;
  padding: 2px 7px;
  min-width: 0;
  border: 1px solid #c7d2fe;
  border-radius: 5px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  cursor: pointer;
  vertical-align: middle;
}
#transitPlanModalContent .trp-btn:hover { background: #e0e7ff; }
#transitPlanModalContent .trp-btn:active { transform: scale(0.96); }
#transitPlanModalContent .tp-card-head .trp-btn { margin: 0 0 0 6px; }

#trpModal .trp-body { display: flex; flex-direction: column; gap: 10px; }
/* 오른쪽 묶음 — 기본(폰)은 없는 셈 치고 자식이 그대로 세로로 흐른다. PC 에서만 한 칸이 된다. */
#trpModal .trp-side { display: contents; }
#trpModal .trp-box { width: min(760px, 96vw); }
/* 🔄 새로고침 — 제목줄 오른쪽 끝. 생김새는 지도의 '사이트 갱신'(#sohSiteFab)과 같게 (곽팀장 2026-09-15).
   ⚠️ 이 저장소에는 전역 `button{width:100%;margin-top:14px}` 이 있다(style.css 61~90줄) —
      모달 안 아이콘 버튼은 width·margin 을 스스로 눌러야 칸을 통째로 차지하지 않는다. */
#trpModal .custom-alert-title { position: relative; padding-right: 56px; }
#trpModal .trp-refresh {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 36px !important; height: 36px; min-width: 0; padding: 0; margin: 0 !important;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85);
  background: #1d7bf2; color: #fff;
  box-shadow: 0 6px 20px rgba(29, 123, 242, .45), 0 0 0 4px rgba(29, 123, 242, .15);
  cursor: pointer; transition: transform .12s;
  display: flex; align-items: center; justify-content: center;
}
#trpModal .trp-refresh svg { width: 19px; height: 19px; display: block; }
#trpModal .trp-refresh:active { transform: translateY(-50%) scale(.94); }
#trpModal .trp-refresh.busy { opacity: .6; pointer-events: none; }
#trpModal .trp-refresh.busy svg { animation: sohSpin .8s linear infinite; }
/* 지도 버튼의 회전 애니메이션은 index.html 에 있다 — 팝업에서도 쓰이도록 여기에도 둔다 */
@keyframes sohSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
#trpModal .trp-shot {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
  text-align: center;
}
/* 그림은 세로로 길다(820x880) — 문구·버튼이 화면 밖으로 밀리지 않게 높이를 묶는다 */
#trpModal #trpCanvas {
  max-width: 100%;
  max-height: 40vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  background: #0b2033;
}
#trpModal .trp-note { color: #64748b; font-size: 12px; margin-top: 6px; }
#trpModal .trp-label { color: #475569; font-size: 12px; font-weight: 700; }
/* 제목 + 입력칸을 한 상자로 (곽팀장 2026-09-08) — 위치·거리 상자와 같은 결 */
#trpModal .trp-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}
#trpModal .trp-card-head { display: flex; align-items: baseline; gap: 8px; }
#trpModal .trp-card-t { color: #0f172a; font-size: 13px; font-weight: 800; }
#trpModal .trp-card-h { color: #64748b; font-size: 11px; font-weight: 600; }
#trpModal .trp-textcard .trp-text { border-color: #e2e8f0; border-radius: 8px; }
#trpModal .trp-text {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  resize: vertical;
}
/* 그림 위에서 배·화살표를 끌어 옮긴다 — 터치가 스크롤로 새지 않게 */
#trpModal #trpCanvas { touch-action: none; cursor: default; }
/* 조작칸 — 목적지 / 켜고끄기 / 안내 세 줄로 고정(폰에서 줄이 제멋대로 접히던 것 정리) */
#trpModal .trp-tools {
  display: flex;
  flex-direction: column;
  gap: 6px;                            /* 컴팩트하게 두 줄 (곽팀장 2026-09-08) */
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
#trpModal .trp-field { display: flex; align-items: center; gap: 8px; }
#trpModal .trp-flabel {
  flex: 0 0 auto;
  min-width: 46px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}
#trpModal .trp-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  text-transform: uppercase;
}
#trpModal .trp-toggles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#trpModal .trp-chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#trpModal .trp-chk input { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; }
#trpModal .trp-chk:has(input:checked) { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
#trpModal .trp-mini {
  margin-left: auto;
  width: auto;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#trpModal .trp-mini:hover { background: #eef2f7; }
#trpModal .trp-mini:disabled { opacity: .45; cursor: default; }
/* 배 위치 상자 — 폭이 좁아져도 배치가 그대로다: 윗줄 꼬리표+되돌리기, 아랫줄 좌표 (곽팀장 2026-09-08)
   (종전 한 줄 flex 는 창을 줄이면 버튼만 아래로 떨어져 상자가 어정쩡하게 길어졌다) */
#trpModal .trp-pos {
  display: grid;
  /* 꼬리표 | 자료원천 | (여백)몇분전 | 되돌리기 — 원천 칸이 늘어 4열이 됐다(곽팀장 2026-09-13) */
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}
#trpModal .trp-pos-k {
  grid-column: 1; grid-row: 1;
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
#trpModal .trp-pos-k.is-moved { background: #fef3c7; color: #92400e; }   /* 옮긴 자리는 눈에 띄게 [[CONSTITUTION]] */
#trpModal .trp-pos .trp-mini { grid-column: 4; grid-row: 1; margin-left: 0; height: 30px; padding: 0 10px; }
#trpModal .trp-pos-age {   /* 보고위치일 때 오른쪽에 '몇 분 전 보고' (곽팀장 2026-09-08) */
  grid-column: 3; grid-row: 1;
  justify-self: end;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
#trpModal .trp-pos-v {
  grid-column: 1 / -1; grid-row: 2;
  min-width: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
}
#trpModal .trp-pos-v .trp-c { white-space: nowrap; margin-right: 10px; }   /* 도분초 덩어리는 중간에서 안 끊는다 */
/* 경고일 때만 나온다 — 한 줄 고정(긴 원문은 title 툴팁) (곽팀장 2026-09-08) */
#trpModal .trp-kind {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 화살표 거리 // 평균선속 · 완료 예상시각 (곽팀장 2026-09-08) */
#trpModal .trp-eta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #ffffff;                 /* 위치 상자와 같은 결로 맞춘다 (곽팀장 2026-09-08) */
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}
#trpModal .trp-eta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#trpModal .trp-eta-g { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#trpModal .trp-eta-k { color: #475569; font-size: 12px; font-weight: 700; }
#trpModal .trp-eta-v { color: #0f172a; font-size: 14px; font-weight: 800; }
#trpModal .trp-eta-big { font-size: 16px; color: #1d4ed8; letter-spacing: .3px; }
#trpModal .trp-eta-sep { color: #94a3b8; font-weight: 800; }
#trpModal .trp-eta-in {
  width: 84px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
#trpModal .trp-eta .trp-note { margin-top: 2px; color: #475569; line-height: 1.5; }
#trpModal .trp-seg { white-space: nowrap; }        /* 토막 단위로만 접힌다 */
#trpModal .trp-segdot { color: #94a3b8; }
#trpModal .trp-msg { min-height: 16px; font-size: 12px; font-weight: 700; }
#trpModal .trp-actions { flex-wrap: wrap; gap: 8px; }
#trpModal .trp-actions .custom-alert-ok { width: auto; flex: 0 1 auto; margin-top: 0; }
/* PC 는 긴 표기, 폰은 짧은 표기 (아래 폰 규칙에서 뒤집는다) */
#trpModal .trp-actions .custom-alert-ok .lg { display: inline; }
#trpModal .trp-actions .custom-alert-ok .sm { display: none; }

@media (max-width: 640px) {
  #trpModal #trpCanvas { max-height: 40vh; }
}

/* =========================================================
   통항보고 팝업 — PC 는 좌우 2분할 (곽팀장 2026-09-05)
   왼쪽 지도(크게) · 오른쪽 조작칸·문구. 폰(≤767px)은 종전 세로 한 줄 그대로.
========================================================= */
@media (min-width: 768px) {
  #trpModal .trp-box { width: min(1280px, 96vw); }
  /* 지도를 키우려면 본문이 세로로 더 커져야 한다 */
  #trpModal .custom-alert-message.schedule-modal-body { max-height: calc(100vh - 200px); }
  /* align-items:stretch 로 두면 오른쪽 칸 높이에 눌려 지도가 되레 작아진다 — flex-start 로 둔다 */
  #trpModal .trp-body { flex-direction: row; align-items: flex-start; gap: 14px; }
  #trpModal .trp-shot {
    flex: 1 1 64%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  #trpModal .trp-side {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 36%;
    min-width: 300px;
    max-width: 470px;
  }
  /* 지도 = 세로로 긴 그림(820x880). 좌우 2분할이 된 만큼 높이를 풀어 크게 본다 */
  /* 세로는 창 높이에 맞춰 자른다 — 스크롤 없이 지도 한 장이 다 보이게 */
  #trpModal #trpCanvas { max-height: min(calc(100vh - 260px), 880px); }
  /* 오른쪽 칸이 세로로 남으면 문구 상자(와 그 안 입력칸)가 늘어난다 */
  #trpModal .trp-textcard { flex: 1 1 auto; min-height: 0; }
  #trpModal .trp-text { flex: 1 1 auto; min-height: 180px; }
}

/* =========================================================
   통항보고 팝업 — 모바일은 전체 화면 (곽팀장 2026-09-05)
   좁은 카드로 보면 그림·문구·버튼이 다 잘린다. 폰에서는 화면을 통째로 쓴다.
========================================================= */
@media (max-width: 767px) {
  #trpModal.custom-alert-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  #trpModal .custom-alert-box {
    width: 100% !important;
    max-width: none !important;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  #trpModal .custom-alert-title {
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: 6px;
    flex: 0 0 auto;
    font-size: 16px;
  }
  #trpModal .custom-alert-title { padding-right: 52px; }
  #trpModal .trp-refresh { right: 12px; top: calc(50% + 6px); width: 34px !important; height: 34px; }
  #trpModal .schedule-modal-subtitle { display: block; margin-left: 0; font-size: 12px; }
  #trpModal .custom-alert-message.schedule-modal-body {
    flex: 1 1 auto;
    max-height: none;
    -webkit-overflow-scrolling: touch;
  }
  /* 그림은 폭을 꽉 채우고, 문구·버튼 자리가 남게 높이를 묶는다 */
  #trpModal .trp-shot { padding: 4px; }
  /* ⚠️ 2026-09-11 곽팀장(아이패드 세로) — 종전 `width:100%` + `max-height` 조합은 CSS 규격상
     **폭을 고정한 채 높이만 잘라** 그림이 위아래로 눌린다(820x880 이 790x540 으로 찌그러짐).
     폭·높이를 모두 auto 로 두고 최대치만 묶어야 브라우저가 비율을 지킨 채 줄인다. */
  #trpModal #trpCanvas { width: auto; max-width: 100%; height: auto; max-height: 48vh; }
  #trpModal .trp-text { font-size: 15px; }
  #trpModal .trp-body { gap: 8px; }
  #trpModal .trp-note { font-size: 11px; line-height: 1.4; }
  #trpModal .trp-pos-v { font-size: 17px; }
  /* 폰 버튼줄 — **한 줄**로 둔다(곽팀장 2026-09-13: 세 줄은 자리를 너무 먹는다).
     한 줄에 넣되 글자를 자르지 않는 방법 = ① [그림 다시] 숨김 ② 라벨을 짧은 표기로 교체.
     (종전 5개 + 긴 라벨을 nowrap 으로 밀어 넣어 글자가 잘렸던 사고를 되풀이하지 않는다) */
  #trpModal .custom-alert-actions {
    flex: 0 0 auto;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    flex-wrap: nowrap;
    gap: 6px;
  }
  #trpModal #trpRedrawBtn { display: none; }          /* 폰에서는 숨긴다 */
  #trpModal .trp-actions .custom-alert-ok {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    padding: 0 6px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 긴 표기 ↔ 짧은 표기 — 폰에서는 '메시지 전송' 대신 '전송' */
  #trpModal .trp-actions .custom-alert-ok .lg { display: none; }
  #trpModal .trp-actions .custom-alert-ok .sm { display: inline; }
}

/* =========================================================
   통항보고 그림 — 가로가 넓은 세로화면(아이패드·갤럭시 폴드) (곽팀장 2026-09-11)
   폭이 넉넉한 세로 화면에서 40%대 높이 제한에 걸리면 지도가 납작해 보인다.
   → 세로 여유를 늘려 **폭에 맞는 제 비율(820:880 ≒ 1:1.07)** 로 길게 보이게 한다.
   (폭·높이 모두 auto 라 이 값에 걸려도 찌그러지지 않고 비율대로 줄어든다)
========================================================= */
@media (max-width: 767px) and (min-width: 600px) and (orientation: portrait) {
  #trpModal #trpCanvas { max-height: 72vh; }
}

/* =========================================================
   모바일 확대 금지 (곽팀장 2026-09-08)
   ① iOS 는 글자 16px 미만 입력칸을 터치하면 **화면을 자동으로 확대**한다 → 폰에서는 16px 로 올린다.
      (meta viewport user-scalable=no 는 iOS Safari 가 무시하므로 글자크기가 실제 해법이다)
   ② 더블탭 확대는 touch-action: manipulation 으로 막는다.
========================================================= */
@media (max-width: 767px) {
  #trpModal input,
  #trpModal textarea,
  #trpModal select,
  #transitPlanModal input,
  #transitPlanModal textarea,
  #transitPlanModal select { font-size: 16px; }
  #trpModal .trp-text { font-size: 16px; }
  #trpModal .trp-field input { font-size: 16px; }
  #trpModal .trp-eta-in { font-size: 16px; }
}
html, body { touch-action: manipulation; }
#trpModal, #transitPlanModal { touch-action: manipulation; }
#trpModal #trpCanvas { touch-action: none; }   /* 그림 위 끌어 옮기기는 그대로 */

/* ==================== 💬 통항보고자료 (왓앱 소스 대화방) — 곽팀장 2026-09-13 ====================
   입구 = 왼쪽 관리화면 '선박 정보 입력' 카드 EMAIL 위치 아래 [대화방 매칭](.gt-one, 템플릿 안에 스타일).
   여기는 **매칭 팝업**만 — 2분할(왼쪽 통항예정 선박 / 오른쪽 왓앱 대화방).
   ⚠️ 대화 내용은 띄우지 않는다(곽팀장 지시) — 방 이름·종류·마지막 대화 시각·건수까지만.
   ⚠️ 이 사이트 전역 규칙에 `button{width:100%;margin-top:14px}` 이 있다 —
      팝업에 새로 두는 버튼은 반드시 width/margin 을 스스로 눌러야 칸을 통째로 차지하지 않는다. */
#waSrcModal .wa-box { width: min(1020px, 97vw); }
#waSrcModal .hidden { display: none; }
#waSrcModal .wa-mini {
  width: auto !important; margin: 0 !important; flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid #cbd5e1; border-radius: 7px;
  background: #f8fafc; color: #475569;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
#waSrcModal .wa-mini:hover { background: #e2e8f0; }
#waSrcModal .wa-empty { padding: 18px; text-align: center; color: #94a3b8; font-size: 13px; }

/* 비밀번호 관문 */
#waSrcModal .wa-gate { padding: 22px 4px 10px; text-align: center; }
#waSrcModal .wa-gate-t { color: #334155; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
#waSrcModal .wa-gate-r { display: flex; justify-content: center; align-items: center; gap: 8px; }
#waSrcModal .wa-gate input {
  width: 150px; height: 40px; margin: 0; padding: 0 12px;
  border: 1px solid #cbd5e1; border-radius: 8px;
  background: #ffffff; color: #0f172a;
  font-size: 18px; letter-spacing: 6px; text-align: center;
}
#waSrcModal .wa-gate-e { min-height: 18px; margin-top: 9px; color: #b91c1c; font-size: 12.5px; }

/* 2분할 — 왼쪽 선박(고정폭) / 오른쪽 대화방(나머지) */
#waSrcModal .wa-two { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 12px; }
#waSrcModal .wa-pane { min-width: 0; display: flex; flex-direction: column; }
#waSrcModal .wa-pane-h {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 6px; color: #334155; font-size: 12.5px; font-weight: 800;
}
#waSrcModal .wa-pane-n { color: #94a3b8; font-weight: 700; }
#waSrcModal .wa-for {
  color: #047857; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 왼쪽: 통항예정 선박 */
#waSrcModal .wa-plan {
  border: 1px solid #e5e7eb; border-radius: 10px;
  max-height: min(52vh, 460px); overflow-y: auto;
}
#waSrcModal .wa-pv-item {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 10px; border-bottom: 1px solid #f1f5f9;
  cursor: pointer; border-left: 3px solid transparent;
}
#waSrcModal .wa-pv-item:last-child { border-bottom: none; }
#waSrcModal .wa-pv-item:hover { background: #f8fafc; }
/* 지금 오른쪽에서 고르고 있는 배 — 어느 배를 매칭 중인지가 한눈에 보여야 한다 */
#waSrcModal .wa-pv-item.is-on { background: #eef2ff; border-left-color: #4338ca; }
#waSrcModal .wa-pv-nm {
  flex: 1 1 auto; min-width: 0;
  color: #0f172a; font-size: 12.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#waSrcModal .wa-pv-bd { flex: 0 0 auto; color: #94a3b8; font-size: 10px; font-weight: 700; }
#waSrcModal .wa-pv-ok {
  flex: 0 0 auto; min-width: 17px; padding: 0 5px;
  border-radius: 999px; background: #059669; color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
}
#waSrcModal .wa-pv-no { flex: 0 0 auto; color: #cbd5e1; font-size: 10.5px; font-weight: 700; }

/* 오른쪽: 대화방 */
#waSrcModal .wa-notice {
  margin-bottom: 8px; padding: 9px 11px;
  border: 1px solid #fecaca; border-radius: 8px;
  background: #fef2f2; color: #b91c1c;
  font-size: 12.5px; line-height: 1.6;
}
#waSrcModal .wa-search { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#waSrcModal .wa-search input {
  flex: 1 1 auto; min-width: 0; width: auto;
  height: 34px; padding: 0 11px; margin: 0;
  border: 1px solid #cbd5e1; border-radius: 8px;
  background: #ffffff; color: #0f172a; font-size: 13px;
}
#waSrcModal .wa-list {
  border: 1px solid #e5e7eb; border-radius: 10px;
  max-height: min(52vh, 460px); overflow-y: auto;
}
#waSrcModal .wa-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-bottom: 1px solid #f1f5f9; cursor: pointer;
}
#waSrcModal .wa-row:last-child { border-bottom: none; }
#waSrcModal .wa-row:hover { background: #f8fafc; }
#waSrcModal .wa-row.is-on { background: #f0fdf4; }
#waSrcModal .wa-row input[type=checkbox] {
  width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: #059669;
}
#waSrcModal .wa-main { flex: 1 1 auto; min-width: 0; }
#waSrcModal .wa-name {
  display: block; color: #0f172a; font-size: 13px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#waSrcModal .wa-kind {
  display: inline-block; margin-right: 6px; padding: 0 5px;
  border-radius: 4px; background: #e0e7ff; color: #4338ca;
  font-size: 10.5px; font-weight: 700; line-height: 16px; vertical-align: 1px;
}
#waSrcModal .wa-kind-d { background: #f1f5f9; color: #64748b; }
/* 방 이름에 그 배 이름이 들어 있으면 표시 — 80개 목록에서 제 방을 바로 찾게 한다 */
#waSrcModal .wa-hit {
  display: inline-block; margin-right: 6px; padding: 0 5px;
  border-radius: 4px; background: #dcfce7; color: #15803d;
  font-size: 10.5px; font-weight: 700; line-height: 16px; vertical-align: 1px;
}
#waSrcModal .wa-meta {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  color: #64748b; font-size: 11.5px; white-space: nowrap;
}
#waSrcModal .wa-num { color: #94a3b8; }
/* 대화를 안 보여 준다는 사실을 화면에 적어 둔다 — 왜 안 보이는지 묻지 않게 */
#waSrcModal .wa-foot { margin-top: 7px; color: #94a3b8; font-size: 11.5px; }

/* 폰 — 2분할을 위아래로 접는다. 선박 칸은 낮게 눌러 대화방이 가려지지 않게 한다. */
@media (max-width: 820px) {
  #waSrcModal .wa-two { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #waSrcModal .wa-plan { max-height: 132px; }
  #waSrcModal .wa-list { max-height: 38vh; }
}

/* ==================== 📨 통항보고 초안 [메시지 전송] — 곽팀장 2026-09-13 ==================== */
#trpSendModal .trp-send-box { width: min(520px, 94vw); }
#trpSendModal .hidden { display: none; }
#trpSendModal .trp-send-help { color: #475569; font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
#trpSendModal .trp-send-list { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
#trpSendModal .trp-send-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer;
}
#trpSendModal .trp-send-row:last-child { border-bottom: none; }
#trpSendModal .trp-send-row:hover { background: #f8fafc; }
#trpSendModal .trp-send-row input[type=checkbox] {
  width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: #2563eb;
}
#trpSendModal .trp-send-main { flex: 1 1 auto; min-width: 0; }
#trpSendModal .trp-send-name { display: block; color: #0f172a; font-size: 13.5px; font-weight: 700; }
#trpSendModal .trp-send-sub { display: block; margin-top: 2px; color: #64748b; font-size: 11.5px; }
/* 그림이 붙는지 아닌지를 고르기 전에 알려 준다 — 슬랙은 스코프가 없어 문구만 간다 */
#trpSendModal .trp-send-tag {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 999px;
  background: #eef2ff; color: #4338ca; font-size: 10.5px; font-weight: 800;
}
#trpSendModal .trp-send-tag.is-off { background: #f1f5f9; color: #94a3b8; }
#trpSendModal .trp-send-empty { padding: 18px; text-align: center; color: #94a3b8; font-size: 13px; }
#trpSendModal .trp-send-note {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8;
  font-size: 12.5px; line-height: 1.6;
}
#trpSendModal .trp-send-note.is-bad { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }

/* 자동전송(수신자별 30분/1시간) — 곽팀장 2026-09-13 */
#trpSendModal .trp-send-row { display: flex; align-items: center; gap: 10px; }
#trpSendModal .trp-send-pick { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
#trpSendModal .trp-send-row input[type=checkbox]:disabled { opacity: .4; }
#trpSendModal .trp-auto-wrap { flex: 0 0 auto; }
#trpSendModal .trp-auto-btn {
  width: auto !important; margin: 0 !important;
  padding: 5px 10px; border: 1px solid #cbd5e1; border-radius: 999px;
  background: #f8fafc; color: #475569; font-size: 11.5px; font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
#trpSendModal .trp-auto-btn:disabled { opacity: .4; cursor: not-allowed; }
/* 켜져 있으면 몇 분인지 버튼에 그대로 적히고 색이 바뀐다 */
#trpSendModal .trp-auto-btn.is-on { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
/* ⚠️ 종전엔 position:absolute 로 띄웠는데, 목록 상자의 overflow:hidden 에 **잘려서 안 보였다**
   (곽팀장 제보 2026-09-13). 띄우지 않고 **그 줄 아래에 펼친다** — 잘릴 일이 없다. */
#trpSendModal .trp-auto-menu {
  flex: 1 0 100%; min-width: 0;
  display: flex; justify-content: flex-end; gap: 6px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}
#trpSendModal .trp-auto-menu.hidden { display: none; }
#trpSendModal .trp-auto-pick {
  width: auto !important; margin: 0 !important;
  padding: 7px 14px; border: 1px solid #e2e8f0; border-radius: 7px;
  background: #fff; color: #334155; font-size: 11.5px; font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
#trpSendModal .trp-auto-pick:hover { background: #f1f5f9; }
#trpSendModal .trp-auto-pick.is-on { background: #059669; border-color: #059669; color: #fff; }


/* 전송 팝업 — **한 사람 = 한 줄**(곽팀장 2026-09-13). 이름 아래 설명줄을 없애서 한 줄로 충분하다.
   이름이 길면 …으로 줄이고 자동전송 버튼은 절대 눌리지 않게 고정폭으로 둔다. */
@media (max-width: 560px) {
  #trpSendModal .trp-send-row { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
  #trpSendModal .trp-send-name {
    font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #trpSendModal .trp-auto-wrap { flex: 0 0 auto; }
  #trpSendModal .trp-auto-btn { padding: 5px 8px; font-size: 11px; }
  #trpSendModal .trp-auto-menu { right: 0; }
}

/* 보고위치 칸의 '자료 원천' 꼬리표 — E-mail / 대화방 / API / AIS / 엑셀 / 수동 (곽팀장 2026-09-13) */
#trpModal .trp-pos-src {
  grid-column: 2; grid-row: 1; justify-self: start;
  padding: 3px 9px;
  border-radius: 999px; background: #e0e7ff; color: #4338ca;
  font-size: 11px; font-weight: 800; line-height: 1.5; white-space: nowrap;
}

/* 자동전송 구간 안내 — 알림칸과 분리한 전용 줄(알림을 덮지 않게, 곽팀장 2026-09-13) */
#trpSendModal .trp-send-win {
  margin: -2px 0 9px; padding: 7px 10px;
  border: 1px solid #a7f3d0; border-radius: 8px;
  background: #ecfdf5; color: #047857;
  font-size: 12px; font-weight: 700; line-height: 1.5;
}
#trpSendModal .trp-send-win.hidden { display: none; }

/* =========================================================
   📝 통항계획 등록 (곽팀장 지시 2026-09-17)
   이메일은 참고자료, 사람이 등록한 것만 통항계획 — 화면도 그 뜻대로 이분할이다.
     왼쪽(정본) = 흰 바탕 · 파란 테두리  ·  오른쪽(참고) = 회색 바탕
========================================================= */
/* 모니터링 팝업 머리 — 등록 버튼 한 줄 */
/* 팝업 제목줄 — 제목 / 기준 / [📝 통항계획 등록] 을 한 줄에, 버튼은 맨 오른쪽 */
#transitPlanModal .custom-alert-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#transitPlanModal .tp-reg-open {
  flex: 0 0 auto;              /* 팝업 공통 button 규칙이 100% 로 늘여 놓는 것을 막는다 */
  width: auto;
  margin-left: auto;           /* 같은 줄 맨 오른쪽 */
  border: 1px solid #1d4ed8;
  background: #1d4ed8;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
#transitPlanModal .tp-reg-open:hover { background: #1e40af; border-color: #1e40af; }

#transitRegContent { font-size: 13px; }
#transitRegContent .tp-reg-msg {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-weight: 600;
  color: #0f172a;
}
#transitRegContent .tp-reg-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
  align-items: start;
}
#transitRegContent .tp-reg-pane {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  min-width: 0;
}
/* 왼쪽 칸(정본)에 파란 테두리·안쪽 그림자를 줬던 것 — 곽팀장 지시 2026-09-17 '이 파란 디자인은 빼줘' */
#transitRegContent .tp-reg-right { background: #f8fafc; }
#transitRegContent .tp-reg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
#transitRegContent .tp-reg-h1 { font-weight: 800; font-size: 14px; color: #0f172a; }
#transitRegContent .tp-reg-n {
  background: #e0e7ff; color: #3730a3; border-radius: 999px;
  padding: 1px 8px; font-size: 12px; font-weight: 700;
}
#transitRegContent .tp-reg-ref { color: #b45309; font-size: 12px; font-weight: 600; }
#transitRegContent .tp-reg-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 7px;
  background: #fff;
}
/* 등록카드 왼쪽 파란 막대도 뺀다(같은 지시) — 구분은 '현재 통항계획' 제목과 칸 위치로 충분하다 */
#transitRegContent .tp-reg-row1 {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
#transitRegContent .tp-reg-name { font-size: 14px; color: #0f172a; }
#transitRegContent .tp-reg-acts { margin-left: auto; display: flex; gap: 5px; }
#transitRegContent .tp-reg-row2 { margin-top: 3px; color: #334155; }
#transitRegContent .tp-reg-row3 { margin-top: 3px; font-size: 14px; color: #0f172a; }
#transitRegContent .tp-reg-foot { margin-top: 4px; color: #94a3b8; font-size: 11.5px; }
#transitRegContent .tp-reg-none { color: #cbd5e1; }
#transitRegContent .tp-reg-z-in { color: #64748b; font-weight: 600; font-size: 12.5px; }
#transitRegContent .tp-reg-bound.in { color: #1d4ed8; font-weight: 700; }
#transitRegContent .tp-reg-bound.out { color: #ca8a04; font-weight: 700; }
#transitRegContent .tp-reg-badge {
  border-radius: 999px; padding: 1px 7px; font-size: 11.5px; font-weight: 700;
}
#transitRegContent .tp-reg-badge.ok { background: #dcfce7; color: #15803d; }
#transitRegContent .tp-reg-badge.diff { background: #fee2e2; color: #b91c1c; }
#transitRegContent .tp-reg-empty {
  color: #64748b; padding: 18px 10px; text-align: center; line-height: 1.7;
}

/* ⛔ 시각 미확정으로 1차 계획에서 뺀 배 — 지우지 않고 이유를 적는다 (곽팀장 2026-09-29) */
#transitRegContent .tp-reg-unset {
  margin-top: 10px; border: 1px dashed #fcd34d; background: #fffbeb;
  border-radius: 9px; padding: 9px 11px; color: #92400e; font-size: 12.5px; line-height: 1.6;
}
#transitRegContent .tp-reg-unset ul { margin: 6px 0 0; padding-left: 16px; }
#transitRegContent .tp-reg-unset li { margin-top: 4px; }
#transitRegContent .tp-reg-unset-raw { color: #b45309; }
#transitRegContent .tp-btn-sm { padding: 2px 7px; font-size: 11.5px; margin-left: 4px; }
#transitRegContent .tp-btn {
  flex: 0 0 auto;              /* 팝업 공통 button 규칙(width:100%)에 늘어나지 않게 */
  width: auto;
  border: 1px solid #cbd5e1; background: #fff; color: #334155;
  border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
#transitRegContent .tp-btn:hover { background: #f1f5f9; }
#transitRegContent .tp-btn-go { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
#transitRegContent .tp-btn-go:hover { background: #1e40af; }
#transitRegContent .tp-btn-del { border-color: #fecaca; color: #b91c1c; }
#transitRegContent .tp-btn-del:hover { background: #fef2f2; }
#transitRegContent .tp-btn-addr { margin-left: auto; border-color: #0f766e; color: #0f766e; }
#transitRegContent .tp-btn-addr:hover { background: #f0fdfa; }
#transitRegContent .tp-btn-add { margin-left: 6px; border-color: #1d4ed8; color: #1d4ed8; }

/* 등록·수정 입력칸 */
#transitRegContent .tp-reg-form {
  border: 1px solid #93c5fd; background: #eff6ff; border-radius: 9px;
  padding: 10px; margin-bottom: 9px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 9px;
}
#transitRegContent .tp-reg-form-title {
  grid-column: 1 / -1; font-weight: 800; color: #1e3a8a; font-size: 13px;
}
#transitRegContent .tp-reg-form label {
  display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #1e3a8a; font-weight: 700;
}
#transitRegContent .tp-reg-form input,
#transitRegContent .tp-reg-form select {
  border: 1px solid #bfdbfe; border-radius: 6px; padding: 6px 8px;
  font-size: 13px; font-weight: 600; color: #0f172a; background: #fff;
  width: 100%; box-sizing: border-box;
}
#transitRegContent .tp-reg-z {
  grid-column: 1 / -1; font-size: 12px; color: #1e3a8a;
}
#transitRegContent .tp-reg-z b { font-size: 13.5px; }
#transitRegContent .tp-reg-z span { color: #64748b; font-weight: 600; }
#transitRegContent .tp-reg-src { grid-column: 1 / -1; font-size: 11.5px; color: #64748b; }
#transitRegContent .tp-reg-form-btns { grid-column: 1 / -1; display: flex; gap: 6px; }

/* 폰 — 이분할을 위아래로 접고 팝업은 전체 화면 */
@media (max-width: 767px) {
  #transitRegContent .tp-reg-split { grid-template-columns: 1fr; }
  #transitRegContent .tp-reg-form { grid-template-columns: 1fr; }
  #transitRegModal.custom-alert-overlay { padding: 0; align-items: stretch; justify-content: stretch; }
  #transitRegModal .custom-alert-box {
    width: 100% !important; max-width: none !important;
    height: 100vh; height: 100dvh; max-height: none;
    border: none; border-radius: 0; box-shadow: none;
  }
  #transitRegModal .custom-alert-title { padding-top: calc(12px + env(safe-area-inset-top)); flex: 0 0 auto; }
  #transitRegModal .custom-alert-message.schedule-modal-body { flex: 1 1 auto; max-height: none; }
  #transitRegModal .custom-alert-actions { flex: 0 0 auto; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  #transitRegModal .custom-alert-ok { height: 44px; font-size: 15px; }
}
/* 표에서 '이 계획은 사람이 등록한 것' 임을 한 낱말로 — 근거를 숨기지 않는다 [[CONSTITUTION]] */
#transitPlanModalContent .tp-regchip {
  display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 999px;
  background: #dbeafe; color: #1d4ed8; font-size: 10.5px; font-weight: 800; vertical-align: middle;
}
/* (삭제) 등록 안내 노란 띠 — 곽팀장 지시 2026-09-17 '이 안내문구는 삭제' */


/* =========================================================
   🗺 통항계획 지도 — 통항준비 사이트 지도판(static/sohmap)을 iframe 으로 띄운다
   지도판 원본은 892x688 고정 크기다 → 폭에 맞춰 통째로 축소한다(잘라내지 않는다).
========================================================= */
#transitMapModal .custom-alert-message.schedule-modal-body { max-height: 78vh; }
#transitMapModal .tm-note { margin: 0 0 8px; color: #92400e; font-size: 12.5px; line-height: 1.7; }
#transitMapModal .tm-note:empty { display: none; }
#transitMapModal .tm-stage {
  /* 크기는 JS(tmFitFrame)가 정한다 — 가로·세로 둘 다 들어가는 축척으로 */
  width: 892px;
  height: 688px;
  max-width: 100%;
  margin: 0 auto;
  background: #0b1220;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
#transitMapModal #transitMapFrame {
  width: 892px;
  height: 688px;
  border: 0;
  transform-origin: 0 0;
  /* 축척은 JS(tmFitFrame)가 상자 폭에 맞춰 넣는다 — CSS calc 로는 scale() 에 숫자를 못 준다 */
  transform: scale(1);
}
/* 지도판 안쪽 — 입력창을 접어 지도만 보이게(지도판 파일은 건드리지 않는다) */
#transitMapModal .tm-btn { display: none; }
/* 표·카드의 🗺 버튼 */
#transitPlanModalContent .tm-btn {
  border: 1px solid #cbd5e1; background: #fff; border-radius: 6px;
  padding: 2px 6px; font-size: 12px; cursor: pointer; margin-right: 3px;
  /* ⚠️ 사이트 공통 button 규칙이 width:100% 라 그냥 두면 🗺 가 칸을 다 먹고
     [보고] 가 아래로 밀려 사라진다(곽팀장 2026-09-17 '보고 버튼이 왜 이렇게 됐어'). */
  width: auto; flex: 0 0 auto; line-height: 1.4;
}
#transitPlanModalContent .tm-btn:hover { background: #f1f5f9; }
#transitRegContent .tm-btn {
  border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 7px;
  padding: 4px 9px; font-size: 12px; font-weight: 700; cursor: pointer;
  flex: 0 0 auto; width: auto; white-space: nowrap;   /* 줄바꿈되면 '지도' 글자가 잘린다 */
}
#transitRegContent .tm-btn:hover { background: #f1f5f9; }
@media (max-width: 767px) {
  #transitMapModal.custom-alert-overlay { padding: 0; align-items: stretch; justify-content: stretch; }
  #transitMapModal .custom-alert-box { width: 100% !important; max-width: none !important;
    height: 100vh; height: 100dvh; max-height: none; border: none; border-radius: 0; }
  #transitMapModal .custom-alert-message.schedule-modal-body { flex: 1 1 auto; max-height: none; }
  #transitMapModal .custom-alert-actions { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* 📧 이메일 자료수집 (등록 팝업 오른쪽 머리) */
#transitRegContent .tp-reg-mailslot { margin-left: auto; }
#transitRegContent .tp-reg-mailslot:empty { display: none; }
#transitRegContent .tp-btn-mail { border-color: #0f766e; color: #0f766e; }
#transitRegContent .tp-mail {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #99f6e4;
  background: #f0fdfa;
  border-radius: 9px;
  padding: 9px;
}
#transitRegContent .tp-mail-title { font-weight: 800; color: #0f766e; font-size: 12.5px; margin-bottom: 6px; }
#transitRegContent .tp-mail textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #99f6e4; border-radius: 6px;
  padding: 6px 8px; font: 12px/1.5 inherit; resize: vertical;
  background: #fff; color: #0f172a;      /* 사이트 공통 어두운 입력칸 규칙을 끊는다 */
}
#transitRegContent .tp-mail-btns { display: flex; gap: 6px; margin-top: 6px; }
#transitRegContent .tp-mail-msg { margin-top: 6px; font-size: 12px; font-weight: 700; color: #0f172a; }
#transitRegContent .tp-mail-log {
  margin: 6px 0 0; padding: 7px 9px; background: #0f172a; color: #e2e8f0;
  border-radius: 6px; font: 11px/1.5 ui-monospace, Menlo, monospace;
  white-space: pre-wrap; max-height: 170px; overflow: auto;
}
/* 등록본 CP 5칸 한 줄 */
#transitRegContent .tp-reg-cps {
  margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px 7px; align-items: baseline;
}
#transitRegContent .tp-reg-cp { color: #94a3b8; font-size: 11.5px; white-space: nowrap; }
/* 등록 화면 CP 칸의 Z·KST 보조 표기 — 통항 모니터링과 같은 순서(LT → Z → KST) */
#transitRegContent .tp-reg-cp-kst {
  display: block; font-style: normal; font-size: 10px; line-height: 1.25;
  color: #a3adba; font-weight: 400;
}
#transitRegContent .tp-reg-cp.is-real .tp-reg-cp-kst { color: #7b8794; font-weight: 500; }
#transitRegContent .tp-reg-cp b { color: #64748b; font-weight: 700; margin-right: 3px; }
#transitRegContent .tp-reg-cp.is-real { color: #0f172a; font-weight: 700; }
#transitRegContent .tp-reg-cp.is-real b { color: #1d4ed8; }
#transitRegContent .tp-reg-cp-note { color: #cbd5e1; font-size: 11px; }

/* 등록 화면 카드 상태 — **이미 통항 중인 배는 다른 색**(곽팀장 지시 2026-09-17).
   근거는 통항 모니터링 표와 같다(지도 분류·원장 실적). 색은 표의 상태 글자색과 맞춘다. */
#transitRegContent .tp-reg-card.is-now  { background: #eff6ff; border-color: #93c5fd; }
#transitRegContent .tp-reg-card.is-done { background: #f0fdf4; border-color: #86efac; }
#transitRegContent .tp-reg-card.is-stop { background: #fef2f2; border-color: #fecaca; }
#transitRegContent .tp-reg-state {
  border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
#transitRegContent .tp-reg-state.is-now  { background: #dbeafe; color: #0369a1; }
#transitRegContent .tp-reg-state.is-done { background: #dcfce7; color: #15803d; }
#transitRegContent .tp-reg-state.is-stop { background: #fee2e2; color: #b91c1c; }

/* ⏱ 실제 통항한 시간 (곽팀장 2026-09-17) — 실적 기준은 진하게, 계획으로 잰 값은 회색 */
#transitPlanModalContent .tp-span { font-size: 11.5px; font-weight: 700; color: #0f766e; }
#transitPlanModalContent .tp-span-inline { font-weight: 700; color: #0f766e; }
/* (삭제) '계획 기준' 회색 표기 — 계획으로는 아예 재지 않는다(곽팀장 2026-09-17) */

/* 📒 통항기록 버튼 — 제목줄, [통항계획 등록] 왼쪽 (곽팀장 2026-09-17) */
#transitPlanModal .tp-rec-open {
  flex: 0 0 auto; width: auto; margin-left: auto;   /* 오른쪽 묶음의 첫 버튼 */
  border: 1px solid #0f766e; background: #fff; color: #0f766e;
  font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 8px;
  cursor: pointer; white-space: nowrap;
}
#transitPlanModal .tp-rec-open:hover { background: #f0fdfa; }
#transitPlanModal .tp-rec-open + .tp-reg-open { margin-left: 6px; }  /* 둘째 버튼은 바로 옆에 */
#transitRecContent .tp-rec-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
#transitRecContent .tp-rec-n {
  background: #ccfbf1; color: #0f766e; border-radius: 999px; padding: 1px 9px;
  font-size: 12px; font-weight: 800;
}
#transitRecContent .tp-rec-file { color: #64748b; font-size: 12px; }
#transitRecContent .tp-rec-dl {
  margin-left: auto; border: 1px solid #cbd5e1; border-radius: 7px; padding: 4px 10px;
  font-size: 12px; font-weight: 700; color: #334155; text-decoration: none;
}
#transitRecContent .tp-rec-dl:hover { background: #f1f5f9; }
#transitRecContent .tp-regchip {
  display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 999px;
  background: #dbeafe; color: #1d4ed8; font-size: 10.5px; font-weight: 800; vertical-align: middle;
}
#transitRecContent .tp-cp-kst,
#transitRecContent .tp-cp-z { display: block; color: #94a3b8; font-size: 10.5px; }
@media (max-width: 767px) {
  #transitRecModal.custom-alert-overlay { padding: 0; align-items: stretch; justify-content: stretch; }
  #transitRecModal .custom-alert-box { width: 100% !important; max-width: none !important;
    height: 100vh; height: 100dvh; max-height: none; border: none; border-radius: 0; }
  #transitRecModal .custom-alert-message.schedule-modal-body { flex: 1 1 auto; max-height: none; }
}


/* ── 📧 선박 메일주소 (통항계획 등록 → 📧 선박메일) ─────────────────────────
   Outlook 규칙에 통째로 붙여넣을 칸이 주인공이라 글꼴은 고정폭, 줄간격을 넉넉히. */
#transitMailContent .tp-addr-text {
  width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 8px;
  padding: 10px 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.7; background: #fbfcfd; color: #16202c; resize: vertical;
}
#transitMailContent .tp-addr-who {
  margin: 10px 0 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.75; color: #64748b;
}
#transitMailContent .tp-addr-who li {
  display: flex; gap: 8px; align-items: baseline;
  border-bottom: 1px solid #eef2f7; padding: 4px 0;
}
#transitMailContent .tp-addr-who b { color: #0f172a; min-width: 165px; flex: 0 0 auto; }
#transitMailContent .tp-addr-who .ad {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #16202c; word-break: break-all;
}
#transitMailContent .tp-addr-who .no { color: #b91c1c; font-weight: 700; }
#transitMailContent .tp-addr-who .sh { color: #94a3b8; }
#transitMailContent .tp-addr-note { font-size: 11.5px; color: #94a3b8; line-height: 1.7; margin-top: 9px; }
#transitMailContent .tp-addr-wait { color: #64748b; padding: 16px 8px; text-align: center; }
#transitMailContent .tp-addr-err { color: #b91c1c; padding: 16px 8px; text-align: center; font-weight: 700; }
#transitMailModal .tp-addr-only {
  font-size: 12px; color: #94a3b8; margin-right: auto;   /* 왼쪽에 붙이고 버튼은 오른쪽으로 */
  flex: 0 0 auto; white-space: nowrap;     /* 아랫줄 공통 규칙에 눌려 여러 줄로 접히던 것 */
}
#transitMailModal .tp-addr-msg { font-size: 11.5px; color: #0f766e; font-weight: 700; }
@media (max-width: 700px) {
  #transitMailContent .tp-addr-who b { min-width: 0; display: block; }
  #transitMailContent .tp-addr-who li { display: block; }
}


/* =========================================================================
   📱 통항 모니터링 머리 — 폰에서 **한 줄** (곽팀장 2026-09-17 22:07
     "모바일에서 이 부분 모두 한 줄에 표시하도록, 줄바꿈으로 깨지지 않게")

   ⚠ 이 블록은 **파일 끝**에 있어야 한다. 같은 선택자·같은 특이도라면 **나중에 쓴 것이 이긴다** —
     위쪽 미디어쿼리에 넣었더니 뒤에 오는 `.custom-alert-title { flex-wrap: wrap }` 에 덮여
     버튼이 그대로 아랫줄로 떨어졌다(2026-09-17 실측: 386px 에서 머리 높이 131px).
   ========================================================================= */
@media (max-width: 767px) {
  #transitPlanModal .custom-alert-title {
    flex-wrap: nowrap;                    /* 줄바꿈 금지 — 이것이 핵심 */
    gap: 6px;
    font-size: 17px;
  }
  /* 좁아지면 줄어드는 쪽은 **제목**이다 — 버튼 글자를 자르면 무슨 버튼인지 알 수 없다 */
  #transitPlanModal #transitPlanModalTitle {
    min-width: 0; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #transitPlanModal .tp-rec-open,
  #transitPlanModal .tp-reg-open {
    font-size: 12px; padding: 6px 9px; border-radius: 7px; margin-left: 4px;
  }
  #transitPlanModal .tp-rec-open + .tp-reg-open { margin-left: 4px; }
}
@media (max-width: 380px) {
  #transitPlanModal .custom-alert-title { font-size: 15px; }
  #transitPlanModal .tp-rec-open,
  #transitPlanModal .tp-reg-open { font-size: 11.5px; padding: 6px 7px; }
}

/* =========================================================
   2026-09-29 fix: 모바일에서 선박 안내판의 '닫기' 가 안 보이던 문제 (곽팀장)
   - 원인 ① sticky footer 규칙이 PC용 .center-fixed-label 에만 있었다.
     모바일 전체화면 안내판은 footer 가 스크롤 맨 끝에 있어, 내용이 길면 화면 밖으로 밀렸다.
   - 원인 ② '선박명' 글자크기 바(#nameSpreadFontBar, z-index 10002)가
     라벨 레이어(z-index 1600)보다 위라 하단 닫기 영역을 덮었다.
     ⚠️ 라벨 레이어를 10002 위로 올리면 결과창 모달(z-index 5000)까지 덮으므로 z 조정은 안 한다.
   - 조치: 모바일에서도 footer 를 패널 하단에 고정(sticky), 안내판이 떠 있는 동안 글자크기 바는 숨김.
========================================================= */
@media (max-width: 1100px) {
  .label-layer.mobile-fullscreen-active .map-label.map-label-redesign.mobile-overlay .detail-panel-footer,
  .label-layer.mobile-fullscreen-active .map-label.map-label-redesign.mobile-fullscreen .detail-panel-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: inherit !important;
    margin: 6px -14px 0 !important;                              /* 패널 좌우 padding(14px) 상쇄 = 배경 끝까지 */
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.35);
  }

  /* 전체화면 안내판이 떠 있는 동안에는 지도용 글자크기 바를 숨긴다(닫기 줄을 가림).
     DOM 순서: #labelLayer → … → #nameSpreadFontBar (mapWrap 에 나중에 append) 이므로 ~ 선택자가 닿는다. */
  .label-layer.mobile-fullscreen-active ~ .name-spread-fontbar {
    display: none !important;
  }
}

/* =========================================================
   동의서 팝업 (곽팀장 2026-09-29) — '동의서' 버튼 → 검토 사이트(/crewconsent) 최근 통항건 자료
   z-index: FAB(99999)·custom-alert(99999) 위에 올린다. 배경막을 깔고 화면을 독점하는 진짜 모달이라
   FAB 가 뚫고 올라오면 안 된다.
========================================================= */
.consent-files-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
}

.consent-files-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.consent-files-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 24px));
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.consent-files-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e2e8f0;
}

.consent-files-title { font-size: 16px; font-weight: 900; color: #0f172a; line-height: 1.2; }
.consent-files-vessel { margin-top: 2px; font-size: 13px; font-weight: 700; color: #2563eb; }

.consent-files-x {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 9px;
  background: #e2e8f0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}
.consent-files-x:hover { background: #cbd5e1; }

.consent-files-body { padding: 12px 16px 16px; overflow-y: auto; }

.consent-files-sub {
  margin: 10px 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
}
.consent-files-sub:first-child { margin-top: 0; }
.consent-files-sub .cf-more { font-weight: 600; color: #94a3b8; }

.consent-files-msg { padding: 10px 0; font-size: 13px; line-height: 1.5; color: #334155; }
.consent-files-msg.err { color: #b91c1c; font-weight: 700; }

.consent-file-row {
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.consent-file-row.legacy { background: #fffbeb; border-color: #fcd34d; }
.consent-file-name { font-size: 13px; font-weight: 800; color: #0f172a; word-break: break-all; }
.consent-file-meta { margin-top: 2px; font-size: 11.5px; color: #64748b; }
.consent-file-acts, .consent-files-acts { display: flex; gap: 8px; margin-top: 8px; }

.cf-btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  color: #ffffff;
}
.cf-view { background: #14b8a6; }
.cf-dl   { background: #0ea5e9; }
.cf-go   { background: #64748b; }
.cf-btn:hover { filter: brightness(0.92); }