:root {
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --bg: #f7f8fb;
  --card: #ffffff;
  --border: #e5e7eb;
  --text: #1f2937;
  --text-muted: #6b7280;
  --danger: #dc2626;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--brand); text-decoration: none; }

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

header.topbar .brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
}

header.topbar .brand span { color: var(--brand); }

header.topbar .header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-links {
  display: flex;
  gap: 16px;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}

.nav-links a.active,
.nav-links a:hover {
  color: var(--brand);
}

/* 공유 버튼 + 팝오버 */
.share-popover-wrap {
  position: relative;
}

.share-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 14px;
  z-index: 100;
  display: none;
}

.share-popover.open { display: block; }

.share-popover .row { align-items: center; }

/* 여행 상태 배지 */
.status-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
}

.status-badge.upcoming { background: #eff6ff; color: var(--brand-dark); }
.status-badge.ongoing { background: #ecfdf5; color: #047857; }
.status-badge.done { background: #f3f4f6; color: var(--text-muted); }
.status-badge.draft { background: #fef3c7; color: #92400e; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}

/* 공용 위젯(js/widgets)은 여러 페이지에 얹히고, 그중 tools.html은 CSP에
   style-src 'unsafe-inline'이 없으므로 위젯 안에서 인라인 style="" 대신 이 유틸을 쓴다. */
.flex-none { flex: 0 0 auto; }
.m-0 { margin: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 6px; }
.p-4 { padding: 16px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.btn:hover { background: #f3f4f6; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:disabled:hover { background: var(--card); }

.btn-armed {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-armed:hover { background: var(--brand-dark); }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn-primary:hover { background: var(--brand-dark); }

.btn-danger { color: var(--danger); border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; }

.btn-sm { padding: 5px 10px; font-size: 13px; }

input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}

textarea { resize: vertical; min-height: 60px; }

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.field { margin-bottom: 12px; }

.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

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

/* trip.html/share.html 전용 3분할 레이아웃 (일정 목록 / 지도 / 코멘트).
   PC: 2열 그리드 — 왼쪽 trip-col-main, 오른쪽 trip-col-side(지도+코멘트를
   감싼 래퍼, 자기 내용물 높이만큼만 차지). 처음엔 grid-template-areas로
   "main map"/"main comments" 두 줄에 걸치게 했는데, main(일정 목록)이 아주
   길어지면(Day가 많을 때) 그리드가 행 높이를 이상하게 나눠서 지도-코멘트
   사이에 수천 px짜리 빈 공간이 생기는 버그가 있었음(2026-08-30 확인). 지도랑
   코멘트를 하나의 래퍼로 묶어서 "그 열은 자기 내용만큼만" 차지하게 바꿔서 해결. */
.trip-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.trip-col-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* .card 자체의 margin-bottom과 부모의 gap이 같은 방향으로 겹치면 간격이
   들쭉날쭉해짐 — 실제로 사용자가 지적해서 확인 후 고침 (2026-08-30).
   trip-layout/trip-col-side 안에서는 카드 자체 margin을 없애고 gap 하나로만
   간격을 통일한다. */
.trip-col-main > .card:last-child,
.trip-col-map > .card:last-child,
.trip-col-comments > .card:last-child {
  margin-bottom: 0;
}

/* 모바일: "목록/지도" 탭 전환 방식. 처음엔 지도를 화면 상단에 fixed로
   못박아뒀는데, 목록을 스크롤하면 "지도는 가만있고 나머지 내용이 지도 뒤로
   말려들어가는" 느낌이 부자연스럽다는 피드백을 받음(2026-08-30) — fixed는
   태생적으로 그렇게 보일 수밖에 없어서(뭔가는 반드시 그 아래로 스크롤되어
   사라짐), 미세조정이 아니라 방식 자체를 바꿈. 에어비앤비 모바일처럼 한 번에
   하나만(목록 또는 지도) 온전히 보여주고 둘 다 완전히 정상적으로 스크롤되게 함
   — fixed/sticky를 아예 안 쓰니 이런 종류의 "부자연스러움"이 원천적으로 없음. */
@media (max-width: 860px) {
  .trip-layout {
    display: flex;
    flex-direction: column;
    /* align-items 기본값(normal→stretch가 아닌 경우가 있음)에 맡겼다가
       지도 폭이 1.6px로 찌그러지는 버그가 났었음 — 명시적으로 stretch를
       줘서 각 항목이 항상 컨테이너 전체 너비를 채우게 함 (2026-08-30 재발 확인). */
    align-items: stretch;
  }
  .trip-col-side {
    display: contents;
  }
  /* 기본은 "일정" 뷰 — 지도 숨김 */
  .trip-layout:not(.mobile-view-map) .trip-col-map {
    display: none;
  }
  /* "지도" 뷰 — 목록/코멘트 숨기고 지도를 화면 대부분을 채우도록 크게 */
  .trip-layout.mobile-view-map .trip-col-main,
  .trip-layout.mobile-view-map .trip-col-comments {
    display: none;
  }
  .trip-layout.mobile-view-map #map {
    height: 60vh;
  }
}

/* .tabs와 클래스가 같이 붙어있는데(디자인 재사용), .tabs { display:flex }가
   파일 뒤쪽에 있어서 그냥 .mobile-view-toggle { display:none }만 걸면
   소스 순서상 .tabs 규칙에 밀려 데스크톱에서도 보일 뻔했음 — 그래서
   .tabs.mobile-view-toggle처럼 두 클래스를 합쳐 명시도를 올려서 순서와
   무관하게 항상 이기도록 함. */
.tabs.mobile-view-toggle { display: none; }

@media (max-width: 860px) {
  .tabs.mobile-view-toggle { display: flex; }
}

.muted { color: var(--text-muted); font-size: 13px; }

.trip-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
}

.trip-list-item h3 { margin: 0 0 4px; font-size: 16px; }

.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tab {
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.tab-date {
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.8;
}

.tab.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.item-card {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fff;
}

.item-time {
  min-width: 56px;
  font-weight: 700;
  color: var(--brand);
  font-size: 13px;
}

.item-number {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 순서변경(▲▼)은 "이 일정의 위치"를 다루는 조작이라 번호 배지와 한 묶음으로 둠 */
.item-order {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.item-order .btn {
  padding: 1px 6px;
  font-size: 10px;
  line-height: 1.4;
}

/* 수정/삭제는 "내용에 대한 조작"이라 카드 오른쪽 끝에 묶어서 배치 */
.item-card-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
  align-self: flex-start;
}

.item-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-xs {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 999px;
}

.color-swatches {
  display: flex;
  gap: 8px;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0;
}

.color-swatch.selected {
  border-color: #1f2937;
  box-shadow: 0 0 0 2px #fff inset;
}

.place-result-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin-top: 6px;
  cursor: pointer;
}

.item-body { flex: 1; }
.item-body h4 { margin: 0 0 2px; font-size: 15px; }
.item-actions { display: flex; gap: 6px; align-items: flex-start; }

/* 회전 없는 단순 원형 배지 — 이전에 "말풍선" 모양으로 -45deg 돌렸더니
   삐뚤어져 보인다는 피드백이 있어서 회전을 아예 없앰 */
.map-pin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* 검색 결과를 고른 직후 지도에 보여주는 미리보기 표시 — 글자 없이 펄스 링만 */
.map-pin-preview-wrap {
  position: relative;
  width: 20px;
  height: 20px;
}

.map-pin-preview-dot {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #f59e0b;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.map-pin-preview-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #f59e0b;
  opacity: 0.5;
  animation: map-pin-pulse 1.4s ease-out infinite;
}

@keyframes map-pin-pulse {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

#map {
  width: 100%;
  height: 420px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* 모바일에서 지도는 상단에 고정(sticky)되니, 화면을 너무 많이 잡아먹지 않게
   낮춤 — CSS 소스 순서상 위의 기본 #map 규칙보다 뒤에 있어야 이긴다
   (미디어쿼리라고 우선하는 게 아니라 같은 우선순위면 나중 규칙이 이김). */
@media (max-width: 860px) {
  #map { height: 220px; }
}

.widget-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.widget-tab {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}

.widget-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.comment-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.comment-item:last-child { border-bottom: none; }
.comment-author { font-weight: 700; font-size: 13px; }
.comment-time { color: var(--text-muted); font-size: 12px; margin-left: 6px; }
.comment-body { margin-top: 3px; font-size: 14px; white-space: pre-wrap; }

.share-box {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #f3f4f6;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.share-box input { background: #fff; }

.banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 20px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.toast.show { opacity: 1; }

.destination-result {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.destination-result img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.currency-result {
  font-size: 22px;
  font-weight: 700;
  margin-top: 10px;
  color: var(--brand-dark);
}