@layer modals {

/* ╔═══════════════════════════════════════════════════════════════════╗
     MODAL CLUSTER (import / setup / edit / compare / changelog / note) — 集約 (Tier 3 Step 3)
     styles.css から切出。 cascade: tokens → animations → ... → styles → dark → light
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 11 — IMPORT MODAL
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Import Modal ───────────────────────────────────────────── */
.wwm-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-toast);
  padding: var(--space-4);
}
.wwm-modal {
  position: relative;
  background:
    radial-gradient(ellipse at top right, var(--gold-bright-faint), transparent 55%),
    linear-gradient(180deg, var(--surf-1), var(--surf-2));
  color: var(--c-modal-fg);
  border-radius: 0 0 2px 2px;
  max-width: 600px; width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  border: 1px solid var(--ink-2);
  border-top: 1px solid var(--gold-deep);
  border-left: 3px solid var(--gold);
  box-shadow:
    inset 0 1px 0 var(--gold-bright-faint),
    0 12px 40px var(--overlay-heavy);
}
/* lang picker (app.js _showLangPicker — 旧 inline style から class 化 2026-06-05) */
.wwm-modal.wwm-lang-picker {
  max-width: 480px;
  text-align: center;
  padding: 32px 28px;
}
.wwm-lang-picker h2 {
  margin: 0 0 18px;
  font-family: Cinzel, serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  color: var(--gold-bright);
}
.wwm-lang-picker-btns {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wwm-lang-picker-btns .wwm-btn-secondary { min-width: 90px; }
.wwm-modal::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 90px; height: 90px;
  background: radial-gradient(ellipse at top right, rgba(240,210,138,0.18), transparent 65%);
  pointer-events: none;
  z-index: 0;
  border-radius: 0 0 0 2px;
}
.wwm-modal::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 16px; height: 16px;
  border-top: 1px solid var(--gold-deep);
  border-right: 1px solid var(--gold-deep);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}
.wwm-modal > * { position: relative; z-index: 2; }
.wwm-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4) var(--space-2-5);
  border-bottom: 1px solid var(--ink-2);
  position: relative;
}
.wwm-modal-header::after {
  content: '';
  position: absolute;
  left: 16px; bottom: -1px;
  width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--gold-bright), transparent);
  box-shadow: 0 0 8px var(--gold-bright-mid);
}
.wwm-modal-header h2 {
  margin: 0;
  font-family: var(--f-display, var(--f-latin));
  font-size: var(--text-15); font-weight: var(--fw-bold);
  color: var(--gold-bright);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--gold-bright-soft);
}
.wwm-modal-close {
  background: none; border: none;
  color: inherit; font-size: var(--text-24);
  cursor: pointer; padding: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.wwm-modal-close:hover { background: var(--hover-soft); }
.wwm-modal-body {
  padding: var(--space-4); overflow-y: auto; flex: 1;
}
.wwm-btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.wwm-btn-primary, .wwm-btn-secondary {
  padding: 10px 18px;
  border: none; border-radius: 6px;
  cursor: pointer; font-weight: var(--fw-bold); font-size: var(--text-14);
  text-decoration: none; display: inline-block;
  font-family: inherit;
}
.wwm-btn-primary {
  background: var(--accent);
  color: #000;
}
.wwm-btn-primary:hover { opacity: 0.85; }
.wwm-btn-secondary {
  background: var(--c-btn-secondary-bg);
  color: var(--c-btn-secondary-fg);
  border: 1px solid rgba(255,255,255,0.3);
  border-color: var(--c-btn-secondary-border);
}
.wwm-btn-secondary:hover { background: var(--c-btn-secondary-hover-bg); }
.wwm-list { margin: 0; padding-left: 18px; }
.wwm-list li { margin: var(--space-half) 0; }
.wwm-muted { opacity: 0.6; font-size: var(--text-12); }
.wwm-last-import {
  margin-top: var(--space-4); padding: var(--space-2-5);
  background: var(--c-last-import-bg);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}
.wwm-last-import > div { margin: var(--space-1-5) 0; font-size: var(--text-md); }
.wwm-preview-summary { font-size: var(--text-14); }
.wwm-info-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 6px 32px;
  margin-bottom: var(--space-3);
  justify-content: start;
}
.wwm-info-col { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; align-content: start; }
.wwm-info-row { display: contents; font-size: var(--text-md); }
.wwm-info-label { opacity: 0.7; white-space: nowrap; }
.wwm-info-val { font-weight: var(--fw-semibold); white-space: nowrap; }
@media (max-width: 768px) {
  .wwm-info-grid { grid-template-columns: 1fr; }
}
.wwm-equip-base ul li, .wwm-equip-affix ul li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-1); list-style: none;
  font-size: var(--text-sm);
}
.wwm-equip-base ul, .wwm-equip-affix ul { padding-left: 0; list-style: none; }
.wwm-stat-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wwm-stat-val { font-weight: var(--fw-bold); white-space: nowrap; text-align: right; flex-shrink: 0; }
.wwm-stat-pct { font-weight: var(--fw-normal); opacity: 0.65; font-size: var(--text-xs); }

/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 13 — SETUP MODAL WIZARD
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Setup modal wizard ─────────────────────────────────────── */
.wwm-setup-collapse {
  margin: var(--space-3) 0;
  border: 1px solid var(--ink-2); border-radius: 4px;
  background: var(--surf-shade);
}
.wwm-setup-collapse > summary {
  padding: var(--space-2-5) var(--space-3-5); cursor: pointer; user-select: none;
  font-weight: var(--fw-semibold); font-size: var(--text-md); color: var(--paper-dim);
  list-style: none; outline: none;
  display: flex; align-items: center; gap: var(--space-2);
}
.wwm-setup-collapse > summary::-webkit-details-marker { display: none; }
.wwm-setup-collapse > summary::before {
  content: '▶'; font-size: var(--text-xs); transition: transform 0.15s; color: var(--gold-bright);
}
.wwm-setup-collapse[open] > summary::before { transform: rotate(90deg); }
.wwm-setup-collapse > summary:hover { color: var(--gold-bright); }
.wwm-setup-collapse-body { padding: var(--space-3) var(--space-3-5) var(--space-3-5); border-top: 1px solid var(--ink-2); }
.wwm-setup-tabs { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--accent); margin-bottom: var(--space-3); }
.wwm-setup-tab { padding: var(--space-2) var(--space-4); background: none; border: none; color: inherit; font-size: var(--text-md); cursor: pointer; border-radius: 4px 4px 0 0; }
.wwm-setup-tab.active { background: var(--accent); color: #000; font-weight: var(--fw-bold); }
.wwm-setup-steps { margin: 0; padding-left: var(--space-5); font-size: var(--text-md); }
.wwm-setup-steps li { margin: var(--space-2) 0; }
.wwm-bm-link {
  display: inline-block; padding: var(--space-2) var(--space-4);
  background: var(--accent); color: #000;
  text-decoration: none; border-radius: 4px;
  font-weight: var(--fw-bold); cursor: grab; user-select: none;
  margin-top: var(--space-1);
}
.wwm-bm-link:active { cursor: grabbing; }
.wwm-bm-code {
  width: 100%; min-height: 80px; max-height: 120px;
  font-family: monospace; font-size: var(--text-xs);
  background: #0a0a0a; color: #0f0;
  border: 1px solid #333; border-radius: 4px;
  padding: var(--space-1-5); word-break: break-all; resize: vertical;
  box-sizing: border-box;
  border-color: var(--c-bm-code-border);
}
.wwm-reapply-row {
  display: flex; align-items: center; gap: var(--space-2-5);
  margin-top: var(--space-1-5);
}
.wwm-reapply-note {
  font-size: var(--text-sm); opacity: 0.7; flex: 1;
  line-height: 1.4;
}
.wwm-sb-avatar {
  width: 44px; height: 44px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(212,175,55,0.6);
  flex-shrink: 0;
}
.wwm-sb-charname {
  font-size: var(--text-md); font-weight: var(--fw-bold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wwm-sb-section { margin-bottom: var(--space-3); }
.wwm-sb-section-title {
  font-size: var(--text-12); margin: 0 0 var(--space-1);
  color: var(--c-sb-section-title-fg);
  padding: var(--space-half) var(--space-1-5);
  background: var(--c-sb-section-title-bg);
  border-radius: 3px;
  border-left: var(--c-sb-section-title-border-left);
  padding-left: var(--c-sb-section-title-pad-left);
}
.wwm-sb-items { display: flex; flex-direction: column; gap: var(--space-half); }
/* 折り畳み state (components.css から移動 2026-06-05 @layer Step 1 — 基本 rule との file 分裂解消) */
.wwm-sb-collapsed-sec .wwm-sb-items { display: none; }
.wwm-sb-row {
  display: flex; justify-content: space-between;
  padding: var(--space-half) var(--space-1-5); align-items: baseline;
}
.wwm-sb-row.wwm-sb-sub { padding-left: 18px; opacity: 0.85; font-size: var(--text-sm); }
.wwm-sb-label { opacity: var(--c-sb-label-opacity); white-space: nowrap; flex-shrink: 0; font-weight: var(--c-sb-label-fw); }
.wwm-sb-value { font-weight: var(--fw-semibold); text-align: right; min-width: 0; }
.wwm-sb-warn {
  display: inline-block;
  color: var(--vermilion-bright);
  font-size: var(--text-sm);
  margin-left: var(--space-half);
  cursor: help;
  text-shadow: 0 0 6px var(--vermilion-strong);
}
.wwm-sb-expandable { cursor: pointer; }
.wwm-sb-sub-group.wwm-sb-collapsed { display: none; }
.wwm-sb-applied { color: var(--c-sb-applied-fg); opacity: var(--c-sb-applied-opacity); font-size: 0.78em; margin-left: var(--space-1); }
/* light: sidebar 適用値 (判定確率の括弧内) を濃amberに (cream上で gold が低コントラストのため) */
/* hiddenStat: ゲーム実機で見えない内部値 (例 critRateBoosted = ボーナス会心率込みの実効会心率) → スレート青で区別 */
.wwm-sb-row.wwm-sb-hidden-stat .wwm-sb-label,
.wwm-sb-row.wwm-sb-hidden-stat .wwm-sb-value { color: var(--c-fg-hidden-stat); }
.wwm-sb-baseline { color: var(--paper-mute); opacity: 0.7; font-weight: var(--fw-medium); }
.wwm-sb-arrow {
  color: var(--gold); margin: 0 3px; opacity: 0.7;
  font-size: var(--text-xs);
  display: inline-block;
  transform: translateY(-1px);
}

/* ── 新レイアウト: 旧 form sections 非表示 ─────────────────────── */

/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 18 — EDIT MODAL
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Edit modal (gear card affix編集) ───────────────────────── */

/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 19 — COMPARE MODAL (武具対照)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Gear Compare modal (2-column) ──────────────────────────── */
/* ── 案A 武具対照 装飾 ── */
.wwm-cmp-modal-a { position: relative; }
.wwm-cmp-modal-a .wwm-cmp-l-bracket-tl,
.wwm-cmp-modal-a .wwm-cmp-l-bracket-tr,
.wwm-cmp-modal-a .wwm-cmp-l-bracket-bl,
.wwm-cmp-modal-a .wwm-cmp-l-bracket-br {
  position: absolute; width: 14px; height: 14px;
  border: 1.5px solid var(--gold-deep);
  pointer-events: none; z-index: 5;
}
.wwm-cmp-modal-a .wwm-cmp-l-bracket-tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.wwm-cmp-modal-a .wwm-cmp-l-bracket-tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.wwm-cmp-modal-a .wwm-cmp-l-bracket-bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.wwm-cmp-modal-a .wwm-cmp-l-bracket-br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.wwm-cmp-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--vermilion);
  color: #fff;
  font-family: var(--f-display, 'Noto Serif JP'); font-weight: 900; font-size: var(--text-lg);
  border: 2px solid var(--hover-strong);
  border-radius: 2px;
  transform: rotate(-6deg);
  margin-left: var(--space-2);
  vertical-align: middle;
  box-shadow: 0 0 8px var(--vermilion-bright-glow);
}
.wwm-cmp-modal-a {
  background: var(--bg-raised);
  border: 1px solid var(--gold-deep);
  border-radius: 0;
}
/* base .wwm-modal の右上 装飾 (::before glow + ::after 小L字) を非表示 (案A 4隅L字とダブる) */
.wwm-cmp-modal-a::before,
.wwm-cmp-modal-a::after { display: none; }
.wwm-cmp-modal-a .wwm-modal-header {
  position: relative;
  background: var(--c-cmp-modal-a--modal-header-bg);
}
.wwm-cmp-modal-a .wwm-modal-header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: auto; height: 2px;
  background: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(232,81,58,0.75) 50%, transparent 72%, transparent 100%);
  opacity: 1; pointer-events: none;
}
.wwm-cmp-modal-a .wwm-cmp-set-header { text-shadow: 0 0 6px var(--gold-bright-mid-2); }
.wwm-cmp-modal-a .wwm-cmp-preview {
  border-top: 1px solid var(--gold-soft);
  padding-top: var(--space-3);
}
.wwm-cmp-modal-a .wwm-cmp-preview-value {
  font-family: var(--f-latin, 'Cinzel');
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: 0.04em;
}
.wwm-cmp-modal-a .wwm-cmp-preview-value.pos {
  color: var(--jade-bright);
  text-shadow: 0 0 14px var(--jade-bright-strong);
}
.wwm-cmp-modal-a .wwm-cmp-preview-value.neg {
  color: var(--vermilion);
  text-shadow: 0 0 14px var(--vermilion-bright-mid-2);
}
.wwm-cmp-modal-a .wwm-cmp-btn-row .wwm-btn-primary,
.wwm-cmp-modal-a .wwm-cmp-btn-row .wwm-btn-secondary {
  font-family: var(--f-display, 'Noto Serif JP');
  font-weight: 900;
  letter-spacing: 0.16em;
}
/* ── 完全A化: col / title / kongfu / rows / pct ── */
.wwm-cmp-modal-a .wwm-cmp-col {
  background: #0d0a08;
  border: 1px solid var(--ink-1);
  border-radius: 0;
  padding: var(--space-4) var(--space-3-5) var(--space-3-5);
  position: relative;
  overflow: visible;
}
.wwm-cmp-modal-a .wwm-cmp-current,
.wwm-cmp-modal-a .wwm-cmp-new {
  border: 1px solid var(--ink-1);
  border-color: var(--c-cmp-modal-a--cmp-current-border);
}
.wwm-cmp-col > .wwm-cmp-title,
.wwm-cmp-col > .wwm-cmp-rows,
.wwm-cmp-col > .wwm-cmp-kongfu-header,
.wwm-cmp-col > .wwm-cmp-kongfu-select { position: relative; z-index: 1; }
.wwm-cmp-modal-a .wwm-cmp-title {
  position: absolute;
  top: -14px; left: 12px;
  padding: 0;
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  line-height: 1;
}
/* 「現有 / 新置」 を朱印化 (比 と同じ装飾) */
.wwm-cmp-modal-a .wwm-cmp-title::before {
  content: attr(data-seal);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 24px;
  padding: 0 var(--space-2);
  background: var(--vermilion);
  color: #fff;
  font-family: var(--f-display, 'Noto Serif JP');
  font-weight: 900; font-size: var(--text-md);
  letter-spacing: 0.12em;
  border: 2px solid var(--hover-strong);
  border-radius: 2px;
  transform: rotate(-4deg);
  box-shadow: 0 0 8px var(--vermilion-bright-glow);
}
.wwm-cmp-modal-a .wwm-cmp-new .wwm-cmp-title::before {
  background: var(--jade);
  color: #1a3a24;
  box-shadow: 0 0 8px rgba(168,212,180,0.6);
}
/* 本来 title内のテキスト「現有/新置」は朱印で表現するので隠す。 Lv/select は残す */
.wwm-cmp-modal-a .wwm-cmp-title-text { display: none; }
.wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv,
.wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select {
  color: var(--c-modal-a-lv-fg);
  font-family: var(--f-mono, 'Rajdhani');
  font-size: var(--text-14);
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid var(--gold-deep);
  padding: 0 var(--space-2-5);
  border-radius: 2px;
  background: var(--c-modal-a-lv-bg);
  line-height: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  box-shadow: none;
  box-sizing: border-box;
  vertical-align: middle;
  border-color: var(--c-cmp-title--cmp-lv-border);
}
.wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--space-6);
  background-image: linear-gradient(45deg, transparent 50%, var(--paper) 50%), linear-gradient(135deg, var(--paper) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  background-color: var(--bg-raised);
  cursor: pointer;
}
.wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select option {
  font-size: var(--text-14);
  font-family: var(--f-mono, 'Rajdhani');
  font-weight: 700;
  background: var(--bg-raised);
  color: var(--c-modal-a-fg);
}
.wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select {
  cursor: pointer;
  border-color: var(--c-cmp-title--cmp-lv-select-border);
}
.wwm-cmp-modal-a .wwm-cmp-col {
  margin-top: var(--space-1);
}
.wwm-cmp-modal-a .wwm-cmp-current .wwm-cmp-title { color: var(--vermilion) ; }
/* imp strip (Step 5-d 2026-06-06): h3 の可視部 = ::before seal (独自色) + .wwm-cmp-lv (独自色)、
   .wwm-cmp-title-text は display:none → この color は可視要素に届かない dead styling。
   imp は何も守っていなかった relic (light.css #1a8d52 が strip 後勝つが同様に不可視)。 VRT 58/58 で確認済 */
.wwm-cmp-modal-a .wwm-cmp-new     .wwm-cmp-title { color: var(--jade-bright); }
.wwm-cmp-modal-a .wwm-cmp-kongfu-header {
  font-family: var(--f-display, 'Noto Serif JP');
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--c-modal-a-kongfu-header-fg);
  background: var(--c-modal-a-kongfu-header-bg);
  border: none;
  border-radius: 0;
  padding: var(--space-1-5) var(--space-2);
  margin-bottom: var(--space-2);
  margin-top: var(--space-1-5);
}
.wwm-cmp-modal-a .wwm-cmp-kongfu-select {
  background: var(--c-modal-a-kongfu-select-bg);
  border: 1px solid var(--gold-deep);
  border-radius: 0;
  color: var(--c-modal-a-kongfu-select-fg);
  font-family: var(--f-display, 'Noto Serif JP');
  font-weight: 700;
  margin-bottom: var(--space-2);
  margin-top: var(--space-1-5);
  border-color: var(--c-cmp-modal-a--cmp-kongfu-select-border);
}
/* select内 option を統一 (paper bg + var(--bg-raised) / hover青) */
.wwm-cmp-modal-a select option {
  font-size: var(--text-md);
  font-family: var(--f-display, 'Noto Serif JP');
  font-weight: 700;
  background: var(--c-modal-a-option-bg) ;
  color: var(--c-modal-a-option-fg);
}
.wwm-cmp-modal-a .wwm-cmp-stat-select option {
  font-size: var(--text-12);
  font-family: var(--f-sans, 'Noto Sans JP');
  font-weight: 600;
}
.wwm-cmp-modal-a .wwm-cmp-set-header,
.wwm-cmp-modal-a .wwm-cmp-set-select {
  background: var(--c-modal-a-set-select-bg);
  border: none;
  border-radius: 0;
  color: var(--c-modal-a-set-fg);
  text-shadow: var(--c-cmp-set-header-text-shadow);
  padding: var(--space-1-5) var(--space-2);
  margin-bottom: var(--space-2);
}
.wwm-cmp-modal-a .wwm-cmp-set-select {
  border: 1px solid var(--gold-deep);
  border-color: var(--c-cmp-modal-a--cmp-set-select-border);
}
.wwm-cmp-modal-a .wwm-cmp-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wwm-cmp-modal-a .wwm-cmp-row {
  display: grid;
  align-items: center !important; /* K: JS の row inline align 書込 対抗 — strip するな */
  gap: 6px;
  padding: var(--space-1) var(--space-1-5);
  border: none;
  border-bottom: 1px dashed var(--gold-faint);
  font-size: var(--text-12);
  background: transparent ;
  box-shadow: none;
}
/* S2-e split: name は dark 側 token 化対象、 stat-select は対象外 → 分離 (base 側道連れ防止) */
.wwm-cmp-modal-a .wwm-cmp-name {
  color: var(--c-modal-a-name-fg);
}
.wwm-cmp-modal-a .wwm-cmp-stat-select {
  color: var(--c-modal-a-fg);
}
.wwm-cmp-modal-a .wwm-cmp-stat-select {
  background: var(--c-modal-a-stat-select-bg);
  border: 1px solid var(--ink-2);
  border-radius: 0;
  font-size: var(--text-sm);
}
/* S2-d: val (現有列 readonly) と val-input (新置列 input) で light 配色が異なる → rule 分離
   (val = fg-emphasis 維持、 val-input = token swap 済) */
.wwm-cmp-modal-a .wwm-cmp-val {
  font-family: var(--f-mono, 'Rajdhani');
  font-weight: 700;
  color: var(--c-modal-a-val-fg);
  font-size: var(--text-md);
}
.wwm-cmp-modal-a .wwm-cmp-val-input {
  font-family: var(--f-mono, 'Rajdhani');
  font-weight: 700;
  color: var(--c-modal-a-val-input-fg);
  font-size: var(--text-md);
}
.wwm-cmp-modal-a .wwm-cmp-val-input {
  background: var(--c-modal-a-stat-select-bg);
  border: 1px solid var(--ink-2);
  border-radius: 0;
}
.wwm-cmp-modal-a .wwm-cmp-ratio {
  font-family: var(--f-mono, 'Rajdhani');
  font-size: var(--text-xs);
  padding: 1px 3px;
  border-radius: 2px;
  background: rgba(168,212,180,0.18) ;
  color: var(--jade-bright) !important; /* K: gear.js:679 el.style.color (inline) 対抗 — strip するな */
  border: 1px solid var(--jade-bright-mid);
  min-width: 30px;
  text-align: center;
  display: inline-block;
  margin-left: 0;
}
/* MAX% rank別配色 (ゲーム準拠 金>紫>青、 閾値 0.85 / 0.70)
   color の !important は K (gear.js:679 inline color 対抗) — strip するな */
.wwm-cmp-modal-a .wwm-cmp-ratio.rank-gold {
  background: rgba(212,175,55,0.18);
  color: var(--accent) !important;
  border-color: rgba(212,175,55,0.55);
}
.wwm-cmp-modal-a .wwm-cmp-ratio.rank-purple {
  background: rgba(195,137,255,0.18);
  color: var(--liupai-guyun) !important;
  border-color: rgba(195,137,255,0.55);
}
.wwm-cmp-modal-a .wwm-cmp-ratio.rank-blue {
  background: rgba(74,158,255,0.18);
  color: #4a9eff !important;
  border-color: rgba(74,158,255,0.55);
}
/* light theme の rank別 color (旧 styles-light.css から co-locate move 2026-06-05 @layer Step 1:
   inline 対抗 imp 同士は spec 比較 = file 位置無関係、 同 file 化で layer 反転 flip を根治) */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-ratio.rank-gold { background: var(--c-gold-deep-faint); color: #7a5a12 !important; border-color: var(--c-gold-deep-strong); }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-ratio.rank-purple { background: rgba(120,60,160,0.13); color: #6f3a9a !important; border-color: rgba(120,60,160,0.5); }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-ratio.rank-blue { background: rgba(40,90,160,0.13); color: #2a5aa0 !important; border-color: rgba(40,90,160,0.5); }
/* MAX到達 (100%) 虹色 — 色相回転 hue-rotate アニメ (両テーマ共通)
   注: background-color / box-shadow は keyframes が動かすため !important つけない (つけると keyframes が負けてアニメ無効化) */
.wwm-cmp-modal-a .wwm-cmp-ratio.rank-max {
  background-image: none !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.65);
  font-weight: 700;
  text-shadow: 0 0 4px var(--overlay-mid-2), 0 1px 0 var(--overlay-soft-mid);
  background-color: hsl(0, 80%, 55%);
  box-shadow: 0 0 9px hsla(0, 90%, 60%, 0.55), inset 0 1px 0 var(--hover-mid);
  animation: cmp-ratio-rainbow 3.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wwm-cmp-modal-a .wwm-cmp-ratio.rank-max { animation: none; }
}
.wwm-cmp-modal-a .wwm-cmp-grid {
  grid-template-columns: 1fr 1px 1fr;
  gap: 16px;
}
.wwm-cmp-modal-a .wwm-modal-body { padding: var(--space-5) var(--space-5) var(--space-4); overflow: visible; }
.wwm-cmp-modal-a.wwm-modal-square { overflow: visible; }
/* 武庫modal: path 5個横並び収容のため広め */
.wwm-modal.wwm-modal-square.wwm-arsenal-modal { max-width: 820px; }
/* 武庫modal: row 高さ統一 + ゆとり (checkbox表示で row 押し広げ防止) */
.wwm-arsenal-modal .wwm-cmp-row { min-height: 38px; }
.wwm-arsenal-modal .wwm-cmp-row input[type="checkbox"] { width: 14px; height: 14px; margin: 0; }
.wwm-cmp-modal-a .wwm-cmp-divider {
  background: linear-gradient(180deg, transparent, var(--gold-deep), transparent);
  position: relative;
}
.wwm-cmp-modal-a .wwm-cmp-divider::before,
.wwm-cmp-modal-a .wwm-cmp-divider::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px;
  background: var(--vermilion);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--vermilion);
}
.wwm-cmp-modal-a .wwm-cmp-divider::before { top: 30%; }
.wwm-cmp-modal-a .wwm-cmp-divider::after  { bottom: 30%; }

.wwm-cmp-footer-a {
  margin-top: var(--space-4);
  padding: var(--space-3-5) 0 var(--space-1);
  border-top: 1px solid var(--gold-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.wwm-cmp-delta-block {
  display: flex; align-items: baseline; gap: 12px;
}
.wwm-cmp-delta-label {
  font-family: var(--f-display, 'Noto Serif JP');
  font-size: var(--text-sm); font-weight: 900;
  color: var(--paper-mute);
  letter-spacing: 0.32em;
}
.wwm-cmp-modal-a .wwm-cmp-preview-value {
  font-size: var(--text-2xl);
  line-height: 1;
}
/* K ×3: export.js clone の inline text-shadow (universal 書込) 対抗 — strip するな (Step 5 確定) */
.wwm-cmp-modal-a .wwm-cmp-preview-value.pos { color: var(--jade-bright); text-shadow: 0 0 18px rgba(168,212,180,0.6) !important; }
.wwm-cmp-modal-a .wwm-cmp-preview-value.neg { color: var(--vermilion); text-shadow: 0 0 18px var(--vermilion-bright-glow) !important; }
.wwm-cmp-modal-a .wwm-cmp-preview-value.zero { color: var(--c-cmp-preview-zero-fg); text-shadow: none !important; }
.wwm-cmp-delta-base {
  font-family: var(--f-mono, 'Rajdhani');
  font-size: var(--text-sm); color: var(--paper-mute);
}
.wwm-cmp-modal-a .wwm-cmp-bg-icon { opacity: 0 ; }
/* 新装備アイコン modal全体背景化 — 右下から見切れる大きさ (元サイズ、 心法対照 で使用) */
.wwm-cmp-modal-bg-icon {
  position: absolute;
  right: -12%; bottom: -18%;
  width: 110%; height: 110%;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: var(--c-cmp-modal-bg-icon-opacity);
  pointer-events: none;
  z-index: 0;
  filter: brightness(0) invert(1) drop-shadow(0 0 14px var(--gold-bright-mid));
}
/* 武具対照のみ 50% UP + 右下寄せ */
.wwm-cmp-modal-bg-icon-gear {
  right: -30%; bottom: -45%;
  width: 165%; height: 165%;
}
/* 武器系 (slot 1/2): 武術アイコン用 — サイズ 10% 縮小 + 左20px・上15px シフト */
.wwm-cmp-modal-bg-icon-gear-weapon {
  width: 148.5%; height: 148.5%;
  right: calc(-30% + 40px);
  bottom: calc(-45% + 35px);
}
/* 防具系 (slot 3/4/5/8/10/11): 武器系より 25px 左シフト */
.wwm-cmp-modal-bg-icon-gear-armor {
  right: calc(-30% + 25px);
}
/* 弓/射玦 (slot 9/21) は modal が小さい → 別調整 */
.wwm-cmp-modal-bg-icon-gear-small {
  right: -40px;
}
/* 武庫modal bg-icon: -gear のサイズ30%減 + 位置調整 */
.wwm-cmp-modal-bg-icon-arsenal {
  width: 115.5%; height: 115.5%;
  right: calc(-30% + 140px);
  bottom: calc(-45% + 90px);
}
.wwm-cmp-modal-a .wwm-modal-body { position: relative; overflow: hidden; }
.wwm-cmp-modal-a .wwm-cmp-grid { position: relative; z-index: 1; }
/* col / affix-rows 透過化 (背景icon 透けさせる) */
.wwm-cmp-modal-a .wwm-cmp-col {
  background: var(--c-modal-a-col-bg);
  border-color: var(--c-cmp-modal-a--cmp-col-border);
}
.wwm-cmp-modal-a .wwm-cmp-rows {
  background: var(--c-modal-a-rows-bg);
  border: var(--c-cmp-modal-a--cmp-rows-border);
  box-shadow: var(--c-cmp-modal-a--cmp-rows-shadow);
}
/* ── ダーク: select border を subtle gold に統一 (gold-deep/ink-2 バラつき解消) + rows を暗inset で差別化 ── */
/* ── ダーク 配色: 案B 黒檀朱 (近黒ebony + 朱主役・金従)。border系は現状維持 (col/rows/select 不変) ── */
/* 案E Good icon — 親指SVG + 朱赤タイル */
.wwm-good-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: linear-gradient(135deg, var(--vermilion-deep), var(--vermilion));
  border: 1px solid var(--gold-bright-mid);
  border-radius: 2px;
  box-shadow: 0 0 4px var(--vermilion-glow);
  flex-shrink: 0;
  vertical-align: middle;
  margin: 0 var(--space-half);
}
.wwm-good-icon svg { width: 10px; height: 10px; fill: var(--chart-crit); }
/* セット効果テキスト (最小外功攻撃+64等) はサンプルに無いので非表示 */
.wwm-cmp-modal-a .wwm-cmp-set-effect { display: none; }
/* ヘッダ padding スリム */
.wwm-cmp-modal-a .wwm-modal-header {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid transparent;
}
.wwm-cmp-modal-a .wwm-modal-header h2 {
  margin: 0;
  font-weight: 900;
  display: flex; align-items: center; gap: 8px;
}
.wwm-cmp-modal-a .wwm-cmp-title-ja {
  font-family: var(--f-display, 'Noto Serif JP');
  font-size: var(--text-18);
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--c-modal-a-title-ja-fg);
  text-shadow: var(--c-cmp-modal-a--cmp-title-ja-text-shadow);
}
.wwm-cmp-modal-a .wwm-cmp-title-en {
  font-family: var(--f-latin, 'Cinzel');
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-cmp-title-en-fg);
  letter-spacing: 0.32em;
  margin-left: var(--space-1);
  align-self: flex-end;
  padding-bottom: var(--space-half);
}
.wwm-cmp-modal-a .wwm-modal-header h2 { align-items: flex-end; }
/* 背景の赤いradial-gradient を消す */
.wwm-cmp-modal-a {
  background: linear-gradient(180deg, var(--c-surf-warm-1), var(--c-surf-warm-2));
  color: var(--c-cmp-modal-a-fg);
}
/* ボタン: サンプルA 揃え (radius 0、 padding 7px 16px) */
/* K: export.js clone の inline background (universal 書込) 対抗 — strip するな (Step 5 確定) */
.wwm-cmp-modal-a .wwm-cmp-btn-row .wwm-btn-primary {
  background:
    url("https://www.wherewindsmeetgame.com/m/zt/20251121182818/img/popup_btn_confirm-48cfa7e2.png") center / 100% 100% no-repeat,
    linear-gradient(180deg, var(--gold-bright), var(--gold)) !important;
  border: 1px solid var(--gold-bright);
  border-radius: 0;
  color: var(--brown-1);
  padding: 7px 18px;
  font-size: var(--text-12);
  box-shadow: none;
}
.wwm-cmp-modal-a .wwm-cmp-btn-row .wwm-btn-secondary {
  background: var(--c-modal-a-btn-secondary-bg);
  border: 1px solid var(--paper-mute);
  border-radius: 0;
  color: var(--brown-1);
  padding: 7px 18px;
  font-size: var(--text-12);
  box-shadow: none;
  border-color: var(--c-cmp-btn-row--btn-secondary-border);
}
/* affix行 共通 */
.wwm-cmp-modal-a .wwm-cmp-row {
  display: flex;
  align-items: center !important; /* K: JS の row inline align 書込 対抗 — strip するな */
  gap: 8px;
  padding: 5px 6px;
}
/* 現有列 (display専用): name 1fr + val (val+ratio inline) */
.wwm-cmp-modal-a .wwm-cmp-current .wwm-cmp-row .wwm-cmp-name { flex: 1 1 auto; min-width: 0; }
.wwm-cmp-modal-a .wwm-cmp-current .wwm-cmp-row .wwm-cmp-val {
  display: inline-flex; align-items: center; gap: 8px;
}
/* 新置列 (編集): select + useful + val-wrap */
/* K: JS の row inline grid-template-columns 書込 対抗 — strip するな (Step 5 確定) */
.wwm-cmp-modal-a .wwm-cmp-new .wwm-cmp-row.wwm-cmp-edit-row {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) 20px minmax(92px, 1.15fr) !important;
}
.wwm-cmp-modal-a .wwm-cmp-new .wwm-cmp-val-wrap {
  display: flex; align-items: center; gap: 4px;
  min-width: 0;
}
.wwm-cmp-modal-a .wwm-cmp-stat-select {
  width: 100%;
  padding: var(--space-half) var(--space-1);
  font-size: var(--text-sm);
  border-color: var(--c-cmp-modal-a--cmp-stat-select-border);
}
/* K ×2: JS の num-input inline width/padding 書込 対抗 — strip するな (Step 5 確定) */
.wwm-cmp-modal-a .wwm-cmp-val-input {
  width: 100% !important;
  padding: var(--space-half) var(--space-1) !important;
  font-size: var(--text-12);
  text-align: right;
  border-color: var(--c-cmp-modal-a--cmp-val-input-border);
}
.wwm-cmp-modal-a .wwm-cmp-val {
  text-align: right;
  font-size: var(--text-md);
}
/* kongfu / set padding スリム */
.wwm-cmp-modal-a .wwm-cmp-kongfu-header,
.wwm-cmp-modal-a .wwm-cmp-kongfu-select,
.wwm-cmp-modal-a .wwm-cmp-set-header,
.wwm-cmp-modal-a .wwm-cmp-set-select {
  padding: 5px 8px;
  margin-bottom: var(--space-1-5);
  font-size: var(--text-12);
}

.wwm-cmp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.wwm-cmp-col {
  background: var(--hover-trace);
  border: 1px solid var(--hover-soft);
  border-radius: 6px;
  padding: var(--space-2-5);
  position: relative;
  overflow: hidden;
  border-color: var(--c-cmp-col-border);
}
.wwm-cmp-bg-icon {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 95%;
  opacity: 0.20;
  pointer-events: none;
  z-index: 0;
}
.wwm-cmp-bow .wwm-cmp-bg-icon { background-size: 50%; }
/* 現在の装備: 朱赤グロウ */
.wwm-cmp-current .wwm-cmp-bg-icon {
  filter:
    drop-shadow(0 0 6px var(--vermilion-bright-strong))
    drop-shadow(0 0 14px var(--vermilion-bright-mid));
}
/* 新しい装備: 緑グロウ */
.wwm-cmp-new .wwm-cmp-bg-icon {
  filter:
    drop-shadow(0 0 6px rgba(168,212,180,0.7))
    drop-shadow(0 0 14px rgba(168,212,180,0.45));
}
.wwm-cmp-kongfu-header {
  font-size: var(--text-12); color: var(--accent);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-1-5);
  padding: var(--space-1) var(--space-1-5);
  background: var(--accent-faint);
  border-radius: 4px;
}
.wwm-cmp-kongfu-select {
  width: 100%;
  background: var(--c-cmp-stat-select-bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--c-cmp-kongfu-select-fg);
  font-weight: var(--fw-bold);
  font-size: var(--text-12);
  padding: var(--space-1) var(--space-1-5);
  margin-bottom: var(--space-1-5);
  cursor: pointer;
}
.wwm-cmp-col > .wwm-cmp-set-header,
.wwm-cmp-col > .wwm-cmp-set-select,
.wwm-cmp-col > .wwm-cmp-set-effect { position: relative; z-index: 1; }
.wwm-cmp-set-header {
  font-size: var(--text-sm); color: var(--c-cmp-set-header-fg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-1-5);
  padding: var(--space-1) var(--space-1-5);
  background: linear-gradient(90deg, var(--gold-bright-tint), transparent);
  border-left: 2px solid var(--gold-bright);
  border-radius: 0;
  text-shadow: 0 0 6px var(--gold-bright-mid-2);
}
.wwm-cmp-set-select {
  width: 100%;
  background: var(--c-cmp-stat-select-bg);
  border: 1px solid var(--liupai-guyun);
  border-radius: 4px;
  color: var(--c-cmp-set-select-fg);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-1-5);
  margin-bottom: var(--space-1);
  cursor: pointer;
}
.wwm-cmp-set-effect {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.6);
  padding: var(--space-half) var(--space-1-5) var(--space-1-5);
  line-height: 1.3;
}
.wwm-cmp-tier-line.wwm-tier-active   { color: var(--gold-bright); }
.wwm-cmp-tier-line.wwm-tier-unrel    { color: rgba(255,255,255,0.28); }
.wwm-cmp-tier-line.wwm-tier-kfmiss   { color: var(--vermilion-bright-strong); }
.wwm-cmp-tier-line.wwm-tier-empty    { color: rgba(255,255,255,0.2); }
.wwm-tier-warn { font-size: var(--text-xs); }
.wwm-tier-dash { opacity: 0.5; }
/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 23 — CHANGELOG MODAL
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* Changelog modal */
.wwm-hero-delta.pos { color: #2ec27e; }
.wwm-hero-delta.neg { color: #ff6b6b; }
.wwm-hero-delta.zero { color: var(--hover-mid-2); }
.wwm-cmp-preview-value { font-weight: var(--fw-bold); font-size: var(--text-15); }
.wwm-cmp-preview-value.pos { color: #2ec27e; }
.wwm-cmp-preview-value.neg { color: #ff6b6b; }
.wwm-cmp-preview-value.zero { color: var(--hover-strong); }
.wwm-cmp-current { border-left: 3px solid var(--vermilion); }
.wwm-cmp-new     { border-left: 3px solid var(--jade); }
.wwm-cmp-title {
  margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--fw-bold);
}
.wwm-cmp-current .wwm-cmp-title { color: var(--vermilion); }
.wwm-cmp-new .wwm-cmp-title { color: var(--jade-bright); }
.wwm-cmp-rows { display: flex; flex-direction: column; gap: var(--space-1); }
.wwm-cmp-row {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: var(--space-2); align-items: center;
  padding: var(--space-1) var(--space-1-5);
  background: var(--hover-trace);
  border-radius: 4px;
  font-size: var(--text-12);
}
.wwm-cmp-edit-row {
  grid-template-columns: 1fr 20px 110px;
}
.wwm-cmp-stat-select {
  background: var(--c-cmp-stat-select-bg);
  border: 1px solid #444;
  border-radius: 4px;
  padding: var(--space-half) var(--space-1);
  font-size: var(--text-12);
  font-weight: var(--fw-semibold);
  width: 100%;
  cursor: pointer;
}
.wwm-cmp-useful-mark { font-size: var(--text-12); text-align: center; }
.wwm-cmp-val-wrap {
  display: grid;
  grid-template-columns: 1fr 14px 34px;
  gap: var(--space-half); align-items: center;
  width: 100%;
}
.wwm-cmp-val-wrap .wwm-cmp-val-input { width: 100%; text-align: right; }
.wwm-cmp-unit { font-size: var(--text-sm); opacity: 0.7; text-align: left; }
.wwm-cmp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wwm-cmp-val  { font-weight: var(--fw-bold); text-align: right; }
.wwm-cmp-val-input { font-size: var(--text-sm); text-align: right; }
.wwm-rank-gold { color: var(--accent); }
.wwm-rank-purple { color: var(--liupai-guyun); }
.wwm-rank-blue { color: #4a9eff; }
@media (max-width: 768px) {
  .wwm-cmp-grid { grid-template-columns: 1fr; }
}
.wwm-num-input {
  width: 60px; padding: var(--space-half) var(--space-1-5);
  background: var(--c-cmp-stat-select-bg); color: inherit;
  border: 1px solid #444; border-radius: 4px;
  font-size: var(--text-md); text-align: right;
  border-color: var(--c-num-input-border);
}
.wwm-arsenal-paths {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  align-items: center; margin: var(--space-1-5) 0;
}
.wwm-radio-label {
  display: inline-flex; align-items: center; gap: var(--space-1);
  cursor: pointer; font-size: var(--text-md);
}
.wwm-arsenal-tiers {
  display: grid; gap: var(--space-1);
}
.wwm-arsenal-tier {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-1) var(--space-1-5);
  background: var(--hover-trace);
  border-radius: 4px;
}
.wwm-arsenal-lv { font-weight: var(--fw-bold); min-width: 50px; }
.wwm-arsenal-peaked-label {
  display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer;
}
.wwm-arsenal-preset { opacity: 0.85; font-size: var(--text-12); }
.wwm-arsenal-custom { display: inline-flex; gap: var(--space-2); align-items: center; font-size: var(--text-12); }
.wwm-arsenal-custom input { width: 50px; }
@media (max-width: 768px) {
  .wwm-enhance-grid { grid-template-columns: 1fr 1fr; }
}
.wwm-modal.wwm-modal-square { max-width: 680px; }
.wwm-modal.wwm-modal-wide,
.wwm-modal.wwm-modal-square.wwm-modal-wide { max-width: 1100px; }
.wwm-modal-square {
  position: relative;
  overflow: hidden;
}
.wwm-modal-bg-icon {
  position: absolute;  /* .wwm-modal > * { position: relative } (L1295) に勝つため必須 — Phase 5.1-b で誤って削除されていた */
  top: 0; left: 0; right: 0; bottom: 0;
  background-repeat: no-repeat;
  background-position: calc(100% + 40px) calc(100% + 40px);
  background-size: 60%;
  opacity: var(--c-modal-bg-icon-opacity);
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 10px var(--gold-bright-strong))
    drop-shadow(0 0 22px rgba(240,210,138,0.45));
  pointer-events: none;
  z-index: 0;
}
/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 38 — NOTE MODAL (巻物)
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── NOTE modal (巻物 UI、 ライト/ダーク共通) ────────────────── */
.wwm-note-modal-a {
  position: relative;
  width: 720px;
  max-width: 94vw;
  margin: var(--space-8) auto;
  padding: 0;
  background: transparent;
  font-family: var(--f-body);
}
.wwm-note-rod {
  height: 22px;
  background: linear-gradient(180deg, var(--brown-4) 0%, var(--brown-6) 20%, var(--accent) 50%, var(--brown-6) 80%, var(--brown-4) 100%);
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--overlay-mid-2), inset 0 0 8px rgba(0,0,0,.35), 0 6px 14px var(--overlay-soft-2);
  position: relative;
}
.wwm-note-rod::before, .wwm-note-rod::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--chart-crit) 0%, #c8932e 40%, var(--brown-5) 100%);
  box-shadow: 0 2px 6px var(--overlay-heavy), inset 0 0 4px var(--overlay-soft-mid);
  border: 1px solid #3a2210;
}
.wwm-note-rod::before { left: -10px; }
.wwm-note-rod::after  { right: -10px; }
.wwm-note-rod-top    { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.wwm-note-rod-bottom { margin-top: 0;    border-top-left-radius: 0;    border-top-right-radius: 0; }

.wwm-note-paper {
  position: relative;
  padding: var(--space-6) var(--space-7) var(--space-6);
  background:
    radial-gradient(circle at 20% 30%, rgba(120,80,40,.12) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(100,60,30,.10) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(80,50,20,.06) 0%, transparent 50%),
    linear-gradient(180deg, #ecd7a8 0%, #d4b87c 50%, #c8a868 100%);
  border-left: 2px solid var(--brown-4);
  border-right: 2px solid var(--brown-4);
  box-shadow:
    inset 0 8px 18px rgba(80,50,20,.3),
    inset 0 -8px 18px rgba(80,50,20,.3),
    inset 4px 0 8px rgba(80,50,20,.15),
    inset -4px 0 8px rgba(80,50,20,.15);
  color: var(--brown-2);
}
.wwm-note-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='60' height='60' filter='url(%23n)'/></svg>");
  opacity: 0.55; pointer-events: none; mix-blend-mode: multiply;
}
.wwm-note-paper > * { position: relative; z-index: 1; }

/* ヘッダー: タイトル + ボタン群 */
.wwm-note-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.wwm-note-title-ja {
  font-family: 'Ma Shan Zheng', 'Noto Serif JP', serif;
  font-size: var(--text-2xl);
  color: var(--brown-3);
  letter-spacing: 0.15em;
  text-shadow: 0 1px 0 rgba(255,240,200,.4);
}
.wwm-note-title-en {
  font-family: 'Cinzel', serif;
  font-size: var(--text-md);
  letter-spacing: 0.3em;
  color: #7a4220;
  font-weight: 700;
}
.wwm-note-seal {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vermilion-note);
  color: #f5e6c8;
  font-family: 'Noto Serif JP', serif;
  font-size: var(--text-lg); font-weight: 900;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #5a1208, 1px 1px 0 var(--overlay-soft);
  transform: rotate(-3deg);
}
.wwm-note-header-actions {
  margin-left: auto;
  display: flex; gap: 6px;
}
.wwm-note-btn {
  padding: 7px 14px;
  background: linear-gradient(180deg, var(--vermilion-note) 0%, #8a1f10 100%);
  color: #f5e6c8;
  border: 1px solid #5a1208;
  border-radius: 4px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: var(--text-12);
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: inset 0 1px 0 rgba(255,200,150,.3), 0 2px 6px var(--overlay-soft-mid);
  transition: filter .15s, transform .15s;
}
.wwm-note-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.wwm-note-btn-gh    { background: linear-gradient(180deg, #4a3a2a 0%, #2a1f14 100%); border-color: var(--bg-raised); }
.wwm-note-btn-close { background: linear-gradient(180deg, #8a6f3a 0%, #5a4220 100%); border-color: #3a2810; }
.wwm-note-btn svg { width: 12px; height: 12px; }

.wwm-note-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brown-6) 20%, var(--brown-4) 50%, var(--brown-6) 80%, transparent);
  margin: var(--space-2-5) 0 var(--space-3-5);
  position: relative;
}
.wwm-note-divider::after {
  content: '◆';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #d4b87c;
  color: var(--vermilion-note);
  padding: 0 var(--space-2);
  font-size: 9px;
}

/* タブ */
.wwm-note-tabs {
  display: flex; gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--brown-6);
}
.wwm-note-tab {
  padding: 8px 22px;
  background: linear-gradient(180deg, #d8b878 0%, #b8954c 100%);
  border: 1px solid var(--brown-5); border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: #4a2810;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700; font-size: var(--text-14);
  cursor: pointer; position: relative; top: 1px;
  letter-spacing: 0.08em;
  box-shadow: inset 0 -3px 4px rgba(80,40,20,.25);
  transition: transform .15s;
}
.wwm-note-tab:hover { transform: translateY(-1px); }
.wwm-note-tab.active {
  background: linear-gradient(180deg, #ecd7a8 0%, #d4b87c 100%);
  color: var(--brown-3);
  border-color: var(--brown-4);
  box-shadow: inset 0 2px 4px rgba(255,240,200,.5), 0 -2px 6px rgba(80,40,20,.15);
  font-weight: 900;
}

/* 本文 */
.wwm-note-body {
  font-family: var(--f-body);
  font-size: var(--text-md); line-height: 1.75;
  color: var(--brown-2);
  max-height: 500px; overflow-y: auto;
  padding-right: var(--space-2-5);
}
.wwm-note-body::-webkit-scrollbar { width: 8px; }
.wwm-note-body::-webkit-scrollbar-track { background: rgba(80,40,20,.15); border-radius: 4px; }
.wwm-note-body::-webkit-scrollbar-thumb { background: var(--brown-6); border-radius: 4px; }

.wwm-note-section { margin-bottom: 18px; }
.wwm-note-h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: var(--text-15); font-weight: 900;
  color: var(--brown-3);
  margin: 0 0 var(--space-2);
  padding-left: var(--space-2-5);
  border-left: 4px solid var(--vermilion-note);
  letter-spacing: 0.05em;
}
.wwm-note-list { margin: 0 0 var(--space-2) 0; padding-left: 22px; list-style: none; }
.wwm-note-list li { position: relative; margin-bottom: var(--space-1); padding-left: var(--space-1); }
.wwm-note-list li::before {
  content: '・';
  position: absolute; left: -14px;
  color: var(--vermilion-note); font-weight: 900;
}
.wwm-note-list li b { color: var(--brown-3); font-weight: 700; }
.wwm-note-p { margin: 0 0 var(--space-2-5); }
.wwm-note-pre {
  background: rgba(90,30,16,.08);
  border: 1px dashed rgba(90,30,16,.35);
  border-radius: 4px;
  padding: var(--space-2-5) var(--space-3);
  font-family: var(--f-mono, 'Courier New', monospace);
  font-size: var(--text-12);
  color: var(--brown-3);
  white-space: pre-wrap;
  margin: 0 0 var(--space-2-5);
}

/* 更新履歴 */
.wwm-note-cl-entry { margin-bottom: var(--space-4); padding-bottom: var(--space-2-5); border-bottom: 1px dotted rgba(90,30,16,.35); }
.wwm-note-cl-entry:last-child { border-bottom: none; }
.wwm-note-cl-ver { font-family: 'Cinzel', serif; font-size: var(--text-lg); font-weight: 900; color: var(--brown-3); }
.wwm-note-cl-date { font-size: var(--text-sm); color: #7a4220; margin-left: var(--space-2-5); font-weight: 400; }
.wwm-note-cl-items { margin: var(--space-1-5) 0 0 0; padding-left: 22px; list-style: none; }
.wwm-note-cl-items li { position: relative; margin-bottom: 3px; padding-left: var(--space-1); }
.wwm-note-cl-items li::before { content: '・'; position: absolute; left: -14px; color: var(--vermilion-note); font-weight: 900; }
.wwm-note-cl-items li.wwm-note-cl-featured {
  background: var(--c-note-cl-featured-bg);
  border-left: 3px solid var(--vermilion);
  padding: var(--space-2-5) var(--space-3);
  margin: 8px 0 12px -18px;
  font-weight: 600;
  font-size: 1.02em;
  line-height: 1.7;
  border-radius: 0 4px 4px 0;
  border-left-color: var(--c-note-cl-items--note-cl-featured-border-left);
  color: var(--c-note-cl-items--note-cl-featured-fg);
}
.wwm-note-cl-items li.wwm-note-cl-featured::before { display: none; }

@media (max-width: 720px) {
  .wwm-note-header-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .wwm-note-btn { font-size: var(--text-sm); padding: var(--space-1-5) var(--space-2-5); }
}
/* OBS view banner hide は styles-obs.css へ移動済 (2026-06-05 @layer Step 1) */

/* ╔═══════════════════════════════════════════════════════════════════╗
     弱点指摘 (diag) modal: アクセント赤 + 小型icon
     (components.css から移動 2026-06-05 @layer Step 1 — 汎用 modal rule との
      file 分裂解消。 本 file 末尾 = 汎用 .wwm-modal-header / .wwm-modal-bg-icon
      より後 = order でも勝つ位置。 前方へ動かすな)
   ╚═══════════════════════════════════════════════════════════════════╝ */
.wwm-diag-modal {
  border-top-color: var(--vermilion);
  border-left-color: var(--vermilion);
}
.wwm-diag-modal::before {
  background: radial-gradient(ellipse at top right, var(--vermilion-soft-light), transparent 65%) !important; /* K: export inline background 対抗 */
}
.wwm-diag-modal::after {
  border-top-color: var(--vermilion);
  border-right-color: var(--vermilion);
}
.wwm-diag-modal .wwm-modal-header { border-bottom-color: var(--vermilion-mid); }
.wwm-diag-modal .wwm-modal-header::after {
  background: linear-gradient(90deg, var(--vermilion-bright), transparent);
  box-shadow: 0 0 8px var(--vermilion-strong);
}
.wwm-diag-modal .wwm-modal-header h2 {
  color: var(--vermilion-bright);
  text-shadow: 0 0 10px var(--vermilion-mid-strong) !important; /* K: export inline text-shadow 対抗 */
}
/* K ×2: bg-icon の JS inline background 書込 対抗 — strip するな (Step 5 確定) */
.wwm-diag-modal .wwm-modal-bg-icon {
  background-size: 30% !important;
  background-position: calc(100% - 12px) calc(100% + 30px) !important;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 10px rgba(255,107,74,0.7))
    drop-shadow(0 0 22px rgba(200,60,43,0.45));
  opacity: var(--c-diag-modal--modal-bg-icon-opacity);
}



/* S2-g co-locate (T): light#30 L442 */
.wwm-sb-mini-hero-card .wwm-sb-totalmartial .wwm-muted,
.wwm-sb-mini-hero-card .wwm-sb-martial .wwm-muted {
  color: var(--c-sb-totalmartial--muted-fg);
  opacity: var(--c-sb-totalmartial--muted-opacity);
}

/* S2-g co-locate (T): light#70 L646 */
.wwm-cmp-modal-a .wwm-cmp-delta-label {
  color: var(--c-cmp-modal-a--cmp-delta-label-fg);
}

/* S2-g co-locate (T): light#71 L648 */
.wwm-cmp-modal-a .wwm-cmp-delta-base {
  color: var(--c-cmp-modal-a--cmp-delta-base-fg);
}

/* S2-g co-locate (T): light#111 L910 */
.wwm-equip-section .wwm-stat-pct {
  color: var(--c-text-brown-dim);
  opacity: var(--c-equip-section--stat-pct-opacity);
}

/* S2-g co-locate (T): light#116 L938 */
.wwm-step2 .wwm-muted {
  color: var(--c-text-brown-dim);
  opacity: var(--c-step2--muted-opacity);
}

/* S2-g co-locate (T): light#117 L943 */
.wwm-step2 .wwm-num-input {
  background: var(--c-step2--num-input-bg);
}

/* S2-g co-locate (T): light#120 L957 + dark#4 */
.wwm-step2 .wwm-arsenal-tier {
  border: var(--c-step2--arsenal-tier-border);
  background: var(--c-step2--arsenal-tier-bg);
}

/* S2-g co-locate (T): light#42 L548 */
.wwm-cmp-current .wwm-cmp-row {
  background: var(--c-cmp-current--cmp-row-bg);
}

/* S2-g co-locate (T): light#45 L560 */
.wwm-cmp-current .wwm-cmp-kongfu-header {
  color: var(--c-cmp-current--cmp-kongfu-header-fg);
  background: var(--c-cmp-current--cmp-kongfu-header-bg);
}

/* S2-g co-locate (T): light#45 L560 */
.wwm-cmp-current .wwm-cmp-set-header {
  color: var(--c-cmp-current--cmp-set-header-fg);
  background: var(--c-cmp-current--cmp-set-header-bg);
}

/* S2-g co-locate (T): light#52 L605 */
.wwm-cmp-modal-a .wwm-modal-close {
  color: var(--c-cmp-modal-a--modal-close-fg);
}

/* S2-g co-locate (T): light#67 L664 */
.wwm-cmp-modal-a select option:checked {
  color: var(--c-cmp-modal-a--optionchecked-checked-fg);
}

/* S2-g co-locate (T): light#68 L669 */
.wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select option:checked {
  color: var(--c-cmp-lv-select--optionchecked-checked-fg);
}

/* ╔═══════════════════════════════════════════════════════════════════╗
     RESPONSIVE — co-location (@layer Step 3, 2026-06-06)
     styles-responsive.css から移設。 cascade 同値性は responsive-dissolve-audit.cjs で機械証明
   ╚═══════════════════════════════════════════════════════════════════╝ */

@media (max-width: 600px) {
  /* 旧 topbar 内 controls 用 mobile rule は削除済 (2026-06-05 @layer Step 1):
     mobile では body.wwm-layout-active header.topbar { display:none } (本 file 後方) で
     desktop topbar 全体が不可視 = .top-controls / .lang-switcher / topbar .lang-btn / .icon-btn 系 dead。
     mobile UI は .wwm-mobile-topbar + .wwm-mobile-drawer (44px tap target 確保済) */
  .wwm-modal-close { width: 36px; height: 36px; }
}

@media (max-width: 480px) {
  /* ─── Phase 9: 装備/心法/武庫 対照 modal + SHARE modal 全画面化 ─── */
  .wwm-modal.wwm-modal-square.wwm-modal-square,
  .wwm-modal.wwm-modal-square.wwm-modal-wide,
  .wwm-modal.wwm-modal-square.wwm-arsenal-modal,
  .wwm-modal.wwm-modal-wide.wwm-modal-wide {
    max-width: 100vw;
    width: 100vw;
    min-width: 0;
    margin: 0;
    border-radius: 0;
    max-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  /* 武具/心法/武庫 対照 modal: mobile では modal-body が overflow-y:auto (L701) で scroll container 化、
     bg-icon (absolute, bottom:-18%/-45%, height:110%/165%) が scroll content として下方に伸び viewport にはみ出す。
     mobile では装飾より使い勝手優先 → bg-icon 自体を非表示。 desktop の装飾は維持。 */
  .wwm-modal.wwm-modal-square.wwm-cmp-modal-a .wwm-cmp-modal-bg-icon { display: none; }
  .wwm-modal.wwm-modal-square .wwm-modal-body,
  .wwm-modal.wwm-modal-wide .wwm-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-3);
  }
  /* 対照 grid: 現有 / divider / 新置 を 縦stack */
  .wwm-cmp-modal-a .wwm-cmp-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
  }
  /* divider 縦線 → 横線 */
  .wwm-cmp-modal-a .wwm-cmp-divider {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
  }
  .wwm-cmp-modal-a .wwm-cmp-divider::before,
  .wwm-cmp-modal-a .wwm-cmp-divider::after {
    top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
  }
  .wwm-cmp-modal-a .wwm-cmp-divider::before { left: 30%; }
  .wwm-cmp-modal-a .wwm-cmp-divider::after  { left: 70%; }
  /* footer (delta + button row) 縦stack */
  .wwm-cmp-footer-a {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .wwm-cmp-btn-row { justify-content: stretch; }
  .wwm-cmp-btn-row .wwm-btn-primary,
  .wwm-cmp-btn-row .wwm-btn-secondary { flex: 1 1 auto; }
  /* 武庫modal path選択: EN版で長ラベル 横溢れ → wrap強制 + 縮小 */
  .wwm-arsenal-modal .wwm-arsenal-paths {
    flex-wrap: wrap;
    gap: 6px 10px;
    width: 100%;
  }
  .wwm-arsenal-modal .wwm-arsenal-paths .wwm-radio-label {
    font-size: var(--text-12);
    white-space: nowrap;
  }
  /* 武庫modal Tier行: 頂点off時 input溢れ → 縮小 + wrap許可 */
  /* K cluster (1465-1478): JS の row/span/num-input inline style (grid-template-columns /
     white-space / font-size / width) 書込 対抗 — strip するな (Step 5 確定) */
  .wwm-arsenal-modal .wwm-cmp-row { grid-template-columns: 40px 1fr !important; }
  .wwm-arsenal-modal .wwm-cmp-row > span:last-child {
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 4px 6px !important;
    font-size: var(--text-xs) !important;
  }
  .wwm-arsenal-modal .wwm-cmp-row label,
  .wwm-arsenal-modal .wwm-cmp-row label > span {
    white-space: nowrap !important;
    font-size: var(--text-xs) !important;
  }
  .wwm-arsenal-modal .wwm-cmp-row .wwm-num-input {
    width: 36px !important;
    font-size: var(--text-xs);
  }
  /* ─── NOTE modal mobile 全画面 + close sticky (履歴/筆記 閉じれない問題対策) ─── */
  .wwm-modal-backdrop {
    overflow-y: auto;
    padding: 0;
    align-items: flex-start;
  }
  .wwm-note-modal-a {
    width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .wwm-note-rod { display: none; }
  .wwm-note-paper {
    flex: 1 1 auto;
    max-height: none;
    height: auto;
    border-radius: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .wwm-note-header {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0;
    padding: var(--space-2-5) var(--space-3);
    background: linear-gradient(180deg, #f4e8c8 0%, #ebd6a8 100%);
    border-bottom: 2px solid var(--brown-6);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    flex-wrap: wrap;
    gap: 6px;
  }
  .wwm-note-header-actions {
    margin-left: auto;
    flex-wrap: wrap;
    gap: 4px;
  }
  .wwm-note-btn {
    font-size: var(--text-sm);
    padding: 3px 8px;
  }
  .wwm-note-btn-close {
    background: var(--vermilion);
    color: #fff;
    border-color: var(--vermilion-deep);
    font-weight: 700;
  }
  .wwm-note-divider { display: none; }
  .wwm-note-tabs {
    position: sticky;
    top: 0; /* note-header の sticky の下に position計算で重なる→ JSで分離不要、tabs を header の直後で sticky 2段 */
    z-index: 15;
    background: #f4e8c8;
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--brown-6);
  }
  .wwm-note-body {
    flex: 1 1 auto;
    padding: var(--space-3);
  }
}

/* ── critique P1 fix (2026-06-06): anlz panel card 内 scroll ──
   .wwm-modal-square { overflow: hidden } (上 1025) を anlz 文脈のみ auto 化 —
   layout.css の min-height 320px gate と対で、 panel 高 < 中身の時に全行アクセス可能にする。
   card 内 bg-icon は display:none 済 (anlz-body 共通背景に統一) = 装飾巻込みなし。
   同 layer 後順 + spec 300 で 1025 (100) に勝つ。 mobile overlay (≤480) は別機構のため min-width gate */
@media (min-width: 481px) {
  .wwm-anlz-body .wwm-analysis-card.wwm-modal-square {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-deep) transparent;
  }
  .wwm-anlz-body .wwm-analysis-card.wwm-modal-square::-webkit-scrollbar { width: 6px; }
  .wwm-anlz-body .wwm-analysis-card.wwm-modal-square::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
     SECTION 17 — EXPORT カード生成 modal + カード artifact (2026-06-07)
     カード (.wwm-card) は「朱墨軍議」identity 固定の独立 artifact
     (1200×630 固定 px、 theme 非連動の出力画像)。
     → カード内の色は意図的に literal hex (semantic token は light theme で
       swap され artifact が崩れるため。 audit 教訓 2026-06-07 ③ と同根拠)。
     html2canvas 互換: filter / backdrop-filter / animation 不使用。
     modal 側 control は通常どおり token 参照 (theme 追従)。
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── modal shell ───────────────────────────────────────────────── */
.wwm-card-modal { max-width: min(1120px, 94vw); }
.wwm-card-modal-sub {
  font-family: var(--f-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.22em;
  color: var(--c-fg-gold-label);
  margin-left: var(--space-2);
  text-shadow: none;
}
.wwm-card-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: var(--space-4);
  align-items: start;
}

/* ── preview stage ─────────────────────────────────────────────── */
.wwm-card-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border: 1px solid var(--ink-2);
  background: #07060a;
  touch-action: none;
  user-select: none; /* pan drag 中の青選択防止 */
}
.wwm-card-stage img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.wwm-card-stage.has-bg { cursor: grab; }
.wwm-card-stage.dragging { cursor: grabbing; }
.wwm-card-stage.dropping { outline: 2px dashed var(--c-focus-ring); outline-offset: -2px; }
.wwm-card-scalebox { width: 1200px; height: 630px; transform-origin: top left; }
.wwm-card-stage-hint {
  margin: var(--space-1-5) 0 0;
  font-size: var(--text-xs);
  color: var(--paper-dim);
}

/* ── controls ──────────────────────────────────────────────────── */
.wwm-card-ctl-section { margin-bottom: var(--space-5); }
.wwm-bm-notice {
  margin: 0 0 var(--space-3);
  padding: var(--space-1-5) var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--c-fg-vermilion-strong);
  background: var(--vermilion-faint);
  border: 1px solid var(--vermilion-mid);
  border-radius: 2px;
}
.wwm-card-ctl-title {
  font-family: var(--f-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-sb-section-title-fg);
  margin-bottom: var(--space-2);
}
.wwm-card-tpl-row { display: flex; gap: var(--space-2); }
.wwm-card-tpl-btn {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: var(--space-2) var(--space-2-5);
  background: var(--input-bg);
  border: 1px solid var(--ink-2);
  border-radius: 2px;
  color: var(--paper-2);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wwm-card-tpl-btn b {
  font-family: var(--f-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--c-modal-fg);
}
.wwm-card-tpl-btn i { font-style: normal; font-size: var(--text-xs); color: var(--paper-dim); }
.wwm-card-tpl-btn:hover { border-color: var(--gold-mid); }
.wwm-card-tpl-btn.active { border-color: var(--c-focus-ring); background: var(--gold-faint); }
.wwm-card-tpl-btn.active b { color: var(--c-fg-accent); }
.wwm-card-align-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2-5);
  font-size: var(--text-12);
  color: var(--paper-2);
}
.wwm-card-align-row[hidden] { display: none; }
.wwm-card-align-btn { flex: 1; }
.wwm-card-align-btn.active,
.wwm-card-play-chip.active {
  background: var(--gold-faint);
  border-color: var(--c-focus-ring);
  color: var(--c-fg-accent);
}
.wwm-card-play-label {
  font-size: var(--text-xs);
  color: var(--paper-dim);
  margin: var(--space-2) 0 var(--space-1);
}
.wwm-card-play-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.wwm-card-play-chip {
  padding: var(--space-1) var(--space-2);
  background: var(--input-bg);
  border: 1px solid var(--ink-2);
  border-radius: 2px;
  color: var(--paper-2);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wwm-card-play-chip:hover { border-color: var(--gold-mid); }
.wwm-card-bg-row { display: flex; gap: var(--space-2); }
.wwm-card-ctl-btn {
  padding: var(--space-1-5) var(--space-2-5);
  background: transparent;
  border: 1px solid var(--gold-mid);
  border-radius: 2px;
  color: var(--c-fg-gold-label);
  font-size: var(--text-12);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.wwm-card-ctl-btn:hover:not(:disabled) { background: var(--gold-faint); }
.wwm-card-ctl-btn:disabled { opacity: 0.4; cursor: default; }
.wwm-card-zoom-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2-5);
  font-size: var(--text-12);
  color: var(--paper-2);
}
.wwm-card-zoom-row input[type="range"] {
  flex: 1;
  accent-color: var(--c-fg-accent);
  min-height: 24px;
}
.wwm-card-zoom-row input[type="range"]:disabled { opacity: 0.4; }
.wwm-card-toggles { display: flex; flex-direction: column; }
.wwm-card-toggle {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1-5) 0;
  font-size: var(--text-md);
  color: var(--paper-2);
  cursor: pointer;
}
.wwm-card-toggle input {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--c-fg-accent);
}
.wwm-card-toggle.na { opacity: 0.35; cursor: default; }
.wwm-card-actions { display: flex; gap: var(--space-2); }
.wwm-card-actions > button { flex: 1; min-width: 0; }
/* Generate = button-primary 語彙 (金 gradient + 墨茶文字)。 literal = 両 theme constant */
.wwm-card-generate {
  width: 100%;
  padding: var(--space-2-5) var(--space-4);
  background: linear-gradient(180deg, #f0d28a, #c9a45a);
  border: none; border-radius: 0;
  color: #2a1810;
  font-family: inherit;
  font-size: var(--text-14);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.wwm-card-generate:hover:not(:disabled) { filter: brightness(1.06); }
.wwm-card-generate:disabled { opacity: 0.5; cursor: default; }
/* 𝕏 ポスト btn (生成後に出現) */
.wwm-card-post-x {
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  color: var(--c-modal-fg);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wwm-card-post-x:hover { background: var(--hover-soft); border-color: var(--c-focus-ring); }
.wwm-card-post-x[hidden] { display: none; }
.wwm-card-post-hint { margin-top: var(--space-half); }

@media (max-width: 768px) {
  /* minmax(0,1fr) 必須 — 1fr 単独だと min-content (card 1200px) が勝って stage が縮まない */
  .wwm-card-modal-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  /* mobile touch target 44px */
  .wwm-card-ctl-btn, .wwm-card-tpl-btn { min-height: 44px; }
  .wwm-card-toggle { padding: var(--space-2) 0; min-height: 32px; }
  .wwm-card-zoom-row input[type="range"] { min-height: 32px; }
}

/* ── カード artifact (1200×630 固定、 朱墨軍議 identity) ────────── */
.wwm-card {
  position: relative;
  width: 1200px; height: 630px;
  overflow: hidden;
  background: #07060a;
  color: #ede4d0;
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  text-align: left;
  /* panel 上に乗る色は --cd-* に集約 (墨 default)。 .wwm-card-panel-light が古紙 override */
  --cd-panel-1: rgba(7,6,10,0.86);
  --cd-panel-2: rgba(10,8,12,0.72);
  --cd-ink: #ede4d0;
  --cd-sub: #c8bda6;
  --cd-mute: #8b8170;
  --cd-gold: #f0d28a;
  --cd-gold-2: #c9a45a;
  --cd-line: rgba(232,215,180,0.14);
  --cd-line-2: rgba(232,215,180,0.12);
  --cd-cell: rgba(232,215,180,0.04);
  --cd-cell-strong: rgba(0,0,0,0.42);
  --cd-chip-bg: rgba(200,60,43,0.14);
  --cd-chip-border: rgba(200,60,43,0.40);
  --cd-chip-fg: #ecdcc4;
  --cd-judge-normal: #ede4d0;
  --cd-judge-sym: #e8513a;
  --cd-judge-elem: #a8d4b4;
  --cd-footer-bg: rgba(0,0,0,0.55);
  --cd-num-shadow: none; /* text-shadow は html2canvas でベタ描き → preview/capture 差が出るため不使用 */
}
.wwm-card-panel-light {
  /* 透明度は墨 panel (0.86/0.72) と同等の透け感 (2026-06-07 兄貴指示) */
  --cd-panel-1: rgba(240,230,206,0.82);
  --cd-panel-2: rgba(232,220,192,0.68);
  --cd-ink: #2a1c12;
  --cd-sub: #5a4226;
  --cd-mute: #8a7350;
  --cd-gold: #5e4310;
  --cd-gold-2: #8a6a20;
  --cd-line: rgba(40,25,18,0.28);
  --cd-line-2: rgba(40,25,18,0.20);
  --cd-cell: rgba(58,38,22,0.07);
  --cd-cell-strong: rgba(58,38,22,0.10);
  --cd-chip-bg: rgba(200,60,43,0.10);
  --cd-chip-border: rgba(138,31,23,0.45);
  --cd-chip-fg: #8a1f17;
  --cd-judge-normal: #4a3526;
  --cd-judge-sym: #8a1f17;
  --cd-judge-elem: #2d5a3a;
  --cd-footer-bg: rgba(240,230,206,0.86);
  --cd-num-shadow: none;
}
/* 勁率 float / footer / 軍議 ghead は panel 切替に追従 (2026-06-07 兄貴指示: 紙が浮かないように) */
.wwm-card-bg { position: absolute; inset: 0; overflow: hidden; }
.wwm-card-bgimg { position: absolute; left: 50%; top: 50%; }

/* 朱墨軍議布地 (背景未指定時の default、 CSS 生成 = 追加 asset 不要) */
.wwm-card-cloth {
  background:
    radial-gradient(ellipse 55% 75% at 14% 78%, rgba(200,60,43,0.20), transparent 62%),
    radial-gradient(ellipse 40% 55% at 88% 12%, rgba(201,164,90,0.08), transparent 65%),
    repeating-linear-gradient(45deg, transparent 0 26px, rgba(232,215,180,0.022) 26px 27px),
    repeating-linear-gradient(-45deg, transparent 0 26px, rgba(0,0,0,0.05) 26px 27px),
    linear-gradient(160deg, #16110f 0%, #07060a 55%, #120a08 100%);
}
.wwm-card-cloth::before { /* 朱の筆ストローク帯 */
  content: '';
  position: absolute; left: -5%; right: -5%; top: 38%; height: 170px;
  background: linear-gradient(90deg, rgba(200,60,43,0) 0%, rgba(200,60,43,0.13) 25%, rgba(138,31,23,0.10) 70%, rgba(200,60,43,0) 100%);
  transform: rotate(-3deg);
}
.wwm-card-cloth::after { /* 巨大印章 燕 */
  content: '燕';
  position: absolute; right: 36px; top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  font-family: 'Noto Serif JP', serif;
  font-weight: 900; font-size: 430px; line-height: 1;
  color: rgba(200,60,43,0.13);
}
.wwm-card-align-right .wwm-card-cloth::after { right: auto; left: 36px; } /* info カラムと印章の重なり回避 */

/* scrim: 任意背景写真上でも文字 contrast 担保 (武格は info panel が自前 bg を持つため最小) */
.wwm-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(7,6,10,0.60) 0%, rgba(7,6,10,0.18) 9%, rgba(7,6,10,0) 16%);
}
.wwm-card-gungi .wwm-card-scrim {
  background: linear-gradient(180deg, rgba(7,6,10,0.74) 0%, rgba(7,6,10,0.58) 30%, rgba(7,6,10,0.70) 100%);
}
.wwm-card-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}
.wwm-card-gungi .wwm-card-content { padding: 30px 40px 0; }

/* ── 武格: FF14 キャラカ式 info カラム + 写真素通し ── */
.wwm-card-bukaku-body { flex: 1; min-height: 0; display: flex; }
.wwm-card-align-right .wwm-card-bukaku-body { flex-direction: row-reverse; }
.wwm-card-info {
  width: 396px; flex-shrink: 0;
  display: flex; flex-direction: column;
  padding: 18px 28px 12px;
  background: linear-gradient(90deg, var(--cd-panel-1), var(--cd-panel-2));
  border-right: 1px solid var(--cd-line);
}
.wwm-card-align-right .wwm-card-info {
  border-right: none;
  border-left: 1px solid var(--cd-line);
  background: linear-gradient(270deg, var(--cd-panel-1), var(--cd-panel-2));
}
.wwm-card-photo-zone { position: relative; flex: 1; min-width: 0; }
/* .wwm-card-luopan (黒 bg, 後方 rule) と同要素 → 2 class で specificity 勝ち必須 */
.wwm-card-luopan.wwm-card-luopan-float {
  position: absolute; right: 20px; bottom: 14px;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--cd-panel-1), var(--cd-panel-2));
  border: 1px solid var(--cd-line);
  border-radius: 2px;
}
.wwm-card-align-right .wwm-card-luopan-float { right: auto; left: 20px; }

/* 縦長肖像画 frame (公式プロフィールカード踏襲) */
.wwm-card-portrait {
  position: relative;
  width: 136px; height: 160px;
  margin: 0 auto 8px;
  border: 1px solid rgba(201,164,90,0.75);
  outline: 1px solid rgba(232,215,180,0.12);
  outline-offset: 3px;
  background: rgba(0,0,0,0.45);
  overflow: visible;
}
.wwm-card-portrait-img,
.wwm-card-portrait-fb {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.wwm-card-portrait-fb {
  display: flex; align-items: center; justify-content: center;
  color: var(--cd-gold-2); font-weight: 800; font-size: 44px;
  font-family: 'Noto Serif JP', serif;
}
.wwm-card-portrait::after { /* 下部 vignette (名前との接続) */
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
  background: linear-gradient(0deg, rgba(7,6,10,0.55), transparent);
  pointer-events: none;
}
.wwm-card-pf { /* 四隅 金飾り */
  position: absolute; width: 12px; height: 12px;
  border: 1.5px solid #f0d28a;
  pointer-events: none;
}
.wwm-card-pf.pf-tl { top: -5px; left: -5px; border-right: none; border-bottom: none; }
.wwm-card-pf.pf-tr { top: -5px; right: -5px; border-left: none; border-bottom: none; }
.wwm-card-pf.pf-bl { bottom: -5px; left: -5px; border-right: none; border-top: none; }
.wwm-card-pf.pf-br { bottom: -5px; right: -5px; border-left: none; border-top: none; }

.wwm-card-info-name {
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-size: 19px; font-weight: 700; color: var(--cd-ink);
  margin-bottom: 8px;
}
.wwm-card-info-name small { font-size: 12px; font-weight: 400; color: var(--cd-sub); margin-left: 6px; }

/* 軍議 header 用 小型角形肖像 */
.wwm-card-id { display: flex; align-items: center; gap: 12px; }
.wwm-card-avatar {
  width: 46px; height: 56px;
  border: 1px solid rgba(201,164,90,0.75);
  outline: 1px solid rgba(232,215,180,0.12);
  outline-offset: 2px;
  object-fit: cover;
}
.wwm-card-avatar-fb {
  width: 46px; height: 56px;
  border: 1px solid rgba(201,164,90,0.75);
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  color: #c9a45a; font-weight: 800; font-size: 20px;
}
.wwm-card-name {
  font-size: 17px; font-weight: 700; color: var(--cd-ink);
}
.wwm-card-name small { font-size: 12px; font-weight: 400; color: var(--cd-sub); margin-left: 4px; }

/* 武格指数 (info カラム内) */
.wwm-card-mi { margin-bottom: 10px; }
.wwm-card-mi-label .ja {
  font-family: 'Noto Serif JP', serif;
  font-weight: 900; font-size: 18px; letter-spacing: 0.12em;
  color: var(--cd-gold);
}
.wwm-card-mi-label .en {
  display: block;
  font-family: 'Rajdhani', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 0.3em;
  color: var(--cd-gold-2);
  margin-top: 1px;
}
.wwm-card-mi-row { display: flex; align-items: baseline; gap: 14px; margin-top: 4px; }
.wwm-card-mi-num {
  font-family: 'Cinzel', 'Noto Serif JP', serif;
  font-weight: 800; font-size: 64px; line-height: 0.95; letter-spacing: -0.01em;
  color: var(--cd-gold);
  text-shadow: var(--cd-num-shadow);
}

/* Tier badge — 階級の光 Rule: glow は SS/S のみ。
   class は wwm-ct-* (sidebar.css 裸 .tier-SS の shimmer/glow animation を継承しないため) */
.wwm-card-tier {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 14px;
  border-radius: 2px; border: 1.5px solid;
  font-family: 'Cinzel', serif;
  font-weight: 800; font-size: 24px; line-height: 1;
}
.wwm-card-tier-big { font-size: 30px; padding: 6px 16px; }
/* shadow/text-shadow 不使用 — html2canvas が inset shadow を全面塗り誤描画し銅色化した (2026-06-07 兄貴実出力)。
   不透明地 + 枠のみ = preview と capture が完全一致 */
.wwm-card-tier.wwm-ct-SS {
  color: #f0d28a; border-color: rgba(240,210,138,0.65);
  background: linear-gradient(135deg, #9e2d1d 0%, #5e150e 50%, #9e2d1d 100%);
}
.wwm-card-tier.wwm-ct-S {
  color: #ffb3a0; border-color: rgba(232,81,58,0.7);
  background: linear-gradient(135deg, #7e1c12 0%, #46100a 50%, #7e1c12 100%);
}
.wwm-card-tier.wwm-ct-A {
  color: #a8d4b4; border-color: rgba(168,212,180,0.55);
  background: linear-gradient(135deg, rgba(45,90,58,0.4), rgba(20,40,28,0.3));
}
.wwm-card-tier.wwm-ct-B {
  color: #c9b88a; border-color: rgba(201,184,138,0.5);
  background: linear-gradient(135deg, rgba(122,90,32,0.36), rgba(50,38,16,0.3));
}
.wwm-card-tier.wwm-ct-C {
  color: #b8ab94; border-color: rgba(139,129,112,0.45);
  background: rgba(139,129,112,0.12);
}
/* 紙 panel 上の Tier badge — 半透明朱地が紙に溶ける + 金 glow が読めない → 不透明朱地 + 白文字 (--c-on-vermilion 教訓) */
.wwm-card-panel-light .wwm-card-tier.wwm-ct-SS {
  color: #fff; border-color: rgba(138,31,23,0.85);
  background: linear-gradient(135deg, #a8281c 0%, #7a1810 50%, #a8281c 100%);
}
.wwm-card-panel-light .wwm-card-tier.wwm-ct-S {
  color: #fff; border-color: rgba(138,31,23,0.7);
  background: linear-gradient(135deg, #8a1f17, #5a120c);
}
.wwm-card-panel-light .wwm-card-tier.wwm-ct-A {
  color: #1d4029; border-color: #2d5a3a;
  background: rgba(45,90,58,0.15);
}
.wwm-card-panel-light .wwm-card-tier.wwm-ct-B {
  color: #6a4f1c; border-color: #8a6f30;
  background: rgba(138,111,48,0.14);
}
.wwm-card-panel-light .wwm-card-tier.wwm-ct-C {
  color: #5a4a3a; border-color: rgba(90,66,46,0.5);
  background: rgba(90,66,46,0.10);
}

/* info カラム内 武術/心法/chips */
.wwm-card-info-arts { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.wwm-card-xtiles { display: flex; gap: 7px; margin-bottom: 8px; }
.wwm-card-xtile {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 3px 5px;
  background: var(--cd-cell);
  border: 1px solid var(--cd-line-2);
  border-radius: 2px;
}
.wwm-card-xtile-iconwrap { position: relative; width: 30px; height: 30px; }
.wwm-card-xtile-iconwrap img:not(.wwm-card-liupai) { width: 30px; height: 30px; object-fit: contain; border-radius: 2px; display: block; }
.wwm-card-xtile-iconwrap .wwm-card-liupai { left: -8px; top: -6px; width: 16px; height: 16px; }
.wwm-card-xtile-name {
  max-width: 100%;
  font-size: 10px; color: var(--cd-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wwm-card-xtile b {
  font-family: 'Rajdhani', monospace;
  font-size: 11px; font-weight: 700; color: var(--cd-gold); letter-spacing: 0.08em;
}
.wwm-card-xtile-empty { color: var(--cd-mute); font-size: 12px; justify-content: center; min-height: 64px; }
/* 武術 compact (icon + 名称のみ) */
.wwm-card-kf-compact { align-items: center; }
.wwm-card-kf-compact .wwm-card-cell-name { font-size: 13px; }
/* 奇術 (装備中 8 枠) — ゲーム内準拠 十字 ×2 配置 (3×3 grid ×2 cluster) */
.wwm-card-qishu {
  display: flex; gap: 14px; margin-bottom: 8px;
  padding: 5px 8px;
  justify-content: center; align-items: center;
  background: var(--cd-cell);
  border: 1px solid var(--cd-line-2);
  border-radius: 2px;
}
.wwm-card-qishu-x {
  position: relative;
  width: 82px; height: 82px;
  flex-shrink: 0;
}
.wwm-card-qishu-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wwm-card-qishu img {
  position: absolute;
  width: 22px; height: 22px;
  object-fit: contain; display: block;
  transform: translate(-50%, -50%);
}
/* slot 位置 = BG の円中心 (22/146 = 15.1%) */
.wwm-card-qishu img.q-top    { left: 50%; top: 15.1%; }
.wwm-card-qishu img.q-bottom { left: 50%; top: 84.9%; }
.wwm-card-qishu img.q-left   { left: 15.1%; top: 50%; }
.wwm-card-qishu img.q-right  { left: 84.9%; top: 50%; }
/* 軍議 (RATIO col) */
.wwm-card-gungi .wwm-card-qishu-x { width: 84px; height: 84px; }
.wwm-card-gungi .wwm-card-qishu img { width: 23px; height: 23px; }
.wwm-card-gungi .wwm-card-qishu { margin-bottom: 0; padding: 3px 6px; }
/* 武格 上段: 武術 (縦2) | 奇術パネル 横並び — 武術 cell は flex:1 で奇術パネルと同高に揃う */
.wwm-card-info-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; }
.wwm-card-info-row .wwm-card-info-arts { flex: 1; min-width: 0; margin-bottom: 0; }
.wwm-card-info-row .wwm-card-info-arts .wwm-card-cell { flex: 1; }
.wwm-card-info-row .wwm-card-qishu { margin-bottom: 0; flex-shrink: 0; }
.wwm-card-playchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 6px; }
.wwm-card-chip {
  padding: 2px 8px;
  background: var(--cd-chip-bg);
  border: 1px solid var(--cd-chip-border);
  border-radius: 2px;
  font-size: 11px; color: var(--cd-chip-fg); letter-spacing: 0.04em;
}
.wwm-card-gchips {
  margin: 0 -40px;
  padding: 7px 40px 9px;
  background: var(--cd-footer-bg);
  border-top: 1px solid var(--cd-line);
}
.wwm-card-gchips .wwm-card-playchips { margin-top: 0; padding-top: 0; }

/* 勁率 luopan + judge list */
.wwm-card-luopan {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(232,215,180,0.14);
  border-radius: 2px;
}
.wwm-card-judges { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.wwm-card-judge-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wwm-card-judge-sep {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--cd-line);
}
.wwm-card-judge-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wwm-card-judge-name { color: var(--cd-sub); flex: 1; }
.wwm-card-judge-val { font-family: 'Rajdhani', monospace; font-weight: 700; font-size: 14px; }

/* 武術 / 心法 cell */
.wwm-card-cell {
  display: flex; align-items: center; gap: 8px;
  min-height: 58px; min-width: 0;
  padding: 7px 10px;
  background: var(--cd-cell-strong);
  border: 1px solid var(--cd-line);
  border-radius: 2px;
}
.wwm-card-cell-kf { border-color: rgba(200,60,43,0.35); }
.wwm-card-cell-iconwrap { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.wwm-card-cell-icon { width: 38px; height: 38px; object-fit: contain; display: block; }
.wwm-card-cell-icon-xf { border-radius: 2px; }
.wwm-card-liupai { position: absolute; left: -7px; top: -7px; width: 20px; height: 20px; }
.wwm-card-cell-texts { display: flex; flex-direction: column; min-width: 0; }
.wwm-card-cell-sub { font-size: 10px; letter-spacing: 0.06em; color: var(--cd-mute); }
.wwm-card-xf-tier { color: var(--cd-gold); font-weight: 700; }
.wwm-card-cell-name {
  font-size: 13px; font-weight: 700; color: var(--cd-gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wwm-card-cell-empty .wwm-card-cell-name { color: var(--cd-mute); font-weight: 400; }
.wwm-card-info-arts .wwm-card-cell { min-height: 40px; padding: 4px 9px; background: var(--cd-cell); }
.wwm-card-info-arts .wwm-card-cell-iconwrap,
.wwm-card-info-arts .wwm-card-cell-icon { width: 32px; height: 32px; }

/* footer (brand 同居 — タイトルは目立たせない方針) */
.wwm-card-footer {
  margin-top: auto;
  padding: 9px 24px 10px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--cd-footer-bg);
  border-top: 1px solid var(--cd-line);
  font-family: 'Rajdhani', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--cd-mute);
}
.wwm-card-gungi .wwm-card-footer { margin-left: -40px; margin-right: -40px; padding: 10px 40px 12px; }
.wwm-card-footer-brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Noto Serif JP', serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--cd-gold-2);
}
.wwm-card-footer-brand i {
  font-style: normal;
  font-family: 'Cinzel', serif;
  font-size: 9px; font-weight: 600; letter-spacing: 0.22em;
  color: var(--cd-mute);
}
.wwm-card-footer-seal {
  width: 16px; height: 16px;
  background: #c83c2b; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
  transform: rotate(-6deg);
  border-radius: 1px;
}
.wwm-card-footer-copy {
  font-size: 9px; letter-spacing: 0.06em;
  color: var(--cd-mute);
}
.wwm-card-footer-url { color: var(--cd-gold-2); font-weight: 700; }

/* 軍議 template */
.wwm-card-ghead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  margin: -30px -40px 0;
  padding: 16px 40px 12px;
  background: linear-gradient(180deg, var(--cd-panel-1), var(--cd-panel-2));
  border-bottom: 1px solid var(--cd-line);
}
.wwm-card-ghead-score { display: flex; align-items: baseline; gap: 14px; }
.wwm-card-ghead .wwm-card-mi-num { font-size: 58px; }
.wwm-card-ghead .wwm-card-mi-label .ja { font-size: 17px; }
.wwm-card-gbody {
  flex: 1; min-height: 0;
  display: flex; gap: 14px;
  padding: 14px 0;
}
.wwm-card-gcol {
  flex: 1; min-width: 0;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--cd-panel-1), var(--cd-panel-2));
  border: 1px solid var(--cd-line-2);
  border-radius: 2px;
  overflow: hidden;
}
.wwm-card-gcol-donut {
  flex: 0 0 270px;
  display: flex; flex-direction: column; align-items: center;
}
.wwm-card-gsec-title {
  font-family: 'Rajdhani', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em;
  color: var(--cd-gold-2);
  margin: 2px 0 5px;
  align-self: flex-start;
}
.wwm-card-stats5 { display: flex; gap: 6px; margin-bottom: 10px; }
.wwm-card-stat5 {
  flex: 1; text-align: center;
  padding: 6px 2px;
  background: var(--cd-cell);
  border: 1px solid var(--cd-line-2);
}
.wwm-card-stat5-l {
  display: block;
  font-family: 'Noto Serif JP', serif;
  font-size: 12px; font-weight: 700;
  color: var(--cd-sub);
}
.wwm-card-stat5-v {
  display: block;
  font-family: 'Rajdhani', monospace;
  font-size: 19px; font-weight: 700;
  color: var(--cd-gold);
}
.wwm-card-rows { display: flex; flex-direction: column; }
.wwm-card-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--cd-line-2);
  font-size: 13px;
}
.wwm-card-row:last-child { border-bottom: none; }
.wwm-card-row-l { color: var(--cd-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wwm-card-row-v {
  font-family: 'Rajdhani', monospace;
  font-weight: 700; font-size: 14px;
  color: var(--cd-gold);
  white-space: nowrap;
}
.wwm-card-gungi .wwm-card-cell { background: var(--cd-cell); margin-bottom: 4px; min-height: 42px; }
.wwm-card-gungi .wwm-card-cell:last-child { margin-bottom: 0; }
.wwm-card-gungi .wwm-card-brand-en { font-size: 13px; letter-spacing: 0.2em; }

/* ════════════════════════════════════════════════════════════════
   SECTION 39 — IMPORT GATE (Tier 判定中 全操作抑止 modal、 2026-06-07)
   import 実行 → opt best 確定 (Tier 判定完了) まで 全クリック抑止。
   半透明 backdrop = 背後の score 描画 + Tier ルーレット演出が透けて見える。
   ════════════════════════════════════════════════════════════════ */
.wwm-gate-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45); /* 通常 modal (0.7) より薄く = 背後の構築を見せる */
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-toast);
  padding: var(--space-4);
  transition: opacity 0.2s ease 0.25s; /* 完了時 100% 到達を見せてから fade */
}
.wwm-gate-backdrop.wwm-gate-out { opacity: 0; }
.wwm-gate-modal {
  max-width: 340px;
  padding: var(--space-4) var(--space-5);
  text-align: center;
  outline: none;
}
.wwm-gate-title {
  margin: 0 0 var(--space-3);
  font-family: var(--f-display, var(--f-latin));
  font-size: var(--text-15); font-weight: var(--fw-bold);
  color: var(--gold-bright);
  letter-spacing: 0.15em;
  text-shadow: 0 0 10px var(--gold-bright-soft);
}
.wwm-gate-bar {
  height: 6px;
  background: var(--ink-2);
  overflow: hidden;
  margin: 0 0 var(--space-2);
}
.wwm-gate-fill {
  position: relative;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--vermilion-deep), var(--vermilion-mid));
  transition: width 0.35s ease;
}
.wwm-gate-fill::after { /* shimmer */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: wwm-gate-shimmer 1.4s linear infinite;
}
.wwm-gate-fill.wwm-gate-fill-done { background: var(--gold-bright); } /* 完了 = 金 (階級の光) */
.wwm-gate-label {
  font-size: var(--text-12);
  color: var(--paper-mute);
  letter-spacing: 0.05em;
}
@keyframes wwm-gate-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .wwm-gate-fill::after { animation: none; }
  .wwm-gate-fill { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   SECTION 40 — AFFIX OCR 取込 (武具対照 modal、 2026-06-07 TODO #16)
   📷 ボタン = 新置 h3 内 Lv select 右隣。token = lv-select と同系 (theme 追従)
   ════════════════════════════════════════════════════════════════ */
.wwm-ocr-btn {
  margin-left: 6px;
  padding: 1px 7px;
  min-width: 28px;
  min-height: 24px;
  font-size: 13px;
  line-height: 1;
  background: var(--c-btn-secondary-bg); /* themed (dark=transparent / light=shade) */
  color: inherit; /* ? の文字色 — UA default 黒だと墨 theme で不可視 (2026-06-08 兄貴指摘) */
  border: 1px solid var(--gold-deep);
  border-radius: 2px;
  cursor: pointer;
  vertical-align: middle;
}
.wwm-ocr-btn:hover { border-color: var(--vermilion); }
.wwm-ocr-btn:disabled { opacity: 0.5; cursor: progress; }
.wwm-ocr-status {
  margin-left: 6px;
  font-size: 11px;
  color: var(--paper-mute);
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.wwm-ocr-lang-sel {
  margin-left: 4px;
  font-size: 11px;
  font-family: var(--f-mono);
  background: var(--c-btn-secondary-bg);
  color: inherit;
  border: 1px solid var(--gold-deep);
  border-radius: 2px;
  vertical-align: middle;
}
/* 低確信行: 朱枠 (編集で解除) */
.wwm-cmp-edit-row.wwm-ocr-warn {
  outline: 1.5px solid var(--vermilion);
  outline-offset: 1px;
}
/* drop hover (新置列) */
.wwm-cmp-new.wwm-ocr-dropping { outline: 2px dashed var(--gold-deep); outline-offset: -2px; }
/* ? ガイドボタン (📷 右隣) — 朱地白文字 literal = 両 theme 共通で目立たせる (2026-06-08 兄貴指示) */
.wwm-ocr-help-btn {
  min-width: 24px;
  font-weight: var(--fw-bold);
  background: #c83c2b;
  color: #fff;
  border-color: #c83c2b;
}
.wwm-ocr-help-btn:hover { background: #e8513a; border-color: #e8513a; }
/* 取込ガイド modal: 撮影例 mock = ゲーム詳細画面の HTML 再現 (実スクショ再配布回避)。
   ゲーム UI = 常時暗地 → theme 非連動の literal 色 (card artifact と同方針) */
.wwm-ocr-guide { max-width: 440px; }
.wwm-ocr-guide-cap { margin: 0 0 6px; font-size: 12px; }
.wwm-ocr-mock {
  background: #16120d;
  border: 1px solid #5a4a2a;
  border-radius: 3px;
  padding: 10px 16px 12px;
  margin: 0 0 10px;
}
.wwm-ocr-mock-big {
  color: #ede4d0;
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.15;
}
.wwm-ocr-mock-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; line-height: 1.8;
  color: #e8ddc8;
}
.wwm-ocr-mock-row b { color: #e89a4f; font-style: italic; font-weight: 600; }
.wwm-ocr-mock-head span { font-size: 13px; }
.wwm-ocr-mock-plain { color: #ede4d0; font-style: italic; font-weight: 600; }
.wwm-ocr-mock-gap { height: 10px; }
.wwm-ocr-mock-dot { font-style: normal; color: #8a7a5e; font-size: 10px; }
.wwm-ocr-mock-badge {
  display: inline-block;
  background: #8a6f30;
  border-radius: 2px;
  font-size: 9px; font-style: normal;
  padding: 0 3px; line-height: 1.4;
  vertical-align: 1px;
}
.wwm-ocr-guide-steps { margin: 0 0 8px; padding-left: 20px; font-size: 12px; line-height: 1.7; }
.wwm-ocr-guide-steps li { margin-bottom: 4px; }
.wwm-ocr-guide-note { margin: 0; font-size: 11px; color: var(--paper-mute); }

} /* end @layer modals */