/* ── 통합과학 인터랙티브 시뮬레이션 공용 스타일 ── */
.sci-outer {
  --sci-bg:#ffffff; --sci-panel:#f7f9fc; --sci-border:#e3e7ee;
  --sci-accent:#4fc3f7; --sci-accent2:#7c5cff; --sci-ok:#007c4b;
  --sci-warn:#9e5d00; --sci-danger:#da0027; --sci-text:#5b6e81; --sci-dim:#6e7681;
  --sci-code-bg:#f7f9fc;
  max-width:1080px; margin:10px auto 44px; padding:0 16px;
}
.sci-wrap {
  background:
    radial-gradient(900px 400px at 8% -5%, #e3eff7 0%, transparent 55%),
    radial-gradient(700px 360px at 105% 110%, #f0ecf9 0%, transparent 50%),
    var(--sci-bg);
  border-radius:16px; border:1px solid var(--sci-border); color:var(--sci-text);
  font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  padding:26px 24px 32px; line-height:1.7; box-shadow:0 2px 12px rgba(20,30,50,0.05);}
.sci-wrap h1 {
  font-size:1.7rem; margin:0 0 6px;
  background:linear-gradient(90deg,#076f9e,#6742ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sci-sub { color:var(--sci-dim); font-size:0.92rem; margin-bottom:22px; }
.sci-wrap h2 { font-size:1.15rem; margin:34px 0 14px; padding-left:11px; border-left:3px solid var(--sci-accent2); }
.sci-wrap h3 { font-size:0.98rem; margin:18px 0 8px; color:#477093; }
.sci-wrap p { font-size:0.92rem; }
.sci-card { background:var(--sci-panel); border:1px solid var(--sci-border); border-radius:12px; padding:18px; margin:14px 0; }
.sci-callout {
  background:linear-gradient(180deg,rgba(79,195,247,0.08),rgba(124,92,255,0.05));
  border:1px solid #e3e7ee; border-radius:10px; padding:12px 15px; font-size:0.88rem; margin:14px 0;
}
.sci-callout b { color:var(--sci-accent); }
.sci-mono { font-family:'JetBrains Mono','Consolas',monospace; }
.sci-wrap p code, .sci-wrap li code, .sci-wrap td code {
  background:var(--sci-code-bg); border:1px solid var(--sci-border); border-radius:5px;
  padding:1px 5px; font-size:0.85em; color:#006dc7; font-family:'JetBrains Mono','Consolas',monospace;
}
.sci-eq {
  background:var(--sci-code-bg); border:1px solid var(--sci-border); border-radius:10px;
  padding:12px 16px; margin:12px 0; font-family:'JetBrains Mono',monospace; font-size:0.9rem;
  color:#006dc7; text-align:center; overflow-x:auto;
}
.sci-canvas-box { background:var(--sci-code-bg); border:1px solid var(--sci-border); border-radius:10px; padding:10px; margin-top:6px; }
canvas.sci-canvas { width:100%; height:auto; display:block; touch-action:none; }
.sci-controls { display:grid; grid-template-columns:1fr; gap:12px; margin:14px 0 4px; }
@media (min-width:640px){ .sci-controls { grid-template-columns:1fr 1fr; } }
.sci-controls.c3 { grid-template-columns:1fr; }
@media (min-width:640px){ .sci-controls.c3 { grid-template-columns:repeat(3,1fr); } }
.sci-slider { display:flex; flex-direction:column; gap:4px; }
.sci-slider label { font-size:0.78rem; color:var(--sci-dim); display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; }
.sci-slider label b { color:var(--sci-accent); }
.sci-slider input[type=range] { width:100%; accent-color:var(--sci-accent2); }
.sci-presets { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.sci-btn { background:#f7f9fc; border:1px solid #e3e7ee; color:var(--sci-text); border-radius:8px; padding:7px 14px; font-size:0.84rem; cursor:pointer; transition:border-color .15s,background .15s; }
.sci-btn:hover { border-color:var(--sci-accent); }
.sci-btn.active { border-color:var(--sci-accent); background:#eaeef6; color:#6c6c6c; }
.sci-readout { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
@media (min-width:640px){ .sci-readout { grid-template-columns:repeat(4,1fr); } }
.sci-readout.r3 { grid-template-columns:repeat(3,1fr); }
.sci-metric { background:var(--sci-panel); border:1px solid var(--sci-border); border-radius:10px; padding:10px 12px; text-align:center; }
.sci-metric .lbl { font-size:0.68rem; color:var(--sci-dim); letter-spacing:.03em; }
.sci-metric .val { font-size:1.05rem; font-weight:800; color:#477093; font-family:'JetBrains Mono',monospace; }
.sci-verdict { margin-top:14px; text-align:center; font-size:1.02rem; font-weight:800; border-radius:10px; padding:12px; border:1px solid var(--sci-border); font-family:'Noto Sans KR',sans-serif; }
.sci-verdict.ok   { color:var(--sci-ok);     border-color:rgba(0,229,138,0.4);  background:rgba(0,229,138,0.07); }
.sci-verdict.warn { color:var(--sci-warn);   border-color:rgba(255,179,71,0.4); background:rgba(255,179,71,0.07); }
.sci-verdict.bad  { color:var(--sci-danger); border-color:rgba(255,60,95,0.4);  background:rgba(255,60,95,0.07); }
table.sci-tbl { width:100%; border-collapse:collapse; font-size:0.84rem; margin:10px 0; }
table.sci-tbl th, table.sci-tbl td { border:1px solid var(--sci-border); padding:7px 9px; text-align:center; }
table.sci-tbl th { background:#f7f9fc; color:#477093; }
table.sci-tbl td.l { text-align:left; }
table.sci-tbl td.ok  { color:var(--sci-ok); font-weight:700; }
table.sci-tbl td.warn { color:var(--sci-warn); font-weight:700; }
table.sci-tbl td.bad { color:var(--sci-danger); font-weight:700; }
.sci-hint { font-size:0.8rem; color:var(--sci-dim); margin-top:8px; }
.sci-links a { color:var(--sci-accent); }
.sci-chips { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.sci-chip { background:#f7f9fc; border:1px solid #e3e7ee; color:var(--sci-text); border-radius:999px; padding:5px 13px; font-size:0.82rem; cursor:pointer; }
.sci-chip:hover { border-color:var(--sci-accent); }
.sci-chip.active { background:#eaeef6; border-color:var(--sci-accent); color:#6c6c6c; }