:root,.dark{--background:#f5f7f9;--foreground:#172b36;--card:#fff;--card-foreground:#172b36;--popover:#fff;--popover-foreground:#172b36;--primary:#07786c;--primary-foreground:#fff;--secondary:#e7f3ee;--secondary-foreground:#13483f;--muted:#e9eef1;--muted-foreground:#586873;--accent:#e6f2ed;--accent-foreground:#16483f;--border:#dce4e8;--input:#dce4e8;--ring:#118777;--radius:.8rem;--destructive:#bf3434}
*{box-sizing:border-box}body{margin:0;font-family:Arial,"Malgun Gothic",sans-serif;background:var(--background);color:var(--foreground);font-size:16px}button,a,input{touch-action:manipulation}button{cursor:pointer;font:inherit;min-height:44px}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e7a519;outline-offset:4px}button svg{flex-shrink:0}h1,h2,h3,p{margin:0}a{text-decoration:none;color:inherit}.shell{max-width:1440px;margin:auto;padding:0 64px}header{height:98px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dae2e6}.brand{font-size:28px;font-weight:900;display:flex;align-items:center;gap:12px;letter-spacing:-1px}.brand>svg{background:#087d6e;color:#dcf76e;width:43px;height:43px;padding:9px;border-radius:14px}.brand span{font-size:14px;letter-spacing:0;font-weight:500;color:#65757c;border-left:1px solid #ced8dd;padding-left:17px;margin-left:9px}.tag{font-size:14px;color:#66777e}main{padding:43px 0 50px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:33px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:#448071}h1{font-size:34px;letter-spacing:-1.4px;margin:12px 0}.intro p{color:#637780;font-size:16px}.outline{border:1px solid #d6dfe3;border-radius:12px;background:white;padding:0 17px;display:flex;align-items:center;gap:10px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:28px}.main-tabs{height:52px!important;background:#e8edf0!important;border-radius:13px!important;padding:5px!important;width:100%!important;margin-bottom:20px}.main-tabs button{font-size:15px!important;gap:9px!important;min-height:42px;border-radius:9px!important}.main-tabs button[data-state=active]{background:white!important;color:#087769!important}.speech-card{background:white;border:1px solid #e0e7eb;border-radius:22px;padding:30px 36px;box-shadow:0 6px 25px #213b4504}.card-top{display:flex;align-items:center;justify-content:space-between;color:#798b94;font-size:13px}.badge{background:#e8f4ee;color:#24755e;padding:8px 12px;border-radius:7px;font-size:12px;font-weight:700;letter-spacing:.5px}.sentence-label{margin:30px 0 15px;font-size:14px;color:#6b7c85}.speech-card h2{font-size:clamp(26px,3.1vw,39px);line-height:1.7;letter-spacing:-1.3px;word-break:keep-all;font-weight:750}.listen{background:transparent;border:0;display:flex;align-items:center;gap:8px;color:#637780;padding:0;margin:17px 0 20px;font-size:14px}.record-row{border-top:1px solid #e4eaed;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.timer{font-size:32px;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-1px}.timer small{font-size:14px;color:#6b7c85;font-weight:400;margin-left:5px}.primary,.dark{background:#08796c;border:0;border-radius:12px;color:white;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;font-weight:700}.primary:hover{background:#066055}.dark{background:#193c37;width:100%;justify-content:space-between;margin-top:22px}.tip{display:flex;gap:20px;padding:22px 4px;align-items:baseline;font-size:14px;color:#62747c}.tip>span{color:#117465;font-weight:800;white-space:nowrap;font-size:12px;letter-spacing:.5px}.join-card{border-radius:22px;background:#dff0e8;padding:29px 26px}.join-card h2{font-size:23px;letter-spacing:-.8px;margin:15px 0}.join-card p{font-size:14px;color:#53736a;line-height:1.8;margin-bottom:25px}label{display:block;font-size:14px;font-weight:600;margin-top:16px}input{display:block;background:white;border:1px solid #d1dfd9;border-radius:10px;padding:13px 14px;margin-top:9px;width:100%;font:inherit;color:#193c37;min-height:48px}input::placeholder{color:#8b9e99;font-weight:400}.small-card{margin-top:20px;padding:26px;border:1px solid #dee5e9;border-radius:20px;background:white}.small-card>svg{color:#228070}.small-card h3{font-size:17px;margin:15px 0 10px}.small-card p{font-size:14px;line-height:1.8;color:#6b7c85}.text-button{border:0;background:transparent;color:#147463;padding:10px 0 0;font-size:14px;font-weight:700}footer{border-top:1px solid #dce4e8;padding:25px 0 35px;display:flex;justify-content:space-between;color:#7a8c93;font-size:12px}
@media(min-width:1350px){.shell{padding:0 90px}}@media(max-width:900px){.shell{padding:0 24px}.workspace{grid-template-columns:minmax(0,1fr) 260px;gap:18px}.speech-card{padding:25px}.brand span{display:none}.tag{font-size:12px}.intro h1{font-size:28px}.join-card{padding:25px 20px}}@media(max-width:700px){.shell{padding:0 18px}header{height:78px}.tag{display:none}main{padding:28px 0}.intro{align-items:flex-start;gap:14px}.intro h1{font-size:25px;line-height:1.4}.intro .outline{font-size:13px;padding:0 12px;white-space:nowrap}.intro .outline svg{display:none}.intro p{font-size:14px}.workspace{grid-template-columns:1fr}.workspace aside{display:grid;grid-template-columns:1fr;gap:15px}.speech-card h2{font-size:29px}.primary{padding:14px 18px}.tip{line-height:1.8;gap:14px}.small-card{margin:0}.main-tabs button{font-size:13px!important}.main-tabs button svg{display:none}footer{gap:15px;flex-direction:column}}
[hidden]{display:none!important}.brand-icon{display:inline-flex;align-items:center;justify-content:center;background:#087d6e;color:#e2fa84;width:43px;height:43px;border-radius:14px;font-size:21px}.main-tabs{display:flex}.main-tabs button{flex:1;border:0;background:transparent;color:#64767e;font-weight:600}.main-tabs button.active{background:white;color:#08796c;box-shadow:0 2px 5px #143b3710}.message{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#e4f1e8;border:1px solid #c9e2d2;border-radius:12px;padding:15px 18px;margin-bottom:20px;font-size:14px;line-height:1.8;color:#315e49}.error{background:#fff0ea;color:#98442a;border-color:#ebcfc0}.sentence-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.repeat-label{font-size:12px;color:#53746a;border:1px solid #d5e4dc;padding:5px 8px;border-radius:7px;white-space:nowrap}.rules{font-size:13px;line-height:1.9;color:#71817f;margin:12px 0 18px}.speech-card #record-state{margin:12px 0 0}.section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:25px 0 16px}.section-title h3{font-size:18px}.section-title>span{font-size:12px;color:#7c8e92}.sentence-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sentence-choice{border:1px solid #dce6e1;border-radius:12px;background:white;padding:16px;display:flex;align-items:center;gap:14px;text-align:left}.sentence-choice>span{font-size:13px;color:#79968a}.sentence-choice>div{flex:1}.sentence-choice strong{font-size:14px;display:block}.sentence-choice small{font-size:11px;letter-spacing:.8px;color:#8b9f94;display:block;margin-top:5px}.sentence-choice b{color:#79968a}.sentence-choice.selected{background:#e8f4ec;border-color:#91bba1}.sentence-choice:disabled{opacity:.8}.form-note{font-size:12px;color:#628273;display:block;text-align:center;margin-top:16px}.privacy-note{padding:24px 10px;color:#799084;font-size:12px;line-height:1.9}.privacy-note strong{display:block;color:#54735e;font-size:14px;margin-bottom:9px}.privacy-note #connection-state{font-size:11px;margin-top:10px}.microphone-icon{color:#08796c;font-size:24px}.result-card{border:1px solid #cce1d0;border-radius:18px;padding:25px;background:#eff7f0;margin-bottom:20px}.result-card h3{font-size:17px;color:#2c6047}.result-card .card-top{gap:18px}.result-card>p{font-size:14px;line-height:1.9;margin-top:14px}.result-card .score{font-size:42px;color:#0a7b60;font-weight:800}.score small{font-size:14px;margin-left:9px;font-weight:500}.result-card details{font-size:14px;line-height:1.8;margin-top:14px}.result-card summary{min-height:44px;cursor:pointer}.result-card details p{background:white;padding:12px;border-radius:8px}.result-card details small{display:block;color:#728174;margin-top:10px}.result-card .save-status{border-top:1px solid #d5e6d9;padding-top:12px;font-size:12px;color:#5a8067}.playback{padding:18px;background:white;border:1px solid #dce5e1;border-radius:14px;margin-bottom:20px}.playback strong{font-size:14px;display:block;margin-bottom:12px}audio{width:100%;height:42px}.empty{padding:50px 15px;text-align:center;color:#7a8a86;font-size:15px;line-height:1.9}.history{margin-top:25px;border-top:1px solid #dfe8e2;padding-top:22px}.history h3{font-size:18px;margin-bottom:20px}.history-row{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #e5ece7;padding:15px 0;font-size:14px}.history-row small{display:block;font-size:11px;color:#7c8f81;margin-top:7px}.history>div{font-size:14px;color:#60796a}.my-stats{border-top:1px solid #bdd6c7;padding-top:18px;display:flex;gap:20px}.my-stats>span{font-size:12px;color:#5a7c68}.my-stats strong{display:block;margin-top:10px;font-size:24px;color:#254f38}table{width:100%;border-collapse:collapse;font-size:15px}td,th{text-align:left;padding:15px 8px;border-bottom:1px solid #e2eae6}td:last-child,th:last-child{text-align:right}th{font-size:12px;color:#789185;font-weight:500}.rank{background:#e3f0e6;padding:7px 11px;border-radius:8px;font-weight:700;color:#1c704d}.me-tag{font-size:11px;color:#167e53;background:#e3f1e7;padding:3px 7px;border-radius:4px;margin-left:5px}#rank-panel h2{font-size:25px;line-height:1.4}#rank-panel>.section-title{margin-top:0}.modal{border:1px solid #d4e2d8;border-radius:22px;padding:32px;max-width:min(540px,calc(100% - 30px));max-height:90dvh;width:100%;color:#233e30;overflow-y:auto;background:white}.modal::backdrop{background:#12291ee0;backdrop-filter:blur(3px)}.modal h2{font-size:25px;line-height:1.5;letter-spacing:-.7px;padding-right:30px;margin-bottom:15px}.modal p{font-size:14px;line-height:1.9;margin:12px 0;color:#647e6c}.modal .close{position:absolute;right:17px;top:12px;background:transparent;border:0;font-size:28px;color:#6d8a75;width:44px}.modal .primary{margin-top:20px}.modal input{color:#264b34}.modal code{font-size:12px;overflow-wrap:anywhere}.teacher-modal{max-width:min(900px,calc(100% - 30px))}.create-room{display:flex;gap:15px;align-items:end}.create-room label{flex:1}.create-room .primary{white-space:nowrap;margin:0}.class-banner{background:#173e30;color:#d4eacf;border-radius:16px;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:25px}.class-banner span{font-size:13px}.class-banner strong{display:block;font-size:34px;letter-spacing:6px;color:#e5fc96;margin-top:9px}.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}select{display:block;width:100%;min-height:48px;border:1px solid #c9dccc;border-radius:9px;padding:10px 12px;background:white;margin-top:9px;color:#294e35;font:inherit;font-size:14px}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0}.actions .primary{margin:0}.student{padding:18px;border:1px solid #d9e6db;border-radius:13px;margin-bottom:12px}.student>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:15px}.student>div:first-child span{font-size:12px;color:#60866a;background:#eff6ef;padding:5px 9px;border-radius:6px}.student>p{font-size:12px;line-height:1.8;margin:10px 0}.advice{padding:12px;background:#f1f7f0;border-radius:8px}.advice small{font-size:11px;color:#6b8b71}.advice p{font-size:13px;line-height:1.8;margin:6px 0 0}#teacher-notice:empty{display:none}select:focus-visible{outline:3px solid #e7a519;outline-offset:3px}a:focus-visible{outline:3px solid #e7a519}
.create-room{display:grid;grid-template-columns:2fr 2fr 1fr;align-items:end}.create-room>.primary{grid-column:1/-1}.teacher-advanced,#teacher-admin{margin:18px 0;padding:16px;border:1px solid #d9e6db;border-radius:12px}.teacher-advanced summary,#teacher-admin summary,.privacy-note summary{cursor:pointer;min-height:36px;font-weight:600}.teacher-entry{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid #d9e6db;padding:8px 0}textarea{display:block;width:100%;padding:12px;border:1px solid #c9dccc;border-radius:9px;font:inherit;font-size:14px;line-height:1.6;resize:vertical;margin:10px 0;overflow-wrap:anywhere}#teacher-create-form label{margin-top:8px}#teacher-identity{overflow-wrap:anywhere}#invite-result{padding:12px;background:#eff6ef;margin-top:16px;border-radius:12px}
@media(max-width:700px){.sentence-choice{padding:12px;gap:9px}.sentence-choice strong{font-size:13px}.sentence-choice b{display:none}.create-room{grid-template-columns:1fr;align-items:stretch}.setting-grid{grid-template-columns:1fr}.modal{padding:25px}.class-banner{flex-direction:column;align-items:start}.result-card .card-top{align-items:start}.result-card h3{font-size:15px}.record-row .timer{font-size:28px}.record-row .primary{font-size:14px}#rank-panel>.section-title{flex-wrap:wrap}.main-tabs button{font-size:14px!important}}