/* cs-tools.css — 퀴즈 · 진도 · 계산기 · 실제 데이터 도표용 보조 스타일
   사이트 style.css의 CSS 변수(--bg --panel --panel2 --fg --muted --line --line2 --accent
   --accent-soft --accent-ink --up --down --warn --ok --l1..--l3 --shadow --font)만 사용하므로
   [data-theme=dark]에서 자동으로 어두운 색이 적용됩니다. style.css 다음에 불러오세요. */

/* ---------- 공통 버튼 · 입력 ---------- */
.cs-btn{min-height:44px;min-width:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--accent-ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.cs-btn:hover{border-color:var(--accent)}
.cs-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--panel)}
.cs-btn[disabled]{opacity:.5;cursor:not-allowed}
.cs-btn:focus-visible,.cs-opt:focus-within,.cs-field input:focus-visible,.cs-field select:focus-visible,.cs-readbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cs-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}

/* ---------- 퀴즈 ---------- */
.cs-quiz{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 18px;margin:20px 0;box-shadow:var(--shadow)}
.cs-quiz-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:8px}
.cs-quiz-title{font-weight:800;font-size:17px}
.cs-quiz-count{color:var(--muted);font-size:14px}
.cs-quiz fieldset{border:none;margin:0;padding:0;min-width:0}
.cs-quiz legend{font-weight:700;font-size:16.5px;line-height:1.6;padding:0;margin-bottom:10px}
.cs-quiz .fig{margin:6px 0 12px}
.cs-quiz .diagram{display:block;width:100%;max-width:440px;height:auto}
.cs-opts{display:grid;gap:8px}
.cs-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);cursor:pointer;line-height:1.5}
.cs-opt input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--accent)}
.cs-opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.cs-opt.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.cs-opt.no{border-color:var(--up);background:color-mix(in srgb,var(--up) 10%,transparent)}
.cs-opt .cs-mark{margin-left:auto;font-weight:800;font-size:14px}
.cs-opt.ok .cs-mark{color:var(--ok)}.cs-opt.no .cs-mark{color:var(--up)}
.cs-feedback{margin-top:12px;border-radius:10px;padding:10px 14px;border:1px solid var(--line);background:var(--panel2);font-size:15px}
.cs-feedback:empty{display:none}
.cs-feedback .cs-verdict{font-weight:800;display:block;margin-bottom:4px}
.cs-feedback.ok .cs-verdict{color:var(--ok)}.cs-feedback.no .cs-verdict{color:var(--up)}
.cs-feedback .cs-src{display:block;margin-top:6px;font-size:14px;color:var(--muted)}
.cs-feedback .cs-src a{display:inline-block;padding:10px 0;min-height:44px;box-sizing:border-box}
.cs-score{font-size:20px;font-weight:800;margin:6px 0}
.cs-review{margin:8px 0 0;padding-left:20px;font-size:14.5px}
.cs-review li{margin:4px 0}
.cs-review .no{color:var(--up)}

/* ---------- 읽음 표시 · 진도 ---------- */
.cs-readbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0 8px;padding:12px 14px;border:1px dashed var(--line2);border-radius:12px;background:var(--panel2)}
.cs-readbtn{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--fg);font:inherit;font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.cs-readbtn .cs-chk{width:20px;height:20px;border-radius:6px;border:2px solid var(--line2);display:inline-grid;place-items:center;font-size:13px;line-height:1;color:transparent}
.cs-readbtn[aria-pressed=true]{border-color:var(--ok);color:var(--ok)}
.cs-readbtn[aria-pressed=true] .cs-chk{border-color:var(--ok);background:var(--ok);color:var(--panel)}
.cs-readnote{color:var(--muted);font-size:14px}
.nav a.cs-read::after{content:"✓";margin-left:6px;color:var(--ok);font-weight:800;font-size:13px}
.navcat summary .cs-navprog{margin-left:6px;font-size:11.5px;font-weight:700;color:var(--ok)}
.cs-progress{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 18px;margin:20px 0}
.cs-progress h3{margin:0 0 6px;font-size:17px}
.cs-prog-total{color:var(--muted);font-size:14.5px;margin:0 0 10px}
.cs-prog-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cs-prog-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center}
.cs-prog-name{font-weight:700;font-size:15px}
.cs-prog-name a{display:inline-block;min-height:44px;line-height:44px}
.cs-prog-num{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.cs-bar{grid-column:1 / -1;height:8px;border-radius:6px;background:var(--line);overflow:hidden}
.cs-bar>span{display:block;height:100%;width:0;background:var(--ok);border-radius:6px}
.cs-prog-quiz{grid-column:1 / -1;font-size:13.5px;color:var(--muted)}
.cs-prog-quiz b{color:var(--fg)}

/* ---------- 계산기 ---------- */
.cs-calc{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 18px;margin:20px 0}
.cs-calc h3{margin:0 0 4px;font-size:17px}
.cs-calc .cs-calc-desc{color:var(--muted);font-size:14px;margin:0 0 12px}
.cs-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 14px}
.cs-field{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:700}
.cs-field .cs-hint{font-weight:400;color:var(--muted);font-size:13px}
.cs-field input,.cs-field select{min-height:44px;box-sizing:border-box;width:100%;padding:8px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--fg);font:inherit;font-size:16px;font-variant-numeric:tabular-nums}
.cs-field input[aria-invalid=true]{border-color:var(--up)}
.cs-out{margin-top:14px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);padding:10px 14px;font-size:15px}
.cs-out .cs-err{color:var(--up);font-weight:700}
.cs-out table{font-size:14.5px}
.cs-out td,.cs-out th{padding:6px 10px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.cs-out td:first-child,.cs-out th:first-child{text-align:left}
.cs-out .cs-big{font-size:20px;font-weight:800;color:var(--accent-ink)}
.cs-out .cs-up{color:var(--up);font-weight:700}.cs-out .cs-dn{color:var(--down);font-weight:700}
.cs-out .cs-note{color:var(--muted);font-size:13.5px;margin-top:6px}

/* ---------- 실제 데이터 도표 (viewBox 폭 380, 글자 13px 이상) ---------- */
.diagram .cs-tm{fill:var(--muted);font-size:13px}
.diagram .cs-tu{fill:var(--up);font-weight:700;font-size:13px}
.diagram .cs-td{fill:var(--down);font-weight:700;font-size:13px}
.diagram .cs-ta{fill:var(--accent);font-weight:700;font-size:13px}
.diagram .cs-tl{font-weight:700;font-size:14px}
.diagram .cs-ma1{fill:none;stroke:var(--l1);stroke-width:1.6}
.diagram .cs-ma2{fill:none;stroke:var(--l2);stroke-width:1.6}
.diagram .cs-band{fill:var(--accent);opacity:.08}
.diagram .cs-bline{fill:none;stroke:var(--accent);stroke-width:1.1;opacity:.7}
.diagram .cs-ring{fill:none;stroke:var(--accent);stroke-width:2}
.fig.cs-real figcaption .cs-meta{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.cs-realtag{display:inline-block;font-size:12px;font-weight:700;padding:1px 8px;border-radius:20px;border:1px solid var(--accent);color:var(--accent-ink);margin-right:6px}

/* 좁은 화면: 사이트 기본 규칙(.diagram text 14px)과 같이 cs- 글자 클래스도 키움. 퀴즈 그림은 더 좁게 들어가므로 한 단계 더 */
@media (max-width:560px){
  .diagram .cs-tm,.diagram .cs-tu,.diagram .cs-td,.diagram .cs-ta{font-size:14px}
  .diagram .cs-tl{font-size:15px}
  .cs-quiz .diagram text,.cs-quiz .diagram .cs-tm,.cs-quiz .diagram .cs-tu,.cs-quiz .diagram .cs-td,.cs-quiz .diagram .cs-ta,.cs-quiz .diagram .cs-tl{font-size:16px}
}