/* Fetch 마스코트 워커 전용 CSS — fetch_walker.js와 한 몸 (정비소 관리)
 * 포털 리디자인 시 이 파일과 fetch_walker.js는 건드리지 말 것 (2026-07-12 분리)
 */
/* ── Fetch 마스코트 워커 v3: 행동 엔진 + 드래그 펫 ────────────── */
.fetch-walker {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 96px;
  width: 96px;
  z-index: 60;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  will-change: transform;
}
.fetch-walker.is-held { cursor: grabbing; }
.fetch-walker .fw-bob {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18));
}
.fetch-walker.is-walking .fw-bob {
  animation: fw-bob var(--fw-gait, .55s) ease-in-out infinite;
}
.fetch-walker .fw-walk {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 76px;
  height: 80px;
  margin-left: -38px;
  background: var(--fw-walk-url) 0 0 / 456px 80px no-repeat;
  display: none;
}
.fetch-walker.is-walking .fw-walk {
  display: block;
  animation: fw-gait var(--fw-gait, .55s) steps(6) infinite;
}
/* 대시(질주) 스프라이트 v5 — 크기·시트폭·URL은 JS가 CSS 변수로 주입 */
.fetch-walker .fw-dash {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--fw-dash-w, 86px);
  height: var(--fw-dash-h, 61px);
  margin-left: calc(var(--fw-dash-w, 86px) / -2);
  background: var(--fw-dash-url) 0 0 / var(--fw-dash-sheet-w, 516px) var(--fw-dash-h, 61px) no-repeat;
  display: none;
}
.fetch-walker.is-dashing .fw-bob {
  animation: fw-bob var(--fw-gait, .4s) ease-in-out infinite;
}
.fetch-walker.is-dashing .fw-dash {
  display: block;
  animation: fw-dash-gait var(--fw-gait, .4s) steps(6) infinite;
}
@keyframes fw-dash-gait { to { background-position-x: calc(var(--fw-dash-sheet-w, 516px) * -1); } }
.fetch-walker .fw-pose {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  pointer-events: none;
}
.fetch-walker.is-posing .fw-pose { display: block; }
.fetch-walker .fw-flip { position: absolute; inset: 0; }
.fetch-walker.face-left .fw-flip { transform: scaleX(-1); }
/* 크기 조절 v5.3 — 비주얼만 바닥 중심으로 스케일 (히트박스·물리 불변) */
.fetch-walker .fw-zoom {
  position: absolute;
  inset: 0;
  transform: scale(var(--fw-zoom, 1));
  transform-origin: 50% 100%;
}
/* 호버 시 나오는 −/＋ 버튼 (flip 바깥이라 좌우반전 영향 없음) */
.fetch-walker .fw-ui {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 4px;
  padding-bottom: 10px;   /* 강아지-버튼 사이 틈 메움 — 틈에서 pointerleave가 나면 정지가 풀려 클릭이 빗나감 */
}
.fetch-walker:hover .fw-ui { display: flex; }
.fetch-walker.is-held .fw-ui { display: none; }
/* 호버 정지 — 걸음·질주·바운스 애니 일시정지 (강아지가 멈춰 서서 쳐다봄) */
.fetch-walker.is-paused .fw-walk,
.fetch-walker.is-paused .fw-dash,
.fetch-walker.is-paused .fw-bob { animation-play-state: paused; }
.fetch-walker .fw-ui button {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(43, 58, 77, .25);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #2B3A4D;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.fetch-walker .fw-ui button:hover { background: #fff; }
@keyframes fw-gait { to { background-position-x: -456px; } }
@keyframes fw-bob {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-2px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .fetch-walker { display: none; }
}

/* ── 말풍선 v6 — 클릭 시 멘트, 4초 자동 소멸 ──────────────────── */
.fetch-walker .fw-bubble {
  position: absolute;
  bottom: calc(100% + 34px);       /* 크기 버튼(-30px) 위 */
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  max-width: min(230px, 58vw);
  width: max-content;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid rgba(43, 58, 77, .18);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(16, 24, 40, .12);
  font-size: 13px;
  line-height: 1.45;
  color: #1f2430;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.fetch-walker .fw-bubble::after {   /* 꼬리 */
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 1px 0 rgba(43, 58, 77, .18));
}
.fetch-walker .fw-bubble.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* 화면 가장자리에서는 말풍선을 한쪽으로 붙임 (꼬리는 강아지 위 유지) */
.fetch-walker .fw-bubble.align-left  { left: -8px; transform: translateX(0) translateY(4px); }
.fetch-walker .fw-bubble.align-left.is-visible  { transform: translateX(0) translateY(0); }
.fetch-walker .fw-bubble.align-left::after  { left: 46px; }
.fetch-walker .fw-bubble.align-right { left: auto; right: -8px; transform: translateX(0) translateY(4px); }
.fetch-walker .fw-bubble.align-right.is-visible { transform: translateX(0) translateY(0); }
.fetch-walker .fw-bubble.align-right::after { left: auto; right: 40px; }