/* hoidoki.css — 예비준 전용 마스코트 "회독이"
   원칙: 문제 본문/선택지를 가리지 않고, 의미 있는 순간에만 짧게 등장한다. */
:root{
  --hdki-green:#315c45;
  --hdki-green-2:#46745b;
  --hdki-soft:#eef7ef;
  --hdki-cream:#fffdf7;
  --hdki-ink:#173126;
  --hdki-line:rgba(49,92,69,.16);
  --hdki-shadow:0 12px 30px rgba(24,61,43,.16);
}
#hoidoki-root{position:fixed;z-index:340;right:18px;bottom:24px;pointer-events:none;font-family:inherit}
#hoidoki-root[hidden]{display:none!important}
.hdki-float{display:flex;align-items:flex-end;gap:9px;max-width:min(330px,calc(100vw - 28px));pointer-events:none}
.hdki-sticker{position:relative;width:82px;height:82px;border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--hdki-line);box-shadow:var(--hdki-shadow);flex:0 0 auto;transform-origin:60% 100%}
.hdki-sticker img{width:100%;height:100%;object-fit:cover;display:block}
.hdki-bubble{position:relative;max-width:218px;background:#fffdf7;background:color-mix(in srgb,var(--hdki-cream) 94%,white);border:1px solid var(--hdki-line);box-shadow:0 8px 24px rgba(24,61,43,.12);border-radius:16px 16px 5px 16px;padding:10px 12px;color:var(--hdki-ink);font-size:13px;font-weight:750;line-height:1.48;letter-spacing:-.02em;pointer-events:auto}
.hdki-name{display:block;color:var(--hdki-green);font-size:11px;font-weight:900;margin-bottom:2px;letter-spacing:.02em}
.hdki-close{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:999px;border:1px solid var(--hdki-line);background:#fff;color:#63756c;font:800 13px/1 inherit;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.hdki-close:focus-visible{outline:3px solid rgba(49,92,69,.25);outline-offset:2px}
#hoidoki-root[data-state="welcome"] .hdki-sticker{animation:hdki-arrive .72s cubic-bezier(.2,.9,.25,1.25)}
#hoidoki-root[data-state="correct"] .hdki-sticker{animation:hdki-pop .46s cubic-bezier(.2,.9,.25,1.3)}
#hoidoki-root[data-state="wrong"] .hdki-sticker{animation:hdki-tilt .52s ease}
#hoidoki-root[data-state="trap"] .hdki-sticker{animation:hdki-peek .55s ease}
#hoidoki-root[data-state="complete"] .hdki-sticker{animation:hdki-celebrate .78s cubic-bezier(.2,.9,.25,1.2)}
#hoidoki-root[data-state="idle"] .hdki-sticker{animation:hdki-breathe 3.8s ease-in-out infinite}
#hoidoki-root.hdki-enter{animation:hdki-fade .2s ease both}
#hoidoki-root.hdki-leave{animation:hdki-out .18s ease both}
@keyframes hdki-arrive{0%{transform:translateY(34px) scale(.82);opacity:0}62%{transform:translateY(-6px) scale(1.03)}100%{transform:none;opacity:1}}
@keyframes hdki-pop{0%{transform:translateY(18px) scale(.86)}65%{transform:translateY(-4px) scale(1.06)}100%{transform:none}}
@keyframes hdki-tilt{0%,100%{transform:none}35%{transform:rotate(-4deg) translateY(2px)}70%{transform:rotate(2deg)}}
@keyframes hdki-peek{0%{transform:translateY(26px)}55%{transform:translateY(-3px)}100%{transform:none}}
@keyframes hdki-celebrate{0%{transform:translateY(20px) scale(.88)}42%{transform:translateY(-11px) rotate(-3deg) scale(1.05)}72%{transform:translateY(-2px) rotate(2deg)}100%{transform:none}}
@keyframes hdki-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes hdki-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hdki-out{to{opacity:0;transform:translateY(8px)}}
.hdki-home-note{display:flex;align-items:center;gap:11px;margin:9px 0 4px;padding:9px 12px;border:1px solid var(--hdki-line);border-radius:14px;background:linear-gradient(135deg,rgba(238,247,239,.94),rgba(255,253,247,.96));color:var(--hdki-ink);box-shadow:0 4px 15px rgba(24,61,43,.07)}
.hdki-home-note .hdki-home-avatar{width:50px;height:50px;border-radius:17px;overflow:hidden;background:#fff;flex:0 0 auto;border:1px solid rgba(49,92,69,.12)}
.hdki-home-note img{width:100%;height:100%;object-fit:cover;display:block}
.hdki-home-copy{min-width:0;line-height:1.45}
.hdki-home-copy b{display:block;font-size:13px;color:var(--hdki-green);margin-bottom:1px}
.hdki-home-copy span{display:block;font-size:12.5px;color:#536b5e}
.hdki-home-note[data-complete="1"]{background:linear-gradient(135deg,#f0fdf4,#fffdf5)}
.hdki-result-mascot{width:104px;height:104px;border-radius:34px;overflow:hidden;background:#fff;border:1px solid var(--hdki-line);box-shadow:0 10px 24px rgba(24,61,43,.14);margin:0 auto}
.hdki-result-mascot img{width:100%;height:100%;object-fit:cover;display:block}
.hdki-result-mascot.complete{animation:hdki-celebrate .78s cubic-bezier(.2,.9,.25,1.2)}
.hdki-welcome{position:fixed;z-index:345;left:50%;bottom:24px;transform:translateX(-50%);width:min(520px,calc(100vw - 28px));display:flex;align-items:center;gap:13px;background:rgba(255,253,247,.97);border:1px solid var(--hdki-line);border-radius:22px;padding:12px 16px;box-shadow:0 18px 45px rgba(24,61,43,.19);color:var(--hdki-ink);animation:hdki-welcome-in .5s cubic-bezier(.2,.9,.25,1.12);pointer-events:none}
.hdki-welcome img{width:76px;height:76px;border-radius:25px;object-fit:cover;background:#fff;border:1px solid var(--hdki-line);flex:0 0 auto}
.hdki-welcome b{display:block;color:var(--hdki-green);font-size:15px;margin-bottom:3px}
.hdki-welcome span{font-size:13px;font-weight:700;color:#536b5e;line-height:1.45}
.hdki-welcome.out{animation:hdki-welcome-out .25s ease forwards}
@keyframes hdki-welcome-in{from{opacity:0;transform:translate(-50%,30px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes hdki-welcome-out{to{opacity:0;transform:translate(-50%,12px)}}
html[data-theme="dark"] .hdki-bubble,
html[data-theme="dark"] .hdki-home-note,
html[data-theme="dark"] .hdki-welcome{background:#14251d;color:#ecf7f0;border-color:rgba(166,210,183,.18)}
html[data-theme="dark"] .hdki-name,
html[data-theme="dark"] .hdki-home-copy b{color:#9fd5b2}
html[data-theme="dark"] .hdki-home-copy span,
html[data-theme="dark"] .hdki-welcome span{color:#bfd2c6}
html[data-theme="dark"] .hdki-close{background:#1d3027;color:#d8e7dd;border-color:rgba(166,210,183,.18)}
body.hdki-focus #hoidoki-root{display:none!important}
@media(max-width:640px){
  #hoidoki-root{right:10px;bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .hdki-sticker{width:62px;height:62px;border-radius:21px}
  .hdki-bubble{max-width:178px;font-size:12px;padding:8px 10px}
  .hdki-home-note{margin:8px 0 3px;padding:8px 10px}
  .hdki-home-note .hdki-home-avatar{width:44px;height:44px;border-radius:15px}
  .hdki-welcome{bottom:calc(18px + env(safe-area-inset-bottom,0px));padding:10px 12px;border-radius:18px}
  .hdki-welcome img{width:62px;height:62px;border-radius:20px}
}
@media(prefers-reduced-motion:reduce){
  #hoidoki-root *, .hdki-welcome, .hdki-result-mascot{animation:none!important;transition:none!important}
}
@media print{
  #hoidoki-root,.hdki-home-note,.hdki-welcome{display:none!important}
}

/* ===== Hoidoki pose language v2: 같은 회독이를 상태별로 다르게 보이게 ===== */
.hdki-sticker img{transition:transform .18s ease,filter .18s ease}
.hdki-prop{display:none;position:absolute;pointer-events:none;z-index:3}
#hoidoki-root[data-state="correct"] .hdki-sticker img{transform:scale(1.08) translateY(-2px)}
#hoidoki-root[data-state="wrong"] .hdki-sticker img{transform:scale(1.14) translateY(4px) rotate(-3deg);filter:saturate(.86)}
#hoidoki-root[data-state="trap"] .hdki-sticker img{transform:scale(1.16) translate(3px,3px)}
#hoidoki-root[data-state="reading"] .hdki-sticker img{transform:scale(1.02) translateY(-5px)}
#hoidoki-root[data-state="complete"] .hdki-sticker img{transform:scale(.96) translateX(-7px)}
#hoidoki-root[data-state="correct"] .hdki-sticker::after{
  content:"";position:absolute;inset:6px;border-radius:24px;z-index:2;pointer-events:none;
  background:
    linear-gradient(var(--hdki-green),var(--hdki-green)) 50% 0/3px 9px no-repeat,
    linear-gradient(90deg,var(--hdki-green),var(--hdki-green)) 100% 50%/9px 3px no-repeat,
    linear-gradient(var(--hdki-green),var(--hdki-green)) 50% 100%/3px 9px no-repeat;
  opacity:.72;animation:hdki-rays .46s ease both
}
@keyframes hdki-rays{0%{opacity:0;transform:scale(.72)}60%{opacity:.8;transform:scale(1.02)}100%{opacity:.45;transform:scale(1)}}
#hoidoki-root[data-state="trap"] .hdki-prop{
  display:block;width:34px;height:34px;left:10px;top:17px;border:4px solid #24483a;border-radius:50%;
  background:rgba(219,241,236,.34);box-shadow:inset 0 0 0 2px rgba(255,255,255,.75),0 3px 8px rgba(16,46,35,.18)
}
#hoidoki-root[data-state="trap"] .hdki-prop::after{
  content:"";position:absolute;width:20px;height:7px;border-radius:5px;background:#24483a;right:-15px;bottom:-8px;transform:rotate(43deg);transform-origin:left center
}
#hoidoki-root[data-state="reading"] .hdki-prop{
  display:block;left:50%;bottom:3px;width:62px;height:31px;transform:translateX(-50%);
  border:2px solid #173126;border-radius:4px 4px 9px 9px;
  background:linear-gradient(90deg,#3d6f55 0 47%,#f6efe0 47% 53%,#3d6f55 53% 100%);
  box-shadow:0 5px 8px rgba(18,50,37,.18)
}
#hoidoki-root[data-state="reading"] .hdki-prop::before{
  content:"";position:absolute;left:50%;top:2px;bottom:3px;width:1px;background:#173126;opacity:.45
}
#hoidoki-root[data-state="reading"] .hdki-prop::after{
  content:"∞";position:absolute;right:9px;top:2px;color:#fff;font:900 18px/1 system-ui,sans-serif
}
#hoidoki-root[data-state="complete"] .hdki-prop{
  display:grid;place-items:center;right:1px;bottom:5px;width:43px;height:43px;border-radius:50%;
  border:3px solid #376d50;background:#fffdf7;color:#376d50;transform:rotate(-10deg);
  box-shadow:0 4px 10px rgba(18,50,37,.16);font:900 25px/1 system-ui,sans-serif
}
#hoidoki-root[data-state="complete"] .hdki-prop::before{content:"∞";transform:translateY(-2px)}
#hoidoki-root[data-state="complete"] .hdki-prop::after{
  content:"완료";position:absolute;left:4px;right:4px;bottom:2px;text-align:center;font:900 8px/1.1 inherit;letter-spacing:.02em
}
.hdki-result-mascot{position:relative}
.hdki-result-stamp{
  position:absolute;right:-3px;bottom:1px;width:48px;height:48px;border-radius:50%;
  border:3px solid #376d50;background:#fffdf7;color:#376d50;transform:rotate(-11deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 5px 12px rgba(18,50,37,.16)
}
.hdki-result-stamp b{font:900 24px/20px system-ui,sans-serif}
.hdki-result-stamp span{font-size:8px;font-weight:900;line-height:1}
#hoidoki-root[data-state="reading"] .hdki-sticker{animation:hdki-breathe 3.8s ease-in-out infinite}
@media(max-width:640px){
  #hoidoki-root[data-state="trap"] .hdki-prop{width:27px;height:27px;left:7px;top:12px;border-width:3px}
  #hoidoki-root[data-state="trap"] .hdki-prop::after{width:16px;height:6px;right:-12px;bottom:-7px}
  #hoidoki-root[data-state="reading"] .hdki-prop{width:49px;height:25px;bottom:2px}
  #hoidoki-root[data-state="reading"] .hdki-prop::after{font-size:15px;right:7px}
  #hoidoki-root[data-state="complete"] .hdki-prop{width:35px;height:35px;font-size:21px}
}
@media(prefers-reduced-motion:reduce){.hdki-sticker img{transition:none!important}}



/* loading: 회독이가 책을 준비하는 동안만. 실제 로딩이 끝나면 즉시 사라짐 */
#hoidoki-root[data-state="loading"] .hdki-sticker img{transform:scale(1.01) translateY(-4px);animation:hdki-load-bob 1.25s ease-in-out infinite}
#hoidoki-root[data-state="loading"] .hdki-prop{
  display:block;left:50%;bottom:3px;width:60px;height:29px;transform:translateX(-50%);
  border:2px solid #173126;border-radius:4px 4px 9px 9px;
  background:linear-gradient(90deg,#3d6f55 0 47%,#f6efe0 47% 53%,#3d6f55 53% 100%);
  box-shadow:0 5px 8px rgba(18,50,37,.18)
}
#hoidoki-root[data-state="loading"] .hdki-prop::before{content:"";position:absolute;left:50%;top:2px;bottom:3px;width:1px;background:#173126;opacity:.45}
#hoidoki-root[data-state="loading"] .hdki-prop::after{content:"∞";position:absolute;right:9px;top:2px;color:#fff;font:900 17px/1 system-ui,sans-serif}
@keyframes hdki-load-bob{0%,100%{transform:scale(1.01) translateY(-3px)}50%{transform:scale(1.01) translateY(1px)}}
@media(prefers-reduced-motion:reduce){#hoidoki-root[data-state="loading"] .hdki-sticker img{animation:none!important}}



/* save/review: 기존 애매·찍음 복습 큐에 들어간 순간, 회독이가 문제 카드를 책에 보관하는 연출 */
#hoidoki-root[data-state="save"] .hdki-sticker img{transform:scale(1.02) translateX(-4px)}
#hoidoki-root[data-state="save"] .hdki-prop{
  display:block;right:0;bottom:7px;width:37px;height:46px;border-radius:5px;
  border:2px solid #173126;background:#fffdf7;box-shadow:0 4px 10px rgba(18,50,37,.15);
  transform:rotate(7deg);animation:hdki-card-save .62s cubic-bezier(.2,.8,.2,1) both
}
#hoidoki-root[data-state="save"] .hdki-prop::before{
  content:"∞";position:absolute;inset:8px 0 auto;text-align:center;color:#376d50;font:900 20px/1 system-ui,sans-serif
}
#hoidoki-root[data-state="save"] .hdki-prop::after{
  content:"다시";position:absolute;left:4px;right:4px;bottom:5px;text-align:center;color:#376d50;font:900 8px/1 system-ui,sans-serif
}
@keyframes hdki-card-save{
  0%{opacity:0;transform:translate(18px,-14px) rotate(13deg) scale(1.08)}
  70%{opacity:1;transform:translate(-2px,2px) rotate(6deg) scale(.96)}
  100%{opacity:1;transform:translate(0,0) rotate(7deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  #hoidoki-root[data-state="save"] .hdki-prop{animation:none!important}
}



/* 회독이 quick menu — 비집중 화면에서만 호출. 문제 풀이 중에는 menuAllowed()가 차단 */
.hdki-sticker{appearance:none;padding:0;font:inherit;color:inherit}
#hoidoki-root[data-menuable="1"] .hdki-sticker{pointer-events:auto;cursor:pointer}
#hoidoki-root[data-menuable="0"] .hdki-sticker{pointer-events:none;cursor:default}
.hdki-menu{
  pointer-events:auto;position:absolute;right:0;bottom:92px;width:184px;padding:7px;
  border:1px solid var(--hdki-line);border-radius:15px;background:#fffdf7;
  box-shadow:0 12px 30px rgba(24,61,43,.16)
}
.hdki-menu[hidden]{display:none!important}
.hdki-menu a{
  display:block;padding:10px 11px;border-radius:10px;text-decoration:none;color:var(--hdki-ink);
  font-size:12.5px;font-weight:800;line-height:1.2
}
.hdki-menu a:hover,.hdki-menu a:focus-visible{background:var(--hdki-soft);outline:none}
.hdki-menu a+a{border-top:1px solid rgba(49,92,69,.08)}
.hdki-home-avatar{appearance:none;padding:0;cursor:pointer}
.hdki-home-avatar:focus-visible{outline:3px solid rgba(49,92,69,.22);outline-offset:2px}
html[data-theme="dark"] .hdki-menu{background:#14251d;border-color:rgba(166,210,183,.18)}
html[data-theme="dark"] .hdki-menu a{color:#ecf7f0}
html[data-theme="dark"] .hdki-menu a:hover,html[data-theme="dark"] .hdki-menu a:focus-visible{background:#1d3027}
@media(max-width:640px){.hdki-menu{bottom:72px;right:0;width:170px}}



/* 기존 우측 하단 음성 FAB와 물리적으로 겹치지 않게, 존재할 때만 회독이를 왼쪽으로 이동 */
body.hdki-has-vfab #hoidoki-root{right:78px}
@media(max-width:640px){
  body.hdki-has-vfab #hoidoki-root{right:72px}
  body.hdki-has-vfab #hoidoki-root .hdki-menu{right:-62px}
}
/* 문제 채점 피드백은 sticky actbar 바로 위에서 끝나도록 한 단계 더 띄움 */
@media(max-width:640px){
  #hoidoki-root[data-state="correct"],
  #hoidoki-root[data-state="wrong"],
  #hoidoki-root[data-state="trap"],
  #hoidoki-root[data-state="save"]{
    bottom:calc(118px + env(safe-area-inset-bottom,0px))
  }
}



/* Save-Data / 저메모리 기기: 회독이 기능은 유지하고 반복 움직임만 제거 */
html.hdki-lite #hoidoki-root *,
html.hdki-lite .hdki-welcome,
html.hdki-lite .hdki-result-mascot{animation:none!important;transition:none!important}



/* 예비준 기존 집중/전체화면 학습 모드에서는 회독이가 완전히 물러난다 */
body.focus-mode #hoidoki-root,
body.study-fs-active #hoidoki-root,
body.focus-mode .hdki-welcome,
body.study-fs-active .hdki-welcome{display:none!important}