:root {
  --bg: #fbf7f2;
  --surface: #ffffff;
  --surface-2: #f4ede4;
  --text: #2b2118;
  --muted: #7a6a5c;
  --line: #e7dccf;
  --accent: #FF7A00;       /* 선셋 오렌지: 배경·강조 */
  --accent-ink: #C2410C;   /* 밝은 배경 위 주황 글자 (읽기 쉬운 진한 주황) */
  --on-accent: #2A1400;    /* 주황 배경 위 글자 */
  --accent-soft: #FFE9D6;
  --ok-soft: #DCFCE7;
  --ok-ink: #166534;
  --gold: #b7791f;
  --ok: #15803d;
  --danger: #b91c1c;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 2px 8px rgba(60, 40, 20, .05);
  --tabbar-h: 62px;
  /* 도시 색 (흐름 막대) */
  --seg0: #DCEBFA; --seg0-ink: #1E4E7A;
  --seg1: #DDF0E0; --seg1-ink: #2F5D35;
  --seg2: #E9E1F7; --seg2-ink: #4B3A78;
  --seg3: #F5E9C9; --seg3-ink: #6B4E12;
  --seg4: #F8DDE4; --seg4-ink: #7A2E44;
  --seg5: #D5F0EE; --seg5-ink: #1F5E59;
}
/* 다크: 폰 설정을 따르되(자동) 앱 설정에서 밝게/어둡게 고정 가능 (html data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1511;
    --surface: #251e18;
    --surface-2: #2f2620;
    --text: #f3ece4;
    --muted: #b3a291;
    --line: #3d3229;
    --accent: #FF8A1F;
    --accent-ink: #FFA14D;
    --on-accent: #1A0D00;
    --accent-soft: #3d2416;
    --ok-soft: #14361f;
    --ok-ink: #86efac;
    --gold: #e0a64a;
    --ok: #4ade80;
    --danger: #f87171;
    --shadow: none;
    --seg0: #1d3247; --seg0-ink: #a9cdf2;
    --seg1: #1f3824; --seg1-ink: #a6dcae;
    --seg2: #2f2745; --seg2-ink: #cbbdf0;
    --seg3: #3a301a; --seg3-ink: #ecd49a;
    --seg4: #40222b; --seg4-ink: #f0b3c3;
    --seg5: #173a37; --seg5-ink: #9fe0d9;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1511;
  --surface: #251e18;
  --surface-2: #2f2620;
  --text: #f3ece4;
  --muted: #b3a291;
  --line: #3d3229;
  --accent: #FF8A1F;
  --accent-ink: #FFA14D;
  --on-accent: #1A0D00;
  --accent-soft: #3d2416;
  --ok-soft: #14361f;
  --ok-ink: #86efac;
  --gold: #e0a64a;
  --ok: #4ade80;
  --danger: #f87171;
  --shadow: none;
  --seg0: #1d3247; --seg0-ink: #a9cdf2;
  --seg1: #1f3824; --seg1-ink: #a6dcae;
  --seg2: #2f2745; --seg2-ink: #cbbdf0;
  --seg3: #3a301a; --seg3-ink: #ecd49a;
  --seg4: #40222b; --seg4-ink: #f0b3c3;
  --seg5: #173a37; --seg5-ink: #9fe0d9;
}
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; } /* 애니메이션 중 가로로 넓어져 화면 전체가 흔들리지 않게 */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-ink); }

/* 상단 */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 10px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand {
  margin: 0 0 1px; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--accent-ink);
}
.topbar h1 { margin: 0; font-size: 19px; }
.sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.icon-btn {
  border: 0; background: var(--surface-2); width: 38px; height: 38px; border-radius: 50%;
  font-size: 18px; cursor: pointer;
}

main { max-width: 640px; margin: 0 auto; padding: 12px 16px; }

/* 하단 탭 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--line);
}
.tabbar button {
  border: 0; background: none; font-size: 12px; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
}
.tabbar button.active { color: var(--accent-ink); font-weight: 600; }

/* 공통 카드 */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px;
}
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 8px; }
.section-title h2, .section-title h3 { margin: 0; font-size: 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

.btn {
  border: 1px solid var(--line); background: var(--surface); border-radius: 10px;
  padding: 9px 14px; cursor: pointer; font-size: 15px;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: transparent; background: transparent; }
.btn.sm { padding: 6px 10px; font-size: 13px; }
.add-btn {
  width: 100%; border: 1.5px dashed var(--line); background: transparent; color: var(--muted);
  border-radius: var(--radius); padding: 12px; cursor: pointer; font-size: 15px;
}

/* 날짜 칩 */
/* 전체 일정 흐름: 도시별 머무는 기간 막대 (색은 도시 순서대로 6가지) */
.flow { display: flex; gap: 3px; margin: 2px 0 10px; }
.flow-seg {
  min-width: 0; border: 0; border-radius: 8px; padding: 6px 2px; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; line-height: 1.25;
  background: var(--surface-2); color: var(--muted);
}
.flow-seg b { font-size: 11px; letter-spacing: -.2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-seg span { font-size: 11px; opacity: .85; }
.flow-seg.edge { justify-content: center; }
.flow-seg.on { box-shadow: inset 0 0 0 2px var(--accent); }
.flow-seg.c0 { background: var(--seg0); color: var(--seg0-ink); }
.flow-seg.c1 { background: var(--seg1); color: var(--seg1-ink); }
.flow-seg.c2 { background: var(--seg2); color: var(--seg2-ink); }
.flow-seg.c3 { background: var(--seg3); color: var(--seg3-ink); }
.flow-seg.c4 { background: var(--seg4); color: var(--seg4-ink); }
.flow-seg.c5 { background: var(--seg5); color: var(--seg5-ink); }
.day-strip {
  position: relative;
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.day-strip::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; scroll-snap-align: center;
  min-width: 58px; padding: 8px 10px; border-radius: 12px; text-align: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
}
.chip b { display: block; font-size: 17px; }
.chip span { font-size: 11px; color: var(--muted); }
.chip.past:not(.active) { background: var(--surface-2); border-color: transparent; }
.chip.past:not(.active) b, .chip.past:not(.active) span { color: var(--muted); }
.chip.today { border: 2px solid var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip.active span { color: var(--on-accent); opacity: .8; }

.day-head h2 { margin: 0; font-size: 20px; }
.day-head .city { color: var(--accent-ink); font-weight: 700; }
/* 현지 날씨 (예보 / 지난해 같은 날 참고) */
.wx { margin-top: 6px; font-size: 14px; }
.wx b { font-size: 15px; }
.wx.past { color: var(--muted); font-size: 13px; }
.wx.past span { font-size: 12px; }
.card.wx { margin-top: 0; padding: 10px 14px; }
.badge {
  display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 600;
}

/* 일정 타임라인 */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.tl-item:last-child { border-bottom: 0; }
.tl-item.done .tl-title { text-decoration: line-through; color: var(--muted); }
.tl-check {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); background: transparent;
  cursor: pointer; margin-top: 1px; padding: 0; font-size: 13px; color: #fff;
}
.tl-item.done .tl-check { background: var(--ok); border-color: var(--ok); }
.tl-body { min-width: 0; cursor: pointer; }
.tl-time { font-size: 13px; color: var(--accent-ink); font-weight: 700; }
.tl-title { font-weight: 600; }
.tl-memo { font-size: 14px; color: var(--muted); margin-top: 2px; white-space: pre-wrap; }
.tl-links { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.map-link {
  font-size: 13px; text-decoration: none; padding: 4px 9px; border-radius: 99px;
  background: var(--surface-2); color: var(--text);
}

/* 진행률 */
.progress { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }
.progress.over > i { background: var(--danger); }

/* 체크리스트 */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line);
}
.check-list li:last-child { border-bottom: 0; }
.check-list input[type=checkbox] { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.check-list label { flex: 1; cursor: pointer; }
.check-list li.done label { text-decoration: line-through; color: var(--muted); }
.check-list .overdue { color: var(--danger); font-size: 12px; font-weight: 600; margin-left: 4px; }
.more-btn { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 18px; line-height: 1; }
.filter-row { display: flex; gap: 6px; margin-bottom: 8px; }
.seg { border: 1px solid var(--line); background: var(--surface); padding: 6px 12px; border-radius: 99px; font-size: 13px; cursor: pointer; }
.seg.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* 예산 */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.stat .label { font-size: 12px; color: var(--muted); }
.stat .value { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cat-row { padding: 8px 0; }
.cat-row .row { justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.num { font-variant-numeric: tabular-nums; }
.exp-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.exp-item:last-child { border-bottom: 0; }
.exp-item .cat { font-size: 12px; background: var(--surface-2); padding: 2px 8px; border-radius: 99px; flex: 0 0 auto; }
.exp-item .memo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-item .amt { text-align: right; font-weight: 600; }
.exp-item .amt small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }

/* 예약 */
.book-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.book-item:last-child { border-bottom: 0; }
.book-type { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 20px; }
.book-main { flex: 1; min-width: 0; }
.book-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .5px; }
.book-code.empty { color: var(--danger); font-family: inherit; font-weight: 600; font-size: 13px; letter-spacing: 0; }
.contact { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.contact:last-child { border-bottom: 0; }
.call-btn { text-decoration: none; background: var(--ok); color: #fff; padding: 7px 12px; border-radius: 99px; font-size: 14px; font-weight: 600; }

/* 모달 */
dialog {
  border: 0; border-radius: 18px; padding: 0; width: min(560px, calc(100vw - 24px));
  background: var(--surface); color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
dialog::backdrop { background: rgba(20, 12, 5, .45); }
dialog form { padding: 18px; max-height: 85vh; overflow-y: auto; }
dialog h2 { margin: 0 0 12px; font-size: 18px; }
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: var(--bg); font-size: 16px; /* 16px 미만이면 iOS가 확대함 */
}
.field textarea { min-height: 80px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 여행 날짜 달력 (출발 → 도착) */
.rcal-sum { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.rcal-box { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--bg); }
.rcal-box.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rcal-box small { display: block; font-size: 11px; color: var(--muted); }
.rcal-box b { font-size: 14px; white-space: nowrap; }
.rcal-arrow { color: var(--muted); }
.rcal-len { font-size: 13px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.rcal { border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px 8px; background: var(--bg); touch-action: pan-y; overflow: hidden; }
#rcalDays.slide-l { animation: slide-l .22s ease-out; }
#rcalDays.slide-r { animation: slide-r .22s ease-out; }
.rcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rcal-head b { font-size: 15px; }
.rcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.rcal-week span { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 0; }
.rcal-week span:first-child { color: var(--danger); }
.rcal-day {
  height: 38px; border: 0; background: none; color: var(--text); font-size: 15px; cursor: pointer; border-radius: 0;
}
.rcal-day.sun { color: var(--danger); }
.rcal-day.today { font-weight: 800; text-decoration: underline; }
.rcal-day.mid { background: color-mix(in srgb, var(--accent) 38%, transparent); font-weight: 700; } /* 밝은·어두운 화면 모두에서 또렷하게 */
.rcal-day.start, .rcal-day.end { background: var(--accent); color: var(--on-accent); font-weight: 800; }
.rcal-day.start { border-radius: 10px 0 0 10px; }
.rcal-day.end { border-radius: 0 10px 10px 0; }
.rcal-day.solo { border-radius: 10px; }
.modal-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }

#toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none;
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 99px; font-size: 14px;
  transition: all .25s; z-index: 50; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.has-act { pointer-events: auto; }
#toast button {
  margin-left: 10px; border: 0; border-radius: 99px; padding: 4px 12px; font: inherit; font-weight: 700;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
}
.link-btn { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; color: var(--accent-ink); cursor: pointer; }

.empty-state { text-align: center; color: var(--muted); padding: 24px 0; font-size: 14px; }
.notice { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; }

/* 상단: 뒤로가기 */
.topbar[hidden] { display: none; }
.top-main { flex: 1; min-width: 0; }
.topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .icon-btn { flex: 0 0 auto; }

/* 홈·내 여행 상단: 로고가 그려진 노을 배너 (img/header.jpg, tools/make-header.ps1로 생성).
   그림 속 글자가 잘리지 않도록 높이를 그림 비율(1024x335)에 맞춘다. */
.hero {
  position: relative; padding-top: env(safe-area-inset-top);
  background: #f0a35e url('img/header.jpg') center bottom / 100% auto no-repeat;
}
.hero::before { content: ''; display: block; aspect-ratio: 1024 / 335; }
.hero[hidden] { display: none; }
/* 여행 탭: 얇은 띠 (그림 오른쪽 위 노을 하늘만 — 글자·배가 반쯤 잘려 보이지 않게) */
.hero.slim { background-size: 170% auto; background-position: 100% 8%; }
.hero.slim::before { aspect-ratio: auto; height: 44px; }
.hero.slim .hero-btn { top: calc(env(safe-area-inset-top) + 3px); width: 34px; height: 34px; }
.hero.slim + .top-tabs { margin-top: -10px; border-radius: 14px 14px 0 0; }
.hero-btn {
  position: absolute; top: calc(env(safe-area-inset-top) + 6px); right: 6px;
  border: 0; background: rgba(10, 14, 30, .28); color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
}
/* 글자 로고는 그림에 들어 있으므로 화면에서는 숨기고 화면 낭독기용으로만 남긴다 */
.logo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* 내 여행 상단 탭 (노을 배경 위로 살짝 겹치는 흰 판) */
.top-tabs {
  position: sticky; top: 0; z-index: 9;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border-bottom: 1px solid var(--line);
  border-radius: 18px 18px 0 0; margin-top: -16px;
  padding-top: env(safe-area-inset-top);
}
.top-tabs[hidden] { display: none; }
.hero[hidden] + .top-tabs { margin-top: 0; border-radius: 0; }
.top-tabs button {
  border: 0; background: none; cursor: pointer; padding: 15px 2px 12px; font-size: 15px; color: var(--muted);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.top-tabs button.active { color: var(--text); font-weight: 800; border-bottom-color: var(--text); }

/* 하단 탭 아이콘 */
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.tabbar button.active svg { stroke: var(--accent); }

/* 상태 칩 · 새 여행 버튼 */
.chips-row { display: flex; gap: 8px; overflow-x: auto; margin: 4px -16px 14px; padding: 0 16px; scrollbar-width: none; }
.chips-row::-webkit-scrollbar { display: none; }
.chip-f {
  flex: 0 0 auto; border: 0; border-radius: 99px; padding: 9px 15px; font-size: 14px; cursor: pointer;
  background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; gap: 7px;
}
.chip-f.active { background: #262626; color: #fff; font-weight: 600; }
.chip-f .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: inline-block; }
.cta {
  width: 100%; border: 0; border-radius: var(--radius); padding: 15px; margin-bottom: 14px; cursor: pointer;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 16px; font-weight: 800;
}
.search-box { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.search-box input {
  flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; background: var(--surface); font-size: 16px;
}

/* 여행 카드: 사진(없으면 노을빛 그라데이션) + 아래쪽 어둡게 + 흰 글씨 */
.trip-list { display: flex; flex-direction: column; gap: 14px; }
.trip-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  width: 100%; min-height: 172px; padding: 18px 20px; text-align: left; cursor: pointer;
  border: 0; border-radius: 20px; color: #fff; overflow: hidden;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .18) 75%), var(--cover);
  background-size: cover; background-position: center;
  box-shadow: 0 4px 14px rgba(40, 20, 0, .18);
}
.trip-card.past { filter: saturate(.55); }
.tc-badge { position: absolute; top: 16px; right: 16px; }
.tc-title { font-size: 22px; font-weight: 800; line-height: 1.25; padding-right: 76px; }
.tc-title .daytag { font-weight: 800; }
.tc-date { font-size: 15px; opacity: .92; }
.tc-route {
  font-size: 15px; opacity: .95; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.badge.now { background: #D9480F; color: #fff; }
.badge.soon { background: #2B8A3E; color: #fff; }
.badge.past { background: rgba(255, 255, 255, .25); color: #fff; }
.trip-card .badge { font-size: 13px; padding: 4px 12px; }

/* 체크리스트·예산·예약 맨 위: 지금 보고 있는 여행 */
.trip-switch-row {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 0 6px 0 0; margin-bottom: 12px;
}
.tsr-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  border: 0; background: none; color: inherit; font: inherit; padding: 10px 6px 10px 14px;
}
.trip-switch-row .icon-btn { flex: 0 0 auto; }
.trip-switch-row .emo { font-size: 24px; }
.trip-switch-row .grow { flex: 1; min-width: 0; }
.trip-switch-row .grow { display: flex; flex-direction: column; }
.tsr-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tsr-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.trip-switch-row .caret { color: var(--accent-ink); font-size: 12px; font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
.cta.home-new { margin-top: 18px; }

/* 홈: 오늘 */
.today-list { list-style: none; margin: 0; padding: 0; }
.today-item { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.today-item:last-child { border-bottom: 0; }
.today-item .tl-time { min-width: 46px; }
.today-item .grow { flex: 1; min-width: 0; }
.today-item.done .grow { text-decoration: line-through; color: var(--muted); }
.today-item .overdue { color: var(--danger); font-size: 12px; font-weight: 600; }

/* 여행 바꾸기 목록 */
.pick-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
}
.pick-row > span:first-child { font-size: 22px; }
.pick-row .grow { flex: 1; min-width: 0; }
.pick-row.on { border-color: var(--accent); background: var(--accent-soft); }
.pick-row > .pick-cover {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 20px;
  background: var(--cover); background-size: cover; background-position: center;
}
.pick-new { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
#modalBody .chips-row { margin-left: 0; margin-right: 0; padding: 0; }
#modalBody .chip-f { padding: 8px 12px; font-size: 13px; }

/* 여행 만들기 폼: 아이콘 칸은 좁게 */
.emoji-row { grid-template-columns: 72px 1fr; }
.emoji-row input[name=emoji] { text-align: center; font-size: 20px; padding: 7px 4px; }

/* 여행 폼: 표지 사진 고르기 */
.cover-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cover-thumb {
  width: 64px; height: 44px; border-radius: 10px; flex: 0 0 auto;
  background: var(--surface-2) center / cover no-repeat; border: 1px solid var(--line);
}

/* 타임라인 (분류 아이콘 + 세로선) */
.timeline2 { list-style: none; margin: 4px 0 0; padding: 0; }
.tl2 { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 6px 0; }
.tl2::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl2:first-child::before { top: 22px; }
.tl2:last-child::before { bottom: calc(100% - 22px); }
.tl2-dot {
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; margin-top: 6px;
  display: grid; place-items: center; font-size: 16px;
  background: color-mix(in srgb, var(--cat) 18%, var(--surface)); border: 2px solid var(--cat);
}
.tl2-card {
  min-width: 0; cursor: pointer; padding: 10px 12px; border-radius: 12px;
  background: var(--bg); border-left: 3px solid var(--cat);
}
.tl2-top { display: flex; align-items: center; gap: 6px; }
.tl2-time { font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.tl2-title { font-weight: 700; margin-top: 2px; }
.tl2-foot { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tl2-cost { font-size: 13px; font-weight: 600; }
.tl2-check {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface);
  cursor: pointer; padding: 0; font-size: 13px; color: #fff; flex: 0 0 auto;
}
.tl2.done .tl2-check { background: var(--ok); border-color: var(--ok); }
.tl2.done .tl2-title { text-decoration: line-through; color: var(--muted); }
.tl2.done .tl2-dot { filter: grayscale(1); opacity: .6; }
/* 끌어서 순서 바꾸기: 동그라미가 손잡이 */
.tl2-dot { touch-action: none; cursor: grab; }
.drag-on { user-select: none; -webkit-user-select: none; }
.drag-on .tl2-leg { opacity: .3; }
.tl2.dragging { z-index: 5; opacity: .9; }
.tl2.dragging .tl2-card { box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.tl2.dragging .tl2-dot { cursor: grabbing; transform: scale(1.12); }
.tl2.drop-before::after, .tl2.drop-after::after {
  content: ''; position: absolute; left: 44px; right: 0; height: 3px; border-radius: 3px; background: var(--accent);
}
.tl2.drop-before::after { top: -2px; }
.tl2.drop-after::after { bottom: -2px; }
.col-btns { display: grid; gap: 8px; }

/* 밀어서 날짜 넘길 때 살짝 미끄러지는 효과 */
/* 타임라인 카드는 세로 스크롤만 브라우저에 맡기고, 가로 밀기는 앱이 처리 */
.day-card { touch-action: pan-y; }
.day-card.slide-l { animation: slide-l .22s ease-out; }
.day-card.slide-r { animation: slide-r .22s ease-out; }
@keyframes slide-l { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes slide-r { from { transform: translateX(-24px); opacity: .4; } to { transform: none; opacity: 1; } }

/* 입력창 안의 선택 칩 (날짜·분류) */
.pick-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pick-scroll::-webkit-scrollbar { display: none; }
.pick-wrap { display: flex; gap: 6px; flex-wrap: wrap; }
.pick-chip { flex: 0 0 auto; cursor: pointer; }
.pick-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pick-chip span {
  display: block; text-align: center; font-size: 12px; line-height: 1.3; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
}
.pick-chip.cat span { font-size: 14px; border-radius: 99px; }
.pick-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }

/* 폰에서는 입력창을 화면 아래에서 올라오는 바텀시트로 */
@media (max-width: 640px) {
  dialog {
    margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 22px 22px 0 0;
  }
  dialog[open] { animation: sheet-up .24s ease-out; }
  dialog::backdrop { background: rgba(20, 12, 5, .3); }
  dialog form { max-height: 78vh; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  dialog form::before {
    content: ''; display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--line); margin: -6px auto 12px;
  }
  .modal-actions { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); background: var(--surface); padding: 10px 0 4px; }
}
@keyframes sheet-up { from { transform: translateY(40%); } to { transform: none; } }

/* 지도 (여행 상세 위쪽) */
.map-wrap { position: relative; margin-bottom: 12px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
#map { height: 36vh; min-height: 190px; max-height: 320px; background: var(--surface-2); }
.map-wrap.closed #map { display: none; }
.map-wrap.closed { border: 0; }
.map-wrap.closed .map-toggle { position: static; width: 100%; }
.map-toggle {
  position: absolute; right: 8px; top: 8px; z-index: 500; border: 0; cursor: pointer;
  background: var(--surface); color: var(--text); padding: 6px 12px; border-radius: 99px; font-size: 13px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.map-note { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.pin span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cat, var(--accent)); color: #fff; font-weight: 800; font-size: 14px;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.leaflet-container { font: inherit; }

/* 타임라인 번호 · 지도 웹 버튼 */
.tl2-dot { position: relative; }
.tl2-num {
  position: absolute; right: -5px; bottom: -5px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 99px;
  background: var(--cat); color: #fff; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center;
  border: 2px solid var(--surface);
}
.tl2-place { font-size: 13px; color: var(--muted); }
.map-btn {
  margin-left: auto; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: 5px 10px; border-radius: 99px; background: var(--surface-2); color: var(--text);
}
/* 입장권·지도 버튼 묶음 (오른쪽 정렬, 좁으면 다음 줄로) */
.tl2-links { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tl2-links .map-btn { margin-left: 0; }
.ticket-btn { background: var(--accent-soft); color: var(--accent-ink); }
.book-chip {
  font: inherit; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.book-chip.empty { color: var(--muted); border-style: dashed; }
/* 바우처: 버튼 · 고르기 목록 · 전체 화면 (다크 모드에서도 흰 배경 = QR이 잘 읽힘) */
.voucher-btn { margin: 6px 6px 0 0; border-color: var(--accent); color: var(--accent-ink); }
.v-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.v-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.viewer-open { overflow: hidden; }
#viewer { position: fixed; inset: 0; z-index: 1000; background: #fff; color: #111; display: flex; flex-direction: column; }
.viewer-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid #ddd; }
.viewer-bar .btn { background: #fff; color: #111; border-color: #ccc; }
.viewer-body { flex: 1; overflow: auto; padding: 12px; overscroll-behavior: contain; }
.viewer-body img { display: block; width: 100%; height: auto; margin: 0 auto 16px; border: 1px solid #e5e5e5; }
.viewer-body img.zoom { width: 200%; max-width: none; }
.viewer-pdf { display: block; padding: 18px; margin-bottom: 16px; border: 1px solid #ccc; border-radius: 12px; color: #111; text-decoration: none; font-weight: 700; }
.viewer-pdf span { display: block; font-weight: 400; font-size: 13px; color: #666; margin-top: 4px; }
.viewer-note { text-align: center; color: #666; font-size: 13px; }
/* 예약 탭: 숙소·항공·교통 비교하기 → 사이트 목록 */
.book-search {
  display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
  padding: 5px 10px; border: 0; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink);
}
a.site-row { text-decoration: none; color: inherit; }
.pick-row.site-row > .grow { font-size: 15px; } /* 첫 칸이 이모지가 아니라서 이모지 크기(22px) 규칙을 되돌림 */
.site-row .fill { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.site-row .fill.full { background: var(--accent-soft); color: var(--accent-ink); }
.site-row .go { font-size: 20px; color: var(--muted); }

/* 장소 검색 */
.search-row { display: flex; gap: 6px; }
.search-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); font-size: 16px; }
.place-status { margin-top: 6px; }
.place-hit {
  display: block; width: 100%; text-align: left; cursor: pointer; margin-top: 6px;
  border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 8px 10px;
}
.place-hit b { display: block; }

/* 시간 휠 (00~23시 · 5분 단위) */
.time-pick { display: flex; gap: 10px; align-items: stretch; }
.wheel-box {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 132px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); overflow: hidden;
}
.wheel-box::before { /* 가운데 선택 줄 */
  content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 44px; transform: translateY(-50%);
  background: var(--accent-soft); border-radius: 10px;
}
.wheel-box.off { opacity: .35; pointer-events: none; }
.wheel {
  position: relative; width: 70px; height: 132px; overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.wheel::-webkit-scrollbar { display: none; }
.wheel .sp { display: block; height: 44px; }
.wheel div {
  height: 44px; line-height: 44px; text-align: center; scroll-snap-align: center; cursor: pointer;
  font-size: 22px; font-variant-numeric: tabular-nums; color: var(--muted);
}
.wheel div.sel { color: var(--text); font-weight: 800; font-size: 26px; }
.wheel-colon { position: relative; font-size: 24px; }
.pick-chip.unset span { height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 13px; }
.dur-chip {
  border: 1px solid var(--line); background: var(--bg); border-radius: 99px; padding: 7px 12px; font-size: 14px; cursor: pointer;
}
.dur-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.dur-input {
  width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--bg); font-size: 16px;
}

/* 장소 검색 줄: [입력][검색] | [🗺 지도]  — 잘못 눌리지 않게 간격·구분선·다른 색 */
.search-row { align-items: center; }
.search-btn { min-height: 44px; padding: 0 14px; font-weight: 700; }
.search-sep { width: 1px; height: 30px; background: var(--line); margin: 0 6px; flex: 0 0 auto; }
.map-find {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; white-space: nowrap;
  text-decoration: none; font-size: 14px; font-weight: 700; flex: 0 0 auto;
  background: #E8F0FE; color: #1A56C4; border: 1px solid #C6D7FA; /* 구글: 파랑 */
}
.map-find.naver { background: #E6F7EC; color: #11803A; border-color: #BFE8CC; } /* 네이버: 초록 */
.map-find.hint { box-shadow: 0 0 0 3px var(--accent); }

/* 일정 머리: 1줄 [Day·날짜 …… n/m 도시 수정 + 장소], 2줄 도시 이름(한 줄 전체), 3줄 예상 경비 */
.day-head-top { gap: 6px; }
.day-head-top .btn, .day-head-top .badge, .day-head-top .muted { white-space: nowrap; flex: 0 0 auto; }
.day-head-city { margin-top: 6px; align-items: flex-start; }
.day-head h2 { word-break: keep-all; line-height: 1.25; min-width: 0; }
.day-head-city .badge { flex: 0 0 auto; margin-top: 3px; white-space: nowrap; }

/* 시간 겹침 경고 */
.time-conflict {
  margin-top: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: #FFF4E5; color: #8A4B00; border: 1px solid #FFD8A8;
}
.tl2-warn {
  margin-left: 6px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 99px;
  background: #FFF4E5; color: #B45309; border: 1px solid #FFD8A8; white-space: nowrap;
}

/* 일정 사이 이동 줄 (세로선 위에 얹힘) */
.tl2-leg { position: relative; list-style: none; padding: 2px 0 2px 44px; font-size: 12.5px; color: var(--muted); }
.tl2-leg::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl2-leg::after { /* 세로선 위 작은 점 */
  content: ''; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line);
}
.leg-text {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text); background: var(--surface); border: 1.5px dashed var(--line);
}
.tl2-leg.set .leg-text { border-style: solid; border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.leg-auto { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0 5px; }
.leg-edit { color: var(--muted); font-size: 11px; }
.leg-memo { font-size: 12px; color: var(--muted); margin: 3px 0 0 4px; }
.leg-warn { display: inline-block; margin: 3px 0 0 4px; font-weight: 700; color: #B45309; }
.tl2-leg.tight .leg-text { background: #FFF4E5; color: #8A4B00; }
.tl2-leg.tight::after { border-color: #F59E0B; }

/* 설정: 화면 모드 */
.seg-btns { display: flex; gap: 6px; }
.seg-btns .btn { flex: 1; }

/* 내 여행: 받은 여행 열기 */
.import-trip { display: block; text-align: center; margin: 8px 0 14px; }

/* 기록 탭 */
.rec-summary { text-align: center; padding: 16px 14px; }
.rec-big { font-size: 20px; font-weight: 800; color: var(--accent-ink); }
.rec-stats { display: flex; justify-content: center; gap: 18px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.rec-stats b { display: block; font-size: 17px; color: var(--text); }
.rec-day { display: grid; gap: 10px; }
.rec-done { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-chip { font-size: 13px; padding: 4px 9px; border-radius: 99px; background: var(--surface-2); }
.rec-money { gap: 8px; }
.rec-note {
  font: inherit; text-align: left; cursor: pointer; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); font-style: italic;
}
.rec-note.empty { font-style: normal; color: var(--muted); border-style: dashed; }
.rec-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rec-photo {
  aspect-ratio: 1; border-radius: 10px; border: 0; padding: 0; cursor: pointer;
  background: var(--surface-2) center / cover no-repeat;
}
.rec-photo.add {
  border: 1.5px dashed var(--line); background: transparent; color: var(--muted); font-size: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rec-photo.add span { font-size: 12px; }
.viewer-del { display: block; margin: -8px auto 18px; background: #fff; color: #b91c1c; border-color: #ddd; }

/* 예산: 환율 계산기 */
.calc { display: grid; gap: 10px; }
.calc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.calc-row input { font: inherit; font-size: 18px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); min-width: 0; }
.calc-row b { font-size: 18px; }

/* 기록: 발자취 지도 */
.foot-card { padding: 0; overflow: hidden; }
.foot-head { padding: 10px 14px; gap: 8px; }
.foot-head b { white-space: nowrap; flex: 0 0 auto; }
.foot-head .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#footMap { height: 300px; background: var(--surface-2); }
.city-pin span {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.city-pin b {
  position: absolute; left: 30px; top: 3px; white-space: nowrap;
  font-size: 13px; color: #222; background: rgba(255, 255, 255, .92); padding: 1px 6px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.city-pin.left b { left: auto; right: 30px; }
.city-pin.below b { left: 50%; top: 30px; transform: translateX(-50%); }
.mode-pin { display: grid !important; place-items: center; font-size: 15px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }

/* 예약 탭: 비상 서류 */
.vault { display: grid; gap: 6px; border-left: 4px solid var(--accent); }
.vault .row { gap: 6px; }

/* 기록: 9:16 요약 이미지 */
.story-btn { margin-top: 12px; }
.viewer-body img.story-img { max-width: 420px; border-radius: 16px; border: 0; }
.story-btns { display: flex; gap: 8px; justify-content: center; margin: 4px 0 16px; }

/* 예산: 결제 수단 · 남은 현금 */
.pay-sum { display: flex; justify-content: space-between; padding: 5px 0; }
hr.soft { border: 0; border-top: 1px solid var(--line); margin: 8px 0 10px; }
.cash-left { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.cash-left b { font-size: 22px; }
.cash-left b.neg { color: var(--danger); }
.pay-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pay-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pay-seg span {
  display: block; text-align: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); font-size: 14px; cursor: pointer; white-space: nowrap;
}
.pay-seg input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.pay-seg input:focus-visible + span { outline: 2px solid var(--accent); }

/* 회화 카드: 예약 탭 바로가기 + 전체 화면(흰 바탕, 큰 글씨) */
.phrase-card { gap: 12px; cursor: pointer; }
.phrase-card .emo { font-size: 24px; }
.phrase-card .grow { flex: 1; min-width: 0; }
.phrase-card .go { font-size: 20px; color: var(--muted); }
.phrase-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.phrase-cats button { flex: 0 0 auto; border: 1px solid #ccc; background: #fff; color: #111; border-radius: 99px; padding: 8px 14px; font-size: 15px; cursor: pointer; }
.phrase-cats button.on { background: #111; color: #fff; border-color: #111; font-weight: 700; }
.phrase-row {
  display: block; width: 100%; text-align: left; cursor: pointer; background: #fff; color: #111;
  border: 1px solid #e2e2e2; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
}
.phrase-row b { display: block; font-size: 16px; }
.phrase-row span { display: block; font-size: 14px; color: #666; margin-top: 2px; }
.phrase-show { min-height: 55vh; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 20px 8px; gap: 22px; }
.ps-main { font-size: 32px; font-weight: 800; line-height: 1.3; color: #000; word-break: keep-all; }
.ps-en { font-size: 21px; color: #555; line-height: 1.35; }
.ps-ko { font-size: 15px; color: #777; line-height: 1.5; }
.ps-ko span { color: #b45309; }
.ps-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ps-nav .btn { background: #fff; color: #111; border-color: #ccc; }
.ps-nav .btn:disabled { opacity: .35; }

/* 홈: 빠른 스크랩 */
.scrap-list { padding: 4px 12px; }
.scrap-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.scrap-item:last-child { border-bottom: 0; }
.scrap-item .grow { flex: 1; min-width: 0; cursor: pointer; }
.scrap-item .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scrap-item .grow .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scrap-thumb {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px; border: 0; cursor: pointer; font-size: 20px;
  background: var(--surface-2) center / cover no-repeat;
}
.scrap-empty { margin: -4px 2px 6px; }
/* 일정 카드 사진 (스크랩에서 온 사진 등) */
.tl2-photo {
  display: block; width: 100%; height: 120px; margin: 8px 0 2px; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--surface-2) center / cover no-repeat;
}