500;600;700;800&family=Noto+Sans+KR:wght@400;500;700&display=swap');
:root{--paper:#f7f6f0;--ink:#203a37;--muted:#6b7772;--green:#1b5b4e;--lime:#d7e9a6;--line:#dde1d7;--orange:#dc744a;--white:#fffefb}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;font-size:15px}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.topbar{max-width:1220px;margin:auto;padding:29px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-weight:800;font-size:20px}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:3px;font-weight:500}.brand-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:var(--green);color:white;font-size:25px;font-family:'Noto Sans KR',sans-serif}.source-tag{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:9px}.source-tag i{height:6px;width:6px;background:var(--green);border-radius:50%}main{max-width:1140px;margin:auto;padding:0 0 30px;min-height:78vh}.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:62px 0 50px;gap:60px}.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:700;color:var(--green);margin:0 0 20px}h1,h2,h3,p{margin-top:0}.hero h1{font-size:49px;line-height:1.4;letter-spacing:-1.4px;margin-bottom:20px;font-weight:800}.hero h1 span{color:var(--orange)}.lead{color:var(--muted);line-height:1.9;font-size:14px;margin-bottom:0}.sound-card{background:#e9eddf;border-radius:20px;padding:32px;text-align:center;position:relative;overflow:hidden;transform:rotate(2deg);max-width:410px;margin-left:auto;width:100%;box-shadow:10px 12px 0 #e0e5d7}.sound-card:before{content:'';position:absolute;inset:14px;border:1px solid #d4dbc8;border-radius:12px}.vinyl{display:grid;place-items:center;width:100px;height:100px;border-radius:50%;border:1px solid #bac7af;margin:0 auto 18px;outline:10px solid #dce4d0;background:var(--ink);color:var(--lime);font-family:'Noto Sans KR',sans-serif;font-size:25px}.sound-card>span:last-of-type{display:block;font-family:'Noto Sans KR',sans-serif;font-weight:500;font-size:16px}.sound-card small{display:block;font-size:11px;color:var(--muted);margin-top:6px}.wave{display:flex;align-items:center;justify-content:center;height:46px;gap:6px;margin:5px 0 18px}.wave b{width:4px;height:12px;border-radius:4px;background:var(--green)}.wave b:nth-child(3n){height:32px}.wave b:nth-child(4n){height:45px}.wave b:nth-child(2n){height:22px}.mode-tabs{display:flex;gap:3px;background:#e9ece3;padding:6px;border-radius:13px;width:max-content;margin:0 0 45px}.mode-tabs button{border:none;background:none;border-radius:9px;padding:15px 25px;color:var(--muted);display:flex;align-items:center;gap:10px;font-size:11px}.mode-tabs button[aria-selected=true]{background:var(--white);color:var(--green);box-shadow:0 2px 4px #173e3b0a}.mode-tabs strong{font-size:15px}.mode-tabs small{font-size:11px;margin-left:10px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.section-heading .eyebrow{margin-bottom:9px}h2{font-size:25px;letter-spacing:-.5px;margin:0 0 9px}.section-heading p:last-child{color:var(--muted);font-size:13px;margin-bottom:0}.text-button{border:0;background:none;padding:8px 0;color:var(--green);font-size:13px}.text-button span{background:#e6ebde;border-radius:20px;padding:2px 8px;margin:0 5px}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.lesson{border:1px solid var(--line);border-radius:12px;padding:20px;text-align:left;background:var(--white);color:var(--ink);transition:transform .16s,border-color .16s;display:flex;gap:14px;align-items:flex-start;position:relative}.lesson:hover:not(:disabled){border-color:var(--green);transform:translateY(-2px)}.lesson-number{font-family:Georgia,serif;font-size:27px;font-style:italic;color:#9da997;min-width:34px;line-height:1.15}.lesson strong{display:block;font-size:15px;margin-bottom:5px}.lesson small{display:block;font-family:'Noto Sans KR',sans-serif;color:var(--muted);font-size:11px}.lesson .lesson-meta{margin-top:14px;font-size:10px;color:var(--green)}.lesson .arrow{margin-left:auto;color:#9aa996;font-size:20px}.lesson:disabled{opacity:.55}.coverage{border-top:1px solid var(--line);margin-top:28px;padding:18px 0;color:var(--muted);font-size:11px;line-height:1.9}.coverage summary{cursor:pointer}.coverage p{margin:10px 0}.exam-card{display:grid;grid-template-columns:1.5fr 1fr;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:40px;gap:30px}.pill,.audio-badge{font-size:10px;border:1px solid #d5dfcb;border-radius:20px;padding:6px 11px;color:var(--green);display:inline-block}.exam-card h3{font-size:27px;margin:23px 0 12px}.exam-card p{color:var(--muted);font-size:13px;line-height:1.9}.exam-stats{display:flex;gap:27px;margin:30px 0}.exam-stats span{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted)}.exam-stats b{font-size:24px;font-weight:600;color:var(--ink)}.primary{background:var(--green);color:white;border:0;border-radius:9px;padding:14px 23px;font-weight:500;font-size:14px}.primary:hover{background:#174a40}.primary span{margin-left:20px}.exam-symbol{border-radius:50%;aspect-ratio:1;max-width:220px;width:100%;align-self:center;justify-self:center;background:#edf1e3;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Noto Sans KR',sans-serif;font-size:46px;color:var(--green)}.exam-symbol small{font-size:8px;letter-spacing:1.4px;margin-top:13px}.quiz-top{display:flex;justify-content:space-between;align-items:center;margin:30px 0 17px;font-size:12px;color:var(--muted)}.progress-track{height:3px;background:#e0e6d9}.progress-track>div{height:100%;background:var(--green);transition:width .2s}.question-layout{display:grid;grid-template-columns:.75fr 1.3fr;gap:80px;margin:48px 0}.question-layout aside{padding-top:28px}.question-layout aside h1{font-size:37px;line-height:1.6;font-weight:700}.question-layout aside>p:last-of-type{font-size:13px;color:var(--muted);line-height:1.8}.score-box{border-top:1px solid var(--line);padding-top:25px;margin-top:38px;max-width:190px}.score-box small{font-size:11px;color:var(--muted)}.score-box b{display:block;font-family:Georgia,serif;font-size:52px;font-weight:400;margin-top:9px}.question-card{background:var(--white);border:1px solid var(--line);border-radius:17px;padding:28px;box-shadow:0 8px 28px #203a3705}.audio-area{text-align:center;border-bottom:1px solid var(--line);padding:0 0 20px}.play-button{display:block;margin:20px auto 12px;width:76px;height:76px;border-radius:50%;border:0;background:var(--green);color:white;font-size:24px;padding-left:8px;box-shadow:0 0 0 8px #edf1e6}.play-button.playing{background:var(--orange)}#audio-status{font-size:12px;color:var(--muted);margin:18px 0 9px;min-height:20px}.audio-controls{display:flex;justify-content:center;gap:25px;align-items:center}.audio-controls label{font-size:11px;color:var(--muted)}select{border:1px solid var(--line);border-radius:5px;background:transparent;padding:3px;color:var(--green);margin-left:3px}.choose-caption{font-size:12px;margin:22px 0 13px;display:flex;justify-content:space-between}.choose-caption span{color:var(--muted);font-size:10px}.options{display:grid;gap:9px}.option{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:1px solid #dfe4da;border-radius:9px;background:transparent;padding:13px 15px;color:var(--ink);font-size:14px;line-height:1.7}.option>span:first-child{font-size:11px;border:1px solid var(--line);width:25px;height:25px;border-radius:6px;display:grid;place-items:center;flex-shrink:0}.option:hover:not(:disabled){border-color:var(--green);background:#f4f7ef}.option.correct{background:#eef4e6;border-color:#789c65}.option.correct>span:first-child{background:var(--green);color:white;border-color:var(--green)}.option.incorrect{background:#fff0ea;border-color:#d99575}.option:disabled{color:var(--ink)}.option .mark{margin-left:auto;font-size:17px}.feedback{background:#f0f4e9;padding:16px;border-radius:9px;margin-top:17px;font-size:13px;line-height:1.9}.feedback.wrong{background:#fcf0e9}.feedback strong{display:block}.feedback .ko{font-family:'Noto Sans KR',sans-serif;font-size:17px;margin:5px 0;color:var(--ink)}.feedback .zh{color:var(--muted);margin:0}.next{display:block;width:100%;margin-top:15px}.result-card{max-width:750px;margin:60px auto;text-align:center;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:45px}.result-card h1{font-size:28px}.result-score{font-family:Georgia,serif;font-size:105px;color:var(--green)}.result-score small{font-size:35px}.result-card>p{font-size:13px;color:var(--muted)}.result-actions{display:flex;gap:12px;justify-content:center;margin-top:25px}.secondary{border:1px solid var(--line);background:none;border-radius:9px;padding:13px 22px;color:var(--green);font-size:14px}#result-wrongs{text-align:left;margin-top:30px}.wrong-row{border-top:1px solid var(--line);padding:16px 0;display:flex;gap:15px;align-items:center}.wrong-row p{font-size:15px;margin-bottom:5px;font-family:'Noto Sans KR',sans-serif}.wrong-row small{color:var(--muted);font-size:12px}.wrong-row button{margin-left:auto;flex-shrink:0}footer{max-width:1140px;margin:20px auto 0;padding:23px 0;border-top:1px solid var(--line);font-size:10px;color:#859080;display:flex;justify-content:space-between}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:13px 22px;border-radius:9px;max-width:90vw;font-size:13px;z-index:20}@media(min-width:1400px){.hero{padding-top:75px;padding-bottom:65px}}@media(max-width:1220px){main{padding-left:40px;padding-right:40px}footer{margin-left:40px;margin-right:40px}.question-layout{gap:45px}}@media(max-width:760px){.topbar{padding:20px}.brand{font-size:17px}.brand small{font-size:6px}.brand-icon{width:36px;height:36px;font-size:22px}.source-tag{font-size:9px;gap:5px}main{padding:0 20px 20px}.hero{padding:35px 0;gap:22px;grid-template-columns:1.2fr .8fr}.hero h1{font-size:31px;letter-spacing:-1px;margin-bottom:15px}.hero .eyebrow{font-size:7px;letter-spacing:1.5px;margin-bottom:14px}.lead{font-size:11px;line-height:1.9}.sound-card{padding:22px 12px;box-shadow:5px 6px 0 #e0e5d7;border-radius:13px}.sound-card:before{inset:8px}.vinyl{width:60px;height:60px;font-size:17px;outline-width:6px}.wave{gap:3px;height:25px;margin:6px 0 12px}.wave b{width:3px;height:8px}.wave b:nth-child(3n){height:18px}.wave b:nth-child(4n){height:25px}.wave b:nth-child(2n){height:12px}.sound-card>span:last-of-type{font-size:10px}.sound-card small{font-size:8px}.mode-tabs{width:100%;margin-bottom:30px}.mode-tabs button{padding:12px 10px;flex:1;justify-content:center;gap:6px}.mode-tabs strong{font-size:13px}.mode-tabs small{font-size:9px;margin-left:0}.section-heading{gap:8px;align-items:flex-start}.section-heading .eyebrow{font-size:7px;letter-spacing:1.4px}h2{font-size:21px}.section-heading p:last-child{font-size:11px}.section-heading .text-button{font-size:11px;white-space:nowrap;margin-top:23px}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.lesson{padding:15px 11px;gap:8px}.lesson-number{font-size:22px;min-width:25px}.lesson strong{font-size:12px}.lesson small{font-size:9px}.lesson .lesson-meta{font-size:9px;margin-top:10px}.lesson .arrow{font-size:16px}.exam-card{padding:24px;grid-template-columns:1fr}.exam-symbol{display:none}.exam-card h3{font-size:22px}.exam-card p{font-size:12px}.exam-stats{gap:30px}.quiz-top{margin-top:20px;font-size:10px}.quiz-top .text-button{font-size:11px}.question-layout{display:block;margin:18px 0}.question-layout aside{padding:0;display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:15px}.question-layout aside .eyebrow,.question-layout aside h1,.score-box{display:none}.question-layout aside>p:last-of-type{font-size:11px;margin:0}.question-card{padding:20px}.audio-area{padding-bottom:13px}.play-button{width:65px;height:65px;margin-top:17px}.audio-badge{font-size:9px}.choose-caption{margin-top:18px}.option{font-size:13px;padding:12px}.result-card{margin:30px 0;padding:30px 20px}.result-card h1{font-size:23px}.result-score{font-size:90px}footer{margin:10px 20px 0;display:block;font-size:9px;line-height:2}footer span{display:block}.coverage{font-size:10px}.wrong-row p{font-size:14px}}
/* Reference direction: forest glass exterior, clean white study surface. */
:root{--paper:#061510;--ink:#e9f6ef;--muted:#9ab7ab;--green:#06b99b;--lime:#65efbc;--line:#d2fbe21c;--orange:#1edec1;--white:#132e2480}body{background:#071510;background-image:radial-gradient(ellipse at 20% 12%,#146f3f66 0,transparent 46%),radial-gradient(ellipse at 92% 5%,#1d616366 0,transparent 42%),radial-gradient(ellipse at 45% 65%,#57822d2b 0,transparent 50%);background-attachment:fixed;color:var(--ink)}.topbar{border-color:#b8f5ce19}.brand-icon{background:linear-gradient(145deg,#00bdd6,#00d79c);color:#052d23;box-shadow:0 0 28px #00cdb52a}.source-tag{color:#92c0ac}.source-tag i{background:#20eac6;box-shadow:0 0 11px #00ffc6}.hero .eyebrow,.section-heading .eyebrow{color:#49dcc0}.hero h1 span{color:#00e3be}.lead{color:#a6bcaf}.sound-card{background:linear-gradient(145deg,#caefce19,#6cd2b114);border:1px solid #b7f8d02b;backdrop-filter:blur(25px);box-shadow:0 12px 45px #0002,0 0 60px #4ad06915;transform:rotate(0);border-radius:27px}.sound-card:before{border-color:#d3ffdf15}.vinyl{background:radial-gradient(circle at 35% 30%,#1f5645,#071c17 70%);color:#71f4cb;border-color:#91ffcb30;outline-color:#77c5a014;box-shadow:0 0 32px #46dda01a}.sound-card>span:last-of-type{color:#d1f1dd}.sound-card small{color:#8bac9a}.wave b{background:linear-gradient(#21eac8,#147459);box-shadow:0 0 7px #26dab324}.mode-tabs{background:#0720196e;border:1px solid #b8f5ce22;backdrop-filter:blur(15px)}.mode-tabs button{color:#91b6a4}.mode-tabs button[aria-selected=true]{background:linear-gradient(120deg,#00b4c9,#00d79e);color:#032c22;box-shadow:0 0 18px #00d5a02b}.mode-tabs strong{font-weight:700}.section-heading .text-button{color:#4ee8c2}.text-button span{background:#a1e7b017;color:#85edbd}.lesson{background:linear-gradient(140deg,#5bd49213,#d8ffe807);border-color:#c9fadb1c;backdrop-filter:blur(20px);color:#e5f1e7;border-radius:18px;min-height:122px;box-shadow:0 4px 20px #0000000b}.lesson:hover:not(:disabled){border-color:#40e7ac80;background:linear-gradient(140deg,#5bd49229,#d8ffe811);box-shadow:0 0 28px #32da9012}.lesson-number{color:#77b191}.lesson small{color:#8cac9a}.lesson .lesson-meta{color:#64dba8}.lesson .arrow{color:#51c3a1}.lesson:disabled{opacity:.65}.coverage{color:#86a391;border-color:#c6f1d51a}.exam-card{background:linear-gradient(145deg,#78e8b21a,#bfd8d509);border-color:#c9fadb21;backdrop-filter:blur(22px);border-radius:24px}.exam-card p{color:#a0bbac}.pill{border-color:#47d5a140;color:#7ceac3;background:#45d19b0b}.exam-stats b{color:#e0f4e7}.exam-stats span{color:#8fb39e}.exam-symbol{background:radial-gradient(circle,#1a5b4480,#061d1860);border:1px solid #9cf0bc25;color:#72efc3;box-shadow:0 0 70px #63b94b15}.primary{background:linear-gradient(115deg,#00aecb,#00d89b);color:#032f27;box-shadow:0 6px 24px #00c6a21a;font-weight:700}.primary:hover{background:linear-gradient(115deg,#0dbcd9,#08e5a9)}.primary:disabled{opacity:.5}.secondary{border-color:#b8e9c734;color:#a1ddbe}.result-card{background:#12322680;backdrop-filter:blur(20px);border-color:#bcebc62b}.result-score{color:#49dfb1}.result-card>p{color:#96b9a5}.result-card h1{color:#e6f6e9}.result-card .eyebrow{color:#45d5ae}.wrong-row{border-color:#c6f1d51a}.wrong-row small{color:#9aba9e}.wrong-row .text-button{color:#59ddae}footer{border-color:#b5e5c317;color:#6e9b83}#toast{background:#153b2e;color:#e3f5e5;border:1px solid #b8edca2e}
body.answering{--paper:#f5f6f9;--ink:#202832;--muted:#7b8791;--green:#208c66;--line:#dfe3e8;--white:#fff;--orange:#208c66;background:#f5f6f9;color:#202832}body.answering .topbar{background:#fff;border-color:#e0e4e9;max-width:none;padding-left:max(40px,calc((100vw - 1140px)/2));padding-right:max(40px,calc((100vw - 1140px)/2))}body.answering .brand-icon{background:#208c66;color:white;box-shadow:none}body.answering .source-tag{color:#87928e}body.answering .source-tag i{background:#208c66;box-shadow:none}body.answering .quiz-top{color:#7b8791}body.answering .text-button{color:#208c66}body.answering .progress-track{background:#e1e7e4}body.answering .progress-track>div{background:#208c66}body.answering .question-layout aside .eyebrow{color:#52927b}body.answering .question-layout aside h1{color:#202832}body.answering .question-layout aside>p:last-of-type{color:#7b8791}body.answering .score-box{border-color:#dfe3e8}body.answering .score-box small{color:#7b8791}body.answering .question-card{background:#fff;border:1px solid #dfe3e8;box-shadow:0 6px 26px #172b3a05;border-radius:14px}body.answering .audio-area{border-color:#e3e6eb}body.answering .audio-badge{background:#f3f7f5;color:#49856d;border-color:#dce9e1}body.answering .play-button{background:#208c66;color:#fff;box-shadow:0 0 0 9px #f0f7f3}body.answering .play-button.playing{background:#12694c}body.answering #audio-status,body.answering .audio-controls label{color:#859089}body.answering select{color:#43765f;border-color:#dce3df;background:white}body.answering .choose-caption{color:#5e6870}body.answering .choose-caption span{color:#939ca1}body.answering .option{border:1px solid #dde2e8;background:#fff;color:#27323b;border-radius:9px}body.answering .option>span:first-child{color:#687781;border-color:#dce2e8;background:#f5f6f8}body.answering .option:hover:not(:disabled){background:#f6faf8;border-color:#64ab8c}body.answering .option.correct{border-color:#29996b;background:#edfaf3}body.answering .option.correct>span:first-child{background:#208c66;color:#fff;border-color:#208c66}body.answering .option.incorrect{border-color:#df9c91;background:#fff3f0}body.answering .option.incorrect>span:first-child{background:#fff3f0}body.answering .option .mark{color:#208c66}body.answering .option.incorrect .mark{color:#c46959}body.answering .feedback{background:#edf8f2;color:#25704e}body.answering .feedback.wrong{background:#fff5ef;color:#9d5c41}body.answering .feedback .ko{color:#222c31}body.answering .feedback .zh{color:#6a7873}body.answering .primary{background:#208c66;color:white;box-shadow:none}body.answering .primary:hover{background:#19714f}body.answering footer{border-color:#dfe3e8;color:#9ba39f}body.answering .result-card{background:#fff}body.answering #toast{background:#253c32;color:#fff}@media(max-width:760px){.lesson{min-height:112px;border-radius:14px}.sound-card{border-radius:18px}.topbar{padding:20px}body.answering .topbar{padding:18px 20px}.question-card{border-radius:10px}body.answering .question-layout{margin-top:17px}.source-tag{font-size:9px}}

.site-return{display:flex;align-items:center;gap:24px}.site-home-link{color:#97d8b6;font-size:12px;padding:9px 13px;border:1px solid #98d8ad2b;border-radius:8px}.site-home-link:hover{background:#98d8ad14}body.answering .site-home-link{color:#208c66;border-color:#dce6df;background:#f7faf8}@media(max-width:760px){.site-return{gap:9px}.site-return>.source-tag{display:none}.site-home-link{font-size:10px;padding:7px 9px}.brand{gap:8px;font-size:15px}.brand small{letter-spacing:1px;font-size:6px}}