/*
 * 포세이돈 — 폰 (2026-09-05, 「모바일페이지 개선해줘 지금 메뉴나 이런거
 * 완전 하나도 제대로 안되있어」).
 *
 * ── 왜 따로 있는가 ─────────────────────────────────────────
 *
 * 폰 규칙이 여섯 시트에 흩어져 있었습니다. 그 자체는 괜찮습니다 — 각 조각의
 * 폰 모양은 그 조각 옆에 있는 편이 읽기 쉽습니다. 여기 모은 것은 **폰에만
 * 있는 것들**입니다: 서랍, 회원 패널, 그리고 export 가 인라인 스크립트로
 * 여닫던 자리들. 데스크톱에는 대응하는 것이 없어서 옆에 둘 조각이 없습니다.
 *
 * ── 서랍이 왜 망가져 있었는가 ──────────────────────────────
 *
 * 마크업은 이렇습니다:
 *
 *     .drawer-scrim              ← 우리 이름. **CSS 가 한 줄도 없었습니다.**
 *       nav.gnb-bar              ← export 이름. 데스크톱 가로 메뉴의 것.
 *       .panel-userinfo          ← export 이름. 좌측 판의 회원 상자.
 *
 * 그래서 서랍이 덮개가 아니라 **흐름 속 한 조각**으로 열렸고, 그 안의
 * `.gnb-bar` 는 `display: flex; gap: 60px` 를 물려받았습니다. 폭이 좁으니
 * 항목마다 한 글자 너비로 눌려서 메뉴가 세로 글자 열넷으로 떴습니다
 * (2026-09-05 캡처). 「하나도 제대로 안되있어」가 이것입니다.
 *
 * export 이름을 계속 쓰는 이유는 그 이름에 걸린 색·글자가 쓸 만하기
 * 때문입니다. 여기서 바꾸는 것은 **자리와 방향**뿐입니다.
 */

/* ── 헤더 ──────────────────────────────────────────────────── */

/*
 * export 는 세 조각을 각각 `position: absolute` 로 붙여 둡니다. 그 좌표가
 * 원본 헤더 높이에 맞춰져 있어서, 우리 헤더에서는 **회원 아이콘이 잔액 띠
 * 줄로 내려앉았습니다** — `top: 50px`, 폭 11px 로 「148,050」 오른쪽에
 * 끼어 있었습니다 (2026-09-05 캡처: "헤더에 마이페이지 위치도 이상하고").
 *
 * 절대 좌표를 걷어내고 한 줄로 세웁니다: 메뉴 · 로고 · 내 정보.
 */
@media (max-width: 768px) {
  /*
   * 메뉴 · 로고 · 내 정보. **격자 세 칸**입니다.
   *
   * ── flex 와 절대배치로 두 번 실패한 자리 ───────────────
   *
   * 처음엔 `flex: 1` 인 로고로 가운데를 잡았습니다 — 양옆 폭이 정확히 같을
   * 때만 맞고, 4px 어긋나 있었습니다.
   *
   * 다음엔 로고를 `position: absolute` 로 가운데 두고 자리를 `::before` 로
   * 채웠습니다. 그 빈 칸이 **첫째 항목**이 되어 햄버거를 x=280 까지 밀어냈고,
   * 절대배치된 로고 상자가 그 위를 덮어 메뉴를 눌러도 안 열렸습니다.
   *
   * `::before` 를 지우고 `space-between` 으로 바꿨더니 이번엔 내 정보가
   * 오른쪽 끝이 아니라 한가운데(l=195)에 앉았습니다. 절대배치된 자식이 flex
   * 줄에서 어떻게 세어지는지에 기대고 있었던 것이고, 그 기댐이 매번 다르게
   * 어긋났습니다.
   *
   * 격자에는 그 물음이 없습니다. 양옆이 **같은 고정 폭**이면 가운데 칸의
   * 가운데가 곧 헤더의 가운데이고, 칸이 갈라져 있으니 서로 덮을 수도
   * 없습니다. 절대배치도, 자리채우개도, `pointer-events` 도 필요 없습니다.
   */
  [data-skin="poseidon"] .mobile-only #header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    /*
     * 줄을 헤더 높이만큼 늘립니다.
     *
     * `align-items: center` 만으로는 상하 가운데가 안 됩니다 — 그건 **줄
     * 안에서** 칸을 가운데 두는 것이고, 줄 자체는 내용 높이(44px)로 잡혀
     * 52px 헤더의 **위쪽**에 붙습니다(`align-content` 기본값이 `start`).
     * 그래서 햄버거가 4px 이 아니라 0px 에서 시작했습니다.
     *
     * 줄을 `1fr` 로 두면 줄이 52px 을 다 쓰고, 그 안에서 `align-items` 가
     * 실제로 가운데를 잡습니다.
     */
    grid-template-rows: 1fr;
    align-items: center;
    height: 52px;
    padding: 0 6px;
  }
  /*
   * export 의 float 청소용 `::after` 를 없앱니다.
   *
   * 격자에서는 그 빈 조각도 **항목**이라 둘째 줄이 생깁니다 — 실제로
   * `grid-template-rows` 가 `44px 0px` 로 계산됐고, 그래서 `1fr` 이 52px 을
   * 다 못 쓰고 내용물이 위에 붙어 있었습니다. float 을 쓰지 않으므로 청소할
   * 것도 없습니다.
   */
  [data-skin="poseidon"] .mobile-only #header::before,
  [data-skin="poseidon"] .mobile-only #header::after {
    content: none;
  }
  [data-skin="poseidon"] .mobile-only .nav_mobile,
  [data-skin="poseidon"] .mobile-only .user_mobile {
    /* export 는 둘을 `absolute` 로 붙입니다. 격자 칸에 앉히려면 풀어야 합니다. */
    position: static;
    /* 손가락이 닿을 크기. export 의 11px 은 눌러도 잘 안 열립니다. */
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
  }
  [data-skin="poseidon"] .mobile-only .nav_mobile .btn_panel,
  [data-skin="poseidon"] .mobile-only .user_mobile .btn_user_panel {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--p-text);
    font-size: 17px;
    cursor: pointer;
  }
  [data-skin="poseidon"] .mobile-only .nav_mobile .btn_panel:active,
  [data-skin="poseidon"] .mobile-only .user_mobile .btn_user_panel:active {
    background: rgb(var(--t-veil-rgb, 255 255 255) / 0.07);
  }
  /*
   * 가운데 칸. 양옆이 같은 44px 이므로 이 칸의 가운데가 헤더의 가운데입니다.
   *
   * `justify-self: center` 가 아니라 칸 전체를 쓰고 안에서 가운데로 둡니다 —
   * 그러면 누르는 자리가 그림만이 아니라 칸 전체라, 로고를 정확히 겨냥하지
   * 않아도 첫 화면으로 갑니다.
   */
  /*
   * 셀렉터에 `#header a` 가 들어 있는 것은 **특이도** 때문입니다.
   *
   * export 는 `[data-skin] #header a#logo` 로 씁니다 — 아이디 **둘**입니다.
   * 제 `[data-skin] .mobile-only #logo` 는 아이디 하나라, 클래스를 아무리
   * 더해도 집니다. 그래서 `display: grid` 가 안 먹고 `block` 인 채였고,
   * export 의 `margin: 5px auto 0` 과 `height: 50px` 이 그대로 살아 그림이
   * 칸 위쪽에 붙었습니다 — 로고 중심 17px, 헤더 중심 26px (2026-09-05 측정).
   *
   * 가로 가운데는 격자 칸이 이미 잡아 주므로 여기서 하는 일은 **상하**뿐입니다.
   */
  [data-skin="poseidon"] .mobile-only #header a#logo {
    position: static;
    display: grid;
    place-items: center;
    min-width: 0;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    float: none;
    transform: none;
  }
  /* 그림도 칸 높이에 안 끌려가게 — export 는 `height: 100%` 를 겁니다. */
  [data-skin="poseidon"] .mobile-only #header a#logo img {
    display: block;
    height: auto;
    max-height: 32px;
    width: auto;
  }
  [data-skin="poseidon"] .mobile-only #logo img {
    max-height: 34px;
    width: auto;
  }

  /*
   * 잔액 띠. 두 숫자를 알약 둘로 갈라 둡니다 — 한 줄에 흘려 두면 어디까지가
   * 보유머니고 어디부터 포인트인지 글자 크기로만 갈립니다.
   */
  [data-skin="poseidon"] .user_header_mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    height: auto;
    padding: 0 8px 8px;
    background: transparent;
    border: 0;
  }
  [data-skin="poseidon"] .user_header_mobile > span {
    position: static;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--p-line);
    border-radius: 8px;
    background: var(--p-bg-deep);
    font-size: 11px;
    color: var(--p-muted);
    white-space: nowrap;
  }
  [data-skin="poseidon"] .user_header_mobile strong {
    /* 돈은 금색 — 화면 어디서나 같습니다. export 의 청록을 덮습니다. */
    color: var(--p-money);
    font-size: 13.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── 덮개 ──────────────────────────────────────────────────── */

/*
 * 서랍은 폰에만 있습니다. 데스크톱에서는 `#tnb`·`#gnb` 가 헤더에 펼쳐져
 * 있고 이 마디는 아예 안 그려집니다(`.mobile-only` 안에 있음). 그래도
 * 미디어 쿼리로 감싸는 이유는 좌우 판이 `768px` 을 경계로 흐름에 들어오고,
 * 그 폭에서 두 규칙이 만나면 안 되기 때문입니다.
 */
@media (max-width: 768px) {
  [data-skin="poseidon"] .drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.6);
    /*
     * 서랍이 왼쪽에서, 회원 패널이 오른쪽에서 옵니다 — 각각을 부른 단추가
     * 그 쪽에 있습니다. 덮개는 그 방향만 정하고 판의 크기는 아래에서.
     */
    display: flex;
  }

  /* ── 메뉴 서랍 (왼쪽) ──────────────────────────────────── */

  [data-skin="poseidon"] .drawer-scrim > .gnb-bar {
    /*
     * 데스크톱 `.gnb-bar` 를 전부 되돌립니다. `display: flex` 와
     * `gap: 60px` 가 항목을 한 글자로 눌렀던 그 규칙입니다.
     */
    display: block;
    width: min(82vw, 320px);
    height: 100%;
    padding: 0;
    margin: 0;
    background: var(--p-bg);
    border-right: 1px solid var(--p-line-strong);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: ps-drawer-in 180ms var(--ease);
  }
  [data-skin="poseidon"] .drawer-scrim > .gnb-bar ul {
    display: block;
    height: auto;
    gap: 0;
    padding: 8px 0 24px;
    margin: 0;
    list-style: none;
  }
  [data-skin="poseidon"] .drawer-scrim > .gnb-bar li {
    display: block;
  }
  /* ── 서랍 머리 ─────────────────────────────────────────── */

  /*
   * 로고와 닫기. 목록이 화면 맨 위부터 바로 시작하면 이것이 덮개인지
   * 페이지인지 안 읽히고, 닫는 방법도 「바깥을 누른다」뿐이었습니다.
   */
  [data-skin="poseidon"] .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /*
     * `width: 100%` 와 `text-align: initial` 이 필요합니다.
     *
     * export 가 위쪽 어딘가에 `text-align: -webkit-center` 를 걸어 두었고,
     * 그 값은 **블록 자식을 오므려 가운데로 보냅니다**(WebKit 고유 동작).
     * 그래서 이 머리줄이 판 폭을 안 채우고 가운데 떠 있는 상자가 됐습니다
     * (2026-09-05 캡처: 판은 0–310, 머리는 82–228).
     */
    width: 100%;
    text-align: initial;
    height: 52px;
    padding: 0 10px 0 16px;
    border-bottom: 1px solid var(--p-line-strong);
    background: var(--p-bg-deep);
  }
  [data-skin="poseidon"] .drawer-head img {
    height: 26px;
    width: auto;
  }
  [data-skin="poseidon"] .drawer-head__x {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--p-muted);
    font-size: 16px;
    cursor: pointer;
  }
  [data-skin="poseidon"] .drawer-head__x:active {
    background: rgb(var(--t-veil-rgb, 255 255 255) / 0.07);
  }

  /* 한 줄: [그림] 이름 — 그림 칸을 고정 폭으로 두어 이름이 나란히 섭니다. */
  [data-skin="poseidon"] .drawer-scrim > .gnb-bar a,
  [data-skin="poseidon"] .drawer-scrim > .gnb-bar summary {
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    min-height: 48px;
    padding: 0 16px;
    color: var(--p-text);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    /* 항목이 길어도 한 줄로 — 「국내형스포츠」가 두 줄로 접히면 목록이
       들쭉날쭉해집니다. */
    white-space: nowrap;
    cursor: pointer;
  }
  [data-skin="poseidon"] .drawer-scrim > .gnb-bar > ul > li {
    border-bottom: 1px solid rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
  }
  [data-skin="poseidon"] .drawer-scrim > .gnb-bar i {
    flex: 0 0 18px;
    font-size: 14px;
    text-align: center;
    color: var(--p-muted);
  }
  [data-skin="poseidon"] .drawer-scrim > .gnb-bar a:active,
  [data-skin="poseidon"] .drawer-scrim > .gnb-bar summary:active {
    background: rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
  }
  /* 지금 보고 있는 곳 — 왼쪽에 강조 막대. 색만으로는 훑을 때 안 걸립니다. */
  [data-skin="poseidon"] .drawer-scrim > .gnb-bar a.active {
    color: var(--p-accent);
    background: rgb(var(--p-accent-rgb) / 0.08);
    box-shadow: inset 3px 0 0 var(--p-accent);
  }
  [data-skin="poseidon"] .drawer-scrim > .gnb-bar a.active i {
    color: var(--p-accent);
  }

  /* ── 펼침 묶음 ─────────────────────────────────────────── */

  /*
   * 브라우저 기본 삼각형을 지웁니다 — 크롬·사파리·파이어폭스가 각각 다르게
   * 생겼고 색을 못 바꿉니다. 대신 오른쪽 화살표를 돌립니다.
   */
  [data-skin="poseidon"] .drawer-group summary {
    list-style: none;
  }
  [data-skin="poseidon"] .drawer-group summary::-webkit-details-marker {
    display: none;
  }
  [data-skin="poseidon"] .drawer-group__caret {
    margin-left: auto;
    font-size: 11px !important;
    transition: transform 160ms var(--ease);
  }
  [data-skin="poseidon"] .drawer-group details[open] .drawer-group__caret {
    transform: rotate(180deg);
  }
  /* 펼쳤을 때 머리줄도 켜 둡니다 — 어느 묶음이 열렸는지 한눈에. */
  [data-skin="poseidon"] .drawer-group details[open] > summary {
    color: var(--p-accent);
  }
  [data-skin="poseidon"] .drawer-group details[open] > summary i {
    color: var(--p-accent);
  }

  /*
   * 자식 줄. 한 단 들여쓰고 바탕을 눌러 둡니다 — 들여쓰기만으로는 스크롤
   * 중에 부모와 자식이 섞여 보입니다.
   */
  [data-skin="poseidon"] .drawer-group details > ul {
    padding: 4px 0 8px;
    background: rgba(0, 0, 0, 0.22);
  }
  [data-skin="poseidon"] .drawer-group details > ul li {
    border: 0;
  }
  [data-skin="poseidon"] .drawer-group details > ul a {
    min-height: 40px;
    padding-left: 46px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--p-muted);
  }
  [data-skin="poseidon"] .drawer-group details > ul a.active {
    color: var(--p-accent);
    font-weight: 700;
  }

  /* ── 회원 패널 (오른쪽) ────────────────────────────────── */

  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo {
    width: min(82vw, 320px);
    height: 100%;
    margin-left: auto;
    padding: 18px;
    border-radius: 0;
    background: var(--p-bg);
    border-left: 1px solid var(--p-line-strong);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: ps-panel-in 180ms var(--ease);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  /*
   * 판 자신은 여백을 안 갖습니다 — 머리줄이 판 끝까지 닿아야 서랍의
   * 머리와 같은 모양이 됩니다. 여백은 아래 조각들이 각자 가집니다.
   */
  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo {
    padding: 0;
    gap: 0;
  }

  /* 머리: 동그라미 · 이름 · 닫기 */
  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo .user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    height: 52px;
    padding: 0 10px 0 16px;
    border-bottom: 1px solid var(--p-line-strong);
    background: var(--p-bg-deep);
  }
  [data-skin="poseidon"] .user-face {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgb(var(--p-accent-rgb) / 0.18);
    color: var(--p-accent);
    font-size: 13px;
    font-weight: 800;
  }
  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo .user-id {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-skin="poseidon"] .user-guest {
    margin: 0;
    padding: 16px 16px 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--p-muted);
    word-break: keep-all;
  }
  /* 잔액 카드. 머리 바로 밑에 상자로 둡니다 — 판에서 가장 먼저 볼 것. */
  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo .user-balance-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--p-line);
    border-radius: 10px;
    background: var(--p-bg-deep);
    list-style: none;
  }
  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo .user-balance-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
  }
  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo .user-balance-list strong {
    /* 돈은 금색 — 화면 어디서나 같습니다. */
    color: var(--p-money);
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  /*
   * 새로고침과 로그아웃. export 의 `.btn-util`·`.btn-signup` 은 헤더 줄에
   * 맞춘 작은 조각이라 폰 패널에서는 손가락으로 누를 크기가 안 됩니다.
   */
  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo .btn,
  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo .btn-signup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    min-height: 44px;
    margin: 10px 16px 0;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--p-line-strong);
    background: rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
    color: var(--p-text);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
  }
  /* 로그아웃·회원가입은 판 맨 아래. `auto` 가 위의 빈 자리를 다 먹습니다. */
  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo .btn-signup {
    margin-top: auto;
    margin-bottom: 16px;
    border-color: transparent;
    background: var(--p-accent-deep);
    color: var(--p-accent-ink);
  }
  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo .btn:disabled {
    opacity: 0.45;
  }

  /* ── 바로가기 넷 ───────────────────────────────────────── */

  /*
   * 이 판의 가운데가 통째로 비어 있었습니다 — 이름과 잔액 아래, 로그아웃
   * 위로 화면 절반이 빈 칸이었습니다. 둘씩 두 줄로 채웁니다.
   */
  [data-skin="poseidon"] .user-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 16px 0;
  }
  [data-skin="poseidon"] .user-quick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 68px;
    padding: 10px 6px;
    border: 1px solid var(--p-line);
    border-radius: 10px;
    background: var(--p-bg-deep);
    color: var(--p-text);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  /*
   * 파트너는 이 격자에서 **채워서** 띄웁니다 — 옆 칸들이 어두운 판에
   * 가는 테두리라, 하나만 차 있으면 훑는 눈에 먼저 걸립니다.
   *
   * 홀수 번째로 끝나면 마지막 칸이 반만 차는데, 그때는 두 칸을 다 씁니다.
   * 중요한 단추가 반쪽으로 남는 것보다 낫습니다.
   */
  [data-skin="poseidon"] .user-quick a.quick-partner {
    border-color: var(--p-accent);
    background: var(--p-accent);
    color: var(--p-accent-ink, #fff);
    font-weight: 800;
  }
  [data-skin="poseidon"] .user-quick a.quick-partner:nth-child(odd) {
    grid-column: 1 / -1;
  }
  [data-skin="poseidon"] .user-quick a:active {
    background: rgb(var(--p-accent-rgb) / 0.1);
    border-color: rgb(var(--p-accent-rgb) / 0.45);
  }
  [data-skin="poseidon"] .user-quick i {
    font-size: 16px;
    color: var(--p-accent);
  }
}

@keyframes ps-drawer-in {
  from {
    transform: translateX(-100%);
  }
}
@keyframes ps-panel-in {
  from {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-skin="poseidon"] .drawer-scrim > .gnb-bar,
  [data-skin="poseidon"] .drawer-scrim > .panel-userinfo {
    animation: none;
  }
}

/* ── 폰의 나머지 ───────────────────────────────────────────── */

@media (max-width: 768px) {
  /*
   * 좌우 판이 흐름에 들어옵니다(`visual.css` 가 `static !important`). 그
   * 상태에서 판은 **화면 폭 전체**를 쓰므로, 데스크톱에서 판을 비켜 서던
   * 여백은 폰에서 헛 여백입니다.
   */
  [data-skin="poseidon"] #content_wrap {
    min-height: 0;
    padding: 0 10px 40px;
  }
  [data-skin="poseidon"] #panel_nav,
  [data-skin="poseidon"] #panel_betting {
    border-radius: 8px;
  }

  /*
   * 첫 화면의 제휴사 로고 띠. 스프라이트 열두 칸이 각각 110px 이라 폰에서
   * 두 칸씩 서고 가운데가 비었습니다. 넷씩 세웁니다 — 그림은 스프라이트라
   * 크기를 줄일 수 없으므로 `transform` 으로 줄입니다.
   */
  [data-skin="poseidon"] .logos ul li a {
    transform: scale(0.78);
  }
  [data-skin="poseidon"] .logos ul li {
    width: 25%;
  }

  /* 게임 카드 줄 — 폰에서는 둘씩. */
  [data-skin="poseidon"] .game-grid {
    grid-template-columns: 1fr 1fr;
  }
}