/* 첫 화면 아이콘 버튼을 누르면 나오는 동작 (icon-fx.js와 함께 사용) */
.fx { position: relative; display: inline-block; line-height: 0; vertical-align: top; }
.fx > img { display: block; }
.fx > span, .fx > .fx-part { position: absolute; pointer-events: none; }
.fx > .fx-part { left: 0; top: 0; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; }
.fx-play .fx * { will-change: transform, opacity; }

/* ── 전구: 깜빡이다 불이 들어옴 ── */
.fx-glow { left: 50%; top: 38%; width: 190%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.6); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 90, .75), rgba(255, 200, 60, .25) 55%, transparent 100%); opacity: 0; z-index: -1; }
.fx-play .fx-bulb > img { animation: bulb-on .8s linear both; }
.fx-play .fx-glow { animation: bulb-glow .8s linear both; }
@keyframes bulb-on {
  0%   { filter: none; }
  12%  { filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.15) drop-shadow(0 0 6px rgba(255, 210, 80, .9)); }
  22%  { filter: none; }
  34%, 100% { filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.2) drop-shadow(0 0 10px rgba(255, 210, 80, 1)); }
}
@keyframes bulb-glow {
  0%, 8% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  12% { opacity: .7; } 22% { opacity: 0; }
  34%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── 의료진: 모자를 들어 올리고 → 고개 숙여 인사 → 일어나며 모자를 다시 씀 ──
   원본 아이콘은 모자가 정수리 선을 대신하므로, 모자를 들 때 정수리 선(.fx-crown)을 그려 머리 선을 이어 줌 */
.fx-doctor > img:first-child, .fx-doctor > .fx-crown { clip-path: inset(16% 0 0 0); transform-origin: 50% 100%; }
.fx-doctor > img:first-child { clip-path: inset(16% 0 0 0); }
.fx-doctor > .fx-crown { left: 0; top: 0; width: 100%; height: 100%; clip-path: none; opacity: 0; }
.fx-doctor > .fx-crown svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fx-doctor > .fx-hat { clip-path: inset(0 0 84% 0); transform-origin: 50% 12%; }
.fx-play .fx-doctor > img:first-child { animation: bow 1.1s cubic-bezier(.45, 0, .25, 1) both; }
.fx-play .fx-doctor > .fx-crown { animation: bow 1.1s cubic-bezier(.45, 0, .25, 1) both, crown 1.1s linear both; }
.fx-play .fx-doctor > .fx-hat { animation: hat-off 1.1s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes crown { 0%, 6% { opacity: 0; } 14%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes hat-off {
  0%        { transform: none; }
  24%       { transform: translate(14%, -12%) rotate(18deg); }
  78%       { transform: translate(14%, -12%) rotate(18deg); }
  96%, 100% { transform: none; }
}
@keyframes bow {
  0%, 26%   { transform: none; }
  46%, 60%  { transform: perspective(220px) rotateX(24deg) translateY(5%) scaleY(.94); }
  78%, 100% { transform: none; }
}

/* ── 진료 질환: 펜이 줄을 따라 씀 ── */
.fx-pencil { left: 40%; top: 38%; width: 34%; aspect-ratio: 1; opacity: 0; transform-origin: 20% 90%; }
.fx-pencil svg { width: 100%; height: 100%; display: block; }
.fx-play .fx-pencil { animation: pen-write .8s linear both; }
@keyframes pen-write {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: 1; transform: translate(0, 0); }
  24%  { transform: translate(60%, 4%); }
  30%  { transform: translate(-30%, 50%); }
  48%  { transform: translate(60%, 54%); }
  54%  { transform: translate(-30%, 100%); }
  72%  { transform: translate(40%, 104%); }
  90%  { opacity: 1; transform: translate(50%, 90%) rotate(-10deg); }
  100% { opacity: 0; transform: translate(50%, 90%) rotate(-10deg); }
}

/* ── 빛과 소금: 강사가 말하는 말풍선 ── */
.fx-bubble { left: 36%; top: 20%; width: 30%; height: 18%; background: #fff; border: 2px solid #111; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 9%; transform: scale(0); transform-origin: 0 100%; opacity: 0; }
.fx-bubble::after { content: ""; position: absolute; left: 8%; bottom: -26%; width: 18%; height: 34%; background: #fff;
  border-left: 2px solid #111; border-bottom: 2px solid #111; transform: skewX(30deg); }
.fx-bubble i { width: 13%; aspect-ratio: 1; border-radius: 50%; background: #111; opacity: .25; }
.fx-play .fx-bubble { animation: bubble-pop .8s cubic-bezier(.3, 1.4, .5, 1) both; }
.fx-play .fx-bubble i { animation: dot .8s linear both; }
.fx-play .fx-bubble i:nth-child(2) { animation-delay: .1s; }
.fx-play .fx-bubble i:nth-child(3) { animation-delay: .2s; }
.fx-play .fx-talk > img { animation: speak .8s ease-in-out both; transform-origin: 30% 100%; }
@keyframes bubble-pop { 0% { transform: scale(0); opacity: 0; } 25%, 100% { transform: scale(1); opacity: 1; } }
@keyframes dot { 0%, 25% { opacity: .25; } 40% { opacity: 1; } 55% { opacity: .25; } 70% { opacity: 1; } 85%, 100% { opacity: .4; } }
@keyframes speak { 0%, 100% { transform: none; } 30% { transform: rotate(-1.5deg); } 55% { transform: rotate(1deg); } }

/* ── 제선한의원: 병원 문이 열림 ── */
.fx-door { perspective: 300px; }
.fx-light, .fx-doorpanel { left: 39.7%; top: 76%; width: 17.2%; height: 22%; }
.fx-light { background: linear-gradient(180deg, #fff3c4, #ffd36b); opacity: 0; }
.fx-doorpanel { background: #c9efdc; border: 0; transform-origin: 0 50%; opacity: 0; box-shadow: inset -2px 0 0 rgba(0, 0, 0, .12); }
.fx-doorpanel::after { content: ""; position: absolute; right: 18%; top: 50%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: #1fbf8f; }
.fx-play .fx-light { animation: door-light .8s ease-out both; }
.fx-play .fx-doorpanel { animation: door-open .8s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes door-light { 0%, 25% { opacity: 0; } 70%, 100% { opacity: 1; box-shadow: 0 0 14px 4px rgba(255, 214, 110, .7); } }
@keyframes door-open {
  0%   { opacity: 1; transform: none; }
  25%  { opacity: 1; transform: none; }
  80%, 100% { opacity: 1; transform: rotateY(-78deg); }
}

/* ── 원장 칼럼: 손이 침을 톡톡 놓음 ── */
.fx-needle > img:first-child { clip-path: polygon(0 0, 44% 0, 44% 72%, 62% 64%, 100% 58%, 100% 100%, 0 100%); }
.fx-needle > .fx-hand { clip-path: polygon(44% 0, 100% 0, 100% 58%, 62% 64%, 44% 72%); }
.fx-play .fx-needle > .fx-hand { animation: tap-needle .8s ease-in-out both; }
@keyframes tap-needle {
  0%, 100% { transform: none; }
  16% { transform: translate(-5%, 14%) rotate(-4deg); } 28% { transform: translate(1%, -4%); }
  46% { transform: translate(-7%, 16%) rotate(-5deg); } 58% { transform: translate(1%, -4%); }
  76% { transform: translate(-5%, 12%) rotate(-3deg); }
}


/* ── 위치 및 진료시간: 정면 차가 (차 입장에서) 왼쪽으로 90° 방향을 틀어 옆모습이 되고 → P로 달려감
      → P가 팩맨처럼 입을 벌려 맞이하고 → 차가 들어가면 꿀꺽 닫힘 ── */
.fx-car > img:first-child {            /* P (입 닫힘 = 사각형 그대로) */
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 45% 100%, 45% 50%, 45% 50%, 45% 50%); transform-origin: 71.6% 50%; }
.fx-car > .fx-carpart { clip-path: inset(0 55% 0 0); z-index: 1; transform-origin: 23% 52%; }   /* 정면 차 */
/* 옆모습 차: 높이를 정면 차(아이콘 높이의 76.5%)와 같게, 폭은 옆모습 비율(66:42)대로. 가운데를 정면 차 중심(x 23%)에 맞춤 */
.fx-side { left: -5.7%; top: 13.6%; width: 57.6%; height: 76.5%; z-index: 2; opacity: 0; transform-origin: 50% 60%; }
.fx-side svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fx-play .fx-car > .fx-carpart { animation: car-turn 1.1s linear both; }
.fx-play .fx-side { animation: car-drive 1.1s linear both; }
.fx-play .fx-car > img:first-child { animation: pac 1.1s linear both; }
/* 정면 차: 방향을 틀며 폭이 좁아져 사라짐 */
@keyframes car-turn {
  0%   { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  20%  { transform: scaleX(0); opacity: 1; }
  21%, 100% { transform: scaleX(0); opacity: 0; }
}
/* 옆모습 차: 돌아선 모습으로 나타나 → P 입으로 달려가 → 빨려 들어가듯 작아짐 */
@keyframes car-drive {
  0%, 19% { opacity: 0; transform: scaleX(0); }
  20%     { opacity: 1; transform: scaleX(0); animation-timing-function: cubic-bezier(.1, .4, .5, 1); }
  32%     { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5, 0, .4, 1); }
  64%     { opacity: 1; transform: translateX(52%); animation-timing-function: ease-in; }
  76%     { opacity: 0; transform: translateX(84%) scale(.22); }
  100%    { opacity: 0; transform: translateX(84%) scale(.22); }
}
/* P: 차가 다가오면 입을 벌리고(왼쪽 = 차 쪽), 들어오면 꿀꺽 닫고 살짝 부풂 */
@keyframes pac {
  0%, 30%  { clip-path: polygon(45% 0, 100% 0, 100% 100%, 45% 100%, 45% 50%, 45% 50%, 45% 50%); transform: none; filter: none;
             animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  46%, 68% { clip-path: polygon(45% 0, 100% 0, 100% 100%, 45% 100%, 45% 86%, 71.6% 50%, 45% 14%); transform: none;
             animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  78%      { clip-path: polygon(45% 0, 100% 0, 100% 100%, 45% 100%, 45% 50%, 45% 50%, 45% 50%); transform: scale(1.1); filter: saturate(2.5); }
  88%      { transform: scale(.97); }
  100%     { clip-path: polygon(45% 0, 100% 0, 100% 100%, 45% 100%, 45% 50%, 45% 50%, 45% 50%); transform: none; filter: saturate(2.5); }
}

/* ── 메일: 봉투 뚜껑이 열리고 편지가 올라옴 ── */
.fx-mail { perspective: 260px; }
.fx-flap { left: 0; top: 0; width: 100%; height: 52%; transform-origin: 50% 0; opacity: 0; z-index: 2; }
.fx-flap svg, .fx-letter svg { width: 100%; height: 100%; display: block; }
.fx-letter { left: 12%; width: 76%; bottom: 40%; height: 90%; opacity: 0; transform: translateY(40%); z-index: 1;
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent 70.5%); mask: linear-gradient(180deg, #000 70%, transparent 70.5%); }
.fx-play .fx-flap { animation: flap .8s cubic-bezier(.5, 0, .2, 1) both; }
.fx-play .fx-letter { animation: letter-up .8s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes flap { 0% { opacity: 1; transform: none; } 15% { opacity: 1; transform: none; } 50%, 100% { opacity: 1; transform: rotateX(178deg); } }
@keyframes letter-up { 0%, 40% { opacity: 0; transform: translateY(40%); } 50% { opacity: 1; } 85%, 100% { opacity: 1; transform: translateY(-8%); } }

/* ── 비급여: 카드를 든 손이 동전 쪽으로 다가간 뒤 → 동전이 돌며 짤랑 ── */
.fx-coin > img:first-child { clip-path: inset(0 49% 0 0); transform-origin: 25% 60%; }
.fx-coin > .fx-coinpart { clip-path: inset(0 0 0 51%); transform-origin: 75.5% 50%; }
.fx-spark { left: 51%; top: 0; width: 49%; height: 100%; }
.fx-spark i { position: absolute; width: 14%; aspect-ratio: 1; opacity: 0; background: #f6b73c;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.fx-spark i:nth-child(1) { left: 0; top: 4%; } .fx-spark i:nth-child(2) { right: -6%; top: 18%; } .fx-spark i:nth-child(3) { right: 6%; bottom: 0; }
.fx-play .fx-coin > img:first-child { animation: hand-give 1s cubic-bezier(.45, 0, .25, 1) both; }
.fx-play .fx-coin > .fx-coinpart { animation: coin-jingle 1s cubic-bezier(.3, 0, .3, 1) both; }
.fx-play .fx-spark i { animation: spark 1s ease-out .3s both; }
.fx-play .fx-spark i:nth-child(2) { animation-delay: .42s; } .fx-play .fx-spark i:nth-child(3) { animation-delay: .54s; }
@keyframes hand-give {
  0%        { transform: none; }
  24%       { transform: translateX(13%) rotate(-8deg); }
  34%       { transform: translateX(11%) rotate(-4deg); }
  60%, 100% { transform: none; }
}
@keyframes coin-jingle {
  0%, 26% { transform: translateY(0)    rotate(0)     rotateY(0); }
  48%     { transform: translateY(-14%) rotate(0)     rotateY(360deg); }
  60%     { transform: translateY(0)    rotate(0)     rotateY(540deg); }
  70%     { transform: translateY(-5%)  rotate(8deg)  rotateY(720deg); }
  80%     { transform: translateY(0)    rotate(-6deg) rotateY(720deg); }
  88%     { transform: translateY(0)    rotate(4deg)  rotateY(720deg); }
  100%    { transform: translateY(0)    rotate(0)     rotateY(720deg); }
}
@keyframes spark { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.1) rotate(30deg); } 70%, 100% { opacity: 0; transform: scale(.6) rotate(60deg); } }

@media (prefers-reduced-motion: reduce) { .fx-play .fx *, .fx-play .fx { animation: none !important; } }