/*
 * 공용 gl/game-styles.css 간섭 차단 (gl/304·305 gl-fixes.css와 같은 사유).
 * 페이지 CSS(styles.css / result.css) 뒤에 로딩한다.
 *
 * 1) 폰트: 공용이 body/input/button을 'RixGulim'으로 지정(명시도 높음).
 * 2) 공용 .btn 등이 display를 지정해 UA의 [hidden]을 덮는다 — 이 이벤트는 씬 전환을 hidden으로 한다.
 * 3) 공용이 div/p/span에 transform: skew(-0.03deg)를 걸어 모든 div가 absolute 자식의 containing block이 된다.
 *    이 이벤트는 #viewport(position: fixed) 기준으로 잡아야 하므로 반드시 해제해야 한다.
 * 4) 공용 img { -webkit-touch-callout: none !important }가 결과 카드 "꾹 눌러 저장"을 iOS에서 막는다.
 * 5) 공용 .game-wrapper/body의 font-size·line-height·letter-spacing을 브라우저 기본값으로 되돌린다
 *    (MVP가 기본값 위에서 그려졌다 — 안 되돌리면 줄높이가 달라 캡션이 밀린다).
 * 7) 공용 `* { line-height: 1.5 }`가 상속을 끊는다 — 자식 요소를 상속으로 되돌린다.
 * 6) 래퍼에 세로 중앙 정렬을 주지 않는다 — 공용 common-re.js가 래퍼에 height: $(window).height()를
 *    인라인으로 박는데, 카카오톡 인앱브라우저는 이 값이 실제 보이는 영역(100dvh)보다 크다 (gl/304 선례).
 */

body,
input,
button,
select,
textarea {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif !important;
}

[hidden] { display: none !important; }

/*
 * 공용이 body와 div/p/span/a/b/h*에 transform: skew(-0.03deg)를 건다(선택자 특이도 0,0,1).
 * transform이 걸린 조상은 position: fixed의 기준이 되므로, 이 상태로는 #viewport(fixed)가
 * body 기준으로 잡혀 레이아웃이 통째로 어긋난다.
 * :where(.gl306)로 감싸 특이도를 0,0,1에 묶어 둔다 — 로딩 순서가 뒤라 공용은 이기고,
 * 이벤트 CSS의 클래스 규칙(0,1,0)에 걸린 애니메이션 transform은 그대로 살아남는다.
 *
 * 조상(.app.game-wrapper, .gl306)은 따로 적는다. 모바일 미디어쿼리의 skew(0)도 (0이지만)
 * 컨테이닝 블록을 만들기 때문에, 빼먹으면 #viewport의 height:100%가 0으로 잡혀 화면이 통째로 사라진다.
 */
body,
.app.game-wrapper,
.gl306,
:where(.gl306) div,
:where(.gl306) a,
:where(.gl306) p,
:where(.gl306) span,
:where(.gl306) b,
:where(.gl306) h1,
:where(.gl306) h2,
:where(.gl306) h3,
:where(.gl306) h4,
:where(.gl306) h5 {
  transform: none;
}

.app.game-wrapper {
  overflow: hidden;
}

/* 공용이 body(font-size:16px; line-height:1.5em)와 .game-wrapper(font-size:1.05rem; line-height:1.2rem;
   letter-spacing:-1px)에 타이포를 박아 둔다. MVP는 전부 브라우저 기본값 위에서 그려졌으므로
   래퍼에서 한 번 되돌린다 — 안 되돌리면 줄높이가 달라져 캡션·말풍선이 몇 px씩 밀린다. */
.gl306 {
  font-size: 16px;
  line-height: normal;
  letter-spacing: normal;
}
/* 공용은 line-height를 상속이 아니라 `* { line-height: 1.5 }`로 모든 요소에 직접 박는다.
   그래서 .bubble-text(1.4) 같은 규칙이 자식에게 내려가지 않는다 — 상속으로 되돌린다.
   :where()로 특이도를 0,0,0에 묶어 `*`와 동률로 두고, 로딩 순서가 뒤라 이긴다.
   자기 line-height를 가진 요소는 특이도가 높아 그대로 살아남는다. */
:where(.gl306) * { line-height: inherit; }

.gl306 img {
  -webkit-touch-callout: default !important;
}