/* =========================================================
   선박관리사이트 style.css 전체 교체본
   - 중복 선언 정리 완료
   - INDEX 메인 입력화면 색상은 :root 변수로 일괄 조정
========================================================= */

/* ===== Bunker R.O.B 토글 패널 ===== */
.position-table-panel {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 600;
  width: 340px;
  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 tbody tr:nth-child(even) td { background: #f3f4f6; }
.position-table tbody tr:hover td { background: #dbeafe; }
.position-table .pt-col-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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;
}

/* ===== 싸이렌(위치 점프 경고) 버튼 배지 + 패널 ===== */
.measure-control button#drawBtn_siren {
  position: relative;
}
.siren-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 7px;
  background: #dc2626;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.siren-badge[hidden] { display: none; }
.siren-table-panel {
  width: 360px;
  left: auto;
  right: 112px;
  top: 50%;
  transform: translateY(-50%);
}
.siren-table .pt-col-no {
  width: 40px;
  text-align: right;
  color: #6b7280;
}
.siren-table .pt-col-date {
  white-space: nowrap;
  color: #6b7280;
}
.siren-table .pt-col-pos {
  font-family: 'Consolas', 'Menlo', monospace;
  color: #b91c1c;
  white-space: nowrap;
}

/* =========================
   공통 변수
========================= */
: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;

  /* =====================================================
     INDEX 메인페이지 입력화면 전용 색상 컨트롤
     아래 값만 바꾸면 좌측 입력영역 전체 톤 변경 가능
  ===================================================== */

  /* 1. 좌측 사이드 전체 */
  --idx-sidebar-bg: #111827;
  --idx-sidebar-border: #374151;
  --idx-page-title: #f9fafb;
  --idx-page-text: #e5e7eb;
  --idx-page-text-soft: #9ca3af;

  /* 2. 카드 공통 */
  --idx-card-bg: #1f2937;
  --idx-card-border: #374151;
  --idx-card-title: #f8fafc;
  --idx-card-radius: 14px;

  /* 3. 아코디언 */
  --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;

  /* 4. 라벨 / 기본 입력칸 */
  --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-input-radius: 10px;

  /* 5. 기본 버튼 */
  --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;

  /* 6. 진행중 / 완료 상단 필터 */
  --idx-filter-wrap-border: #475569;
  --idx-filter-btn-bg: rgba(255, 255, 255, 0.05);
  --idx-filter-btn-text: #f8fafc;
  --idx-filter-divider: #475569;
  --idx-filter-active-progress-bg: #2563eb;
  --idx-filter-active-progress-text: #ffffff;
  --idx-filter-active-done-bg: #16a34a;
  --idx-filter-active-done-text: #ffffff;

  /* 7. 현안/COC/SIRE/Condition 카드 */
  --idx-dynamic-card-bg: rgba(255, 255, 255, 0.03);
  --idx-dynamic-card-border: #475569;
  --idx-dynamic-card-title-text: #f8fafc;
  --idx-dynamic-card-divider: #475569;
  --idx-dynamic-card-meta-bg: rgba(255, 255, 255, 0.04);
  --idx-dynamic-card-meta-text: #f8fafc;

  /* 8. 동적 카드 내부 입력칸 */
  --idx-dynamic-input-bg: #0b1733;
  --idx-dynamic-input-border: #4b5563;
  --idx-dynamic-input-text: #f8fafc;
  --idx-dynamic-input-placeholder: #94a3b8;

  /* 9. 진행/완료 상태 버튼 */
  --idx-status-btn-bg: rgba(255, 255, 255, 0.04);
  --idx-status-btn-text: #f8fafc;
  --idx-status-btn-divider: #475569;
  --idx-status-active-progress-bg: #3677c7;
  --idx-status-active-progress-text: #ffffff;
  --idx-status-active-done-bg: #2f9e44;
  --idx-status-active-done-text: #ffffff;

  /* 10. 추가 버튼 */
  --idx-add-btn-bg: #374151;
  --idx-add-btn-hover: #4b5563;
  --idx-add-btn-text: #f8fafc;

  /* 11. 체크박스 */
  --idx-critical-text: #f8fafc;
  --idx-critical-accent: #2563eb;

  /* 12. 관리사 비용 카드 */
  --idx-cost-card-bg: rgba(15, 23, 42, 0.28);
  --idx-cost-card-border: #334155;
  --idx-cost-group-title: #f8fafc;
  --idx-cost-subtitle: #93c5fd;
  --idx-cost-divider: rgba(148, 163, 184, 0.22);
  --idx-cost-label: #e2e8f0;
  --idx-cost-input-bg: #0b1733;
  --idx-cost-input-border: #3b4b68;
  --idx-cost-input-text: #f8fafc;

  /* 13. Report / 외부링크 버튼 */
  --idx-report-btn-bg: #1e3a5f;
  --idx-report-btn-hover: #16304d;
  --idx-report-btn-text: #ffffff;

  --idx-external-link-bg: #1e3a5f;
  --idx-external-link-hover: #16304d;
  --idx-external-link-text: #ffffff;

  /* 14. 선박 리스트 */
  --idx-vessel-item-bg: #0f172a;
  --idx-vessel-item-border: #374151;
  --idx-vessel-item-title: #f9fafb;
  --idx-vessel-item-text: #cbd5e1;
  --idx-vessel-item-soft: #9ca3af;

  /* 15. Footer */
  --idx-footer-text: #9ca3af;
  --idx-footer-border: #374151;
}


/* =========================
   기본
========================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
}

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

/* =========================
   좌측 사이드바
========================= */
.sidebar {
  background: var(--idx-sidebar-bg);
  border-right: 1px solid var(--idx-sidebar-border);
  padding: 20px;
  overflow-y: auto;
  color: var(--idx-page-text);
}

.sidebar h1 {
  margin: 0 0 16px;
  font-size: 22px;
  color: var(--idx-page-title);
}

.sidebar p {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--idx-page-text-soft);
  line-height: 1.5;
}

/* =========================
   카드 공통
========================= */
.card {
  background: var(--idx-card-bg);
  border: 1px solid var(--idx-card-border);
  border-radius: var(--idx-card-radius);
  padding: 16px;
  margin-bottom: 16px;
}

.card h2 {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--idx-card-title);
}

/* =========================
   폼 공통
========================= */
label {
  display: block;
  margin: 8px 0 4px;
  font-size: 12px;
  color: var(--idx-label-text);
}

input,
select,
textarea,
button {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--idx-input-border);
  padding: 10px 14px;
  font-size: 12px;
}

input,
select,
textarea {
  height: 42px;
  background: var(--idx-input-bg);
  color: var(--idx-input-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--idx-input-placeholder);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--idx-input-focus-border);
  box-shadow: 0 0 0 3px var(--idx-input-focus-shadow);
}

textarea {
  font-family: Arial, sans-serif;
}

.issue-text,
.issue-textarea,
.issue-card textarea {
  resize: none !important;
}

/* =========================
   버튼 공통
========================= */
button {
  margin-top: 0;
  background: var(--idx-btn-primary-bg);
  color: var(--idx-btn-primary-text);
  border: none;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background: var(--idx-btn-primary-hover);
}

.btn-secondary {
  background: var(--idx-btn-secondary-bg);
  color: var(--idx-btn-secondary-text);
  margin-top: 8px;
}

.btn-secondary:hover {
  background: var(--idx-btn-secondary-hover);
}

/* =========================
   지도
========================= */
.map-wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
  background: var(--bg-map);
}

/* =========================
   지도 상단 툴바
========================= */
.map-toolbar {
  position: absolute;
  top: 10px;
  left: 5%;
  right: 10px;
  z-index: 1200;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  /* 필터가 화면보다 길 때 스크롤바(사이드바) 숨김 — 스크롤 기능은 유지(스와이프/트랙패드) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.map-toolbar::-webkit-scrollbar { display: none; }

.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 {
  height: 45px;
  padding: 5px 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: 1 1 0;
  min-width: 70px;
  margin-top: 0;
}

.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: clamp(9px, 0.8vw, 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: clamp(13px, 1.2vw, 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: var(--idx-vessel-item-bg);
  border: 1px solid var(--idx-vessel-item-border);
  border-radius: 12px;
  padding: 12px;
}

.vessel-item strong {
  display: block;
  margin-bottom: 8px;
  color: var(--idx-vessel-item-title);
  font-size: 14px;
}

.vessel-item small {
  display: block;
  color: var(--idx-vessel-item-soft);
  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;
}

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

.list-value-orange {
  color: #ea580c;
  font-weight: 900;
}

.list-value-normal {
  color: var(--idx-vessel-item-text);
  font-weight: 600;
}

/* =========================
   지도 선박 아이콘
========================= */
.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: 285px;
  min-height: 120px;
  max-height: calc(100vh - 110px);
  background: rgba(255, 255, 255, 0.98);
  color: #111827;
  border-radius: 16px;
  border: 2px solid #d1d5db;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  padding: 11px 14px 10px 12px;
  font-size: 11px;
  line-height: 1.28;
  pointer-events: auto;
  z-index: 900;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: #c7b9a3 transparent;
}

.map-label::-webkit-scrollbar {
  width: 10px;
}

.map-label::-webkit-scrollbar-track {
  background: transparent;
  margin: 12px 0;
  border-radius: 999px;
}

.map-label::-webkit-scrollbar-thumb {
  background: #c7b9a3;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 42px;
}

.map-label::-webkit-scrollbar-corner {
  background: transparent;
}

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

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

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

.map-label.gray {
  border-color: #94a3b8;
  background: #f8fafc;
}

.map-label .title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 10px;
  color: #111827;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.map-card-section {
  margin-bottom: 12px;
}

.map-card-section:last-of-type {
  margin-bottom: 5px;
}

.map-card-section + .map-card-section {
  border-top: 1px solid rgba(148, 163, 184, 0.30);
  padding-top: 8px;
}

.map-card-section-title {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 9px;
  margin-bottom: 6px;
  background: rgba(15, 23, 42, 0.07);
  border-left: 4px solid #94a3b8;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 900;
  color: #111827;
  line-height: 1;
}

.map-label.green .map-card-section-title {
  border-left-color: #22c55e;
}

.map-label.orange .map-card-section-title {
  border-left-color: #f97316;
}

.map-label.yellow .map-card-section-title {
  border-left-color: #eab308;
}

.map-label.gray .map-card-section-title {
  border-left-color: #94a3b8;
}

.map-card-section-body {
  padding: 0 1px;
}

.map-card-section .line {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  align-items: start;
  margin-bottom: 3px;
}

.map-card-section .line-label {
  text-align: left;
  font-weight: 800;
  color: #475569;
  font-size: 11px;
  line-height: 1.22;
}

.map-card-section .line-value {
  text-align: left;
  color: #111827;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.22;
}

.map-card-section .line-value.map-value-red {
  color: #dc2626 !important;
  font-weight: 900;
}

.map-card-section .issue-line {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 6px;
  align-items: start;
  /* 1,2,3… 현안업무 항목 사이(및 끝)에 항상 한 줄(약 한 글자 높이) 여백 */
  margin-bottom: 14px;
}

/* 현안업무 첫 줄(날짜+제목) 굵게 강조 */
.map-card-section .issue-title {
  font-weight: 900;
}

/* 제목과 본문 사이 한 줄 여백 */
.map-card-section .issue-body {
  margin-top: 8px;
}

.map-card-section .issue-empty {
  padding: 1px 0;
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 700;
  line-height: 1.15;
}

.map-card-section .aor-summary-row {
  display: grid;
  grid-template-columns: 1fr 40px 82px;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.30);
}

.map-card-section .aor-summary-row:last-child {
  border-bottom: none;
}

.map-card-section .aor-summary-label {
  font-weight: 700;
  color: #334155;
  text-align: left;
  font-size: 10.8px;
  line-height: 1.15;
}

.map-card-section .aor-summary-count {
  font-weight: 700;
  color: #334155;
  text-align: left;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.15;
}

.map-card-section .aor-summary-amount {
  text-align: right;
  font-weight: 900;
  color: #1d4ed8;
  white-space: nowrap;
  font-size: 10.8px;
  line-height: 1.15;
}

.map-card-section .reports-block {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.map-card-section .report-row-compact {
  display: grid;
  grid-template-columns: 108px 1fr;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}

.map-card-section .report-left {
  font-size: 10.8px;
  font-weight: 800;
  color: #1f2937;
  line-height: 1.15;
}

.map-card-section .report-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
}

.map-card-section .report-half-btn {
  height: 26px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 0;
}

.map-label-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(148, 163, 184, 0.30);
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: inherit;
  margin-left: -2px;
  margin-right: -2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 6px;
}

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

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

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

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

/* 실시간 위치 버튼 — 기본 파랑, 추적중이면 초록 강조. width:auto 라 글자수에 비례해 넓어짐. */
.map-mini-btn.rt {
  background: #2563eb;
  color: #ffffff;
}
.map-mini-btn.rt:hover {
  background: #1d4ed8;
}
.map-mini-btn.rt.on {
  background: #16a34a;
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.35);
}
.map-mini-btn.rt.on:hover {
  background: #15803d;
}

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

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

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

.map-value-blue {
  color: #2563eb;
  font-weight: 800;
}

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

/* =========================
   지도 상세 카드 내부 공통
========================= */
.section-title {
  font-size: 12px;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 4px;
}

.section-divider {
  height: 1px;
  background: rgba(148, 163, 184, 0.35);
  margin: 7px 0;
}

.issue-empty {
  font-size: 11px;
  color: #94a3b8;
}

/* =========================
   Reports 블록
========================= */
.reports-block {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-row-compact {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.report-left {
  font-size: 11px;
  font-weight: 800;
  color: #1f2937;
}

.report-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
}

.report-half-btn {
  width: 100%;
  min-width: 0;
  padding: 4px 0;
  margin-top: 0;
  border: none;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
}

.report-half-btn.view {
  background: #7dd3c7;
  color: #ffffff;
}

.report-half-btn.upload {
  background: #1d9bf0;
  color: #ffffff;
}

.report-half-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =========================
   입력 보조
========================= */
.issue-input-row {
  position: relative;
  display: block;
  margin-bottom: 10px;
}

.issue-input-main {
  width: 100%;
}

.issue-input-main label {
  margin-top: 10px;
}

.issue-input-main input,
.issue-input-main textarea,
.issue-input-main select {
  width: 100%;
  padding-right: 90px;
}

.issue-critical-check {
  position: absolute;
  top: 34px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin-top: 0;
  border: 1px solid #475569;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #f9fafb;
  font-size: 10px;
  font-weight: 700;
  padding: 0 8px;
  z-index: 2;
  width: auto;
  min-width: 0;
}

.issue-critical-check input {
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  accent-color: #0ea5e9;
  flex: 0 0 auto;
}

/* =========================
   Report 관리
========================= */
.report-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.report-topbar h2 {
  margin: 0;
}

.report-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.report-link-grid-2x2 {
  grid-template-columns: repeat(2, 1fr);
}

.report-view-btn {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  height: 42px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--idx-report-btn-bg);
  color: var(--idx-report-btn-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.report-view-btn:hover {
  background: var(--idx-report-btn-hover);
}

/* hidden 속성이 display:flex에 덮이지 않도록(숨김 실제 적용) */
.report-view-btn[hidden] {
  display: none !important;
}

.report-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.report-upload-btn {
  width: 100%;
  margin: 0;
  height: 42px;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 12px;
}

/* =========================
   담당감독 3열 짝맞춤 (사이트 버튼 위 / API 버튼 아래)
========================= */
.supervisor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.supervisor-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.supervisor-col .report-upload-btn {
  margin-top: 0;
}

/* 준비중(URL 미정) 버튼·링크 회색 비활성 */
.report-link-btn.is-disabled,
.report-upload-btn.is-disabled {
  opacity: 0.45;
  filter: grayscale(1);
  pointer-events: none;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .supervisor-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   외부 링크 버튼
========================= */
.report-external-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.report-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 10px;
  background: var(--idx-external-link-bg);
  color: var(--idx-external-link-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.report-link-btn:hover {
  background: var(--idx-external-link-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  opacity: 0.95;
}

.report-link-btn:active {
  transform: scale(0.97);
}

/* =========================
   Report 페이지 공통
========================= */
.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;
  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;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

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

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

.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 표 공통
========================= */
.report-table-wrap {
  background: #ffffff;
  border: 1px solid #d7dde5;
  border-radius: 8px;
  overflow: auto;
}

.report-table {
  width: 100%;
  min-width: 1000px;
  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: bold;
}

.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 td.due-red,
.report-table .due-date-cell.due-red {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.report-table td.due-blue {
  color: #2563eb !important;
  font-weight: 700;
}

.report-table td.critical-yes {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.due-red {
  color: #ef4444;
  font-weight: 700;
}

/* =========================
   폼 하단 버튼
========================= */
#vesselForm > button[type="submit"] {
  width: 100%;
  margin-top: 8px;
}

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

/* =========================
   라인 표시
========================= */
.line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-bottom: 4px;
}

.line-label {
  text-align: left;
  font-weight: 800;
  color: #111827;
}

.line-value {
  text-align: left;
  color: #111827;
}

.line-value.map-value-red {
  color: #dc2626;
}

.issue-line {
  display: grid;
  grid-template-columns: 1fr 6fr;
  align-items: start;
  margin-bottom: 4px;
}

.hidden-block {
  display: none !important;
}

.hidden-by-filter {
  display: none !important;
}

.sub-section-title {
  margin: 18px 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: #f9fafb;
}

/* =========================
   SIRE 입력부
========================= */
.sire-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.sire-head {
  font-size: 12px;
  font-weight: 800;
  color: #cbd5e1;
  margin-top: 6px;
}

#sireSection {
  margin-top: 14px;
}

.sire-status-scheduled {
  color: #2563eb;
  font-weight: 800;
}

.sire-status-progress {
  color: #ea580c;
  font-weight: 800;
}

.sire-status-done,
.sire-status-complete {
  color: #16a34a;
  font-weight: 800;
}

.sire-status-fullreport {
  color: #0891b2; /* cyan-600 — Valid 이지만 잔여결함 있을 수 있는 중간 상태 */
  font-weight: 800;
}

.sire-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sire-row {
  border: 1px solid var(--idx-dynamic-card-border);
  border-radius: 12px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.28);
}

.sire-row-top {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.sire-row-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sire-row input,
.sire-row select,
.sire-row textarea {
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--idx-dynamic-input-bg);
  border: 1px solid var(--idx-dynamic-input-border);
  color: var(--idx-dynamic-input-text);
}

.sire-row textarea {
  white-space: normal;
}

.sire-row input::placeholder,
.sire-row textarea::placeholder {
  color: var(--idx-dynamic-input-placeholder);
  font-size: 12px;
}

/* =========================
   COC 입력부
========================= */
.coc-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.coc-head {
  font-size: 12px;
  font-weight: 800;
  color: #cbd5e1;
  margin-top: 6px;
}

.coc-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coc-item {
  border: 1px solid var(--idx-dynamic-card-border);
  border-radius: 12px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.22);
}

.coc-item-top {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  margin-bottom: 8px;
  align-items: end;
}

.coc-item-bottom {
  display: block;
}

.coc-item-top input,
.coc-item-bottom input {
  width: 100%;
  min-width: 0;
  height: 42px;
  background: var(--idx-dynamic-input-bg);
  border: 1px solid var(--idx-dynamic-input-border);
  color: var(--idx-dynamic-input-text);
}

.coc-item label {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
}

.coc-grid input::placeholder {
  color: #94a3b8;
  font-size: 12px;
}

/* =========================
   SIRE / Condition Report 표
========================= */
.sire-report-table,
.condition-report-table {
  width: 100%;
  table-layout: auto;
}

.sire-report-table th,
.sire-report-table td,
.condition-report-table th,
.condition-report-table td {
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
}

.sire-report-table .sire-name-col,
.sire-report-table td.sire-name-cell,
.condition-report-table .condition-name-col,
.condition-report-table td.condition-name-cell {
  white-space: nowrap;
  min-width: 160px;
}

.sire-report-table .sire-remark-col,
.sire-report-table td.sire-remark-cell,
.condition-report-table .condition-remark-col,
.condition-report-table td.condition-remark-cell {
  width: 33%;
  min-width: 320px;
  white-space: normal;
}

.sire-report-table td.sire-remark-cell,
.condition-report-table td.condition-remark-cell {
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

/* =========================
   COC Report 표
========================= */
.coc-report-table {
  width: 100%;
  table-layout: auto;
}

.coc-report-table th,
.coc-report-table td {
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
}

.coc-report-table .coc-name-col,
.coc-report-table td.coc-name-cell {
  width: 125px;
  min-width: 125px;
  white-space: normal;
  word-break: break-word;
}

.coc-report-table .coc-summary-col,
.coc-report-table td.coc-summary-cell {
  width: 33%;
  max-width: 33%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.coc-report-table .coc-due-col,
.coc-report-table td.coc-due-cell {
  width: 80px;
  min-width: 80px;
  white-space: normal;
  word-break: break-word;
}

.coc-report-table .col-name {
  width: 130px;
}

.coc-report-table .col-type {
  width: 90px;
}

.coc-report-table .col-mgmt {
  width: 110px;
}

.coc-report-table .col-owner {
  width: 110px;
}

.coc-report-table .col-no {
  width: 50px;
}

.coc-report-table .col-cert {
  width: 90px;
}

.coc-report-table .col-due {
  width: 95px;
}

.coc-report-table .col-summary {
  width: auto;
}

.coc-report-table .coc-summary-cell {
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

/* =========================
   관리사 비용 입력카드
========================= */
.cost-card {
  border: 1px solid var(--idx-cost-card-border);
  border-radius: 16px;
  padding: 14px;
  background: var(--idx-cost-card-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cost-group-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--idx-cost-group-title);
  margin-bottom: 6px;
}

.cost-subtitle {
  font-size: 12px;
  font-weight: 800;
  color: var(--idx-cost-subtitle);
  margin: 6px 0 4px;
}

.cost-divider {
  height: 1px;
  background: var(--idx-cost-divider);
  margin: 4px 0;
}

.cost-row {
  display: grid;
  gap: 6px;
  align-items: center;
  margin: 4px 0;
}

.cost-row-3,
.cost-row-year {
  grid-template-columns: 72px 1fr;
}

.cost-row-4 {
  grid-template-columns: 72px 60px 1fr;
}

.cost-label,
.cost-type {
  color: var(--idx-cost-label);
  font-size: 12px;
  font-weight: 700;
}

.cost-card input,
.cost-card select {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  background: var(--idx-cost-input-bg);
  border: 1px solid var(--idx-cost-input-border);
  color: var(--idx-cost-input-text);
  border-radius: 12px;
  height: 36px;
  padding: 8px 10px;
  font-size: 13px;
}

.cost-card input[id$="Amount"],
.cost-card input.money-input {
  text-align: right;
}

/* =========================
   관리사 비용 Report 표
========================= */
.management-cost-report-table {
  width: 100%;
  table-layout: fixed;
}

.management-cost-report-table th,
.management-cost-report-table td {
  text-align: center;
  vertical-align: middle;
}

.management-cost-report-table th:not(.col-remark),
.management-cost-report-table td:not(.remark-cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.management-cost-report-table .col-name,
.management-cost-report-table td.cell-name {
  width: 12%;
}

.management-cost-report-table .col-remark,
.management-cost-report-table td.remark-cell {
  width: 33.333%;
}

.management-cost-report-table .col-normal {
  width: auto;
}

.management-cost-report-table td.cell-name,
.management-cost-report-table td.remark-cell,
.management-cost-report-table .remark-cell {
  text-align: left;
}

.management-cost-report-table td.remark-cell,
.management-cost-report-table .remark-cell {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.management-cost-report-table td.amount-cell,
.management-cost-report-table th.col-amount,
.management-cost-report-table .amount-cell {
  text-align: right;
  white-space: nowrap;
}

.cost-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 400;
  padding: 0 6px;
  white-space: nowrap;
}

.cost-left {
  color: #64748b;
}

.cost-right {
  color: #0f172a;
  text-align: right;
}

.management-cost-report-table .cost-inline {
  white-space: nowrap;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 400;
}

.management-cost-report-table .cost-left {
  color: #64748b;
  flex: 0 0 auto;
  float: left;
}

.management-cost-report-table .cost-right {
  color: #0f172a;
  text-align: right;
  flex: 1 1 auto;
  float: right;
}

.management-cost-report-table .cost-inline::after {
  content: "";
  display: block;
  clear: both;
}

.management-cost-report-table .cost-dash {
  display: block;
  text-align: center;
  color: #94a3b8;
}

.management-cost-report-table .cost-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
}

/* =========================
   AOR 요약
========================= */
.aor-summary-row {
  display: grid;
  grid-template-columns: 1fr 52px 90px;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.aor-summary-label {
  font-weight: 400;
  text-align: left;
}

.aor-summary-count {
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

.aor-summary-amount {
  text-align: right;
  font-weight: 600;
  color: #2522c5;
  white-space: nowrap;
}

/* =========================
   아코디언
========================= */
.form-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accordion-section {
  border: 1px solid var(--idx-accordion-border);
  border-radius: 16px;
  background: var(--idx-accordion-bg);
  overflow: hidden;
}

.accordion-toggle {
  width: 100%;
  border: 0;
  background: var(--idx-accordion-header-bg);
  color: var(--idx-accordion-header-text);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.accordion-toggle::after {
  content: "＋";
  font-size: 20px;
  font-weight: 700;
  color: var(--idx-accordion-header-icon);
}

.accordion-section.open .accordion-toggle::after {
  content: "－";
}

.accordion-content {
  display: none;
  padding: 14px 16px 16px;
  background: var(--idx-accordion-content-bg);
}

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

/* =========================
   현안업무 / COC / SIRE / Condition
========================= */
.issue-top-filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--idx-filter-wrap-border);
  border-radius: 12px;
  overflow: hidden;
}

.issue-filter-btn {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  border: 0;
  border-radius: 0;
  background: var(--idx-filter-btn-bg);
  color: var(--idx-filter-btn-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.issue-filter-btn + .issue-filter-btn {
  border-left: 1px solid var(--idx-filter-divider);
}

.issue-filter-btn.active-progress {
  background: var(--idx-filter-active-progress-bg);
  color: var(--idx-filter-active-progress-text);
}

.issue-filter-btn.active-done {
  background: var(--idx-filter-active-done-bg);
  color: var(--idx-filter-active-done-text);
}

.issue-dynamic-list,
#issueSection {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.issue-card {
  border: 1px solid var(--idx-dynamic-card-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--idx-dynamic-card-bg);
}

.issue-card-title {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--idx-dynamic-card-title-text);
  border-bottom: 1px solid var(--idx-dynamic-card-divider);
}

.issue-card-body {
  padding: 12px;
  box-sizing: border-box;
}

.issue-text,
.issue-textarea,
.issue-card textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  padding: 12px;
  border: 1px solid var(--idx-dynamic-input-border);
  border-radius: 12px;
  background: var(--idx-dynamic-input-bg);
  color: var(--idx-dynamic-input-text);
  font-size: 13px;
  line-height: 1.45;
  font-family: Arial, sans-serif;
  resize: none !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  box-sizing: border-box;
}

.issue-text::placeholder,
.issue-textarea::placeholder,
.issue-card textarea::placeholder {
  color: var(--idx-dynamic-input-placeholder);
}

.issue-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-top: 1px solid var(--idx-dynamic-card-divider);
}

.issue-meta-cell {
  min-height: 30px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--idx-dynamic-card-meta-bg);
  color: var(--idx-dynamic-card-meta-text);
  font-size: 12px;
  font-weight: 800;
}

.issue-meta-cell + .issue-meta-cell {
  border-left: 1px solid var(--idx-dynamic-card-divider);
}

.issue-critical-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  line-height: 1;
  color: var(--idx-critical-text);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.issue-critical-label span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.issue-critical,
.issue-critical-label input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  flex: 0 0 12px;
  accent-color: var(--idx-critical-accent);
  vertical-align: middle;
}

.issue-check-btn {
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #d8eefc;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
}

.issue-check-btn + .issue-check-btn {
  border-left: 1px solid #475569;
}

.issue-check-btn.active {
  background: #2563eb;
  color: #ffffff;
}

.issue-check-grid {
  grid-template-rows: 24px 40px;
}

.issue-check-head {
  min-height: 24px;
  height: 24px;
  padding: 1px 4px;
}

.issue-status-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-top: 1px solid var(--idx-dynamic-card-divider);
}

.issue-status-btn {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 14px;
  font-weight: 800;
  background: var(--idx-status-btn-bg);
  color: var(--idx-status-btn-text);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.issue-status-btn + .issue-status-btn {
  border-left: 1px solid var(--idx-status-btn-divider);
}

.issue-status-btn.active-progress {
  background: var(--idx-status-active-progress-bg);
  color: var(--idx-status-active-progress-text);
}

.issue-status-btn.active-done {
  background: var(--idx-status-active-done-bg);
  color: var(--idx-status-active-done-text);
}

.issue-add-btn,
#addIssueBtn,
#addCocBtn,
#addSireBtn,
#addConditionBtn {
  width: 100%;
  height: 30px;
  min-height: 30px;
  margin-top: 14px;
  border-radius: 12px;
  background: var(--idx-add-btn-bg);
  color: var(--idx-add-btn-text);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.issue-add-btn:hover,
#addIssueBtn:hover,
#addCocBtn:hover,
#addSireBtn:hover,
#addConditionBtn:hover {
  background: var(--idx-add-btn-hover);
}

.issue-empty-message {
  text-align: center;
  padding: 14px 10px;
  color: #94a3b8;
  font-size: 13px;
  border: 1px dashed #475569;
  border-radius: 12px;
}

/* =========================
   동적 카드 레이아웃
========================= */
.dynamic-card-grid-2,
.dynamic-card-grid-3 {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.dynamic-card-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.dynamic-card-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.dynamic-card-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dynamic-card-field label {
  font-size: 12px;
  font-weight: 800;
  color: #f8fafc;
  opacity: 0.9;
}

.dynamic-card-field input,
.dynamic-card-field select,
.dynamic-card-field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--idx-dynamic-input-bg);
  border: 1px solid var(--idx-dynamic-input-border);
  color: var(--idx-dynamic-input-text);
}

.dynamic-card-field textarea {
  resize: vertical;
  min-height: 74px;
}

.dynamic-card-spacer {
  height: 2px;
}

.sire-like-status-select {
  height: 44px;
}

/* =========================
   Sire / Condition 안내판 표시
========================= */
.survey-inline-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 0 5px;
}

.survey-inline-block + .survey-inline-block {
  margin-top: 7px;
}

.survey-inline-main-row {
  display: grid;
  /* 항목(1.4→1.05) 축소 → 상태·날짜·본문 넉넉 */
  grid-template-columns: 1.05fr 1.2fr 1.1fr 0.82fr 0.82fr;
  gap: 4px;
  align-items: center;
}

.survey-inline-main-cell {
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.survey-inline-main-cell .sire-status-scheduled {
  color: #2563eb;
  font-weight: 600;
}

.survey-inline-main-cell .sire-status-progress {
  color: #ea580c;
  font-weight: 600;
}

.survey-inline-main-cell .sire-status-done,
.survey-inline-main-cell .sire-status-complete {
  color: #16a34a;
  font-weight: 600;
}

.survey-inline-main-cell .sire-status-fullreport {
  color: #0891b2;
  font-weight: 600;
}

/* Sire 종류 셀: 종류명(윗줄) + L/B/I 배지(아랫줄) */
.survey-inline-type-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: normal;
  overflow: visible;
}
.survey-inline-type-text {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sire-lb-badge {
  display: inline-block;
  min-width: 15px;
  padding: 0 5px;
  height: 15px;
  line-height: 15px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.3px;
}
.sire-lb-L { background: #fde047; color: #713f12; } /* L = 노랑 */
.sire-lb-B { background: #93c5fd; color: #1e3a8a; } /* B = 파랑 */
.sire-lb-I { background: #fdba74; color: #7c2d12; } /* I = 주황 */

.survey-inline-remark-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: start;
}

.survey-inline-remark-label {
  font-size: 10.5px;
  font-weight: 800;
  color: #64748b;
  line-height: 1.15;
  white-space: nowrap;
}

.survey-inline-remark-value {
  font-size: 10.8px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
  word-break: break-word;
}

.survey-inline-remark-row-sire,
.survey-inline-remark-row-condition {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr 1.1fr 0.82fr 0.82fr;
  gap: 4px;
  align-items: start;
}

.survey-inline-remark-spacer {
  min-height: 1px;
}

.survey-inline-remark-value-sire,
.survey-inline-remark-value-condition {
  grid-column: 2 / 6;
  font-weight: 600;
  color: #111827;
}

/* =========================
   COC 안내판 표시
========================= */
.coc-inline-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0 5px;
}

.coc-inline-block + .coc-inline-block {
  margin-top: 6px;
}

.coc-inline-top-row {
  display: grid;
  grid-template-columns: 15px 1fr 78px;
  gap: 8px;
  align-items: center;
}

.coc-inline-no {
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  line-height: 1.2;
}

.coc-inline-type {
  font-size: 11px;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coc-inline-date {
  font-size: 10.6px;
  font-weight: 600;
  color: #2563eb;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.coc-inline-summary-row {
  display: grid;
  grid-template-columns: 15px 1fr 78px;
  gap: 8px;
  align-items: start;
}

.coc-inline-summary-spacer {
  min-height: 1px;
}

.coc-inline-summary-text {
  grid-column: 2 / 4;
  font-size: 10.7px;
  font-weight: 600;
  color: #475569;
  line-height: 1.25;
  word-break: break-word;
}

/* =========================
   모달 / 알림
========================= */
.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(420px, 100%);
  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;
}

/* ===== API 매칭 팝업: 밝은 사무용 카드 ===== */
.match-card {
  width: min(960px, 95vw);
  max-height: 85vh;
  background: #ffffff;
  color: #111827;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.match-card-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #1e40af;
  color: #ffffff;
}
.match-card-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.match-card-close {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 6px;
}
.match-card-close:hover {
  background: rgba(255, 255, 255, 0.18);
}
.match-card-subtitle {
  flex: 0 0 auto;
  padding: 10px 20px 0;
  font-size: 12px;
  color: #6b7280;
}
.match-card-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 20px 16px;
  text-align: left;
}
.match-card-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}
.match-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.match-btn-apply {
  background: #1e40af;
  color: #ffffff;
  border: 1px solid #1e40af;
}
.match-btn-apply:hover { background: #1d4ed8; }
.match-btn-cancel {
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}
.match-btn-cancel:hover { background: #f3f4f6; }

.match-group-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e40af;
  margin: 14px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #e5e7eb;
}
.match-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.match-table col.match-col-vessel { width: 20%; }
.match-table col.match-col-text { width: 50%; }
.match-table col.match-col-pick { width: 30%; }
.match-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  padding: 5px 8px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.match-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f0f1f3;
  vertical-align: top;
  color: #111827;
}
.match-vessel {
  font-weight: 600;
  color: #111827;
  word-break: break-word;
}
.match-text {
  color: #374151;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.match-select {
  width: 100%;
  max-width: none;
  font-size: 12px;
  padding: 5px 8px;
  background: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.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;
  gap: 10px;
  flex-shrink: 0;
}

.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;
}

/* 확인창 "아니오" 버튼(보조) */
.custom-alert-cancel {
  border-color: #cbd5e1;
  background: #e2e8f0;
  color: #334155;
}

.cost-report-modal-box {
  width: min(460px, 92vw);
}

.cost-report-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cost-report-modal-body label {
  margin: 4px 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: #e5e7eb;
}

.cost-report-select {
  width: 100%;
  height: 46px;
  margin-top: 0;
  border-radius: 12px;
  background: #0b1733;
  border: 1px solid #3b4b68;
  color: #f8fafc;
  font-size: 15px;
  font-weight: 700;
}

.cost-report-cancel-btn {
  background: #374151;
  border-color: #6b7280;
  color: #f3f4f6;
  margin-right: 8px;
}

/* =========================
   Footer
========================= */
.footer {
  margin-top: auto;
  padding: 60px 5px 5px;
  text-align: center;
  font-size: 12px;
  color: var(--idx-footer-text);
  border-top: 1px solid var(--idx-footer-border);
  opacity: 0.8;
  white-space: nowrap;
}

.footer:hover {
  opacity: 1;
}

/* =========================
   반응형
========================= */
@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 {
    position: relative;
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 220px;
  }

  .toolbar-chip-btn {
    min-width: 112px;
  }

  .coc-grid,
  .sire-row-top,
  .sire-row-bottom {
    grid-template-columns: 1fr;
  }

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

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

  .map-label.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;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 14px 28px !important;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1401 !important;
  }

  .map-label.mobile-fullscreen .title {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .map-label.mobile-fullscreen .map-card-section {
    margin-bottom: 14px;
  }

  .map-label.mobile-fullscreen .map-card-section-title {
    min-height: 34px;
    font-size: 13px;
    padding: 0 10px;
  }

  .map-label.mobile-fullscreen .map-card-section .line {
    grid-template-columns: 100px 1fr;
    gap: 8px;
  }

  /* 현안업무: 모바일에서도 연번칸은 좁게(2자리 여유 22px), 내용칸 최대 확보.
     위 .line 규칙(100px)이 issue-line까지 덮어써 연번이 넓어지던 문제 수정. */
  .map-label.mobile-fullscreen .map-card-section .issue-line {
    grid-template-columns: 22px 1fr;
    gap: 6px;
  }

  .map-label.mobile-fullscreen .map-card-section .line-label,
  .map-label.mobile-fullscreen .map-card-section .line-value,
  .map-label.mobile-fullscreen .survey-inline-main-cell,
  .map-label.mobile-fullscreen .coc-inline-type,
  .map-label.mobile-fullscreen .coc-inline-date,
  .map-label.mobile-fullscreen .coc-inline-summary-text {
    font-size: 12px;
    line-height: 1.3;
  }

  .map-label.mobile-fullscreen .survey-inline-main-row,
  .map-label.mobile-fullscreen .survey-inline-remark-row-sire,
  .map-label.mobile-fullscreen .survey-inline-remark-row-condition {
    /* 상태(지적사항 조치)·날짜 짤림 방지 + 특이사항 정렬 */
    grid-template-columns: 1.05fr 1.35fr 1.5fr 0.8fr 0.8fr;
    gap: 5px;
  }

  .map-label.mobile-fullscreen .coc-inline-top-row,
  .map-label.mobile-fullscreen .coc-inline-summary-row {
    grid-template-columns: 16px 1fr 80px;
    gap: 8px;
  }

  .map-label.mobile-fullscreen .report-row-compact {
    grid-template-columns: 110px 1fr;
  }

  .map-label.mobile-fullscreen .report-half-btn {
    height: 32px;
    font-size: 11px;
  }

  .map-label.mobile-fullscreen .map-label-actions {
    position: sticky;
    bottom: 0;
    background: inherit;
    padding-top: 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    margin-top: 12px;
  }

  .map-label.mobile-fullscreen .map-mini-btn {
    min-width: 72px;
    font-size: 12px;
    padding: 8px 12px;
  }

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

  .map-label.mobile-fullscreen.orange {
    background: #fff7ed !important;
    border: 2px solid #f97316 !important;
  }

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

  .map-label.mobile-fullscreen.gray {
    background: #f8fafc !important;
    border: 2px solid #94a3b8 !important;
  }
}

@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;
  }

  .report-upload-grid {
    grid-template-columns: 1fr;
  }

  /* Data 업로드는 공통업무·담당감독처럼 모바일에서도 3열(6버튼) 유지 */
  #cardDataUpload .report-upload-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .map-toolbar {
    gap: 4px;
    left: 15%;
  }

  .toolbar-chip-btn {
    min-width: 55px;
    padding: 3px 4px;
  }

  .toolbar-chip-label {
    font-size: 8px;
  }

  .toolbar-chip-value {
    font-size: 12px;
  }

  .search-box {
    min-width: 100px;
    max-width: 140px;
  }
}

/* =========================
   인쇄
========================= */
@media print {
  .report-actions {
    display: none;
  }

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

  .report-table-wrap {
    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;
  }
}



/* =========================
   입력화면 직각 처리
   현안업무, COC, SIRE, Condition Report
========================= */

/* 상단 진행 중, 완료 필터 직각 */
.issue-top-filter {
  border-radius: 0 !important;
}

/* 입력 카드 전체 직각 */
.issue-card,
.issue-card.issue-only-card,
.issue-card.coc-card,
.issue-card.sire-card,
.issue-card.condition-card {
  border-radius: 0 !important;
}

/* 카드 내부 입력칸 직각 */
.issue-card input,
.issue-card select,
.issue-card textarea,
.issue-text,
.issue-textarea {
  border-radius: 0 !important;
}

/* 현안업무 내부 메타, 상태 버튼 직각 */
.issue-meta-row,
.issue-meta-cell,
.issue-status-row,
.issue-status-btn,
.issue-check-btn {
  border-radius: 0 !important;
}

/* COC, SIRE, Condition 기존 입력 블록도 직각 */
.coc-item,
.coc-item input,
.sire-row,
.sire-row input,
.sire-row select,
.sire-row textarea {
  border-radius: 0 !important;
}

/* 동적 입력 필드 공통 직각 */
.dynamic-card-field input,
.dynamic-card-field select,
.dynamic-card-field textarea {
  border-radius: 0 !important;
}


/* =========================
   추가 버튼 직각 처리
   현안업무, COC, SIRE, Condition
========================= */

#addIssueBtn,
#addCocBtn,
#addSireBtn,
#addConditionBtn,
.add-issue-btn,
.add-coc-btn,
.add-sire-btn,
.add-condition-btn {
  border-radius: 0 !important;
}


/* =========================
   좌측 입력화면 전체 직각 처리
   아코디언, 대메뉴 카드, 버튼
========================= */

/* 좌측 대메뉴 카드 전체 직각 */
.sidebar .card {
  border-radius: 0 !important;
}

/* 아코디언 메뉴 직각 */
.sidebar .accordion-section,
.sidebar .accordion-toggle,
.sidebar .accordion-content {
  border-radius: 0 !important;
}

/* 아코디언 내부 버튼도 직각 */
.sidebar .accordion-toggle {
  border-radius: 0 !important;
}

/* 저장, 초기화 버튼 직각 */
#vesselForm > button,
#vesselForm button,
#resetBtn,
.btn-secondary {
  border-radius: 0 !important;
}

/* Report 관리 버튼 직각 */
.report-view-btn,
.report-upload-btn {
  border-radius: 0 !important;
}

/* 담당감독 업무 사이트 버튼 직각 */
.report-link-btn {
  border-radius: 0 !important;
}

/* 추가 버튼 직각 */
#addIssueBtn,
#addCocBtn,
#addSireBtn,
#addConditionBtn,
.add-issue-btn,
.add-coc-btn,
.add-sire-btn,
.add-condition-btn,
.issue-add-btn,
.coc-add-btn,
.sire-add-btn,
.condition-add-btn,
.dynamic-add-btn {
  border-radius: 0 !important;
}

/* 입력화면의 일반 버튼 전체 직각 */
.sidebar button,
.sidebar a.report-link-btn {
  border-radius: 0 !important;
}


/* =========================
   선박정보, 관리사 비용, 현재위치 입력칸 직각 처리
========================= */

/* 선박정보 입력칸 */
#vesselName,
#vesselType,
#managementCompany,
#managementSupervisor,
#operationManager,
#ownerSupervisor,
#teamName,
#builder,
#size,
#deliveryDate,
#nextDryDock,
#voyagePlan,
#cargoStatus {
  border-radius: 0 !important;
}

/* 관리사 비용 입력칸 */
.cost-card,
.cost-card input,
.cost-card select,
.cost-card textarea,
#opexContractYear,
#opexContractCrewAmount,
#opexContractTechAmount,
#opexContractManagementAmount,
#opexActualCrewCount,
#opexActualCrewAmount,
#opexActualTechCount,
#opexActualTechAmount,
#aorActualCrewCount,
#aorActualCrewAmount,
#aorActualTechCount,
#aorActualTechAmount,
#aorUnclaimedCrewCount,
#aorUnclaimedCrewAmount,
#aorUnclaimedTechCount,
#aorUnclaimedTechAmount,
#costRemark {
  border-radius: 0 !important;
}

/* 현재위치 입력칸 */
#latitude,
#longitude {
  border-radius: 0 !important;
}

/* 좌측 입력화면 전체 input/select/textarea 최종 직각 보정 */
.sidebar input,
.sidebar select,
.sidebar textarea {
  border-radius: 0 !important;
}

/* =========================
   선박 리스트 화면 직각 처리
========================= */

/* 선박 리스트 카드 내부 항목 */
.vessel-list,
.vessel-item {
  border-radius: 0 !important;
}

/* 선박 리스트 안의 수정/삭제 버튼 */
.vessel-item button,
.vessel-item .actions button,
.vessel-item .btn-delete {
  border-radius: 0 !important;
}

/* 선박 리스트가 들어있는 카드까지 직각 보정 */
.card:has(#vesselList),
.card:has(.vessel-list) {
  border-radius: 0 !important;
}
.rob-main-label-two-line span {
  white-space: nowrap;
}

/* =========================================================
   항차 / ROB 정보 UI 보정
   - 우측/하단 테두리 두꺼움 제거: 테이블은 상단/좌측만 외곽선, 각 셀은 우측/하단선만 사용
   - 소제목 폭 확대: ETA, HSFO, LSFO, MGO, LSMGO, HS Cyl., LS Cyl., ME Sys., GE Sys.
   - 안내판 데이터 배경은 안내판과 동일 톤으로 유지
========================================================= */

.position-info-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--idx-cost-card-border);
  background: var(--idx-cost-card-bg);
}

.position-info-title {
  display: flex;
  align-items: center;
  height: 30px;
  margin: 0 0 10px;
  padding: 0 10px;
  border-left: 4px solid #60a5fa;
  background: rgba(15, 23, 42, 0.48);
  color: var(--idx-card-title);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.1px;
}

.voyage-rob-table {
  display: grid;
  grid-template-columns: 88px 84px minmax(0, 1fr) 84px minmax(0, 1fr);
  border-top: 1px solid #334155;
  border-left: 1px solid #334155;
  background: #0f172a;
  overflow: hidden;
}

.voyage-rob-table > * {
  min-width: 0;
  border-right: 1px solid #334155;
  border-bottom: 1px solid #334155;
}

.rob-main-label,
.rob-sub-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 5px 6px;
  color: #f8fafc;
  font-size: 11.5px;
  font-weight: 900;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
}

.rob-main-label {
  background: #1e3a5f;
}

.rob-sub-label {
  background: #243447;
  color: #dbeafe;
}

.rob-main-label-two-line {
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
  white-space: normal;
}

.rob-main-label-two-line span {
  display: block;
  white-space: nowrap;
}

.rob-rowspan-2 {
  grid-row: span 2;
}

.rob-main-span-2 {
  grid-column: span 2;
}

.rob-span-2 {
  grid-column: span 2;
}

.rob-span-3 {
  grid-column: span 3;
}

.rob-span-4 {
  grid-column: span 4;
}

.rob-value-cell {
  min-height: 34px;
  background: #0b1733;
}

.voyage-rob-form-table input,
.voyage-rob-form-table select {
  width: 100%;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 5px 6px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0b1733 !important;
  color: #f8fafc !important;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  box-shadow: none !important;
}

.voyage-rob-form-table select {
  cursor: pointer;
}

.voyage-rob-form-table input[readonly] {
  cursor: default;
  color: #e2e8f0 !important;
}

.voyage-rob-form-table input[readonly]:placeholder-shown {
  color: #64748b !important;
}

.map-voyage-rob-wrap {
  margin-top: 8px;
}

.map-label .voyage-rob-table {
  grid-template-columns: 76px 72px minmax(0, 1fr) 72px minmax(0, 1fr);
  border-top-color: rgba(148, 163, 184, 0.42);
  border-left-color: rgba(148, 163, 184, 0.42);
  background: transparent;
}

.map-label .voyage-rob-table > * {
  border-right-color: rgba(148, 163, 184, 0.42);
  border-bottom-color: rgba(148, 163, 184, 0.42);
}

.map-label .rob-main-label,
.map-label .rob-sub-label {
  min-height: 25px;
  padding: 3px 6px;
  color: #1f2937;
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
}

.map-label .rob-main-label {
  background: rgba(15, 23, 42, 0.08);
}

.map-label .rob-sub-label {
  background: rgba(15, 23, 42, 0.04);
  color: #334155;
}

.rob-display-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 3px 4px;
  background: transparent;
  color: #111827;
  font-size: 9.9px;
  font-weight: 900;
  text-align: center;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.map-label.green .rob-display-value,
.map-label.orange .rob-display-value,
.map-label.yellow .rob-display-value,
.map-label.gray .rob-display-value {
  background: transparent;
}

.rob-last-update {
  margin-top: 6px;
  padding: 0 2px;
  background: transparent;
  color: #334155;
  font-size: 9.5px;
  font-weight: 800;
  text-align: right;
  line-height: 1.2;
}

.map-label .rob-last-update {
  background: transparent;
  color: #334155;
  font-size: 9.5px;
  font-weight: 800;
  text-align: right;
}

/* 위경도(좌) + Last Update(우) 한 줄 배치 — 선박위치 사이트와 동일 */
.rob-last-update.rob-posline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.rob-last-update.rob-posline .rob-pos {
  text-align: left;
  color: #1f3350;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rob-last-update.rob-posline .rob-lu {
  text-align: right;
  white-space: nowrap;
}

#inPort,
#nextPort,
#eta,
#hsfoRob,
#lsfoRob,
#mgoRob,
#lsmgoRob,
#hsCylOilRob,
#lsCylOilRob,
#meSysOilRob,
#geSysOilRob {
  border-radius: 0 !important;
}


/* =========================================================
   INDEX 선박정보 입력화면 항차 / ROB 정보 테이블 숨김
   - 지도 아이콘 클릭 시 안내판 ROB 표는 유지
   - Excel 업로드로 저장된 ROB 데이터도 유지
========================================================= */
.sidebar .position-info-panel,
.sidebar .position-info-title,
.sidebar .voyage-rob-form-table {
  display: none !important;
}

/* =========================================================
   사용자 드로잉 (마커/글자/선) + 수심·해도 레이어 컨트롤
========================================================= */
.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-text-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.user-text-label span {
  display: inline-block;
  color: #000;
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff,
    0 0 3px #fff;
  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.active {
  background: #1f2937;
  color: #fff;
}

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

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

.sire-validity-section {
  margin-bottom: 24px;
}

.sire-validity-section:last-child {
  margin-bottom: 0;
}

.sire-validity-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 0 2px;
}

.sire-validity-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.4px;
}

.sire-validity-badge.validity-badge-valid {
  background: #16a34a;
  color: #ffffff;
}

.sire-validity-badge.validity-badge-invalid {
  background: #dc2626;
  color: #ffffff;
}

.sire-validity-count {
  font-weight: 700;
  color: #334155;
  font-size: 13px;
}

.sire-validity-table th,
.sire-validity-table td {
  white-space: nowrap;
  font-size: 12.5px;
}

.sire-validity-table td:nth-child(9),
.sire-validity-table td:nth-child(10) {
  text-align: center;
  font-weight: 700;
}

.sire-validity-table td:first-child,
.sire-validity-table th:first-child {
  text-align: center;
  width: 48px;
  color: #64748b;
}

.sire-validity-table td.sire-date-blue {
  color: #2563eb;
  font-weight: 700;
}

.sire-validity-table td.sire-date-red {
  color: #dc2626;
  font-weight: 800;
}

.sire-validity-table td.planned-mark-cell {
  text-align: center;
  font-weight: 800;
  color: #2563eb;
}

.sire-validity-table td.sire-validity-vessel-name {
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  color: #1e3a8a;
}

.sire-validity-table td.sire-validity-vessel-name:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

/* Cargo 컬럼: 꾸미지 않고 색깔로만 LADEN / BALLAST 구분 */
.sire-validity-table td.sire-cargo-cell {
  text-align: center;
  font-weight: 600;
}

.sire-validity-table td.sire-cargo-cell.sire-cargo-laden {
  color: #ca8a04; /* yellow-600, 가독성 위해 약간 짙은 노란색 */
}

.sire-validity-table td.sire-cargo-cell.sire-cargo-ballast {
  color: #2563eb; /* blue-600 */
}

/* LADEN + 최근 SIRE 3개월 초과 + SIRE 예정 없음 → 행 HIGHLIGHT */
.sire-validity-table tr.sire-row-warning > td {
  background: #fef3c7; /* amber-100 */
}

.sire-validity-table tr.sire-row-warning > td:first-child {
  box-shadow: inset 3px 0 0 #f59e0b; /* amber-500 left accent bar */
}

.sire-validity-table tr.sire-row-warning > td.sire-validity-vessel-name {
  color: #b45309; /* amber-700 */
}

.sire-validity-table tr.sire-row-warning:hover > td {
  background: #fde68a; /* amber-200 */
}

/* =========================================================
   운항일정 / 항구 팝업 (light theme)
========================================================= */
.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;
}

.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 {
    display: none !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.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;
  }

  .leaflet-top.leaflet-left {
    top: 0;
  }
}

/* 주요 항만 라벨 (지도에 항상 표시) */
.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;
}

/* ===== 감독 API 연동 확인/알림 창 — 웹·모바일 공통 간결 카드 ===== */
/* (showCustomAlert / showCustomConfirm = .custom-alert-overlay/.custom-alert-box) */
.custom-alert-overlay {
  /* 어떤 부모 안에 있어도 항상 최상단·화면 중앙 (fixed + 최대 z-index) */
  z-index: 2147483000;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overscroll-behavior: contain;
}

@media (max-width: 768px) {
  .custom-alert-overlay {
    /* 노치/홈바 안전영역까지 고려한 여백 */
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  }
  .custom-alert-box {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 18px;
  }
  .custom-alert-title {
    padding: 18px 20px 6px;
    font-size: 19px;
  }
  .custom-alert-message {
    padding: 0 20px 16px;
    font-size: 15px;
    line-height: 1.6;
    max-height: 62vh;
  }
  .custom-alert-actions {
    padding: 4px 20px 20px;
    gap: 10px;
  }
  /* 모바일에선 버튼을 넓게 — 손가락 탭 쉽게 (확인창은 예/아니오 반반) */
  .custom-alert-ok {
    flex: 1 1 0;
    min-width: 0;
    height: 50px;
    font-size: 16px;
  }
}
/* ===== 모바일 앱내 PDF 뷰어 오버레이 (Survey Status 등 리포트 보기) ===== */
#pdfOverlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  background: #111;
  display: none;
}
#pdfOverlay.show { display: block; }
#pdfOverlay #pdfOverlayScroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #525659;
  padding: 8px 0 72px;
  text-align: center;
}
#pdfOverlay .pdf-page-canvas {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 8px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
#pdfOverlay .pdf-loading {
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 700;
  padding: 40px 0;
}
#pdfOverlay #pdfOverlayBack {
  position: fixed;
  right: 12px;
  left: auto;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  width: auto;
  white-space: nowrap;
  z-index: 2147483601;
  background: rgba(37, 99, 235, 0.92);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
#pdfOverlay #pdfOverlayBack:active { background: #1d4ed8; }