/* ===================== [PLOT] 馬体プロット作成モーダル ===================== */
.plot-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:300;display:flex;align-items:center;justify-content:center;padding:18px}
.plot-sheet{background:#171717;border-radius:14px;box-shadow:var(--shadow);width:min(1200px,100%);max-height:96vh;display:flex;flex-direction:column;overflow:hidden}
.plot-header{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid #2a2a2a;flex-wrap:wrap;gap:10px}
.plot-header-btns{display:flex;gap:6px;flex-wrap:wrap}
/* PLOT-VIEW-UNIFY-A02: 見出しの右に分類プルダウンを並べる（Compactでは折り返す）。 */
.plot-header-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.plot-header-category{display:inline-flex;align-items:center;gap:6px;min-width:0}
.plot-header-category[hidden]{display:none}
.plot-header-category select{
  min-height:44px;max-width:220px;padding:6px 8px;
  background:#0e0e0e;color:#fff;border:1px solid #333;border-radius:6px;font-size:12px;
}
.plot-header-category select:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
/* PLOT-REFERENCE-IMAGE-UI-01: 見出し左の情報ボタン。既存 .info-i の円形「i」デザインを踏襲（用途はモーダル起動のため別クラス）。 */
.plot-ref-info-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--gold);background:transparent;color:var(--gold-soft);font-size:12px;font-weight:700;font-family:Georgia,serif;line-height:1;cursor:pointer;padding:0;vertical-align:middle;flex:0 0 auto;transition:.15s}
.plot-ref-info-btn:hover{background:rgba(201,166,74,.18)}
.plot-ref-info-btn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.plot-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;padding:14px;overflow:auto}
.plot-canvas-wrap{display:flex;flex-direction:column;gap:8px;min-width:0}
.plot-help{font-size:12px;color:#bbb;line-height:1.6}
/* §6 2000×2000・中心原点の論理ワークスペース。画像は正方形へ contain 中央配置（縦横比は維持）。 */
.plot-editor-canvas{position:relative;width:100%;background:#0c0c0c;border-radius:10px;overflow:hidden;aspect-ratio:1/1;touch-action:none;-webkit-user-select:none;user-select:none}
.plot-editor-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transform-origin:center center;transition:transform .12s ease;z-index:1}
.plot-editor-svg{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;z-index:4}
/* 第5優先-4: 点・線のサイズ（r / stroke-width / font-size）は viewBox 実寸化に伴い描画側でピクセル指定 */
.plot-editor-svg .pt-circle{fill:var(--gold);stroke:#fff;cursor:grab}
.plot-editor-svg .pt-circle.selected{stroke:#fff;filter:drop-shadow(0 0 4px #ffd76b)}
.plot-editor-svg .pt-circle.connect-src{fill:#4a8fd8;stroke:#bdf;animation:plot-connect-pulse 1.1s ease-in-out infinite}
@keyframes plot-connect-pulse{0%,100%{stroke-opacity:1;fill-opacity:1}50%{stroke-opacity:.35;fill-opacity:.55}}
.plot-editor-svg .pt-sel-ring{fill:none;stroke:#ffd76b;stroke-dasharray:5 4;opacity:.95;pointer-events:none}
.plot-editor-svg .pt-sel-ring.connect{stroke:#7ab3f0}
.plot-editor-svg .pt-label{fill:#fff;paint-order:stroke;stroke:#000;pointer-events:none;font-family:sans-serif}
.plot-editor-svg .pt-line{stroke-linecap:round;opacity:.85;cursor:pointer}
.plot-editor-svg .pt-line.selected{opacity:1;filter:drop-shadow(0 0 3px #fff)}
.plot-editor-svg .ln-hit{stroke:transparent;fill:none;pointer-events:stroke;cursor:pointer}
.plot-editor-svg .pt-hit{fill:transparent;stroke:none;pointer-events:all;cursor:grab}
.plot-editor-svg.dragging,.plot-editor-svg.dragging .pt-hit{cursor:grabbing}
/* PLOT-UNIFIED-DIRECT-IMAGE-CONTROL-01: 「点を追加」モードで画像パン（背景ドラッグ／長押し）中のカーソル */
.plot-editor-svg.plot-img-panning,.plot-editor-svg.plot-img-panning .pt-hit{cursor:grabbing}
.plot-panel{background:#1c1c1c;border-radius:10px;padding:12px;font-size:13px;display:flex;flex-direction:column;gap:10px;overflow:auto;max-height:75vh}
.plot-panel h4{margin:0 0 4px 0;font-size:13px;color:var(--gold-soft)}
.plot-panel .plot-image-note{font-size:11px;color:#aaa;line-height:1.6;margin-top:4px}
.plot-panel .plot-adjust-row{display:grid;grid-template-columns:60px 1fr 44px;align-items:center;gap:6px;margin-bottom:4px;font-size:12px}
.plot-panel .plot-adjust-row label{color:#ddd}
.plot-panel .plot-adjust-row input[type=range]{width:100%}
.plot-panel .plot-adjust-value{font-size:11px;color:var(--gold-soft);text-align:right;font-variant-numeric:tabular-nums}
.plot-panel .plot-bg-status{font-size:11px;color:#ddd;margin-top:4px}
.base-plot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:8px}
.base-plot-card-item{display:flex;gap:12px;align-items:flex-start}
.base-plot-preview{max-width:150px;max-height:110px;object-fit:contain;background:#0c0c0c;border:1px solid #333;border-radius:8px;flex-shrink:0}
.base-plot-info{font-size:13px;min-width:0}
.comparison-detail-row td{background:#101010}
.comparison-detail-box{background:#121212;border:1px solid #333;border-radius:12px;padding:12px}
.comparison-section{border:1px solid #333;border-radius:10px;overflow:hidden;margin-top:10px;background:#111}
.comparison-section-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;background:#181818;border:0;color:var(--text);text-align:left;font-size:12px;font-weight:700;cursor:pointer}
.comparison-section-head:hover{background:#202020}
.comparison-section-body{padding:10px}
.comparison-row-small{border-left:3px solid rgba(91,154,120,.7);padding-left:6px}
.comparison-row-medium{border-left:3px solid rgba(59,91,140,.8);padding-left:6px}
.comparison-row-large{border-left:3px solid rgba(192,138,90,.9);padding-left:6px}
.comparison-row-very-large{border-left:3px solid rgba(181,107,107,.95);padding-left:6px;background:rgba(181,107,107,.08)}
.comparison-issue-box{border:1px solid rgba(192,138,90,.35);background:rgba(192,138,90,.08);border-radius:8px;padding:8px;margin-top:8px}
.comparison-issue-box.high{border-color:rgba(181,107,107,.55);background:rgba(181,107,107,.10)}
.plot-panel .plot-bg-info{margin:6px 0 4px;font-size:11px;color:#ddd;border:1px solid #333;border-radius:6px;padding:6px 8px;background:#0e0e0e}
.plot-panel .plot-bg-info-row{display:flex;justify-content:space-between;gap:8px;padding:1px 0}
.plot-panel .plot-bg-info-row span:first-child{color:#aaa}
.plot-panel .plot-preview-mode-row button{font-size:11px;padding:4px 8px}
.plot-panel .mode-row{display:flex;flex-wrap:wrap;gap:4px}
.plot-panel .mode-row button{padding:6px 10px;background:#2a2a2a;color:#ddd;border:1px solid #333;border-radius:6px;cursor:pointer;font-size:12px}
.plot-panel .mode-row button.active{background:var(--gold);color:#1a1a1a;border-color:var(--gold)}
.plot-panel select, .plot-panel input[type=text]{width:100%;padding:6px 8px;background:#0e0e0e;color:#fff;border:1px solid #333;border-radius:6px;font-size:12px}
.plot-panel .color-row{display:flex;gap:6px;flex-wrap:wrap}
.plot-panel .color-row button{width:34px;height:24px;border-radius:5px;border:2px solid #333;cursor:pointer}
.plot-panel .color-row button.active{border-color:#fff;box-shadow:0 0 0 2px #ffd76b}
/* §23 白・銀は暗背景で判別できるよう枠線を明るくする */
.plot-panel .color-row button[data-color-key="white"],
.plot-panel .color-row button[data-color-key="silver"]{border-color:#8a8f96}
/* §8 選択点の論理座標(-1000〜+1000)入力 */
.plot-panel .plot-coord-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plot-panel .plot-coord-row .plot-coord-label{color:#ddd;font-size:12px}
.plot-panel .plot-coord-row label{display:flex;align-items:center;gap:4px;font-size:12px;color:#ddd}
.plot-panel .plot-coord-row input[type=number]{width:72px;padding:5px 6px;background:#0e0e0e;color:#fff;border:1px solid #333;border-radius:6px;font-size:12px;font-variant-numeric:tabular-nums}
/* HORSE-PLOT-BASE-CONTROLS-A01: 「ベース登録」の表示設定。
   トグルは既存 .btn.sm を再利用し（背景・枠線・文字・角丸・hover は共通）、タッチ領域だけ44pxへ拡張する。
   サイズ行は通常プロットの「点サイズ／線のサイズ／ラベルサイズ」行と同じ構成・見た目に揃える。 */
.plot-panel .plot-base-toggle-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.plot-panel .plot-base-toggle{min-height:44px;flex:1 1 auto;min-width:0}
.plot-panel .plot-base-toggle:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.plot-panel .plot-base-toggle:disabled{opacity:.45;cursor:not-allowed}
.plot-panel .plot-base-toggle:disabled:hover{border-color:var(--line);color:var(--text)}
.plot-panel .plot-base-size-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ラベルが通常プロット側より長いぶん range の最小幅を詰め、PCでは1行に収める（狭い幅では折り返す） */
.plot-panel .plot-base-size-row input[type=range]{flex:1 1 90px;min-width:80px}
.plot-panel .plot-base-size-row input[type=number]{
  width:64px;flex:0 0 auto;background:#0e0e0e;color:#fff;
  border:1px solid #333;border-radius:6px;padding:4px 6px;font-size:12px;
}
.plot-panel .plot-base-size-row input:disabled{opacity:.45;cursor:not-allowed}
.plot-panel .plot-base-size-unit{font-size:11px;color:#aaa}
.plot-panel .meta-row{display:flex;justify-content:space-between;font-size:11px;color:#aaa}
.plot-panel .sel-info{background:#222;border-radius:8px;padding:8px;font-size:12px}
.plot-panel .sel-info .row{margin-bottom:4px}
.plot-panel .sel-info.connect-info{border:1px solid #3b5b8c;background:#16202c}
.plot-panel .plot-kbd-help{font-size:11px;color:#9cb8a8;line-height:1.7;background:#161f1a;border:1px solid #2a3a30;border-radius:6px;padding:6px 8px;margin-top:6px}
.plot-panel .plot-dirty-status{font-size:11px;color:#8a9;padding:2px 0}
.plot-panel .plot-dirty-status.dirty{color:#e0c14a;font-weight:700}
/* PLOT-EDITOR-TEXT-OPACITY-UI-01: 未保存表示をヘッダ（保存ボタン左）へ移設。Compactでは flex-wrap で折り返す。 */
.plot-header .plot-dirty-status{font-size:11px;color:#e0c14a;font-weight:700;display:inline-flex;align-items:center;line-height:1.4}
.plot-header .plot-dirty-status[hidden]{display:none}
/* PLOT-CLEAR-ALL-01: プロット全消去（右パネル最下部の危険操作）。
   既存 .btn.danger は輪郭のみ（赤枠・赤文字）で「赤背景・白文字」を満たさないため、
   同じ赤系パレット(#b56b6b 系)を基に塗り潰しバリアントを1つだけ追加する。
   既存の .btn.danger（この点を削除／この線を削除／プロット削除トグル）は変更しない。 */
.plot-panel .plot-clear-all-row{margin-top:2px;padding-top:10px;border-top:1px solid #2a2a2a}
.btn.danger-solid{background:#9e4b4b;border-color:#9e4b4b;color:#fff;font-weight:700;
  width:100%;min-height:44px;flex:none}
.btn.danger-solid:hover:not(:disabled){background:#b25757;border-color:#b25757;color:#fff}
.btn.danger-solid:active:not(:disabled){background:#843d3d;border-color:#843d3d;color:#fff}
.btn.danger-solid:focus-visible{outline:2px solid #ffd76b;outline-offset:2px}
.btn.danger-solid:disabled{background:#3a2c2c;border-color:#4a3636;color:#8a7676;
  font-weight:400;cursor:not-allowed}
.plot-detail-overlay{position:absolute;inset:0;pointer-events:none}

/* PLOT-BASE-BG-PER-IMAGE-UI-A10: ベース背景はSVG内の image（点・線と同じ変換） */
.base-bg-image{pointer-events:none}

/* BODY-PLOT-ANGLE-DISPLAY-A48: 選んだ点の角度。既存の点・線を隠さない小さな表示にする。 */
.plot-angle-arc{fill:none;stroke:#e0c14a;stroke-width:1.6;stroke-opacity:.95;}
.plot-angle-arm{stroke:#e0c14a;stroke-width:1.2;stroke-opacity:.55;stroke-dasharray:4 3;}
.plot-angle-label{fill:#e0c14a;font-weight:800;paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:3px;}
/* A48R2: 角度が複数あるときの一覧（選択中の点の欄） */
.plot-angle-list-title{font-size:11px;color:#9a9a9a;margin-bottom:4px;}
.plot-angle-list{display:flex;flex-direction:column;gap:3px;max-height:180px;overflow-y:auto;}
.plot-angle-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;}
.plot-angle-pair{color:#cfcfcf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.plot-angle-deg{color:#e0c14a;font-weight:700;flex:0 0 auto;}

/* BODY-PLOT-ANGLE-INTERACTION-A48R3: 角度計測中の目印と選択一覧 */
.plot-angle-axis{fill:none;stroke:#e0c14a;stroke-width:2.2;}
.plot-angle-target{fill:none;stroke:#8fd14f;stroke-width:2;}
.plot-angle-targets{display:flex;flex-wrap:wrap;gap:6px;}
.plot-angle-target-name{display:inline-block;padding:2px 8px;border:1px solid #3a4a2e;border-radius:999px;
  background:rgba(143,209,79,.12);color:#b9e08a;font-size:11px;font-weight:700;}
#plot-angle-panel .row{margin-top:6px;}

/* PLOT-PHOTO-URL-SOURCE-B38: 写真URL画像の読込エラー表示（背景の上・プロットの下） */
.plot-editor-image-error{position:absolute;left:8px;right:8px;top:8px;z-index:3;
  background:rgba(0,0,0,.72);color:var(--warn);border:1px solid var(--warn);border-radius:8px;
  padding:8px 10px;font-size:12px;line-height:1.5;pointer-events:none}