/* ==========================================================================
   보스 도감 (목록 + 상세)
   - 상세의 새 디자인 본문(boss-pages/*.html)과 요약본 모두 .bx-doc 안에서 그림
   - 시안의 크림슨 빨강 포인트는 사이트 보라(--primary / --accent / --accent-grad)로 바꿈
   - 시안 공용 클래스(.g .pill .hrow .btn2 ...)는 .bx-doc 안에서만 적용
   ========================================================================== */

/* ---------- 목록 ---------- */
.boss-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-6); flex-wrap: wrap; }
.boss-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 1024px) { .boss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .boss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
@media (max-width: 480px)  { .boss-grid { grid-template-columns: minmax(0, 1fr); } }

.boss-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--glass-border); background: var(--surface-solid);
  color: var(--text); text-decoration: none;
}
.boss-card:hover { color: var(--text); }
.boss-card.fx:hover, .boss-card.fx:focus-visible { box-shadow: 0 24px 40px -20px rgba(0,0,0,.9), 0 0 0 1px var(--primary); }
.boss-card--pending { opacity: .82; }
.boss-card--pending:hover { opacity: 1; }
.boss-card__img { width: 100%; aspect-ratio: 350 / 130; object-fit: cover; display: block; background: var(--art-bg-deep); }
.boss-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.boss-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.boss-card__name { font-size: 16px; font-weight: 700; color: var(--text-strong); min-width: 0; }
.boss-card__en { font-family: var(--font-display); font-size: 12px; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
.boss-card__sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.boss-card__stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--text-sub); }
.boss-card__stats b { color: var(--text-strong); }

.boss-status { flex-shrink: 0; display: inline-block; padding: 2px 9px; font-size: 11px; line-height: 1.5; border-radius: 999px; white-space: nowrap;
  color: var(--accent); border: 1px solid var(--accent-line); background: rgba(139,92,246,.1); }
.boss-status--done { color: #8BE28B; border-color: rgba(139,226,139,.4); background: rgba(139,226,139,.08); }

/* ==========================================================================
   상세 (.bx-doc)
   ========================================================================== */
.bx-doc { min-width: 0; }
.bx-doc img { height: auto; }

/* 시안 공용 클래스 (scoped) */
.bx-doc .g { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 20px 40px -24px rgba(0,0,0,.8); }
.bx-doc .pad { padding: var(--sp-6); }
.bx-doc .eyebrow { font-family: var(--font-display); font-size: 13px; letter-spacing: .2em; color: var(--accent); }
.bx-doc .h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.04em; color: var(--text-strong); }
.bx-doc .h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--text-strong); }
.bx-doc .muted { color: var(--muted); }
.bx-doc .hrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bx-doc .pill { display: inline-block; min-height: 0; padding: 3px 10px; font-size: 12px; line-height: 1.5; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 999px; background: rgba(139,92,246,.1); font-weight: 400; }
.bx-doc .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 14px; color: var(--text-sub); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.bx-doc .chip[aria-selected="true"], .bx-doc .chip[aria-pressed="true"] { color: #fff; background: var(--accent-grad); border-color: rgba(255,255,255,.2); font-weight: 600; }
.bx-doc .btn, .bx-doc .btn2 { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; font-size: 14px; border-radius: 8px; text-decoration: none; cursor: pointer; }
.bx-doc .btn { font-weight: 600; color: #fff; background: var(--accent-grad); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 24px -12px rgba(139,92,246,.9), inset 0 1px 0 rgba(255,255,255,.25); }
.bx-doc .btn2 { color: var(--text); background: transparent; border: 1px solid var(--line-strong); }
.bx-doc .btn2:hover { background: rgba(255,255,255,.06); border-color: var(--accent-line); color: var(--text-strong); }
.bx-doc .tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.bx-doc .tbl th { padding: 12px 14px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.bx-doc .tbl td { padding: 14px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--text); }
.bx-doc .tbl tr:hover td { background: rgba(255,255,255,.03); }

/* ---------- 히어로 ---------- */
.bx-hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  /* 체력바 카드는 오른쪽에 두면 보스 그림을 가려서, 왼쪽 글 아래(수치 밑)에 둠 */
  align-items: start; padding: var(--sp-6) 0 34px;
}
.bx-hero > .bx-portrait { margin-top: var(--sp-6); max-width: 420px; width: 100%; }
.bx-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--text-sub); }
.bx-eyebrow .loc { padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bx-back { color: var(--text-sub); text-decoration: none; }
.bx-back:hover { color: var(--text-strong); }
.bx-name {
  margin: 14px 0 4px; font-family: var(--font-display); font-size: clamp(38px, 7.2vw, 84px); font-weight: 700;
  line-height: .95; letter-spacing: .02em; color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,.7); overflow-wrap: anywhere;
}
.bx-ko { font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; letter-spacing: -.03em; color: var(--text-strong); }
.bx-kpis { display: flex; flex-wrap: wrap; gap: var(--sp-5) 40px; margin-top: 30px; }
.bx-kpi span { display: block; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.bx-kpi b { display: block; margin-top: 4px; font-size: clamp(24px, 3vw, 34px); font-weight: 900; letter-spacing: -.03em; color: #fff; }
.bx-kpi b small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.bx-notice { margin-top: var(--sp-6); padding: 10px 14px; font-size: 13px; color: var(--text-sub); border-left: 3px solid var(--primary); background: rgba(139,92,246,.08); border-radius: 0 8px 8px 0; max-width: 64ch; }

.bx-portrait {
  padding: 14px 16px; border-radius: var(--radius-lg); background: rgba(10,10,14,.5);
  border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width: 0;
}
/* 보스 그림은 배경 전체에 한 번만 깔기 때문에 (시안처럼) 체력바 카드에서는 그림을 빼고 막대만 보여줌 */
.bx-portrait img { display: none; }
.bx-portrait .hp { margin-top: 0; display: grid; gap: 6px; }
.bx-hprow { display: grid; grid-template-columns: 34px minmax(0, 1fr) 92px; gap: 8px; align-items: center; font-size: 12px; }
.bx-hprow b { color: var(--text-strong); }
.bx-hprow__val { text-align: right; white-space: nowrap; }
.bx-hprow__pct { color: var(--muted); }
/* 원래 게임의 보스 HP 바 색: 남은 HP 노랑 · 빈 칸 빨강, 아래 한 줄은 어두운 그림자 (게임 화면에서 뽑은 색) */
.hpbar { height: 8px; background: #cc0000; box-shadow: inset 0 -2px #550000; overflow: hidden; }
.hpbar i { display: block; height: 100%; background: #ffff00; box-shadow: inset 0 -2px #777700; }

/* ---------- 목차 (헤더 아래에 붙음) ---------- */
/* 평소엔 띠 없이 본문 폭에 맞춘 탭 + 아래 선만. 스크롤해서 헤더 밑에 붙었을 때만(.is-stuck, dnd2.js) 배경을 깔아 글씨가 읽히게 */
.bx-nav {
  position: sticky; top: var(--header-h); z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: background .2s ease, box-shadow .2s ease;
}
.bx-nav.is-stuck {
  background: rgba(var(--bg-rgb), .9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 12px 24px -16px rgba(0,0,0,.8);
}
.bx-nav > div { display: flex; gap: 4px; height: 56px; align-items: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bx-nav > div::-webkit-scrollbar { display: none; }
.bx-nav a { flex-shrink: 0; padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: none; white-space: nowrap; }
.bx-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.bx-nav a.is-active { color: #fff; }

/* 넓은 화면: 위키처럼 목차를 본문 오른쪽 세로 칸에 두고 스크롤을 따라오게
   .bx-doc 를 [본문 | 목차] 두 칸으로 나누고, 히어로만 두 칸 전체를 씀
   목차는 2번째 줄부터 아래로 길게 차지해야 끝까지 따라오므로 span 을 넉넉히 줌 */
@media (min-width: 1101px) {
  .bx-doc { display: grid; grid-template-columns: minmax(0, 1fr) 210px; column-gap: 48px; align-items: start; }
  .bx-doc > * { grid-column: 1; }
  .bx-doc > .bx-hero { grid-column: 1 / -1; }
  .bx-doc > .bx-nav {
    grid-column: 2; grid-row: 2 / span 80; align-self: start;
    top: calc(var(--header-h) + 24px); margin-top: 56px; padding: 14px 10px 12px;
    border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg);
    background: rgba(var(--bg-rgb), .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: none;
  }
  .bx-doc > .bx-nav::before { content: "목차"; display: block; padding: 0 10px 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--accent); }
  .bx-doc > .bx-nav > div {
    flex-direction: column; align-items: stretch; gap: 2px; height: auto;
    max-height: calc(100vh - var(--header-h) - 110px); overflow-x: hidden; overflow-y: auto;
  }
  .bx-doc > .bx-nav a {
    white-space: normal; padding: 7px 10px; font-size: 13px; font-weight: 600; line-height: 1.45; text-shadow: none;
    border-left: 2px solid transparent; border-radius: 0 8px 8px 0;
  }
  .bx-doc > .bx-nav a.is-active { color: #fff; border-left-color: var(--primary); background: rgba(139,92,246,.14); }
  .bx-doc .bx-sec { scroll-margin-top: calc(var(--header-h) + 24px); }
}

/* ---------- 요약 카드 ---------- */
.bx-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 8px; }
.bx-sum .g { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bx-sum .k { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--accent); }
.bx-sum b { font-size: 18px; line-height: 1.35; color: var(--text-strong); }
.bx-sum p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (max-width: 768px) { .bx-sum { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 섹션 ---------- */
.bx-sec { padding: 56px 0 8px; scroll-margin-top: calc(var(--header-h) + 64px); min-width: 0; }
.bx-sec > header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: 22px; }
.bx-sec > header .en { font-family: var(--font-display); font-size: 13px; letter-spacing: .24em; color: var(--accent); }
.bx-sec > header h2 { margin: 6px 0 0; font-size: clamp(24px, 3.2vw, 34px); font-weight: 900; letter-spacing: -.04em; }
.bx-sec .rich { max-width: 760px; font-size: 16px; }
.bx-footnote { margin-top: 14px; font-size: 12px; color: var(--muted); }
@media (max-width: 768px) { .bx-sec { padding-top: 40px; } }

/* ---------- 본문 블록 ---------- */
.bx-doc .rich { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.85; color: #D6D3E2; word-break: keep-all; max-width: 860px; min-width: 0; }
.bx-doc .rich p { margin: 0; }
.bx-doc .rich p.note { font-size: 13px; color: var(--muted); padding: 10px 14px; border-left: 3px solid var(--primary); background: rgba(255,255,255,.03); border-radius: 0 8px 8px 0; }
.bx-doc .em { color: #FFD7A8; font-weight: 600; }
.bx-doc .hl { color: var(--accent); font-weight: 700; }
.bx-doc .p1 { color: #6FB7FF; } .bx-doc .p2 { color: #FF7B7B; } .bx-doc .p3 { color: #8BE28B; } .bx-doc .p4 { color: #FFD166; }
.bx-doc .rich img { max-width: 100%; height: auto; border-radius: 10px; }
.bx-doc .rich img.ico, .bx-doc img.ico { display: inline-block; vertical-align: middle; margin: 0 2px; border-radius: 0; image-rendering: pixelated; }
.bx-doc .rich figure { margin: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 100%; }
.bx-doc .rich figure img { border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 30px -18px rgba(0,0,0,.9); image-rendering: pixelated; }
.bx-doc .rich figcaption { font-size: 13px; color: var(--muted); }
.bx-doc .rich h3.sub { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: #fff; }
.bx-doc .rich h3.sub::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; background: var(--primary); transform: rotate(45deg); }
.bx-doc .rich h4 { margin: 6px 0 0; font-size: 14px; font-weight: 800; color: #FFD7A8; }

.bx-doc .itemrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.bx-doc .itemrow .lab { min-width: 84px; font-size: 13px; font-weight: 700; color: var(--muted); }
.bx-doc .itemrow .icons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }

.bx-doc .media-row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.bx-doc .media-row .m img { width: 100%; border: 1px solid rgba(255,255,255,.1); image-rendering: pixelated; }
@media (max-width: 640px) { .bx-doc .media-row { grid-template-columns: minmax(0, 1fr); } }

.bx-doc .steps { list-style: none; margin: 0; padding: 8px 0 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.bx-doc .steps li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.bx-doc .steps li img { width: 100%; border-radius: 8px; image-rendering: pixelated; }
.bx-doc .steps .n { position: absolute; top: -8px; left: -8px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #fff; background: var(--accent-grad); box-shadow: 0 6px 14px -6px rgba(139,92,246,.9); }
.bx-doc .steps .cap { font-size: 13px; line-height: 1.6; }
.bx-doc .yn { display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 12px; color: #0E0E13; background: #FFD166; }

.bx-doc .hpgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); }
.bx-doc .hpgrid div { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.bx-doc .hpgrid img { border-radius: 0; width: 100%; image-rendering: pixelated; }

/* 패턴 카드 (비홀더) */
.bx-doc .pcard { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; padding: 18px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.09); }
.bx-doc .pcard.danger { border-color: rgba(139,92,246,.55); box-shadow: 0 0 0 1px rgba(139,92,246,.2), 0 18px 40px -24px rgba(139,92,246,.8); }
.bx-doc .pcard .pm { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bx-doc .pcard .pm img { width: 100%; border: 1px solid rgba(255,255,255,.1); image-rendering: pixelated; }
.bx-doc .pcard .noimg { height: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(0,0,0,.25); font-size: 12px; color: #77758A; }
.bx-doc .pcard .pb { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bx-doc .pcard .ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bx-doc .pcard .ph h3 { margin: 0; font-size: 18px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.bx-doc .pcard .ph > div { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) { .bx-doc .pcard { grid-template-columns: minmax(0, 1fr); } }
.bx-doc .dmg { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.bx-doc .dmg.f { color: #F0C7FF; background: rgba(192,38,211,.14); border: 1px solid rgba(192,38,211,.4); }
.bx-doc .dmg.m { color: #A9D2FF; background: rgba(90,160,255,.14); border: 1px solid rgba(90,160,255,.35); }
.bx-doc .dmg.k { color: #fff; background: var(--accent-grad); }

/* 패턴 카드 그리드 (레드 드래곤·신) */
.bx-doc .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.bx-doc .gcard { display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.09); }
.bx-doc .gcard .gm { position: relative; aspect-ratio: 4 / 3; /* 바탕 = 누끼 그림 칸 (dnd2.css .art-cut) */ display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bx-doc .gcard .gm img { width: 100%; height: 100%; object-fit: contain; padding: 10px; image-rendering: pixelated; border-radius: 0; border: 0; }
.bx-doc .gcard .gm .tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; color: #fff; background: var(--accent-grad); }
.bx-doc .gcard .noimg { color: #77758A; font-size: 12px; }
.bx-doc .gcard .gb { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.75; color: #CFCCDB; min-width: 0; }
.bx-doc .gcard h3 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.bx-doc .gcard p { margin: 0; }
.bx-doc .gcard.danger { grid-column: 1 / -1; flex-direction: row; border-color: rgba(139,92,246,.6); box-shadow: 0 20px 50px -30px rgba(139,92,246,.9); }
.bx-doc .gcard.danger .gm { flex: 0 0 46%; aspect-ratio: auto; min-height: 320px; }
.bx-doc .gcard.danger .gb { justify-content: center; padding: 26px 30px; }
.bx-doc .gcard.danger h3 { font-size: 26px; }
.bx-doc .gcard details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent); list-style: none; }
.bx-doc .gcard details summary::-webkit-details-marker { display: none; }
.bx-doc .gcard details summary::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 4px; vertical-align: -0.15em; background: currentColor; -webkit-mask: url(/img/icons-svg/lucide/chevron-right.svg) center / contain no-repeat; mask: url(/img/icons-svg/lucide/chevron-right.svg) center / contain no-repeat; transition: transform .15s; }
.bx-doc .gcard details[open] summary::after { transform: rotate(90deg); }
.bx-doc .gcard details > *:not(summary) { margin-top: 10px; }
.bx-doc .gcard details img { max-width: 100%; border-radius: 8px; }
@media (max-width: 1024px) { .bx-doc .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .bx-doc .gcard.danger { flex-direction: column; }
  .bx-doc .gcard.danger .gm { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .bx-doc .gcard.danger .gb { padding: 18px 20px 20px; }
  .bx-doc .gcard.danger h3 { font-size: 22px; }
}
@media (max-width: 560px) { .bx-doc .pgrid { grid-template-columns: minmax(0, 1fr); } }

/* 피해량 막대: 파이터(물리)=보라 / 매직유저(마법)=파랑 */
.bx-doc .dbar { display: grid; grid-template-columns: 62px minmax(0, 1fr) 34px; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.bx-doc .dbar i { height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.bx-doc .dbar i b { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E9A8FF, #A855F7); }
.bx-doc .dbar.mu i b { background: linear-gradient(90deg, #8CC4FF, #3F7FD8); }
.bx-doc .dbar em { font-style: normal; font-weight: 800; color: #fff; text-align: right; }
.bx-doc .kill { align-self: flex-start; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(139,92,246,.25); border: 1px solid rgba(139,92,246,.5); }

/* ---------- 클래스별 공략 ---------- */
.bx-doc .cls-seg { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.bx-doc .cls-seg button {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 6px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: var(--text-sub);
  font-size: 14px; font-weight: 700; font-family: inherit;
}
.bx-doc .cls-seg button:hover { color: var(--text-strong); border-color: var(--accent-line); }
.bx-doc .cls-seg button img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; object-position: top; image-rendering: pixelated; background: rgba(0,0,0,.3); }
.bx-doc .cls-seg button[aria-selected="true"] { color: #fff; border-color: transparent; background: var(--accent-grad); box-shadow: 0 10px 24px -12px rgba(139,92,246,.9); }
@media (max-width: 480px) {
  .bx-doc .cls-seg { gap: 6px; }
  .bx-doc .cls-seg button { height: 42px; padding: 0 12px 0 4px; font-size: 13px; gap: 6px; }
  .bx-doc .cls-seg button img { width: 32px; height: 32px; }
}

.bx-doc .rec-panel { display: flex; flex-direction: column; gap: 14px; }
.bx-doc .rec-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.bx-doc .rec-head__en { font-family: var(--font-display); letter-spacing: .06em; }
.bx-doc .rec-head__title { color: #FFD166; }
.bx-doc .rec-card { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; padding: 20px; min-width: 0; }
.bx-doc .rec-vid {
  position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--art-bg-deep);
  border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--muted); font-size: 12px; text-align: center; padding: 12px; min-width: 0;
}
.bx-doc .rec-vid b { color: var(--text); overflow-wrap: anywhere; }
.bx-doc .rec-vid .play { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-grad); box-shadow: 0 10px 24px -8px rgba(139,92,246,.9); }
.bx-doc .rec-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.bx-doc .rec-meta span { padding: 4px 10px; font-size: 12px; font-weight: 700; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.bx-doc .rec-meta .t { color: #FFD166; }
@media (max-width: 900px) {
  .bx-doc .rec-card { grid-template-columns: minmax(0, 1fr); }
  .bx-doc .rec-vid { aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) { .bx-doc .rec-card { padding: 16px; gap: 16px; } }

/* ---------- 다른 보스 ---------- */
.bx-doc .bx-more { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.bx-doc .bx-more a { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-sub); text-decoration: none; min-width: 0; }
.bx-doc .bx-more a:hover { color: var(--text-strong); }
.bx-doc .bx-more img { width: 100%; aspect-ratio: 350 / 130; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); }
.bx-doc .bx-more a:hover img { border-color: var(--primary); }
@media (max-width: 1024px) { .bx-doc .bx-more { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .bx-doc .bx-more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .bx-doc .bx-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 요약본(옛 공략 그대로) ---------- */
.bx-legacy {
  max-width: 860px; min-width: 0; overflow-wrap: anywhere;
  font-size: 15px; line-height: 1.85; color: #D6D3E2; text-align: left;
}
.bx-legacy * { max-width: 100%; }
.bx-legacy p { margin: 0 0 12px; }
.bx-legacy center, .bx-legacy [align="center"], .bx-legacy [align="middle"] { text-align: left; }
.bx-legacy font { color: inherit; }
.bx-legacy img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; image-rendering: pixelated; }
.bx-legacy img.shot { display: block; margin: 14px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); }
.bx-legacy img.ico { margin: 0 2px; }
.bx-legacy table { display: block; width: auto !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.bx-legacy td, .bx-legacy th { padding: 8px 12px; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; vertical-align: middle; width: auto !important; }
.bx-legacy .em, .bx-legacy b, .bx-legacy strong { color: #FFD7A8; font-weight: 600; }
.bx-legacy .hl { color: var(--accent); font-weight: 700; }
.bx-legacy .p1 { color: #6FB7FF; } .bx-legacy .p2 { color: #FF7B7B; } .bx-legacy .p3 { color: #8BE28B; } .bx-legacy .p4 { color: #FFD166; }
.bx-legacy a { color: var(--accent); }
.bx-legacy hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }
.bx-hero--solo { grid-template-columns: minmax(0, 1fr); }
.bx-kpi__who { display: block; margin-top: 2px; font-size: 12px; }
/* ── 맨 아래 '다음 여정' (bosses/detail.html): 공략이 끝나는 자리에서 다음 스테이지 보스로 이어 줌 ──
   위쪽 구분선 + 왼쪽 정렬 머리, 보스 카드는 그림 띠(8:3) + 이름. 분기는 '또는', 숨겨진 보스 다음 스테이지는 '아니면' 으로 이음 */
.bx-next { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-16); padding-top: var(--sp-10); padding-bottom: var(--sp-6); border-top: 1px solid var(--line); }
.bx-next__head { display: flex; flex-direction: column; gap: var(--sp-1); }
.bx-next__title { margin: 0; font-size: var(--fs-section-title); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tighter); color: var(--text-strong); }
.bx-next__desc { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.bx-next__steps { display: flex; flex-direction: column; gap: var(--sp-3); }
.bx-next__or { align-self: flex-start; padding: 2px 10px; border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.bx-step { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-solid); }
.bx-step.is-hidden { border-color: color-mix(in srgb, var(--boss-hidden) 35%, transparent); }
.bx-step.is-final { border-color: color-mix(in srgb, var(--boss-final) 40%, transparent); }
.bx-step__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.bx-step__head b { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.bx-step__head small { color: var(--muted); font-size: var(--fs-xs); }
.bx-step__kind { padding: 1px 8px; border-radius: 6px; background: rgba(var(--focus-rgb), .18); color: var(--accent); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.bx-step.is-hidden .bx-step__kind { background: color-mix(in srgb, var(--boss-hidden) 18%, transparent); color: var(--boss-hidden); }
.bx-step.is-final .bx-step__kind { background: color-mix(in srgb, var(--boss-final) 18%, transparent); color: var(--boss-final); }
.bx-step__cards { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.bx-step__sep { flex: none; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }

/* 다음 보스 카드 */
.bx-nb { flex: 1 1 260px; max-width: 380px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--bg); color: var(--text); transition: border-color .2s, transform .25s; }
.bx-nb:not(.is-soon):hover { border-color: var(--primary); transform: translateY(-2px); color: var(--text-strong); }
.bx-nb__img { display: block; aspect-ratio: 8 / 3; background: var(--art-bg) center / cover no-repeat; image-rendering: pixelated; }
.bx-nb__body { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4) 0; }
.bx-nb__body small { font: var(--fw-bold) var(--fs-2xs) var(--font-display); letter-spacing: .08em; color: var(--muted); }
.bx-nb__body b { font-size: var(--fs-base); font-weight: var(--fw-heavy); color: var(--text-strong); }
.bx-nb__en { font: var(--fw-bold) var(--fs-2xs) var(--font-display); letter-spacing: .12em; color: var(--accent); }
.bx-nb__go { align-self: flex-end; margin: var(--sp-2) var(--sp-4) var(--sp-3); color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.bx-nb.is-soon { cursor: default; }
.bx-nb.is-soon .bx-nb__img { filter: grayscale(.7) brightness(.6); }
.bx-nb.is-soon .bx-nb__go { padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: var(--fs-2xs); }
.bx-next__foot { display: flex; gap: var(--sp-2); }
@media (max-width: 640px) {
  .bx-nb { flex-basis: 100%; max-width: none; }
  .bx-step__sep { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .bx-nb { transition: none; } }

/* 보스방은 왼쪽 어두운 그라데이션이 없어서, 밝은 도트 배경 위에서도 제목·숫자가 읽히게 그림자 */
.bx-hero .bx-name, .bx-hero .bx-ko, .bx-hero .bx-eyebrow, .bx-kpi b, .bx-kpi span, .bx-kpi__who, .bx-notice, .bx-nav:not(.is-stuck) a {
  text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9);
}

/* ---------- 보스방 윗부분 배경 (보스마다 그림·크기·위치) ----------
   페이지 body 에 boss-영문이름 클래스가 붙음 (GameDataController). 저장 후 새로고침만 하면 바로 반영.
   background-size    : cover = 화면 폭에 꽉 채우기 / 180% = 더 확대 / auto 100% = 높이에 맞춰 전체 보이기
   background-position: 첫 값 = 가로(0% 왼쪽 끝 ~ 100% 오른쪽 끝), 두 번째 값 = 세로(0% 맨 위 ~ 100% 맨 아래)  */
/* :where() 로 우선순위를 낮춰서 아래 .boss-영문이름 줄의 크기·위치가 이기게 함 */
/* 보스 도감 카드의 스테이지 장면(350×130, img/src/re_info)을 그대로: 오른쪽 상자를 그림과 같은 비율로 만들어 잘리지 않고 통째로 보이게, 가장자리만 배경에 녹임
   (보스마다 다른 그림을 쓰려면 아래 .boss-영문이름 줄의 url 을 바꾸면 됨. 비율이 다른 그림이면 잘릴 수 있음)
   (예전 전체 채우기로 되돌리려면: inset: var(--header-h) 0 0 0 로 바꾸고 width/aspect-ratio/right/top · mask 줄 삭제) */
:where(body[class*="boss-"]) .page-art::before {
  display: block; inset: auto; right: max(0px, calc(50% - 780px)); top: 90px; width: min(74%, 1100px); height: auto; aspect-ratio: 350 / 130;
  background-repeat: no-repeat; background-position: 62% 40%; background-size: cover;
  image-rendering: pixelated; filter: saturate(1.1); opacity: 1; /* dnd2.css 의 흐린 뒷받침 설정(진하기)은 보스방엔 안 씀 */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 70%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 768px) {
  :where(body[class*="boss-"]) .page-art::before { left: 0; right: 0; top: 40px; width: 100%; opacity: 0.55; }
}
body[class*="boss-"] .page-art::after { display: none; }
/* 보스방은 왼쪽을 어둡게 덮지 않고 아래로만 바탕색으로 사라지게 (글씨는 그림자로 읽히게) */
body[class*="boss-"]::after {
  background: linear-gradient(180deg, rgba(var(--bg-rgb),0) 0%, rgba(var(--bg-rgb),0.2) 45%, rgba(var(--bg-rgb),0.85) 80%, var(--bg) 100%);
}
.boss-warmachine         .page-art::before { background-image: url(../../img/src/re_info/warmachine.png); background-size: cover; background-position: 50% 50%; }
.boss-darkwarrior        .page-art::before { background-image: url(../../img/src/re_info/darkwarrior.png); background-size: cover; background-position: 50% 50%; }
.boss-manscorpion        .page-art::before { background-image: url(../../img/src/re_info/manscorpion.png); background-size: cover; background-position: 50% 50%; }
.boss-harpy              .page-art::before { background-image: url(../../img/src/re_info/harpy.png); background-size: cover; background-position: 50% 50%; }
.boss-telarin            .page-art::before { background-image: url(../../img/src/re_info/telarin.png); background-size: cover; background-position: 50% 50%; }
.boss-ogrebros           .page-art::before { background-image: url(../../img/src/re_info/ogremasterbros.png); background-size: cover; background-position: 50% 50%; }
.boss-beholder           .page-art::before { background-image: url(../../img/src/re_info/beholder.png); background-size: cover; background-position: 50% 50%; }
.boss-greendragon        .page-art::before { background-image: url(../../img/src/re_info/greendragon.png); background-size: cover; background-position: 50% 50%; }
.boss-manticore          .page-art::before { background-image: url(../../img/src/re_info/manticore.png); background-size: cover; background-position: 50% 50%; }
.boss-lich               .page-art::before { background-image: url(../../img/src/re_info/lich.png); background-size: cover; background-position: 50% 50%; }
.boss-dbeast             .page-art::before { background-image: url(../../img/src/re_info/displacerbeast.png); background-size: cover; background-position: 50% 50%; }
.boss-blackdragon        .page-art::before { background-image: url(../../img/src/re_info/blackdragon.png); background-size: cover; background-position: 50% 50%; }
.boss-chimera            .page-art::before { background-image: url(../../img/src/re_info/chimera.png); background-size: cover; background-position: 50% 50%; }
.boss-reddragon          .page-art::before { background-image: url(../../img/src/re_info/reddragon.png); background-size: cover; background-position: 50% 50%; }
.boss-flamesalamander    .page-art::before { background-image: url(../../img/src/re_info/flamesalamander.png); background-size: cover; background-position: 50% 50%; }
.boss-frostsalamander    .page-art::before { background-image: url(../../img/src/re_info/frostsalamander.png); background-size: cover; background-position: 50% 50%; }
.boss-telarin-2          .page-art::before { background-image: url(../../img/src/re_info/telarintelelenon.png); background-size: cover; background-position: 50% 50%; }
.boss-telarin-3          .page-art::before { background-image: url(../../img/src/re_info/telarin2.png); background-size: cover; background-position: 50% 50%; }
.boss-ezerhorden         .page-art::before { background-image: url(../../img/src/re_info/ezerhorden.png); background-size: cover; background-position: 50% 50%; }
.boss-darkwarrior2       .page-art::before { background-image: url(../../img/src/re_info/darkwarrior2.png); background-size: cover; background-position: 50% 50%; }
.boss-nagpa              .page-art::before { background-image: url(../../img/src/re_info/nagpa.png); background-size: cover; background-position: 50% 50%; }
.boss-synn               .page-art::before { background-image: url(../../img/src/re_info/synn.png); background-size: cover; background-position: 50% 50%; }