/* Shared reading design for all five lesson families. */
html:has(body.df-lesson){height:auto!important;overflow-x:clip!important;overflow-y:auto!important;scroll-padding-top:110px;color-scheme:light}
body.df-lesson{--bg:#f5f7fb;--card:#fff;--card2:#f2f5fb;--bg-card:#fff;--bg-card2:#f2f5fb;--text:#21324c;--sub:#5e708a;--text-sub:#5e708a;--muted:#708198;--text-muted:#708198;--border:#dfe6f0;--border2:#d4dfed;--gold:#2459e0;--gold-light:#4378ed;--gold-dark:#1c49bc;--green:#237a60;--blue:#2459e0;--cyan:#167489;--purple:#6951b7;--red:#ba3d4b;background:#f5f7fb!important;color:#21324c!important;font-family:Pretendard,Inter,-apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif;line-height:1.85;height:auto!important;min-height:100vh;overflow:visible!important;margin:0}
.df-lesson *{box-sizing:border-box}.df-lesson :is(a,button,input,select,textarea):focus-visible{outline:3px solid #8aaaf0;outline-offset:3px}.df-lesson a{color:#2459e0}.df-lesson .dev-banner{display:none!important}.df-lesson>.header,.df-lesson>.topbar{display:none!important}
.df-lesson-header{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px max(24px,calc((100vw - 1200px)/2));background:rgba(255,255,255,.97);border-bottom:1px solid #dfe6f0;backdrop-filter:blur(10px)}.df-lesson-brand{display:flex;flex-shrink:0}.df-lesson-brand img{width:180px;height:39px}.df-lesson-header nav{display:flex;align-items:center;gap:23px;font-size:13px;font-weight:700}.df-lesson-header a{text-decoration:none;color:#536883;white-space:nowrap}.df-lesson-header .df-my-learning{background:#2459e0;color:white;border-radius:7px;padding:9px 16px}.df-reading-track{position:absolute;bottom:-1px;left:0;right:0;height:3px;background:transparent}.df-reading-track span{height:100%;width:0;display:block;background:#2459e0}
.df-lesson :is(.content,.lesson-wrap){width:calc(100% - 48px)!important;max-width:960px!important;margin:32px auto 70px!important;padding:48px 52px 100px!important;background:#fff;border:1px solid #e0e7f1;border-radius:18px;box-shadow:0 8px 40px #28466d05;min-width:0}
.df-lesson :is(.lesson-hero,.hero-banner){background:#f2f6ff!important;border:1px solid #dfE8fa!important;border-radius:14px;padding:30px!important;margin-bottom:28px!important;color:#21324c!important;box-shadow:none!important}
.df-lesson :is(h1,.lesson-title){font-size:clamp(27px,3.3vw,40px)!important;line-height:1.45!important;font-weight:850!important;letter-spacing:-.045em!important;color:#182c4c!important;background:none!important;-webkit-text-fill-color:#182c4c!important;word-break:keep-all;overflow-wrap:anywhere;margin:16px 0!important}
.df-lesson :is(h2,.section-title){font-size:clamp(22px,2.5vw,28px)!important;color:#213653!important;line-height:1.5;letter-spacing:-.035em;padding-top:16px;scroll-margin-top:110px}.df-lesson h3{font-size:20px!important;color:#2a4162!important;line-height:1.6;scroll-margin-top:110px}.df-lesson :is(p,li){font-size:16px;line-height:1.95}.df-lesson :is(.lesson-desc,.lesson-hero .desc){font-size:16px!important;color:#61718a!important;line-height:1.9!important}.df-lesson :is(.lesson-badge,.stage-tag){display:inline-block;background:#eaf1ff!important;color:#2459e0!important;border:1px solid #d6e4fa!important;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:750}.df-lesson .lesson-hero .meta{display:flex;flex-wrap:wrap;gap:10px;color:#61718a;font-size:12px}.df-lesson :is(.lesson-social-info,.interaction-bar){gap:10px;color:#61718a;flex-wrap:wrap}.df-lesson .social-stat{background:#f2f6fc;color:#61718a;border:1px solid #dfe7f3;border-radius:8px;padding:8px 12px}
.df-lesson :is(.section,.info-box,.step,.step-card,.use-case,.feature-card,.quiz-section,.quiz-box,.v-stat,.v-card,.v-step,.v-compare-card,.v-acc-item,.v-flow-item,.v-timeline-item,.mission-box,.task-box,.difficulty-wrap){background:#fff!important;border-color:#dfe6f0!important;color:#314762;box-shadow:none!important;border-radius:12px}.df-lesson .section{padding:24px!important;margin:24px 0!important}.df-lesson :is(.v-stat-num,.v-stat-icon,.quiz-title,.use-case-title,.step-title){color:#2459e0!important}.df-lesson :is(.v-stat-label,.use-case-desc,.v-card-desc){color:#61718a!important}.df-lesson :is(.info-box.tip,.tip-box,.success-box){background:#edf8f2!important;border:1px solid #d2e9db!important;color:#286c54!important}.df-lesson :is(.info-box.note,.note-box){background:#eff5ff!important;border:1px solid #d6e5fb!important;color:#345c93!important}.df-lesson :is(.info-box.warn,.warning-box){background:#fff8e9!important;border:1px solid #eadcba!important;color:#8a671b!important}.df-lesson :is(.info-box.danger,.danger-box){background:#fff1f2!important;border:1px solid #efcfd4!important;color:#a03d4a!important}
.df-lesson :is(pre,.code-block){background:#f1f5fa!important;color:#253c59!important;border:1px solid #dae3ee!important;border-radius:10px;padding:22px!important;font-family:'SFMono-Regular',Consolas,monospace;font-size:13px!important;line-height:1.85;overflow-x:auto;max-width:100%;tab-size:2}.df-lesson .code-block pre{border:0!important;padding:6px 0!important;margin:0!important}.df-lesson pre code{background:transparent!important;color:inherit!important;padding:0!important}.df-lesson :not(pre)>code{background:#edf2fa;color:#32557b;border-radius:4px;padding:3px 6px;font-size:.9em;overflow-wrap:anywhere}.df-lesson .code-block .lang{color:#627b9b}.df-lesson :is(.copy-btn,.df-code-copy){background:#fff!important;color:#2459e0!important;border:1px solid #d2dff2!important;border-radius:6px;padding:6px 12px;font-size:11px;cursor:pointer}.df-lesson .df-code-copy{display:block;margin:0 0 8px auto}
.df-lesson table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.8;background:#fff}.df-lesson th{background:#edf3fd!important;color:#29466e!important;font-weight:750}.df-lesson :is(td,th){padding:13px 16px;border:1px solid #dfe7f1!important;vertical-align:top}.df-lesson tr:hover{background:#f8faff}.df-table-scroll{overflow-x:auto;max-width:100%;margin:20px 0;border-radius:9px;scrollbar-width:thin}.df-table-scroll table{margin:0!important;min-width:480px}.df-lesson :is(img,video,iframe,svg){max-width:100%}.df-lesson img{height:auto}.df-lesson :is(.quiz-opt,.interact-btn,.diff-btn,.share-btn){background:#f6f8fc!important;color:#3d587a!important;border:1px solid #dbe4f0!important;box-shadow:none!important}.df-lesson .quiz-opt:hover{background:#edf3ff!important;border-color:#91b0e9!important}.df-lesson .quiz-opt.correct{background:#e8f5ed!important;border-color:#78b69a!important;color:#236448!important}.df-lesson .quiz-opt.wrong{background:#fceff1!important;border-color:#d899a1!important;color:#a1404b!important}.df-lesson :is(.interact-btn.active,.diff-btn.active){background:#e9f0ff!important;color:#2459e0!important;border-color:#95b3eb!important}.df-lesson :is(.complete-btn,.completion-btn,.btn-complete,.finish-btn){background:#2459e0!important;color:#fff!important;border-color:#2459e0!important;box-shadow:none!important}.df-lesson .lesson-nav{display:flex;gap:14px;margin:30px 0}.df-lesson .lesson-nav a{background:#f3f7ff!important;color:#2459e0!important;border:1px solid #d8e4f5!important;border-radius:10px;padding:16px;flex:1;min-width:0;overflow-wrap:anywhere;text-decoration:none}
.df-lesson-toc{padding:18px 22px;background:#f7f9fd;border:1px solid #dfe7f3;border-radius:12px;margin:24px 0}.df-lesson-toc summary{font-size:14px;font-weight:750;color:#294b78;cursor:pointer}.df-lesson-toc ol{padding-left:20px;margin:14px 0 0;columns:2;column-gap:30px}.df-lesson-toc li{font-size:13px;line-height:1.7;margin:7px 0;break-inside:avoid}.df-lesson-toc a{text-decoration:none;color:#536b8c}.df-lesson-toc a:hover{color:#2459e0;text-decoration:underline}.df-lesson .df-lesson-surface{background-color:#f4f7fc!important;background-image:none!important;border-color:#dfe6f0!important}.df-lesson .df-lesson-ink{color:#314762!important;-webkit-text-fill-color:#314762!important}.df-lesson .df-lesson-accent{color:#2459e0!important}.df-lesson [class*="modal"]{--bg:#fff;--card:#fff;--bg-card:#fff;--text:#21324c}
@media(max-width:700px){.df-lesson-header{padding:12px 16px;flex-wrap:wrap;gap:12px}.df-lesson-brand img{width:156px;height:34px}.df-lesson-header nav{width:100%;gap:15px;font-size:12px;justify-content:space-between}.df-lesson-header .df-my-learning{padding:6px 10px}.df-lesson :is(.content,.lesson-wrap){width:100%!important;margin:0 0 40px!important;padding:24px 18px 110px!important;border:0;border-radius:0}.df-lesson :is(.lesson-hero,.hero-banner){padding:22px 18px!important}.df-lesson h1{font-size:28px!important}.df-lesson :is(p,li){font-size:15px}.df-lesson .section{padding:18px 14px!important}.df-lesson :is(.v-stats,.v-card-grid,.v-compare,.use-case-grid,.v-grid){grid-template-columns:1fr!important}.df-lesson-toc ol{columns:1}.df-lesson-toc{padding:16px}.df-lesson :is(pre,.code-block){padding:17px 13px!important;font-size:12px!important}.df-lesson :is(td,th){padding:11px;font-size:13px}.df-lesson .lesson-nav{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.df-lesson *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:700px){.df-lesson .v-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.df-lesson .v-stat{padding:18px 10px!important}}
body.df-lesson{display:block!important}.df-lesson :is(.lesson-footer,.completion-area,.complete-section){background:#fff!important;color:#314762!important;border-color:#dfe6f0!important}