/* =====================================================================
   experimentLab：目盛りの読み取り（メスシリンダー・電流計・電圧計・温度計）
   計器の絵の色は、ふたばサバイバル Ver.1.3.29 の gaugeRead と同じ。
   ===================================================================== */
.exl-m-gauge .exl-stage{background:radial-gradient(ellipse at 30% 0%,#fbf8ef,#ece5d3)}
.exl-g{padding:12px 14px 16px}
.exl-g-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 10px}
.exl-g-no{display:inline-block;padding:3px 12px;border-radius:999px;background:#3a3428;color:#f3e3b8;font-weight:700;font-size:14px}
.exl-g-prompt{margin:0;font-weight:700;font-size:17px;line-height:1.6;flex:1 1 300px}
.exl-g-main{display:flex;gap:16px;align-items:stretch}
.exl-g-view{flex:1 1 56%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;border-radius:16px;background:linear-gradient(#3b3a33,#2a2924);box-shadow:inset 0 0 0 2px #8a6a2a}
.exl-g-cap{font-weight:700;font-size:15px;color:#f6d98a;letter-spacing:.04em}
.exl-g-pic{width:100%;display:flex;justify-content:center}
.exl-g-svg{display:block}
.exl-g-svg.tall{height:min(62vh,540px);width:auto;max-width:100%}
.exl-g-svg.tall.zoom{height:auto;width:100%;max-width:560px;max-height:62vh;border-radius:10px;box-shadow:0 0 0 3px #d8a73a;background:#e9e2d2}
.exl-g-svg.meter{width:100%;max-width:560px;height:auto;max-height:62vh}
.exl-g-svg.meter.zoom{border-radius:10px;box-shadow:0 0 0 3px #d8a73a}
.exl-g-zb{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #b88a35;background:#4a3b22;color:#f3e3b8;font-weight:700;font-size:15px;cursor:pointer}
.exl-g-zb.on{background:#d8a73a;color:#2a1d08}
.exl-g-panel{flex:1 1 320px;max-width:420px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.exl-g-box{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:#111;box-shadow:inset 0 0 0 2px #8a6a2a;cursor:text}
.exl-g-lbl{color:#c9b98e;font-size:13px;font-weight:700;white-space:nowrap}
.exl .exl-g-num{flex:1;min-width:0;width:5em;margin:0;padding:2px 0;border:0;background:transparent;color:#9ef0a8;font:700 32px/1.2 "DotGothic16",ui-monospace,Menlo,monospace;text-align:right;outline:none;box-shadow:none}
.exl .exl-g-num:focus{color:#d6ffd9}
.exl-g-u{color:#9ef0a8;font-weight:700;font-size:20px;min-width:2em}
.exl-g-units{display:flex;gap:8px}
.exl-g-ub{flex:1;min-height:46px;border-radius:12px;border:2px solid #8a6a2a;background:#fff;color:#3a2a10;font-weight:700;font-size:18px;cursor:pointer}
.exl-g-ub.on{background:#2f6f52;border-color:#2f6f52;color:#fff}
.exl-g-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.exl-g-steps.n2{grid-template-columns:repeat(4,1fr)}
.exl-g-sb{min-width:0;min-height:52px;padding:0 2px;border-radius:12px;border:1px solid #b88a35;background:linear-gradient(#5a4828,#3e311b);color:#f6e2b0;font-weight:700;font-size:15px;cursor:pointer;touch-action:manipulation}
.exl-g-sb:active{filter:brightness(.82)}
.exl-g-go{width:100%;min-height:54px;font-size:18px}
.exl-g-fb{min-height:1.5em;margin:0;font-weight:700;line-height:1.5}
.exl-g-fb.ng{color:var(--exl-ng)}
.exl-g-show{align-self:center}
.exl-g-res{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px;border-radius:14px;background:#1f5a3c;color:#eafff2;box-shadow:inset 0 0 0 3px #8fe0b0}
.exl-g-res.show{background:#4a3b22;color:#fff1cf;box-shadow:inset 0 0 0 3px #d8a73a}
.exl-g-res b{font-size:18px;letter-spacing:.08em}
.exl-g-big{font:700 38px/1.15 "DotGothic16",ui-monospace,Menlo,monospace}
.exl-g-big small{font-size:22px}
.exl-g-exp{margin:0;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);font-size:15.5px;line-height:1.7}
.exl-g-nav{display:flex;justify-content:center}
/* 計器の絵 */
.exl-g-board{fill:#a77b47;stroke:#5c3d1c;stroke-width:3}
.exl-g-bench{fill:#e9e2d2;stroke:#8f846c;stroke-width:3}
.exl-g-screw{fill:#d9b56a;stroke:#7a5a22;stroke-width:1.5}
.exl-g-glass{fill:rgba(240,248,255,.92);stroke:#6f8796;stroke-width:2}
.exl-g-gl2{fill:rgba(255,255,255,.55)}
.exl-g-red{fill:#d8322a}
.exl-g-bulb{fill:#d8322a;stroke:#7e1712;stroke-width:2}
.exl-g-shine{fill:rgba(255,255,255,.6)}
.exl-g-water{fill:rgba(90,160,225,.55)}
.exl-g-surf{fill:none;stroke:#1f5f99;stroke-width:1.4}
.exl-g-foot{fill:#c9d6de;stroke:#6f8796;stroke-width:2}
.exl-tk{stroke:#1d1a14;stroke-width:1.05;stroke-linecap:butt}
.exl-tk.m{stroke-width:1.35}
.exl-tk.b{stroke-width:1.8}
.exl-nm{font:700 12.5px/1 "Zen Maru Gothic",system-ui,sans-serif;fill:#1d1a14}
.exl-g-unit{font:700 14px/1 "Zen Maru Gothic",system-ui,sans-serif;fill:#2a1d08}
.exl-g-case{fill:#2e3134;stroke:#15171a;stroke-width:3}
.exl-g-face{fill:#f7f1e1;stroke:#9a8f75;stroke-width:2}
.exl-g-arc{fill:none;stroke:#1d1a14;stroke-width:1.4}
.exl-nm.in{font-size:11.5px;fill:#7a2a20}
.exl-g-sym{font:700 34px/1 "Zen Maru Gothic",system-ui,sans-serif;fill:#1d1a14;opacity:.85}
.exl-g-needle{stroke:#1d1a14;stroke-width:2.2;stroke-linecap:round}
.exl-g-svg.zoom .exl-g-needle{stroke-width:1.2}
.exl-g-pivot{fill:#4a4d52;stroke:#15171a;stroke-width:2}
.exl-g-term circle{fill:#1f2124;stroke:#8a8f96;stroke-width:2}
.exl-g-term text{font:700 12px/1 "Zen Maru Gothic",system-ui,sans-serif;fill:#e8e4d8}
.exl-g-term.on circle{fill:#111;stroke:#f2d36b;stroke-width:3}
.exl-g-term.plus circle{fill:#b8231c;stroke:#f3a29a}
.exl-g-term path{stroke:#111;stroke-width:6;stroke-linecap:round}
.exl-g-term.plus path{stroke:#c42a20}
.exl-mk{fill:none;stroke:none;pointer-events:none}
@media (max-width:700px){
  .exl-g{padding:10px 8px 12px}
  .exl-g-main{flex-direction:column;gap:10px}
  .exl-g-panel{max-width:none}
  .exl-g-svg.tall{height:min(52vh,440px)}
  .exl-g-svg.tall.zoom{height:auto}
  .exl-g-prompt{font-size:15.5px}
  .exl-g-steps{gap:4px}
  .exl-g-sb{min-height:48px;font-size:14px}
}
/* 横向きのスマホ（高さが小さい） */
@media (max-height:500px) and (orientation:landscape){
  .exl-g-svg.tall{height:min(70vh,420px)}
  .exl-g-svg.tall.zoom{height:auto;max-height:70vh}
  .exl-g-svg.meter{max-height:66vh}
  .exl-g-main{flex-direction:row}
}
.exl.is-full .exl-g{flex:1;overflow:auto}
.exl.is-full .exl-g-svg.tall{height:min(72vh,720px)}
.exl.is-full .exl-g-svg.tall.zoom{height:auto;width:100%;max-width:820px}
.exl.is-full .exl-g-svg.meter{max-width:720px;max-height:72vh}

/* ふたばサバイバルの謎の中で使うとき（EXL.fsv.gaugeRead） */
.exl-gr{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-start;width:min(100%,780px);margin:0 auto;padding:4px;background:transparent}
.exl-gr-item{flex:1 1 200px;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px 12px;border-radius:14px;background:linear-gradient(#3b3a33,#2a2924);box-shadow:inset 0 0 0 2px #8a6a2a}
.exl-gr-item.ammeter,.exl-gr-item.voltmeter{flex-basis:280px;max-width:360px}
.exl-gr-item.ng{box-shadow:inset 0 0 0 3px #e0564a,0 0 14px rgba(224,86,74,.6)}
.exl-gr-item.ok{box-shadow:inset 0 0 0 3px #f2d36b,0 0 14px rgba(242,211,107,.6)}
.exl-gr-cap{font-weight:700;font-size:15px;color:#f6d98a;text-align:center}
.exl-gr-view{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.exl-gr .exl-g-svg.tall{height:min(40vh,330px)}
.exl-gr .exl-g-svg.tall.zoom{height:auto;width:100%}
.exl-gr .exl-g-svg.meter{max-width:340px}
.exl-gr-in{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:100%;max-width:300px}
.exl-gr-in .exl-g-box{grid-column:1/-1;order:-1;justify-content:center}
.exl-gr-in .exl-g-sb{min-height:44px}
.exl-gr .exl-g-num{font-size:22px;width:3.6em;flex:none}
.exl-gr-res{font-weight:700;font-size:18px;color:#f2d36b}
.exl-gr-tip{margin:.7em auto 0;max-width:560px;text-align:center;font-size:.95em;opacity:.9}
/* 横向きのスマホなど、高さの小さい画面：目盛りの絵を作業画面に収める */
@media (max-height:520px){
  .exl-g-svg.tall,.exl.is-full .exl-g-svg.tall{height:calc(var(--exl-sh, 100dvh) - 70px);max-height:none}
  .exl-g-svg.meter,.exl.is-full .exl-g-svg.meter{max-height:calc(var(--exl-sh, 100dvh) - 100px)}
}