/* =========================================================================
   던전 오브 소울 — UI 스타일
   image/demo.png · image/ui demo.png 목업 기준: 짙은 네이비 + 금색 장식 프레임,
   모서리를 깎은(팔각형) 버튼/탭, 광택 스탯바, Noto Sans KR.
   기존 마크업/클래스 이름은 유지하고 외형만 목업에 맞췄다.
   ========================================================================= */

/* 실제 게임 코드(js/html)에 등장하는 글자만 남긴 서브셋 WOFF2 — 원본 TTF는 장당
   5~12MB(완성형 한글 전체+한자 포함)라 그대로 쓰면 로딩이 느리고, 로딩 중간에
   폰트가 바뀌며 레이아웃이 밀리는 원인이 됐다(총 70MB+ → 약 600KB로 축소).
   혹시 나중에 서브셋에 없는 새 글자를 쓰게 되면 이 글꼴만 그 글자를 건너뛰고
   font-family 목록의 다음 글꼴(Noto Sans KR 등)로 자연스럽게 대체되니, 그때 다시
   전체 텍스트를 스캔해서 서브셋을 다시 만들면 된다. */
@font-face {
  font-family: "KoPubWorld Dotum";
  src: url("font/KOPUBWORLD_TTF_FONTS2026/KoPubWorld%20Dotum%20Light.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MaruBuri";
  src: url("font/maruburi_ttf/MaruBuri-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MaruBuri";
  src: url("font/maruburi_ttf/MaruBuri-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MaruBuri";
  src: url("font/maruburi_ttf/MaruBuri-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MaruBuri";
  src: url("font/maruburi_ttf/MaruBuri-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MaruBuri";
  src: url("font/maruburi_ttf/MaruBuri-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "KoPubWorld Batang";
  src: url("font/KOPUBWORLD_TTF_FONTS2026/KoPubWorld%20Batang%20Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "KoPubWorld Dotum";
  src: url("font/KOPUBWORLD_TTF_FONTS2026/KoPubWorld%20Dotum%20Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "KoPubWorld Dotum";
  src: url("font/KOPUBWORLD_TTF_FONTS2026/KoPubWorld%20Dotum%20Bold.woff2")
    format("woff2");
  /* 700 900처럼 폭 범위(range)로 선언하면 크론뮴 캔버스 텍스트 매칭이 깨져서, 이 뒤에
     선언된 다른 커스텀 폰트(예: 데미지 스킨 "임팩트 고딕")가 캔버스 fillText에서만
     조용히 기본 세리프로 대체되는 버그가 있었다. 고정값 하나로 선언해 회피한다. */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* 상점 "데미지 스킨" 전용 — 롯데 자이언츠 굿즈 폰트 "자이언츠"의 아웃라인(Inline) 스타일.
   캔버스 데미지 숫자에만 쓰여서 실제 등장 글자(숫자·"치명타!")만 남긴 서브셋(약 8KB). */
@font-face {
  font-family: "Giants Inline";
  src: url("font/giants_inline/Giants-Inline.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* 데미지 스킨 폰트 모음 — 전부 위와 같은 이유로 최소 서브셋(각 1.5~9KB)만 등록한다.
   font-weight를 반드시 명시한다: 캔버스 데미지 숫자는 항상 `bold`로 그리는데, 이 값이
   빠져 있으면 폰트 자체는 정상 로드되어도(document.fonts.check()는 true) 캔버스
   fillText에서만 조용히 기본 세리프 폭트로 대체되는 경우가 있었다(예: 임팩트 고딕). */
@font-face {
  font-family: "NEXON Gothic Impact";
  src: url("font/dmgskin_nexon_gothic/nexon_gothic.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Distort Curse";
  src: url("font/dmgskin_distort/distort.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NalSun Blade";
  src: url("font/dmgskin_nalsun/nalsun.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yeongwol Ink";
  src: url("font/dmgskin_yeongwol/yeongwol.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Keris Jelly";
  src: url("font/dmgskin_keris_jelly/keris_jelly.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Puzzle Block";
  src: url("font/dmgskin_puzzle_block/puzzle_block.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Griun Doodle";
  src: url("font/dmgskin_griun/griun.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SSRO WaterDrop";
  src: url("font/dmgskin_waterdrop/waterdrop.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stellar Serif Engrave";
  src: url("font/dmgskin_stellar/stellar.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mona Pixel KR";
  src: url("font/dmgskin_mona_pixel/mona_pixel.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Greenumbrella DaeHan";
  src: url("font/dmgskin_greenumb/greenumb.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 옵션 화면에서 조절하는 HUD 배율(1 = 100%) — game.js가 슬라이더 값으로 갱신한다 */
  --ui-hud-scale: 1;
  --ui-basic-scale: 1;
  --ui-hotbar-scale: 1;

  /* 표면 / 패널 */
  --bg-deep: #070b14;
  --panel-grad: linear-gradient(160deg, #17223c 0%, #0d1526 58%, #111c34 100%);
  --panel-solid: #101a2e;
  --panel-border: #33456b;
  --panel-border-soft: #26324e;
  --panel-shadow:
    0 0 0 1px #0a1122, inset 0 0 42px rgba(0, 0, 0, 0.5),
    0 14px 40px rgba(0, 0, 0, 0.7);

  /* 금색 */
  --gold: #d9a441;
  --gold-bright: #f5d891;
  --gold-mid: #b9863a;
  --gold-dark: #7c5a26;
  --gold-fill: linear-gradient(180deg, #4c3c1f 0%, #2c2616 48%, #1b1710 100%);
  --gold-glow: 0 0 16px rgba(245, 216, 145, 0.45);

  /* 텍스트 */
  --text: #e2e8f4;
  --text-soft: #aeb9d0;
  --text-dim: #7d8bab;
  --text-gold: #f0c96b;

  /* 상태색 */
  --hp: linear-gradient(180deg, #ff4d7d, #c30f3e);
  --shield: linear-gradient(180deg, #a8e8ff, #2f7fd1);
  --exp: linear-gradient(180deg, #b98bff, #6a2ec7);
  --boss: linear-gradient(180deg, #ff5a5a, #a11414);
  --gloss: rgba(255, 255, 255, 0.16);

  --font: "MaruBuri", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-card:
    "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui,
    sans-serif;
  --font-display:
    "KoPubWorld Dotum", "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* 모서리 깎은 팔각형 */
  --oct: polygon(
    9px 0,
    calc(100% - 9px) 0,
    100% 9px,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    9px 100%,
    0 calc(100% - 9px),
    0 9px
  );
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: radial-gradient(
    ellipse at 50% 26%,
    #101a30 0%,
    #0a1120 55%,
    #060a12 100%
  );
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#game-canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  image-rendering: auto;
  transform: translateZ(0);
  will-change: transform;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a1120;
}
::-webkit-scrollbar-thumb {
  background: #33456b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-dark);
}

.screen {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.screen.active {
  display: flex;
}
.hidden {
  display: none !important;
}

/* =========================================================================
   금색 장식 프레임 — 패널 네 귀퉁이 브래킷 + 상/하 중앙 다이아 스터드
   ========================================================================= */
.panel,
.modal-inner,
.option-panel {
  position: relative;
}

/* GPT 생성 금속 프레임(image_webp/ui2/ui_panel.webp)을 9-slice border-image로 두른다.
   가운데(fill 없음)는 그대로 뚫려 있어 기존 .panel/.lobby-section 자체 background가 비친다. */
.panel,
.modal-inner,
.lobby-section {
  border-style: solid;
  border-width: 22px;
  border-image-source: url("image_webp/ui2/ui_panel.webp");
  border-image-slice: 80 92 fill;
  border-image-width: 22px;
  border-image-repeat: stretch;
}
.modal-inner {
  border-image-source: url("image_webp/ui2/ui_modal_frame.webp");
  border-image-slice: 72 78 fill;
}
.panel,
.modal-inner {
  padding: 22px 30px;
}

/* =========================================================================
   타이틀 화면
   ========================================================================= */
#screen-title {
  flex-direction: column;
}

.title-bg {
  position: absolute;
  inset: 0;
  background-image: url("image_webp/background_title.webp");
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.75) saturate(1.05);
}
.title-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 50% 22%,
      rgba(0, 0, 0, 0) 0%,
      rgba(6, 10, 20, 0.4) 60%,
      rgba(6, 10, 20, 0.9) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(6, 10, 20, 0.15) 0%,
      rgba(6, 10, 20, 0.3) 45%,
      rgba(6, 10, 20, 0.96) 100%
    );
}

.title-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  margin-bottom: 6vh;
  animation: rise 0.9s ease-out;
  background-image: url("image_webp/ui2/ui_title_emblem.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: min(640px, 86vw) auto;
  /* 엠블럼 그림 자체의 폭(= background-size와 같은 min(640px,86vw) 수식) 기준으로
     여백을 잡아야 화면 크기가 바뀌어도 크레스트/리본 그림과 같은 비율로 따라 움직인다.
     컨테이너 쿼리(cqw)는 구형/일부 브라우저에서 지원이 안 돼 조용히 무시될 수 있어서
     대신 어디서나 되는 calc()+min()으로 그림 폭에 직접 비례시킨다. */
  padding-top: calc(min(640px, 86vw) * 0.2);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.game-logo {
  font-family: "KoPubWorld Batang", var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.5vw, 52px);
  letter-spacing: 8px;
  margin: 0;
  color: #f6ecd2;
  text-shadow:
    0 0 26px rgba(245, 216, 145, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.9);
}
.game-logo::after {
  content: "";
  display: block;
  width: 78%;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold) 25%,
    var(--gold-bright) 50%,
    var(--gold) 75%,
    transparent
  );
}
.game-sub {
  font-family: var(--font-display);
  margin: 2px 0 14px;
  color: var(--gold);
  letter-spacing: 9px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}
.title-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.cloud-auth-inner {
  width: min(320px, 84vw);
  text-align: center;
}
.cloud-auth-inner h2 {
  margin: 0 0 10px;
  color: var(--gold-bright);
  font-size: 16px;
}
.cloud-status-text {
  min-height: 16px;
  margin: 0 0 8px;
  color: var(--text-dim);
  font-size: 12px;
}
.cloud-status-text.error { color: #ff9a9a; }
.cloud-auth-inner input {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(218, 174, 78, 0.3);
  border-radius: 3px;
  color: #f6ecd2;
  background: rgba(0, 0, 0, 0.38);
}
.cloud-auth-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 9px;
}
.cloud-auth-actions .menu-btn { font-size: 11px; padding: 7px 10px; }
.cloud-auth-actions .menu-btn:disabled { opacity: 0.55; cursor: wait; }
.title-footer {
  position: relative;
  z-index: 2;
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 12px;
}
/* 배포 버전 확인용 — 타이틀 화면 오른쪽 아래에 작게. sw.js의 CACHE_NAME을 그대로
   읽어와서 채우므로(pwa.js) 따로 손으로 맞춰야 하는 값이 늘어나지 않는다. */
.build-version-badge {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 3;
  margin: 0;
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  letter-spacing: 0.3px;
  pointer-events: none;
}

/* =========================================================================
   버튼 — 모서리 깎은 팔각형 (기본: 네이비 / 주요·활성: 금색 그라디언트)
   ========================================================================= */
.menu-btn,
.img-btn {
  position: relative;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold-bright);
  border: none;
  background-color: #0d1526;
  background-image: url("image_webp/ui2/ui_button_default.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  clip-path: var(--oct);
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  transition:
    filter 0.12s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-image 0.05s ease;
}
.game-sub,
.menu-btn,
.img-btn,
.option-panel h2,
.modal-inner h2,
.stage-label,
.tab-btn,
.adv-card h3,
#roulette-hud strong {
  font-family: var(--font-display);
}
.skill-card .card-name,
.pause-card-name,
.equip-slot-box .slot-item-name,
.item-card .item-name,
.shop-card .shop-name,
.skill-tooltip .tooltip-name {
  font-family: var(--font-card);
}
.menu-btn {
  padding: 10px 24px;
  font-size: 13px;
}
.menu-btn:hover,
.img-btn:hover {
  background-image: url("image_webp/ui2/ui_button_hover.webp");
  box-shadow: var(--gold-glow);
  transform: translateY(-1px);
}
.menu-btn:active,
.img-btn:active {
  background-image: url("image_webp/ui2/ui_button_pressed.webp");
  transform: translateY(0);
}
.menu-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* 금색(주요) 버튼 — 타이틀 시작 / 탐험 시작 / 확인 등. 텍스처는 공용, 발광만 더 강하게. */
.img-btn,
.btn-explore,
#btn-option-close,
#btn-next-stage,
#btn-resume {
  color: var(--gold-bright);
  box-shadow: var(--gold-glow);
}
.img-btn {
  padding: 15px 44px;
  font-size: 16px;
  letter-spacing: 3px;
}
.img-btn-option {
  padding: 11px 36px;
  font-size: 14px;
}
.img-btn:hover,
.btn-explore:hover {
  box-shadow: 0 0 22px rgba(245, 216, 145, 0.6);
}

.menu-btn.small {
  padding: 6px 15px;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.menu-btn.ghost {
  background: transparent;
  border-color: var(--panel-border-soft);
  color: var(--text-soft);
  box-shadow: none;
  margin-top: 14px;
}

/* =========================================================================
   공통 패널 / 옵션
   ========================================================================= */
.panel {
  background: var(--panel-grad);
  box-shadow: var(--panel-shadow);
  min-width: 340px;
  max-width: 92vw;
}
.option-panel h2,
.modal-inner h2 {
  font-weight: 900;
  margin: 0 0 16px;
  text-align: center;
  color: var(--gold-bright);
  letter-spacing: 3px;
  text-shadow: 0 0 14px rgba(245, 216, 145, 0.3);
}

.option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 14px;
}
.option-row label {
  width: 128px;
  flex-shrink: 0;
  color: var(--text-soft);
}
.option-row input[type="range"] {
  flex: 1;
  accent-color: var(--gold);
}
.option-row select {
  flex: 1;
  background: #0f1830;
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 4px 6px;
  font-family: var(--font);
}
.option-row span {
  width: 28px;
  text-align: right;
  color: var(--gold-bright);
}
.option-checkbox label {
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.option-row select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.option-help-note {
  margin: -8px 0 14px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.option-help {
  margin-top: 12px;
  border-top: 1px solid var(--panel-border-soft);
  padding-top: 14px;
}
.option-help h3 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.option-help ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-soft);
}
.option-help b {
  color: var(--gold-bright);
}
.option-actions {
  margin-top: 20px;
  text-align: center;
}

/* =========================================================================
   게임 화면 / HUD
   ========================================================================= */
#screen-game {
  background: #000;
}
/* 창모드 "창 크기" 옵션 — 실제 브라우저 탭 크기는 JS로 바꿀 수 없어서 대신 이 프레임을
   선택한 해상도로 고정하고 가운데 배치한다(레터박스). 캔버스/HUD/모달은 전부 이 프레임을
   기준으로 절대 위치하므로, 자동(기본값)일 땐 이전과 동일하게 화면을 꽉 채운다. */
#game-window-frame {
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
}
#game-window-frame.is-sized {
  max-width: 96vw;
  max-height: 96vh;
  border: 1px solid rgba(177, 141, 78, 0.55);
  box-shadow: 0 0 0 4px #000, 0 12px 40px rgba(0, 0, 0, 0.7), inset 0 0 24px rgba(0, 0, 0, 0.6);
}
#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font);
}

.hud-top-left {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 270px;
}
/* 다른 패널(.panel/.modal-inner/.lobby-section)과 같은 금속 프레임(image_webp/ui2/ui_panel.webp)을
   두께만 줄여서 두른다 — HUD만 다른 모양(둥근 테두리)이라 붕 떠 보이던 것을 통일했다. */
.hud-status-panel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(
    160deg,
    rgba(23, 34, 60, 0.94),
    rgba(13, 21, 38, 0.94)
  );
  border-style: solid;
  border-width: 12px;
  border-image-source: url("image_webp/ui2/ui_panel.webp");
  border-image-slice: 80 92 fill;
  border-image-width: 12px;
  border-image-repeat: stretch;
  padding: 2px 6px 2px 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.hud-status-body {
  flex: 1;
  min-width: 0;
}
.hud-portrait {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.hud-portrait .portrait-frame {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.hud-level-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #241705;
  background: linear-gradient(145deg, var(--gold-mid), var(--gold-bright));
  border: 1px solid var(--gold-bright);
  box-shadow:
    0 0 6px rgba(245, 216, 145, 0.55),
    0 0 0 1px #0a1122;
}
.stage-label {
  font-weight: 800;
  color: var(--gold-bright);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 7px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}
.stage-label span {
  color: #ffe08a;
}

.bar {
  position: relative;
  height: 18px;
  background: #0b1122;
  box-sizing: border-box;
  border-style: solid;
  border-width: 5px 12px;
  border-image-source: url("image_webp/ui_polish_20260921/ui_hud_bar_frame.webp");
  border-image-slice: 10 30 fill;
  border-image-width: 5px 12px;
  border-image-repeat: stretch;
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  margin-bottom: 6px;
  /* 오른쪽 끝을 뾰족하게 (목업 HUD 바) */
  clip-path: none;
}
.bar-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  transform-origin: left;
  transition: width 0.25s ease;
}
.bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42%;
  background: var(--gloss);
}
.hp-fill {
  background: var(--hp);
}
.shield-bar {
  height: 10px;
  margin-top: -4px;
  display: none;
}
.shield-bar.show {
  display: block;
}
.shield-fill {
  background: var(--shield);
}
.shield-bar .bar-text {
  font-size: 9px;
}
.hud-meter-row.mana-row {
  display: none;
}
.hud-meter-row.mana-row.show {
  display: flex;
}
.mana-fill {
  background: linear-gradient(180deg, #9fd7ff, #2f6fe0);
}
.exp-fill {
  background: var(--exp);
}
.boss-fill {
  background: var(--boss);
}
.bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

/* 웹(비터치 기기)에서는 좌측 상단 체력/보호막/경험치 바를 더 크게 보여준다 */
body:not(.touch-device) .hud-top-left {
  width: 360px;
}
body:not(.touch-device) .stage-label {
  font-size: 17px;
}
body:not(.touch-device) .bar {
  height: 25px;
  margin-bottom: 8px;
}
body:not(.touch-device) .shield-bar {
  height: 14px;
  margin-top: -5px;
}
body:not(.touch-device) .bar-text {
  font-size: 14px;
}
body:not(.touch-device) .shield-bar .bar-text {
  font-size: 11px;
}
body:not(.touch-device) .hud-portrait {
  width: 60px;
  height: 60px;
}
body:not(.touch-device) .hud-level-badge {
  min-width: 22px;
  height: 22px;
  font-size: 12px;
}

.hud-top-right {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.currency {
  border: 0;
  background-image: url("image_webp/ui_polish_20260921/ui_currency_badge.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  border-radius: 0;
  padding: 6px 16px;
  min-height: 40px;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
}

/* 재화 아이콘 — image_webp/ui/{coin,gem}.webp (demo.png HUD에서 크롭) */
.coin-icon,
.soul-icon,
.diamond-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;
  flex-shrink: 0;
}
.coin-icon {
  background-image: url("image_webp/ui/coin.webp");
}
.soul-icon {
  background-image: url("image_webp/ui/gem.webp");
}
.soul-icon-img {
  display: inline-block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: middle;
}
.diamond-icon {
  background-image: url("image_webp/icon/icon_currency_diamond.webp");
}

/* GPT 생성 아이콘(image_webp/icon/*.webp) — 이모지가 있던 자리에 <img>로 대체할 때 공용 크기 */
.icon-img {
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: -0.15em;
}
.icon-img-inline {
  width: 1.1em;
  height: 1.1em;
}

.hud-boss {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, 62vw);
  display: none;
  text-align: center;
}
.hud-boss.show {
  display: block;
}
.boss-name {
  font-weight: 800;
  color: #ffb0b0;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}
.boss-bar {
  height: 22px;
  border-width: 8px 28px;
  border-image-source: url("image_webp/ui_polish_20260921/ui_boss_bar_frame.webp");
  border-image-slice: 15 56 fill;
  border-image-width: 8px 28px;
}

.hud-fps {
  position: absolute;
  bottom: 20px;
  left: 16px;
  font-size: 11px;
  color: #9be89b;
}

.hotbar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  padding: 9px 14px;
  background: linear-gradient(
    180deg,
    rgba(23, 34, 60, 0.9),
    rgba(13, 21, 38, 0.9)
  );
  border: 1px solid #2b3a5c;
  box-shadow:
    0 0 0 1px #0a1122,
    0 10px 26px rgba(0, 0, 0, 0.65),
    inset 0 0 20px rgba(217, 164, 65, 0.06);
  clip-path: polygon(
    14px 0,
    calc(100% - 14px) 0,
    100% 50%,
    calc(100% - 14px) 100%,
    14px 100%,
    0 50%
  );
}
.slot {
  position: relative;
  width: 50px;
  height: 50px;
  background-image: url("image_webp/ui2/ui_hotbar_slot.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  pointer-events: auto;
  cursor: default;
  transition:
    filter 0.15s ease,
    opacity 0.15s ease;
}
.slot:hover {
  filter: brightness(1.25) drop-shadow(0 0 6px rgba(217, 164, 65, 0.6));
}
.slot.active {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(245, 216, 145, 0.5));
}
/* 스킬 아이콘을 슬롯의 주인공으로 — 키 글자는 오른쪽 아래 작은 배지로 뺐다 */
.slot-icon {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.slot-key {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: 10px;
  color: var(--gold-bright);
  font-weight: 800;
  background: rgba(4, 8, 16, 0.75);
  border-radius: 3px;
  padding: 0 3px;
  line-height: 1.4;
  pointer-events: none;
}
.slot-cd {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: rgba(4, 8, 16, 0.6);
  /* 슬롯 배경(육각 프레임)과 같은 모양으로 잘라서, 쿨타임 중일 때만 사각형
     덩어리로 꽉 차 보이며 다른 슬롯보다 커 보이던 것을 맞춘다. */
  clip-path: polygon(50% 2%, 95% 26%, 95% 74%, 50% 98%, 5% 74%, 5% 26%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-bright);
}

.corner-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  pointer-events: auto;
  background-color: #131f37;
  background-image: url("image_webp/ui2/ui_pause_frame.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
  border-radius: 50%;
  color: var(--gold-bright);
  width: 42px;
  height: 42px;
  cursor: pointer;
  font-size: 14px;
}
.corner-btn:hover {
  filter: brightness(1.25) drop-shadow(0 0 6px rgba(217, 164, 65, 0.6));
}
.corner-btn-controls {
  right: 70px;
  font-size: 16px;
  font-weight: 800;
}

/* =========================================================================
   조작법 안내 모달
   ========================================================================= */
.controls-guide {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 4px 0 20px;
  text-align: left;
}
.controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.key-cap {
  flex-shrink: 0;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("image_webp/vfx2/ui_control_keycap.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
  color: var(--gold-bright);
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.key-cap-wide {
  min-width: 56px;
  padding: 0 10px;
  font-size: 12px;
}
.key-cluster {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, 30px);
  grid-template-rows: repeat(2, 30px);
  gap: 3px;
  grid-template-areas: ". up ." "left down right";
}
.key-cluster .key-cap {
  min-width: 0;
  width: 100%;
  height: 100%;
  font-size: 12px;
}
.controls-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 6px;
}
.controls-desc b {
  color: var(--gold-bright);
  font-size: 13px;
}
.controls-desc span {
  color: var(--text-soft);
  font-size: 12px;
}

/* =========================================================================
   모달
   ========================================================================= */
.modal {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 14, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.modal.hidden {
  display: none;
}
.modal-inner {
  background: var(--panel-grad);
  box-shadow: var(--panel-shadow);
  text-align: center;
  min-width: 320px;
  max-width: 92vw;
}
.modal-sub {
  color: var(--text-soft);
  font-size: 13px;
  margin: 0 0 18px;
}
.gameover-title {
  color: #ff5a5a !important;
  text-shadow: 0 0 18px rgba(220, 38, 38, 0.5);
}

.card-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.skill-card {
  width: 150px;
  padding: 16px 12px;
  background: linear-gradient(180deg, #1c2b4a, #0d1526);
  border: 1px solid #33456b;
  cursor: pointer;
  clip-path: var(--oct);
  transition:
    transform 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.skill-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-bright);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.55),
    var(--gold-glow);
}
.skill-card.locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.skill-card .card-icon {
  font-size: 28px;
  margin-bottom: 8px;
}
.skill-card .card-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--gold-bright);
  margin-bottom: 6px;
}
.skill-card .card-desc {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.skill-card .card-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(217, 164, 65, 0.14);
  border: 1px solid rgba(217, 164, 65, 0.3);
  color: var(--gold-bright);
}

/* 레벨업 전용 장식: 로비의 다른 skill-card에는 영향을 주지 않는다. */
#levelup-modal {
  overflow-y: auto;
  padding: 20px 12px;
}
#levelup-modal .modal-inner {
  width: min(850px, 100%);
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
}
#levelup-modal .card-row {
  gap: 12px;
  padding: 12px 8px 24px;
}
#levelup-modal .skill-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(170px, 24vw, 230px);
  min-height: 310px;
  aspect-ratio: 2 / 3;
  padding: 48px 24px 32px;
  border: 0;
  clip-path: none;
  background: #101827 url("image_webp/levelup_design_20260912/card_ornate_gold.webp")
    center / 100% 100% no-repeat;
  color: var(--text-soft);
  font: inherit;
  text-align: center;
  animation: levelup-enter 0.35s ease-out backwards;
  animation-delay: calc(var(--card-index) * 65ms);
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}
#levelup-modal .skill-card:hover:not(:disabled) {
  transform: translateY(-5px);
  filter: brightness(1.16);
}
#levelup-modal .skill-card:focus-visible {
  outline: 2px solid #ffe4a2;
  outline-offset: 3px;
}
#levelup-modal .skill-card:disabled {
  cursor: default;
}
#levelup-modal .skill-card.selected {
  filter: brightness(1.22);
}
#levelup-modal .card-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  margin: 0 0 16px;
  font-size: 46px;
}
#levelup-modal .card-icon span,
#levelup-modal .levelup-icon {
  position: relative;
  z-index: 1;
}
#levelup-modal .levelup-icon {
  width: 82px;
  height: 82px;
  object-fit: contain;
}
#levelup-modal .levelup-halo {
  position: absolute;
  width: 116px;
  height: 116px;
  opacity: 0.4;
  pointer-events: none;
  animation: levelup-halo 35s linear infinite;
}
#levelup-modal .card-name {
  font-size: 17px;
  margin-bottom: 12px;
  color: #ffe0a0;
}
#levelup-modal .card-desc {
  font-size: 13px;
  line-height: 1.6;
}
#levelup-modal .card-tag {
  margin-top: auto;
}
#levelup-modal .levelup-burst {
  position: absolute;
  width: 100%;
  top: 12%;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
#levelup-modal .selected .levelup-burst {
  animation: levelup-flash 0.48s ease-out forwards;
}
@keyframes levelup-enter {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes levelup-halo {
  to {
    transform: rotate(360deg);
  }
}
@keyframes levelup-flash {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}
@media (max-width: 600px) {
  #levelup-modal .modal-inner {
    padding: 18px 4px;
    border-width: 12px;
    border-image-width: 12px;
  }
  #levelup-modal .card-row {
    flex-wrap: nowrap;
    gap: 6px;
    padding-inline: 2px;
  }
  #levelup-modal .skill-card {
    width: calc((100% - 12px) / 3);
    min-width: 0;
    min-height: 255px;
    padding: 36px 10px 26px;
    aspect-ratio: auto;
  }
  #levelup-modal .card-icon {
    width: 52px;
    height: 60px;
    font-size: 30px;
    margin-bottom: 12px;
  }
  #levelup-modal .levelup-icon {
    width: 52px;
    height: 52px;
  }
  #levelup-modal .levelup-halo {
    width: 68px;
    height: 68px;
  }
  #levelup-modal .card-name {
    font-size: 13px;
  }
  #levelup-modal .card-desc {
    font-size: 11px;
    overflow-wrap: anywhere;
  }
}
@media (pointer: coarse) and (max-width: 900px), (max-width: 600px) {
  #screen-title .title-content {
    margin-bottom: 3vh;
  }
  #screen-title .title-buttons {
    width: min(82vw, 300px);
  }
  #screen-title .img-btn {
    width: 100%;
    min-height: 46px;
  }
  #hud {
    transform: scale(0.92);
    transform-origin: top left;
  }
  .touch-device #touch-controls {
    opacity: 1;
  }
  .mobile-optimized #hud {
    transform: scale(0.85);
    transform-origin: top left;
  }
  .mobile-optimized .touch-device .hotbar {
    bottom: 160px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #levelup-modal .skill-card,
  #levelup-modal .levelup-halo,
  #levelup-modal .selected .levelup-burst {
    animation: none;
    transition: none;
  }
}

.stage-progress {
  color: #dfca9c;
  font-size: 12px;
  margin: 4px 0 8px;
  text-shadow: 0 1px 3px #000;
}
.basic-attack-hud {
  position: absolute;
  bottom: 108px;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  padding: 7px 10px;
  background: #10192ee8;
  border: 1px solid #b79650;
  border-radius: 6px;
  font-size: 12px;
  color: #d6c29b;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px;
}
.basic-attack-hud strong {
  color: #ffe5a7;
  font-variant-numeric: tabular-nums;
}
.basic-cd-track {
  height: 4px;
  background: #303846;
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
}
.basic-cd-track i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #bd8637, #fff0ad);
}
.clear-summary {
  font-size: 14px;
  line-height: 2;
  color: var(--text-soft);
  margin-bottom: 20px;
}
.clear-summary b {
  color: var(--gold-bright);
}
.pause-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

/* 일시정지 — 지금까지 선택한 카드 목록 */
#pause-modal .modal-inner {
  width: min(640px, 100%);
}
.pause-cards {
  margin-bottom: 6px;
}
.pause-cards-title {
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 1px;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.pause-card-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 2px;
}
.pause-card-empty {
  font-size: 12px;
  color: var(--text-soft);
  margin: 0;
}
.pause-card {
  width: 82px;
  min-height: 92px;
  padding: 6px 5px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #1c2b4a, #0d1526);
  flex-shrink: 0;
  /* 다른 아이템 카드(.item-card)와 같은 등급 프레임 — 평범한 사각 테두리 대신 통일감 있게 */
  border-style: solid;
  border-width: 10px;
  border-image-slice: 16% 14%;
  border-image-width: 10px;
  border-image-repeat: stretch;
  border-image-source: url("image_webp/ui2/ui_card_common.webp");
}
.pause-card-icon {
  width: 34px;
  height: 34px;
  margin: 0 0 4px;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.pause-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pause-card-name {
  font-size: 10px;
  color: var(--gold-bright);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
  min-height: 2.6em;
}
.pause-card-count {
  font-size: 10px;
  color: var(--text-soft);
  margin-top: auto;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   터치 기기 보정 (이동은 방향키 전용 — 조이스틱 없음)
   ========================================================================= */
.touch-device .slot {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  touch-action: manipulation;
}
.touch-device .slot-icon {
  font-size: 30px;
}
.touch-device .hotbar {
  bottom: 22px;
  gap: 12px;
  padding: 10px 16px;
  transform: translateX(-50%) scale(1.02);
}
.touch-device .corner-btn {
  width: 52px;
  height: 52px;
  font-size: 17px;
}
.touch-device .hud-status-panel {
  padding: 6px 8px 6px 6px;
  gap: 7px;
}
.touch-device .hud-portrait {
  width: 38px;
  height: 38px;
}
.touch-device .hud-level-badge {
  min-width: 16px;
  height: 16px;
  font-size: 9px;
  bottom: -4px;
  right: -4px;
}

/* =========================================================================
   로비 화면
   ========================================================================= */
#screen-lobby {
  align-items: stretch;
  justify-content: stretch;
  background: var(--bg-deep);
}

.lobby-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(7, 11, 20, 0.55) 0%,
      rgba(7, 11, 20, 0.85) 100%
    ),
    url("image_webp/background_lobby.webp") center 35% / cover;
  filter: saturate(0.9) brightness(0.72);
}

.lobby-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px clamp(14px, 4vw, 48px);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(7, 11, 20, 0.5) 0%,
    rgba(7, 11, 20, 0.12) 42%,
    rgba(7, 11, 20, 0.55) 100%
  );
}

.lobby-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--panel-border-soft);
}
.lobby-title {
  font-weight: 900;
  margin: 0;
  color: var(--gold-bright);
  letter-spacing: 3px;
  font-size: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}
.lobby-currency {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
/* 더보기/옵션/타이틀로 — 헤더 우측 버튼 3개만 다른 small 버튼(모달 취소 등)보다 크게. */
#btn-header-more,
#btn-lobby-option,
#btn-lobby-title {
  padding: 10px 20px;
  font-size: 14px;
}
.currency.locked {
  opacity: 0.5;
}

.header-more {
  position: relative;
}
.header-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 20px 14px;
  border-style: solid;
  border-width: 22px;
  /* 다른 로비 패널(.lobby-section/.panel/.modal-inner)과 완전히 같은 프레임
     이미지를 재사용한다 — 이 이미지는 안쪽이 뚫려있지 않고 자체적으로 어두운
     남색 배경까지 꽉 채워서 그려져 있어(border-image-slice의 fill 키워드),
     별도 CSS background가 필요 없다. */
  border-image-source: url("image_webp/ui2/ui_panel.webp");
  border-image-slice: 80 92 fill;
  border-image-width: 22px;
  border-image-repeat: stretch;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
}
.header-more.is-open .header-more-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 드롭다운 안의 모든 항목(탭 전환용이든 로그인/회원가입 같은 액션 버튼이든) 공용 스타일.
   .tab-btn을 겸하는 항목("퀘스트"/"영혼 기록")은 알약 배경(width:175px 등)을 여기서
   초기화하는데, .tab-btn 기본 규칙이 이 파일에서 더 뒤에 나와 소스 순서상 이겨버렸다 —
   그래서 그 둘만 큰 알약 버튼으로 보이고 나머지는 납작한 텍스트로 보이는 불일치가
   생겼다. .header-more-menu를 조상으로 붙여 명시도를 올려서 항상 이기게 고정한다. */
.header-more-menu .header-more-item {
  display: block !important;
  justify-content: normal !important;
  align-items: normal !important;
  width: 100% !important;
  height: auto !important;
  background-image: none !important;
  background-color: transparent !important;
  background-size: auto !important;
  border: 0 !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  color: var(--text-dim);
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/* display:block !important가 [hidden] 속성(cloud.js가 로그인 상태에 따라 토글)의
   기본 display:none을 덮어써서 숨겨야 할 로그인/로그아웃 버튼이 계속 보이던 버그 수정. */
.header-more-menu .header-more-item[hidden] {
  display: none !important;
}
.header-more-menu .header-more-item:hover,
.header-more-menu .header-more-item.active {
  background-image: none !important;
  background-color: rgba(245, 216, 145, 0.12) !important;
  color: var(--gold-bright);
  filter: none !important;
}
.header-more-divider {
  display: block;
  height: 1px;
  margin: 4px 2px;
  background: rgba(58, 69, 98, 0.8);
}
.header-more-status {
  margin: 0;
  padding: 4px 12px;
  text-align: left;
  font-size: 11px;
  font-family: var(--font);
  color: var(--text-dim);
}

/* 탭 4개를 전부 같은 크기로 고정한다 — 텍스트 길이에 따라 버튼 폭이 제각각이면
   장식 이미지가 탭마다 다른 비율로 늘어나서 모양이 삐뚤어 보인다. */
.tab-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tab-btn {
  position: relative;
  width: 175px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 700;
  background-color: transparent;
  background-image: url("image_webp/ui2/ui_tab_pill_inactive.webp");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  border: none;
  appearance: none;
  color: var(--text-dim);
  padding: 0 32px 0 52px;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    filter 0.15s ease;
}
.tab-btn:hover {
  color: var(--text);
  filter: brightness(1.15);
}
.tab-btn.active {
  background-image: url("image_webp/ui2/ui_tab_pill_active.webp");
  color: var(--gold-bright);
  filter: drop-shadow(0 0 6px rgba(245, 216, 145, 0.4));
}
/* 탭 아이콘(2026-09-21 밤) — 원형으로 딱 맞게 잘라낸 뱃지라 탭마다 비율이 안 맞는 문제 없이
   왼쪽에 고정 배치할 수 있다. 버튼 flex 레이아웃 밖으로 빼서(position:absolute) 텍스트
   중앙 정렬(위 padding 기준)에 영향을 주지 않는다. */
.tab-icon {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  pointer-events: none;
}

.tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
  animation: rise 0.35s ease-out;
}

.lobby-section {
  position: relative;
  box-shadow:
    inset 0 0 36px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.lobby-section h3 {
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--gold-bright);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-left: 3px solid var(--gold);
  padding-left: 10px;
}

/* --- 캐릭터 탭 --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
/* 기본 능력치는 세로 1열로 쭉 나열 — 아이콘이 붙으면서 가로 타일보다 읽기 편해서 변경 */
.stat-grid-vertical {
  grid-template-columns: 1fr;
  gap: 6px;
}
.stat-item {
  background: rgba(6, 10, 20, 0.5);
  border: 1px solid var(--panel-border-soft);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 7px;
}
.stat-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(231, 190, 93, 0.3));
}
.stat-item .stat-label {
  color: var(--text-dim);
  margin-right: 6px;
}
.stat-item .stat-value {
  color: var(--gold-bright);
  font-weight: 700;
}

.level-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.level-row .lv-badge {
  font-weight: 800;
  background: var(--gold-fill);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 6px 14px;
  color: var(--gold-bright);
  font-size: 14px;
}
.level-row .bar {
  flex: 1;
  min-width: 160px;
  margin-bottom: 0;
  clip-path: none;
  border-radius: 3px;
}

/* --- 상점 · 뽑기 레벨 표시 --- */
.gacha-level-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  margin-bottom: 4px;
}
.gacha-level-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  background: none;
  border: none;
  padding: 0;
  color: var(--gold-bright);
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.gacha-level-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.gacha-level-bar {
  flex: 1;
  min-width: 140px;
  margin-bottom: 0;
  clip-path: none;
  border-radius: 3px;
  border: none;
  border-image: none;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: none;
}

.soul-training-layout { display:grid; grid-template-columns:minmax(0,1fr) 204px; align-items:center; min-height:280px; margin:-12px 0 2px; }
.soul-vessel-stage { position:relative; width:min(290px,72vw); max-width:100%; aspect-ratio:1; justify-self:center; display:grid; place-items:center; isolation:isolate; }
.soul-vessel-image,.soul-vessel-fx { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.soul-vessel-image { z-index:2; filter:drop-shadow(0 12px 14px #000b); }
.soul-vessel-fx { inset:-24%; width:148%; height:148%; z-index:3; opacity:0; pointer-events:none; }
.soul-vessel-aura { position:absolute; z-index:1; width:72%; height:72%; border-radius:50%; background:radial-gradient(circle,rgba(115,71,190,.32),transparent 68%); filter:blur(12px); }
.soul-training-status { min-height:210px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:20px 14px; border:1px solid rgba(185,143,73,.66); background:linear-gradient(180deg,rgba(15,24,43,.92),rgba(5,10,20,.96)); box-shadow:inset 0 0 24px #000b,0 8px 18px #0007; text-align:center; }
.soul-training-status span { color:#91a7c5; font-size:11px; letter-spacing:1px; }
.soul-training-status strong { color:#f5d891; font-size:28px; text-shadow:0 0 12px rgba(239,191,87,.42); }
.soul-training-status b { color:#c9b4ef; font-size:14px; }
.soul-training-status i { width:70%; height:1px; margin:7px 0; background:linear-gradient(90deg,transparent,#9b6ee0,transparent); }
.soul-level-progress { margin:0 0 10px; }
.soul-train-button { width:100%; min-height:54px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:15px; letter-spacing:1px; }
/* 항아리 위에 겹쳐 보이는 소형 강화 버튼(좌하단)과, 오른쪽에 붙는 세로 스탯 컬럼 —
   캐릭터 탭을 "가운데 항아리 + 좌하단 강화 버튼 + 우측 세로 스탯"으로 재배치. */
.soul-train-button-compact { position:absolute; left:2%; bottom:4%; z-index:4; width:auto; min-height:0; display:flex; align-items:center; gap:5px; padding:7px 12px; font-size:12px; letter-spacing:.5px; border-radius:20px; box-shadow:0 4px 10px #000a; }
.soul-train-button-compact .soul-icon-img { width:16px; height:16px; }
.character-stat-column { min-height:210px; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.character-stat-column-badge { text-align:center; font-size:11px; color:#f5d891; letter-spacing:.5px; padding-bottom:6px; margin-bottom:2px; border-bottom:1px solid rgba(185,143,73,.4); text-shadow:0 0 8px rgba(239,191,87,.35); }
.stat-grid-compact .stat-item { grid-template-columns:18px 1fr auto; gap:5px; padding:5px 8px; font-size:11px; }
.stat-grid-compact .stat-icon { width:16px; height:16px; }
.stat-grid-compact .stat-item .stat-label { margin-right:3px; }
.soul-vessel-stage.is-absorbing .soul-vessel-fx { opacity:1; }
.soul-vessel-stage.is-absorbing .soul-vessel-image { animation:vessel-breathe .48s ease-in-out infinite alternate; }
.soul-vessel-stage.is-complete .soul-vessel-image { animation:vessel-complete .32s ease-out both; }
@keyframes vessel-breathe { to { filter:brightness(1.2) drop-shadow(0 0 18px rgba(133,83,255,.7)); } }
/* 중앙 보정(translateX)을 유지한 채로 커지도록 — 예전엔 scale만 써서 연출 중간에
   항아리가 원래 위치(왼쪽)로 툭 튀었다. */
@keyframes vessel-complete { 50% { transform:translateX(var(--vessel-shift,0%)) scale(1.08); filter:brightness(1.65) drop-shadow(0 0 28px #d5a8ff); } }
@media(max-width:700px){
  .soul-training-layout{grid-template-columns:1fr; min-height:0}
  .soul-vessel-stage{width:min(250px,78vw)}
  .soul-training-status{min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:5px 12px; padding:10px 14px}
  .soul-training-status i{display:none}
  .soul-training-status strong{font-size:21px}
  .character-stat-column{min-height:0; margin-top:10px}
  /* 스탯 패널은 패널 그림 슬롯에 맞춘 1열 고정 레이아웃이라 2열로 접지 않는다
     (접으면 그림의 칸과 전부 어긋난다) — 대신 패널 자체가 비율대로 줄어든다. */
}

/* 2026-09-22: 장비/성장 전용 배경과 화면 밀도 최종 조정 */
.character-dashboard{
  background:
    linear-gradient(rgba(5,8,17,.40),rgba(5,8,17,.48)),
    url("image_webp/ui2/AIDrawing_260922_dd903428-6480-4606-86d3-3c0f074fb4e5_0_MiriCanvas.webp") center bottom/100% 100% no-repeat;
}
.equip-inventory-frame,
.equipment-showcase{
  background:
    linear-gradient(rgba(8,5,3,.34),rgba(8,5,3,.48)),
    url("image_webp/ui2/AIDrawing_260922_5a096aa9-7c9f-498c-bb17-0754eeaab8b0_0_MiriCanvas.webp") center/100% 100% no-repeat;
}
.equipment-showcase{
  min-height:700px;
  border:1px solid rgba(184,145,76,.62);
  box-shadow:inset 0 0 30px #000,0 8px 20px #0008;
}
.equipment-showcase>.equip-slots{z-index:4;gap:10px;left:18px;top:18px;bottom:18px}
.equipment-showcase .equip-slot-box{width:120px;height:120px}
.equipment-showcase .equip-slot-box .slot-icon-big{font-size:52px}
.equipment-showcase .equip-slot-box .slot-icon-big img{width:64px;height:64px}
.equipment-showcase .equip-slot-box .slot-cat{font-size:12px;top:5px;left:8px}
.equipment-showcase .equip-slot-box .slot-item-lv{font-size:14px;bottom:5px;right:8px}
.equip-inventory-frame{min-height:700px;background-position:center}
/* 예전 등급 테두리(border-image, ui_card_*.png)와 새 backpack_item_slot.png 배경이
   겹쳐 그려지던 걸 정리 — 옛 테두리는 없애고 새 슬롯 이미지만 쓴다. 칸도 더 키우고
   아이콘/텍스트 크기를 그에 맞춰 키웠다. 등급 구분은 아래 등급 칩(rarityChip)으로 유지. */
.equip-inventory-col .item-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.equip-inventory-col .item-card{min-height:116px;padding:8px 6px;border:0;border-image-source:none}
.equip-inventory-col .item-card .item-icon{font-size:26px}
.equip-inventory-col .item-card .item-icon img{width:38px;height:38px}
.equip-inventory-col .item-card .item-name{font-size:12px;margin-top:4px}
.equip-inventory-col .item-card .item-rarity{font-size:11px}

/* 2026-09-22 재보정 — 예전에는 "알파 bbox 중심"을 캔버스 중심에 맞췄는데, 항아리
   손잡이가 오른쪽으로만 튀어나와 있어서 bbox를 맞추면 정작 눈에 보이는 몸통이
   왼쪽으로 치우쳐 보였다(2단계 기준 배경 중앙선보다 약 34px 왼쪽).
   그래서 손잡이를 뺀 "몸통 실루엣" 중심축(뚜껑 보석·받침 중심과 일치)을 실측해
   그 값이 캔버스 중앙에 오도록 티어별 보정값을 다시 계산했다.
   512px 캔버스 기준 몸통 중심축: 1=230, 2=205, 3=204, 4=206, 5=215.
   --vessel-shift 는 "스테이지 폭 기준" 오프셋이라, 제 폭이 다른 오라(72%)·
   흡수 이펙트(148%)는 각자 폭으로 나눠서 같은 거리만큼 움직이게 한다. */
.soul-vessel-stage[data-tier="1"]{--vessel-shift:5.1%;--vessel-cy:13%}
.soul-vessel-stage[data-tier="2"]{--vessel-shift:10%;--vessel-cy:9.9%}
.soul-vessel-stage[data-tier="3"]{--vessel-shift:10.2%;--vessel-cy:6.1%}
.soul-vessel-stage[data-tier="4"]{--vessel-shift:9.7%;--vessel-cy:4.9%}
.soul-vessel-stage[data-tier="5"]{--vessel-shift:8%;--vessel-cy:0%}
.soul-vessel-image{margin-left:0;transform:translateX(var(--vessel-shift,0%))}
/* 오라/흡수 이펙트는 자기 캔버스 안에서 이미 정중앙이고 스테이지에도 정중앙으로
   깔리므로, 위 --vessel-shift(항아리 그림 자체의 치우침 보정)를 같이 주면 오히려
   항아리보다 오른쪽으로 밀린다 — 가로는 건드리지 않는다.
   대신 세로는 항아리가 바닥에 서 있느라 캔버스 아래쪽에 그려져 있어서, 이펙트가
   항아리 몸통이 아니라 뚜껑 위쪽에서 터졌다. 티어별 항아리 무게중심(--vessel-cy)
   만큼 내려서 몸통 한가운데에서 소용돌이가 돌게 맞췄다(각자 폭이 달라 나눠서 적용). */
.soul-vessel-fx{transform:translateY(calc(var(--vessel-cy,0%) / 1.48))}
.soul-vessel-aura{transform:translateY(calc(var(--vessel-cy,0%) / 0.72))}

.character-dashboard-lower{grid-template-columns:minmax(600px,42%) minmax(0,1fr);gap:16px}
.character-class-select,.character-skill-info{padding:16px 18px}
.character-class-select .item-grid{grid-template-columns:repeat(5,minmax(104px,1fr));gap:14px}
.character-class-select .item-card{padding:13px 9px}
.character-class-select .item-name{font-size:14px}
.character-skill-rows{gap:8px}
.character-skill-rows>div{padding:8px 10px;row-gap:4px}
.character-skill-rows b{font-size:12px}
.character-skill-rows strong{font-size:13px}
.character-skill-rows span{font-size:12px;line-height:1.35}
.character-passives{margin-top:7px;font-size:12px;line-height:1.4}

@media(max-width:1100px){
  .character-dashboard-lower{grid-template-columns:1fr}
  .character-class-select .item-grid{grid-template-columns:repeat(5,minmax(54px,1fr))}
}
@media(max-width:760px){
  .equipment-showcase{min-height:340px}
  .equipment-showcase>.equip-slots{flex-direction:row;left:8px;right:8px;top:auto;bottom:8px;width:auto;justify-content:center;flex-wrap:nowrap;gap:5px}
  .equipment-showcase .equip-slot-box{width:44px;height:44px;flex:0 0 44px}
  .equipment-showcase .equip-slot-box .slot-cat{font-size:8px;top:2px;left:4px}
  .equipment-showcase .equip-slot-box .slot-icon-big{font-size:25px}
  .equipment-showcase .equip-slot-box .slot-icon-big img{width:28px;height:28px}
  .equipment-showcase .equip-slot-box .slot-item-lv{font-size:9px;bottom:2px;right:4px}
  .equip-inventory-frame{min-height:460px}
}

.class-hero-preview { position:relative; min-height:390px; margin-bottom:12px; overflow:hidden; border:1px solid rgba(183,143,72,.58); background:radial-gradient(circle at 50% 38%,rgba(92,58,139,.25),rgba(4,9,18,.94) 70%); box-shadow:inset 0 0 34px #000,0 8px 20px #0008; }
.class-hero-preview>img { position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:contain; object-position:center bottom; filter:drop-shadow(0 14px 16px #000d); }
.class-hero-copy { position:absolute; z-index:2; left:18px; right:18px; bottom:12px; padding:10px; text-align:center; background:linear-gradient(90deg,transparent,#050a14e8,transparent); text-shadow:0 2px 5px #000; }
.class-hero-copy .job-name { color:#f5d891; font-size:18px; font-weight:900; }
.class-hero-copy .job-tier { color:#b9c8dd; font-size:12px; }
.appearance-choice { position:relative; }
.appearance-choice.is-selected { filter:brightness(1.12) drop-shadow(0 0 8px rgba(241,198,91,.55)); }
.appearance-select-frame { position:absolute; z-index:4; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px); object-fit:fill; pointer-events:none; }

.job-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.job-current {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(6, 10, 20, 0.5);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px 16px;
}
.job-current .job-icon {
  font-size: 24px;
}
.job-current .job-name {
  font-weight: 800;
  color: var(--gold-bright);
}
.job-current .job-tier {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

/* 직업/외형 초상화 — image_webp/portrait/*.webp (classmoving.png 크롭) */
.portrait-frame {
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  border: 2px solid var(--gold);
  box-shadow:
    0 0 0 1px #0a1122,
    var(--gold-glow);
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(145deg, #1a2744, #0d1526);
  image-rendering: pixelated;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.appearance-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--panel-border);
  margin-bottom: 6px;
  image-rendering: pixelated;
  background: linear-gradient(145deg, #1a2744, #0d1526);
}

/* --- 장비 탭 --- */
.equip-slots {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* 장비 탭 2단 레이아웃 — 왼쪽 "캐릭터"(전신 이미지 + 세로 슬롯 스트립), 오른쪽 "배낭"(카테고리 탭 + 정렬/그리드) */
.equipment-layout{
  display:grid;
  grid-template-columns:minmax(300px,3fr) minmax(260px,2fr);
  gap:26px;
  align-items:start;
  max-width:1300px;
  margin:0 auto 18px;
}
.equip-inventory-frame{
  box-sizing:border-box;
  min-height:700px;
  padding:16px;
  border-style:solid;
  border-width:14px;
  border-image-source:url("image_webp/ui2/ui_panel.webp");
  border-image-slice:80 92;
  border-image-width:14px;
  border-image-repeat:stretch;
  background:linear-gradient(rgba(255,244,220,.08),rgba(18,8,3,.12)),url("image_webp/ui2/AIDrawing_260922_5a096aa9-7c9f-498c-bb17-0754eeaab8b0_0_MiriCanvas.webp") center/100% 100% no-repeat;
}
.equip-slots-title{
  font-size:14px;
  color:var(--gold-bright);
  letter-spacing:2px;
  margin:0 0 10px;
  text-transform:uppercase;
  text-align:center;
}
.equip-inventory-col{ min-width:0; }
.equip-inventory-col .item-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.equip-inventory-col .item-card{min-height:116px;padding:8px 6px;border:0;border-image-source:none}
.equip-inventory-col .item-card .item-icon{font-size:26px}
.equip-inventory-col .item-card .item-icon img{width:38px;height:38px}
.equip-inventory-col .item-card .item-name{font-size:12px;margin-top:4px}
.equip-inventory-col .item-card .item-rarity{font-size:11px}
.equip-list-header{ flex-wrap:wrap; row-gap:10px; }
.inventory-cat-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  flex:1 1 auto;
  min-width:0;
  min-height:40px;
  box-sizing:border-box;
}
/* 가죽 탭 바(backpack_category_bar.png)가 코드상 이미 연결돼 있었지만, 버튼마다
   자체 배경(rgba(6,10,20,.5))+테두리를 가진 알약 모양이라 가죽 질감을 거의 다 가리고
   있었다 — 배경/테두리를 투명하게 바꿔 가죽이 그대로 비치게 하고, 선택 표시는
   채움 대신 금색 글로우(텍스트)로 준다. */
.inventory-cat-tabs button{
  background:transparent;
  border:none;
  color:#e7d7b8;
  text-shadow:0 1px 3px #000, 0 1px 1px #000;
  border-radius:0;
  padding:5px 12px 5px 8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:color .12s ease,text-shadow .12s ease;
}
.inventory-cat-tab-icon{
  width:16px;
  height:16px;
  object-fit:contain;
  opacity:.85;
  filter:grayscale(.3) drop-shadow(0 1px 2px #000);
}
.inventory-cat-tabs button.active .inventory-cat-tab-icon{
  opacity:1;
  filter:drop-shadow(0 0 4px rgba(255,214,120,.8));
}
.inventory-cat-tabs button:hover{ color:#fff; }
.inventory-cat-tabs button.active{
  background:transparent;
  border:none;
  color:#ffe9a8;
  text-shadow:0 0 8px rgba(255,214,120,.85), 0 1px 3px #000;
}

/* 캐릭터 쇼케이스 — 전신 이미지를 배경으로 깔고 슬롯을 왼쪽 위에 세로로 겹쳐 놓는다 (paper-doll 스타일) */
.equipment-showcase{
  position:relative;
  min-height:700px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 42%,rgba(115,79,153,.24),rgba(7,13,24,.92) 70%);
  box-shadow:inset 0 0 30px #000,0 8px 20px #0008;
  border-style: solid;
  border-width: 14px;
  border-image-source: url("image_webp/ui2/ui_panel.webp");
  border-image-slice: 80 92;
  border-image-width: 14px;
  border-image-repeat: stretch;
}
.equipment-character-preview{
  position:absolute;
  inset:0;
}
.equipment-character-preview:before{content:"";position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,rgba(198,162,87,.16),transparent 68%);filter:blur(9px);z-index:0}
/* 캐릭터가 장착 완료 링(:after, 아래)보다 항상 위에 그려지도록 z-index로 고정 */
.equipment-character-preview img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 12px #000c);z-index:2}
.equipment-character-preview span{position:absolute;left:16px;right:16px;bottom:10px;padding:6px;text-align:center;color:#f1d28b;font-weight:800;letter-spacing:2px;text-shadow:0 2px 5px #000;background:linear-gradient(90deg,transparent,#07101acc,transparent);z-index:2}
.equipment-showcase>.equip-slots{
  position:absolute;
  left:14px;
  top:14px;
  bottom:14px;
  z-index:2;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:12px;
  margin:0;
  width:auto;
}
.equipment-showcase .equip-slot-box{
  box-sizing:border-box;
  width:120px;
  height:120px;
  min-height:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.equipment-showcase .equip-slot-box .slot-cat{position:absolute;top:3px;left:6px;font-size:11px;letter-spacing:0;margin:0;z-index:1}
.equipment-showcase .equip-slot-box .slot-item-name{display:none}
.equipment-showcase .equip-slot-box .slot-icon-big{font-size:52px}
.equipment-showcase .equip-slot-box .slot-icon-big img{width:64px;height:64px}
.equipment-showcase .equip-slot-box .slot-item-lv{position:absolute;bottom:3px;right:6px;font-size:13px}
.equipment-showcase.is-complete .equipment-character-preview{border-color:#e7c36e;box-shadow:inset 0 0 30px #000,0 0 24px rgba(231,195,110,.48)}
/* 예전에 쓰던 얇은 사각 테두리 글로우 — 아래쪽 원형 링 이미지(equipment_complete_glow.png)로
   대체되면서 두 효과가 겹쳐 있었다. 지금은 링 이미지 하나만 쓴다. */
@media(max-width:760px){
  .equipment-layout{grid-template-columns:1fr}
  .equipment-showcase{min-height:300px}
  .equipment-showcase>.equip-slots{flex-direction:row;left:8px;right:8px;top:auto;bottom:8px;width:auto;justify-content:center;flex-wrap:wrap}
  .equipment-showcase .equip-slot-box{width:48px;height:48px}
}
.equip-slot-box {
  width: 120px;
  background: linear-gradient(145deg, #16213b, #0b1220);
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
  /* 보유 장비 카드(.item-card)와 같은 등급 프레임 — 장착칸은 항상 common 톤 */
  border-style: solid;
  border-width: 12px;
  border-image-slice: 16% 14%;
  border-image-width: 12px;
  border-image-repeat: stretch;
  border-image-source: url("image_webp/ui2/ui_card_common.webp");
}
.equip-slot-box:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}
.equip-slot-box .slot-cat {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.equip-slot-box .slot-icon-big {
  font-size: 30px;
}
.equip-slot-box .slot-item-name {
  font-size: 12px;
  color: var(--text);
  margin-top: 4px;
}
.equip-slot-box .slot-item-lv {
  font-size: 10px;
  color: var(--gold-bright);
}
.equip-slot-box.empty {
  opacity: 0.55;
  cursor: default;
}
.equip-slot-box.empty:hover {
  transform: none;
  filter: none;
}

.equip-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}
.equip-list-header h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.equip-sort-select {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(160deg, #223258, #0d1526);
  color: var(--gold-bright);
  border: 1px solid var(--gold-mid);
  border-radius: 6px;
  padding: 6px 26px 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d9a441'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.equip-sort-select:hover,
.equip-sort-select:focus {
  border-color: var(--gold-bright);
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.5),
    var(--gold-glow);
  outline: none;
}
.equip-sort-select option {
  background: #16213b;
  color: var(--gold-bright);
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
.item-card {
  background: linear-gradient(145deg, #16213b, #0b1220);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
  position: relative;
  /* 등급별 프레임(image_webp/ui2/ui_card_*.webp) — 9-slice border-image, 기본은 일반 등급 */
  border-style: solid;
  border-width: 14px;
  border-image-slice: 16% 14%;
  border-image-width: 14px;
  border-image-repeat: stretch;
  border-image-source: url("image_webp/ui2/ui_card_common.webp");
}
.item-card.rarity-rare {
  border-image-source: url("image_webp/ui2/ui_card_rare.webp");
}
.item-card.rarity-epic {
  border-image-source: url("image_webp/ui2/ui_card_epic.webp");
}
.item-card.rarity-unique {
  border-image-source: url("image_webp/ui_polish_20260921/ui_card_unique.webp");
}
.item-card.rarity-legendary {
  border-image-source: url("image_webp/ui2/ui_card_legendary.webp");
}
.item-card.rarity-mystic {
  border-image-source: url("image_webp/ui_polish_20260921/ui_card_mystic.webp");
}
.item-card:hover {
  transform: translateY(-3px);
  filter: brightness(1.15);
}
.item-card .item-icon {
  font-size: 26px;
}
.item-card .item-name {
  font-size: 11px;
  margin-top: 4px;
  color: var(--text-soft);
}
.item-card .item-rarity {
  font-size: 10px;
  margin-top: 2px;
  font-weight: 700;
}
.item-card .item-equipped-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  background: var(--gold-fill);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  border-radius: 3px;
  padding: 1px 5px;
  font-weight: 700;
}
.item-card.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- 상점 탭 --- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.shop-card {
  background: linear-gradient(160deg, #17223c, #0b1220);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.5);
  padding: 20px 18px;
  text-align: center;
  border-style: solid;
  border-width: 14px;
  border-image-slice: 16% 14%;
  border-image-width: 14px;
  border-image-repeat: stretch;
  border-image-source: url("image_webp/ui2/ui_card_common.webp");
}
.shop-card .shop-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.shop-card .shop-name {
  font-weight: 800;
  color: var(--gold-bright);
  margin-bottom: 6px;
}
.shop-card .shop-desc {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 12px;
  min-height: 32px;
}
.shop-card .shop-cost {
  font-size: 13px;
  color: var(--gold-bright);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

/* --- 상점 NPC 탭(장비/펫/물약) — 탭마다 다른 상인 배경이 화면 전체를 채우고,
   그 위에 정사각형 나무 아이템 슬롯 카드가 왼쪽부터 한 줄로 나열된다. 품목이
   늘어나면 shopItemCardDefs()에 항목만 추가하면 자동으로 오른쪽에 이어 붙는다. */
#tab-shop.active { display: flex; flex-direction: column; height: 100%; }
.shop-npc-wrap { padding: 4px 0 6px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.shop-npc-tabs { display: flex; justify-content: center; gap: 14px; margin: 0 0 14px; flex: 0 0 auto; }
.shop-npc-tabs button {
  position: relative;
  width: 160px;
  height: 46px;
  border: 0;
  background: transparent url("image_webp/shop/btn_bronze.webp") center / 100% 100% no-repeat;
  color: #e7d6ad;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-shadow: 0 1px 2px #000, 0 0 6px #000a;
}
.shop-npc-tabs button.active {
  background-image: url("image_webp/shop/btn_blue.webp");
  color: #eaf3ff;
}
.shop-npc-stage {
  position: relative;
  flex: 1;
  min-height: 420px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #14110d;
  box-shadow: inset 0 0 60px #000c, 0 8px 22px #0007;
  border: 1px solid #6b5836;
  /* 상인 원화와 가죽책 패널을 한 덩어리로 묶어 가운데 정렬한다 — 원화가
     비율을 유지하며(찌그러뜨리지 않고) 표시되면서도 패널과 붙어 있도록,
     둘을 같은 flex 줄에 놓고 원화 오른쪽에 패널이 바로 이어지게 한다.
     박스 자체도 내용물(원화+패널) 폭만큼만 차지하게 해서 불필요한
     좌우 여백(검은 공백)을 잘라낸다. */
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: fit-content;
  max-width: 100%;
}
.shop-npc-cluster {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 100%;
}
.shop-npc-art {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* 가죽책 패널(panel.png)을 원화 바로 옆에 크게 붙이고, 그 위에 정사각형
   나무 아이템 슬롯 카드들을 왼쪽 위부터 나열한다. 원화처럼 높이를 박스에
   맞추고(height:100%) 폭은 종횡비로 따라오게 해야, 창이 낮을 때 패널이
   박스보다 커져서 위아래가 잘리는 일이 없다. 폭이 너무 커지지 않게
   max-width로만 상한을 둔다. 음수 margin-left로 원화 쪽으로 당겨서
   원화를 살짝 가리며 겹치게 배치한다. */
.shop-npc-panel {
  position: relative;
  flex-shrink: 0;
  height: 100%;
  width: auto;
  max-width: clamp(230px, 32vw, 460px);
  aspect-ratio: 450 / 577;
  margin-left: clamp(-160px, -12vw, -70px);
  z-index: 2;
  background: transparent url("image_webp/shop/panel.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 24px #000a);
}
/* 상단 뽑기 탭(장비/펫/물약)을 패널 안쪽 위쪽에 작게 붙인다. 탭 높이가
   고정 30px이므로 위치도 %가 아니라 고정 px로 둬야, 패널이 높이 100%로
   커져도(원화만큼 길어져도) 탭 아래 빈 공간이 같이 늘어나 카드들이
   아래로 처지는 일이 없다. */
.shop-npc-panel .shop-npc-tabs {
  position: absolute;
  top: 26px;
  left: 8%;
  right: 8%;
  margin: 0;
  gap: 3%;
  z-index: 2;
}
.shop-npc-panel .shop-npc-tabs button {
  flex: 1;
  width: auto;
  height: 30px;
  font-size: 9.5px;
  letter-spacing: 0;
  padding: 0 2px;
}
.shop-npc-panel-inner {
  position: absolute;
  top: 66px;
  left: 10%;
  right: 10%;
  bottom: 10%;
  display: flex;
  align-items: stretch;
  /* 스킨 탭은 카드 수가 20개를 넘어가서(장비/펫/물약탭은 몇 장 안 됨) 세로로 넘치면
     스크롤되게 한다 — 안 그러면 목재 패널 그림 밖으로 카드가 그냥 삐져나온다. */
  overflow-y: auto;
  overflow-x: hidden;
}
/* 뽑기 레벨 표시(장비 탭)가 추가되면서 .shop-item-row 혼자가 아니라 세로로 쌓이는
   자식이 여럿이 됐다 — .shop-npc-panel-inner가 가로 flex라 이 래퍼로 한 덩어리를
   만들어야 전체 폭을 차지한다(안 그러면 텍스트가 세로 한 글자씩 눌려 보인다). */
.shop-tab-col {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}
.shop-item-row {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}
/* 스킨 탭 — "캐릭터 스킨" / "폰트" 두 그룹으로 나눠 보여줄 때만 쓰는 래퍼.
   panel-inner가 display:flex(가로)라서, 세로로 쌓으려면 이 래퍼 하나만 자식으로 둬야 한다. */
.shop-skin-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
.shop-skin-section-title {
  margin: 0 0 8px;
  font-size: 13px;
  color: #e4bd61;
  letter-spacing: 1px;
  border-bottom: 1px solid #4a3a22;
  padding-bottom: 4px;
}
.skin-preview-sample {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 10px;
  margin: 10px 0;
  background: #0a111ecc;
  border: 1px solid #3d4a63;
  border-radius: 8px;
}
.skin-preview-row {
  font-weight: bold;
  font-size: 28px;
}
.skin-preview-row.crit {
  font-size: 32px;
}
.skin-preview-portrait {
  width: 140px;
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px #000a);
}
/* 캐릭터 스킨 미리보기는 66px 흉상 대신 전신 일러스트를 쓰므로 더 세로로 길게 잡는다. */
.skin-preview-sample-fullbody {
  padding: 10px;
}
.skin-preview-fullbody {
  width: 100%;
  max-width: 220px;
  height: 300px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 12px #000a);
}
.shop-item-card {
  position: relative;
  width: 30%;
  min-width: 88px;
  max-width: 128px;
  aspect-ratio: 130 / 137;
  background: transparent url("image_webp/shop/item_slot.webp") center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 6px 8px;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 8px 16px #000a);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.shop-item-card:not(.is-disabled):hover { filter: brightness(1.12) drop-shadow(0 8px 16px #000a); transform: translateY(-4px); }
.shop-item-card.is-disabled { cursor: not-allowed; filter: grayscale(0.7) brightness(0.62); }
.sic-icon { font-size: 32px; margin-top: 2px; filter: drop-shadow(0 0 6px #0009); }
.sic-icon{display:grid;place-items:center;width:68%;height:56%;margin-top:-2px}
.sic-icon img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px #000b) drop-shadow(0 0 7px #a267ff66)}
.shop-item-card{isolation:isolate;background-image:linear-gradient(180deg,#121b2c33,#05080eb8),url("image_webp/shop/item_slot.webp");box-shadow:0 12px 24px #000b,inset 0 0 16px #d0a2501f}
.shop-item-card:before{content:"";position:absolute;z-index:-1;inset:10%;border-radius:50%;background:radial-gradient(circle,#7843a33d,transparent 68%);filter:blur(4px)}
.shop-item-card:not(.is-disabled):hover .sic-icon img{transform:scale(1.06);filter:drop-shadow(0 6px 8px #000c) drop-shadow(0 0 10px #d7a8ff)}
.sic-icon img{transition:transform .18s ease,filter .18s ease}
.shop-item-card{width:43%;min-width:112px;max-width:158px;background:transparent url('image_webp/ui_expansion_20260920/shop_slot_v2.webp') center/100% 100% no-repeat;box-shadow:none;padding:12px 9px 10px;font-family:'Noto Sans KR',sans-serif}
.shop-item-card:before{display:none}
.sic-icon{width:74%;height:58%;margin:-1px auto 0}
.sic-label{position:absolute;left:10%;right:10%;top:61%;width:auto;margin:0;font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:900;line-height:1.15;color:#f3d995;letter-spacing:-.2px;text-shadow:0 1px 2px #000,0 0 5px #000}
.sic-price{left:18%;right:7%;bottom:9%;font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:900;color:#ffe298;text-align:center;letter-spacing:0;text-shadow:0 1px 2px #000}
.sic-badge{top:5px;right:5px}
.sic-label { font-size: 10.5px; color: #e7d6ad; text-align: center; word-break: keep-all; line-height: 1.15; margin: 0; }
.sic-price {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 11px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #ffe9ac;
  text-shadow: 0 1px 2px #000;
}
.sic-badge { position: absolute; top: 6px; right: 6px; }
@media (max-width: 800px) {
  .shop-npc-stage { flex: 1; min-height: 0; padding: 10px 0; width: 100%; max-width: 100%; align-self: stretch; }
  /* 좁은 화면에서는 원화 옆에 패널을 붙이면 둘 다 너무 작아지므로 세로로
     쌓는다 — 원화가 위, 패널이 그 아래로 이어 붙는다. */
  .shop-npc-cluster { flex-direction: column; height: auto; max-height: 100%; width: 100%; gap: 10px; }
  .shop-npc-art { height: auto; width: 84%; max-width: 320px; margin: 0 auto; }
  .shop-npc-panel { height: auto; width: min(84%, 300px); max-width: none; flex-shrink: 1; margin-left: 0; }
  .shop-npc-panel .shop-npc-tabs { top: 10px; gap: 2%; }
  .shop-npc-panel .shop-npc-tabs button { height: 24px; font-size: 8px; }
  .shop-npc-panel-inner { top: 46px; left: 9%; right: 9%; bottom: 9%; }
  .shop-item-row { gap: 8px; }
  .shop-item-card { min-width: 74px; padding: 12px 5px 6px; }
  .sic-icon { font-size: 22px; }
  .sic-label { font-size: 8.5px; margin-top: 4px; }
  .sic-price { font-size: 9px; bottom: 8px; }
}

/* --- 게임 탭 --- */
.game-tab-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 16px;
}
.game-tab-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.game-tab-banner:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, #0b1220 100%);
  pointer-events: none;
  z-index: 1;
}
/* 진행 요약 텍스트와 "탐험 시작" 버튼을 배너 이미지 위에 자연스럽게 얹는다 —
   배너 자체에 이미 있는 하단 그라디언트(.game-tab-banner:after) 위에 겹치도록
   z-index를 그라디언트보다 높게 둔다. */
.game-tab-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 10px 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.game-tab-overlay .game-tab-summary {
  margin: 0;
  text-align: center;
  text-shadow: 0 1px 4px #000, 0 0 10px rgba(0, 0, 0, 0.85);
}
.game-tab-overlay .btn-explore {
  margin-top: 6px;
}
.game-tab-summary {
  font-size: 14px;
  line-height: 2;
  color: var(--text-soft);
  margin-bottom: 18px;
}
.game-tab-summary b {
  color: var(--gold-bright);
}
.btn-explore {
  padding: 14px 40px;
  font-size: 15px;
}

/* --- 공용 잠금 안내 --- */
.lock-note {
  font-size: 12px;
  color: #ff9a9a;
  margin-top: 8px;
}

/* =========================================================================
   퀘스트 탭 — 전용 9-slice 프레임 + 상태 아이콘
   ========================================================================= */
.quest-section { margin-bottom: 24px; }
.quest-section h3 {
  margin: 0 0 12px;
  color: var(--gold-bright);
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.quest-reset-note {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
}
.quest-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.quest-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 92px;
  padding: 10px 14px;
  background: linear-gradient(145deg, #16213b, #0b1220);
  background-clip: padding-box;
  border-style: solid;
  border-width: 10px 14px;
  border-image-source: url("image_webp/ui_quest_codex_20260921/quest_card_frame.webp");
  border-image-slice: 20 24 fill;
  border-image-width: 10px 14px;
  border-image-repeat: stretch;
  border-radius: 0;
  box-sizing: border-box;
}
.quest-card.is-complete {
  border-image-source: url("image_webp/ui_quest_codex_20260921/quest_card_frame_complete.webp");
  filter: drop-shadow(0 0 5px rgba(241, 210, 139, 0.2));
}
.quest-card.is-claimed { opacity: 0.55; }
.quest-card-main { flex: 1; min-width: 0; text-align: left; }
.quest-card-main b { display: block; color: var(--text); font-size: 17px; }
.quest-card-main small { display: block; color: var(--text-dim); font-size: 14px; margin: 3px 0 8px; }
.quest-progress-bar {
  width: 100%;
  height: 12px;
  padding: 2px 8px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.58) url("image_webp/ui_quest_codex_20260921/quest_progress_track.webp") center / 100% 100% no-repeat;
  overflow: hidden;
}
.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #5fb0ff, #f1d28b);
  transition: width 0.2s ease;
}
.quest-progress-text { font-size: 13px; color: var(--text-dim); }
.quest-card-reward {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.quest-reward-text { font-size: 15px; color: #f5d98c; white-space: nowrap; }
.quest-claim-btn { font-size: 14px; padding: 9px 16px; }
.quest-story-card { justify-content: space-between; }
.quest-story-card.is-locked { opacity: 0.5; }
.quest-lock-badge, .quest-done-badge, .quest-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 4px;
}
.quest-lock-badge::before, .quest-done-badge::before, .quest-active-badge::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: center / contain no-repeat;
}
.quest-lock-badge::before { background-image: url("image_webp/ui_quest_codex_20260921/quest_status_locked.webp"); }
.quest-done-badge::before { background-image: url("image_webp/ui_quest_codex_20260921/quest_status_done.webp"); }
.quest-active-badge::before { background-image: url("image_webp/ui_quest_codex_20260921/quest_status_active.webp"); }
.quest-lock-badge { color: var(--text-dim); }
.quest-done-badge { color: #f1d28b; background: rgba(245, 216, 145, 0.12); }
.quest-active-badge { color: #9fe8ff; background: rgba(95, 176, 255, 0.12); }

/* =========================================================================
   영혼 기록(도감) 탭 — 전용 카드/선택/상세 프레임
   ========================================================================= */
.codex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.codex-header h3 { margin: 0; color: var(--gold-bright); font-size: 14px; }
.codex-count { font-size: 11px; color: var(--text-dim); }
.codex-kind-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.codex-body {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.codex-list {
  flex: 1 1 280px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.codex-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 110px;
  padding: 5px 7px;
  background: linear-gradient(145deg, #16213b, #0b1220);
  background-clip: padding-box;
  border-style: solid;
  border-width: 12px 14px;
  border-image-source: url("image_webp/ui_quest_codex_20260921/codex_card_frame.webp");
  border-image-slice: 24 26 fill;
  border-image-width: 12px 14px;
  border-image-repeat: stretch;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
}
.codex-card.is-locked { filter: grayscale(1) brightness(0.55); }
.codex-card.is-selected {
  border-image-source: url("image_webp/ui_quest_codex_20260921/codex_card_frame_selected.webp");
  filter: drop-shadow(0 0 6px rgba(177, 95, 255, 0.28));
}
.codex-card.is-locked.is-selected {
  filter: drop-shadow(0 0 6px rgba(177, 95, 255, 0.35));
}
.codex-card-name { font-size: 12px; font-weight: 700; }
.codex-card-sub { font-size: 10px; color: var(--text-dim); }
.codex-detail {
  flex: 0 1 260px;
  min-width: 220px;
  min-height: 360px;
  padding: 8px 10px;
  background: linear-gradient(145deg, #16213b, #0b1220);
  background-clip: padding-box;
  border-style: solid;
  border-width: 18px 16px;
  border-image-source: url("image_webp/ui_quest_codex_20260921/codex_detail_frame.webp");
  border-image-slice: 30 28 fill;
  border-image-width: 18px 16px;
  border-image-repeat: stretch;
  border-radius: 0;
  box-sizing: border-box;
  text-align: left;
}
.codex-detail h3 { margin: 0 0 4px; color: var(--gold-bright); font-size: 15px; }
.codex-detail-tag { margin: 0 0 10px; font-size: 10px; color: var(--text-dim); }
.codex-detail-row { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.codex-detail-row b { color: var(--text); }
.codex-detail-lore { margin-top: 10px; font-size: 11px; color: #cbbf9d; font-style: italic; }

/* =========================================================================
   랭킹 / 패치노트 모달
   ========================================================================= */
.leaderboard-inner, .patchnotes-inner { width: min(420px, 88vw); max-height: 80vh; display: flex; flex-direction: column; }
.leaderboard-list, .patchnotes-list { overflow-y: auto; max-height: 50vh; margin-bottom: 14px; text-align: left; }
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(58, 69, 98, 0.5);
  font-size: 13px;
}
.leaderboard-rank { width: 34px; flex-shrink: 0; color: var(--gold-bright); font-weight: 700; }
.leaderboard-name { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-stage { flex-shrink: 0; color: var(--text-dim); font-size: 11px; }
.patchnote-entry { margin-bottom: 16px; }
.patchnote-entry h4 { margin: 0 0 6px; color: var(--gold-bright); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.patchnote-date { font-size: 10px; font-weight: 400; color: var(--text-dim); }
.patchnote-entry ul { margin: 0; padding-left: 18px; }
.patchnote-entry li { font-size: 12px; color: var(--text-soft); line-height: 1.7; }

/* =========================================================================
   스킬 툴팁
   ========================================================================= */
.skill-tooltip {
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -100%);
  margin-top: -10px;
  background: linear-gradient(160deg, #17223c, #0d1526);
  border-style: solid;
  border-width: 12px;
  border-image-source: url("image_webp/ui_polish_20260921/ui_skill_tooltip_frame.webp");
  border-image-slice: 42 fill;
  border-image-width: 12px;
  border-image-repeat: stretch;
  border-radius: 0;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.9),
    0 0 0 1px #0a1122;
  padding: 10px 14px;
  max-width: 220px;
  z-index: 60;
}
.skill-tooltip.hidden {
  display: none;
}
.skill-tooltip .tooltip-name {
  font-weight: 800;
  color: var(--gold-bright);
  font-size: 13px;
  margin-bottom: 4px;
  white-space: nowrap;
}
.skill-tooltip .tooltip-desc {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.5;
}
.skill-tooltip .tooltip-cd {
  color: var(--text-dim);
  font-size: 11px;
  margin-top: 6px;
}

/* Touch controls remain below modal overlays and never steal desktop input. */
#touch-controls {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.touch-device #touch-controls {
  display: block;
}
#touch-joystick {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(30px, env(safe-area-inset-bottom));
  width: 132px;
  height: 132px;
  border: 2px solid #a58d56;
  border-radius: 50%;
  background: rgba(20, 30, 45, 0.72);
  pointer-events: auto;
  touch-action: none;
  display: grid;
  place-items: center;
}
#touch-knob {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #827450;
  border: 2px solid #efd997;
  pointer-events: none;
}
#touch-attack {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(38px, env(safe-area-inset-bottom));
  width: 94px;
  height: 94px;
  border-radius: 50%;
  border: 2px solid #e4c576;
  background: #283443;
  color: #ffe5a0;
  font: bold 18px sans-serif;
  pointer-events: auto;
  touch-action: none;
}
#touch-attack.held {
  background: #71603d;
}
.touch-device .hotbar {
  bottom: 26px;
  gap: 10px;
  left: 50%;
}
.touch-device .basic-attack-hud {
  bottom: 120px;
}
.touch-device .corner-btn {
  bottom: 106px;
}
.slot {
  font: inherit;
  color: inherit;
  padding: 0;
  touch-action: manipulation;
  background-color: transparent;
  border: 0;
  appearance: none;
}
button.skill-card {
  color: inherit;
  font: inherit;
}
button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #ffe49a;
  outline-offset: 3px;
}
#storage-notice {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #5a281e;
  color: #fff2d6;
  border: 1px solid #ffc576;
  border-radius: 6px;
  padding: 10px 16px;
  max-width: 90vw;
}
@media (max-height: 500px) {
  .touch-device .hotbar {
    bottom: 105px;
    left: 70%;
  }
  .touch-device .basic-attack-hud {
    bottom: 190px;
    left: 70%;
  }
  .touch-device .corner-btn {
    bottom: auto;
    top: 12px;
  }
  #touch-joystick {
    bottom: 18px;
    width: 96px;
    height: 96px;
  }
  #touch-attack {
    bottom: 16px;
    width: 70px;
    height: 70px;
  }
}

@media (max-height: 500px) {
  .touch-device .hud-top-right {
    right: 140px;
  }
}
.touch-help {
  display: none;
}
.touch-device .touch-help {
  display: block;
}
/* HUD: resource labels, separate stage objective, and compact pause menu. */
body:not(.touch-device) .hud-top-left {
  width: 360px;
}
.hud-status-panel {
  padding: 8px;
  gap: 14px;
}
.hud-status-body .stage-label {
  margin-bottom: 10px;
  letter-spacing: 2px;
}
/* 라벨을 바 왼쪽에, 수치는 바 아래 중앙에 두는 배치(레퍼런스 목업 기준) */
.hud-meter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 2px 0;
}
.hud-meter-label {
  flex: 0 0 auto;
  min-width: 44px;
  color: #ebd5a6;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.hud-meter-row .bar {
  flex: 1;
  margin-bottom: 0;
}
.bar-value {
  text-align: center;
  margin: 2px 2px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}
#hud .hud-status-body .bar {
  clip-path: none;
  border-radius: 3px;
  border: 1px solid #8e713d;
  box-shadow:
    0 0 0 1px #080d17,
    inset 0 2px 7px #000;
}
#hud .hud-status-body .hp-fill {
  background: linear-gradient(90deg, #861e35, #d83754, #ee6b79);
}
#hud .hud-status-body .exp-fill {
  background: linear-gradient(90deg, #294b83, #527cbe, #91bce8);
}
#hud .hud-status-body .exp-bar {
  height: 18px;
  margin-bottom: 2px;
}
#hud .hud-status-body .exp-bar .bar-text {
  font-size: 10px;
}
.hud-objective {
  position: absolute;
  left: 16px;
  top: 196px;
  width: 360px;
  padding: 8px 12px;
  background: #0c1423eb;
  border-left: 2px solid #bd9650;
}
.objective-label {
  font-size: 10px;
  color: #b79b65;
  letter-spacing: 1px;
}
.hud-objective .stage-progress {
  margin: 4px 0 0;
  font-size: 12px;
}
.basic-attack-hud {
  width: 270px;
  padding: 10px 12px;
  gap: 8px;
  align-items: center;
  border-radius: 3px;
  border: 1px solid #b79650;
  box-shadow:
    inset 0 0 0 3px #111b2a,
    0 3px 12px #0008;
  background: linear-gradient(135deg, #253147, #0c1422);
}
.basic-key {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font: 800 18px var(--font);
  color: #ffe1a0;
  border: 1px solid #c49a50;
  background: linear-gradient(#443921, #19191b);
  box-shadow: 0 2px 0 #705529;
}
.basic-label {
  flex: 1;
  font-weight: 700;
  color: #eee0c4;
}
.basic-label small {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 400;
  color: #9aa8bf;
}
.basic-attack-hud .basic-cd-track {
  height: 5px;
  border: 1px solid #574627;
}
#pause-modal {
  padding: 16px;
}
#pause-modal .modal-inner {
  width: 420px;
  min-width: 0;
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px 18px;
}
#pause-modal h2 {
  margin: 4px 0 24px;
}
#pause-modal .pause-card-row {
  max-height: 210px;
}
#pause-modal .pause-card-empty {
  padding: 18px 0;
}
#pause-modal .pause-actions {
  gap: 12px;
  margin-top: 24px;
}
#pause-modal .menu-btn {
  min-height: 48px;
  width: 100%;
  padding: 10px 14px;
  background-size: 100% 100%;
}
#pause-modal #btn-resume {
  filter: brightness(1.15);
}
.touch-device .hud-objective {
  width: 270px;
  top: 190px;
}
.touch-device .basic-attack-hud {
  width: 230px;
  padding: 7px 9px;
}
@media (max-height: 500px) {
  .hud-objective {
    top: 174px;
  }
  .touch-device .hud-objective {
    top: 174px;
  }
  #pause-modal .modal-inner {
    padding: 10px 14px;
  }
  #pause-modal .pause-actions {
    gap: 6px;
    margin-top: 12px;
  }
}
#hud .hud-top-left .hud-objective {
  position: static;
  width: 100%;
  margin-top: 6px;
}
/* Generated gold/enamel HUD frame; live text and fills stay in the DOM. */
#hud .hud-status-panel,
#hud .basic-attack-hud {
  border: 16px solid #bfa36b;
  border-image: url("image_webp/ui_hud_20260913/frame.webp") 145 fill / 16px / 0
    stretch;
  border-radius: 0;
  background: #091320;
  box-shadow: 0 4px 14px #0009;
}
#hud .hud-status-panel {
  align-items: center;
  padding: 3px 2px;
  gap: 12px;
}
#hud .hud-portrait {
  width: 72px;
  height: 72px;
}
#hud .hud-portrait .portrait-frame {
  border-radius: 0;
  border: 0;
  image-rendering: auto;
  box-shadow: none;
}
#hud .hud-level-badge {
  min-width: 25px;
  height: 25px;
  right: -6px;
  bottom: -5px;
  border: 2px ridge #dfc17d;
  background: linear-gradient(145deg, #51452d, #151b22);
  color: #ffe4a8;
  font-size: 13px;
}
#hud .hud-status-body .stage-label {
  font-size: 15px;
  text-align: center;
  color: #f1dbac;
  letter-spacing: 3px;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid #91744280;
}
#hud .hud-meter-label {
  margin: 4px 1px;
  font-size: 10px;
  color: #ead5a9;
}
#hud .hud-status-body .bar {
  border: 2px ridge #d4b77c;
  border-radius: 2px;
  background: #060c14;
  box-shadow:
    0 0 0 1px #211a13,
    inset 0 2px 5px #000;
  height: 23px;
  margin-bottom: 5px;
}
#hud .hud-status-body .bar-fill {
  box-shadow:
    inset 0 1px 1px #fff9,
    inset 0 -3px 4px #0009;
  background-size: auto;
}
#hud .hud-status-body .hp-fill {
  background:
    linear-gradient(175deg, transparent 45%, #ff899433 46%, transparent 65%),
    linear-gradient(0deg, #8a001b, #ef1537 50%, #ff6d79 54%, #b40023);
}
#hud .hud-status-body .exp-fill {
  background:
    linear-gradient(175deg, transparent 45%, #b9f7ff66 46%, transparent 65%),
    linear-gradient(0deg, #064580, #09a4e6 50%, #8aeaff 54%, #1371ac);
}
#hud .hud-status-body .bar-text {
  font-size: 12px;
  text-shadow:
    0 1px 3px #000,
    0 0 3px #000;
}
#hud .hud-status-body .exp-bar {
  height: 18px;
  margin-bottom: 0;
}
#hud .hud-status-body .shield-bar {
  height: 16px;
  margin-top: 0;
}
@media (max-width: 600px) {
  #hud .hud-top-left {
    width: min(300px, calc(100vw - 90px));
  }
  #hud .hud-portrait {
    width: 52px;
    height: 52px;
  }
  #hud .hud-status-panel {
    gap: 8px;
    border-image-width: 12px;
    border-width: 12px;
  }
  #hud .hud-status-body .stage-label {
    font-size: 12px;
    letter-spacing: 1px;
  }
}
/* Face-focused HUD portraits and skill/basic-attack size hierarchy. */
#hud .hud-portrait .portrait-frame {
  position: relative;
}
/* 초상화 원본(image_webp/portrait/*.webp)이 이미 얼굴 위주로 알맞게 잘려 있어서 억지로
   확대할 필요가 없다 — 그냥 자연스럽게 꽉 채워서 중앙 정렬만 한다. */
#hud .hud-portrait .portrait-frame > img:not(.adv-static-portrait) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 전직 정지 초상화(image_webp/portrait/*.webp)는 이미 얼굴 위주로 꽉 차게 잘려 있어서
   위 확대 보정이 필요 없다 — 오히려 과하게 확대돼 잘려 보이므로 제외한다. */
#hud .hud-portrait .portrait-frame > img.adv-static-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#hud .hud-portrait .adv-portrait {
  transform: scale(2.5);
  transform-origin: 50% 16%;
}
#hud .hud-level-badge {
  right: auto;
  left: -6px;
}
body:not(.touch-device) #hud .hotbar {
  gap: 12px;
  padding: 10px 16px;
}
body:not(.touch-device) #hud .hotbar .slot {
  width: 66px;
  height: 66px;
}
body:not(.touch-device) #hud .hotbar .slot-icon {
  font-size: 34px;
}
body:not(.touch-device) #hud .hotbar .slot-key {
  font-size: 12px;
  right: 4px;
  bottom: 3px;
}
/* Skill tray uses the same generated metal/enamel frame as the HUD. */
#hud .hotbar {
  clip-path: none;
  border: 14px solid #baa16b;
  border-image: url("image_webp/ui_hud_20260913/frame.webp") 145 fill / 14px / 0
    stretch;
  background: #091320;
  box-shadow: 0 6px 18px #000b;
  padding: 5px 8px;
  gap: 12px;
}
body:not(.touch-device) #hud .hotbar {
  padding: 5px 8px;
}
body:not(.touch-device) #hud .basic-attack-hud {
  bottom: 132px;
}
#hud .basic-attack-hud {
  width: 226px;
  grid-template-columns: 29px 1fr auto;
  gap: 5px;
  border-width: 12px;
  border-image-width: 12px;
}
#hud .basic-key {
  width: 27px;
  height: 32px;
  font-size: 16px;
}
#hud .basic-label {
  font-size: 11px;
}
#hud .basic-label small {
  display: none;
}
#hud .basic-cd-track {
  height: 6px;
}
body:not(.touch-device) #hud .basic-attack-hud {
  bottom: 118px;
}
#hud .basic-attack-hud {
  width: 280px;
  padding: 0 2px;
  gap: 7px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
}
#hud .basic-key {
  grid-row: 1 / 3;
  height: 39px;
  width: 34px;
  border: 2px ridge #bea16a;
  background: linear-gradient(145deg, #55534a, #12161c 65%);
  box-shadow: inset 0 0 2px #22262b;
  text-shadow: 0 2px 2px #000;
}
#hud .basic-label {
  font-size: 12px;
}
#hud .basic-label small {
  font-size: 8px;
}
#hud .basic-attack-hud strong {
  font-size: 11px;
  color: #f6d68d;
}
#hud .basic-cd-track {
  grid-column: 2 / 4;
  height: 8px;
  border: 1px solid #c4ab74;
  border-radius: 1px;
  background: #050a11;
}
#hud .basic-cd-track i {
  background: linear-gradient(0deg, #8e5b15, #efb845 48%, #ffeb9b 55%, #ae7c26);
  box-shadow: inset 0 1px 1px #fff9;
}
.touch-device #hud .hotbar {
  border-width: 10px;
  border-image-width: 10px;
  padding: 3px 5px;
  gap: 8px;
}
/* Original concept artwork sampled as live gauge textures. */
#hud .hud-status-panel,
#hud .basic-attack-hud,
#hud .hotbar {
  border-image-width: 18px;
  border-image-slice: 125 fill;
  background-color: #08101b;
  box-shadow:
    0 0 0 1px #34291a,
    0 5px 16px #000b;
}
#hud .hud-status-panel {
  gap: 12px;
}
#hud .hud-status-body .stage-label {
  font-family: Georgia, var(--font);
  font-size: 17px;
  color: #f3dfaf;
  text-shadow: 0 2px 2px #000;
  border-bottom: 1px solid #b5975970;
}
#hud .hud-status-body .bar {
  border: 3px ridge #d5bd89;
  border-radius: 0;
  height: 25px;
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 50%,
    calc(100% - 8px) 100%,
    8px 100%,
    0 50%
  );
}
#hud .hud-status-body .bar-fill {
  background-image: url("image_webp/ui_hud_20260913/concept.webp");
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 2px #fff9,
    inset 0 -2px 3px #0007;
}
#hud .hud-status-body .hp-fill {
  background-size: 2300px 885px;
  background-position: -900px -180px;
  background-color: #b80022;
}
#hud .hud-status-body .exp-fill {
  background-size: 2300px 885px;
  background-position: -900px -353px;
  background-color: #039ad1;
}
#hud .hud-status-body .shield-fill {
  background-image: linear-gradient(#c5efff, #397caf);
}
#hud .hud-status-body .exp-bar {
  height: 20px;
}
#hud .hud-status-body .bar-text {
  color: #fff5df;
}
#hud .hud-meter-label {
  color: #f1d8a4;
  font-size: 11px;
  text-shadow: 0 1px 2px #000;
}
#hud .basic-attack-hud {
  grid-template-columns: 29px 28px 1fr auto;
  width: 242px;
}
#hud .basic-attack-hud::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / 3;
  width: 28px;
  height: 34px;
  background: url("image_webp/ui_hud_20260913/concept.webp") -96px -95px / 380px 146px
    no-repeat;
}
#hud .basic-key {
  grid-column: 1;
}
#hud .basic-label {
  grid-column: 3;
  grid-row: 1;
  color: #f1dab0;
}
#hud .basic-attack-hud strong {
  grid-column: 4;
  grid-row: 1;
}
#hud .basic-cd-track {
  grid-column: 3 / 5;
}
#hud .basic-cd-track i {
  background: #d5a335 url("image_webp/ui_hud_20260913/concept.webp") -920px -753px /
    2300px 885px no-repeat;
}
#hud .hotbar {
  border-image-width: 18px;
}

/* A(기본공격) 키는 조이스틱 노브, 그 옆 스킬 아이콘 자리는 공용 버튼 텍스처를 배경으로 쓴다
   (image_webp/ui2 — 여기저기 흩어진 임시 그라디언트/스프라이트 배경을 정리). */
#hud .basic-key {
  border: 0;
  box-shadow: none;
  background: url("image_webp/ui2/ui_joystick_knob.webp") center / 100% 100% no-repeat;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
#hud .basic-attack-hud::before {
  content: "";
  background: url("image_webp/ui2/ui_button_default.webp") center / cover no-repeat;
  border-radius: 3px;
}

/* 기본공격 바 안쪽 내용물이 왼쪽(A) 여백은 좁고 오른쪽(준비) 여백은 넓어 보였다
   — A/아이콘 쪽은 오른쪽으로, 문구/게이지 쪽은 왼쪽으로 당겨 중앙에 맞춘다. */
#hud .basic-attack-hud {
  padding: 0 3px 0 7px;
  gap: 5px;
}

/* 타이틀 로고 글자가 금장 엠블럼 장식(양옆 검) 밖으로 삐져나갔다 —
   엠블럼과 같은 폭으로 맞추고 살짝 줄여서 안쪽 여백 안에 들어오게 한다. */
.title-content {
  width: min(640px, 86vw);
}
/* 글자 크기/자간도 엠블럼 그림과 같은 폭 수식(min(640px,86vw))에 직접 비례시켜 스케일 —
   vw 기준이던 이전 값은 그림은 86vw로 줄어드는데 글자는 그보다 덜 줄어(4.4vw 하한 24px)
   리본 폭보다 글자가 커 보이는 문제가 있었다. 컨테이너 쿼리(cqw)는 일부 브라우저에서
   지원이 안 될 수 있어 calc()+min()으로 바꿔 어디서나 같은 비율이 나오게 한다. */
.game-logo {
  width: 100%;
  text-align: center;
  font-size: calc(min(640px, 86vw) * 0.081);
  letter-spacing: calc(min(640px, 86vw) * 0.0125);
}

/* 기본공격 바 — A 옆에 있던 빈 장식 칸(칼 아이콘 지운 자리) 완전히 제거하고
   문구/게이지/상태를 그 자리로 당긴다. */
#hud .basic-attack-hud::before {
  display: none;
}
#hud .basic-attack-hud {
  grid-template-columns: 29px 1fr auto;
}
#hud .basic-label {
  grid-column: 2;
}
#hud .basic-attack-hud strong {
  grid-column: 3;
}
#hud .basic-cd-track {
  grid-column: 2 / 4;
}

/* HUD 초상화는 좀 더 키우고, 패널 전체 크기는 살짝 줄여서 초상화 비중을 키운다. */
#hud .hud-portrait {
  width: 86px;
  height: 86px;
}
body:not(.touch-device) #hud .hud-top-left {
  width: 350px;
}
/* 체력/경험치 바를 가로로 더 길게, 세로는 살짝 낮게 */
#hud .hud-status-body .bar {
  height: 22px;
}

/* 개별 스킬 슬롯이 아니라 핫바 전체를 감싸는 큰 사각 배경 쪽을 image_webp/ui2/ui_button_default.png로
   교체 — 슬롯(육각 프레임)은 원래대로 되돌린다. */
.slot {
  background-image: url("image_webp/ui2/ui_hotbar_slot.webp");
  background-size: 100% 100%;
  background-position: center;
}
#hud .hotbar {
  /* 금테 + 양끝 다이아몬드 전부 살아있는 원본 그대로 배경으로 쓴다.
     예전 규칙이 남긴 box-shadow(1px 얇은 외곽선)가 그 위에 겹쳐 보이고 있어서 같이 지운다. */
  border: 0;
  border-image: none;
  box-shadow: none;
  background: url("image_webp/ui2/ui_button_default.webp") center / 100% 100%
    no-repeat;
  padding: 8px 12px;
}

/* 탭마다 다른 아이콘 이미지를 썼더니 원본 비율 차이로 계속 크기가 들쭉날쭉했다 —
   4개 전부 공용 알약(ui_tab_pill) 배경 하나로 통일해서 완전히 같게 맞춘다.
   아이콘은 지우지 않고, 좁아진 알약 폭에 맞게 작게 줄여서 왼쪽에 계속 보여준다
   (버그 수정 2026-09-21: 아래 .tab-icon{display:none}이 미디어쿼리 밖에 있어서
   좁은 화면뿐 아니라 데스크톱에서도 아이콘이 통째로 안 보이고 있었다 — 그 규칙은
   진짜 좁은 화면(≤600px, 2열 그리드) 쪽으로 옮기고, 여기서는 아이콘 크기만 줄인다). */
.tab-btn {
  width: 118px;
  padding: 0 10px 0 34px;
  background-size: 100% 100%;
  background-position: center;
}
.tab-btn .tab-icon {
  left: 6px;
  width: 24px;
  height: 24px;
}

/* 기본공격 바 전체를 살짝 축소 */
#hud .basic-attack-hud {
  width: 210px;
}
#hud .basic-key {
  width: 25px;
  height: 30px;
  font-size: 14px;
}
#hud .basic-label {
  font-size: 11px;
}
#hud .basic-attack-hud strong {
  font-size: 10px;
}
#hud .basic-cd-track {
  height: 7px;
}

/* 옵션 화면의 "UI 크기" 슬라이더 3개 — 각 HUD 요소를 통째로 scale()해서 축소/확대한다.
   위치를 잡는 기존 translate와 같이 써야 해서, 각 요소의 최종 transform 값에 얹는다. */
.hud-top-left {
  transform: scale(var(--ui-hud-scale));
  transform-origin: top left;
}
#hud .basic-attack-hud {
  transform: translateX(-50%) scale(var(--ui-basic-scale));
}
#hud .hotbar {
  transform: translateX(-50%) scale(var(--ui-hotbar-scale));
}

/* 모바일 전투 시야 확보: HUD는 낮게, 조작 패드는 손가락이 누르기 충분하게 유지한다. */
@media (pointer: coarse) and (max-width: 900px) {
  .mobile-optimized #hud {
    transform: scale(0.78);
  }

  .mobile-optimized .touch-device .hotbar {
    bottom: 142px;
    gap: 4px;
    padding: 2px 4px;
  }

  .mobile-optimized .touch-device .slot {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
  }

  .mobile-optimized .touch-device .slot-icon {
    font-size: 26px;
  }

  .mobile-optimized .touch-device .basic-attack-hud {
    bottom: 108px;
    width: 184px;
  }

  .mobile-optimized #touch-joystick {
    width: 112px;
    height: 112px;
  }

  .mobile-optimized #touch-knob {
    width: 48px;
    height: 48px;
  }

  .mobile-optimized #touch-attack {
    width: 82px;
    height: 82px;
    font-size: 16px;
  }
}

/* 좁은 viewport에서는 터치 판별 여부와 관계없이 모바일 HUD를 사용한다. */
@media (max-width: 600px) {
  #hud,
  .mobile-optimized #hud {
    transform: none;
    transform-origin: top left;
  }

  #hud .hud-top-left,
  body:not(.touch-device) #hud .hud-top-left {
    width: min(258px, calc(100vw - 110px));
  }

  #hud .hud-status-panel {
    gap: 5px;
    padding: 3px 5px 3px 4px;
    border-width: 9px;
    border-image-width: 12px;
  }

  #hud .hud-portrait {
    width: 44px;
    height: 44px;
  }

  #hud .hud-status-body .stage-label {
    font-size: 13px;
    margin-bottom: 3px;
    padding-bottom: 2px;
  }

  #hud .hud-meter-label {
    min-width: 25px;
    margin: 2px 0;
    font-size: 9px;
  }

  #hud .hud-meter-row {
    gap: 4px;
    margin: 2px 0 0;
  }

  #hud .hud-status-body .bar {
    height: 12px;
    border-width: 2px;
  }

  #hud .hud-status-body .exp-bar {
    height: 10px;
  }

  #hud .bar-value {
    margin: 1px 0 2px;
    font-size: 9px;
  }

  #hud .hud-objective {
    font-size: 10px;
    margin-top: 2px;
  }

  #hud .hud-top-right {
    gap: 3px;
    right: 8px;
    top: 8px;
  }

  #hud .currency {
    min-width: 36px;
    padding: 2px 4px;
    font-size: 11px;
  }

  #hud .basic-attack-hud {
    bottom: 102px;
    width: 180px;
    min-height: 40px;
    border-width: 8px;
    border-image-width: 12px;
    grid-template-columns: 28px 1fr auto;
    gap: 4px;
  }

  #hud .basic-key {
    width: 26px;
    height: 29px;
    font-size: 13px;
  }

  #hud .basic-label,
  #hud .basic-attack-hud strong {
    font-size: 10px;
  }

  #hud .basic-cd-track {
    height: 5px;
  }

  #hud .hotbar {
    bottom: 20px;
    gap: 2px;
    padding: 2px 4px;
    border-width: 8px;
    border-image-width: 12px;
  }

  #hud .hotbar .slot,
  body:not(.touch-device) #hud .hotbar .slot {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }

  #hud .hotbar .slot-icon,
  body:not(.touch-device) #hud .hotbar .slot-icon {
    font-size: 23px;
  }

  #hud .hotbar .slot-key,
  body:not(.touch-device) #hud .hotbar .slot-key {
    font-size: 9px;
    right: 2px;
    bottom: 1px;
  }

  .touch-device #touch-joystick {
    width: 104px;
    height: 104px;
    left: max(14px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
  }

  .touch-device #touch-knob {
    width: 44px;
    height: 44px;
  }

  .touch-device #touch-attack {
    width: 76px;
    height: 76px;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    font-size: 15px;
  }

  #skill-tooltip,
  .touch-device #skill-tooltip {
    display: none !important;
  }
}

/* 모바일 로비: 고정 폭 탭과 넓은 카드 그리드를 화면 폭에 맞춘다. */
@media (max-width: 600px) {
  .lobby-frame {
    padding: 10px 10px 14px;
  }

  .lobby-header {
    display: grid;
    /* 4열: 제목 | 더보기 | 옵션 | 타이틀로. 재화(.lobby-currency)는 아래에서 2행 전체를 차지한다. */
    grid-template-columns: 1fr auto auto auto;
    gap: 6px 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .lobby-title {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .lobby-currency {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 5px;
    margin-left: 0;
    font-size: 11px;
  }

  .lobby-currency .currency {
    min-width: 0;
    padding: 3px 6px;
  }

  #btn-lobby-title,
  #btn-lobby-option {
    padding: 5px 8px;
    font-size: 10px;
  }

  .tab-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 8px;
  }

  .tab-btn {
    width: 100%;
    height: 42px;
    padding: 0 6px;
    font-size: 12px;
    letter-spacing: 0;
    background-size: 100% 100%;
  }

  /* 좁은 화면(2열 그리드)은 알약 배경만 쓰도록 이미 통일돼 있어서 아이콘 자리가 없다 —
     겹쳐 보이지 않게 아이콘은 여기서만 숨긴다. */
  .tab-icon {
    display: none;
  }

  /* 탭 개수가 홀수면 2열 그리드 마지막 줄에 버튼 하나만 남아 오른쪽이 빈다 —
     그 경우에만 마지막 버튼이 한 줄을 꽉 채우게 한다. */
  .tab-nav .tab-btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .tab-content {
    padding-right: 2px;
    overscroll-behavior: contain;
  }

  .lobby-section {
    padding: 10px 10px;
    margin-bottom: 8px;
  }

  .lobby-section h3 {
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: 1px;
    padding-left: 6px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .stat-grid-vertical {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .stat-item {
    padding: 6px 7px;
    font-size: 10px;
  }

  .stat-icon {
    width: 20px;
    height: 20px;
  }

  .level-row,
  .job-row {
    gap: 7px;
  }

  .level-row .lv-badge {
    padding: 5px 8px;
    font-size: 11px;
  }

  .level-row .bar {
    min-width: 90px;
  }

  .job-current {
    gap: 7px;
    padding: 7px 9px;
  }

  .job-current .job-icon {
    font-size: 20px;
  }

  .portrait-frame {
    width: 52px;
    height: 52px;
  }

  .equip-slots {
    gap: 6px;
    margin-bottom: 10px;
  }

  .equip-slot-box {
    width: calc(33.333% - 4px);
    padding: 8px 4px;
    border-width: 8px;
    border-image-width: 8px;
  }

  .equip-slot-box .slot-cat,
  .equip-slot-box .slot-item-name {
    font-size: 9px;
  }

  .equip-slot-box .slot-icon-big {
    font-size: 22px;
  }

  .item-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .item-card {
    padding: 7px 4px;
    border-width: 8px;
    border-image-width: 8px;
  }

  .item-card .item-icon {
    font-size: 21px;
  }

  .item-card .item-name {
    font-size: 9px;
    overflow-wrap: anywhere;
  }

  .shop-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .shop-card {
    padding: 12px 10px;
    border-width: 8px;
    border-image-width: 8px;
  }

  .shop-card .shop-icon {
    font-size: 28px;
    margin-bottom: 4px;
  }

  .game-tab-summary {
    font-size: 12px;
    line-height: 1.65;
    margin-bottom: 10px;
  }

  .game-tab-overlay {
    padding: 8px 10px 10px;
  }
  .game-tab-overlay .game-tab-summary {
    margin-bottom: 0;
  }
  .game-tab-overlay .btn-explore {
    width: 100%;
    max-width: 260px;
  }

  .btn-explore {
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* 모바일 최종 압축: 스킬 슬롯만 작아지고 나머지 HUD가 남던 문제를 함께 정리한다. */
@media (max-width: 600px) {
  #hud .hud-top-left,
  body:not(.touch-device) #hud .hud-top-left {
    width: 220px;
  }

  #hud .hud-status-panel {
    gap: 4px;
    padding: 2px 3px 2px 2px;
    border-width: 7px;
    border-image-width: 9px;
  }

  #hud .hud-portrait {
    width: 34px;
    height: 34px;
  }

  #hud .hud-level-badge {
    min-width: 15px;
    height: 15px;
    padding: 0 2px;
    font-size: 8px;
  }

  #hud .hud-status-body .stage-label {
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 2px;
    padding-bottom: 1px;
  }

  #hud .hud-meter-row {
    gap: 3px;
    margin-top: 1px;
  }

  #hud .hud-meter-label {
    min-width: 22px;
    margin: 1px 0;
    font-size: 8px;
  }

  #hud .hud-status-body .bar {
    height: 9px;
    border-width: 1px;
  }

  #hud .hud-status-body .exp-bar {
    height: 7px;
  }

  #hud .bar-value {
    margin: 0 0 1px;
    font-size: 8px;
  }

  #hud .hud-top-left .hud-objective {
    margin-top: 2px;
    padding: 4px 6px;
    font-size: 8px;
  }

  #hud .hud-top-left .objective-label,
  #hud .hud-top-left .stage-progress {
    font-size: 8px;
  }

  #hud .basic-attack-hud {
    bottom: 100px;
    width: 150px;
    min-height: 32px;
    padding: 0 2px;
    border-width: 6px;
    border-image-width: 9px;
    grid-template-columns: 24px 1fr auto;
    gap: 3px;
  }

  #hud .basic-key {
    width: 22px;
    height: 24px;
    font-size: 11px;
  }

  #hud .basic-label,
  #hud .basic-attack-hud strong {
    font-size: 8px;
  }

  #hud .basic-cd-track {
    height: 4px;
  }

  #hud .corner-btn {
    top: 72px;
    bottom: auto;
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  #hud .corner-btn-controls {
    right: 50px;
  }

  #hud #btn-pause {
    right: 10px;
  }

  body:not(.touch-device) #hud .basic-attack-hud {
    bottom: 84px;
  }

  .touch-device #hud .basic-attack-hud {
    bottom: 170px;
  }
}

/* 2026-09-21 UI polish: keep generated frames above all legacy HUD overrides. */
#hud .hud-status-body .bar {
  box-sizing: border-box;
  clip-path: none;
  border-style: solid;
  border-width: 5px 12px;
  border-image-source: url("image_webp/ui_polish_20260921/ui_hud_bar_frame.webp");
  border-image-slice: 10 30 fill;
  border-image-width: 5px 12px;
  border-image-repeat: stretch;
  border-radius: 0;
}
.hud-boss .boss-bar {
  box-sizing: border-box;
  clip-path: none;
  border-style: solid;
  border-width: 6px 18px;
  border-image-source: url("image_webp/ui_polish_20260921/ui_boss_bar_frame.webp");
  border-image-slice: 15 56 fill;
  border-image-width: 6px 18px;
  border-image-repeat: stretch;
  border-radius: 0;
}
@media (max-width: 700px) {
  #hud .hud-status-body .bar {
    border-width: 3px 8px;
    border-image-width: 3px 8px;
  }
}

/* =========================================================================
   오프닝 스토리 (만화 패널 + 나레이션 자막) — screen-story
   ========================================================================= */
#screen-story {
  background: #000;
}
.story-intro {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.story-panel-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 1.2s ease;
  z-index: 1;
}
.story-panel-layer.active {
  opacity: 1;
  z-index: 2;
}
.story-img {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  animation: story-kenburns 9s ease-out forwards;
}
@keyframes story-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.story-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.6) 100%);
}
.story-subtitle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 32px 60px 48px;
  min-height: 160px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85) 55%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.story-subtitle p {
  font-size: 18px;
  line-height: 1.8;
  color: #f0e6d2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.story-subtitle p.show {
  opacity: 1;
  transform: translateY(0);
}
.story-skip-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.story-skip-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}
@media (max-width: 600px) {
  .story-subtitle {
    padding: 20px 20px 32px;
    min-height: 120px;
    gap: 5px;
  }
  .story-subtitle p {
    font-size: 15px;
    line-height: 1.6;
  }
  .story-skip-btn {
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 2026-09-21: 로비 상단 재화 배지는 세로 여유를 늘리고 우측 조작부는 촘촘하게 정렬. */
@media (min-width:601px){
  .lobby-header{gap:10px}
  .lobby-currency{gap:0}
  .lobby-currency .currency{
    min-height:42px;
    border-width:14px 22px;
    border-image-width:14px 22px;
    padding:5px 11px 5px 7px;
    font-size:16px;
  }
  #btn-header-more,#btn-lobby-option,#btn-lobby-title{padding:9px 14px}
}

/* 2026-09-21 캐릭터 탭 통합 대시보드 — 사용자 초안 기준 */
.character-dashboard{position:relative;box-sizing:border-box;max-width:1770px;margin:0 auto;padding:27px 42px 30px;min-height:0;border-image-slice:80 92;background:rgba(4,8,16,.82)}
.character-dashboard-main{position:relative;min-height:560px;background:linear-gradient(rgba(255,255,255,.025),rgba(3,4,10,.06)),url("image_webp/ui2/AIDrawing_260922_dd903428-6480-4606-86d3-3c0f074fb4e5_0_MiriCanvas.webp") center/100% 100% no-repeat}
/* 오른쪽 스탯 패널(410px)만큼 margin-right만 주면 남은 영역 안에서만 가운데 정렬되어
   실제 화면 중앙(빨간선)보다 타이틀/레벨바/영혼항아리가 왼쪽으로 치우쳐 보인다 —
   왼쪽에도 같은 여백을 대칭으로 줘서 화면 진짜 중앙에 오도록 보정한다. */
.character-growth-core{position:relative;width:calc(100% - 820px);margin:0 410px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0}
.character-growth-title{align-self:center;margin:0 0 14px;padding-left:14px;border-left:4px solid #e7c36e;color:#f3d37f;font-size:20px;font-weight:800;letter-spacing:1px}
.character-level-banner{box-sizing:border-box;width:min(820px,78%);margin:0 auto;height:110px;display:flex;align-items:center;gap:16px;padding:12px 70px;border-style:solid;border-width:26px 74px;border-image-source:url("image_webp/ui_levelup_20260921/character_level_bar_frame.webp");border-image-slice:145 390 fill;border-image-width:26px 74px;border-image-repeat:stretch;color:#f5d891}
.character-level-badge{flex:0 0 auto;font-size:22px;font-weight:900;text-shadow:0 0 8px rgba(242,198,93,.45)}
.character-level-track{position:relative;flex:1;height:26px;overflow:hidden;border:1px solid rgba(127,102,159,.65);background:#060b16;box-shadow:inset 0 2px 7px #000}
.character-level-fill{height:100%;background:linear-gradient(90deg,#56309e,#9b57e8 55%,#cf8cff);box-shadow:0 0 9px rgba(174,102,255,.7);transition:width .35s ease}
.character-level-track>span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:16px;font-weight:800;text-shadow:0 1px 3px #000}
/* max-width:100%로 부모(growth-core)보다 커질 수 없게 막는다 — 창 폭이 좁아지면
   growth-core 가용폭이 줄어드는데 항아리가 그보다 커지면서 잘려 보이던 문제 수정. */
.character-dashboard .soul-vessel-stage{width:min(480px,58vw);max-width:100%;margin-top:10px}
/* 항아리 좌우 중앙 보정은 --vessel-shift(위쪽 2026-09-22 블록)로 일원화했다 —
   같은 규칙이 여기 한 번 더 중복돼 있어서 값을 고쳐도 한쪽만 바뀌곤 했다. */
.character-dashboard-main .soul-train-button-compact{position:absolute;left:0;bottom:6px;padding:14px 28px;font-size:18px;gap:10px}
.character-dashboard-main .soul-train-button-compact .soul-icon-img{width:28px;height:28px}
/* ── 2026-09-22 스탯 패널 정렬 전면 재작업 ──────────────────────────────────
   character_stats_panel.png(1254x1254) 픽셀 실측:
     · 실제로 그려진 프레임      : x 197~1056 / y 19~1234 (나머지는 투명 여백)
     · 능력치 슬롯 9칸          : x 389~947,  y 318~1078, 칸 간격 86.56px
     · 아이콘 슬롯 박스          : x 296~364
     · 상단 명패(레벨/항아리) 칸 : x 491~906,  y 87~210
   예전에는 padding(78/58/66)으로 대충 맞춰서 ① 아이콘이 왼쪽 프레임 밖으로
   삐져나가고 ② 값이 오른쪽 프레임 위로 넘어가고 ③ 내용 높이가 560px를 넘겨
   행이 슬롯 그림과 한 칸씩 어긋나 있었다.
   이제 패널을 390x560 고정 박스로 두고, 위 실측값을 %로 환산해 절대배치한다
   (전부 %라서 패널이 줄어들어도 그림과 같이 따라 줄어든다). */
.character-dashboard .character-stat-column{position:absolute;top:0;right:0;display:block;width:390px;height:560px;min-height:0;box-sizing:border-box;padding:0;gap:0;background:url("image_webp/ui2/character_stats_panel.webp") center/100% 100% no-repeat;border:0;box-shadow:none;font-size:14px}
/* 상단 명패 칸 — 처음엔 바깥 프레임 장식(y87~)까지 명패로 잡아서 글씨가 실제
   금테 명패보다 위로 떠 있었다. 진짜 명패 판은 canvas x472~925 / y138~207. */
.character-dashboard .character-stat-column-badge{position:absolute;left:37.66%;width:36.11%;top:11.01%;height:5.5%;margin:0;padding:0;border:0;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:none;text-align:center;color:#f3d37f;text-shadow:0 2px 4px #000}
/* 9칸 슬롯 영역 — 아이콘 박스 왼쪽 끝(23.62%)부터 슬롯 오른쪽 끝(75.54%)까지,
   세로는 첫 칸/마지막 칸 중심이 그림과 정확히 겹치도록 위아래로 반 칸씩 확장. */
.character-dashboard .stat-grid-compact{position:absolute;left:23.62%;width:51.92%;top:24.69%;height:62.13%;display:grid;grid-template-columns:none;grid-template-rows:repeat(9,1fr);gap:0;margin:0;padding:0}
.character-dashboard .stat-grid-compact .stat-item{display:grid;align-items:center;grid-template-columns:10.42% minmax(0,1fr) auto;column-gap:5%;height:100%;min-height:0;box-sizing:border-box;padding:0 6.5% 0 0;border:0;border-radius:0;background:transparent}
.character-dashboard .stat-grid-compact .stat-icon{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.character-dashboard .stat-grid-compact .stat-label{margin:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.character-dashboard .stat-grid-compact .stat-value{font-size:13px;text-align:right;white-space:nowrap}
.character-dashboard-lower{display:grid;grid-template-columns:minmax(600px,42%) minmax(0,1fr);gap:16px;margin-top:18px;padding-top:20px;border-top:1px solid rgba(168,130,68,.58)}
.character-dashboard-lower h4{margin:0 0 14px;color:#f3d37f;font-size:17px;letter-spacing:1px}
.character-class-select,.character-skill-info{min-width:0;padding:16px 18px;border:1px solid rgba(70,83,113,.72);background:rgba(5,10,20,.62);box-shadow:inset 0 0 18px #0008}
.character-class-select .item-grid{grid-template-columns:repeat(5,minmax(104px,1fr));gap:14px}
.character-class-select .item-card{aspect-ratio:1/1;padding:0;border:0;min-width:0;background:transparent;overflow:visible}
.character-class-select .appearance-default-frame{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.character-class-select .appearance-portrait{position:absolute;z-index:1;left:15%;top:13%;width:70%;height:62%;margin:0;border:0;border-radius:0;object-fit:cover}
.character-class-select .appearance-select-frame{z-index:4;inset:-4%;width:108%;height:108%}
.character-class-select .item-name{position:absolute;z-index:3;left:13%;right:13%;bottom:8%;margin:0;font-size:13px;white-space:nowrap;color:#e7d7b5;text-shadow:0 2px 4px #000;overflow:hidden;text-overflow:ellipsis}
.character-skill-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.character-skill-rows>div{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:6px;
  align-items:start;
  padding:8px 10px;
  border:1px solid rgba(61,76,108,.7);
  background:rgba(7,13,25,.7);
}
.character-skill-rows b{grid-column:1;grid-row:1;white-space:nowrap;color:#90a6c5;font-size:12px;align-self:center}
.character-skill-rows strong{grid-column:2;grid-row:1;color:#f3d37f;font-size:13px;align-self:center;display:flex;align-items:center;gap:4px}
.character-skill-rows span{grid-column:1/-1;grid-row:2;color:#c5d0df;font-size:12px;line-height:1.35}
.character-passives{margin:7px 0 0;color:#9fb8d8;font-size:12px;line-height:1.4}.character-passives b{color:#ffe08a}
.character-dashboard-note{margin:12px 2px 0;color:#8298b7;font-size:13px}
@media(max-width:1100px){
  .character-dashboard-main{display:flex;flex-direction:column;align-items:center;min-height:0}
  .character-growth-core{width:100%;margin:0}
  /* position:static이면 안쪽 절대배치가 패널 밖으로 튀므로 relative로 둔다.
     폭이 390px보다 좁아지면 aspect-ratio로 높이도 같이 줄여 그림과 계속 맞춘다. */
  .character-dashboard .character-stat-column{position:relative;top:auto;right:auto;width:min(390px,100%);max-width:390px;height:auto;aspect-ratio:390/560;margin-top:14px}
  .character-dashboard-main .soul-train-button-compact{position:static;margin-top:14px}
  .character-dashboard-lower{grid-template-columns:1fr}
  .character-class-select .item-grid{grid-template-columns:repeat(5,minmax(54px,1fr))}
}
@media(max-width:700px){
  .character-dashboard{padding:12px 10px}
  .character-level-banner{width:100%;height:60px;padding:7px 34px;border-width:13px 36px;border-image-width:13px 36px}
  /* 스탯 패널은 그림 슬롯 기준 1열 고정(위 @media 1100 주석 참고) */
  .character-dashboard .character-stat-column-badge{font-size:11px}
  .character-dashboard .stat-grid-compact .stat-label{font-size:11px}
  .character-dashboard .stat-grid-compact .stat-value{font-size:11.5px}
  .character-skill-rows{grid-template-columns:1fr}
  .character-skill-rows>div{grid-template-columns:38px 1fr;}.character-skill-rows span{grid-column:1/-1}
}

/* ===== UI 모션 스프라이트 (image_webp/ui_motion_20260921/, 2026-09-22 연결) =====
   마스터 이미지만 생성돼있고 게임에 전혀 연결이 안 돼있던 5개 자산.
   알파 여백을 잘라낸 _strip.png를 "background-size: N*100% 100%" + steps(N-1)로
   재생한다(프레임 폭이 소수점이어도 % 기반이라 정확히 맞아떨어진다). */
@keyframes uiSpriteStepPlay{to{background-position:100% 0}}

.ui-motion-vfx{position:fixed;pointer-events:none;transform:translate(-50%,-50%);z-index:80;background-repeat:no-repeat;filter:drop-shadow(0 0 14px rgba(180,120,255,.55))}

/* 영혼새김 노드/E분기 강화 성공 시 클릭 지점에 짧게 터지는 발광 */
.vfx-node-activate{width:150px;height:83px;background-image:url('image_webp/ui_motion_20260921/soul_node_activate_6f_strip.webp');background-size:600% 100%;animation:uiSpriteStepPlay .6s steps(5) forwards}

/* E 스킬 해금 성공 시 버튼 위에서 터지는 골드-보라 배너 */
.vfx-e-unlock{width:320px;height:177px;z-index:85;background-image:url('image_webp/ui_motion_20260921/e_unlock_transition_8f_strip.webp');background-size:800% 100%;animation:uiSpriteStepPlay .9s steps(7) forwards}

/* 스테이지 진입 시 화면 중앙에 잠깐 뜨는 보라색 소환진 */
.vfx-stage-enter{width:260px;height:324px;z-index:90;background-image:url('image_webp/ui_motion_20260921/stage_enter_6f_strip.webp');background-size:600% 100%;animation:uiSpriteStepPlay .7s steps(5) forwards}

/* 상점 상자 개봉(펫 뽑기 결과 모달 상단, 모달 흐름 안에 인라인으로 삽입) */
.vfx-chest-open-inline{width:180px;height:243px;margin:0 auto 6px;background-image:url('image_webp/ui_motion_20260921/shop_chest_open_8f_strip.webp');background-repeat:no-repeat;background-size:800% 100%;animation:uiSpriteStepPlay .9s steps(7) forwards;filter:drop-shadow(0 0 14px rgba(180,120,255,.55))}

/* 스테이지 클리어 모달 상단(인라인) — 금색 축하 버스트 */
.vfx-stage-clear-inline{width:190px;height:228px;margin:0 auto 6px;background-image:url('image_webp/ui_motion_20260921/stage_clear_6f_strip.webp');background-repeat:no-repeat;background-size:600% 100%;animation:uiSpriteStepPlay .8s steps(5) forwards;filter:drop-shadow(0 0 16px rgba(255,215,100,.5))}

/* 성기사 심판자(cleric_judge) E 핫바 슬롯 위에 겹쳐 그리는 처형 스택(0~100) 원형 게이지 */
.judge-stack-ring{position:absolute;inset:-7px;border-radius:50%;pointer-events:none;display:none;background:conic-gradient(#ffd76b calc(var(--stack,0)*1%),rgba(255,215,107,.14) 0)}
.judge-stack-ring.show{display:block}
.judge-stack-ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#0a0f1a}
.judge-stack-ring::after{content:"";position:absolute;inset:-3px;background:url('image_webp/e_skill_tier5_vfx_20260920/cleric_judge_stack_frame.webp') center/100% 100% no-repeat}

/* ------------------------------------------------------------------
   2026-09-22 신규 — 장비 탭 개별 제작 이미지 13종 연결
   (image_webp/ui_equip_tab_20260921/*, 문서: image/장비/장비 탭 이미지 개별 제작 요청문.txt)
   위쪽에 이미 있는 .equipment-showcase / .equip-inventory-frame 규칙들보다
   뒤에 오므로(동일 우선순위 시 나중 규칙 승리) 여기서 배경을 최종적으로 덮어쓴다.
   ------------------------------------------------------------------ */
.equipment-layout{
  padding:14px;
  background:url("image_webp/ui_equip_tab_20260921/equipment_tab_background.webp") center/cover no-repeat;
  border-radius:4px;
}
.equipment-showcase{
  background:url("image_webp/ui_equip_tab_20260921/equipped_character_background.webp") center/100% 100% no-repeat !important;
}
.equip-inventory-frame{
  background:url("image_webp/ui_equip_tab_20260921/backpack_panel_background.webp") center/100% 100% no-repeat !important;
}
/* 착용 슬롯 5종 — 카테고리별 전용 프레임으로 교체(기존 ui_card_common.png 테두리 대신 사용) */
.equipment-showcase .equip-slot-box{
  border-style:none;
  border-image-source:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}
.equipment-showcase .equip-slot-box[data-cat="weapon"]{background-image:url("image_webp/ui_equip_tab_20260921/slot_weapon.webp")}
.equipment-showcase .equip-slot-box[data-cat="armor"]{background-image:url("image_webp/ui_equip_tab_20260921/slot_armor.webp")}
.equipment-showcase .equip-slot-box[data-cat="accessory"]{background-image:url("image_webp/ui_equip_tab_20260921/slot_accessory.webp")}
.equipment-showcase .equip-slot-box[data-cat="pet"]{background-image:url("image_webp/ui_equip_tab_20260921/slot_pet.webp")}
.equipment-showcase .equip-slot-box[data-cat="potion"]{background-image:url("image_webp/ui_equip_tab_20260921/slot_potion.webp")}
/* 장비 전부 장착 완료 시 캐릭터 뒤 공명 원형 이펙트 — 사용자 요청으로 제거함(2026-09-22).
   과거에는 equipment_complete_glow.png를 뒤에 깔았으나, 캐릭터 일러스트와 안 어울려 삭제. */
@keyframes equip-complete-glow-pulse{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.03)}
}
/* 배낭 카테고리 탭 바 + 정렬 버튼 — 가죽/황동 장식 배경 */
.inventory-cat-tabs{
  padding:8px 10px;
  background:url("image_webp/ui_equip_tab_20260921/backpack_category_bar.webp") center/100% 100% no-repeat;
}
.equip-sort-select{
  background-color:transparent;
  background-image:
    url("image_webp/ui_equip_tab_20260921/backpack_sort_button.webp"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d9a441'/%3E%3C/svg%3E");
  background-size:100% 100%, auto;
  background-repeat:no-repeat, no-repeat;
  background-position:center, right 10px center;
  border:none;
}
/* 배낭이 비었을 때(보유 장비 없음 안내) 문구 뒤 은은한 문장 장식 */
.item-grid:has(.lock-note){
  position:relative;
  min-height:160px;
  background:url("image_webp/ui_equip_tab_20260921/backpack_empty_emblem.webp") center/180px 180px no-repeat;
}
/* 배낭 칸 개별 슬롯 프레임 — 기존 단색 그라디언트 배경 대신 제작 이미지로 교체.
   등급 테두리(border-image, rarity-*)는 그대로 위에 남겨 등급 색 구분은 유지한다. */
.equip-inventory-col .item-card{
  background:url("image_webp/ui_equip_tab_20260921/backpack_item_slot.webp") center/100% 100% no-repeat;
}

/* =========================================================================
   2026-09-24 모바일 UI 정리 (세로 화면, max-width:600px) — 정보는 간결하게.
   기존 규칙들이 여러 겹이라 이 블록은 파일 맨 끝에 두고 필요한 것만 덮어쓴다.
   ========================================================================= */
@media (max-width: 600px) {
  /* 1) 장비 탭 — 슬롯 5개를 캐릭터 위에 겹치지 않고 그림 아래 한 줄로 뺀다. */
  .equipment-showcase {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .equipment-showcase .equipment-character-preview {
    position: relative;
    inset: auto;
    height: 300px;
    flex: 0 0 auto;
  }
  .equipment-showcase > .equip-slots {
    position: static;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: auto;
    padding: 10px 4px 12px;
  }
  .equipment-showcase .equip-slot-box {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
  }
  .equipment-showcase .equip-slot-box .slot-cat,
  .equipment-showcase .equip-slot-box .slot-item-name { display: none; }
  .equipment-showcase .equip-slot-box .slot-icon-big { font-size: 22px; }
  .equipment-showcase .equip-slot-box .slot-icon-big img { width: 34px; height: 34px; }
  .equipment-showcase .equip-slot-box.empty .slot-icon-big { opacity: .35; font-size: 18px; }
  .equipment-showcase .equip-slot-box .slot-item-lv { font-size: 10px; bottom: 2px; right: 4px; }
}
@media (max-width: 600px) {
  /* 2) 게임 탭 — 긴 안내문/PC 조작법은 숨기고 최고 스테이지 + 탐험 시작만 남긴다. */
  .only-desktop { display: none !important; }
  .game-tab-banner { aspect-ratio: 4 / 3; margin-bottom: 0; }
  .game-tab-banner:after { background: linear-gradient(180deg, transparent 30%, #0b1220 100%); }
  .game-tab-overlay { padding: 10px 14px 16px; gap: 10px; }
  .game-tab-overlay .game-tab-summary { font-size: 15px; }
  .game-tab-overlay .btn-explore { width: 100%; max-width: 280px; margin-top: 0; padding: 13px 16px; font-size: 15px; }
  .game-tab-overlay .game-tab-summary { color: #efe6cf; font-weight: 700; }

  /* 3) 탭 메뉴 — 3줄(2열)을 차지하던 걸 아이콘 + 짧은 글자 한 줄 5칸으로. 알약 이미지는 좁은 폭에서
     늘어나 보이므로 쓰지 않고, 활성 탭만 금색 밑줄로 표시한다. */
  .tab-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin-bottom: 6px; }
  .tab-nav .tab-btn {
    height: auto;
    min-height: 54px;
    padding: 4px 0 5px;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    letter-spacing: 0;
    background: rgba(8, 14, 26, .55);
    border-bottom: 2px solid transparent;
    filter: none;
  }
  .tab-nav .tab-btn.active { background: rgba(60, 46, 16, .55); border-bottom-color: #f0ce71; color: var(--gold-bright); filter: none; }
  .tab-nav .tab-btn .tab-icon { display: block; position: static; transform: none; width: 26px; height: 26px; }
  .tab-nav .tab-btn:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 600px) {
  /* 4) 인게임 — UI는 작게, 화면(맵) 비중은 크게. 상태창은 줄이고 중복 정보(기본공격 바)는 뺀다.
     조이스틱/공격 버튼은 한 줄로 낮추고 스킬 바는 그 바로 위 가운데에 작게 둔다. */
  body.touch-device #hud .hud-top-left { transform: scale(.66); transform-origin: top left; left: 8px; top: 8px; }
  body.touch-device #hud .hud-top-right { transform: scale(.78); transform-origin: top right; right: 6px; top: 6px; }
  body.touch-device #hud .corner-btn { width: 26px; height: 26px; top: 76px; }
  body.touch-device #hud #btn-pause { right: 8px; }
  body.touch-device #hud #btn-controls { right: 40px; }
  body.touch-device #hud .basic-attack-hud { display: none; }
  body.touch-device #hotbar { bottom: 104px; top: auto; transform: translateX(-50%) scale(.82); transform-origin: bottom center; }
  body.touch-device #touch-joystick { width: 88px; height: 88px; left: 10px; bottom: 12px; top: auto; }
  body.touch-device #touch-attack { width: 68px; height: 68px; right: 12px; bottom: 18px; top: auto; left: auto; font-size: 14px; }
}

/* 포션 슬롯 남은 개수 (2026-09-24) */
.slot-count {
  position: absolute;
  left: 3px;
  top: 1px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 2px #000;
  pointer-events: none;
  line-height: 1.2;
}
.slot-potion:not(.active) .slot-icon { opacity: .45; }