.ability-badge{--stat-ink:#8b3931;--stat-fill:#f7e7e0;display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid color-mix(in srgb,var(--stat-ink) 30%,transparent);border-radius:4px;background:var(--stat-fill);color:var(--stat-ink);font-size:10px;line-height:1.5;white-space:nowrap}
.ability-badge i{display:grid;place-items:center;width:16px;height:16px;border-radius:3px;background:var(--stat-ink);color:var(--stat-fill);font:600 11px/1 'Noto Serif KR',serif;font-style:normal}
.ability-badge strong{color:inherit;font-weight:800;font-variant-numeric:tabular-nums}
.ability-badge.stat-intellect{--stat-ink:#2c5f8a;--stat-fill:#e5eff8}.ability-badge.stat-leadership{--stat-ink:#386b4a;--stat-fill:#e5f0e4}.ability-badge.stat-charm{--stat-ink:#80518a;--stat-fill:#f1e9f6}.ability-badge.stat-wealth{--stat-ink:#80611e;--stat-fill:#f7efcf}.ability-badge.stat-fame{--stat-ink:#8c5426;--stat-fill:#f7e9d6}
.ability-badge.is-minus{border-style:dashed}
.ability-badge.stat-health{--stat-ink:#347674;--stat-fill:#dff3ed}
:is(.choice-growth-preview,.focus-option-growth,.forecast-gain)>.ability-badge{display:inline-flex;align-items:center;align-self:flex-start;flex:0 0 auto;gap:4px;padding:3px 6px;border:1px solid color-mix(in srgb,var(--stat-ink) 30%,transparent);border-radius:4px;background:var(--stat-fill);color:var(--stat-ink);font-size:11px;line-height:1.5;white-space:nowrap}
.choice-growth-preview,.focus-option-growth{align-items:center}
.ability-badge>span,.ability-badge>strong{margin:0;padding:0;border:0;background:none;color:inherit;font-size:inherit;line-height:inherit;letter-spacing:normal}
.ability-badge>i{flex:none}
@media(max-width:700px){:is(.choice-growth-preview,.focus-option-growth,.forecast-gain)>.ability-badge{font-size:10px;gap:3px;padding:3px 4px}.ability-badge i{width:14px;height:14px;font-size:10px}.focus-option-growth{gap:3px}}
html[data-color-mode="dark"] .ability-badge{background:color-mix(in srgb,var(--stat-ink) 30%,#152e26);color:var(--stat-fill);border-color:color-mix(in srgb,var(--stat-fill) 35%,transparent)}
html[data-color-mode="dark"] .ability-badge i{background:var(--stat-fill);color:var(--stat-ink)}
