/* 아이템 · 상점 / 상자 탭 + LB오일 보스별 (js/items-extra.js, mx-) */
.mk-modes { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* 보기 탭 4 → 6 */
.mk-mode__n { white-space: nowrap; }
@media (max-width: 1180px) { .mk-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-wrap.is-wide { grid-template-columns: minmax(0, 1fr); }   /* 상점 · 상자 탭은 상세 칸 없이 넓게 */
.mk-wrap.is-wide .mk-side { display: none; }
.mx-box { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-solid); }
.mx-box + .mx-box { margin-top: var(--sp-4); }
.mx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: var(--sp-4); }
.mx-head span { font: 700 13px var(--font-display, Cinzel, serif); letter-spacing: .18em; color: #E3B35C; }
.mx-head h2 { margin: 0; font-size: 22px; color: var(--text-strong); }
.mx-head p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.mx-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.mx-h3 { margin: 0; font-size: 19px; color: var(--text-strong); }
/* 이용법: 키 · 내용 표 (예전 알약 줄은 줄바꿈이 들쭉날쭉해 지저분했음) */
.mx-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-5); margin: 0 0 var(--sp-5); padding: var(--sp-1) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mx-rules div { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.mx-rules div:nth-last-child(-n+3) { border-bottom: 0; }
.mx-rules dt { flex: none; min-width: 44px; padding: 2px 8px; text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-strong); background: rgba(255,255,255,.06); border: 1px solid var(--line-strong, var(--line)); border-bottom-width: 2px; border-radius: var(--radius-sm); }
.mx-rules dd { margin: 0; min-width: 0; font-size: var(--fs-sm); color: var(--text-sub); }
.mx-rules b { color: var(--text-strong); }
/* 상점 고르기: 스테이지 버튼 한 줄 + 갈림길(A · B · C)이 있으면 그 아래 상점 그림 카드 */
.mx-stages { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.mx-stage { display: grid; justify-items: center; gap: 1px; min-height: 64px; padding: var(--sp-2) var(--sp-1); font: inherit; color: var(--text-sub); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.mx-stage small { font: 700 10px var(--font-display, Cinzel, serif); letter-spacing: .14em; color: var(--muted); }
.mx-stage b { font-size: var(--fs-xl); line-height: var(--lh-tight); color: var(--text-strong); white-space: nowrap; }
.mx-stage span { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }
.mx-stage:hover { border-color: var(--line-strong, var(--line)); }
.mx-stage[aria-pressed="true"] { background: rgba(227,179,92,.1); border-color: #E3B35C; }
.mx-stage[aria-pressed="true"] b { color: #ffe0a8; }
.mx-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.mx-branches:empty { display: none; }
.mx-shop { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); overflow: hidden; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.mx-shop img { flex: none; width: 96px; aspect-ratio: 576 / 264; object-fit: cover; border-radius: var(--radius-sm); }
.mx-shop span { min-width: 0; }
.mx-shop b { display: block; font-size: var(--fs-md); color: var(--text-strong); }
.mx-shop small { font-size: var(--fs-xs); color: var(--muted); }
.mx-shop em { display: inline-block; margin-left: 6px; padding: 0 6px; font-style: normal; font-size: var(--fs-2xs); color: #ffd9a0; background: rgba(227,179,92,.15); border-radius: 5px; }
.mx-shop[aria-pressed="true"] { border-color: #E3B35C; box-shadow: 0 0 0 1px #E3B35C; }
.mx-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-5); }
.mx-scene { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.mx-scene img { display: block; width: 100%; }
.mx-scene figcaption { position: absolute; left: 10px; top: 10px; padding: 3px 11px; font-size: var(--fs-xs); font-weight: 700; color: #fff; background: rgba(0,0,0,.7); border-radius: 999px; }
.mx-quote { margin: var(--sp-3) 0 0; padding: 12px 16px; border-left: 3px solid var(--accent, #8B5CF6); background: color-mix(in srgb, var(--accent, #8B5CF6) 9%, transparent); border-radius: 0 10px 10px 0; }
.mx-quote p { margin: 0; }
.mx-quote__en { font-size: var(--fs-sm); font-style: italic; color: var(--muted); }
.mx-quote__ko { margin: 2px 0 4px !important; font-size: 16px; color: var(--text-strong); }
.mx-quote__tip { font-size: var(--fs-sm); color: color-mix(in srgb, var(--accent, #8B5CF6) 70%, #fff); }
.mx-quote__tip span { margin-right: 6px; padding: 0 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); border: 1px solid currentColor; border-radius: 5px; }
.mx-prices { width: 100%; margin-top: var(--sp-3); border-collapse: collapse; font-size: 16px; }
.mx-prices td, .mx-prices th { padding: 9px 6px; border-bottom: 1px solid var(--line); }
.mx-prices th { padding-top: 14px; text-align: left; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.mx-prices td:last-child { text-align: right; white-space: nowrap; font-weight: 800; color: #E3B35C; font-variant-numeric: tabular-nums; }
.mx-prices td:first-child { display: flex; align-items: center; }
.mx-prices img { display: inline-block; flex: none; width: 28px; height: 28px; margin-right: 10px; object-fit: contain; }
.mx-prices s { margin-right: 6px; font-weight: 400; color: var(--muted); }
.mx-sale { color: #5fd38a; }
.mx-trade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: var(--sp-3) 0 0; padding: 12px 14px; font-size: 15px; color: var(--text-sub); background: rgba(227,179,92,.08); border: 1px solid rgba(227,179,92,.45); border-radius: 12px; }
.mx-trade dt { font-size: var(--fs-xs); color: var(--muted); }
.mx-trade dd { margin: 2px 0 0; font-weight: var(--fw-bold); color: #ffe0a8; }
.mx-trade b { color: #ffe0a8; }
.mx-trade--note { display: block; } .mx-trade--note p { margin: 0; } .mx-trade--note p + p { margin-top: 6px; }
.mx-extra { margin-top: var(--sp-3); }
/* 가격 비교 */
.mx-tablewrap { overflow-x: auto; }
.mx-cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.mx-cmp th, .mx-cmp td { padding: 9px 8px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); }
.mx-cmp th { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.mx-cmp th:first-child, .mx-cmp td:first-child { text-align: left; color: var(--text-strong); }
.mx-cmp td.up { color: #ffb86b; } .mx-cmp td.sale { font-weight: 700; color: #5fd38a; }
/* 사는 순서: 상자 카드와 같은 틀 두 장 + 아래 예시 표 */
.mx-order { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mx-order figure { margin: 0; }
.mx-order__pic { display: grid; place-items: center; height: 280px; padding: var(--sp-4); --art-glow-c: var(--rarity-l); border-bottom: 1px solid var(--art-line); } /* 바탕 = 누끼 그림 칸 (dnd2.css .art-cut, 빛은 금색) */
/* 사는 순서 그림 위 번호 (js numFig): 사이트 톤 번호표 — 어두운 유리 동그라미 + 보라 테두리, 시작 칸(1)만 금색 */
.mx-numfig { position: relative; line-height: 0; }
.mx-numfig img { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 8px 6px rgba(0,0,0,.7)); }
.mx-numfig--shop { width: min(100%, 432px); }   /* 192 × 40 도트를 2.25배 */
.mx-numfig--field { width: min(44%, 140px); margin-top: 22px; }   /* 74 × 110 도트를 약 1.9배, 위에 1번 자리 */
.mx-n { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; transform: translate(-50%, -50%);
  font: 700 13px/1 var(--font-sans, inherit); color: #fff; font-variant-numeric: tabular-nums;
  background: rgba(14,15,19,.82); border: 1.5px solid var(--accent, #8B5CF6); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(139,92,246,.14), 0 4px 10px rgba(0,0,0,.55); backdrop-filter: blur(2px); pointer-events: none; }
.mx-numfig .mx-n { color: #fff; }   /* .mx-order b 의 글자색보다 앞서게 */
.mx-numfig .mx-n1 { color: #1a1206; background: #E3B35C; border-color: #f3cf86; box-shadow: 0 0 0 3px rgba(227,179,92,.18), 0 4px 10px rgba(0,0,0,.55); }   /* 시작 칸 */
.mx-order figcaption { padding: 14px 16px 16px; }
.mx-order b, .mx-order__ex b { color: var(--text-strong); }
.mx-order__ex { width: 100%; margin-top: var(--sp-3); border-collapse: collapse; font-size: 15px; color: var(--text-sub); }
.mx-order__ex caption { padding-bottom: var(--sp-2); text-align: left; font-size: var(--fs-sm); color: var(--muted); }
.mx-order__ex th, .mx-order__ex td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.mx-order__ex th { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.mx-order__ex td:first-child { width: 40%; }
/* 상자 카드 */
.mx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.mx-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.mx-card__pic { display: flex; justify-content: center; align-items: center; gap: 14px; height: 140px; padding: 10px; --art-glow-c: var(--rarity-l); border-bottom: 1px solid var(--art-line); } /* 바탕 = 누끼 그림 칸 (빛은 금색) */
.mx-card__pic img { max-height: 100px; max-width: 64%; filter: drop-shadow(0 8px 6px rgba(0,0,0,.7)); }
.mx-card > div:last-child { padding: 14px 16px 16px; }
.mx-card h3 { margin: 0 0 6px; font-size: 17px; color: var(--text-strong); }
.mx-card p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-sub); }
.mx-gear { display: inline-block; margin-top: 10px; padding: 3px 11px; font-size: var(--fs-xs); color: #ffd9a0; background: rgba(227,179,92,.12); border-radius: 999px; }
.mx-gear.is-no { color: #ff9a9a; background: rgba(255,122,122,.1); }
.mx-slots-pic { height: 76px; }
.mx-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.mx-slots > div { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.mx-slots b { display: block; margin-bottom: 4px; font-size: 16px; color: var(--text-strong); }
.mx-slots em { margin-left: 8px; padding: 1px 8px; font-size: 12px; font-style: normal; border-radius: 6px; }
.mx-slots .t1 { color: #c4b5fd; background: rgba(139,92,246,.18); } .mx-slots .t2 { color: #5fd38a; background: rgba(95,211,138,.14); } .mx-slots .t3 { color: #E3B35C; background: rgba(227,179,92,.15); }
.mx-slots p { margin: 0; font-size: 15px; color: var(--text-sub); }
.mx-slots .mx-ex { margin-top: 10px; padding-top: 10px; font-size: var(--fs-sm); border-top: 1px dashed var(--line-strong, var(--line)); }
/* LB오일 (상세 칸 안 · 좁은 폭) */
.mx-lbo .mk-h4 small { font-weight: 400; color: var(--muted); }
.mx-react { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mx-react li { padding: 10px 12px; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-sub); border: 1px solid var(--line); border-radius: 10px; }
.mx-react b { display: block; margin-bottom: 2px; font-size: 15px; color: var(--text-strong); }
.mx-count { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mx-count li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 44px; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.mx-count small { color: var(--muted); }
.mx-count i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #ff8a3d, #ffcf5c) 0 0 / calc(var(--v) * 100%) 100% no-repeat, rgba(255,255,255,.06); }
.mx-count b { text-align: right; color: #ffcf5c; }
.mx-crit { display: grid; gap: 10px; }
.mx-crit figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.mx-crit img { display: block; width: 100%; }
.mx-crit figcaption { padding: 10px 12px; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-sub); }
.mx-crit figcaption b { display: block; margin-bottom: 2px; font-size: 15px; color: var(--text-strong); }
.mx-thief { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 8px 0 0; }
.mx-thief div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.mx-thief dt { color: var(--text-sub); } .mx-thief dd { margin: 0; font-weight: 700; color: #ffcf5c; }
@media (max-width: 1024px) { .mx-cards { grid-template-columns: 1fr 1fr; } .mx-rules { grid-template-columns: 1fr 1fr; } .mx-rules div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .mx-rules div:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 768px) {
  .mx-box { padding: var(--sp-4) var(--sp-3); }
  .mx-detail, .mx-slots, .mx-cards { grid-template-columns: 1fr; }
  .mx-rules { grid-template-columns: 1fr; }
  .mx-rules div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .mx-rules div:last-child { border-bottom: 0; }
  .mx-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mx-branches { grid-template-columns: 1fr; }
  .mx-order { grid-template-columns: 1fr; }
  .mx-order__pic { height: auto; min-height: 200px; }   /* 그림 높이만큼 (필드 그림 발이 잘리지 않게) */
  .mx-thief { grid-template-columns: 1fr; }
}