/* Tripsee — 복숭아·청록, 흰 바탕 둥근 카드 */
:root {
  --upd-bg: rgba(29,42,51,.94); /* '새 버전이 나왔어요' 띠 */
  --upd-btn: var(--teal);
  --peach: #F4895F;
  --peach-deep: #E8703F;
  --peach-soft: #FFEDE2;
  --teal: #13A39E;
  --teal-deep: #0C7F7C;
  --teal-soft: #E2F5F3;
  --ink: #1D2A33;
  --sub: #6B7884;
  --faint: #9AA5AE;
  --line: #ECEEF1;
  --on-light-btn: rgba(29, 42, 51, .08); /* 흰 바탕 크게 보기(입국 QR)의 단추·넘김 */
  --on-light-nav: rgba(29, 42, 51, .12);
  --house-bg: #F6F7F8; /* 가계부 사람별의 가족 묶음 면 */
  --bg: #FAFAF8;
  --card: #FFFFFF;
  --danger: #E0534A;
  --radius: 20px;
  --shadow: 0 2px 10px rgba(29, 42, 51, .06), 0 1px 2px rgba(29, 42, 51, .04);
  --nav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  font-family: "Pretendard", "Pretendard Variable", -apple-system, "SamsungOne", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: calc(16px * var(--fs, 1));
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--teal-deep); }
[hidden] { display: none !important; }

/* 머리 */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: rgba(250, 250, 248, .92);
  backdrop-filter: blur(10px);
}
.top .back { border: 0; background: none; padding: 6px; margin-left: -6px; border-radius: 12px; cursor: pointer; display: flex; }
.top .back svg { width: 24px; height: 24px; }
.top h1 { font-size: calc(18px * var(--fs, 1)); margin: 0; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); flex: 1; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.brand b { font-size: calc(20px * var(--fs, 1)); letter-spacing: -.3px; }
.brand b span { color: var(--teal); }
.top .icon-btn { border: 0; background: var(--card); box-shadow: var(--shadow); width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; cursor: pointer; }
.top .icon-btn svg { width: 20px; height: 20px; }

main { max-width: 960px; margin: 0 auto; padding: 4px 16px calc(var(--nav-h) + var(--safe-b) + 28px); }
main.no-nav { padding-bottom: 40px; }

/* 카드·글자 */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; }
.card h2, .section-title { font-size: calc(17px * var(--fs, 1)); margin: 0 0 10px; font-weight: 700; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 10px; }
.section-title a, .section-title button { font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.muted { color: var(--sub); }
.small { font-size: calc(13px * var(--fs, 1)); }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 10px; }

/* 단추 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 14px; padding: 13px 18px; font-weight: 700; cursor: pointer;
  background: var(--teal); color: #fff; text-decoration: none; min-height: 48px;
}
.btn:active { transform: scale(.98); }
.btn.peach { background: var(--peach); }
.btn.soft { background: var(--teal-soft); color: var(--teal-deep); }
.btn.ghost { background: transparent; color: var(--sub); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.danger { background: #FDECEB; color: var(--danger); }
.btn.block { width: 100%; }
.btn.sm { padding: 8px 12px; min-height: 36px; font-size: calc(14px * var(--fs, 1)); border-radius: 11px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link-btn { border: 0; background: none; color: var(--teal-deep); cursor: pointer; padding: 4px; font-weight: 600; }
.link-btn.share-all { flex: none; min-height: 44px; padding: 0 8px; margin-right: -8px; font-size: calc(14px * var(--fs, 1)); white-space: nowrap; } /* 나눌 사람 전체 해제 */

/* 입력 */
label.field { display: block; margin-bottom: 16px; }
label.field > span { display: block; font-size: calc(14px * var(--fs, 1)); font-weight: 600; color: var(--sub); margin-bottom: 6px; }
.input, select.input, textarea.input {
  width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; min-height: 48px;
  outline: none; transition: border-color .15s;
}
.input:focus { border-color: var(--teal); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hint { font-size: calc(13px * var(--fs, 1)); color: var(--faint); margin-top: 6px; }

/* 고르기 카드(라디오) */
.choices { display: grid; gap: 8px; }
.choice { display: flex; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; background: #fff; }
.choice input { accent-color: var(--teal); width: 20px; height: 20px; margin: 0; }
.choice:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.choice b { display: block; font-size: calc(15px * var(--fs, 1)); }
.choice small { color: var(--sub); }

/* 켜고 끄기 */
.toggle { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; }
.toggle .grow b { display: block; font-size: calc(15px * var(--fs, 1)); }
.toggle .grow small { color: var(--sub); }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; background: #D7DCE0; border-radius: 30px; transition: .2s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s; }
.switch input:checked + i { background: var(--teal); }
.switch input:checked + i::after { transform: translateX(20px); }

/* 첫 화면 */
.hero { padding: 26px 4px 8px; }
.hero .logo { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 10px 30px rgba(244, 137, 95, .25); }
.hero h2 { font-size: calc(28px * var(--fs, 1)); line-height: 1.3; margin: 18px 0 8px; letter-spacing: -.5px; }
.hero h2 em { font-style: normal; color: var(--peach-deep); }
.hero p { color: var(--sub); margin: 0 0 20px; }

/* 여행 목록 카드 */
.trips { display: grid; gap: 14px; }
.trip-card { position: relative; display: block; text-decoration: none; color: inherit; border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.trip-card .cover { height: 104px; background: linear-gradient(135deg, var(--peach) 0%, #F7B489 45%, var(--teal) 100%); position: relative; }
.flag-img { width: 1.1em; height: 1.1em; border-radius: 50%; vertical-align: -.17em; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.trip-card .cover .flag .flag-img { width: 28px; height: 28px; vertical-align: middle; }
.trip-card .cover .flag { position: absolute; left: 16px; bottom: -20px; width: 44px; height: 44px; border-radius: 14px; background: #fff; display: grid; place-items: center; font-size: 26px; box-shadow: var(--shadow); }
.trip-card .body { padding: 28px 16px 16px; }
.trip-card h3 { margin: 0 0 2px; font-size: calc(18px * var(--fs, 1)); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: calc(13px * var(--fs, 1)); font-weight: 700; background: var(--peach-soft); color: var(--peach-deep); }
.badge.teal { background: var(--teal-soft); color: var(--teal-deep); }
.badge.gray { background: #F0F2F4; color: var(--sub); }
.trip-card .badge { position: absolute; right: 14px; top: 14px; background: rgba(255,255,255,.92); }

/* 여행 홈 머리 카드 */
.trip-hero { border-radius: 24px; padding: 20px; color: #fff; background: linear-gradient(140deg, #F28A5E 0%, #F6A77A 38%, #2BB0A8 100%); box-shadow: 0 10px 30px rgba(19, 163, 158, .2); margin-bottom: 14px; position: relative; overflow: hidden; }
.trip-hero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 160px; background: url(icon.svg) no-repeat center/contain; opacity: .14; }
.trip-hero h2 { margin: 6px 0 4px; font-size: calc(24px * var(--fs, 1)); letter-spacing: -.4px; }
.trip-hero .dday { display: inline-block; background: rgba(255,255,255,.25); padding: 4px 12px; border-radius: 99px; font-weight: 800; font-size: calc(14px * var(--fs, 1)); }
.trip-hero .meta { opacity: .95; font-size: calc(14px * var(--fs, 1)); }
.clocks { display: flex; gap: 10px; margin-top: 14px; position: relative; z-index: 1; }
.clock { background: rgba(255,255,255,.2); border-radius: 14px; padding: 8px 12px; min-width: 0; }
.clock small { display: block; font-size: calc(12px * var(--fs, 1)); opacity: .9; }
.clock b { font-size: calc(20px * var(--fs, 1)); font-variant-numeric: tabular-nums; }

.quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quick a { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.quick a .ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; }
.quick a .ic svg { width: 22px; height: 22px; }
.quick a b { font-size: calc(15px * var(--fs, 1)); }
.quick a small { color: var(--sub); font-size: calc(13px * var(--fs, 1)); }
.ic.peach { background: var(--peach-soft); color: var(--peach-deep); }
.ic.teal { background: var(--teal-soft); color: var(--teal-deep); }

/* 멤버 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 99px; background: #F3F5F6; font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; flex: none; }
.avatar.lg { width: 40px; height: 40px; font-size: 16px; }
.member-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.member-row:first-child { border-top: 0; }
.member-row .grow b { display: block; }
.chip.dim, .member-row.dim > :not(button) { opacity: .45; }
.invite-box { display: flex; gap: 8px; align-items: center; background: var(--teal-soft); border-radius: 14px; padding: 10px 12px; }
.invite-box code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(13px * var(--fs, 1)); color: var(--teal-deep); }

/* 아래 메뉴 */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: rgba(255,255,255,.97); box-shadow: 0 -2px 16px rgba(29,42,51,.07);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
}
.nav a, .nav button.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; color: var(--faint); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 6px 0; }
.nav a svg { width: 24px; height: 24px; }
.nav a.on { color: var(--teal-deep); }
.nav .plus { justify-self: center; width: 56px; height: 56px; margin-top: -26px; border-radius: 50%; border: 4px solid #fff; background: var(--teal); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(19,163,158,.35); cursor: pointer; }
.nav .plus svg { width: 26px; height: 26px; }

/* 아래에서 올라오는 창 */
.sheet-bg { position: fixed; inset: 0; background: rgba(20, 28, 34, .38); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
.sheet { background: #fff; width: 100%; max-width: 560px; border-radius: 24px 24px 0 0; padding: 10px 18px calc(22px + var(--safe-b)); max-height: 88vh; overflow: auto; animation: up .2s ease-out; }
.sheet .grip { width: 40px; height: 5px; border-radius: 3px; background: #DDE1E4; margin: 4px auto 14px; position: relative; touch-action: none; cursor: grab; }
/* 긴 창을 내려 읽어도 손잡이는 맨 위에 붙어 있게(sticky) — 뒤를 흰 띠로 */
.sheet .grip { position: sticky; top: 0; z-index: 3; box-shadow: 0 -10px 0 8px #fff, 0 0 0 8px #fff; }
.sheet .grip::before { content: ''; position: absolute; inset: -16px -70px; } /* 손가락으로 잡기 쉽게 잡는 자리를 넓힘 */
.sheet h3 { margin: 0 0 14px; font-size: calc(18px * var(--fs, 1)); }
.sheet-list button { display: flex; width: 100%; gap: 14px; align-items: center; padding: 12px 4px; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 12px; }
.sheet-list button:active { background: #F5F6F7; }
.sheet-list .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.sheet-list .ic svg { width: 22px; height: 22px; }
@keyframes up { from { transform: translateY(40px); opacity: .5; } }
/* 옆 창(장소 추가): 뒤를 어둡게 하지 않고, 뒤의 지도를 보고 누를 수 있게. 좁은 화면은 아래 절반 */
.sheet-bg.side { background: none; pointer-events: none; }
.sheet-bg.side .sheet { pointer-events: auto; position: relative; max-height: min(50vh, 100%); box-shadow: 0 -6px 24px rgba(20, 28, 34, .18); }
.sheet-bg.side .sheet h3 { padding-right: 44px; }
.sheet-x { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 12px; background: #F2F4F5; color: var(--sub); font-size: 22px; line-height: 1; cursor: pointer; z-index: 1; }
/* 누른 버튼은 서버 답이 올 때까지 잠금(api.js, 여러 번 누르지 않게) */
.is-busy { pointer-events: none; opacity: .55; }
.update-bar { position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--upd-bg); color: #fff; font-size: calc(14px * var(--fs, 1)); box-shadow: 0 6px 18px rgba(0,0,0,.2); white-space: nowrap; max-width: calc(100vw - 32px); }
.update-bar button { border: 0; border-radius: 999px; background: var(--upd-btn); color: #fff; font-weight: 700; padding: 7px 14px; font-size: inherit; cursor: pointer; }
.news-card { position: relative; display: flex; margin-top: 10px; padding-right: 52px; background: #FFF8EC; border: 1px solid #F6DDB0; }
@keyframes side { from { transform: translateX(40px); opacity: .5; } }
@keyframes fade { from { opacity: 0; } }

.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 18px); transform: translateX(-50%); background: rgba(29,42,51,.92); color: #fff; padding: 11px 18px; border-radius: 14px; font-size: calc(14px * var(--fs, 1)); z-index: 60; max-width: calc(100% - 32px); animation: up .2s; }
.empty { text-align: center; padding: 36px 16px; color: var(--sub); }
.empty .big { font-size: calc(40px * var(--fs, 1)); }
.err { color: var(--danger); font-size: calc(14px * var(--fs, 1)); margin: 8px 0; }
.soon { display: inline-block; font-size: calc(11px * var(--fs, 1)); font-weight: 700; color: var(--faint); background: #F0F2F4; border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.loading { padding: 60px 0; text-align: center; color: var(--faint); }


/* 코스: 지도 + 날짜별 시간표 */
.map-wrap { position: relative; isolation: isolate; margin: 0 -16px 12px; scroll-margin-top: 64px; }
.map { height: 42vh; min-height: 240px; max-height: 420px; background: #E8EEF0; }
.map-msg { height: 100%; display: grid; place-items: center; text-align: center; color: var(--sub); padding: 20px; font-size: calc(14px * var(--fs, 1)); }
.map-btn { position: absolute; z-index: 500; left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 14px; border: 0; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; color: var(--teal-deep); }
.map-btn svg { width: 20px; height: 20px; }
.pick-banner { position: absolute; z-index: 600; left: 12px; right: 12px; top: 12px; background: var(--ink); color: #fff; border-radius: 16px; padding: 10px 10px 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: calc(14px * var(--fs, 1)); }
.pick-banner .btn { color: #fff; border-color: rgba(255,255,255,.4); }
/* 폰: 지도는 위에 붙여 두고 목록만 그 아래로 넘김(목록 아래쪽을 눌러도 지도가 보이게) */
@media (max-width: 699px) {
  .course .map-wrap { position: sticky; top: 64px; z-index: 10; margin-bottom: 0; box-shadow: 0 6px 10px -8px rgba(20, 28, 34, .35); }
  .course .map { height: 34vh; min-height: 200px; max-height: 340px; }
  .course .course-side { padding-top: 12px; }
  .course .pl-item { scroll-margin-top: calc(76px + max(200px, min(34vh, 340px))); }
}
.map-wrap.picking .map { cursor: crosshair; outline: 3px solid var(--peach); outline-offset: -3px; }
.leaflet-container { font: inherit; }
.mk-wrap { background: none; border: 0; }
.mk { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; font-size: 14px; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.mk.emoji { background: #fff; font-size: 15px; border-color: var(--teal); }
.mk.pick { background: var(--peach); font-size: 18px; }
.mk { position: relative; }
/* 겹쳐서 옆으로 벌린 핀: 진짜 자리(점)에서 핀까지 가는 선 */
.mk-leg { position: absolute; left: 50%; top: 50%; height: 2px; margin-top: -1px; background: var(--ink); box-shadow: 0 0 0 1px #fff; transform-origin: 0 50%; pointer-events: none; }
.mk-leg::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); border: 1.5px solid #fff; box-sizing: border-box; }
.mk.flash { animation: mk-flash .5s ease-in-out 3; }
@keyframes mk-flash { 50% { transform: scale(1.45); box-shadow: 0 0 0 5px var(--peach); } }
.gmk { position: absolute; transform: translate(-50%, -50%); cursor: pointer; }
.me-dot { display: block; width: 22px; height: 22px; border-radius: 50%; background: #3E7BFA; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(62,123,250,.2); box-sizing: border-box; }
.days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day-chip { flex: none; border: 0; background: var(--card); box-shadow: var(--shadow); border-radius: 16px; padding: 8px 14px; text-align: left; cursor: pointer; line-height: 1.25; }
.day-chip b { display: block; font-size: calc(14px * var(--fs, 1)); }
.day-chip small { color: var(--sub); font-size: calc(12px * var(--fs, 1)); }
.day-chip.on { background: var(--teal); color: #fff; }
.day-chip.on small { color: rgba(255,255,255,.85); }
.all-day { display: flex; align-items: center; gap: 8px; width: 100%; margin: 16px 0 6px; padding: 4px 2px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.all-day:first-child { margin-top: 4px; } .all-day i { width: 10px; height: 10px; border-radius: 50%; flex: none; } .all-day small { margin-left: auto; }
.day-head { display: flex; align-items: center; gap: 8px; margin: 10px 2px; }
.day-head b { font-size: calc(17px * var(--fs, 1)); }
.day-head .link-btn { margin-left: auto; white-space: nowrap; }
/* 영어처럼 긴 날짜 글: 날짜만 줄바꿈되고 장소 수·버튼은 한 줄로 */
.day-head b { min-width: 0; }
.day-head .muted { white-space: nowrap; }
/* 하루 보기 버튼 묶음(동선 추천·시간순 정렬·공유): 날짜와 한 줄에 안 들어가면 통째로 다음 줄 오른쪽으로 */
.day-head { flex-wrap: wrap; row-gap: 0; }
.day-head b { white-space: nowrap; }
.dh-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.dh-acts .link-btn { margin-left: 0; }
/* 코스: 날짜를 바꾸면(밀기·날짜 누르기) 새 날짜가 그쪽에서 들어옴(날짜 줄은 그대로). 장소 창 앞·뒤 넘기기도 같은 움직임 */
:root { --slide-dist: 72px; --slide-time: .28s; }
.course-side.slide-l > :not(.days), .sheet.slide-l > :not(.grip):not(.sheet-x) { animation: day-in-l var(--slide-time) cubic-bezier(.2, .8, .2, 1); }
.course-side.slide-r > :not(.days), .sheet.slide-r > :not(.grip):not(.sheet-x) { animation: day-in-r var(--slide-time) cubic-bezier(.2, .8, .2, 1); }
@keyframes day-in-l { from { transform: translateX(var(--slide-dist)); opacity: 0; } }
@keyframes day-in-r { from { transform: translateX(calc(-1 * var(--slide-dist))); opacity: 0; } }
.course-side, .sheet.slide-l, .sheet.slide-r { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { .course-side > *, .sheet.slide-l > *, .sheet.slide-r > * { animation: none !important; } }
html.calm .course-side > *, html.calm .sheet.slide-l > *, html.calm .sheet.slide-r > * { animation: none !important; }
.day-wx { margin: -6px 2px 10px; color: var(--sub); font-size: calc(14px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.wx-mini { font-size: calc(13px * var(--fs, 1)); color: var(--sub); font-variant-numeric: tabular-nums; }
.share-pre { max-height: 40vh; overflow: auto; margin: 10px 0 14px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-family: inherit; font-size: calc(13px * var(--fs, 1)); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.timeline { list-style: none; margin: 0 0 14px; padding: 0; position: relative; }
.timeline:not(.plain)::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; border-left: 2px dashed #BFE6E3; }
.pl-item { position: relative; display: flex; gap: 12px; align-items: flex-start; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 14px 12px 8px; margin-bottom: 10px; cursor: pointer; transition: box-shadow .2s; }
.pl-item:active, .pl-item.flash { box-shadow: 0 0 0 2.5px var(--peach); }
.pl-item .num { flex: none; position: relative; z-index: 1; width: 28px; height: 28px; margin-left: 0; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.timeline.plain .num { background: var(--teal-soft); }
.pl-body { min-width: 0; display: flex; flex-direction: column; }
.pl-body b { font-size: calc(16px * var(--fs, 1)); }
.pl-body small { color: var(--sub); font-size: calc(13px * var(--fs, 1)); white-space: pre-line; }
.pl-time { font-size: calc(13px * var(--fs, 1)); font-weight: 700; color: var(--peach-deep); }
.nopos { color: var(--faint) !important; }
.pl-sheet-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.pl-sheet-head .kind { font-size: calc(28px * var(--fs, 1)); }
.pl-sheet-head h3 { margin: 0; }
.sheet-bg.side .pl-sheet-head { padding-right: 40px; } /* × 닫기 자리 */
.sheet-bg.side .pl-sheet-head h3 { padding-right: 0; }
.pl-nav { flex: none; min-width: 44px; height: 40px; padding: 0 8px; border: 0; border-radius: 12px; background: var(--teal-soft); color: var(--teal-deep); font: inherit; font-weight: 800; font-size: calc(15px * var(--fs, 1)); cursor: pointer; white-space: nowrap; }
.pl-nav:disabled { opacity: .35; cursor: default; }
.swipe-hint { margin: -8px 0 8px; text-align: center; color: var(--sub); font-size: calc(12px * var(--fs, 1)); }
.pl-sheet-head.wiggle { animation: pl-wiggle 1.1s ease-in-out .35s 1; }
@keyframes pl-wiggle { 20% { transform: translateX(-14px); } 45% { transform: translateX(10px); } 70% { transform: translateX(-4px); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fold-tip { display: none; }
/* 아래로 끌어 접은 장소 창: 이전·이름·다음만 남은 띠(폰만, 넓은 화면은 옆 창이라 접지 않음) */
@media (max-width: 699px) {
  .sheet.folded > :not(.grip):not(.sheet-x):not(.fold-keep) { display: none; }
  .sheet.folded .fold-tip { display: inline; }
  .sheet.folded .pl-sheet-head { margin-bottom: 0; cursor: pointer; }
  .sheet.folded .pl-sheet-head .kind, .sheet.folded .pl-sheet-head .muted { display: none; }
  .sheet.folded .pl-sheet-head h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(16px * var(--fs, 1)); }
}
@media (prefers-reduced-motion: reduce) { .pl-sheet-head.wiggle { animation: none; } }
.pl-todo-n { color: var(--teal); }
.pl-todos { background: var(--bg); border-radius: 14px; padding: 10px 14px; margin: 8px 0; }
.pl-todo { display: flex; align-items: center; gap: 10px; padding: 7px 0; min-height: 36px; }
.pl-todo input { width: 20px; height: 20px; flex: none; accent-color: var(--teal); }
.pl-todo input:checked + span { text-decoration: line-through; color: var(--sub); }
.pl-memo { white-space: pre-line; background: var(--bg); border-radius: 14px; padding: 10px 14px; margin: 8px 0; }
.go-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 8px; }
.go-btns .btn { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sheet-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.paste-box { background: var(--teal-soft); border-radius: 16px; padding: 12px; }
.paste-box .field { margin-bottom: 8px; }
.row-btns { display: flex; gap: 8px; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.kind-chip input { position: absolute; opacity: 0; pointer-events: none; }
.kind-chip span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--bg); border: 1.5px solid var(--line); font-size: calc(14px * var(--fs, 1)); cursor: pointer; }
.kind-chip input:checked + span { border-color: var(--teal); background: var(--teal-soft); font-weight: 700; }
.kind-chip input:focus-visible + span { outline: 2px solid var(--teal); }
.pos-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pos-row [data-pos] { flex: 1 1 100%; }

/* 가계부 */
.money-hero { border-radius: 24px; padding: 18px 20px; color: #fff; background: linear-gradient(140deg, #F28A5E 0%, #F6A77A 50%, #F7C39C 100%); box-shadow: 0 10px 30px rgba(244, 137, 95, .25); margin-bottom: 14px; }
.money-hero small { opacity: .92; font-size: calc(13px * var(--fs, 1)); }
.money-hero .total { font-size: calc(30px * var(--fs, 1)); font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.money-hero .sub { font-size: calc(14px * var(--fs, 1)); opacity: .95; }
.money-hero .mine { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.35); font-size: calc(14px * var(--fs, 1)); }
/* 가계부 맨 위(3초 테스트): 받을 돈 청록, 보낼 돈 진한 복숭아, 끝났으면 회색 */
.my-money { --mm: var(--teal-deep); background: var(--card); border-radius: 24px; padding: 18px 20px 14px; margin-bottom: 14px; box-shadow: 0 0 0 2px var(--mm), 0 10px 24px rgba(29, 42, 51, .08); font-variant-numeric: tabular-nums; }
.my-money.give { --mm: var(--peach-deep); }
.my-money.zero { --mm: var(--line); }
.my-money > small { color: var(--mm); font-weight: 800; font-size: calc(14px * var(--fs, 1)); }
.my-money.zero > small { color: var(--sub); }
.my-money .mm-big { font-size: calc(40px * var(--fs, 1)); font-weight: 800; color: var(--mm); letter-spacing: -1px; line-height: 1.15; }
.my-money.zero .mm-big { font-size: calc(24px * var(--fs, 1)); color: var(--ink); margin: 2px 0 4px; }
.my-money .mm-who { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: calc(15px * var(--fs, 1)); }
.my-money .mm-big + .mm-who { margin-top: 6px; }
.my-money .mm-go { display: block; margin: 4px 0 0 auto; font-weight: 700; }
.my-money .mm-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 0 10px 36px; font-size: calc(14px * var(--fs, 1)); color: var(--sub); }
.my-money .mm-acct > span { flex: 1 1 160px; min-width: 0; }
.my-money .mm-acct .btn.block { margin-top: 2px; }
.my-money .mm-foot { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #DDE2E6; font-size: calc(12px * var(--fs, 1)); color: var(--sub); line-height: 1.6; }
.my-money .mm-foot b { color: var(--ink); }
.mm-sum { display: none; font-size: calc(13px * var(--fs, 1)); color: var(--sub); line-height: 1.7; font-variant-numeric: tabular-nums; }
.mm-sum b { display: block; color: var(--ink); font-size: calc(17px * var(--fs, 1)); }
.mm-sum small { display: block; margin-top: 4px; }
@media (min-width: 700px) {
  .mm-sum { display: block; }
  .my-money .mm-foot, .my-money .mm-go { display: none; } /* 넓은 화면은 합계를 오른쪽 카드로, 정산은 이미 옆에 보임 */
}
.card.warn { background: #FFF6E5; box-shadow: none; padding: 12px 14px; }
.warn-text { color: #C0791B !important; }
.seg { display: flex; gap: 4px; background: #EEF0F2; border-radius: 14px; padding: 4px; margin-bottom: 14px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 11px; padding: 9px 4px; font-weight: 700; color: var(--sub); cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.seg.scroll { overflow-x: auto; scrollbar-width: none; }
.seg.scroll button { flex: none; padding: 9px 12px; white-space: nowrap; }
.mpanel:not(.on) { display: none; }
.ex-day { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 4px 8px; font-size: calc(15px * var(--fs, 1)); }
.ex-day span { color: var(--sub); font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.ex-list { padding: 4px 6px; }
.ex-item { display: flex; width: 100%; gap: 12px; align-items: center; padding: 11px 8px; border: 0; background: none; text-align: left; cursor: pointer; border-top: 1px solid var(--line); }
.ex-item:first-child { border-top: 0; }
.ex-item:active { background: var(--bg); border-radius: 12px; }
.ex-ic { width: 38px; height: 38px; border-radius: 13px; background: var(--peach-soft); display: grid; place-items: center; font-size: 19px; flex: none; }
.ex-item .grow b, .pool-card .grow b { display: block; font-size: calc(15px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-item .grow small { color: var(--sub); font-size: calc(13px * var(--fs, 1)); }
.ex-amt { text-align: right; flex: none; }
.ex-amt b { display: block; font-variant-numeric: tabular-nums; }
.ex-amt small, .split-row .r small, .ex-big small { display: block; color: var(--sub); font-size: calc(12.5px * var(--fs, 1)); font-weight: 500; }
.pool-card .grow small { display: block; }
.ex-big { font-size: calc(26px * var(--fs, 1)); font-weight: 800; margin: 6px 0 2px; }
.split-list { margin: 12px 0; border-top: 1px solid var(--line); }
.split-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.split-row .r { text-align: right; font-variant-numeric: tabular-nums; }
.amt-row { display: flex; gap: 8px; align-items: center; }
.amt-row .input { flex: 1; min-width: 0; }
.amt-row .input.amt { font-size: calc(26px * var(--fs, 1)); font-weight: 800; padding: 10px 14px; font-variant-numeric: tabular-nums; }
.amt-row .cur { flex: 0 0 96px; }
.amt-row .unit { flex: 0 0 56px; font-weight: 700; color: var(--sub); }
.amt-help { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 2px 14px; font-size: calc(14px * var(--fs, 1)); min-height: 36px; }
.ex-form .kinds { margin-bottom: 4px; }
.field-label { font-size: calc(14px * var(--fs, 1)); font-weight: 600; color: var(--sub); margin: 14px 0 6px; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-seg { display: inline-flex; background: #EEF0F2; border-radius: 10px; padding: 3px; }
.mini-seg input { position: absolute; opacity: 0; pointer-events: none; }
.mini-seg span { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: calc(13px * var(--fs, 1)); cursor: pointer; }
.mini-seg input:checked + span { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.share-box { margin-top: 4px; }
.share-amt { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.share-amt .input { flex: 0 0 46%; min-height: 42px; padding: 8px 12px; text-align: right; }
.input.bad { border-color: var(--danger); }
.settle-table { display: grid; font-size: calc(14px * var(--fs, 1)); }
.st-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 6px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.st-row.head { border-top: 0; color: var(--sub); font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; padding-top: 0; }
.st-row .who { display: flex; gap: 6px; align-items: center; text-align: left; min-width: 0; }
.st-row .who b, .tr-row .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-row small { display: block; color: var(--sub); font-size: calc(11.5px * var(--fs, 1)); }
.st-row .plus { color: var(--teal-deep); font-weight: 800; }
.st-row .minus { color: var(--peach-deep); font-weight: 800; }
/* 가족 묶음: 선 대신 옅은 면으로 감싸고 맨 아래 가족 합계 */
.st-house { background: var(--house-bg); border-radius: 12px; margin: 4px -8px; padding: 0 8px 8px; }
.st-house .st-row:first-child { border-top: 0; }
.st-house-sum { display: flex; justify-content: flex-end; gap: 8px; align-items: baseline; color: var(--ink); font-size: calc(13px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.st-house-sum .plus { color: var(--teal-deep); }
.st-house-sum .minus { color: var(--peach-deep); }
.st-house + .st-row { border-top: 0; }
.st-row.tap, .st-house-sum.tap { cursor: pointer; }
.st-row.tap:focus-visible, .st-house-sum.tap:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 8px; }
/* 지출 내역 시트: 이름 | 낸 돈 | 내 몫 */
.lg-head, .lg-row, .lg-sum { display: grid; grid-template-columns: 1fr 88px 88px; gap: 8px; align-items: baseline; text-align: right; font-variant-numeric: tabular-nums; }
.lg-head { color: var(--sub); font-size: calc(13px * var(--fs, 1)); font-weight: 600; padding-bottom: 4px; }
.lg-row { width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; color: var(--ink); cursor: pointer; }
div.lg-row { cursor: default; }
.lg-row .grow, .lg-sum .grow { text-align: left; min-width: 0; overflow-wrap: anywhere; }
.lg-row .grow small { display: block; color: var(--sub); font-size: calc(12px * var(--fs, 1)); }
.lg-day { margin: 16px 0 4px; color: var(--sub); font-size: calc(13px * var(--fs, 1)); font-weight: 700; }
.lg-who { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; font-size: calc(16px * var(--fs, 1)); }
.lg-sum { padding: 10px 0 4px; border-top: 2px solid var(--ink); font-weight: 700; }
.lg-net { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 8px; font-variant-numeric: tabular-nums; }
.lg-net b { font-size: calc(18px * var(--fs, 1)); }
.lg-net.fam { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--ink); }
.lg-net .plus { color: var(--teal-deep); }
.lg-net .minus { color: var(--peach-deep); }
@media (max-width: 380px) { .lg-head, .lg-row, .lg-sum { grid-template-columns: 1fr 76px 76px; gap: 6px; } }
.tr-row { display: flex; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.card h2 + .tr-row { border-top: 0; }
.tr-row .who { display: flex; gap: 6px; align-items: center; min-width: 0; }
.tr-row .arrow { color: var(--faint); }
.tr-row .amt { margin-left: auto; font-variant-numeric: tabular-nums; }
.tr-copy { width: 44px; height: 44px; border: 0; border-radius: 11px; background: var(--teal-soft); color: var(--teal-deep); display: grid; place-items: center; cursor: pointer; flex: none; }
.tr-copy:active { transform: scale(.96); }
.tr-row.done { color: var(--sub); }
.rate-row, .fx-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.card h2 + .rate-row, .card h2 + .fx-row { border-top: 0; }
.rate-row > b { flex: 0 0 44px; }
.rate-row small, .fx-row small { display: block; color: var(--sub); font-size: calc(12.5px * var(--fs, 1)); }

/* 폴드 펼친 화면 등 넓은 화면: 두 열 */
@media (min-width: 700px) {
  .trips { grid-template-columns: 1fr 1fr; }
  .home-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }
  .home-cols .home-hero .cover { height: 240px; }
  .home-cols .home-hero h3 { font-size: calc(24px * var(--fs, 1)); }
  .home-cols > div > .trip-sec:first-child { margin-top: 0; }
  .cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
  .nav { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, 100%); bottom: 12px; border-radius: 24px; height: var(--nav-h); padding-bottom: 0; }
  main { padding-bottom: calc(var(--nav-h) + 48px); }
  .sheet-bg { align-items: center; }
  .sheet { border-radius: 24px; }
  .sheet-bg.side { align-items: stretch; justify-content: flex-end; }
  .sheet-bg.side .sheet { width: min(420px, 46vw); max-width: none; max-height: none; height: 100%; border-radius: 24px 0 0 24px; padding-bottom: 22px; box-shadow: -6px 0 24px rgba(20, 28, 34, .18); animation: side .2s ease-out; }
  .sheet-bg.side .grip { display: none; }
  .course { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
  .course .map-wrap { margin: 0; position: sticky; top: 72px; }
  .course .map { height: calc(100vh - 180px); max-height: none; border-radius: var(--radius); overflow: hidden; }
  /* 가계부: 왼쪽 지출, 오른쪽 정산·환율(탭 없이 모두 보임) */
  .money-top { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
  .seg:not(.scroll):not(.fs-seg) { display: none; } /* 관리 화면 탭(.scroll)은 넓은 화면에서도 보임 */
  .money { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 16px; align-items: start; }
  .mpanel:not(.on) { display: block; }
  .mpanel[data-panel=list] { grid-row: span 2; }
}

/* 사진 */
.trip-hero.has-cover { background: linear-gradient(180deg, rgba(20,28,34,.15) 0%, rgba(20,28,34,.55) 100%), var(--cover) center/cover no-repeat; }
.trip-hero.has-cover::after { display: none; }
.trip-card .cover[style] { background-size: cover; background-position: center 62%; }
.ph-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 8px 2px 12px; }
.ph-top b { font-size: calc(18px * var(--fs, 1)); }
.ph-add { cursor: pointer; }
.ph-up { margin-bottom: 12px; padding: 14px 16px; }
.ph-today { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; padding: 14px 16px; cursor: pointer; }
.ph-today b { color: var(--teal-deep); font-size: calc(16px * var(--fs, 1)); }
/* 오늘 사진 확인 화면: 모두 체크된 채로, 누르면 빠짐. 접은 화면 3열, 펼친 화면 5열 */
.td h2 { margin: 0 0 4px; }
.td [data-el=msg] { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; }
.td-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 600px) { .td-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.td-cell { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #ECEFF1; cursor: pointer; }
.td-cell img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .4; }
.td-cell.on img { opacity: 1; }
.td-cell::after { content: ''; position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); box-sizing: border-box; }
.td-cell.on::after { content: '✓'; background: var(--teal); color: #fff; font-size: calc(13px * var(--fs, 1)); font-weight: 800; display: grid; place-items: center; line-height: 1; }
.td-v { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: #fff; font-size: 22px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.td-tag { position: absolute; left: 6px; bottom: 6px; font-style: normal; }
.td-tag:not(:empty) { padding: 1px 8px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; font-size: calc(12px * var(--fs, 1)); font-weight: 700; line-height: 20px; }
.td-foot { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: center; padding: 12px 0 4px; background: var(--card); }
.ph-up .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ph-up .row.fail { color: var(--danger); }
.ph-up .row.fail small { color: var(--sub); flex-basis: 100%; }
.ph-up .tools { display: flex; gap: 8px; margin-top: 8px; }
.ph-up .bar { height: 6px; border-radius: 3px; background: var(--peach-soft); margin-top: 10px; overflow: hidden; }
.ph-up .bar i { display: block; height: 100%; background: var(--peach); transition: width .3s; }
.ph-up .row + .row { margin-top: 12px; }
.ph-who { margin-bottom: 4px; }
button.chip { border: 0; cursor: pointer; }
.chip.on { background: var(--teal); color: #fff; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 3px; border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.ph-cell { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: #ECEFF1; cursor: pointer; overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.ph-cell .has-cap { position: absolute; right: 6px; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.ph-cell .ph-cc { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; font-size: calc(11px * var(--fs, 1)); font-weight: 700; line-height: 18px; }
.pc-list { max-height: 50vh; overflow-y: auto; margin-bottom: 8px; }
.ph-grid.trash { border-radius: 12px; margin-top: 12px; }
.ph-grid.trash .ph-cell { cursor: default; }
.ph-grid.trash img { opacity: .6; }
.ph-grid.trash .left { position: absolute; left: 6px; top: 6px; font-size: calc(12px * var(--fs, 1)); font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ph-grid.trash .btn { position: absolute; left: 6px; right: 6px; bottom: 6px; min-height: 30px; padding: 4px; font-size: calc(13px * var(--fs, 1)); }
.ph-foot { text-align: center; margin: 6px 0 10px; }
body.no-scroll { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 45; background: #0E1418; color: #fff; display: flex; flex-direction: column; animation: fade .15s; touch-action: pan-y; }
.v-top { display: flex; align-items: center; justify-content: space-between; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px; font-weight: 700; font-size: calc(15px * var(--fs, 1)); }
.v-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 20px; display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.v-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; user-select: none; }
.v-stage img { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-drag: none; touch-action: none; transform-origin: 50% 50%; will-change: transform; }
.v-stage { overflow: hidden; touch-action: none; } /* 사진 밑 빈 곳을 잡아도 확대·이동(js/zoom.js) */
.v-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.v-stage video { touch-action: auto; }
.tk-same { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #FFF4EC; border: 1px solid #F6D3BC; }
.tk-same ul { margin: 6px 0; padding-left: 18px; } .tk-same p { margin: 6px 0; } .tk-same .row { gap: 8px; margin-top: 8px; }
.tk-viewer { z-index: 55; } /* 코스 장소 창(.sheet-bg 50) 위에도 */
.v-hint { margin: 0; padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: calc(13px * var(--fs, 1)); color: rgba(255,255,255,.6); }
.rc-img.zoomable { cursor: zoom-in; }
.v-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 12px; background: rgba(0,0,0,.3); color: #fff; font-size: 34px; cursor: pointer; display: none; }
.v-nav.prev { left: 10px; } .v-nav.next { right: 10px; }
.v-info { padding: 12px 16px calc(16px + var(--safe-b)); max-width: 760px; width: 100%; margin: 0 auto; }
.v-info .who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: calc(14px * var(--fs, 1)); }
.v-info .who span { color: rgba(255,255,255,.7); }
.v-info .who a { margin-left: auto; color: #8FE0DC; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 600; }
.v-info .cap { margin: 8px 0 0; font-size: calc(15px * var(--fs, 1)); white-space: pre-wrap; }
.v-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.v-chip { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 99px; padding: 8px 14px; min-height: 38px; background: rgba(255,255,255,.12); color: #fff; font-weight: 600; font-size: calc(14px * var(--fs, 1)); cursor: pointer; }
.v-chip.danger { color: #FF9C94; }
@media (hover: hover) { .v-nav { display: block; } }
@media (min-width: 700px) { .ph-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; } }

/* 인터넷이 느리거나 끊겼을 때 */
.net-chip { position: fixed; z-index: 70; top: calc(env(safe-area-inset-top, 0px) + 68px); /* 머리 줄 바로 아래(제목을 가리지 않게) */ left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); background: var(--ink); color: #fff; font-size: calc(13px * var(--fs, 1)); font-weight: 600; padding: 6px 14px; border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.net-chip.sending { background: var(--teal-deep); }
.card.pending { border: 1.5px dashed var(--peach); }
.card.pending ul { margin: 8px 0 0; padding-left: 18px; }
.card.pending li { margin: 2px 0; }
.map-btn.dl { left: auto; right: 12px; bottom: auto; top: 12px; width: auto; padding: 0 12px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; gap: 6px; display: flex; align-items: center; }

/* 기록 */
.nt { padding: 14px 16px; }
.nt-head { display: flex; align-items: center; gap: 8px; }
.nt-head .avatar { width: 28px; height: 28px; font-size: 13px; }
.nt-tools { margin-left: auto; display: flex; gap: 10px; }
.nt-tools .link-btn { font-size: calc(13px * var(--fs, 1)); }
.nt-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.nt-body { margin: 10px 2px 2px; line-height: 1.6; }
.nt-cs { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.nt-c { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: calc(14px * var(--fs, 1)); }
.nt-c .avatar { width: 22px; height: 22px; font-size: 11px; flex: none; margin-top: 1px; }
.nt-x { font-size: calc(18px * var(--fs, 1)); line-height: 1; padding: 0 4px; color: var(--sub); }
.nt-cf { display: flex; gap: 8px; margin-top: 6px; }
.nt-cf .input { flex: 1; min-width: 0; min-height: 38px; padding: 6px 12px; }
/* 오늘의 이야기(AI 카드) */
.nt.story { padding: 0; overflow: hidden; border: 1.5px solid var(--peach); }
.st-hd { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; }
.st-hd b { font-size: calc(16px * var(--fs, 1)); }
.st-ai { font-size: calc(11px * var(--fs, 1)); color: var(--sub); background: #F0F2F4; border-radius: 99px; padding: 2px 8px; flex: none; }
.st-hd .link-btn { font-size: calc(13px * var(--fs, 1)); flex: none; }
.st-nums { padding: 2px 16px 12px; font-size: calc(14px * var(--fs, 1)); font-weight: 600; line-height: 1.6; }
.st-shot { position: relative; }
.st-drawing { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 16 / 10; max-height: 360px; padding: 16px; text-align: center; background: var(--bg); color: var(--sub); }
.st-drawing b { color: var(--ink); }
.st-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 360px; object-fit: cover; }
.st-tag { position: absolute; left: 10px; top: 10px; background: rgba(255,255,255,.92); color: var(--peach-deep); font-size: calc(12px * var(--fs, 1)); font-weight: 800; padding: 3px 9px; border-radius: 99px; }
.st-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; color: #fff; font-weight: 700; font-size: calc(15px * var(--fs, 1)); background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.st-aw { padding: 8px 16px 0; }
.st-a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.st-a:last-child { border-bottom: 0; }
.st-t { font-size: calc(20px * var(--fs, 1)); line-height: 1.2; }
/* 상 사진: 작은 둥근 사진(얼굴 쪽으로 당겨 자름) + 구석에 🏆 */
.st-pic { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
.st-pic::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); z-index: 1; pointer-events: none; }
.st-pic img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.st-pic .st-t { position: absolute; right: -6px; bottom: -4px; font-size: 16px; z-index: 2; }
.st-pic:has(img.face) { border-radius: 50%; overflow: hidden; }
.st-pic img.face { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: cover; transform: translate(-50%, -50%); }
.st-pic:has(img.face) .st-t { right: 0; bottom: 0; font-size: 14px; }
.st-nick { font-style: normal; color: var(--peach-deep); font-weight: 800; }
/* 상장 보기(B급) */
.aw-photo { position: relative; margin: 0 -18px; overflow: hidden; background: #111; }
.aw-photo > img { display: block; width: 100%; height: auto; }
.aw-stk > * { position: absolute; opacity: 0; }
.aw-photo.on .aw-stk > * { opacity: 1; animation: aw-pop .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.aw-photo.on .aw-stk .aw-nick { animation-delay: .35s; }
.aw-medal { transform: rotate(-10deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); pointer-events: none; }
.aw-medal img { display: block; width: 100%; height: auto; }
.aw-medal b { position: absolute; left: 52.1%; top: 70.2%; transform: translate(-50%, -50%) rotate(6deg); width: 42%; text-align: center; line-height: 1.05; word-break: keep-all; font-family: 'Gaegu', 'Noto Sans KR', sans-serif; font-weight: 700; color: #8A3B12; }
.aw-nick { white-space: nowrap; font-family: 'Gaegu', 'Noto Sans KR', sans-serif; font-weight: 700; color: #D62828; padding: 0 6px; background: linear-gradient(transparent 45%, rgba(255, 230, 109, .9) 45%, rgba(255, 230, 109, .9) 88%, transparent 88%); transform: rotate(-4deg); pointer-events: none; }
@keyframes aw-pop { 0% { opacity: 0; scale: .2; } 100% { opacity: 1; scale: 1; } }
.aw-cert { position: relative; margin: 16px 2px 4px; padding: 30px 30px 26px; background: #fff; font-family: 'Gaegu', 'Noto Sans KR', sans-serif; font-weight: 700; color: #1E1E1E; text-align: center; }
.aw-cert::before, .aw-cert::after { content: ''; position: absolute; pointer-events: none; border-radius: 10px; filter: url(#ts-crayon); }
.aw-cert::before { inset: 0; border: 6px solid #F28C28; }
.aw-cert::after { inset: 10px; border: 3px solid #E8564B; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 8px #F6C744; }
.aw-cert > p { filter: url(#ts-pencil); }
.aw-cert h4 { margin: 0 0 10px; font-size: calc(40px * var(--fs, 1)); letter-spacing: .5em; padding-left: .5em; font-weight: 700; filter: url(#ts-crayon); }
.aw-cert h4 span:first-child { color: #E8564B; }
.aw-cert h4 span:last-child { color: #3B7DD8; }
.aw-to { margin: 0 0 12px; font-size: calc(20px * var(--fs, 1)); }
.aw-to small { display: block; margin-top: 4px; font-size: calc(14px * var(--fs, 1)); color: #4A4A4A; }
.aw-body { margin: 0 0 16px; text-align: left; line-height: 1.7; font-size: calc(18px * var(--fs, 1)); word-break: keep-all; }
.aw-end { margin: 0; line-height: 1.7; font-size: calc(17px * var(--fs, 1)); }
.aw-seal { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-left: 6px; vertical-align: middle; border: 3px solid #E8564B; border-radius: 50%; color: #E8564B; font-size: 14px; transform: rotate(-10deg); filter: url(#ts-crayon); }
.aw-share { margin: 14px 0 4px; }
.aw-art { background: #fff; }
/* 오늘의 이야기 그림일기: 크레파스 그림 + 칸 공책 한 줄 */
.st-diary { position: relative; margin: 0 12px; padding: 10px; background: #FFFDF6; border: 2px solid #2B2116; border-radius: 6px; }
.st-diary .st-tag { left: 18px; top: 18px; }
.st-dimg { display: block; width: 100%; border: 2px solid #2B2116; border-radius: 4px; background: #fff; }
.st-dimg.photo { aspect-ratio: 4 / 3; object-fit: cover; }
.st-grid { margin: 10px 0 0; display: grid; grid-template-columns: repeat(18, 1fr); border-top: 1px solid #E8A3A3; border-left: 1px solid #E8A3A3; container-type: inline-size; }
.st-grid span { aspect-ratio: 1; display: grid; place-items: center; border-right: 1px solid #E8A3A3; border-bottom: 1px solid #E8A3A3; font-family: 'Gaegu', 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 3.9cqw; line-height: 1; color: #1E1E1E; }
.st-grid i { font-style: normal; display: block; filter: url(#ts-pencil); }
.pencil-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.st-swap { display: block; margin: 6px auto 0; }
.st-dshare { margin-top: 8px; }
/* 가계부 최근 지운 기록 */
.m-trash { display: block; margin: 14px auto 4px; color: var(--sub); }
.trash-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.trash-row:last-child { border-bottom: 0; }
.trash-row small { display: block; color: var(--sub); font-size: calc(12px * var(--fs, 1)); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .aw-photo.on .aw-stk > * { animation: none; } }
.st-a b { display: block; font-size: calc(14px * var(--fs, 1)); }
.st-a span { font-size: calc(13px * var(--fs, 1)); color: var(--sub); }
.st-drop { font-size: calc(12px * var(--fs, 1)); flex: none; color: var(--sub); }
.st-q { margin: 8px 12px 0; background: var(--teal-soft); border-radius: 14px; padding: 12px 14px; }
.st-q b { color: var(--teal-deep); font-size: calc(13px * var(--fs, 1)); }
.st-q p { margin: 4px 0 0; font-weight: 600; }
.nt.story .nt-cs { margin: 10px 16px 14px; }
.nt-days { margin-bottom: 10px; }
.nt-wait { color: var(--peach-deep); font-weight: 700; }
.search-row { display: flex; gap: 8px; }
.search-row .input { flex: 1; min-width: 0; }
.gs-list { background: var(--card, #fff); border-radius: 12px; margin: -2px 0 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.gs-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(0,0,0,.06); background: none; color: inherit; font: inherit; cursor: pointer; }
.gs-item b { display: block; font-size: calc(15px * var(--fs, 1)); }
.gs-item small { display: block; font-size: calc(12px * var(--fs, 1)); color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item:active { background: var(--teal-soft); }
.gs-app { color: var(--teal, #13A39E); font-size: calc(14px * var(--fs, 1)); border-bottom: 0; }
.gs-none { padding: 10px 12px; }

/* 여행 첫 화면: 오늘 일정 */
.card.today { margin: 12px 0; }
/* 여행 홈(3초 테스트): 여행 전·중 얇은 띠, 여행 중 '다음 갈 곳', 여행 전 큰 툭 던져두기 */
.trip-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; background: var(--card); border-radius: 16px; padding: 10px 14px; margin-bottom: 12px; box-shadow: var(--shadow); font-size: calc(13px * var(--fs, 1)); color: var(--sub); font-variant-numeric: tabular-nums; }
.trip-strip .pill { background: var(--peach-soft); color: var(--peach-deep); font-weight: 800; border-radius: 99px; padding: 2px 10px; font-size: calc(14px * var(--fs, 1)); }
.trip-strip b { color: var(--ink); font-size: calc(15px * var(--fs, 1)); }
.next-card { background: var(--card); border-radius: 24px; padding: 18px; margin-bottom: 12px; box-shadow: 0 0 0 2px var(--teal), 0 10px 24px rgba(19, 163, 158, .15); }
.next-card > small { color: var(--teal-deep); font-weight: 800; font-size: calc(13px * var(--fs, 1)); }
.next-card .nc-go { display: block; color: inherit; text-decoration: none; }
.next-card .nc-time { display: block; font-size: calc(44px * var(--fs, 1)); font-weight: 800; line-height: 1.1; color: var(--peach-deep); letter-spacing: -1px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.next-card .nc-title { display: block; font-size: calc(21px * var(--fs, 1)); font-weight: 800; margin: 2px 0; }
.next-card .nc-sub { display: block; font-size: calc(13px * var(--fs, 1)); color: var(--sub); margin-top: 6px; }
.next-card.done .nc-time { font-size: calc(30px * var(--fs, 1)); }
.next-card.done { box-shadow: var(--shadow); }
.next-card .nc-meta { font-size: calc(13px * var(--fs, 1)); color: var(--sub); }
.next-card .nc-btns { display: flex; gap: 8px; margin-top: 14px; }
.next-card .nc-btns .btn { flex: 1; }
details.today-past > summary { list-style: none; cursor: pointer; font-size: calc(13px * var(--fs, 1)); color: var(--faint); padding: 9px 0 0; border-top: 1px solid var(--line); margin-top: 8px; }
details.today-past > summary::-webkit-details-marker { display: none; }
details.today-past .today-list li { opacity: .6; }
.toss-card.line { padding: 8px 14px 8px 8px; gap: 8px; margin-bottom: 12px; }
.toss-card.line .toss-anim { width: 44px; height: 40px; transform: scale(.7); transform-origin: 50% 60%; }
.toss-card.line b { font-size: calc(15px * var(--fs, 1)); }
.toss-card.line small { color: var(--peach-deep); font-weight: 800; white-space: nowrap; }
.toss-card.big { display: block; padding: 18px; border-width: 2.5px; }
.toss-card.big b { font-size: calc(22px * var(--fs, 1)); }
.toss-card.big small { display: block; margin: 4px 0 14px; font-size: calc(14px * var(--fs, 1)); }
.toss-card.big .row { gap: 6px; }
.pack-bar { display: block; width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.pack-bar .row { font-weight: 700; font-size: calc(15px * var(--fs, 1)); }
.pack-bar b { color: var(--sub); font-weight: 500; font-size: calc(13px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.pack-bar .bar { display: block; height: 8px; border-radius: 99px; background: #F0F2F4; margin-top: 8px; overflow: hidden; }
.pack-bar .bar i { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
details.info-fold { margin-top: 14px; }
details.info-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
details.info-fold > summary::-webkit-details-marker { display: none; }
details.info-fold > summary span:not(.ar) { margin-left: auto; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
details.info-fold > summary .ar { color: var(--faint); transition: transform .2s; }
details.info-fold[open] > summary { margin-bottom: 8px; }
details.info-fold[open] > summary .ar { transform: rotate(90deg); }
/* 여행 중 홈: 기록·예약·공지 작은 줄 + 더보기(10/23) */
.trip-mini { display: flex; gap: 8px; margin: 12px 0 0; }
.trip-mini > * { flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 8px; border: 0; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); color: var(--ink); font: inherit; font-weight: 600; font-size: calc(14px * var(--fs, 1)); line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; } /* 영어·큰 글자면 두 줄로(옆 칸으로 넘치지 않게) */
details.more-fold { margin-top: 16px; }
details.more-fold > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--sub); font-weight: 600; cursor: pointer; }
details.more-fold > summary::-webkit-details-marker { display: none; }
details.more-fold > summary .ar { transition: transform .2s; }
details.more-fold[open] > summary .ar { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { details.more-fold > summary .ar { transition: none; } }
@media (prefers-reduced-motion: reduce) { details.info-fold > summary .ar { transition: none; } }
.card.offer { margin: 12px 0; border: 2px solid var(--peach); background: var(--peach-soft); }
.today-list { list-style: none; margin: 10px 0 0; padding: 0; }
.today-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.today-list .num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--teal-soft); color: var(--teal-deep); }
.today-list li.next .num { background: var(--teal); color: #fff; }
.today-list li.past { opacity: .55; }
.today-list .today-go { color: inherit; text-decoration: none; min-width: 0; padding: 2px 0; }

/* 사진 골라서 내려받기 */
.ph-acts { display: flex; gap: 8px; align-items: center; }
.ph-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ph-foot a.link-btn { text-decoration: none; }
.ph-grid.selecting .ph-cell::after { content: ''; position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); box-sizing: border-box; }
.ph-grid.selecting .ph-cell.on::after { content: '✓'; background: var(--teal); color: #fff; font-size: calc(13px * var(--fs, 1)); font-weight: 800; display: grid; place-items: center; line-height: 1; }
.ph-grid.selecting .ph-cell.on img { opacity: .75; }
.ph-selbar { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(var(--nav-h, 64px) + var(--safe-b) + 12px); display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.ph-selbar b { flex: 1; font-size: calc(14px * var(--fs, 1)); }
.ph-selbar[hidden] { display: none; }
@media (min-width: 700px) { .ph-selbar { left: 50%; right: auto; transform: translateX(-50%); width: min(536px, calc(100% - 24px)); bottom: calc(var(--nav-h, 64px) + 24px); } }
.google-btn, .login-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.google-btn img, .login-btn img { flex: none; }
.login-list { display: grid; gap: 8px; }
.login-btn.kakao { background: #FEE500; color: #191919; box-shadow: none; }
.login-btn.naver { background: #03C75A; color: #fff; box-shadow: none; }
.login-btn.naver img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.login-btn.google { background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1.5px var(--line); }
.ph-vid { position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: .74rem; font-weight: 600; pointer-events: none; }
.v-stage video { max-width: 100%; max-height: 100%; background: #000; }
.rc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 0 12px; }
.rc-row .grow { min-width: 0; }
.rc-img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; background: #f2f2f2; }

/* 사용법 영상 링크 */
.guide-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 16px; background: var(--peach-soft); color: var(--ink); text-decoration: none; }
.guide-link .play { width: 40px; height: 40px; border-radius: 50%; background: var(--peach); color: #fff; display: grid; place-items: center; font-size: 15px; flex: none; padding-left: 3px; }
.guide-link b { display: block; font-size: calc(15px * var(--fs, 1)); }
.guide-link small { color: var(--sub); font-size: calc(13px * var(--fs, 1)); }
.guide-link.inst { background: var(--teal-soft); }
.guide-link.inst .play { background: var(--teal); padding-left: 0; font-size: calc(19px * var(--fs, 1)); }
/* 결제 목록 사진 → 여러 건 넣기 */
.ml-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; max-height: 46vh; overflow: auto; }
.ml-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card, #fff); border: 1.5px solid var(--line); }
.ml-row input { width: 20px; height: 20px; flex: none; accent-color: var(--teal); }
.ml-row .ml-cat { font-size: calc(20px * var(--fs, 1)); flex: none; }
.ml-row b { display: block; font-size: calc(15px * var(--fs, 1)); word-break: break-all; }
.ml-row small { color: var(--sub); font-size: calc(13px * var(--fs, 1)); }
.ml-row .ml-amt { white-space: nowrap; font-size: calc(15px * var(--fs, 1)); }
.ml-row.dup { opacity: .6; }
.ml-row:has(input:checked) { border-color: var(--teal); }
.ml-row.saved { opacity: .55; border-color: var(--line); }

/* 항공권 보관함 */
.tk-link { display: flex; align-items: center; gap: 12px; margin-top: 12px; text-decoration: none; color: var(--ink); }
.tk-link .big { font-size: calc(26px * var(--fs, 1)); }
.tk-link small { display: block; color: var(--sub); font-size: calc(13px * var(--fs, 1)); }
.tk { margin-bottom: 12px; }
.tk .fl { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.fl-top { display: flex; align-items: baseline; gap: 8px; }
.fl-route { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.fl-route > div { flex: 1; display: flex; flex-direction: column; }
.fl-route > div:last-child { text-align: right; }
.fl-code { font-size: calc(24px * var(--fs, 1)); letter-spacing: .5px; }
.fl-time { font-size: calc(17px * var(--fs, 1)); font-weight: 600; }
.fl-arrow { color: var(--sub); font-size: calc(20px * var(--fs, 1)); }
.fl-extra { margin-top: 6px; color: var(--sub); }
.tk-who { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tk-pnr b { letter-spacing: 1px; }
/* 다른 사람 예약: 접어 두기 */
.tk-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sub); margin-bottom: 12px; }
.tk-more > summary::-webkit-details-marker { display: none; }
.tk-more > summary::after { content: '▾'; margin-left: auto; transition: transform .2s; }
.tk-more[open] > summary::after { transform: rotate(180deg); }
.tk { position: relative; }
.tk-new { position: absolute; top: -9px; right: 14px; font-size: calc(11px * var(--fs, 1)); padding: 2px 8px; box-shadow: 0 0 0 2px var(--bg, #fff); }
.new-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); vertical-align: middle; margin-left: 4px; }
.tk-act { margin: 10px 0 4px; gap: 8px; flex-wrap: wrap; }
.tk-pick { gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.tk-add { gap: 8px; flex-wrap: wrap; }
.tk-add .btn { flex: 1 1 140px; }
.tk-text { white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow: auto; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--line); }
.rc-img + .rc-img { margin-top: 8px; }
.card.tk-pick { border-bottom: 0; padding: 12px 14px; }
label.btn.disabled { opacity: .5; pointer-events: none; }
/* 인천공항 실시간 */
.live:empty { display: none; }
.live { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--teal-soft, #e6f4f2); font-size: calc(13px * var(--fs, 1)); }
.live-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.live-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.live-grid div { display: flex; flex-direction: column; }
.live-grid small { color: var(--sub); font-size: calc(11px * var(--fs, 1)); }
.live-grid b { font-size: calc(15px * var(--fs, 1)); word-break: break-all; }
.live .warn, .badge.warn { color: #c0392b; }
@media (max-width: 360px) { .live-grid { grid-template-columns: repeat(2, 1fr); } }
/* 코스 장소 창 안의 예약 정보 */
.pl-tickets { margin-top: 14px; }
.tk-pics { margin-top: 10px; }
.pl-tk { font-size: calc(14px * var(--fs, 1)); }
.pl-tk-head { margin: 0 0 8px; font-size: calc(15px * var(--fs, 1)); }
.pl-tickets .card.tk { margin-bottom: 10px; }
.pl-tickets details summary { cursor: pointer; padding: 8px 0 4px; color: var(--teal); }
/* 예약 정보 접기: 제목 줄 전체가 누르는 곳(44px), 오른쪽 ▾가 접히면 돌아감 */
.pl-tickets .pl-tk-fold > summary { display: flex; align-items: center; min-height: 44px; padding: 0; margin: 0; color: inherit; font-weight: 700; list-style: none; }
.pl-tickets .pl-tk-fold > summary::-webkit-details-marker { display: none; }
.pl-tickets .pl-tk-fold > summary::after { content: '▾'; margin-left: auto; padding: 0 4px; font-size: 18px; color: var(--sub); transition: transform 150ms cubic-bezier(0.2, 0, 0, 1); }
.pl-tickets .pl-tk-fold:not([open]) > summary::after { transform: rotate(-90deg); }

/* 앱으로 설치 띠: 화면 맨 위, 내용을 밀어 내림 */
.install-bar { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; padding: 10px 8px 10px 12px; border-radius: 16px; background: var(--ink); color: #fff; }
.install-bar img { width: 34px; height: 34px; border-radius: 9px; background: #fff; flex: none; }
.install-bar small { opacity: .75; }
.install-bar .grow { flex: 1; min-width: 0; line-height: 1.3; font-size: calc(14px * var(--fs, 1)); }
.install-bar .x { background: none; border: 0; color: #fff; opacity: .7; font-size: calc(16px * var(--fs, 1)); padding: 6px; cursor: pointer; }

/* 브라우저 ↔ 설치한 앱 잇기: 첫 화면 카드, 크게 띄우는 숫자, 숫자 넣는 칸 */
.pair-card { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; text-align: left; }
.pair-card .btn { margin-top: 8px; }
.pair-pin { margin: 12px 0 4px; text-align: center; font-size: calc(40px * var(--fs, 1)); font-weight: 800; letter-spacing: 4px; font-variant-numeric: tabular-nums; color: var(--ink); }
.pair-in { min-height: 48px; text-align: center; font-size: calc(24px * var(--fs, 1)); letter-spacing: 4px; font-variant-numeric: tabular-nums; }

/* 로그인 연결: 나머지 계정은 접어 둠 */
.more-logins summary { cursor: pointer; list-style: none; padding: 4px 0; }
.more-logins summary::-webkit-details-marker { display: none; }
.more-logins[open] summary { margin-bottom: 2px; }
/* 화면을 불러오는 중(main.js busy)·누른 뒤 서버를 기다리는 중(api.js busy-net): 맨 위에 움직이는 가는 줄 */
body.busy::after, body.busy-net::after { content: ''; position: fixed; top: 0; left: 0; z-index: 9999; height: 3px; width: 40%; background: var(--peach, #ff8a65); border-radius: 0 2px 2px 0; animation: busybar 1s ease-in-out infinite; pointer-events: none; }
@keyframes busybar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* 누를 때 반응: 손가락을 대는 순간 살짝 눌리고(작아지며 흐려짐) 떼면 돌아온다. :where로 감싸 다른 모양 규칙을 덮지 않게 */
:where(a, button, summary, label.btn, .ex-item, .pl-item, .gs-item) { transition: transform .12s ease, opacity .12s ease; }
:where(a, button, summary, label.btn, .ex-item, .pl-item, .gs-item):where(:active) { transform: scale(.96); opacity: .75; }
:where(.trip-card, .quick a, .tk-link):where(:active) { transform: scale(.98); opacity: .9; }
.leaflet-container :where(a, button):where(:active) { transform: none; opacity: 1; }
/* 아래 메뉴: 누른 칸은 화면이 열리기 전에 바로 색이 바뀌고 아이콘이 톡 튄다 */
.nav a.pressed { color: var(--teal-deep); }
.nav:has(a.pressed) a.on:not(.pressed) { color: var(--faint); }
.nav a.pressed svg { animation: tap-pop .28s ease; }
@keyframes tap-pop { 0% { transform: scale(1); } 40% { transform: scale(.82); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { :where(a, button, summary, .trip-card):where(:active) { transform: none; } .nav a.pressed svg { animation: none; } }

/* 방장 공지·알림 켜기 */
.card.notice { margin: 12px 0; border: 2px solid var(--teal-soft); }
.card.notice.new { border-color: var(--peach); background: var(--peach-soft); }
.notice-body { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font-size: calc(15px * var(--fs, 1)); line-height: 1.5; }
.notice-tools { margin-top: 6px; justify-content: flex-end; gap: 6px; }
.notice-new { margin: 12px 0; }
/* 동선 추천 */
.rt-sum { margin: 4px 2px 6px; }
.rt-list { list-style: none; margin: 6px 0 12px; padding: 0; }
.rt-list li { display: flex; align-items: center; gap: 8px; }
.rt-pl, .rt-end { padding: 6px 2px; }
.rt-pl .num { width: 22px; height: 22px; border-radius: 50%; background: #F08A5D; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rt-pin { flex: none; width: 32px; height: 32px; margin: -5px -2px -5px -6px; border: 0; background: none; font-size: 15px; filter: grayscale(1); opacity: .3; cursor: pointer; }
.rt-pin.on { filter: none; opacity: 1; }
.rt-end { font-weight: 600; }
.rt-leg { color: var(--sub); font-size: calc(12px * var(--fs, 1)); padding-left: 30px; }
.rt-mode { margin: 0; padding: 3px; }
.rt-mode button { padding: 8px 2px; }
.rt-list .warn, p.warn { color: #D9534F; }
.rt-list small { flex: none; }
.pl-hotel .num { background: var(--teal-soft); font-size: calc(14px * var(--fs, 1)); }
.pl-hotel .pl-body b { font-weight: 600; color: var(--sub); }

/* 내 여행: 구역 제목, 지난 여행 접기(연도별 작은 줄), 숨긴 여행 */
.trip-sec { font-size: calc(13px * var(--fs, 1)); font-weight: 700; color: var(--sub); margin: 14px 2px 8px; }
/* 내 여행(3초 테스트): 큰 카드 하나 + 나머지 작은 줄, 설정은 접기 */
.home-hero .cover { height: 168px; }
.home-hero .badge { left: 14px; right: auto; font-size: calc(15px * var(--fs, 1)); padding: 5px 14px; font-weight: 800; }
.home-hero h3 { font-size: calc(22px * var(--fs, 1)); }
.faint { color: var(--faint); }
.home-cols > div > .news-card:first-child { margin-top: 0; }
.home-cols .news-card { margin-bottom: 0; padding: 10px 44px 10px 14px; font-size: calc(13px * var(--fs, 1)); line-height: 1.45; box-shadow: none; }
.home-cols .news-card .sheet-x { top: 6px; right: 6px; width: 30px; height: 30px; font-size: 18px; }
.up-list { padding: 0 14px; }
.up-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: inherit; text-decoration: none; }
.up-row + .up-row { border-top: 1px solid var(--line); }
.up-row .f { width: 30px; text-align: center; font-size: calc(22px * var(--fs, 1)); flex: none; }
.up-row .t { flex: 1; min-width: 0; }
.up-row .t b { display: block; font-size: calc(15px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-row .t span { font-size: calc(12px * var(--fs, 1)); color: var(--sub); }
.up-row .dd { flex: none; font-weight: 800; color: var(--peach-deep); font-size: calc(14px * var(--fs, 1)); white-space: nowrap; }
details.home-set { margin-top: 16px; }
details.home-set > summary { list-style: none; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 13px 16px; cursor: pointer; }
details.home-set > summary::-webkit-details-marker { display: none; }
details.home-set > summary span:not(.ar) { margin-left: auto; color: var(--faint); font-size: calc(13px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
details.home-set > summary .ar { color: var(--faint); transition: transform .2s; }
details.home-set[open] > summary .ar { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { details.home-set > summary .ar { transition: none; } }
details.past { margin-top: 16px; }
details.past > summary { list-style: none; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 13px 16px; font-weight: 700; cursor: pointer; }
details.past > summary::-webkit-details-marker { display: none; }
details.past > summary .ar { color: var(--faint); font-size: calc(12px * var(--fs, 1)); transition: transform .2s; }
details.past[open] > summary .ar { transform: rotate(90deg); }
details.past > summary .n { margin-left: auto; color: var(--sub); font-weight: 500; font-size: calc(14px * var(--fs, 1)); }
.past-list { display: grid; gap: 4px; }
.past-year { font-size: calc(12px * var(--fs, 1)); font-weight: 800; color: var(--faint); margin: 12px 6px 2px; font-variant-numeric: tabular-nums; }
.past-row { display: flex; align-items: center; background: var(--card); border-radius: 14px; }
.past-row a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 4px 10px 12px; color: inherit; text-decoration: none; }
.past-row .f { width: 28px; text-align: center; font-size: calc(20px * var(--fs, 1)); flex: none; }
.past-row .t { min-width: 0; }
.past-row .t b { display: block; font-size: calc(15px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.past-row .t span { font-size: calc(12px * var(--fs, 1)); color: var(--sub); }
.past-row .more { border: 0; background: none; color: var(--faint); font-size: calc(20px * var(--fs, 1)); padding: 8px 14px; cursor: pointer; }
.past-hidden { margin-top: 10px; }
.past-hidden > summary { text-align: center; font-size: calc(13px * var(--fs, 1)); color: var(--sub); cursor: pointer; padding: 6px; list-style: none; text-decoration: underline; text-decoration-color: var(--faint); }
.past-hidden > summary::-webkit-details-marker { display: none; }
.toast-act { margin-left: 14px; background: none; border: 0; color: #FFB08F; font: inherit; font-weight: 700; padding: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { details.past > summary .ar { transition: none; } }

/* 한 번에 넣기 */
.ib-item { display: flex; gap: 12px; align-items: center; padding: 10px; }
.ib-thumb { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: 10px; background: var(--line, #eee); }
.ib-thumb.pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(28px * var(--fs, 1)); overflow: hidden; }
.ib-thumb.pdf small { font-size: calc(10px * var(--fs, 1)); max-width: 66px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-chips { gap: 6px; }
.ib-chips .kind-chip span { padding: 6px 10px; font-size: calc(13px * var(--fs, 1)); }
.ib-rc { padding: 12px; }
.ib-rc.dup { opacity: .75; }
.ib-rc.saved { opacity: .5; }
.ib-rc .row { gap: 10px; align-items: center; }
.ib-rthumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }

/* 툭 던져두기: 여행 화면 맨 위 핵심 카드 + 나누기 애니메이션. html.calm(나중에 설정에서 끄기)·움직임 줄이기면 멈춤 */
.toss-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: var(--radius); text-decoration: none; color: var(--ink);
  background: linear-gradient(135deg, var(--peach-soft) 0%, #fff 55%, var(--teal-soft) 100%); border: 2px dashed #F6B593; box-shadow: var(--shadow); }
.toss-card:active { transform: scale(.98); }
.toss-card b { display: block; font-size: calc(18px * var(--fs, 1)); }
.toss-card small { color: var(--sub); font-size: calc(13px * var(--fs, 1)); }
.toss-anim { position: relative; width: 72px; height: 64px; flex: none; }
.toss-anim i { position: absolute; left: 50%; bottom: 4px; font-style: normal; line-height: 1; }
.toss-anim .tbox { font-size: calc(34px * var(--fs, 1)); transform-origin: 50% 100%; margin-left: -17px; animation: toss-thud 1.4s ease-out infinite; z-index: 1; }
.toss-anim .tf { font-size: calc(20px * var(--fs, 1)); margin-left: -10px; bottom: 22px; opacity: 0; animation: toss-fly 4.2s ease-in infinite; }
.toss-anim .tf:nth-child(2) { animation-delay: 1.4s; }
.toss-anim .tf:nth-child(3) { animation-delay: 2.8s; }
@keyframes toss-fly {
  0% { transform: translate(-30px, -26px) rotate(-35deg) scale(.9); opacity: 0; }
  6% { opacity: 1; }
  18% { transform: translate(-12px, -40px) rotate(-5deg) scale(1); }
  30% { transform: translate(0, -2px) rotate(25deg) scale(.7); opacity: 1; }
  34%, 100% { transform: translate(0, 6px) rotate(25deg) scale(.4); opacity: 0; }
}
@keyframes toss-thud {
  0%, 38%, 60%, 100% { transform: none; }
  44% { transform: translateY(2px) scale(1.08, .88); }
  52% { transform: translateY(-3px) scale(.96, 1.04); }
}
.toss-stage { display: flex; flex-direction: column; align-items: center; padding: 14px 0 6px; }
.ts-pile { position: relative; width: 140px; height: 66px; }
.ts-pile img { position: absolute; left: calc(50% - 26px + (var(--i) - 2) * 14px); top: 4px; width: 52px; height: 52px; object-fit: cover; border-radius: 9px;
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(29, 42, 51, .18); animation: ts-shuffle 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.23s); }
@keyframes ts-shuffle { from { transform: translateY(0) rotate(-9deg); } to { transform: translateY(-10px) rotate(9deg); } }
.ts-box { font-size: calc(46px * var(--fs, 1)); line-height: 1; margin-top: 0; animation: toss-thud 1.1s ease-out infinite; }
.toss-stage p { margin: 6px 0 0; }
.ib-item.landed { animation: ts-land .55s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--d, 0ms); }
.ib-item.landed .kind-chip input:checked + span { animation: ts-pop .4s ease-out both; animation-delay: calc(var(--d, 0ms) + .35s); }
@keyframes ts-land { from { opacity: 0; transform: translateY(-46px) scale(.85) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes ts-pop { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .toss-anim *, .toss-stage *, .ib-item.landed, .ib-item.landed * { animation: none !important; }
  .toss-anim .tf { opacity: 1; }
}
html.calm .toss-anim *, html.calm .toss-stage *, html.calm .ib-item.landed, html.calm .ib-item.landed * { animation: none !important; }
html.calm .toss-anim .tf { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .toss-anim .tf:nth-child(1) { transform: translate(-22px, -14px) rotate(-15deg); }
  .toss-anim .tf:nth-child(2) { transform: translate(0, -24px); }
  .toss-anim .tf:nth-child(3) { transform: translate(22px, -14px) rotate(15deg); }
}
html.calm .toss-anim .tf:nth-child(1) { transform: translate(-22px, -14px) rotate(-15deg); }
html.calm .toss-anim .tf:nth-child(2) { transform: translate(0, -24px); }
html.calm .toss-anim .tf:nth-child(3) { transform: translate(22px, -14px) rotate(15deg); }

/* 베타 관리: AI 비용 분석 표 */
.ai-tbl { padding: 6px 12px; }
.ai-row { display: flex; gap: 6px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: calc(13px * var(--fs, 1)); }
.ai-row:first-child { border-top: 0; }
.ai-row > span:not(.grow) { width: 44px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.ai-row > span:nth-child(3) { width: 56px; }
.ai-row .grow { min-width: 0; overflow-wrap: anywhere; }
.ai-row.head { color: var(--sub); font-size: calc(11px * var(--fs, 1)); font-weight: 700; }
.ai-row .bad { color: var(--danger); font-weight: 700; }

/* 툭 던져두기 [넣기]: 사진이 탭으로 날아가고 탭이 톡 튐 */
.fly-thumb { position: fixed; z-index: 60; margin: 0; pointer-events: none; border-radius: 10px; box-shadow: 0 6px 16px rgba(29, 42, 51, .25); will-change: transform; }
.nav a { position: relative; }
.nav a.got svg { animation: tab-got .45s cubic-bezier(.3, 1.6, .5, 1); }
.nav a.got { color: var(--teal-deep); }
@keyframes tab-got { 0% { transform: scale(1); } 40% { transform: scale(1.35) translateY(-4px); } 100% { transform: scale(1); } }
.fly-badge { position: absolute; top: -6px; left: calc(50% + 6px); min-width: 22px; padding: 1px 6px; border-radius: 99px; background: var(--peach); color: #fff; font-size: calc(11px * var(--fs, 1)); font-weight: 800; line-height: 16px; text-align: center; animation: badge-in .3s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes badge-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nav a.got svg, .fly-badge { animation: none; } }
html.calm .nav a.got svg, html.calm .fly-badge { animation: none; }

/* 떠나기 전 할 일: 여행 홈 맨 위 카드 한 장 + 누르면 창 */
.prep-card { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 14px 16px; border: 2px solid var(--peach); background: var(--peach-soft); text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.prep-card small { color: var(--peach-deep); font-weight: 700; white-space: nowrap; }
.prep-card b { flex: 1; font-size: calc(16px * var(--fs, 1)); }
.prep-card:active { transform: scale(.98); }
.prep-fields { margin: 14px 0 6px; }
.prep-field { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ECEEF1; }
.prep-field small, .prep-field b { display: block; }
.prep-field b { font-size: calc(15px * var(--fs, 1)); word-break: break-word; }
.prep-people { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.prep-done-link { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 8px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: calc(13px * var(--fs, 1)); color: var(--sub); cursor: pointer; }
.done-row { width: 100%; border: 0; border-bottom: 1px solid #ECEEF1; background: none; font: inherit; color: var(--ink); text-align: left; min-height: 48px; cursor: pointer; }
/* 입국 QR: 여행 홈 카드(인터넷이 없어도 폰 사본으로) + 흰 바탕 크게 보기(공항 기계가 읽기 쉽게) */
.qr-card { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 0; border: 2px solid var(--teal); background: var(--teal-soft); }
.qr-main { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 16px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.qr-main:active { transform: scale(.98); }
.qr-main b { display: block; font-size: calc(16px * var(--fs, 1)); }
.qr-main small { display: block; color: var(--teal-deep); font-size: calc(13px * var(--fs, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-ic { font-size: calc(24px * var(--fs, 1)); }
.entry-pick { margin-top: 6px; }
.viewer.light { background: var(--card); color: var(--ink); }
.viewer.light .v-btn { background: var(--on-light-btn); color: var(--ink); }
.viewer.light .v-nav { background: var(--on-light-nav); color: var(--ink); }
.qr-card .btn, .qr-row .btn { min-height: 44px; } /* 관리·지우기·거두기: 손가락 크기 */
.viewer.light .v-hint { color: var(--sub); }

/* 코스 장소 창: 여기서 찍은 사진 */
.pl-photos { margin: 14px 0 4px; }
.pl-photos .row { align-items: center; gap: 8px; min-height: 36px; }
.pl-ph-strip { display: flex; gap: 6px; overflow-x: auto; margin-top: 6px; -webkit-overflow-scrolling: touch; }
.pl-ph-strip:empty { display: none; }
.pl-ph { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: #ECEEF1; position: relative; }
.pl-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-ph.video::after { content: '▶'; position: absolute; right: 5px; bottom: 3px; color: #fff; font-size: calc(12px * var(--fs, 1)); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* 코스 장소 창: 앨범에서 고르기 */
.ph-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; max-height: 55vh; overflow-y: auto; margin: 10px 0 14px; }
.ph-pick-i { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--line); cursor: pointer; }
.ph-pick-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-pick-i::after { content: ''; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); box-sizing: border-box; color: #fff; font-size: 13px; line-height: 18px; text-align: center; }
.ph-pick-i.on::after { content: '✓'; background: var(--teal); }
.ph-pick-i.on img { opacity: .8; }
.ph-pick-i.taken img { opacity: .35; }
.ph-pick-i.taken::after { display: none; }
.ph-pick-at { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 5px; background: rgba(0,0,0,.55); color: #fff; font-size: calc(11px * var(--fs, 1)); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ph-pick-i.video::before { content: '▶'; position: absolute; left: 6px; bottom: 4px; color: #fff; font-size: calc(12px * var(--fs, 1)); text-shadow: 0 1px 3px rgba(0,0,0,.6); z-index: 1; }
/* 코스 목록: 꾹 눌러 끌어서 순서 바꾸기 */
.timeline .pl-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.timeline.drag-on .pl-item { transition: transform .15s ease; }
.timeline.drag-on .pl-item.dragging { transition: none; z-index: 5; opacity: 1; box-shadow: 0 10px 28px rgba(0,0,0,.2), 0 0 0 2.5px var(--teal); }

/* 챙길 것: 여행 홈 왼쪽 가장자리 여행 가방 + 왼쪽에서 나오는 서랍 */
.toss-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.toss-row .toss-card { flex: 1; min-width: 0; margin-bottom: 0; gap: 10px; padding: 12px 12px 12px 10px; }
.toss-row .toss-card b { font-size: calc(17px * var(--fs, 1)); }
.toss-row .toss-anim { width: 56px; }
.pack-pull { flex: none; width: 74px; border: 2px solid var(--peach-soft); cursor: pointer; background: var(--card); border-radius: var(--radius); padding: 8px 4px;
  box-shadow: var(--shadow); display: grid; place-content: center; justify-items: center; gap: 2px; font: inherit; color: var(--ink); }
.pack-pull:active { transform: scale(.96); }
.pack-pull img { width: 40px; height: 40px; display: block; animation: peek 2.4s ease-in-out 1s 2; transform-origin: 50% 100%; }
.pack-pull b { font-size: calc(12px * var(--fs, 1)); color: var(--peach-deep); font-variant-numeric: tabular-nums; }
.pack-pull span { font-size: calc(12px * var(--fs, 1)); font-weight: 700; color: var(--ink); line-height: 1.1; }
@keyframes peek { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.sheet-bg.left { justify-content: flex-start; align-items: stretch; }
.sheet-bg.left .sheet { width: 90%; max-width: 420px; max-height: none; height: 100%; border-radius: 0 24px 24px 0; background: var(--bg); position: relative;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(22px + var(--safe-b)) calc(14px + env(safe-area-inset-left, 0px)); animation: fromLeft .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes fromLeft { from { transform: translateX(-100%); } }
.sheet-bg.left .sheet-x { position: static; width: auto; height: auto; padding: 4px 8px; font-size: calc(13px * var(--fs, 1)); background: none; margin-bottom: 4px; }
.pack { display: grid; gap: 12px; }
.pack-h { margin: 0 !important; display: flex; align-items: center; gap: 8px; font-size: calc(18px * var(--fs, 1)); }
.pack-h img { width: 38px; height: 38px; }
.pack-h small { margin-left: auto; font-weight: 400; color: var(--faint); font-size: calc(13px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.pack-sub { margin: -10px 0 0; color: var(--sub); font-size: calc(13px * var(--fs, 1)); }
.pack .lay { background: #F6EFE6 radial-gradient(rgba(29, 42, 51, .05) 1px, transparent 1px) 0 0/14px 14px; border-radius: 16px; padding: 14px 6px; display: grid; gap: 12px 2px; grid-template-columns: repeat(4, 1fr); }
.pack .it { border: 0; background: none; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 2px; font: inherit; color: inherit; }
.pack .pic { position: relative; width: 66px; height: 66px; transition: transform .2s, opacity .2s, filter .2s; }
.pack .pic img, .pack .jr .e img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pack .it:nth-child(odd) .pic { transform: rotate(-4deg); }
.pack .it:nth-child(3n) .pic { transform: rotate(3deg); }
.pack .it:nth-child(4n) .pic { transform: rotate(-1deg); }
.pack .it span { font-size: calc(13px * var(--fs, 1)); text-align: center; line-height: 1.3; }
.pack .it.must span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--peach); margin-right: 4px; vertical-align: middle; }
.pack .it.done .pic { transform: scale(.86); opacity: .45; filter: grayscale(1); }
.pack .it.done span { color: var(--faint); text-decoration: line-through; }
.pack .it.done .pic::after { content: "✓"; position: absolute; right: -4px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; display: grid; place-items: center; }
.pack .jbtn { border: 1px solid #D9D2C5; background: #FFFDF7; border-radius: 12px; padding: 10px 14px; font: inherit; font-size: calc(14px * var(--fs, 1)); cursor: pointer; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--ink); }
.pack .jbtn img { width: 32px; height: 32px; }
.pack .jbtn small { display: block; color: var(--sub); font-size: calc(12px * var(--fs, 1)); }
.rep { background: #FFFDF7; border: 1px solid #D9D2C5; border-radius: 4px; padding: 16px 12px 18px; font-family: "Nanum Myeongjo", "Noto Serif KR", "Batang", serif; position: relative; }
.rep-top { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.rep h3 { margin: 0 !important; font-size: calc(19px * var(--fs, 1)); letter-spacing: .12em; font-weight: 800; }
.rep .no { font-family: inherit; font-size: calc(11px * var(--fs, 1)); color: var(--sub); }
.rep .sign { display: grid; grid-template-columns: repeat(3, 50px); border: 1px solid var(--ink); font-size: calc(11px * var(--fs, 1)); text-align: center; }
.rep .sign div + div { border-left: 1px solid var(--ink); }
.rep .sign b { display: block; border-bottom: 1px solid var(--ink); font-weight: 600; background: #F3EEE3; }
.rep .sign i { display: grid; place-items: center; height: 42px; font-style: normal; }
.rep .seal { width: 36px; height: 36px; border: 2px solid #D2412F; border-radius: 50%; color: #D2412F; font-weight: 800; font-size: 11px; display: grid; place-items: center; transform: rotate(-12deg); opacity: .85; animation: stamp .25s ease-out; }
@keyframes stamp { from { transform: rotate(-12deg) scale(1.8); opacity: 0; } }
.rep-meta { font-size: calc(12px * var(--fs, 1)); color: var(--sub); margin: 10px 0 8px; display: grid; gap: 1px; }
.rep-meta b { color: var(--ink); font-weight: 600; }
.rep-bar { height: 8px; background: #EDE6D8; border-radius: 4px; overflow: hidden; margin: 4px 0 10px; }
.rep-bar i { display: block; height: 100%; background: var(--teal); transition: width .3s; }
.rep .jlist { display: grid; border-top: 2px solid var(--ink); }
.rep .jr { display: grid; grid-template-columns: 20px 34px 1fr 22px; gap: 8px; align-items: center; padding: 6px 2px; border: 0; border-bottom: 1px solid #D9D2C5; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%; }
.rep .jr .n { font-size: calc(11px * var(--fs, 1)); color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.rep .jr .e { width: 34px; height: 34px; }
.rep .jr .t { font-family: "Pretendard", -apple-system, "SamsungOne", "Noto Sans KR", sans-serif; font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.rep .jr .t small { display: block; font-family: "Nanum Myeongjo", "Noto Serif KR", "Batang", serif; font-weight: 400; color: var(--sub); font-size: calc(12px * var(--fs, 1)); line-height: 1.4; }
.rep .jr .ck { width: 20px; height: 20px; border: 1.5px solid var(--sub); border-radius: 3px; display: grid; place-items: center; color: var(--teal-deep); font-weight: 800; }
.rep .jr.done .t { color: var(--faint); }
.rep .jr.done .e { filter: grayscale(1); opacity: .5; }
.rep-tip { font-size: calc(12px * var(--fs, 1)); color: var(--sub); background: #F6EFE6; border-radius: 8px; padding: 7px 10px; margin: 10px 0 0; }
.rep-end { margin: 12px 0 0; font-size: calc(14px * var(--fs, 1)); }
.rep-end b { font-size: calc(12px * var(--fs, 1)); color: var(--sub); font-weight: 600; margin-right: 6px; }
.rep-fine { font-size: calc(11px * var(--fs, 1)); color: var(--faint); margin: 8px 0 0; }
.big-seal { position: absolute; right: 16px; bottom: 34px; width: 90px; height: 90px; border: 3px double #D2412F; border-radius: 50%; color: #D2412F; display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 15px; line-height: 1.15; transform: rotate(-14deg); opacity: .8; pointer-events: none; animation: stamp .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .pack-pull img, .rep .seal, .big-seal, .sheet-bg.left .sheet { animation: none; } .pack .pic, .rep-bar i { transition: none; } }

/* 이모지 대신 그린 그림(js/emo.js) */
img.emo { display: inline-block; width: 2em; height: 2em; margin: -.35em .05em; vertical-align: -.6em; object-fit: contain; pointer-events: none; }
.toss-anim img.emo { width: 1em; height: 1em; vertical-align: 0; }
.fs-seg { margin: 10px 0 0; }
/* 사진 올리는 줄: 아직 안 올라간 사진 미리보기(기다림은 흐리게 깜빡, 올리는 중은 동그라미가 차오름) */
.ph-q { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; }
.ph-q:empty { display: none; }
.q-it { position: relative; flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--peach-soft); }
.q-it img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-it.wait { animation: q-blink 1.4s ease-in-out infinite; }
.q-it.wait img { opacity: .5; }
.q-it.work::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.q-it .q-ring { display: none; }
.q-it.work .q-ring { display: block; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(#fff calc(var(--p, 0) * 1turn), rgba(255,255,255,.35) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 64%); mask: radial-gradient(farthest-side, transparent 62%, #000 64%); }
.q-it.work.prep .q-ring { background: conic-gradient(#fff .3turn, rgba(255,255,255,.35) 0); animation: q-spin .9s linear infinite; }
.q-it.wifi img { opacity: .5; }
.q-it.fail { box-shadow: inset 0 0 0 2px var(--danger); }
.q-it.fail img { opacity: .5; }
.q-it .q-v { position: absolute; left: 5px; bottom: 3px; color: #fff; font-size: 11px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.q-more { flex: none; align-self: center; padding: 0 4px; font-weight: 700; color: var(--sub); font-size: calc(13px * var(--fs, 1)); }
@keyframes q-blink { 50% { opacity: .55; } }
@keyframes q-spin { to { transform: rotate(1turn); } }
/* 새로 올라온 사진은 살짝 커지며 나타남 */
.ph-cell.pop { animation: ph-pop .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes ph-pop { from { opacity: 0; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .q-it.wait, .q-it.work.prep .q-ring, .ph-cell.pop { animation: none; } }
html.calm .q-it.wait, html.calm .q-it.work.prep .q-ring, html.calm .ph-cell.pop { animation: none; }

/* 우리의 그림일기(책): A5 한 쪽 = .bk-page, 안의 크기는 쪽 너비 기준(cqw) — 화면에서도 인쇄에서도 같은 모양.
   글자 4종(--bk-xl 표지·쪽 제목, -l 제목·이름, -m 본문·상 이름, -s 보조), 선 대신 간격과 면. 쪽 420px에서 l 23 · m 19 · s 17px */
.bk { --bk-paper: #FFFDF7; --bk-cream: #FFF4D6; --bk-ink: #2B2622; --bk-sub: #6B625A; --bk-grid: #EBC9C2; --bk-art: #F3EBDD;
  --bk-ring: var(--peach-deep); --bk-award: #C8372D; --bk-award-bg: #FBE3D6; --bk-tape1: rgba(246,199,68,.75); --bk-tape2: rgba(127,196,240,.75);
  --bk-shadow: 0 .5cqw 2cqw rgba(43,38,34,.18); --bk-page-shadow: 0 2px 10px rgba(43,38,34,.15); --bk-photo: var(--card); --bk-r-s: 2.9cqw; --bk-r-l: 3.8cqw;
  --bk-xl: 11cqw; --bk-l: 5.5cqw; --bk-m: 4.5cqw; --bk-s: 4cqw; }
.bk-bar { margin: 0 0 14px; text-align: center; }
.bk-bar p { margin: 6px 0 0; }
.bk-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: 24px; }
.bk-spread { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; }
.bk-page { width: min(100%, 420px); aspect-ratio: 148 / 210; container-type: inline-size; background: var(--bk-paper); box-shadow: var(--bk-page-shadow); overflow: hidden; color: var(--bk-ink); font-family: 'Gaegu', 'Noto Sans KR', sans-serif; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bk-in { box-sizing: border-box; height: 100%; padding: 6cqw; display: flex; flex-direction: column; gap: 2.9cqw; position: relative; }
.bk-in img { display: block; }
.bk-h { text-align: center; font-size: var(--bk-xl); line-height: 1.1; }
.bk-sub { text-align: center; font-size: var(--bk-m); font-weight: 400; line-height: 1.35; color: var(--bk-sub); }
.bk-foot { margin-top: auto; text-align: center; font-size: var(--bk-s); font-weight: 400; color: var(--bk-sub); display: flex; align-items: center; justify-content: center; gap: 3cqw; }
.bk-names { text-align: center; font-size: var(--bk-l); line-height: 1.35; }
.bk-names span { white-space: nowrap; }
.bk-names span:not(:last-child)::after { content: ' ·'; } /* 점은 앞 이름에 붙여 줄 끝에 남게(줄 첫머리 점 방지) */
/* 표지 */
.bk-cover { background: var(--bk-cream); }
.bk-cover .bk-in { align-items: center; gap: 3.8cqw; }
.bk-title { width: 100%; box-sizing: border-box; padding: 3cqw 0 3.8cqw; background: var(--bk-paper); border-radius: var(--bk-r-l); text-align: center; font-size: var(--bk-xl); letter-spacing: 1.4cqw; line-height: 1; }
.bk-title small { display: block; font-size: var(--bk-l); letter-spacing: 0; margin-bottom: 1.4cqw; }
.bk-cpics { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.9cqw; }
.bk-cpics span { width: calc((100% - 5.8cqw) / 3); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--bk-paper); border: .6cqw dashed var(--bk-ring); }
.bk-cpics img { width: 100%; height: 100%; object-fit: cover; }
/* 하루 왼쪽: 날짜 · 그림(4:3, 틀 없이) · 제목 · 원고지 */
.bk-dh { display: flex; justify-content: space-between; font-size: var(--bk-s); font-weight: 400; color: var(--bk-sub); }
.bk-art { width: 100%; aspect-ratio: 4 / 3; flex: 0 1 auto; min-height: 0; } /* 일기가 길면 칸이 줄고 그림은 잘리지 않게 작아짐 */
.bk-art img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--bk-r-s); }
.bk-ttl { margin-top: 1cqw; display: flex; align-items: baseline; gap: 2cqw; font-size: var(--bk-l); line-height: 1.2; }
.bk-ttl small { flex: none; font-size: var(--bk-s); font-weight: 400; color: var(--bk-sub); }
.bk-left .st-grid { margin: 0; border-color: var(--bk-grid); }
.bk-left .st-grid span { border-color: var(--bk-grid); font-size: 4.6cqw; color: var(--bk-ink); }
/* 하루 오른쪽: 폴라로이드 2장 + 오늘의 상(상자 없이 줄로) */
.bk-pols { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 2cqw; }
.bk-pol { margin: 0; width: 42cqw; box-sizing: border-box; padding: 2.4cqw 2.4cqw 1.9cqw; background: var(--bk-photo); box-shadow: var(--bk-shadow); position: relative; rotate: -3deg; }
.bk-pol::before { content: ''; position: absolute; top: -2.6cqw; left: 50%; width: 15cqw; height: 5cqw; margin-left: -7.5cqw; background: var(--bk-tape1); rotate: 3deg; }
.bk-pol1 { rotate: 3deg; margin-top: 7.6cqw; }
.bk-pol1::before { background: var(--bk-tape2); rotate: -4deg; }
.bk-pol img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.bk-pol figcaption { padding-top: 1.4cqw; text-align: center; font-size: var(--bk-s); font-weight: 400; line-height: 1.2; min-height: 4.8cqw; color: var(--bk-sub); }
.bk-aws { margin-top: auto; display: flex; flex-direction: column; gap: 3.8cqw; }
.bk-aws.many { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.9cqw; }
.bk-aws-h { font-size: var(--bk-s); color: var(--bk-award); }
.bk-aws.many .bk-aws-h { grid-column: 1 / -1; }
.bk-aw { display: flex; align-items: center; gap: 2.9cqw; }
.bk-aw i, .bk-ac i { flex: none; width: 12.4cqw; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--bk-award-bg); display: grid; place-items: center; font-style: normal; font-size: var(--bk-l); }
.bk-aws.many .bk-aw i { width: 10.5cqw; }
.bk-aw i img, .bk-ac i img { width: 100%; height: 100%; object-fit: cover; }
.bk-aw > div { min-width: 0; }
.bk-aw b { display: block; font-size: var(--bk-m); line-height: 1.2; }
.bk-aws.many .bk-aw b { font-size: var(--bk-s); }
.bk-aw small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--bk-s); font-weight: 400; line-height: 1.25; color: var(--bk-sub); }
/* 상장 모음: 상자 없이 그림 · 이름 · 날짜, 한 쪽 9개 */
.bk-agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.8cqw 2.9cqw; margin-top: 1cqw; }
.bk-ac { display: flex; flex-direction: column; align-items: center; gap: 1cqw; text-align: center; }
.bk-ac i { width: 16cqw; }
.bk-ac b { font-size: var(--bk-s); line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; } /* 한 줄 이름도 두 줄 자리 → 날짜 높이 맞춤 */
.bk-ac small { font-size: var(--bk-s); font-weight: 400; line-height: 1.2; color: var(--bk-sub); }
/* 마지막 쪽 */
.bk-end { background: var(--bk-cream); }
.bk-end .bk-in { align-items: center; gap: 3.8cqw; }
.bk-big { width: 80cqw; rotate: -2deg; }
.bk-big img { aspect-ratio: 4 / 3; }
.bk-big figcaption { font-size: var(--bk-s); }
.bk-seal { display: inline-grid; place-items: center; width: 15cqw; height: 15cqw; border: .6cqw solid var(--bk-award); border-radius: 50%; color: var(--bk-award); font-size: var(--bk-s); font-weight: 700; rotate: -10deg; }
@media print {
  @page { size: A5; margin: 0; }
  body.bk-on > *:not(#app), body.bk-on #app > header, body.bk-on #app > nav, body.bk-on .install-bar, body.bk-on .bk-bar { display: none !important; }
  body.bk-on, body.bk-on #app, body.bk-on main { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body.bk-on .bk-pages, body.bk-on .bk-spread { display: block; gap: 0; padding: 0; }
  body.bk-on .bk-page { width: 148mm; height: 210mm; aspect-ratio: auto; box-shadow: none; break-after: page; }
  body.bk-on .bk-end { break-after: auto; }
}

/* 목록 아래 [장소 추가] [후보에서 정하기] */
.add-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.add-row .btn { flex: 1 1 140px; }
.add-n { margin-left: 2px; color: var(--teal); }
/* 후보에서 정하기 창 */
.cand-list { max-height: 55vh; overflow-y: auto; margin: 8px 0 4px; }
.cand-i { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 4px; border-radius: 12px; cursor: pointer; }
.cand-i + .cand-i { margin-top: 4px; }
.cand-i:has(input:checked) { background: var(--teal-soft); }
.cand-i input { width: 22px; height: 22px; flex: none; accent-color: var(--teal); }
.cand-i .kind { font-size: calc(20px * var(--fs, 1)); flex: none; }
.cand-i .grow { min-width: 0; display: flex; flex-direction: column; }
.cand-i b, .cand-i small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand-foot { position: sticky; bottom: 0; padding: 10px 0 4px; background: var(--card); }
/* 장소 창: 후보 → 날짜에 넣기(고르는 칸은 버튼 위에 투명하게 덮음) */
.to-day { position: relative; }
.to-day select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; font-size: 16px; }
/* 장소 창 맨 아래 넣은 사람 */
.pl-who { margin: 12px 0 0; }
/* 장소 추가 창 맨 위 [후보에서 정하기] — 아래 구글맵 상자와 띄움 */
.from-cand { margin-bottom: 16px; }
/* PC에서 파일을 끌어 왔을 때 화면 전체 막 */
.drop-mask { position: fixed; inset: 0; z-index: 70; background: rgba(20, 28, 34, .38); display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; animation: fade .15s; }
.drop-box { background: var(--card); color: var(--teal-deep); font-weight: 700; padding: 24px 32px; border-radius: var(--radius); border: 2px dashed var(--teal); box-shadow: var(--shadow); text-align: center; }