/* ============================================
   Potato Mining - UI Theme (GUI Pro-SuperCasual)
   ============================================
   Nine-slice based casual game UI system.
   All assets from: /images/GUI Pro-SuperCasual/
   ============================================ */

/* --- Asset path shorthand (CSS custom properties) --- */
:root {
  --gui: /images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components;

  /* Color tokens */
  --text-dark: #2a1a3e;
  --text-light: #fff;
  --text-muted: #7a6b8a;
  --text-gold: #c8a415;
  --text-blue: #3a7bd5;
  --text-red: #d94040;
  --popup-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.1);
}

/* --- Fonts (Cairo for numbers, Sen for body) --- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@700;800;900&family=Sen:wght@400;700;800&display=swap');

/* ============================================
   POPUP FRAMES (Nine-slice)
   Source: Popup01_Basic_White_Bg.png (108x122)
   ============================================ */
.ui-popup {
  background: none;
  border: 40px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Popup/Popup01_Basic_White_Bg.png');
  border-image-slice: 40 40 48 40 fill;
  border-image-width: 40px;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 8px 12px 12px;
  text-align: center;
  max-width: 340px;
  width: 92%;
  box-sizing: border-box;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
  position: relative;
}
.ui-popup h2 {
  font-family: 'Sen', 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.ui-popup p {
  font-family: 'Sen', 'Nunito', sans-serif;
  color: #555;
  font-size: 13px;
  line-height: 1.5;
}

/* Popup with colored top bar */
.ui-popup-topbar {
  background: none;
  border: 40px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Popup/Popup04_Topber_Single.png');
  border-image-slice: 65 40 50 40 fill;
  border-image-width: 65px 40px 50px 40px;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 8px 12px 12px;
  text-align: center;
  max-width: 340px;
  width: 92%;
  box-sizing: border-box;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
  position: relative;
}
.ui-popup-topbar h2 {
  font-family: 'Sen', 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ============================================
   POPUP OVERLAY
   ============================================ */
.ui-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.65);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.ui-overlay.active {
  display: flex;
}

/* ============================================
   BUTTONS - LARGE (Nine-slice)
   Source: Button01_l_*.png (80x142)
   ============================================ */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
  padding-bottom: 6px;
  height: 52px;
  min-width: 100px;
  border: 30px solid transparent;
  border-image-width: 30px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: 'Sen', 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.ui-btn:active {
  transform: translateY(3px) scale(0.97);
  filter: brightness(0.9);
}
.ui-btn:disabled {
  pointer-events: none;
  opacity: 0.6;
}
.ui-btn-full {
  width: 100%;
}

/* --- Button Colors --- */
.ui-btn-green {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_l_Green.png');
  border-image-slice: 42 35 52 35 fill;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,80,0,0.4);
}
.ui-btn-yellow {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_l_Yellow.png');
  border-image-slice: 42 35 52 35 fill;
  color: #5a3e00;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.ui-btn-blue {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_l_Blue.png');
  border-image-slice: 42 35 52 35 fill;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,100,0.4);
}
.ui-btn-red {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_l_Red.png');
  border-image-slice: 42 35 52 35 fill;
  color: #fff;
  text-shadow: 0 2px 4px rgba(100,0,0,0.4);
}
.ui-btn-purple {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_l_Purple.png');
  border-image-slice: 42 35 52 35 fill;
  color: #fff;
  text-shadow: 0 2px 4px rgba(60,0,100,0.4);
}
.ui-btn-sky {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_l_Sky.png');
  border-image-slice: 42 35 52 35 fill;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,50,100,0.4);
}
.ui-btn-dark {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_l_DarkGray.png');
  border-image-slice: 46 38 56 38 fill;
  color: #ccc;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ui-btn-gray {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_l_Gray.png');
  border-image-slice: 42 35 52 35 fill;
  color: #777;
  text-shadow: none;
  pointer-events: none;
}
.ui-btn-mint {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_l_Mint.png');
  border-image-slice: 42 35 52 35 fill;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,80,80,0.4);
}
.ui-btn-pink {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_l_Pink.png');
  border-image-slice: 42 35 52 35 fill;
  color: #fff;
  text-shadow: 0 2px 4px rgba(100,0,60,0.4);
}

/* ============================================
   BUTTONS - SMALL (Nine-slice)
   Source: Button01_s_*.png (70x114)
   ============================================ */
.ui-btn-sm {
  height: 42px;
  min-width: 80px;
  font-size: 14px;
  border-width: 24px;
  border-image-width: 24px;
  padding: 0 6px;
}
.ui-btn-sm.ui-btn-green {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_s_Green.png');
  border-image-slice: 36 28 42 28 fill;
}
.ui-btn-sm.ui-btn-yellow {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_s_Yellow.png');
  border-image-slice: 36 28 42 28 fill;
}
.ui-btn-sm.ui-btn-blue {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_s_Blue.png');
  border-image-slice: 36 28 42 28 fill;
}
.ui-btn-sm.ui-btn-red {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_s_Red.png');
  border-image-slice: 36 28 42 28 fill;
}
.ui-btn-sm.ui-btn-purple {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_s_Purple.png');
  border-image-slice: 36 28 42 28 fill;
}
.ui-btn-sm.ui-btn-dark {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_s_DarkGray.png');
  border-image-slice: 36 28 42 28 fill;
}
.ui-btn-sm.ui-btn-gray {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Button01_s_Gray.png');
  border-image-slice: 36 28 42 28 fill;
}

/* ============================================
   CLOSE BUTTON (Fixed size icon)
   Source: Icon_Close02.png (75x75)
   ============================================ */
.ui-close-btn {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 40px;
  height: 40px;
  background: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/IconMisc/Icon_Close02.png') center/contain no-repeat;
  border: none;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.15s;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  -webkit-tap-highlight-color: transparent;
}
.ui-close-btn:active {
  transform: scale(0.85);
}

/* ============================================
   PROGRESS BAR / SLIDER (Nine-slice)
   Source: Slider_Basic01_Bg_Single.png (24x56)
           Slider_Basic01_Fill_*.png (8x35)
   ============================================ */
.ui-progress {
  position: relative;
  width: 100%;
  height: 22px;
  border: 10px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Slider/Slider_Basic01_Bg_Single.png');
  border-image-slice: 10 10 10 10 fill;
  border-image-width: 10px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  box-sizing: border-box;
  overflow: hidden;
}
.ui-progress-fill {
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  border: 4px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Slider/Slider_Basic01_Fill_Green.png');
  border-image-slice: 8 4 8 4 fill;
  border-image-width: 4px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  transition: width 0.5s ease;
  min-width: 8px;
}
.ui-progress-fill-yellow {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Slider/Slider_Basic01_Fill_Yellow.png');
}
.ui-progress-fill-blue {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Slider/Slider_Basic01_Fill_Blue.png');
}

/* Progress bar - small variant */
.ui-progress-sm {
  height: 14px;
  border-width: 6px;
  border-image-width: 6px;
}

/* ============================================
   INNER PANEL / INSET FRAME (Nine-slice)
   Source: BasicFrame_Round20.png (44x44)
   ============================================ */
.ui-panel-inset {
  border: 18px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/BorderFrame_Round20_Single_Dark.png');
  border-image-slice: 20 20 22 20 fill;
  border-image-width: 18px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 8px 12px;
  box-sizing: border-box;
}

/* Darker inset panel using DarkGray frame */
.ui-panel-inset-dark {
  border: 18px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/BasicFrame_Round24.png');
  border-image-slice: 24 24 26 24 fill;
  border-image-width: 18px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 8px 12px;
  box-sizing: border-box;
}

/* ============================================
   LIST / CARD ITEM FRAME (Nine-slice)
   Source: ListFrame00_01~02_Bg.png (50x48)
   ============================================ */
.ui-card {
  border: 20px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/ListFrame00_01~02_Bg.png');
  border-image-slice: 22 22 22 22 fill;
  border-image-width: 20px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 8px 12px;
  box-sizing: border-box;
}

/* ============================================
   ITEM FRAME (Nine-slice) - for icons, avatars
   Source: ItemFrame00~03_Bg.png (60x62)
   ============================================ */
.ui-item-frame {
  border: 22px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/ItemFrame00~03_Bg.png');
  border-image-slice: 26 26 28 26 fill;
  border-image-width: 22px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   TOAST MESSAGE (Nine-slice)
   Source: ToastMessage_Bg_White.png (4x32)
   ============================================ */
.ui-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  border: 14px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/UI_Etc/ToastMessage_Bg_White.png');
  border-image-slice: 2 2 14 2 fill;
  border-image-width: 14px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 0 12px;
  font-family: 'Sen', 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  white-space: nowrap;
}
.ui-toast.show {
  opacity: 1;
}

/* ============================================
   BOTTOM NAVIGATION
   Source: Menu_BottomBtn_Bg.png (4x9)
          Menu_BottomBtn_TabFocus.png (54x27)
   ============================================ */
.ui-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  border: 0;
  border-top: 4px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Button/Menu_BottomBtn_Bg.png');
  border-image-slice: 4 2 4 2 fill;
  border-image-width: 4px 2px;
  border-image-repeat: stretch;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
  z-index: 100;
}

/* ============================================
   RESOURCE BAR (for currency display)
   Source: ResourceBar_Single_Bg.png (26x26)
   ============================================ */
.ui-resource-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 10px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/UI_Etc/ResourceBar_Single_Bg.png');
  border-image-slice: 12 12 12 12 fill;
  border-image-width: 10px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 0 8px;
  height: 36px;
  font-family: 'Cairo', 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  box-sizing: border-box;
}
.ui-resource-bar img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ============================================
   BANNER / TITLE FRAME
   Source: BannerFrame03_Single.png (338x114)
   ============================================ */
.ui-banner {
  border: 30px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/BannerFrame03_Single.png');
  border-image-slice: 40 30 40 60 fill;
  border-image-width: 30px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 4px 16px;
  font-family: 'Sen', 'Nunito', sans-serif;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.ui-font-title {
  font-family: 'Sen', 'Nunito', sans-serif;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.ui-font-number {
  font-family: 'Cairo', 'Nunito', sans-serif;
  font-weight: 800;
}
.ui-font-body {
  font-family: 'Sen', 'Nunito', sans-serif;
  font-weight: 400;
}

/* ============================================
   UTILITY
   ============================================ */
.ui-text-center { text-align: center; }
.ui-mt-8 { margin-top: 8px; }
.ui-mt-12 { margin-top: 12px; }
.ui-mb-8 { margin-bottom: 8px; }
.ui-gap-8 { gap: 8px; }

/* ============================================
   LIST FRAMES (Nine-slice) - Guild rankings, members
   Source: ListFrame04_Single_f_*.png (80x83)
   ============================================ */
.ui-list-blue, .ui-list-yellow {
  border: 28px solid transparent;
  border-image-width: 28px;
  border-image-repeat: round;
  background: none;
  padding: 4px 8px;
}
.ui-list-blue {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/ListFrame04_Single_f_Blue.png');
  border-image-slice: 30 30 32 30 fill;
}
.ui-list-yellow {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/ListFrame04_Single_f_Yellow.png');
  border-image-slice: 30 30 32 30 fill;
}

/* ============================================
   TOAST ALERTS (Nine-slice) - Status messages
   Source: ToastMessage_Bg_*.png (4x32)
   ============================================ */
.ui-alert-green, .ui-alert-red, .ui-alert-yellow {
  border: 14px solid transparent;
  border-image-width: 14px;
  border-image-repeat: round;
  background: none;
  padding: 4px 8px;
}
.ui-alert-green {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/UI_Etc/ToastMessage_Bg_Green.png');
  border-image-slice: 14 2 14 2 fill;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.ui-alert-red {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/UI_Etc/ToastMessage_Bg_Red.png');
  border-image-slice: 14 2 14 2 fill;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.ui-alert-yellow {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/UI_Etc/ToastMessage_Bg_Yellow.png');
  border-image-slice: 14 2 14 2 fill;
}

/* ============================================
   SLIDER / PROGRESS (Nine-slice) - Countdown bars
   Source: Slider_Basic01_Bg_Single.png (24x56)
   ============================================ */
.ui-slider-bg {
  border: 12px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Slider/Slider_Basic01_Bg_Single.png');
  border-image-slice: 24 12 24 12 fill;
  border-image-width: 12px;
  border-image-repeat: round;
  height: 24px;
  position: relative;
  overflow: hidden;
}
.ui-slider-fill {
  position: absolute;
  top: 2px; left: 2px; bottom: 2px;
  border-radius: 8px;
  background: linear-gradient(180deg, #6dff6d, #22bb22);
  transition: width 0.5s;
}

/* ============================================
   GUILD ICON HELPERS
   ============================================ */
.ui-icon {
  display: inline-block;
  width: 20px; height: 20px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}
.ui-icon-sm { width: 16px; height: 16px; }
.ui-icon-md { width: 24px; height: 24px; }
.ui-icon-lg { width: 32px; height: 32px; }

/* ============================================
   POPUP - TOPBAR BLUE (Nine-slice)
   Source: Popup07_Topbar_Divided_Single_Blue.png (108x347)
   Blue accent divided topbar popup
   ============================================ */
.ui-popup-topbar-blue {
  background: none;
  border: 40px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Popup/Popup07_Topbar_Divided_Single_Blue.png');
  border-image-slice: 120 40 80 40 fill;
  border-image-width: 90px 40px 60px 40px;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 8px 12px 12px;
  text-align: center;
  max-width: 340px;
  width: 92%;
  box-sizing: border-box;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
  position: relative;
}
.ui-popup-topbar-blue h2 {
  font-family: 'Sen', 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ============================================
   POPUP - TOPBAR SKY (Nine-slice)
   Source: Popup07_Topbar_Divided_Single_Sky.png (108x347)
   Light sky accent divided topbar popup
   ============================================ */
.ui-popup-topbar-sky {
  background: none;
  border: 40px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Popup/Popup07_Topbar_Divided_Single_Sky.png');
  border-image-slice: 120 40 80 40 fill;
  border-image-width: 90px 40px 60px 40px;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 8px 12px 12px;
  text-align: center;
  max-width: 340px;
  width: 92%;
  box-sizing: border-box;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
  position: relative;
}
.ui-popup-topbar-sky h2 {
  font-family: 'Sen', 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ============================================
   POPUP - TICKET (Nine-slice + overlay)
   Source: Popup_Ticket_Bg.png (793x159)
           Popup_Ticket_Border.png (779x152)
   Horizontal ticket-shaped notice/event popup
   ============================================ */
.ui-popup-ticket {
  background: none;
  border: 40px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Popup/Popup_Ticket_Bg.png');
  border-image-slice: 50 80 50 80 fill;
  border-image-width: 40px 60px 40px 60px;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 8px 16px;
  text-align: center;
  max-width: 380px;
  width: 95%;
  box-sizing: border-box;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
  position: relative;
}
.ui-popup-ticket::after {
  content: '';
  position: absolute;
  top: -40px; left: -60px; right: -60px; bottom: -40px;
  border: 40px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Popup/Popup_Ticket_Border.png');
  border-image-slice: 48 78 48 78 fill;
  border-image-width: 40px 60px 40px 60px;
  border-image-repeat: stretch;
  pointer-events: none;
}

/* ============================================
   POPUP - OUTTITLE (Nine-slice + pseudo title)
   Source: Popup_OutTitle_Bg.png (114x117)
           Popup_OutTitle_Bg_Title.png (150x123)
   Popup with title ribbon protruding above
   ============================================ */
.ui-popup-outtitle {
  background: none;
  border: 40px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Popup/Popup_OutTitle_Bg.png');
  border-image-slice: 40 40 40 40 fill;
  border-image-width: 40px;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 28px 12px 12px;
  text-align: center;
  max-width: 340px;
  width: 92%;
  box-sizing: border-box;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
  position: relative;
}
.ui-popup-outtitle::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 70px;
  background: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Popup/Popup_OutTitle_Bg_Title.png') center/contain no-repeat;
  pointer-events: none;
}
.ui-popup-outtitle h2 {
  font-family: 'Sen', 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 8px;
}

/* ============================================
   BANNER - BLUE (Nine-slice)
   Source: BannerFrame06_Single_Blue.png (299x283)
   Sub-page header, section title banner
   ============================================ */
.ui-banner-blue {
  border: 30px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/BannerFrame06_Single_Blue.png');
  border-image-slice: 40 40 40 40 fill;
  border-image-width: 30px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 4px 16px;
  font-family: 'Sen', 'Nunito', sans-serif;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ============================================
   BANNER - GRAY (Nine-slice)
   Source: BannerFrame06_Single_Gray.png (299x283)
   Neutral section header banner
   ============================================ */
.ui-banner-gray {
  border: 30px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/BannerFrame06_Single_Gray.png');
  border-image-slice: 40 40 40 40 fill;
  border-image-width: 30px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 4px 16px;
  font-family: 'Sen', 'Nunito', sans-serif;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ============================================
   FRAME - WHITE (Nine-slice)
   Source: BorderFrame_Round20_White_Bg.png (44x46)
   White input panel, light card
   ============================================ */
.ui-frame-white {
  border: 18px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/BorderFrame_Round20_White_Bg.png');
  border-image-slice: 20 20 22 20 fill;
  border-image-width: 18px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 8px 12px;
  box-sizing: border-box;
}

/* ============================================
   FRAME - WHITE FOCUS (Nine-slice + glow)
   Source: BorderFrame_Round20_White_Bg.png (44x46)
           BorderFrame_Round20_White_Light.png (32x12) as highlight
   White panel with focus/active glow
   ============================================ */
.ui-frame-white-focus {
  border: 18px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/BorderFrame_Round20_White_Bg.png');
  border-image-slice: 20 20 22 20 fill;
  border-image-width: 18px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 8px 12px;
  box-sizing: border-box;
  filter: drop-shadow(0 0 6px rgba(100,180,255,0.5));
  position: relative;
}
.ui-frame-white-focus::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 10%;
  right: 10%;
  height: 6px;
  background: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/BorderFrame_Round20_White_Light.png') center/100% 100% no-repeat;
  pointer-events: none;
}

/* ============================================
   ITEM FRAME - BLUE (Nine-slice)
   Source: ItemFrame03_Single_Blue.png (128x130)
   Basic avatar/game icon frame
   ============================================ */
.ui-item-frame-blue {
  border: 22px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/ItemFrame03_Single_Blue.png');
  border-image-slice: 48 48 50 48 fill;
  border-image-width: 22px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   ITEM FRAME - YELLOW (Nine-slice)
   Source: ItemFrame03_Single_Yellow.png (128x130)
   Highlighted slot / reward slot frame
   ============================================ */
.ui-item-frame-yellow {
  border: 22px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/ItemFrame03_Single_Yellow.png');
  border-image-slice: 48 48 50 48 fill;
  border-image-width: 22px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   ITEM FRAME - PURPLE (Nine-slice)
   Source: ItemFrame03_Single_Purple.png (128x130)
   Social / rarity slot frame
   ============================================ */
.ui-item-frame-purple {
  border: 22px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Frame/ItemFrame03_Single_Purple.png');
  border-image-slice: 48 48 50 48 fill;
  border-image-width: 22px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   LABEL RIBBON - YELLOW (Nine-slice)
   Source: Title_Ribbon01_Yellow.png (304x143)
   Section highlight ribbon
   ============================================ */
.ui-label-ribbon-yellow {
  border: 35px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Label/Title_Ribbon01_Yellow.png');
  border-image-slice: 45 90 50 90 fill;
  border-image-width: 35px 70px 40px 70px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 0 8px;
  font-family: 'Sen', 'Nunito', sans-serif;
  font-weight: 800;
  color: #5a3e00;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  text-align: center;
  display: inline-block;
}

/* ============================================
   LABEL RIBBON - BLUE (Nine-slice)
   Source: Title_Ribbon01_Blue.png (304x143)
   Info section ribbon
   ============================================ */
.ui-label-ribbon-blue {
  border: 35px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Label/Title_Ribbon01_Blue.png');
  border-image-slice: 45 90 50 90 fill;
  border-image-width: 35px 70px 40px 70px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 0 8px;
  font-family: 'Sen', 'Nunito', sans-serif;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,80,0.4);
  text-align: center;
  display: inline-block;
}

/* ============================================
   LABEL RIBBON - RED (Nine-slice)
   Source: Title_Ribbon01_Red.png (304x143)
   Danger / limited badge ribbon
   ============================================ */
.ui-label-ribbon-red {
  border: 35px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Label/Title_Ribbon01_Red.png');
  border-image-slice: 45 90 50 90 fill;
  border-image-width: 35px 70px 40px 70px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 0 8px;
  font-family: 'Sen', 'Nunito', sans-serif;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 4px rgba(80,0,0,0.4);
  text-align: center;
  display: inline-block;
}

/* ============================================
   TITLE DIVIDER (Background image stretch)
   Source: Title_Line03_Divider.png (10x6)
   Section separator line
   ============================================ */
.ui-title-divider {
  width: 100%;
  height: 3px;
  background: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Label/Title_Line03_Divider.png') center/100% 100% no-repeat;
  border: none;
  margin: 8px 0;
}

/* ============================================
   RESOURCE BAR - WHITE (Nine-slice)
   Source: ResourceBar_White_Bg.png (26x26)
   Currency display inside white popups
   ============================================ */
.ui-resource-bar-white {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 10px solid transparent;
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/UI_Etc/ResourceBar_White_Bg.png');
  border-image-slice: 12 12 12 12 fill;
  border-image-width: 10px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  padding: 0 8px;
  height: 36px;
  font-family: 'Cairo', 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  box-sizing: border-box;
}
.ui-resource-bar-white img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ============================================
   DOT ALERT (Fixed size, layered backgrounds)
   Source: Alert_Dot_Bg.png (36x36)
           Alert_Dot_Border.png (36x39)
           Alert_Dot_Light.png (28x28)
   Unread / new notification indicator
   ============================================ */
.ui-dot-alert {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background:
    url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/UI_Etc/Alert_Dot_Light.png') center/14px 14px no-repeat,
    url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/UI_Etc/Alert_Dot_Border.png') center/20px 20px no-repeat,
    url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/UI_Etc/Alert_Dot_Bg.png') center/18px 18px no-repeat;
  border: none;
  flex-shrink: 0;
  font-family: 'Cairo', 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  z-index: 2;
}

/* ===== Parallelogram Tags (칩/뱃지용) ===== */
.ui-tag-yellow,
.ui-tag-blue,
.ui-tag-green,
.ui-tag-purple,
.ui-tag-gray {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  border: none;
  border-image-slice: 20 20 22 20 fill;
  border-image-width: 14px;
  border-image-repeat: round;
  font-family: 'Sen', 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  line-height: 1.2;
  white-space: nowrap;
}
.ui-tag-yellow {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Label/Label_Parallelogram_Yellow.png');
  color: #5a3e00;
  text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}
.ui-tag-blue {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Label/Label_Parallelogram_Blue.png');
}
.ui-tag-green {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Label/Label_Parallelogram_Green.png');
}
.ui-tag-purple {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Label/Label_Parallelogram_Purple.png');
}
.ui-tag-gray {
  border-image-source: url('/images/GUI%20Pro-SuperCasual/ResourcesData/Sprites/Components/Label/Label_Parallelogram_Gray.png');
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ═══════════════════════════════════════════════════════════
   Global Bottom Nav — ref UIUX_02 (structural port)
   ───────────────────────────────────────────────────────────
   레퍼런스 UIUX_레퍼런스_02.html 의 하단 nav 연출 엔진을 구조적으로 이식.
   Scope: `.bottom-nav.bottom-nav-ref02`.

   구조 요소:
     - .glow-layer > .glow-inner     : blob-x 따라 움직이는 blur aurora halo
     - .blob-indicator > -bg          : active/parent-active 탭 위 움직이는 glass blob
     - .ripple-container > .ripple-fx : 클릭 좌표에 ring 3개 (JS 동적 삽입)
     - body[data-nav-tab]             : --aurora-h/s 초기값 공급
     - @property --aurora-h/s/--blob-x/w : transition 가능한 CSS 변수

   JS 엔진: public/nav-ref02-engine.js
     - navInit    : .active 우선, .parent-active fallback 기준 blob/aurora 초기화
     - navMoveBlob: 클릭된 탭 위치/폭 측정 → --blob-x/w + blob-indicator left/width 업데이트
     - navSetAurora: --aurora-h/s 업데이트
     - navSpawnRipple: 3개 ripple 시간차 생성

   기능 유지:
     - href 4개 (멀티페이지 네비게이션)
     - .active 현재 페이지, .parent-active (friends/profile → Home)
     - #playDot badge slot on Play
     - JS click 시 e.preventDefault() 안 함 → 브라우저 네이티브 href 이동 (지연 0)
   ═══════════════════════════════════════════════════════════ */
@property --aurora-h { syntax: "<number>"; inherits: true; initial-value: 130; }
@property --aurora-s { syntax: "<percentage>"; inherits: true; initial-value: 70%; }
@property --blob-x { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --blob-w { syntax: "<length>"; inherits: true; initial-value: 0px; }
.bottom-nav.bottom-nav-ref02 {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  /* footprint grows by safe-area so pill inner height stays 56px on all devices */
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px));
  background: rgba(6, 8, 14, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 0.5px solid rgba(255, 255, 255, 0.04);
  display: flex;
  z-index: 100;
  --aurora-h: 130;
  --aurora-s: 70%;
  --blob-x: 0px;
  --blob-w: 0px;
  transition: --aurora-h 600ms ease, --aurora-s 600ms ease;
}
/* 탭별 aurora hue — body[data-nav-tab] 로 현재 페이지 식별.
   JS 엔진(nav-ref02-engine.js)이 초기 blob 위치와 aurora 값을 읽어 설정.
   hue/sat 만 덮어쓰면 glow-layer/blob-indicator/nav-inner/icon/label 전체가 탭 톤으로 전환됨. */
body[data-nav-tab="play"]  .bottom-nav.bottom-nav-ref02 { --aurora-h: 210; --aurora-s: 80%; }
body[data-nav-tab="home"]  .bottom-nav.bottom-nav-ref02 { --aurora-h: 130; --aurora-s: 70%; }
body[data-nav-tab="guild"] .bottom-nav.bottom-nav-ref02 { --aurora-h: 270; --aurora-s: 75%; }
body[data-nav-tab="vault"] .bottom-nav.bottom-nav-ref02 { --aurora-h: 45;  --aurora-s: 85%; }

/* glow-layer — nav pill 위에 떠 있는 blur aurora halo.
   --blob-x/--blob-w 따라 수평 이동. z-index 0 (nav-inner 뒤). */
.bottom-nav.bottom-nav-ref02 .glow-layer {
  position: absolute;
  left: 10px; right: 10px;
  top: 0;
  height: 64px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: 60px;
}
.bottom-nav.bottom-nav-ref02 .glow-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 64px;
  transform: translateX(calc(var(--blob-x) + var(--blob-w) / 2 - 70px));
  transition: transform 450ms cubic-bezier(0.4, -0.2, 0.2, 1.4);
  background: radial-gradient(ellipse 70px 36px at 50% 50%,
    hsl(var(--aurora-h) var(--aurora-s) 62% / 0.55) 0%,
    hsl(var(--aurora-h) var(--aurora-s) 55% / 0.22) 45%,
    transparent 78%);
  filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 70%, transparent 100%);
  will-change: transform;
}

.bottom-nav.bottom-nav-ref02 .nav-inner {
  position: relative;
  flex: 1;
  border-radius: 60px;
  padding: 1.5px;
  background:
    radial-gradient(ellipse 140px 42px at calc(var(--blob-x) + var(--blob-w) / 2) 0%,
      hsl(var(--aurora-h) var(--aurora-s) 58% / 0.32) 0%,
      rgba(255, 255, 255, 0.04) 72%),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(255, 255, 255, 0.04) 55%,
      rgba(255, 255, 255, 0.14) 100%);
  transition: background 450ms cubic-bezier(0.4, -0.2, 0.2, 1.4);
  z-index: 1;
}
.bottom-nav.bottom-nav-ref02 .nav-inner-bg {
  position: relative;
  width: 100%; height: 100%;
  background: #0a0d14;
  border-radius: inherit;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
}

/* blob-indicator — active/parent-active 탭 위 움직이는 glass blob.
   JS 엔진이 inline style.left / style.width 로 타깃 탭 측정값 세팅.
   --blob-x/--blob-w 는 동일 값을 root 변수로 미러해서 glow/radial 이 따라 움직이게 함. */
.bottom-nav.bottom-nav-ref02 .blob-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    left 450ms cubic-bezier(0.4, -0.2, 0.2, 1.4),
    width 450ms cubic-bezier(0.4, -0.2, 0.2, 1.4);
  will-change: left, width;
  opacity: 0;
}
.bottom-nav.bottom-nav-ref02 .blob-indicator.ready { opacity: 1; }
.bottom-nav.bottom-nav-ref02 .blob-indicator-bg {
  position: absolute;
  inset: 0 6px;
  border-radius: 46px;
  background: linear-gradient(to bottom,
    hsl(var(--aurora-h) var(--aurora-s) 58% / 0.22) 0%,
    hsl(var(--aurora-h) var(--aurora-s) 48% / 0.06) 100%);
  box-shadow:
    inset 0 0 0 1px hsl(var(--aurora-h) var(--aurora-s) 60% / 0.22),
    inset 0 -4px 10px hsl(var(--aurora-h) var(--aurora-s) 55% / 0.24),
    0 0 12px hsl(var(--aurora-h) var(--aurora-s) 55% / 0.18);
  transition: background 600ms ease, box-shadow 600ms ease;
}
.bottom-nav.bottom-nav-ref02 .blob-indicator.morphing .blob-indicator-bg {
  animation: navRef02BlobMorph 450ms cubic-bezier(0.4, -0.2, 0.2, 1.4);
}
@keyframes navRef02BlobMorph {
  0%   { border-radius: 46px; }
  35%  { border-radius: 60px 40px 58px 42px / 50px 46px 52px 48px; }
  70%  { border-radius: 44px 52px 42px 54px / 46px 50px 44px 52px; }
  100% { border-radius: 46px; }
}

/* ripple-container — click 좌표에 ring 3 개 시간차 스폰 (JS 가 .ripple-fx 동적 삽입). */
.bottom-nav.bottom-nav-ref02 .ripple-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
}
.bottom-nav.bottom-nav-ref02 .ripple-fx {
  position: absolute;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border-radius: 50%;
  border: 2px solid hsl(var(--aurora-h) var(--aurora-s) 65% / 0.85);
  transform: scale(0);
  opacity: 0.7;
  pointer-events: none;
  animation: navRef02RippleExpand var(--ripple-dur, 560ms) cubic-bezier(0.2, 0.7, 0.3, 1) var(--ripple-delay, 0ms) forwards;
}
@keyframes navRef02RippleExpand {
  0%   { transform: scale(0); opacity: 0.7; }
  100% { transform: scale(4); opacity: 0; }
}

.bottom-nav.bottom-nav-ref02 .nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 2px 3px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.42);
  transition: color 300ms ease, transform 150ms ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.bottom-nav.bottom-nav-ref02 .nav-item:active { transform: scale(0.94); }

.bottom-nav.bottom-nav-ref02 .nav-item .icon-wrap {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: scale(0.82);
  filter: brightness(0.65) saturate(0.6) drop-shadow(0 1px 1px rgba(0,0,0,0.3));
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), filter 300ms ease;
}
.bottom-nav.bottom-nav-ref02 .nav-item:not(.active):not(.parent-active):hover .icon-wrap {
  transform: scale(0.92);
  filter: brightness(0.8) saturate(0.75) drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}
.bottom-nav.bottom-nav-ref02 .nav-item svg {
  width: 26px; height: 26px;
  display: block;
  transition: filter 300ms ease;
}
.bottom-nav.bottom-nav-ref02 .nav-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 300ms ease, text-shadow 300ms ease;
}

/* active + parent-active share base color tone */
.bottom-nav.bottom-nav-ref02 .nav-item.active,
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active {
  color: hsl(var(--aurora-h) var(--aurora-s) 80%);
}
.bottom-nav.bottom-nav-ref02 .nav-item.active .icon-wrap,
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active .icon-wrap {
  transform: scale(1.065) translateY(-1px);
  filter:
    drop-shadow(0 3px 3px rgba(0,0,0,0.5))
    drop-shadow(0 0 8px hsl(var(--aurora-h) var(--aurora-s) 55% / 0.45));
}
/* active-only: continuous float */
.bottom-nav.bottom-nav-ref02 .nav-item.active .icon-wrap {
  animation: navRef02IconFloat 2.5s ease-in-out infinite;
}
.bottom-nav.bottom-nav-ref02 .nav-item.active .nav-label,
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active .nav-label {
  color: hsl(var(--aurora-h) var(--aurora-s) 82%);
  text-shadow: 0 0 6px hsl(var(--aurora-h) var(--aurora-s) 55% / 0.55);
}

/* parent-active — friends/profile 에서 Home 기준으로 사용.
   .active 보다 softer 톤으로 "현재 페이지 아님" 시각 구분. */
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active {
  color: hsl(var(--aurora-h) var(--aurora-s) 72%);
}
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active .icon-wrap {
  transform: scale(1.0);
  filter:
    brightness(0.92) saturate(0.85)
    drop-shadow(0 2px 2px rgba(0,0,0,0.4))
    drop-shadow(0 0 4px hsl(var(--aurora-h) var(--aurora-s) 55% / 0.22));
}
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active .nav-label {
  color: hsl(var(--aurora-h) var(--aurora-s) 78%);
  text-shadow: 0 0 3px hsl(var(--aurora-h) var(--aurora-s) 55% / 0.30);
}
/* parent-active: stop ALL internal motion (float + scanline + wheel + dial + door + handle + light) */
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active .icon-wrap,
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active .gscan,
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active .wblade,
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active .vdial,
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active .vdoor,
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active .vhandle,
.bottom-nav.bottom-nav-ref02 .nav-item.parent-active .vlight {
  animation: none !important;
}

/* per-tab internal motion — only while the tab is .active. .wblade idles slow elsewhere. */
.bottom-nav.bottom-nav-ref02 .nav-item .wblade {
  animation: navRef02WheelSlow 12s linear infinite;
  transform-origin: 20px 16px;
}
.bottom-nav.bottom-nav-ref02 .nav-item.active .wblade {
  animation: navRef02WheelFast 3s linear infinite;
  transform-origin: 20px 16px;
}
.bottom-nav.bottom-nav-ref02 .nav-item.active .gscan {
  animation: navRef02Sline 1.5s linear 0.6s infinite;
}
.bottom-nav.bottom-nav-ref02 .nav-item.active .vdial {
  animation: navRef02DialCrack 6s ease-in-out infinite;
  transform-origin: 16px 18px;
}
.bottom-nav.bottom-nav-ref02 .nav-item.active .vdoor {
  animation: navRef02DoorOpen 6s ease-in-out infinite;
}
.bottom-nav.bottom-nav-ref02 .nav-item.active .vhandle {
  animation: navRef02HandlePush 6s ease-in-out infinite;
}
.bottom-nav.bottom-nav-ref02 .nav-item.active .vlight {
  animation: navRef02GoldGlow 6s ease-in-out infinite;
}

/* #playDot badge slot — sits on Play tab */
.bottom-nav.bottom-nav-ref02 .nav-dot {
  position: absolute;
  top: 6px;
  left: calc(50% + 8px);
  width: 8px; height: 8px;
  background: #ff4444;
  border: 1.5px solid #0a0d14;
  border-radius: 50%;
  display: none;
  z-index: 3;
  pointer-events: none;
}
.bottom-nav.bottom-nav-ref02 .nav-dot.show { display: block; }

@keyframes navRef02IconFloat {
  0%, 100% { transform: scale(1.065) translateY(-1px); }
  50%      { transform: scale(1.065) translateY(-3px); }
}
@keyframes navRef02Sline {
  0%   { transform: translateY(-8px); }
  100% { transform: translateY(14px); }
}
@keyframes navRef02WheelSlow {
  0%   { transform: rotate(45deg); }
  100% { transform: rotate(405deg); }
}
@keyframes navRef02WheelFast {
  0%   { transform: rotate(45deg); }
  100% { transform: rotate(405deg); }
}
@keyframes navRef02DialCrack {
  0%         { transform: rotate(0); }
  12%        { transform: rotate(150deg); }
  24%        { transform: rotate(60deg); }
  36%, 50%   { transform: rotate(220deg); }
  100%       { transform: rotate(0); }
}
@keyframes navRef02DoorOpen {
  0%, 10%    { clip-path: inset(0 0 0 0); }
  30%, 70%   { clip-path: inset(0 3px 0 0); }
  90%, 100%  { clip-path: inset(0 0 0 0); }
}
@keyframes navRef02HandlePush {
  0%, 10%    { transform: translateX(0); }
  20%, 70%   { transform: translateX(-3px); }
  80%, 100%  { transform: translateX(0); }
}
@keyframes navRef02GoldGlow {
  0%, 10%    { opacity: 0; filter: blur(0); }
  30%        { opacity: 0.8; filter: blur(1.5px); }
  50%        { opacity: 1; filter: blur(3px); }
  70%        { opacity: 0.8; filter: blur(1.5px); }
  90%, 100%  { opacity: 0; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-nav.bottom-nav-ref02 .blob-indicator,
  .bottom-nav.bottom-nav-ref02 .glow-inner,
  .bottom-nav.bottom-nav-ref02 .nav-inner,
  .bottom-nav.bottom-nav-ref02 .blob-indicator-bg {
    transition: none !important;
  }
  .bottom-nav.bottom-nav-ref02 .blob-indicator.morphing .blob-indicator-bg,
  .bottom-nav.bottom-nav-ref02 .ripple-fx,
  .bottom-nav.bottom-nav-ref02 .nav-item.active .icon-wrap,
  .bottom-nav.bottom-nav-ref02 .nav-item .wblade,
  .bottom-nav.bottom-nav-ref02 .nav-item.active .gscan,
  .bottom-nav.bottom-nav-ref02 .nav-item.active .vdial,
  .bottom-nav.bottom-nav-ref02 .nav-item.active .vdoor,
  .bottom-nav.bottom-nav-ref02 .nav-item.active .vhandle,
  .bottom-nav.bottom-nav-ref02 .nav-item.active .vlight {
    animation: none !important;
  }
  .bottom-nav.bottom-nav-ref02 .nav-item:active .icon-wrap {
    transition: none !important;
  }
}

/* ============================================
   VAULT UI SHELLS  (ui-vault-*)
   1차 승격 범위: CTA / accordion / utility-card / state-pill
   - scroll helper / popup / hero composition 은 wallet.html page-local
   - 9-slice 느낌은 CSS-only layered frame (border-image 미사용)
   - dark 모바일 기준 토큰 / 반응형 4버킷 포함
   ============================================ */

:root {
  /* Vault radius */
  --vault-r-xs: 8px;
  --vault-r-sm: 10px;
  --vault-r-md: 12px;
  --vault-r-lg: 14px;
  --vault-r-xl: 20px;
  /* Vault spacing */
  --vault-space-4: 4px;
  --vault-space-8: 8px;
  --vault-space-12: 12px;
  --vault-space-16: 16px;
  --vault-space-20: 20px;
  --vault-space-24: 24px;
  /* Safe area (ui-vault scope) */
  --vault-sa-top: env(safe-area-inset-top, 0px);
  --vault-sa-bot: env(safe-area-inset-bottom, 0px);
  /* Easing */
  --vault-apple: cubic-bezier(.25,.1,.25,1);
  /* Vault palette */
  --vault-ton: #0098ea;
  --vault-potato: #4cd830;
  --vault-diamond: #80b8f0;
  --vault-gold: #f0b818;
  --vault-red: #f04040;
  --vault-card: #171c2c;
  --vault-card-soft: #1c2236;
  --vault-tx: #e8ecf8;
  --vault-tx2: #c8d0e4;
  --vault-dim: #8a96b8;
  --vault-mut: #586484;
}

/* ---- CTA (v12 black glossy pill — 좁은 중앙 pill + 내부 icon/label flex / 레퍼런스 .vault-page1 .btn-ton 기준) ----
   레퍼런스 원본: width: min(150px, 17vh); padding: 10px; margin: auto; white-space: nowrap;
   내부 구조: <span class="cta-icon">💠</span><span class="cta-label">...</span>
   한국어 긴 라벨 안전장치: .cta-label 의 min-width:0 + overflow:hidden + text-overflow:ellipsis. */
.ui-vault-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  min-width: min(170px, 19vh);
  max-width: calc(100% - 32px);
  margin: 0 auto;
  min-height: 52px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  background: linear-gradient(180deg, #1a1a20 0%, #0a0a0e 55%, #050508 100%);
  color: var(--vault-tx);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.35);
  transition: transform .12s var(--vault-apple), box-shadow .2s var(--vault-apple), opacity .12s var(--vault-apple);
}
/* inner icon — 이모지 글리프 (1차 💠 / 🥔), variant glow 는 아래 */
.ui-vault-cta .cta-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla','EmojiOne Color','Android Emoji',sans-serif;
}
/* inner label — ellipsis 타깃, flex 안에서 min-width:0 필수 */
.ui-vault-cta .cta-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* scanline sheen (미세 수직 라인) */
.ui-vault-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, transparent 0 2px, rgba(255,255,255,.025) 2px 3px);
  pointer-events: none;
  z-index: 1;
  opacity: .7;
}
/* shimmer sweep (기울어진 빛줄기) */
.ui-vault-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
  animation: uiVaultCtaShimmer 5s ease-in-out infinite;
}
.ui-vault-cta > * { position: relative; z-index: 3; }
.ui-vault-cta:disabled { opacity: .45; pointer-events: none; }
.ui-vault-cta:active {
  transform: translateY(1px) scale(.995);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 12px rgba(0,0,0,.50);
}
@keyframes uiVaultCtaShimmer {
  0% { left: -100%; }
  20% { left: 120%; }
  100% { left: 120%; }
}

/* primary = TON cyan text + cyan glow */
.ui-vault-cta[data-variant="primary"] {
  color: #9ee8ff;
  text-shadow: 0 0 10px rgba(0,200,255,.55), 0 0 22px rgba(0,152,234,.25);
  border-color: rgba(0,200,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.35),
    0 0 14px rgba(0,152,234,.22),
    0 0 32px rgba(0,152,234,.10);
}
/* primary icon glow (cyan halo) — 이모지 기본 색 위에 tint 와 glow 를 얹어 CTA accent 에 녹임 */
.ui-vault-cta[data-variant="primary"] .cta-icon {
  filter:
    drop-shadow(0 0 6px rgba(0,200,255,.55))
    drop-shadow(0 0 14px rgba(0,152,234,.30));
}

/* secondary = POTATO gold text + gold glow */
.ui-vault-cta[data-variant="secondary"] {
  color: #ffe890;
  text-shadow: 0 0 10px rgba(255,210,80,.55), 0 0 22px rgba(240,184,24,.25);
  border-color: rgba(255,210,80,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.35),
    0 0 14px rgba(240,184,24,.22),
    0 0 32px rgba(240,184,24,.10);
}
/* secondary icon glow (gold halo) */
.ui-vault-cta[data-variant="secondary"] .cta-icon {
  filter:
    drop-shadow(0 0 6px rgba(255,210,80,.55))
    drop-shadow(0 0 14px rgba(240,184,24,.30));
}

/* ---- Accordion ------------------------------- */
.ui-vault-accordion-header {
  display: flex;
  align-items: center;
  padding: 12px 2px 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-top: 6px;
  min-height: 44px;
}
.ui-vault-accordion-header .label {
  flex: 1;
  font-size: 12px;
  font-weight: 800;
  color: var(--vault-dim);
  letter-spacing: .3px;
}
.ui-vault-accordion-header .arrow {
  font-size: 11px;
  color: rgba(255,255,255,.42);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: .5px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 4px rgba(0,0,0,.35);
  transition: transform .3s var(--vault-apple), background .3s var(--vault-apple), color .3s var(--vault-apple), box-shadow .3s var(--vault-apple);
}
.ui-vault-accordion-header.open .arrow {
  transform: rotate(90deg);
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.60);
  box-shadow: inset 0 0 4px rgba(0,0,0,.20), 0 0 6px rgba(255,255,255,.05);
}
.ui-vault-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--vault-apple), padding .4s var(--vault-apple), border-color .4s var(--vault-apple);
  border-radius: var(--vault-r-sm);
  background: transparent;
  border: .5px solid transparent;
  margin-bottom: 2px;
}
.ui-vault-accordion-header.open + .ui-vault-accordion-body {
  max-height: 600px;
  padding: 4px 14px 8px;
  background: linear-gradient(145deg, rgba(23,28,44,.92), rgba(12,14,24,.94));
  border-color: rgba(255,255,255,.05);
}
.ui-vault-accordion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  font-size: 13px;
  border-bottom: .5px solid rgba(255,255,255,.03);
}
.ui-vault-accordion-row:last-child { border-bottom: none; }
.ui-vault-accordion-row .row-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ui-vault-accordion-row .row-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--vault-tx2);
}
.ui-vault-accordion-row .row-meta {
  font-size: 10px;
  color: var(--vault-mut);
}
.ui-vault-accordion-row .row-amount {
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  margin-left: 10px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.ui-vault-accordion-row .row-amount[data-kind="ton"]     { color: var(--vault-ton); }
.ui-vault-accordion-row .row-amount[data-kind="potato"]  { color: var(--vault-potato); }
.ui-vault-accordion-row .row-amount[data-kind="diamond"] { color: var(--vault-diamond); }
.ui-vault-accordion-empty {
  text-align: center;
  padding: 16px 0;
  font-size: 12px;
  color: var(--vault-mut);
}

/* ---- Utility compact card -------------------- */
.ui-vault-utility-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--vault-r-sm);
  background: linear-gradient(160deg, var(--vault-card), var(--vault-card-soft));
  border: .5px solid rgba(255,255,255,.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 2px 10px rgba(0,0,0,.12);
}
.ui-vault-utility-card .icon {
  font-size: 24px;
  flex-shrink: 0;
}
.ui-vault-utility-card .info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ui-vault-utility-card .title {
  font-size: 13px;
  font-weight: 800;
  color: var(--vault-diamond);
  letter-spacing: .2px;
}
.ui-vault-utility-card .sub {
  font-size: 10px;
  color: var(--vault-dim);
}
.ui-vault-utility-card .amount {
  font-size: 22px;
  font-weight: 900;
  color: var(--vault-diamond);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- State pill ------------------------------ */
.ui-vault-state-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--vault-r-xs);
  flex-shrink: 0;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  letter-spacing: .1px;
}
.ui-vault-state-pill[data-state="processing"] {
  background: rgba(0,152,234,.10);
  color: var(--vault-ton);
}
.ui-vault-state-pill[data-state="completed"] {
  background: rgba(76,216,48,.10);
  color: var(--vault-potato);
}
.ui-vault-state-pill[data-state="failed"] {
  background: rgba(240,64,64,.10);
  color: var(--vault-red);
}

/* ---- Responsive buckets ---------------------- */
/* small width (320-359) */
@media (max-width: 359px) {
  .ui-vault-cta {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 999px;
    min-width: min(160px, 18vh);
    max-width: calc(100% - 24px);
    gap: 6px;
  }
  .ui-vault-cta .cta-icon { font-size: 16px; }
  .ui-vault-accordion-header { padding: 10px 0 8px; min-height: 44px; }
  .ui-vault-accordion-header .label { font-size: 11px; }
  .ui-vault-accordion-header .arrow { width: 22px; height: 22px; }
  .ui-vault-accordion-header.open + .ui-vault-accordion-body { padding: 4px 12px 8px; }
  .ui-vault-accordion-row { padding: 10px 0; }
  .ui-vault-accordion-row .row-title { font-size: 12px; }
  .ui-vault-accordion-row .row-amount { font-size: 12px; }
  .ui-vault-utility-card { padding: 14px; gap: 10px; }
  .ui-vault-utility-card .icon { font-size: 22px; }
  .ui-vault-utility-card .title { font-size: 12px; }
  .ui-vault-utility-card .amount { font-size: 20px; }
}

/* short height (<=700) */
@media (max-height: 700px) {
  .ui-vault-cta {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 999px;
    min-width: min(160px, 18vh);
    gap: 6px;
  }
  .ui-vault-cta .cta-icon { font-size: 16px; }
  .ui-vault-accordion-header { padding: 10px 0 6px; min-height: 44px; }
  .ui-vault-accordion-header.open + .ui-vault-accordion-body { padding: 2px 12px 6px; }
  .ui-vault-accordion-row { padding: 9px 0; }
  .ui-vault-accordion-row .row-title { font-size: 12px; }
  .ui-vault-accordion-row .row-meta { font-size: 9px; }
  .ui-vault-accordion-row .row-amount { font-size: 12px; }
  .ui-vault-utility-card { padding: 12px; gap: 10px; }
  .ui-vault-utility-card .title { font-size: 12px; }
  .ui-vault-utility-card .sub { font-size: 9px; }
  .ui-vault-utility-card .amount { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  /* CTA shimmer sweep 정지 (variant 무관) */
  .ui-vault-cta::after { animation: none !important; opacity: 0; }
  .ui-vault-cta,
  .ui-vault-accordion-header .arrow,
  .ui-vault-accordion-body { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL HELPER — 전 시스템 공용 컴포넌트
   (docs/design/scroll-helper-component-guide.md 기준)
   다크 글래스 2단 캡슐 + 화이트 chevron + 활성 상태만 포인트
   ═══════════════════════════════════════════════════════════ */

/* 2단 캡슐 body — 가시성 강화 R3 라운드 (2026-04-21)
   R2 범위에서도 "버튼인지 장식인지 헷갈림" 피드백이 남아 한 단계 더 올림.
   CTA를 넘지 않는 선에서 body 불투명도·테두리·아이콘·idle 노출을 상향. */
.ui-scroll-helper {
  position: fixed;
  right: var(--scroll-helper-right, 12px);
  bottom: calc(var(--scroll-helper-bottom-offset, 88px) + var(--sa-bot, env(safe-area-inset-bottom)));
  width: 46px;
  height: 92px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 20;
  border-radius: 999px;
  background: rgba(24, 30, 46, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 12px 30px rgba(0, 0, 0, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .28s cubic-bezier(.22,.61,.36,1),
              transform .28s cubic-bezier(.22,.61,.36,1);
}

.ui-scroll-helper[data-state="hidden"] {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

/* idle 노출: R3 — .92 (R2 .86) */
.ui-scroll-helper[data-state="both"],
.ui-scroll-helper[data-state="up_only"],
.ui-scroll-helper[data-state="down_only"] {
  opacity: .92;
  transform: translateY(0);
}

/* scrolling 중엔 한 단계만 조용하게 — R3 .66 (R2 .58) */
.ui-scroll-helper[data-scrolling="true"][data-state="both"],
.ui-scroll-helper[data-scrolling="true"][data-state="up_only"],
.ui-scroll-helper[data-scrolling="true"][data-state="down_only"] {
  opacity: .66;
}

/* 분할선 — R3 대비 추가 상향 */
.ui-scroll-helper::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
  z-index: 1;
}

.ui-scroll-helper-btn {
  pointer-events: auto;
  flex: 1 1 50%;
  width: 100%;
  min-height: 46px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #F4F8FF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: opacity .15s cubic-bezier(.22,.61,.36,1),
              background .15s cubic-bezier(.22,.61,.36,1);
  -webkit-tap-highlight-color: transparent;
}

.ui-scroll-helper-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
  transition: filter .2s cubic-bezier(.22,.61,.36,1),
              opacity .2s cubic-bezier(.22,.61,.36,1);
}

/* 활성 방향: 아이콘만 포인트 glow (R3 — 대비 base 상향) */
.ui-scroll-helper[data-state="both"]  .ui-scroll-helper-btn[data-dir="up"]   svg,
.ui-scroll-helper[data-state="up_only"] .ui-scroll-helper-btn[data-dir="up"] svg {
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 6px rgba(0, 200, 255, 0.60));
}
.ui-scroll-helper[data-state="both"]    .ui-scroll-helper-btn[data-dir="down"] svg,
.ui-scroll-helper[data-state="down_only"].ui-scroll-helper-btn[data-dir="down"] svg {
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 6px rgba(240, 184, 24, 0.55));
}

/* 비활성 방향: 약화 but readable — R3 .46 (R2 .38) */
.ui-scroll-helper[data-state="up_only"]   .ui-scroll-helper-btn[data-dir="down"],
.ui-scroll-helper[data-state="down_only"] .ui-scroll-helper-btn[data-dir="up"],
.ui-scroll-helper-btn:disabled {
  opacity: .46;
  pointer-events: none;
}
.ui-scroll-helper[data-state="up_only"]   .ui-scroll-helper-btn[data-dir="down"] svg,
.ui-scroll-helper[data-state="down_only"] .ui-scroll-helper-btn[data-dir="up"]   svg,
.ui-scroll-helper-btn:disabled svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.ui-scroll-helper-btn:focus-visible {
  outline: 2px solid rgba(180, 220, 255, 0.75);
  outline-offset: -3px;
  border-radius: 999px;
}

.ui-scroll-helper-btn:active {
  background: rgba(255, 255, 255, 0.12);
}

/* backdrop-filter 미지원 환경 대응 — 투명도 떨어지는 대신 더 선명한 배경 */
@supports not (backdrop-filter: blur(1px)) {
  .ui-scroll-helper { background: rgba(24, 30, 46, 0.96); }
}

/* 작은 폭 버킷 */
@media (max-width: 359px) {
  .ui-scroll-helper {
    right: 10px;
    width: 44px;
    height: 88px;
  }
  .ui-scroll-helper-btn { min-height: 44px; }
  .ui-scroll-helper-btn svg { width: 17px; height: 17px; }
}

/* 짧은 높이 버킷 */
@media (max-height: 700px) {
  .ui-scroll-helper {
    width: 44px;
    height: 88px;
  }
  .ui-scroll-helper-btn { min-height: 44px; }
  .ui-scroll-helper-btn svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-scroll-helper,
  .ui-scroll-helper-btn,
  .ui-scroll-helper-btn svg { transition: none !important; }
}