/* ============================================================
   style.css — 전체 스타일 (모바일/PC 공용, 다크 테마)
   ============================================================ */

@font-face {
  font-family: "Galmuri11";
  src: url("../assets/fonts/Galmuri11.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Galmuri11";
  src: url("../assets/fonts/Galmuri11-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #12161c;
  color: #e8ecf1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Pretendard, sans-serif;
  height: 100%;
  overflow-x: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* 모바일 브라우저의 동적 주소창을 반영해 실제 보이는 높이에 맞춘다(100vh만 쓰면 하단 메뉴가 화면 밖으로 밀림) */
  max-width: 720px;
  margin: 0 auto;
  background: #171c24;
}

/* ── 픽셀풍 "장식 금테" 패널 프레임 — HUD/경험치바/획득로그가 공유하는 공통 테두리 스타일.
   실제 이미지 없이 CSS만으로: 금색 굵은 테두리 + 안쪽 베벨 라인 + 네 모서리의 작은 금색 리벳(radial-gradient). ── */
.pixelFrame {
  background-color: var(--px-panel);
  border: 3px solid #a9812f;
  border-radius: 12px;
  box-shadow: 0 0 0 1px #4a3814 inset, 0 0 0 4px #1a1006 inset, 0 3px 0 rgba(0,0,0,.4);
  background-image:
    radial-gradient(circle at 10px 10px, #f3d98a 0 2.4px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 10px) 10px, #f3d98a 0 2.4px, transparent 2.6px),
    radial-gradient(circle at 10px calc(100% - 10px), #f3d98a 0 2.4px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #f3d98a 0 2.4px, transparent 2.6px);
}

/* ── 상단 HUD: 전투력은 제외하고 캐릭터 정보와 세 재화만 한 줄에 압축한다. ── */
.statusBar {
  position: absolute;
  top: 6px; left: 6px; right: 6px;
  z-index: 25;
  display: flex;
  align-items: flex-start;
  padding: 5px 8px;
  font-family: "Galmuri11", sans-serif;
  font-size: 12px;
  pointer-events: none;
  max-width: 100%;
  box-sizing: border-box;
}
.statusBar .statItem { pointer-events: auto; }
.statusBarTop { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 4px 8px; width: 100%; min-width: 0; }
.statusBarLevel { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; min-width:0; overflow:hidden; }
.statusBarLevel .lbl { font-weight: 800; color: #fde68a; }
.statusBarLevel .charName { font-size: 11px; color: #f1f5f9; overflow:hidden; text-overflow:ellipsis; }
/* 재화는 우측에 골드→다이아→에테르 순으로 세로 고정한다. 에테르는 개방 계정에만 세 번째 줄로 나타난다. */
.statusBarCurrencies {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1px;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
}
.statItem { display: flex; align-items: center; gap: 4px; justify-content: flex-end; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hudCurrency { gap:3px; justify-content:flex-start; min-height:15px; }
.hudCurrencyIcon { display:inline-block; flex:0 0 15px; width:15px; height:15px; background-color:transparent; background-image:url('../assets/pixel/ui/currency-icons-hud-v2.png?v=20260722-transparent-v1'); background-repeat:no-repeat; background-size:300% 100%; image-rendering:pixelated; filter:drop-shadow(0 0 2px rgba(56,189,248,.22)); }
.hudCurrencyIcon.gold { background-position:0 0; }
.hudCurrencyIcon.diamond { background-position:50% 0; }
.hudCurrencyIcon.aether { background-position:100% 0; }
.hudAetherItem[hidden] { display:none !important; }
@media (max-width:480px) {
  .statusBar { left:4px; right:4px; padding:4px 6px; font-size:10px; }
  .statusBarTop { gap:3px 5px; }
  .statusBarLevel { gap:3px; }
  /* [UX 2026-07-24] 5자까지는 "..." 없이 온전히 보이도록 max-width를 5자 기준으로 넉넉하게 잡음 */
  .statusBarLevel .charName { font-size:9px; max-width:64px; }
  .statusBarLevel .charName.charNameLen6 { font-size:7.5px; max-width:64px; }
  .statusBarLevel .charName.charNameLen12 { font-size:6px; max-width:72px; }
  .statusBarCurrencies { gap:0; font-size:9px; }
  .hudCurrency { min-height:13px; }
  .hudCurrencyIcon { flex-basis:13px; width:13px; height:13px; }
  .statusBarTop { grid-template-columns:minmax(0,calc(100% - 82px)) minmax(72px,auto); }
  .statusBarLevel { max-width:100%; text-overflow:ellipsis; }
}

/* ── 활성 버프 아이콘: 전투 중(정착/보스/PvP) 캐릭터 스킬 자버프가 켜져 있을 때만 나타난다.
   statusBar(상단 HP/재화 표시줄) 아래에 남은 시간을 채움 오버레이 + 숫자로 함께 보여준다. ── */
.buffBar { display: none; position: absolute; z-index: 24; top: 70px; left: 6px; gap: 5px; pointer-events: none; }
.buffBar.buffBarVisible { display: flex; }
.buffIcon {
  position: relative; width: 30px; height: 30px; border-radius: 6px; overflow: hidden;
  background: rgba(10,14,22,.85); border: 1px solid rgba(251,191,36,.75);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.buffIconFill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: rgba(251,191,36,.38); z-index: 1; transition: height .2s linear; pointer-events: none;
}
.buffIconGlyph { position: relative; z-index: 2; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.6)); }
.buffIconTime {
  position: absolute; bottom: 1px; right: 2px; z-index: 3; font-size: 9px; font-weight: 800;
  color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.9); pointer-events: none;
}
.combatConsumableBar {
  /* 스킬바(bottom:62, 높이~48px) 바로 위에 쌓아 좁은 화면에서도 서로 겹치지 않게 한다. */
  display: none; position: absolute; z-index: 25; right: 12px; bottom: 116px;
  align-items: center; gap: 4px; pointer-events: auto; flex-wrap: nowrap; justify-content: flex-end;
  max-width: calc(100% - 24px);
}
.combatConsumableBar.combatConsumableBarVisible { display: flex; }
.combatConsumableBtn, .combatConsumableAuto {
  width: 40px; min-width: 40px; height: 40px; padding: 2px !important; border-radius: 8px !important;
  border: 1px solid #475569 !important; background: rgba(10,14,22,.9) !important;
  color: #f8fafc !important; font-family: inherit; font-size: 10px !important;
}
.consumablePixelIcon { display: block; width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.combatConsumableBtn .combatConsumableArt { display: block; width: 32px; height: 32px; margin:auto; object-fit:contain; }
.combatConsumableBtn em, .combatConsumableBtn b { display:none; }
.combatConsumableAuto { min-width: 58px; color: #fca5a5 !important; }
.combatConsumableAuto.on { border-color: #4ade80 !important; color: #86efac !important; background: rgba(20,83,45,.88) !important; }
.combatConsumableBtn.potion { border-color: #22c55e !important; }
.combatConsumableBtn.potion.autoSelected { box-shadow: inset 0 0 0 1px #86efac, 0 0 7px rgba(74,222,128,.35) !important; }
.combatConsumableBtn.doping { border-color: #d946ef !important; }
.combatConsumableBtn.dopingActive { box-shadow: inset 0 0 0 1px #f0abfc, 0 0 7px rgba(217,70,239,.4) !important; }
.combatConsumableBtn:disabled { opacity: .55; cursor: not-allowed !important; }
/* 회복/도핑 그룹 분리 + 쿨타임 오버레이 */
.combatConsumableGroup { display: flex; align-items: center; gap: 4px; position: relative; padding: 3px; border-radius:10px; background:rgba(4,8,14,.72); }
.combatConsumableGroupLabel {
  position: absolute; left: 1px; top: 50%; transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl; font-size: 8px; font-weight: 800; color: #94a3b8; letter-spacing: 1px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.9); pointer-events: none;
}
.combatConsumableBtn { position: relative; overflow: hidden; }
.combatConsumableCd {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 0%;
  background: rgba(15,23,42,.72); pointer-events: none; transition: height .15s linear; z-index: 1;
}
.combatConsumableBtn > *:not(.combatConsumableCd) { position: relative; z-index: 2; }
.combatConsumableAutoTag {
  position: absolute; top: -1px; right: -1px; z-index: 3; font-size: 7px; font-weight: 900;
  padding: 1px 3px; border-radius: 0 5px 0 5px; letter-spacing: .5px;
}
.combatConsumableAutoTag.on { background: #166534; color: #86efac; }
.combatConsumableAutoTag.off { background: #4a1d1d; color: #fca5a5; }
.combatConsumableCount { position:absolute !important; right:1px; bottom:0; z-index:4 !important; min-width:13px; padding:0 2px; border-radius:5px; background:rgba(2,6,12,.88); color:#fff; font-size:8px; line-height:12px; text-align:center; text-shadow:1px 1px #000; }
.combatConsumableAutoDot { position:absolute !important; left:1px; top:1px; z-index:4 !important; width:12px; height:12px; border-radius:50%; font-size:8px; line-height:12px; font-weight:900; text-align:center; }
.combatConsumableAutoDot.on { background:#16a34a; color:#fff; }
.combatConsumableAutoDot.off { background:#7f1d1d; color:#fecaca; }
.combatConsumableCdText {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #f0abfc; text-shadow: 1px 1px 2px #000; pointer-events: none;
}
.combatConsumableCdText:empty { display: none; }
@media (max-width: 480px) {
  .combatConsumableBar { right: 6px; bottom: 112px; gap: 2px; max-width:calc(100% - 12px); }
  .combatConsumableBtn, .combatConsumableAuto { width:34px; min-width:34px; height:34px; padding:1px !important; }
  .combatConsumableBtn .combatConsumableArt { width:28px; height:28px; }
  .combatConsumableGroup { gap:2px; padding:2px; }
}

.battleViewToggleBtn { display:none; position:absolute; z-index:46; right:8px; top:48px; min-height:28px; padding:4px 8px !important; border:1px solid #67e8f9 !important; border-radius:999px !important; background:rgba(8,47,73,.92) !important; color:#cffafe !important; font-size:10px !important; font-weight:900; line-height:1.2; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.battleViewToggleBtn.battleViewToggleVisible { display:block; }
@media (max-width:720px) { .battleViewToggleBtn, .battleViewToggleBtn.battleViewToggleVisible { display:none !important; } }

.combatSlotSetup { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; padding:10px; border:1px solid #3a4556; border-radius:9px; background:rgba(15,23,42,.65); }
.combatSlotSetup b, .combatSlotSetup small { display:block; }
.combatSlotSetup small { margin-top:3px; color:#94a3b8; font-size:10px; line-height:1.4; }
.combatSlotPreview { display:grid; grid-template-columns:repeat(4,34px); gap:4px; flex-shrink:0; }
.combatSlotPreview > span, .combatSlotPreview > button { width:34px; height:34px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid #475569; border-radius:6px; background:#0b1018; overflow:hidden; }
.combatSlotPreview img { width:30px; height:30px; object-fit:contain; }
.combatSlotPreview .empty { color:#64748b; font-size:18px; }
.combatSlotToggle.on { border-color:#22c55e !important; color:#86efac !important; background:#14532d !important; }
@media (max-width:480px) { .combatSlotSetup { align-items:flex-start; flex-direction:column; } .combatSlotPreview { width:100%; grid-template-columns:repeat(4,1fr); } .combatSlotPreview > span, .combatSlotPreview > button { width:100%; } }

/* Arcelia humanoid raid */
.raidBossSelector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0 0 10px; }
.raidBossSelector button { min-width:0; min-height:38px; padding:6px 4px; border:1px solid #475569; border-radius:8px; background:#111827; color:#cbd5e1; font-size:12px; font-weight:900; overflow-wrap:anywhere; cursor:pointer; }
.raidBossSelector button.active { color:#fff1f2; border-color:#ef4444; background:linear-gradient(135deg,#450a0a,#1f1018); box-shadow:0 0 14px rgba(239,68,68,.22); }
.raidHero.arceliaHero img { object-position:center; }
.raidHero.trainingRoomHero img { image-rendering:auto; object-position:center 54%; }
.raidHero.twinStarHero { border-color:#a78bfa; }
.raidHero.twinStarHero img { image-rendering:auto; object-position:center center; }
.raidHero.twinStarHero .raidHeroShade { background:linear-gradient(90deg,rgba(2,6,23,.76),rgba(2,6,23,.06) 65%),linear-gradient(180deg,transparent 35%,rgba(8,5,15,.92)); }
.twinStarRouteGuide { margin-bottom:7px; }
.twinStarStoryStart { margin-bottom:8px; border-color:#60a5fa !important; background:linear-gradient(180deg,#2563eb,#1e3a8a) !important; }
.twinStarStart { border-color:#f0abfc !important; background:linear-gradient(90deg,#6d28d9,#312e81) !important; }
.twinStarRewardNotice { border-left-color:#facc15; }
.arceliaRecommend { display:flex; flex-wrap:wrap; gap:7px; align-items:center; min-width:0; max-width:100%; box-sizing:border-box; margin:10px 0; padding:11px; border:1px solid #7f1d1d; border-radius:8px; background:rgba(69,10,10,.26); overflow-wrap:anywhere; }
.arceliaRecommend > b { width:100%; color:#fecaca; }
.arceliaRecommend span { padding:4px 7px; border-radius:999px; background:#3f1d26; color:#fca5a5; font-size:11px; font-weight:800; }
.arceliaRecommend span.ok { background:#14372a; color:#86efac; }
.arceliaRecommend small { width:100%; color:#94a3b8; line-height:1.5; }
.arceliaStart { background:linear-gradient(135deg,#991b1b,#3f0b22) !important; border-color:#fb7185 !important; }
.raidModeTabs.arceliaModeTabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
.raidDailyBox.practice { border-color:#a855f7; background:rgba(88,28,135,.2); }
.raidDailyBox.practice b { color:#e9d5ff; }
.itemRaidBonus.arceliaTrait { border-color:#ef4444; color:#fecaca; background:rgba(69,10,10,.24); }
.arceliaEmblemIcon { display:inline-block; width:22px; height:22px; background-image:url('../assets/pixel/raid/arcelia/arcelia-emblem-icons-v1.png?v=20260720-arcelia-v1'); background-size:300% 200%; background-repeat:no-repeat; vertical-align:middle; }
.arceliaEmblemIcon.empty { width:30px; height:30px; background-position:0 100%; }

html[data-theme="default"] .raidBossSelector button { background:#f7ecd0; color:#5b4630; border-color:#9b8567; text-shadow:none; }
html[data-theme="default"] .raidBossSelector button.active { background:#7f1d1d; color:#fff; border-color:#991b1b; }
html[data-theme="default"] .arceliaRecommend { background:#fff5e6; border-color:#b7791f; color:#4a3420; text-shadow:none; }
html[data-theme="default"] .arceliaRecommend small { color:#6b5a46; }

@media (max-width: 600px) {
  .raidBossSelector { position:sticky; top:0; z-index:6; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; background:var(--panel-bg,#10141b); padding:5px 0; }
  .raidBossSelector button { min-height:36px; padding:5px 3px; font-size:11px; }
  .raidHero.arceliaHero { min-height:190px; }
  .raidHero.arceliaHero img { object-position:68% center; }
  .arceliaRecommend { padding:9px; gap:5px; }
  .arceliaPatternGuide .raidPartGuideRow { align-items:flex-start; }
  .raidHero.twinStarHero img { object-position:61% center; }
}
@media (max-width: 480px) {
  .raidModeTabs.arceliaModeTabs { grid-template-columns:1fr; }
  .raidHero.arceliaHero { min-height:180px; height:200px; }
  .raidHero.arceliaHero .raidHeroText { left:11px; right:11px; bottom:10px; }
  .raidHero.arceliaHero .raidHeroText h2 { font-size:17px; }
}
.buffIconStack {
  position: absolute; top: 1px; right: 2px; z-index: 3; font-size: 8px; font-weight: 900;
  color: #f0abfc; text-shadow: 1px 1px 1px #000;
}
.statItem .lbl { font-weight: 700; }
.statItem .sub { color: #8a94a3; font-size: 11px; }
.pixelIcon { flex-shrink: 0; image-rendering: pixelated; }
.logoutBtn {
  margin-left: 6px; padding: 2px 8px; font-size: 10px; font-family: inherit;
  border-radius: 5px; background: #334155; color: #e2e8f0; border: 1px solid #475569; cursor: pointer;
}
.logoutBtn:hover { background: #475569; }

/* ── 하단 경험치 바 ── */
.bottomHud {
  position: absolute;
  left: 6px; right: 6px; bottom: 7px;
  z-index: 20;
  pointer-events: none;
}
.bottomHud > * { pointer-events: auto; }

/* 경험치 바: 두께 5px(기존 대비 약 36% 감소) + 금테 프레임. 값이 바뀔 때 부드럽게 차오르도록 트랜지션을 건다. */
.hudExpBar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 8px 5px;
  font-family: "Galmuri11", sans-serif;
}
.hudExpRow { display: flex; align-items: center; gap: 8px; }
.hudExpTag { color: #fde68a; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.expBarBg {
  flex: 1; min-width: 0; background: #0b0e14; border: 1px solid #05080d; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(148,163,184,.25) inset;
  height: 5px; overflow: hidden;
}
.expBarFill {
  background: linear-gradient(90deg,#fde047,#facc15); height: 100%; width: 0%;
  transition: width .35s ease-out;
}
.expBarFill.expNearFull { animation: expGlowPulse 0.6s ease-in-out infinite alternate; }
@keyframes expGlowPulse {
  from { filter: brightness(1); box-shadow: none; }
  to { filter: brightness(1.35); box-shadow: 0 0 6px 1px rgba(250,204,21,.85); }
}
.expLabel { color: #fde68a; font-size: 11px; white-space: nowrap; flex-shrink: 0; }

/* ── Phaser 게임 캔버스(항상 화면 상단에 표시되는 실시간 전투 뷰) ── */
#gameCanvasWrap {
  width: 100%;
  background: #0c1015;
  border-bottom: 1px solid #2a3341;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
}
#gameCanvas { position: relative; width: 100%; max-width: 720px; aspect-ratio: 640/400; }
#gameCanvas canvas { width: 100% !important; height: 100% !important; display: block; }

/* 탐험·장비·인벤토리는 전체 메뉴와 비슷한 높이의 하단 작업창으로 사용한다.
   남는 세로 공간은 전투 캔버스에 돌려 에테르나처럼 전투를 보면서 관리할 수 있게 한다. */
#app.corePanelView #gameCanvasWrap {
  flex:1 1 auto;
  min-height:260px;
  align-items:stretch;
  background:#080b10;
}
#app.corePanelView #gameCanvas {
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
}
#app.corePanelView .panels {
  flex:0 0 clamp(210px,27dvh,244px);
  height:clamp(210px,27dvh,244px);
  min-height:0;
  overflow-y:auto;
  padding:8px;
}
.corePanelToolbar { display:none; }
#app.corePanelView .corePanelToolbar {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:-2px -2px 7px;
  padding:4px 5px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#cbd5e1;
  font-size:11px;
}
#app.corePanelView .corePanelToolbar > span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#94a3b8;
  font-weight:700;
}
#app.corePanelView .corePanelSizeToggle {
  min-height:28px;
  padding:4px 10px;
  border-color:#38bdf8;
  color:#e0f2fe;
  font-size:11px;
}
#app.corePanelView.corePanelExpanded .panels {
  flex-basis:clamp(340px,45dvh,480px);
  height:clamp(340px,45dvh,480px);
}

/* Small menu: equipment and inventory become a compact combat-side workbench.
   The large-menu switch preserves the full cards and management sections. */
#app.corePanelView:not(.corePanelExpanded) #equipPanel > .invSettings,
#app.corePanelView:not(.corePanelExpanded) #equipPanel > .soulCodexSection,
#app.corePanelView:not(.corePanelExpanded) #equipPanel > .equipPresetLabel,
#app.corePanelView:not(.corePanelExpanded) #equipPanel > .presetList,
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .inventorySettingsFold {
  display:none !important;
}
#app.corePanelView:not(.corePanelExpanded) #equipPanel .statSectionLabel {
  margin:1px 2px 4px;
  font-size:10px;
}
#app.corePanelView:not(.corePanelExpanded) #equipPanel .equipGrid {
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:5px;
  margin-bottom:5px;
}
#app.corePanelView:not(.corePanelExpanded) #equipPanel .equipGrid.skillRelicGrid {
  grid-template-columns:repeat(5,minmax(0,1fr));
}
#app.corePanelView:not(.corePanelExpanded) #equipPanel .equipSlot {
  min-height:46px;
  padding:3px 2px;
  gap:1px;
  border-radius:6px;
}
#app.corePanelView:not(.corePanelExpanded) #equipPanel .slotIcon { font-size:15px; }
#app.corePanelView:not(.corePanelExpanded) #equipPanel .slotName {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8px !important;
}
#app.corePanelView:not(.corePanelExpanded) #equipPanel .slotEnhanceBadge { font-size:8px; }

#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .inventoryHeaderWrap {
  gap:4px !important;
  margin-bottom:6px !important;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .inventoryCapacityHeader {
  display:none !important;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .mapTabs {
  gap:3px !important;
  margin-bottom:2px !important;
  padding-bottom:0 !important;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .mapTab {
  min-height:26px !important;
  padding:2px 6px !important;
  font-size:9px !important;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .invToolbar {
  min-height:28px;
  gap:4px;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .invToolbar > * {
  min-height:26px !important;
  padding-top:2px !important;
  padding-bottom:2px !important;
  font-size:9px !important;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemGrid {
  grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)) !important;
  gap:5px !important;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemCard {
  min-height:78px !important;
  padding:5px 6px 31px !important;
  border-radius:6px !important;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemSub,
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemStats,
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemCompare,
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemWeaponSkillInfo,
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel details:not(.inventorySettingsFold) {
  display:none !important;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemTitle {
  font-size:10px !important;
  line-height:1.2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemScore,
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemSlotIcon,
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .recommendBadge { font-size:8px; }
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemActions {
  gap:2px;
  padding-top:3px;
  margin-top:2px;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemActions button {
  min-height:22px;
  padding:2px !important;
  font-size:8px !important;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .invLoadMoreWrap {
  padding:3px 0 1px;
  margin-top:5px !important;
}
#app.corePanelView:not(.corePanelExpanded) #inventoryPanel .invLoadMoreBtn {
  padding:5px 12px !important;
  font-size:10px !important;
}

/* Small menu: exploration keeps only the current destination and primary actions.
   The expanded menu retains the onboarding copy, drop rates, and combat details. */
#app.corePanelView:not(.corePanelExpanded) #explorePanel.normalExplorePanel {
  margin:0;
  padding:4px;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .beginnerGuide {
  display:none !important;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .beginnerGuideHead b {
  font-size:10px;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .beginnerGuideHead span,
#app.corePanelView:not(.corePanelExpanded) #explorePanel .beginnerGuideSteps,
#app.corePanelView:not(.corePanelExpanded) #explorePanel .beginnerGuide > p {
  display:none;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .beginnerGuideAction button,
#app.corePanelView:not(.corePanelExpanded) #explorePanel .beginnerGuideRunning {
  min-height:26px;
  padding:3px 6px !important;
  font-size:9px !important;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel > .mapTabs {
  min-height:28px;
  gap:3px;
  margin-bottom:3px;
  padding-bottom:0;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel > .mapTabs .mapTab {
  min-height:26px;
  padding:2px 8px;
  font-size:9px;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .stageInfo {
  margin-bottom:4px;
  padding:2px 5px !important;
  border-radius:6px;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .stageHeader {
  flex-direction:row;
  align-items:center;
  gap:5px;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .stageDiffTag {
  font-size:8px;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .stageMapLine {
  font-size:10px;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .stageSub,
#app.corePanelView:not(.corePanelExpanded) #explorePanel .exploreAdvancedSettings,
#app.corePanelView:not(.corePanelExpanded) #explorePanel .activityDesc,
#app.corePanelView:not(.corePanelExpanded) #explorePanel .activityDetails {
  display:none !important;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .activitySimpleSummary {
  margin:2px 0 0;
  padding:3px 5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border-radius:4px;
  font-size:8px;
  line-height:1.2;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .activityCardList {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3px !important;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .activityCard {
  min-width:0;
  padding:3px 5px !important;
  border-radius:6px !important;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .activityHead {
  min-height:20px;
  gap:3px;
  padding:0 !important;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .activityIcon {
  font-size:12px;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .activityTitle {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .activityBtn {
  min-height:27px;
  height:27px;
  margin-top:3px !important;
  padding:3px 5px !important;
  font-size:9px !important;
  border-radius:5px;
}
#app.corePanelView:not(.corePanelExpanded) #explorePanel .bossUnlockBar {
  height:4px;
  margin-top:3px;
}
@media (max-width:560px) {
  #app.corePanelView:not(.corePanelExpanded) #equipPanel .equipGrid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  #app.corePanelView:not(.corePanelExpanded) #inventoryPanel .mapTabs {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    overflow:visible !important;
  }
  #app.corePanelView:not(.corePanelExpanded) #inventoryPanel .mapTab {
    width:100%;
    min-width:0 !important;
    white-space:nowrap;
  }
  #app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemGrid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
/* 전체 메뉴를 연 동안에는 기존 작업창을 뒤에 중복 표시하지 않는다. */
#app.corePanelView:has(#mobileSubNav.expandedMenu) .panels { display:none; }

/* 일반 마을 탐험 UI는 에테르나 탐험과 같은 720px 앱 프레임 안에서 같은 여백을 쓴다.
   탐험 탭을 눌렀다고 앱/전투 화면 자체가 1040px로 확대되면 안 된다. */
#explorePanel.normalExplorePanel {
  width:auto;
  margin:8px 0;
  padding:14px;
}
@media (max-width:720px) {
  #explorePanel.normalExplorePanel { margin:5px 0; padding:11px; }
  #app.corePanelView #gameCanvasWrap { min-height:240px; }
}

/* 쌍성 2인 레이드 파티 HUD.
   브라우저 viewport가 아니라 #gameCanvas를 기준으로 배치해 데스크톱의 검은 여백으로
   밀려나지 않으며, 모바일에서도 보스 HP/조작 UI 사이의 실제 전투 화면 안에 머문다. */
.eternaDuoBattleSignalHud {
  position: absolute;
  z-index: 42;
  top: clamp(76px, 16%, 112px);
  right: 8px;
  width: min(228px, calc(100% - 16px));
  padding: 9px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(165, 180, 252, .72);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(8, 15, 34, .94), rgba(19, 15, 45, .92));
  box-shadow: 0 7px 20px rgba(0, 0, 0, .42), inset 0 0 18px rgba(99, 102, 241, .08);
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  pointer-events: auto;
}
.eternaDuoBattleSignalHud.solo {
  top: clamp(82px, 18%, 112px);
}
.eternaDuoBattleSignalHud.burstOnly {
  right: 10px;
  width: 52px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
}
.eternaDuoBattleSignalHud.party.collapsed {
  width: min(184px, calc(100% - 16px));
  padding: 6px;
  border-color: rgba(129, 140, 248, .62);
}
.eternaDuoBattleHudCompact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 25px;
  gap: 6px;
  align-items: center;
}
.eternaDuoBattleHudCompactInfo { min-width: 0; }
.eternaDuoBattleHudCompactInfo > b {
  display: block;
  overflow: hidden;
  color: #e0e7ff;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eternaDuoBattleHudCompactHp {
  display: grid;
  grid-template-columns: minmax(46px, 1fr) 28px;
  gap: 5px;
  align-items: center;
  margin-top: 3px;
}
.eternaDuoBattleHudCompactHp > i {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: #26334a;
}
.eternaDuoBattleHudCompactHp > i > em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #86efac);
}
.eternaDuoBattleHudCompactHp > strong {
  color: #dcfce7;
  font-size: 9px;
  text-align: right;
}
.eternaDuoBattleHudToggle {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 28px;
  min-width: 25px;
  min-height: 28px;
  padding: 0;
  border: 1px solid #475569;
  border-radius: 6px;
  background: rgba(30, 41, 59, .95);
  color: #c7d2fe;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.eternaDuoBattleHudToggle:hover { border-color: #818cf8; background: #273452; }
.eternaDuoBattleHudHead,
.eternaDuoBattleHudBar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.eternaDuoBattleHudHead { justify-content: space-between; }
.eternaDuoBattleHudHead b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e0e7ff;
}
.eternaDuoBattleHudHead small { flex: 0 0 auto; color: #94a3b8; font-size: 9px; }
.eternaDuoBattleHudEncounter {
  margin: 4px 0 5px;
  overflow: hidden;
  color: #cbd5e1;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eternaDuoBattleHudBar { margin-top: 4px; }
.eternaDuoBattleHudBar > span { flex: 0 0 42px; color: #cbd5e1; font-size: 9px; }
.eternaDuoBattleHudBar > i {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: #26334a;
}
.eternaDuoBattleHudBar > i > em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #86efac);
}
.eternaDuoBattleHudBar.boss > i > em { background: linear-gradient(90deg, #7c3aed, #c084fc); }
.eternaDuoBattleHudBar > b { flex: 0 0 29px; text-align: right; color: #e2e8f0; font-size: 9px; }
.eternaDuoBattleHudSignal {
  margin-top: 5px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(59, 130, 246, .15);
  color: #bfdbfe;
  font-weight: 800;
  text-align: center;
}
.eternaDuoBattleHudButtons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
}
.eternaDuoBattleHudButtons button {
  min-width: 0;
  min-height: 27px;
  padding: 2px;
  border: 1px solid #475569;
  border-radius: 5px;
  background: #172033;
  color: #fff;
}
.eternaDuoBattleHudActionRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 6px;
  align-items: end;
}
.eternaDuoBattleHudActionRow .eternaDuoBattleHudButtons { margin-top: 6px; }
.eternaDuoBurstIcon {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  overflow: visible;
  border: 2px solid #fbbf24;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(254, 240, 138, .42), transparent 28%),
    linear-gradient(145deg, #9a3412, #ca8a04 58%, #713f12);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, .9), 0 0 13px rgba(251, 191, 36, .58);
  color: #fff7d6;
  cursor: pointer;
  isolation: isolate;
}
.eternaDuoBurstIcon > span {
  display: block;
  font-size: 21px;
  line-height: 38px;
  filter: drop-shadow(0 1px 2px #3f1d0b);
}
.eternaDuoBurstIcon > small {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 20px;
  padding: 1px 4px;
  border: 1px solid #fde68a;
  border-radius: 9px;
  background: #111827;
  color: #fde68a;
  font-size: 8px;
  font-weight: 900;
  line-height: 13px;
  text-align: center;
}
.eternaDuoBurstIcon.ready { animation: eternaDuoBurstReadyPulse 1.3s ease-in-out infinite; }
.eternaDuoBurstIcon.active {
  border-color: #fb7185;
  background: radial-gradient(circle at 50% 45%, #fbbf24, #dc2626 62%, #7f1d1d);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, .9), 0 0 18px rgba(248, 113, 113, .85);
}
.eternaDuoBurstIcon.cooldown {
  border-color: #64748b;
  background: linear-gradient(145deg, #334155, #172033);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, .9);
  color: #94a3b8;
}
.eternaDuoBurstIcon:disabled { cursor: default; opacity: .88; }
.eternaDuoBurstIcon:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
@keyframes eternaDuoBurstReadyPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(15, 23, 42, .9), 0 0 9px rgba(251, 191, 36, .42); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 2px rgba(15, 23, 42, .9), 0 0 17px rgba(251, 191, 36, .82); }
}
.eternaDuoMemberGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}
.eternaDuoMemberCard {
  min-width: 0;
  padding: 9px;
  border: 1px solid #334155;
  border-radius: 8px;
  background: rgba(2, 6, 23, .5);
}
.eternaDuoStatusRow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 30px; gap: 5px; align-items: center; margin-top: 5px; font-size: 9px; }
.eternaDuoStatusRow > div { height: 6px; overflow: hidden; border-radius: 99px; background: #26334a; }
.eternaDuoStatusRow > div > i { display: block; height: 100%; background: #22c55e; }
.eternaDuoStatusRow.boss > div > i { background: #a855f7; }
.eternaDuoStatusRow > b { text-align: right; }
.eternaDuoRoomActions { display: flex; gap: 6px; margin-top: 9px; }
.eternaDuoSignalPanel { margin-top: 9px; }
.eternaDuoSignalPanel > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 5px; }
.eternaDuoSignalPanel button { min-height: 32px; }
.eternaDuoSignalPanel button span { margin-left: 4px; font-size: 10px; }
.eternaDuoSyncNote { display: block; margin-top: 7px; color: #94a3b8; }

@media (max-width: 720px) {
  .eternaDuoBattleSignalHud {
    top: clamp(104px, 24%, 136px);
    right: max(6px, env(safe-area-inset-right));
    width: min(202px, 54%);
    padding: 7px;
    border-radius: 8px;
    font-size: 10px;
  }
  .eternaDuoBattleSignalHud.solo { top: clamp(82px, 19%, 108px); }
  .eternaDuoBattleSignalHud.burstOnly { right: max(8px, env(safe-area-inset-right)); width: 48px; }
  .eternaDuoBattleSignalHud.party.collapsed { width: min(164px, 48%); padding: 5px; }
  .eternaDuoBattleHudCompact { grid-template-columns: minmax(0, 1fr) 34px 23px; gap: 4px; }
  .eternaDuoBattleHudCompactInfo > b { font-size: 9px; }
  .eternaDuoBattleHudToggle { width: 23px; min-width: 23px; height: 26px; min-height: 26px; }
  .eternaDuoBattleSignalHud.party.collapsed .eternaDuoBurstIcon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }
  .eternaDuoBattleSignalHud.party.collapsed .eternaDuoBurstIcon > span { font-size: 17px; line-height: 30px; }
  .eternaDuoBattleHudHead small { display: none; }
  .eternaDuoBattleHudEncounter { margin: 3px 0; font-size: 9px; }
  .eternaDuoBattleHudBar { margin-top: 3px; gap: 4px; }
  .eternaDuoBattleHudBar > span { flex-basis: 34px; }
  .eternaDuoBattleHudButtons { gap: 3px; margin-top: 5px; }
  .eternaDuoBattleHudButtons button { min-height: 24px; font-size: 10px; }
  .eternaDuoBurstIcon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .eternaDuoBurstIcon > span { font-size: 20px; line-height: 36px; }
  .eternaDuoMemberGrid { grid-template-columns: 1fr; }
  .eternaDuoRoomActions { flex-direction: column; }
}

@media (max-width: 390px), (max-height: 560px) {
  .eternaDuoBattleSignalHud { width: min(184px, 52%); top: 106px; }
  .eternaDuoBattleSignalHud.solo { top: 78px; }
  .eternaDuoBattleHudSignal { display: none; }
}

/* Hold-to-move controller shown only in the dedicated battle view. */
.movePad {
  display: none;
  position: absolute;
  z-index: 30;
  left: 12px;
  bottom: 44px;
  width: 104px;
  height: 104px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#app.battleView .movePad { display: block; }
/* 탐험·장비·인벤토리의 작은 메뉴에서도 전투 화면처럼 캐릭터를 직접 움직일 수 있다.
   PC는 설정된 방향키를 사용하고, 터치 기기에서도 조이스틱은 기존 UX대로 좌측 하단에 유지한다. */
@media (hover:none), (pointer:coarse), (max-width:720px) {
  #app.corePanelView:not(.corePanelExpanded) .movePad {
    display:block;
    left:12px;
    right:auto;
    bottom:42px;
  }
  #app.corePanelView:not(.corePanelExpanded) .skillBar {
    left:130px;
    right:6px;
  }
}
/* 모바일 게임에서 흔히 보는 원형 조이스틱: 바깥 원(base) 안에서 놉(knob)을 드래그해
   방향/세기를 아날로그로 준다. 기존 4방향 버튼(움직임을 8방향으로만 강제)을 대체한다. */
.joystickBase {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(16,24,36,.72);
  border: 2px solid rgba(124,139,160,.55);
  box-shadow: inset 0 0 0 2px rgba(2,6,12,.55), 0 2px 0 rgba(0,0,0,.4);
  touch-action: none;
}
.joystickKnob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: rgba(16,24,36,.9);
  border: 2px solid #7c8ba0;
  box-shadow: inset 0 0 0 2px rgba(2,6,12,.7), 0 2px 0 rgba(0,0,0,.55);
  touch-action: none;
  transition: background .12s, border-color .12s;
}
.joystickKnob.active {
  border-color: #67e8f9;
  background: rgba(14,116,144,.88);
  transition: none;
}

@media (max-width: 420px) {
  .movePad { left: 8px; bottom: 42px; transform: scale(.92); transform-origin: left bottom; }
  #app.corePanelView:not(.corePanelExpanded) .movePad {
    left:8px;
    right:auto;
    transform-origin:left bottom;
  }
}

/* ── 캐릭터 스킬 바: 이동 조이스틱과 마찬가지로 확대 전투 화면(battleView)에서만 노출.
   자동 모드 스킬도 백그라운드에서 계속 발동하므로, 이 바는 수동 발동/모드 전환 전용 UI다. ── */
/* 획득로그/경험치 바로 바로 위에 6칸이 가로로 한 줄 늘어선다. 확대 전투 화면뿐 아니라
   탐험/보스 진행 중이면 일반 인라인 캔버스에서도 보이도록 JS가 .skillBarVisible을 토글한다
   (battleView 탭 여부와 무관하게 G.battle.running 기준). */
.skillBar {
  display: none;
  position: absolute;
  z-index: 30;
  left: 130px; /* 이동 조이스틱(movePad, 좌측 하단 폭 104px)과 겹치지 않도록 그 오른쪽부터 시작 */
  right: 6px;
  bottom: 62px;
  grid-template-columns: repeat(6, 34px);
  justify-content: center;
  gap: 5px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.skillBar.skillBarVisible { display: grid; }
/* PC(조이스틱이 거의 안 쓰이는 넓은 화면)에서는 조이스틱을 피하지 않고 캔버스 폭 전체 기준 중앙 정렬 */
@media (min-width: 640px) {
  .skillBar { left: 6px; }
}
.skillSlot { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.skillSlotBtn {
  position: relative; width: 34px; height: 34px; padding: 0 !important;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 17px; line-height: 1;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
  image-rendering: pixelated;
}
.skillSlotIcon { position: relative; z-index: 2; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.6)); }
.skillSlotCd {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: rgba(0,0,0,.68); z-index: 1; transition: height .15s linear; pointer-events: none;
}
/* 쿨타임 남은 초를 숫자로도 표기(요청 반영) — 0이면 빈 문자열로 숨긴다 */
.skillSlotCdText {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,.9); pointer-events: none;
}
.skillSlot.locked .skillSlotBtn { opacity: .4; }
.skillSlotLockLabel { font-size: 7px; color: var(--px-muted); text-shadow: 1px 1px 0 rgba(0,0,0,.7); }
/* 모드 뱃지: 아이콘 위에 겹쳐서 표시(별도 줄을 차지하지 않는다). 눌러서 AUTO/수동 전환. */
.skillSlotModeBtn {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 0 !important; font-size: 6px !important; line-height: 1.5 !important; min-height: 0 !important;
  border-width: 1px !important; border-radius: 0 !important;
  background: rgba(0,0,0,.55) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: none !important;
}
.skillSlotModeBtn.auto { background: rgba(212,175,55,.85) !important; color: #2a1c05 !important; }

/* ── 마을 NPC 대화 버튼: 전투 화면과 탐험 화면 모두에서 마을 NPC 근처에 있을 때 노출.
   NPC 근접 여부는 JS가 200ms 주기로 판정해 .npcTalkVisible을 토글한다(syncNpcTalkButton). ── */
.npcTalkBtn {
  display: none;
  position: absolute;
  z-index: 30;
  right: 12px;
  bottom: 62px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 800;
  background: rgba(217,119,6,.92);
  color: #fff;
  border: 2px solid #fbbf24;
  border-radius: 20px;
  box-shadow: 0 2px 0 rgba(0,0,0,.4);
  cursor: pointer;
  touch-action: none;
}
.npcTalkBtn.npcTalkVisible { display: block; }

/* 에테르나를 실제로 개방한 계정에만 보이는 마을 간 왕복 버튼. */
.eternaTravelBtn {
  display: none;
  position: absolute;
  z-index: 27;
  right: 12px;
  top: 68px;
  min-height: 32px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 800;
  color: #eef2ff;
  background: rgba(24,24,52,.84);
  border: 1px solid rgba(165,180,252,.72);
  border-radius: 16px;
  box-shadow: 0 2px 7px rgba(0,0,0,.34);
  cursor: pointer;
  touch-action: manipulation;
}
.eternaTravelBtn.eternaTravelVisible { display: block; }
.eternaTravelBtn:active { transform: scale(.96); }
.seonghaeTravelBtn {
  display: none;
  position: absolute;
  z-index: 27;
  right: 12px;
  top: 106px;
  min-height: 32px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 900;
  color: #ecfeff;
  background: linear-gradient(135deg,rgba(8,47,73,.92),rgba(12,74,110,.84));
  border: 1px solid rgba(103,232,249,.82);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.36),0 0 12px rgba(34,211,238,.16);
  cursor: pointer;
  touch-action: manipulation;
}
.seonghaeTravelBtn.seonghaeTravelVisible { display: block; }
.seonghaeTravelBtn:active { transform: scale(.96); }
.worldMapBtn {
  display: none;
  position: absolute;
  z-index: 27;
  right: 12px;
  top: 144px;
  min-height: 32px;
  padding: 6px 11px;
  color: #fff7d6;
  font-size: 11px;
  font-weight: 900;
  background: linear-gradient(135deg,rgba(49,38,82,.94),rgba(15,44,74,.9));
  border: 1px solid rgba(250,204,21,.78);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.38),0 0 13px rgba(250,204,21,.13);
  cursor: pointer;
  touch-action: manipulation;
}
.worldMapBtn.worldMapVisible { display: block; }
.worldMapBtn:active { transform: scale(.96); }
.npcTalkBtn,
.worldMapBtn {
  align-items: center;
  gap: 5px;
}
.npcTalkBtn.npcTalkVisible,
.worldMapBtn.worldMapVisible { display: flex; }
.inlinePixelButtonIcon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.villageReturnIcon {
  width: 24px;
  height: 24px;
}
@media (max-width: 720px) {
  .eternaTravelBtn { top: 60px; right: 8px; padding: 5px 9px; font-size: 10px; }
  .seonghaeTravelBtn { top: 96px; right: 8px; padding: 5px 9px; font-size: 10px; }
  .worldMapBtn { top: 132px; right: 8px; padding: 5px 9px; font-size: 10px; }
}

.worldMapModal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: min(100%, 720px);
  margin-inline: auto;
  z-index: 10040;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  background: rgba(2,6,23,.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.worldMapModal.worldMapOpen { display: flex; }
.worldMapDialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 704px;
  max-height: calc(100dvh - 16px);
  overflow: hidden;
  border: 1px solid rgba(250,204,21,.58);
  border-radius: 18px;
  color: #eef8ff;
  background: linear-gradient(145deg,#07111f,#0c1729 58%,#151329);
  box-shadow: 0 26px 80px rgba(0,0,0,.72), inset 0 0 40px rgba(56,189,248,.08);
  animation: worldMapDialogIn .28s ease-out;
}
.worldMapHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 10px 14px 9px 18px;
  border-bottom: 1px solid rgba(250,204,21,.28);
  background: linear-gradient(90deg,rgba(30,58,138,.28),rgba(88,28,135,.16));
}
.worldMapHeader small {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.worldMapHeader h2 {
  margin: 2px 0 0;
  color: #fff8d8;
  font-size: 22px;
  letter-spacing: .04em;
}
.worldMapClose {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148,163,184,.45);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 25px;
  line-height: 1;
  background: rgba(15,23,42,.78);
  cursor: pointer;
}
.worldMapCanvas {
  position: relative;
  flex: 0 1 auto;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 0;
  max-height: calc(100dvh - 126px);
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
}
.worldMapCanvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(2,6,23,.06),rgba(2,6,23,.2));
}
.worldMapDestinations { position: absolute; inset: 0; }
.worldMapDestination {
  position: absolute;
  min-width: 142px;
  padding: 8px 12px;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(226,232,240,.72);
  border-radius: 13px;
  color: #f8fafc !important;
  text-align: center;
  background: rgba(3,10,24,.76) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5),0 0 0 3px rgba(255,255,255,.07);
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.worldMapDestination:hover,
.worldMapDestination:focus-visible { transform: translate(-50%,-50%); }
.worldMapDestination:active { transform: translate(-50%,-50%) scale(.97) !important; }
.worldMapDestination strong { display:block; font-size:14px; }
.worldMapDestination span { display:block; margin-top:2px; color:#cbd5e1; font-size:10px; font-weight:700; }
.worldMapDestination[data-region="normal"] { left:17%; top:55%; border-color:rgba(134,239,172,.88); }
.worldMapDestination[data-region="eterna"] { left:56%; top:38%; border-color:rgba(125,211,252,.92); }
.worldMapDestination[data-region="seonghae"] { left:79%; top:63%; border-color:rgba(253,224,71,.92); }
.worldMapDestination.current {
  color: #fff7bf;
  box-shadow: 0 0 0 3px rgba(250,204,21,.34),0 0 26px rgba(250,204,21,.38);
}
.worldMapDestination.locked {
  opacity: .58;
  filter: grayscale(.75);
  color: #cbd5e1 !important;
  background: rgba(15,23,42,.86) !important;
  cursor: not-allowed;
}
.worldMapGuide {
  margin: 0;
  padding: 9px 14px 11px;
  color: #a5b4c8;
  font-size: 11px;
  text-align: center;
}
.worldTravelTransition {
  display:none;
  position:fixed;
  top:0;
  bottom:0;
  left:50%;
  width:min(100vw,720px);
  transform:translateX(-50%);
  z-index:10040;
  overflow:hidden;
  place-items:center;
  background:#020617;
  pointer-events:all;
  box-shadow:0 0 34px rgba(2,6,23,.72);
}
.worldTravelTransition.active { display:grid; animation:worldTravelFade 1.2s ease both; }
.worldTravelImage {
  position:absolute;
  inset:-6%;
  background-position:center;
  background-size:cover;
  filter:saturate(1.08) contrast(1.04);
  animation:worldTravelPush 1.2s cubic-bezier(.2,.7,.25,1) both;
}
.worldTravelVignette {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 52%,transparent 20%,rgba(2,6,23,.38) 70%,rgba(2,6,23,.88));
  box-shadow:inset 0 0 100px rgba(2,6,23,.9);
}
.worldTravelCaption {
  position:relative;
  z-index:2;
  min-width:min(78vw,360px);
  padding:13px 22px;
  border:1px solid rgba(253,224,71,.58);
  border-radius:14px;
  text-align:center;
  color:#fff;
  background:rgba(3,10,24,.72);
  box-shadow:0 0 32px rgba(125,211,252,.22);
  backdrop-filter:blur(7px);
}
.worldTravelCaption small { display:block;color:#bae6fd;font-size:10px;letter-spacing:.15em; }
.worldTravelCaption strong { display:block;margin-top:4px;color:#fff7c2;font-size:22px; }
@keyframes worldTravelPush {
  from { opacity:.15;transform:scale(1.12);filter:blur(7px) saturate(.75); }
  45% { opacity:1;filter:blur(0) saturate(1.1); }
  to { opacity:.3;transform:scale(1.01);filter:blur(2px) brightness(1.25); }
}
@keyframes worldTravelFade {
  0% { opacity:0; } 14%,78% { opacity:1; } 100% { opacity:0; }
}
@keyframes worldMapDialogIn {
  from { opacity:0; transform:translateY(12px) scale(.975); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@media (max-width: 720px) {
  .worldMapModal { width:100%; padding: 6px; }
  .worldMapDialog { width: 100%; max-width:none; max-height:calc(100dvh - 12px); border-radius: 13px; }
  .worldMapHeader { min-height: 54px; padding: 7px 9px 7px 12px; }
  .worldMapHeader small { font-size: 8px; }
  .worldMapHeader h2 { font-size: 17px; }
  .worldMapClose { width:34px; height:34px; font-size:22px; }
  .worldMapCanvas { min-height: 0; max-height: calc(100dvh - 104px); }
  .worldMapDestination { min-width: 92px; padding: 6px 7px; border-radius: 10px; }
  .worldMapDestination strong { font-size:11px; }
  .worldMapDestination span { font-size:8px; }
  .worldMapGuide { padding:7px 8px 8px; font-size:9px; }
}

.seonghaeVillagePanel{display:grid;gap:13px;padding:12px;border:1px solid rgba(125,211,252,.35);border-radius:18px;background:linear-gradient(155deg,#040b18,#07182a 52%,#111533);color:#eafcff;box-shadow:inset 0 0 42px rgba(56,189,248,.08),0 16px 38px rgba(2,6,23,.28)}
.seonghaeExploreHero{position:relative;isolation:isolate;min-height:268px;overflow:hidden;border:1px solid rgba(253,224,71,.58);border-radius:16px;background:#07152d;box-shadow:0 12px 34px rgba(2,8,23,.45)}
.seonghaeHeroSky{position:absolute;inset:0;z-index:-2;background-image:url('../assets/ui/seonghae-explore-hero-v1.webp');background-position:center 47%;background-size:cover;transform:scale(1.01);animation:seonghaeHeroDrift 18s ease-in-out infinite alternate}
.seonghaeExploreHero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,8,23,.13) 0,rgba(3,13,29,.27) 42%,rgba(3,8,20,.96) 100%),linear-gradient(90deg,rgba(2,6,23,.34),transparent 45%,rgba(2,6,23,.2))}
.seonghaeExploreHero::after{content:'';position:absolute;inset:-60% -20%;z-index:0;background:linear-gradient(112deg,transparent 44%,rgba(219,246,255,.15) 50%,transparent 56%);transform:translateX(-45%);animation:seonghaeHeroShine 7s ease-in-out infinite;pointer-events:none}
.seonghaeHeroTop{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:12px 14px;color:#dbeafe;text-shadow:0 2px 5px rgba(0,0,0,.8)}
.seonghaeHeroTop b{font-size:9px;letter-spacing:.16em}.seonghaeHeroTop em{margin-left:auto;padding:4px 8px;border:1px solid rgba(165,243,252,.55);border-radius:99px;background:rgba(3,15,32,.65);color:#cffafe;font-size:9px;font-style:normal;font-weight:900}
.seonghaeHeroSeal{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(253,230,138,.85);border-radius:50%;background:radial-gradient(circle,#fff7cc,#b8860b 35%,rgba(4,18,38,.88) 38%);color:#fff7cc;box-shadow:0 0 15px rgba(250,204,21,.46)}
.seonghaeHeroCopy{position:absolute;z-index:1;left:17px;right:17px;bottom:72px;text-shadow:0 2px 8px #000}.seonghaeHeroCopy small{color:#bae6fd;font-size:10px;font-weight:800}.seonghaeHeroCopy h2{margin:4px 0;color:#fff;font-size:27px;letter-spacing:-.04em}.seonghaeHeroCopy h2 strong{color:#fde68a}.seonghaeHeroCopy p{margin:0;color:#dbeafe;font-size:11px}
.seonghaeGrowthCard{position:absolute;z-index:2;left:12px;right:12px;bottom:10px;padding:9px 11px;border:1px solid rgba(125,211,252,.33);border-radius:10px;background:rgba(3,10,24,.8);backdrop-filter:blur(5px)}
.seonghaeGrowthHead{display:flex;justify-content:space-between;gap:10px;color:#cbd5e1;font-size:10px;font-weight:900}.seonghaeGrowthHead b{color:#fde68a}
.seonghaeExpTrack{height:7px;margin:6px 0 4px;overflow:hidden;border-radius:999px;background:#101827;box-shadow:inset 0 0 0 1px rgba(148,163,184,.25)}.seonghaeExpTrack i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#22d3ee 65%,#fde68a);box-shadow:0 0 12px rgba(34,211,238,.7)}
.seonghaeExpValue{text-align:right;color:#bae6fd;font-size:9px;font-weight:800}
.seonghaeFieldSectionHead{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;min-height:76px;gap:22px;overflow:hidden;padding:11px 14px;border:1px solid rgba(103,232,249,.34);border-radius:13px;background-image:linear-gradient(90deg,rgba(2,8,23,.88),rgba(3,20,42,.68),rgba(2,8,23,.88)),var(--route-chart);background-position:center;background-size:cover;box-shadow:inset 0 0 28px rgba(34,211,238,.08)}
.seonghaeFieldSectionHead::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(253,230,138,.08);pointer-events:none}.seonghaeRouteTitle{position:relative;z-index:1;display:grid;align-content:center;min-width:max-content}.seonghaeFieldSectionHead small{color:#67e8f9;font-size:8px;font-weight:900;line-height:1.2;letter-spacing:.18em}.seonghaeFieldSectionHead h3{margin:4px 0 0;color:#fff;font-size:19px;line-height:1.15;text-shadow:0 2px 8px #020617}.seonghaeFieldSectionHead p{position:relative;z-index:1;justify-self:end;max-width:460px;margin:0;color:#c9e6f2;font-size:10px;line-height:1.5;text-align:right;text-wrap:balance;text-shadow:0 2px 7px #020617}.seonghaeFieldSectionHead p b{color:#fde68a}
.seonghaeFieldList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.seonghaeFieldCard{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:66px auto auto auto;min-height:0;overflow:hidden;border:1px solid rgba(103,232,249,.34);border-radius:13px;background:linear-gradient(155deg,rgba(5,17,34,.99),rgba(14,20,46,.98));box-shadow:0 7px 18px rgba(2,8,23,.3);transition:border-color .18s,filter .18s,transform .18s}
.seonghaeFieldCard::after{content:var(--field-no);position:absolute;right:8px;top:67px;color:rgba(165,243,252,.07);font-size:47px;font-weight:1000;line-height:1;pointer-events:none}
.seonghaeFieldArtwork{position:relative;overflow:hidden;background-image:linear-gradient(90deg,rgba(2,6,23,.16),rgba(2,8,23,.44)),linear-gradient(180deg,transparent 22%,rgba(2,8,23,.84)),var(--field-art);background-position:center 48%;background-size:cover;box-shadow:inset 0 -1px rgba(125,211,252,.27)}
.seonghaeFieldArtwork::after{content:'';position:absolute;inset:0;background:linear-gradient(112deg,transparent 37%,rgba(224,248,255,.11) 49%,transparent 61%);pointer-events:none}
.seonghaeFieldArtwork span{position:absolute;left:9px;bottom:8px;z-index:1;display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(253,230,138,.7);border-radius:50%;background:rgba(5,15,31,.86);font-size:17px;box-shadow:0 0 12px rgba(34,211,238,.3)}.seonghaeFieldArtwork strong{position:absolute;right:9px;bottom:9px;z-index:1;padding:4px 7px;border:1px solid rgba(125,211,252,.36);border-radius:7px;background:rgba(2,10,24,.78);color:#d9f8ff;font-size:8px;letter-spacing:.03em;backdrop-filter:blur(3px)}
.seonghaeFieldBody{position:relative;z-index:1;min-width:0;padding:8px 10px 6px}.seonghaeFieldHeading{display:flex;align-items:start;justify-content:space-between;gap:7px}.seonghaeFieldHeading small{color:#67e8f9;font-size:7px;font-weight:900;letter-spacing:.08em}.seonghaeFieldHeading h3{margin:1px 0 3px;color:#fff;font-size:16px}.seonghaeFieldHeading em{padding:3px 5px;border:1px solid rgba(125,211,252,.27);border-radius:6px;background:rgba(8,47,73,.38);color:#bae6fd;font-size:7px;font-style:normal;white-space:nowrap}
.seonghaeFieldBody p{margin:0;padding-right:25px;color:#acc1d5;font-size:8px;line-height:1.45}.seonghaeFieldStats{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.seonghaeFieldStats span{padding:3px 5px;border:1px solid rgba(100,116,139,.12);border-radius:5px;background:rgba(2,12,27,.62);color:#d4eef7;font-size:7px;font-weight:800}
.seonghaeFieldActions{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:6px;margin:0 9px 6px}.seonghaeHuntBtn,.seonghaeBossBtn{position:relative;min-width:0;margin:0;padding:8px 5px;overflow:hidden;border:1px solid #67e8f9;border-radius:8px;background:linear-gradient(110deg,#036a96,#3146c8);color:#fff;font-size:9px;font-weight:900;letter-spacing:.02em;box-shadow:0 4px 12px rgba(8,145,178,.22),inset 0 1px rgba(255,255,255,.15);cursor:pointer}.seonghaeHuntBtn::after,.seonghaeBossBtn::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 50%,transparent 65%);transform:translateX(-100%);transition:transform .28s}.seonghaeHuntBtn:hover::after,.seonghaeBossBtn:hover::after{transform:translateX(100%)}.seonghaeBossBtn{border-color:#fcd34d;background:linear-gradient(110deg,#7c2d12,#6d28d9);box-shadow:0 4px 12px rgba(245,158,11,.18),inset 0 1px rgba(255,255,255,.13)}.seonghaeHuntBtn.stop,.seonghaeBossBtn.stop{border-color:#fca5a5;background:linear-gradient(100deg,#991b1b,#7f1d1d)}.seonghaeHuntBtn:disabled,.seonghaeBossBtn:disabled{border-color:#344154;background:#141d2d;color:#65758b;box-shadow:none;cursor:not-allowed}.seonghaeUnlockRule{position:relative;z-index:2;margin:0 9px 8px;padding-top:1px;color:#a5f3fc;font-size:7px;line-height:1.3;text-align:center}.seonghaeUnlockRule.locked{color:#94a3b8}
.seonghaeFieldCard.active{border-color:#fde68a;box-shadow:0 0 19px rgba(250,204,21,.18),0 9px 22px rgba(2,8,23,.36);transform:translateY(-1px)}.seonghaeFieldCard.active .seonghaeFieldArtwork{filter:saturate(1.16) brightness(1.08)}
.seonghaeFieldCard.locked{filter:saturate(.25);opacity:.58}.seonghaeFieldCard.locked .seonghaeHuntBtn,.seonghaeFieldCard.locked .seonghaeBossBtn{border-color:#344154;background:#141d2d;color:#64748b;box-shadow:none;cursor:not-allowed}
.seonghaeFieldCard[data-field="jeokjo"] .seonghaeFieldArtwork{filter:hue-rotate(125deg) saturate(1.35)}.seonghaeFieldCard[data-field="gowon"] .seonghaeFieldArtwork{filter:hue-rotate(38deg) saturate(.78)}.seonghaeFieldCard[data-field="myeongam"] .seonghaeFieldArtwork{filter:hue-rotate(65deg) saturate(.55) brightness(.72)}
@keyframes seonghaeHeroDrift{from{transform:scale(1.01) translateX(-.4%)}to{transform:scale(1.055) translateX(.5%)}}@keyframes seonghaeHeroShine{0%,24%{transform:translateX(-55%);opacity:0}44%{opacity:1}68%,100%{transform:translateX(55%);opacity:0}}
@media(max-width:720px){.seonghaeVillagePanel{padding:7px;gap:9px;border-radius:12px}.seonghaeExploreHero{min-height:220px;border-radius:12px}.seonghaeHeroTop{padding:9px}.seonghaeHeroCopy{left:12px;right:12px;bottom:68px}.seonghaeHeroCopy h2{font-size:22px}.seonghaeHeroCopy p{font-size:9px}.seonghaeGrowthCard{left:8px;right:8px;bottom:7px}.seonghaeFieldSectionHead{grid-template-columns:1fr;align-content:center;align-items:start;min-height:68px;gap:4px;padding:8px 10px}.seonghaeFieldSectionHead p{justify-self:start;max-width:none;font-size:8px;text-align:left;text-wrap:pretty}.seonghaeFieldSectionHead h3{font-size:17px}.seonghaeFieldList{grid-template-columns:1fr}.seonghaeFieldCard{grid-template-rows:58px auto auto auto}.seonghaeFieldCard::after{top:59px;font-size:42px}.seonghaeFieldBody{padding:7px 9px 5px}.seonghaeFieldHeading h3{font-size:15px}.seonghaeFieldBody p{font-size:8px}.seonghaeHuntBtn,.seonghaeBossBtn{padding:8px 4px;font-size:9px}.seonghaeFieldStats span{font-size:7px}.seonghaeUnlockRule{font-size:7px}}
@media(prefers-reduced-motion:reduce){.seonghaeHeroSky,.seonghaeExploreHero::after{animation:none}}

/* 기존 마을에서 에테르나로 이동할 때만 재생되는 성좌 관문 전환 연출.
   #gameCanvas 안에만 절대 배치해 데스크톱·모바일 모두 실제 전투 프레임을 넘지 않는다. */
.eternaTravelTransition { position:absolute; z-index:100000; inset:0; width:100%; height:100%; box-sizing:border-box; display:grid; place-items:center; overflow:hidden; contain:strict; isolation:isolate; background:#030711; opacity:0; pointer-events:all; transition:opacity .2s ease; }
.eternaTravelTransition.active { opacity:1; }
.eternaTravelArtwork { position:absolute; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 52%; filter:brightness(.72) saturate(1.12); transform:scale(1.08); animation:eternaArtworkDive 1.28s cubic-bezier(.18,.75,.22,1) forwards; }
.eternaTravelVeil { position:absolute; z-index:-2; inset:0; background:radial-gradient(circle at center,rgba(255,255,255,.04) 0,rgba(103,232,249,.10) 23%,rgba(49,46,129,.20) 55%,rgba(3,7,17,.58) 100%); animation:eternaVeilPulse .64s ease-in-out infinite alternate; }
.eternaTravelPortal { position:relative; width:min(34%,190px); max-height:62%; aspect-ratio:1; border:2px solid rgba(232,250,255,.88); border-radius:50%; box-shadow:0 0 20px #67e8f9,0 0 48px rgba(129,140,248,.65),inset 0 0 26px rgba(103,232,249,.35); transform:scale(.15) rotate(-40deg); opacity:0; animation:eternaPortalOpen .62s cubic-bezier(.2,.8,.2,1) .05s forwards; }
.eternaTravelPortal::before,.eternaTravelPortal::after,.eternaTravelPortal i { content:""; position:absolute; inset:10%; border:1px solid rgba(196,181,253,.8); transform:rotate(45deg); box-shadow:0 0 12px rgba(167,139,250,.7); }
.eternaTravelPortal::after { inset:23%; transform:rotate(22.5deg); border-color:rgba(103,232,249,.8); }
.eternaTravelPortal i { inset:5%; border-radius:50%; border-style:dashed; animation:eternaRuneSpin 2.4s linear infinite; }
.eternaTravelPortal i:nth-child(2){inset:17%;animation-direction:reverse;animation-duration:1.8s}.eternaTravelPortal i:nth-child(3){inset:30%;border-style:solid;animation-duration:1.2s}
.eternaTravelPortal span { position:absolute; inset:0; display:grid; place-items:center; color:#fff7cc; font-size:clamp(30px,7vw,56px); text-shadow:0 0 12px #fff,0 0 28px #67e8f9; animation:eternaStarPulse .5s ease-in-out infinite alternate; }
.eternaTravelCopy { position:absolute; left:4%; right:4%; bottom:8%; text-align:center; text-transform:uppercase; text-shadow:0 0 12px rgba(103,232,249,.8); transform:translateY(12px); opacity:0; animation:eternaCopyIn .35s ease .25s forwards; }
.eternaTravelCopy small,.eternaTravelCopy b { display:block; }.eternaTravelCopy small{color:#a5f3fc;font-size:10px;letter-spacing:.18em}.eternaTravelCopy b{margin-top:5px;color:#fff;font-size:20px;letter-spacing:.34em}
.eternaTravelTransition.arrived { opacity:0; transition-duration:.5s; }
@keyframes eternaPortalOpen { to{transform:scale(1) rotate(0);opacity:1} }
@keyframes eternaArtworkDive { to{transform:scale(1);filter:brightness(.9) saturate(1.18)} }
@keyframes eternaVeilPulse { to{background-color:rgba(103,232,249,.08)} }
@keyframes eternaRuneSpin { to{transform:rotate(405deg)} }
@keyframes eternaStarPulse { to{transform:scale(1.18);filter:brightness(1.35)} }
@keyframes eternaCopyIn { to{transform:translateY(0);opacity:1} }
@media (max-width:480px) { .eternaTravelPortal{width:min(38%,154px);max-height:58%}.eternaTravelCopy{bottom:7%}.eternaTravelCopy small{font-size:8px}.eternaTravelCopy b{font-size:15px} }
@media (prefers-reduced-motion:reduce) { .eternaTravelArtwork,.eternaTravelVeil,.eternaTravelPortal,.eternaTravelPortal i,.eternaTravelPortal span,.eternaTravelCopy{animation-duration:.01ms !important;animation-iteration-count:1 !important} }

/* 전투/보스/레이드 중 표시하는 작은 마을 복귀 아이콘. */
.villageReturnBtn {
  display: none;
  position: absolute;
  z-index: 26;
  left: 10px;
  top: 96px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  margin: 0;
  font-size: 20px;
  background: rgba(12,16,23,.78);
  color: #f8fafc;
  border: 1px solid rgba(226,232,240,.46);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.38);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  cursor: pointer;
  touch-action: manipulation;
}
.villageReturnBtn.villageReturnVisible { display: flex; }
@media (hover: hover) {
  .villageReturnBtn:hover { color: #fde68a; border-color: #fde68a; }
}
.villageReturnBtn:active { color: #fde68a; transform: scale(.94); }

/* 마법부여 2단계 결과: 모바일에서도 비교값과 세 동작이 한 화면에 유지된다. */
.enchantResultModal { width:min(460px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; box-sizing:border-box; }
.enchantResultModal h2 { margin:0 0 10px; }
.enchantResultItem { font-weight:800; text-align:center; margin-bottom:10px; overflow-wrap:anywhere; }
.enchantResultCompare { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:12px; border-radius:9px; background:rgba(49,46,129,.12); text-align:center; }
.enchantResultCompare span { display:flex; flex-direction:column; gap:4px; font-size:11px; }
.enchantResultCompare b { font-size:18px; color:#7c3aed; }
.enchantResultCompare em { font-style:normal; font-weight:900; }
.enchantResultMeta,.enchantResultRecovered { margin-top:8px; font-size:11px; text-align:center; }
.enchantResultRecovered { color:#6d28d9; font-weight:800; }
.enchantResultActions { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; margin-top:14px; }
.enchantResultActions button { min-height:38px; padding:8px 12px; }
.enchantResultActions .retry { background:#0891b2; color:#fff; }
.enchantResultActions .seal { background:#7c3aed; color:#fff; }
@media (max-width:520px) {
  .enchantResultModal { padding:14px 11px; }
  .enchantResultActions { display:grid; grid-template-columns:1fr; }
  .enchantResultActions button { width:100%; min-height:42px; }
}

/* ── 강화(마법부여 포함) 탭에 있는 동안 인게임 캔버스 위를 덮어 NPC를 만나러 온 화면으로 바꾼다.
   그래픽 에셋이 아직 없어 아이콘+이름만 보여주는 자리표시 버전 — 나중에 배경/일러스트만 교체하면 된다. ── */
.npcVisitOverlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: #120d08;
}
.npcVisitOverlay.visible { display: block; }
.npcVisitOverlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,7,10,.02) 45%, rgba(5,7,10,.88) 100%);
  pointer-events: none;
}
.npcVisitArtwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}
.npcVisitOverlay.eternaServicePortrait {
  background: radial-gradient(circle at 50% 35%, #243752 0%, #111a29 52%, #080d15 100%);
}
.npcVisitOverlay.eternaServicePortrait .npcVisitArtwork {
  /* v2 원화는 서비스 프레임과 같은 16:10 구도다. 추가 확대/초점 보정 없이 한 장으로 채운다. */
  object-fit: cover;
  object-position: 50% 50%;
  image-rendering: auto;
  filter:none;
}
.npcVisitOverlay.eternaServicePortrait::after {
  background: linear-gradient(180deg, rgba(5,7,10,0) 54%, rgba(5,7,10,.9) 100%);
}
.eternaElementExplore { position:relative; isolation:isolate; overflow:hidden; margin:8px 0; padding:18px; border:1px solid rgba(125,211,252,.48); border-radius:18px; background:radial-gradient(circle at 12% 0,rgba(103,232,249,.2),transparent 32%),radial-gradient(circle at 92% 8%,rgba(167,139,250,.22),transparent 35%),linear-gradient(150deg,#071426 0%,#101f3d 52%,#18143b 100%); color:#e8f5ff; box-shadow:0 14px 36px rgba(3,10,29,.44),inset 0 1px rgba(255,255,255,.06); }
.eternaExploreStars { position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.eternaExploreStars i { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:0 0 9px #a5f3fc; opacity:.72; }
.eternaExploreStars i:nth-child(1){left:8%;top:16%}.eternaExploreStars i:nth-child(2){left:31%;top:7%;width:2px;height:2px}.eternaExploreStars i:nth-child(3){right:13%;top:20%}.eternaExploreStars i:nth-child(4){right:35%;top:42%;width:2px;height:2px}.eternaExploreStars i:nth-child(5){left:17%;bottom:13%;width:2px;height:2px}
.eternaExploreHeader { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:14px; border-bottom:1px solid rgba(148,202,255,.16); }
.eternaExploreTitle { display:flex; align-items:center; gap:12px; min-width:0; }
.eternaExploreCrest { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border:1px solid rgba(253,230,138,.7); border-radius:50%; background:radial-gradient(circle,#fef3c7 0 8%,#818cf8 12%,rgba(76,29,149,.8) 45%,rgba(15,23,42,.9) 70%); color:#fff7cc; font-size:20px; box-shadow:0 0 22px rgba(129,140,248,.48),inset 0 0 10px rgba(255,255,255,.24); }
.eternaExploreTitle small { display:block; color:#9ee7ff; font-size:9px; letter-spacing:.08em; }
.eternaExploreTitle h2 { margin:2px 0; color:#fff; font-size:20px; letter-spacing:-.03em; text-shadow:0 0 15px rgba(165,243,252,.32); }
.eternaExploreTitle p { margin:0; color:#a9bcd2; font-size:10px; }
.eternaRewardPolicy { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:13px 0; }
.eternaRewardPolicy > div { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 11px; border:1px solid rgba(125,211,252,.2); border-radius:11px; background:rgba(6,18,37,.62); }
.eternaRewardPolicy > div > span { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:10px; background:rgba(56,189,248,.12); font-size:19px; }
.eternaRewardPolicy .primary { border-color:rgba(103,232,249,.43); box-shadow:inset 3px 0 #67e8f9; }
.eternaRewardPolicy .separated { border-color:rgba(167,139,250,.35); box-shadow:inset 3px 0 #a78bfa; }
.eternaRewardPolicy small,.eternaRewardPolicy b,.eternaRewardPolicy em { display:block; min-width:0; }
.eternaRewardPolicy small { color:#87a4bf; font-size:8px; }
.eternaRewardPolicy b { margin-top:1px; color:#f8fbff; font-size:11px; }
.eternaRewardPolicy em { margin-top:2px; color:#91a7bd; font-size:8px; font-style:normal; line-height:1.35; }
.eternaExploreSectionHead { display:flex; align-items:end; justify-content:space-between; gap:10px; margin:14px 1px 8px; }
.eternaExploreSectionHead small,.eternaExploreSectionHead b { display:block; }.eternaExploreSectionHead small{color:#7f9bb7;font-size:8px}.eternaExploreSectionHead b{color:#dff7ff;font-size:12px}.eternaExploreSectionHead>span{padding:3px 7px;border:1px solid rgba(103,232,249,.25);border-radius:99px;background:rgba(15,23,42,.6);color:#a5f3fc;font-size:8px}
.eternaRegionGrid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
.eternaRegionCard { position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;min-width:0;padding:10px;border:1px solid rgba(125,211,252,.22);border-radius:11px;background:linear-gradient(145deg,rgba(8,28,52,.9),rgba(24,20,62,.84));color:#dbeafe;text-align:left;cursor:pointer;overflow:hidden; }
.eternaRegionCard>span { display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(165,243,252,.3);border-radius:50%;background:radial-gradient(circle,rgba(129,140,248,.34),rgba(15,23,42,.72));font-size:18px; }
.eternaRegionCard>div { min-width:0; }.eternaRegionCard small,.eternaRegionCard b,.eternaRegionCard em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eternaRegionCard small{color:#7dd3fc;font-size:7px}.eternaRegionCard b{margin:1px 0;color:#fff;font-size:10px}.eternaRegionCard em{color:#8299b0;font-size:7px;font-style:normal}.eternaRegionCard strong{padding:3px 6px;border-radius:99px;background:rgba(15,23,42,.7);color:#a5f3fc;font-size:7px;white-space:nowrap}
.eternaRegionCard.active { border-color:#fde68a;background:radial-gradient(circle at 8% 50%,rgba(250,204,21,.13),transparent 30%),linear-gradient(145deg,rgba(14,116,144,.28),rgba(67,56,202,.32));box-shadow:0 0 18px rgba(103,232,249,.14); }
.eternaRegionCard.locked { opacity:.5;filter:grayscale(.65); }.eternaRegionCard:disabled{cursor:default}
.eternaDifficultyGrid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }
.eternaDifficultyCard { position:relative;display:flex;align-items:center;gap:8px;min-width:0;padding:10px;border:1px solid rgba(148,163,184,.24);border-radius:11px;background:linear-gradient(145deg,rgba(15,29,52,.9),rgba(10,17,34,.86));color:#dbeafe;text-align:left;cursor:pointer; }
.eternaDifficultyCard>span { display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;border:1px solid rgba(103,232,249,.35);border-radius:9px;background:rgba(14,116,144,.14);color:#a5f3fc;font-size:15px;font-weight:900; }
.eternaDifficultyCard>div { min-width:0;flex:1; }.eternaDifficultyCard small,.eternaDifficultyCard b,.eternaDifficultyCard em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eternaDifficultyCard small{color:#7890a8;font-size:7px}.eternaDifficultyCard b{color:#fff;font-size:10px}.eternaDifficultyCard em{color:#67e8f9;font-size:8px;font-style:normal}
.eternaDifficultyCard strong { position:absolute;right:6px;top:5px;padding:2px 5px;border-radius:99px;background:rgba(34,211,238,.13);color:#a5f3fc;font-size:6px; }
.eternaDifficultyCard.active { border-color:#67e8f9;background:linear-gradient(145deg,rgba(8,145,178,.21),rgba(49,46,129,.34));box-shadow:0 0 16px rgba(34,211,238,.16); }
.eternaDifficultyCard.locked { opacity:.48;filter:grayscale(.55); }.eternaDifficultyCard:disabled{cursor:default}
.eternaElementGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.eternaElementCard { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:8px; min-width:0; min-height:58px; padding:9px 10px; overflow:hidden; border:1px solid rgba(148,163,184,.24); border-radius:11px; background:linear-gradient(145deg,rgba(15,29,52,.88),rgba(10,17,34,.82)); color:#dbeafe; text-align:left; cursor:pointer; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.eternaElementCard::after { content:""; position:absolute; right:-16px; bottom:-24px; width:55px; height:55px; border-radius:50%; background:var(--zone); opacity:.08; filter:blur(4px); }
.eternaElementCard:hover:not(:disabled) { transform:translateY(-2px); border-color:color-mix(in srgb,var(--zone) 70%,#fff); }
.eternaElementCard.active { border-color:var(--zone); background:linear-gradient(145deg,color-mix(in srgb,var(--zone) 19%,#11213a),#0c172b); box-shadow:0 0 17px color-mix(in srgb,var(--zone) 22%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--zone) 25%,transparent); }
.eternaElementCard:disabled { cursor:default; opacity:.76; }
.eternaElementIcon { display:grid; place-items:center; width:32px; height:32px; border:1px solid color-mix(in srgb,var(--zone) 42%,transparent); border-radius:50%; background:color-mix(in srgb,var(--zone) 13%,#0f172a); font-size:18px; text-align:center; }
.eternaElementCopy,.eternaElementCopy b,.eternaElementCopy small { display:block; min-width:0; }
.eternaElementCopy small { color:color-mix(in srgb,var(--zone) 68%,#cbd5e1); font-size:8px; }
.eternaElementCopy b { margin-top:2px; overflow:hidden; color:#fff; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.eternaElementState { position:absolute; top:5px; right:6px; padding:2px 5px; border-radius:99px; background:rgba(255,255,255,.07); color:#91a7bd; font-size:7px; white-space:nowrap; }
.eternaElementCard.active .eternaElementState { background:color-mix(in srgb,var(--zone) 20%,#0f172a); color:#fff; }
.eternaSelectedZone { position:relative; margin-top:10px; padding:13px; overflow:hidden; border:1px solid color-mix(in srgb,var(--zone) 62%,#334155); border-radius:13px; background:radial-gradient(circle at 95% 0,color-mix(in srgb,var(--zone) 17%,transparent),transparent 36%),rgba(7,18,36,.84); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.eternaSelectedHead { display:flex; align-items:center; gap:9px; }.eternaSelectedHead>span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--zone) 17%,#111827);font-size:24px;box-shadow:0 0 14px color-mix(in srgb,var(--zone) 18%,transparent)}
.eternaSelectedZone small,.eternaSelectedZone b,.eternaSelectedZone em { display:block; }
.eternaSelectedZone small { color:#89a4be; font-size:8px; }.eternaSelectedZone b{margin:1px 0;color:#fff;font-size:14px}.eternaSelectedZone em{color:#b8c9d9;font-size:9px;font-style:normal}
.eternaSelectedMonsters { margin:9px 0 0; padding:7px 9px; border-radius:8px; background:rgba(15,30,52,.7); }.eternaSelectedMonsters small{display:inline;margin-right:7px;color:var(--zone)}.eternaSelectedMonsters span{color:#b8c9d9;font-size:8px}
.eternaElementMechanic { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--zone) 24%,transparent);border-radius:7px;background:color-mix(in srgb,var(--zone) 7%,rgba(15,23,42,.6)); }.eternaElementMechanic small{color:var(--zone);font-size:7px}.eternaElementMechanic b{color:#cbd5e1;font-size:7px;text-align:right}
.eternaHuntStats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:9px; }.eternaHuntStats>span{padding:7px;border:1px solid rgba(125,211,252,.13);border-radius:8px;background:rgba(8,18,35,.62);color:#9fb4c8;font-size:8px;text-align:center}.eternaHuntStats b{display:inline;color:#fff;font-size:9px}
.eternaCurrentRecord { display:grid;grid-template-columns:minmax(145px,1.5fr) repeat(3,minmax(0,1fr));align-items:center;gap:5px;margin-top:8px;padding:8px;border:1px solid rgba(125,211,252,.19);border-radius:8px;background:rgba(15,30,52,.62); }
.eternaCurrentRecord>div small,.eternaCurrentRecord>div b{display:block}.eternaCurrentRecord>div small{color:#7890a8;font-size:7px}.eternaCurrentRecord>div b{color:#e0f2fe;font-size:9px}.eternaCurrentRecord>span{padding:5px;border-radius:6px;background:rgba(2,6,23,.42);color:#a9bdd0;font-size:7px;text-align:center}.eternaCurrentRecord.complete{border-color:rgba(74,222,128,.44);background:rgba(20,83,45,.18)}.eternaCurrentRecord.complete>div b{color:#86efac}
.eternaRegionBonus { display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px;border:1px solid rgba(250,204,21,.3);border-radius:8px;background:linear-gradient(90deg,rgba(120,53,15,.15),rgba(49,46,129,.2)); }.eternaRegionBonus>span{font-size:22px}.eternaRegionBonus small,.eternaRegionBonus b,.eternaRegionBonus em{display:block}.eternaRegionBonus small{color:#a5b4fc;font-size:7px}.eternaRegionBonus b{color:#fde68a;font-size:9px}.eternaRegionBonus em{color:#94a3b8;font-size:7px;font-style:normal}
.eternaPioneerDaily { display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin-top:8px;padding:8px 9px;border:1px solid rgba(251,191,36,.32);border-radius:8px;background:rgba(120,53,15,.13);font-size:8px}.eternaPioneerDaily>span{color:#fde68a}.eternaPioneerDaily>b{color:#fff}.eternaPioneerDaily>small{grid-column:1/-1;color:#a99574;font-size:7px}
.eternaHuntEvents { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin:8px 0; }.eternaHuntEvents>span{padding:4px 6px;border:1px solid rgba(167,139,250,.18);border-radius:6px;background:rgba(67,56,202,.1);color:#c4b5fd;font-size:8px}.eternaHuntEvents>small{flex:1 1 100%;color:#71869c;font-size:7px}
.eternaElementStart { width:100%; min-height:40px; padding:10px; border:1px solid color-mix(in srgb,var(--zone) 78%,#fff); border-radius:9px; background:linear-gradient(100deg,color-mix(in srgb,var(--zone) 52%,#075985),color-mix(in srgb,var(--zone) 38%,#4338ca)); color:#fff; font-size:11px; font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.55); box-shadow:0 6px 16px color-mix(in srgb,var(--zone) 16%,transparent); cursor:pointer; }
.eternaElementCard.eternaQuickCard { display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:7px; cursor:default; }
.eternaZoneSelectButton { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:8px; width:100%; min-width:0; padding:2px; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.eternaZoneQuickActions { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:5px; width:100%; }
.eternaZoneQuickActions button { min-height:30px; padding:5px 4px; border:1px solid #38bdf8; border-radius:7px; background:rgba(14,116,144,.28); color:#e0f2fe; font-size:9px; font-weight:800; cursor:pointer; }
.eternaZoneQuickActions button.breakthrough { border-color:#f59e0b; background:rgba(180,83,9,.28); color:#fef3c7; }
.eternaZoneQuickActions button:disabled { opacity:.35; cursor:not-allowed; }
.eternaAllMapBadge { position:absolute; top:4px; right:5px; z-index:3; max-width:80%; padding:2px 6px; border-radius:999px; background:rgba(99,102,241,.88); color:#eef2ff; font-size:8px; font-weight:900; pointer-events:none; }
.eternaElementGrid>.eternaQuickCard:first-child .eternaElementState { top:22px; }
.eternaQuickStartHint { margin-top:8px; padding:9px; border:1px dashed rgba(129,140,248,.48); border-radius:8px; background:rgba(49,46,129,.18); color:#c7d2fe; font-size:10px; text-align:center; }
.eternaForgeScreen { width:100%; min-height:100%; padding:14px; border-radius:12px; background:linear-gradient(145deg,#111827,#171a34); }
.eternaForgeGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:none; overflow:visible; }
.eternaForgeGrid>div { min-height:88px; border:1px solid rgba(129,140,248,.26) !important; background:linear-gradient(145deg,rgba(30,41,59,.92),rgba(15,23,42,.9)) !important; }
@media (max-width:600px) {
  .eternaForgeGrid { grid-template-columns:1fr; }
  .eternaForgeScreen { padding:10px; }
}
.eternaRecordBook { margin:12px 0;border:1px solid rgba(167,139,250,.3);border-radius:12px;background:rgba(10,17,34,.68);overflow:hidden; }
.eternaRecordBook>summary { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;list-style:none;cursor:pointer; }.eternaRecordBook>summary::-webkit-details-marker{display:none}.eternaRecordBook>summary small,.eternaRecordBook>summary b{display:block}.eternaRecordBook>summary small{color:#8299b0;font-size:7px}.eternaRecordBook>summary b{color:#e9d5ff;font-size:11px}.eternaRecordBook>summary strong{padding:4px 8px;border-radius:99px;background:rgba(124,58,237,.17);color:#c4b5fd;font-size:10px}
.eternaRecordBookBody { padding:0 11px 11px;border-top:1px solid rgba(167,139,250,.14); }.eternaRecordBookBody>p{margin:8px 1px 0;color:#667c92;font-size:7px}
.eternaRecordMilestones { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0; }.eternaRecordMilestones span{padding:7px;border:1px solid rgba(100,116,139,.24);border-radius:7px;background:rgba(15,23,42,.58);color:#71869c;font-size:7px;text-align:center}.eternaRecordMilestones b{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:3px;border-radius:50%;background:#334155;color:#94a3b8}.eternaRecordMilestones span.done{border-color:rgba(74,222,128,.35);color:#86efac}.eternaRecordMilestones span.done b{background:#166534;color:#dcfce7}
.eternaRecordTier { margin-top:9px; }.eternaRecordTierHead{display:flex;justify-content:space-between;margin-bottom:5px}.eternaRecordTierHead b{color:#cbd5e1;font-size:8px}.eternaRecordTierHead small{color:#64748b;font-size:7px}
.eternaRecordGrid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px; }.eternaRecordCell{display:flex;align-items:center;gap:5px;min-width:0;padding:6px;border:1px solid rgba(100,116,139,.18);border-radius:7px;background:rgba(15,23,42,.48)}.eternaRecordCell>span{font-size:14px}.eternaRecordCell>div{min-width:0;flex:1}.eternaRecordCell b,.eternaRecordCell small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eternaRecordCell b{color:#b8c8d8;font-size:7px}.eternaRecordCell small{color:#60758a;font-size:6px}.eternaRecordCell em{color:#64748b;font-size:8px;font-style:normal}.eternaRecordCell.complete{border-color:color-mix(in srgb,var(--record-zone) 55%,#334155);background:color-mix(in srgb,var(--record-zone) 10%,rgba(15,23,42,.64))}.eternaRecordCell.complete b,.eternaRecordCell.complete em{color:#dcfce7}

/* 에테르나 탐사 UI v2 — 선택과 시작을 우선하고 긴 설명/성장 기능은 접어 둔다. */
.eternaElementExplore { padding:14px; border-radius:15px; background:linear-gradient(155deg,#091426 0%,#111c35 58%,#17152f 100%); animation:eternaExploreEnter .42s cubic-bezier(.2,.8,.2,1) both; }
.eternaExploreHeader { align-items:center; padding-bottom:11px; }
.eternaExploreTitle { flex:1; }
.eternaExploreCrest { flex-basis:40px; width:40px; height:40px; font-size:17px; animation:eternaCrestFloat 2.6s ease-in-out infinite; }
.eternaExploreTitle h2 { margin:1px 0; font-size:18px; }
.eternaRewardGuide { margin:9px 0 4px; overflow:hidden; border:1px solid rgba(103,232,249,.22); border-radius:9px; background:rgba(6,18,37,.5); }
.eternaRewardGuide>summary { display:flex; align-items:center; gap:8px; min-height:35px; padding:7px 10px; list-style:none; color:#dff7ff; font-size:9px; cursor:pointer; }
.eternaRewardGuide>summary::-webkit-details-marker { display:none; }
.eternaRewardGuide>summary b { margin-left:auto; color:#a5f3fc; font-size:10px; }
.eternaRewardGuide>summary em { color:#71869c; font-size:8px; font-style:normal; }
.eternaRewardGuide[open]>summary { border-bottom:1px solid rgba(103,232,249,.14); }
.eternaRewardGuide[open]>summary em { font-size:0; }
.eternaRewardGuide[open]>summary em::after { content:'접기'; font-size:8px; }
.eternaRewardGuide .eternaRewardPolicy { margin:0; padding:7px; }
.eternaExploreSectionHead { margin:12px 1px 6px; align-items:center; }
.eternaExploreSectionHead small { color:#67e8f9; font-size:7px; font-weight:900; letter-spacing:.12em; }
.eternaExploreSectionHead b { font-size:11px; }
.eternaDifficultyGrid { gap:5px; }
.eternaDifficultyCard { min-height:48px; padding:7px 8px; border-radius:9px; }
.eternaDifficultyCard>span { flex-basis:27px; width:27px; height:27px; font-size:12px; }
.eternaDifficultyCard b { font-size:9px; }
.eternaDifficultyCard em { font-size:7px; }
.eternaDifficultyCard small { padding-right:20px; font-size:6px; }
.eternaElementGrid { gap:5px; }
.eternaElementCard { grid-template-columns:29px minmax(0,1fr); min-height:49px; padding:7px 8px; gap:6px; border-radius:9px; }
.eternaElementIcon { width:27px; height:27px; font-size:15px; }
.eternaElementCopy small { font-size:7px; }
.eternaElementCopy b { margin-top:1px; font-size:9px; }
.eternaElementState { top:4px; right:4px; font-size:6px; }
.eternaSelectedZone { margin-top:7px; padding:10px; border-radius:11px; }
.eternaSelectedHead>span { width:34px; height:34px; border-radius:9px; font-size:19px; }
.eternaSelectedZone b { font-size:12px; }
.eternaSelectedZone em { font-size:8px; }
.eternaHuntStats { margin-top:7px; }
.eternaHuntStats>span { padding:6px 4px; }
.eternaCurrentRecord { margin-top:6px; padding:6px; }
.eternaZoneInfo { margin:6px 0; overflow:hidden; border:1px solid rgba(125,211,252,.13); border-radius:8px; background:rgba(4,13,27,.38); }
.eternaZoneInfo>summary { display:flex; align-items:center; justify-content:space-between; min-height:30px; padding:5px 8px; list-style:none; color:#91a7bd; font-size:8px; cursor:pointer; }
.eternaZoneInfo>summary::-webkit-details-marker { display:none; }
.eternaZoneInfo>summary span { color:var(--zone); font-size:13px; }
.eternaZoneInfo[open]>summary span { transform:rotate(45deg); }
.eternaZoneInfo .eternaSelectedMonsters,.eternaZoneInfo .eternaElementMechanic { margin:0 6px 5px; }
.eternaZoneInfo .eternaHuntEvents { margin:5px 6px 7px; }
.eternaElementStart { min-height:38px; padding:8px; }
.eternaRecordBook { margin:8px 0; }
.eternaSecondaryContent { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:8px; }
.eternaSecondaryPanel { min-width:0; overflow:hidden; border:1px solid rgba(167,139,250,.24); border-radius:10px; background:rgba(9,16,32,.62); }
.eternaSecondaryPanel>summary { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:45px; padding:7px 9px; list-style:none; cursor:pointer; }
.eternaSecondaryPanel>summary::-webkit-details-marker { display:none; }
.eternaSecondaryPanel>summary>span { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:rgba(124,58,237,.13); font-size:14px; }
.eternaSecondaryPanel>summary small,.eternaSecondaryPanel>summary b { display:block; }
.eternaSecondaryPanel>summary small { color:#71869c; font-size:7px; }
.eternaSecondaryPanel>summary b { color:#e9d5ff; font-size:9px; }
.eternaSecondaryPanel>summary em { color:#8299b0; font-size:7px; font-style:normal; }
.eternaSecondaryPanel[open] { grid-column:1/-1; }
.eternaSecondaryPanel[open]>summary { border-bottom:1px solid rgba(167,139,250,.15); }
.eternaSecondaryPanel[open]>summary em { font-size:0; }
.eternaSecondaryPanel[open]>summary em::after { content:'접기'; font-size:7px; }
.eternaSecondaryBody { padding:7px; }
.eternaSecondaryBody>.constellationBoard,.eternaSecondaryBody>.eternaExpeditionBoard { margin:0; box-shadow:none; }

/* 탐사 콘텐츠 공통 모션: 진입은 짧고, 선택 상태는 은은하게 유지한다. */
.eternaExploreStars i { animation:eternaStarTwinkle 2.4s ease-in-out infinite alternate; }
.eternaExploreStars i:nth-child(2) { animation-delay:.35s; }.eternaExploreStars i:nth-child(3) { animation-delay:.7s; }
.eternaExploreStars i:nth-child(4) { animation-delay:1.05s; }.eternaExploreStars i:nth-child(5) { animation-delay:1.4s; }
.eternaExploreHeader,.eternaRewardGuide,.eternaExploreSectionHead,.eternaDifficultyCard,.eternaElementCard,.eternaSelectedZone,.eternaRecordBook,.eternaSecondaryPanel { animation:eternaMenuRise .34s cubic-bezier(.2,.75,.25,1) both; }
.eternaRewardGuide { animation-delay:.04s; }
.eternaDifficultyCard:nth-child(1),.eternaExploreSectionHead:nth-of-type(1) { animation-delay:.07s; }
.eternaDifficultyCard:nth-child(2) { animation-delay:.10s; }.eternaDifficultyCard:nth-child(3) { animation-delay:.13s; }
.eternaElementCard:nth-child(1) { animation-delay:.10s; }.eternaElementCard:nth-child(2) { animation-delay:.13s; }
.eternaElementCard:nth-child(3) { animation-delay:.16s; }.eternaElementCard:nth-child(4) { animation-delay:.19s; }
.eternaElementCard:nth-child(5) { animation-delay:.22s; }.eternaElementCard:nth-child(6) { animation-delay:.25s; }
.eternaSelectedZone { animation-delay:.18s; }.eternaRecordBook { animation-delay:.21s; }
.eternaSecondaryPanel:nth-child(1) { animation-delay:.24s; }.eternaSecondaryPanel:nth-child(2) { animation-delay:.28s; }
.eternaDifficultyCard,.eternaElementCard,.eternaRecordBook>summary,.eternaSecondaryPanel>summary,.eternaRewardGuide>summary,.eternaZoneInfo>summary { transition:transform .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease; }
.eternaDifficultyCard:hover:not(:disabled),.eternaElementCard:hover:not(:disabled) { transform:translateY(-2px); }
.eternaDifficultyCard:active:not(:disabled),.eternaElementCard:active:not(:disabled) { transform:scale(.975); }
.eternaDifficultyCard.active>span,.eternaElementCard.active .eternaElementIcon { animation:eternaChoicePulse 1.8s ease-in-out infinite; }
.eternaRewardGuide>summary:hover,.eternaZoneInfo>summary:hover,.eternaRecordBook>summary:hover,.eternaSecondaryPanel>summary:hover { background:rgba(103,232,249,.055); }
.eternaRewardGuide[open] .eternaRewardPolicy,.eternaZoneInfo[open]>*:not(summary),.eternaRecordBook[open] .eternaRecordBookBody,.eternaSecondaryPanel[open] .eternaSecondaryBody { animation:eternaDetailsOpen .25s ease-out both; transform-origin:top center; }
.eternaSecondaryPanel[open] .constellationPath,.eternaSecondaryPanel[open] .eternaExpeditionMission { animation:eternaMenuRise .28s ease-out both; }
.eternaSecondaryPanel[open] .constellationPath:nth-child(2),.eternaSecondaryPanel[open] .eternaExpeditionMission:nth-child(2) { animation-delay:.05s; }
.eternaSecondaryPanel[open] .constellationPath:nth-child(3),.eternaSecondaryPanel[open] .eternaExpeditionMission:nth-child(3) { animation-delay:.10s; }
.eternaElementStart { position:relative; overflow:hidden; transition:transform .16s ease,filter .16s ease; }
.eternaElementStart::after { content:''; position:absolute; top:-80%; left:-35%; width:22%; height:250%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent); transform:rotate(18deg); animation:eternaButtonShine 3s ease-in-out infinite; pointer-events:none; }
.eternaElementStart:hover { filter:brightness(1.1); transform:translateY(-1px); }.eternaElementStart:active { transform:scale(.985); }
@keyframes eternaExploreEnter { from{opacity:0;transform:translateY(10px) scale(.992)} to{opacity:1;transform:none} }
@keyframes eternaMenuRise { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none} }
@keyframes eternaDetailsOpen { from{opacity:0;transform:translateY(-5px) scaleY(.97)} to{opacity:1;transform:none} }
@keyframes eternaCrestFloat { 0%,100%{transform:translateY(0);box-shadow:0 0 18px rgba(129,140,248,.4)} 50%{transform:translateY(-2px);box-shadow:0 0 27px rgba(165,243,252,.58)} }
@keyframes eternaChoicePulse { 0%,100%{filter:brightness(1);transform:scale(1)} 50%{filter:brightness(1.2);transform:scale(1.06)} }
@keyframes eternaStarTwinkle { from{opacity:.28;transform:scale(.72)} to{opacity:.95;transform:scale(1.25)} }
@keyframes eternaButtonShine { 0%,58%{left:-35%;opacity:0} 67%{opacity:1} 84%,100%{left:118%;opacity:0} }
.npcVisitDialogue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 72px;
  width: min(88%, 500px);
  transform: translateX(-50%);
  padding: 10px 14px;
  border: 1px solid rgba(253,230,138,.76);
  border-radius: 10px;
  background: rgba(12,16,23,.88);
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 5px 18px rgba(0,0,0,.42);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.npcVisitDialogue::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(253,230,138,.76);
  border-bottom: 1px solid rgba(253,230,138,.76);
  background: rgba(12,16,23,.94);
}
.npcVisitCaption {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 22px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,.92);
}
.npcVisitName { font-size: 16px; font-weight: 800; color: #fde68a; }
.npcVisitHint { margin-top: 5px; font-size: 11px; color: #d7dee8; }

@media (max-width: 480px) {
  .npcVisitDialogue { bottom: 66px; width: 92%; padding: 8px 10px; font-size: 10px; }
  .npcVisitCaption { bottom: 15px; }
  .npcVisitOverlay.eternaServicePortrait .npcVisitArtwork {
    object-fit: cover;
    object-position: 50% 50%;
  }
  .eternaElementExplore { margin:5px 0; padding:11px; border-radius:14px; }
  .eternaExploreHeader { gap:8px; padding-bottom:10px; }
  .eternaExploreCrest { flex-basis:38px; width:38px; height:38px; font-size:16px; }
  .eternaExploreTitle { gap:8px; }.eternaExploreTitle h2{font-size:16px}.eternaExploreTitle p{display:none}.eternaExploreTitle small{font-size:8px}
  .eternaRewardPolicy { grid-template-columns:1fr; gap:6px; margin:10px 0; }.eternaRewardPolicy>div{padding:8px}.eternaRewardPolicy>div>span{flex-basis:29px;width:29px;height:29px;font-size:16px}
  .eternaRegionGrid { grid-template-columns:1fr;gap:5px; }.eternaRegionCard{padding:8px}.eternaRegionCard>span{width:31px;height:31px;font-size:16px}
  .eternaDifficultyGrid { grid-template-columns:1fr;gap:5px; }.eternaDifficultyCard{padding:8px}.eternaDifficultyCard>span{flex-basis:27px;width:27px;height:27px;font-size:12px}
  .eternaElementGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .eternaElementCard { grid-template-columns:28px minmax(0,1fr); min-height:52px; padding:7px; gap:6px; }.eternaElementIcon{width:27px;height:27px;font-size:15px}.eternaElementCopy b{font-size:9px}.eternaElementState{font-size:6px}
  .eternaSelectedZone { padding:10px; }.eternaSelectedHead>span{width:34px;height:34px;font-size:20px}.eternaSelectedZone b{font-size:12px}.eternaSelectedZone em{font-size:8px}
  .eternaHuntStats { gap:4px; }.eternaHuntStats>span{padding:6px 3px;font-size:7px}.eternaHuntStats b{font-size:8px}
  .eternaCurrentRecord { grid-template-columns:1fr 1fr 1fr; }.eternaCurrentRecord>div{grid-column:1/-1}.eternaRecordMilestones{grid-template-columns:1fr}.eternaRecordGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 거래소 스킨 합본 미리보기는 NPC 대화용 세로 구도와 다르다. 상인 말풍선이
     상품 캐릭터를 덮지 않게 숨기고, cover 크롭 대신 이미지 전체를 프레임에 맞춘다. */
  .npcVisitOverlay.marketProductPreview .npcVisitDialogue { display: none; }
  .npcVisitOverlay.marketProductPreview .npcVisitArtwork {
    object-fit: contain;
    object-position: 50% 50%;
    background: #0b1017;
  }
  .npcVisitOverlay.marketProductPreview::after {
    background: linear-gradient(180deg, rgba(5,7,10,0) 68%, rgba(5,7,10,.82) 100%);
  }
  .npcVisitOverlay.marketProductPreview .npcVisitCaption {
    left: 8px;
    right: 8px;
    bottom: 7px;
  }
  .npcVisitOverlay.marketProductPreview .npcVisitName { display: none; }
  .npcVisitOverlay.marketProductPreview .npcVisitHint {
    margin: 0;
    font-size: 9px;
    line-height: 1.35;
  }
  .skillBar { left: 112px; grid-template-columns: repeat(6, 28px); gap: 9px; bottom: 60px; }
  .skillSlotBtn { width: 28px; height: 28px; font-size: 14px; }
}

/* ── 캐릭터 패널: 공용 패시브 8슬롯 그리드 ── */
.passiveSkillGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 4px; }
.passiveSlot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 6px 4px !important; font-size: 10px !important; text-align: center;
}
.passiveSlot.filled { background: var(--nav-bg-active) !important; border-color: var(--nav-border-active) !important; }
.passiveSlot.locked { opacity: .5; cursor: default; }

/* ── 성장 > 캐릭터: 장착 무기의 액티브 스킬 설명 목록(잠금 스킬도 아이콘+설명 전부 표시) ── */
.activeSkillList { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.standaloneProgressPanel { width:100%; max-width:100%; min-width:0; box-sizing:border-box; display:flex; flex-direction:column; gap:10px; }
.standalonePanelHeader { box-sizing:border-box; width:100%; padding:12px; }
.standalonePanelHeader h2 { margin:0; font-size:17px; }
.standalonePanelHeader p { margin:5px 0 0; color:#94a3b8; font-size:11px; line-height:1.45; }
.standalonePresetList { margin-top:10px; }
.titleCategoryLabel { margin:12px 0 5px; color:#94a3b8; font-size:11px; font-weight:800; }
.titleNewDot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#facc15; box-shadow:0 0 4px rgba(250,204,21,.9); vertical-align:middle; }
#titlePanel .skinCollectionRow em { color:#7ee787; font-style:normal; }
#titlePanel .skinCollectionRow button { flex:0 0 auto; min-height:36px; padding:6px 11px; border:1px solid #fbbf24; border-radius:6px; background:#b45309; color:#fff; cursor:pointer; }
@media (max-width:600px) {
  .standaloneProgressPanel { gap:8px; }
  .standalonePanelHeader { padding:10px; }
  .standalonePanelHeader h2 { font-size:15px; }
  #skillPanel .activeSkillCard { min-width:0; }
  #skillPanel .passiveSkillGrid { width:100%; }
  #titlePanel .skinCollectionRow, #skinPanel .skinCollectionRow { align-items:flex-start; gap:8px; }
}
.skillManagementTabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; }
.skillManagementTabs button { min-width:0; min-height:42px; padding:8px; border:2px solid #475569; border-radius:8px; background:#182131; color:#cbd5e1; font-weight:800; cursor:pointer; }
.skillManagementTabs button.active { border-color:#38bdf8; background:#0c4a6e; color:#e0f2fe; box-shadow:inset 0 0 0 1px rgba(56,189,248,.3); }
.activeSkillWorkspace, .skinPanelAppearance { box-sizing:border-box; width:100%; padding:12px; }
.activeSkillWorkspace { position:relative; }
.skinCurrentSummary { margin-bottom:10px; color:#94a3b8; font-size:11px; }
.skinCurrentSummary b { color:#f8fafc; }
.skinPanelActions { display:flex; justify-content:flex-end; margin-top:10px; }
.skinPanelActions button { min-height:38px; padding:8px 14px; border:1px solid #fbbf24; border-radius:7px; background:#92400e; color:#fff; font-weight:800; cursor:pointer; }
@media (max-width:360px) { .skillManagementTabs { gap:5px; } .skillManagementTabs button { padding:7px 3px; font-size:10px; } }
@media (max-width:600px) {
  .activeSkillWorkspace, .skinPanelAppearance { padding:9px; }
  #skinPanel .skinSelectionGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  #skinPanel .skinAuraSection { align-items:flex-start; gap:8px; }
}
.activeSkillCard {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  background: #1c222c; border-radius: 10px; padding: 10px 12px;
}
.activeSkillCard.locked { opacity: .55; }
.activeSkillIcon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 6px;
  background-color: #10141b; background-size: cover; background-position: center; background-repeat: no-repeat;
  image-rendering: pixelated; border: 1px solid #2a3341;
}
.activeSkillIconLocked {
  display:flex; align-items:center; justify-content:center;
  background-image:none !important; color:#94a3b8; font-size:18px;
  filter:none;
}
.titleScreenLocalTest {
  width:100%; margin-top:8px; padding:9px 12px; border-radius:8px;
  border:1px dashed #a78bfa; background:rgba(76,29,149,.35); color:#ddd6fe;
  font-size:11px; font-weight:800; cursor:pointer;
}
.titleScreenLocalTest:hover { background:rgba(109,40,217,.45); }
.activeSkillInfo { min-width: 0; flex: 1 1 200px; }
.activeSkillName { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.activeSkillLockTag { font-size: 10px; font-weight: 600; color: #8a94a3; }
.activeSkillLevelTag { font-size: 10px; font-weight: 800; color: #facc15; background: rgba(250,204,21,.12); border-radius: 5px; padding: 1px 6px; }
.activeSkillMasteryTag { font-size:10px; font-weight:800; color:#c4b5fd; background:rgba(139,92,246,.14); border-radius:5px; padding:1px 6px; }
.activeSkillMeta { font-size: 10px; color: #8a94a3; margin-top: 1px; }
.activeSkillDesc { font-size: 11px; color: #cbd5e1; margin-top: 3px; line-height: 1.45; }
.activeSkillDesc small { color: #7c8797; margin-right: 4px; }
.activeSkillDesc.next { color: #94a3b8; }
.activeSkillUpgradeBtn {
  flex-shrink: 0; align-self: center; min-width: 92px; padding: 7px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 800; border: 1px solid #3a4556; background: #262f3d; color: #94a3b8; cursor: not-allowed;
}
.activeSkillUpgradeBtn.upgradeReady {
  border-color: #fde68a; background: linear-gradient(135deg,#a16207,#f59e0b); color: #fffbea; cursor: pointer;
}
.activeSkillUpgradeBtn.upgradeReady:hover { filter: brightness(1.1); }
.activeSkillPointHeader {
  margin: 4px 0 2px; padding: 8px 12px; border-radius: 8px;
  background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.28);
}
.activeSkillPointTitle { font-size: 12px; font-weight: 800; color: #fde68a; }
.activeSkillPointRow { font-size: 12px; color: #e2e8f0; margin-top: 3px; }
.activeSkillPointSub { font-size: 10.5px; color: #8a94a3; margin-top: 2px; }
.activeSkillResetRow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.activeSkillResetBtn {
  flex: 1 1 140px; padding: 8px 0; border-radius: 8px; font-size: 11px; font-weight: 700;
  background: #262f3d; color: #cbd5e1; border: 1px solid #3a4556; cursor: pointer;
}
.activeSkillResetBtn:hover { background: #2f3a4a; }
.activeSkillFold.skillPointGlow { border-color:rgba(250,204,21,.7); box-shadow:0 0 12px rgba(250,204,21,.2); }
.skillPointNotice { display:inline-block; width:8px; height:8px; margin-left:6px; border-radius:50%; background:#facc15; box-shadow:0 0 6px rgba(250,204,21,.95); vertical-align:middle; }
.activeSkillPresets { margin:8px 0; padding:8px; border:1px solid #334155; border-radius:8px; background:#111827; }
.activeSkillPresetTitle { font-size:11px; font-weight:800; color:#cbd5e1; margin-bottom:6px; }
.activeSkillPresetGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.activeSkillPresetCard { min-width:0; padding:6px; border:1px solid #334155; border-radius:7px; background:#182131; display:flex; flex-direction:column; gap:3px; }
.activeSkillPresetCard.selected { border-color:#38bdf8; box-shadow:inset 0 0 0 1px rgba(56,189,248,.25); }
.activeSkillPresetCard b { font-size:10px; color:#f8fafc; }
.activeSkillPresetCard small { font-size:9px; color:#94a3b8; }
.activeSkillPresetCard span { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.activeSkillPresetCard button { min-width:0; padding:4px 2px; font-size:9px; color:#e2e8f0; background:#263244; border:1px solid #475569; border-radius:4px; cursor:pointer; white-space:nowrap; }
.activeSkillPresetCard button.activeSkillPresetApply { color:#fff7ed; border-color:#ef4444; background:#7f1d1d; }
.activeSkillWeaponTabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; margin:8px 0; }
.activeSkillWeaponTabs button { min-width:0; padding:8px 3px; border:1px solid #475569; border-radius:7px; background:#182131; color:#cbd5e1; font-size:10px; font-weight:800; cursor:pointer; }
.activeSkillWeaponTabs button.selected { border-color:#38bdf8; background:#0c4a6e; color:#e0f2fe; box-shadow:inset 0 0 0 1px rgba(56,189,248,.3); }
.activeSkillTreeHeading { margin:7px 0; color:#f8fafc; font-size:13px; font-weight:900; }
@media (max-width:480px) { .activeSkillPresetGrid { grid-template-columns:1fr; } .activeSkillPresetCard { display:grid; grid-template-columns:1fr auto auto; align-items:center; } }
@media (max-width:480px) { .activeSkillWeaponTabs { grid-template-columns:repeat(5,minmax(52px,1fr)); overflow-x:auto; padding-bottom:3px; } }
/* 전투 스킬바 아이콘 좌상단의 스킬 레벨 배지 — 쿨타임 숫자(중앙)·잠금 표시·자동사용 배지(하단)와 겹치지 않는다. */
.skillSlotLevelBadge {
  position: absolute; top: 0; left: 0; z-index: 5;
  font-size: 7px; font-weight: 800; line-height: 1; padding: 1px 2px;
  background: rgba(0,0,0,.65); color: #facc15; border-bottom-right-radius: 4px; pointer-events: none;
}

/* ── 패시브 선택 팝업 ── */
.passivePickRow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 10px !important; margin-bottom: 6px; font-size: 12px !important; text-align: left;
}
.passivePickRow.selected { background: var(--nav-bg-active) !important; border-color: var(--nav-border-active) !important; }
.passivePickDesc { color: var(--px-muted); font-size: 11px; }

@media (max-width: 360px) {
  .bottomHud { left: 5px; right: 5px; bottom: 7px; }
  .hudExpTag { display: none; }
}

/* ── 패널 영역 ── */
.panels { flex: 1; overflow-y: auto; padding: 12px; }
.tabPanel { display: none; }
.tabPanel.active { display: block; }

/* ── 하단 네비게이션 ── */
.navBar {
  display: flex;
  background: #1a1f28;
  border-top: 1px solid #2a3341;
  padding-bottom: env(safe-area-inset-bottom);
}
.navBtn {
  flex: 1;
  background: none; border: none; color: #7c8797;
  padding: 7px 1px 5px;
  font-size: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer;
  min-width: 0;
}
.navBtn span { font-size: 9px; }
.navBtn.active { color: #38bdf8; }

/* 무료 소환/미수령 편지/미개봉 핫타임 상자·스타터팩이 있을 때 해당 탭·상위 그룹 버튼에 붙는 알림 발광
   (syncNavNotifications, 2초 주기). 세 종류의 네비 버튼(.navBtn/.mobileSubBtn/.majorNavBtn)에
   공통으로 적용된다. */
@keyframes navGlowPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(250,204,21,.0); }
  50% { box-shadow: 0 0 12px 3px rgba(250,204,21,.75); }
}
.navBtn.navGlow, .mobileSubBtn.navGlow, .majorNavBtn.navGlow {
  position: relative;
  animation: navGlowPulse 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.navBtn.navGlow::after, .mobileSubBtn.navGlow::after, .majorNavBtn.navGlow::after {
  content: "";
  position: absolute; top: 2px; right: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #facc15; box-shadow: 0 0 4px rgba(250,204,21,.9);
}

/* Mobile two-level navigation. Desktop keeps the original direct tabs. */
.majorNavBar,
.mobileSubNav { display: none; }

@media (min-width: 0px) {
  .majorNavBar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 0 0 auto;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    background: #151b25;
    border-top: 1px solid #334155;
    gap: 4px;
  }
  .majorNavBtn {
    min-width: 0;
    min-height: 44px;
    padding: 4px 2px 3px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #8491a3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: "Galmuri11", sans-serif;
    font-size: 11px;
  }
  .majorNavBtn.active {
    color: #f8fafc;
    border-color: #38bdf8;
    background: linear-gradient(180deg, rgba(56,189,248,.18), rgba(37,99,235,.08));
    box-shadow: inset 0 0 0 1px rgba(125,211,252,.08);
  }
  .majorNavIcon { font-size: 20px; line-height: 1; }
  .mobileSubNav {
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    padding: 7px 8px 8px;
    background: #1b2330;
    border-top: 1px solid #2f3b4d;
  }
  .mobileMenuHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    margin-bottom: 6px;
    padding: 0 2px 6px;
    border-bottom: 1px solid rgba(71, 85, 105, .7);
    color: #e2e8f0;
    font-family: "Galmuri11", sans-serif;
    font-size: 11px;
  }
  .mobileMenuUtility {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    padding: 4px 9px;
    border: 1px solid #475569;
    border-radius: 7px;
    background: #222b38;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 10px;
  }
  .mobileMenuUtility .menuIconImage { width: 16px; height: 16px; }
  .mobileMenuSections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .mobileMenuSection {
    min-width: 0;
    padding: 6px;
    border: 1px solid rgba(71, 85, 105, .68);
    border-radius: 9px;
    background: rgba(15, 23, 42, .34);
  }
  .mobileMenuSectionTitle {
    margin: 0 0 5px;
    color: #93c5fd;
    font-family: "Galmuri11", sans-serif;
    font-size: 9px;
    font-weight: 700;
  }
  .mobileMenuSectionGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .mobileSubBtn {
    display: flex;
    min-width: 0;
    min-height: 48px;
    padding: 5px 2px 4px;
    border-radius: 7px;
    border: 1px solid #3b4759;
    background: #222b38;
    color: #aab5c4;
    font-family: "Galmuri11", sans-serif;
    font-size: 9px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
  }
  .mobileSubIcon { line-height: 1; }
  .mobileSubIcon .menuIconImage { width: 22px; height: 22px; object-fit: contain; }
  .mobileSubLabel { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobileSubLabel small { display: none; }
  @media (max-width: 520px) {
    .mobileMenuSections { grid-template-columns: 1fr; }
    .mobileSubBtn { min-height: 46px; }
  }
.mobileSubBtn.active {
    color: #fff;
    border-color: #60a5fa;
    background: #245080;
    box-shadow: 0 0 0 1px rgba(96,165,250,.18);
  }

}

/* Permanent skin boutique */
.skinShopModal {
  width: min(760px, calc(100vw - 24px));
  max-width: 760px;
  max-height: min(820px, calc(100dvh - 24px));
  overflow: auto;
  padding: 0;
  border: 1px solid #c9a95f;
  background: linear-gradient(155deg, #0c1424 0%, #121a2b 54%, #181225 100%);
  box-shadow: 0 24px 70px rgba(0,0,0,.62), inset 0 0 40px rgba(111,146,255,.06);
}
.skinShopHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(201,169,95,.42);
  background: radial-gradient(circle at 8% 0%, rgba(56,189,248,.19), transparent 44%), radial-gradient(circle at 92% 0%, rgba(192,132,252,.16), transparent 42%);
}
.skinShopHeader small { color:#f1d58d; letter-spacing:.15em; font-size:9px; }
.skinShopHeader h2 { margin:4px 0 5px; color:#fff7dc; }
.skinShopHeader p { margin:0; color:#aebbd1; font-size:11px; }
.skinShopWallet { flex:0 0 auto; min-width:136px; padding:10px 14px; border:1px solid #4a5c78; border-radius:10px; background:rgba(4,10,22,.72); text-align:right; }
.skinShopWallet span { display:block; color:#8fa0b8; font-size:9px; }
.skinShopWallet b { display:block; margin-top:3px; color:#dbeafe; font-size:14px; }
.skinShopGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:18px 20px; }
.skinShopCard { position:relative; overflow:hidden; border:1px solid #405574; border-radius:14px; background:linear-gradient(180deg,rgba(18,31,52,.96),rgba(8,14,27,.98)); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.skinShopCard--moonlight { border-color:#695a97; }
.skinShopCard--pink_twinstar { border-color:#d94f98; box-shadow:inset 0 1px rgba(255,255,255,.05),0 0 18px rgba(236,72,153,.1); }
.skinShopCard.isOwned { border-color:#d3b562; box-shadow:0 0 18px rgba(240,196,87,.12); }
.skinShopBadge { position:absolute; z-index:2; top:10px; left:10px; padding:4px 7px; border-radius:999px; background:rgba(5,12,24,.82); color:#dce9ff; font-size:8px; letter-spacing:.08em; }
.skinShopPreview { position:relative; height:150px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle,rgba(78,155,230,.2),transparent 62%); border-bottom:1px solid rgba(106,128,161,.32); }
.skinShopCard--moonlight .skinShopPreview { background:radial-gradient(circle,rgba(156,99,224,.22),transparent 62%); }
.skinShopCard--pink_twinstar .skinShopPreview { background:radial-gradient(circle,rgba(244,114,182,.28),rgba(99,102,241,.1) 42%,transparent 68%); }
.skinShopCard--pink_twinstar .skinShopBadge { border:1px solid rgba(251,207,232,.8); background:linear-gradient(135deg,#db2777,#7c3aed); color:#fff; box-shadow:0 0 12px rgba(236,72,153,.48); }
.skinShopPreview img { width:100%; height:132px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 12px 9px rgba(0,0,0,.44)); }
.skinShopPreviewImage.isChanging { animation:skinShopPreviewSwap .28s ease-out; }
@keyframes skinShopPreviewSwap { from { opacity:.3; transform:translateY(2px) scale(.97); } to { opacity:1; transform:none; } }
.skinShopPreviewArrow { position:absolute; z-index:3; top:50%; width:30px; height:42px; min-width:0; padding:0; transform:translateY(-50%); border:1px solid rgba(173,203,242,.42); border-radius:9px; background:rgba(5,12,25,.72); color:#e6f2ff; font-size:23px; line-height:1; touch-action:manipulation; }
.skinShopPreviewArrow.prev { left:8px; }
.skinShopPreviewArrow.next { right:8px; }
.skinShopPreviewArrow:hover { border-color:#d7e9ff; background:rgba(31,66,108,.9); }
.skinShopPreviewArrow:active { transform:translateY(calc(-50% + 1px)) scale(.97) !important; }
.skinShopWeaponIndicator { position:absolute; z-index:3; left:50%; bottom:7px; display:flex; align-items:center; gap:7px; padding:4px 8px; transform:translateX(-50%); border:1px solid rgba(142,171,211,.35); border-radius:999px; background:rgba(3,9,20,.78); white-space:nowrap; }
.skinShopWeaponIndicator b { min-width:28px; color:#edf6ff; font-size:9px; text-align:center; }
.skinShopWeaponDots { display:flex; gap:4px; }
.skinShopWeaponDot { width:5px; height:5px; border-radius:50%; background:#52617a; transition:background .2s, box-shadow .2s; }
.skinShopWeaponDot.active { background:#7dd3fc; box-shadow:0 0 6px #38bdf8; }
.skinShopCard--moonlight .skinShopWeaponDot.active { background:#d8b4fe; box-shadow:0 0 6px #a855f7; }
.skinShopCard--pink_twinstar .skinShopWeaponDot.active { background:#f9a8d4; box-shadow:0 0 7px #ec4899; }
.skinShopCardBody { padding:14px; text-align:center; }
.skinShopCardBody h3 { margin:0 0 7px; color:#f8fafc; font-size:16px; }
.skinShopCardBody p { min-height:32px; margin:0; color:#a6b2c4; font-size:10px; line-height:1.55; }
.skinShopPrice { display:flex; align-items:center; justify-content:center; gap:6px; margin:12px 0 9px; color:#dbeafe; }
.skinShopPrice b { font-size:15px; }
.skinShopCardBody button { width:100%; min-height:38px; border-color:#5d81b6; background:linear-gradient(180deg,#255a91,#173b63); color:#fff; font-weight:700; }
.skinShopCard--moonlight .skinShopCardBody button { border-color:#7b64ad; background:linear-gradient(180deg,#5a438a,#38275f); }
.skinShopCard--pink_twinstar .skinShopCardBody button { border-color:#db5ca1; background:linear-gradient(180deg,#be3f86,#70265f); }
.skinShopCardBody button:disabled { border-color:#485263; background:#252d3a; color:#8792a3; }
.skinShopConfirm { margin:0 20px 16px; padding:14px; border:1px solid #c9a95f; border-radius:10px; background:rgba(8,12,23,.9); text-align:center; }
.skinShopConfirm strong { color:#fff0bd; }
.skinShopConfirm p { margin:7px 0 13px; color:#aebbd1; font-size:10px; }
.skinShopFooter { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid rgba(201,169,95,.28); color:#8fa0b8; font-size:9px; }
.skinShopFooter button { min-width:82px; }
@media (max-width:560px) {
  .skinShopModal { width:calc(100vw - 12px); max-height:calc(100dvh - 12px); }
  .skinShopHeader { align-items:flex-start; padding:15px 14px; }
  .skinShopHeader p { display:none; }
  .skinShopWallet { min-width:108px; padding:8px 10px; }
  .skinShopGrid { grid-template-columns:1fr; gap:10px; padding:12px; }
  .skinShopPreview { height:112px; }
  .skinShopPreview img { height:104px; }
  .skinShopPreviewArrow { width:28px; height:38px; }
  .skinShopCardBody { padding:11px; }
  .skinShopCardBody p { min-height:0; }
  .skinShopConfirm { margin:0 12px 12px; }
  .skinShopFooter { padding:10px 12px; }
}

@media (min-width: 0px) {
  /* Dedicated combat view: remove the map/card panel and give the arena the
     entire content area. The 640:400 pixel-art ratio remains unchanged. */
  #app.battleView .panels { display: none; }
  #app.battleView #gameCanvasWrap {
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;
    border-bottom: 0;
    background: #080b10;
  }
  #app.battleView #gameCanvas {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
  }
  #app.battleView #gameCanvas canvas { width: 100% !important; height: 100% !important; }
  #app.battleView .statusBar {
    gap: 6px 11px;
    padding: 6px 10px;
    font-size: 11px;
  }
  #app.battleView .statItem .sub { font-size: 9px; }
}

/* ── 버튼 공통 ── */
button {
  background: linear-gradient(160deg,#2a3341,#1e2530);
  color: #e8ecf1; border: 1px solid #3a4556; border-radius: 8px;
  padding: 8px 12px; font-weight: 600; cursor: pointer; font-size: 13px;
  /* [버그 수정 2026-08-02] "더보기"처럼 연타가 필요한 버튼에서, 클릭 직후 콘텐츠가
     추가되며 같은 화면 좌표에 새 카드가 나타나면 모바일 브라우저가 이를 더블탭으로
     오인해 확대(핀치줌과 동일한 순간 확대 애니메이션)만 되고 클릭은 씹히는 문제가 있었다.
     모든 버튼에 touch-action:manipulation을 적용해 더블탭 확대 제스처 자체를 비활성화한다. */
  touch-action: manipulation;
}
button:hover { filter: brightness(1.15); }
button:active { transform: scale(0.97); }
button:disabled { opacity: .4; cursor: default; }

/* ── 캐릭터 패널 ── */
.charHeader { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.charAvatar { font-size: 40px; }
.charName { font-size: 18px; font-weight: 700; }
.charName .tag { font-size: 11px; background: var(--px-tint-2); border: 1px solid var(--px-line); padding: 2px 6px; border-radius: 6px; margin-left: 6px; }
.charSub { color: #8a94a3; font-size: 12px; }

.equipGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
/* 성석은 5부위라 기본 4열 그리드에 넣으면 4+1로 끊겨 지저분하다. 항상 한 줄에 5칸으로 둔다. */
.equipGrid.skillRelicGrid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 420px) {
  /* 좁은 화면에서도 한 줄을 유지하되 칸 안쪽 여백만 줄인다. */
  .equipGrid.skillRelicGrid { gap: 5px; }
  .equipGrid.skillRelicGrid .equipSlot { padding: 7px 2px; min-height: 58px; }
  .equipGrid.skillRelicGrid .slotName { font-size: 9px; }
}
.equipSlot {
  border: 1px solid #3a4556; border-radius: 10px; padding: 8px 4px;
  text-align: center; cursor: pointer; background: #1c222c;
  min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.equipSlot.empty { opacity: 0.5; cursor: default; }
.slotIcon { font-size: 20px; }
.equippedSlotIconImage{display:block;width:24px;height:24px;margin:0 auto;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))}

/* 결제 없는 일간·주간 무료 보상 상점 */
.cashShopModal{width:min(560px,calc(100vw - 18px));max-height:min(720px,calc(100dvh - 20px));overflow:auto;padding:0;border:1px solid #d6aa42;background:linear-gradient(165deg,#111827,#172033);color:#e5edf8}
.cashShopHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:19px 20px 15px;border-bottom:1px solid rgba(250,204,21,.24);background:radial-gradient(circle at 8% 0,rgba(250,204,21,.18),transparent 42%)}
.cashShopHeader small{color:#facc15;font-size:9px;font-weight:900;letter-spacing:.13em}.cashShopHeader h2{margin:3px 0;color:#fff;font-size:21px}.cashShopHeader p{margin:0;color:#aebed2;font-size:10px}.cashShopHeader>button{padding:6px 9px}
.cashShopTabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px 14px 0}.cashShopTabs button{border-color:#475569;background:#1e293b}.cashShopTabs button.active{border-color:#facc15;background:#713f12;color:#fef3c7;box-shadow:0 0 12px rgba(250,204,21,.18)}
.cashShopRewardList{padding:12px 14px}.cashShopRewardCard{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px;border:1px solid #475569;border-radius:13px;background:#0f172a}.cashShopRewardCard.claimable{border-color:#facc15;box-shadow:0 0 17px rgba(250,204,21,.2)}.cashShopRewardCard.claimed{opacity:.68}.cashShopRewardIcon{display:grid;place-items:center;width:52px;height:52px;border:1px solid #38bdf8;border-radius:12px;background:radial-gradient(circle,#164e63,#082f49);font-size:30px}.cashShopRewardCopy{display:grid;gap:3px}.cashShopRewardCopy strong{color:#dbeafe;font-size:12px}.cashShopRewardCopy b{color:#fde68a;font-size:17px}.cashShopRewardCopy small{color:#94a3b8;font-size:9px}.cashShopRewardCard>button{border-color:#facc15;background:linear-gradient(135deg,#a16207,#713f12);color:#fff}.cashShopNotice{margin:0 14px 15px;padding:10px;border-radius:8px;background:#0b1220;color:#8fa2ba;font-size:9px;line-height:1.55;text-align:center}
@media(max-width:520px){.cashShopRewardCard{grid-template-columns:44px minmax(0,1fr);padding:13px}.cashShopRewardIcon{width:44px;height:44px;font-size:25px}.cashShopRewardCard>button{grid-column:1/-1;width:100%}}
.slotName { font-size: 10px; line-height: 1.3; word-break: keep-all; }
.slotEnhanceBadge { font-size: 10px; font-weight: 800; color: var(--px-accent, #f3d98a); }

/* 슬롯 영구 강화 오라(강화 수치별 시각 효과) — 장비 슬롯/강화 카드 공용 */
.equipSlot.slotAura-dim, .slotEnhanceCard.slotAura-dim { box-shadow: 0 0 6px 1px rgba(221,221,221,.35); }
.equipSlot.slotAura-shine, .slotEnhanceCard.slotAura-shine { box-shadow: 0 0 9px 2px rgba(255,255,255,.45); }
.equipSlot.slotAura-thunder, .slotEnhanceCard.slotAura-thunder { box-shadow: 0 0 11px 2px rgba(96,165,250,.55); }
.equipSlot.slotAura-halo, .slotEnhanceCard.slotAura-halo { box-shadow: 0 0 13px 3px rgba(250,204,21,.6); }
.equipSlot.slotAura-aura, .slotEnhanceCard.slotAura-aura { box-shadow: 0 0 16px 4px rgba(255,77,210,.65); }

/* ── 슬롯 영구 강화 화면 ── */
.balanceBonusBar {
  background: linear-gradient(160deg,#2a3341,#1c222c); border: 1px solid #3a4556; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px; font-size: 12px;
}
.balanceBonusTitle { font-weight: 700; margin-bottom: 4px; }
.balanceBonusCurrent { color: var(--px-accent, #8a4b00); font-weight: 600; }
.balanceBonusNext { color: #8a94a3; font-size: 11px; margin-top: 2px; }
.slotEnhanceGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)) !important;
  gap: 10px !important;
}
.slotEnhanceCard {
  background: #1c222c; border: 1px solid #3a4556; border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 4px; font-size: 12px;
}
.slotEnhanceHead { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.slotEnhanceIcon { font-size: 18px; }
.slotEnhanceMaxTag { color: #facc15; font-size: 10px; }
.slotEnhanceEquipped { color: #8a94a3; margin-bottom: 4px; }
.slotEnhanceEmpty { color: #6b7280; font-style: italic; }
.slotEnhanceBonusLine { color: #cbd5e1; }
.slotEnhanceBonusLine.next { color: #22c55e; }
.slotEnhanceRateLine { color: #8a94a3; }
.slotEnhanceCostLine { margin: 4px 0; font-weight: 600; }
.slotEnhanceButton {
  margin-top: 4px; padding: 8px; border: none; border-radius: 6px; font-weight: 700; cursor: pointer;
  background: linear-gradient(160deg,#facc15,#f59e0b); color: #1c1200;
}
.slotEnhanceButton:disabled { background: #3a4556; color: #6b7280; cursor: not-allowed; }
.slotEnhanceMaxNotice { margin-top: 4px; color: #facc15; font-weight: 700; text-align: center; }

.dpsBox {
  background: linear-gradient(160deg,#2a3341,#1c222c); border: 1px solid #3a4556; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center;
}
.dpsBox span { color: var(--px-accent, #8a4b00); font-size: 17px; font-weight: 800; }

.statSectionLabel { font-size: 11px; color: #8a94a3; margin: 12px 2px 6px; }
.statSectionLabel:first-of-type { margin-top: 4px; }
.statList { background: #1c222c; border-radius: 10px; padding: 10px 14px; }
.statRow { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid #262e3a; }
.statRow:last-child { border-bottom: none; }

/* ── 아이템 카드 ── */
.itemGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important; /* 모든 카드의 세로 높이를 동일하게 일치 */
}

/* 카드 하단 패딩 살짝 증가 */
.itemCard {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  /* 기존 등급별 테두리선(border)과 배경색을 보존하기 위해 border 속성은 완전히 제외합니다 */
  padding: 12px !important;
  padding-bottom: 58px !important; /* 하단 버튼 영역 고정 여백 확보 */
  box-sizing: border-box !important;
  height: 100% !important;
}
.itemCard > div:not(.itemActions) {
  flex-shrink: 0;
}
.itemSlotIcon {
  position: absolute; top: 6px; left: 8px; font-size: 13px; opacity: 0.9;
  background: #10141b; border-radius: 6px; padding: 1px 5px; border: 1px solid #2a3341;
}
.recommendBadge {
  position: absolute; top: 4px; right: 4px; font-size: 10px; font-weight: 800;
  background: linear-gradient(160deg,#facc15,#f59e0b); color: #1c1200;
  padding: 2px 7px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.itemTitleRow { display: flex; align-items: baseline; gap: 4px; }
.favBtn {
  background: none; border: none; padding: 0; font-size: 15px; line-height: 1;
  color: #4a5568; cursor: pointer; flex: 0 0 auto;
}
.favBtn.on { color: var(--px-accent, #8a4b00); }
.itemTitle { font-weight: 700; font-size: 13px; line-height: 1.3; }
.itemSub { color: #8a94a3; font-size: 11px; }
.itemStats { margin: 4px 0; }
.itemStatLine { font-size: 11px; color: #c3cad4; }
.itemStatLine.opt { color: #7ee787; }
/* "기본값 + 강화 보너스" 분리 표기 — 강화로 늘어난 부분만 다른 색으로 구분한다. */
.itemStatEnhanceBonus { color: #fbbf24; font-weight: 700; }
.itemScore { font-size: 11px; color: var(--px-accent, #8a4b00); }
.itemCompare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: var(--px-tint-2);
  border: 1px solid var(--px-line);
}
.itemCompare strong { font-size: 13px; }
.itemCompare.up { color: #1f7a3d; border-color: rgba(31, 122, 61, .5); background: rgba(31, 122, 61, .12); }
.itemCompare.down { color: #a3231c; border-color: rgba(163, 35, 28, .5); background: rgba(163, 35, 28, .12); }
.itemCompare.even { color: var(--px-muted); }
.itemActions { display: flex; gap: 6px; margin-top: 6px; }
.itemActions button { flex: 1; padding: 6px; font-size: 11px; }

/* [버그 수정 2026-08-04] "더 보기" 버튼은 카드 그리드 맨 아래에 있어서, 누르는 순간 새 카드
   10개가 위쪽에 채워지면 버튼이 그만큼(장비 카드가 크면 수천 px) 화면 밖으로 밀려났다.
   그 자리에는 장비 카드가 올라와 다음 클릭이 카드에 들어가고(세트 구성/효과 details가 펼쳐져
   "카드만 커지는" 것처럼 보임), 정작 더보기는 안 눌리는 현상이 됐다.
   스크롤 위치를 계산해 맞추는 방식은 이미지 로드 등으로 레이아웃이 뒤늦게 바뀌면 어긋날 수
   있어, 아예 스크롤 영역 하단에 고정해 버튼이 커서 밑에서 벗어나지 못하게 한다. */
/* 인벤토리 전용. 마법부여 목록의 더보기는 2단 레이아웃의 컬럼 안에 들어 있어 sticky를 걸면
   컬럼 높이에 갇혀 오히려 클릭이 빗나갔다 — 그쪽은 JS 스크롤 보정만 사용한다. */
.invLoadMoreWrap {
  position: sticky;
  bottom: 0;
  z-index: 6;
  padding: 8px 0 4px;
  background: transparent;
}
.invLoadMoreBtn { box-shadow:none !important; }
/* sticky는 "가장 가까운 스크롤 조상" 기준으로 붙는다. 이 패널은 가로 넘침을 막으려고
   overflow-x:hidden을 쓰는데, hidden은 세로축까지 스크롤 컨테이너로 만들어버려서(overflow-y가
   auto로 계산됨) 위 sticky가 패널 자기 자신에게 붙어 아무 효과가 없었다. clip은 넘침만 잘라내고
   스크롤 컨테이너를 만들지 않으므로, 실제로 스크롤되는 #panels 기준으로 정상 고정된다. */
#inventoryPanel {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
/* 마법부여의 더보기 버튼은 통화바(.panelCurrencyBar, z-index:32)와 겹치는 위치로 스크롤되면
   통화바가 클릭을 가로채 버튼이 눌리지 않았다. 통화바보다 위로 올려 항상 눌리게 한다. */
.enchantLoadMoreWrap {
  position: relative;
  z-index: 33;
}

.outcomeTag {
  font-size: 11px; font-weight: 700; padding: 4px 6px; border-radius: 6px; margin-top: 4px;
}
.outcomeTag.equipped { background: rgba(74,222,128,0.15); color: #4ade80; }

.dismantledCard { padding-top: 26px; opacity: 0.85; }
.dismantledLine { font-size: 11px; color: #9aa5b3; margin-top: 4px; }

.emptyMsg { color: #8a94a3; text-align: center; padding: 30px 10px; font-size: 13px; line-height: 1.6; }

/* ── 인벤토리 자동 관리 설정 ── */
.invSettings {
  background: #1c222c; border: 1px solid #2a3341; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px;
}
.toggleBtn {
  background: #262e3a; border: 1px solid #3a4556; color: #9aa5b3; font-size: 12px; padding: 6px 10px;
}
.toggleBtn.on { background: linear-gradient(160deg,#22c55e,#16a34a); border-color: #22c55e; color: #fff; }
.toggleBtn.small { font-size: 11px; padding: 4px 8px; }
.dismantleToggles { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dismantleLabel { font-size: 11px; color: #8a94a3; margin-right: 2px; }

/* ── 실시간 자동장착 활성 표시(테두리를 따라 도는 빛 점) ──
   conic-gradient로 링을 그리는 방식은 버튼처럼 가로로 넓고 얇은 사각형에서 네 모서리마다
   대각선 빛줄기가 튀어나오는 왜곡이 생겨 포기했다. 대신 작은 발광 점 하나를 CSS Motion
   Path(offset-path: border-box)로 버튼의 테두리 선을 따라 그대로 한 바퀴 돌게 하면,
   사각형 비율과 무관하게 항상 테두리 위를 정확히 지나가는 빛으로 보인다. */
.autoEquipToggle, .weaponTypeChip { position: relative; }
.autoEquipToggle.on::before, .weaponTypeChip.on::before {
  content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 0 6px 2px #4ade80, 0 0 2px 1px #bbf7d0;
  offset-path: border-box; offset-distance: 0%; offset-rotate: 0deg;
  pointer-events: none; z-index: 3;
  animation: autoEquipOrbit 1.8s linear infinite;
}
@keyframes autoEquipOrbit { to { offset-distance: 100%; } }

/* ── 실시간 자동장착 무기 계열 필터 칩 ── */
.weaponTypeChipRow { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 4px; }
.weaponTypeChip { flex: 1; min-width: 58px; padding: 6px 4px; font-size: 11px; background: var(--px-tint-2); border: 1px solid var(--px-line); color: var(--px-muted); border-radius: 8px; }
.weaponTypeChip.on { background: #e3f0e3; border-color: #2f7d32; color: #1f7a3d; }

/* ── 장비 상세 모달의 "다른 장비로 교체" 목록 ──
   후보가 많으면 목록이 계속 늘어나 모달 전체가 화면보다 커져 잘리는 문제가 있었다(.modalBox의
   max-height/overflow로도 한 번 더 막아뒀지만, 여기서도 처음부터 3개 정도만 보이고 나머지는
   스크롤하도록 높이를 고정한다 — "매칭 강화 비교" 줄이 추가되면서 한 줄당 높이가 늘어 3개 기준으로
   맞췄다). */
.swapCandidateList { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; max-height: 190px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.swapCandidateRow {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px;
  background: var(--px-tint-2); border: 1px solid var(--px-line); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 12px;
}
.swapCandidateRow:hover { border-color: var(--px-gold); }
.swapCandidateName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swapCandidateDelta { flex: 0 0 auto; font-weight: 700; font-size: 11px; }
.swapCandidateDelta.up { color: #1f7a3d; }
.swapCandidateDelta.down { color: #a3231c; }
.swapCandidateDelta.even { color: var(--px-muted); }
/* "내 강화 수치와 맞췄다면" 비교 — 장비교체 목록의 이름/전투력차 줄 아래에 보조로 붙는 줄. */
.swapCandidateMatched { flex: 1 0 100%; font-size: 10px; color: var(--px-muted); display: flex; align-items: center; gap: 5px; }
.swapCandidateMatched span.up { color: #1f7a3d; font-weight: 700; }
.swapCandidateMatched span.down { color: #a3231c; font-weight: 700; }
.swapCandidateMatched span.even { color: var(--px-muted); font-weight: 700; }

/* ── 수동 자동장착 미리보기 모달 ── */
.manualAutoEquipBox { max-width: 480px; text-align: left; }
.manualAutoEquipList { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; margin: 10px 0; }
.manualAutoEquipRow { background: var(--px-tint-2); border: 1px solid var(--px-line); border-radius: 8px; padding: 8px 10px; }
.manualAutoEquipHead { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; }
.manualAutoEquipDelta.up { color: #1f7a3d; }
.manualAutoEquipDelta.down { color: #a3231c; }
.manualAutoEquipDelta.even { color: var(--px-muted); }
.manualAutoEquipChange { font-size: 12px; color: var(--nav-text); margin-top: 4px; }
.manualAutoEquipAltToggle { margin-top: 6px; font-size: 11px; padding: 5px 8px; background: var(--px-tint); border: 1px solid var(--px-line); color: var(--nav-text); border-radius: 6px; }
.manualAutoEquipAlts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; max-height: 160px; overflow-y: auto; }
.manualAutoEquipAltBtn { font-size: 10px; padding: 4px 7px; background: var(--px-tint); border: 1px solid var(--px-line); color: var(--px-muted); border-radius: 6px; }
.manualAutoEquipAltBtn.sel { background: var(--nav-bg-active); border-color: var(--px-gold); color: var(--px-text); }
.manualAutoEquipYes { background: linear-gradient(160deg,#22c55e,#16a34a) !important; border-color: #22c55e !important; }

.autoLogList { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; margin-top: 4px; }
.autoLogLine { font-size: 11px; color: var(--nav-text); background: var(--px-tint); padding: 5px 8px; border-radius: 6px; }
.autoLogLine.equipped { color: #1f7a3d; }
.autoLogLine.dismantled { color: var(--px-muted); }
.autoLogEmpty { font-size: 11px; color: var(--px-muted); padding: 8px 0; text-align: center; }

/* ── 장비 프리셋 (장비 탭) ── */
.presetList { display: flex; flex-direction: column; gap: 8px; }
.presetCard {
  background: #1c222c; border: 1px solid #3a4556; border-radius: 10px;
  padding: 10px 12px; cursor: pointer;
}
.presetCard:hover { border-color: #38bdf8; }
.presetCard.empty { cursor: default; opacity: 0.75; display: flex; justify-content: space-between; align-items: center; }
.presetName { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.presetEmptyTag { color: #8a94a3; font-weight: 400; font-size: 11px; }
.presetMiniBtn { background: none; border: none; padding: 0 2px; font-size: 12px; }
.presetSaveBtn { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }
.presetSummary {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px;
  font-size: 11px; color: #9aa5b3;
}
.presetSummary b { color: var(--px-accent, #8a4b00); }

/* ── 탐험 모드 토글 ── */
.exploreModeRow { display: flex; gap: 8px; margin: 10px 0 4px; }
.exploreModeRow .toggleBtn { flex: 1; padding: 10px 4px; font-size: 12px; }

/* ── 인벤토리 검색/정렬 ── */
.invToolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.inventoryLiveCount { display:inline-flex; align-items:center; flex:0 0 auto; padding:0 8px; border:1px solid #8a6a3d; border-radius:6px; background:#f4ead7; color:#3a2712; font-size:10px; font-weight:900; white-space:nowrap; }
.searchInput {
  flex: 1; background: #1c222c; border: 1px solid #3a4556; border-radius: 8px;
  color: #e8ecf1; padding: 8px 10px; font-size: 12px; min-width: 0;
}
.searchInput:focus { outline: none; border-color: #38bdf8; }
.sortSelect {
  background: #1c222c; border: 1px solid #3a4556; color: #e8ecf1; border-radius: 8px;
  padding: 8px 6px; font-size: 12px; margin-bottom: 10px;
}
.invToolbar .sortSelect { margin-bottom: 0; flex: 0 0 auto; }

/* ── 소모품 탭 ── */
.consumableList { display: flex; flex-direction: column; gap: 8px; }
.consumableRow {
  display: flex; align-items: center; gap: 10px; background: #1c222c; border: 1px solid #2a3341;
  border-radius: 10px; padding: 10px 12px;
}
.consumableIcon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 24px; flex: 0 0 48px; }
.consumableInfo { flex: 1; min-width: 0; }
.consumableName { font-weight: 700; font-size: 13px; }
.consumableCount { color: var(--px-accent, #8a4b00); font-weight: 700; }
.consumableDesc { color: #8a94a3; font-size: 11px; margin-top: 2px; }
.consumableActions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.consumableActions button { min-width: 66px; }

/* 소모품·재료 지갑: 보유 아이템만 아이콘으로 압축하고, 설명/기능은 클릭 상세창에 둔다. */
.ownedItemIconGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(68px,1fr)); gap:8px; align-items:start; }
.ownedItemIconButton { position:relative; display:grid; place-items:center; min-width:0; aspect-ratio:1; padding:8px; border:1px solid #3a4556; border-radius:10px; background:linear-gradient(145deg,#1c222c,#111827); color:#e8ecf1; cursor:pointer; overflow:hidden; }
.ownedItemIconButton:hover, .ownedItemIconButton:focus-visible { border-color:#38bdf8; box-shadow:0 0 0 2px rgba(56,189,248,.15); outline:none; }
.ownedItemIconVisual { display:grid; place-items:center; width:48px; height:48px; font-size:30px; line-height:1; }
.ownedItemIconVisual .consumablePixelIcon { width:46px; height:46px; object-fit:contain; image-rendering:pixelated; }
.ownedItemCount { position:absolute; right:4px; bottom:4px; max-width:calc(100% - 8px); padding:2px 5px; border:1px solid rgba(148,163,184,.45); border-radius:999px; background:rgba(2,6,23,.92); color:#fef08a; font-size:10px; font-weight:900; line-height:1.1; overflow:hidden; text-overflow:ellipsis; }
.storedItemDetailModal { position:relative; width:min(430px,calc(100vw - 24px)); max-height:min(720px,calc(100dvh - 24px)); overflow-y:auto; }
.storedItemDetailModal .modalCloseBtn { position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; padding:0; border:1px solid #475569; border-radius:7px; background:#111827; color:#cbd5e1; font-size:20px; }
.storedItemDetailHead { display:flex; align-items:center; gap:12px; padding-right:36px; }
.storedItemDetailIcon { display:grid; place-items:center; flex:0 0 68px; width:68px; height:68px; border:1px solid #475569; border-radius:11px; background:#0f172a; font-size:40px; overflow:hidden; }
.storedItemDetailIcon .consumablePixelIcon { width:62px; height:62px; object-fit:contain; image-rendering:pixelated; }
.storedItemDetailHead h2 { margin:0 0 4px; font-size:17px; color:var(--px-text,#f8fafc); }
.storedItemDetailHead strong { color:var(--px-accent,#fef08a); font-size:12px; }
.storedItemDetailBody { margin-top:12px; padding:12px; border:1px solid #334155; border-radius:9px; background:#111827; color:#cbd5e1; font-size:11px; line-height:1.55; }
.storedItemDetailBody p { margin:0; }
.storedItemDetailBody dl { margin:0; display:grid; gap:7px; }
.storedItemDetailBody dl div { display:grid; grid-template-columns:52px minmax(0,1fr); gap:7px; }
.storedItemDetailBody dt { color:#67e8f9; font-weight:900; }.storedItemDetailBody dd { margin:0; }
.storedItemDetailActions { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.storedItemDetailActions button { flex:1 1 120px; min-height:36px; }
.inventoryDetailConversion { margin-top:12px; }
@media(max-width:480px) { .ownedItemIconGrid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }.ownedItemIconButton { padding:6px; }.ownedItemIconVisual { width:42px; height:42px; }.ownedItemIconVisual .consumablePixelIcon { width:40px; height:40px; } }

/* ── 탐험 패널 ── */
/* [개편] 가로 스크롤 캐러셀 → 줄바꿈 그리드. 지역 선택/인벤토리 필터가 모두 이 클래스를 쓰며,
   모바일에서도 스크롤 없이 전부 한눈에 보인다(버튼이 3~4열로 자동 배치). */
.mapTabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; padding-bottom: 4px; }
.mapTabs .mapTab { flex: 0 1 auto; }
.mapTab {
  flex: 0 0 auto; background: #1c222c; border: 1px solid #3a4556; color: #c3cad4;
  padding: 8px 12px; border-radius: 8px; font-size: 12px;
}
.mapTab.active { border-color: #38bdf8; color: #38bdf8; }
.mapTab.locked { opacity: 0.4; }

/* ── 인벤토리 필터 2단 구조 (2026-08-05) ──
   1단(대분류: 장비/성석/재료/소모품)은 크게, 2단(장비 부위)은 작게 두어 위계를 만든다.
   예전에는 12개 칩이 같은 크기로 두 줄에 흩어져 어디가 대분류인지 알 수 없었다. */
.invGroupTabs { margin-bottom: 6px; }
.invGroupTabs .mapTab { font-weight: 800; }
.invSlotTabs {
  gap: 4px; margin: 0 0 10px; padding: 6px 8px;
  background: rgba(15, 23, 42, .38); border: 1px solid rgba(148, 163, 184, .18); border-radius: 9px;
}
.mapTab.slim {
  padding: 5px 9px; font-size: 11px; border-radius: 7px;
  background: #161b24; border-color: #2f3947; color: #9aa5b3;
}
.mapTab.slim.active { border-color: #38bdf8; color: #38bdf8; background: rgba(56, 189, 248, .1); }

/* 모바일: 부위 칩이 줄바꿈으로 3~4줄이 되지 않도록 가로 스크롤 한 줄로 만든다. */
@media (max-width: 560px) {
  .invGroupTabs { gap: 5px; }
  .invGroupTabs .mapTab { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 11.5px; text-align: center; }
  .invSlotTabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 6px; margin-bottom: 8px;
  }
  .invSlotTabs::-webkit-scrollbar { display: none; }
  .mapTab.slim { padding: 6px 10px; font-size: 11px; white-space: nowrap; }
}

/* 난이도(차원) 탭 — 승급으로 새 차원에 처음 도달한 뒤부터만 표시되며, 예전 차원을 다시
   골라 방문할 수 있게 한다(main.js의 onSelectDifficultyTier). */
.diffTierTabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.diffTierTab {
  flex: 0 0 auto; background: #1c222c; border: 1px solid #3a4556; color: #c3cad4;
  padding: 3px 8px; border-radius: 6px; font-size: 10px;
}
.diffTierTab.active { border-color: #38bdf8; color: #38bdf8; }

.stageInfo { background: #1c222c; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.stageTitle { font-weight: 700; }
/* 지역명 헤더: "[난이도]" 태그와 "지역명 · 속성" 줄을 하나의 제목처럼 촘촘하게 붙인다. */
.stageHeader { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.stageDiffTag { font-size: 11px; font-weight: 700; opacity: .85; }
.stageMapLine { font-size: 16px; font-weight: 700; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.stageMapDot { opacity: .6; font-weight: 400; }
.stageElementTag { font-size: 12px; font-weight: 700; }
.bossName { color: #f87171; font-size: 13px; margin-top: 4px; }
.stageSub { color: #8a94a3; font-size: 11px; margin-top: 6px; }
.itemLevelInfo b { color: #fbbf24; }
.itemLevelMult { color: #6b7686; }

.cpCompare { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; flex-wrap: wrap; }
.cpCompare b { font-size: 14px; }
.cpRec { color: #9aa5b3; }
.cpCur.cpOk { color: #4ade80; }
.cpCur.cpLow { color: #f87171; }
.cpWarn { color: #f87171; font-size: 11px; margin-top: 6px; }

/* ── 정착 상태 배너 ── */
.campStatusBanner {
  color: #4ade80; font-size: 12px; font-weight: 700; margin-top: 8px;
  background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.35);
  border-radius: 8px; padding: 6px 10px;
}

/* ── 활동 카드(Nomad Idle식 정착 탐험) ── */
.activityCardList { display: flex; flex-direction: column; gap: 10px; }
.activityCard {
  background: #1c222c; border: 1px solid #2a3341; border-radius: 12px;
  padding: 12px 14px;
}
.activityCard.active { border-color: #4ade80; box-shadow: 0 0 0 1px rgba(74,222,128,0.35) inset; }
.activityCard.locked { opacity: 0.75; }
.activityCard.bossCard { border-color: #4a2a2a; }
.activityCard.bossCard.active { border-color: #f97316; box-shadow: 0 0 0 1px rgba(249,115,22,0.35) inset; }
.activityHead { display: flex; align-items: center; gap: 8px; }
.activityIcon { font-size: 18px; }
.activityTitle { font-weight: 700; font-size: 13px; }
.activityDesc { color: #8a94a3; font-size: 11px; margin-top: 6px; line-height: 1.5; }
.activityRewardRow {
  display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px;
  font-size: 11px; color: #c3cad4;
}
.activityBtn {
  width: 100%; margin-top: 10px; padding: 10px; font-size: 13px; font-weight: 700;
  background: linear-gradient(160deg,#38bdf8,#0284c7); border: none; border-radius: 8px; color: #fff;
}
.activityBtn.stop { background: linear-gradient(160deg,#f87171,#dc2626); }
.activityBtn.boss { background: linear-gradient(160deg,#f97316,#c2410c); }
.activityBtn.boss.stop { background: linear-gradient(160deg,#f87171,#dc2626); }
.activityBtn:disabled { background: #2a3341; color: #6b7480; cursor: not-allowed; }

.bossUnlockBar {
  margin-top: 8px; height: 6px; border-radius: 4px; background: #10141b; overflow: hidden;
}
.bossUnlockFill { height: 100%; background: linear-gradient(90deg,#facc15,#f97316); }
.bossPatternTitle { margin-top:9px; color:#fda4af; font-size:10px; font-weight:700; }
.bossPatternList { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.bossPatternChip { padding:4px 7px; border-radius:12px; background:#24202a; border:1px solid #4b384c; color:#d7c8d8; font-size:9px; }
.bossPatternChip.role-attack { border-color:#7f1d1d; color:#fca5a5; }
.bossPatternChip.role-status { border-color:#3f6212; color:#bef264; }
.bossPatternChip.role-summon { border-color:#5b21b6; color:#d8b4fe; }
.bossPatternChip.role-defense { border-color:#155e75; color:#67e8f9; }
.bossPatternChip.role-special { border-color:#86198f; color:#f0abfc; }
.bossPatternChip.role-buff { border-color:#9a3412; color:#fdba74; }

/* ── 무기 액티브 스킬 트리 ── */
.itemWeaponSkillInfo { margin:8px 2px; padding:8px 9px; border:1px solid rgba(139,92,246,.45); border-radius:8px; background:rgba(91,33,182,.10); color:#cbd5e1; font-size:10px; line-height:1.55; }
.itemWeaponPassive { margin-top:3px; color:#93c5fd; }
/* 솔로 레이드 전용 드랍(타이탄의 반지/무기) 고정 보너스 — 일반 옵션과 확실히 구분되도록 금색 톤. */
/* itemCard 배경이 베이지 테마에서 --px-panel로 강제 교체되므로(pixel-ui.css !important 규칙),
   고정 노란색(#facc15) 대신 테마별로 대비를 맞춘 --px-accent를 쓴다 — 안 그러면 베이지 모드에서
   거의 안 보이는 텍스트가 된다(이전에 겪은 것과 같은 문제). */
.itemRaidBonus { margin:6px 2px; padding:7px 9px; border:1px solid rgba(217,169,55,.55); background:rgba(120,90,10,.16); color:var(--px-accent); font-size:10px; font-weight:700; line-height:1.5; border-radius: 6px !important; }

.battleLog {
  background: #10141b; border-radius: 10px; padding: 10px;
  height: 220px; overflow-y: auto; font-size: 12px; color: #9aa5b3;
  display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px;
}
.logLine.result { color: var(--px-accent, #8a4b00); font-weight: 700; }

.exploreControls { display: flex; justify-content: center; }
.exploreControls button { width: 100%; padding: 12px; font-size: 14px; }

/* ── 가챠 패널 ── */
.gachaInfo { background: #1c222c; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.gachaOdds { color: #8a94a3; line-height: 1.6; }
.gachaPity { color: #7ee787; }
.gachaButtons { display: flex; gap: 8px; margin-bottom: 14px; }
.gachaButtons button { flex: 1; padding: 12px; }

/* ── 강화 패널 ── */
.panelCurrencyBar {
  position: sticky; top: -14px; z-index: 32; display: flex; justify-content: flex-end; gap: 8px;
  margin: -2px -4px 10px; padding: 7px 9px; border: 1px solid #475569; border-radius: 8px;
  background: rgba(13,18,27,.97); box-shadow: 0 5px 14px rgba(0,0,0,.28); backdrop-filter: blur(8px);
}
.panelCurrencyItem {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 138px;
  padding: 5px 8px; border: 1px solid #334155; border-radius: 6px; background: #1b2431; font-size: 10px;
}
.panelCurrencyItem span { color: #aeb8c7; }
.panelCurrencyItem b { font-size: 13px; white-space: nowrap; }
.panelCurrencyItem.gold b { color: #fbbf24; }
.panelCurrencyItem.stone b { color: #c4b5fd; }
.enhanceLayout { display: flex; gap: 12px; }
.enhanceList { flex: 0 0 40%; max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.enhanceListItem { background: #1c222c; border: 1px solid #2a3341; border-radius: 8px; padding: 8px; font-size: 11px; cursor: pointer; }
.enhanceListItem.sel { border-color: #38bdf8; }
.enhanceEquippedTag { display: inline-block; background: #1e3a8a; color: #93c5fd; border: 1px solid #3b82f6; border-radius: 4px; padding: 1px 5px; font-size: 9px; font-weight: 700; margin-right: 2px; }
.enhanceDetail { flex: 1; }
.enhanceCostBox { background: #1c222c; border-radius: 10px; padding: 10px 14px; margin-top: 8px; font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.enhanceCostBox button { margin-top: 6px; }
.enhanceQuickBar { position: sticky; top: 48px; z-index: 25; margin: 8px -4px 12px; padding: 10px; border: 1px solid #6366f1; border-radius: 11px; background: rgba(20,25,42,.97); box-shadow: 0 8px 20px rgba(0,0,0,.26); backdrop-filter: blur(9px); }
.enhanceQuickInfo { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#e2e8f0; font-size:12px; }
.enhanceQuickItem { max-width:45%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:800; }
.enhanceQuickInfo > div:last-child { text-align:right; }
.enhanceQuickInfo span { display:block; margin-top:3px; color:var(--px-accent, #8a4b00); font-size:11px; }
.enhanceQuickCost { margin-top:8px; color:#cbd5e1; font-size:12px; font-weight:700; }
.enhanceQuickCost span { color:#64748b; padding:0 4px; }
.enhanceQuickButton { width:100%; margin-top:9px; min-height:46px; padding:10px; border:0; border-radius:8px; background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; font-size:15px; font-weight:900; box-shadow:0 5px 14px rgba(79,70,229,.36); }
.enhanceMaxNotice { color:#cbd5e1; text-align:center; }

/* ── 마법부여(강화 패널 하단, 옵션 수치 재굴림) ── */
.enchantNotice { font-size: 10px; color: #8a94a3; line-height: 1.5; margin: 2px 0 8px; }
.enchantCost { margin: 4px 0 8px; color: #cbd5e1; font-size: 12px; font-weight: 700; }
.enchantCost span { color: #64748b; padding: 0 4px; }
.enchantCostNote { font-weight: 400 !important; }
.enchantOptionList { display: flex; flex-direction: column; gap: 6px; }
.enchantOptionRow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #1c222c; border-radius: 8px; padding: 8px 10px;
}
.enchantOptionRow.blocked { opacity: .55; }
.enchantOptionInfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.enchantOptionLabel { font-size: 12px; color: #e2e8f0; }
.enchantOptionLabel b { color: #fbbf24; }
.enchantOptionRange { font-size: 10px; color: #8a94a3; }
/* 접두사·접미사 행에 현재 붙어 있는 효과를 함께 보여준다(재배치 전에 무엇을 잃는지 확인용). */
.enchantAffixEffect {
  display: block; margin: 2px 0 3px; font-size: 10px; line-height: 1.5;
  color: #7ee787; overflow-wrap: anywhere;
}
.enchantLockedTag { font-size: 9px; font-weight: 700; color: #a855f7; }
.enchantRerollBtn {
  flex-shrink: 0; padding: 6px 10px; font-size: 11px; font-weight: 800;
  background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; border: 1px solid #a855f7;
  border-radius: 6px; cursor: pointer;
}
.enchantRerollBtn:disabled {
  background: #374151; border-color: #4b5563; color: #9ca3af; cursor: default;
}

/* 로그인 직후 및 옵션 메뉴에서 여는 패치노트 */
.optionsPatchNoteSection { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.optionsPatchNoteSection small { color:#8a94a3; font-size:9px; }
.optionsPatchNoteBtn {
  flex:0 0 auto; padding:6px 10px; border:1px solid #64748b; border-radius:6px;
  background:#1e293b; color:#e2e8f0; font-size:10px; font-weight:700; cursor:pointer;
}
.patchNoteModalBox { width:min(92%, 430px); max-height:84vh; padding:0; overflow:hidden; text-align:left; }
.patchNoteHeader { padding:18px 20px 14px; background:linear-gradient(135deg,#312e81,#6d28d9); color:#fff; }
.patchNoteHeader > span { color:#c4b5fd; font-size:9px; font-weight:900; letter-spacing:1.6px; }
.patchNoteHeader h2 { margin:4px 0 3px; font-size:18px; }
.patchNoteHeader small { color:#ddd6fe; font-size:10px; }
.patchNoteBody { max-height:52vh; overflow-y:auto; padding:14px 18px; background:#111827; }
.patchNoteSection { padding:10px 11px; margin-bottom:8px; border:1px solid #374151; border-radius:8px; background:#1f2937; }
.patchNoteSection:last-child { margin-bottom:0; }
.patchNoteSection h3 { margin:0 0 7px; color:#c4b5fd; font-size:12px; }
.patchNoteSection ul { margin:0; padding-left:17px; color:#d1d5db; font-size:11px; line-height:1.65; }
.patchNoteActions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 18px 16px; background:#111827; }
.patchNoteActions button { min-height:38px; border-radius:7px; font-size:11px; font-weight:800; cursor:pointer; }
.nightmareCatchupExp { margin-top:8px; padding:8px 10px; border-radius:7px; font-weight:800; }
.nightmareCatchupExp.active { border:1px solid rgba(250,204,21,.55); background:rgba(113,63,18,.32); color:#fde68a; }
.nightmareCatchupExp.complete { border:1px solid rgba(74,222,128,.4); background:rgba(20,83,45,.24); color:#bbf7d0; }
.patchNoteTodayBtn { border:1px solid #4b5563; background:#1f2937; color:#cbd5e1; }
.patchNoteConfirmBtn { border:1px solid #8b5cf6; background:#7c3aed; color:#fff; }

@media (max-width:480px) {
  .patchNoteModalBox { width:94%; max-height:88vh; }
  .patchNoteBody { max-height:56vh; padding:11px 12px; }
  .patchNoteActions { grid-template-columns:1fr; padding:10px 12px 13px; }
  .patchNoteConfirmBtn { order:-1; }
}

/* 마법부여 전용 화면: 목록과 상세의 중첩 스크롤 없이 한 화면에 배치한다. */
#enchantPanel { overflow: visible; }
/* 슬롯 강화 화면도 상단 골드 바가 스크롤 중에도 계속 보이도록 overflow를 되돌린다.
   .tabPanel이 overflow-x:hidden만 갖고 있으면 overflow-y가 암묵적으로 auto가 되어
   #panels가 아니라 이 패널 자신이 스크롤 컨테이너로 취급되면서 position:sticky가 깨진다. */
#enhancePanel { overflow: visible; }
.enchantScreen { min-width: 0; }
.enchantScreenTitle { margin: 0 2px 3px; }
.enchantScreenNotice { margin: 0 2px 6px; line-height: 1.35; }
.enchantModeTabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  margin: 6px 0 8px; padding: 4px; border: 1px solid #334155; border-radius: 9px; background: #111827;
}
.enchantModeTab {
  min-height: 36px; padding: 7px 9px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: #94a3b8; font-size: 11px; font-weight: 800; cursor: pointer;
}
.enchantModeTab.active {
  border-color: #8b5cf6; background: linear-gradient(135deg, #4c1d95, #6d28d9); color: #fff;
  box-shadow: 0 3px 10px rgba(124,58,237,.25);
}
.enchantSlotFilters { margin: 0 0 8px; }
.enchantGearColumn { min-width: 0; }
.enchantListMeta { margin: 0 1px 5px; color: #8a94a3; font-size: 10px; }
.enchantLoadMoreWrap { display: flex; justify-content: center; margin-top: 8px; }
.enchantLoadMoreBtn {
  width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid #475569;
  background: #1e293b; color: #e2e8f0; font-size: 11px; font-weight: 700; cursor: pointer;
}
.enchantLayout {
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(0, 1.55fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}
.enchantGearList {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 3px;
  min-width: 0;
  overflow: visible;
}
#enchantPanel .enchantGearItem {
  min-width: 0;
  max-width: none;
  padding: 5px 7px;
  font-size: 10px;
  line-height: 1.3;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.enchantListPreservation {
  display: block; margin-top: 2px; color: #67e8f9; font-size: 9px; font-weight: 800;
}
.itemPreservationBadge {
  display: inline-block; margin-left: 2px; padding: 1px 4px; border: 1px solid #0891b2; border-radius: 4px;
  background: rgba(8,145,178,.16); color: #67e8f9; font-size: 9px;
}
.preservationLevelTrack {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 7px 0;
}
.preservationLevelTrack > div {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 8px; border: 1px solid #334155; border-radius: 7px; background: #172033;
}
.preservationLevelTrack span { color: #94a3b8; font-size: 10px; }
.preservationLevelTrack b { color: #e0f2fe; font-size: 11px; }
.preservationChanceBox {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 7px 0; padding: 8px;
  border: 1px solid #155e75; border-radius: 8px; background: rgba(8,47,73,.55); color: #a5f3fc; font-size: 10px;
}
.preservationChanceBox span { padding-right: 6px; border-right: 1px solid #155e75; }
.preservationChanceBox strong { margin-left: auto; color: #fef08a; font-size: 12px; }
.preservationCostBox {
  display: flex; flex-direction: column; gap: 5px; margin: 7px 0; padding: 9px;
  border: 1px solid #374151; border-radius: 8px; background: #1c222c;
}
.preservationCostRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #cbd5e1; font-size: 10px; }
.preservationCostRow b { color: #fbbf24; font-size: 11px; }
.preservationCostRow.muted { color: #64748b; }
.preservationCostRow.muted b { color: #94a3b8; }
.preservationCostRow.total { padding-top: 6px; border-top: 1px solid #374151; font-weight: 800; }
.preservationCostBox small { color: #94a3b8; font-size: 9px; line-height: 1.45; }
.preservationBlocked {
  margin: 7px 0; padding: 8px; border: 1px solid #92400e; border-radius: 7px;
  background: rgba(120,53,15,.2); color: #fcd34d; font-size: 10px; line-height: 1.45;
}
#enchantPanel .preservationAttemptBtn { width: 100%; min-height: 39px; margin-top: 2px; background: linear-gradient(135deg,#0369a1,#0891b2); border-color:#06b6d4; }
.setInheritanceList, .setEssenceList { display:flex; flex-direction:column; gap:5px; margin:7px 0; }
.setInheritanceRow, .setEssenceRow {
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:7px;
  padding:7px; border:1px solid #334155; border-radius:7px; background:#172033; font-size:10px;
}
.setInheritanceRow > div:first-child { min-width:0; display:flex; flex-direction:column; gap:2px; }
.setInheritanceRow > div:first-child b, .setEssenceRow span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.setInheritanceRow small, .setInheritancePrice small { color:#94a3b8; }
.setInheritancePrice { display:flex; flex-direction:column; align-items:flex-end; gap:2px; color:#a5f3fc; }
.setInheritanceRow button, .setEssenceRow button { min-height:29px; padding:4px 8px; border:1px solid #0891b2; border-radius:6px; background:#075985; color:#ecfeff; font-weight:800; cursor:pointer; }
.setInheritanceRow button:disabled { opacity:.45; cursor:not-allowed; }
.setEssenceDetails { margin-top:8px; padding:7px; border:1px solid #4c1d95; border-radius:8px; background:rgba(46,16,101,.18); }
.setEssenceDetails summary { color:#ddd6fe; font-size:10px; font-weight:800; cursor:pointer; }
.setEssenceRow { grid-template-columns:minmax(0,1fr) auto; }
.manaCoreWallet { margin:8px 0; padding:7px; border:1px solid #155e75; border-radius:8px; background:rgba(8,47,73,.3); }
.manaCoreWallet summary { color:#a5f3fc; font-size:11px; font-weight:900; cursor:pointer; }
.manaCoreGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:7px; }
.manaCoreCard { min-width:0; padding:6px; border:1px solid #334155; border-radius:7px; background:#111827; }
.manaCoreCard > div:first-child { display:flex; justify-content:space-between; gap:4px; font-size:10px; }
.manaCoreCard b { color:#e0f2fe; white-space:nowrap; }
.manaCoreCard small, .manaCoreHelp { display:block; margin-top:3px; color:#94a3b8; font-size:8px; line-height:1.35; }
.manaCoreGauge { height:4px; margin-top:5px; overflow:hidden; border-radius:999px; background:#334155; }
.manaCoreGauge i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#06b6d4,#a78bfa); }
@media (max-width:560px) {
  .setInheritanceRow { grid-template-columns:minmax(0,1fr) auto; }
  .setInheritancePrice { grid-column:1 / -1; grid-row:2; align-items:flex-start; }
  .setInheritanceRow > button { grid-column:2; grid-row:1; min-width:52px; }
  .manaCoreGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .manaCoreCard { padding:6px 5px; }
}
@media (max-width:360px) { .manaCoreGrid { grid-template-columns:1fr; } }
.materialHeaderWrap { margin-bottom:10px; }
.materialWalletHeader { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:9px; padding:10px; border:1px solid #155e75; border-radius:9px; background:rgba(8,47,73,.35); }
.materialWalletHeader > div { display:flex; flex-direction:column; gap:2px; }
.materialWalletHeader b { color:#cffafe; font-size:13px; }
.materialWalletHeader small { color:#94a3b8; font-size:9px; }
.materialWalletHeader > span { color:#fef08a; font-weight:900; white-space:nowrap; }
.materialWalletGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.materialWalletCard { display:grid; grid-template-columns:38px minmax(0,1fr); gap:7px; padding:9px; border:1px solid #334155; border-radius:9px; background:#172033; min-width:0; }
.materialWalletIcon { grid-row:1; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:8px; background:#0f172a; font-size:23px; }
.materialWalletInfo { display:flex; flex-direction:column; min-width:0; }
.materialWalletInfo b { color:#e2e8f0; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.materialWalletInfo strong { color:#67e8f9; font-size:14px; }
.materialWalletCard dl { grid-column:1/-1; margin:0; display:flex; flex-direction:column; gap:3px; }
.materialWalletCard dl div { display:grid; grid-template-columns:38px minmax(0,1fr); gap:5px; font-size:8px; line-height:1.35; }
.materialWalletCard dt { color:#64748b; }.materialWalletCard dd { margin:0; color:#aeb9c8; }
.materialWalletCard button { grid-column:1/-1; min-height:31px; border:1px solid #0891b2; border-radius:6px; background:#075985; color:#ecfeff; font-size:10px; font-weight:900; }
.materialWalletCard button:disabled { opacity:.5; }
.materialProgress { grid-column:1/-1; height:5px; overflow:hidden; border-radius:99px; background:#334155; }
.materialProgress i { display:block; height:100%; background:linear-gradient(90deg,#06b6d4,#8b5cf6); }
.materialProgressText { grid-column:1/-1; margin-top:-4px; color:#94a3b8; font-size:8px; }
@media(max-width:560px) { .materialWalletGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }.materialWalletCard { padding:7px; } }
@media(max-width:380px) { .materialWalletGrid { grid-template-columns:1fr; } }
.eternaGate { position:relative; overflow:hidden; margin-top:12px; padding:14px; border:1px solid #475569; border-radius:12px; background:radial-gradient(circle at 80% 0,rgba(124,58,237,.28),transparent 42%),linear-gradient(145deg,#111827,#1e1b4b); color:#e2e8f0; }
.eternaGate.unlocked { border-color:#a78bfa; box-shadow:0 0 18px rgba(139,92,246,.22); }
.eternaGateSky { position:absolute; inset:0; display:flex; justify-content:space-around; color:#c4b5fd; opacity:.25; pointer-events:none; font-size:28px; }
.eternaGateHead { position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.eternaGateHead small { color:#a5b4fc; font-size:9px; }.eternaGateHead h3 { margin:2px 0; color:#f5f3ff; font-size:17px; }.eternaGateHead > b { padding:4px 7px; border:1px solid #6d5cae; border-radius:99px; color:#ddd6fe; font-size:9px; white-space:nowrap; }
.eternaGate > p { position:relative; margin:7px 0 10px; color:#aeb9c8; font-size:10px; line-height:1.45; }
.eternaRequirements { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.eternaRequirements > div { display:flex; align-items:center; gap:7px; padding:8px; border:1px solid #374151; border-radius:8px; background:rgba(15,23,42,.7); }
.eternaRequirements > div > span { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#374151; color:#cbd5e1; font-weight:900; }
.eternaRequirements > div.done { border-color:#0f766e; }.eternaRequirements > div.done > span { background:#0f766e; color:#ccfbf1; }
.eternaRequirements div div { display:flex; flex-direction:column; min-width:0; }.eternaRequirements b { color:#e2e8f0; font-size:10px; }.eternaRequirements small { color:#94a3b8; font-size:8px; }
.eternaGate > button { position:relative; width:100%; min-height:38px; margin-top:9px; border:1px solid #8b5cf6; border-radius:8px; background:linear-gradient(135deg,#5b21b6,#7c3aed); color:#fff; font-weight:900; }
.eternaGate > button:disabled { border-color:#475569; background:#334155; color:#94a3b8; }
@media(max-width:480px) { .eternaGate { padding:11px; }.eternaRequirements { grid-template-columns:1fr; }.eternaGateHead h3 { font-size:15px; } }

/* 베이직 테마의 전역 밝은 패널/어두운 글자 규칙이 에테르나 관문 내부까지 덮어쓰면
   남색 카드 위에 검은 제목과 버튼 글자가 표시된다. 관문은 의도된 어두운 특수 카드로 유지하고,
   내부 텍스트와 상태 요소만 고대비 팔레트로 고정한다. */
html[data-theme="default"] #explorePanel .eternaGate {
  background:radial-gradient(circle at 80% 0,rgba(124,58,237,.34),transparent 44%),linear-gradient(145deg,#0b1224,#21184f) !important;
  border-color:#7467a8 !important;
  color:#f8fafc !important;
  text-shadow:none !important;
}
html[data-theme="default"] #explorePanel .eternaGate .eternaGateHead small {
  color:#c7d2fe !important;
  font-size:11px;
  font-weight:800;
}
html[data-theme="default"] #explorePanel .eternaGate .eternaGateHead h3 {
  color:#ffffff !important;
  font-size:17px;
  text-shadow:0 1px 0 #000 !important;
}
html[data-theme="default"] #explorePanel .eternaGate .eternaGateHead > b {
  border-color:#8b7cc8 !important;
  background:rgba(15,23,42,.5) !important;
  color:#f5f3ff !important;
  font-size:10px;
}
html[data-theme="default"] #explorePanel .eternaGate > p {
  color:#dbe4f0 !important;
  font-size:12px;
  line-height:1.55;
}
html[data-theme="default"] #explorePanel .eternaGate .eternaRequirements > div {
  background:#10182d !important;
  border-color:#52607a !important;
  color:#f8fafc !important;
}
html[data-theme="default"] #explorePanel .eternaGate .eternaRequirements > div.done {
  border-color:#14b8a6 !important;
  background:#0d2030 !important;
}
html[data-theme="default"] #explorePanel .eternaGate .eternaRequirements b {
  color:#ffffff !important;
  font-size:11px;
}
html[data-theme="default"] #explorePanel .eternaGate .eternaRequirements small {
  color:#cbd5e1 !important;
  font-size:9px;
}
html[data-theme="default"] #explorePanel .eternaGate > button {
  border-color:#a78bfa !important;
  background:linear-gradient(135deg,#5b21b6,#7c3aed) !important;
  color:#ffffff !important;
  font-size:12px;
  text-shadow:0 1px 0 rgba(0,0,0,.6) !important;
}
html[data-theme="default"] #explorePanel .eternaGate > button:disabled {
  opacity:1 !important;
  border-color:#64748b !important;
  background:#465166 !important;
  color:#f1f5f9 !important;
}

/* [가독성 패치 2026-07-25] 에테르나 탐험 화면(.eternaElementExplore)은 관문(.eternaGate)과 같은
   의도된 어두운 성좌 카드지만, 관문과 달리 베이지(default) 테마 보정이 한 번도 적용되지
   않아 전역 밝은 글자 규칙이 카드 내부의 밝은 글자색을 덮어써 버려 거의 안 보이는 상태였다.
   디자인(어두운 카드) 자체는 다크모드와 동일하게 유지하고, 텍스트·테두리 대비만 원래
   의도한 값으로 다시 고정한다. */
html[data-theme="default"] #explorePanel .eternaElementExplore {
  background:linear-gradient(155deg,#091426 0%,#111c35 58%,#17152f 100%) !important;
  color:#dbeafe !important;
}
html[data-theme="default"] #explorePanel .eternaExploreTitle small { color:#9ee7ff !important; }
html[data-theme="default"] #explorePanel .eternaExploreTitle h2 { color:#fff !important; text-shadow:0 0 15px rgba(165,243,252,.32) !important; }
html[data-theme="default"] #explorePanel .eternaExploreTitle p { color:#a9bcd2 !important; }
html[data-theme="default"] #explorePanel .eternaExploreSectionHead small { color:#67e8f9 !important; }
html[data-theme="default"] #explorePanel .eternaExploreSectionHead b { color:#dff7ff !important; }
html[data-theme="default"] #explorePanel .eternaExploreSectionHead > span { background:rgba(15,23,42,.6) !important; color:#a5f3fc !important; border-color:rgba(103,232,249,.25) !important; }
html[data-theme="default"] #explorePanel .eternaShareNote { color:#e0e7ff !important; }
html[data-theme="default"] #explorePanel .eternaElementGuide { color:#cbd5e1 !important; }
html[data-theme="default"] #explorePanel .eternaElementCard { color:#dbeafe !important; }
html[data-theme="default"] #explorePanel .eternaElementCopy small { color:color-mix(in srgb,var(--zone) 68%,#cbd5e1) !important; }
html[data-theme="default"] #explorePanel .eternaElementCopy b { color:#fff !important; }
html[data-theme="default"] #explorePanel .eternaElementState { color:#91a7bd !important; }
html[data-theme="default"] #explorePanel .eternaElementCard.active .eternaElementState { color:#fff !important; }
html[data-theme="default"] #explorePanel .eternaAllMapBadge { color:#eef2ff !important; }
html[data-theme="default"] #explorePanel .eternaZoneQuickActions button { color:#e0f2fe !important; border-color:#38bdf8 !important; background:rgba(14,116,144,.28) !important; }
html[data-theme="default"] #explorePanel .eternaZoneQuickActions button.breakthrough { color:#fef3c7 !important; border-color:#f59e0b !important; background:rgba(180,83,9,.28) !important; }
html[data-theme="default"] #explorePanel .eternaModeBtn { color:#94a3b8 !important; }
html[data-theme="default"] #explorePanel .eternaModeBtn.active { color:#e0f2fe !important; }
html[data-theme="default"] #explorePanel .eternaModeBtn.breakthrough.active { color:#fef3c7 !important; }
html[data-theme="default"] #explorePanel .eternaStageChip { color:#94a3b8 !important; }
html[data-theme="default"] #explorePanel .eternaStageChip.active { color:#fff !important; }
html[data-theme="default"] #explorePanel .eternaSelectedZone { color:#dbeafe !important; }
html[data-theme="default"] #explorePanel .eternaSelectedZone small { color:#89a4be !important; }
html[data-theme="default"] #explorePanel .eternaSelectedZone b { color:#fff !important; }
html[data-theme="default"] #explorePanel .eternaSelectedZone em { color:#b8c9d9 !important; }
html[data-theme="default"] #explorePanel .eternaCompactStats span { color:#cbd5e1 !important; }
html[data-theme="default"] #explorePanel .eternaCompactRule { color:#7f95aa !important; }
html[data-theme="default"] #explorePanel .eternaBreakthroughInfo { color:#fde68a !important; }
html[data-theme="default"] #explorePanel .eternaBreakthroughWarn { color:#fca5a5 !important; }
html[data-theme="default"] #explorePanel .eternaBreakthroughReward { color:#cbd5e1 !important; }
html[data-theme="default"] #explorePanel .eternaDropDetails { color:#cbd5e1 !important; }
html[data-theme="default"] #explorePanel .eternaDropSummary { color:#cbd5e1 !important; }
html[data-theme="default"] #explorePanel .eternaDropHeaderRow { color:#64748b !important; }
html[data-theme="default"] #explorePanel .eternaDropFootnote { color:#64748b !important; }
html[data-theme="default"] #explorePanel .eternaElementStart { color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.55) !important; }

.enchantWorkspace {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(220px, 1.1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}
.enchantItemSummary,
.enchantActionPane { min-width: 0; }
#enchantPanel .enchantItemSummary .itemCard {
  height: auto !important;
  min-height: 0 !important;
  padding: 8px !important;
  padding-bottom: 8px !important;
}
#enchantPanel .enchantItemSummary .itemCardHeaderZone {
  margin-bottom: 4px !important;
  padding-top: 0 !important;
  gap: 5px !important;
}
#enchantPanel .enchantItemSummary .itemCardHeaderZone > div:last-child {
  padding-right: 0 !important;
  align-items: flex-start !important;
}
#enchantPanel .enchantItemSummary .itemTitle {
  display: inline !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}
#enchantPanel .enchantItemSummary .itemSub,
#enchantPanel .enchantItemSummary .itemStatLine,
#enchantPanel .enchantItemSummary .itemWeaponPassive,
#enchantPanel .enchantItemSummary .itemScore {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
#enchantPanel .enchantItemSummary .itemStats { margin: 3px 0 !important; }
#enchantPanel .enchantActionPane .statSectionLabel { margin: 0 0 4px; line-height: 1.35; }
#enchantPanel .enchantActionPane .enchantNotice { margin: 0 0 5px; line-height: 1.35; }
#enchantPanel .enchantActionPane .enchantCost { margin: 3px 0 5px; line-height: 1.3; }
#enchantPanel .enchantOptionList { gap: 4px; }
#enchantPanel .enchantOptionRow { gap: 6px; padding: 5px 7px; }
#enchantPanel .enchantOptionInfo { overflow: visible; }
#enchantPanel .enchantOptionLabel,
#enchantPanel .enchantOptionRange {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
#enchantPanel .enchantRerollBtn { padding: 5px 7px; }

@media (max-width: 680px) {
  .enchantSlotFilters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; overflow:visible; padding-bottom:0; }
  .enchantSlotFilters .mapTab { width:100%; min-width:0; padding-left:4px; padding-right:4px; }
  .enchantLayout { grid-template-columns: 1fr; gap: 10px; }
  .enchantGearList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enchantWorkspace { grid-template-columns: 1fr; gap: 8px; }
  #enchantPanel .enchantItemSummary .itemStats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
  }
}
@media (max-width: 640px) {
  .panelCurrencyBar { top:-14px; justify-content:stretch; margin-left:0; margin-right:0; border-radius:0 0 8px 8px; }
  .panelCurrencyItem { flex:1; min-width:0; gap:6px; }
  .enhanceLayout { display:block; }
  .enhanceList { max-height:none; overflow-x:auto; overflow-y:hidden; flex-direction:row; gap:6px; padding-bottom:4px; margin-bottom:10px; }
  .enhanceListItem { flex:0 0 auto; min-width:132px; max-width:190px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:9px 10px; }
  .enhanceQuickBar { top:48px; margin:8px -8px 12px; border-radius:0 0 11px 11px; }
  .enhanceQuickInfo { align-items:flex-start; }
  .enhanceQuickItem { max-width:46%; }
  .enhanceQuickInfo > div:last-child { max-width:54%; }
  .enhanceQuickBar > div[style*="margin: 8px 0"] { margin:8px 0 !important; }
}
@media (max-width: 480px) {
  .enchantSlotFilters { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 480px) {
  .enchantLayout { grid-template-columns: 1fr; }
  .enchantGearList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enchantWorkspace { grid-template-columns: 1fr; }
  #enchantPanel .enchantItemSummary .itemStats { grid-template-columns: 1fr; }
  #enchantPanel .enchantOptionRow { flex-direction: column; align-items: stretch; }
  #enchantPanel .enchantRerollBtn { width: 100%; min-height: 34px; }
  .enchantLoadMoreBtn { min-height: 38px; }
  .enchantModeTab { min-height: 40px; padding: 8px 5px; font-size: 10px; }
  .preservationLevelTrack { grid-template-columns: 1fr 1fr; }
  .preservationChanceBox strong { width: 100%; margin-left: 0; text-align: center; }
}

/* 강화 단계별 연출: +8~9 작은 타격, +10~12 공명, +13 이상 운명의 강화
   [버그 수정] 예전엔 document.body에 position:fixed;inset:0으로 붙여서 브라우저 창 전체(예: 데스크톱
   1280px 폭) 크기를 차지했다 — 정작 강화 NPC 기본 일러스트(#npcVisitOverlay)는 그 안쪽의 좁은
   #gameCanvas(최대 720px, 16:10 비율) 안에만 있어서, 연출 중에는 그 기준이 서로 달라 오른쪽에 큰
   빈 공간이 생기고 스킵 버튼도 일러스트와 무관한 브라우저 우상단 구석에 떠 있었다. 이제 이 overlay를
   #gameCanvas 내부에 넣고 position:absolute;inset:0으로 그 좁은 프레임 기준으로만 채우게 해서,
   기본 일러스트·진행 연출·스킵 버튼이 전부 같은 프레임/크기를 공유한다. ── */
.enhanceSequence {
  position: absolute; inset: 0; z-index: 45; display: grid; place-items: center;
  background: rgba(2, 6, 23, .56); opacity: 0; transition: opacity .16s ease;
  pointer-events: all; overflow: hidden;
}
.enhanceSequence.active { opacity: 1; }
/* 강화 전(기본 NPC 일러스트)·진행 중·성공·실패 이미지가 모두 같은 프레임/크기/object-fit을 쓰도록
   .npcVisitArtwork와 동일한 규칙을 재사용한다 — <img> 하나의 src만 갈아끼우고 프레임 자체는
   교체하지 않아 상태 전환 시 화면이 작아지거나 흔들리지 않는다. */
.enhanceArtFrame { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.enhanceArtImage { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.enhanceSequenceCore {
  position: relative; z-index: 2; min-width: 220px; padding: 28px 32px; border-radius: 16px; text-align: center;
  background: linear-gradient(145deg, rgba(23,32,51,.92), rgba(11,16,32,.92)); border: 1px solid #50627f;
  box-shadow: 0 16px 55px rgba(0,0,0,.62); transform: scale(.75); opacity: 0;
  max-width: min(340px, 92vw); box-sizing: border-box;
  /* [버그 수정] max-height + overflow-y:auto를 안전장치로 넣었는데 오히려 이게 스크롤바의 원인이었다 —
     내부 .enhanceSequenceSpark 파티클이 transform:translateY(...)로 카드 밖까지 움직이는데,
     overflow:hidden과 달리 auto/scroll은 transform으로 밀려난 자식도 "스크롤 가능한 영역"으로
     잡아버려 실제로 넘치는 콘텐츠가 없는데도 스크롤바가 표시됐다. 바깥 .enhanceSequence가 이미
     #gameCanvas 프레임 경계에서 overflow:hidden으로 잘라주므로 이 카드 자체는 자연 크기로 둔다.
  */
}
@media (max-width: 420px) {
  .enhanceSequenceCore { padding: 22px 18px; }
  .enhanceSequenceStats { min-width: 0; width: 100%; box-sizing: border-box; }
}
/* [버그 대응 2026-07-24] 세로 공간이 아주 짧은 화면(가로모드, 구형 소형 기기)에서는 카드 내용이
   뷰포트보다 길어져 "확인" 버튼이 화면 밖으로 밀려날 수 있다 — 이 구간에서만 스크롤을 허용해
   버튼을 항상 누를 수 있게 한다. max-width 기준(위)과 별개로 세로가 짧을 때만 걸리도록
   max-height로 구분해, 평소 스크롤바 오탐 버그가 다시 생기지 않게 한다. */
@media (max-height: 480px) {
  .enhanceSequenceCore { max-height: 92vh; overflow-y: auto; }
}
.enhanceSequence.active .enhanceSequenceCore { animation: enhanceCoreIn .28s cubic-bezier(.18,.89,.32,1.28) forwards; }
.enhanceSequenceTitle { color: #cbd5e1; font-size: 12px; letter-spacing: .14em; font-weight: 800; }
.enhanceSequenceLevel { margin-top: 6px; color: #f8fafc; font-size: 27px; font-weight: 900; text-shadow: 0 0 14px #60a5fa; }
.enhanceSequenceLevel span { color: #facc15; padding: 0 5px; }
.enhanceSequenceItem { margin-top: 6px; color: #94a3b8; font-size: 12px; }
.enhanceSequenceStats { margin: 13px auto 0; padding: 8px 10px; min-width: 185px; border-radius: 8px; background: rgba(2, 6, 23, .52); border: 1px solid rgba(148,163,184,.26); text-align: left; }
.enhanceSequenceStats small { display: block; margin-bottom: 5px; color: #94a3b8; font-size: 10px; letter-spacing: .04em; }
.enhanceSequenceStats div { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 11px; color: #cbd5e1; }
.enhanceSequenceStats b { color: #f8fafc; font-weight: 700; }
.enhanceSequenceStats em { color: #4ade80; font-style: normal; font-weight: 800; }
.enhanceSequenceStats .down { color: #fecaca; }
.enhanceSequenceStats .down em { color: #f87171; }
.enhanceSequenceStats .even { color: #94a3b8; }
.enhanceSequenceStats .even em { color: #94a3b8; }
.enhanceSequenceStats.result { border-color: rgba(96,165,250,.5); background: rgba(15,23,42,.78); }
.enhanceSequence.legendary .enhanceSequenceStats { border-color: rgba(250,204,21,.45); background: rgba(69,42,9,.30); }
.enhanceSequenceHammer { margin: 4px auto 8px; color: #e2e8f0; font-size: 38px; line-height: 1; transform-origin: 72% 80%; }
.enhanceSequence.active .enhanceSequenceHammer { animation: enhanceHammer .52s ease-in-out infinite; }
.enhanceSequenceRings { position: absolute; inset: -26px; border-radius: 50%; border: 2px solid rgba(96,165,250,.38); opacity: 0; }
.enhanceSequence.resolve .enhanceSequenceRings { animation: enhanceRing .45s ease-out 2; }
.enhanceSequence.major .enhanceSequenceCore { border-color: #a78bfa; box-shadow: 0 0 44px rgba(167,139,250,.38), 0 16px 55px rgba(0,0,0,.62); }
.enhanceSequence.major .enhanceSequenceLevel { text-shadow: 0 0 17px #c4b5fd; }
.enhanceSequence.legendary { background: radial-gradient(circle, rgba(100,49,160,.36), rgba(2,6,23,.83) 62%); }
.enhanceSequence.legendary .enhanceSequenceCore { border-color: #facc15; background: radial-gradient(circle at 50% 0, #4c275f, #0b1020 70%); box-shadow: 0 0 72px rgba(250,204,21,.38), 0 18px 70px rgba(0,0,0,.78); }
.enhanceSequence.legendary .enhanceSequenceTitle { color: #fde68a; }
.enhanceSequence.legendary .enhanceSequenceLevel { color: #fff7cc; text-shadow: 0 0 24px #facc15; }
.enhanceSequence.legendary .enhanceSequenceHammer { filter: drop-shadow(0 0 11px #facc15); }
.enhanceSequenceSpark { position: absolute; inset: 50%; pointer-events: none; }
.enhanceSequenceSpark i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #d8b4fe; transform: rotate(var(--a)) translateY(0); opacity: 0; }
.enhanceSequence.active .enhanceSequenceSpark i { animation: enhanceSpark .65s ease-out var(--delay) infinite; }
.enhanceSequence.legendary .enhanceSequenceSpark i { background: #fde68a; box-shadow: 0 0 8px #facc15; }
.enhanceSequence.outcome .enhanceSequenceHammer { display: none; }
.enhanceSequence.outcome .enhanceSequenceCore { animation: enhanceOutcomeIn .28s ease-out both; }
.enhanceSequence.outcome.success .enhanceSequenceCore { border-color: #4ade80; box-shadow: 0 0 52px rgba(74,222,128,.48), 0 16px 55px rgba(0,0,0,.62); }
.enhanceSequence.outcome.success .enhanceSequenceLevel { color: #bbf7d0; text-shadow: 0 0 22px #4ade80; }
.enhanceSequence.outcome.fail .enhanceSequenceCore { border-color: #94a3b8; }
.enhanceSequence.outcome.fail .enhanceSequenceLevel { color: #cbd5e1; font-size: 18px; }
.enhanceSequence.outcome.down .enhanceSequenceCore { border-color: #fb923c; box-shadow: 0 0 40px rgba(251,146,60,.32); }
.enhanceSequence.outcome.down .enhanceSequenceLevel { color: #fed7aa; }
.enhanceSequence.outcome.protected .enhanceSequenceCore { border-color: #60a5fa; box-shadow: 0 0 48px rgba(96,165,250,.42); }
.enhanceSequence.outcome.protected .enhanceSequenceLevel { color: #bfdbfe; font-size: 34px; }
.enhanceSequence.outcome.destroyed .enhanceSequenceCore { border-color: #f87171; background: radial-gradient(circle at 50% 0, #5b1828, #12070c 72%); animation: enhanceDestroyed .55s ease-in both; }
.enhanceSequence.outcome.destroyed .enhanceSequenceLevel { color: #fecaca; font-size: 40px; text-shadow: 0 0 22px #ef4444; }
.enhanceOutcomeConfirm { margin-top: 16px; min-width: 132px; padding: 9px 24px; border: 1px solid #fde68a; border-radius: 8px; background: linear-gradient(135deg,#a16207,#f59e0b); color: #fffbea; font-weight: 900; cursor: pointer; box-shadow: 0 0 16px rgba(250,204,21,.36); }
/* 강화 연출 중(성공/실패 결과가 뜨기 전) .enhanceSequence(=강화 일러스트 프레임) 안쪽 우측 상단에
   표시되는 스킵 버튼. 결과 화면이 뜨면 playSlotEnhanceSequence의 reveal()이 이 버튼을 곧바로
   제거하므로 카드/일러스트와 겹치지 않는다. z-index를 일러스트(1)·결과 카드(2)보다 높여 항상
   눌리도록 하되, 카드 중앙 텍스트와는 겹치지 않는 모서리에만 배치한다. */
.enhanceSeqSkipBtn {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  min-height: 36px; padding: 7px 14px; border-radius: 16px;
  border: 1px solid rgba(226,232,240,.55); background: rgba(15,23,42,.72);
  color: #e2e8f0; font-size: 12px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.enhanceSeqSkipBtn:active { background: rgba(15,23,42,.92); }
.enhanceSkipToggle {
  display: flex; align-items: center; gap: 6px; margin: 8px 2px 2px;
  font-size: 12px; color: #cbd5e1; cursor: pointer; user-select: none;
}
.enhanceSkipToggle input { width: 15px; height: 15px; cursor: pointer; }
.autoMaxExploreToggle {
  display: flex; align-items: center; gap: 6px; margin: 6px 2px;
  font-size: 12px; color: #cbd5e1; cursor: pointer; user-select: none;
}
.autoMaxExploreToggle input { width: 15px; height: 15px; cursor: pointer; }
.autoMaxExploreStatus {
  margin: 2px 2px 6px; padding: 6px 10px; border-radius: 8px;
  background: rgba(30,41,59,.6); border: 1px solid rgba(100,116,139,.4);
  font-size: 11.5px; color: #e2e8f0; line-height: 1.4;
}
.enhanceOutcomeConfirm:hover { filter: brightness(1.15); transform: translateY(-1px); }
.enhanceSequence.legendary.outcome.success { background: radial-gradient(circle, rgba(250,204,21,.52), rgba(90,38,125,.48) 38%, rgba(2,6,23,.9) 72%); animation: enhanceJackpotBg 1.1s ease-in-out infinite alternate; }
.enhanceSequence.legendary.outcome.success .enhanceSequenceCore {
  /*
   * +20 이상 성공 시 jackpot 애니메이션이 위의 enhanceOutcomeIn을
   * 덮어쓴다. 기본 카드 opacity가 0이라 명시적으로 복구하지 않으면
   * 금빛 배경만 보이고 결과 카드가 계속 투명한 상태로 남는다.
   */
  border-width: 2px;
  opacity: 1;
  visibility: visible;
  animation: enhanceJackpotCore .72s ease-in-out infinite alternate;
}
.enhanceSequence.legendary.outcome.success .enhanceSequenceLevel { font-size: 44px; animation: enhanceJackpotText .58s ease-in-out infinite alternate; }
.enhanceSequence.legendary.outcome.success .enhanceSequenceSpark i { animation-duration: .34s; }
.enhanceCriticalResult {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  padding: 18px; box-sizing: border-box; overflow-y: auto; background: rgba(2,6,23,.82); opacity: 0;
  transition: opacity .2s ease; pointer-events: auto;
}
.enhanceCriticalResult.active { opacity: 1; }
.enhanceCriticalResultCard {
  position: relative; isolation: isolate; width: min(460px, 100%); max-height: calc(100vh - 36px); overflow-y: auto;
  box-sizing: border-box; padding: 30px 28px 26px; border: 2px solid #f59e0b; border-radius: 18px;
  background: radial-gradient(circle at 50% 0,#4c275f,#111827 66%); box-shadow: 0 22px 80px rgba(0,0,0,.82),0 0 50px rgba(250,204,21,.32);
  text-align: center; transform: scale(.88) translateY(12px); transition: transform .25s cubic-bezier(.18,.89,.32,1.28);
}
.enhanceCriticalResult.active .enhanceCriticalResultCard { transform: scale(1) translateY(0); }
.enhanceCriticalResultTitle { position: relative; z-index: 1; color:#fde68a; font-size:20px; font-weight:900; letter-spacing:.04em; }
.enhanceCriticalResultLevel { position: relative; z-index: 1; margin-top:8px; color:#fff7cc; font-size:50px; line-height:1; font-weight:900; text-shadow:0 0 25px #facc15; }
.enhanceCriticalResultDetail { position: relative; z-index:1; margin:12px auto 0; color:#dbe4ee; font-size:14px; line-height:1.55; }
.enhanceCriticalResult .enhanceSequenceStats { position:relative; z-index:1; width:auto; min-width:0; margin-top:18px; padding:13px 14px; font-size:13px; }
.enhanceCriticalResult .enhanceSequenceStats small { font-size:12px; }
.enhanceCriticalResult .enhanceSequenceStats div { font-size:13px; padding:3px 0; }
.enhanceCriticalConfirm { position:relative; z-index:2; width:min(250px,100%); margin-top:20px; padding:13px 24px; border:1px solid #fde68a; border-radius:10px; background:linear-gradient(135deg,#a16207,#f59e0b); color:#fffbea; font-size:16px; font-weight:900; cursor:pointer; box-shadow:0 0 18px rgba(250,204,21,.4); }
.enhanceCriticalConfirm:hover,.enhanceCriticalConfirm:focus { filter:brightness(1.18); outline:2px solid #fff7cc; outline-offset:3px; }
.enhanceCriticalResult.destroyed .enhanceCriticalResultCard { border-color:#f87171; background:radial-gradient(circle at 50% 0,#5b1828,#12070c 72%); }
.enhanceCriticalResult.destroyed .enhanceCriticalResultLevel { color:#fecaca; text-shadow:0 0 25px #ef4444; }
.enhanceCriticalResult.success .enhanceCriticalResultCard { border-color:#4ade80; box-shadow:0 22px 80px rgba(0,0,0,.82),0 0 60px rgba(74,222,128,.38); }
.enhanceCriticalResult.success .enhanceCriticalResultLevel { color:#bbf7d0; text-shadow:0 0 25px #4ade80; }
@media (max-width: 480px) { .enhanceCriticalResultCard { padding:25px 18px 20px; } .enhanceCriticalResultLevel { font-size:42px; } }
@keyframes enhanceJackpotBg { from { filter: brightness(1); } to { filter: brightness(1.35) saturate(1.35); } }
@keyframes enhanceJackpotCore { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes enhanceJackpotText { from { transform: scale(1); } to { transform: scale(1.16); text-shadow: 0 0 38px #fff7cc, 0 0 70px #facc15; } }
@keyframes enhanceOutcomeIn { from { transform: scale(.82); opacity: .45; } to { transform: scale(1); opacity: 1; } }
@keyframes enhanceDestroyed { 0% { transform: scale(1); } 45% { transform: scale(1.12) rotate(2deg); } 100% { transform: scale(.72); opacity: .4; } }
@keyframes enhanceCoreIn { to { transform: scale(1); opacity: 1; } }
@keyframes enhanceHammer { 0%,100% { transform: rotate(-18deg) translateY(0); } 45% { transform: rotate(18deg) translateY(-4px); } 65% { transform: rotate(-30deg) translateY(3px); } }
@keyframes enhanceRing { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes enhanceSpark { from { transform: rotate(var(--a)) translateY(0) scale(.4); opacity: 1; } to { transform: rotate(var(--a)) translateY(var(--d)) scale(0); opacity: 0; } }

/* ── 거래소 ── */
.marketHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12px; color: #8a94a3; }
.marketHeader b { color: #fbbf24; font-size: 10px; }
.marketConsumableGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 9px; }
.marketConsumableCard {
  display: flex; flex-direction: column; align-items: center; min-height: 190px; padding: 14px 11px;
  border: 1px solid #475569; border-radius: 9px; background: linear-gradient(180deg, #202938, #171d27);
  text-align: center;
}
.marketConsumableIcon { display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.55)); }
.marketConsumableIcon .consumablePixelIcon { width: 64px; height: 64px; }
.marketConsumableName { margin-top: 9px; color: #f8fafc; font-size: 12px; font-weight: 800; }
.marketConsumableDesc { flex: 1; margin: 7px 0; color: #aeb8c7; font-size: 10px; line-height: 1.55; word-break: keep-all; }
.marketConsumableOwned { margin-bottom: 8px; color: #86efac; font-size: 10px; }
.marketConsumableCard button { width: 100%; padding: 8px 6px; border-color: #b7791f !important; color: #fde68a !important; }

/* ── 솔로 레이드 ── */
.raidHero { position: relative; height: 260px; overflow: hidden; border: 1px solid #6d28d9; border-radius: 12px; background: #120d20; }
.raidHero img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; image-rendering: pixelated; }
.raidHeroShade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(8,5,15,.94) 100%); }
.raidHeroText { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #f8fafc; text-shadow: 0 2px 4px #000; }
.raidHeroText h2 { margin: 4px 0; color: #e9d5ff; font-size: 20px; }
.raidHeroText p { margin: 0; color: #c4b5fd; font-size: 11px; line-height: 1.5; }
.raidTag { display: inline-block; padding: 3px 7px; border: 1px solid #a855f7; border-radius: 4px; color: #f0abfc; background: rgba(88,28,135,.72); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.raidModeTabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 10px 0 0; }
.raidModeTab {
  min-width: 0; padding: 8px 6px; border: 1px solid #3f3554 !important; border-radius: 8px; background: #191525 !important;
  color: #c4b5fd !important; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; cursor: pointer;
}
.raidModeTab small { display: block; margin-top: 3px; color: #9ca3af; font-size: 9px; font-weight: 400; }
.raidModeTab.active { border-color: #a855f7 !important; background: linear-gradient(180deg, #4c1d95, #2e1065) !important; color: #f0abfc !important; }
.raidModeTab:disabled { opacity: .55; cursor: not-allowed; }
.raidRecordGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 10px 0; }
.raidRecordGrid > div { padding: 9px 7px; border: 1px solid #3f3554; border-radius: 8px; background: #191525; text-align: center; }
.raidRecordGrid span { display: block; color: #9ca3af; font-size: 9px; }
.raidRecordGrid b { display: block; margin-top: 4px; color: #ddd6fe; font-size: 12px; }
.raidPartGuide { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; }
.raidPartGuideRow { display: flex; justify-content: space-between; gap: 8px; min-width:0; padding: 9px 10px; border: 1px solid #343044; border-radius: 7px; background: #1c1927; font-size: 10px; overflow-wrap:anywhere; }
.raidPartGuideRow b { color: #c4b5fd; text-align: right; }
.raidNotice { max-width:100%; box-sizing:border-box; margin: 9px 0; padding: 9px 10px; border-left: 3px solid #8b5cf6; background: rgba(76,29,149,.18); color: #d8d4e3; font-size: 10px; line-height: 1.55; overflow-wrap:anywhere; }
.raidStartBtn { width: 100%; padding: 13px; border-color: #8b5cf6 !important; background: linear-gradient(180deg, #6d28d9, #4c1d95) !important; color: #fff !important; font-weight: 800; }
.raidStartBtn:disabled { opacity: .55; cursor: not-allowed; }
/* 일일 도전 횟수 표시 */
.raidDailyBox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; padding: 9px 12px; border: 1px solid #6d28d9; border-radius: 9px; background: #1b1530; font-size: 12px; }
.raidDailyBox b { color: #c4b5fd; }
.raidDailyBox small { flex-basis: 100%; color: #8a94a3; font-size: 10px; }
.raidDailyBox.exhausted { border-color: #ef4444; }
.raidDailyBox.exhausted b { color: #fca5a5; }
/* 레이드 결과 모달 */
.raidResultModal { max-width: 400px; width: 92%; max-height: 84vh; box-sizing:border-box; overflow-x:hidden; overflow-y: auto; text-align: left; }
.raidResultModal.won h2 { color: #facc15; }
.raidResultModal.lost h2 { color: #f87171; }
.raidResultStats { margin: 10px 0; }
.raidResultStatRow { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid #262e3a; }
.raidResultStatRow:last-child { border-bottom: none; }
.raidResultDivider { border-top: 1px solid #475569; margin: 8px 0; }
.raidResultHintBox { margin-top: 8px; padding: 8px 10px; border-radius: 7px; background: #2a1215; color: #fca5a5; font-size: 11px; line-height: 1.5; }
.raidResultDailyRow { margin: 6px 0 4px; font-size: 11px; color: #8a94a3; text-align: center; }
/* 준비 중 기능 안내 */
.featureDisabledBox { text-align: center; padding: 44px 16px; background: #1c222c; border: 1px solid #3a4556; border-radius: 12px; }
.featureDisabledBox .featureDisabledIcon { font-size: 42px; margin-bottom: 8px; filter: grayscale(.6); }
.featureDisabledBox h3 { margin: 4px 0 8px; font-size: 17px; }
.featureDisabledBox p { color: #8a94a3; font-size: 12px; line-height: 1.7; margin: 0; }
.raidResultCard { margin-top: 10px; padding: 12px; border: 1px solid #475569; border-radius: 9px; background: #171b24; }
.raidResultCard.won { border-color: #a78bfa; box-shadow: inset 0 0 18px rgba(124,58,237,.16); }
.raidResultCard.lost { border-color: #ef4444; }
.raidResultTitle { margin-bottom: 8px; color: #e9d5ff; font-size: 14px; font-weight: 800; }
.raidRewardRow { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; color: #9ca3af; font-size: 10px; }
.raidRewardRow b { color: #f8fafc; text-align: right; }
.raidResultHint { color: #cbd5e1; font-size: 10px; line-height: 1.5; }
.raidDamageList { margin-top: 9px; padding-top: 8px; border-top: 1px solid #343044; }
.raidDamageList > div { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; color: #aaa2bb; font-size: 9px; }
.raidDamageList b { color: #ddd6fe; }
@media (max-width: 480px) {
  .raidHero { height: 210px; }
  .raidRecordGrid { grid-template-columns: 1fr; }
  .raidPartGuide { grid-template-columns: 1fr; }
}

/* ── 랭킹 ── */
.rankButtons { display: flex; gap: 8px; margin-bottom: 10px; }
.rankButtons button { flex: 1; }
.rankTable { display: flex; flex-direction: column; gap: 4px; }
.rankRow { display: flex; gap: 8px; background: #1c222c; padding: 8px 12px; border-radius: 8px; font-size: 12px; align-items: center; }
.rankRow.me { border: 1px solid #38bdf8; }
.rankNum { width: 32px; color: #8a94a3; }
.rankName { flex: 1; font-weight: 600; }

/* ── 타이틀 화면 (최초 진입 시 로그인 전 배경) ── */
/* #app과 동일하게 최대 720px 폭으로 가운데 정렬 — 게임 화면 크기에 맞춘다(데스크탑에서 화면 전체로 늘어나지 않도록). */
.titleScreenOverlay {
  position: fixed; inset: 0; z-index: 90;
  max-width: 720px; margin: 0 auto;
  background: linear-gradient(rgba(5,8,13,.12), rgba(5,8,13,.70)), url('../assets/pixel/system/title_screen_pc_v2.png?v=20260810-title-screen-v3') center center / cover no-repeat;
  box-shadow: 0 0 0 100vmax #10151c;
  clip-path: inset(0 -100vmax);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 20px 20px 34px;
}
.titleScreenCard {
  width: 100%; max-width: 340px; text-align: center;
  background: rgba(10,14,22,.74); border: 2px solid #38bdf8; border-radius: 12px;
  padding: 16px 20px; box-sizing: border-box; backdrop-filter: blur(2px);
}
.titleScreenActions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.titleScreenActions button {
  width: 100%; padding: 11px; font-weight: bold; cursor: pointer; border-radius: 6px; font-size: 13px;
}
.titleScreenBtnLogin { background: #2563eb; color: #fff; border: 1px solid #3b82f6; }
.titleScreenBtnRegister { background: #059669; color: #fff; border: 1px solid #10b981; }
.titleScreenGuestLink {
  background: none; border: none; color: #94a3b8; font-size: 12px; margin-top: 10px;
  cursor: pointer; text-decoration: underline; padding: 4px;
}
.titleScreenLegalLinks { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px; margin-top:9px; padding-top:9px; border-top:1px solid rgba(148,163,184,.28); font-size:10px; line-height:1.5; }
.titleScreenLegalLinks a { color:#cbd5e1; text-decoration:underline; text-underline-offset:2px; }
.titleScreenLegalLinks span { color:#64748b; }
.gachaCurrencyNotice { margin:8px 0 0; padding:8px 10px; border:1px solid rgba(125,211,252,.28); border-radius:7px; background:rgba(8,47,73,.42); color:#bae6fd; font-size:10px; line-height:1.55; }
/* ── 모바일 UI: 카드를 더 좁고 낮게, 배경은 모바일 전용 세로형 이미지로 교체 ── */
/* 원본 title_screen.png는 가로가 긴 3:2 비율이라 세로로 긴 모바일 화면에서는 "안 잘림"과
   "꽉 채움"을 동시에 만족시킬 수 없었다(폭 기준으로 맞추면 로고는 안 잘리지만 아래가 크게
   비고, cover로 채우면 로고 양 끝이 잘린다). 그래서 로고/캐릭터 부분은 원본 그대로 두고
   아래쪽에 잔디밭 갈림길을 자연스럽게 이어붙인 세로형 전용 이미지(title_screen_portrait.png,
   1024×1536)를 새로 만들어 모바일에서는 이걸 cover로 꽉 채운다 — 이 이미지는 원본보다
   세로 비율이 훨씬 길어서 cover를 써도 좌우가 조금만 잘리고(로고에 여유 마진이 있어 안전),
   위아래는 잘리지 않는다. */
@media (max-width: 480px) {
  .titleScreenOverlay {
    padding: 14px 14px 22px;
    background-image: linear-gradient(rgba(5,8,13,.12), rgba(5,8,13,.70)), url('../assets/pixel/system/title_screen_mobile_v2.png?v=20260810-title-screen-v3');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .titleScreenCard { max-width: 100%; padding: 12px 16px; border-radius: 10px; }
  .titleScreenCard p { font-size: 10px; margin-bottom: 10px; }
  .titleScreenActions button { padding: 10px; font-size: 12px; }
  .titleScreenGuestLink { font-size: 11px; margin-top: 8px; }
  .titleScreenLegalLinks { margin-top:7px; padding-top:7px; font-size:9px; }
}

/* ── 모달 ── */
.modalOverlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
  overflow-y: auto;
}
/* Android WebView가 일부 시스템 내비게이션 바 높이를 safe-area에 반영하지 않아도
   로그인/계정 모달이 홈·뒤로가기 영역 아래로 내려가지 않게 한다. */
.capacitor-android .modalOverlay {
  box-sizing: border-box;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  overflow: hidden;
}
.capacitor-android .modalOverlay > .modalBox {
  max-height: calc(var(--samb-visible-height, 100dvh) - 16px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
/* 내용이 화면보다 길어지면(예: 장비교체 후보가 많은 경우) 모달 자체가 위/아래로 잘리던 버그 —
   모달 박스에 뷰포트 기준 최대 높이 + 내부 스크롤을 둬서 어떤 상황에서도 항상 화면 안에 들어오고,
   넘치는 내용은 모달 안에서 스크롤로 볼 수 있게 한다. */
.modalBox { background: #1c222c; border-radius: 14px; padding: 24px; max-width: 420px; width: 100%; text-align: center; max-height: calc(100vh - 40px); overflow-y: auto; box-sizing: border-box; }
.modalSub { color: #8a94a3; font-size: 13px; margin-bottom: 16px; }

/* ── 커스텀 확인/입력 팝업 (네이티브 confirm/prompt 대체) ── */
.confirmModalBox { max-width: 340px; }
.confirmModalMsg { white-space: pre-line; color: #e2e8f0; font-size: 13px; line-height: 1.5; margin-bottom: 18px; }
.confirmModalActions { display: flex; gap: 8px; }
/* [UX 2026-07-24] 모바일 좁은 화면에서 줄바꿈될 때 취소가 위/확인이 아래로 쌓이던 걸 반전 — 확인을 위로, 취소를 아래로 */
/* [버그 수정 2026-07-25] column-reverse였을 때 확인이 위/취소가 아래로 나와, 데스크톱 가로
   배치(취소 왼쪽 → 확인 오른쪽)의 순서와 반대로 보였다("확인 취소가 반대방향" 버그 리포트).
   세로로 쌓이더라도 읽는 순서(취소 → 확인)는 유지되도록 column-reverse를 column으로 되돌린다. */
@media (max-width:480px) { .confirmModalActions { flex-direction: column; } }
.confirmModalCancel, .confirmModalOk { flex: 1; padding: 10px; font-weight: 700; }
.confirmModalOk { background: linear-gradient(160deg,#ef4444,#b91c1c); border-color: #ef4444; color: #fff; }

/* 장착 슬롯 상세 모달의 "강화하러 가기" — 해제(위험) 버튼과 헷갈리지 않게 별도 줄에,
   강화 탭의 강화 시도 버튼과 같은 계열 색으로 둔다. */
.slotDetailEnhanceBtn {
  width: 100%; margin: 10px 0; padding: 10px; border: 0; border-radius: 8px;
  background: linear-gradient(135deg,#4f46e5,#7c3aed); color: #fff; font-weight: 800; cursor: pointer;
}
.slotDetailEnhanceBtn.enchant { background: linear-gradient(135deg,#7c3aed,#a855f7); margin-top: 0; }
.promptModalTitle { margin: 0 0 14px; font-size: 16px; }
.promptModalInput {
  width: 100%; box-sizing: border-box; margin-bottom: 16px; padding: 10px;
  background: #10141b; border: 1px solid #3a4556; color: #fff; border-radius: 6px; text-align: center;
}

/* ── 장비 비교 모달 ── */
.compareBox { max-width: 460px; text-align: left; }
.compareBox h2 { text-align: center; margin: 0 0 14px; font-size: 16px; }
.compareGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compareCol { display: flex; flex-direction: column; }
.compareColLabel { font-size: 11px; color: #8a94a3; margin-bottom: 6px; text-align: center; }
.compareCP { text-align: center; font-size: 13px; font-weight: 700; margin-top: 6px; }
.compareDelta { text-align: center; font-size: 18px; font-weight: 800; margin: 14px 0; }
.compareDelta.up { color: #4ade80; }
.compareDelta.down { color: #f87171; }
.compareDelta.even { color: #9aa5b3; }
/* "내 강화 수치와 맞췄다면" 보조 비교 — 위쪽 실제(as-is) 비교와 구분되게 옅은 박스로 감싼다. */
.compareMatchedSection { background: #1c222c; border-radius: 10px; padding: 8px 10px 2px; margin-bottom: 6px; }
.compareMatchedLabel { text-align: center; font-size: 11px; color: #8a94a3; }
.compareMatchedSection .compareDelta { font-size: 15px; margin: 6px 0 10px; }
.compareActions { display: flex; gap: 8px; }
.compareActions button { flex: 1; padding: 10px; }

/* ── 토스트 ── */
.toastBox { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 6px; align-items: center; max-width: min(92vw, 640px); }
.operationsAnnouncementBanner { position:fixed; z-index:1000000; top:max(6px,env(safe-area-inset-top)); left:50%; width:min(860px,calc(100vw - 18px)); min-height:42px; transform:translateX(-50%); box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:8px; overflow:hidden; padding:9px 56px 10px 12px; border:1px solid #fbbf24; border-radius:10px; background:linear-gradient(90deg,rgba(69,26,3,.97),rgba(120,53,15,.97),rgba(69,26,3,.97)); color:#fff7d6; box-shadow:0 8px 28px rgba(0,0,0,.52),0 0 14px rgba(245,158,11,.28); font-size:12px; line-height:1.35; text-align:center; animation:operationsAnnouncementIn .25s ease-out both; }
.operationsAnnouncementIcon { flex:0 0 auto; font-size:17px; }
.operationsAnnouncementBanner>b { flex:0 0 auto; color:#fde68a; white-space:nowrap; }
.operationsAnnouncementText { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.operationsAnnouncementBanner>em { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#fef3c7; font-size:10px; font-style:normal; font-weight:900; }
.operationsAnnouncementBanner>i { position:absolute; left:0; bottom:0; width:100%; height:3px; background:#fbbf24; box-shadow:0 0 7px #f59e0b; transition:width .25s linear; }
@keyframes operationsAnnouncementIn { from{opacity:0;transform:translate(-50%,-14px)} to{opacity:1;transform:translate(-50%,0)} }
@media(max-width:600px){.operationsAnnouncementBanner{top:max(3px,env(safe-area-inset-top));width:calc(100vw - 8px);min-height:38px;padding:7px 42px 8px 7px;gap:5px;border-radius:7px;font-size:10px}.operationsAnnouncementIcon{font-size:14px}.operationsAnnouncementBanner>b{font-size:9px}.operationsAnnouncementBanner>em{right:6px;font-size:8px}.operationsAnnouncementText{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
.patchUpdateNoticeBanner{position:fixed;z-index:1000002;top:max(8px,env(safe-area-inset-top));left:50%;width:min(720px,calc(100vw - 20px));transform:translateX(-50%);box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 12px;border:1px solid #38bdf8;border-radius:12px;background:linear-gradient(100deg,rgba(7,43,69,.98),rgba(15,23,42,.99),rgba(12,74,110,.98));color:#e0f2fe;box-shadow:0 12px 36px rgba(0,0,0,.62),0 0 18px rgba(56,189,248,.32);font-size:13px;line-height:1.4;text-align:center;animation:operationsAnnouncementIn .25s ease-out both}.patchUpdateNoticeBanner>b{min-width:0}.patchUpdateNoticeBanner>button{flex:0 0 auto;padding:7px 12px;border:1px solid #7dd3fc;border-radius:8px;background:#0369a1;color:#fff;font:inherit;font-weight:900;cursor:pointer}.patchUpdateNoticeBanner>button:hover{background:#0284c7}
@media(max-width:600px){.patchUpdateNoticeBanner{top:max(4px,env(safe-area-inset-top));width:calc(100vw - 8px);gap:6px;padding:8px 7px;font-size:10px}.patchUpdateNoticeBanner>button{padding:6px 8px;font-size:10px}}
.primordialLootAnnouncementBanner{position:fixed;z-index:999999;top:max(56px,calc(env(safe-area-inset-top) + 50px));left:50%;width:min(760px,calc(100vw - 18px));min-height:44px;transform:translateX(-50%);box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;padding:9px 14px 11px;border:1px solid #5eead4;border-radius:12px;background:linear-gradient(100deg,rgba(6,78,59,.97),rgba(15,23,42,.98),rgba(120,53,15,.96));color:#ecfeff;box-shadow:0 10px 34px rgba(0,0,0,.58),0 0 20px rgba(94,234,212,.34);font-size:12px;line-height:1.4;text-align:center;animation:primordialLootAnnouncementIn .32s cubic-bezier(.2,.9,.25,1.15) both}
.primordialLootAnnouncementBanner.isUnique{border-color:#fbbf24;background:linear-gradient(100deg,rgba(69,26,3,.98),rgba(30,41,59,.98),rgba(88,28,135,.97));box-shadow:0 10px 36px rgba(0,0,0,.62),0 0 24px rgba(251,191,36,.42)}
.primordialLootAnnouncementIcon{flex:0 0 auto;font-size:19px;filter:drop-shadow(0 0 7px currentColor)}
.primordialLootAnnouncementBanner>b{flex:0 0 auto;color:#99f6e4;white-space:nowrap}.primordialLootAnnouncementBanner.isUnique>b{color:#fde68a}
.primordialLootAnnouncementBanner strong{color:#fff;font-weight:900}.primordialLootAnnouncementBanner em{color:#fef3c7;font-style:normal;font-weight:900}
.primordialLootAnnouncementBanner>i{position:absolute;left:0;bottom:0;width:100%;height:3px;background:linear-gradient(90deg,#2dd4bf,#fbbf24);transform-origin:left;animation:primordialLootAnnouncementTime 10s linear both}
@keyframes primordialLootAnnouncementIn{from{opacity:0;transform:translate(-50%,-18px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes primordialLootAnnouncementTime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:600px){.primordialLootAnnouncementBanner{top:max(44px,calc(env(safe-area-inset-top) + 40px));width:calc(100vw - 8px);min-height:40px;padding:7px 8px 9px;gap:5px;border-radius:8px;font-size:10px}.primordialLootAnnouncementIcon{font-size:15px}.primordialLootAnnouncementBanner>b{font-size:9px}.primordialLootAnnouncementBanner span:last-of-type{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
.toast { background: #262e3a; border: 1px solid #3a4556; padding: 8px 16px; border-radius: 8px; font-family: "Galmuri11", "DungGeunMo", monospace; font-size: 12px; opacity: 1; transition: opacity 0.4s; }
.toast.toastOut { opacity: 0; }

/* ── 초월 등급 무지개 텍스트 ── */
.rainbowText {
  background: linear-gradient(90deg, #ff5e5e, #ffb35e, #fff45e, #5eff8a, #5ec8ff, #8a5eff, #ff5ec8, #ff5e5e);
  background-size: 400% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rainbowShift 2.5s linear infinite;
  font-weight: 700;
}
.primordialText {
  color:#5eead4;
  background:linear-gradient(90deg,#0f172a,#5eead4,#fbbf24,#ffffff,#5eead4,#0f172a);
  background-size:350% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-weight:900;
  filter:drop-shadow(0 0 3px rgba(94,234,212,.7)); animation:primordialShift 2.8s linear infinite;
}
@keyframes primordialShift { from { background-position:0 0; } to { background-position:350% 0; } }
@keyframes rainbowShift { 0% { background-position: 0% 0; } 100% { background-position: 400% 0; } }

@keyframes tdPopIn { 0% { opacity: 0; transform: scale(0.94) translateY(8px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
.tdPopIn { animation: tdPopIn 0.22s cubic-bezier(.22,.85,.32,1); }

/* ============================================================
   인벤토리 카드 높이 통일 및 버튼 하단 한 줄 고정
   ============================================================ */


/* 아이템 잠금 버튼 스타일 */
.lockBtn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid #475569;
  border-radius: 4px;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 11px;
  z-index: 10;
  transition: all 0.2s;
}
.lockBtn.locked {
  background: #7f1d1d;
  border-color: #ef4444;
  color: #fca5a5;
}
.itemGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
/* PNG 도트 그래픽 확대 시 보간을 비활성화한다. */
.pixel-art,
#gameCanvas canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.fieldPowerBreakdown { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; font-weight:700; }
.fieldPowerBreakdown .cpOk { color:#4ade80; }
.fieldPowerBreakdown .cpLow { color:#fb7185; }


/* ── 프리미엄 해변 스킨 상품 / 옵션 잠금 표시 ── */
.marketConsumableCard { position: relative; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.marketConsumableCard.selected { border-color: #f59e0b; box-shadow: 0 0 0 1px rgba(245,158,11,.38), 0 0 18px rgba(245,158,11,.16); }
.marketPremiumCard { border-color: #d97706; background: linear-gradient(180deg, #2a2418, #181b24); }
.marketPremiumCard:hover { transform: translateY(-1px); }
.marketPremiumBadge { position: absolute; top: 7px; right: 7px; padding: 3px 6px; border: 1px solid #f59e0b; border-radius: 5px; background: rgba(120,53,15,.88); color: #fde68a; font-size: 9px; font-weight: 900; }
.marketSkinProductIcon { font-size: 44px; line-height: 1; }
.marketConsumableOwned.notOwned { color: #fbbf24; }
.themeSwatch.skinLocked { position: relative; opacity: .58; filter: grayscale(.35); }
.skinLockBadge { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(2,6,23,.88); font-size: 12px; }
/* 미개봉 핫타임 상자 또는 스타터팩 보유 시 인벤토리 소모품 필터 알림 */
@keyframes consumableNoticePulse {
  0%,
  100% {
    border-color: #facc15;
    box-shadow:
      0 0 0 rgba(250, 204, 21, 0),
      inset 0 0 0 rgba(250, 204, 21, 0);
  }

  50% {
    border-color: #fde047;
    box-shadow:
      0 0 10px 2px rgba(250, 204, 21, 0.65),
      inset 0 0 8px rgba(250, 204, 21, 0.18);
  }
}

.mapTab.consumableNotice {
  position: relative;
  border-color: #facc15;
  animation: consumableNoticePulse 1.4s ease-in-out infinite;
}

.mapTab.consumableNotice::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;

  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: #facc15;

  box-shadow:
    0 0 5px rgba(250, 204, 21, 0.95);
}
/* ==========================================================
   베이직 테마 전용 거래소 글자색 개선
   (다크모드는 영향 없음)
========================================================== */

body.basicTheme .shopCard h3{
    color:#111 !important;
}

body.basicTheme .shopCard .shopDesc{
    color:#333 !important;
}

body.basicTheme .shopCard .shopOwned{
    color:#0b7a32 !important;
}

body.basicTheme .shopCard .shopPrice{
    color:#8a4d00 !important;
}

body.basicTheme .shopCard button{
    color:#3b2b10 !important;
}

/* ==========================================================
   Basic theme readability
   Only the default (bright parchment) theme is affected.
   Dark theme keeps all existing colors.
========================================================== */
html[data-theme="default"] .marketHeader {
  color: #3f3426 !important;
}

html[data-theme="default"] .marketHeader b {
  color: #2b1b0b !important;
}

html[data-theme="default"] .marketConsumableName {
  color: #17120d !important;
  text-shadow: none !important;
}

html[data-theme="default"] .marketConsumableDesc {
  color: #3f3a33 !important;
}

html[data-theme="default"] .marketConsumableOwned {
  color: #155c2c !important;
}

html[data-theme="default"] .marketConsumableOwned.notOwned {
  color: #68420a !important;
}

html[data-theme="default"] .marketConsumableCard button {
  color: #24170a !important;
  text-shadow: none !important;
}

html[data-theme="default"] .marketPremiumBadge {
  color: #211507 !important;
  background: #e9bd55 !important;
  border-color: #8a5600 !important;
  text-shadow: none !important;
}

/* ==========================================================
   Basic theme: full readability palette
   Dark theme is intentionally untouched. These rules only
   apply while the root element has data-theme="default".
========================================================== */
html[data-theme="default"] {
  --basic-title: #1a1a1a;
  --basic-body: #2f2f2f;
  --basic-muted: #555555;
  --basic-important: #005a9c;
  --basic-success: #1e7d32;
  --basic-warning: #b26a00;
  --basic-danger: #b22222;
  --basic-price: #3b2b10;
  --basic-border: #9b8567;
  --basic-panel: #f4ead7;
  --basic-panel-strong: #ead9bb;
}

/* Common bright panels, cards and navigation */
html[data-theme="default"] main,
html[data-theme="default"] .panel,
html[data-theme="default"] .tabPanel,
html[data-theme="default"] .activityCard,
html[data-theme="default"] .itemCard,
html[data-theme="default"] .enhanceListItem,
html[data-theme="default"] .enhanceCostBox,
html[data-theme="default"] .marketConsumableCard,
html[data-theme="default"] .compareMatchedSection,
html[data-theme="default"] .modalBox {
  color: var(--basic-body);
}

html[data-theme="default"] .panel h1,
html[data-theme="default"] .panel h2,
html[data-theme="default"] .panel h3,
html[data-theme="default"] .tabPanel h1,
html[data-theme="default"] .tabPanel h2,
html[data-theme="default"] .tabPanel h3,
html[data-theme="default"] .sectionTitle,
html[data-theme="default"] .panelTitle,
html[data-theme="default"] .activityName,
html[data-theme="default"] .itemName,
html[data-theme="default"] .enhanceQuickItem,
html[data-theme="default"] .compareBox h2,
html[data-theme="default"] .promptModalTitle {
  color: var(--basic-title) !important;
  text-shadow: none !important;
}

html[data-theme="default"] .sub,
html[data-theme="default"] .muted,
html[data-theme="default"] .desc,
html[data-theme="default"] .emptyMsg,
html[data-theme="default"] .modalSub,
html[data-theme="default"] .compareColLabel,
html[data-theme="default"] .compareMatchedLabel,
html[data-theme="default"] .activityDesc,
html[data-theme="default"] .itemSub,
html[data-theme="default"] .itemLevelInfo,
html[data-theme="default"] .enhanceMaxNotice {
  color: var(--basic-muted) !important;
  text-shadow: none !important;
}

/* Buttons on parchment backgrounds */
html[data-theme="default"] .mapTab,
html[data-theme="default"] .mobileSubBtn,
html[data-theme="default"] .marketConsumableCard button,
html[data-theme="default"] .enhanceCostBox button,
html[data-theme="default"] .compareActions button,
html[data-theme="default"] .modalBox button:not(.confirmModalOk):not(.slotDetailEnhanceBtn) {
  color: var(--basic-price) !important;
  text-shadow: none !important;
}

html[data-theme="default"] .mapTab.active,
html[data-theme="default"] .mobileSubBtn.active {
  color: #102f45 !important;
}

/* Important values and recommended combat power */
html[data-theme="default"] .cpCur,
html[data-theme="default"] .cpOk,
html[data-theme="default"] .fieldPowerBreakdown .cpOk,
html[data-theme="default"] .recommendedPower,
html[data-theme="default"] .recommendPower,
html[data-theme="default"] .enhanceQuickInfo span,
html[data-theme="default"] .panelCurrencyItem:not(.gold) b {
  color: var(--basic-important) !important;
  text-shadow: none !important;
}

/* Success, acquisition and positive deltas */
html[data-theme="default"] .success,
html[data-theme="default"] .positive,
html[data-theme="default"] .compareDelta.up,
html[data-theme="default"] .marketConsumableOwned,
html[data-theme="default"] .fieldPowerBreakdown .cpOk,
html[data-theme="default"] .enhanceSequenceStats em {
  color: var(--basic-success) !important;
}

/* Warnings, prices and gold */
html[data-theme="default"] .warning,
html[data-theme="default"] .itemLevelInfo b,
html[data-theme="default"] .enchantOptionLabel b,
html[data-theme="default"] .panelCurrencyItem.gold b,
html[data-theme="default"] .marketHeader b,
html[data-theme="default"] .marketConsumableOwned.notOwned {
  color: var(--basic-warning) !important;
  text-shadow: none !important;
}

html[data-theme="default"] .marketConsumableCard button,
html[data-theme="default"] .shopPrice,
html[data-theme="default"] .price,
html[data-theme="default"] .enhanceQuickCost {
  color: var(--basic-price) !important;
  text-shadow: none !important;
}

/* Failure, danger and insufficient-power states */
html[data-theme="default"] .danger,
html[data-theme="default"] .error,
html[data-theme="default"] .bossName,
html[data-theme="default"] .cpCur.cpLow,
html[data-theme="default"] .cpWarn,
html[data-theme="default"] .fieldPowerBreakdown .cpLow,
html[data-theme="default"] .compareDelta.down {
  color: var(--basic-danger) !important;
  text-shadow: none !important;
}

/* Enhancement screen: replace dark inline-looking blocks on the basic theme */
html[data-theme="default"] .enhanceListItem,
html[data-theme="default"] .enhanceCostBox {
  background: var(--basic-panel) !important;
  border-color: var(--basic-border) !important;
}

html[data-theme="default"] .enhanceListItem.sel {
  border-color: var(--basic-important) !important;
  box-shadow: 0 0 0 1px rgba(0, 90, 156, .2) !important;
}

html[data-theme="default"] .enhanceQuickBar {
  background: rgba(244, 234, 215, .97) !important;
  border-color: #756344 !important;
  box-shadow: 0 8px 20px rgba(75, 55, 25, .16) !important;
}

html[data-theme="default"] .enhanceQuickInfo,
html[data-theme="default"] .enhanceQuickCost {
  color: var(--basic-body) !important;
}

html[data-theme="default"] .enhanceQuickCost span {
  color: var(--basic-muted) !important;
}

/* Inventory and exploration cards */
html[data-theme="default"] .itemCard,
html[data-theme="default"] .activityCard {
  color: var(--basic-body) !important;
}

html[data-theme="default"] .activityCard.active {
  border-color: var(--basic-important) !important;
  box-shadow: 0 0 0 1px rgba(0, 90, 156, .2) inset !important;
}

/* Market cards: premium remains distinctive without pale yellow text */
html[data-theme="default"] .marketConsumableCard,
html[data-theme="default"] .marketPremiumCard {
  background: linear-gradient(180deg, #f5ead4, #e9d7b8) !important;
  color: var(--basic-body) !important;
}

html[data-theme="default"] .marketConsumableCard.selected {
  border-color: var(--basic-warning) !important;
  box-shadow: 0 0 0 2px rgba(178, 106, 0, .24) !important;
}

html[data-theme="default"] .marketPremiumBadge {
  background: #d7a83f !important;
  border-color: #765000 !important;
  color: #241707 !important;
}

/* Bright-theme dialogs and form fields */
html[data-theme="default"] .modalBox {
  background: #f3eadb !important;
  border: 1px solid var(--basic-border);
}

html[data-theme="default"] .confirmModalMsg {
  color: var(--basic-body) !important;
}

html[data-theme="default"] .promptModalInput {
  background: #fffaf0 !important;
  border-color: var(--basic-border) !important;
  color: var(--basic-title) !important;
}

/* Preserve intentional light text on genuinely dark overlays and action buttons. */
html[data-theme="default"] .enhanceSequence,
html[data-theme="default"] .enhanceCriticalResult,
html[data-theme="default"] .raidHeroText,
html[data-theme="default"] .combatConsumableBar,
html[data-theme="default"] .statusBar,
html[data-theme="default"] .buffBar {
  color: #e8ecf1;
}

/* ==========================================================
   Basic theme follow-up: exploration and solo raid
========================================================== */
html[data-theme="default"] #explorePanel .stageInfo,
html[data-theme="default"] #explorePanel .activityCard {
  color: var(--basic-body) !important;
}

html[data-theme="default"] #explorePanel .stageTitle,
html[data-theme="default"] #explorePanel .stageMapLine,
html[data-theme="default"] #explorePanel .activityTitle {
  color: var(--basic-title) !important;
  text-shadow: none !important;
}

html[data-theme="default"] #explorePanel .stageSub,
html[data-theme="default"] #explorePanel .stageDiffTag,
html[data-theme="default"] #explorePanel .stageMapDot,
html[data-theme="default"] #explorePanel .activityDesc,
html[data-theme="default"] #explorePanel .activityRewardRow {
  color: var(--basic-muted) !important;
  text-shadow: none !important;
}

html[data-theme="default"] #explorePanel .stageElementTag,
html[data-theme="default"] #explorePanel .cpRec,
html[data-theme="default"] #explorePanel .itemLevelInfo b {
  color: var(--basic-important) !important;
  text-shadow: none !important;
}

html[data-theme="default"] #explorePanel .autoMaxExploreStatus {
  background: rgba(0, 90, 156, .07) !important;
  border-color: rgba(0, 90, 156, .3) !important;
  color: var(--basic-body) !important;
  text-shadow: none !important;
}

html[data-theme="default"] #explorePanel .autoMaxExploreToggle {
  color: var(--basic-body) !important;
}

html[data-theme="default"] #explorePanel .bossPatternTitle {
  color: var(--basic-danger) !important;
}

html[data-theme="default"] #explorePanel .bossPatternChip {
  background: #eee2cd !important;
  border-color: var(--basic-border) !important;
  color: var(--basic-body) !important;
  text-shadow: none !important;
}

html[data-theme="default"] #explorePanel .bossPatternChip.role-attack,
html[data-theme="default"] #explorePanel .bossPatternChip.role-special {
  color: var(--basic-danger) !important;
}

html[data-theme="default"] #explorePanel .bossPatternChip.role-status,
html[data-theme="default"] #explorePanel .bossPatternChip.role-buff {
  color: var(--basic-success) !important;
}

html[data-theme="default"] #explorePanel .bossPatternChip.role-defense,
html[data-theme="default"] #explorePanel .bossPatternChip.role-summon {
  color: var(--basic-important) !important;
}

/* The raid hero image and selected dark mode tabs keep their light text. */
html[data-theme="default"] #raidPanel {
  color: var(--basic-body);
}

html[data-theme="default"] #raidPanel .raidNotice {
  background: rgba(0, 90, 156, .07) !important;
  border-left-color: var(--basic-important) !important;
  color: var(--basic-muted) !important;
  text-shadow: none !important;
}

html[data-theme="default"] #raidPanel .raidDailyBox {
  background: #f0e4cf !important;
  border-color: var(--basic-border) !important;
  color: var(--basic-body) !important;
}

html[data-theme="default"] #raidPanel .raidDailyBox b {
  color: var(--basic-important) !important;
  text-shadow: none !important;
}

html[data-theme="default"] #raidPanel .raidDailyBox small {
  color: var(--basic-muted) !important;
}

html[data-theme="default"] #raidPanel .raidDailyBox.exhausted {
  border-color: var(--basic-danger) !important;
}

html[data-theme="default"] #raidPanel .raidDailyBox.exhausted b {
  color: var(--basic-danger) !important;
}

html[data-theme="default"] #raidPanel .raidRecordGrid > div,
html[data-theme="default"] #raidPanel .raidPartGuideRow {
  background: #f0e4cf !important;
  border-color: var(--basic-border) !important;
  color: var(--basic-body) !important;
}

html[data-theme="default"] #raidPanel .raidRecordGrid span {
  color: var(--basic-muted) !important;
}

html[data-theme="default"] #raidPanel .raidRecordGrid b,
html[data-theme="default"] #raidPanel .raidPartGuideRow b {
  color: var(--basic-important) !important;
  text-shadow: none !important;
}

html[data-theme="default"] #raidPanel .raidModeTab:not(.active) {
  color: var(--basic-body) !important;
  text-shadow: none !important;
}

html[data-theme="default"] #raidPanel .raidModeTab:not(.active) small {
  color: var(--basic-muted) !important;
}

html[data-theme="default"] #raidPanel .raidStartBtn:disabled {
  background: #d8c8d7 !important;
  border-color: #9b8499 !important;
  color: #4b3c49 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="default"] #raidPanel .featureDisabledBox {
  background: #f0e4cf !important;
  border-color: var(--basic-border) !important;
  color: var(--basic-body) !important;
}

html[data-theme="default"] #raidPanel .featureDisabledBox p {
  color: var(--basic-muted) !important;
}
/* ===== 레벨 랭킹 TOP 20 ===== */
.levelRanking{max-width:900px;margin:0 auto;padding:14px}.levelRankingHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:1px solid #3b82f6;border-radius:12px 12px 0 0;background:linear-gradient(135deg,#16243b,#101827)}.levelRankingHeader h2{margin:0;color:#f8d76e;font-size:20px}.levelRankingHeader p{margin:4px 0 0;color:#9fb1ca;font-size:11px}.levelRankingHeader button,.rankerModalConfirm{border:1px solid #70b8ff;border-radius:8px;background:#174d78;color:#fff;font-weight:800;padding:9px 13px;cursor:pointer}.levelRankingGuide{padding:9px 14px;border-left:1px solid #334155;border-right:1px solid #334155;background:#111827;color:#94a3b8;font-size:11px}.levelRankingList{overflow:hidden;border:1px solid #334155;border-radius:0 0 12px 12px;background:#0b1220}.levelRankRow{width:100%;display:grid;grid-template-columns:58px minmax(130px,1fr) 90px minmax(150px,.7fr) 20px;align-items:center;gap:10px;padding:12px 15px;border:0;border-bottom:1px solid #263449;background:transparent;color:#e8eef8;text-align:left;cursor:pointer}.levelRankRow:last-child{border-bottom:0}.levelRankRow:hover,.levelRankRow:focus{background:#17263d;outline:0}.levelRankRow.me{box-shadow:inset 3px 0 #39d98a;background:#102b29}.levelRankPlace{font-size:18px;font-weight:900;text-align:center;color:#a9bad1}.levelRankIdentity{display:flex;min-width:0;flex-direction:column}.levelRankIdentity b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.levelRankIdentity small{margin-top:3px;color:#8da1bb;font-size:10px}.levelRankLevel{display:flex;flex-direction:column;align-items:flex-end}.levelRankLevel small{color:#6f87a7;font-size:8px}.levelRankLevel b{color:#6ee7ff;font-size:17px}.levelRankMeta{display:flex;flex-direction:column;align-items:flex-end;gap:3px}.levelRankMeta em{color:#b6c4d8;font-size:10px;font-style:normal}.levelRankMeta em.levelRankTranscend{color:#c084fc;font-weight:800}.levelRankArrow{color:#60a5fa;font-size:25px;text-align:right}.rankingLoading,.rankingEmpty{padding:35px;text-align:center;color:#9fb1ca}
.rankingModeTabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px;padding:5px;border:1px solid #334155;border-radius:12px;background:#09111f}.rankingModeTabs button{min-height:42px;border:1px solid transparent;border-radius:8px;background:#151f30;color:#91a4bf;font-size:12px;font-weight:800;cursor:pointer}.rankingModeTabs button:hover{border-color:#475f7e;color:#e8f2ff}.rankingModeTabs button.active{border-color:#60a5fa;background:linear-gradient(135deg,#18385c,#13263f);box-shadow:inset 0 0 18px rgba(59,130,246,.16);color:#f8fbff}.trainingRankingHeader{border-color:#8b5cf6;background:linear-gradient(135deg,#251c45,#111827)}.trainingRankingHeader h2{color:#ddd6fe}.trainingRankRow{grid-template-columns:58px minmax(130px,1fr) minmax(135px,.8fr) minmax(145px,.7fr) 20px}.trainingRankDps{display:flex;min-width:0;flex-direction:column;align-items:flex-end}.trainingRankDps small{color:#8b9db8;font-size:9px}.trainingRankDps b{overflow:hidden;max-width:100%;color:#facc15;font-size:17px;text-overflow:ellipsis;white-space:nowrap}.trainingRankRow.rank1{background:linear-gradient(90deg,rgba(250,204,21,.09),transparent 46%)}.trainingRankRow.rank2{background:linear-gradient(90deg,rgba(203,213,225,.07),transparent 42%)}.trainingRankRow.rank3{background:linear-gradient(90deg,rgba(251,146,60,.07),transparent 42%)}
.rankerEquipmentModal{position:relative;width:min(680px,92vw)!important;max-height:min(82dvh,720px);overflow:auto;padding:22px!important;background:#101827!important;border:1px solid #60a5fa!important}.rankerModalClose{position:absolute;right:10px;top:9px;width:32px;height:32px;border:0;background:transparent;color:#aebed3;font-size:25px;cursor:pointer}.rankerProfile{display:flex;align-items:center;gap:12px;padding-right:34px}.rankerProfile>span{font-size:32px}.rankerProfile h2{margin:0;color:#ffe18b}.rankerProfile p{margin:4px 0;color:#a9bad1;font-size:12px}.rankEquipmentTitle{margin:17px 0 8px;padding-bottom:7px;border-bottom:1px solid #314158;color:#e8eef8;font-weight:900}.rankEquipmentGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rankEquipCard{min-width:0;padding:10px;border:1px solid var(--rank-rarity,#526277);border-left-width:4px;border-radius:8px;background:#172131}.rankEquipSlot{display:flex;justify-content:space-between;color:#91a5bf;font-size:10px}.rankEquipSlot span{color:#75e6a8}.rankEquipCard strong{display:block;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0f4fb;font-size:12px}.rankEquipCard small{display:block;margin-top:4px;color:#91a5bf;font-size:9px}.rankEquipCard em{display:block;margin-top:5px;color:#62e7a4;font-size:9px;font-style:normal}.rankEquipCard.empty{border-color:#2b3748;opacity:.72}.rankEquipEmpty{margin-top:7px;color:#66778e;font-size:11px}.rankerModalConfirm{display:block;min-width:130px;margin:18px auto 0}
@media(max-width:600px){.levelRanking{padding:7px}.levelRankingHeader{padding:12px}.levelRankingHeader h2{font-size:15px}.levelRankingHeader p{font-size:9px}.levelRankingHeader button{padding:7px 9px;font-size:10px}.levelRankRow{grid-template-columns:38px minmax(90px,1fr) 58px 16px;gap:6px;padding:10px 8px}.levelRankPlace{font-size:14px}.levelRankIdentity b{font-size:12px}.levelRankIdentity small{font-size:8px}.levelRankLevel b{font-size:14px}.levelRankMeta{display:none}.levelRankArrow{font-size:20px}.rankerEquipmentModal{width:94vw!important;max-height:84dvh;padding:15px!important}.rankEquipmentGrid{grid-template-columns:1fr 1fr;gap:5px}.rankEquipCard{padding:8px 7px}.rankEquipCard strong{font-size:10px}.rankerProfile h2{font-size:16px}}
@media(max-width:600px){.rankingModeTabs{gap:4px;padding:4px}.rankingModeTabs button{min-height:38px;padding:6px 4px;font-size:10px}.trainingRankRow{grid-template-columns:36px minmax(88px,1fr) minmax(92px,.8fr) 14px}.trainingRankDps small{font-size:7px}.trainingRankDps b{font-size:13px}}
@media(max-width:360px){.rankEquipmentGrid{grid-template-columns:1fr}.rankerEquipmentModal{max-height:88dvh}}

/* ==========================================================
   Basic/default theme: newly added UI typography and contrast
   The dark theme keeps its original bright neon palette.
========================================================== */
html[data-theme="default"] body {
  color: var(--basic-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* On parchment, the pale yellow/white portions of the original gradients
   disappeared. Use deeper versions of the same identities only in Basic mode. */
html[data-theme="default"] .rainbowText {
  background-image: linear-gradient(
    90deg,
    #b42318,
    #a34f00,
    #756400,
    #19733a,
    #006b91,
    #5046a8,
    #9b2678,
    #b42318
  ) !important;
  background-size: 400% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
}

html[data-theme="default"] .primordialText {
  background-image: linear-gradient(
    90deg,
    #073f3b,
    #087f73,
    #9a5b00,
    #273449,
    #087f73,
    #073f3b
  ) !important;
  background-size: 350% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.45)) drop-shadow(0 0 2px rgba(8,127,115,.34));
}

/* Patch notes used dark-mode surfaces while the Basic modal inherited dark
   lettering. Give the whole dialog a parchment surface and explicit hierarchy. */
html[data-theme="default"] .optionsPatchNoteSection small {
  color: var(--basic-muted) !important;
  font-size: 10px;
  line-height: 1.55;
}

html[data-theme="default"] .optionsPatchNoteBtn {
  background: #ead9bb !important;
  border-color: #8a6a3d !important;
  color: #3a2712 !important;
  text-shadow: none !important;
}

html[data-theme="default"] .patchNoteModalBox {
  background: #f4ead7 !important;
  border-color: #8a6a3d !important;
  color: var(--basic-body) !important;
}

html[data-theme="default"] .patchNoteHeader {
  background: linear-gradient(135deg, #5b3a19, #825b24) !important;
  color: #fff9e8 !important;
  text-shadow: 1px 1px 0 rgba(36,23,10,.75);
}

html[data-theme="default"] .patchNoteHeader > span,
html[data-theme="default"] .patchNoteHeader small {
  color: #f7dfaa !important;
}

html[data-theme="default"] .patchNoteHeader h2 {
  color: #fff9e8 !important;
  text-shadow: 1px 1px 0 rgba(36,23,10,.75) !important;
}

html[data-theme="default"] .patchNoteBody,
html[data-theme="default"] .patchNoteActions {
  background: #f4ead7 !important;
}

html[data-theme="default"] .patchNoteSection {
  background: #fbf3de !important;
  border-color: #9b8567 !important;
}

html[data-theme="default"] .patchNoteSection h3 {
  color: #6b3f09 !important;
  font-size: 13px;
  line-height: 1.45;
  text-shadow: none !important;
}

html[data-theme="default"] .patchNoteSection ul {
  color: #2f2f2f !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.72;
}

html[data-theme="default"] .patchNoteTodayBtn {
  background: #ead9bb !important;
  border-color: #9b8567 !important;
  color: #3a2712 !important;
  text-shadow: none !important;
}

html[data-theme="default"] .patchNoteConfirmBtn {
  background: #6b4b20 !important;
  border-color: #8a6a3d !important;
  color: #fff9e8 !important;
}

/* Enchant equipment picker, score step and option step. */
html[data-theme="default"] #enchantPanel,
html[data-theme="default"] #enchantPanel .enchantGearItem,
html[data-theme="default"] #enchantPanel .enchantOptionLabel,
html[data-theme="default"] #enchantPanel .enchantCost {
  color: var(--basic-body) !important;
  text-shadow: none !important;
}

html[data-theme="default"] #enchantPanel .enchantNotice,
html[data-theme="default"] #enchantPanel .enchantScreenNotice,
html[data-theme="default"] #enchantPanel .enchantListMeta,
html[data-theme="default"] #enchantPanel .enchantOptionRange,
html[data-theme="default"] #enchantPanel .enchantCostNote {
  color: var(--basic-muted) !important;
  font-weight: 600;
  line-height: 1.55;
  text-shadow: none !important;
}

html[data-theme="default"] #enchantPanel .enchantListMeta,
html[data-theme="default"] #enchantPanel .enchantOptionRange {
  font-size: 11px;
}

html[data-theme="default"] #enchantPanel .enchantOptionRow {
  background: #fbf3de !important;
  border: 1px solid #9b8567;
}

html[data-theme="default"] #enchantPanel .enchantOptionLabel b {
  color: #8a4b00 !important;
}

html[data-theme="default"] #enchantPanel .enchantLockedTag {
  color: #6f2a8e !important;
}

html[data-theme="default"] #enchantPanel .enchantLoadMoreBtn {
  background: #ead9bb !important;
  border-color: #8a6a3d !important;
  color: #3a2712 !important;
  text-shadow: none !important;
}

html[data-theme="default"] #enchantPanel .enchantRerollBtn {
  background: linear-gradient(135deg, #65408f, #7b3294) !important;
  border-color: #6f2a8e !important;
  color: #fff !important;
}

html[data-theme="default"] #enchantPanel .enchantRerollBtn:disabled {
  background: #d3c4aa !important;
  border-color: #9b8567 !important;
  color: #665a48 !important;
  opacity: 1;
}

html[data-theme="default"] #enchantPanel .enchantModeTabs {
  background: #e3d2b5 !important;
  border-color: #9b8567 !important;
}
html[data-theme="default"] #enchantPanel .enchantModeTab { color: #655642 !important; text-shadow: none !important; }
html[data-theme="default"] #enchantPanel .enchantModeTab.active {
  background: #6b4b20 !important; border-color: #8a6a3d !important; color: #fff9e8 !important;
}
html[data-theme="default"] #enchantPanel .enchantListPreservation,
html[data-theme="default"] #enchantPanel .itemPreservationBadge { color: #075985 !important; }
html[data-theme="default"] #enchantPanel .itemPreservationBadge { background: #d8eef2 !important; border-color: #42889b !important; }
html[data-theme="default"] #enchantPanel .preservationLevelTrack > div,
html[data-theme="default"] #enchantPanel .preservationCostBox {
  background: #fbf3de !important; border-color: #9b8567 !important;
}
html[data-theme="default"] #enchantPanel .preservationLevelTrack span,
html[data-theme="default"] #enchantPanel .preservationCostBox small { color: #655642 !important; }
html[data-theme="default"] #enchantPanel .preservationLevelTrack b,
html[data-theme="default"] #enchantPanel .preservationCostRow { color: #3a2712 !important; }
html[data-theme="default"] #enchantPanel .preservationChanceBox {
  background: #d8eef2 !important; border-color: #42889b !important; color: #164e63 !important;
}
html[data-theme="default"] #enchantPanel .preservationChanceBox span { border-color: #7aa8b2 !important; }
html[data-theme="default"] #enchantPanel .preservationChanceBox strong { color: #7c2d12 !important; }
html[data-theme="default"] #enchantPanel .preservationBlocked {
  background: #f6e6bd !important; border-color: #b7791f !important; color: #6b3f09 !important;
}
html[data-theme="default"] #enchantPanel .preservationAttemptBtn {
  background: #176b78 !important; border-color: #245f69 !important; color: #fff !important;
}

/* Equipment exchange and auto-equip comparison rows added today. */
html[data-theme="default"] .swapCandidateRow,
html[data-theme="default"] .manualAutoEquipRow {
  background: #fbf3de !important;
  border-color: #9b8567 !important;
  color: var(--basic-body) !important;
  line-height: 1.45;
  text-shadow: none !important;
}

html[data-theme="default"] .swapCandidateMatched,
html[data-theme="default"] .manualAutoEquipChange,
html[data-theme="default"] .autoLogLine {
  color: var(--basic-muted) !important;
  line-height: 1.5;
  text-shadow: none !important;
}

/* Celestial Seraph special gacha */
.celestialGachaPanel { position:relative; overflow:hidden; padding:14px; border:1px solid #7867c9; border-radius:14px; background:radial-gradient(circle at 50% 0,#42387e 0,#17162b 45%,#0d101b 100%); color:#f8f4ff; }
.celestialGachaHero { position:relative; min-height:220px; display:flex; align-items:flex-end; overflow:hidden; border-radius:12px; background:linear-gradient(135deg,rgba(124,103,221,.25),rgba(252,211,77,.1)); }
.celestialGachaHero>img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center; image-rendering:pixelated; }
.celestialGachaHeroShade { position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(13,16,27,.05) 0%,rgba(13,16,27,.45) 60%,rgba(13,16,27,.94) 100%); }
.celestialHalo { position:absolute; width:210px; height:210px; left:calc(50% - 220px); border:3px solid rgba(255,225,128,.65); border-radius:50%; box-shadow:0 0 35px #bca7ff,inset 0 0 30px #f9df88; animation:celestialHaloSpin 8s linear infinite; }
.celestialHalo:after { content:'✦  ✧  ✦  ✧'; position:absolute; inset:13px; display:flex; align-items:center; justify-content:center; border:1px dashed #fff1b0; border-radius:50%; color:#fff4c2; letter-spacing:15px; }
@keyframes celestialHaloSpin { to { transform:rotate(360deg); } }
.celestialGachaHeroText { position:relative; z-index:3; width:100%; padding:14px 16px; text-shadow:0 2px 6px #000; }.celestialGachaHeroText>span{font-size:11px;letter-spacing:2px;color:#fde68a}.celestialGachaHeroText h2{margin:5px 0;font-size:27px;color:#fff7cf}.celestialGachaHeroText p{margin:0;color:#d8d4ee;font-size:12px}
.celestialGachaStatus { display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:8px; margin:10px 0; }.celestialGachaStatus>div{display:flex;flex-direction:column;gap:4px;padding:10px;background:rgba(8,10,24,.68);border:1px solid #4b4671;border-radius:9px}.celestialGachaStatus small{color:#aaa5c5}.celestialGachaStatus b{color:#fff4c0}.celestialPity span{height:5px;background:#292641;border-radius:5px;overflow:hidden}.celestialPity i{display:block;height:100%;background:linear-gradient(90deg,#a78bfa,#fcd34d);box-shadow:0 0 8px #fcd34d}
.celestialGachaButtons { display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px}.celestialGachaButtons button{min-height:54px;border:1px solid #9b87ed;background:linear-gradient(#57469b,#34286c);color:white;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center}.celestialGachaButtons button.multi{border-color:#f1cd67;background:linear-gradient(#8c6721,#5d3b0b);box-shadow:0 0 12px rgba(250,204,21,.25)}.celestialGachaButtons button.pityExchange{background:linear-gradient(#346b79,#184957)}.celestialGachaButtons button span{font-size:10px;color:#e6e0ff;margin-top:3px}.celestialGachaButtons button:disabled{filter:grayscale(1);opacity:.45}
.celestialOdds{margin-top:10px;padding:9px;border:1px solid #403b62;border-radius:8px;background:rgba(5,6,15,.5)}.celestialOdds summary{cursor:pointer;color:#ddd5ff}.celestialOdds>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}.celestialOdds span{display:flex;justify-content:space-between;font-size:10px;color:#c8c3dd}.celestialOdds span.jackpot{color:#ffe873;text-shadow:0 0 6px #d69c1c}.celestialOdds p{font-size:10px;color:#9993b3;margin:8px 0 0}
.celestialGachaResult{position:relative;min-height:112px;margin-top:12px;padding:10px;border-radius:10px;background:radial-gradient(circle,rgba(117,92,190,.25),rgba(4,5,12,.72));display:flex;align-items:center;justify-content:center}.celestialGachaResult>p{color:#8f8aa7}.celestialGachaCards{width:100%;display:flex;flex-wrap:wrap;gap:7px;justify-content:center;perspective:900px}.celestialGachaCard{position:relative;width:92px;height:112px;transform-style:preserve-3d;transform:rotateY(180deg) scale(.7);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .25s}.celestialGachaCard.revealed{transform:rotateY(0) scale(1);opacity:1}.celestialGachaCard .cardBack,.celestialGachaCard .cardFront{position:absolute;inset:0;backface-visibility:hidden;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center}.celestialGachaCard .cardBack{transform:rotateY(180deg);font-size:32px;color:#f5e38d;border:2px solid #8373d4;background:linear-gradient(135deg,#271d53,#5a3f91)}.celestialGachaCard .cardFront{border:1px solid #6e6599;background:linear-gradient(#28223e,#141321);padding:7px;text-align:center}.celestialGachaCard .cardFront>.consumablePixelIcon,.celestialGachaCard .cardFront>span{width:48px;height:48px;font-size:37px;object-fit:contain;image-rendering:pixelated}.celestialGachaCard b{font-size:9px;line-height:1.35;margin-top:6px;color:#eeeaff}.celestialGachaCard small{font-size:7px;color:#ffe17d}.celestialGachaCard.jackpot{width:108px;height:132px;filter:drop-shadow(0 0 12px #ffc400)}.celestialGachaCard.jackpot .cardFront{border:0;background:radial-gradient(circle,#8d5a12,#24190b)}.celestialSkinReward{width:72px;height:72px;object-fit:contain;image-rendering:pixelated}.celestialJackpotFrame{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);object-fit:fill;pointer-events:none;z-index:3}.celestialSummonFlash{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle,#fff 0,#ffe99a 8%,rgba(178,139,255,.72) 24%,transparent 58%);animation:celestialSummon 1.1s ease-out forwards}.celestialSummonFlash.finished{display:none}@keyframes celestialSummon{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(2)}}
.celestialSupplyChoices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.celestialSupplyChoices button{display:flex;gap:9px;align-items:center;text-align:left;min-height:62px}.celestialSupplyChoices img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated}.celestialSupplyChoices span{display:flex;flex-direction:column}.celestialSupplyChoices b{color:#fde68a}
@media(max-width:600px){.celestialGachaPanel{padding:8px}.celestialGachaHero{min-height:170px}.celestialHalo{width:145px;height:145px;left:-7px}.celestialGachaHeroText h2{font-size:19px}.celestialGachaHeroText p{font-size:9px}.celestialGachaStatus{grid-template-columns:1fr 1fr}.celestialGachaStatus .celestialPity{grid-column:1/-1}.celestialGachaButtons{grid-template-columns:1fr 1fr}.celestialGachaButtons .pityExchange{grid-column:1/-1}.celestialOdds>div{grid-template-columns:1fr 1fr}.celestialGachaCard{width:70px;height:92px}.celestialGachaCard.jackpot{width:82px;height:106px}.celestialGachaCard .cardFront>.consumablePixelIcon,.celestialGachaCard .cardFront>span{width:38px;height:38px;font-size:30px}.celestialGachaCard b{font-size:8px}.celestialSupplyChoices{grid-template-columns:1fr}}

/* ── 가챠 탭 전용 화면: 상단 게임 화면(캐릭터/EXP바)을 숨기고 가챠 패널이
   스크롤 없이 남은 화면 전체를 채우도록 flex로 재배치한다.
   다른 탭으로 이동하면 activeTab이 바뀌며 gachaView 클래스가 자동 해제되어
   원래의 상단 게임 화면이 그대로 복귀한다. ── */
#app.gachaView #gameCanvasWrap { display: none; }
#app.gachaView .panels { overflow: hidden; padding: 8px; }
#app.gachaView #gachaPanel.active { height: 100%; display: flex; flex-direction: column; }
#app.gachaView .celestialGachaPanel { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px; }
#app.gachaView .celestialGachaHero { flex: 1 1 0; min-height: 0; height: auto; }
#app.gachaView .celestialGachaStatus { flex: 0 0 auto; margin: 6px 0; }
#app.gachaView .celestialGachaButtons { flex: 0 0 auto; }
#app.gachaView .celestialGachaButtons button { min-height: 42px; }
#app.gachaView .celestialOdds { flex: 0 1 auto; margin-top: 6px; overflow-y: auto; max-height: 40%; }
#app.gachaView .celestialGachaResult { flex: 1 1 0; min-height: 0; margin-top: 6px; overflow-y: auto; }

/* ── 에테르나 성좌 각성: 장비 강화 화면과 분리된 계정 특성판 ── */
.constellationBoard { position:relative; margin:13px 0; padding:14px; overflow:hidden; border:1px solid rgba(196,181,253,.72); border-radius:14px; background:radial-gradient(circle at 82% 0,rgba(109,40,217,.34),transparent 38%),linear-gradient(145deg,rgba(15,23,42,.97),rgba(30,27,75,.95)); box-shadow:0 12px 30px rgba(15,23,42,.34),inset 0 0 32px rgba(129,140,248,.07); color:#eef2ff; }
.constellationBoard:before { content:'✦  ·  ✧  ·  ✦'; position:absolute; right:18px; top:10px; color:rgba(253,230,138,.18); font-size:20px; letter-spacing:8px; pointer-events:none; }
.constellationBoardHead { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.constellationBoardHead small { color:#c4b5fd; font-size:10px; letter-spacing:.08em; }
.constellationBoardHead h3 { margin:3px 0 2px; color:#fff7d6; font-size:19px; }
.constellationBoardHead p { margin:0; color:#a5b4fc; font-size:10px; }
.constellationStars { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:2px; min-width:132px; color:#64748b; font-size:18px; }
.constellationStars i { font-style:normal; filter:drop-shadow(0 0 0 transparent); }
.constellationStars i.awake { color:#fde68a; filter:drop-shadow(0 0 6px rgba(250,204,21,.7)); }
.constellationStars b { flex-basis:100%; color:#ddd6fe; font-size:10px; text-align:right; }
.constellationEligibility { display:flex; align-items:center; gap:7px; margin:11px 0 9px; padding:7px 9px; border:1px solid rgba(248,113,113,.38); border-radius:8px; background:rgba(127,29,29,.18); color:#fecaca; font-size:10px; }
.constellationEligibility.ready { border-color:rgba(74,222,128,.38); background:rgba(20,83,45,.2); color:#bbf7d0; }
.constellationEligibility span { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.08); font-weight:900; }
.constellationEligibility em { margin-left:auto; color:#94a3b8; font-style:normal; }
.constellationPaths { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.constellationPath { min-height:66px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr 1fr; column-gap:7px; align-items:center; padding:8px; border:1px solid #475569; border-radius:9px; background:rgba(15,23,42,.66); color:#cbd5e1; text-align:left; cursor:pointer; }
.constellationPath>span { grid-row:1/3; font-size:25px; }
.constellationPath>b { align-self:end; font-size:11px; }
.constellationPath>small { align-self:start; color:#94a3b8; font-size:9px; }
.constellationPath.active { border-color:#fde68a; background:linear-gradient(135deg,rgba(109,40,217,.5),rgba(161,98,7,.25)); color:#fff7d6; box-shadow:0 0 14px rgba(167,139,250,.23); }
.constellationPath:disabled { cursor:not-allowed; opacity:.62; }
.constellationEffect { display:flex; align-items:center; gap:10px; margin-top:8px; padding:9px 10px; border:1px solid rgba(129,140,248,.3); border-radius:9px; background:rgba(49,46,129,.22); }
.constellationEffect>span { font-size:28px; }
.constellationEffect>div { display:flex; min-width:0; flex-direction:column; gap:2px; }
.constellationEffect small { color:#a5b4fc; font-size:9px; }
.constellationEffect b { color:#e0e7ff; font-size:11px; }
.constellationEffect em { color:#fde68a; font-size:10px; font-style:normal; }
.constellationAction { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
.constellationAction>div { display:flex; flex-direction:column; }
.constellationAction small { color:#94a3b8; font-size:9px; }
.constellationAction b { color:#cffafe; font-size:13px; }
.constellationAction button { min-width:220px; padding:10px 14px; border:1px solid #fde68a; border-radius:8px; background:linear-gradient(90deg,#6d28d9,#a16207); color:#fff; font-weight:900; cursor:pointer; }
.constellationAction button:disabled { border-color:#475569; background:#273244; color:#64748b; cursor:not-allowed; }
.constellationNotice { margin:7px 0 0; color:#94a3b8; font-size:9px; text-align:right; }

@media (max-width: 480px) {
  .constellationBoard { padding:11px; }
  .constellationBoardHead { display:block; }
  .constellationStars { justify-content:flex-start; margin-top:8px; }
  .constellationStars b { flex-basis:auto; margin-left:5px; }
  .constellationEligibility { align-items:flex-start; flex-wrap:wrap; }
  .constellationEligibility em { width:100%; margin-left:25px; }
  .constellationPaths { gap:5px; }
  .constellationPath { min-height:70px; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:5px 3px; text-align:center; }
  .constellationPath>span { font-size:22px; }
  .constellationPath>b { font-size:9px; }
  .constellationAction { align-items:stretch; flex-direction:column; }
  .constellationAction button { width:100%; min-width:0; }
  .constellationNotice { text-align:left; line-height:1.45; }
  html[data-theme="default"] .patchNoteHeader { padding: 15px 14px 12px; }
  html[data-theme="default"] .patchNoteSection { padding: 10px; }
  html[data-theme="default"] .patchNoteSection ul { font-size: 11px; line-height: 1.7; }
  html[data-theme="default"] #enchantPanel .enchantGearItem { font-size: 11px; line-height: 1.45; }
}

/* 탐사 화면의 마지막 모바일 보정. 기존 공용 모바일 규칙보다 뒤에서 적용한다. */
@media (max-width: 480px) {
  .eternaElementExplore { margin:3px 0; padding:8px; border-radius:12px; }
  .eternaExploreHeader { gap:6px; padding-bottom:8px; }
  .eternaExploreCrest { flex-basis:32px; width:32px; height:32px; font-size:14px; }
  .eternaExploreTitle { gap:6px; }
  .eternaExploreTitle h2 { font-size:14px; }
  .eternaExploreTitle small { font-size:7px; }
  .eternaRewardGuide { margin-top:7px; }
  .eternaRewardGuide>summary { min-height:31px; padding:5px 8px; }
  .eternaRewardGuide .eternaRewardPolicy { grid-template-columns:1fr; gap:5px; }
  .eternaExploreSectionHead { margin-top:9px; }
  .eternaRegionGrid { grid-template-columns:1fr;gap:4px; }
  .eternaRegionCard { grid-template-columns:30px minmax(0,1fr) auto;padding:6px;gap:6px; }
  .eternaRegionCard>span { width:29px;height:29px;font-size:14px; }
  .eternaRegionCard em { display:none; }
  .eternaDifficultyGrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .eternaDifficultyCard { display:grid; grid-template-columns:22px minmax(0,1fr); min-height:42px; gap:4px; padding:5px; }
  .eternaDifficultyCard>span { width:22px; height:22px; font-size:10px; }
  .eternaDifficultyCard small,.eternaDifficultyCard strong { display:none; }
  .eternaDifficultyCard b { font-size:8px; }
  .eternaDifficultyCard em { font-size:6px; }
  .eternaElementGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
  .eternaElementCard { min-height:45px; padding:6px; }
  .eternaSelectedZone { padding:8px; }
  .eternaCurrentRecord { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .eternaCurrentRecord>div { grid-column:1/-1; }
  .eternaSecondaryContent { gap:4px; }
  .eternaSecondaryPanel>summary { grid-template-columns:24px minmax(0,1fr); min-height:40px; padding:6px; }
  .eternaSecondaryPanel>summary>span { width:23px; height:23px; font-size:12px; }
  .eternaSecondaryPanel>summary em { display:none; }
  .eternaSecondaryBody { padding:5px; }
  .eternaExploreHeader,.eternaRewardGuide,.eternaExploreSectionHead,.eternaDifficultyCard,.eternaElementCard,.eternaSelectedZone,.eternaRecordBook,.eternaSecondaryPanel { animation-duration:.24s; }
}

@media (prefers-reduced-motion: reduce) {
  .eternaElementExplore,.eternaExploreCrest,.eternaExploreStars i,.eternaExploreHeader,.eternaRewardGuide,.eternaExploreSectionHead,.eternaDifficultyCard,.eternaElementCard,.eternaSelectedZone,.eternaRecordBook,.eternaSecondaryPanel,.eternaRewardGuide[open] .eternaRewardPolicy,.eternaZoneInfo[open]>*:not(summary),.eternaRecordBook[open] .eternaRecordBookBody,.eternaSecondaryPanel[open] .eternaSecondaryBody,.eternaSecondaryPanel[open] .constellationPath,.eternaSecondaryPanel[open] .eternaExpeditionMission,.eternaElementStart::after { animation:none !important; }
}
/* ── 에테르나 STEP 7: Lv.400 공명 장비·개척 증표 교환소 ── */
.itemEternaResonance{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;margin:7px 0;padding:8px 9px;border:1px solid rgba(103,232,249,.55);border-radius:7px;background:linear-gradient(135deg,rgba(8,47,73,.72),rgba(49,46,129,.45));color:#cffafe}
.itemEternaResonance span{grid-row:1/3;font-weight:900;color:#67e8f9}.itemEternaResonance b{color:#fff}.itemEternaResonance em,.itemEternaResonance small{font-style:normal;color:#a5f3fc}.itemEternaResonance small{grid-column:1/-1;color:#94a3b8}
.itemEternaResonance.astra{border-color:rgba(253,230,138,.7);background:linear-gradient(135deg,rgba(88,28,135,.68),rgba(8,47,73,.65));box-shadow:inset 0 0 18px rgba(196,181,253,.12)}.itemEternaResonance.astra span{color:#fde68a}
.astraEquipmentIcon{display:inline-block;width:28px;height:28px;flex:0 0 28px;vertical-align:middle;background-image:var(--astra-equipment-sheet);background-repeat:no-repeat;background-size:400% 200%;image-rendering:auto;filter:drop-shadow(0 0 5px rgba(103,232,249,.55))}
.astraEquipmentIcon0{background-position:0 0}.astraEquipmentIcon1{background-position:33.333% 0}.astraEquipmentIcon2{background-position:66.667% 0}.astraEquipmentIcon3{background-position:100% 0}.astraEquipmentIcon4{background-position:0 100%}.astraEquipmentIcon5{background-position:33.333% 100%}.astraEquipmentIcon6{background-position:66.667% 100%}.astraEquipmentIcon7{background-position:100% 100%}
.eternaResonanceExchange{margin:14px 0;padding:16px;border:1px solid rgba(103,232,249,.5);border-radius:16px;background:radial-gradient(circle at 90% 0,rgba(124,58,237,.22),transparent 38%),linear-gradient(145deg,rgba(6,24,45,.97),rgba(19,20,52,.97));box-shadow:0 14px 34px rgba(2,8,23,.3);color:#dbeafe}
.eternaResonanceExchangeHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.eternaResonanceExchangeHead small{color:#67e8f9;font-weight:900;letter-spacing:.08em}.eternaResonanceExchangeHead h3{margin:3px 0;font-size:18px;color:#fff}.eternaResonanceExchangeHead p{margin:0;color:#94a3b8;font-size:11px}.eternaResonanceExchangeHead>strong{padding:8px 11px;border:1px solid rgba(251,191,36,.45);border-radius:10px;background:rgba(120,53,15,.22);color:#fde68a;white-space:nowrap}
.eternaResonanceSets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.eternaResonanceSets span{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:1px solid color-mix(in srgb,var(--set) 55%,transparent);border-radius:8px;background:rgba(15,23,42,.68);font-weight:800;color:var(--set)}.eternaResonanceSets i{width:7px;height:7px;border-radius:50%;background:var(--set);box-shadow:0 0 9px var(--set)}
.eternaResonanceRates{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.eternaResonanceRates span{padding:5px 7px;border-radius:6px;background:rgba(15,23,42,.72);color:#94a3b8;font-size:10px}.eternaResonanceRates b{color:#e0f2fe}
.eternaRandomSetExchange{width:100%;padding:11px;border:1px solid #fbbf24;border-radius:9px;background:linear-gradient(135deg,#92400e,#4338ca);color:#fff;font-weight:900}.eternaRandomSetExchange b{float:right;color:#fde68a}.eternaResonanceExchange details{margin-top:8px;border:1px solid rgba(148,163,184,.25);border-radius:9px;background:rgba(15,23,42,.5)}.eternaResonanceExchange summary{display:flex;justify-content:space-between;padding:9px 11px;cursor:pointer;font-weight:800}.eternaResonanceExchange summary b{color:#fde68a}.eternaResonanceSlotGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 9px 9px}.eternaResonanceSlotGrid button{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 5px;border:1px solid rgba(103,232,249,.4);border-radius:7px;background:#10243c;color:#e0f2fe;font-weight:800}.eternaResonanceSlotGrid small{color:#fde68a}.eternaResonanceProtection{display:block;margin-top:8px;color:#94a3b8;text-align:center}
@media(max-width:640px){.eternaResonanceExchange{padding:12px}.eternaResonanceExchangeHead{display:grid}.eternaResonanceExchangeHead>strong{justify-self:start}.eternaResonanceSets{grid-template-columns:1fr}.eternaResonanceSlotGrid{grid-template-columns:repeat(2,1fr)}.eternaResonanceRates span{flex:1 1 42%;text-align:center}}

/* 에테르나 속성 탐사 — 초행자 상성 안내 */
.eternaElementGuide{margin:12px 0 14px;padding:14px;border:1px solid rgba(103,232,249,.46);border-radius:14px;background:radial-gradient(circle at 100% 0,rgba(56,189,248,.16),transparent 38%),linear-gradient(145deg,rgba(8,28,48,.96),rgba(27,25,65,.94));color:#dbeafe;box-shadow:0 10px 28px rgba(2,8,23,.24)}
.eternaContentNav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:11px 0 13px;padding:5px;border:1px solid rgba(103,232,249,.2);border-radius:13px;background:rgba(2,8,23,.5)}.eternaContentNav.gm{grid-template-columns:repeat(3,minmax(0,1fr))}.eternaContentNav button{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;min-height:55px;padding:8px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:#94a3b8;text-align:left;cursor:pointer}.eternaContentNav button>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:rgba(51,65,85,.45);font-size:17px}.eternaContentNav button b,.eternaContentNav button small{display:block}.eternaContentNav button b{color:#dbeafe;font-size:11px}.eternaContentNav button small{margin-top:2px;color:#71869c;font-size:7px}.eternaContentNav button em{position:absolute;right:6px;top:5px;color:#a5f3fc;font-size:6px;font-style:normal}.eternaContentNav button.active{border-color:rgba(103,232,249,.52);background:linear-gradient(135deg,rgba(14,116,144,.3),rgba(79,70,229,.28));box-shadow:inset 0 0 18px rgba(103,232,249,.07)}.eternaContentNav button.active>span{background:linear-gradient(135deg,#0e7490,#4338ca);box-shadow:0 0 13px rgba(103,232,249,.23)}.eternaContentNav button.active b{color:#fff}.eternaContentNav button.gmOnly{border-color:rgba(196,181,253,.18)}.eternaContentNav button.gmOnly>span{background:rgba(88,28,135,.45)}
.eternaContentPane{animation:eternaPaneSwitch .24s ease-out both}.eternaContentPane>.eternaQuickGuide:first-child{margin-top:0}.eternaPaneIntro{display:flex;align-items:flex-start;gap:11px;margin:2px 0 10px;padding:12px;border:1px solid rgba(196,181,253,.34);border-radius:12px;background:linear-gradient(135deg,rgba(49,46,129,.38),rgba(14,116,144,.18))}.eternaPaneIntro>span{display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;border-radius:11px;background:rgba(76,29,149,.55);color:#fde68a;font-size:21px}.eternaPaneIntro small{color:#c4b5fd;font-size:8px;font-weight:900}.eternaPaneIntro h3{margin:2px 0;color:#fff;font-size:13px}.eternaPaneIntro p{margin:3px 0 0;color:#a9bcd2;font-size:9px;line-height:1.5}.eternaContentPane.constellation>.constellationBoard{margin:0}.eternaGmOnlyBanner{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:10px;border:1px solid rgba(248,113,113,.3);border-radius:10px;background:rgba(69,10,10,.22)}.eternaGmOnlyBanner>span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#991b1b;color:#fff;font-size:10px;font-weight:900}.eternaGmOnlyBanner b,.eternaGmOnlyBanner small{display:block}.eternaGmOnlyBanner b{color:#fecaca;font-size:10px}.eternaGmOnlyBanner small{margin-top:2px;color:#94a3b8;font-size:8px}@keyframes eternaPaneSwitch{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.eternaQuickGuide{margin:10px 0 8px;padding:12px;border:1px solid rgba(129,140,248,.42);border-radius:13px;background:linear-gradient(135deg,rgba(30,41,90,.88),rgba(8,47,73,.72));box-shadow:inset 0 0 24px rgba(99,102,241,.08)}
.eternaQuickGuideHead{display:flex;align-items:flex-start;gap:10px}.eternaQuickGuideHead>span{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid rgba(253,230,138,.45);border-radius:11px;background:rgba(30,27,75,.7);font-size:20px}.eternaQuickGuideHead small,.eternaQuickGuideHead b{display:block}.eternaQuickGuideHead small{color:#a5b4fc;font-size:8px;font-weight:900;letter-spacing:.1em}.eternaQuickGuideHead b{margin-top:2px;color:#fff;font-size:13px}.eternaQuickGuideHead p{margin:3px 0 0;color:#b7c8dc;font-size:9px;line-height:1.45}
.eternaQuickSteps{display:flex;align-items:stretch;gap:6px;margin-top:10px}.eternaQuickSteps>span{display:grid;grid-template-columns:23px 1fr;grid-template-rows:auto auto;align-items:center;flex:1;min-width:0;padding:7px;border:1px solid rgba(103,232,249,.2);border-radius:8px;background:rgba(5,15,32,.46)}.eternaQuickSteps b{grid-row:1/3;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#4338ca;color:#fff;font-size:9px}.eternaQuickSteps em{color:#e0f2fe;font-size:9px;font-style:normal;font-weight:900}.eternaQuickSteps small{color:#7890a8;font-size:7px}.eternaQuickSteps>i{align-self:center;color:#67e8f9;font-size:17px;font-style:normal}
.eternaQuickRule{margin-top:8px;padding-top:8px;border-top:1px solid rgba(148,163,184,.14);color:#8fa6bc;font-size:8px;text-align:center}.eternaQuickRule span{color:#a5f3fc;font-weight:900}
details.eternaElementGuide{overflow:hidden;padding:0}details.eternaElementGuide>summary{display:grid;grid-template-columns:32px minmax(90px,.7fr) minmax(160px,1.3fr) auto;align-items:center;gap:8px;padding:10px 11px;list-style:none;cursor:pointer}details.eternaElementGuide>summary::-webkit-details-marker{display:none}details.eternaElementGuide>summary>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(15,23,42,.65);font-size:17px}details.eternaElementGuide>summary small,details.eternaElementGuide>summary b{display:block}details.eternaElementGuide>summary small{color:#7dd3fc;font-size:7px}details.eternaElementGuide>summary b{color:#fff;font-size:10px}details.eternaElementGuide>summary strong{padding:6px 8px;border-radius:7px;font-size:9px;text-align:center}details.eternaElementGuide>summary strong.advantage{background:rgba(6,78,59,.7);color:#6ee7b7}details.eternaElementGuide>summary strong.disadvantage{background:rgba(127,29,29,.65);color:#fca5a5}details.eternaElementGuide>summary strong.neutral{background:rgba(51,65,85,.72);color:#cbd5e1}details.eternaElementGuide>summary>em{color:#94a3b8;font-size:8px;font-style:normal}details.eternaElementGuide[open]>summary{border-bottom:1px solid rgba(103,232,249,.18)}details.eternaElementGuide[open]>summary>em{font-size:0}details.eternaElementGuide[open]>summary>em::after{content:'접기';font-size:8px}.eternaElementGuideBody{padding:11px}.eternaElementGuideBody>p{margin:8px 2px 0;color:#94a3b8;font-size:10px;line-height:1.5;text-align:center}
.eternaAdvancedHub{margin:11px 0 0;overflow:hidden;border:1px solid rgba(196,181,253,.34);border-radius:13px;background:rgba(13,13,36,.72)}.eternaAdvancedHub>summary{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:11px 12px;list-style:none;cursor:pointer}.eternaAdvancedHub>summary::-webkit-details-marker{display:none}.eternaAdvancedHub>summary>span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#312e81,#0e7490);font-size:19px}.eternaAdvancedHub>summary small,.eternaAdvancedHub>summary b,.eternaAdvancedHub>summary p{display:block;margin:0}.eternaAdvancedHub>summary small{color:#c4b5fd;font-size:7px;font-weight:900}.eternaAdvancedHub>summary b{margin:2px 0;color:#fff;font-size:11px}.eternaAdvancedHub>summary p{color:#71869c;font-size:7px}.eternaAdvancedHub>summary strong{padding:5px 7px;border-radius:7px;background:rgba(30,41,59,.7);color:#a5f3fc;font-size:8px}.eternaAdvancedHub>summary>em{color:#94a3b8;font-size:8px;font-style:normal}.eternaAdvancedHub[open]>summary{border-bottom:1px solid rgba(196,181,253,.17)}.eternaAdvancedHub[open]>summary>em{font-size:0}.eternaAdvancedHub[open]>summary>em::after{content:'접기';font-size:8px}.eternaAdvancedBody{padding:10px}.eternaAdvancedBody>.eternaExpeditionBoard,.eternaAdvancedBody>.eternaBossBoard,.eternaAdvancedBody>.eternaResonanceExchange,.eternaAdvancedBody>.eternaDefenseBoard,.eternaAdvancedBody>.eternaAstraFinalBoard{margin:10px 0}.eternaAdvancedRoadmap{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px;border:1px solid rgba(103,232,249,.15);border-radius:9px;background:rgba(2,6,23,.36)}.eternaAdvancedRoadmap span{display:flex;align-items:center;gap:4px;color:#7890a8;font-size:7px}.eternaAdvancedRoadmap b{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#334155;color:#94a3b8}.eternaAdvancedRoadmap span.done{color:#a5f3fc}.eternaAdvancedRoadmap span.done b{background:#0e7490;color:#ecfeff}.eternaAdvancedRoadmap i{color:#475569;font-style:normal}
.eternaElementGuideHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.eternaElementGuideHead small{color:#7dd3fc;font-size:9px;font-weight:800}.eternaElementGuideHead h3{margin:2px 0 0;color:#fff;font-size:16px}.eternaElementGuideHead>span{padding:5px 8px;border:1px solid rgba(251,191,36,.42);border-radius:999px;background:rgba(120,53,15,.2);color:#fde68a;font-size:10px;font-weight:900;white-space:nowrap}
.eternaCurrentMatchup{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:8px;margin:11px 0;padding:9px 10px;border:1px solid rgba(148,163,184,.3);border-radius:9px;background:rgba(15,23,42,.68);font-size:11px}.eternaCurrentMatchup>span{font-weight:800}.eternaCurrentMatchup>i{color:#64748b;font-style:normal}.eternaCurrentMatchup>b{padding:5px 7px;border-radius:6px;text-align:center}.eternaCurrentMatchup.advantage>b{background:rgba(6,78,59,.75);color:#6ee7b7}.eternaCurrentMatchup.disadvantage>b{background:rgba(127,29,29,.68);color:#fca5a5}.eternaCurrentMatchup.neutral>b{background:rgba(51,65,85,.75);color:#cbd5e1}
.eternaElementCycle{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border-radius:9px;background:rgba(2,6,23,.38)}.eternaElementCycle span{display:grid;place-items:center;min-width:56px;font-weight:900}.eternaElementCycle small{color:#94a3b8;font-size:9px;font-weight:500}.eternaElementCycle i{color:#fbbf24;font-size:9px;font-style:normal}
.eternaElementRecommendations{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.eternaElementRecommendations span{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:7px 8px;border:1px solid rgba(148,163,184,.22);border-radius:7px;background:rgba(15,23,42,.52);font-size:10px}.eternaElementRecommendations b{color:#e2e8f0}.eternaElementRecommendations em{color:#a5f3fc;font-style:normal;text-align:right}.eternaElementGuide>p{margin:8px 2px 0;color:#94a3b8;font-size:10px;line-height:1.5;text-align:center}
@media(max-width:640px){.eternaElementGuide{padding:11px}.eternaElementGuideHead{align-items:flex-start}.eternaElementGuideHead>span{white-space:normal;text-align:right}.eternaCurrentMatchup{grid-template-columns:1fr auto 1fr}.eternaCurrentMatchup>b{grid-column:1/-1}.eternaElementCycle{gap:3px;overflow-x:auto;justify-content:flex-start}.eternaElementCycle span{min-width:48px}.eternaElementRecommendations{grid-template-columns:1fr 1fr}.eternaElementRecommendations span{display:grid}.eternaElementRecommendations em{text-align:left}}

/* 상성 가이드 2차 정리: 현재 판정 + 단순 3열 표만 표시 */
.eternaCurrentMatchup{grid-template-columns:auto minmax(105px,1fr) auto minmax(105px,1fr) auto}.eternaCurrentMatchup>small{color:#94a3b8;font-size:9px}.eternaCurrentMatchup>span{white-space:normal}.eternaCurrentMatchup>i{font-weight:900;text-transform:uppercase}.eternaCurrentMatchup>b{white-space:nowrap}
.eternaElementGuideTable{overflow:hidden;border:1px solid rgba(148,163,184,.26);border-radius:9px;background:rgba(2,6,23,.3)}.eternaElementGuideTable header,.eternaElementGuideTable>div{display:grid;grid-template-columns:1fr 1.45fr .75fr;align-items:center;gap:8px;padding:7px 10px}.eternaElementGuideTable header{background:rgba(15,23,42,.9);color:#94a3b8;font-size:9px;font-weight:800}.eternaElementGuideTable>div{border-top:1px solid rgba(148,163,184,.13);font-size:10px}.eternaElementGuideTable>div.selected{background:linear-gradient(90deg,rgba(14,116,144,.4),rgba(67,56,202,.28));box-shadow:inset 3px 0 #67e8f9}.eternaElementGuideTable>div b{color:#fff}.eternaElementGuideTable>div i{display:none}.eternaElementGuideTable>div strong{color:#a5f3fc}.eternaElementGuideTable>div em{color:#fde68a;font-style:normal;text-align:right}
@media(max-width:640px){.eternaContentNav,.eternaContentNav.gm{grid-template-columns:1fr}.eternaContentNav button{min-height:48px;grid-template-columns:30px 1fr}.eternaContentNav button>span{width:29px;height:29px;font-size:15px}.eternaContentNav button b{font-size:10px}.eternaContentNav button small{font-size:7px}.eternaPaneIntro{padding:10px}.eternaPaneIntro p{font-size:8px}.eternaQuickGuide{padding:10px}.eternaQuickSteps{display:grid;grid-template-columns:1fr}.eternaQuickSteps>i{display:none}.eternaQuickSteps>span{min-height:38px}.eternaQuickRule{text-align:left;line-height:1.45}details.eternaElementGuide>summary{grid-template-columns:30px 1fr auto}details.eternaElementGuide>summary>strong{grid-column:1/-1;text-align:left}details.eternaElementGuide>summary>em{grid-column:3;grid-row:1}.eternaAdvancedHub>summary{grid-template-columns:34px 1fr auto}.eternaAdvancedHub>summary>strong{grid-column:2/-1;justify-self:start}.eternaAdvancedHub>summary>em{grid-column:3;grid-row:1}.eternaAdvancedRoadmap{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch}.eternaAdvancedRoadmap i{display:none}.eternaCurrentMatchup{grid-template-columns:1fr auto 1fr}.eternaCurrentMatchup>small{grid-column:1/-1}.eternaCurrentMatchup>b{grid-column:1/-1;white-space:normal}.eternaElementGuideTable header,.eternaElementGuideTable>div{grid-template-columns:.9fr 1.35fr .65fr;padding:7px 8px;gap:5px}.eternaElementGuideTable>div{font-size:9px}.eternaElementGuideTable>div strong{line-height:1.35}}

/* STEP 8 · 성좌 수호전 */
.eternaDefenseBoard{position:relative;overflow:hidden;margin:14px 0;padding:16px;border:1px solid rgba(165,243,252,.56);border-radius:16px;background:radial-gradient(circle at 88% 4%,rgba(34,211,238,.21),transparent 32%),linear-gradient(145deg,rgba(5,24,46,.97),rgba(35,25,71,.96));color:#dbeafe;box-shadow:0 14px 34px rgba(2,8,23,.32)}.eternaDefenseBoard::after{content:'';position:absolute;right:-42px;top:-48px;width:130px;height:130px;border:1px solid rgba(103,232,249,.28);border-radius:50%;box-shadow:0 0 0 18px rgba(99,102,241,.06),0 0 0 38px rgba(34,211,238,.04);pointer-events:none}.eternaDefenseHead{position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px}.eternaDefenseHead small{color:#67e8f9;font-size:9px;font-weight:900;letter-spacing:.07em}.eternaDefenseHead h3{margin:3px 0;color:#fff;font-size:18px}.eternaDefenseHead p{margin:0;color:#94a3b8;font-size:10px;line-height:1.5}.eternaDefenseHead>strong{align-self:flex-start;padding:6px 9px;border:1px solid rgba(251,191,36,.45);border-radius:999px;background:rgba(120,53,15,.22);color:#fde68a;font-size:10px;white-space:nowrap}.eternaDefenseRules{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}.eternaDefenseRules span{padding:8px 6px;border:1px solid rgba(148,163,184,.22);border-radius:8px;background:rgba(15,23,42,.58);color:#94a3b8;font-size:9px;text-align:center}.eternaDefenseRules b{display:block;margin-top:2px;color:#e0f2fe;font-size:11px}.eternaDefenseReward{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid rgba(74,222,128,.32);border-radius:9px;background:rgba(6,78,59,.2);font-size:10px}.eternaDefenseReward>span{color:#86efac;font-weight:900}.eternaDefenseReward>b{color:#fff}.eternaDefenseReward>em{margin-left:auto;color:#94a3b8;font-style:normal}.eternaDefenseBoard>button{width:100%;margin-top:9px;padding:11px;border:1px solid #67e8f9;border-radius:9px;background:linear-gradient(90deg,#0e7490,#4338ca);color:#fff;font-weight:900}.eternaDefenseBoard>button:disabled{border-color:#475569;background:#334155;color:#94a3b8}.eternaDefenseBoard>small{display:block;margin-top:7px;color:#64748b;text-align:center}
.eternaDefenseResult{max-width:440px;text-align:center;background:linear-gradient(155deg,#061a2e,#27194c);border:1px solid #67e8f9;color:#e2e8f0}.eternaDefenseResultIcon{font-size:42px}.eternaDefenseResult h2{margin:3px 0;color:#a5f3fc}.eternaDefenseResult p{color:#94a3b8;font-size:11px}.eternaDefenseResultKills{display:grid;grid-template-columns:1fr auto;gap:4px;padding:11px;margin:10px 0;border-radius:9px;background:rgba(15,23,42,.7);text-align:left}.eternaDefenseResultKills b{color:#fff}.eternaDefenseResultKills em{grid-column:1/-1;color:#67e8f9;font-style:normal}.eternaDefenseResultRewards{display:grid;gap:6px;margin-bottom:10px}.eternaDefenseResultRewards span{padding:9px;border:1px solid rgba(103,232,249,.3);border-radius:8px;background:rgba(8,47,73,.5)}.eternaDefenseResultRewards span:last-child b{color:var(--loot,#fff)}.eternaDefenseResult>button{width:100%;padding:10px;border:1px solid #67e8f9;border-radius:8px;background:#0369a1;color:#fff;font-weight:900}
@media(max-width:640px){.eternaDefenseBoard{padding:12px}.eternaDefenseHead{display:grid}.eternaDefenseHead>strong{justify-self:start}.eternaDefenseRules{grid-template-columns:1fr 1fr}.eternaDefenseReward{display:grid;grid-template-columns:1fr 1fr}.eternaDefenseReward>em{grid-column:1/-1;margin-left:0}}

/* FINAL STEP · 잠든 성좌 아스트라 */
.eternaAstraFinalBoard{position:relative;overflow:hidden;margin:16px 0;padding:18px;border:1px solid rgba(196,181,253,.66);border-radius:18px;background:radial-gradient(circle at 86% 12%,rgba(167,139,250,.28),transparent 31%),radial-gradient(circle at 8% 90%,rgba(34,211,238,.13),transparent 35%),linear-gradient(150deg,#090f25,#261844 62%,#101d3c);color:#ede9fe;box-shadow:0 18px 44px rgba(2,6,23,.42),inset 0 0 42px rgba(139,92,246,.08)}.eternaAstraFinalSeal{position:absolute;right:-30px;top:-42px;width:180px;height:180px;border:1px solid rgba(221,214,254,.2);border-radius:50%;display:grid;place-items:center;animation:eternaAstraSpin 18s linear infinite;pointer-events:none}.eternaAstraFinalSeal::before,.eternaAstraFinalSeal::after{content:'';position:absolute;border:1px solid rgba(103,232,249,.18);border-radius:50%}.eternaAstraFinalSeal::before{inset:22px}.eternaAstraFinalSeal::after{inset:47px}.eternaAstraFinalSeal i{position:absolute;width:1px;height:100%;background:linear-gradient(transparent,rgba(196,181,253,.3),transparent);transform:rotate(45deg)}.eternaAstraFinalSeal span{font-size:32px;color:#fde68a;text-shadow:0 0 18px #c4b5fd}.eternaAstraFinalHead{position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px}.eternaAstraFinalHead small{color:#c4b5fd;font-size:9px;font-weight:900;letter-spacing:.12em}.eternaAstraFinalHead h3{margin:4px 0;color:#fff;font-size:20px;text-shadow:0 0 13px rgba(196,181,253,.48)}.eternaAstraFinalHead p{max-width:470px;margin:0;color:#a5b4c8;font-size:10px;line-height:1.55}.eternaAstraFinalHead>strong{align-self:flex-start;padding:6px 10px;border:1px solid rgba(253,230,138,.46);border-radius:999px;background:rgba(88,28,135,.35);color:#fde68a;font-size:10px}.eternaAstraRequirements{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0}.eternaAstraRequirements span{padding:8px;border:1px solid rgba(100,116,139,.35);border-radius:8px;background:rgba(15,23,42,.62);color:#94a3b8;font-size:9px;text-align:center}.eternaAstraRequirements span.ready{border-color:rgba(74,222,128,.4);color:#86efac}.eternaAstraRequirements b{display:block;margin-top:2px;color:#fff;font-size:11px}.eternaAstraWeekly{position:relative;z-index:1;display:flex;align-items:center;gap:9px;padding:10px;border:1px solid rgba(196,181,253,.3);border-radius:10px;background:rgba(30,27,75,.5);font-size:10px}.eternaAstraWeekly div{margin-right:auto}.eternaAstraWeekly small{display:block;color:#94a3b8}.eternaAstraWeekly div b{color:#ddd6fe}.eternaAstraWeekly>span{padding:5px 7px;border-radius:6px;background:rgba(15,23,42,.65);color:#e0e7ff}.eternaAstraWeekly.available{border-color:rgba(253,230,138,.45);box-shadow:inset 0 0 18px rgba(251,191,36,.06)}.eternaAstraWeekly.claimed{filter:saturate(.65)}.eternaAstraFinalBoard>button{position:relative;z-index:1;width:100%;margin-top:10px;padding:12px;border:1px solid #c4b5fd;border-radius:10px;background:linear-gradient(90deg,#6d28d9,#0e7490);color:#fff;font-weight:900;letter-spacing:.03em}.eternaAstraFinalBoard>button:disabled{border-color:#475569;background:#334155;color:#94a3b8}.eternaAstraFinalBoard>small{position:relative;z-index:1;display:block;margin-top:7px;color:#64748b;text-align:center}@keyframes eternaAstraSpin{to{transform:rotate(360deg)}}
.eternaAstraResult{max-width:460px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(139,92,246,.3),transparent 38%),linear-gradient(155deg,#080e24,#281747);border:1px solid #c4b5fd;color:#e2e8f0}.eternaAstraResultStar{font-size:54px;color:#fde68a;text-shadow:0 0 22px #c4b5fd}.eternaAstraResult>small{color:#c4b5fd;letter-spacing:.12em}.eternaAstraResult h2{margin:5px 0;color:#fff}.eternaAstraResult p{color:#a5b4c8;font-size:11px}.eternaAstraClearInfo{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}.eternaAstraClearInfo span,.eternaAstraRewards span{padding:9px;border:1px solid rgba(196,181,253,.28);border-radius:8px;background:rgba(30,27,75,.48)}.eternaAstraClearInfo b{display:block;color:#fff}.eternaAstraTitleReward{margin:8px 0;padding:9px;border:1px solid rgba(253,230,138,.46);border-radius:8px;background:rgba(120,53,15,.2);color:#fde68a;font-weight:900}.eternaAstraRewards{display:grid;gap:7px;margin:8px 0 11px}.eternaAstraRewards span:last-child b{color:var(--loot,#c4b5fd)}.eternaAstraPractice{margin:8px 0;padding:9px;border-radius:8px;background:rgba(51,65,85,.45);color:#94a3b8}.eternaAstraResult>button{width:100%;padding:11px;border:1px solid #c4b5fd;border-radius:8px;background:#6d28d9;color:#fff;font-weight:900}
@media(max-width:640px){.eternaAstraFinalBoard{padding:13px}.eternaAstraFinalHead{display:grid}.eternaAstraFinalHead>strong{justify-self:start}.eternaAstraRequirements{grid-template-columns:1fr 1fr}.eternaAstraWeekly{display:grid;grid-template-columns:1fr 1fr}.eternaAstraWeekly div{grid-column:1/-1}.eternaAstraClearInfo{grid-template-columns:1fr}}

/* 2026-07-23 · 오르엔 공방 일괄 강화 / 네리아 재화 교환소 / 탐사 요약 정리 */
.panelCurrencyItem.aether b{color:#67e8f9}
.eternaEnhanceGuide{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}.eternaEnhanceGuide>div{padding:8px;border:1px solid rgba(129,140,248,.25);border-radius:8px;background:rgba(15,23,42,.62);text-align:center}.eternaEnhanceGuide b,.eternaEnhanceGuide span{display:block}.eternaEnhanceGuide b{color:#e0e7ff;font-size:10px}.eternaEnhanceGuide span{margin-top:2px;color:#8fa4ba;font-size:8px}.eternaBatchOpenBtn{width:100%;margin:2px 0 9px;padding:10px;border:1px solid #f59e0b;border-radius:9px;background:linear-gradient(90deg,#92400e,#4338ca);color:#fff;font-weight:900;cursor:pointer}
.eternaEnhanceRow{display:grid!important;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px!important;min-height:76px!important}.eternaEnhanceRow.active{border-color:rgba(129,140,248,.58)!important}.eternaEnhanceSlotIcon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(79,70,229,.2);font-size:17px}.eternaEnhanceSlotCopy{min-width:0}.eternaEnhanceSlotCopy>div{display:flex;align-items:baseline;gap:5px;min-width:0}.eternaEnhanceSlotCopy strong{color:#fff;font-size:11px}.eternaEnhanceSlotCopy b{color:#a5b4fc}.eternaEnhanceSlotCopy>div small{color:#67e8f9;font-size:8px}.eternaEnhanceSlotCopy>small{display:block;margin-top:4px;color:#94a3b8;font-size:9px}.eternaEnhanceSlotCopy>small.blocked{color:#f87171}.eternaEnhanceOneBtn{padding:8px 9px;border:1px solid #f59e0b;border-radius:7px;background:#92400e;color:#fff;font-size:9px;font-weight:800;white-space:nowrap}.eternaEnhanceOneBtn:disabled{border-color:#475569;background:#334155;color:#94a3b8}
.eternaBatchModal{width:min(94vw,440px);max-height:86vh;overflow:auto;text-align:left;border-color:#818cf8;background:linear-gradient(155deg,#0d1730,#241b43)}.eternaBatchHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.eternaBatchHead small,.eternaBatchResult>small{color:#a5b4fc}.eternaBatchHead h2,.eternaBatchResult h2{margin:2px 0;color:#fff}.eternaBatchHead>b{color:#67e8f9}.eternaBatchModal>p{color:#94a3b8;font-size:10px}.eternaBatchActions{display:flex;gap:6px;margin:8px 0}.eternaBatchActions button{flex:1;padding:7px;border:1px solid #475569;border-radius:7px;background:#1e293b;color:#cbd5e1}.eternaBatchList{display:grid;grid-template-columns:1fr 1fr;gap:6px}.eternaBatchList label{display:grid;grid-template-columns:auto 25px 1fr;align-items:center;gap:5px;padding:8px;border:1px solid #334155;border-radius:8px;background:rgba(15,23,42,.72);cursor:pointer}.eternaBatchList label.selected{border-color:#818cf8;background:rgba(67,56,202,.23)}.eternaBatchList label>span{font-size:15px}.eternaBatchList label>strong{font-size:10px}.eternaBatchList label>small{grid-column:2/-1;color:#94a3b8;font-size:8px}.eternaBatchTotal{display:flex;justify-content:space-between;margin:9px 0;padding:9px;border-radius:8px;background:rgba(8,47,73,.48)}.eternaBatchTotal span{color:#a5f3fc}.eternaBatchTotal b{color:#67e8f9}.eternaBatchResult{width:min(92vw,400px);text-align:center;border-color:#818cf8;background:linear-gradient(155deg,#0d1730,#241b43)}.eternaBatchResultSummary{display:grid;gap:3px;margin:9px 0;padding:10px;border-radius:9px;background:rgba(15,23,42,.68)}.eternaBatchResultSummary b{color:#fde68a}.eternaBatchResultSummary span{color:#94a3b8;font-size:9px}.eternaBatchResultList{display:grid;gap:5px;margin-bottom:10px;text-align:left}.eternaBatchResultList>div{display:flex;justify-content:space-between;padding:7px 8px;border-radius:7px;background:rgba(15,23,42,.7);font-size:10px}.eternaBatchResultList .success b{color:#86efac}.eternaBatchResultList .fail b{color:#fca5a5}.eternaBatchResult>.confirmModalOk{width:100%}
.eternaCompactStats{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.eternaCompactStats span{flex:1 1 auto;padding:6px 8px;border-radius:7px;background:rgba(15,23,42,.6);color:#cbd5e1;font-size:9px;text-align:center}.eternaCompactRule{margin-top:6px;color:#7f95aa;font-size:8px;text-align:center}
.eternaExchange{margin:10px 0;padding:16px;border:1px solid rgba(103,232,249,.48);border-radius:16px;background:radial-gradient(circle at 93% 0,rgba(79,70,229,.25),transparent 36%),linear-gradient(145deg,#061829,#17183c);color:#dbeafe;box-shadow:0 14px 38px rgba(2,8,23,.34)}.eternaExchangeHeader{display:flex;justify-content:space-between;gap:14px;padding-bottom:11px;border-bottom:1px solid rgba(103,232,249,.17)}.eternaExchangeHeader small{color:#67e8f9;font-size:9px;font-weight:900;letter-spacing:.08em}.eternaExchangeHeader h2{margin:2px 0;color:#fff;font-size:19px}.eternaExchangeHeader p{margin:0;color:#8da3b9;font-size:10px}.eternaRateClock{align-self:flex-start;padding:8px 10px;border:1px solid rgba(253,230,138,.36);border-radius:9px;background:rgba(120,53,15,.17);text-align:right;white-space:nowrap}.eternaRateClock b,.eternaRateClock span{display:block}.eternaRateClock b{color:#fde68a;font-size:10px}.eternaRateClock span{margin-top:2px;color:#94a3b8;font-size:8px}.eternaRateNotice{display:flex;justify-content:space-between;gap:8px;margin:9px 0;padding:7px 9px;border-radius:8px;background:rgba(15,23,42,.66);font-size:9px}.eternaRateNotice span{color:#94a3b8}.eternaRateNotice b{color:#a5f3fc}.eternaExchangeGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.eternaExchangeCard{padding:13px;border:1px solid rgba(148,163,184,.25);border-radius:12px;background:rgba(15,23,42,.72);text-align:center}.eternaExchangeCard.sell{border-color:rgba(34,211,238,.35)}.eternaExchangeCard.buy{border-color:rgba(167,139,250,.4)}.eternaExchangeDirection{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:5px;font-size:22px}.eternaExchangeDirection i{color:#64748b;font-size:13px;font-style:normal}.eternaExchangeCard>small{color:#94a3b8}.eternaExchangeCard h3{margin:4px 0;color:#fff;font-size:13px}.eternaExchangeCard>strong{color:#fde68a}.eternaExchangeQty{display:grid;grid-template-columns:30px 54px 30px 1fr;gap:4px;margin:10px 0}.eternaExchangeQty button,.eternaExchangeQty input{min-width:0;padding:6px 3px;border:1px solid #475569;border-radius:6px;background:#0f172a;color:#e2e8f0;text-align:center}.eternaExchangeQty .max{color:#a5f3fc;font-size:9px}.eternaExchangeTotal{display:flex;justify-content:space-between;gap:6px;margin-bottom:7px;padding:7px;border-radius:7px;background:rgba(2,6,23,.42);font-size:9px}.eternaExchangeTotal span{color:#94a3b8}.eternaExchangeTotal b{color:#fff}.eternaExchangeSubmit{width:100%;padding:9px;border:1px solid #67e8f9;border-radius:8px;background:linear-gradient(90deg,#0e7490,#4338ca);color:#fff;font-weight:900}.eternaExchangeSubmit:disabled{border-color:#475569;background:#334155;color:#94a3b8}.eternaExchange>footer{margin-top:9px;color:#71869c;font-size:8px;text-align:center}
.eternaPriceChart{margin:0 0 10px;padding:10px;border:1px solid rgba(125,211,252,.24);border-radius:11px;background:linear-gradient(180deg,rgba(2,12,27,.76),rgba(15,23,42,.58));overflow:hidden}.eternaPriceChartHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.eternaPriceChartHead b{display:block;color:#e0f2fe;font-size:11px}.eternaPriceChartHead small{display:block;margin-top:2px;color:#7890a8;font-size:7px}.eternaPriceLegend{display:flex;gap:10px;color:#cbd5e1;font-size:8px;font-weight:900}.eternaPriceLegend span::before{content:'';display:inline-block;width:12px;height:3px;margin-right:4px;border-radius:3px;vertical-align:middle}.eternaPriceLegend .sell::before{background:#22d3ee;box-shadow:0 0 7px rgba(34,211,238,.72)}.eternaPriceLegend .buy::before{background:#fbbf24;box-shadow:0 0 7px rgba(251,191,36,.7)}.eternaPriceChartCanvas{width:100%;overflow:hidden;border:1px solid rgba(71,85,105,.34);border-radius:8px;background:radial-gradient(circle at 50% 0,rgba(30,64,175,.12),transparent 58%),rgba(2,6,23,.55)}.eternaPriceChartCanvas svg{display:block;width:100%;height:auto;min-height:128px}.eternaPriceGrid line{stroke:#334155;stroke-width:1;stroke-dasharray:4 5;opacity:.72}.eternaPriceGrid text{fill:#7890a8;font-size:8px;text-anchor:end}.eternaPriceDate{fill:#94a3b8;font-size:8px;text-anchor:middle}.eternaPriceLine{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.eternaPriceLine.sell{stroke:#22d3ee;filter:drop-shadow(0 0 3px rgba(34,211,238,.72))}.eternaPriceLine.buy{stroke:#fbbf24;filter:drop-shadow(0 0 3px rgba(251,191,36,.62))}.eternaPricePoint{stroke:#061829;stroke-width:2;vector-effect:non-scaling-stroke}.eternaPricePoint.sell{fill:#67e8f9}.eternaPricePoint.buy{fill:#fde68a}.eternaPriceLatest{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:8px;color:#94a3b8}.eternaPriceLatest span:first-child b{color:#67e8f9}.eternaPriceLatest span:last-child b{color:#fde68a}.eternaPriceChartNote{display:block;margin-top:5px;color:#64748b;font-size:7px;line-height:1.4}
@media(max-width:640px){.eternaEnhanceGuide{grid-template-columns:1fr}.eternaEnhanceGuide>div{display:flex;align-items:center;justify-content:space-between;text-align:left}.eternaForgeGrid{grid-template-columns:1fr}.eternaEnhanceRow{grid-template-columns:28px minmax(0,1fr) auto;padding:8px!important;min-height:66px!important}.eternaEnhanceSlotIcon{width:27px;height:27px}.eternaEnhanceSlotCopy>div{flex-wrap:wrap}.eternaEnhanceSlotCopy>div small{flex-basis:100%}.eternaBatchList{grid-template-columns:1fr}.eternaCompactStats{display:grid;grid-template-columns:1fr 1fr}.eternaCompactStats span:last-child{grid-column:1/-1}.eternaExchange{padding:11px}.eternaExchangeHeader{display:grid}.eternaRateClock{justify-self:start;text-align:left}.eternaRateNotice{display:grid}.eternaExchangeGrid{grid-template-columns:1fr}.eternaExchangeCard{padding:10px}.eternaExchangeDirection{font-size:18px}.eternaExchangeQty{grid-template-columns:30px minmax(54px,70px) 30px 1fr}.panelCurrencyBar:has(.panelCurrencyItem.aether){display:grid;grid-template-columns:1fr 1fr}.panelCurrencyBar:has(.panelCurrencyItem.aether) .panelCurrencyItem{font-size:9px}.panelCurrencyBar:has(.panelCurrencyItem.aether) .panelCurrencyItem b{font-size:10px}}

/* 아스트라 노말·하드 공용 보상 카드 — Base64 일러스트, 입장·광택·선택·소멸 연출 */
.astraRewardSelection{position:relative;overflow-x:hidden;overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;scrollbar-gutter:stable;border-color:rgba(167,139,250,.72)!important;background:radial-gradient(circle at 50% 8%,rgba(124,58,237,.28),transparent 38%),linear-gradient(160deg,#070b1d,#171334 58%,#090d21)!important;box-shadow:0 22px 70px rgba(2,6,23,.75),inset 0 0 38px rgba(99,102,241,.11)}
.astraRewardSelection:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 35%,rgba(129,140,248,.12),transparent 58%);animation:astraRewardBackdropPulse 3.6s ease-in-out infinite}
.astraRewardSelection>*{position:relative;z-index:1}
.astraRewardCardRow{display:flex;justify-content:center;gap:16px;min-height:161px;margin:16px 0 6px;padding:7px 0 16px;perspective:1100px;overflow:hidden}
.astraRewardCard{width:92px;height:138px;cursor:pointer;perspective:1100px;opacity:0;transform:translateY(34px) scale(.82);animation:astraCardArrive .62s cubic-bezier(.2,.82,.2,1) forwards;animation-delay:calc(var(--card-index,0) * 110ms)}
.astraRewardCardInner{position:relative;width:100%;height:100%;transition:transform .72s cubic-bezier(.18,.72,.18,1),filter .24s ease;transform-style:preserve-3d;filter:drop-shadow(0 10px 10px rgba(0,0,0,.52))}
.astraRewardCard.flipped .astraRewardCardInner{transform:rotateY(180deg) scale(1.08);filter:drop-shadow(0 0 17px rgba(250,204,21,.52))}
.astraRewardCardFace{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:9px;box-sizing:border-box;font-size:10px;line-height:1.45;text-align:center;background-position:center;background-size:cover;overflow:hidden}
.astraRewardCardFront{background-image:var(--astra-card-art),linear-gradient(155deg,#2e1a5c,#0e0a24);border:1px solid rgba(221,214,254,.92);box-shadow:inset 0 0 0 2px rgba(15,23,42,.72),inset 0 0 20px rgba(167,139,250,.2)}
.astraRewardCardFront:after{content:"";position:absolute;top:-40%;bottom:-40%;left:-85%;width:48%;transform:rotate(16deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:astraCardShine 2.8s ease-in-out infinite;animation-delay:calc(.45s + var(--card-index,0) * 280ms)}
.astraRewardCardBack{background-image:linear-gradient(rgba(9,10,34,.86),rgba(30,27,75,.9)),var(--astra-card-art);border:1px solid #fde68a;transform:rotateY(180deg);color:#fff;text-shadow:0 1px 3px #000;box-shadow:inset 0 0 20px rgba(250,204,21,.17)}
.astraRewardCard:not(.flipped):not(.flyAway):hover .astraRewardCardInner{transform:translateY(-8px) scale(1.055);filter:drop-shadow(0 0 18px rgba(167,139,250,.7))}
.astraRewardCard:not(.flipped):not(.flyAway):active .astraRewardCardInner{transform:translateY(-3px) scale(.98)}
.astraRewardCard.flyAway{animation:none;transition:transform .58s cubic-bezier(.55,.02,.86,.42),opacity .48s ease-in;transform:translateY(-190px) translateX(-35px) scale(.48) rotate(-18deg);opacity:0;pointer-events:none}
.astraRewardCard.flyAway:nth-child(3){transform:translateY(-190px) translateX(35px) scale(.48) rotate(18deg)}
.astraHardGuaranteedReward{margin-top:9px!important;border-color:rgba(129,140,248,.5)!important;background:rgba(30,27,75,.55)!important}
@keyframes astraCardArrive{0%{opacity:0;transform:translateY(34px) scale(.82) rotateX(18deg)}70%{opacity:1;transform:translateY(-5px) scale(1.025) rotateX(0)}100%{opacity:1;transform:none}}
@keyframes astraCardShine{0%,55%{left:-85%;opacity:0}68%{opacity:.9}88%,100%{left:140%;opacity:0}}
@keyframes astraRewardBackdropPulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(max-width:420px){.astraRewardCardRow{gap:8px}.astraRewardCard{width:78px;height:117px}.astraRewardCardFace{padding:6px;font-size:9px}.astraRewardSelection{padding:15px!important}}
@media(prefers-reduced-motion:reduce){.astraRewardSelection:before,.astraRewardCard,.astraRewardCardFront:after{animation:none}.astraRewardCard{opacity:1;transform:none}.astraRewardCardInner,.astraRewardCard.flyAway{transition-duration:.01ms}}

/* 시즌 2 스킨 소환 · 백색 근위대장 × 흑색 집행관 */
.season2GachaPanel{position:relative;isolation:isolate;overflow:hidden;padding:12px;border:1px solid rgba(212,175,55,.58);border-radius:17px;background:radial-gradient(circle at 18% 0,rgba(37,99,235,.2),transparent 35%),radial-gradient(circle at 82% 0,rgba(185,28,28,.2),transparent 35%),linear-gradient(155deg,#070b17,#13101b 58%,#07090f);color:#f8fafc;box-shadow:0 18px 48px rgba(0,0,0,.45),inset 0 0 35px rgba(212,175,55,.05)}
.season2GachaPanel:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(120deg,transparent 0 26px,rgba(255,255,255,.012) 27px 28px)}
.season2GachaHero{position:relative;min-height:258px;display:flex;align-items:flex-end;overflow:hidden;border:1px solid rgba(212,175,55,.42);border-radius:14px;background:#080b14;box-shadow:inset 0 0 28px rgba(0,0,0,.56)}
.season2GachaBanner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%}
.season2GachaHeroShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,15,.02) 25%,rgba(4,7,15,.28) 58%,rgba(4,7,15,.96) 100%),linear-gradient(90deg,rgba(16,42,91,.22),transparent 46%,rgba(91,16,24,.22))}
.season2GachaHeroText{position:relative;z-index:2;width:100%;padding:17px 19px;text-align:center;text-shadow:0 2px 7px #000}.season2GachaHeroText>span{color:#f7d774;font-size:9px;font-weight:900;letter-spacing:.18em}.season2GachaHeroText h2{margin:5px 0;color:#fff8db;font-size:25px;letter-spacing:.02em}.season2GachaHeroText h2 i{padding:0 8px;color:#d7b957;font-style:normal}.season2GachaHeroText p{margin:0;color:#cbd5e1;font-size:10px;line-height:1.55}
.season2GachaStatus{display:grid;grid-template-columns:1.05fr 1fr 1fr 1.3fr;gap:7px;margin:9px 0}.season2GachaStatus>div{min-width:0;padding:9px 10px;border:1px solid rgba(148,163,184,.24);border-radius:10px;background:rgba(7,10,20,.76)}.season2GachaStatus small,.season2GachaStatus b{display:block}.season2GachaStatus small{color:#94a3b8;font-size:8px}.season2GachaStatus b{margin-top:3px;color:#fff;font-size:10px}.season2GachaStatus .ticket{display:flex;align-items:center;gap:8px}.season2GachaStatus .ticket img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 7px rgba(250,204,21,.42))}.season2GachaStatus .royal{border-color:rgba(96,165,250,.4);background:linear-gradient(135deg,rgba(30,64,175,.22),rgba(255,255,255,.04))}.season2GachaStatus .royal b{color:#dbeafe}.season2GachaStatus .hidden{border-color:rgba(248,113,113,.36);background:linear-gradient(135deg,rgba(127,29,29,.24),rgba(0,0,0,.2))}.season2GachaStatus .hidden b{color:#fecaca}.season2Pity span{display:block;height:5px;margin-top:6px;overflow:hidden;border-radius:999px;background:#252836}.season2Pity i{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#f8fafc 46%,#f59e0b 54%,#dc2626);box-shadow:0 0 9px #fbbf24}
.season2GachaButtons{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:7px}.season2GachaButtons button{min-height:49px;padding:7px;border:1px solid rgba(212,175,55,.48);border-radius:9px;background:linear-gradient(145deg,#26354f,#111827);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.08)}.season2GachaButtons button strong,.season2GachaButtons button span{display:block}.season2GachaButtons button span{margin-top:2px;color:#aeb9c8;font-size:8px}.season2GachaButtons button.multi{border-color:#f5cf64;background:linear-gradient(145deg,#8a6119,#3d2809);box-shadow:0 0 13px rgba(245,158,11,.18)}.season2GachaButtons button.pityExchange.royal{border-color:#60a5fa;background:linear-gradient(145deg,#1d4ed8,#172554)}.season2GachaButtons button:disabled{filter:grayscale(1);opacity:.38}
.season2Odds{margin-top:9px;overflow:hidden;border:1px solid rgba(212,175,55,.25);border-radius:9px;background:rgba(3,5,12,.62)}.season2Odds summary{padding:9px 11px;color:#d8dee9;font-size:10px;cursor:pointer}.season2Odds>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 9px 8px}.season2Odds span{display:flex;justify-content:space-between;gap:6px;padding:5px 7px;border-radius:6px;background:rgba(30,41,59,.55);color:#b8c2d0;font-size:8px}.season2Odds span.royal{color:#dbeafe;box-shadow:inset 2px 0 #60a5fa}.season2Odds span.hidden{color:#fecaca;box-shadow:inset 2px 0 #ef4444}.season2Odds p{margin:0;padding:0 10px 9px;color:#77869a;font-size:8px;line-height:1.45}
.season2GachaResult{position:relative;min-height:132px;margin-top:9px;padding:12px;display:grid;place-items:center;overflow-x:hidden;overflow-y:auto;overflow-anchor:none;border:1px solid rgba(212,175,55,.2);border-radius:11px;background:radial-gradient(circle at 50% 40%,rgba(212,175,55,.13),transparent 48%),rgba(2,4,10,.72)}.season2GachaResult>p{color:#8c98aa;font-size:10px}.season2GachaCards{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:9px;width:100%;min-height:150px;perspective:900px}.season2GachaCard{position:relative;width:92px;height:122px;transform-style:preserve-3d;transform:rotateY(0) scale(.96);opacity:1;transition:transform .46s cubic-bezier(.2,.72,.2,1),filter .46s ease;filter:drop-shadow(0 9px 9px rgba(0,0,0,.55))}.season2GachaCard.revealed{transform:rotateY(180deg) scale(1);filter:drop-shadow(0 0 15px rgba(245,207,100,.5))}.season2GachaCard .cardBack,.season2GachaCard .cardFront{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}.season2GachaCard .cardBack{border:1px solid #d4af37;background:#0b0e18}.season2GachaCard .cardBack img{width:100%;height:100%;object-fit:cover}.season2GachaCard .cardFront{transform:rotateY(180deg);padding:7px;text-align:center;border:1px solid #64748b;background:linear-gradient(155deg,#283247,#0c111d)}.season2GachaCard .cardFront>.consumablePixelIcon,.season2GachaCard .cardFront>span{width:48px;height:48px;object-fit:contain;font-size:36px}.season2GachaCard b{margin-top:6px;color:#f8fafc;font-size:8px;line-height:1.35}.season2GachaCard small{margin-top:3px;color:#fde68a;font-size:6px;line-height:1.3}.season2SkinReward{width:68px;height:68px;object-fit:contain;image-rendering:pixelated}.season2GachaCard.jackpot{width:108px;height:140px}.season2GachaCard.jackpot .cardFront{border-width:2px}.season2GachaCard.royal .cardFront{border-color:#f8fafc;background:radial-gradient(circle,#315b9c,#101b31 68%);box-shadow:inset 0 0 24px rgba(147,197,253,.28)}.season2GachaCard.hidden .cardFront{border-color:#f59e0b;background:radial-gradient(circle,#721c24,#15080c 68%);box-shadow:inset 0 0 28px rgba(239,68,68,.28),0 0 17px rgba(245,158,11,.45)}
.season2SummonFlash{position:absolute;inset:0;z-index:5;pointer-events:none;background:conic-gradient(from 90deg at 50% 50%,rgba(59,130,246,0),rgba(255,255,255,.95),rgba(220,38,38,0),rgba(255,215,96,.86),rgba(59,130,246,0));mix-blend-mode:screen;animation:season2SummonBurst 1.15s ease-out forwards}.season2SummonFlash.finished{display:none}
.season2GateSequence{position:absolute;inset:0;z-index:20;overflow:hidden;border-radius:16px;pointer-events:none}.season2GateSequence .gateHalf{position:absolute;top:0;bottom:0;width:51%;overflow:hidden;background:#070a10;box-shadow:inset 0 0 80px rgba(0,0,0,.65)}.season2GateSequence .gateHalf.left{left:0;animation:season2GateLeft 1.05s .35s cubic-bezier(.7,0,.3,1) forwards}.season2GateSequence .gateHalf.right{right:0;animation:season2GateRight 1.05s .35s cubic-bezier(.7,0,.3,1) forwards}.season2GateSequence .gateHalf img{position:absolute;top:0;width:200%;height:100%;max-width:none;object-fit:cover}.season2GateSequence .gateHalf.left img{left:0}.season2GateSequence .gateHalf.right img{right:0}.season2GateSequence .gateCrest{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:74px;height:74px;border:2px solid #f5cf64;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff8d0 0,#d4af37 24%,rgba(16,24,40,.92) 25%,rgba(16,24,40,.78) 62%,transparent 64%);color:#fff8d0;font-size:29px;text-shadow:0 0 12px #fff;box-shadow:0 0 35px #f5cf64;animation:season2CrestOpen 1.25s .18s ease-in forwards}
.skinCollectionStats{display:grid;gap:6px}.skinCollectionRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid rgba(148,163,184,.22);border-radius:8px;background:rgba(15,23,42,.5)}.skinCollectionRow span,.skinCollectionRow b,.skinCollectionRow small{display:block}.skinCollectionRow small{margin-top:2px;color:#8492a6;font-size:8px}.skinCollectionRow strong{font-size:9px;white-space:nowrap}.skinCollectionRow.legacy{opacity:.76}.skinCollectionRow.royal{border-color:rgba(96,165,250,.34)}.skinCollectionRow.royal strong{color:#bfdbfe}.skinCollectionRow.hidden{border-color:rgba(248,113,113,.32)}.skinCollectionRow.hidden strong{color:#fecaca}
@keyframes season2SummonBurst{0%{opacity:0;transform:rotate(0) scale(.3)}32%{opacity:1}100%{opacity:0;transform:rotate(155deg) scale(2.2)}}@keyframes season2GateLeft{to{transform:translateX(-105%)}}@keyframes season2GateRight{to{transform:translateX(105%)}}@keyframes season2CrestOpen{0%,35%{opacity:1;transform:translate(-50%,-50%) scale(.7) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4) rotate(120deg)}}
#app.gachaView .season2GachaPanel{flex:1;min-height:0;display:flex;flex-direction:column}#app.gachaView .season2GachaHero{flex:1 1 0;min-height:190px}#app.gachaView .season2GachaStatus,#app.gachaView .season2GachaButtons{flex:0 0 auto}#app.gachaView .season2Odds{flex:0 1 auto;max-height:34%;overflow:auto}#app.gachaView .season2GachaResult{flex:1 1 auto;min-height:125px;max-height:44%}
@media(max-width:640px){.season2GachaPanel{padding:7px}.season2GachaHero{min-height:205px}.season2GachaHeroText{padding:11px}.season2GachaHeroText h2{font-size:17px}.season2GachaHeroText p{font-size:8px}.season2GachaStatus{grid-template-columns:1fr 1fr}.season2GachaStatus .season2Pity{grid-column:1/-1}.season2GachaStatus .ticket img{width:34px;height:34px}.season2GachaButtons{grid-template-columns:1fr 1fr}.season2Odds>div{grid-template-columns:1fr 1fr}.season2GachaCard{width:72px;height:98px}.season2GachaCard.jackpot{width:82px;height:110px}.season2SkinReward{width:51px;height:51px}.skinCollectionRow{display:grid}.skinCollectionRow strong{white-space:normal}}
@media(prefers-reduced-motion:reduce){.season2GateSequence{display:none}.season2SummonFlash{animation:none;display:none}.season2GachaCard{transition-duration:.01ms}}

/* 오픈 베타 시즌 1: 기존 반응형 골격은 유지하고 천상의 세라핌 색상과 분위기로 통일한다. */
.season2GachaPanel.celestialSeason1{
  border-color:rgba(250,204,21,.68);
  background:radial-gradient(circle at 50% 0,rgba(139,92,246,.34),transparent 42%),linear-gradient(155deg,#171331,#241849 58%,#090b18);
  box-shadow:0 18px 48px rgba(0,0,0,.45),inset 0 0 42px rgba(250,204,21,.08);
}
.celestialSeason1 .season2GachaHero{border-color:rgba(253,230,138,.65);background:#171331}
.celestialSeason1 .season2GachaHeroShade{background:linear-gradient(180deg,rgba(23,19,49,.02) 34%,rgba(23,19,49,.3) 62%,rgba(9,11,24,.96) 100%)}
.celestialSeason1 .season2GachaHeroText>span{color:#fde68a}
.celestialSeason1 .season2GachaStatus .royal{border-color:rgba(253,230,138,.56);background:linear-gradient(145deg,rgba(109,40,217,.58),rgba(24,18,52,.98) 74%)}
.celestialSeason1 .season2GachaStatus .royal b{color:#fff7d6}
.celestialSeason1 .season2GachaStatus .hidden{border-color:rgba(196,181,253,.44);background:linear-gradient(145deg,rgba(91,70,150,.55),rgba(15,12,34,.98) 74%)}
.celestialSeason1 .season2GachaStatus .hidden b{color:#ede9fe}
.celestialSeason1 .season2Pity i{background:linear-gradient(90deg,#8b5cf6,#c4b5fd 42%,#fde68a 72%,#fbbf24);box-shadow:0 0 10px #fde68a}
.celestialSeason1 .season2GachaButtons button{border-color:rgba(196,181,253,.58);background:linear-gradient(145deg,#6246a8,#28204f)}
.celestialSeason1 .season2GachaButtons button.multi{border-color:#fde68a;background:linear-gradient(145deg,#9a701f,#4c3308)}
.celestialSeason1 .season2GachaCard.seraph .cardFront{border-color:#fde68a;background:radial-gradient(circle,#7357b0,#201537 70%);box-shadow:inset 0 0 28px rgba(253,230,138,.3),0 0 17px rgba(196,181,253,.5)}
.celestialSeason1 .season2GachaStatus .ticket img{border-radius:9px}

/* 시즌 2 가챠 전용: 평면 박스 대신 지휘관 휘장형 패널로 정리한다. */
.season2GachaStatus>div{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:11px 12px 10px;
  border:1px solid rgba(212,175,55,.58);
  border-radius:4px 12px 4px 12px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.08),transparent 28%),
    linear-gradient(150deg,rgba(25,42,70,.96),rgba(5,9,17,.97) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 3px 0 rgba(212,175,55,.22),0 5px 14px rgba(0,0,0,.28)
}
.season2GachaStatus>div:before{
  content:"";position:absolute;left:10px;right:10px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#f5cf64,transparent);opacity:.75
}
.season2GachaStatus>div:after{
  content:"◆";position:absolute;right:6px;top:4px;color:rgba(245,207,100,.28);
  font-size:7px;line-height:1
}
.season2GachaStatus small{font-size:9px;letter-spacing:.02em}.season2GachaStatus b{font-size:11px;letter-spacing:.01em}
.season2GachaStatus .royal{background:linear-gradient(145deg,rgba(26,63,122,.94),rgba(7,15,29,.98) 72%)}
.season2GachaStatus .hidden{background:linear-gradient(145deg,rgba(91,20,31,.92),rgba(10,7,12,.98) 72%)}
.season2GachaStatus .season2Pity{background:linear-gradient(145deg,rgba(73,54,16,.86),rgba(7,9,15,.98) 75%)}
.season2GachaButtons button{
  position:relative;overflow:hidden;min-height:54px;border-radius:3px 10px 3px 10px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  background:
    linear-gradient(110deg,rgba(255,255,255,.11),transparent 35%),
    linear-gradient(150deg,#2f4668,#101724 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 5px 12px rgba(0,0,0,.3)
}
.season2GachaButtons button:before{
  content:"";position:absolute;left:8px;right:8px;top:3px;height:1px;
  background:linear-gradient(90deg,transparent,#f8e3a2,transparent);opacity:.7
}
.season2GachaButtons button strong{font-size:12px;letter-spacing:.03em}.season2GachaButtons button span{font-size:9px}
html[data-theme="default"] .season2GachaPanel,
html[data-theme="default"] .season2GachaPanel button,
html[data-theme="default"] .season2GachaPanel summary{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",Arial,sans-serif;
  font-synthesis:none
}
html[data-theme="default"] .season2GachaPanel{font-weight:500}
html[data-theme="default"] .season2GachaHeroText h2{
  color:#fff8db!important;text-shadow:0 2px 7px #000!important
}
html[data-theme="default"] .season2GachaHeroText p{
  color:#e5e7eb!important;text-shadow:0 1px 4px #000!important
}
html[data-theme="default"] .season2GachaStatus small,
html[data-theme="default"] .season2Odds span,
html[data-theme="default"] .season2Odds p{font-size:10px;line-height:1.45}
html[data-theme="default"] .season2GachaStatus b,
html[data-theme="default"] .season2GachaButtons button strong{font-weight:700;text-rendering:optimizeLegibility}
@media(max-width:640px){
  .season2GachaStatus>div{padding:9px 10px}.season2GachaStatus small{font-size:8px}.season2GachaStatus b{font-size:10px}
  .season2GachaButtons button{min-height:50px}.season2GachaButtons button strong{font-size:11px}
  .season2GachaButtons .pityExchange{grid-column:1/-1}
}

/* 소환 결과 연출: 전체 화면 회전·내부 스크롤을 없애고 문장 발광 후 정면 공개한다. */
.season2GachaResult.hasResults{
  flex:0 0 auto!important;
  width:100%;
  max-height:none!important;
  overflow:hidden!important;
  overscroll-behavior:none;
  padding:10px
}
.season2GachaResult.single{height:176px;min-height:176px}
.season2GachaResult.multi{min-height:380px}
.season2GachaResult .season2GachaCards{
  min-height:0;
  align-items:center;
  align-content:center;
  perspective:none
}
.season2GachaResult.single .season2GachaCards{height:154px}
.season2GachaResult.multi .season2GachaCards{display:grid;grid-template-columns:repeat(4,94px);justify-content:center;gap:8px}
.season2GachaResult.multi .season2GachaCard{width:94px;height:116px}
.season2GachaResult.multi .season2GachaCard.jackpot{width:94px;height:116px}
.season2GachaResult.multi .season2SkinReward{width:68px;height:68px}
.season2GachaResult.multi .season2GachaCard .cardFront>.consumablePixelIcon,
.season2GachaResult.multi .season2GachaCard .cardFront>span{width:58px;height:58px;font-size:42px}
.season2GachaResult.multi .season2GachaCard b{margin-top:5px;font-size:8px}
.season2GachaResult.multi .season2GachaCard small{font-size:6px}
.season2GachaCard{
  transform:none!important;
  opacity:1;
  transition:filter .38s ease,scale .38s cubic-bezier(.2,.75,.2,1);
  scale:.88
}
.season2GachaCard.revealed{transform:none!important;scale:1}
.season2GachaCard .cardBack,
.season2GachaCard .cardFront{
  transform:none!important;
  backface-visibility:visible;
  transition:opacity .28s ease,scale .38s cubic-bezier(.2,.75,.2,1),filter .38s ease
}
.season2GachaCard .cardBack{opacity:1;scale:1}
.season2GachaCard .cardFront{opacity:0;scale:.78}
.season2GachaCard.revealed .cardBack{opacity:0;scale:1.12;filter:blur(4px) brightness(1.8)}
.season2GachaCard.revealed .cardFront{opacity:1;scale:1}
.season2SummonFlash{
  inset:50% auto auto 50%;
  width:190px;height:190px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,rgba(255,255,255,.98) 0 3%,rgba(250,204,21,.78) 8%,rgba(96,165,250,.36) 24%,rgba(220,38,38,.16) 42%,transparent 68%);
  mix-blend-mode:screen;
  animation:season2SummonBurstCompact .72s ease-out forwards
}
@keyframes season2SummonBurstCompact{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
  35%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}
.season2GachaButtons .freePull{
  border-color:#7dd3fc;
  background:linear-gradient(145deg,#155e75,#10293a 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 13px rgba(56,189,248,.18)
}
@media(max-width:640px){
  .season2GachaResult.single{height:160px;min-height:160px}
  #app.gachaView .panels{
    overflow-y:auto;
    padding-bottom:84px;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y
  }
  #app.gachaView #gachaPanel.active{height:auto;min-height:100%}
  #app.gachaView .season2GachaPanel{flex:none;min-height:0}
  #app.gachaView .season2GachaHero{flex:none;height:205px;min-height:205px}
  .celestialSeason1 .season2GachaStatus .hidden{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .celestialSeason1 .season2GachaStatus .hidden b{margin-top:0;text-align:right}
  .celestialSeason1 .season2GachaButtons .multi{grid-column:1/-1}
  .celestialSeason1 .season2GachaResult:not(.hasResults){flex:none;min-height:96px}
  #app.gachaView .season2GachaResult.hasResults{
    height:auto;
    max-height:none;
    overflow:visible!important;
    scroll-margin-top:8px
  }
  .season2GachaResult.multi{min-height:420px;padding:7px}
  .season2GachaResult.multi .season2GachaCards{grid-template-columns:repeat(3,76px);gap:6px}
  .season2GachaResult.multi .season2GachaCard,
  .season2GachaResult.multi .season2GachaCard.jackpot{width:76px;height:96px}
  .season2GachaResult.multi .season2SkinReward{width:54px;height:54px}
  .season2GachaResult.multi .season2GachaCard .cardFront>.consumablePixelIcon,
  .season2GachaResult.multi .season2GachaCard .cardFront>span{width:48px;height:48px;font-size:34px}
  .season2GachaResult.multi .season2GachaCard b{font-size:7px}
}


/* 2026-08-18 · 전체 메뉴 통합 상점 허브 */
.shopHubModal {
  width: min(92vw, 720px);
  max-height: min(82vh, 680px);
  overflow: auto;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(18,24,38,.98), rgba(8,12,22,.98));
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
  color: #f8fafc;
}
.shopHubHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.shopHubTitle { font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.shopHubSub { margin-top: 4px; color: #aeb9cb; font-size: 13px; }
.shopHubClose {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}
.shopHubTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.shopHubTab {
  min-height: 142px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 15px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.045);
  color: #f8fafc;
  text-align: center;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.shopHubTab:hover,
.shopHubTab:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.09);
  outline: none;
}
.shopHubTabIcon { font-size: 32px; line-height: 1; }
.shopHubTab strong { font-size: 17px; }
.shopHubTab small { color: #aeb9cb; line-height: 1.45; font-size: 11px; }
.shopHubTab.market { box-shadow: inset 0 0 0 1px rgba(52,211,153,.06); }
.shopHubTab.enchant { box-shadow: inset 0 0 0 1px rgba(192,132,252,.06); }
.shopHubTab.enhance { box-shadow: inset 0 0 0 1px rgba(251,191,36,.06); }
@media (max-width: 640px) {
  .shopHubModal { width: min(94vw, 520px); padding: 14px; }
  .shopHubTabs { grid-template-columns: 1fr; }
  .shopHubTab {
    min-height: 82px;
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    text-align: left;
    justify-items: start;
    align-items: center;
    column-gap: 10px;
  }
  .shopHubTabIcon { grid-row: 1 / span 2; font-size: 29px; }
  .shopHubTab strong { align-self: end; }
  .shopHubTab small { align-self: start; }
}

/* 2026-08-19 · 통합 상점: 현재 마을 담당 NPC 표시 */
.shopHubNpcPortrait {
  width: 100%;
  max-width: 150px;
  height: 92px;
  object-fit: cover;
  object-position: 50% 24%;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.shopHubTabText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.shopHubTabText em {
  color: #fde68a;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}
.shopHubTabText small { max-width: 190px; }
@media (max-width: 640px) {
  .shopHubTab {
    grid-template-columns: 74px minmax(0,1fr);
    grid-template-rows: auto;
    min-height: 96px;
  }
  .shopHubNpcPortrait {
    grid-column: 1;
    width: 68px;
    height: 72px;
    max-width: none;
    object-position: 50% 22%;
  }
  .shopHubTabText {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
  }
  .shopHubTabText small { max-width: none; }
}