:root{color-scheme:light;--paper:#f3eee4;--ink:#52665a;font-family:ui-rounded,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;--wall-hi:#fffbee;--wall-mid:#f3eee4;--wall-lo:#e8e4d9;--glow:#fff6dc;--shade:.05;--band:0px;--story-font:'Gowun Dodum',ui-rounded,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;--caption-ink:#2c463c;--caption-paper:rgb(255 252 244 / .94);--book-ink:#3d3027;--ribbon:#d67b60}
@font-face{font-family:'Gowun Dodum';src:url('fonts/GowunDodum-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--wall-mid,var(--paper))}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%237d7058' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
#room{width:100%;height:100%;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) var(--band);place-items:center;position:relative;isolation:isolate;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(circle at 50% 38%,var(--glow) 0%,transparent 42%),radial-gradient(ellipse at 50% 42%,var(--wall-hi) 0%,var(--wall-mid) 60%,var(--wall-lo) 100%)}
/* The room darkens at the edges for spooky or night moods; the story sets --shade. */
#room::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,transparent 52%,rgb(24 38 40 / var(--shade)) 100%)}
#ambience{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body[data-state] #room{--band:clamp(100px,16dvh,170px)}
#robot{grid-row:1;position:relative;z-index:1;width:min(94vw,76dvh,calc((100dvh - var(--band) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px)*.82),650px);aspect-ratio:640/780;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;user-select:none;transform:translateY(-1.5%)}
#robot:focus-visible{outline:2px dashed #8da895;outline-offset:6px;border-radius:40%}
#portrait{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 7px 1px #334d3f12)}
#robot{max-width:100%;-webkit-user-select:none;-webkit-touch-callout:none}
#robot.boop #antenna{animation:antenna .3s ease-in-out 2}
#robot.preparing #heart{animation:prepare-heart 1.4s ease-in-out infinite}
[data-eyes="반짝임"] .eyeball{filter:drop-shadow(0 0 3px #f2cf6d)}
@keyframes prepare-heart{50%{opacity:.45}}
#head{transform-origin:320px 490px;animation:sway 8s ease-in-out infinite;transition:transform .5s}
#body{transform-origin:320px 710px;animation:breathe 5s ease-in-out infinite}
#antenna{transform-origin:320px 153px;animation:antenna 6s ease-in-out infinite}
.cog{animation:spin 35s linear infinite}.reverse{animation-direction:reverse;animation-duration:26s}
#ear-left{transform-origin:168px 278px}#ear-right{transform-origin:472px 278px}
#eye-left{transform-origin:244px 282px}#eye-right{transform-origin:396px 282px}
#brow-left{transform-origin:235px 223px}#brow-right{transform-origin:407px 222px}
#nose{transform-origin:320px 336px}#mouth{transform-origin:320px 397px}
.ear,.eye,#brow-left,#brow-right,#mouth,#nose{transition:transform .45s cubic-bezier(.22,.8,.2,1)}
.eyeball{transition:transform .5s}.happy-eye,#o-mouth{display:none}
#heart{filter:drop-shadow(0 0 0 #df7c5e);transition:filter 1s}
#robot[data-connection="listening"] #heart{filter:drop-shadow(0 0 9px #efb082)}
#robot[data-connection="listening"] #listening-bars path{animation:bars .8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
#listening-bars path:nth-child(2){animation-delay:-.4s}#listening-bars path:nth-child(3){animation-delay:-.6s}#listening-bars path:nth-child(4){animation-delay:-.2s}
.blink .eye{transform:scaleY(.07)!important}
[data-eyes="반달 모양으로 웃음"] .eyeball{opacity:0}[data-eyes="반달 모양으로 웃음"] .happy-eye{display:block}
[data-eyes="크게 커짐"] .eye{transform:scale(1.08)}
[data-eyes="좌우로 굴러감"] .eyeball{animation:look 3s ease-in-out infinite}
[data-brows="위로 들썩임"] #brow-left,[data-brows="위로 들썩임"] #brow-right{animation:brows .9s ease-in-out 2}
[data-brows="한쪽만 올라감"] #brow-right{transform:translateY(-15px) rotate(-10deg)}
[data-brows="팔자(八)로 내려감"] #brow-left{transform:rotate(-14deg)}[data-brows="팔자(八)로 내려감"] #brow-right{transform:rotate(14deg)}
[data-brows="물결침"] #brow-left,[data-brows="물결침"] #brow-right{animation:brows 1.4s ease-in-out infinite}
[data-ears="쫑긋 세움"] #ear-left{transform:rotate(13deg)}[data-ears="쫑긋 세움"] #ear-right{transform:rotate(-13deg)}
[data-ears="앞뒤로 팔랑거림"] #ear-left{animation:flap .6s ease-in-out 4}[data-ears="앞뒤로 팔랑거림"] #ear-right{animation:flap .6s ease-in-out 4 reverse}
[data-nose="찡긋거림"] #nose{animation:wiggle .7s ease-in-out 2}[data-nose="벌렁거림"] #nose{animation:puff .6s ease-in-out 3}
[data-mouth="오(O) 모양"] #mouth>:not(#o-mouth){display:none}[data-mouth="오(O) 모양"] #o-mouth{display:block}
[data-mouth="작은 미소"] #mouth{transform:scale(.85,.55)}[data-mouth="시무룩"] #mouth{transform:translateY(9px) scale(.55,-.42)}[data-mouth="삐죽임"] #mouth{transform:scale(.65,.9)}
[data-mouth="우물거림"] #mouth,.speaking #mouth{animation:talk .32s ease-in-out infinite alternate}
#robot[data-emotion="감동"] #head{animation:tender 5s ease-in-out infinite}
#robot.sleeping .eye{transform:scaleY(.1)}#robot.sleeping #head{animation:none;transform:rotate(6deg) translateY(5px)}
#robot.sleeping .cog{animation-play-state:paused}
@keyframes sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg) translateY(-3px)}}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.006)}}
@keyframes antenna{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes look{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
@keyframes brows{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes flap{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(14deg)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}33%{transform:rotate(-10deg)}66%{transform:rotate(10deg)}}
@keyframes puff{50%{transform:scale(1.12)}}@keyframes talk{from{transform:scaleY(.6)}to{transform:scaleY(1.12)}}
@keyframes tender{0%,100%{transform:rotate(4deg)}50%{transform:rotate(6deg) translateY(-3px)}}
@keyframes bars{50%{transform:scaleY(2.4)}}
#robot.alive #head{animation:none;transform:translateY(var(--head-y,0px)) rotate(var(--head-angle,0deg));transition:none}
#robot.alive .eyeball{translate:var(--gaze-x,0px) var(--gaze-y,0px)}
#robot.alive.speaking #mouth{animation:none;transform:scaleY(var(--jaw,1));transition:none}
/* A sad line keeps the turned-down mouth while it is read aloud. */
#robot.alive.speaking[data-mouth="시무룩"] #mouth{transform:translateY(9px) scale(.55,calc(var(--jaw,1)*-.42))}
#robot.alive[data-connection="listening"] #ear-left{transform:rotate(calc(10deg + var(--attention,0)*9deg))}
#robot.alive[data-connection="listening"] #ear-right{transform:rotate(calc(-10deg - var(--attention,0)*9deg))}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#cam {
  display:block;
  width:100%;
  max-height:36dvh;
  object-fit:contain;
  border-radius:16px;
  background:#201d23;
}

[hidden]{display:none!important}
#preparation{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(88vw,360px);padding:12px 16px;border-radius:18px;background:#f9f5ecf5;box-shadow:0 4px 24px #38565014;color:#52665a;text-align:center;font:13px/1.5 system-ui,sans-serif;pointer-events:none}
#preparation p{margin:3px 0}
#preparation-title{font-weight:650;font-size:15px}
#preparation-meter{display:block;width:100%;height:7px;margin:9px 0;accent-color:#649e9c;border:0;border-radius:5px;overflow:hidden}
#preparation-meter::-webkit-progress-bar{background:#e1e5da;border-radius:5px}
#preparation-meter::-webkit-progress-value{background:#649e9c;border-radius:5px}
#preparation-detail{font-variant-numeric:tabular-nums}
#preparation-steps{font-size:11px;color:#667c6b}
@media(orientation:landscape) and (max-height:600px){#preparation{left:auto;right:12px;transform:none;width:min(34vw,300px);font-size:11px}#preparation-title{font-size:13px}}
#robot:focus-visible{outline:2px dashed #a47436;outline-offset:-8px;border-radius:28px}
#status{position:fixed;z-index:3;top:max(10px,calc(env(safe-area-inset-top) + 6px));left:50%;transform:translateX(-50%);width:max-content;max-width:min(calc(100vw - 32px),560px);margin:0;padding:6px 14px;border-radius:999px;background:rgb(255 251 242 / .78);box-shadow:0 2px 12px rgb(52 70 60 / .08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;font:13px/1.45 system-ui,sans-serif;color:#5d5140;pointer-events:none;text-wrap:balance}
#status[data-kind="error"]{background:#fff7e9f2;padding:10px 16px;border-radius:16px;font-size:15px;color:#693b30;box-shadow:0 4px 18px rgb(105 59 48 / .14)}
/* Subtitles: what Momo is saying right now, with the voiced words darkened. */
#caption{position:fixed;z-index:2;left:50%;bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));transform:translateX(-50%);width:min(calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)),760px);margin:0;padding:.5em 1.05em .58em;border-radius:22px;
  background:var(--caption-paper);box-shadow:0 10px 30px rgb(46 64 54 / .14),inset 0 1px 0 rgb(255 255 255 / .85);color:var(--caption-ink);
  font-family:var(--story-font);font-size:clamp(19px,1.35vw + 13px,32px);line-height:1.5;letter-spacing:.005em;text-align:center;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;
  pointer-events:none;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.8,.2,1),background-color .8s ease,color .8s ease}
#caption[data-kind="momo"]::before{content:"";position:absolute;top:-8px;left:50%;width:18px;height:18px;margin-left:-9px;background:inherit;border-radius:4px 0 0 0;transform:rotate(45deg);clip-path:polygon(0 0,100% 0,0 100%)}
#caption .w{color:color-mix(in srgb,currentColor 62%,transparent);transition:color .18s ease}
#caption .w.said{color:currentColor}
#caption[data-kind="book"]{--caption-paper:rgb(255 250 238 / .96);color:var(--book-ink);font-size:clamp(21px,1.55vw + 14px,36px);padding-left:1.45em;
  background-image:linear-gradient(90deg,var(--ribbon) 0 6px,transparent 6px);background-color:var(--caption-paper);box-shadow:0 10px 30px rgb(64 48 30 / .15),inset 0 1px 0 rgb(255 255 255 / .9)}
#caption.thinking{width:auto;min-width:88px;padding:.62em 1.1em;font-size:20px;line-height:1}
#caption.thinking::after{content:"";display:block;width:52px;height:12px;margin:auto;background:radial-gradient(circle closest-side,#6f8c80 94%,#0000) 0 50%/12px 12px no-repeat,radial-gradient(circle closest-side,#6f8c80 94%,#0000) 20px 50%/12px 12px no-repeat,radial-gradient(circle closest-side,#6f8c80 94%,#0000) 40px 50%/12px 12px no-repeat;animation:thinking-dots 1.3s ease-in-out infinite}
@keyframes thinking-dots{0%,100%{opacity:.35;transform:translateY(1px)}50%{opacity:1;transform:translateY(-2px)}}
#caption.resting{opacity:.72}
#caption.gone{opacity:0;transform:translate(-50%,10px)}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
#camera-frame{position:fixed;left:50%;z-index:2;bottom:calc(max(14px,calc(env(safe-area-inset-bottom) + 8px)) + var(--band));transform:translateX(-50%);width:min(82vw,430px);margin:0;padding:6px;background:#fff8e9;border:2px solid #e6bd77;border-radius:20px;box-shadow:0 12px 48px #33271a40}
#camera-frame figcaption{text-align:center;font:14px/1.5 system-ui,sans-serif;color:#5a3f2a;padding:5px}
@media(orientation:landscape) and (max-height:600px){body[data-state] #room{--band:clamp(76px,23dvh,124px)}#status{font-size:12px;top:6px}#caption{font-size:clamp(16px,3.4dvh + 5px,24px);width:min(calc(100vw - 28px),640px)}#caption[data-kind="book"]{font-size:clamp(17px,3.8dvh + 5px,26px)}#camera-frame{left:auto;right:18px;transform:none;width:30vw;bottom:50%;translate:0 50%}#cam{max-height:65dvh}}
@media(prefers-reduced-motion:reduce){body{transition:none}body::before{opacity:.12}}

/* ?debug=1 로 열었을 때만 보이는 선생님용 기록 */
#debug {
  position: fixed;
  left: 12px;
  bottom: 12px;
  width: min(460px, calc(100vw - 24px));
  max-height: 40vh;
  overflow: auto;
  font: 13px/1.45 system-ui, sans-serif;
  color: #2b2233;
  background: rgba(255, 255, 255, .82);
  border-radius: 10px;
  padding: 8px 10px;
  -webkit-user-select: text;
  user-select: text;
  touch-action: auto;
}
#debug .row { margin: 2px 0; white-space: pre-wrap; word-break: break-word; }
#debug .heard { color: #6b6375; }
#debug .user { color: #1c5fb8; }
#debug .bot { color: #8a2a50; }
#debug .sys { color: #3c7a3c; }
#debug input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid #c8bfd0;
  border-radius: 6px;
}