.body-explainer-entry { min-height:44px; padding:7px 12px; border:1px solid #adc9bc; border-radius:8px; background:#eef8f3; color:#244e41; font:inherit; font-weight:700; cursor:pointer; }
.menu-board .body-explainer-inline { margin-left:auto; padding:4px 8px; min-width:48px; flex-shrink:0; font-size:15px; }
.body-explainer { width:min(1100px,calc(100vw - 24px)); height:min(960px,calc(100dvh - 24px)); max-width:none; max-height:none; padding:0; border:1px solid #d2e3da; border-radius:20px; background:#f3f8f5; color:#183b30; overflow:hidden; box-shadow:0 24px 90px #09231c55; }
.body-explainer[open] { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; }
.body-explainer::backdrop { background:#102b24b3; }
.body-explainer * { box-sizing:border-box; }
.body-explainer [hidden] { display:none !important; }
.body-explainer header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; background:white; border-bottom:1px solid #dfebe5; }
.body-explainer h2 { margin:0; font-size:24px; line-height:1.3; }
.body-explainer header p { margin:4px 0 0; color:#62796e; font-size:14px; }
.body-explainer button, .body-explainer select { min-height:44px; padding:8px 13px; border:1px solid #c3d6ca; border-radius:9px; color:#224637; background:white; font:inherit; font-size:16px; cursor:pointer; touch-action:manipulation; }
.body-explainer button:focus-visible, .body-explainer select:focus-visible, .body-explainer-entry:focus-visible { outline:3px solid #2c7d65; outline-offset:3px; }
.body-explainer button:disabled { opacity:.4; cursor:default; }
.body-explainer button[aria-pressed="true"] { background:#245c49; border-color:#245c49; color:white; }
.body-explainer-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px 20px; }
.body-explainer-group { display:flex; align-items:center; gap:6px; }
.body-explainer label { display:flex; align-items:center; gap:6px; font-size:14px; }
.body-explainer-stage { position:relative; min-height:0; min-width:0; margin:0 20px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid #d8e6dd; border-radius:12px; background:#e8f0eb; }
.body-explainer-surface { position:relative; flex-shrink:0; background:white; overflow:hidden; }
.body-explainer-surface img { display:block; width:100%; height:100%; pointer-events:none; user-select:none; }
.body-explainer canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.body-explainer[data-tool="eraser"] canvas { cursor:cell; }
.body-explainer footer { padding:10px 22px; color:#5c7466; font-size:13px; line-height:1.5; }
.body-explainer footer p { margin:2px 0; }
.body-explainer-confirm { display:flex; gap:10px; align-items:center; flex-wrap:wrap; width:100%; padding:10px; border:1px solid #d3b096; border-radius:10px; background:#fff6ef; }
@media(max-width:650px) {
  .body-explainer { width:calc(100vw - 12px); height:calc(100dvh - 12px); border-radius:12px; }
  .body-explainer header { padding:10px 12px; gap:8px; }
  .body-explainer h2 { font-size:20px; }
  .body-explainer header p { font-size:12px; }
  .body-explainer-controls { gap:7px; padding:8px 10px; }
  .body-explainer button,.body-explainer select { padding:7px 10px; font-size:14px; }
  .body-explainer-stage { margin:0 10px; }
  .body-explainer footer { padding:6px 12px; font-size:12px; }
}
@media print { .body-explainer,.body-explainer-entry { display:none !important; } }