/* ─────────────────────────────────────────────────────────────
   フィールド｜作りかけの実験室 ── 制御盤の扉
   盤面＝塗装色 5Y7/1（JEM 1135）。黒銘板・表示灯・非常停止・貼り紙・付箋。
   単一テーマ（実物の盤は一色）。色は必ずここから取る。
   ───────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;
  --panel:#C3BDAF;        /* 盤面（照明下の 5Y7/1） */
  --panel-hi:#CDC7B9;     /* 盤面の明るい側 */
  --panel-deep:#ADA697;   /* 盤の縁・くぼみ */
  --groove:#948D7E;       /* 溝の影線 */
  --ink:#1F1B17;          /* 墨 */
  --ink-soft:#5E584F;
  --ink-faint:#8A8377;
  --plate:#1A1B1D;        /* 黒銘板 */
  --plate-2:#2A2B2E;
  --plate-text:#F1EFE9;
  --plate-muted:#A9A79F;
  --paper:#F7F4ED;        /* 貼り紙 */
  --paper-line:#D9D3C4;
  --fusen:#F3DCCB;        /* 付箋（薄あんず） */
  --fusen-line:#E2C2A9;
  --amber:#E2894B;        /* あんず色（電源・試作） */
  --amber-deep:#B8622F;
  --amber-hi:#FBE0C2;
  --run:#5FB07A;          /* 運転（実用） */
  --run-deep:#3B7D53;
  --run-hi:#CDEBD6;
  --err:#B8362B;          /* 異常・非常停止（唯一の赤） */
  --err-deep:#7E2119;
  --err-hi:#F1B2A8;
  --collar:#D9B640;       /* 非常停止の黄色い台座 */
  --collar-deep:#A8862A;
  --reset:#3D6AA6;        /* 青のリセットボタン */
  --reset-hi:#9DBBE3;
  --reset-deep:#264A7A;
  --tape:rgba(122,182,140,.72);   /* 養生テープ */
  --screen:#12150F;       /* 画面（緑蛍光） */
  --screen-text:#BFE3A6;
  --mono:'IBM Plex Mono','Consolas','Menlo',monospace;
  --dot:'DotGothic16','IBM Plex Mono','Consolas',monospace;
  --gothic:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic UI','Meiryo',sans-serif;
  --mincho:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;
  --eng:'M PLUS Rounded 1c','Hiragino Maru Gothic ProN','Yu Gothic UI','Meiryo',sans-serif;   /* 彫刻文字（丸い刃で彫った単線の丸ゴシック） */
  --marker:'Yusei Magic','Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;        /* ホワイトボードのマーカー */
  --radius:3px;
  --wrap:1040px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--panel);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:16px;line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:20px;padding-right:20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--plate);color:var(--plate-text);padding:6px 12px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.pc{display:none}

/* ── 溝（盤の区画線。塗装面の段差） ── */
.groove{height:0;border-top:1px solid var(--groove);border-bottom:1px solid rgba(255,255,255,.45)}

/* ── ねじ（プラス。溝の向きは実物どおりバラバラ） ── */
.screw{
  position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#DAD6CA 0,#9E998E 45%,#5F5A52 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.45),0 1px 1px rgba(255,255,255,.18);
}
.screw::before,.screw::after{content:"";position:absolute;background:rgba(0,0,0,.7);box-shadow:0 1px 0 rgba(255,255,255,.2)}
.screw::before{left:18%;right:18%;top:calc(50% - .7px);height:1.4px}
.screw::after{top:18%;bottom:18%;left:calc(50% - .7px);width:1.4px;box-shadow:1px 0 0 rgba(255,255,255,.2)}
.screw:nth-of-type(1){transform:rotate(12deg)}
.screw:nth-of-type(2){transform:rotate(-38deg)}
.screw:nth-of-type(3){transform:rotate(71deg)}
.screw:nth-of-type(4){transform:rotate(-9deg)}

/* ── 黒銘板 ── */
.plate{
  position:relative;
  background:linear-gradient(180deg,var(--plate-2),var(--plate));
  color:var(--plate-text);
  border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.4),0 2px 4px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.07);
}
/* 彫り枠線（黒の上層を彫ると白の下層が出る＝細い白線）と、アクリルの艶 */
.plate::before{content:"";position:absolute;inset:7px;border:1px solid rgba(237,235,227,.42);border-radius:2px;pointer-events:none}
.plate::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.05) 28%,rgba(255,255,255,0) 46%)}
/* 彫刻文字：白の下層が見える。上縁に黒の厚みの影、下縁にわずかな光 */
.eng{
  font-family:var(--eng);font-weight:700;
  background:linear-gradient(180deg,#B3B0A7 0,#ECEAE2 30%,#F6F4EE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.16));
}
.plate.big{padding:26px 30px 22px}
.plate.big .screw:nth-of-type(1){left:9px;top:9px}
.plate.big .screw:nth-of-type(2){right:9px;top:9px}
.plate.big .screw:nth-of-type(3){left:9px;bottom:9px}
.plate.big .screw:nth-of-type(4){right:9px;bottom:9px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--plate-muted);margin-bottom:10px}
h1{
  font-size:clamp(28px,5.2vw,44px);font-weight:700;line-height:1.3;
  letter-spacing:.2em;text-wrap:balance;
}
/* 銘板の決まり文句：型式・製番・製造者 */
.spec{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(237,235,227,.28);position:relative}
.spec div{display:flex;gap:9px;align-items:baseline}
.spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--plate-muted)}
.spec dd{font-family:var(--eng);font-weight:500;font-size:12.5px;letter-spacing:.16em;color:#DAD7CE}
.plate.big .sub{font-size:clamp(14px,2vw,17px);color:#D9D6CD;letter-spacing:.08em;margin-top:8px;font-weight:500}

.plate.mid{
  display:inline-flex;align-items:baseline;gap:14px;
  padding:9px 30px 9px 30px;margin-bottom:18px;
}
.plate.mid .screw{top:50%;margin-top:-5px}
.plate.mid .screw:nth-of-type(1){left:9px}
.plate.mid .screw:nth-of-type(2){right:9px}
.plate.mid .jp{font-size:21px;letter-spacing:.3em}
.plate.mid .en{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--plate-muted)}

/* ── 操作面（追従ヘッダ） ── */
.opbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));
  border-bottom:1px solid var(--groove);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.4);
  padding-top:env(safe-area-inset-top);
}
.opbar-in{display:flex;align-items:center;gap:14px;height:58px}
.plate.brand{
  display:inline-flex;align-items:baseline;gap:10px;
  padding:6px 26px;height:36px;white-space:nowrap;
}
.plate.brand .screw{width:8px;height:8px;top:50%;margin-top:-4px}
.plate.brand::before{inset:5px}
.plate.brand .screw:nth-of-type(1){left:8px}
.plate.brand .screw:nth-of-type(2){right:8px}
.brand-name{letter-spacing:.2em;font-size:14.5px}
.brand-sub{font-size:11px;letter-spacing:.1em;color:var(--plate-muted)}
.rooms{display:flex;gap:4px;margin-left:6px}
.rooms a{
  font-size:13.5px;font-weight:500;letter-spacing:.08em;color:var(--ink-soft);
  padding:6px 10px;border-radius:var(--radius);white-space:nowrap;
}
[hidden]{display:none !important}
.rooms a:hover{color:var(--ink);background:rgba(255,255,255,.35)}
.opbar .estop{margin-left:auto}

/* ── 非常停止ボタン（赤きのこ・黄色台座） ── */
.estop{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  margin:0 14px 0 auto;
  background:radial-gradient(circle at 40% 32%,#EBA48F 0,#C9463A 38%,#8E2418 100%);
  box-shadow:0 0 0 5px var(--collar),0 3px 0 5px var(--collar-deep),0 6px 10px rgba(0,0,0,.35);
  transition:transform .08s ease,box-shadow .08s ease;
}
.estop:hover{filter:brightness(1.05)}
.estop[aria-pressed="true"]{
  transform:translateY(3px);
  background:radial-gradient(circle at 40% 32%,#D98F7C 0,#B23D32 38%,#7E2118 100%);
  box-shadow:0 0 0 5px var(--collar),0 0 0 5px var(--collar-deep),0 2px 4px rgba(0,0,0,.3);
}
.estop:focus-visible{outline-offset:8px}

/* ── 押しボタン（黒・表示灯つき） ── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,var(--plate-2),var(--plate));color:var(--plate-text);
  padding:13px 22px;border-radius:var(--radius);
  font-weight:700;letter-spacing:.08em;font-size:15px;line-height:1.3;
  box-shadow:0 3px 0 #000,0 5px 8px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform .08s ease,box-shadow .08s ease;
}
.btn small{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--plate-muted);margin-top:3px}
.btn:hover{background:linear-gradient(180deg,#34353A,#1F2022)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 #000,0 1px 3px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.07)}
.btn.ghost{
  background:transparent;color:var(--ink);box-shadow:none;
  border:1px solid var(--ink-soft);padding:12px 20px;font-weight:500;
}
.btn.ghost:hover{background:rgba(255,255,255,.35)}
.btn.ghost:active{transform:translateY(1px)}
.btn.mini{padding:8px 14px;font-size:13px;gap:7px;flex-shrink:0}
.btn .ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}

/* ── 表示灯 ── */
.lamp{
  display:inline-block;width:14px;height:14px;border-radius:50%;flex-shrink:0;vertical-align:-2px;
  background:radial-gradient(circle at 35% 30%,#8B8880 0,#66635D 50%,#4E4B46 100%);
  box-shadow:0 0 0 2px #3A3835,0 0 0 3px rgba(255,255,255,.25);
  transition:background .25s ease,box-shadow .25s ease;
}
.lamp.sm{width:11px;height:11px;box-shadow:0 0 0 1.5px #3A3835,0 0 0 2.5px rgba(255,255,255,.25)}
.lamp.pwr.on,.lamp.amber.on{
  background:radial-gradient(circle at 35% 30%,var(--amber-hi) 0,var(--amber) 42%,var(--amber-deep) 100%);
  box-shadow:0 0 0 2px #3A3835,0 0 0 3px rgba(255,255,255,.25),0 0 10px rgba(226,137,75,.6);
}
.lamp.run.on{
  background:radial-gradient(circle at 35% 30%,var(--run-hi) 0,var(--run) 42%,var(--run-deep) 100%);
  box-shadow:0 0 0 2px #3A3835,0 0 0 3px rgba(255,255,255,.25),0 0 10px rgba(95,176,122,.6);
}
.lamp.err.on{
  background:radial-gradient(circle at 35% 30%,var(--err-hi) 0,var(--err) 42%,var(--err-deep) 100%);
  box-shadow:0 0 0 2px #3A3835,0 0 0 3px rgba(255,255,255,.25),0 0 10px rgba(184,54,43,.6);
}
.lamp.sm.on{box-shadow:0 0 0 1.5px #3A3835,0 0 0 2.5px rgba(255,255,255,.25),0 0 7px rgba(0,0,0,0)}
.lamp.sm.amber.on{box-shadow:0 0 0 1.5px #3A3835,0 0 0 2.5px rgba(255,255,255,.25),0 0 7px rgba(226,137,75,.55)}
.lamp.sm.run.on{box-shadow:0 0 0 1.5px #3A3835,0 0 0 2.5px rgba(255,255,255,.25),0 0 7px rgba(95,176,122,.55)}
.lamp.sm.err.on{box-shadow:0 0 0 1.5px #3A3835,0 0 0 2.5px rgba(255,255,255,.25),0 0 7px rgba(184,54,43,.55)}

/* ── 扉（入口） ── */
.hero{padding-top:40px;padding-bottom:40px}
main{background:linear-gradient(180deg,var(--panel-hi) 0,var(--panel) 260px)}
.status{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;
  margin:22px 0 10px;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink-soft);
}
.ind{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.ind small,.hm small{font-size:10px;letter-spacing:.14em;color:var(--ink-faint);margin-left:4px}
.hm{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hm .drum{
  font-variant-numeric:tabular-nums;font-weight:600;
  background:var(--plate);color:var(--plate-text);
  padding:2px 7px;border-radius:2px;letter-spacing:.14em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.35);
}
.hm .dot{color:var(--plate-muted);letter-spacing:0}
.hm .dec{color:var(--amber)}
.screen{
  display:flex;align-items:center;
  font-family:var(--dot);font-size:15px;line-height:1;letter-spacing:.04em;
  background:var(--screen);color:var(--screen-text);
  padding:10px 13px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 22px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.35);
  white-space:pre;overflow:hidden;
}
.screen.small{font-size:13px;padding:8px 11px;display:inline-flex}
.cur{display:inline-block;width:.55em;height:1em;background:currentColor;margin-left:3px;animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.quote{margin:34px 0 14px;border-left:3px solid var(--amber);padding-left:18px}
.quote p{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(19px,2.8vw,25px);line-height:1.7;letter-spacing:.04em;text-wrap:balance;
  word-break:keep-all;overflow-wrap:anywhere;   /* 「ですが、」の途中で折らない。読点・句点で折る */
}
.quote cite{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-faint);margin-top:8px}
.intro{max-width:640px;color:var(--ink);text-wrap:pretty}

/* 室名札 */
.signs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0 26px}
.sign{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 18px 11px;
  background:linear-gradient(180deg,#EFECE4,#DAD6CB);
  border:1px solid #97928A;border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.25);
  transition:transform .12s ease,box-shadow .12s ease;
}
.sign::before,.sign::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#5F5A52;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.sign::before{left:8px}.sign::after{right:8px}
.sign b{font-size:18px;letter-spacing:.3em;text-indent:.3em;font-weight:700}
.sign span{font-size:12px;letter-spacing:.06em;color:var(--ink-soft)}
.sign:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 6px rgba(0,0,0,.25)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}

/* ── 各部屋の共通 ── */
.room{padding-top:44px;padding-bottom:48px;scroll-margin-top:calc(72px + env(safe-area-inset-top))}
#top{scroll-margin-top:calc(58px + env(safe-area-inset-top))}   /* 先頭へ戻る時も銘板をヘッダに隠さない */
.lede{max-width:680px;margin-bottom:26px;text-wrap:pretty}
.sub-h{display:flex;align-items:baseline;gap:10px;font-size:17px;font-weight:700;letter-spacing:.12em;margin:34px 0 14px}
.sub-h small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-faint);font-weight:400}
.to-post{margin-top:26px;font-size:14.5px;color:var(--ink-soft)}
.to-post a{margin-left:10px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--ink-soft);padding-bottom:1px}
.to-post a:hover{border-color:var(--amber);color:var(--amber-deep)}

/* 紙 */
.paper{
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(30,27,23,.18),0 8px 18px rgba(30,27,23,.10);
}

/* ── 実験室 ── */
.rules{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rules li{
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:14px 16px 14px 18px;font-size:14.5px;line-height:1.75;
  box-shadow:0 1px 2px rgba(30,27,23,.18),0 6px 14px rgba(30,27,23,.08);
  position:relative;
}
.rules li::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:var(--amber)}
.rules li b{display:block}
.notes{list-style:none;display:grid;gap:12px;max-width:760px}
.notes li>a,.notes li>div{
  display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;row-gap:2px;align-items:baseline;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:14px 18px 13px;
  box-shadow:0 1px 2px rgba(30,27,23,.18),0 6px 14px rgba(30,27,23,.08);
  transition:transform .12s ease,box-shadow .12s ease;
}
.notes li>a:hover{transform:translateY(-2px);box-shadow:0 2px 3px rgba(30,27,23,.18),0 10px 20px rgba(30,27,23,.14)}
.notes .no{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--amber-deep);font-weight:600}
.notes time{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-faint)}
.notes b{grid-column:1/-1;font-size:16.5px;letter-spacing:.02em;line-height:1.5}
.notes span:not(.no){grid-column:1/-1;font-size:13.5px;color:var(--ink-soft);line-height:1.7}
.notes li>a::after{content:"→";grid-column:3;grid-row:1;justify-self:end;font-family:var(--mono);color:var(--ink-faint)}
.notes .next>div{border-style:dashed;background:transparent;box-shadow:none}
.notes .next .no{color:var(--ink-faint)}
.notes .kari{font-size:12px;font-weight:400;color:var(--ink-faint);margin-left:6px;white-space:nowrap}

/* ── 展示室 ── */
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:34px;font-size:13.5px;letter-spacing:.04em;color:var(--ink-soft)}
.legend>span{display:inline-flex;align-items:center;gap:8px}
.legend b{font-family:var(--mono);font-size:14px;color:var(--ink)}
.legend small{font-size:11.5px;color:var(--ink-faint)}
.wall{columns:3 280px;column-gap:24px;padding-top:12px}
.card{
  position:relative;break-inside:avoid;margin:0 0 26px;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:14px 14px 12px;
  box-shadow:0 1px 2px rgba(30,27,23,.18),0 8px 18px rgba(30,27,23,.10);
  transition:transform .15s ease,box-shadow .15s ease;
}
.card:nth-child(3n+1){transform:rotate(-.6deg)}
.card:nth-child(3n+2){transform:rotate(.5deg)}
.card:nth-child(3n){transform:rotate(-.3deg)}
.card:hover{transform:rotate(0) translateY(-2px);box-shadow:0 2px 3px rgba(30,27,23,.18),0 12px 24px rgba(30,27,23,.16);z-index:1}
.card::before{
  content:"";position:absolute;left:50%;top:-11px;width:78px;height:22px;margin-left:-39px;
  background:var(--tape);transform:rotate(-2deg);
  border-left:1px dashed rgba(255,255,255,.55);border-right:1px dashed rgba(255,255,255,.55);
  box-shadow:0 1px 1px rgba(0,0,0,.12);
}
.card img{width:100%;border:1px solid #E6E1D4;background:#fff;margin-bottom:12px}
.card h3{font-size:15.5px;font-weight:700;letter-spacing:.04em;line-height:1.5;margin-bottom:4px}
.card p{font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
.card .meta{display:flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink)}
.card .meta a{margin-left:auto;color:var(--amber-deep);font-weight:600}
.card .meta a:hover{text-decoration:underline}
.card .meta .st{margin-left:auto;color:var(--ink-faint)}
.card.fusen{
  background:var(--fusen);border-color:var(--fusen-line);
  padding:18px 18px 16px;
  box-shadow:0 1px 2px rgba(30,27,23,.15),0 6px 12px rgba(30,27,23,.08);
}
.card.fusen::before{
  left:auto;top:auto;right:-1px;bottom:-1px;width:20px;height:20px;margin:0;transform:none;
  border:0;box-shadow:-1px -1px 2px rgba(0,0,0,.12);
  background:linear-gradient(225deg,var(--panel) 50%,var(--fusen-line) 50%);
}
.card.fusen h3{font-size:16px}
.card.fusen p{color:var(--ink-soft)}

/* ── アトリエ ── */
.tags{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
.tag{
  position:relative;background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:14px 16px 13px 38px;font-size:14px;line-height:1.7;
  box-shadow:0 1px 2px rgba(30,27,23,.18),0 6px 14px rgba(30,27,23,.08);
}
.tag::before{
  content:"";position:absolute;left:12px;top:17px;width:11px;height:11px;border-radius:50%;
  border:2.5px solid #B3AC9C;background:var(--panel);
}
.tag b{display:block;font-size:15.5px;letter-spacing:.03em;margin-bottom:2px}
.tag span{color:var(--ink-soft)}
.tag span a{color:var(--amber-deep);font-weight:700;margin-left:4px;white-space:nowrap}
.tag span a:hover{text-decoration:underline}
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.split h3{font-size:16.5px;font-weight:700;letter-spacing:.1em;margin-bottom:10px}
.line-draw{padding:20px 22px 18px}
.line-draw p{font-size:14.5px;color:var(--ink-soft);margin-bottom:14px;text-wrap:pretty}
.line-draw p b{color:var(--ink)}
.tbl-wrap{overflow-x:auto}
.proc{width:100%;border-collapse:collapse;font-size:13.5px}
.proc caption{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-faint);margin-bottom:6px}
.proc th,.proc td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--paper-line)}
.proc th{font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--ink-soft);border-bottom:1.5px solid var(--ink-soft)}
.proc td:last-child{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;white-space:nowrap}
.proc td.ai{color:var(--amber-deep);font-weight:600}
.kime ul{list-style:none;display:grid;gap:12px}
.kime li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.7}
.kime li::before{content:"";position:absolute;left:0;top:.8em;width:11px;height:2px;background:var(--amber)}
.kime li b{display:block;font-size:15.5px}
.kime li span{color:var(--ink-soft)}
.desk-h{margin-top:28px}
.desk{list-style:none;display:grid;gap:8px}
.desk li{font-size:14.5px;display:flex;gap:12px;align-items:baseline}
.desk time{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--amber-deep);white-space:nowrap;min-width:56px;font-weight:600}
.staff{
  margin:36px 0 0 auto;width:min(230px,60%);
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:10px 10px 8px;transform:rotate(-1.5deg);
  box-shadow:0 1px 2px rgba(30,27,23,.18),0 8px 18px rgba(30,27,23,.10);
}
.staff img{width:100%;background:#fff}
.staff figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft);margin-top:8px;text-align:center}

/* ── 郵便受け（ラダー回路の購読ボタン） ── */
.rung{
  display:block;position:relative;max-width:760px;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:22px 22px 18px;
  box-shadow:0 1px 2px rgba(30,27,23,.18),0 8px 18px rgba(30,27,23,.10);
  transition:transform .12s ease,box-shadow .12s ease;
  cursor:pointer;
}
.rung::before{content:"";position:absolute;inset:9px;border:1.5px solid var(--ink);pointer-events:none;opacity:.85}
.rung:hover{transform:translateY(-2px);box-shadow:0 2px 3px rgba(30,27,23,.18),0 12px 24px rgba(30,27,23,.16)}
.rung:active{transform:translateY(1px)}
.rung svg{display:block;width:100%;height:auto;max-height:190px}
.rung .rail,.rung .wire,.rung .contact,.rung .coil{stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:round;transition:stroke .18s ease,stroke-width .18s ease}
.rung .rail{stroke-width:4}
.rung .bridge{stroke:var(--run);stroke-width:4;opacity:0;transition:opacity .18s ease}
.rung .glow{fill:var(--amber);opacity:0;transition:opacity .18s ease}
.rung .lbl{font-family:var(--gothic);font-size:17px;font-weight:700;letter-spacing:.2em;fill:var(--ink)}
.rung .adr{font-family:var(--mono);font-size:12px;letter-spacing:.14em;fill:var(--ink-faint)}
.rung .w1,.rung .w2,.rung .w3{transition-delay:0s}
.rung.on .w1,.rung:hover .w1,.rung:focus-visible .w1{stroke:var(--run);stroke-width:4}
.rung.on .contact,.rung:hover .contact,.rung:focus-visible .contact{stroke:var(--run);stroke-width:4}
.rung.on .bridge,.rung:hover .bridge,.rung:focus-visible .bridge{opacity:1}
.rung.on .w2,.rung:hover .w2,.rung:focus-visible .w2{stroke:var(--run);stroke-width:4;transition-delay:.08s}
.rung.on .coil,.rung:hover .coil,.rung:focus-visible .coil{stroke:var(--amber-deep);stroke-width:4;transition-delay:.14s}
.rung.on .glow,.rung:hover .glow,.rung:focus-visible .glow{opacity:1;transition-delay:.14s}
.rung.on .w3,.rung:hover .w3,.rung:focus-visible .w3{stroke:var(--run);stroke-width:4;transition-delay:.2s}
.rung-cap{display:block;margin-top:8px;padding:0 6px;font-size:15px;letter-spacing:.02em}
.rung-cap span{display:block;font-size:13px;color:var(--ink-soft)}
.titleblock{
  position:absolute;right:20px;bottom:18px;
  display:flex;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-soft);
  border:1px solid var(--ink);background:var(--paper);
}
.titleblock>span{padding:3px 8px;border-left:1px solid var(--ink);display:flex;flex-direction:column;line-height:1.4}
.titleblock>span:first-child{border-left:0}
.titleblock small{font-size:9px;letter-spacing:.14em;color:var(--ink-faint)}
.fine{margin-top:22px;font-size:13px;color:var(--ink-soft);line-height:1.8}
.fine a{border-bottom:1px solid var(--ink-faint);color:var(--ink)}
.fine a:hover{color:var(--amber-deep);border-color:var(--amber)}


/* ── ホワイトボード（今週の板・マーカー手書き・消した跡） ── */
.wb{max-width:780px}
.wb-board{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#FCFCFA 0,#F3F4F1 55%,#ECEDEA 100%);
  border:7px solid #CBCCC8;border-radius:3px;
  box-shadow:inset 0 0 0 1px #A9AAA6,inset 0 2px 10px rgba(0,0,0,.08),0 1px 2px rgba(30,27,23,.18),0 8px 18px rgba(30,27,23,.10);
  padding:18px 20px 22px;
  font-family:var(--marker);color:#2A2E33;
}
.wb-board::before{ /* 消し跡のくもり（イレーザーの筋） */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 34% 26% at 58% 30%,rgba(60,64,70,.11),transparent 72%),
    radial-gradient(ellipse 30% 22% at 70% 62%,rgba(60,64,70,.09),transparent 72%),
    repeating-linear-gradient(100deg,rgba(60,64,70,.045) 0 6px,transparent 6px 14px);
  -webkit-mask:radial-gradient(ellipse 45% 40% at 62% 45%,#000 40%,transparent 100%);
  mask:radial-gradient(ellipse 45% 40% at 62% 45%,#000 40%,transparent 100%);
}
.wb-ghost{position:absolute;inset:0;pointer-events:none;color:rgba(42,46,51,.22);filter:blur(.55px);font-size:16px}
.wb-ghost span{position:absolute;white-space:nowrap;text-decoration:line-through;text-decoration-thickness:2px}
.wb-ghost span:nth-child(1){left:41%;top:20%;transform:rotate(-1.5deg)}
.wb-ghost span:nth-child(2){left:44%;top:35%;transform:rotate(.9deg)}
.wb-ghost span:nth-child(3){left:58%;top:84%;transform:rotate(-2.2deg)}
.wb-grid{position:relative;display:grid;grid-template-columns:150px 1fr 1fr;gap:16px 22px}
.wb-fixed{ /* 固定枠＝ラインテープで枠を作った区画 */
  border:2px solid #2A2E33;border-radius:2px;padding:8px 10px 9px;align-self:start;
}
.wb-fixed b{display:block;font-size:19px;font-weight:400;letter-spacing:.04em;line-height:1.3}
.wb-fixed em{display:block;font-style:normal;font-size:14px;color:#2F5FA8;margin-top:2px}
.wb-fixed small{display:block;font-size:11.5px;color:#2F5FA8;margin-top:8px;line-height:1.4;transform:rotate(-1.2deg)}
.wb-col h4{
  display:inline-block;font-size:17px;font-weight:400;letter-spacing:.02em;
  border-bottom:2px solid #2A2E33;padding-bottom:1px;margin-bottom:8px;transform:rotate(-.6deg);
}
.wb-col ul{list-style:none;display:grid;gap:7px}
.wb-col li{font-size:17px;line-height:1.5;letter-spacing:.01em}
.wb-col li em{font-style:normal;font-size:13px;color:#2F5FA8;margin-left:8px}
.wb-col li.blue{color:#2F5FA8}
.wb-col li:nth-child(2){transform:rotate(.4deg)}
.wb-col li:nth-child(3){transform:rotate(-.5deg)}
.wb-tray{ /* マーカートレイ：黒・赤・青とイレーザー */
  position:relative;height:22px;margin:0 8px;
  background:linear-gradient(#DADBD7,#B9BAB6);border-radius:0 0 4px 4px;
  box-shadow:0 3px 4px rgba(0,0,0,.22);
  display:flex;align-items:center;gap:10px;padding-left:16px;
}
.mk{width:58px;height:9px;border-radius:5px;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.3)}
.mk::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:14px;border-radius:0 5px 5px 0;background:rgba(0,0,0,.22)}
.mk.k{background:#2A2E33}.mk.r{background:#C43B2E}.mk.b{background:#2F5FA8}
.eraser{width:34px;height:12px;background:linear-gradient(#5B5F66,#3A3E44);border-radius:2px;margin-left:auto;margin-right:14px;box-shadow:0 1px 1px rgba(0,0,0,.3)}

/* ── 盤の中（盤内器具配置図・決めごと・動いているもの・手順書） ── */
.drawing{
  position:relative;overflow-x:auto;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:16px 16px 14px;
  box-shadow:0 1px 2px rgba(30,27,23,.18),0 8px 18px rgba(30,27,23,.10);
}
.drawing svg{display:block;width:100%;min-width:560px;height:auto}
.drawing .frame{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.85}   /* 図枠。紙（SVG）の中に描くので横スクロールしてもずれない */
.drawing .box{fill:none;stroke:var(--ink);stroke-width:1.5}
.drawing .box.main{stroke-width:2.2}
.drawing .duct{fill:url(#hatch);stroke:var(--ink);stroke-width:1.2}
.drawing .hatch{stroke:var(--ink-faint);stroke-width:1}
.drawing .tb{fill:#EEEADF;stroke:var(--ink);stroke-width:1.2}
.drawing .tbs line{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:3 4}
.drawing .wire{stroke:var(--ink);stroke-width:1.2;fill:none}
.drawing .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;fill:var(--amber-deep);font-weight:600}
.drawing .name{font-family:var(--gothic);font-size:12.5px;font-weight:700;fill:var(--ink)}
.drawing .name.big{font-size:16px;letter-spacing:.04em}
.drawing .desc{font-family:var(--gothic);font-size:10.5px;fill:var(--ink-soft)}
.drawing .ttb rect{fill:var(--paper);stroke:var(--ink);stroke-width:1.2}
.drawing .ttb line{stroke:var(--ink);stroke-width:1}
.drawing .tt{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;fill:var(--ink-faint)}
.drawing .tv{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;fill:var(--ink)}
.inside-split{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start;margin-top:8px}
.inside-split .sub-h{margin-top:26px}
.kime-list{list-style:none;display:grid;gap:10px}
.kime-list li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.7}
.kime-list li::before{content:"";position:absolute;left:0;top:.8em;width:11px;height:2px;background:var(--amber)}
.kime-list li b{display:block;font-size:15.5px}
.kime-list li span{color:var(--ink-soft)}
.runs{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 18px}
.runs li{display:flex;align-items:baseline;gap:9px;font-size:14px;padding:6px 0;border-bottom:1px dashed var(--panel-deep)}
.runs li small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--plate-text);background:var(--plate);padding:1px 6px;border-radius:2px;white-space:nowrap}
.manual{position:relative;padding:20px 22px 14px;margin-top:26px;transform:rotate(-.4deg)}
.manual::before{ /* 養生テープ */
  content:"";position:absolute;left:50%;top:-11px;width:78px;height:22px;margin-left:-39px;
  background:var(--tape);transform:rotate(-2deg);
  border-left:1px dashed rgba(255,255,255,.55);border-right:1px dashed rgba(255,255,255,.55);
  box-shadow:0 1px 1px rgba(0,0,0,.12);
}
.manual-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-soft);border-bottom:1.5px solid var(--ink);padding-bottom:6px;margin-bottom:10px}
.manual h3{font-size:19px;letter-spacing:.06em;line-height:1.45;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.medama{display:inline-block;font-size:11px;letter-spacing:.24em;text-indent:.24em;padding:2px 6px;border:1.5px solid var(--ink);border-radius:2px;font-weight:700}
.manual-sub{font-size:13.5px;color:var(--ink-soft);margin:2px 0 10px}
.manual .body{font-size:14px;line-height:1.75;color:var(--ink);margin-bottom:14px;text-wrap:pretty}
.approval{border-collapse:collapse;font-family:var(--mono);font-size:11px;letter-spacing:.14em;margin-bottom:12px}
.approval th,.approval td{border:1px solid var(--ink);width:66px;text-align:center}
.approval th{padding:3px 0;font-weight:500;color:var(--ink-soft)}
.approval td{height:54px;vertical-align:middle}
.hanko{ /* 朱肉の印。少しかすれて、少し傾く */
  display:inline-grid;place-items:center;width:38px;height:38px;border:2px solid #C43B2E;border-radius:50%;
  color:#C43B2E;font-family:var(--mincho);font-weight:800;font-size:19px;line-height:1;
  transform:rotate(-8deg);opacity:.85;box-shadow:inset 0 0 0 1px rgba(196,59,46,.3);
}
.approval td:last-child .hanko{transform:rotate(6deg);opacity:.8}
.revs{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:8px}
.revs caption{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-faint);margin-bottom:4px}
.revs td{border-bottom:1px solid var(--paper-line);padding:4px 6px;vertical-align:top}
.revs td:first-child{font-family:var(--mono);font-size:11.5px;color:var(--amber-deep);font-weight:600;white-space:nowrap}
.revs td:nth-child(2){font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);white-space:nowrap}
.manual .meta{display:flex;align-items:center;gap:8px;margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.manual .meta a{margin-left:auto;color:var(--amber-deep);font-weight:600}
.manual .meta a:hover{text-decoration:underline}

/* ── モニタ（フッタ）：ダンプリストとチェックサム ── */
.monitor{display:grid;gap:10px;max-width:640px}
.dump{
  font-family:var(--dot);font-size:14px;line-height:1.6;letter-spacing:.02em;
  background:var(--screen);color:var(--screen-text);
  padding:10px 13px;border-radius:2px;margin:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 22px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.35);
  overflow-x:auto;white-space:pre;
}
.dump .a{color:#86AE80}
.dump .s{color:var(--amber)}
.mon-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dot-btn{
  font-family:var(--dot);font-size:14px;letter-spacing:.12em;
  background:var(--plate);color:var(--screen-text);border:1px solid #3A3835;border-radius:2px;
  padding:6px 16px;cursor:pointer;box-shadow:0 2px 0 #000;
}
.dot-btn:active{transform:translateY(2px);box-shadow:none}
.dot-line{font-family:var(--dot);font-size:14px;letter-spacing:.04em;color:var(--ink)}
.dot-line.ng{color:var(--err)}
.mon-cap{font-size:12.5px;color:var(--ink-soft);line-height:1.7}
.dot-btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink-soft);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.dot-btn[aria-pressed="true"]{background:var(--screen);color:var(--screen-text);border-color:#3A3835}
.typein{
  display:grid;gap:7px;
  background:var(--screen);padding:10px 13px;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 22px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.35);
}
.ti-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;font-family:var(--dot);font-size:16px;color:var(--screen-text)}
.ti-row .a{color:#86AE80}
.ti-row .s{color:var(--amber)}
.ti-row .st{min-width:2.2em;text-align:right;color:#86AE80}
.ti-row.ok .st{color:var(--screen-text)}
.ti-row.ng .st{color:#F0A08E}
.ti{
  font:16px/1.3 var(--dot);letter-spacing:.04em;text-transform:uppercase;   /* 16px 未満だと iOS が拡大して戻らない */
  background:#0B0D09;color:var(--screen-text);border:1px solid #2E3A28;border-radius:2px;
  padding:5px 8px;min-width:0;width:100%;
}
.ti::placeholder{color:#3F5238}
.ti:focus{outline:2px solid var(--amber);outline-offset:1px}


/* ── 配る道具（展示室の先頭。品質シリーズの回ごとに1つ） ── */
.tool{position:relative;padding:22px 22px 18px;margin:8px 0 40px;scroll-margin-top:calc(72px + env(safe-area-inset-top))}
.tool::before{ /* 養生テープ */
  content:"";position:absolute;left:50%;top:-11px;width:78px;height:22px;margin-left:-39px;
  background:var(--tape);transform:rotate(-2deg);
  border-left:1px dashed rgba(255,255,255,.55);border-right:1px dashed rgba(255,255,255,.55);
  box-shadow:0 1px 1px rgba(0,0,0,.12);
}
.tool-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:14px;font-family:var(--mono);font-size:12px;letter-spacing:.14em}
.tool-label .no{background:var(--plate);color:var(--plate-text);padding:3px 10px;border-radius:2px;font-weight:600}
.tool-label .chip{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft)}
.tool-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
.tool-shot{margin:0}
.tool-shot img{width:100%;border:1px solid #E6E1D4;background:#fff}
.tool-shot figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-faint);margin-top:6px}
.tool-body h3{font-size:20px;font-weight:700;letter-spacing:.08em;line-height:1.4}
.tool-lede{font-size:15px;color:var(--ink);margin:4px 0 14px}
.tool-why{border-left:3px solid var(--amber);padding:2px 0 2px 14px;margin-bottom:14px}
.tool-why small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-faint);margin-bottom:4px}
.tool-why p{font-family:var(--mincho);font-weight:600;font-size:14.5px;line-height:1.8;color:var(--ink);text-wrap:pretty}
.tool-steps{list-style:none;counter-reset:st;display:grid;gap:6px;margin-bottom:10px}
.tool-steps li{counter-increment:st;position:relative;padding-left:28px;font-size:14px;line-height:1.7}
.tool-steps li::before{content:counter(st);position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;font-weight:600;background:var(--plate);color:var(--plate-text)}
.tool-safe{font-size:13.5px;color:var(--run-deep);font-weight:700;margin-bottom:14px}
.tool-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-bottom:12px}
.btn.dl span{display:flex;flex-direction:column}
.tool-fine{font-size:12.5px;color:var(--ink-soft);line-height:1.7}


/* ── 道具の公開日（data-open-at）：記事の公開までは予告、時刻が来たらボタンを出す ── */
.tool .when-preview,.tool .tool-soon{display:none}
.tool.is-preview .when-open{display:none}
.tool.is-preview .when-preview{display:inline-flex}
.tool.is-preview .tool-soon{display:block}
.tool.is-preview .tool-cta{display:none}
.tool-soon{font-size:13.5px;color:var(--amber-deep);font-weight:700;margin-bottom:14px}
.tool-points{list-style:none;display:grid;gap:4px;margin:0 0 14px}
.tool-points li{position:relative;padding-left:18px;font-size:14px;line-height:1.7}
.tool-points li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:2px;background:var(--amber)}
.tool + .tool{margin-top:34px}

/* ── 404（無い扉）：本番の CSP は中に直接書いたスタイルを止めるので、ここに置く ── */
.lost{min-height:100dvh;display:grid;place-items:center;padding:40px 20px calc(40px + env(safe-area-inset-bottom))}
  .lost-card{max-width:640px;width:100%;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;padding:22px 24px 20px}
  .lost-card .cat{width:170px;background:transparent;border:0;margin-bottom:-8px}
  .lost h1{font-size:clamp(22px,4.6vw,30px);letter-spacing:.12em;line-height:1.4;margin:14px 0 8px}
  .lost p{color:var(--ink-soft);font-size:14.5px}
  .lost .status{margin:0 0 10px}
  .lost .cta-row{margin-top:18px}
  .lost .screen{margin-bottom:14px}
  @media (max-width:520px){.lost-card{grid-template-columns:1fr}.lost-card .cat{width:130px;justify-self:end}}

/* ── フッタ（盤の下端） ── */
.foot-in{padding:26px 20px 44px;display:grid;gap:14px;padding-bottom:calc(44px + env(safe-area-inset-bottom))}
.disc{font-size:13px;color:var(--ink-soft)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13.5px;letter-spacing:.06em}
.foot-links a{border-bottom:1px solid var(--ink-faint);padding-bottom:1px}
.foot-links a:hover{color:var(--amber-deep);border-color:var(--amber)}
.colophon{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint)}

/* ── 非常停止シート ── */
.estop-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:0 14px calc(14px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.estop-sheet[hidden]{display:none}
.estop-card{
  pointer-events:auto;max-width:720px;margin:0 auto;
  display:flex;gap:18px;align-items:flex-end;
  padding:18px 20px 16px;
  border-color:var(--err);border-width:2px;
  box-shadow:0 2px 3px rgba(30,27,23,.2),0 16px 34px rgba(30,27,23,.32);
  animation:rise .28s ease-out;
}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.estop-card .cat{width:132px;flex-shrink:0;background:transparent;border:0;margin-bottom:-6px}
.estop-body{flex:1;font-size:14.5px;line-height:1.75}
.estop-title{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;letter-spacing:.2em;color:var(--err);margin-bottom:6px}
.estop-body b{color:var(--ink)}
.estop-body p{color:var(--ink-soft)}
.estop-body .how{margin-top:6px;font-size:13.5px;color:var(--ink)}
.estop-sheet[data-mode="estop"] [data-when="released"]{display:none}
.estop-sheet[data-mode="released"] [data-when="estop"]{display:none}
.reset{
  display:inline-flex;align-items:center;gap:8px;vertical-align:middle;
  border:1px solid var(--ink-soft);background:var(--paper);border-radius:var(--radius);
  padding:5px 12px 5px 7px;font:inherit;font-weight:700;letter-spacing:.14em;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}
.reset:active{transform:translateY(2px);box-shadow:none}
.reset-btn{
  display:inline-block;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,var(--reset-hi) 0,var(--reset) 42%,var(--reset-deep) 100%);
  box-shadow:0 0 0 2px #3A3835,0 0 0 3px rgba(255,255,255,.3);
}
body[data-state="estop"] .estop-card .cat{animation:peek .5s ease-out}
@keyframes peek{from{transform:translateX(-20px);opacity:0}to{transform:none;opacity:1}}

/* ── 幅による調整 ── */
@media (min-width:720px){
  .pc{display:inline}
}
@media (max-width:900px){
  .brand-sub{display:none}
  .rooms{gap:0;margin-left:2px}
  .rooms a{padding:6px 8px;font-size:13px}
}
@media (max-width:719px){
  .rooms{display:none}
  .opbar-in{gap:10px;height:56px}
  .plate.brand{padding:6px 20px}
  .brand-sub{display:none}
  .estop{width:32px;height:32px;margin-right:10px}
  .plate.big{padding:22px 22px 20px}
  .plate.big .screw{width:8px;height:8px}
  h1{letter-spacing:.1em}
  .status{gap:10px 16px;font-size:12.5px}
  .quote p{font-size:19px}
  .signs{grid-template-columns:1fr;gap:10px}
  .spec{gap:5px 16px}
  .wb-board{padding:14px 14px 18px}
  .wb-grid{grid-template-columns:1fr;gap:14px}
  .wb-fixed{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
  .wb-fixed small{width:100%;margin-top:2px}
  .wb-ghost{font-size:15px}
  .wb-ghost span:nth-child(1){left:50%;top:37%}
  .wb-ghost span:nth-child(2){left:44%;top:49%}
  .wb-ghost span:nth-child(3){display:none}
  .inside-split{grid-template-columns:1fr;gap:10px}
  .tool{padding:18px 14px 14px}
  .tool-grid{grid-template-columns:1fr;gap:16px}
  .tool-cta .btn{width:100%;justify-content:center}
  .drawing::after{content:"→ 横にスクロール";position:sticky;left:0;display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint)}
  .manual{margin-top:30px}
  .runs{grid-template-columns:1fr 1fr}
  .ti-row{gap:6px}
  .ti-row .a{font-size:14px}
  .ti-row .st{min-width:1.6em}
  .ti{padding:5px 6px;letter-spacing:0}
  .sign{flex-direction:row;justify-content:center;gap:12px;padding:11px 22px}
  .sign b{font-size:16px}
  .rules,.tags{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .notes li>a,.notes li>div{padding:12px 14px 11px}
  .staff{width:min(200px,64%)}
  .rung{padding:16px 12px 14px}
  .rung::before{inset:6px}
  .rung-cap{font-size:14px}
  .titleblock{position:static;margin:12px 0 0 auto;width:fit-content}
  .estop-card{gap:12px;padding:14px 14px 12px}
  .estop-card .cat{width:96px}
  .estop-body{font-size:13.5px}
  .estop-title{font-size:17px}
}
@media (max-width:400px){
  body{font-size:15.5px}
  .runs{grid-template-columns:1fr}
  .dump{font-size:13px}
  .btn.mini span{display:none}
  .btn.mini{padding:9px 11px}
}

/* ── 動きを減らす設定 ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .cur{opacity:1}
}