/* 움직임 — 차분하게, 한 번만. '동작 줄이기'를 켠 사용자에게는 모두 끔 (맨 아래) */
:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .2s;
  --t-mid: .4s;
  --t-slow: .6s;
}

/* 첫 화면: 제목 → 설명 → 버튼 → 진단 상자 순서로 올라오며 나타남 */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-in { opacity: 0; animation: rise var(--t-slow) var(--ease) forwards; animation-delay: calc(var(--i, 0) * .1s + .05s); }

/* 스크롤하면 나타남 (motion.js 가 .reveal 을 붙이고, 화면에 들어오면 .in) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: calc(var(--d, 0) * .08s); }
.reveal.in { opacity: 1; transform: none; }

/* 카드 떠오르기 */
.card { transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); }
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15, 30, 61, .04), 0 14px 32px rgba(15, 30, 61, .10); border-color: var(--brand-line); }
  .plusone .card:hover { border-color: rgba(255, 255, 255, .3); box-shadow: 0 14px 32px rgba(0, 0, 0, .25); }
  .rec .card:hover, .r-block .card:hover { transform: none; box-shadow: none; }
}
/* 버튼: 색 변화 + 누르면 살짝 눌림 */
.btn { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(37, 99, 235, .28); }
.btn:active, .opt:active, .chip:active { transform: scale(.98); }
.opt, .chip { transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }

/* 자금 종류 흐르는 띠 */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; overflow: hidden; padding: 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker ul { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker li { padding: 18px 26px; font-weight: 700; font-size: 15px; color: var(--ink-2); white-space: nowrap; display: flex; align-items: center; gap: 26px; }
.ticker li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-line); }
.ticker li b { color: var(--brand); font-weight: 800; margin-right: 6px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* 미니 진단 막대 */
.mini-bar { margin-top: 12px; height: 8px; border-radius: 99px; background: #fff; position: relative; overflow: hidden; }
.mini-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, #60a5fa, var(--brand)); transition: left .8s var(--ease), width .8s var(--ease); }
.gauge .fill { transition: left .9s var(--ease), width .9s var(--ease); }
.mini-result { transition: background-color var(--t-mid) var(--ease); }
.mini-result.flash { background: var(--brand-soft); }

/* 진단 문항 바뀔 때 */
.q-swap { animation: rise var(--t-mid) var(--ease); }
#result > * { animation: rise var(--t-slow) var(--ease) backwards; }
#result > *:nth-child(2) { animation-delay: .06s; } #result > *:nth-child(3) { animation-delay: .12s; }
#result > *:nth-child(4) { animation-delay: .18s; } #result > *:nth-child(n+5) { animation-delay: .24s; }

/* 사례 넘기기 */
.carousel { position: relative; }
.case-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 18px; scrollbar-width: none; overscroll-behavior-x: contain; }
.case-track::-webkit-scrollbar { display: none; }
.case-track > .case { scroll-snap-align: start; }
.car-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; }
.car-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.car-dots button { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: var(--line); cursor: pointer; transition: width var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease); }
.car-dots button[aria-current="true"] { width: 24px; background: var(--brand); }
.car-btns { display: flex; gap: 8px; }
.car-btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.car-btn:hover { border-color: var(--brand); color: var(--brand); }
.car-btn:active { transform: scale(.96); }
.car-btn:disabled { opacity: .35; cursor: default; }
.car-btn svg { width: 18px; height: 18px; }
@media (max-width: 1024px) { .case-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .case-track { grid-auto-columns: 86%; gap: 14px; } }

/* 자주 묻는 질문 부드럽게 펼치기 */
details .ans { overflow: hidden; }
summary::after { transition: transform var(--t-mid) var(--ease); }
details[open] summary::after { content: "+"; transform: rotate(45deg); }

/* 휴대폰 하단 버튼: 첫 화면을 지나면 나타남 */
@media (max-width: 860px) {
  .dock.auto { transform: translateY(110%); transition: transform var(--t-mid) var(--ease); }
  .dock.auto.show { transform: none; }
}

/* 숫자 강조 */
.count { font-variant-numeric: tabular-nums; }

/* 동작 줄이기 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-in, .reveal { opacity: 1 !important; transform: none !important; }
  .ticker-track { transform: none !important; }
  .card:hover { transform: none !important; }
  .dock.auto { transform: none !important; }
}

/* 비교표: 줄마다 차례로, 체크 표시는 톡 하고 나타남 */
.vs.reveal { transform: none; }
.vs.reveal .vs-row > div { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--r, 0) * .07s); }
.vs.reveal .vs-plus { transition-delay: calc(var(--r, 0) * .07s + .05s); }
.vs.reveal.in .vs-row > div { opacity: 1; transform: none; }
.vs.reveal .ok-ic { transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1); transition-delay: calc(var(--r, 0) * .07s + .3s); }
.vs.reveal.in .ok-ic { transform: scale(1); }
@media (hover: hover) {
  .vs-row:not(.vs-head):hover .vs-plus { background: var(--brand-soft); }
  .vs-row:not(.vs-head):hover .vs-lab { background: #16306b; }
  .vs-plus, .vs-lab { transition: background-color .2s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .vs.reveal .vs-row > div, .vs.reveal .ok-ic { opacity: 1 !important; transform: none !important; }
}

/* 첫 화면 문구: 작은 제목 → 선 → 큰 문장 → 설명 순서로 */
@keyframes capLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cap.is-on .cap-label { animation: rise .6s var(--ease) both; }
.cap.is-on .cap-line { animation: capLine .7s var(--ease) .25s both; }
.cap.is-on .cap-title { animation: rise .8s var(--ease) .5s both; }
.cap.is-on .cap-sub { animation: rise .7s var(--ease) .85s both; }
.cap:not(.is-on) > * { opacity: 0; transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) {
  .cap.is-on > * { opacity: 1 !important; transform: none !important; }
}

/* 무료정보방 안내: 오른쪽에서 스르륵 */
.float-chat { opacity: 0; transform: translateX(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.float-chat.show { opacity: 1; transform: none; }
.float-chat:not(.show) { pointer-events: none; }
.float-chat:not(.show) > * { pointer-events: none; }
.fc-bubble { transition: transform .2s var(--ease); }
.fc-bubble:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .float-chat { transform: none !important; } }