* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ── Header ── */
#trip-header {
  padding: 10px 16px;
  background: #1a1a2e;
  color: #fff;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0; z-index: 200;
}
#trip-title { font-size: 1.05rem; white-space: nowrap; }
#trip-dates { font-size: 0.78rem; opacity: 0.75; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#sidebar-toggle-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 10px;
  white-space: nowrap;
}
#sidebar-toggle-btn:hover { background: rgba(255,255,255,0.25); }


/* ── Layout ── */
#main { display: flex; flex: 1; overflow: hidden; position: relative; }
#map  { flex: 1; z-index: 1; }

/* ── Sidebar (Desktop) ── */
#sidebar {
  width: 320px;
  background: #f7f7f8;
  border-left: 1px solid #e0e0e0;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width 0.25s ease;
  position: relative;
  z-index: 100;
}

/* Desktop collapsed */
body.sidebar-collapsed #sidebar { width: 0; border-left: none; }

/* ── Sidebar bottom mode ── */
body.sidebar-bottom #main { flex-direction: column; }
body.sidebar-bottom #sidebar {
  width: 100% !important;
  height: 280px;
  border-left: none;
  border-top: 1px solid #e0e0e0;
  transition: height 0.25s ease;
}
body.sidebar-bottom.sidebar-collapsed #sidebar { height: 0; border-top: none; }

/* 하단 모드: resize 핸들 → 상단 중앙 pill */
body.sidebar-bottom #sidebar-resize {
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 72px; height: 20px;
  cursor: row-resize;
  border-radius: 0 0 10px 10px;
  background: rgba(255,255,255,0.9);
  border: 1px solid #e0e0e0;
  border-top: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
body.sidebar-bottom #sidebar-resize::after {
  width: 32px; height: 3px;
  background: repeating-linear-gradient(to right, #ccc 0px, #ccc 4px, transparent 4px, transparent 8px);
}
body.sidebar-bottom #sidebar-resize:hover,
body.sidebar-bottom #sidebar-resize.resizing { background: rgba(42,157,143,0.1); }
body.sidebar-bottom #sidebar-resize:hover::after,
body.sidebar-bottom #sidebar-resize.resizing::after {
  background: repeating-linear-gradient(to right, #2a9d8f 0px, #2a9d8f 4px, transparent 4px, transparent 8px);
}

/* 하단 모드: edge-toggle → 상단 중앙 탭 */
body.sidebar-bottom #sidebar-edge-toggle {
  position: absolute;
  left: 50%; top: -28px;
  transform: translateX(-50%);
  width: 64px; height: 28px;
  border-radius: 8px 8px 0 0;
  border: 1px solid #e0e0e0; border-bottom: none;
  box-shadow: -2px -3px 8px rgba(0,0,0,0.08);
}
body.sidebar-bottom.sidebar-collapsed #sidebar-edge-toggle {
  position: fixed; bottom: 0; top: unset;
  left: 50%; transform: translateX(-50%);
}

/* 길게누르기 repo 모드 */
#sidebar-resize.repo-mode { background: rgba(42,157,143,0.25) !important; cursor: grab; }

/* 위치 전환 피드백 */
@keyframes pos-flash {
  0%   { background: rgba(42,157,143,0.0); }
  35%  { background: rgba(42,157,143,0.55); }
  100% { background: rgba(42,157,143,0.0); }
}
#sidebar-resize.pos-flash { animation: pos-flash 0.7s ease-out; }

/* 드래그 방향 미리보기 오버레이 */
#repo-preview {
  position: fixed; z-index: 99999;
  background: rgba(42,157,143,0.15);
  border: 2px solid rgba(42,157,143,0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: #2a9d8f;
  pointer-events: none;
  backdrop-filter: blur(2px);
}
.repo-preview-bottom { bottom: 0; left: 0; right: 0; height: 60px; }
.repo-preview-right  { top: 0; right: 0; bottom: 0; width: 60px; }

/* ── Sidebar resize handle ── */
#sidebar-resize {
  position: absolute;
  left: 0; top: 0;
  width: 8px; height: 100%;
  cursor: col-resize;
  z-index: 200;
  transition: background 0.15s;
  display: flex; align-items: center; justify-content: center;
}
#sidebar-resize::after {
  content: '';
  display: block;
  width: 3px; height: 36px;
  background: repeating-linear-gradient(
    to bottom,
    #ccc 0px, #ccc 3px,
    transparent 3px, transparent 7px
  );
  border-radius: 2px;
  opacity: 0.6;
  pointer-events: none;
}
#sidebar-resize:hover, #sidebar-resize.resizing {
  background: rgba(42,157,143,0.18);
}
#sidebar-resize:hover::after, #sidebar-resize.resizing::after {
  opacity: 1;
  background: repeating-linear-gradient(
    to bottom,
    #2a9d8f 0px, #2a9d8f 3px,
    transparent 3px, transparent 7px
  );
}
body.sidebar-collapsed #sidebar-resize { display: none; }

#sidebar-close-btn {
  display: none; /* hidden on desktop */
}

#sidebar-body {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  min-width: 0;
}

/* ── Sidebar edge toggle (desktop) ── */
#sidebar-edge-toggle {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 80px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-right: none;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: -3px 0 10px rgba(0,0,0,0.1);
  z-index: 150;
  transition: color 0.15s, background 0.15s;
  user-select: none;
}
#sidebar-edge-toggle:hover { background: #f0f0f0; color: #222; }

/* collapsed: 버튼이 지도 오른쪽 가장자리에 고정 */
body.sidebar-collapsed #sidebar-edge-toggle {
  position: fixed;
  right: 0;
  left: unset;
  border-radius: 10px 0 0 10px;
}

/* ── Filter bar ── */
#filter-bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}
.filter-btn {
  padding: 3px 10px;
  border: 1.5px solid #ccc; border-radius: 20px;
  cursor: pointer; font-size: 0.76rem;
  background: #f5f5f5; color: #aaa;
  transition: all 0.15s;
}
.filter-btn.active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }

/* ── Schedule tabs ── */
#schedule-tabs-wrap {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.schedule-label {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #bbb;
  padding: 6px 12px 2px;
}
#schedule-tabs {
  display: flex; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  padding: 0 8px 8px;
  scrollbar-width: none;
  cursor: grab;
}
#schedule-tabs::-webkit-scrollbar { display: none; }

.sched-tab {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 2px solid #ddd; border-radius: 20px;
  margin-right: 4px;
  cursor: pointer; font-size: 0.78rem;
  background: #fff; color: #555;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.sched-tab:first-child { border-color: #1a1a2e; color: #1a1a2e; }
.sched-tab:first-child.active { background: #1a1a2e; color: #fff; }
.sched-tab:not(:first-child) { border-color: var(--day-color, #ccc); color: var(--day-color, #555); }
.sched-tab:not(:first-child).active { background: var(--day-color, #aaa); color: #fff; }

.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 0.68rem;
  padding: 0 5px; margin-left: 4px; min-width: 16px;
  background: var(--day-color, #aaa); color: #fff;
}
.sched-tab.active .tab-count { background: rgba(255,255,255,0.3); color: #fff; }

/* ── Tab content ── */
#tab-content { flex: 1; overflow-y: auto; padding: 10px; }

/* 카테고리 미지정 섹션 */
.unassigned-section { margin-top: 10px; }
.unassigned-header {
  font-size: 0.75rem; font-weight: 700; color: #999;
  padding: 6px 4px 4px;
  border-top: 1px dashed #ddd;
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}
.unassigned-card { opacity: 0.75; }
.unassigned-card:hover { opacity: 1; }
.add-to-day-btn {
  flex-shrink: 0;
  background: none; border: 1.5px solid #ccc;
  border-radius: 50%; width: 24px; height: 24px;
  font-size: 1rem; line-height: 1;
  cursor: pointer; color: #888;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.add-to-day-btn:hover { border-color: #2a9d8f; color: #2a9d8f; }

/* 전체 탭 */
.place-card {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07); gap: 8px;
}
.place-card-left { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.place-emoji { font-size: 1rem; flex-shrink: 0; }
.place-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.place-card-name {
  font-size: 0.84rem; color: #222; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.place-card-name:hover { text-decoration: underline; }
.card-transit { font-size: 0.72rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-transit small { color: #bbb; }
/* day-place-item 안의 길찾기 정보: 기본 숨김, hover 시만 표시 */
.day-place-item .card-transit { display: none; }
.day-place-item:hover .card-transit { display: block; }
.day-select {
  font-size: 0.76rem; padding: 3px 6px;
  border: 1.5px solid #ddd; border-radius: 6px;
  background: #f9f9f9; color: #444; cursor: pointer;
}

/* 날짜 탭 */
.acc-info { font-size: 0.88rem; padding: 8px 10px; background: #fff3cd; border-radius: 6px; margin-bottom: 6px; }
.dist-info { font-size: 0.78rem; color: #888; margin-bottom: 8px; padding: 0 2px; }

/* ── Day route step label ── */
.route-step-label {
  width: 28px; height: 28px; border-radius: 50%;
  color: #fff; font-size: 0.85rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  pointer-events: none;
}

.day-place-list { list-style: none; margin-bottom: 10px; }
.day-place-item {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-radius: 6px; padding: 8px 10px; margin-bottom: 5px;
  border-left: 4px solid #ccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  cursor: pointer;
}
.day-place-item:hover { background: #f5fffe; }
.drag-handle {
  color: #ccc; font-size: 1rem; cursor: grab; flex-shrink: 0;
  padding: 4px 6px 4px 0; user-select: none; touch-action: none;
  min-width: 24px; min-height: 24px; display: flex; align-items: center;
}
.drag-handle:active { cursor: grabbing; }
.day-place-item.dragging { opacity: 0.35; background: #f0f0f0; }
.day-place-item.drag-over { border-top: 2.5px solid #2a9d8f; }
.day-place-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; cursor: pointer; }
.day-place-name { font-size: 0.84rem; }
.day-place-info:hover .day-place-name { text-decoration: underline; }
.remove-btn { background: none; border: none; color: #ccc; font-size: 1rem; cursor: pointer; padding: 0 4px; }
.remove-btn:hover { color: #e63946; }

.add-place-wrap { position: relative; margin-top: 4px; }
.add-place-btn {
  width: 100%; padding: 7px; background: #fff;
  border: 1.5px dashed #ccc; border-radius: 8px;
  cursor: pointer; font-size: 0.82rem; color: #888;
}
.add-place-btn:hover { background: #f5f5f5; }
.add-dropdown {
  position: absolute; left: 0; right: 0;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
  z-index: 500; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 200px; overflow-y: auto; margin-top: 4px;
}
.add-dropdown.hidden { display: none; }
.add-dropdown-item { padding: 9px 12px; font-size: 0.84rem; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.add-dropdown-item:last-child { border-bottom: none; }
.add-dropdown-item:hover { background: #f5f5f5; }

/* ── Acc pin ── */
.acc-pin {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff3cd; border: 2.5px solid #f4a261;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}


/* ── Place popup ── */
#place-popup {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
#place-popup.hidden { display: none; }
#popup-inner {
  background: #fff; border-radius: 14px;
  max-width: 400px; width: 92%; padding: 48px 20px 20px;
  position: relative; max-height: 85vh; overflow-y: auto;
}
#popup-close {
  position: absolute; top: 12px; right: 12px;
  background: #f1f1f1; border: none; border-radius: 50%;
  width: 32px; height: 32px; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#popup-close:hover { background: #e0e0e0; }
#popup-delete {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 18px; padding: 10px;
  background: #fff; border: 1.5px solid #e63946; border-radius: 8px;
  color: #e63946; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
#popup-delete:hover { background: #e63946; color: #fff; }
#popup-thumbnail { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 12px; margin-top: 4px; }
#popup-thumbnail[src=""] { display: none; }
#popup-name { font-size: 1.1rem; font-weight: bold; margin-bottom: 6px; }
#popup-address, #popup-hours, #popup-admission, #popup-meta { font-size: 0.82rem; color: #555; margin-bottom: 4px; }
#popup-meta { color: #333; font-weight: 500; margin-top: 4px; }
#popup-menu { margin: 10px 0; }
.menu-category { font-size: 0.72rem; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: 0.06em; margin: 8px 0 3px; }
.menu-item { display: flex; justify-content: space-between; font-size: 0.81rem; padding: 3px 0; border-bottom: 1px solid #f5f5f5; }
.menu-price { color: #e63946; font-weight: 500; white-space: nowrap; margin-left: 8px; }
#popup-tips { margin: 10px 0; padding: 0; list-style: none; }
#popup-tips li { font-size: 0.79rem; color: #555; padding: 3px 0 3px 16px; position: relative; }
#popup-tips li::before { content: '💡'; position: absolute; left: 0; font-size: 0.72rem; }
#popup-transport { margin: 8px 0; }
#popup-transport span { display: inline-block; background: #e8f4fd; color: #1a6fa8; padding: 3px 8px; border-radius: 12px; font-size: 0.78rem; margin: 2px; }
/* ── Transit section ── */
#popup-transit { margin: 10px 0 4px; }
.transit-loading, .transit-empty { font-size: 0.78rem; color: #aaa; padding: 4px 0; }
.transit-header { font-size: 0.75rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; }
.transit-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 0; border-bottom: 1px solid #f5f5f5; font-size: 0.82rem;
}
.transit-item:last-child { border-bottom: none; }
.transit-icon { font-size: 1rem; flex-shrink: 0; }
.transit-name { flex: 1; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transit-info { font-size: 0.76rem; color: #888; white-space: nowrap; flex-shrink: 0; }

/* ── Sidebar hover highlight ring on map ── */
.place-hl {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid #ff5722;
  background: rgba(255, 87, 34, 0.15);
  box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.5);
  animation: place-hl-pulse 0.85s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes place-hl-pulse {
  from { transform: scale(0.88); box-shadow: 0 0 6px 2px rgba(255,87,34,0.35); }
  to   { transform: scale(1.12); box-shadow: 0 0 16px 6px rgba(255,87,34,0.65); }
}

.transit-line-label {
  background: #1976D2;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  pointer-events: none;
}

.transit-pin {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid #888;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  opacity: 0.85;
}

/* ── Transit filter control (좌하단) ── */
/* ── Text mode control (top-right) ── */
.text-mode-control { position: relative; }

.text-mode-toggle {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px; font-weight: 600; color: #333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.text-mode-toggle:hover { background: #f0f0f0; }
.text-mode-cur { font-size: 11px; color: #555; }

.text-mode-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px;
  background: rgba(255,255,255,0.97);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  min-width: 150px;
  z-index: 999;
}
.text-mode-panel.hidden { display: none; }

.text-mode-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border: 1.5px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
}
.text-mode-btn:hover { background: #f5f5f5; }
.text-mode-btn.active { background: #264653; border-color: #264653; }
.text-mode-btn.active .tm-label,
.text-mode-btn.active .tm-desc { color: #fff; }

.tm-label {
  font-size: 13px; font-weight: 700; color: #333;
  min-width: 42px;
}
.tm-desc {
  font-size: 11px; color: #888;
}

.transit-filter-control {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.92);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
}
.transit-filter-btn {
  padding: 5px 12px;
  border: 2px solid #ccc;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: #888;
  font-weight: 500;
  transition: all 0.18s;
  white-space: nowrap;
}
.transit-filter-btn:hover { border-color: #90caf9; color: #555; }
.transit-filter-btn.active {
  background: #e3f2fd;
  border-color: #1976D2;
  color: #1565C0;
  font-weight: 700;
}

#popup-links { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
#popup-links a { padding: 8px 12px; border-radius: 6px; text-decoration: none; font-size: 0.85rem; text-align: center; }
.link-gmaps    { background: #4285f4; color: #fff; }
.link-official { background: #34a853; color: #fff; }
.link-original { background: #f1f3f4; color: #333; }

/* ════════════════════════════════════════════
   MOBILE  (≤ 640px)
   ════════════════════════════════════════════ */
@media (max-width: 640px) {
  #trip-title { font-size: 0.95rem; }
  #trip-dates { display: none; }

  /* 모바일도 데스크탑과 동일하게 오른쪽 패널 */
  #sidebar { width: 260px; border-left: 1px solid #e0e0e0; }

  /* close 버튼 숨김 (edge-toggle로 대체) */
  #sidebar-close-btn { display: none; }
}

/* ════════════════════════════════════════════
   TABLET  (641px – 900px)
   ════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 900px) {
  #sidebar { width: 280px; }
}

/* ── Toast 알림 ──────────────────────────────────────────────── */
#toast-msg {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
}
#toast-msg.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Password modal ──────────────────────────────────────────── */
#password-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
#password-modal.hidden { display: none; }

#password-inner {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  min-width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
#password-inner h3 { margin: 0; font-size: 1.1rem; }
#password-input {
  padding: 0.6rem 0.8rem;
  border: 1px solid #ccc; border-radius: 8px;
  font-size: 1rem;
}
#password-submit {
  padding: 0.6rem; background: #e63946; color: #fff;
  border: none; border-radius: 8px; cursor: pointer; font-size: 1rem;
}
#password-error { color: #e63946; font-size: 0.85rem; margin: 0; }
#password-error.hidden { display: none; }

/* ── Flight modal ─────────────────────────────────────────────── */
#flight-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 9500;
}
#flight-modal.hidden { display: none; }
#flight-modal-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}
#flight-modal-close {
  position: absolute; top: -12px; right: -12px;
  width: 28px; height: 28px;
  background: #fff; border: none; border-radius: 50%;
  font-size: 1rem; cursor: pointer; line-height: 28px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#flight-modal-img {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  width: auto; height: auto;
  border-radius: 8px;
}