/*
 * 포세이돈 다듬기 — export 위에 우리가 얹는 것 (2026-09-04, 사용자 요청
 * 「전체적으로 css 개선 및 다듬는 작업 … 우리 입맛대로 커스텀」).
 *
 * `visual.css` 가 **없는 것을 채우는** 시트라면 이것은 **있는 것을 고치는**
 * 시트입니다. 원칙 셋:
 *
 *   - export 의 이름을 그대로 쓰고 값만 바꿉니다. 이름을 새로 지으면 뷰가
 *     그 이름을 알아야 하고, 그러면 export 를 다시 diff 할 수 없습니다.
 *   - 팔레트 변수(`--theme-*`)로 말합니다. 색을 숫자로 적으면 나중에 한
 *     톤을 바꿀 때 열 곳을 찾아야 합니다.
 *   - 움직임은 짧게(150–200ms), 한 방향(밝아지거나 떠오르거나)으로만.
 *
 * 맨 뒤에 실리므로 export 의 어느 규칙보다 우선합니다.
 */

/* ── 바탕 ─────────────────────────────────────────────────── */

/*
 * ── export 의 토큰을 조합에 물립니다 (2026-09-05) ───────────
 *
 * 운영자: 「포인트만 조금씩 다르고 페이지 느낌이나 색상 자체는 남색네이비가
 * 다 일정하거든」. 세 조합의 화면을 나란히 놓고 보면 정확히 그렇습니다 —
 * 단추와 링크만 바뀌고 판·바탕·선은 세 장 다 같은 남색입니다.
 *
 * 까닭은 이 스킨에 **팔레트가 두 겹**이기 때문입니다. 우리 것(`--color-*`,
 * `--p-*`)은 조합을 읽는데, export 자신의 것(`--theme-*`)은 제 시트 안에
 * 값이 박혀 있습니다. 그리고 화면의 넓은 면은 대부분 후자가 칠합니다 —
 * `scoped/css` 전체를 세어 보면:
 *
 *     --theme-border-color   24 곳   #313448
 *     --theme-bg-dark        15 곳   #0A0F1A
 *     --theme-bg-panel        4 곳   #141828
 *     --theme-accent-gold     5 곳   #c5a975
 *     --theme-bg-nav          1 곳   #141828
 *
 * 마흔아홉 자리입니다. 여태 여기서 갈아 끼운 것은 `--theme-accent-blue`
 * 하나뿐이었고, 그래서 조합을 골라도 「강조색만 바뀐 같은 사이트」였습니다.
 *
 * 글자색 둘(`--theme-text-light` · `--theme-text-muted`)은 **안 건드립니다.**
 * 그건 회색이지 조합의 색이 아니고, 조합마다 본문 글자색이 달라지면 읽기가
 * 조합에 딸리게 됩니다.
 *
 * 선 색은 값을 새로 고르지 않고 **판에 강조색을 섞어** 만듭니다. 고정값을
 * 하나 더 적으면 조합이 늘 때마다 그 값도 같이 골라야 하고, 어느 하나를
 * 빠뜨리면 그 조합에서만 선이 옛 남색으로 남습니다.
 */
[data-skin="poseidon"] {
  --theme-accent-blue: var(--p-accent);
  --theme-accent-blue-deep: var(--p-accent-deep);
  --theme-accent-gold: var(--t-money, #c5a975);
  --theme-text-light: var(--t-ink, #eaeaea);
  --theme-text-muted: var(--t-ink-muted, #8a91a8);
  --theme-bg-dark: var(--t-base, #0a0f1a);
  --theme-bg-panel: var(--t-panel, #141828);
  --theme-bg-nav: var(--t-panel, #141828);
  --theme-border-color: color-mix(
    in srgb,
    var(--t-accent, #1fb6ff) 20%,
    var(--t-sunk, #0f1320)
  );
  --theme-panel-line: color-mix(
    in srgb,
    var(--t-accent, #1fb6ff) 12%,
    transparent
  );
  --theme-lift: 0 6px 18px rgba(0, 0, 0, 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /*
   * ── 그리고 **둘째 계열** ──────────────────────────────
   *
   * `game.css` 는 `--theme-*` 말고 짧은 이름 한 벌을 더 정의하고, 로비·카드·
   * 표가 그쪽을 씁니다. 처음에 `--theme-*` 만 물렸더니 카드 테두리와 판이
   * 여전히 남색이었습니다 — 세어 보면 마흔두 자리입니다:
   *
   *     --border-color    16 곳   #2C3A56
   *     --primary-blue     9 곳   #00BFFF
   *     --bg-secondary     5 곳   #1A202C
   *     --bg-dark          4 곳   #0D1018
   *     --accent-primary   2 곳   #00AEFF
   *     --bg-card          2 곳   #1A1D2A
   *     --bg-card-header   2 곳   #252936
   *     --picked-color     2 곳   #00BFFF
   *
   * ── 글자색도 조합의 것이 됐습니다 (2026-09-05) ────────
   *
   * 한동안 `--theme-text-*` 와 `--text-*` 를 안 건드렸습니다. 「글자는
   * 조합의 색이 아니라 회색」이라는 이유였고, **어두운 조합끼리는** 맞는
   * 말이었습니다.
   *
   * 밝은 조합이 생기면서 틀렸습니다 — 상아빛 바탕에 `#eaeaea` 글자는
   * 아무것도 안 보입니다. 조합이 정하는 것은 「무슨 색인가」가 아니라
   * 「이 바탕에서 읽히는 값이 무엇인가」이고, 그건 바탕을 아는 쪽만
   * 답할 수 있습니다.
   */
  --text-primary: var(--t-ink, #e0e7ff);
  --text-secondary: var(--t-ink-muted, #8a9cb3);
  --bg-dark: var(--t-base, #0a0f1a);
  --bg-secondary: var(--t-panel, #141828);
  --bg-card: var(--t-panel, #141828);
  --bg-card-header: color-mix(
    in srgb,
    var(--t-accent, #1fb6ff) 10%,
    var(--t-panel, #141828)
  );
  --border-color: color-mix(
    in srgb,
    var(--t-accent, #1fb6ff) 20%,
    var(--t-sunk, #0f1320)
  );
  --primary-blue: var(--t-accent, #1fb6ff);
  --accent-primary: var(--t-accent, #1fb6ff);
  --picked-color: var(--t-accent, #1fb6ff);
}

/*
 * ── 폰이 시작되는 폭은 **하나입니다** (2026-09-05) ─────────
 *
 * export 는 `.pc-only` · `.mobile-only` 를 `max-width: 768px` 에서 뒤집고
 * (`scoped/css/default.css`), 고객센터 시트는 같은 것을 **800px** 에서 한 번
 * 더 뒤집습니다 (`scoped/css/inquiry.css`). 스포츠 판과 좌우 판은 카트가 폰
 * 모양으로 갈리는 값, 곧 자바스크립트의 `max-width: 767px` 를 따릅니다.
 *
 * 그 사이에서 화면이 반씩 갈렸습니다. 정확히 768px(아이패드 미니 세로 등)
 * 에서는 **폰 헤더가 켜진 채 데스크톱 판**이 그려집니다 — 좌우 300px 이
 * 고정되고 `.sb-page` 가 `padding: 0 310px` 을 쥐고 있으므로 경기 칸에
 * 남는 것이 148px 입니다. 고객센터에서는 그 띠가 769–800px 로 더 넓고,
 * 거기서는 우리가 쓴 폰 규칙이 전부 꺼진 채 폰 헤더만 나옵니다 —
 * `mobile.css` 머리말의 「하나도 제대로 안되있어」가 바로 그 상태입니다.
 *
 * 그래서 768 부터는 데스크톱이라고 여기서 못박습니다. export 의 두 규칙을
 * 지워서가 아니라 **더 좁혀서** 이깁니다: 저쪽은 `[data-skin] .pc-only`
 * (0,2,0)이고 이쪽은 `#app[data-skin] .pc-only` (1,1,0)이라, 시트가 실리는
 * 차례와 무관하게 답이 하나입니다 — 페이지 시트가 전역 시트 **뒤에**
 * 실리므로 차례에 기대면 고객센터에서 다시 집니다.
 */
@media (min-width: 768px) {
  #app[data-skin="poseidon"] .pc-only {
    display: block !important;
  }
  #app[data-skin="poseidon"] .mobile-only {
    display: none !important;
  }
}

/*
 * ── 1440px 아래에서 가로로 밀리던 것 ──────────────────────
 *
 * export 는 `#content_wrap` 에 `min-width: 840px; margin: 0 300px` 를 줍니다
 * (`scoped/css/default.css`) — 좌우 300px 판을 비켜서라는 뜻이고, 저쪽은
 * 768 이하 블록에서만 그것을 풉니다. 그래서 **769px 부터 1439px 까지는 본문
 * 상자의 최소 폭이 840+600 = 1440px** 이고, 그보다 좁은 창은 전부 문서가
 * 가로로 밀립니다 — 1280 노트북도, 가로로 눕힌 폰도.
 *
 * 최소 폭만 풉니다. 판을 비켜서는 여백(`margin`)은 판이 실제로 거기 있으니
 * 남겨야 합니다 — 가운데 칸이 좁아질 뿐 밀려나지는 않습니다.
 */
@media (max-width: 1439px) {
  #app[data-skin="poseidon"] #content_wrap {
    min-width: 0;
  }
}

/*
 * 본문 높이 — export 는 `#content_wrap { height: calc(100vh - 100px) }` 로
 * 본문을 화면 높이에 **고정**합니다. 원본은 그 안에서 따로 스크롤했지만
 * 우리는 문서 전체가 스크롤합니다. 고정 높이를 두면 화면보다 긴 본문
 * (입금하기·출석)이 상자를 넘어 발자국(footer) 위에 겹칩니다 — 「All Rights
 * Reserved.」의 꼬리가 카드 오른쪽에서 새어 나오던 것이 그것입니다.
 * 최소 높이로 바꿔 짧은 화면은 발자국을 바닥에 두고, 긴 화면은 밀어 냅니다.
 */
[data-skin="poseidon"] #content_wrap {
  height: auto;
  min-height: calc(100vh - 100px);
}

/*
 * ── 슬롯: 밴더를 누르면 게임이 나옵니다 ───────────────────
 *
 * 눌러도 아무 반응이 없다는 지적이 있었습니다 (2026-09-04). 재 보니 모델은
 * 제대로 답하고 있었습니다 — `#slot_layer` 가 문서에 있고 게임 예순 개가
 * 들어와 있고 제목도 「프라그마틱 플레이」였습니다. **CSS 가 숨기고
 * 있었습니다**: `game.css` 의 `#slot_layer{ display: none }`.
 *
 * 원본에서 그 줄이 맞았습니다. 거기서는 이 층이 화면을 덮는 팝업이고
 * 인라인 스크립트가 열고 닫았습니다. 우리는 그 스크립트를 안 옮겼고,
 * 화면이 `model.listing` 일 때만 이 마디를 **그립니다** — 즉 그려졌다는
 * 것이 곧 열렸다는 뜻입니다. 그러니 숨길 이유가 없습니다.
 *
 * 덮개도 풀어 흐름에 둡니다. 모델이 `detailRef` 로 이 자리까지 굴려 주므로
 * (`openVendorList`), 덮개보다 흐름이 그 동작과 맞습니다.
 */
[data-skin="poseidon"] #slot_layer {
  display: block;
  position: static;
  width: auto;
  height: auto;
  z-index: auto;
  margin-top: 16px;
  border: 1px solid var(--p-line);
  border-radius: 8px;
}
/* 덮개였을 때의 `height: calc(100% - 80px)` 는 흐름에서 0 이 됩니다. */
[data-skin="poseidon"] #slot_layer .sl_list {
  height: auto;
  overflow: visible;
}

/*
 * ── 첫 화면 아래의 제휴사 로고 띠 ─────────────────────────
 *
 * 그림·좌표·호버는 전부 export 의 것입니다(`default.css` 의 스프라이트
 * 규칙). 한동안 여기서 그 규칙을 걷어내고 밴더 타일을 격자로 세웠는데,
 * 운영자가 원한 것은 원본 띠였습니다 (2026-09-04). 그 override 는 지웠고,
 * 남은 것은 띠를 가운데 세우는 것뿐입니다 — `float: left` 라 밴더 수와
 * 무관하게 왼쪽으로 몰려 있었습니다.
 */
[data-skin="poseidon"] .logos ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
[data-skin="poseidon"] .logos ul li {
  float: none;
}

/*
 * ── 두 판은 늘 구릅니다 ───────────────────────────────────
 *
 * export 의 `.scroll` 은 `overflow-y: hidden` 이고 `:hover` 에서만
 * `scroll` 입니다. 마우스가 있는 화면에서는 그럴듯한데 두 가지가 틀립니다:
 *
 *   - 손가락으로는 **영영 못 굴립니다.** 올릴 마우스가 없으니까요.
 *   - 마우스가 있어도, 판보다 긴 내용의 아래쪽은 올려 보기 전까지
 *     존재를 모릅니다. 배팅카트의 「배팅하기」가 거기 있었습니다.
 *
 * `auto` 로 바꾸고 막대를 가늘게 칠합니다 — 늘 구르되 자리는 안 뺏습니다.
 */
[data-skin="poseidon"] #panel_nav.scroll,
[data-skin="poseidon"] #panel_betting.scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--t-veil-rgb, 255 255 255) / 0.16) transparent;
  overscroll-behavior: contain;
}
[data-skin="poseidon"] #panel_nav.scroll::-webkit-scrollbar,
[data-skin="poseidon"] #panel_betting.scroll::-webkit-scrollbar {
  width: 8px;
}
[data-skin="poseidon"] #panel_nav.scroll::-webkit-scrollbar-thumb,
[data-skin="poseidon"] #panel_betting.scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.14);
}
[data-skin="poseidon"] #panel_nav.scroll::-webkit-scrollbar-thumb:hover,
[data-skin="poseidon"] #panel_betting.scroll::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--p-accent-rgb) / 0.45);
}
[data-skin="poseidon"] #panel_nav.scroll::-webkit-scrollbar-track,
[data-skin="poseidon"] #panel_betting.scroll::-webkit-scrollbar-track {
  background: transparent;
}

/*
 * ── 좌측 판의 숫자 ────────────────────────────────────────
 *
 * 종목마다 지금 열려 있는 경기 수, 그리고 인기 리그. 원본은 둘 다 그렸고
 * 우리는 처음에 비워 두었습니다 — 그 수가 스포츠 판 모델에만 있었기
 * 때문입니다 (2026-09-04 사용자 지적 「경기들 개수나 인기리그 기존엔
 * 보였는데 그부분 사라졌고」).
 *
 * `default.css` 가 `.game-count` 를 이미 파랗게 칠합니다. 여기서 더하는
 * 것은 **자리**입니다: 숫자는 폭이 제각각이라 그냥 두면 종목마다 오른쪽
 * 끝이 어긋나고, 목록이 들쭉날쭉해 보입니다.
 */
[data-skin="poseidon"] .sports_list .game-count {
  min-width: 26px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgb(var(--p-accent-rgb) / 0.13);
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* 빈 채로 오는 동안(아직 못 읽음) 알약만 떠 있으면 고장으로 보입니다. */
[data-skin="poseidon"] .sports_list .game-count:empty {
  display: none;
}
[data-skin="poseidon"] .sports_list li.slidedown > a .accordion-arrow {
  display: none;
}
[data-skin="poseidon"] .game_popular .item {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
  color: var(--p-accent);
  font-size: 12px;
  overflow: hidden;
}
[data-skin="poseidon"] .game_popular .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-skin="poseidon"] .game_popular .team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-skin="poseidon"] .game_popular .team .game-count {
  flex: 0 0 auto;
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}

/*
 * ── 좌측 판의 손님 자리 ───────────────────────────────────
 *
 * `.login-form-panel` 의 원본 CSS 는 `left-panel-public.ejs` 안의 인라인
 * `<style>` 이었습니다. 우리 수입기는 **외부 시트만** 가져오므로 그 한 장이
 * 통째로 빠졌고, 이름표와 단추가 아무 모양 없이 쌓여 있었습니다
 * (2026-09-04 캡처). 여기에 다시 씁니다 — 인라인이 아니라 시트에.
 */
[data-skin="poseidon"] .login-form-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-skin="poseidon"] .login-form-panel .form-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--p-text);
}
[data-skin="poseidon"] .login-form-panel .form-title i {
  font-size: 17px;
  color: var(--p-accent);
}
[data-skin="poseidon"] .login-form-panel__lede {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--p-muted);
  word-break: keep-all;
}
[data-skin="poseidon"] .login-form-panel .button-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
[data-skin="poseidon"] .login-form-panel .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 150ms var(--ease), border-color 150ms var(--ease),
    background 150ms var(--ease);
}
[data-skin="poseidon"] .login-form-panel .btn i {
  font-size: 12px;
}
[data-skin="poseidon"] .login-form-panel .btn-accent {
  background: var(--p-accent-deep);
  color: var(--p-accent-ink);
}
[data-skin="poseidon"] .login-form-panel .btn-accent:hover {
  filter: brightness(1.08);
}
[data-skin="poseidon"] .login-form-panel .btn-secondary {
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
  border-color: var(--p-line-strong);
  color: var(--p-text);
}
[data-skin="poseidon"] .login-form-panel .btn-secondary:hover {
  border-color: var(--p-accent);
  background: rgb(var(--p-accent-rgb) / 0.12);
}

/* 폰 잔액 띠 — export 는 양끝을 float 로 붙여 화면 가장자리에 닿습니다. */
/*
 * 오른쪽에 34px 을 비우는 이유: export 는 회원 아이콘(`.btn_user_panel`)을
 * 위 줄 오른쪽 끝에 절대 위치로 두고, 그 아래끝이 이 띠를 덮습니다 —
 * 「포인트: 148,050」의 뒷자리가 아이콘에 가려 있었습니다 (2026-09-04 폰
 * 캡처). 아이콘을 옮기는 것은 export 의 헤더 배치를 건드리는 일이라,
 * 띠가 그만큼 비켜 섭니다.
 */
[data-skin="poseidon"] .user_header_mobile {
  padding: 0 34px 0 12px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.25);
}
[data-skin="poseidon"] .user_header_mobile strong {
  margin-left: 4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/*
 * ── 헤더 배경 — 그림이 아니라 **조합에서 그립니다** ────────
 *
 * export 는 여기에 `bg_top.gif` 한 장을 깝니다
 * (`scoped/css/game.css`, `!important`). 그 그림은 파랑으로 구워져 있어서
 * 조합을 골드나 자홍으로 바꿔도 머리띠만 파란 채로 남습니다 — 운영자가
 * 「상단 GIF도 따로논다」고 한 자리입니다 (2026-09-05).
 *
 * 그림을 새로 그려 넣으면 조합 수만큼 그림이 필요하고, 조합을 하나 더할
 * 때마다 그림을 한 장 더 만들어 올려야 합니다. **색에서 그리면 그 일이
 * 아예 없습니다** — 조합이 바뀌면 머리띠도 같이 바뀝니다.
 *
 * ── 문양을 되살립니다 ─────────────────────────────────────
 *
 * 처음에 그라데이션만 깔았다가 운영자에게 「기존것처럼 문양있고… 그라데이션
 * 너무 형편없는거 아니니」를 들었습니다. 맞는 말이었습니다 — 원본 그림
 * (2560×100)은 밋밋한 띠가 아니라 **겹치는 원 격자**가 새겨진 띠이고,
 * 그 결이 이 헤더를 헤더처럼 보이게 하던 것이었습니다.
 *
 * 그 문양을 SVG 로 다시 그려 배경 겹으로 깝니다. 선은 흰색 알파 0.075
 * 하나뿐이고 **색은 밑에서 옵니다** — 아래 강조빛 위에 얹히므로 조합이
 * 파랑이면 푸른 결, 골드면 금빛 결이 됩니다. 문양 자체에 색을 박으면 조합
 * 수만큼 문양이 필요해집니다.
 *
 * 농도는 재 보고 골랐습니다: 0.07 은 안 보이고 0.16 은 시끄럽습니다.
 *
 * 네 겹입니다. 위에서 아래로:
 *
 *   ① 문양     — 겹치는 원과 마름모. 160×114 로 반복.
 *   ② 강조빛   — 왼쪽 위에서 번지는 강조색 (로고가 있는 쪽)
 *   ③ 금빛     — 오른쪽 아래에서 올라오는 옅은 돈 색 (잔액이 있는 쪽)
 *   ④ 바탕     — 판 색에서 쪽 바탕으로 떨어지는 세로 그라데이션
 *
 * **가상요소도 마스크도 안 씁니다.** `mask-image` 는 자식까지 같이 깎으므로
 * 로고와 메뉴가 문양 모양으로 잘립니다. 가상요소로 빼면 쌓임 순서를
 * 만들어야 하는데, `#header_wrap` 안에는 폰의 서랍(`z-index: 2500`)이
 * 들어 있어서 여기에 쌓임 맥락을 만들면 서랍이 카트 밑으로 들어갑니다.
 * 배경 겹은 그 둘 다 안 건드리고 언제나 내용 뒤에 깔립니다.
 *
 * ── 문양이 두 벌인 이유 ────────────────────────────────
 *
 * `url()` 안에는 변수가 안 들어갑니다. 주소는 글자 그대로 읽히고 `var()` 는
 * 안 풀립니다 — 그래서 선 색을 조합이 정하게 만들 수가 없습니다.
 *
 * 그래서 두 벌을 미리 적어 두고 조합이 **고르게** 합니다. 아이보리처럼
 * 밝은 바탕에 흰 선을 그으면 아무것도 안 보이니까요. 두 벌의 이름은
 * `ui.css` 에 삽니다 (토큰의 집), 고르는 것은 `site-themes.ts` 입니다.
 */
/*
 * ── 대각선 빛 둘을 걷어 냅니다 (2026-09-05) ────────────────
 *
 * 앞서는 왼쪽 위에서 강조빛이, 오른쪽 아래에서 금빛이 번졌습니다. 로고 쪽과
 * 잔액 쪽을 각각 밝히자는 뜻이었는데, 둥근 빛 둘이 어긋난 방향으로 겹치니
 * **밝은 자리가 어디인지 모호해집니다** — 띠가 한쪽으로 기운 얼룩처럼
 * 보였고, 운영자가 「그라데이션 너무 안어울리는데」라고 한 자리입니다.
 *
 * 대신 좌우가 **대칭**입니다. 가운데 위에서 한 번 밝고 양 끝이 눌립니다.
 * 기운 데가 없으니 얼룩으로 안 읽히고, 눌린 양 끝이 메뉴를 안쪽으로
 * 모읍니다.
 *
 * 아래 선도 굵어졌습니다. 1px 0.1 은 있는지 없는지 모를 선이었고, 띠와
 * 몸통을 가르는 것이 없으면 머리띠가 쪽 위에 떠 있지 않고 번져 보입니다.
 *
 * 네 겹입니다. 위에서 아래로:
 *
 *   ① 양끝 그늘 — 좌우 22% 를 눌러 가운데로 모읍니다.
 *   ② 문양      — 겹치는 원과 마름모. 원본 그림에 있던 그것.
 *   ③ 강조빛    — 가운데 위에서 한 번. 좌우 대칭입니다.
 *   ④ 바탕      — 판에서 눌린 바탕으로 떨어지는 세로 그라데이션
 *
 * 그늘은 검정입니다. 밝은 조합에서도 「양 끝을 누른다」는 같은 뜻이라
 * 조합을 안 탑니다 — 상아빛 머리띠에서도 옅은 회색 테로 떨어집니다.
 */
[data-skin="poseidon"] #header_wrap {
  background: var(
    --t-header-background,
    /* ① 양 끝 그늘 */
    linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.3) 0%,
        transparent 22%,
        transparent 78%,
        rgba(0, 0, 0, 0.3) 100%
      )
      0 0 / 100% 100% no-repeat,
    /* ② 문양 — 겹치는 원과 그 사이의 마름모. 원본 그림에 있던 그것입니다. */
    var(--t-weave, var(--p-weave-dark)) 0 0 / 160px 114px repeat,
    /* ③ 강조빛 — 가운데 위에서 한 번. */
    radial-gradient(
        70% 170% at 50% 6%,
        rgb(var(--t-accent-rgb, 31 182 255) / 0.22) 0%,
        transparent 68%
      )
      0 0 / 100% 100% no-repeat,
    /* ④ 바탕 */
    linear-gradient(180deg, var(--t-panel, #141828) 0%, var(--t-sunk, #0d1220) 100%)
      0 0 / 100% 100% no-repeat
  ) !important;
  /* 아래 선도 조합을 탑니다 — 회색 선 하나가 남으면 그것만 옛 색입니다. */
  border-bottom: 1px solid rgb(var(--t-accent-rgb, 31 182 255) / 0.28) !important;
  box-shadow: var(
    --t-header-shadow,
    inset 0 -2px 0 rgb(var(--t-accent-rgb, 31 182 255) / 0.3),
    0 8px 24px rgba(0, 0, 0, 0.45)
  );
}

/*
 * ── 윗줄 (`#tnb`) ─────────────────────────────────────────
 *
 * 2026-09-04 사용자 지적 둘을 여기서 고칩니다: 「보유머니랑 포인트 위치가
 * 이상해 그리고 잘 안 보여」, 「입금 출금 포인트전환 고객센터 이것들도 잘
 * 안 보여」.
 *
 * 원인은 같습니다 — 링크 넷과 숫자 둘이 **전부 12–13px 회색 글자**로 한 줄에
 * 이어져 있었습니다. 그러면 「입금 출금 포인트전환 고객센터 보유머니:… 포인트:…」
 * 가 메뉴도 아니고 문장도 아닌 한 덩어리로 읽힙니다.
 *
 * 링크는 **알약 단추**로 (배경·테두리가 생기면 누를 곳이 보입니다), 숫자
 * 둘은 **한 상자**로 묶습니다. 그 둘을 가르는 것이 자리 문제의 답입니다.
 */

[data-skin="poseidon"] #tnb ul {
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-skin="poseidon"] #tnb ul li {
  float: none;
  display: flex;
  align-items: center;
}

/* 윗줄 링크 — 알약 단추. */
[data-skin="poseidon"] #tnb ul li a.tnb-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  /* 테두리를 뺐습니다. 알약 넷이 각각 상자를 두르면 한 줄에 상자가 다섯
     이고(지갑 칩까지), 메뉴가 아니라 단추 모음처럼 보입니다. */
  border: 1px solid transparent;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.04);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-soft);
  line-height: 1;
  transition: color 150ms var(--ease), background 150ms var(--ease),
    border-color 150ms var(--ease);
}
/*
 * ── 파트너 (2026-09-07) ─────────────────────────────────────
 *
 * 「파트너페이지 버튼은 … 잘보여야해 중요한 버튼이라 생각하면돼」.
 *
 * 옆의 `.tnb-link` 들은 **테두리가 없는** 칩입니다 — 다섯이 나란히 서면
 * 메뉴가 아니라 상자 줄로 보여서 일부러 지웠습니다(위 규칙의 머리말).
 * 그래서 이것만 **채우면** 그 줄에서 혼자 튀어나옵니다. 색을 더 넣는 것이
 * 아니라, 다들 비운 자리에서 하나만 찬 것입니다.
 */
[data-skin="poseidon"] #tnb ul li a.tnb-partner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--p-accent);
  background: var(--p-accent);
  color: var(--p-accent-ink, #fff);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  animation: ps-partner-beat 1.6s ease-in-out infinite;
  transition: background 150ms var(--ease);
}
[data-skin="poseidon"] #tnb ul li a.tnb-partner:hover {
  background: color-mix(in srgb, var(--p-accent) 86%, #000);
  color: var(--p-accent-ink, #fff);
}
[data-skin="poseidon"] #tnb ul li a.tnb-partner i {
  font-size: 13px;
}
/*
 * 크기가 아니라 **그림자**로 맥박을 칩니다. 폭이 변하면 옆의 지갑 칩과
 * 로그아웃이 매 초 밀립니다 — 금액을 읽는 중에 자리가 움직입니다.
 */
@keyframes ps-partner-beat {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(var(--p-accent-rgb) / 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgb(var(--p-accent-rgb) / 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-skin="poseidon"] #tnb ul li a.tnb-partner {
    animation: none;
  }
}

[data-skin="poseidon"] #tnb ul li a.tnb-link:hover {
  color: var(--color-ink-strong);
  background: rgb(var(--p-accent-rgb) / 0.16);
  border-color: rgb(var(--p-accent-rgb) / 0.55);
}
[data-skin="poseidon"] #tnb ul li a.tnb-link[aria-current="page"] {
  color: var(--p-accent-ink);
  background: var(--theme-accent-blue-deep);
  border-color: transparent;
}
[data-skin="poseidon"] #tnb ul li a.tnb-link i {
  font-size: 13px;
  color: var(--theme-accent-blue);
  transition: color 150ms var(--ease);
}
/*
 * 오버와 「지금 이 화면」은 **바탕이 다르므로 글자색도 다릅니다.**
 *
 * 둘을 한 규칙에 묶어 두고 아이콘에 `--p-accent-ink` 를 줬더니, 오버에서
 * 아이콘만 검게 떴습니다 (2026-09-05 사용자 지적: "글씨는 흰색인데" 아이콘은
 * 검정). 잉크색은 **진한 강조 위에 얹을 때**의 답입니다 — 오버의 바탕은
 * 강조 16% 틴트라 어두운 남색에 가깝고, 거기서는 흰 글자가 맞습니다.
 *
 * 그래서 오버는 글자를 따라가고(`currentColor`), 눌러 들어와 있는 칸만
 * 잉크색입니다. 그 칸은 실제로 진한 강조가 깔려 있습니다.
 */
[data-skin="poseidon"] #tnb ul li a.tnb-link:hover i {
  color: currentColor;
}
[data-skin="poseidon"] #tnb ul li a.tnb-link[aria-current="page"] i {
  color: var(--p-accent-ink);
}

/* 손님의 로그인 단추 — 회원가입 옆에서 같은 크기로. */
[data-skin="poseidon"] #tnb ul li button.tnb-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 15px;
  border-radius: 8px;
  border: 1px solid rgb(var(--t-veil-rgb, 255 255 255) / 0.16);
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
  color: var(--t-ink, #eaeaea);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
[data-skin="poseidon"] #tnb ul li button.tnb-link:hover {
  border-color: var(--theme-accent-blue);
  background: rgb(var(--p-accent-rgb) / 0.12);
}

/*
 * 로그인 뒤의 로그아웃은 회원가입 단추의 옛 클래스 이름을 빌려 쓰지만,
 * 뜻은 가입 유도가 아니라 조용한 보조 동작입니다. White에서는 파란 덩어리
 * 대신 흰 면과 코발트 외곽선으로, 다크에서는 기존 강조 채움으로 보입니다.
 */
[data-skin="poseidon"] button.btn-logout {
  border: 1px solid var(--t-logout-border, transparent);
  background: var(--t-logout-bg, var(--t-accent, #1fb6ff));
  color: var(--t-logout-ink, var(--t-accent-ink, #ffffff));
  box-shadow: none;
  transition: color 150ms var(--ease), background 150ms var(--ease),
    border-color 150ms var(--ease);
}
[data-skin="poseidon"] button.btn-logout:hover {
  border-color: var(--t-accent, #1fb6ff);
  background: var(--t-logout-bg-hover, var(--t-accent-deep, #0a8fd6));
  color: var(--t-logout-ink, var(--t-accent-ink, #ffffff));
}

/* ── 지갑 칩 — 잔액·포인트·새로고침 ─────────────────────── */

[data-skin="poseidon"] #tnb .tnb-wallet {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  height: 34px;
  margin-left: 6px;
  border-radius: 6px;
  border: 1px solid var(--t-wallet-border, rgb(var(--p-accent-rgb) / 0.28));
  /* 한 톤. 위아래로 밝기가 변하던 것을 없앴습니다 — 유리 조각처럼 보였습니다. */
  background: var(--t-wallet-bg, rgb(var(--p-accent-rgb) / 0.08));
  overflow: hidden;
}
[data-skin="poseidon"] #tnb .user_money,
[data-skin="poseidon"] #tnb .user_casinomoney {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  font-size: 13px;
  color: var(--theme-text-muted);
  white-space: nowrap;
}
[data-skin="poseidon"] #tnb .user_casinomoney {
  border-left: 1px solid rgb(var(--t-veil-rgb, 255 255 255) / 0.1);
}
[data-skin="poseidon"] #tnb .tnb-wallet i {
  font-size: 12px;
  color: var(--theme-accent-blue);
}
[data-skin="poseidon"] #tnb .tnb-wallet em {
  font-style: normal;
  font-size: 11.5px;
  color: #9aa3bb;
}
[data-skin="poseidon"] #tnb .user_money strong,
[data-skin="poseidon"] #tnb .user_casinomoney strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--p-money);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* 포인트는 한 단 낮게 — 둘 다 굵으면 어느 쪽이 내 돈인지 안 갈립니다. */
[data-skin="poseidon"] #tnb .user_casinomoney strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--p-accent-soft);
}
/*
 * 새로고침 — 칩 안에 붙어 「이 숫자를」 다시 읽는다는 뜻이 됩니다.
 *
 * 붙는 방식이 조합마다 다릅니다. 어두운 쪽은 눌러 넣은 한 칸이라 칩의
 * 높이를 꽉 채우고 왼쪽 선으로 칸이 갈립니다. 밝은 쪽은 여백만큼 물러난
 * 둥근 사각형이고, 그러면 선 없이도 「따로 누르는 것」이 읽힙니다.
 *
 * 높이는 안 적습니다 — 늘어난 칸이라 여백이 곧 높이입니다. 칩이 34px 이고
 * 선이 위아래 1px 씩이니 안쪽 길은 32px 이고, 거기서 위아래 여백을 뺀 것이
 * 단추의 키입니다. 폭만 적어 두면 그 둘이 맞아 정사각형이 됩니다.
 */
[data-skin="poseidon"] #tnb .tnb-refresh {
  display: grid;
  place-items: center;
  width: var(--t-refresh-size, 34px);
  margin: var(--t-refresh-inset, 0);
  border: 0;
  border-left: var(
    --t-refresh-divider,
    1px solid rgb(var(--t-veil-rgb, 255 255 255) / 0.1)
  );
  border-radius: var(--t-refresh-radius, 0);
  background: var(--t-refresh-bg, rgba(0, 0, 0, 0.18));
  color: var(--t-refresh-ink, #9aa3bb);
  cursor: pointer;
  transition: color 150ms var(--ease), background 150ms var(--ease);
}
[data-skin="poseidon"] #tnb .tnb-refresh:hover:not(:disabled) {
  /* 오버의 바탕은 강조 22% 틴트 — 조합의 면 위이지 강조색 위가 아닙니다. */
  color: var(--t-refresh-ink-hover, var(--color-ink-strong));
  background: var(--t-refresh-hover, rgb(var(--p-accent-rgb) / 0.22));
}
[data-skin="poseidon"] #tnb .tnb-refresh:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 메뉴 줄 — 밑줄이 스르륵. */
[data-skin="poseidon"] .gnb-bar a {
  position: relative;
  letter-spacing: -0.01em;
}
[data-skin="poseidon"] .gnb-bar a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--theme-accent-blue);
  transform: scaleX(0);
  transition: transform 180ms var(--ease);
}
[data-skin="poseidon"] .gnb-bar a:hover::after,
[data-skin="poseidon"] .gnb-bar a.active::after {
  transform: scaleX(1);
}

/* ── 좌우 판 ──────────────────────────────────────────────── */

[data-skin="poseidon"] #panel_nav,
[data-skin="poseidon"] #panel_betting {
  border-color: var(--theme-panel-line);
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--t-veil-rgb, 255 255 255) / 0.12) transparent;
}

/*
 * ── 세 칸을 가르는 선은 **두 줄**입니다 ───────────────────
 *
 * 쪽이 왼쪽 판 · 몸통 · 오른쪽 카트로 나뉘는데, 선이 오른쪽에만 있었습니다
 * (2026-09-05 운영자 지적: 「우측 배팅카트는 구분선이 있는데 좌측에는
 * 구분선이 없네」). 재 보니 정확히 그렇습니다 — x=1140 에 한 줄이 있고
 * x=300 에는 아무것도 없습니다.
 *
 * 위에서 `border-color` 만 주고 굵기는 export 에 맡겨 두었던 것이 원인입니다.
 * export 는 카트 쪽에만 선을 그었고, 그래서 색은 둘 다 조합을 따라가는데
 * **한쪽만 보였습니다.**
 *
 * 여기서 둘 다 선언합니다. 한쪽만 export 에 맡기면 같은 일이 또 생깁니다.
 *
 * `border-box` 인 이유: 판이 `width: 300px` 로 고정이라, 안 주면 선 굵기가
 * 폭에 더해져 몸통이 1px 씩 밀립니다.
 */
@media (min-width: 768px) {
  [data-skin="poseidon"] #panel_nav,
  [data-skin="poseidon"] #panel_betting {
    box-sizing: border-box;
  }
  [data-skin="poseidon"] #panel_nav {
    border-right: 1px solid var(--theme-panel-line);
  }
  [data-skin="poseidon"] #panel_betting {
    border-left: 1px solid var(--theme-panel-line);
  }
}
[data-skin="poseidon"] .panel-userinfo {
  border-radius: 6px;
  border: 1px solid var(--theme-panel-line);
}
[data-skin="poseidon"] .user-balance-list li {
  transition: background 150ms var(--ease);
}
[data-skin="poseidon"] .user-balance-list li:hover {
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.03);
}
[data-skin="poseidon"] .user-balance-list .won strong {
  font-variant-numeric: tabular-nums;
}

/* 종목 목록 — 누르면 밝아지고, 현재 종목은 왼쪽에 파란 선. */
[data-skin="poseidon"] .sports_list > li > a {
  border-radius: 8px;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
[data-skin="poseidon"] .sports_list > li > a > img {
  filter: var(--t-sport-icon-filter, none);
}
[data-skin="poseidon"] .sports_list > li > a:hover {
  background: rgb(var(--p-accent-rgb) / 0.08);
}
[data-skin="poseidon"] .sports_list > li.opened > a {
  box-shadow: inset 3px 0 0 var(--theme-accent-blue);
}

/*
 * 손님 로그인 폼에는 판 전체를 감싸는 테두리도 손 커서도 없습니다.
 * 판은 눌리는 것이 아니라 안의 단추 둘이 눌립니다 — 판이 켜지면 그것은
 * 누를 수 없는 곳을 누르라고 가리키는 파란 줄입니다.
 */

/*
 * ── 밴더를 연 뒤의 머리줄 ─────────────────────────────────
 *
 * 「CQ9 · 검색칸 · 213개 · 목록 보기」. export 의 시트는 이 줄에 **× 하나**만
 * 있다고 보고 짜여 있어서, 낱말이 붙은 단추와 개수 글자가 서로 여백 없이
 * 닿았습니다. 사이는 `gap` 이 냅니다 — 칸마다 `margin` 을 매다는 것보다
 * 조각을 더하거나 뺄 때 어긋날 곳이 없습니다.
 */
[data-skin="poseidon"] #slot_layer .sl_header {
  gap: 14px;
  flex-wrap: wrap;
}
[data-skin="poseidon"] #slot_layer .sl_header .title {
  /* 이름이 길어도 검색칸을 밀지 않습니다. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 지우개가 칸 안에 앉으므로 칸이 자리의 기준입니다. */
[data-skin="poseidon"] #slot_layer .sl_search {
  position: relative;
  flex: 0 1 260px;
}
[data-skin="poseidon"] #slot_layer .sl_header .input {
  /* `margin: 0 20px` 를 `gap` 이 대신합니다. */
  width: 100%;
  margin: 0;
  /* 오른쪽은 지우개 자리 — 글자가 그 밑으로 흘러 들어가지 않게. */
  padding-right: 38px;
}
[data-skin="poseidon"] #slot_layer .sl_clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--p-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms var(--ease), background 150ms var(--ease);
}
[data-skin="poseidon"] #slot_layer .sl_clear:hover {
  color: var(--p-text);
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.06);
}

/* 개수는 읽는 값이지 누르는 것이 아닙니다 — 단추 옆에서 조용히. */
[data-skin="poseidon"] #slot_layer .sl_header .sub {
  color: var(--p-muted);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 「목록 보기」는 낱말이 든 단추입니다 — 30px 짜리 × 의 옷이 아니라. */
[data-skin="poseidon"] #slot_layer .sl_back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--p-line-strong);
  border-radius: 5px;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
  color: var(--p-text);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease),
    color 150ms var(--ease);
}
[data-skin="poseidon"] #slot_layer .sl_back:hover {
  border-color: var(--p-accent);
  background: rgb(var(--p-accent-rgb) / 0.12);
}
[data-skin="poseidon"] #slot_layer .sl_back i {
  font-size: 12px;
  color: var(--p-accent);
}

/*
 * 폰에서는 export 가 이 줄을 `display: block` 으로 돌립니다 — 조각들이 쌓이고
 * 검색칸만 `margin-top` 을 받습니다. 그 배치는 × 하나를 절대 좌표로 빼 두는
 * 것을 전제로 하는데 우리 줄에는 낱말 단추가 있습니다. 두 줄 격자로 둡니다:
 * 위에 이름, 아래에 검색칸과 단추.
 */
@media (max-width: 768px) {
  [data-skin="poseidon"] #slot_layer .sl_header {
    display: flex;
    gap: 10px;
  }
  [data-skin="poseidon"] #slot_layer .sl_header .title {
    flex: 1 0 100%;
  }
  [data-skin="poseidon"] #slot_layer .sl_search {
    flex: 1 1 auto;
  }
  [data-skin="poseidon"] #slot_layer .sl_header .input {
    margin: 0;
  }
  [data-skin="poseidon"] #slot_layer .sl_header .sub {
    order: 1;
    flex: 0 0 auto;
  }
  [data-skin="poseidon"] #slot_layer .sl_back {
    order: 2;
  }
}

/* 배팅카드 — 빈 상태는 조용히. */
[data-skin="poseidon"] .bet-slip__item--empty {
  opacity: 0.75;
}
[data-skin="poseidon"] .bet-slip__money-presets button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── 첫 화면 ──────────────────────────────────────────────── */

/*
 * ── 사진에는 색을 안 입힙니다 (2026-09-05) ─────────────────
 *
 * 한동안 아이콘 여섯과 큰 카드 다섯에 `mix-blend-mode: color` 로 조합의 색을
 * 덮었습니다. 조합을 바꿔도 그 열한 자리가 파란 채로 남는 것이 「특정부분만
 * 바뀐다」의 실제 내용이었기 때문입니다.
 *
 * 두 번 낮춰 봤고(0.72 → 0.32) 두 번 다 운영자가 물렸습니다: 「진짜
 * 이상한데」, 그리고 「가운데 부분에 그라데이션이나 효과준거 빼주고」.
 *
 * 그래서 뺍니다. 사진 위에 색을 얹는 방향 자체가 틀렸습니다 — 이 사진들은
 * 사람 얼굴과 조명이 들어간 그림이라, 색을 조금만 돌려도 살빛이 먼저
 * 상합니다. 여기서 조합이 닿는 것은 **사진 바깥의 테두리 한 줄**뿐이고,
 * 화면을 조합의 것으로 만드는 일은 사진이 아닌 자리에서 합니다 — 머리띠의
 * 문양, 단추, 금액, 판의 결.
 */

/* 아이콘 타일 — 떠오르고, 그림이 살짝 커집니다. */
[data-skin="poseidon"] .icon-menu-bar .icon-item {
  border-radius: 6px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
[data-skin="poseidon"] .icon-menu-bar .icon-item:hover {
  box-shadow: var(--theme-lift);
  border-color: var(--theme-accent-blue);
}

/*
 * ── 아이콘 줄은 **제 폭**으로 잽니다 (2026-09-05) ──────────
 *
 * export 의 축소 사다리는 화면 폭으로 되어 있습니다 — 2200 · 1900 · 1750 에서
 * 그림과 글자를 줄이고 1200 에서 3칸으로 접습니다 (`scoped/css/game.css`).
 * 그 숫자들은 **띠가 화면을 다 쓴다**는 전제 위에 있습니다.
 *
 * 우리 화면에는 좌우 판이 300px 씩 서 있어서 이 띠에 오는 폭은 화면보다
 * 620px 좁습니다. 그래서 1280 짜리 창에서 띠는 660px 인데, export 의 사다리는
 * 그 폭을 화면 1280 으로 읽어 큰 글자를 그대로 두고 3칸 접기도 1200 까지
 * 기다립니다. 결과가 「입금하 기」·「고객센 터」·「공지규 정」입니다 — 낱말이
 * 가운데서 잘립니다 (1280 실측; 1600 에서는 안 잘립니다).
 *
 * 화면이 아니라 **띠에게 물어봅니다.** 판 폭이 바뀌든 화면이 바뀌든 답이
 * 하나이고, export 의 숫자를 620 씩 밀어 옮겨 적는 것보다 안 어긋납니다.
 */
[data-skin="poseidon"] .icon-menu-bar {
  container-type: inline-size;
  container-name: ps-icons;
}
/* 낱말은 어느 폭에서도 안 쪼갭니다 — 쪼개진 낱말은 줄인 것이 아니라 깨진 것입니다. */
[data-skin="poseidon"] .icon-menu-bar .icon-item .title-kr,
[data-skin="poseidon"] .icon-menu-bar .icon-item .title-en {
  white-space: nowrap;
}
@container ps-icons (max-width: 1000px) {
  [data-skin="poseidon"] .icon-menu-bar .icon-item {
    padding: 0 12px;
  }
  [data-skin="poseidon"] .icon-menu-bar .icon-item img {
    width: 54px;
  }
  [data-skin="poseidon"] .icon-menu-bar .icon-item .title-kr {
    font-size: 13px;
  }
  [data-skin="poseidon"] .icon-menu-bar .icon-item .title-en {
    font-size: 9px;
  }
}
/* 여섯이 한 줄에 안 들어가면 접습니다 — export 가 1200 에서 하던 그것입니다. */
@container ps-icons (max-width: 780px) {
  [data-skin="poseidon"] .icon-menu-bar {
    flex-wrap: wrap;
  }
  [data-skin="poseidon"] .icon-menu-bar .icon-item {
    flex: 0 0 calc(33.333% - 7px);
    height: 84px;
  }
}
@container ps-icons (max-width: 460px) {
  [data-skin="poseidon"] .icon-menu-bar .icon-item {
    flex: 0 0 calc(50% - 5px);
  }
}
[data-skin="poseidon"] .icon-menu-bar .icon-item img {
  transition: transform 220ms var(--ease);
}
[data-skin="poseidon"] .icon-menu-bar .icon-item:hover img {
  transform: scale(1.06);
}
[data-skin="poseidon"] .icon-menu-bar .icon-item .title-en {
  letter-spacing: 0.04em;
}

/* 큰 카드 — 그림은 확대, 글자 밑에 그라데이션. */
[data-skin="poseidon"] .game-grid .game-card {
  border-radius: 7px;
  overflow: hidden;
  /* export 의 `#165a6e` 는 청록으로 구워진 값입니다 — 조합을 안 따라갑니다. */
  border-color: rgb(var(--t-accent-rgb, 31 182 255) / 0.32);
  background-color: var(--t-panel, #141828);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
[data-skin="poseidon"] .game-grid .game-card:hover {
  /* export 의 `rgba(0,174,255,.2)` 도 같은 이유로 조합의 것으로. */
  box-shadow: 0 12px 26px rgb(var(--t-accent-rgb, 31 182 255) / 0.26);
  border-color: rgb(var(--t-accent-rgb, 31 182 255) / 0.6);
}
/*
 * 사진은 사진 그대로 — 위 머리말 참조. 커지는 것과, 밝은 조합에서 한 겹
 * 눕히는 것만 남깁니다. 네온 사진은 흰 페이지 위에서 검은 덩어리가 됩니다.
 */
[data-skin="poseidon"] .game-grid .game-card .card-bg {
  filter: var(--t-card-art, none);
  transition: transform 400ms var(--ease);
}
[data-skin="poseidon"] .game-grid .game-card:hover .card-bg {
  transform: scale(1.05);
}
/*
 * 글자 밑의 어둠은 **한 겹이면 됩니다.**
 *
 * export 가 `::after` 로 카드 아래 70% 를 이미 덮고 있는데 여기서 한 겹을 더
 * 깔고 있었습니다. 어두운 조합에서는 둘 다 같은 검정이라 겹친 것이 안
 * 보였고, 흰 판에서 아래쪽이 통째로 먹으로 찍혀 드러났습니다.
 */
[data-skin="poseidon"] .game-grid .game-card::after {
  background: var(
    --t-card-scrim,
    linear-gradient(to top, rgba(10, 15, 26, 0.95), transparent)
  );
}
[data-skin="poseidon"] .game-grid .game-card .card-info {
  background: var(
    --t-card-info-scrim,
    linear-gradient(to top, rgba(6, 9, 16, 0.92) 0%, rgba(6, 9, 16, 0.55) 60%, transparent 100%)
  );
}
/* 영문 줄은 조합 색, 한글 이름은 사진 위의 흰 글자 (흰 조합엔 난색을 안 둡니다). */
[data-skin="poseidon"] .game-grid .game-card .card-info .title-en {
  color: var(--t-accent-on-image, #bfe7ff);
}
[data-skin="poseidon"] .game-grid .game-card .card-info .title-kr {
  color: var(--t-card-name, #f7d3af);
}

/* 밴더 로고 줄 — 흑백에서 색으로. */
[data-skin="poseidon"] .logos ul li a {
  border-radius: 8px;
  filter: grayscale(1) opacity(0.7);
  transition: filter 180ms var(--ease), background 180ms var(--ease);
}
/* ── 가로 메뉴의 펼침 묶음 (이벤트) ────────────────────────────
 *
 * 이벤트 넷이 한 줄에 나란히 서서 가로 메뉴가 열넷이었습니다. 한 칸으로
 * 접습니다 (2026-09-05 사용자 요청).
 *
 * 여는 것은 `:hover` 와 `:focus-within` **둘 다**입니다. 앞의 것만 두면
 * 마우스 없이 탭으로 오는 사람에게는 이 넷이 없는 메뉴가 됩니다.
 */
[data-skin="poseidon"] .gnb-drop {
  position: relative;
}
[data-skin="poseidon"] .gnb-bar li.gnb-drop > a {
  /* 머리에도 화살표가 붙으므로 가로 메뉴 링크의 기본 정렬을 다시 씁니다. */
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-skin="poseidon"] .gnb-drop__caret {
  font-size: 9px;
  opacity: 0.65;
  transition: transform 160ms var(--ease);
}
[data-skin="poseidon"] .gnb-drop:hover .gnb-drop__caret,
[data-skin="poseidon"] .gnb-drop:focus-within .gnb-drop__caret {
  transform: rotate(180deg);
}

/*
 * 선택자에 .gnb-bar ul 이 들어 있는 것은 멋이 아니라 **특이도** 때문입니다.
 * export 의 [data-skin] .gnb-bar ul 은 (0,2,1) 이고 제 [data-skin]
 * .gnb-drop__menu 는 (0,2,0) 이라, 뒤에 실려도 집니다 — 실제로 display:
 * block 이 안 먹어서 목록이 가로로 289×26 한 줄로 떴습니다.
 */
[data-skin="poseidon"] .gnb-bar ul.gnb-drop__menu {
  /*
   * `display: block` 이 **필요합니다.** export 의 `.gnb-bar ul` 이
   * `display: flex; gap: 60px; height: 100%` 라, 그것을 안 덮으면 이 목록도
   * 가로로 펼쳐집니다 — 실제로 289×26 짜리 한 줄로 떴습니다.
   */
  display: block;
  height: auto;
  gap: 0;

  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  min-width: 150px;
  padding: 6px;
  margin: 0;
  transform: translateX(-50%);
  border: 1px solid var(--p-line-strong);
  border-radius: 10px;
  background: var(--p-bg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  list-style: none;

  /*
   * 닫힌 상태를 `display: none` 이 아니라 이 셋으로 둡니다 — `display` 는
   * 전이가 안 걸려서 메뉴가 툭 나타났다 툭 사라집니다. `visibility` 는
   * 걸리고, 닫혔을 때 눌리지 않는 것도 그것이 맡습니다.
   */
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms var(--ease), visibility 140ms var(--ease);
}
[data-skin="poseidon"] .gnb-bar .gnb-drop:hover ul.gnb-drop__menu,
[data-skin="poseidon"] .gnb-bar .gnb-drop:focus-within ul.gnb-drop__menu {
  opacity: 1;
  visibility: visible;
}
/*
 * 머리와 메뉴 사이의 빈 틈. 마우스가 그 틈을 지나는 동안 `:hover` 가 끊겨
 * 메뉴가 닫힙니다 — 보이지 않는 다리를 놓아 둡니다.
 */
[data-skin="poseidon"] .gnb-bar ul.gnb-drop__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
[data-skin="poseidon"] .gnb-bar ul.gnb-drop__menu li {
  float: none;
  display: block;
  height: auto;
}
[data-skin="poseidon"] .gnb-bar ul.gnb-drop__menu a {
  display: block;
  height: auto;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--p-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
[data-skin="poseidon"] .gnb-bar ul.gnb-drop__menu a:hover {
  background: rgb(var(--p-accent-rgb) / 0.12);
  color: var(--p-accent);
}
[data-skin="poseidon"] .gnb-bar ul.gnb-drop__menu a.active {
  background: rgb(var(--p-accent-rgb) / 0.16);
  color: var(--p-accent);
}

/* ── 첫 화면 맺음 ─────────────────────────────────────────────
 *
 * 제휴사 로고 띠 밑이 곧장 `footer` 한 줄이라 화면이 끊긴 것처럼 끝났습니다
 * (2026-09-05: "뭔가 좀 허전하네"). 위쪽 선 하나로 본문과 갈라 두고, 가운데
 * 정렬로 네 조각을 쌓습니다 — 마크·갈 곳·안내·저작권.
 */
[data-skin="poseidon"] .ps-close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 28px 20px 34px;
  border-top: 1px solid var(--p-line);
  text-align: center;
}
[data-skin="poseidon"] .ps-close__mark {
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-skin="poseidon"] .ps-close__mark img {
  height: 34px;
  width: auto;
  /* 마크는 한 단 눌러 둡니다 — 맺음은 시작이 아닙니다. */
  opacity: 0.75;
}

/*
 * 맺음 줄이 있는 화면에서는 전역 꼬리말을 안 그립니다.
 *
 * 둘 다 저작권을 적어서 첫 화면 아래에 같은 문장이 두 번 섰습니다
 * (2026-09-05 캡처). 지우는 쪽은 전역 꼬리말입니다 — 맺음 줄이 그 한 줄을
 * 품고 있고, 다른 화면에는 맺음 줄이 없으므로 거기서는 그대로 뜹니다.
 *
 * `display: none` 이 아니라 **안 그리기**로 하지 않은 이유: 꼬리말은
 * 레이아웃이 모든 화면에 붙이는 것이라, 화면 하나가 그것을 끄려면 레이아웃이
 * 어느 화면인지 알아야 합니다. 그 앎을 레이아웃에 심는 것보다 이 스킨의
 * 시트 한 줄이 좁습니다.
 *
 * 셀렉터에 자손 결합자가 없는 것에 주의하십시오: `data-skin` 은 **`#app`
 * 자신**에 붙습니다. `[data-skin] #app` 으로 쓰면 `#app` 안에 또 `#app` 이
 * 있어야 해서 영원히 안 맞습니다 — 처음에 그렇게 쓰고 꼬리말이 그대로 떠
 * 있었습니다.
 */
#app[data-skin="poseidon"]:has(.ps-close) > footer {
  display: none;
}

[data-skin="poseidon"] .ps-close__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 18px;
}
[data-skin="poseidon"] .ps-close__links a {
  position: relative;
  padding: 4px 0;
  color: var(--p-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms var(--ease);
}
[data-skin="poseidon"] .ps-close__links a:hover {
  color: var(--p-accent);
}
/* 사이 구분점. 줄이 접히면 첫 칸에는 안 붙어야 하므로 `::before` 로 왼쪽에. */
[data-skin="poseidon"] .ps-close__links a + a::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 1px;
  height: 10px;
  transform: translateY(-50%);
  background: var(--p-line-strong);
}

[data-skin="poseidon"] .ps-close__note {
  margin: 0;
  font-size: 12px;
  color: var(--p-muted);
}
[data-skin="poseidon"] .ps-close__note strong {
  color: var(--p-money);
  font-weight: 700;
}
[data-skin="poseidon"] .ps-close__copy {
  margin: 0;
  font-size: 11.5px;
  color: rgb(var(--t-veil-rgb, 255 255 255) / 0.32);
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  [data-skin="poseidon"] .ps-close {
    gap: 12px;
    margin-top: 20px;
    padding: 22px 14px 28px;
  }
  [data-skin="poseidon"] .ps-close__links {
    gap: 0 14px;
  }
}

/*
 * `background` 단축이 아니라 `background-color` 입니다.
 *
 * 단축은 안 적은 자리를 **초기값으로 되돌립니다** — 여기서는
 * `background-image` 가 `none` 이 되어 스프라이트가 통째로 사라졌습니다.
 * 로고 열둘이 전부 그 그림 한 장의 조각이라, 올릴 때마다 그 칸이 흰 기가
 * 도는 빈 상자가 됐습니다 (2026-09-05 사용자 지적: "마우스 올리면 흰색으로
 * 아무것도 안보여").
 */
[data-skin="poseidon"] .logos ul li a:hover {
  filter: none;
  background-color: rgb(var(--t-veil-rgb, 255 255 255) / 0.05);
}

/* ── 로비 카드 ────────────────────────────────────────────── */

[data-skin="poseidon"] ul.casino li a,
[data-skin="poseidon"] ul.slot li a {
  border: 1px solid var(--theme-panel-line);
  border-radius: 7px;
  background: var(--theme-bg-panel, #141828);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
[data-skin="poseidon"] ul.casino li a:hover,
[data-skin="poseidon"] ul.slot li a:hover {
  border-color: var(--theme-accent-blue);
}
[data-skin="poseidon"] ul.casino li a .title-kr,
[data-skin="poseidon"] ul.slot li a .title-kr {
  font-size: 13px;
  color: var(--theme-text-muted);
  border-top: 1px solid var(--theme-panel-line);
  transition: color 150ms var(--ease);
}
[data-skin="poseidon"] ul.casino li a:hover .title-kr,
[data-skin="poseidon"] ul.slot li a:hover .title-kr {
  color: #fff;
}

/* ── 폼 화면 ──────────────────────────────────────────────── */

[data-skin="poseidon"] .form-panel,
[data-skin="poseidon"] .info-panel,
[data-skin="poseidon"] .history-panel {
  border-radius: 7px;
  border: 1px solid var(--theme-panel-line);
}
[data-skin="poseidon"] .panel-header h3 i {
  color: var(--theme-accent-blue);
}

/* 입력칸 — 포커스가 보이게. */
[data-skin="poseidon"] .input-field,
[data-skin="poseidon"] .form-control,
[data-skin="poseidon"] .bet-slip__input {
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
[data-skin="poseidon"] .input-field:focus,
[data-skin="poseidon"] .form-control:focus,
[data-skin="poseidon"] .bet-slip__input:focus {
  outline: none;
  border-color: var(--theme-accent-blue);
}

/* 단추 — 눌림이 느껴지게. */
[data-skin="poseidon"] .btn {
  transition: transform 120ms var(--ease), filter 150ms var(--ease), background 150ms var(--ease);
}
[data-skin="poseidon"] .btn:hover:not(:disabled) {
  filter: brightness(1.08);
}
[data-skin="poseidon"] .btn:active:not(:disabled) {
  transform: translateY(1px);
}
[data-skin="poseidon"] .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
[data-skin="poseidon"] .btn-submit {
  background: var(--theme-accent-blue-deep);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 빠른 금액 — 한 줄에 고르게. */
[data-skin="poseidon"] .amount-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
[data-skin="poseidon"] .amount-buttons .btn {
  flex: 1 1 calc(16.66% - 6px);
  min-width: 64px;
}

/*
 * 충전보너스 — 라벨이 좁은 상자에서 접혔습니다. 두 줄(이름 / 요율)만 두고
 * 나머지는 아래 안내로 뺐으니, 상자는 그 두 줄이 편히 서는 높이만 가지면
 * 됩니다.
 */
[data-skin="poseidon"] .bonus-options {
  gap: 8px;
}
[data-skin="poseidon"] .radio-option label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 60px;
  font-size: 13px;
  line-height: 1.3;
  word-break: keep-all;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
[data-skin="poseidon"] .radio-option label .rate {
  font-size: 11px;
  opacity: 0.8;
}
[data-skin="poseidon"] .radio-option input[type="radio"]:checked + label {
}

/* 안내 문장 — 점 대신 작은 선. */
[data-skin="poseidon"] .info-panel ul li {
  line-height: 1.6;
}
[data-skin="poseidon"] .input-description {
  line-height: 1.5;
}

/* ── 표 ───────────────────────────────────────────────────── */

[data-skin="poseidon"] .history-table .tbl-row {
  transition: background 120ms var(--ease);
}
[data-skin="poseidon"] .history-table .tbl-row:hover {
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.025);
}
[data-skin="poseidon"] .status-badge {
  letter-spacing: 0.02em;
}

/* 쪽 번호 */
[data-skin="poseidon"] .pagination-btn {
  border-radius: 8px;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
[data-skin="poseidon"] .pagination-btn:hover:not([aria-disabled="true"]) {
  background: rgb(var(--p-accent-rgb) / 0.12);
  color: var(--color-ink-strong);
}
[data-skin="poseidon"] .pagination-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}
[data-skin="poseidon"] .pagination-now {
  margin: 0 12px;
  font-variant-numeric: tabular-nums;
  color: var(--theme-text-muted);
}

/* ── 마이페이지 두 열 ─────────────────────────────────────── */

[data-skin="poseidon"] .user-info-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
[data-skin="poseidon"] .user-info-2col .user-info-item .depositor-info {
  min-height: 48px;
}
@media (max-width: 768px) {
  [data-skin="poseidon"] .user-info-2col {
    grid-template-columns: 1fr;
  }
}

/* ── 페이지 제목 ──────────────────────────────────────────── */

[data-skin="poseidon"] .page-title-bar h1 {
  font-size: 20px;
  letter-spacing: -0.01em;
}
[data-skin="poseidon"] .page-title-bar h1 i {
  font-size: 18px;
}

/* ── 푸터 ─────────────────────────────────────────────────── */

[data-skin="poseidon"] .copy {
  padding: 28px 0 36px;
  color: var(--theme-text-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}
[data-skin="poseidon"] .copy .highlight {
  color: var(--theme-accent-blue);
}

/*───────────────────────────────────────────────────────────
  export 의 뼈대를 조합에 묶습니다.

  ── 왜 여기에 있는가 ──────────────────────────────────

  이 규칙들은 export 시트(`default`·`board`·`custom`·`game`)가 이미 말한
  자리를 **다시** 말합니다. 원본을 고치지 않는 이유는 `AGENTS.md` 의
  것입니다 — export 트리는 아카이브와 diff 가 되어야 합니다. 그래서 뒤에
  실리는 우리 시트가 마지막 말을 합니다.

  ── 무엇이 문제였는가 ────────────────────────────────

  전역으로 실리는 export 시트 여섯에 값이 박힌 자리가 139곳 있습니다.
  어두운 조합 다섯만 있을 때는 안 드러났습니다: `#000` 은 남색 옆에서
  그냥 좀 더 어두운 검정이니까요.

  아이보리를 배포하고 찍어 보니 오른쪽 배팅카트가 **검은 기둥**으로
  섰습니다 (`#panel_betting{background:#000}`). 상단 단추 글자는 흰색이라
  안 보이고, 종목 숫자 배지도 사라졌습니다.

  ── 어두운 조합에도 이득입니다 ──────────────────────

  고치기 전 라이브를 보면 카트 기둥이 **순검정**이고 쪽은 남색입니다.
  둘이 따로 놉니다. 조합에 묶으면 한 화면이 됩니다 — 밝은 조합 때문에
  하는 일이지만 다섯 다 나아집니다.

  ── 여기 없는 것 ─────────────────────────────────────

  139곳을 다 옮기지 않았습니다. 첫 화면과 뼈대에 나오는 것만입니다.
  팝업 안쪽, 게시판 서식, 미니게임, 폰 회원 패널은 아직 값이 박혀
  있습니다 — 그 화면들을 밝은 조합으로 열어 보고 고쳐야 하고, 안 열어
  보고 고치면 안 보이는 자리를 짐작으로 칠하는 일이 됩니다.
───────────────────────────────────────────────────────────*/

/*
 * 뿌리부터.
 *
 * `reset.css` 9번 줄이 스킨 울타리 자체에 `color:#fff; background:#000` 을
 * 겁니다. **쪽에 있는 거의 모든 글자가 거기서 옵니다** — 제목도 문단도
 * 자기 색이 없으면 이것을 물려받습니다.
 *
 * 그래서 밝은 조합에서 안 보이던 글자 대부분은 각자의 결함이 아니라 이 한
 * 줄이었습니다. 자리마다 쫓아다니는 대신 물려주는 쪽을 고칩니다.
 */
[data-skin="poseidon"] {
  color: var(--t-ink, #eaeaea);
  background: var(--t-base, #0a0f1a);
}
[data-skin="poseidon"] h1:where(:not(.app-ui, .app-ui *)),
[data-skin="poseidon"] h2:where(:not(.app-ui, .app-ui *)),
[data-skin="poseidon"] h3:where(:not(.app-ui, .app-ui *)),
[data-skin="poseidon"] h4:where(:not(.app-ui, .app-ui *)),
[data-skin="poseidon"] h5:where(:not(.app-ui, .app-ui *)),
[data-skin="poseidon"] h6:where(:not(.app-ui, .app-ui *)) {
  color: var(--t-ink, #eaeaea);
}

/* 뼈대 — 쪽을 나누는 큰 면들. */
[data-skin="poseidon"] #panel_betting,
[data-skin="poseidon"] #panel_nav {
  background: var(--t-base, #0a0f1a);
}
[data-skin="poseidon"] #panel_user {
  background: var(--t-panel, #141828);
}
[data-skin="poseidon"] #gnb_mobile ul li a {
  background: var(--t-panel, #141828);
}

/* 한 단 뜬 칩 — 옛 값 `#111`·`#222`·`#202125`·`#313448` 이 다 이것입니다. */
[data-skin="poseidon"] #gnb_side ul li a,
[data-skin="poseidon"] #panel_nav .banner ul li,
[data-skin="poseidon"] #panel_user .user .level,
[data-skin="poseidon"] #panel_user ul.user_link li a,
[data-skin="poseidon"] #tnb ul li a.btn_login,
[data-skin="poseidon"] #tnb ul li a.btn_regist,
[data-skin="poseidon"] #tnb ul li a.btn_logout,
[data-skin="poseidon"] .login_mobile a.btn_login,
[data-skin="poseidon"] .btn-secondary,
[data-skin="poseidon"] .btn-amount,
[data-skin="poseidon"] .pagination-btn,
[data-skin="poseidon"] .info-panel .panel-header,
[data-skin="poseidon"] #snb,
[data-skin="poseidon"] #list .th,
[data-skin="poseidon"] #view .title,
[data-skin="poseidon"] #form .cell.td_label {
  background: var(--color-raise);
  background-color: var(--color-raise);
}
[data-skin="poseidon"] .btn-secondary:hover,
[data-skin="poseidon"] .btn-amount:hover,
[data-skin="poseidon"] .pagination-btn:hover,
[data-skin="poseidon"] .page-nav .nav-btn:hover,
[data-skin="poseidon"] .sports_list li a:hover,
[data-skin="poseidon"] .game_popular .box:hover {
  background-color: color-mix(
    in srgb,
    var(--t-panel, #141828) 78%,
    rgb(var(--t-veil-rgb, 255 255 255))
  );
}

/* 한 단 눌린 칸 — 글을 쓰는 자리. */
[data-skin="poseidon"] #form .cell textarea,
[data-skin="poseidon"] .custom-panel-menu,
[data-skin="poseidon"] .menu-tab,
[data-skin="poseidon"] .menu-btn {
  background: var(--t-sunk, #0f1320);
}

/*
 * 글자.
 *
 * `#fff` 이 아니라 `--color-ink-strong` 입니다 — 어두운 조합에서는 거의
 * 흰색 그대로이고(#f1f1f1), 밝은 조합에서만 검은 쪽으로 뒤집힙니다.
 * `reset.css` 의 셋은 `:where()` 로 감싸여 있어 무게가 0 이라 쉽게 덮입니다.
 */
[data-skin="poseidon"] a:where(:not(.app-ui, .app-ui *)),
[data-skin="poseidon"] input:where(:not(.app-ui, .app-ui *)),
[data-skin="poseidon"] textarea:where(:not(.app-ui, .app-ui *)),
[data-skin="poseidon"] select:where(:not(.app-ui, .app-ui *)),
[data-skin="poseidon"] .btn,
[data-skin="poseidon"] .btn-bet,
[data-skin="poseidon"] .btn-submit,
[data-skin="poseidon"] .btn-get-money,
[data-skin="poseidon"] .btn-signup,
[data-skin="poseidon"] .btn-amount-reset,
[data-skin="poseidon"] .bet-slip__money-presets button,
[data-skin="poseidon"] #panel_nav .search ul li .input,
[data-skin="poseidon"] #panel_nav .search ul li button.btn_search,
[data-skin="poseidon"] .sports_list li.slidedown.active > a,
[data-skin="poseidon"] .sports_list li.slidedown.active > a .game-count,
[data-skin="poseidon"] #panel_user .btn_close_userpanel,
[data-skin="poseidon"] .menu-btn,
[data-skin="poseidon"] .pagination-btn.active,
[data-skin="poseidon"] .page-nav .nav-btn.active,
[data-skin="poseidon"] .toggle-btn-mobile {
  color: var(--color-ink-strong);
}
/*
 * 색이 얹힌 단추는 그 색이 정합니다 — 위 목록이 덮어 버리면 파란 단추에
 * 검은 글자가 앉습니다. 조합이 강조색마다 재 놓은 값이 `accentInk` 입니다.
 */
[data-skin="poseidon"] .btn-primary,
[data-skin="poseidon"] .btn.btn_submit,
[data-skin="poseidon"] .sports_search_wrap .btn-primary,
[data-skin="poseidon"] .bet-slip__money-presets .btn-util,
[data-skin="poseidon"] .menu-tab.selected,
[data-skin="poseidon"] .menu-tab[ng-click*="withdraw"],
[data-skin="poseidon"] .menu-btn-orange,
[data-skin="poseidon"] .dw ul li .btn_account,
[data-skin="poseidon"] .dw ul li ol li .btn_qa,
[data-skin="poseidon"] ul.event_list li a label {
  color: var(--t-accent-ink, #ffffff);
}

/*
 * 아이콘 띠의 영문 줄.
 *
 * export 가 `#00ffeb` 형광 청록을 박아 두었습니다. 조합을 안 따라가므로
 * 금색 조합에서는 청록 한 줄만 튀고, 상아빛 판에서는 아예 안 읽힙니다.
 */
[data-skin="poseidon"] .icon-menu-bar .icon-item .title-en {
  color: var(--t-accent, #1fb6ff);
}

/*
 * 바로가기의 한글 이름.
 *
 * export 는 본문색에 600 굵기입니다. 어두운 판에서 그건 겨우 읽히는 세기인데
 * 흰 카드 위에서는 거의 검정이라, 옆의 그림보다 글자가 먼저 옵니다. 밝은
 * 조합만 한 단씩 물립니다 — 뜻이 바뀌는 것이 아니라 세기만 바뀝니다.
 */
[data-skin="poseidon"] .icon-menu-bar .icon-item .title-kr {
  color: var(--t-quick-ink, var(--t-ink, #eaeaea));
  font-weight: var(--t-quick-weight, 600);
}

/* 아이콘 띠 — 옛 값 `#0b0d12` 는 어느 조합에서도 판보다 어두웠습니다. */
[data-skin="poseidon"] .icon-menu-bar .icon-item {
  background: linear-gradient(var(--t-panel, #141828), var(--t-panel, #141828))
      padding-box,
    linear-gradient(
        160deg,
        rgb(var(--t-accent-rgb, 31 182 255) / 0.55),
        rgb(var(--t-money-rgb, 232 189 85) / 0.35)
      )
      border-box;
}

/*
 * 굴림대. 옛 값은 손잡이 `#444` 에 길 `#000` — 밝은 쪽에서는 길이 검은
 * 띠로 남습니다. 알파로 두면 어느 조합에서나 제 바탕 위에서 같은 세기입니다.
 */
[data-skin="poseidon"] ::-webkit-scrollbar-thumb,
[data-skin="poseidon"] .scroll::-webkit-scrollbar-thumb,
[data-skin="poseidon"] .scroll_hor::-webkit-scrollbar-thumb {
  background-color: rgb(var(--t-veil-rgb, 255 255 255) / 0.26);
}
[data-skin="poseidon"] .scroll::-webkit-scrollbar-track,
[data-skin="poseidon"] .scroll_hor::-webkit-scrollbar-track {
  background-color: rgb(var(--t-veil-rgb, 255 255 255) / 0.07);
}

/* ── 스포츠 없는 도메인 ───────────────────────────────────── */

/*
 * 오른쪽 300px 를 내용이 되찾습니다 (2026-09-10 운영자 요청).
 *
 * export 의 레이아웃은 판 둘을 `position: absolute` 로 세우고 내용에
 * `margin: 0 300px` 로 그 자리를 비워 둡니다(`scoped/css/default.css`). 그래서
 * 크롬이 배팅카트를 안 그려도 **오른쪽 300px 는 그대로 남습니다** — 비운
 * 상자와 없는 상자가 레이아웃에서 같은 말이 되는 것이 이 스위치들을 감사하게
 * 만든 병이고, 이것이 그중 가장 큰 자리입니다.
 *
 * ── `:has()` 로 묻는 이유 ──
 *
 * 판을 그리는 곳이 둘입니다: 스포츠 밖에서는 크롬(`chrome.tsx` 의
 * `PoseidonSidePanels`), 스포츠 판 위에서는 화면 자신
 * (`screens/sports-board-view.tsx` — 그쪽은 `#content_wrap` 을 안 씁니다).
 * 자리를 비울지 정하는 것은 「누가 그렸나」가 아니라 「지금 문서에 있나」이고,
 * 그대로 물으면 규칙이 하나입니다. 스위치 값을 여기서 다시 세면 같은 판정이
 * 셋(크롬·시트·화면)에 적히고, 그 셋이 갈리는 날 내용이 판 아래로 깔립니다.
 *
 * 안 되는 브라우저에서는 **선택자째 버려지고 오늘 그대로**입니다 — 300px
 * 구멍이 남지만 겹치지는 않습니다. 반대로 적었다면(있을 때만 비우기) 같은
 * 브라우저에서 내용이 판 밑으로 들어갑니다. 되돌릴 쪽을 고른 이유입니다.
 *
 * 자손 결합자가 하나뿐인 것에 주의하십시오: `data-skin` 은 `#app` **자신**에
 * 붙습니다 — 위 §맺음 줄의 주석과 같은 이유입니다.
 */
#app[data-skin="poseidon"]:not(:has(#panel_betting)) #content_wrap {
  margin-right: 0;
}

/*
 * 큰 카드 다섯 자리 — 남은 것이 다섯보다 적을 때.
 *
 * `game.css` 의 `.game-grid.five-items` 는 `repeat(5, 1fr)` 입니다. 이름이 곧
 * 규칙이라, 스포츠 셋이 빠져 카드가 둘만 남으면 칸 다섯 중 셋이 빈 채로
 * 남습니다 — 재어 보면 1920px 에서 카드 둘(248px)이 왼쪽에 붙고 그 오른쪽으로
 * 789px 가 빕니다. 판을 뺀 자리를 되찾아 놓고 이 줄을 그대로 두면, 구멍이
 * 300px 에서 1089px 로 넓어지기만 합니다.
 *
 * 칸을 카드 수에 맞추되 **폭은 다섯일 때 그대로** 두고 줄을 가운데로 모읍니다.
 * `1fr` 로 두면 카드 둘이 각각 절반을 먹고, `aspect-ratio: 3 / 4` 라 높이가
 * 800px 를 넘습니다 — 스포츠를 끈 것이 카드를 키우는 이유가 될 수는 없습니다.
 *
 * `auto-fit` 이 들어갈 만큼 칸을 만들고 빈 칸을 접고, `justify-content` 가
 * 남은 것을 모읍니다. 다섯 장인 도메인에는 **한 줄도 안 닿습니다**: 관문이
 * `:not(:has(.game-card:nth-child(5)))` 라서 다섯째가 있으면 규칙이 아예 안
 * 걸립니다. 오늘 사는 모든 사이트가 그쪽입니다.
 *
 * 폰(≤768px)은 그대로 둡니다 — 거기서는 `mobile.css` 가 두 칸으로 접고, 카드
 * 둘이 이미 한 줄을 꽉 채웁니다.
 */
@media (min-width: 769px) {
  #app[data-skin="poseidon"]
    .game-grid.five-items:not(:has(.game-card:nth-child(5))) {
    grid-template-columns: repeat(auto-fit, calc((100% - 60px) / 5));
    justify-content: center;
  }
}

/* ── 움직임을 싫어하는 사람에게 ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-skin="poseidon"] *,
  [data-skin="poseidon"] *::before,
  [data-skin="poseidon"] *::after {
    transition: none !important;
    animation: none !important;
  }
}