/* HTML UI pixel-art skin. Phaser combat canvas is intentionally excluded.
   전체 UI를 밝은 베이지·양피지 판타지 RPG 톤으로 통일한다 — 아래 --px-* 는 게임 전체가
   공유하는 "기본 패널" 팔레트이고, --nav-* 는 원래 하단 메뉴 전용으로 만든 같은 계열의
   팔레트다. 이제 둘 다 같은 베이지 톤이라 실질적으로 하나의 테마처럼 보인다. */
:root {
  --px-bg: #ecdfc0;
  --px-panel: #e8dbb8;
  --px-panel-2: #ddcda0;
  --px-line: #8a6a3d;
  --px-dark: #b89a63;
  --px-blue: #b8860b;
  --px-green: #2f7d32;
  --px-red: #a3231c;
  --px-gold: #d4af37;
  --px-text: #3a2712;
  /* 12px 보조문구도 WCAG AA 대비를 넘도록 기존 #7a6242보다 한 단계 진하게 조정. */
  --px-muted: #6f5535;
  /* 베이지 배경 위에서도 잘 읽히도록 만든 강조색(기존에 노란색이던 자리들을 대체) */
  --px-accent: #8a4b00;
  /* 밝은 크림톤 인셋 배경(입력창, 뱃지 등) — 다크모드에서 어두운 톤으로 대체된다 */
  --px-tint: #fbf3de;
  --px-tint-2: #f3e6c4;

  /* 하단 내비게이션 전용 팔레트 — --px-* 와 같은 베이지/양피지 톤을 공유한다. */
  --nav-bg: #e8dbb8;
  --nav-bg-active: #f6edd2;
  --nav-hover: #f0e4c4;
  --nav-border: #8a6a3d;
  --nav-border-active: #d4af37;
  --nav-text: #4a3420;
  --nav-text-active: #3a2712;
  --nav-shadow: rgba(74, 52, 32, .35);
}

html, body, button, input, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif !important;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* 픽셀 폰트는 짧은 장식 글자에만 남긴다. 긴 한글 본문과 메뉴에 사용하면
   작은 화면에서 획이 뭉개지고 800/900 가짜 굵기가 생겨 읽기 어려워진다. */
.rainbowText, .primordialText, .statusBarLevel .lbl, .hudExpTag {
  font-family: "Galmuri11", "Malgun Gothic", sans-serif !important;
}
body { background: #d8c79a; color: var(--px-text); }
#app { background: var(--px-bg); }

/* Stepped, hard-edged pixel frames rather than soft web cards. */
.statusBar,
.itemCard, .equipSlot, .dpsBox, .statList,
.invSettings, .presetCard, .consumableRow, .gachaInfo,
.enhanceListItem, .enhanceCostBox, .enhanceQuickBar, .pvpOppCard,
.rankRow, .slotEnhanceCard, .balanceBonusBar,
.mailRow, .modalBox, .battleLog {
  border-radius: 6px !important;
  background: var(--px-panel) !important;
  border: 2px solid var(--px-line) !important;
  box-shadow:
    inset 0 0 0 2px var(--px-dark),
    inset 0 3px 0 rgba(255,255,255,.45),
    3px 3px 0 var(--nav-shadow) !important;
}

.statusBar {
  min-height: 38px;
  padding: 6px 10px !important;
  background: #152235 !important;
  border-width: 0 0 3px !important;
  border-color: #060b12 #060b12 #47647d !important;
  box-shadow: inset 0 -2px 0 #0a111b !important;
  font-size: 11px !important;
}
.statItem { color: #eef6fa; text-shadow: 1px 1px 0 #05070a; }
/* 상단 HUD / 하단 경험치 바 "박스"를 투명화: 배경·테두리·리벳 장식을 모두 제거하고,
   대신 텍스트/아이콘에 강한 그림자를 줘서 배경 그래픽과 상관없이 읽히도록 한다. */
#statusBar, #hudExpBar {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
#statusBar *, #hudExpBar > .hudExpRow > .hudExpTag, #hudExpBar > .hudExpRow > .expLabel {
  text-shadow: 1px 1px 2px rgba(0,0,0,.9), -1px -1px 2px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.85) !important;
}
.statItem .lbl { color: #ffffff; }
.statItem .sub, .charSub, .itemSub, .modalSub { color: var(--px-muted) !important; }
.bossUnlockBar {
  height: 8px !important; border-radius: 0 !important; background: var(--px-tint) !important;
  border: 2px solid var(--nav-border); box-shadow: none;
}
.bossUnlockFill { border-radius: 0 !important; background: var(--nav-border-active) !important; }
/* 경험치 바만 별도: 얇은 두께 + 골드 계열 채움색 (보스/스킬 게이지와 구분) */
.expBarBg {
  height: 5px !important; border-radius: 0 !important; background: #05080d !important;
  border: 2px solid #344559; box-shadow: inset 0 0 0 1px #020407;
}
.expBarFill {
  border-radius: 0 !important;
  background: linear-gradient(90deg, #fde047, #facc15) !important;
}

.panels { background-color: var(--px-bg); background-image: linear-gradient(45deg, rgba(74,52,32,.03) 25%, transparent 25%, transparent 75%, rgba(74,52,32,.03) 75%); background-size: 8px 8px; }
.tabPanel { max-width: 1040px; width: 100%; margin: 0 auto; }
.panels, .tabPanel { min-width: 0; overflow-x: hidden; box-sizing: border-box; }

button, .mapTab, .toggleBtn, .activityBtn,
.enhanceQuickButton,
.enhanceOutcomeConfirm, .enhanceCriticalConfirm {
  border-radius: 6px !important;
  border: 2px solid var(--nav-border) !important;
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
  box-shadow: 1px 1px 0 var(--nav-shadow) !important;
  text-shadow: none;
  transition: none !important;
}
button:hover { background: var(--nav-hover) !important; filter: none !important; }
button:active { transform: translate(1px,1px) !important; box-shadow: none !important; }
button:disabled { filter: grayscale(.5) !important; opacity: .5 !important; }
.enhanceQuickButton {
  background: linear-gradient(180deg, #f59e0b 0%, #c25b08 100%) !important;
  border-color: #fde68a #7c2d12 #7c2d12 #fde68a !important;
  color: #fffdf5 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 2px 2px 0 #451a03 !important;
  text-shadow: 1px 1px 0 #7c2d12 !important;
}
.enhanceQuickButton:hover {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%) !important;
  color: #ffffff !important;
}
.enhanceQuickButton:active {
  background: #b45309 !important;
  border-color: #7c2d12 #fde68a #fde68a #7c2d12 !important;
}
/* 슬롯 강화 버튼도 위 강화 버튼처럼 고정 색상으로 덮어써서, 공용 button 규칙(테마별
   --nav-bg/--nav-text)에 묻히지 않고 다크모드에서도 카드 배경과 뚜렷이 구분되게 한다. */
.slotEnhanceButton {
  background: linear-gradient(180deg, #facc15 0%, #ca8a04 100%) !important;
  border-color: #fef9c3 #713f12 #713f12 #fef9c3 !important;
  color: #1c1200 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 2px 2px 0 #451a03 !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}
.slotEnhanceButton:hover {
  background: linear-gradient(180deg, #fde047 0%, #eab308 100%) !important;
}
.slotEnhanceButton:active {
  background: #ca8a04 !important;
  border-color: #713f12 #fef9c3 #fef9c3 #713f12 !important;
}
.slotEnhanceButton:disabled {
  background: #3a4556 !important;
  border-color: #4b5563 !important;
  color: #9ca3af !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}
/* 강화 연출 결과창의 "확인" 버튼도 같은 이유(공용 button 규칙에 묻힘)로 고정 색상을 준다. */
.enhanceOutcomeConfirm {
  background: linear-gradient(135deg,#a16207,#f59e0b) !important;
  border: 1px solid #fde68a !important;
  color: #fffbea !important;
  text-shadow: none !important;
}
.enhanceOutcomeConfirm:hover { filter: brightness(1.15) !important; }
.activityBtn, .toggleBtn.on { background: var(--nav-bg-active) !important; border-color: var(--nav-border-active) !important; color: var(--nav-text-active) !important; }
.activityBtn.stop, .confirmModalOk { background: #a7353d !important; border-color: #f07a78 !important; color: #fff !important; }
.activityBtn.boss { background: #9a4e26 !important; border-color: #f3a35b !important; color: #fff !important; }

/* ── 하단 내비게이션(주요 메뉴 + 세부 메뉴) — 밝은 베이지·양피지 판타지 RPG 스킨.
   두 단이 하나의 UI로 이어지도록 바깥 테두리는 세부 메뉴 쪽 상단에 1개만 남기고,
   메뉴별로 배경색을 다르게 쓰던 방식은 제거한다(선택 여부만 금테로 구분). ── */
.majorNavBar, .mobileSubNav {
  background: var(--nav-bg) !important;
  border-top: none !important;
  box-shadow: none !important;
}
#mobileSubNav { border-top: 3px solid var(--nav-border) !important; }
.majorNavBar { gap: 4px !important; padding: 3px 5px calc(3px + env(safe-area-inset-bottom)) !important; }
.mobileSubNav { gap: 6px !important; padding: 3px 6px !important; }

.majorNavBtn, .mobileSubBtn {
  border-radius: 6px !important;
  border: 2px solid var(--nav-border) !important;
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
  box-shadow: 1px 1px 0 var(--nav-shadow) !important;
  text-shadow: none !important;
  transition: none !important;
  position: relative;
}
.majorNavBtn:hover, .mobileSubBtn:hover { background: var(--nav-hover) !important; border-color: #7a5c33 !important; filter: none !important; }
.majorNavBtn:active, .mobileSubBtn:active { transform: translate(1px,1px) !important; box-shadow: none !important; }
.majorNavBtn:disabled, .mobileSubBtn:disabled { filter: grayscale(.5); opacity: .5; }
.mobileSubBtn.accountLocked { filter: grayscale(.55); opacity: .62; }
.mobileSubBtn.accountLocked .mobileSubLabel small { display:block; margin-top:2px; color:#9a3412; font-size:8px; line-height:1; }
.mobileSubBtn.combatLocked { filter: grayscale(.35); opacity:.58; }
.mobileSubBtn.combatLocked .mobileSubLabel small { display:block; margin-top:2px; color:#b91c1c; font-size:8px; line-height:1; }

.majorNavBtn.active, .mobileSubBtn.active {
  background: var(--nav-bg-active) !important;
  border-color: var(--nav-border-active) !important;
  color: var(--nav-text-active) !important;
  box-shadow: 0 0 0 1px var(--nav-border-active) inset !important;
}
.majorNavBtn.active::before, .mobileSubBtn.active::before {
  content: ""; position: absolute; top: -2px; left: 10%; right: 10%; height: 2px;
  background: var(--nav-border-active);
}

.majorNavBtn { min-height: 44px !important; padding: 4px 3px !important; font-size: 12px !important; font-weight: 700; }
.majorNavIcon { font-size: 17px !important; filter: none !important; }
.menuIconImage {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.38));
}
.majorNavIcon, .mobileSubIcon, .navMenuIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.majorNavIcon .menuIconImage { width: 23px; height: 23px; }
.mobileSubIcon .menuIconImage { width: 24px; height: 24px; }
.navMenuIcon .menuIconImage { width: 22px; height: 22px; }
.majorNavBtn span:not(.majorNavIcon) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mobileSubBtn {
  min-height: 54px !important;
  min-width: 0 !important;
  padding: 5px 2px !important;
  overflow: hidden;
  font-size: 10.5px !important;
  font-weight: 700;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1.15;
}
.mobileSubIcon { display:block; flex:0 0 auto; font-size:17px; line-height:1; }
/* [2026-08-01] 짧은 폭(4열 그리드)에서 "전투 화면"·"시간보상"·"아이템 도감" 같은 4글자 라벨이
   말줄임표로 잘려 보이던 문제 — 한 줄 말줄임 대신 최대 2줄까지 자연스럽게 줄바꿈되게 한다. */
.mobileSubLabel {
  display:block;
  width:100%;
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word;
  text-align:center;
}
#mobileSubNav[hidden] { display: none !important; }
#mobileSubNav.expandedMenu {
  display: grid !important;
  /* 2026-08-19: 기능을 삭제하지 않고 4열로 압축해 카테고리별 한 줄 정렬. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row;
  grid-auto-rows: 48px;
  align-items: stretch;
  max-height: min(48dvh, 286px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 5px !important;
  padding: 6px !important;
}
#mobileSubNav.expandedMenu .mobileSubBtn {
  width: 100%;
  height: 48px;
  min-height: 48px !important;
  min-width: 0;
  padding: 4px 2px !important;
  grid-column: auto;
  grid-row: auto;
  gap: 2px;
}
/* 카테고리가 바뀌면 반드시 새 줄 첫 칸에서 시작한다. */
#mobileSubNav.expandedMenu .mobileSubBtn.menuRowStart { grid-column-start: 1 !important; }
#mobileSubNav.expandedMenu .mobileSubIcon { font-size: 16px; }
#mobileSubNav.expandedMenu .mobileSubIcon .menuIconImage { width: 21px; height: 21px; }
#mobileSubNav.expandedMenu .mobileSubLabel {
  font-size: 10px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 옵션은 기능 그룹과 분리된 얇은 하단 유틸리티 버튼으로 정리한다. */
#mobileSubNav.expandedMenu .mobileSubBtn.menuUtilityItem {
  grid-column: 1 / -1 !important;
  min-height: 36px !important;
  height: 36px !important;
  flex-direction: row !important;
  gap: 7px;
  border-color: rgba(100, 116, 139, .58);
  background: rgba(30, 41, 59, .92);
  color: #cbd5e1;
}
#mobileSubNav.expandedMenu .mobileSubBtn.menuUtilityItem .mobileSubIcon {
  width: 18px;
  font-size: 15px;
}
#mobileSubNav.expandedMenu .mobileSubBtn.menuUtilityItem .mobileSubIcon .menuIconImage {
  width: 18px;
  height: 18px;
}
#mobileSubNav.expandedMenu .mobileSubBtn.menuUtilityItem .mobileSubLabel {
  width: auto;
  font-size: 10.5px;
  overflow: visible;
}
@media (max-width: 420px) {
  #mobileSubNav.expandedMenu {
    grid-auto-rows: 45px;
    gap: 4px !important;
    padding: 5px !important;
    max-height: min(50dvh, 270px);
  }
  #mobileSubNav.expandedMenu .mobileSubBtn {
    min-height: 45px !important;
    height: 45px;
  }
  #mobileSubNav.expandedMenu .mobileSubIcon .menuIconImage { width: 19px; height: 19px; }
  #mobileSubNav.expandedMenu .mobileSubLabel { font-size: 9.5px; }
}

/* 2026-08-29: 전체 메뉴는 header/sections 두 개의 직접 자식으로 구성된다.
   예전 4열 규칙을 컨테이너에 적용하면 두 자식이 한 행에 눌려 메뉴 높이가
   48px로 축소되므로, 바깥은 세로 흐름으로 두고 각 구역 안에서만 4열을 쓴다. */
#mobileSubNav.expandedMenu {
  display: block !important;
  max-height: min(55dvh, 360px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 7px 8px 8px !important;
}
#mobileSubNav.expandedMenu .mobileMenuHeader {
  color: var(--nav-text);
  border-bottom-color: var(--nav-border);
}
#mobileSubNav.expandedMenu .mobileMenuUtility {
  border-color: var(--nav-border);
  background: var(--nav-bg);
  color: var(--nav-text);
}
#mobileSubNav.expandedMenu .mobileMenuSection {
  border-color: var(--nav-border);
  background: rgba(255,255,255,.18);
}
#mobileSubNav.expandedMenu .mobileMenuSectionTitle { color: #765126; }
.mobileMenuCategoryTabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  margin:7px 0;
}
.mobileMenuCategoryTab {
  min-width:0;
  min-height:34px;
  padding:5px 3px !important;
  border:1px solid var(--nav-border) !important;
  border-radius:6px !important;
  background:var(--nav-bg) !important;
  color:var(--nav-text) !important;
  font-size:11px !important;
  font-weight:800;
}
.mobileMenuCategoryTab.active {
  border-color:var(--nav-border-active) !important;
  background:var(--nav-bg-active) !important;
  color:var(--nav-text-active) !important;
}
#mobileSubNav.expandedMenu .mobileMenuSection { padding:7px; }
#mobileSubNav.expandedMenu .mobileMenuSections {
  grid-template-columns:minmax(0,1fr);
}
#mobileSubNav.expandedMenu .mobileMenuSectionGrid { grid-template-columns:repeat(4,minmax(0,1fr)); }
#mobileSubNav.expandedMenu .mobileMenuSectionGrid .mobileSubBtn { min-height:54px !important; height:54px; }
@media (max-width: 420px) {
  #mobileSubNav.expandedMenu {
    max-height: min(42dvh, 286px);
    padding: 6px !important;
  }
  #mobileSubNav.expandedMenu .mobileSubLabel { font-size:11px !important; line-height:1.15; }

  /* 핵심 관리 화면은 8~9px 압축 글자 대신 터치 가능한 최소 크기를 사용한다. */
  #app.corePanelView:not(.corePanelExpanded) #inventoryPanel .mapTab,
  #app.corePanelView:not(.corePanelExpanded) #inventoryPanel .invToolbar > *,
  #app.corePanelView:not(.corePanelExpanded) #explorePanel > .mapTabs .mapTab,
  #app.corePanelView:not(.corePanelExpanded) #explorePanel .activityBtn {
    min-height:30px !important;
    font-size:11px !important;
  }
  #app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemActions button {
    min-height:28px !important;
    font-size:10.5px !important;
  }
  #app.corePanelView:not(.corePanelExpanded) #equipPanel .equipSlot {
    min-height:56px !important;
    padding:5px 3px !important;
  }
  #app.corePanelView:not(.corePanelExpanded) #equipPanel .slotIcon { font-size:19px !important; }
  #app.corePanelView:not(.corePanelExpanded) #equipPanel .slotName { font-size:10px !important; line-height:1.2; }
  #app.corePanelView:not(.corePanelExpanded) #equipPanel .slotEnhanceBadge { font-size:9.5px !important; }
  #app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemTitle { font-size:11px !important; }
  #app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemScore,
  #app.corePanelView:not(.corePanelExpanded) #inventoryPanel .itemSlotIcon,
  #app.corePanelView:not(.corePanelExpanded) #inventoryPanel .recommendBadge { font-size:9.5px !important; }
  #app.corePanelView:not(.corePanelExpanded) #explorePanel .activityIcon { font-size:16px !important; }
  #app.corePanelView:not(.corePanelExpanded) #explorePanel .activityTitle { font-size:11px !important; }
  #app.corePanelView:not(.corePanelExpanded) #explorePanel .activitySimpleSummary { font-size:10px !important; }
}

/* 긴 닉네임과 큰 재화 값이 함께 표시되어도 HUD 재화가 한 글자씩 잘리지 않게 한다. */
#statusBar .statusBarCurrencies { min-width:max-content; }
#statusBar .hudCurrency { overflow:visible; text-overflow:clip; }

.growthCombatSummary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:8px 0; }
.growthCombatSummary > div { padding:10px; background:var(--px-tint); border:2px solid var(--nav-border); box-shadow:1px 1px 0 var(--nav-shadow); }
.growthCombatSummary small { display:block; color:var(--nav-text); font-size:9px; }
.growthCombatSummary b { display:block; margin-top:5px; color:#8a5a00; font-size:16px; }
.growthFieldCheck { margin-top:8px; padding:10px; background:var(--px-tint); border:2px solid var(--nav-border); box-shadow:1px 1px 0 var(--nav-shadow); }
.growthFieldTitle { display:flex; justify-content:space-between; gap:8px; padding-bottom:6px; border-bottom:1px dashed var(--nav-border); font-size:11px; }
.growthFieldTitle b { color:#0f6674; }
.growthSuitability { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.growthSuitability span { flex:1; min-width:115px; padding:6px; background:var(--px-tint-2); border:1px solid var(--nav-border); text-align:center; font-size:10px; }
.growthStatColumns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.mapTabs { padding: 3px 3px 7px; }
.invGroupTabs .mapTab,
.invSlotTabs .mapTab { display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.inventoryFilterIcon {
  width:20px; height:20px; flex:0 0 20px; object-fit:contain;
  image-rendering:pixelated; pointer-events:none;
}
.invSlotTabs .inventoryFilterIcon { width:18px; height:18px; flex-basis:18px; }
.invFilterChevron { margin-left:2px; font-size:10px; opacity:.72; }
.mapTab.active { color: var(--nav-text-active) !important; background: var(--nav-bg-active) !important; border-color: var(--nav-border-active) !important; }
/* 난이도 탭도 하단 내비게이션과 같은 베이지·금테 규칙을 재사용한다(선택=금색 강조). */
.diffTierTab {
  border-radius: 6px !important; border: 2px solid var(--nav-border) !important;
  background: var(--nav-bg) !important; color: var(--nav-text) !important;
  box-shadow: 1px 1px 0 var(--nav-shadow) !important; text-shadow: none !important;
}
.diffTierTab:hover { background: var(--nav-hover) !important; filter: none !important; }
.diffTierTab:active { transform: translate(1px,1px) !important; }
.diffTierTab.active {
  background: var(--nav-bg-active) !important;
  border-color: var(--nav-border-active) !important; color: var(--nav-text-active) !important;
}
/* ── 탐험 패널(활동 카드) — 하단 내비게이션과 같은 베이지·양피지 테마로 통일.
   다른 패널(성장/도감 등)이 함께 쓰던 어두운 공용 규칙에서 이 패널 전용 클래스만 분리했다. ── */
/* 탐험의 핵심 정보 박스만 프레임을 사용하고, 모든 직계 div를 박스로 만들지는 않는다. */
#explorePanel > .stageInfo, .tabPanel > .stageInfo {
  padding: 12px 14px !important;
  background: var(--nav-bg) !important;
  border: 2px solid var(--nav-border) !important;
  box-shadow: 1px 1px 0 var(--nav-shadow) !important;
}
#explorePanel > .activityCardList, .tabPanel > .activityCardList {
  background: transparent !important; border: none !important; box-shadow: none !important;
}
.stageTitle, .statSectionLabel, .collectionBonusTitle {
  color: var(--nav-text-active) !important; text-transform: none; letter-spacing: .04em;
  text-shadow: none;
}
.stageDiffTag, .stageMapLine, .bossPatternTitle {
  color: var(--nav-text) !important; text-transform: none; letter-spacing: .04em;
  text-shadow: none !important;
}
.stageDiffTag { opacity: .8; }
.stageSub, .activityDesc { color: var(--px-muted) !important; }
.statSectionLabel {
  margin: 14px 0 6px !important; padding: 6px 9px; background: var(--px-tint);
  border-left: 4px solid var(--nav-border-active); border-bottom: 2px solid var(--nav-border);
}
.activityCard {
  padding: 10px 11px !important;
  background: var(--nav-bg) !important;
  border: 2px solid var(--nav-border) !important;
  box-shadow: 1px 1px 0 var(--nav-shadow) !important;
}
.activityCard.active {
  background: var(--nav-bg-active) !important;
  border-color: var(--nav-border-active) !important;
  box-shadow: 0 0 0 1px var(--nav-border-active) inset !important;
}
.activityCard.bossCard { border-color: var(--nav-border) !important; }
.activityCard.bossCard.active { border-color: var(--nav-border-active) !important; }
.bossCooldownNotice { margin-top:8px; padding:8px; color:#5a3d12; background:#f3e2b8; border:2px solid #8d6d22; text-align:center; font-size:11px; }
.activityHead { padding-bottom: 5px; border-bottom: 2px dashed var(--nav-border); }
.activityTitle { color: var(--nav-text-active) !important; font-size: 13px !important; text-shadow: none !important; }
.fieldElementBadge { display:inline-block; margin-top:6px; padding:5px 7px; color:var(--element-color); background:var(--px-tint); border:1px solid var(--element-color); font-size:10px; font-weight:700; text-shadow:none; line-height:1.6; }
.elementMatchupLine { font-size:10px; font-weight:700; }
.elementMatchupLine.adv { color:#1f7a3d !important; }
.elementMatchupLine.dis { color:#a3231c !important; }
.stageElementTag { text-shadow:none; }
.activityRewardRow span, .bossPatternChip {
  border-radius: 6px !important; background: var(--px-tint) !important; border: 1px solid var(--nav-border) !important; padding: 5px 7px; color: var(--nav-text) !important;
}
.activityDesc { margin-top: 4px !important; line-height: 1.35 !important; }
.activityRewardRow { margin-top: 5px !important; gap: 4px 6px !important; }
.activityBtn { margin-top: 7px !important; padding: 7px !important; }
.activityCardList { gap: 7px !important; }
.cpCompare { padding: 8px; background: var(--px-tint); border: 2px solid var(--nav-border); }
.cpCompare b { font-size: 13px !important; color: var(--nav-text-active); }
.cpRec { color: #7a6b4d !important; }
.fieldPowerBreakdown { gap: 7px !important; }
.fieldPowerBreakdown span { padding: 5px 7px; background: var(--px-tint); border: 1px solid currentColor; }
.fieldPowerBreakdown .fieldSurvivalTime { color: var(--px-muted); border-color: var(--nav-border); }
.cpOk { color: #1f7a3d !important; } .cpLow { color: #a3231c !important; }

/* 신규 사용자는 현재 해야 할 한 단계만 읽으면 된다. */
.beginnerGuide {
  margin-bottom: 10px;
  padding: 13px 14px;
  background: #fff8e6;
  border: 2px solid #b8860b;
  box-shadow: 2px 2px 0 rgba(74,52,32,.28);
  color: #3a2712;
}
.beginnerGuideHead { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.beginnerGuideHead b { font-size: 15px; color:#542f08; }
.beginnerGuideHead span { font-size: 11px; color:#725a38; }
.beginnerGuideSteps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-top:10px; }
.beginnerGuideSteps span {
  padding:6px 4px; border:1px solid #bca984; background:#eee1c5; color:#79694f;
  font-size:11px; font-weight:700; text-align:center;
}
.beginnerGuideSteps span.done { background:#dcebd7; border-color:#5f8a50; color:#286236; }
.beginnerGuideSteps span.current { background:#f4d88f; border-color:#9a6700; color:#4b2e00; }
.beginnerGuide p { margin:10px 0 8px; font-size:13px; font-weight:600; line-height:1.55; }
.beginnerGuideAction button { width:100%; min-height:42px; background:#8a4b00 !important; border-color:#5b3100 !important; color:#fffaf0 !important; font-size:13px !important; }
.beginnerGuideRunning { display:block; padding:9px; background:#e1f0dc; border:1px solid #5f8a50; color:#286236; font-size:12px; font-weight:800; text-align:center; }
.beginnerProtectionNotice { display:grid; gap:3px; margin-top:9px; padding:8px 9px; border:1px solid #4b7a9f; background:#e8f4ff; color:#214b6b; font-size:11px; line-height:1.45; }
.beginnerAutoExploreToggle { display:flex; align-items:center; gap:7px; margin:7px 0 9px; padding:8px 9px; border:1px solid #8d764c; background:#fffdf5; font-size:12px; font-weight:800; cursor:pointer; }
.beginnerProtectionInline { margin-top:7px; padding:6px 8px; border:1px solid #4f8ec4; background:#eaf5ff; color:#214b6b !important; font-weight:800; }
.contextTutorial { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; margin:8px 0 10px; padding:10px 11px; border:1px solid #4f8ec4; background:#eaf5ff; color:#183b57; }
.contextTutorial b { font-size:13px; }
.contextTutorial span { grid-column:1; font-size:11px; line-height:1.5; }
.contextTutorial button { grid-column:2; grid-row:1 / span 2; min-width:58px; padding:7px 9px; }

/* 상세 수치는 기본적으로 접어 핵심 행동 버튼보다 먼저 시선을 빼앗지 않게 한다. */
.activitySimpleSummary { margin-top:8px; padding:8px 9px; border:1px solid currentColor; background:var(--px-tint); font-size:12px; font-weight:700; line-height:1.45; }
.activitySimpleSummary.ready { color:#1f6c35; }
.activitySimpleSummary.low { color:#9a2d24; }
.activityDetails { margin-top:8px; border-top:1px dashed var(--nav-border); }
.activityDetails > summary { padding:9px 2px 3px; color:var(--px-muted); cursor:pointer; font-size:11px; font-weight:700; list-style-position:inside; }
.activityDetails[open] > summary { color:var(--nav-text-active); }
.exploreAdvancedSettings { margin-top:9px; border-top:1px dashed var(--nav-border); }
.exploreAdvancedSettings > summary { padding:9px 1px 2px; color:var(--px-muted); cursor:pointer; font-size:11px; font-weight:700; list-style-position:inside; }
.exploreAdvancedSettings[open] > summary { color:var(--nav-text-active); }
.exploreAdvancedSettingsBody { padding-top:5px; }

/* 긴 설명과 조작 글자는 8~10px까지 내려가지 않도록 읽기 하한을 둔다. */
.tabPanel { font-size: 13px; line-height: 1.5; }
.stageSub, .activityDesc, .itemSub, .modalSub, .emptyMsg,
.enchantNotice, .enchantScreenNotice, .enchantListMeta, .enchantOptionRange,
.optionsSection small, .swapCandidateMatched, .manualAutoEquipChange {
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.tabPanel button:not(.lockBtn):not(.favoriteBtn), .modalBox button, .tabPanel input, .tabPanel select {
  font-size: 12px !important;
}
.titleScreenCard { line-height:1.55; }
.titleScreenCard p { font-size:13px !important; line-height:1.55 !important; }
.titleScreenActions button, .titleScreenGuestLink { min-height:42px; font-size:13px !important; }

.itemGrid { gap: 8px !important; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)) !important; }
.itemCard { padding: 13px !important; padding-bottom: 62px !important; }
.itemCardHeaderZone, .itemSlotIcon, .itemCompare, .itemWeaponSkillInfo { border-radius: 6px !important; }
.itemSlotIcon { background: var(--px-tint-2) !important; border: 2px solid var(--nav-border) !important; }
.recommendBadge { border-radius: 6px !important; background: var(--px-gold) !important; box-shadow: 2px 2px 0 var(--nav-shadow) !important; }
.itemActions { padding-top: 8px; border-top: 2px dashed var(--nav-border); }
.statRow { border-bottom: 1px dashed var(--nav-border) !important; padding: 6px 2px !important; }
.charAvatar, .slotIcon, .consumableIcon { image-rendering: pixelated; filter: saturate(.85) contrast(1.1); }

input, select, textarea, .searchInput, .sortSelect, .promptModalInput {
  border-radius: 6px !important; border: 2px solid var(--nav-border) !important;
  background: var(--px-tint) !important; color: var(--nav-text) !important;
  box-shadow: inset 2px 2px 0 rgba(74,52,32,.15) !important;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--nav-border-active) !important; outline-offset: 1px; }

.modalOverlay { background: rgba(58,39,18,.55) !important; image-rendering: pixelated; }
.modalBox { border: 3px solid var(--nav-border) !important; padding: 20px !important; }
.toast { border-radius: 6px !important; border: 2px solid var(--nav-border) !important; background: var(--nav-bg) !important; color: var(--nav-text) !important; box-shadow: 3px 3px 0 var(--nav-shadow) !important; }
.rankRow.me { border-color: var(--nav-border-active) !important; }
.presetCard:hover, .enhanceListItem.sel { border-color: var(--nav-border-active) !important; }

@media (max-width: 560px) {
  .panels { padding: 6px !important; }
  .statusBar { padding: 6px 8px !important; }
  .statusBarCurrencies { max-width: 66% !important; gap: 3px 10px !important; }
  .activityCard { padding: 8px !important; }
  .fieldPowerBreakdown span { flex: 1; min-width: 115px; text-align: center; }
  .invToolbar, .gachaButtons, .rankButtons, .compareActions, .confirmModalActions { flex-wrap: wrap; }
  .invToolbar > *, .gachaButtons > *, .rankButtons > * { min-width: 0 !important; }
  .enhanceLayout, .compareGrid { min-width: 0 !important; }
  .compareGrid { grid-template-columns: 1fr !important; }
  .itemCard { padding: 9px !important; padding-bottom: 54px !important; }
  .statSectionLabel { margin-top: 8px !important; }
  .statRow { padding: 4px 2px !important; }
  .growthCombatSummary { grid-template-columns:1fr 1fr; }
  .growthCombatSummary > div:last-child { grid-column:1 / -1; }
  .growthStatColumns { grid-template-columns:1fr; gap:0; }
  .majorNavBtn { font-size: 12px !important; min-height: 44px !important; padding: 3px 2px !important; }
  .majorNavIcon { font-size: 15px !important; }
  .majorNavIcon .menuIconImage { width:21px; height:21px; }
  .mobileSubIcon .menuIconImage { width:22px; height:22px; }
  .majorNavBar { gap: 3px !important; padding: 2px 4px calc(2px + env(safe-area-inset-bottom)) !important; }
  .mobileSubBtn { min-width: 0 !important; min-height: 52px !important; padding: 5px 2px !important; font-size: 9.5px !important; }
  .mobileSubIcon { font-size:16px; }
  .mobileSubNav { gap: 5px !important; padding: 6px !important; }
}

@media (max-width: 360px) {
  .majorNavBtn { font-size: 11px !important; min-height: 42px !important; padding: 2px 1px !important; }
  .majorNavIcon { font-size: 14px !important; }
  .majorNavIcon .menuIconImage { width:19px; height:19px; }
  .mobileSubIcon .menuIconImage { width:20px; height:20px; }
  .majorNavBar { gap: 2px !important; }
  .mobileSubBtn { min-width: 0 !important; min-height: 50px !important; padding: 4px 1px !important; font-size: 8.5px !important; }
  .mobileSubIcon { font-size:15px; }
  .mobileSubNav { gap: 4px !important; }
  .movementKeyGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  .activityCardList { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ── 다크모드 ──
   과거(픽셀 베이지 리스킨 이전)에 쓰던 회색 배경 팔레트를 px 계열/nav 계열 변수에 다시 대입해
   전체 UI를 원래의 어두운 톤으로 되돌린다. 대부분의 패널/카드/버튼이 이 변수들을 참조하므로
   변수만 바꿔주면 하나하나 다시 칠할 필요가 없다. #gameCanvasWrap(Phaser 전투 화면)은 실제
   그래픽 에셋 색상이라 대상에서 제외한다. */
html[data-theme="dark"] {
  --px-bg: #171c24;
  --px-panel: #1c222c;
  --px-panel-2: #262e3a;
  --px-line: #3a4556;
  --px-dark: #10141b;
  --px-blue: #38bdf8;
  --px-green: #22c55e;
  --px-red: #ef4444;
  --px-gold: #facc15;
  --px-text: #e8ecf1;
  --px-muted: #8a94a3;
  --px-accent: #facc15;
  --px-tint: #232b38;
  --px-tint-2: #1c222c;

  --nav-bg: #1a1f28;
  --nav-bg-active: #262e3a;
  --nav-hover: #20262f;
  --nav-border: #46566b;
  --nav-border-active: #38bdf8;
  --nav-text: #dbe4ee;
  --nav-text-active: #ffffff;
  --nav-shadow: rgba(0,0,0,.5);
}
html[data-theme="dark"] body { background: #12161c !important; }
/* 전체 메뉴의 밝은 테마용 갈색 제목과 낮은 명도 라벨이 다크 배경에 남지 않게 한다. */
html[data-theme="dark"] #mobileSubNav.expandedMenu .mobileMenuHeader { color:#f8fafc; }
html[data-theme="dark"] #mobileSubNav.expandedMenu .mobileMenuUtility {
  background:#202a38;
  border-color:#53657c;
  color:#eaf1f8;
}
html[data-theme="dark"] #mobileSubNav.expandedMenu .mobileMenuSection {
  background:#151d29;
  border-color:#46566b;
}
html[data-theme="dark"] #mobileSubNav.expandedMenu .mobileMenuSectionTitle { color:#bfdbfe; }
html[data-theme="dark"] #mobileSubNav.expandedMenu .mobileSubBtn { color:#e2e8f0 !important; }
html[data-theme="dark"] #mobileSubNav.expandedMenu .mobileSubBtn.active { color:#ffffff !important; }
html[data-theme="dark"] #mobileSubNav.expandedMenu .mobileSubBtn.accountLocked .mobileSubLabel small,
html[data-theme="dark"] #mobileSubNav.expandedMenu .mobileSubBtn.combatLocked .mobileSubLabel small { color:#fca5a5; }
html[data-theme="dark"] .beginnerGuide { background:#172334; border-color:#4f8ec4; color:#e8ecf1; box-shadow:2px 2px 0 rgba(0,0,0,.45); }
html[data-theme="dark"] .beginnerGuideHead b { color:#f8fafc; }
html[data-theme="dark"] .beginnerGuideHead span { color:#9fb2c8; }
html[data-theme="dark"] .beginnerGuideSteps span { background:#222d3c; border-color:#46566b; color:#9fb2c8; }
html[data-theme="dark"] .beginnerGuideSteps span.done { background:#173829; border-color:#3d8057; color:#8be0a8; }
html[data-theme="dark"] .beginnerGuideSteps span.current { background:#3e331b; border-color:#b58a2b; color:#ffe29a; }
html[data-theme="dark"] .beginnerGuideRunning { background:#173829; border-color:#3d8057; color:#8be0a8; }
html[data-theme="dark"] .beginnerProtectionNotice,
html[data-theme="dark"] .contextTutorial,
html[data-theme="dark"] .beginnerProtectionInline { background:#152b3d; border-color:#4f8ec4; color:#dbeafe !important; }
html[data-theme="dark"] .beginnerAutoExploreToggle { background:#222d3c; border-color:#56677d; color:#e8ecf1; }

@media (max-width: 540px) {
  .beginnerGuideSteps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contextTutorial { grid-template-columns:minmax(0,1fr); }
  .contextTutorial button { grid-column:1; grid-row:auto; width:100%; }
}

/* ── 베이지(기본) 테마 전용: 노란색 계열 텍스트 가독성 보정 ──
   [빛] 속성과 [후광] 강화 연출 색상은 데이터(js/data.js)에 밝은 노란색(#ffdf70, #facc15)으로
   정의되어 있다. 어두운 테마 배경에서는 잘 보이지만, 밝은 베이지 배경 위에서는 대비가 낮아
   거의 보이지 않는다. 다크모드는 원래 색을 그대로 쓰고, 베이지 테마에서만 진한 대비색으로
   덮어써서 가독성을 맞춘다. */
html:not([data-theme="dark"]) .fieldElementBadge[data-el="light"] { --element-color: var(--px-accent) !important; }
html:not([data-theme="dark"]) .stageElementTag[data-el="light"],
html:not([data-theme="dark"]) .itemWeaponPassive[data-el="light"],
html:not([data-theme="dark"]) .enhanceVisualTag[data-tier="halo"] {
  color: var(--px-accent) !important;
}

/* ── 옵션 팝업 ── */
.optionsModalBox { position: relative; max-width: 380px; text-align: left; }
.optionsModalHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.optionsModalHeader h2 { margin: 0; }
.optionsCategoryTabs {
  position:sticky;
  top:-20px;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px;
  margin:0 0 12px;
  padding:6px 0 8px;
  background:var(--px-panel);
  border-bottom:1px solid var(--nav-border);
}
.optionsCategoryTab {
  min-width:0;
  min-height:36px;
  padding:5px 2px !important;
  border:1px solid var(--nav-border) !important;
  border-radius:7px !important;
  background:var(--nav-bg) !important;
  color:var(--nav-text) !important;
  font-size:11px !important;
  white-space:nowrap;
}
.optionsCategoryTab.active {
  border-color:var(--nav-border-active) !important;
  background:var(--nav-bg-active) !important;
  color:var(--nav-text-active) !important;
  box-shadow:inset 0 -2px 0 var(--nav-border-active);
}
.optionsModalBox [data-options-category] { display:none !important; }
.optionsModalBox[data-active-category="game"] [data-options-category="game"],
.optionsModalBox[data-active-category="graphics"] [data-options-category="graphics"],
.optionsModalBox[data-active-category="sound"] [data-options-category="sound"],
.optionsModalBox[data-active-category="controls"] [data-options-category="controls"],
.optionsModalBox[data-active-category="account"] [data-options-category="account"] { display:block !important; }
.optionsModalBox[data-active-category="game"] [data-options-category="game"][style*="display:flex"],
.optionsModalBox[data-active-category="account"] [data-options-category="account"][style*="display:flex"] { display:flex !important; }
@media (max-width:420px) {
  .optionsModalBox { padding:14px !important; }
  .optionsCategoryTabs { top:-14px; margin-left:-2px; margin-right:-2px; }
  .optionsCategoryTab { font-size:10.5px !important; }
}
.optionsHeaderClose {
  flex: 0 0 36px; width: 36px; height: 36px; padding: 0 !important; border-radius: 8px !important;
  border: 1px solid var(--nav-border) !important; background: var(--nav-bg) !important;
  color: var(--nav-text) !important; font-size: 24px !important; line-height: 1 !important; cursor: pointer;
}
.optionsHeaderClose:hover { border-color: var(--nav-border-active) !important; color: #fff !important; }
.optionsReportBtn {
  width: 100%; min-height: 52px; margin: 0 0 14px; padding: 9px 12px !important;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: #e0f2fe !important; background: linear-gradient(135deg, #12304b, #172554) !important;
  border: 1px solid #38bdf8 !important; border-radius: 8px !important;
  box-shadow: inset 0 0 18px rgba(56,189,248,.08); cursor: pointer;
}
.optionsReportBtn:hover { border-color: #7dd3fc !important; filter: brightness(1.08); }
.optionsReportBtn span { font-size: 13px; }
.optionsReportBtn small { color: #bae6fd !important; font-size: 10px; opacity: .82; }
.optionsSection { margin-bottom: 14px; }
.optionsSectionTitle { font-size: 12px; font-weight: 700; color: var(--px-muted) !important; margin-bottom: 6px; }
.optionsRow { display: flex; align-items: center; gap: 10px; }
.optionsSlider { flex: 1; accent-color: var(--px-blue); }
/* [2026-08-08] 볼륨 10% 단위 조절 — 슬라이더 양옆의 -/+ 버튼과 현재 수치 표시. */
.volStepBtn {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--nav-border) !important; border-radius: 6px;
  background: rgba(30,41,59,.72) !important; color: var(--px-text) !important;
  font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
}
.volStepBtn:hover { border-color: var(--px-blue) !important; filter: brightness(1.12); }
.volStepBtn:active { transform: translateY(1px); }
/* 수치는 폭이 바뀌어도 슬라이더가 흔들리지 않도록 고정폭 + 등폭 숫자로 둔다. */
.volValue {
  flex: 0 0 auto; min-width: 42px; text-align: right;
  font-size: 12px; font-weight: 700; color: var(--px-text);
  font-variant-numeric: tabular-nums;
}
/* 좁은 화면에서는 [음소거 토글]과 [− 슬라이더 + %]를 두 줄로 나눈다.
   한 줄에 모두 넣으면 토글 버튼이 34px까지 찌그러지고 가로 스크롤이 생긴다. */
.optionsRow { flex-wrap: wrap; }
.optionsRow .toggleBtn { white-space: nowrap; }
@media (max-width: 520px) {
  .optionsRow { gap: 8px; }
  .optionsRow .toggleBtn { flex: 1 0 100%; }
  .volStepBtn { width: 38px; height: 34px; font-size: 18px; }
  .optionsSlider { min-width: 0; }
  .volValue { min-width: 44px; font-size: 12px; }
}
.pcMovementKeyOptions {
  padding: 11px; border: 1px solid rgba(96,165,250,.35); border-radius: 9px;
  background: linear-gradient(135deg, rgba(15,23,42,.72), rgba(30,41,59,.58));
}
.optionsMovementKeyHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.optionsMovementKeyHead small { display: block; max-width: 250px; color: var(--px-muted); font-size: 10px; line-height: 1.45; }
.movementKeyResetBtn {
  flex: 0 0 auto; padding: 6px 10px !important; border: 1px solid var(--nav-border) !important;
  border-radius: 6px !important; background: var(--nav-bg) !important; color: var(--nav-text) !important;
  font-size: 10px !important; font-weight: 700; cursor: pointer;
}
.movementKeyGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.movementKeyGrid label { display: grid; gap: 4px; min-width: 0; color: var(--px-muted); font-size: 10px; text-align: center; }
.movementKeyGrid button {
  min-width: 0; min-height: 38px; padding: 6px 4px !important; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid #475569 !important; border-radius: 7px !important;
  background: #111827 !important; color: #e2e8f0 !important; font-size: 10px !important; font-weight: 800;
  white-space: nowrap; cursor: pointer;
}
.movementKeyGrid button:hover { border-color: #60a5fa !important; }
.movementKeyGrid button.capturing {
  color: #fef3c7 !important; border-color: #f59e0b !important;
  background: #78350f !important; box-shadow: 0 0 0 2px rgba(245,158,11,.18);
}
.pcMenuShortcutOptions { border-color: rgba(167,139,250,.38); }
.menuShortcutKeyGrid button:hover { border-color: #a78bfa !important; }

/* 베이직(베이지) 테마 키 설정 가독성.
   키 설정 카드에 다크 테마용 반투명 배경이 남아 베이지색 글자가 묻히던 부분만 한정해 보정한다. */
html:not([data-theme="dark"]) .pcMovementKeyOptions {
  background: linear-gradient(145deg, #fff8e7, #ead9ae) !important;
  border-color: #8a6a3d !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 2px 5px rgba(74,52,32,.16);
}
html:not([data-theme="dark"]) .pcMenuShortcutOptions {
  background: linear-gradient(145deg, #fff8e7, #e8d8bc) !important;
  border-color: #755b8f !important;
}
html:not([data-theme="dark"]) .pcMovementKeyOptions .optionsSectionTitle {
  color: #3a2712 !important;
  font-size: 13px;
}
html:not([data-theme="dark"]) .pcMovementKeyOptions .optionsMovementKeyHead small {
  color: #4b3821 !important;
  font-size: 11px;
  font-weight: 600;
  opacity: 1 !important;
}
html:not([data-theme="dark"]) .pcMovementKeyOptions .movementKeyGrid label {
  color: #3a2712 !important;
  font-size: 11px;
  font-weight: 800;
}
html:not([data-theme="dark"]) .pcMovementKeyOptions .movementKeyGrid button {
  color: #f8fafc !important;
  background: linear-gradient(180deg, #24334b, #111827) !important;
  border-color: #4b6485 !important;
  font-size: 12px !important;
  text-shadow: 0 1px 1px #000;
}
html:not([data-theme="dark"]) .pcMovementKeyOptions .movementKeyGrid button:hover {
  color: #fff !important;
  border-color: #2563eb !important;
  background: linear-gradient(180deg, #31527b, #17243a) !important;
}
html:not([data-theme="dark"]) .pcMovementKeyOptions .movementKeyResetBtn {
  color: #3a2712 !important;
  background: #fff4d6 !important;
  border-color: #8a6a3d !important;
}
.optionsAccountRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.optionsGmBtn {
  width: 100%; margin-top: 8px; padding: 9px; font-size: 12px; font-weight: bold; cursor: pointer;
  background: #7c2d12; color: #fed7aa; border: 1px solid #f97316; border-radius: 6px;
}
.manualSaveBtn {
  flex: 0 0 auto; min-width: 150px; padding: 9px 12px; white-space: nowrap;
  font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 6px;
  color: #dbeafe; background: #12345a; border: 1px solid #3b82f6;
}
.manualSaveBtn:hover:not(:disabled) { background: #174677; }
.manualSaveBtn:disabled { cursor: not-allowed; opacity: .55; }
.userReportModalBox { width: min(94vw, 560px) !important; max-width: 560px !important; text-align: left; }
.userReportIntro { margin: -2px 0 14px; color: var(--px-muted); font-size: 12px; line-height: 1.55; }
.userReportField { display: grid; gap: 6px; margin-bottom: 13px; font-size: 12px; font-weight: 700; }
.userReportField > span { color: var(--px-text); }
.userReportField > span small { color: var(--px-muted); font-weight: 400; }
.userReportField input[type="text"], .userReportField input[type="file"],
.userReportField select, .userReportField textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--nav-border); border-radius: 7px;
  background: var(--nav-bg); color: var(--nav-text); padding: 10px; font: inherit;
}
.userReportField input[readonly] { color: #bae6fd; opacity: .9; cursor: default; }
.userReportField textarea { min-height: 132px; resize: vertical; line-height: 1.55; font-weight: 500; }
.userReportField > small { justify-self: end; color: var(--px-muted); font-weight: 400; }
.userReportBugGuide {
  margin: 0 0 14px; padding: 11px; border: 1px solid #ef4444; border-radius: 8px;
  background: rgba(127,29,29,.18); color: var(--px-text);
}
.userReportBugGuide p { margin: 6px 0 9px; font-size: 11px; line-height: 1.55; }
.userReportBugGuide img {
  display: block; width: 100%; max-height: 150px; object-fit: contain; border-radius: 5px;
  border: 1px solid rgba(248,113,113,.45); background: #111827;
}
.userReportImagePreview { padding: 9px; border: 1px solid var(--nav-border); border-radius: 8px; background: rgba(15,23,42,.45); }
.userReportImagePreview img { display: block; max-width: 100%; max-height: 190px; margin: 0 auto 8px; object-fit: contain; border-radius: 5px; }
.userReportImagePreview div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--px-muted); font-size: 10px; }
.userReportImagePreview button { padding: 6px 8px !important; color: #fecaca !important; border-color: #ef4444 !important; }
.userReportPrivacy { margin: 2px 0 14px; padding: 9px; border-radius: 7px; background: rgba(245,158,11,.1); color: #fde68a; font-size: 10px; line-height: 1.5; }
.userReportActions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.userReportActions button { min-height: 42px; border-radius: 7px !important; font-weight: 700; }
.userReportBackBtn { color: var(--nav-text) !important; background: var(--nav-bg) !important; border-color: var(--nav-border) !important; }
.userReportSubmitBtn { color: #ecfeff !important; background: #075985 !important; border-color: #38bdf8 !important; }
.userReportSubmitBtn:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 480px) {
  .manualSaveRow { align-items: stretch !important; flex-direction: column; }
  .manualSaveBtn { width: 100%; min-width: 0; }
  .optionsReportBtn { align-items: flex-start; flex-direction: column; }
  .userReportModalBox { max-height: 92dvh !important; }
  .userReportBugGuide img { max-height: 116px; }
  .userReportActions { grid-template-columns: 1fr; }
}
.themeSwatchRow { display: flex; gap: 6px; flex-wrap: wrap; }
.themeSwatch {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 60px;
  padding: 8px 4px !important; background: var(--nav-bg) !important; border: 2px solid var(--nav-border) !important;
  border-radius: 6px !important; font-size: 9px !important; color: var(--nav-text) !important;
}
.themeSwatch.selected { border-color: var(--nav-border-active) !important; box-shadow: inset 0 0 0 1px var(--nav-border-active) !important; }
.themeSwatchDot { width: 20px; height: 20px; border-radius: 50%; background: var(--swatch-color); border: 2px solid var(--nav-border); }
.themeSwatchDot.skinPreviewDot { background-color: transparent; background-size: cover; background-position: center bottom; image-rendering: pixelated; }

/* 전체 메뉴의 독립 스킨 선택창. 옵션과 분리하고 PC·모바일에서 카드가 한 화면에 읽히게 한다. */
.skinSelectionModal { width:min(720px,94vw) !important; max-height:min(88dvh,760px) !important; overflow-y:auto; padding:0 !important; }
.skinSelectionHeader { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px 15px; border-bottom:2px solid var(--nav-border); background:linear-gradient(135deg,rgba(30,58,95,.96),rgba(47,31,82,.96)); color:#fff; }
.skinSelectionHeader small { color:#67e8f9; font-size:9px; font-weight:800; letter-spacing:.16em; }
.skinSelectionHeader h2 { margin:4px 0; font-size:23px; }
.skinSelectionHeader p { margin:0; color:#dbeafe; font-size:11px; }
.skinSelectionHeader > button { width:38px; height:38px; min-width:38px; padding:0 !important; font-size:20px; }
.skinSelectionGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:16px 18px; }
.skinSelectionCard { position:relative; width:100%; min-width:0; min-height:120px; padding:10px 7px !important; justify-content:center; }
.skinSelectionCard .skinPreviewDot,.skinSelectionCard .skinDefaultPreview { display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:10px; font-size:30px; background-size:contain; background-repeat:no-repeat; }
.skinSelectionCard .themeSwatchName { font-size:11px; font-weight:800; line-height:1.3; word-break:keep-all; }
.skinSelectionCard > small { color:var(--px-muted); font-size:9px; }
.skinSelectionCard.selected > small { color:#b77900; font-weight:800; }
.skinAuraSection { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 18px 14px; padding:12px; border:2px solid var(--nav-border); background:var(--px-tint); }
.skinAuraSection div { min-width:0; }
.skinAuraSection b,.skinAuraSection small { display:block; }
.skinAuraSection small { margin-top:4px; color:var(--px-muted); font-size:10px; line-height:1.45; }
.skinSelectionFooter { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:13px 18px 17px; border-top:1px solid var(--nav-border); }
.skinSelectionFooter button { min-height:42px; }
.season2GachaStatus .gachaDiamondIcon { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; font-size:32px; line-height:1; filter:drop-shadow(0 0 5px rgba(56,189,248,.65)); }

@media (max-width: 600px) {
  .skinSelectionModal { width:min(94vw,430px) !important; max-height:88dvh !important; }
  .skinSelectionHeader { padding:13px 14px 11px; }
  .skinSelectionHeader h2 { font-size:19px; }
  .skinSelectionHeader p { font-size:10px; }
  .skinSelectionGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:11px 12px; }
  .skinSelectionCard { min-height:104px; padding:7px 5px !important; }
  .skinSelectionCard .skinPreviewDot,.skinSelectionCard .skinDefaultPreview { width:52px; height:52px; font-size:25px; }
  .skinAuraSection { margin:0 12px 10px; padding:9px; }
  .skinSelectionFooter { padding:10px 12px 13px; }
}

/* ==========================================================
   Final readability pass: secondary screens and both themes
========================================================== */

/* 의미를 읽어야 하는 보조문구는 모바일에서도 11~12px 아래로 내리지 않는다.
   아이콘 내부 쿨다운·레벨처럼 면적이 고정된 숫자 배지는 예외다. */
.combatConsumableBtn, .combatConsumableAuto { font-size: 10px !important; }
.combatConsumableBtn em, .combatConsumableAutoLabel { font-size: 9px !important; }
.slotName, .slotEnhanceBadge, .slotEnhanceMaxTag { font-size: 11px !important; }
.activeSkillLockTag, .activeSkillMeta, .activeSkillPointSub { font-size: 11px !important; line-height: 1.45; }
.activeSkillDesc, .passivePickDesc { font-size: 12px !important; line-height: 1.55; }
.bossPatternTitle { font-size: 11px !important; }
.bossPatternChip { font-size: 10px !important; line-height: 1.4; }
.itemWeaponSkillInfo, .itemRaidBonus { font-size: 12px !important; }
.marketHeader b, .marketConsumableDesc, .marketConsumableOwned { font-size: 12px !important; line-height: 1.55; }
.raidTag, .raidModeTab small, .raidRecordGrid span, .raidDamageList > div { font-size: 10px !important; }
.raidPartGuideRow, .raidNotice, .raidDailyBox small, .raidRewardRow, .raidResultHint { font-size: 12px !important; line-height: 1.55; }
.enhanceSequenceStats small, .enhanceSequenceStats div { font-size: 11px !important; }
.compareColLabel, .compareMatchedLabel { font-size: 12px !important; }

@media (max-width: 360px) {
  .marketConsumableDesc, .marketConsumableOwned,
  .raidPartGuideRow, .raidNotice, .raidDailyBox small, .raidRewardRow, .raidResultHint {
    font-size: 11px !important;
  }
}

/* 공용 button 규칙이 원형 복귀 아이콘을 양피지 사각 버튼으로 되돌리지 않도록 고정한다. */
.villageReturnBtn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid rgba(226,232,240,.46) !important;
  border-radius: 50% !important;
  background: rgba(12,16,23,.78) !important;
  color: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.38) !important;
  font-size: 20px !important;
}
.villageReturnBtn:hover { background: rgba(20,27,38,.9) !important; border-color: #fde68a !important; color: #fde68a !important; }
.villageReturnBtn:active { transform: scale(.94) !important; box-shadow: 0 1px 3px rgba(0,0,0,.34) !important; }

/* 베이직 테마에 남아 있던 다크 전용 카드·회색 글자를 양피지 팔레트로 통일한다. */
html[data-theme="default"] .activeSkillCard,
html[data-theme="default"] .activeSkillPointHeader,
html[data-theme="default"] .activeSkillUpgradeBtn,
html[data-theme="default"] .activeSkillResetBtn {
  background: var(--px-tint) !important;
  border-color: var(--nav-border) !important;
  color: var(--px-text) !important;
  box-shadow: none !important;
}
html[data-theme="default"] .activeSkillName,
html[data-theme="default"] .activeSkillPointRow { color: var(--px-text) !important; }
html[data-theme="default"] .activeSkillDesc,
html[data-theme="default"] .activeSkillDesc.next,
html[data-theme="default"] .activeSkillMeta,
html[data-theme="default"] .activeSkillLockTag,
html[data-theme="default"] .activeSkillPointSub { color: var(--px-muted) !important; }
html[data-theme="default"] .activeSkillLevelTag,
html[data-theme="default"] .activeSkillPointTitle { color: #774600 !important; }
html[data-theme="default"] .activeSkillUpgradeBtn.upgradeReady {
  background: #8a4b00 !important;
  border-color: #5b3100 !important;
  color: #fffaf0 !important;
}

html[data-theme="default"] .itemWeaponSkillInfo,
html[data-theme="default"] .itemRaidBonus {
  background: #fbf3de !important;
  border-color: #9b8567 !important;
  color: #3a2712 !important;
}

html[data-theme="default"] .marketHeader,
html[data-theme="default"] .marketConsumableDesc { color: var(--px-muted) !important; }
html[data-theme="default"] .marketConsumableName { color: var(--px-text) !important; }
html[data-theme="default"] .marketConsumableOwned { color: #1e6b35 !important; }
html[data-theme="default"] .marketConsumableOwned.notOwned { color: #704400 !important; }

/* 랭킹은 베이직 모드에서도 다크 화면으로 남아 있던 가장 큰 테마 단절 지점이었다. */
html[data-theme="default"] .levelRankingHeader {
  background: #ead9bb !important;
  border-color: #8a6a3d !important;
  box-shadow: none !important;
}
html[data-theme="default"] .levelRankingHeader h2 { color: #5b3607 !important; }
html[data-theme="default"] .levelRankingHeader p,
html[data-theme="default"] .levelRankingGuide { color: var(--px-muted) !important; }
html[data-theme="default"] .levelRankingGuide,
html[data-theme="default"] .levelRankingList {
  background: #f4ead7 !important;
  border-color: #9b8567 !important;
}
html[data-theme="default"] .levelRankRow {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #c5b08d !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--px-text) !important;
}
html[data-theme="default"] .levelRankRow:hover,
html[data-theme="default"] .levelRankRow:focus { background: #ead9bb !important; }
html[data-theme="default"] .levelRankRow.me { background: #dcebd7 !important; box-shadow: inset 3px 0 #2f7d32 !important; }
html[data-theme="default"] .levelRankPlace,
html[data-theme="default"] .levelRankIdentity small,
html[data-theme="default"] .levelRankLevel small,
html[data-theme="default"] .levelRankMeta em { color: var(--px-muted) !important; }
html[data-theme="default"] .levelRankLevel b,
html[data-theme="default"] .levelRankArrow { color: #075985 !important; }

html[data-theme="default"] .rankerEquipmentModal {
  background: #f4ead7 !important;
  border-color: #8a6a3d !important;
  color: var(--px-text) !important;
}
html[data-theme="default"] .rankerModalClose { color: #5b4630 !important; }
html[data-theme="default"] .rankerProfile h2,
html[data-theme="default"] .rankEquipmentTitle { color: #5b3607 !important; border-color: #9b8567 !important; }
html[data-theme="default"] .rankerProfile p,
html[data-theme="default"] .rankEquipSlot,
html[data-theme="default"] .rankEquipCard small,
html[data-theme="default"] .rankEquipEmpty { color: var(--px-muted) !important; }
html[data-theme="default"] .rankEquipCard {
  background: #fbf3de !important;
  color: var(--px-text) !important;
  box-shadow: none !important;
}
html[data-theme="default"] .rankEquipCard strong { color: var(--px-text) !important; }

/* 랭킹의 작은 메타 정보도 주요 콘텐츠이므로 테마와 관계없이 읽을 수 있는 크기로 맞춘다. */
.levelRankingHeader p, .levelRankingGuide { font-size: 12px !important; line-height: 1.5; }
.levelRankRow {
  border: 0 !important;
  border-bottom: 1px solid #263449 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="default"] .levelRankRow { border-bottom-color: #c5b08d !important; }
.levelRankIdentity small, .levelRankLevel small, .levelRankMeta em { font-size: 11px !important; }
.rankEquipSlot, .rankEquipCard small, .rankEquipCard em, .rankEquipEmpty { font-size: 11px !important; line-height: 1.45; }
@media (max-width: 600px) {
  .levelRankingHeader p, .levelRankingGuide { font-size: 11px !important; }
  .levelRankIdentity small, .levelRankLevel small { font-size: 10px !important; }
  .rankEquipCard strong { font-size: 12px !important; }
}

/* Basic theme readability audit (2026-07-30)
   Only parchment/base UI surfaces are normalized here. Battle HUDs, raids,
   gacha, world-map, Eterna and Seonghae use intentional dark art surfaces. */
html[data-theme="default"] {
  --basic-ink: #2f2114;
  --basic-title: #4b2d0f;
  --basic-muted: #60482f;
  --basic-line: #9b8567;
  --basic-surface: #f7edda;
  --basic-surface-2: #ead9bb;
  --basic-link: #075985;
  --basic-success: #166534;
  --basic-warning: #854d0e;
  --basic-danger: #991b1b;
}

html[data-theme="default"] :is(
  .itemCard, .equipSlot, .dpsBox, .statList,
  .invSettings, .presetCard, .consumableRow,
  .enhanceListItem, .enhanceCostBox, .enhanceQuickBar,
  .slotEnhanceCard, .balanceBonusBar, .pvpOppCard,
  .mailRow, .materialWalletCard, .setInheritanceRow,
  .setEssenceRow, .manaCoreCard, .enchantGearItem,
  .enchantOptionRow, .friendCard, .auctionItemCard
) {
  background: var(--basic-surface) !important;
  border-color: var(--basic-line) !important;
  color: var(--basic-ink) !important;
  text-shadow: none !important;
}

html[data-theme="default"] :is(
  .itemCard, .equipSlot, .dpsBox, .statList,
  .invSettings, .presetCard, .consumableRow,
  .enhanceListItem, .enhanceCostBox, .enhanceQuickBar,
  .slotEnhanceCard, .balanceBonusBar, .pvpOppCard,
  .mailRow, .materialWalletCard, .setInheritanceRow,
  .setEssenceRow, .manaCoreCard, .enchantGearItem,
  .enchantOptionRow, .friendCard, .auctionItemCard
) :is(p, small, label, dt, dd, em) {
  color: var(--basic-muted) !important;
  text-shadow: none !important;
}

html[data-theme="default"] :is(
  .invSettings, .presetCard, .consumableRow,
  .enhanceCostBox, .enhanceQuickBar, .slotEnhanceCard,
  .materialWalletCard, .setInheritanceRow, .setEssenceRow,
  .manaCoreCard, .enchantOptionRow, .friendCard, .auctionItemCard
) :is(h2, h3, h4, strong, b) {
  color: var(--basic-title) !important;
  text-shadow: none !important;
}

html[data-theme="default"] :is(
  .inventorySettingsBody, .materialWalletGrid, .setInheritancePanel,
  .manaCorePanel, .mailList, .presetList
) {
  color: var(--basic-ink) !important;
}

html[data-theme="default"] .materialWalletCard dt,
html[data-theme="default"] .materialWalletCard dd,
html[data-theme="default"] .manaCoreCard small,
html[data-theme="default"] .manaCoreHelp,
html[data-theme="default"] .setInheritanceRow small,
html[data-theme="default"] .setInheritancePrice small {
  color: var(--basic-muted) !important;
}

html[data-theme="default"] :is(
  .friendPanel, .equipmentAuction
) {
  color: var(--basic-ink) !important;
}

html[data-theme="default"] :is(.friendHero, .auctionHero) {
  background:
    radial-gradient(circle at 92% 0, rgba(184,134,11,.16), transparent 42%),
    linear-gradient(135deg, #f7edda, #ead9bb) !important;
  border-color: var(--basic-line) !important;
  color: var(--basic-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58) !important;
}

html[data-theme="default"] :is(.friendHero, .auctionHero) h2 {
  color: var(--basic-title) !important;
  text-shadow: none !important;
}

html[data-theme="default"] :is(.friendHero, .auctionHero) :is(p, small, span) {
  color: var(--basic-muted) !important;
  text-shadow: none !important;
}

html[data-theme="default"] :is(.friendCodeBox, .auctionSellLayout section, .auctionSellLayout aside) {
  background: var(--basic-surface) !important;
  border-color: var(--basic-line) !important;
  color: var(--basic-ink) !important;
}

html[data-theme="default"] .friendCodeBox code {
  color: var(--basic-title) !important;
  text-shadow: none !important;
}

html[data-theme="default"] :is(.friendSearch input, .auctionSellLayout input) {
  background: #fffaf0 !important;
  border-color: var(--basic-line) !important;
  color: var(--basic-ink) !important;
  caret-color: var(--basic-title) !important;
  text-shadow: none !important;
}

html[data-theme="default"] :is(.friendSearch input, .auctionSellLayout input)::placeholder {
  color: #786246 !important;
  opacity: 1;
}

html[data-theme="default"] :is(.friendTabs button, .auctionTabs button, .friendActions button) {
  background: var(--basic-surface-2) !important;
  border-color: var(--basic-line) !important;
  color: var(--basic-title) !important;
  text-shadow: none !important;
}

html[data-theme="default"] :is(.friendTabs button.active, .auctionTabs button.active) {
  background: #774600 !important;
  border-color: #4b2d0f !important;
  color: #fffaf0 !important;
}

html[data-theme="default"] :is(
  .friendNotice, .friendEmpty, .friendIdentity small,
  .auctionHero p, .auctionItemMeta, .auctionSeller,
  .auctionStatus, .auctionHint, .auctionEmpty
) {
  color: var(--basic-muted) !important;
  text-shadow: none !important;
}

html[data-theme="default"] .friendIdentity code,
html[data-theme="default"] :is(.auctionHero strong, .auctionPrice) {
  color: var(--basic-link) !important;
  text-shadow: none !important;
}

html[data-theme="default"] .auctionItemCard header b {
  color: var(--auction-rarity) !important;
}

html[data-theme="default"] :is(.auctionFeePreview, .auctionFeePaid) {
  background: #f2dfb8 !important;
  border-color: #a16207 !important;
  color: #713f12 !important;
  text-shadow: none !important;
}

html[data-theme="default"] .friendSearch button {
  background: #3730a3 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}

html[data-theme="default"] .friendActions .friendAccept {
  background: #166534 !important;
  border-color: #15803d !important;
  color: #fff !important;
}

html[data-theme="default"] .friendActions .friendBlock {
  background: #7f1d1d !important;
  border-color: #991b1b !important;
  color: #fff !important;
}

html[data-theme="default"] :is(.friendEmpty, .auctionEmpty) {
  background: rgba(255,250,240,.52) !important;
  border-color: var(--basic-line) !important;
}

html[data-theme="default"] :is(.friendError, .auctionEmpty.error) {
  background: #f7d8d4 !important;
  border-color: #b4534b !important;
  color: var(--basic-danger) !important;
}

html[data-theme="default"] :is(
  .successText, .positiveText, .marketConsumableOwned
) { color: var(--basic-success) !important; }
html[data-theme="default"] :is(
  .warningText, .costWarning, .notEnough
) { color: var(--basic-warning) !important; }
html[data-theme="default"] :is(
  .errorText, .dangerText
) { color: var(--basic-danger) !important; }

@media (max-width: 600px) {
  html[data-theme="default"] :is(
    .consumableRow, .materialWalletCard, .setInheritanceRow,
    .manaCoreCard, .enchantOptionRow, .friendCard, .auctionItemCard
  ) {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
}

/* Seonghae is an illustrated dark content screen in both themes.
   Keep its route buttons above the global parchment button skin. */
.seonghaeVillagePanel .seonghaeHuntBtn {
  border: 1px solid #67e8f9 !important;
  background: linear-gradient(100deg, #075985, #4338ca) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(8,145,178,.2) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.72) !important;
}
.seonghaeVillagePanel .seonghaeHuntBtn:hover {
  background: linear-gradient(100deg, #0e7490, #4f46e5) !important;
}
.seonghaeVillagePanel .seonghaeHuntBtn.stop {
  border-color: #fca5a5 !important;
  background: linear-gradient(100deg, #991b1b, #7f1d1d) !important;
}
.seonghaeVillagePanel .seonghaeFieldCard.locked .seonghaeHuntBtn {
  border-color: #475569 !important;
  background: #172033 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}