/*
  Manila — 전역 스타일
  출처: COMMON-MARKUP.md A-1(모바일 helmet) · C-1(PC helmet) 을 합친 것.

  ─────────────────────────────────────────────────────────────
  시안은 모든 스타일이 인라인이다. 그것을 CSS 로 걷어내지 않는다.

  걷어내면 시안과 대조가 불가능해지고, 나중에 시안이 갱신됐을 때
  무엇이 바뀌었는지 알 수 없게 된다. 시안이 마크업의 SSOT 다.

  이 파일에는 인라인으로 쓸 수 없는 것만 둔다.
    - body · a 같은 요소 기본값
    - @keyframes
    - ::selection · ::-webkit-scrollbar 같은 의사요소
    - .ms  (Material Symbols. PROJECT.md 5.3 이 정한 유일한 축약 클래스)
  ─────────────────────────────────────────────────────────────
*/

body {
  margin: 0;
  background: #fff;
  font-family: "Noto Sans KR", "Helvetica Neue", Helvetica, sans-serif;
  color: #16211c;
  -webkit-font-smoothing: antialiased;
}

a { color: #0f5c3f; text-decoration: none; }
a:hover { color: #128059; }

::selection { background: #0f5c3f; color: #fff; }

/* 가로 탭이 여럿이라 스크롤바를 숨긴다 (PROJECT.md 5.6) */
::-webkit-scrollbar { height: 0; width: 0; }

/*
  Material Symbols Rounded.

  시안은 span 마다 font-family · font-variation-settings · line-height 를
  인라인으로 반복한다. 그 세 줄만 클래스로 뺀다 (PROJECT.md 5.3).
  크기와 색은 자리마다 다르므로 인라인에 남긴다.

  [2026-08-26] PC 도 이 클래스를 쓴다. 예전 PC 시안은 아이콘을
  border 도형으로 그렸지만 새 시안이 글리프로 바꿨다.
  그래서 폰트가 안 왔을 때 비는 자리가 늘었다 —
  PC 헤더 nav 7개 + 서브 nav 9개 + 드롭다운 11개가 한꺼번에 빈다.
  self-host 판단이 그만큼 더 급해졌다.
*/
/*
  아이콘은 폰트가 확인되기 전까지 감춘다.

  Material Symbols 는 ligature 방식이라 <span class="ms">notifications</span> 의
  내용이 그대로 글자다. 폰트가 안 오면 아이콘 자리에 'notifications' 라는
  영어 단어가 그대로 뜨면서 헤더가 무너진다 — 2026-08-25 브라우저 검증에서
  fonts.googleapis.com 이 막힌 망을 흉내 내 실제로 재현했다.

  기본은 숨김이고, head 의 스크립트가 폰트 적재를 확인한 뒤에만
  html 에 ms-ready 를 붙여 보여 준다. 끝내 안 오면 빈 자리로 남는다 —
  영어 단어가 뜨는 것보다는 낫다.

  display:none 이 아니라 visibility 를 쓰는 이유는 자리를 지키기 위해서다.
  없애면 헤더 아이콘 폭이 0 이 되어 레이아웃이 흔들린다.

  ─────────────────────────────────────────────────────────────
  [2026-08-26 추가] 그런데 그 "자리" 가 글리프 한 칸이 아니었다.

  폰트를 못 받으면 span 안의 내용은 여전히 'sports_soccer' 라는 글자다.
  visibility:hidden 은 그리지만 않을 뿐 폭은 그대로 잡는다 —
  실측 110px. 글리프였다면 19px 다.

  PC 헤더는 nav 7개가 가로로 붙어 있어서 이 차이가 그대로 밀린다.
  아이콘은 안 보이는데 메뉴 사이가 텅 비고, 오른쪽 로그인 영역이
  화면 밖으로 나간다. 모바일은 헤더 글리프가 4개뿐이라 안 드러났었다.

  그래서 폰트가 확인되기 전까지만 한 칸(1em)으로 잘라 둔다.
  ms-ready 가 붙으면 이 규칙이 통째로 빠지므로 글리프는
  제 폭으로 그려진다 — 좁은 아이콘이 잘리지 않는다.
  ─────────────────────────────────────────────────────────────
*/
.ms { visibility: hidden; }
html.ms-ready .ms { visibility: visible; }

html:not(.ms-ready) .ms {
  display: inline-block;
  width: 1em;
  overflow: hidden;
}

.ms {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 1;
  line-height: 1;
  font-size: inherit;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

/* ────────────────────────────────────────── 키프레임 */

@keyframes om-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes om-slide-in {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-14px); }
  to   { clip-path: inset(0 0 0 0);    transform: translateX(0); }
}

@keyframes om-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes om-ticker-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/*
  인증 시트 전용. 이름이 om-sheet-up 과 다르다 —
  시안 'Manila 인증시트.dc.html' 이 별도 파일이라 자기 keyframes 를 갖는다.
  값은 om-sheet-up 과 같지만 시안을 따라 이름을 유지한다.
*/
@keyframes om-auth-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes om-auth-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ────────────────────────────────────────── 오버레이 토글 */

/*
  시안(React)은 열릴 때만 DOM 에 그렸다.
  서버 렌더는 미리 그려 두고 display 로 여닫는다.

  display:none → block 으로 바뀌면 CSS 애니메이션이 다시 재생되므로
  om-slide-in · om-sheet-up 이 열 때마다 그대로 돈다. 별도 처리가 필요 없다.
*/
[data-overlay] { display: none; }
[data-overlay][data-open="1"] { display: block; }

/*
  PC 모달만 flex 다 (가운데 정렬).
  모바일 인증 시트(data-overlay="auth")는 시안이 block 래퍼 안에서
  패널을 absolute bottom 으로 붙이므로 기본 block 이 맞다.
*/
[data-overlay="modal"][data-open="1"] { display: flex; }

/* 가로 드래그 대상 */
[data-hscroll] { cursor: grab; }
[data-hscroll].is-dragging { cursor: grabbing; }

/* ────────────────────────────────────────── 게임관 카드 (PC 갤러리) */

/*
  시안은 카드마다 onMouseEnter / onMouseLeave 로 다른 카드의 filter 를
  자바스크립트가 직접 만졌다 (h.filter · h.opacity · h.transform).

  같은 결과를 CSS 로 만든다 — 그리드에 마우스가 올라가면 전부 흐려지고
  올라간 카드만 되돌아온다. 스크립트가 없어도 동작하고, 카드가 늘어나도
  이벤트 핸들러가 늘지 않는다.

  터치 기기에는 :hover 가 없으므로 모바일 갤러리에는 붙이지 않았다.
  붙이면 한 번 눌렀던 카드가 흐린 채로 남는다.
*/
.hall-grid .hall {
  transition: filter .2s, opacity .2s, transform .2s;
}
.hall-grid:hover .hall {
  filter: grayscale(1);
  opacity: .45;
}
.hall-grid .hall:hover {
  filter: none;
  opacity: 1;
  transform: translateY(-3px);
}

/* 점검중 카드는 떠오르지 않는다 — 눌리는 것처럼 보이면 안 된다 */
.hall-grid .hall[aria-disabled="true"]:hover {
  transform: none;
  cursor: default;
}

/* ────────────────────────────────────────── 신청 방식 전환 (현금 / 테더) */

/*
  입금·출금은 **URL 이 하나**다. 방식을 바꿔도 주소가 안 바뀐다.
  두 방식의 폼이 함께 그려져 있고 보이는 쪽만 여기서 정한다.

  오버레이([data-overlay])와 같은 방식으로 썼다 —
  서버가 data-on 을 정해서 보내고, 스크립트는 그 값만 뒤집는다.
  스크립트가 없으면 서버가 켠 쪽 하나만 보이고 탭은 링크로 동작한다.
*/
[data-cash-panel] { display: none; }
[data-cash-panel][data-on="1"] { display: block; }