/* ==========================================================================
   savetax 꼬마 에이전트(₩ 마스코트) — js/mascot.js의 마크업을 꾸민다. 모든 규칙은 .mascot*·.mf*·.logo-face와
   그것을 담는 자리(#nav 로고·.footer·.loader·.empty·.term-perch) 범위. 움직임은 transform·opacity 키프레임뿐이고,
   prefers-reduced-motion이면 app.css의 전역 규칙이 키프레임을 끝 상태로 멈춘다(헤더 로고는 ₩, 빼꼼이들은 숨은 채).
   운영자 화면(body.adm-mode)에서는 보이지 않는다.
   ========================================================================== */

.mascot {
  position: relative; display: inline-block; flex: none; vertical-align: middle;
  width: 40px; height: 40px; border-radius: 29.4%; background: #f36f3d;
}
.mascot .mf { display: block; width: 100%; height: 100%; overflow: visible; }
.mascot-sm { width: 26px; height: 26px; }
.mascot-md { width: 40px; height: 40px; }
.mascot-lg { width: 92px; height: 92px; box-shadow: 0 18px 30px -16px rgba(234, 95, 44, 0.6); }
.adm-mode .mascot, .adm-mode .mascot-ledge { display: none; }

/* 눈: 가끔 깜빡이고(사람마다 다른 박자), .mascot-look은 두리번거린다 */
.mascot .mf-eye { transform-box: fill-box; transform-origin: center; animation: mf-blink 4.2s infinite; animation-delay: calc(var(--d, 0s) + 1.3s); }
.mascot .mf-pupils { transition: transform 0.25s ease; }
.mascot-look .mf-pupils { animation: mf-look 5.2s ease-in-out infinite; }
@keyframes mf-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes mf-look { 0%, 18% { transform: translate(0, 0); } 28%, 44% { transform: translate(-2.6px, 0.6px); } 54%, 70% { transform: translate(2.6px, 0.6px); } 80%, 100% { transform: translate(0, -1.4px); } }

/* 헤더 로고: ₩ ↔ 얼굴로 번갈아 뒤집힌다(인트로가 끝난 뒤 5초 지나 처음 뒤집힌다 — 인트로의 로고 착지가 ₩에 내려앉게) */
#nav .logo-mark.is-flipper { position: relative; }
#nav .logo-mark .logo-face { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
#nav .logo-mark .logo-face .mf { display: block; width: 100%; height: 100%; }
#nav .logo-mark .logo-face .mf-eye { transform-box: fill-box; transform-origin: center; animation: mf-blink 3.1s infinite 0.8s; }
#nav .logo-mark .logo-face .mf-pupils { animation: mf-look 7s ease-in-out infinite; }
html.mascot-live #nav .logo-mark.is-flipper { animation: logo-flip 14s cubic-bezier(0.45, 0, 0.2, 1) 5s infinite; }
html.mascot-live #nav .logo-mark.is-flipper .logo-glyph { animation: logo-front 14s linear 5s infinite; }
html.mascot-live #nav .logo-mark.is-flipper .logo-face { animation: logo-back 14s linear 5s infinite; }
@keyframes logo-flip {
  0%, 44% { transform: perspective(160px) rotateY(0deg) translateY(0); }
  46% { transform: perspective(160px) rotateY(60deg) translateY(-3px); }
  47% { transform: perspective(160px) rotateY(90deg) translateY(-3px); }
  47.01% { transform: perspective(160px) rotateY(-90deg) translateY(-3px); }
  50%, 94% { transform: perspective(160px) rotateY(0deg) translateY(0); }
  96% { transform: perspective(160px) rotateY(60deg) translateY(-3px); }
  97% { transform: perspective(160px) rotateY(90deg) translateY(-3px); }
  97.01% { transform: perspective(160px) rotateY(-90deg) translateY(-3px); }
  100% { transform: perspective(160px) rotateY(0deg) translateY(0); }
}
@keyframes logo-front { 0%, 47% { opacity: 1; } 47.01%, 97% { opacity: 0; } 97.01%, 100% { opacity: 1; } }
@keyframes logo-back { 0%, 47% { opacity: 0; } 47.01%, 97% { opacity: 1; } 97.01%, 100% { opacity: 0; } }

/* 로딩: 셋이 차례로 콩콩 */
.mascot-hop { display: inline-flex; align-items: flex-end; gap: 10px; height: 46px; }
.mascot-hop .mascot { transform-origin: 50% 100%; animation: mascot-hop 1.05s cubic-bezier(0.3, 0.7, 0.4, 1) infinite; animation-delay: var(--d, 0s); }
body:not(.adm-mode) .loader { align-content: center; }
body:not(.adm-mode) .loader > i { display: none; }
@keyframes mascot-hop {
  0%, 62%, 100% { transform: translateY(0) scale(1, 1); }
  8% { transform: translateY(0) scale(1.14, 0.84); }
  28% { transform: translateY(-18px) scale(0.93, 1.09); }
  48% { transform: translateY(0) scale(1.12, 0.88); }
}

/* 빈 화면(EmptyState): 두리번거리는 꼬마 한 마리 — 디자인 시스템 agent-lg(64px)와 같은 얼굴, 왼쪽을 본다 */
body:not(.adm-mode) .empty::before {
  content: ''; width: 64px; height: 64px; border-radius: 29.4%;
  background: #f36f3d url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cellipse%20cx%3D%2222.5%22%20cy%3D%2229%22%20rx%3D%227.4%22%20ry%3D%228.8%22%20fill%3D%22%23ffffff%22%2F%3E%3Cellipse%20cx%3D%2241.5%22%20cy%3D%2229%22%20rx%3D%227.4%22%20ry%3D%228.8%22%20fill%3D%22%23ffffff%22%2F%3E%3Cg%20transform%3D%22translate(-2.6%200)%22%3E%3Ccircle%20cx%3D%2222.5%22%20cy%3D%2230%22%20r%3D%224%22%20fill%3D%22%23191714%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2228.4%22%20r%3D%221.25%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%2241.5%22%20cy%3D%2230%22%20r%3D%224%22%20fill%3D%22%23191714%22%2F%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%2228.4%22%20r%3D%221.25%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D%2213.5%22%20cy%3D%2240.5%22%20rx%3D%224.6%22%20ry%3D%222.7%22%20fill%3D%22%23ffc1a3%22%20opacity%3D%22.8%22%2F%3E%3Cellipse%20cx%3D%2250.5%22%20cy%3D%2240.5%22%20rx%3D%224.6%22%20ry%3D%222.7%22%20fill%3D%22%23ffc1a3%22%20opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M27.5%2041%20Q32%2045.6%2036.5%2041%22%20fill%3D%22none%22%20stroke%3D%22%237a2a0c%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
  box-shadow: 0 12px 20px -10px rgba(234, 95, 44, 0.55);
  animation: mascot-shrug 3.6s ease-in-out infinite;
}
@keyframes mascot-shrug { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-8deg) translateY(-2px); } 50% { transform: rotate(0) translateY(0); } 75% { transform: rotate(8deg) translateY(-2px); } }

/* 없는 경로: 길 잃은 한 마리 + 물음표 */
.mascot-lost { position: relative; display: inline-block; margin: 4px 0 10px; }
.mascot-lost .mascot { animation: mascot-bob 2.6s ease-in-out infinite; }
.mascot-q { position: absolute; right: -26px; top: -22px; font-size: 34px; font-weight: 800; line-height: 1; color: #f36f3d; transform-origin: 0 100%; animation: mascot-q 2.6s ease-in-out infinite; }
@keyframes mascot-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes mascot-q { 0%, 100% { transform: rotate(-10deg) scale(1); opacity: 0.9; } 50% { transform: rotate(12deg) scale(1.12); opacity: 1; } }

/* 랜딩 터미널: 창 뒤에 숨어 있다가 번갈아 빼꼼 */
.term-perch { position: relative; }
.mascot-perch { position: absolute; left: 0; right: 0; top: -44px; height: 44px; overflow: hidden; pointer-events: none; }
.mascot-peek { position: absolute; bottom: 0; transform: translateY(105%); animation: mascot-peek 9.2s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; animation-delay: calc(var(--d, 0s) + 2.2s); }
.mascot-perch .mascot-peek { right: 14%; }
.mascot-perch .mascot-peek.is-b { right: auto; left: 22%; }
.mascot-peek .mf-pupils { transform: translate(-1.4px, 2.2px); }
@keyframes mascot-peek {
  0%, 6% { transform: translateY(105%); }
  14%, 30% { transform: translateY(16%); }
  33% { transform: translateY(26%); }
  36%, 44% { transform: translateY(14%); }
  50%, 100% { transform: translateY(105%); }
}

/* 에이전트 지침서: 제목 옆에서 한 번 통 튀고 인사 */
.mascot-hello { margin-left: 10px; transform-origin: 50% 100%; animation: mascot-hello 1.3s cubic-bezier(0.3, 0.7, 0.4, 1) 0.25s both; }
@keyframes mascot-hello {
  0% { transform: translateY(14px) scale(0.6); opacity: 0; }
  30% { transform: translateY(-10px) scale(0.95, 1.08); opacity: 1; }
  52% { transform: translateY(0) scale(1.12, 0.88); }
  66% { transform: rotate(-8deg); }
  80% { transform: rotate(8deg); }
  100% { transform: none; opacity: 1; }
}

/* 푸터: 윗변 너머로 셋이 번갈아 빼꼼 */
.footer { position: relative; }
.mascot-ledge { position: absolute; left: max(20px, calc((100% - 1200px) / 2 + 24px)); top: -30px; width: 120px; height: 30px; overflow: hidden; pointer-events: none; display: flex; gap: 10px; align-items: flex-end; }
.mascot-ledge .mascot { position: relative; animation-duration: 8.2s; }