:root{--ink:#172234;--muted:#617084;--blue:#275be8;--pale:#ecf1ff;--surface:#fff;--bg:#f7f8fb;--line:#e9edf3;--green:#18745a;--green-bg:#e8f5ef;--radius:24px;--gutter:24px;font-family:'IBM Plex Sans KR',sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#eef1f6;min-height:100dvh;display:flex;justify-content:center;align-items:center;gap:clamp(36px,7vw,120px);padding:36px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible{outline:3px solid #e47b37;outline-offset:4px}button:not(:disabled):active{transform:scale(.985)}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.symbols{position:absolute;width:0;height:0;overflow:hidden}h1,h2,h3,p{margin:0}h2{font-size:28px;line-height:1.35;font-weight:600;letter-spacing:-1px}p{line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}small{font-size:12px;line-height:1.65}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.studio{max-width:420px;align-self:center}.studio-kicker{font-size:11px;font-weight:600;letter-spacing:2px;color:var(--muted)}.studio h1{font-size:clamp(32px,3.2vw,46px);letter-spacing:-2px;line-height:1.35;margin:24px 0}.studio>p{color:var(--muted);font-size:17px}.journey{display:flex;align-items:center;gap:8px;font-size:12px;margin:36px 0}.journey-dot{width:7px;height:7px;border-radius:50%;background:#bdc7d6}.journey-dot.active{background:var(--blue)}.journey i{width:24px;height:1px;background:#cbd3df;margin:0 4px}.studio-note{padding:24px 0;border-top:1px solid #d6dee9}.studio-note strong{font-size:14px;font-weight:500}.studio-note p{margin:10px 0 18px;color:var(--muted);font-size:14px}.studio-note small{color:var(--muted)}.studio-reset{display:flex;align-items:center;gap:20px;padding:12px 0;color:var(--blue);font-size:13px;min-height:44px}
.app{width:420px;height:min(880px,calc(100dvh - 72px));min-height:620px;position:relative;overflow:hidden;background:var(--surface);border-radius:36px;box-shadow:0 24px 80px #25385818,0 0 0 1px #fff;display:flex;flex-direction:column}.prototype-label{height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.2px;color:#66738a;background:#f0f3f8;gap:5px;border-bottom:1px solid var(--line)}.screen{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;background:var(--surface);animation:enter .18s ease-out}.scroll-body{flex:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:#d8deea transparent}.home-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);flex-shrink:0}.brand{display:flex;align-items:center;font-size:18px;font-weight:600;letter-spacing:-.6px;gap:8px}.brand-mark{width:28px;height:32px;border-radius:10px;background:var(--blue);color:white;display:grid;place-items:center}.brand-mark svg{width:17px;height:20px}.avatar{height:44px;width:44px;background:var(--bg);border-radius:50%;display:grid;place-items:center;color:#47566d}.avatar svg{width:18px;height:18px}.home-body{padding:0 var(--gutter) 24px}.eyebrow{display:block;font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.2px}.greeting{padding:4px 0 24px}.greeting h2{margin-top:9px;font-size:29px;letter-spacing:-1.2px}
.lesson-hero{display:block;position:relative;width:100%;height:280px;border-radius:var(--radius);overflow:hidden;color:white;text-align:left;padding:0;background:#293d50}.lesson-hero>img{height:100%;width:100%;object-fit:cover;object-position:center 27%;display:block}.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#07132328 0%,transparent 30%,#08172b38 48%,#08172bd9 100%)}.hero-top{position:absolute;left:16px;right:16px;top:16px;display:flex;justify-content:space-between}.glass-pill{font-size:11px;line-height:1;padding:8px 10px;background:#10223965;backdrop-filter:blur(8px);border-radius:20px;display:flex;gap:5px;align-items:center}.glass-pill svg{width:12px;height:12px}.hero-caption{position:absolute;bottom:18px;left:20px;right:18px;display:flex;flex-direction:column;gap:8px}.hero-caption>span:first-child{font-size:11px;color:#e0e8f4}.hero-caption strong{font-size:23px;line-height:1.4;letter-spacing:-.6px;font-weight:500}.hero-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#c7d2e1}.play-bubble{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffffff30;backdrop-filter:blur(8px);color:white}.play-bubble svg{width:18px;height:18px}.home-start{margin-top:16px}.primary{width:100%;min-height:56px;border-radius:18px;background:var(--blue);color:white;display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:500;padding:14px 18px;line-height:1.4}.primary svg{width:19px;height:19px}.home-start>p{text-align:center;margin-top:10px;font-size:11px;color:var(--muted)}.home-start>p span{padding:0 7px;color:#b3bfce}.more-row{margin-top:28px;margin-bottom:10px}.more-row .eyebrow{font-size:10px}.more-row h3{font-size:16px;font-weight:500;letter-spacing:-.4px;margin-top:5px}.plain-row{width:100%;display:flex;align-items:center;text-align:left;gap:12px;min-height:70px;padding:8px 0}.small-icon{width:42px;height:46px;border-radius:13px;background:var(--pale);display:grid;place-items:center;color:var(--blue)}.plain-row strong{font-size:14px;display:block;font-weight:500}.plain-row small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.end-arrow{margin-left:auto;color:var(--muted);width:17px}.bottom-nav{height:70px;flex-shrink:0;display:flex;align-items:center;border-top:1px solid var(--line);background:white;padding:5px 12px max(5px,env(safe-area-inset-bottom))}.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:#748199;min-height:48px;justify-content:center}.bottom-nav button[aria-current]{color:var(--blue);font-weight:600}.bottom-nav svg{width:21px;height:21px}
.video-screen{background:#111b28;isolation:isolate}.video-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.video-top-shade{position:absolute;inset:0 0 auto;height:150px;background:linear-gradient(#081320a8,transparent);pointer-events:none}.video-header{position:absolute;top:0;left:0;right:0;padding:16px;display:flex;align-items:center;gap:12px;color:#fff;z-index:2}.round{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;flex-shrink:0}.video-header>span{flex:1;font-size:14px;font-weight:500;text-shadow:0 1px 5px #0008}.video-header small{display:block;font-size:10px;color:#dae0e9;margin-top:3px}.glass{background:#10203699;backdrop-filter:blur(10px);color:#fff}.caption-toggle{min-height:44px;padding:0 12px;border-radius:22px;font-size:11px}.video-bottom{position:absolute;inset:auto 0 0;padding:48px 20px max(20px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#081320de);color:white}.video-caption{text-align:center;font-size:18px;font-weight:500;line-height:1.65;text-shadow:0 1px 8px #000;margin:0 0 22px;white-space:pre-line}.video-progress{height:3px;border-radius:3px;background:#ffffff4d;overflow:hidden}.video-progress>span{display:block;height:100%;width:0;background:white}.video-controls{display:flex;align-items:center;gap:12px;margin-top:12px}.video-controls>button:first-child{min-height:44px;border-radius:22px;padding:0 13px;display:flex;align-items:center;gap:6px;font-size:12px}.video-controls svg{width:18px;height:18px}.video-controls>span{font-size:11px;color:#dae0e9;margin-left:auto;font-variant-numeric:tabular-nums}.video-controls .round{width:48px;height:48px}.big-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:#11233baa;backdrop-filter:blur(8px);color:white;display:grid;place-items:center}.big-play svg{width:32px;height:32px}.big-play:active{transform:translate(-50%,-50%) scale(.98)!important}#video-error{margin-top:10px;font-size:12px;text-align:center}
.lesson-header{height:70px;display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0}.lesson-header>span:first-of-type{font-size:14px;font-weight:500}.step-count{margin-left:auto;margin-right:8px;font-size:14px;color:var(--blue);font-weight:600}.step-count i{font-style:normal;font-weight:400;color:#8793a4;font-size:12px}.step-track{display:flex;gap:5px;margin:0 24px 10px;height:3px;flex-shrink:0}.step-track span{height:3px;flex:1;border-radius:2px;background:#edf0f5}.step-track .passed{background:#afc3ff}.step-track .active{background:var(--blue)}.speak-body{padding:24px 24px 12px}.question-reminder{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.question-reminder img{width:36px;height:40px;border-radius:12px;object-fit:cover;object-position:50% 20%}.question-reminder small{display:block;font-size:10px;color:#8491a5}.question-reminder .round{margin-left:auto;background:var(--bg);width:38px;height:44px}.question-reminder svg{width:17px}.spoken-question{margin-top:20px;font-size:23px;line-height:1.55;letter-spacing:-.7px}.question-note{font-size:11px;color:#8491a5;margin-top:9px}.speaking-center{display:flex;align-items:center;flex-direction:column;text-align:center;padding:36px 0 24px;gap:12px}.ready-caption{font-size:13px;color:var(--muted);margin-bottom:12px}.mic-button{width:100px;height:100px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 12px #f0f4ff;color:white;display:grid;place-items:center;margin:0 0 12px}.mic-button svg{width:35px;height:35px;stroke-width:1.5}.mic-button.recording{background:#ca4b45;box-shadow:0 0 0 12px #fbefef}.mic-button.recording svg{width:24px;height:24px}.speaking-center strong{font-size:16px;font-weight:500}.speaking-center #record-timer{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.speaking-center p{font-size:11px;color:#8491a5;margin-top:6px}.action-footer{flex-shrink:0;background:white;border-top:1px solid var(--line);padding:16px 24px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}.demo-note{font-size:10px;text-align:center;color:var(--muted);padding-bottom:6px}.text-button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:13px}.text-button svg{height:15px;width:15px}
.feedback-body{padding:24px}.feedback-heading .eyebrow{color:var(--green);margin-top:14px}.success-mark{width:42px;height:42px;background:var(--green-bg);color:var(--green);display:grid;place-items:center;border-radius:50%}.feedback-heading h2{margin-top:10px;font-size:26px}.feedback-heading p{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.85}.answer-block{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}.answer-block .eyebrow{font-size:11px}.answer-block blockquote{margin:10px 0 0;padding:0;font-size:17px;line-height:1.7;font-weight:500;letter-spacing:-.4px}.one-thing{margin-top:24px;padding:20px;background:var(--pale);border-radius:18px}.one-label{font-size:10px;color:var(--blue);font-weight:500}.one-thing h3{font-size:17px;font-weight:600;letter-spacing:-.5px;margin-top:8px}.one-thing p{font-size:13px;margin-top:8px;color:#4c6089}.evaluation-note{font-size:10px;color:#7a8799;line-height:1.7;margin-top:16px}.done-body{padding:44px 24px 24px;text-align:center}.done-art{display:grid;place-items:center;width:90px;height:90px;border-radius:28px;background:var(--green-bg);color:var(--green);margin:0 auto 28px;transform:rotate(-8deg)}.done-art svg{width:42px;height:42px;transform:rotate(8deg)}.done-body h2{margin:12px 0 18px}.done-body>p{font-size:14px;color:var(--muted)}.takeaway{margin:30px 0 22px;padding:24px;background:var(--bg);border-radius:20px}.takeaway span{font-size:11px;color:var(--muted)}.takeaway strong{display:block;font-size:24px;color:var(--blue);margin:12px 0}.takeaway p{font-size:15px}.done-body>small{color:var(--muted);font-size:10px}
dialog{border:0;border-radius:26px;padding:14px 24px 20px;width:min(380px,calc(100% - 32px));color:var(--ink);box-shadow:0 20px 80px #10203b33}dialog::backdrop{background:#101c3459;backdrop-filter:blur(3px)}.sheet-handle{width:36px;height:4px;border-radius:2px;background:#dce2ec;margin:0 auto 24px}dialog h2{font-size:23px}dialog p{font-size:14px;color:var(--muted);margin:14px 0 24px}#sheet-actions{display:grid;gap:10px}#sheet-actions button{width:100%;text-align:left;padding:16px;border-radius:14px;background:var(--bg);font-size:14px;min-height:52px}#sheet-actions .primary{text-align:center;background:var(--blue);color:white}
@keyframes enter{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:800px){body{padding:0;display:block}.studio{display:none}.app{width:100%;max-width:480px;height:100dvh;min-height:0;margin:auto;border-radius:0;box-shadow:none}.prototype-label{height:24px}.lesson-hero{height:270px}.home-header{height:68px}.greeting{padding-bottom:20px}.greeting h2{font-size:28px}}@media(max-height:740px){.lesson-hero{height:240px}.greeting h2{font-size:25px}.greeting{padding-bottom:16px}.speaking-center{padding-top:26px}.mic-button{width:82px;height:82px}.spoken-question{font-size:21px}.action-footer{padding-top:12px}}