/* ==========================================================================
   디지털 인증제 진행상황 안내 도우미 위젯 (2D 애니메이션 마스코트 '알피')
   ========================================================================== */

:root {
  --hw-size: 72px;
  --hw-mobile-size: 56px;
  --hw-zindex: 9999;
  --hw-shadow-lg: 0 16px 36px rgba(0, 41, 108, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
  --hw-shadow-sm: 0 6px 18px rgba(0, 41, 108, 0.14);
}

/* ── 위젯 컨테이너 ── */
.cmp-helper-widget {
  position: fixed;
  right: 26px;
  bottom: 28px;
  z-index: var(--hw-zindex);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none; /* 하위 대화형 요소에만 pointer-events 허용 */
  font-family: inherit;
  color: var(--ink, #131a21);
}

.cmp-helper-widget * {
  box-sizing: border-box;
}

/* ── 1. 말풍선 (Speech Bubble) ── */
.hw-bubble {
  pointer-events: auto;
  position: relative;
  margin-bottom: 12px;
  max-width: 280px;
  background: #ffffff;
  border: 1px solid var(--sky, #319ffd);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--hw-shadow-sm);
  transform-origin: bottom right;
  animation: hw-bubble-in 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.hw-bubble::after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: 28px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-right: 1px solid var(--sky, #319ffd);
  border-bottom: 1px solid var(--sky, #319ffd);
  transform: rotate(45deg);
}

.hw-bubble.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9) translateY(6px);
  pointer-events: none;
}

.hw-bubble-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-3, #566068);
  font-size: 15px;
  line-height: 1;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hw-bubble-close:hover {
  color: var(--ink, #131a21);
  background: var(--line-soft, #e9edf1);
}

.hw-bubble-content {
  padding-right: 14px;
}

.hw-bubble-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--sky-bg, #e8f2ff);
  color: var(--sky-dark, #2584dd);
  margin-bottom: 4px;
}

.is-fix .hw-bubble-tag {
  background: var(--coral-bg, #fdeeec);
  color: var(--coral, #e04b38);
}
.is-wait .hw-bubble-tag {
  background: var(--amber-bg, #fdf3e2);
  color: var(--amber-ink, #8e5c14);
}
.is-peer .hw-bubble-tag,
.is-badge .hw-bubble-tag,
.is-done .hw-bubble-tag {
  background: var(--green-bg, #f1f7e3);
  color: var(--green-ink, #4c720e);
}

.hw-bubble-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink, #131a21);
  font-weight: 600;
  word-break: keep-all;
}

/* ── 2. 캐릭터 트리거 버튼 (Character FAB Trigger) ── */
.hw-trigger {
  pointer-events: auto;
  position: relative;
  width: var(--hw-size);
  height: var(--hw-size);
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--sky-bg, #e8f2ff) 70%, #d4e7fe 100%);
  box-shadow: var(--hw-shadow-lg);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease;
}

.hw-trigger:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 20px 42px rgba(0, 41, 108, 0.22), 0 6px 14px rgba(0, 0, 0, 0.1);
}

.hw-trigger:active {
  transform: translateY(0) scale(0.98);
}

.hw-trigger:focus-visible {
  outline: 3px solid var(--sky, #319ffd);
  outline-offset: 3px;
}

/* 상태 알림 뱃지 */
.hw-badge-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.hw-badge-dot.alert {
  background: var(--coral, #e04b38);
  animation: hw-badge-bounce 1.6s infinite ease-in-out;
}

.hw-badge-dot.new {
  background: var(--sky, #319ffd);
  animation: hw-badge-pulse 2s infinite ease-in-out;
}

/* ── 캐릭터 SVG 아바타 & 2D 애니메이션 ── */
.hw-avatar {
  width: 82%;
  height: 82%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hw-svg-char {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 기본 플로팅 & 그림자 */
.hw-char-body {
  animation: hw-float 3.2s infinite ease-in-out;
  transform-origin: center bottom;
}

.hw-ground-shadow {
  animation: hw-shadow-pulse 3.2s infinite ease-in-out;
  transform-origin: 60px 122px;
}

/* 눈 깜빡임 */
.hw-eye {
  animation: hw-blink 4.2s infinite ease-in-out;
  transform-origin: 50% 40px;
}

/* 손 흔들기 */
.hw-hand-r {
  animation: hw-wave 2.8s infinite ease-in-out;
  transform-origin: 88px 74px;
}

/* 안테나 펄스 */
.hw-antenna-glow {
  animation: hw-pulse-glow 2.2s infinite ease-in-out;
  transform-origin: 60px 6px;
}

/* 상태별 파티클/반짝임 */
.hw-sparkle {
  opacity: 0;
}
.is-peer .hw-sparkle,
.is-badge .hw-sparkle,
.is-done .hw-sparkle {
  animation: hw-sparkle-spin 2.6s infinite ease-in-out;
  transform-origin: center;
}
.hw-sparkle-2 {
  animation-delay: 1.3s;
}

/* 호버 시 캐릭터 반응 */
.hw-trigger:hover .hw-char-body {
  animation-duration: 1.6s;
}
.hw-trigger:hover .hw-hand-r {
  animation: hw-wave-fast 0.8s infinite ease-in-out;
}

/* ── 3. 확장형 도우미 패널 (Guide Panel) ── */
.hw-panel {
  pointer-events: auto;
  position: absolute;
  right: 0;
  bottom: calc(var(--hw-size) + 14px);
  width: 330px;
  background: #ffffff;
  border: 1px solid var(--line, #dde2e7);
  border-radius: 18px;
  box-shadow: var(--hw-shadow-lg);
  display: none; /* 기본 닫힘 */
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: hw-panel-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.hw-panel.is-open {
  display: flex !important; /* 열림 상태 */
}

.hw-panel[hidden] {
  display: none !important;
}

/* 패널 헤더 */
.hw-panel-head {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--sky-bg, #e8f2ff) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line-soft, #e9edf1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hw-panel-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hw-panel-mini-avatar {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 1px solid var(--sky, #319ffd);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 41, 108, 0.08);
}
.hw-panel-mini-avatar i {
  color: var(--sky-dark, #2584dd);
  font-size: 18px;
}

.hw-panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy, #00416c);
}

.hw-panel-sub {
  font-size: 12px;
  color: var(--ink-3, #566068);
  font-weight: 600;
}

.hw-panel-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-3, #566068);
  font-size: 20px;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.hw-panel-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink, #131a21);
}

/* 패널 본문 */
.hw-panel-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
}

/* 4단계 여정 카드 */
.hw-journey-card {
  background: var(--panel-2, #f9fafb);
  border: 1px solid var(--line-soft, #e9edf1);
  border-radius: 12px;
  padding: 12px;
}

.hw-journey-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 10px;
}
.hw-journey-head b {
  color: var(--navy, #00416c);
}
.hw-journey-step {
  color: var(--sky-dark, #2584dd);
  font-weight: 700;
}

.hw-step-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  position: relative;
}

.hw-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hw-step-item span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--line, #dde2e7);
  color: var(--ink-3, #566068);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hw-step-item small {
  font-size: 11px;
  color: var(--ink-4, #5e6872);
  white-space: nowrap;
}

.hw-step-item.done span {
  background: var(--green, #5f8f12);
  color: #ffffff;
}
.hw-step-item.done small {
  color: var(--green-ink, #4c720e);
  font-weight: 700;
}

.hw-step-item.current span {
  background: var(--sky, #319ffd);
  color: #ffffff;
  box-shadow: 0 0 0 3px var(--sky-bg, #e8f2ff);
}
.hw-step-item.current small {
  color: var(--sky-dark, #2584dd);
  font-weight: 800;
}

/* 지금 할 일 / 추천 행동 카드 */
.hw-action-card {
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--line, #dde2e7);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hw-action-card.is-fix {
  border-color: #f7c3bc;
  background: linear-gradient(180deg, #fff9f9 0%, #ffffff 100%);
}
.hw-action-card.is-todo {
  border-color: #c4e0fd;
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}
.hw-action-card.is-wait {
  border-color: #f6e2b8;
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
}
.hw-action-card.is-peer,
.hw-action-card.is-badge,
.hw-action-card.is-done {
  border-color: #d6e8b2;
  background: linear-gradient(180deg, #fbfdf5 0%, #ffffff 100%);
}

.hw-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--sky-bg, #e8f2ff);
  color: var(--sky-dark, #2584dd);
}

.hw-action-card.is-fix .hw-action-badge {
  background: var(--coral-bg, #fdeeec);
  color: var(--coral, #e04b38);
}
.hw-action-card.is-wait .hw-action-badge {
  background: var(--amber-bg, #fdf3e2);
  color: var(--amber-ink, #8e5c14);
}
.hw-action-card.is-peer .hw-action-badge,
.hw-action-card.is-badge .hw-action-badge,
.hw-action-card.is-done .hw-action-badge {
  background: var(--green-bg, #f1f7e3);
  color: var(--green-ink, #4c720e);
}

.hw-action-meta {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3, #566068);
  font-weight: 600;
}

.hw-action-title {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #131a21);
  line-height: 1.4;
  word-break: keep-all;
}

.hw-action-desc {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2, #39434c);
  line-height: 1.45;
  word-break: keep-all;
}

.hw-action-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  width: 100%;
}

/* 팁 카드 */
.hw-tips-card {
  background: var(--panel-2, #f9fafb);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ink-2, #39434c);
  line-height: 1.45;
}

.hw-tip-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.hw-tip-item i {
  color: var(--amber, #c9821c);
  font-size: 15px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* 패널 하단 푸터 */
.hw-panel-foot {
  padding: 10px 16px;
  background: var(--panel-2, #f9fafb);
  border-top: 1px solid var(--line-soft, #e9edf1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.hw-foot-link {
  color: var(--sky-dark, #2584dd);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hw-foot-link:hover {
  text-decoration: underline;
}

/* ── Keyframe Animations ── */
@keyframes hw-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes hw-shadow-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.25;
  }
  50% {
    transform: scale(0.85);
    opacity: 0.12;
  }
}

@keyframes hw-blink {
  0%, 93%, 100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.12);
  }
}

@keyframes hw-wave {
  0%, 100% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-14deg) translateY(-2px);
  }
  60% {
    transform: rotate(10deg) translateY(-1px);
  }
}

@keyframes hw-wave-fast {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-24deg) translateY(-4px);
  }
  75% {
    transform: rotate(18deg) translateY(-2px);
  }
}

@keyframes hw-pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(49, 159, 253, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 7px rgba(49, 159, 253, 0.95));
  }
}

@keyframes hw-badge-bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

@keyframes hw-badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(49, 159, 253, 0.6);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(49, 159, 253, 0);
  }
}

@keyframes hw-sparkle-spin {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  40% {
    transform: scale(1) rotate(140deg);
    opacity: 0.9;
  }
  80% {
    transform: scale(0.6) rotate(280deg);
    opacity: 0.4;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

@keyframes hw-bubble-in {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes hw-panel-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── 모바일 반응형 (640px 이하) ── */
@media (max-width: 640px) {
  .cmp-helper-widget {
    right: 14px;
    bottom: 18px;
  }

  .hw-trigger {
    width: var(--hw-mobile-size);
    height: var(--hw-mobile-size);
  }

  .hw-bubble {
    max-width: calc(100vw - 36px);
    right: 0;
    margin-bottom: 8px;
    padding: 8px 12px;
  }

  .hw-bubble::after {
    right: 20px;
  }

  .hw-bubble-text {
    font-size: 12px;
  }

  .hw-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--hw-mobile-size) + 28px);
    width: auto;
    max-width: none;
  }
}

/* ── 모션 감소 선호 (접근성) ── */
@media (prefers-reduced-motion: reduce) {
  .hw-char-body,
  .hw-ground-shadow,
  .hw-eye,
  .hw-hand-r,
  .hw-antenna-glow,
  .hw-sparkle,
  .hw-badge-dot,
  .hw-bubble,
  .hw-panel {
    animation: none !important;
    transition: none !important;
  }
}