/* 어피 v7 — 모션 시스템 + 관광 연계 카드
   원칙: 의미 있는 움직임만 · 320~420ms · GPU 속성(transform/opacity)만 · prefers-reduced-motion 존중 */
:root {
  --ease-spring: cubic-bezier(.2, .8, .2, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --vio: #32008C; --vio-2: #6433DF; --vio-3: #835CE5; --vio-glow: rgba(100, 51, 223, .22);
}

/* ── 말풍선: 아래에서 떠오르며 살짝 확대 ── */
.bub { animation: afBubIn .32s var(--ease-spring) both; transform-origin: 0 100%; }
.bub.me { animation-name: afMeIn; transform-origin: 100% 100%; }
@keyframes afBubIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes afMeIn { from { opacity: 0; transform: translate(10px, 6px) scale(.97); } to { opacity: 1; transform: none; } }
.bub .t.ai { position: relative; }
.bub .t.ai::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(131, 92, 229, .12) 50%, transparent 70%); background-size: 220% 100%; animation: afSheen 1.4s var(--ease-expo) .1s 1 both; }
@keyframes afSheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ── 카드: 스태거(60ms) + 확대 ── */
.card { animation: afCardIn .42s var(--ease-expo) both; animation-delay: var(--stg, 0ms); transform-origin: 30% 0; transition: box-shadow .25s ease, transform .25s var(--ease-spring); }
@keyframes afCardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (hover: hover) { .card:hover { box-shadow: 0 10px 28px rgba(50, 0, 140, .08), 0 2px 6px rgba(20, 20, 40, .04); } }

/* ── 칩: 하나씩 피어남 + 눌림 ── */
.chips { animation: none; }
.chips .chip { animation: afChipIn .34s var(--ease-back) both; transition: transform .12s var(--ease-spring), box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.chips .chip:nth-child(1) { animation-delay: 40ms; } .chips .chip:nth-child(2) { animation-delay: 85ms; }
.chips .chip:nth-child(3) { animation-delay: 130ms; } .chips .chip:nth-child(4) { animation-delay: 175ms; }
@keyframes afChipIn { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
@media (hover: hover) { .chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(50, 0, 140, .10); border-color: var(--uppy-blue-line); } }
.chip:active { transform: scale(.96); }
.chip.hot { background: linear-gradient(180deg, #FBF9FF, #F3EEFF); }

/* ── 타이핑: 웨이브 점 + 바이올렛 쉬머 ── */
.typing { position: relative; overflow: hidden; background: linear-gradient(100deg, var(--surface) 20%, #EFEAFF 45%, var(--surface) 70%); background-size: 260% 100%; animation: afShimmer 1.6s linear infinite; }
.typing span { background: var(--vio-3); animation: afWave 1.1s var(--ease-spring) infinite; }
.typing span:nth-child(2) { animation-delay: .14s; } .typing span:nth-child(3) { animation-delay: .28s; }
@keyframes afWave { 0%, 70%, 100% { transform: translateY(0) scale(.75); opacity: .45; } 30% { transform: translateY(-4px) scale(1); opacity: 1; } }
@keyframes afShimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* ── 버튼 ── */
.ctas button { transition: transform .12s var(--ease-spring), box-shadow .2s ease, background .2s ease; }
.ctas button:active { transform: scale(.97); }
.ctas .go { position: relative; overflow: hidden; background: linear-gradient(180deg, #3D0AA3, var(--vio)); box-shadow: 0 6px 16px -6px rgba(50, 0, 140, .55); }
.ctas .go::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); }
@media (hover: hover) { .ctas .go:hover::after { animation: afBtnSheen .7s var(--ease-expo); } }
@keyframes afBtnSheen { to { left: 130%; } }
.ctas .go:disabled { background: #C6CBD4; box-shadow: none; }
.kakao { transition: transform .14s var(--ease-spring), box-shadow .2s ease; box-shadow: 0 6px 18px -8px rgba(60, 30, 30, .45); }

/* ── 바텀시트: 스프링 + 블러 ── */
.sheet-ov.show { animation: afFade .26s ease both; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet { animation: afSheetUp .46s var(--ease-expo) both; }
@keyframes afSheetUp { from { transform: translateY(100%); } 70% { transform: translateY(-1.5%); } to { transform: none; } }
@keyframes afFade { from { opacity: 0; } to { opacity: 1; } }
.modal-ov.show { animation: afFade .2s ease both; }
.modal-ov.show > * { animation: afPop .32s var(--ease-back) both; }
@keyframes afPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ── 진행 스텝바 ── */
.steps { animation: afBubIn .32s var(--ease-spring) both; }
.stp .dot { transition: background .3s ease, color .3s ease, transform .3s var(--ease-back); }
.stp.on .dot { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(50, 0, 140, .12); animation: afRing 1.8s ease-out infinite; }
@keyframes afRing { 0% { box-shadow: 0 0 0 0 rgba(50, 0, 140, .28); } 100% { box-shadow: 0 0 0 9px rgba(50, 0, 140, 0); } }
.stp-line { position: relative; overflow: hidden; }
.stp.done + .stp-line, .stp.done ~ .stp-line { background: var(--ok); transition: background .42s ease; }

/* ── 결제완료 체크 + 파티클 ── */
.done-ic { animation: afPop .5s var(--ease-back) both; box-shadow: 0 0 0 0 rgba(40, 185, 21, .3); }
.af-check { width: 58px; height: 58px; margin: 4px auto 10px; }
.af-check svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.af-check .c { stroke: var(--ok); stroke-width: 2.4; stroke-dasharray: 145; stroke-dashoffset: 145; animation: afDraw .62s var(--ease-expo) .05s forwards; fill: var(--ok-bg); }
.af-check .k { stroke: var(--ok); stroke-width: 3.6; stroke-dasharray: 36; stroke-dashoffset: 36; animation: afDraw .42s var(--ease-expo) .5s forwards; }
@keyframes afDraw { to { stroke-dashoffset: 0; } }
.tc-donecard { position: relative; overflow: visible; }
.af-burst { position: absolute; left: 50%; top: 46px; width: 0; height: 0; pointer-events: none; z-index: 2; }
.af-burst i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--vio-3); opacity: 0; animation: afBurst 1.1s var(--ease-expo) .45s forwards; }
.af-burst i:nth-child(3n) { background: #FFD43B; width: 5px; height: 5px; }
.af-burst i:nth-child(4n) { background: var(--ok); border-radius: 2px; }
@keyframes afBurst { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }

/* ── 결제 버튼 morph: 버튼 → 원형 로더 → 체크 ── */
.tc-pay { position: relative; transition: width .38s var(--ease-expo), border-radius .38s var(--ease-expo), background .3s ease; margin-left: auto; margin-right: auto; }
.tc-pay .tc-spin { display: none; width: 24px; height: 24px; fill: none; stroke: #3C1E1E; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 40 60; }
.tc-pay.paying { width: 52px !important; padding: 0; border-radius: 50%; }
.tc-pay.paying .kb, .tc-pay.paying .tc-pay-t { display: none; }
.tc-pay.paying .tc-spin { display: block; animation: afSpin .8s linear infinite; }
.tc-pay.paid { background: var(--ok); }
.tc-pay.paid .tc-spin { stroke: #fff; stroke-dasharray: none; animation: none; }
.tc-pay.paid .tc-spin circle { display: none; }
.tc-pay.paid::after { content: ''; width: 16px; height: 9px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(1px, -2px); position: absolute; animation: afPop .3s var(--ease-back) both; }
@keyframes afSpin { to { transform: rotate(360deg); } }
.tc-total.tick { animation: afTick .32s var(--ease-back); display: inline-block; }
@keyframes afTick { from { transform: translateY(-6px); opacity: .3; } to { transform: none; opacity: 1; } }

/* ── 헤더 상태점 · 시그널 바 ── */
.hd .st i { animation: afLive 2.4s ease-in-out infinite; }
@keyframes afLive { 0%, 100% { box-shadow: 0 0 0 0 rgba(40, 185, 21, .45); } 50% { box-shadow: 0 0 0 4px rgba(40, 185, 21, 0); } }
.sig { transition: opacity .3s ease, transform .3s var(--ease-spring); }

/* ───────────── 관광 연계 카드 ───────────── */
.tc .tc-hero { position: relative; height: 86px; overflow: hidden; display: flex; align-items: flex-end; padding: 0 14px 10px; gap: 7px; }
.tc-hero.tc-stay { background: linear-gradient(135deg, #2B0F6B 0%, #6433DF 58%, #B79BFF 100%); }
.tc-hero.tc-meal { background: linear-gradient(135deg, #7A2E0E 0%, #E8762C 60%, #FFC98B 100%); }
.tc-hero.tc-exp { background: linear-gradient(135deg, #0D4B5C 0%, #1E9AA8 60%, #9EE6E0 100%); }
.tc-hero.tc-fest { background: linear-gradient(135deg, #3A0B4F 0%, #B0378E 55%, #FFB3D1 100%); }
.tc-hero .tc-wave { position: absolute; left: -10%; right: -10%; bottom: -26px; height: 60px; border-radius: 45%; background: rgba(255, 255, 255, .14); animation: afDrift 9s ease-in-out infinite alternate; }
.tc-hero .tc-wave::after { content: ''; position: absolute; left: 12%; right: -6%; top: 14px; height: 60px; border-radius: 42%; background: rgba(255, 255, 255, .10); animation: afDrift 7s ease-in-out infinite alternate-reverse; }
@keyframes afDrift { from { transform: translateX(-4%) rotate(-1deg); } to { transform: translateX(4%) rotate(1deg); } }
.tc-hero .tc-ic { position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tc-hero .tc-ic svg, .tc-link svg, .tl-dot svg, .tc-eyebrow svg, .tc-strip svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tc-hero .tc-ic svg { width: 22px; height: 22px; color: #fff; }
.tc-hero .tc-kind { position: relative; font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .22); padding: 4px 9px; border-radius: 100px; letter-spacing: -.2px; }
.tc-sample, .tc-pill, .tc-strip-h em { font-size: 10.5px; font-weight: 800; letter-spacing: .2px; color: var(--vio); background: #fff; padding: 3px 8px; border-radius: 100px; position: relative; }
.tc-hero .tc-sample { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.tc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tc-tags span { font-size: 11px; font-weight: 700; color: var(--vio-2); background: var(--uppy-blue-bg); border: 1px solid var(--uppy-blue-line); padding: 3px 8px; border-radius: 100px; }
.tc-link { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12px; color: var(--body); }
.tc-link svg { width: 15px; height: 15px; color: var(--vio-2); flex-shrink: 0; }
.price .u { font-size: 12px; color: var(--muted); font-weight: 600; }
.tc-mini { font-size: 11px; color: var(--faint); font-weight: 600; }
.tc-desc { font-size: 13px; color: var(--body); line-height: 1.55; margin-top: 8px; }
.tc-a { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--vio); text-decoration: none; }
.tc-warn { color: var(--urgent); font-weight: 700; }
.tc-note { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--muted); background: var(--surface); border-radius: 10px; padding: 9px 11px; }

/* 여행 코스 타임라인 */
.tc-plan-h { padding: 15px 16px 6px; background: radial-gradient(120% 140% at 100% 0%, #EFE8FF 0%, #fff 60%); }
.tc-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--vio-2); letter-spacing: .1px; margin-bottom: 4px; }
.tc-eyebrow svg { width: 15px; height: 15px; }
.tl { position: relative; margin: 6px 0 4px; }
.tl::before { content: ''; position: absolute; left: 13px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(var(--uppy-blue-line), #EEE); border-radius: 2px; transform-origin: top; animation: afGrow .9s var(--ease-expo) .15s both; }
@keyframes afGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.tl-row { position: relative; display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; padding: 9px 0; cursor: pointer; animation: afRowIn .4s var(--ease-expo) both; }
.tl-row:nth-child(1) { animation-delay: .12s; } .tl-row:nth-child(2) { animation-delay: .2s; } .tl-row:nth-child(3) { animation-delay: .28s; } .tl-row:nth-child(4) { animation-delay: .36s; } .tl-row:nth-child(5) { animation-delay: .44s; } .tl-row:nth-child(6) { animation-delay: .52s; }
@keyframes afRowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.tl-dot { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1.5px solid var(--uppy-blue-line); display: flex; align-items: center; justify-content: center; color: var(--vio-2); position: relative; z-index: 1; }
.tl-dot svg { width: 15px; height: 15px; }
.tl-row[data-k="boat"] .tl-dot { background: var(--vio); border-color: var(--vio); color: #fff; }
.tl-time { grid-column: 2; font-size: 10.5px; font-weight: 800; color: var(--faint); letter-spacing: .2px; }
.tl-b { grid-column: 2; min-width: 0; }
.tl-b b { display: block; font-size: 14px; color: var(--ink); letter-spacing: -.3px; }
.tl-b small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; line-height: 1.45; }
.tl-b em, .tc-strip-h em { white-space: nowrap; display: inline-block; font-style: normal; font-size: 10px; font-weight: 800; color: var(--vio-2); background: var(--uppy-blue-bg); padding: 1px 6px; border-radius: 100px; margin-left: 3px; }
.tl-b em.real { color: #0B6B2A; background: var(--ok-bg); }
.tl-p { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 13px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sum-row small { font-size: 10.5px; color: var(--faint); font-weight: 600; }

/* 샘플 결제 시트 */
.tc-beta { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: -.1px; }
.tc-beta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--vio-3); animation: afLive 2s ease-in-out infinite; }
.tc-sh-l { font-size: 12px; font-weight: 800; color: var(--muted); margin: 16px 0 8px; }
.tc-dates { display: flex; gap: 7px; flex-wrap: wrap; }
.tc-date { font-size: 13px; font-weight: 700; color: var(--body); background: #fff; border: 1px solid #DDE0E6; border-radius: 12px; padding: 9px 12px; transition: all .18s var(--ease-spring); }
.tc-date.on { color: #fff; background: var(--vio); border-color: var(--vio); transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(50, 0, 140, .6); }
.tc-qty { display: flex; align-items: center; gap: 12px; }
.tc-qty button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #DDE0E6; background: #fff; font-size: 18px; font-weight: 700; color: var(--ink); transition: transform .12s var(--ease-spring); }
.tc-qty button:active { transform: scale(.9); }
.tc-qty .q-v { font-size: 17px; min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.tc-qty .q-w { font-size: 11.5px; color: var(--faint); font-weight: 600; }
.tc-done { text-align: center; }
.tc-done .ck { text-align: left; }
.tc-pill { display: inline-block; background: var(--uppy-blue-bg); border: 1px solid var(--uppy-blue-line); margin-bottom: 8px; }
.tc-x { margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 3px 9px; }

/* 선박 상세 하단 연계 스트립 */
.tc-strip { margin-left: 39px; border: 1px solid var(--uppy-blue-line); border-radius: 16px; padding: 12px 12px 12px; background: linear-gradient(180deg, #FBF9FF, #fff); animation: afCardIn .42s var(--ease-expo) both; }
.tc-strip-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--body); margin-bottom: 9px; }
.tc-strip-h svg { width: 16px; height: 16px; color: var(--vio-2); }
.tc-strip-h em { margin-left: auto; }
.tc-strip-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.tc-pill-b { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 9px; border-radius: 12px; border: 1px solid var(--line); background: #fff; transition: transform .14s var(--ease-spring), box-shadow .2s ease, border-color .2s ease; animation: afChipIn .36s var(--ease-back) both; }
.tc-pill-b:nth-child(2) { animation-delay: .05s; } .tc-pill-b:nth-child(3) { animation-delay: .1s; } .tc-pill-b:nth-child(4) { animation-delay: .15s; }
.tc-pill-b i { width: 30px; height: 30px; border-radius: 10px; background: var(--uppy-blue-bg); color: var(--vio-2); display: flex; align-items: center; justify-content: center; }
.tc-pill-b i svg { width: 17px; height: 17px; }
.tc-pill-b span { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.tc-pill-b small { font-size: 10px; color: var(--faint); font-weight: 700; }
@media (hover: hover) { .tc-pill-b:hover { transform: translateY(-2px); border-color: var(--uppy-blue-line); box-shadow: 0 8px 18px -10px rgba(50, 0, 140, .35); } }
.tc-pill-b:active { transform: scale(.95); }

/* ── 접근성: 움직임 줄이기 — 전부 불투명도만 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .bub, .card, .chips .chip, .tc-strip, .tl-row { animation: afFade .2s ease both !important; transform: none !important; }
  .af-check .c, .af-check .k { stroke-dashoffset: 0 !important; }
  .af-burst { display: none !important; }
}

/* ───────── v7.9: 실사진 히어로 · 타임라인 썸네일 · 거리·날짜·영문 표기 ───────── */
.tc .tc-hero.has-img { height: 132px; background-size: cover; background-position: center; background-color: #E9E6F2; animation: afKen 14s ease-out both; }
.tc .tc-hero.has-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 30, 0) 40%, rgba(10, 8, 30, .55) 100%); }
.tc .tc-hero.has-img .tc-ic { background: rgba(255, 255, 255, .22); }
@keyframes afKen { from { background-size: 112%; } to { background-size: 100%; } }
.tl-dot.ph { background-size: cover; background-position: center; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--uppy-blue-line); }
.tc-dist { color: var(--vio-2); font-weight: 700; }
.tc-need { font-style: normal; font-size: 11px; font-weight: 800; color: var(--urgent); margin-left: 6px; }
.tc-dwarn { font-size: 12px; color: var(--urgent); font-weight: 600; margin-top: 8px; }
.tc-dwarn:empty { display: none; }
.tc-dfix { margin-left: 6px; font-size: 11.5px; font-weight: 800; color: var(--vio); background: var(--uppy-blue-bg); border: 1px solid var(--uppy-blue-line); border-radius: 100px; padding: 3px 9px; }
.tc-dates.shake { animation: afShake .4s ease; }
@keyframes afShake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.tc-en { margin-top: 7px; padding-top: 7px; border-top: 1px dashed #DCD6EE; font-size: 12.5px; line-height: 1.5; color: var(--muted); font-style: italic; animation: afFade .3s ease both; }
.sum-row .disc { color: var(--urgent); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tc .tc-hero.has-img { animation: none !important; } }

/* v7.10 선박 AI 요약 · 최근 조황 */
.tb-ai { background: linear-gradient(135deg, #F4F0FF, #EFEAFF); border: 1px solid var(--uppy-blue-line); border-radius: 12px; padding: 12px 13px; }
.tb-h { font-size: 11px; font-weight: 800; color: var(--uppy-blue); display: flex; align-items: center; gap: 6px; }
.tb-badge { background: linear-gradient(135deg, #6433df, #835ce5); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 100px; }
.tb-body { font-size: 12.5px; color: var(--body); line-height: 1.62; margin-top: 7px; transition: opacity .35s ease; }
.tb-body.tb-wait { color: var(--faint); background: linear-gradient(90deg, transparent, rgba(100,51,223,.08), transparent); background-size: 200% 100%; animation: afShimmer 1.4s linear infinite; border-radius: 6px; }
.tb-body.tb-pending { opacity: .78; }
.tb-body.tb-in { animation: afFadeUp .45s cubic-bezier(.2,.8,.2,1); }
.tb-src { font-size: 10.5px; color: var(--faint); margin-top: 8px; }
.tb-conds { display: flex; gap: 6px; margin-top: 9px; overflow-x: auto; scrollbar-width: none; }
.tb-cond { flex: 0 0 auto; width: 68px; border: 0; padding: 0; background: none; cursor: pointer; text-align: center; }
.tb-cond img { width: 68px; height: 68px; object-fit: cover; border-radius: 10px; display: block; background: #E9E4F7; transition: transform .2s ease; }
.tb-cond:active img { transform: scale(.95); }
.tb-cond span { display: block; font-size: 10px; font-weight: 700; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.tb-crow { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.tb-crow:first-of-type { border-top: 0; }
.tb-crow img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: #E9E4F7; }
.tb-cbody { min-width: 0; }
.tb-cd { font-size: 12px; color: var(--ink); }
.tb-ct { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 3px; }
@keyframes afFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tb-body.tb-wait, .tb-body.tb-in { animation: none !important; } }

/* ═══════════ v7.11 모션 FX 레이어 (uppy-fx.js) ═══════════ */
/* ① 헤더 바다 앰비언트 */
.fx-on .hd { position: relative; overflow: hidden; }
.fx-on .hd > *:not(.fx-sea) { position: relative; z-index: 1; }
.fx-sea { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 34px; pointer-events: none; z-index: 0; }
.fx-sea g { will-change: transform; }
.fx-sea .fx-w1 { animation: fxSeaMove 14s linear infinite; }
.fx-sea .fx-w2 { animation: fxSeaMove 9s linear infinite reverse; opacity: .7; }
.fx-sea .fx-glint { fill: #fff; opacity: 0; animation: fxGlint 6s ease-in-out infinite 2s; }
@keyframes fxSeaMove { from { transform: translateX(0); } to { transform: translateX(-100px); } }
@keyframes fxGlint { 0%, 80%, 100% { opacity: 0; transform: translateX(0); } 86% { opacity: .9; } 92% { opacity: 0; transform: translateX(14px); } }

/* ⑨ 아바타: 생각 중 오라 · 새 답변 끄덕임 */
.fx-on .hd .av { position: relative; overflow: visible; }
.fx-on .hd .av img { border-radius: 50%; }
.fx-on .hd .av::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, #6433DF, #B79BFF, #3BC9DB, #6433DF); opacity: 0; transform: scale(.9); transition: opacity .35s ease, transform .35s var(--ease-back); z-index: -1; }
.fx-thinking .hd .av::before { opacity: .9; transform: scale(1); animation: fxSpin 1.6s linear infinite; }
.fx-thinking .hd .st { color: var(--vio-2); }
.hd .av.fx-nod { animation: fxNod .55s var(--ease-back); }
@keyframes fxSpin { to { transform: rotate(360deg); } }
@keyframes fxNod { 0% { transform: none; } 35% { transform: translateY(-3px) rotate(-6deg); } 70% { transform: translateY(1px) rotate(3deg); } 100% { transform: none; } }

/* ② 생각 중 오브 + 상태 문구 */
.typing.fx-think { display: inline-flex; align-items: center; gap: 5px; padding-right: 14px; }
.fx-orb { width: 16px; height: 16px; border-radius: 50%; margin-right: 4px; flex: 0 0 auto; background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%), conic-gradient(from 0deg, #6433DF, #B79BFF, #3BC9DB, #FF7AA8, #6433DF); animation: fxSpin 1.2s linear infinite, fxOrbPulse 1.6s ease-in-out infinite; box-shadow: 0 0 12px rgba(100, 51, 223, .45); }
@keyframes fxOrbPulse { 0%, 100% { box-shadow: 0 0 6px rgba(100, 51, 223, .35); } 50% { box-shadow: 0 0 16px rgba(100, 51, 223, .65); } }
.fx-think-t { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--vio-2); margin-left: 6px; white-space: nowrap; transition: opacity .18s ease, transform .18s ease; }
.fx-think-t.out { opacity: 0; transform: translateY(-5px); }

/* ③ AI 답변 단어 리빌 */
.fx-w { display: inline-block; opacity: 0; animation: fxWord .45s var(--ease-expo) forwards; }
@keyframes fxWord { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: none; } }

/* 카드 진입: 원근 틸트 + 블러 해제 */
.fx-on .card { animation-name: fxCardIn; animation-duration: .58s; }
@keyframes fxCardIn { from { opacity: 0; transform: perspective(900px) translateY(14px) rotateX(10deg) scale(.97); } to { opacity: 1; transform: none; } }
.fx-on .card .tc-hero.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); animation: fxSweep 1.1s var(--ease-expo) .35s forwards; pointer-events: none; }
@keyframes fxSweep { to { transform: translateX(120%); } }

/* ④ 금액 카운트업 */
.fx-num { font-variant-numeric: tabular-nums; }

/* ⑤ 리플 */
.fx-riphost { position: relative; overflow: hidden; }
.fx-rip { position: absolute; border-radius: 50%; background: rgba(100, 51, 223, .22); transform: scale(0); animation: fxRip .6s var(--ease-expo) forwards; pointer-events: none; }
.kakao .fx-rip, .ctas .go .fx-rip, .send .fx-rip { background: rgba(255, 255, 255, .45); }
@keyframes fxRip { to { transform: scale(1); opacity: 0; } }

/* ⑥ 전송 발사 */
.send.fx-launch { animation: fxLaunch .5s var(--ease-expo); }
@keyframes fxLaunch { 0% { transform: none; } 30% { transform: translateY(-6px) scale(.88) rotate(-8deg); box-shadow: 0 8px 18px rgba(100,51,223,.45); } 100% { transform: none; } }
#composer { transition: box-shadow .25s ease, border-color .25s ease; }
#composer:focus { box-shadow: 0 0 0 4px rgba(100, 51, 223, .10); }

/* ⑦ 물때 곡선 */
.fx-tide { margin-top: 12px; padding: 10px 10px 4px; border-radius: 12px; background: linear-gradient(180deg, #FBF9FF, #F4F0FF); border: 1px solid var(--uppy-blue-line); }
.fx-tide-h { font-size: 11px; font-weight: 800; color: var(--vio-2); margin: 0 2px 2px; }
.fx-tide svg { width: 100%; height: auto; display: block; overflow: visible; }
.fx-tide .fx-line { fill: none; stroke: var(--vio-2); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fxDraw 1.3s var(--ease-expo) .15s forwards; }
.fx-tide .fx-area { opacity: 0; transform: translateY(14px); transform-box: fill-box; animation: fxRise 1.2s var(--ease-expo) .55s forwards; }
@keyframes fxDraw { to { stroke-dashoffset: 0; } }
@keyframes fxRise { to { opacity: 1; transform: none; } }
.fx-tide .fx-tm { opacity: 0; transform-box: fill-box; transform-origin: center; animation: fxPopIn .45s var(--ease-back) forwards; }
.fx-tide .fx-tm circle.hi { fill: #6433DF; } .fx-tide .fx-tm circle.lo { fill: #3BC9DB; }
.fx-tide text { font-size: 8.5px; font-weight: 700; fill: #5C5470; }
.fx-tide text.ax { font-size: 7.5px; font-weight: 600; fill: #A39DB5; }
.fx-tide .fx-now { opacity: 0; animation: fxPopIn .4s var(--ease-back) forwards; }
.fx-tide .fx-now .dot { fill: #FF7AA8; stroke: #fff; stroke-width: 1.6; }
.fx-tide .fx-now .ring { fill: rgba(255, 122, 168, .25); transform-box: fill-box; transform-origin: center; animation: fxBreath 1.8s ease-in-out infinite 1.9s; }
@keyframes fxPopIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes fxBreath { 0%, 100% { transform: scale(.6); opacity: .9; } 50% { transform: scale(1.25); opacity: .25; } }
.fx-tide.fx-static * { animation-duration: .01s !important; animation-delay: 0s !important; }

/* ⑧ 결제 완료: 컨페티 + 도장 */
.fx-confetti { position: absolute; left: 50%; top: 40px; width: 0; height: 0; pointer-events: none; z-index: 3; }
.fx-confetti i { position: absolute; width: 7px; height: 7px; border-radius: 50%; opacity: 0; animation: fxConf 1.6s cubic-bezier(.15, .7, .3, 1) forwards; }
.fx-confetti i.r { width: 9px; height: 4px; border-radius: 1px; }
@keyframes fxConf { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.5); } 45% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) * .5)) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.1), calc(var(--dy) + var(--fall))) rotate(var(--rot)) scale(.9); } }
.fx-stamp { display: inline-block; color: var(--vio) !important; font-weight: 800; animation: fxStamp .55s var(--ease-back) .9s both; }
@keyframes fxStamp { 0% { opacity: 0; transform: scale(1.9) rotate(-10deg); } 60% { opacity: 1; transform: scale(.94) rotate(2deg); } 100% { transform: none; } }
.tc-done .card-t { animation: fxWord .6s var(--ease-expo) .55s both; }

/* 선박 AI 요약: 조황 글을 읽는 스캔 라인 + 사진 폴라로이드 진입 */
.tb-ai { position: relative; overflow: hidden; }
.fx-on .tb-ai:has(.tb-pending)::before, .fx-on .tb-ai:has(.tb-wait)::before { content: ''; position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: linear-gradient(180deg, transparent, rgba(131, 92, 229, .16), transparent); animation: fxScan 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes fxScan { to { top: 100%; } }
.fx-on .tb-cond { animation: fxPol .5s var(--ease-back) both; }
.fx-on .tb-cond:nth-child(1) { animation-delay: .05s; --tilt: -3deg; } .fx-on .tb-cond:nth-child(2) { animation-delay: .12s; --tilt: 2deg; }
.fx-on .tb-cond:nth-child(3) { animation-delay: .19s; --tilt: -2deg; } .fx-on .tb-cond:nth-child(4) { animation-delay: .26s; --tilt: 3deg; }
@keyframes fxPol { from { opacity: 0; transform: translateY(10px) rotate(var(--tilt, 0deg)) scale(.85); } to { opacity: 1; transform: none; } }

/* 코스 타임라인: 배가 선을 따라 항해 */
.fx-on .tc-tl { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .fx-sea, .fx-orb, .fx-confetti { display: none !important; }
  .fx-w, .fx-tide *, .fx-stamp, .tb-cond, .card { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .fx-tide .fx-line { stroke-dashoffset: 0 !important; }
}

/* v7.11 배 비교 카드 */
.tb-cmp { border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.tb-cmp:first-of-type { margin-top: 4px; }
.tb-cmp-h { font-size: 13.5px; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.tb-cmp-h .tc-pill { font-style: normal; background: var(--uppy-blue-bg); }
.tb-cmp-r { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 3px 0; color: var(--muted); }
.tb-cmp-r span:last-child { color: var(--body); font-weight: 700; text-align: right; }
.fx-on .tb-cmp { animation: fxCardIn .5s var(--ease-expo) both; }
.fx-on .tb-cmp:nth-of-type(2) { animation-delay: .08s; } .fx-on .tb-cmp:nth-of-type(3) { animation-delay: .16s; }

/* v7.11 대화 맥락 바 */
.ctxbar { display: flex; align-items: center; gap: 5px; padding: 0 16px; max-height: 0; overflow: hidden; overflow-x: auto; scrollbar-width: none; opacity: 0; transition: max-height .4s var(--ease-expo), opacity .3s ease, padding .4s var(--ease-expo); flex-shrink: 0; border-bottom: 1px solid transparent; background: linear-gradient(90deg, #FBF9FF, #fff); }
.ctxbar::-webkit-scrollbar { display: none; }
.ctxbar.on { max-height: 40px; opacity: 1; padding: 6px 16px; border-bottom-color: var(--line-soft); }
.ctxbar .cx-lead { font-size: 10.5px; font-weight: 800; color: var(--vio-2); white-space: nowrap; margin-right: 2px; }
.ctxbar .cx { flex: 0 0 auto; border: 1px solid var(--uppy-blue-line); background: #fff; border-radius: 100px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; cursor: pointer; transition: transform .15s var(--ease-spring), box-shadow .2s ease; }
.ctxbar .cx .k { font-size: 10px; font-weight: 700; color: var(--faint); margin-right: 4px; }
.ctxbar .cx:active { transform: scale(.95); }
.ctxbar .cx.cx-new { animation: cxNew .9s var(--ease-expo); }
.ctxbar .cx.cx-add { animation: cxAdd .5s var(--ease-back); }
@keyframes cxNew { 0% { box-shadow: 0 0 0 0 rgba(100, 51, 223, .5); background: #EFE8FF; transform: scale(1.06); } 100% { box-shadow: 0 0 0 8px rgba(100, 51, 223, 0); background: #fff; transform: none; } }
@keyframes cxAdd { from { opacity: 0; transform: translateY(-6px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ctxbar, .ctxbar .cx { transition: none !important; animation: none !important; } }
/* v7.12 실데이터 카드 — 사진 없는 항목은 히어로를 접고 얇은 띠로 */
.tc .tc-hero-s { display: flex; align-items: center; gap: 7px; padding: 9px 14px; color: #fff; }
.tc-hero-s.tc-meal { background: linear-gradient(90deg, #7A2E0E, #E8762C); }
.tc-hero-s.tc-exp { background: linear-gradient(90deg, #0D4B5C, #1E9AA8); }
.tc-hero-s.tc-fest { background: linear-gradient(90deg, #3A0B4F, #B0378E); }
.tc-hero-s .tc-ic { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.tc-hero-s .tc-ic svg { width: 16px; height: 16px; color: #fff; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tc-hero-s .tc-kind { font-size: 12px; font-weight: 700; letter-spacing: -.01em; }
.tc-hero-s .tc-badge, .tc-hero-s span:last-child:not(.tc-kind):not(.tc-ic) { margin-left: auto; }
.tc-hero .tc-ph-note { position: absolute; left: 10px; top: 8px; font-size: 10px; line-height: 1; padding: 4px 6px; border-radius: 6px; background: rgba(0, 0, 0, .38); color: rgba(255, 255, 255, .92); }
.tc .tc-info { font-size: 12px; line-height: 1.5; color: var(--fg-2, #5b6270); margin: 4px 0 2px; }
.tc-src { font-size: 11px; color: var(--fg-3, #8a909c); margin: 2px 0 8px 46px; line-height: 1.45; }
.tc-src a { color: var(--brand, #6433DF); font-weight: 700; text-decoration: none; }