/* 베티 — character/betty.css + public/study-pet.css + 운영 보조 */
/* 베티 '루멘' v2 — 유리 구슬 + 금빛 심장 + 빛의 날개 V. 외부 리소스 없음.
   상태 클래스: .is-walk .is-talk .is-think .is-happy .is-celebrate .is-rest(졸음) · 보조: .is-face-left .is-small .is-still .on-dark
   크기 --betty-size(기본 78px) · 고개 돌리기 --b-look-x / --b-look-y(-1~1, JS look()) · prefers-reduced-motion 이면 표정만 바뀜 */
.betty{--betty-size:78px;--b-look-x:0;--b-look-y:0;--b-aura:.8;--b-edge:.6;--b-drop:drop-shadow(0 6px 12px rgba(11,20,38,.24));display:inline-block;width:var(--betty-size);aspect-ratio:1;line-height:0;vertical-align:bottom}
.betty .betty-svg{width:100%;height:100%;display:block;overflow:visible;filter:var(--b-drop)}
.betty .betty-svg *{transform-box:fill-box;transform-origin:center}
/* transform 속성으로 위치를 잡은 요소(날개 좌우 반전·하이라이트 회전)는 원점 기준 그대로 */
.betty .betty-svg .b-abs{transform-box:view-box;transform-origin:0 0}
/* 기본으로 숨겨 두는 표정·효과(정지 그림에서도) */
.betty-svg .b-smile,.betty-svg .b-sleepy,.betty-svg .b-mouth-talk,.betty-svg .b-think,.betty-svg .b-spark{display:none}
.betty-svg .b-ripple{opacity:0}

/* 밝은 배경에서 옅은 금빛 날개 끝이 사라지지 않게 얇은 금색 테(다크에서는 끔) */
.betty .b-blade,.betty .b-chevron{stroke:#2e2016;stroke-opacity:calc(var(--b-edge) * .7);stroke-width:.8;stroke-linejoin:miter}

/* 떠다님 + 그림자 */
.betty .b-float{animation:betty-float 4.2s ease-in-out infinite}
.betty .b-shadow{animation:betty-shadow 4.2s ease-in-out infinite}
/* 고개 돌리기: 얼굴이 사용자 쪽으로 옮겨 가고, 구슬 전체가 살짝 기울며, 하이라이트는 반대로 조금 남는다 */
.betty .b-tilt{transform-box:view-box;transform-origin:100px 140px;transform:rotate(calc(var(--b-look-x) * 7deg));transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.betty .b-face{transform:translate(calc(var(--b-look-x) * 8px),calc(var(--b-look-y) * 5px));transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.betty .b-spec{transition:transform .6s}
/* 숨쉬기 빛 맥동 */
.betty .b-aura{opacity:var(--b-aura);animation:betty-aura 4.2s ease-in-out infinite}
.betty .b-core,.betty .b-core-bloom{animation:betty-core 4.2s ease-in-out infinite}
/* 깜빡임 */
.betty .b-eyes{animation:betty-blink 5.6s infinite}
/* 날개: 구슬 아래 한 점을 축으로 천천히 숨쉬듯 */
.betty .b-wing{transform-box:view-box;transform-origin:100px 152px;animation:betty-wing 4.2s ease-in-out infinite}
.betty .b-p{animation:betty-twinkle 3.4s ease-in-out infinite;opacity:0}
.betty .b-p1{animation-delay:.6s}.betty .b-p2{animation-delay:1.3s}.betty .b-p3{animation-delay:2s}.betty .b-p4{animation-delay:2.7s}
.betty .b-wing-r .b-p{animation-delay:1.7s}.betty .b-wing-r .b-p1{animation-delay:.2s}.betty .b-wing-r .b-p3{animation-delay:2.9s}

/* 말하기: 입이 빛으로 열리고, 구슬에서 빛 파동이 퍼지고, 날개가 가볍게 떨린다 */
.betty.is-talk .b-mouth{display:none}
.betty.is-talk .b-mouth-talk{display:inline;animation:betty-talk .42s ease-in-out infinite}
.betty.is-talk .b-ripple{animation:betty-ripple 1.6s ease-out infinite}
.betty.is-talk .b-ripple-2{animation-delay:.8s}
.betty.is-talk .b-wing{animation:betty-wing-talk .7s ease-in-out infinite}
.betty.is-talk .b-core{animation-duration:1.4s}
/* 생각 중: 눈이 위로, 빛 점 세 개가 차례로 */
.betty.is-think .b-eyes{translate:4px -5px}
.betty.is-think .b-think{display:inline}
.betty.is-think .b-think circle{animation:betty-dot 1.5s ease-in-out infinite;opacity:.2}
.betty.is-think .b-t2{animation-delay:.25s}.betty.is-think .b-t3{animation-delay:.5s}
.betty.is-think .b-mouth{transform:scaleX(.6)}
/* 기쁨: 웃는 눈, 심장이 더 밝게 */
.betty.is-happy .b-eyes,.betty.is-rest .b-eyes{display:none}
.betty.is-happy .b-smile{display:inline}
.betty.is-happy .b-core{animation:betty-core-joy 1.6s ease-in-out infinite}
.betty.is-happy .b-mouth{transform:scale(1.15,1.4)}
/* 기뻐하기(축하): 통통 떠오르기 + 날개 들어올림 + 반짝임 */
.betty.is-celebrate .b-float{animation:betty-hop .9s cubic-bezier(.3,.7,.3,1) 2}
.betty.is-celebrate .b-wing{animation:betty-wing-up .45s ease-in-out 4 alternate}
.betty.is-celebrate .b-spark{display:inline}
.betty.is-celebrate .b-spark path{animation:betty-twinkle 1s ease-in-out infinite}
.betty.is-celebrate .b-s2{animation-delay:.2s}.betty.is-celebrate .b-s3{animation-delay:.4s}.betty.is-celebrate .b-s4{animation-delay:.6s}
.betty.is-celebrate .b-p{animation-duration:1s}
/* 졸음(쉬기): 감은 눈, 빛이 흐려지고 느리게 */
.betty.is-rest:not(.is-happy) .b-sleepy{display:inline}
.betty.is-rest .b-mouth{transform:scaleX(.55)}
.betty.is-rest .b-float,.betty.is-rest .b-shadow,.betty.is-rest .b-aura,.betty.is-rest .b-core,.betty.is-rest .b-wing{animation-duration:7s}
.betty.is-rest .b-aura{opacity:calc(var(--b-aura) * .45)}
.betty.is-rest .b-wings{opacity:.72}
.betty.is-rest .b-p{display:none}
/* 이동(걷기 대신 떠서 미끄러지기): 가는 쪽으로 기울고 조금 빠르게 떠다님 */
.betty.is-walk .b-float{animation:betty-float 1.2s ease-in-out infinite}
.betty.is-walk .b-tilt{transform:rotate(7deg)}
.betty.is-walk.is-face-left .b-tilt{transform:rotate(-7deg)}
.betty.is-walk .b-wing{animation:betty-wing-talk 1.2s ease-in-out infinite}

/* 작은 크기(72px 미만): 세부를 덜고 눈·날개를 또렷하게 */
.betty.is-small .b-p,.betty.is-small .b-trail,.betty.is-small .b-caustic,.betty.is-small .b-refract,.betty.is-small .b-blade-hl,.betty.is-small .b-think,.betty.is-small .b-ripple-2{display:none}
.betty.is-small .b-eyes,.betty.is-small .b-smile,.betty.is-small .b-sleepy{scale:1.2}
.betty.is-small{--b-drop:drop-shadow(0 3px 5px rgba(11,20,38,.28))}

/* 테마: 어두운 배경에서는 빛을 조금 더, 그림자는 빼기 */
.betty.on-dark{--b-aura:1;--b-drop:none;--b-edge:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .betty{--b-aura:1;--b-drop:none;--b-edge:0}}
:root[data-theme="dark"] .betty{--b-aura:1;--b-drop:none;--b-edge:0}
/* 문서·썸네일용 정지 그림 */
.betty.is-still *{animation:none!important;transition:none!important}
.betty.is-still.is-talk .b-ripple-1{opacity:.45;transform:scale(1.12)}
.betty.is-still.is-talk .b-ripple-2{opacity:.22;transform:scale(1.26)}
.betty.is-still.is-think .b-think circle{opacity:.9}
.betty.is-still .b-p{opacity:.85}

@keyframes betty-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes betty-shadow{0%,100%{transform:scaleX(1);opacity:.18}50%{transform:scaleX(.86);opacity:.11}}
@keyframes betty-aura{0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}}
@keyframes betty-core{0%,100%{opacity:.82;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes betty-core-joy{0%,100%{opacity:1;transform:scale(1.04)}50%{opacity:1;transform:scale(1.16)}}
@keyframes betty-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
@keyframes betty-wing{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.4deg)}}
@keyframes betty-wing-talk{0%,100%{transform:rotate(0)}50%{transform:rotate(-4.5deg)}}
@keyframes betty-wing-up{from{transform:rotate(0)}to{transform:rotate(-10deg)}}
@keyframes betty-twinkle{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1)}}
@keyframes betty-talk{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.15)}}
@keyframes betty-ripple{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.42)}}
@keyframes betty-dot{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes betty-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-16px)}60%{transform:translateY(0)}78%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){
  .betty *{animation:none!important;transition:none!important}
  .betty.is-celebrate .b-spark path,.betty .b-p{opacity:.85}
}

/* 어두운 화면: 청동 날개가 남색 배경에 묻히지 않게 금빛 가장자리를 조금 더 진하게 */
.betty.on-dark .b-blade-hl{stroke-width:2.2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .betty .b-blade-hl{stroke-width:2.2}}
:root[data-theme="dark"] .betty .b-blade-hl{stroke-width:2.2}

/* 베테랑스 토플 공부 도우미 '베티' 위젯(대화창·말풍선·질문하기 버튼). 사이트 색(네이비·블루·흰색). 이모지·베이지 없음.
   캐릭터 그림·움직임은 character/betty.css 가 맡는다. */
.sp{--sp-navy:#14213d;--sp-blue:#3182f6;--sp-blue-d:#1b64da;--sp-ink:#191f28;--sp-sub:#68788c;--sp-bg:#f7f9fc;--sp-soft:#f1f4f8;--sp-line:#e4e8ed;--sp-paper:#fff;--sp-shadow:0 16px 40px rgba(20,33,61,.16),0 2px 6px rgba(20,33,61,.06);
  position:fixed;z-index:2147480000;right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:'Pretendard','Noto Sans KR','Apple SD Gothic Neo',system-ui,sans-serif;color:var(--sp-ink);-webkit-tap-highlight-color:transparent}
.sp[hidden]{display:none!important}
.sp *{box-sizing:border-box}
.sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sp-ico{width:16px;height:16px;flex:none;vertical-align:-3px}

/* 펫 한 덩어리(말풍선 + 베티 + 아래 질문하기 버튼). 걸을 때 이 덩어리가 함께 움직인다. 캐릭터 그림·애니메이션은 character/betty.css */
.sp-dock{order:2;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;will-change:transform}
.sp-figure{position:relative;display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:16px;line-height:0}
.sp-figure:focus-visible{outline:3px solid var(--sp-blue);outline-offset:2px}
.sp-mini .betty-svg{width:24px;height:26px;display:block}
.sp-mini .b-shadow{display:none}
/* 홈페이지 모드: 크게, 첫 화면 헤드라인이 먼저 보이도록 잠깐 뒤에 부드럽게 등장 */
.sp-mode-home{animation:sp-enter .6s ease-out .9s both}
@keyframes sp-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sp-mode-home .sp-bubble{max-width:290px}
.sp-mode-home .sp-bubble-text{font-size:14px}
/* 아래 질문하기 버튼(글쓰기 하나) */
.sp-bar{display:flex;align-items:center;padding:3px;border-radius:999px;background:#fff;border:1px solid var(--sp-line);box-shadow:0 6px 16px rgba(20,33,61,.12)}
.sp-barbtn{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--sp-navy);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.sp-barbtn:hover{background:var(--sp-soft)}
.sp-barbtn:focus-visible{outline:2px solid var(--sp-blue);outline-offset:1px}
.sp-open .sp-bar{display:none}

/* 베티 메뉴(질문하기 · 문의하기 · 만족도 설문) */
.sp-menu{position:absolute;bottom:calc(100% - 2px);right:0;min-width:248px;white-space:nowrap;padding:6px;border-radius:16px;background:var(--sp-paper);border:1px solid var(--sp-line);box-shadow:var(--sp-shadow);animation:sp-pop .2s ease-out;z-index:2}
.sp-menu[hidden]{display:none}
.sp-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--sp-ink);font:inherit;font-size:14px;font-weight:700;text-align:left;cursor:pointer}
.sp-menu-item small{margin-left:auto;padding-left:12px;font-size:11.5px;font-weight:500;color:var(--sp-sub)}
.sp-menu-item:hover,.sp-menu-item:focus-visible{background:var(--sp-soft);outline:none}
.sp-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#c9d3e2}
.sp-dot-ask{background:#d9a84e;box-shadow:0 0 0 3px rgba(217,168,78,.2)}
.sp-dot-inquiry{background:var(--sp-navy)}

/* 먼저 말 걸기 말풍선 — 만화 말풍선: 굵은 테두리, 어긋난 그림자, 루멘 쪽을 가리키는 꼬리, 톡 튀어나오는 등장.
   짧은 감탄(느낌표로 끝나는 짧은 말)에는 뒤에 작은 만화 폭발 모양. 밝은·어두운 화면 모두 흰 바탕+진한 글씨로 읽히게. */
.sp{--sp-ink:#14213d;--sp-comic-fill:#fff;--sp-comic-burst:#ffd166}
.sp-bubble{position:absolute;bottom:calc(100% + 10px);right:2px;display:flex;align-items:flex-start;gap:2px;width:max-content;max-width:250px;padding:4px 4px 4px 0;border:3px solid var(--sp-comic-ink);border-radius:18px;background:var(--sp-comic-fill);color:var(--sp-comic-ink);box-shadow:4px 4px 0 var(--sp-comic-ink);transform-origin:85% 110%;animation:sp-comic-pop .42s cubic-bezier(.2,1.4,.4,1) both;z-index:1}
.sp-bubble[hidden]{display:none}
/* 꼬리: 테두리 삼각형 + 안쪽 흰 삼각형(루멘 쪽 아래로) */
.sp-bubble::before,.sp-bubble::after{content:'';position:absolute;width:0;height:0;border-style:solid}
.sp-bubble::before{right:26px;bottom:-17px;border-width:16px 4px 0 14px;border-color:var(--sp-comic-ink) transparent transparent transparent}
.sp-bubble::after{right:30px;bottom:-10px;border-width:10px 2px 0 9px;border-color:var(--sp-comic-fill) transparent transparent transparent}
/* 공개 홈페이지: 말풍선은 루멘의 왼쪽에(오른쪽 빠른 메뉴를 가리지 않게), 꼬리는 오른쪽으로 */
.sp-mode-home .sp-bubble{right:calc(100% + 14px);bottom:30%;transform-origin:110% 70%}
.sp-mode-home .sp-bubble::before{right:-17px;bottom:16px;border-width:4px 0 14px 16px;border-color:transparent transparent transparent var(--sp-comic-ink)}
.sp-mode-home .sp-bubble::after{right:-10px;bottom:19px;border-width:2px 0 9px 10px;border-color:transparent transparent transparent var(--sp-comic-fill)}
/* 휴대폰 폭에서는 왼쪽에 공간이 없어(이전 버튼 등) 말풍선을 루멘 위로 */
@media (max-width:640px){.sp-mode-home .sp-bubble{right:2px;bottom:calc(100% + 10px);transform-origin:85% 110%}.sp-mode-home .sp-bubble::before{right:26px;bottom:-17px;border-width:16px 4px 0 14px;border-color:var(--sp-comic-ink) transparent transparent transparent}.sp-mode-home .sp-bubble::after{right:30px;bottom:-10px;border-width:10px 2px 0 9px;border-color:var(--sp-comic-fill) transparent transparent transparent}}
/* 공개 홈페이지 말풍선 자리: 버튼을 덮지 않는 쪽을 스크립트가 고름(sp-at-left / sp-at-above) */
.sp-mode-home .sp-bubble.sp-at-left{right:calc(100% + 14px);bottom:30%;transform-origin:110% 70%}
.sp-mode-home .sp-bubble.sp-at-left::before{right:-17px;bottom:16px;border-width:4px 0 14px 16px;border-color:transparent transparent transparent var(--sp-comic-ink)}
.sp-mode-home .sp-bubble.sp-at-left::after{right:-10px;bottom:19px;border-width:2px 0 9px 10px;border-color:transparent transparent transparent var(--sp-comic-fill)}
.sp-mode-home .sp-bubble.sp-at-above{right:2px;bottom:calc(100% + 10px);transform-origin:85% 110%}
.sp-mode-home .sp-bubble.sp-at-above::before{right:26px;bottom:-17px;border-width:16px 4px 0 14px;border-color:var(--sp-comic-ink) transparent transparent transparent}
.sp-mode-home .sp-bubble.sp-at-above::after{right:30px;bottom:-10px;border-width:10px 2px 0 9px;border-color:var(--sp-comic-fill) transparent transparent transparent}
/* 짧은 감탄: 뒤에 만화 폭발 모양 */
.sp-bubble.sp-burst .sp-bubble-body::before{content:'';position:absolute;z-index:-1;left:-22px;top:-20px;width:58px;height:58px;background:var(--sp-comic-burst);border:3px solid var(--sp-comic-ink);clip-path:polygon(50% 0,61% 30%,95% 18%,72% 45%,100% 62%,66% 66%,72% 100%,50% 76%,28% 100%,34% 66%,0 62%,28% 45%,5% 18%,39% 30%);animation:sp-burst .5s ease-out both}
.sp-bubble-body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1;padding-bottom:4px}
.sp-bubble-cta:empty{display:none}
.sp-cta{display:inline-flex;align-items:center;gap:5px;margin-left:12px;padding:5px 10px;border:2px solid var(--sp-comic-ink);border-radius:999px;background:var(--sp-comic-ink);color:#fff;font-size:12px;font-weight:800;text-decoration:none}
.sp-cta:hover{background:#25365c}
.sp-cta .sp-ico{width:14px;height:14px}
.sp .sp-bubble-text{flex:1;padding:7px 4px 3px 13px;border:0;background:none;color:var(--sp-comic-ink);font:inherit;font-size:13.5px;font-weight:800;line-height:1.45;letter-spacing:-.01em;text-align:left;cursor:pointer;box-shadow:none}
.sp-bubble-text:hover{text-decoration:underline;text-underline-offset:3px}
.sp .sp-bubble-x{display:grid;place-items:center;flex:none;width:24px;height:24px;margin:2px 2px 0 0;border:2px solid var(--sp-comic-ink);border-radius:50%;background:#fff;color:var(--sp-comic-ink);cursor:pointer;box-shadow:none;padding:0}
.sp-bubble-x .sp-ico{width:12px;height:12px}
.sp-bubble-x:hover{background:#eef2f8}
@keyframes sp-comic-pop{0%{opacity:0;transform:scale(.55) rotate(-4deg)}60%{opacity:1;transform:scale(1.07) rotate(1deg)}80%{transform:scale(.97)}100%{opacity:1;transform:none}}
@keyframes sp-burst{0%{transform:scale(.3) rotate(-30deg);opacity:0}70%{transform:scale(1.15) rotate(6deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes sp-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* 어두운 화면: 테두리·그림자를 밝게 해서 말풍선이 배경과 떨어져 보이게(바탕은 흰색 유지 → 글씨 대비 그대로) */
@media (prefers-color-scheme:dark){.sp{--sp-comic-shadow:#e9c46a}.sp-bubble{box-shadow:4px 4px 0 #e9c46a}}
html.dark .sp-bubble,html[data-theme="dark"] .sp-bubble,body.dark .sp-bubble,body.vt-dark .sp-bubble{box-shadow:4px 4px 0 #e9c46a}
/* 움직임 줄이기: 톡 튀는 등장·폭발 움직임 없음 */
@media (prefers-reduced-motion:reduce){.sp-bubble,.sp-bubble.sp-burst .sp-bubble-body::before{animation:none}}
/* 공개 페이지 대화창 머리의 조용히 하기 */
.sp .sp-quietbtn{height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:none;color:inherit;font:inherit;font-size:12px;font-weight:700;cursor:pointer;box-shadow:none}
.sp .sp-quietbtn:hover{background:rgba(255,255,255,.12)}
.sp-kakao-addr{display:block;width:100%;font-size:12px;color:var(--sp-sub);word-break:break-all}

/* 대화창 */
.sp-panel{order:1;width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;border-radius:20px;background:var(--sp-paper);border:1px solid var(--sp-line);box-shadow:var(--sp-shadow);overflow:hidden;animation:sp-pop .2s ease-out}
.sp-panel[hidden]{display:none}
.sp-head,.sp-chips,.sp-form{flex:none}
.sp-head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 12px;background:var(--sp-navy);color:#fff}
.sp-name{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14.5px}
.sp-name small{font-weight:500;font-size:12px;color:#aebed2}
.sp-mini{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff}
.sp-left{margin-left:auto;font-size:11.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.12);border-radius:999px;padding:3px 9px}
.sp-left:empty{display:none}
.sp-iconbtn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.sp-iconbtn:hover{background:rgba(255,255,255,.22)}
.sp-log{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;background:var(--sp-bg)}
.sp-msg{max-width:92%;font-size:13.5px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.sp-msg p{margin:0 0 6px}.sp-msg p:last-child{margin-bottom:0}
.sp-me{align-self:flex-end;padding:8px 12px;border-radius:16px 16px 4px 16px;background:var(--sp-blue);color:#fff}
.sp-pet{align-self:flex-start;padding:10px 12px;border-radius:16px 16px 16px 4px;background:#fff;border:1px solid var(--sp-line)}
.sp-badge{display:inline-flex;align-items:center;gap:5px;margin:0 0 7px;padding:3px 9px 3px 7px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--sp-soft);color:var(--sp-navy)}
.sp-badge em{font-style:normal;font-weight:600;opacity:.8;margin-left:4px;padding-left:6px;border-left:1px solid currentColor}
.sp-b-explain{background:#e8f1fe;color:var(--sp-blue-d)}
.sp-b-tutor{background:var(--sp-navy);color:#fff}
.sp-b-muted{color:var(--sp-sub)}
.sp-note{font-size:12px;color:var(--sp-navy);background:var(--sp-soft);border-radius:10px;padding:6px 9px}
.sp-steps{margin:4px 0 6px;padding-left:20px}
.sp-steps li{margin:0 0 8px}.sp-steps li::marker{color:var(--sp-blue);font-weight:800}
.sp-ev summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:11.5px;font-weight:700;color:var(--sp-blue-d);list-style:none}
.sp-ev summary::-webkit-details-marker{display:none}
.sp-ev blockquote{margin:6px 0 0;padding:7px 9px;border-left:3px solid var(--sp-blue);background:var(--sp-bg);border-radius:0 8px 8px 0;font-size:12.5px;color:#33415a}
.sp-ev blockquote b{display:block;font-size:10.5px;letter-spacing:.03em;color:var(--sp-blue-d);margin-bottom:2px}
.sp-check{display:flex;gap:5px;align-items:flex-start;font-weight:600;color:var(--sp-navy);background:var(--sp-soft);border-radius:10px;padding:7px 9px}
.sp-check .sp-ico{margin-top:3px}
.sp-src{font-size:11.5px;color:var(--sp-sub)}
.sp-kakao-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px!important;font-size:12.5px;color:var(--sp-sub)}
.sp-kakao{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;border:1px solid var(--sp-line);background:#fff;color:var(--sp-navy);font-size:12px;font-weight:700;text-decoration:none}
.sp-kakao:hover{border-color:var(--sp-navy)}
.sp-kakao .sp-ico{width:14px;height:14px}
/* 다음 행동 버튼(해설 보기 · 첨삭 튜터 구매하기 · AI 튜터 열기) */
.sp-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px!important}
.sp .sp-action{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:5px 12px;border-radius:999px;border:1px solid var(--sp-line);background:#fff;color:var(--sp-navy);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:none}
.sp .sp-action:hover{border-color:var(--sp-navy)}
.sp .sp-action-main{background:var(--sp-navy);border-color:var(--sp-navy);color:#fff}
.sp .sp-action-main:hover{background:#1f3158}
.sp-action .sp-ico{width:14px;height:14px}
.sp-dot-survey{background:var(--sp-blue)}
.sp-dot-quiet{background:none;border:1.5px solid var(--sp-sub)}
.sp-quiet .sp-dot-quiet{background:var(--sp-sub)}
/* 사이트 공통 button 스타일(흰 원·테두리·그림자)이 베티 그림에 묻지 않게 */
#study-pet .sp-figure,#study-pet .sp-figure:hover,#study-pet .sp-figure:active,#study-pet .sp-figure:focus{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-width:0!important;min-height:0!important;width:auto!important;height:auto!important;transform:none!important}
.sp-dots{display:inline-flex;gap:4px;padding:4px 2px}
.sp-dots i{width:6px;height:6px;border-radius:50%;background:var(--sp-blue);opacity:.35;animation:sp-dot 1s infinite}
.sp-dots i:nth-child(2){animation-delay:.15s}.sp-dots i:nth-child(3){animation-delay:.3s}
@keyframes sp-dot{50%{opacity:1;transform:translateY(-2px)}}
.sp-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;scrollbar-width:none;background:var(--sp-bg)}
.sp-chips::-webkit-scrollbar{display:none}
.sp-chip{flex:none;padding:6px 11px;border-radius:999px;border:1px solid var(--sp-line);background:#fff;color:var(--sp-navy);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.sp-chip:hover{border-color:var(--sp-blue);color:var(--sp-blue-d)}
.sp-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px 12px;border-top:1px solid var(--sp-line);background:#fff}
.sp-form textarea{flex:1;resize:none;min-height:40px;max-height:96px;padding:9px 12px;border-radius:12px;border:1px solid var(--sp-line);background:var(--sp-bg);font:inherit;font-size:14px;line-height:1.45;color:var(--sp-ink);outline:none}
.sp-form textarea:focus{border-color:var(--sp-blue);box-shadow:0 0 0 3px rgba(49,130,246,.16)}
.sp-send{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:0;background:var(--sp-blue);color:#fff;cursor:pointer}
.sp-send:hover{background:var(--sp-blue-d)}
.sp-send .sp-ico{width:18px;height:18px}

/* 모바일: 펫은 조금 작게, 대화창은 아래에서 올라오는 시트 */
@media (max-width:639px){
  .sp{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}
  .sp-bubble{max-width:200px}
  .sp.sp-open{left:0;right:0;bottom:0;align-items:stretch;gap:0}
  .sp.sp-open .sp-dock{display:none}
  .sp-panel{width:100%;max-height:74vh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .sp-form textarea{font-size:16px}
}
/* 움직임 줄이기: 걷기·뛰기·둥실거림 없이 표정만 */
@media (prefers-reduced-motion:reduce){
  .sp,.sp *,.sp-dock{animation:none!important;transition:none!important}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sp{--sp-ink:#f2f4f6;--sp-sub:#aebed2;--sp-bg:#131f30;--sp-soft:#24344a;--sp-line:#344358;--sp-paper:#1a2a40}
  :root:not([data-theme="light"]) .sp-pet,:root:not([data-theme="light"]) .sp-form,:root:not([data-theme="light"]) .sp-chip{background:#1a2a40;color:var(--sp-ink)}
  :root:not([data-theme="light"]) .sp-badge,:root:not([data-theme="light"]) .sp-check,:root:not([data-theme="light"]) .sp-note{color:#dbe6f5}
  :root:not([data-theme="light"]) .sp-ev blockquote{color:#d6e2f2}
}
/* 말풍선 자리 재기용(스크립트가 잠깐 붙였다 뗌): 실제 크기로 재도록 움직임 끔 */
.sp .sp-bubble.sp-measure{animation:none!important;transform:none!important}
/* 공개 홈페이지 말풍선 자리 추가 후보: 루멘 왼쪽 아래쪽(질문하기 버튼 옆)·왼쪽 위쪽 */
.sp-mode-home .sp-bubble.sp-at-left-low,.sp-mode-home .sp-bubble.sp-at-left-high{right:calc(100% + 14px);transform-origin:110% 70%}
.sp-mode-home .sp-bubble.sp-at-left-low{bottom:0}
.sp-mode-home .sp-bubble.sp-at-left-high{bottom:72%}
.sp-mode-home .sp-bubble.sp-at-left-low::before,.sp-mode-home .sp-bubble.sp-at-left-high::before{right:-17px;bottom:16px;border-width:4px 0 14px 16px;border-color:transparent transparent transparent var(--sp-comic-ink)}
.sp-mode-home .sp-bubble.sp-at-left-low::after,.sp-mode-home .sp-bubble.sp-at-left-high::after{right:-10px;bottom:19px;border-width:2px 0 9px 10px;border-color:transparent transparent transparent var(--sp-comic-fill)}
/* 휴대폰: 말풍선을 좁게(버튼 사이 빈 곳에 들어가도록) */
@media (max-width:640px){.sp-mode-home .sp-bubble{max-width:min(210px,calc(100vw - 120px))}.sp-mode-home .sp-bubble .sp-bubble-text{font-size:12.5px;padding:6px 3px 2px 11px}}

/* ===== 대화창 다듬기(원장님 휴대폰 의견) ===== */
.sp{--sp-comic-ink:#14213d}
.sp-head{position:relative}
.sp-grab{display:none}
.sp-name{align-items:center;min-width:0;line-height:1.2}
.sp-name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-mini{flex:none;width:32px;height:32px}
/* 닫기: X 아이콘, 44px 누르는 칸, 머리와 같은 색 */
.sp .sp-closebtn{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-6px -4px -6px 0;padding:0;border:0;border-radius:12px;background:transparent;color:#fff;cursor:pointer;box-shadow:none}
.sp .sp-closebtn:hover,.sp .sp-closebtn:focus-visible{background:rgba(255,255,255,.14);outline:none}
.sp-closebtn .sp-ico{width:22px;height:22px}
/* 조용히 하기: 작은 글자 버튼(닫기와 겨루지 않게) */
.sp .sp-quietbtn{height:26px;padding:0 9px;border:1px solid rgba(255,255,255,.28);font-size:11.5px;font-weight:600;color:#d7e1ee;white-space:nowrap}
/* 베티 메시지: 떠 있는 말풍선과 같은 만화 모양 */
.sp .sp-pet{border:2.5px solid var(--sp-comic-ink);border-radius:16px 16px 16px 4px;background:#fff;color:var(--sp-comic-ink);box-shadow:3px 3px 0 var(--sp-comic-ink)}
.sp .sp-pet .sp-src,.sp .sp-pet .sp-kakao-row{color:#5b6b80}
/* 빠른 질문 칩: 연한 색, 오른쪽 끝으로 넘치지 않고 두 줄까지 감김 */
.sp .sp-chips{flex-wrap:wrap;overflow:visible;row-gap:6px}
.sp .sp-chip{flex:0 1 auto;max-width:100%;white-space:normal;text-align:left;line-height:1.35;padding:6px 11px;border:1px solid transparent;background:#eef3fa;color:#1f3158;font-weight:600}
.sp .sp-chip:hover{background:#e2ebf7;border-color:#c9d7ea}
/* 휴대폰: 둥근 윗모서리·부드러운 그림자·손잡이가 있는 아래 시트(사이트 아래 메뉴 위로 올림은 스크립트) */
@media (max-width:639px){
  .sp .sp-panel{border:0;border-radius:22px 22px 0 0;box-shadow:0 -10px 34px rgba(20,33,61,.24),0 -1px 0 rgba(20,33,61,.06)}
  .sp-grab{display:block;position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(255,255,255,.45)}
  .sp-head{padding:16px 10px 10px 14px}
  .sp-form{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}
/* 어두운 화면에서도 베티 메시지는 흰 바탕+진한 글씨(만화 말풍선과 같게) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sp .sp-pet{background:#fff;color:var(--sp-comic-ink)}
  :root:not([data-theme="light"]) .sp .sp-chip{background:#24344a;color:#e6edf6}
}
/* 머리 줄이 붐비지 않게: 남은 횟수는 한 줄, 휴대폰 공개 페이지에서는 부제(베테랑스 토플 공부 도우미) 숨김 */
.sp .sp-left{white-space:nowrap;flex:none}
@media (max-width:639px){.sp-mode-home .sp-name small{display:none}}
/* 보내기 버튼: 사이트 공통 button 눌림·초점 스타일에 색이 바래지 않게 */
#study-pet .sp-send,#study-pet .sp-send:focus,#study-pet .sp-send:active,#study-pet .sp-send:focus-visible{background:var(--sp-blue)!important;color:#fff!important;border:0!important;box-shadow:none!important;opacity:1!important}
#study-pet .sp-send:hover{background:var(--sp-blue-d)!important}
#study-pet .sp-send:focus-visible{outline:3px solid rgba(49,130,246,.35)!important;outline-offset:2px}

.betty-glyph-empty{display:none!important}
html.betty-covered #study-pet .sp-dock{opacity:0;pointer-events:none;transition:opacity .2s}