:root{--surface:#f8f9fb;--surface-container-lowest:#fff;--surface-container-low:#f2f4f6;--surface-container:#eceef0;--surface-container-high:#e6e8ea;--on-surface:#191c1e;--on-surface-variant:#4d4634;--outline:#7f7662;--outline-variant:#d0c6ae;--primary:#725c00;--on-primary:#fff;--primary-container:#ffd646;--on-primary-container:#735d00;--secondary:#26667a;--secondary-container:#aae6fe;--tertiary:#006b59;--tertiary-container:#79eed1;--error:#ba1a1a;--warm-orange:#ff9f43;--soft-pink:#ff8a8a;--deep-text:#2c2c2c;--shadow-soft:0 18px 48px -24px #26667a47, 0 8px 24px -18px #00000024;--shadow-button:0 5px 0 #725c00;--radius-card:24px;--radius-pill:999px;--container:1200px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--surface);color:var(--on-surface);margin:0;font-family:Pretendard,Be Vietnam Pro,Apple SD Gothic Neo,Noto Sans KR,system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.page-shell{flex-direction:column;min-height:100vh;display:flex}.container{width:min(100% - 40px, var(--container));margin-inline:auto}.site-header{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffe0;border-bottom:1px solid #191c1e14;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:32px;height:76px;display:flex}.brand{align-items:center;gap:10px;font-size:22px;font-weight:900;display:inline-flex}.brand-mark{object-fit:contain;border-radius:10px;width:auto;height:45px}.nav{color:var(--deep-text);align-items:center;gap:38px;font-weight:700;display:flex}.nav a{border-bottom:4px solid #0000;padding:9px 4px}.nav a.active{color:var(--primary);border-color:var(--primary)}.menu-toggle{display:none}.button{border-radius:var(--radius-pill);background:var(--primary-container);color:#5c4800;min-height:50px;box-shadow:var(--shadow-button);cursor:pointer;border:0;justify-content:center;align-items:center;gap:8px;padding:0 24px;font-weight:900;transition:transform .12s,box-shadow .12s;display:inline-flex}.button:hover{transform:translateY(2px);box-shadow:0 3px #725c00}.button.dark{background:var(--primary);color:#fff}.button.secondary{background:var(--secondary-container);color:#004d61;box-shadow:0 5px #26667a}.button.ghost{color:var(--primary);border:2px solid var(--primary);background:#fff}.hero{text-align:center;background:radial-gradient(circle at 12% 18%,#ffffff80,#0000 42%),radial-gradient(circle at 88% 8%,#ff9f4359,#0000 45%),linear-gradient(#ffe9a3 0%,#ffd646 58%,#ffc93c 100%);padding:64px 0 84px}.eyebrow{border-radius:var(--radius-pill);border:2px solid var(--primary);color:#5b4900;background:#fff;align-items:center;gap:6px;padding:8px 16px;font-weight:800;display:inline-flex;box-shadow:0 3px #725c00}.hero h1{color:#6a5400;letter-spacing:-.04em;max-width:780px;margin:28px auto 16px;font-size:clamp(36px,6vw,58px);line-height:1.12}.hero p{color:#5c4800c7;max-width:580px;margin:0 auto 30px;font-size:19px;line-height:1.7}.section{padding:74px 0}.section.gradient-sky{background:linear-gradient(#f8fdff 0%,#e2f5fe 55%,#cfeefd 100%)}.section.gradient-mint{background:linear-gradient(#f4fcf9 0%,#e0f7ef 55%,#cff2e6 100%)}.section-title{text-align:center;margin-bottom:34px}.section-title h2{letter-spacing:-.04em;margin:0 0 12px;font-size:clamp(30px,4vw,42px)}.section-title p{color:var(--on-surface-variant);margin:0}.grid{gap:24px;display:grid}.grid.categories{grid-template-columns:repeat(6,1fr)}.grid.cards-3{grid-template-columns:repeat(3,1fr)}.grid.cards-4{grid-template-columns:repeat(4,1fr)}.grid.cards-2{grid-template-columns:repeat(2,1fr)}.card{border-radius:var(--radius-card);box-shadow:var(--shadow-soft);background:#fff;border:1px solid #191c1e12}.category-card{text-align:center;place-items:center;gap:12px;min-height:142px;padding:28px 18px;font-weight:900;display:grid}.icon-bubble{background:var(--secondary-container);width:58px;height:58px;color:var(--secondary);border-radius:22px;place-items:center;font-size:28px;display:grid;box-shadow:inset 0 -4px #26667a29}.content-card{flex-direction:column;min-height:378px;display:flex;overflow:hidden}.content-visual{place-items:center;min-height:162px;font-size:42px;display:grid;position:relative;overflow:hidden}.content-visual:after{content:"";opacity:.22;background-image:radial-gradient(#0000001f 1px,#0000 1px);background-size:16px 16px;position:absolute;inset:0}.tone-blue{color:#1f6679;background:#aee8ff}.tone-mint{color:#006b59;background:#79eed1}.tone-yellow{color:#725c00;background:#ffd646}.tone-pink{color:#ba1a1a;background:#ffdad6}.content-body{flex-direction:column;flex:1;gap:16px;padding:26px;display:flex}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border-radius:var(--radius-pill);background:var(--surface-container);min-height:30px;color:var(--on-surface-variant);align-items:center;padding:0 12px;font-size:14px;font-weight:800;display:inline-flex}.chip.level-1,.chip.level-2,.chip.level-3,.chip.level-4{color:#0f5365}.chip.level-1{background:#aee8ff}.chip.level-2{background:#79eed1}.chip.level-3{color:#93000a;background:#ffdad6}.chip.level-4{color:#50462d;background:#f0ead6}.content-body h3{letter-spacing:-.04em;margin:0;font-size:24px;line-height:1.3}.content-body p{color:var(--on-surface-variant);margin:0;line-height:1.55}.card-footer{justify-content:space-between;align-items:center;gap:12px;margin-top:auto;display:flex}.learning-flow{grid-template-columns:repeat(4,1fr);gap:28px;margin-top:60px;display:grid;position:relative}.flow-card{text-align:center;padding:28px 22px}.flow-card h3{margin:14px 0 8px}.flow-card p{color:var(--on-surface-variant);margin:0;line-height:1.55}.footer{background:#fff;border-top:1px solid #191c1e14;margin-top:auto;padding:38px 0}.footer-inner{color:var(--on-surface-variant);justify-content:space-between;align-items:center;gap:20px;display:flex}.footer-links{gap:28px;display:flex}.app-main{flex:1}.page-hero{text-align:center;padding:70px 0 46px}.page-hero h1{color:var(--primary);letter-spacing:-.05em;margin:0 0 16px;font-size:clamp(34px,5vw,48px)}.page-hero p{max-width:680px;color:var(--on-surface-variant);margin:0 auto;font-size:19px;line-height:1.7}.search-bar{border:3px solid var(--primary-container);border-radius:var(--radius-pill);width:min(100%,660px);min-height:68px;color:var(--on-surface-variant);background:#fff;align-items:center;gap:14px;margin:34px auto 0;padding:0 24px;font-size:18px;font-weight:700;display:flex}.level-tabs,.filter-tabs{flex-wrap:wrap;gap:14px;margin-bottom:22px;display:flex}.tab{border-radius:var(--radius-pill);min-height:44px;color:var(--on-surface-variant);background:#fff;border:0;padding:0 22px;font-weight:900;box-shadow:inset 0 0 0 2px #191c1e14}.tab.active{background:var(--primary-container);color:var(--primary);box-shadow:0 5px 0 var(--primary)}.dashboard-hero{background:var(--primary-container);color:#6a5400;border-radius:28px;align-items:center;gap:28px;margin-top:32px;padding:44px;display:flex}.avatar{width:104px;height:104px;box-shadow:var(--shadow-soft);background:linear-gradient(160deg,#aee8ff,#ffdab0);border:7px solid #fff;border-radius:50%;place-items:center;font-size:52px;display:grid}.dashboard-hero h1{letter-spacing:-.05em;margin:0;font-size:clamp(34px,5vw,52px)}.dashboard-hero p{margin:8px 0 0;font-size:22px}.stats{grid-template-columns:repeat(3,1fr)}.stat-card{text-align:center;padding:34px}.stat-card strong{margin-top:14px;font-size:42px;display:block}.report-layout{grid-template-columns:2fr 1fr;gap:24px;display:grid}.panel{padding:34px}.bar-chart{border-bottom:2px solid #e3e6e8;align-items:flex-end;gap:32px;height:310px;padding:26px 20px 0;display:flex}.bar{background:var(--primary-container);border-radius:12px 12px 0 0;flex:1;min-width:70px;position:relative;box-shadow:inset 0 -4px #725c001f}.bar.current{background:var(--primary)}.bar span{white-space:nowrap;font-weight:800;position:absolute;bottom:-34px;left:50%;transform:translate(-50%)}.recommend-list{gap:14px;display:grid}.recommend-item{background:#fff;border-radius:18px;align-items:center;gap:14px;padding:16px;display:flex}.read-layout{grid-template-columns:1fr 1fr;gap:28px;padding:48px 0;display:grid}.reading-card,.writing-card{min-height:760px;padding:46px}.reading-card h1,.writing-card h2{letter-spacing:-.05em;font-size:clamp(30px,4vw,42px)}.reading-body{color:var(--deep-text);font-size:24px;line-height:1.9}.reading-body p{margin:0 0 26px}.note-paper{resize:vertical;color:#5f6b7a;background:linear-gradient(90deg,#0000 0 42px,#ffb4b4 42px 45px,#0000 45px),repeating-linear-gradient(0deg,#fffdf8 0 47px,#d6dee3 48px 49px);border:2px solid #f2ead2;border-radius:18px;width:100%;min-height:420px;padding:30px 32px 30px 56px;font-size:22px;line-height:49px}.prompt-box{border:2px dashed var(--outline-variant);background:#fff9eb;border-radius:18px;padding:22px;font-size:20px;font-weight:800;line-height:1.6}.word-grid{grid-template-columns:repeat(3,1fr)}.word-card{padding:30px}.word-card h2{color:var(--primary);margin:0 0 12px}.quiz-list{gap:20px;display:grid}.quiz-card{padding:28px}.choice-list{gap:12px;display:grid}.choice-list label{background:var(--surface-container-low);border-radius:16px;align-items:center;gap:12px;padding:14px 16px;font-weight:800;display:flex}.admin-layout{grid-template-columns:260px 1fr;gap:28px;padding:42px 0;display:grid}.admin-side{height:fit-content;padding:22px}.admin-side a{color:var(--on-surface-variant);border-radius:16px;padding:14px 16px;font-weight:900;display:block}.admin-side a.active{background:var(--primary-container);color:var(--primary)}.admin-content{min-width:0}.table{border-collapse:collapse;width:100%}.table th,.table td{text-align:left;border-bottom:1px solid #eceef0;padding:16px}.table th{color:var(--primary);font-size:14px}.form-grid{grid-template-columns:1fr 1fr;gap:18px;display:grid}.field{gap:8px;display:grid}.field.full{grid-column:1/-1}.field label{font-weight:900}.field input,.field textarea,.field select{background:#fff;border:2px solid #e2e6e9;border-radius:14px;width:100%;padding:14px 16px}.form-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.duel-panel{gap:14px;margin-top:18px;display:grid}.button-row,.quick-actions{flex-wrap:wrap;gap:10px;display:flex}.button-row .button{min-height:44px;padding:0 18px;font-size:14px}.duel-status{color:var(--on-surface-variant);align-items:center;gap:8px;font-weight:900;display:inline-flex}.status-dot{background:#b6bec3;border-radius:50%;width:10px;height:10px}.status-dot.online{background:var(--tertiary)}.quick-actions button{border-radius:var(--radius-pill);background:var(--surface-container-low);color:var(--deep-text);cursor:pointer;border:0;padding:8px 12px;font-weight:900}.quick-actions button:disabled{cursor:not-allowed;opacity:.45}.duel-log{background:var(--surface-container-low);max-height:180px;color:var(--on-surface-variant);border-radius:18px;gap:8px;padding:14px;display:grid;overflow:auto}.duel-log p{margin:0;font-size:14px}.crossword-board{aspect-ratio:1;gap:4px;width:min(100%,520px);display:grid}.crossword-cell{color:var(--primary);background:#fff;border:2px solid #dfe7ea;border-radius:10px;place-items:center;font-weight:900;display:grid;position:relative}.crossword-cell.block{background:#dbe4e8;border-color:#dbe4e8}.crossword-cell small{color:var(--secondary);font-size:11px;position:absolute;top:4px;left:6px}@media (max-width:900px){.header-inner{align-items:center;gap:12px;height:auto;padding:12px 0;position:relative}.header-inner>.button.ghost{min-height:42px;margin-left:auto;padding:0 18px}.menu-toggle{border:2px solid var(--primary);cursor:pointer;background:#fff;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:0;display:inline-flex}.menu-toggle span{background:var(--primary);border-radius:2px;width:20px;height:3px;display:block}.nav{display:none}.nav.open{box-shadow:var(--shadow-soft);background:#fff;border:1px solid #191c1e14;border-radius:0 0 18px 18px;flex-direction:column;align-items:stretch;gap:0;padding:8px 14px 14px;display:flex;position:absolute;top:100%;left:0;right:0}.nav.open a{border-bottom:1px solid #191c1e0f;padding:14px 8px}.nav.open a.active{border-bottom-color:var(--primary)}.grid.categories,.grid.cards-3,.grid.cards-4,.grid.cards-2,.stats,.learning-flow,.report-layout,.read-layout,.word-grid,.admin-layout,.form-grid{grid-template-columns:1fr}.dashboard-hero,.footer-inner{flex-direction:column;align-items:flex-start}.reading-card,.writing-card{min-height:auto;padding:26px}}