html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#map { 
	position: absolute; 
	inset: 0;
} 
.app-shell { 
	width: 100vw; 
	height: 100vh; 
	display: flex; 
	overflow: hidden; 
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;        /* 100vh → 100% */
  font-family: Nunito Sans, Helvetica Neue, sans-serif;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #e3e4e5 white;
}


.icon-sidebar {
  width: 60px;
  height: 100%;
  background: #024F79;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}


.menu-item {
  height: 56px;
  display: flex;
  align-items: center;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  overflow: visible; 
  position: relative;
  transition:
    background 0.12s ease,
    transform 0.08s ease,
    opacity 0.12s ease;
}


.menu-item:hover {
  background: rgba(255,255,255,0.1);
  opacity: 1;
}

.menu-item:active {
  background: rgba(255,255,255,0.22);
  transform: scale(0.97);
}

.menu-item.active {
  background: rgba(255,255,255,0.15);
  opacity: 1;
}


.icon-sidebar-header {
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #013d5e;
  overflow: hidden;
  flex-shrink: 0;
}

.icon-sidebar-header .icon {
  width: 60px;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-sidebar-header:hover {
  background: rgba(255,255,255,0.1);
  opacity: 1;
}

.ebl-info-tooltip {
  background: rgba(255, 255, 255, 0.92);
  color: #123a5a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  padding: 7px 12px;
  border: 1px solid rgba(0, 91, 187, 0.35);
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 63, 125, 0.15);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.ebl-row {
  min-width: 120px;
  letter-spacing: 0.2px;
}
.icon-sidebar.expanded {
  width: 180px;
}
.text{
  display:none;
  color: white;
  font-size: 14px;
  align-items: center;
}
.icon-sidebar.expanded .text {
  display: flex;
}

.icon {
  width: 60px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  padding: 0;
  height: 100%;
  overflow: hidden;
}




.menu-item svg,
.icon-sidebar-header svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.detail-sidebar-wrapper {
    grid-area: wrapper;
    border-right: 1px solid rgba(0, 0, 0, .12);
    position: relative;
    overflow: visible;
    height: 100%;        /* ← 추가 */
    display: flex;       /* ← 추가 */
    flex-direction: column; /* ← 추가 */
}

/* 2. detail-sidebar height 수정 */
.detail-sidebar {
  background-color: #f5f7f8;
  width: 500px;
  height: 100%;        /* 100vh → 100% */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100%;    /* 100vh → 100% */
}

.detail-sidebar.hide {
    width: 0;
    margin-left: 0;
    overflow: hidden;
}
.collapse-button {
    position: absolute;
    right: -14px;
    top: 2rem;
    z-index: 1101;

    display: flex;
    align-items: center;
    justify-content: center;
}
.collapse-button__icon {
    width: 28px;
    height: 28px;
    padding: 4px;
    box-sizing: border-box;

    color: #000c;
    fill: #000c;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;

    display: block;
	
    cursor:pointer;
}

.collapse-button.is-open .collapse-button__icon {
    transform: rotate(180deg);
}


.detail-panel {
    display: none;
    padding: 16px;
    box-sizing: border-box;
}

.detail-panel.active {
    display: block;
}

.panel-title {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    margin-bottom: 20px;
}
.detail-topbar {
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 12px;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    flex-shrink: 0;
}

.detail-header {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    flex-shrink: 0;
}

.detail-title {
    font-size: 22px;
    font-weight: 500;
    color: #222;
}

.detail-logo {
    height: 23px;
}
.detail-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.header-icon-btn {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
}

.header-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.header-icon-btn svg {
    width: 24px;
    height: 24px;
    fill: #111;
}
.header-icon-btn.is-hidden {
    display: none;
}
.panel-card {
  background: #fff;
  border: 1px solid #d9e1e8;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}

.panel-section-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #123;
}

.panel-row {
  padding: 10px 0;
}

.panel-row:last-child {
  border-bottom: 0;
}

.chart-card-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.brightness-card-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.chart-card,
.brightness-card {
  min-height: 74px;
  border: 1px solid #cbd6df;
  background: #f8fbfd;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #17384d;
  padding: 10px;
}

.chart-card.active,
.brightness-card.active {
  border: 2px solid #0b5f8a;
  background: #eef7fc;
}

.chart-card:hover,
.brightness-card:hover {
  background: #f1f8fc;
}

.panel-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #223;
}


.panel-switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  background: #cfd6dd;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  outline: none;
  flex-shrink: 0;
}


.panel-switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}


.panel-switch input[type="checkbox"]:checked {
  background: #0b84c6;
}

.panel-switch input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

.chart-card-group {
  display: flex;
  gap: 12px;
}

.chart-card {
  flex: 1;
  height: 120px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid #cbd6df;
  background: #f8fbfd;
  border-radius: 8px;

  cursor: pointer;
  padding: 6px;
}


.chart-img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  margin-bottom: 6px;
}


.chart-label {
  font-size: 22px;
  color: #333;
  font-weight: 500;
}


.chart-card.active {
  border: 3px solid #0b5f8a;
  background: #eef7fc;
}
.chart-card.active .chart-label {
  font-weight: 800;
}


.chart-card:hover {
  background: #f1f8fc;
}
.accordion-item {
  padding: 0;
  overflow: hidden;
}

.accordion-head {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 16px;
  cursor: pointer;
  background: #fff;
  border-bottom: 1px solid #e9edf1;
}

.accordion-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #123;
}

.accordion-right {
  display: flex;
  align-items: center;
}

.accordion-count {
  font-size: 14px;
  color: #2f7db2;
}

.accordion-arrow {
  display: inline-block;
  font-size: 14px;
  width: 24px;
  height: 24px;
}


.accordion-item.closed .accordion-arrow {
  transform: rotate(-180deg);
}

.accordion-body {
  padding: 6px 16px 8px 16px;
  background: #fff;

  overflow: hidden;
  max-height: none;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}

.accordion-item.closed .accordion-body {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}


.accordion-body .panel-row {
  padding: 12px 0;
}

.accordion-body .panel-row:last-child {
  border-bottom: 0;
}


.accordion-body .chart-card-group,
.accordion-body .brightness-card-group {
  margin-top: 0;
}

.map-status-coords,
.map-status-scale {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  font-size: 11px;
  color: #222;
  line-height: 1;
  white-space: nowrap;
}

.map-status-coords {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
}

.map-status-scale {
  min-width: 72px;
  text-align: center;
  padding: 6px 10px;
}

.layer-row {
  padding: 4px 0;
}

.layer-switch {
  display: flex;
  align-items: center;
  min-height: 40px;
  cursor: pointer;
  position: relative;
}

#panel-chartSetting .accordion-body .layer-switch {
  display: inline-flex;
  width: auto;
}

.layer-switch input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.layer-switch__ui {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cfd6dd;
  flex-shrink: 0;
  margin-right: 12px;
  transition: background 0.2s ease;
}

.layer-switch__ui::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}

.layer-switch input:checked + .layer-switch__ui {
  background: #0b84c6;
}

.layer-switch input:checked + .layer-switch__ui::before {
  transform: translateX(16px);
}

.layer-switch__label {
  flex-grow: 1;
  min-width: 0;
  font-size: 14px;
  color: #222;
  line-height: 1.3;
}

/* AtoN 하위 AIS/RTU 줄 전용 */
#panel-buoy .accordion-body .layer-switch {
  display: flex;
  align-items: center;
  width: 100%;
}

#panel-buoy .accordion-body .layer-switch__label {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

#panel-buoy .accordion-body .buoy-type-count {
  margin-left: auto;
  padding-right: 12px;
  min-width: 58px;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
}

.accordion-arrow svg {
  width: 24px;
  height: 24px;
}
.border-line {
    width: 1px;
    height: 24px;
    margin-left: 8px;
    margin-right: 16px;
    background-color: #e3e4e5;
}
.select-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.select-row__label {
	margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
}
.layer-select {
    height: 38px;
    border: 1px solid #cbd6df;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    color: #17384d;
    background: #fff;
    outline: none;
}
.accordion-left {
	display: flex;
}
.buoy-view-panel {
  display: none;
  margin-top: 12px;
}

.buoy-graph-box {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #d9e1e8;
  border-radius: 8px;
  background: #f8fbfd;
}

.buoy-graph-canvas {
  width: 100%;
  height: 180px;
  min-height: 180px;
}

.buoy-history-toolbar {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.buoy-history-date {
  height: 36px;
  border: 1px solid #cbd6df;
  border-radius: 6px;
  padding: 0 8px;
}

.buoy-history-btn {
  height: 36px;
  border: 0;
  border-radius: 6px;
  padding: 0 14px;
  background: #0b5f8a;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.buoy-info-box {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #d9e1e8;
  border-radius: 8px;
  background: #f8fbfd;
}
/* 이력조회 테이블만 스크롤 */
.buoy-view-history .buoy-info-box {
    max-height: 320px;
    overflow: hidden;
    padding: 0;
}

.buoy-view-history .buoy-live-scroll {
  height: 130px;
  max-height: 130px;
  overflow-x: auto;
  overflow-y: auto;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
}

.rip-history-scroll {
  max-height: 200px;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0;
}
.buoy-group-count {
  cursor: pointer;
  user-select: none;
}

.buoy-group-count:hover {
  font-weight: 700;             
  border-bottom: 1px solid #2f7db2;;
}

.buoy-info-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.buoy-info-table th,
.buoy-info-table td {
  font-size: 13px;
  padding: 6px 8px;
}

.buoy-info-table th {
  width: 110px;
  white-space: nowrap;
  text-align: left;
}

.buoy-info-table td {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.buoy-live-table td { 
	white-space: nowrap;
} 

html[lang="en"] .buoy-info-table th {
    width: 130px;
    min-width: 130px;
    white-space: normal;
    line-height: 1.25;
    padding-right: 12px;
}

html[lang="en"] .buoy-info-table td {
    padding-left: 10px;
}

.buoy-live-scroll {
  width: 100%;
  height: 185px;
  overflow-x: auto;
  overflow-y: auto;
}

.buoy-live-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
}

.buoy-live-table thead th {
  position: sticky;
  top: 0;
  background: #f3f5f7;
  color: #223;
  font-size: 12px;
  font-weight: 600;
  padding: 4px;
  border: 1px solid #dfe5eb;
  text-align: center;
  z-index: 1;
  white-space: nowrap;
}

.buoy-live-table tbody td {
  border: 1px solid #e7edf3;
  padding: 4px 6px;
  font-size: 12px;
  text-align: center;
  background: #fff;
  white-space: nowrap;
}
.chart-wrap {
	position:relative; 
	width: 100%; 
	height: 160px;
}
.chart-canvas{
	width: 100%;
	height: 160px;
}
.chart-message{
    display:none;
    position:absolute;
    inset:0;
    align-items:center;
    justify-content:center;
    font-size:13px;
    color:#666;
    pointer-events:none;
}
.topbar-actions {
    display: flex;
    align-items: center;
	height: 100%;
    margin-left: auto;
    gap: 4px;
}

.lang-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    color: #333;
}

.user-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.user-btn svg {
    width: 22px;
    height: 22px;
    fill: #555;
}

.user-menu {
    position: relative;
}

.user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 36px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 120px;
    z-index: 999;
}

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

.dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}

.dropdown-item:hover {
    background: #f5f5f5;
}

.dropdown-item a {
    text-decoration: none;
    color: #333;
    display: block;
}
/* 모달 */
.modal-overlay {
    display: none;          /* 기본은 숨김 */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.modal-overlay.show {
    display: flex;          /* show 클래스 붙으면 보임 */
}

.modal-box {
    background: #fff;
    border-radius: 0;        /* 각지게 */
    width: 440px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 52px;
    background: #1a4a6b;     /* 헤더 네이비로 */
    border-bottom: none;
}

.modal-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;             /* 흰 글씨 */
}

.modal-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #fff;             /* 흰 닫기버튼 */
}


.modal-row input:focus {
    border-color: #1a4a6b;
}

.modal-save-btn {
    height: 38px;
    padding: 0 28px;
    background: #1a4a6b;
    color: #fff;
    border: none;
    border-radius: 0;        /* 각지게 */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 1px;
}

.modal-save-btn:hover {
    background: #0b3d5c;
}
.modal-row {
    display: flex;
    align-items: center;  /* 위아래 → 한줄로 */
    gap: 12px;
}

.modal-row label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    width: 70px;          /* 레이블 너비 고정 */
    flex-shrink: 0;
}

.modal-row input {
    flex: 1;              /* 나머지 공간 다 차지 */
    height: 40px;
    border: 2px solid #d0dbe4;
    box-sizing: border-box;
    border-radius: 0;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
}

#infoId {
    background: #f2f4f6;
    color: #666;
    cursor: default;
    pointer-events: none;
}

.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid #e0e0e0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #fafbfc;
    box-sizing: border-box;
}

.modal-support {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.modal-support-text {
    font-size: 11px;
    color: #7a8791;
    line-height: 1.3;
}

.modal-support-btn {
    height: 30px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    background: #fff;
    border: 1px solid #b9cbd8;
    color: #1a4a6b;
    border-radius: 2px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    box-sizing: border-box;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.05s ease;
}

.modal-support-btn:hover {
    background: #eef5f9;
    border-color: #1a4a6b;
    color: #12384f;

    box-shadow: 0 2px 6px rgba(26,74,107,.08);
}

.modal-support-btn:active {
    background: #dbeaf4;
    transform: translateY(1px);
    box-shadow: none;
}


.modal-support-btn:focus-visible {
    outline: 2px solid rgba(26, 74, 107, 0.25);
    outline-offset: 2px;
}

.modal-support-icon {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    flex-shrink: 0;
}
.modal-body {
    padding: 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;          /* 행간 넓게 */
}

.modal-row label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    width: 70px;
    flex-shrink: 0;
}
.user-info {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    height: 100%;
    background: #f0f4f8;
    border: 1px solid #d0dbe4;
}

.user-id {
    font-size: 13px;
    font-weight: 600;
    color: #1a4a6b;
}

.buoy-popup {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #d0dbe4;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  min-width: 220px;
  z-index: 1000;
}

.buoy-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #1a4a6b;
  border-radius: 8px 8px 0 0;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.buoy-popup-header button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}

.buoy-popup-body {
  padding: 10px 14px;
}

.buoy-popup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.buoy-popup-table th {
  color: #666;
  font-weight: 600;
  padding: 4px 8px 4px 0;
  white-space: nowrap;
  text-align: left;
}

.buoy-popup-table td {
  color: #222;
  padding: 4px 0;
}
.rip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a3a5c;
  flex-shrink: 0;
  padding: 0 12px;
  height: 48px;
}
.rip-header-tabs {
  display: flex;
  gap: 4px;
}
.rip-main-tab {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
}
.rip-main-tab.active {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
#ripClose {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
}


.rip-list-table {
  width: 100%;
  border-collapse: collapse;
}
.rip-list-table thead th {
  background: #f3f5f7;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  text-align: left;
}
.rip-list-row {
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.rip-list-row:hover { 
	background: #f5f8ff;
}
.rip-list-row.selected {
	background: #e8f0fe; 
}
.rip-list-row td {
  padding: 8px 10px;
  font-size: 12px;
  border-right: 1px solid #ddd;
}

.rip-detail-area.hide { display: none; }
.rip-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f9fa;
}
#ripBackBtn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #1a3a5c;
  font-weight: 600;
}

#ripBackBtn.hide {
  visibility: hidden;
  pointer-events: none;
}

.rip-sub-tabs {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  flex-shrink: 0;
}
.rip-sub-tab {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: #666;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.rip-sub-tab.active {
  color: #1a3a5c;
  font-weight: 600;
  border-bottom: 2px solid #1a3a5c;
}
.rip-sub-body {
  /*
   * ← 목록 줄과 기본정보/이력조회 탭을 제외한
   * 나머지 높이를 전부 사용
   */
  
  min-height: 0;

  width: 100%;
  padding: 12px;
  border-bottom: 1px solid #d7dfe8;
  background-color: #ffffff;
  box-sizing: border-box;

  overflow-x: hidden;
  overflow-y: auto;
}

.rip-detail-header,
.rip-sub-tabs {
  flex-shrink: 0;
}
/* 2단 버튼 */
.expand2-button {
  position: absolute;
  right: -14px;
  top: 5rem;
  z-index: 1101;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.expand2-button svg {
  width: 28px;
  height: 28px;
  padding: 4px;
  box-sizing: border-box;
  fill: #000c;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  display: block;
}
.expand2-button.active svg {
  background: #e8f0fe;
  border-color: #1a3a5c;
  fill: #1a3a5c;
}

/* 리스트 */
.buoy-list-wrap {
  margin-top: 8px;
  border: 1px solid #d9e1e8;
  border-radius: 8px;
  overflow: hidden;
  max-height: 400px;
  overflow-y: auto;
}
.buoy-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.buoy-list-table thead th {
  position: sticky;
  top: 0;
  background: #f3f5f7;
  font-weight: 700;
  font-size: 12px;
  color: #555;
  padding: 8px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  white-space: nowrap;
}
.buoy-list-row {
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.buoy-list-row:hover { background: #f5f8ff; }
.buoy-list-row.selected {
  background: #e8f0fe;
  border-left: 3px solid #1a3a5c;
}
.buoy-list-table td {
  padding: 7px 8px;
  font-size: 13px;
  color: #222;
  white-space: nowrap;
}


/* rightInfoPanel 전체 세로 구조 */
/* .right-info-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  height: 100%;
  background: #fff;
  border-left: 1px solid #dde3ea;
  z-index: 500;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  overflow: hidden;
} */

/* .right-info-panel.hide {
  display: none;
}
.right-info-float-btn {
  display: flex;  
} */



.rip-list-area.hide {
  display: none !important;
}

.rip-detail-area.hide {
  display: none !important;
}

.expand2-button {
  position: absolute;
  right: -14px;
  top: 5rem;
  z-index: 1101;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expand2-button svg {
  width: 28px;
  height: 28px;
  padding: 4px;
  box-sizing: border-box;
  fill: #1a3a5c;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  display: block;
}

/* 패널 열렸을 때 버튼 숨김 */
.expand2-button.panel-open {
  display: none;
}
/* 해도 위 원형 버튼 */
.rip-open-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 600;

  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: right 0.25s ease;
}

.rip-open-btn svg {
  width: 20px;
  height: 20px;
  fill: #1a3a5c;
}

/* 패널 열렸을 때 숨김 */
.rip-open-btn.panel-open {
  display: none;
}
.right-info-panel {
  position: absolute;
  top: 0;
  right: 0;

  width: 380px;
  height: 100%;

  background: #fff;
  border-left: 1px solid #dde3ea;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);

  z-index: 500;

  display: flex;
  flex-direction: column;

  /*
   * 패널 전체를 스크롤시키지 않는다.
   * 실제 스크롤은 아래의 ripSubBody가 담당한다.
   */
  overflow: hidden;
}

.right-info-panel.hide {
  display: none;
}


.rip-detail-area {
  display: flex;
  flex-direction: column;

  /*
   * 우측 패널 전체 높이에서
   * 상단 메인 탭 48px만 뺀 높이를 사용
   */
  height: calc(100% - 48px);
  min-height: 0;
  max-height: none;

  width: 100%;

  overflow: hidden;
  border-bottom: none;

  background: linear-gradient(180deg, #f7fafd 0%, #f2f6fa 100%);
  box-sizing: border-box;
}

.rip-detail-area.hide {
  display: none !important;
}

.rip-list-area.hide {
  display: none !important;
}
.rip-tab-panel {
  display: none;
}

.rip-tab-panel.active {
  display: block;
  width: 100%;
}
.icon-sidebar.expanded .menu-item {
  overflow: hidden;
}
.menu-item::after {
  content: attr(data-name);
  position: absolute;
  left: 68px;
  top: 50%;
  transform: translateY(-50%);
  background: #3d5a73;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.2px;
}

.menu-item::before {
  content: "";
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #3d5a73;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 9999;
}

.icon-sidebar:not(.expanded) .menu-item:hover::after,
.icon-sidebar:not(.expanded) .menu-item:hover::before {
  opacity: 1;
}
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#buoyLayerTree {
  height: calc(100vh - 170px);
  overflow-y: auto;
  overflow-x: hidden;
}
.detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#panel-buoy.detail-panel.active {
  height: 100%;
  overflow: hidden;
}

#buoyLayerTree {
  height: calc(100vh - 210px);
  overflow-y: auto;
  overflow-x: hidden;
}
.rip-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
}

.rip-total-count {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  flex-shrink: 0;
}

.rip-search-input {
  flex: 1;
  height: 30px;
  min-width: 0;
  box-sizing: border-box;

  border: 1px solid #cfd6dd;
  border-radius: 4px;
  padding: 0 10px;

  font-size: 12px;
  background: #fff;
}

.rip-search-input:focus {
  border-color: #0b5ed7;
}
.rip-list-sticky-header {
  flex-shrink: 0;
  background: #fff;

  padding: 8px 12px;

  /* 탭바/검색영역 구분 */
  border-top: 1px solid #d7dde5;

  /* 검색영역/그룹버튼 또는 테이블 구분 */
  border-bottom: 1px solid #d7dde5;
}
.rip-filter-row {
  background: #fff;
  border-bottom: 1px solid #d7dde5;
  padding: 0;
}

.rip-group-filter {
  display: flex;
  gap: 5px;

  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;

  padding: 6px 12px;  

  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #c0cdd6 #f0f4f8;
}

.rip-group-filter::-webkit-scrollbar {
  height: 5px;
}

.rip-group-filter::-webkit-scrollbar-track {
  background: #eef3f7;
}

.rip-group-filter::-webkit-scrollbar-thumb {
  background: #b8c6d1;
  border-radius: 10px;
}


.rip-list-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 48px;
  box-sizing: border-box;
}

.rip-list-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.rip-list-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;

  height: 34px;
  padding: 12px 8px;
  box-sizing: border-box;

  background: #f3f5f7;
  border-bottom: 1px solid #d7dde5;
  border-right: 1px solid #d7dde5;

  font-size: 12px;
  font-weight: 700;
  color: #223;
  text-align: center;
  vertical-align: middle;
}

.rip-list-table thead th:first-child {
  border-left: 0;
}

.rip-list-area {
  flex: 1;
  min-height: 0;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

#vesselListHeader {
  flex-shrink: 0;
  background: #fff;
  z-index: 20;
}

.rip-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.topbar_login_form {
    display: flex;
    align-items: center;
    gap: 6px;
}
.topbar_input {
    height: 28px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    padding: 0 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    width: 110px;
    outline: none;
}
.topbar_input::placeholder {
    color: rgba(255,255,255,0.4);
}
.topbar_login_btn {
    height: 28px;
    background: #1a6fa8;
    border: none;
    border-radius: 4px;
    padding: 0 14px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
}
.topbar_login_btn:hover {
    background: #155d8e;
}
.topbar_login_err {
    font-size: 11px;
    color: #ff8a80;
    white-space: nowrap;
}
.global-header {
    height: 46px;
    background: #013d5e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
    z-index: 1200;
}
.global-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.global-logo {
    height: 26px;
}
.global-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
}
.global-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.global-header .user_menu_wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.global-header .user_info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    transition: background 0.15s;
}

.global-header .user_info:hover {
    background: rgba(255,255,255,0.2);
}

.global-header .user_icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.global-header .user_text {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
}

.global-header .user_dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border: 0.5px solid #d8e3ef;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 130px;
    z-index: 9999;
    overflow: hidden;
}

.global-header .user_dropdown.show {
    display: block;
}

.global-header .user_dropdown a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: #2d3f55;
    text-decoration: none;
    transition: background 0.1s;
}

.global-header .user_dropdown a:hover {
    background: #f0f5fb;
    color: #1565a8;
}
.global-header .user_icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.global-header .user_arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.global-header .user_menu_wrap.open .user_arrow {
    transform: rotate(180deg);
}

.global-header .user_dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: #0d4b7a;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    min-width: 140px;
    z-index: 9999;
    overflow: hidden;
}

.global-header .user_dropdown.show {
    display: block;
}

.global-header .user_dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: background 0.15s;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
}

.global-header .user_dropdown a:last-child {
    border-bottom: none;
}

.global-header .user_dropdown a:hover,
.global-header .user_dropdown button:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.global-header .user_dropdown a svg,
.global-header .user_dropdown button svg
 {
    width: 16px;
    height: 16px;
    fill: rgba(255,255,255,0.6);
    flex-shrink: 0;
}
.user_dropdown_item {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 0;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #222;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.user_dropdown_item:hover {
  background: #f3f6f9;
}

.user_dropdown_item svg {
  width: 18px;
  height: 18px;
  fill: #333;
}

.user_dropdown a,
.user_dropdown button {
  width: 100%;
  height: 42px;
  padding: 0 12px;

  display: flex;
  align-items: center;
  gap: 8px;

  border: 0;
  background: transparent;

  color: #fff;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;

  box-sizing: border-box;
}
.user_dropdown a:hover,
.user_dropdown button:hover {
  background: rgba(255,255,255,0.08);
}

/* 비로그인 접근 제한 메뉴 */
.menu-item.is-locked {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}

.menu-item.is-locked:hover {
  background: transparent;
  opacity: 0.35;
}

.menu-item.is-locked .text::after {
  content: " 🔒";
  font-size: 12px;
  margin-left: 4px;
}

/* 공통 숨김 */
.is-hidden {
  display: none !important;
}

.locked-collapse-toggle {
  height: 24px;

  display: none;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.locked-collapse-toggle.show {
  display: flex;
}

.locked-collapse-toggle svg {
  width: 18px;
  height: 18px;
  fill: rgba(255,255,255,0.55);

  transition: transform 0.2s ease;
}

.locked-collapse-toggle.collapsed svg {
  transform: rotate(180deg);
}

.menu-item.locked-hidden {
  display: none;
}

.buoy-icon-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.buoy-icon-small {
  max-width: 22px !important;
  max-height: 22px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

.buoy-icon-name {
  font-size: 13px;
  font-weight: 600;
  color: #1d2c39;
  white-space: nowrap;
}

.buoy-icon-select-btn {
  height: 24px;
  padding: 0 8px;
  border: 1px solid #c9d6e2;
  border-radius: 24px;
  background: #013d5e;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.buoy-icon-popover {
  position: fixed;
  width: 210px;
  max-height: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5px;
  background: #fff;
  border: 1px solid #d8e3ec;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
  z-index: 99999;
}

.buoy-icon-popover.hide {
  display: none !important;
}

#buoyIconPickerGrid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#buoyIconPickerGrid .marker-picker-item {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 4px 8px;
  margin: 0;

  border: 0;
  border-radius: 6px;
  background: #fff;

  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

#buoyIconPickerGrid .marker-picker-item:hover {
  background: #f3f7fb;
}

#buoyIconPickerGrid .marker-picker-item.active {
  background: #e8f3fb;
}

#buoyIconPickerGrid .marker-picker-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

#buoyIconPickerGrid .marker-picker-item span {
  font-size: 12px;
  font-weight: 700;
  color: #253847;
  white-space: nowrap;
}

#weatherIconPickerGrid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#weatherIconPickerGrid .weather-marker-picker-item {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 4px 8px;
  margin: 0;

  border: 0;
  border-radius: 6px;
  background: #fff;

  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

#weatherIconPickerGrid .weather-marker-picker-item img {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

#weatherIconPickerGrid .weather-marker-picker-item span {
  font-size: 12px;
  font-weight: 700;
  color: #253847;
  white-space: nowrap;
}

.buoy-icon-save-status {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);

  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.18s ease;
}

.buoy-icon-save-status.show {
  opacity: 1;
}

.buoy-icon-save-status.saved {
  color: #2aa745;
}

.buoy-icon-save-status.same {
  color: #4b6f8f;
}
.comtype-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  margin-right: 5px;
}

.comtype-badge.ais {
  background: #e3f2fd;
  color: #1565c0;
}

.comtype-badge.unreg-ais {
  background: #546e7a;
  color: #fff;
}

.comtype-badge.rtu {
  background: #fff3e0;
  color: #e65100;
}

.status-normal {
  color: #1976d2;
  font-weight: 700;
}

.status-lost {
  color: #d32f2f;
  font-weight: 700;
}

.lantern-on {
  color: #2e7d32;
  font-weight: 700;
}

.lantern-off {
  color: #888;
  font-weight: 700;
}


.rip-group-btn {
  height: 22px;
  padding: 0 9px;
  border: 1px solid #d0dbe4;
  border-radius: 20px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
}

.rip-group-btn.active {
  background: #013d5e;
  color: #fff;
  border-color: #013d5e;
}

.rip-history-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eef5fa;
  border: 1px solid #d7e3ec;
}

.rip-history-label {
  font-size: 12px;
  font-weight: 800;
  color: #174263;
  white-space: nowrap;
  margin-right: 2px;
}

.rip-history-date {
  width: 100px;
  height: 32px;
  border: 1px solid #cbd6df;
  border-radius: 5px;
  padding: 0 6px;
  font-size: 12px;
  background: #fff;
  box-sizing: border-box;
}

.rip-history-separator {
  font-size: 12px;
  color: #667;
}

.rip-history-toolbar .buoy-history-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 5px;
}

.rip-history-select-row {
  margin-top: 8px;
}

.rip-history-select-row .select-row__label {
  margin-top: 0;
}


#ripHistoryGraph.buoy-graph-box {
  margin-top: 8px;
  padding: 8px;
  min-height: 0;
}

.history-table-box {
  margin-top: 15px !important;
  padding: 0;
}

.history-graph-box {
    padding: 8px;
    box-sizing: border-box;
}

.history-empty-message {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #165f9c;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.history-table-box .buoy-live-scroll {
    min-height: 338px;

    overflow-x: auto;
    overflow-y: auto;

    transition: height 0.2s ease;
}

.history-table-box .buoy-live-scroll.empty {
    height: 72px;
    min-height: 72px;
    overflow-x: auto;
    overflow-y: hidden;
}

.history-table-box.loaded .buoy-live-scroll {
    height: 338px;
    min-height: 0px;
}
.buoy-live-table tbody tr.history-empty-row td {
  height: 58px;
  text-align: center;
  vertical-align: middle;
  color: #7a8793;
  font-size: 15px;
  font-weight: 700;
}

.coord-format-group {
    display: flex;
    flex-direction: column;
}

.cs-radio-group {
  display: flex;
  gap: 16px;
}

.cs-radio{
    display:flex;
    align-items:center;
    gap:6px;
}

.cs-radio input[type="radio"],
.coord-radio input[type="radio"] {
    width: 13px;
    height: 13px;
    margin: 0;
    flex-shrink: 0;
}

.coord-radio{
    display:grid;
    grid-template-columns:18px 72px auto;
    align-items:center;
    column-gap:6px;
    cursor:pointer;
}

html[lang="en"] .coord-radio {
    grid-template-columns: 18px 217px auto;
}

.coord-name {
    font-weight: 500;
    white-space: nowrap;
}

.coord-pattern {
    color: #7b8794;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    white-space: nowrap;
}

.cs-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}
.radio-list {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0px;
}

.cs-number-input {
  width: 70px !important;
  text-align: center;
}

.cs-unit-label {
  font-size: 14px;
  color: #444;
}

.comtype-badge.aton21-virtual {
  background: #f3e5f5;
  color: #7b1fa2;
}
.comtype-badge.aton21-real {
  background: #e8f5e9;
  color: #2e7d32;
}

.measure-tooltip {
  background: transparent;
  border: 0;
  color: #123a5a;
  font-size: 12px;
  font-weight: 800;
  padding: 0;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
  white-space: nowrap;
  pointer-events: none;
}

.measure-panel {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  background: #fff;
  border: 1px solid #d0dbe4;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  min-width: 320px;
  font-size: 12px;
}
.measure-panel.hide { display: none; }

.measure-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 40px;
  border-bottom: 1px solid #eee;
}

.measure-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a3a5c;
  white-space: nowrap;
  margin-right: 2px;
}

.measure-header-divider {
  width: 1px;
  height: 20px;
  background: #ddd;
  margin: 0 4px;
  flex-shrink: 0;
}

.measure-undo-group,
.measure-action-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.measure-tool-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: background 0.15s, border-color 0.15s;
}

.measure-tool-btn:hover:not(:disabled) {
  background: #e8f0fe;
  border-color: #1a3a5c;
}

.measure-tool-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.measure-tool-btn svg {
  width: 15px;
  height: 15px;
  fill: #1a3a5c;
}

.measure-panel-body {
  padding: 8px 12px;
}

.measure-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.measure-label {
  color: #888;
  font-size: 12px;
  white-space: nowrap;
}

.measure-value {
  font-size: 16px;
  font-weight: 700;
  color: #1a3a5c;
}

.measure-btn-finish {
  height: 26px;
  padding: 0 10px;
  border-radius: 4px;
  background: #23476b;
  border: 1px solid #23476b;
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.measure-btn-finish:hover {
  background: #0b2a4a;
}

.measure-btn-new {
  height: 26px;
  padding: 0 10px;
  background: #f7f8fa;
  border: 1px solid #d7dce2;
  color: #444;
  border-radius: 4px;
 
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}

.measure-btn-new:hover {
  background: #e8e8e8;
}

.measure-btn-close {
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  cursor: pointer;
  color: #888;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-left: 2px;
}

.measure-btn-close:hover {
  background: rgba(0,0,0,0.06);
  color: #333;
}

.measure-tooltip {
  background: transparent;
  border: 0;
  color: #123a5a;
  font-size: 12px;
  font-weight: 800;
  padding: 0;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
  white-space: nowrap;
  pointer-events: none;
}

.measure-tooltip-active {
  background: transparent;
  border: 0;
  color: #123a5a;
  font-size: 12px;
  font-weight: 800;
  padding: 0;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}

.measure-finish-guide {
  background: rgba(0, 63, 125, 0.94);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}


.menu-item.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.menu-item.is-disabled:hover {
  background: rgba(255,255,255,0.04);
  opacity: 0.42;
}

.menu-item.is-disabled .icon,
.menu-item.is-disabled .text {
  color: rgba(255,255,255,0.55);
}

.menu-item.is-disabled svg {
  fill: rgba(255,255,255,0.55);
}

.menu-badge {
  margin-left: auto;
  margin-right: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #d9edf7;
  background: rgba(255,255,255,0.14);
  white-space: nowrap;
}

.icon-sidebar:not(.expanded) .menu-badge {
  display: none;
}
.menu-item.tool-clicked {
  background: rgba(255,255,255,0.22);
  opacity: 1;
}

.accordion-body .layer-switch {
  width: 100%;
  min-height: 36px;
}

.accordion-body .layer-switch__label {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 하위 count */
.vessel-group-count {
  margin-left: auto;
  padding-right: 12px;

  font-size: 12px;
  font-weight: 500;
}

.ebl-panel {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;

  height: 38px;
  min-width: 108px;
  padding: 0 10px;

  display: flex;
  align-items: center;
  gap: 8px;

  background: #013d5e;;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);

  font-size: 12px;
}

.ebl-panel.hide {
  display: none;
}

.ebl-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.ebl-panel-status {
  padding: 2px 6px;
  border-radius: 4px;
  background: #1a6fa8;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.ebl-panel-close {

  width: 26px;
  height: 26px;

  border: none;
  border-radius: 4px;
  background: none;

  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.ebl-panel-close:hover {
  background: rgba(0,0,0,0.06);
  color: #333;
}
.vessel-list-icon-wrap {
  display: inline-flex;
  width: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vessel-list-icon {
  display: inline-block;
  vertical-align: middle;
}

.rip-list-row.selected .vessel-name,
.rip-list-row.selected .vessel-mmsi {
  font-weight: 700;
}

.sidebar-user-wrap {
  position: relative;
}

.sidebar-user-btn {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0;
  cursor: pointer;
}

.sidebar-user-icon {
  width: 44px;
  display: flex;
  justify-content: center;
}

.sidebar-user-icon svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

.sidebar-user-text {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.icon-sidebar:not(.expanded) .sidebar-user-text {
  display: none;
}
.sidebar-user-arrow {
  margin-left: auto;
  width: 26px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-user-arrow svg {
  width: 18px !important;
  height: 18px !important;
  fill: rgba(255,255,255,0.85);
  transition: transform 0.18s ease;
}

/* 열렸을 때 아래 방향 */
.sidebar-user-wrap.open .sidebar-user-arrow svg {
  transform: rotate(180deg);
}

/* 접힌 아이콘바에서는 숨김 */
.icon-sidebar:not(.expanded) .sidebar-user-arrow {
  display: none;
}

.sidebar-user-dropdown {
  display: none;
  position: absolute;
  left: 0;
  bottom: 46px;
  width: 100%;
  background: #0d4b7a;
  border-radius: 8px;
  overflow: hidden;
  z-index: 9999;
  box-shadow: 0 -6px 18px rgba(0,0,0,0.25);
}

.icon-sidebar:not(.expanded) .sidebar-user-dropdown {
  width: 115px;
  left: 64px;
  bottom: 0;
}

.icon-sidebar:not(.expanded) .sidebar-user-dropdown::before {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 12px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 12px solid #0d4b7a;
}

.sidebar-user-dropdown.show {
  display: block;
}

.sidebar-user-dropdown button,
.sidebar-user-dropdown a {
  width: 100%;
  height: 36px;
  border: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  background: transparent;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.sidebar-user-dropdown button:hover,
.sidebar-user-dropdown a:hover {
  background: rgba(255,255,255,0.12);
}

/* 사이드바 하단 로그인 영역 */
.sidebar-auth-area {
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid rgba(255,255,255,0.14);
  flex-shrink: 0;
}

/* 로그인 박스 */
.sidebar-login-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 사람 아이콘 버튼 */
.sidebar-login-icon-btn {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sidebar-login-icon-btn svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

/* 기본: 로그인 폼 숨김 */
.sidebar-login-form {
  display: none;
}

/* 펼쳐졌을 때만 폼 표시 */
.icon-sidebar.expanded .sidebar-login-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 펼쳐졌을 때는 아이콘 버튼 숨김 */
.icon-sidebar.expanded .sidebar-login-icon-btn {
  display: none;
}

/* 입력창 */
.sidebar-login-form input {
  height: 30px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 5px;
  padding: 0 8px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  outline: none;
  box-sizing: border-box;
}

.sidebar-login-form input::placeholder {
  color: rgba(255,255,255,0.45);
}

.sidebar-login-form button {
  height: 30px;
  border: 0;
  border-radius: 5px;
  background: #1a6fa8;
  color: #fff;
  cursor: pointer;
}

/* 기존 OpenLayers 줌버튼 숨김 */
.ol-zoom {
  display: none;
}

/* 좌측 하단 HUD 묶음 */
.map-left-hud {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1200;

  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* 로그인 ID */
.map-user-chip {
  height: 30px;
  padding: 0 12px;

  display: flex;
  align-items: center;

  background: rgba(1, 61, 94, 0.78);
  color: #fff;

  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 4px;

  font-size: 12px;
  font-weight: 800;

  backdrop-filter: blur(4px);
  box-shadow: 0 1px 5px rgba(0,0,0,0.18);
}

/* 확대/축소 */
.map-zoom-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.map-zoom-box button {
  width: 30px;
  height: 30px;

  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 4px;

  background: rgba(255,255,255,0.68);
  color: #1d2c39;

  font-size: 19px;
  font-weight: 800;
  line-height: 1;

  cursor: pointer;

  backdrop-filter: blur(4px);
  box-shadow: 0 1px 5px rgba(0,0,0,0.12);
}

.map-zoom-box button:hover {
  background: rgba(255,255,255,0.92);
}

/* 거리축척 */
.map-scale-box {
  width: 112px;
  padding: 7px 10px 6px;

  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 4px;

  backdrop-filter: blur(4px);
  box-shadow: 0 1px 5px rgba(0,0,0,0.12);

  box-sizing: border-box;
}

.scale-ruler {
  position: relative;
  height: 9px;
  border-left: 2px solid rgba(20,35,50,0.88);
  border-right: 2px solid rgba(20,35,50,0.88);
  border-bottom: 2px solid rgba(20,35,50,0.88);
}

.scale-ruler span {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 2px;
  height: 5px;
  background: rgba(20,35,50,0.88);
  transform: translateX(-50%);
}

.scale-text {
  margin-top: 3px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #1d2c39;
}


.map-statusbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  z-index: 700;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background: rgba(248, 250, 252, 0.88);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(0,0,0,0.12);
  font-size: 12px;
}

.status-chip {
  height: 30px;
  padding: 0 10px;

  display: flex;
  align-items: center;
  gap: 6px;

  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 4px;

  backdrop-filter: blur(4px);
  box-shadow: 0 1px 5px rgba(0,0,0,0.12);

  font-size: 11px;
  color: #1d2c39;
  white-space: nowrap;
}

.status-label {
  font-size: 10px;
  font-weight: 900;
  color: #5e6d7b;
  letter-spacing: 0.5px;
}

.ol-zoom {
  display: none;
}

.map-search-popup {
  max-height: 300px;
  overflow-y: auto;
  background: rgba(3, 30, 52, 0.97);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  z-index: 9999;
  display: none;
}

.map-search-popup.show { display: block; }

.map-search-result-item {
  padding: 9px 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-search-result-item:hover { background: rgba(255,255,255,0.1); }

.search-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.search-badge.vessel { 
	background: #1565c0; 
	color: #fff; 
}
.search-badge.buoy   { 
	background: #e65100; 
	color: #fff; 
}
.search-badge.ais21  { 
	background: #7b1fa2; 
	color: #fff; 
}
.search-badge.weather {
    background: #00897b;
    color: #fff;
}

.map-search-empty {
  padding: 16px;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}

.map-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 38px;
  z-index: 1200;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 14px;
  box-sizing: border-box;

  background: rgba(4, 42, 70, 0.55);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.18);
}

.bottom-left {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 160px;
  min-width: 0;
}

.map-search-box {
  position: relative;
  width: 300px;
  height: 28px;
  display: flex;
  align-items: center;
  transition: width 0.2s ease;
}

.map-search-box:focus-within {
  width: 240px;
}

.map-search-icon {
  position: absolute;
  left: 8px;
  width: 15px;
  height: 15px;
  fill: rgba(255,255,255,0.55);
  pointer-events: none;
}

.map-search-input {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 5px;
  padding: 0 12px 0 30px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.map-search-input:focus {
  border-color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.14);
}

.map-search-input::placeholder {
  color: rgba(255,255,255,0.42);
}

.bottom-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.bottom-left,
.bottom-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bottom-scale {
  width: 118px;
  height: 28px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 0 8px;
  box-sizing: border-box;

  border-right: 1px solid rgba(255,255,255,0.28);
}

.bottom-scale-label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.65);
  margin-right: 6px;
}

.bottom-scale-ruler {
  height: 8px;
  border-left: 2px solid rgba(255,255,255,0.9);
  border-right: 2px solid rgba(255,255,255,0.9);
  border-bottom: 2px solid rgba(255,255,255,0.9);
  box-sizing: border-box;
}

.bottom-scale span {
  margin-top: 2px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.bottom-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bottom-zoom button {
  width: 26px;
  height: 26px;

  border: 1px solid rgba(255,255,255,0.26);
  border-radius: 4px;

  background: rgba(255,255,255,0.14);
  color: #fff;

  font-size: 17px;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;
}

.bottom-zoom button:hover {
  background: rgba(255,255,255,0.28);
}

.bottom-user {
  height: 26px;

  display: flex;
  align-items: center;

  padding: 0 10px;

  border-left: 1px solid rgba(255,255,255,0.28);

  color: #fff;
  font-size: 12px;
  font-weight: 800;

  white-space: nowrap;
}

.bottom-info {
  height: 26px;

  display: flex;
  align-items: center;
  gap: 6px;

  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.28);

  color: #fff;
  white-space: nowrap;
}

.bottom-label {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.65);
}

.bottom-info span:last-child {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.layer-child {
  padding-left: 26px;
}

.layer-switch__label {
  white-space: nowrap;
}
.measure-btn-undo {
  height: 28px;
  padding: 0 12px;

  
  border-radius: 6px;

  background: #f7f8fa;
  border: 1px solid #d7dce2;
  color: #444;

  font-size: 12px;
  font-weight: 500;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.measure-btn-undo:hover:not(:disabled) {
  background: #eef3f8;
  border-color: rgba(0, 91, 187, 0.45);
}

.measure-btn-undo:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.list-marker-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    
    width: 100%;
    min-width: 0;
}

.list-marker-icon-box {
  width: 20px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 20px;

  margin-right: 5px;
}
.list-marker-square {
    display: block;
    width: 12px;
    height: 12px;

}

.list-marker-square.virtual {
    background: #7b1fa2;
}

.list-marker-square.real {
  background: #2e7d32;
}

.list-marker-circle {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}

.list-marker-circle.weather {
  background: #00897b;
}

.list-marker-buoy-img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}

.list-marker-name {
    min-width: 0;
    flex: 1;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-marker-name.is-truncated {
  cursor: help;

  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #aab2bb;
  text-underline-offset: 2px;
}

.list-marker-name.is-truncated:hover {
  background: rgba(0, 0, 0, 0.045);
}

.legend-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.legend-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.legend-icon.vessel.normal svg {
  fill: #1f66b1;
}

.legend-icon.vessel.selected svg {
  fill: #e53935;
}

.legend-group {
  padding: 12px 0;
}

.legend-title {
  font-size: 15px;
  font-weight: 700;
  color: #123;
  margin-bottom: 10px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  margin-bottom: 6px;
}

.legend-label {
  font-size: 14px;
  color: #223;
  line-height: 1;
}

.legend-sub-group {
  margin-bottom: 6px;
}

.legend-sub-group .legend-row {
  padding-left: 12px;
}

.legend-sub-title {
  margin: 10px 0 6px;
  font-size: 12px;      
  font-weight: 600;
  color: #778899;      
}

.legend-buoy-img {
  width: 26px;
  height: 32px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;
}

.legend-buoy-img img {
  width: auto !important;
  height: auto !important;

  max-width: 22px !important;
  max-height: 28px !important;

  object-fit: contain;
  display: block;

  position: static !important;
  transform: none !important;
}
.legend-ais21-box {
  width: 14px;
  height: 14px;
  flex-shrink: 0;

  border: 1px solid #cfd6dd;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.legend-ais21-box.real {
  background: #2e8b42;
}

.legend-ais21-box.virtual {
  background: #a02bbd;
}
.legend-weather-img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.legend-weather-img img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.weather-list-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
    margin-right: 5px;
}

/* ── 그래프 탭 개선 ── */
.rip-graph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.rip-graph-current-label {
  font-size: 12px;
  font-weight: 600;
  color: #1a3a5c;
}

.rip-graph-expand-btn {
  font-size: 11px;
  color: #1a6fa8;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

.rip-graph-expand-btn:hover {
  text-decoration: underline;
}

.rip-graph-main {
  width: 100%;
  min-height: 180px;
  margin-bottom: 10px;
}

.rip-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.rip-mini-card {
  background: #f8fbfd;
  border: 1.5px solid #d9e1e8;
  border-radius: 6px;
  padding: 5px 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.rip-mini-card:hover {
  border-color: #1a6fa8;
}

.rip-mini-card.active {
  border-color: #1a6fa8;
  background: #eef7fc;
}

.rip-mini-label {
  font-size: 9px;
  color: #666;
  text-align: center;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rip-mini-svg {
  width: 100%;
  height: 28px;
  display: block;
}

/* ── 전체보기 모달 ── */
.buoy-graph-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buoy-graph-modal-box {
  background: #fff;
  border-radius: 10px;
  width: 1100px;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.buoy-graph-modal-head {
  display: flex;
  align-items: center;
  background: #1a3a5c;
  padding: 0 16px;
  height: 52px;
  flex-shrink: 0;
  gap: 12px;
}

.buoy-graph-modal-head span {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.modal-head-search-btn {
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.modal-head-search-btn:hover {
  background: rgba(255,255,255,0.28);
}

.modal-head-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s;
}

.modal-head-close-btn:hover {
  color: #fff;
}

.buoy-graph-modal-body {
  padding: 16px;
  overflow-y: auto;
}

.buoy-graph-modal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.buoy-graph-modal-cell {
  background: #f8fbfd;
  border: 1px solid #d9e1e8;
  border-radius: 8px;
  padding: 10px;
}

.buoy-graph-modal-cell-title {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
}

.buoy-graph-modal-canvas {
  width: 100%;
  min-height: 200px;
}


.modal-head-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

#buoyGraphModalClose {
  margin-left: auto;
}

.modal-date-chip {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.modal-date-chip:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.45);
}

.modal-date-chip span {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.modal-date-hidden {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}


.modal-head-date-sep {
  font-size: 14px;
  color: rgba(255,255,255,0.25);
  padding: 0 4px;
}

.modal-head-search-btn {
  height: 30px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  background: #1a6fa8;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.modal-head-search-btn:hover {
  background: #155d8e;
}

.expand-icon {
  width: 14px;
  height: 14px;
  stroke: #1a6fa8;
  flex-shrink: 0;
  display: block;
}

.rip-graph-current-label {
  position: relative;
  display: inline-block;

  font-size: 15px;
  font-weight: 700;
  color: #1a3a5c;

  padding-bottom: 8px;
}

.rip-graph-current-label::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: 0;

  width: 55px;
  height: 3px;

  border-radius: 999px;

  background: var(--graph-color, #e53935);
}
.rip-mini-card.active {
  border-color: var(--graph-color, #0b84c6);
  box-shadow: 0 0 0 1px var(--graph-color, #0b84c6) inset;
  background: #f8fbfd;
}

.weather-history-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 8px;
}

.weather-history-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a3a5c;
}

.weather-history-count {
  font-size: 12px;
  color: #777;
}

.weather-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.weather-mini-card,
.weather-history-card {
  background: #fff;
  border: 1px solid #dfe7ef;
  border-radius: 10px;
  padding: 10px;
}

.weather-mini-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 8px;
}

.weather-mini-head strong {
  color: #1a3a5c;
}

.weather-mini-graph {
  height: 60px;
  display: flex;
  align-items: end;
  gap: 2px;
}

.weather-mini-graph span {
  flex: 1;
  min-width: 2px;
  background: #4c8eda;
  border-radius: 3px 3px 0 0;
}

.weather-mini-empty {
  width: 100%;
  text-align: center;
  color: #aaa;
  font-size: 12px;
}

.weather-table-scroll {
  max-height: 220px;
  overflow: auto;
}

.weather-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.weather-history-table th {
  position: sticky;
  top: 0;
  background: #f3f7fb;
  color: #24415f;
  font-weight: 700;
  border-bottom: 1px solid #d6e0ea;
  padding: 7px 6px;
  white-space: nowrap;
}

.weather-history-table td {
  border-bottom: 1px solid #edf1f5;
  padding: 6px;
  text-align: center;
  white-space: nowrap;
}

.track-card {
  padding: 12px;
}

.track-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #243447;
}

.track-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.track-date-input {
  width: 120px;
  height: 32px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 12px;
}

.track-date-sep {
  color: #7a8794;
}

.track-btn-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.track-btn {
  height: 32px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  background: #fff;
  color: #34495e;
  padding: 0 12px;
  cursor: pointer;
  font-size: 13px;
}

.track-btn.primary {
  background: #0b6fa4;
  border-color: #0b6fa4;
  color: #fff;
}

.track-summary {
  background: #f4f8fb;
  border: 1px solid #e1e8ef;
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  color: #34495e;
  line-height: 1.6;
}
/* =========================================================
   공통 도움말 툴팁
========================================================= */

/*
 * 제목 + 물음표 + 말풍선을 감싸는 부모
 * 말풍선 위치를 잡는 기준점이 된다.
 */
.help-tooltip-wrap {
  position: relative;

  display: inline-flex;
  align-items: center;

  overflow: visible;
}


/*
 * 제목 옆 동그란 물음표 버튼
 */
.help-tooltip-btn {
  width: 17px;
  height: 17px;

  margin-left: 6px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  border-radius: 50%;
  background:#eef7fd;
  border:1px solid #8fc6ea;
  color:#1f7fbd;


  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;

  cursor: help;
  box-sizing: border-box;

  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}


/*
 * 물음표에 마우스를 올렸을 때
 */
.help-tooltip-btn:hover {
  color: #ffffff;
  background: #168ac2;
  border-color: #168ac2;
}


/*
 * 키보드 Tab으로 선택했을 때
 */
.help-tooltip-btn:focus-visible {
  color: #ffffff;
  background: #168ac2;

  outline: 2px solid rgba(22, 138, 194, 0.25);
  outline-offset: 2px;
}


/*
 * 실제 설명 말풍선
 */
.help-tooltip-box {
  position: absolute;

  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);

  /* 기존보다 조금 넓게 */
  width: 230px;

  padding: 9px 13px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  /* 제목과 설명 사이 간격 */
  gap: 3px;

  background: #071f38;
  border-radius: 7px;
  box-shadow: 0 5px 14px rgba(0, 18, 34, 0.26);

  text-align: center;
  white-space: nowrap;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  z-index: 3000;

  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
}
.help-tooltip-box--ais {
    width: 150px;
}
.help-tooltip-box--aton {
    width: 154px;
}
.help-tooltip-box--unreg-ais {
    width: 172px;
}
.help-tooltip-box--weather {
  width: 170px;   /* 필요에 맞게 조절 */
}
/*
 * 말풍선 첫 번째 줄
 */
.help-tooltip-title {
  color: #ffffff;

  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}


/*
 * 말풍선 두 번째 줄
 */
.help-tooltip-description {
  color: rgba(255, 255, 255, 0.88);

  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
}


.help-tooltip-box::before {
  content: "";

  position: absolute;

  /* 말풍선 왼쪽 가운데 */
  right: 100%;
  top: 50%;
  transform: translateY(-50%);

  border-width: 5px;
  border-style: solid;
  border-color:
    transparent
    #071f38
    transparent
    transparent;
}


/*
 * 물음표 버튼에 마우스를 올리거나
 * 키보드로 선택하면 바로 다음 말풍선을 표시
 */
.help-tooltip-btn:hover + .help-tooltip-box,
.help-tooltip-btn:focus-visible + .help-tooltip-box {
  visibility: visible;
  opacity: 1;
}


/*
 * AIS 기본표지 카드 밖으로 말풍선이 나와도
 * 부모가 자르지 않도록 한다.
 */
#panel-buoy .accordion-item.has-help-tooltip {
  position: relative;
  overflow: visible;

  z-index: 20;
}

.help-tooltip-btn:focus + .help-tooltip-box {
  visibility: visible;
  opacity: 1;
}

/* ==================================================
   범례 패널 아코디언
================================================== */

#panel-legend {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

#panel-legend .legend-accordion {
  padding: 0;
  margin-bottom: 12px;
  overflow: hidden;
}

#panel-legend .accordion-head {
  min-height: 48px;
}

#panel-legend .accordion-body {
  padding: 8px 16px 10px;
}

#panel-legend .legend-row {
  min-height: 34px;
  height: auto;

  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0;
  padding: 1px 0;
  box-sizing: border-box;
}

#panel-legend .legend-label {
  font-size: 14px;
  line-height: 1.3;
  color: #223;
}

#panel-legend .legend-icon-list {
  display: flex;
  flex-direction: column;
}

#panel-legend .legend-empty {
  min-height: 40px;

  display: flex;
  align-items: center;

  font-size: 13px;
  color: #8794a0;
}

/* ==================================================
   범례 - 항로표지 사용 중 / 전체 목록 탭
================================================== */

.legend-tab-row {
  display: grid;
  grid-template-columns: 1fr 1fr;

  margin-bottom: 6px;

  border: 1px solid #d8e0e7;
  border-radius: 6px;
  overflow: hidden;
}

.legend-tab-btn {
  height: 34px;
  padding: 0 10px;

  border: 0;
  background: #f5f7f9;

  color: #687784;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

.legend-tab-btn + .legend-tab-btn {
  border-left: 1px solid #d8e0e7;
}

.legend-tab-btn:hover {
  background: #eef3f6;
}

.legend-tab-btn.active {
  background: #e6f3fa;
  color: #075e8c;
  font-weight: 700;
}


/* 기본적으로 탭 내용 숨기기 */

.legend-tab-content {
  display: none;
}


/* active인 내용만 보이기 */

.legend-tab-content.active {
  display: block;
}


/* 사용 중 목록은 1열 */

#legendActiveBuoyIconList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


/* 전체 목록은 2열 */

.legend-all-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}


/* 전체 목록 카드 하나 */

.legend-all-item {
  min-width: 0;
  min-height: 32px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 6px;

  border: 1px solid #dce4ea;
  border-radius: 7px;

  background: #fff;
  box-sizing: border-box;
}


/* 전체 목록 카드의 아이콘 영역 */

.legend-all-item__icon {
  width: 26px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.legend-all-item__icon img {
  width: auto;
  height: auto;

  max-width: 22px;
  max-height: 28px;

  object-fit: contain;
  display: block;
}


/* 전체 목록 카드의 이름 */

.legend-all-item__name {
  min-width: 0;

  color: #263746;
  font-size: 12px;
  line-height: 1.25;

  word-break: keep-all;
  overflow-wrap: anywhere;
}

#panel-legend .legend-label {
  flex: 1;
  min-width: 0;
}

.legend-item-count {
  margin-left: auto;
  flex-shrink: 0;

  font-size: 12px;
  font-weight: 600;
  color: #74818c;

  white-space: nowrap;
}
/* =========================================================
   선박 항적 지점 정보 팝업
========================================================= */

.vessel-track-point-popup {
  display: none;

  min-width: 225px;
  padding: 11px 13px;
  box-sizing: border-box;

  color: #f7f9fb;
  background: rgba(27, 40, 53, 0.94);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;

  box-shadow:
    0 6px 18px rgba(10, 24, 36, 0.24);

  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;

  pointer-events: none;
  backdrop-filter: blur(3px);
}

/* =========================================================
   선박별 항적 날짜 조회창
========================================================= */

.vessel-track-search-window {
  position: fixed;

  width: 330px;
  padding: 12px;
  box-sizing: border-box;

  color: #fff;
  background: rgba(27, 39, 52, 0.98);

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3);
}

.vessel-track-search-window-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  cursor: grab;
  user-select: none;
  touch-action: none;
}

.vessel-track-search-window-heading {
  min-width: 0;
  flex: 1;
}

.vessel-track-search-window-title {
  overflow: hidden;

  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.vessel-track-search-window-mmsi {
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.52);
  font-size: 10px;
  line-height: 1.3;
}

.vessel-track-search-window-close {
  width: 24px;
  height: 24px;
  padding: 0;
  flex: none;

  border: 0;
  border-radius: 4px;

  color: rgba(255, 255, 255, 0.58);
  background: transparent;

  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.vessel-track-search-window-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.vessel-track-search-window-form {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-top: 10px;
}

.vessel-track-search-window-form input[type="date"] {
  width: 108px;
  min-width: 0;
  height: 31px;
  padding: 0 7px;
  box-sizing: border-box;

  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;

  font-size: 11px;
  outline: none;
}

.vessel-track-search-window-form input[type="date"]:focus {
  border-color: rgba(50, 150, 245, 0.9);
}

.vessel-track-search-window-separator {
  flex: none;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
}

.vessel-track-search-window-submit {
  height: 31px;
  padding: 0 12px;
  flex: none;

  border: 0;
  border-radius: 4px;

  color: #fff;
  background: #1683dd;

  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.vessel-track-search-window-submit:hover {
  background: #2893eb;
}

.vessel-track-search-window-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

/* =========================================================
   선박별 다중 우클릭 항적조회 메뉴
========================================================= */

.vessel-track-context-menu {
  display: flex;
  align-items: center;

  min-width: 128px;
  height: 38px;
  box-sizing: border-box;

  padding: 4px;

  color: #fff;
  background: rgba(27, 39, 52, 0.97);

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.28);

  white-space: nowrap;
}

.vessel-track-context-open {
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  flex: 1;

  border: 0;
  border-radius: 4px;

  color: rgba(255, 255, 255, 0.92);
  background: transparent;

  text-align: left;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

.vessel-track-context-open:hover {
  background: rgba(255, 255, 255, 0.1);
}

.vessel-track-context-close {
  width: 28px;
  height: 28px;
  padding: 0;
  flex: none;

  border: 0;
  border-radius: 4px;

  color: rgba(255, 255, 255, 0.55);
  background: transparent;

  font-size: 15px;
  line-height: 1;

  cursor: pointer;
}

.vessel-track-context-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* =========================================================
   선박 항적 작업함
========================================================= */

.vessel-track-workspace {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 450;

    transition: right 0.22s ease;
}


/* 우측 기본정보 패널이 열려 있을 때 */
.vessel-track-workspace.right-panel-open {
    right: 394px;
}


/* 접힌 버튼 */
.vessel-track-workspace-toggle {
    height: 36px;

    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    border:
        1px solid
        rgba(255,255,255,0.14);

    border-radius: 7px;

    background:
        rgba(25,42,56,0.90);

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,0.22);

    transition:
        opacity 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}


.vessel-track-workspace-toggle span {
    min-width: 18px;
    height: 18px;

    margin-left: 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.15);

    font-size: 10px;
}


/* 0개 상태 */
.vessel-track-workspace.is-empty
.vessel-track-workspace-toggle {

    opacity: 0.42;

    background:
        rgba(25,42,56,0.58);

    box-shadow:
        0 3px 9px
        rgba(0,0,0,0.12);
}

.vessel-track-workspace.is-empty
.vessel-track-workspace-toggle:hover {
    opacity: 0.9;
}

.vessel-track-workspace.is-empty
.vessel-track-workspace-panel:hover {

    opacity: 0.95;
}

.vessel-track-workspace.is-empty
.vessel-track-workspace-panel {

    opacity: 0.55;

    background:
        rgba(25,40,54,0.72);

    border-color:
        rgba(255,255,255,0.06);

    box-shadow:
        0 3px 10px rgba(0,0,0,0.10);

    transition:
        opacity .15s ease; 
}


.vessel-track-workspace.is-empty
.vessel-track-workspace-toggle:hover {

    opacity: 0.9;
}


/* 열리면 작은 항적 버튼은 숨김 */
.vessel-track-workspace.is-open
.vessel-track-workspace-toggle {
    display: none;
}


/* 관리 패널 */
.vessel-track-workspace-panel {
    width: 380px;

    height: auto;
    max-height: calc(100vh - 60px);

    overflow: hidden;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 9px;

    background: rgba(25,40,54,0.97);
    color: #fff;

    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}


.vessel-track-workspace.is-open
.vessel-track-workspace-panel {
    display: flex;
}

/* ==================================
   항적 0개 상태
================================== */

.vessel-track-workspace.is-empty
.vessel-track-workspace-panel {

    opacity: 0.55;

    background:
        rgba(25, 40, 54, 0.72);

    border-color:
        rgba(255,255,255,0.06);

    box-shadow:
        0 3px 10px rgba(0,0,0,0.10);
}



/* 헤더 */
.vessel-track-workspace-header {
    position: sticky;
    top: 0;
    z-index: 20;

    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;

    padding: 0 12px;

    box-sizing: border-box;

    background: #192b3a;

    border-bottom: 1px solid rgba(255,255,255,0.10);
}
/* 항적 0개 - 열린 관리창 헤더도 비활성 톤 */
.vessel-track-workspace.is-empty
.vessel-track-workspace-header {
    background: rgba(25, 43, 58, 0.72);
    border-bottom-color: rgba(255,255,255,0.06);
}

.vessel-track-workspace.is-empty
.vessel-track-workspace-panel:hover
.vessel-track-workspace-header {
    background: rgba(25, 43, 58, 0.94);
    border-bottom-color: rgba(255,255,255,0.10);
}

.vessel-track-workspace-header strong {
    font-size: 13px;
}


.vessel-track-workspace-count {
    margin-left: auto;

    color:
        rgba(255,255,255,0.50);

    font-size: 13px;
}


.vessel-track-workspace-close {
    width: 26px;
    height: 26px;

    margin-left: 7px;

    border: 0;
    border-radius: 5px;

    background: transparent;

    color:
        rgba(255,255,255,0.55);

    cursor: pointer;
}


.vessel-track-workspace-close:hover {
    color: #fff;

    background:
        rgba(255,255,255,0.08);
}

.vessel-track-workspace-list {
	position: relative;
    width: 100%;
    flex: 0 1 auto;

    height: 170px;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 8px 10px 6px;
    box-sizing: border-box;

    border-bottom: 1px solid rgba(255,255,255,0.10);
    
    scrollbar-width: thin;
    scrollbar-color:
        rgba(255,255,255,0.20)
        rgba(255,255,255,0.04);
}

.vessel-track-workspace-list::before {
    content: "";

    position: absolute;

    top: 8px;
    left: 10px;
    right: 10px;
    bottom: 6px;

    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;

    pointer-events: none;
}

#vesselTrackSearchBox {
    width: 100%;

    min-width: 0;

    overflow: visible;

    box-sizing: border-box;
}

/* 빈 상태 */
.vessel-track-workspace-empty {
    min-height: 90px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    color:
        rgba(255,255,255,0.42);

    text-align: center;
}


.vessel-track-workspace-empty strong {
    color:
        rgba(255,255,255,0.70);

    font-size: 11px;
}


.vessel-track-workspace-empty span {
    font-size: 9px;
}
.vessel-track-workspace.is-hidden {
    display: none;
}

/* ==============================================
   항적 관리 - 조회 대기
============================================== */

.vessel-track-request-card {
    margin: 0;
    padding: 9px 4px;

    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;

    background: transparent;
}

.vessel-track-request-card:last-child {
    border-bottom: 0;
}

.vessel-track-request-head {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 5px;
}

.vessel-track-request-title {
    flex: 1;
    min-width: 0;
}

.vessel-track-request-title strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: rgba(255,255,255,0.94);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.15;
}

.vessel-track-request-title span {
    display: block;

    margin-top: 2px;

    color: rgba(255,255,255,0.45);

    font-size: 9px;

    line-height: 1.1;
}

.vessel-track-request-remove {
    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    padding: 0;

    border: 0;
    border-radius: 4px;

    background: transparent;
    color: rgba(255,255,255,0.60);

    font-size: 15px;
    line-height: 1;

    cursor: pointer;
}

.vessel-track-request-remove:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}


.vessel-track-request-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 4px;
}

.vessel-track-request-form input[type="date"] {
    width: 100%;
    min-width: 0;
    height: 27px;

    padding: 0 4px;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 4px;

    background: rgba(255,255,255,0.04);
    color: #fff;

    font-size: 9px;
}

.vessel-track-request-form > span {
    color: rgba(255,255,255,0.40);

    font-size: 10px;
}

.vessel-track-request-search {
    height: 27px;

    padding: 0 9px;

    border: 0;
    border-radius: 4px;

    background: #1683dd;
    color: #fff;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}
.vessel-track-request-search:hover {
    background: #2893eb;
}

/* ==============================================
   항적 작업함 - 조회 완료
============================================== */

.vessel-track-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 6px 0;
    padding: 6px 2px;

    color: rgba(255,255,255,0.88);

    font-size: 13px;
    font-weight: 700;
}

.vessel-track-section-title.is-loaded {
    margin-top: 12px;
    padding-top: 12px;

    border-top: 1px solid rgba(255,255,255,0.12);
}


.vessel-track-loaded-card {
    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 6px;

    margin-bottom: 6px;
    padding: 5px 7px;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 6px;

    background: rgba(255,255,255,0.035);
}

.vessel-track-loaded-card.is-active {
    border-color: rgba(53,168,235,0.85);
    background: rgba(25,120,190,0.16);
}

.vessel-track-loaded-select strong {
    font-size: 12px;
    font-weight: 700;
}

.vessel-track-loaded-select span {
    margin-top: 2px;

    color: rgba(255,255,255,0.44);

    font-size: 10px;
}


.vessel-track-loaded-card.is-hidden-track {
    opacity: 0.48;
}


.vessel-track-loaded-color {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    box-shadow:
        0 0 0 1px rgba(255,255,255,0.55);
}


.vessel-track-loaded-select {
    min-width: 0;
    flex: 1;

    padding: 2px 3px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    border: 0;

    background: transparent;
    color: #fff;

    cursor: pointer;
}


.vessel-track-loaded-select strong {
    width: 100%;

    overflow: hidden;

    font-size: 12px;
    font-weight: 700;

    text-align: left;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.vessel-track-loaded-select span {
    margin-top: 2px;

    color:
        rgba(255,255,255,0.42);

    font-size: 10px;
}


.vessel-track-loaded-fit {
    height: 26px;

    padding: 0 7px;

    border:
        1px solid rgba(255,255,255,0.13);

    border-radius: 4px;

    background:
        rgba(255,255,255,0.06);

    color:
        rgba(255,255,255,0.80);

    font-size:11px;
    font-weight:600;

    cursor: pointer;
}


.vessel-track-loaded-visible,
.vessel-track-loaded-remove {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    padding: 0;

    border: 0;
    border-radius: 4px;

    background: transparent;

    color:
        rgba(255,255,255,0.62);

    cursor: pointer;
}


.vessel-track-loaded-visible:hover,
.vessel-track-loaded-remove:hover,
.vessel-track-loaded-fit:hover {

    background:
        rgba(255,255,255,0.09);

    color: #fff;
}

#vesselTrackManagerList,
#vesselTrackManagerCount {
    display: none !important;
}

/* =========================================================
   항적 관리 - 선택 항적 상세
========================================================= */

.vessel-track-detail-panel {
    width: 100%;

    margin: 0;
    padding: 12px;

    
    min-height: 590px;

    box-sizing: border-box;
}


.vessel-track-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 11px;
}


.vessel-track-detail-name {
    max-width: 230px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #fff;

    font-size: 13px;
    font-weight: 700;
}


.vessel-track-detail-mmsi {
    margin-top: 2px;

    color:
        rgba(255,255,255,0.42);

    font-size: 11px;
}


.vessel-track-detail-status {
    flex: none;

    padding: 3px 7px;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.09);

    color:
        rgba(255,255,255,0.72);

    font-size: 11px;
    line-height: 1.5;
}


.vessel-track-detail-summary {
    display: grid;

    grid-template-columns:
        66px minmax(0,1fr);

    column-gap: 10px;
    row-gap: 7px;

    font-size: 11px;
    line-height: 1.5;
}


.vessel-track-detail-summary > span {
    color:
        rgba(255,255,255,0.43);
}


.vessel-track-detail-summary > strong {
    overflow: hidden;

    color:
        rgba(255,255,255,0.84);

    font-weight: 500;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.vessel-track-detail-section {
    margin-top: 11px;
    padding-top: 10px;

    border-top:
        1px solid rgba(255,255,255,0.09);
}


.vessel-track-detail-section-title {
    margin-bottom: 7px;

    color:
        rgba(255,255,255,0.52);

    font-size: 10px;
    font-weight: 600;
}


.vessel-track-radio-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px 11px;

    color:
        rgba(255,255,255,0.82);

    font-size: 10px;
}


.vessel-track-radio-group label {
    display: inline-flex;
    align-items: center;

    gap: 3px;

    cursor: pointer;
}


.vessel-track-detail-actions {
    display: flex;
    justify-content: flex-end;

    gap: 6px;

    margin-top: 12px;
}


.vessel-track-detail-actions button {
    height: 29px;

    padding: 0 10px;

    border:
        1px solid rgba(255,255,255,0.14);

    border-radius: 4px;

    background:
        rgba(255,255,255,0.06);

    color:
        rgba(255,255,255,0.82);

    font-size: 10px;

    cursor: pointer;
}


.vessel-track-detail-actions button:hover {
    background:
        rgba(255,255,255,0.11);

    color: #fff;
}

/* =========================================================
   항적 관리 - 항적 데이터 테이블
========================================================= */

.vessel-track-data-section {
    width: 100%;

    margin-top: 14px;
    padding-top: 12px;

    box-sizing: border-box;

    border-top: 1px solid rgba(255,255,255,0.10);
}

.vessel-track-data-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 7px;
}

.vessel-track-data-header strong {
    color: rgba(255,255,255,0.92);
    font-size: 12px;
    font-weight: 700;
}

.vessel-track-data-header span {
    color: rgba(255,255,255,0.48);
    font-size: 10px;
}


.vessel-track-table-wrap {
    width: 100%;
    max-height: 300px;

    overflow-x: auto;
    overflow-y: auto;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 5px;
}

.vessel-track-table-wrap {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(255,255,255,0.20)
        rgba(255,255,255,0.04);
}


/* 표 */
.vessel-track-table {
    width: max-content;
    min-width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    font-size: 11px;
}


/* 헤더 고정 */
.vessel-track-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;

    padding: 7px 8px;

    background: #263b4c;

    color: rgba(255,255,255,0.74);
    font-weight: 700;

    border: 1px solid rgba(255,255,255,0.12);

    text-align: center;
    white-space: nowrap;
}


/* 데이터 */
.vessel-track-table tbody td {
    padding: 6px 8px;

    border: 1px solid rgba(255,255,255,0.06);

    text-align: center;
    white-space: nowrap;
}


/* 행 확인하기 쉽게 */
.vessel-track-table tbody tr:hover td {
    background: rgba(255,255,255,0.055);
}


/* 순번 */
.vessel-track-table th:first-child,
.vessel-track-table td:first-child {
    min-width: 18px;
}


/* 수신시간 */
.vessel-track-table th:nth-child(2),
.vessel-track-table td:nth-child(2) {
    min-width: 88px;
}


/* 좌표 */
.vessel-track-table th:nth-child(3),
.vessel-track-table td:nth-child(3),
.vessel-track-table th:nth-child(4),
.vessel-track-table td:nth-child(4) {
    min-width: 60px;
}

.vessel-track-detail-date-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        10px
        minmax(0, 1fr)
        46px;

    align-items: center;

    gap: 5px;

    min-width: 0;
}


.vessel-track-detail-date-row input[type="date"] {
    width: 100%;
    min-width: 0;

    height: 30px;

    padding: 0 5px;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;

    background: rgba(255,255,255,0.04);
    color: #fff;

    font-size: 10px;
}


.vessel-track-detail-date-row > span {
    text-align: center;

    color: rgba(255,255,255,0.45);

    font-size: 10px;
}


#vesselTrackResearchBtn {
    width: 46px;
    height: 30px;

    padding: 0;

    border: 0;
    border-radius: 4px;

    background: #1683dd;
    color: #fff;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


#vesselTrackResearchBtn:hover {
    background: #2893eb;
}

/* 기본 상태: 작은 항적 버튼 표시 */
.vessel-track-workspace:not(.is-open)
.vessel-track-workspace-toggle {
    display: inline-flex !important;
}


/* 열린 상태: 작은 항적 버튼 숨김 */
.vessel-track-workspace.is-open
.vessel-track-workspace-toggle {
    display: none !important;
}


/* 열린 상태에서만 관리 패널 표시 */
.vessel-track-workspace:not(.is-open)
.vessel-track-workspace-panel {
    display: none !important;
}

.vessel-track-workspace.is-open
.vessel-track-workspace-panel {
    display: flex !important;
    flex-direction: column;
}

.vessel-track-workspace-list::-webkit-scrollbar,
.vessel-track-table-wrap::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.vessel-track-workspace-list::-webkit-scrollbar-track,
.vessel-track-table-wrap::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
}

.vessel-track-workspace-list::-webkit-scrollbar-thumb,
.vessel-track-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.20);
    border-radius: 999px;
}

.vessel-track-workspace-list::-webkit-scrollbar-thumb:hover,
.vessel-track-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.32);
}


/* =========================================
   항적 관리 - 상세 화면 세로 레이아웃
========================================= */

/* 상세가 열리면 화면 높이를 적극 사용 */
.vessel-track-workspace.has-active-track
.vessel-track-workspace-panel {
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
}


/* 상세 결과 컨테이너 */
.vessel-track-workspace.has-active-track
#vesselTrackSearchBox {
    flex: 1;
    min-height: 0;
}


/* 상세 패널 */
.vessel-track-workspace.has-active-track
.vessel-track-detail-panel {
    height: 100%;
    min-height: 0;

    display: flex !important;
    flex-direction: column;
}


/* 항적 데이터 영역이 남은 공간을 사용 */
.vessel-track-workspace.has-active-track
.vessel-track-data-section {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;
}


/* 테이블이 최종 남은 공간을 사용 */
.vessel-track-workspace.has-active-track
.vessel-track-table-wrap {
    flex: 1;

    min-height: 180px;
    max-height: none;

    overflow: auto;
}

.vessel-track-loaded-card {
    position: relative;
}

.vessel-track-loaded-color {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;

    padding: 0;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 50%;

    background: var(--track-color);
    cursor: pointer;
}

.vessel-track-loaded-color:hover {
    transform: scale(1.15);
}


/* 색상 선택창 */
.vessel-track-color-picker {
    display: none;

    position: absolute;
    left: 8px;
    top: calc(100% + 4px);
    z-index: 50;

    padding: 6px;

    gap: 5px;

    background: #1d3040;

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.vessel-track-color-picker.is-open {
    display: flex;
}

.vessel-track-color-option {
    width: 15px;
    height: 15px;

    padding: 0;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 50%;

    background: var(--option-color);

    cursor: pointer;
}

.vessel-track-detail-date {
    height: 32px;
    width: 116px;

    padding: 0 9px;

    border:
        1px solid rgba(255,255,255,0.16);

    border-radius: 5px;

    background:
        rgba(255,255,255,0.04);

    color: #fff;

    cursor: pointer;

    transition:
        background .12s ease,
        border-color .12s ease,
        box-shadow .12s ease;
    caret-color: transparent;
}

.vessel-track-detail-date-row {
    gap: 6px;
}

.vessel-track-detail-date:hover {
    background:
        rgba(255,255,255,0.07);

    border-color:
        rgba(255,255,255,0.28);
}

.vessel-track-detail-date:focus {
    outline: none;

    border-color: #2196f3;

    box-shadow:
        0 0 0 2px
        rgba(33,150,243,0.15);

    background:
        rgba(255,255,255,0.08);
}

.vessel-track-detail-date
::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.75;
}