/* ==========================================================================
   몬스터 상세 (mj-)  ·  A 양피지 스탯 블록 + C 헌터 노트 + D 사냥꾼 일지
   색·글꼴은 dnd2.css 토큰 위에. 양피지/공책 영역만 따뜻한 종이색
   ========================================================================== */
.mj { --gold: var(--accent, #C4B5FD); --melee: #FF8A8A; --light: #7CC0FF; --ok: #8BE28B; --warn: #FFB27A;
  --card: var(--surface-solid, #1a1b20); --edge: var(--line, rgba(255,255,255,.08)); --edge2: var(--line-strong, rgba(255,255,255,.14));
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 28px; padding-bottom: 72px; }
.mj img { image-rendering: pixelated; }
.mj-crumb { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.mj-crumb a { color: var(--text-sub); }

/* D 도감 목록 */
.mj-list { position: sticky; top: calc(var(--header-h, 72px) + 16px); padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--edge); }
.mj-list h2 { margin: 0 0 2px; font: 700 13px var(--font-display, Cinzel, serif); letter-spacing: .18em; color: var(--accent, #C4B5FD); }
.mj-list p { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.mj-list p b { color: var(--text-strong); }
.mj-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mj-list a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--text-sub); font-size: 14px; text-decoration: none; }
.mj-list a:hover { background: rgba(255,255,255,.04); color: var(--text-strong); }
.mj-list a[aria-current="page"] { background: rgba(196,181,253,.12); color: #fff; font-weight: 700; box-shadow: inset 2px 0 0 var(--accent, #C4B5FD); }
.mj-list a.soon { color: var(--muted); opacity: .55; }
.mj-list a.soon small { margin-left: auto; font-size: 11px; }
.mj-ico { flex: none; display: grid; place-items: center; width: 40px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.05); overflow: hidden; font: 900 13px var(--font); color: var(--muted); }
.mj-ico img { width: 40px; height: 32px; object-fit: contain; }   /* 키 큰 몬스터도 잘리지 않게 칸 안에 다 */

/* C 머리 */
.mj-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: center; padding: 24px; border-radius: 20px; background: radial-gradient(80% 120% at 0% 0%, rgba(124,58,237,.18), transparent 60%), var(--card); border: 1px solid var(--edge2); }
.mj-art { position: relative; display: grid; grid-template-rows: 1fr auto; aspect-ratio: 4 / 3.3; border-radius: 14px; border: 1px solid var(--art-line);
  --art-glow-c: var(--mc); --art-cut-tex: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 22px); } /* 바탕 = 누끼 그림 칸 (dnd2.css .art-cut, 빛은 몬스터 색) + 몬스터 도감 모눈 */
.mj-fig { position: relative; margin: 0; }
.mj-fig img { position: absolute; inset: 0; margin: auto; width: calc(var(--w, 280) / 450 * 100%); /* 몬스터 크기 비율 그대로 (monster.js 가 --w) */ height: auto; max-height: 92%; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(0,0,0,.6)); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.mj-fig img.is-on { opacity: 1; transform: none; }
.mj-look { display: flex; justify-content: center; gap: 4px; padding: 10px; }
.mj-look button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color: var(--muted); font: 700 12.5px var(--font); cursor: pointer; }
.mj-look button[aria-pressed="true"] { background: rgba(255,255,255,.12); border-color: transparent; color: var(--text-strong); }
.mj-cls { font-size: 13px; color: var(--gold); font-weight: 700; letter-spacing: .1em; }
.mj-id h1 { margin: 2px 0 2px; font-size: clamp(40px, 5vw, 56px); font-weight: 900; letter-spacing: -.04em; color: #fff; }
.mj-id .en { margin: 0 0 14px; font: 700 15px var(--font-display, Cinzel, serif); letter-spacing: .12em; color: var(--muted); }
.mj-threat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.mj-threat i { width: 26px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.12); transform: skewX(-20deg); }
.mj-threat i.on { background: var(--gold); }
.mj-threat small { margin-left: 6px; }
.mj-quick { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mj-quick li { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--edge); }
.mj-quick b { display: block; font-size: 21px; color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; }
.mj-quick span { font-size: 12px; color: var(--muted); }
.mj-lead { margin: 14px 0 0; font-size: 15px; color: var(--text-sub); line-height: 1.7; max-width: 48ch; }

.mj-sec { margin-top: 40px; scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
.mj-sec > .bxt-h { margin-bottom: 16px; }

/* A 양피지 + C 상자 */
.mj-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mj-sheet { padding: 26px 28px 22px; color: var(--text-sub); font-size: 15px; line-height: 1.75; background: var(--card); border-radius: 16px; border: 1px solid var(--edge2); border-top: 3px solid var(--accent, #C4B5FD); }
.mj-sheet h2 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: var(--text-strong); }
.mj-sheet h2 span { font: 700 15px var(--font-display, Cinzel, serif); color: var(--muted); margin-left: 8px; letter-spacing: .1em; }
.mj-sheet .type { margin: 2px 0 0; font-style: italic; color: var(--muted); }
.mj-rule { height: 3px; border: 0; margin: 14px 0; background: linear-gradient(90deg, var(--accent, #C4B5FD), rgba(196,181,253,0)); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mj-core { margin: 0; display: grid; gap: 2px; }
.mj-core div { display: flex; flex-wrap: wrap; gap: 0 10px; }
.mj-core dt { font-weight: 700; color: var(--accent, #C4B5FD); }
.mj-core dd { margin: 0; color: var(--text-strong); }
.mj-core small { color: var(--muted); }
.mj-sheet p { margin: 0 0 8px; }
.mj-sheet b i { color: var(--text-strong); }
.mj-sheet h3 { margin: 16px 0 6px; padding-bottom: 4px; font-size: 16px; font-weight: 800; color: var(--text-strong); border-bottom: 1px solid var(--edge2); }
.mj-sheet .loot img { display: inline-block; height: 18px; vertical-align: -3px; margin: 0 3px 0 4px; }
.mj-box { padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--edge); }
.mj-box + .mj-box { margin-top: 12px; }
.mj-box h3 { margin: 0 0 12px; font-size: 14px; color: var(--text-strong); font-weight: 800; }
.mj-weak { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.mj-weak th { text-align: left; color: var(--text-sub); font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--edge); width: 38%; }
.mj-weak td { padding: 8px 0; border-bottom: 1px solid var(--edge); font-weight: 700; }
.mj-weak tr:last-child > * { border-bottom: 0; }
.mj-w3 { color: var(--ok); } .mj-w2 { color: #FFD08A; } .mj-w0 { color: var(--melee); }
.mj-gear { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mj-gear div { padding: 12px; border-radius: 10px; background: rgba(255,208,138,.06); border: 1px solid rgba(255,208,138,.25); }
.mj-gear b { display: block; color: #fff; font-size: 14.5px; }
.mj-gear span { font-size: 13px; color: var(--muted); }
.mj-dmg { display: grid; grid-template-columns: 76px 1fr; gap: 10px 12px; align-items: center; font-size: 13px; color: var(--muted); }
.mj-dmg small { display: block; font-size: 11px; color: #6c7078; }
.mj-dbar { display: grid; gap: 4px; }
.mj-dbar span { display: grid; grid-template-columns: 1fr 28px; align-items: center; gap: 8px; }
.mj-dbar i { height: 8px; border-radius: 3px; background: rgba(255,255,255,.05); overflow: hidden; }
.mj-dbar i::before { content: ""; display: block; height: 100%; width: min(100%, calc(var(--v) / var(--max, 25) * 100%)); /* --max: 상자마다 가장 큰 피해 (.mj-dmg style) */ background: var(--c); border-radius: inherit; }
.mj-dbar b { font-size: 13px; color: var(--c); text-align: right; font-variant-numeric: tabular-nums; }
.mj-key { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.mj-key b { font-weight: 400; } .mj-key .m { color: var(--melee); } .mj-key .l { color: var(--light); margin-left: 10px; }

/* C 패턴 */
.mj-pats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mj-pat { position: relative; display: grid; grid-template-rows: 120px auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--edge); background: var(--card); }
/* 그림 칸: 누끼 그림 칸 (dnd2.css .art-cut, 빛은 몬스터 색 --mc, 상세 .mj-body). 그림은 배경을 뺀 도트라 그 위에 얇은 테두리 빛 · 아래 그림자 (직업 공략 그림처럼) */
.mj-pat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; border-bottom: 1px solid var(--art-line); --art-glow-c: var(--mc); }
.mj-pat img { position: relative; width: 100%; height: 120px; padding: 6px 8px; object-fit: contain; background: none;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.28)) drop-shadow(0 0 7px color-mix(in srgb, var(--mc, #8B5CF6) 38%, transparent)) drop-shadow(0 9px 7px rgba(0,0,0,.75)); }
.mj-pat > div { padding: 12px 14px 14px; }
.mj-pat h3 { margin: 0; font-size: 16px; color: #fff; font-weight: 800; }
.mj-pat h3 small { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 4px; }
.mj-pat p { margin: 6px 0; font-size: 13.5px; color: var(--text-sub); line-height: 1.6; }
.mj-meter { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.mj-meter em { font-style: normal; color: #FFD08A; margin-left: 4px; letter-spacing: 1px; }
.mj-tip { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ok); }
.mj-tip.item { color: #FFD08A; }
.mj-note-sm { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* D 공책 */
.mj-journal { border-radius: 16px; border: 1px solid var(--edge2); background: var(--card); overflow: hidden; }
.mj-paper { padding: 26px 30px 24px; color: var(--text-sub); background: repeating-linear-gradient(0deg, transparent 0 33px, rgba(255,255,255,.035) 33px 34px); border-left: 3px solid var(--accent, #C4B5FD); }
.mj-paper .quote { margin: 0 0 14px; font-size: 17px; font-style: italic; color: var(--text-strong); }
.mj-paper h3 { margin: 18px 0 4px; font-size: 16px; font-weight: 800; color: var(--accent, #C4B5FD); }
.mj-paper h3:first-of-type { margin-top: 0; }
.mj-paper p { margin: 0 0 8px; font-size: 15.5px; line-height: 2.1; }
.mj-paper u { text-decoration-color: var(--accent, #C4B5FD); text-decoration-thickness: 2px; text-underline-offset: 4px; color: var(--text-strong); }
.mj-cls-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin: 4px 0 6px; }
.mj-cls-notes p { display: grid; grid-template-columns: 66px 1fr; gap: 10px; align-items: start; margin: 0; line-height: 1.8; }
.mj-cls-notes img { display: block; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--surface-solid); box-shadow: 0 0 0 1px var(--line-strong, var(--line)); object-fit: cover; }   /* 직업 얼굴 (예전 20px 아이콘은 잘 안 보였음) */
.mj-cls-notes .two { display: flex; }
.mj-cls-notes .two img + img { margin-left: -14px; }   /* 두 직업이면 얼굴 두 개를 겹쳐서 */
.mj-cls-notes b { color: var(--text-strong); }
.mj-warn { margin-top: 12px; padding: 10px 14px; border-radius: 10px; border-left: 3px solid var(--warn); background: rgba(255,178,122,.07); font-size: 14.5px; line-height: 1.8; }
.mj-warn b { color: var(--warn); }

/* 룰 설정 */
.mj-lore { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: start; color: var(--text-sub); font-size: 15px; line-height: 1.8; }
.mj-lore p { margin: 0 0 10px; }
.mj-lore figure { margin: 0; padding: 14px 10px 10px; border-radius: 12px; overflow: hidden; border: 1px solid var(--art-line); --art-glow-c: var(--mc); } /* 룰북 그림은 배경을 뺀 판(webp): 누끼 그림 칸 (dnd2.css .art-cut) + 몬스터 색 빛 */
.mj-lore img { display: block; width: 100%; image-rendering: auto; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mc, #8B5CF6) 30%, transparent)) drop-shadow(0 12px 12px rgba(0,0,0,.7)); }
.mj-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mj-stages li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid var(--line); font-size: 14.5px; color: var(--text-sub); }
.mj-stages b { color: var(--text-strong); }
.mj-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 1180px) { .mj-pats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1024px) {
  .mj { grid-template-columns: 1fr; }
  .mj-list { position: static; order: 3; }
  .mj-list ol { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mj-head, .mj-row, .mj-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mj-cls-notes { grid-template-columns: 1fr; }
  /* 공격 패턴: 세로로 쌓으면 너무 길어서 한 장씩 옆으로 넘김 (다음 카드가 살짝 보이게) */
  .mj-pats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--sp-1); }
  .mj-pats::-webkit-scrollbar { display: none; }
  .mj-pat { scroll-snap-align: start; }
  .mj-quick { grid-template-columns: 1fr 1fr; }
  .mj-sheet, .mj-paper { padding: 20px 18px; }
  .mj-lore { grid-template-columns: 1fr; }
}

/* 폰: 첫 화면 큰 카드(테두리 · 바탕 · 안쪽 여백 24)를 없애 그림 칸이 카드 안 카드로 겹치지 않게 (게시판 글과 같은 방식) */
@media (max-width: 768px) {
  .mj-head { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .mj-sheet { padding: 20px 18px 18px; }
}

/* ════ 폰 배치 (768 이하, monster.js 가 body.mjx 를 붙이고 칸을 옮김 · 시안 docs/monster-sian/detail.html) ════
   첫 화면 요약 · MUST KNOW · 구역 이동 줄 · 접기 · 패턴 위치 점 · 아래 이전/다음 줄. 공략 글(DB)은 그대로, 관리자 편집 화면에서는 안 바꿈 */
.mjx { --tabs-h: 46px; }
.mjx .site-main { padding-bottom: 96px; }   /* 아래 고정 줄 자리 */
.mjx .mj-list { display: none; }   /* 맨 아래 긴 몬스터 목록 대신 아래 고정 줄의 이전 · 다음 */

/* 1. 첫 화면: 그림 높이를 줄이고 이름 · 위협 · 숫자 넷을 한 화면에 */
.mjx .mj-head { gap: var(--sp-3); }
.mjx .mj-art { aspect-ratio: auto; height: 210px; }
.mjx .mj-look { padding: 6px; }
.mjx .mj-id h1 { font-size: 34px; }
.mjx .mj-id .en { margin-bottom: 8px; }
.mjx .mj-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.mjx .mj-quick li { padding: 8px 6px; text-align: center; }
.mjx .mj-quick b { font-size: 17px; }
.mjx .mj-quick span { display: block; font-size: 10.5px; line-height: 1.35; }

/* 2. 먼저 알 것 (공략 메모의 소제목 + 주의를 첫 화면 바로 아래로) */
.mjx-must { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-left: 3px solid var(--warn); border-radius: var(--radius); background: rgba(255,178,122,.06); }
.mjx-must h2 { margin: 0 0 6px; font: 700 11px var(--font-display); letter-spacing: .2em; color: var(--warn); }
.mjx-must ol { margin: 0; padding: 0; list-style: none; counter-reset: k; }
.mjx-must li { position: relative; padding: 6px 0 6px 26px; font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--text); counter-increment: k; }
.mjx-must li + li { border-top: 1px dashed var(--line); }
.mjx-must li::before { content: counter(k); position: absolute; left: 0; top: 7px; display: grid; place-items: center; width: 18px; height: 18px; font-size: 11px; font-weight: 800; color: #1a1208; background: var(--warn); border-radius: 50%; }
.mjx-must b { color: var(--text-strong); }

/* 3. 구역 이동 줄: 위에 붙어 따라옴 + 지금 보는 구역 표시 */
.mjx-tabs { position: sticky; top: var(--header-h); z-index: 40; display: flex; gap: 2px; margin: var(--sp-5) calc(var(--sp-4) * -1) 0; padding: 0 var(--sp-2); overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--line); }
.mjx-tabs::-webkit-scrollbar { display: none; }
.mjx-tabs a { flex: 1 0 auto; display: grid; place-items: center; min-width: 64px; height: var(--tabs-h); padding: 0 12px; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.mjx-tabs a[aria-current="true"] { color: var(--text-strong); border-bottom-color: var(--accent); }
.mjx .mj-sec { margin-top: var(--sp-8); scroll-margin-top: calc(var(--header-h) + var(--tabs-h) + 12px); }
.mjx .bxt-h { margin-bottom: 12px; }
.mjx .bxt-h h2 { font-size: 22px; }

/* 4. 접기: 긴 설명은 제목만 보이고 눌러서 펼침 */
.mjx-fold { border: 1px solid var(--edge); border-radius: var(--radius); background: var(--card); }
.mjx-fold + .mjx-fold { margin-top: 8px; }
.mjx-fold > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); cursor: pointer; list-style: none; }
.mjx-fold > summary::-webkit-details-marker { display: none; }
.mjx-fold > summary small { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--muted); }
.mjx-fold > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.mjx-fold[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.mjx-fold > .mjx-fold__in { padding: 0 14px 14px; }
.mjx-fold .mj-box, .mjx-fold .mj-sheet { padding: 0; border: 0; background: none; box-shadow: none; }
.mjx-fold .mj-box h3, .mjx-fold .mj-sheet > h2 { display: none; }   /* 제목은 접기 줄에 */
.mjx .mj-row { gap: 0; }
.mjx .mj-row > div { margin-top: 8px; }
.mjx .mj-journal { border: 0; background: none; }
.mjx .mj-paper { padding: 0; border: 0; background: none; }
.mjx .mj-paper > .quote { margin: 0 0 12px; padding: 12px 14px; font-size: var(--fs-md); border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; }
.mjx .mjx-fold .mj-cls-notes { margin: 0; }

/* 5. 공격 패턴: 옆으로 넘기기 + 몇 번째인지 */
.mjx-pos { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.mjx-pos i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: width .2s, background .2s; }
.mjx-pos i.on { width: 18px; background: var(--accent); }

/* 6. 아래 고정 줄: 이전 · 목록 · 다음 (엄지 닿는 곳) */
.mjx-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(15,15,18,.96); border-top: 1px solid var(--line); }
.mjx-bar a { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 52px; padding: 0 10px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); text-decoration: none; background: var(--surface-solid); border: 1px solid var(--edge); border-radius: var(--radius); }
.mjx-bar a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mjx-bar a small { display: block; font: 700 9.5px var(--font-display); letter-spacing: .14em; color: var(--muted); }
.mjx-bar a img { flex: none; width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.mjx-bar .nx { justify-content: flex-end; text-align: right; }
.mjx-bar .ls { justify-content: center; min-width: 52px; padding: 0; font-size: 18px; color: var(--text-sub); }
.mjx .dc-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }   /* 채팅 버튼: 아래 고정 줄 위로 */
.mjx:has(.mjx-bar) .ge-open { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }   /* 관리자 [편집] 버튼(dnd2.css)도: 왼쪽 [이전] 칸을 가리지 않게 */
body.mjx:has(.mjx-bar):has(.ge-open) { padding-bottom: calc(84px + 44px + var(--sp-3)); }   /* 편집 버튼이 올라간 만큼 바닥글 아래 여백도 (dnd2.css 의 64px 대신) */

/* ════ 넓은 화면 (769 이상, monster.js 가 넣음 · PC 시안 1) ════ */
/* ON THIS PAGE: 왼쪽 칸 맨 위 구역 이동 */
.mj-toc { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--edge); }
.mj-toc h2 { margin: 0 0 6px; font: 700 13px var(--font-display, Cinzel, serif); letter-spacing: .18em; color: var(--accent, #C4B5FD); }
.mj-toc a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14px; color: var(--text-sub); text-decoration: none; }
.mj-toc a small { margin-left: auto; font: 700 10px var(--font-display, Cinzel, serif); letter-spacing: .12em; color: var(--muted); }
.mj-toc a:hover { background: rgba(255,255,255,.04); color: var(--text-strong); }
.mj-toc a[aria-current="true"] { background: rgba(196,181,253,.12); color: #fff; font-weight: 700; box-shadow: inset 2px 0 0 var(--accent, #C4B5FD); }
@media (min-width: 1025px) { .mj-list { max-height: calc(100vh - var(--header-h, 72px) - 32px); overflow-y: auto; scrollbar-width: none; } }   /* 구역 이동이 붙어 길어져도 화면 안에서 */
.mj-id .mjx-must { margin-top: 14px; }
/* 맨 아래 이전 · 다음 몬스터 */
.mj-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.mj-pn a { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 12px 18px; border-radius: 14px; border: 1px solid var(--edge); background: var(--card); color: var(--text-strong); text-decoration: none; font-size: 18px; font-weight: 800; }
.mj-pn a:hover { border-color: var(--accent, #C4B5FD); }
.mj-pn a small { display: block; font: 700 11px var(--font-display, Cinzel, serif); letter-spacing: .16em; color: var(--muted); }
.mj-pn a img { width: 72px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.mj-pn .nx { justify-content: flex-end; text-align: right; }