:root{--navy:#102655;--text:#142b5b;--muted:#61779e;--blue:#1764ef;--green:#1b9b54;--line:#d7e5fa;--soft:#eff6ff;--shadow:0 8px 24px rgba(47,90,152,.045)}
*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--text);background:#f3f9ff}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #77aaff;outline-offset:2px}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.layout{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}.sidebar{background:white;border-right:1px solid #e5effb;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:35px 11px 23px}.brand{display:flex;align-items:center;gap:13px;padding:0 20px;margin-bottom:43px;white-space:nowrap;color:#102653;font-size:24px;font-weight:800;letter-spacing:-1px}.brand-leaf{width:34px;height:43px;background:linear-gradient(130deg,#28b35b,#0d9150);clip-path:polygon(7% 95%,9% 51%,29% 18%,95% 0,90% 52%,57% 82%);position:relative;flex:none}.brand-leaf:after{content:"";position:absolute;left:12px;top:12px;width:1px;height:40px;background:white;transform:rotate(30deg)}.nav{display:grid;gap:9px}.nav button{height:62px;width:100%;display:flex;align-items:center;gap:23px;text-align:left;border:0;background:transparent;border-radius:12px;color:#152c59;font-size:20px;font-weight:650;padding:0 21px}.nav button.active{background:#e8f2ff;color:#0961e8}.nav button:hover{background:#f0f7ff}.nav svg{width:28px;height:28px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}.sidebar-foot{margin-top:auto;display:flex;align-items:end;gap:10px;padding:0 25px;color:#7187a5;font-size:15px;line-height:1.6}.sidebar-foot .brand-leaf{width:30px;height:39px;background:#8ba7b3}.main{padding:24px 28px 28px;min-width:0}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0 10px 20px;min-height:85px}.page-head h1{margin:0 0 4px;color:#102650;font-size:38px;line-height:1.22;letter-spacing:-1.5px}.page-head p{margin:0;color:#536b99;font-size:20px}.page-tools{display:flex;align-items:center;gap:16px;white-space:nowrap;color:#344c79}.page-tools .user-badge{height:48px;width:48px;display:inline-grid;place-items:center;border-radius:50%;background:#d9eaff;color:#1764ef;font-weight:700}.date-badge{border:1px solid var(--line);border-radius:13px;background:#fff;padding:14px 20px;font-size:17px}.panel{background:#fff;border:1px solid #dce9fb;border-radius:16px;box-shadow:var(--shadow)}.panel-pad{padding:24px}.panel h2,.panel h3{margin:0}.grid{display:grid;gap:18px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.row{display:flex;align-items:center;gap:14px}.between{justify-content:space-between}.muted{color:var(--muted)}.small{font-size:13px}.big{font-size:26px;font-weight:750}.blue{color:var(--blue)}.green{color:var(--green)}.orange{color:#c46618}.strong{font-weight:750}.headline{font-size:23px;font-weight:750;letter-spacing:-.5px}.spaced{margin-top:18px}.subtle{background:#f4f8ff;border-radius:14px}.btn{border:1px solid #bcd3f7;color:#174b9d;background:#fff;border-radius:12px;padding:11px 19px;font-weight:700;min-height:44px}.btn:hover{background:#f1f7ff}.btn.blue-fill{background:#1764ef;border-color:#1764ef;color:#fff}.btn.green-fill{background:#1f9c52;border-color:#1f9c52;color:#fff}.btn.dark{background:#16346e;border-color:#16346e;color:white}.btn.wide{width:100%}.btn.large{padding:17px 29px;font-size:20px}.pill{border-radius:99px;padding:8px 16px;display:inline-flex;align-items:center;gap:5px;background:#eaf3ff;color:#1764ef;font-weight:700}.pill.green{background:#ddf7e8;color:#108545}.pill.orange{background:#fff1e4;color:#ba621f}.pill.gray{background:#f0f3f8;color:#687b9c}.progress{height:10px;background:#dce7f5;border-radius:99px;overflow:hidden;min-width:60px}.progress>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#1d63ec,#62a0ff);width:0}.progress.green>i{background:#25ac60}.field{border:1px solid #c6daf6;background:#fff;border-radius:11px;padding:12px 15px;min-height:48px;color:var(--text);width:100%}.field::placeholder{color:#8ba1c1}.field:focus{border-color:#1764ef}.error{border:1px solid #f1b8b8;color:#c03a3a;background:#fff2f2;border-radius:10px;padding:11px 14px;margin:10px 0}.empty{padding:34px;text-align:center;color:#6d83a5}.section-title{font-size:21px;font-weight:750;margin:0 0 16px}.word-image{object-fit:contain;background:white}.image-frame{display:grid;place-items:center;background:#fff;border-radius:14px;overflow:hidden}.image-frame img{object-fit:contain;width:100%;height:100%}.card-link{border:0;text-align:left;cursor:pointer}.card-link:hover{border-color:#9bc3fb;box-shadow:0 10px 24px #1c63e612}.stat{border:1px solid var(--line);border-radius:13px;padding:18px;background:#fff}.stat b{font-size:32px;display:block;margin-top:8px}.stat span{color:#5b7195}.ring{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) var(--p),#e7effa 0);position:relative;font-size:20px;font-weight:750}.ring:after{content:"";position:absolute;background:white;border-radius:50%;inset:12px}.ring span{position:relative;z-index:1}.tabs{display:flex;background:#edf5ff;border-radius:14px;padding:5px;gap:5px}.tabs button{border:0;background:transparent;color:#38577f;border-radius:12px;padding:10px 18px;font-weight:750;flex:1}.tabs button.active{background:#1764ef;color:#fff}.page-grid{display:grid;gap:18px}.word-card{min-width:0}.word-card .image-frame{height:180px}.word-card h3{font-size:22px;margin:8px 0 2px}.word-card p{margin:0;color:#667b9c}.word-card .row{margin-top:12px}.word-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.letter-tile{border:1px solid #d5e5fb;border-radius:14px;background:#f4f9ff;display:flex;align-items:center;gap:15px;padding:12px;text-align:left}.letter-tile img{width:64px;height:64px;object-fit:contain}.letter-tile b{font-size:38px;color:#102653}.letter-tile.selected{border:2px solid var(--blue)}.answer-choice{display:flex;width:100%;align-items:center;text-align:left;gap:12px;background:#fff;border:1px solid #bfd5f5;padding:17px;border-radius:13px;color:var(--text);font-size:18px;font-weight:650}.answer-choice:hover,.answer-choice.selected{border:2px solid var(--blue);background:#edf6ff}.feedback{font-size:19px;font-weight:700;padding:14px;border-radius:12px;margin-top:14px}.feedback.good{color:#11884a;background:#e8f8ee}.feedback.bad{color:#c04c26;background:#fff0e9}.table-wrap{overflow:auto}.data-table{border-collapse:collapse;width:100%;font-size:15px}.data-table th,.data-table td{padding:12px 13px;border-bottom:1px solid #e3edfa;text-align:left;white-space:nowrap}.data-table th{background:#f2f7ff;color:#334d79}.data-table tr:hover td{background:#fafcff}.steps{display:flex;align-items:center;justify-content:space-around;gap:10px;padding:18px}.steps span{display:flex;gap:8px;align-items:center;font-weight:700}.steps b{width:35px;height:35px;display:inline-grid;place-items:center;background:#e5edf7;border-radius:50%}.steps .on b{background:var(--blue);color:#fff}.option-card{border:1px solid var(--line);border-radius:13px;padding:18px;background:white}.option-card.selected{border:2px solid var(--blue);background:#f3f8ff}.quote{color:#728aad;text-align:center;margin:25px}.toast{position:fixed;right:30px;bottom:30px;background:#14376d;color:white;border-radius:12px;padding:14px 22px;box-shadow:0 12px 30px #12284a35;z-index:100}.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eaf5ff,#fff 50%,#edfbf2)}.login-panel{width:min(520px,calc(100vw - 30px));padding:40px}.login-panel h1{font-size:32px}.login-panel .brand{padding:0;margin-bottom:20px}.login-panel .field{margin-top:12px}.role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:16px}.learning-art{width:100%;height:min(42vh,430px);object-fit:contain}.center{text-align:center}.hidden{display:none!important}
@media(max-width:1100px){.layout{grid-template-columns:76px minmax(0,1fr)}.sidebar{padding-left:7px;padding-right:7px}.brand{font-size:0;padding:0 12px}.nav button{font-size:0;padding:0;justify-content:center}.nav button svg{width:26px}.sidebar-foot{display:none}.main{padding:20px}.g3,.word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.layout{display:block}.sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:20;height:66px;padding:4px;background:white;border-top:1px solid var(--line)}.sidebar .brand,.sidebar-foot{display:none}.nav{display:flex;justify-content:space-around;gap:0}.nav button{width:auto;height:55px;padding:0 8px}.main{padding:20px 13px 85px}.page-head{margin:0 2px 15px;display:block;min-height:auto}.page-head h1{font-size:29px}.page-head p{font-size:16px}.page-tools{margin-top:12px;justify-content:flex-start}.g2,.g3,.g4,.word-grid{grid-template-columns:1fr}.panel-pad{padding:18px}.word-card .image-frame{height:240px}}
.grid.g3.spaced>section:first-child>.row.center{flex-wrap:wrap;max-height:150px;overflow:auto}.grid.g3.spaced>section:first-child>.row.center .btn{min-width:33px}
.letter-art{width:230px;aspect-ratio:265/300;background-size:598.5% 330.7%;background-position:22.7% 36.1%;background-repeat:no-repeat;background-color:white;margin:auto}.letter-art-small{width:105px}
.letter-lesson{max-width:1500px;margin:auto}.letter-lesson-top{border-bottom:1px solid var(--line);gap:20px}.letter-lesson-top .steps{flex:1;max-width:950px}.letter-lesson-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(350px,.85fr);min-height:570px}.letter-lesson-visual{border-right:1px solid var(--line);padding:24px 24px 10px;min-width:0}.letter-origin-art{width:100%;max-width:800px;aspect-ratio:800/520;margin:10px auto 0;background-color:white;background-repeat:no-repeat;background-size:200% 180%;background-position:35% 43%}.letter-lesson-visual>.muted{margin:0 0 10px}.letter-lesson-info{padding:35px 36px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}.letter-lesson-heading{display:flex;align-items:baseline;gap:15px}.letter-lesson-heading strong{font-size:98px;line-height:1;color:#112a57}.letter-lesson-heading span{font-size:29px;font-weight:750}.letter-lesson-info h2{font-size:38px;margin:18px 0 10px}.letter-lesson-info p{font-size:19px;line-height:1.55}.letter-lesson-info>.btn{margin-top:18px}.letter-nuance-tags{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}.letter-nuance-tags span{padding:10px 16px;border-radius:99px;background:#eaf8f0;color:#168b50;font-weight:750}.letter-quiz{width:100%;display:grid;gap:9px;margin-top:12px}.letter-lesson-info>.row{width:100%;flex-wrap:wrap}.letter-lesson-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0 4px;color:#617692;font-weight:700}@media(max-width:950px){.letter-lesson-body{grid-template-columns:1fr}.letter-lesson-visual{border-right:0;border-bottom:1px solid var(--line)}.letter-lesson-info{padding:25px 12px}.letter-lesson-top{flex-wrap:wrap}.letter-lesson-top .steps{width:100%}}@media(max-width:700px){.letter-lesson-top .steps{padding:10px 0;gap:4px}.letter-lesson-top .steps span{font-size:12px;gap:4px}.letter-lesson-top .steps b{width:27px;height:27px}.letter-lesson-visual{padding:15px 0}.letter-lesson-heading strong{font-size:70px}.letter-lesson-heading span{font-size:23px}.letter-lesson-info h2{font-size:30px}.letter-lesson-info p{font-size:16px}.letter-lesson-footer{padding-top:13px}}
@media(max-width:1400px){#onboardingForm>.grid{grid-template-columns:1fr!important}}
.rain-stage{background:linear-gradient(#edf8ff,#f7fbff 65%,#e3f4ee);position:relative;overflow:hidden}.rain-stage:before{content:"";position:absolute;inset:70px 0 180px;pointer-events:none;opacity:.35;background-image:radial-gradient(ellipse 3px 12px at 10% 15%,#64a7ee 99%,transparent),radial-gradient(ellipse 3px 12px at 24% 38%,#64a7ee 99%,transparent),radial-gradient(ellipse 3px 12px at 45% 15%,#64a7ee 99%,transparent),radial-gradient(ellipse 3px 12px at 69% 45%,#64a7ee 99%,transparent),radial-gradient(ellipse 3px 12px at 81% 12%,#64a7ee 99%,transparent);background-size:280px 250px}.rain-stage>*{position:relative;z-index:1}.rain-word-area{height:430px;display:flex;align-items:center;justify-content:center;gap:15px}.falling-word{display:inline-block;font-size:54px;font-weight:750;transform:rotate(-3deg);animation:word-fall 12s linear forwards;box-shadow:0 12px 22px #4c8cd929}.rain-options{margin:auto;max-width:1000px}.rain-options .option-card{background:#fff;min-height:85px;box-shadow:0 7px 18px #4c8cd91c}@keyframes word-fall{from{translate:0 -125px}to{translate:0 105px}}
.drill-selection{grid-template-columns:repeat(7,minmax(0,1fr))}@media(max-width:1400px){.drill-selection{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:700px){.drill-selection{grid-template-columns:repeat(2,minmax(0,1fr))}}
.book-intro{padding:23px 30px 12px;overflow:hidden}.book-intro h2{font-size:23px;letter-spacing:-.6px;margin:0 0 5px}.book-intro p{font-size:17px;color:#546e9b;margin:0}.book-intro .brand-leaf{width:42px;height:56px;margin-right:12px}.book-journey{display:block;width:100%;height:115px;object-fit:fill;margin-top:19px}.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.book-card{appearance:none;width:100%;min-height:226px;padding:16px;text-align:left;color:var(--text);cursor:pointer}.book-card:hover{border-color:#82b2f9;box-shadow:0 9px 20px #326dea1c}.book-number{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:38px;font-size:18px;font-weight:800;border-radius:50px;color:#10428d;background:#e3edff}.book-color-0{background:#eaf0f6;color:#243958}.book-color-1{background:#e7f1ff;color:#2061ac}.book-color-2{background:#e6f9ec;color:#168146}.book-color-3{background:#fff1d2;color:#ad6a11}.book-color-4{background:#eeeaff;color:#7656b1}.book-color-5{background:#ffecee;color:#b64c5c}.book-status{border-radius:50px;background:#e9eef7;color:#5e7394;font-size:14px;font-weight:750;padding:8px 15px}.book-status.started{background:#e1f3ff;color:#1867be}.book-card-main{display:flex;align-items:center;gap:16px;margin:11px 0 13px;min-height:130px}.book-cover{width:112px;height:130px;flex:none;border-radius:8px;box-shadow:3px 6px 8px #60779b38;display:grid;place-items:center;overflow:hidden;border-left:6px solid #ffffffaa}.book-cover img{width:90%;height:90%;object-fit:contain;mix-blend-mode:multiply}.book-card-copy{min-width:0}.book-card-copy h2{font-size:20px;line-height:1.25;margin:0 0 9px;letter-spacing:-.5px}.book-card-copy p{color:#5c7297;font-size:14px;margin:0 0 10px}.book-count{font-size:18px;font-weight:750}.book-count span{font-size:14px;font-weight:500;color:#7185a5}.book-open{display:block;color:#3468b4;font-size:13px;margin-top:10px}.book-footer{padding:14px 24px;margin-top:12px;background:#e9f5ff;border-color:#d8ebff}.book-footer p{margin:3px 0 0;color:#5d7294}@media(max-width:1150px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.book-grid{grid-template-columns:1fr}.book-intro{padding:18px}.book-intro>.row{align-items:flex-start;flex-direction:column;gap:12px}.book-journey{height:85px}.book-footer{align-items:flex-start;flex-direction:column;gap:15px}.book-card-main{gap:12px}}
.formula-layout{display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:14px}.formula-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.formula-card{min-height:285px;padding:18px 13px;text-align:center;color:var(--text);cursor:pointer}.formula-card.selected{border:2px solid var(--blue)}.formula-card .pill{display:flex;width:max-content;margin:0 auto}.formula-symbol{height:90px;display:grid;place-items:center;font-size:52px;font-weight:800;color:#184c9b}.formula-card h2{font-size:19px;margin:0 0 10px}.formula-card p{font-size:15px;line-height:1.45;color:#60779a;min-height:65px}.formula-card b{color:var(--blue)}.formula-example{margin-top:14px;padding:25px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;min-height:300px}.formula-example>div{border-right:1px solid var(--line);padding-right:20px}.formula-example h2{font-size:43px;margin:14px 0 3px}.formula-example h3{font-size:23px;margin:0 0 8px}.formula-example p{margin:8px 0}.formula-example img{width:145px;height:90px;object-fit:contain}.formula-detail{padding:22px 8px}.formula-detail h3{font-size:24px;margin:10px 0}.formula-detail p{line-height:1.6;color:#64799a}.formula-visual{display:flex;gap:15px;align-items:center;min-height:115px;flex-wrap:wrap}.formula-visual>.letter-art{width:85px;margin:0}.formula-visual>b{font-size:70px;color:#1460d7}.formula-visual>img{width:135px;height:110px;object-fit:contain}.formula-part{min-width:58px;padding:17px;border-radius:13px;background:#e9f3ff;color:#174a9d;font-size:29px;font-weight:750;text-align:center}.formula-part.green{background:#e1f8e9}.formula-aside h2{font-size:20px;margin:0 0 8px}.formula-aside p{font-size:14px;color:#697c9f}.formula-letters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;max-height:395px;overflow:auto}.formula-letters .btn{text-align:left;padding:6px 9px;min-height:35px;display:flex;align-items:center;gap:6px}.formula-letters small{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1250px){.formula-layout{grid-template-columns:1fr}.formula-aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.formula-aside .spaced{margin-top:0}}@media(max-width:850px){.formula-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.formula-example{grid-template-columns:1fr}.formula-example>div{border-right:0;border-bottom:1px solid var(--line);padding:0 0 12px}.formula-aside{grid-template-columns:1fr}}
@media(max-width:700px){.explore-grid{grid-template-columns:1fr!important}.explore-grid .letter-rack{height:auto!important;min-height:250px;flex-wrap:wrap;align-content:center}.explore-grid .letter-rack .letter-tile{width:70px!important;height:88px!important;font-size:44px!important}.explore-grid>section{min-width:0}}
@media(max-width:700px){.reveal-letters{flex-wrap:wrap;gap:6px!important}.reveal-letters .letter-tile{width:56px!important;min-height:62px;padding:6px!important;font-size:32px!important}.panel .row.between:has(>div>h2){align-items:flex-start;flex-wrap:wrap}}