/* ── 건설 기초과목 인터랙티브 시뮬레이션 공용 스타일 ── */
.cst-outer {
  --cst-bg:#ffffff; --cst-panel:#f7f9fc; --cst-border:#e3e7ee;
  --cst-accent:#e0a339; --cst-accent2:#f7f9fc; --cst-ok:#007c4b;
  --cst-warn:#9e5d00; --cst-danger:#da0027; --cst-text:#7b6a4f; --cst-dim:#766a59;
  --cst-code-bg:#f7f9fc;
  max-width:1080px; margin:10px auto 44px; padding:0 16px;
}
.cst-wrap {
  background:
    radial-gradient(900px 400px at 8% -5%, #f4ece1 0%, transparent 55%),
    radial-gradient(700px 360px at 105% 110%, #f4ece5 0%, transparent 50%),
    var(--cst-bg);
  border-radius:16px; border:1px solid var(--cst-border); color:var(--cst-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);}
.cst-wrap h1 {
  font-size:1.7rem; margin:0 0 6px;
  background:linear-gradient(90deg,#8b6016,#7a5c3e);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.cst-sub { color:var(--cst-dim); font-size:0.92rem; margin-bottom:22px; }
.cst-wrap h2 { font-size:1.15rem; margin:34px 0 14px; padding-left:11px; border-left:3px solid var(--cst-accent2); }
.cst-wrap h3 { font-size:0.98rem; margin:18px 0 8px; color:#846836; }
.cst-wrap p { font-size:0.92rem; }
.cst-card { background:var(--cst-panel); border:1px solid var(--cst-border); border-radius:12px; padding:18px; margin:14px 0; }
.cst-callout {
  background:linear-gradient(180deg,rgba(224,163,57,0.10),rgba(243,237,230,0.06));
  border:1px solid #e3e7ee; border-radius:10px; padding:12px 15px; font-size:0.88rem; margin:14px 0;
}
.cst-callout b { color:var(--cst-accent); }
.cst-mono { font-family:'JetBrains Mono','Consolas',monospace; }
.cst-wrap p code, .cst-wrap li code, .cst-wrap td code {
  background:var(--cst-code-bg); border:1px solid var(--cst-border); border-radius:5px;
  padding:1px 5px; font-size:0.85em; color:#8d6512; font-family:'JetBrains Mono','Consolas',monospace;
}
.cst-eq {
  background:var(--cst-code-bg); border:1px solid var(--cst-border); border-radius:10px;
  padding:12px 16px; margin:12px 0; font-family:'JetBrains Mono',monospace; font-size:0.9rem;
  color:#8d6512; text-align:center; overflow-x:auto;
}
.cst-canvas-box { background:var(--cst-code-bg); border:1px solid var(--cst-border); border-radius:10px; padding:10px; margin-top:6px; }
canvas.cst-canvas { width:100%; height:auto; display:block; touch-action:none; }
.cst-controls { display:grid; grid-template-columns:1fr; gap:12px; margin:14px 0 4px; }
@media (min-width:640px){ .cst-controls { grid-template-columns:1fr 1fr; } }
.cst-controls.c3 { grid-template-columns:1fr; }
@media (min-width:640px){ .cst-controls.c3 { grid-template-columns:repeat(3,1fr); } }
.cst-slider { display:flex; flex-direction:column; gap:4px; }
.cst-slider label { font-size:0.78rem; color:var(--cst-dim); display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; }
.cst-slider label b { color:var(--cst-accent); }
.cst-slider input[type=range] { width:100%; accent-color:var(--cst-accent2); }
.cst-slider input[type=number] { width:100%; background:#f7f9fc; border:1px solid #e3e7ee; color:var(--cst-text); border-radius:6px; padding:6px 8px; font-family:'JetBrains Mono',monospace; }
.cst-presets { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.cst-btn { background:#f7f9fc; border:1px solid #e3e7ee; color:var(--cst-text); border-radius:8px; padding:7px 14px; font-size:0.84rem; cursor:pointer; transition:border-color .15s,background .15s; }
.cst-btn:hover { border-color:var(--cst-accent); }
.cst-btn.active { border-color:var(--cst-accent); background:#f4ede1; color:#6c6c6c; }
.cst-readout { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
@media (min-width:640px){ .cst-readout { grid-template-columns:repeat(4,1fr); } }
.cst-readout.r3 { grid-template-columns:repeat(3,1fr); }
.cst-metric { background:var(--cst-panel); border:1px solid var(--cst-border); border-radius:10px; padding:10px 12px; text-align:center; }
.cst-metric .lbl { font-size:0.68rem; color:var(--cst-dim); letter-spacing:.03em; }
.cst-metric .val { font-size:1.05rem; font-weight:800; color:#846836; font-family:'JetBrains Mono',monospace; }
.cst-verdict { margin-top:14px; text-align:center; font-size:1.02rem; font-weight:800; border-radius:10px; padding:12px; border:1px solid var(--cst-border); font-family:'Noto Sans KR',sans-serif; }
.cst-verdict.ok   { color:var(--cst-ok);     border-color:rgba(0,229,138,0.4);  background:rgba(0,229,138,0.07); }
.cst-verdict.warn { color:var(--cst-warn);   border-color:rgba(255,179,71,0.4); background:rgba(255,179,71,0.07); }
.cst-verdict.bad  { color:var(--cst-danger); border-color:rgba(255,60,95,0.4);  background:rgba(255,60,95,0.07); }
table.cst-tbl { width:100%; border-collapse:collapse; font-size:0.84rem; margin:10px 0; }
table.cst-tbl th, table.cst-tbl td { border:1px solid var(--cst-border); padding:7px 9px; text-align:center; }
table.cst-tbl th { background:#f2ede8; color:#846836; }
table.cst-tbl td.l { text-align:left; }
table.cst-tbl td.ok  { color:var(--cst-ok); font-weight:700; }
table.cst-tbl td.warn { color:var(--cst-warn); font-weight:700; }
table.cst-tbl td.bad { color:var(--cst-danger); font-weight:700; }
.cst-hint { font-size:0.8rem; color:var(--cst-dim); margin-top:8px; }
.cst-links a { color:var(--cst-accent); }
.cst-chips { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.cst-chip { background:#f7f9fc; border:1px solid #e3e7ee; color:var(--cst-text); border-radius:999px; padding:5px 13px; font-size:0.82rem; cursor:pointer; }
.cst-chip:hover { border-color:var(--cst-accent); }
.cst-chip.active { background:#f4ede1; border-color:var(--cst-accent); color:#6c6c6c; }