*,:before,:after{box-sizing:border-box}:root{--canvas:#f3f5f4;--surface:#fff;--surface-muted:#f7f9f8;--surface-hover:#edf3f0;--surface-active:#e4f3ed;--border:#dce3df;--border-strong:#c8d2cc;--text:#18231f;--text-soft:#35453e;--text-muted:#5f6e67;--accent:#087a55;--accent-strong:#055c40;--accent-soft:#e2f3ec;--warm:#a6422d;--warm-soft:#fff0eb;--focus:#1268c4;--danger:#c53b32;--player-bg:#0b0d0c;--shadow:0 16px 36px #18231f17;letter-spacing:0;color:var(--text);background-color:var(--canvas);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Pretendard Variable,Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,Roboto,Noto Sans KR,sans-serif;font-weight:400;line-height:1.5}body{background:var(--canvas);min-width:320px;min-height:100dvh;margin:0}#root{min-height:100dvh}button{font:inherit}button,iframe{letter-spacing:0}::selection{color:var(--text);background:#bce8d7}.app{min-height:100dvh}.app-header{border-bottom:1px solid var(--border);background:var(--surface)}.app-header__inner{align-items:center;width:min(100%,1480px);min-height:72px;margin:0 auto;padding:.75rem 1.5rem;display:flex}.app-brand{align-items:center;gap:.75rem;min-width:0;display:flex}.app-logo{filter:drop-shadow(0 5px 10px #5c3eee33);flex:none}.app-title{color:var(--text);margin:0;font-size:1.125rem;font-weight:750;line-height:1.35}.app-main{grid-template-columns:minmax(0,1fr) 386px;align-items:start;gap:1.5rem;width:min(100%,1480px);margin:0 auto;padding:1.5rem;display:grid}.learning-stage{min-width:0}.player-section{background:var(--player-bg);box-shadow:var(--shadow);border-radius:8px;overflow:hidden}.player-wrapper{width:100%}.player-aspect{aspect-ratio:16/9;background:var(--player-bg);position:relative}.player-iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.player-loading{z-index:1;color:#cbd3cf;background:var(--player-bg);text-align:center;pointer-events:auto;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:1.5rem;display:flex;position:absolute;inset:0}.player-loading__spinner{border:2px solid #3c4541;border-top-color:#56d7a7;border-radius:50%;width:1.75rem;height:1.75rem;animation:.8s linear infinite spin}.player-loading__text{font-size:.8125rem;font-weight:550}.player-loading--error{color:#fff;pointer-events:auto;background:#111613;gap:.5rem}.player-error__icon{color:#ff927a;width:2rem;height:2rem;margin-bottom:.25rem}.player-error__title,.player-error__message{margin:0}.player-error__title{font-size:1rem;font-weight:700}.player-error__message{color:#aeb9b4;max-width:24rem;font-size:.8125rem}.player-error__retry{color:#fff;cursor:pointer;background:#222a26;border:1px solid #5b6862;border-radius:6px;justify-content:center;align-items:center;gap:.375rem;min-height:40px;margin-top:.5rem;padding:.5rem .875rem;font-size:.8125rem;font-weight:650;display:inline-flex}.player-error__retry:hover{background:#303a35}.player-error__retry svg{width:1rem;height:1rem}@keyframes spin{to{transform:rotate(360deg)}}.lesson-details{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:2rem;min-height:108px;padding:1.375rem .25rem 1.5rem;display:flex}.lesson-details__copy{min-width:0}.lesson-details__eyebrow,.lesson-details__title{margin:0}.lesson-details__eyebrow{color:var(--accent);align-items:center;gap:.375rem;font-size:.75rem;font-weight:700;display:flex}.lesson-details__eyebrow span:last-child{color:var(--text-muted)}.lesson-details__title{color:var(--text);margin-top:.375rem;font-size:1.375rem;font-weight:750;line-height:1.4}.lesson-navigation{flex:none;gap:.5rem;display:flex}.lesson-navigation__button{border:1px solid var(--border-strong);min-height:44px;color:var(--text-soft);background:var(--surface);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:.25rem;padding:.625rem .75rem;font-size:.8125rem;font-weight:650;display:inline-flex}.lesson-navigation__button:hover:not(:disabled){background:var(--surface-hover);border-color:#aabbb2}.lesson-navigation__button--next{border-color:var(--accent);color:#fff;background:var(--accent)}.lesson-navigation__button--next:hover:not(:disabled){border-color:var(--accent-strong);background:var(--accent-strong)}.lesson-navigation__button:disabled{border-color:var(--border);color:#9ba6a0;cursor:not-allowed;background:#eef1ef}.lesson-navigation__button svg{width:1.125rem;height:1.125rem}.playlist{border:1px solid var(--border);background:var(--surface);min-height:0;max-height:calc(100dvh - 7.5rem);box-shadow:var(--shadow);border-radius:8px;flex-direction:column;display:flex;position:sticky;top:1.5rem;overflow:hidden}.playlist__header{border-bottom:1px solid var(--border);flex:none;padding:1.125rem 1.25rem 1rem}.playlist__heading-row{justify-content:space-between;align-items:flex-end;gap:1rem;display:flex}.playlist__eyebrow,.playlist__heading{margin:0}.playlist__eyebrow{color:var(--warm);margin-bottom:.1875rem;font-size:.6875rem;font-weight:750}.playlist__heading{color:var(--text);align-items:center;gap:.5rem;font-size:1.0625rem;font-weight:750;display:flex}.playlist__heading svg{width:1.125rem;height:1.125rem;color:var(--accent)}.playlist__position{font-variant-numeric:tabular-nums;color:var(--text-muted);flex:none;font-size:.8125rem}.playlist__position strong{color:var(--accent);font-size:1rem}.playlist__progress{background:#e5eae7;border-radius:2px;height:4px;margin-top:.875rem;overflow:hidden}.playlist__progress span{border-radius:inherit;background:var(--accent);height:100%;transition:width .18s;display:block}.playlist__chapters{overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0;padding:.375rem .5rem .75rem;overflow-y:auto}.playlist-chapter{padding-top:.875rem}.playlist-chapter__heading{color:var(--text-muted);align-items:center;gap:.5rem;margin:0 .5rem .4375rem;font-size:.75rem;font-weight:700;display:flex}.playlist-chapter__heading span{color:var(--warm);background:var(--warm-soft);border-radius:3px;padding:.125rem .375rem;font-size:.6875rem}.playlist__list{margin:0;padding:0;list-style:none}.playlist__list>li+li{margin-top:.1875rem}.playlist-item{width:100%;min-height:78px;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-left:3px solid #0000;border-radius:4px;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.5rem;display:grid;position:relative}.playlist-item:hover{background:var(--surface-hover)}.playlist-item--active{border-left-color:var(--accent);background:var(--surface-active)}.playlist-item--active:hover{background:var(--surface-active)}.playlist-item__thumb{aspect-ratio:16/9;border:1px solid var(--border);background:#e5ebe8;border-radius:4px;position:relative;overflow:hidden}.playlist-item__thumb img{object-fit:cover;width:100%;height:100%;display:block}.playlist-item__thumb-placeholder{width:100%;height:100%;color:var(--accent);background:var(--accent-soft);justify-content:center;align-items:center;display:flex}.playlist-item__thumb-placeholder svg{width:1.125rem;height:1.125rem}.playlist-item__playing-icon{color:#fff;background:#05281c8a;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.playlist-item__playing-icon svg{filter:drop-shadow(0 1px 3px #00000059);width:1.375rem;height:1.375rem}.playlist-item__info{flex-direction:column;align-items:flex-start;min-width:0;display:flex}.playlist-item__episode{color:var(--accent);margin-bottom:.125rem;font-size:.6875rem;font-weight:750}.playlist-item__title{-webkit-line-clamp:2;color:var(--text);-webkit-box-orient:vertical;font-size:.8125rem;font-weight:650;line-height:1.4;display:-webkit-box;overflow:hidden}.playlist-item__description{max-width:100%;color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;margin-top:.125rem;font-size:.75rem;overflow:hidden}.playlist-item__status{color:var(--accent);align-items:center;gap:.25rem;margin-top:.25rem;font-size:.6875rem;font-weight:700;display:inline-flex}.playlist-item__status svg{width:.6875rem;height:.6875rem}.playlist-item__duration{font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap;align-self:end;padding-bottom:.125rem;font-size:.6875rem}.lesson-navigation__button:focus-visible,.playlist-item:focus-visible,.player-error__retry:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.setup-notice{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;min-height:100dvh;padding:2rem;display:flex}.setup-notice__logo{margin-bottom:.5rem}.setup-notice h1{margin:0;font-size:1.25rem}.setup-notice p{max-width:28rem;color:var(--text-muted);margin:0;line-height:1.7}.setup-notice code{color:var(--accent-strong);background:var(--accent-soft);border-radius:3px;padding:.125rem .375rem;font-size:.875em}@media (width<=1100px){.app-main{grid-template-columns:minmax(0,1fr) 350px}.playlist-item{grid-template-columns:92px minmax(0,1fr) auto;gap:.625rem}}@media (width<=959px){html,body,#root{height:100%;overflow:hidden}.app{flex-direction:column;height:100dvh;max-height:100dvh;display:flex;overflow:hidden}.app-header{flex:none}.app-main{flex-direction:column;flex:1;align-items:stretch;width:100%;max-width:900px;min-height:0;display:flex;overflow:hidden}.learning-stage{flex:none}.playlist{flex:auto;min-height:0;max-height:none;position:relative;top:auto}.playlist__chapters{-webkit-overflow-scrolling:touch;overflow-y:auto}}@media (width<=639px){.app-header__inner{min-height:64px;padding:.625rem 1rem}.app-logo{width:36px;height:36px}.app-title{font-size:1rem}.app-main{gap:0;padding:0}.player-section{box-shadow:none;border-radius:0}.lesson-details{background:var(--surface);gap:1rem;min-height:0;padding:1.125rem 1rem 1.25rem}.lesson-details__title{font-size:1.125rem}.lesson-navigation__button{min-width:44px;padding:.625rem}.lesson-navigation__button span{display:none}.playlist{box-shadow:none;border-left:0;border-right:0;border-radius:0;margin-top:.75rem}.playlist__header{padding:1rem}.playlist__chapters{padding-left:.5rem;padding-right:.5rem}.playlist-item{grid-template-columns:96px minmax(0,1fr) auto}}@media (width<=390px){.lesson-details{align-items:flex-end}.lesson-details__eyebrow{flex-wrap:wrap}.playlist-item{grid-template-columns:88px minmax(0,1fr) auto}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}