/* ===================== [CSS] デザインシステム ===================== */
:root{
  --bg:#0f1115;            /* ベース背景（ダーク基調の分析ツール感） */
  --panel:#171a21;         /* パネル背景 */
  --panel-2:#1f242d;       /* やや明るいパネル */
  --line:#2a3038;          /* 罫線 */
  --text:#e8eaed;          /* 基本テキスト */
  --text-sub:#9aa3af;      /* サブテキスト */
  --text-mute:#6b7280;     /* 補足 */
  --gold:#c9a64a;          /* アクセント（ゴールド） */
  --gold-soft:#e3c879;
  --navy:#3b5b8c;          /* 補助アクセント（ネイビー） */
  --good:#5b9a78;          /* ポジティブ（控えめ） */
  --warn:#c08a5a;          /* 注意（控えめ） */
  --risk:#b56b6b;          /* リスク（控えめ・赤すぎない） */
  --radius:14px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --sidebar-w:250px;        /* サイドバー幅（レスポンシブで縮小） */
  --main-gutter:22px;       /* メイン表示領域の左右ガター */
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(201,166,74,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(59,91,140,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:"Helvetica Neue","Hiragino Sans","Yu Gothic UI","Segoe UI",sans-serif;
  font-size:14px; line-height:1.6; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:none;width:100%;margin:0;padding:0;}
/* ===================== [LAYOUT] App Shell / Sidebar ===================== */
.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;background:var(--bg)}
.app-sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;background:#0d0d0d;border-right:1px solid #1f1f1f;padding:14px 10px 30px;z-index:50;
  scrollbar-width:thin;scrollbar-color:#2c2c2c transparent}
.app-sidebar::-webkit-scrollbar{width:8px}
.app-sidebar::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.app-sidebar::-webkit-scrollbar-track{background:transparent}
/* スクロールしてもブランド（現在アプリの識別）が残るよう追従させる */
.app-sidebar .brand-mini{position:sticky;top:-14px;z-index:2;background:#0d0d0d;padding:6px 10px 14px;border-bottom:1px solid #1f1f1f;margin-bottom:12px}
.app-sidebar .brand-mini h1{font-size:16px;margin:0;color:var(--gold-soft);letter-spacing:.06em}
.app-sidebar .brand-mini .by{font-size:10px;color:#888;margin-top:2px}
.app-sidebar .brand-mini .platform{font-size:10px;color:#666;letter-spacing:.08em;text-transform:uppercase}
.app-sidebar .menu-group{margin-bottom:4px}
.app-sidebar .menu-parent{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;background:transparent;border:0;color:#ddd;font-size:12.5px;font-weight:700;padding:9px 10px;cursor:pointer;border-radius:7px;text-align:left;letter-spacing:.04em;transition:background .12s,color .12s}
.app-sidebar .menu-parent:hover{background:#181818}
.app-sidebar .menu-parent .chev{font-size:9px;opacity:.5;transition:transform .2s;flex:0 0 auto}
.app-sidebar .menu-group.open .menu-parent{color:#fff}
.app-sidebar .menu-group.open .menu-parent .chev{transform:rotate(90deg);opacity:.75}
/* 選択中の子項目を含むグループの親ラベルを強調（:has 対応ブラウザのみ・非対応でも既存表示は不変） */
.app-sidebar .menu-group:has(.menu-child.active) .menu-parent{color:var(--gold-soft)}
.app-sidebar .menu-children{display:none;padding:2px 0 8px 8px;margin-left:6px;border-left:1px solid #1c1c1c}
.app-sidebar .menu-group.open .menu-children{display:block}
/* flex 化: 長いリスト名を省略表示しつつ、件数バッジを右端に固定（折り返しによる高さ不揃いを防ぐ） */
.app-sidebar .menu-child{display:flex;align-items:center;gap:6px;width:100%;background:transparent;border:0;color:#aaa;font-size:12px;line-height:1.4;padding:7px 10px 7px 16px;cursor:pointer;text-align:left;border-radius:6px;border-left:2px solid transparent;transition:background .12s,color .12s}
.app-sidebar .menu-child>span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-sidebar .menu-child>.rank-meta{flex:0 0 auto;color:#777;font-variant-numeric:tabular-nums}
.app-sidebar .menu-child:hover{background:#161616;color:#fff}
.app-sidebar .menu-child:hover>.rank-meta{color:#aaa}
.app-sidebar .menu-child.active{background:linear-gradient(90deg,rgba(201,166,74,.18),rgba(201,166,74,.04));color:var(--gold-soft);border-left-color:var(--gold);font-weight:700}
.app-sidebar .menu-child.active>.rank-meta{color:var(--gold-soft)}
/* キーボード操作時の現在位置を明示 */
.app-sidebar .menu-parent:focus-visible,.app-sidebar .menu-child:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.app-main{min-width:0;width:100%;padding:16px var(--main-gutter) 48px;background:var(--bg)}
.app-main header.site{display:none}
.app-main nav.tabs{display:none}
.import-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.import-form .field{display:flex;flex-direction:column;gap:4px;font-size:12px}
.import-form label{font-weight:700;color:#ddd;font-size:12px}
.import-form input[type=text], .import-form input[type=date], .import-form select, .import-form textarea{padding:8px 10px;background:#0e0e0e;color:#fff;border:1px solid #2a2a2a;border-radius:6px;font-size:13px;font-family:inherit}
.import-form textarea{min-height:60px;resize:vertical}
.import-table{width:100%;border-collapse:collapse;font-size:13px}
.import-table th, .import-table td{padding:8px;border-bottom:1px solid #2a2a2a;text-align:left;vertical-align:top}
.import-table th{background:#171717;color:#ddd;font-weight:600;font-size:12px}
.import-table tr:hover td{background:#151515}
.import-table .empty{text-align:center;color:#777;padding:24px}
.batch-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.batch-bar button{background:#1c1c1c;border:1px solid #2c2c2c;color:#ccc;padding:6px 10px;border-radius:6px;font-size:12px;cursor:pointer}
.batch-bar button.active{background:var(--gold);color:#1a1a1a;border-color:var(--gold);font-weight:700}
.placeholder-note{padding:20px;background:#161616;border-radius:10px;font-size:13px;color:#aaa;line-height:1.7}
/* ノートPC / iPad横: サイドバーを少し狭めて本文を広く */
@media(max-width:1200px){ :root{--sidebar-w:220px} }
/* iPad縦ほか1カラム時: メニューが本文を押し下げないよう高さを制限し、内部スクロールに閉じ込める */
@media(max-width:900px){
  :root{--main-gutter:16px}
  .app-shell{grid-template-columns:1fr}
  .app-sidebar{position:relative;height:auto;max-height:38vh;border-right:0;border-bottom:1px solid #1f1f1f;padding:10px 10px 8px}
  .app-sidebar .brand-mini{padding-bottom:10px;margin-bottom:8px}
  .app-sidebar .brand-mini .platform{display:none}
  /* タッチ操作向けに当たり判定を拡大 */
  .app-sidebar .menu-parent{padding:11px 10px}
  .app-sidebar .menu-child{padding:10px 10px 10px 16px}
}
/* スマホ: 本文ガターをさらに詰める */
@media(max-width:640px){ :root{--main-gutter:12px} }

/* ---------- ヘッダー ---------- */
header.site{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(23,26,33,.95), rgba(15,17,21,.8));
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:50;
}
.head-inner{max-width:1200px;margin:0 auto;padding:14px 20px;}
.brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.logo-mark{
  width:40px;height:40px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold),#8a7227);
  display:flex;align-items:center;justify-content:center;
  color:#1a1a1a;font-weight:800;font-size:18px;box-shadow:var(--shadow);
}
.brand h1{font-size:20px;margin:0;letter-spacing:.04em;font-weight:700;}
.brand .sub{color:var(--gold-soft);font-size:12.5px;letter-spacing:.06em;}
.brand .desc{color:var(--text-sub);font-size:12px;width:100%;margin-top:2px;}
.brand .by{margin-left:auto;color:var(--text-mute);font-size:11px;letter-spacing:.12em;text-transform:uppercase;}

/* ---------- タブ ---------- */
nav.tabs{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;}
nav.tabs button{
  background:transparent;border:1px solid transparent;color:var(--text-sub);
  padding:7px 16px;border-radius:10px;font-size:13.5px;letter-spacing:.04em;
  transition:.15s;display:flex;flex-direction:column;align-items:center;line-height:1.25;
}
nav.tabs button .en{font-size:9.5px;letter-spacing:.08em;opacity:.7;font-weight:400;text-transform:uppercase;}
nav.tabs button:hover{color:var(--text);background:var(--panel-2);}
nav.tabs button.active{
  color:#1a1a1a;background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  font-weight:700;box-shadow:0 4px 14px rgba(201,166,74,.25);
}
nav.tabs button.active .en{opacity:.55;}

/* ---------- 画面説明インフォアイコン (i) ---------- */
.info-i{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;border:1px solid var(--gold);
  color:var(--gold-soft);font-size:12px;font-weight:700;font-style:normal;font-family:Georgia,serif;
  cursor:pointer;position:relative;flex:0 0 auto;-webkit-user-select:none;user-select:none;transition:.15s;}
.info-i:hover{background:rgba(201,166,74,.18);}
.info-i .info-pop{position:absolute;top:28px;left:50%;transform:translateX(-50%);
  width:300px;max-width:78vw;background:rgba(15,17,21,.98);border:1px solid var(--gold);
  border-radius:12px;padding:13px 15px;font-size:12px;line-height:1.75;color:var(--text);
  box-shadow:var(--shadow);z-index:80;display:none;font-weight:400;text-align:left;letter-spacing:.01em;}
.info-i .info-pop::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:rgba(15,17,21,.98);border-left:1px solid var(--gold);border-top:1px solid var(--gold);}
.info-i .info-pop b{color:var(--gold-soft);}
.info-i .info-pop .pop-title{font-size:13px;font-weight:700;color:var(--gold-soft);
  display:block;margin-bottom:5px;letter-spacing:.03em;}
/* ホバー or クリック(open)で表示。クリック/タッチはJSでopen付与 */
.info-i:hover .info-pop, .info-i.open .info-pop{display:block;}
/* 画面左寄りなのでツールチップは中央〜やや右に寄せて見切れ防止 */
@media(max-width:560px){ .info-i .info-pop{left:0;transform:none;} .info-i .info-pop::before{left:8px;} }

/* ---------- 汎用パネル / カード ---------- */
.section-title{display:flex;align-items:baseline;gap:12px;margin:28px 0 14px;}
.section-title h2{font-size:17px;margin:0;font-weight:700;letter-spacing:.03em;}
.section-title .hint{color:var(--text-mute);font-size:12px;}
.card{
  background:linear-gradient(180deg,var(--panel),#12151b);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.pad{padding:18px;}
.grid{display:grid;gap:14px;}

/* スタットカード */
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.stat{padding:16px 18px;}
.stat .label{color:var(--text-sub);font-size:12px;letter-spacing:.04em;}
.stat .value{font-size:26px;font-weight:800;margin-top:4px;letter-spacing:.02em;}
.stat .value.gold{color:var(--gold-soft);}
.stat .meta{color:var(--text-mute);font-size:12px;margin-top:2px;}

/* ランキング行 */
.rank-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.rank-list{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.rank-row{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  background:var(--panel-2);border-radius:10px;border:1px solid var(--line);
  cursor:pointer;transition:.15s;
}
.rank-row:hover{border-color:var(--gold);transform:translateX(2px);}
.rank-no{width:24px;height:24px;border-radius:50%;flex:0 0 auto;
  background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;}
.rank-no.top{background:linear-gradient(135deg,var(--gold),#8a7227);color:#1a1a1a;}
.rank-name{font-weight:600;font-size:13.5px;}
.rank-meta{color:var(--text-mute);font-size:11.5px;}
.rank-val{margin-left:auto;font-weight:800;color:var(--gold-soft);font-size:15px;}

/* ---------- バッジ ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.03em;border:1px solid var(--line);}
.rank-S{background:linear-gradient(135deg,#c9a64a,#e3c879);color:#1a1a1a;border:none;}
.rank-A{background:rgba(201,166,74,.16);color:var(--gold-soft);border-color:rgba(201,166,74,.4);}
.rank-B{background:rgba(59,91,140,.18);color:#9fb6d8;border-color:rgba(59,91,140,.5);}
.rank-C{background:rgba(192,138,90,.16);color:#d8b08a;border-color:rgba(192,138,90,.4);}
.rank-D{background:rgba(120,120,120,.16);color:#a8adb5;}
/* HS-EVAL-RANK-01B: 相対ランク E〜G と 母集団不足/未確定（rank-none）。既存 rank-* の配色トーンに合わせる。 */
.rank-E{background:rgba(120,120,120,.14);color:#9aa0a8;}
.rank-F{background:rgba(120,120,120,.12);color:#8b9098;}
.rank-G{background:rgba(120,120,120,.10);color:#7d828a;}
.rank-none{background:rgba(90,90,90,.10);color:#8a8f97;border-color:rgba(120,120,120,.35);border-style:dashed;}
.badge.rank-ref{opacity:.9;}
.risk-高{color:#d99;border-color:rgba(181,107,107,.5);background:rgba(181,107,107,.14);}
.risk-中{color:#d8b08a;border-color:rgba(192,138,90,.4);background:rgba(192,138,90,.12);}
.risk-低{color:#8fbfa3;border-color:rgba(91,154,120,.4);background:rgba(91,154,120,.12);}
.tag-type{background:rgba(59,91,140,.16);color:#aebfd8;border-color:rgba(59,91,140,.45);}

/* ---------- Horse List ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.toolbar input,.toolbar select{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:8px 11px;border-radius:9px;font-size:13px;outline:none;min-width:120px;
}
.toolbar input:focus,.toolbar select:focus{border-color:var(--gold);}
.toolbar label{font-size:11px;color:var(--text-mute);display:flex;flex-direction:column;gap:3px;}
/* 全馬リストのフィルターをグリッド整列（列がそろい、狭幅でも折返しが安定・入力欄は等幅） */
#list-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px 12px;align-items:end;}
#list-toolbar label{min-width:0;}
#list-toolbar input,#list-toolbar select{min-width:0;width:100%;}
#list-toolbar #f-reset{justify-self:start;align-self:end;min-height:34px;}

.horse-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));}
.hcard{display:flex;flex-direction:column;overflow:hidden;transition:.15s;}
.hcard:hover{border-color:var(--gold);transform:translateY(-2px);}
/* HORSE-LIST-CARD-UI-01 #1: 馬画像を正方形(1:1)・全体表示(object-fit:contain・切り抜かない) */
.hcard .photo{aspect-ratio:1/1;background:var(--panel-2);position:relative;overflow:hidden;}
.hcard .photo img{width:100%;height:100%;object-fit:contain;display:block;}
.hcard .ph-badge{position:absolute;top:10px;left:10px;}
/* HORSE-LIST-CARD-UI-01 #2: 写真右下オーバーレイ = BCS｜SCORE（左BCS / 右SCORE）。カード・比較欄で共通 */
.ph-score{position:absolute;bottom:10px;right:10px;background:rgba(15,17,21,.82);
  border:1px solid var(--line);border-radius:10px;padding:4px 4px;display:flex;align-items:stretch;}
.ph-metric{padding:0 8px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:1px;}
.ph-metric + .ph-metric{border-left:1px solid var(--line);}
.ph-metric .n{font-size:18px;font-weight:800;color:var(--gold-soft);line-height:1;}
.ph-metric .t{font-size:9px;color:var(--text-mute);letter-spacing:.06em;}
/* HORSE-LIST-CARD-UI-01 #3: 正式馬名（馬名の下・空なら非表示） */
.official-name{font-size:12px;color:var(--text-sub);font-weight:400;line-height:1.25;margin-top:-2px;}
/* HORSE-LIST-CARD-UI-01 #4: 性別の色分け（牡=青 / 牝=赤 / セン=黄） */
.horse-sex{font-size:12px;font-weight:700;color:var(--text-mute);}
.horse-sex.sex-male{color:#5b9dff;}
.horse-sex.sex-female{color:#ff6b7a;}
.horse-sex.sex-gelding{color:#e8c14a;}

/* HORSE-DATA-HEADER-TAGS-A33: 馬タグ（リスト分類とは別のラベル） */
.horse-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;margin:0 4px 4px 0;
  border:1px solid var(--line);border-radius:999px;background:var(--panel-2);
  font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;}
.horse-tag-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
/* タグ管理モーダル */
.horse-tag-sheet{max-width:420px;width:min(420px,92vw);}
.horse-tag-list{display:flex;flex-direction:column;gap:10px;}
.horse-tag-new{align-self:flex-start;}
.horse-tag-search{width:100%;padding:8px 10px;background:#0e0e0e;color:var(--text);
  border:1px solid var(--line);border-radius:8px;font-size:13px;}
.horse-tag-rows{display:flex;flex-direction:column;gap:4px;max-height:min(46vh,320px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#2c2c2c transparent;}
.horse-tag-rows::-webkit-scrollbar{width:8px}
.horse-tag-rows::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.horse-tag-rows::-webkit-scrollbar-track{background:transparent}
/* HORSE-TAG-MANAGEMENT-EDIT-DELETE-A35: 1行の中で操作を3つに分ける。
   左（チェックと色）＝この馬へ付ける/外す ／ 名前＝名前を直す ／ 右＝タグ自体を消す。 */
.horse-tag-row{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;padding:4px 6px;
  border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text);font-size:13px;}
.horse-tag-row:hover{background:var(--panel-2);}
.horse-tag-row.on{background:var(--panel-2);border-color:var(--gold);}
.horse-tag-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:40px;min-height:36px;
  padding:4px 8px;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;}
.horse-tag-toggle:hover{border-color:var(--line);}
/* HORSE-TAG-DUAL-ENTRY-COLOR-EDIT-A44: 色の丸は押すと色を選び直せる（付与切替とは別の領域） */
.horse-tag-color{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;min-height:36px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;}
.horse-tag-color:hover,.horse-tag-color:focus-visible{border-color:var(--gold);outline:none;}
.horse-tag-color .horse-tag-dot{width:14px;height:14px;}
.horse-tag-row.is-color-editing{flex-direction:column;align-items:stretch;gap:8px;padding:10px;}
.horse-tag-color-edit{display:flex;flex-direction:column;gap:8px;}
.horse-tag-color-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.horse-tag-check{font-size:14px;color:var(--gold-soft);flex:0 0 auto;}
.horse-tag-row-name{flex:1 1 auto;min-width:0;min-height:36px;padding:4px 6px;border:1px solid transparent;
  border-radius:8px;background:transparent;color:var(--text);font-size:13px;font-weight:600;text-align:left;
  cursor:text;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.horse-tag-row-name:hover{border-color:var(--line);}
.horse-tag-del{flex:0 0 auto;}
.horse-tag-row.is-editing{background:var(--panel-2);border-color:var(--line);}
.horse-tag-rename-input{flex:1 1 auto;min-width:0;padding:6px 8px;background:#0e0e0e;color:var(--text);
  border:1px solid var(--line);border-radius:8px;font-size:13px;}
.horse-tag-empty{padding:10px 2px;}
.horse-tag-create{display:flex;flex-direction:column;gap:12px;}
.horse-tag-create input{width:100%;padding:8px 10px;background:#0e0e0e;color:var(--text);
  border:1px solid var(--line);border-radius:8px;font-size:13px;}
.horse-tag-colors{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.horse-tag-swatch{width:36px;height:36px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid transparent;background:transparent;display:inline-flex;align-items:center;justify-content:center;}
.horse-tag-swatch-dot{width:24px;height:24px;border-radius:50%;background:var(--tag-color);display:block;}
.horse-tag-swatch:hover{border-color:var(--line);}
.horse-tag-swatch.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,166,74,.25);}
.horse-tag-actions{display:flex;justify-content:flex-end;gap:8px;}
.horse-tag-create-msg{color:#fbb1a3;}

/* お気に入り（♡ / ❤️） */
.fav-btn{border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;
  padding:2px 4px;border-radius:8px;transition:transform .12s;color:#9aa3af;}
.fav-btn:hover{transform:scale(1.2);}
.fav-btn.on{color:#e0566b;}
.fav-overlay{position:absolute;top:8px;right:8px;z-index:4;width:34px;height:34px;border-radius:50%;
  background:rgba(15,17,21,.72);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.fav-overlay:hover{border-color:#e0566b;}
.fav-overlay .fav-btn{font-size:19px;padding:0;}
.hcard .body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1;}
.hcard .name{font-size:16px;font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;line-height:1.3;min-width:0;}
/* LIST-CARD-MEMBERSHIP-TAGS-A22: 所属タグは何件でも折り返す。長いリスト名でもカード幅を超えない */
.hcard .name .list-badge{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;}
.hcard .ped{color:var(--text-sub);font-size:12px;}
.hcard .meta-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.hcard .price{font-weight:700;font-size:14px;}
.hcard .price .share{color:var(--text-mute);font-weight:400;font-size:11.5px;}
.hcard .comment{color:var(--text-sub);font-size:12px;border-top:1px dashed var(--line);padding-top:8px;}
.hcard .actions{display:flex;gap:8px;margin-top:auto;}
.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  padding:8px 12px;border-radius:9px;font-size:12.5px;transition:.15s;flex:1;text-align:center;}
.btn:hover{border-color:var(--gold);color:var(--gold-soft);}
/* AI-PERSISTENCE-AND-CANCEL-UI-B66: キャンセルは実行中だけ出す（hidden を確実に効かせる） */
.btn[hidden]{display:none !important;}
.btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#1a1a1a;
  border:none;font-weight:700;}
.btn.primary:hover{color:#1a1a1a;filter:brightness(1.05);}
.btn.ghost{background:transparent;}
.btn.danger{border-color:rgba(181,107,107,.5);color:#d99;}
.btn.danger:hover{background:rgba(181,107,107,.14);}
.btn.sm{padding:5px 10px;font-size:11.5px;flex:none;}

/* ---------- Horse Detail ---------- */
.detail-layout{display:grid;grid-template-columns:minmax(320px,1fr) 1.1fr;gap:18px;align-items:start;}
.photo-area{position:relative;background:var(--panel-2);border-radius:var(--radius);
  border:1px solid var(--line);overflow:hidden;aspect-ratio:4/3;}
.photo-area img{width:100%;height:100%;object-fit:cover;}
.placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:var(--text-mute);gap:8px;
  background:
    linear-gradient(135deg,#1c2129,#14171d),
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px);}
.placeholder .horse-ico{font-size:46px;opacity:.5;}
/* チェックポイントピン */
.pin{position:absolute;transform:translate(-50%,-50%);z-index:3;}
.pin .dot{width:16px;height:16px;border-radius:50%;background:var(--gold);
  border:2px solid #1a1a1a;box-shadow:0 0 0 3px rgba(201,166,74,.25);cursor:pointer;transition:.15s;}
.pin .dot:hover{transform:scale(1.25);}
.pin .lab{position:absolute;top:-6px;left:18px;font-size:10px;background:rgba(15,17,21,.85);
  border:1px solid var(--line);padding:1px 6px;border-radius:6px;white-space:nowrap;color:var(--gold-soft);}
.pin .tip{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:190px;
  background:rgba(15,17,21,.96);border:1px solid var(--gold);border-radius:8px;padding:8px 10px;
  font-size:11.5px;color:var(--text);display:none;z-index:10;box-shadow:var(--shadow);}
.pin.open .tip{display:block;}
/* 写真端のピンはツールチップを内側へ寄せる */
.pin.edge-r .tip{left:auto;right:0;transform:none;}
.pin.edge-l .tip{left:0;transform:none;}
.pin.edge-b .tip{top:auto;bottom:20px;}
.pin.edge-r .lab{left:auto;right:18px;}
.pin .tip b{color:var(--gold-soft);}

.detail-block{margin-bottom:14px;}
.detail-block h3{font-size:13px;color:var(--gold-soft);margin:0 0 10px;letter-spacing:.05em;
  border-bottom:1px solid var(--line);padding-bottom:6px;font-weight:700;}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;}
.kv .k{color:var(--text-sub);}
.kv .v{text-align:right;font-weight:600;}
.help{color:var(--text-mute);font-size:11px;cursor:help;border-bottom:1px dotted var(--text-mute);}

/* 血統チャート（最大5代 / 再帰ツリー表示） */
.ped-tree{display:flex;margin-top:4px;min-height:220px;overflow-x:auto;}
.ped-tree .pn-col{display:flex;flex-direction:column;flex:1;min-width:0;}
.ped-tree .pn-row{display:flex;flex:1;min-width:0;}
.ped-tree .pn{flex:1 0 90px;border:1px solid var(--line);background:var(--panel-2);border-radius:6px;
  margin:1px;padding:3px 6px;display:flex;align-items:center;font-size:10.5px;line-height:1.25;
  word-break:break-word;color:var(--text);}
.ped-tree .pn.sire{border-left:3px solid #4a8fd8;}   /* 父=青（v0.3.20 ②: パス末尾で判定・全世代に付与） */
.ped-tree .pn.dam{border-left:3px solid #d85c5c;}    /* 母=赤 */
.ped-tree .pn.pn-parent{font-weight:700;font-size:12px;}  /* 直近の父/母のみ従来の強調を維持 */
.ped-tree .pn.empty{color:var(--text-mute);}
.ped-depth-note{font-size:10.5px;color:var(--text-mute);margin-top:4px;}
.hba-badge{display:inline-block;font-size:10px;color:#1a1a1a;background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  border-radius:6px;padding:2px 8px;font-weight:700;letter-spacing:.04em;}

/* 画像カルーセル */
.carousel{position:relative;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;}
.car-track{display:flex;width:100%;height:100%;transition:transform .3s ease;}
.car-slide{flex:0 0 100%;height:100%;position:relative;}
.car-slide img{width:100%;height:100%;object-fit:cover;display:block;}
/* v0.3.19 第5優先-3: プロット重ね表示スライドは編集キャンバスと同じ contain + transform 構造にする */
.car-slide img.plot-contain{object-fit:contain;background:#000;transform-origin:center center;}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  background:rgba(15,17,21,.7);border:1px solid var(--line);color:var(--gold-soft);font-size:18px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:.15s;z-index:6;}
.car-nav.prev{left:8px;} .car-nav.next{right:8px;}
.car-nav:hover{background:rgba(15,17,21,.9);border-color:var(--gold);}
.carousel:hover .car-nav{opacity:1;}            /* PCはホバー時のみ矢印表示 */
.car-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:6;}
.car-dots .d{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:.15s;}
.car-dots .d.on{background:var(--gold);transform:scale(1.25);}
.plot-toggle{position:absolute;top:8px;left:8px;z-index:6;background:rgba(15,17,21,.78);
  border:1px solid var(--gold);color:var(--gold-soft);font-size:11px;font-weight:700;
  padding:5px 10px;border-radius:8px;cursor:pointer;}
.plot-toggle:hover{background:rgba(15,17,21,.95);}
/* ADMIN-PHOTO-BASE-PLOT-TOGGLE-C01: 写真拡大表示の左上トグルを横一列に並べる。
   ボタンは既存 .plot-toggle をそのまま使い（背景・枠線・文字・角丸・hoverは共通）、
   位置だけ行コンテナ側で制御する。Compact では flex-wrap で折り返す。 */
.mz-toggle-row{position:absolute;top:8px;left:8px;z-index:6;
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;max-width:calc(100% - 16px);}
.mz-toggle-row .plot-toggle{position:static;top:auto;left:auto;}
.plot-toggle:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;}
.plot-toggle:active:not(:disabled){background:rgba(15,17,21,1);}
.plot-toggle:disabled{opacity:.45;cursor:not-allowed;}
.plot-toggle:disabled:hover{background:rgba(15,17,21,.78);}
.car-slide .pins{position:absolute;inset:0;}
.car-slide.pins-off .pins, .car-slide.pins-off .plot-detail-overlay{display:none;}  /* プロット非表示（固定チェックポイント・手動プロット両対応） */
.car-counter{position:absolute;top:8px;right:8px;z-index:6;background:rgba(15,17,21,.7);
  border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:10.5px;color:var(--text-sub);}
@media(hover:none){ .car-nav{opacity:.85;} }   /* タッチ端末は矢印を薄く常時表示 */

/* ブラックタイプ等のPDF/画像モーダル */
.bt-modal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:300;display:none;
  align-items:center;justify-content:center;padding:12px;}
.bt-modal.open{display:flex;}
.bt-modal .sheet{position:relative;background:#fff;border-radius:10px;max-width:1280px;width:96vw;
  max-height:94vh;overflow:auto;box-shadow:var(--shadow);}
.bt-modal .sheet.pdf{width:96vw;height:94vh;max-height:94vh;}        /* PDFは大きく表示 */
.bt-modal .sheet img{width:100%;display:block;}                       /* 画像は幅いっぱい */
.bt-modal .sheet iframe{width:100%;height:92vh;border:0;display:block;background:#fff;}
.bt-modal .bt-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
  background:#1a1a1a;color:#fff;border:none;font-size:18px;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;}
.bt-modal .bt-empty{background:var(--panel);color:var(--text);padding:40px;border-radius:10px;
  border:1px solid var(--line);text-align:center;max-width:420px;}
.btn-bt{border:1px solid var(--gold);background:rgba(201,166,74,.12);color:var(--gold-soft);
  padding:6px 12px;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;}
.btn-bt:hover{background:rgba(201,166,74,.22);}

/* メディア編集（管理画面） */
.media-block{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px;}
.media-block .m-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;}
.m-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
/* v0.3.20 ② Phase1(§11-3): 添付画像プレビューは画像サイズ準拠・最大2048×2048 */
.admin-media-preview img{max-width:2048px;max-height:2048px;width:auto;height:auto;object-fit:contain;}
.m-thumb{position:relative;width:84px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#000;}
.m-thumb img,.m-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
.m-thumb .m-del,.bt-thumb .m-del{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;
  border:none;background:rgba(0,0,0,.7);color:#fff;font-size:13px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.m-thumb .m-ord{position:absolute;bottom:2px;left:2px;background:rgba(0,0,0,.6);color:#fff;
  font-size:9px;padding:0 4px;border-radius:4px;}
.m-thumb .mtag{position:absolute;bottom:2px;right:2px;background:rgba(59,91,140,.85);color:#fff;
  font-size:9px;padding:1px 5px;border-radius:4px;}
.m-thumb .mtag.rep{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#1a1a1a;}
.bt-thumb{position:relative;display:inline-block;max-width:240px;margin-bottom:10px;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;}
.bt-thumb:hover{border-color:var(--gold);}
.bt-thumb img{width:100%;display:block;}
.bt-thumb .bt-file{padding:18px 22px;color:var(--text-sub);font-size:13px;}
.m-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.m-controls input[type=text]{flex:1;min-width:160px;background:var(--panel);border:1px solid var(--line);
  color:var(--text);padding:7px 9px;border-radius:8px;font-size:13px;outline:none;}
.m-controls input[type=text]:focus{border-color:var(--gold);}
.m-attach{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--gold);
  background:rgba(201,166,74,.12);color:var(--gold-soft);padding:7px 12px;border-radius:8px;
  font-size:12.5px;font-weight:700;cursor:pointer;}
.m-attach:hover{background:rgba(201,166,74,.22);}

/* ADMIN-EDIT-MEDIA-PEDIGREE-UI-01: メディア拡大ボタン(#4) / 動画URL複数行(#2) / 血統系統管理(#9) */
/* ADMIN-MEDIA-THUMBNAIL-PREVIEW-A41: 保存済みメディアの小さなプレビュー（馬体写真と同じ枠を使う）。
   押すと大きく表示する。PDFは1ページ目を出すが、枠の中では操作させない。 */
.m-thumb.m-preview{cursor:pointer;background:var(--panel-2);}
.m-thumb.m-preview:hover,.m-thumb.m-preview:focus-visible{border-color:var(--gold);outline:none;}
.m-thumb .m-pdf-preview{width:100%;height:100%;border:0;background:#fff;pointer-events:none;display:block;}
.m-thumb .m-link-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--text-mute);}
.m-preview-strip{margin-bottom:10px;}
.m-thumb .m-zoom{position:absolute;top:2px;left:2px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:4px;font-size:11px;line-height:1;padding:3px 4px;cursor:pointer;z-index:2;}
.m-thumb .m-zoom:hover{background:rgba(201,166,74,.9);color:#1a1a1a;}
.video-url-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
.video-url-row input{flex:1;}
.bloodline-type-list{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto;}
.bloodline-type-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;border:1px solid #2a2a2a;border-radius:6px;font-size:13px;}
/* ADMIN-EDIT-BODY-MARKET-NOTE-UI-01 #3: カテゴリ + 追加ボタン（Compactで折り返し、ボタンがはみ出さない） */
.note-category-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
/* NOTES-UI-SEARCH-SORT-01 #1: 対象馬（複数）選択行・チップ */
.note-horse-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.note-horse-row select{flex:1;min-width:120px;}
.note-horse-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.note-horse-chip{display:inline-flex;align-items:center;gap:4px;background:#2a2a2a;color:#fff;border-radius:12px;padding:3px 8px;font-size:12px;}
.note-horse-chip-del{border:none;background:transparent;color:#fbb1a3;cursor:pointer;font-size:13px;line-height:1;padding:0;}
/* NOTE-HORSE-AUTOCOMPLETE-UI-01: 馬名 検索候補式オートコンプリート（候補は position:absolute でレイアウトを押さない・画面外にはみ出さない） */
.horse-ac{position:relative;}
.horse-ac-input{width:100%;padding:6px 10px;background:#0e0e0e;color:#fff;border:1px solid #2a2a2a;border-radius:6px;font-size:13px;font-family:inherit;}
.horse-ac-input:focus{border-color:var(--gold);outline:none;}
.horse-ac-list{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:40;max-height:min(240px,50vh);overflow-y:auto;background:#161616;border:1px solid #2a2a2a;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);}
.horse-ac-item{padding:7px 10px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.horse-ac-item:hover,.horse-ac-item.active{background:#242424;}
.horse-ac-sub{color:var(--text-mute);font-size:11px;flex:0 0 auto;}
.horse-ac-empty{padding:8px 10px;color:var(--text-mute);font-size:12px;}

/* スコアバー */
.score-cat{margin-bottom:14px;}
.score-cat .cat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.score-cat .cat-head .nm{font-size:12.5px;color:var(--text-sub);}
.score-cat .cat-head .avg{font-weight:700;color:var(--gold-soft);}
.bar{height:8px;background:var(--panel-2);border-radius:6px;overflow:hidden;border:1px solid var(--line);}
.bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--navy),var(--gold));border-radius:6px;}
.subscores{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:4px 14px;
  margin-top:8px;font-size:11.5px;}
.subscores .row{display:flex;justify-content:space-between;color:var(--text-sub);}
.subscores .row b{color:var(--text);}

.template-card{border:1px solid rgba(201,166,74,.4);background:rgba(201,166,74,.05);}
.simil-big{font-size:30px;font-weight:800;color:var(--gold-soft);}
.memo{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:12.5px;color:var(--text-sub);margin-top:8px;}
.memo b{color:var(--text);}

/* ---------- Plot Map ---------- */
.plot-wrap{position:relative;}
.plot{position:relative;height:480px;background:
  linear-gradient(180deg,var(--panel),#12151b);
  border:1px solid var(--line);border-radius:var(--radius);margin:14px 0;overflow:hidden;}
.plot .axis-x{position:absolute;bottom:8px;left:0;right:0;text-align:center;color:var(--text-mute);font-size:11px;}
.plot .axis-y{position:absolute;top:50%;left:8px;transform:rotate(-90deg);transform-origin:left;
  color:var(--text-mute);font-size:11px;}
.plot .quad-label{position:absolute;font-size:11px;color:var(--text-mute);padding:6px 10px;
  background:rgba(15,17,21,.5);border:1px dashed var(--line);border-radius:8px;max-width:170px;}
.plot .grid-line{position:absolute;background:var(--line);}
.dot-pt{position:absolute;transform:translate(-50%,50%);border-radius:50%;cursor:pointer;
  border:2px solid rgba(0,0,0,.4);transition:.12s;}
.dot-pt:hover{transform:translate(-50%,50%) scale(1.3);z-index:5;}
.plot-tip{position:fixed;background:rgba(15,17,21,.97);border:1px solid var(--gold);border-radius:8px;
  padding:8px 10px;font-size:12px;pointer-events:none;z-index:100;display:none;box-shadow:var(--shadow);}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--text-sub);}
.legend .li{display:flex;align-items:center;gap:5px;}
.legend .sw{width:12px;height:12px;border-radius:50%;}

/* ---------- 比較 ---------- */
/* HORSE-LIST-CARD-UI-01 #1/#5: 比較欄の馬画像も正方形(1:1)・全体表示。position:relative で BCS｜SCORE オーバーレイを配置 */

/* ---------- Admin ---------- */
.admin-layout{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start;}
/* ADMIN-HORSE-LIST-SCROLL-A28: 登録頭数が増えても左カラムが下へ伸び続けないよう、
   馬カードの並びだけに高さの上限を設けて中でスクロールさせる。
   上限は画面の高さから決めるので、画面が広ければそのぶん多く見える。
   スクロールバーはサイドバーと同じ見た目にそろえる。 */
.admin-list .admin-list-rows{
  max-height:calc(100vh - 230px);
  max-height:calc(100dvh - 230px);
  min-height:180px;
  overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;   /* つまみと馬名が重ならない分だけ空ける */
  scrollbar-width:thin;scrollbar-color:#2c2c2c transparent}
.admin-list .admin-list-rows::-webkit-scrollbar{width:8px}
.admin-list .admin-list-rows::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.admin-list .admin-list-rows::-webkit-scrollbar-track{background:transparent}
.admin-list .a-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  cursor:pointer;border:1px solid transparent;}
.admin-list .a-row:hover{background:var(--panel-2);}
.admin-list .a-row.active{background:var(--panel-2);border-color:var(--gold);}
.admin-list .a-row .nm{font-size:13px;font-weight:600;}
.admin-list .a-row .mt{font-size:11px;color:var(--text-mute);}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.field{display:flex;flex-direction:column;gap:3px;}
.field label{font-size:11px;color:var(--text-sub);}
/* PLOT-MANAGEMENT-FILE-BUTTON-UI-A32: 「📎 ファイル添付」は項目名ではなくボタン。
   .field の中に置いても、登録/編集と同じ見た目のままにする。 */
.field label.m-attach{font-size:12.5px;color:var(--gold-soft);}
.field input,.field select,.field textarea{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:7px 9px;border-radius:8px;font-size:13px;outline:none;font-family:inherit;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold);}
.field textarea{min-height:54px;resize:vertical;}
.form-sec{margin-top:18px;}
.form-sec > h4{font-size:12.5px;color:var(--gold-soft);letter-spacing:.05em;margin:0 0 10px;
  border-bottom:1px solid var(--line);padding-bottom:6px;}
/* HS-ADMIN-EDIT-01 §11: 登録/編集の主要セクション見出しを共通サイズ・太字へ統一（本文より一回り大きい程度）。
   .form-sec > h4 の詳細度(0,0,1,1)に勝つよう h4.admin-section-title(0,0,2,1)で指定 */
.form-sec > h4.admin-section-title{font-size:15px;font-weight:800;line-height:1.4;}
.form-sec > h4.admin-section-title--score{color:var(--gold);}
/* HS-ADMIN-EDIT-01 §7: 複数備考 */
.admin-remarks{grid-column:1/-1;margin-top:12px;}
.admin-remarks-label{font-size:11px;color:var(--text-sub);font-weight:700;margin-bottom:6px;}
.admin-remark-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px;}
.admin-remark-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.admin-remark-col > .rank-meta{font-size:10px;}
.admin-remark-input{width:100%;min-height:48px;resize:vertical;padding:6px 8px;background:#0e0e0e;color:var(--text);border:1px solid #2a2a2a;border-radius:6px;font-family:inherit;font-size:13px;}
.admin-remark-input:focus{border-color:var(--gold);}
.admin-remark-del{flex:0 0 auto;align-self:flex-start;margin-top:16px;}
/* HS-ADMIN-EDIT-01 §12: URL検証エラー表示 */
.field-invalid > input,.field-invalid > textarea,input.field-invalid,textarea.field-invalid,[aria-invalid="true"]{border-color:var(--risk);}
.field-error-msg{color:var(--risk);font-size:11px;margin-top:3px;line-height:1.5;white-space:pre-line;}
/* HS-ADMIN-EDIT-01 §5: 登録/編集の左一覧に所属リストのバッジを見える化 */
.a-list-badges{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:4px;}
.a-list-badges > .rank-meta{font-size:10px;}
.list-badge{background:#1a2a3a;color:#9ec8ff;font-size:10px;padding:2px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.list-badge--unclassified{background:#2a2a2a;color:var(--text-mute);}
/* v0.3.20 ②: 登録・編集フォームの入力UX（セクション補助文・必須/推奨/任意バッジ） */
.form-sec-hint{font-size:11px;color:var(--text-mute);line-height:1.6;margin:0 0 10px;}
.mini-badge{display:inline-block;font-size:9px;font-weight:700;padding:1px 5px;border-radius:6px;margin-left:4px;
  vertical-align:middle;letter-spacing:.02em;}
.mini-badge.req{background:rgba(181,107,107,.18);color:#e0a0a0;border:1px solid rgba(181,107,107,.5);}
.mini-badge.rec{background:rgba(201,166,74,.16);color:var(--gold-soft);border:1px solid rgba(201,166,74,.4);}
.mini-badge.opt{background:rgba(120,120,120,.16);color:#9aa3af;border:1px solid rgba(120,120,120,.4);}
/* ② 生年月日 複合UI（8桁入力＋📅カレンダーボタン。ネイティブ日付ピッカーは画面非表示） */
.birthdate-combo{display:flex;align-items:center;gap:6px;position:relative;flex-wrap:wrap;}
.birthdate-combo .birthdate-input{flex:1;min-width:120px;}
.birthdate-combo .birthdate-picker-btn{flex:0 0 auto;white-space:nowrap;padding:6px 10px;}
.birthdate-combo .birthdate-native-picker{position:absolute;left:0;bottom:0;opacity:0;width:1px;height:1px;pointer-events:none;border:0;padding:0;margin:0;}
.score-input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;}
.score-input{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;}
.score-input label{font-size:12px;color:var(--text-sub);}
.score-input select{background:transparent;border:none;color:var(--gold-soft);font-weight:700;font-size:14px;}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}

/* ---------- ホースデータ詳細（HORSE-DATA-DETAIL-UI-A27） ----------
   既存のカード・余白・配色（--panel / --line / --gold-soft）をそのまま使う。
   情報量が多いので、見出しと区切りで「どこを見ているか」が分かる構造にする。 */
.hd-root{display:flex;flex-direction:column;gap:14px;min-width:0;}
.hd-header{
  display:grid;grid-template-columns:minmax(200px,1.4fr) 1.2fr 1fr auto;gap:12px 18px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0;
}
.hd-name{font-size:19px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;}
.hd-head-name{display:flex;flex-direction:column;gap:6px;min-width:0;}
.hd-head-group{display:flex;flex-direction:column;gap:6px;min-width:0;}
/* HORSE-DATA-HEADER-TAGS-A33: 性別｜生年月日 / 毛色｜出生月 の2列2行 */
.hd-head-group.hd-head-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;}
.hd-head-tags{display:flex;flex-wrap:wrap;gap:0;width:100%;margin-top:4px;}
.hd-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;}
.hd-field{display:flex;flex-direction:column;gap:2px;min-width:0;}
.hd-k{font-size:11px;color:var(--text-sub);}
.hd-v{font-size:13px;overflow-wrap:anywhere;}
/* HORSE-DATA-HORSE-NAME-HEADER-A47: 馬名と正式馬名の値は同じ大きさ・同じ太さで出す。
   長い名前は自動で縮めず、そのまま折り返す（2つで大きさがずれないようにするため）。
   未登録の「—」も同じ見た目にそろえる。 */
.hd-v.hd-name-value{font-size:19px;font-weight:800;line-height:1.3;}
.hd-field.is-empty .hd-v{color:var(--text-mute);}
.hd-v a{color:var(--gold-soft);}
.hd-sib{display:inline-block;margin-right:8px;}
.hd-sec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0;}
.hd-sec-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.hd-sec-head h3{margin:0;font-size:13px;font-weight:800;color:var(--gold-soft);letter-spacing:.04em;}
.hd-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;min-width:0;}
.hd-two-col > .hd-col{min-width:0;}
.hd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 14px;}
.hd-subgroup{margin-bottom:12px;}
.hd-subgroup-title{font-size:11px;font-weight:700;color:var(--text-sub);margin-bottom:6px;}
.hd-empty,.hd-media-empty{color:var(--text-mute);font-size:13px;text-align:center;padding:18px 8px;}
/* 写真 */
/* HORSE-DATA-PLOT-VIEW-PARITY-B42: 馬体プロット作成（.plot-editor-canvas）と同じく、
   写真ステージを正方形にして共通PlotSpace（2000×2000）と1対1で対応させる。
   これで「同じ保存座標＝同じ画面上の相対位置」が登録画面とHorse Dataで一致する。
   写真は正方形の中に aspect 維持で収める（object-fit:contain）。
   一辺の上限は、正方形化で写真欄が縦に伸びて隣の欄との段差が広がらない値にしている。 */
/* HORSE-DATA-PHOTO-DOCS-UI-A54: 座標の決め方（正方形ステージ＝共通PlotSpace）はそのままで、
   表示だけを枠いっぱいへ広げる。写真欄の余白も詰め、写真URLの文字リンク分も写真へ回す。 */
.hd-photo-stage{position:relative;display:block;line-height:0;border-radius:10px;overflow:hidden;background:var(--panel-2);aspect-ratio:1/1;width:100%;margin-inline:auto;}
.hd-photo{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center center;}
.hd-photo-stage svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.hd-sec[data-hd-section="photo"]{padding:8px;}
.hd-sec[data-hd-section="photo"] .hd-sec-head{margin-bottom:6px;padding:0 2px;}
.hd-media-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
/* サムネイルは動画と同じく折り返さず、多いときは横へスクロールする（大きさは従来どおり） */
.hd-thumbs{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;margin-top:8px;padding-bottom:4px;
  scrollbar-width:thin;scrollbar-color:#2c2c2c transparent;}
.hd-thumbs::-webkit-scrollbar{height:8px}
.hd-thumbs::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.hd-thumbs::-webkit-scrollbar-track{background:transparent}
.hd-thumb{flex:0 0 auto;width:56px;height:44px;padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel-2);cursor:pointer;}
.hd-thumb.on{border-color:var(--gold);}
.hd-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
/* 動画・資料 */
.hd-video-list,.hd-doc-row{display:flex;flex-direction:column;gap:8px;}
.hd-video-row,.hd-doc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--panel-2);margin-bottom:8px;}
/* HORSE-DATA-DOCUMENT-SIZE-MATCH-A36: 資料の枠は血統情報②と同じ大きさにする。
   実際の高さは --hd-doc-h に入る（血統情報②を同じ幅で組んで測った値）。
   測れないときだけ、A34 の画面基準の高さを使う。
   125%へ拡大しても枠は大きくせず、足りない分は枠の中でスクロールする。 */
.hd-doc-frame{width:100%;height:var(--hd-doc-h,clamp(280px,78vh,1200px));
  border:1px solid var(--line);border-radius:8px;background:#fff;}
.hd-doc-viewer{margin-bottom:10px;}
/* HORSE-DATA-MEDIA-DYNAMIC-UI-A30: 動画をその場で再生し、資料は上のボタンで見るものを切り替える */
.hd-media-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.hd-media-tabs .btn.on{background:var(--gold);color:#1a1a1a;border-color:var(--gold);}
/* HORSE-DATA-VIDEO-SWITCHER-A37 / HORSE-DATA-VIDEO-THUMBNAIL-STRIP-A38:
   大きなplayerの下に小さな動画カードを横一列。本数が多いときは横へスクロールする。
   折り返して縦に伸ばさない／カードは潰れないよう縮めない。
   幅の中でおよそ3枚見える大きさにし、4枚目からは右へ続く。 */
.hd-video-strip{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  margin-top:10px;padding-bottom:6px;
  scrollbar-width:thin;scrollbar-color:#2c2c2c transparent;}
.hd-video-strip::-webkit-scrollbar{height:8px}
.hd-video-strip::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.hd-video-strip::-webkit-scrollbar-track{background:transparent}
.hd-video-card{flex:0 0 calc((100% - 16px) / 3);min-width:96px;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;background:var(--panel-2);overflow:hidden;
  display:flex;flex-direction:column;gap:0;text-align:left;}
.hd-video-card:hover{border-color:var(--text-mute);}
.hd-video-card.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;}
.hd-video-card-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;}
.hd-video-card-img{width:100%;height:100%;object-fit:cover;display:block;}
.hd-video-card-blank{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--text-mute);}
.hd-video-card-play{position:absolute;right:6px;bottom:6px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:10px;line-height:20px;text-align:center;}
.hd-video-card-label{display:block;padding:5px 8px;font-size:11px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hd-video-card.on .hd-video-card-label{color:var(--gold-soft);}
.hd-video-stage{border-radius:10px;overflow:hidden;background:var(--panel-2);}
.hd-video{display:block;width:100%;height:auto;max-height:420px;background:#000;}
.hd-video-frame{position:relative;width:100%;padding-top:56.25%;}
.hd-video-frame iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;}
/* IOS-YOUTUBE-PLAYER-REFERER-B45: iPhone/iPad版でYouTubeを開くボタン。
   ローカル起点の埋め込みはYouTube側で再生できないため、押すとNativeの再生画面を出す。 */
.hd-video-native{position:relative;width:100%;padding-top:56.25%;background:#000;}
.hd-video-native-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block;}
.hd-video-native-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;}
.hd-video-native-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;line-height:64px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:26px;text-align:center;}
.hd-video-native-label{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;color:#fff;font-size:12px;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.72));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hd-video-link{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;}
/* 画像資料もPDFと同じ大きさの枠で見る（縦横比はこれまでどおり contain のまま） */
.hd-doc-image{display:block;width:100%;height:var(--hd-doc-h,auto);max-height:var(--hd-doc-h,clamp(280px,78vh,1200px));
  object-fit:contain;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);}
.hd-doc-links{margin-top:6px;}
.hd-doc-links a{color:var(--gold-soft);}
/* HORSE-DATA-PHOTO-DOCS-UI-A54: PDF枠の直下に置く「血統評価AI」の空枠。
   PDF枠の下に余りを残さないよう、資料セクションの残りをこの枠が受け持つ。
   いまは枠だけで、中身（AIの出力）は入れない。 */
.hd-doc-panel{display:flex;flex-direction:column;gap:0;}
.hd-doc-panel[hidden]{display:none;}   /* 切替で隠した側は出さない（display指定が hidden を打ち消さないように） */
.hd-doc-panel > .hd-doc-frame,.hd-doc-panel > .hd-doc-image{display:block;margin-bottom:0;}
.hd-ai-frame{display:flex;flex-direction:column;overflow:hidden;margin-top:10px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel-2);
  height:var(--hd-ai-h,120px);min-height:120px;}
.hd-ai-frame-title{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--gold-soft);letter-spacing:.04em;
  padding:7px 10px;border-bottom:1px solid var(--line);}
.hd-ai-frame-body{flex:1 1 auto;min-height:0;}
.hd-ped-gen{margin-bottom:12px;}
.hd-ped-gen-title{font-size:11px;font-weight:700;color:var(--text-sub);margin-bottom:6px;}
/* 競走成績: 広い画面は表・狭い画面はレースごとのカード */
.hd-race-scroll{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);}
.hd-race-table{border-collapse:collapse;width:max-content;min-width:100%;font-size:12px;}
.hd-race-table th,.hd-race-table td{border:1px solid var(--line);padding:5px 8px;white-space:nowrap;}
.hd-race-table thead th{background:var(--panel);color:var(--text-sub);font-weight:700;position:sticky;top:0;}
.hd-race-cards{display:none;flex-direction:column;gap:10px;}
.hd-race-card{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--panel-2);}
.hd-race-card-head{font-weight:700;font-size:13px;margin-bottom:8px;}
/* 評価スコア */
.hd-score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;}
.hd-score-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel-2);min-width:0;}
@media (max-width:900px){
  .hd-header{grid-template-columns:1fr 1fr;}
  .hd-head-actions{grid-column:1/-1;}
  .hd-two-col{grid-template-columns:1fr;}
  .hd-race-scroll{display:none;}
  .hd-race-cards{display:flex;}
}
@media (max-width:520px){
  .hd-header{grid-template-columns:1fr;}
  .hd-grid{grid-template-columns:1fr;}
}

/* ---------- OpenAI APIキー設定（IOS-AI-KEYCHAIN-SETTINGS-UI-A23） ----------
   既存の設定画面（.field / .import-form）と同じ部品・余白を使う。 */
#ios-ai-key-section{min-width:0;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.settings-ai-key-title{font-weight:800;font-size:13px;margin-bottom:8px;}
.settings-ai-key .field{max-width:520px;}
.ios-key-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
#ios-ai-key-state{background:#2a2a2a;color:var(--text-mute);}
#ios-ai-key-state.ios-key-on{background:#1a2a3a;color:#9ec8ff;}
#ios-ai-key-input{
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:7px 9px;border-radius:8px;font-size:13px;outline:none;font-family:inherit;
}
#ios-ai-key-input:focus{border-color:var(--gold);}
.ios-key-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.settings-build-info{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);min-width:0;}
.settings-build-info .rank-meta > div{overflow-wrap:anywhere;}

/* ---------- 自動入力（Web調査）プレビュー（HORSE-WEB-AUTOFILL-UI-A21） ----------
   既存の管理フォーム・AIモーダルと同じ色・角丸・余白を使う。横幅は親を超えない。 */
.hwa-sheet{max-width:min(1040px,96vw);}
.hwa-summary{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;}
.hwa-summary-title{font-size:12px;font-weight:800;color:var(--gold-soft);margin-bottom:6px;}
.hwa-summary-grid{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;margin-bottom:6px;}
.hwa-sec{margin-bottom:14px;min-width:0;}
.hwa-sec-title{font-size:12px;color:var(--gold-soft);font-weight:700;margin:0 0 6px;}
.hwa-rows{display:flex;flex-direction:column;gap:6px;}
.hwa-row{
  display:grid;grid-template-columns:28px 132px 1fr 1fr 88px 1fr;align-items:center;gap:8px;min-width:0;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12.5px;
}
.hwa-row > div{min-width:0;overflow-wrap:anywhere;}
.hwa-name{color:var(--text-sub);font-weight:700;}
.hwa-cap{display:block;font-size:10px;color:var(--text-sub);}
.hwa-val{color:var(--gold-soft);font-weight:700;}
.hwa-state{font-size:11px;color:var(--text-sub);text-align:center;}
.hwa-row.hwa-apply-conflict{border-color:rgba(192,138,90,.55);}
.hwa-row.hwa-apply-conflict .hwa-state{color:var(--warn);}
.hwa-row.hwa-apply-already_present,.hwa-row.hwa-apply-not_found,
.hwa-row.hwa-apply-unsupported,.hwa-row.hwa-apply-unavailable{opacity:.78;}
.hwa-src{font-size:11px;color:var(--gold-soft);}
.hwa-nopick{display:inline-block;width:13px;}
.hwa-race{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px;background:var(--panel);}
.hwa-race-head{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:6px;flex-wrap:wrap;}
.hwa-rows-readonly .hwa-pick{visibility:hidden;}
.hwa-identity{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px;}
.hwa-reasons{margin:6px 0 0;padding-left:18px;font-size:12px;color:var(--text-sub);}
.hwa-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
@media (max-width:860px){
  .hwa-row{grid-template-columns:28px 1fr;grid-auto-rows:min-content;}
  .hwa-row .hwa-state{text-align:left;}
}

/* ---------- BCS 馬体写真AI評価（BCS-AI-PHOTO-EVALUATION-UI-A19） ----------
   既存の管理フォーム（.form-sec / .field）と同じ色・角丸・余白を使う。新しい配色は作らない。 */
.bcs-ai-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.bcs-ai-parts{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.bcs-ai-part{
  display:grid;grid-template-columns:64px 72px 1fr;align-items:center;gap:8px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px;
}
.bcs-ai-part-label{color:var(--text-sub);font-size:11px;font-weight:700;}
.bcs-ai-part-value{color:var(--gold-soft);font-weight:800;}
.bcs-ai-part.is-skipped .bcs-ai-part-value{color:var(--text-sub);font-weight:700;}
.bcs-ai-remark{
  width:100%;min-height:120px;margin-top:6px;box-sizing:border-box;resize:vertical;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:8px 10px;border-radius:8px;font-size:12.5px;font-family:inherit;line-height:1.6;
}
.bcs-ai-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
@media (max-width:520px){
  .bcs-ai-part{grid-template-columns:56px 64px;grid-auto-rows:min-content;}
  .bcs-ai-part .rank-meta{grid-column:1/-1;}
}

/* ---------- 血統情報① 兄弟姉妹（PEDIGREE-SIBLINGS-UI-A14） ----------
   兄・弟・姉・妹の4枠。広い画面は4列、狭くなるほど2列→1列へ落ちる（横スクロールはしない）。
   色・角丸・余白は既存フォーム（.field / .form-sec）の値をそのまま使い、新しい配色は作らない。 */
#pedigreeSiblingsSection{margin-top:14px;min-width:0;}
.ped-sib-heading{
  font-size:12px;color:var(--gold-soft);font-weight:700;letter-spacing:.04em;
  margin:0 0 8px;
}
.ped-sib-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.ped-sib-card{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;
}
.ped-sib-title{font-size:11px;color:var(--text-sub);font-weight:700;}
.ped-sib-list{display:flex;flex-direction:column;gap:6px;}
.ped-sib-list:empty{display:none;}
.ped-sib-input{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:7px 9px;border-radius:8px;font-size:13px;outline:none;font-family:inherit;
  width:100%;min-width:0;box-sizing:border-box;
}
.ped-sib-input:focus{border-color:var(--gold);}
.ped-sib-add{align-self:flex-start;margin-top:auto;}
/* 最小幅を下げて、狭い画面でも 2×2 を保つ（さらに狭ければ auto-fit が1列へ落とす） */
@media (max-width:760px){
  .ped-sib-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}

/* ---------- 競走成績 入力表（RACE-RESULTS-CSS-01） ----------
   31列の横長入力表。#raceResultsTableScroll「だけ」を横スクロール領域にし、ページ全体は
   横へ広げない（.app-main は min-width:0 済みのため overflow-x:auto の子で内部スクロール化）。
   すべて #raceResultsSection 配下へスコープし、既存の表・フォームには影響させない。
   sticky列・固定ヘッダー等の未指定機能は追加しない。[hidden] は display で上書きしない。 */
/* 親（編集フォームの 1fr グリッド項目）の min-width:auto を解除する（§3 の「親要素へ設定」）。
   これが無いと内部の広い表が #admin-form-wrap を押し広げ、max-width:100% の基準ごと広がって
   ページ全体が横スクロールする。min-width:0 は縮小許可のみで既存フォームの見た目は変えない。 */
#admin-form-wrap{min-width:0;}
#raceResultsSection{max-width:100%;min-width:0;}
#raceResultsSection > #addRaceResultRowBtn{margin-bottom:10px;}
#raceResultsError{margin-bottom:8px;}
/* 横スクロールはこの領域だけで発生（max-width:100% で親幅を超えない＝ページ本体の横スクロール防止） */
#raceResultsTableScroll{
  max-width:100%;overflow-x:auto;overflow-y:hidden;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
}
/* 罫線付き・高密度の入力表。列幅は input の min-width で制御（colgroup 非依存・DOM 不変）。
   width:max-content で内容の自然幅に広げ、min-width:100% で行が少なくても全幅の罫線を保つ。 */
#raceResultsTable{border-collapse:collapse;width:max-content;min-width:100%;font-size:12px;color:var(--text);}
#raceResultsTable th,#raceResultsTable td{border:1px solid var(--line);vertical-align:middle;}
/* 見出し：中央揃え・折返し可（長い見出しは 2 行に折り返して列幅を抑える） */
#raceResultsTable thead th{
  padding:6px 6px;text-align:center;white-space:normal;overflow-wrap:anywhere;line-height:1.35;
  font-size:11px;font-weight:700;color:var(--gold-soft);background:var(--panel-2);
}
#raceResultsTable tbody td{padding:3px 4px;}
#raceResultsTable tbody td:last-child{text-align:center;white-space:nowrap;padding:3px 6px;}
/* セル内 input：横書きの入力値を維持・セルに収まる・box-sizing・focus 表示（.field input のトーン踏襲） */
#raceResultsTable td input[data-race-result-field]{
  width:100%;min-width:56px;box-sizing:border-box;min-height:32px;padding:5px 7px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:6px;color:var(--text);
  font-size:12.5px;font-family:inherit;outline:none;white-space:nowrap;
}
#raceResultsTable td input[data-race-result-field]:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,166,74,.25);}
/* 列幅：短い列は既定(min-width:56px)。長文・可変長の列だけ広げる
   （§5 指定の広列＝レース名 / 騎手 / 通過 / 厩舎コメント / 備考 / 勝ち馬（2着馬）、および日付等の実データ幅に合わせた微調整） */
#raceResultsTable td input[data-race-result-field="date"]{min-width:96px;}
#raceResultsTable td input[data-race-result-field="venue"]{min-width:76px;}
#raceResultsTable td input[data-race-result-field="raceName"]{min-width:190px;}
#raceResultsTable td input[data-race-result-field="videoUrl"]{min-width:96px;}
#raceResultsTable td input[data-race-result-field="odds"]{min-width:64px;}
#raceResultsTable td input[data-race-result-field="jockey"]{min-width:104px;}
#raceResultsTable td input[data-race-result-field="time"]{min-width:74px;}
#raceResultsTable td input[data-race-result-field="timeIndexM"]{min-width:76px;}
#raceResultsTable td input[data-race-result-field="startIndex"]{min-width:76px;}
#raceResultsTable td input[data-race-result-field="trackingIndex"]{min-width:76px;}
#raceResultsTable td input[data-race-result-field="closingIndex"]{min-width:76px;}
#raceResultsTable td input[data-race-result-field="passingOrder"]{min-width:116px;}
#raceResultsTable td input[data-race-result-field="pace"]{min-width:72px;}
#raceResultsTable td input[data-race-result-field="horseWeight"]{min-width:82px;}
#raceResultsTable td input[data-race-result-field="trainerComment"]{min-width:220px;}
#raceResultsTable td input[data-race-result-field="remarks"]{min-width:190px;}
#raceResultsTable td input[data-race-result-field="winnerOrRunnerUp"]{min-width:150px;}
#raceResultsTable td input[data-race-result-field="prizeMoney"]{min-width:84px;}
/* Compact（0〜599px）：横スクロールは維持したまま、入力と削除操作のタップ領域を確保する */
@media(max-width:599px){
  #raceResultsTable td input[data-race-result-field]{min-height:40px;font-size:13px;}
  #raceResultsTable [data-race-result-action="delete"]{min-height:44px;padding:8px 12px;}
}

/* ---------- 免責 ---------- */
/* v0.3.16 HTML取込モードタブ + 公開/非公開リストのフォルダ風表示 */
.html-import-mode-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.import-folder-list{ display:flex; flex-direction:column; gap:12px; }
.import-folder-card, .year-folder{ background:#1a1a1a; border:1px solid #2a2a2a; border-radius:12px; padding:14px; }
.folder-title{ font-weight:800; color:var(--gold-soft,#d4b85a); margin-bottom:8px; font-size:15px; }
.folder-line{ font-size:13px; color:var(--text,#eee); line-height:1.8; white-space:pre-wrap; font-family:monospace; }
.folder-link-row{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 8px 18px; }
.folder-link-row .btn{ text-decoration:none; }
.folder-block{ padding:8px 0; border-bottom:1px dashed #2a2a2a; }
.folder-block:last-child{ border-bottom:none; }

/* v0.3.13 ログ・インポート統合 */
.log-tabs, .import-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.log-table{ width:100%; border-collapse:collapse; font-size:12px; }
.log-table th, .log-table td{ padding:7px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }

/* v0.3.12 インフォメーション再構成用 */
.info-shortcut-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:14px; }
.info-shortcut{ text-align:left; cursor:pointer; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:14px; color:inherit; font-size:14px; }
.info-shortcut:hover{ border-color:var(--gold-soft); }
.info-shortcut .ic{ font-size:18px; margin-right:6px; }
.info-shortcut .desc{ display:block; font-size:11px; color:var(--text-sub); margin-top:4px; }
.info-kv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.info-kv-card{ background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.info-kv-card .k{ color:var(--text-sub); font-size:11px; }
.info-kv-card .v{ font-weight:700; margin-top:2px; word-break:break-all; }
.info-kv-clickable:hover{ background:#1f1f1f; border-color:#d4b85a !important; }
.info-kv-clickable:focus{ outline:2px solid #d4b85a; outline-offset:2px; }
.info-edit-link{ margin-top:14px; text-align:right; }

.disclaimer{font-size:11px;color:var(--text-mute);line-height:1.7;border-top:1px solid var(--line);
  margin-top:30px;padding-top:16px;}
.disclaimer b{color:var(--text-sub);}

.empty{color:var(--text-mute);text-align:center;padding:40px;font-size:13px;}
.view{display:none;}
.view.active{display:block;}
.flex{display:flex;}
.between{justify-content:space-between;}
.center{align-items:center;}
.gap{gap:10px;}
.wrap-gap{flex-wrap:wrap;}

/* ---------- レスポンシブ ---------- */
@media(max-width:880px){
  .detail-layout{grid-template-columns:1fr;}
  .admin-layout{grid-template-columns:1fr;}
  /* A34/A36: 縦1列の幅でも血統情報②と同じ高さにそろえる。
     測れないときだけ、画面基準の高さへ戻す。 */
  .hd-doc-frame{height:var(--hd-doc-h,clamp(260px,70vh,760px));}
  .hd-doc-image{max-height:var(--hd-doc-h,clamp(260px,70vh,760px));}
  /* ADMIN-HORSE-LIST-SCROLL-A28: 縦1列になる幅では一覧が下のフォームを押し下げるので、
     画面の半分ほどに抑える（それでも中で全頭たどれる）。 */
  .admin-list .admin-list-rows{max-height:min(50vh,340px);max-height:min(50dvh,340px);min-height:0;}
}
@media(max-width:560px){
  .brand .by{margin-left:0;width:100%;}
  nav.tabs{overflow-x:auto;}
  .plot{height:380px;}
  .plot .quad-label{max-width:120px;font-size:10px;padding:4px 6px;}
}

/* 血統詳細の長文馬名対応 */
.pedigree-name{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.pedigree-name:hover{white-space:normal;overflow:visible;position:relative;z-index:3;background:#1a1a1a;padding:2px 4px;border-radius:3px;box-shadow:0 0 8px rgba(0,0,0,.6)}

/* ===================== [AI REGISTER] AI登録モーダル ===================== */
.ai-register-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:300;display:flex;align-items:center;justify-content:center;padding:18px}
.ai-register-sheet{background:#171717;border-radius:14px;box-shadow:var(--shadow);width:min(1100px,100%);max-height:96vh;display:flex;flex-direction:column;overflow:hidden}
.ai-register-header{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid #2a2a2a;flex-wrap:wrap;gap:10px}
.ai-register-body{padding:14px;overflow:auto}
.ai-reg-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:14px}
.ai-reg-form .field{display:flex;flex-direction:column;gap:4px;font-size:12px}
.ai-reg-form label{font-weight:700;color:#ddd}
.ai-reg-form input[type=text], .ai-reg-form select, .ai-reg-form textarea{padding:8px 10px;background:#0e0e0e;color:#fff;border:1px solid #2a2a2a;border-radius:6px;font-size:13px;font-family:inherit}
.ai-reg-mode-row{display:flex;gap:10px;flex-wrap:wrap;font-size:13px}
.ai-reg-domain-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:12px}
.ai-reg-domain-row label{background:#1c1c1c;border:1px solid #2a2a2a;padding:4px 8px;border-radius:5px;cursor:pointer}
.ai-reg-target-row{display:flex;flex-wrap:wrap;gap:6px;font-size:12px}
.ai-reg-preview-table{width:100%;border-collapse:collapse;font-size:12px}
.ai-reg-preview-table th, .ai-reg-preview-table td{padding:6px 8px;border-bottom:1px solid #2a2a2a;text-align:left;vertical-align:top}
.ai-reg-preview-table th{background:#171717;font-weight:600}
.ai-reg-preview-table tr.low td{background:#3a1a1a}
.ai-reg-preview-table tr.mid td{background:#2a2014}
.ai-reg-conf{font-weight:800}
.ai-reg-conf.high{color:#bdf5cf}
.ai-reg-conf.mid{color:#ffe7a3}
.ai-reg-conf.low{color:#fbb1a3}

/* ===================== [AI AUTOFILL] AI自動入力プレビュー（旧: index.html body内styleブロック） ===================== */
.ai-autofill-preview-table{ width:100%; border-collapse:collapse; font-size:12px; margin-top:6px; }
.ai-autofill-preview-table th,.ai-autofill-preview-table td{ border:1px solid #333; padding:4px 6px; vertical-align:top; }
.ai-autofill-preview-table th{ background:#222; }

/* ===== PDF-BLACKTYPE-UI-A02: AIブラックタイプPDF抽出（選択UI・確認モーダル） ===== */
.ai-bt-extract-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.ai-bt-extract-row .btn{ min-height:44px; }          /* タッチ操作の当たり判定 */
.ai-bt-extract-row .m-attach{ min-height:44px; display:inline-flex; align-items:center; }
.ai-bt-filename{ font-size:11px; word-break:break-all; min-width:0; }
.ai-bt-status{ font-size:11px; color:var(--gold-soft); margin-bottom:6px; }
.ai-bt-status[hidden]{ display:none; }
.ai-bt-error{
  font-size:12px; color:#fbb1a3; background:rgba(181,107,107,.12);
  border:1px solid rgba(181,107,107,.45); border-radius:8px;
  padding:8px 10px; margin-bottom:8px; line-height:1.6;
  /* PDF-BLACKTYPE-UI-CLEANUP-A03: 対処方法・接続先を複数行で示すため改行を保持する */
  white-space:pre-line; word-break:break-word; overflow-wrap:anywhere;
}
.ai-bt-error[hidden]{ display:none; }

.ai-bt-doc{ margin-bottom:8px; word-break:break-all; }
.ai-bt-block{ background:#1a1a1a; margin-bottom:10px; }
.ai-bt-block-title{ font-weight:800; margin-bottom:6px; }
.ai-bt-warn{ background:#3a2a1a; color:#fbd99a; margin-bottom:10px; }
.ai-bt-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.ai-bt-toolbar .btn{ min-height:40px; }
/* 長い証拠テキスト・原文はセル内でスクロールし、モーダルを横に広げない */
.ai-bt-table{ table-layout:fixed; }
.ai-bt-table td,.ai-bt-table th{ word-break:break-word; overflow-wrap:anywhere; }
.ai-bt-cell-check{ width:52px; text-align:center; }
.ai-bt-check{ width:20px; height:20px; }
.ai-bt-cell-ev{ max-width:280px; }
.ai-bt-evidence{ max-height:96px; overflow:auto; white-space:pre-wrap; line-height:1.6; }
.ai-bt-page{ font-size:10px; margin-top:2px; }
.ai-bt-raw{ max-height:280px; overflow:auto; white-space:pre-wrap; font-size:11px; margin-top:6px; }
.ai-bt-status-tag{ font-size:10px; color:var(--gold-soft); margin-top:2px; }
/* PDF-BLACKTYPE-REVIEW-UX-A05: 曖昧候補は確定値と区別できるよう強調する（初期は未選択） */
.ai-bt-tag-ambiguous{ color:#e0c14a; font-weight:700; }
.ai-bt-row-ambiguous td{ background:rgba(224,193,74,.07); }
.ai-bt-flag{ font-size:10px; color:#aaa; margin-top:2px; }
.ai-bt-flag-warn{ color:#e0c14a; }
.ai-bt-row-disabled td{ opacity:.72; }
.ai-bt-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.ai-bt-actions .btn{ min-height:44px; }
.ai-bt-note{ font-size:11px; margin-top:6px; }

/* Compact：表を縦積みにして横スクロールを不要にする */
@media (max-width:640px){
  .ai-bt-table,.ai-bt-table tbody,.ai-bt-table tr,.ai-bt-table td{ display:block; width:100%; }
  .ai-bt-table thead{ display:none; }
  .ai-bt-table tr{ border:1px solid #333; border-radius:8px; margin-bottom:8px; padding:4px; }
  .ai-bt-table td{ border:0; border-bottom:1px solid #2a2a2a; padding:6px 4px; }
  .ai-bt-table tr td:last-child{ border-bottom:0; }
  .ai-bt-table td::before{
    content:attr(data-th); display:block; font-size:10px; color:var(--gold-soft); margin-bottom:2px;
  }
  .ai-bt-cell-check{ width:auto; text-align:left; }
  .ai-bt-cell-ev{ max-width:none; }
}
.ai-autofill-section-btn{ font-size:11px; padding:2px 6px; margin-left:6px; }
.inline-ai-name-row{ display:flex; gap:8px; align-items:center; }
.inline-ai-name-row input{ flex:1; }
.inline-ai-name-row .btn{ white-space:nowrap; }
.ai-autofill-pre-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:6px; }
.ai-autofill-pre-row{ background:#1a1a1a; padding:6px 10px; border-radius:4px; display:flex; align-items:center; gap:6px; font-size:12px; }
.ai-autofill-section-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:6px; }
.ai-autofill-section-check{ display:flex; align-items:center; gap:6px; padding:6px 8px; background:#1c1c1c; border:1px solid #2a2a2a; border-radius:6px; font-size:12px; }
.ai-autofill-section-check.done{ border-color:rgba(91,154,120,.5); }
.ai-autofill-section-check.failed{ border-color:rgba(181,107,107,.5); }
.ai-autofill-section-check em{ margin-left:auto; font-size:10px; color:#aaa; font-style:normal; }
.ai-autofill-history-list{ display:flex; flex-direction:column; gap:8px; }
.ai-autofill-history-item{ background:#1a1a1a; border:1px solid #2a2a2a; border-radius:10px; padding:8px 10px; }
.ai-autofill-history-item summary{ cursor:pointer; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ai-history-sub{ margin-top:10px; }

/* ===================== [LIST MANAGER] リスト管理：現在地ナビ / 長押しドラッグ移動 ===================== */
/* パンくず（現在どのファイルの中にいるか＝作成先） */
.lm-breadcrumb{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:12px;margin-bottom:6px}
.lm-crumb{background:transparent;border:0;color:var(--gold-soft);cursor:pointer;padding:3px 6px;border-radius:5px;font-size:12px;font-family:inherit}
.lm-crumb:hover{background:#1d1d1d}
.lm-crumb[disabled]{color:var(--text-sub);cursor:default}
.lm-crumb-sep{color:var(--text-mute);font-size:11px}
.lm-create-note{font-size:11px;color:var(--warn);margin-bottom:6px}
/* 現在地の行を強調 */
.list-manager-row.lm-current{background:rgba(201,166,74,.10) !important;box-shadow:inset 2px 0 0 var(--gold)}
.lm-folder-open{background:transparent;border:0;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:0;flex:1;min-width:110px}
.lm-folder-open:hover{color:var(--gold-soft);text-decoration:underline}
/* ドラッグハンドル：長押しの起点。touch-action:none で長押し中のスクロールを止める */
.lm-grip{flex:0 0 auto;cursor:grab;color:var(--text-mute);font-size:13px;line-height:1;padding:4px 5px;border-radius:4px;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lm-grip:hover{color:var(--text);background:#1d1d1d}
.lm-grip:active{cursor:grabbing}
.lm-grip:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* 掴んでいる間の元の行 */
.list-manager-row.lm-dragging{opacity:.4}
/* 指/カーソルに追従するゴースト */
.lm-ghost{position:fixed;z-index:9999;pointer-events:none;background:#1d1d1d;border:1px solid var(--gold);
  border-radius:8px;padding:6px 12px;font-size:12px;color:var(--text);box-shadow:0 10px 28px rgba(0,0,0,.6);
  opacity:.95;white-space:nowrap;max-width:70vw;overflow:hidden;text-overflow:ellipsis}
.lm-ghost.lm-ghost-invalid{border-color:var(--risk);color:var(--risk)}
.lm-ghost-reason{display:block;font-size:10px;color:var(--risk);margin-top:2px}
/* 挿入位置（行の前後）と、フォルダの中へ入れる場合の枠 */
.list-manager-row.lm-drop-before{box-shadow:inset 0 2px 0 var(--gold)}
.list-manager-row.lm-drop-after{box-shadow:inset 0 -2px 0 var(--gold)}
.list-manager-row.lm-drop-inside{background:rgba(201,166,74,.16) !important;box-shadow:inset 0 0 0 1px var(--gold)}
.list-manager-row.lm-drop-invalid{background:rgba(181,107,107,.14) !important;box-shadow:inset 0 0 0 1px var(--risk)}
/* ルート（フォルダ未所属）へ戻すためのドロップ領域 */
.lm-root-dropzone{border:1px dashed #333;border-radius:8px;padding:8px;margin-top:6px;font-size:11px;color:var(--text-mute);text-align:center}
.lm-root-dropzone.lm-drop-inside{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,166,74,.10)}
/* ドラッグ中はテキスト選択とスクロール連動を抑止 */
body.lm-dragging-active{-webkit-user-select:none;user-select:none;cursor:grabbing}
body.lm-dragging-active .list-manager-row{cursor:grabbing}
@media(max-width:640px){ .lm-grip{padding:7px 8px;font-size:15px} }
/* 固定システムリストの名称変更（インライン入力）。表示名と並び順だけ変更でき、ID・抽出条件は不変 */
.lm-sys-rename-input{padding:5px 8px;background:#0e0e0e;color:var(--text);border:1px solid var(--gold);border-radius:6px;font-size:13px;font-family:inherit}
.lm-sys-rename-input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.lm-sys-rename-error{color:var(--risk);font-size:11px;flex-basis:100%}

/* ===================== [ONLINE HUB] HS-ONLINE-HUB-01A: オンラインビッド / オンラインカタログ 専用画面 ===================== */
.online-hub-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.online-search{flex:1;min-width:180px;padding:7px 10px;background:#0e0e0e;color:var(--text);border:1px solid #2a2a2a;border-radius:6px;font-family:inherit;font-size:13px}
.online-search:focus{border-color:var(--gold)}
/* オンラインビッド: 開催カード（横長） */
.online-bid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.online-bid-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s}
.online-bid-card:hover{border-color:var(--gold-soft);background:#181c24}
.online-bid-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.online-bid-market{font-size:11px;color:var(--text-sub);letter-spacing:.04em}
.online-bid-title{font-size:16px;font-weight:800;color:var(--gold-soft);margin:2px 0 8px}
.online-bid-meta{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.online-bid-row{display:flex;gap:8px;font-size:12px;align-items:baseline}
.online-bid-row .k{flex:0 0 68px;color:var(--text-mute);font-size:11px}
.online-bid-row .v{color:var(--text);min-width:0}
.online-method-badge{background:#1d3158;color:#9fd4ff;font-size:11px}
.online-bid-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px}
.online-bid-foot .btn{margin-left:auto}
.online-status,.online-status--imported{background:#1a3324;color:#7fd6a0;font-size:11px}
.online-status--unimported{background:#2a2a2a;color:var(--text-mute);font-size:11px}
.online-status--cancelled{background:#3a1a1a;color:#fbb1a3;font-size:11px}
/* オンラインカタログ: 左 年 / 右 開催一覧 */
.online-catalog-layout{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
.online-catalog-years{display:flex;flex-direction:column;gap:4px;position:sticky;top:8px}
.online-years-label{font-size:10px;margin-bottom:2px}
.online-year-tab{text-align:left;background:transparent;border:1px solid transparent;color:var(--text-sub);padding:7px 10px;border-radius:7px;font-size:13px;cursor:pointer;font-family:inherit}
.online-year-tab:hover{background:#181818;color:var(--text)}
.online-year-tab.active{background:linear-gradient(90deg,rgba(201,166,74,.18),rgba(201,166,74,.04));color:var(--gold-soft);border-color:var(--gold);font-weight:700}
.online-catalog-list{display:flex;flex-direction:column;gap:6px}
.online-catalog-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:border-color .12s,background .12s}
.online-catalog-row:hover{border-color:var(--gold-soft);background:#181c24}
.online-catalog-row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.online-row--disabled{cursor:default;opacity:.7}
.online-row--disabled:hover{border-color:var(--line);background:var(--panel)}
.online-catalog-title{font-weight:700;color:var(--text)}
.online-catalog-date{color:var(--text-sub);font-size:12px;margin-left:8px}
.online-catalog-status{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.online-open-hint{color:var(--gold-soft);font-size:11px}
/* HBA-CATALOG-PREVIEW-FULL-A11: 取込の完全プレビュー（PC=1頭1行のテーブル / Compact・iPad=1頭1カード） */
.cip-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.cip-toolbar .online-search{min-width:220px}
.cip-toolbar .btn{min-height:44px}
.cip-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cip-actions .btn{min-height:44px}
.cip-table-wrap{overflow-x:auto;max-height:70vh;overflow-y:auto;border:1px solid var(--line);border-radius:8px}
.cip-table{border-collapse:separate;border-spacing:0;font-size:11px;min-width:1400px}
.cip-table th,.cip-table td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:6px 8px;vertical-align:top;text-align:left}
.cip-table thead th{position:sticky;top:0;z-index:3;background:#141414}
.cip-table .cip-sticky{position:sticky;background:#101010;z-index:2}
.cip-table .cip-sticky-1{left:0;min-width:64px}
.cip-table .cip-sticky-2{left:64px;min-width:150px}
.cip-table thead .cip-sticky{z-index:4}
.cip-th{display:flex;flex-direction:column;gap:2px;font-weight:700;white-space:nowrap}
.cip-target{font-size:10px;color:var(--text-mute);font-weight:400;white-space:nowrap}
.cip-cell{display:flex;flex-direction:column;gap:2px;min-width:150px}
.cip-in{color:var(--text);word-break:break-all}
.cip-sub{font-size:10px;color:var(--text-sub);word-break:break-all}
.cip-cur{font-size:10px;color:var(--text-mute)}
.cip-plan{font-size:11px;color:var(--gold-soft);word-break:break-all}
.cip-verdict{font-size:10px;color:var(--text-sub)}
.cip-warn{color:#fbb1a3}
.cip-thumbs{display:flex;gap:3px;flex-wrap:wrap}
.cip-thumb{width:34px;height:34px;object-fit:cover;border:1px solid var(--line);border-radius:4px}
.cip-thumb--ng{display:inline-flex;align-items:center;justify-content:center;color:#fbb1a3;font-size:12px}
.cip-thumb--wait{display:inline-flex;align-items:center;justify-content:center;color:var(--text-sub);font-size:12px;border-style:dashed}
.cip-frameset{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px;font-size:12px;line-height:1.7}
.cip-frameset-title{font-weight:600;color:var(--gold-soft);margin-bottom:4px}
.cip-frameset--ng{border-color:#7a4038;background:rgba(122,64,56,.14)}
.cip-frameset--ng .cip-frameset-title{color:#fbb1a3}
.cip-media-line{font-size:10px;color:var(--text-sub);display:flex;gap:6px;justify-content:space-between;word-break:break-all}
.cip-state{color:var(--gold-soft);white-space:nowrap}
.cip-badge-create{background:#1d3158;color:#9fd4ff;font-size:11px}
.cip-badge-merge{background:#1a3a23;color:#bdf5cf;font-size:11px}
.cip-badge-blocked{background:#3a1a1a;color:#fbb1a3;font-size:11px}
.cip-cards{display:flex;flex-direction:column;gap:10px}
.cip-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.cip-card-head{cursor:pointer;font-size:12.5px;line-height:1.8;min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.cip-meta{font-size:10px;color:var(--text-mute);word-break:break-all}
.cip-card-body{margin-top:6px;display:flex;flex-direction:column;gap:8px}
.cip-field{border-top:1px solid var(--line);padding-top:6px;font-size:12px}
.cip-field-head{display:flex;flex-direction:column;gap:2px;font-weight:700;margin-bottom:3px}
.cip-bid{border-top:1px solid var(--gold);padding-top:8px;margin-top:4px}
.cip-bid-title{font-weight:700;color:var(--gold-soft);margin-bottom:4px;font-size:12.5px}
.cip-result{border:1px solid var(--gold);border-radius:10px;padding:10px;margin-bottom:12px;background:rgba(201,166,74,.06)}
.cip-result-title{font-weight:800;color:var(--gold-soft);margin-bottom:6px}

/* ONLINE-CATALOG-IMPORT-SIMPLIFY-A05: オンラインカタログ専用インポート画面（取込先選択 → HTML1件添付 → プレビュー → インポート） */
.catalog-import-step{margin-bottom:14px}
.catalog-import-step-label{font-size:11px;color:var(--text-sub);margin-bottom:6px}
.catalog-import-step-body{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.catalog-import-step-body .m-attach{min-height:44px}   /* 登録/編集の「📎 ファイル添付」と同じ .m-attach を使用 */
.catalog-import-step-body .btn{min-height:44px}
.catalog-import-target{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-width:220px}
.catalog-import-target-date{font-size:12px;color:var(--text-sub)}
.catalog-import-target-title{font-weight:700;color:var(--text);margin-top:2px}
.catalog-import-file-name{word-break:break-all;min-width:0}
.catalog-import-pick-btn{min-height:44px}
.catalog-import-actions{margin-top:4px}
.catalog-import-actions .btn{min-height:44px}
/* 取込先カタログ選択モーダル（年は新しい順・年内はオンラインカタログ画面と同じ日付順） */
.catalog-picker-years{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.catalog-picker-year{flex:0 0 auto;min-height:44px}
.catalog-picker-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto}
.catalog-picker-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:44px;
  cursor:pointer;font-family:inherit;font-size:13px;text-align:left;color:var(--text)}
.catalog-picker-row:hover{border-color:var(--gold-soft);background:#181c24}
.catalog-picker-row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.catalog-picker-date{font-size:12px;color:var(--text-sub)}
.catalog-picker-title{font-weight:700}

/* ONLINE-SALES-DELETE-HIDE-A04: 保存カタログ / 登録ビッドの削除ボタン。
   色は既存の危険操作ボタン（.btn.danger）をそのまま使い、新しい赤色体系は作らない。
   タッチ環境では 44px を確保する（PC の行高は変えない）。 */
/* 位置は既存規則に合わせる（.online-bid-foot .btn の margin-left:auto ＝ 右端）*/
.online-row-delete{flex:0 0 auto;min-height:34px;white-space:nowrap}
.online-bid-delete{flex:0 0 auto;min-height:34px;white-space:nowrap}
/* ONLINE-CATALOG-EDIT-DISPLAY-A10: 編集ボタンは通常色（既存 .btn をそのまま使う）。削除ボタンの左に置く */
.online-row-edit{flex:0 0 auto;min-height:34px;white-space:nowrap}
/* 開催中止タグ（既存 .online-status--cancelled の配色を使う小型タグ。カード全体は赤くしない） */
.online-catalog-cancel-tag{margin-left:8px;font-size:11px;flex:0 0 auto}
/* タッチ環境の判定は (pointer:coarse) だけに頼らない。
   iPad 横向き(1080px)は幅クエリだけでは拾えず、逆に一部の実行環境では coarse が報告されないため両方で拾う。 */
@media (pointer:coarse), (max-width:1024px){
  .online-row-delete,.online-bid-delete,.online-row-edit{min-height:44px;min-width:56px}
}

/* ONLINE-BID-LIST-MERGE-A03: 出典ラベル（登録 / 取込）。既存カードに馴染む小さな補助ラベル */
.online-source-badge{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--line);border-radius:999px;
  font-size:10px;line-height:1.5;color:var(--text-mute);background:transparent;vertical-align:middle}
/* 登録ビッドは紐づく馬がまだ無いため開催ファイル詳細を開かない（hover の反応も出さない） */
.online-bid-card--registered{cursor:default}
.online-bid-card--registered:hover{border-color:var(--line);background:var(--panel)}

/* ONLINE-SALES-UI-A02: カタログ追加 / ビッド追加 フォーム */
.online-add-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start}
.online-add-check{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;cursor:pointer}
.online-add-check input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;cursor:pointer}
.online-bid-period-row{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.online-bid-period-row > .field{flex:1 1 220px;min-width:200px}
.online-bid-period-sep{flex:0 0 auto;padding-top:24px;color:var(--text-sub);font-size:15px}
.online-add-hint{display:block;margin-top:10px;line-height:1.6}
.online-add-hint[hidden]{display:none}   /* display 指定が hidden 属性を打ち消さないようにする */
.online-add-actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.online-add-actions .btn{min-height:44px}
/* Compact: 期間の「～」は行頭に来ると読みづらいため、縦積み時は区切り線の役割に寄せる */
@media (max-width:520px){
  .online-bid-period-sep{padding-top:0;width:100%;text-align:center}
}
/* 開催ファイル詳細: 馬一覧テーブル */
.online-file-head h3{margin:2px 0 2px;color:var(--gold-soft);font-size:16px}
.online-file-head{margin:8px 0 12px}
#online-file-back{margin-bottom:8px}
.online-horse-table{width:100%;border-collapse:collapse;font-size:12.5px}
.online-horse-table th,.online-horse-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.online-horse-table th{background:#171717;color:var(--text-sub);font-weight:600;font-size:11px;position:sticky;top:0}
.online-horse-row{cursor:pointer}
.online-horse-row:hover td{background:#161b22}
.online-horse-row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
@media(max-width:640px){ .online-catalog-layout{grid-template-columns:1fr} .online-catalog-years{flex-direction:row;flex-wrap:wrap;position:static} }

/* IOS-PAGE-ZOOM-LOCK-A49: iPhone/iPad版では2回タッチでページが拡大しないようにする。
   manipulation は「スクロールとつまむ操作は許すが、ダブルタップの拡大はしない」指定。
   プロットのキャンバス（touch-action:none）や長押しハンドルの指定は、より細かい方が勝つのでそのまま。 */
html.platform-ios, html.platform-ios body{touch-action:manipulation;}
/* ===================== [iOS DRAWER] Capacitor iOS 用 三本線ドロワー（platform-ios のときのみ） ===================== */
/* 通常ブラウザ・Mac では三本線・背景を出さず、既存サイドバーを維持する。 */
.mobile-menu-toggle{display:none}
.mobile-menu-backdrop{display:none}
/* iOS: 既存サイドバーを画面外ドロワー化し、app-shell を1カラム・本文を全幅にする（iPad横幅でも三本線方式） */
html.platform-ios .app-shell{grid-template-columns:1fr}
html.platform-ios .app-main{
  padding-top:calc(env(safe-area-inset-top) + 60px);
  padding-left:calc(var(--main-gutter) + env(safe-area-inset-left));
  padding-right:calc(var(--main-gutter) + env(safe-area-inset-right));
  padding-bottom:calc(48px + env(safe-area-inset-bottom));
}
/* 三本線ボタン（左上固定・44×44pt・safe-area考慮） */
html.platform-ios .mobile-menu-toggle{
  display:flex;align-items:center;justify-content:center;
  position:fixed;
  top:calc(env(safe-area-inset-top) + 8px);
  left:calc(env(safe-area-inset-left) + 8px);
  width:44px;height:44px;z-index:12300;
  background:rgba(20,20,20,.92);color:var(--gold-soft);
  border:1px solid var(--line);border-radius:10px;
  font-size:20px;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
html.platform-ios .mobile-menu-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* ドロワー本体（左からスライドイン。閉時は画面外） */
html.platform-ios .app-sidebar{
  position:fixed;top:0;left:0;
  height:100vh;height:100dvh;max-height:none;
  width:min(84vw,320px);
  padding:calc(env(safe-area-inset-top) + 60px) 10px calc(env(safe-area-inset-bottom) + 30px) calc(env(safe-area-inset-left) + 10px);
  border-right:1px solid #1f1f1f;border-bottom:0;
  transform:translateX(-100%);transition:transform .25s ease;
  z-index:12200;will-change:transform;
}
html.platform-ios.mobile-menu-open .app-sidebar{transform:translateX(0)}
/* 背景オーバーレイ（開いている間だけ表示・背景の誤操作防止） */
html.platform-ios.mobile-menu-open .mobile-menu-backdrop{
  display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:12150;
}
@media (prefers-reduced-motion:reduce){
  html.platform-ios .app-sidebar{transition:none}
}
/* iOS更新確認マーカー（platform-ios のときだけ・控えめに最下部）。文字列表示のみ。 */
.ios-update-marker{display:none}
html.platform-ios .ios-update-marker{
  display:block;margin-top:14px;padding:8px 10px;
  font-size:10.5px;color:var(--text-mute);letter-spacing:.04em;
  border-top:1px solid #1c1c1c;
}
/* Mac(Electron)更新確認マーカー（platform-electron=horselabo: 起動時だけ・控えめに最下部）。
   文字列表示のみ・localStorage非接続。HTTPブラウザ / iOS(platform-ios) では非表示。 */
.electron-update-marker{display:none}
html.platform-electron .electron-update-marker{
  display:block;margin-top:14px;padding:8px 10px;
  font-size:10.5px;color:var(--text-mute);letter-spacing:.04em;
  border-top:1px solid #1c1c1c;
}

/* ===================== PLOT-MANAGEMENT-REDESIGN-01: プロット管理画面 ===================== */
.plot-mgmt-form{ margin-bottom:16px; }
.plot-mgmt-form-actions{ margin-top:10px; }
.plot-cat-select-wrap{ display:flex; gap:6px; align-items:center; }
.plot-cat-select-wrap select{ flex:1 1 auto; min-width:0; }
.plot-cat-select-wrap .btn{ flex:0 0 auto; white-space:nowrap; }

.plot-mgmt-sections{ display:flex; flex-direction:column; gap:22px; }
.plot-category-section{ display:flex; flex-direction:column; gap:8px; }
.plot-category-heading{
  margin:0; font-size:14px; font-weight:700; color:var(--gold-soft);
  letter-spacing:.03em; padding-bottom:5px; border-bottom:1px solid var(--line);
}
/* 各分類内は横一列・分類行だけ横スクロール（カード数が画面幅を超えたとき） */
.plot-category-row{
  display:flex; flex-direction:row; gap:12px;
  overflow-x:auto; overflow-y:hidden;
  padding:2px 2px 10px; scroll-snap-type:x proximity;
}
.plot-category-empty{ color:var(--text-mute); font-size:12px; padding:14px 6px; }

/* PLOT-MGMT-UI-REFRESH-A01: プレビュー領域（.plot-card-media）をちょうど 512px にする。
   box-sizing:border-box のため、カード幅には左右の境界線 1px×2 を足した 514px を上限とする。
   横幅が足りない画面では min() 側が効いて縮み、正方形は aspect-ratio で維持される。 */
.plot-card{
  flex:0 0 auto; width:min(514px,100%); max-width:514px; scroll-snap-align:start;
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
}
/* カード画像領域：512×512の正方形。画像はトリミングせず contain（縦横比維持・切り抜き禁止） */
.plot-card-media{
  position:relative; width:100%; aspect-ratio:1 / 1; margin-inline:auto;
  background:#0c0e12; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.plot-card-media-neutral{ background:#161a21; }  /* 画像なし＋プロットありの中立背景 */
.plot-card-media-nodata{ color:var(--text-mute); font-size:13px; letter-spacing:.08em; }
.plot-card-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
/* 点・線レイヤーは画像領域と完全に重なる */
.plot-card-svg{ position:absolute; inset:0; width:100%; height:100%; }
.plot-card-body{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:9px; }
.plot-card-name{ font-weight:700; font-size:13px; line-height:1.4; word-break:break-word; }
.plot-card-actions{ display:flex; gap:6px; flex-wrap:wrap; }
/* PLOT-MGMT-UI-REFRESH-A01: PC・iPad・iPhone のどの幅でもタッチの当たり判定を確保する
   （iPad 横向きは 1024px を超えるためメディアクエリでは届かない。既定値として持たせる）。 */
.plot-card-actions .btn{ min-height:44px; }

/* 分類管理モーダル（.plot-modal / .plot-sheet / .plot-header は plot.css を再利用） */
.plot-sheet.plot-cat-sheet{ width:min(440px,100%); }
.plot-cat-modal-body{ padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
.plot-cat-add{ display:flex; gap:8px; }
.plot-cat-add input{
  flex:1 1 auto; min-width:0; padding:8px 10px;
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--line); border-radius:8px; font-size:13px;
}
.plot-cat-add input:focus{ border-color:var(--gold); outline:none; }
.plot-cat-list{ display:flex; flex-direction:column; gap:6px; max-height:54vh; overflow-y:auto; }
.plot-cat-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:8px;
}
.plot-cat-del{ flex:0 0 auto; min-height:40px; }  /* 各分類行の左端に配置 */
.plot-cat-del:disabled{ opacity:.35; cursor:not-allowed; }
.plot-cat-name{ flex:1 1 auto; min-width:0; font-size:13px; word-break:break-word; }
/* PLOT-CATEGORY-RENAME-01: 名称クリックで編集できることを示す＋インライン編集欄 */
.plot-cat-name[data-cat-rename]{ cursor:pointer; border-radius:6px; padding:4px 6px; transition:background .12s; }
.plot-cat-name[data-cat-rename]:hover{ background:rgba(201,166,74,.12); }
.plot-cat-name[data-cat-rename]:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px; }
.plot-cat-name-edit{ flex:1 1 auto; min-width:0; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.plot-cat-name-edit input{ flex:1 1 120px; min-width:0; padding:6px 8px; background:var(--panel-2); color:var(--text); border:1px solid var(--gold); border-radius:8px; font-size:13px; }
.plot-cat-name-edit input:focus{ outline:none; }
.plot-cat-name-edit .btn{ flex:0 0 auto; }
.plot-cat-move{ display:flex; gap:6px; flex:0 0 auto; }
.plot-cat-move .btn{ min-width:44px; min-height:44px; }  /* タップ領域44px目安 */
.plot-cat-move .btn:disabled{ opacity:.35; cursor:not-allowed; }

/* Medium／Compact：カード幅は min(514px,100%) で自動的に縮む（正方形は aspect-ratio で維持）ため
   PLOT-MGMT-UI-REFRESH-A01 以降は幅指定のメディアクエリを持たない。
   操作ボタンの高さ(44px)は .plot-card-actions .btn の既定値で全幅に適用している。 */

/* HBA-NO-PDF-IMPORT-A15: ブラックタイプPDFの添付一覧・プレビューのPDF情報 */
.bt-pdf-list{margin:6px 0 10px}
.bt-pdf-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px}
.bt-pdf-name{flex:1 1 160px;min-width:0;overflow-wrap:anywhere;font-size:12px}
.cip-pdf-name{overflow-wrap:anywhere}
.cip-pdf-url{overflow-wrap:anywhere;opacity:.75}
.cip-pdf-failed{margin-top:8px;padding:8px 10px;border:1px solid #7a4038;border-radius:8px;background:rgba(122,64,56,.14)}

/* PLOT-LIBRARY-MODE-UI-A02: プロット管理のベース／テンプレ切替（既存ボタンデザインを再利用） */
.plot-library-modes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.plot-library-heading{margin:0 0 4px;font-size:15px}
.plot-library-desc{margin-bottom:12px;line-height:1.6}
.plot-library-empty{text-align:center}

/* PLOT-TEMPLATE-APPLY-A03: テンプレプロット選択（既存モーダル部品を再利用） */
.plot-template-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px}
.plot-template-info{flex:1 1 180px;min-width:0}
.plot-template-name{font-weight:600;font-size:13px;overflow-wrap:anywhere}

/* PLOT-TEMPLATE-BACKGROUND-FIX-A05: 編集中の背景表示切替 */
.plot-editor-bg-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.plot-editor-bg-row .rank-meta{flex:1 1 140px;min-width:0;font-size:11px}

/* PLOT-EVALUATION-UI-A06: 評価プロンプトと座標比較表 */
.plot-prompt-input{width:100%;min-height:180px;background:#0e0e0e;color:#fff;border:1px solid #333;border-radius:8px;padding:8px;font-size:13px;line-height:1.6;resize:vertical}
.plot-prompt-over{color:#fbb1a3}
.plot-card-prompt{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.plot-card-prompt-head{font-size:11px;color:var(--gold-soft);margin-bottom:2px}
.plot-card-prompt-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.6;max-height:140px;overflow-y:auto}
.plot-cmp-blocks{display:block}
.pcmp-table-wrap{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-top:6px}
.pcmp-table{width:100%;border-collapse:collapse;font-size:12px}
.pcmp-table th,.pcmp-table td{padding:3px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.pcmp-table th:first-child,.pcmp-table td:first-child{text-align:left}
.pcmp-table thead th{position:sticky;top:0;background:var(--panel,#151515);z-index:1}
.pcmp-none{color:var(--text-mute,#888)}
.pcmp-na{color:#e0c14a}

/* PLOT-EVALUATION-AI-UI-A07: 座標AI評価の実行と結果プレビュー */
.plot-eval-panel{margin-top:10px}
.plot-eval-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.plot-eval-result{margin-top:8px;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.plot-eval-level{font-weight:600;color:var(--gold-soft);font-size:12px;margin-bottom:4px}
.plot-eval-summary,.plot-eval-explanation{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.6;margin-bottom:6px}
/* 評価文が潰れないよう、狭い幅では横スクロールで読ませる（縦に潰さない） */
.plot-eval-table{min-width:560px}
.plot-eval-table td{white-space:normal;overflow-wrap:anywhere;vertical-align:top}
.plot-eval-table td:nth-child(1){min-width:76px}
.plot-eval-table td:nth-child(2),.plot-eval-table td:nth-child(3),.plot-eval-table td:nth-child(4){white-space:nowrap}
.plot-eval-table td:nth-child(5){min-width:84px}
.plot-eval-table td:nth-child(7){min-width:180px;text-align:left}
.plot-eval-table th:nth-child(7){text-align:left}
.plot-eval-limitations{margin-top:8px}
.plot-eval-lim-head{font-size:11px;color:var(--gold-soft);margin-bottom:2px}
.plot-eval-loading{color:var(--gold-soft)}

/* PLOT-AUTOFOLLOW-EVAL-UI-A08: 追従部位指定と自動追従の表示 */
.plot-follow-desc{line-height:1.7;margin:6px 0 8px}
.plot-follow-list{max-height:320px;overflow-y:auto;border:1px solid var(--line);border-radius:8px}
.plot-follow-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
.plot-follow-row:last-child{border-bottom:none}
.plot-follow-row.is-on{background:rgba(224,193,74,.12)}
.plot-follow-note{margin:4px 0 6px}
.plot-card-follow{margin-top:4px}
.plot-eval-saved{margin-top:6px}

/* PLOT-BASE-RENDERER-UNIFY-A09: 編集対象レイヤー切替とベース表示設定 */
.plot-layer-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.plot-base-style{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:6px 0}
.plot-base-style h4{margin:0 0 6px}

/* ONLINE-CATALOG-VIEW-MODE-A51: 開催詳細の表示切替。カードは全対象リストと同じ .horse-grid を使う。 */
.online-view-toggle{display:inline-flex;gap:6px;margin-left:auto;flex:0 0 auto;}
.online-file-horse-grid{margin-top:12px;}

/* CATALOG-DIRECT-URL-IMPORT-B37: カタログURL直接取込の入力欄 */
.catalog-import-url-body{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.catalog-import-url-body #catalog-import-url{flex:1 1 320px;min-width:0}
.catalog-import-url-body .rank-meta{flex:1 1 100%;word-break:break-all}
.catalog-import-url-body .catalog-import-url-error{color:var(--warn)}

/* GLOBAL-BACK-NAVIGATION-A53: 全画面共通の「← 戻る」（画面ごとに作らず1つを使い回す） */
.global-back-bar{display:flex;align-items:center;margin:16px 0 0;}
.global-back-bar .btn{min-height:32px;}
@media (max-width:768px){
  .global-back-bar{margin:12px 0 0;}
  .global-back-bar .btn{min-height:38px;padding:8px 14px;}
}

/* ADMIN-AI-PANEL-UI-A56 / A57 / A57R1 / ADMIN-AI-PANEL-BELOW-HORSE-LIST-A57R2:
   登録/編集は「左＝リスト選択・馬一覧・AIカード / 右＝登録編集フォーム」の2列。
   AIカード7枚はセクションへ埋め込まず、左カラムの馬一覧ブロックの直下へ縦一列に積む
   （馬一覧のスクロールの中には入れない。幅は馬一覧カードと同じ）。
   7枚は幅・出力枠の高さ・タイトル位置・ボタン位置・内側余白・カード間の間隔をすべて同じにする。
   幅が足りないときだけ縦並びになる（flex-wrap。既存のレスポンシブ指定は触らない）。 */
.admin-side{display:flex;flex-direction:column;gap:14px;min-width:0;}
.admin-ai-side,.admin-ai-column{display:flex;flex-direction:column;gap:12px;min-width:0;}
/* ADMIN-AI-PANEL-INNER-SCROLL-A57R3: AIカード7枚は決まった高さの枠の中へ入れ、その枠だけを縦へ送る。
   枠の高さは画面から決めるので、画面の外まで伸びない。
   馬一覧のスクロールとは別で、ページ全体・右の登録編集フォームは動かない。 */
.admin-ai-side{
  height:calc(100vh - 260px);
  height:calc(100dvh - 260px);
  min-height:320px;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;            /* 端まで来てもページ側へスクロールを渡さない */
  -webkit-overflow-scrolling:touch;       /* iPadの指スワイプ */
  scrollbar-width:thin;scrollbar-color:#2c2c2c transparent;}
.admin-ai-side::-webkit-scrollbar{width:8px}
.admin-ai-side::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.admin-ai-side::-webkit-scrollbar-track{background:transparent}
.admin-ai-panel{flex:0 0 auto;width:100%;box-sizing:border-box;
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:10px;}
.admin-ai-panel-title{margin:0;font-size:12px;font-weight:800;color:var(--gold-soft);letter-spacing:.03em;}
/* 書式を持てる出力枠（太字・文字サイズ・改行・段落だけ）。高さは7枠とも同じで、
   中身が長いときは枠の中でスクロールする。 */
.admin-ai-output-wrap{position:relative;}
.admin-ai-output{height:160px;overflow:auto;box-sizing:border-box;
  background:#0e0e0e;color:var(--text);border:1px solid var(--line);border-radius:8px;
  padding:8px 8px 26px;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word;}
.admin-ai-output:empty::before{content:attr(data-placeholder);color:var(--text-mute);}
.admin-ai-output.is-editing{border-color:var(--gold-soft);background:#101010;}
.admin-ai-output:focus-visible{outline:2px solid var(--gold-soft);outline-offset:1px;}
.admin-ai-output p{margin:0 0 6px;}
.admin-ai-output b{font-weight:800;}
/* 文字サイズは4段階だけ */
.ai-fs-sm{font-size:11px;}
.ai-fs-md{font-size:13px;}
.ai-fs-lg{font-size:16px;}
.ai-fs-xl{font-size:20px;}
.admin-ai-expand{position:absolute;right:6px;bottom:6px;width:24px;height:24px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(0,0,0,.55);color:var(--gold-soft);border:1px solid var(--line);border-radius:6px;font-size:12px;}
.admin-ai-expand:hover{border-color:var(--gold-soft);}
.admin-ai-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.admin-ai-toolbar[hidden]{display:none;}
.admin-ai-size{padding:3px 6px;background:#0e0e0e;color:var(--text);border:1px solid var(--line);
  border-radius:6px;font-size:11px;}
.admin-ai-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;}
.admin-ai-actions .btn{flex:1 1 auto;min-width:62px;}
/* 最大化（モーダル）。通常パネルと同じ出力枠・同じボタンを大きく出す。 */
.admin-ai-sheet{width:min(900px,96vw);max-height:92vh;}
.admin-ai-modal-body{display:flex;flex-direction:column;gap:10px;padding:14px 18px 18px;min-height:0;overflow:auto;}
.admin-ai-modal-body .admin-ai-output-lg{height:auto;min-height:44vh;flex:1 1 auto;padding-bottom:8px;}
.admin-ai-modal-body .admin-ai-actions{margin-top:0;}
.admin-ai-modal-body .admin-ai-actions .btn{flex:0 0 auto;min-width:88px;}
.admin-ai-prompt-text{width:100%;box-sizing:border-box;background:#0e0e0e;color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:8px;font-size:12px;line-height:1.6;font-family:inherit;resize:vertical;}
@media(max-width:560px){
  .admin-ai-actions .btn{min-height:34px;}
  .admin-ai-sheet{width:96vw;max-height:94vh;}
  .admin-ai-modal-body{padding:12px;}
  .admin-ai-modal-body .admin-ai-output-lg{min-height:38vh;}
}

/* BODY-VIDEO-PLAYER-FIX-B52: 馬体動画の代表表示。
   写真と同じく先頭を代表として大きく出し、押すと再生する。 */
.m-video-lead{position:relative;display:block;width:min(100%,320px);aspect-ratio:16/9;margin:0 0 8px;
  border-radius:10px;overflow:hidden;background:#000;cursor:pointer;}
.m-video-lead-inner{position:absolute;inset:0;}
.m-video-lead-inner img,.m-video-lead-inner video{width:100%;height:100%;object-fit:cover;display:block;}
.m-video-lead-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;pointer-events:none;}
.m-video-lead-tag{position:absolute;left:6px;top:6px;}
.m-video-blank{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:20px;background:var(--panel-2);}
.m-thumb-bv.is-lead{outline:2px solid var(--accent,#6aa9ff);outline-offset:-2px;}

/* CONTROL-AI-MODEL-SELECT-A61: 設定の「OpenAI AIモデル」。選択の下に今のモデル名とIDを出す。
   APIキーはここに出さない（キーの欄は別ブロックで、値は画面へ戻さない）。 */
.settings-ai-model-current{margin-top:8px;}
.settings-ai-model-name{font-size:13px;font-weight:700;color:var(--text);}
.settings-ai-model-id{font-size:11px;word-break:break-all;}
@media(max-width:560px){
  .settings-ai-model .ios-key-row{flex-direction:column;align-items:stretch;}
  .settings-ai-model .ios-key-row .btn{width:100%;}
}

/* HORSE-DATA-PLOT-COORDINATES-A62: 動画の下に「プロット座標」。
   右側（動画＋座標）の合計高さを左の写真枠に合わせ、表は枠の中だけでスクロールする。 */
.hd-two-col.hd-media-row{align-items:stretch;}
/* A69: 写真枠は中身どおりの高さのままにする（右側の中身で引き伸ばさない）。
   右側の高さを写真に合わせるので、写真側が伸びると合わせ先が動いてしまうため。 */
.hd-two-col.hd-media-row > .hd-sec[data-hd-section="photo"]{align-self:start;}
.hd-col-stack{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0;}
.hd-col-stack > .hd-sec{min-width:0;}
.hd-col-stack > .hd-sec[data-hd-section="plot-coords"]{flex:1 1 auto;display:flex;flex-direction:column;min-height:160px;}
/* A69: 動画が無いときは血統情報①の上に置く。高さは写真枠に合わせるので、ここでは伸ばさない。 */
.hd-col-stack[data-hd-stack="coords-pedigree"] > .hd-sec[data-hd-section="plot-coords"]{flex:0 0 auto;}
.hd-coord-root{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0;}
.hd-coord-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.hd-coord-tabs .btn.on{background:var(--gold);color:#1a1a1a;border-color:var(--gold);}
.hd-coord-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.hd-coord-space{font-size:10px;color:var(--text-mute);}
.hd-coord-note{color:var(--text-mute);font-size:12px;}
.hd-coord-body{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0;}
.hd-coord-scroll{flex:1 1 auto;min-height:80px;overflow:auto;border:1px solid var(--line);border-radius:8px;
  background:var(--panel-2);scrollbar-width:thin;scrollbar-color:#2c2c2c transparent;}
.hd-coord-scroll::-webkit-scrollbar{width:8px;height:8px}
.hd-coord-scroll::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.hd-coord-scroll::-webkit-scrollbar-track{background:transparent}
.hd-coord-table{width:100%;border-collapse:collapse;font-size:11px;white-space:nowrap;}
.hd-coord-table th,.hd-coord-table td{padding:4px 8px;border-bottom:1px solid var(--line);text-align:right;}
.hd-coord-table thead th{position:sticky;top:0;background:#141414;color:var(--text-sub);font-weight:700;z-index:1;}
.hd-coord-table tbody th{text-align:left;color:var(--text);font-weight:600;}
.hd-coord-none{color:var(--text-mute);}

/* HORSE-DATA-PEDIGREE-AI-TOGGLE-A63: 血統評価①AI / ②AI の切替。Horse Dataでは読むだけ。 */
.hd-ai-frame-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 8px 5px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.hd-ai-frame-head .hd-ai-frame-title{padding:0;border-bottom:0;}
.hd-ai-frame-body{padding:8px 10px;overflow:auto;font-size:12px;line-height:1.6;word-break:break-word;}
.hd-ai-frame-body p{margin:0 0 6px;}
.hd-ai-frame-empty{color:var(--text-mute);font-size:12px;}

/* HORSE-DATA-BASE-IMAGE-OPACITY-A65: 「ベース表示」の右の画像透明度。
   薄くするのはベースの背景画像だけで、ベースの点・線やマニュアル・写真本体には掛けない。 */
.hd-base-opacity{display:inline-flex;align-items:center;gap:6px;min-width:0;}
.hd-base-opacity input[type="range"]{width:120px;max-width:38vw;accent-color:var(--gold);touch-action:manipulation;}
.hd-base-opacity-value{font-size:11px;color:var(--text-sub);min-width:38px;text-align:right;}
.hd-photo-stage[data-hd-base-dimmed] svg.hd-base-svg [data-base-background]{opacity:var(--hd-base-img-opacity,1);}
@media(max-width:560px){
  .hd-base-opacity{width:100%;}
  .hd-base-opacity input[type="range"]{flex:1 1 auto;max-width:none;}
}

/* HORSE-DATA-RACE-MEASUREMENT-AI-A66 / HORSE-DATA-MARKET-EVALUATION-AI-A67:
   セクションの間に置く「登録/編集のAI結果」。2枚あるときは正方形を左右half、
   1枚だけなら横長。長い文章はカードの中だけスクロールする（読むだけ）。 */
.hd-ai-area{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.hd-ai-area.is-wide{grid-template-columns:1fr;}
.hd-ai-card{display:flex;flex-direction:column;min-width:0;min-height:0;box-sizing:border-box;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  aspect-ratio:1/1;overflow:hidden;}
.hd-ai-area.is-wide .hd-ai-card{aspect-ratio:auto;height:clamp(200px,32vh,320px);}
.hd-ai-card-title{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--gold-soft);letter-spacing:.04em;}
.hd-ai-card-body{flex:1 1 auto;min-height:0;overflow:auto;font-size:12px;line-height:1.7;word-break:break-word;
  scrollbar-width:thin;scrollbar-color:#2c2c2c transparent;}
.hd-ai-card-body::-webkit-scrollbar{width:8px}
.hd-ai-card-body::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.hd-ai-card-body::-webkit-scrollbar-track{background:transparent}
.hd-ai-card-body p{margin:0 0 6px;}
@media(max-width:880px){
  .hd-ai-area{grid-template-columns:1fr;}
  .hd-ai-card{aspect-ratio:auto;height:clamp(200px,40vh,320px);}
}

/* HORSE-DATA-BASIC-INFO-REFINE-A72R1: インフォメーション「基本情報」。
   段ごとに区切って読みやすくし、馬名は少し強調する。備考は登録分だけ下へ並べる。 */
.hd-basic{display:flex;flex-direction:column;gap:12px;}
.hd-basic-row{gap:10px 18px;}
.hd-basic-row + .hd-basic-row{padding-top:12px;border-top:1px solid var(--line);}
.hd-basic-text{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.hd-basic-remarks{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line);}
.hd-remark-value{white-space:pre-wrap;word-break:break-word;}
.hd-head-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0;}
.hd-head-right .hd-head-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;
  width:auto;margin-top:0;min-width:0;}

/* HORSE-DATA-PHOTO-VIDEO-UX-REFINE-A73: 写真/動画の画面。
   資料｜血統評価AI は左右同じ幅・同じ高さ。PDFはカードの中へページ全体が収まる大きさで出す。
   プロット評価AI｜プロット座標は正方形2枚（片方だけなら横長1枚）。狭い画面は1列。 */
.hd-info-row{align-items:stretch;}
.hd-info-row.is-wide{grid-template-columns:1fr;}
.hd-info-row > .hd-col{min-width:0;}
.hd-ai-col{display:flex;min-width:0;}
.hd-ai-col .hd-ai-frame{flex:1 1 auto;margin-top:0;min-height:0;display:flex;flex-direction:column;}
.hd-ai-col .hd-ai-frame-body{flex:1 1 auto;min-height:0;overflow:auto;
  scrollbar-width:thin;scrollbar-color:#2c2c2c transparent;}
.hd-ai-col .hd-ai-frame-body::-webkit-scrollbar{width:8px}
.hd-ai-col .hd-ai-frame-body::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.hd-ai-col .hd-ai-frame-body::-webkit-scrollbar-track{background:transparent}
/* PDF・画像資料はカード幅に対してA4の縦横比で置く（全体が入り、中でスクロールさせない） */
.hd-doc-frame.hd-doc-fit,.hd-doc-image.hd-doc-fit{height:auto;max-height:none;aspect-ratio:1 / 1.414;}
.hd-doc-image.hd-doc-fit{object-fit:contain;}
/* プロットの段。座標表はカードの中でスクロールする */
.hd-plot-area{margin:14px 0;}
.hd-coord-card .hd-ai-card-body{display:flex;flex-direction:column;}
.hd-coord-card .hd-coord-root{flex:1 1 auto;min-height:0;}
.hd-coord-card .hd-coord-scroll{min-height:60px;}
@media(max-width:880px){
  .hd-info-row{grid-template-columns:1fr;}
}

/* HORSE-DATA-PEDIGREE-VIEW-A74: インフォメーション「血統情報」。
   リストは世代ごとに区切って見出しを大きくし、馬名を関係のラベルより強調する。
   マインドマップは枝分かれの木で、色は「そこへ着く最後の親子関係」（父=青 / 母=赤）。
   横に長くなるときは、この枠の中だけでスクロールする（ページ全体は横に伸ばさない）。 */
.hd-ped-toggle{display:inline-flex;gap:6px;flex-wrap:wrap;}
.hd-ped-toggle .btn.on{background:var(--gold);color:#1a1a1a;border-color:var(--gold);}
.hd-ped-list{display:flex;flex-direction:column;gap:16px;}
.hd-ped-list .hd-ped-gen{margin-bottom:0;padding:12px 0 0;border-top:1px solid var(--line);}
.hd-ped-list .hd-ped-gen:first-child{padding-top:0;border-top:0;}
.hd-ped-list .hd-ped-gen-title{font-size:13px;font-weight:800;color:var(--gold-soft);letter-spacing:.04em;
  margin-bottom:10px;padding-left:8px;border-left:3px solid var(--gold);}
.hd-ped-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 14px;}
.hd-ped-name{font-size:14px;font-weight:700;}
.hd-ped-sire{color:#7fb6f0;}
.hd-ped-dam{color:#f09a9a;}
.hd-ped-remarks{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
/* マインドマップ */
.hd-mindmap{overflow:auto;max-height:min(70vh,620px);padding:6px 4px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#2c2c2c transparent;}
.hd-mindmap::-webkit-scrollbar{width:8px;height:8px}
.hd-mindmap::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.hd-mindmap::-webkit-scrollbar-track{background:transparent}
.hd-mm-root{display:inline-block;min-width:100%;}
.hd-mm-children{margin-left:18px;padding-left:14px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.hd-mm-item{position:relative;}
.hd-mm-item::before{content:"";position:absolute;left:-14px;top:16px;width:12px;height:1px;background:var(--line);}
.hd-mm-item.is-sire::before{background:#4a8fd8;}
.hd-mm-item.is-dam::before{background:#d85c5c;}
.hd-mm-node{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;
  padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);}
.hd-mm-node.is-sire{border-color:#3a6a9e;background:linear-gradient(180deg,#16202c,#131a22);}
.hd-mm-node.is-dam{border-color:#9e4a4a;background:linear-gradient(180deg,#2a1717,#221414);}
.hd-mm-node.is-self{border-color:var(--gold);background:linear-gradient(180deg,#26210f,#1b1809);}
.hd-mm-node.is-sibling{border-color:#4a4a4a;}
.hd-mm-node.is-empty .hd-mm-name{color:var(--text-mute);font-weight:400;}
.hd-mm-rel{font-size:10px;color:var(--text-mute);}
.hd-mm-name{font-size:13px;font-weight:700;color:var(--text);}
.hd-mm-node.is-sire .hd-mm-name{color:#7fb6f0;}
.hd-mm-node.is-dam .hd-mm-name{color:#f09a9a;}
.hd-mm-siblings{margin-top:8px;border-left-style:dashed;}
@media(max-width:560px){
  .hd-ped-grid{grid-template-columns:1fr;}
  .hd-mindmap{max-height:min(60vh,460px);}
}

/* HORSE-DATA-RACE-RESULTS-A75: インフォメーションの競走成績。1レース=1カードで、
   多いときは一覧の中だけを縦スクロールする（ページを長くしすぎない）。 */
.hd-race-entries{display:flex;flex-direction:column;gap:12px;max-height:min(72vh,760px);overflow-y:auto;
  padding-right:4px;scrollbar-width:thin;scrollbar-color:#2c2c2c transparent;}
.hd-race-entries::-webkit-scrollbar{width:8px}
.hd-race-entries::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.hd-race-entries::-webkit-scrollbar-track{background:transparent}
.hd-race-entry{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:12px 14px;}
/* INFO-RACE-RESULTS-UI-AI-VIEW-A58: カード上部は「日付・開催R・レース名」を左、
   「着順バッジ・人気・距離・馬場・映像」を右にまとめる。 */
.hd-race-entry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 14px;
  flex-wrap:wrap;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--line);}
.hd-race-entry-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 240px;}
.hd-race-entry-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  font-size:11px;color:var(--text-sub);}
.hd-race-entry-date{font-size:12px;font-weight:700;color:var(--text);}
.hd-race-entry-title{font-size:16px;font-weight:800;color:var(--text);line-height:1.35;overflow-wrap:anywhere;}
.hd-race-entry-side{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px 8px;
  margin-left:auto;}
.hd-race-entry-finish{font-size:16px;font-weight:800;color:var(--text);background:var(--panel);
  padding:3px 12px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;}
.hd-race-entry-finish.is-win{color:var(--gold-soft);border-color:var(--gold-soft);}
.hd-race-entry-finish.is-podium{border-color:var(--text-sub);}
.hd-race-chip{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);white-space:nowrap;}
.hd-race-chip-k{font-size:10px;color:var(--text-sub);}
.hd-race-chip-v{font-size:12px;font-weight:700;color:var(--text);}
.hd-race-video{font-size:12px;font-weight:700;color:var(--gold-soft);text-decoration:none;
  padding:3px 10px;border:1px solid var(--gold-soft);border-radius:999px;white-space:nowrap;}
.hd-race-entry .hd-subgroup{margin-bottom:0;padding:10px 0;border-top:1px dashed var(--line);}
.hd-race-entry .hd-subgroup:first-of-type{padding-top:0;border-top:0;}
.hd-race-entry .hd-subgroup:last-child{padding-bottom:0;}
/* 数値は4列（PC）→3列（iPad）→2〜1列（スマホ）。長文項目だけ横幅いっぱいで読ませる。 */
.hd-race-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 14px;}
.hd-race-wide{grid-column:1/-1;}
.hd-race-wide .hd-v{line-height:1.6;white-space:pre-wrap;}
.hd-race-strong{font-size:14px;font-weight:700;}
/* HORSE-DATA-MARKET-REFINE-A77: 市場データ。値を読みやすくし、URL・備考は横幅を広く取る。 */
.hd-market-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 16px;}
.hd-market-wide .hd-market-grid{grid-template-columns:1fr;}
.hd-market-money{font-size:14px;font-weight:700;}
.hd-market-url{word-break:break-all;}
@media(max-width:1200px){ .hd-race-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:900px){ .hd-race-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:560px){
  .hd-market-grid{grid-template-columns:1fr;}
  .hd-race-entries{max-height:none;overflow:visible;}
  .hd-race-entry-side{justify-content:flex-start;margin-left:0;width:100%;}
  .hd-race-entry-title{font-size:15px;}
}
@media(max-width:430px){ .hd-race-grid{grid-template-columns:1fr;} }

/* HORSE-DATA-EVALUATION-REFINE-A78: 評価情報のBCS・馬体コンディション。
   部位名を左、点数を右に置いて読み取りやすくする（6項目を均等に）。 */
.hd-bcs-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 18px;}
.hd-bcs-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);}
/* HORSE-DATA-BCS-AVERAGE-A79: 見出しの右に評価平均（未確定は評価仮平均） */
.hd-bcs-avg{display:inline-flex;align-items:baseline;gap:7px;padding:3px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel-2);white-space:nowrap;}
.hd-bcs-avg-k{font-size:11px;color:var(--text-sub);}
.hd-bcs-avg-v{font-size:15px;font-weight:800;color:var(--gold-soft);font-variant-numeric:tabular-nums;}
.hd-bcs-part{font-size:12px;color:var(--text-sub);}
.hd-bcs-score{font-size:16px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
@media(max-width:560px){
  .hd-bcs-list{grid-template-columns:1fr;}
}

/* ===== BASE-USAGE-HORSE-LIST-A80: このベースを使用中の馬リスト =====
   既存の馬カード（.hcard / .horse-grid）と同じ部品で並べる。表示だけで編集はしない。 */
.plot-card-usage-count{margin-left:6px;font-weight:800;color:var(--gold-soft);}
.plot-sheet.plot-usage-sheet{width:min(1180px,100%);}
.plot-usage-sheet .plot-cat-modal-body{overflow:auto;gap:0;}
.plot-usage-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px 16px;flex-wrap:wrap;padding:2px 0 10px;margin-bottom:12px;
  border-bottom:1px solid var(--line);background:#171717;}
.plot-usage-title{display:flex;flex-direction:column;gap:2px;min-width:0;}
.plot-usage-base{font-size:15px;font-weight:800;color:var(--text);overflow-wrap:anywhere;}
.plot-usage-controls{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:flex-end;}
.plot-usage-ctl{display:flex;flex-direction:column;gap:3px;min-width:0;}
.plot-usage-ctl span{font-size:11px;color:var(--text-sub);}
.plot-usage-ctl select{min-width:150px;}
.plot-usage-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.plot-usage-card{cursor:pointer;}
.plot-usage-card:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;}
.plot-usage-card .photo{aspect-ratio:1/1;}
.plot-usage-card .body{gap:5px;padding:12px;}
.plot-usage-card .name{font-size:15px;}
.badge.plot-usage-rank{background:var(--panel);color:var(--gold-soft);border:1px solid var(--gold-soft);
  font-size:13px;font-weight:800;}
.plot-usage-horse-id{word-break:break-all;}
.plot-usage-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 8px;margin-top:2px;}
.plot-usage-metric{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);}
.plot-usage-metric.is-active{border-color:var(--gold-soft);}
.plot-usage-metric-k{font-size:10px;color:var(--text-sub);}
.plot-usage-metric-v{font-size:13px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.plot-usage-metric.is-active .plot-usage-metric-v{color:var(--gold-soft);}
.plot-usage-empty{padding:24px 8px;text-align:center;color:var(--text-mute);}
@media(max-width:1200px){ .plot-usage-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:900px){
  .plot-usage-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .plot-usage-controls{width:100%;}
  .plot-usage-ctl{flex:1 1 160px;}
  .plot-usage-ctl select{width:100%;min-width:0;}
}
@media(max-width:560px){
  .plot-usage-grid{grid-template-columns:1fr;}
  .plot-usage-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ===== WEB-LANDSCAPE-GUARD-A85: スマホ・タブレットのブラウザで縦向きのときの案内 =====
   画面全面を覆い、下のUI（サイドバー・三本線・本文）へ触れないようにする。
   横向きに戻れば完全に消える。既存のダーク配色をそのまま使う。 */
.orientation-guard{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px);
  background:var(--bg);color:var(--text);text-align:center;overscroll-behavior:contain;}
.orientation-guard[hidden]{display:none;}
.orientation-guard-inner{max-width:420px;display:flex;flex-direction:column;gap:10px;align-items:center;}
.orientation-guard-icon{font-size:34px;line-height:1;}
.orientation-guard h2{margin:0;font-size:18px;font-weight:800;color:var(--gold-soft);line-height:1.4;}
.orientation-guard p{margin:0;font-size:13px;color:var(--text-sub);line-height:1.6;}
/* 縦向きの間は本体を隠して触れなくする（データはそのまま） */
html.orientation-locked, html.orientation-locked body{overflow:hidden;height:100%;}
html.orientation-locked .app-shell,
html.orientation-locked .mobile-menu-toggle,
html.orientation-locked .mobile-menu-backdrop{visibility:hidden;pointer-events:none;}

/* ===== GLOBAL-THEME-DARK-LIGHT-SYSTEM-A86: 設定画面のテーマ選択（新規部品） ===== */
.settings-theme{margin-top:16px;}
.theme-choice-group{display:flex;gap:8px;flex-wrap:wrap;}
.theme-choice{display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-width:150px;flex:1 1 150px;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);
  cursor:pointer;text-align:left;transition:border-color .12s,background .12s,color .12s;}
.theme-choice:hover{border-color:var(--gold);}
.theme-choice-label{font-size:13px;font-weight:800;}
.theme-choice-note{font-size:11px;color:var(--text-sub);line-height:1.5;}
.theme-choice.is-active{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#1a1a1a;border-color:var(--gold);}
.theme-choice.is-active .theme-choice-note{color:#2a2417;}
@media(max-width:560px){ .theme-choice{min-width:0;flex:1 1 100%;} }

/* ===== GLOBAL-THEME-DARK-LIGHT-SYSTEM-A86: 直書きしていた色をクラスへ移した分 =====
   値は移す前とまったく同じ。ダークの見た目は変わらない。
   （テーマを切り替えるには、要素ごとの style 属性ではなくクラスで指定する必要があるため） */
.ui-bg-0c0c0c{background:#0c0c0c;}
.ui-bg-0d0d0d{background:#0d0d0d;}
.ui-bg-0e0e0e{background:#0e0e0e;}
.ui-bg-101010{background:#101010;}
.ui-bg-121212{background:#121212;}
.ui-bg-141414{background:#141414;}
.ui-bg-151515{background:#151515;}
.ui-bg-161616{background:#161616;}
.ui-bg-171717{background:#171717;}
.ui-bg-181818{background:#181818;}
.ui-bg-1a1a1a{background:#1a1a1a;}
.ui-bg-1c1c1c{background:#1c1c1c;}
.ui-bg-1d1d1d{background:#1d1d1d;}
.ui-fg-fff,.ui-fg-ffffff{color:#fff;}
.ui-fg-eee{color:#eee;}
.ui-fg-ddd{color:#ddd;}
.ui-fg-ccc{color:#ccc;}
.ui-fg-bbb{color:#bbb;}
.ui-fg-aaa{color:#aaa;}
/* 意味のある色（危険・注意・良い・情報）も同じくクラスへ。値は移す前と同じ。 */
.ui-bg-3a1a1a{background:#3a1a1a;}
.ui-bg-3a2c1a{background:#3a2c1a;}
.ui-bg-3a2a1a{background:#3a2a1a;}
.ui-bg-1f3326{background:#1f3326;}
.ui-bg-1a3a23{background:#1a3a23;}
.ui-bg-1f2a3a{background:#1f2a3a;}
.ui-bg-1a2a3a{background:#1a2a3a;}
.ui-bg-1d3158{background:#1d3158;}
.ui-bg-2a2014{background:#2a2014;}
.ui-bg-16202c{background:#16202c;}
.ui-bg-2a2a2a{background:#2a2a2a;}
.ui-fg-fbb1a3{color:#fbb1a3;}
.ui-fg-fbd99a{color:#fbd99a;}
.ui-fg-bdf5cf{color:#bdf5cf;}
.ui-fg-9ec8ff{color:#9ec8ff;}
.ui-fg-9fd4ff{color:#9fd4ff;}
.ui-fg-ffe7a3{color:#ffe7a3;}
.ui-fg-e0c14a{color:#e0c14a;}
.ui-fg-888{color:#888;}
.ui-fg-666{color:#666;}

/* ===== DASHBOARD-TASK-LOG-FILTER-A87: ダッシュボードの「タスク」と「ログ」 ===== */
.dash-task-head{margin-top:18px;}
.dash-task-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.dash-sub-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:12px;}
/* タスクカードは全体が押せる。押せることが分かるよう hover / focus を出す。 */
.dash-task-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  cursor:pointer;font:inherit;color:var(--text);transition:border-color .12s,transform .12s,box-shadow .12s;}
.dash-task-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.dash-task-card:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;}
.dash-task-card.is-warn{border-color:rgba(192,138,90,.55);}
.dash-task-title{font-size:11px;color:var(--text-sub);}
.dash-task-value{font-size:24px;font-weight:800;color:var(--gold-soft);line-height:1.1;margin:2px 0 4px;}
.dash-task-card.is-warn .dash-task-value{color:var(--warn);}
.dash-task-desc{font-size:11px;color:var(--text-mute);line-height:1.5;min-height:30px;}
.dash-task-cta{margin-top:6px;font-size:11.5px;font-weight:700;color:var(--gold-soft);}
.dash-info-card .dash-info-value{font-size:24px;font-weight:800;margin:2px 0 4px;color:var(--gold-soft);}
.dash-info-card .dash-info-value.is-warn{color:var(--warn);}
.dash-info-card.is-warn{border-color:rgba(192,138,90,.55);}
.dash-info-desc{font-size:11px;margin-bottom:8px;min-height:30px;}
/* ログカード（登録馬数の右） */
.dash-log-card{grid-column:span 2;cursor:pointer;transition:border-color .12s;}
.dash-log-card:hover{border-color:var(--gold);}
.dash-log-card:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;}
.dash-log-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.dash-log-title{margin:0;font-size:14px;}
.dash-log-open{pointer-events:none;}
.dash-log-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.dash-log-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px;line-height:1.5;}
.dash-log-at{font-size:11px;color:var(--text-mute);font-variant-numeric:tabular-nums;flex:0 0 auto;}
.badge.dash-log-kind{font-size:10px;padding:1px 7px;flex:0 0 auto;}
.dash-log-msg{color:var(--text);min-width:0;overflow-wrap:anywhere;}
.dash-log-who{font-size:11px;color:var(--text-sub);overflow-wrap:anywhere;}
.dash-log-empty{padding:6px 0;}
@media(max-width:900px){
  .dash-log-card{grid-column:span 2;}
}

/* ===== CONTROL-BACKUP-UI-A88: 設定のバックアップ欄と確認画面 ===== */
.settings-backup{margin-top:16px;}
#backup-status.is-error{color:var(--risk);}
#backup-status.is-done{color:var(--good);}
.ai-register-sheet.backup-sheet{width:min(520px,96vw);}
.backup-lead{font-size:13px;line-height:1.7;margin-bottom:12px;}
.backup-facts{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.backup-fact{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);}
.backup-fact-k{font-size:12px;color:var(--text-sub);}
.backup-fact-v{font-size:18px;font-weight:800;color:var(--gold-soft);font-variant-numeric:tabular-nums;}
.backup-note{font-size:11px;}
.backup-progress{margin-top:8px;min-height:18px;}
.backup-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.backup-actions .btn{flex:1 1 auto;min-width:120px;}
.ai-register-body .is-error{color:var(--risk);}
@media(max-width:560px){ .backup-fact{flex-direction:column;align-items:flex-start;gap:2px;} }

/* ===== CONTROL-FULL-RESTORE-UI-A89: バックアップからの復元 ===== */
.restore-warn{font-size:12px;line-height:1.7;margin:10px 0 4px;padding:8px 10px;border-radius:8px;
  border:1px solid rgba(192,138,90,.45);background:rgba(192,138,90,.10);color:var(--text);}
.restore-note{font-size:11px;margin-top:4px;}
.restore-error{padding:10px 12px;border:1px solid rgba(181,107,107,.5);border-radius:10px;
  background:rgba(181,107,107,.10);margin-bottom:10px;}
.restore-error-title{font-size:13px;font-weight:800;color:var(--risk);margin-bottom:4px;}
.restore-progress{margin-top:10px;min-height:18px;}
.restore-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.restore-step{font-size:12px;color:var(--text-mute);padding-left:18px;position:relative;line-height:1.6;}
.restore-step::before{content:"○";position:absolute;left:0;top:0;font-size:10px;}
.restore-step.is-now{color:var(--gold-soft);font-weight:700;}
.restore-step.is-now::before{content:"●";}
.restore-step.is-done{color:var(--text-sub);}
.restore-step.is-done::before{content:"✓";color:var(--good);}
.restore-step-detail{margin-top:4px;font-variant-numeric:tabular-nums;}