/* ── 2027.07 가족여행 · 모바일 우선 ────────────────────── */

:root {
  --plum:       #6B5EA8;
  --paper:      #E4EBE4;
  --paper-2:    #D6E0D6;
  --surface:    #FAFCF9;
  --surface-2:  #EFF4EE;
  --ink:        #14261F;
  --ink-2:      #3E564A;
  --ink-3:      #708779;
  --line:       #C3D1C3;
  --line-soft:  #D9E2D8;

  --tuff:       #BC6538;
  --glacier:    #1F6B7A;
  --meadow:     #4F7F3E;
  --brick:      #A8422A;
  --gold:       #A8801C;
  --sky:        #3E7FA6;

  --contour:    rgba(20, 38, 31, .045);
  --shadow:     0 1px 2px rgba(20,38,31,.05), 0 8px 22px -14px rgba(20,38,31,.32);
  --radius:     18px;
  --nav:        62px;

  --f-disp: "Do Hyeon", "IBM Plex Sans KR", system-ui, sans-serif;
  --f-body: "IBM Plex Sans KR", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D1513; --paper-2: #090F0E; --surface: #16211E; --surface-2: #1E2B27;
    --ink: #E3EBE3; --ink-2: #AEC1B7; --ink-3: #7D9289; --line: #2C3B36; --line-soft: #23302C;
    --tuff: #E29663; --glacier: #5CB8C8; --meadow: #8CC276; --brick: #E37F62; --gold: #D9B85A; --sky: #7FB6D6;
    --contour: rgba(227,235,227,.05);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --paper: #0D1513; --paper-2: #090F0E; --surface: #16211E; --surface-2: #1E2B27;
  --ink: #E3EBE3; --ink-2: #AEC1B7; --ink-3: #7D9289; --line: #2C3B36; --line-soft: #23302C;
  --tuff: #E29663; --glacier: #5CB8C8; --meadow: #8CC276; --brick: #E37F62; --gold: #D9B85A; --sky: #7FB6D6;
  --contour: rgba(227,235,227,.05);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.8);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--paper);
  background-image:
    repeating-radial-gradient(circle at 12% 8%,  transparent 0 26px, var(--contour) 26px 27px, transparent 27px 54px),
    repeating-radial-gradient(circle at 88% 72%, transparent 0 34px, var(--contour) 34px 35px, transparent 35px 70px);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom));
}

a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; border-radius: 6px; }

/* ── 상단바 ───────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: calc(env(safe-area-inset-top) + 9px) 14px 9px;
  display: flex; align-items: center; gap: 9px;
}
.top h1 {
  font-family: var(--f-disp); font-weight: 400; font-size: 17px;
  margin: 0; letter-spacing: -.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.top .flags { font-size: 13px; flex: none; }
.dday {
  margin-left: auto; flex: none;
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 999px;
}
.dday b { color: var(--glacier); font-variant-numeric: tabular-nums; }

.shell { padding: 12px 14px 24px; max-width: 760px; margin: 0 auto; }
.panel[hidden] { display: none !important; }

h2.sec {
  font-family: var(--f-disp); font-weight: 400;
  font-size: 17px; margin: 26px 0 10px;
  display: flex; align-items: center; gap: 9px;
}
h2.sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
h2.sec:first-child { margin-top: 0; }
.note-line { font-size: 12.5px; color: var(--ink-3); margin: 0 0 12px; }

/* ── 날짜 스트립 ──────────────────────────────────────── */
.strip {
  display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.strip::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; cursor: pointer; scroll-snap-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; padding: 7px 10px 8px; min-width: 58px;
  text-align: center; transition: background .14s, border-color .14s;
}
.chip .cd { display: block; font-family: var(--f-disp); font-size: 15px; line-height: 1.1; }
.chip .cw { display: block; font-size: 10px; color: var(--ink-3); }
.chip .cbar { display: block; height: 3px; border-radius: 2px; margin-top: 5px; background: var(--line); }
.chip[data-seg="tr"]  .cbar { background: var(--tuff); }
.chip[data-seg="fr"]  .cbar { background: var(--meadow); }
.chip[data-seg="ch"]  .cbar { background: var(--glacier); }
.chip[data-seg="air"] .cbar { background: var(--sky); }
.chip[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-current="true"] .cw { color: color-mix(in srgb, var(--paper) 70%, transparent); }

/* ── 지도 스테이지 ────────────────────────────────────── */
.stage {
  position: relative; overflow: hidden;
  height: clamp(330px, 56vh, 540px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #B9D2DE; box-shadow: var(--shadow);
  touch-action: pan-y; cursor: grab; user-select: none;
}
.stage:active { cursor: grabbing; }
/* 컷신이 도는 동안에는 지도가 어차피 안 보인다.
   화면을 정사각으로 만들면 정사각 컷신이 딱 맞아서
   양옆이 잘리지도 않고 위아래 여백도 안 생긴다. */
.stage.cine {
  height: auto; aspect-ratio: 1 / 1; max-height: min(78vh, 560px);
  transition: none;
}
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-position: center;
  filter: blur(14px) saturate(1.15); transform: scale(1.08);
  opacity: 0; transition: opacity .25s;
}
.stage.loading::before { opacity: 1; }
.stage::after {
  content: "지도 불러오는 중…";
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 16; padding: 5px 13px; border-radius: 999px;
  background: rgba(255,255,255,.85); color: #2A3A34;
  font-size: 11.5px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.stage.loading::after { opacity: 1; }
.stage[data-map="airport"]::before { background-image: url("data:image/webp;base64,UklGRqAAAABXRUJQVlA4IJQAAABQBACdASogABIAPulkqU8pJSOiMBgIASAdCUAW3RU4awxIph88tMTtOg8AAPI1f9o2q2eUCY/tzxJT/1gEN27k9JufTkkOfEqd2jakVJvFsbjflq2c/A+3UCtJPAuLMwPlCnjAx8GCOA+rtt2mPJLyWKuyQMk5t5jmFhi7cCErBuvrvFDTKIQSMn1b/aCy4Xa2JAAA"); }
.stage[data-map="annecy"]::before { background-image: url("data:image/webp;base64,UklGRsQAAABXRUJQVlA4ILgAAADwBQCdASogABIAPuliqU0pJaQiMAgBIB0JbACdMoR/gN+sK9ngAAJzg0UfUy/4rKaNr7Pb+nuOQAD4YpxrkGayQa5wfecuW2App1vra1kLyFc9oKUb3OnLe5rmQH8aZq0tqpGG5GA/PDMtO9vi5I0svHdLmnfSTBKNuXqE1UD1veSgGhK2QDwrWPUiBVcWOR1B1Df5Oe+r+DBdj61ugp2Sh7bZkP5FIwlVwPJs6/k61FnS+3FIEgAA"); }
.stage[data-map="cappadocia"]::before { background-image: url("data:image/webp;base64,UklGRsAAAABXRUJQVlA4ILQAAAAQBQCdASogABIAPulkqk8pJaOiMBgIASAdCUAToN4AELhBgj8332ND+A/Xz04iQDoAAOAR7CQGOmmLEGMpmslxbr2gTv/ag12OYN8mKAY0nuDSXS5rkrRXS80q/zus9cNo88R6DuwwqayKZWLoM0JcUKaTktzVj0fVkS+jf92aPAQb1bEKUdSnDIeRD933GHb7w4gKJnTqCTp+tH1ARQzYyv850QCNRnCBeevKe+t+z3ZGAAA="); }
.stage[data-map="chamonix"]::before { background-image: url("data:image/webp;base64,UklGRsoAAABXRUJQVlA4IL4AAADQBQCdASogABIAPulgqE0pJaOiMAgBIB0JZgCdL1G4A7SlwR1bZAAkuhVQ+ZHYJmAx74SgznYAAP3V8j6Sfl9PiVMVY/bto6dhvJfPxfgJpBlRSgp9opfXng5d2sfiVpFoQ+bVqjLVCZVRrMjnECLfKlbz1OEX7Ql/GbPU5t969oto02Fg+p8uJL6rq/pkVjgOz1ivavMGY9vrnKohy0eHDGMfJLcJYDqbhMUzK+wu4vqhrxiIDdMdYa71oAAA"); }
.stage[data-map="grindelwald"]::before { background-image: url("data:image/webp;base64,UklGRsQAAABXRUJQVlA4ILgAAADwBACdASogABIAPulepU0pJSMiMAgBIB0JaACdIFzDEllL0GRg3N0zHsJRn6ZcWeAA4l0h0K+9u1acLXzsdwOFBg08YA6xuStd0/6/1XyATVPcHtBgufzg5ielXQtGWdtvNqiSAFBgmRBkEl7IqijquxbkMcXZ+/TYsZzwId/GV+EJYXCKyShNCP0r48/V8qRAjv4gOPGSFlT4W3THcSdlLwgaexAkvEwnaz5GPV9SvV6tWKxwkAAA"); }
.stage[data-map="istanbul"]::before { background-image: url("data:image/webp;base64,UklGRrgAAABXRUJQVlA4IKwAAACwBACdASogABIAPulep00pJSOiMAgBIB0JbACdMuOA/0o8AABipTfu3H3DwfIQAO1QABAduzJfDzYWjmK3dW7wLvnsX3ORy2yUCK1E12UmgNOo5xarIxhLr9anPd0VnIjhzDGnXHQWsUt5uIyfdVNwxUFBh98h/kwdx+ZRjcD0/4plgBLAWBmF9GBnzGSUu0LDzMgVg6jP91CZDr5rnaV+3QrbczXtanAP4AAA"); }
.stage[data-map="kandersteg"]::before { background-image: url("data:image/webp;base64,UklGRsYAAABXRUJQVlA4ILoAAADwBACdASogABIAPuloqk6pJiOiMBgIASAdCWwAnSEgeEYj/Ly1vk5Pj5xvbegtBVwA9nDS77UpRnQlATwl3OyJB9SK4Pb4ykgxN+w0RiIqWazxWqpwgFyEWkTuvzVgVxlreEw7SQaJTFbgE5b82yl3q6GN4l6s7Ff3F9gROsxKJlnS4OXaUTjv+JFIVw2NInTJSQ1nrQoqFoz+TYZChZyOfP7oKDgmPihQa3g6Iq9nf3mmTMfYGKETIAA="); }
.stage[data-map="montreux"]::before { background-image: url("data:image/webp;base64,UklGRrIAAABXRUJQVlA4IKYAAACQBQCdASogABIAPt1apE0opSOiMAwBEBuJbACsMzQ6SClu9LnZbLqUiKyCnNt/ZluqI4vq4AD6Ho3bYOxuCaCMDcx9IGozD10aI/k3VtaYdfD5n+/yTB4mIOdnxr2fevmTsNO0RT+1ydqmQCekfcksdB94o19vx8J+fJT2uapDJrS7t/LDRcIEbsonErsLNcfsoyMvEiUma0ey6M3e/nkIBYkIGgAA"); }
.stage[data-map="zermatt"]::before { background-image: url("data:image/webp;base64,UklGRs4AAABXRUJQVlA4IMIAAAAwBgCdASogABIAPulkqU8pJSOiMBgIASAdCWwAuzLevibzOSwkwhsAlaWaf9UoH5Q/jJT3ruee0G4IAP7F/Vj/Mqy8mCm4BFwFUazpmFN2N4F2sKPiJXZUNuYwGI1v5miMiA53Y34e2IVM/+VI0aK19dU7trtSbn1vDJ8dnKERMOYRLk8K7Eg1LQMNEoH4mXPnpC1du5ijVqXi67ZBNolEVGXtEhvEUmhTEpz8dV5FWiWM98c2NOhqdHkKtxv/mAAAAA=="); }
.stage.fit { cursor: default; }

.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; --inv: 1; }
.mapimg {
  position: absolute; left: 0; top: 0; width: 1280px; height: 716px;
  display: block; transition: opacity .3s;
}
.stage.hopping .mapimg { opacity: .18; }

.routesvg { position: absolute; left: 0; top: 0; width: 1280px; height: 716px; overflow: visible; pointer-events: none; }
.rp  { fill: none; stroke: #FFFFFF; stroke-width: 8; stroke-linecap: round; opacity: .55; }
.rp2 { fill: none; stroke: #C4442F; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 11 15; animation: dash 1.1s linear infinite; }
.rp2.fly { stroke: #2F86A6; stroke-dasharray: 3 13; stroke-width: 4.5; }
.rp2.drive { stroke: #8A6A3C; stroke-dasharray: 16 10; stroke-width: 4.5; }
@keyframes dash { to { stroke-dashoffset: -26; } }

.pins { position: absolute; left: 0; top: 0; width: 1280px; height: 716px; }
.pin {
  position: absolute; appearance: none; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; transform: translate(-50%, -50%) scale(var(--inv));
  display: block; line-height: 0; z-index: 3;
  text-decoration: none; color: inherit; -webkit-touch-callout: none;
}
.pin .dot {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF; border: 4px solid #B8482F;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  transition: transform .18s, border-color .18s;
}
.pin .plabel {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; line-height: 1.3;
  background: rgba(255,255,255,.95); color: #17251F;
  font-family: var(--f-disp); font-size: 12px;
  padding: 4px 10px 4px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.pin .pgo { color: #B8482F; margin-left: 5px; font-size: 11px; }
.pin.on .dot { border-color: #1F6B7A; }
.pin.on .plabel { opacity: .96; }
.pin.here .dot { transform: scale(1.35); border-color: #B8482F; }
.pin.here .plabel { opacity: 1; background: #17251F; color: #F4F8F4; font-size: 13px; }
.pin.here .pgo { color: #F0A57E; }
.pin:hover .plabel { opacity: 1; }

.lmwrap {
  position: absolute; z-index: 4; pointer-events: none;
  transform: translate(-50%, -100%);
  opacity: 0; transition: opacity .35s;
}
.lmwrap.on { opacity: 1; }
.lmwrap img {
  display: block; width: 132px; height: auto;
  filter: drop-shadow(0 7px 7px rgba(0,0,0,.4));
  transform-origin: 50% 100%;
}
.lmwrap.on img {
  animation: lmpop .55s cubic-bezier(.2,1.5,.4,1) both,
             lmfloat 3.6s ease-in-out .6s infinite;
}
@keyframes lmpop {
  from { transform: scale(.35) translateY(26px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes lmfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .lmwrap.on img { animation: none; } }

.crew {
  position: absolute; z-index: 5; pointer-events: none;
  filter: drop-shadow(0 8px 7px rgba(0,0,0,.4));
  transition: width .25s;
}
.say {
  position: absolute; z-index: 6; pointer-events: none;
  transform: translate(-50%, -100%) scale(var(--inv));
  transform-origin: 50% 100%;
  max-width: 230px; width: max-content;
  background: #FFFFFF; color: #17251F;
  font-size: 12.5px; line-height: 1.45; padding: 8px 12px;
  border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .3s;
}
.say.on { opacity: 1; }
.say::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); border: 7px solid transparent; border-top-color: #FFFFFF;
}

.notes { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; transition: opacity .4s; }
.stage.music .notes { opacity: 1; }
.notes span {
  position: absolute; bottom: 18%; font-size: 26px; opacity: 0;
  color: #FFE9A8; text-shadow: 0 2px 5px rgba(0,0,0,.55);
}
.stage.music .notes span { animation: notefloat 4.2s ease-in-out infinite; }
.notes span:nth-child(1) { left: 22%; animation-delay: 0s;   color: #FFD1E8; }
.notes span:nth-child(2) { left: 34%; animation-delay: .7s;  color: #B9E3FF; font-size: 32px; }
.notes span:nth-child(3) { left: 46%; animation-delay: 1.4s; color: #FFE9A8; }
.notes span:nth-child(4) { left: 58%; animation-delay: 2.1s; color: #D9C4FF; font-size: 30px; }
.notes span:nth-child(5) { left: 68%; animation-delay: 2.8s; color: #C6FFD9; }
.notes span:nth-child(6) { left: 78%; animation-delay: 3.4s; color: #FFC9A8; font-size: 28px; }
@keyframes notefloat {
  0%   { transform: translateY(0) rotate(-8deg) scale(.7); opacity: 0; }
  15%  { opacity: .95; }
  75%  { opacity: .85; }
  100% { transform: translateY(-170px) translateX(24px) rotate(14deg) scale(1.15); opacity: 0; }
}

/* ── 출국 컷신 (7/1) ─────────────────────────────────── */
.introfx {
  position: absolute; inset: 0; z-index: 24; overflow: hidden;
  background: #24405C; --idur: 6200ms;
}
.introfx .wm {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform-origin: 62% 48%;
}
.introfx.run .wm { animation: wmzoom var(--idur) ease-in-out both; }
@keyframes wmzoom {
  0%   { transform: scale(1.55); }
  100% { transform: scale(1.12); }
}
.introfx .wmarc {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.introfx.run #arcPath {
  stroke-dashoffset: 0;
  animation: arcdraw var(--idur) ease-in-out both;
}
@keyframes arcdraw {
  0%   { stroke-dasharray: 0 100; }
  12%  { stroke-dasharray: 0 100; }
  80%  { stroke-dasharray: 100 0; }
  100% { stroke-dasharray: 100 0; }
}
.wmdot {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: #FFF; border: 4px solid #C4442F; box-shadow: 0 2px 7px rgba(0,0,0,.45);
  transform: translate(-50%, -50%); opacity: 0;
}
.wmdot.from { left: 86.8%; top: 53.6%; }
.wmdot.to   { left: 32.2%; top: 47.9%; }
.introfx.run .wmdot.from { animation: pop .5s ease-out .25s both; }
.introfx.run .wmdot.to   { animation: pop .5s ease-out 4.4s both; }
@keyframes pop { from { opacity: 0; transform: translate(-50%,-50%) scale(.2); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.wmlabel {
  position: absolute; transform: translate(-50%, -180%);
  background: rgba(18,30,25,.72); color: #FFF; backdrop-filter: blur(4px);
  font-family: var(--f-disp); font-size: 12px; white-space: nowrap;
  padding: 4px 11px; border-radius: 999px; opacity: 0;
}
.wmlabel.from { left: 86.8%; top: 53.6%; }
.wmlabel.to   { left: 32.2%; top: 47.9%; }
.introfx.run .wmlabel.from { animation: fadein .5s ease-out .45s both; }
.introfx.run .wmlabel.to   { animation: fadein .5s ease-out 4.6s both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.wmplane {
  position: absolute; width: 24%; max-width: 200px;
  left: 0; top: 0; opacity: 0;
  transform: translate(-50%, -60%);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.4));
  offset-path: path("M868 300 C 700 90, 460 90, 322 268");
  offset-rotate: 0deg;
}
.introfx.run .wmplane { animation: wmfly var(--idur) cubic-bezier(.4,0,.5,1) both; }
@keyframes wmfly {
  0%   { offset-distance: 0%;   opacity: 0; }
  14%  { opacity: 1; }
  88%  { offset-distance: 100%; opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.introcap {
  position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%);
  display: grid; gap: 2px; text-align: center; white-space: nowrap;
  background: rgba(18,30,25,.66); backdrop-filter: blur(6px);
  color: #FFF; padding: 9px 20px; border-radius: 16px; opacity: 0;
}
.introcap b { font-family: var(--f-disp); font-size: 15px; font-weight: 400; }
.introcap span { font-size: 11.5px; opacity: .85; }
.introfx.run .introcap { animation: capin var(--idur) ease-out both; }
@keyframes capin {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px); }
  16%, 86% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; }
}
.introskip {
  position: absolute; right: 10px; top: 10px; z-index: 4;
  appearance: none; cursor: pointer; border: 0;
  background: rgba(255,255,255,.9); color: #2A3A34;
  border-radius: 999px; padding: 6px 14px; font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .introfx.run .wm, .introfx.run .wmplane, .introfx.run .introcap,
  .introfx.run #arcPath, .introfx.run .wmdot, .introfx.run .wmlabel { animation: none; opacity: 1; }
}

/* ── 하이라이트 컷신 (열기구 · 융프라우요흐) ─────────── */
.hlfx {
  position: absolute; inset: 0; z-index: 23; overflow: hidden;
  background: #2C2440; --hdur: 9000ms;
  /* 세로로 긴 폰에서는 16:9 그림을 통째로 넣으면 위아래가 휑하다.
     통째로 보여주되(contain) 조금 키워서 화면을 채운다. 넓은 화면은 그대로. */
  --hfit: 1.0;
}
/* 세로로 긴 폰 화면에 16:9 그림을 넣으면 양옆이 크게 잘린다.
   그림 전체는 contain 으로 다 보여주고, 남는 자리는 같은 그림을
   흐리게 깐 배경으로 메운다. 확대도 1.05 → 1.0 으로 끝나서
   마지막엔 잘린 데 없이 한 장면이 통째로 보인다. */
.hlblur {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.14);
  filter: blur(20px) saturate(.9) brightness(.66);
}
.hlbg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* 통째로 보여준다 — 사람이 잘리면 안 된다.
     stage 가 컷신 동안 정사각이 되므로 폰에서는 여백도 거의 없다. */
  object-fit: contain; transform-origin: 50% 50%;
  transform: scale(var(--hfit));
}

/* 영상이 준비되면 스틸 위에 얹어 그대로 재생한다 (스틸은 로딩 중 표지) */
.hlvid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0; transition: opacity .45s;
}
.hlvid.on { opacity: 1; }
.hlfx.run .hlbg { animation: hlpan var(--hdur) ease-out both; }
@keyframes hlpan {
  0%   { transform: scale(calc(var(--hfit) * 1.05)) translate(-1%, .6%); }
  100% { transform: scale(var(--hfit)) translate(0, 0); }
}

/* 열기구 — 아래에서 떠올라 흐르다 살며시 내려온다 */
.hlveh {
  position: absolute; left: 50%; top: 50%;
  /* 세로로 긴 열기구가 위아래로 잘리지 않게 높이 기준으로 맞춘다 */
  height: 62%; max-height: 320px; width: auto; max-width: 74%;
  transform: translate(-50%, 120%);
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.32));
  opacity: 0;
}
.hlfx.run.rise .hlveh { animation: hlrise var(--hdur) cubic-bezier(.32,.1,.35,1) both; }
@keyframes hlrise {
  0%   { transform: translate(-50%, 96%)  scale(.86); opacity: 0; }
  12%  { opacity: 1; }
  40%  { transform: translate(-56%, -48%) scale(1);   opacity: 1; }
  66%  { transform: translate(-44%, -50%) scale(1.01);opacity: 1; }
  88%  { transform: translate(-50%, -24%) scale(.98); opacity: 1; }
  100% { transform: translate(-50%, 52%)  scale(.92); opacity: 0; }
}
/* 열차·곤돌라형 — 옆으로 지나간다 */
.hlfx.glide .hlveh { height: auto; width: 34%; max-width: 260px; }
.hlfx.run.glide .hlveh { animation: hlglide var(--hdur) ease-in-out both; }

/* 배경 자체가 한 장면인 하이라이트 — 기구 레이어 없이 천천히 들어간다 */
.hlfx.run.scene .hlbg { animation: hlzoom var(--hdur) ease-out both; }
  100% { transform: scale(var(--hfit)); }
}
@keyframes hlzoom {
  0%   { transform: scale(calc(var(--hfit) * 1.07)); }
  100% { transform: scale(var(--hfit)); }
}
.hlfx.run.sweep .hlbg { animation: hlsweep var(--hdur) ease-in-out both; }
@keyframes hlsweep {
  0%   { transform: scale(calc(var(--hfit) * 1.08)) translate(-2.5%, .5%); }
  100% { transform: scale(var(--hfit)) translate(0, 0); }
}
@keyframes hlglide {
  0%   { transform: translate(-190%, -50%) scale(.9); opacity: 0; }
  14%  { opacity: 1; }
  50%  { transform: translate(-50%, -56%) scale(1); }
  86%  { opacity: 1; }
  100% { transform: translate(100%, -50%) scale(.92); opacity: 0; }
}

.hlcap {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  display: grid; gap: 3px; text-align: center; white-space: nowrap;
  background: rgba(18,14,28,.62); backdrop-filter: blur(7px);
  color: #FFF; padding: 10px 22px; border-radius: 16px; opacity: 0;
}
.hlcap b { font-family: var(--f-disp); font-size: 16px; font-weight: 400; }
.hlcap span { font-size: 11.5px; opacity: .88; }
.hlfx.run .hlcap { animation: capin var(--hdur) ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .hlfx.run .hlbg, .hlfx.run .hlveh, .hlfx.run .hlcap { animation: none; opacity: 1; }
  .hlfx.run .hlbg { transform: scale(var(--hfit)); }
}

/* ── 지역 이동 컷신 ──────────────────────────────────── */
.hopfx { position: absolute; inset: 0; z-index: 20; overflow: hidden; --dur: 2400ms; }
.hoplayer { position: absolute; inset: -10%; }

/* 하늘 */
.hopfx.air .hoplayer.l1 { background: linear-gradient(#5FA8D3 0%, #93C8E6 55%, #CBE6F2 100%); }
.hopfx.air .hoplayer.l2 {
  background-image:
    radial-gradient(closest-side, #fff 92%, transparent 96%),
    radial-gradient(closest-side, #fff 92%, transparent 96%),
    radial-gradient(closest-side, #F2F9FC 92%, transparent 96%),
    radial-gradient(closest-side, #fff 92%, transparent 96%);
  background-size: 190px 62px, 130px 44px, 240px 74px, 160px 50px;
  background-position: 5% 22%, 60% 12%, 30% 68%, 85% 52%;
  background-repeat: no-repeat;
  opacity: .92;
}
.hopfx.air.run .hoplayer.l2 { animation: hopclouds var(--dur) linear both; }
@keyframes hopclouds { from { transform: translateX(30%); } to { transform: translateX(-45%); } }

/* 도로 */
.hopfx.road .hoplayer.l1 { background: linear-gradient(#A9CFE0 0%, #CFE4EA 42%, #8C9AA2 42%, #6E7B84 100%); }
.hopfx.road .hoplayer.l2 {
  background-image: repeating-linear-gradient(90deg, #F2E9D2 0 44px, transparent 44px 108px);
  background-size: 108px 7px; background-repeat: repeat-x; background-position: 0 72%;
}
.hopfx.road.run .hoplayer.l2 { animation: hoproad var(--dur) linear infinite; }
@keyframes hoproad { from { background-position-x: 0; } to { background-position-x: -432px; } }

/* 레일 */
.hopfx.rail .hoplayer.l1 { background: linear-gradient(#9FC7DC 0%, #C9E2EA 46%, #7E8F7A 46%, #5E6E5C 100%); }
.hopfx.rail .hoplayer.l2 {
  background-image: repeating-linear-gradient(90deg, #6B5540 0 10px, transparent 10px 38px);
  background-size: 38px 10px; background-repeat: repeat-x; background-position: 0 76%;
}
.hopfx.rail.run .hoplayer.l2 { animation: hoprail var(--dur) linear infinite; }
@keyframes hoprail { from { background-position-x: 0; } to { background-position-x: -304px; } }

.hopveh {
  position: absolute; top: 46%; left: 50%; width: 42%; max-width: 260px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.35));
  opacity: 0;
}
.hopfx.run .hopveh { animation: hopfly var(--dur) cubic-bezier(.3,0,.7,1) both; }
@keyframes hopfly {
  0%   { transform: translate(-160%, -50%) rotate(-3deg); opacity: 0; }
  18%  { opacity: 1; }
  50%  { transform: translate(-50%, -54%) rotate(0deg); }
  82%  { opacity: 1; }
  100% { transform: translate(180%, -50%) rotate(2deg); opacity: 0; }
}
.hopfx.road.run .hopveh, .hopfx.rail.run .hopveh { animation-name: hopdrive; }
@keyframes hopdrive {
  0%   { transform: translate(-150%, -46%); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translate(-50%, -48%); }
  85%  { opacity: 1; }
  100% { transform: translate(170%, -46%); opacity: 0; }
}

.hoptxt {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  background: rgba(18,30,25,.62); backdrop-filter: blur(6px);
  color: #FFF; font-family: var(--f-disp); font-size: 14px;
  padding: 7px 16px; border-radius: 999px; opacity: 0;
}
.hoptxt i { font-style: normal; opacity: .7; }
.hopfx.run .hoptxt { animation: hoptxt var(--dur) ease-out both; }
@keyframes hoptxt {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  22%, 78% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hopfx.run .hopveh, .hopfx.run .hoptxt, .hopfx.run .hoplayer.l2 { animation: none; opacity: 1; }
}

.mapname {
  position: absolute; left: 10px; top: 10px; z-index: 8;
  font-family: var(--f-disp); font-size: 12.5px; letter-spacing: .06em;
  color: #FFFFFF; background: rgba(18,30,25,.6); backdrop-filter: blur(6px);
  padding: 5px 12px; border-radius: 999px; pointer-events: none;
}
.actbadge {
  position: absolute; right: 10px; top: 10px; z-index: 8;
  font-size: 11px; letter-spacing: .08em;
  color: #17251F; background: rgba(255,255,255,.88);
  padding: 5px 11px; border-radius: 999px; pointer-events: none;
  opacity: 0; transition: opacity .25s;
}
.actbadge.on { opacity: 1; }

.stage-hint {
  position: absolute; left: 10px; bottom: 10px; z-index: 8;
  font-size: 10.5px; color: #FFFFFF;
  background: rgba(18,30,25,.55); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 4px 10px; pointer-events: none;
  transition: opacity .4s;
}
.stage-hint.gone { opacity: 0; }

.wctl { display: flex; gap: 7px; align-items: center; margin: 10px 0 4px; flex-wrap: wrap; }
.wbtn {
  appearance: none; cursor: pointer; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font-size: 13px;
  min-height: 38px; display: inline-flex; align-items: center; gap: 6px;
  transition: background .14s, border-color .14s;
}
.wbtn:active { background: var(--surface-2); }
.wbtn.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wbtn.done { background: var(--brick); border-color: var(--brick); color: #FFF; }
.wbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── 하루 카드 ────────────────────────────────────────── */
.day {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  margin-top: 14px;
}
.day[data-seg="tr"]  { --segc: var(--tuff); }
.day[data-seg="fr"]  { --segc: var(--meadow); }
.day[data-seg="ch"]  { --segc: var(--glacier); }
.day[data-seg="air"] { --segc: var(--sky); }

.day-head {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 14px 15px 12px; border-bottom: 1px solid var(--line-soft);
  border-left: 4px solid var(--segc);
}
.day-date { font-family: var(--f-disp); font-size: 24px; line-height: 1; color: var(--segc); flex: none; }
.day-date small { display: block; font-size: 10.5px; color: var(--ink-3); letter-spacing: .1em; margin-top: 4px; }
.day-title { flex: 1 1 180px; min-width: 0; }
.day-title h3 { font-family: var(--f-disp); font-weight: 400; font-size: 20px; margin: 0 0 3px; letter-spacing: -.01em; }
.day-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-2); }
.day-meta span::before { content: attr(data-l); color: var(--ink-3); margin-right: 6px; font-size: 10.5px; }

.pill { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.pill.key { color: var(--brick); }
.pill.vip { color: var(--gold); font-family: var(--f-mono); }

.alert {
  display: block; margin: 0; padding: 9px 15px;
  font-size: 12.5px; border-bottom: 1px solid var(--line-soft);
}
.alert.todo { background: color-mix(in srgb, var(--brick) 9%, var(--surface)); color: var(--brick); }
.alert.warn { background: color-mix(in srgb, var(--gold) 12%, var(--surface)); color: var(--gold); }
.alert b { font-weight: 600; margin-right: 6px; }

.day-body { padding: 14px 15px 16px; display: grid; gap: 18px; }
.blk-label { font-size: 10px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 8px; }

.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line-soft); }
.tl li:first-child { border-top: 0; padding-top: 0; }
.tl .t { font-family: var(--f-mono); font-size: 11px; color: var(--segc); padding-top: 2px; }
.tl .l { font-size: 13.5px; }
.tl .n { font-size: 12px; color: var(--ink-3); }

.maps { display: flex; flex-wrap: wrap; gap: 6px; }
.mapchip {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 11px 6px 9px; font-size: 12.5px; min-height: 34px;
}
.mapchip:active { background: var(--surface); }
.mapchip .mk { width: 12px; height: 12px; flex: none; color: var(--segc, var(--glacier)); }
.mapchip .tg { font-size: 9.5px; color: var(--ink-3); border-left: 1px solid var(--line); padding-left: 6px; }

.memo { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.memo li { font-size: 12px; color: var(--ink-2); padding-left: 13px; position: relative; }
.memo li::before { content: "—"; position: absolute; left: 0; color: var(--ink-3); }

/* ── A/B 토글 ─────────────────────────────────────────── */
.abrow {
  display: grid; gap: 9px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
}
.abrow .lab { font-family: var(--f-disp); font-size: 14px; }
.abrow .desc { font-size: 12px; color: var(--ink-3); }
.seg-toggle { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg-toggle button {
  flex: 1; appearance: none; background: none; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 999px; font-size: 13px; color: var(--ink-3);
  transition: background .15s, color .15s;
}
.seg-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ── 문서 ─────────────────────────────────────────────── */
.doc-grid { display: grid; gap: 12px; }
.doc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 15px; display: flex; flex-direction: column; gap: 10px;
}
.doc-top { display: flex; align-items: flex-start; gap: 9px; }
.doc-top h3 { font-family: var(--f-disp); font-weight: 400; font-size: 15.5px; margin: 0; flex: 1; }
.doc-cat { font-size: 9.5px; letter-spacing: .1em; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; margin-top: 3px; }
.st { font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st.ok { color: var(--meadow); } .st.wait { color: var(--gold); }
.doc-lines { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); display: grid; gap: 3px; }
.codes { display: grid; gap: 5px; }
.code-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 9px; padding: 6px 7px 6px 10px;
}
.code-row .k { font-size: 10.5px; color: var(--ink-3); flex: none; }
.code-row .v { font-family: var(--f-mono); font-size: 12.5px; flex: 1; word-break: break-all; }
.copy {
  appearance: none; background: none; border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 10px; font-size: 11px; cursor: pointer;
  color: var(--ink-3); min-height: 30px; flex: none;
}
.copy.done { color: var(--meadow); border-color: var(--meadow); }
.money { font-family: var(--f-mono); font-size: 12px; background: color-mix(in srgb, var(--glacier) 9%, transparent); border-radius: 8px; padding: 7px 10px; }
.doclinks { display: grid; gap: 6px; }
.doclink {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px;
  font-size: 12.5px; min-height: 42px;
}
.doclink:active { background: var(--surface-2); }
.doclink svg { flex: none; color: var(--glacier); }
.doclink.flat { cursor: default; background: var(--surface-2); }
.doclink.warn, .code-row.warn {
  border-color: var(--brick);
  background: color-mix(in srgb, var(--brick) 8%, transparent);
}
.doclink.warn svg { color: var(--brick); }
.code-row.warn .k { color: var(--brick); }
.doclink .ar { margin-left: auto; color: var(--ink-3); }

/* ── 표 ───────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 12.5px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); }
th { font-family: var(--f-disp); font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.tag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.tag.done { color: var(--meadow); } .tag.todo { color: var(--brick); }
.tag.half { color: var(--gold); } .tag.plan { color: var(--ink-3); }

.cardgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.minicard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.minicard h4 { font-family: var(--f-disp); font-weight: 400; font-size: 13.5px; margin: 0 0 6px; }
.minicard p { margin: 0 0 4px; font-size: 12px; color: var(--ink-2); }
.minicard .big { font-family: var(--f-mono); font-size: 15px; color: var(--glacier); }

.callout {
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, var(--surface));
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 11px 14px; font-size: 12.5px; color: var(--ink-2);
}
.callout b { color: var(--ink); }

/* ── 가계부 ───────────────────────────────────────────── */
.syncbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 13px; font-size: 12px;
}
.syncbar .st.wait { color: var(--gold); }
.syncbar .st.off { color: var(--ink-3); }
.pendcnt { font-family: var(--f-mono); font-size: 11px; color: var(--brick); }
.linkbtn {
  appearance: none; background: none; border: 0; padding: 4px 2px; margin: 0;
  color: var(--glacier); font-size: 12px; cursor: pointer; text-decoration: underline;
}
.linkbtn + .linkbtn { margin-left: auto; }

.expform {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; display: grid; gap: 11px; margin-bottom: 14px;
}
.ef-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; }
.ef-row > label { font-size: 12px; color: var(--ink-3); }
.ef-row input, .ef-row select {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 11px; min-height: 44px;
}
.ef-row input:focus, .ef-row select:focus { outline: 2px solid var(--glacier); outline-offset: 1px; }
.chiprow { display: flex; flex-wrap: wrap; gap: 5px; }
.chipbtn {
  appearance: none; cursor: pointer; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 12px; font-size: 12.5px; color: var(--ink-3); min-height: 34px;
}
.chipbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ef-actions { display: flex; gap: 8px; justify-content: flex-end; }

.settlebox {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; margin-bottom: 10px;
}
.sb-head {
  font-family: var(--f-disp); font-size: 15px; margin-bottom: 9px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.sb-head span { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.sb-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: baseline;
  padding: 6px 0; border-top: 1px dashed var(--line-soft); font-size: 12.5px;
}
.sb-row:first-of-type { border-top: 0; }
.sb-name { font-weight: 600; }
.sb-paid { color: var(--ink-3); font-family: var(--f-mono); font-size: 11.5px; }
.sb-diff { font-family: var(--f-mono); font-size: 12px; }
.sb-diff.plus { color: var(--meadow); }
.sb-diff.minus { color: var(--brick); }
.sb-diff.zero { color: var(--ink-3); }
.sb-note { font-size: 11px; color: var(--ink-3); margin-top: 7px; }

.expday { margin-bottom: 14px; }
.expday-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--f-disp); font-weight: 400; font-size: 14px;
  margin: 0 0 7px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.expday-h span { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); }
.exprow {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 9px; align-items: center;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 9px 11px; margin-bottom: 5px;
}
.ex-cat {
  font-size: 10.5px; color: var(--ink-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
.ex-t { font-size: 13px; min-width: 0; }
.ex-t small { display: block; font-size: 10.5px; color: var(--ink-3); }
.ex-a { font-family: var(--f-mono); font-size: 13px; white-space: nowrap; }
.ex-del {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: 19px; line-height: 1; padding: 2px 4px;
}
.ex-del:hover { color: var(--brick); }

/* ── 환율 ─────────────────────────────────────────────── */
.fxcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; display: grid; gap: 8px;
}
.fx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fx-head > span:first-child { font-family: var(--f-disp); font-size: 14px; }
.fx-src { font-size: 10.5px; color: var(--ink-3); }
.fx-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; gap: 8px; align-items: center; }
.fx-c { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }
.fx-in {
  width: 100%; font: inherit; font-family: var(--f-mono); font-size: 14px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; min-height: 40px; text-align: right;
}
.fx-in:focus { outline: 2px solid var(--glacier); outline-offset: 1px; }
.fx-unit { font-size: 12px; color: var(--ink-3); }
.fx-reset {
  appearance: none; background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 9px; font-size: 10.5px; color: var(--ink-3); cursor: pointer;
}
.fx-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 3px; }
.fx-note { font-size: 10.5px; color: var(--ink-3); }

.minicard.total { background: var(--ink); border-color: var(--ink); }
.minicard.total h4, .minicard.total p { color: var(--paper); }
.minicard.total .big { color: #FFF; }
.krwline { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }
.ex-a small, .q-a small { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 400; }
.expday-h span b, .qsum b { color: var(--glacier); margin-left: 5px; }

/* ── 그날 가계부 (빠른 기록) ──────────────────────────── */
.qadd {
  background: color-mix(in srgb, var(--gold) 7%, var(--surface-2));
  border: 1.5px dashed color-mix(in srgb, var(--gold) 45%, var(--line));
  border-radius: 16px; padding: 12px; display: grid; gap: 9px;
}
.qa-top { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: center; }
.qadd input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 13px; min-height: 46px;
}
.qadd input::placeholder { color: var(--ink-3); }
.qadd input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
#qAmount { font-family: var(--f-mono); font-size: 18px; font-weight: 500; }
.chiprow.tiny { gap: 4px; }
.chiprow.tiny .chipbtn { padding: 6px 10px; font-size: 11.5px; min-height: 30px; border-radius: 999px; }
.qa-save {
  appearance: none; cursor: pointer; border: 0;
  background: var(--ink); color: var(--paper);
  border-radius: 999px; padding: 12px; font-size: 14px; font-family: var(--f-disp);
  min-height: 46px; transition: transform .12s;
}
.qa-save:active { transform: scale(.97); }

.qlist { margin-top: 10px; display: grid; gap: 5px; }
.qrow {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 9px; align-items: center;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 13px; padding: 9px 11px;
}
.q-emo { font-size: 16px; }
.q-t { font-size: 13px; min-width: 0; }
.q-t small { display: block; font-size: 10.5px; color: var(--ink-3); }
.q-a { font-family: var(--f-mono); font-size: 13.5px; white-space: nowrap; }
.qsum {
  text-align: right; font-family: var(--f-mono); font-size: 12px;
  color: var(--ink-2); padding: 4px 6px 0;
}
.qempty {
  text-align: center; color: var(--ink-3); font-size: 13px;
  padding: 18px 10px; margin: 10px 0 0;
  background: var(--surface-2); border-radius: 14px;
}
.qempty small { font-size: 11.5px; opacity: .85; }

/* 분류·결제자 칩에 색 입히기 */
.chipbtn.c-cat[aria-pressed="true"]   { background: var(--tuff);    border-color: var(--tuff);    color: #FFF; }
.chipbtn.c-payer[aria-pressed="true"] { background: var(--glacier); border-color: var(--glacier); color: #FFF; }
.chipbtn.c-cur[aria-pressed="true"]   { background: var(--meadow);  border-color: var(--meadow);  color: #FFF; }

/* ── 체크리스트 ───────────────────────────────────────── */
.checks { display: grid; gap: 7px; }
.chk {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; padding: 12px 14px; min-height: 48px;
  transition: transform .12s, border-color .14s;
}
.chk:active { transform: scale(.985); }
.chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.box { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--line); border-radius: 6px; display: grid; place-items: center; }
.box svg { width: 12px; height: 12px; opacity: 0; color: var(--paper); }
.chk input:checked ~ .box { background: var(--meadow); border-color: var(--meadow); }
.chk input:checked ~ .box svg { opacity: 1; }
.chk input:checked ~ .txt { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line); }
.chk input:focus-visible ~ .box { outline: 2px solid var(--glacier); outline-offset: 2px; }
.txt { font-size: 13.5px; }
.progress { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.bar { flex: 1; height: 7px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--meadow); transition: width .4s; }
.progress .cnt { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); }

/* ── 맛집 ─────────────────────────────────────────────── */
.foodgrid { display: grid; gap: 8px; }
.ctry { margin-bottom: 26px; }
.ctryname {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-disp); font-weight: 400; font-size: 19px;
  margin: 0 0 12px; padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
}
.ctryname .cflag { font-size: 20px; }
.ctryname .ctrycnt {
  margin-left: auto; font-family: var(--f-mono); font-size: 11.5px;
  color: var(--ink-3); font-weight: 400;
}
.citygrp { margin-bottom: 16px; }
.cityname {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-disp); font-weight: 400; font-size: 14px;
  color: var(--ink-2); margin: 0 0 8px;
}
.cityname::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tuff); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tuff) 22%, transparent);
}
.cityname .citycnt {
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 6px;
}
.foodlist { display: grid; gap: 8px; }
.food {
  display: flex; gap: 10px; align-items: flex-start; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; padding: 12px 14px;
  transition: transform .12s, border-color .14s;
}
.food:active { transform: scale(.985); }
.food:active { background: var(--surface-2); }
.food .fn { font-size: 13.5px; display: block; }
.food .fa { font-size: 10px; color: var(--ink-3); }
.food .fnote { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.food .star { color: var(--gold); }
.food .mk { color: var(--tuff); flex: none; width: 14px; height: 14px; margin-top: 3px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.filters button {
  appearance: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; cursor: pointer;
  color: var(--ink-3); min-height: 36px;
}
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── 하단 탭바 ────────────────────────────────────────── */
.bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: stretch;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bnav button {
  flex: 1; appearance: none; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 2px 9px; min-height: var(--nav);
  color: var(--ink-3); font-size: 10.5px; transition: color .15s;
}
.bnav button .bi { font-size: 21px; line-height: 1; filter: saturate(.35) opacity(.55); transition: filter .18s, transform .18s; }
.bnav button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.bnav button[aria-selected="true"] .bi { filter: none; transform: scale(1.18) translateY(-1px); }

/* ── 달력 일정표 ──────────────────────────────────────
   칸 사이를 테두리로만 나눠서, 숙소 막대가 날짜를 넘어
   끊기지 않고 이어진다. */
.sec-sub { margin-left: auto; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); font-weight: 400; }

.calwrap {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow);
}
.caldow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.caldow span {
  padding: 7px 0; text-align: center;
  font-family: var(--f-disp); font-size: 12px; color: var(--ink-3);
}
.caldow span:first-child { color: var(--brick); }
.caldow span:last-child  { color: var(--sky); }

.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); }

.calday {
  position: relative; appearance: none; text-align: left;
  border: 0; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  min-height: 88px; padding: 4px 3px 17px;
  display: flex; flex-direction: column; gap: 3px;
  font: inherit; color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--segc, var(--ink-3)) 5%, var(--surface));
  overflow: hidden;
}
.calgrid > :nth-child(7n) { border-right: 0; }
.calday[data-seg="tr"]  { --segc: var(--tuff); }
.calday[data-seg="fr"]  { --segc: var(--meadow); }
.calday[data-seg="ch"]  { --segc: var(--glacier); }
.calday[data-seg="air"] { --segc: var(--sky); }
.calday.off {
  background: var(--surface-2); cursor: default;
  display: block; padding: 5px 6px; min-height: 0;
}
.calday.off .cd-n { color: var(--ink-3); opacity: .6; }
.calday[aria-current="true"] {
  background: color-mix(in srgb, var(--segc) 16%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--segc);
}

.cd-top { display: flex; align-items: center; gap: 3px; }
.cd-n {
  font-family: var(--f-disp); font-size: 13px; line-height: 1;
  min-width: 20px; height: 20px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50px; background: var(--surface-2); color: var(--ink-2);
}
.calday.today .cd-n { color: #FFF; background: var(--brick); }
.cd-f { font-size: 10px; line-height: 1; margin-left: auto; opacity: .9; }

/* 랜드마크 일러스트 — 날짜 옆에 붙는 작은 스티커 */
.cd-art {
  flex: none; margin-left: auto;
  width: 26px; height: 26px; border-radius: 9px; overflow: hidden;
  background: color-mix(in srgb, var(--segc) 14%, var(--surface-2));
  box-shadow: 0 1px 3px rgba(20,38,31,.22);
  rotate: -3deg;
}
.cd-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* 원래 팝업용으로 그린 그림이라 작게 줄이면 어둡게 뭉친다 — 살짝 띄워준다 */
  filter: brightness(1.08) saturate(1.08) contrast(1.03);
}
.cd-art.empty { opacity: .5; }

.cd-t {
  font-size: 9px; line-height: 1.3; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.cd-stay {
  position: absolute; left: 0; right: 0; bottom: 0; height: 15px;
  display: flex; align-items: center;
  padding: 0 4px; font-size: 8.5px; font-weight: 600; line-height: 1;
  color: #FFF; white-space: nowrap; overflow: hidden;
  background: var(--stayc, var(--ink-3));
}
.cd-stay.none { background: none; }
.cd-stay[data-pos="start"] { border-radius: 8px 0 0 0; margin-left: 3px; }
.cd-stay[data-pos="end"]   { border-radius: 0 8px 0 0; margin-right: 3px; }
.cd-stay[data-pos="solo"]  { border-radius: 8px 8px 0 0; margin: 0 3px; }

/* 여행 전/후 빈칸 — 가족 캐릭터 */
.calfill {
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: repeating-linear-gradient(135deg,
    var(--surface-2) 0 9px, color-mix(in srgb, var(--paper) 60%, var(--surface-2)) 9px 18px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 2px; padding: 6px 4px 8px; overflow: hidden;
}
.calfill img {
  width: 100%; max-width: 168px; height: auto; display: block;
  filter: drop-shadow(0 3px 4px rgba(20,38,31,.22));
}
.calfill span {
  font-family: var(--f-disp); font-size: 10px; color: var(--ink-3); text-align: center;
}

[data-h="air"]   { --stayc: var(--sky); }
[data-h="emit"]  { --stayc: var(--tuff); }
[data-h="yavuz"] { --stayc: var(--gold); }
[data-h="passy"] { --stayc: var(--meadow); }
[data-h="dorf"]  { --stayc: var(--plum); }
[data-h="spill"] { --stayc: var(--glacier); }

/* 숙소 범례 */
.stayleg { display: flex; flex-direction: column; gap: 8px; }
.sl-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 10px 12px;
}
.sl-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--stayc); flex: none; }
.sl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sl-t b { font-size: 13px; font-weight: 600; }
.sl-t small, .sl-m small { font-size: 11px; color: var(--ink-3); }
.sl-m {
  text-align: right; font-family: var(--f-mono); font-size: 12px;
  display: flex; flex-direction: column; gap: 1px; flex: none;
}

/* ── 바텀시트 ─────────────────────────────────────────── */
.sheet-back {
  position: fixed; inset: 0; z-index: 60; background: rgba(10,18,15,.42);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.sheet-back.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--surface); border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px -16px rgba(0,0,0,.5);
  padding: 8px 18px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.7,.3,1);
  max-height: 74vh; overflow-y: auto;
}
.sheet.open { transform: translateY(0); }
.sheet .grab { width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: 4px auto 14px; }
.sheet h3 { font-family: var(--f-disp); font-weight: 400; font-size: 19px; margin: 0 0 4px; }
.sheet .sub { font-size: 12px; color: var(--ink-3); margin: 0 0 14px; }
.sheet .acts { display: grid; gap: 8px; }

.errbar {
  position: fixed; left: 8px; right: 8px; bottom: calc(var(--nav) + 8px + env(safe-area-inset-bottom));
  z-index: 99; background: #A8422A; color: #FFF;
  font-size: 11.5px; line-height: 1.4; padding: 8px 12px; border-radius: 10px;
  font-family: var(--f-mono); word-break: break-all;
  display: none;
}
.errbar.on { display: block; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav) + 18px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px); z-index: 70;
  background: var(--ink); color: var(--paper); font-size: 12.5px;
  padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

footer { padding: 22px 14px 10px; font-size: 11.5px; color: var(--ink-3); display: grid; gap: 5px; text-align: center; }
footer a { color: var(--glacier); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ── 넓은 화면 ────────────────────────────────────────── */
@media (min-width: 760px) {
  :root { --nav: 0px; }
  body { padding-bottom: 0; }
  .top { padding: 12px 22px; gap: 12px; }
  .top h1 { font-size: 21px; }
  .bnav {
    position: sticky; top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line);
    max-width: 760px; margin: 0 auto; background: none; backdrop-filter: none;
  }
  .bnav button { flex-direction: row; gap: 7px; font-size: 13px; min-height: 46px; padding: 10px; }
  .bnav button svg { width: 17px; height: 17px; }
  .bnav button[aria-selected="true"] { border-bottom: 2px solid var(--glacier); }
  .shell { padding: 18px 22px 40px; }
  .strip { max-width: 760px; margin: 0 auto; padding: 0 22px 10px; }
  .stage { height: 540px; }
  .calday { min-height: 124px; padding: 6px 6px 19px; gap: 5px; }
  .cd-art { width: 40px; height: 40px; border-radius: 12px; }
  .cd-t { font-size: 11.5px; -webkit-line-clamp: 4; }
  .cd-n { font-size: 15px; min-width: 24px; height: 24px; }
  .cd-f { font-size: 13px; }
  .cd-stay { height: 17px; font-size: 10px; }
  .calfill span { font-size: 12.5px; }
  .lmwrap img { width: 152px; }
  .doc-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .foodlist { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  #floating { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .day-body { grid-template-columns: 1.1fr 1fr; gap: 20px 28px; }
  .day-body > .full { grid-column: 1 / -1; }
  .day-meta { flex-direction: row; gap: 14px; }
  .sheet { max-width: 520px; left: 50%; transform: translate(-50%, 105%); border-radius: 18px; bottom: 24px; }
  .sheet.open { transform: translate(-50%, 0); }
  .errbar {
  position: fixed; left: 8px; right: 8px; bottom: calc(var(--nav) + 8px + env(safe-area-inset-bottom));
  z-index: 99; background: #A8422A; color: #FFF;
  font-size: 11.5px; line-height: 1.4; padding: 8px 12px; border-radius: 10px;
  font-family: var(--f-mono); word-break: break-all;
  display: none;
}
.errbar.on { display: block; }

.toast { bottom: 26px; }
}