:root{--ink:#17243d;--muted:#667085;--cream:#fff9ef;--paper:#fff;--navy:#16345d;--coral:#e85d4a;--yellow:#e9ad24;--teal:#208b8b;--lav:#7367a8;--line:#e8e2d7;--shadow:0 18px 55px rgba(27,42,67,.11);font-family:Inter,"Pretendard","Noto Sans KR",system-ui,sans-serif;color:var(--ink);background:var(--cream)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 6% 12%,rgba(233,173,36,.12),transparent 27rem),radial-gradient(circle at 94% 78%,rgba(32,139,139,.11),transparent 28rem),var(--cream)}button,select,input,textarea{font:inherit}button{cursor:pointer}.topbar{height:78px;padding:0 clamp(22px,5vw,76px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(23,36,61,.09);background:rgba(255,249,239,.88);backdrop-filter:blur(14px);position:sticky;top:0;z-index:30}.brand{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none}.brand-mark{width:40px;height:40px;border-radius:14px;background:var(--navy);color:white;display:grid;place-items:center;font:800 22px Georgia,serif;transform:rotate(-4deg)}.brand b,.brand small{display:block}.brand small{color:var(--muted);font-size:11px;letter-spacing:.07em;margin-top:2px}.progress-shell{display:flex;gap:12px;align-items:center;font-size:12px;font-weight:800;color:var(--muted)}.progress-track{width:min(20vw,190px);height:7px;border-radius:99px;background:#e7dfd0;overflow:hidden}.progress-track i{display:block;width:25%;height:100%;background:linear-gradient(90deg,var(--coral),var(--yellow));border-radius:inherit;transition:.35s}main{max-width:1260px;margin:0 auto;padding:clamp(28px,4vw,62px) clamp(20px,4vw,52px) 80px}.screen{display:none;animation:rise .4s ease}.screen.active{display:block}@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.hero{min-height:calc(100vh - 210px);display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(34px,6vw,90px);align-items:center}.eyebrow{font-size:12px;letter-spacing:.16em;color:var(--coral);font-weight:900;margin:0 0 16px}.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(48px,6.6vw,92px);line-height:.92;margin:0 0 28px;letter-spacing:-.045em}.hero h1 em{font-style:italic;color:var(--coral);font-weight:500}.lede{font-size:clamp(16px,1.6vw,19px);line-height:1.78;color:#4b5567;max-width:590px}.meta-row{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0 32px}.meta-row span{padding:8px 12px;border:1px solid #e1d7c7;border-radius:999px;font-size:12px;font-weight:800;background:rgba(255,255,255,.62)}.primary,.soft,.ghost,.icon-btn{border:0;border-radius:14px;font-weight:850}.primary{background:var(--navy);color:white;padding:15px 21px;box-shadow:0 9px 0 #0b2447;transition:.16s}.primary:hover{transform:translateY(-2px);box-shadow:0 11px 0 #0b2447}.primary:active{transform:translateY(5px);box-shadow:0 4px 0 #0b2447}.primary span{margin-left:14px}.hero-art{margin:0;background:#eadfce;border-radius:36px 36px 16px 36px;padding:12px;box-shadow:var(--shadow);transform:rotate(1deg);position:relative}.hero-art img{width:100%;display:block;border-radius:27px 27px 10px 27px;aspect-ratio:1.45;object-fit:cover}.hero-art figcaption{position:absolute;left:-22px;bottom:28px;background:white;padding:13px 17px;border-radius:16px;box-shadow:var(--shadow);transform:rotate(-2deg)}.hero-art figcaption b,.hero-art figcaption span{display:block}.hero-art figcaption span{font-size:12px;color:var(--muted);margin-top:3px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}.section-head h2{font:700 clamp(30px,4vw,48px)/1.08 Georgia,"Noto Serif KR",serif;margin:0}.tts-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.tts-controls label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.tts-controls input{accent-color:var(--coral);width:115px}.soft,.ghost,.icon-btn{padding:11px 14px;background:white;color:var(--navy);border:1px solid #ddd4c6}.soft:hover,.ghost:hover,.icon-btn:hover{border-color:var(--navy)}.hidden{display:none!important}.legend{display:flex;gap:18px;flex-wrap:wrap;background:rgba(255,255,255,.64);border:1px solid var(--line);padding:12px 16px;border-radius:15px;margin-bottom:25px;color:var(--muted);font-size:12px;font-weight:750}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.dot.structure{background:var(--navy)}.dot.action{background:var(--coral)}.dot.signal{background:var(--yellow)}.dot.tone{background:var(--lav)}.dialogue,.build-dialogue{display:grid;gap:13px}.scene-label{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:900;margin:22px 0 2px;display:flex;align-items:center;gap:10px}.scene-label:after{content:"";height:1px;background:var(--line);flex:1}.line{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:14px 16px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:18px;transition:.18s}.line:hover{transform:translateX(3px);border-color:#d5c8b8}.avatar{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;font-size:22px;background:#f7dcc8}.line.brother .avatar{background:#dce8ee}.line-copy small{display:block;font-size:10px;color:var(--muted);font-weight:850;letter-spacing:.08em;margin-bottom:5px}.line-copy p{font-size:clamp(16px,1.7vw,20px);line-height:1.55;margin:0}.line-number{font-size:11px;color:#98a0ad;font-weight:900}.focus{padding:1px 3px;border-radius:5px;font-weight:800}.focus.structure{color:var(--navy);border-bottom:3px solid var(--navy)}.focus.action{color:#bd4d46;background:#fff0ed}.focus.signal{color:#ad7a00;background:#fff4c9}.focus.tone{color:var(--lav);font-style:italic;background:#f1effb}.listen-line{width:39px;height:39px;border-radius:13px;border:1px solid var(--line);background:var(--cream);color:var(--navy);font-weight:900}.line.speaking{outline:3px solid rgba(232,93,74,.28);background:#fff7f3}.bottom-action{display:flex;justify-content:flex-end;margin-top:32px}.bottom-action.split{justify-content:space-between}.score-pill{border:1px solid var(--line);background:white;padding:12px 17px;border-radius:999px;color:var(--muted);font-size:13px}.score-pill b{font-size:20px;color:var(--coral)}.instruction{color:var(--muted);line-height:1.7}.bank-wrap{position:sticky;top:89px;z-index:20;background:rgba(255,249,239,.94);backdrop-filter:blur(12px);padding:12px 0}.phrase-bank{display:flex;gap:8px;flex-wrap:wrap;padding:14px;border:1px solid var(--line);border-radius:18px;background:white;box-shadow:0 9px 24px rgba(23,36,61,.07)}.phrase-chip{border:1px solid #d9d0c2;background:#fffaf2;padding:8px 11px;border-radius:11px;font-weight:800;color:var(--navy)}.phrase-chip.selected{background:var(--navy);border-color:var(--navy);color:white;transform:translateY(-2px)}.phrase-chip.used{opacity:.35;text-decoration:line-through}.build-dialogue{margin-top:18px}.build-line{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px dashed #ded5c8;background:rgba(255,255,255,.55)}.build-line .who{width:74px;color:var(--muted);font-size:11px;font-weight:900}.build-line p{margin:0;line-height:1.7}.blank{min-width:92px;min-height:34px;border:2px dashed #baa992;background:white;color:var(--navy);border-radius:10px;padding:5px 10px;font-weight:850;vertical-align:middle}.blank.filled{border-style:solid;border-color:var(--navy)}.blank.correct{border-color:#198754;background:#ecfbf3;color:#12643f}.blank.wrong{border-color:var(--coral);background:#fff0ed;color:#a2362d}.feedback{min-height:24px;margin:20px 0 0;padding:0 4px;font-weight:800}.feedback.good{color:#147044}.feedback.bad{color:#b03d34}.record-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.script-card,.recorder-card{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.script-card{padding:22px}.script-toolbar{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}.script-toolbar label{font-size:12px;font-weight:900;color:var(--muted)}.script-toolbar select{flex:1;border:1px solid #ddd4c6;border-radius:10px;padding:9px;background:white}.record-script{line-height:1.9;font-size:17px;max-height:370px;overflow:auto;padding:15px 4px}.record-script p{margin:4px 0}.record-script b{color:var(--coral)}.recorder-card{padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.timer{font:700 50px/1 Georgia,serif;font-variant-numeric:tabular-nums;margin:6px 0 20px}.record-button{width:138px;height:138px;border-radius:50%;border:10px solid #fff;box-shadow:0 0 0 2px #e5dcd0,0 18px 34px rgba(232,93,74,.2);background:var(--coral);color:white;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.record-button i{width:30px;height:30px;background:white;border-radius:50%}.record-button.recording{animation:pulse 1.4s infinite}.record-button.recording i{border-radius:5px;width:25px;height:25px}@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(232,93,74,.12),0 18px 34px rgba(232,93,74,.22)}}.recorder-card>p{color:var(--muted);font-size:13px;line-height:1.6}.recorder-card audio{width:100%;margin:14px 0}.transcript-box{width:100%;text-align:left;margin-top:16px}.transcript-box label{display:block;font-size:12px;font-weight:900;margin-bottom:7px}.transcript-box small{display:block;color:var(--muted);font-weight:500;margin-top:3px}.transcript-box textarea{width:100%;border:1px solid #ddd4c6;border-radius:12px;padding:10px;resize:vertical;margin-bottom:8px}.live-status{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:white;padding:9px 13px;border-radius:999px;font-size:12px;font-weight:850}.live-status i{width:8px;height:8px;border-radius:50%;background:#aab1ba}.live-status.recording i{background:var(--coral);box-shadow:0 0 0 5px rgba(232,93,74,.15)}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.results article{background:var(--navy);color:white;padding:20px;border-radius:20px}.results span,.results small{display:block;color:#c7d5e8}.results b{display:block;font:700 36px Georgia,serif;margin:8px 0}.privacy-note{text-align:center;color:var(--muted);font-size:11px;margin:18px}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#17243d;color:white;padding:12px 18px;border-radius:12px;z-index:99;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:820px){.topbar{height:68px}.hero,.record-layout{grid-template-columns:1fr}.hero{min-height:auto}.hero-copy{order:2}.hero-art{order:1}.section-head{align-items:flex-start;flex-direction:column}.tts-controls{justify-content:flex-start}.line{grid-template-columns:46px 1fr}.listen-line{grid-column:2}.bank-wrap{top:69px}.results{grid-template-columns:1fr}.build-line .who{width:48px}.progress-track{width:90px}}@media(max-width:520px){main{padding-inline:14px}.hero h1{font-size:45px}.hero-art figcaption{left:8px;bottom:8px}.brand small{display:none}.legend{gap:9px}.line{padding:12px}.avatar{width:40px;height:40px}.bottom-action.split{gap:10px}.bottom-action.split>*{flex:1}.script-toolbar{flex-wrap:wrap}.record-button{width:118px;height:118px}}