/* 상담 흐름 모션 — DESIGN 2026-10-11. 색은 우리 토큰 값만(design/homepage/v3/v3-tokens.css). */
.mf { --mf-accent: #0F766E; --mf-ink: #1C1A17; --mf-canvas: #FAF7F2; --mf-muted: #6E675E; position: relative; }
.mf-stage { position: relative; width: 100%; aspect-ratio: var(--mf-aspect, 834 / 1194); overflow: hidden; border-radius: 24px; background: var(--mf-canvas); box-shadow: 0 8px 24px rgba(28, 26, 23, .06); }
.mf-view { position: absolute; left: 0; top: 0; width: 834px; height: 1194px; transform-origin: 0 0; overflow: hidden; }
.mf-cam { position: absolute; left: 0; top: 0; width: 834px; height: 1194px; transform-origin: 0 0; will-change: transform; }
.mf-sheet { position: absolute; left: 0; top: 0; width: 834px; opacity: 0; transition: opacity .25s ease; will-change: transform; transform-origin: 0 0; }
.mf-sheet.on { opacity: 1; }
.mf-sheet > img { display: block; width: 834px; height: auto; }
.mf-o, .mf-cover, .mf-type, .mf-ring, .mf-wipe, .mf-pen, .mf-sig, .mf-tap { position: absolute; }
.mf-type { overflow: hidden; }
.mf-type img { display: block; height: 30px; max-width: none; }
.mf-ring { box-sizing: border-box; border: 1.5px solid var(--mf-accent); border-radius: 10px; background: rgba(15, 118, 110, .06); }
.mf-mark { border-width: 1px; border-radius: 4px; }
.mf-wipe { overflow: hidden; }
.mf-wipe img { position: absolute; max-width: none; }
.mf-pen { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--mf-ink); box-shadow: 0 0 0 4px rgba(28, 26, 23, .15); }
.mf-sig { overflow: visible; }
.mf-sig path { fill: none; stroke: var(--mf-ink); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }
.mf-brow { position: absolute; overflow: visible; pointer-events: none; }
.mf-brow path { fill: none; stroke: #3E302A; stroke-opacity: .88; stroke-width: var(--mf-brow-w, 1.6px); stroke-linecap: round; stroke-linejoin: round; }
.mf-tap { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(15, 118, 110, .28); border: 2px solid rgba(15, 118, 110, .55); animation: mf-tap .42s ease-out forwards; pointer-events: none; }
@keyframes mf-tap { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
.mf-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 5; }
.mf-flash.go { animation: mf-flash .35s ease-out; }
@keyframes mf-flash { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
.mf-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); opacity: 0; transition: opacity .3s ease; }
.mf-dim.on { opacity: 1; }
.mf-drawer { position: absolute; top: 0; transform: translateX(100%); transition: transform .3s ease; max-width: none; }
.mf-drawer.on { transform: none; }
.mf-replay { margin-top: 12px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid #E5DED2; background: #fff; color: var(--mf-ink); font: 500 15px/1 Pretendard, "Pretendard Variable", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; cursor: pointer; transition: background .15s; }
.mf-replay:hover:not(:disabled) { background: #F3EEE6; }
.mf-replay:disabled { color: var(--mf-muted); cursor: default; }
.mf-replay:focus-visible { outline: 2px solid var(--mf-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .mf-sheet, .mf-dim, .mf-drawer, .mf-wipe, .mf-pen, .mf-replay { transition: none !important; }
  .mf-tap, .mf-flash { display: none; }
}