/* Intensive Reader 스타일 */
:root{
  --bg:#f6f7f9; --panel:#ffffff; --ink:#1b2330; --muted:#6b7686; --line:#e6e9ef;
  --brand:#2f9e8f; --brand-d:#247c70; --accent:#3b6fb6;
  --A:#d9534f; --B:#e0a800; --C:#8a94a6;
  --warn:#c9881f; --danger:#cc4444;
  --radius:14px; --shadow:0 1px 3px rgba(20,30,50,.06),0 6px 20px rgba(20,30,50,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1{font-size:24px;margin:8px 0 16px} h3{margin:0 0 10px}
p{margin:0 0 10px}
a{color:var(--accent)}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center}

/* 네비 */
.nav{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:10px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:18px;color:var(--brand-d);cursor:pointer;letter-spacing:-.3px}
.nav-right{display:flex;align-items:center;gap:6px}
.tab{border:0;background:transparent;padding:8px 12px;border-radius:10px;cursor:pointer;font-size:14px;color:var(--muted);position:relative}
.tab:hover{background:#eef1f5}
.tab.active{background:var(--brand);color:#fff;font-weight:600}
.badge{position:absolute;top:-2px;right:-2px;background:var(--danger);color:#fff;border-radius:10px;font-size:10px;padding:1px 6px}
.ai-dot{margin-left:6px;font-size:12px;padding:4px 8px;border-radius:8px}
.ai-dot.on{color:var(--brand-d);background:#e3f4f1} .ai-dot.off{color:#b06;background:#fbe9f0}

.container{max-width:920px;margin:0 auto;padding:22px 20px 80px}

/* 버튼 */
.btn{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--brand-d)}
.btn:disabled{opacity:.55;cursor:default}
.btn.small{padding:7px 12px;font-size:13px}
.btn.ghost{background:#eef1f5;color:var(--ink)}
.btn.ghost:hover{background:#e2e7ee}
.btn.danger{background:#fbe9e9;color:var(--danger)}
.btn.again{background:#fbe9e9;color:var(--danger)} .btn.hard{background:#fbf0d8;color:#9a6b00}
.btn.good{background:#e3f4f1;color:var(--brand-d)} .btn.easy{background:#e6effb;color:var(--accent)}
.link{background:0;border:0;color:var(--accent);cursor:pointer;font-size:13px;padding:2px 0;margin-left:8px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
.row.between{justify-content:space-between}

/* 드롭존 */
.dropzone{border:2px dashed #c5cdd9;border-radius:var(--radius);padding:30px 20px;text-align:center;background:var(--panel);transition:.15s}
.dropzone.over{border-color:var(--brand);background:#effbf8}
.dz-big{font-size:18px;font-weight:700} .dz-sub{color:var(--muted);font-size:13px;margin:6px 0 14px}
.dz-btns{display:flex;gap:10px;justify-content:center}

/* 통계 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center}
.stat-n{font-size:26px;font-weight:800;color:var(--brand-d)} .stat-l{color:var(--muted);font-size:13px}

/* 검색 */
.search,.input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff;font-family:inherit}
.search:focus,.input:focus,.ta:focus{outline:2px solid #cfeae5;border-color:var(--brand)}

/* 라이브러리 그리드 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:14px}
.ucard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;cursor:pointer;box-shadow:var(--shadow);transition:.12s;position:relative}
.ucard:hover{transform:translateY(-2px);border-color:#cdd5e0}
.ucard-type{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;margin-bottom:8px}
.ucard-type.reading{background:#e3f4f1;color:var(--brand-d)} .ucard-type.news{background:#fde9e9;color:#b6453b}
.ucard-title{font-weight:700;font-size:15px;line-height:1.35;min-height:40px}
.ucard-meta{color:var(--muted);font-size:12px;margin:6px 0 10px}
.ucard-bar{height:7px;background:#eef1f5;border-radius:6px;overflow:hidden}
.ucard-fill{height:100%;background:var(--brand);border-radius:6px}
.ucard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px}
.pill{font-size:11px;padding:2px 8px;border-radius:20px;background:#eef1f5;color:var(--muted)}
.pill.warn{background:#fbf0d8;color:var(--warn)} .pill.A{background:#fbe9e9;color:var(--A)} .pill.B{background:#fbf3d6;color:#9a6b00} .pill.C{background:#eef1f5;color:var(--C)}
.empty{text-align:center;padding:40px;color:var(--muted)}

/* 유닛 */
.unit-head h1{margin:6px 0 2px;font-size:22px}
.unit-sub{color:var(--muted);font-size:13px;margin-bottom:6px}
.stepnav{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.step{border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 12px;font-size:12.5px;cursor:pointer;color:var(--muted)}
.step:hover{border-color:var(--brand)}
.step.active{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}
.step.done{border-color:var(--brand);color:var(--brand-d)}
.step.done::before{content:"✓ "}
.stage-foot{display:flex;justify-content:space-between;margin-top:24px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:12px 0;box-shadow:var(--shadow)}
.hintbox{background:#eef7f5;border-left:4px solid var(--brand);padding:12px 14px;border-radius:0 10px 10px 0;font-size:13.5px;color:#34514c;margin:6px 0 14px}
.sec{margin:24px 0 6px;font-size:16px}

/* 표지 */
.cover{text-align:center;background:linear-gradient(180deg,#fbfdfc,#fff)}
.cover-title{font-size:26px;font-weight:800;color:var(--brand-d)}
.cover-author{margin-top:6px;font-style:italic}
.cover-blurb{margin-top:14px;text-align:left;font-size:15px}
.predict-art{padding:8px 0;border-bottom:1px solid var(--line)} .predict-art:last-child{border:0}

/* 읽기 */
.reading-text{white-space:pre-wrap;font-size:15.5px;line-height:1.8}
.reading-text.big{font-size:16.5px}
.article h3{color:var(--brand-d)}
.quote{font-style:italic;color:#55606f;border-left:3px solid #d7dde6;padding-left:12px}

/* 필드 */
.field{margin:10px 0}
.flabel,.label{display:block;font-size:13px;font-weight:600;color:#42505f;margin-bottom:5px}
.label.small{font-size:12px;margin-top:8px}
.ta{width:100%;min-height:74px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;resize:vertical;background:#fff;line-height:1.6}
.ta.big{min-height:200px}

/* 문장 해부 */
.sent-list{max-height:300px;overflow:auto;margin-top:8px}
.sent-pick{display:flex;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:13.5px}
.sent-pick:hover{background:#eef7f5}
.plus{color:var(--brand);font-weight:800}
.dissect .sentence{font-size:15.5px;font-weight:600;margin:0}
.dissect-head{display:flex;justify-content:space-between;gap:10px}
.x{background:0;border:0;color:#b6bdc8;cursor:pointer;font-size:14px}.x:hover{color:var(--danger)}
.ai-box{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.dissect-result{margin-top:10px}
.core{background:#eef7f5;border-radius:10px;padding:10px 12px;margin-bottom:8px}
.tag{display:inline-block;font-size:11px;background:var(--brand);color:#fff;padding:2px 8px;border-radius:20px;margin-right:8px}
.chunks{margin:4px 0 8px;padding-left:18px} .chunks li{margin:3px 0;font-size:14px}
.chunks .role{display:inline-block;font-size:11px;background:#e6effb;color:var(--accent);padding:1px 7px;border-radius:6px;margin-right:6px}
.chunks .ck{font-weight:600} .chunks .kr{color:var(--muted)}
/* 끊어읽기 (직독직해) */
.sensegroups{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 2px;background:#f6faf9;border:1px solid #e3eeeb;border-radius:10px;padding:10px 12px;margin-bottom:8px}
.sensegroups .slash{color:#b8c6c2;font-weight:700;padding:0 2px;align-self:center}
.sg{display:inline-flex;flex-direction:column;padding:4px 8px;border-radius:8px}
.sg:hover{background:#e8f4f1}
.sg-en{font-weight:600;font-size:14.5px}
.sg-kr{font-size:12px;color:var(--brand-d);margin-top:2px}
/* 문장 성분 S/V/O/C/M */
.elements{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.elem{font-size:13.5px;padding:3px 8px;border-radius:8px;background:#eef1f5;border:1px solid #e2e7ee}
.elem-l{font-weight:800;font-size:11px;padding:1px 5px;border-radius:5px;background:#fff;margin-right:2px}
.elem.e-S{background:#e6effb;border-color:#cfe0f6}.elem.e-S .elem-l{color:var(--accent)}
.elem.e-V{background:#e3f4f1;border-color:#c8e8e2}.elem.e-V .elem-l{color:var(--brand-d)}
.elem.e-O{background:#fdf0e0;border-color:#f6e2c8}.elem.e-O .elem-l{color:#9a6b00}
.elem.e-C{background:#f3e8fb;border-color:#e6d4f6}.elem.e-C .elem-l{color:#7a3fb0}
.elem.e-M{background:#eef1f5}.elem.e-M .elem-l{color:var(--muted)}
.elem-kr{color:var(--muted);font-size:12px}
.kv{display:flex;gap:10px;padding:4px 0;font-size:14px;border-top:1px solid #f0f2f6}
.kv .k{flex:0 0 110px;color:var(--muted);font-size:12.5px} .kv .v{flex:1}

/* 어휘 */
.vocab-counts{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.vocab-list{display:flex;flex-direction:column;gap:8px}
.vrow{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.vrow.gA{border-left:4px solid var(--A)} .vrow.gB{border-left:4px solid var(--B)} .vrow.gC{border-left:4px solid var(--C);opacity:.7}
.vhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.vexp{font-weight:700} .vipa{color:var(--muted);font-size:12px} .vmean{color:#42505f;font-size:13.5px}
.grader{display:flex;gap:6px}
.gbtn{width:34px;height:30px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-weight:700;color:var(--muted)}
.gbtn.gA.sel{background:var(--A);color:#fff;border-color:var(--A)} .gbtn.gB.sel{background:var(--B);color:#fff;border-color:var(--B)} .gbtn.gC.sel{background:var(--C);color:#fff;border-color:var(--C)}
.vex{font-size:13px;color:#55606f} .exline{padding:2px 0}

/* 질문/샘플 */
.qcard{position:relative}
.qnum{font-weight:800;color:var(--brand-d)}
.qtext{font-weight:600;font-size:15px;margin:4px 0 8px}
.sample{background:#f1f8f6;border-radius:10px;padding:12px;margin-top:10px}
.locked{background:#f4f5f8;border:1px dashed #cdd5e0;border-radius:10px;padding:12px;text-align:center;color:var(--muted);margin-top:10px}
.locked.big{padding:24px;font-size:15px;margin:14px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{background:#eef7f5;color:#34514c;border-radius:20px;padding:5px 8px 5px 12px;font-size:13px;display:flex;align-items:center;gap:6px}

/* 피드백 */
.feedback .fb-overall{font-size:14.5px}
.feedback ul{margin:4px 0 10px;padding-left:18px} .feedback li{margin:3px 0;font-size:14px}

/* 체크리스트/스케줄 */
.checklist .check{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:14px;cursor:pointer}
.checklist .check.auto{cursor:default}
.checklist input{margin-top:3px}
.sched{list-style:none;padding:0;margin:8px 0}
.sched li{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;font-size:14px}
.sched li.due{border-color:var(--warn);background:#fdf7e9} .sched li.done{opacity:.55}

/* 플래시카드 */
.flash{text-align:center;min-height:220px}
.flash-count{color:var(--muted);font-size:12px}
.flash-front{font-size:18px;font-weight:600;white-space:pre-wrap;margin:18px 0;line-height:1.7}
.flash-back{background:#eef7f5;border-radius:10px;padding:14px;white-space:pre-wrap;margin:14px 0;text-align:left}
.flash-grades{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.flash-done{font-size:20px;margin:30px 0}

/* 설정 */
.setrow{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;margin:12px 0}
.setlabel{font-weight:600;font-size:14px}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#222b3a;color:#fff;
  padding:12px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;z-index:100;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#9b2c2c}

@media(max-width:560px){
  .stats{grid-template-columns:1fr 1fr} .setrow{grid-template-columns:1fr}
}