@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Serif+KR:wght@500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');
:root{--ink:#102f3e;--blue:#2c5d7b;--sky:#cce9ef;--paper:#fbfaf5;--cream:#f3efe5;--line:#d9d2c5;--lav:#eee9f5;--coral:#b6534a;--green:#54756d;--white:#fff;--shadow:0 18px 60px rgba(31,47,54,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Noto Sans KR',sans-serif}.site-header{height:72px;padding:0 max(24px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(251,250,245,.94);position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;letter-spacing:.18em;font:700 12px 'DM Sans'}.brand span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--ink);color:white;font:700 17px 'Playfair Display'}.course-tag,.eyebrow{font:700 11px 'DM Sans';letter-spacing:.2em;color:var(--blue)}
.catalog-shell{max-width:1180px;margin:auto;padding:72px 24px 100px}.catalog-hero{min-height:530px;display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:72px}.catalog-hero h1{font:600 clamp(56px,7vw,92px)/.94 'Playfair Display';margin:24px 0 28px;letter-spacing:-.045em}.catalog-hero h1 em{color:var(--blue)}.catalog-hero p:not(.eyebrow){max-width:540px;line-height:1.9;color:#5e6e73}.catalog-hero img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px 54px 2px 54px;box-shadow:var(--shadow)}.hero-stats{display:flex;gap:38px;margin-top:34px}.hero-stats b{font:600 28px 'Playfair Display'}.hero-stats small{display:block;font:600 10px 'DM Sans';letter-spacing:.12em;color:#687980;margin-top:4px}.catalog-head{display:flex;justify-content:space-between;align-items:end;margin:72px 0 30px}.catalog-head h2{font:600 46px 'Noto Serif KR';margin:10px 0 0}.catalog-head>p{font-size:13px;line-height:1.8;color:#6c797c;text-align:right}.catalog-grid{display:grid;gap:22px}.catalog-card{display:grid;grid-template-columns:380px 1fr;background:var(--paper);border:1px solid var(--line);border-radius:0 28px 0 28px;overflow:hidden;min-height:238px;transition:.25s;box-shadow:0 5px 24px rgba(26,44,51,.04)}.catalog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.catalog-card img{width:100%;height:100%;object-fit:cover}.catalog-copy{padding:34px 38px;display:grid;align-content:center;position:relative}.unit{font:700 10px 'DM Sans';letter-spacing:.18em;color:var(--blue)}.catalog-copy h3{font:600 31px 'Playfair Display';margin:10px 0}.catalog-copy p{margin:0;color:#66767a;line-height:1.7;font-size:14px}.catalog-copy .grammar{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font:600 12px 'DM Sans';color:var(--blue)}.enter{position:absolute;right:28px;top:28px;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink);text-decoration:none}.done{color:var(--green);font-weight:700}
.lesson-shell{max-width:1120px;margin:0 auto;padding:48px 22px 100px}.lesson-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.back,.pager a{color:var(--ink);text-decoration:none;font-size:13px}.pager{display:flex;gap:10px}.pager a{padding:9px 14px;border:1px solid var(--line);border-radius:999px}.lesson-hero{display:grid;grid-template-columns:1.2fr .8fr;background:var(--paper);border:1px solid var(--line);border-radius:0 36px 0 36px;overflow:hidden;box-shadow:var(--shadow)}.lesson-hero img{width:100%;height:100%;min-height:470px;object-fit:cover}.lesson-intro{padding:55px 48px;display:flex;flex-direction:column;justify-content:center}.lesson-intro h1{font:600 clamp(42px,5vw,67px)/1.03 'Playfair Display';margin:16px 0 20px}.lesson-intro .lead{font:600 23px/1.55 'Noto Serif KR';margin:0 0 28px}.mission{background:var(--lav);padding:18px 20px;border-radius:14px}.mission small{font:700 9px 'DM Sans';letter-spacing:.16em;color:#65528c}.mission b{display:block;margin:5px 0;font:600 18px 'DM Sans'}.mission span{font-size:12px;color:#657075}.route{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 42px}.route a{padding:10px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:#68777b;background:var(--paper);font:600 11px 'DM Sans'}.route a:hover{border-color:var(--blue);color:var(--blue)}
.section{background:var(--paper);border:1px solid var(--line);border-radius:0 28px 0 28px;margin:26px 0;padding:44px 46px}.section-title{display:flex;gap:18px;align-items:flex-start;margin-bottom:28px}.section-no{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:var(--sky);font:700 13px 'DM Sans'}.section-title small{font:700 10px 'DM Sans';letter-spacing:.18em;color:var(--blue)}.section-title h2{font:600 clamp(28px,4vw,43px) 'Noto Serif KR';margin:5px 0 0}.guide{color:#6c797c;font-size:13px;line-height:1.8;margin:-12px 0 26px 60px}.vocab-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.vocab-card{min-height:118px;border:1px solid var(--line);border-radius:16px;padding:22px;position:relative;background:#fff}.vocab-card b{font:600 24px 'Playfair Display'}.vocab-card p{margin:9px 40px 0 0;color:#657579;font-size:13px}.speak-word{position:absolute;right:16px;top:16px;width:36px;height:36px;border:0;border-radius:50%;background:var(--lav);cursor:pointer;color:var(--blue)}
.reader-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:28px}.story-image{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0 22px 0 22px}.story-panel h3{font:600 36px 'Playfair Display';margin:0 0 18px}.story-text{font:500 18px/1.88 'DM Sans';color:#263f49}.story-text p{margin:0 0 7px}.story-text mark{background:linear-gradient(transparent 55%,#f2cdbf 55%);color:inherit;padding:0 2px}.focus-sentence{margin-top:20px;padding:17px 19px;border:1px solid #cfc4df;border-left:5px solid #765a9d;border-radius:0 14px 14px 0;background:var(--lav)}.focus-sentence span{display:block;margin-bottom:7px;font:700 9px 'DM Sans';letter-spacing:.15em;color:#65528c}.focus-sentence strong{display:block;font:600 17px/1.6 'DM Sans';color:var(--ink)}.audio-box{display:flex;gap:12px;align-items:center;margin-top:20px;padding:12px 14px;background:var(--lav);border-radius:14px}.audio-box audio{width:100%;height:38px}.story-note{margin-top:18px;padding:17px 19px;border-left:3px solid var(--coral);background:#f6f2ea;font-size:13px;line-height:1.7}
.diagram-lab{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:25px}.diagram-chunks{display:grid;gap:13px}.chunk-row{display:grid;grid-template-columns:1fr 180px;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}.chunk-row b{font:600 17px 'DM Sans'}.chunk-row select{padding:11px;border:1px solid var(--line);border-radius:10px;background:white}.source-diagram{width:100%;max-height:320px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.feedback{min-height:24px;margin:14px 0 0;font-weight:600;color:var(--coral)}.feedback.good{color:var(--green)}button.primary{border:0;border-radius:11px;padding:13px 20px;background:var(--blue);color:white;font:700 12px 'Noto Sans KR';cursor:pointer}button.ghost{border:1px solid var(--line);border-radius:11px;padding:12px 18px;background:#fff;color:var(--ink);font-weight:600;cursor:pointer}
.quiz-list{display:grid;gap:19px}.quiz{border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:15px;padding:22px;background:#fff}.quiz h3{margin:0 0 15px;font:700 18px/1.55 'Noto Serif KR'}.options{display:grid;gap:9px}.option{display:flex;text-align:left;gap:10px;align-items:flex-start;padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);cursor:pointer;line-height:1.55}.option:hover{border-color:var(--blue)}.option.correct{border-color:var(--green);background:#edf5f1}.option.wrong{border-color:var(--coral);background:#fff0ed}.option span{font:700 12px 'DM Sans';color:var(--blue);padding-top:2px}
.grammar-list{display:grid;gap:18px}.grammar-card{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff}.grammar-card h3{font-size:16px;margin:0 0 8px}.korean{font:600 18px 'Noto Serif KR';margin:10px 0}.tokens{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0}.token{padding:10px 13px;border:1px solid #c8bed8;border-radius:10px;background:var(--lav);cursor:pointer}.answer-line,input.answer,textarea{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:11px;background:white;font:500 16px 'DM Sans';color:var(--ink)}.answer-line{min-height:50px;margin:10px 0}.grammar-actions{display:flex;gap:8px;margin-top:11px}.model{display:none;margin-top:14px;padding:14px;border-radius:10px;background:#edf3f6;font:500 14px 'DM Sans'}.model.show{display:block}
.writing-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.writing-prompt{background:var(--lav);border-radius:16px;padding:24px}.writing-prompt b{font:700 10px 'DM Sans';letter-spacing:.12em;color:#65528c}.writing-prompt h3{font:600 22px/1.5 'Noto Serif KR';margin:10px 0}.writing-prompt p{font-size:13px;line-height:1.7;color:#657075}.writing-area textarea{min-height:175px;resize:vertical;line-height:1.7}.counter{font-size:11px;color:#748084;margin-top:6px}.speak-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px}.target-sentence{font:600 28px/1.5 'Playfair Display';padding:26px;background:var(--ink);color:white;border-radius:0 22px 0 22px}.record-box{border:1px solid var(--line);border-radius:16px;padding:22px}.record-actions{display:flex;gap:9px;align-items:center}.record{background:var(--coral)!important}.transcript{min-height:72px;margin-top:14px;padding:13px;border:1px dashed var(--line);border-radius:10px;color:#657579}.score{font:700 18px 'DM Sans';margin-top:12px}.complete{display:flex;justify-content:space-between;align-items:center;padding:26px 30px;background:var(--ink);color:white;border-radius:0 22px 0 22px;margin-top:30px}.complete button{background:var(--sky);color:var(--ink)}
@media(max-width:800px){.course-tag{display:none}.catalog-shell{padding-top:36px}.catalog-hero,.lesson-hero,.reader-layout,.diagram-lab,.writing-grid,.speak-layout{grid-template-columns:1fr}.catalog-hero{min-height:0}.catalog-hero img{order:-1}.catalog-card{grid-template-columns:130px 1fr;min-height:190px}.catalog-copy{padding:22px}.catalog-copy h3{font-size:24px}.catalog-copy p{display:none}.enter{right:16px;top:16px}.catalog-head>p{display:none}.lesson-intro{padding:35px 26px}.lesson-hero img{min-height:280px}.section{padding:32px 22px}.guide{margin-left:0}.vocab-grid{grid-template-columns:1fr}.section-title h2{font-size:29px}.chunk-row{grid-template-columns:1fr}.source-diagram{max-height:420px}.hero-stats{gap:20px}.story-text{font-size:17px}}