/* DEVFOIL — bright editorial learning system */
:root{--df-blue:#2459e0;--df-ink:#182641;--df-muted:#617089;--df-border:#dfe6f0}
body:has(#homeView.active .df-public){background:#f8faff!important;color:var(--df-ink);color-scheme:light}
body:has(#homeView.active .df-public) .app{background:#fff!important;max-width:none!important}
body:has(#homeView.active .df-public) .header,body:has(#homeView.active .df-public) .status-bar{display:none!important}
.df-public{max-width:1440px!important;margin:auto!important;background:#fff!important;color:var(--df-ink)!important;font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif;line-height:1.7}
.df-public *{box-sizing:border-box}.df-public a{text-decoration:none}.df-public button,.df-public input,.df-public select{font:inherit}
.df-site-nav{display:flex;justify-content:space-between;align-items:center;padding:26px 5%;gap:20px;border-bottom:1px solid #e9edf5;background:#fff}
.df-wordmark{font-size:27px;font-weight:900;color:#152540!important;letter-spacing:-1.5px;white-space:nowrap}.df-wordmark span{display:block;font-size:9px;letter-spacing:2px;color:#71809a;line-height:1.2}
.df-site-nav>div{display:flex;align-items:center;gap:28px}.df-site-nav>div>a{font-weight:700;font-size:14px;color:#354762}.df-site-nav .df-nav-start{background:#2459e0;color:#fff;padding:11px 20px;border-radius:7px}
.df-public .df-hero{padding:78px 5% 70px!important;background:linear-gradient(130deg,#f3f7ff,#fff 70%)!important;gap:48px!important;align-items:center}
.df-public .df-kicker{color:#2459e0!important;font-size:12px;letter-spacing:.08em;font-weight:800}
.df-public .df-hero h1{color:#182641!important;font-size:clamp(32px,3.4vw,52px)!important;line-height:1.28!important;letter-spacing:-.05em!important}
.df-public .df-hero h1 strong{color:#2459e0!important;background:none!important;-webkit-text-fill-color:#2459e0!important}
.df-public .df-hero p{color:#617089!important;font-size:17px!important;line-height:1.85!important;max-width:580px}
.df-public .df-hero-media{transform:none!important;border:0!important;border-radius:18px!important;box-shadow:0 20px 60px #24477b18!important;overflow:hidden}
.df-public .df-hero-media img{aspect-ratio:4/3;object-fit:cover}.df-public .df-hero-media figcaption{background:#fff!important;color:#182641!important;padding:20px!important;position:static!important}.df-public .df-hero-media figcaption span{color:#617089!important}
.df-public .df-btn{border-radius:7px!important;min-height:48px;padding:12px 22px!important;box-shadow:none!important;font-weight:700}.df-public .df-btn-primary{background:#2459e0!important;color:white!important;border:1px solid #2459e0!important}.df-public .df-btn-ghost{background:#fff!important;color:#2459e0!important;border:1px solid #cfdaef!important}.df-public .df-btn-ghost:hover{background:#edf3ff!important;border-color:#2459e0!important}
.df-public .df-trust-row{color:#617089!important;font-size:12px!important}.df-public .df-proof{background:#fff!important;border-block:1px solid #e8edf5;padding:28px 5%!important}.df-public .df-proof b{color:#2459e0!important}.df-public .df-proof span{color:#617089!important}
.df-public .df-section{padding:72px 5%!important;margin:0!important}.df-public .df-section-head{margin-bottom:32px!important}.df-public .df-section-head>span{color:#2459e0!important;font-size:11px;letter-spacing:.16em}.df-public h2{color:#182641!important;font-size:clamp(25px,2.7vw,36px)!important;letter-spacing:-.04em!important}.df-public h3{color:#182641!important}.df-public p{color:#617089}.df-public .df-track-grid{gap:24px!important}.df-public .df-track{background:#fff!important;border:1px solid #e2e8f0!important;border-radius:12px!important;box-shadow:0 5px 22px #25395c06!important;transition:transform .2s,border-color .2s}.df-public .df-track:hover{transform:translateY(-5px);border-color:#2459e0!important}.df-public .df-track p,.df-public .df-track li{color:#617089!important}.df-public .df-link{color:#2459e0!important}.df-public .df-track-no{color:#2459e0!important;background:#eef3ff!important}.df-public .df-track-photo{border-radius:8px!important}.df-public .df-services,.df-public .df-how{background:#f7f9fd!important}.df-public .df-service-grid article,.df-public .df-step-grid li{background:white!important;border:1px solid #e2e8f0!important;border-radius:10px!important;box-shadow:none!important}.df-public .df-service-grid article p,.df-public .df-step-grid p{color:#617089!important}.df-public .df-system{background:white!important}.df-public .df-system-panel{background:#f5f8fd!important;border:1px solid #e2e8f0!important;color:#182641!important}.df-public .df-system-list div{background:#fff!important;color:#182641!important}.df-public .df-faq details{background:#fff!important;color:#182641!important;border:1px solid #e2e8f0!important;border-radius:8px!important}.df-public .df-final-cta{background:#2459e0!important;border-radius:0!important;padding:64px 5%!important}.df-public .df-final-cta h2,.df-public .df-final-cta p{color:#fff!important}
.df-pricing{background:#f3f7ff!important}.df-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.df-plan{display:flex;flex-direction:column;background:#fff;border:1px solid #dce4f0;border-radius:12px;padding:26px 22px;position:relative}.df-plan.featured{border:2px solid #2459e0}.df-plan .df-tier{font-size:11px;color:#2459e0;letter-spacing:.12em;font-weight:800}.df-plan h3{font-size:24px;margin:8px 0}.df-plan .df-price{font-size:28px;font-weight:850;letter-spacing:-1px;color:#182641}.df-price small{font-size:12px;font-weight:500;letter-spacing:0;color:#617089}.df-plan>p{font-size:13px;min-height:48px}.df-plan ul{padding-left:18px;font-size:13px;color:#43536c;line-height:1.9;flex:1;margin:20px 0}.df-plan .df-btn{font-size:13px;padding:10px!important}.df-plan .df-contract{font-size:11px;margin-top:12px;text-align:center;color:#68758a}.df-event{display:flex;justify-content:space-between;align-items:center;gap:24px;border:1px solid #d9e4fa;background:#fff;padding:24px;border-radius:12px;margin-top:24px}.df-event strong{color:#2459e0}.df-event p{font-size:13px;margin:4px 0}.df-policy-note{font-size:12px;line-height:1.9;margin-top:20px!important}.df-footer{border-top:1px solid #e1e7f1;padding:34px 5%;color:#617089;font-size:13px}.df-footer a{color:#43536c;margin-right:18px}
body:has(#homeView.active .df-public)>footer{background:#f5f7fb!important;color:#617089!important}body:has(#homeView.active .df-public)>footer div,body:has(#homeView.active .df-public)>footer a{color:#617089!important}
.df-form{max-width:740px;margin:auto;display:grid;gap:18px}.df-form label{font-size:14px;font-weight:650;color:#263853}.df-form input:not([type=checkbox]),.df-form select,.df-form textarea{display:block;width:100%;border:1px solid #ccd6e6;border-radius:7px;background:white;color:#182641;padding:12px;margin-top:6px;min-height:48px}.df-form .df-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:400}.df-check input{margin-top:6px}.df-notice{border:1px solid #cadbf7;border-radius:8px;background:#eef5ff;color:#234a80;padding:18px;margin-bottom:24px}.df-course-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.df-course-list a{display:flex;gap:12px;align-items:center;color:#263853;border:1px solid #e2e8f0;background:#fff;padding:16px;border-radius:8px;font-size:14px}.df-course-list small{color:#2459e0;white-space:nowrap}.df-search{width:100%;max-width:680px;padding:15px 18px;border:1px solid #cad6e8;border-radius:8px;font:inherit;margin:20px 0}
@media(max-width:1100px){.df-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.df-site-nav>div{gap:16px}}
@media(max-width:600px){.df-site-nav{padding:20px;align-items:flex-start;flex-direction:column;gap:18px}.df-wordmark{font-size:25px}.df-site-nav>div{gap:14px;flex-wrap:wrap;width:100%}.df-site-nav>div>a{font-size:12px}.df-site-nav .df-nav-start{padding:8px 12px;margin-left:auto}.df-public .df-hero{padding:38px 20px!important;gap:26px!important}.df-public .df-hero h1{font-size:32px!important}.df-public .df-section{padding:44px 20px!important}.df-plan-grid{grid-template-columns:1fr}.df-plan>p{min-height:0}.df-event{align-items:flex-start;flex-direction:column}.df-course-list{grid-template-columns:1fr}.df-public .df-hero p{font-size:15px!important}}
@media(prefers-reduced-motion:reduce){.df-public *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body:has(#homeView.active .df-public){height:auto!important;min-height:100vh;overflow:auto!important}
body:has(#homeView.active .df-public) .app{height:auto!important;min-height:0!important;display:block!important}
body:has(#homeView.active .df-public) #homeView{height:auto!important;flex:none!important;overflow:visible!important;padding-bottom:0!important}
body:has(#homeView.active .df-public) .tab-bar{display:none!important}
.df-public .df-hero-media img{height:auto!important;width:100%!important;aspect-ratio:4/3!important}
body:has(#homeView.active .df-public) .sheet:not(.show){visibility:hidden;pointer-events:none}
body:has(#homeView.active .df-public) .sheet{color-scheme:light;--bg-card:#fff;--bg:#f4f7fc;--text:#182641;--text-sub:#617089;--border:#dae3ee;color:#182641}
body:has(#homeView.active .df-public) .ld-cheer-modal:not(.active){visibility:hidden;pointer-events:none}
.df-public .df-track-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.df-public .df-hero{grid-template-columns:1.15fr 1fr!important}
.df-public .df-hero h1{font-size:clamp(32px,3.05vw,45px)!important}
@media(max-width:900px){.df-public .df-hero{grid-template-columns:1fr!important}.df-public .df-track-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.df-public .df-track-grid{grid-template-columns:1fr!important}.df-public .df-hero h1{font-size:32px!important}}
/* Keep hero actions readable above legacy inline theme rules. */
body #homeView .df-public .df-hero .df-hero-actions .df-btn-primary{background:#2459e0!important;color:#fff!important;border:1px solid #2459e0!important}
body #homeView .df-public .df-hero .df-hero-actions .df-btn-ghost{background:#fff!important;color:#2459e0!important;border:1px solid #cbd8ef!important}
body #homeView .df-public .df-hero .df-trust-row,body #homeView .df-public .df-hero .df-trust-row span{color:#617089!important}
/* A welcoming learning identity and hands-on starter path. */
.df-public .df-brand{display:inline-flex;align-items:center;gap:11px;letter-spacing:-1px;flex-shrink:0}.df-brand img{width:42px;height:42px}.df-public .df-brand .df-brand-type{font-size:25px!important;font-weight:900;letter-spacing:-1.2px;color:#182641;line-height:1.2}.df-brand-type small{display:block;font-size:10px;font-weight:600;letter-spacing:.03em;color:#72819b;margin-top:5px}
.df-public .df-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;font:inherit}.df-public .df-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.df-member-welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#eff9f5;padding:22px 5%;border-bottom:1px solid #d8eee4}.df-member-welcome strong{display:block;font-size:19px;color:#193c35;margin-top:6px}.df-member-welcome p{font-size:13px;color:#53766b!important;margin:4px 0 0}.df-member-welcome a{font-size:13px;font-weight:750;color:#236650;white-space:nowrap}.df-lifetime-badge{display:inline-block;background:#daf2e7;border:1px solid #bddfce;border-radius:20px;padding:4px 10px;font-size:10px;font-weight:800;letter-spacing:.05em;color:#22644e!important}
.df-start-here{background:#fffdf8!important}.df-starter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.df-starter{display:flex;flex-direction:column;gap:8px;border:1px solid #e4e8ee;background:#fff;padding:24px;border-radius:16px;transition:transform .2s,box-shadow .2s}.df-starter:hover{transform:translateY(-4px);box-shadow:0 12px 30px #253b6210}.df-starter small{color:#71809a;font-size:12px;margin-top:8px}.df-starter h3{font-size:21px;margin:4px 0;letter-spacing:-.03em}.df-starter p{font-size:14px;line-height:1.8;margin:0 0 12px;flex:1}.df-starter b{font-size:13px;color:#2459e0}.df-starter-icon{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#edf2ff;border-radius:10px;padding:22px;color:#2459e0;font-size:38px;font-weight:900}.df-starter-icon span{font-size:11px;font-weight:700;background:#fff;padding:7px 10px;border-radius:6px}.df-starter-mint{background:#e6f5ef;color:#26715b}.df-starter-peach{background:#fff0e7;color:#c57645}
.df-learning-loop{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:26px;font-size:13px;color:#617089}.df-learning-loop span{display:flex;align-items:center;gap:8px}.df-learning-loop b{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#eaf0fb;color:#2459e0}.df-learning-loop a{color:#2459e0;font-weight:700}.df-learning-loop>a:last-child{margin-left:auto}
.df-practice-intro{background:linear-gradient(120deg,#f1f6ff,#fffdf7)}.df-practice-intro p{font-size:16px;line-height:1.9}.df-practice-progress{max-width:700px;margin-top:28px;border:1px solid #dce5f1;padding:22px;border-radius:12px;background:#fff}.df-practice-progress strong{font-size:15px;display:block;color:#182641}.df-practice-progress progress{width:100%;height:12px;accent-color:#2459e0;margin:14px 0}.df-practice-progress span{font-size:12px;color:#617089}.df-practice-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.df-practice-grid>.df-form{margin:0;width:100%;align-content:start}.df-practice-grid button{width:fit-content}.df-practice-grid input[type=color]{width:84px;cursor:pointer}.df-exercise{border-bottom:1px solid #e4ebf5;scroll-margin-top:20px}.df-preview{width:100%;height:350px;border:1px solid #dbe4f2;border-radius:16px;background:#f5f8fc}.df-practice-hint{font-size:13px;line-height:1.9;background:#f4f7fc;border-radius:9px;padding:17px}.df-code-details{margin-top:20px;font-size:13px;max-width:100%;color:#42556f}.df-code-details summary{cursor:pointer;font-weight:700}.df-code-details pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#edf2f9;padding:16px;border-radius:8px;line-height:1.7;font-size:12px}.df-calculation{border:1px solid #d8e7df;border-radius:16px;background:#eff8f3;padding:36px;display:flex;flex-direction:column;justify-content:center;overflow-wrap:anywhere}.df-calculation>span{font-size:13px;color:#527866}.df-calculation output{font-size:clamp(30px,4vw,50px);font-weight:850;color:#23694f;letter-spacing:-.04em}.df-calculation small{font-size:12px;color:#718079}.df-todo-panel{border:1px solid #e1e7ef;border-radius:16px;padding:28px;background:#f9fbfe}.df-todo-panel ul{padding:0;list-style:none}.df-todo-panel li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #e1e7ef}.df-todo-panel label{display:flex;gap:10px;align-items:center;font-size:14px;overflow-wrap:anywhere;min-width:0}.df-todo-panel li button{flex-shrink:0;border:1px solid #dbe3ef;background:#fff;border-radius:5px;padding:5px 9px;color:#617089;cursor:pointer}.df-todo-panel input{accent-color:#2459e0}.df-todo-panel p{font-size:13px}.df-next-step{background:#f3f7ff}.df-public .df-btn.completed{background:#e5f5ec!important;color:#22694f!important;border-color:#c5e1d2!important}
@media(max-width:1100px){.df-site-nav>div{gap:13px}.df-site-nav>div>a{font-size:12px}.df-public .df-brand .df-brand-type{font-size:22px!important}}
@media(max-width:750px){.df-practice-grid{grid-template-columns:1fr;gap:24px}.df-starter-grid{grid-template-columns:1fr}.df-member-welcome{flex-direction:column;align-items:flex-start;padding:20px}.df-learning-loop{gap:14px}.df-learning-loop>a:last-child{margin-left:0}.df-site-nav{flex-wrap:wrap}.df-preview{height:330px}}
body:has(#homeView.active .df-public) #splash,body:has(#homeView.active .df-public) .threads-floating-btn{display:none!important}
@media(max-width:600px){.df-member-welcome strong{font-size:17px}.df-member-welcome p{font-size:12px}.df-member-welcome{gap:12px}.df-public .df-brand .df-brand-type{font-size:24px!important}}
/* Public pages scroll at the document, not inside the legacy app viewport. */
html:has(#homeView.active .df-public){height:auto!important;min-height:100%;overflow-x:clip!important;overflow-y:auto!important;touch-action:pan-y;scroll-padding-top:24px}
html:has(#homeView.active .df-public) body{position:static!important;height:auto!important;min-height:100vh;overflow:visible!important;touch-action:pan-y}
html:has(#homeView.active .df-public) #homeView{touch-action:pan-y;overscroll-behavior:auto}
/* Small, non-blocking brand entrance; the page stays interactive throughout. */
.df-brand img{animation:df-brand-enter .35s ease-out both}@keyframes df-brand-enter{from{opacity:.35;transform:translateY(4px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.df-brand img{animation:none!important}}
.splash{background:#f7faff!important;pointer-events:none!important;animation:df-loader-expire .3s .8s forwards}.splash-logo{-webkit-text-fill-color:initial!important;background:none!important}.splash-sub{color:#617089!important;letter-spacing:.08em!important}@keyframes df-loader-expire{to{opacity:0;visibility:hidden}}