/* 능력 문장과 7칸 게이지(js/statwords.js). 움직이지 않는다 */
.swg { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.swg i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .45; box-sizing: border-box; }
.swg i.f { background: currentColor; opacity: 1; }
.swg i.h { background: linear-gradient(90deg, currentColor 50%, transparent 50%); opacity: 1; }
/* 프로필(어두운 카드) */
.ovr.swd { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; }
.ovr.swd .swg { color: var(--gold); }
.ovr.swd .sw-o { grid-column: 1 / -1; font: 800 16px/1.35 var(--body); color: #fff; word-break: keep-all; }
.ovr.swd .sw-n { font: var(--hw) 18px var(--head); color: #fff; font-style: normal; }
.stat.swd { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.stat.swd .swg { color: #fff; }
.stat.swd .sw-t { font: 500 11.5px/1.35 var(--body); color: var(--on-dark-mute); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stat.swd .sw-n { font: var(--hw) 14px var(--head); }
.attrs.swd { gap: 9px; }
.attr.swd { grid-template-columns: 46px auto 1fr; grid-template-areas: "l g n" "t t t"; row-gap: 2px; }
.attr.swd > span { grid-area: l; }
.attr.swd .swg { grid-area: g; color: #fff; }
.attr.swd b { grid-area: n; justify-self: end; }
.attr.swd .sw-t { grid-area: t; font: 500 12px/1.35 var(--body); font-style: normal; color: var(--on-dark-mute); word-break: keep-all; }
/* 포스터(밝은 종이) */
.p2-stat.swd { display: grid; grid-template-columns: 52px auto; grid-template-areas: "l g" "t t"; gap: 2px 8px; align-items: center; }
.p2-stat.swd .ps-l { grid-area: l; }
.p2-stat.swd .swg { grid-area: g; color: #2A211E; }
.p2-stat.swd .sw-t { grid-area: t; font: 500 12.5px/1.35 var(--body); font-style: normal; color: #2A211E; word-break: keep-all; }
.p2-sub.swd { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p2-sub.swd .stat.swd small { color: #2A211E; opacity: .75; }
.p2-sub.swd .stat.swd .swg { color: #2A211E; }
.p2-sub.swd .stat.swd .sw-t { color: #2A211E; opacity: .85; }
/* 결과: 단계가 바뀐 줄, 연말 띠 */
.sw-change { margin: 6px 0; font: 700 13.5px/1.5 var(--body); color: var(--ink); }
.rb-sw { display: inline-flex; gap: 6px; align-items: center; }
.rb-sw .swg { color: currentColor; }
.mg-help, .sns-help { margin: 4px 0 8px; font: 700 13px var(--body); color: var(--ink); opacity: .85; }
.p2-sub.swd { text-align: left; }
.sw-t::first-letter { text-transform: uppercase; }
.sns-gain { margin: 6px 0; font: 700 13.5px var(--body); color: var(--ink); text-align: center; }
/* 영어·일본어처럼 긴 문장도 칸 안에서 줄바꿈 */
.attrs.swd > .attr.swd, .stat.swd { min-width: 0; }
.attr.swd .sw-t, .stat.swd .sw-t, .p2-stat.swd .sw-t { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
/* 포스터(밝은 종이) 위 체력 숫자 칸 */
.p2-sub.swd .stat:not(.swd) small { color: #2A211E; opacity: .75; }
.p2-sub.swd .stat:not(.swd) b { color: #2A211E; }
.p2-sub.swd .stat:not(.swd) .bar { background: rgba(42,33,30,.15); }
/* 숫자 보기 + 좁은 폰: 이름·숫자 한 줄, 게이지 다음 줄(이름 46px + 게이지 81px + 숫자가 칸을 넘는다) */
@media (max-width: 420px) {
  .attr.swd:has(> b) { grid-template-columns: 1fr auto; grid-template-areas: "l n" "g g" "t t"; }
}
@media (max-width: 340px) {
  .stat.swd .swg { gap: 2px; }
}