.mobile-header__button, .mobile-drawer, .mobile-drawer__backdrop {
    display: none;
}

/* 루비 셸(2026-10-23): 패널은 1199px 이하에서 쓴다. 760px 이하 모바일 배치는 전체 메뉴·회원 메뉴, 761~1199px 태블릿 PC 배치는
   헤더 회원 버튼의 회원 메뉴(빠른 메뉴 대신)를 연다(ruby-shell.css). */
@media (max-width: 1299.98px) {
    .site-header:has(.site-game-nav) {
        height: 57px;
        min-height: 57px;
        border-bottom: 1px solid #48372a;
    }

    .site-header .account-bar, .site-header:has(.site-game-nav) .site-nav.site-game-nav {
        display: none;
    }

    .site-header:has(.site-game-nav) > .site-header__inner {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 56px;
        min-height: 56px;
        padding: 0 13px;
        gap: 0;
    }

    .site-header:has(.site-game-nav) .site-brand {
        position: absolute;
        left: 50%;
        top: 0;
        display: flex;
        align-items: center;
        width: 86px;
        height: 56px;
        margin: 0;
        transform: translateX(-50%);
    }

    .site-header:has(.site-game-nav) .site-brand img {
        width: 100%;
        height: auto;
    }

    .mobile-header__button {
        display: grid;
        place-items: center;
        width: 38px;
        height: 42px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #f5f5f7;
        cursor: pointer;
    }

    .mobile-header__account {
        margin-left: auto;
    }

    .mobile-header__account svg {
        width: 23px;
        height: 23px;
    }

    .mobile-header__hamburger, .mobile-header__hamburger::before, .mobile-header__hamburger::after {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    .mobile-header__hamburger {
        position: relative;
    }

    .mobile-header__hamburger::before, .mobile-header__hamburger::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .mobile-header__hamburger::before {
        top: -7px;
    }

    .mobile-header__hamburger::after {
        top: 7px;
    }

    .mobile-drawer__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9997;
        background: #0009;
    }

    .mobile-drawer__backdrop[hidden] {
        display: none;
    }

    .mobile-drawer {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 9998;
        width: min(100vw, 500px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #17110d;
        color: #f5f5f7;
        font: 700 14px/1.5 'Noto Sans KR','Malgun Gothic',sans-serif;
        visibility: hidden;
        transition: transform .25s ease, visibility .25s ease;
    }

    .mobile-drawer--menu {
        left: 0;
        transform: translateX(-100%);
    }

    .mobile-drawer--account {
        right: 0;
        width: min(100vw, 385px);
        transform: translateX(100%);
    }

    .mobile-drawer.is-open {
        visibility: visible;
        transform: translateX(0);
    }

    .mobile-drawer__menu-head {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 63px;
        border-bottom: 1px solid #423226;
    }

    .mobile-drawer__logo {
        width: 88px;
    }

    .mobile-drawer__logo img {
        width: 100%;
        height: auto;
    }

    .mobile-drawer__close {
        position: absolute;
        top: 0;
        right: 13px;
        display: grid;
        place-items: center;
        width: 48px;
        height: 60px;
        padding: 0;
        border: 0;
        background: none;
        color: #fff;
        font: 300 32px/1 Arial,sans-serif;
        cursor: pointer;
    }

    .mobile-drawer__menu-nav {
        display: grid;
        grid-template-columns: 45% 55%;
        min-height: calc(100% - 63px);
    }

    .mobile-drawer__categories {
        padding: 9px 4px 24px;
        border-right: 1px solid #3d2e23;
    }

    .mobile-drawer__categories li {
        margin-bottom: 1px;
    }

    .mobile-drawer__category {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 47px;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 6px;
        background: none;
        color: #cab09c;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .mobile-drawer__category span {
        font-size: 17px;
        font-weight: 400;
    }

    .mobile-drawer__category.is-active, .mobile-drawer__category[aria-current=page] {
        border-color: #76623e;
        background: #201e1b;
        color: #e3b467;
    }

    .mobile-drawer__category.is-active span {
        transform: rotate(180deg);
    }

    .mobile-drawer__submenus {
        padding: 13px 15px;
    }

    .mobile-drawer__submenu[hidden] {
        display: none;
    }

    .mobile-drawer__submenu a {
        display: block;
        min-height: 47px;
        padding: 12px 3px;
        color: #dfc9b8;
        font-size: 13px;
    }

    .mobile-drawer__submenu a[aria-current=page] {
        color: #e3b467;
    }

    .mobile-drawer__account-head {
        position: relative;
        display: flex;
        align-items: center;
        height: 61px;
        padding: 0 16px;
        border-bottom: 1px solid #463529;
        color: #e3b467;
        font-size: 16px;
    }

    .mobile-drawer__account-body {
        padding: 12px 15px 30px;
    }

    .mobile-drawer__user-title {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 0 0 11px;
        font-size: 13px;
    }

    .mobile-drawer__user-title strong {
        color: #e3b467;
    }

    .mobile-drawer__user-title span {
        font-size: 11px;
    }

    .mobile-drawer__balances {
        padding: 9px 12px;
        border: 1px solid #4a382b;
        border-radius: 6px;
        font-size: 13px;
    }

    .mobile-drawer__balances div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        min-height: 31px;
        align-items: center;
    }

    .mobile-drawer__balances strong {
        font-weight: 700;
    }

    .mobile-drawer__login-hint {
        margin: 12px 0 0;
        font-size: 13px;
    }

    .mobile-drawer__auth {
        display: flex;
        gap: 8px;
        margin: 0 0 12px;
    }

    .mobile-drawer__auth a {
        display: grid;
        place-items: center;
        min-width: 72px;
        height: 42px;
        padding: 0 14px;
        border: 1px solid #8f713e;
        border-radius: 5px;
        color: #e3b467;
        font-size: 13px;
    }

    .mobile-drawer__account-nav {
        display: grid;
        gap: 6px;
        margin-top: 12px;
    }

    .mobile-drawer__account-link {
        display: flex;
        align-items: center;
        min-height: 47px;
        padding: 11px 13px;
        border: 1px solid #4c3a2c;
        border-radius: 5px;
        background: #35281f;
        font-size: 13px;
    }

    .mobile-drawer__account-link[aria-current=page] {
        color: #e3b467;
        border-color: #8f713e;
    }

    .mobile-drawer [hidden] {
        display: none !important;
    }

    .mobile-drawer :is(a,button):focus-visible, .mobile-header__button:focus-visible {
        outline: 2px solid #e3b467;
        outline-offset: -2px;
    }

    body.mobile-drawer-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-drawer {
        transition: none;
    }
}

.mobile-header__guest[hidden], .mobile-header__account[hidden] {
    display: none !important;
}
.mobile-header__guest a.mobile-header__telegram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* 기본: PC·태블릿에서 숨김 */
.mobile-header__guest {
  display: none;
}

@media (max-width: 1023.98px) {
	 .mobile-header__guest {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    white-space: nowrap;
  }

  .mobile-header__telegram,
  .mobile-header__telegram svg {
    display: block;
    width: 24px;
    height: 24px;
    color: #45a9e8;
  }

  .mobile-header__guest a {
    padding: 5px 8px;
    border: 1px solid #ddb46c;
    border-radius: 5px;
    color: #e3b467;
    font-size: 11px;
    font-weight: 700;
  }
  /* 모바일에서만 표시 */
  .mobile-header__guest:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    white-space: nowrap;
  }
}

.mobile-header__guest[hidden] {
  display: none !important;
}