@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Noto Sans KR','Noto Sans JP',sans-serif;color:#343044;background:#faf9fc;font-synthesis:none;--purple:#7653c5;--deep:#6041a7;--muted:#827b91;--line:#eeeaf3;--lilac:#f1ebfc;--green:#277757}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}button,input,select,textarea{outline-offset:4px}button:focus-visible,a:focus-visible{outline:3px solid #b197eb}button{transition:background .2s,transform .2s}button:hover:not(:disabled){transform:translateY(-1px)}svg{width:22px;height:22px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}button svg{flex-shrink:0}header{height:91px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;gap:20px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{background:var(--purple);color:white;border-radius:15px;padding:10px}.brand-mark svg{width:27px;height:27px}.brand-name{font-size:25px;font-weight:900;letter-spacing:-1px}.brand-sub{font-size:12px;color:var(--muted);margin-top:1px;letter-spacing:1px}.header-right{display:flex;align-items:center;gap:22px}.small-label{font-size:14px;color:var(--muted)}.select-wrap{display:flex;gap:9px;align-items:center}.select-wrap select,.voice-select{border:1px solid var(--line);border-radius:11px;background:#fff;padding:10px;color:#51495e;font-size:14px}.shell{max-width:1450px;margin:auto;padding:36px 5.5% 24px}.greeting{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.eyebrow{font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--purple);margin:0 0 9px}.greeting h1{font-size:29px;letter-spacing:-1px;margin:0 0 8px}.greeting p{font-size:15px;color:var(--muted);margin:0}.date-pill{font-size:14px;border:1px solid #e7dfef;padding:10px 15px;border-radius:30px;color:#746588;display:flex;align-items:center;gap:8px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px}.study-area{min-width:0}.language-switch{display:flex;gap:8px;background:#efecf4;border-radius:15px;padding:5px;width:max-content;margin-bottom:24px}.language-switch button{border:0;background:none;padding:11px 26px;color:#82778e;font-size:15px;border-radius:11px;font-weight:700;display:flex;gap:9px;align-items:center}.language-switch button.active{background:white;box-shadow:0 2px 6px #5443690c;color:#4a3e5a}.flag{font-size:21px}.practice-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.practice-heading h2{font-size:16px;margin:0;font-weight:700}.practice-heading span{font-size:13px;color:var(--muted)}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}.mode{position:relative;text-align:left;background:white;border:1px solid #e8e3f0;border-radius:17px;padding:17px 13px}.mode.active{border:1.5px solid #9874df;background:#f6f1ff;box-shadow:0 3px 10px #8f6ec00b}.mode-icon{width:35px;height:35px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#f4f1f8;color:#8a6ab5;margin-bottom:10px}.mode.active .mode-icon{background:#e9dcff;color:var(--purple)}.mode-name{font-size:15px;font-weight:700;margin-bottom:4px}.mode-desc{font-size:12px;color:var(--muted)}.mode-check{position:absolute;right:12px;top:13px;color:var(--purple)}.mode-check svg{width:17px;height:17px}.lesson{border:1px solid #e9e3f0;background:white;border-radius:22px;padding:26px 28px;box-shadow:0 5px 22px #5c426604}.lesson-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.topics{display:flex;gap:5px;flex-wrap:wrap}.topics button{border:0;padding:8px 12px;border-radius:9px;background:transparent;color:#8c8498;font-size:13px}.topics button.active{color:var(--purple);background:var(--lilac);font-weight:700}.counter{font-size:13px;color:#8b8199;white-space:nowrap}.track{height:4px;background:#f0edf5;border-radius:8px;margin:18px 0 27px;overflow:hidden}.track>div{height:100%;background:#ab8bdf;transition:width .3s}.question-type{font-size:12px;font-weight:700;color:var(--purple);display:flex;align-items:center;gap:6px}.question-type svg{width:16px;height:16px}.question h2{font-size:23px;letter-spacing:-.7px;margin:10px 0 8px}.question-description{font-size:14px;color:var(--muted);margin:0 0 25px;line-height:1.7}.prompt{background:#f8f6fc;border:1px solid #f0ecf6;border-radius:16px;min-height:133px;padding:24px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.sentence{font-size:25px;font-weight:700;letter-spacing:-.5px;line-height:1.65}.translation{font-size:14px;color:var(--muted)}.listen-prompt{flex-direction:row;gap:19px}.play-button{width:61px;height:61px;border:0;border-radius:50%;background:var(--purple);color:white;display:grid;place-items:center;box-shadow:0 4px 0 #dfd2f0}.play-button svg{width:25px;height:25px}.waveform{height:43px;display:flex;gap:5px;align-items:center}.waveform i{width:4px;background:#c7b2e9;border-radius:8px;height:var(--h)}.waveform.playing i{animation:wave .6s infinite alternate;animation-delay:var(--d)}@keyframes wave{to{height:9px}}.audio-actions{display:flex;align-items:center;gap:16px;justify-content:center;margin:14px 0 20px}.text-btn{padding:5px 2px;border:0;background:none;color:#817093;font-size:13px;display:inline-flex;gap:6px;align-items:center}.text-btn svg{width:16px;height:16px}.response-label{font-size:13px;font-weight:600;display:block;margin:20px 0 9px}.answer-input{width:100%;min-height:98px;border:1.5px solid #e4dced;border-radius:13px;resize:vertical;padding:15px 16px;color:#43364f;background:white;font-size:17px;line-height:1.65}.answer-input::placeholder{color:#afa6b9;font-size:14px}.answer-input:focus{outline:2px solid #c4a5ed;outline-offset:1px}.record-row{display:flex;justify-content:center;gap:12px;align-items:center;margin-top:21px}.record-btn{display:flex;align-items:center;gap:9px;background:var(--purple);border:0;border-radius:40px;color:white;padding:14px 24px;font-size:15px}.record-btn.recording{background:#b75676;animation:pulse 1.2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px #f6e4eb}}.record-note{font-size:12px;color:var(--muted);text-align:center;line-height:1.7;margin:12px 0 0}.recognized{margin-top:17px;padding:16px;background:#f8f6fc;border-radius:12px;font-size:16px;min-height:57px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.choice{display:flex;gap:12px;align-items:center;text-align:left;padding:14px;border-radius:12px;border:1px solid #e5dfed;background:white;font-size:15px}.choice.selected{background:#f2eaff;border-color:#9570d5;color:#6647a1}.choice-num{width:26px;height:26px;border-radius:7px;background:#f4f1f8;display:grid;place-items:center;flex-shrink:0;font-size:12px}.submit-row{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #f0edf4;margin-top:24px;padding-top:20px}.hint-line{font-size:12px;color:#93889f;display:flex;align-items:center;gap:7px}.hint-line svg{width:16px;height:16px}.primary{background:var(--purple);border:0;border-radius:12px;padding:13px 23px;color:white;font-size:14px;font-weight:600;display:flex;align-items:center;gap:12px;white-space:nowrap}.primary svg{width:17px}.feedback{border:1px solid #cce8dc;background:#f0faf5;border-radius:14px;padding:17px;margin-top:19px;line-height:1.7}.feedback.retry{background:#fff7ed;border-color:#f1dbba}.feedback-title{font-size:17px;font-weight:700;color:#39765a;display:flex;align-items:center;justify-content:space-between}.feedback.retry .feedback-title{color:#966b30}.feedback p{font-size:14px;margin:8px 0 0}.feedback mark{background:#ffe1a8;color:#684924;padding:1px 2px;border-radius:3px}.feedback del{background:#ffdfe5;color:#99536a;text-decoration:line-through}.diff-line{word-break:break-word}.error{font-size:14px;line-height:1.7;color:#a34f57;background:#fff2f2;padding:12px;border-radius:10px;margin-top:12px}.under-note{font-size:12px;text-align:center;margin:17px 0;color:#9c93a6}.companion{background:#f4efff;border:1px solid #e9ddfb;border-radius:24px;padding:24px 20px 19px;text-align:center;position:relative;overflow:hidden}.companion-label{font-size:12px;letter-spacing:2px;color:#9376b5;font-weight:700}.companion h2{font-size:20px;margin:10px 0 8px;color:#5d428a}.speech{background:white;border:1px solid #ebe1f9;border-radius:16px;padding:13px 10px;font-size:13px;color:#8c73a8;line-height:1.7;margin:17px 0 0;position:relative}.puppy-window{width:220px;height:246px;margin:0 auto;background-image:url('assets/pom-frames.png');background-size:400% 200%;background-repeat:no-repeat;background-position:0 0;position:relative}.puppy-empty{display:flex;align-items:center;justify-content:center;color:#b899dd;font-size:15px}.pet-name{display:flex;justify-content:center;align-items:center;gap:6px;font-size:13px;color:#9579b2;margin-top:4px}.pet-name svg{width:15px;height:15px}.pet-action{border:1px solid #ddd0ef;background:#fff9ff;color:#8b6aab;border-radius:30px;padding:9px 20px;margin-top:16px;font-size:13px}.side-card{background:white;border:1px solid #eae4f1;border-radius:18px;margin-top:18px;padding:20px}.side-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;margin:0 0 18px}.side-title svg{color:#a78ac6;width:18px;height:18px}.stats{display:flex;justify-content:space-between;text-align:center}.stat strong{display:block;font-size:24px;font-weight:800;color:#765a9b}.stat span{font-size:12px;color:#9a8da5}.stat+ .stat{border-left:1px solid #eee8f3;padding-left:18px}.tip{background:#fff7eb;border-color:#f2e5cf;padding:18px}.tip .side-title{color:#9d764a;margin-bottom:8px;font-size:14px}.tip p{font-size:13px;line-height:1.9;color:#a18a70;margin:0}.voice-settings{margin-top:18px;font-size:13px;color:#897a9a}.voice-settings summary{cursor:pointer}.voice-select{display:block;width:100%;margin-top:10px;max-width:100%}.voice-settings p{font-size:12px;line-height:1.7}.footer{margin-top:31px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#a398ad}.footer span{display:flex;align-items:center;gap:6px}.footer svg{width:14px;height:14px}.completed{text-align:center;padding:35px 10px}.completed h2{font-size:26px}.completed p{color:var(--muted);line-height:1.8}.completed .primary{margin:25px auto}.finished-paw{font-size:48px;color:var(--purple)}.audio-replay{display:block;width:100%;height:36px;margin-top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(min-width:1500px){.shell{padding-left:55px;padding-right:55px}}@media(max-width:1050px){.shell{padding:28px 4%}.layout{grid-template-columns:minmax(0,1fr) 250px;gap:20px}.lesson{padding:23px 20px}.mode{padding:14px 10px}.mode-desc{font-size:11px}.companion{padding:21px 13px}.puppy-window{width:210px;height:235px}.header-right .small-label{display:none}}@media(max-width:780px){header{height:76px;padding:0 5%}.brand-name{font-size:23px}.brand-sub{font-size:10px}.header-right{gap:5px}.select-wrap svg{display:none}.select-wrap select{max-width:115px;font-size:12px;padding:8px}.shell{padding:25px 5%}.greeting h1{font-size:24px}.greeting p{font-size:13px}.date-pill{display:none}.layout{display:flex;flex-direction:column}.language-switch{width:100%;margin-bottom:23px}.language-switch button{flex:1;justify-content:center;padding:10px 15px}.mode-grid{gap:7px}.mode{padding:13px 8px;border-radius:13px}.mode-name{font-size:13px}.mode-desc{font-size:10px;line-height:1.6}.mode-icon{width:30px;height:30px}.mode-check{right:6px;top:9px}.mode-check svg{width:13px}.lesson{padding:21px 17px}.lesson-top{gap:5px}.topics button{font-size:12px;padding:7px 9px}.counter{font-size:12px}.question h2{font-size:20px}.sentence{font-size:23px}.prompt{padding:20px 14px}.submit-row{gap:10px}.hint-line{font-size:11px;max-width:160px;line-height:1.6}.primary{padding:12px 18px;font-size:13px}.side{display:grid;grid-template-columns:1fr 1fr;gap:13px}.companion{grid-row:span 2;padding:20px 10px}.companion h2{font-size:17px}.puppy-window{width:155px;height:174px}.side-card{margin:0;padding:17px 13px}.side-card.tip{align-self:start}.speech{font-size:11px;padding:10px 6px}.stats{flex-wrap:wrap;gap:8px}.stat strong{font-size:21px}.stat span{font-size:10px}.stat+.stat{padding-left:9px}.side-title{font-size:13px}.voice-settings{grid-column:1/-1;margin-top:0}.footer{font-size:10px;gap:10px;line-height:1.8}.pet-action{padding:8px 12px;font-size:11px}.pet-name{font-size:11px}.choice{padding:12px 9px;font-size:14px;gap:8px}.question-description{font-size:13px}.tip p{font-size:12px}.companion-label{font-size:10px}.practice-heading h2{font-size:15px}.practice-heading span{font-size:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.puppy-window{width:195px;height:260px;mask-image:radial-gradient(ellipse 73% 70% at 50% 50%,#000 58%,transparent 100%)}.write-types{margin:-10px 0 17px}.feedback-title{gap:10px;flex-wrap:wrap}.finished-paw svg{width:56px;height:56px}.translation{word-break:keep-all}.question-type{margin-top:0}.audio-actions:empty{display:none}@media(max-width:780px){.puppy-window{width:150px;height:200px}.feedback-title{font-size:15px}.voice-settings{padding:8px 0}.side-title{line-height:1.7}}@media(max-width:370px){.side{grid-template-columns:1fr}.puppy-window{width:195px;height:260px}.choice-grid{grid-template-columns:1fr}}
.mode-desc,.hint-line{word-break:keep-all}
#intensive-link{display:inline-flex!important;text-decoration:none;color:#7652a8;border:1px solid #cdb9e6;background:#f1e8ff;white-space:normal;line-height:1.5}@media(max-width:780px){.greeting{gap:14px;flex-wrap:wrap}#intensive-link{font-size:14px;padding:10px 14px}}
@media(max-width:520px){.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mode{min-width:0}.mode-name{font-size:15px}.mode-desc{font-size:12px}.choice-grid{grid-template-columns:1fr}.lesson-top{flex-wrap:wrap}.topics{min-width:0}.footer{flex-wrap:wrap}}
#intensive-link{display:inline-flex!important;align-items:center;justify-content:center;gap:9px;padding:12px 17px;border:1px solid var(--purple);border-radius:13px;background:var(--purple);color:#fff;text-decoration:none!important;font-weight:800;box-shadow:0 3px 0 var(--deep);transition:background .18s,transform .18s,box-shadow .18s}#intensive-link::after{content:'→';font-size:18px;line-height:1}#intensive-link:hover{background:var(--deep);color:#fff;transform:translateY(-1px);box-shadow:0 4px 0 #51358f}.course-header a[href="/index.html"]{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border:1px solid #d8c8ed;border-radius:12px;background:#f5effc;color:#68489e;text-decoration:none;font-weight:700;line-height:1.4;transition:background .18s,color .18s,border-color .18s}.course-header a[href="/index.html"]::before{content:'←';font-size:17px;line-height:1}.course-header a[href="/index.html"]:hover{background:#ece2f8;border-color:#bda5dc;color:#553782}
.practice-range{margin:0 0 15px;padding:13px 15px;border:1px solid #e7deed;border-radius:14px;background:#fff}.practice-range>strong{display:block;margin-bottom:9px;color:#574568;font-size:13px}.practice-range-options{display:flex;flex-wrap:wrap;gap:7px}.practice-range-options button{min-height:36px;padding:7px 11px;border:1px solid #e6ddec;border-radius:10px;background:#fcfaff;color:#675477;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.practice-range-options button:hover{border-color:#b9a2d2}.practice-range-options button.active{border-color:#8765b5;background:#f0e9f8;color:#63438d;box-shadow:0 0 0 2px #8765b51a}@media(max-width:520px){.practice-range{padding:11px}.practice-range-options{gap:6px}.practice-range-options button{padding:6px 8px;font-size:11px}}
.practice-range{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 18px;padding:14px 17px;border-color:#e8def0;border-radius:18px;background:linear-gradient(120deg,#fff,#fbf8ff);box-shadow:0 6px 18px #4f37610a}.practice-range-head{display:flex;align-items:center;gap:14px;min-width:0}.practice-range>strong{display:none}.practice-range-head>strong{color:#59466b;font-size:13px;white-space:nowrap}.practice-range-options{display:flex;gap:6px;min-width:0}.practice-range-options button{min-height:36px;padding:7px 12px;border-radius:999px;background:#fff;font-size:12px}.practice-range-options button.active{background:#7654b5;color:#fff;border-color:#7654b5;box-shadow:0 3px 8px #7654b52b}.practice-day-picker{display:flex;align-items:center;justify-content:flex-end;gap:8px}.practice-day-picker>span{font-size:12px;font-weight:700;color:#8a7a93}.practice-day-controls{display:flex;align-items:center;gap:5px}.practice-day-controls button{min-width:35px;min-height:36px;border:1px solid #e6ddec;border-radius:11px;background:#fff;color:#65428f;font:inherit;cursor:pointer}.practice-day-controls button:hover:not(:disabled){background:#f4eff9;border-color:#b9a2d2}.practice-day-controls button:disabled{opacity:.4;cursor:not-allowed}.practice-day-controls .practice-day-current{min-width:116px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800}.practice-day-controls .practice-day-current.active{background:#f1ebf9;border-color:#bca6d4;color:#5d3e86}
@media(max-width:620px){.practice-range{grid-template-columns:1fr;gap:10px;padding:12px}.practice-range-head{justify-content:space-between;gap:7px}.practice-range-head>strong{font-size:12px}.practice-range-options{flex:1;justify-content:flex-end}.practice-range-options button{min-height:34px;padding:6px 10px;font-size:11px}.practice-day-picker{justify-content:space-between}.practice-day-picker>span{font-size:11px}.practice-day-controls .practice-day-current{min-width:112px}}
.practice-pattern-note{display:grid;gap:5px;margin:15px 0 18px;padding:15px 17px;border:1px solid #dfd0ef;border-radius:16px;background:linear-gradient(120deg,#f5effd,#fffaf3);color:#453252}
.practice-pattern-note>span{color:#7957ab;font-size:11px;font-weight:800;letter-spacing:.06em}
.practice-pattern-note>strong{font-size:18px;line-height:1.4}
.practice-pattern-note>p{margin:2px 0 0;color:#554664;font-size:14px;line-height:1.7}
.practice-pattern-note>small{color:#73647d;font-size:12px;line-height:1.55}