/* ═══════════════════════════════════════════════════════════════
   메시뮬 — 3D 패닝 메이플 캐릭터 플랫폼
   다크 테마 + CSS 3D Transforms
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a12;
  --bg-card: #12121e;
  --bg-card-hover: #1a1a2e;
  --border: #252540;
  --text: #e8e8f0;
  --text-dim: #888899;
  --gold: #ffd700;
  --gold-dim: #b8960f;
  --accent: #4fffce;
  --accent-dim: #2a9d7e;
  --danger: #ff6b6b;
  --info: #6bc5ff;

  --perspective-subtle: 1200px;
  --perspective-strong: 400px;
  --perspective: var(--perspective-subtle);
  --transition-speed: 0.8s;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

  --tabbar-h: 48px;
  --section-w: 100vw;
  --section-h: calc(100vh - var(--tabbar-h));
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   탭바
   ═══════════════════════════════════════════════════════════════ */
#tabbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--tabbar-h);
  background: rgba(10, 10, 18, 0.96);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px;
  z-index: 1000;
}

.tab-logo {
  font-size: 1.2em; font-weight: 800;
  color: var(--gold);
  letter-spacing: 1px;
  position: absolute;
  left: 20px;
}
.btn-roadmap {
  position: absolute;
  left: 130px;
  padding: 5px 12px;
  background: rgba(255,215,0,0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-roadmap:hover {
  background: rgba(255,215,0,0.18);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255,215,0,0.25);
}

/* ── 로드맵 모달 ── */
.roadmap-modal {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2500;
  display: flex; align-items: center; justify-content: center;
}
.roadmap-modal.hidden { display: none; }
.roadmap-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  cursor: pointer;
}
.roadmap-content {
  position: relative;
  background: linear-gradient(180deg, #1a1a2e 0%, #14141f 100%);
  border: 2px solid var(--gold-dim);
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
  max-width: 600px;
  width: 90%;
}
.roadmap-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.roadmap-header h2 {
  color: var(--gold);
  font-size: 1.3em;
  font-weight: 800;
  letter-spacing: 1px;
}
.roadmap-close {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
}
.roadmap-close:hover { background: rgba(255,80,80,0.2); color: var(--text); border-color: var(--danger); }

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 80px);
  gap: 8px;
}
.rm-cell {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text);
  font-size: 0.85em;
  font-weight: 600;
}
.rm-cell:hover {
  background: rgba(255,215,0,0.1);
  border-color: var(--gold);
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(255,215,0,0.2);
}
.rm-cell.rm-current {
  background: rgba(79,255,206,0.15);
  border-color: var(--accent);
  box-shadow: inset 0 0 12px rgba(79,255,206,0.2);
}
.rm-cell.rm-home {
  background: rgba(255,215,0,0.12);
  border-color: var(--gold);
}
.rm-cell.rm-empty {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.05);
  cursor: default;
  pointer-events: none;
}
.rm-icon { font-size: 1.5em; }
.roadmap-hint {
  margin-top: 14px;
  font-size: 0.75em;
  color: var(--text-dim);
  text-align: center;
}

.tab-buttons { display: flex; gap: 4px; flex: 1; justify-content: center; }

.tab-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.tab-btn.active {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(255, 215, 0, 0.08);
}

.tab-controls { display: flex; gap: 8px; align-items: center; position: absolute; right: 20px; }

.tab-search {
  display: none; gap: 4px;
}
body.char-loaded .tab-search { display: flex; }
.tab-search input {
  padding: 5px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  width: 130px;
  outline: none;
  transition: border-color 0.2s;
}
.tab-search input:focus { border-color: var(--gold-dim); }
.tab-search input::placeholder { color: var(--text-dim); }
.tab-search button {
  padding: 5px 12px;
  background: var(--gold-dim);
  border: none; border-radius: 6px;
  color: #111; font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.tab-search button:hover { background: var(--gold); }
#btn-3d-toggle {
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 11px; cursor: pointer;
  transition: all 0.2s;
}
#btn-3d-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   3D 뷰포트
   ═══════════════════════════════════════════════════════════════ */
#viewport {
  position: fixed;
  top: var(--tabbar-h); left: 0;
  width: 100vw;
  height: var(--section-h);
  overflow: clip;
}

#world {
  position: absolute;
  width: 100%; height: 100%;
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform var(--transition-speed) var(--transition-ease);
}

/* ── 섹션 공통 ── */
.section {
  position: absolute;
  width: var(--section-w);
  height: var(--section-h);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
  /* 성능: 화면 밖 섹션은 브라우저가 렌더 스킵 (54 보스카드 등 무거운 DOM 최적화) */
  content-visibility: auto;
  contain-intrinsic-size: 100vw 100vh;
  contain: layout paint style;
}
/* 홈 섹션은 스크롤 막음 — 한 화면 고정 */
.section-home {
  overflow: hidden !important;
}



/* ── 섹션 배치 ── */
.section-home    { transform: translate3d(0, 0, 0); }
/* 좌측 열 (col -1) */
.section-boss    { transform: translate3d(-100vw, -100vh, 0); }
.section-equip   { transform: translate3d(-100vw, 0, 0); }
.section-skill   { transform: translate3d(-100vw, 100vh, 0); }
/* 더 좌측 (col -2) */
.section-equipMaker { transform: translate3d(-200vw, 0, 0); }
.section-skillSetup { transform: translate3d(-200vw, 100vh, 0); }
/* 더 좌측 (col -3) — 파티(상) / 심볼(중) / 최적화(하) */
.section-party      { transform: translate3d(-300vw, -100vh, 0); }
.section-optimize   { transform: translate3d(-300vw, 100vh, 0); }
.section-symbol     { transform: translate3d(-300vw, 0, 0); }
/* 우측 */
.section-hub     { transform: translate3d(100vw, 0, 0); }
/* 하단 */
.section-ranking { transform: translate3d(0, 100vh, 0); }

/* ═══════════════════════════════════════════════════════════════
   홈 섹션 — 명예의전당 느낌
   ═══════════════════════════════════════════════════════════════ */
.section-home {
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

.home-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  gap: 2px;
  padding: 24px 16px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ── 글로우 존 (코너 호버 → 미니멀 라벨 + 미세 빛) ── */
.glow-zone { display: none; }

.glow-zone span {
  position: absolute;
  font-family: 'Maplestory Bold', 'Maplestory', sans-serif;
  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.2);
  pointer-events: none;
  transition: color 0.4s, letter-spacing 0.4s, text-shadow 0.4s;
}
.glow-zone:hover span {
  color: rgba(255,255,255,0.7);
  letter-spacing: 6px;
  text-shadow: 0 0 20px rgba(255,255,255,0.15);
}

/* 좌측 상 — 보스 */
.glow-lt {
  top: 0; left: 0;
  width: 22%; height: 33%;
  background: radial-gradient(ellipse at 0% 0%, rgba(255,255,255,0.04) 0%, transparent 50%);
}
.glow-lt span { top: 24px; left: 24px; }

/* 좌측 중 — 아이템메이커 */
.glow-lm {
  top: 33%; left: 0;
  width: 18%; height: 34%;
  background: radial-gradient(ellipse at 0% 50%, rgba(255,255,255,0.03) 0%, transparent 45%);
}
.glow-lm span { top: 50%; left: 24px; transform: translateY(-50%); }

/* 좌측 하 — 스킬시뮬 */
.glow-lb {
  bottom: 0; left: 0;
  width: 22%; height: 33%;
  background: radial-gradient(ellipse at 0% 100%, rgba(255,255,255,0.04) 0%, transparent 50%);
}
.glow-lb span { bottom: 24px; left: 24px; }

/* 우측 상 — 종합허브 / 스킬→홈 */
.glow-rt {
  top: 0; right: 0;
  width: 35%; height: 45%;
  background: radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.04) 0%, transparent 55%);
}
.glow-rt span { top: 24px; right: 24px; }

/* 우측 하 — 랭킹 / 보스→홈 */
.glow-rb {
  bottom: 0; right: 0;
  width: 35%; height: 45%;
  background: radial-gradient(ellipse at 100% 100%, rgba(255,255,255,0.04) 0%, transparent 55%);
}
.glow-rb span { bottom: 24px; right: 24px; }

/* 호버 시 캐릭터 미세 밀림 */
body.door-hover-left .home-content {
  transform: scale(0.96) translateX(10px);
  opacity: 0.92;
}
body.door-hover-right .home-content {
  transform: scale(0.96) translateX(-10px);
  opacity: 0.92;
}

/* 서브룸용 방향 글로우 (상/하/좌/우) */
.glow-r {
  top: 0; right: 0;
  width: 25%; height: 100%;
  background: radial-gradient(ellipse at 100% 50%, rgba(255,255,255,0.03) 0%, transparent 50%);
}
.glow-r span { top: 50%; right: 28px; transform: translateY(-50%); }

.glow-l {
  top: 0; left: 0;
  width: 25%; height: 100%;
  background: radial-gradient(ellipse at 0% 50%, rgba(255,255,255,0.03) 0%, transparent 50%);
}
.glow-l span { top: 50%; left: 28px; transform: translateY(-50%); }

.glow-t {
  top: 0; left: 0;
  width: 100%; height: 25%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 50%);
}
.glow-t span { top: 24px; left: 50%; transform: translateX(-50%); }

.glow-b {
  bottom: 0; left: 0;
  width: 100%; height: 25%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.03) 0%, transparent 50%);
}
.glow-b span { bottom: 24px; left: 50%; transform: translateX(-50%); }

@media (max-width: 768px) {
  .glow-zone { display: none; }
}

/* ── 서브룸 레이아웃 + 광고 ── */
.room-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  gap: 16px;
}
.room-layout-rtl {
  flex-direction: row-reverse;
}
.room-content {
  flex: 1;
  min-width: 0;
  max-width: 900px;
  margin: 0 auto;
}
.room-ad {
  display: none;
  position: fixed;
  top: calc(var(--tabbar-h) + 16px);
  z-index: 50;
}
.room-ad-left { left: 24px; }
.room-ad-right { right: 24px; }
.ad-slot {
  width: 160px;
  min-height: 600px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.06);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.12);
  font-size: 0.7em;
  letter-spacing: 2px;
}
@media (min-width: 1200px) {
  .room-ad { display: block; }
}

/* 세로 레이아웃 (랭킹 등 — 하단 광고) */
.room-layout-col {
  flex-direction: column;
  min-height: 100%;
}
.room-layout-col .room-content {
  flex: 1;
}
.room-ad-bottom {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  width: auto;
  display: none;
  z-index: 50;
}
.room-ad-bottom .ad-slot-h {
  width: 728px;
  min-height: 90px;
  height: 90px;
}
@media (min-width: 800px) {
  .room-ad-bottom { display: block; }
}

.home-trophy { text-align: center; }

.home-title {
  font-size: 3.5em;
  font-weight: 900;
  letter-spacing: 6px;
  background: linear-gradient(135deg, var(--gold) 0%, #fff8dc 40%, var(--gold) 70%, #ffe88a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 4px;
  text-shadow: none;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

.home-subtitle {
  color: var(--text-dim);
  font-size: 0.95em;
  margin-top: 4px;
  letter-spacing: 2px;
}

.search-error { color: var(--danger); font-size: 0.85em; text-align: center; padding: 6px; }

/* ── 랭킹 명예의 전당 ── */
.ranking-hall {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 24px;
  background: linear-gradient(180deg, rgba(255,215,0,0.04) 0%, rgba(0,0,0,0) 100%);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 14px;
  padding: 20px;
}
.ranking-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 6px;
}
.ranking-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.rh-tab {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.rh-tab:hover { color: var(--text); }
.rh-tab.active {
  color: var(--gold);
  background: rgba(255,215,0,0.08);
  border-color: rgba(255,215,0,0.2);
}
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rh-loading {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8em;
  padding: 20px;
}
.rh-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.rh-item:hover {
  background: rgba(255,215,0,0.06);
  border-color: rgba(255,215,0,0.25);
  transform: translateX(3px);
}
.rh-rank {
  font-size: 0.9em;
  font-weight: 800;
  color: var(--gold);
  min-width: 28px;
  text-align: center;
}
.rh-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}
.rh-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.rh-name {
  font-size: 0.88em;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rh-sub {
  font-size: 0.68em;
  color: var(--text-dim);
}
.rh-metric {
  font-size: 0.78em;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* ── 검색 ── */
.search-box {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

#char-input {
  flex: 1;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 2px solid var(--gold-dim);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
#char-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}
#char-input::placeholder { color: var(--text-dim); }

#btn-search {
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  border: none; border-radius: 10px;
  color: #111; font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.3s;
}
#btn-search:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3);
}
#btn-search:active { transform: scale(0.98); }

/* ── 캐릭터 카드 (히어로 이미지 + 정보 바) ── */
.char-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 520px;
  animation: fadeUp 0.5s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.char-hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.char-img {
  height: 500px;
  width: auto;
  object-fit: contain;
  transform: translateY(-40px) scale(1.92);   /* 0.8x 추가 축소 (2.4 → 1.92) */
  transform-origin: center center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
  pointer-events: none;  /* 캐릭터 이미지가 버튼 클릭 가로채는 것 방지 */
}
/* 상세보기 버튼 클릭 보장 — 캐릭 이미지 위로 z-index */
.char-bottom-row { position: relative; z-index: 5; }
.btn-detail { position: relative; z-index: 6; }

/* ── 캐릭터 모션 애니메이션 (4종) ── */
.char-img.motion-stand1  { animation: motionFloat 2.5s ease-in-out infinite; }
.char-img.motion-walk1   { animation: motionWalk 1.2s ease-in-out infinite; }
.char-img.motion-jump    { animation: motionJump 1.5s ease-in-out infinite; }
.char-img.motion-fly     { animation: motionFly 3s ease-in-out infinite; }

@keyframes motionFloat {
  0%, 100% { transform: translateY(-40px) scale(3); }
  50%      { transform: translateY(-54px) scale(3); }
}
@keyframes motionWalk {
  0%, 100% { transform: translateX(0) translateY(-40px) scale(3); }
  25%      { transform: translateX(-12px) translateY(-46px) scale(3); }
  50%      { transform: translateX(0) translateY(-40px) scale(3); }
  75%      { transform: translateX(12px) translateY(-46px) scale(3); }
}
@keyframes motionJump {
  0%, 100% { transform: translateY(-40px) scale(3); }
  15%      { transform: translateY(-35px) scale(3); }
  50%      { transform: translateY(-90px) scale(3); }
  80%      { transform: translateY(-40px) scale(3); }
  90%      { transform: translateY(-48px) scale(3); }
}
@keyframes motionFly {
  0%, 100% { transform: translateY(-60px) rotate(-1deg) scale(3); }
  50%      { transform: translateY(-75px) rotate(1deg) scale(3); }
}


.char-name-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.char-name {
  font-size: 1.4em; font-weight: 800;
  color: var(--text);
}

.char-level-tag, .char-job-tag, .char-server-tag {
  font-size: 0.78em;
  padding: 2px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  color: var(--text-dim);
}

/* 상세보기 + 모션 한 줄 */
.char-bottom-row {
  display: flex; gap: 8px; align-items: center;
  justify-content: center;
}

/* 배경 테마 드롭다운 */
.theme-dropdown { position: relative; z-index: 1001; }
.btn-theme-dd {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 11px; cursor: pointer;
  transition: all 0.2s;
}
.btn-theme-dd:hover { border-color: var(--gold-dim); color: var(--gold); }
.theme-dd-options {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 100px;
  z-index: 100;
}
.theme-dd-opt {
  padding: 5px 10px;
  background: transparent;
  border: none; border-radius: 4px;
  color: var(--text-dim);
  font-size: 11px; cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.theme-dd-opt:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.theme-dd-opt.active { color: var(--gold); background: rgba(255,215,0,0.08); }

.btn-detail {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 11px; cursor: pointer;
  transition: all 0.2s;
}
.btn-detail:hover { border-color: var(--gold-dim); color: var(--gold); }

/* ── 상세 패널 (우측 슬라이드) ── */
.detail-panel {
  position: absolute;
  top: 0; right: 0;
  width: 640px;
  height: 100%;
  background: rgba(12, 12, 24, 0.97);
  border-left: 1px solid var(--border);
  padding: 20px 16px;
  overflow-y: auto;
  z-index: 20;
  animation: slideInRight 0.3s ease;
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.detail-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: all 0.15s;
}
.detail-close:hover { color: var(--text); background: rgba(255,80,80,0.2); border-color: var(--danger); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.stat-compare-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.stat-col { flex: 1; min-width: 0; }
.stat-col-title { font-size: 0.85em; color: var(--text-dim); margin-bottom: 8px; font-weight: 700; }

.stat-item {
  background: rgba(255,255,255,0.03);
  padding: 8px 12px;
  border-radius: 8px;
}
.stat-label { font-size: 0.72em; color: var(--text-dim); }
.stat-val { font-size: 1.05em; font-weight: 700; color: var(--text); }

.sub-info {
  margin-top: 14px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.sub-tag {
  font-size: 0.78em;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  color: var(--text-dim);
}

/* ── 방향 화살표 ── */
.nav-arrows {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.arrow-btn {
  padding: 10px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.arrow-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(79, 255, 206, 0.05);
}

/* ═══════════════════════════════════════════════════════════════
   전투존 로비
   ═══════════════════════════════════════════════════════════════ */
.section-title {
  font-size: 1.6em; font-weight: 800;
  color: var(--gold);
  margin-bottom: 8px;
}
.section-desc {
  color: var(--text-dim);
  font-size: 0.9em;
  margin-bottom: 24px;
}

.door-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.door-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
}
.door-card:hover {
  border-color: var(--gold-dim);
  background: var(--bg-card-hover);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.door-icon { font-size: 2.4em; margin-bottom: 12px; }
.door-card h3 { font-size: 1.1em; color: var(--text); margin-bottom: 6px; }
.door-summary { font-size: 0.78em; color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════
   서브룸 공통
   ═══════════════════════════════════════════════════════════════ */
.btn-back {
  padding: 8px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.2s;
}
.btn-back:hover { border-color: var(--accent-dim); color: var(--accent); }

.placeholder {
  color: var(--text-dim);
  font-size: 0.9em;
  padding: 40px 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   종합허브
   ═══════════════════════════════════════════════════════════════ */
.hub-tabs {
  display: flex; gap: 6px;
  margin-bottom: 16px;
}

.hub-tab {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.hub-tab:hover { color: var(--text); }
.hub-tab.active {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(79, 255, 206, 0.06);
}

.hub-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  min-height: 300px;
}

/* 코디 탭 */
.beauty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.beauty-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.beauty-label { font-size: 0.7em; color: var(--text-dim); }
.beauty-name { font-size: 0.95em; font-weight: 700; color: var(--text); margin-top: 2px; }
.beauty-meta { font-size: 0.7em; color: var(--text-dim); margin-top: 4px; }

.cash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.cash-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  transition: all 0.15s;
}
.cash-item:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.cash-item img {
  width: 32px; height: 32px;
  object-fit: contain;
  display: block; margin: 0 auto 6px;
}
.cash-empty { height: 32px; margin-bottom: 6px; }
.cash-slot-name { font-size: 0.65em; color: var(--text-dim); }
.cash-name {
  font-size: 0.75em; font-weight: 600; color: var(--text);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 정보방 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.info-item {
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 8px 10px;
}
.info-label { font-size: 0.7em; color: var(--text-dim); }
.info-val { font-size: 0.95em; font-weight: 700; color: var(--text); margin-top: 2px; }

.ability-list {
  display: flex; flex-direction: column; gap: 4px;
}
.ability-item {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 10px; background: rgba(255,255,255,0.03);
  border-radius: 6px; font-size: 0.85em;
}
.ability-grade {
  padding: 1px 6px; border-radius: 4px;
  background: rgba(255,215,0,0.1); color: var(--gold);
  font-size: 0.75em; font-weight: 700;
  min-width: 50px; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   랭킹존
   ═══════════════════════════════════════════════════════════════ */
.ranking-content { padding-top: 20px; }

/* ═══════════════════════════════════════════════════════════════
   캐릭터 미니 카드 (이동 시 우측 상단 축소)
   ═══════════════════════════════════════════════════════════════ */
.char-mini {
  position: fixed;
  top: calc(var(--tabbar-h) + 10px);
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 18, 30, 0.96);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 12px;
  z-index: 900;
  animation: fadeUp 0.3s ease;
}

.mini-img {
  width: 32px; height: 32px;
  border-radius: 6px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

.mini-info {
  display: flex;
  flex-direction: column;
  font-size: 0.75em;
}
.mini-info span:first-child { font-weight: 700; color: var(--text); }
.mini-info span:last-child { color: var(--accent); font-weight: 600; }

/* 모든 섹션 반투명 - 맵 배경 보이되 인접 섹션 새어나옴 방지 */
.section-party,
.section-boss, .section-bossSim, .section-equip, .section-skill,
.section-hub, .section-ranking,
.section-equipMaker, .section-skillSetup,
.section-symbol, .section-optimize {
  background: rgba(10, 10, 18, 0.82);
}
.section > *:not(.glow-zone):not(.detail-panel) { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   배경 테마 피커
   ═══════════════════════════════════════════════════════════════ */
.theme-picker {
  position: fixed;
  bottom: 16px; right: 16px;
  z-index: 900;
}
.theme-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { border-color: var(--gold); transform: scale(1.1); }
.theme-options {
  position: absolute;
  bottom: 48px; right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 140px;
}
.theme-opt {
  padding: 6px 12px;
  background: transparent;
  border: none; border-radius: 6px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.theme-opt:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.theme-opt.active { color: var(--gold); background: rgba(255,215,0,0.08); }

/* 맵 배경 오버레이 */
#map-bg {
  position: fixed;
  top: var(--tabbar-h); left: 0;
  width: 100vw; height: calc(100vh - var(--tabbar-h));
  background-size: cover;
  background-position: center bottom;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.8s;
  pointer-events: none;
}
#map-bg.active { opacity: 0.25; }
#viewport { z-index: 2; }
#tabbar { z-index: 1000; }


/* ═══════════════════════════════════════════════════════════════
   스크롤바 커스텀 (다크)
   ═══════════════════════════════════════════════════════════════ */
.section::-webkit-scrollbar { width: 6px; }
.section::-webkit-scrollbar-track { background: transparent; }
.section::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.section::-webkit-scrollbar-thumb:hover { background: #444; }

/* ═══════════════════════════════════════════════════════════════
   보스방
   ═══════════════════════════════════════════════════════════════ */
.dojang-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.dojang-card h3 { color: var(--gold); font-size: 1em; }
.dojang-info { display: flex; gap: 12px; }
.dojang-floor { font-size: 1.4em; font-weight: 800; color: var(--accent); }
.dojang-time { color: var(--text-dim); font-size: 0.9em; }

.boss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.boss-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.boss-mob-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 6px;
}
.boss-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.boss-name { font-weight: 700; font-size: 0.92em; margin-bottom: 6px; }
.boss-diff { font-size: 0.7em; padding: 1px 6px; border-radius: 3px; display: inline-block; margin-bottom: 4px; }

/* 보기 토글 바 */
.boss-view-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.boss-af-badge { font-size: 0.75em; color: var(--gold-dim); }
.boss-view-toggle { display: flex; gap: 4px; }
.bvt-btn { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text-sub); padding: 4px 12px; font-size: 0.78em; cursor: pointer; transition: all 0.2s; }
.bvt-btn.active { background: var(--gold-dim); color: #000; border-color: var(--gold-dim); font-weight: 700; }

/* 난이도 탭 */
.boss-diff-tabs { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; margin-bottom: 6px; }
.diff-tab { font-size: 0.68em; padding: 2px 7px; border-radius: 4px; border: 1px solid #444; background: #1a1a2a; color: #aaa; cursor: pointer; transition: all 0.15s; }
.diff-tab.active { background: var(--gold-dim); color: #000; border-color: var(--gold-dim); font-weight: 700; }
.diff-tab.locked { opacity: 0.35; border-style: dashed; }
.diff-tab:hover:not(.active) { border-color: var(--gold-dim); color: var(--gold-dim); }

/* 난이도 패널 */
.diff-panel { display: none; text-align: center; }
.diff-panel.active { display: block; }
.boss-af-req { font-size: 0.68em; color: #f97; margin-bottom: 2px; }
.boss-time-limit { font-size: 0.68em; color: #7bf; margin-bottom: 2px; }

/* 보스 시뮬방 */
.section-bossSim { transform: translate3d(-200vw, -100vh, 0); }

/* 최적화 섹션 */
/* 최적화 통합 섹션 */
.opt-section {
  margin-bottom: 24px; padding: 16px; border-radius: 12px;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08);
}
.opt-section-title {
  margin: 0 0 12px; font-size: 14px; color: #ffd060;
  letter-spacing: 0.5px; font-weight: 700;
  border-bottom: 1px solid rgba(255,200,80,0.15); padding-bottom: 8px;
}
.opt-section-body { font-size: 13px; }

/* 스킬 레벨 조정 방 */
.skill-lv-toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.skill-lv-toolbar .slv-btn {
  padding: 6px 14px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color: #ccc; cursor: pointer; font-size: 12px;
  transition: all 0.15s;
}
.skill-lv-toolbar .slv-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.skill-lv-toolbar .slv-btn.reset { border-color: rgba(255,180,80,0.4); color: #ffb850; }
.skill-lv-section-title { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 8px; }
.skill-lv-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-lv-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 76px; padding: 10px 6px 8px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer; transition: all 0.15s; position: relative;
  transform: translateZ(0); will-change: transform;
}
.skill-lv-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(100,180,255,0.4); transform: translateY(-2px); }
.skill-lv-card.modified { border-color: rgba(100,220,130,0.5); background: rgba(100,220,130,0.07); }
.skill-lv-card img { width: 40px; height: 40px; object-fit: contain; }
.skill-lv-card .slc-name { font-size: 10px; color: #bbb; text-align: center; line-height: 1.2; word-break: keep-all; }
.skill-lv-card .slc-lv {
  font-size: 11px; font-weight: 700; color: #7ec8ff;
  background: rgba(0,0,0,0.4); border-radius: 5px; padding: 1px 6px;
}
.skill-lv-card .slc-lv.maxed { color: #ffd700; }
.skill-lv-card .slc-modified-dot {
  position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%; background: #64dc82;
}

/* 스킬 레벨 모달 */
.skill-lv-modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.skill-lv-modal {
  background: #13141f; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px; width: 320px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  animation: slm-in 0.18s ease;
}
@keyframes slm-in { from { opacity:0; transform: scale(0.92) translateY(10px); } to { opacity:1; transform: none; } }
.skill-lv-modal-header {
  display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.slm-icon { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); }
.slm-name { font-size: 15px; font-weight: 700; color: #fff; }
.slm-type { font-size: 11px; color: #888; margin-top: 2px; }
.slm-close { margin-left: auto; background: none; border: none; color: #666; font-size: 18px; cursor: pointer; padding: 4px 8px; }
.slm-close:hover { color: #fff; }
.skill-lv-modal-body { padding: 20px 20px 12px; }
.slm-lv-display { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; }
.slm-lv-label { font-size: 12px; color: #888; }
.slm-lv-val { font-size: 36px; font-weight: 800; color: #7ec8ff; line-height: 1; }
.slm-lv-max { font-size: 14px; color: #555; }
.slm-slider {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px; outline: none;
  background: linear-gradient(to right, #7ec8ff var(--pct,50%), rgba(255,255,255,0.1) var(--pct,50%));
}
.slm-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #7ec8ff; cursor: pointer; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(126,200,255,0.4);
}
.slm-presets { display: flex; gap: 8px; margin-top: 12px; }
.slm-preset {
  flex: 1; padding: 5px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05); color: #aaa; cursor: pointer; font-size: 12px;
}
.slm-preset:hover { background: rgba(255,255,255,0.1); color: #fff; }
.skill-lv-modal-footer {
  display: flex; gap: 8px; padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.slm-btn { flex: 1; padding: 9px; border-radius: 9px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; }
.slm-btn-cancel { background: rgba(255,255,255,0.08); color: #aaa; }
.slm-btn-cancel:hover { background: rgba(255,255,255,0.14); }
.slm-btn-apply { background: linear-gradient(135deg,#3a8eff,#1a6fd8); color: #fff; }
.slm-btn-apply:hover { filter: brightness(1.1); }
.boss-sim-area { display: flex; flex-direction: column; gap: 16px; }
.boss-sim-layout { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.boss-sim-visual { flex: 0 0 auto; }
.boss-sim-gif {
  width: 300px;
  height: 300px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 16px rgba(255,200,80,0.4));
}
.boss-sim-info { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 10px; }
.bsi-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.bsi-label { font-size: 0.8em; color: var(--text-sub); }
.bsi-val { font-weight: 700; font-size: 1em; }
.boss-sim-time { color: var(--gold-dim); }
.boss-sim-hint { font-size: 0.72em; color: var(--text-sub); opacity: 0.6; text-align: center; }
.diff-normal .boss-diff { background: #1a2a1a; color: #6c6; }
.diff-hard .boss-diff { background: #2a1a1a; color: #f77; }
.diff-extreme .boss-diff { background: #2a0a2a; color: #f6f; }
.diff-chaos .boss-diff { background: #1a1a2a; color: #88f; }
.boss-hp { font-size: 0.75em; color: var(--text-dim); }
.boss-time { font-size: 0.85em; font-weight: 700; color: var(--accent); margin-top: 4px; }

.doping-section { margin-top: 8px; }
.doping-section h3 { color: var(--text-dim); font-size: 0.85em; margin-bottom: 8px; }
.doping-group { margin: 6px 0; padding: 6px 10px; background: var(--bg-card); border-radius: 8px; border-left: 3px solid var(--border); }
.doping-group-title { color: #88f; font-size: 0.72em; margin-bottom: 4px; font-weight: 700; }
.doping-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.doping-btn {
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--text-dim); font-size: 0.72em;
  cursor: pointer; transition: all 0.15s;
}
.doping-btn:hover { border-color: #666; }
.doping-btn.on { border-color: var(--gold); background: rgba(255,215,0,0.08); color: var(--gold); }
.doping-bulk { display: flex; gap: 6px; margin-bottom: 8px; }
.doping-bulk-btn {
  padding: 4px 12px; border: 1px solid var(--gold-dim); border-radius: 4px;
  background: rgba(255,215,0,0.05); color: var(--gold); font-size: 0.75em;
  font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.doping-bulk-btn:hover { background: rgba(255,215,0,0.18); border-color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   장비창 (메이플 게임 스타일)
   ═══════════════════════════════════════════════════════════════ */
.equip-window {
  background: linear-gradient(180deg, #1a1a2e 0%, #14141f 100%);
  border: 2px solid var(--gold-dim);
  border-radius: 14px;
  padding: 20px;
  /* SKILLRING 패널이 left:-100px 붙어있으므로 시각 중앙 맞추려 50px 우측 오프셋 */
  margin: 0 auto 24px;
  margin-left: calc(50% - 264px + 50px);
  width: fit-content;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,215,0,0.1);
}

/* 세트효과 */
.set-details { margin-bottom: 16px; }
.set-details > summary.set-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.set-details > summary.set-summary::-webkit-details-marker { display: none; }
.set-details > summary.set-summary::before {
  content: '▾';
  font-size: 0.8em;
  color: var(--gold-dim, #c4a959);
  transition: transform 0.15s;
  display: inline-block;
}
.set-details:not([open]) > summary.set-summary::before { transform: rotate(-90deg); }
.set-count-total {
  font-size: 0.75em;
  color: var(--text-dim);
  font-weight: 500;
}
.set-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  max-width: 720px;  /* 광고 자리 확보 위해 가로 제한 */
}
.set-details { max-width: 720px; }
.equip-area { max-width: 760px; }
/* 5차 0레벨 코어 — 회색 처리 */
.core-card.core-zero {
  filter: grayscale(0.7) brightness(0.7);
  opacity: 0.75;
}
.core-card.core-zero .core-card-lv b {
  color: #888;
}
.set-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 10px 14px;
}
.set-name {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.set-count {
  font-size: 0.8em;
  color: var(--text-dim);
  font-weight: 500;
}
.set-effects {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.set-effect-row {
  display: flex;
  gap: 10px;
  font-size: 0.78em;
  padding: 2px 0;
  color: var(--text-dim);
}
.set-effect-row.set-active { color: var(--text); }
.set-tier {
  flex-shrink: 0;
  min-width: 42px;
  font-weight: 700;
  color: var(--accent);
}
.set-opt { flex: 1; }

/* 스킬/스킬설정 공통 윈도우 프레임 */
.skill-window {
  background: linear-gradient(180deg, #1a1a2e 0%, #14141f 100%);
  border: 2px solid var(--gold-dim);
  border-radius: 14px;
  padding: 14px;
  margin: 0 auto;
  max-width: 900px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,215,0,0.1);
}
/* 6차 HEXA 방: 헥사 패널 크기에 딱 맞게 */
#skill-setup-area .skill-window { width: fit-content; }
.skill-window > *:last-child { margin-bottom: 0 !important; }
.skill-window .hexamat-wrap { margin-bottom: 0; }
.skill-window .section-subtitle:first-child { margin-top: 0; }
@media (max-width: 1200px) {
  .equip-window { margin-left: auto; }
}
.equip-grid {
  display: grid;
  grid-template-columns: repeat(7, 64px);
  grid-template-rows: repeat(6, 64px);
  gap: 6px;
  position: relative;
}
/* 가운데 캐릭터 영역 (cols 3-5, rows 1-4) */
.equip-char-preview {
  grid-column: 3 / span 3;
  grid-row: 1 / span 4;
  background: rgba(0,0,0,0.15);
  border: 1px dashed rgba(255,255,255,0.06);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* SKILLRING 미니 패널 (장비창과 동일 스타일, 좌상단 외부) */
.equip-window { position: relative; }
.skillring-panel {
  position: absolute;
  top: 0;
  left: -100px;
  background: linear-gradient(180deg, #1a1a2e 0%, #14141f 100%);
  border: 2px solid var(--gold-dim);
  border-radius: 14px;
  padding: 14px 12px 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,215,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 5;
}
.skillring-label {
  font-size: 10px;
  font-weight: 800;
  color: #c4a959;
  letter-spacing: 1.5px;
}
.skillring-panel .equip-slot {
  width: 64px !important;
  height: 64px !important;
}
/* 시드링: 포켓 우측 인라인 슬롯 강조 */
.equip-slot.seed-ring {
  border-color: var(--gold-dim, #c4a959);
  box-shadow: 0 0 0 1px rgba(196,169,89,.3), inset 0 0 6px rgba(196,169,89,.12);
  position: relative;
}
.equip-slot.seed-ring .slot-badge {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 800;
  color: #c4a959;
  background: #0a0a12;
  padding: 1px 5px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  pointer-events: none;
}
.equip-char-preview { overflow: visible; }
.equip-char-preview img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transform: translateY(-18px) scale(3);
  transform-origin: center center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  pointer-events: none;
  position: relative;
  z-index: 0;
}
.equip-slot { z-index: 1; }
.equip-slot {
  position: relative;
  background: rgba(40, 32, 24, 0.5);
  border: 1px solid rgba(180, 140, 60, 0.2);
  border-radius: 4px;
  cursor: pointer;
  /* GPU 레이어 미리 할당 → hover 시 새 레이어 생성/소멸로 인한 깜빡임 방지 */
  transform: translateZ(0);
  will-change: transform;
  transition: all 0.15s;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.equip-slot.empty {
  background: rgba(255,255,255,0.02);
  cursor: default;
}
.equip-slot.empty .slot-hint {
  font-size: 0.55em;
  color: rgba(255,255,255,0.15);
  text-align: center;
  letter-spacing: 0;
}
.equip-slot.filled:hover {
  border-color: var(--gold);
  transform: scale(1.06);
  z-index: 2;
  box-shadow: 0 0 16px rgba(255,215,0,0.3);
}
.slot-icon {
  max-width: 90%;
  max-height: 90%;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}
/* 작은 native 이미지(엠블렘 등 32px대)는 pixelated가 더 선명 — JS가 .slot-icon-pixel 부여 */
.slot-icon.slot-icon-pixel {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
}
.slot-star {
  position: absolute;
  bottom: 2px;
  left: 3px;
  font-size: 0.6em;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 2px black, 0 0 2px black;
}
.slot-soul {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.7em;
  font-weight: 900;
  color: #ff69b4;
  text-shadow: 0 0 3px rgba(255,105,180,0.6), 0 0 4px black;
  pointer-events: none;
}
.popup-soul h4 { color: #ff69b4; }
/* 잠재능력 테두리 색상 */
.equip-slot.pot-legendary { border-color: #6fb34f; box-shadow: inset 0 0 6px rgba(111,179,79,0.3); }
.equip-slot.pot-unique    { border-color: #ffcc33; box-shadow: inset 0 0 6px rgba(255,204,51,0.3); }
.equip-slot.pot-epic      { border-color: #c77dff; box-shadow: inset 0 0 6px rgba(199,125,255,0.3); }
.equip-slot.pot-rare      { border-color: #4cc2ff; box-shadow: inset 0 0 6px rgba(76,194,255,0.3); }
/* 구형 잠재 등급 배경은 제거 (툴팁 내부로 이관됨) */

.section-subtitle {
  color: var(--gold); font-size: 0.95em; font-weight: 700;
  margin: 16px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}
.symbol-item {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px;
  display: flex; align-items: center; gap: 10px;
  transition: all 0.15s;
}
.symbol-item:hover { border-color: var(--gold-dim); }
.symbol-item.is-max { border-color: var(--gold); background: rgba(255,215,0,0.04); }
.symbol-icon {
  width: 32px; height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.symbol-info { flex: 1; min-width: 0; }
.symbol-name {
  font-size: 0.78em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.symbol-level { font-size: 0.82em; font-weight: 700; color: var(--accent); margin-top: 2px; }
.symbol-item.is-max .symbol-level { color: var(--gold); }
.symbol-bar {
  margin-top: 4px;
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}
.symbol-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transition: width 0.3s;
}
.symbol-item.is-max .symbol-bar-fill { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }

.hexastat-grid { display: flex; flex-direction: column; gap: 6px; }
.hexastat-item {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 12px;
}
.hexastat-main { font-size: 0.9em; font-weight: 700; color: var(--accent); }
.hexastat-subs { font-size: 0.78em; color: var(--text-dim); margin-top: 2px; }

/* ── 호버 툴팁 (CSS 기반 게임 스타일) ── */
.equip-tooltip {
  position: fixed;
  z-index: 3000;
  width: 290px;
  padding: 14px 16px;
  color: #e8e0d0;
  font-size: 12px;
  font-family: 'Maplestory Bold', 'Maplestory', 'Pretendard Variable', sans-serif;
  line-height: 1.5;
  /* 게임풍 갈색 배경 + 이중 테두리 */
  background: linear-gradient(180deg, #2a241c 0%, #1d1812 100%);
  border: 2px solid #3a342d;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(200, 165, 90, 0.3),
    0 8px 32px rgba(0,0,0,0.75);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.12s;
}
.equip-tooltip.hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.gt-divider {
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(180, 140, 60, 0.4) 15%,
    rgba(200, 165, 90, 0.7) 50%,
    rgba(180, 140, 60, 0.4) 85%,
    transparent 100%);
  margin: 8px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* 게임 툴팁 내부 (gt-) */
.gt { position: relative; }
.gt-stars {
  text-align: center;
  margin-bottom: 6px;
  line-height: 1;
}
.gt-star-row {
  font-size: 13px;
  line-height: 1.2;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.gt-star-group { letter-spacing: 1px; }
.gt-star-filled { color: #ffd92e; text-shadow: 0 0 3px rgba(255,217,46,0.6); }
.gt-star-filled.amazing { color: #4fd0ff; text-shadow: 0 0 4px rgba(79,208,255,0.8); }
.gt-star-empty  { color: #6b6258; }

/* 럭키아이템 뱃지 */
.gt-lucky {
  display: inline-block;
  font-size: 10px;
  color: #ff9e3f;
  background: rgba(255,158,63,0.15);
  border: 1px solid #ff9e3f;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 1px;
  text-shadow: 0 0 4px rgba(255,158,63,0.5);
}

.gt-name {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #ffd92e;
  text-shadow: 0 0 6px rgba(255,217,46,0.3);
  margin-bottom: 4px;
}
.gt-name.pot-legendary { color: #8ae06c; text-shadow: 0 0 6px rgba(138,224,108,0.4); }
.gt-name.pot-unique    { color: #ffcc33; text-shadow: 0 0 6px rgba(255,204,51,0.4); }
.gt-name.pot-epic      { color: #c77dff; text-shadow: 0 0 6px rgba(199,125,255,0.4); }
.gt-name.pot-rare      { color: #4cc2ff; text-shadow: 0 0 6px rgba(76,194,255,0.4); }

.gt-trade {
  text-align: center;
  font-size: 11px;
  color: #a39888;
  margin-bottom: 2px;
}

.gt-icon-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
}
.gt-icon-wrap {
  position: relative;
  width: 60px; height: 60px;
  background: rgba(0,0,0,0.4);
  border: 1px solid #3a342d;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gt-icon-wrap.pot-legendary { border-color: #8ae06c; box-shadow: inset 0 0 8px rgba(138,224,108,0.25); }
.gt-icon-wrap.pot-unique    { border-color: #ffcc33; box-shadow: inset 0 0 8px rgba(255,204,51,0.25); }
.gt-icon-wrap.pot-epic      { border-color: #c77dff; box-shadow: inset 0 0 8px rgba(199,125,255,0.25); }
.gt-icon-wrap.pot-rare      { border-color: #4cc2ff; box-shadow: inset 0 0 8px rgba(76,194,255,0.25); }
.gt-icon-wrap img {
  max-width: 90%; max-height: 90%;
  object-fit: contain;
}
.gt-icon-star {
  position: absolute;
  bottom: 2px; left: 3px;
  font-size: 10px; font-weight: 700;
  color: #ffd92e;
  text-shadow: 0 0 3px black, 0 0 3px black;
}
.gt-icon-soul {
  position: absolute;
  top: 2px; right: 3px;
  font-size: 11px; font-weight: 900;
  color: #ff69b4;
  text-shadow: 0 0 3px rgba(255,105,180,0.7), 0 0 4px black;
}
.gt-icon-info { flex: 1; }
.gt-equipped {
  font-size: 10px;
  color: #9ba89b;
}
.gt-slot {
  font-size: 12px;
  color: #d4c9b0;
  margin-top: 3px;
}

.gt-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #4a4238, transparent);
  margin: 6px 0;
}

.gt-meta-row {
  display: flex;
  font-size: 11px;
  padding: 1px 4px;
}
.gt-meta-k { color: #9ba89b; min-width: 64px; }
.gt-meta-v { color: #e8e0d0; }
.gt-lv-inc { color: #8ae06c; font-size: 0.92em; }

.gt-stats {
  padding: 4px 4px;
  font-size: 11.5px;
  line-height: 1.55;
}
.gt-stat {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 0;
}
.gt-stat-label {
  color: #d4c9b0;
  min-width: 64px;
}
.gt-stat-val {
  color: #e8e0d0;
  font-weight: 700;
  min-width: 48px;
}
.gt-stat-parts {
  font-size: 10px;
  color: #7a7268;
}
.bo-base   { color: #9c9486; }
.bo-add    { color: #4cc2ff; }
.bo-sf     { color: #ffcc33; }
.bo-scroll { color: #8ae06c; }
.bo-except { color: #ff69b4; }

.gt-scroll-info {
  font-size: 10.5px;
  color: #9ba89b;
  padding: 3px 0;
  text-align: center;
  margin-top: 2px;
}

.gt-pot {
  padding: 4px 2px;
  margin-top: 4px;
}
.gt-pot-title {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.gt-pot-dot {
  display: inline-block;
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: currentColor;
}
.gt-pot.pot-legendary .gt-pot-title { color: #8ae06c; }
.gt-pot.pot-unique    .gt-pot-title { color: #ffcc33; }
.gt-pot.pot-epic      .gt-pot-title { color: #c77dff; }
.gt-pot.pot-rare      .gt-pot-title { color: #4cc2ff; }
.gt-pot-line {
  font-size: 11.5px;
  color: #d4c9b0;
  padding: 1px 0 1px 14px;
}
.gt-except .gt-pot-title { color: #ff9e3f; }

.gt-soul { padding: 4px 2px; margin-top: 4px; }
.gt-soul-title {
  font-size: 11px;
  font-weight: 700;
  color: #ff69b4;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.gt-soul-title::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: currentColor;
}
.gt-soul-opt {
  font-size: 11.5px;
  color: #d4c9b0;
  padding: 1px 0 1px 14px;
}

/* 에디터 팝업 placeholder */
.editor-placeholder {
  padding: 16px;
  color: var(--text-dim);
  font-size: 0.85em;
  line-height: 1.8;
}
.editor-placeholder p {
  color: var(--accent);
  margin-bottom: 8px;
  font-weight: 600;
}
.editor-placeholder ul {
  list-style: none;
  padding: 0;
}

/* ── 장비 편집 팝업 (게임 스타일) ── */
.equip-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.popup-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); cursor: pointer; }
.popup-content {
  position: relative; z-index: 1;
  max-width: 380px; width: 90%;
  max-height: 85vh; overflow-y: auto;
}
.game-popup {
  background: linear-gradient(180deg, #242838 0%, #1a1d28 100%);
  border: 2px solid var(--gold-dim);
  border-radius: 10px;
  padding: 18px 16px 16px;
  color: #e8e8f0;
  font-size: 13px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.popup-close {
  position: absolute; top: 8px; right: 10px;
  width: 24px; height: 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.popup-close:hover { color: var(--text); background: rgba(255,80,80,0.2); border-color: var(--danger); }

.popup-stars {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 4px;
  text-shadow: 0 0 4px rgba(255,215,0,0.3);
}
.game-item-name {
  font-size: 1em;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  margin: 0 0 6px;
}
.game-meta {
  font-size: 0.75em;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 8px;
}
.game-icon-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.game-info-right { flex: 1; }
.game-slot-name { font-size: 0.75em; color: var(--accent); font-weight: 600; }
.game-shape { font-size: 0.75em; color: var(--text-dim); margin-top: 2px; }

.game-section {
  margin-bottom: 8px;
  font-size: 0.82em;
}
.bo-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  line-height: 1.5;
}
.bo-label {
  color: var(--text-dim);
  min-width: 58px;
  font-size: 0.9em;
}
.bo-total {
  color: var(--text);
  font-weight: 700;
  min-width: 52px;
}
.bo-breakdown { font-size: 0.8em; }
.bo-base   { color: #aaa; }
.bo-add    { color: #4cc2ff; }
.bo-sf     { color: #ffcc33; }
.bo-scroll { color: #6fb34f; }

.game-pot {
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 8px;
}
.game-pot-title {
  font-size: 0.8em;
  font-weight: 700;
  margin-bottom: 3px;
}
.game-pot.pot-legendary .game-pot-title { color: #8ae06c; }
.game-pot.pot-unique    .game-pot-title { color: #ffcc33; }
.game-pot.pot-epic      .game-pot-title { color: #c77dff; }
.game-pot.pot-rare      .game-pot-title { color: #4cc2ff; }
.game-pot-line {
  font-size: 0.82em;
  color: var(--text);
  padding: 1px 0;
}
.game-soul .game-pot-title { color: #ff69b4; }

/* ═══════════════════════════════════════════════════════════════
   스킬강화
   ═══════════════════════════════════════════════════════════════ */
.core-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.core-item {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  transition: all 0.15s;
}
.core-item:hover { border-color: var(--gold-dim); }
.core-skill { border-left: 3px solid #f77; }
.core-mastery { border-left: 3px solid #88f; }
.core-enhance { border-left: 3px solid #4fc; }
.core-common { border-left: 3px solid #fa0; }
.core-icon, .core-icon-empty {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  object-fit: contain;
}
.core-info { flex: 1; min-width: 0; }
.core-name { font-size: 0.85em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.core-meta { display: flex; gap: 8px; margin-top: 2px; }
.core-level { font-size: 0.9em; font-weight: 800; color: var(--accent); }
.core-type { font-size: 0.68em; color: var(--text-dim); }

/* 스킬 아이콘 그리드 */
.skill-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}
.skill-icon-item {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
  transition: all 0.15s;
  cursor: default;
}
.skill-icon-item:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,215,0,0.15);
}
.skill-icon-item img {
  width: 32px; height: 32px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.skill-icon-lv {
  position: absolute;
  top: 2px; right: 4px;
  font-size: 0.7em;
  font-weight: 800;
  color: var(--accent);
  background: rgba(0,0,0,0.7);
  padding: 0 4px;
  border-radius: 4px;
}
.skill-icon-name {
  font-size: 0.62em;
  color: var(--text-dim);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   V Matrix 보드 (WZ absolute-position layout)
   ═══════════════════════════════════════════════════════════════ */
.vmat-wrap {
  flex-shrink: 0;
  overflow: hidden;
  width: 506px;
  height: 600px;
  border-radius: 6px;
}
.vmat-outer {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}
.vmat-board {
  position: relative;
  width: 506px;
  height: 719px;
  flex-shrink: 0;
  margin-top: -119px;
  background-image: url('/assets/ui/vmatrix/main_backgrnd.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.vmat-slot.vmat-empty.v-special { background-image: url('/assets/ui/vmatrix/core_coreBackground_specialLocked.png'); }
.vmat-slot {
  position: absolute;
  width: 58px;
  height: 68px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: default;
  transition: filter 0.15s;
}
.vmat-slot:not(.vmat-empty):hover { filter: brightness(1.3) drop-shadow(0 0 6px rgba(255,210,60,.7)); cursor: pointer; }
.vmat-slot.vmat-empty          { opacity: 0.45; }
.vmat-slot.vmat-empty.v-job    { background-image: url('/assets/ui/vmatrix/core_coreBackground_jobLocked.png'); }
.vmat-slot.vmat-empty.v-enhance{ background-image: url('/assets/ui/vmatrix/core_coreBackground_enforceLocked.png'); }
.vmat-slot.vmat-empty.v-common { background-image: url('/assets/ui/vmatrix/core_coreBackground_commonLocked.png'); }
.vmat-slot.v-job:not(.vmat-empty)    { background-image: url('/assets/ui/vmatrix/core_coreBackground_job.png'); }
.vmat-slot.v-enhance:not(.vmat-empty){ background-image: url('/assets/ui/vmatrix/core_coreBackground_enforce.png'); }
.vmat-slot.v-common:not(.vmat-empty) { background-image: url('/assets/ui/vmatrix/core_coreBackground_common.png'); }
.vmat-slot.v-special:not(.vmat-empty){ background-image: url('/assets/ui/vmatrix/core_coreBackground_special.png'); }
.vmat-icon {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  object-fit: contain;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
}
.vmat-lv {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.72em;
  font-weight: 900;
  color: #ffe86a;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  letter-spacing: 0.02em;
}
.vmat-lv span { font-weight: 500; color: #a8c0d4; font-size: 0.85em; }

.vmat-special-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}
.vmat-special-header {
  font-size: 0.82em;
  font-weight: 700;
  color: #ffd770;
  letter-spacing: 0.06em;
  padding: 4px 2px;
  border-bottom: 1px solid #2a4468;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vmat-special-header .core-count {
  background: #1a2c44;
  color: #80c8ff;
  font-size: 0.85em;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
  border: 1px solid #2a4468;
}
.vmat-special-panel {
  background-image: url('/assets/ui/vmatrix/main_specialCore_backgrnd.png');
  background-size: 100% 100%;
  width: 247px;
  min-height: 160px;
  border-radius: 4px;
  padding: 14px 8px 10px;
}
.vmat-special-slots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}
.vmat-special-empty {
  color: #5a7a98;
  font-size: 0.78em;
  text-align: center;
  padding: 30px 0;
  margin: 0;
}
.vmat-special-item {
  position: static !important;
  width: 66px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   HEXA Matrix 보드 (WZ absolute-position layout)
   ═══════════════════════════════════════════════════════════════ */
.hexamat-wrap {
  display: block;
  position: relative;
  background-image: url('/assets/ui/hexamatrix/hexaSkill_backgrnd.png');
  background-size: 506px 507px;
  background-repeat: no-repeat;
  width: 506px;
  height: 507px;
}
.hexamat-board {
  position: absolute;
  left: 30px;
  top: 22px;
  width: 446px;
  height: 462px;
  background-image: url('/assets/ui/hexamatrix/hexaSkill_layer_slot.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.hexa-side {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hexa-side-group {
  background: rgba(14,24,38,.7);
  border: 1px solid #22385a;
  border-radius: 8px;
  padding: 8px 10px;
}
.hexa-side-title {
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px dashed #22385a;
}
.hexa-side-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 2px;
  font-size: 0.78em;
  color: #c0d4e4;
}
.hexa-side-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hexa-side-lv { font-size: 0.88em; color: #8ab0c8; flex-shrink: 0; }
.hexa-side-lv b { color: #ffe86a; font-weight: 800; }
.hexa-side-lv span { color: #5a7898; }
.hexa-side-mastered .hexa-side-lv b { color: #ffc040; }
.hexa-side-mastered .hexa-side-lv { text-shadow: 0 0 6px rgba(255,192,64,.3); }
/* 커스텀 육각형 슬롯 (CSS clip-path) */
.hexamat-slot {
  position: absolute;
  width: 68px;
  height: 78px;
  cursor: default;
  transition: filter 0.15s, transform 0.12s;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #2a3a58;
  transform: translateZ(0);
  will-change: transform;
}
.hexamat-slot::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: linear-gradient(180deg, #0f1a2e 0%, #070d18 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 0;
}
.hexamat-slot:not(.hexamat-empty):hover {
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(255,220,120,.55));
  cursor: pointer;
  transform: translateY(-1px);
}
.hexamat-slot.hexamat-empty {
  background: rgba(50,70,100,.35);
  pointer-events: none;
}
.hexamat-slot.hexamat-empty::before {
  background: rgba(10,16,26,.55);
}
.hexamat-slot.h-skill:not(.hexamat-empty)   { background: linear-gradient(180deg, #d88a3a 0%, #8a4e1a 100%); }
.hexamat-slot.h-mastery:not(.hexamat-empty) { background: linear-gradient(180deg, #5fb878 0%, #2e6a3c 100%); }
.hexamat-slot.h-enhance:not(.hexamat-empty) { background: linear-gradient(180deg, #d04848 0%, #7a2020 100%); }
.hexamat-slot.h-common:not(.hexamat-empty)  { background: linear-gradient(180deg, #4ab0d0 0%, #1e6078 100%); }
.hexamat-slot.hexamat-zero {
  filter: grayscale(0.55) brightness(0.75);
  opacity: 0.65;
}
.hexamat-slot.hexamat-mastered {
  background: linear-gradient(180deg, #ffc860 0%, #a06820 100%) !important;
  filter: drop-shadow(0 0 6px rgba(255,200,80,.5));
}
.hexamat-name-fallback {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px; line-height: 1.2;
  color: #ccc; text-align: center;
  width: 60px; word-break: keep-all;
  pointer-events: none; z-index: 1;
}
.hexamat-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.8)) contrast(1.08) saturate(1.1);
  z-index: 1;
}
/* 레벨 뱃지 — 스킬 아이콘 위 (헥사 상단 내부) */
.hexamat-lv {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 18px;
  padding: 0 5px;
  background: #ffd248;
  color: #1a1408;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 900;
  line-height: 13px;
  height: 13px;
  pointer-events: none;
  text-align: center;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,.7);
  letter-spacing: 0.02em;
}
.hexamat-slot.hexamat-mastered .hexamat-lv {
  background: #ff8830;
  color: #1a0800;
  box-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 6px rgba(255,140,48,.6);
}

/* ═══════════════════════════════════════════════════════════════
   코어 카드 그리드 (5차/6차 공용 — 아이템메이커 스타일)
   ═══════════════════════════════════════════════════════════════ */
.core-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.core-section {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.core-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 2px 6px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(60,90,130,.35);
}
.core-section-title {
  font-size: 0.95em;
  font-weight: 700;
  color: #dce8f2;
  letter-spacing: 0.04em;
}
.core-section.v-job .core-section-title,
.core-section.h-skill .core-section-title    { color: #ffc078; }
.core-section.v-enhance .core-section-title,
.core-section.h-enhance .core-section-title  { color: #ff7878; }
.core-section.v-common .core-section-title,
.core-section.h-common .core-section-title   { color: #80d4e8; }
.core-section.v-special .core-section-title  { color: #c890ff; }
.core-section.h-mastery .core-section-title  { color: #90e4a0; }
.core-section-count {
  font-size: 0.78em;
  color: #8ab0c8;
  font-weight: 600;
}

.core-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.core-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(10,18,30,.85);
  border: 1px solid #2a4468;
  border-radius: 8px;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  cursor: pointer;
  position: relative;
  transform: translateZ(0);
  will-change: transform;
}
.core-card:hover {
  transform: translateY(-1px);
  border-color: #80c8ff;
  box-shadow: 0 3px 10px rgba(0,0,0,.4), 0 0 10px rgba(128,200,255,.15);
}
/* 특수코어 선택 모달 */
.scs-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.scs-modal {
  background: #13141f; border: 1px solid rgba(255,200,80,0.3);
  border-radius: 14px; width: 380px; max-height: 80vh; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
}
.scs-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.1);
  font-weight: 700; color: #ffd060;
}
.scs-close {
  background: transparent; border: none; color: #888; font-size: 18px;
  cursor: pointer; padding: 0 6px;
}
.scs-close:hover { color: #fff; }
.scs-list { padding: 8px; overflow-y: auto; max-height: 60vh; }
.scs-item {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; transition: background 0.15s, border-color 0.15s;
  margin-bottom: 4px;
}
.scs-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(100,180,255,0.3); }
.scs-item.scs-selected { background: rgba(255,200,80,0.1); border-color: rgba(255,200,80,0.5); }
.scs-name { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.scs-meta { font-size: 11px; color: #888; display: flex; gap: 8px; flex-wrap: wrap; }
.scs-trig { color: #80c8ff; }
.scs-eff { color: #ffd060; font-weight: 600; }

/* 특수코어 카드 강조 */
.core-card.core-special {
  border-color: rgba(255,180,80,0.5) !important;
  background: linear-gradient(135deg, rgba(255,180,80,0.06), rgba(255,100,80,0.03));
}
.core-card.core-special:hover {
  border-color: rgba(255,200,80,0.8) !important;
  box-shadow: 0 0 12px rgba(255,180,80,0.3);
}

.core-card.core-mastered {
  border-color: #d4a030;
  box-shadow: 0 0 10px rgba(212,160,48,.22), inset 0 0 8px rgba(212,160,48,.08);
}
.core-card-frame {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(10,16,28,.95), rgba(6,10,18,.95));
  border: 1px solid #2a3a58;
  box-shadow: inset 0 0 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.core-card.v-job     .core-card-frame,
.core-card.h-skill   .core-card-frame { border-color: #a06830; box-shadow: inset 0 0 10px rgba(240,176,96,.18), inset 0 1px 0 rgba(255,200,120,.1); }
.core-card.v-enhance .core-card-frame,
.core-card.h-enhance .core-card-frame { border-color: #903838; box-shadow: inset 0 0 10px rgba(232,96,96,.18), inset 0 1px 0 rgba(255,120,120,.1); }
.core-card.v-common  .core-card-frame,
.core-card.h-common  .core-card-frame { border-color: #306878; box-shadow: inset 0 0 10px rgba(112,200,224,.18), inset 0 1px 0 rgba(140,220,240,.1); }
.core-card.v-special .core-card-frame { border-color: #6838a0; box-shadow: inset 0 0 10px rgba(192,128,255,.2), inset 0 1px 0 rgba(210,150,255,.1); }
.core-card.h-mastery .core-card-frame { border-color: #307850; box-shadow: inset 0 0 10px rgba(128,224,144,.18), inset 0 1px 0 rgba(150,240,170,.1); }
.core-card:hover .core-card-frame {
  border-color: #ffd460;
  box-shadow: inset 0 0 10px rgba(255,215,100,.2), 0 0 10px rgba(255,215,100,.25);
}
.core-card.core-mastered .core-card-frame {
  border-color: #d4a030;
  box-shadow: inset 0 0 12px rgba(255,200,80,.3), 0 0 8px rgba(255,200,80,.25);
}
.core-card-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)) contrast(1.08) saturate(1.1);
}
.core-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.core-card-name {
  font-size: 0.82em;
  font-weight: 700;
  color: #e8f0f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.core-card-sub {
  font-size: 0.66em;
  color: #7090a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.core-card-bar {
  height: 4px;
  background: #0a1422;
  border: 1px solid #22385a;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2px;
}
.core-card-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a80b0, #80c8ff);
  transition: width 0.25s ease;
}
.core-card.core-mastered .core-card-bar-fill {
  background: linear-gradient(90deg, #b08030, #ffd460);
}
.core-card-lv {
  font-size: 0.72em;
  color: #a8c0d4;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.core-card-lv b {
  color: #ffe86a;
  font-size: 1.1em;
  font-weight: 800;
  margin-left: 2px;
}
.core-card-lv span { color: #5a7898; }
.core-card-star {
  margin-left: auto;
  color: #ffc040;
  font-size: 0.95em;
  text-shadow: 0 0 6px rgba(255,192,64,.6);
}

/* ═══════════════════════════════════════════════════════════════
   [구형] 코어 헤더 뱃지 (5차/6차 공용)
   ═══════════════════════════════════════════════════════════════ */
.core-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(18,30,48,.85), rgba(10,18,30,.85));
  border: 1px solid #22385a;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(100,160,220,.08);
}
.core-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(14,26,42,.9);
  border: 1px solid #2a4468;
  border-radius: 20px;
  font-size: 0.78em;
  color: #a8c4dc;
}
.core-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.core-badge.v-job .core-badge-dot,
.core-badge.h-skill .core-badge-dot      { background: #f0b060; box-shadow: 0 0 6px rgba(240,176,96,.6); }
.core-badge.v-enhance .core-badge-dot,
.core-badge.h-enhance .core-badge-dot    { background: #e86060; box-shadow: 0 0 6px rgba(232,96,96,.6); }
.core-badge.v-common .core-badge-dot,
.core-badge.h-common .core-badge-dot     { background: #70c8e0; box-shadow: 0 0 6px rgba(112,200,224,.6); }
.core-badge.v-special .core-badge-dot    { background: #c080ff; box-shadow: 0 0 6px rgba(192,128,255,.6); }
.core-badge.h-mastery .core-badge-dot    { background: #80e090; box-shadow: 0 0 6px rgba(128,224,144,.6); }
.core-badge-label { font-weight: 700; color: #cfe0f0; letter-spacing: 0.02em; }
.core-badge-count { color: #ffe86a; font-weight: 700; font-size: 0.92em; }

/* ═══════════════════════════════════════════════════════════════
   마스터 강조 (5차 Lv 30/60, 6차 Lv 30)
   ═══════════════════════════════════════════════════════════════ */
.vmat-mastered, .hexamat-mastered {
  filter: drop-shadow(0 0 5px rgba(255,210,60,.55));
}
.vmat-mastered .vmat-lv span,
.hexamat-mastered .hexamat-lv span { color: #ffc040; }

/* ═══════════════════════════════════════════════════════════════
   HEXA 우측 레전드
   ═══════════════════════════════════════════════════════════════ */
.hexamat-outer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  overflow-x: auto;
}
.hexa-legend {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hexa-legend-group {
  background: rgba(14,24,38,.7);
  border: 1px solid #22385a;
  border-radius: 6px;
  padding: 8px 10px;
}
.hexa-legend-title {
  font-size: 0.74em;
  font-weight: 700;
  color: #80c8ff;
  letter-spacing: 0.08em;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px dashed #22385a;
}
.hexa-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 0.78em;
  color: #b8d0e4;
  transition: background 0.12s;
}
.hexa-legend-row:hover { background: rgba(40,70,110,.25); border-radius: 4px; }
.hexa-legend-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 4px;
  background: #0a1422;
  border: 1px solid #22385a;
  flex-shrink: 0;
}
.hexa-legend-row.h-skill .hexa-legend-icon    { border-color: #8a5a30; }
.hexa-legend-row.h-mastery .hexa-legend-icon  { border-color: #408050; }
.hexa-legend-row.h-enhance .hexa-legend-icon  { border-color: #803030; }
.hexa-legend-row.h-common .hexa-legend-icon   { border-color: #305868; }
.hexa-legend-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hexa-legend-lv {
  font-weight: 700;
  color: #ffe86a;
  font-size: 0.95em;
  flex-shrink: 0;
}
.hexa-legend-max { font-weight: 400; color: #607a90; font-size: 0.88em; }
.hexa-legend-row.hexamat-mastered .hexa-legend-lv { color: #ffa030; text-shadow: 0 0 6px rgba(255,160,48,.5); }

/* ═══════════════════════════════════════════════════════════════
   링크스킬 카드
   ═══════════════════════════════════════════════════════════════ */
.link-skill-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(18,30,48,.85), rgba(10,18,30,.85));
  border: 1px solid #22385a;
  border-left: 3px solid #80c8ff;
  border-radius: 6px;
}
.link-skill-title {
  font-size: 1em;
  font-weight: 700;
  color: #cfe0f0;
  letter-spacing: 0.04em;
}
.link-skill-count {
  font-size: 0.78em;
  color: #80c8ff;
  font-weight: 600;
}
.link-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}
.link-skill-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  background: rgba(14,24,38,.8);
  border: 1px solid #22385a;
  border-radius: 6px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  cursor: default;
}
.link-skill-card:hover {
  transform: translateY(-2px);
  border-color: #80c8ff;
  box-shadow: 0 4px 10px rgba(0,0,0,.4), 0 0 12px rgba(128,200,255,.2);
}
.link-skill-icon-wrap {
  position: relative;
  width: 44px;
  height: 44px;
}
.link-skill-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #0a1422;
  border: 1px solid #2a4468;
  border-radius: 5px;
  padding: 2px;
}
.link-skill-lv {
  position: absolute;
  right: -6px;
  bottom: -4px;
  background: #1a2c44;
  border: 1px solid #ffc040;
  border-radius: 10px;
  font-size: 0.65em;
  font-weight: 700;
  color: #ffe86a;
  padding: 1px 6px;
  text-shadow: 0 1px 2px #0008;
}
.link-skill-name {
  font-size: 0.72em;
  color: #b8d0e4;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   3D 강도 (strong 모드)
   ═══════════════════════════════════════════════════════════════ */
body.perspective-strong {
  --perspective: var(--perspective-strong);
}

/* ═══════════════════════════════════════════════════════════════
   시뮬 결과 (Phase 1a/1b)
   ═══════════════════════════════════════════════════════════════ */
.ct-row { display: flex; justify-content: space-between; font-size: 0.7em; line-height: 1.2; }
.ct-tier { color: var(--text-dim); }
.ct-time { color: var(--accent); font-weight: 700; }

/* 난이도별 카드 분리 */
.boss-card-single { transition: transform 0.15s; }
.boss-card-single:hover { transform: translateY(-2px); }
.boss-card-single.locked { opacity: 0.4; filter: grayscale(0.6); }
.boss-diff-label { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.78em; margin-left: 4px; }
.boss-diff-label.diff-easy { background: #1a2a1a; color: #6c6; }
.boss-diff-label.diff-normal { background: #1a2a3a; color: #6cf; }
.boss-diff-label.diff-hard { background: #2a1a1a; color: #f77; }
.boss-diff-label.diff-chaos { background: #1a1a3a; color: #88f; }
.boss-diff-label.diff-extreme { background: #2a0a2a; color: #f6f; }
.boss-phase-tag { display: inline-block; padding: 1px 5px; background: #2a2a3a; color: #ccc; border-radius: 3px; font-size: 0.72em; margin-left: 4px; }

/* 보스 시뮬방 디테일 */
.bs-section { margin-top: 16px; padding: 12px 16px; background: #14141e; border-radius: 8px; border: 1px solid #2a2a3a; }
.bs-section-title { color: #f0c040; font-size: 0.95em; margin: 0 0 10px; font-weight: 700; }

.bs-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.bs-phase { background: #1a1a26; padding: 10px 12px; border-radius: 6px; border-left: 3px solid #4a4a6a; }
.bs-phase-num { font-size: 0.8em; color: #88f; font-weight: 700; }
.bs-phase-hp { font-size: 1.3em; color: #f0c040; font-weight: 800; margin: 4px 0; }
.bs-phase-desc { font-size: 0.78em; color: #aaa; }
.bs-phase-empty { color: #888; font-size: 0.85em; font-style: italic; padding: 8px; }

.bs-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bs-tier { background: #1a1a26; padding: 8px; border-radius: 6px; text-align: center; }
.bs-tier-name { font-size: 0.75em; color: var(--text-dim); }
.bs-tier-time { font-size: 1.1em; color: #6cf; font-weight: 800; margin-top: 2px; }

.bs-rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.bs-reward { background: #1a1a26; padding: 8px 10px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; }
.bs-reward-label { font-size: 0.78em; color: #aaa; }
.bs-reward-val { font-size: 1em; color: #f0c040; font-weight: 700; }
.bs-reward-empty { color: #888; font-size: 0.85em; font-style: italic; padding: 8px; }

.bs-notes { margin-top: 12px; padding: 10px 14px; background: #14141a; color: #aaa; font-size: 0.82em; border-left: 3px solid #4a4a4a; border-radius: 4px; }

.sim-result-wrap { padding: 8px; }
.sim-total {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 16px; margin-bottom: 12px;
  background: linear-gradient(90deg, #1a1a2a 0%, #0f0f1a 100%);
  border-radius: 8px; border-left: 3px solid #f0c040;
}
.sim-total-dpm { font-size: 2em; font-weight: 800; color: #f0c040; }
.sim-total-unit { font-size: 0.5em; color: var(--text-dim); margin-left: 4px; }
.sim-total-trio { font-size: 0.85em; color: var(--text-sub); }
.sim-total-label { font-size: 0.78em; color: var(--text-dim); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 2px; }
.sim-total-sub { font-size: 0.85em; color: var(--text-sub); }
.sim-total-note { font-size: 0.78em; color: var(--text-dim); font-style: italic; }
.sim-deal-type {
  margin-left: auto;
  padding: 4px 12px; border-radius: 12px; font-size: 0.85em; font-weight: 700;
}
.sim-deal-burst   { background: #2a1a0a; color: #f80; }
.sim-deal-semi    { background: #2a1a2a; color: #f6f; }
.sim-deal-sustain { background: #1a2a1a; color: #6c6; }

.sim-skill-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.sim-skill-table th { color: var(--text-dim); text-align: left; padding: 6px 8px; border-bottom: 1px solid #2a2a3a; font-weight: 600; font-size: 0.85em; }
.sim-skill-table td { padding: 5px 8px; border-bottom: 1px solid #1a1a2a; }
.sim-skill-table tr:hover td { background: #181828; }
.sim-skill-name { font-weight: 600; }
.sim-cat { display: inline-block; padding: 1px 5px; margin-left: 6px; border-radius: 3px; font-size: 0.75em; vertical-align: middle; }
.sim-cat-burst { background: #4a2a0a; color: #fc8; }
.sim-cat-filler { background: #2a4a4a; color: #8cf; }
.sim-dpm { color: var(--accent); font-weight: 700; text-align: right; min-width: 60px; }
.sim-pct { color: var(--text-sub); text-align: right; min-width: 40px; }
.sim-bar { width: 80px; }
.sim-bar-wrap { background: #1a1a2a; border-radius: 4px; overflow: hidden; height: 6px; }
.sim-bar-fill { background: linear-gradient(90deg, #f0c040, #f08040); height: 100%; }

.sim-core-rec { margin-top: 16px; padding: 12px; background: #14141e; border-radius: 6px; border: 1px solid #2a2a3a; }
.sim-core-title { color: #f0c040; font-size: 0.95em; margin-bottom: 8px; font-weight: 700; }
.sim-core-row { padding: 4px 0; font-size: 0.85em; }
.sim-core-label { color: #ccc; }
.sim-core-delta { margin-left: 10px; font-weight: 700; }
.sim-core-loading { color: var(--text-dim); font-size: 0.85em; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════
   파티방 (sec-party)
   ═══════════════════════════════════════════════════════════════ */
.party-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  max-width: 720px;
}
.party-hint {
  color: var(--text-dim);
  font-size: 0.88em;
  margin: 0 0 4px;
}
.party-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.party-slot {
  display: grid;
  grid-template-columns: 32px 1fr auto 120px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(20, 22, 32, 0.7);
  border: 1px solid rgba(120, 130, 160, 0.25);
  border-radius: 6px;
}
.party-slot-self {
  background: rgba(80, 50, 30, 0.4);
  border-color: rgba(200, 150, 100, 0.4);
}
.party-slot-num {
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}
.party-slot-input {
  background: rgba(10, 10, 14, 0.6);
  border: 1px solid rgba(100, 110, 140, 0.4);
  border-radius: 4px;
  color: var(--text);
  padding: 5px 10px;
  font-size: 0.95em;
}
.party-slot-input:disabled {
  background: rgba(50, 35, 25, 0.5);
  color: var(--text-dim);
  cursor: not-allowed;
}
.party-slot-load {
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: #1a1a22;
  padding: 5px 14px;
  cursor: pointer;
  font-weight: 600;
}
.party-slot-load:hover { filter: brightness(1.1); }
.party-slot-load:disabled { opacity: 0.4; cursor: not-allowed; }
.party-slot-job {
  font-size: 0.85em;
  color: var(--text-dim);
  text-align: right;
}
.party-slot-job.loaded { color: var(--accent); font-weight: 600; }
.party-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(30, 35, 50, 0.55);
  border-radius: 6px;
  font-size: 0.9em;
}
#party-mode { font-weight: 700; color: #f0c040; }
#party-buff-list { color: var(--text-dim); font-size: 0.85em; }

/* 보스 시뮬 — 이 보스 기준 DPM 박스 */
.bs-dpm-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(20, 22, 32, 0.6);
  border-radius: 6px;
  border-left: 3px solid #f0c040;
}
.bs-dpm-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.bs-dpm-label {
  min-width: 60px;
  font-size: 0.85em;
  color: var(--text-dim);
}
.bs-dpm-val {
  font-size: 1.2em;
  font-weight: 700;
  color: #f0c040;
}
.bs-dpm-eff {
  font-size: 0.85em;
  color: var(--accent);
  margin-left: auto;
}
.bs-dpm-gt {
  font-size: 0.78em;
  color: var(--text-sub);
  font-style: italic;
}
.bs-dpm-nogt {
  font-size: 0.78em;
  color: var(--text-dim);
  font-style: italic;
}