/* ============================================================
   GACHA MALL v4 폴리시 팩
   ① 성능: blur/backdrop-filter 전면 제거(렉 주범), 오프스크린 렌더 스킵
   ② 디테일: 뱃지 정렬, 상호명 가독성, LED 전자표시, 몬스터볼 심볼
   기능/레이아웃 변경 없음 — 스타일 오버라이드 전용
   ============================================================ */

/* ============ ① 성능 최적화 ============ */

/* backdrop-filter: GPU 리페인트 최다 유발 — 전부 제거 */
[class*="backdrop-blur"],
header.sticky,
.shop-hero-panel,
.floor-nav,
.floor-line,
.store-panel-card,
.recent-log,
.machine-detail-panel,
.referral-modal,
.shipment-confirm-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* [정리됨] Codex 보관함 스킨 v1(중복) — gm-locker-cabinet-final.css 단일 유지 */
/* ============ ② 상단 검정 레일 위 뱃지 정렬 ============ */

.compact-machine { position: relative; }
.compact-machine__rail { left: 8px !important; right: 8px !important; top: 8px !important; height: 34px !important; }
.compact-machine__badges {
  position: absolute !important;
  top: 12px; left: 18px; right: 18px;
  margin: 0 !important;
  z-index: 3;
}
.compact-machine__badges span,
.compact-machine__badges strong { padding: 4px 8px !important; font-size: 10.5px !important; }
.compact-machine__body { margin-top: 44px !important; }

/* ============ ③ 자판기 상호명 가독성 ============ */

.machine-visual__sign {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--machine-accent) 62%, #17151f),
    color-mix(in srgb, var(--machine-accent) 34%, #17151f)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -5px rgba(0, 0, 0, 0.28), 0 6px 12px rgba(23, 21, 31, 0.18) !important;
}
.machine-visual__sign strong {
  color: #ffffff !important;
  font-size: 13px !important;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.machine-visual--mini .machine-visual__sign strong { font-size: 11.5px !important; }
.machine-visual__sign span {
  background: #c7ff32 !important;
  color: #17151f !important;
  box-shadow: 0 0 8px rgba(199, 255, 50, 0.5);
}

/* ============ ④ LED 전자표시 (가격·잔여수량) ============ */

/* 머신 카드 하단 칩 → 도트 디스플레이 */
.compact-machine__info div span {
  background: #0b100a !important;
  border-radius: 8px !important;
  padding: 5px 9px !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px;
  color: #3dff70 !important;
  text-shadow: 0 0 7px rgba(61, 255, 112, 0.75);
  box-shadow: inset 0 0 0 1px #1c2b16, inset 0 0 10px rgba(61, 255, 112, 0.12);
}
.compact-machine__info div span svg { color: #3dff70 !important; filter: drop-shadow(0 0 3px rgba(61, 255, 112, 0.7)); }
/* 가격 칩은 앰버 */
.compact-machine__info div span:first-child {
  color: #ffcf4d !important;
  text-shadow: 0 0 7px rgba(255, 207, 77, 0.75);
  box-shadow: inset 0 0 0 1px #2e2410, inset 0 0 10px rgba(255, 207, 77, 0.12);
}
.compact-machine__info div span:first-child svg { color: #ffcf4d !important; filter: drop-shadow(0 0 3px rgba(255, 207, 77, 0.7)); }
/* 품절임박(low) 칩은 레드 */
.compact-machine__info div .compact-machine__low {
  background: #120b0b !important;
  color: #ff6161 !important;
  text-shadow: 0 0 7px rgba(255, 97, 97, 0.8);
  box-shadow: inset 0 0 0 1px #331414, inset 0 0 10px rgba(255, 97, 97, 0.14);
}
.compact-machine__info div .compact-machine__low svg { color: #ff6161 !important; filter: drop-shadow(0 0 3px rgba(255, 97, 97, 0.7)); }

/* 상세 패널 스탯 4종 → LED 패널 */
.detail-stat {
  background: linear-gradient(180deg, #10150e, #0a0e09) !important;
  box-shadow: inset 0 0 0 1px #1c2b16, inset 0 0 14px rgba(61, 255, 112, 0.08) !important;
}
.detail-stat span { color: #7fa886 !important; letter-spacing: 1px; font-size: 10.5px !important; }
.detail-stat strong {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  color: #3dff70 !important;
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(61, 255, 112, 0.7);
}
.detail-stat:first-child strong { color: #ffcf4d !important; text-shadow: 0 0 8px rgba(255, 207, 77, 0.7); }
.detail-stat:first-child { box-shadow: inset 0 0 0 1px #2e2410, inset 0 0 14px rgba(255, 207, 77, 0.08) !important; }

/* ============ ⑤ 심볼: 형광 몬스터볼 ============ */

header.sticky .shadow-neon { position: relative; }
header.sticky .shadow-neon svg { display: none !important; }
header.sticky .shadow-neon::before {
  content: "";
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #17151f 0 3px, #c7ff32 3px 5.5px, #17151f 5.5px 7.5px, transparent 7.5px),
    linear-gradient(180deg, #c7ff32 0 42%, #17151f 42% 58%, #edf8d9 58%);
  box-shadow: 0 0 12px rgba(199, 255, 50, 0.75), inset 0 -3px 5px rgba(0, 0, 0, 0.35), inset 0 0 0 1.5px rgba(23, 21, 31, 0.85);
}

/* 브랜드 타이포 */
header.sticky strong.block { letter-spacing: 0.6px; }

/* 뱃지 줄바꿈 방지 */
.compact-machine__badges span,
.compact-machine__badges strong { white-space: nowrap; }

/* ============ ⑥ 10대 진열 고정 (5열×2줄) ============ */
@media (min-width: 721px) {
  .machine-wall__track,
  .floor-line--expanded .machine-wall__track {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 13px !important;
  }
}

/* ============ ⑦ 실시간 획득 로그 (좌측 사이드바) ============ */
#gm-live-feed {
  border-radius: 19px;
  background: #17151f;
  padding: 12px;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.gm-feed-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 900; color: #c7ff32; margin-bottom: 9px; }
.gm-feed-head small { color: #ff4f68; font-size: 10px; letter-spacing: 1px; }
.gm-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4f68; box-shadow: 0 0 8px #ff4f68; animation: gmBlink 1.2s infinite; }
#gm-live-feed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gm-feed-item { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 7px 9px; line-height: 1.5; animation: gmFeedIn .35s ease; }
.gm-feed-item b { color: #8ffcff; }
.gm-feed-item em { color: #c7ff32; font-style: normal; font-weight: 900; }
.gm-feed-item i { font-style: normal; font-size: 9px; font-weight: 900; color: #ff4fd8; border: 1px solid rgba(255, 79, 216, 0.5); border-radius: 999px; padding: 1px 5px; margin-left: 3px; }
.gm-feed-rare em { color: #ff4fd8; text-shadow: 0 0 8px rgba(255, 79, 216, 0.55); }
@keyframes gmFeedIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes gmBlink { 50% { opacity: .35; } }

/* ============ ⑧ 개봉 연출 강화 ============ */
/* 캡슐 대기: 머신은 어둡게, 볼은 크게 + 펄스 글로우 */
body.gm-ball-ready .machine-visual--detail { filter: brightness(.5) saturate(.7) !important; transition: filter .35s ease; }
.capsule-ready-ball {
  width: 122px !important;
  height: 122px !important;
  animation: gmBallPulse 1.1s ease-in-out infinite !important;
  cursor: pointer;
}
@keyframes gmBallPulse {
  0%, 100% { box-shadow: inset 0 -15px 20px rgba(23,21,31,.18), 0 16px 34px rgba(23,21,31,.28), 0 0 34px color-mix(in srgb, var(--capsule-b) 55%, transparent); }
  50% { box-shadow: inset 0 -15px 20px rgba(23,21,31,.18), 0 16px 44px rgba(23,21,31,.3), 0 0 74px color-mix(in srgb, var(--capsule-b) 95%, transparent); }
}
.capsule-ready-ball__hint {
  bottom: -46px !important;
  font-size: 14px !important;
  padding: 9px 15px !important;
  animation: gmHintBob 1.3s ease-in-out infinite;
  box-shadow: 0 10px 24px rgba(23, 21, 31, 0.4), 0 0 16px rgba(199, 255, 50, 0.35) !important;
}
@keyframes gmHintBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }

/* 획득 카드 팝인 */
.capsule-open-impact, .reward-card { animation: gmPop .55s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes gmPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 콘페티 */
.gm-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.gm-confetti i { position: absolute; top: -22px; display: block; animation: gmConfFall linear forwards; }
@keyframes gmConfFall { to { transform: translateY(108vh) rotate(720deg); } }

/* ============ ⑨ 출고 억제(보관 유도) ============ */
.side-panel-ship {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}
.collection-summary button, .locker-summary button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
}

/* ============ ⑩ hover 렉 근절 ============ */

/* 카드 전체를 쓸고 가는 shine 스윕 제거 (hover 렉 주범 1) */
.compact-machine:after, .machine-card:after { display: none !important; }
.compact-machine:hover:after, .machine-card:hover:after { animation: none !important; }

/* hover 스프링이 큰 서브트리를 리페인트하지 않도록 레이어 승격 + 페인트 격리 */
.compact-machine { will-change: transform; contain: layout paint; }
.machine-visual { will-change: transform; }
.machine-visual__glass-sticker { will-change: transform; transform: scale(1); transition: transform .25s ease; }

/* hover는 transform/opacity만 */
.compact-machine:hover { transform: translateY(-4px) !important; }
.compact-machine:hover .machine-visual__glass-sticker { transform: scale(1.05); }
.compact-machine:hover .machine-visual__capsules { opacity: .45 !important; transition: opacity .2s; }

/* 모션 최소화 선호 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  .gm-cap, .gm-feed-item, .capsule-ready-ball, .gm-live-dot,
  .capsule-open-impact, .reward-card, .gacha-shop-scene__marquee span { animation: none !important; }
  .compact-machine, .machine-visual__glass-sticker { transition: none !important; }
}

/* [정리됨] 구형 포스터전면 자판기(⑪) — 프리미엄 프로토타입/캐비닛으로 대체 */
/* ============ ⑫ 캡슐 오픈 이벤트 — 풀스크린 개봉 연출 ============ */

body.gm-cap-wait .capsule-ready-ball { opacity: 0 !important; }
body.gm-cap-wait .capsule-ready-ball__hint { display: none !important; }

#gm-open { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; }
#gm-open.gm-out { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.gm-open-dim { position: absolute; inset: 0; background: rgba(9, 7, 18, 0.8); animation: gmFadeIn .35s ease; }
@keyframes gmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.gm-cap-wrap { position: relative; display: grid; justify-items: center; gap: 30px; }
.gm-cap {
  position: relative;
  width: min(48vw, 235px);
  aspect-ratio: 1;
  cursor: pointer;
  animation: gmWobble 1.5s ease-in-out .4s infinite;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.55));
}
@keyframes gmWobble {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-7deg) scale(1.02); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg) scale(1.02); }
  80% { transform: rotate(3deg); }
}
.gm-cap-top, .gm-cap-bot { position: absolute; left: 0; width: 100%; height: 51%; transition: transform .55s cubic-bezier(.45,-.35,.45,1), opacity .55s ease; }
.gm-cap-top {
  top: 0;
  border-radius: 999px 999px 12px 12px;
  background:
    radial-gradient(42% 34% at 30% 28%, rgba(255,255,255,.75), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ca, #7f4dff) 82%, #ffffff), var(--ca, #7f4dff));
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.28);
}
.gm-cap-bot {
  bottom: 0;
  border-radius: 12px 12px 999px 999px;
  background: linear-gradient(180deg, #ffffff, #d9d6ea);
  box-shadow: inset 0 6px 10px rgba(255, 255, 255, 0.8), inset 0 -10px 18px rgba(23, 21, 31, 0.2);
}
.gm-cap-seam {
  position: absolute; left: 4%; right: 4%; top: calc(50% - 2px); height: 4px;
  border-radius: 999px; background: rgba(23, 21, 31, 0.35);
  transition: background .25s, box-shadow .25s;
}
.gm-cap-hint {
  border-radius: 999px; background: #c7ff32; color: #17151f;
  font-size: 15px; font-weight: 900; padding: 11px 20px;
  box-shadow: 0 0 24px rgba(199, 255, 50, 0.5);
  animation: gmHintBob2 1.3s ease-in-out infinite;
}
@keyframes gmHintBob2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 단계 1: 흔들림 + 틈새 빛샘 */
#gm-open.gm-shake .gm-cap { animation: gmShakeHard .11s linear infinite; }
@keyframes gmShakeHard {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-5px, 2px) rotate(-2deg); }
  50% { transform: translate(5px, -2px) rotate(2deg); }
  75% { transform: translate(-4px, -2px) rotate(-1.2deg); }
  100% { transform: translate(4px, 2px) rotate(1.2deg); }
}
#gm-open.gm-shake .gm-cap-seam {
  background: #fffbe8;
  box-shadow: 0 0 22px 8px rgba(255, 250, 200, 0.95), 0 0 64px 26px rgba(199, 255, 50, 0.5);
}
#gm-open.gm-shake .gm-cap-hint { opacity: 0; transition: opacity .2s; }

/* 단계 2: 반구 갈라짐 + 플래시 */
#gm-open.gm-split .gm-cap { animation: none; }
#gm-open.gm-split .gm-cap-top { transform: translate(-62%, -125%) rotate(-40deg); opacity: 0; }
#gm-open.gm-split .gm-cap-bot { transform: translate(62%, 115%) rotate(34deg); opacity: 0; }
#gm-open.gm-split .gm-cap-seam { opacity: 0; }
#gm-open.gm-split .gm-open-dim { animation: gmFlash .55s ease-out forwards; }
@keyframes gmFlash {
  0% { background: rgba(255, 255, 255, 0.95); }
  100% { background: rgba(9, 7, 18, 0.25); }
}

/* ============================================================
   PART D — 네온 다크모드 (html.gm-dark 스코프, v3 GACHA-YA 이식)
   ============================================================ */
/* ============================================================
   GACHAMALL v3 — "GACHA-YA 심야뽑기상점" total reskin
   Loaded AFTER the base stylesheet. Style overrides only:
   zero layout / DOM / behavior changes. All functionality intact.
   Palette: deep indigo night + neon pink / cyan / lime + warm gold
   ============================================================ */

html.gm-dark {
  --gy-bg-0: #07060f;
  --gy-bg-1: #0d0b1a;
  --gy-bg-2: #151228;
  --gy-panel: rgba(19, 15, 36, 0.92);
  --gy-panel-solid: #16122a;
  --gy-card: #1a1533;
  --gy-ink: #f4f2ff;
  --gy-dim: #9b96b8;
  --gy-dim-2: #6f6a8e;
  --gy-pink: #ff4fa3;
  --gy-cyan: #39e6ff;
  --gy-lime: #c8ff3e;
  --gy-violet: #8f7bff;
  --gy-gold: #ffd24a;
  --gy-line: rgba(255, 255, 255, 0.10);
  --gy-line-2: rgba(255, 255, 255, 0.16);
  --gy-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --gy-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.45);
  --gy-glow-pink: 0 0 22px rgba(255, 79, 163, 0.35);
  --gy-glow-lime: 0 0 18px rgba(200, 255, 62, 0.35);
}

/* ============================================================
   1. Global surface & typography
   ============================================================ */

html.gm-dark,
html.gm-dark body {
  background: var(--gy-bg-0);
}

html.gm-dark body {
  color: var(--gy-ink);
}

/* ---- Tailwind utility remaps (palette only) ---- */

html.gm-dark .bg-soft { background-color: var(--gy-bg-1) !important; }
html.gm-dark .bg-soft\/95 { background-color: rgba(13, 11, 26, 0.95) !important; }
html.gm-dark .bg-white { background-color: var(--gy-card) !important; }
html.gm-dark .bg-white\/80 { background-color: rgba(13, 11, 26, 0.86) !important; }
html.gm-dark .bg-white\/10 { background-color: rgba(255, 255, 255, 0.07) !important; }
html.gm-dark .bg-white\/12 { background-color: rgba(255, 255, 255, 0.09) !important; }
html.gm-dark .bg-graphite { background-color: #251f42 !important; }
html.gm-dark .bg-ink { background-color: #0b0918 !important; }
html.gm-dark .bg-ink\/62 { background-color: rgba(4, 3, 10, 0.72) !important; }
html.gm-dark .bg-ink\/66 { background-color: rgba(4, 3, 10, 0.76) !important; }
html.gm-dark .bg-ink\/92 { background-color: rgba(4, 3, 10, 0.94) !important; }

html.gm-dark .text-ink { color: var(--gy-ink) !important; }
html.gm-dark .text-graphite { color: var(--gy-dim) !important; }
html.gm-dark .text-graphite\/45 { color: rgba(155, 150, 184, 0.6) !important; }
html.gm-dark .text-graphite\/62 { color: rgba(155, 150, 184, 0.85) !important; }
html.gm-dark .text-graphite\/65 { color: rgba(155, 150, 184, 0.9) !important; }
html.gm-dark .text-graphite\/70 { color: var(--gy-dim) !important; }

/* dark text must STAY dark on bright accent surfaces */
html.gm-dark .bg-limepop.text-ink,
html.gm-dark .bg-limepop .text-ink,
html.gm-dark .bg-violetpop.text-ink { color: #131c02 !important; }
html.gm-dark .bg-violetpop.text-ink { color: #ffffff !important; }

html.gm-dark .border-white\/50,
html.gm-dark .border-white\/55,
html.gm-dark .border-white\/70,
html.gm-dark .border-white\/80 {
  border-color: var(--gy-line) !important;
}
html.gm-dark .border-graphite\/10 { border-color: var(--gy-line-2) !important; }
html.gm-dark .border-slate-300\/40 { border-color: rgba(255, 255, 255, 0.18) !important; }

html.gm-dark .shadow-sm { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important; }
html.gm-dark .shadow-xl { box-shadow: var(--gy-shadow-sm) !important; }
html.gm-dark .shadow-2xl { box-shadow: var(--gy-shadow) !important; }
html.gm-dark .shadow-inner { box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5) !important; }
html.gm-dark .shadow-neon { box-shadow: 0 0 18px rgba(200, 255, 62, 0.45) !important; }

/* ============================================================
   2. Header — dark glass bar with neon brand
   ============================================================ */

html.gm-dark header.sticky {
  background: linear-gradient(180deg, rgba(7, 6, 15, 0.94), rgba(7, 6, 15, 0.82)) !important;
  border-bottom: 1px solid rgba(255, 79, 163, 0.22) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45) !important;
}

/* brand name glows like the shop sign */
html.gm-dark header.sticky strong.block {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255, 79, 163, 0.9), 0 0 22px rgba(255, 79, 163, 0.45);
  letter-spacing: 0.4px;
}

html.gm-dark header.sticky input {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--gy-line) !important;
  color: var(--gy-ink) !important;
}
html.gm-dark header.sticky input::placeholder { color: var(--gy-dim-2) !important; }
html.gm-dark header.sticky input:focus { border-color: rgba(143, 123, 255, 0.55) !important; }

html.gm-dark .header-action-chip {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gy-line);
  color: var(--gy-ink);
}
html.gm-dark .header-action-chip.bg-white { background-color: rgba(255, 255, 255, 0.06) !important; }
html.gm-dark .header-action-chip.bg-limepop {
  background-color: var(--gy-lime) !important;
  border-color: transparent;
  box-shadow: var(--gy-glow-lime);
}
html.gm-dark .header-action-chip.bg-limepop,
html.gm-dark .header-action-chip.bg-limepop * { color: #131c02 !important; }
html.gm-dark .header-action-chip.bg-violetpop\/10 {
  background-color: rgba(143, 123, 255, 0.14) !important;
  border-color: rgba(143, 123, 255, 0.35) !important;
}
html.gm-dark .header-action-chip:hover { border-color: rgba(255, 255, 255, 0.3); }

/* [정리됨] 다크 밤골목 장식(컬러전구·통로띠·바닥) — 단일 배경으로 대체 */
/* ============================================================
   4. Hero — the neon shop sign
   ============================================================ */

html.gm-dark .shop-hero-panel {
  position: relative;
  border: 2px solid rgba(255, 79, 163, 0.55) !important;
  border-radius: 26px;
  background:
    radial-gradient(circle at 76% 0%, rgba(255, 79, 163, 0.14), transparent 30%),
    radial-gradient(circle at 10% 30%, rgba(57, 230, 255, 0.1), transparent 30%),
    rgba(13, 10, 24, 0.82) !important;
  box-shadow:
    0 0 26px rgba(255, 79, 163, 0.22),
    inset 0 0 30px rgba(255, 79, 163, 0.08),
    var(--gy-shadow) !important;
  animation: gy-neon-hum 6s linear infinite;
}

html.gm-dark .shop-hero-panel h1 {
  color: #fff !important;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.7),
    0 0 18px rgba(255, 79, 163, 0.85),
    0 0 44px rgba(255, 79, 163, 0.5);
}

html.gm-dark .shop-hero-panel p { color: var(--gy-dim) !important; }

/* location badge → lime neon pill */
html.gm-dark .shop-hero-panel .bg-ink {
  background-color: #0b0918 !important;
  box-shadow: 0 0 14px rgba(200, 255, 62, 0.35), inset 0 0 0 1px rgba(200, 255, 62, 0.5);
}

@keyframes gy-neon-hum {
  0%, 6.5%, 8.5%, 100% { box-shadow: 0 0 26px rgba(255, 79, 163, 0.22), inset 0 0 30px rgba(255, 79, 163, 0.08), var(--gy-shadow); }
  7.5% { box-shadow: 0 0 12px rgba(255, 79, 163, 0.12), inset 0 0 16px rgba(255, 79, 163, 0.04), var(--gy-shadow); }
}

html.gm-dark .home-kpi {
  border: 1px solid var(--gy-line) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--gy-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--gy-shadow-sm) !important;
}
html.gm-dark .home-kpi svg { color: var(--gy-lime) !important; }
html.gm-dark .home-kpi strong { color: #fff; }
html.gm-dark .home-kpi span { color: var(--gy-dim) !important; }

/* ============================================================
   5. Floor nav + marquee
   ============================================================ */

html.gm-dark .floor-nav {
  border: 1px solid var(--gy-line) !important;
  background: var(--gy-panel) !important;
  box-shadow: var(--gy-shadow-sm) !important;
}

html.gm-dark .floor-nav__item {
  border: 1px solid var(--gy-line) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--gy-ink) !important;
}
html.gm-dark .floor-nav__item:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); }
html.gm-dark .floor-nav__item--active {
  background: linear-gradient(135deg, #241d48, #171232) !important;
  border-color: rgba(200, 255, 62, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(200, 255, 62, 0.16), 0 18px 34px rgba(0, 0, 0, 0.5) !important;
}
html.gm-dark .floor-nav__icon {
  background: rgba(143, 123, 255, 0.16) !important;
  color: var(--gy-violet) !important;
}
html.gm-dark .floor-nav__item--active .floor-nav__icon {
  background: var(--gy-lime) !important;
  color: #131c02 !important;
  box-shadow: var(--gy-glow-lime);
}
html.gm-dark .floor-nav__copy small { color: var(--gy-dim) !important; }
html.gm-dark .floor-nav__item--active .floor-nav__copy small { color: rgba(244, 242, 255, 0.72) !important; }

html.gm-dark .gacha-shop-scene__marquee {
  border: 1px solid rgba(200, 255, 62, 0.35) !important;
  background: #0b0918 !important;
  color: var(--gy-lime) !important;
  box-shadow: 0 0 22px rgba(200, 255, 62, 0.16), inset 0 0 18px rgba(200, 255, 62, 0.07) !important;
}
html.gm-dark .gacha-shop-scene__marquee span { text-shadow: 0 0 10px rgba(200, 255, 62, 0.6); }

/* ============================================================
   6. Floor line sections
   ============================================================ */

html.gm-dark .floor-line {
  border: 1px solid var(--gy-line) !important;
  background:
    linear-gradient(180deg, rgba(23, 19, 43, 0.92), rgba(16, 13, 32, 0.9)),
    radial-gradient(circle at 86% 8%, var(--floor-glow), transparent 26%) !important;
  box-shadow: var(--gy-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html.gm-dark .floor-line::before {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 108px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 16%, transparent 82%, rgba(0, 0, 0, 0.3)) !important;
  opacity: .8 !important;
}

html.gm-dark .floor-line--gold {
  background:
    linear-gradient(180deg, rgba(30, 24, 22, 0.94), rgba(17, 13, 14, 0.94)),
    radial-gradient(circle at 88% 8%, rgba(255, 210, 102, 0.22), transparent 30%) !important;
}

html.gm-dark .floor-line__header {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 0 0 1px var(--gy-line) !important;
  color: var(--gy-ink) !important;
}
html.gm-dark .floor-line--gold .floor-line__header { background: rgba(255, 255, 255, 0.05) !important; }

html.gm-dark .floor-line__floor { box-shadow: 0 0 26px var(--floor-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; }

html.gm-dark .floor-line__copy strong { color: #fff !important; }
html.gm-dark .floor-line__copy small { color: var(--gy-dim) !important; }

html.gm-dark .floor-line__chips em {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--gy-dim);
}

html.gm-dark .floor-line__cta {
  background: #0b0918 !important;
  color: var(--gy-lime) !important;
  box-shadow: inset 0 0 0 1px rgba(200, 255, 62, 0.4), 0 0 16px rgba(200, 255, 62, 0.18);
}
html.gm-dark .floor-line--gold .floor-line__cta {
  background: var(--gy-gold) !important;
  color: #241a02 !important;
  box-shadow: 0 0 18px rgba(255, 210, 74, 0.35);
}

html.gm-dark .floor-line__footer { background: rgba(255, 255, 255, 0.05) !important; }
html.gm-dark .floor-line__footer p { color: var(--gy-dim) !important; }
html.gm-dark .floor-line__footer span { color: #131c02 !important; }

/* machine shelf */
html.gm-dark .machine-wall {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.4)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.14)) !important;
  box-shadow: inset 0 0 0 1px var(--gy-line), inset 0 -14px 28px rgba(0, 0, 0, 0.4) !important;
}
html.gm-dark .floor-line--gold .machine-wall {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.4)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.2)) !important;
}
html.gm-dark .machine-wall__backlight {
  background:
    radial-gradient(circle at 50% 0%, var(--floor-glow), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 78px, transparent 78px 158px) !important;
  opacity: .8 !important;
}

/* [정리됨] 다크 구형 머신카드/비주얼 — 프로토타입으로 대체 */
/* ============================================================
   9. Detail stage & panel
   ============================================================ */

/* left stage panel had a baked-in white arbitrary bg utility */
html.gm-dark [class*="bg-[radial-gradient"] {
  background:
    radial-gradient(circle at 50% 10%, rgba(200, 255, 62, 0.1), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(255, 79, 163, 0.08), transparent 40%),
    linear-gradient(180deg, #1c1738, #110d24) !important;
  box-shadow: inset 0 0 0 1px var(--gy-line), inset 0 -30px 60px rgba(0, 0, 0, 0.3) !important;
}

html.gm-dark .machine-detail-panel {
  background: var(--gy-panel) !important;
  box-shadow: inset 0 0 0 1px var(--gy-line), var(--gy-shadow) !important;
}

html.gm-dark .detail-stat {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 0 0 1px var(--gy-line) !important;
}
html.gm-dark .detail-stat span { color: var(--gy-dim) !important; }
html.gm-dark .detail-stat strong { color: #fff !important; }

html.gm-dark .featured-product {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 0 0 1px var(--gy-line), 0 12px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================
   10. Buttons
   ============================================================ */

html.gm-dark .icon-action {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--gy-ink) !important;
  box-shadow: inset 0 0 0 1px var(--gy-line), 0 10px 22px rgba(0, 0, 0, 0.3) !important;
}
html.gm-dark .icon-action--white {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

html.gm-dark .icon-only { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; }
html.gm-dark .icon-only--light { background: rgba(255, 255, 255, 0.08) !important; color: var(--gy-ink) !important; }

html.gm-dark .primary-action {
  background: linear-gradient(135deg, var(--gy-pink), #c22d77) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(255, 79, 163, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

html.gm-dark .secondary-action {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--gy-ink) !important;
  box-shadow: inset 0 0 0 1px var(--gy-line-2) !important;
}

html.gm-dark .ghost-action { color: var(--gy-dim) !important; }
html.gm-dark .ghost-action:hover { color: var(--gy-ink) !important; }

html.gm-dark .draw-action {
  background: linear-gradient(135deg, var(--gy-lime), #8be34a) !important;
  color: #131c02 !important;
  box-shadow: 0 14px 28px rgba(200, 255, 62, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
html.gm-dark .draw-action--sub {
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--gy-ink) !important;
  box-shadow: inset 0 0 0 1px var(--gy-line-2) !important;
}

html.gm-dark .charge-action {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.45), 0 0 16px rgba(255, 210, 74, 0.14) !important;
}

/* ============================================================
   11. Capsule & reward flow
   ============================================================ */

html.gm-dark .coin-flight {
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #ffb300 60%, #c47f00) !important;
  color: #4a3200 !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 203, 46, 0.6), inset 0 -4px rgba(117, 75, 0, 0.35) !important;
}

html.gm-dark .capsule-flight-ball,
html.gm-dark .capsule-ready-ball {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    inset 0 -15px 20px rgba(0, 0, 0, 0.3),
    0 16px 34px rgba(0, 0, 0, 0.55),
    0 0 42px color-mix(in srgb, var(--capsule-b) 50%, transparent) !important;
}

html.gm-dark .capsule-ready-ball__hint {
  background: #0b0918 !important;
  color: var(--gy-lime) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(200, 255, 62, 0.3) !important;
}

html.gm-dark .capsule-open-impact {
  background:
    radial-gradient(circle at 50% 10%, rgba(200, 255, 62, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(30, 24, 54, 0.96), rgba(19, 15, 36, 0.94)) !important;
  box-shadow: var(--gy-shadow), inset 0 0 0 1px var(--gy-line-2) !important;
}
html.gm-dark .capsule-open-impact strong { color: #fff !important; }
html.gm-dark .capsule-open-impact__label {
  background: #0b0918 !important;
  color: var(--gy-lime) !important;
  box-shadow: inset 0 0 0 1px rgba(200, 255, 62, 0.4);
}

html.gm-dark .reward-modal__burst {
  background:
    conic-gradient(from 0deg, transparent 0 8%, rgba(200, 255, 62, 0.28) 9% 10%, transparent 11% 18%, rgba(255, 79, 163, 0.22) 19% 20%, transparent 21%),
    radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 58%) !important;
}

html.gm-dark .reward-card {
  background:
    linear-gradient(180deg, #211b3f, #161129),
    radial-gradient(circle at 50% 0%, rgba(143, 123, 255, 0.2), transparent 34%) !important;
  box-shadow: inset 0 0 0 1px var(--gy-line-2), 0 18px 34px rgba(0, 0, 0, 0.45) !important;
}
html.gm-dark .reward-card--rare:after {
  background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.22) 46%, transparent 57%) !important;
}

html.gm-dark .product-art__plinth {
  background: linear-gradient(180deg, #2b2450, color-mix(in srgb, var(--toy) 22%, #171330)) !important;
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.45) !important;
}
html.gm-dark .product-art--image {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.7) 46%, rgba(143, 123, 255, 0.12) 78%),
    linear-gradient(180deg, #f4f2ff, #d9d3f2) !important;
}

/* ============================================================
   12. Side panels
   ============================================================ */

html.gm-dark .store-panel-card {
  border: 1px solid var(--gy-line) !important;
  background: var(--gy-panel) !important;
  box-shadow: var(--gy-shadow-sm) !important;
  color: var(--gy-ink);
}
html.gm-dark .store-panel-card--dark {
  background:
    radial-gradient(circle at 88% 0%, rgba(200, 255, 62, 0.14), transparent 34%),
    #0e0b1e !important;
  color: #fff !important;
}
html.gm-dark .store-panel-card--notice {
  background:
    radial-gradient(circle at 82% 0%, rgba(255, 210, 102, 0.16), transparent 34%),
    var(--gy-panel) !important;
}
html.gm-dark .store-panel-card--invite {
  background:
    radial-gradient(circle at 82% 0%, rgba(255, 79, 216, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(26, 20, 46, 0.94), rgba(19, 15, 36, 0.94)) !important;
}
html.gm-dark .store-panel-card__title small { color: var(--gy-dim) !important; }

html.gm-dark .locker-mini-stats div { background: rgba(255, 255, 255, 0.07) !important; }

html.gm-dark .invite-panel-copy { background: #0b0918 !important; box-shadow: inset 0 0 0 1px var(--gy-line); }

html.gm-dark .side-panel-invite {
  background: linear-gradient(135deg, #ff4fd8, #d9299f) !important;
  box-shadow: 0 14px 24px rgba(255, 79, 216, 0.3) !important;
}
html.gm-dark .side-panel-ship {
  background: linear-gradient(135deg, #8f7bff, #6a4fe0) !important;
  box-shadow: 0 14px 24px rgba(143, 123, 255, 0.3) !important;
}

html.gm-dark .empty-side-copy {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--gy-dim) !important;
}

html.gm-dark .recent-mini-item,
html.gm-dark .hot-machine-item {
  background: rgba(255, 255, 255, 0.05) !important;
}
html.gm-dark .recent-mini-item strong,
html.gm-dark .hot-machine-item strong { color: var(--gy-ink) !important; }
html.gm-dark .recent-mini-item span,
html.gm-dark .hot-machine-item span { color: var(--gy-dim) !important; }
html.gm-dark .hot-machine-item em { color: #c9bcff !important; }
html.gm-dark .hot-machine-item b { background: #0b0918 !important; box-shadow: inset 0 0 0 1px rgba(200, 255, 62, 0.35); }

html.gm-dark .low-stock-list div { background: rgba(255, 210, 74, 0.1) !important; }
html.gm-dark .low-stock-list strong { color: var(--gy-ink) !important; }

html.gm-dark .recent-log {
  border: 1px solid var(--gy-line) !important;
  background:
    radial-gradient(circle at 80% 0%, rgba(200, 255, 62, 0.1), transparent 34%),
    var(--gy-panel) !important;
  box-shadow: var(--gy-shadow-sm) !important;
}

/* ============================================================
   13. Modals — referral / shipment / charge
   ============================================================ */

html.gm-dark .referral-modal {
  border: 1px solid var(--gy-line-2) !important;
  background: var(--gy-panel-solid) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 79, 216, 0.12) !important;
}
html.gm-dark .referral-modal__hero {
  background:
    radial-gradient(circle at 20% 20%, rgba(200, 255, 62, 0.22), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(255, 79, 216, 0.24), transparent 32%),
    linear-gradient(135deg, #0b0918, #1c1636) !important;
}
html.gm-dark .referral-link-box div { background: rgba(255, 255, 255, 0.06) !important; }
html.gm-dark .referral-link-box span { color: var(--gy-dim) !important; }
html.gm-dark .referral-link-box strong { color: var(--gy-ink) !important; }
html.gm-dark .referral-stats-grid div { background: #0b0918 !important; box-shadow: inset 0 0 0 1px var(--gy-line); }
html.gm-dark .referral-sim {
  background: linear-gradient(135deg, rgba(143, 123, 255, 0.14), rgba(200, 255, 62, 0.12)) !important;
}
html.gm-dark .referral-sim strong { color: var(--gy-ink) !important; }
html.gm-dark .referral-sim span { color: var(--gy-dim) !important; }
html.gm-dark .referral-sim button { background: #0b0918 !important; box-shadow: inset 0 0 0 1px var(--gy-line-2); }

html.gm-dark .shipment-confirm-modal {
  border: 1px solid var(--gy-line-2) !important;
  background: var(--gy-panel-solid) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7) !important;
}
html.gm-dark .shipment-confirm-modal h2 { color: #fff !important; }
html.gm-dark .shipment-confirm-modal p { color: var(--gy-dim) !important; }
html.gm-dark .shipment-confirm-modal div:not(.shipment-confirm-modal__icon,
html.gm-dark .shipment-confirm-modal__actions) {
  background: rgba(255, 255, 255, 0.06) !important;
}
html.gm-dark .shipment-confirm-modal div:not(.shipment-confirm-modal__icon,
html.gm-dark .shipment-confirm-modal__actions) strong { color: var(--gy-ink) !important; }
html.gm-dark .shipment-confirm-modal div:not(.shipment-confirm-modal__icon,
html.gm-dark .shipment-confirm-modal__actions) span { color: var(--gy-dim) !important; }

/* [정리됨] 다크 구형 보관함 — Codex 캐비닛으로 대체 */
/* ============================================================
   15. Scrollbars & focus
   ============================================================ */

html.gm-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.gm-dark ::-webkit-scrollbar-thumb { background: #322a56; border-radius: 999px; }
html.gm-dark ::-webkit-scrollbar-track { background: transparent; }

html.gm-dark .floor-nav__item:focus-visible,
html.gm-dark .floor-line__cta:focus-visible,
html.gm-dark .header-action-chip:focus-visible,
html.gm-dark .primary-action:focus-visible,
html.gm-dark .secondary-action:focus-visible,
html.gm-dark .draw-action:focus-visible,
html.gm-dark .compact-machine:focus-visible {
  outline: 2px solid var(--gy-cyan);
  outline-offset: 2px;
}


/* [정리됨] 다크 자판기 네온글로우(D+) — 프리미엄 프로토타입/캐비닛으로 대체 */
/* ============ 공통(라이트+다크) 마감 수정 ============ */

/* 배경의 검정 기둥·회색 줄 제거 */
.shop-scene__ceiling span { display: none !important; }
html:not(.gm-dark) .shop-scene__ceiling,
html:not(.gm-dark) .shop-scene__ceiling--wall {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)) !important;
}
html:not(.gm-dark) .shop-wall-ambient {
  background: repeating-linear-gradient(90deg, rgba(127, 77, 255, 0.05) 0 90px, rgba(199, 255, 50, 0.05) 90px 180px, rgba(255, 209, 102, 0.04) 180px 270px) !important;
  opacity: .7 !important;
}

/* 테마 토글 버튼 */
#gm-theme-btn { background: rgba(23, 21, 31, 0.06); border: 1px solid rgba(23, 21, 31, 0.12); color: #17151f; }
html.gm-dark #gm-theme-btn { background: rgba(200, 255, 62, 0.14); border-color: rgba(200, 255, 62, 0.45); color: #c8ff3e; box-shadow: 0 0 12px rgba(200, 255, 62, 0.2); }

/* 출고 안내 문구 */
.gm-ship-note { margin: 8px 2px 0; font-size: 11px; font-weight: 800; color: #c78a2e; line-height: 1.45; text-align: center; }
.store-panel-card--dark .gm-ship-note, .collection-summary .gm-ship-note, .locker-summary .gm-ship-note { color: #ffd27a; }

/* ============ 진열장 니치(라이트): 조명 쏘는 우드 쇼케이스 ============ */
.showcase-card {
  background: linear-gradient(180deg, #f7f1e6, #eae1cf) !important;
  border: 1px solid #ddd0b8 !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 32px rgba(96, 74, 40, 0.16), inset 0 1px 0 #ffffff !important;
}
.showcase-card__glass {
  position: relative;
  min-height: 190px;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(60, 45, 20, 0.30), transparent 20%),
    radial-gradient(62% 48% at 50% 6%, rgba(255, 246, 214, 0.95), rgba(255, 246, 214, 0) 72%),
    linear-gradient(180deg, #f2e9d8 0%, #e4d8c0 62%, #d5c6a8 100%) !important;
  box-shadow:
    inset 0 16px 24px rgba(70, 52, 24, 0.35),
    inset 6px 0 16px rgba(70, 52, 24, 0.16),
    inset -6px 0 16px rgba(70, 52, 24, 0.16),
    inset 0 -8px 14px rgba(255, 255, 255, 0.6) !important;
}
.showcase-card__glass::after { /* LED 바 */
  content: "";
  position: absolute;
  top: 0; left: 7%; right: 7%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff8e0, #ffe9a8, #fff8e0);
  box-shadow: 0 5px 16px rgba(255, 226, 140, 0.95);
}
.showcase-card__spotlight {
  left: 26% !important; right: 26% !important; top: 0 !important; height: 62% !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(255, 248, 218, 0.85), rgba(255, 248, 218, 0)) !important;
  clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
  filter: none !important;
  opacity: .75;
}
.showcase-card .product-art__image { filter: drop-shadow(0 14px 12px rgba(60, 42, 12, 0.35)) !important; }
.showcase-card .product-art__plinth { opacity: .35; }

/* ============ 내 컬렉션 장식장 히어로 축소 ============ */
.collection-hero, .locker-hero { padding: 14px 18px !important; gap: 10px !important; border-radius: 20px !important; }
.collection-hero h1, .locker-hero h1 { font-size: 22px !important; line-height: 1.15 !important; margin-top: 2px !important; }
.collection-hero p, .locker-hero p { font-size: 11px !important; }
.collection-hero .mt-6 { margin-top: 6px !important; }
.collection-hero .mt-3 { margin-top: 4px !important; }
.collection-hero .icon-action { min-height: 32px !important; padding: 0 10px !important; font-size: 12px !important; }
.collection-summary, .locker-summary { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; padding: 8px !important; border-radius: 16px !important; align-content: center !important; }
.collection-summary div, .locker-summary div { padding: 8px 10px !important; border-radius: 11px !important; }
.collection-summary strong, .locker-summary strong { font-size: 15px !important; margin-top: 2px !important; overflow-wrap: normal !important; }
.collection-summary span, .locker-summary span { font-size: 9.5px !important; }
.collection-summary button, .locker-summary button { grid-column: 1 / -1 !important; min-height: 32px !important; font-size: 11.5px !important; }
@media (min-width: 960px) {
  .collection-hero { grid-template-columns: minmax(0, 1fr) 430px !important; align-items: center !important; }
  .locker-hero { grid-template-columns: minmax(0, 1fr) 340px !important; align-items: center !important; }
}

/* ============ PART E — 8대 진열(4열), 로고 볼, 럭셔리 쇼케이스, 획득 중복 제거 ============ */

/* ── 메인 자판기: 4열 × 2줄 = 8대 기본 진열 ── */
@media (min-width: 721px) {
  .machine-wall__track,
  .floor-line--expanded .machine-wall__track {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
/* (해제) 8대 제한 — 80대 전체 진열로 확장 */

/* ── 로고 볼: 중앙 동그라미 제거 → 형광+화이트 캡슐볼 ── */
header.sticky .shadow-neon::before {
  background: linear-gradient(180deg, #c7ff32 0 46%, #1c1a26 46% 54%, #ffffff 54%) !important;
  box-shadow: 0 0 12px rgba(199, 255, 62, 0.8), inset 0 -4px 6px rgba(0, 0, 0, 0.28), inset 2px 3px 5px rgba(255, 255, 255, 0.55), inset 0 0 0 1.5px rgba(23, 21, 31, 0.85) !important;
}

/* ── 획득 모달: 이미지 1장만 (하단 카드의 중복 이미지 숨김) ── */
.reward-card .product-art { display: none !important; }
.reward-card { min-height: 0 !important; padding: 12px 15px !important; }

/* ── 럭셔리 장식장: 어두운 칸 + 핀조명 + 역광 (라이트/다크 공통) ── */
.showcase-card,
html.gm-dark .showcase-card {
  background: linear-gradient(180deg, #312d38, #211e26) !important;
  border: 1px solid #4c4655 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px rgba(10, 8, 14, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.showcase-card h2, html.gm-dark .showcase-card h2 { color: #f6f3ea !important; }
.showcase-card p, html.gm-dark .showcase-card p { color: #b7b1c0 !important; }
.showcase-card__glass,
html.gm-dark .showcase-card__glass {
  position: relative;
  min-height: 200px;
  border-radius: 10px !important;
  background:
    radial-gradient(44% 38% at 50% 10%, rgba(255, 216, 150, 0.5), rgba(255, 216, 150, 0) 72%),
    linear-gradient(180deg, #17151b 0%, #232028 62%, #2b2730 100%) !important;
  box-shadow:
    inset 0 20px 34px rgba(0, 0, 0, 0.8),
    inset 8px 0 20px rgba(0, 0, 0, 0.55),
    inset -8px 0 20px rgba(0, 0, 0, 0.55),
    inset 0 -6px 12px rgba(255, 196, 128, 0.10) !important;
}
.showcase-card__glass::after,
html.gm-dark .showcase-card__glass::after { /* 웜 LED 바 */
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 3.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,223,158,.4), #ffdf9e, rgba(255,223,158,.4));
  box-shadow: 0 6px 20px rgba(255, 205, 115, 0.85);
}
.showcase-card__spotlight,
/* [정리됨] 구형 쇼케이스 니치/핀조명 — Codex 캐비닛으로 대체 */
/* ── 모바일 규격 ── */
@media (max-width: 720px) {
  .machine-wall__track,
  .floor-line--expanded .machine-wall__track { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .collection-summary, .locker-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .collection-hero h1, .locker-hero h1 { font-size: 19px !important; }
  .gm-cap { width: min(62vw, 210px) !important; }
  #gm-live-feed { display: none; } /* 모바일에선 사이드 피드 생략 */

  /* 2열 규격: 자판기를 칸 폭에 맞춰 유동 스케일 (내부는 %기반이라 비율 유지) */
  .machine-visual--mini {
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    margin: 0 auto !important;
  }
  .compact-machine__body { min-height: 0 !important; }
  .machine-visual--mini .machine-visual__sign { top: 6px !important; min-height: 28px !important; }
  .machine-visual--mini .machine-visual__sign strong { font-size: 10px !important; }
  .machine-visual--mini .machine-visual__glass { top: 38px !important; }
  .machine-visual--mini .machine-capsule { width: 17px !important; height: 17px !important; }
  .machine-visual--mini .coin-slot { width: 22px !important; height: 16px !important; }
  .machine-visual--mini .machine-visual__handle { width: 32px !important; height: 32px !important; margin: -16px 0 0 -16px !important; }
}

/* [정리됨] 자판기 볼무더기/네온링(F) — 프리미엄 프로토타입/캐비닛으로 대체 */
/* ============ PART G — 회원(로그인/마이페이지/출고/문의) UI ============ */
#gm-auth-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 44px;
  border-radius: 16px; padding: 0 15px; font-weight: 900; font-size: 13px; cursor: pointer;
  background: #17151f; color: #fff; border: 0; transition: transform .15s;
}
#gm-auth-btn:hover { transform: translateY(-1px); }
#gm-auth-btn.gm-auth-btn--in { background: #c7ff32; color: #17151f; }
html.gm-dark #gm-auth-btn { background: #c7ff32; color: #17151f; }
html.gm-dark #gm-auth-btn.gm-auth-btn--in { background: #26223a; color: #eae6ff; box-shadow: inset 0 0 0 1px #8f7bff66; }

.gm-modal {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 10, 18, .72); padding: 18px;
  overflow-y: auto;
}
.gm-modal__card {
  position: relative; width: min(520px, 96vw); max-height: 88vh; overflow-y: auto;
  background: #ffffff; color: #221f2e; border-radius: 22px; padding: 22px;
  box-shadow: 0 30px 80px rgba(8, 6, 14, .5);
  font-size: 14px; line-height: 1.5;
}
html.gm-dark .gm-modal__card { background: #191624; color: #efecff; box-shadow: 0 30px 80px rgba(0, 0, 0, .8), inset 0 0 0 1px #8f7bff33; }
.gm-x { position: absolute; right: 14px; top: 12px; border: 0; background: transparent; font-size: 17px; cursor: pointer; color: inherit; opacity: .6; }
.gm-x:hover { opacity: 1; }
.gm-h { font-size: 18px; font-weight: 900; margin: 0 0 12px; }
.gm-h small { font-weight: 600; opacity: .55; font-size: 12.5px; margin-left: 6px; }
.gm-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.gm-tab { flex: 1; padding: 11px 0; border: 0; border-radius: 12px; font-weight: 900; cursor: pointer; background: #f0edf8; color: #6d6785; }
.gm-tab.on { background: #17151f; color: #c7ff32; }
html.gm-dark .gm-tab { background: #241f36; color: #9b93bd; }
html.gm-dark .gm-tab.on { background: #c7ff32; color: #17151f; }
.gm-notice { background: #fff7d9; border: 1px solid #f0dd9a; color: #6b5b1c; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin: 0 0 12px; }
html.gm-dark .gm-notice { background: #2e2a18; border-color: #57511f; color: #ffe58a; }
.gm-f { display: block; font-size: 12px; font-weight: 800; color: #6d6785; margin-bottom: 10px; }
html.gm-dark .gm-f { color: #9b93bd; }
.gm-f small { font-weight: 600; }
.gm-f input, .gm-f textarea, .gm-inqform input, .gm-inqform textarea {
  display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 14px;
  border: 1.5px solid #dcd7ea; border-radius: 11px; padding: 10px 12px; outline: none;
  background: #fbfaff; color: #221f2e; box-sizing: border-box;
}
.gm-f input:focus, .gm-f textarea:focus, .gm-inqform input:focus, .gm-inqform textarea:focus { border-color: #8f7bff; }
html.gm-dark .gm-f input, html.gm-dark .gm-f textarea, html.gm-dark .gm-inqform input, html.gm-dark .gm-inqform textarea { background: #120f1d; border-color: #372f52; color: #efecff; }
.gm-chk { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #6d6785; margin: 4px 0 12px; cursor: pointer; }
html.gm-dark .gm-chk { color: #9b93bd; }
.gm-chk input { margin-top: 2px; }
.gm-btn {
  display: block; width: 100%; border: 0; border-radius: 14px; padding: 13px 0;
  background: #c7ff32; color: #17151f; font-weight: 900; font-size: 15px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(199, 255, 50, .35);
}
.gm-btn:hover { filter: brightness(1.05); }
.gm-btn--sm { padding: 10px 0; font-size: 13.5px; }
.gm-mini { border: 1.5px solid #dcd7ea; background: transparent; color: inherit; border-radius: 9px; padding: 5px 11px; font-size: 12px; font-weight: 800; cursor: pointer; }
html.gm-dark .gm-mini { border-color: #372f52; }
.gm-logout { margin-top: 8px; opacity: .7; }
.gm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.gm-stats > div { background: #f4f1fc; border-radius: 14px; padding: 12px 8px; text-align: center; }
html.gm-dark .gm-stats > div { background: #221d33; }
.gm-stats b { display: block; font-size: 19px; color: #7b5bff; }
html.gm-dark .gm-stats b { color: #c7ff32; }
.gm-stats span { font-size: 11.5px; opacity: .65; }
.gm-box { background: #f8f6fd; border-radius: 14px; padding: 13px 14px; margin-bottom: 11px; }
html.gm-dark .gm-box { background: #1f1b2e; }
.gm-box > b { display: block; font-size: 13px; margin-bottom: 7px; }
.gm-box code { background: #17151f; color: #c7ff32; border-radius: 7px; padding: 2px 9px; font-weight: 800; }
.gm-sub { font-size: 12px; opacity: .6; margin: 6px 0 0; }
.gm-shiprow, .gm-inqrow { border-top: 1px dashed rgba(120, 110, 160, .25); padding: 8px 0; font-size: 13px; }
.gm-shiprow small, .gm-inqrow small { display: block; opacity: .55; font-size: 11.5px; }
.gm-inqrow em { font-style: normal; font-size: 11.5px; font-weight: 800; }
.gm-inqrow p { margin: 3px 0; opacity: .8; white-space: pre-wrap; }
.gm-answer { background: rgba(95, 227, 150, .12); border-radius: 8px; padding: 7px 9px; }
.gm-badge { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 900; margin-right: 5px; }
.gm-badge--pending { background: #ffedb8; color: #7a5d00; }
.gm-badge--preparing { background: #d4e4ff; color: #1c4f9c; }
.gm-badge--shipped { background: #cff3dd; color: #146c3c; }
.gm-badge--done { background: #e4e0f2; color: #4a4370; }
.gm-badge--cancelled { background: #ffd9d9; color: #8f1f1f; }
.gm-item small { opacity: .55; }
.gm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.gm-loading { text-align: center; padding: 30px 0; opacity: .6; }
#gm-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 16px);
  background: #17151f; color: #c7ff32; font-weight: 900; font-size: 13.5px;
  padding: 12px 24px; border-radius: 99px; z-index: 2147483200;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: 0 12px 30px rgba(8, 6, 14, .45);
}
#gm-toast.on { opacity: 1; transform: translate(-50%, 0); }
body.gm-modal-open { overflow: hidden; }
@media (max-width: 720px) {
  .gm-grid2 { grid-template-columns: 1fr; gap: 0; }
  .gm-stats b { font-size: 16px; }
  #gm-auth-btn { height: 40px; padding: 0 12px; }
}

/* ============ PART H — 헤더 정렬·로그인/가입 분리·햄버거·소셜로그인·모바일 앱형 최적화 ============ */

/* 헤더 컨테이너를 본문(.shop-layout=1540px/18px)과 동일 규격으로 정렬 */
header.sticky > div {
  max-width: 1540px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}
.header-actions { gap: 8px !important; }
.header-actions > * { height: 44px; }

/* 홈 버튼 삭제 + 테마 버튼은 햄버거 안으로 이동(숨김) */
.gm-chip-home { display: none !important; }
#gm-theme-btn { display: none !important; }

/* 로그인/가입 분리 버튼 */
#gm-auth-wrap { display: inline-flex; gap: 6px; align-items: center; }
#gm-login-btn, #gm-signup-btn, #gm-me-btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 15px;
  border-radius: 16px; border: 0; font-weight: 900; font-size: 13px; cursor: pointer;
  transition: transform .15s;
}
#gm-login-btn:hover, #gm-signup-btn:hover, #gm-me-btn:hover { transform: translateY(-1px); }
#gm-login-btn { background: transparent; color: #17151f; box-shadow: inset 0 0 0 1.5px rgba(23, 21, 31, .25); }
#gm-signup-btn, #gm-me-btn { background: #c7ff32; color: #17151f; box-shadow: 0 4px 12px rgba(199, 255, 50, .3); }
html.gm-dark #gm-login-btn { color: #eae6ff; box-shadow: inset 0 0 0 1.5px rgba(234, 230, 255, .35); }

/* 햄버거 버튼 (맨 우측) */
#gm-menu-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.5px;
  width: 44px; height: 44px; border-radius: 16px; border: 0; cursor: pointer;
  background: #17151f; transition: transform .15s;
}
#gm-menu-btn:hover { transform: translateY(-1px); }
#gm-menu-btn span { display: block; width: 17px; height: 2.5px; border-radius: 2px; background: #c7ff32; }
html.gm-dark #gm-menu-btn { background: #c7ff32; }
html.gm-dark #gm-menu-btn span { background: #17151f; }

/* 드로어 */
#gm-drawer-wrap { position: fixed; inset: 0; z-index: 2147482900; }
.gm-drawer-bg { position: absolute; inset: 0; background: rgba(12, 10, 18, .55); opacity: 0; transition: opacity .22s; }
#gm-drawer-wrap.on .gm-drawer-bg { opacity: 1; }
.gm-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(330px, 88vw);
  background: #ffffff; color: #221f2e; box-shadow: -18px 0 50px rgba(8, 6, 14, .3);
  transform: translateX(103%); transition: transform .22s ease;
  overflow-y: auto; padding: 16px 16px 22px; display: flex; flex-direction: column; gap: 12px;
  border-radius: 20px 0 0 20px;
}
#gm-drawer-wrap.on .gm-drawer { transform: translateX(0); }
html.gm-dark .gm-drawer { background: #171422; color: #efecff; box-shadow: -18px 0 60px rgba(0, 0, 0, .7), inset 1px 0 0 #8f7bff33; }
.gm-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.gm-drawer__head b { font-size: 16px; }
.gm-drawer__head .gm-x { position: static; }
.gm-drawer__user {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: #17151f; color: #fff; border-radius: 16px; padding: 13px 15px; font-weight: 900; font-size: 14.5px;
}
.gm-drawer__user small { display: block; font-weight: 600; font-size: 11.5px; opacity: .6; margin-top: 3px; }
html.gm-dark .gm-drawer__user { background: #26223a; }
.gm-drawer__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gm-drawer__auth button {
  height: 46px; border-radius: 14px; border: 0; font-weight: 900; font-size: 14px; cursor: pointer;
  background: #f0edf8; color: #17151f;
}
.gm-drawer__auth button.hot { background: #c7ff32; }
html.gm-dark .gm-drawer__auth button { background: #241f36; color: #efecff; }
html.gm-dark .gm-drawer__auth button.hot { background: #c7ff32; color: #17151f; }
.gm-drawer__sec { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid rgba(120, 110, 160, .16); padding-top: 10px; }
.gm-drawer__label { font-size: 11px; font-weight: 900; opacity: .45; letter-spacing: .08em; margin-bottom: 2px; }
.gm-drawer__sec button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 14.5px; color: inherit;
  padding: 10px 8px; border-radius: 10px;
}
.gm-drawer__sec button:hover { background: rgba(143, 123, 255, .1); }
.gm-drawer__info { font-size: 12.5px; opacity: .75; padding: 4px 8px 8px; }
.gm-drawer__info b { color: #7b5bff; }
html.gm-dark .gm-drawer__info b { color: #c7ff32; }
.gm-drawer__foot { margin-top: auto; font-size: 11px; opacity: .45; line-height: 1.6; }
.gm-drawer__sec--app { display: none; } /* 데스크톱에선 헤더에 이미 있음 */

/* 소셜 로그인 (카카오/네이버/이메일) */
.gm-authlogo { text-align: center; margin: 4px 0 16px; }
.gm-authball {
  display: block; width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 10px;
  background: linear-gradient(180deg, #c7ff32 0 46%, #1c1a26 46% 54%, #ffffff 54%);
  box-shadow: 0 0 22px rgba(199, 255, 50, .55), inset 0 -8px 12px rgba(0, 0, 0, .25), inset 0 0 0 3px rgba(23, 21, 31, .85);
}
.gm-authlogo b { display: block; font-size: 18px; }
.gm-authlogo small { display: block; font-size: 12.5px; opacity: .55; margin-top: 3px; }
.gm-social {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 50px; border: 0; border-radius: 14px; cursor: pointer;
  font-weight: 900; font-size: 15px; margin-bottom: 9px; transition: filter .15s, transform .15s;
}
.gm-social:hover { filter: brightness(1.04); transform: translateY(-1px); }
.gm-social--kakao { background: #fee500; color: #191919; }
.gm-social--naver { background: #03c75a; color: #ffffff; }
.gm-nico { font-size: 17px; font-weight: 900; font-family: Arial, sans-serif; }
.gm-social--email { background: #17151f; color: #ffffff; }
html.gm-dark .gm-social--email { background: #2c2745; }
.gm-authfoot { text-align: center; font-size: 12.5px; opacity: .75; margin: 6px 0 0; }
.gm-authfoot a, .gm-chk a { color: #7b5bff; font-weight: 800; text-decoration: underline; }
html.gm-dark .gm-authfoot a, html.gm-dark .gm-chk a { color: #c7ff32; }
.gm-back { border: 0; background: transparent; color: inherit; opacity: .6; font-weight: 800; font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 8px; }
.gm-back:hover { opacity: 1; }

/* 약관 */
.gm-policy { max-height: 52vh; overflow-y: auto; font-size: 13px; line-height: 1.65; padding-right: 4px; }
.gm-policy b { display: block; margin: 12px 0 3px; font-size: 13.5px; }
.gm-policy b:first-child { margin-top: 0; }
.gm-policy p { margin: 0; opacity: .8; }
.gm-row-split { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.gm-row-split .gm-logout { margin-left: auto; margin-top: 0; }

/* ── 모바일: 앱처럼 — 로고+검색+햄버거만, 나머지는 드로어로 ── */
@media (max-width: 720px) {
  header.sticky > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px !important;
    padding: 8px 14px !important;
  }
  header.sticky > div > button:first-child { grid-row: 1; grid-column: 1; }
  header.sticky > div > button:first-child strong { font-size: 15.5px !important; }
  header.sticky > div > button:first-child .h-11 { height: 38px !important; width: 38px !important; }
  header.sticky > div > label { grid-row: 2; grid-column: 1 / -1; margin: 0 !important; }
  header.sticky > div > label input { height: 40px !important; font-size: 13px !important; }
  .header-actions { grid-row: 1; grid-column: 2; display: flex !important; width: auto !important; grid-template-columns: none !important; gap: 6px !important; justify-content: flex-end !important; }
  /* 앱 칩·로그인·출고안내 전부 드로어로: 헤더에는 햄버거만 */
  .header-actions .gm-tagged,
  .header-actions #gm-auth-wrap,
  .header-actions .gm-ship-note { display: none !important; }
  #gm-menu-btn { width: 40px; height: 40px; border-radius: 13px; }
  .gm-drawer__sec--app { display: flex; } /* 드로어 바로가기 섹션 활성 */

  /* 본문 정리정돈: 히어로 컴팩트 */
  .shop-layout { padding: 8px 12px 24px !important; }
  .shop-hero-panel { padding: 13px 14px !important; border-radius: 18px !important; gap: 10px !important; }
  .shop-hero-panel h1 { font-size: 20px !important; line-height: 1.3 !important; }
  .shop-hero-panel p { font-size: 12px !important; }
  .shop-hero-panel__stats { gap: 6px !important; }
  .home-kpi { padding: 9px 8px !important; border-radius: 13px !important; }
  .home-kpi strong { font-size: 16px !important; }
  .home-kpi span { font-size: 10.5px !important; }
  .floor-nav { gap: 6px !important; }
  .gacha-shop-scene__marquee, .gacha-shop-scene__marquee span { font-size: 11.5px !important; }
  .floor-line__header h2 { font-size: 16px !important; }
  .compact-machine__info strong { font-size: 12.5px !important; }
}

/* ============ PART I — 80대 진열·필터·푸터·모바일 탭바·허상 제거 ============ */

/* 바로 출고 가능 칩 삭제 (PC 포함) */
.gm-chip-quickship { display: none !important; }

/* 대량(240대) 진열 성능: 화면 밖 카드는 렌더 스킵 */
.compact-machine { content-visibility: auto; contain-intrinsic-size: auto 430px; }

/* 층 헤더의 정적 칩(10대 진열/인기/품절임박) → 키워드 필터로 교체 */
.floor-line__chips { display: none !important; }
.gm-filter-row {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 10px 0 4px; position: relative; z-index: 5;
}
.gm-filter {
  height: 34px; padding: 0 14px; border-radius: 99px; border: 0; cursor: pointer;
  background: rgba(23, 21, 31, .06); color: #4a4661;
  font-weight: 800; font-size: 12.5px;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 31, .1);
  transition: transform .12s;
}
.gm-filter:hover { transform: translateY(-1px); }
.gm-filter.on { background: #17151f; color: #c7ff32; box-shadow: none; }
html.gm-dark .gm-filter { background: rgba(255, 255, 255, .05); color: #b9b2d8; box-shadow: inset 0 0 0 1px rgba(143, 123, 255, .25); }
html.gm-dark .gm-filter.on { background: #c7ff32; color: #17151f; }

/* 로그인 모달 구분선 */
.gm-or { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-size: 11.5px; opacity: .5; font-weight: 800; }
.gm-or:before, .gm-or:after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .35; }

/* 사이트 푸터 (회사정보) */
#gm-footer {
  position: relative; z-index: 5;
  margin-top: 30px; padding: 30px 18px 40px;
  background: #14121c; color: #b7b1cf;
  border-top: 1px solid rgba(199, 255, 50, .18);
}
.gm-footer__in { max-width: 1540px; margin: 0 auto; }
.gm-footer__brand { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: #fff; }
.gm-footer__brand b { font-size: 15px; letter-spacing: .04em; }
.gm-footer__brand small { opacity: .55; font-size: 12px; }
.gm-footer__ball {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, #c7ff32 0 46%, #1c1a26 46% 54%, #ffffff 54%);
  box-shadow: 0 0 10px rgba(199, 255, 50, .5);
}
.gm-footer__links { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.gm-footer__links i { opacity: .35; font-style: normal; }
.gm-footer__links button {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  color: #e9e5ff; font-weight: 800; font-size: 13px;
}
.gm-footer__links button:hover { color: #c7ff32; }
.gm-footer__info { font-size: 12px; line-height: 1.8; opacity: .75; margin: 0 0 10px; }
.gm-footer__note { font-size: 11.5px; line-height: 1.7; opacity: .55; margin: 0 0 10px; }
.gm-footer__copy { font-size: 11.5px; opacity: .45; margin: 0; }
html.gm-dark #gm-footer { background: #0d0b14; }

/* 모바일 하단 내비바 */
#gm-tabbar { display: none; }
@media (max-width: 720px) {
  #gm-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482800;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(23, 21, 31, .1);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  }
  #gm-tabbar button {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: 0; background: transparent; cursor: pointer;
    font-weight: 800; font-size: 10px; color: #6d6785; padding: 3px 0;
  }
  #gm-tabbar button i { font-style: normal; font-size: 18px; line-height: 1; }
  #gm-tabbar button:active { color: #17151f; }
  html.gm-dark #gm-tabbar { background: rgba(18, 15, 26, .96); border-top-color: rgba(143, 123, 255, .25); }
  html.gm-dark #gm-tabbar button { color: #9b93bd; }
  body { padding-bottom: 66px !important; }
  #gm-footer { padding-bottom: 86px; }
  .gm-filter-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gm-filter { flex: 0 0 auto; height: 32px; font-size: 12px; }
  #gm-toast { bottom: 84px; }
}

/* ============ PART J — 성능 재점검·OG 지원 ============ */
/* 네온링은 기본 정지 — 화면에 보이는 머신만 JS(IntersectionObserver)가 재생 */
.gm-neon-ring i { animation-play-state: paused; }
/* 라인 펼침 시 레이아웃 재계산 격리 */
.machine-wall__track { contain: layout; }
.floor-line { contain: layout; }
/* 펼침 전환 중 카드 그림자 연산 절감 */
.compact-machine { will-change: auto; }

/* ============ PART K — 층 스케일 공백 제거·주소검색 UI ============ */
/* framer가 비확장 층에 scale(.985)을 걸어 9,600px 높이에서 상단 ~72px 공백 발생 → 제거 */
.floor-line { transform: none !important; }

.gm-ziprow { display: flex; gap: 8px; align-items: flex-end; }
.gm-ziprow .gm-f { flex: 0 0 130px; margin-bottom: 10px; }
.gm-zipbtn {
  flex: 1; height: 41px; margin-bottom: 10px;
  border: 0; border-radius: 11px; cursor: pointer;
  background: #17151f; color: #c7ff32; font-weight: 900; font-size: 13.5px;
}
.gm-zipbtn:hover { filter: brightness(1.15); }
html.gm-dark .gm-zipbtn { background: #c7ff32; color: #17151f; }

/* ============ PART L — 햄버거 = 버튼 아래 컴팩트 드롭다운 ============ */
#gm-drawer-wrap { position: fixed; inset: 0; z-index: 2147482900; }
.gm-drop {
  position: fixed; width: min(290px, calc(100vw - 20px));
  max-height: min(72vh, 560px); overflow-y: auto;
  background: #ffffff; color: #221f2e;
  border-radius: 16px; padding: 10px;
  box-shadow: 0 18px 50px rgba(8, 6, 14, .35), 0 0 0 1px rgba(23, 21, 31, .06);
  opacity: 0; transform: translateY(-6px); transition: opacity .16s, transform .16s;
}
#gm-drawer-wrap.on .gm-drop { opacity: 1; transform: translateY(0); }
html.gm-dark .gm-drop { background: #1b1826; color: #efecff; box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 1px #8f7bff33; }
.gm-drop__user {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: #17151f; color: #fff; border-radius: 12px; padding: 10px 13px;
  font-weight: 900; font-size: 13.5px; margin-bottom: 6px;
}
.gm-drop__user small { display: block; font-weight: 600; font-size: 11px; opacity: .6; margin-top: 2px; }
html.gm-dark .gm-drop__user { background: #26223a; }
.gm-drop__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.gm-drop__auth button { height: 38px; border-radius: 11px; border: 0; font-weight: 900; font-size: 13px; cursor: pointer; background: #f0edf8; color: #17151f; }
.gm-drop__auth button.hot { background: #c7ff32; }
html.gm-dark .gm-drop__auth button { background: #262138; color: #efecff; }
html.gm-dark .gm-drop__auth button.hot { background: #c7ff32; color: #17151f; }
.gm-drop__sec { border-top: 1px solid rgba(120, 110, 160, .14); padding-top: 4px; margin-top: 4px; }
.gm-drop__sec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.gm-drop__sec button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; color: inherit;
  font: inherit; font-weight: 800; font-size: 13.5px;
  padding: 9px 9px; border-radius: 9px;
}
.gm-drop__sec button:hover { background: rgba(143, 123, 255, .1); }
.gm-drop__info { font-size: 12px; font-weight: 800; opacity: .7; padding: 6px 9px 2px; }
.gm-drop__toggle { justify-content: space-between; }
.gm-switch {
  flex: 0 0 auto; width: 38px; height: 22px; border-radius: 99px;
  background: #d5d1e4; position: relative; transition: background .18s;
}
.gm-switch i {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.gm-switch.on { background: #c7ff32; }
.gm-switch.on i { transform: translateX(16px); }
html.gm-dark .gm-switch { background: #3a3355; }
html.gm-dark .gm-switch.on { background: #c7ff32; }
/* 데스크톱: 바로가기 섹션은 헤더에 이미 있으므로 숨김 (모바일만 표시) */
.gm-drop__sec--app { display: none; }
@media (max-width: 720px) { .gm-drop__sec--app { display: block; } }

/* ============ PART M — 배너 슬라이더·추천모달 개선·검수 배지 ============ */
#gm-banner {
  position: relative; width: min(100%, 1440px); max-height: 300px; overflow: hidden;
  border-radius: 24px; aspect-ratio: 1920 / 340;
  background: #090713; box-shadow: 0 18px 44px rgba(30, 21, 58, .12);
  margin: 12px auto 12px;
}
.gm-banner__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; display: block; }
.gm-banner__slide.on { opacity: 1; }
.gm-banner__slide picture,
.gm-banner__slide img { width: 100%; height: 100%; display: block; }
.gm-banner__slide img { object-fit: cover; object-position: center; }
.gm-banner__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.gm-banner__dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: all .2s; }
.gm-banner__dots i.on { background: #c7ff32; width: 20px; }
@media (max-width: 720px) {
  #gm-banner {
    width: calc(100vw - 24px);
    max-height: none;
    aspect-ratio: 750 / 360;
    border-radius: 18px;
    margin: 10px auto 10px;
  }
  .gm-banner__dots { bottom: 7px; gap: 6px; }
  .gm-banner__dots i { width: 6px; height: 6px; }
  .gm-banner__dots i.on { width: 17px; }
}
@media (max-width: 900px) {
  #gm-banner {
    width: calc(100vw - 24px);
    max-height: none;
    aspect-ratio: 750 / 360;
    border-radius: 18px;
    margin: 10px auto 10px;
  }
}

/* 추천 모달: 발급 완료 잠금 + 복사 아이콘 */
.gm-issued { opacity: .55; pointer-events: none; filter: saturate(.4); }
.referral-link-box > div { position: relative; }
.gm-copy-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; border: 0; cursor: pointer;
  background: rgba(199, 255, 50, .15); color: #c7ff32;
}
.gm-copy-btn:hover { background: rgba(199, 255, 50, .3); }

/* 검수 대상 배지 (테스트 모드 내부 표시) */
.gm-review-chip {
  font-style: normal; font-size: 10px; font-weight: 900;
  background: rgba(255, 170, 60, .18); color: #c97b16;
  border: 1px solid rgba(255, 170, 60, .45);
  border-radius: 99px; padding: 1px 7px; margin-left: 4px;
}
html.gm-dark .gm-review-chip { color: #ffc46b; }

/* [정리됨] CSS 프리미엄 자판기(N) — 프리미엄 프로토타입/캐비닛으로 대체 */
/* [정리됨] Codex 머신 셸 v1(중복) — 프로토타입 PNG로 대체 */
/* gm-codex-prototype-global-20260708
   Global visual-only swap: every machine uses the same transparent 3D frame. */
.compact-machine:has(.machine-visual--prototype) {
  min-width: 218px !important;
  min-height: 502px !important;
  padding: 0 !important;
  overflow: visible !important;
  border-color: rgba(160, 148, 255, .34) !important;
  background: linear-gradient(180deg, rgba(25, 22, 48, .92), rgba(10, 8, 22, .96)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 48px rgba(8, 5, 24, .38) !important;
  content-visibility: auto !important;
  contain-intrinsic-size: 218px 502px !important;
}
.compact-machine:has(.machine-visual--prototype) .compact-machine__rail,
.compact-machine:has(.machine-visual--prototype) .compact-machine__badges {
  display: none !important;
}
.compact-machine:has(.machine-visual--prototype) .compact-machine__body {
  min-height: 396px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
.compact-machine:has(.machine-visual--prototype) .compact-machine__info {
  margin: 0 12px 12px !important;
  border-radius: 18px !important;
}

.machine-visual--prototype {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  contain: layout paint !important;
  transform-origin: center center !important;
}
.machine-visual--prototype:before {
  content: "" !important;
  position: absolute !important;
  inset: 7% 7% 5% !important;
  z-index: 0 !important;
  border-radius: 24px !important;
  background: radial-gradient(circle at 50% 8%, rgba(203,255,64,.24), transparent 34%), rgba(5, 7, 13, .78) !important;
  filter: blur(18px) !important;
}
.machine-visual--prototype:after {
  content: none !important;
  display: none !important;
}
.machine-visual--prototype.machine-visual--mini {
  width: 216px !important;
  height: 360px !important;
  aspect-ratio: auto !important;
}
.machine-visual--prototype.machine-visual--detail {
  width: min(480px, 82vw) !important;
  height: min(800px, calc(82vw * 1.665)) !important;
  aspect-ratio: auto !important;
}
.machine-visual--prototype .gm-prototype-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: url("/__gm_test3_claude_20260713_0001/assets/gm-machine-premium-prototype-cutout.png") center / 100% 100% no-repeat !important;
  filter: brightness(1.13) contrast(1.06) drop-shadow(0 16px 24px rgba(0, 0, 0, .38)) !important;
}
.machine-visual--prototype .machine-visual__top-light,
.machine-visual--prototype .machine-visual__sign,
.machine-visual--prototype .machine-visual__panel,
.machine-visual--prototype .machine-visual__poster,
.machine-visual--prototype .machine-visual__controls,
.machine-visual--prototype .machine-visual__chute,
.machine-visual--prototype .machine-visual__base,
.machine-visual--prototype .machine-visual__reflections,
.machine-visual--prototype .machine-visual__capsules,
.machine-visual--prototype .gm-neon-ring {
  display: none !important;
}
.machine-visual--prototype .machine-visual__glass {
  display: block !important;
  position: absolute !important;
  left: 19.4% !important;
  right: 19.4% !important;
  top: 12.2% !important;
  height: 36.6% !important;
  z-index: 2 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.machine-visual--prototype .machine-visual__glass:before,
.machine-visual--prototype .machine-visual__glass:after {
  display: none !important;
}
.machine-visual--prototype .machine-visual__glass-sticker {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: 1 !important;
  filter: saturate(1.1) contrast(1.04) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.14) !important;
  transform: none !important;
}

.gm-prototype-detail .machine-detail-stage > .mt-5 {
  background: radial-gradient(circle at 50% 8%, rgba(199,255,50,.16), transparent 28%), linear-gradient(180deg, #121025, #080712) !important;
  border-color: rgba(166, 151, 255, .34) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 24px 80px rgba(4, 2, 14, .45) !important;
}
.gm-prototype-detail .machine-visual--prototype.machine-visual--detail:after {
  display: none !important;
}
.gm-prototype-detail .machine-visual--prototype.machine-visual--detail .gm-prototype-frame {
  filter: brightness(1.16) contrast(1.08) drop-shadow(0 34px 48px rgba(0, 0, 0, .58)) !important;
}
.gm-prototype-detail .machine-visual--prototype.machine-visual--active {
  animation: gmPrototypeCabinetPulse .58s ease-in-out infinite alternate !important;
}
.gm-prototype-detail .machine-visual--prototype.machine-visual--active .gm-prototype-frame {
  filter: brightness(1.28) contrast(1.1) drop-shadow(0 0 28px rgba(199,255,50,.34)) drop-shadow(0 34px 48px rgba(0, 0, 0, .58)) !important;
}
.gm-prototype-detail .machine-visual--prototype.machine-visual--active:before {
  background: radial-gradient(circle at 50% 8%, rgba(203,255,64,.42), transparent 35%), rgba(5, 7, 13, .86) !important;
}
.gm-prototype-detail .machine-visual--prototype .capsule-flight-ball,
.gm-prototype-detail .machine-visual--prototype .capsule-ready-ball {
  z-index: 8 !important;
  width: 96px !important;
  height: 96px !important;
  border: 3px solid rgba(255,255,255,.78) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.98) 0 12%, transparent 13%),
    linear-gradient(135deg, var(--capsule-a) 0 48%, #fff 49% 52%, var(--capsule-b) 53% 100%) !important;
  box-shadow: inset 0 -18px 20px rgba(0,0,0,.28), 0 18px 34px rgba(0,0,0,.55), 0 0 42px color-mix(in srgb, var(--capsule-b) 65%, transparent) !important;
}
.gm-prototype-detail .machine-visual--prototype .capsule-flight-ball {
  animation: gmPrototypeDrop 1.45s cubic-bezier(.2,.9,.2,1) both !important;
}
.gm-prototype-detail .machine-visual--prototype .capsule-ready-ball {
  animation: gmPrototypeReady 1.1s ease-in-out infinite !important;
}
.gm-prototype-detail .machine-visual--prototype .capsule-ready-ball__hint {
  bottom: -38px !important;
  background: #0b0918 !important;
  color: #c7ff32 !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.45), 0 0 18px rgba(199,255,50,.42) !important;
}
@keyframes gmPrototypeDrop {
  0% { filter: blur(1px); opacity: 0; }
  18% { opacity: 1; }
  70% { filter: blur(0); }
  100% { filter: blur(0); }
}
@keyframes gmPrototypeReady {
  0%, 100% { box-shadow: inset 0 -18px 20px rgba(0,0,0,.28), 0 18px 34px rgba(0,0,0,.55), 0 0 36px color-mix(in srgb, var(--capsule-b) 60%, transparent); }
  50% { box-shadow: inset 0 -18px 20px rgba(0,0,0,.28), 0 18px 44px rgba(0,0,0,.62), 0 0 86px color-mix(in srgb, var(--capsule-b) 100%, transparent); }
}
@keyframes gmPrototypeCabinetPulse {
  from { transform: translateZ(0) scale(1); }
  to { transform: translateZ(0) scale(1.012); }
}

body.gm-prototype-mode #gm-open {
  perspective: 1200px !important;
}
body.gm-prototype-mode #gm-open .gm-open-dim {
  background:
    radial-gradient(circle at 50% 40%, rgba(199,255,50,.2), transparent 24%),
    radial-gradient(circle at 50% 58%, rgba(127,77,255,.28), transparent 34%),
    rgba(3, 2, 10, .88) !important;
  backdrop-filter: blur(10px) saturate(1.15) !important;
  z-index: 0 !important;
}
body.gm-prototype-mode #gm-open .gm-cap-wrap {
  gap: 34px !important;
  transform-style: preserve-3d !important;
}
body.gm-prototype-mode #gm-open .gm-cap {
  z-index: 10 !important;
  width: min(40vw, 300px) !important;
  height: min(40vw, 300px) !important;
  transform-style: preserve-3d !important;
  border: 4px solid rgba(255,255,255,.85) !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.95) 0 10%, transparent 11%),
    linear-gradient(135deg, var(--ca) 0 47%, rgba(255,255,255,.96) 48% 52%, var(--cb) 53% 100%) !important;
  box-shadow:
    inset -26px -34px 42px rgba(0,0,0,.3),
    inset 22px 18px 28px rgba(255,255,255,.22),
    0 32px 82px rgba(0,0,0,.62),
    0 0 92px color-mix(in srgb, var(--cb) 72%, transparent) !important;
  animation: gmPrototypeCapFloat 1.35s ease-in-out infinite alternate !important;
}
body.gm-prototype-mode #gm-open .gm-cap-hint {
  position: relative !important;
  z-index: 12 !important;
}
body.gm-prototype-mode #gm-open .gm-cap:before {
  content: "" !important;
  position: absolute !important;
  inset: 8% 12% auto 12% !important;
  height: 26% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.78), transparent) !important;
  filter: blur(2px) !important;
  opacity: .72 !important;
}
body.gm-prototype-mode #gm-open .gm-cap-hint {
  padding: 12px 18px !important;
  border-radius: 999px !important;
  background: rgba(11, 9, 24, .88) !important;
  color: #c7ff32 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 24px rgba(199,255,50,.3) !important;
}
body.gm-prototype-mode #gm-open.gm-shake .gm-cap {
  animation: gmPrototypeCapCharge .09s linear infinite !important;
}
body.gm-prototype-mode #gm-open.gm-split .gm-cap-top {
  transform: translate3d(-82%, -146%, 130px) rotateX(56deg) rotateZ(-38deg) !important;
  opacity: 0 !important;
}
body.gm-prototype-mode #gm-open.gm-split .gm-cap-bot {
  transform: translate3d(76%, 132%, 100px) rotateX(-56deg) rotateZ(34deg) !important;
  opacity: 0 !important;
}
body.gm-prototype-mode #gm-open.gm-split:after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(62vw, 520px) !important;
  height: min(62vw, 520px) !important;
  border-radius: 999px !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle, rgba(255,255,255,.96), rgba(199,255,50,.55) 20%, rgba(127,77,255,.28) 42%, transparent 68%) !important;
  animation: gmPrototypeOpenFlash .72s ease-out both !important;
  pointer-events: none !important;
}
@keyframes gmPrototypeCapFloat {
  from { transform: rotateX(7deg) rotateY(-8deg) translateY(0) scale(1); }
  to { transform: rotateX(-4deg) rotateY(8deg) translateY(-12px) scale(1.035); }
}
@keyframes gmPrototypeCapCharge {
  0% { transform: rotateX(0) rotateY(0) translateX(0); }
  33% { transform: rotateX(5deg) rotateY(-10deg) translateX(-8px); }
  66% { transform: rotateX(-4deg) rotateY(10deg) translateX(8px); }
  100% { transform: rotateX(0) rotateY(0) translateX(0); }
}
@keyframes gmPrototypeOpenFlash {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.25); filter: blur(0); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.45); filter: blur(18px); }
}

/* Prototype draw sequence: reference-like round capsule, glowing ring, prize card rise. */
.gm-prototype-detail .machine-visual--prototype .capsule-flight-ball {
  overflow: visible !important;
}
.gm-prototype-detail .machine-visual--prototype .capsule-flight-ball:after,
.gm-prototype-detail .machine-visual--prototype .capsule-ready-ball:before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -18px !important;
  width: 116px !important;
  height: 24px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: radial-gradient(ellipse, rgba(213,255,72,.78), rgba(213,255,72,.24) 42%, transparent 70%) !important;
  filter: blur(.4px) !important;
  opacity: .9 !important;
  pointer-events: none !important;
}
.gm-prototype-detail .machine-visual--prototype .capsule-flight-ball:before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -120px !important;
  width: 76px !important;
  height: 118px !important;
  transform: translateX(-50%) !important;
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.42) 13px 15px, transparent 16px 28px) !important;
  filter: blur(2px) !important;
  opacity: .55 !important;
  pointer-events: none !important;
}
body.gm-prototype-mode #gm-open .gm-cap {
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  filter: drop-shadow(0 36px 52px rgba(0,0,0,.62)) drop-shadow(0 0 72px color-mix(in srgb, var(--cb) 70%, transparent)) !important;
  overflow: hidden !important;
}
body.gm-prototype-mode #gm-open .gm-cap:before {
  inset: 10% 16% auto 16% !important;
  z-index: 5 !important;
  height: 28% !important;
  background: radial-gradient(ellipse at 35% 30%, rgba(255,255,255,.96), rgba(255,255,255,.34) 45%, transparent 72%) !important;
}
body.gm-prototype-mode #gm-open .gm-cap-top,
body.gm-prototype-mode #gm-open .gm-cap-bot {
  left: 0 !important;
  width: 100% !important;
  height: 51% !important;
  border: 3px solid rgba(255,255,255,.72) !important;
  overflow: hidden !important;
  backface-visibility: hidden !important;
  box-shadow: inset -22px -18px 28px rgba(0,0,0,.22), inset 20px 16px 26px rgba(255,255,255,.22) !important;
}
body.gm-prototype-mode #gm-open .gm-cap-top {
  top: 0 !important;
  border-bottom-width: 1px !important;
  border-radius: 999px 999px 18px 18px !important;
  background:
    radial-gradient(circle at 27% 22%, rgba(255,255,255,.96) 0 12%, transparent 13%),
    linear-gradient(155deg, rgba(255,255,255,.93), rgba(224,230,255,.7) 48%, color-mix(in srgb, var(--cb) 28%, rgba(255,255,255,.72))) !important;
}
body.gm-prototype-mode #gm-open .gm-cap-bot {
  bottom: 0 !important;
  border-top-width: 1px !important;
  border-radius: 18px 18px 999px 999px !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.42) 0 12%, transparent 13%),
    linear-gradient(145deg, color-mix(in srgb, var(--ca) 90%, #ffffff), color-mix(in srgb, var(--cb) 76%, #20133e) 72%) !important;
}
body.gm-prototype-mode #gm-open .gm-cap-seam {
  left: 2% !important;
  right: 2% !important;
  top: calc(50% - 3px) !important;
  height: 6px !important;
  background: linear-gradient(90deg, rgba(255,255,255,.88), rgba(25,22,46,.36), rgba(255,255,255,.78)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 0 18px rgba(255,255,255,.28) !important;
}
body.gm-prototype-mode #gm-open .gm-cap-wrap:before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(50% + min(22vw, 148px)) !important;
  width: min(36vw, 260px) !important;
  height: min(4.8vw, 34px) !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: radial-gradient(ellipse, rgba(213,255,72,.82), rgba(213,255,72,.22) 44%, transparent 72%) !important;
  opacity: .82 !important;
  filter: blur(.5px) !important;
}
body.gm-prototype-mode #gm-open.gm-split .gm-cap-wrap:after {
  content: none !important;
  display: none !important;
}
body.gm-prototype-mode #gm-open .gm-prize-card {
  position: absolute !important;
  left: 50% !important;
  top: 36% !important;
  display: grid !important;
  place-items: center !important;
  width: min(24vw, 150px) !important;
  height: min(31vw, 190px) !important;
  border-radius: 22px !important;
  border: 3px solid rgba(255,255,255,.78) !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(160deg, #ffd1ed, #be75ff 66%, #743cff) !important;
  color: rgba(255,255,255,.92) !important;
  font-size: min(14vw, 92px) !important;
  font-weight: 1000 !important;
  text-shadow: 0 0 24px rgba(255,255,255,.78) !important;
  box-shadow: 0 0 32px rgba(255,185,235,.74), 0 0 110px rgba(127,77,255,.72) !important;
  transform: translate(-50%, -118%) rotate(-8deg) !important;
  animation: gmPrototypePrizeCard .82s cubic-bezier(.16,1.2,.2,1) both !important;
  z-index: 40 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.gm-prototype-mode #gm-open.gm-split .gm-prize-card {
  opacity: 1 !important;
}
body.gm-prototype-mode #gm-open.gm-split .gm-cap-wrap {
  animation: gmPrototypeRays .82s ease-out both !important;
}
body.gm-prototype-mode #gm-open.gm-split .gm-cap-wrap .gm-cap {
  overflow: visible !important;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.5)) !important;
}
@keyframes gmPrototypePrizeCard {
  0% { opacity: 0; transform: translate(-50%, 4%) rotate(0deg) scale(.38); filter: blur(6px); }
  58% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -118%) rotate(-8deg) scale(1); filter: blur(0); }
}
@keyframes gmPrototypeRays {
  0%, 20% { box-shadow: none; }
  100% { box-shadow: 0 0 0 999px rgba(5,4,14,.06); }
}

.gm-prototype-detail .reward-modal {
  overflow: visible !important;
  border-color: rgba(199,255,50,.36) !important;
  background: radial-gradient(circle at 50% 8%, rgba(199,255,50,.2), transparent 34%), linear-gradient(180deg, #171229, #0b0918) !important;
  color: #fff !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.gm-prototype-detail .reward-modal:before,
.gm-prototype-detail .reward-modal:after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 122px !important;
  width: 148px !important;
  height: 74px !important;
  border-radius: 148px 148px 12px 12px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: linear-gradient(135deg, #fff 0 48%, #7f4dff 49% 100%) !important;
  box-shadow: inset 0 -12px 20px rgba(0,0,0,.24), 0 0 38px rgba(199,255,50,.42) !important;
}
.gm-prototype-detail .reward-modal:before {
  transform: translateX(-50%) translateY(-36px) rotate(-18deg) !important;
  animation: gmShellTop .72s cubic-bezier(.2,1.4,.3,1) both !important;
}
.gm-prototype-detail .reward-modal:after {
  transform: translateX(-50%) translateY(18px) rotate(18deg) scaleY(-1) !important;
  animation: gmShellBottom .72s cubic-bezier(.2,1.4,.3,1) both !important;
}
.gm-prototype-detail .capsule-open-impact {
  color: #fff !important;
  background: radial-gradient(circle at 50% 16%, rgba(199,255,50,.22), transparent 42%), rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 60px rgba(127,77,255,.28) !important;
  animation: gmPrizeRise .76s cubic-bezier(.16,1.26,.28,1) both !important;
}
.gm-prototype-detail .capsule-open-impact strong,
.gm-prototype-detail .reward-card p {
  color: #fff !important;
}
@keyframes gmShellTop {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) rotate(0deg) scale(.7); }
  to { opacity: 1; transform: translateX(-50%) translateY(-36px) rotate(-18deg) scale(1); }
}
@keyframes gmShellBottom {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) rotate(0deg) scale(.7) scaleY(-1); }
  to { opacity: 1; transform: translateX(-50%) translateY(18px) rotate(18deg) scale(1) scaleY(-1); }
}
@keyframes gmPrizeRise {
  from { opacity: 0; transform: translateY(42px) scale(.72); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@media (max-width: 720px) {
  .compact-machine:has(.machine-visual--prototype) {
    min-width: 184px !important;
    min-height: 432px !important;
  }
  .compact-machine:has(.machine-visual--prototype) .compact-machine__body {
    min-height: 330px !important;
  }
  .machine-visual--prototype.machine-visual--mini {
    width: 184px !important;
    height: 307px !important;
  }
  .machine-visual--prototype.machine-visual--detail {
    width: min(390px, 88vw) !important;
    height: min(650px, calc(88vw * 1.665)) !important;
  }
}

/* gm-codex-r01-real-capsule-fx-20260708
   R-01 only: realistic capsule PNG, coin insert, lever turn, chute drop, clean reward. */
:root {
  --gm-r01-capsule: url("/__gm_test3_claude_20260713_0001/assets/gm-capsule-real-purple.png?v=2");
}

.gm-prototype-detail .machine-visual--prototype .gm-prototype-effects {
  position: absolute !important;
  inset: 0 !important;
  z-index: 18 !important;
  display: block !important;
  pointer-events: none !important;
}

.gm-prototype-detail .machine-visual--prototype .gm-proto-coin,
.gm-prototype-detail .machine-visual--prototype .gm-proto-lever,
.gm-prototype-detail .machine-visual--prototype .gm-proto-capsule-drop,
.gm-prototype-detail .machine-visual--prototype .gm-proto-chute-glow {
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
}

.gm-prototype-detail .machine-visual--prototype .gm-proto-coin {
  left: 26.2% !important;
  top: 67.2% !important;
  width: 11.4% !important;
  aspect-ratio: 1 !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.95), transparent 18%),
    radial-gradient(circle at 50% 50%, #fff4a3 0 16%, #e6ac22 42%, #7c5013 72%, #fff1a6 76% 80%, #8a5a15 82%) !important;
  box-shadow: inset -6px -8px 14px rgba(80,45,4,.42), 0 0 28px rgba(255,221,79,.56), 0 10px 22px rgba(0,0,0,.4) !important;
  transform-style: preserve-3d !important;
}

.gm-prototype-detail[data-gm-phase="coin"] .machine-visual--prototype .gm-proto-coin {
  animation: gmR01CoinInsert .96s cubic-bezier(.22,.92,.26,1) both !important;
}

.gm-prototype-detail .machine-visual--prototype .gm-proto-lever {
  left: 41.4% !important;
  top: 63.9% !important;
  width: 19.3% !important;
  aspect-ratio: 1 !important;
  border-radius: 999px !important;
  opacity: .98 !important;
  background:
    radial-gradient(circle at 37% 31%, rgba(255,255,255,.28), transparent 18%),
    radial-gradient(circle at 50% 50%, #11121a 0 44%, #05060b 58%, #242332 73%, #090911 100%) !important;
  box-shadow:
    inset 7px 9px 16px rgba(255,255,255,.1),
    inset -13px -16px 22px rgba(0,0,0,.72),
    0 0 0 4px rgba(219,255,78,.16),
    0 0 31px rgba(219,255,78,.44),
    0 14px 28px rgba(0,0,0,.42) !important;
}

.gm-prototype-detail .machine-visual--prototype .gm-proto-lever:before {
  content: "" !important;
  position: absolute !important;
  inset: -15% !important;
  border-radius: inherit !important;
  background:
    conic-gradient(from 236deg, transparent 0 16deg, rgba(219,255,78,.95) 18deg 112deg, transparent 116deg 202deg, rgba(219,255,78,.64) 205deg 252deg, transparent 256deg),
    radial-gradient(circle, transparent 58%, rgba(219,255,78,.95) 60% 63%, transparent 65%) !important;
  filter: drop-shadow(0 0 11px rgba(219,255,78,.82)) !important;
  opacity: .92 !important;
}

.gm-prototype-detail .machine-visual--prototype .gm-proto-lever:after {
  content: "" !important;
  position: absolute !important;
  left: 16% !important;
  right: 16% !important;
  top: 39% !important;
  height: 22% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #343746, #11121a 52%, #05060b) !important;
  box-shadow: inset 0 4px 7px rgba(255,255,255,.2), inset 0 -6px 9px rgba(0,0,0,.72), 0 5px 12px rgba(0,0,0,.5) !important;
  transform: rotate(13deg) !important;
}

.gm-prototype-detail[data-gm-phase="charging"] .machine-visual--prototype .gm-proto-lever,
.gm-prototype-detail[data-gm-phase="mixing"] .machine-visual--prototype .gm-proto-lever,
.gm-prototype-detail[data-gm-phase="dispensing"] .machine-visual--prototype .gm-proto-lever {
  animation: gmR01LeverTurn 1.16s cubic-bezier(.2,.72,.12,1) both !important;
}

.gm-prototype-detail .machine-visual--prototype .gm-proto-capsule-drop {
  left: 50% !important;
  top: 43% !important;
  width: 16.5% !important;
  aspect-ratio: 1 !important;
  opacity: 0 !important;
  z-index: 22 !important;
  background: var(--gm-r01-capsule) center / contain no-repeat !important;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,.58)) drop-shadow(0 0 22px rgba(154,117,255,.56)) !important;
  transform-origin: center center !important;
}

.gm-prototype-detail .machine-visual--prototype .gm-proto-capsule-drop:before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 96% !important;
  width: 76% !important;
  height: 190% !important;
  transform: translateX(-50%) !important;
  background: repeating-linear-gradient(90deg, transparent 0 14%, rgba(255,255,255,.48) 16% 20%, transparent 22% 36%) !important;
  filter: blur(2.6px) !important;
  opacity: 0 !important;
}

.gm-prototype-detail .machine-visual--prototype .gm-proto-chute-glow {
  left: 39.7% !important;
  top: 83.8% !important;
  width: 22% !important;
  height: 5% !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  background: radial-gradient(ellipse, rgba(219,255,78,.95), rgba(219,255,78,.32) 46%, transparent 72%) !important;
  filter: blur(.4px) drop-shadow(0 0 22px rgba(219,255,78,.72)) !important;
}

.gm-prototype-detail[data-gm-phase="dispensing"] .machine-visual--prototype .gm-proto-capsule-drop {
  animation: gmR01CapsuleDrop 1.45s cubic-bezier(.16,.9,.16,1) both !important;
}

.gm-prototype-detail[data-gm-phase="dispensing"] .machine-visual--prototype .gm-proto-capsule-drop:before {
  animation: gmR01DropStreak 1.45s ease-out both !important;
}

.gm-prototype-detail[data-gm-phase="ready"] .machine-visual--prototype .gm-proto-capsule-drop,
.gm-prototype-detail[data-gm-phase="opening"] .machine-visual--prototype .gm-proto-capsule-drop {
  opacity: 1 !important;
  left: 50% !important;
  top: 84.2% !important;
  transform: translate(-50%, -50%) rotate(-17deg) scale(.88) !important;
  animation: gmR01ReadyCapsuleGlow 1.08s ease-in-out infinite !important;
}

.gm-prototype-detail[data-gm-phase="dispensing"] .machine-visual--prototype .gm-proto-chute-glow,
.gm-prototype-detail[data-gm-phase="ready"] .machine-visual--prototype .gm-proto-chute-glow,
.gm-prototype-detail[data-gm-phase="opening"] .machine-visual--prototype .gm-proto-chute-glow {
  opacity: .95 !important;
  animation: gmR01ChuteGlow 1s ease-in-out infinite alternate !important;
}

.gm-prototype-detail .machine-visual--prototype .capsule-flight-ball,
.gm-prototype-detail .machine-visual--prototype .capsule-ready-ball {
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  transform: scale(.01) !important;
  filter: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.gm-prototype-detail .machine-visual--prototype .capsule-flight-ball:before,
.gm-prototype-detail .machine-visual--prototype .capsule-flight-ball:after,
.gm-prototype-detail .machine-visual--prototype .capsule-ready-ball:before,
.gm-prototype-detail .machine-visual--prototype .capsule-ready-ball:after,
.gm-prototype-detail .machine-visual--prototype .capsule-ready-ball__hint {
  content: none !important;
  display: none !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype {
  perspective: 1400px !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-open-dim {
  background:
    radial-gradient(circle at 43% 34%, rgba(144,113,255,.44), transparent 28%),
    radial-gradient(circle at 58% 61%, rgba(219,255,78,.2), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(12,10,24,.72), #04030b 72%) !important;
  backdrop-filter: blur(13px) saturate(1.2) !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap-wrap {
  gap: 28px !important;
  transform-style: preserve-3d !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap {
  width: min(42vw, 330px) !important;
  height: min(42vw, 330px) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  overflow: visible !important;
  filter: drop-shadow(0 34px 50px rgba(0,0,0,.62)) drop-shadow(0 0 68px rgba(150,110,255,.66)) !important;
  animation: gmR01OpenFloat 1.16s ease-in-out infinite alternate !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap:before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -13% !important;
  width: 78% !important;
  height: 15% !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: radial-gradient(ellipse, rgba(219,255,78,.86), rgba(219,255,78,.24) 46%, transparent 74%) !important;
  filter: blur(.8px) !important;
  opacity: .86 !important;
  z-index: -1 !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap-top,
body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap-bot {
  left: 0 !important;
  width: 100% !important;
  height: 51% !important;
  border: 0 !important;
  overflow: hidden !important;
  background-image: var(--gm-r01-capsule) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 196% !important;
  box-shadow: none !important;
  transition: transform .72s cubic-bezier(.16,1.18,.2,1), opacity .42s ease !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap-top {
  top: 0 !important;
  border-radius: 999px 999px 22px 22px !important;
  background-position: center top !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap-bot {
  bottom: 0 !important;
  border-radius: 22px 22px 999px 999px !important;
  background-position: center bottom !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap-seam {
  left: 4.7% !important;
  right: 4.7% !important;
  top: calc(50% - 2px) !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 0 12px rgba(255,255,255,.72), 0 0 28px rgba(147,112,255,.4) !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap-hint {
  background: rgba(8, 7, 17, .9) !important;
  color: #caff3f !important;
  border: 1px solid rgba(202,255,63,.48) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.58), 0 0 28px rgba(202,255,63,.26) !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype.gm-shake .gm-cap {
  animation: gmR01OpenCharge .08s linear infinite !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype.gm-shake .gm-cap-seam {
  background: #fff !important;
  box-shadow: 0 0 18px 8px rgba(255,255,255,.98), 0 0 72px 28px rgba(202,255,63,.52) !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype.gm-split .gm-cap {
  animation: none !important;
  filter: drop-shadow(0 22px 38px rgba(0,0,0,.5)) !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype.gm-split .gm-cap-top {
  opacity: .98 !important;
  transform: translate3d(-38%, -62%, 150px) rotateX(58deg) rotateZ(-24deg) scale(.94) !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype.gm-split .gm-cap-bot {
  opacity: .98 !important;
  transform: translate3d(16%, 28%, 58px) rotateX(64deg) rotateZ(-9deg) scale(1.06) !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype.gm-split .gm-cap-seam {
  opacity: 0 !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype.gm-split:after {
  background:
    radial-gradient(circle, rgba(255,255,255,.98), rgba(255,208,244,.72) 13%, rgba(155,101,255,.46) 36%, rgba(202,255,63,.22) 48%, transparent 70%) !important;
  animation: gmR01OpenBurst .78s ease-out both !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-prize-card {
  top: 43% !important;
  width: min(23vw, 152px) !important;
  height: min(29vw, 192px) !important;
  border-radius: 20px !important;
  border: 3px solid rgba(255,236,255,.92) !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.9), transparent 28%),
    linear-gradient(155deg, #ffd9f2 0%, #f2a8ff 38%, #9463ff 100%) !important;
  box-shadow: 0 0 32px rgba(255,190,245,.86), 0 0 98px rgba(151,93,255,.72) !important;
  text-shadow: 0 0 24px rgba(255,255,255,.9) !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-prize-card:before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -23px !important;
  width: 48px !important;
  height: 32px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #fff5aa, #ffca42) !important;
  clip-path: polygon(0 100%, 14% 34%, 34% 72%, 50% 0, 66% 72%, 86% 34%, 100% 100%) !important;
  filter: drop-shadow(0 0 12px rgba(255,214,77,.88)) !important;
}

.gm-prototype-detail .reward-modal:before,
.gm-prototype-detail .reward-modal:after,
.gm-prototype-detail .reward-modal__burst:before,
.gm-prototype-detail .reward-modal__burst:after {
  content: none !important;
  display: none !important;
}

.gm-prototype-detail .capsule-open-impact {
  overflow: visible !important;
}

.gm-prototype-detail .capsule-open-impact:before,
.gm-prototype-detail .capsule-open-impact:after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 54% !important;
  width: 128px !important;
  height: 48px !important;
  border-radius: 999px !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(ellipse, rgba(202,255,63,.46), rgba(148,102,255,.2) 44%, transparent 72%) !important;
  filter: blur(6px) !important;
  opacity: .58 !important;
  z-index: -1 !important;
}

.gm-prototype-detail[data-gm-phase="coin"] .machine-visual--prototype .gm-proto-coin,
.gm-prototype-detail[data-gm-phase="dispensing"] .machine-visual--prototype .gm-proto-capsule-drop {
  opacity: 1 !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap:after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  border-radius: 999px !important;
  background: var(--gm-r01-capsule) center / contain no-repeat !important;
  filter: drop-shadow(0 30px 38px rgba(0,0,0,.56)) drop-shadow(0 0 58px rgba(150,110,255,.6)) !important;
  pointer-events: none !important;
  transition: opacity .22s ease, transform .42s ease !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype:not(.gm-split) .gm-cap-top,
body.gm-prototype-mode #gm-open.gm-open--prototype:not(.gm-split) .gm-cap-bot,
body.gm-prototype-mode #gm-open.gm-open--prototype:not(.gm-split) .gm-cap-seam {
  opacity: 0 !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype.gm-shake .gm-cap:after {
  animation: gmR01OpenCharge .08s linear infinite !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype.gm-split .gm-cap:after {
  opacity: 0 !important;
  transform: scale(.76) rotate(-8deg) !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap,
body.gm-prototype-mode #gm-open.gm-open--prototype.gm-split .gm-cap,
body.gm-prototype-mode #gm-open.gm-open--prototype.gm-split .gm-cap-wrap .gm-cap {
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap:before,
body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap-wrap:before,
body.gm-prototype-mode #gm-open.gm-open--prototype .gm-cap-wrap:after {
  content: none !important;
  display: none !important;
}

@keyframes gmR01CoinInsert {
  0% { opacity: 0; transform: translate(-210%, -96%) rotateY(68deg) rotateZ(-28deg) scale(.92); filter: blur(1.5px); }
  18% { opacity: 1; transform: translate(-142%, -66%) rotateY(68deg) rotateZ(94deg) scale(1.04); filter: blur(0); }
  52% { opacity: 1; transform: translate(-48%, -25%) rotateY(72deg) rotateZ(246deg) scale(1); }
  82% { opacity: 1; transform: translate(-4%, -2%) rotateY(78deg) rotateZ(380deg) scale(.72); }
  100% { opacity: 0; transform: translate(15%, 7%) rotateY(84deg) rotateZ(460deg) scale(.18); }
}

@keyframes gmR01LeverTurn {
  0% { transform: rotate(0deg) scale(1); }
  22% { transform: rotate(0deg) scale(1.03); }
  68% { transform: rotate(290deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes gmR01CapsuleDrop {
  0% { opacity: 0; transform: translate(-50%, -128%) rotate(-24deg) scale(.62); filter: blur(2px) drop-shadow(0 0 20px rgba(154,117,255,.45)); }
  14% { opacity: 1; }
  42% { transform: translate(-20%, 32%) rotate(150deg) scale(.82); filter: blur(.4px) drop-shadow(0 18px 24px rgba(0,0,0,.45)) drop-shadow(0 0 24px rgba(154,117,255,.6)); }
  72% { transform: translate(-64%, 116%) rotate(330deg) scale(.88); }
  100% { opacity: 1; transform: translate(-50%, 255%) rotate(522deg) scale(.88); filter: blur(0) drop-shadow(0 22px 26px rgba(0,0,0,.58)) drop-shadow(0 0 34px rgba(202,255,63,.56)); }
}

@keyframes gmR01DropStreak {
  0%, 20% { opacity: .62; transform: translateX(-50%) scaleY(.58); }
  72% { opacity: .48; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(.4); }
}

@keyframes gmR01ReadyCapsuleGlow {
  0%, 100% { filter: drop-shadow(0 20px 24px rgba(0,0,0,.58)) drop-shadow(0 0 25px rgba(154,117,255,.56)); }
  50% { filter: drop-shadow(0 24px 28px rgba(0,0,0,.62)) drop-shadow(0 0 46px rgba(202,255,63,.68)); }
}

@keyframes gmR01ChuteGlow {
  from { transform: scaleX(.86); opacity: .65; }
  to { transform: scaleX(1.08); opacity: 1; }
}

@keyframes gmR01OpenFloat {
  from { transform: rotateX(7deg) rotateY(-8deg) translateY(0) scale(1); }
  to { transform: rotateX(-5deg) rotateY(8deg) translateY(-13px) scale(1.035); }
}

@keyframes gmR01OpenCharge {
  0% { transform: translate(0,0) rotate(0deg) scale(1.02); }
  25% { transform: translate(-7px,3px) rotate(-3deg) scale(1.03); }
  50% { transform: translate(7px,-2px) rotate(3deg) scale(1.035); }
  75% { transform: translate(-4px,-3px) rotate(-1.5deg) scale(1.02); }
  100% { transform: translate(4px,2px) rotate(1.5deg) scale(1.03); }
}

@keyframes gmR01OpenBurst {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.18); filter: blur(0); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.62); filter: blur(20px); }
}

/* gm-codex-mobile-dark-fit-20260708
   Final visual correction: dark mode uses the same poster placement as light mode,
   and mobile cards fit two columns without clipping. */
.machine-visual--prototype .machine-visual__glass,
html.gm-dark .machine-visual--prototype .machine-visual__glass {
  left: 19.4% !important;
  right: 19.4% !important;
  top: 12.2% !important;
  height: 36.6% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.machine-visual--prototype .machine-visual__glass-sticker,
html.gm-dark .machine-visual--prototype .machine-visual__glass-sticker {
  inset: 0 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 14px !important;
  transform: none !important;
  background: #fff !important;
}
@media (max-width: 900px) {
  .floor-line,
  .machine-wall {
    overflow: hidden !important;
  }
  .compact-machine:has(.machine-visual--prototype) {
    width: min(42vw, 176px) !important;
    min-width: min(42vw, 176px) !important;
    max-width: min(42vw, 176px) !important;
    min-height: 398px !important;
    border-radius: 18px !important;
  }
  .compact-machine:has(.machine-visual--prototype) .compact-machine__body {
    min-height: 292px !important;
  }
  .machine-visual--prototype.machine-visual--mini {
    width: min(40vw, 164px) !important;
    height: min(66.6vw, 273px) !important;
  }
  .compact-machine:has(.machine-visual--prototype) .compact-machine__info {
    margin: 0 8px 9px !important;
    padding: 12px 11px !important;
    border-radius: 15px !important;
  }
  .compact-machine:has(.machine-visual--prototype) .compact-machine__info h3 {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
}
@media (max-width: 430px) {
  .compact-machine:has(.machine-visual--prototype) {
    width: min(41vw, 158px) !important;
    min-width: min(41vw, 158px) !important;
    max-width: min(41vw, 158px) !important;
    min-height: 374px !important;
  }
  .compact-machine:has(.machine-visual--prototype) .compact-machine__body {
    min-height: 270px !important;
  }
  .machine-visual--prototype.machine-visual--mini {
    width: min(39vw, 154px) !important;
    height: min(65vw, 256px) !important;
  }
}

/* gm-codex-lever-fit-20260708
   Keep the 3D machine's native knob/hole visible; use only a slim glow ring for motion. */
.gm-prototype-detail .machine-visual--prototype .gm-proto-lever {
  left: 39.8% !important;
  top: 63.2% !important;
  width: 20.4% !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.gm-prototype-detail .machine-visual--prototype .gm-proto-lever:before {
  inset: 2% !important;
  background:
    conic-gradient(from 230deg, transparent 0 24deg, rgba(219,255,78,.88) 25deg 58deg, transparent 60deg 250deg, rgba(219,255,78,.5) 252deg 272deg, transparent 274deg),
    radial-gradient(circle, transparent 60%, rgba(219,255,78,.94) 63% 65%, transparent 68%) !important;
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 61% 67%, transparent 70%) !important;
  mask: radial-gradient(circle, transparent 57%, #000 61% 67%, transparent 70%) !important;
  filter: drop-shadow(0 0 8px rgba(219,255,78,.62)) !important;
  opacity: 0 !important;
}
.gm-prototype-detail .machine-visual--prototype .gm-proto-lever:after {
  content: none !important;
  display: none !important;
}
.gm-prototype-detail[data-gm-phase="charging"] .machine-visual--prototype .gm-proto-lever,
.gm-prototype-detail[data-gm-phase="mixing"] .machine-visual--prototype .gm-proto-lever,
.gm-prototype-detail[data-gm-phase="dispensing"] .machine-visual--prototype .gm-proto-lever {
  opacity: 1 !important;
}
.gm-prototype-detail[data-gm-phase="charging"] .machine-visual--prototype .gm-proto-lever:before,
.gm-prototype-detail[data-gm-phase="mixing"] .machine-visual--prototype .gm-proto-lever:before,
.gm-prototype-detail[data-gm-phase="dispensing"] .machine-visual--prototype .gm-proto-lever:before {
  opacity: .58 !important;
}

/* [정리됨] Codex 보관함 스킨 v2(중복) — 최종본 단일 유지 */
/* [정리됨] Codex 보관함 스킨 v3(중복) — 최종본 단일 유지 */
/* [정리됨] Codex 보관함 스킨 v4 — gm-locker-cabinet-final.css로 일원화 */

/* ============ PART O — 레이어 정리 통합 (2026-07-09) ============ */
/* Codex 프로토타입/캐비닛 최종본만 남기고 중복 레이어 제거 후의 단일 마감 레이어 */

/* ── 1) 장식 레이어 전면 제거: 컬러 전구줄·통로 띠·바닥 그라데이션 (라이트+다크) ── */
.shop-scene__ceiling, .shop-scene__ceiling--wall,
.shop-wall-ambient, .shop-wall-aisle, .shop-aisle-floor, .shop-aisle-vanish,
.machine-wall__backlight {
  display: none !important;
}

/* ── 2) 배경 단일화: 컬러 얼룩 제거, 한 방향 그라데이션 + 흰색 별만 ── */
html.gm-dark body {
  background: linear-gradient(180deg, #14111d 0%, #0d0b14 34%, #0a0810 100%) fixed !important;
}
html.gm-dark main.shop-scene {
  background: transparent !important;
}
html.gm-dark main.shop-scene::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 11% 18%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.2px 1.2px at 27% 64%, rgba(255,255,255,.34), transparent 100%),
    radial-gradient(1.8px 1.8px at 41% 30%, rgba(255,255,255,.42), transparent 100%),
    radial-gradient(1.1px 1.1px at 58% 76%, rgba(255,255,255,.3), transparent 100%),
    radial-gradient(1.5px 1.5px at 66% 12%, rgba(255,255,255,.46), transparent 100%),
    radial-gradient(1.2px 1.2px at 79% 52%, rgba(255,255,255,.32), transparent 100%),
    radial-gradient(1.7px 1.7px at 90% 26%, rgba(255,255,255,.44), transparent 100%),
    radial-gradient(1.1px 1.1px at 47% 90%, rgba(255,255,255,.28), transparent 100%);
}
html.gm-dark main.shop-scene::after { display: none !important; }

/* ── 3) 자판기 = 투명 배경 (카드 박스 제거, 기기만 배경 위에) ── */
.compact-machine:has(.machine-visual--prototype),
html.gm-dark .compact-machine:has(.machine-visual--prototype) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.compact-machine:has(.machine-visual--prototype):hover {
  transform: translateY(-3px) !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* 상품명/가격은 자체 표면을 가진 정보 칩으로 분리 */
.compact-machine:has(.machine-visual--prototype) .compact-machine__info {
  background: rgba(17, 14, 26, .78) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09) !important;
  padding: 12px 14px !important;
  color: #b9b2d8 !important;
}
.compact-machine:has(.machine-visual--prototype) .compact-machine__info p { color: #8ffcff !important; }
.compact-machine:has(.machine-visual--prototype) .compact-machine__info h3 { color: #ffffff !important; }

/* ── 4) 배너: 이중 테두리 제거, 단일 프레임 ── */
#gm-banner {
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 22px !important;
  background: #0d0b14 !important;
  margin-bottom: 2px !important;
}
html.gm-dark #gm-banner { border-color: rgba(255, 255, 255, .12) !important; }
#gm-banner::before, #gm-banner::after { display: none !important; }

/* ── 5) 모바일: 자판기 정보칩 규격 (이름 2줄, 숫자 안 밀리게) ── */
@media (max-width: 900px) {
  .compact-machine:has(.machine-visual--prototype) .compact-machine__info {
    margin: 4px 2px 8px !important;
    padding: 9px 10px !important;
  }
  .compact-machine__info p { font-size: 10px !important; letter-spacing: .02em; }
  .compact-machine__info h3 {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    min-height: 2.7em;
  }
  .compact-machine__info > div {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }
  .compact-machine__info > div > span {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 4px 4px !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
}

/* ── 6) 모바일: 보관함 글자 깨짐/세로쪼개짐 수정 ── */
@media (max-width: 900px) {
  .showcase-card__meta,
  .showcase-card__top { flex-wrap: wrap !important; gap: 4px !important; }
  .showcase-card__meta > *,
  .showcase-card__top > * { white-space: nowrap !important; }
  .showcase-card__meta em, .showcase-card__meta span,
  .showcase-card__top em, .showcase-card__top span {
    white-space: nowrap !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
    line-height: 1.4 !important;
    border-radius: 99px !important;
    writing-mode: horizontal-tb !important;
  }
  .showcase-card__value {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .showcase-card__value { padding-right: 4px !important; }
  .showcase-card__value span { white-space: nowrap !important; font-size: 10px !important; }
  .showcase-card__value strong { white-space: nowrap !important; font-size: 12.5px !important; }
  .showcase-card__actions { display: flex !important; gap: 6px !important; }
  .showcase-card__actions button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 8px 4px !important;
  }
  .collection-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .collection-summary span { white-space: nowrap !important; font-size: 10.5px !important; }
  .collection-summary strong { font-size: 15px !important; white-space: nowrap !important; }
}

/* 문의유형 select — input과 동일 스타일 (2026-07-18) */
.gm-f select, .gm-inqform select{
  display:block;width:100%;margin-top:4px;font:inherit;font-size:14px;
  border:1.5px solid #dcd7ea;border-radius:11px;padding:10px 38px 10px 12px;outline:none;
  background:#fbfaff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6785' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/15px;
  color:#221f2e;box-sizing:border-box;-webkit-appearance:none;appearance:none;
}
.gm-f select:focus, .gm-inqform select:focus{border-color:#8f7bff}
html.gm-dark .gm-f select, html.gm-dark .gm-inqform select{
  background-color:#120f1d;border-color:#372f52;color:#efecff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b93bd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* 환불 경고 박스 */
.gm-warnbox{
  background:#fdecec;border:1.5px solid #e2483c;border-radius:11px;
  padding:10px 13px;font-size:12.5px;font-weight:900;color:#a3271b;margin:8px 0 10px;
}
html.gm-dark .gm-warnbox{background:#33150f;border-color:#8a2d1e;color:#ffb4a6}