@charset "UTF-8";
/* flex containers에 적용 */
/* flex items에 적용 */
/** 사용 예시
 	// 속성, 값, 최소값(기본값 0; 생략가능)
	* @include vw-convert-pc(margin, (20, auto, 40, auto), 10)
	* @include vw-convert-pc(width, 1200);
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
table,
th,
td,
form,
fieldset,
legend,
textarea,
input,
select,
textarea,
button,
article,
aside,
dialog,
footer,
header,
section,
footer,
nav,
figure,
main {
  margin: 0;
  padding: 0;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

article,
aside,
dialog,
footer,
header,
section,
footer,
nav,
figure,
main {
  display: block;
}

html,
body {
  height: 100%;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

img,
form,
fieldset,
li {
  border: 0;
  vertical-align: top;
}

ul,
ol {
  list-style: none;
}

button {
  overflow: visible;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

button::-moz-focus-inner {
  padding: 0;
  margin: -1px;
}

input,
button,
select {
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

address,
caption,
em {
  font-style: normal;
}

a,
a:focus,
a:active,
a:hover {
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body,
input,
select,
textarea,
button {
  font-family: "pretendard", sans-serif;
}

.blind,
caption span,
legend {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
}

.skip {
  height: 0;
}

.skip a {
  display: block;
  position: absolute;
  left: 0;
  top: -100px;
  width: 100%;
  height: 25px;
  text-align: center;
}

.skip a:focus,
#skip a:active {
  position: absolute;
  top: 0;
  z-index: 100;
  padding: 10px 0;
  background: #000;
  font-weight: bold;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}

.animate {
  opacity: 0.0001;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
  transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
  -webkit-transition-delay: calc(var(--i) * 0.15s);
  transition-delay: calc(var(--i) * 0.15s);
}
.animate.is_show {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.animate_zoom {
  opacity: 0;
}
.animate_zoom.is_show {
  -webkit-animation: zoom-fade 0.5s calc(var(--i) * 0.2s) forwards cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: zoom-fade 0.5s calc(var(--i) * 0.2s) forwards cubic-bezier(0.22, 0.61, 0.36, 1);
}

@-webkit-keyframes zoom-fade {
  from {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoom-fade {
  from {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.riotbar-footer-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.riotbar-legal-links {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
  background: #292929;
}

.semibold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0.0001;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0.0001;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes bouncing {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    -ms-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes bouncing {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    -ms-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@-webkit-keyframes slideLeft {
  100% {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 1;
  }
}
@keyframes slideLeft {
  100% {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 1;
  }
}
@-webkit-keyframes slideRight {
  100% {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 1;
  }
}
@keyframes slideRight {
  100% {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 1;
  }
}
@keyframes zoom-fade {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.is_lock {
  overflow: hidden;
  position: fixed !important;
  left: 0;
  width: 100%;
  overscroll-behavior-y: none;
}

/* riotbar 헤더 고정 해제 — 콘텐츠와 함께 스크롤되도록 */
.riotbar-header-wrapper {
  position: absolute !important;
}

.is_lock .riotbar-header-wrapper {
  z-index: 0;
}

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  src: url(/asiangames2026/font/Pretendard-Regular-37eb08321a72dcebeb5cff304ad3967b.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  src: url(/asiangames2026/font/Pretendard-Medium-7bab4a8a2580411ea263b78fb93436fa.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  src: url(/asiangames2026/font/Pretendard-SemiBold-461720124becc9594739cd6750835c38.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  src: url(/asiangames2026/font/Pretendard-Bold-9c1a831be7b4b65bf2093a33a3e2e05a.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  src: url(/asiangames2026/font/Pretendard-ExtraBold-89373147524ab520e26ea0e58bb632c5.woff) format("woff");
}
/* flex containers에 적용 */
/* flex items에 적용 */
/** 사용 예시
 	// 속성, 값, 최소값(기본값 0; 생략가능)
	* @include vw-convert-pc(margin, (20, auto, 40, auto), 10)
	* @include vw-convert-pc(width, 1200);
*/
.svg-sample {
  display: inline-block;
}
.svg-sample-01 {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill='%23cecece' viewBox='0 0 24 19.5'%3E%3Cpath d='M24 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2C19.3.6 18 0 16.6 0c-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1C7.7 5.8 4.1 3.9 1.7.9c-.5.7-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8-.1-1.6-.3-2.2-.6V7c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  vertical-align: middle;
}
.svg-sample-01:hover {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill='orange' viewBox='0 0 24 19.5'%3E%3Cpath d='M24 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2C19.3.6 18 0 16.6 0c-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1C7.7 5.8 4.1 3.9 1.7.9c-.5.7-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8-.1-1.6-.3-2.2-.6V7c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.svg-sample-02 {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill='red' viewBox='0 0 13 13'%3E%3Cpath d='M11 11H2V2h4V0H0v13h13V7h-2z'/%3E%3Cpath d='M10.5 0H8v2h1.1L4.5 6.9l1.6 1.5L11 3.9V5h2V0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  vertical-align: middle;
}
.svg-sample-02:hover {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill='coral' viewBox='0 0 13 13'%3E%3Cpath d='M11 11H2V2h4V0H0v13h13V7h-2z'/%3E%3Cpath d='M10.5 0H8v2h1.1L4.5 6.9l1.6 1.5L11 3.9V5h2V0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.svg-sample-03 {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill='orange' viewBox='0 0 85.8 60'%3E%3Cpath d='M84 9.4c-1-3.7-3.9-6.6-7.6-7.6C69.7 0 42.9 0 42.9 0S16.1 0 9.4 1.8c-3.7 1-6.6 3.9-7.6 7.6C0 16.1 0 30 0 30s0 13.9 1.8 20.6c1 3.7 3.9 6.6 7.6 7.6C16.1 60 42.9 60 42.9 60s26.8 0 33.5-1.8c3.7-1 6.6-3.9 7.6-7.6 1.8-6.7 1.8-20.6 1.8-20.6s0-13.9-1.8-20.6M34.3 42.9V17.1L56.6 30z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  vertical-align: middle;
}
.svg-sample-03:hover {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill='%2300f' viewBox='0 0 85.8 60'%3E%3Cpath d='M84 9.4c-1-3.7-3.9-6.6-7.6-7.6C69.7 0 42.9 0 42.9 0S16.1 0 9.4 1.8c-3.7 1-6.6 3.9-7.6 7.6C0 16.1 0 30 0 30s0 13.9 1.8 20.6c1 3.7 3.9 6.6 7.6 7.6C16.1 60 42.9 60 42.9 60s26.8 0 33.5-1.8c3.7-1 6.6-3.9 7.6-7.6 1.8-6.7 1.8-20.6 1.8-20.6s0-13.9-1.8-20.6M34.3 42.9V17.1L56.6 30z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

/* =========================================================
 * 01_main — EVENT 1. 게임 플레이 이벤트
 * 디자인 기준 폭 2560 (vw-convert / vw-size-txt)
 * ========================================================= */
/* ---------------------------------------------------------
 * KV
 * --------------------------------------------------------- */
.section-visual {
  position: relative;
  overflow: hidden;
  height: 1000px;
  height: calc(39.0625 * 1vw);
  /* WARRIORS 로고는 KV 배경 이미지(bg_visual.jpg)에 포함되어 있다.
   * 시안이 로고를 배경에 합성해 내려주므로 별도 이미지로 분리하지 않고,
   * h1 은 .blind 텍스트로만 의미를 전달한다. */
  /* bouncing 의 translateY 가 set-center-x 의 translateX(-50%) 를 덮어쓴다 (animation.md §transform 충돌).
   * transform 을 쓰지 않고 left 로 직접 배치해 애니메이션 유무와 무관하게 좌표를 고정한다. */
}
@media (min-width: 2560px) {
  .section-visual {
    height: 1000px;
  }
}
.section-visual__bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.section-visual__bg img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-visual__inner {
  position: relative;
  z-index: 1;
  height: 100%;
}
.section-visual__title {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 684px;
  top: calc(26.71875 * 1vw);
}
@media (min-width: 2560px) {
  .section-visual__title {
    top: 684px;
  }
}
.section-visual__title img {
  display: block;
  width: 670px;
  width: calc(26.171875 * 1vw);
  height: 52px;
  height: calc(2.03125 * 1vw);
}
@media (min-width: 2560px) {
  .section-visual__title img {
    width: 670px;
  }
}
@media (min-width: 2560px) {
  .section-visual__title img {
    height: 52px;
  }
}
.section-visual__btn-wrap {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 786px;
  top: calc(30.703125 * 1vw);
  width: 388px;
  width: calc(15.15625 * 1vw);
  height: 80px;
  height: calc(3.125 * 1vw);
}
@media (min-width: 2560px) {
  .section-visual__btn-wrap {
    top: 786px;
  }
}
@media (min-width: 2560px) {
  .section-visual__btn-wrap {
    width: 388px;
  }
}
@media (min-width: 2560px) {
  .section-visual__btn-wrap {
    height: 80px;
  }
}
.section-visual__arrow {
  position: absolute;
  top: 941px;
  top: calc(36.7578125 * 1vw);
  left: 1265px;
  left: calc(49.4140625 * 1vw);
  width: 30px;
  width: calc(1.171875 * 1vw);
  height: 18px;
  height: calc(0.703125 * 1vw);
  background: url(/asiangames2026/img/main/ico_arrow-984567b621b7bcc5f20e25f33c33f8eb.svg) no-repeat center/contain;
  -webkit-animation: bouncing 0.6s ease-in-out infinite alternate;
  animation: bouncing 0.6s ease-in-out infinite alternate;
}
@media (min-width: 2560px) {
  .section-visual__arrow {
    top: 941px;
  }
}
@media (min-width: 2560px) {
  .section-visual__arrow {
    left: 1265px;
  }
}
@media (min-width: 2560px) {
  .section-visual__arrow {
    width: 30px;
  }
}
@media (min-width: 2560px) {
  .section-visual__arrow {
    height: 18px;
  }
}

/* ---------------------------------------------------------
 * Button — 나의 참여 내역 보기
 * 텍스트 포함 통 이미지(background-image) + .blind 문구
 * --------------------------------------------------------- */
.btn-history {
  display: block;
  width: 100%;
  height: 100%;
  background: url(/asiangames2026/img/main/btn_history-ed1b7b423669c691dbc08892eebad328.png) no-repeat center/contain;
}
.btn-history:hover, .btn-history:focus-visible {
  background-image: url(/asiangames2026/img/main/btn_history_hover-2116bb8edd4226eee1deca1554b1fd05.png);
}

/* ---------------------------------------------------------
 * EVENT 1 — 게임 플레이 이벤트
 * --------------------------------------------------------- */
/* overflow: hidden 을 섹션이 아니라 __bg / __inner 로 내렸다.
 * 섹션에 걸려 있으면 섹션이 스크롤 컨테이너가 되어 선수 이미지의 position: sticky 가 죽는다.
 * 두 자식 박스가 섹션과 같은 크기라 잘리는 범위는 이전과 동일하다. */
.section-event1 {
  position: relative;
  height: 3112px;
  height: calc(121.5625 * 1vw);
  /* 좌·우 선수 이미지 — 섹션을 보는 동안 화면 바닥(100vh)에 붙어 함께 스크롤되고,
   * 섹션이 끝나면 시안 위치(섹션 바닥)에 안착해 섹션과 함께 위로 밀려 올라간다.
   *
   *   __players        : 섹션 전체를 덮는 sticky 기준 박스(containing block)
   *   __players-sticky : 실제 sticky 요소. justify-content: flex-end 로 자연 위치를
   *                      섹션 바닥(2217~3112 = 시안 좌표)에 두면, sticky bottom: 0 이
   *                      그 위치에서 뷰포트 바닥까지 끌어올려 준다.
   *                      섹션 진입 중에는 기준 박스 위로는 못 올라가 자연스럽게 밀려 들어온다.
   *
   * z-index 를 주지 않아야 __inner(z-index: 1) 아래, __bg 위 순서가 유지된다. */
}
@media (min-width: 2560px) {
  .section-event1 {
    height: 3112px;
  }
}
.section-event1__bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;
}
.section-event1__bg img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-event1__players {
  position: absolute;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%;
  /* 섹션 상단 50vh 를 sticky 범위에서 뺀다 = 선수가 노출되기 시작하는 지점.
   * 기준 박스가 섹션 전체이면 섹션이 화면에 걸치기 시작할 때 선수가 '섹션 top' 에 붙어
   * 탭 옆으로 머리부터 튀어나온다. 상단을 덜어내면 아래에서 밀려 올라오는 모양이 되고,
   * 덜어내는 값이 작을수록 더 일찍(위에서) 노출된다.
   * 세로로 긴 창(섹션 높이 - 50vh < 선수 높이)에서는 최소값으로 떨어져
   * sticky 이동 범위가 0 이 되고 선수는 시안 위치(섹션 바닥)에 그대로 고정된다.
   * vw-convert 를 쓰면 max() 안에 넣을 수 없어 895 를 직접 환산했다 (895/2560*100). */
  height: max(895px, 100% - 50vh);
  height: max(34.9609375vw, 100% - 50vh);
  pointer-events: none;
}
@media (min-width: 2560px) {
  .section-event1__players {
    height: max(895px, 100% - 50vh);
  }
}
.section-event1__players-sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 895px;
  height: calc(34.9609375 * 1vw);
}
@media (min-width: 2560px) {
  .section-event1__players-sticky {
    height: 895px;
  }
}
.section-event1__player {
  position: absolute;
  bottom: 0;
}
.section-event1__player img {
  display: block;
  width: 100%;
  height: 100%;
}
.section-event1__player--l {
  left: 42px;
  left: calc(1.640625 * 1vw);
  width: 426px;
  width: calc(16.640625 * 1vw);
  height: 895px;
  height: calc(34.9609375 * 1vw);
}
@media (min-width: 2560px) {
  .section-event1__player--l {
    left: 42px;
  }
}
@media (min-width: 2560px) {
  .section-event1__player--l {
    width: 426px;
  }
}
@media (min-width: 2560px) {
  .section-event1__player--l {
    height: 895px;
  }
}
.section-event1__player--r {
  right: 0;
  width: 484px;
  width: calc(18.90625 * 1vw);
  height: 895px;
  height: calc(34.9609375 * 1vw);
}
@media (min-width: 2560px) {
  .section-event1__player--r {
    width: 484px;
  }
}
@media (min-width: 2560px) {
  .section-event1__player--r {
    height: 895px;
  }
}
.section-event1__player-logo {
  position: absolute;
  top: 716px;
  top: calc(27.96875 * 1vw);
  left: 173px;
  left: calc(6.7578125 * 1vw);
  width: 248px;
  width: calc(9.6875 * 1vw);
  height: 143px;
  height: calc(5.5859375 * 1vw);
}
@media (min-width: 2560px) {
  .section-event1__player-logo {
    top: 716px;
  }
}
@media (min-width: 2560px) {
  .section-event1__player-logo {
    left: 173px;
  }
}
@media (min-width: 2560px) {
  .section-event1__player-logo {
    width: 248px;
  }
}
@media (min-width: 2560px) {
  .section-event1__player-logo {
    height: 143px;
  }
}
.section-event1__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow: hidden;
}
.section-event1__title {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 429px;
  top: calc(16.7578125 * 1vw);
}
@media (min-width: 2560px) {
  .section-event1__title {
    top: 429px;
  }
}
.section-event1__title img {
  display: block;
  width: 1240px;
  width: calc(48.4375 * 1vw);
  height: 68px;
  height: calc(2.65625 * 1vw);
}
@media (min-width: 2560px) {
  .section-event1__title img {
    width: 1240px;
  }
}
@media (min-width: 2560px) {
  .section-event1__title img {
    height: 68px;
  }
}
.section-event1__desc {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 531px;
  top: calc(20.7421875 * 1vw);
  width: 100%;
  text-align: center;
  font-weight: 600;
  color: #b6b6b6;
  letter-spacing: 0.02em;
  font-size: 24px;
  font-size: 0.9375vw;
  line-height: 34px;
  line-height: 1.328125vw;
}
@media (min-width: 2560px) {
  .section-event1__desc {
    top: 531px;
  }
}
@media (min-width: 2560px) {
  .section-event1__desc {
    font-size: 24px;
    line-height: 34px;
  }
}
.section-event1__day {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 659px;
  top: calc(25.7421875 * 1vw);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 714px;
  width: calc(27.890625 * 1vw);
  height: 62px;
  height: calc(2.421875 * 1vw);
  padding-top: 4px;
  padding-top: calc(0.15625 * 1vw);
  background: url(/asiangames2026/img/main/bg_day-f00734ce1d52ba6e3e53c2a11dd582c4.png) no-repeat center/100% 100%;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.02em;
  font-size: 20px;
  font-size: 0.78125vw;
  line-height: 28px;
  line-height: 1.09375vw;
}
@media (min-width: 2560px) {
  .section-event1__day {
    top: 659px;
  }
}
@media (min-width: 2560px) {
  .section-event1__day {
    width: 714px;
  }
}
@media (min-width: 2560px) {
  .section-event1__day {
    height: 62px;
  }
}
@media (min-width: 2560px) {
  .section-event1__day {
    padding-top: 4px;
  }
}
@media (min-width: 2560px) {
  .section-event1__day {
    font-size: 20px;
    line-height: 28px;
  }
}

/* 상단 반복 텍스트 띠 (마퀴)
 *
 * iOS Safari 에서 띠 중간이 잘려 배경이 비치던 문제 대응.
 *  1) 타일 두 장을 각각 애니메이션하면(::before / ::after 에 animation) 두 합성 레이어가
 *     따로 굴러가면서 이음매가 벌어져 띠 중간에 빈 구간이 생긴다.
 *     → 두 장을 감싼 __track 하나만 움직인다(레이어 1개 = 어긋날 수 없음).
 *     이동량은 -50% — 트랙 폭이 타일 2장이므로 정확히 한 장만큼 밀린다.
 *     px 고정 구간(2560 이상)에서도 트랙 폭 기준이라 그대로 맞는다.
 *  2) background-size 의 auto 제거 — iOS 는 SVG 의 intrinsic 크기 계산이 어긋나는 경우가
 *     있어 타일 폭이 엉뚱하게 잡힌다. 시안값(4193×63)을 직접 지정한다.
 *  3) 띠 바탕을 검정으로 깔아 둔다 — 서브픽셀 이음매나 리페인트 지연이 생겨도
 *     섹션 배경이 비치지 않고 띠 색(검정) 그대로 보인다. */
.marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 63px;
  height: calc(2.4609375 * 1vw);
  overflow: hidden;
  background-color: #000;
}
@media (min-width: 2560px) {
  .marquee {
    height: 63px;
  }
}
.marquee__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  -webkit-animation: marquee 49s linear infinite;
  animation: marquee 49s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* 타일 한 장 = 시안 폭(4193) */
}
.marquee__track::before, .marquee__track::after {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 4193px;
  width: calc(163.7890625 * 1vw);
  height: 100%;
  background-image: url(/asiangames2026/img/main/bg_marquee-8742bd0c893b316adb376d43b26f5934.svg);
  background-repeat: repeat-x;
  background-position: left center;
  -webkit-background-size: 4193px 63px;
  background-size: 4193px 63px;
  -webkit-background-size: calc(163.7890625 * 1vw) calc(2.4609375 * 1vw);
  background-size: calc(163.7890625 * 1vw) calc(2.4609375 * 1vw);
  content: "";
}
@media (min-width: 2560px) {
  .marquee__track::before, .marquee__track::after {
    width: 4193px;
  }
}
@media (min-width: 2560px) {
  .marquee__track::before, .marquee__track::after {
    -webkit-background-size: 4193px 63px;
    background-size: 4193px 63px;
  }
}

@-webkit-keyframes marquee {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes marquee {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}
/* ---------------------------------------------------------
 * Tab — EVENT 1 / EVENT 2
 * 텍스트 포함 통 이미지 + .blind 문구
 * --------------------------------------------------------- */
.tab-event {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 163px;
  top: calc(6.3671875 * 1vw);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 1400px;
  width: calc(54.6875 * 1vw);
  height: 100px;
  height: calc(3.90625 * 1vw);
  z-index: 2;
  background: url(/asiangames2026/img/main/tab_event1-ffd23b9f0390b0fa67f53e9901887168.png) no-repeat center/100% 100%;
  /* EVENT 2 활성 시 배경 교체 — 개발 연동 시 클래스 토글 */
}
@media (min-width: 2560px) {
  .tab-event {
    top: 163px;
  }
}
@media (min-width: 2560px) {
  .tab-event {
    width: 1400px;
  }
}
@media (min-width: 2560px) {
  .tab-event {
    height: 100px;
  }
}
.tab-event__item {
  display: block;
  width: 694px;
  width: calc(27.109375 * 1vw);
  height: 100%;
}
@media (min-width: 2560px) {
  .tab-event__item {
    width: 694px;
  }
}
.tab-event__item--2 {
  margin-left: auto;
}
.tab-event.is-event2 {
  background-image: url(/asiangames2026/img/main/tab_event2-031d46074b2337251377f771ae766e46.png);
}

/* ---------------------------------------------------------
 * Mission — MAIN / DAILY 공통
 * --------------------------------------------------------- */
.box-mission {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.box-mission__copy {
  margin: 0 auto;
  margin-bottom: 60px;
  margin-bottom: calc(2.34375 * 1vw);
}
@media (min-width: 2560px) {
  .box-mission__copy {
    margin-bottom: 60px;
  }
}
.box-mission__copy img {
  display: block;
  margin: 0 auto;
  height: 42px;
  height: calc(1.640625 * 1vw);
  width: auto;
}
@media (min-width: 2560px) {
  .box-mission__copy img {
    height: 42px;
  }
}
.box-mission__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 1399px;
  width: calc(54.6484375 * 1vw);
  gap: 30px 21px;
  gap: calc(1.171875 * 1vw) calc(0.8203125 * 1vw);
}
@media (min-width: 2560px) {
  .box-mission__list {
    width: 1399px;
  }
}
@media (min-width: 2560px) {
  .box-mission__list {
    gap: 30px 21px;
  }
}
.box-mission--main {
  top: 841px;
  top: calc(32.8515625 * 1vw);
}
@media (min-width: 2560px) {
  .box-mission--main {
    top: 841px;
  }
}
.box-mission--daily {
  top: 1592px;
  top: calc(62.1875 * 1vw);
}
@media (min-width: 2560px) {
  .box-mission--daily {
    top: 1592px;
  }
}

/* 미션 카드 */
.item-mission {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 334px;
  width: calc(13.046875 * 1vw);
  height: 509px;
  height: calc(19.8828125 * 1vw);
  background: url(/asiangames2026/img/main/card_base_main-464d668183454ccbb5dd5edd0346754b.png) no-repeat center/100% 100%;
  text-align: center;
  /* 오픈 예정 안내 — is-locked 에서만 노출 */
  /* --- 상태: 미션 달성 완료 --- */
  /* --- 상태: 보상 획득 완료 / 미션 종료 / 오픈 예정 --- */
}
@media (min-width: 2560px) {
  .item-mission {
    width: 334px;
  }
}
@media (min-width: 2560px) {
  .item-mission {
    height: 509px;
  }
}
.box-mission--daily .item-mission {
  background-image: url(/asiangames2026/img/main/card_base_daily-e4f6d05c9925e45c84c16c1233b236c4.png);
}
.item-mission__cond {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 85px;
  top: calc(3.3203125 * 1vw);
  width: 280px;
  width: calc(10.9375 * 1vw);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.04em;
  font-size: 24px;
  font-size: 0.9375vw;
  line-height: 29px;
  line-height: 1.1328125vw;
}
@media (min-width: 2560px) {
  .item-mission__cond {
    top: 85px;
  }
}
@media (min-width: 2560px) {
  .item-mission__cond {
    width: 280px;
  }
}
@media (min-width: 2560px) {
  .item-mission__cond {
    font-size: 24px;
    line-height: 29px;
  }
}
.item-mission__cond-txt {
  display: block;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-mission__open {
  display: none;
  font-style: normal;
  color: #fff;
}
.item-mission__thumb {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 140px;
  top: calc(5.46875 * 1vw);
  width: 260px;
  width: calc(10.15625 * 1vw);
  height: 170px;
  height: calc(6.640625 * 1vw);
  overflow: hidden;
}
@media (min-width: 2560px) {
  .item-mission__thumb {
    top: 140px;
  }
}
@media (min-width: 2560px) {
  .item-mission__thumb {
    width: 260px;
  }
}
@media (min-width: 2560px) {
  .item-mission__thumb {
    height: 170px;
  }
}
.item-mission__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.item-mission__reward {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 335px;
  top: calc(13.0859375 * 1vw);
  width: 280px;
  width: calc(10.9375 * 1vw);
  font-weight: 700;
  color: #d3161a;
  font-size: 20px;
  font-size: 0.78125vw;
  line-height: 24px;
  line-height: 0.9375vw;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 2560px) {
  .item-mission__reward {
    top: 335px;
  }
}
@media (min-width: 2560px) {
  .item-mission__reward {
    width: 280px;
  }
}
@media (min-width: 2560px) {
  .item-mission__reward {
    font-size: 20px;
    line-height: 24px;
  }
}
.box-mission--daily .item-mission__reward {
  color: #0471ff;
}
.item-mission__stamp {
  display: none;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 135px;
  top: calc(5.2734375 * 1vw);
  width: 178px;
  width: calc(6.953125 * 1vw);
  height: 178px;
  height: calc(6.953125 * 1vw);
  background: no-repeat center/contain;
}
@media (min-width: 2560px) {
  .item-mission__stamp {
    top: 135px;
  }
}
@media (min-width: 2560px) {
  .item-mission__stamp {
    width: 178px;
  }
}
@media (min-width: 2560px) {
  .item-mission__stamp {
    height: 178px;
  }
}
.item-mission.is-completed .item-mission__stamp {
  display: block;
  background-image: url(/asiangames2026/img/main/stamp_done_red-2a0b35c90116194bdb16fdee4b0d20e8.png);
}
.item-mission.is-completed .btn-reward {
  background-image: url(/asiangames2026/img/main/btn_reward_red-0b49e26ddb3661fb824913888467e9d2.png);
}
.item-mission.is-completed .btn-reward:hover, .item-mission.is-completed .btn-reward:focus-visible {
  background-image: url(/asiangames2026/img/main/btn_reward_red_hover-0260ae777ecfb8732ff2771276192065.png);
}
.box-mission--daily .item-mission.is-completed .item-mission__stamp {
  background-image: url(/asiangames2026/img/main/stamp_done_blue-26bb2a821596c0471ca70fc0a85ae8fe.png);
}
.box-mission--daily .item-mission.is-completed .btn-reward {
  background-image: url(/asiangames2026/img/main/btn_reward_blue-c67ff4799c9ed9c698974faecc4a5646.png);
}
.box-mission--daily .item-mission.is-completed .btn-reward:hover, .box-mission--daily .item-mission.is-completed .btn-reward:focus-visible {
  background-image: url(/asiangames2026/img/main/btn_reward_blue_hover-0b82c4c2dc309b7a439c2fd417640bac.png);
}
.item-mission.is-received, .item-mission.is-ended, .item-mission.is-locked {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
.item-mission.is-received .item-mission__thumb, .item-mission.is-ended .item-mission__thumb, .item-mission.is-locked .item-mission__thumb {
  opacity: 0.5;
}
.item-mission.is-received .item-mission__cond,
.item-mission.is-received .item-mission__reward, .item-mission.is-ended .item-mission__cond,
.item-mission.is-ended .item-mission__reward, .item-mission.is-locked .item-mission__cond,
.item-mission.is-locked .item-mission__reward {
  color: #6a6a6a;
}
.item-mission.is-received .btn-reward, .item-mission.is-ended .btn-reward, .item-mission.is-locked .btn-reward {
  pointer-events: none;
}
.item-mission.is-received .item-mission__stamp {
  display: block;
  background-image: url(/asiangames2026/img/main/stamp_received-7a0c7f37c2f2785ee9566de3e3893549.png);
}
.item-mission.is-ended .item-mission__stamp {
  display: block;
  background-image: url(/asiangames2026/img/main/stamp_ended-9b34b37cd14e4af76c69664419144826.png);
}
.item-mission.is-locked .item-mission__cond-txt {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-mission.is-locked .item-mission__open {
  display: block;
}

/* 보상 받기 버튼 — 텍스트 포함 통 이미지 */
.btn-reward {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 399px;
  top: calc(15.5859375 * 1vw);
  width: 266px;
  width: calc(10.390625 * 1vw);
  height: 55px;
  height: calc(2.1484375 * 1vw);
  border: 0;
  background: url(/asiangames2026/img/main/btn_reward_disabled-f27a37030af208f99220fd3322230812.png) no-repeat center/100% 100%;
  cursor: pointer;
}
@media (min-width: 2560px) {
  .btn-reward {
    top: 399px;
  }
}
@media (min-width: 2560px) {
  .btn-reward {
    width: 266px;
  }
}
@media (min-width: 2560px) {
  .btn-reward {
    height: 55px;
  }
}

/* ---------------------------------------------------------
 * 유의사항
 * --------------------------------------------------------- */
.box-notice {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 2832px;
  top: calc(110.625 * 1vw);
  width: 1399px;
  width: calc(54.6484375 * 1vw);
}
@media (min-width: 2560px) {
  .box-notice {
    top: 2832px;
  }
}
@media (min-width: 2560px) {
  .box-notice {
    width: 1399px;
  }
}

.notice-item {
  color: #606060;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-size: 18px;
  font-size: 0.703125vw;
  line-height: 25px;
  line-height: 0.9765625vw;
}
@media (min-width: 2560px) {
  .notice-item {
    font-size: 18px;
    line-height: 25px;
  }
}

/* ---------------------------------------------------------
 * RP 충전 보너스 — EVENT 1 · EVENT 2 공통 (명세 #5 B7)
 * --------------------------------------------------------- */
.section-rp {
  position: relative;
  overflow: hidden;
  height: 1756px;
  height: calc(68.59375 * 1vw);
}
@media (min-width: 2560px) {
  .section-rp {
    height: 1756px;
  }
}
.section-rp__bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.section-rp__bg img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-rp__inner {
  position: relative;
  z-index: 1;
  height: 100%;
}
.section-rp__eyebrow {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 229px;
  top: calc(8.9453125 * 1vw);
}
@media (min-width: 2560px) {
  .section-rp__eyebrow {
    top: 229px;
  }
}
.section-rp__eyebrow img {
  display: block;
  width: 444px;
  width: calc(17.34375 * 1vw);
  height: auto;
}
@media (min-width: 2560px) {
  .section-rp__eyebrow img {
    width: 444px;
  }
}
.section-rp__title {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 309px;
  top: calc(12.0703125 * 1vw);
}
@media (min-width: 2560px) {
  .section-rp__title {
    top: 309px;
  }
}
.section-rp__title img {
  display: block;
  width: 959px;
  width: calc(37.4609375 * 1vw);
  height: auto;
}
@media (min-width: 2560px) {
  .section-rp__title img {
    width: 959px;
  }
}
.section-rp__desc {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 499px;
  top: calc(19.4921875 * 1vw);
  width: 100%;
  text-align: center;
  font-weight: 600;
  color: #f2f2f2;
  letter-spacing: 0.02em;
  font-size: 24px;
  font-size: 0.9375vw;
  line-height: 34px;
  line-height: 1.328125vw;
}
@media (min-width: 2560px) {
  .section-rp__desc {
    top: 499px;
  }
}
@media (min-width: 2560px) {
  .section-rp__desc {
    font-size: 24px;
    line-height: 34px;
  }
}
.section-rp__day {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 627px;
  top: calc(24.4921875 * 1vw);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 714px;
  width: calc(27.890625 * 1vw);
  height: 62px;
  height: calc(2.421875 * 1vw);
  padding-top: 4px;
  padding-top: calc(0.15625 * 1vw);
  background: url(/asiangames2026/img/main/bg_day2-31657a7315968406f51440e811ddaa93.png) no-repeat center/100% 100%;
  font-weight: 700;
  color: #401111;
  letter-spacing: 0.02em;
  font-size: 20px;
  font-size: 0.78125vw;
  line-height: 28px;
  line-height: 1.09375vw;
}
@media (min-width: 2560px) {
  .section-rp__day {
    top: 627px;
  }
}
@media (min-width: 2560px) {
  .section-rp__day {
    width: 714px;
  }
}
@media (min-width: 2560px) {
  .section-rp__day {
    height: 62px;
  }
}
@media (min-width: 2560px) {
  .section-rp__day {
    padding-top: 4px;
  }
}
@media (min-width: 2560px) {
  .section-rp__day {
    font-size: 20px;
    line-height: 28px;
  }
}
.section-rp__img {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 761px;
  top: calc(29.7265625 * 1vw);
  width: 1200px;
  width: calc(46.875 * 1vw);
  height: 675px;
  height: calc(26.3671875 * 1vw);
}
@media (min-width: 2560px) {
  .section-rp__img {
    top: 761px;
  }
}
@media (min-width: 2560px) {
  .section-rp__img {
    width: 1200px;
  }
}
@media (min-width: 2560px) {
  .section-rp__img {
    height: 675px;
  }
}
.section-rp__img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-rp__btn-wrap {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 1496px;
  top: calc(58.4375 * 1vw);
  width: 388px;
  width: calc(15.15625 * 1vw);
  height: 80px;
  height: calc(3.125 * 1vw);
}
@media (min-width: 2560px) {
  .section-rp__btn-wrap {
    top: 1496px;
  }
}
@media (min-width: 2560px) {
  .section-rp__btn-wrap {
    width: 388px;
  }
}
@media (min-width: 2560px) {
  .section-rp__btn-wrap {
    height: 80px;
  }
}

/* RP 이미지 슬라이더 — 무한 루프 + 자동 롤링 (Swiper 4.5.1) */
.rp-slider__viewport {
  width: 100%;
  height: 100%;
}
.rp-slider .swiper-slide {
  width: 100%;
  height: 100%;
}
.rp-slider__nav {
  position: absolute;
  z-index: 2;
  top: 304px;
  top: calc(11.875 * 1vw);
  width: 31px;
  width: calc(1.2109375 * 1vw);
  height: 67px;
  height: calc(2.6171875 * 1vw);
  border: 0;
  background: url(/asiangames2026/img/main/ico_match_arrow-6bf6ef8265e34b8ea914d5fbbcb9cf28.svg) no-repeat center/100% 100%;
  cursor: pointer;
}
@media (min-width: 2560px) {
  .rp-slider__nav {
    top: 304px;
  }
}
@media (min-width: 2560px) {
  .rp-slider__nav {
    width: 31px;
  }
}
@media (min-width: 2560px) {
  .rp-slider__nav {
    height: 67px;
  }
}
.rp-slider__nav--prev {
  left: -71px;
  left: calc(-2.7734375 * 1vw);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
@media (min-width: 2560px) {
  .rp-slider__nav--prev {
    left: -71px;
  }
}
.rp-slider__nav--next {
  right: -71px;
  right: calc(-2.7734375 * 1vw);
}
@media (min-width: 2560px) {
  .rp-slider__nav--next {
    right: -71px;
  }
}

/* RP 충전하기 버튼 — 텍스트 포함 통 이미지 */
.btn-rp {
  display: block;
  width: 100%;
  height: 100%;
  background: url(/asiangames2026/img/main/btn_rp-b0c9991971ffc954ec6408162a601a95.png) no-repeat center/contain;
}
.btn-rp:hover, .btn-rp:focus-visible {
  background-image: url(/asiangames2026/img/main/btn_rp_hover-189efc1813f56651e336abf0071529db.png);
}

/* ---------------------------------------------------------
 * Notice — 이벤트 약관 아코디언
 * --------------------------------------------------------- */
.notice {
  background: #000;
}
.notice__toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 91px;
  height: calc(3.5546875 * 1vw);
  gap: 20px;
  gap: calc(0.78125 * 1vw);
  border: 0;
  border-bottom: 3px solid #343434;
  background: #000;
  cursor: pointer;
}
@media (min-width: 2560px) {
  .notice__toggle {
    height: 91px;
  }
}
@media (min-width: 2560px) {
  .notice__toggle {
    gap: 20px;
  }
}
.notice__toggle[aria-expanded=true] .notice__icon {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.notice__title {
  font-weight: 700;
  color: #fff;
  font-size: 28px;
  font-size: 1.09375vw;
  line-height: 38px;
  line-height: 1.484375vw;
}
@media (min-width: 2560px) {
  .notice__title {
    font-size: 28px;
    line-height: 38px;
  }
}
.notice__icon {
  width: 35px;
  width: calc(1.3671875 * 1vw);
  height: 23px;
  height: calc(0.8984375 * 1vw);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media (min-width: 2560px) {
  .notice__icon {
    width: 35px;
  }
}
@media (min-width: 2560px) {
  .notice__icon {
    height: 23px;
  }
}
.notice__content {
  background: #242424;
}
.notice__content[hidden] {
  display: none;
}

/* ---------------------------------------------------------
 * 포커스 표시 — 키보드 접근 시 위치를 잃지 않도록
 * --------------------------------------------------------- */
.btn-history:focus-visible,
.btn-rp:focus-visible,
.btn-reward:focus-visible,
.btn-cheer:focus-visible,
.btn-pick:focus-visible,
.btn-watch:focus-visible,
.tab-event__item:focus-visible,
.tab-match__item:focus-visible,
.match-slider__nav:focus-visible,
.rp-slider__nav:focus-visible,
.card-match__team:focus-visible,
.notice__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------------------------------------------------------
 * EVENT TAB — 패널 전환 (명세 #5 E1)
 * .tab-event 는 두 패널 공통이라 패널 바깥에 두고
 * 기존 좌표(top 163)를 그대로 유지한다.
 * --------------------------------------------------------- */
.event-tabs {
  position: relative;
}

/* 탭 위 반복 텍스트 띠 — 두 패널 공통이라 패널 밖에 둔다.
 * 패널 안에 두면 탭 전환 때 엘리먼트가 교체돼 마퀴 애니메이션이 리셋된다. */
.marquee--tabs {
  z-index: 1;
}

.tab-panel[hidden] {
  display: none;
}

/* ---------------------------------------------------------
 * EVENT 2 - 01 응원
 * --------------------------------------------------------- */
.section-cheer {
  position: relative;
  overflow: hidden;
  height: 1579px;
  height: calc(61.6796875 * 1vw);
  /* EVENT 1 과 같은 배경 텍스처를 쓴다. 섹션 높이가 달라 늘리거나 cover 로 채우면
   * 배율이 달라져 탭 전환 때 배경이 튄다 → 원본 비율 그대로 상단부터 노출하고 넘치는 만큼 잘라낸다. */
}
@media (min-width: 2560px) {
  .section-cheer {
    height: 1579px;
  }
}
.section-cheer__bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;
}
.section-cheer__bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.section-cheer__inner {
  position: relative;
  z-index: 1;
  height: 100%;
}
.section-cheer__title {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 430px;
  top: calc(16.796875 * 1vw);
}
@media (min-width: 2560px) {
  .section-cheer__title {
    top: 430px;
  }
}
.section-cheer__title img {
  display: block;
  width: 805px;
  width: calc(31.4453125 * 1vw);
  height: 67px;
  height: calc(2.6171875 * 1vw);
}
@media (min-width: 2560px) {
  .section-cheer__title img {
    width: 805px;
  }
}
@media (min-width: 2560px) {
  .section-cheer__title img {
    height: 67px;
  }
}
.section-cheer__desc {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 531px;
  top: calc(20.7421875 * 1vw);
  width: 100%;
  text-align: center;
  font-weight: 600;
  color: #b6b6b6;
  letter-spacing: 0.02em;
  font-size: 24px;
  font-size: 0.9375vw;
  line-height: 34px;
  line-height: 1.328125vw;
}
@media (min-width: 2560px) {
  .section-cheer__desc {
    top: 531px;
  }
}
@media (min-width: 2560px) {
  .section-cheer__desc {
    font-size: 24px;
    line-height: 34px;
  }
}
.section-cheer__btn-wrap {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 1319px;
  top: calc(51.5234375 * 1vw);
  width: 388px;
  width: calc(15.15625 * 1vw);
  height: 80px;
  height: calc(3.125 * 1vw);
}
@media (min-width: 2560px) {
  .section-cheer__btn-wrap {
    top: 1319px;
  }
}
@media (min-width: 2560px) {
  .section-cheer__btn-wrap {
    width: 388px;
  }
}
@media (min-width: 2560px) {
  .section-cheer__btn-wrap {
    height: 80px;
  }
}

/* 응원 카드 3장 — 통 콘텐츠 이미지 (명세 #5 B5 : 링크 없는 안내 이미지) */
/* 시안상 이미지 1장(1400×570). 현재는 시안의 회색 자리표시자(#494949)를 그대로 반영한 상태로,
 * 실제 이미지가 나오면 img_cheer.png 만 교체하면 된다. 권장 납품 규격 2800×1140(@2x). */
.box-cheer {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 685px;
  top: calc(26.7578125 * 1vw);
  width: 1400px;
  width: calc(54.6875 * 1vw);
  height: 570px;
  height: calc(22.265625 * 1vw);
}
@media (min-width: 2560px) {
  .box-cheer {
    top: 685px;
  }
}
@media (min-width: 2560px) {
  .box-cheer {
    width: 1400px;
  }
}
@media (min-width: 2560px) {
  .box-cheer {
    height: 570px;
  }
}
.box-cheer img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* 함께 응원하기 — 텍스트 포함 통 이미지 */
.btn-cheer {
  display: block;
  width: 100%;
  height: 100%;
  background: url(/asiangames2026/img/main/btn_cheer-13985783a19afbe459e7fd1962c1c7a7.png) no-repeat center/contain;
}
.btn-cheer:hover, .btn-cheer:focus-visible {
  background-image: url(/asiangames2026/img/main/btn_cheer_hover-43966bd67a8999bc501b65e5d7a3aebe.png);
}

/* ---------------------------------------------------------
 * EVENT 2 - 02 승부 예측
 * --------------------------------------------------------- */
.section-predict {
  position: relative;
  overflow: hidden;
  height: 1787px;
  height: calc(69.8046875 * 1vw);
  /* 섹션 하단 좌·우 선수 이미지 — 배경 위 / 콘텐츠(__inner) 아래.
   * 시안상 바닥 정렬(구마유시 884 + 903 / 캐니언 894 + 893 = 섹션 높이 1787)이라
   * top 대신 bottom: 0 으로 고정한다. */
  /* 유의사항 — 파랑 배경 위라 색만 다르게 */
}
@media (min-width: 2560px) {
  .section-predict {
    height: 1787px;
  }
}
.section-predict__bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.section-predict__bg img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-predict__player {
  position: absolute;
  bottom: 0;
  pointer-events: none;
}
.section-predict__player img {
  display: block;
  width: 100%;
  height: 100%;
}
.section-predict__player--l {
  left: 0;
  width: 508px;
  width: calc(19.84375 * 1vw);
  height: 903px;
  height: calc(35.2734375 * 1vw);
}
@media (min-width: 2560px) {
  .section-predict__player--l {
    width: 508px;
  }
}
@media (min-width: 2560px) {
  .section-predict__player--l {
    height: 903px;
  }
}
.section-predict__player--r {
  right: 2px;
  right: calc(0.078125 * 1vw);
  width: 600px;
  width: calc(23.4375 * 1vw);
  height: 893px;
  height: calc(34.8828125 * 1vw);
}
@media (min-width: 2560px) {
  .section-predict__player--r {
    right: 2px;
  }
}
@media (min-width: 2560px) {
  .section-predict__player--r {
    width: 600px;
  }
}
@media (min-width: 2560px) {
  .section-predict__player--r {
    height: 893px;
  }
}
.section-predict__player-logo {
  position: absolute;
  top: 722px;
  top: calc(28.203125 * 1vw);
  left: 227px;
  left: calc(8.8671875 * 1vw);
  width: 232px;
  width: calc(9.0625 * 1vw);
  height: 127px;
  height: calc(4.9609375 * 1vw);
}
@media (min-width: 2560px) {
  .section-predict__player-logo {
    top: 722px;
  }
}
@media (min-width: 2560px) {
  .section-predict__player-logo {
    left: 227px;
  }
}
@media (min-width: 2560px) {
  .section-predict__player-logo {
    width: 232px;
  }
}
@media (min-width: 2560px) {
  .section-predict__player-logo {
    height: 127px;
  }
}
.section-predict__inner {
  position: relative;
  z-index: 1;
  height: 100%;
}
.section-predict__title {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 249px;
  top: calc(9.7265625 * 1vw);
}
@media (min-width: 2560px) {
  .section-predict__title {
    top: 249px;
  }
}
.section-predict__title img {
  display: block;
  width: 520px;
  width: calc(20.3125 * 1vw);
  height: 67px;
  height: calc(2.6171875 * 1vw);
}
@media (min-width: 2560px) {
  .section-predict__title img {
    width: 520px;
  }
}
@media (min-width: 2560px) {
  .section-predict__title img {
    height: 67px;
  }
}
.section-predict__desc {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 350px;
  top: calc(13.671875 * 1vw);
  width: 100%;
  text-align: center;
  font-weight: 600;
  color: #f2f2f2;
  letter-spacing: 0.02em;
  font-size: 24px;
  font-size: 0.9375vw;
  line-height: 34px;
  line-height: 1.328125vw;
}
@media (min-width: 2560px) {
  .section-predict__desc {
    top: 350px;
  }
}
@media (min-width: 2560px) {
  .section-predict__desc {
    font-size: 24px;
    line-height: 34px;
  }
}
.section-predict .box-notice {
  top: 1432px;
  top: calc(55.9375 * 1vw);
  width: 1399px;
  width: calc(54.6484375 * 1vw);
}
@media (min-width: 2560px) {
  .section-predict .box-notice {
    top: 1432px;
  }
}
@media (min-width: 2560px) {
  .section-predict .box-notice {
    width: 1399px;
  }
}
.section-predict .notice-item {
  font-weight: 600;
  color: #c4cafa;
}

/* 예측 성공 보상 박스 */
.box-reward {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 478px;
  top: calc(18.671875 * 1vw);
  width: 740px;
  width: calc(28.90625 * 1vw);
  height: 142px;
  height: calc(5.546875 * 1vw);
}
@media (min-width: 2560px) {
  .box-reward {
    top: 478px;
  }
}
@media (min-width: 2560px) {
  .box-reward {
    width: 740px;
  }
}
@media (min-width: 2560px) {
  .box-reward {
    height: 142px;
  }
}
.box-reward img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------
 * 경기 선택 탭 — 캐러셀 bullet 연동 (명세 #5 B2)
 * 평행사변형이 40px 씩 겹치므로 앞선 탭이 위로 올라온다
 * --------------------------------------------------------- */
/* 경기 수는 Admin 설정에 따라 가변(1~5)이므로 고정 폭 대신 겹침 flex 로 배치한다.
   폭을 내용에 맡기면 set-center-x 가 개수와 무관하게 중앙을 잡는다.
   겹침 40 = 아이템 폭 303 - 시안 배치 간격 263 (5개일 때 263*5+40 = 1355 로 기존과 동일) */
.tab-match {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 680px;
  top: calc(26.5625 * 1vw);
  height: 60px;
  height: calc(2.34375 * 1vw);
}
@media (min-width: 2560px) {
  .tab-match {
    top: 680px;
  }
}
@media (min-width: 2560px) {
  .tab-match {
    height: 60px;
  }
}
.tab-match__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 0;
  background: none;
  cursor: pointer;
  width: 303px;
  width: calc(11.8359375 * 1vw);
  height: 60px;
  height: calc(2.34375 * 1vw);
  /* 앞선 탭이 위로 겹치도록 */
}
@media (min-width: 2560px) {
  .tab-match__item {
    width: 303px;
  }
}
@media (min-width: 2560px) {
  .tab-match__item {
    height: 60px;
  }
}
.tab-match__item + .tab-match__item {
  margin-left: -40px;
  margin-left: calc(-1.5625 * 1vw);
}
@media (min-width: 2560px) {
  .tab-match__item + .tab-match__item {
    margin-left: -40px;
  }
}
.tab-match__item::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1f1f1f;
  -webkit-clip-path: polygon(16.8317% 0, 0 100%, 83.4983% 100%, 100% 0);
  clip-path: polygon(16.8317% 0, 0 100%, 83.4983% 100%, 100% 0);
  content: "";
}
.tab-match__item:nth-child(1) {
  z-index: 8;
}
.tab-match__item:nth-child(2) {
  z-index: 7;
}
.tab-match__item:nth-child(3) {
  z-index: 6;
}
.tab-match__item:nth-child(4) {
  z-index: 5;
}
.tab-match__item:nth-child(5) {
  z-index: 4;
}
.tab-match__item:nth-child(6) {
  z-index: 3;
}
.tab-match__item:nth-child(7) {
  z-index: 2;
}
.tab-match__item:nth-child(8) {
  z-index: 1;
}
.tab-match__item.is-active {
  z-index: 10;
}
.tab-match__item.is-active::before {
  background: #fff;
}
.tab-match__label {
  position: relative;
  text-align: center;
  font-weight: 700;
  color: #045cff;
  letter-spacing: 0.02em;
  max-width: 202px;
  max-width: calc(7.890625 * 1vw);
  font-size: 20px;
  font-size: 0.78125vw;
  line-height: 28px;
  line-height: 1.09375vw;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 2560px) {
  .tab-match__label {
    max-width: 202px;
  }
}
@media (min-width: 2560px) {
  .tab-match__label {
    font-size: 20px;
    line-height: 28px;
  }
}

/* ---------------------------------------------------------
 * 승부 예측 캐러셀 (명세 #5 B1 : 1경기씩 이동 · 루프/자동재생 없음)
 * --------------------------------------------------------- */
.match-slider {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 800px;
  top: calc(31.25 * 1vw);
  width: 1542px;
  width: calc(60.234375 * 1vw);
  height: 582px;
  height: calc(22.734375 * 1vw);
}
@media (min-width: 2560px) {
  .match-slider {
    top: 800px;
  }
}
@media (min-width: 2560px) {
  .match-slider {
    width: 1542px;
  }
}
@media (min-width: 2560px) {
  .match-slider {
    height: 582px;
  }
}
.match-slider__nav {
  position: absolute;
  z-index: 2;
  top: 170px;
  top: calc(6.640625 * 1vw);
  width: 31px;
  width: calc(1.2109375 * 1vw);
  height: 67px;
  height: calc(2.6171875 * 1vw);
  background: url(/asiangames2026/img/main/ico_match_arrow-6bf6ef8265e34b8ea914d5fbbcb9cf28.svg) no-repeat center/100% 100%;
}
@media (min-width: 2560px) {
  .match-slider__nav {
    top: 170px;
  }
}
@media (min-width: 2560px) {
  .match-slider__nav {
    width: 31px;
  }
}
@media (min-width: 2560px) {
  .match-slider__nav {
    height: 67px;
  }
}
.match-slider__nav--prev {
  left: 0;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.match-slider__nav--next {
  right: 0;
}
.match-slider__nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.match-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------
 * 승부 예측 카드 — 상태 10종 (명세 #5 §3-1)
 * 기본 = 1-b / is-pick-home · is-pick-away = 미선택측 회색
 * --------------------------------------------------------- */
.card-match {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 대결 영역 좌우 측면 바 8x407 */
  /* 대결 영역 — 좌 파랑 / 우 빨강 사선 분할 */
  /* W / L — 대결 영역 기준 절대 배치 */
  /* 상태 배지 314x54 */
  /* 잔여 시간 문구가 'D일 H시간 M분 후 마감'까지 길어지므로 고정 폭 SVG 배경 대신
     배경색 + clip-path 로 사다리꼴을 그려 내용에 따라 폭이 늘어나게 한다.
     시안 bg_badge_match.svg 실측 — 위 314 전폭 / 아래 좌 30.78·우 33.58 들여쓰기, fill #2C2C2C.
     사선 값은 커스텀 속성으로 vw 변환해 뷰포트에 비례시킨다 (고정 px 이면 좁은 화면에서 각도가 틀어짐). */
  /* 예측 성공 — 흰 배지 + 파랑 라벨 */
  /* 버튼 영역 */
  /* 경기 예정 일시 */
  /* LIVE 배지 — 경기 중 (2-a · 2-b) */
}
.card-match[hidden] {
  display: none;
}
.card-match::before, .card-match::after {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 8px;
  width: calc(0.3125 * 1vw);
  height: 407px;
  height: calc(15.8984375 * 1vw);
  background: #d9d9d9;
  content: "";
}
@media (min-width: 2560px) {
  .card-match::before, .card-match::after {
    width: 8px;
  }
}
@media (min-width: 2560px) {
  .card-match::before, .card-match::after {
    height: 407px;
  }
}
.card-match::before {
  left: 71px;
  left: calc(2.7734375 * 1vw);
}
@media (min-width: 2560px) {
  .card-match::before {
    left: 71px;
  }
}
.card-match::after {
  left: 1463px;
  left: calc(57.1484375 * 1vw);
}
@media (min-width: 2560px) {
  .card-match::after {
    left: 1463px;
  }
}
.card-match__board {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 407px;
  height: calc(15.8984375 * 1vw);
  /* 좌/우 패널 + 측면 바 */
}
@media (min-width: 2560px) {
  .card-match__board {
    height: 407px;
  }
}
.card-match__board::before, .card-match__board::after {
  position: absolute;
  top: 0;
  height: 408px;
  height: calc(15.9375 * 1vw);
  background-repeat: no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  content: "";
}
@media (min-width: 2560px) {
  .card-match__board::before, .card-match__board::after {
    height: 408px;
  }
}
.card-match__board::before {
  left: 71px;
  left: calc(2.7734375 * 1vw);
  width: 766px;
  width: calc(29.921875 * 1vw);
  background-image: url(/asiangames2026/img/main/bg_match_blue-d1f1cdd0fa7cdc6de58d8a51e5386a8f.png);
}
@media (min-width: 2560px) {
  .card-match__board::before {
    left: 71px;
  }
}
@media (min-width: 2560px) {
  .card-match__board::before {
    width: 766px;
  }
}
.card-match__board::after {
  left: 706px;
  left: calc(27.578125 * 1vw);
  width: 765px;
  width: calc(29.8828125 * 1vw);
  background-image: url(/asiangames2026/img/main/bg_match_red-b48ab25f24682253b9ace766290fe57c.png);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
@media (min-width: 2560px) {
  .card-match__board::after {
    left: 706px;
  }
}
@media (min-width: 2560px) {
  .card-match__board::after {
    width: 765px;
  }
}
.card-match__team {
  position: absolute;
  z-index: 1;
  top: 88px;
  top: calc(3.4375 * 1vw);
  width: 240px;
  width: calc(9.375 * 1vw);
  height: 232px;
  height: calc(9.0625 * 1vw);
}
@media (min-width: 2560px) {
  .card-match__team {
    top: 88px;
  }
}
@media (min-width: 2560px) {
  .card-match__team {
    width: 240px;
  }
}
@media (min-width: 2560px) {
  .card-match__team {
    height: 232px;
  }
}
.card-match__team--home {
  left: 271px;
  left: calc(10.5859375 * 1vw);
}
@media (min-width: 2560px) {
  .card-match__team--home {
    left: 271px;
  }
}
.card-match__team--away {
  left: 1031px;
  left: calc(40.2734375 * 1vw);
}
@media (min-width: 2560px) {
  .card-match__team--away {
    left: 1031px;
  }
}
.card-match__flag {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.card-match__result {
  position: absolute;
  z-index: 1;
  top: 136px;
  top: calc(5.3125 * 1vw);
  width: 80px;
  width: calc(3.125 * 1vw);
  height: 82px;
  height: calc(3.203125 * 1vw);
}
@media (min-width: 2560px) {
  .card-match__result {
    top: 136px;
  }
}
@media (min-width: 2560px) {
  .card-match__result {
    width: 80px;
  }
}
@media (min-width: 2560px) {
  .card-match__result {
    height: 82px;
  }
}
.card-match__result img {
  display: block;
  width: 100%;
  height: 100%;
}
.card-match__result--home {
  left: 551px;
  left: calc(21.5234375 * 1vw);
}
@media (min-width: 2560px) {
  .card-match__result--home {
    left: 551px;
  }
}
.card-match__result--away {
  left: 911px;
  left: calc(35.5859375 * 1vw);
}
@media (min-width: 2560px) {
  .card-match__result--away {
    left: 911px;
  }
}
.card-match__result--dim {
  opacity: 0.3;
}
.card-match__badge {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
  background-color: #2c2c2c;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--badge-slant-r)) 100%, var(--badge-slant-l) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--badge-slant-r)) 100%, var(--badge-slant-l) 100%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-weight: 600;
  color: #bdbdbd;
  letter-spacing: 0.02em;
  --badge-slant-l: 30.78px;
  --badge-slant-l: calc(1.20234375 * 1vw);
  --badge-slant-r: 33.58px;
  --badge-slant-r: calc(1.31171875 * 1vw);
  min-width: 314px;
  min-width: calc(12.265625 * 1vw);
  height: 54px;
  height: calc(2.109375 * 1vw);
  padding: 13px 46px 0px;
  padding: calc(0.5078125 * 1vw) calc(1.796875 * 1vw) calc(0 * 1vw);
  font-size: 20px;
  font-size: 0.78125vw;
  line-height: 28px;
  line-height: 1.09375vw;
}
@media (min-width: 2560px) {
  .card-match__badge {
    --badge-slant-l: 30.78px;
  }
}
@media (min-width: 2560px) {
  .card-match__badge {
    --badge-slant-r: 33.58px;
  }
}
@media (min-width: 2560px) {
  .card-match__badge {
    min-width: 314px;
  }
}
@media (min-width: 2560px) {
  .card-match__badge {
    height: 54px;
  }
}
@media (min-width: 2560px) {
  .card-match__badge {
    padding: 13px 46px 0px;
  }
}
@media (min-width: 2560px) {
  .card-match__badge {
    font-size: 20px;
    line-height: 28px;
  }
}
.card-match.is-win .card-match__badge {
  background-color: #fff;
  color: #045cff;
}
.card-match__badge-em {
  font-weight: 600;
  color: #fff;
}
.card-match__btn-wrap {
  position: absolute;
  left: 382px;
  left: calc(14.921875 * 1vw);
  top: 457px;
  top: calc(17.8515625 * 1vw);
  width: 777px;
  width: calc(30.3515625 * 1vw);
  height: 124px;
  height: calc(4.84375 * 1vw);
}
@media (min-width: 2560px) {
  .card-match__btn-wrap {
    left: 382px;
  }
}
@media (min-width: 2560px) {
  .card-match__btn-wrap {
    top: 457px;
  }
}
@media (min-width: 2560px) {
  .card-match__btn-wrap {
    width: 777px;
  }
}
@media (min-width: 2560px) {
  .card-match__btn-wrap {
    height: 124px;
  }
}
.card-match__schedule {
  position: absolute;
  left: 447px;
  left: calc(17.4609375 * 1vw);
  top: 82px;
  top: calc(3.203125 * 1vw);
  width: 271px;
  width: calc(10.5859375 * 1vw);
  height: 42px;
  height: calc(1.640625 * 1vw);
  padding-top: 16px;
  padding-top: calc(0.625 * 1vw);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  background: url(/asiangames2026/img/main/bg_badge_schedule-221c5269384c47143f084fa21fe8cbf6.svg) no-repeat center top/100% 100%;
  font-weight: 600;
  color: #c4cafa;
  letter-spacing: 0.02em;
  font-size: 14px;
  font-size: 0.546875vw;
  line-height: 20px;
  line-height: 0.78125vw;
}
@media (min-width: 2560px) {
  .card-match__schedule {
    left: 447px;
  }
}
@media (min-width: 2560px) {
  .card-match__schedule {
    top: 82px;
  }
}
@media (min-width: 2560px) {
  .card-match__schedule {
    width: 271px;
  }
}
@media (min-width: 2560px) {
  .card-match__schedule {
    height: 42px;
  }
}
@media (min-width: 2560px) {
  .card-match__schedule {
    padding-top: 16px;
  }
}
@media (min-width: 2560px) {
  .card-match__schedule {
    font-size: 14px;
    line-height: 20px;
  }
}
.card-match__live {
  position: absolute;
  left: 547px;
  left: calc(21.3671875 * 1vw);
  top: 82px;
  top: calc(3.203125 * 1vw);
  width: 71px;
  width: calc(2.7734375 * 1vw);
  height: 42px;
  height: calc(1.640625 * 1vw);
  padding-top: 16px;
  padding-top: calc(0.625 * 1vw);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  background: url(/asiangames2026/img/main/bg_badge_live-ad25413f693a1a67ecd2b237c590b1d4.svg) no-repeat center top/100% 100%;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  font-size: 14px;
  font-size: 0.546875vw;
  line-height: 20px;
  line-height: 0.78125vw;
}
@media (min-width: 2560px) {
  .card-match__live {
    left: 547px;
  }
}
@media (min-width: 2560px) {
  .card-match__live {
    top: 82px;
  }
}
@media (min-width: 2560px) {
  .card-match__live {
    width: 71px;
  }
}
@media (min-width: 2560px) {
  .card-match__live {
    height: 42px;
  }
}
@media (min-width: 2560px) {
  .card-match__live {
    padding-top: 16px;
  }
}
@media (min-width: 2560px) {
  .card-match__live {
    font-size: 14px;
    line-height: 20px;
  }
}

/* 미선택(회색) 처리 — 패널 이미지 교체 + 국가 블록 감광 */
.card-match.is-pick-home .card-match__board::after {
  background-image: url(/asiangames2026/img/main/bg_match_off_r-f4f262f612856950ea258dba6228edce.png);
}

.card-match.is-pick-away .card-match__board::before {
  background-image: url(/asiangames2026/img/main/bg_match_off_l-3e0962ede8031aedf918998c4330cef9.png);
}

.card-match.is-pick-home .card-match__team--away .card-match__flag,
.card-match.is-pick-away .card-match__team--home .card-match__flag {
  -webkit-filter: grayscale(1) brightness(0.7);
  filter: grayscale(1) brightness(0.7);
}

/* 선택된 팀은 회색 패널 위로 */
.card-match__team.is-selected {
  z-index: 2;
}

/* 개발 바인딩용 상태 키 — 명세 #5 §3-1 의 variant 명과 1:1 대응.
 * is-lose / is-ended / is-tbd 는 시각 차이가 배지 문구·버튼 라벨·W/L 유무 같은
 * '내용' 으로만 나타나므로 전용 스타일이 없다. 클래스는 상태 식별용으로 유지한다.
 *   1-a is-tbd · 1-b (없음) · 1-c/1-d is-pick-* · 1-e is-closed
 *   2-a/2-b is-live · 3-a is-win · 3-b is-lose · 3-c is-ended */
/* ---------------------------------------------------------
 * 승부 예측 버튼 — 텍스트 포함 통 이미지
 * --------------------------------------------------------- */
.btn-pick {
  position: absolute;
  top: 0;
  left: 0;
  width: 389px;
  width: calc(15.1953125 * 1vw);
  height: 80px;
  height: calc(3.125 * 1vw);
  background: url(/asiangames2026/img/main/btn_pick-6754986ecac4b31cb23e0b206097af7e.png) no-repeat center/contain;
  /* disabled 라벨 변형 — 배경 동일, 라벨만 교체 */
}
@media (min-width: 2560px) {
  .btn-pick {
    width: 389px;
  }
}
@media (min-width: 2560px) {
  .btn-pick {
    height: 80px;
  }
}
.btn-pick:hover, .btn-pick:focus-visible {
  background-image: url(/asiangames2026/img/main/btn_pick_hover-750312ba82d174308329163fa931866a.png);
}
.btn-pick:disabled {
  background-image: url(/asiangames2026/img/main/btn_pick_disabled-3fcfb2b55b6e72b8851a932ef14a166f.png);
  cursor: default;
}
.btn-pick--done:disabled {
  background-image: url(/asiangames2026/img/main/btn_pick_done-2d2747915c2a2bda7c79f2b62b98f1db.png);
}
.btn-pick--closed:disabled {
  background-image: url(/asiangames2026/img/main/btn_pick_closed-db04ee5970283a1119fa23959274c0d2.png);
}
.btn-pick--end:disabled {
  background-image: url(/asiangames2026/img/main/btn_pick_end-76c0103c8632c7fe63c2110a96f527d1.png);
}

.btn-watch {
  position: absolute;
  top: 0;
  left: 389px;
  left: calc(15.1953125 * 1vw);
  width: 388px;
  width: calc(15.15625 * 1vw);
  height: 80px;
  height: calc(3.125 * 1vw);
  background: url(/asiangames2026/img/main/btn_watch-cf9e934d29c3338a4f23b8050ff3715e.png) no-repeat center/contain;
  /* a 태그라 disabled 속성을 못 쓴다 — 상태 클래스로 처리 */
}
@media (min-width: 2560px) {
  .btn-watch {
    left: 389px;
  }
}
@media (min-width: 2560px) {
  .btn-watch {
    width: 388px;
  }
}
@media (min-width: 2560px) {
  .btn-watch {
    height: 80px;
  }
}
.btn-watch:hover, .btn-watch:focus-visible {
  background-image: url(/asiangames2026/img/main/btn_watch_hover-0dd7527efc8bdbcf980431dcf32b08bd.png);
}
.btn-watch.is-disabled {
  background-image: url(/asiangames2026/img/main/btn_watch_disabled-308349aa282f2f26cd0ae165edec139c.png);
  pointer-events: none;
  cursor: default;
}

/* =========================================================
 * LAYER POPUP (9종)
 *   시안: Figma 4HT2Mhxd2SkNG0KsK08y4Q / Error / Popup (2208:6678)
 *   단위 규칙: .claude/rules/styles.md §7
 *     - 1024px 초과 : 고정 px
 *     - 1024px 이하 : vw (1024 기준 = px / 1024 * 100)
 *   내부 요소는 시안 오프셋이 콘텐츠 높이와 무관하게 고정이므로 절대배치로 옮겼다.
 * ========================================================= */
.layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.dimmed {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.pop {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-y: auto;
  padding: 30px 0;
  pointer-events: none; /* 딤 클릭으로 닫기 — 여백은 통과시킨다 */
}

.pop_item {
  position: relative;
  margin: auto; /* 넘칠 때는 auto 마진이 0으로 처리돼 상단이 잘리지 않는다 */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #8e8e8e;
  background-color: #1a1a1a;
  isolation: isolate; /* 텍스처의 blend 범위를 팝업 안으로 가둔다 */
  pointer-events: auto;
  /* 배경 텍스처 (시안 '배경 1' — darken 30%)
     원본이 어두운 대각선 스트라이프라 darken 이 성립한다.
     배치(size/position)는 시안이 팝업 유형마다 달라 각 블록에서 지정한다. */
}
.pop_item::before {
  background: url(/asiangames2026/img/main/bg_popup-8a2e447f9e5d1246e3cae6bbca2b7d3a.jpg) no-repeat;
  mix-blend-mode: darken;
  opacity: 0.3;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* ---------------------------------------------------------
 * 닫기 버튼 (시안 BTN_Close 36×36 / 아이콘 20×20)
 * --------------------------------------------------------- */
.btn-pop-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: url(/asiangames2026/img/main/ico_pop_close-33752e2160f6bd0a9c4b45cb936d9240.svg) no-repeat center/20px 20px;
}

/* ---------------------------------------------------------
 * 확인 버튼 (309×64, 라벨 포함 이미지)
 *   top 값은 팝업별로 지정
 * --------------------------------------------------------- */
.btn-confirm {
  width: 309px;
  height: 64px;
  background: url(/asiangames2026/img/main/btn_confirm-c99bd8eb8192412a019682cc65c621aa.png) no-repeat center/cover;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.btn-confirm:hover, .btn-confirm:focus-visible {
  background-image: url(/asiangames2026/img/main/btn_confirm_hover-1c0bb5ddd784d4e639473cdbd2c513ca.png);
}

/* ---------------------------------------------------------
 * ALERT — 1-1 / 3-2 / 3-3 / 4-1 / 4-2 / 4-3 (520×318)
 * --------------------------------------------------------- */
.pop-alert {
  width: 520px;
  height: 318px;
  /* 시안 배경 1: x-101 y-66 722x451 */
}
.pop-alert::before {
  background-position: -101px -66px;
  -webkit-background-size: 722px 451px;
  background-size: 722px 451px;
}
.pop-alert__content {
  position: absolute;
  top: 76px;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 14px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 30px;
}
.pop-alert__title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.56px;
  color: #fff;
  text-align: center;
  word-break: keep-all;
}
.pop-alert__desc {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.36px;
  color: #c5c5c5;
  text-align: center;
  word-break: keep-all;
}
.pop-alert .btn-confirm {
  top: 204px;
}

/* ---------------------------------------------------------
 * REWARD — 3-1 보상 획득 성공 (432×585)
 * --------------------------------------------------------- */
.pop-reward {
  width: 432px;
  height: 585px;
  /* 시안 배경 1: x-379 y-66 1077x673 */
  /* 상품 이미지 뒤 원형 광원 (시안 Ellipse 498) */
  /* 상품명은 API 주입값이라 길이가 가변 — 양쪽 36px 여백 안에서 2줄로 자르고 말줄임 */
}
.pop-reward::before {
  background-position: -379px -66px;
  -webkit-background-size: 1077px 673px;
  background-size: 1077px 673px;
}
.pop-reward__title {
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.48px;
  color: #fff;
  text-align: center;
}
.pop-reward__glow {
  position: absolute;
  top: 147px;
  left: 69px;
  width: 294px;
  height: 252px;
  border-radius: 50%;
  background: #d9d9d9;
  opacity: 0.12;
  -webkit-filter: blur(60.34px);
  filter: blur(60.34px);
}
.pop-reward__thumb {
  position: absolute;
  top: 138px;
  width: 184px;
  height: 184px;
  -o-object-fit: contain;
  object-fit: contain;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.pop-reward__info {
  position: absolute;
  top: 336px;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}
.pop-reward__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  -ms-flex-item-align: stretch;
  align-self: stretch; /* __info 가 align-items:center 라 stretch 로 폭을 채운다 */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 36px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: #c5c5c5;
  text-align: center;
}
.pop-reward__desc {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.28px;
  color: #c5c5c5;
  text-align: center;
}
.pop-reward .btn-confirm {
  top: 461px;
}

/* ---------------------------------------------------------
 * HISTORY — 2-1 나의 참여 내역 (580×720)
 * --------------------------------------------------------- */
.pop-history {
  width: 580px;
  height: 720px;
  /* 시안 배경 1: x-305 y-17 1198x749 */
  /* 목록 스크롤 영역 — 표(520) + 여백(8) + 스크롤바(6) */
  /* 참여 내역 없음 */
}
.pop-history::before {
  background-position: -305px -17px;
  -webkit-background-size: 1198px 749px;
  background-size: 1198px 749px;
}
.pop-history__title {
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.48px;
  color: #fff;
  text-align: center;
}
.pop-history__tabs {
  position: absolute;
  top: 135px;
  left: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 520px;
  height: 48px;
}
.pop-history__tab {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 260px;
  height: 48px;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #fff;
  opacity: 0.2; /* 시안 비활성 상태값 그대로 유지 */
}
.pop-history__tab::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 260px;
  height: 4px;
  background: #fff;
  content: "";
}
.pop-history__tab.is-active {
  opacity: 1;
}
.pop-history__tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.pop-history__panel[hidden] {
  display: none;
}
.pop-history__scroll {
  position: absolute;
  top: 224px;
  left: 30px;
  width: 534px;
  height: 350px;
  overflow-x: hidden;
  overflow-y: auto;
  /* scrollbar-width / scrollbar-color 를 선언하면 Chromium 121+ 가
     ::-webkit-scrollbar 를 무시해 시안의 6px / radius 75 가 죽는다.
     명세 확정 11번이 "크롬 기본 스크롤바 커스텀"이므로 표준 속성은 쓰지 않는다.
     (Firefox 는 기본 스크롤바로 폴백) */
}
.pop-history__scroll::-webkit-scrollbar {
  width: 6px;
}
.pop-history__scroll::-webkit-scrollbar-track {
  border-radius: 75px;
  background: #3f3d3d;
}
.pop-history__scroll::-webkit-scrollbar-thumb {
  border-radius: 75px;
  background: #fff;
}
.pop-history__scroll:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.pop-history__empty {
  display: none;
  position: absolute;
  top: 224px;
  left: 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 520px;
  padding: 0 40px;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.56px;
  color: #fff;
  text-align: center;
}
.pop-history__panel.is-empty .pop-history__scroll {
  display: none;
}
.pop-history__panel.is-empty .pop-history__empty {
  display: block;
}
.pop-history .btn-confirm {
  top: 606px;
}

/* ---------------------------------------------------------
 * 참여 내역 표
 *   기본 = 게임 플레이 탭 / --predict = 승부 예측 탭
 * --------------------------------------------------------- */
.tbl-history {
  width: 520px;
  table-layout: fixed;
  /* 4열(일시) 시안 위치 보정 */
}
.tbl-history col:nth-child(1) {
  width: 41px;
}
.tbl-history col:nth-child(2) {
  width: 105px;
}
.tbl-history col:nth-child(3) {
  width: 241px;
}
.tbl-history col:nth-child(4) {
  width: 133px;
}
.tbl-history th {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 41px;
  border-bottom: 2px solid #fff;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  color: #fff;
  text-align: center;
  vertical-align: top;
}
.tbl-history td {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 56px;
  border-bottom: 1px solid #8e8e8e;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  padding: 0 2px;
  color: #fff;
  text-align: center;
  vertical-align: middle;
}
.tbl-history th:nth-child(4),
.tbl-history td:nth-child(4) {
  padding-right: 11px;
}
.tbl-history__date, .tbl-history__time {
  display: block;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #c5c5c5;
}
.tbl-history--predict col:nth-child(2) {
  width: 185px;
}
.tbl-history--predict col:nth-child(3) {
  width: 121px;
}
.tbl-history--predict col:nth-child(4) {
  width: 173px;
}
.tbl-history--predict th:nth-child(4) {
  padding-right: 0;
  padding-left: 29px;
}
.tbl-history--predict td:nth-child(4) {
  padding-right: 0;
  padding-left: 29px;
}

/* ---------------------------------------------------------
 * 1024px 이하 — 고정 px → vw (1024 기준)
 *   테두리(1·2px), 스크롤바 폭, border-radius: 50% 는 전환하지 않는다
 * --------------------------------------------------------- */
@media (max-width: 1024px) {
  .pop {
    padding: 2.9296875vw 0;
  }
  .btn-pop-close {
    top: 1.3671875vw;
    right: 1.3671875vw;
    width: 3.515625vw;
    height: 3.515625vw;
    -webkit-background-size: 1.953125vw 1.953125vw;
    background-size: 1.953125vw 1.953125vw;
  }
  .btn-confirm {
    width: 30.17578125vw;
    height: 6.25vw;
  }
  .pop-alert {
    width: 50.78125vw;
    height: 31.0546875vw;
  }
  .pop-alert::before {
    background-position: -9.8632812vw -6.4453125vw;
    -webkit-background-size: 70.5078125vw 44.0429688vw;
    background-size: 70.5078125vw 44.0429688vw;
  }
  .pop-alert__content {
    top: 7.421875vw;
    gap: 1.3671875vw;
    padding: 0 3.90625vw;
  }
  .pop-alert__title {
    font-size: 2.734375vw;
    letter-spacing: -0.0546875vw;
  }
  .pop-alert__desc {
    font-size: 1.7578125vw;
    letter-spacing: -0.03515625vw;
  }
  .pop-alert .btn-confirm {
    top: 19.921875vw;
  }
  .pop-reward {
    width: 42.1875vw;
    height: 57.12890625vw;
  }
  .pop-reward::before {
    background-position: -37.0117188vw -6.4453125vw;
    -webkit-background-size: 105.1757812vw 65.7226562vw;
    background-size: 105.1757812vw 65.7226562vw;
  }
  .pop-reward__title {
    top: 7.03125vw;
    font-size: 2.34375vw;
    letter-spacing: -0.046875vw;
  }
  .pop-reward__glow {
    top: 14.35546875vw;
    left: 6.73828125vw;
    width: 28.7109375vw;
    height: 24.609375vw;
    -webkit-filter: blur(5.89258vw);
    filter: blur(5.89258vw);
  }
  .pop-reward__thumb {
    top: 13.4765625vw;
    width: 17.96875vw;
    height: 17.96875vw;
  }
  .pop-reward__info {
    top: 32.8125vw;
    gap: 0.78125vw;
  }
  .pop-reward__name {
    padding: 0 3.515625vw;
    font-size: 1.953125vw;
    letter-spacing: -0.0390625vw;
  }
  .pop-reward__desc {
    font-size: 1.3671875vw;
    letter-spacing: -0.02734375vw;
  }
  .pop-reward .btn-confirm {
    top: 45.01953125vw;
  }
  .pop-history {
    width: 56.640625vw;
    height: 70.3125vw;
  }
  .pop-history::before {
    background-position: -29.7851562vw -1.6601562vw;
    -webkit-background-size: 116.9921875vw 73.1445312vw;
    background-size: 116.9921875vw 73.1445312vw;
  }
  .pop-history__title {
    top: 7.03125vw;
    font-size: 2.34375vw;
    letter-spacing: -0.046875vw;
  }
  .pop-history__tabs {
    top: 13.18359375vw;
    left: 2.9296875vw;
    width: 50.78125vw;
    height: 4.6875vw;
  }
  .pop-history__tab {
    width: 25.390625vw;
    height: 4.6875vw;
    font-size: 1.953125vw;
    line-height: 2.34375vw;
  }
  .pop-history__tab::after {
    width: 25.390625vw;
    height: 0.390625vw;
  }
  .pop-history__scroll {
    top: 21.875vw;
    left: 2.9296875vw;
    width: 52.1484375vw;
    height: 34.1796875vw;
  }
  .pop-history__empty {
    top: 21.875vw;
    left: 2.9296875vw;
    width: 50.78125vw;
    padding: 0 3.90625vw;
    font-size: 2.734375vw;
    letter-spacing: -0.0546875vw;
  }
  .pop-history .btn-confirm {
    top: 59.1796875vw;
  }
  .tbl-history {
    width: 50.78125vw;
  }
  .tbl-history col:nth-child(1) {
    width: 4.00390625vw;
  }
  .tbl-history col:nth-child(2) {
    width: 10.25390625vw;
  }
  .tbl-history col:nth-child(3) {
    width: 23.53515625vw;
  }
  .tbl-history col:nth-child(4) {
    width: 12.98828125vw;
  }
  .tbl-history th {
    height: 4.00390625vw;
    font-size: 1.7578125vw;
    line-height: 2.05078125vw;
  }
  .tbl-history td {
    height: 5.46875vw;
    font-size: 1.7578125vw;
  }
  .tbl-history th:nth-child(4),
  .tbl-history td:nth-child(4) {
    padding-right: 1.07421875vw;
  }
  .tbl-history__date, .tbl-history__time {
    font-size: 1.5625vw;
    line-height: 1.85546875vw;
  }
  .tbl-history--predict col:nth-child(2) {
    width: 18.06640625vw;
  }
  .tbl-history--predict col:nth-child(3) {
    width: 11.81640625vw;
  }
  .tbl-history--predict col:nth-child(4) {
    width: 16.89453125vw;
  }
  .tbl-history--predict th:nth-child(4) {
    padding-left: 2.83203125vw;
  }
  .tbl-history--predict td:nth-child(4) {
    padding-left: 2.83203125vw;
  }
}
/* 이벤트 약관 본문 — Notice 아코디언 스타일은 _main.scss 소유 (html.md 규칙) */
.precautions {
  padding: 114px 155px 120px;
  padding: 5.9375vw 8.0729166667vw 6.25vw;
  background-color: #242424;
  font-weight: 400;
  font-size: 16px;
  font-size: 0.8333333333vw;
  line-height: 32px;
  line-height: 1.6666666667vw;
  color: #9c9c9c;
  word-break: break-all;
}

.precautions h4 {
  font-weight: 600;
  color: #d7d7e2;
  line-height: 32px;
  line-height: 1.6666666667vw;
}

.precautions h4 ~ h4 {
  margin-top: 10px;
  margin-top: 0.5208333333vw;
}

.precautions > ul {
  padding-left: 10px;
  padding-left: 0.5208333333vw;
}

.precautions > ul > li > ul {
  padding-left: 17px;
  padding-left: 0.8854166667vw;
}

.precautions > ul > li p {
  padding-left: 28px;
  padding-left: 1.4583333333vw;
}

.precautions > ul > li .underline {
  text-decoration: underline;
}

.precautions > ul > li .btn_link {
  color: #9c9c9c;
  text-decoration: underline;
}

.precautions > ul > li a {
  color: inherit;
  text-decoration: underline;
}

.precautions .desc_item > li {
  padding-left: 17px;
  padding-left: 0.8854166667vw;
}

.precautions > ul > li p.desc_sub {
  margin-top: 5px;
  padding-left: 56px;
  padding-left: 2.9166666667vw;
}

.precautions .table {
  margin-top: 14px;
  margin-top: 0.7291666667vw;
  padding: 0px 0px 20px 28px;
  padding: 0vw 0vw 1.0416666667vw 1.4583333333vw;
}

.precautions table,
.precautions th,
.precautions td {
  border: 1px solid #fff;
  border-collapse: collapse;
}

.precautions table th,
.precautions table td {
  padding: 12px;
  padding: 0.625vw;
  font-weight: 600;
  font-size: 16px;
  font-size: 0.625vw;
  color: #fff;
  line-height: 1.75;
  text-align: center;
}

.precautions table th {
  width: 178px;
  width: 9.2708333333vw;
}

.precautions table th.col_no {
  width: 70px;
  width: 3.6458333333vw;
}

.precautions table th.col_cond {
  width: 340px;
  width: 13.28125vw;
}

@media (min-width: 2560px) {
  .precautions {
    padding: 114px 155px 120px;
    font-size: 16px;
    line-height: 32px;
  }
  .precautions h4 {
    line-height: 32px;
  }
  .precautions h4 ~ h4 {
    margin-top: 10px;
  }
  .precautions > ul {
    padding-left: 10px;
  }
  .precautions > ul > li > ul {
    padding-left: 17px;
  }
  .precautions > ul > li p {
    padding-left: 28px;
  }
  .precautions .desc_item > li {
    padding-left: 17px;
  }
  .precautions > ul > li p.desc_sub {
    padding-left: 56px;
  }
  .precautions .table {
    margin-top: 14px;
    padding: 0px 0px 20px 28px;
  }
  .precautions table th,
  .precautions table td {
    padding: 12px;
    font-size: 16px;
  }
  .precautions table th {
    width: 178px;
  }
  .precautions table th.col_no {
    width: 45px;
  }
  .precautions table th.col_cond {
    width: 340px;
  }
}
@media screen and (max-width: 768px) {
  .precautions {
    padding: 80px 64px 90px;
    padding: 7.8125vw 6.25vw 8.7890625vw;
    font-size: 24px;
    font-size: 2.34375vw;
    line-height: 40px;
    line-height: 3.90625vw;
  }
  .precautions h4 {
    font-size: 26px;
    font-size: 2.5390625vw;
    line-height: 52px;
    line-height: 5.078125vw;
  }
  .precautions h4 ~ h4 {
    margin-top: 20px;
    margin-top: 1.953125vw;
  }
}
.error_page ~ .riotbar-footer {
  display: none;
}

/* 전역 `html, body { height: 100% }`(_reset.scss) 와 riotbar 가 넣는
   `body.riotbar-present { margin-top: 80px }` 이 겹쳐, 콘텐츠가 짧은 페이지에서는
   body 박스가 80px 밀린 채 뷰포트 높이를 유지해 빈 스크롤이 생긴다.
   에러 페이지에서만 높이를 콘텐츠 기준으로 되돌린다 (미지원 브라우저는 기존 동작으로 폴백). */
body:has(> .wrap.error_page) {
  height: auto;
  background-color: #000;
}

/* ---------------------------------------------------------
 * ERROR — 점검 / 404 / 500 공통
 * --------------------------------------------------------- */
.section-error {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* riotbar 가 body.riotbar-present 에 margin-top:80px 을 넣어 헤더 높이를 이미 상쇄한다.
     그만큼 빼야 문서가 뷰포트를 넘지 않는다 (80 은 서드파티 고정 px 이라 vw 변환 안 함). */
  min-height: calc(100vh - 80px);
  background-color: #000;
  /* 시안 광학 중심 보정 — 콘텐츠 영역 y192~1440 의 중심 816 대비
     시안 콘텐츠(텍스트 552~734 + 버튼 814~931) 중심 741.5 가 74.5 위 → 149 */
  padding-bottom: 149px;
  padding-bottom: calc(5.8203125 * 1vw);
}
@media (min-width: 2560px) {
  .section-error {
    padding-bottom: 149px;
  }
}
.section-error__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  gap: 16px;
  gap: calc(0.625 * 1vw);
}
@media (min-width: 2560px) {
  .section-error__text {
    gap: 16px;
  }
}
.section-error__title {
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-weight: 800;
  font-size: 68px;
  font-size: 2.65625vw;
  line-height: 88.4px;
  line-height: 3.453125vw;
}
@media (min-width: 2560px) {
  .section-error__title {
    font-size: 68px;
    line-height: 88.4px;
  }
}
.section-error__desc {
  color: #c5c5c5;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-size: 30px;
  font-size: 1.171875vw;
  line-height: 39px;
  line-height: 1.5234375vw;
}
@media (min-width: 2560px) {
  .section-error__desc {
    font-size: 30px;
    line-height: 39px;
  }
}
.section-error__btn {
  margin-top: 80px;
  margin-top: calc(3.125 * 1vw);
}
@media (min-width: 2560px) {
  .section-error__btn {
    margin-top: 80px;
  }
}

/* 라벨(홈으로 / 재시도)이 Sandoll Mapssi 로 조판돼 있고 프로젝트에는 Pretendard 만 있어
   라벨을 이미지에 구워 쓴다. hover 는 라벨 색만 흰색 -> 검정 으로 바뀌므로 이미지 교체로 처리.
   (시안 2208:20900 = 홈으로 / 2786:1532 = 재시도, 각 default·hover 배리언트) */
.btn-error {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
  width: 565px;
  width: calc(22.0703125 * 1vw);
  height: 117px;
  height: calc(4.5703125 * 1vw);
}
@media (min-width: 2560px) {
  .btn-error {
    width: 565px;
  }
}
@media (min-width: 2560px) {
  .btn-error {
    height: 117px;
  }
}
.btn-error:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.btn-error--home {
  background-image: url(/asiangames2026/img/error/btn_home-5910a945eb1a492f336b50e3869322fd.png);
}
.btn-error--home:hover, .btn-error--home:focus-visible {
  background-image: url(/asiangames2026/img/error/btn_home_hover-9b0e462e1dfd720c212df04da9b27b1a.png);
}
.btn-error--retry {
  background-image: url(/asiangames2026/img/error/btn_retry-e4738a5fb3b82dcd6f9a478332c8b17c.png);
}
.btn-error--retry:hover, .btn-error--retry:focus-visible {
  background-image: url(/asiangames2026/img/error/btn_retry_hover-b189ef7a936ef3a12d8526caca22493d.png);
}