:root{--ink:#263a33;--muted:#697c74;--cream:#fff8e7;--paper:#fffdf8;--mint:#dff4e7;--green:#237b5b;--sun:#ffd75e;--coral:#ffad98;--blue:#cfe8ff;--line:#e5e4d9;--shadow:0 18px 45px rgba(43,73,62,.12)}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,#fffaf0,#eef9f3);color:var(--ink);font-family:"Pretendard","Noto Sans KR",system-ui,sans-serif}.student-app{min-height:100vh;max-width:1000px;margin:auto;padding:20px clamp(16px,4vw,38px) 45px}.student-header{height:62px;display:flex;align-items:center;justify-content:space-between}.student-brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:950;text-decoration:none;font-size:18px}.brand-dot{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:var(--green);color:#fff}.round-button{width:48px;height:48px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:23px;box-shadow:0 6px 16px rgba(43,73,62,.08)}button{font:inherit;color:inherit;cursor:pointer}.center-screen{min-height:calc(100vh - 120px);display:grid;place-content:center;text-align:center;justify-items:center;padding:30px}.center-screen h1{font-size:clamp(28px,5vw,46px);line-height:1.25;margin:12px 0}.center-screen>p{color:var(--muted);font-size:17px}.bunny-card{width:130px;height:130px;border-radius:44px;background:var(--blue);display:grid;place-content:center;box-shadow:var(--shadow);font-weight:900}.bunny-ears{font-size:38px;line-height:1}.bunny-face{font-size:24px}.eyebrow{margin:0;color:var(--green);font-size:13px;font-weight:950;letter-spacing:.04em}.pair-form{width:min(420px,100%);display:grid;gap:13px;margin-top:25px}.pair-form label{font-weight:850}.pair-form input{width:100%;border:3px solid var(--line);border-radius:22px;background:#fff;text-align:center;font-size:38px;font-weight:950;letter-spacing:.25em;padding:16px 10px}.pair-form input:focus{outline:0;border-color:var(--green)}.big-button{border:0;border-radius:20px;padding:18px 24px;font-size:18px;font-weight:950;box-shadow:0 9px 20px rgba(43,73,62,.12)}.sunny{background:var(--sun)}.mint{background:var(--green);color:#fff}.error-message{color:#a14537!important;min-height:22px;margin:0!important;font-size:14px!important}.home-screen{padding-top:35px}.hello-card{display:grid;grid-template-columns:100px 1fr;gap:24px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:32px;padding:28px;box-shadow:var(--shadow)}.hello-card h1{margin:5px 0 8px;font-size:clamp(25px,4vw,40px);line-height:1.25}.hello-card p:last-child{margin:0;color:var(--muted);font-size:16px}.mini-bunny{display:grid;place-items:center;width:92px;height:92px;border-radius:32px;background:var(--blue);font-size:50px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}.mode-card{min-height:330px;border:0;border-radius:32px;text-align:left;padding:29px;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:.2s}.mode-card:hover{transform:translateY(-4px)}.story-mode{background:linear-gradient(145deg,#fff3c4,#ffe38b)}.talk-mode{background:linear-gradient(145deg,#dff4e7,#bfe7cf)}.mode-picture{font-size:55px;letter-spacing:.12em}.mode-card strong{margin-top:32px;font-size:26px}.mode-card small{margin-top:9px;font-size:15px;line-height:1.6;color:#4d625a}.mode-action{margin-top:auto;font-weight:950}.ai-note{text-align:center;color:var(--muted);font-size:13px;line-height:1.6;margin:24px}.topic-screen{padding-top:30px}.screen-title{text-align:center;margin-bottom:25px}.screen-title h1{font-size:clamp(28px,5vw,43px);margin:6px}.student-topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.student-topic{min-height:190px;border:0;border-radius:27px;background:#fff;padding:22px;text-align:left;box-shadow:var(--shadow)}.student-topic:nth-child(3n+1){background:#fff0d5}.student-topic:nth-child(3n+2){background:#e2f5e9}.student-topic:nth-child(3n){background:#e7efff}.student-topic .icon{display:block;font-size:38px}.student-topic strong{display:block;font-size:19px;margin:17px 0 7px}.student-topic small{display:block;color:var(--muted);font-size:13px;line-height:1.5}.text-button{display:block;margin:28px auto;border:0;background:transparent;color:var(--green);font-weight:900;padding:12px}.play-screen{padding-top:18px}.play-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.play-topline h1{font-size:clamp(25px,4vw,36px);margin:3px 0}.speaker-button{background:var(--sun);border:0}.story-stage{position:relative;aspect-ratio:16/10;border-radius:32px;overflow:hidden;background:linear-gradient(#cfeaff 0 55%,#bfe4b8 55%);box-shadow:var(--shadow)}.story-stage img{width:100%;height:100%;object-fit:cover}.fallback-picture{position:absolute;inset:0;display:grid;place-content:center;text-align:center}.fallback-bunny{font-size:clamp(80px,15vw,150px);filter:drop-shadow(0 14px 12px rgba(42,75,64,.18))}.fallback-sparkles{font-size:35px;color:#fff}.cloud{position:absolute;font-size:55px;color:#fff;opacity:.88}.cloud-a{left:10%;top:9%}.cloud-b{right:12%;top:18%;font-size:38px}.image-loading{position:absolute;inset:0;z-index:3;background:rgba(255,253,248,.92);display:grid;place-content:center;justify-items:center}.image-loading span{width:55px;height:55px;border:7px solid var(--mint);border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite}.image-loading p{font-weight:900}.ai-bubble{position:relative;margin:-18px 28px 0;background:#fff;border:1px solid var(--line);border-radius:23px;padding:20px 24px;box-shadow:var(--shadow);font-size:clamp(17px,2.5vw,23px);line-height:1.65;font-weight:750}.choice-buttons{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:18px 28px}.choice-buttons button{border:0;border-radius:19px;background:var(--sun);padding:17px;font-size:17px;font-weight:950}.choice-buttons button:nth-child(2){background:var(--mint)}.student-message-form{display:grid;grid-template-columns:240px 1fr;gap:14px;margin:20px 28px}.speech-big{border:0;border-radius:23px;background:var(--coral);padding:16px;display:grid;grid-template-columns:45px 1fr;grid-template-rows:auto auto;text-align:left}.speech-big span{grid-row:1/3;font-size:30px}.speech-big strong{font-size:16px}.speech-big small{font-size:11px}.speech-big.listening{animation:pulse 1s infinite;background:#ff8f76}.typing-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px 13px}.typing-box label{font-size:11px;font-weight:800;color:var(--muted)}.typing-box div{display:flex;gap:8px;margin-top:5px}.typing-box input{width:100%;min-width:0;border:0;font-size:16px;outline:0}.typing-box button{border:0;border-radius:12px;background:var(--green);color:#fff;font-weight:900;padding:10px 15px}.play-footer{display:flex;justify-content:space-between;align-items:center;margin:20px 28px}.play-footer span{color:var(--muted);font-weight:850}.finish-button{border:1px solid var(--line);border-radius:16px;background:#fff;padding:12px 16px;font-weight:900}.conversation-log{max-height:190px;overflow:auto;margin:15px 28px;padding:14px;border-radius:18px;background:#fff}.log-line{padding:7px 0;border-bottom:1px solid #eee;font-size:14px}.log-line strong{color:var(--green);margin-right:8px}.done-star{display:grid;place-items:center;width:105px;height:105px;border-radius:38px;background:var(--sun);font-size:55px;box-shadow:var(--shadow)}.student-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#263a33;color:#fff;border-radius:16px;padding:13px 18px;opacity:0;pointer-events:none;transition:.2s;text-align:center}.student-toast.show{opacity:1;transform:translate(-50%,0)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(.96);box-shadow:0 0 0 9px rgba(255,143,118,.2)}}
[hidden]{display:none!important}
@media(max-width:700px){.student-app{padding:12px 14px 35px}.student-header{height:54px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:240px}.student-topic-grid{grid-template-columns:1fr 1fr}.hello-card{grid-template-columns:70px 1fr;padding:20px}.mini-bunny{width:66px;height:66px;font-size:37px}.story-stage{border-radius:24px;aspect-ratio:1/1}.ai-bubble{margin:-14px 10px 0;padding:17px;font-size:18px}.choice-buttons{margin:14px 10px}.student-message-form{grid-template-columns:1fr;margin:14px 10px}.play-footer{margin:16px 10px}.conversation-log{margin:12px 10px}.mode-picture{font-size:43px}}
@media(max-width:430px){.student-brand{font-size:15px}.brand-dot{width:34px;height:34px}.student-topic-grid{grid-template-columns:1fr}.choice-buttons{grid-template-columns:1fr}.pair-form input{font-size:31px}.hello-card{grid-template-columns:1fr;text-align:center}.mini-bunny{margin:auto}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}