/* ============================================================
   홀덤펍 키우기 — 풀스크린 오버레이 UI
   레퍼런스 톤: 쿠키런류의 두툼한 입체 버튼 + 한국 방치형 게임의 HUD 배치
   (좌상단 재화 / 우상단 프로필 / 우측 사이드 레일 / 하단 네비 + 바텀시트)
   ============================================================ */

:root {
  --ink: #3a2a30;
  --ink-soft: #7a6258;
  --muted: #9b8b7f;
  --paper: #fffaf5;
  --paper-2: #fff2e6;

  --pink: #ff8fab;
  --pink-d: #ff5c8a;
  --pink-sh: #d13c68;
  --gold: #ffc85c;
  --gold-l: #ffe08a;
  --gold-sh: #cf9522;
  --cyan: #62d0f0;
  --cyan-sh: #2d93b5;
  --green: #7bc67e;
  --green-sh: #4f9a54;
  --danger: #ff6b6b;
  --danger-sh: #c74444;

  --radius: 18px;
  --nav-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --sheet-h: min(58dvh, 470px);

  --glass: rgba(255, 250, 245, 0.82);
  --glass-line: rgba(255, 255, 255, 0.75);
  --shadow-card: 0 4px 0 rgba(58, 42, 48, 0.12), 0 8px 18px rgba(120, 70, 60, 0.18);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 버튼·카드를 연타해도 더블탭 확대(iOS는 viewport의 user-scalable=no를 무시한다)가 일어나지 않게 한다.
   manipulation은 탭·스크롤은 그대로 두고 더블탭 줌만 끈다 — 연타가 씹히지 않는다. */
button,
input,
select,
textarea,
label,
.btn,
.item-card,
.codex-card,
.squad-slot,
.squad-preset,
.subtab,
.filter-chip,
.tab-btn,
.rail-btn,
.qty-btn,
.deploy-toggle,
.theme-card,
.boost-item,
.mission-item,
.quest-banner,
.wallet-cell,
.synergy-chip { touch-action: manipulation; }

/* 스크롤 없는 전체화면 게임 뷰 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #ffd9c2;
  color: var(--ink);
  font-family: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { position: fixed; inset: 0; touch-action: none; }
button, textarea, input { font-family: inherit; }

/* 3D 매장이 화면 전체를 채운다 */
.pub-3d-container {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.pub-3d-container canvas { display: block; width: 100%; height: 100%; }

/* ---------- HUD 레이어 ---------- */
/* 시트(35)보다 위에 둬서 재화·프로필·하단 네비가 항상 눌린다 */
.hud {
  position: fixed;
  inset: 0;
  z-index: 36;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }

/* ===== 좌측 상단: 프로필 ===== */
.hud-left {
  position: absolute;
  top: calc(10px + var(--safe-t));
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
}

/* ===== 재화 지갑: BB / 다이아 / 트로피를 한 장에 묶는다 =====
   폭을 고정하고 숫자는 넘치면 말줄임 — 숫자 자릿수가 바뀔 때마다 패널이 길어졌다 짧아졌다 하지 않게 */
.wallet {
  width: 184px;
  border-radius: 18px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--glass-line);
  box-shadow: 0 3px 0 rgba(58, 42, 48, 0.1), 0 6px 14px rgba(120, 70, 60, 0.16);
  overflow: hidden;
}
.wallet-main { display: flex; align-items: center; gap: 7px; padding: 6px 10px 5px 7px; }
.wallet-main-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.wallet-bb,
.wallet-rate,
.wallet-cell b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.wallet-bb { font-family: "Jua", sans-serif; font-size: 16px; color: var(--ink); letter-spacing: -0.3px; }
.wallet-rate { font-size: 10px; color: var(--green-sh); margin-top: 2px; }
.wallet-sub {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); /* 다이아 칸은 ＋ 버튼까지 들어가서 더 넓게 */
  border-top: 1.5px dashed rgba(58, 42, 48, 0.16);
}
.wallet-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 5px 6px 7px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wallet-cell + .wallet-cell { border-left: 1.5px dashed rgba(58, 42, 48, 0.16); }
.wallet-cell b { flex: 1 1 auto; min-width: 0; font-family: "Jua", sans-serif; font-size: 13.5px; }
.wallet-cell:first-child b { color: #1f7f9c; }
.wallet-cell:last-child b { color: #9a6200; }
.cur-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
/* 칩 코인 아이콘 */
.cur-icon-chip {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='%23ffc85c' stroke='%233a2a30' stroke-width='2.5'/%3E%3Ccircle cx='20' cy='20' r='11' fill='%23ffe08a' stroke='%233a2a30' stroke-width='2'/%3E%3Cg fill='%233a2a30'%3E%3Crect x='18.5' y='1.5' width='3' height='5' rx='1.5'/%3E%3Crect x='18.5' y='33.5' width='3' height='5' rx='1.5'/%3E%3Crect x='1.5' y='18.5' width='5' height='3' rx='1.5'/%3E%3Crect x='33.5' y='18.5' width='5' height='3' rx='1.5'/%3E%3C/g%3E%3Cpath d='M16 15h8M20 15v11M16 26h8' stroke='%23cf9522' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
/* 다이아 아이콘 */
.cur-icon-dia {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M12 5h16l8 10-16 20L4 15z' fill='%2362d0f0' stroke='%233a2a30' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M12 5l4 10-4 0z' fill='%23a8ecff'/%3E%3Cpath d='M4 15h32' stroke='%233a2a30' stroke-width='2'/%3E%3Cpath d='M16 15l4 20 4-20' stroke='%233a2a30' stroke-width='2' fill='none'/%3E%3Cpath d='M16 15l4-10 4 10' fill='%23a8ecff' stroke='%233a2a30' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 트로피 아이콘 */
.cur-icon-trophy {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M11 9H6v3a6 6 0 0 0 6 6M29 9h5v3a6 6 0 0 1-6 6' fill='none' stroke='%233a2a30' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M11 5h18v9a9 9 0 0 1-18 0z' fill='%23ffc85c' stroke='%233a2a30' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M15.5 8.5v5' stroke='%23ffe08a' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M20 23v6' stroke='%233a2a30' stroke-width='3.2'/%3E%3Crect x='12' y='29' width='16' height='6.5' rx='2' fill='%23cf9522' stroke='%233a2a30' stroke-width='2.5'/%3E%3C/svg%3E");
}
.cur-icon.sm { width: 19px; height: 19px; flex: 0 0 19px; }

/* 활성 부스트·대회 표시 */
/* 재화와 같은 우측 열에 있으므로 오른쪽으로 붙인다 */
.boost-strip { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 180px; }
.boost-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px; /* 남은 시간 글자가 바뀌어도 알약 폭이 흔들리지 않게 */
  gap: 4px;
  font-size: 11px;
  font-family: "Jua", sans-serif;
  padding: 3px 9px;
  border-radius: 999px;
  color: #6b2a00;
  background: linear-gradient(180deg, #ffe08a, #ffb43c);
  border: 2px solid rgba(58, 42, 48, 0.25);
  box-shadow: 0 2px 0 var(--gold-sh);
  animation: boostPulse 1.4s ease-in-out infinite;
}
.boost-pill i { font-style: normal; font-variant-numeric: tabular-nums; }
.tourney-pill {
  min-width: 66px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #4fbf7a, #1f7a4a);
  box-shadow: 0 2px 0 #145233;
  animation: none;
}
.tourney-pill.ready { color: #6b2a00; background: linear-gradient(180deg, #ffe08a, #ffb43c); box-shadow: 0 2px 0 var(--gold-sh); animation: boostPulse 1.1s ease-in-out infinite; }
@keyframes boostPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ===== 우측 상단: 재화 ===== */
.hud-right {
  position: absolute;
  top: calc(10px + var(--safe-t));
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  /* 사이드 레일까지 담은 긴 열이라, 열의 빈 영역이 시트의 X 버튼·3D 화면 터치를 가로채지 않게 한다 */
  pointer-events: none;
}
.hud-right > * { pointer-events: auto; }
.profile-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 2px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 3px 0 rgba(58, 42, 48, 0.1), 0 6px 14px rgba(120, 70, 60, 0.16);
  cursor: pointer;
}
.avatar-ring {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--gold) var(--xp, 0%), rgba(58,42,48,0.14) 0);
  flex: 0 0 36px;
}
.avatar {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff, #ffe9dc);
  font-size: 16px;
  border: 1.5px solid rgba(58,42,48,.2);
}
.avatar-lv {
  position: absolute;
  bottom: -4px;
  right: -5px;
  min-width: 18px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff9ec2, var(--pink-d));
  color: #fff;
  font-family: "Jua", sans-serif;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.profile-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.profile-name { font-family: "Jua", sans-serif; font-size: 13px; color: var(--ink); width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-bar {
  display: block;
  width: 62px;
  height: 6px;
  border-radius: 999px;
  background: rgba(58, 42, 48, 0.15);
  overflow: hidden;
}
.xp-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-l), var(--gold));
  transition: width 0.4s ease;
}

.hud-icon-row { display: flex; gap: 6px; }
.icon-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 42px;
  height: 38px;
  padding: 0 8px;
  border: 2px solid var(--glass-line);
  border-radius: 13px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 3px 0 rgba(58, 42, 48, 0.1);
  font-size: 15px;
  cursor: pointer;
  position: relative;
}
.icon-btn small { font-size: 9px; font-family: "Jua", sans-serif; color: var(--pink-d); font-variant-numeric: tabular-nums; }
#prestige-badge { min-width: 52px; }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(58,42,48,.1); }

/* ===== 우측 사이드 레일 ===== */
/* .hud-right 열 안에 들어 있어서 재화·부스트 표시 바로 아래로 자연스럽게 흘러간다(겹침 방지) */
.side-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.rail-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 2px solid rgba(58, 42, 48, 0.18);
  background: linear-gradient(180deg, #fffdfa, #ffe8d5);
  box-shadow: 0 4px 0 rgba(58, 42, 48, 0.16), 0 6px 12px rgba(120, 70, 60, 0.18);
  font-size: 21px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.rail-btn::after {
  content: attr(data-label);
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  font-family: "Jua", sans-serif;
  font-size: 8.5px;
  color: var(--ink-soft);
}
.rail-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(58, 42, 48, 0.16); }
/* 시트가 올라오면 레일은 옆으로 비켜준다 (시트를 가리지 않게) */
body.sheet-open .side-rail {
  transform: translateX(130%);
  opacity: 0;
  pointer-events: none;
}
.side-rail { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease; }

/* 알림 빨간 점 */
.dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ff3b52;
  border: 2px solid #fff;
  display: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.dot.show { display: block; animation: dotPop 1s ease-in-out infinite; }
@keyframes dotPop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* ===== 바닥 안내 ===== */
/* 층 전환 알약 — 2층(VIP 라운지)이 열렸을 때만 보인다 */
.floor-switch {
  position: absolute;
  left: 12px;
  bottom: calc(var(--nav-h) + var(--safe-b) + 68px);
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-card);
  z-index: 6;
}
.floor-switch[hidden] { display: none; }
.floor-btn {
  border: 0;
  border-radius: 999px;
  padding: 6px 13px;
  font-family: "Jua", system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
}
.floor-btn.active {
  background: linear-gradient(180deg, var(--pink), var(--pink-d));
  color: #fff;
  box-shadow: 0 2px 0 var(--pink-sh);
}
body.sheet-open .floor-switch { display: none; }

.floor-note {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-h) + var(--safe-b) + 116px);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(58, 42, 48, 0.72);
  color: #fff;
  font-size: 11.5px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* ===== 하단 스택: 성장 미션 배너 + 컨트롤 바 ===== */
.bottom-stack {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(var(--nav-h) + var(--safe-b) + 8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  /* 스택 자체는 좌우로 넓게 깔리므로, 빈 공간이 3D 탭을 가로채지 않게 한다 */
  pointer-events: none;
}
.bottom-stack > * { pointer-events: auto; }
body.sheet-open .bottom-stack { transform: translateY(calc(-1 * var(--sheet-h))); }
/* 바닥 안내 문구는 시트가 열리면 시트 내용을 가리므로 숨긴다 */
body.sheet-open .floor-note { display: none; }

/* ===== 성장 미션 배지 (튜토리얼 역할) — 우측에 붙지만 읽을 수 있는 크기 유지, 다른 UI를 침범하지 않게 ===== */
.quest-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 7px 7px;
  border-radius: 15px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--glass-line);
  box-shadow: 0 3px 0 rgba(58, 42, 48, 0.1), 0 6px 14px rgba(120, 70, 60, 0.18);
  /* 내용(진행도 숫자·설명)이 바뀔 때마다 배지 폭이 흔들리지 않게 폭을 고정 */
  width: min(300px, 80vw);
  align-self: flex-end;
  cursor: pointer;
}
.quest-banner.ready { border-color: var(--gold); box-shadow: 0 3px 0 var(--gold-sh), 0 0 0 3px rgba(255, 200, 92, 0.3); }
.quest-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: linear-gradient(180deg, #fff3e2, #ffdcc0);
  border: 2px solid rgba(58, 42, 48, 0.12);
}
.quest-body { flex: 1 1 auto; min-width: 0; }
.quest-head { display: flex; align-items: baseline; gap: 5px; }
/* 제목·설명은 말줄임(…) 대신 줄바꿈으로 전부 보이게 한다 — 반복퀘스트 내용이 잘려 안 보인다는 피드백 */
.quest-title {
  font-family: "Jua", sans-serif;
  font-size: 11px;
  line-height: 1.25;
  color: var(--ink);
  word-break: keep-all;
}
.quest-step { font-size: 9px; color: var(--muted); margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.quest-desc {
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--ink-soft);
  margin-top: 1px;
  word-break: keep-all;
}
.quest-prog {
  height: 5px;
  border-radius: 999px;
  background: rgba(58, 42, 48, 0.14);
  margin-top: 3px;
  overflow: hidden;
}
.quest-prog i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-l), var(--gold));
  transition: width 0.35s ease;
}
.quest-claim {
  flex: 0 0 76px;
  width: 76px;
  padding: 6px 4px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.quest-banner.ready .quest-claim { animation: boostPulse 1.1s ease-in-out infinite; }

.qty-group {
  display: flex;
  padding: 3px;
  gap: 3px;
  border-radius: 14px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--glass-line);
  box-shadow: 0 3px 0 rgba(58, 42, 48, 0.1);
}
.qty-btn {
  min-width: 42px;
  height: 28px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font-family: "Jua", sans-serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.qty-btn.active {
  background: linear-gradient(180deg, #ff9ec2, var(--pink-d));
  color: #fff;
  box-shadow: 0 2px 0 var(--pink-sh);
}

/* ===== 하단 네비게이션 ===== */
.bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex;
  background: linear-gradient(180deg, rgba(255,250,245,0.94), rgba(255,240,228,0.98));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 2px solid rgba(255,255,255,0.8);
  box-shadow: 0 -4px 16px rgba(120, 70, 60, 0.14);
  z-index: 40;
}
.bottom-nav .tab-btn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
}
.bottom-nav .nav-icon {
  font-size: 19px;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bottom-nav .nav-label { font-family: "Jua", sans-serif; font-size: 10.5px; }
.bottom-nav .tab-btn.active { color: var(--pink-d); }
.bottom-nav .tab-btn.active .nav-icon { transform: translateY(-3px) scale(1.18); }
.bottom-nav .tab-btn.active::before {
  content: "";
  position: absolute;
  top: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 143, 171, 0.18);
}
.bottom-nav .dot { top: 6px; right: 22%; }

/* ============================================================
   바텀시트 — 높이 고정 + 내부 스크롤
   ============================================================ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(58, 42, 48, 0.32);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
  z-index: 30;
}
.sheet-backdrop.open { opacity: 1; visibility: visible; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-h) + var(--safe-b));
  height: var(--sheet-h);
  z-index: 35;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border-radius: 24px 24px 0 0;
  border-top: 3px solid #fff;
  box-shadow: 0 -8px 28px rgba(120, 70, 60, 0.26);
  transform: translateY(102%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 720px;
  margin: 0 auto;
}
.sheet.open { transform: translateY(0); }
/* 닫혀 있는 동안에는 화면 아래에 숨어 있어도 탭을 가로채지 않게 한다 */
.sheet:not(.open) { pointer-events: none; }

.sheet-handle-row {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 52px 10px;
  border-bottom: 2px dashed rgba(58, 42, 48, 0.12);
}
.sheet-grip {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(58, 42, 48, 0.18);
}
.sheet-title { font-family: "Jua", sans-serif; font-size: 17px; color: var(--pink-d); }
.sheet-title[hidden] { display: none; }
/* 세부 탭 칩 — 네비 묶음 안의 탭을 고른다. 칩이 많으면 가로로 스크롤 */
.sheet-handle-row:has(.sheet-subtabs:not([hidden])) { justify-content: flex-start; padding-left: 10px; }
.sheet-subtabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  padding: 3px 2px;
}
.sheet-subtabs::-webkit-scrollbar { display: none; }
.sheet-subtabs[hidden] { display: none; }
.subtab {
  position: relative;
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(58, 42, 48, 0.12);
  background: #fff;
  font-family: "Jua", sans-serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
}
.subtab.active {
  background: linear-gradient(180deg, #ff9ec2, var(--pink-d));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 0 var(--pink-sh);
}
.subtab .dot { top: -3px; right: -2px; width: 11px; height: 11px; }
.tab-lead { margin: 0 2px 10px; line-height: 1.45; }
.tab-lead b { color: var(--ink); }
.sheet-qty-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 2px dashed rgba(58, 42, 48, 0.12);
}
.sheet-qty-row[hidden] { display: none; }
.sheet-qty-label { font-family: "Jua", sans-serif; font-size: 12px; color: var(--ink-soft); }
.sheet-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 11px;
  border: 2px solid rgba(58, 42, 48, 0.14);
  background: #fff;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
}

/* 여기가 핵심: 시트 높이는 고정하고 안쪽만 스크롤된다 */
.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: thin;
}
.sheet-body::-webkit-scrollbar { width: 6px; }
.sheet-body::-webkit-scrollbar-thumb { background: rgba(58,42,48,.2); border-radius: 999px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: panelIn 0.25s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sheet-sub {
  margin: 16px 0 8px;
  font-family: "Jua", sans-serif;
  font-size: 13.5px;
  color: var(--ink);
}
.sheet-sub:first-child { margin-top: 2px; }
.muted { color: var(--muted); font-weight: normal; font-size: 0.86em; }

/* ---------- 아이템 카드 ---------- */
.card-row { display: flex; flex-direction: column; gap: 9px; }
.item-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  background: #fff;
  border: 2px solid rgba(58, 42, 48, 0.08);
  box-shadow: var(--shadow-card);
}
.item-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 23px;
  background: linear-gradient(180deg, #fff3e2, #ffe0c4);
  border: 2px solid rgba(58, 42, 48, 0.1);
}
.item-info { flex: 1 1 auto; min-width: 0; }
/* 카드·네비 아이콘 자리에 들어가는 SVG 아이콘과 PNG (js/assets.js, assets/img) */
.item-icon svg, .item-icon .ga-img { width: 30px; height: 30px; display: block; }
.tourney-card .item-icon .ga-img, .trophy-card .item-icon svg { width: 36px; height: 36px; }
.nav-icon svg { width: 22px; height: 22px; display: block; }
.rail-btn svg { width: 24px; height: 24px; }
.icon-btn svg { width: 19px; height: 19px; }
.synergy-chip svg, .trait-chip svg, .codex-traits svg { vertical-align: -2px; }
.item-title { font-family: "Jua", sans-serif; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.item-desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.lvl-chip {
  font-size: 10.5px;
  font-family: "Jua", sans-serif;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  color: #6b3f00;
  border: 1.5px solid rgba(58,42,48,.18);
}

/* ---------- 두툼한 입체 버튼 ---------- */
.btn {
  border: 2px solid rgba(58, 42, 48, 0.22);
  border-radius: 14px;
  padding: 8px 12px;
  font-family: "Jua", sans-serif;
  font-size: 13px;
  line-height: 1.15;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(180deg, #ffffff, #f0e6dc);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(58, 42, 48, 0.2), 0 6px 12px rgba(120, 70, 60, 0.16);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.15s;
}
.btn small { font-size: 10.5px; opacity: 0.9; font-weight: normal; }
/* 버튼 안 글자(가격 등)가 갱신돼도 탭 대상은 항상 버튼 자체가 되게 — 누르는 도중 글자 노드가 바뀌면 클릭이 씹힌다 */
.btn > * { pointer-events: none; }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,0); }
.btn:disabled { filter: grayscale(0.75) opacity(0.55); cursor: not-allowed; box-shadow: 0 3px 0 rgba(58,42,48,.16); }
.btn-wide { width: 100%; }

/* 카드 버튼은 폭 고정 — 가격 자릿수가 바뀔 때마다 카드 설명이 다시 줄바꿈되며 흔들리지 않게 */
.item-card > .btn { flex: 0 0 102px; width: 102px; padding-left: 4px; padding-right: 4px; }
.item-card > .btn small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.btn-buy {
  flex: 0 0 auto;
  min-width: 78px;
  background: linear-gradient(180deg, var(--gold-l), var(--gold));
  color: #6b3f00;
  box-shadow: 0 4px 0 var(--gold-sh), 0 6px 12px rgba(200, 140, 40, 0.3);
}
.btn-primary {
  background: linear-gradient(180deg, #ff9ec2, var(--pink-d));
  color: #fff;
  box-shadow: 0 4px 0 var(--pink-sh), 0 6px 12px rgba(209, 60, 104, 0.3);
}
.btn-danger {
  background: linear-gradient(180deg, #ff9a9a, var(--danger));
  color: #fff;
  box-shadow: 0 4px 0 var(--danger-sh);
}
.btn-owned {
  background: linear-gradient(180deg, #d8f0da, #b4e0bb);
  color: #2e6b39;
  box-shadow: 0 4px 0 var(--green-sh);
}

/* ---------- 가챠 박스 ---------- */
.gacha-box {
  border-radius: 20px;
  padding: 14px;
  background: linear-gradient(160deg, #3a2a52, #6b3a6b 55%, #b04a7a);
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow-card);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.gacha-box::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 120%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25), transparent 55%);
  pointer-events: none;
}
.gacha-box-head { display: flex; align-items: center; gap: 10px; position: relative; }
.gacha-level-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.gacha-level-label { font-family: "Jua", sans-serif; font-size: 11.5px; color: #ffe08a; flex: 0 0 auto; }
.gacha-level-bar {
  flex: 1 1 auto;
  height: 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.gacha-level-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe08a, #ff9d3c);
  transition: width 0.35s ease;
}
.gacha-level-next { font-family: "Jua", sans-serif; font-size: 11px; color: #fff; flex: 0 0 auto; min-width: 46px; text-align: right; }
.gacha-level-rates { position: relative; font-size: 10px; color: rgba(255, 255, 255, 0.8); margin-top: 4px; }
.gacha-box #gacha-ticket-btn { position: relative; margin-top: 10px; }
.gacha-box .item-icon { background: linear-gradient(180deg, #ffe08a, #ff9d3c); border-color: rgba(255,255,255,.5); }
.gacha-box .item-title { color: #fff; }
.gacha-box .item-desc { color: rgba(255, 255, 255, 0.86); }
.rarity-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 11px 0; position: relative; }
.rarity-chip {
  font-size: 10.5px;
  font-family: "Jua", sans-serif;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  border: 1.5px solid var(--rc, #fff);
  color: var(--rc, #fff);
}
.gacha-btn-row { display: flex; gap: 8px; position: relative; }
.gacha-pull-btn { flex: 1 1 0; min-width: 0; }
.gacha-multi {
  background: linear-gradient(180deg, #d0a4ff, #9b5cff);
  color: #fff;
  box-shadow: 0 4px 0 #6a34c0, 0 6px 12px rgba(106, 52, 192, 0.35);
}
.gacha-btn-row-3 { margin-top: 2px; }
.gacha-btn-row-3 .gacha-pull-btn { padding: 8px 4px; font-size: 12.5px; }
.gacha-btn-row-3 .gacha-pull-btn small { font-size: 9.5px; white-space: nowrap; }
/* 뽑기권으로 무료로 뽑을 수 있게 바뀐 버튼 */
.gacha-free {
  background: linear-gradient(180deg, #b8f5c4, #45c46a);
  color: #134a22;
  box-shadow: 0 4px 0 #2e8a48, 0 6px 12px rgba(46, 138, 72, 0.35);
  animation: boostPulse 1.4s ease-in-out infinite;
}
/* 연속 뽑기 설정 */
.auto-pull {
  position: relative;
  margin-top: 10px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.auto-pull-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.auto-pull-label { font-family: "Jua", sans-serif; font-size: 12.5px; color: #ffe08a; flex: 0 0 auto; }
.auto-pull select {
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-family: "Jua", sans-serif;
  font-size: 12px;
}
.auto-pull-ticket { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: rgba(255, 255, 255, 0.92); flex: 1 1 auto; }
.auto-pull-ticket input { width: 17px; height: 17px; accent-color: #45c46a; margin: 0; }
.auto-pull .btn { flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; }
.gacha-ticket-count {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: "Jua", sans-serif;
  font-size: 13px;
  white-space: nowrap;
}

/* ---------- 운영진 도감 · 편성 ---------- */
/* 편성 스테이지: 지금 팀에 들어간 운영진 10칸 + 프리셋 5개 */
.squad-stage {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 11px 11px 10px;
  margin-bottom: 12px;
  color: #fff;
  background: radial-gradient(120% 100% at 50% 0%, #4a2f6b, #2a1b40 65%, #1b1230);
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--shadow-card);
}
.squad-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34px;
  width: 150%;
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(60% 70% at 50% 0%, rgba(255, 224, 138, 0.25), transparent 70%);
  pointer-events: none;
}
.squad-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.squad-power { font-family: "Jua", sans-serif; font-size: 13px; }
.squad-power b { font-size: 16px; color: #ffe08a; font-variant-numeric: tabular-nums; }
.squad-synergy { font-size: 11px; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.squad-slots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 9px;
}
.squad-slot {
  position: relative;
  padding: 0;
  border: 2px solid var(--rc, rgba(255, 255, 255, 0.35));
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 10px rgba(255, 224, 138, 0.25) inset;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1.06;
}
.squad-slot img { width: 100%; display: block; }
.squad-slot-star {
  position: absolute;
  top: 2px;
  right: 3px;
  font-family: "Jua", sans-serif;
  font-size: 9px;
  color: #ffd45c;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.squad-slot-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px 2px 2px;
  font-size: 8.5px;
  font-family: "Jua", sans-serif;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72) 45%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.squad-slot.empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  font-family: "Jua", sans-serif;
}
/* 특성 시너지 칩 */
.squad-synergies {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 9px;
}
.synergy-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  font-family: "Jua", sans-serif;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.synergy-chip b { color: #fff; font-size: 11px; }
.synergy-chip small { font-family: inherit; font-size: 10px; }
.synergy-chip.on {
  border-color: var(--tc, #fff);
  background: color-mix(in srgb, var(--tc, #fff) 26%, rgba(0, 0, 0, 0.45));
  color: #fff;
  box-shadow: 0 0 10px color-mix(in srgb, var(--tc, #fff) 45%, transparent);
}
.synergy-chip .synergy-tier {
  font-style: normal;
  font-size: 9px;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 999px;
  background: var(--tc, #fff);
  color: #2a1b40;
}
.squad-bottom { position: relative; display: flex; align-items: center; gap: 8px; }
.squad-presets { display: flex; gap: 5px; flex: 1 1 auto; min-width: 0; }
.squad-preset {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.75);
  font-family: "Jua", sans-serif;
  font-size: 13px;
  cursor: pointer;
}
.squad-preset small { display: block; font-size: 8px; opacity: 0.8; line-height: 1.1; }
.squad-preset.active {
  background: linear-gradient(180deg, #ffe08a, #ffb43c);
  border-color: #fff;
  color: #6b3f00;
  box-shadow: 0 2px 0 var(--gold-sh);
}
.squad-auto { flex: 0 0 auto; padding: 7px 11px; font-size: 12.5px; white-space: nowrap; }

/* 목록 아래 고정 바 */
.codex-bottom-bar {
  position: sticky;
  /* 시트 본문 아래 여백까지 덮도록 그만큼 내려 붙인다 (바 밑으로 카드가 비치지 않게) */
  bottom: calc(-18px - env(safe-area-inset-bottom, 0px));
  z-index: 2;
  margin: 12px -14px calc(-18px - env(safe-area-inset-bottom, 0px));
  padding: 10px 14px calc(22px + env(safe-area-inset-bottom, 0px));
  /* 카드가 바 아래로 지나가되 비쳐 보이지 않게 아래쪽은 불투명하게 */
  background: linear-gradient(180deg, rgba(255, 242, 230, 0), var(--paper-2) 32%, var(--paper-2));
}
.codex-head { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.codex-progress { font-family: "Jua", sans-serif; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.codex-bar { flex: 1 1 auto; width: auto; height: 9px; }
.codex-bar i { background: linear-gradient(90deg, #ffd166, #ff8fab); }
.codex-filter { display: flex; gap: 5px; flex-wrap: wrap; }
.filter-chip {
  border: 2px solid rgba(58, 42, 48, 0.14);
  background: #fff;
  border-radius: 999px;
  padding: 4px 11px;
  font-family: "Jua", sans-serif;
  font-size: 11.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.filter-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.codex-grid {
  display: grid;
  /* 쿠키런처럼 한 줄에 4장(좁은 폰) ~ 5장 */
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 9px;
}
.codex-card {
  position: relative;
  border-radius: 16px;
  padding: 7px 5px 6px;
  /* 등급색이 은은하게 도는 카드 (쿠키런 카드 느낌) */
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--rc, #fff) 16%, #fff));
  border: 2px solid color-mix(in srgb, var(--rc, #ccc) 55%, #fff);
  box-shadow: 0 3px 0 rgba(58, 42, 48, 0.12);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.codex-card:active { transform: translateY(2px); box-shadow: none; }
/* 편성 중인 카드는 금색 테두리 + 아래 띠가 초록 */
.codex-card.deployed {
  border-color: var(--gold);
  box-shadow: 0 3px 0 var(--gold-sh), 0 0 0 2px rgba(255, 200, 92, 0.35);
}
.codex-star-chip {
  position: absolute;
  top: 5px;
  right: 5px;
  font-family: "Jua", sans-serif;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  color: #6b3f00;
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(58, 42, 48, 0.35);
}
.codex-card.deployed .badge-new,
.codex-card .badge-new { right: auto; left: 5px; top: 26px; }
/* 미획득 카드는 초상화만 실루엣 처리하고, 등급 배지는 색을 살려 목표를 보여준다 */
.codex-card.locked { background: #f6f2ee; }
.codex-card.locked .codex-name { color: var(--muted); }
.codex-card img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  display: block;
  object-fit: cover;
  background: #f0ece8;
}
/* 실루엣을 밝게 깔아야 위에 얹힌 등급 배지(특히 회색 N)가 묻히지 않는다 */
.codex-card.locked img { filter: grayscale(1) brightness(1.22) contrast(0.22); }
.codex-lock {
  position: absolute;
  top: 38%;
  left: 0;
  right: 0;
  font-size: 22px;
  pointer-events: none;
}
.codex-name {
  font-family: "Jua", sans-serif;
  font-size: 10.5px;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.codex-stars { height: 14px; line-height: 14px; }
/* ★ 5칸: 빈 별 → 은별(★1~5) → 금별(★6~10) */
.stars { display: inline-flex; gap: 0; font-style: normal; letter-spacing: -1px; }
.stars i { font-style: normal; font-size: 11px; line-height: 1; }
.star-empty { color: rgba(58, 42, 48, 0.28); }
.star-silver { color: #c9d2db; text-shadow: 0 0 1px #4f5a66, 0 0 1px #4f5a66, 0 0 3px rgba(120, 140, 160, 0.6); }
.star-gold { color: #ffc21a; text-shadow: 0 0 1px #b07800, 0 0 4px rgba(255, 194, 26, 0.7); }
.dealer-stat .stars i { font-size: 15px; }
.shard-bar.ready i { background: linear-gradient(90deg, #ffe08a, #ffb400); }

.codex-bottom-bar .btn b { font-size: 11px; background: rgba(255,255,255,.7); color: #6b3f00; border-radius: 999px; padding: 0 6px; margin-left: 2px; }

/* 카드 속 특성 이모지 */
.codex-traits {
  position: absolute;
  top: 5px;
  left: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.codex-card .codex-rank { top: auto; bottom: 5px; left: 5px; }
.codex-card.locked .codex-traits { opacity: 0.45; }

/* 운영진 상세: 특성 */
.dealer-traits { display: flex; gap: 6px; margin: 2px 0 10px; }
.trait-chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 12px;
  border: 2px solid rgba(58, 42, 48, 0.1);
  background: var(--paper-2);
  font-family: "Jua", sans-serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: left;
}
.trait-chip b { color: var(--ink); }
.trait-chip small { font-family: "Gowun Dodum", sans-serif; font-size: 9.5px; color: var(--muted); white-space: normal; line-height: 1.35; }
.trait-chip.on {
  border-color: var(--tc, var(--gold));
  background: color-mix(in srgb, var(--tc, #fff) 14%, #fff);
  color: var(--ink);
}

/* 운영진 상세: 보유효과 / 장착효과 */
.dealer-effects { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; text-align: left; }
.dealer-effect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--paper-2);
  border: 2px solid rgba(58, 42, 48, 0.08);
  font-family: "Jua", sans-serif;
  font-size: 13px;
}
.dealer-effect small { width: 100%; font-family: inherit; font-size: 10px; color: var(--muted); font-weight: normal; }
.dealer-effect-tag {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid rgba(58, 42, 48, 0.15);
  color: var(--ink-soft);
}
.dealer-effect.equip.active { border-color: #7bc67e; background: #eaf7ea; }
.codex-rank {
  position: absolute;
  top: 5px;
  left: 5px;
  font-family: "Jua", sans-serif;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--rc, #9b9b9b);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(58, 42, 48, 0.35);
}
.codex-card .badge-new {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 8.5px;
  font-family: "Jua", sans-serif;
  background: #ff3b52;
  color: #fff;
  border-radius: 999px;
  padding: 1px 5px;
  border: 1.5px solid #fff;
}
.shard-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(58, 42, 48, 0.14);
  margin-top: 4px;
  overflow: hidden;
}
.shard-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a8d8ff, #4fa3ff); }
.deploy-toggle {
  width: 100%;
  margin-top: 5px;
  border: 1.5px solid rgba(58, 42, 48, 0.16);
  background: #fff;
  border-radius: 999px;
  padding: 3px 0;
  font-family: "Jua", sans-serif;
  font-size: 9.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.deploy-toggle.on {
  background: linear-gradient(180deg, #b4e0bb, var(--green));
  border-color: transparent;
  color: #1e4a26;
}
.deploy-summary {
  position: relative;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  margin: 10px 0 8px;
}

/* 딜러 상세 모달 */
.dealer-modal-box { max-width: 330px; }
.dealer-modal-actions { display: flex; gap: 8px; margin-top: 10px; }
.dealer-modal-actions .btn { flex: 1 1 0; min-width: 0; }
.dealer-modal-actions .btn small { white-space: nowrap; }
.dealer-detail { text-align: center; }
.dealer-detail img {
  width: 128px;
  height: 128px;
  border-radius: 22px;
  display: block;
  margin: 4px auto 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.dealer-detail h3 { font-family: "Jua", sans-serif; margin: 0 0 4px; font-size: 18px; }
.dealer-detail .dealer-quote { font-size: 12px; color: var(--ink-soft); margin: 0 0 10px; }
.profile-nickname-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
.profile-nickname-row b {
  font-family: "Jua", sans-serif;
  font-size: 15px;
  color: var(--pink-d);
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-nickname-row .btn { padding: 4px 9px; font-size: 10.5px; }
.dealer-stat-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dealer-stat {
  background: var(--paper-2);
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 11.5px;
  border: 2px solid rgba(58,42,48,.08);
}
.dealer-stat b { display: block; font-family: "Jua", sans-serif; font-size: 14px; }

/* ---------- 테마 / 장식 ---------- */
.theme-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 9px;
}
.theme-card {
  border-radius: var(--radius);
  padding: 9px;
  background: #fff;
  border: 2px solid rgba(58, 42, 48, 0.08);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.theme-card.equipped { border-color: var(--green); box-shadow: 0 4px 0 var(--green-sh); }
/* 테마 썸네일(assets/img/theme) — 없으면 배경색만 보인다 */
.theme-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-swatch {
  overflow: hidden;
  height: 46px;
  border-radius: 12px;
  border: 2px solid rgba(58, 42, 48, 0.12);
}
.theme-name { font-family: "Jua", sans-serif; font-size: 13px; }
.theme-cost { font-size: 11px; color: var(--ink-soft); }
.theme-card .btn { width: 100%; }

/* ---------- 🏆 대회 ---------- */
.tourney-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 12px;
  color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #2f9a5e, #17603a 60%, #0f4128);
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow-card);
}
.tourney-hero-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tourney-stat { display: inline-flex; align-items: center; gap: 5px; font-family: "Jua", sans-serif; font-size: 13px; }
.tourney-stat b { font-size: 16px; color: #ffe08a; font-variant-numeric: tabular-nums; }
.tourney-power-detail { font-size: 10.5px; color: rgba(255, 255, 255, 0.8); margin: 3px 0 10px; }
.tourney-idle {
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 12px;
  text-align: center;
}
.tourney-live {
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.26);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
.tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-family: "Jua", sans-serif; font-size: 13.5px; }
.tl-time { font-size: 13px; color: #ffe08a; font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; }
.tl-bar { height: 9px; margin: 8px 0 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.tl-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffe08a, #ffb43c); transition: width 0.5s linear; }
.tl-info { font-size: 11.5px; color: rgba(255, 255, 255, 0.9); font-variant-numeric: tabular-nums; }
.tl-info b { color: #fff; font-family: "Jua", sans-serif; font-size: 13px; }
.tourney-live.done { text-align: center; }
.tl-place { font-family: "Jua", sans-serif; font-size: 22px; margin: 8px 0 2px; color: #fff; }
.tl-place small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.8); margin-top: 2px; }
.place-win .tl-place,
.place-podium .tl-place { color: #ffe08a; text-shadow: 0 0 10px rgba(255, 224, 138, 0.6); }
.tl-reward { font-family: "Jua", sans-serif; font-size: 14px; margin: 6px 0 10px; }
.tl-reward small { display: block; font-family: inherit; font-size: 10.5px; color: #ffd0a0; margin-top: 2px; }
.tourney-card .item-icon { background: linear-gradient(180deg, #d9f5e3, #9fdcb5); }
.tourney-card.locked { opacity: 0.72; }
.tourney-card.locked .item-icon { filter: grayscale(1); }
.matchup {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #fff;
  background: #9b8b7f;
}
.matchup.good { background: #3faa62; }
.matchup.even { background: #e0a020; }
.matchup.hard { background: #e0605a; }
.matchup.over { background: #7a7aa0; }
.trophy-card .item-icon { background: linear-gradient(180deg, #fff2c2, #ffd36a); }
.lvl-chip[hidden] { display: none; }
.offline-cap { display: inline-block; margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: #b0602a; }

/* ---------- 프레스티지 ---------- */
.prestige-box {
  border-radius: 22px;
  padding: 18px 16px;
  text-align: center;
  background: linear-gradient(160deg, #fff4d6, #ffd9ea);
  border: 3px solid #fff;
  box-shadow: var(--shadow-card);
}
.prestige-emoji { font-size: 40px; }
/* 프레스티지 단계별 매장 외관 (assets/img/prestige) */
.prestige-building { width: min(190px, 60%); display: block; margin: -4px auto 0; filter: drop-shadow(0 6px 10px rgba(58, 42, 48, 0.25)); }
.prestige-stage { font-family: "Jua", sans-serif; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 4px; }
.prestige-box h3 { font-family: "Jua", sans-serif; margin: 6px 0 10px; font-size: 18px; color: #8a4a00; }
.prestige-box p { font-size: 12.5px; margin: 6px 0; line-height: 1.55; }
.prestige-gain-row {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.prestige-gain-row > div {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 11px;
  min-width: 86px;
}
.prestige-gain-row b { display: block; font-family: "Jua", sans-serif; font-size: 14px; color: var(--pink-d); margin-top: 2px; }

/* ---------- 설정 ---------- */
.settings-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 13px;
  margin-bottom: 11px;
  border: 2px solid rgba(58, 42, 48, 0.08);
  box-shadow: var(--shadow-card);
}
.settings-box h4 { font-family: "Jua", sans-serif; margin: 0 0 9px; font-size: 14px; }
.settings-box p { font-size: 11.5px; margin: 0 0 9px; line-height: 1.5; }
.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 12.5px;
  border-top: 1px dashed rgba(58, 42, 48, 0.12);
}
.toggle-row:first-of-type { border-top: 0; }
.toggle-row input { width: 44px; height: 26px; accent-color: var(--pink-d); }
.toggle-row .range-input { width: 140px; height: 26px; accent-color: var(--pink-d); }
.settings-row { display: flex; gap: 7px; flex-wrap: wrap; }
#save-code {
  width: 100%;
  min-height: 74px;
  margin-top: 9px;
  border-radius: 12px;
  border: 2px solid rgba(58, 42, 48, 0.12);
  padding: 9px;
  font-size: 11px;
  resize: vertical;
}

/* ============================================================
   모달
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(58, 42, 48, 0.5);
  backdrop-filter: blur(3px);
  animation: fadeIn 0.2s ease;
}
.modal.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  position: relative;
  width: 100%;
  max-width: 320px;
  max-height: 84dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border-radius: 24px;
  border: 3px solid #fff;
  padding: 20px 18px 18px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(58, 42, 48, 0.4);
  animation: popIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wide-modal { max-width: 380px; }
@keyframes popIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-emoji { font-size: 42px; line-height: 1; }
.modal-box h2 { font-family: "Jua", sans-serif; font-size: 19px; margin: 8px 0; color: var(--pink-d); }
.modal-box h3 { font-family: "Jua", sans-serif; font-size: 16px; margin: 4px 0 8px; }
.modal-box p { font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
.context-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 2px solid rgba(58, 42, 48, 0.14);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
}
.context-popup-box { padding-top: 26px; }

/* 가챠 결과 */
/* 카드만 박스 안에서 스크롤되고 확인 버튼은 항상 보이게 */
.gacha-result-box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 360px;
  background: linear-gradient(170deg, #2b2140, #5a2f5e);
  border-color: rgba(255,255,255,.4);
}
.gacha-head { flex: none; color: #ffe08a !important; }
.gacha-modal-actions { flex: none; display: flex; gap: 8px; }
.gacha-modal-actions .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
/* 연속 뽑기 누적 요약 */
.gacha-auto-summary {
  flex: none;
  margin: -2px 0 10px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.45;
}
.gacha-auto-summary[hidden] { display: none; }
.gacha-auto-summary .rarity-chip-row { margin: 6px 0; justify-content: center; }
.gacha-auto-summary .gas-reason { color: #ffe08a; font-family: "Jua", sans-serif; min-height: 1.45em; }
.gacha-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  padding: 2px;
  margin-bottom: 14px;
}
.gacha-results.many { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
/* 연속 뽑기 중엔 다음 묶음이 금방 오니까 카드가 짧게 한꺼번에 뜬다 */
.gacha-results.auto .gacha-result-item { animation-duration: 0.16s; }
.gacha-results.many .gacha-result-item { padding: 3px; border-radius: 10px; }
.gacha-results.many .gacha-result-item img { border-radius: 7px; }
.gacha-results.many .gr-name { font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gacha-results.many .gr-tag { font-size: 8px; }
.gacha-result-item {
  border-radius: 14px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--rc, #fff);
  animation: popIn 0.35s backwards cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gacha-result-item img { width: 100%; border-radius: 10px; display: block; }
.gacha-result-item .gr-name { font-family: "Jua", sans-serif; font-size: 9.5px; color: #fff; margin-top: 4px; }
.gacha-result-item .gr-tag { font-size: 9px; color: var(--rc, #fff); }

/* 출석 */
.attend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 12px 0 14px;
}
.attend-cell {
  border-radius: 14px;
  padding: 8px 4px;
  background: #fff;
  border: 2px solid rgba(58, 42, 48, 0.1);
  font-size: 10px;
}
.attend-cell .ad-day { font-family: "Jua", sans-serif; font-size: 11px; color: var(--ink-soft); }
.attend-cell .ad-emoji { font-size: 20px; display: block; margin: 3px 0; }
.attend-cell.claimed { background: #e8f5e9; border-color: var(--green); opacity: 0.75; }
.attend-cell.today { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 200, 92, 0.35); animation: boostPulse 1.6s ease-in-out infinite; }
.attend-cell.big { grid-column: span 4; background: linear-gradient(135deg, #fff2cc, #ffd9ea); }

/* 미션 */
.mission-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; text-align: left; }
.mission-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 15px;
  background: #fff;
  border: 2px solid rgba(58, 42, 48, 0.08);
  box-shadow: 0 3px 0 rgba(58, 42, 48, 0.1);
}
.mission-item.done { background: #f1faf2; border-color: #b4e0bb; }
.mission-body { flex: 1 1 auto; min-width: 0; }
.mission-name { font-family: "Jua", sans-serif; font-size: 12.5px; }
.mission-reward { font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }
.mission-prog { height: 7px; border-radius: 999px; background: rgba(58,42,48,.13); margin-top: 5px; overflow: hidden; }
.mission-prog i { display: block; height: 100%; background: linear-gradient(90deg, #a8e0b4, var(--green)); }
.mission-item .btn { min-width: 62px; padding: 6px 9px; font-size: 11.5px; }
.mission-allclear {
  font-size: 11.5px;
  color: var(--ink-soft);
  background: var(--paper-2);
  border-radius: 14px;
  padding: 9px;
}

/* 부스트 */
.boost-list { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; text-align: left; }
.boost-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  border: 2px solid rgba(58, 42, 48, 0.08);
  box-shadow: 0 3px 0 rgba(58, 42, 48, 0.1);
}
.boost-item .item-icon { width: 40px; height: 40px; flex: 0 0 40px; font-size: 20px; }
.boost-item .item-info { flex: 1 1 auto; min-width: 0; }
.boost-item .btn { flex: 0 0 auto; min-width: 74px; white-space: nowrap; }
.boost-item.active { border-color: var(--gold); box-shadow: 0 3px 0 var(--gold-sh); }

/* ---------- 토스트 알림 ---------- */
/* 기본은 하단 미션 배지·컨트롤 바 위. 시트가 열리면 시트 위로, 모달이 열리면 화면 맨 위로 옮겨서
   토스트가 버튼/카드 내용을 가리지 않게 한다. */
#toast-wrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-h) + var(--safe-b) + 156px);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  width: max-content;
  max-width: 88vw;
}
body.sheet-open #toast-wrap { bottom: calc(var(--nav-h) + var(--safe-b) + var(--sheet-h) + 116px); }
body:has(.modal:not(.hidden)) #toast-wrap { bottom: auto; top: calc(var(--safe-t) + 14px); }
.toast {
  background: rgba(58, 42, 48, 0.92);
  color: #fff;
  padding: 8px 15px;
  border-radius: 16px;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  animation: toastIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 88vw;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 작은 화면 대응 ---------- */
@media (max-width: 380px) {
  :root { --nav-h: 56px; }
  .wallet { width: 174px; }
  .wallet-bb { font-size: 15px; }
  .wallet-cell b { font-size: 12.5px; }
  .subtab { padding: 5px 8px; font-size: 11.5px; }
  .item-card > .btn { flex-basis: 94px; width: 94px; }
  .rail-btn { width: 44px; height: 44px; font-size: 19px; }
  .bottom-nav .nav-label { font-size: 9.5px; }
  .bottom-nav .nav-icon { font-size: 17px; }
  .qty-btn { min-width: 36px; font-size: 11.5px; }
  .codex-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* 가로 모드에서는 시트를 조금 더 낮게 */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --sheet-h: 74dvh; }
  .side-rail { flex-direction: row; }
  .floor-note { display: none; }
}

/* ---------- 로그인/회원가입 게이트 ---------- */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(120% 120% at 50% 0%, #4a2b3f, #1f1420);
}
.auth-gate.hidden { display: none; }
.auth-card {
  width: 100%;
  max-width: 320px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border-radius: 24px;
  border: 3px solid #fff;
  padding: 26px 22px 22px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.auth-emoji { font-size: 40px; line-height: 1; }
/* 로그인 화면 키비주얼 (assets/img/brand/loading-pub-*.png) */
.auth-art { width: min(260px, 72vw); display: block; margin: -6px auto 2px; filter: drop-shadow(0 8px 14px rgba(58, 42, 48, 0.28)); }
.auth-card h1 { font-family: "Jua", sans-serif; font-size: 20px; margin: 8px 0 4px; color: var(--pink-d); }
.auth-sub { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; }
.auth-mode-row { display: flex; gap: 7px; margin-bottom: 14px; }
.auth-mode-row .chip {
  flex: 1;
  border: 2px solid rgba(58, 42, 48, 0.14);
  background: #fff;
  border-radius: 999px;
  padding: 7px 0;
  font-family: "Jua", sans-serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.auth-mode-row .chip.active {
  background: linear-gradient(180deg, #ff9ec2, var(--pink-d));
  border-color: transparent;
  color: #fff;
}
.auth-form { display: flex; flex-direction: column; gap: 9px; }
.auth-form input {
  border: 2px solid rgba(58, 42, 48, 0.16);
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
.auth-form input:focus { outline: none; border-color: var(--pink); }
.auth-error { color: var(--danger); font-size: 12px; margin: 0; text-align: left; }
.auth-form .btn { margin-top: 4px; }

/* ---------- 재화 옆 상점 바로가기 ---------- */
.add-currency-btn {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, var(--gold-l), var(--gold));
  color: #6b3f00;
  font-family: "Jua", sans-serif;
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 0 var(--gold-sh);
  cursor: pointer;
}
.add-currency-btn:active { transform: translateY(2px); box-shadow: none; }

/* ---------- 상점 ---------- */
.shop-card .item-icon { background: linear-gradient(180deg, #d6f0ff, #a6dcff); }
.shop-tag {
  font-size: 9.5px;
  font-family: "Jua", sans-serif;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff9ec2, var(--pink-d));
  color: #fff;
}
.shop-card-owned { opacity: 0.85; }
.shop-disclaimer { text-align: center; margin: 12px 2px 0; line-height: 1.5; }