:root {
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --bg: #f7f8fb;
  --card: #ffffff;
  --border: #e5e7eb;
  --text: #1f2937;
  --text-muted: #6b7280;
  --danger: #dc2626;
  --radius: 12px;
  /* 모바일 브라우저(삼성 인터넷/크롬의 "자동 다크")가 다크모드를 고려 안 한
     사이트를 제멋대로 색 반전시켜서 글자가 안 보이는 문제가 있었음
     (2026-08-31). 아래에서 실제로 다크 팔레트를 정의해 직접 대응하므로,
     브라우저가 임의로 반전하지 않도록 명시적으로 선언해둔다. */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #4d8dff;
    --brand-dark: #7db0ff;
    --bg: #11151d;
    --card: #1a2030;
    --border: #2c3444;
    --text: #e8eaf0;
    --text-muted: #9aa3b5;
    --danger: #f87171;
  }
}

* { 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;
  flex-wrap: wrap;
  row-gap: 10px;
  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);
  white-space: nowrap;
}

/* .brand 안에 <a>가 있는 페이지(trip/share/tools)와 없는 페이지(index)가 섞여있어서
   각 <a>에 style="color:inherit"만 믿지 않고 명시적으로 지정한다 — 링크 기본색/
   방문색(:visited)이 껴들어서 전체가 파랗게 보이는 문제 방지. */
header.topbar .brand a,
header.topbar .brand a:visited {
  color: var(--text);
}

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

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

/* 이메일 주소처럼 공백 없는 긴 문자열은 글자 중간에서 줄바꿈될 수 있어서
   (모바일 좁은 화면에서 실제로 겹쳐 보이는 문제가 있었음, 2026-08-31)
   명시적으로 막는다. */
#auth-area { white-space: nowrap; }

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

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

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

/* ==========================================================================
   index.html 랜딩 히어로 (.tp-landing) — 2026-08-31 "TripPop Landing" 시안 적용
   Claude Design에서 만든 .dc.html 시안(React 전용 컴포넌트 포맷)을 이 프로젝트의
   빌드 도구 없는 순수 HTML/CSS/JS 구조에 맞게 포팅한 것. 레이아웃 대부분은
   index.html의 인라인 style="" 그대로 두고(원본과 최대한 동일하게), 여기서는
   실제 CSS가 필요한 부분(:hover, 키프레임, 미디어쿼리, 폰트)만 정의한다.
   원본의 style-hover="..." 속성(Claude Design 전용 문법, 실제 CSS 아님)은
   여기 :hover 규칙으로 옮겨졌다.
   ========================================================================== */

.tp-landing {
  font-family: "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif;
  background: oklch(0.978 0.006 90);
  color: oklch(0.24 0.02 250);
  /* 한국어는 어절(단어) 단위로 줄바꿈해야 자연스러운데, 기본값은 필요하면
     글자 중간에서도 끊는다 — 문장 중간에 이상하게 끊겨 보인다는 피드백
     반영 (2026-08-31). */
  word-break: keep-all;
}

@media (prefers-color-scheme: dark) {
  .tp-landing {
    background: #0d1117;
    color: #e8eaf0;
  }
  .tp-feature-section {
    background: #11151d !important;
    border-color: #232b3a !important;
  }
  .tp-feature-card {
    background: #171d2b !important;
    border-color: #2a3346 !important;
    color: #e8eaf0;
  }
  .tp-trip-card {
    background: #171d2b !important;
    border-color: #2a3346 !important;
    color: #e8eaf0;
  }
  .tp-cta-section {
    background: linear-gradient(180deg, #0d1117, #11151d) !important;
  }
  .tp-footer {
    background: #11151d !important;
    border-color: #232b3a !important;
    color: #9aa3b5 !important;
  }
  .tp-footer a, .tp-footer button {
    color: #c7cbd6 !important;
  }
  .tp-cta-ghost {
    color: #b6bbc7;
  }
  .tp-cta-ghost:hover {
    color: #e8eaf0;
  }
}

.tp-h1 {
  margin: 0;
  font-family: "Gowun Batang", serif;
  font-weight: 700;
  font-size: clamp(36px, 6.2vw, 68px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.tp-h2 {
  margin: 0;
  font-family: "Gowun Batang", serif;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.24;
  letter-spacing: -0.015em;
  font-weight: 700;
  text-wrap: balance;
}

.tp-google-cta {
  font-family: "Noto Sans KR", sans-serif;
  cursor: pointer;
}

.tp-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 26px;
  border-radius: 999px;
  background: white;
  border: 1px solid oklch(0.89 0.008 240);
  font-size: 16px;
  font-weight: 500;
  color: oklch(0.24 0.02 250);
  box-shadow: 0 14px 30px -18px oklch(0.3 0.04 250 / 0.55);
}
.tp-cta-primary:hover {
  border-color: oklch(0.7 0.06 220);
}

.tp-cta-ghost {
  display: inline-flex;
  align-items: center;
  padding: 15px 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  color: oklch(0.44 0.02 250);
}
.tp-cta-ghost:hover {
  color: oklch(0.22 0.02 250);
}

.tp-cta-dark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px;
  border-radius: 999px;
  border: none;
  background: oklch(0.24 0.02 250);
  color: white;
  font-size: 15px;
  font-weight: 500;
}
.tp-cta-dark:hover {
  background: oklch(0.16 0.02 250);
}

/* 에러 없을 때 #login-msg가 빈 <p>로 남아있는데, 그것도 히어로의 flex
   gap(22px) + 자기 줄높이만큼 공간을 차지해서 "체험하기" 링크와 지도
   카드 사이 여백이 필요 이상으로 넓어 보였다 (2026-08-31). 비어있을 땐
   레이아웃에서 아예 빼버린다 — 실제 오류 메시지가 채워지면 다시 보임. */
#login-msg:empty {
  display: none;
}

.tp-guest-link {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: oklch(0.5 0.02 250);
}
.tp-guest-link:hover {
  color: oklch(0.62 0.13 220);
}

.tp-feature-link {
  font-size: 14px;
  font-weight: 500;
  color: oklch(0.52 0.11 220);
}
.tp-feature-link:hover {
  color: oklch(0.42 0.11 220);
}

@keyframes tp-halo {
  0% { r: 10; opacity: 0.45; }
  75% { r: 26; opacity: 0; }
  100% { r: 26; opacity: 0; }
}
.tp-halo {
  animation: tp-halo 3s ease-out infinite;
}

@media (max-width: 640px) {
  /* 모바일에서 도시 이름표가 아예 안 보이면 번호만 남아 어디가 어딘지
     알기 어렵다는 피드백(2026-08-31) — 숨기는 대신 살짝 작게 줄여서 유지. */
  .tp-city { transform: scale(0.82); transform-origin: center; transform-box: fill-box; }
  .tp-pin { transform: scale(0.8); transform-origin: center; transform-box: fill-box; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-halo { animation: none !important; }
}

/* 공유 버튼 + 팝오버 */
.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;
  /* 버튼 안에서 글자가 두 줄로 쪼개지는 문제(좁은 화면에서 버튼이 줄어들 때
     "편집"이 "편\n집"처럼 끊기는 것) 방지 — 버튼 라벨은 항상 한 줄이어야
     한다 (2026-08-31 실제로 겪음). */
  white-space: nowrap;
}

.btn:hover { background: var(--border); }
.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: var(--card);
  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;
}

/* 모바일 레이아웃 히스토리:
   1) 지도를 position:fixed로 위에 못박음 → "지도는 안 움직이고 나머지만
      뒤로 말려들어가는" 게 부자연스럽다는 피드백(2026-08-30)
   2) "일정/지도" 탭으로 전환해서 한 번에 하나만 보여줌 → 지도가 안 보이는
      동안 컨테이너가 display:none이라 크기를 못 재서, 처음 지도 탭을 열 때
      확대/축소가 엉망이거나 경로선이 안 보이는 문제가 반복적으로 생김
      (2026-08-31). 탭을 없애는 게 아니라 그때그때 resize()로 땜질하는
      식으로는 이 종류의 버그가 근본적으로 안 없어짐.
   3) 그래서 탭 전환 자체를 없애고, 지도를 위에 작게 두고 그 아래 일정
      목록이 이어지는 구조로 바꿈(2026-08-31, 사용자 요청) — 지도가 항상
      DOM에 보이는 상태로 존재하니 "숨겨진 채로 초기화되는" 버그 종류가
      아예 발생할 수 없다. flex의 order로 시각적 순서만 바꾸고 DOM 순서는
      그대로 둔다. */
@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-col-map { order: -1; }
  .trip-col-main { order: 0; }
  .trip-col-comments { order: 1; }
}

.checklist-item,
.expense-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.checklist-item:last-child,
.expense-item:last-child {
  border-bottom: none;
}
.checklist-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.checklist-item label span.checked {
  text-decoration: line-through;
  color: var(--text-muted);
}
/* 2026-08-31: 일정/지출 관리/체크리스트/바우처/기타 5탭 개편 — 상단 탭 스위처 */
.top-tabs {
  display: flex;
  gap: 4px;
  background: var(--border);
  padding: 4px;
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 20px;
}
.top-tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.top-tab.active {
  background: var(--card);
  color: var(--brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.card-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

.summary-card .label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.summary-card .big-number { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.summary-card .big-number .sub { font-size: 13px; font-weight: 500; color: var(--text-muted); }

.progress-track { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width 0.3s ease; }
.progress-fill.over { background: var(--danger); }
.progress-caption { font-size: 12px; color: var(--text-muted); margin-top: 6px; display: flex; justify-content: space-between; gap: 10px; }

.add-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.field-row { display: flex; gap: 8px; flex-wrap: wrap; }
.field-row input, .field-row select { flex: 1; min-width: 90px; }

/* 체크리스트: 카테고리별 2단 카드 그리드 (2026-08-31, "12개밖에 없냐"는
   피드백으로 32개/6개 카테고리로 확장하면서 함께 도입) */
.checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .checklist-grid { grid-template-columns: 1fr; } }
.cat-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.cat-card h4 { margin: 0 0 8px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; color: var(--text); }
.cat-count { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 500; }

.cat-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 14%, var(--card));
  color: var(--brand);
}

.expense-main, .voucher-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.expense-title, .voucher-title { font-size: 14px; font-weight: 600; }
.expense-sub, .voucher-sub { font-size: 12px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.expense-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.voucher-item, .contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.voucher-item:last-child, .contact-item:last-child { border-bottom: none; }
.type-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: none;
  background: var(--bg);
}

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

.trip-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  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: var(--card);
  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: var(--card);
}

.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; flex-wrap: wrap; }

/* 검색 결과를 고른 직후 지도에 보여주는 미리보기 표시 — 글자 없이 펄스 링만 */
.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: 280px; }
}

.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: var(--bg);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.share-box input { background: var(--card); }

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

@media (prefers-color-scheme: dark) {
  .banner {
    background: #3a2f0f;
    border-color: #6b5416;
    color: #fbd989;
  }
}

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

/* 2026-08-31 신규 여행도구(세계시간/팁/경비정산) */
.wc-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.wc-item:last-child { border-bottom: none; }
.wc-city { flex: 1; font-weight: 600; font-size: 13.5px; }
.wc-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.wc-date { font-size: 12px; flex: none; }

.tip-percent-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.tip-percent-btn.selected { background: var(--brand); border-color: var(--brand); color: #fff; }

.split-row { align-items: center; margin-bottom: 8px; }
.split-row .split-name { flex: 1.3; }
.split-row .split-amount { flex: 1; }

/* tools.html은 CSP가 style-src 'self'로 인라인 스타일 자체를 막아둔 페이지라
   (외부 의존 없는 독립 페이지 원칙, SECURITY.md 참고), 위젯에서 자잘한 여백을
   주려면 인라인 style= 대신 이런 유틸리티 클래스를 써야 한다. */
.mt-3 { margin-top: 12px; }
.tools-note-list { margin: 8px 0 0; padding-left: 18px; }
.tools-details > summary { cursor: pointer; }
.hr-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.text-warning { color: #b45309; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* 2026-09-01 신규 여행도구(전압/짐무게/음식룰렛/비자/여행스타일/짐리스트/비행시간) */
.baggage-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.baggage-row:last-child { border-bottom: none; }

.food-cat-btn.selected { background: var(--brand); border-color: var(--brand); color: #fff; }
.food-roulette-result {
  margin-top: 14px;
  min-height: 40px;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-dark);
  display: flex;
  align-items: center;
}

.visa-disclaimer {
  background: color-mix(in srgb, #b45309 12%, var(--card));
  border: 1px solid color-mix(in srgb, #b45309 35%, var(--border));
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.6;
}
.visa-status { font-size: 15px; font-weight: 600; padding: 10px 0; }
.visa-free { color: #16a34a; }
.visa-eta { color: #b45309; }
.visa-required { color: var(--danger); }
.visa-check { color: var(--text-muted); }

.quiz-options { display: flex; flex-direction: column; gap: 6px; }
.quiz-option-btn { text-align: left; }
.quiz-option-btn.selected { background: var(--brand); border-color: var(--brand); color: #fff; }
.travel-style-result { background: var(--bg); border-radius: 10px; padding: 14px; }