:root{--ink:#33413b;--muted:#6b7872;--accent:#4eae21;--soft:#eff9e8;--paper:#fff;--white:#fff;--line:#e3e9e0;--green:#78ce38;--green-dark:#4b981d;--blue:#147bb3;--blue-soft:#edf8ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);margin:0;font-family:Noto Sans KR,Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:1rem;line-height:1.6}button,select{font:inherit;color:inherit}button{cursor:pointer;transition:background .15s,border-color .15s,transform .12s,box-shadow .12s}button,a{-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.5}:is(button:focus-visible,a:focus-visible,select:focus-visible){outline:3px solid var(--blue);outline-offset:4px}svg{flex:none;width:20px;height:20px}.site-shell{width:min(1240px,100% - 64px);padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));margin:auto}.page-utilities{z-index:20;position:fixed;bottom:24px;right:24px}.back-to-top{background:var(--soft);color:#37751c;border:2px solid #a6d77f;border-radius:14px;justify-content:center;align-items:center;min-height:44px;padding:10px 18px;font-size:.9375rem;font-weight:750;text-decoration:none;display:inline-flex;box-shadow:0 3px #a6d77f}.back-to-top:hover{background:#e0f3ce}.back-to-top:active{box-shadow:none;transform:translateY(2px)}.site-masthead{border-bottom:2px solid var(--line);justify-content:space-between;align-items:center;gap:16px;min-height:100px;margin-bottom:32px;display:flex}.hangul-tiles{pointer-events:none;-webkit-user-select:none;user-select:none;gap:9px;padding:8px 4px;display:flex}.hangul-tiles span{color:#448025;background:#ebf8df;border:2px solid #c4e6a9;border-radius:12px;place-items:center;width:38px;height:40px;font-size:1.15rem;font-weight:800;line-height:1;display:grid;transform:rotate(-8deg);box-shadow:0 3px #c4e6a9}.hangul-tiles span:nth-child(2){color:#25749f;background:#e6f5ff;border-color:#bcddec;transform:translateY(-4px)rotate(5deg);box-shadow:0 3px #bcddec}.hangul-tiles span:nth-child(3){color:#8b691d;background:#fff6d7;border-color:#f1df9a;transform:rotate(9deg);box-shadow:0 3px #f1df9a}.site-wordmark{color:#419a20;white-space:nowrap;padding:10px 0;text-decoration:none}.brand-name{letter-spacing:-.055em;font-family:ui-rounded,Arial Rounded MT Bold,system-ui,sans-serif;font-size:1.9rem;font-weight:850;line-height:1.3}.brand-name strong{color:var(--ink);font-weight:850}.study-workspace{grid-template-columns:236px minmax(0,1fr);gap:40px;display:grid}.lesson-sidebar{border-right:2px solid var(--line);align-self:start;padding-right:24px}.sidebar-label{justify-content:space-between;align-items:center;margin:0 0 12px;font-size:.875rem;font-weight:600;display:flex}.sidebar-label span{color:var(--muted);font-size:.8125rem;font-weight:400}.unit-nav{gap:10px;display:grid}.unit-nav button{text-align:left;background:0 0;border:2px solid #0000;border-radius:16px;grid-template-columns:36px minmax(0,1fr);gap:0 10px;padding:12px;display:grid}.unit-nav strong{width:36px;height:38px;color:var(--muted);background:#f0f3ed;border-radius:12px;grid-row:1/3;align-self:center;place-items:center;font-size:.875rem;font-weight:800;display:grid}.unit-nav span{word-break:keep-all;font-size:1rem;font-weight:600}.unit-nav small{color:var(--muted);font-size:.875rem}.unit-nav button:hover,.lesson-nav button:hover{background:var(--soft)}.unit-nav button.active{background:var(--soft);border-color:#9ed96c;box-shadow:0 3px #d3eabf}.unit-nav button.active strong{color:#285913;background:#caedac}.lesson-label{margin-top:30px}.lesson-nav{gap:8px;display:grid}.lesson-nav button{text-align:left;background:0 0;border:2px solid #0000;border-radius:14px;align-items:center;gap:12px;min-height:48px;padding:10px;font-size:.875rem;font-weight:650;display:flex}.lesson-nav b{color:var(--muted);flex:none;font-weight:750}.lesson-nav button.active{background:var(--blue-soft);color:#126b9e;border-color:#bbdef3}.lesson-nav button.active b{color:var(--blue);font-weight:800}.lesson-content{min-width:0}.lesson-intro{background:var(--soft);border:2px solid #d9edcb;border-radius:22px;margin-bottom:24px;padding:24px 28px;scroll-margin-top:24px;box-shadow:0 4px #e4f0da}.eyebrow{color:var(--muted);flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 12px;font-size:.875rem;display:flex}.eyebrow>span{color:#3e751f;letter-spacing:.04em;font-size:.8125rem;font-weight:800}.title-row{align-items:center;gap:14px;display:flex}.lesson-intro h1{letter-spacing:-.035em;word-break:keep-all;overflow-wrap:anywhere;margin:0;font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;line-height:1.5}.lesson-intro>div>p:last-child{color:var(--muted);margin:8px 0 0;font-size:1rem}.title-play{color:#42851f;background:#fff;border:2px solid #bad69f;border-radius:16px;flex:none;place-items:center;width:48px;height:48px;display:grid;box-shadow:0 3px #bad69f}.title-play:hover{background:var(--soft)}.title-play[aria-pressed=true]{background:var(--soft);border-color:var(--accent);color:#38711b}.main-tabs{border:0;gap:12px;display:flex}.main-tabs button{border:2px solid var(--line);text-align:left;box-shadow:0 3px 0 var(--line);background:#fff;border-radius:16px;flex:1;align-items:center;gap:10px;padding:15px 16px;display:flex}.main-tabs button>span{width:30px;height:32px;color:var(--muted);background:#f1f4ef;border-radius:10px;flex:none;place-items:center;font-size:.8125rem;font-weight:800;display:grid}.main-tabs button>.tab-symbol{background:#f2f8ed;width:40px;height:42px;font-size:1.45rem;line-height:1}.main-tabs button:nth-child(2)>.tab-symbol{background:#eaf5ff}.main-tabs button:nth-child(3)>.tab-symbol{background:#fff5d9}.main-tabs button div{gap:3px;display:grid}.main-tabs button strong{font-size:1.0625rem;font-weight:750}.main-tabs button small{color:var(--muted);font-size:.8125rem}.main-tabs button.active{background:var(--soft);border-color:#a6d77f;box-shadow:0 3px #a6d77f}.main-tabs button.active>span{color:#38731b;background:#d3efbd}.main-tabs button.active strong{color:#37751c;font-weight:800}.main-tabs button:hover strong{color:#000}.study-panel{padding:30px 0 0}.panel-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;display:flex}.panel-toolbar h2{margin:0;font-size:1.125rem;font-weight:800}.speed-control{flex-wrap:wrap;align-items:center;gap:2px;max-width:100%;display:flex}.speed-control>span{color:var(--muted);padding-right:10px;font-size:.875rem}.speed-control button{background:0 0;border:2px solid #0000;border-radius:11px;min-height:40px;padding:6px 11px;font-size:.875rem;font-weight:700}.speed-control button:hover{background:var(--soft)}.speed-control button.active{background:var(--blue-soft);color:#126b9e;border-color:#b8dcef}.playback-status{color:var(--muted);justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:.875rem;display:flex}.playback-status>span{overflow-wrap:anywhere}.playback-status button{border:2px solid var(--line);background:#fff;border-radius:12px;flex:none;min-height:44px;padding:8px 14px}.playback-status.is-idle{margin-top:0}.audio-error{color:#a13737}.word-follow-controls{background:#f7faf4;border:2px solid #eaf0e4;border-radius:18px;flex-wrap:wrap;align-items:center;gap:18px;margin:22px 0;padding:18px;display:flex}.word-follow-controls .track-actions{border:0;margin:0;padding:0}.word-follow-controls label{color:var(--muted);align-items:center;gap:10px;font-size:.875rem;display:flex}select{border:2px solid var(--line);background:#fff;border-radius:12px;max-width:100%;min-height:44px;padding:10px 12px;font-size:.875rem}.track-actions{flex-wrap:wrap;gap:10px;padding:0 0 22px;display:flex}.track-actions button{border:2px solid var(--line);min-height:46px;box-shadow:0 3px 0 var(--line);color:var(--blue);background:#fff;border-radius:13px;justify-content:center;align-items:center;gap:7px;padding:10px 15px;font-size:.875rem;font-weight:750;display:flex}.track-actions button:hover{background:var(--blue-soft);border-color:#b8dcef}.track-actions .primary-action{background:var(--green);color:#234d10;border-color:var(--green);box-shadow:0 4px 0 var(--green-dark);padding-inline:20px;font-weight:850}.track-actions .primary-action:hover{background:#88da46;border-color:#88da46}.track-actions button:active,.title-play:active,.main-tabs button:active{box-shadow:none;transform:translateY(3px)}.track-actions svg{width:17px;height:17px}.dialogue-list{gap:14px;display:grid}.dialogue-line{text-align:left;border:2px solid var(--line);width:100%;box-shadow:0 3px 0 var(--line);background:#fff;border-radius:18px;grid-template-columns:32px minmax(0,1fr) 40px;gap:4px 14px;padding:22px 20px;display:grid}.line-number{width:30px;height:30px;color:var(--muted);background:#f2f5ef;border-radius:10px;grid-row:1/3;align-self:start;place-items:center;font-size:.8125rem;font-weight:750;display:grid}.speaker{color:var(--muted);grid-area:1/2;font-size:.875rem;font-weight:500}.line-copy{gap:5px;min-width:0;display:grid}.dialogue-line .line-copy{grid-area:2/2}.line-copy strong{letter-spacing:-.02em;word-break:keep-all;overflow-wrap:anywhere;font-size:1.6rem;font-weight:600;line-height:1.65}.line-copy small{color:var(--muted);font-size:1rem;line-height:1.65}.play-circle,.word-play{background:var(--blue-soft);width:38px;height:38px;color:var(--blue);border:2px solid #cae5f4;border-radius:13px;flex:none;place-items:center;display:grid}.play-circle{grid-area:1/3/3;align-self:center}.dialogue-line:hover,.word-card:hover,.grammar-sentence:hover{background:#f8fbf5;border-color:#c1d8ad}.dialogue-line.playing{background:var(--soft);border-color:#95cc6c;box-shadow:0 3px #95cc6c}.playing .play-circle,.playing .word-play{background:var(--blue);border-color:var(--blue);color:#fff}.dialogue-line,.word-card,.grammar-sentence{scroll-margin-block:32px}.vocabulary-scope{flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;font-size:.875rem;display:flex}.vocabulary-scope label{color:var(--muted)}.vocabulary-lesson-title{border-bottom:1px solid var(--line);margin:24px 0 0;padding:12px 0;font-size:1rem;font-weight:600}.vocab-group{padding:16px 0 24px}.vocab-group>header{color:var(--muted);align-items:baseline;gap:8px;margin-bottom:12px;font-size:.8125rem;display:flex}.vocab-group>header strong{color:var(--ink);font-size:.875rem;font-weight:500}.vocab-group>header small{margin-left:auto;font-size:.8125rem}.word-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.word-card{border:2px solid var(--line);min-width:0;min-height:116px;box-shadow:0 3px 0 var(--line);text-align:left;background:#fff;border-radius:18px;justify-content:space-between;align-items:center;gap:16px;padding:18px;display:flex}.word-card>span:first-child{gap:6px;min-width:0;display:grid}.word-card strong{word-break:keep-all;overflow-wrap:anywhere;font-size:1.75rem;font-weight:650;line-height:1.6}.word-card small{color:var(--muted);font-size:1.125rem;line-height:1.6}.word-play svg{width:18px;height:18px}.word-card.playing{background:var(--soft);border-color:#95cc6c;box-shadow:0 3px #95cc6c}.helper-note{color:var(--muted);margin:20px 0;font-size:.875rem;line-height:1.8}.grammar-group{border-top:1px solid var(--line);margin-top:28px;padding-top:22px}.grammar-group>header{justify-content:space-between;align-items:center;gap:12px;display:flex}.grammar-group h3{color:#4e6e96;margin:0;font-size:1.3rem;font-weight:750}.grammar-group>header>span{color:var(--muted);flex:none;font-size:.8125rem}.grammar-group>p{color:var(--muted);font-size:1rem;line-height:1.9}.grammar-example{border:2px solid var(--line);box-shadow:0 3px 0 var(--line);border-radius:18px;margin-top:16px;overflow:hidden}.grammar-sentence{text-align:left;background:#fff;border:0;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:18px;display:flex}.grammar-sentence+.grammar-sentence{border-top:1px solid var(--line)}.grammar-sentence.playing{background:var(--soft)}footer{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:48px;padding-top:20px;font-size:.8125rem;display:flex}.contact-link{min-height:44px;color:var(--ink);flex-wrap:wrap;align-items:center;gap:8px;font-size:.875rem;text-decoration:none;display:inline-flex}.contact-link>span{color:var(--muted)}.contact-link:hover{text-underline-offset:4px;text-decoration:underline}@media (min-width:1100px){.lesson-sidebar{position:sticky;top:24px}}@media (max-width:1100px){.site-shell{width:calc(100% - 48px)}.study-workspace{grid-template-columns:208px minmax(0,1fr);gap:24px}.lesson-sidebar{padding-right:16px}.main-tabs{gap:10px}.main-tabs button{padding:12px}.main-tabs button>span{display:none}}@media (max-width:760px){.site-shell{width:calc(100% - 36px)}.page-utilities{padding:8px 18px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff;justify-content:flex-end;display:flex;bottom:0;left:0;right:0}.site-masthead{min-height:78px;margin-bottom:20px}.brand-name{font-size:1.7rem}.hangul-tiles{gap:5px}.hangul-tiles span{border-radius:9px;width:28px;height:31px;font-size:.9rem}.study-workspace{display:block}.lesson-sidebar{border:0;padding-right:0}.sidebar-label{display:none}.unit-nav{scrollbar-width:thin;scrollbar-color:#ddd transparent;gap:8px;padding-bottom:5px;display:flex;overflow-x:auto}.unit-nav button{border-color:var(--line);flex:0 0 155px;grid-template-columns:30px minmax(0,1fr);gap:0 8px;padding:10px}.unit-nav strong{width:30px;height:34px}.unit-nav span{font-size:.9375rem}.unit-nav small{font-size:.8125rem}.unit-nav button.active{background:var(--soft);color:var(--ink);border-color:#9ed96c}.unit-nav button.active strong{color:#285913}.unit-nav button.active small{color:#4c7037}.lesson-nav{scrollbar-width:thin;scrollbar-color:#ddd transparent;gap:6px;margin:10px 0 24px;padding-bottom:5px;display:flex;overflow-x:auto}.lesson-nav button{flex:none;max-width:90%;padding:8px 10px;font-size:.875rem}.lesson-nav button.active{background:var(--blue-soft);border-color:#bbdef3}.lesson-intro{padding:20px 18px}.lesson-intro h1{font-size:1.75rem}.eyebrow{gap:10px;margin-bottom:10px;font-size:.8125rem}.title-row{gap:10px}.main-tabs{gap:8px}.main-tabs button{border-radius:14px;flex:1;min-width:0;padding:12px 10px}.main-tabs button>.tab-symbol{width:30px;height:32px;font-size:1.2rem;display:grid}.main-tabs button{flex-direction:column;align-items:flex-start;gap:8px}.main-tabs button small{font-size:.75rem}.study-panel{padding-top:22px}.panel-toolbar{gap:14px}.speed-control>span{padding-right:6px}.speed-control button{min-height:44px;padding:6px 10px}.word-follow-controls{gap:14px;padding:14px}.word-follow-controls .track-actions,.track-actions .primary-action{width:100%}.dialogue-view>.track-actions button{flex:1}.dialogue-line{grid-template-columns:minmax(0,1fr) 38px;gap:4px 10px;padding:18px 14px}.line-number{display:none}.speaker,.dialogue-line .line-copy{grid-column:1}.play-circle{grid-column:2}.line-copy strong{font-size:1.4rem}.word-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.word-card{flex-direction:column;align-items:stretch;gap:12px;min-height:156px;padding:14px 12px}.word-card>span:first-child{gap:6px}.word-card strong{font-size:1.6rem;line-height:1.6}.word-card small{font-size:1.0625rem;line-height:1.6}.word-card .word-play{align-self:flex-end;margin-top:auto}.grammar-sentence{padding:16px 12px}.grammar-group h3{font-size:1.2rem}footer{gap:4px;margin-top:36px}}@media (max-width:360px){.site-shell{width:calc(100% - 28px)}.speed-control button{padding-inline:8px}.main-tabs button small{font-size:.75rem}.brand-name{font-size:1.5rem}.hangul-tiles span{width:24px;height:28px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important}}