/* ==========================================================================
   KimBody Buddy — 모든 규칙을 .kb-root 로 시작해 테마 CSS보다 우선순위를 높인다
   ========================================================================== */

.kb-root{
  --kb-red:#C20E2B;
  --kb-red-dark:#9C0821;
  --kb-green:#1FA85C;
  --kb-grey:#9A9AA0;
  --kb-ink:#2A2A2C;
  --kb-line:rgba(42,42,44,.10);

  --kb-h:196px;                          /* 전신 높이 */
  --kb-w:calc(var(--kb-h) * 0.57902);    /* 에셋 가로세로비 */
  --kb-x:0px;                            /* 돌아다니는 위치 (JS) */
  --kb-gx:0px; --kb-gy:0px;              /* 시선 (JS) */
  --kb-tilt:0deg;                        /* 상체 기울기 (JS) */
  --kb-eye:1;                            /* 눈 감김 */

  position:fixed; right:20px; bottom:0; z-index:999999;
  pointer-events:none;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.kb-root.kb-left{right:auto; left:20px}
.kb-root *,.kb-root *::before,.kb-root *::after{box-sizing:border-box}

/* ========================= 테마 간섭 차단 ========================= */

.kb-root button,
.kb-root a{
  -webkit-appearance:none !important; appearance:none !important;
  background:none !important; background-color:transparent !important;
  background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important;
  min-width:0 !important; min-height:0 !important; max-width:none !important;
  width:auto; height:auto;
  font-family:inherit !important; font-size:inherit !important;
  font-weight:400 !important; font-style:normal !important;
  line-height:normal !important; letter-spacing:inherit !important;
  text-transform:none !important; text-decoration:none !important;
  text-shadow:none !important; text-align:left;
  color:inherit !important; opacity:1 !important; filter:none !important;
  transform:none !important; transition:none !important;
  outline:0; cursor:pointer; display:inline-block;
  vertical-align:baseline; overflow:visible;
}
.kb-root button:hover,.kb-root button:focus,.kb-root button:active,
.kb-root a:hover,.kb-root a:focus,.kb-root a:active,.kb-root a:visited{
  background:none !important; background-color:transparent !important;
  background-image:none !important; border-color:transparent !important;
  box-shadow:none !important; color:inherit !important;
  text-decoration:none !important; transform:none !important;
  filter:none !important; opacity:1 !important;
}
.kb-root img{
  max-width:none !important; min-width:0 !important; min-height:0 !important;
  height:auto !important;
  border:0 !important; border-radius:0 !important; outline:0 !important;
  background:none !important; background-color:transparent !important;
  background-image:none !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important;
  filter:none !important; visibility:visible !important;
  object-fit:fill !important; aspect-ratio:auto !important;
  clip-path:none !important; mix-blend-mode:normal !important;
  content-visibility:visible !important;
}
.kb-root h2,.kb-root p{
  margin:0 !important; padding:0 !important; font-family:inherit !important;
  text-transform:none !important; text-shadow:none !important;
}

/* ========================= 캐릭터 ========================= */

.kb-root .kb-stage{position:relative; width:var(--kb-w); height:var(--kb-h)}

/* 항상 올라와 있다. 페이지를 처음 열 때만 한 번 아래에서 올라온다 */
.kb-root .kb-figure{
  position:absolute; inset:0;
  transform:translateX(var(--kb-x));
  transition:transform 2.4s cubic-bezier(.42,0,.58,1);
}
.kb-root .kb-figure.kb-enter{animation:kb-enter .8s cubic-bezier(.2,1.3,.35,1) both}
@keyframes kb-enter{
  0%{transform:translateY(64%) scale(.9); opacity:0}
  60%{opacity:1}
  100%{transform:translateY(0) scale(1); opacity:1}
}

.kb-root .kb-bob{
  position:absolute; inset:0; will-change:transform;
  animation:kb-bob 3.6s ease-in-out infinite;
}
@keyframes kb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.kb-root[data-mood="sleepy"] .kb-bob{animation-duration:6.5s}
/* 걸어갈 때는 좀 더 통통 튀는 걸음걸이 */
.kb-root.kb-walking .kb-bob{animation:kb-walk .52s ease-in-out infinite}
@keyframes kb-walk{
  0%,100%{transform:translateY(0) rotate(-1.6deg)}
  50%{transform:translateY(-7px) rotate(1.6deg)}
}

.kb-root .kb-lean{
  position:absolute; inset:0;
  transform-origin:50% 98%;
  transform:rotate(var(--kb-tilt));
  transition:transform .45s cubic-bezier(.3,1.1,.4,1);
}

.kb-root .kb-squash{position:absolute; inset:0; transform-origin:50% 100%}
.kb-root .kb-squash.kb-squish{animation:kb-squish .46s ease-out}
@keyframes kb-squish{
  0%{transform:scale(1,1)} 35%{transform:scale(1.07,.93)}
  70%{transform:scale(.97,1.04)} 100%{transform:scale(1,1)}
}
.kb-root .kb-squash.kb-hop{animation:kb-hop .66s cubic-bezier(.28,1.1,.42,1)}
@keyframes kb-hop{
  0%{transform:translateY(0) scale(1,1)}
  18%{transform:translateY(4%) scale(1.09,.9)}
  46%{transform:translateY(-16%) scale(.94,1.08)}
  74%{transform:translateY(0) scale(1.05,.95)}
  100%{transform:translateY(0) scale(1,1)}
}
.kb-root .kb-squash.kb-pop{animation:kb-pop .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes kb-pop{0%{transform:scale(1)}45%{transform:scale(1.1,1.07)}100%{transform:scale(1)}}

.kb-root .kb-layer{
  position:absolute !important; display:block !important;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}

/* 원본 캔버스(447x772) 기준 백분율 */
.kb-root .kb-base{left:0; top:0; width:100%}
.kb-root .kb-hand{
  left:80.5369%; top:35.4922%; width:19.2394%;
  transform-origin:25.1163% 78.4768%;
}
.kb-root.kb-waving .kb-hand{animation:kb-wave .6s ease-in-out 3}
@keyframes kb-wave{
  0%,100%{transform:rotate(0deg)}
  22%{transform:rotate(-17deg)}
  45%{transform:rotate(7deg)}
  70%{transform:rotate(-13deg)}
  88%{transform:rotate(3deg)}
}

.kb-root .kb-eye{
  transform:translate(var(--kb-gx),var(--kb-gy)) scaleY(var(--kb-eye));
  transform-origin:50% 50%;
  transition:transform .08s ease-out;
}
.kb-root .kb-eye-l{left:19.4631%; top:22.1503%; width:9.6197%}
.kb-root .kb-eye-r{left:45.1902%; top:24.3523%; width:11.6331%}
.kb-root[data-blink="1"]{--kb-eye:.08}
.kb-root[data-mood="sleepy"]{--kb-eye:.07}

/* 대체 포즈: 발끝을 맞춰 가운데 정렬하고 부드럽게 교차 */
.kb-root .kb-pose{
  left:50%; bottom:0; top:auto;
  height:100% !important; width:auto !important;
  transform:translateX(-50%);
  opacity:0; transition:opacity .22s ease;
}
.kb-root .kb-main{display:block; opacity:1; transition:opacity .22s ease}
.kb-root[data-pose] .kb-main{opacity:0}
.kb-root[data-pose="cheer"] .kb-pose-cheer,
.kb-root[data-pose="worried"] .kb-pose-worried{opacity:1}

/* 졸음 */
.kb-root .kb-zzz{position:absolute; left:72%; top:0; width:40%; height:26%; opacity:0}
.kb-root[data-mood="sleepy"] .kb-zzz{opacity:1}
.kb-root .kb-zzz span{
  position:absolute; bottom:0; left:0; opacity:0;
  font-size:calc(var(--kb-h) * .085); font-weight:800; color:var(--kb-red);
}
.kb-root[data-mood="sleepy"] .kb-zzz span{animation:kb-zzz 2.7s ease-in-out infinite}
.kb-root[data-mood="sleepy"] .kb-zzz span:nth-child(2){animation-delay:.9s}
.kb-root[data-mood="sleepy"] .kb-zzz span:nth-child(3){animation-delay:1.8s}
@keyframes kb-zzz{
  0%{opacity:0; transform:translate(0,0) scale(.6)}
  25%{opacity:.9}
  100%{opacity:0; transform:translate(14px,-30px) scale(1.2)}
}

/* 클릭 영역 */
.kb-root .kb-hit{
  position:absolute !important;
  left:0 !important; right:0 !important; top:0 !important; bottom:0 !important;
  width:auto !important; height:auto !important; display:block !important;
  background:none !important; background-color:transparent !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important;
  font-size:0 !important; color:transparent !important;
  transform:translateX(var(--kb-x)) !important;
  transition:transform 2.4s cubic-bezier(.42,0,.58,1) !important;
  pointer-events:auto; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.kb-root .kb-hit:hover,.kb-root .kb-hit:focus,.kb-root .kb-hit:active{
  background:none !important; background-color:transparent !important;
  border:0 !important; box-shadow:none !important; outline:0;
}
.kb-root .kb-hit:focus-visible{
  outline:3px solid var(--kb-red); outline-offset:4px; border-radius:12px !important;
}

/* 영업 상태 표시 */
.kb-root .kb-dot{
  position:absolute; right:4%; top:6px;
  width:12px; height:12px; border-radius:50%;
  background:var(--kb-grey); border:2.5px solid #fff;
  box-shadow:0 2px 6px rgba(42,42,44,.3);
  transform:translateX(var(--kb-x));
  transition:transform 2.4s cubic-bezier(.42,0,.58,1), background-color .3s ease;
}
.kb-root[data-status="online"] .kb-dot{background:var(--kb-green)}
.kb-root[data-status="online"] .kb-dot::after{
  content:""; position:absolute; inset:-2.5px; border-radius:50%;
  border:2px solid var(--kb-green); opacity:.6;
  animation:kb-ping 2s ease-out infinite;
}
@keyframes kb-ping{
  0%{transform:scale(1); opacity:.6}
  100%{transform:scale(2.1); opacity:0}
}

/* ========================= 말풍선 ========================= */

.kb-root .kb-bubble{
  position:absolute; right:6px; bottom:calc(var(--kb-h) + 6px);
  width:200px; padding:12px 15px;
  background:#fff; color:var(--kb-ink);
  font-size:13px; line-height:1.55; letter-spacing:-.3px; text-align:left;
  border-radius:16px 16px 16px 4px;
  box-shadow:0 8px 22px rgba(42,42,44,.16), 0 0 0 1px var(--kb-line);
  opacity:0; transform:translate(var(--kb-x),8px) scale(.94);
  transform-origin:100% 100%;
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,1.5,.4,1);
}
.kb-root.kb-left .kb-bubble{
  right:auto; left:6px; border-radius:16px 16px 4px 16px; transform-origin:0 100%;
}
.kb-root .kb-bubble[data-show="1"]{opacity:1; transform:translate(var(--kb-x),0) scale(1)}
.kb-root .kb-bubble::after{
  content:""; position:absolute; right:14px; bottom:-7px;
  border:7px solid transparent; border-top-color:#fff; border-bottom:0;
}
.kb-root.kb-left .kb-bubble::after{right:auto; left:14px}

/* ========================= 모달 ========================= */

.kb-root .kb-veil{
  position:fixed; inset:0; z-index:1000000;
  display:flex; padding:20px;
  background:rgba(20,18,22,.45);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s;
  pointer-events:auto;
}
.kb-root .kb-veil--frame{align-items:flex-end; justify-content:flex-end; padding:0 20px 20px}
.kb-root .kb-veil--alert{align-items:center; justify-content:center}
.kb-root[data-modal="frame"] .kb-veil--frame,
.kb-root[data-modal="alert"] .kb-veil--alert{opacity:1; visibility:visible}

.kb-root .kb-sheet{
  width:400px; height:min(660px, calc(100vh - 40px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:18px;
  box-shadow:0 24px 60px rgba(20,18,22,.35);
  transform:translateY(18px) scale(.98);
  transition:transform .3s cubic-bezier(.2,1.2,.4,1);
}
.kb-root[data-modal="frame"] .kb-sheet{transform:none}
.kb-root .kb-bar{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; background:var(--kb-red); color:#fff; flex:0 0 auto;
}
.kb-root .kb-bar-name{font-size:14.5px; font-weight:700; letter-spacing:-.3px}
.kb-root .kb-bar-btn{
  margin-left:auto !important; padding:6px 10px !important;
  border-radius:8px !important; border:1px solid rgba(255,255,255,.45) !important;
  font-size:12px !important; font-weight:600 !important; color:#fff !important;
  text-align:center; transition:background .15s ease !important;
}
.kb-root .kb-bar-btn:hover,.kb-root .kb-bar-btn:focus{
  background:rgba(255,255,255,.16) !important; color:#fff !important;
}
.kb-root .kb-bar-x{
  width:30px !important; height:30px !important; border-radius:8px !important;
  display:grid !important; place-items:center;
  color:#fff !important; font-size:21px !important; line-height:1 !important;
  transition:background .15s ease !important;
}
.kb-root .kb-bar-x:hover{background:rgba(255,255,255,.18) !important; color:#fff !important}
.kb-root .kb-bar-btn:focus-visible,.kb-root .kb-bar-x:focus-visible{
  outline:2px solid #fff; outline-offset:-2px;
}
.kb-root .kb-iframe{
  flex:1 1 auto; width:100%; height:auto; border:0; display:block; background:#F6F2F0;
}
.kb-root .kb-note{
  padding:9px 13px !important; font-size:11.5px; line-height:1.5;
  color:#6E6E73; text-align:left; background:#F6F2F0;
  border-top:1px solid var(--kb-line); flex:0 0 auto;
}

.kb-root .kb-card{
  position:relative; width:100%; max-width:340px; padding:30px 24px 24px;
  background:#fff; border-radius:18px; text-align:center;
  box-shadow:0 24px 60px rgba(20,18,22,.35);
  transform:translateY(14px) scale(.96);
  transition:transform .3s cubic-bezier(.2,1.3,.4,1);
}
.kb-root[data-modal="alert"] .kb-card{transform:none}
.kb-root .kb-card-icon{
  display:grid; place-items:center; width:46px; height:46px; margin:0 auto 14px;
  border-radius:50%; background:var(--kb-red); color:#fff;
}
.kb-root .kb-card-icon svg{width:26px; height:26px; display:block}
.kb-root .kb-card-h{
  margin:0 0 8px !important; font-size:17px !important; font-weight:700 !important;
  letter-spacing:-.4px; line-height:1.4 !important; color:var(--kb-ink) !important;
}
.kb-root .kb-card-p{
  margin:0 0 18px !important; font-size:13.5px; line-height:1.6;
  letter-spacing:-.2px; color:#6E6E73 !important;
}
.kb-root .kb-card-go{
  display:block !important; width:100% !important; padding:13px 16px !important;
  border-radius:12px !important; background:var(--kb-red) !important;
  color:#fff !important; font-size:14px !important; font-weight:700 !important;
  text-align:center !important; text-decoration:none !important;
  transition:background .15s ease !important;
}
.kb-root .kb-card-go:hover,.kb-root .kb-card-go:focus{
  background:var(--kb-red-dark) !important; color:#fff !important;
}
.kb-root .kb-card-go:focus-visible{outline:3px solid var(--kb-ink); outline-offset:2px}
.kb-root .kb-card-x{
  position:absolute !important; top:10px !important; right:10px !important;
  width:32px !important; height:32px !important; border-radius:50% !important;
  display:grid !important; place-items:center;
  font-size:22px !important; line-height:1 !important; color:#9A9AA0 !important;
  transition:background .15s ease, color .15s ease !important;
}
.kb-root .kb-card-x:hover{background:#F0ECEA !important; color:var(--kb-ink) !important}
.kb-root .kb-card-x:focus-visible{outline:2px solid var(--kb-red); outline-offset:2px}

/* ========================= 반응형 ========================= */

@media (max-width:600px){
  .kb-root{--kb-h:150px; right:12px}
  .kb-root.kb-left{left:12px}
  .kb-root .kb-bubble{font-size:12.5px}
  .kb-root .kb-veil--frame{padding:0}
  .kb-root .kb-sheet{width:100%; height:100%; border-radius:0}
}

/* ========================= 모션 최소화 ========================= */

@media (prefers-reduced-motion:reduce){
  .kb-root *{animation:none !important}
  .kb-root .kb-figure,.kb-root .kb-hit,.kb-root .kb-lean,
  .kb-root .kb-eye{transition-duration:.01ms !important}
}