/* ============================================================
   ROM v2 装備・ペット系ツールの共通部品 (equip-common.css)

   読み込むページ: shadowfrost / pvp-pet / god / safe-refine（白パネル系）
                   refine / blessing（夜空系）
   これら6ページで同じ内容がコピーされていた部品をまとめたもの。
   他のページからは読まない（全ページ共通のものは common.css / gacha_styles.css）。

   ■ 読み込み順
     common.css → gacha_styles.css（白パネル系のみ）→ equip-common.css → ページ固有 <style>
     色・幅などページごとに違う値は CSS 変数で渡す（各部品の先頭コメント参照）。
   ============================================================ */

/* ---------- 外枠 <div class="eq-app"> ----------
   --app-max … 最大幅（既定 1100px） */
.eq-app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  max-width: var(--app-max, 1100px);
  margin: 0 auto;
  padding: 24px 24px 56px;
}

/* ---------- ヘッダーの余白 <header class="site eq-head"> ----------
   見た目は common.css のまま。パネルとの間隔を取るため下側だけ厚くする */
header.site.eq-head {
  padding: 18px 4px 14px;
  margin-bottom: 14px;
}

/* ---------- 白パネル <div class="eq-panel"> ---------- */
.eq-panel {
  background: var(--panel);
  border-radius: 22px;
  padding: 18px 18px 22px;
  box-shadow: var(--sh-panel);
  border: 1px solid var(--panel-edge);
  width: 100%;
  margin: 0 auto;
  /* 白パネル上では common.css の金色フォーカスリング（#ffe088）が見えないため濃い青にする */
  --focus-ring: var(--sky-btn-d, #2a64c4);
}

/* ---------- 金色タブ ----------
   <div class="eq-tabs"><span class="eq-tabs-cap">…</span>
     <button type="button" class="eq-tab" aria-pressed="true">…</button></div>
   選択中は aria-pressed="true"（クラスではなく属性で見た目を切り替える） */
.eq-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.eq-tabs-cap {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin-right: 4px;
  letter-spacing: 0.04em;
}
.eq-tab {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: var(--fs-md);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid #c8d4eb;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s, box-shadow 0.15s, background 0.2s, color 0.2s;
}
.eq-tab:hover:not([aria-pressed="true"]) {
  background: #f3f6fd;
  color: var(--sky-ink);
  border-color: var(--sky-deep);
}
.eq-tab[aria-pressed="true"] {
  background: linear-gradient(180deg, #fff0c9 0%, var(--gold-1) 50%, var(--gold-2) 100%);
  color: #4a2f00;
  border-color: var(--gold-2);
  box-shadow: 0 2px 10px rgba(244, 210, 122, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------- スクロール追従する帯 <div class="eq-sticky"> ---------- */
.eq-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel);
  padding-top: 10px;
  box-shadow: 0 8px 16px -4px rgba(20, 22, 55, 0.16);
}

/* ---------- スライダー一式（js/equip-common.js の ROMEquip.slider と対）----------
   <div class="eq-slider">
     <label class="eq-slider-cap" for="x">精錬値</label>
     <button type="button" class="eq-step" data-step="-1" aria-label="…">−</button>
     <input type="range" id="x" …>
     <button type="button" class="eq-step" data-step="1" aria-label="…">＋</button>
     <output class="eq-slider-val" for="x">+0</output>
   </div>
   色の変数（既定は金色）:
     --sl-from / --sl-to … 塗りのグラデーション  --sl-thumb … つまみの色
     --sl-edge … つまみの縁・ボタンのホバー縁    --sl-glow … つまみの影
     --sl-ink … ±ボタンと数値の色               --sl-hover … ±ボタンのホバー背景
     --sl-val-w / --sl-val-w-sm … 数値欄の最小幅（PC / スマホ） */
.eq-slider {
  --sl-from: var(--gold-2);
  --sl-to: var(--gold-1);
  --sl-thumb: #ffe9b8;
  --sl-edge: var(--gold-2);
  --sl-glow: rgba(180, 130, 30, 0.5);
  --sl-ink: var(--gold-3);
  --sl-hover: #fffaef;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--panel-inner);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
}
.eq-slider-cap {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.eq-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 180px;
  min-width: 140px;
  --eq-fill: 0%;   /* 塗り位置。ROMEquip.slider が値に応じて更新する */
  height: 28px;    /* トラック(6px)より高くしてタップ領域を拡大 */
  margin: 0;
  background: transparent;
  cursor: pointer;
  /* 縦ジェスチャーはページスクロールに渡す（スクロール中にトラックへ触れて値が動く誤操作を防ぐ） */
  touch-action: pan-y;
}
.eq-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sl-from) 0%, var(--sl-to) var(--eq-fill), #dbe3f0 var(--eq-fill));
}
.eq-slider input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sl-from) 0%, var(--sl-to) var(--eq-fill), #dbe3f0 var(--eq-fill));
}
.eq-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px; /* (トラック6px − つまみ20px) / 2 でトラック中央に揃える */
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--sl-thumb) 70%);
  border: 2px solid var(--sl-edge);
  box-shadow: 0 1px 4px var(--sl-glow);
  cursor: pointer;
}
.eq-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--sl-thumb) 70%);
  border: 2px solid var(--sl-edge);
  box-shadow: 0 1px 4px var(--sl-glow);
  cursor: pointer;
}
/* − / ＋ ステップボタン（スクロール追従中でもドラッグせず1段階ずつ調整できる） */
.eq-step {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #c8d4eb;
  background: #fff;
  color: var(--sl-ink);
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /* 連打時のダブルタップズーム防止 */
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.eq-step:hover:not(:disabled) { border-color: var(--sl-edge); background: var(--sl-hover); }
.eq-step:active:not(:disabled) { transform: scale(0.92); }
.eq-step:disabled { opacity: 0.35; cursor: default; }
.eq-slider-val {
  flex: 0 0 auto;
  font-family: var(--f-num);
  font-weight: 700;
  font-size: 22px;
  color: var(--sl-ink);
  min-width: var(--sl-val-w, 52px);
  text-align: center;
}

/* ---------- 自作チェックボックス ----------
   <label class="eq-check"><input type="checkbox" class="sr-only"><span class="eq-box"></span>文言</label>
   入力は .sr-only（common.css）で視覚的にだけ隠す。display:none にするとキーボードで操作できない。
   変数: --chk-size 箱の大きさ / --chk-edge 枠 / --chk-bg 地 / --chk-on・--chk-on-edge ON の色 / --chk-mark ✓ の大きさ
   .is-green … ON を緑にする（精錬費用5%DOWN） */
.eq-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 見た目の高さ（20px 前後）と配置は変えずに、上下の padding＋負の margin でタップ領域を 40px 前後に広げる */
  padding-block: 10px;
  margin-block: -10px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.eq-box {
  flex: none;
  width: var(--chk-size, 20px);
  height: var(--chk-size, 20px);
  border-radius: 5px;
  border: 2px solid var(--chk-edge, #9fb6d6);
  background: var(--chk-bg, #fff);
  display: grid;
  place-items: center;
  transition: 0.15s;
}
.eq-check input:checked + .eq-box {
  background: var(--chk-on, linear-gradient(180deg, #5fa0ec, #3a78d4));
  border-color: var(--chk-on-edge, #3a78d4);
}
.eq-check input:checked + .eq-box::after {
  content: "✓";
  display: block;
  color: #fff;
  font-size: var(--chk-mark, 13px);
  font-weight: 900;
  line-height: 1;
}
.eq-check input:focus-visible + .eq-box {
  outline: 2px solid var(--focus-ring, #ffe088);
  outline-offset: 2px;
}
.eq-check.is-green {
  --chk-on: linear-gradient(180deg, #5fc06f, #2f9e4a);
  --chk-on-edge: #2f9e4a;
}

/* ---------- 夜空系ページ（refine / blessing）<body class="eq-night"> ---------- */
body.eq-night {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  color: #eaf1ff;
  min-height: 100vh;
  background: var(--bg-night);
  background-attachment: fixed;
  overflow-x: hidden;
}
/* 見出し右の罫線 <h2>見出し<span class="eq-ln" aria-hidden="true"></span></h2> */
.eq-ln {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(150, 190, 255, 0.5), transparent);
}

/* ---------- スマホ ---------- */
@media (max-width: 600px) {
  .eq-app { padding: 20px var(--gutter-panel) 48px; }
  .eq-panel { padding: 14px 12px 18px; border-radius: 18px; }
  /* スライダー: つまみとボタンを大きく、追従バーが1行に収まるよう余白を詰める */
  .eq-slider { gap: 8px; padding: 8px 10px; }
  .eq-slider input[type="range"] { flex: 1 1 0; min-width: 0; }
  .eq-slider input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
  .eq-slider input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
  .eq-step { width: 38px; height: 38px; }
  .eq-slider-val { min-width: var(--sl-val-w-sm, 42px); font-size: 20px; }
}