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