/* 심야 포장마차 — 모바일 세로 화면 기준. 데스크톱에서는 폰 프레임처럼 가운데 고정. */

/* Jua (OFL) — 로컬 번들. 앱은 오프라인에서도 폰트가 살아야 한다.
   WOFF2 만 쓴다(2.07MB TTF → 0.39MB, 글리프 손실 없음 — 컨테이너·압축만 바뀐다).
   minSdk 24(안드로이드 7)·모든 현대 브라우저가 WOFF2 를 지원하므로 TTF 폴백은 불필요하다. */
@font-face {
  font-family: "Jua";
  src: url("font/Jua-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
/* 화면을 끌면 늘어나던 것(안드로이드 12+ 오버스크롤 스트레치) — 게임 화면엔 필요 없다. 손가락 여러 개로 누르다 미끄러지면 켜졌다(사용자) */
html, body { overscroll-behavior: none; }
body {
  background: #0a0d18;
  color: #f2ead8;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#app {
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #141a2e;
  box-shadow: 0 0 60px rgba(0,0,0,.8);
  position: relative;
}

/* ===== 상단 바 ===== */
#topbar {
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  background: #10152a;
  border-bottom: 1px solid #232c4d;
  z-index: 30;
  /* 금액이 길어져도 높이가 변하면 안 된다 — 헤더가 커지면 무대와 패널이 통째로
     밀려 내려가서, 돈을 벌고 쓸 때마다 화면이 위아래로 덜컹거린다(실기기 제보). */
  min-height: 45px;
}
/* 금액은 왼쪽에 붙인다 — 지점 이름표를 뺀 뒤 가운데에 두었더니 왼쪽이 텅 비어
   허전했다(사용자 지적). 왼쪽 정렬이면 버튼과 자연스럽게 양 끝으로 나뉜다. */
/* 초당 수익은 금액 바로 오른쪽 같은 줄에 작게(+889/초) — 아래 줄에 두면 어디에 둬도 애매했다(사용자).
   금액이 길어지면 금액 쪽이 줄어든다(초당 수익은 줄지 않는다) */
.gold-box { flex: 1 1 auto; min-width: 0; padding-left: 2px; display: flex; align-items: baseline; gap: 6px; }
.gold-box .gold-main { min-width: 0; }
.gold-box .gold-sub { flex: 0 0 auto; white-space: nowrap; font-size: 12px; font-weight: 700; color: #9cf08a; }
@media (max-width: 379px) {
  .icon-btn { width: 34px; height: 34px; font-size: 16px; }
  .topbar-btns { gap: 5px; }
}
.gold-main {
  font-size: clamp(15px, 5.4vw, 21px);   /* 좁을수록 작게 — 줄바꿈 대신 글자를 줄인다 */
  font-family: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: #ffe27a; letter-spacing: .5px;
  white-space: nowrap;                    /* 절대 두 줄이 되지 않게 */
  overflow: hidden; text-overflow: ellipsis;
}
@keyframes bump { 40% { transform: scale(1.12); } }
.gold-sub { font-size: 11px; color: #8f9ac2; }
.topbar-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  background: #1c2340; border: 1px solid #33406e;
  font-size: 17px; cursor: pointer; color: inherit;
}
.icon-btn:active { transform: scale(.92); }

/* ===== 무대 (Canvas — scene.js 가 그린다) ===== */
/* 무대는 탭 줄 위까지 화면을 다 쓴다 — 위쪽 --stall-h 가 가게, 그 아래가 앞마당(scene.js).
   목록 판(#sheet)은 그 위에 떠서 접히고 펼쳐진다. 펼치면 가게 바로 아래까지 올라와
   예전 화면과 같아진다. */
#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  margin-bottom: calc(var(--tabs-h, 50px) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: #0b1026;
}
/* 크기는 scene.js 가 화소에 맞춰 px 로 정한다 — 창 높이만큼 한 번 잡고 무대가 줄면 아래가 가려진다(다시 잡으면 CPU 로 떨어진다) */
#sceneCanvas {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: manipulation;
}

/* 광고 버튼 레일 */
#adRail {
  position: absolute; right: 8px; top: calc(var(--stall-h, 300px) * 0.34);
  display: flex; flex-direction: column; gap: 8px; z-index: 20;
}
.ad-btn {
  width: 56px; padding: 6px 2px 5px;
  border-radius: 12px; border: 1px solid #7a5cc0;
  background: linear-gradient(#4a3684, #37276b);
  color: #efe6ff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  position: relative;
  box-shadow: 0 0 12px #7a5cc055;
}
.ad-btn .ad-ico { font-size: 20px; }
.ad-btn .ad-label { font-size: 10px; font-weight: 700; }
.ad-btn::before {
  content: "AD"; position: absolute; top: -6px; left: -6px;
  background: #ffcf4d; color: #422; font-size: 9px; font-weight: 900;
  border-radius: 6px; padding: 1px 4px;
}
.ad-btn:disabled { filter: grayscale(.8) opacity(.6); }
/* 버프 진행 중: 테두리가 시각적 타이머 (남은 비율만큼 링이 남는다) */
.ad-ring {
  position: absolute; inset: -3px; border-radius: 15px;
  display: none; pointer-events: none;
  background: conic-gradient(#ffcf4d calc(var(--p, 100) * 1%), rgba(255,255,255,.12) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 3px;
}
.ad-btn.buff-on { filter: none !important; opacity: 1 !important; border-color: transparent; box-shadow: 0 0 14px #ffcf4d55; }
.ad-btn.buff-on .ad-ring { display: block; }
.ad-btn.buff-on .ad-label { color: #ffcf4d; }
.ad-btn.buff-on::before { display: none; } /* 버프 중엔 광고를 볼 수 없으니 AD 뱃지 숨김 (링과 색 겹침 방지) */
.ad-btn .ad-cd {
  position: absolute; inset: 0; border-radius: 12px;
  background: #000000aa; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
/* 좌상단 칩 기둥: 목표 칩 + 배달 카드 + 러시 배지 */
#chipCol {
  position: absolute; top: 8px; left: 10px; z-index: 20;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  max-width: 58%;
}
.goal-chip {
  width: 200px; /* 글자 길이가 변해도 창 크기는 고정 */
  display: flex; flex-direction: column; gap: 4px;
  background: #10152ad9; border: 1px solid #3c4a80; border-radius: 10px;
  color: #ffe8b0; font-size: 13px; font-weight: 700; line-height: 1.25;
  font-family: "Jua", "Apple SD Gothic Neo", sans-serif;
  padding: 7px 10px 8px; cursor: pointer; text-align: left;
  backdrop-filter: blur(3px);
  max-width: 62%;
}
/* 유일한 안내 카드인데 한 줄로 잘라 "다음 메뉴 · 떡…" 만 보였다(플레이 점검) — 두 줄까지 보여 준다 */
.goal-chip > span:first-child {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: keep-all;
}
.goal-chip .goal-row { display: flex; align-items: center; gap: 6px; }
.goal-chip .goal-row b { flex: 0 0 auto; font-size: 11.5px; color: #ffd98a; min-width: 30px; text-align: right; white-space: nowrap; }
.goal-chip.ready .goal-row b { color: #8affc1; }
.goal-chip .goal-bar {
  flex: 1 1 auto;
  display: block; height: 5px; border-radius: 3px;
  background: #00000066; overflow: hidden;
}
.goal-chip .goal-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #ffb84d, #ffe27a);
  transition: width .4s ease;
}
.goal-chip.ready { border-color: #8affc1; box-shadow: 0 0 10px #4de08a66; animation: bump .7s ease infinite alternate; }
.goal-chip.ready .goal-bar i { background: linear-gradient(90deg, #4de08a, #8affc1); }
.order-chip { border-color: #e8854e; box-shadow: 0 0 10px #ff7a3d55; animation: bump .8s ease infinite alternate; }
.order-chip .goal-bar i { background: linear-gradient(90deg, #ff7a3d, #ffb066); transition: width .2s linear; }
.order-chip.delivering { animation: none; border-color: #4a7ec0; }
.order-chip.delivering .goal-bar i { background: linear-gradient(90deg, #4a9eff, #8ed0ff); }
/* 광고 이벤트 칩 (퇴근길 인파) — 금색, 잡을 수 있는 동안 두근거린다 */
.event-chip { border-color: #d8ab3c; box-shadow: 0 0 12px #ffd85e66; animation: bump .8s ease infinite alternate; }
.event-chip .goal-bar i { background: linear-gradient(90deg, #ffd85e, #ffb84e); transition: width .2s linear; }
.event-chip:disabled { animation: none; opacity: .92; }


/* ===== 하단 시트 ===== */
#sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 25;
  height: var(--sheet-h, 54%);
  display: flex; flex-direction: column;
  background: #171d33;
  border-top: 2px solid #2c3763;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 18px rgba(0,0,0,.45);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
#sheet.collapsed { transform: translateY(calc(100% - var(--tabs-h, 50px) - env(safe-area-inset-bottom, 0px))); }
#sheet.dragging { transition: none; }
#sheet.collapsed .panel { opacity: 0; pointer-events: none; }
#sheet .panel { transition: opacity .2s; }
/* 손잡이 — 끌 수 있다는 걸 보여 준다(사용자: "화면 내리는 방법을 모를 수도"). 막대 양옆 화살표가 지금 갈 수 있는
   방향을 가리키고(접힘 ▲ · 펼침 ▼), 직접 접고 펴 보기 전까지는 살짝 들썩인다(body.sheet-learned 면 멈춘다) */
#sheetGrip {
  height: 22px; flex: 0 0 auto; cursor: grab; touch-action: none;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
#sheetGrip span { width: 54px; height: 5px; border-radius: 3px; background: #ffffff80; }
.grip-chev { width: 8px; height: 8px; border-left: 2.5px solid #ffd27a; border-top: 2.5px solid #ffd27a;
  transform: translateY(2px) rotate(45deg); transition: transform .25s; }
#sheet:not(.collapsed) .grip-chev { transform: translateY(-2px) rotate(225deg); }
body:not(.sheet-learned) #sheetGrip { animation: gripBob 1.6s ease-in-out infinite; }
body:not(.sheet-learned) #sheet:not(.collapsed) #sheetGrip { animation-name: gripBobDown; }
body.coaching #sheetGrip { animation: none; }   /* 가이드가 손잡이를 짚는 동안 구멍이 흔들리지 않게 */
@keyframes gripBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes gripBobDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* 판 안내 말풍선 — 손잡이 바로 위, 꼬리가 손잡이를 가리킨다 */
.sheet-hint { position: fixed; left: 50%; transform: translateX(-50%); z-index: 90; width: max-content; max-width: 86vw;
  background: #fff6dc; color: #4a2f12; border: 2px solid #e7b864; border-radius: 14px; padding: 9px 14px;
  font-size: 13.5px; font-weight: 700; line-height: 1.4; text-align: center; word-break: keep-all; box-shadow: 0 6px 18px rgba(0,0,0,.45);
  animation: sheetHintIn .3s ease-out; }
.sheet-hint::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -8px;
  border: 8px solid transparent; border-bottom: 0; border-top-color: #e7b864; }
.sheet-hint .sh-arrow { display: inline-block; color: #d9822b; font-family: sans-serif; margin-right: 2px; animation: shArrow 1s ease-in-out infinite; }
.sheet-hint.down .sh-arrow { animation-name: shArrowDown; }
@keyframes shArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes shArrowDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes sheetHintIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
#tabs { display: flex; gap: 3px; padding: 0 8px 0; touch-action: none; }
.tab-btn {
  flex: 1; padding: 9px 2px; font-size: 12.5px;
  font-family: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: #1c2340; color: #8f9ac2;
  border: 1px solid #2c3763; border-bottom: none;
  border-radius: 10px 10px 0 0; cursor: pointer;
  position: relative;
}
.tab-btn.active { background: #232c4d; color: #ffd98a; }
.dot {
  position: absolute; top: 5px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff5c5c; box-shadow: 0 0 6px #ff5c5c;
}
.panel {
  flex: 1; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain;   /* 목록 끝에서 당겨도 화면 전체로 번지지 않게 */
  background: #232c4d;
  padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 12px);
  display: flex; flex-direction: column; gap: 8px;
}
.panel::-webkit-scrollbar { width: 0; }

/* 카드 공통 */
.card {
  background: #1a2140; border: 1px solid #33406e; border-radius: 12px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
}
.card .big-emoji { font-size: 30px; width: 38px; text-align: center; flex-shrink: 0; }
/* 코드로 그린 설비·비법 아이콘 — 이모지 자리를 그대로 채운다(폭은 .big-emoji 가 정한다) */
.big-emoji .ui-ico { display: block; width: 100%; height: auto; }
.food-ico { width: 44px; height: 44px; flex-shrink: 0; image-rendering: auto; }
.food-ico.dim { filter: grayscale(.5) opacity(.75); }
.food-mini { width: 26px; height: 26px; vertical-align: middle; margin-right: 2px; }
.card .info { flex: 1; min-width: 0; }
.card .name { font-size: 15px; font-family: "Jua", "Apple SD Gothic Neo", sans-serif; font-weight: 400; }
.card .name small { color: #8f9ac2; font-weight: 600; margin-left: 4px; }
/* 한글은 기본값이면 단어 한복판에서 꺾인다 — "메뉴 레벨/업 비용" 처럼 */
.card .desc { font-size: 11.5px; color: #9aa6cf; margin-top: 2px; word-break: keep-all; }
.card .desc b { color: #ffe27a; }
.card .desc .next { color: #8affc1; }

.buy-btn {
  flex-shrink: 0; min-width: 92px;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid #8a6a2f;
  background: linear-gradient(#7a5c22, #5d451a);
  color: #ffe8b0; font-weight: 800; font-size: 12.5px;
  cursor: pointer; text-align: center; line-height: 1.3;
  touch-action: none; /* 길게 눌러 연속 구매 — 손가락이 밀려도 스크롤로 안 뺏긴다 */
}

/* 이사 연출 — 트럭이 밤거리를 가로지른다 */
#moveOverlay {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(10, 13, 24, .88);
}
#moveOverlay.hidden { display: none; }
.move-truck {
  font-size: 72px;
  transform: scaleX(-1); /* 트럭이 오른쪽(다음 지점)을 보게 */
  animation: truckRide 1.9s ease-in-out forwards;
}
@keyframes truckRide {
  0%   { translate: -60vw 0; }
  45%  { translate: 0 0; }
  55%  { translate: 0 0; }
  100% { translate: 65vw 0; }
}
.move-label {
  margin-top: 14px; font-family: "Jua", "Apple SD Gothic Neo", sans-serif;
  font-size: 20px; color: #ffd98a;
  animation: fadeInOut 1.9s ease forwards;
}
@keyframes fadeInOut { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* 합성소 — 머지류 문법: [재료×3] ➜ [결과 프리뷰] + 아이콘 그리드 */
.fusion-hot { border-color: #c780fa !important; color: #e9d5ff !important; box-shadow: 0 0 10px #c780fa66; }
.fuse-row { display: flex; justify-content: center; align-items: center; gap: 9px; }
.fuse-slot {
  width: 62px; height: 62px; border-radius: 15px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; background: #151b33;
  border: 2px dashed #4a5578; cursor: pointer; position: relative;
}
.fuse-slot small { position: absolute; right: 4px; bottom: 3px; font-size: 10px; color: #ffd98a; }
.fuse-slot em { font-style: normal; font-size: 10px; margin-top: 2px; }
.fuse-slot.empty { color: #4a5578; font-size: 22px; cursor: default; }
.fuse-slot:not(.empty) { border-style: solid; }
/* 결과칸이 주인공 — 제일 크게 */
.fuse-slot.result { cursor: default; background: #1b1533; width: 78px; height: 78px; font-size: 36px; border-width: 3px; }
.fuse-slot.result em { font-size: 11px; }
.fuse-slot.result.glow { animation: resultPulse 1.2s ease-in-out infinite; }
@keyframes resultPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.fuse-arrow { font-size: 18px; color: #8f9ac2; }
/* 출석 보상 7일 캘린더 */
/* padding 은 장식이 아니라 오늘 칸의 bump(scale 1.12)가 나갈 자리다.
   transform 은 레이아웃엔 영향이 없지만 **스크롤 영역에는 포함**되므로, 여백이 없으면
   확대되는 프레임마다 모달의 스크롤바가 좌우·위아래로 켜졌다 꺼진다. */
.att-head { text-align: center; font-size: 13px; color: #c9d0e4; margin-bottom: 10px; line-height: 1.5; }
/* 출석 칸 — 받은 날은 흐리게 + 구석 체크(예전엔 ✓ 가 그림을 통째로 덮어 지저분했다), 오늘은 금테.
   칸이 커지는 애니메이션(bump)은 뺐다 — 확대가 칸 밖으로 넘쳐 모달 스크롤바가 깜빡였다 */
.att-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 2px 4px; }
.att-cell {
  position: relative; background: #151b33; border: 1.5px solid #2c3760; border-radius: 11px;
  padding: 7px 2px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.att-cell .att-day { font-size: 10.5px; color: #8f9ac2; font-weight: 800; line-height: 1.2; }
.att-cell .att-ico { font-size: 22px; line-height: 1.1; }
.att-cell .att-lbl { font-size: 10px; color: #c9d0e4; line-height: 1.25; word-break: keep-all; }
.att-cell.cur { border-color: #ffd24a; background: #2a2440; box-shadow: 0 0 12px #ffd24a44; }
.att-cell.cur .att-day { color: #ffd24a; }
.att-cell.done { opacity: .45; }
.att-cell .att-check {
  position: absolute; right: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-style: normal;
  font-size: 9.5px; font-weight: 900; color: #0e1530; background: #8affc1;
}
.att-note { text-align: center; font-size: 11.5px; color: #c9b48f; margin-top: 10px; }
body.skin-isekai .att-cell { background: #33261a; border-color: #55402a; }
body.skin-isekai .att-cell.cur { border-color: #ffd24a; background: #4a3524; }
/* 출석 버튼 — 받기는 한 줄 통째로, 그 아래 나중에 · 광고 2배 */
.modal-actions.att-acts { gap: 7px; margin-top: 12px; }
.modal-actions.att-acts button { min-width: 0; padding: 10px 6px; font-size: 13px; }
.modal-actions.att-acts button.primary { padding: 10px 6px; font-size: 14.5px; }
.modal-actions.att-acts button.primary small { display: block; font-size: 11.5px; font-weight: 700; color: #ffd98a; margin-top: 1px; }
/* 받기 · 광고 2배 를 한 줄에, 폭은 글자에 맞게(꽉 채우지 않는다) */
.modal-actions.att-acts { justify-content: center; }
.modal-actions.att-acts button.primary { flex: 0 0 38%; }
.modal-actions.att-acts button.adwatch { flex: 0 0 48%; }
/* 창 오른쪽 위 닫기 */
.modal-x { position: absolute; top: 9px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #3c4a80; background: #232c4d; color: #c9d0e4; font-size: 14px; line-height: 1; cursor: pointer; z-index: 2; }
body.skin-isekai .modal-x { background: #3a2c1c; border-color: #6b5233; color: #e8d8b4; }
/* 위 막대 출석 표시 — 빨간 점이 받을 게 있다고 말한다 */
.icon-btn.att-hud { position: relative; animation: attHud 1.6s ease-in-out infinite; }
.icon-btn.att-hud i { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: #ff5a5a; border: 2px solid #0e1530; }
@keyframes attHud { 50% { box-shadow: 0 0 10px #ffd24a88; border-color: #ffd24a; } }
/* 7일차는 한 줄을 통째로 — 큰 보상이라는 걸 배치로 말해 준다 */
.att-cell:nth-child(7) { grid-column: span 2; }
.att-cell:nth-child(7) .att-ico { font-size: 24px; }

/* ===== 도구 슬롯 상세 (장착 카드를 누르면 열리는 창) ===== */
.gear-peek {
  border: 1.5px solid var(--tier, #33406e); border-radius: 12px;
  background: #151b33; padding: 9px 11px 10px; margin-bottom: 8px; position: relative;
}
.gear-peek.empty { border-style: dashed; border-color: #33406e; }
/* 카드 테두리 위에 걸치게 두면(top:-9px) 모달 본문이 세로 스크롤이라 윗변이 잘린다 —
   맨 위 카드는 아예 반쯤 사라졌다. 흐름 안에 두면 어디로 스크롤해도 온전하다. */
.gear-peek-tag {
  display: inline-block; margin-bottom: 4px; background: #232c4d; color: #8f9ac2;
  font-size: 10px; font-weight: 800; padding: 0 7px; border-radius: 7px;
  line-height: 17px;
}
.gear-peek-name { font-size: 13.5px; margin-bottom: 3px; }
/* 옵션 표 — 이름은 왼쪽, 수치는 오른쪽. "·" 로 이어 붙인 한 줄은 좁은 화면에서
   한복판이 꺾여 어디까지가 한 옵션인지 알 수가 없었다(사용자: "보기 불편하다"). */
.gear-stats { margin-top: 5px; }
.gear-stat {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12.5px; padding: 3px 1px; border-top: 1px dashed #ffffff12;
}
.gear-stat:first-child { border-top: 0; }
.gear-stat .k { color: #9aa6cf; word-break: keep-all; }
.gear-stat .v { color: #dfe5f7; font-weight: 800; white-space: nowrap; }
.gear-stat.main .k { color: #c9d0e4; }
.gear-stat.main .v { color: #ffe27a; font-size: 13.5px; }
/* 칩 — 목록 행처럼 좁은 자리용. 짧은 이름이라 한 줄에 서넛이 들어간다 */
.gear-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gear-chip {
  font-size: 10.5px; font-weight: 700; line-height: 16px; padding: 0 6px; border-radius: 6px;
  background: #00000033; border: 1px solid #33406e; color: #aab4d8; white-space: nowrap;
}
.gear-chip.main { border-color: #6b5a8a; background: #ffe27a14; color: #ffe27a; }
.gear-peek-act {
  display: flex; gap: 8px; justify-content: center; align-items: center; margin-bottom: 10px;
}
.gear-peek-act.two > button { flex: 1; }
/* 창 머리말 — 숫돌 보유량. 강화 버튼 옆이 아니라 여기다(버튼은 제 줄 가운데를 쓴다) */
.gear-stone-hd { font-size: 12px; color: #8f9ac2; margin: -2px 0 8px; }
.gear-stone-hd b { color: #c9d0e4; }
/* 종류 보너스 — 주옵션(노랑)과 보조옵션(회색) 사이, 그 도구만의 성격이라 하늘색 */
.gear-chip.kind { border-color: #3f7fb5; background: #4aa3ff14; color: #8ed0ff; }
.gear-stat.kind .k, .gear-stat.kind .v { color: #8ed0ff; }
body.skin-isekai .gear-chip.kind { border-color: #4f86a8; color: #9fd4f0; }
/* 슬롯 상세 머리 — 이 칸의 성격과 종류 셋 */
.gear-kinds { display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; padding: 8px 10px;
  border-radius: 10px; background: #0000002e; font-size: 12.5px; color: #c9d0e4; }
.gear-kinds b { color: #ffd98a; font-size: 13px; }
.gear-kinds small { color: #8f9ac2; margin-left: 4px; }
/* 바꾸면 뭐가 달라지는지 — 주 옵션만 수치로. 접사는 종류가 달라 카드에서 나란히 읽는다 */
.gear-cmp {
  background: #1b2240; border: 1px solid #33406e; border-radius: 10px;
  padding: 7px 10px; margin-bottom: 8px;
}
.gear-cmp-head { font-size: 11px; color: #8f9ac2; margin-bottom: 3px; }
.gear-cmp-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.gear-cmp-row .arrow { color: #8f9ac2; margin: 0 2px; }
.gear-cmp-row .delta { margin-left: 5px; font-size: 12px; }
.gear-cmp-row .delta.up { color: #8affc1; }
.gear-cmp-row .delta.down { color: #ff9a9a; }
.gear-cmp-row .delta.same { color: #8f9ac2; }
.gear-pick {
  border: 1.5px solid #2c3760; border-left: 4px solid var(--tier, #33406e);
  border-radius: 10px; background: #141a30; padding: 7px 10px; margin-bottom: 6px;
  cursor: pointer;
}
.gear-pick.on { border-color: #8affc1; background: #17233c; }
.gear-up { color: #8affc1; font-size: 11px; }        /* 지금 것보다 낫다는 표시 */
.gear-more { font-size: 11px; color: #7d88ad; margin-top: 3px; }

/* 합성 결과 화면 — 선택 화면과 비슷한 높이를 유지해 전환 때 창이 쪼그라들지 않게 */
.fuse-result {
  overflow: hidden; min-height: 264px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* 위 판 — 재료 셋 ➜ 결과, 안내 한 줄, 합성 버튼(늘 자리를 차지한다 — 생기며 창이 덜컥거리지 않게) */
.fuse-top { background: #0000002a; border: 1px solid #3c4a80; border-radius: 12px; padding: 12px 8px 10px; margin-bottom: 18px; }
body.skin-isekai .fuse-top { border-color: #6b5233; }
.fuse-slot.filled { border-style: solid; border-color: transparent; background: none; }
/* 360px 폰(S25)에서 재료 줄이 넘쳤다 — 위 칸과 아래 목록의 도구 그림은 같은 46px 로 맞춘다 */
.fuse-row { gap: 6px; }
.fuse-slot { width: 52px; height: 52px; }
.fuse-slot .gtile.lg, .fuse-item .gtile.lg { --s: 46px; }
.fuse-slot.result { width: 64px; height: 64px; }
.fuse-slot.result .gtile.xl { --s: 58px; }
.fuse-slot.result:not(.empty) { border-color: var(--tier); background: none; }
.fuse-guide { text-align: center; font-size: 12.5px; color: #aab4d8; margin: 9px 0 8px; line-height: 1.4; }
.fuse-guide b { color: #ffd98a; }
.fuse-go { display: block; width: 100%; padding: 10px 0; font-size: 14px; }
.fuse-go:disabled { opacity: .45; }
/* 아래 — 같은 도구 · 같은 등급끼리 묶은 칸 */
.fuse-list { max-height: 34vh; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: #3c4a80 transparent; }
.fuse-list::-webkit-scrollbar { width: 4px; }
.fuse-list::-webkit-scrollbar-thumb { background: #3c4a80; border-radius: 4px; }
.fuse-grp { border: 1.5px solid #2c3760; border-left: 4px solid var(--tier); border-radius: 12px;
  background: #151b33; padding: 7px 9px 9px; margin-bottom: 8px; transition: opacity .15s; }
.fuse-grp.dim { opacity: .38; }
.fuse-grp-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; color: #e8ecff; margin-bottom: 6px; }
.fuse-grp-hd small { color: #8f9ac2; font-weight: 700; font-size: 11.5px; margin-left: 2px; }
.fuse-auto { padding: 4px 10px; font-size: 11.5px; min-width: 0; }
.fuse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fuse-item {
  position: relative; border-radius: 11px; padding: 6px 2px 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: #1a2140; border: 2px solid #2c3760; color: #e8eaf2; cursor: pointer;
}
.fuse-item.sel { border-color: #8affc1; background: #17283a; }
.fuse-item .fi-name { font-size: 11px; font-weight: 700; color: #c9d0e4; white-space: nowrap; }
.fuse-item .fi-eq { position: absolute; left: 50%; top: -7px; transform: translateX(-50%); font-style: normal;
  font-size: 9px; font-weight: 800; color: #0e1530; background: #8ed0ff; border-radius: 6px; padding: 0 4px; white-space: nowrap; }
.fuse-item .fi-check {
  position: absolute; right: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 11px; font-weight: 900; color: #0e1530; background: #8affc1;
}
.fuse-foot { font-size: 11px; color: #8f9ac2; margin-top: 4px; text-align: center; }
body.skin-isekai .fuse-grp { background: #33261a; border-color: #55402a; border-left-color: var(--tier); }
body.skin-isekai .fuse-item { background: #2e2318; border-color: #55402a; }
body.skin-isekai .fuse-item.sel { border-color: #8affc1; background: #3a3020; }
.fuse-item:active { transform: scale(.94); }

/* 상자 개봉 연출 — 흔들림 → 뚜껑 열림 + 빛 → 아이템이 상자 안에서 솟아오른다 */
.box-stage {
  position: relative; height: 152px; margin: 6px auto 2px;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
/* 상자를 CSS 로 직접 그린다 — 이모지는 글리프를 못 잘라 "열린 상자"를 만들 수 없다.
   살짝 위에서 내려다보는 각도(윗면이 보이는 사선)라 정면에서 볼 때의 납작함이 없다.
   구성: 윗면(열린 구멍) + 앞판 + 옆판 + 뚜껑 두 짝. 뚜껑이 양쪽으로 젖혀지고 상자는 열린 채 남는다. */
.cbox {
  position: absolute; left: 50%; bottom: 10px; width: 78px; height: 56px; z-index: 4;
  transform: translateX(-50%); pointer-events: none;
}
.cbox-top { /* 윗면 — 사선으로 눌러 원근을 준다. 뚜껑 두 짝을 자식으로 품는다 */
  position: absolute; left: 3px; top: 0; width: 72px; height: 26px;
  transform: perspective(120px) rotateX(52deg); transform-origin: 50% 100%;
  transform-style: preserve-3d;
  background: linear-gradient(#e0a862, #c98a45);
  border-radius: 3px;
}
.cbox-hole { /* 열린 구멍 — 안쪽 벽면 음영이 보인다 */
  position: absolute; inset: 5px 6px 4px;
  border-radius: 2px;
  background: linear-gradient(#1d1208 0%, #33200f 55%, #4a2f16 100%);
  box-shadow: inset 0 5px 7px rgba(0, 0, 0, .7), inset 0 -2px 3px rgba(255, 200, 130, .12);
}
.cbox-front { /* 앞판 + 테이프 */
  position: absolute; left: 3px; bottom: 0; width: 62px; height: 36px;
  background: linear-gradient(#c88a45, #a96c30 60%, #90592a);
  border-radius: 0 0 4px 5px;
  box-shadow: inset 0 -5px 9px rgba(0, 0, 0, .18);
}
.cbox-front::after {
  content: ''; position: absolute; left: 50%; top: 0; width: 12px; height: 100%;
  transform: translateX(-50%); background: rgba(255, 244, 214, .26);
}
.cbox-side { /* 오른쪽 옆판 — 사선으로 깎아 입체감 */
  position: absolute; right: 3px; bottom: 0; width: 15px; height: 36px;
  background: linear-gradient(#a86a2e, #7e4d1f);
  border-radius: 0 0 5px 0;
  clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 100%);
}
/* 뚜껑 — 윗면의 자식이라 닫혀 있을 때 윗면을 빈틈없이 덮는다
   (따로 회전시키면 원근이 어긋나 틈이 생겼다). 한 장이 통째로 젖혀져 날아간다. */
.cbox-lid {
  position: absolute; inset: 0;
  background: linear-gradient(#eab971, #d29a55);
  border-radius: 3px; transform-origin: 50% 0;
}
.cbox-lid::after { /* 뚜껑 가운데 이음선 — 평평해 보이지 않게 */
  content: ''; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 11px;
  transform: translateX(-50%); background: rgba(255, 245, 220, .22);
}
.cbox.premium .cbox-top { background: linear-gradient(#a385e0, #8564c4); }
.cbox.premium .cbox-front { background: linear-gradient(#8f6fd0, #6d4fae 60%, #573e8f); }
.cbox.premium .cbox-side { background: linear-gradient(#6d4fae, #4e3780); }
.cbox.premium .cbox-lid { background: linear-gradient(#b79ae8, #9678d2); }
.cbox.premium .cbox-front::after { background: rgba(255, 236, 180, .32); }
/* 흔들림 (개봉 전) */
.box-stage:not(.opening) .cbox { animation: boxShake .9s ease-in-out; }
@keyframes boxShake {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  15% { transform: translateX(-50%) rotate(-8deg); }
  30% { transform: translateX(-50%) rotate(7deg); }
  45% { transform: translateX(-50%) rotate(-6deg); }
  60% { transform: translateX(-50%) rotate(5deg); }
  78% { transform: translateX(-50%) rotate(-3deg); }
}
/* 뚜껑이 뒤로 젖혀졌다가 그대로 튕겨 날아간다 — 상자는 열린 채 남는다 */
.box-stage.opening .cbox-lid { animation: lidOpen .75s cubic-bezier(.3, 1.1, .6, 1) forwards; }
@keyframes lidOpen {
  0%   { transform: rotateX(0) translate(0, 0) rotate(0); opacity: 1; }
  30%  { transform: rotateX(-118deg) translate(0, -2px) rotate(0); opacity: 1; }
  100% { transform: rotateX(-150deg) translate(-30px, -70px) rotate(-32deg) scale(.9); opacity: 0; }
}
/* 상자 안에서 새어나오는 빛 */
.box-glow {
  position: absolute; bottom: 30px; left: 50%; width: 130px; height: 130px;
  transform: translateX(-50%) scale(.2); opacity: 0; z-index: 2;
  background: radial-gradient(circle, var(--tier, #ffd98a) 0%, transparent 68%);
}
.box-stage.opening .box-glow { animation: boxGlow 1.1s ease-out forwards; }
@keyframes boxGlow {
  0%   { opacity: 0; transform: translateX(-50%) scale(.2); }
  35%  { opacity: .75; transform: translateX(-50%) scale(1.05); }
  100% { opacity: .28; transform: translateX(-50%) scale(1); }
}
/* 아이템: 상자 뒤(z-index 3 < 상자 4)에 숨어 있다가 열린 뚜껑 사이로 솟아오른다 */
.box-item {
  position: absolute; bottom: 20px; left: 50%; z-index: 3;
  transform: translateX(-50%) translateY(6px) scale(.35); opacity: 0;
}
.box-item-emoji { font-size: 46px; line-height: 1; }
.box-stage.opening .box-item { animation: itemRise .75s cubic-bezier(.18, 1.3, .4, 1) .18s forwards; }
/* 무대(152px) 안에 머무는 높이 — 아이템 바닥이 상자 윗면 근처에 앉아 "안에서 나온" 것으로 읽힌다 */
@keyframes itemRise {
  0%   { transform: translateX(-50%) translateY(6px) scale(.35); opacity: 0; }
  45%  { transform: translateX(-50%) translateY(-52px) scale(1.12); opacity: 1; }
  70%  { transform: translateX(-50%) translateY(-38px) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-44px) scale(1.02); opacity: 1; }
}
/* 결과 문구 자리를 미리 잡아 둔다 — "무엇이 나올까"(1줄)에서 결과(제목+옵션 2줄)로 바뀔 때
   높이가 늘면 창이 덜컥 커진다. 최대 경우(전설 옵션 2줄)를 담는 높이로 고정하고 가운데 정렬. */
.box-caption {
  text-align: center; font-size: 12.5px; color: #8f9ac2; margin-top: 6px;
  min-height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* 상자 개봉 연출 창 — 창 어디를 눌러도 다음으로 */
.box-fx .bx-card { cursor: pointer; }
.bx-stage { height: 176px; }
/* 판(bx-body)이 세로 flex 라 무대가 내용 폭으로 줄어든다 — 안이 전부 absolute 라 폭 0 + overflow hidden 이 되어
   상자·도구가 통째로 안 보였다(사용자: "상자 개봉과 이름 사이에 아무것도 안 나온다"). 폭을 못 박는다 */
.box-fx .bx-stage { width: 100%; align-self: stretch; flex: 0 0 auto; }
/* 연출 도중 눌렀다 — 애니메이션을 끝 상태로 바로 보낸다(forwards 라 마지막 프레임에 선다) */
.box-fx .bx-stage.skip, .box-fx .bx-stage.skip *, .box-fx .bx-body.skip .bx-cell { animation-duration: 1ms !important; animation-delay: 0s !important; }
/* 창 높이는 처음부터 끝까지 그대로 — 옵션 줄 수(2~5줄)·전체 보기에 따라 창이 들썩였다 */
.box-fx .bx-body { min-height: 360px; display: flex; flex-direction: column; }
.box-fx .box-caption { min-height: 170px; justify-content: flex-start; padding-top: 2px; }
/* 4줄(20개)까지는 그대로, 넘으면 스크롤(사용자). 한 줄 67px — 4줄 265px 에 다음 줄이 살짝 보이게 288px */
.box-fx .bx-grid { max-height: 288px; scrollbar-width: thin; scrollbar-color: #3c4a80 transparent; }
.box-fx .bx-grid::-webkit-scrollbar { width: 4px; }
.box-fx .bx-grid::-webkit-scrollbar-thumb { background: #3c4a80; border-radius: 4px; }
/* 제목과 아이콘 사이·아이콘 줄 사이를 띄운다 — 붙어 있어 답답했다(사용자) */
.box-fx .bx-body.all .bx-grid { margin-top: 16px; row-gap: 14px; padding-top: 6px; }
/* 전체 보기 — 아이콘은 위에서부터, 합계는 아래 칸 바닥에(사용자: 가운데로 모으니 위가 비어 이상하다) */
.box-fx .bx-body.all { min-height: 0; }
.box-fx .bx-sum { margin: 14px 0 0; padding: 8px 0 0; border-bottom: 0; border-top: 1px dashed #33406e; }
body.skin-isekai .box-fx .bx-sum { border-top-color: #55402a; }
.bx-stone { font-size: 12px; color: #c9b48f; margin-top: 4px; }
.bx-stats.gone, .bx-cell.gone .gtile { opacity: .45; filter: grayscale(.7); }
.bx-name { font-family: "Jua", sans-serif; font-size: 18px; animation: enhPop .35s; }
.bx-stats { width: 100%; text-align: left; background: #0000002a; border-radius: 10px; padding: 3px 9px; margin-top: 6px; }
.bx-hint { font-size: 12px; color: #8f9ac2; min-height: 17px; margin-top: 6px; animation: bxBlink 1.4s ease-in-out infinite; }
@keyframes bxBlink { 50% { opacity: .45; } }
.bx-all { display: block; width: 60%; margin: 10px auto 0; padding: 8px 0; font-size: 13px; }
.bx-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; max-height: 46vh; overflow-y: auto; padding: 4px 2px; }
.bx-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  opacity: 0; transform: scale(.3); animation: bxPop .3s cubic-bezier(.2,1.6,.4,1) var(--d) forwards; }
.bx-cell span { font-size: 10px; color: #c9d0e4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes bxPop { to { opacity: 1; transform: scale(1); } }


/* 숫돌 꾸러미 — 가로 한 줄(아이콘 · 글 · 버튼) */
.shop-item.shop-row { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 11px; }
.shop-item.shop-row { gap: 8px; }
.shop-item.shop-row .shop-ico { width: 40px; height: 40px; flex: 0 0 40px; font-size: 21px; }
.shop-item.shop-row .shop-title { font-size: 14px; white-space: nowrap; }
.shop-stone { display: block; font-size: 11.5px; color: #c9b48f; }
.shop-row .body { flex: 1; min-width: 0; }
.shop-item.shop-row .shop-desc { margin: 3px 0 0; }
.shop-item.shop-row button { width: calc(50% - 13px); flex: 0 0 calc(50% - 13px); white-space: nowrap; margin-top: 0; padding: 9px 12px; font-size: 12.5px; }
/* 상자에서 같이 나온 숫돌 */
.bx-plus { font-size: 12.5px; color: #ffd98a; font-weight: 800; margin-top: 3px; }
/* 분해 창 */
.dis-hd { font-size: 12px; color: #8f9ac2; text-align: center; margin-bottom: 8px; }
.dis-tiers { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.dis-tier { border: 1.5px solid var(--tier); background: #00000030; color: var(--tier); border-radius: 9px;
  padding: 5px 11px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.dis-tier.on { background: var(--tier); color: #12141f; }
.dis-grid { max-height: 288px; row-gap: 12px; }
.dis-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  background: none; border: 2px solid transparent; border-radius: 10px; padding: 3px 1px; color: inherit; cursor: pointer; }
.dis-cell span { font-size: 10px; color: #c9d0e4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dis-cell.sel { border-color: #ff9a6a; background: #ff9a6a1a; }
.dis-cell .fi-check { position: absolute; right: 1px; top: 1px; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 900;
  color: #1a0d05; background: #ff9a6a; }
.dis-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed #33406e; }
.dis-sum { flex: 1; font-size: 12.5px; color: #c9d0e4; }
.dis-sum b { color: #ffd98a; }
.dis-warn { font-size: 11px; color: #ff9a9a; margin-top: 2px; }
.dis-go { flex: 0 0 120px; padding: 9px 0; }
body.skin-isekai .dis-foot { border-top-color: #55402a; }

/* 합성 결과 등장 (합성소 전용) */
.box-reveal { animation: boxPop .38s cubic-bezier(.2, 1.6, .45, 1); }
@keyframes boxPop {
  0% { transform: scale(.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 시작 화면 (타이틀) */
#titleScreen {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 28px; text-align: center;
  background: radial-gradient(ellipse at 50% 18%, #26305c 0%, #141a2e 55%, #0a0d18 100%);
}
#titleScreen.hidden { display: none; }
.title-art { font-size: 64px; transform-origin: top center; animation: lanternSway 3.2s ease-in-out infinite; }
@keyframes lanternSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.title-name {
  margin: 0; font-family: "Jua", "Apple SD Gothic Neo", sans-serif; font-weight: 400;
  font-size: 36px; color: #ffd98a; text-shadow: 0 0 26px #ffb04e66;
}
.title-sub { margin: 0 0 18px; color: #c9d0e4; font-size: 14px; }
#titleLogin, #titleGuest {
  width: min(280px, 80vw); padding: 14px; border-radius: 14px;
  font-size: 15px; font-weight: 800; cursor: pointer; word-break: keep-all;
}
#titleLogin {
  border: 1px solid #8a6a2f; background: linear-gradient(#7a5c22, #5d451a); color: #ffe8b0;
}
#titleGuest { border: 1px solid #33406e; background: #232c4d; color: #cfd6ef; }
#titleLogin:active, #titleGuest:active { transform: scale(.97); }
#titleLogin:disabled { filter: grayscale(.6) opacity(.6); }
.title-note { margin-top: 6px; font-size: 11.5px; color: #8f9ac2; }

/* 전체 랭킹 — 1~3위 단상 · 4위부터 목록 · 내 기록은 맨 아래 고정 */
.modal-actions.none { display: none; }
.rank-sub { text-align: center; font-size: 11.5px; color: #8f9ac2; margin: -4px 0 10px; }
.rank-empty { text-align: center; color: #8f9ac2; padding: 22px 0; font-size: 13px; }
.rank-empty small { display: block; margin-top: 4px; font-size: 11.5px; }
.rank-podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 6px; align-items: end; margin-bottom: 10px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.pod-medal { font-size: 24px; line-height: 1; }
.pod.p1 .pod-medal { font-size: 30px; }
.pod-name { font-size: 12px; font-weight: 800; color: #e8ecff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { font-size: 11px; font-weight: 700; color: #ffd98a; white-space: nowrap; }
.pod-base { width: 100%; margin-top: 4px; border-radius: 9px 9px 4px 4px; display: flex; align-items: center; justify-content: center;
  font-family: "Jua", sans-serif; font-size: 18px; color: #12141f; }
.pod.p1 .pod-base { height: 46px; background: linear-gradient(#ffe27a, #d8a33a); }
.pod.p2 .pod-base { height: 32px; background: linear-gradient(#e3e8f5, #a7b0c8); }
.pod.p3 .pod-base { height: 24px; background: linear-gradient(#f0b98a, #b9774a); }
.pod.mine .pod-name { color: #ffd24a; }
.pod.empty { opacity: .45; }
.rank-list { max-height: 34vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3c4a80 transparent; }
.rank-list::-webkit-scrollbar { width: 4px; }
.rank-list::-webkit-scrollbar-thumb { background: #3c4a80; border-radius: 4px; }
.rank-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 4px;
  background: #151b33; border: 1px solid #2c3760; border-radius: 10px;
  font-size: 13px;
}
.rank-row.mine { border-color: #ffd24a; background: #2a2440; }
.rank-no { width: 24px; text-align: center; flex-shrink: 0; color: #8f9ac2; font-weight: 800; font-size: 12px; }
.rank-flag { flex-shrink: 0; }
.rank-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-score { flex-shrink: 0; color: #ffd98a; font-weight: 700; font-size: 12.5px; }
.rank-me { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 11px;
  border: 1.5px solid #ffd24a88; border-radius: 12px; background: #2a2440; }
.rank-me-no { flex: 0 0 auto; min-width: 40px; text-align: center; font-family: "Jua", sans-serif; font-size: 20px; color: #ffd24a; }
.rank-me-no small { font-size: 11px; font-family: inherit; color: #c9b48f; }
.rank-me-body { flex: 1; min-width: 0; }
.rank-me-name { font-size: 13px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-me-name small { color: #8f9ac2; font-weight: 700; }
.rank-me-score { font-size: 12px; color: #ffd98a; font-weight: 700; }
.rank-edit { flex: 0 0 auto; padding: 6px 10px; font-size: 11.5px; }
.rank-me .ask-no { background: #2a3256; border-color: #3c4a80; color: #c9d0e4; box-shadow: none; }
body.skin-isekai .rank-me .ask-no { background: #3f3020; border-color: #6b5233; color: #e8d8b4; }
/* 닉네임 등록 */
/* 등록 창 — 칸(216px)에 맞춘 좁은 창, 제목 위를 넉넉하게 */
.modal-box.nick-mode { width: min(80vw, 292px); padding-top: 28px; }
.modal-box.nick-mode .modal-x { top: 12px; }
.nick-form { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 6px 10px; }
/* 닉네임 12자(한글 15px × 12 = 180px)가 꽉 차도 안 넘치는 폭 — 칸을 판 폭까지 늘리지 않는다 */
.nick-box { width: min(100%, 216px); }
.nick-hero { font-size: 34px; line-height: 1; margin: -4px 0 4px; }
.nick-sub { font-size: 12.5px; color: #aab4d8; line-height: 1.5; margin: 0 0 22px; }
.nick-lbl { display: flex; justify-content: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 800; color: #c9d0e4; margin: 0 2px 7px; }
.nick-lbl span { color: #8f9ac2; font-weight: 700; }
.nick-field { width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 4px; border-radius: 11px;
  border: 1.5px solid #3c4a80; background: #151b33; color: #f2ead8; font-size: 15px; font-family: inherit; outline: none; }
/* 닉네임·국가는 가운데 정렬(사용자). select 는 text-align-last 로 고른 값까지 가운데 */
.nick-field { text-align: center; text-align-last: center; }
.nick-field:focus { border-color: #ffd24a; box-shadow: 0 0 0 3px #ffd24a22; }
.nick-help { text-align: center; font-size: 11px; color: #7d88ad; margin: 0 2px 20px; word-break: keep-all; }
/* 오류는 닉네임 칸 바로 밑 — 자리는 늘 비워 두어 문구가 생길 때 창이 덜컥거리지 않게 */
.nick-msg { font-size: 11.5px; color: #ff9a9a; min-height: 16px; margin: 0 2px 16px; word-break: keep-all; }
.nick-go { width: 168px; max-width: 100%; padding: 10px 0; font-size: 14px; margin-top: 4px; }
body.skin-isekai .nick-field { background: #2b1f13; border-color: #6b5233; color: #f2e4c4; }
body.skin-isekai .rank-row { background: #33261a; border-color: #55402a; }
body.skin-isekai .rank-row.mine, body.skin-isekai .rank-me { background: #4a3524; }


/* 일괄 구매 토글 (×1/×10/MAX) — 메뉴·설비 패널 맨 위 */
.amt-row { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.amt-toggle {
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid #4a5578; background: #222b4a;
  color: #cfd8ff; font-weight: 800; font-size: 12px; cursor: pointer;
}
.amt-toggle:active { transform: scale(.95); }
.buy-btn small { display: block; font-size: 11px; font-weight: 700; color: #ffd98a; }
.buy-btn:disabled { filter: grayscale(.7) opacity(.55); }
.buy-btn:not(:disabled):active { transform: scale(.95); }
.buy-btn.dev { border-color: #4a7ec0; background: linear-gradient(#2c5584, #1f3f66); color: #cfe6ff; }
.buy-btn.dev small { color: #9fd0ff; }
.buy-btn.ad-cta { border-color: #7a5cc0; background: linear-gradient(#4a3684, #37276b); color: #efe6ff; }
.buy-btn.ad-cta small { color: #d0b8ff; }
.buy-btn.move { border-color: #3f9a63; background: linear-gradient(#2b7a49, #1f5c37); color: #d8ffe8; }
.buy-btn.move small { color: #8affc1; }
.buy-btn.perk { border-color: #b58a3f; background: linear-gradient(#6b5222, #4d3a18); color: #ffe8b0; }
.buy-btn.perk small { color: #ffd98a; }

/* 도약까지 남은 레벨 — 글자로만 두면 이 게임의 핵심 리듬이 안 읽힌다. 바로 보여 준다. */
.milestone {
  font-size: 10.5px; color: #b89ce0; margin-top: 3px;
}
/* 빈 홈이 카드 색과 너무 닮으면 "가득 찬 막대"로 읽힌다 — 이세계(갈색 카드)에서 실제로
   그랬다: 합성색 rgb(39,29,19) 대 카드 rgb(58,44,28), 채널당 19 차이뿐이라
   Lv200(채움 3%)인데 "노란 게이지가 차 있다"로 보였다(사용자).
   더 파 내리고 위쪽에 그늘을 넣어 **홈이 홈으로** 보이게 한다. */
/* 도약 게이지 — 3% 만 차 있어도 "꽉 찼다"로 읽힌다는 제보가 있었다. 실제 계산은 맞았고
   문제는 대비였다(막대 바탕 26/17/9 대 카드 58/44/28 — 5px 높이에서 거의 안 갈린다).
   바탕을 더 어둡게, 테두리를 또렷하게, 채움 끝에 빛을 줘서 어디까지 찼는지 보이게 한다. */
.mile-bar {
  height: 7px; border-radius: 4px; background: #000000b0; overflow: hidden; margin-top: 5px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.16);
}
body.skin-isekai .mile-bar { background: #080401d6; box-shadow: inset 0 1px 2px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,226,122,.22); }
.mile-bar i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #ffb84d, #ffe27a);
  box-shadow: 0 0 5px rgba(255,190,90,.75);
}
.milestone .mile-to { opacity: .62; font-weight: 400; }
/* 아이콘 타일 — 맨몸 아이콘은 배경에 둥둥 떠 약해 보인다. 레벨 배지도 타일 모서리에 붙인다 */
.card .tile {
  position: relative; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 11px;
  background: linear-gradient(#243057, #1b2444); border: 1px solid #3c4a80;
  display: flex; align-items: center; justify-content: center;
}
.card .tile .food-ico { width: 38px; height: 38px; }
.card .tile .big-emoji { font-size: 26px; width: auto; }
.card .tile .lv {
  position: absolute; left: -3px; bottom: -5px; background: #10152a; border: 1px solid #4a5578;
  color: #cfd8ff; font-size: 10.5px; font-weight: 800; padding: 1px 5px; border-radius: 7px;
}
body.skin-isekai .card .tile { background: linear-gradient(#54402a, #3d2d1c); border-color: #7a5c34; }
body.skin-isekai .card .tile .lv { background: #1d1408; border-color: #8a6a2f; color: #ffd98a; }
/* 구매 수량 줄 — 토글만 있던 빈 줄에 초당 수익을 같이 올린다 */
.amt-row { display: flex; align-items: center; justify-content: space-between; }
.amt-row .gps { font-size: 12px; color: #9aa6cf; }
.amt-row .gps b { color: #ffe27a; font-size: 13.5px; }
body.skin-isekai .amt-row .gps { color: #c9b48f; }
body.skin-isekai .amt-row .gps b { color: #ffd98a; }

/* 개발 진행 카드 */
.dev-progress { width: 100%; }
.dev-progress .bar {
  height: 8px; border-radius: 4px; background: #00000055; overflow: hidden; margin-top: 5px;
}
.dev-progress .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#4a9eff,#8ed0ff); }

/* 확장 탭 */
.card.loc-past { opacity: .8; }
.card.loc-now { border-color: #ffd98a66; box-shadow: 0 0 10px #ffb84d22 inset; }
.card.loc-lock { opacity: .55; }
.loc-tag {
  font-size: 10px; font-weight: 800; border-radius: 6px; padding: 2px 6px;
  flex-shrink: 0;
}
.loc-tag.now { background: #7a5c22; color: #ffe8b0; }
.loc-tag.past { background: #2b4a68; color: #b9dcff; }
/* 설비 상한 — 연 메뉴 수에 따라 열린다. 무엇을 개발하면 몇까지인지 두 줄로 */
.loc-tag.fac-lock {
  background: #2a2638; color: #c9c0e6; border: 1px solid #4a4466;
  text-align: center; line-height: 1.35; font-weight: 700;
  /* 크기를 못 박는다 — 글자 길이(메뉴 6종 / 드래곤 등심)에 따라 폭이 달라 줄이 들쭉날쭉했다(사용자) */
  box-sizing: border-box; width: 112px; min-height: 36px; padding: 3px 6px;
  display: flex; flex-direction: column; justify-content: center;
}

/* 도구 탭 */
.gear-card { border-left: 4px solid var(--tier, #9aa6cf); }
.gear-card .name b { color: var(--tier, #9aa6cf); }
.gear-afx { font-size: 11px; color: #9aa6cf; margin-top: 2px; line-height: 1.5; }
.gear-afx span { color: #cfd6ef; }
.gear-empty { opacity: .55; }
.gear-btns { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.gear-btns .buy-btn { min-width: 76px; padding: 6px 8px; font-size: 11.5px; }
.bag-row { margin-top: 6px; }
.loc-tag.enh-lock { background: #2a3256; color: #8f9ac2; text-align: center; line-height: 1.25; padding: 4px 8px; font-size: 10.5px; }
.gs-enh small { display: block; font-size: 11px; color: #ffd98a; font-weight: 700; }
.gs-empty b { color: #c780fa; }
.bag-row .amt-toggle { padding: 4px 10px; }
.stone-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #cfd6ef; padding: 2px 4px;
}

/* ===== 모달 ===== */
.modal-root { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: #000a; }
.modal-box {
  position: relative; width: min(88vw, 420px); max-height: 78dvh;
  background: #1d2445; border: 1px solid #3c4a80; border-radius: 16px;
  padding: 18px 16px 14px;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px #000c;
}
.modal-box h2 { font-size: 18px; font-family: "Jua", "Apple SD Gothic Neo", sans-serif; font-weight: 400; color: #ffd98a; margin-bottom: 10px; text-align: center; }
/* keep-all — 한글은 기본값이면 단어 한복판에서 꺾인다("손님 유/입 +6%").
   anywhere 는 그래도 한 줄에 못 넣는 긴 토막(수치·URL)만 받는 안전망이다. */
#modalBody {
  overflow-y: auto; font-size: 13.5px; line-height: 1.65; color: #d6ddf5;
  word-break: keep-all; overflow-wrap: anywhere;
}
#modalBody .hl { color: #ffe27a; font-weight: 800; }
#modalBody .stat-row { display: flex; justify-content: space-between; padding: 4px 2px; border-bottom: 1px dashed #33406e; font-size: 13px; }

/* 설정 메뉴 — 소리·계정·도움말 묶음. 같은 줄은 같은 모양(타일)이라 높이가 안 갈린다 */
.set-menu { margin-top: 12px; }
.set-cap { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; opacity: .55; margin: 10px 2px 5px; }
.set-cap:first-child { margin-top: 0; }
.set-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.set-tile, .set-row {
  border: 1px solid #33406e; background: #232c4d; color: #cfd6ef; border-radius: 12px;
  cursor: pointer; font-family: inherit; touch-action: manipulation;
}
.set-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 64px; padding: 8px 4px; line-height: 1.25;
}
.set-ico { font-size: 19px; line-height: 1.1; }
.set-name { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.set-sub { font-size: 10.5px; font-weight: 700; color: #8fe0a8; }
.set-tile.off { opacity: .62; }
.set-tile.off .set-sub { color: #f0a0a0; }
.set-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px; font-size: 13.5px; font-weight: 800; text-align: left;
}
.set-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-row small { flex: none; font-size: 11.5px; font-weight: 700; opacity: .65; }
.set-row small::after { content: ' ›'; }
.set-tile:active, .set-row:active { transform: scale(.97); }

/* ===== 게임 방법 ===== */
.guide { margin: -2px 0 2px; }
.guide-sec { padding: 10px 0 9px; border-bottom: 1px dashed currentColor; border-color: rgba(255,255,255,.12); }
.guide-sec.guide-last { border-bottom: 0; padding-bottom: 2px; }
.guide-sec h4 {
  font-family: "Jua", "Apple SD Gothic Neo", sans-serif; font-weight: 400;
  font-size: 14.5px; margin: 0 0 4px; opacity: .95;
}
.guide-sec p { margin: 0 0 3px; font-size: 13px; line-height: 1.62; opacity: .88; }
.guide-sec p:last-child { margin-bottom: 0; }
.guide-tip {
  margin-top: 5px !important; padding: 6px 9px; border-radius: 8px;
  background: rgba(255,255,255,.06); font-size: 12.5px !important; opacity: .8 !important;
}
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.modal-actions button { min-width: 42%; }
.modal-actions button {
  flex: 1; padding: 12px 8px; border-radius: 12px; font-size: 14px; font-weight: 800;
  cursor: pointer; border: 1px solid #33406e; background: #232c4d; color: #cfd6ef;
  word-break: keep-all; /* "진행 백업"이 "진 행"으로 갈라지지 않게 — 한글은 단어 단위로 꺾는다 */
}
.modal-actions.compact { gap: 6px; margin-top: 10px; }
.modal-actions.compact button { padding: 8px 6px; font-size: 12.5px; border-radius: 10px; min-width: 0; }
/* 취소 쪽은 제 글자 폭만 쓰고 남는 자리를 보상 버튼에 준다 — 반씩 나누면 보상 문구가
   긴 날(7일차)에만 두 줄이 되어 그날만 버튼이 커진다 */
.modal-actions.compact button:first-child { flex: 0 0 auto; padding: 8px 14px; }
.modal-actions.compact button.primary { white-space: nowrap; }
/* 광고 버튼은 제 줄을 갖는다 — 같은 줄에 끼면 보상 문구가 잘린다 */
.modal-actions.compact button.adwatch { flex: 0 0 100%; }
.modal-actions button.primary { background: linear-gradient(#7a5c22, #5d451a); border-color: #8a6a2f; color: #ffe8b0; }
.modal-actions button.adwatch { background: linear-gradient(#2f3a6a, #1d2446); border: 1.5px solid #d9a03a; color: #ffe8b0; }
body.skin-isekai .modal-actions button.adwatch { background: linear-gradient(#7d5532, #553820); border-color: #e0b060; color: #fff0d0; }
.modal-actions button.danger { background: #6b2727; border-color: #a03c3c; color: #ffd9d9; }
.modal-actions button:active { transform: scale(.97); }

/* 상점 */
/* 상자 카드는 다른 창의 판(gs-sec)과 같은 결 — 금테는 VIP 카드만 두른다(사용자) */
.shop-item {
  border: 1.5px solid #2c3760; border-radius: 12px; padding: 12px;
  background: #151b33;
  text-align: center; margin-bottom: 8px;
}
.shop-item .shop-title, .shop-hero .shop-title { font-size: 15px; font-weight: 900; color: #ffe27a; }
/* word-break: keep-all — 한글은 기본값이면 단어 한복판에서 끊긴다("장터/부터") */
.shop-item .shop-desc, .shop-hero .shop-desc {
  font-size: 12px; color: #b9c2e2; margin: 6px 0 10px; line-height: 1.5; word-break: keep-all;
}
.shop-hero .shop-desc span { display: block; }
.shop-item .shop-desc b, .shop-hero .shop-desc b { color: #ffd98a; }
/* 버튼 결은 강화·광고 버튼과 같게 — 초록·보라·파랑이 섞여 테마와 따로 놀았다(사용자) */
.shop-item button, .shop-hero button {
  width: 100%; padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 800;
  background: linear-gradient(#7a5d26, #4d3a18); color: #ffe8b0;
  border: 1px solid #c9973f; cursor: pointer; box-shadow: 0 2px 0 #2a1f0c;
  margin-top: 8px; /* 버튼이 여럿일 때 붙어 보이지 않게 */
}
.shop-owned { color: #8affc1; font-weight: 800; font-size: 13px; }
/* 한 번에 여러 개 — 같은 금빛의 테두리만(주 버튼 '열기'와 위계를 가른다) */
.shop-item button.shop-sub { background: #00000030; color: #ffd98a; box-shadow: none; }
/* 광고 — 무대의 광고 버튼(⚡2배속)과 같은 남색+금테, 이세계는 나무+금테 */
.shop-item button.shop-ad { background: linear-gradient(#2f3a6a, #1d2446); border: 1.5px solid #d9a03a; color: #ffe8b0; box-shadow: 0 2px 0 #0b0f22; }
body.skin-isekai .shop-item button.shop-ad { background: linear-gradient(#7d5532, #553820); border-color: #e0b060; color: #fff0d0; box-shadow: 0 2px 0 #2e1d0e; }
/* 오늘 몫을 다 쓴 버튼은 **사라지지 않고 꺼진 채로 남는다** — 자리가 통째로 비면
   카드가 고장 난 것처럼 보인다(사용자: "상자 열기 칸이 그대로 남아야 하는데"). */
.shop-item button.shop-off, .shop-hero button.shop-off {
  background: #2a3355; border-color: #3c4a80; color: #6f7ba4; cursor: default;
}
.shop-item button.shop-off small, .shop-hero button.shop-off small {
  display: block; font-size: 10.5px; font-weight: 700; margin-top: 2px; opacity: .85;
}
body.skin-isekai .shop-item button.shop-off { background: #3a2c1c; border-color: #6b5233; color: #9b8763; }
body.skin-neon .shop-item button.shop-off { background: #251340; border-color: #4a2b6b; color: #8a72b0; }


/* 상점 2판 — 세로로 쌓인 카드 셋은 스크롤 없이는 다 안 보였고, 정작 유료 상품(VIP)이
   맨 아래 있었다. 방치형 상점 관습대로 **추천 상품을 히어로로 위에**, 나머지는 2열 격자로. */
.shop-hero {
  /* 임시 VIP 카드는 줄이 넷(제목·혜택·마일리지·버튼)이라 아이콘을 가운데 두면 허공에 뜬다 */
  position: relative; display: flex; gap: 11px; align-items: flex-start;
  border: 2px solid #ffcf5a; border-radius: 14px; padding: 11px;
  background: linear-gradient(#3b2d4e, #241b33); margin-bottom: 10px;
}
.shop-hero .ribbon {
  /* 모달 본문이 세로 스크롤이라 카드 밖으로 내밀면 윗변이 잘린다 — 안쪽 모서리에 붙인다 */
  position: absolute; top: 7px; right: 8px; background: #ffcf5a; color: #3a2a08;
  font-size: 10.5px; font-weight: 900; padding: 2px 8px; border-radius: 8px;
}
.shop-ico {
  width: 60px; height: 60px; flex: 0 0 60px; border-radius: 13px; font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  background: #00000033; border: 1px solid #4a5578;
}
.shop-hero .body { flex: 1; min-width: 0; text-align: left; }
/* 아이콘은 제목 줄에 맞춘다 — 카드가 길어져도 '아이콘 + 제목' 이 한 덩어리로 읽힌다 */
.shop-hero .shop-ico { margin-top: 2px; }
/* 버튼은 카드 전체 폭의 한 줄로 내린다 — .body 안에 두면 아이콘(60px) 만큼 오른쪽으로
   밀려 카드 가운데가 아니다. 사용자가 두 번 "가운데 정렬" 을 말한 자리다. */
.shop-hero { flex-wrap: wrap; }
/* 신화 등급 칩 — 등급 자체가 주는 효과라 다른 옵션과 색을 갈라 둔다 */
.gear-chip.myth { background: #3a2f08; border-color: #ffd24a; color: #ffd24a; font-weight: 900; }
/* 전설 +10 = 신화 재료. MAX 로만 적으면 "여기서 끝"으로 읽힌다 */
.loc-tag.myth-next { background: #3a2f08; border-color: #ffd24a; color: #ffd24a; }
.shop-hero .vip-act { flex: 0 0 100%; text-align: center; }
/* 상자 카드의 버튼 한 개와 같은 폭(두 칸 격자의 한 칸) — 상점 버튼 폭을 맞춘다(사용자) */
.shop-hero .vip-act button { display: inline-block; margin: 7px 0 0; width: calc(50% - 12px); padding: 9px 4px; font-size: 12.5px; }
.shop-hero .shop-title { line-height: 1.35; }
.shop-hero .shop-desc { margin: 3px 0 7px; }
.shop-hero button {
  /* .body 가 text-align:left 이라 폭 auto 인 버튼은 왼쪽에 붙는다 — 손으로 가운데로 */
  width: auto; margin: 2px auto 0; display: block; padding: 8px 16px; font-size: 13.5px;
  background: linear-gradient(#f0bd48, #c8871f); border-color: #ffe27a; color: #3a2a08;
}
/* 임시 VIP (광고 마일리지) — 켜져 있는 동안은 카드 테두리가 살아 있다 */
.shop-hero.vip-on { border-color: #8affc1; box-shadow: 0 0 0 1px #8affc133 inset; }
.shop-hero .vip-left { font-size: 11px; font-weight: 800; color: #8affc1; margin-left: 3px; }
.vip-mile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #00000033; border: 1px solid #3c4a80; border-radius: 9px;
  padding: 4px 9px; margin: 0 0 7px; font-size: 11.5px; color: #b9c2e2;
}
.vip-mile b { font-size: 13px; font-weight: 900; color: #dfe6ff; }
.shop-hero button.shop-off small { display: block; font-size: 10px; font-weight: 700; opacity: .85; }
body.skin-isekai .vip-mile { background: #1d140833; border-color: #6b5233; color: #c9b48f; }
body.skin-isekai .vip-mile b { color: #f0e2c4; }
body.skin-neon .vip-mile { background: #25134033; border-color: #4a2b6b; color: #b39ddb; }

.shop-grid { display: flex; gap: 9px; align-items: stretch; }
.shop-grid .shop-item { flex: 1; min-width: 0; margin-bottom: 8px; display: flex; flex-direction: column; padding: 10px 9px; }
.shop-grid .shop-ico { margin: 0 auto 7px; }
.shop-grid .shop-desc { flex: 1; min-height: 40px; margin: 4px 0 6px; }
.shop-grid button { margin-top: 5px; padding: 9px 4px; font-size: 12.5px; }
/* 남은 횟수는 버튼 글씨가 아니라 카드 모서리 칩으로 — 버튼은 '행동'만 말하게 */
.shop-chip {
  position: absolute; top: 7px; right: 8px; background: #10152acc; border: 1px solid #3c4a80;
  color: #b9c2e2; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 7px;
}
.shop-item { position: relative; }
/* 보유 수는 아이콘 어깨에 — 남은 횟수 칩(.shop-chip)을 걷어낸 자리다.
   아이콘 밖으로 조금 나와야 '상자 위에 붙은 수'로 읽힌다. */
.shop-ico { position: relative; }
.shop-own {
  position: absolute; top: -7px; right: -9px;
  background: #ffd98a; color: #2a1f08; border: 1.5px solid #10152a;
  font-size: 11px; font-weight: 900; line-height: 1;
  padding: 3px 6px; border-radius: 9px; box-shadow: 0 2px 6px #0009;
}

/* ===== 상자 여러 개 개봉 결과 ===== */
.bulk-sum {
  text-align: center; font-size: 13px; line-height: 1.7; margin-bottom: 9px;
  padding-bottom: 8px; border-bottom: 1px dashed #33406e;
}
.bulk-list { display: flex; flex-direction: column; gap: 5px; }
.bulk-row {
  display: flex; align-items: center; gap: 8px;
  background: #00000026; border-radius: 9px; padding: 6px 9px;
}
.bulk-ico { font-size: 17px; flex: 0 0 auto; }
.bulk-name { font-size: 12.5px; font-weight: 800; flex: 0 0 auto; }
.bulk-fx { font-size: 11.5px; color: #9aa4c8; margin-left: auto; text-align: right; }

body.skin-isekai .shop-own { background: #e8c98a; border-color: #2b1f13; color: #2b1f13; }
body.skin-isekai .bulk-sum { border-bottom-color: #55402a; }
body.skin-isekai .bulk-fx { color: #b7a385; }
body.skin-neon .shop-own { background: #58e0ff; border-color: #12071f; color: #0a2030; }
body.skin-neon .bulk-sum { border-bottom-color: #3d2359; }
body.skin-neon .bulk-fx { color: #b39ddb; }
body.skin-isekai .shop-hero { background: linear-gradient(#4a3a18, #2f2410); }
body.skin-isekai .shop-ico { border-color: #8a6a2f; }
body.skin-isekai .shop-chip { background: #1d1408cc; border-color: #6b5233; color: #c9b48f; }

/* ===== 광고 오버레이 ===== */
#adOverlay {
  position: fixed; inset: 0; z-index: 200;
  background: #000d; display: flex; align-items: center; justify-content: center;
}
.ad-fake {
  width: min(80vw, 340px); border-radius: 16px; overflow: hidden;
  background: #10131f; border: 1px solid #3c4a80;
  text-align: center; padding: 0 0 16px; position: relative;
}
.ad-fake-tag { position: absolute; top: 8px; left: 8px; background: #ffcf4d; color: #422; font-size: 10px; font-weight: 900; border-radius: 6px; padding: 2px 6px; }
.ad-fake-art { font-size: 64px; padding: 36px 0 12px; background: linear-gradient(#1c2340,#10131f); }
#adOverlayLabel { font-size: 15px; font-weight: 800; color: #ffe27a; margin-top: 10px; }
#adOverlay.ad-loading .ad-fake-note { display: none; }   /* 앱: 광고 화면이 열리기 전까지만 덮는다(ads.js loadingCover) */
.ad-fake-note { font-size: 11px; color: #7c86ab; margin-top: 6px; }

/* ===== 토스트 ===== */
#toastRoot {
  position: fixed; left: 50%; bottom: 12dvh; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; z-index: 150; pointer-events: none;
  width: max-content; max-width: 86vw;
}
.toast {
  background: #10152acc; border: 1px solid #3c4a80; border-radius: 20px;
  color: #ffe8b0; font-size: 13px; font-weight: 700;
  padding: 9px 16px; text-align: center;
  animation: toast-in 3s ease forwards;
  backdrop-filter: blur(4px);
}
@keyframes toast-in {
  0% { opacity: 0; transform: translateY(8px); }
  8%, 84% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ===== 그래픽 스킨 선택 ===== */
.skin-pick {
  display: block; width: 100%; text-align: left; position: relative;
  background: #141a30; border: 1.5px solid #2c3a63; border-radius: 12px;
  color: #dbe2f4; padding: 12px 40px 12px 14px; margin-bottom: 9px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.skin-pick b { display: block; font-size: 15px; color: #ffe8b0; margin-bottom: 3px; }
.skin-pick small { display: block; font-size: 12px; color: #93a0c6; line-height: 1.5; }
.skin-pick.on { border-color: #ffcf5a; background: #1c2340; }
.skin-check {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  color: #ffcf5a; font-size: 20px; font-weight: 900;
}

/* ===== 이세계 스킨 UI — 무대 일러스트에 맞춘 따뜻한 판타지(나무·양피지·금장) ===== */
body.skin-isekai { background: #150d07; }
body.skin-isekai #app { background: #241a10; }
body.skin-isekai #topbar { background: #332516; border-bottom-color: #6b5233; }
body.skin-isekai .icon-btn { background: #4a3524; border-color: #7a5c34; }
body.skin-isekai #sheet { background: #2b1f13; border-top-color: #6b5233; }
body.skin-isekai .tab-btn { background: #3a2a1b; color: #bda884; border-color: #6b5233; }
body.skin-isekai .tab-btn.active { background: #574029; color: #ffe0a3; }
body.skin-isekai .panel { background: #33261a; }
body.skin-isekai .card { background: #3a2c1c; border-color: #6b5233; }
body.skin-isekai .card .desc { color: #c9b48f; }
body.skin-isekai .card .desc b { color: #ffd98a; }
body.skin-isekai .card .name small { color: #bda884; }
/* 무대·시트는 나무·금색인데 칩·모달·토스트·구매 토글만 클래식 남색이 남아 있어서
   화면 안에 두 앱이 섞인 것처럼 보였다. 같은 팔레트로 맞춘다.
   (테두리 색은 상태 신호라 그대로 둔다 — 준비 완료 민트·주문 주황·배달 파랑) */
body.skin-isekai .goal-chip,
body.skin-isekai .toast { background: rgba(38, 26, 15, .86); border-color: #6b5233; }
body.skin-isekai .amt-toggle { background: #4a3524; border-color: #8a6a2f; color: #ffe0a3; }
body.skin-isekai .modal-box { background: #2b1f13; border-color: #6b5233; }
body.skin-isekai #modalBody { color: #e2d3b4; }
body.skin-isekai #modalBody .stat-row { border-bottom-color: #55402a; }
body.skin-isekai .modal-actions button { background: #3a2c1c; border-color: #6b5233; color: #e8d8b4; }
body.skin-isekai .set-tile, body.skin-isekai .set-row { background: #3a2c1c; border-color: #6b5233; color: #e8d8b4; }
body.skin-isekai .shop-item { background: #33261a; border-color: #55402a; }
body.skin-isekai .skin-pick { background: #33261a; border-color: #6b5233; color: #e2d3b4; }
body.skin-isekai .skin-pick small { color: #bda884; }
body.skin-isekai .skin-pick.on { border-color: #ffcf5a; background: #4a3524; }
/* 도구 창도 같은 팔레트로 — 남색 카드가 나무색 모달 안에 남아 있으면 딴 앱처럼 보인다 */
body.skin-isekai .gear-peek { background: #3a2c1c; }
body.skin-isekai .gear-peek-tag { background: #4a3524; color: #c9b48f; }
body.skin-isekai .gear-pick { background: #33261a; border-color: #55402a; }
body.skin-isekai .gear-pick.on { border-color: #8affc1; background: #423020; }
body.skin-isekai .gear-cmp { background: #33261a; border-color: #6b5233; }
body.skin-isekai .gear-stat .k { color: #bda884; }
body.skin-isekai .gear-stat .v { color: #e8d8b4; }
body.skin-isekai .gear-stat.main .k { color: #d8c8a6; }
body.skin-isekai .gear-chip { border-color: #6b5233; color: #c9b48f; }
body.skin-isekai .gear-chip.main { border-color: #8a6a2f; color: #ffd98a; }
body.skin-isekai .gear-stone-hd { color: #bda884; }
body.skin-isekai .gear-stone-hd b { color: #e8d8b4; }

.hidden { display: none !important; }

/* 잠긴 스킨 줄 — 감추지 않고 조건을 적어 보여 준다(다음 전수를 할 이유가 된다) */
.skin-pick.locked { opacity: .55; cursor: default; }
.skin-pick.locked b { color: #9aa6cf; }
.skin-pick:disabled { cursor: default; }
.skin-note {
  margin-top: 8px; font-size: 11.5px; color: #8f9ac2; line-height: 1.6;
  text-align: center; word-break: keep-all;
}
body.skin-isekai .skin-pick.locked b { color: #bda884; }
body.skin-isekai .skin-note { color: #bda884; }

/* ── 네온 시티 DOM 테마 ────────────────────────────────────────────────────
   무대만 네온이고 하단 시트·카드·모달은 클래식 남색 그대로였다 — 화면 안에 두 앱이
   섞여 보인다(이세계에는 팔레트를 맞춰 줬는데 네온만 빠져 있었다). 무대의 자주빛 밤과
   분홍·청록 발광에 맞춘다. **테두리 색이 상태 신호인 것은 그대로 둔다**
   (준비 완료 민트·주문 주황·배달 파랑·추천 금색) — 이세계와 같은 원칙. */
body.skin-neon { background: #0a0416; }
body.skin-neon #app { background: #150a28; }
body.skin-neon #topbar { background: #12071f; border-bottom-color: #4a2b6b; }
body.skin-neon .icon-btn { background: #2a1245; border-color: #5c3a8a; }
body.skin-neon .gold-main { color: #ff9ad8; }
body.skin-neon #sheet { background: #170c2a; border-top-color: #4a2b6b; }
body.skin-neon .tab-btn { background: #22103a; color: #a98fd0; border-color: #4a2b6b; }
body.skin-neon .tab-btn.active { background: #3a1d5e; color: #58e0ff; }
body.skin-neon .panel { background: #1c0f33; }
body.skin-neon .card { background: #251340; border-color: #4a2b6b; }
body.skin-neon .card .name { color: #f2e6ff; }
body.skin-neon .card .desc { color: #b39ddb; }
body.skin-neon .card .desc b { color: #58e0ff; }
body.skin-neon .card .name small { color: #a98fd0; }
body.skin-neon .card .tile { background: linear-gradient(#3a1d5e, #26103f); border-color: #6b3fa0; }
body.skin-neon .card .tile .lv { background: #12071f; border-color: #7a4bb8; color: #ff9ad8; }
body.skin-neon .mile-bar i { background: linear-gradient(90deg, #ff3d9a, #58e0ff); }
body.skin-neon .amt-row .gps { color: #b39ddb; }
body.skin-neon .amt-row .gps b { color: #58e0ff; }
body.skin-neon .amt-toggle { background: #2a1245; border-color: #7a4bb8; color: #ff9ad8; }
body.skin-neon .goal-chip,
body.skin-neon .toast { background: rgba(20, 8, 38, .88); border-color: #5c3a8a; color: #f2e6ff; }
body.skin-neon .modal-box { background: #1c0f33; border-color: #5c3a8a; }
body.skin-neon .modal-box h2 { color: #ff9ad8; }
body.skin-neon #modalBody { color: #e4d6f7; }
body.skin-neon #modalBody .hl { color: #58e0ff; }
body.skin-neon #modalBody .stat-row { border-bottom-color: #3d2359; }
body.skin-neon .modal-actions button { background: #251340; border-color: #4a2b6b; color: #e4d6f7; }
body.skin-neon .set-tile, body.skin-neon .set-row { background: #251340; border-color: #4a2b6b; color: #e4d6f7; }
body.skin-neon .shop-item { background: linear-gradient(#251340, #1a0d30); }
body.skin-neon .shop-hero { background: linear-gradient(#3a1d5e, #22103a); }
body.skin-neon .shop-ico { border-color: #6b3fa0; }
body.skin-neon .shop-chip { background: #12071fcc; border-color: #4a2b6b; color: #b39ddb; }
body.skin-neon .skin-pick { background: #1c0f33; border-color: #4a2b6b; color: #e4d6f7; }
body.skin-neon .skin-pick small { color: #a98fd0; }
body.skin-neon .skin-pick.on { border-color: #ff3d9a; background: #2a1245; }
body.skin-neon .skin-pick.locked b { color: #a98fd0; }
body.skin-neon .skin-note { color: #a98fd0; }
body.skin-neon .gear-peek { background: #251340; }
body.skin-neon .gear-peek-tag { background: #2a1245; color: #b39ddb; }
body.skin-neon .gear-pick { background: #1c0f33; border-color: #3d2359; }
body.skin-neon .gear-cmp { background: #1c0f33; border-color: #4a2b6b; }
body.skin-neon .gear-stat .k { color: #b39ddb; }
body.skin-neon .gear-stat .v { color: #e4d6f7; }
body.skin-neon .gear-stat.main .v { color: #58e0ff; }
body.skin-neon .gear-chip { border-color: #4a2b6b; color: #b39ddb; }
body.skin-neon .gear-chip.main { border-color: #7a4bb8; color: #58e0ff; }
body.skin-neon .gear-stone-hd { color: #b39ddb; }
body.skin-neon .gear-stone-hd b { color: #e4d6f7; }


/* ===== 따라하기 가이드 (코치마크) =====
   z-index 는 모달(100)보다 **아래**다 — 안내 창이 뜨면 가이드가 그 밑으로 들어가야
   창을 못 누르는 일이 없다. 대신 창이 떠 있는 동안은 .busy 로 통째로 감춘다. */
/* 뿌리는 화면 전체를 덮으므로 **반드시 클릭을 흘려보내야** 한다 — 안 그러면
   구멍을 내 놓고도 뿌리가 먼저 클릭을 먹어 아무 버튼도 안 눌린다(실제로 그랬다). */
#coachRoot { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.coach-shade, #coachTip { pointer-events: auto; }
#coachRoot.hidden { display: none; }
#coachRoot.busy { visibility: hidden; }
/* 가림막 넉 장이 구멍 하나를 남긴다. 구멍은 진짜 빈자리라 그 아래 버튼이 그대로 눌린다. */
.coach-shade { position: absolute; background: rgba(4,6,14,.74); }
#coachRing {
  position: absolute; pointer-events: none; border-radius: 12px;
  border: 2px solid #ffd98a;
  animation: coachPulse 1.3s ease-in-out infinite;
}
@keyframes coachPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,217,138,.20), 0 0 16px rgba(255,217,138,.45); }
  50%     { box-shadow: 0 0 0 8px rgba(255,217,138,.08), 0 0 26px rgba(255,217,138,.75); }
}
#coachTip {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(86vw, 340px);
  background: #1d2445; border: 1px solid #ffd98a55; border-radius: 14px;
  padding: 13px 14px 11px; box-shadow: 0 14px 40px #000b;
  word-break: keep-all;
}
#coachTitle {
  font-family: "Jua", "Apple SD Gothic Neo", sans-serif; font-weight: 400;
  font-size: 14px; color: #ffd98a; margin-bottom: 5px;
}
#coachText { font-size: 13.5px; line-height: 1.6; color: #e6ecff; }
#coachText b { color: #ffe27a; }
#coachNeed {
  margin-top: 8px; padding: 6px 10px; border-radius: 9px;
  background: rgba(255,217,138,.12); border: 1px dashed #ffd98a66;
  font-size: 12.5px; color: #ffe27a; text-align: center;
}
#coachNeed.hidden { display: none; }
#coachBtns { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }
#coachBtns button {
  font: inherit; font-size: 12.5px; padding: 7px 14px; border-radius: 10px; cursor: pointer;
  background: #2a3355; border: 1px solid #3c4a80; color: #b9c3e4;
}
#coachBtns #coachNext { background: linear-gradient(#7a5c22, #5d451a); border-color: #8a6a2f; color: #ffe8b0; font-weight: 700; }
#coachBtns #coachNext.hidden { display: none; }

body.skin-isekai #coachTip { background: #2b1f13; border-color: #b58a4a66; }
body.skin-isekai #coachText { color: #e2d3b4; }
body.skin-isekai #coachBtns button { background: #3a2c1c; border-color: #6b5233; color: #e8d8b4; }
body.skin-neon #coachTip { background: #1c0f33; border-color: #ff9ad855; }
body.skin-neon #coachTitle { color: #ff9ad8; }
body.skin-neon #coachText { color: #e4d6f7; }
body.skin-neon #coachText b { color: #58e0ff; }
body.skin-neon #coachRing { border-color: #58e0ff; }
body.skin-neon #coachNeed { background: rgba(88,224,255,.12); border-color: #58e0ff66; color: #58e0ff; }
body.skin-neon #coachBtns button { background: #251340; border-color: #4a2b6b; color: #e4d6f7; }


/* 목표 칩이 데려다 놓은 칸 — 크기는 건드리지 않는다(따라하기 가이드가 자리를 잰다) */
@keyframes goalFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 138, 0); }
  18%, 62% { box-shadow: 0 0 0 3px rgba(255, 217, 138, .5), 0 0 20px rgba(255, 217, 138, .3); }
}
.card.goal-flash { animation: goalFlash 1.5s ease; border-color: #ffd98a; }
body.skin-neon .card.goal-flash { border-color: #58e0ff; }

/* ===== 볼륨 ===== */
.vol-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.vol-row + .vol-row { border-top: 1px dashed #33406e; }
.vol-name { font-size: 13.5px; flex: 0 0 82px; }
.vol-row input[type=range] {
  flex: 1; min-width: 0; height: 22px; accent-color: #ffd98a; cursor: pointer;
}
.vol-pct { flex: 0 0 42px; text-align: right; font-size: 12.5px; color: #ffe27a; }
.vol-note { font-size: 11.5px; color: #8f9ac2; text-align: center; margin-top: 8px; }
body.skin-isekai .vol-row + .vol-row { border-top-color: #55402a; }
body.skin-isekai .vol-row input[type=range] { accent-color: #e8c98a; }
body.skin-isekai .vol-pct { color: #ffd98a; }
body.skin-neon .vol-row + .vol-row { border-top-color: #3d2359; }
body.skin-neon .vol-row input[type=range] { accent-color: #58e0ff; }
body.skin-neon .vol-pct { color: #58e0ff; }

/* ===== 도구 등급 타일 (2026-10-07) =====
   도구는 이모지 넷(🔪🍳🧂🎒)이라 일반·전설이 같은 그림이었다(사용자: "뭐가 뭔지 모르겠다").
   그림은 그대로 두고 **판**이 등급을 말한다 — 테두리 색·굵기, 바탕 빛, 반짝임, 아래 등급 띠. */
.gtile {
  --s: 42px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--s); height: var(--s); border-radius: 10px; flex-shrink: 0; overflow: hidden;
  font-size: calc(var(--s) * .56); line-height: 1; padding-bottom: calc(var(--s) * .18);
  box-sizing: border-box; vertical-align: middle;
  border: 2px solid var(--tier, #5d6684); background: #20263d;
}
.gtile .gt-name {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: calc(var(--s) * .22); font-weight: 900; line-height: 1.32; letter-spacing: -.02em;
  background: var(--tier); color: #12141f; font-style: normal;
}
.gtile .gt-plus {
  position: absolute; right: 2px; top: 1px; font-size: calc(var(--s) * .24); font-weight: 900;
  color: #ffe08a; text-shadow: 0 0 2px #000, 0 0 2px #000; font-style: normal;
}
.gtile.t0 { border-color: #5d6684; background: #222839; }
.gtile.t0 .gt-name { background: #5d6684; color: #e3e7f5; }
.gtile.t1 { background: radial-gradient(circle at 50% 38%, #2b6a48 0, #182a2a 72%); }
.gtile.t2 { background: radial-gradient(circle at 50% 38%, #2a5ca8 0, #15203e 72%);
  box-shadow: 0 0 7px #4a9eff77; }
.gtile.t3 { border-width: 2.5px;
  background: radial-gradient(circle at 50% 38%, #7a3fb6 0, #1f1638 72%);
  box-shadow: 0 0 11px #c780faaa, inset 0 0 8px #c780fa66; }
.gtile.t4 { border: 3px double #ffd24a;
  background: radial-gradient(circle at 50% 38%, #9a7414 0, #2c1f05 74%);
  box-shadow: 0 0 14px #ffd24acc, inset 0 0 10px #ffd24a77; }
/* 반짝이 — 희귀 하나 · 전설 둘 · 신화 셋 */
.gtile.t2::before, .gtile.t3::before, .gtile.t4::before {
  position: absolute; left: 3px; top: 2px; font-size: calc(var(--s) * .19); color: #fff;
  text-shadow: 0 0 4px var(--tier); line-height: 1;
}
.gtile.t2::before { content: '✦'; }
.gtile.t3::before { content: '✦✦'; }
.gtile.t4::before { content: '✦✦✦'; color: #fff6c8; }
/* 전설·신화는 빛이 판을 훑고 지나간다 — 정지 화면에서도 "다르다"가 보이게 */
.gtile.t3::after, .gtile.t4::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, #ffffff55, transparent);
  transform: skewX(-18deg); animation: gtSheen 2.8s ease-in-out infinite;
}
.gtile.t4::after { animation-duration: 2s; background: linear-gradient(100deg, transparent, #fff3b088, transparent); }
@keyframes gtSheen { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.gtile.sm { --s: 38px; }
.gtile.lg { --s: 56px; }
.gtile.xl { --s: 70px; border-radius: 14px; }
.card .big-emoji.gt-wrap { width: 46px; }
/* 슬롯 상세 — 판을 왼쪽에 세우고 이름·옵션을 오른쪽에 */
.gp-row { display: flex; gap: 10px; align-items: flex-start; }
.gp-body { flex: 1; min-width: 0; }
.gear-pick { display: flex; gap: 9px; align-items: center; }
.gear-pick .gp-body .gear-peek-name { margin-bottom: 2px; }
/* 등급 이름은 등급 색으로 — 대괄호 안 글자까지 같은 흰색이면 판을 봐야만 안다 */
.gear-peek-name b .gt-txt, .card .name b .gt-txt { color: var(--tier); }
.gtile.xs { --s: 30px; border-radius: 8px; }
.gtile.bare { padding-bottom: 0; }

/* ===== 강화 연출 — 숫돌 조각이 빨려 들어가 빛이 모인다 (모든 도구에 맞게: 망치질은 칼·팬에만 맞았다) ===== */
.enh-fx { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,18,.72); animation: enhIn .18s ease; }
@keyframes enhIn { from { opacity: 0; } }
.enh-card { width: min(330px, 88vw); background: #1c2340; border: 1px solid #3c4a80; border-radius: 16px;
  padding: 14px 14px 12px; text-align: center; box-shadow: 0 10px 40px #000a; }
body.skin-isekai .enh-card { background: #2e2318; border-color: #6b5233; }
.enh-title { font-size: 14px; color: #e8ecff; }
.enh-title small { display: block; color: #8f9ac2; font-size: 12px; margin-top: 2px; }
.enh-stage { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; }
.enh-tile { position: relative; z-index: 2; animation: enhJit 2s ease-in; }
@keyframes enhJit { 0%,40% { transform: none; } 60% { transform: translate(1px,-1px) rotate(-2deg); }
  75% { transform: translate(-1px,1px) rotate(2deg); } 90% { transform: translate(1px,0) rotate(-1deg) scale(1.04); } }
.enh-glow { position: absolute; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9a8 0%, #ffd24a66 35%, transparent 70%);
  animation: enhGlow 2s ease-in forwards; opacity: 0; }
@keyframes enhGlow { to { opacity: 1; transform: scale(1.6); } }
.enh-stone { position: absolute; font-style: normal; font-size: 20px; z-index: 3; opacity: 0;
  animation: enhStone 1.5s cubic-bezier(.5,0,.9,.5) var(--d) forwards; }
@keyframes enhStone { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
  15% { opacity: 1; } 100% { opacity: 0; transform: translate(0,0) scale(.3) rotate(260deg); } }
.enh-burst { position: absolute; inset: 0; pointer-events: none; }
.enh-fx.ok .enh-burst { background: radial-gradient(circle, #fffbe8 0%, #ffe27a88 22%, transparent 55%); animation: enhFlash .6s ease-out forwards; }
@keyframes enhFlash { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } }
.enh-fx.ok .enh-tile { animation: enhPop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes enhPop { from { transform: scale(.7); } to { transform: scale(1); } }
.enh-fx.ok .enh-glow { animation: none; opacity: .9; transform: scale(1.8); }
.enh-fx.fail .enh-glow { animation: none; opacity: 0; transition: opacity .3s; }
.enh-fx.fail .enh-tile { animation: enhShake .45s; filter: grayscale(.6) brightness(.85); }
@keyframes enhShake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.enh-fx.fail .enh-burst { background: radial-gradient(circle, #9a9aa688 0%, transparent 60%); animation: enhSmoke .9s ease-out forwards; }
@keyframes enhSmoke { from { opacity: .9; transform: translateY(0) scale(.6); } to { opacity: 0; transform: translateY(-30px) scale(1.4); } }
.enh-res { min-height: 40px; }
/* 합성 연출 — 재료 셋이 가운데로 모여 하나가 된다 */
.fz-stage { position: relative; height: 150px; }
.fz-stage .enh-glow { left: 50%; top: 50%; margin: -45px 0 0 -45px;
  background: radial-gradient(circle, #fff6d8 0%, color-mix(in srgb, var(--tier) 55%, transparent) 38%, transparent 70%); }
.fz-mat { position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%) translateX(var(--x)); animation: fzIn 1.7s cubic-bezier(.55,0,.85,.4) var(--d) forwards; }
@keyframes fzIn {
  0% { transform: translate(-50%, -50%) translateX(var(--x)) scale(1) rotate(0); opacity: 1; }
  25% { transform: translate(-50%, -50%) translateX(calc(var(--x) * 1.08)) translateY(-6px) scale(1.04); }
  85% { opacity: 1; }
  100% { transform: translate(-50%, -50%) translateX(0) scale(.35) rotate(300deg); opacity: 0; } }
.fz-out { position: absolute; left: 50%; top: 50%; z-index: 3; opacity: 0; transform: translate(-50%, -50%) scale(.4); }
.fuse-fx.ok .fz-out { animation: fzOut .5s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes fzOut { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.fuse-fx.ok .fz-mat { display: none; }
.fuse-fx .enh-btns .enh-ok { flex: 1; }
.fz-name { font-family: "Jua", sans-serif; font-size: 21px; margin: 2px 0 6px; animation: enhPop .4s; }
.fz-stats { text-align: left; background: #0000002a; border-radius: 10px; padding: 4px 9px; margin-top: 4px; }

.enh-big { font-family: "Jua", sans-serif; font-size: 24px; color: #ffe27a; margin: 2px 0 8px; animation: enhPop .4s; }
.enh-fx.fail .enh-big { color: #b8bfd8; }
.enh-row { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 8px;
  font-size: 13px; color: #c9d0e4; transition: background .08s; }
.enh-row b { color: #fff; }
.enh-row.main b { color: #ffe27a; }
.enh-row.kind b { color: #8ed0ff; }
.enh-row.lit { background: #ffffff1f; }
.enh-row.hit { background: #4de08a26; box-shadow: inset 0 0 0 1px #4de08a88; animation: enhPop .35s; }
.enh-row.hit b { color: #9cf08a; }
.enh-ms-hd { margin: 8px 0 3px; font-size: 13px; color: #ffd98a; }
.enh-awaken { margin: 6px 0 2px; font-size: 13.5px; color: #ffd24a; font-weight: 800; }
.enh-note { font-size: 12.5px; color: #c9d0e4; margin: 3px 0; }
.enh-note.good b, .enh-note.good { color: #9cf08a; }
.enh-ok { margin-top: 10px; width: 100%; }
.enh-hint { width: 100%; text-align: center; font-size: 11.5px; color: #c9b48f; margin-top: 6px; }
/* 강화 확인 창 — 도구 상세(모달 100) 위, 강화 연출(110) 아래 */
.enh-ask { position: fixed; inset: 0; z-index: 105; display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,18,.62); animation: enhIn .15s ease; }
.enh-ask .enh-title { font-family: "Jua", sans-serif; font-size: 19px; color: #fff; margin-bottom: 10px; }
.enh-ask .ask-row { display: flex; gap: 11px; align-items: center; text-align: left; margin-bottom: 8px; }
.enh-ask .ask-plus { font-size: 14px; color: #c9d0e4; }
.enh-ask .ask-plus b { color: #ffe27a; font-size: 17px; }
.enh-ask .gear-stats { text-align: left; background: #0000002a; border-radius: 10px; padding: 4px 9px; }
.enh-ask .gear-stat small { color: #8f9ac2; font-weight: 600; }
.enh-ask .ask-btns { display: flex; gap: 8px; margin-top: 12px; }
.enh-ask .ask-btns .buy-btn { flex: 1; padding: 10px 0; font-size: 14px; }
.enh-ask .ask-no, .enh-fx .ask-no, .gs-open .ask-no { background: #2a3256; border-color: #3c4a80; color: #c9d0e4; box-shadow: none; }
.enh-ask .gear-stat .k, .gs-sec .gear-stat .k { white-space: nowrap; }
.enh-btns { display: flex; gap: 8px; margin-top: 10px; }
.enh-btns .buy-btn { flex: 1; padding: 9px 0; font-size: 13.5px; margin-top: 0; width: auto; }
.enh-btns .enh-ok { flex: 0 0 34%; }
body.skin-isekai .enh-fx .ask-no, body.skin-isekai .gs-open .ask-no,
body.skin-isekai .enh-ask .ask-no { background: #3f3020; border-color: #6b5233; color: #e8d8b4; }
body.skin-isekai .enh-ask .enh-card { background: #2e2318; border-color: #6b5233; }
/* 도구 상세의 칸 — 장착 카드(gear-peek)와 같은 결의 판 */
.gs-sec { border: 1.5px solid #2c3760; border-radius: 12px; background: #151b33; padding: 8px 11px 10px; margin-bottom: 8px; }
.gs-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 12.5px; font-weight: 800; color: #ffd98a; margin-bottom: 4px; }
.gs-hd > span:last-child:not(:first-child) { color: #8f9ac2; font-weight: 700; font-size: 11.5px; }
.gs-own { white-space: nowrap; }
.gear-stat .v.wrap { white-space: normal; text-align: right; word-break: keep-all; }
.gear-stat .v.soft { color: #9aa6cf; font-weight: 600; font-size: 12px; }
.gear-stat.on .k { color: #fff; font-weight: 800; }
.gs-tag { font-style: normal; font-size: 10px; font-weight: 800; color: #8affc1; border: 1px solid #8affc166;
  border-radius: 6px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
.gs-enh { width: 100%; margin-top: 9px; padding: 10px 0; font-size: 14px; }
.gs-empty { color: #8f9ac2; font-size: 12.5px; text-align: center; padding: 8px 0 2px; }
.gs-empty small { display: block; margin-top: 2px; font-size: 11px; color: #6f7aa0; }
.gs-sec .gear-pick:last-child { margin-bottom: 0; }
/* 가방 도구를 누르면 바로 아래에 펼쳐지는 비교 판 */
/* 위 카드와 한 판으로 읽혀야 한다 — 테두리 색·굵기·왼쪽 등급 띠를 카드와 똑같이(위아래가 달라 보였다) */
.gs-open { margin: -2px 0 8px; padding: 8px 9px 9px; border: 1.5px solid #8affc1; border-left: 4px solid var(--tier, #8affc1); border-top: 0;
  border-radius: 0 0 10px 10px; background: #111a2e; }
.gs-open .gear-stats { margin: 4px 0 8px; }
.gs-open .gear-peek-act { margin-bottom: 0; }
/* 판 폭을 꽉 채우면 답답하다(사용자) — 버튼은 가운데로 모으고 사이를 띄운다 */
.gs-open .gear-peek-act.two { justify-content: center; gap: 12px; margin-top: 12px; }
.gs-open .gear-peek-act.two > button { flex: 0 0 38%; padding: 8px 0; font-size: 13px; }
.gs-open .gs-dis { display: block; width: auto; min-width: 38%; margin: 9px auto 2px; padding: 6px 14px; font-size: 12px; }
.gs-sec .gear-pick.on, body.skin-isekai .gs-sec .gear-pick.on { border-radius: 10px 10px 0 0; margin-bottom: 0; border-left-color: var(--tier, #8affc1); }
body.skin-isekai .gs-open { background: #2a1f14; }
body.skin-isekai .gs-sec { background: #33261a; border-color: #55402a; }
body.skin-neon .gs-sec { background: #1c0f33; border-color: #3d2359; }


/* ===== 화면 속 화살표 — 금빛 겹화살(D안). 빨간 원은 게임 그림과 안 맞았다(사용자) ===== */
#hotLayer { position: absolute; inset: 0; pointer-events: none; z-index: 19; }
.hot-arrow { position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  width: 38px; height: 38px; padding: 0; border: 0; cursor: pointer;
  /* 밝은 바닥(이세계)에서도 보이게 은은한 그늘을 깐다 — 테두리 원은 두지 않는다 */
  background: radial-gradient(circle, rgba(40,22,6,.38) 0%, rgba(40,22,6,.16) 45%, transparent 70%);
  display: flex; align-items: center; justify-content: center; animation: hotBob 1.2s ease-in-out infinite; }
.hot-arrow::after { content: ''; position: absolute; inset: -8px; }   /* 손가락으로 누르기 쉽게 */
.hot-chev { width: 26px; height: 28px; filter: drop-shadow(0 0 4px #ffd25acc); animation: hotShine 1.2s ease-in-out infinite; }
.hot-arrow.menu { width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle, #fff7df 0%, #fdf0cf 58%, #e6b85a 62%, #e6b85a00 76%); }
.hot-arrow.menu img { width: 30px; height: 30px; }
.hot-arrow.menu .hot-chev { position: absolute; left: 50%; top: -20px; width: 20px; height: 22px; transform: translateX(-50%); }
@keyframes hotBob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
@keyframes hotShine { 0%, 100% { filter: drop-shadow(0 0 3px #ffd25a99); } 50% { filter: drop-shadow(0 0 7px #ffe27a) brightness(1.15); } }
.hot-pop { position: absolute; pointer-events: auto; z-index: 2; background: #1c2340f2; border: 2px solid #e0a93a;
  border-radius: 12px; padding: 9px 11px; color: #ffe8c0; font-size: 13px; box-shadow: 0 6px 18px #000a;
  animation: enhIn .15s ease; }
body.skin-isekai .hot-pop { background: #2e2318f2; }
.hot-pop::before { content: ''; position: absolute; left: var(--ax, 50%); top: -9px; transform: translateX(-50%);
  border: 8px solid transparent; border-top: 0; border-bottom-color: #e0a93a; }
.hot-pop .hp-title { font-size: 15px; color: #fff; font-family: "Jua", sans-serif; }
.hot-pop .hp-title b { color: #ffd98a; font-weight: normal; }
.hot-pop .hp-lines { margin-top: 4px; color: #e8cfa0; font-size: 12.5px; line-height: 1.45; }
.hot-pop .up { color: #9cf08a; }
.hot-pop .hp-buy { width: 100%; margin-top: 8px; }
.hot-pop .hp-sub { margin-top: 5px; font-size: 11px; color: #b39a78; text-align: center; }

/* ===== 금화 — 💰(달러 표시 돈주머니) 대신 그린 금화(icons.js coin) ===== */
.coin-i { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.17em;
  background: var(--coin) center / contain no-repeat; }
.no-coin .coin-i { width: auto; height: auto; background: none; }
.no-coin .coin-i::before { content: '💰'; }

/* ===== 광고 버튼 — 보라 네온은 무대와 따로 놀았다. 기본은 남색+금테, 이세계는 나무+금테 ===== */
.ad-btn { border: 1.5px solid #d9a03a; background: linear-gradient(#2f3a6a, #1d2446); color: #ffe8b0;
  box-shadow: 0 2px 0 #0b0f22, 0 0 10px #ffd25a2e; }
body.skin-isekai .ad-btn { border-color: #e0b060; background: linear-gradient(#7d5532, #553820); color: #fff0d0;
  box-shadow: 0 2px 0 #2e1d0e, 0 0 10px #ffd25a2e; }

.hot-pop.up::before { top: auto; bottom: -9px; border-bottom: 0; border-top: 8px solid #e0a93a; border-left: 8px solid transparent; border-right: 8px solid transparent; }

/* ===== 연출 층 (game.js fx*) — 신메뉴 완성·가격 도약·설비 구매·레벨업 ===== */
#fxLayer { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.fx-burst { position: absolute; width: 0; height: 0; }
.fx-burst .fx-ring {
  position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid #ffe28a; box-shadow: 0 0 12px #ffd24a; opacity: 0;
  animation: fxRing .55s ease-out forwards;
}
.fx-burst.big .fx-ring { left: -60px; top: -60px; width: 120px; height: 120px; border-width: 4px; animation-duration: .8s; }
.fx-burst .fx-star {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  background: radial-gradient(circle, #fff7d0 0 30%, #ffd24a 31% 60%, transparent 62%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0; animation: fxStar .75s cubic-bezier(.2,.8,.3,1) forwards;
}
.fx-burst.big .fx-star { width: 16px; height: 16px; left: -8px; top: -8px; animation-duration: 1.1s; }
@keyframes fxRing { 0% { opacity: .95; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes fxStar {
  0% { opacity: 1; transform: translate(0, 0) scale(.6) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); }
}

.fx-newmenu { position: absolute; width: 0; height: 0; animation: fxNmOut .45s ease-in 2.1s forwards; }
.fx-newmenu .fx-rays {
  position: absolute; left: -110px; top: -110px; width: 220px; height: 220px; border-radius: 50%;
  background: repeating-conic-gradient(#ffe7a066 0 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  opacity: 0; animation: fxRaysIn .4s ease-out forwards, fxSpin 6s linear infinite;
}
.fx-newmenu .fx-food {
  position: absolute; left: -46px; top: -58px; width: 92px; height: 92px;
  filter: drop-shadow(0 4px 6px #0008) drop-shadow(0 0 10px #ffe7a0);
  transform: scale(0); animation: fxFoodPop .55s cubic-bezier(.3,1.6,.5,1) .05s forwards, fxBob 1.2s ease-in-out .6s infinite;
}
.fx-newmenu .fx-ribbon {
  position: absolute; left: 50%; top: 40px; transform: translateX(-50%) scale(.6); opacity: 0;
  white-space: nowrap; text-align: center; padding: 5px 16px 6px; border-radius: 10px;
  /* 게임의 판(카드·창)과 같은 남색 + 금테 — 빨간 띠는 너무 튀었다(사용자) */
  background: #1d2645ee; border: 1.5px solid #c9a24a; color: #f2ead8;
  font-family: "Jua", "Apple SD Gothic Neo", sans-serif; font-size: 18px; line-height: 1.1;
  box-shadow: 0 3px 10px #0007;
  animation: fxRibbon .4s cubic-bezier(.3,1.5,.5,1) .3s forwards;
}
.fx-newmenu .fx-ribbon small { display: block; font-size: 11.5px; color: #ffd98a; letter-spacing: 1px; }
body.skin-isekai .fx-newmenu .fx-ribbon { background: #3a2a1bee; border-color: #a8834a; }
@keyframes fxRaysIn { to { opacity: 1; } }
@keyframes fxSpin { to { rotate: 360deg; } }
@keyframes fxFoodPop { to { transform: scale(1); } }
@keyframes fxBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes fxRibbon { to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes fxNmOut { to { opacity: 0; transform: scale(.85) translateY(-14px); } }

.fx-float {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap;
  font-family: "Jua", "Apple SD Gothic Neo", sans-serif; font-size: 14px; color: #f2ead8;
  padding: 3px 10px 4px; border-radius: 9px; background: #1d2645e6; border: 1px solid #c9a24a;
  box-shadow: 0 2px 6px #0006; animation: fxFloat 1.5s ease-out forwards;
}
body.skin-isekai .fx-float { background: #3a2a1be6; border-color: #a8834a; }   /* 신메뉴 띠와 같은 판 */
.fx-float b { font-weight: 400; color: #ffd24a; }   /* 이름과 같은 크기 — ×2 만 크게 키웠더니 어울리지 않았다(사용자) */
@keyframes fxFloat {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -100%) scale(1.15); }
  25% { transform: translate(-50%, -100%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}

.fx-stamp {
  position: absolute; right: -8px; top: -9px; z-index: 2; padding: 1px 6px 2px; border-radius: 7px;
  background: linear-gradient(#ffd24a, #e89a14); color: #5a2a00; border: 2px solid #fff3c4;
  font-family: "Jua", "Apple SD Gothic Neo", sans-serif; font-size: 15px; line-height: 1.1;
  box-shadow: 0 2px 6px #0008; animation: fxStamp 1.6s ease-out forwards;
}
@keyframes fxStamp {
  0% { opacity: 0; transform: scale(2.6) rotate(-25deg); }
  18% { opacity: 1; transform: scale(.9) rotate(-10deg); }
  26% { transform: scale(1.05) rotate(-12deg); }
  80% { opacity: 1; transform: scale(1) rotate(-12deg); }
  100% { opacity: 0; transform: scale(1) rotate(-12deg) translateY(-8px); }
}
.card.fx-leap { animation: fxLeapCard 1.2s ease-out; }
@keyframes fxLeapCard {
  0% { box-shadow: 0 0 0 0 #ffd24a00; }
  20% { box-shadow: 0 0 0 2px #ffd24a, 0 0 18px #ffd24a99; }
  100% { box-shadow: 0 0 0 0 #ffd24a00; }
}
.card .tile .food-ico.fx-hop { animation: fxHop .28s ease-out; }
@keyframes fxHop { 40% { transform: translateY(-6px) scale(1.12); } 100% { transform: none; } }
.fx-plus {
  position: fixed; z-index: 95; pointer-events: none; transform: translate(-50%, -100%);
  font-family: "Jua", "Apple SD Gothic Neo", sans-serif; font-size: 16px; color: #8affc1;
  text-shadow: 0 0 3px #000, 0 2px 0 #000a; animation: fxPlus .75s ease-out forwards;
}
@keyframes fxPlus { 0% { opacity: 0; transform: translate(-50%, -60%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -220%); } }
@media (prefers-reduced-motion: reduce) {
  .fx-newmenu .fx-rays { animation: fxRaysIn .4s ease-out forwards; }
}
/* 비법 전수가 열린 순간 — 신메뉴보다 한 단계 크게(fxRebirthOpen). 색은 같은 판·금테 */
.fx-dim {
  position: absolute; width: 100%; height: 100%;
  background: radial-gradient(ellipse at 50% 35%, transparent 25%, #000a 85%);
  opacity: 0; animation: fxDim 3.5s ease-in-out forwards;
}
@keyframes fxDim { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
.fx-newmenu.grand { animation: fxNmOut .5s ease-in 3.1s forwards; }
.fx-newmenu.grand .fx-rays { left: -150px; top: -150px; width: 300px; height: 300px; }
.fx-newmenu.grand .fx-food { left: -54px; top: -70px; width: 108px; height: 108px; }
.fx-newmenu.grand .fx-ribbon { top: 46px; font-size: 20px; padding: 6px 18px 7px; border-width: 2px; }
.fx-newmenu .fx-emoji { display: flex; align-items: center; justify-content: center; font-size: 76px; line-height: 1; }
.tab-btn.fx-glow { animation: fxTabGlow 1.2s ease-in-out infinite; }
@keyframes fxTabGlow { 50% { box-shadow: 0 0 0 2px #ffd24a, 0 0 14px #ffd24a99; color: #ffe7a0; } }
/* VIP 를 켠 순간(fxVip) — 무대를 한 번 쓸고 지나가는 금빛 띠 */
.fx-sweep {
  position: absolute; width: 100%; height: 100%;
  background: linear-gradient(115deg, transparent 35%, #ffe7a055 47%, #fff6d088 50%, #ffe7a055 53%, transparent 65%);
  background-size: 300% 100%; background-position: 100% 0;
  animation: fxSweep 1.2s ease-in-out forwards;
}
@keyframes fxSweep { to { background-position: -50% 0; } }
.fx-newmenu.vip .fx-ribbon small { font-size: 12.5px; }
.shop-ico .vip-medal { width: 46px; height: 46px; }