/* 새 일을 시작하는 버튼의 움직임 (2026-10-05, Approval Flow 「작성하기」와 같은 느낌) — 서버가 모든 페이지에 붙임.
   붙이는 곳: 상신 · 출근 기록 · 고객 추가 · Meeting Log · 회의 잡기 · AI 초안 쓰기 · 일괄 판독 · 채우기.
   매일 여러 번 누르는 확정 버튼(승인 · 반려 · 저장)에는 붙이지 않음.
     .fx-cta            살짝 떠오름 · 빛이 한 번 스침 · 누르면 살짝 눌림 · 아이콘이 살짝 커짐
     .fx-cta.fx-plus    + 아이콘이 90° 돎
     .fx-cta.fx-ai      ✦ 아이콘이 기울며 반짝
     .fx-cta.fx-light   밝은 버튼 — 빛을 짙은 색으로 */
.fx-cta { position:relative; overflow:hidden; flex-shrink:0; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.fx-cta svg, .fx-cta .fx-ico { transition:transform .3s ease; }
.fx-cta::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
                 background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg); }
.fx-cta.fx-light::after { background:linear-gradient(100deg, transparent, rgba(13,59,102,.14), transparent); }
.fx-cta:hover { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 8px 18px rgba(15,23,42,.22); }
.fx-cta:hover::after { animation:fx-cta-shine .7s ease forwards; }
.fx-cta:hover svg, .fx-cta:hover .fx-ico { transform:scale(1.15); }
.fx-cta.fx-plus:hover svg, .fx-cta.fx-plus:hover .fx-ico { transform:rotate(90deg); }
.fx-cta.fx-ai:hover svg, .fx-cta.fx-ai:hover .fx-ico { animation:fx-cta-sparkle .6s ease; }
.fx-cta:active { transform:translateY(0) scale(.97); box-shadow:0 3px 8px rgba(15,23,42,.18); transition-duration:.08s; }
.fx-ico { display:inline-block; width:1.1em; height:1.1em; flex:none; margin-right:6px; vertical-align:-.15em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes fx-cta-shine { to { left:130%; } }
@keyframes fx-cta-sparkle { 0% { transform:rotate(0) scale(1); } 40% { transform:rotate(-14deg) scale(1.2); } 70% { transform:rotate(8deg) scale(1.1); } 100% { transform:rotate(0) scale(1.15); } }
@media (prefers-reduced-motion:reduce) {
  .fx-cta, .fx-cta svg, .fx-cta .fx-ico { transition:none; }
  .fx-cta:hover, .fx-cta:active { transform:none; }
  .fx-cta:hover svg, .fx-cta:hover .fx-ico { transform:none; animation:none; }
  .fx-cta:hover::after { animation:none; }
}