:root{--male:#d6ecf8;--female:#fadde0;--bd:#9aa0a6;--name:#1747b8;--crossed:#d40000;--accent:#2b5fb8;}
*{box-sizing:border-box;}
body{margin:0;background:#fff;color:#1c1c1c;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;-webkit-text-size-adjust:100%;}
.wrap{max-width:1060px;margin:0 auto;padding:12px 8px 40px;}
.h-bar{display:flex;align-items:center;gap:9px;border:1px solid #dde3e9;border-radius:5px;background:#f2f6fa;padding:11px 13px;margin:20px 0 6px;}
.h-bar:first-child{margin-top:0;}
.h-bar::before{content:"";width:6px;height:23px;background:var(--accent);border-radius:2px;}
.h-bar h1,.h-bar h2{margin:0;font-size:16px;font-weight:800;}
.title{font-size:19px;font-weight:800;margin:0 0 3px;}
.sub{font-size:12.5px;color:#555;margin:0 3px 9px;line-height:1.7;}
.legend{border:1px solid #e2e2dc;border-radius:6px;background:#fbfbf8;padding:8px 11px;margin:0 0 9px;font-size:12px;display:flex;flex-wrap:wrap;gap:5px 9px;align-items:center;color:#4a5058;}
table.ped{border-collapse:collapse;width:100%;table-layout:fixed;border:2px solid var(--bd);}
.ped td{border:1px solid var(--bd);padding:4px 5px;vertical-align:middle;line-height:1.3;word-break:break-word;overflow-wrap:anywhere;}
.ped col.c1{width:18%;}.ped col.c2{width:19%;}.ped col.c3{width:20%;}.ped col.c4{width:22%;}.ped col.c5{width:21%;}
td.m{background:var(--male);}td.f{background:var(--female);}
.nm{color:var(--name);font-weight:700;display:block;font-size:12.5px;}
.nm.x{color:var(--crossed);}
.mt{display:block;color:#555;font-size:9.5px;}
.pc{display:inline-block;background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.2);border-radius:2px;font-size:8.5px;font-weight:800;padding:0 3px;color:#111;}
.tags{display:block;margin-top:1px;}
.tg{display:inline-block;padding:0 4px;border-radius:3px;margin:1px 2px 0 0;font-size:9px;font-weight:700;color:#222;border:1px solid rgba(0,0,0,.15);line-height:1.55;white-space:nowrap;}
.t-sp{background:#ffe94d;}.t-soko{background:#ffa726;}.t-pow{background:#b3ecf5;}.t-dirt{background:#e6c9f5;}
.t-early{background:#c8e6a0;}.t-short{background:#ff9a62;}.t-long{background:#a8c8ec;}.t-tough{background:#ffd0d8;}
.t-temper{background:#d98fe0;}.t-mare{background:#d9c6f2;}

.crossbox{text-align:center;margin:15px 0 6px;}
.crossbox .cap{font-size:15px;margin-bottom:8px;}
.crossbox .row{font-size:15px;margin:4px 0;}
.crossbox .hn{color:var(--crossed);font-weight:800;}
.crossbox .pcv{font-weight:700;}
table.grade{border-collapse:collapse;width:100%;border:1px solid #ccd2d8;}
.grade td{border:1px solid #ccd2d8;padding:8px 9px;font-size:13.5px;}
.grade td.k{background:#eef3f8;font-weight:700;width:25%;}
.grade td.sv{font-size:13px;color:#333;}
.grade td.g{width:11%;text-align:center;}
.grade td.mm{width:24%;font-size:12.5px;color:#333;}
.grade td.v{width:14%;text-align:right;color:#666;font-size:12px;font-weight:700;}
.grade td.rl{width:12%;text-align:center;font-weight:800;font-size:12.5px;}
.rl.hi{color:#1a7a3c;}.rl.mid{color:#c07000;}.rl.lo{color:#b03030;}
.hd td{background:#e3ebf4;font-weight:700;font-size:12px;text-align:center;}
.hd td.k{text-align:left;}
.L{font-size:20px;font-weight:900;}
.rA{color:#c0392b;}.rB{color:#e08a12;}.rC{color:#3f78c4;}
.acc{border-left:4px solid #1a7a3c;background:#f2faf4;padding:9px 12px;margin:10px 0 0;font-size:12.5px;color:#20422c;line-height:1.75;}
.note{margin-top:10px;font-size:12.5px;color:#555;line-height:1.8;padding:0 3px;}

.app-title{font-size:20px;font-weight:800;margin:0 0 4px;}
.lead{font-size:13.5px;color:#4a5058;margin:0 3px 10px;line-height:1.75;}
.badge{display:inline-block;background:#2b5fb8;color:#fff;border-radius:3px;padding:1px 8px;font-size:11px;font-weight:700;}
.back{font-size:12px;margin:0 0 8px;}
.back a,.reg summary{color:#2b5fb8;text-decoration:none;cursor:pointer;}
.tabs{display:flex;gap:6px;margin-bottom:10px;}
.tab{flex:1;padding:10px 4px;font-size:12.5px;font-weight:700;border:1px solid #ccd2d8;background:#f7f9fb;color:#555;border-radius:5px;cursor:pointer;}
.tab.on{background:#2b5fb8;color:#fff;border-color:#2b5fb8;}
.panel{display:none;border:1px solid #dde3e9;border-radius:6px;padding:14px;background:#fafcfe;}
.panel.on{display:block;}
.panel label{display:block;font-size:12px;font-weight:700;color:#445;margin:8px 0 4px;}
.panel input,.panel textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccd2d8;border-radius:5px;font-family:inherit;}
.panel button,.save{width:100%;margin-top:14px;padding:14px;font-size:15px;font-weight:800;color:#fff;background:#2b5fb8;border:none;border-radius:6px;cursor:pointer;}
.save{max-width:1060px;margin:16px auto;display:block;}
.hint{font-size:12.5px;color:#5a6470;margin:8px 0 0;line-height:1.7;}
.warn{border-left:4px solid #d4a017;background:#fffaf0;padding:10px 13px;margin:0 0 10px;font-size:13px;color:#5a4a20;line-height:1.75;}
.err{border-left:4px solid #c0392b;background:#fdf0f0;padding:12px;font-size:13px;color:#7a2020;}
.reg{margin-top:16px;font-size:12px;}
.small{font-size:12.5px;color:#5a6470;line-height:1.8;}
.rd{color:#d40000;}
td.ch{background:#e3ebf4;font-size:10.5px;font-weight:700;text-align:center;padding:6px 3px;line-height:1.3;}
td.cg{text-align:center;}
.L2{font-size:17px;font-weight:900;}
.shot{width:100%;max-width:600px;display:block;margin:14px auto;border:1px solid #ccc;}

/* --- 2枚構成 --- */
.view{display:none;}
.view.on{display:block;}
.sheet{background:#fff;padding:10px 8px 14px;border:1px solid #e2e6ea;border-radius:6px;}
.sheet-title{font-size:15px;font-weight:800;margin:0 0 8px;padding-left:8px;border-left:5px solid #2b5fb8;}
.shot-box{position:fixed;inset:0;z-index:100;background:rgba(20,20,20,.93);display:flex;flex-direction:column;align-items:center;padding:14px 10px;overflow:auto;}
.shot-box p{color:#fff;font-size:13px;font-weight:700;text-align:center;margin:0 0 10px;line-height:1.6;}
.shot-box small{display:block;font-weight:400;font-size:11px;color:#ccc;margin-top:2px;}
.shot-box img{width:100%;max-width:620px;height:auto;border-radius:6px;background:#fff;}
.shot-box button{margin:12px 0 4px;border:1px solid #888;border-radius:999px;background:#333;color:#fff;font-size:13px;padding:9px 24px;cursor:pointer;width:auto;}
.shot-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 4px;}
.shot-actions button{margin:0;}
.shot-actions button[data-act="share"]{background:#00A34A;border-color:#00A34A;font-weight:800;}
.shot-actions button[data-act="copy"]{background:#2b5fb8;border-color:#2b5fb8;font-weight:700;}


/* --- 血統表を横長に --- */
/* 横幅を広く取り、セル内は1〜2行に詰めて縦を圧縮する */
.ped-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #cfd6dd;border-radius:4px;}
.ped-scroll .ped{min-width:1320px;}
.ped-scroll .ped td{padding:3px 8px;line-height:1.25;}
.ped-scroll .nm{display:inline;font-size:13.5px;margin-right:6px;}
.ped-scroll .mt{display:inline;font-size:10.5px;color:#666;margin-right:5px;}
.ped-scroll .pc{display:inline;font-size:10px;background:rgba(255,255,255,.8);}
.ped-scroll .tags{display:inline;margin-left:4px;}
.ped-scroll .tg{font-size:10px;padding:0 4px;margin:0 2px 0 0;}
.scroll-hint{font-size:11px;color:#2b5fb8;margin:0 0 5px;font-weight:700;}
@media(min-width:1200px){.scroll-hint{display:none;}}
.wrap{max-width:1240px;}


/* --- 評価表・比較表も横長に（折り返しをなくす） --- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #cfd6dd;border-radius:4px;}
.tbl-scroll .grade{border:none;}
.tbl-scroll .grade td{white-space:nowrap;}
.tbl-scroll .grade.profile{min-width:760px;}
.tbl-scroll .grade.profile td.k{width:130px;}
.tbl-scroll .grade.profile td.sv{white-space:nowrap;}
.tbl-scroll .grade.influence{min-width:720px;}
.tbl-scroll .grade.influence td.k{width:170px;}
.tbl-scroll .grade.influence td.mm{width:180px;}
.tbl-scroll .grade.compare{min-width:640px;}


/* --- 推定タグは点線で区別 --- */
.tg.est{border-style:dashed;border-color:rgba(0,0,0,.45);}

/* --- 弱い証拠（牝系・海外資料由来 = 重み50%）は薄字+点枠で区別 --- */
.tg.wk{border-style:dotted;border-color:rgba(0,0,0,.5);opacity:.72;}

/* --- スマホの横スクロール操作性（2026-08-08） ---
   スクロールバーを常時見えるスタイルにし、「スクロールできる」ことを
   視覚的に伝える（モバイルは既定でバーが非表示になり気づけない） */
.ped-scroll::-webkit-scrollbar,.tbl-scroll::-webkit-scrollbar{height:8px;}
.ped-scroll::-webkit-scrollbar-track,.tbl-scroll::-webkit-scrollbar-track{
  background:#eef1f5;border-radius:4px;}
.ped-scroll::-webkit-scrollbar-thumb,.tbl-scroll::-webkit-scrollbar-thumb{
  background:#8fa8d0;border-radius:4px;}
.ped-scroll,.tbl-scroll{scrollbar-width:thin;scrollbar-color:#8fa8d0 #eef1f5;
  overscroll-behavior-x:contain;}

/* --- 小画面の操作性（〜480px） --- */
@media(max-width:480px){
  .wrap{padding:10px 6px 34px;}
  .tab{padding:12px 4px;font-size:13px;}
  .chip-name{padding:8px 12px;font-size:13px;}
  .chip-act{padding:7px 10px;font-size:11.5px;}
  .next-actions a{min-width:100%;}
  .panel input,.panel textarea{font-size:16px;}  /* iOSのフォーカス時自動ズーム防止 */
  .filter{font-size:16px;}
  .scroll-hint{font-size:12.5px;}
}
.info{border-left:4px solid #2b7a4b;background:#f2faf5;padding:10px 13px;margin:0 0 10px;font-size:13px;color:#20422c;line-height:1.75;}


/* --- 血統が未登録の枝 --- */
.ped td.na{background:#f4f4f2;}
.nm-na{color:#aaa;font-size:11px;}

.grade .r-{color:#999;font-size:20px;font-weight:900;}

/* --- ワンタップ操作チップ（入力ハブ） --- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;}
.chip{display:flex;align-items:center;gap:4px;border:1px solid #ccd2d8;border-radius:999px;background:#f7f9fb;padding:4px 6px 4px 4px;max-width:100%;}
.chip-name{border:1px solid #b9c6e0;background:#fff;color:#1747b8;font-weight:700;font-size:12.5px;border-radius:999px;padding:7px 11px;cursor:pointer;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chip-meta{font-size:10px;color:#888;white-space:nowrap;}
.chip-act{border:1px solid #ccd2d8;background:#eef3f8;color:#445;font-size:10.5px;font-weight:700;border-radius:999px;padding:6px 9px;cursor:pointer;white-space:nowrap;}
.chip-act:hover,.chip-name:hover{background:#dfe9f8;}
.filter{width:100%;padding:9px;font-size:14px;border:1px solid #ccd2d8;border-radius:5px;margin:6px 0;font-family:inherit;}

/* --- 結果ページの次アクション導線 --- */
.next-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;}
.next-actions a{flex:1;min-width:160px;display:block;text-align:center;padding:12px 8px;font-size:13px;font-weight:800;color:#fff;background:#2b5fb8;border-radius:6px;text-decoration:none;}
.next-actions a:hover{background:#244e99;}

/* --- 解説（参考）の保存・共有アクション --- */
.ai-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.ai-actions button{flex:1;min-width:150px;padding:11px 8px;font-size:13px;font-weight:700;
  color:#fff;background:#2b5fb8;border:none;border-radius:6px;cursor:pointer;}
.ai-actions button:hover{background:#244e99;}
#ai-share{background:#00A34A;}
#ai-share:hover{background:#008a3e;}

/* --- 評価ハイライト（強く伝える / 伝えにくい） --- */
#eval-highlight{border-left:4px solid #7a4ecb;background:#f7f3fd;color:#3a2a5a;font-size:13px;}
#eval-highlight b{color:#1a7a3c;}
#eval-highlight .weak{color:#777;}

/* --- 説明文の手順リスト（自動調査セクション等 — 可読性改善 2026-08-07） --- */
.steps-intro{font-size:14px;color:#333;margin:8px 3px 6px;line-height:1.8;}
ol.steps{margin:4px 0 10px;padding-left:0;list-style:none;counter-reset:step;}
ol.steps li{position:relative;font-size:13.5px;color:#333;line-height:1.85;
  border:1px solid #dde3e9;border-radius:6px;background:#f7fafd;
  padding:10px 12px 10px 44px;margin:8px 0;counter-increment:step;}
ol.steps li::before{content:counter(step);position:absolute;left:12px;top:11px;
  width:22px;height:22px;border-radius:50%;background:#2b5fb8;color:#fff;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;}
ol.steps li b{font-size:14px;}
.steps-note{font-size:13px;color:#444;line-height:1.85;margin:6px 3px 0;}
.steps-note p{margin:4px 0;}
.green-note{color:#0a8f4d;}