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

/* ── 스피커(발음 듣기) 버튼 ── */
.eng-speak-btn {
  border:none; background:rgba(255,255,255,0.08); color:var(--eng-accent2);
  width:38px; height:38px; border-radius:50%; font-size:0.95rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .15s, transform .15s;
}
.eng-speak-btn:hover { background:rgba(255,255,255,0.16); transform:scale(1.06); }
.eng-speak-btn.eng-speak-sm { width:28px; height:28px; font-size:0.78rem; }
.eng-speak-btn.is-speaking { color:var(--eng-accent); background:rgba(255,107,129,0.18); }
.eng-listen-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.eng-sentence-en { font-family:'JetBrains Mono','Consolas',monospace; font-size:1.02rem; color:#995b5b; }
.eng-sentence-ko { font-size:0.84rem; color:var(--eng-dim); margin-top:4px; }