@charset "utf-8";

/* 기준점 : 3840px */
/* 두 곳 이상에서 참조되는 공통 변수만 정의한다. 한 곳에서만 쓰는 값은 해당 규칙에 calc((시안px / 3840) * 100vw)로 직접 쓴다. */

:root {
    /* header */
    --header-links-width-and-height: calc((125 / 3840) * 100vw);

    /* common */
    --section-width: 100%;
    --section-content-width: calc((2400 / 3840) * 100vw);

    /* main page */
    --main-page-play-youtube-width: calc((214 / 3840) * 100vw);
    --main-page-play-youtube-height: calc((216 / 3840) * 100vw);

    /* 게임 뉴스 */
    --game-news-table-pagination-button-width: calc((16 / 3840) * 100vw);
    --game-news-table-pagination-button-height: calc((30 / 3840) * 100vw);
    --game-news-table-pagination-button-margin: calc((20 / 3840) * 100vw);
    --game-news-table-pagination-height: calc((45 / 3840) * 100vw);

    /* 사전 예약 */
    --pre-registration-form-os-ios-icon-width: calc((33 / 3840) * 100vw);
    --pre-registration-form-os-checkmark-width-and-height: calc((45 / 3840) * 100vw);
    --pre-registration-form-os-checkmark-after-width-and-height: calc((23 / 3840) * 100vw);
    --pre-registration-form-agreement-checkmark-width-and-height: calc((44 / 3840) * 100vw);
    --pre-registration-form-agreement-checkmark-after-border-width: 0 max(calc((4 / 3840) * 100vw), 2px) max(calc((4 / 3840) * 100vw), 2px) 0;

    /* 누적 사전예약자 */
    --pre-registration-cumulative-graph-width: calc((1423 / 3840) * 100vw);

    /* footer */
    --footer-copyright-height: calc((150 / 3840) * 100vw);
    --footer-copyright-font-size: max(calc((28 / 3840) * 100vw), 11px);
    --footer-grade-img-width: calc((133 / 3840) * 100vw);
    --footer-grade-height: calc((303 / 3840) * 100vw);
    --footer-grade-font-size: max(calc((24 / 3840) * 100vw), 11px);

    /* contents modal */
    --contents-modal-height: calc((1584 / 3840) * 100vw);
    --contents-modal-button-close-modal-position-top: calc((50 / 3840) * 100vw);

    /* 핵심콘텐츠 modal */
    --core-contents-modal-swiper-play-button-width-and-height: calc((177 / 3840) * 100vw);

    /* swiper */
    --swiper-navigation-button-position-left-right: calc((455 / 3840) * 100vw);

    /* modal OST */
    --ost-progress-circle-width-and-height: calc((28 / 3840) * 100vw);
    --ost-swiper-thumbnail-width-and-height: calc((374 / 3840) * 100vw);
    --ost-swiper-thumbnail-image-width-and-height: calc((336 / 3840) * 100vw);
    --ost-swiper-thumbnail-image-inner-circle-width-and-height: calc((60 / 3840) * 100vw);
    --ost-swiper-thumbnail-image-cover-width-and-height: calc((335 / 3840) * 100vw);
}