*{box-sizing:border-box}
:root{
 --pink:#f4c7df;--mauve:#c7afce;--deep:#6d5267;--soft:#8a7184;
 --line:#ecdde8;--card:rgba(255,255,255,.86);--green:#0f9d58;--greenbg:#eefaf3;
 --red:#cc3b5e;--redbg:#fff1f4;--blue:#5d6df5;--bluebg:#f1f3ff;
 --shadow:0 10px 30px rgba(125,90,114,.08)
}
body{margin:0;font-family:"Pretendard",system-ui,sans-serif;background:linear-gradient(180deg,#fffafe 0%,#fdf4f8 42%,#faf7fc 100%);color:var(--deep)}
.app-shell{width:min(1220px,calc(100% - 28px));margin:18px auto 36px}
.hero{padding:34px;border-radius:32px;background:linear-gradient(135deg,var(--pink),var(--mauve));box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.18);filter:blur(28px)}
.hero::before{width:180px;height:180px;right:-30px;top:-50px}.hero::after{width:140px;height:140px;left:15px;bottom:-50px}
.hero-badge{display:inline-flex;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.74);font-weight:700;font-size:13px;color:#75596f}
.hero h1{margin:16px 0 0;font-size:clamp(30px,5vw,48px)}
.hero p{max-width:760px;line-height:1.8;color:#6b5165}
.card{background:var(--card);border:1px solid rgba(255,255,255,.72);border-radius:24px;box-shadow:var(--shadow)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.stat-card{padding:22px;display:flex;gap:14px;align-items:center}.stat-icon{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:var(--pink);font-size:22px}
.stat-label{font-size:13px;color:var(--soft)}.stat-value{font-size:28px;font-weight:800}.stat-sub{font-size:12px;color:#9a8094}
.tabs{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;padding:10px;border-radius:24px;background:rgba(255,255,255,.76);box-shadow:var(--shadow)}
.tab-btn{border:0;background:transparent;padding:12px 16px;border-radius:16px;font-weight:700;cursor:pointer;color:var(--deep)}
.tab-btn.active{background:var(--pink);color:#694f62}
#tabContent{margin-top:16px}
.grid2{display:grid;grid-template-columns:1fr 1.2fr;gap:18px}
.gridHome{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.panel{padding:22px}
h2,h3{margin:0}
.muted{font-size:14px;color:var(--soft);margin-top:6px}
.text-input,.select-input,.textarea{width:100%;height:50px;border:1px solid var(--line);border-radius:18px;padding:0 14px;background:white;font-size:15px;outline:none;color:var(--deep)}
.textarea{height:190px;padding:14px;resize:vertical}
.text-input:focus,.select-input:focus,.textarea:focus{box-shadow:0 0 0 4px rgba(244,199,223,.25);border-color:#d2b8cb}
.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn{height:44px;padding:0 16px;border-radius:16px;border:1px solid var(--line);background:white;font-weight:700;cursor:pointer;color:var(--deep)}
.btn.primary{background:var(--mauve);border-color:var(--mauve);color:white}.btn.blue{background:var(--blue);border-color:var(--blue);color:white}
.list{display:grid;gap:10px;margin-top:14px;max-height:560px;overflow:auto;padding-right:4px}
.item,.choice,.exam-choice{width:100%;text-align:left;border:1px solid var(--line);border-radius:18px;padding:14px 16px;background:white;cursor:pointer;color:var(--deep)}
.item.active,.choice.active,.exam-choice.selected{background:#faf2f8;border-color:var(--mauve)}
.item small{display:block;margin-top:6px;color:var(--soft)}
.badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#f3e4ee;color:#7b5a72;font-size:12px;font-weight:700}
.info{padding:14px;border-radius:18px;background:#fff7fb;margin-top:14px;line-height:1.7}
.example,.quiz,.flashbox,.examtop{margin-top:14px;padding:16px;border-radius:18px}
.example{border:1px solid var(--line);background:white}.quiz{border:1px dashed #e5d5e0;background:#fffafd}
.flashbox{border:1px solid var(--line);background:linear-gradient(180deg,#fffafd,#fff6fb)}.examtop{background:var(--bluebg);color:#4d57b7}
.feedback{margin-top:14px;padding:13px 14px;border-radius:16px;font-size:14px}
.feedback.correct{background:var(--greenbg);color:var(--green)}.feedback.wrong{background:var(--redbg);color:var(--red)}.feedback.info{background:var(--bluebg);color:var(--blue)}
.progress{width:100%;height:12px;border-radius:999px;background:#f5eaf1;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,var(--pink),var(--mauve))}
.flash-word{font-size:34px;font-weight:800;color:#5d4457}.flash-sub{margin-top:12px;line-height:1.8;color:var(--soft)}
.exam-grid{display:grid;gap:14px;margin-top:14px}.exam-q{padding:16px;border:1px solid var(--line);border-radius:18px;background:white}
.search-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.search-item{padding:14px;border:1px solid var(--line);border-radius:18px;background:#fffafd}
.smallgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.mini{padding:16px;border-radius:18px;background:#fff7fb}.mini .n{font-size:28px;font-weight:800;margin-top:6px}
.footer{margin-top:16px;padding:20px 22px}.footer p{margin:8px 0 0;color:var(--soft)}
.empty{padding:40px 20px;text-align:center;color:var(--soft)}
@media (max-width: 980px){.stats-grid,.grid2,.gridHome,.search-grid{grid-template-columns:1fr}}