/* ══════════════════════════════════════════════════════════════
   RANMA 欄間 UI  v6.0
   江戸至高美学：墨染 × 金泥 × 青海波 × 蒔絵
   "光が欄間を透り、金泥が静かに輝く"
   WordPress 5.x〜6.x 完全互換 | 末尾追加のみ不要・全面刷新版
   2026-02-23
══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Zen+Antique+Soft&family=Zen+Old+Mincho:wght@400;700;900&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Design Tokens
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-app {
  /* 墨染 — 青みを含む深い黒 */
  --m0:#010305; --m1:#020508; --m2:#03070c; --m3:#050c14;
  --m4:#081018; --m5:#0c1620; --m6:#111e2c;

  /* 金泥 — 沈んだ重い金 → 輝く金泥 */
  --k1:#2a1c06; --k2:#4e3510; --k3:#7a5218; --k4:#a87228;
  --k5:#c89038; --k6:#dda844; --k7:#edc054; --k8:#f8d870;
  --k9:#ffe898;

  /* 白磁 — 冷たい白 */
  --s1:#c8d0d8; --s2:#d8e0e8; --s3:#e8edf2; --s4:#f2f6f8;

  /* 朱漆 */
  --r1:#3c0800; --r2:#780e04; --r3:#b01808; --r4:#d02810; --r5:#f04020;

  /* 藍鉄 */
  --b1:#040c1c; --b2:#081828; --b3:#0e2848; --b4:#183878;

  /* テキスト */
  --tx0:#f6f0e6; --tx1:#e6dccb; --tx2:#c6b89e; --tx3:#96886e;
  --tx4:#685c46; --tx5:#3e3428;

  /* ボーダー */
  --bd0:rgba(221,168,68,.07); --bd1:rgba(221,168,68,.16);
  --bd2:rgba(221,168,68,.32); --bd3:rgba(221,168,68,.56);
  --bd-s:rgba(200,208,216,.12); --bd-r:rgba(208,40,16,.28);

  /* サーフェス */
  --sf0:rgba(221,168,68,.04); --sf1:rgba(221,168,68,.09);
  --sf2:rgba(221,168,68,.16); --sf-s:rgba(200,208,216,.06);

  /* グラデ定義 */
  --gk:linear-gradient(135deg,var(--k4),var(--k7) 50%,var(--k5));
  --gk2:linear-gradient(90deg,var(--k3),var(--k7),var(--k3));
  --gs:linear-gradient(135deg,var(--s1),var(--s4) 50%,var(--s2));

  /* フォント */
  --fm:'Zen Old Mincho','YuMincho','Hiragino Mincho ProN',serif;
  --fa:'Zen Antique Soft',serif;
  --fs:'DM Sans','Noto Sans JP',sans-serif;

  /* モーション */
  --ez:cubic-bezier(.16,1,.3,1);
  --ez2:cubic-bezier(.22,1,.36,1);

  /* 角丸 */
  --r1:3px; --r2:6px; --r3:10px; --r4:15px; --r5:20px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   App Shell — 墨染背景 + 青海波
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-app {
  background: var(--m0);
  border: 1px solid var(--bd1);
  border-radius: var(--r5);
  max-width: 960px;
  margin: 10px auto;
  font-family: var(--fs);
  color: var(--tx1);
  overflow: visible;
  position: relative;
  clip-path: inset(0 round var(--r5));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.9),
    0 0 0 2px rgba(221,168,68,.03),
    0 60px 140px rgba(0,0,0,.98),
    0 20px 60px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(221,168,68,.06),
    inset 0 -1px 0 rgba(0,0,0,.7);
}

/* 青海波SVG背景 */
.mg-app::before {
  content:'';
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='23'%3E%3Cellipse cx='20' cy='23' rx='20' ry='12' fill='none' stroke='rgba(221%2C168%2C68%2C0.22)' stroke-width='1.0'/%3E%3Cellipse cx='0' cy='23' rx='20' ry='12' fill='none' stroke='rgba(221%2C168%2C68%2C0.22)' stroke-width='1.0'/%3E%3Cellipse cx='40' cy='23' rx='20' ry='12' fill='none' stroke='rgba(221%2C168%2C68%2C0.22)' stroke-width='1.0'/%3E%3Cellipse cx='10' cy='11.5' rx='20' ry='12' fill='none' stroke='rgba(221%2C168%2C68%2C0.12)' stroke-width='0.7'/%3E%3Cellipse cx='30' cy='11.5' rx='20' ry='12' fill='none' stroke='rgba(221%2C168%2C68%2C0.12)' stroke-width='0.7'/%3E%3C/svg%3E");
  background-size:40px 23px;
  opacity:1;
  pointer-events:none;
  z-index:0;
}

/* 刀身の光条 */
.mg-app::after {
  content:'';
  position:absolute;
  top:-30%; left:-15%; width:50%; height:200%;
  background:linear-gradient(110deg,
    transparent 0%,
    rgba(221,168,68,.06) 42%,
    rgba(248,216,112,.12) 50%,
    rgba(221,168,68,.06) 58%,
    transparent 100%);
  pointer-events:none; z-index:0;
  animation:katanaGleam 10s ease-in-out infinite;
}
@keyframes katanaGleam {
  0%,100%{transform:translateX(-5%) skewX(-8deg);opacity:.5;}
  50%{transform:translateX(220%) skewX(-8deg);opacity:1;}
}

.mg-app > * { position:relative; z-index:1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ヘッダー — 欄間の透かし彫り
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-header {
  display:flex; align-items:center; gap:14px;
  padding:0 22px; height:72px;
  border-bottom:1px solid var(--bd1);
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(221,168,68,.045) 0%,transparent 100%);
}

/* 上辺の光線 */
.mg-header::before {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(221,168,68,.0) 8%,
    rgba(221,168,68,.55) 28%,
    rgba(248,216,112,.9) 50%,
    rgba(221,168,68,.55) 72%,
    rgba(221,168,68,.0) 92%,
    transparent 100%);
  z-index:2;
}

/* 透かし文字「伝」 */
.mg-header::after {
  content:'伝';
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-family:var(--fa); font-size:5.5rem; font-weight:400;
  color:transparent;
  -webkit-text-stroke:1px rgba(221,168,68,.03);
  line-height:1; pointer-events:none; z-index:0;
}

/* アイコン — 家紋円環 */
.mg-header-icon {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; position:relative; flex-shrink:0;
  background:radial-gradient(circle,var(--m3) 60%,var(--m2));
  border:1px solid var(--bd1);
  box-shadow:0 0 0 3px rgba(221,168,68,.06), inset 0 1px 0 rgba(255,255,255,.04);
}
.mg-header-icon::before {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(221,168,68,.15);
  animation:monjinPulse 4s ease-in-out infinite;
}
@keyframes monjinPulse {
  0%,100%{opacity:.4;transform:scale(1);}
  50%{opacity:.9;transform:scale(1.06);}
}

.mg-title {
  font-family:var(--fm); font-size:1.12rem; font-weight:700;
  letter-spacing:.2em; line-height:1.2;
  background:var(--gk);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.mg-subtitle {
  font-size:.78rem; color:var(--tx4); letter-spacing:.12em; margin-top:2px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   タブナビ — 木格子の切り込み
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-tab-nav {
  display:flex; background:var(--m1);
  border-bottom:1px solid var(--bd1);
  padding:0 8px; gap:2px;
  overflow-x:auto; scrollbar-width:none;
  position:relative;
}
.mg-tab-nav::-webkit-scrollbar{display:none;}

/* 格子模様の底線 */
.mg-tab-nav::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:1px;
  background:var(--gk2); opacity:.5;
  pointer-events:none;
}

.mg-tab-btn {
  flex:1; min-width:74px;
  padding:13px 8px 11px;
  background:none; border:none;
  border-bottom:2px solid transparent;
  color:var(--tx4); font-family:var(--fs);
  font-size:.88rem; font-weight:600;
  letter-spacing:.07em; cursor:pointer;
  white-space:nowrap; text-align:center;
  transition:all .25s var(--ez);
  position:relative;
}
.mg-tab-btn::before {
  content:''; position:absolute;
  inset:5px 3px; border-radius:var(--r2);
  background:var(--sf0); opacity:0;
  transition:opacity .2s;
}
.mg-tab-btn:hover { color:var(--tx2); }
.mg-tab-btn:hover::before { opacity:1; }

.mg-tab-btn.mg-tab-active {
  color:var(--k8);
  border-bottom-color:var(--k7);
}
.mg-tab-btn.mg-tab-active::before { opacity:1; background:var(--sf1); }

/* 炎のような輝き */
.mg-tab-btn.mg-tab-active::after {
  content:''; position:absolute;
  bottom:-1px; left:15%; right:15%; height:2px;
  background:linear-gradient(90deg,transparent,var(--k8),transparent);
  filter:blur(3px);
  animation:tabFlame 2.5s ease-in-out infinite;
}
@keyframes tabFlame {
  0%,100%{opacity:.6;transform:scaleX(.8);}
  50%{opacity:1;transform:scaleX(1);}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   タブコンテンツ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-tab-content {
  display:none; padding:20px;
  animation:inkReveal .35s var(--ez) both;
}
.mg-tab-content-active { display:block; }

@keyframes inkReveal {
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   父母グリッド
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-parents-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; margin-bottom:14px;
}
@media(max-width:600px){.mg-parents-grid{grid-template-columns:1fr;}}

/* 親カード — 蒔絵額縁 */
.mg-parent-card {
  background:linear-gradient(160deg,rgba(221,168,68,.03) 0%,transparent 50%),var(--m2);
  border-radius:var(--r4); overflow:hidden;
  border:1px solid var(--bd0);
  box-shadow:
    inset 0 1px 0 rgba(221,168,68,.05),
    0 6px 28px rgba(0,0,0,.65);
  transition:border-color .3s, box-shadow .3s;
}
.mg-parent-card:hover {
  border-color:var(--bd1);
  box-shadow:inset 0 1px 0 rgba(221,168,68,.08),0 10px 40px rgba(0,0,0,.75);
}

/* 父 — 白磁 */
.mg-father { border-top:2px solid rgba(200,208,216,.4); }
.mg-father .mg-parent-header {
  background:linear-gradient(135deg,rgba(200,208,216,.10) 0%,transparent 60%);
  border-bottom-color:rgba(200,208,216,.08);
}
.mg-father .mg-parent-icon { color:var(--s2); }

/* 母 — 朱漆 */
.mg-mother { border-top:2px solid rgba(208,40,16,.5); }
.mg-mother .mg-parent-header {
  background:linear-gradient(135deg,rgba(208,40,16,.12) 0%,transparent 60%);
  border-bottom-color:rgba(208,40,16,.10);
}
.mg-mother .mg-parent-icon { color:var(--r4); }

.mg-parent-header {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px 10px;
  border-bottom:1px solid var(--bd0);
}
.mg-parent-icon {
  font-size:1.45rem; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--m3);
  border:1px solid var(--bd0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.5);
}
.mg-parent-label {
  font-family:var(--fm); font-size:.77rem; font-weight:700;
  color:var(--tx0); letter-spacing:.14em;
}

.mg-traits-container { padding:11px 13px; display:flex; flex-direction:column; gap:10px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   形質グループ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-trait-group {
  background:var(--m3); border:1px solid var(--bd0);
  border-radius:var(--r3); overflow:hidden;
  transition:border-color .2s;
}
.mg-trait-group:hover { border-color:var(--bd1); }

.mg-trait-group-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 11px; cursor:pointer;
  background:linear-gradient(90deg,rgba(221,168,68,.05),transparent);
  border-bottom:1px solid var(--bd0);
}
.mg-trait-group-title {
  font-size:.67rem; font-weight:600; color:var(--tx2);
  letter-spacing:.16em; text-transform:uppercase;
}
.mg-trait-group-arrow {
  font-size:.6rem; color:var(--tx4);
  transition:transform .25s var(--ez);
}
.mg-trait-group.open .mg-trait-group-arrow { transform:rotate(180deg); }

.mg-trait-options { padding:9px 11px; display:flex; flex-direction:column; gap:4px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   チェックボックス — 印章
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-trait-option {
  display:flex; align-items:center; gap:8px;
  padding:5px 7px; border-radius:var(--r2);
  cursor:pointer; transition:background .14s; position:relative;
}
.mg-trait-option:hover { background:var(--sf0); }

.mg-trait-option input {
  appearance:none; -webkit-appearance:none;
  width:15px; height:15px;
  border:1px solid var(--bd1); border-radius:3px;
  background:var(--m4); cursor:pointer; flex-shrink:0;
  position:relative; transition:all .18s var(--ez);
}
.mg-trait-option input[type="radio"] { border-radius:50%; }
.mg-trait-option input:checked {
  background:linear-gradient(135deg,var(--k4),var(--k7));
  border-color:var(--k6);
  box-shadow:0 0 10px rgba(221,168,68,.4), inset 0 1px 0 rgba(255,255,255,.18);
  animation:stampOn .2s var(--ez);
}
@keyframes stampOn {
  0%{transform:scale(1.3);} 60%{transform:scale(.9);} 100%{transform:scale(1);}
}
.mg-trait-option input:checked::after {
  content:''; position:absolute; inset:3px;
  background:var(--m0); border-radius:1px;
  clip-path:polygon(14% 44%,0% 65%,50% 100%,100% 0%,80% 0%,43% 62%);
}
.mg-trait-option input[type="radio"]:checked::after {
  border-radius:50%; clip-path:none; inset:4px;
}

.mg-trait-label {
  font-size:.75rem; color:var(--tx2); flex:1; transition:color .14s;
}
.mg-trait-option:hover .mg-trait-label { color:var(--tx1); }
.mg-trait-option input:checked + .mg-trait-label { color:var(--k8); font-weight:500; }

.mg-prec {
  font-size:.57rem; padding:1px 5px; border-radius:8px;
  font-weight:700; letter-spacing:.05em; flex-shrink:0;
}
.mg-prec-h { background:rgba(16,185,129,.1);  color:#6ee7b7; border:1px solid rgba(16,185,129,.18); }
.mg-prec-m { background:rgba(245,158,11,.09); color:#fcd34d; border:1px solid rgba(245,158,11,.18); }
.mg-prec-l { background:rgba(239,68,68,.09);  color:#fca5a5; border:1px solid rgba(239,68,68,.18); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   計算ボタン — 印籠の金具
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-calc-row {
  display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;
}

/* メインボタン */
.mg-btn-calc {
  flex:1; min-width:150px; padding:14px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 40%),
    linear-gradient(135deg,var(--k2) 0%,var(--k5) 30%,var(--k7) 55%,var(--k5) 80%,var(--k3) 100%);
  border:1px solid var(--k6);
  border-radius:var(--r3); color:var(--m0);
  font-family:var(--fm); font-size:.88rem; font-weight:700;
  letter-spacing:.22em; cursor:pointer; position:relative; overflow:hidden;
  text-shadow:0 1px 0 rgba(255,255,255,.22);
  box-shadow:
    0 1px 0 rgba(0,0,0,.7),
    0 2px 0 rgba(0,0,0,.5),
    0 6px 24px rgba(168,114,40,.25),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.15);
  transition:all .3s var(--ez);
}
/* 蒔絵の光沢スキャン */
.mg-btn-calc::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,
    transparent 0%,rgba(255,255,255,.0) 35%,
    rgba(255,255,255,.28) 50%,rgba(255,255,255,.0) 65%,transparent 100%);
  transform:translateX(-100%); transition:transform .55s var(--ez);
}
.mg-btn-calc:hover::before { transform:translateX(100%); }
.mg-btn-calc:hover {
  transform:translateY(-2px);
  box-shadow:0 2px 0 rgba(0,0,0,.5),0 10px 36px rgba(221,168,68,.38),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.mg-btn-calc:active {
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(0,0,0,.6),0 2px 12px rgba(168,114,40,.15),
    inset 0 2px 4px rgba(0,0,0,.2);
}

/* リセットボタン */
.mg-btn-reset {
  padding:14px 16px; background:var(--m3);
  border:1px solid var(--bd1); border-radius:var(--r3);
  color:var(--tx3); font-family:var(--fs); font-size:.78rem;
  letter-spacing:.1em; cursor:pointer;
  transition:all .2s var(--ez);
}
.mg-btn-reset:hover { background:var(--m4); border-color:var(--bd2); color:var(--tx2); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   結果エリア — 巻物
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-result {
  background:var(--m1); border:1px solid var(--bd1);
  border-radius:var(--r4); padding:20px;
  animation:scrollUnfurl .45s var(--ez) both;
  box-shadow:
    inset 0 1px 0 rgba(221,168,68,.07),
    0 0 0 1px rgba(0,0,0,.5),
    0 24px 64px rgba(0,0,0,.65);
  position:relative; overflow:hidden;
}
@keyframes scrollUnfurl {
  from{opacity:0;transform:scaleY(.92) translateY(12px);transform-origin:top;}
  to{opacity:1;transform:scaleY(1) translateY(0);}
}

/* 巻物の上下の飾り帯 */
.mg-result::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent 5%,var(--k5) 30%,var(--k8) 50%,var(--k5) 70%,transparent 95%);
}
.mg-result::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent 20%,rgba(221,168,68,.3) 50%,transparent 80%);
}

.mg-result-title {
  font-family:var(--fm); font-size:.82rem; font-weight:700;
  color:var(--k8); letter-spacing:.2em; margin-bottom:14px;
  padding-bottom:10px; border-bottom:1px solid var(--bd1);
  display:flex; align-items:center; gap:8px;
}

/* 形質結果カード */
.mg-result-item {
  background:var(--m2); border:1px solid var(--bd0);
  border-radius:var(--r3); padding:13px 15px; margin-bottom:9px;
  transition:border-color .2s, box-shadow .2s;
}
.mg-result-item:hover { border-color:var(--bd1); box-shadow:0 4px 16px rgba(0,0,0,.4); }

.mg-result-item-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.mg-result-trait-name {
  font-family:var(--fm); font-size:.78rem; font-weight:700;
  color:var(--tx0); letter-spacing:.08em;
}
.mg-result-pct {
  font-family:var(--fs); font-size:1.1rem; font-weight:700;
  background:var(--gk); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}

/* バー — 刀身の反射光 */
.mg-result-bar-wrap {
  height:4px; background:var(--m5); border-radius:2px; overflow:hidden; margin-bottom:7px;
}
.mg-result-bar {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--k4),var(--k7) 60%,var(--s2));
  box-shadow:0 0 10px rgba(221,168,68,.55);
  animation:jiganeFlash .7s var(--ez2) both;
  transform-origin:left;
}
@keyframes jiganeFlash {
  from{transform:scaleX(0);} to{transform:scaleX(1);}
}

.mg-result-note { font-size:.84rem; color:var(--tx3); line-height:1.75; }

.mg-disclaimer {
  font-size:.68rem; color:var(--tx4);
  background:var(--m2); border:1px solid var(--bd0);
  border-radius:var(--r3); padding:11px 13px; line-height:1.78; margin-top:14px;
}
.mg-disclaimer strong { color:var(--tx3); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   遺伝の仕組み タブ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-guide-section { padding:2px 0; }

.mg-guide-h3 {
  font-family:var(--fm); font-size:.93rem; font-weight:700;
  color:var(--tx0); letter-spacing:.14em;
  margin:20px 0 11px; padding-bottom:8px;
  border-bottom:1px solid var(--bd1);
  display:flex; align-items:center; gap:8px;
}
.mg-guide-h3::before {
  content:''; width:2px; height:1em;
  background:linear-gradient(180deg,var(--k7),var(--k4));
  border-radius:1px; flex-shrink:0;
}
.mg-guide-p { font-size:.79rem; color:var(--tx2); line-height:1.87; margin-bottom:11px; }
.mg-guide-hr { border:none; border-top:1px solid var(--bd0); margin:18px 0; }

/* 法則カード */
.mg-law-cards {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr));
  gap:9px; margin-bottom:14px;
}
.mg-law-card {
  background:var(--m2); border:1px solid var(--bd0); border-radius:var(--r3);
  padding:14px; transition:border-color .2s, transform .2s var(--ez);
}
.mg-law-card:hover { border-color:var(--bd1); transform:translateY(-2px); }
.mg-law-card p { font-size:.75rem; color:var(--tx2); line-height:1.75; margin-bottom:9px; }
.mg-law-num { font-size:.6rem; color:var(--k6); font-weight:700; letter-spacing:.14em; margin-bottom:4px; }
.mg-law-title {
  font-family:var(--fm); font-size:.8rem; font-weight:700;
  color:var(--tx0); margin-bottom:7px; letter-spacing:.06em;
}

/* 遺伝子バッジ */
.mg-gene {
  display:inline-block; padding:1px 7px; border-radius:var(--r1);
  font-size:.72rem; font-weight:700; font-family:var(--fs); letter-spacing:.04em;
}
.mg-gene-dom { background:rgba(221,168,68,.14); color:var(--k8); border:1px solid rgba(221,168,68,.3); }
.mg-gene-het { background:rgba(96,165,250,.11); color:#93c5fd; border:1px solid rgba(96,165,250,.22); }
.mg-gene-rec { background:rgba(248,113,113,.11); color:#fca5a5; border:1px solid rgba(248,113,113,.2); }
.mg-gene-sm  { font-size:.65rem; padding:0 5px; }

/* パネット表 */
.mg-punnett-grid-wrap { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; margin-bottom:14px; }
.mg-punnett-ex-table { border-collapse:collapse; font-size:.76rem; }
.mg-punnett-ex-table th,
.mg-punnett-ex-table td {
  border:1px solid var(--bd0); padding:8px 12px; text-align:center; min-width:68px;
}
.mg-punnett-ex-table th { background:var(--m3); color:var(--tx2); font-family:var(--fm); }
.mg-punnett-corner { background:var(--m4) !important; }
.mg-cell-dom { background:rgba(221,168,68,.06); }
.mg-cell-het { background:rgba(96,165,250,.06); }
.mg-cell-rec { background:rgba(248,113,113,.07); }

.mg-punnett-result-note { display:flex; flex-direction:column; gap:6px; }
.mg-pr-row { display:flex; align-items:center; gap:9px; font-size:.74rem; color:var(--tx2); }
.mg-pr-gene { padding:3px 9px; border-radius:var(--r2); font-size:.68rem; font-weight:700; }

/* 世代フロー */
.mg-generation-flow { display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:14px; }
.mg-gen-box { width:100%; max-width:360px; border-radius:var(--r3); padding:11px 15px; border:1px solid var(--bd0); }
.mg-gen-p     { background:var(--m3); }
.mg-gen-f1    { background:rgba(96,165,250,.06); border-color:rgba(96,165,250,.13); }
.mg-gen-f2    { background:rgba(221,168,68,.05); border-color:var(--bd1); }
.mg-gen-fixed { background:rgba(16,185,129,.05); border-color:rgba(16,185,129,.16); }
.mg-gen-label { font-family:var(--fm); font-size:.77rem; font-weight:700; color:var(--tx0); letter-spacing:.1em; margin-bottom:3px; }
.mg-gen-desc  { font-size:.72rem; color:var(--tx2); line-height:1.65; }
.mg-gen-arrow { font-size:.75rem; color:var(--tx4); }

/* キャリア図 */
.mg-carrier-diagram {
  background:var(--m2); border:1px solid var(--bd0);
  border-radius:var(--r3); padding:15px; margin-bottom:14px;
}
.mg-car-row { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:12px; }
.mg-car-fish { text-align:center; }
.mg-car-fish-icon { font-size:1.5rem; margin-bottom:4px; }
.mg-car-gene { margin-bottom:3px; }
.mg-car-desc { font-size:.65rem; color:var(--tx3); }
.mg-car-x { font-size:1.1rem; color:var(--tx4); font-weight:700; }
.mg-car-result-row { display:flex; gap:8px; justify-content:center; }
.mg-car-result {
  flex:1; max-width:90px; text-align:center;
  padding:9px; border-radius:var(--r2);
  font-size:.72rem; font-weight:700; line-height:1.5;
}
.mg-car-res-aa  { background:rgba(221,168,68,.07); border:1px solid rgba(221,168,68,.18); color:var(--k8); }
.mg-car-res-het { background:rgba(96,165,250,.07); border:1px solid rgba(96,165,250,.16); color:#93c5fd; }
.mg-car-res-rec { background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.2); color:#fca5a5; }
.mg-car-res-rec small { display:block; font-weight:400; font-size:.62rem; margin-top:2px; }
.mg-car-note { font-size:.88rem; color:var(--tx3); margin-top:10px; text-align:center; line-height:1.65; }

/* 性差テーブル */
.mg-sex-table, .mg-caution-table {
  width:100%; border-collapse:collapse; font-size:.76rem; margin-bottom:14px;
}
.mg-sex-table th, .mg-sex-table td,
.mg-caution-table th, .mg-caution-table td {
  border:1px solid var(--bd0); padding:8px 11px; color:var(--tx2); line-height:1.6;
}
.mg-sex-table th, .mg-caution-table th {
  background:var(--m3); color:var(--tx1); font-family:var(--fm);
  font-weight:600; letter-spacing:.06em;
}
.mg-sex-table .mg-f { background:rgba(208,40,16,.05); color:#fca5a5; }
.mg-sex-table .mg-m { background:rgba(96,165,250,.05); color:#93c5fd; }

/* 特殊形質カード */
.mg-special-cards {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;
}
@media(max-width:480px){.mg-special-cards{grid-template-columns:1fr;}}
.mg-special-card {
  background:var(--m2); border:1px solid var(--bd0); border-radius:var(--r3);
  padding:13px; transition:border-color .2s;
}
.mg-special-card:hover { border-color:var(--bd1); }
.mg-special-title { font-family:var(--fm); font-size:.79rem; font-weight:700; color:var(--tx0); margin-bottom:7px; letter-spacing:.06em; }
.mg-special-note {
  font-size:.7rem; color:var(--tx3); background:var(--m3); border-radius:var(--r2);
  padding:7px 10px; margin-top:8px; line-height:1.65; border-left:2px solid var(--k4);
}

/* 分離の法則図 */
.mg-dg-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:8px; }
.mg-dg-x { color:var(--tx4); font-weight:700; }
.mg-dg-arrow { color:var(--k5); font-size:.85rem; }
.mg-dg-result { font-size:.72rem; color:var(--tx2); }
.mg-diagram-separation { text-align:center; margin-top:8px; }
.mg-sep-arrow { color:var(--tx4); font-size:.8rem; margin:3px 0; }
.mg-sep-gametes { display:flex; align-items:center; justify-content:center; gap:8px; }
.mg-sep-or { font-size:.68rem; color:var(--tx4); }
.mg-sep-label { font-size:.65rem; color:var(--tx4); margin-top:3px; }
.mg-ind-row { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; }
.mg-ind-trait { font-size:.72rem; color:var(--tx2); display:flex; align-items:center; gap:4px; }
.mg-ind-note { font-size:.65rem; color:var(--tx3); text-align:center; margin-top:5px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   メダカ注意点タブ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-warning-banner {
  background:linear-gradient(135deg,rgba(208,40,16,.12),rgba(160,28,8,.05));
  border:1px solid var(--bd-r); border-left:3px solid var(--r4);
  border-radius:var(--r3); padding:12px 15px;
  font-size:.78rem; color:var(--tx1); line-height:1.78; margin-bottom:16px;
}
.mg-warning-banner strong { color:#fca5a5; }

.mg-caution-list { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.mg-caution-item {
  display:flex; gap:12px; background:var(--m2);
  border:1px solid var(--bd0); border-radius:var(--r3); padding:14px;
  transition:border-color .2s;
}
.mg-caution-item:hover { border-color:var(--bd1); }
.mg-caution-icon {
  font-size:1.3rem; flex-shrink:0; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
}
.mg-caution-body { flex:1; }
.mg-caution-title {
  font-family:var(--fm); font-size:.8rem; font-weight:700;
  color:var(--tx0); letter-spacing:.06em; margin-bottom:6px;
}
.mg-caution-body p, .mg-caution-body > p { font-size:.76rem; color:var(--tx2); line-height:1.8; }
.mg-caution-table-wrap { margin-top:8px; overflow-x:auto; }

.mg-precision-guide {
  background:var(--m2); border:1px solid var(--bd0); border-radius:var(--r3); padding:14px 15px;
}
.mg-precision-guide h4 { font-family:var(--fm); font-size:.77rem; color:var(--tx1); margin-bottom:10px; letter-spacing:.1em; }
.mg-prec-row { display:flex; align-items:flex-start; gap:9px; font-size:.73rem; color:var(--tx2); margin-bottom:7px; line-height:1.65; }
.mg-prec-badge { padding:2px 8px; border-radius:8px; font-size:.63rem; font-weight:700; white-space:nowrap; flex-shrink:0; }
.mg-prec-high { background:rgba(16,185,129,.1);  color:#6ee7b7; border:1px solid rgba(16,185,129,.18); }
.mg-prec-mid  { background:rgba(245,158,11,.09); color:#fcd34d; border:1px solid rgba(245,158,11,.18); }
.mg-prec-low  { background:rgba(239,68,68,.09);  color:#fca5a5; border:1px solid rgba(239,68,68,.18); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   繁殖記録タブ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-br-loading {
  text-align:center; padding:24px; color:var(--tx3);
  font-size:.78rem; letter-spacing:.1em;
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.mg-br-hint { text-align:center; padding:20px; color:var(--tx4); font-size:.75rem; line-height:1.75; }

.mg-br-list-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; flex-wrap:wrap; gap:8px;
}

.mg-br-input, .mg-br-select {
  background:var(--m3); border:1px solid var(--bd1);
  border-radius:var(--r2); color:var(--tx1); font-family:var(--fs);
  font-size:.77rem; padding:8px 11px; width:100%;
  transition:border-color .18s, box-shadow .18s;
}
.mg-br-input:focus, .mg-br-select:focus {
  outline:none; border-color:var(--k6);
  box-shadow:0 0 0 2px rgba(221,168,68,.14);
}
.mg-br-input::placeholder { color:var(--tx4); }
.mg-br-select option { background:var(--m3); color:var(--tx1); }

.mg-br-form {
  background:var(--m1); border:1px solid var(--bd1);
  border-radius:var(--r4); padding:18px; margin-bottom:16px;
  box-shadow:inset 0 1px 0 rgba(221,168,68,.05);
}
.mg-br-form-title {
  font-family:var(--fm); font-size:.88rem; font-weight:700;
  color:var(--k8); letter-spacing:.2em; margin-bottom:15px;
  padding-bottom:10px; border-bottom:1px solid var(--bd1);
}

.mg-br-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:12px;
}
@media(max-width:480px){.mg-br-grid{grid-template-columns:1fr;}}
.mg-br-field { display:flex; flex-direction:column; gap:5px; }
.mg-br-field-full { grid-column:1/-1; }
.mg-br-field label { font-size:.67rem; color:var(--tx3); font-weight:600; letter-spacing:.12em; text-transform:uppercase; }

.mg-br-btn {
  padding:10px 18px;
  background:linear-gradient(135deg,var(--k3),var(--k6) 50%,var(--k4));
  border:1px solid var(--k6); border-radius:var(--r2);
  color:var(--m0); font-family:var(--fm); font-size:.78rem; font-weight:700;
  letter-spacing:.18em; cursor:pointer;
  transition:all .25s var(--ez);
  box-shadow:0 2px 0 rgba(0,0,0,.5),0 4px 14px rgba(168,114,40,.2);
}
.mg-br-btn:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(221,168,68,.3); }

.mg-br-btn-sub {
  padding:8px 13px; background:var(--m3); border:1px solid var(--bd1);
  border-radius:var(--r2); color:var(--tx2); font-family:var(--fs);
  font-size:.75rem; cursor:pointer; transition:all .18s var(--ez);
}
.mg-br-btn-sub:hover { background:var(--m4); border-color:var(--bd2); color:var(--tx1); }
.mg-br-btn-sub.danger { color:#fca5a5; border-color:rgba(248,113,113,.2); }
.mg-br-btn-sub.danger:hover { background:rgba(248,113,113,.07); border-color:rgba(248,113,113,.38); }

.mg-br-record-card {
  background:var(--m2); border:1px solid var(--bd0);
  border-radius:var(--r3); padding:13px 15px; margin-bottom:9px;
  transition:border-color .2s, box-shadow .2s;
  animation:cardSlide .3s var(--ez) both;
}
@keyframes cardSlide{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}
.mg-br-record-card:hover { border-color:var(--bd1); box-shadow:0 4px 20px rgba(0,0,0,.4); }

.mg-br-card-title {
  font-family:var(--fm); font-size:.84rem; font-weight:700;
  color:var(--tx0); letter-spacing:.08em; margin-bottom:7px;
}
.mg-br-card-meta { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.mg-br-badge {
  font-size:.62rem; padding:2px 8px; border-radius:8px; font-weight:600; letter-spacing:.05em;
}
.mg-br-badge-gen  { background:rgba(96,165,250,.09);  color:#93c5fd; border:1px solid rgba(96,165,250,.18); }
.mg-br-badge-fix  { background:rgba(16,185,129,.07);  color:#6ee7b7; border:1px solid rgba(16,185,129,.16); }
.mg-br-badge-pub  { background:rgba(221,168,68,.08);  color:var(--k8); border:1px solid var(--bd1); }
.mg-br-badge-priv { background:var(--m3); color:var(--tx4); border:1px solid var(--bd0); }

.mg-br-card-actions { display:flex; gap:5px; flex-wrap:wrap; }
.mg-br-detail { margin-top:11px; padding-top:11px; border-top:1px solid var(--bd0); }
.mg-br-chart-wrap { background:var(--m3); border:1px solid var(--bd0); border-radius:var(--r2); padding:13px; margin-top:11px; }

.mg-br-pagination { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:14px; }
.mg-br-page-btn {
  width:32px; height:32px; background:var(--m3); border:1px solid var(--bd1);
  border-radius:var(--r2); color:var(--tx2); font-size:.74rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .14s;
}
.mg-br-page-btn:hover { background:var(--m4); border-color:var(--bd2); color:var(--tx1); }
.mg-br-page-btn.active { background:var(--sf1); border-color:var(--k6); color:var(--k8); }
.mg-br-page-info { font-size:.88rem; color:var(--tx3); }

.mg-br-checks {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(115px,1fr));
  gap:4px; margin-top:5px;
}
.mg-br-check-item {
  display:flex; align-items:center; gap:6px; padding:5px 7px;
  border-radius:var(--r1); cursor:pointer; font-size:.73rem;
  color:var(--tx2); transition:background .12s;
}
.mg-br-check-item:hover { background:var(--sf0); }
.mg-br-check-item input { width:14px; height:14px; }

.mg-br-trait-result-row {
  display:flex; align-items:center; gap:8px; padding:5px 0;
  font-size:.76rem; color:var(--tx2);
  border-bottom:1px solid var(--bd0);
}
.mg-br-trait-result-row:last-child { border-bottom:none; }
.mg-br-trait-result-row label { flex:1; }
.mg-br-trait-result-row input {
  width:68px; padding:4px 8px; background:var(--m3); border:1px solid var(--bd1);
  border-radius:var(--r1); color:var(--tx1); font-family:var(--fs); font-size:.75rem; text-align:right;
}
.mg-br-trait-pct { font-size:.88rem; color:var(--tx3); min-width:35px; text-align:right; }
.mg-br-public-row { display:flex; align-items:center; gap:9px; font-size:.76rem; color:var(--tx2); cursor:pointer; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ヘルプドロワー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-help-btn {
  position:fixed; bottom:24px; right:24px;
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--k3),var(--k6));
  border:1px solid var(--k6); color:var(--m0); font-size:1.1rem;
  cursor:pointer; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(168,114,40,.38),0 2px 0 rgba(0,0,0,.5);
  transition:all .25s var(--ez);
}
.mg-help-btn:hover { transform:scale(1.1); box-shadow:0 8px 30px rgba(221,168,68,.48); }

.mg-drawer-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.72); backdrop-filter:blur(5px);
  z-index:1001; opacity:0; pointer-events:none; transition:opacity .3s;
}
.mg-drawer-overlay.open { opacity:1; pointer-events:auto; }

.mg-drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:min(380px,92vw);
  background:var(--m1); border-left:1px solid var(--bd1);
  z-index:1002; transform:translateX(100%);
  transition:transform .35s var(--ez);
  display:flex; flex-direction:column;
  box-shadow:-20px 0 70px rgba(0,0,0,.85);
}
.mg-drawer.open { transform:translateX(0); }

.mg-drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 19px; border-bottom:1px solid var(--bd1);
  background:linear-gradient(90deg,rgba(221,168,68,.06),transparent);
}
.mg-drawer-title {
  font-family:var(--fm); font-size:.87rem; font-weight:700;
  color:var(--k8); letter-spacing:.2em;
}
.mg-drawer-close {
  width:31px; height:31px; background:var(--m3); border:1px solid var(--bd1);
  border-radius:50%; color:var(--tx3); cursor:pointer; font-size:.85rem;
  transition:all .18s;
}
.mg-drawer-close:hover { background:var(--m4); border-color:var(--bd2); color:var(--tx1); }

.mg-drawer-body {
  flex:1; overflow-y:auto; padding:13px 15px;
  scrollbar-width:thin; scrollbar-color:var(--bd1) transparent;
}

.mg-help-section { margin-bottom:4px; }
.mg-help-section-btn {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:11px 12px; background:var(--m2); border:1px solid var(--bd0);
  border-radius:var(--r2); color:var(--tx1); font-family:var(--fs);
  font-size:.77rem; cursor:pointer; text-align:left; transition:all .18s; margin-bottom:2px;
}
.mg-help-section-btn:hover { background:var(--m3); border-color:var(--bd1); }
.mg-help-section-btn.open { border-color:var(--bd2); color:var(--k8); }
.mg-help-icon { margin-right:6px; }
.mg-help-arrow { font-size:.62rem; color:var(--tx4); transition:transform .25s var(--ez); }
.mg-help-section-btn.open .mg-help-arrow { transform:rotate(180deg); color:var(--k5); }

.mg-help-section-body {
  display:none; padding:12px 14px; font-size:.76rem; color:var(--tx2); line-height:1.83;
  background:var(--m2); border:1px solid var(--bd0); border-top:none;
  border-radius:0 0 var(--r2) var(--r2); margin-bottom:5px;
}
.mg-help-section-body.open { display:block; }

.mg-help-step {
  background:var(--m3); border-radius:var(--r2); padding:9px 11px; margin-bottom:6px;
  font-size:.75rem; color:var(--tx2); line-height:1.76; border-left:2px solid var(--k4);
}
.mg-help-step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; background:linear-gradient(135deg,var(--k3),var(--k6));
  color:var(--m0); border-radius:50%; font-size:.65rem; font-weight:800;
  margin-right:7px; flex-shrink:0;
}
.mg-help-tip {
  background:rgba(221,168,68,.06); border:1px solid var(--bd1); border-radius:var(--r2);
  padding:8px 11px; font-size:.72rem; color:var(--k8); margin-top:8px; line-height:1.65;
}
.mg-help-warn {
  background:rgba(248,113,113,.06); border:1px solid rgba(248,113,113,.16); border-radius:var(--r2);
  padding:8px 11px; font-size:.72rem; color:#fca5a5; margin-top:8px; line-height:1.65;
}
.mg-help-badge-ex { display:inline-block; padding:2px 9px; border-radius:8px; font-size:.68rem; font-weight:700; margin-bottom:2px; }
.mg-help-high { background:rgba(16,185,129,.1); color:#6ee7b7; border:1px solid rgba(16,185,129,.18); }
.mg-help-mid  { background:rgba(245,158,11,.09); color:#fcd34d; border:1px solid rgba(245,158,11,.18); }
.mg-help-low  { background:rgba(239,68,68,.09); color:#fca5a5; border:1px solid rgba(239,68,68,.18); }
.mg-help-qa { margin-bottom:9px; }
.mg-help-q { font-weight:700; color:var(--tx0); margin-bottom:4px; font-size:.77rem; }
.mg-help-a { color:var(--tx2); font-size:.75rem; line-height:1.76; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   会員ゲート
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mg-member-gate { text-align:center; padding:48px 24px; }
.mg-member-gate-icon { font-size:3rem; margin-bottom:14px; }
.mg-member-gate-title {
  font-family:var(--fm); font-size:1.08rem; font-weight:700;
  color:var(--tx0); letter-spacing:.14em; margin-bottom:10px;
}
.mg-member-gate-desc { font-size:.8rem; color:var(--tx2); line-height:1.87; margin-bottom:20px; }
.mg-member-gate-btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   v1.5.2 追加機能スタイル
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ① 掛け合わせ履歴 */
.mg-app .mg-sim-history-panel {
  background:var(--m2); border:1px solid var(--bd1);
  border-radius:var(--r3); padding:11px 13px; margin-bottom:12px;
}
.mg-app .mg-sim-hist-header { display:flex; align-items:center; justify-content:space-between; }
.mg-app .mg-sim-hist-title {
  font-family:var(--fm); font-size:.77rem; font-weight:600;
  color:var(--tx1); letter-spacing:.1em;
}
.mg-app .mg-sim-hist-toggle {
  background:none; border:1px solid var(--bd1); color:var(--tx3);
  font-size:.68rem; padding:3px 9px; border-radius:var(--r1);
  cursor:pointer; font-family:var(--fs); transition:border-color .12s, color .12s;
}
.mg-app .mg-sim-hist-toggle:hover { border-color:var(--k6); color:var(--k8); }
.mg-app .mg-sim-hist-list { margin-top:10px; display:flex; flex-direction:column; gap:7px; }
.mg-app .mg-hist-item {
  background:var(--m3); border:1px solid var(--bd0);
  border-radius:var(--r2); padding:10px 12px; transition:border-color .15s;
}
.mg-app .mg-hist-item:hover { border-color:var(--bd1); }
.mg-app .mg-hist-item-name {
  font-family:var(--fm); font-size:.81rem; font-weight:600; color:var(--tx0); margin-bottom:3px;
}
.mg-app .mg-hist-item-meta {
  font-size:.67rem; color:var(--tx3); margin-bottom:7px; display:flex; gap:10px;
}
.mg-app .mg-hist-date { margin-left:auto; }
.mg-app .mg-hist-item-actions { display:flex; gap:5px; }
.mg-app .mg-sim-save-row { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.mg-app .mg-sim-save-row .mg-br-input { flex:1; min-width:160px; }

/* ② タグ */
.mg-app .mg-tag-input-wrap { position:relative; }
.mg-app .mg-tag-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.mg-app .mg-tag-chip {
  background:rgba(221,168,68,.09); border:1px solid var(--bd1);
  color:var(--k8); font-size:.68rem; padding:2px 8px;
  border-radius:20px; display:flex; align-items:center; gap:4px;
}
.mg-app .mg-tag-chip-del {
  background:none; border:none; color:var(--tx4);
  cursor:pointer; font-size:.75rem; padding:0; line-height:1;
}
.mg-app .mg-tag-chip-del:hover { color:var(--r4); }
.mg-app .mg-tag-suggest {
  position:absolute; top:100%; left:0; right:0; z-index:100;
  background:var(--m3); border:1px solid var(--bd2);
  border-radius:var(--r2); overflow:hidden; margin-top:2px;
  box-shadow:0 8px 24px rgba(0,0,0,.6);
}
.mg-app .mg-tag-suggest-item {
  padding:7px 11px; font-size:.78rem; color:var(--tx1);
  cursor:pointer; transition:background .1s;
}
.mg-app .mg-tag-suggest-item:hover { background:var(--sf1); color:var(--k8); }
.mg-app .mg-tag-filter-wrap {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:8px 0; margin-bottom:8px; border-bottom:1px solid var(--bd0);
}
.mg-app .mg-tag-filter-chips { display:flex; flex-wrap:wrap; gap:5px; }
.mg-app .mg-tag-filter-btn {
  background:var(--m3); border:1px solid var(--bd0);
  color:var(--tx3); font-size:.68rem; padding:3px 9px;
  border-radius:20px; cursor:pointer; transition:all .12s;
}
.mg-app .mg-tag-filter-btn:hover { border-color:var(--bd1); color:var(--k8); }
.mg-app .mg-tag-filter-btn.active {
  background:var(--sf1); border-color:var(--k6); color:var(--k8); font-weight:600;
}

/* ⑤ 累代ツリー */
.mg-app .mg-tree-panel { margin-top:10px; padding-top:10px; border-top:1px solid var(--bd0); }
.mg-app .mg-tree-wrap { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.mg-app .mg-tree-level { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mg-app .mg-tree-depth-label {
  font-size:.6rem; font-weight:700; color:var(--k5);
  letter-spacing:.12em; min-width:28px; text-align:right;
}
.mg-app .mg-tree-node {
  background:var(--m3); border:1px solid var(--bd0);
  border-radius:var(--r2); padding:6px 10px; min-width:100px;
  transition:border-color .15s;
}
.mg-app .mg-tree-node:hover { border-color:var(--bd1); }
.mg-app .mg-tree-root { border-color:var(--bd2); background:var(--sf1); }
.mg-app .mg-tree-node-title {
  font-family:var(--fm); font-size:.74rem; font-weight:600; color:var(--tx0);
  margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px;
}
.mg-app .mg-tree-node-gen { font-size:.63rem; color:var(--tx3); }
.mg-app .mg-tree-arrow { font-size:.75rem; color:var(--k5); padding-left:34px; }
.mg-app .mg-tree-sibling { color:var(--tx4); font-size:.75rem; }

/* ⑥ グラフ */
.mg-app .mg-chart-wrap { margin-top:12px; padding-top:12px; border-top:1px solid var(--bd0); }
.mg-app .mg-chart-title {
  font-family:var(--fm); font-size:.74rem; font-weight:600; color:var(--tx1);
  margin-bottom:8px; letter-spacing:.1em;
}
.mg-app .mg-chart-note { font-size:.65rem; color:var(--tx4); margin-top:5px; text-align:center; }

/* ⑪ AIアドバイス */
.mg-app .mg-advice-panel {
  background:var(--m2); border:1px solid var(--bd1);
  border-radius:var(--r3); padding:13px 14px; margin-bottom:12px;
}
.mg-app .mg-advice-header {
  font-family:var(--fm); font-size:.78rem; font-weight:700; color:var(--k7);
  margin-bottom:9px; padding-bottom:7px;
  border-bottom:1px solid var(--bd0); letter-spacing:.14em;
}
.mg-app .mg-advice-body { display:flex; flex-direction:column; gap:7px; }
.mg-app .mg-advice-item {
  display:flex; gap:8px; align-items:flex-start;
  font-size:.77rem; line-height:1.85; padding:8px 10px; border-radius:var(--r2);
}
.mg-app .mg-advice-icon { flex-shrink:0; }
.mg-app .mg-advice-good { background:rgba(16,185,129,.07); border:1px solid rgba(16,185,129,.16); color:#d1fae5; }
.mg-app .mg-advice-warn { background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.16); color:#fef3c7; }
.mg-app .mg-advice-info { background:rgba(221,168,68,.05); border:1px solid var(--bd0); color:var(--tx2); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   レスポンシブ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:480px){
  .mg-tab-content { padding:13px; }
  .mg-header { height:62px; padding:0 13px; gap:10px; }
  .mg-title { font-size:.92rem; }
  .mg-calc-row { flex-direction:column; }
  .mg-btn-calc { min-width:unset; }
  .mg-parents-grid { gap:10px; }
  .mg-br-form { padding:13px; }
  .mg-caution-item { flex-direction:column; gap:8px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RANMA v6 互換 — edo-* ドロワー・形質リスト
   (v1.5.1で追加されたJS生成UIのスタイル)
   2026-02-23 末尾追加
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── ドロワートグルボタン ── */
.edo-toggle {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 15px;
  font-family:var(--fs);
  transition:background .15s;
  text-align:left;
}
.edo-toggle:hover{background:var(--sf0);}
.edo-toggle.open{background:rgba(212,160,52,.05);}

.edo-toggle-left{display:flex;align-items:center;gap:12px;}
.edo-toggle-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;}

/* 家紋モチーフアイコン */
.edo-mon {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; font-weight:900; flex-shrink:0;
  position:relative;
}
.edo-mon::before {
  content:''; position:absolute; inset:3px;
  border-radius:50%; border:1px solid currentColor; opacity:.25;
  pointer-events:none;
}
.edo-mon::after {
  content:''; position:absolute; inset:-3px;
  border-radius:50%; border:1px solid currentColor; opacity:.12;
  pointer-events:none;
}
.edo-mon-f {
  background:radial-gradient(circle,rgba(32,96,192,.25),rgba(32,96,192,.05));
  border:1px solid rgba(64,144,224,.45);
  color:#80c0f0;
  box-shadow:0 0 18px rgba(32,96,192,.12),inset 0 0 10px rgba(32,96,192,.1);
}
.edo-mon-m {
  background:radial-gradient(circle,rgba(200,40,116,.25),rgba(200,40,116,.05));
  border:1px solid rgba(200,40,116,.45);
  color:#fca8cc;
  box-shadow:0 0 18px rgba(200,40,116,.12),inset 0 0 10px rgba(200,40,116,.1);
}

.edo-toggle-title{
  font-size:1.05rem; font-weight:700; color:var(--tx0); letter-spacing:.04em;
}
.edo-toggle-badge{
  font-size:.84rem; color:var(--tx4); margin-top:2px;
}
.edo-toggle-badge.edo-badge-on{
  color:var(--k8); font-weight:600;
}
.edo-arrow{
  font-size:.62rem; color:var(--tx4);
  transition:transform .35s var(--ez), color .15s;
  display:block;
}
.edo-toggle.open .edo-arrow{transform:rotate(90deg); color:var(--k8);}
.edo-toggle-hint{font-size:.8rem; color:var(--tx4);}

/* ── ドロワー本体 ── */
.edo-drawer{
  max-height:0; overflow:hidden;
  transition:max-height .45s var(--ez);
  border-top:1px solid transparent;
}
.edo-drawer.open{
  max-height:5000px;
  overflow-y:auto;
  border-top-color:var(--bd-s);
}

/* ── 形質リスト ── */
.mg-traits-container{display:flex;flex-direction:column;}
.mg-category-title{
  font-size:.6rem; font-weight:700;
  color:var(--k7); letter-spacing:.15em; text-transform:uppercase;
  margin:10px 0 4px; display:flex; align-items:center; gap:7px;
}
.mg-category-title::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,var(--bd1),transparent);
}
.mg-category-sep{height:0;}
.mg-category-block{display:flex;flex-direction:column;}
.mg-trait-item{
  display:flex; align-items:flex-start; gap:8px;
  padding:6px 7px; border-radius:var(--r1); cursor:pointer;
  transition:background .12s;
}
.mg-trait-item:hover{background:var(--sf0);}
.mg-trait-item:has(input:checked){background:var(--sf1);}
.mg-trait-item input[type="checkbox"]{
  accent-color:var(--k8); width:14px; height:14px;
  flex-shrink:0; margin-top:3px; cursor:pointer;
}
.mg-trait-name{
  font-size:.8rem; color:var(--tx1);
  display:flex; align-items:center; gap:5px; flex-wrap:wrap; line-height:1.45;
}
.mg-trait-note{font-size:.66rem; color:var(--tx3); line-height:1.4;}
.mg-precision-badge{font-size:.56rem;padding:1px 5px;border-radius:10px;font-weight:700;flex-shrink:0;}
.mg-prec-high{background:rgba(16,185,129,.15);color:#4ade80;border:1px solid rgba(16,185,129,.3);}
.mg-prec-mid {background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.3);}
.mg-prec-low {background:rgba(239,68,68,.15); color:#fca5a5;border:1px solid rgba(239,68,68,.3);}

/* ══ 計算ボタン ══ */
.mg-calc-row{display:flex;gap:10px;justify-content:center;margin-bottom:18px;flex-wrap:wrap;}
.mg-btn-calc {
  background:
    linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 50%),
    linear-gradient(135deg,var(--k2) 0%,var(--k5) 35%,var(--k8) 65%,var(--k9) 100%);
  color:var(--m0);
  border:1px solid var(--k8);
  border-radius:var(--r2);
  padding:13px 34px;
  font-size:.9rem; font-family:var(--fs); font-weight:700;
  cursor:pointer; letter-spacing:.07em;
  box-shadow:
    0 5px 22px rgba(212,160,52,.4),
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -2px 0 rgba(0,0,0,.3) inset;
  transition:transform .14s var(--ez), box-shadow .14s;
  position:relative; overflow:hidden;
}
.mg-btn-calc::before{
  content:'';
  position:absolute; top:0; left:-120%; width:80%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-20deg);
  transition:left .7s;
}
.mg-btn-calc:hover::before{left:130%;}
.mg-btn-calc:hover{transform:translateY(-2px);box-shadow:0 9px 28px rgba(212,160,52,.55);}
.mg-btn-calc:active{transform:translateY(1px);}
.mg-btn-reset {
  background:transparent; color:var(--tx3);
  border:1px solid var(--bd-s); border-radius:var(--r2);
  padding:13px 18px; font-size:.82rem; font-family:var(--fs); cursor:pointer;
  transition:border-color .14s,color .14s;
}
.mg-btn-reset:hover{border-color:var(--bd2);color:var(--k8);}

/* ══ 結果エリア ══ */
.mg-result{
  background:var(--m1); border:1px solid var(--bd1);
  border-radius:var(--r4); padding:18px; margin-bottom:14px;
}
.mg-result-title{
  font-family:var(--fm); font-size:.95rem; font-weight:700;
  color:var(--k8); margin-bottom:14px;
  padding-bottom:10px; border-bottom:1px solid var(--bd1);
  letter-spacing:.08em;
  display:flex; align-items:center; gap:9px;
}
.mg-result-title::before{
  content:''; width:3px; height:1.1em; flex-shrink:0;
  background:linear-gradient(180deg,var(--k7),var(--k8));
  border-radius:2px;
}
.mg-trait-result{
  background:var(--m2); border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r2); padding:13px 15px; margin-bottom:8px;
  animation:edo-in .26s var(--ez) both;
}
.mg-trait-result:nth-child(2){animation-delay:.04s}
.mg-trait-result:nth-child(3){animation-delay:.08s}
.mg-trait-result:nth-child(4){animation-delay:.12s}
.mg-trait-result:nth-child(5){animation-delay:.16s}
@keyframes edo-in{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
.mg-trait-result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;flex-wrap:wrap;gap:5px;}
.mg-trait-result-name{font-size:.83rem;font-weight:600;color:var(--tx0);display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.mg-probability-badge{font-size:.93rem;font-weight:700;padding:3px 12px;border-radius:20px;}
.mg-prob-high    {background:rgba(16,185,129,.15);color:#4ade80;border:1px solid rgba(16,185,129,.3);}
.mg-prob-mid     {background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.3);}
.mg-prob-low     {background:rgba(239,68,68,.15); color:#fca5a5;border:1px solid rgba(239,68,68,.3);}
.mg-prob-tendency{background:rgba(139,92,246,.15);color:#c4b5fd;border:1px solid rgba(139,92,246,.3);}
.mg-progress-bar{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin-bottom:6px;}
.mg-progress-fill{height:100%;border-radius:2px;transition:width .9s var(--ez);}
.mg-fill-green {background:linear-gradient(90deg,#059669,#34d399);}
.mg-fill-yellow{background:linear-gradient(90deg,#d97706,#fcd34d);}
.mg-fill-red   {background:linear-gradient(90deg,#dc2626,#fca5a5);}
.mg-result-note{font-size:.74rem;color:var(--tx2);line-height:1.8;margin-top:5px;}
.mg-punnett-toggle{font-size:.69rem;color:var(--k7);cursor:pointer;margin-top:7px;display:inline-flex;align-items:center;gap:3px;opacity:.75;transition:opacity .12s;}
.mg-punnett-toggle:hover{opacity:1;}
.mg-punnett-wrap{overflow-x:auto;margin-top:7px;}
.mg-punnett-table{border-collapse:collapse;font-size:.71rem;}
.mg-punnett-table th,.mg-punnett-table td{border:1px solid var(--bd2);padding:5px 9px;text-align:center;min-width:52px;}
.mg-punnett-table th{background:rgba(212,160,52,.12);color:var(--k8);font-weight:600;}
.mg-cell-dominant {background:rgba(16,185,129,.1);color:#4ade80;}
.mg-cell-recessive{background:rgba(239,68,68,.1); color:#fca5a5;}
.mg-cell-carrier  {background:rgba(245,158,11,.1);color:#fcd34d;}
.mg-no-result{text-align:center;color:var(--tx3);padding:24px;font-size:.83rem;}
.mg-disclaimer{font-size:.7rem;color:var(--tx3);background:rgba(212,160,52,.05);border:1px solid rgba(212,160,52,.12);border-radius:var(--r1);padding:10px 13px;line-height:1.85;}

/* ══ Guide タブ ══ */
.mg-guide-section{display:flex;flex-direction:column;gap:22px;}
.mg-guide-h3{
  font-family:var(--fm); font-size:.9rem; font-weight:700;
  color:var(--k8); margin:0 0 9px;
  padding:8px 12px 8px 14px;
  border-left:3px solid var(--k7);
  background:rgba(212,160,52,.06);
  border-radius:0 var(--r1) var(--r1) 0;
  letter-spacing:.06em;
}
.mg-guide-p{
  font-size:.79rem; color:var(--tx2); line-height:1.9;
  background:var(--m2); border:1px solid var(--bd-s);
  border-radius:var(--r2); padding:13px 15px;
}
.mg-guide-hr{border:none;border-top:1px solid var(--bd-s);margin:2px 0;}
.mg-law-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px;}
.mg-law-card{background:var(--m2);border:1px solid var(--bd-s);border-radius:var(--r2);padding:12px 13px;font-size:.77rem;line-height:1.8;color:var(--tx2);}
.mg-law-num{display:inline-block;background:var(--k8);color:var(--m0);font-weight:700;font-size:.61rem;padding:2px 8px;border-radius:10px;margin-bottom:5px;}
.mg-law-title{font-weight:600;color:var(--tx0);margin-bottom:5px;font-size:.8rem;}
.mg-dg-row{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap;}
.mg-dg-x,.mg-dg-arrow{color:var(--tx4);font-size:.78rem;}
.mg-dg-result{font-size:.7rem;color:#4ade80;}
.mg-gene{display:inline-block;padding:2px 7px;border-radius:3px;font-weight:700;font-size:.79rem;font-family:monospace;}
.mg-gene-dom{background:rgba(16,185,129,.18);color:#4ade80;border:1px solid rgba(16,185,129,.3);}
.mg-gene-rec{background:rgba(239,68,68,.18); color:#fca5a5;border:1px solid rgba(239,68,68,.3);}
.mg-gene-het{background:rgba(245,158,11,.18);color:#fcd34d;border:1px solid rgba(245,158,11,.3);}
.mg-gene-sm{font-size:.68rem;padding:1px 5px;}
.mg-diagram-separation{text-align:center;margin-top:8px;font-size:.78rem;}
.mg-sep-arrow{color:var(--k8);margin:4px 0;}
.mg-sep-gametes{display:flex;justify-content:center;align-items:center;gap:8px;}
.mg-sep-or{color:var(--tx4);font-size:.7rem;}
.mg-sep-label{color:var(--tx3);font-size:.66rem;margin-top:3px;}
.mg-ind-row{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:8px;}
.mg-ind-trait{font-size:.78rem;color:var(--tx2);display:flex;align-items:center;gap:5px;}
.mg-ind-note{text-align:center;font-size:.67rem;color:var(--tx3);margin-top:5px;}
.mg-genotype-table-wrap{overflow-x:auto;}
.mg-genotype-table{width:100%;border-collapse:collapse;font-size:.76rem;}
.mg-genotype-table th{background:rgba(212,160,52,.12);color:var(--k8);padding:7px 11px;border:1px solid var(--bd2);font-weight:600;}
.mg-genotype-table td{padding:7px 11px;border:1px solid rgba(255,255,255,.06);color:var(--tx2);}
.mg-punnett-grid-wrap{overflow-x:auto;}
.mg-punnett-ex-table{border-collapse:collapse;font-size:.75rem;}
.mg-punnett-ex-table th,.mg-punnett-ex-table td{border:1px solid var(--bd2);padding:7px 12px;text-align:center;min-width:72px;}
.mg-punnett-corner{background:var(--m2);}
.mg-punnett-ex-table th{background:rgba(212,160,52,.12);color:var(--k8);}
.mg-cell-dom{background:rgba(16,185,129,.1);}
.mg-cell-het{background:rgba(245,158,11,.1);}
.mg-cell-rec{background:rgba(239,68,68,.1);font-weight:600;color:#fca5a5;}
.mg-punnett-result-note{margin-top:10px;display:flex;flex-direction:column;gap:5px;}
.mg-pr-row{display:flex;align-items:center;gap:9px;font-size:.75rem;color:var(--tx2);}
.mg-pr-gene{padding:2px 8px;border-radius:3px;font-family:monospace;font-weight:700;font-size:.75rem;}
.mg-generation-flow{display:flex;flex-direction:column;}
.mg-gen-box{border:1px solid rgba(255,255,255,.06);border-radius:var(--r2);padding:10px 13px;width:100%;max-width:380px;}
.mg-gen-p    {border-left:2px solid var(--tx4);}
.mg-gen-f1   {border-left:2px solid rgba(24,56,120,.9);}
.mg-gen-f2   {border-left:2px solid var(--k7);}
.mg-gen-fixed{border-left:2px solid #10b981;}
.mg-gen-label{font-weight:600;font-size:.79rem;color:var(--tx0);margin-bottom:3px;}
.mg-gen-desc {font-size:.73rem;color:var(--tx2);line-height:1.7;}
.mg-gen-arrow{font-size:.7rem;color:var(--tx4);padding:3px 13px;}
.mg-carrier-diagram{background:var(--m2);border:1px solid var(--bd-s);border-radius:var(--r2);padding:14px;}
.mg-car-row{display:flex;justify-content:center;align-items:center;gap:18px;margin-bottom:12px;}
.mg-car-fish{text-align:center;}
.mg-car-fish-icon{font-size:1.5rem;}
.mg-car-gene{margin:3px 0;}
.mg-car-desc{font-size:.69rem;color:var(--tx2);}
.mg-car-x{font-size:1.1rem;color:var(--tx4);font-weight:700;}
.mg-car-result-row{display:flex;justify-content:center;gap:8px;margin-bottom:10px;}
.mg-car-result{text-align:center;padding:8px 10px;border-radius:var(--r2);font-size:.73rem;font-weight:600;line-height:1.65;}
.mg-car-result small{font-weight:400;font-size:.63rem;display:block;}
.mg-car-res-aa {background:rgba(16,185,129,.12);color:#4ade80;border:1px solid rgba(16,185,129,.25);}
.mg-car-res-het{background:rgba(245,158,11,.12);color:#fcd34d;border:1px solid rgba(245,158,11,.25);}
.mg-car-res-rec{background:rgba(239,68,68,.12); color:#fca5a5;border:1px solid rgba(239,68,68,.25);}
.mg-car-note{font-size:.71rem;color:var(--tx2);text-align:center;line-height:1.7;}
.mg-sex-table{width:100%;border-collapse:collapse;font-size:.75rem;}
.mg-sex-table th{background:rgba(212,160,52,.12);color:var(--k8);padding:7px 11px;border:1px solid var(--bd2);font-weight:600;text-align:left;}
.mg-sex-table td{padding:7px 11px;border:1px solid rgba(255,255,255,.06);color:var(--tx2);}
.mg-sex-table .mg-f{color:#fca8cc;}.mg-sex-table .mg-m{color:#80c0f0;}
.mg-special-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
@media(max-width:480px){.mg-special-cards{grid-template-columns:1fr;}}
.mg-special-card{background:var(--m2);border:1px solid var(--bd-s);border-radius:var(--r2);padding:12px;}
.mg-special-title{font-weight:600;color:var(--tx0);margin-bottom:5px;font-size:.82rem;}
.mg-special-note{font-size:.7rem;color:var(--k8);margin-top:5px;background:rgba(212,160,52,.08);padding:5px 8px;border-radius:3px;line-height:1.7;}

/* ══ Caution タブ ══ */
.mg-warning-banner{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);border-radius:var(--r2);padding:11px 14px;font-size:.77rem;color:#fcd34d;margin-bottom:14px;line-height:1.85;}
.mg-caution-list{display:flex;flex-direction:column;gap:9px;margin-bottom:18px;}
.mg-caution-item{display:flex;gap:12px;background:var(--m2);border:1px solid var(--bd-s);border-radius:var(--r2);padding:13px;}
.mg-caution-icon{font-size:1.35rem;flex-shrink:0;line-height:1.2;}
.mg-caution-body{flex:1;min-width:0;}
.mg-caution-title{font-weight:600;color:var(--tx0);font-size:.82rem;margin-bottom:5px;}
.mg-caution-body p{font-size:.76rem;color:var(--tx2);line-height:1.85;}
.mg-caution-table-wrap{overflow-x:auto;margin-top:7px;}
.mg-caution-table{border-collapse:collapse;font-size:.72rem;width:100%;}
.mg-caution-table th{background:rgba(212,160,52,.12);color:var(--k8);padding:5px 9px;border:1px solid var(--bd2);font-weight:600;text-align:left;}
.mg-caution-table td{padding:5px 9px;border:1px solid rgba(255,255,255,.06);color:var(--tx2);}
.mg-precision-guide{background:var(--m2);border:1px solid var(--bd-s);border-radius:var(--r2);padding:13px 15px;}
.mg-precision-guide h4{font-size:.79rem;font-weight:600;color:var(--tx0);margin-bottom:9px;}
.mg-prec-row{display:flex;align-items:center;gap:9px;font-size:.75rem;color:var(--tx2);margin-bottom:6px;}
.mg-prec-badge{font-size:.67rem;padding:2px 7px;border-radius:10px;font-weight:700;white-space:nowrap;}

/* ══ Breeding タブ ══ */
.mg-br-wrap{display:flex;flex-direction:column;gap:14px;}
.mg-br-form-section,.mg-br-list-section{background:var(--m1);border:1px solid var(--bd-s);border-radius:var(--r3);padding:14px;}
.mg-br-form-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.mg-br-toggle-btn{background:none;border:1px solid var(--bd-s);color:var(--tx3);font-size:.7rem;padding:3px 9px;border-radius:var(--r1);cursor:pointer;font-family:var(--fs);transition:border-color .12s,color .12s;}
.mg-br-toggle-btn:hover{border-color:var(--bd2);color:var(--k8);}
.mg-br-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.mg-br-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
@media(max-width:440px){.mg-br-row-3{grid-template-columns:1fr 1fr;}}
.mg-br-field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:100px;}
.mg-br-field-full{flex:100%;}
.mg-br-field label{font-size:.68rem;color:var(--tx2);font-weight:500;}
.mg-br-req{background:rgba(239,68,68,.18);color:#fca5a5;font-size:.59rem;padding:1px 4px;border-radius:2px;margin-left:3px;}
.mg-br-input{background:var(--m2);border:1px solid rgba(255,255,255,.09);border-radius:var(--r1);color:var(--tx0);padding:7px 9px;font-size:.79rem;font-family:var(--fs);transition:border-color .12s;width:100%;}
.mg-br-input:focus{outline:none;border-color:var(--bd3);}
.mg-br-input-num{text-align:right;}
.mg-br-unit{font-size:.68rem;color:var(--tx3);align-self:flex-end;padding-bottom:7px;margin-left:-5px;}
.mg-br-select{background:var(--m2);border:1px solid rgba(255,255,255,.09);border-radius:var(--r1);color:var(--tx0);padding:7px 9px;font-size:.79rem;font-family:var(--fs);cursor:pointer;}
.mg-br-select-sm{padding:5px 7px;font-size:.73rem;}
.mg-br-textarea{background:var(--m2);border:1px solid rgba(255,255,255,.09);border-radius:var(--r1);color:var(--tx0);padding:7px 9px;font-size:.79rem;font-family:var(--fs);resize:vertical;width:100%;}
.mg-br-textarea:focus{outline:none;border-color:var(--bd3);}
.mg-br-section-label{font-size:.74rem;font-weight:600;color:var(--tx1);display:block;margin-bottom:7px;}
.mg-br-hint{font-size:.72rem;color:var(--tx3);padding:9px;}
.mg-br-parents-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
@media(max-width:440px){.mg-br-parents-row{grid-template-columns:1fr;}}
.mg-br-parent-sel{border:1px solid rgba(255,255,255,.07);border-radius:var(--r2);padding:10px;background:var(--m2);}
.mg-br-father-sel{border-top:2px solid rgba(64,144,224,.5);}
.mg-br-mother-sel{border-top:2px solid rgba(200,40,116,.5);}
.mg-br-parent-title{font-size:.68rem;font-weight:700;color:var(--tx2);margin-bottom:7px;}
.mg-br-checks{display:flex;flex-direction:column;gap:3px;}
.mg-br-check-label{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--tx1);padding:3px;border-radius:2px;cursor:pointer;transition:background .12s;}
.mg-br-check-label:hover{background:var(--sf0);}
.mg-br-check-label input{accent-color:var(--k8);}
.mg-br-cat-title{font-size:.59rem;color:var(--k7);letter-spacing:.12em;text-transform:uppercase;margin:7px 0 2px;opacity:.75;}
.mg-br-results-section,.mg-br-cumulative-section{margin-bottom:12px;}
.mg-br-trait-inputs{display:flex;flex-direction:column;gap:5px;}
.mg-br-trait-row{display:flex;align-items:center;gap:7px;background:var(--m2);border:1px solid rgba(255,255,255,.06);border-radius:var(--r1);padding:6px 9px;font-size:.75rem;}
.mg-br-trait-row label{flex:1;color:var(--tx2);}
.mg-br-trait-row input{width:56px;text-align:right;}
.mg-br-trait-pct{color:var(--k8);font-weight:600;min-width:32px;text-align:right;font-size:.75rem;}
.mg-br-cumul-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:.75rem;color:var(--tx2);margin-bottom:7px;}
.mg-br-btn-sub{background:rgba(212,160,52,.12);border:1px solid var(--bd2);color:var(--k8);border-radius:var(--r1);padding:5px 11px;font-size:.72rem;font-family:var(--fs);cursor:pointer;transition:background .12s;}
.mg-br-btn-sub:hover{background:rgba(212,160,52,.22);}
.mg-br-cumul-result{margin-top:8px;}
.mg-br-row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding-top:9px;border-top:1px solid rgba(255,255,255,.06);margin-top:2px;}
.mg-br-public-label{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--tx2);cursor:pointer;margin-right:auto;}
.mg-br-public-label input{accent-color:var(--k8);}
.mg-br-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:7px;}
.mg-br-list-controls{display:flex;gap:5px;flex-wrap:wrap;}
.mg-br-search-input{max-width:152px;}
.mg-br-records-list{display:flex;flex-direction:column;gap:8px;}
.mg-br-loading{text-align:center;color:var(--tx3);padding:22px;font-size:.79rem;}
.mg-br-record-card{background:var(--m2);border:1px solid rgba(255,255,255,.06);border-radius:var(--r2);padding:13px;transition:border-color .14s;}
.mg-br-record-card:hover{border-color:var(--bd1);}
.mg-br-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:7px;margin-bottom:7px;}
.mg-br-card-title{font-weight:600;font-size:.83rem;color:var(--tx0);line-height:1.4;}
.mg-br-card-badges{display:flex;gap:4px;flex-wrap:wrap;flex-shrink:0;}
.mg-br-badge{font-size:.6rem;padding:2px 6px;border-radius:10px;font-weight:600;white-space:nowrap;}
.mg-br-badge-gen {background:rgba(212,160,52,.15);color:var(--k8);border:1px solid rgba(212,160,52,.25);}
.mg-br-badge-fix {background:rgba(32,96,192,.12);color:#80c0f0;border:1px solid rgba(32,96,192,.25);}
.mg-br-badge-pub {background:rgba(16,185,129,.12);color:#4ade80;border:1px solid rgba(16,185,129,.25);}
.mg-br-badge-priv{background:rgba(255,255,255,.05);color:var(--tx4);border:1px solid rgba(255,255,255,.09);}
.mg-br-card-meta{font-size:.68rem;color:var(--tx3);margin-bottom:7px;}
.mg-br-card-actions{display:flex;gap:5px;margin-top:7px;}
.mg-br-card-btn{background:none;border:1px solid rgba(255,255,255,.09);color:var(--tx3);border-radius:var(--r1);padding:4px 9px;font-size:.69rem;font-family:var(--fs);cursor:pointer;transition:border-color .12s,color .12s;}
.mg-br-card-btn:hover{border-color:var(--bd2);color:var(--k8);}
.mg-br-card-btn.danger:hover{border-color:rgba(176,24,16,.7);color:rgba(208,40,16,.9);}
.mg-br-detail{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);}
.mg-br-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px;}
.mg-br-detail-item{font-size:.72rem;}
.mg-br-detail-label{color:var(--tx3);margin-bottom:2px;}
.mg-br-detail-val{color:var(--tx1);font-weight:500;}
.mg-br-compare-table{width:100%;border-collapse:collapse;font-size:.72rem;overflow-x:auto;display:block;}
.mg-br-compare-table th{background:rgba(212,160,52,.12);color:var(--k8);padding:5px 9px;border:1px solid var(--bd2);font-weight:600;white-space:nowrap;}
.mg-br-compare-table td{padding:5px 9px;border:1px solid rgba(255,255,255,.06);color:var(--tx2);white-space:nowrap;}
.mg-br-pagination{display:flex;gap:4px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
.mg-br-page-btn{background:none;border:1px solid rgba(255,255,255,.09);color:var(--tx3);border-radius:var(--r1);padding:4px 9px;font-size:.72rem;font-family:var(--fs);cursor:pointer;min-width:30px;transition:border-color .12s,color .12s;}
.mg-br-page-btn.active{background:var(--k8);color:var(--m0);border-color:var(--k8);font-weight:700;}
.mg-br-page-btn:hover:not(.active){border-color:var(--bd2);color:var(--k8);}
.mg-br-toast{position:fixed;bottom:72px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--m3);border:1px solid var(--k8);color:var(--k8);padding:9px 20px;border-radius:var(--r2);font-size:.82rem;opacity:0;transition:opacity .25s,transform .25s;z-index:9999;pointer-events:none;white-space:nowrap;}
.mg-br-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ══ Help Button & Drawer ══ */
.mg-help-btn {
  position:absolute; bottom:-20px; right:0; z-index:100;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--k3),var(--k8));
  border:1px solid var(--k8); cursor:pointer;
  font-size:1.1rem; color:var(--m0);
  box-shadow:0 4px 16px rgba(212,160,52,.38);
  transition:transform .14s var(--ez),box-shadow .14s;
  display:flex; align-items:center; justify-content:center;
}
.mg-help-btn:hover{transform:scale(1.12);box-shadow:0 7px 22px rgba(212,160,52,.55);}
.mg-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1001;backdrop-filter:blur(3px);}
.mg-drawer-overlay.open{display:block;}
.mg-drawer{position:fixed;top:0;right:-440px;width:400px;max-width:92vw;height:100vh;background:var(--m1);border-left:1px solid var(--bd2);z-index:1002;transition:right .38s var(--ez);display:flex;flex-direction:column;overflow:hidden;}
.mg-drawer.open{right:0;}
.mg-drawer-header{border-bottom:1px solid var(--bd1);padding:14px 17px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:linear-gradient(135deg,rgba(184,130,40,.1),transparent 60%);position:relative;}
.mg-drawer-header::before{content:'';position:absolute;left:0;top:15%;bottom:15%;width:2px;background:linear-gradient(180deg,transparent,var(--k8),transparent);}
.mg-drawer-title{font-family:var(--fm);font-size:.9rem;font-weight:700;color:var(--k8);letter-spacing:.07em;}
.mg-drawer-close{background:none;border:1px solid rgba(255,255,255,.12);color:var(--tx3);width:27px;height:27px;border-radius:var(--r1);cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:border-color .12s,color .12s;}
.mg-drawer-close:hover{border-color:var(--bd2);color:var(--k8);}
.mg-drawer-body{padding:13px;overflow-y:auto;flex:1;}
.mg-help-section{margin-bottom:6px;border:1px solid rgba(255,255,255,.07);border-radius:var(--r2);overflow:hidden;}
.mg-help-section-btn{width:100%;background:var(--m2);border:none;color:var(--tx1);padding:11px 13px;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-family:var(--fs);font-weight:500;transition:background .12s;}
.mg-help-section-btn:hover{background:var(--sf0);}
.mg-help-icon{font-size:.9rem;margin-right:7px;}
.mg-help-arrow{transition:transform .25s var(--ez);font-size:.66rem;color:var(--k8);}
.mg-help-section-btn.open .mg-help-arrow{transform:rotate(180deg);}
.mg-help-section-body{display:none;padding:11px 13px;background:var(--m1);font-size:.77rem;line-height:1.9;color:var(--tx2);}
.mg-help-section-body.open{display:block;}
.mg-help-step{background:var(--m2);border-radius:var(--r1);padding:7px 10px;margin:5px 0;font-size:.75rem;line-height:1.72;}
.mg-help-step-num{display:inline-flex;align-items:center;justify-content:center;background:var(--k8);color:var(--m0);font-weight:700;border-radius:50%;width:17px;height:17px;font-size:.67rem;margin-right:6px;flex-shrink:0;}
.mg-help-badge-ex{display:inline-block;font-size:.64rem;padding:1px 6px;border-radius:10px;font-weight:700;margin:2px;}
.mg-help-high{background:rgba(16,185,129,.15);color:#4ade80;border:1px solid rgba(16,185,129,.3);}
.mg-help-mid {background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.3);}
.mg-help-low {background:rgba(239,68,68,.15); color:#fca5a5;border:1px solid rgba(239,68,68,.3);}
.mg-help-qa{margin:7px 0;}
.mg-help-q{font-weight:600;color:var(--k8);margin-bottom:3px;font-size:.75rem;}
.mg-help-a{color:var(--tx2);padding-left:9px;border-left:2px solid var(--bd2);font-size:.75rem;line-height:1.78;}
.mg-help-warn{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:var(--r1);padding:7px 9px;margin:7px 0;color:#fca5a5;font-size:.72rem;line-height:1.78;}
.mg-help-tip {background:rgba(212,160,52,.08);border:1px solid rgba(212,160,52,.22);border-radius:var(--r1);padding:7px 9px;margin:7px 0;color:var(--k8);font-size:.72rem;line-height:1.78;}

/* =====================================================
   v1.5.2 追加機能スタイル
   ① 履歴  ② タグ  ⑤ ツリー  ⑥ グラフ  ⑪ アドバイス
   2026-02-23 追加 ※末尾追加のみ
===================================================== */

/* ── ① 掛け合わせ履歴パネル ── */
.mg-app .mg-sim-history-panel {
  background: var(--m1);
  border: 1px solid var(--bd-s);
  border-radius: var(--r3);
  padding: 11px 13px;
  margin-bottom: 12px;
}
.mg-app .mg-sim-hist-header {
  display: flex; align-items: center; justify-content: space-between;
}
.mg-app .mg-sim-hist-title {
  font-size: .78rem; font-weight: 600; color: var(--tx1);
}
.mg-app .mg-sim-hist-toggle {
  background: none; border: 1px solid var(--bd-s); color: var(--tx3);
  font-size: .68rem; padding: 3px 9px; border-radius: var(--r1);
  cursor: pointer; font-family: var(--fs);
  transition: border-color .12s, color .12s;
}
.mg-app .mg-sim-hist-toggle:hover { border-color: var(--bd2); color: var(--k8); }
.mg-app .mg-sim-hist-list {
  margin-top: 10px; display: flex; flex-direction: column; gap: 7px;
}
.mg-app .mg-hist-item {
  background: var(--m2); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r2); padding: 10px 12px;
}
.mg-app .mg-hist-item-name {
  font-size: .82rem; font-weight: 600; color: var(--tx0); margin-bottom: 3px;
}
.mg-app .mg-hist-item-meta {
  font-size: .68rem; color: var(--tx3); margin-bottom: 7px;
  display: flex; gap: 10px;
}
.mg-app .mg-hist-date { margin-left: auto; }
.mg-app .mg-hist-item-actions { display: flex; gap: 5px; }
.mg-app .mg-sim-save-row {
  display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.mg-app .mg-sim-save-row .mg-br-input { flex: 1; min-width: 160px; }

/* ── ② タグ ── */
.mg-app .mg-tag-input-wrap { position: relative; }
.mg-app .mg-tag-chips {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;
}
.mg-app .mg-tag-chip {
  background: rgba(212,160,52,.15); border: 1px solid var(--bd2);
  color: var(--k8); font-size: .68rem; padding: 2px 8px;
  border-radius: 20px; display: flex; align-items: center; gap: 4px;
}
.mg-app .mg-tag-chip-del {
  background: none; border: none; color: var(--k7);
  cursor: pointer; font-size: .75rem; padding: 0; line-height: 1;
}
.mg-app .mg-tag-chip-del:hover { color: rgba(208,40,16,.9); }
.mg-app .mg-tag-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  background: var(--m2); border: 1px solid var(--bd2);
  border-radius: var(--r2); overflow: hidden; margin-top: 2px;
}
.mg-app .mg-tag-suggest-item {
  padding: 7px 11px; font-size: .78rem; color: var(--tx1);
  cursor: pointer; transition: background .1s;
}
.mg-app .mg-tag-suggest-item:hover { background: var(--sf0); color: var(--k8); }
.mg-app .mg-tag-filter-wrap {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--bd-s);
}
.mg-app .mg-tag-filter-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mg-app .mg-tag-filter-btn {
  background: var(--m2); border: 1px solid rgba(255,255,255,.09);
  color: var(--tx3); font-size: .68rem; padding: 3px 9px;
  border-radius: 20px; cursor: pointer; transition: all .12s;
}
.mg-app .mg-tag-filter-btn:hover { border-color: var(--bd2); color: var(--k8); }
.mg-app .mg-tag-filter-btn.active {
  background: rgba(212,160,52,.15); border-color: var(--bd2);
  color: var(--k8); font-weight: 600;
}

/* ── ⑤ 累代ツリー ── */
.mg-app .mg-tree-panel {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mg-app .mg-tree-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mg-app .mg-tree-level {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.mg-app .mg-tree-depth-label {
  font-size: .6rem; font-weight: 700; color: var(--k7);
  letter-spacing: .12em; min-width: 28px; text-align: right;
}
.mg-app .mg-tree-node {
  background: var(--m2); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r2); padding: 6px 10px; min-width: 100px;
}
.mg-app .mg-tree-root {
  border-color: var(--bd2);
  background: rgba(212,160,52,.07);
}
.mg-app .mg-tree-node-title {
  font-size: .75rem; font-weight: 600; color: var(--tx0);
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.mg-app .mg-tree-node-gen { font-size: .63rem; color: var(--tx3); }
.mg-app .mg-tree-arrow {
  font-size: .75rem; color: var(--k7); padding-left: 34px;
}
.mg-app .mg-tree-sibling { color: var(--tx4); font-size: .75rem; }

/* ── ⑥ 実測vs予測グラフ ── */
.mg-app .mg-chart-wrap {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mg-app .mg-chart-title {
  font-size: .75rem; font-weight: 600; color: var(--tx1); margin-bottom: 8px;
}
.mg-app .mg-chart-note {
  font-size: .65rem; color: var(--tx4); margin-top: 5px; text-align: center;
}

/* ── ⑪ AIアドバイス ── */
.mg-app .mg-advice-panel {
  background: var(--m1); border: 1px solid rgba(212,160,52,.18);
  border-radius: var(--r3); padding: 13px 14px; margin-bottom: 12px;
}
.mg-app .mg-advice-header {
  font-size: .78rem; font-weight: 700; color: var(--k8);
  margin-bottom: 9px; padding-bottom: 7px;
  border-bottom: 1px solid rgba(212,160,52,.12);
}
.mg-app .mg-advice-body { display: flex; flex-direction: column; gap: 7px; }
.mg-app .mg-advice-item {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .77rem; line-height: 1.85;
  padding: 8px 10px; border-radius: var(--r2);
}
.mg-app .mg-advice-icon { flex-shrink: 0; }
.mg-app .mg-advice-good {
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.2);
  color: #d1fae5;
}
.mg-app .mg-advice-warn {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
  color: #fef3c7;
}
.mg-app .mg-advice-info {
  background: rgba(96,165,250,.08);
  border: 1px solid rgba(96,165,250,.2);
  color: #dbeafe;
}

/* ══════════════════════════════════════════════════════════
   RANMA v6 追加 — 父母ドロワー + 形質リスト
   v1.5.1 の edo-* スタイルを v6 デザイントークンで再定義
   ※ 末尾追加 2026-02-23
══════════════════════════════════════════════════════════ */

/* ── 選択済みカードの強調 ── */
.mg-parent-card[data-count]:not([data-count="0"]) {
  border-color: var(--bd1);
  box-shadow: 0 0 14px rgba(221,168,68,.08);
}

/* ── ドロワートグルボタン ── */
.edo-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  font-family: var(--fs);
  transition: background .15s;
  text-align: left;
}
.edo-toggle:hover { background: var(--sf0); }
.edo-toggle.open  { background: rgba(221,168,68,.06); }

.edo-toggle-left  { display: flex; align-items: center; gap: 12px; }
.edo-toggle-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }

/* 家紋モチーフアイコン */
.edo-mon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 900; flex-shrink: 0;
  position: relative;
}
.edo-mon::before {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; border: 1px solid currentColor;
  opacity: .25; pointer-events: none;
}
.edo-mon::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid currentColor;
  opacity: .12; pointer-events: none;
}

/* 父 — 藍 */
.edo-mon-f {
  background: radial-gradient(circle, rgba(24,56,120,.3), rgba(24,56,120,.06));
  border: 1px solid rgba(24,88,180,.5);
  color: #80c0f0;
  box-shadow: 0 0 16px rgba(24,56,120,.14), inset 0 0 10px rgba(24,56,120,.1);
}
/* 母 — 朱 */
.edo-mon-m {
  background: radial-gradient(circle, rgba(208,40,16,.28), rgba(208,40,16,.05));
  border: 1px solid rgba(208,40,16,.48);
  color: #fca5a5;
  box-shadow: 0 0 16px rgba(208,40,16,.12), inset 0 0 10px rgba(208,40,16,.1);
}

.edo-toggle-title {
  font-size: 1.05rem; font-weight: 700; color: var(--tx0); letter-spacing: .04em;
}
.edo-toggle-badge {
  font-size: .84rem; color: var(--tx4); margin-top: 2px;
}
.edo-toggle-badge.edo-badge-on {
  color: var(--k7); font-weight: 600;
}

.edo-arrow {
  font-size: .62rem; color: var(--tx4);
  transition: transform .35s var(--ez), color .15s;
  display: block;
}
.edo-toggle.open .edo-arrow { transform: rotate(90deg); color: var(--k7); }
.edo-toggle-hint { font-size: .8rem; color: var(--tx4); }

/* ── ドロワー本体 ── */
.edo-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ez);
  border-top: 1px solid transparent;
}
.edo-drawer.open {
  max-height: 5000px;
  overflow-y: auto;
  border-top-color: rgba(221,168,68,.08);
}

/* ── 形質リスト ── */
.mg-traits-container { display: flex; flex-direction: column; }

.mg-category-title {
  font-size: .72rem; font-weight: 700;
  color: var(--k5); letter-spacing: .16em; text-transform: uppercase;
  margin: 10px 0 4px;
  display: flex; align-items: center; gap: 7px;
}
.mg-category-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--bd1), transparent);
}

.mg-category-sep  { height: 0; }
.mg-category-block{ display: flex; flex-direction: column; }

.mg-trait-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 7px; border-radius: var(--r1); cursor: pointer;
  transition: background .12s;
}
.mg-trait-item:hover { background: var(--sf0); }
.mg-trait-item:has(input:checked) { background: var(--sf1); }

.mg-trait-item input[type="checkbox"],
.mg-trait-item input[type="radio"] {
  accent-color: var(--k7);
  width: 14px; height: 14px;
  flex-shrink: 0; margin-top: 3px; cursor: pointer;
}

.mg-trait-name {
  font-size: .8rem; color: var(--tx1);
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap; line-height: 1.45;
}
.mg-trait-note    { font-size: .66rem; color: var(--tx3); line-height: 1.4; }

.mg-precision-badge { font-size: .56rem; padding: 1px 5px; border-radius: 8px; font-weight: 700; flex-shrink: 0; }
.mg-prec-high { background: rgba(16,185,129,.14); color: #4ade80; border: 1px solid rgba(16,185,129,.28); }
.mg-prec-mid  { background: rgba(245,158,11,.14); color: #fcd34d; border: 1px solid rgba(245,158,11,.28); }
.mg-prec-low  { background: rgba(239,68,68,.14);  color: #fca5a5; border: 1px solid rgba(239,68,68,.28); }

/* ── 結果アイテム (genetics.js が生成する mg-trait-result) ── */
.mg-trait-result {
  background: var(--m3); border: 1px solid var(--bd0);
  border-radius: var(--r2); padding: 13px 15px; margin-bottom: 8px;
  animation: edo-in .26s var(--ez) both;
}
.mg-trait-result:nth-child(2){ animation-delay: .04s; }
.mg-trait-result:nth-child(3){ animation-delay: .08s; }
.mg-trait-result:nth-child(4){ animation-delay: .12s; }
.mg-trait-result:nth-child(5){ animation-delay: .16s; }

@keyframes edo-in {
  from { opacity: 0; transform: translateX(-7px); }
  to   { opacity: 1; transform: none; }
}

.mg-trait-result-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; flex-wrap: wrap; gap: 5px; }
.mg-trait-result-name   { font-size: .83rem; font-weight: 600; color: var(--tx0); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.mg-probability-badge { font-size: .93rem; font-weight: 700; padding: 3px 12px; border-radius: 20px; }
.mg-prob-high     { background: rgba(16,185,129,.14); color: #4ade80; border: 1px solid rgba(16,185,129,.28); }
.mg-prob-mid      { background: rgba(245,158,11,.14); color: #fcd34d; border: 1px solid rgba(245,158,11,.28); }
.mg-prob-low      { background: rgba(239,68,68,.14);  color: #fca5a5; border: 1px solid rgba(239,68,68,.28); }
.mg-prob-tendency { background: rgba(139,92,246,.14); color: #c4b5fd; border: 1px solid rgba(139,92,246,.28); }

.mg-progress-bar  { height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.mg-progress-fill { height: 100%; border-radius: 2px; transition: width .9s var(--ez); }
.mg-fill-green    { background: linear-gradient(90deg, #059669, #34d399); }
.mg-fill-yellow   { background: linear-gradient(90deg, #d97706, #fcd34d); }
.mg-fill-red      { background: linear-gradient(90deg, #dc2626, #fca5a5); }

.mg-result-note      { font-size: .74rem; color: var(--tx2); line-height: 1.8; margin-top: 5px; }

.mg-punnett-toggle {
  font-size: .69rem; color: var(--k5); cursor: pointer;
  margin-top: 7px; display: inline-flex; align-items: center; gap: 3px;
  opacity: .75; transition: opacity .12s;
}
.mg-punnett-toggle:hover { opacity: 1; }
.mg-punnett-wrap  { overflow-x: auto; margin-top: 7px; }
.mg-punnett-table { border-collapse: collapse; font-size: .71rem; }
.mg-punnett-table th,
.mg-punnett-table td { border: 1px solid var(--bd1); padding: 5px 9px; text-align: center; min-width: 52px; }
.mg-punnett-table th { background: rgba(221,168,68,.1); color: var(--k7); font-weight: 600; }
.mg-cell-dominant { background: rgba(16,185,129,.08); color: #4ade80; }
.mg-cell-carrier  { background: rgba(245,158,11,.08); color: #fcd34d; }
.mg-cell-recessive{ background: rgba(239,68,68,.08);  color: #fca5a5; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   v1.6.2 スマホUI改善パッチ
   ① 文字被り修正　② 文字サイズ拡大　③ トップ戻りボタン
   2026-02-23 末尾追加
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── ① ヘッダー: スマホでの文字被り修正 ─── */
@media (max-width: 600px) {
  /* 透かし文字「伝」を非表示 */
  .mg-header::after {
    display: none;
  }
  /* ヘッダー高さを広げてタイトルが潰れないように */
  .mg-header {
    height: auto;
    min-height: 64px;
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .mg-header-icon {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
    flex-shrink: 0;
  }
  /* タイトル文字が切れないように */
  .mg-header > div:last-of-type {
    min-width: 0;
    overflow: hidden;
  }
  .mg-title {
    font-size: 1.0rem;
    letter-spacing: .12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mg-subtitle {
    font-size: .65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ─── ② 全体的な文字サイズ拡大（スマホ） ─── */
@media (max-width: 600px) {

  /* タブボタン: もう少し大きく・見やすく */
  .mg-tab-btn {
    font-size: .9rem;
    padding: 12px 8px 10px;
    min-width: 72px;
  }

  /* ドロワータイトル */
  .edo-toggle-title {
    font-size: 1.08rem;
  }
  .edo-toggle-badge {
    font-size: .88rem;
  }
  .edo-toggle-hint {
    font-size: .68rem;
  }
  .edo-toggle {
    padding: 15px 14px;
  }

  /* 形質ラベル */
  .mg-trait-name,
  .mg-trait-label {
    font-size: 1.05rem;
  }
  .mg-trait-note,
  .mg-result-note {
    font-size: .9rem;
    line-height: 1.8;
  }

  /* 精度バッジ */
  .mg-precision-badge,
  .mg-prec {
    font-size: .65rem;
  }

  /* 計算ボタン */
  .mg-btn-calc {
    font-size: 1.1rem;
    padding: 18px 20px;
    letter-spacing: .14em;
  }
  .mg-btn-reset {
    font-size: .84rem;
    padding: 14px 16px;
  }

  /* 結果タイトル */
  .mg-result-title {
    font-size: .9rem;
  }
  .mg-result-trait-name,
  .mg-trait-result-name {
    font-size: .86rem;
  }
  .mg-result-pct,
  .mg-probability-badge {
    font-size: 1.4rem;
  }

  /* 注意書き */
  .mg-disclaimer {
    font-size: .9rem;
    line-height: 1.9;
  }

  /* 掛け合わせ履歴 */
  .mg-hist-item-name {
    font-size: .86rem;
  }
  .mg-hist-item-meta {
    font-size: .72rem;
  }

  /* 繁殖記録 */
  .mg-br-input,
  .mg-br-select {
    font-size: .84rem;
    padding: 10px 12px;
  }
  .mg-br-card-title {
    font-size: .9rem;
  }

  /* タグ */
  .mg-tag-chip {
    font-size: .72rem;
    padding: 3px 10px;
  }

  /* タブコンテンツの余白を少し広げる */
  .mg-tab-content {
    padding: 16px 14px;
  }

  /* カテゴリタイトル */
  .mg-category-title {
    font-size: .9rem;
  }
}

/* ─── ③ トップへ戻るボタン ─── */
.mg-scroll-top-btn {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--k3, #7a5218), var(--k6, #dda844));
  border: 1px solid rgba(221,168,68,.5);
  color: #010305;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(168,114,40,.4), 0 2px 0 rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.mg-scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mg-scroll-top-btn:hover {
  box-shadow: 0 6px 24px rgba(221,168,68,.5);
  transform: translateY(-2px);
}
.mg-scroll-top-btn:active {
  transform: translateY(1px);
}
/* スマホ以外では小さめに */
@media (min-width: 601px) {
  .mg-scroll-top-btn {
    bottom: 24px;
    right: 24px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MENDEL v1.6.5 — 洗練江戸デザイン刷新パッチ
   「漆黒×純金×白磁」3色主義
   2026-02-23 末尾追加
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── デザイントークン上書き ─── */
.mg-app {
  /* 背景を真の漆黒に */
  --m0:#030304; --m1:#060608; --m2:#0a0a0d; --m3:#0f0f14;
  --m4:#141419; --m5:#1a1a21; --m6:#1f1f28;
  /* 金をより純粋な輝きに */
  --k4:#9a6820; --k5:#b88030; --k6:#d4a040;
  --k7:#e8b84a; --k8:#f5cc60; --k9:#fde080;
  /* テキストを明るく */
  --tx0:#f8f4ee; --tx1:#ede5d8; --tx2:#cfc0a6;
  --tx3:#a08870; --tx4:#706050; --tx5:#3c3228;
}

/* ─── App Shell: 背景を菱形格子に刷新 ─── */
/* 旧青海波::beforeを上書き */
.mg-app::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 2 L46 24 L24 46 L2 24 Z' fill='none' stroke='rgba(221%2C168%2C68%2C0.10)' stroke-width='0.8'/%3E%3Cpath d='M24 10 L38 24 L24 38 L10 24 Z' fill='none' stroke='rgba(221%2C168%2C68%2C0.06)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 48px 48px;
  opacity: 1;
}

/* 光条をよりシャープに */
.mg-app::after {
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(221,168,68,.00) 38%,
    rgba(248,220,120,.08) 50%,
    rgba(221,168,68,.00) 62%,
    transparent 100%);
  animation: katanaGleam 14s ease-in-out infinite;
}

/* ─── ヒーローブロック ─── */
.mg-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px 32px;
  position: relative;
  background: linear-gradient(180deg,
    rgba(221,168,68,.07) 0%,
    rgba(221,168,68,.02) 40%,
    transparent 100%);
  border-bottom: 1px solid rgba(221,168,68,.14);
  overflow: hidden;
}

/* 上部の金箔ライン */
.mg-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(221,168,68,.0) 10%,
    rgba(221,168,68,.7) 35%,
    rgba(253,224,128,.95) 50%,
    rgba(221,168,68,.7) 65%,
    rgba(221,168,68,.0) 90%,
    transparent 100%);
}

/* 下部のぼんやりした金グロー */
.mg-hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(221,168,68,.3), transparent);
  filter: blur(4px);
}

/* 家紋円 */
.mg-hero-kamon {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  background: radial-gradient(circle at 40% 35%,
    rgba(221,168,68,.18) 0%, rgba(221,168,68,.04) 60%, transparent 100%);
  border: 1px solid rgba(221,168,68,.25);
  box-shadow:
    0 0 0 6px rgba(221,168,68,.04),
    0 0 0 12px rgba(221,168,68,.02),
    0 0 32px rgba(221,168,68,.08);
  margin-bottom: 18px;
  animation: monjinPulse 4s ease-in-out infinite;
  position: relative;
}

/* 外側リング */
.mg-hero-kamon::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(221,168,68,.12);
  animation: monjinPulse 4s ease-in-out infinite reverse;
}

.mg-hero-fish {
  position: relative;
  z-index: 1;
}

/* eyebrow（小さな上部テキスト） */
.mg-hero-eyebrow {
  font-family: var(--fs);
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(221,168,68,.45);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mg-hero-eyebrow::before,
.mg-hero-eyebrow::after {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(221,168,68,.3), transparent);
}

/* メインタイトル「メンデル君」 */
.mg-hero-title {
  font-family: var(--fm);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: .22em;
  line-height: 1.05;
  margin: 0 0 10px;
  /* 純金グラデーション文字 */
  background: linear-gradient(
    160deg,
    #8a6018 0%,
    #c8982a 20%,
    #e8b848 38%,
    #fde080 50%,
    #e8b848 62%,
    #c8982a 80%,
    #8a6018 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* 金の輝きアニメーション */
  background-size: 200% auto;
  animation: goldShimmer 6s ease-in-out infinite;
}
@keyframes goldShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* サブタイトル */
.mg-hero-sub {
  font-family: var(--fm);
  font-size: 1.05rem;
  color: rgba(221,168,68,.6);
  letter-spacing: .22em;
  margin: 0 0 8px;
}

/* 説明文 */
.mg-hero-desc {
  font-family: var(--fs);
  font-size: 1.0rem;
  color: var(--tx3);
  letter-spacing: .06em;
  line-height: 1.8;
  max-width: 420px;
}

/* 旧ヘッダーは使わない（非表示） */
.mg-header {
  display: none !important;
}

/* ─── タブナビ: よりシンプルに ─── */
.mg-tab-nav {
  background: var(--m1);
  border-bottom: 1px solid rgba(221,168,68,.12);
  padding: 0 12px;
  gap: 4px;
}

.mg-tab-btn {
  font-family: var(--fm);
  font-size: 1.0rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tx3);
  padding: 16px 10px 14px;
  transition: all .3s var(--ez);
  border-bottom: 2px solid transparent;
}
.mg-tab-btn.mg-tab-active {
  color: var(--k8);
  border-bottom-color: var(--k7);
}
.mg-tab-btn:hover { color: var(--tx1); }

/* ─── 親カード: よりスッキリ ─── */
.mg-parent-label {
  font-family: var(--fm);
  font-size: 1.0rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--tx0);
}

/* ─── 形質リスト: 文字を大きく ─── */
.mg-trait-label {
  font-size: 1.0rem;
  color: var(--tx1);
  line-height: 1.5;
}
.mg-trait-option input:checked + .mg-trait-label {
  color: var(--k8);
  font-weight: 600;
}

.mg-prec {
  font-size: .72rem;
  padding: 2px 7px;
}

/* ─── 計算ボタン: ゴールドを純粋に ─── */
.mg-btn-calc {
  font-family: var(--fm);
  font-size: 1.15rem;
  letter-spacing: .22em;
  padding: 18px 24px;
  background: linear-gradient(
    135deg,
    #6a4e10 0%, #b88030 25%,
    #f5cc60 50%, #b88030 75%, #6a4e10 100%
  );
  background-size: 200% auto;
  animation: goldShimmer 5s ease-in-out infinite;
  border: none;
  box-shadow:
    0 0 0 1px rgba(221,168,68,.3),
    0 8px 32px rgba(168,120,32,.35),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.2);
}

.mg-btn-calc:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(221,168,68,.5),
    0 12px 40px rgba(221,168,68,.4),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.mg-btn-reset {
  font-size: 1.0rem;
  padding: 16px 20px;
  letter-spacing: .1em;
}

/* ─── 結果エリア ─── */
.mg-result-title {
  font-family: var(--fm);
  font-size: 1.3rem;
  letter-spacing: .18em;
}
.mg-result-trait-name {
  font-size: 1.05rem;
  font-weight: 700;
}
.mg-result-pct {
  font-size: 1.8rem;
  font-weight: 700;
}
.mg-result-note {
  font-size: .95rem;
  line-height: 1.85;
}

/* ─── 注意書き ─── */
.mg-disclaimer {
  font-size: .92rem;
  line-height: 1.95;
  color: var(--tx3);
}

/* ─── edo-toggle（ドロワー）: さらに見やすく ─── */
.edo-toggle-title {
  font-family: var(--fm) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}
.edo-toggle-badge {
  font-size: .92rem !important;
}
.edo-toggle-hint {
  font-size: .86rem !important;
  color: var(--tx3) !important;
}
.edo-toggle { padding: 18px 16px !important; }

/* 形質リスト（JS生成） */
.mg-category-title {
  font-size: .9rem !important;
  letter-spacing: .18em !important;
  font-weight: 700 !important;
  color: rgba(221,168,68,.55) !important;
}
.mg-trait-name {
  font-size: 1.05rem !important;
  font-weight: 500;
  color: var(--tx1) !important;
}
.mg-trait-note {
  font-size: .9rem !important;
  line-height: 1.75 !important;
  color: var(--tx3) !important;
}
.mg-precision-badge {
  font-size: .74rem !important;
}
.mg-trait-item {
  padding: 9px 8px !important;
  gap: 12px !important;
}
.mg-trait-item input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
}

/* 結果カード（JS生成） */
.mg-probability-badge {
  font-size: 1.6rem !important;
  font-weight: 700;
}
.mg-trait-result-name {
  font-size: 1.05rem !important;
  font-weight: 700;
}
.mg-result-note {
  font-size: .92rem !important;
}

/* ─── カテゴリ見出し区切り ─── */
.mg-category-sep {
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(221,168,68,.15), transparent);
  margin: 10px 0;
}

/* ─── モバイル対応 ─── */
@media (max-width: 600px) {
  .mg-hero {
    padding: 28px 16px 24px;
  }
  .mg-hero-title {
    font-size: clamp(2.0rem, 10vw, 2.8rem);
    letter-spacing: .16em;
  }
  .mg-hero-eyebrow {
    font-size: .68rem;
    letter-spacing: .22em;
  }
  .mg-hero-sub  { font-size: .92rem; }
  .mg-hero-desc { font-size: .9rem;  }
  .mg-hero-kamon { width: 64px; height: 64px; font-size: 2.0rem; }

  .mg-tab-btn {
    font-size: .88rem;
    padding: 14px 6px 12px;
  }
  .edo-toggle-title { font-size: 1.05rem !important; }
  .mg-trait-name    { font-size: 1.0rem  !important; }
  .mg-btn-calc { font-size: 1.05rem; padding: 16px 18px; }
}

/* ─── 遺伝の仕組みタブ / メダカ注意点タブの文字 ─── */
.mg-guide-h3 { font-size: 1.15rem; font-family: var(--fm); }
.mg-guide-p  { font-size: 1.0rem;  line-height: 1.9; }
.mg-law-title{ font-size: 1.0rem; }
.mg-law-card p { font-size: .95rem; line-height: 1.85; }

/* 繁殖記録タブ */
.mg-br-input,
.mg-br-select { font-size: 1.0rem !important; padding: 12px 14px !important; }
.mg-br-card-title { font-size: 1.0rem; }

/* トップへ戻るボタン */
.mg-scroll-top-btn {
  background: linear-gradient(135deg, #6a4e10, #d4a040) !important;
  font-size: 1.1rem !important;
  width: 48px !important;
  height: 48px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   累代シミュレーション CSS  v1.6.7
   2026-02-23 末尾追加
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* イントロ */
.mg-ruikei-intro {
  background: linear-gradient(135deg, rgba(221,168,68,.06), rgba(221,168,68,.02));
  border: 1px solid rgba(221,168,68,.18);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.mg-ruikei-intro-title {
  font-family: var(--fm);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--k8);
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.mg-ruikei-intro-desc {
  font-size: 1.0rem;
  color: var(--tx2);
  line-height: 1.9;
  margin-bottom: 12px;
}
.mg-ruikei-tip {
  font-size: .92rem;
  color: var(--tx3);
  background: rgba(221,168,68,.04);
  border-left: 3px solid rgba(221,168,68,.3);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  line-height: 1.75;
}

/* 結果タイトル */
.mg-ruikei-title {
  font-family: var(--fm);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--k8);
  letter-spacing: .12em;
  margin-bottom: 6px;
}
.mg-ruikei-note {
  font-size: .92rem;
  color: var(--tx3);
  margin-bottom: 20px;
  line-height: 1.75;
}

/* カード */
.mg-ruikei-card {
  background: var(--m2);
  border: 1px solid rgba(221,168,68,.14);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}

/* カードヘッダー */
.mg-ruikei-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  background: linear-gradient(90deg, rgba(221,168,68,.09), transparent);
  border-bottom: 1px solid rgba(221,168,68,.10);
}
.mg-ruikei-trait-name {
  font-family: var(--fm);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tx0);
  letter-spacing: .06em;
}
.mg-ruikei-fixed-badge {
  font-size: .82rem;
  font-weight: 700;
  color: #6ee7b7;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.25);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .04em;
}

/* 親表示 */
.mg-ruikei-parents {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: .92rem;
  color: var(--tx3);
  border-bottom: 1px solid rgba(221,168,68,.07);
}
.mg-ruikei-parent-f { color: #80c0f0; }
.mg-ruikei-parent-m { color: #fca8cc; }
.mg-ruikei-x { color: var(--tx4); font-weight: 700; }

/* グラフ */
.mg-ruikei-canvas {
  display: block;
  width: 100% !important;
  max-height: 200px;
  padding: 12px 16px 0;
  background: transparent;
}

/* テーブル */
.mg-ruikei-table-wrap {
  overflow-x: auto;
  padding: 12px 16px;
}
.mg-ruikei-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.mg-ruikei-table th {
  font-family: var(--fm);
  font-size: .85rem;
  color: rgba(221,168,68,.7);
  font-weight: 700;
  letter-spacing: .08em;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(221,168,68,.15);
  text-align: center;
  white-space: nowrap;
}
.mg-ruikei-th-sub {
  font-family: var(--fs);
  font-size: .72rem;
  font-weight: 400;
  color: var(--tx4);
  letter-spacing: 0;
}
.mg-ruikei-table td {
  color: var(--tx2);
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(221,168,68,.05);
  font-size: .95rem;
}
.mg-ruikei-table tbody tr:hover td {
  background: rgba(221,168,68,.04);
}
.mg-ruikei-gen-label {
  font-family: var(--fm);
  font-weight: 700;
  color: var(--tx1) !important;
  text-align: left !important;
  letter-spacing: .06em;
}
.mg-ruikei-pct {
  font-family: var(--fm);
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--k8) !important;
}
.mg-ruikei-fixed-row td {
  background: rgba(16,185,129,.06) !important;
  color: #a7f3d0 !important;
}
.mg-ruikei-fixed-row .mg-ruikei-pct {
  color: #6ee7b7 !important;
}

/* コメント */
.mg-ruikei-comment {
  font-size: .95rem;
  color: var(--tx3);
  line-height: 1.85;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(221,168,68,.07);
}

/* 空メッセージ */
.mg-ruikei-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--tx3);
  font-size: 1.0rem;
  line-height: 1.9;
  border: 1px dashed rgba(221,168,68,.18);
  border-radius: 10px;
}

/* スマホ */
@media (max-width: 600px) {
  .mg-ruikei-intro { padding: 14px 14px; }
  .mg-ruikei-card-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mg-ruikei-table { font-size: .88rem; }
  .mg-ruikei-table td, .mg-ruikei-table th { padding: 6px 7px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   累代シミュレーション CSS v2.0
   .mgc-* 専用名前空間
   2026-02-23 末尾追加
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 累代ボタン ── */
.mg-cumulative-trigger { margin: 14px 0 6px; }

.mg-btn-cumulative {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg,
    rgba(96,165,250,.05), rgba(96,165,250,.11), rgba(96,165,250,.05));
  border: 1px solid rgba(96,165,250,.25);
  border-radius: 10px;
  color: #93c5fd;
  font-family: 'Zen Old Mincho','YuMincho',serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .14em;
  cursor: pointer;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.mg-btn-cumulative::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%, rgba(96,165,250,.10) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.mg-btn-cumulative:hover::before { transform: translateX(100%); }
.mg-btn-cumulative:hover {
  border-color: rgba(96,165,250,.48);
  color: #bfdbfe;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(96,165,250,.15);
}
.mg-btn-cumulative:active { transform: translateY(1px); }
.mgc-btn-open {
  background: linear-gradient(135deg,
    rgba(96,165,250,.10), rgba(96,165,250,.06));
  border-color: rgba(96,165,250,.38);
  color: #60a5fa;
}

/* ── パネル ── */
.mg-cumulative-panel {
  margin: 4px 0 18px;
  /* animation:bothを外す（opacity:0固定バグ回避） */
}

/* ── パネルヘッダー ── */
.mgc-header-block {
  padding: 14px 18px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(96,165,250,.06), transparent);
  border: 1px solid rgba(96,165,250,.14);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.mgc-header-block::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.45), transparent);
}
.mgc-main-title {
  font-family: 'Zen Old Mincho','YuMincho',serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: .14em;
  margin-bottom: 4px;
}
.mgc-main-sub {
  font-size: .88rem;
  color: rgba(96,165,250,.45);
  letter-spacing: .05em;
}

/* ── 形質カード ── */
.mgc-card {
  background: rgba(8,8,12,.95);
  border: 1px solid rgba(221,168,68,.12);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  transition: border-color .2s;
}
.mgc-card:hover { border-color: rgba(221,168,68,.22); }

.mgc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 16px 11px;
  background: linear-gradient(90deg, rgba(221,168,68,.06), transparent);
  border-bottom: 1px solid rgba(221,168,68,.08);
}
.mgc-name {
  font-family: 'Zen Old Mincho','YuMincho',serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #f5cc60;
  letter-spacing: .1em;
  flex: 1;
}
.mgc-badge {
  font-size: .78rem;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.mgc-badge-fixed {
  background: rgba(110,231,183,.12);
  border: 1px solid rgba(110,231,183,.28);
  color: #6ee7b7;
}
.mgc-badge-unfixed {
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.2);
  color: #fbbf24;
}
.mgc-prec {
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(221,168,68,.07);
  border: 1px solid rgba(221,168,68,.16);
  color: rgba(221,168,68,.55);
}

/* グラフ */
.mgc-graph { padding: 12px 16px 4px; }

/* 凡例 */
.mgc-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 4px 16px 10px;
}
.mgc-leg {
  font-size: .78rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* テーブル */
.mgc-table-wrap {
  overflow-x: auto;
  padding: 0 16px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(221,168,68,.15) transparent;
}
.mgc-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 320px;
}
.mgc-th {
  font-size: .82rem;
  font-weight: 700;
  color: rgba(221,168,68,.4);
  letter-spacing: .1em;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(221,168,68,.1);
  white-space: nowrap;
}
.mgc-td {
  font-size: .92rem;
  color: #cfc0a6;
  padding: 8px 8px;
  border-bottom: 1px solid rgba(221,168,68,.05);
  vertical-align: middle;
}
.mgc-gen {
  font-family: 'Zen Old Mincho','YuMincho',serif;
  font-weight: 700;
  color: rgba(221,168,68,.65);
  white-space: nowrap;
  min-width: 48px;
}
.mgc-num {
  text-align: right;
  white-space: nowrap;
  min-width: 56px;
}
.mgc-pct {
  font-size: .82rem;
  color: #a09070;
  margin-left: 6px;
}
.mgc-bar-wrap {
  display: inline-block;
  width: 72px;
  height: 6px;
  background: rgba(255,255,255,.04);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}
.mgc-bar {
  height: 100%;
  border-radius: 3px;
}
.mgc-bar-a { background: linear-gradient(90deg, #b88030, #f5cc60); }
.mgc-bar-f { background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* 空メッセージ */
.mgc-empty {
  padding: 20px;
  text-align: center;
  color: rgba(221,168,68,.4);
  font-size: 1.0rem;
  border: 1px dashed rgba(221,168,68,.15);
  border-radius: 10px;
}

/* モバイル */
@media (max-width: 600px) {
  .mg-btn-cumulative { font-size: .95rem; padding: 14px 16px; }
  .mgc-main-title    { font-size: 1.0rem; }
  .mgc-name          { font-size: 1.0rem; }
  .mgc-td            { font-size: .85rem; padding: 7px 6px; }
  .mgc-bar-wrap      { width: 52px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   スピナー CSS v1.0 — .mgsp-* 専用
   genetics.css 末尾追加 2026-02-23
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mgsp-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(221,168,68,.25);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(221,168,68,.04);
  vertical-align: middle;
}

.mgsp-btn {
  width: 36px;
  height: 36px;
  background: rgba(221,168,68,.08);
  border: none;
  border-radius: 0;
  color: rgba(221,168,68,.7);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mgsp-btn:hover  { background: rgba(221,168,68,.18); color: #f5cc60; }
.mgsp-btn:active { background: rgba(221,168,68,.28); }
.mgsp-minus { border-right: 1px solid rgba(221,168,68,.15); }
.mgsp-plus  { border-left:  1px solid rgba(221,168,68,.15); }

.mgsp-input {
  width: 56px !important;
  padding: 6px 4px !important;
  text-align: center !important;
  border: none !important;
  border-radius: 0 !important;
  background: rgba(221,168,68,.04) !important;
  color: #f5cc60 !important;
  font-family: 'Zen Old Mincho','YuMincho',serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  -moz-appearance: textfield !important;
  -webkit-text-fill-color: #f5cc60 !important;  /* iOS Safari対応 */
  caret-color: #f5cc60 !important;
}
.mgsp-input::-webkit-outer-spin-button,
.mgsp-input::-webkit-inner-spin-button { -webkit-appearance: none !important; }
.mgsp-input:focus { outline: none; background: rgba(221,168,68,.06) !important; color: #f5cc60 !important; -webkit-text-fill-color: #f5cc60 !important; }

@media (max-width: 600px) {
  .mgsp-btn   { width: 40px; height: 40px; font-size: 1.4rem; }
  .mgsp-input { width: 52px !important; font-size: 1.1rem !important; }
}

/* =====================================================
   v1.7.3 全体文字サイズ拡大・スマホ詳細改善・繁殖ドロワー
   2026-02-23 追加 ※末尾追加のみ
   ===================================================== */

/* ── 全体文字サイズ拡大 ─────────────────────────────── */
#medaka-genetics-app,
#mg-tab-simulator,
#mg-tab-breeding,
#mg-tab-genetics,
#mg-tab-guide {
  font-size: 1.05rem !important;
}

/* 形質チェックボックスのラベル */
.mg-trait-item { font-size: 1.0rem !important; }
.mg-trait-name { font-size: 1.0rem !important; }
.mg-trait-note { font-size: 0.88rem !important; }

/* カテゴリタイトル */
.mg-category-title { font-size: 1.0rem !important; }

/* 精度バッジ */
.mg-precision-badge { font-size: 0.78rem !important; }

/* 遺伝予測結果 */
.mg-result-card-title { font-size: 1.1rem !important; }
.mg-result-percent { font-size: 1.6rem !important; }
.mg-result-note { font-size: 0.9rem !important; }

/* 累代カード */
.mgc-name { font-size: 1.05rem !important; }
.mgc-th { font-size: 0.88rem !important; }
.mgc-td { font-size: 0.88rem !important; }
.mgc-pct { font-size: 0.88rem !important; }

/* 繁殖記録フォーム */
.mg-br-input,
.mg-br-select,
.mg-br-textarea { font-size: 1.0rem !important; }
.mg-br-check-label { font-size: 1.0rem !important; }
.mg-br-cat-title { font-size: 0.92rem !important; }
.mg-br-card-title { font-size: 1.0rem !important; }
.mg-br-badge { font-size: 0.8rem !important; padding: 3px 8px !important; }

/* ボタン */
.mg-btn-calc,
.mg-btn-reset,
.mg-btn-cumulative,
.mg-br-save-btn,
.mg-br-btn-sub { font-size: 1.0rem !important; }

/* ── 繁殖記録 父母ドロワー ─────────────────────────── */
.edo-br-parent-drawer {
  border: 1px solid rgba(232,184,74,.25) !important;
  border-radius: 10px !important;
  overflow: hidden;
  background: var(--m2, rgba(30,25,15,.6)) !important;
}

.edo-br-drawer-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  color: #f5cc60;
  font-family: 'Zen Old Mincho','YuMincho',serif;
  font-size: 0.97rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid rgba(232,184,74,.12);
  transition: background .15s;
}
.edo-br-drawer-btn:hover { background: rgba(232,184,74,.07); }

.edo-br-drawer-icon {
  font-size: 1.15rem;
  min-width: 20px;
}
.edo-br-drawer-label {
  flex: 1;
}
.edo-br-drawer-badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  color: rgba(245,204,96,.5);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.edo-br-badge-on {
  background: rgba(232,184,74,.2) !important;
  color: #f5cc60 !important;
}
.edo-br-drawer-arrow {
  font-size: 0.75rem;
  color: rgba(245,204,96,.5);
  transition: transform .2s;
}
.edo-br-drawer-body {
  padding: 10px 12px 12px;
  max-height: 280px;
  overflow-y: auto;
}
@media (max-width: 480px) {
  .edo-br-drawer-body { max-height: 220px; }
}

/* ── 繁殖記録 詳細テーブル スマホ改善 ──────────────── */
/* スマホでは2カラムグリッドを1カラムに */
@media (max-width: 600px) {
  .mg-br-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .mg-br-detail-chart-wrap {
    order: 1;
  }
  .mg-br-detail-info {
    order: 2;
  }
}

/* 詳細テーブル全体 */
.mg-br-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem !important;
  table-layout: fixed;
}
.mg-br-results-table th {
  padding: 7px 6px !important;
  font-size: 0.82rem !important;
  background: rgba(232,184,74,.1);
  color: #e8b84a;
  text-align: center;
  white-space: nowrap;
}
.mg-br-results-table td {
  padding: 7px 6px !important;
  font-size: 0.88rem !important;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-align: center;
  word-break: break-all;
}
.mg-br-results-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: #f5cc60;
  font-size: 0.92rem !important;
  word-break: break-word;
  min-width: 60px;
}
/* スマホ用：テーブルを縦積みカード形式に */
@media (max-width: 480px) {
  .mg-br-results-table thead { display: none; }
  .mg-br-results-table tr {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 8px 4px;
    gap: 4px;
    align-items: center;
  }
  .mg-br-results-table td {
    padding: 3px 6px !important;
    border-bottom: none !important;
    text-align: left;
  }
  .mg-br-results-table td:first-child {
    flex: 0 0 100%;
    font-size: 0.95rem !important;
    color: #f5cc60;
    padding-bottom: 2px !important;
  }
  .mg-br-results-table td:nth-child(2)::before { content: '実測：'; color: rgba(245,204,96,.55); font-size: 0.78rem; }
  .mg-br-results-table td:nth-child(3)::before { content: '理論：'; color: rgba(245,204,96,.55); font-size: 0.78rem; }
  .mg-br-results-table td:nth-child(4)::before { content: '差：'; color: rgba(245,204,96,.55); font-size: 0.78rem; }

  /* 繁殖記録カードのサマリーも見やすく */
  .mg-br-card-summary {
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 0.88rem !important;
  }
  .mg-br-card-summary span {
    font-size: 0.88rem !important;
  }
}

/* 差の色 */
.mg-br-diff-pos { color: #6ee7b7 !important; font-weight: 700; }
.mg-br-diff-neg { color: #f87171 !important; font-weight: 700; }

/* =====================================================
   v1.7.4 実測出現数 反映ボタン
   2026-02-23 追加 ※末尾追加のみ
   ===================================================== */
.mg-br-pct-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 18px;
  background: rgba(232,184,74,.12);
  border: 1px solid rgba(232,184,74,.35);
  border-radius: 8px;
  color: #f5cc60;
  font-family: 'Zen Old Mincho','YuMincho',serif;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mg-br-pct-refresh-btn:hover {
  background: rgba(232,184,74,.22);
  border-color: rgba(232,184,74,.6);
}
.mg-br-pct-refresh-done {
  background: rgba(110,231,183,.15) !important;
  border-color: rgba(110,231,183,.5) !important;
  color: #6ee7b7 !important;
}

/* =====================================================
   v1.7.5 キャリア注意書き
   2026-02-23 追加 ※末尾追加のみ
   ===================================================== */
.mg-carrier-warning {
  margin-top: 10px;
  padding: 12px 16px;
  background: rgba(251, 191, 36, 0.10);
  border: 1.5px solid rgba(251, 191, 36, 0.45);
  border-radius: 10px;
  color: #fde68a;
  font-size: 1.0rem !important;
  line-height: 1.65;
}
.mg-carrier-warning strong {
  color: #fbbf24;
  font-size: 1.05rem !important;
}
@media (max-width: 480px) {
  .mg-carrier-warning {
    font-size: 0.95rem !important;
    padding: 10px 12px;
  }
}

/* =====================================================
   v1.7.5 全体フォントサイズ確実適用
   2026-02-23 追加 ※末尾追加のみ
   v1.7.3の #mg-tab-guide は存在しないIDだったため修正
   .mg-app ベースに統一して全タブ・全要素に確実に適用
   ===================================================== */
.mg-app,
#medaka-genetics-app {
  font-size: 1.05rem !important;
}

/* 各タブコンテンツ（実在するIDのみ） */
#mg-tab-simulator,
#mg-tab-genetics,
#mg-tab-medaka,
#mg-tab-breeding {
  font-size: 1.05rem !important;
}

/* フォーム・入力系 */
.mg-app input,
.mg-app select,
.mg-app textarea,
.mg-app button,
.mg-app label {
  font-size: 1.0rem !important;
}

/* 本文テキスト */
.mg-app p,
.mg-app li,
.mg-app td,
.mg-app th,
.mg-app span:not(.mg-precision-badge):not(.mg-br-badge) {
  font-size: inherit;
}

/* 結果カードのノート */
.mg-result-note { font-size: 0.95rem !important; }

/* 繁殖記録一覧カード */
.mg-br-card-summary { font-size: 0.95rem !important; }


/* =====================================================
   v1.7.6 フォントサイズ 最終確定版
   2026-02-23 追加 ※末尾追加のみ
   メンデル君タイトル(.mg-hero-title)は変更しない
   それ以外の全テキストを大きく・見やすく統一
   ===================================================== */

/* ── ベース：アプリ全体 ─────────────────────────────── */
.mg-app { font-size: 1.08rem !important; }

/* ── ヒーローエリア（タイトル以外） ─────────────────── */
/* .mg-hero-title は変更しない（clamp(2.4rem〜3.6rem) を維持） */
.mg-hero-sub  { font-size: 1.05rem !important; }
.mg-hero-desc { font-size: 1.0rem  !important; }
.mg-hero-eyebrow { font-size: 0.88rem !important; }

/* ── タブボタン ──────────────────────────────────────── */
.mg-tab-btn { font-size: 1.0rem !important; }

/* ── 父母選択パネル ──────────────────────────────────── */
.mg-parent-label   { font-size: 1.05rem !important; }
.mg-category-title { font-size: 1.02rem !important; font-weight: 700 !important; }
.mg-trait-name     { font-size: 1.0rem  !important; }
.mg-trait-note     { font-size: 0.90rem !important; }
.mg-precision-badge { font-size: 0.80rem !important; }

/* ── 計算ボタン ──────────────────────────────────────── */
.mg-btn-calc   { font-size: 1.08rem !important; }
.mg-btn-reset  { font-size: 1.0rem  !important; }
.mg-btn-cumulative { font-size: 1.0rem !important; }

/* ── 遺伝予測結果 ────────────────────────────────────── */
.mg-result-title       { font-size: 1.15rem !important; }
.mg-trait-result-name  { font-size: 1.05rem !important; }
.mg-probability-badge  { font-size: 1.3rem  !important; }
.mg-result-note        { font-size: 0.95rem !important; line-height: 1.7 !important; }
.mg-punnett-toggle     { font-size: 0.95rem !important; }
.mg-punnett-table th,
.mg-punnett-table td   { font-size: 0.92rem !important; }

/* ── キャリア注意書き ────────────────────────────────── */
.mg-carrier-warning       { font-size: 1.0rem !important; line-height: 1.7 !important; }
.mg-carrier-warning strong { font-size: 1.05rem !important; }

/* ── 累代シミュレーション ────────────────────────────── */
.mgc-main-title { font-size: 1.1rem !important; }
.mgc-main-sub   { font-size: 0.95rem !important; }
.mgc-name       { font-size: 1.05rem !important; }
.mgc-th         { font-size: 0.90rem !important; }
.mgc-td         { font-size: 0.90rem !important; }
.mgc-pct        { font-size: 0.90rem !important; }

/* ── 遺伝の仕組み・解説タブ ─────────────────────────── */
.mg-guide-h3    { font-size: 1.15rem !important; }
.mg-guide-p     { font-size: 1.0rem  !important; line-height: 1.85 !important; }
.mg-law-title   { font-size: 1.02rem !important; }
.mg-law-card p  { font-size: 0.97rem !important; }

/* ── 繁殖記録フォーム ────────────────────────────────── */
.mg-br-input,
.mg-br-select,
.mg-br-textarea       { font-size: 1.0rem !important; }
.mg-br-check-label    { font-size: 1.0rem !important; }
.mg-br-cat-title      { font-size: 0.95rem !important; font-weight: 700 !important; }
.mg-br-section-label  { font-size: 1.0rem !important; }

/* ── 繁殖記録一覧カード ──────────────────────────────── */
.mg-br-card-title   { font-size: 1.02rem !important; }
.mg-br-card-summary { font-size: 0.97rem !important; }
.mg-br-badge        { font-size: 0.82rem !important; }
.mg-br-detail-btn,
.mg-br-edit-btn,
.mg-br-delete-btn   { font-size: 0.95rem !important; }

/* ── 繁殖記録 詳細テーブル ───────────────────────────── */
.mg-br-results-table th { font-size: 0.90rem !important; }
.mg-br-results-table td { font-size: 0.92rem !important; }

/* ── ドロワーボタン ──────────────────────────────────── */
.edo-br-drawer-btn   { font-size: 1.0rem !important; }
.edo-toggle-title    { font-size: 1.05rem !important; }

/* ── 注意・免責テキスト ──────────────────────────────── */
.mg-disclaimer { font-size: 0.95rem !important; line-height: 1.8 !important; }

/* ── スマホ調整 ──────────────────────────────────────── */
@media (max-width: 480px) {
  .mg-app { font-size: 1.02rem !important; }
  .mg-probability-badge { font-size: 1.15rem !important; }
  .mg-result-note { font-size: 0.92rem !important; }
  .mg-carrier-warning { font-size: 0.95rem !important; }
}

/* =====================================================
   v1.7.7 フォントサイズ px固定・完全上書き版
   2026-02-23 追加 ※末尾追加のみ
   remはWordPressテーマのhtmlフォントサイズ設定に
   引っ張られるためpx固定値に変更
   ===================================================== */

/* ── メンデル君タイトル：大きく復元（px固定） ──────── */
.mg-hero-title {
  font-size: clamp(38px, 6vw, 58px) !important;
}
@media (max-width: 600px) {
  .mg-hero-title {
    font-size: clamp(32px, 10vw, 46px) !important;
  }
}

/* ── アプリ全体ベース ────────────────────────────────── */
#medaka-genetics-app,
#medaka-genetics-app * {
  box-sizing: border-box;
}
#medaka-genetics-app {
  font-size: 17px !important;
}

/* ── ヒーローエリア ──────────────────────────────────── */
.mg-hero-eyebrow { font-size: 13px !important; }
.mg-hero-sub     { font-size: 17px !important; }
.mg-hero-desc    { font-size: 16px !important; }

/* ── タブボタン ──────────────────────────────────────── */
.mg-tab-btn { font-size: 15px !important; }

/* ── 父母パネル ──────────────────────────────────────── */
.mg-parent-label   { font-size: 17px !important; }
.mg-category-title { font-size: 16px !important; font-weight: 700 !important; }
.mg-trait-item     { font-size: 16px !important; }
.mg-trait-name     { font-size: 16px !important; }
.mg-trait-note     { font-size: 14px !important; }
.mg-precision-badge { font-size: 12px !important; }

/* ── ボタン類 ────────────────────────────────────────── */
.mg-btn-calc       { font-size: 17px !important; }
.mg-btn-reset      { font-size: 16px !important; }
.mg-btn-cumulative { font-size: 16px !important; }

/* ── 結果カード ──────────────────────────────────────── */
.mg-result-title      { font-size: 18px !important; }
.mg-trait-result-name { font-size: 17px !important; }
.mg-probability-badge { font-size: 22px !important; }
.mg-result-note       { font-size: 15px !important; line-height: 1.75 !important; }
.mg-punnett-toggle    { font-size: 15px !important; }
.mg-punnett-table th,
.mg-punnett-table td  { font-size: 14px !important; }

/* ── キャリア注意書き ────────────────────────────────── */
.mg-carrier-warning        { font-size: 16px !important; line-height: 1.75 !important; }
.mg-carrier-warning strong { font-size: 17px !important; }

/* ── 累代シミュレーション ────────────────────────────── */
.mgc-main-title { font-size: 18px !important; }
.mgc-main-sub   { font-size: 15px !important; }
.mgc-name       { font-size: 17px !important; }
.mgc-th         { font-size: 14px !important; }
.mgc-td         { font-size: 14px !important; }
.mgc-pct        { font-size: 14px !important; }
.mgc-badge      { font-size: 13px !important; }

/* ── 遺伝の仕組みタブ ────────────────────────────────── */
.mg-guide-h3   { font-size: 18px !important; }
.mg-guide-p    { font-size: 16px !important; line-height: 1.9 !important; }
.mg-law-title  { font-size: 16px !important; }
.mg-law-card p { font-size: 15px !important; }

/* ── 繁殖記録 ────────────────────────────────────────── */
.mg-br-input,
.mg-br-select,
.mg-br-textarea    { font-size: 16px !important; }
.mg-br-check-label { font-size: 16px !important; }
.mg-br-cat-title   { font-size: 15px !important; font-weight: 700 !important; }
.mg-br-section-label { font-size: 16px !important; }
.mg-br-card-title  { font-size: 16px !important; }
.mg-br-card-summary { font-size: 15px !important; }
.mg-br-badge       { font-size: 13px !important; }
.mg-br-detail-btn,
.mg-br-edit-btn,
.mg-br-delete-btn  { font-size: 15px !important; }
.mg-br-btn-sub     { font-size: 16px !important; }
.mg-br-results-table th { font-size: 14px !important; }
.mg-br-results-table td { font-size: 15px !important; }
.edo-br-drawer-btn  { font-size: 16px !important; }
.edo-toggle-title   { font-size: 17px !important; }

/* ── 免責テキスト ────────────────────────────────────── */
.mg-disclaimer { font-size: 15px !important; line-height: 1.85 !important; }

/* ── スマホ（480px以下）────────────────────────────────*/
@media (max-width: 480px) {
  #medaka-genetics-app  { font-size: 15px !important; }
  .mg-trait-name        { font-size: 15px !important; }
  .mg-probability-badge { font-size: 20px !important; }
  .mg-result-note       { font-size: 14px !important; }
  .mg-carrier-warning   { font-size: 15px !important; }
  .mgc-th, .mgc-td, .mgc-pct { font-size: 13px !important; }
}

/* ══════════════════════════════════════════════════════════════
   ゴール逆算くん v3.0〜v3.1 専用スタイル
   末尾追加 2026-02-23 ※既存コード無変更
══════════════════════════════════════════════════════════════ */

/* ─── タブ内ラッパー ─── */
.mgs-tab-inner { padding: 0; }

/* ─── ヒーローバナー ─── */
.mgs-hero { display:flex; align-items:center; gap:1rem; padding:1.2rem 1.5rem; background:linear-gradient(135deg,rgba(221,168,68,.1),rgba(8,16,28,.65)); border:1px solid var(--bd2); border-radius:12px; margin-bottom:1.25rem; }
.mgs-hero-icon  { font-size:2rem; flex-shrink:0; }
.mgs-hero-title { color:var(--k7); font-size:1.1rem; font-weight:800; letter-spacing:.04em; margin-bottom:.15rem; }
.mgs-hero-ver   { color:var(--tx3); font-size:.7rem; font-weight:400; margin-left:.5rem; }
.mgs-hero-sub   { color:var(--tx2); font-size:.8rem; line-height:1.55; }

/* ─── 精度説明バナー ─── */
.mgs-prec-banner { display:flex; flex-wrap:wrap; gap:.5rem; padding:.75rem 1rem; background:rgba(0,0,0,.3); border:1px solid var(--bd1); border-radius:10px; margin-bottom:1.25rem; font-size:.76rem; color:var(--tx2); }
.mgs-prec-item { flex:1; min-width:160px; }

/* ─── 顕性固定フラグUI ─── */
.mgs-fixopt-banner { background:rgba(221,168,68,.06); border:1px solid var(--bd2); border-radius:10px; padding:.85rem 1.1rem; margin-bottom:1.25rem; }
.mgs-fixopt-title  { color:var(--k7); font-size:.88rem; font-weight:700; margin-bottom:.35rem; }
.mgs-fixopt-note   { color:var(--tx3); font-size:.76rem; margin-bottom:.6rem; line-height:1.6; }
.mgs-fixopt-row    { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; padding:.4rem 0; border-bottom:1px solid var(--bd0); }
.mgs-fixopt-row:last-child { border-bottom:none; }
.mgs-fixopt-name   { color:var(--tx1); font-size:.82rem; font-weight:600; min-width:120px; }
.mgs-fixopt-lbl    { display:flex; align-items:center; gap:.4rem; color:var(--tx2); font-size:.78rem; cursor:pointer; padding:.2rem .5rem; background:var(--sf0); border:1px solid var(--bd1); border-radius:6px; transition:background .15s; }
.mgs-fixopt-lbl:hover { background:var(--sf1); }
.mgs-fixopt-cb     { accent-color:var(--k5); }

/* ─── セクション ─── */
.mgs-section { margin-bottom:1.5rem; border:1px solid var(--bd1); border-radius:12px; overflow:hidden; background:var(--sf0); }
.mgs-section-head { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.85rem 1.25rem; background:linear-gradient(90deg,rgba(221,168,68,.1),transparent); border-bottom:1px solid var(--bd1); }
.mgs-step-chip    { background:var(--k4); color:#fff; font-size:.67rem; font-weight:800; padding:.17rem .5rem; border-radius:20px; letter-spacing:.06em; }
.mgs-section-title { color:var(--tx0); font-size:.98rem; font-weight:700; }
.mgs-section-note  { color:var(--tx3); font-size:.78rem; padding:.45rem 1.25rem; border-bottom:1px solid var(--bd0); background:rgba(0,0,0,.15); }
.mgs-section .mg-traits-container { padding:1rem 1.25rem; }
.mgs-section .mg-parents-grid { padding:0 1.25rem 1.25rem; }

/* ─── 実行ボタン ─── */
.mgs-run-btn { background:linear-gradient(135deg,var(--k4),var(--k7)) !important; font-size:.98rem !important; padding:.72rem 2rem !important; }
.mgs-run-btn:hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 4px 18px rgba(221,168,68,.25) !important; }

/* ─── 性別フィルタ ─── */
.v31-sex-wrapper { display:flex; align-items:center; }
.v31-sex-lbl     { color:var(--tx2); font-size:.78rem; font-weight:600; display:flex; align-items:center; gap:.5rem; white-space:nowrap; }
.v31-sex-sel     { background:var(--m4); color:var(--tx1); border:1px solid var(--bd2); border-radius:6px; padding:.3rem .6rem; font-size:.78rem; cursor:pointer; }

/* ─── エラー ─── */
.mgs-error { padding:1.5rem; text-align:center; color:var(--r4); font-weight:600; background:rgba(208,40,16,.08); border-radius:8px; border:1px solid rgba(208,40,16,.25); }

/* ─── 依存関係警告ブロック ─── */
.v31-dep-block { margin-bottom:1.25rem; display:flex; flex-direction:column; gap:.4rem; }
.v31-dep-item  { padding:.6rem .85rem; border-radius:8px; font-size:.8rem; line-height:1.6; }
.v31-dep-error { background:rgba(208,40,16,.1); border:1px solid rgba(208,40,16,.35); color:#fca5a5; }
.v31-dep-warn  { background:rgba(255,184,77,.08); border:1px solid rgba(255,184,77,.3); color:#ffb84d; }
.v31-dep-info  { background:rgba(100,200,255,.07); border:1px solid rgba(100,200,255,.22); color:#64c8ff; }

/* ─── 結果ラッパー ─── */
.mgs-result-wrap { padding:.25rem 0; }

/* ─── サマリーバナー ─── */
.mgs-summ { display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.3rem; border-radius:12px; margin-bottom:1.5rem; border:1px solid; }
.mgs-summ-good { background:rgba(60,200,90,.1);  border-color:rgba(60,200,90,.35); }
.mgs-summ-mid  { background:rgba(255,200,50,.08); border-color:rgba(255,200,50,.35); }
.mgs-summ-hard { background:rgba(210,50,50,.08);  border-color:rgba(210,50,50,.3); }
.mgs-summ-icon { font-size:2.2rem; flex-shrink:0; line-height:1; }
.mgs-summ-ttl  { font-size:.72rem; font-weight:700; color:var(--tx3); letter-spacing:.1em; text-transform:uppercase; margin-bottom:.28rem; }
.mgs-summ-msg  { color:var(--tx0); font-size:.95rem; font-weight:600; line-height:1.55; margin-bottom:.45rem; }
.mgs-summ-goals { display:flex; flex-wrap:wrap; gap:.28rem; }
.mgs-chip { background:var(--sf2); border:1px solid var(--bd2); color:var(--k7); font-size:.74rem; padding:.16rem .52rem; border-radius:20px; font-weight:600; }

/* ─── チャート ─── */
.mgs-chart-box  { background:rgba(3,7,12,.6); border:1px solid var(--bd1); border-radius:12px; padding:1.1rem; margin-bottom:1.5rem; }
.mgs-chart-ttl  { color:var(--k7); font-size:.9rem; font-weight:700; margin-bottom:.85rem; }
.mgs-chart-note { color:var(--tx3); font-size:.7rem; margin-top:.6rem; text-align:center; line-height:1.5; }

/* ─── 世代リスト ─── */
.mgs-gen-ttl  { color:var(--k7); font-size:.95rem; font-weight:700; margin-bottom:.8rem; padding-bottom:.45rem; border-bottom:1px solid var(--bd1); }
.mgs-gen-list { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.5rem; }
.mgs-gcard    { background:var(--sf0); border:1px solid var(--bd1); border-radius:10px; padding:.9rem 1.15rem; transition:border-color .2s; }
.mgs-gcard-best { border-color:var(--k5); background:rgba(221,168,68,.06); box-shadow:0 0 16px rgba(221,168,68,.1); }
.mgs-gcard-head { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin-bottom:.65rem; }
.mgs-gbadge { background:var(--k3); color:var(--k8); font-size:.9rem; font-weight:800; padding:.2rem .65rem; border-radius:20px; letter-spacing:.04em; font-family:'DM Sans',sans-serif; }
.mgs-best-chip { background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.4); color:#ffd700; font-size:.7rem; font-weight:700; padding:.16rem .52rem; border-radius:20px; }
.mgs-fix-lbl { color:var(--tx2); font-size:.76rem; margin-left:auto; }

/* ─── 複合確率行 ─── */
.mgs-combined     { display:flex; align-items:center; gap:.65rem; padding:.52rem .82rem; background:rgba(0,0,0,.25); border-radius:8px; margin-bottom:.65rem; flex-wrap:wrap; }
.mgs-combined-lbl { color:var(--tx1); font-size:.82rem; font-weight:600; flex:1; }
.mgs-combined-pct { font-size:.95rem !important; font-weight:800 !important; }
.mgs-low-note     { font-size:.68rem; color:var(--r4); background:rgba(208,40,16,.1); padding:.1rem .38rem; border-radius:10px; }
.v31-no-parent-note { font-size:.68rem; color:#ffb84d; background:rgba(255,184,77,.1); padding:.1rem .38rem; border-radius:10px; }

/* ─── 内訳折りたたみ ─── */
.mgs-breakdown { margin-bottom:.65rem; }
.mgs2-toggle   { cursor:pointer; color:var(--k5); font-size:.75rem; font-weight:600; padding:.26rem .58rem; background:var(--sf0); border:1px solid var(--bd1); border-radius:6px; display:inline-block; user-select:none; }
.mgs2-toggle:hover { background:var(--sf1); }
.mgs-bdgrid   { padding-top:.5rem; }
.mgs2-bditem  { padding:.48rem .68rem; background:var(--sf0); border:1px solid var(--bd0); border-radius:8px; margin-bottom:.32rem; }
.mgs2-bd-top  { display:flex; align-items:center; justify-content:space-between; margin-bottom:.28rem; flex-wrap:wrap; gap:.28rem; }
.mgs-bdname   { color:var(--tx1); font-size:.81rem; font-weight:600; }
.mgs2-bd-note { color:var(--tx3); font-size:.71rem; line-height:1.5; margin-top:.28rem; }

/* ─── 遺伝子型分布 ─── */
.mgs2-dist { display:flex; flex-wrap:wrap; gap:.28rem; align-items:center; padding:.28rem 0; margin-top:.12rem; }
.mgs2-dist-item { font-size:.7rem; font-weight:700; padding:.1rem .38rem; border-radius:6px; }
.mgs2-AA { background:rgba(100,200,255,.12); color:#64c8ff; border:1px solid rgba(100,200,255,.25); }
.mgs2-Aa { background:rgba(255,200,50,.1);  color:#ffc832; border:1px solid rgba(255,200,50,.25); }
.mgs2-aa { background:rgba(80,210,100,.12); color:#50d264; border:1px solid rgba(80,210,100,.25); }
.mgs2-dist-fixed { font-size:.68rem; color:var(--tx3); border-left:1px solid var(--bd0); padding-left:.38rem; }

/* ─── ヒカリ体型専用バッジ ─── */
.v31-da-homo   { font-size:.69rem; font-weight:700; padding:.1rem .38rem; border-radius:6px; background:rgba(255,215,0,.12); color:#ffd700; border:1px solid rgba(255,215,0,.3); }
.v31-da-hetero { font-size:.69rem; font-weight:700; padding:.1rem .38rem; border-radius:6px; background:rgba(200,160,255,.1); color:#c8a0ff; border:1px solid rgba(200,160,255,.25); }
.v31-da-normal { font-size:.69rem; padding:.1rem .38rem; border-radius:6px; background:var(--sf0); color:var(--tx3); border:1px solid var(--bd0); }

/* ─── 半透明鱗専用バッジ ─── */
.v31-trans { font-size:.69rem; font-weight:700; padding:.1rem .38rem; border-radius:6px; background:rgba(100,240,255,.1); color:#64f0ff; border:1px solid rgba(100,240,255,.25); }

/* ─── 親未選択形質 ─── */
.v31-no-parent      { border-color:rgba(255,184,77,.25) !important; background:rgba(255,184,77,.04) !important; }
.v31-no-parent-chip { font-size:.65rem; color:#ffb84d; background:rgba(255,184,77,.12); border:1px solid rgba(255,184,77,.3); padding:.1rem .35rem; border-radius:10px; font-weight:700; }

/* ─── 確率バッジ ─── */
.mg-probability-badge { font-size:.9rem; font-weight:700; padding:3px 12px; border-radius:20px; font-family:'DM Sans',sans-serif; }
.mg-prob-high     { background:rgba(16,185,129,.15); color:#4ade80; border:1px solid rgba(16,185,129,.3); }
.mg-prob-mid      { background:rgba(245,158,11,.15); color:#fcd34d; border:1px solid rgba(245,158,11,.3); }
.mg-prob-low      { background:rgba(239,68,68,.15);  color:#fca5a5; border:1px solid rgba(239,68,68,.3); }
.mg-prob-very-low { background:rgba(120,14,4,.25);   color:#fca5a5; border:1px solid rgba(208,40,16,.3); }

/* ─── アドバイス・警告 ─── */
.mgs-advice { display:flex; gap:.52rem; align-items:flex-start; padding:.52rem .82rem; background:rgba(16,26,42,.5); border-left:3px solid var(--k4); border-radius:0 8px 8px 0; margin-bottom:.42rem; color:var(--tx1); font-size:.79rem; line-height:1.6; }
.mgs-warn   { color:#ffb84d; background:rgba(255,184,77,.07); border:1px solid rgba(255,184,77,.25); padding:.34rem .65rem; border-radius:6px; font-size:.76rem; margin-top:.26rem; }

/* ─── 推奨戦略 ─── */
.mgs-strategy     { background:rgba(3,7,12,.5); border:1px solid var(--bd2); border-radius:12px; padding:1.1rem 1.35rem; margin-top:1.5rem; }
.mgs-strategy-ttl { color:var(--k7); font-size:.95rem; font-weight:700; margin-bottom:1rem; padding-bottom:.42rem; border-bottom:1px solid var(--bd1); }
.mgs-sstep        { display:flex; gap:.85rem; align-items:flex-start; margin-bottom:.85rem; padding-bottom:.85rem; border-bottom:1px solid var(--bd0); }
.mgs-sstep:last-of-type { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.mgs-sstep-gen    { min-width:60px; background:var(--k3); color:var(--k8); text-align:center; font-size:.75rem; font-weight:800; padding:.2rem .42rem; border-radius:8px; flex-shrink:0; }
.mgs-sstep-title  { color:var(--k6); font-size:.84rem; font-weight:700; margin-bottom:.26rem; }
.mgs-sstep-detail { color:var(--tx2); font-size:.78rem; line-height:1.65; }

/* ─── 難易度・必要仔数 ─── */
.mgs-diff      { margin-top:1rem; padding:.85rem 1.05rem; background:rgba(221,168,68,.06); border:1px solid var(--bd2); border-radius:10px; }
.mgs-diff-lv   { color:var(--tx0); font-size:.85rem; font-weight:700; margin-bottom:.35rem; }
.mgs-diff-note { color:var(--tx2); font-size:.78rem; line-height:1.65; }
.mgs2-fry-guide { margin-top:.85rem; padding:.85rem 1.05rem; background:rgba(100,200,255,.05); border:1px solid rgba(100,200,255,.2); border-radius:10px; }
.mgs2-fry-title { color:#64c8ff; font-size:.82rem; font-weight:700; margin-bottom:.28rem; }
.mgs2-fry-body  { color:var(--tx2); font-size:.78rem; line-height:1.65; }
.mgs2-fry-body strong { color:var(--tx0); }

/* ─── 免責 ─── */
.mg-disclaimer { margin-top:16px; padding:10px 14px; background:rgba(0,0,0,.3); border:1px solid rgba(239,68,68,.18); border-radius:8px; color:var(--tx3); font-size:.75rem; line-height:1.65; }

/* ─── レスポンシブ ─── */
@media (max-width:600px) {
  .mgs-hero { padding:.9rem; gap:.7rem; }
  .mgs-hero-icon { font-size:1.7rem; }
  .mgs-sstep { flex-direction:column; gap:.38rem; }
  .mgs-combined { flex-wrap:wrap; }
  .mgs-fix-lbl { margin-left:0; width:100%; }
  .mgs2-dist { gap:.2rem; }
  .v31-sex-wrapper { margin-top:.5rem; width:100%; }
  .mg-calc-row { flex-direction:column; }
}

/* ================================================
   ゴール逆算くん v3.2 追加スタイル
   末尾追加 2026-02-23 ※既存コード1行も変更なし
   ================================================ */

/* ── 水温スライダー ── */
.v32-temp-box {
    background: rgba(255,130,50,.07); border: 1px solid rgba(255,130,50,.25);
    border-radius: 10px; padding: .85rem 1.1rem; margin: .75rem 0;
}
.v32-temp-lbl {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--tx1); font-size: .85rem; font-weight: 700; margin-bottom: .55rem;
}
.v32-temp-lbl #v32-temp-val {
    color: var(--k7); font-size: 1rem; font-weight: 800; font-family: 'DM Sans', sans-serif;
}
.v32-temp-slider-wrap {
    display: flex; align-items: center; gap: .75rem;
}
.v32-temp-lo, .v32-temp-hi {
    font-size: .68rem; color: var(--tx3); text-align: center; line-height: 1.3; flex-shrink: 0;
}
.v32-temp-note {
    font-size: .78rem; color: var(--tx2); margin-top: .52rem; line-height: 1.5;
}

/* ── 必要仔数（現実補正） ── */
.v32-fry-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    padding: .45rem .8rem; background: rgba(100,200,255,.06);
    border: 1px solid rgba(100,200,255,.18); border-radius: 8px; margin-bottom: .55rem;
}
.v32-fry-lbl  { color: var(--tx2); font-size: .78rem; font-weight: 600; }
.v32-fry-th   { color: var(--tx3); font-size: .76rem; text-decoration: line-through; }
.v32-fry-ar   { color: var(--k7);  font-size: .82rem; }
.v32-fry-ar strong { font-size: .9rem; color: var(--k8); }
.v32-fry-note { color: var(--tx3); font-size: .7rem; }

/* ── 近交退化バッジ・警告 ── */
.v32-inbreed-badge {
    font-size: .68rem; font-weight: 700; padding: .14rem .5rem; border-radius: 12px;
    background: rgba(245,158,11,.12); color: #fcd34d; border: 1px solid rgba(245,158,11,.3);
    margin-left: auto;
}
.v32-inbreed-warn {
    font-size: .78rem; color: #ffb84d; background: rgba(255,184,77,.07);
    border: 1px solid rgba(255,184,77,.25); border-left: 3px solid #ffb84d;
    padding: .42rem .75rem; border-radius: 0 8px 8px 0; margin-top: .35rem; line-height: 1.6;
}

/* ── 親なし形質バッジ ── */
.v32-noparent-badge {
    font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 10px;
    background: rgba(210,55,55,.12); color: #fca5a5; border: 1px solid rgba(210,55,55,.3);
    margin-left: .35rem;
}

/* ── ヒカリ体型・半透明鱗の専用分布バッジ ── */
.v32-dist-spec {
    font-size: .7rem; font-weight: 700; padding: .1rem .38rem; border-radius: 6px;
}
.v32-homo  { background: rgba(255,215,0,.12);  color: #ffd700; border: 1px solid rgba(255,215,0,.3); }
.v32-hete  { background: rgba(100,180,255,.12);color: #64c8ff; border: 1px solid rgba(100,180,255,.3); }
.v32-norm  { background: rgba(150,150,150,.1); color: #aaa;    border: 1px solid rgba(150,150,150,.2); }
.v32-trans { background: rgba(200,240,255,.1); color: #a0e0ff; border: 1px solid rgba(200,240,255,.3); }
.v32-semi  { background: rgba(180,220,255,.1); color: #90cfff; border: 1px solid rgba(180,220,255,.25); }

/* ── マルチライン戦略 ── */
.v32-multiline {
    background: rgba(3,7,12,.5); border: 1px solid var(--bd2);
    border-radius: 12px; padding: 1.1rem 1.35rem; margin-top: 1.25rem;
}
.v32-ml-ttl {
    color: var(--k7); font-size: .95rem; font-weight: 700;
    margin-bottom: .85rem; padding-bottom: .42rem; border-bottom: 1px solid var(--bd1);
}
.v32-ml-desc {
    color: var(--tx2); font-size: .82rem; line-height: 1.65; margin-bottom: .85rem;
}
.v32-ml-grid {
    display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .85rem;
}
.v32-ml-col {
    flex: 1; background: var(--sf0); border: 1px solid var(--bd1);
    border-radius: 8px; padding: .75rem 1rem;
}
.v32-ml-col-ttl {
    color: var(--k6); font-size: .78rem; font-weight: 700; margin-bottom: .5rem;
    letter-spacing: .08em; text-transform: uppercase;
}
.v32-ml-chip {
    background: rgba(221,168,68,.1); border: 1px solid var(--bd2);
    color: var(--tx1); font-size: .78rem; padding: .2rem .55rem;
    border-radius: 14px; margin-bottom: .3rem; display: inline-block; margin-right: .28rem;
}
.v32-ml-arrow {
    color: var(--k5); font-size: .82rem; font-weight: 700;
    text-align: center; line-height: 1.8; padding-top: 1rem; flex-shrink: 0;
}
.v32-ml-step {
    color: var(--tx2); font-size: .8rem; line-height: 1.7;
    padding: .65rem .9rem; background: rgba(221,168,68,.05);
    border-radius: 8px; border-left: 3px solid var(--k4);
}

@media (max-width: 600px) {
    .v32-fry-row { flex-direction: column; gap: .25rem; align-items: flex-start; }
    .v32-ml-grid { flex-direction: column; }
    .v32-ml-arrow { transform: rotate(90deg); }
}

/* ================================================
   ゴール逆算くん v3.3 追加スタイル
   末尾追加 2026-02-23 ※既存コード1行も変更なし
   ================================================ */

/* ── F1の壁バナー ── */
.v33-f1wall {
    background: rgba(180,40,40,.1); border: 1px solid rgba(180,40,40,.35);
    border-left: 4px solid #d84040; border-radius: 0 10px 10px 0;
    padding: .9rem 1.2rem; margin-bottom: 1rem;
}
.v33-f1wall-ttl {
    color: #f87171; font-size: .9rem; font-weight: 800;
    margin-bottom: .4rem; letter-spacing: .04em;
}
.v33-f1wall-body {
    color: var(--tx2); font-size: .82rem; line-height: 1.75;
}
.v33-f1wall-body strong { color: var(--tx0); }

/* ── なりかけ選抜バナー ── */
.v33-narikake-banner {
    background: rgba(221,168,68,.08); border: 1px solid var(--bd2);
    border-left: 4px solid var(--k5); border-radius: 0 10px 10px 0;
    padding: .9rem 1.2rem; margin-bottom: 1rem;
}
.v33-nk-ttl {
    color: var(--k7); font-size: .9rem; font-weight: 800; margin-bottom: .4rem;
}
.v33-nk-body {
    color: var(--tx2); font-size: .82rem; line-height: 1.75;
}
.v33-nk-body strong { color: var(--tx0); }

/* ── 実績値バナー ── */
.v33-empirical-banner {
    display: flex; gap: .7rem; align-items: flex-start;
    background: rgba(80,180,255,.07); border: 1px solid rgba(80,180,255,.25);
    border-radius: 10px; padding: .8rem 1.1rem; margin-bottom: 1rem;
    font-size: .8rem; color: var(--tx2); line-height: 1.65;
}
.v33-emp-icon { font-size: 1.3rem; flex-shrink: 0; }
.v33-empirical-banner strong { color: var(--tx0); }

/* ── F1の壁カード（グレーアウト） ── */
.v33-gcard-suppressed {
    opacity: .75; border-color: rgba(180,40,40,.3) !important;
    background: rgba(180,40,40,.04) !important;
}

/* ── 各種チップ ── */
.v33-wall-chip {
    font-size: .68rem; font-weight: 700; padding: .14rem .52rem; border-radius: 12px;
    background: rgba(180,40,40,.15); color: #f87171; border: 1px solid rgba(180,40,40,.35);
}
.v33-narikake-chip {
    font-size: .68rem; font-weight: 700; padding: .14rem .52rem; border-radius: 12px;
    background: rgba(221,168,68,.15); color: var(--k7); border: 1px solid var(--bd2);
}
.v33-empirical-badge {
    font-size: .66rem; font-weight: 700; padding: .1rem .4rem; border-radius: 10px;
    background: rgba(80,180,255,.12); color: #64c8ff; border: 1px solid rgba(80,180,255,.28);
    margin-right: .3rem;
}

/* ── 世代別ノート（実績値形質の詳細アドバイス） ── */
.v33-gen-note {
    font-size: .8rem; color: var(--tx1); line-height: 1.72;
    padding: .48rem .68rem; background: rgba(221,168,68,.05);
    border-left: 3px solid var(--k4); border-radius: 0 8px 8px 0;
    margin-top: .4rem;
}
.v33-gen-note strong { color: var(--k7); }

@media (max-width: 600px) {
    .v33-empirical-banner { flex-direction: column; }
    .v33-f1wall, .v33-narikake-banner { padding: .7rem .9rem; }
}

/* =====================================================
   v3.4 UI修正パッチ  2026-02-23
   ① タブボタン5個でもはみ出さないサイズ修正
   ② ゴール逆算タブ内のレイアウト修正
   ※末尾追加のみ・既存CSS1行も変更なし
   ===================================================== */

/* タブボタン：既存の15px !importantを上書き */
.mg-tab-btn {
  font-size: .72rem !important;
  padding: 10px 4px 8px !important;
  min-width: 52px !important;
  letter-spacing: .01em !important;
}
@media (max-width: 380px) {
  .mg-tab-btn { font-size: .62rem !important; min-width: 44px !important; }
}

/* ゴール逆算タブ内padding */
#mg-tab-goal.mg-tab-content { padding: 14px 12px !important; }

/* STEPヘッド折り返し防止 */
.mgs-section-head {
  flex-wrap: nowrap !important;
  overflow: hidden;
}
.mgs-section-title {
  font-size: .85rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgs-step-chip {
  font-size: .58rem !important;
  padding: .12rem .38rem !important;
  flex-shrink: 0;
}

/* ゴール逆算の父母ドロワー：親カードのoverflowを解放 */
.mg-parents-grid.mgs-drawer-mode { grid-template-columns: 1fr !important; gap: 8px !important; }
.mg-parents-grid.mgs-drawer-mode .mg-parent-card {
  border: none !important;
  padding: 0 !important;
  background: none !important;
  overflow: visible !important;
}

/* 逆算結果エリア横幅制御 */
.mgs-result-wrap { overflow-x: hidden; box-sizing: border-box; }

/* ================================================================
   v178d CSS追加パッチ 2026-02-23
   依存関係警告（mgs3-dep-warnings）のスタイル定義
   ================================================================ */

/* 依存関係警告コンテナ */
.mgs3-dep-warnings {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: .42rem;
}

/* 依存関係警告アイテム共通 */
.mgs3-dw {
    padding: .55rem .85rem;
    border-radius: 8px;
    font-size: .82rem;
    line-height: 1.65;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

/* エラーレベル（必須依存関係がない等） */
.mgs3-dw-error {
    background: rgba(208, 40, 16, .12);
    border: 1px solid rgba(208, 40, 16, .35);
    color: #f87171;
}

/* 警告レベル（推奨・注意） */
.mgs3-dw-warn {
    background: rgba(221, 168, 68, .1);
    border: 1px solid rgba(221, 168, 68, .3);
    color: var(--k7, #dda844);
}

/* 情報レベル */
.mgs3-dw-info {
    background: rgba(100, 200, 255, .06);
    border: 1px solid rgba(100, 200, 255, .2);
    color: #64c8ff;
}


/* ================================================================
   v178d CSS追加パッチ 2026-02-23
   依存関係警告（mgs3-dep-warnings）のスタイル定義
   ================================================================ */
.mgs3-dep-warnings { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .42rem; }
.mgs3-dw { padding: .55rem .85rem; border-radius: 8px; font-size: .82rem; line-height: 1.65; display: flex; align-items: flex-start; gap: .5rem; }
.mgs3-dw-error { background: rgba(208, 40, 16, .12); border: 1px solid rgba(208, 40, 16, .35); color: #f87171; }
.mgs3-dw-warn { background: rgba(221, 168, 68, .1); border: 1px solid rgba(221, 168, 68, .3); color: var(--k7, #dda844); }
.mgs3-dw-info { background: rgba(100, 200, 255, .06); border: 1px solid rgba(100, 200, 255, .2); color: #64c8ff; }


/* ================================================================
   v178f CSS追加パッチ  2026-02-23
   未定義CSSクラス7件を追加
   ================================================================ */

/* 累代ステップ本体コンテナ（mgs-sstepのflex右側） */
.mgs-sstep-body {
    flex: 1;
    min-width: 0;
}

/* サマリーボックスの本体（アイコン右側） */
.mgs-summ-body {
    flex: 1;
    min-width: 0;
}

/* 各形質詳細のアコーディオン本体 */
.mgs2-bd-body {
    padding: .55rem .75rem;
    background: rgba(255,255,255,.03);
    border-radius: 0 0 8px 8px;
}

/* ヒカリ体型: DaDaホモ個体の割合表示バッジ */
.mgs3-da-homo {
    display: inline-block;
    background: rgba(221, 168, 68, .14);
    border: 1px solid rgba(221, 168, 68, .35);
    color: #dda844;
    font-size: .72rem;
    padding: .1rem .42rem;
    border-radius: 12px;
    margin-top: .2rem;
    margin-right: .3rem;
}

/* ヒカリ体型: Da/da ヘテロ個体の割合表示バッジ */
.mgs3-da-hetero {
    display: inline-block;
    background: rgba(100, 200, 100, .1);
    border: 1px solid rgba(100, 200, 100, .3);
    color: #86e89d;
    font-size: .72rem;
    padding: .1rem .42rem;
    border-radius: 12px;
    margin-top: .2rem;
    margin-right: .3rem;
}

/* 透明鱗: 発現確率バッジ */
.mgs3-trans {
    display: inline-block;
    background: rgba(100, 200, 255, .1);
    border: 1px solid rgba(100, 200, 255, .3);
    color: #64c8ff;
    font-size: .72rem;
    padding: .1rem .42rem;
    border-radius: 12px;
    margin-top: .2rem;
    margin-right: .3rem;
}

/* マルチライン戦略の本体コンテナ */
.v32-ml-body {
    padding: .65rem .9rem;
}


/* ================================================================
   v2.0.4 フォント・UIパッチ 2026-02-24
   v177最終版のフォントサイズをpx単位でそのまま適用
   タブスクロール・グラフcanvas保護も維持
   ※末尾追加のみ・既存CSS一切変更なし
   ================================================================ */

/* ── タブナビ：横スクロール対応 ── */
.mg-tab-nav {
  flex-wrap: nowrap !important;
  overflow-x: auto  !important;
  padding: 0 4px    !important;
  -webkit-overflow-scrolling: touch;
}
.mg-tab-btn {
  flex: 0 1 auto      !important;
  min-width: 0        !important;
  max-width: none     !important;
  white-space: nowrap !important;
}

/* ── グラフcanvas確保 ── */
/* .mgs-chart-box に固定高さを与えることでChart.jsの無限伸長を防止 */
.mgs-chart-box {
  position: relative !important;
  height: 260px      !important;
  overflow: hidden   !important;
}
#mgs33-chart {
  display: block     !important;
  width: 100%        !important;
  height: 100%       !important;
  min-height: unset  !important;
}

/* ── パネット表トグル色 ── */
.mg-punnett-toggle {
  color: var(--k7, #dda844) !important;
  cursor: pointer !important;
  padding: 4px 0  !important;
}

/* ── アプリ全体ベース（v177準拠 px指定） ── */
#medaka-genetics-app,
#medaka-genetics-app * {
  box-sizing: border-box;
}
#medaka-genetics-app {
  font-size: 17px !important;
}

/* ── ヒーローエリア ── */
.mg-hero-eyebrow { font-size: 13px !important; }
.mg-hero-sub     { font-size: 17px !important; }
.mg-hero-desc    { font-size: 16px !important; }

/* ── タブボタン ── */
.mg-tab-btn { font-size: 15px !important; }

/* ── 父母パネル ── */
.mg-parent-label    { font-size: 17px !important; }
.mg-category-title  { font-size: 16px !important; font-weight: 700 !important; }
.mg-trait-item      { font-size: 16px !important; }
.mg-trait-name      { font-size: 16px !important; }
.mg-trait-note      { font-size: 14px !important; }
.mg-precision-badge { font-size: 12px !important; }

/* ── ボタン類 ── */
.mg-btn-calc       { font-size: 17px !important; }
.mg-btn-reset      { font-size: 16px !important; }
.mg-btn-cumulative { font-size: 16px !important; }
.mgs-run-btn       { font-size: 17px !important; }

/* ── 結果カード ── */
.mg-result-title      { font-size: 18px !important; }
.mg-trait-result-name { font-size: 17px !important; }
.mg-probability-badge { font-size: 22px !important; }
.mg-result-note       { font-size: 15px !important; line-height: 1.75 !important; }
.mg-punnett-toggle    { font-size: 15px !important; }
.mg-punnett-table th,
.mg-punnett-table td  { font-size: 14px !important; }

/* ── キャリア注意書き ── */
.mg-carrier-warning        { font-size: 16px !important; line-height: 1.75 !important; }
.mg-carrier-warning strong { font-size: 17px !important; }

/* ── 累代シミュレーション ── */
.mgc-main-title { font-size: 18px !important; }
.mgc-main-sub   { font-size: 15px !important; }
.mgc-name       { font-size: 17px !important; }
.mgc-th         { font-size: 14px !important; }
.mgc-td         { font-size: 14px !important; }
.mgc-pct        { font-size: 14px !important; }
.mgc-badge      { font-size: 13px !important; }

/* ── ゴール逆算くん ── */
.mgs-section-title { font-size: 18px !important; font-weight: 700 !important; }
.mgs-section-note  { font-size: 15px !important; }
.mgs-combined-pct  { font-size: 22px !important; font-weight: 700 !important; }
.mgs-combined-lbl  { font-size: 15px !important; }
.mgs-gbadge        { font-size: 15px !important; }
.mgs-gen-ttl       { font-size: 17px !important; font-weight: 700 !important; }
.mgs-chart-ttl     { font-size: 16px !important; font-weight: 700 !important; }
.mgs-warn          { font-size: 15px !important; line-height: 1.75 !important; }
.mgs2-toggle       { font-size: 15px !important; }
.v32-fry-lbl       { font-size: 14px !important; }
.v32-fry-ar        { font-size: 15px !important; font-weight: 600 !important; }
.v32-fry-note      { font-size: 13px !important; }

/* ── 遺伝の仕組みタブ ── */
.mg-guide-h3   { font-size: 18px !important; }
.mg-guide-p    { font-size: 16px !important; line-height: 1.9  !important; }
.mg-law-title  { font-size: 16px !important; }
.mg-law-card p { font-size: 15px !important; }

/* ── 繁殖記録 ── */
.mg-br-input,
.mg-br-select,
.mg-br-textarea      { font-size: 16px !important; }
.mg-br-check-label   { font-size: 16px !important; }
.mg-br-cat-title     { font-size: 15px !important; font-weight: 700 !important; }
.mg-br-section-label { font-size: 16px !important; }
.mg-br-card-title    { font-size: 16px !important; }
.mg-br-card-summary  { font-size: 15px !important; }
.mg-br-badge         { font-size: 13px !important; }
.mg-br-detail-btn,
.mg-br-edit-btn,
.mg-br-delete-btn    { font-size: 15px !important; }
.mg-br-btn-sub       { font-size: 16px !important; }
.mg-br-results-table th { font-size: 14px !important; }
.mg-br-results-table td { font-size: 15px !important; }
.edo-br-drawer-btn   { font-size: 16px !important; }
.edo-toggle-title    { font-size: 17px !important; }
.edo-toggle-badge    { font-size: 14px !important; }
.edo-toggle-hint     { font-size: 13px !important; }

/* ── 免責テキスト ── */
.mg-disclaimer { font-size: 15px !important; line-height: 1.85 !important; }

/* ── スマホ（480px以下）さらに少し小さく ── */
@media (max-width: 480px) {
  #medaka-genetics-app  { font-size: 15px !important; }
  .mg-trait-name        { font-size: 15px !important; }
  .mg-probability-badge { font-size: 20px !important; }
  .mg-result-note       { font-size: 14px !important; }
  .mg-carrier-warning   { font-size: 15px !important; }
  .mgc-th, .mgc-td, .mgc-pct { font-size: 13px !important; }
  .mgs-combined-pct     { font-size: 20px !important; }
}

/* ================================================================
   v2.0.5 フォント追加パッチ 2026-02-24
   ① メダカ注意点タブ → 17px
   ② 説明書ドロワー → 17px
   ※末尾追加のみ・既存CSS一切変更なし
   ================================================================ */

/* ── メダカ注意点タブ ── */
.mg-warning-banner       { font-size: 16px !important; line-height: 1.85 !important; }
.mg-caution-title        { font-size: 17px !important; font-weight: 700 !important; }
.mg-caution-body p       { font-size: 16px !important; line-height: 1.85 !important; }
.mg-caution-table        { font-size: 15px !important; }
.mg-caution-table th     { font-size: 15px !important; padding: 7px 10px !important; }
.mg-caution-table td     { font-size: 15px !important; padding: 7px 10px !important; }
.mg-caution-icon         { font-size: 1.6rem !important; }
.mg-sex-table            { font-size: 15px !important; }
.mg-sex-table th         { font-size: 15px !important; padding: 7px 10px !important; }
.mg-sex-table td         { font-size: 15px !important; padding: 7px 10px !important; }

/* ── 説明書ドロワー ── */
.mg-drawer-title         { font-size: 17px !important; font-weight: 700 !important; }
.mg-drawer-close         { font-size: 16px !important; }
.mg-help-section-btn     { font-size: 17px !important; font-weight: 600 !important; padding: 13px 14px !important; }
.mg-help-icon            { font-size: 17px !important; }
.mg-help-arrow           { font-size: 13px !important; }
.mg-help-section-body    { font-size: 17px !important; line-height: 1.9 !important; padding: 13px 14px !important; }
.mg-help-step            { font-size: 16px !important; line-height: 1.8 !important; padding: 9px 12px !important; }
.mg-help-step-num        { font-size: 13px !important; width: 20px !important; height: 20px !important; }
.mg-help-tip             { font-size: 16px !important; line-height: 1.8 !important; padding: 9px 12px !important; }
.mg-help-warn            { font-size: 16px !important; line-height: 1.8 !important; padding: 9px 12px !important; }
.mg-help-q               { font-size: 17px !important; font-weight: 700 !important; }
.mg-help-a               { font-size: 16px !important; line-height: 1.85 !important; }
.mg-help-badge-ex        { font-size: 14px !important; padding: 3px 10px !important; }

/* 遺伝の仕組みタブ（同ドロワー内） */
.mg-guide-h3             { font-size: 19px !important; font-weight: 700 !important; }
.mg-guide-p              { font-size: 17px !important; line-height: 1.9 !important; }
.mg-law-title            { font-size: 17px !important; font-weight: 700 !important; }
.mg-law-card             { font-size: 16px !important; }
.mg-law-card p           { font-size: 16px !important; line-height: 1.85 !important; }
.mg-law-num              { font-size: 13px !important; padding: 2px 10px !important; }

/* ── 480px以下も維持 ── */
@media (max-width: 480px) {
  .mg-caution-title      { font-size: 16px !important; }
  .mg-caution-body p     { font-size: 15px !important; }
  .mg-caution-table th,
  .mg-caution-table td   { font-size: 14px !important; }
  .mg-help-section-btn   { font-size: 16px !important; }
  .mg-help-section-body  { font-size: 16px !important; }
  .mg-help-step          { font-size: 15px !important; }
  .mg-help-tip,
  .mg-help-warn          { font-size: 15px !important; }
  .mg-help-q             { font-size: 16px !important; }
  .mg-help-a             { font-size: 15px !important; }
  .mg-guide-p            { font-size: 16px !important; }
  .mg-law-card p         { font-size: 15px !important; }
}

/* ================================================================
   v2.0.12 江戸風ボタン完全統一パッチ 2026-02-24
   シミュレーター・繁殖記録・ゴール逆算の全ボタン対象
   対象クラス：mg-tab-btn / mg-btn-calc / mg-btn-reset /
   mg-btn-cumulative / mgs-run-btn / mg-help-btn /
   mg-drawer-close / mg-help-section-btn / mg-br-btn /
   mg-br-btn-sub / mg-br-toggle-btn / mg-br-card-btn /
   mg-br-page-btn / mg-br-detail-btn / mg-br-edit-btn /
   mg-br-delete-btn / edo-toggle / edo-br-drawer-btn /
   mg-scroll-top-btn / mgsp-btn / mg-br-pct-refresh-btn /
   mgc-btn-open / mg-tag-filter-btn / mg-tag-chip-del /
   mg-punnett-toggle / mgs2-toggle
   ※末尾追加のみ・既存CSS一切変更なし
   ================================================================ */

/* ════════════════════════════════════════
   ① タブボタン
   ════════════════════════════════════════ */
.mg-tab-btn {
    background: none !important;
    border-bottom: 2px solid transparent !important;
    color: rgba(230,220,203,0.42) !important;
    transition: color .18s, border-color .18s !important;
}
.mg-tab-btn::before { display:none !important; }
.mg-tab-btn:hover {
    color: rgba(212,160,52,0.72) !important;
    border-bottom-color: rgba(212,160,52,0.22) !important;
}
.mg-tab-btn.mg-tab-active {
    background: none !important;
    color: #f0d080 !important;
    border-bottom: 2px solid #d4a034 !important;
    text-shadow: 0 0 10px rgba(212,160,52,0.5) !important;
}
.mg-tab-btn.mg-tab-active::before { display:none !important; }
.mg-tab-btn.mg-tab-active::after {
    background: linear-gradient(90deg,transparent,rgba(212,160,52,.65),transparent) !important;
}

/* ════════════════════════════════════════
   ② メインアクションボタン共通
      黒漆＋金枠＋金文字＋上下金線
   ════════════════════════════════════════ */
.mg-btn-calc,
.mg-br-btn,
.mgs-run-btn,
.mg-btn-cumulative {
    position: relative !important;
    background: linear-gradient(180deg,#1c1408 0%,#0d1117 100%) !important;
    border: 1.5px solid #d4a034 !important;
    border-radius: 4px !important;
    color: #f0d080 !important;
    font-weight: 700 !important;
    letter-spacing: .2em !important;
    text-shadow: 0 0 10px rgba(212,160,52,.52) !important;
    box-shadow:
        0 0 0 1px rgba(212,160,52,.1) inset,
        0 3px 16px rgba(212,160,52,.13),
        0 1px 0 rgba(0,0,0,.7) !important;
    overflow: hidden !important;
    transition: color .2s,box-shadow .25s,border-color .2s,transform .12s !important;
}
.mg-btn-calc::before,
.mg-br-btn::before,
.mgs-run-btn::before,
.mg-btn-cumulative::before {
    content:'' !important; position:absolute !important;
    top:4px !important; left:10px !important; right:10px !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,rgba(212,160,52,.38),transparent) !important;
    transform:none !important; transition:none !important; pointer-events:none !important;
}
.mg-btn-calc::after,
.mg-br-btn::after,
.mgs-run-btn::after,
.mg-btn-cumulative::after {
    content:'' !important; position:absolute !important;
    bottom:4px !important; left:10px !important; right:10px !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,rgba(212,160,52,.38),transparent) !important;
    pointer-events:none !important;
}
.mg-btn-calc:hover,
.mg-br-btn:hover,
.mgs-run-btn:hover,
.mg-btn-cumulative:hover {
    border-color: #f0d080 !important;
    color: #fff8dc !important;
    text-shadow: 0 0 18px rgba(240,208,128,.88) !important;
    box-shadow:
        0 0 0 1px rgba(212,160,52,.2) inset,
        0 6px 28px rgba(212,160,52,.26) !important;
    transform: translateY(-2px) !important;
}
.mg-btn-calc:active,
.mg-br-btn:active,
.mgs-run-btn:active,
.mg-btn-cumulative:active {
    transform: translateY(1px) !important;
    box-shadow: 0 0 0 1px rgba(212,160,52,.1) inset, 0 2px 8px rgba(212,160,52,.1) !important;
}
/* 累代「閉じる」状態も金系統一 */
.mgc-btn-open {
    background: rgba(212,160,52,.07) !important;
    border-color: rgba(212,160,52,.48) !important;
    color: #f0d080 !important;
    text-shadow: 0 0 8px rgba(212,160,52,.38) !important;
}

/* ════════════════════════════════════════
   ③ サブアクションボタン
      黒地＋細い金枠＋薄い金文字
   ════════════════════════════════════════ */
.mg-btn-reset,
.mg-br-btn-sub,
.mg-br-toggle-btn,
.mg-br-card-btn,
.mg-drawer-close,
.mg-br-pct-refresh-btn {
    background: rgba(13,17,23,.85) !important;
    border: 1px solid rgba(212,160,52,.27) !important;
    border-radius: 4px !important;
    color: rgba(212,160,52,.68) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: border-color .18s,color .18s,background .18s !important;
}
.mg-btn-reset:hover,
.mg-br-btn-sub:hover,
.mg-br-toggle-btn:hover,
.mg-br-card-btn:hover,
.mg-drawer-close:hover,
.mg-br-pct-refresh-btn:hover {
    background: rgba(212,160,52,.07) !important;
    border-color: rgba(212,160,52,.58) !important;
    color: #f0d080 !important;
}
/* pct-refresh完了状態 */
.mg-br-pct-refresh-done {
    background: rgba(110,231,183,.1) !important;
    border-color: rgba(110,231,183,.42) !important;
    color: #6ee7b7 !important;
}
/* dangerは赤系維持 */
.mg-br-btn-sub.danger { color:#fca5a5 !important; border-color:rgba(248,113,113,.24) !important; }
.mg-br-btn-sub.danger:hover { background:rgba(208,40,16,.07) !important; border-color:rgba(208,40,16,.52) !important; color:rgba(252,100,80,.95) !important; }
.mg-br-card-btn.danger { color:#fca5a5 !important; border-color:rgba(248,113,113,.24) !important; }
.mg-br-card-btn.danger:hover { background:rgba(208,40,16,.07) !important; border-color:rgba(208,40,16,.52) !important; color:rgba(252,100,80,.95) !important; }

/* ════════════════════════════════════════
   ④ 詳細・編集・削除ボタン
   ════════════════════════════════════════ */
.mg-br-detail-btn,
.mg-br-edit-btn {
    background: rgba(13,17,23,.85) !important;
    border: 1px solid rgba(212,160,52,.24) !important;
    border-radius: 4px !important;
    color: rgba(212,160,52,.68) !important;
    transition: border-color .18s,color .18s,background .18s !important;
}
.mg-br-detail-btn:hover,
.mg-br-edit-btn:hover {
    background: rgba(212,160,52,.07) !important;
    border-color: rgba(212,160,52,.58) !important;
    color: #f0d080 !important;
}
.mg-br-delete-btn {
    background: rgba(13,17,23,.85) !important;
    border: 1px solid rgba(248,113,113,.2) !important;
    border-radius: 4px !important;
    color: rgba(252,165,165,.62) !important;
    transition: border-color .18s,color .18s,background .18s !important;
}
.mg-br-delete-btn:hover {
    background: rgba(208,40,16,.07) !important;
    border-color: rgba(208,40,16,.52) !important;
    color: rgba(252,100,80,.95) !important;
}

/* ════════════════════════════════════════
   ⑤ ページネーション
   ════════════════════════════════════════ */
.mg-br-page-btn {
    background: rgba(13,17,23,.8) !important;
    border: 1px solid rgba(212,160,52,.2) !important;
    border-radius: 3px !important;
    color: rgba(212,160,52,.52) !important;
    transition: border-color .15s,color .15s,background .15s !important;
}
.mg-br-page-btn:hover:not(.active) {
    background: rgba(212,160,52,.07) !important;
    border-color: rgba(212,160,52,.48) !important;
    color: #f0d080 !important;
}
.mg-br-page-btn.active {
    background: linear-gradient(180deg,#1c1408 0%,#0d1117 100%) !important;
    border-color: #d4a034 !important;
    color: #f0d080 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(212,160,52,.45) !important;
}

/* ════════════════════════════════════════
   ⑥ タグフィルター・タグ削除
   ════════════════════════════════════════ */
.mg-app .mg-tag-filter-btn {
    background: rgba(13,17,23,.75) !important;
    border: 1px solid rgba(212,160,52,.2) !important;
    border-radius: 3px !important;
    color: rgba(212,160,52,.58) !important;
    transition: border-color .15s,color .15s,background .15s !important;
}
.mg-app .mg-tag-filter-btn:hover {
    background: rgba(212,160,52,.07) !important;
    border-color: rgba(212,160,52,.48) !important;
    color: #f0d080 !important;
}
.mg-app .mg-tag-filter-btn.active {
    background: linear-gradient(180deg,#1c1408 0%,#0d1117 100%) !important;
    border-color: #d4a034 !important;
    color: #f0d080 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 6px rgba(212,160,52,.38) !important;
}
.mg-app .mg-tag-chip-del {
    color: rgba(212,160,52,.48) !important;
    transition: color .15s !important;
}
.mg-app .mg-tag-chip-del:hover { color: rgba(252,100,80,.88) !important; }

/* ════════════════════════════════════════
   ⑦ 説明書ドロワー丸ボタン
   ════════════════════════════════════════ */
.mg-help-btn {
    background: linear-gradient(180deg,#1c1408 0%,#0d1117 100%) !important;
    border: 1.5px solid #d4a034 !important;
    color: #f0d080 !important;
    text-shadow: 0 0 10px rgba(212,160,52,.58) !important;
    box-shadow:
        0 0 0 1px rgba(212,160,52,.1) inset,
        0 4px 20px rgba(212,160,52,.18),
        0 2px 0 rgba(0,0,0,.6) !important;
    transition: box-shadow .25s,border-color .2s,transform .15s !important;
}
.mg-help-btn:hover {
    border-color: #f0d080 !important;
    color: #fff8dc !important;
    text-shadow: 0 0 18px rgba(240,208,128,.92) !important;
    box-shadow:
        0 0 0 1px rgba(212,160,52,.2) inset,
        0 8px 30px rgba(212,160,52,.35) !important;
    transform: scale(1.1) !important;
}

/* ════════════════════════════════════════
   ⑧ ドロワーセクションボタン（アコーディオン）
      左に金のアクセントライン
   ════════════════════════════════════════ */
.mg-help-section-btn {
    background: rgba(13,17,23,.7) !important;
    border: 1px solid rgba(212,160,52,.17) !important;
    border-left: 3px solid rgba(212,160,52,.3) !important;
    border-radius: 4px !important;
    color: rgba(230,220,203,.72) !important;
    transition: border-color .18s,color .18s,background .18s !important;
}
.mg-help-section-btn:hover {
    background: rgba(212,160,52,.05) !important;
    border-color: rgba(212,160,52,.38) !important;
    border-left-color: #d4a034 !important;
    color: #f0d080 !important;
}
.mg-help-section-btn.open {
    background: rgba(212,160,52,.07) !important;
    border-color: rgba(212,160,52,.42) !important;
    border-left-color: #f0d080 !important;
    color: #f0d080 !important;
}
.mg-help-arrow { color: rgba(212,160,52,.52) !important; }
.mg-help-section-btn.open .mg-help-arrow { color: #f0d080 !important; }

/* ════════════════════════════════════════
   ⑨ 繁殖記録ドロワーボタン（♂父・♀母展開）
   ════════════════════════════════════════ */
.edo-br-drawer-btn {
    background: rgba(13,17,23,.8) !important;
    border: none !important;
    border-bottom: 1px solid rgba(212,160,52,.18) !important;
    border-left: 3px solid rgba(212,160,52,.32) !important;
    color: #f0d080 !important;
    transition: background .18s,border-left-color .18s !important;
}
.edo-br-drawer-btn:hover {
    background: rgba(212,160,52,.06) !important;
    border-left-color: #f0d080 !important;
}
.edo-br-drawer-badge {
    background: rgba(212,160,52,.1) !important;
    color: rgba(212,160,52,.52) !important;
}
.edo-br-badge-on {
    background: rgba(212,160,52,.22) !important;
    color: #f0d080 !important;
}
.edo-br-drawer-arrow { color: rgba(212,160,52,.48) !important; }

/* ════════════════════════════════════════
   ⑩ 形質展開ボタン（edo-toggle）
   ════════════════════════════════════════ */
.edo-toggle {
    background: transparent !important;
    border: none !important;
    border-left: 2px solid transparent !important;
    transition: background .18s,border-left-color .18s !important;
}
.edo-toggle:hover {
    background: rgba(212,160,52,.05) !important;
    border-left-color: rgba(212,160,52,.38) !important;
}
.edo-toggle.open {
    background: rgba(212,160,52,.07) !important;
    border-left-color: #d4a034 !important;
}
.edo-toggle-title { color: #e6dccb !important; }
.edo-arrow { color: rgba(212,160,52,.52) !important; }
.edo-toggle.open .edo-arrow { color: #f0d080 !important; }
.edo-toggle-hint { color: rgba(212,160,52,.38) !important; }

/* ════════════════════════════════════════
   ⑪ スクロールトップ丸ボタン（↑）
   ════════════════════════════════════════ */
.mg-scroll-top-btn {
    background: linear-gradient(180deg,#1c1408 0%,#0d1117 100%) !important;
    border: 1.5px solid #d4a034 !important;
    color: #f0d080 !important;
    text-shadow: 0 0 10px rgba(212,160,52,.58) !important;
    box-shadow: 0 0 0 1px rgba(212,160,52,.1) inset, 0 4px 18px rgba(212,160,52,.16) !important;
    transition: opacity .3s,transform .3s,box-shadow .2s,border-color .2s !important;
}
.mg-scroll-top-btn:hover {
    border-color: #f0d080 !important;
    color: #fff8dc !important;
    text-shadow: 0 0 16px rgba(240,208,128,.92) !important;
    box-shadow: 0 0 0 1px rgba(212,160,52,.2) inset, 0 8px 28px rgba(212,160,52,.32) !important;
    transform: translateY(-2px) !important;
}
.mg-scroll-top-btn:active { transform: translateY(1px) !important; }

/* ════════════════════════════════════════
   ⑫ ±スピナーボタン（個体数入力）
   ════════════════════════════════════════ */
.mgsp-btn {
    background: rgba(13,17,23,.9) !important;
    border: none !important;
    color: rgba(212,160,52,.62) !important;
    transition: background .12s,color .12s !important;
}
.mgsp-btn:hover { background: rgba(212,160,52,.12) !important; color: #f0d080 !important; }
.mgsp-btn:active { background: rgba(212,160,52,.2) !important; }
.mgsp-minus { border-right: 1px solid rgba(212,160,52,.17) !important; }
.mgsp-plus  { border-left:  1px solid rgba(212,160,52,.17) !important; }

/* ════════════════════════════════════════
   ⑬ パネット表トグル
   ════════════════════════════════════════ */
.mg-punnett-toggle {
    color: rgba(212,160,52,.62) !important;
    text-shadow: none !important;
    transition: color .15s,text-shadow .15s !important;
}
.mg-punnett-toggle:hover {
    color: #f0d080 !important;
    text-shadow: 0 0 8px rgba(212,160,52,.48) !important;
    opacity: 1 !important;
}

/* ════════════════════════════════════════
   ⑭ ゴール逆算 各形質詳細トグル（mgs2-toggle）
   ════════════════════════════════════════ */
.mgs2-toggle {
    background: rgba(13,17,23,.8) !important;
    border: 1px solid rgba(212,160,52,.25) !important;
    border-radius: 4px !important;
    color: rgba(212,160,52,.65) !important;
    transition: background .15s,border-color .15s,color .15s !important;
}
.mgs2-toggle:hover {
    background: rgba(212,160,52,.07) !important;
    border-color: rgba(212,160,52,.52) !important;
    color: #f0d080 !important;
}

/* ════════════════════════════════════════
   スマホ調整
   ════════════════════════════════════════ */
@media (max-width:480px) {
    .mg-btn-calc,.mg-br-btn,.mgs-run-btn,.mg-btn-cumulative {
        letter-spacing:.1em !important;
    }
    .mg-help-btn { width:44px !important; height:44px !important; }
    .mg-scroll-top-btn { width:40px !important; height:40px !important; }
}

/* ================================================================
   v2.0.13 マルチライン表示改善パッチ 2026-02-24
   フロー図形式で視覚的に分かりやすく
   ※末尾追加のみ
   ================================================================ */

/* ── フロー全体ラッパー ── */

/* ================================================================
   v2.0.12b マルチライン表示 完全リデザイン 2026-02-24
   「上から下に読む」タイムライン形式で流れを直感的に表示
   ================================================================ */

/* ── 外枠 ── */
.v32-ml-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 1rem 0 .8rem;
    position: relative;
}

/* ════════════════════════
   STEP 1：2ライン並列
   ════════════════════════ */
.v32-ml-step1-label {
    font-size: .72rem;
    font-weight: 700;
    color: rgba(212,160,52,.55);
    letter-spacing: .12em;
    text-align: center;
    margin-bottom: .45rem;
    text-transform: uppercase;
}

/* ラインA・B 横並び */
.v32-ml-top-row {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    width: 100%;
}

/* 各ライン枠 */
.v32-ml-lane {
    flex: 1;
    background: rgba(13,17,23,.8);
    border: 1.5px solid rgba(212,160,52,.28);
    border-radius: 8px;
    padding: .7rem .85rem .65rem;
    text-align: center;
    position: relative;
}
/* ライン上部のカラーバー */
.v32-ml-lane-a {
    border-top: 3px solid #d4a034;
}
.v32-ml-lane-b {
    border-top: 3px solid rgba(168,114,40,.65);
}

/* ラインヘッダー */
.v32-ml-lane-hd {
    font-size: .8rem;
    font-weight: 700;
    color: #f0d080;
    letter-spacing: .1em;
    margin-bottom: .45rem;
    text-shadow: 0 0 8px rgba(212,160,52,.4);
}

/* 形質チップ群 */
.v32-ml-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .28rem;
    justify-content: center;
    margin-bottom: .4rem;
}

/* 形質チップ */
.v32-ml-chip {
    background: rgba(212,160,52,.1);
    border: 1px solid rgba(212,160,52,.32);
    color: #e6dccb;
    font-size: .74rem;
    padding: .18rem .55rem;
    border-radius: 20px;
    display: inline-block;
    white-space: nowrap;
}

/* ゴール内チップ */
.v32-ml-chip-goal {
    background: rgba(212,160,52,.18) !important;
    border-color: rgba(212,160,52,.55) !important;
    color: #f0d080 !important;
}

/* 固定世代ラベル */
.v32-ml-fix-label {
    display: inline-block;
    font-size: .68rem;
    color: #f0d080;
    background: rgba(212,160,52,.1);
    border: 1px solid rgba(212,160,52,.25);
    border-radius: 20px;
    padding: .1rem .55rem;
    margin-top: .25rem;
    letter-spacing: .04em;
}

/* ════════════════════════
   矢印エリア（合流）
   ════════════════════════ */
.v32-ml-funnel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    margin: .1rem 0;
}
.v32-ml-svg {
    width: 180px;
    height: 48px;
    display: block;
    overflow: visible;
}
/* 合流世代ラベル */
.v32-ml-merge-gen {
    font-size: .76rem;
    font-weight: 700;
    color: #f0d080;
    letter-spacing: .06em;
    text-shadow: 0 0 8px rgba(212,160,52,.4);
    background: rgba(212,160,52,.1);
    border: 1px solid rgba(212,160,52,.3);
    border-radius: 20px;
    padding: .22rem .9rem;
    white-space: nowrap;
    margin-top: .1rem;
}

/* ════════════════════════
   STEP 3：ゴールボックス
   ════════════════════════ */
.v32-ml-goal {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: linear-gradient(135deg, rgba(28,20,8,.95) 0%, rgba(13,17,23,.95) 100%);
    border: 1.5px solid rgba(212,160,52,.5);
    border-radius: 10px;
    padding: .75rem 1rem;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(212,160,52,.1);
}
.v32-ml-goal-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}
.v32-ml-goal-txt {
    flex: 1;
    font-size: .76rem;
    color: #e6dccb;
    line-height: 1.85;
}
.v32-ml-goal-txt strong {
    color: #f0d080;
    font-size: .8rem;
    display: block;
    margin-bottom: .15rem;
    text-shadow: 0 0 8px rgba(212,160,52,.35);
}

/* ════════════════════════
   ステップ説明（①②③）
   ════════════════════════ */
.v32-ml-steps {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
    margin-top: .65rem;
    padding: .65rem .85rem;
    background: rgba(212,160,52,.04);
    border: 1px solid rgba(212,160,52,.15);
    border-left: 3px solid rgba(212,160,52,.4);
    border-radius: 6px;
    box-sizing: border-box;
}
.v32-ml-step-item {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .79rem;
    color: rgba(230,220,203,.75);
    line-height: 1.6;
}
.v32-ml-step-num {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    background: linear-gradient(180deg,#1c1408,#0d1117);
    border: 1px solid rgba(212,160,52,.42);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: #f0d080;
    text-shadow: 0 0 6px rgba(212,160,52,.38);
    margin-top: .1rem;
}

/* ════════════════════════
   スマホ対応
   ════════════════════════ */
@media (max-width: 480px) {
    .v32-ml-top-row { gap: .35rem; }
    .v32-ml-lane { padding: .55rem .6rem; }
    .v32-ml-lane-hd { font-size: .74rem; }
    .v32-ml-chip { font-size: .68rem; padding: .15rem .45rem; }
    .v32-ml-svg { width: 140px; height: 38px; }
    .v32-ml-goal { flex-direction: column; text-align: center; gap: .4rem; }
    .v32-ml-goal-icon { font-size: 1.3rem; }
    .v32-ml-steps { padding: .5rem .65rem; }
    .v32-ml-step-item { font-size: .74rem; }
}

/* ================================================================
   v2.0.14 遺伝的浮動・信頼区間 UI
   ================================================================ */

/* ── 信頼区間ブロック全体 ── */
.v214-drift {
    margin: .5rem 0 .3rem;
    padding: .6rem .8rem .55rem;
    background: rgba(13,17,23,.6);
    border: 1px solid rgba(212,160,52,.2);
    border-left: 3px solid rgba(212,160,52,.45);
    border-radius: 6px;
}

.v214-drift-ttl {
    font-size: .75rem;
    font-weight: 700;
    color: rgba(212,160,52,.75);
    letter-spacing: .06em;
    margin-bottom: .45rem;
}

/* ── 3列グリッド ── */
.v214-drift-grid {
    display: flex;
    gap: .5rem;
    width: 100%;
}

/* ── 各セル ── */
.v214-drift-cell {
    flex: 1;
    background: rgba(13,17,23,.75);
    border: 1px solid rgba(212,160,52,.2);
    border-radius: 6px;
    padding: .45rem .55rem;
    text-align: center;
}
.v214-drift-ok    { border-color: rgba(212,160,52,.35); }
.v214-drift-low   { border-color: rgba(240,140,60,.35); }
.v214-drift-empty { border-color: rgba(200,80,80,.3);
                    background: rgba(200,60,60,.06); }

/* サンプル数ラベル */
.v214-dc-n {
    font-size: .72rem;
    font-weight: 700;
    color: #f0d080;
    letter-spacing: .06em;
    margin-bottom: .2rem;
    text-shadow: 0 0 6px rgba(212,160,52,.35);
}

/* 期待値 */
.v214-dc-exp {
    font-size: .74rem;
    color: rgba(230,220,203,.85);
    margin-bottom: .15rem;
}
.v214-dc-exp strong {
    color: #f0d080;
    font-size: .82rem;
}

/* 信頼区間 */
.v214-dc-range {
    font-size: .68rem;
    color: rgba(200,190,175,.6);
    line-height: 1.4;
}
.v214-drift-empty .v214-dc-range {
    color: rgba(240,120,100,.7);
}
.v214-drift-empty .v214-dc-n {
    color: rgba(240,140,80,.8);
}

/* 注記 */
.v214-drift-note {
    font-size: .68rem;
    color: rgba(200,190,175,.5);
    margin-top: .4rem;
    line-height: 1.5;
}

/* ── スマホ対応 ── */
@media (max-width: 480px) {
    .v214-drift-grid { gap: .3rem; }
    .v214-drift-cell { padding: .35rem .4rem; }
    .v214-dc-n { font-size: .66rem; }
    .v214-dc-exp { font-size: .68rem; }
    .v214-dc-range { font-size: .62rem; }
}

/* ================================================================
   v2.0.14 繁殖データバンク UI
   ================================================================ */

/* ── データバンク案内バナー ── */
.mdb-banner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(13,17,23,.95) 0%, rgba(20,28,40,.95) 100%);
    border: 1px solid rgba(212,160,52,.35);
    border-left: 4px solid #d4a034;
    border-radius: 8px;
    padding: 1rem 1rem 1rem 1.1rem;
    margin-bottom: 1.2rem;
    position: relative;
}
.mdb-banner-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    margin-top: .1rem;
}
.mdb-banner-body { flex: 1; }
.mdb-banner-title {
    font-size: .85rem;
    font-weight: 700;
    color: #f0d080;
    letter-spacing: .05em;
    margin-bottom: .45rem;
    text-shadow: 0 0 8px rgba(212,160,52,.4);
}
.mdb-banner-text {
    font-size: .75rem;
    color: rgba(230,220,203,.8);
    line-height: 1.65;
    margin-bottom: .55rem;
}
.mdb-banner-text strong { color: #f0d080; }
.mdb-banner-tags {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.mdb-tag {
    font-size: .68rem;
    background: rgba(212,160,52,.12);
    border: 1px solid rgba(212,160,52,.3);
    color: rgba(212,160,52,.9);
    border-radius: 3px;
    padding: .15rem .45rem;
    letter-spacing: .04em;
}
.mdb-banner-close {
    position: absolute;
    top: .6rem; right: .7rem;
    background: none; border: none;
    color: rgba(200,190,175,.4);
    font-size: .8rem;
    cursor: pointer;
    padding: .2rem .35rem;
    border-radius: 3px;
    transition: color .2s;
}
.mdb-banner-close:hover { color: rgba(212,160,52,.8); }

/* ── 環境データセクション ── */
.mdb-env-section {
    background: rgba(13,17,23,.5);
    border: 1px solid rgba(212,160,52,.2);
    border-radius: 7px;
    padding: .85rem 1rem;
    margin: .6rem 0;
}
.mdb-env-title {
    font-size: .77rem;
    font-weight: 700;
    color: rgba(212,160,52,.75);
    letter-spacing: .06em;
    margin-bottom: .65rem;
}
.mdb-env-row {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: .65rem;
}
.mdb-env-item {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1;
    min-width: 140px;
}
.mdb-env-label {
    font-size: .72rem;
    color: rgba(230,220,203,.7);
    font-weight: 600;
    letter-spacing: .04em;
}
.mdb-env-input {
    background: rgba(13,17,23,.8) !important;
    border: 1px solid rgba(212,160,52,.3) !important;
    border-radius: 5px !important;
    color: rgba(230,220,203,.9) !important;
    padding: .4rem .6rem !important;
    font-size: .8rem !important;
    width: 100%;
}
.mdb-env-input:focus {
    border-color: rgba(212,160,52,.6) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(212,160,52,.12) !important;
}
.mdb-env-input option {
    background: #1a1f2b;
    color: rgba(230,220,203,.9);
}
.mdb-env-hint {
    font-size: .66rem;
    color: rgba(200,190,175,.45);
}

/* ── ニックネーム公開チェック ── */
.mdb-nickname-row {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.mdb-nickname-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: .78rem;
    color: rgba(230,220,203,.85);
}
.mdb-nickname-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #d4a034;
    cursor: pointer;
    flex-shrink: 0;
}
.mdb-nickname-hint {
    font-size: .67rem;
    color: rgba(200,190,175,.45);
    margin-left: 1.6rem;
}

/* ── スマホ対応 ── */
@media (max-width: 480px) {
    .mdb-banner { gap: .6rem; padding: .8rem; }
    .mdb-banner-icon { font-size: 1.4rem; }
    .mdb-env-row { gap: .7rem; }
    .mdb-env-item { min-width: 100%; }
}

/* ================================================================
   v2.0.18 ニックネーム入力欄
   ================================================================ */
.mdb-nickname-input-wrap {
    margin-top: .5rem;
    margin-left: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.mdb-nickname-input {
    max-width: 260px;
}

/* =====================================================
   v2.0.23 みんなの繁殖記録
   ===================================================== */

/* タブ切り替えボタン */
.mgcm-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    border-bottom: 2px solid #c8a84b;
    padding-bottom: 0;
}
.mgcm-tab {
    padding: 7px 18px;
    border: 2px solid #c8a84b;
    border-bottom: none;
    background: #fff;
    color: #c8a84b;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all .15s;
    margin-bottom: -2px;
}
.mgcm-tab:hover { background: #fdf5e0; }
.mgcm-tab-active {
    background: #1a1a1a;
    color: #c8a84b;
    border-color: #1a1a1a;
    border-bottom-color: #1a1a1a;
}

/* フィルター行 */
.mgcm-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* コミュニティカード */
.mgcm-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 14px 16px;
    transition: box-shadow .15s;
}
.mgcm-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }

.mgcm-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.mgcm-card-title {
    font-weight: bold;
    font-size: 14px;
    flex: 1;
    min-width: 120px;
}
.mgcm-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mgcm-contributor {
    font-size: 12px;
    color: #555;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 10px;
}
.mgcm-date { font-size: 11px; color: #999; }

/* 親魚行 */
.mgcm-parents {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #444;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: #fafafa;
    border-radius: 4px;
}
.mgcm-parent { flex: 1; min-width: 100px; }
.mgcm-x { color: #c8a84b; font-weight: bold; font-size: 15px; }
.mgcm-fry { font-size: 12px; color: #666; white-space: nowrap; }

/* 形質・発現率 */
.mgcm-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.mgcm-trait-pill {
    background: #1a1a1a;
    color: #c8a84b;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
}
.mgcm-trait-pill code {
    background: transparent;
    color: #ffd700;
    font-size: 11px;
    margin-right: 3px;
}

/* 環境データ */
.mgcm-env {
    font-size: 12px;
    color: #555;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: #f0f7ff;
    border-radius: 4px;
    display: inline-block;
}

/* メモ */
.mgcm-memo {
    font-size: 12px;
    color: #666;
    padding: 6px 10px;
    background: #fffde7;
    border-left: 3px solid #c8a84b;
    border-radius: 0 4px 4px 0;
    margin-bottom: 8px;
}

/* グラフ */
.mgcm-chart-wrap {
    margin-top: 8px;
    max-width: 480px;
}

/* ページャー */
.mgcm-pager {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}

/* =====================================================
   v2.0.27 不足スタイル補完
   ===================================================== */

/* 実測値入力グリッド */
.mg-br-trait-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}
.mg-br-trait-input-row {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--m2);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 4px;
    padding: 6px 9px;
    font-size: .75rem;
}
.mg-br-trait-input-label {
    flex: 1;
    color: var(--tx2);
}
.mg-br-actual-input {
    width: 60px;
    text-align: right;
}
.mg-br-actual-pct {
    color: var(--k8);
    font-weight: 600;
    min-width: 36px;
    text-align: right;
    font-size: .75rem;
}

/* 記録カード補完 */
.mg-br-card-x {
    color: var(--k8);
    font-weight: bold;
    font-size: .85rem;
    padding: 0 2px;
}
.mg-br-card-fry {
    font-size: .72rem;
    color: var(--tx3);
    margin-left: auto;
}
.mg-br-card-date {
    font-size: .68rem;
    color: var(--tx4);
    white-space: nowrap;
}
.mg-br-card-detail {
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 8px;
    padding-top: 8px;
}
.mg-br-detail-memo {
    font-size: .78rem;
    color: var(--tx3);
    background: rgba(255,255,255,.03);
    border-radius: 4px;
    padding: 6px 9px;
    margin-top: 6px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* .mg-br-card = .mg-br-record-card のエイリアス (v2.0.27) */
.mg-br-card {
    background: var(--m2);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 4px;
    padding: 13px;
    transition: border-color .14s;
}
.mg-br-card:hover { border-color: var(--bd1); box-shadow: 0 4px 20px rgba(0,0,0,.4); }

/* 形質チェックボックス (機能クラス: スタイルは継承) */
.mg-br-trait-check { cursor: pointer; }

/* ===================================================== */
/* v2.0.28: B1 トースト表示クラス / B3 ツリーボタン     */
/* ===================================================== */
.mg-br-toast-show{opacity:1;transform:translateX(-50%) translateY(0);}
.mg-br-card-btn.mg-tree-btn{color:var(--k8);border-color:rgba(221,168,68,.25);}
.mg-br-card-btn.mg-tree-btn:hover{background:rgba(221,168,68,.12);border-color:var(--k8);}

/* ===================================================== */
/* v2.0.29: みんなの記録 タグフィルター・タグ表示       */
/* ===================================================== */
.mgcm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 0 0 4px;
}
.mgcm-tag-pill {
    display: inline-block;
    background: rgba(221,168,68,.13);
    border: 1px solid rgba(221,168,68,.30);
    color: var(--k8, #dda844);
    border-radius: 12px;
    padding: 2px 9px;
    font-size: .72rem;
    cursor: default;
}

/* ===================================================== */
/* v2.0.30: みんなの記録タブ list-section 先頭配置対応    */
/* ===================================================== */
/* タブの下のコンテンツ（自分の記録一覧）との間隔 */
#mgcm-tabs + .mg-br-list-header,
#mgcm-tabs ~ .mg-br-list-header {
    margin-top: 12px;
}
/* みんなの記録エリアの上余白 */
#mgcm-area {
    margin-top: 12px;
}

/* =====================================================
   v2.0.31: mg-trait-text CSS追加
   （flex子要素として正しく機能するよう定義）
===================================================== */
.mg-trait-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* =====================================================
   v2.0.32: シミュ履歴保存UI
===================================================== */

/* ── 履歴バー（保存・呼び出しボタン列） ── */
.mg-sim-history-bar {
    display: flex;
    gap: 10px;
    margin: 10px 0 0;
    flex-wrap: wrap;
}
.mg-sim-save-btn,
.mg-sim-history-btn {
    padding: 8px 16px;
    border-radius: var(--r1);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--k5);
    transition: background .15s, transform .1s;
}
.mg-sim-save-btn {
    background: linear-gradient(135deg, #2a6e2a, #1a5a1a);
    color: #e8f5e8;
}
.mg-sim-save-btn:hover { background: linear-gradient(135deg, #3a8e3a, #2a7a2a); transform: translateY(-1px); }
.mg-sim-history-btn {
    background: var(--sf1);
    color: var(--tx1);
}
.mg-sim-history-btn:hover { background: var(--sf2); transform: translateY(-1px); }

/* ── 保存ダイアログ ── */
.mg-sim-save-dialog {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mg-sim-save-inner {
    background: var(--bg1);
    border: 1px solid var(--k5);
    border-radius: var(--r2);
    padding: 24px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.mg-sim-save-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--k8);
    margin-bottom: 6px;
}
.mg-sim-save-note {
    font-size: .8rem;
    color: var(--tx2);
    margin-bottom: 14px;
}
.mg-sim-save-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg2);
    border: 1px solid var(--k5);
    border-radius: var(--r1);
    color: var(--tx1);
    font-size: .9rem;
    box-sizing: border-box;
    margin-bottom: 14px;
    outline: none;
    transition: border-color .15s;
}
.mg-sim-save-input:focus { border-color: var(--k8); }
.mg-sim-save-btns {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.mg-sim-save-ok {
    padding: 8px 20px;
    background: var(--k8);
    color: var(--bg0);
    border: none;
    border-radius: var(--r1);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: opacity .15s;
}
.mg-sim-save-ok:hover { opacity: .85; }
.mg-sim-save-ok:disabled { opacity: .5; cursor: not-allowed; }
.mg-sim-save-cancel {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--k4);
    border-radius: var(--r1);
    color: var(--tx2);
    font-size: .9rem;
    cursor: pointer;
}
.mg-sim-save-cancel:hover { border-color: var(--k6); color: var(--tx1); }

/* ── 履歴一覧モーダル ── */
.mg-sim-history-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.mg-sim-history-inner {
    background: var(--bg1);
    border: 1px solid var(--k5);
    border-radius: var(--r2);
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    overflow: hidden;
}
.mg-sim-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--k4);
    flex-shrink: 0;
}
.mg-sim-history-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--k8);
}
.mg-sim-history-close {
    background: transparent;
    border: none;
    color: var(--tx2);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--r1);
    transition: background .12s;
}
.mg-sim-history-close:hover { background: var(--sf1); color: var(--tx1); }
.mg-sim-history-body {
    overflow-y: auto;
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mg-sim-history-empty {
    text-align: center;
    color: var(--tx3);
    font-size: .85rem;
    padding: 32px 0;
    line-height: 1.8;
}
.mg-sim-history-card {
    background: var(--bg2);
    border: 1px solid var(--k4);
    border-radius: var(--r1);
    padding: 12px 14px;
    transition: opacity .3s;
}
.mg-sim-history-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}
.mg-sim-history-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--k8);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mg-sim-history-date {
    font-size: .72rem;
    color: var(--tx3);
    flex-shrink: 0;
}
.mg-sim-history-traits {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}
.mg-sim-history-parent {
    font-size: .78rem;
    color: var(--tx2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mg-sim-history-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.mg-sim-history-load {
    padding: 6px 14px;
    background: var(--k8);
    color: var(--bg0);
    border: none;
    border-radius: var(--r1);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}
.mg-sim-history-load:hover { opacity: .85; }
.mg-sim-history-del {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #a33;
    border-radius: var(--r1);
    color: #c55;
    font-size: .8rem;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.mg-sim-history-del:hover { background: rgba(200,60,60,.15); color: #e66; }
.mg-sim-history-del:disabled { opacity: .4; cursor: not-allowed; }

/* ── トースト通知（genetics.js用） ── */
.mg-sim-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(30,30,30,.92);
    color: #e6dccb;
    border: 1px solid var(--k5);
    border-radius: 20px;
    padding: 9px 20px;
    font-size: .85rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    z-index: 11000;
    pointer-events: none;
    white-space: nowrap;
    max-width: 90vw;
    text-align: center;
}
.mg-sim-toast.mg-sim-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.mg-sim-toast.mg-sim-toast-error {
    background: rgba(80,20,20,.95);
    border-color: #a33;
}

/* =====================================================
   v2.1.0 CSS優先度正規化パッチ（Gemini指摘対応）
   
   問題: !important の乱用により、将来の変更が困難
   解決: CSS詳細度(specificity)を利用した優先度制御
   
   方針:
   1. 新しいスタイルは .medaka-genetics-app で囲む
   2. !important は使用しない
   3. 詳細度: .medaka-genetics-app .class > .class !important
   ===================================================== */

/* ルートコンテナに高詳細度クラスを付与する想定 */
/* JS側で #mg-tab-genetics に .medaka-genetics-app を追加 */

.medaka-genetics-app {
    /* CSS変数を一元管理（将来の変更を容易に） */
    --mg-gold: #d4a034;
    --mg-gold-light: #f0d080;
    --mg-gold-glow: rgba(212,160,52,0.5);
    --mg-black: #0d1117;
    --mg-black-light: #1c1408;
    --mg-text-primary: #e6dccb;
    --mg-text-secondary: rgba(230,220,203,0.7);
    --mg-border-radius: 4px;
    --mg-transition-fast: 0.18s;
    --mg-transition-normal: 0.25s;
}

/* ボタン共通スタイル（!important なし） */
.medaka-genetics-app .mg-btn-base {
    position: relative;
    background: linear-gradient(180deg, var(--mg-black-light) 0%, var(--mg-black) 100%);
    border: 1.5px solid var(--mg-gold);
    border-radius: var(--mg-border-radius);
    color: var(--mg-gold-light);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-shadow: 0 0 10px var(--mg-gold-glow);
    box-shadow:
        0 0 0 1px rgba(212,160,52,0.1) inset,
        0 3px 16px rgba(212,160,52,0.13),
        0 1px 0 rgba(0,0,0,0.7);
    overflow: hidden;
    transition: color var(--mg-transition-normal),
                box-shadow var(--mg-transition-normal),
                border-color var(--mg-transition-normal),
                transform 0.12s;
}

.medaka-genetics-app .mg-btn-base:hover {
    border-color: var(--mg-gold-light);
    color: #fff8e6;
    text-shadow: 0 0 14px var(--mg-gold-glow);
    box-shadow:
        0 0 0 1px rgba(212,160,52,0.15) inset,
        0 4px 24px rgba(212,160,52,0.22),
        0 1px 0 rgba(0,0,0,0.7);
}

.medaka-genetics-app .mg-btn-base:active {
    transform: scale(0.97);
}

/* タブボタン（!important なし） */
.medaka-genetics-app .mg-tab-btn-v2 {
    background: none;
    border-bottom: 2px solid transparent;
    color: rgba(230,220,203,0.42);
    transition: color var(--mg-transition-fast), border-color var(--mg-transition-fast);
}

.medaka-genetics-app .mg-tab-btn-v2:hover {
    color: rgba(212,160,52,0.72);
    border-bottom-color: rgba(212,160,52,0.22);
}

.medaka-genetics-app .mg-tab-btn-v2.active {
    background: none;
    color: var(--mg-gold-light);
    border-bottom: 2px solid var(--mg-gold);
    text-shadow: 0 0 10px var(--mg-gold-glow);
}

/* 入力フィールド（!important なし） */
.medaka-genetics-app .mg-input-v2 {
    background: rgba(13,17,23,0.7);
    border: 1px solid rgba(212,160,52,0.3);
    border-radius: var(--mg-border-radius);
    color: var(--mg-text-primary);
    padding: 0.5em 0.75em;
    transition: border-color var(--mg-transition-fast), box-shadow var(--mg-transition-fast);
}

.medaka-genetics-app .mg-input-v2:focus {
    outline: none;
    border-color: var(--mg-gold);
    box-shadow: 0 0 0 2px rgba(212,160,52,0.2);
}

/* カード（!important なし） */
.medaka-genetics-app .mg-card-v2 {
    background: linear-gradient(180deg, rgba(28,20,8,0.95) 0%, rgba(13,17,23,0.98) 100%);
    border: 1px solid rgba(212,160,52,0.25);
    border-radius: 6px;
    padding: 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ユーティリティ: !important を避けるための高詳細度セレクタ */
.medaka-genetics-app .mg-force-hide { display: none; }
.medaka-genetics-app .mg-force-show { display: block; }
.medaka-genetics-app .mg-force-flex { display: flex; }
.medaka-genetics-app .mg-force-inline { display: inline; }

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .medaka-genetics-app {
        --mg-border-radius: 3px;
    }
}