/* dev4-67213 Sugar 모바일 v4 - 상단 배너/공지/이벤트=v2, 하단 게임=v3 3열 */
@media (max-width: 768px) {
  body[data-yt-theme="1"] #sg-root { padding-bottom: 104px !important; }
  body[data-yt-theme="1"] #sg-root aside { display: none !important; }

  body[data-yt-theme="1"] #sg-root main,
  body[data-yt-theme="1"] #sg-root aside + * { 
    flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important;
    padding: 0 12px !important;
  }
  body[data-yt-theme="1"] #sg-root .mx-auto,
  body[data-yt-theme="1"] #sg-root .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }

  body[data-yt-theme="1"] #sg-root header button,
  body[data-yt-theme="1"] #sg-root header a { font-size: 12px !important; padding: 6px 10px !important; }

  /* 히어로/공지/이벤트 = 1개씩 (v2 방식) */
  body[data-yt-theme="1"] #sg-root main .hero-background .swiper-wrapper,
  body[data-yt-theme="1"] #sg-root main [class*="hero"] .swiper-wrapper { display: block !important; transform: none !important; }
  body[data-yt-theme="1"] #sg-root main .hero-background .swiper-slide:not(.swiper-slide-active),
  body[data-yt-theme="1"] #sg-root main [class*="hero"] .swiper-slide:not(.swiper-slide-active) { display: none !important; }

  /* 공지사항/이벤트 섹션: 첫 카드 하나만 표시 (v2 스타일) */
  body[data-yt-theme="1"] #sg-root main section:has(> :is(h2,h3):first-of-type) [class*="grid-cols"],
  body[data-yt-theme="1"] #sg-root main .notice-section [class*="grid-cols"],
  body[data-yt-theme="1"] #sg-root main .event-section [class*="grid-cols"] { grid-template-columns: 1fr !important; }

  /* 게임 섹션 (탭 이후) = 3열 (v3 방식) */
  body[data-yt-theme="1"] #sg-root main [role="tablist"] ~ * [class*="grid-cols"],
  body[data-yt-theme="1"] #sg-root main :has(> [role="tablist"]) ~ * [class*="grid-cols"] {
    grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important;
  }

  /* 게임 카테고리 탭 가로스크롤 */
  body[data-yt-theme="1"] #sg-root main [role="tablist"] { 
    overflow-x: auto !important; flex-wrap: nowrap !important; scroll-snap-type: x mandatory;
  }
  body[data-yt-theme="1"] #sg-root main [role="tablist"] > * { flex-shrink: 0 !important; scroll-snap-align: start; }

  /* 이미지 및 오버플로 */
  body[data-yt-theme="1"] #sg-root main img { max-width: 100% !important; height: auto !important; }
  body[data-yt-theme="1"] #sg-root main { overflow-x: hidden !important; }

  /* 하단 탭바 */
  body[data-yt-theme="1"] .sg-mobile-tabbar {
    display: grid !important; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; height: 96px;
    background: #14141a; border-top: 1px solid #2a2a34; z-index: 1000;
  }
  body[data-yt-theme="1"] .sg-mobile-tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #c0c4cc; text-decoration: none; font-size: 11px; gap: 4px;
  }
  body[data-yt-theme="1"] .sg-mobile-tabbar a i { font-size: 20px; }
  body[data-yt-theme="1"] .sg-mobile-tabbar a.active { color: #ff2d92; }
}
@media (min-width: 769px) {
  body[data-yt-theme="1"] .sg-mobile-tabbar { display: none !important; }
}

/* v4-fix 히어로 이미지 폭 강제 */
@media (max-width: 768px) {
  body[data-yt-theme="1"] #sg-root main .hero-background img,
  body[data-yt-theme="1"] #sg-root main [class*="hero"] img { width: 100% !important; height: auto !important; object-fit: cover !important; max-height: 200px !important; display: block !important; }
  body[data-yt-theme="1"] #sg-root main .hero-background,
  body[data-yt-theme="1"] #sg-root main [class*="hero"] { max-height: 200px !important; overflow: hidden !important; }
}

/* v5 - hero-background 강제 폭 100% */
@media (max-width: 768px) {
  body[data-yt-theme="1"] #sg-root main .hero-background { 
    width: 100% !important; min-width: 0 !important; max-width: 100% !important; 
  }
  body[data-yt-theme="1"] #sg-root main .hero-image { 
    width: 100% !important; height: auto !important; max-height: 200px !important; object-fit: cover !important; 
  }
  /* 부모들도 min-width:0 */
  body[data-yt-theme="1"] #sg-root main > *,
  body[data-yt-theme="1"] #sg-root main section,
  body[data-yt-theme="1"] #sg-root main div { min-width: 0 !important; }
}

/* v6 - 히어로 배너 크기 축소 (시안 상단 톤 유사) */
@media (max-width: 768px) {
  body[data-yt-theme="1"] #sg-root main .hero-background,
  body[data-yt-theme="1"] #sg-root main [class*="hero"] { 
    max-height: 200px !important; overflow: hidden !important;
    border-radius: 12px !important;
    margin: 8px 0 !important;
  }
  body[data-yt-theme="1"] #sg-root main .hero-image,
  body[data-yt-theme="1"] #sg-root main [class*="hero"] img { 
    max-height: 200px !important; width: 100% !important; object-fit: cover !important; object-position: right center !important;
  }
}


 

/* v9 - 히어로 확실 폭 맞춤 */
@media (max-width: 768px) {
  body[data-yt-theme="1"] #sg-root main .hero-background {
    display: block !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: auto !important;
    aspect-ratio: unset !important;
    max-height: 200px !important;
    overflow: hidden !important;
    margin: 8px 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  body[data-yt-theme="1"] #sg-root main .hero-image {
    width: 100% !important; height: 200px !important;
    object-fit: cover !important; object-position: center center !important;
    display: block !important;
  }
  body[data-yt-theme="1"] #sg-root main { padding: 0 12px !important; }
}

/* v10 - hero-slide 부모까지 폭 강제 */
@media (max-width: 768px) {
  body[data-yt-theme="1"] #sg-root main .hero-background .hero-slide,
  body[data-yt-theme="1"] #sg-root main .hero-background .swiper-slide { 
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex-shrink: 1 !important;
  }
}

/* v11 - 히어로 관련 모든 상위 컨테이너 폭 강제 */
@media (max-width: 768px) {
  body[data-yt-theme="1"] #sg-root main .hero-slide { width: 100% !important; max-width: 100% !important; }
  body[data-yt-theme="1"] #sg-root main .swiper:has(.hero-background) .swiper-slide,
  body[data-yt-theme="1"] #sg-root main .swiper-wrapper:has(.hero-background) > .swiper-slide { 
    width: 100% !important; max-width: 100% !important; flex-shrink: 1 !important;
  }
  body[data-yt-theme="1"] #sg-root main .hero-background { 
    width: 100% !important; max-width: 100% !important;
  }
}

/* v12 - swiper wrapper transform 무효화 */
@media (max-width: 768px) {
  body[data-yt-theme="1"] #sg-root main .swiper:has(.hero-background) .swiper-wrapper,
  body[data-yt-theme="1"] #sg-root main .hero-slide .swiper-wrapper { 
    transform: none !important; 
  }
}

 
/* v14 - 히어로 슬라이드 첫 번째만 표시 (nth-child 방식) */
@media (max-width: 768px) {
  body[data-yt-theme="1"] #sg-root main .swiper:has(.hero-background) .swiper-slide:not(:first-child),
  body[data-yt-theme="1"] #sg-root main .swiper-wrapper:has(.hero-background) > .swiper-slide:not(:first-child) { 
    display: none !important; 
  }
  body[data-yt-theme="1"] #sg-root main .swiper:has(.hero-background) .swiper-slide:first-child,
  body[data-yt-theme="1"] #sg-root main .swiper-wrapper:has(.hero-background) > .swiper-slide:first-child { 
    display: block !important; width: 100% !important; 
  }
}

/* v15 - 히어로 명시 높이 200px */
@media (max-width: 768px) {
  body[data-yt-theme="1"] #sg-root main .hero-background { height: 200px !important; max-height: 200px !important; }
  body[data-yt-theme="1"] #sg-root main .hero-image { height: 200px !important; object-fit: cover !important; }
  body[data-yt-theme="1"] #sg-root main .swiper:has(.hero-background),
  body[data-yt-theme="1"] #sg-root main .swiper-wrapper:has(.hero-background),
  body[data-yt-theme="1"] #sg-root main .swiper-slide:has(.hero-background) { height: 200px !important; }
}

/* v16 - hero-image 특이도 극대화 */
@media (max-width: 768px) {
  html body[data-yt-theme="1"] div#sg-root main img.hero-image { 
    height: 200px !important; width: 100% !important; 
    object-fit: cover !important; object-position: center center !important; 
    max-height: 200px !important; min-height: 200px !important; 
  }
}

/* v17 - 히어로 이미지 전체 표시 (자연 비율, 짤림 없음) */
@media (max-width: 768px) {
  html body[data-yt-theme="1"] div#sg-root main img.hero-image { 
    height: auto !important; width: 100% !important; 
    object-fit: contain !important;
    max-height: none !important; min-height: 0 !important; 
    display: block !important;
  }
  html body[data-yt-theme="1"] div#sg-root main div.hero-background { 
    height: auto !important; max-height: none !important; min-height: 0 !important;
    aspect-ratio: unset !important;
  }
}

/* v18 - 모바일에서 사이드 메뉴(카지노/스포츠/슬롯/한판) 보이기 */
@media (max-width: 768px) {
  html body[data-yt-theme="1"] div#sg-root aside {
    display: block !important;
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 8px !important;
    padding: 8px 12px !important;
    overflow: visible !important;
  }
  html body[data-yt-theme="1"] div#sg-root .mx-auto.flex {
    flex-direction: column !important;
  }
  html body[data-yt-theme="1"] div#sg-root aside nav.space-y-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  html body[data-yt-theme="1"] div#sg-root aside nav.space-y-2 a > div {
    height: 48px !important;
  }
}


/* dev4-90168 mobile mypage/logout icon boxes next to logo */
.sg-hdr-ico{display:none;flex-shrink:0}
.sg-header-auth{margin-left:auto}
@media (max-width:1023px){
  .sg-header-auth{margin-left:4px}

  a.sg-hdr-mypage,a.sg-hdr-logout{
    width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;
    border-radius:12px!important;border:2px solid var(--border,#c5cdd8)!important;gap:0!important;
  }
  a.sg-hdr-mypage .sg-hdr-txt,a.sg-hdr-logout .sg-hdr-txt{display:none!important}
  a.sg-hdr-mypage .sg-hdr-ico,a.sg-hdr-logout .sg-hdr-ico{display:block!important;width:22px;height:22px}
}


/* dev4-90184: mobile sidebar — show icon + text like desktop (not icon-only tiles) */
@media (max-width: 1023px) {
  #sg-root aside nav.space-y-2 {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 6px !important;
  }
  html body[data-yt-theme="1"] #sg-root aside nav.space-y-2 {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
  #sg-root aside nav.space-y-2 a > div,
  html body[data-yt-theme="1"] #sg-root aside nav.space-y-2 a > div {
    height: 44px !important;
    min-height: 44px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }
  #sg-root aside nav.space-y-2 a > div > div:last-child {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
    color: var(--text) !important;
  }
}

/* dev4-90736: mobile 2x2 game-nav cells — equal size, icon+label aligned */
@media (max-width: 768px) {
  html body[data-yt-theme="1"] div#sg-root aside nav.space-y-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  html body[data-yt-theme="1"] div#sg-root aside nav.space-y-2 > a {
    min-width: 0 !important;
    width: 100% !important;
  }
  html body[data-yt-theme="1"] div#sg-root aside nav.space-y-2 > a > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 48px !important;
    min-height: 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
  }
  html body[data-yt-theme="1"] div#sg-root aside nav.space-y-2 > a > div > div:first-child {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }
  html body[data-yt-theme="1"] div#sg-root aside nav.space-y-2 > a > div > div:last-child {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }
}

/* dev4 tab under wallet */
body[data-yt-theme="1"] .sg-mobile-tabbar.sg-tab-under{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;height:auto !important;margin:8px 12px 0 !important;z-index:2}

/* dev4 no empty stretch */
@media (max-width:1023px){
  #sg-root .min-h-screen,
  #sg-root .sgx-app,
  #sg-root .sgx-body,
  #sg-root main.sgx-main,
  #sg-root .sg-card,
  #sg-root .sg-empty{
    min-height:0 !important;
    height:auto !important;
    flex:none !important;
  }
  #sg-root .sg-empty{padding:16px 0 !important}
}

body[data-yt-theme="1"]:not(.is-in) .sg-mobile-tabbar{display:none !important}