:root{
    --ink:#1b1f24; --sub:#5c6672; --faint:#8a94a0;
    --line:#d9dee4; --line2:#eaeef2; --bg:#fafafa; --card:#fff;
    --red:#b0222a; --redbg:#fdf0f1; --redline:#f0c2c6;
    --amb:#8a5800; --ambbg:#fff8e6; --ambline:#f0d9a8;
    --blu:#1d4e79; --blubg:#eef4fb; --bluline:#c5d8ec;
    --tea:#15675a; --teabg:#e9f5f2; --tealine:#bfdfd7;
    --grn:#1a6b3c; --grnbg:#eaf6ee; --grnline:#bfe0ca;
    --gry:#4b5563; --grybg:#f2f4f6;
    --lane:#f7f8fa;
  }
  *{box-sizing:border-box}
  body{
    margin:0; padding:28px 20px 72px; background:var(--bg); color:var(--ink);
    font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
    font-size:13.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1180px;margin:0 auto}
  h1{font-size:20px;margin:0 0 4px;letter-spacing:.01em}
  h2{font-size:15px;margin:34px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
  .lede{color:var(--sub);margin:0 0 2px}
  .meta{color:var(--faint);font-size:11.5px;margin:10px 0 0}
  .meta b{color:var(--sub);font-weight:600}
  code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}

  /* ══ スイムレーン ══ */
  .flow{overflow-x:auto;padding-bottom:6px}
  .grid{
    min-width:1060px; display:grid;
    grid-template-columns:120px 196px 1fr 232px 224px;
    background:var(--card); border:1px solid var(--line); border-radius:8px;
  }
  .hd{
    padding:9px 10px; text-align:center; font-weight:700; font-size:12.5px;
    background:var(--grybg); border-bottom:1px solid var(--line);
    border-right:1px solid var(--line); position:sticky; top:0; z-index:2;
  }
  .hd:last-child{border-right:0}
  .hd small{display:block;font-weight:500;font-size:10.5px;color:var(--sub);margin-top:1px}
  .cel{
    border-right:1px solid var(--line2); padding:9px 10px 11px;
    display:flex; flex-direction:column; align-items:center; gap:5px; min-height:52px;
  }
  .cel:last-child{border-right:0}
  .cel.lane{background:var(--lane)}
  .row{display:contents}
  .sep{grid-column:1/-1;height:1px;background:var(--line2)}

  /* 部品 */
  .step{display:flex;align-items:center;gap:6px;align-self:flex-start;margin-bottom:1px;flex-wrap:wrap;row-gap:4px}
  .no{
    display:inline-flex;align-items:center;justify-content:center;
    width:17px;height:17px;border-radius:3px;background:var(--blu);color:#fff;
    font-size:11px;font-weight:700;flex:none;
  }
  .step b{font-size:12.5px;flex:none}
  .who{
    display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--sub);
  }
  .who i{
    width:16px;height:16px;border-radius:50%;background:var(--gry);flex:none;position:relative;
  }
  .who i::after{
    content:"";position:absolute;left:50%;top:3px;transform:translateX(-50%);
    width:6px;height:6px;border-radius:50%;background:#fff;
    box-shadow:0 7px 0 -1px #fff, -4px 8px 0 -2px #fff, 4px 8px 0 -2px #fff;
  }
  .box{
    background:var(--card); border:1px solid var(--line); border-radius:6px;
    padding:7px 10px; font-size:12px; width:100%; text-align:center;
  }
  .box.b{background:var(--blubg);border-color:var(--bluline)}
  .box.t{background:var(--teabg);border-color:var(--tealine)}
  .box.g{background:var(--grnbg);border-color:var(--grnline)}
  .box.a{background:var(--ambbg);border-color:var(--ambline)}
  .box.r{background:var(--redbg);border-color:var(--redline)}
  .box small{display:block;font-size:10.5px;color:var(--sub);margin-top:2px;line-height:1.55;line-break:strict;overflow-wrap:break-word}
  .pill{
    border:1.5px solid var(--ambline); background:#fff; color:var(--amb);
    border-radius:999px; padding:5px 14px; font-size:12px; font-weight:600;
  }
  .pill.blu{border-color:var(--bluline);color:var(--blu)}
  /* 書類。紙が重なって見える影で表す（マスクは環境によって出ないので使わない） */
  .doc{
    position:relative; background:#fff; border:1px solid var(--line);
    border-radius:4px; padding:7px 10px; width:calc(100% - 5px);
    font-size:11.5px; text-align:center;
    box-shadow:3px 3px 0 -1px #fff, 4px 4px 0 -1px var(--line);
  }
  .doc b{font-weight:700}
  .doc small{display:block;color:var(--faint);font-size:10px;margin-top:1px}
  .docwrap{width:100%;padding:0 5px 6px 0}
  /* 矢印 */
  /* ⚠️クラス名を .no.stop にしていたら、下の赤い注意ボックス用の .stop
     （padding:10px 13px / border 1.5px / radius 7px）まで拾ってバッジが肥大し、
     同じ行の右端のタグが 15px まで潰されて文字がはみ出していた（2026-09-17）。
     部品ごとにクラス名を分ける。 */
  .no.red{background:var(--red)}
  .gate{
    width:100%; border:1.5px dashed var(--redline); background:var(--redbg);
    border-radius:7px; padding:8px 10px; text-align:center;
  }
  .gate b{color:var(--red);font-size:12px}
  .gate small{display:block;font-size:10.5px;color:#7a2b31;margin-top:2px;line-height:1.5}
  .sw{
    display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
    border-radius:999px;padding:1px 9px;margin-top:5px;background:var(--red);color:#fff;
  }
  .cross.back .bar{background:var(--bluline)}
  .cross.back .bar::after{
    border-left-color:transparent;border-right-color:var(--bluline);right:auto;left:-1px}
  .pill.grn{border-color:var(--grnline);color:var(--grn)}
  .ar{color:var(--faint);font-size:15px;line-height:1;margin:1px 0}
  .arlbl{font-size:10.5px;color:var(--faint);text-align:center;line-height:1.4}
  .cross{
    grid-column:1/-1; display:flex; align-items:center; gap:8px;
    padding:4px 14px; font-size:11px; color:var(--sub);
  }
  .cross .bar{flex:1;height:1px;background:var(--line);position:relative}
  .cross .bar::after{
    content:"";position:absolute;right:-1px;top:-3px;
    border:4px solid transparent;border-left-color:var(--line);
  }
  /* 注記 */
  .note{
    border-left:3px solid var(--ambline); background:var(--ambbg); padding:9px 12px;
    font-size:12px; color:#6b4a12; border-radius:0 4px 4px 0; margin:10px 0;
  }
  .stop{
    border:1.5px solid var(--redline); background:var(--redbg); border-radius:7px;
    padding:10px 13px; margin:0;
  }
  .stop .t{font-weight:700;color:var(--red);font-size:12.5px;margin-bottom:4px}
  .stop ul{margin:4px 0 0;padding-left:16px;font-size:11.5px;line-height:1.65;color:#7a2b31}
  .tag{
    display:inline-block;font-size:10px;font-weight:600;border-radius:3px;
    padding:0 6px;line-height:16px;margin-left:0;
    white-space:nowrap; flex:none;
  }
  .tag.auto{background:var(--grnbg);color:var(--grn);border:1px solid var(--grnline)}
  .tag.man{background:var(--ambbg);color:var(--amb);border:1px solid var(--ambline)}
  /* ⚠️.tag.no は番号バッジの .no（width:17px 固定）も拾って 15px に潰れ、
     文字が枠からはみ出していた（2026-09-17）。クラス名を分ける。 */
  .tag.stopped{background:var(--redbg);color:var(--red);border:1px solid var(--redline)}
  table{border-collapse:collapse;width:100%;font-size:12px}
  th,td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
  th{background:var(--grybg);font-weight:600;white-space:nowrap}
  td.c,th.c{text-align:center;white-space:nowrap}
  /* 最終列だけは折り返しを許す。バッジがはみ出して切れていた */
  table tr > *:last-child{white-space:normal}
  .scroll{overflow-x:auto}
  .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--sub);margin-top:8px}
  .legend span{display:inline-flex;align-items:center;gap:5px}
  .swatch{width:12px;height:12px;border-radius:3px;border:1px solid var(--line);display:inline-block}
  footer{color:var(--faint);font-size:11.5px;margin-top:34px;border-top:1px solid var(--line);padding-top:12px}
  @media (max-width:640px){ body{padding:16px 10px 48px} }

  /* ══ システム構成図の部品（2026-09-17 追加） ══ */
  .host{border:1px solid var(--line);border-radius:8px;background:var(--card);overflow:hidden;margin:12px 0}
  .host > .ttl{
    background:var(--grybg);border-bottom:1px solid var(--line);padding:8px 12px;
    font-weight:700;font-size:12.5px;display:flex;justify-content:space-between;
    align-items:baseline;gap:10px;flex-wrap:wrap;
  }
  .host > .ttl small{font-weight:500;color:var(--sub);font-size:11px}
  .host > .in{padding:12px;display:grid;gap:9px}
  .units{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:9px}
  .unit{
    border:1px solid var(--line2);border-radius:6px;padding:8px 10px;
    background:var(--card);font-size:12px;text-align:left;
  }
  .unit b{display:block;font-size:12.5px;margin-bottom:2px}
  .unit small{display:block;color:var(--sub);font-size:10.5px;line-height:1.55;margin-top:2px;overflow-wrap:break-word}
  .unit.b{background:var(--blubg);border-color:var(--bluline)}
  .unit.t{background:var(--teabg);border-color:var(--tealine)}
  .unit.g{background:var(--grnbg);border-color:var(--grnline)}
  .unit.a{background:var(--ambbg);border-color:var(--ambline)}
  .unit.r{background:var(--redbg);border-color:var(--redline)}
  .down{text-align:center;color:var(--faint);font-size:14px;line-height:1;margin:-2px 0}
  .downlbl{text-align:center;color:var(--faint);font-size:10.5px;line-height:1.45}
  .own{
    display:inline-block;font-size:10px;font-weight:600;border-radius:3px;
    padding:0 6px;line-height:16px;white-space:nowrap;
  }
  .own.k{background:var(--blubg);color:var(--blu);border:1px solid var(--bluline)}
  .own.s{background:var(--ambbg);color:var(--amb);border:1px solid var(--ambline)}

  /* 2026-09-17 追加: 任意工程タグと、狭い列での折り返し制御 */
  .tag.opt{background:var(--grybg);color:var(--gry);border:1px solid var(--line)}
  .gate b,.gate small,.gate .sw{word-break:keep-all;overflow-wrap:break-word}