/* ================================================================
   wallet.html — Vault 전용 composition (UIUX_레퍼런스_02 v12 neon port)
   - 강한 아트 요소(네온 링 / 글로우 / sweep / dashed ring / 섹션 arrow)는
     page-local 우선 구현. 공통 shell은 ui-theme.css `ui-vault-*` 사용.
   - @property / conic-gradient 미지원 환경에서도 base neon ring은 정상 표시
     (border + box-shadow + flicker가 @property와 독립).
   - 반응형 4버킷: small(≤359) / base(360–389) / large(≥390) / short-height(≤700)
   ================================================================ */
:root{
  /* pure black base (레퍼런스 v12 톤) */
  /* R7 (2026-06-10): 미사용 토큰 제거 — --bg/--card/--mut/--dia/--red (참조 0건),
     --sa-top (R3 에서 마지막 소비처가 공통 .ptg-topbar 로 이동하며 dead) */
  --bg-deep:#020204;
  --tx:#e8ecf8;--tx2:#c8d0e4;--dim:#8a96b8;
  --potato:#4cd830;--ton:#0098ea;
  --gold:#f0b818;
  --apple:cubic-bezier(.25,.1,.25,1);
  --sa-bot:var(--ptg-app-content-bottom, env(safe-area-inset-bottom,0px));

  /* Hero sizing — base (360–389) */
  --hero-ton-ring:172px;
  --hero-ton-glow:238px;
  --hero-ton-pad-top:26px;
  --hero-ton-pad-bot:14px;
  --hero-ton-amount:34px;
  --hero-ton-label:8px;

  --hero-potato-ring:162px;
  --hero-potato-glow:200px; /* 히어로(221px) 안에 들도록(펄스 1.05배 포함) — 잔광 번짐 방지 */
  --hero-potato-pad-top:22px;
  --hero-potato-pad-bot:12px;
  --hero-potato-amount:34px;
  --hero-potato-label:8px;

  --vault-body-pad-bot:calc(100px + var(--sa-bot));
}

/* @property는 미지원 환경에서는 조용히 무시되고 --vTonSweep/--vPotSweep는
   일반 CSS 변수로만 남아 sweep 애니가 각도 보간 없이 0도로 고정된다. 기본 링은 영향 없음. */
@property --vTonSweep{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --vPotSweep{syntax:'<angle>';inherits:false;initial-value:0deg}

*{margin:0;padding:0;box-sizing:border-box}
button,a,[onclick]{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}
html,body{height:100%;min-height:100dvh;overflow:hidden;background:var(--bg-deep);font-family:'Nunito','Segoe UI',Arial,sans-serif;color:var(--tx);-webkit-font-smoothing:antialiased;user-select:none}
body{display:flex;flex-direction:column;background:
  radial-gradient(ellipse at 50% -10%,rgba(0,80,140,.10),transparent 55%),
  radial-gradient(ellipse at 50% 110%,rgba(100,80,20,.06),transparent 55%),
  var(--bg-deep)}

/* ── top header (pure black, neon과 대비) ── */
.vault-header{padding:12px 16px 12px;/* R3 (2026-06-10): 상단 safe-area 는 공통 .ptg-topbar 가 소비 */display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:30;position:relative;background:rgba(8,8,8,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:.5px solid rgba(255,255,255,.04)}
.vault-header-title{font-size:17px;font-weight:900;letter-spacing:.3px}

/* ── scroll body ── */
.vault-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 14px var(--vault-body-pad-bot);-webkit-overflow-scrolling:touch}
.vault-scroll::-webkit-scrollbar{width:0}

/* ================================================================
   TON HERO — v12 네온 튜브 (강화판) 이식
   ================================================================ */
.vault-ton-hero{position:relative;text-align:center;padding:var(--hero-ton-pad-top) 0 var(--hero-ton-pad-bot);overflow:visible}

/* outer halo */
.vault-ton-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--hero-ton-glow);height:var(--hero-ton-glow);border-radius:50%;
  pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(0,210,255,.14) 0%,rgba(0,152,234,.04) 40%,transparent 70%);
  animation:vaultGlowPulse 6s ease-in-out infinite;
}
@keyframes vaultGlowPulse{
  0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
}

/* main neon ring — 두꺼운 청색 림 + 다층 블룸 + 플리커 (fallback-safe) */
.vault-ton-ring{
  position:relative;z-index:2;
  width:var(--hero-ton-ring);height:var(--hero-ton-ring);
  margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(0,200,255,.60);
  box-shadow:
    0 0 4px rgba(255,255,255,.50),
    0 0 20px rgba(0,210,255,.55),
    0 0 48px rgba(0,152,234,.28),
    inset 0 0 3px rgba(220,245,255,.85),
    inset 0 0 18px rgba(0,210,255,.22),
    inset 0 0 42px rgba(0,152,234,.10);
  background:
    radial-gradient(circle at 30% 20%,rgba(140,230,255,.10),transparent 55%),
    linear-gradient(160deg,rgba(0,190,255,.10),rgba(0,80,160,.04) 50%,rgba(0,210,255,.08));
  animation:vaultNeonFlickerTon 5.1s ease-in-out infinite;
}

/* conic sweep (rotating bright arc) — @property 지원 시에만 각도 보간 */
@keyframes vaultTonSweepA{0%{--vTonSweep:0deg}100%{--vTonSweep:360deg}}
.vault-ton-ring::before{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from var(--vTonSweep),transparent 0deg,transparent 210deg,rgba(120,230,255,.40) 255deg,rgba(230,248,255,1) 290deg,rgba(120,230,255,.40) 325deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:2px;pointer-events:none;filter:blur(1.5px);
  animation:vaultTonSweepA 4.5s linear infinite;z-index:1;
}

/* outer dashed ring (slow spin + glow) */
@keyframes vaultOuterSpin{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
.vault-ton-ring::after{
  content:'';position:absolute;top:50%;left:50%;
  width:calc(100% + 22px);height:calc(100% + 22px);
  border-radius:50%;
  border:1.5px dashed rgba(0,210,255,.48);
  transform:translate(-50%,-50%);pointer-events:none;
  animation:vaultOuterSpin 20s linear infinite;
  box-shadow:0 0 14px rgba(0,200,255,.25),inset 0 0 14px rgba(0,200,255,.12);
}

/* neon flicker (불규칙 0.90~1.12) */
@keyframes vaultNeonFlickerTon{
  0%,100%{filter:brightness(1) saturate(1.05)}
  8%{filter:brightness(1.10) saturate(1.18)}
  18%{filter:brightness(.92) saturate(.95)}
  29%{filter:brightness(1.12) saturate(1.20)}
  41%{filter:brightness(.94) saturate(1)}
  55%{filter:brightness(1.06) saturate(1.12)}
  70%{filter:brightness(.90) saturate(.92)}
  84%{filter:brightness(1.08) saturate(1.15)}
}

/* R7 (2026-06-10): max-width 가드 — 폭 제한이 없어 amount 의 ellipsis 가
   영원히 발동 안 하던 콘텐츠 오버플로우 버그 수정 (긴 잔액이 링 밖으로 이탈) */
.vault-ton-inner{text-align:center;padding:0 14px;position:relative;z-index:2;max-width:100%;min-width:0}
.vault-ton-label{
  font-size:var(--hero-ton-label);font-weight:700;
  color:rgba(160,225,255,.95);letter-spacing:3px;text-transform:uppercase;
  margin-bottom:6px;
  text-shadow:0 0 10px rgba(0,200,255,.70),0 0 22px rgba(0,152,234,.35);
}
.vault-ton-amount{
  font-size:var(--hero-ton-amount);font-weight:900;letter-spacing:-.3px;line-height:1.05;
  background:linear-gradient(180deg,#bfeaff 0%,#18b0ff 50%,#0070b8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 0 10px rgba(180,240,255,.80))
    drop-shadow(0 0 24px rgba(0,210,255,.55))
    drop-shadow(0 0 48px rgba(0,140,234,.28));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.vault-ton-sub{
  font-size:11px;color:rgba(140,200,240,.55);
  margin-top:12px;font-weight:600;letter-spacing:.2px;line-height:1.4;
  position:relative;z-index:2;
}

/* TON empty */
.vault-ton-empty{text-align:center;padding:10px 0;position:relative;z-index:2}
.vault-ton-empty-title{font-size:14px;font-weight:800;color:var(--dim);margin-bottom:4px}
.vault-ton-empty-desc{font-size:11px;color:rgba(255,255,255,.30);line-height:1.5}

/* ================================================================
   POTATO HERO — 골드 circular hero (TON 대칭)
   ================================================================ */
.vault-potato-hero{position:relative;text-align:center;padding:var(--hero-potato-pad-top) 0 var(--hero-potato-pad-bot);overflow:visible;margin-top:4px}
.vault-potato-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--hero-potato-glow);height:var(--hero-potato-glow);border-radius:50%;
  pointer-events:none;z-index:0;
  /* falloff 60% — 잔광이 '현재 내 보유량' 문구/다이아 라인까지 내려가지 않게 */
  background:radial-gradient(circle,rgba(255,220,100,.11) 0%,rgba(240,184,24,.04) 38%,transparent 60%);
  animation:vaultGlowPulse 7s ease-in-out infinite 1s;
}
.vault-potato-ring{
  position:relative;z-index:2;
  width:var(--hero-potato-ring);height:var(--hero-potato-ring);
  margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,210,80,.60);
  /* 외곽 잔광은 30px·.16 까지 — 링 아래 문구까지 번지지 않게. inset(내부 네온)은 유지 */
  box-shadow:
    0 0 4px rgba(255,255,255,.50),
    0 0 16px rgba(255,220,100,.42),
    0 0 30px rgba(240,184,24,.16),
    inset 0 0 3px rgba(255,248,215,.85),
    inset 0 0 18px rgba(255,220,100,.20),
    inset 0 0 42px rgba(240,184,24,.09);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,240,180,.11),transparent 55%),
    linear-gradient(160deg,rgba(255,210,80,.09),rgba(180,120,20,.04) 50%,rgba(255,220,120,.07));
  animation:vaultNeonFlickerPotato 5.9s ease-in-out infinite;
}
@keyframes vaultPotSweepA{0%{--vPotSweep:0deg}100%{--vPotSweep:360deg}}
.vault-potato-ring::before{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from var(--vPotSweep),transparent 0deg,transparent 210deg,rgba(255,220,130,.40) 255deg,rgba(255,248,220,1) 290deg,rgba(255,220,130,.40) 325deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:2px;pointer-events:none;filter:blur(1.5px);
  animation:vaultPotSweepA 5.2s linear infinite reverse;z-index:1;
}
.vault-potato-ring::after{
  content:'';position:absolute;top:50%;left:50%;
  width:calc(100% + 22px);height:calc(100% + 22px);
  border-radius:50%;
  border:1.5px dashed rgba(255,220,100,.46);
  transform:translate(-50%,-50%);pointer-events:none;
  animation:vaultOuterSpin 24s linear infinite reverse;
  box-shadow:0 0 10px rgba(240,184,24,.15),inset 0 0 14px rgba(240,184,24,.10);
}
@keyframes vaultNeonFlickerPotato{
  0%,100%{filter:brightness(1) saturate(1.05)}
  11%{filter:brightness(1.10) saturate(1.18)}
  23%{filter:brightness(.93) saturate(.96)}
  35%{filter:brightness(1.12) saturate(1.20)}
  48%{filter:brightness(.94) saturate(.98)}
  62%{filter:brightness(1.06) saturate(1.12)}
  76%{filter:brightness(.91) saturate(.93)}
  89%{filter:brightness(1.07) saturate(1.15)}
}
.vault-potato-inner{text-align:center;padding:0 14px;position:relative;z-index:2;max-width:100%;min-width:0}
.vault-potato-label{
  font-size:var(--hero-potato-label);font-weight:700;
  color:rgba(255,225,140,.95);letter-spacing:3px;text-transform:uppercase;
  margin-bottom:6px;
  text-shadow:0 0 10px rgba(255,210,80,.70),0 0 22px rgba(240,184,24,.35);
}
.vault-potato-amount{
  font-size:var(--hero-potato-amount);font-weight:900;letter-spacing:-.3px;line-height:1.05;
  background:none;
  color:#f0b818;
  -webkit-text-fill-color:#f0b818;
  /* R7-2 (2026-06-10): text-shadow 제거 — overflow:hidden 에 잘려 숫자 뒤에
     사각박스 아티팩트를 만들던 원인. 글로우는 아래 filter(잘리지 않음)가 담당
     → TON hero 와 동일한 filter-only 방식으로 통일. */
  filter:
    drop-shadow(0 0 10px rgba(255,240,180,.80))
    drop-shadow(0 0 24px rgba(240,200,60,.55))
    drop-shadow(0 0 48px rgba(240,180,30,.28));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.vault-potato-sub{
  font-size:11px;color:rgba(255,220,150,.50);
  margin-top:10px;font-weight:600;letter-spacing:.2px;line-height:1.4;
  position:relative;z-index:2;text-align:center;
}

/* R7 (2026-06-10): hero 잔액 자릿수 단계 축소 — 긴 잔액도 자릿수를 숨기지 않고
   링 안에 수납 (8자리+ → 72%, 12자리+ → 56%). inner max-width+ellipsis 는 극단값 최종 가드. */
.vault-ton-amount.is-long{font-size:calc(var(--hero-ton-amount)*.66)}
.vault-ton-amount.is-xlong{font-size:calc(var(--hero-ton-amount)*.48)}
.vault-potato-amount.is-long{font-size:calc(var(--hero-potato-amount)*.66)}
.vault-potato-amount.is-xlong{font-size:calc(var(--hero-potato-amount)*.48)}

/* ================================================================
   Section arrow — 섹션 전환 장식 (조용한 리듬)
   ================================================================ */
.vault-section-arrow{
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;padding:2px 0;height:16px;
  pointer-events:none;user-select:none;opacity:.30;
  animation:vaultArrowBreathe 2.6s ease-in-out infinite;
}
.vault-section-arrow svg{width:14px;height:10px;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke:rgba(255,255,255,.45)}
.vault-section-arrow[data-tone="ton"] svg{stroke:rgba(120,210,255,.60)}
.vault-section-arrow[data-tone="potato"] svg{stroke:rgba(255,220,140,.60)}
@keyframes vaultArrowBreathe{
  0%,100%{opacity:.15;transform:translateY(-1px)}
  50%{opacity:.42;transform:translateY(1px)}
}

/* ── utility card spacing ── */
.vault-diamond-slot{margin-top:14px}

/* ── popup overlay ── */
.vault-popup-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center}
.vault-popup-overlay.show{display:flex}
.vault-popup{width:100%;max-width:420px;background:linear-gradient(180deg,#151a2c,#0a0a12);border-radius:20px 20px 0 0;padding:24px 20px calc(24px + var(--sa-bot));position:relative;animation:popSlideUp .3s var(--apple);border-top:1px solid rgba(255,255,255,.06)}
@keyframes popSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.vault-popup-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);border:.5px solid rgba(255,255,255,.04);color:var(--dim);font-size:16px;display:flex;align-items:center;justify-content:center;font-family:inherit}
.vault-popup-close:active{background:rgba(255,255,255,.12)}
.vault-popup-title{font-size:18px;font-weight:900;margin-bottom:6px}
.vault-popup-desc{font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:16px}
.vault-popup-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1px;padding:4px 10px;border-radius:20px;margin-bottom:10px}
.vault-popup-btn{width:100%;min-height:52px;padding:14px;font-size:15px;font-weight:900;font-family:inherit;border:none;border-radius:14px;margin-top:8px;transition:all .12s var(--apple)}
.vault-popup-btn:active{transform:translateY(1px) scale(.995)}

/* ── DEV hub ── */
.dev-hub{margin-top:24px;padding:16px;border-radius:14px;background:rgba(240,184,24,.03);border:1px dashed rgba(240,184,24,.15)}
.dev-hub-title{font-size:12px;font-weight:900;color:var(--gold);margin-bottom:10px;letter-spacing:.5px}
.dev-hub-section{margin-bottom:10px}
.dev-hub-label{font-size:10px;font-weight:700;color:var(--dim);margin-bottom:6px;letter-spacing:.5px;text-transform:uppercase}
.dev-hub-grid{display:flex;flex-wrap:wrap;gap:6px}
.dev-btn{padding:6px 10px;font-size:10px;font-weight:800;font-family:inherit;border:none;border-radius:8px;background:rgba(255,255,255,.06);color:var(--tx2);transition:all .1s var(--apple)}
.dev-btn:active{transform:scale(.95)}
.dev-btn.active{background:rgba(0,152,234,.15);color:var(--ton)}

/* ── QA chip ── */
.qa-chip{position:absolute;left:14px;top:50%;transform:translateY(-50%);padding:3px 8px;font-size:9px;font-weight:900;font-family:inherit;letter-spacing:.5px;border-radius:6px;border:.5px solid rgba(240,184,24,.20);background:rgba(240,184,24,.08);color:var(--gold);cursor:pointer;z-index:31;transition:all .15s var(--apple)}
.qa-chip:active{transform:translateY(-50%) scale(.92)}
.qa-chip.on{background:rgba(240,184,24,.18);border-color:rgba(240,184,24,.35);box-shadow:0 0 8px rgba(240,184,24,.10)}

/* ── scroll helper — 공용 컴포넌트 사용 (ui-theme.css: .ui-scroll-helper) ── */

/* ================================================================
   Responsive buckets
   ================================================================ */
@media (max-width:359px){
  :root{
    --hero-ton-ring:150px;--hero-ton-glow:210px;
    --hero-ton-pad-top:20px;--hero-ton-pad-bot:12px;
    --hero-ton-amount:30px;--hero-ton-label:8px;
    --hero-potato-ring:140px;--hero-potato-glow:200px;
    --hero-potato-pad-top:18px;--hero-potato-pad-bot:10px;
    --hero-potato-amount:30px;--hero-potato-label:8px;
    --vault-body-pad-bot:calc(96px + var(--sa-bot));
  }
  .vault-scroll{padding:10px 12px var(--vault-body-pad-bot)}
  .vault-header-title{font-size:16px}
  .vault-ton-sub,.vault-potato-sub{font-size:10px;margin-top:8px}
}

@media (min-width:390px){
  :root{
    --hero-ton-ring:184px;--hero-ton-glow:258px;
    --hero-ton-pad-top:28px;--hero-ton-pad-bot:16px;
    --hero-potato-ring:172px;--hero-potato-glow:244px;
    --hero-potato-pad-top:24px;--hero-potato-pad-bot:14px;
  }
}

@media (max-height:700px){
  :root{
    --hero-ton-ring:148px;--hero-ton-glow:208px;
    --hero-ton-pad-top:18px;--hero-ton-pad-bot:10px;
    --hero-ton-amount:30px;
    --hero-potato-ring:140px;--hero-potato-glow:198px;
    --hero-potato-pad-top:16px;--hero-potato-pad-bot:10px;
    --hero-potato-amount:30px;
  }
  .vault-header-title{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  /* neon art animation 전체 정지 (flicker / sweep / outer spin / glow / arrow) */
  .vault-ton-glow,.vault-potato-glow,
  .vault-ton-ring,.vault-potato-ring,
  .vault-ton-ring::before,.vault-potato-ring::before,
  .vault-ton-ring::after,.vault-potato-ring::after,
  .vault-section-arrow{animation:none !important}
  /* popup entry animation 정지 */
  .vault-popup{animation:none !important}
  /* page-local transition 일괄 제거 */
  .vault-popup-btn,.dev-btn,.qa-chip{transition:none !important}
}