﻿/* 모바일 웹 — 우주(다크) 테마 */
@media (max-width: 720px) {
  html {
    height: -webkit-fill-available;
  }

  .site-shell {
    padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
  }

  body {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    color: #f8fafc !important;
    background: #030716 !important;
  }

  .site-header {
    background: rgba(8, 12, 22, 0.96) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.28) !important;
    backdrop-filter: blur(12px) !important;
    padding-top: env(safe-area-inset-top);
    color: #f8fafc !important;
  }

  .site-header__inner {
    color: #f8fafc !important;
    background: transparent !important;
  }

  .site-logo,
  .site-logo__text {
    color: #67e8f9 !important;
  }

  .site-logo__text small {
    color: #94a3b8 !important;
  }

  .mobile-menu-button {
    color: #f8fafc !important;
    background: rgba(13, 18, 38, 0.96) !important;
    border: 1px solid rgba(139, 92, 246, 0.28) !important;
  }

  .mobile-menu-button__icon span {
    background: currentColor !important;
  }

  .site-nav {
    border-top-color: rgba(139, 92, 246, 0.28) !important;
  }

  .site-nav__list {
    background: rgba(13, 18, 38, 0.96) !important;
    border: 1px solid rgba(139, 92, 246, 0.28) !important;
    color: #f8fafc !important;
  }

  .site-nav__item--group {
    background: rgba(13, 18, 38, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.28) !important;
  }

  .site-nav__group-btn,
  .site-nav__link,
  .site-nav__sublink {
    color: #f8fafc !important;
  }

  .site-nav__group-btn.is-active,
  .site-nav__group-btn:hover,
  .site-nav__link.is-active,
  .site-nav__link:hover,
  .site-nav__sublink.is-active,
  .site-nav__sublink:hover {
    color: #67e8f9 !important;
    background: rgba(139, 92, 246, 0.18) !important;
  }

  .site-nav__submenu {
    background: rgba(13, 18, 38, 0.96) !important;
    border-color: rgba(139, 92, 246, 0.28) !important;
  }

  .site-nav__sublink {
    color: #94a3b8 !important;
  }

  .hero__inner {
    display: block !important;
    min-height: auto !important;
  }

  .hero-visual {
    display: none !important;
  }

  .hero__brand,
  .hero__headline,
  .section__title,
  .visitor-stats__title,
  .visitor-stats__value,
  .service-list__title,
  .content-card__title,
  .content-card__title a,
  .trust-list strong,
  .page-hero__title {
    color: #f8fafc !important;
  }

  .hero__text,
  .section__lead,
  .visitor-stats__lead,
  .visitor-stats__label,
  .visitor-stats__note,
  .service-list__text,
  .content-card__summary,
  .content-card__meta,
  .trust-list li {
    color: #94a3b8 !important;
  }

  .card-grid,
  .service-grid,
  .game-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .section,
  .page-hero,
  .game-center-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    color: #f8fafc !important;
  }

  .btn,
  .btn-game-play,
  .btn-game-open {
    min-height: 2.85rem;
  }

  .form-field input,
  .form-field select,
  .form-field textarea,
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .header-search input[type="search"],
  .site-search__form input[type="search"] {
    font-size: 16px;
    color: #f8fafc !important;
    background: rgba(13, 18, 38, 0.96) !important;
    border-color: rgba(139, 92, 246, 0.28) !important;
  }

  .floating-cta {
    bottom: calc(4.35rem + env(safe-area-inset-bottom)) !important;
    right: max(0.75rem, env(safe-area-inset-right)) !important;
  }

  .game-iframe-box {
    height: min(70dvh, 520px) !important;
  }

  .game-center-hero {
    padding: 1.75rem 1rem 1.5rem !important;
  }

  .game-hero-title {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    color: #f8fafc !important;
  }

  .mobile-bottom-nav,
  .mw-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    padding: 0.15rem 0.3rem calc(0.2rem + env(safe-area-inset-bottom));
    background: rgba(8, 12, 22, 0.96) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.28) !important;
    backdrop-filter: blur(12px);
    box-shadow: none !important;
  }

  .mw-bottom-nav__list,
  .mobile-bottom-nav__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.1rem;
    max-width: 36rem;
  }

  .mw-bottom-nav__link,
  .mobile-bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-height: 3.1rem;
    padding: 0.2rem;
    border-radius: 0.4rem;
    color: #94a3b8 !important;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
  }

  .mw-bottom-nav__link.is-active,
  .mobile-bottom-nav__link.is-active {
    color: #67e8f9 !important;
    background: rgba(139, 92, 246, 0.18) !important;
  }

  .mw-bottom-nav__ico {
    font-size: 1.05rem;
    line-height: 1;
  }

  /* 게임 플레이 중 — 목록/홈 바로가기 (화면 가림 최소) */
  .mw-game-exit {
    position: fixed;
    top: calc(0.55rem + env(safe-area-inset-top));
    right: calc(0.55rem + env(safe-area-inset-right));
    z-index: 1300;
    display: flex;
    gap: 0.35rem;
    pointer-events: none;
  }

  .mw-game-exit__btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(8, 12, 22, 0.72);
    color: #f8fafc !important;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }

  .mw-game-exit__btn--home {
    background: rgba(99, 102, 241, 0.55);
    border-color: rgba(165, 180, 252, 0.45);
  }
}

html.is-mobile-web body {
  padding-bottom: calc(3.9rem + env(safe-area-inset-bottom));
}

/* 풀스크린 게임·플레이 허브에서는 하단 여백/탭 없음 */
html.is-mobile-web body:has(#mw-game-exit),
html.is-mobile-web body.is-game-arcade {
  padding-bottom: 0 !important;
}

/* 게임 센터 play 모드 — 사이트 크롬 숨기고 선택/플레이만 */
body.is-game-arcade .site-header,
body.is-game-arcade .site-footer,
body.is-game-arcade .game-center-hero,
body.is-game-arcade #game-rank-section,
body.is-game-arcade .mw-bottom-nav,
body.is-game-arcade .mobile-bottom-nav {
  display: none !important;
}

body.is-game-arcade .game-grid-section {
  padding-top: 1rem !important;
  padding-bottom: 1.5rem !important;
}

body.is-game-arcade .game-arcade-bar {
  display: flex !important;
}

html.is-mobile-web .site-shell {
  padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
}

@media (min-width: 721px) {
  .mw-bottom-nav {
    display: none !important;
  }

  html.is-desktop-web body {
    padding-bottom: 0;
  }
}

