/* 너트·부부 캐릭터 — 정지 그림과 승격된 컴포넌트가 같은 자리를 차지한다(레이아웃 이동 없음). */
.bw-mascot{display:inline-block;width:var(--mascot-width,96px);aspect-ratio:4/5;flex:0 0 auto;vertical-align:bottom;line-height:0}
.bw-mascot img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.bw-mascot bw-mascot-button{width:100%;--mascot-focus:var(--color-primary,#1E88E5)}

/* 캐릭터 + 말풍선 */
.bw-mascot-note{display:flex;align-items:flex-end;gap:18px;max-width:640px}
.bw-mascot-note.is-soft .bw-mascot-bubble{background:var(--color-primary-soft,#E3F2FD);border-color:transparent}
.bw-mascot-bubble{position:relative;flex:1;min-width:0;border:1px solid var(--color-border,#E2E8F0);border-radius:16px;border-bottom-left-radius:4px;background:var(--color-surface,#fff);padding:14px 18px;font-size:13.5px;line-height:1.7;color:var(--color-text-heading,#16243A)}
.bw-mascot-bubble strong{display:block;font-size:11px;letter-spacing:.12em;color:var(--color-primary-text,#1565C0);margin-bottom:4px}
.bw-mascot-bubble p{margin:0}
.bw-mascot-bubble .p-text-link{margin-top:8px;font-size:12px;gap:8px}
.bw-mascot-bubble .p-text-link .p-icon{width:14px;height:14px}

/* 섹션 제목 옆 캐릭터(홈 라이더/정비소 소개) */
.p-role-heading .bw-mascot{margin-right:18px;margin-bottom:-6px}
.p-role-heading>div{display:flex;align-items:flex-end;gap:0}
.p-role-heading>div>div{min-width:0}

/* 검색 빈 결과 등 상태 안내 */
.p-shop-status .bw-mascot{margin-bottom:8px}

/* 오른쪽 아래 도움 버튼: 디자인 시스템의 우측 하단 규격을 줄여 쓴다. 본문을 가리지 않게 작게, 모바일은 더 작게.
   마우스를 올리거나 포커스가 가면 캐릭터가 움직이고(24프레임) 왼쪽에 꼬리 달린 말풍선이 뜬다. */
.bw-mascot-fab{position:fixed;right:28px;bottom:26px;z-index:30;display:flex;align-items:flex-end;gap:10px}
.bw-mascot-fab-link{display:block;text-decoration:none;color:var(--color-text-heading,#16243A)}
.bw-mascot-fab-bubble{flex:0 0 auto;max-width:240px;margin-bottom:44px;border-bottom-left-radius:16px;border-bottom-right-radius:4px;background:var(--color-surface,#fff);box-shadow:0 12px 28px var(--color-shadow-soft,#16243A15);font-size:12.5px;line-height:1.6;opacity:0;transform:translate(6px,4px);transition:opacity .15s,transform .15s;pointer-events:none}
.bw-mascot-fab-bubble>span{display:block}
.bw-mascot-fab-bubble::after{content:'';position:absolute;right:-7px;bottom:12px;width:12px;height:12px;background:inherit;border-right:1px solid var(--color-border,#E2E8F0);border-bottom:1px solid var(--color-border,#E2E8F0);transform:rotate(-45deg)}
.bw-mascot-fab:hover .bw-mascot-fab-bubble,.bw-mascot-fab:focus-within .bw-mascot-fab-bubble,.bw-mascot-fab.is-guiding .bw-mascot-fab-bubble{opacity:1;transform:none}
.bw-mascot-fab.is-guiding .bw-mascot-fab-bubble{pointer-events:auto;padding-right:36px;border-color:var(--color-primary,#1E88E5)}
.bw-mascot-bubble-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border:0;border-radius:50%;background:var(--color-bg-canvas,#F8FAFC);color:var(--color-text-muted,#4E5D70);font:14px/1 sans-serif;cursor:pointer;display:none}
.bw-mascot-fab.is-guiding .bw-mascot-bubble-close{display:grid;place-items:center}
.bw-mascot-bubble-close:hover{background:var(--color-primary-soft,#E3F2FD);color:var(--color-primary-text,#1565C0)}
.bw-mascot-bubble-link{display:inline-flex;margin-top:8px;font-size:12.5px;gap:8px;color:var(--color-primary-text,#1565C0)}
.bw-mascot-bubble-link .p-icon{width:14px;height:14px}
.bw-mascot-fab.is-guiding .bw-mascot-bubble-link{display:none}
.bw-mascot-fab.is-open .bw-mascot-fab-bubble{opacity:1;transform:none;pointer-events:auto;padding-right:36px}
.bw-mascot-fab.is-open .bw-mascot-bubble-close{display:grid;place-items:center}
.bw-mascot-fab-link:focus-visible{outline:2px solid var(--color-primary,#1E88E5);outline-offset:4px;border-radius:12px}
.bw-mascot-fab .bw-mascot{filter:drop-shadow(0 10px 18px rgba(22,36,58,.18))}
@media(max-width:600px){.bw-mascot-fab{right:16px;bottom:18px}.bw-mascot-fab .bw-mascot{--mascot-width:64px!important}.bw-mascot-fab-bubble{display:none}
  .bw-mascot-fab.is-away:not(.is-guiding):not(.is-open){display:none}
  .bw-mascot-fab.is-guiding,.bw-mascot-fab.is-open{top:76px;bottom:auto;left:12px;right:12px;align-items:flex-start;gap:10px}
  .bw-mascot-fab.is-guiding .bw-mascot-fab-link,.bw-mascot-fab.is-open .bw-mascot-fab-link{order:0}
  .bw-mascot-fab.is-guiding .bw-mascot,.bw-mascot-fab.is-open .bw-mascot{--mascot-width:48px!important;filter:none}
  .bw-mascot-fab.is-guiding .bw-mascot-fab-bubble,.bw-mascot-fab.is-open .bw-mascot-fab-bubble{display:block;order:1;flex:1;min-width:0;max-width:none;margin:0;font-size:13.5px;border-radius:14px;box-shadow:0 14px 30px var(--color-shadow-soft,#16243A15)}
  .bw-mascot-fab.is-guiding .bw-mascot-fab-bubble::after,.bw-mascot-fab.is-open .bw-mascot-fab-bubble::after{display:none}.bw-mascot-note{gap:12px}.bw-mascot-note .bw-mascot{--mascot-width:72px!important}.p-role-heading .bw-mascot{--mascot-width:64px!important;margin-right:12px}}
@media(prefers-reduced-motion:reduce){.bw-mascot-fab-bubble{transition:none}}
@media print{.bw-mascot-fab{display:none}}