:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #1f2933;
  --muted: #616e7c;
  --border: #d3d9e0;
  --accent: #1f6feb;
  --accent-text: #ffffff;
  --error: #c62828;
  --stale: #b26a00;
  /* 追加フォームの面（一覧の行と見分けるため） */
  --add-bg: #eef4ff;
  --add-border: #c7d8f7;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15191e;
    --card: #1e242b;
    --text: #e4e7eb;
    --muted: #9aa5b1;
    --border: #3a434d;
    --accent: #4c8dff;
    --accent-text: #0b1220;
    --error: #ff7b72;
    --stale: #e3a33b;
    --add-bg: #1a2638;
    --add-border: #2f4a72;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

h1 { font-size: 18px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 8px; }
.hint { font-size: 12px; font-weight: normal; color: var(--muted); }

input, select, textarea, button, .button {
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  min-height: 30px;
}
input, select { min-width: 0; }
button, .button { cursor: pointer; display: inline-flex; align-items: center; }
button:hover, .button:hover { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: wait; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: bold; }
button.danger { border-color: transparent; color: var(--muted); padding: 4px 6px; }
button.danger:hover { color: var(--error); border-color: var(--error); }

.app-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
/* 見出しの側（ツール名・図のタイトル・状態表示）は、ツールバーの残りの幅を使う。幅は中の文字の長さで決めない
   （知らせが長くなっても、ツールバーが次の行に押し出されてヘッダーが高くならないように） */
.doc-heading {
  display: flex;
  flex: 1 1 24em;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}
.doc-title { margin: 0; font-size: 16px; font-weight: bold; overflow-wrap: anywhere; }
.doc-title::before { content: "／"; margin-right: 8px; color: var(--muted); font-weight: normal; }

/* 編集メニュー（見出しを押すと下に開く） */
.menu { position: relative; }
.menu > summary { list-style: none; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  display: grid;
  min-width: 200px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 15%);
}
.menu-list button { width: 100%; border-color: transparent; text-align: left; }
.menu-list button:hover { background: var(--bg); border-color: transparent; }
.menu-sep { width: 100%; margin: 4px 0; border: none; border-top: 1px solid var(--border); }

dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 20px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
dialog::backdrop { background: rgb(0 0 0 / 35%); }
#json-dialog { width: min(720px, calc(100vw - 32px)); }
#json-dialog textarea { min-height: 55vh; margin: 0; }
/* AI 用の説明：コピーのボタンと案内。コピーできないときだけ、説明を出す欄（低め）を出す */
.ai-guide { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--add-border); border-radius: 6px; background: var(--add-bg); }
/* 横に 16em 入らないときは、案内をボタンの下に回す */
.ai-guide-hint { flex: 1 1 16em; font-size: 12px; color: var(--muted); }
.ai-guide-note { margin: 0; font-size: 13px; }
.ai-guide-note:empty { display: none; }
.ai-guide-note.error { color: var(--error); font-weight: bold; }
#json-dialog #ai-guide { min-height: 0; height: 10em; font-size: 12px; }
/* textarea の display の指定より、hidden を優先する */
#ai-guide[hidden] { display: none; }
#ai-guide-copy { white-space: nowrap; }
.dialog-form { display: grid; gap: 12px; }
.dialog-form h2 { margin: 0; }
.dialog-note { margin: 0; font-size: 13px; color: var(--error); }
.dialog-note:empty { display: none; }
.dialog-buttons { justify-content: flex-end; }
.dialog-buttons .reset { margin-right: auto; }

/* ご意見のフォーム */
#feedback-dialog { width: min(520px, calc(100vw - 32px)); }
#feedback-dialog textarea { width: 100%; box-sizing: border-box; resize: vertical; color: var(--text); }
.feedback-lead { margin: 0; font-size: 13px; color: var(--muted); }
.feedback-count { margin: -8px 0 0; font-size: 12px; color: var(--muted); text-align: right; }
.dialog-note.ok { color: var(--text); font-weight: bold; }
/* 人には見えない欄（ボット避け）。display: none だと埋めないボットもいるので、画面の外に出す */
.feedback-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 設定の画面：項目名を左、入力欄を右に並べる */
.settings-group { display: grid; gap: 8px; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 8px; }
.settings-group legend { padding: 0 4px; font-weight: bold; }
.setting { display: grid; grid-template-columns: 1fr 120px; gap: 12px; align-items: center; }
.setting input, .setting select { width: 100%; }

.header-actions, .button-row, .add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.inline { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); }
.inline select { color: var(--text); }
/* テンプレートの選択欄は、いちばん長いテンプレートの名前が入る幅に決めておく。中の文字（「名前（編集中）」など）で
   幅を変えない（ヘッダーの並びが動かないように）。入りきらない分は切る */
#template-select { width: 31.5em; max-width: 100%; text-overflow: ellipsis; }

/* 編集欄は操作しやすい幅（画面幅の 42%、560〜760px）にして、残りをすべて図に使う */
/* 間の 16px の列が境目（.splitter）。--editor-width は境目をドラッグしたときに app.js が決める。
   ウィンドウを狭めても、図の欄は 320px（app.js の MIN_PREVIEW_WIDTH）より狭くしない */
.layout {
  display: grid;
  grid-template-columns:
    max(440px, min(var(--editor-width, clamp(560px, 42vw, 760px)), calc(100% - 16px - 320px)))
    16px minmax(0, 1fr);
  gap: 16px 0;
  padding: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .splitter { display: none; }
}

/* 編集欄と図の境目。真ん中につまみを薄く出し、乗せたときやドラッグ中は青い線にする */
.splitter { position: relative; align-self: stretch; cursor: col-resize; touch-action: none; }
.splitter::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: var(--border);
  transform: translate(-50%, -50%);
}
.splitter:hover::before, .splitter:focus-visible::before, .splitter.dragging::before {
  top: 0;
  height: 100%;
  background: var(--accent);
  transform: translateX(-50%);
}
.splitter:focus-visible { outline: none; }
/* ドラッグ中は文字が選ばれないようにし、カーソルを左右の矢印のままにする */
body.resizing { cursor: col-resize; user-select: none; }
.editor { display: grid; gap: 12px; }
/* 広い画面では、ページを画面の高さちょうどにして、編集欄だけをスクロールさせる。
   図の欄はヘッダーの下の高さいっぱいを使い、いつも見えたままにする */
.preview-card { position: relative; display: flex; flex-direction: column; }
@media (min-width: 901px) {
  body { display: flex; flex-direction: column; height: 100vh; }
  .layout { flex: 1; grid-template-rows: minmax(0, 1fr); align-items: stretch; min-height: 0; }
  .editor { align-content: start; min-height: 0; overflow-y: auto; }
  .preview, .preview-card { min-height: 0; }
  .preview-card { height: 100%; box-sizing: border-box; }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.field { display: grid; gap: 4px; color: var(--muted); }
.field input, .field select { color: var(--text); }
/* タイトルの横の状態表示。図の更新・エラー（.message）と一時保存（.save-state）を「・」で区切る。
   いつも1行で、入りきらない分は「…」で切る（文字の長さでヘッダーの高さが変わらないように）。
   残りの幅が 10em より狭いときは、文字の長さによらず、タイトルの下の行に出す。知らせが消えて空になっても
   1行分の高さを取っておく（空になるたびにヘッダーが縮んで、ページがずれないように） */
.status {
  flex: 1 1 10em;
  min-width: 0;
  min-height: 18px;
  margin: 0;
  line-height: 18px;
  overflow: hidden;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.message:not(:empty) + .save-state:not(:empty)::before { content: "・"; }

/* 追加フォームは、一覧の行と取り違えないよう色の付いた面に置き、追加ボタンを塗りつぶす。
   面は左右に 10px はみ出させ、中の列の位置は見出しや一覧の行とそろえたままにする
   （左右の余白は、枠線の 1px を引いた 9px） */
.add-row {
  margin: 0 -10px 8px;
  padding: 10px 9px;
  background: var(--add-bg);
  border: 1px solid var(--add-border);
  border-radius: 8px;
}
.add-row > button { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: bold; }
.add-row > button:hover { filter: brightness(1.08); }
.add-row input { flex: 1 1 160px; }
.arrow { color: var(--muted); }

.item-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.item-list:empty::before { content: "まだありません"; color: var(--muted); font-size: 12px; }
.item {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.item input { flex: 1 1 140px; }
.item select { max-width: 100%; }
.item .depth-mark { color: var(--muted); }
.item input.invalid { border-color: var(--error); }

/* 枠・部品の一覧：見出し・追加フォーム・各行の列の幅をそろえる。
   別々のグリッドなので、最後の列（ボタン）も固定の幅にする（em だと見出しの文字の大きさで幅が変わる） */
.list-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) 92px;
  gap: 6px;
  align-items: center;
}
.list-grid select, .list-grid input { width: 100%; min-width: 0; }
.list-grid > button, .edge-row > button { justify-content: center; }
/* 枠の入れ子：1列目の中で、深さの分だけ字下げする */
.indent { display: flex; gap: 4px; align-items: center; min-width: 0; padding-left: calc(var(--depth, 0) * 16px); }
.list-grid .indent select { flex: 1 1 0; width: auto; }
.list-head { padding-bottom: 4px; font-size: 12px; color: var(--muted); }
/* 見出しの文字を、入力欄の中の文字（枠線 1px ＋ 余白 8px）と同じ位置から始める */
.list-head span { padding-left: 9px; }

/* タグ（IP アドレスや開放ポートなど） */
/* 見出し・追加フォーム・各行の列をそろえる。各行の札は2列目から右端まで並べる */
.tag-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) 92px;
  gap: 6px;
  align-items: center;
}
.tag-grid select, .tag-grid input { width: 100%; min-width: 0; }
.tag-grid > button { justify-content: center; }
.tag-target { padding-left: 9px; overflow-wrap: anywhere; font-size: 12px; color: var(--muted); }
.tag-chips { display: flex; flex-wrap: wrap; grid-column: 2 / -1; gap: 4px; }
.tag {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  padding: 0 2px 0 8px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.tag button { min-height: 0; padding: 0 4px; line-height: 1.4; color: var(--muted); background: transparent; border: none; }
.tag button:hover { color: var(--error); }

/* 矢印は1本につき1行。From・To・種類・方向を並べ、長い名前は折り返さず欄の中で切る */
.edge-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 76px 56px 92px;
  gap: 6px;
  align-items: center;
}
.edge-row select { width: 100%; min-width: 0; }

/* 枠・部品・矢印・JSON は見出しを押すと最小化できる */
.section > summary { cursor: pointer; }
.section > summary h2 { display: inline; margin: 0; }
.section[open] > summary { margin-bottom: 8px; }
.count { font-size: 12px; font-weight: normal; color: var(--muted); }

textarea {
  display: block;
  width: 100%;
  min-height: 240px;
  margin: 8px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  resize: vertical;
}

.message.error { color: var(--error); font-weight: bold; }
.message.stale { color: var(--stale); }
/* 知らせの頭の文字のリンク（失敗したときの「もう一度試す」など）。ふつうのボタンの高さ（min-height）を外し、
   知らせの1行に収める（ヘッダーの高さを変えないように） */
.message-action { display: inline; min-height: 0; margin-right: 6px; padding: 0; border: none; background: none; color: var(--accent); font: inherit; font-weight: bold; line-height: inherit; text-decoration: underline; cursor: pointer; }
.hints:not(:empty) { margin-top: 8px; }
/* インターネットゲートウェイを VPC の線の上に描くための案内 */
.hints { margin: 0 0 8px; padding-left: 1.2em; font-size: 12px; color: var(--muted); }
.hints:empty { display: none; }

/* 図の欄は残りの高さいっぱい（狭い画面では画面の高さの 70%）。図の大きさは app.js の sizePreview が
   決める（全体表示なら、元の大きさより大きくせず、収まらないときだけ縮める。拡大・縮小したらその倍率）。
   拡大して図が欄より大きくなったら、欄の中でスクロールして動かす。図は margin: auto で真ん中に置く
   （align-items: center だと、欄より大きくなった図の上と左がスクロールしても見えなくなるため） */
.preview-box {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #ffffff;
  overflow: auto;
}
.preview-box > * { margin: auto; }
@media (max-width: 900px) {
  .preview-box { flex: none; height: 70vh; }
}
.preview-box.stale { opacity: .55; }
/* 全画面：図の欄（上のボタンも含む）を画面いっぱいに出す */
.preview-card:fullscreen { box-sizing: border-box; height: 100%; padding: 16px; border: none; border-radius: 0; }
.preview-card:fullscreen .preview-box { flex: 1; height: auto; }
/* 拡大・縮小のボタンは右に寄せ、全画面のボタンはその右に並べる */
.zoom-controls { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.zoom-controls button { min-width: 2.2em; }
.zoom-level { min-width: 3.5em; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.preview-box img { display: block; }

/* 図と、その上に重ねる透明なつかむ場所（app.js の「図の上の操作」）。重ねる場所は図と同じ大きさで、
   中の位置は図に対する % で決めるので、図の大きさが変わってもずれない */
.diagram-frame { position: relative; flex: none; }
.diagram-overlay { position: absolute; inset: 0; }
/* 表示中の図が注文票と違う間（描き直している間など）は、位置が合わないのでつかめない */
.preview-box.stale .diagram-overlay { display: none; }
/* left・top はアイコンの中心。指でもつかめるよう、小さく縮んだ図でも中心から 24px は取る */
.grab {
  position: absolute;
  translate: -50% -50%;
  min-width: 24px;
  min-height: 24px;
  border-radius: 6px;
  cursor: grab;
  /* 指でつかんだときに、ページのスクロールやズームにしない */
  touch-action: none;
}
.grab:hover, .grab.moving { outline: 2px dashed #1f6feb; outline-offset: 2px; }
.diagram-overlay.dragging, .diagram-overlay.dragging .grab { cursor: grabbing; }
/* 図の欄はいつも白いので、色は明るい画面のものに決めておく */
.drag-ghost, .drop-target, .drop-label { position: absolute; pointer-events: none; }
.drag-ghost { border: 2px dashed #1f6feb; border-radius: 6px; background: rgb(31 111 235 / 15%); }
.drop-target { border: 3px solid #1f6feb; border-radius: 4px; background: rgb(31 111 235 / 6%); }
.drop-label {
  translate: 14px 14px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #1f6feb;
  color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
}
.drop-target.invalid { border-color: #c62828; background: rgb(198 40 40 / 6%); }
/* 部品を図のまわりの白いところ（枠の外）へ動かしている間は、図の表示エリアを囲んで見せる */
.preview-box.drop-outside { box-shadow: inset 0 0 0 3px #1f6feb; background: rgb(31 111 235 / 4%); }
.drop-label.invalid { background: #c62828; }

/* 図の上で矢印を引く（app.js の「図の上で矢印を引く」）。線を描く層は図と同じ大きさで、図の座標を使う */
.overlay-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.connect-line { stroke: #1f6feb; stroke-width: 2.5px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
/* つまみ：アイコンの右の縁の丸。マウスを部品に乗せたときだけ出す（指で使う画面では、いつも出す） */
.connect-handle {
  position: absolute;
  top: 50%;
  right: 0;
  width: 14px;
  height: 14px;
  translate: 50% -50%;
  border: 2px solid #1f6feb;
  border-radius: 50%;
  background: #ffffff;
  cursor: crosshair;
  touch-action: none;
  display: none;
}
/* 小さな丸のまわりにも、押せる場所を広げる */
.connect-handle::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.grab:hover .connect-handle, .grab.connect-source .connect-handle { display: block; }
.connect-handle:hover { background: #1f6feb; }
@media (hover: none) {
  .connect-handle { display: block; width: 18px; height: 18px; }
}
/* 矢印を引いている間：引ける相手を光らせ、ポインタの下の相手を強く光らせる。部品の移動の点線は出さない */
.diagram-overlay.connecting .grab { cursor: crosshair; }
.diagram-overlay.connecting .grab:hover { outline: none; }
.grab.connect-ok { box-shadow: 0 0 0 3px rgb(31 111 235 / 55%); background: rgb(31 111 235 / 6%); }
.grab.connect-hover.connect-ok { box-shadow: 0 0 0 4px #1f6feb; background: rgb(31 111 235 / 12%); }
.grab.connect-hover:not(.connect-ok) { box-shadow: 0 0 0 4px #c62828; }
.grab.connect-source { box-shadow: 0 0 0 3px #1f6feb; }
.drop-label.flip { translate: calc(-100% - 14px) 14px; }
.placeholder { color: #616e7c; padding: 16px; text-align: center; }
/* 図の上の操作の案内（app.js の showGuide）。図の欄の左上に重ねて出し、ページの並びは動かさない */
.diagram-guide {
  position: absolute;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 6px;
  background: #1f6feb;
  color: #ffffff;
  font-size: 12px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
  pointer-events: none;
}

/* 図の上の設定の窓（app.js の「図の上の設定の窓」。部品・枠・矢印で同じ形）。図の欄の上に浮かべる */
.popover {
  position: absolute;
  z-index: 5;
  width: min(320px, calc(100% - 16px));
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 6px 24px rgb(0 0 0 / 22%);
  display: grid;
  gap: 8px;
  font-size: 13px;
}
.popover-head { display: flex; align-items: center; justify-content: space-between; }
.popover-x { border: none; background: none; font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer; color: var(--muted); }
.popover-name { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.popover-row { display: grid; grid-template-columns: 4.5em 1fr; gap: 6px; align-items: center; }
.popover-label { color: var(--muted); }
.popover-choices { display: flex; flex-wrap: wrap; gap: 4px; }
.popover-choices button { padding: 3px 8px; }
.popover-choices button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.popover-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 1.6em; align-items: center; }
.popover-tags:empty::before { content: "なし"; color: var(--muted); }
.popover-add { display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.popover-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.popover-presets button { padding: 2px 6px; font-size: 12px; }
.popover-note { margin: 0; font-size: 12px; color: var(--muted); }
.popover-note:empty { display: none; }
.popover-note.error { color: var(--error); font-weight: bold; }
.popover-foot { display: flex; justify-content: flex-end; gap: 6px; }
.popover-foot .danger { margin-right: auto; color: var(--error); }

/* 今ある矢印の押せる場所（app.js の「図の上の矢印を押して直す・消す」）。線より太い透明な線で、
   図を縮めても太さは画面の px のまま。マウスを乗せたときと、窓で直している間だけ色を付ける */
.edge-hit { cursor: pointer; }
.edge-hit-line { fill: none; stroke: transparent; stroke-width: 14px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.edge-hit-label { fill: transparent; pointer-events: all; }
.edge-hit:hover .edge-hit-line, .edge-hit.selected .edge-hit-line { stroke: rgb(31 111 235 / 35%); }
.edge-hit:hover .edge-hit-label, .edge-hit.selected .edge-hit-label { fill: rgb(31 111 235 / 15%); }
/* 矢印を引いている間は、矢印は押せない（相手の部品を押すのを邪魔しない） */
.diagram-overlay.connecting .edge-hit > * { pointer-events: none; }
@media (hover: none) {
  .edge-hit-line { stroke-width: 22px; }
}
.popover-row input, .popover-row select { width: 100%; box-sizing: border-box; }
.popover input.invalid { border-color: var(--error); }

/* 枠を押す場所（app.js の「図の上の枠を押して直す・消す」）。図全体に敷き、部品や矢印の押せる場所はこの上に重ねる。
   指で図をスクロールできるよう、touch-action は止めない */
.frame-area { position: absolute; inset: 0; }
/* 拡大して図が欄からはみ出しているときは、何もないところや枠をつかんで図を動かせる（app.js の startBackground） */
.preview-box.pannable .frame-area { cursor: grab; }
.diagram-overlay.panning, .diagram-overlay.panning .frame-area { cursor: grabbing; }
.frame-hover, .frame-selected { position: absolute; pointer-events: none; border-radius: 4px; }
.frame-hover { outline: 2px dashed rgb(31 111 235 / 60%); }
.frame-selected { outline: 3px solid #1f6feb; background: rgb(31 111 235 / 5%); }
/* 設定の窓で直している部品 */
.grab.selected { outline: 3px solid #1f6feb; outline-offset: 2px; }