/*
 * 포세이돈이 공용 조각에 입히는 옷 — 이 스킨의 export 에 없는 것들.
 *
 * `public/skin/<id>/` 는 **우리 파일**의 자리입니다 (팔레트가 그렇습니다).
 * `public/poseidon/` 은 export 를 그대로 옮긴 것이라 손대지 않습니다.
 *
 * ── 메인 비주얼 ─────────────────────────────────────────────
 *
 * `components/visual-banner.tsx` 는 제우스·헤라의 말로 짜여 있습니다 —
 * `.visual_list > .visual_item.active`, 점은 `.visual_btns .btn_circle`.
 * 그 둘은 자기 시트에서 안 보이는 장을 `opacity: 0` 으로 눕히고 겹쳐
 * 쌓습니다. 포세이돈의 시트에는 그 이름이 하나도 없어서, 네 장이 **전부
 * 세로로 쌓여** 첫 화면을 통째로 차지했습니다.
 *
 * 여기서는 **동작만** 줍니다 — 겹치기, 보이기, 점. 색과 크기는 이 export 의
 * `.custom-slider-container` 가 이미 갖고 있고 홈 뷰가 그 안에 놓습니다.
 */
[data-skin="poseidon"] .visual_list {
  position: relative;
  width: 100%;
  /* 실어 둔 장들이 1600×364 입니다 — 같은 비율이면 잘리는 곳이 없습니다. */
  aspect-ratio: 1600 / 364;
  min-height: 160px;
  max-height: 364px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-skin="poseidon"] .visual_item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms;
}

[data-skin="poseidon"] .visual_item.active {
  opacity: 1;
}

[data-skin="poseidon"] .visual_item .visual_flat,
[data-skin="poseidon"] .visual_item .visual_flat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-skin="poseidon"] .visual_item .visual_link {
  position: absolute;
  inset: 0;
}

[data-skin="poseidon"] .visual_btns {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}

[data-skin="poseidon"] .btn_circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.35);
  cursor: pointer;
}

[data-skin="poseidon"] .btn_circle.active {
  background: var(--theme-accent-blue, var(--p-accent));
}

/*
 * 공용 조각들이 쓰는 「읽는 기계에만 보이는 제목」. 부트스트랩 이름이고
 * 제우스·헤라의 시트가 갖고 있습니다. 없으면 「메인 비주얼」이라는 글자가
 * 화면 왼쪽 위에 그대로 찍힙니다 — 실제로 그랬습니다.
 */
[data-skin="poseidon"] .d-none {
  display: none !important;
}

[data-skin="poseidon"] .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * 헤더는 위에 붙어 있습니다.
 *
 * 원본은 페이지 전체가 100vh 짜리 앱 껍데기입니다 — 헤더·좌우 판이 서 있고
 * 가운데 내용만 자기 상자 안에서 굴러갑니다. 우리는 문서가 굴러가므로 헤더가
 * 같이 올라갔고, 그러면 좌우 판(fixed, top:100px) 위에 100px 빈 띠가 생겼습니다.
 * 헤더를 sticky 로 붙이면 세 기둥이 각자 굴러가는 원본의 느낌이 됩니다.
 */
/*
 * sticky 는 **부모 안에서만** 붙습니다. `#header_wrap` 에 걸었더니 그 부모
 * (`.pc-only` 감싸개)가 헤더 높이 그대로라 움직일 자리가 없어 그냥 굴러
 * 올라갔습니다. 감싸개 자체에 걸면 그 부모가 페이지 전체(`#app`)라 붙습니다.
 */
[data-skin="poseidon"] .pc-only:has(> #header_wrap) {
  position: sticky;
  top: 0;
  z-index: 20;
}
/*
 * 폰 헤더도 같이 붙습니다 — 같은 짜임, 같은 이유 (2026-09-05).
 *
 * 안 붙여 두었더니 스포츠 판처럼 긴 화면에서 첫 쓸어내림에 헤더가 통째로
 * 사라졌습니다. 그 안에 햄버거·내 정보·보유머니 띠가 다 있으므로, 메뉴 한
 * 번 열려면 맨 위까지 되돌아가야 했다는 뜻입니다.
 *
 * `fixed` 가 아니라 `sticky` 인 것이 중요합니다. 이 헤더는 **두 가지 높이**
 * 입니다 — 회원이면 잔액 띠가 붙어 더 높고(`chrome.tsx` 의
 * `.user_header_mobile`), 손님이면 헤더 줄 하나입니다. `fixed` 로 띄우면
 * 본문에 그만큼 자리를 비워 줘야 하는데 그 값이 둘이라, 어느 쪽이든 한
 * 상태에서 틀립니다. 제우스가 같은 이유로 같은 답을 냈고 그 까닭이
 * `mobile-header-fixed.spec.ts` 머리말에 적혀 있습니다.
 */
[data-skin="poseidon"] .mobile-only:has(> #header_wrap) {
  position: sticky;
  top: 0;
  z-index: 20;
}

/*
 * 좌우 판의 자리.
 *
 * export 는 `#body_wrap { position: relative }` 안에 두 판을 `absolute` 로
 * 붙입니다. 우리 레이아웃에는 `#body_wrap` 이 없고 — 헤더·내용·푸터가 한
 * 줄로 섭니다 — 판은 헤더 안에서 그려집니다. 그래서 `fixed` 로 화면 양쪽에
 * 헤더 아래부터 세웁니다. 헤더가 100px 입니다 (`#header_wrap`).
 *
 * 스포츠 판은 자기 판을 relative 한 뿌리 안에 absolute 로 두므로 여기 규칙이
 * 그것까지 덮으면 안 됩니다 — `.sports-page-container` 안의 것은 뺍니다.
 */
[data-skin="poseidon"] #panel_nav:not(.sports-page-container *),
[data-skin="poseidon"] #panel_betting:not(.sports-page-container *) {
  position: fixed;
  top: 100px;
  bottom: 0;
  width: 300px;
  overflow-y: auto;
  z-index: 5;
}
[data-skin="poseidon"] #panel_nav:not(.sports-page-container *) {
  left: 0;
}
[data-skin="poseidon"] #panel_betting:not(.sports-page-container *) {
  right: 0;
}

/*
 * 스포츠 판 — 폰에서는 두 판이 흐름으로 내려옵니다.
 *
 * export 의 `#panel_betting` 은 폰에서 `right: -300px; position: fixed` 로
 * 화면 밖에 숨고, 인라인 스크립트의 단추(`app.isCartOpen`)가 끌어옵니다.
 * 그 스크립트를 안 옮겼으니 숨긴 채 두면 **폰에서 카트가 없습니다.**
 *
 * 카트 자신은 이제 폰에서 열기 단추와 시트로 그려집니다
 * (`sports-cart-view.tsx`) — 여기 남는 것은 왼쪽 판이고, 그건 흐름에 둡니다.
 *
 * 767 인 이유는 `sport.css` 의 같은 자리에 적혀 있습니다: 폰인지 아닌지를
 * 정하는 것은 자바스크립트의 `matchMedia("(max-width: 767px)")` 하나이고,
 * 여기가 768 이던 동안 정확히 768px 인 창에서 판만 흐름으로 내려가고 카트는
 * 데스크톱 모양이라 목록 맨 아래에 놓였습니다.
 */
@media (max-width: 767px) {
  [data-skin="poseidon"] .sports-page-container {
    padding: 0 !important;
  }
  [data-skin="poseidon"] #panel_betting,
  [data-skin="poseidon"] #panel_nav {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    margin-top: 12px !important;
  }
}

/*
 * 화면 제목 아래 한 줄. export 의 `.page-title-bar` 에는 `h1` 만 있고 우리는
 * 그 아래 부제를 둡니다 — 색만 정하고 자리는 흐름에 맡깁니다.
 */
[data-skin="poseidon"] .page-title-bar p {
  margin-top: 6px;
  font-size: 13px;
  color: var(--theme-text-muted, #8a91a8);
}