/* ╔═══════════════════════════════════════════════════════════════════╗
     xinfa.css — XINFA grid / 案A card layer / compare-modal 系 (.wwm-cmp-*) components 層残置分
     @layer Step 4 (2026-06-06): styles/components.css を per-component 分割。
     cascade 同値性は component-split-audit.cjs で機械証明 (同 layer 内 順序保存)。
     file 読込順 = index.html link 順 = scripts/css-files.cjs (単一真実) — 勝手に入替えるな
   ╚═══════════════════════════════════════════════════════════════════╝ */
@layer components {

/* ── 心法 Tier効果 を 武具対照 row 風リスト化 (T番号chip + 効果, dashed区切り) ── */
.wwm-cmp-modal-a .wwm-cmp-xinfa-rows { padding: 2px 6px 3px; display: block; }

.wwm-cmp-tier-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 2px;
  border-bottom: 1px dashed var(--gold-tint);
  font-size: var(--text-sm); line-height: 1.3;
}

.wwm-cmp-tier-row:last-child { border-bottom: none; }

.wwm-cmp-tier-num {
  flex-shrink: 0; min-width: 24px; text-align: center;
  font-family: var(--f-mono); font-weight: 700; font-size: var(--text-xs);
  padding: 0 var(--space-1); border-radius: 2px;
  background: rgba(201,164,90,0.16); color: var(--gold-bright);
  border: 1px solid rgba(201,164,90,0.4);
}

.wwm-cmp-tier-eff { flex: 1 1 auto; color: var(--paper); }

.wwm-cmp-tier-row.wwm-tier-unrel { opacity: 0.42; }

.wwm-cmp-tier-row.wwm-tier-unrel .wwm-cmp-tier-num { background: var(--hover-trace); color: var(--paper-mute); border-color: rgba(255,255,255,0.14); }

.wwm-cmp-tier-row.wwm-tier-kfmiss .wwm-cmp-tier-eff { color: var(--vermilion-bright); }

.wwm-cmp-tier-row.wwm-tier-empty { opacity: 0.3; }

.wwm-cmp-tier-row.wwm-tier-empty .wwm-cmp-tier-eff { font-style: italic; }

/* design-preview.html 準拠: --f-latin = Cinzel, --jade-bright = #a8d4b4 */
.tier-badge-baseline { /* baseline は current と同等表示 */ }

.wwm-hero-delta.pos { color: #2ec27e; }

.wwm-hero-delta.neg { color: #ff6b6b; }

.wwm-hero-delta.zero { color: rgba(255,255,255,0.35); }

/* ライトモード: 白系rgba background を 影系に */
/* ライト rank/opt: zebra + 常時アクセント + hover を統一 */
.wwm-cmp-lv {
  font-size: 0.75em;
  color: var(--gold-bright);
  font-family: var(--f-mono);
  font-weight: var(--fw-semibold);
  margin-left: var(--space-1-5);
  padding: 1px 5px;
  border: 1px solid var(--gold-deep);
  border-radius: 2px;
  vertical-align: middle;
}

.wwm-cmp-lv-select {
  font-size: 0.85em;
  color: var(--c-cmp-lv-select-fg);
  font-family: var(--f-mono);
  font-weight: var(--fw-semibold);
  margin-left: var(--space-1-5);
  padding: var(--space-half) var(--space-2);
  background: var(--bg-raised);
  border: 1px solid var(--gold-deep);
  border-radius: 2px;
  vertical-align: middle;
  cursor: pointer;
  border-color: var(--c-cmp-lv-select-border);
}

.wwm-cmp-lv-select option {
  background: var(--bg-raised);
  color: var(--gold-bright);
  font-family: var(--f-mono);
}

/* ライト: select/input 黒背景 → 紙系 */
/* ライト: 装備比較 セット効果 (赤系title) glow弱 — 副情報 (セット名) 濃朱 統一 */
/* ライト: 装備カード 武術名 + 心法カード 心法名 (主情報) — ライト主文字色 + 太字 統一 */
/* ライト: equip-icon (装備カード白アイコン) は既対応、cmp内icon もinvert解除 */
/* ── ライト: 武具対照 (案A) paper化 — design-sample-compare.html 案A 準拠 ── */
/* ヘッダ下線: ライトは中央加重の赤グラデのみ (full-width 金線は消す)。::after は position:absolute 明示で全幅化 (flex item 化回避) */
/* cols (現有/新置 パネル) */
/* kongfu / set ヘッダ */
/* 新置側 select も現有ヘッダと同 tint に揃える (武術=tan / セット=赤grad) */
/* 名称 / 値 */
/* フォーム (select / input) 紙化 — kongfu/set-select は tint 維持のため除外 */
/* Lv chip */
/* MAX% バッジ rank別 (light: 濃色文字で可読化) */
/* フッタ / delta / 副ボタン */
/* 背景アイコン: ライトは main (.wwm-modal-bg-icon) 同様 黒シルエット(=紙上グレー)化 + 視認性UP。dark の invert(1)白は cream で不可視のため */
/* ドロップダウン (option) 紙化 — dark の var(--bg-raised) 黒は light で開くと黒popup化のため */
/* Lv select option は dark側が高specificity (.title .lv-select option) のため同等以上で上書き */
/* Lv select の閉状態 background-color 紙化 (開く瞬間の黒フラッシュ防止)。kongfu/set は tint 維持のため除外 */
.wwm-modal-square > .wwm-modal-header,
.wwm-modal-square > .wwm-modal-body { position: relative; z-index: 1; }

.wwm-modal-square > * { position: relative; z-index: 1; }

/* 弱点指摘 modal アクセント装飾は modals.css 末尾へ移動済
   (2026-06-05 @layer Step 1: 汎用 modal rule との file 分裂解消 — layer 移行で
   modals.css が後 layer になり、 components.css 残置だと spec 勝ちが order 負けに反転するため) */
.wwm-cmp-kongfu {
  font-size: var(--text-12); color: var(--accent);
  font-weight: var(--fw-semibold); margin-left: var(--space-2);
}

/* ── Xinfa Grid ── */
.wwm-xinfa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2-5);
  margin-top: var(--space-2);
}

/* sidebar 心法カードは 横1列 (4 心法 + 1 武庫 = 5列) で表示 */
#wwmXinfaGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* min-width 削除: 親 .wwm-app-body min-width:1010 で一元管理 (minmax(0,1fr) = 完全flex) */
}

.wwm-xinfa-slot {
  position: relative;
  padding: var(--space-half) var(--space-2-5) var(--space-6) var(--space-8);
  background-image:
    linear-gradient(180deg, rgba(26,20,16,0.62), rgba(15,12,14,0.75)),
    url("https://www.wherewindsmeetgame.com/m/zt/20251121182818/img/bg_usercard2-e8900864.png");
  background-position: 0 0, center;
  background-size: auto, 100% 100%;
  background-repeat: repeat, no-repeat;
  border: 1px solid var(--ink-2);
  border-radius: 2px;
  min-height: 70px;
  overflow: visible; /* 流派バッジ 飛び出し許可 (xinfa-icon-wrap が個別clip) */
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.wwm-xinfa-icon-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* 心法 slot 流派 (liupai) バッジ overlay: 武器版と同設定 */
.wwm-xinfa-liupai-badge {
  position: absolute;
  left: 9px; top: -13px;
  width: 36px; height: 36px;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}

/* 心法 rail label も center 維持 (badge は rail上端 / label center で共存) */
.wwm-xinfa-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--accent-mid);
}

.wwm-xinfa-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 30px;
  background: var(--c-rail-bg);
  border-right: 1px solid var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-2) 0;
  z-index: 2;
}

.wwm-xinfa-rail-text {
  font-family: var(--f-display); font-weight: var(--fw-black);
  font-size: var(--text-12); letter-spacing: 0.3em;
  writing-mode: vertical-rl; text-orientation: upright;
  color: var(--gold-bright);
  text-shadow: 0 0 10px var(--gold-bright-mid-2);
  line-height: 1.05;
}

.wwm-xinfa-slot[data-arsenal-slot] .wwm-xinfa-rail-text {
  font-size: var(--text-md); letter-spacing: 0.45em;
}

.wwm-xinfa-header {
  font-size: var(--text-md);
  display: flex; align-items: center; gap: var(--space-2);
}

.wwm-xinfa-header { flex-wrap: wrap; }

.wwm-xinfa-header b { font-size: var(--text-md); color: var(--paper); font-weight: 600; }

.wwm-xinfa-tier {
  font-family: var(--f-mono);
  font-size: var(--text-xs);
  color: var(--c-xinfa-tier-fg);
  padding: 1px 5px;
  border: 1px solid var(--ink-2);
  border-radius: 2px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.wwm-xinfa-icon {
  position: absolute;
  right: -12px; top: 62%;
  transform: translateY(-50%);
  width: 88px; height: 88px;
  opacity: var(--c-icon-dim-opacity);
  filter:
    drop-shadow(0 0 3px var(--gold-bright-mid))
    drop-shadow(0 0 8px rgba(240,210,138,0.3))
    drop-shadow(0 0 16px rgba(240,210,138,0.2));
  pointer-events: none;
  z-index: 1;
}

.wwm-xinfa-card-score {
  position: absolute;
  left: 40px; bottom: 6px;
  font-family: var(--f-latin);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 6px rgba(240,210,138,0.55),
    0 0 14px rgba(240,210,138,0.30);
  z-index: 2;
}

.wwm-equip-slot[data-slot="1"]  { grid-column: 1; grid-row: 1; }

.wwm-equip-slot[data-slot="2"]  { grid-column: 2; grid-row: 1; }

.wwm-equip-slot[data-slot="10"] { grid-column: 1; grid-row: 2; }

.wwm-equip-slot[data-slot="11"] { grid-column: 2; grid-row: 2; }

.wwm-equip-slot[data-slot="3"]  { grid-column: 3; grid-row: 1; }

.wwm-equip-slot[data-slot="4"]  { grid-column: 4; grid-row: 1; }

.wwm-equip-slot[data-slot="5"]  { grid-column: 3; grid-row: 2; }

.wwm-equip-slot[data-slot="8"]  { grid-column: 4; grid-row: 2; }

.wwm-equip-slot[data-slot="21"] { grid-column: 5; grid-row: 1; }

.wwm-equip-slot[data-slot="9"]  { grid-column: 5; grid-row: 2; }

.wwm-gear-grid .wwm-equip-slot {
  margin: 0; padding: var(--space-half) var(--space-2-5) var(--space-7) var(--space-8);
  background-image:
    linear-gradient(180deg, rgba(26,20,16,0.62), rgba(15,12,14,0.75)),
    url("https://www.wherewindsmeetgame.com/m/zt/20251121182818/img/bg_usercard2-e8900864.png");
  background-position: 0 0, center;
  background-size: auto, 100% 100%;
  background-repeat: repeat, no-repeat;
  border-radius: 2px; border: 1px solid var(--ink-2);
  min-width: 0;
  display: flex; flex-direction: column;
  overflow: visible; /* 流派バッジ 飛び出し許可 (icon-wrap 側で武器アイコン clip) */
  min-height: 80px;
  position: relative;
}

.wwm-equip-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 30px;
  background: var(--c-rail-bg);
  border-right: 1px solid var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-2) 0;
  z-index: 2;
}

.wwm-equip-rail-text {
  font-family: var(--f-display); font-weight: var(--fw-black);
  font-size: var(--text-md); letter-spacing: 0.3em;
  writing-mode: vertical-rl; text-orientation: upright;
  color: var(--paper);
  text-shadow: 0 0 10px rgba(232,215,180,0.4);
  line-height: 1.05;
}

/* 武器セット (主武器/副武器/環/佩び物) - 赤 */
.wwm-equip-slot[data-slot="1"]  .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="2"]  .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="10"] .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="11"] .wwm-equip-rail-text {
  color: var(--vermilion-bright);
  text-shadow: 0 0 12px var(--vermilion-bright-mid-2);
}

/* 防具セット (冠/胸当て/膝鎧/小手) - 金 */
.wwm-equip-slot[data-slot="3"] .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="4"] .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="5"] .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="8"] .wwm-equip-rail-text {
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(240,210,138,0.55);
}

/* 弓セット (弓矢/射玦) - 緑 */
.wwm-equip-slot[data-slot="9"]  .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="21"] .wwm-equip-rail-text {
  color: var(--jade-bright);
  text-shadow: 0 0 12px var(--jade-bright-strong);
}

.wwm-equip-setname {
  font-size: var(--text-sm);
  color: var(--c-equip-setname-fg);
  text-shadow: var(--c-equip-setname-text-shadow);
  letter-spacing: 0.05em;
}

.wwm-equip-slot-header { font-size: var(--text-md); padding: 0; margin-bottom: var(--space-half); }

.wwm-equip-base, .wwm-equip-affix { margin-top: var(--space-1-5); font-size: var(--text-12); }

.wwm-equip-base b, .wwm-equip-affix b { opacity: 0.85; }

.wwm-equip-base ul, .wwm-equip-affix ul { margin: var(--space-1) 0; font-size: var(--text-12); }

.wwm-equip-affix .wwm-rank-blue   { color: #4a9eff; }

.wwm-equip-affix .wwm-rank-purple { color: var(--liupai-guyun); }

.wwm-equip-affix .wwm-rank-gold   { color: var(--accent); }

.wwm-affix-useful { color: var(--ratio-ok); font-weight: var(--fw-bold); cursor: help; }

/* ============================================================
   装備カード / 心法カード 案A改 追加レイヤー
   - 古紙 turbulence (rail除外 left:30px 開始)
   - rail 上下端 中央加重 赤グラデ線 (対称)
   - hover 朱化 (border朱 + 朱shadow)
   - 心法 tier chip (朱赤、 sidebar.js で注入)
   ============================================================ */
/* 古紙 turbulence (装備カード) */
.wwm-gear-grid .wwm-equip-slot::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 30px;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.5  0 0 0 0 0.3  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0;
  mix-blend-mode: overlay;
}

/* 古紙 turbulence (心法カード) */
.wwm-xinfa-slot::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 30px;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.5  0 0 0 0 0.3  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0;
  mix-blend-mode: overlay;
}

/* rail 上下端 赤グラデ線 (装備) */
.wwm-equip-rail::before,
.wwm-equip-rail::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vermilion-bright), transparent);
  opacity: 0.65;
}

.wwm-equip-rail::before { top: 6px; }

.wwm-equip-rail::after  { bottom: 6px; }

/* rail 上下端 赤グラデ線 (心法) */
.wwm-xinfa-rail::before,
.wwm-xinfa-rail::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vermilion-bright), transparent);
  opacity: 0.65;
}

.wwm-xinfa-rail::before { top: 6px; }

.wwm-xinfa-rail::after  { bottom: 6px; }

/* hover 朱化 (装備) — 既存 gold hover を override */
.wwm-gear-grid .wwm-equip-slot[data-slot]:hover {
  border-color: var(--vermilion-bright);
  box-shadow: 0 4px 14px rgba(232,81,58,0.28);
}

/* hover 朱化 (心法) — 既存 gold hover を override */
.wwm-xinfa-slot:hover {
  border-color: var(--vermilion-bright);
  box-shadow: 0 4px 14px rgba(232,81,58,0.28);
}

/* 心法カード内 tier chip (sidebar.js renderXinfaGrid で注入) */
.wwm-xinfa-tier-chip {
  position: absolute;
  top: 5px; right: 8px;
  z-index: 3;
  font-family: var(--f-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--c-fg-vermilion-strong);
  padding: 1px 6px;
  border: 1px solid rgba(232,81,58,0.50);
  background: var(--c-xinfa-tier-chip-bg);
  letter-spacing: 0.08em;
  border-radius: 1px;
  pointer-events: none;
  border-color: var(--c-xinfa-tier-chip-border);
}

/* ライトモード tier chip */
/* ライトモード 古紙 (overlay→multiply で 紙感薄く) */
/* カード 非アクティブ border 微強化 (ほんのすこし目立つ) */
.wwm-gear-grid .wwm-equip-slot,
.wwm-xinfa-slot {
  border-color: var(--c-slot-border);
}

/* placeholder grid (import前) */
.wwm-placeholder-grid { cursor: pointer; }

.wwm-placeholder-slot {
  position: relative;
  min-height: 80px;
  background-color: var(--overlay-tint);
  border: 1px dashed var(--ink-2);
  display: grid;
  place-items: center;
  color: var(--paper-mute);
  transition: border-color 0.15s, background-color 0.15s;
}

.wwm-placeholder-grid:hover .wwm-placeholder-slot {
  border-color: var(--gold-deep);
  background-color: var(--gold-faint);
}

/* light rank色 override 3 rule は light.css 末尾へ再移動 (Step 5-c 2026-06-06):
   modals.css .wwm-rank-* (modals layer = components より後) との競合は components 内では
   imp でしか勝てない → theme layer (light) なら natural 常勝 = imp 不要。 勝者不変 */

@media (max-width: 768px) {
  .wwm-equip-slot[data-slot] {
    grid-column: 1; grid-row: auto;
  }
}

@media (max-width: 480px) {
  /* ─── Phase 5: 装備 2列 stack / 心法 2列 / 武庫 直下 ─── */
  .wwm-gear-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas: none;
    gap: var(--space-2);
  }
  .wwm-gear-grid .wwm-equip-slot {
    grid-column: auto;
    grid-row: auto;
  }
  /* 装備カード 並び順: 主武器→副武器→環→佩→冠胄→胸冑→膝冑→腕冑→弓箭→射玦 */
  .wwm-gear-grid .wwm-equip-slot[data-slot="1"]  { order: 1; }
  .wwm-gear-grid .wwm-equip-slot[data-slot="2"]  { order: 2; }
  .wwm-gear-grid .wwm-equip-slot[data-slot="10"] { order: 3; }
  .wwm-gear-grid .wwm-equip-slot[data-slot="11"] { order: 4; }
  .wwm-gear-grid .wwm-equip-slot[data-slot="3"]  { order: 5; }
  .wwm-gear-grid .wwm-equip-slot[data-slot="4"]  { order: 6; }
  .wwm-gear-grid .wwm-equip-slot[data-slot="5"]  { order: 7; }
  .wwm-gear-grid .wwm-equip-slot[data-slot="8"]  { order: 8; }
  .wwm-gear-grid .wwm-equip-slot[data-slot="21"] { order: 9; }
  .wwm-gear-grid .wwm-equip-slot[data-slot="9"]  { order: 10; }
  /* 心法 grid: 2列 stack、 武庫 心法直下 1枚 (parent grid 確認後 後 phase で 微調整) */
  .wwm-xinfa-grid,
  #wwmXinfaGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .wwm-xinfa-slot[data-arsenal-slot] {
    grid-column: 1 / -1;  /* 武庫 横全幅で 心法直下 */
  }
}

} /* end @layer components */