// 선박 컨텍스트 메뉴 스타일
// dark 프로젝트 패밀리 스타일 적용

.vessel-context-menu {
  background: var(--bg-dark, #1a1a2e);
  border: 1px solid var(--tertiary2, rgba(255, 255, 255, 0.15));
  border-radius: 0.6rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4);
  min-width: 18rem;
  user-select: none;
  font-size: var(--fs-s, 1.2rem);
  z-index: 10001;
  animation: contextMenuFadeIn 0.15s ease-out;

  .context-menu-header {
    padding: 1rem 1.2rem;
    background: var(--tertiary1, rgba(0, 0, 0, 0.3));
    border-bottom: 1px solid var(--tertiary2, rgba(255, 255, 255, 0.1));
    border-radius: 0.6rem 0.6rem 0 0;

    .vessel-name {
      display: block;
      font-weight: var(--fw-semibold, 600);
      color: var(--white, #fff);
      margin-bottom: 0.4rem;
      word-break: break-word;
    }

    .vessel-id {
      font-size: var(--fs-xs, 1.1rem);
      color: var(--tertiary4, #888);
      font-family: 'Courier New', monospace;
    }
  }

  .context-menu-divider {
    height: 1px;
    background: var(--tertiary2, rgba(255, 255, 255, 0.1));
    margin: 0;
  }

  .context-menu-items {
    padding: 0.8rem 0;

    .context-menu-item {
      width: 100%;
      background: none;
      border: none;
      padding: 0.8rem 1.2rem;
      text-align: left;
      cursor: pointer;
      transition: background-color 0.2s ease;
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: var(--fs-s, 1.2rem);
      color: var(--tertiary4, #ccc);

      &:hover {
        background: var(--tertiary2, rgba(255, 255, 255, 0.08));
        color: var(--white, #fff);
      }

      &:active {
        background: var(--tertiary1, rgba(255, 255, 255, 0.12));
      }

      i {
        width: 1.6rem;
        color: var(--primary1, #4a9eff);
        font-size: 1.2rem;
      }

      span {
        flex: 1;
      }
    }
  }

  @keyframes contextMenuFadeIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}
