/* ==========================================================================
   캐릭터 상세 (cx-)
   - 첫 화면은 쇼케이스(시안 C), 그 아래 허브 타일(시안 D)로 항목을 고르고 탭 본문으로 들어감
   - 색·글꼴은 dnd2.css 토큰, 탭·제목·카드는 보스 상세(bxt-)와 공략 모듈(gd-)을 그대로 씀
   - 직업 색은 --cc (파이터 = --cls-fighter). 다른 직업 페이지는 body 의 char-직업 클래스만 바꾸면 됨
   ========================================================================== */
.char-fighter { --cc: var(--cls-fighter, #FFD08A); --cc-rgb: 255,208,138; }
.char-cleric  { --cc: var(--cls-cleric);  --cc-rgb: 237,230,206; }
.char-elf     { --cc: var(--cls-elf);     --cc-rgb: 139,226,139; }
.char-dwarf   { --cc: var(--cls-dwarf);   --cc-rgb: 255,159,90; }
.char-muser   { --cc: var(--cls-muser);   --cc-rgb: 196,181,253; }
.char-thief   { --cc: var(--cls-thief);   --cc-rgb: 255,107,129; }

/* 위쪽 배경: 게임 컷인 그림을 흐리게 깔아 색만 받음 (또렷한 그림은 쇼케이스가 맡음) */
.page-characters .page-art { --art-opacity: .5; }
.page-characters .page-art::after { opacity: .18; filter: blur(2px) brightness(.7); }

/* ---------- 쇼케이스 ---------- */
.breadcrumb { text-shadow: 0 1px 2px #000, 0 0 8px rgba(0,0,0,.9); } /* 폰에서 큰 그림이 빵조각 줄 뒤에 겹쳐 글자가 묻혔음 → 글자 둘레에 그늘 */
.cx-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: var(--sp-8); align-items: end; min-height: min(640px, calc(100svh - var(--header-h)));
  padding: var(--sp-6) 0 0; isolation: isolate;
}
.cx-ghost {
  /* 위치·크기는 캐릭터 소개(.sc-word)와 같게: 오른쪽 끝에 붙이고 13vw (최대 220px) */
  position: absolute; z-index: -1; top: calc(13% - 25px); right: 0; margin: 0;
  font: 700 clamp(96px, 13vw, 220px)/.8 var(--font-display); letter-spacing: -.01em; white-space: nowrap;
  color: rgba(255,255,255,.02); -webkit-text-stroke: 1.5px rgba(255,255,255,.14); pointer-events: none; user-select: none; /* 캐릭터 소개(.sc-word)와 같은 굵기·진하기 */
}
.cx-hero__text { align-self: center; padding-bottom: var(--sp-12); }
.cx-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: var(--fs-sm); }
.cx-eyebrow a { color: var(--text-sub); }
.cx-eyebrow a:hover { color: var(--text-strong); }
.cx-eyebrow .loc { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(var(--cc-rgb), .4); color: var(--cc); background: rgba(var(--cc-rgb), .08); }
.cx-name {
  margin: 18px 0 6px; font: 700 clamp(52px, 8.4vw, 112px)/.9 var(--font-display); letter-spacing: .015em;
  color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,.7);
}
.cx-ko { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; color: var(--text-strong); letter-spacing: -.02em; }
.cx-ko span { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.cx-lore { max-width: 46ch; margin: 18px 0 0; color: var(--text-sub); font-size: 15.5px; line-height: 1.75; }
.cx-hero .bx-kpis { margin-top: 26px; }
.cx-hero .bx-kpi b em { font-style: normal; color: var(--muted); font-weight: 600; margin: 0 4px; }

.cx-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 520px; margin: 26px 0 0; padding: 0; list-style: none; }
.cx-stats li { display: grid; gap: 6px; }
.cx-stats abbr { text-decoration: none; font-size: 11.5px; letter-spacing: .12em; color: var(--muted); }
.cx-stats b { font-size: 17px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cx-stats i { display: block; height: 4px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.cx-stats i::before { content: ""; display: block; height: 100%; width: calc(var(--v) / 18 * 100%); border-radius: inherit; background: rgba(255,255,255,.55); }
.cx-stats .hi b { color: var(--cc); }
.cx-stats .hi i::before { background: var(--cc); }

.cx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.cx-actions .btn svg { width: 16px; height: 16px; }
/* 공략 들어가기: 보라 대신 공략실 · 탭과 같은 금빛 (메달 금색, 글씨는 짙은 갈색) */
.cx-actions .btn--primary { background: var(--medal-gold); color: var(--medal-gold-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hof-gold) 60%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--hof-gold) 55%, transparent); }
.cx-actions .btn--primary:hover { background: var(--medal-gold); color: var(--medal-gold-ink); filter: brightness(1.08); }
.cx-actions .btn--ghost:hover { border-color: color-mix(in srgb, var(--hof-gold) 55%, transparent); }

/* 직업 고르기 줄 (시안 C 아래 썸네일) */
.cx-roster { display: flex; align-items: center; gap: 8px; margin-top: 34px; }
.cx-roster span.l { font-size: 12px; color: var(--muted); margin-right: 4px; }
.cx-roster a { position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid var(--line-strong); background: var(--surface-2); opacity: .55; transition: opacity .15s, border-color .15s; } /* 주캐릭터 표시(.mc-faces)와 같은 동그란 얼굴 */
.cx-roster a:hover { opacity: 1; }
.cx-roster a[aria-current="page"] { opacity: 1; border-color: var(--cc); box-shadow: 0 0 0 2px rgba(var(--cc-rgb), .25); }
.cx-roster img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 그림 무대 */
.cx-stage { position: relative; align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 540px; } /* 그림 높이를 글 영역과 비슷하게 */
.cx-stage::before { /* 직업색 빛: 캐릭터 소개(.sc-show::before)와 같은 크기·진하기 (반지름 약 520px, 80%에서 사라짐) */
  content: ""; position: absolute; z-index: -1; left: 30%; top: 46%; /* 가운데가 그림보다 살짝 왼쪽 (캐릭터 소개처럼, 1400 폭에서 약 120px) */ width: min(1040px, 165%); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--cc-rgb), .22), rgba(var(--cc-rgb), .05) 55%, transparent 80%);
  pointer-events: none;
}
/* 폰: 빛이 화면 오른쪽 밖까지 퍼져 페이지가 옆으로 밀리던 것(≈27px) → 화면 가장자리에서 자름. clip 이라 sticky 탭 줄은 그대로 */
@media (max-width: 768px) { .site-main { overflow-x: clip; } }
.page-characters { overflow-x: clip; } /* 커진 빛이 화면 오른쪽 밖으로 나가도 가로 스크롤이 생기지 않게 */
.cx-stage::after {
  content: ""; position: absolute; z-index: -1; left: 18%; right: 18%; bottom: 140px; height: 34px; /* 발밑: 그림을 바닥에서 88px 띄운 만큼 같이 올림 */
  background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); filter: blur(2px);
}
.cx-figure { position: relative; margin: 0; min-height: 0; }
.cx-figure img {
  position: absolute; inset: auto 0 88px 0; width: 100%; height: min(100%, 530px); /* 캐릭터 소개 그림과 같은 크기(최대 530px)·높이가 되게 바닥에서 띄움 */ object-fit: contain; object-position: center bottom;
  /* 외곽선은 캐릭터 소개(.sc-fig)와 같게: 얇은 먹선(네 방향) + 직업 색 옅은 빛 + 아래 그림자 */
  --fig-line: 1px; --fig-ink: rgba(var(--scrim-rgb), .5);
  filter: drop-shadow(var(--fig-line) 0 0 var(--fig-ink)) drop-shadow(calc(var(--fig-line) * -1) 0 0 var(--fig-ink))
          drop-shadow(0 var(--fig-line) 0 var(--fig-ink)) drop-shadow(0 calc(var(--fig-line) * -1) 0 var(--fig-ink))
          drop-shadow(0 0 6px rgba(var(--cc-rgb), .28)) drop-shadow(0 24px 30px rgba(0,0,0,.55));
  opacity: 0; transform: translateY(10px); pointer-events: none;
}
.cx-figure img.is-on { opacity: 1; transform: none; }
.cx-figure img.is-som { padding: 6% 4% 0; }
@media (prefers-reduced-motion: no-preference) {
  .cx-figure img { transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
}
.cx-stage__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 22px; }
.cx-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(10,10,14,.6); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cx-seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 700 13px var(--font); cursor: pointer; white-space: nowrap; }
.cx-seg button:hover { color: var(--text-strong); }
.cx-seg button[aria-pressed="true"] { background: rgba(255,255,255,.1); color: var(--text-strong); }
.cx-seg button b { font-family: var(--font-display); color: var(--cc); margin-right: 5px; }
.cx-credit { margin: 0; font-size: 11.5px; color: var(--muted); text-align: right; line-height: 1.5; }
.cx-credit b { color: var(--text-sub); font-weight: 600; }

/* ---------- 허브 ---------- */
.cx-hub { padding: var(--sp-12) 0 var(--sp-10); border-top: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.cx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 176px; gap: 12px; }
.cx-tile {
  --tile-art: none; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: 18px 20px; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; text-align: left;
  background: var(--art-bg); border: 1px solid var(--line-strong); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.cx-tile::before { /* 도트 그림 */
  content: ""; position: absolute; z-index: -2; inset: 0; background: var(--tile-art) var(--tile-pos, right 16px top 16px) / var(--tile-size, auto 58%) no-repeat;
  image-rendering: pixelated; opacity: .6; transition: opacity .2s; mix-blend-mode: lighten;
}
/* 아래 어둡게 + 마우스를 올리면 위쪽에서 은은한 금빛이 번지고 테두리도 금빛으로 (그림 위 · 글씨 아래, 빛 자리는 고정) */
@property --glow { syntax: "<number>"; inherits: true; initial-value: 0; }
.cx-tile { --glow: 0; transition: border-color .3s, transform .2s, box-shadow .3s, --glow .35s ease; }
.cx-tile::after { content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(120% 90% at 50% -10%, rgba(255,226,170, calc(var(--glow) * .12)), transparent 60%),
              linear-gradient(180deg, rgba(var(--bg-rgb),0) 25%, rgba(var(--bg-rgb),.85) 100%); }
@media (hover: hover) {
  .cx-tile:hover { --glow: 1; border-color: color-mix(in srgb, var(--hof-gold) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hof-gold) 12%, transparent), 0 22px 44px -26px color-mix(in srgb, var(--hof-gold) 45%, transparent); }
}
.cx-tile:not(.cx-tile--xl)::before { inset: 10px 12px auto 76px; height: 60%; background-size: contain; background-position: right center; } /* 작은 칸: 그림은 아이콘 오른쪽 · 위쪽 60% 상자 안에 맞춤. 넓은 그림을 통째로 넣으면 아주 작아져서 타일엔 한 동작만 잘라 씀 (nk/tile-*.png) */
.cx-tile:hover::before { opacity: .95; }
/* 파이터 커맨드 칸: 그림 왼쪽 끝(둘째 동작의 푸른 칼바람 끝 4px)이 칸 왼쪽 벽에 조각으로 걸려 보여서 7px 왼쪽으로 (자리 값은 공략 본문 style 에 있어 여기서 덮음) */
.cx-tile[data-goto="commands"][style*="fighter/nk2/ctrl_11"] { --tile-pos: right 31px top 28px !important; }
/* 파이터 이도류 칸: 그림을 이도류 탭 'A 공격 4히트' 동작(ts_01 의 4hit 장면만 잘라 냄)으로 */
.cx-tile[data-goto="twin"][style*="fighter/nk2/tile-twin"] { --tile-art: url("/img/characters/fighter/nk2/tile-twin-4hit.png") !important; }
/* 장비 칸: 작은 칼 그림이 칸에 맞춰(contain) 3~4배로 너무 커지던 것 → 높이 36px (캐릭터 목록 공략 카드와 같은 크기) */
.cx-tiles .cx-tile[data-goto="gear"]::before { background-size: auto 36px; background-position: center; }   /* 앞 .cx-tiles: 폰 줄(@media) 의 contain 보다 세게 */
/* 파이터 콤보 칸: 대공기 한 동작만 있던 그림 → 커맨드 탭 대공기 그림(ctrl_10, 글자 줄 뺌)의 다섯 장면을 칸 오른쪽에 넓게. 원본보다 줄여 보이므로 부드럽게 */
.cx-tiles .cx-tile[data-goto="combos"][style*="fighter/nk2/tile-combo"] { --tile-art: url("/img/characters/fighter/nk2/tile-combo-aa.png") !important; }
.cx-tiles .cx-tile[data-goto="combos"][style*="fighter/nk2/tile-combo"]::before { inset: 6px 12px 22px 28%; height: auto; background-position: right center; background-size: contain; image-rendering: auto; }
@media (prefers-reduced-motion: no-preference) { .cx-tile:hover { transform: translateY(-2px); } }
.cx-tile .gi-wrap { position: absolute; top: 16px; left: 18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--cc-rgb), .1); border: 1px solid rgba(var(--cc-rgb), .3); color: var(--cc); font-size: 22px; }
.cx-tile > b { font-size: 20px; font-weight: 900; letter-spacing: -.03em; color: var(--text-strong); }
.cx-tile small { font-size: 13px; color: var(--text-sub); line-height: 1.5; }
.cx-tile .n { position: absolute; top: 18px; right: 18px; font: 700 12px var(--font); color: var(--muted); }
.cx-tile .en { font-family: var(--font-display); font-size: 11.5px; letter-spacing: .2em; color: var(--accent); }
.cx-tile--xl { grid-column: span 2; grid-row: span 2; padding: 26px 28px; }
.cx-tile--xl > b { font-size: 30px; }
.cx-tile--xl small { font-size: 14.5px; max-width: 40ch; }
.cx-tile--wide { grid-column: span 2; }
.cx-tile .cmds { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.cx-tile .cmds > span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-sub); } /* > : 안쪽 커맨드 동그라미(span)까지 왼쪽 정렬되면 화살표·글자가 원 밖으로 밀림 */
.cx-tile .thumbs { position: absolute; z-index: -1; top: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.cx-tile .thumbs img { height: 100%; width: auto; border-radius: 10px; object-fit: cover; opacity: .55; transition: opacity .2s; }
.cx-tile:hover .thumbs img { opacity: .9; }
.cx-tile .lvl { position: absolute; z-index: -1; top: 18px; right: 18px; font: 700 64px/1 var(--font-display); color: rgba(var(--cc-rgb), .16); letter-spacing: -.02em; }

/* ---------- 탭 본문 ---------- */
.cx-body { padding-bottom: var(--sp-16); }
.cx-body .bxt-panel { padding-top: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .cx-body .bxt-panel.is-enter { animation: cx-enter .4s cubic-bezier(.2,.8,.2,1); }
  @keyframes cx-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
.cx-sec + .cx-sec { margin-top: 56px; }
.cx-lead2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; }
.cx-next { display: flex; justify-content: flex-end; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); }
.cx-next button { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-strong); font: 700 15px var(--font); cursor: pointer; }
.cx-next button:hover { border-color: var(--accent-line); }
.cx-next button span { font-size: 12px; font-weight: 600; color: var(--muted); }

/* 1P / 2P 컷인 */
.cx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 384px)); gap: 16px; } /* 게임 컷인(384×224)을 원본 크기로: 늘리면 도트가 들쭉날쭉 */
.cx-duo figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-strong); background: var(--art-bg-deep); }
.cx-duo img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.cx-duo figcaption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 14px 18px; background: var(--surface-solid); }
.cx-duo figcaption .p { padding: 2px 7px; border-radius: 5px; font: 800 11px var(--font); color: #fff; background: var(--danger); }
.cx-duo figcaption .p.p2 { background: #2E63B8; }
.cx-duo figcaption b { font: 700 20px var(--font-display); color: var(--text-strong); letter-spacing: .02em; }
.cx-duo figcaption span:last-child { font-size: 13px; color: var(--muted); }

/* 커맨드: 분류 고르기 */
.cx-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.cx-filter button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-sub); font: 600 13.5px var(--font); cursor: pointer; }
.cx-filter button:hover { color: var(--text-strong); }
.cx-filter button[aria-pressed="true"] { background: rgba(255,255,255,.1); border-color: transparent; color: var(--text-strong); }
.cx-filter button .n { margin-left: 6px; color: var(--muted); font-size: 12px; }
.cx-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cx-moves .gd-move[hidden] { display: none; }
.cx-moves .gd-move__stage img { max-width: 100%; height: auto; }
.cx-legend-wrap { position: sticky; top: calc(var(--header-h) + 58px); z-index: 10; margin-bottom: 20px; }
@media (max-width: 768px) { .cx-legend-wrap, .cx-legend-wrap .gd-legend { position: static; } }
/* 폰: 기술 성질 한눈표(6칸)가 폭을 넘어 오른쪽 칸(무적 · 누운 적 · 쓸모)이 잘려 보였음 → 줄마다 카드: 기술 이름 위, 칸 이름 · 값을 두 칸씩 */
@media (max-width: 560px) {
  .cx-body .gd-box.gd-scroll:has(.gd-matrix) { overflow: visible; }
  .cx-body .gd-matrix, .cx-body .gd-matrix tbody { display: block; }
  .cx-body .gd-matrix thead { display: none; }
  .cx-body .gd-matrix tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid rgba(90,62,54,.45); }
  .cx-body .gd-matrix tr > * { padding: 0; border: 0; text-align: left; white-space: normal; }
  .cx-body .gd-matrix tbody th { grid-column: 1 / -1; margin-bottom: 2px; font-weight: 700; }
  .cx-body .gd-matrix td { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; }
  .cx-body .gd-matrix td[data-l]::before { content: attr(data-l); flex: none; min-width: 3.6em; font-size: 11px; color: var(--muted); }
} /* 폰: 버튼 표가 머리글 · 탭 줄 아래 붙어 따라오면 화면 위 230px 가량을 가려서 제자리에 둠 */

/* 도감: 커맨드 · 콤보 · 이도류 공통. 왼쪽 목록에서 고르면 오른쪽에 그림(영상)과 설명 (character.js) */
.cx-dex__chips { margin-bottom: 16px; }
.cx-dex__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.cx-dex__list { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--dnd-line); border-radius: 8px; background: var(--dnd-panel); }
.cx-dex__list > li[hidden] { display: none; }
.cx-dex__gh { padding: 12px 10px 4px; color: var(--dnd-text); font-size: 13px; font-weight: 700; }
.cx-dex__gh:first-child { padding-top: 6px; }
.cx-dex__gh span { margin-right: 8px; color: var(--dnd-gold-hi); font: 600 11px/1 Georgia, serif; letter-spacing: .16em; }
.cx-dex__row { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--dnd-text); font: 500 14px/1.45 var(--dnd-font); text-align: left; cursor: pointer; }
.cx-dex__row:hover { background: rgba(255,255,255,.04); }
.cx-dex__row[aria-pressed="true"] { border-color: var(--dnd-gold); background: rgba(201,162,74,.10); }
.cx-dex__no { color: var(--dnd-muted); font: 13px Georgia, 'Times New Roman', serif; text-align: center; }
.cx-dex__row[aria-pressed="true"] .cx-dex__no { color: var(--dnd-gold-hi); }
.cx-dex__name { min-width: 0; }
.cx-dex__view { position: sticky; top: calc(var(--header-h) + 120px); padding: 12px; border: 1px solid var(--dnd-line); border-radius: 8px; background: var(--dnd-panel); }
.cx-dex__view > .cx-dex__item { display: flex; flex-direction: column; }
.cx-dex__var { display: contents; }
.cx-dex__var[hidden] { display: none; }
/* 그림 · 영상 칸 = 맨 위 (마크업에선 항목마다 설명 옆에 있음) */
.cx-dex__media { order: -1; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; min-height: 230px; padding: 16px; border-radius: 14px / 10px; overflow: hidden; --art-glow-c: var(--cc); box-shadow: inset 0 0 0 1px var(--art-line); } /* 바탕 = 누끼 그림 칸 (dnd2.css .art-cut, 빛은 직업색) */
.cx-dex__media img { max-width: 100%; height: auto; image-rendering: pixelated; }
/* 영상은 384×224 원본이지만 오락실 브라운관처럼 4:3 으로 세로를 늘려 보여 줌. 넓은 화면에서도 640×480 까지만 */
.cx-dex__media.is-video { display: block; width: 100%; max-width: 640px; min-height: 0; margin-inline: auto; padding: 0; aspect-ratio: 4 / 3; background: #000; cursor: pointer; }
.cx-dex__media.is-video video { display: block; width: 100%; height: 100%; object-fit: fill; }
.cx-dex__media .plyr__poster { background-size: 100% 100%; } /* 재생 전 그림도 영상처럼 4:3 칸에 꽉 (원본 384×224 영상 · gif 는 plyr 기본 contain 이면 위아래가 검게 남았음) */
/* 이어 보기 (character.js data-next): 다음 영상 재생기를 같은 자리에 겹쳐 두고, 안 보이는 쪽은 감춤 (갈아 끼울 때 깜빡이지 않게) */
.cx-dex__media.is-video video.cx-seq { position: absolute; inset: 0; }
.cx-dex__media.is-video video.is-off { visibility: hidden; }
/* 소리 조절 (character.js addVolume): 영상 칸 오른쪽 아래. 재생 중엔 흐리게 있다가 마우스를 올리면 또렷하게 */
.cx-vol { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 2px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; cursor: default; transition: opacity .2s; }
.cx-dex__media.is-playing .cx-vol { opacity: .55; }
.cx-dex__media.is-playing:hover .cx-vol, .cx-vol:focus-within { opacity: 1; }
.cx-vol__btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.cx-vol__btn svg { width: 20px; height: 20px; }
.cx-vol__btn:focus-visible, .cx-vol__bar:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--focus-rgb), .45); }
.cx-vol__bar { width: 88px; height: 4px; margin: 0; border-radius: 2px; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, var(--accent) var(--p, 50%), rgba(255,255,255,.3) var(--p, 50%)); cursor: pointer; }
.cx-vol__bar::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.cx-vol__bar::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.cx-dex__play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 54px; height: 54px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; transition: opacity .2s; }
.cx-dex__play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.cx-dex__media.is-playing .cx-dex__play { opacity: 0; }
.cx-dex__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding: 0 6px; }
/* 콤보 탭에서는 시전 장면 단추를 안 보임 (본문 HTML 은 DB 그대로, 마법 탭 단추는 그대로) */
#bxt-p-combos [data-spell-anim] { display: none; }
.cx-dex__title { flex: 1; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--dnd-text); }
.cx-dex__tag { color: var(--dnd-gold-hi); font: 600 11.5px/1.4 Georgia, serif; letter-spacing: .14em; }
.cx-dex__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 0 6px; }
.cx-dex__chain .st { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(90,62,54,.8); border-radius: 4px; background: rgba(0,0,0,.22); font-size: 13.5px; }
.cx-dex__chain .ar { color: var(--dnd-gold); font-weight: 700; }
.cx-dex__vtabs { display: flex; gap: 4px; margin: 10px 6px 0; }
.cx-dex__vtabs button { padding: 5px 10px; border: 1px solid var(--dnd-line); border-radius: 3px; background: none; color: var(--dnd-muted); font: 13px var(--dnd-font); cursor: pointer; }
.cx-dex__vtabs button[aria-pressed="true"] { border-color: var(--dnd-gold); background: rgba(201,162,74,.08); color: var(--dnd-text); }
.cx-dex__body { margin-top: 10px; padding: 0 6px; font-size: 14px; line-height: 1.7; color: #dccdb6; }
.cx-dex__body p { margin: 0 0 6px; }
.cx-dex__body .gd-combo__who { margin-top: 10px; }
.cx-dex__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 0 6px 4px; }
.cx-dex__item > .cx-more { margin: 14px 6px 4px; }
.cx-more { border: 1px solid var(--dnd-line); border-radius: 6px; background: rgba(0,0,0,.18); }
.cx-more > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 11px 14px; color: var(--dnd-text); font-size: 13.5px; list-style: none; cursor: pointer; }
.cx-more > summary::-webkit-details-marker { display: none; }
.cx-more > summary::before { content: '+'; width: 10px; color: var(--dnd-gold-hi); font-weight: 700; }
.cx-more[open] > summary::before { content: '−'; }
.cx-more > summary small { color: var(--dnd-muted); font-size: 12px; }
.cx-more__body { padding: 0 12px 12px; }
.cx-more__lead { margin: 12px 0 0; color: var(--dnd-muted); font-size: 13px; line-height: 1.7; }
.cx-sheet-top, .cx-dim, .cx-mnav { display: none; } /* 폰 아래 창의 손잡이 · 닫기 · 어둡게 · 넘김 막대 (넓은 화면엔 없음) */
@media (max-width: 768px) {
  /* 폰: 화면에는 목록만, 줄을 누르면 그림 · 설명 칸이 아래에서 올라오는 창으로 (character.js openSheet, 마법 도감 .sp-stage 와 같은 모양)
     예전엔 그림 → 설명 → 목록 순서로 쌓여서, 목록에서 고르면 위로 올라가 보고 다시 내려와 골라야 했음 */
  .cx-dex__grid { grid-template-columns: minmax(0, 1fr); }
  .cx-dex__view { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: var(--z-sheet); max-height: calc(100svh - 48px); overflow-y: auto; overscroll-behavior: contain;
    padding: 0 12px 84px; background: var(--bg); border: 0; border-top: 1px solid var(--line-strong); border-radius: 18px 18px 0 0; box-shadow: 0 -24px 60px rgba(0,0,0,.75);
    transform: translateY(105%); visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s; }
  .cx-dex.is-sheet .cx-dex__view { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
  .cx-sheet-top { position: sticky; top: 0; z-index: 3; display: flex; justify-content: center; align-items: center; height: 40px; margin: 0 -12px; background: var(--bg); }
  .cx-sheet-top::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); }
  .cx-sheet-x { position: absolute; right: 10px; top: 5px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--text-strong); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
  .cx-dim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .cx-dex.is-sheet .cx-dim { opacity: 1; pointer-events: auto; }
  html.cx-lock { overflow: hidden; }
  /* 아래 막대(이전 · 지금 · 다음 · 목록으로): 창이 열렸을 때만 */
  .cx-dex.is-sheet .cx-mnav { position: fixed; left: 12px; right: 12px; z-index: calc(var(--z-sheet) + 1); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; align-items: center; gap: 4px; padding: 4px; background: rgba(var(--bg-rgb), .94); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.9); }
  .cx-mnav button { display: grid; place-items: center; height: 44px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); background: var(--surface); border: 0; border-radius: 10px; cursor: pointer; }
  .cx-mnav .cur { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 0 6px; }
  .cx-mnav .cur b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--dnd-gold-hi); }
  .cx-mnav .cur small { font-size: var(--fs-2xs); color: var(--muted); }
  .cx-mnav .list { padding: 0 12px; color: var(--bg); background: var(--dnd-gold-hi); }
  .cx-dex__media { min-height: 150px; }
  /* 폭 넓은 기술 그림은 화면에 맞춰 줄이지 않고 원래 크기로, 옆으로 밀어서 봄 */
  .cx-dex__media:not(.is-video) { flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; overscroll-behavior-x: contain; }
  .cx-dex__media:not(.is-video) img { max-width: none; }
}
/* 마법 탭 시전 장면 창 (character.js): TV 는 spell-tv.css .sp-tv 그대로, 1P · 2P 고르기는 장면 탭 단추 모양 */
.cx-anim__players { margin: 0 0 var(--sp-3); }

/* 개요: 1P/2P 컷인(원본 크기) 옆 빈자리에 능력치 */
.cx-pro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 28px; align-items: start; }
.cx-pro .gd-stats { grid-template-columns: repeat(3, 1fr); }
.cx-pro .gd-stat { padding: 18px 10px 16px; }
.cx-pro .gd-stat:nth-child(3n) { border-right: 0; }
.cx-pro .gd-stat:nth-child(-n+3) { border-bottom: 1px solid rgba(90,62,54,.55); }
.cx-pro .gd-stats__side { grid-column: 1 / -1; grid-auto-flow: column; justify-content: center; gap: 28px; padding: 14px 18px; border-top: 1px solid rgba(90,62,54,.55); }
@media (max-width: 1024px) { .cx-pro { grid-template-columns: minmax(0, 1fr); } }
/* 개요 › 한눈에 보기: 왼쪽 핵심 공략과 오른쪽 표 높이 맞춤 */
.cx-body .bxt-facts { align-self: stretch; grid-auto-rows: 1fr; }

/* 추천 무기 */
.cx-picks { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; }
.cx-pick { position: relative; padding: 22px 22px 20px; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: var(--surface-solid); }
.cx-pick.is-main { border-color: rgba(var(--cc-rgb), .5); background: linear-gradient(160deg, rgba(var(--cc-rgb), .12), rgba(var(--cc-rgb), .02) 60%), var(--surface-solid); }
.cx-pick .role { display: inline-block; font-size: 12px; font-weight: 700; color: var(--muted); }
.cx-pick.is-main .role { color: var(--cc); }
.cx-pick.is-no .role { color: var(--boss-hidden-soft, #FFB0B0); }
.cx-pick h3 { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font-size: 21px; font-weight: 900; letter-spacing: -.03em; color: var(--text-strong); }
.cx-pick h3 .gi { font-size: 22px; color: var(--cc); }
.cx-pick p { margin: 0 0 8px; font-size: 14px; color: var(--text-sub); line-height: 1.65; }
.cx-pick .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cx-pick img.px { image-rendering: pixelated; height: 22px; width: auto; }
.cx-throw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cx-throw > div { padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.cx-throw b { display: flex; align-items: center; gap: 8px; color: var(--text-strong); font-size: 15px; margin-bottom: 6px; }
.cx-throw b img { image-rendering: pixelated; height: 18px; width: auto; max-width: 56px; object-fit: contain; flex-shrink: 0; } /* 화살처럼 가로로 아주 긴 그림이 높이에 맞춰 늘어나 제목을 밀어내지 않게 */
.cx-throw b .gi { color: var(--cc); }
.cx-throw p { margin: 0; font-size: 13.5px; color: var(--text-sub); line-height: 1.6; }

/* 갤러리 */
/* 갤러리: 왼쪽 원작 일러스트(330px) + 오른쪽 게임 컷인 두 장(원본 384×224) 위아래. 두 줄 높이가 원작 그림 높이와 맞음 */
.cx-gallery { display: grid; grid-template-columns: 330px 384px; justify-content: center; gap: 14px; }
/* 세로 그림(--a)만 있는 갤러리(클레릭: 원작 · 옛 공략 일러스트)는 두 칸 같은 폭으로. 폰(768 이하)은 아래 한 줄 규칙 */
@media (min-width: 769px) { .cx-gallery:not(:has(> :not(.cx-art--a))) { grid-template-columns: repeat(2, 330px); } }
.cx-art { position: relative; margin: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; background: #f4f2ee; cursor: zoom-in; text-align: left; font: inherit; }
.cx-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cx-art.is-px { background: var(--art-bg-deep); }
.cx-art.is-px img { image-rendering: pixelated; object-fit: contain; object-position: center; }
.cx-art img:is([src*='.png'], [src*='.gif']) { object-fit: contain; object-position: center; }   /* png · gif 그림(옛 공략 일러스트 등)은 자르지 않고 다 보이게 */
.cx-art figcaption, .cx-art .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; background: linear-gradient(transparent, rgba(var(--scrim-rgb), .85)); color: #fff; font-size: 13px; }
.cx-art .cap b { display: block; font-size: 15px; }
.cx-art .cap span { color: rgba(255,255,255,.7); font-size: 12px; }
.cx-art--a { grid-row: span 2; aspect-ratio: 1200 / 1683; }
.cx-art--b { grid-column: span 4; aspect-ratio: 4 / 5; }
.cx-art--c { grid-column: span 3; aspect-ratio: 3 / 5; }
.cx-art--d { aspect-ratio: 384 / 224; }
.cx-gallery-note { margin: 18px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.cx-lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: none; place-items: center; padding: 24px; background: rgba(0,0,0,.86); border: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; }
.cx-lightbox[open] { display: grid; }
.cx-lightbox::backdrop { background: rgba(0,0,0,.6); }
.cx-lightbox img { max-width: min(1100px, 100%); max-height: calc(100vh - 110px); width: auto; height: auto; border-radius: 10px; background: #f4f2ee; }
.cx-lightbox img.is-px { image-rendering: pixelated; background: #000; min-width: min(768px, 100%); }
.cx-lightbox p { margin: 12px 0 0; color: var(--text-sub); font-size: 13.5px; text-align: center; }
.cx-lightbox .dnd-x, .cx-lightbox .x { display: grid; place-items: center; position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(20,20,24,.8); color: #fff; font-size: 20px; cursor: pointer; }

/* gi 아이콘 기본 크기 */
.cx-hub .gi, .cx-body .gi { width: 1em; height: 1em; fill: currentColor; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .cx-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .cx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-tile--xl { grid-row: span 2; }
  .cx-picks { grid-template-columns: 1fr 1fr; }
  .cx-picks .is-main { grid-column: 1 / -1; }
  .cx-throw { grid-template-columns: 1fr 1fr; }
  .cx-moves { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .cx-hero { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .cx-hero__text { order: 2; padding-bottom: var(--sp-8); }
  .cx-stage { order: 1; min-height: 420px; }
  .cx-figure img { height: calc(100% - 88px); } /* 그림이 바닥에서 88px 뜬 만큼 위로 삐져나와 빵조각 줄(홈 › 캐릭터)이 머리를 가렸음 → 칸 안에 들어가게 */
  .cx-ghost { top: 2%; font-size: 19vw; } /* FIGHTER 7글자가 폰 폭 안에 들어가게 */
  .cx-stats { grid-template-columns: repeat(3, 1fr); }
  .cx-stage__bar { flex-direction: column; align-items: stretch; }
  .cx-seg { justify-content: center; }
  .cx-credit { text-align: center; }
  .cx-tiles { grid-auto-rows: 150px; }
  .cx-tile--xl > b { font-size: 24px; }
  .cx-lead2, .cx-duo, .cx-picks, .cx-throw { grid-template-columns: 1fr; }
  .cx-gallery { grid-template-columns: minmax(0, 384px); }
  .cx-art--a { grid-row: auto; max-width: 330px; justify-self: center; width: 100%; }
}
@media (max-width: 480px) {
  .cx-tiles { grid-template-columns: 1fr; }
  .cx-tile--xl, .cx-tile--wide { grid-column: auto; }
  /* 한 줄 칸: 도트 그림은 오른쪽 40% 안에만, 글자(영문 · 제목 · 설명)는 왼쪽 60% 안에만 → 서로 겹치지 않게 */
  .cx-tile:not(.cx-tile--xl)::before { inset: 14px 12px 14px 60%; height: auto; background-position: center; background-size: contain; opacity: .7; }
  .cx-tile:not(.cx-tile--xl) > :not(.gi-wrap):not(.n):not(.thumbs):not(.lvl) { max-width: 60%; }
  .cx-tile:not(.cx-tile--xl) .thumbs { left: 58%; }
  .cx-tile:not(.cx-tile--xl) .thumbs img { max-width: 100%; object-fit: contain; }
  .cx-tile:not(.cx-tile--xl) .gi-wrap { position: static; margin-bottom: auto; }
  /* 큰 칸(커맨드): 그림은 위쪽 오른쪽 작게, 글자는 아래 */
  .cx-tile--xl { padding-top: 158px; } /* 위쪽 그림 자리를 비워 둠 */
  .cx-tile--xl::before { background-position: center top 62px; background-size: auto 84px; } /* 아이콘(왼쪽 위) 아래, 글자 위 */
  .cx-tiles { grid-auto-rows: minmax(140px, auto); } /* 칸 높이를 글자에 맞춰 늘림 (고정 높이면 아이콘이 위로 잘렸음) */
}

/* 빈 영상 칸 (CharacterGuideService.addMediaSlots 가 영상 칸이 없던 항목에 넣어 둔 것): 사이트에서는 안 보이고 (예전과 같음)
   관리자 편집 모드에서만 점선 칸으로 보여 눌러서 영상을 넣음. 영상을 넣으면 보통 영상 칸이 됨 */
.cx-dex__media.is-video:has(> video:not([src]), > video[src=""]) { display: none; }
.ge-on .cx-dex__media.is-video:has(> video:not([src]), > video[src=""]) { display: grid; place-items: center; aspect-ratio: 16 / 5; cursor: pointer; background: repeating-linear-gradient(135deg, #15171c 0 12px, #191b21 12px 24px); outline: 2px dashed #2dd4bf; outline-offset: -6px; }
.ge-on .cx-dex__media.is-video:has(> video:not([src]), > video[src=""])::after { content: "영상 없음 · 위 [영상 바꾸기]를 눌러 넣기"; color: #2dd4bf; font-size: 13px; }
.ge-on .cx-dex__media.is-video:has(> video:not([src]), > video[src=""]) .cx-dex__play,
.ge-on .cx-dex__media.is-video > video:not([src]), .ge-on .cx-dex__media.is-video > video[src=""] { display: none; }

/* 기술 성질 한눈표 ✓ → 체크 아이콘 (character.js 가 글자를 빼고 붙임, Lucide check) */
.gd-yes--ck { display: inline-flex; align-items: center; gap: 3px; }
.gd-yes--ck::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url(/img/icons-svg/lucide/check.svg) center / contain no-repeat; mask: url(/img/icons-svg/lucide/check.svg) center / contain no-repeat; }
/* 쓸모 별: 보라 ★ 글자 → 금빛 별 아이콘 3칸 (빈 칸은 흐리게, character.js) */
.gd-sts { display: inline-flex; gap: 2px; vertical-align: middle; }
.gd-st { width: 14px; height: 14px; background: var(--hof-gold); -webkit-mask: url(/img/icons-svg/game/round-star.svg) center / contain no-repeat; mask: url(/img/icons-svg/game/round-star.svg) center / contain no-repeat; }
.gd-st.off { background: rgba(255,255,255,.14); }
/* 기술 그림 위 표시 (character.js MV_MARKS): 그림 속 글씨 · 빨간 화살표 대신 사이트 글씨 · 금빛 아이콘. 아래 28px 줄에 1타 · 2타 / 설명 · 이동 거리 */
.mv-fig { position: relative; display: inline-block; max-width: 100%; padding-bottom: 30px; vertical-align: top; }
.mv-fig img { display: block; max-width: 100%; }
.mv-hit, .mv-note, .mv-span { position: absolute; bottom: 4px; transform: translateX(-50%); white-space: nowrap; }
.mv-hit { padding: 1px 9px; border: 1px solid color-mix(in srgb, var(--hof-gold) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--hof-gold) 12%, rgba(0,0,0,.35)); color: var(--hof-gold-light); font: 700 12px/18px var(--font); }
.mv-note { padding: 1px 8px; border-radius: 6px; background: rgba(0,0,0,.45); font-size: 12px; line-height: 18px; color: var(--hof-gold-light); }
.mv-note.is-start { transform: translateX(-10px); }
/* 주석 화살표: 아래 글씨 줄에서 맞는 자리(위)까지 금빛 화살표. 화살표들은 같은 줄(글씨 바로 위)에서 시작해 나란히 보임 */
.mv-call { position: absolute; bottom: 26px; width: 2px; margin-left: -1px; border-radius: 1px; background: linear-gradient(0deg, color-mix(in srgb, var(--hof-gold) 35%, transparent), var(--hof-gold)); }
.mv-call::before { content: ""; position: absolute; left: 50%; top: -8px; border: 5px solid transparent; border-bottom: 8px solid var(--hof-gold); border-top: 0; transform: translateX(-50%); filter: drop-shadow(0 0 3px rgba(0,0,0,.8)); }
/* 이동 거리: 오른쪽 점에서 왼쪽 화살촉까지 금선, 가운데 위에 글씨 */
.mv-span { transform: none; bottom: 16px; height: 2px; background: var(--hof-gold); }
.mv-fig:has(.mv-span) { padding-bottom: 44px; }   /* 이동 거리 줄: 글씨 · 화살표 사이 여백 */
/* 버튼 한 번에 여러 히트(이도류 A 공격): 히트 칩 줄 아래에 두 히트를 묶는 ㄷ자 금선 + '1타' */
.mv-fig.has-press { padding-bottom: 56px; }
.mv-fig.has-press .mv-hit { bottom: 30px; }
.mv-press { position: absolute; bottom: 20px; height: 7px; border: 1px solid color-mix(in srgb, var(--hof-gold) 55%, transparent); border-top: 0; border-radius: 0 0 4px 4px; }
.mv-press small { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); font: 700 12px/14px var(--font); color: var(--hof-gold-light); white-space: nowrap; }
.mv-span::before { content: ""; position: absolute; left: -2px; top: 50%; border: 5px solid transparent; border-right: 7px solid var(--hof-gold); border-left: 0; transform: translateY(-50%); }
.mv-span::after { content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--hof-gold); transform: translateY(-50%); }
.mv-span small { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 11.5px; color: var(--hof-gold-light); white-space: nowrap; }
/* 오른쪽으로 가는 거리 화살표(점프 · 대쉬 거리 비교): 점이 왼쪽, 화살촉이 오른쪽 */
.mv-span.is-r::before { left: auto; right: -2px; border-right: 0; border-left: 7px solid var(--hof-gold); }
.mv-span.is-r::after { right: auto; left: -3px; }
/* 그림 위에 사이트가 그리는 표시 (character.js MV_MARKS draw · labels): 그림과 같은 크기의 칸에 SVG 를 겹침, 선은 화면 크기와 상관없이 2px */
.mv-pic { position: relative; display: block; }
.mv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mv-svg line, .mv-svg path, .mv-svg rect, .mv-svg ellipse { fill: none; stroke: var(--hof-gold); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); }
.mv-svg marker path { fill: var(--hof-gold); stroke: none; filter: none; }
.mv-svg .is-area { fill: color-mix(in srgb, var(--hof-gold) 12%, transparent); stroke-dasharray: 6 4; }
.mv-svg .is-guide { stroke-dasharray: 4 4; stroke-width: 1.5; }
.mv-svg .is-dim { stroke: rgba(236,237,239,.65); stroke-dasharray: 3 3; }
.mv-lab { position: absolute; padding: 1px 7px; border-radius: 6px; background: rgba(0,0,0,.55); font-size: 11.5px; line-height: 17px; color: var(--hof-gold-light); white-space: nowrap; pointer-events: none; }
.mv-lab.is-c { transform: translateX(-50%); }
.mv-lab.is-r { transform: translateX(-100%); }
/* 발동 막대: 보라(--dnd-gold 가 사이트에선 보라)가 너무 튀어서 차분한 강철 청회색으로 (별점 금빛 · 체크 초록과 구분) */
.gd-spd::before { background: linear-gradient(90deg, #56697a, #8ea3b3); }

/* 기술 목록 묶음별 접기 (여섯 직업 커맨드 · 콤보, character.js is-acc) — 묶음 머리 줄 + 펼친 묶음의 기술만 */
.cx-dex.is-acc .cx-dex__chips { display: none; }
.cx-dex.is-acc .cx-dex__list > li.is-fold { display: none; }
.cx-dex.is-acc .cx-dex__list > li.cx-dex__gh { display: none; }   /* 원래 묶음 머리는 접기 머리 줄이 대신함 */
.cx-acc__h em { margin-right: 8px; color: var(--hof-gold); font: 600 11px/1 var(--font-display); font-style: normal; letter-spacing: .16em; }
.cx-acc__h:not(:first-child) { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--dnd-line); }
.cx-acc__h button { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 5px; background: none; color: var(--dnd-text); font: 700 14px var(--dnd-font); text-align: left; cursor: pointer; }
.cx-acc__h button:hover { background: rgba(255,255,255,.04); }
.cx-acc__h span { flex: 1; }
.cx-acc__h small { min-width: 22px; padding: 1px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: var(--text-sub); font-size: 11.5px; text-align: center; }
.cx-acc__h svg { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
.cx-acc__h.is-open button { color: var(--hof-gold-light); }
.cx-acc__h.is-open small { border-color: color-mix(in srgb, var(--hof-gold) 55%, transparent); color: var(--hof-gold); }
.cx-acc__h.is-open svg { transform: rotate(180deg); color: var(--hof-gold); }
/* 콤보 탭: 보라 · 연보라(--dnd-gold · --dnd-gold-hi 가 사이트에선 보라) 대신 공략실 금빛 톤 — 묶음 머리 · 번호 · 금색 칩 · 고른 줄 테두리 (영상 재생기는 사이트 기본색 그대로) */
#bxt-p-combos { --dnd-gold: var(--hof-gold-deep); --dnd-gold-hi: var(--hof-gold); }
/* 캐릭터 콤보 · 기술 영상 재생기: 보라 대신 보통 영상 재생기처럼 — 조작 줄은 가운데 재생 단추와 같은 반투명 검은 유리, 막대 · 아이콘은 흰색 */
.cx-dex .has-plyr { --plyr-color-main: #fff; --plyr-range-fill-background: #fff; --plyr-video-range-track-background: rgba(255,255,255,.25); --plyr-video-control-color: rgba(255,255,255,.9); --plyr-video-control-background-hover: rgba(255,255,255,.14); --plyr-video-controls-background: rgba(0,0,0,.45); }
.cx-dex .has-plyr .plyr__controls { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid rgba(255,255,255,.08); padding-top: 6px; }
.cx-dex .has-plyr .plyr__control--overlaid { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(4px); }
.cx-dex .has-plyr .plyr__control--overlaid:hover { background: rgba(0,0,0,.72); }
.cx-dex .dv-vol__btn:hover { background: rgba(255,255,255,.14); }
.cx-dex .plyr--full-ui .dv-vol input.dv-vol__bar { color: #fff; }
/* 재생 중: 조작 줄은 거의 안 보이게, 마우스를 올리거나(키보드로 들어가면) 바로 보임. 멈춘 동안은 그대로 보임 */
.cx-dex .has-plyr .plyr--playing .plyr__controls { opacity: .06; transition: opacity .25s ease; }
.cx-dex .has-plyr .plyr--playing:hover .plyr__controls, .cx-dex .has-plyr .plyr--playing .plyr__controls:focus-within { opacity: 1; }
/* 콤보 목록 칩 색 (character.js CHIP_TONES): 뜻마다 다르게 하되 공략실 금빛 · 갈색 톤 안에서 (채도 낮은 흙빛 계열) */
#bxt-p-combos .gd-chip[data-tone] { border: 1px solid transparent; }
#bxt-p-combos .gd-chip[data-tone="inf"] { color: var(--hof-gold-light); background: color-mix(in srgb, var(--hof-gold) 18%, transparent); border-color: color-mix(in srgb, var(--hof-gold) 45%, transparent); }
#bxt-p-combos .gd-chip[data-tone="easy"] { color: #c3cc9c; background: rgba(150,160,100,.14); }
#bxt-p-combos .gd-chip[data-tone="skill"] { color: #ddb07a; background: rgba(190,130,60,.14); }
#bxt-p-combos .gd-chip[data-tone="hard"] { color: #e3a08e; background: rgba(160,70,50,.20); }
#bxt-p-combos .gd-chip[data-tone="weapon"] { color: #cbc2b2; background: rgba(200,190,170,.10); border-color: rgba(200,190,170,.18); }
#bxt-p-combos .gd-chip[data-tone="show"] { color: #d2b0a4; background: rgba(170,120,105,.14); }
/* 콤보 이름: 기술마다 알약 칸 + 옅은 › , 덧말은 흐린 글씨, 칩은 순서 끝에 이어서 (character.js .cx-steps) */
#bxt-p-combos .cx-dex__grid { grid-template-columns: 392px minmax(0, 1fr); }   /* 콤보 순서가 한 줄에 더 들어가게 목록 칸을 조금 넓힘 */
@media (max-width: 768px) { #bxt-p-combos .cx-dex__grid { grid-template-columns: minmax(0, 1fr); } }
.cx-dex__row.has-steps { grid-template-columns: 22px minmax(0, 1fr); align-items: start; padding-top: 8px; padding-bottom: 8px; }
.cx-dex__row.has-steps .cx-dex__no { padding-top: 2px; }
.cx-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.cx-steps__mv { padding: 0 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--text-strong); font-size: 12.5px; line-height: 20px; white-space: nowrap; }
.cx-dex__row[aria-pressed="true"] .cx-steps__mv { border-color: color-mix(in srgb, var(--hof-gold) 40%, transparent); background: color-mix(in srgb, var(--hof-gold) 9%, transparent); }
.cx-steps__etc { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cx-steps__sep { margin: 0 3px; color: color-mix(in srgb, var(--hof-gold) 55%, transparent); font-style: normal; font-size: 11px; }
/* 꼬리표: 순서 위에 한 줄 차지 · 칸 없이 작은 글씨 + 같은 색 점 (커맨드와 헷갈리지 않게) */
#bxt-p-combos .cx-steps .cx-steps__tag { flex-basis: 100%; display: flex; align-items: center; gap: 5px; margin: 0 0 2px; padding: 0; border: 0; background: none; font-size: 11px; line-height: 16px; font-weight: 600; }
#bxt-p-combos .cx-steps .cx-steps__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
#bxt-p-combos .cx-steps .cx-steps__tag:not([data-tone]) { color: var(--muted); }
/* 영상 뒤 은은한 배경 (character.js ambient): 같은 영상을 크게 · 흐리게 아주 옅게 깔고, 양 끝으로 갈수록 칸 바탕색으로 사라지게 (경계선 없이 조명이 번진 것처럼) */
.cx-amb { position: relative; isolation: isolate; }
.cx-amb__v { position: absolute; z-index: -1; left: -6%; right: -6%; top: -10%; width: 112%; height: 120%; object-fit: cover; filter: blur(36px) saturate(1.35) brightness(.8); opacity: .55; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 54% 56% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 54% 56% at 50% 50%, #000 62%, transparent 100%); }
.cx-amb > .cx-dex__media { box-shadow: 0 0 40px -10px rgba(0,0,0,.6); }
/* 데미지 비교 아래 결론 줄: 왼쪽 보라 막대(--dnd-gold 가 사이트에선 보라) → 공략실 금빛 */
.gd-dmg__take { border-left-color: var(--hof-gold); background: color-mix(in srgb, var(--hof-gold) 6%, rgba(0,0,0,.18)); }
/* 타입 선택 카드: 글자 · '많이 고름' 꼬리표 · 고른 카드 테두리가 보라(--dnd-gold) → 공략실 금빛 */
.gd-type__letter { color: var(--hof-gold); }
.gd-type.is-pick { border-color: color-mix(in srgb, var(--hof-gold) 70%, transparent); }
.gd-type.is-pick::after { background: var(--hof-gold); }
/* 시작 장비 칸: 큰 검은 칸에 작은 그림만 있어 비어 보임 → 칸 없이 '그림 + 이름 · 개수' 알약을 한 줄로 (이름 글씨는 character.js). '고정' 칸은 점선 + 이름 옆 꼬리표, 빈 칸은 옅은 테 */
.gd-inv { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-inv > div { aspect-ratio: auto; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 14px 5px 6px; border: 1px solid color-mix(in srgb, var(--hof-gold) 20%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--hof-gold) 5%, transparent); }
.gd-inv img { width: 64px; max-width: none; image-rendering: pixelated; }
.gd-inv__cap { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; white-space: nowrap; }
.gd-inv .gd-inv__cap em { position: static; color: var(--hof-gold); font: 700 13px var(--dnd-font); text-shadow: none; }
.gd-inv__cap i { padding: 0 7px; border: 1px solid color-mix(in srgb, var(--hof-gold) 40%, transparent); border-radius: 999px; font: 600 11px/17px var(--dnd-font); font-style: normal; color: var(--hof-gold); }
.gd-inv .lock { border-style: dashed; border-color: color-mix(in srgb, var(--hof-gold) 40%, transparent); }   /* 머리말 '점선 칸은 팔거나 버릴 수 없는 칸' 과 맞춤 */
.gd-inv .lock::after { content: none; }
.gd-inv .empty { opacity: 1; padding: 5px 14px; border-color: rgba(255,255,255,.08); background: transparent; }
.gd-inv .empty .gd-inv__cap { color: var(--dnd-muted); font-size: 13px; }
@media (max-width: 600px) { .gd-inv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-inv__cap { white-space: normal; flex-wrap: wrap; min-width: 0; } .gd-inv > div { padding: 4px 10px 4px 4px; gap: 8px; } .gd-inv img { width: 48px; } .gd-inv__cap { font-size: 13.5px; gap: 5px; } }
/* 성장 탭: 보라(--dnd-gold · --accent 가 사이트에선 보라) → 톤다운된 한 가지 색(--grow). 금색 원(무기 레벨 상승)은 본문이 '금색 원'이라 그대로 */
#bxt-p-growth { --grow: #93a58c; --grow-rgb: 147,165,140; }
#bxt-p-growth .gd-track__rail::before { background: linear-gradient(90deg, var(--dnd-line), rgba(var(--grow-rgb), .7) 50%, var(--dnd-line)); }
#bxt-p-growth .gd-track__col .gd-track__meta { background: linear-gradient(var(--grow), var(--grow)) left bottom / calc(var(--hp, 0) * 100%) 3px no-repeat, linear-gradient(var(--dnd-line), var(--dnd-line)) left bottom / 100% 3px no-repeat; }
#bxt-p-growth .gd-track__meta .s { color: var(--grow); }
#bxt-p-growth .gd-supply__it.is-tier { border-color: rgba(var(--grow-rgb), .45); color: var(--grow); }
#bxt-p-growth .gd-supply > li.gd-supply__swap { background: rgba(var(--grow-rgb), .1); }
#bxt-p-growth .gd-supply > li.gd-supply__swap::before { border-color: var(--grow); background: var(--grow); }
#bxt-p-growth .gd-supply__swap b { color: var(--grow); }
#bxt-p-growth .gd-supply__legend i { border-color: rgba(var(--grow-rgb), .45); }
@media (max-width: 768px) { #bxt-p-growth .gd-track__rail::before { background: linear-gradient(180deg, var(--dnd-line), rgba(var(--grow-rgb), .7) 50%, var(--dnd-line)); } }
/* 레벨 배지(17 ➺ 16)의 ➺ (post-cmd.js 가 → 를 바꾼 .arr-then): 숫자 사이라 조금 크게 · 옅은 회색 */
.gd-delta .arr-then { flex: none; width: 24px !important; height: 16px !important; margin: 0 2px !important; fill: #b3b5bb !important; opacity: 1 !important; }
/* 개요 '능력치' 막대: 보라(--dnd-gold) → 머리말 능력치와 같게 (보통 옅은 흰빛 · 가장 높은 것 금빛) */
.gd-stat i::before { background: rgba(255,255,255,.55); }
.gd-stat.hi i::before { background: var(--hof-gold); }
.gd-stat.hi b { color: var(--hof-gold); }
/* 강점 · 약점 · 특성 머리 표시: + − ! 글자 대신 게임 아이콘(game-icons.net)을 흙빛 테 메달 안에 (본문 DB 그대로, CSS 로만). 색: 강점 이끼빛 · 약점 흙빛 붉은색 · 특성 금빛 */
.gd-traits h4 { gap: 10px; font-size: 15px; }
.gd-traits h4 span { --k: var(--hof-gold); position: relative; width: 30px; height: 30px; font-size: 0; background: color-mix(in srgb, var(--k) 10%, #141416) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--k) 45%, transparent); }
.gd-traits h4 span::after { content: ""; position: absolute; inset: 6px; background: var(--k); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.gd-traits .pro h4 span { --k: #93a58c; }
.gd-traits .con h4 span { --k: #c98b8b; }
.gd-traits .pro h4 span::after { -webkit-mask-image: url(/img/icons-svg/game/biceps.svg); mask-image: url(/img/icons-svg/game/biceps.svg); }
.gd-traits .con h4 span::after { -webkit-mask-image: url(/img/icons-svg/game/cracked-shield.svg); mask-image: url(/img/icons-svg/game/cracked-shield.svg); }
.gd-traits .etc h4 span::after { -webkit-mask-image: url(/img/icons-svg/game/rune-stone.svg); mask-image: url(/img/icons-svg/game/rune-stone.svg); }
/* 성장 '주문 횟수' 표: 점 → 숫자 + 늘어난 칸 '+1' (character.js), 줄 머리 레벨 번호는 주문책 아이콘 메달, 새로 배우는 주문 줄은 보라 → 직업 톤 */
.gd-slots td { vertical-align: middle; }
.gd-slot { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; color: var(--dnd-text, #ecedef); }
.gd-slot b { font: 700 17px/1 var(--dnd-font); font-variant-numeric: tabular-nums; }
.gd-slot small { font-size: 11.5px; color: var(--dnd-muted); }
.gd-slot.up b { color: var(--hof-gold); }
.gd-slot em { align-self: center; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--hof-gold) 16%, transparent); font: 700 10.5px/15px var(--dnd-font); font-style: normal; color: var(--hof-gold); }
.gd-slots tbody th b { position: relative; width: 30px; height: 30px; margin-right: 8px; border-radius: 8px; border-color: color-mix(in srgb, var(--hof-gold) 40%, transparent); background: color-mix(in srgb, var(--hof-gold) 8%, #141416); color: var(--hof-gold-light); font-size: 12px; }
.gd-slots tbody th b::before { content: ""; position: absolute; inset: 3px; background: color-mix(in srgb, var(--hof-gold) 30%, transparent); -webkit-mask: url(/img/icons-svg/game/spell-book.svg) center / contain no-repeat; mask: url(/img/icons-svg/game/spell-book.svg) center / contain no-repeat; }
.gd-slots tbody th b { isolation: isolate; text-shadow: 0 1px 2px #000; }
.gd-slots td.learn { color: var(--hof-gold-light); }
.gd-slots thead th { min-width: 76px; word-break: keep-all; }   /* 'Lv14' 가 Lv1 / 4 로 갈라지지 않게 */
/* 다섯 직업 콤보 칸: 그림을 커맨드 탭 '대쉬 공격' 동작으로 (파이터 콤보 칸처럼 칸 오른쪽에 넓게, 원본보다 줄여 보이므로 부드럽게) */
.char-cleric .cx-tiles .cx-tile[data-goto="combos"] { --tile-art: url("/img/characters/cleric/nk2/ctrl_04.png") !important; }
.char-dwarf  .cx-tiles .cx-tile[data-goto="combos"] { --tile-art: url("/img/characters/dwarf/nk2/ctrl_06.png") !important; }
.char-elf    .cx-tiles .cx-tile[data-goto="combos"] { --tile-art: url("/img/characters/elf/nk2/ctrl_03.png") !important; }
.char-muser  .cx-tiles .cx-tile[data-goto="combos"] { --tile-art: url("/img/characters/muser/nk2/ctrl_03.png") !important; }
.char-thief  .cx-tiles .cx-tile[data-goto="combos"] { --tile-art: url("/img/characters/thief/nk2/ctrl_04.png") !important; }
/* 크기: contain 이면 원본 높이가 낮은 그림(엘프 78px)일수록 크게 불어나 캐릭터 크기가 제각각 → 원본 픽셀의 같은 배율로 (PC 1.05배 · 폰 0.5배), --ih = 원본 높이 */
.char-cleric { --combo-ih: 106; } .char-dwarf { --combo-ih: 85; } .char-elf { --combo-ih: 78; } .char-muser { --combo-ih: 113; } .char-thief { --combo-ih: 95; }
:is(.char-cleric, .char-dwarf, .char-elf, .char-muser, .char-thief) .cx-tiles .cx-tile[data-goto="combos"]::before { inset: 6px 12px 22px 28%; height: auto; background-position: right center; background-size: auto calc(var(--combo-ih) * 1.05px); image-rendering: auto; }
@media (max-width: 768px) { :is(.char-cleric, .char-dwarf, .char-elf, .char-muser, .char-thief) .cx-tiles .cx-tile[data-goto="combos"]::before { background-size: auto calc(var(--combo-ih) * .5px); } }
/* 장비 칸 무기 그림도 같은 배율(원본의 2배)로: 높이 36px 고정이면 원본이 큰 드워프 도끼(34px)는 거의 그대로라 혼자 작아 보임. --gear-ih = 원본 높이 */
.char-fighter { --gear-ih: 18; } .char-cleric { --gear-ih: 25; } .char-dwarf { --gear-ih: 34; } .char-elf { --gear-ih: 19; } .char-muser { --gear-ih: 16; } .char-thief { --gear-ih: 18; }
.cx-tiles .cx-tile[data-goto="gear"]::before { background-size: auto calc(var(--gear-ih, 18) * 2px); }