/* 과학 아틀라스 — 기계 놀이판 공용 (도르래 판 /pulley/ · 타워크레인 판 /crane/, 2026-10-02)
   무대 = 생성 그림(미니어처 디오라마) 한 장 + 그 위에 같은 크기의 SVG 한 겹.
   SVG 의 viewBox 는 그림의 원래 픽셀(1376×768)이라, 줄·바퀴·짐의 자리는 그림에서 잰 값을 그대로 쓴다. */
.mc-sec{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--ink-3)}
.mc-h{font-family:var(--disp);font-weight:700;font-size:19px;margin-bottom:8px}
.mc-tip{color:var(--chalk-dim);font-size:14.5px;line-height:1.7;margin-bottom:12px;word-break:keep-all}

.mc-chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.mc-chips button{font-family:inherit;font-size:13px;color:var(--chalk);background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:999px;padding:7px 13px;cursor:pointer;transition:.16s}
.mc-chips button:hover{border-color:var(--brass)}
.mc-chips button.on{border-color:var(--brass);background:var(--ink-3);color:var(--brass-soft,#e3c76a)}
.mc-chips button em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--chalk-dim);margin-left:5px}

.mc-stage{position:relative;border-radius:var(--radius,12px);overflow:hidden;background:#8d99a6;user-select:none;-webkit-user-select:none;touch-action:none}
.mc-bg{display:block;width:100%;height:auto;pointer-events:none}
.mc-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mc-rope{fill:none;stroke:#c9a66b;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.mc-cable{fill:none;stroke:#2b2f36;stroke-width:3}
.mc-knob{cursor:grab}
.mc-knob circle{fill:#C9A227;stroke:#fff6d6;stroke-width:4}
.mc-knob.pulse circle{animation:mc-pulse 1.6s ease-in-out infinite}
@keyframes mc-pulse{0%,100%{r:24}50%{r:30}}
.mc-knob text{font-size:22px;fill:#1b2740;font-weight:700;pointer-events:none}
.mc-dim{font-family:var(--mono);font-size:20px;fill:#e9f6fa}
.mc-guide{stroke:#6FB7C9;stroke-width:3;stroke-dasharray:10 8;fill:none}

/* 판 위의 말 — 그림을 보며 누르다 보니 판 아래 글은 안 읽는다(2026-10-01 왕두목). 그래서 판 위에 띄운다 */
.mc-say{position:absolute;left:2.5%;right:2.5%;top:3%;z-index:6;margin:0;font-size:14.5px;line-height:1.6;color:#1b2740;
  background:rgba(247,244,235,.93);border-radius:9px;padding:9px 13px;box-shadow:0 4px 14px rgba(0,0,0,.14);
  transition:opacity .3s;pointer-events:none;word-break:keep-all}
.mc-say:empty{display:none}
.mc-hud{position:absolute;left:2.5%;bottom:3%;z-index:5;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.mc-hud span{font-size:12.5px;color:#f4f1e8;background:rgba(12,21,38,.78);border-radius:7px;padding:5px 9px;font-family:var(--body)}
.mc-hud b{color:#f0d27a;font-weight:600}

.mc-row{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.mc-reset{background:none;border:1px solid var(--ink-3);color:var(--chalk-dim);border-radius:999px;padding:6px 14px;font-size:13px;font-family:inherit;cursor:pointer}
.mc-reset:hover{color:var(--chalk);border-color:var(--chalk-dim)}

/* 일꾼 줄 — 필요한 사람 수를 그림으로 센다 */
.mc-crew{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-end;min-height:46px;padding:8px 10px;margin-top:8px;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:10px}
.mc-crew img{width:34px;height:auto;animation:mc-pop .3s ease-out both}
.mc-crew .mc-crew-n{margin-left:auto;font-size:13px;color:var(--chalk-dim);align-self:center}
.mc-crew .mc-crew-n b{color:var(--brass);font-size:17px}
@keyframes mc-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* 짐 선반 */
.mc-tray{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 6px}
.mc-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;width:96px;padding:8px 4px 7px;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:10px;color:var(--chalk);font-size:12.5px;cursor:grab;touch-action:none}
.mc-item img{width:72px;height:46px;object-fit:contain;pointer-events:none}
.mc-item b{font-family:var(--mono);font-size:11px;color:var(--brass);font-weight:500}
.mc-item.is-used{opacity:.35}
.mc-ghost{position:fixed;left:0;top:0;z-index:100;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}

.mc-wobble{animation:mc-wob .5s ease-in-out infinite;transform-origin:27.5% 80%}
@keyframes mc-wob{0%,100%{transform:rotate(0)}50%{transform:rotate(1.4deg)}}
.mc-alarm{position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 0 6px rgba(214,64,52,.85);animation:mc-blink .6s steps(2) infinite}
@keyframes mc-blink{50%{opacity:.25}}

.mc-chart{max-width:440px;margin-top:10px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:10px;padding:8px 10px 6px}
.mc-chart svg{display:block;width:100%;height:auto}
.mc-chart .ax{stroke:var(--chalk-dim);stroke-width:1}
.mc-chart .cv{fill:none;stroke:#6FB7C9;stroke-width:2.5}
.mc-chart text{font-size:10px;fill:var(--chalk-dim);font-family:var(--mono)}
.mc-chart .dot{fill:#C9A227;stroke:#fff;stroke-width:1.5}
.mc-chart .dot.bad{fill:#d64034}

@media (max-width:640px){
  .mc-say{font-size:12.5px;padding:6px 9px;line-height:1.5}
  .mc-hud span{font-size:11px;padding:3px 6px}
  .mc-item{width:80px}
  .mc-crew img{width:24px}
}
@media (prefers-reduced-motion:reduce){.mc-wobble,.mc-knob.pulse circle,.mc-alarm{animation:none}}
.mc-rig{position:relative}