@font-face {
    font-family: 'Noto Sans TC';
    font-weight: 100 900;
    font-style: normal;
    src: url('/assets/font/NotoSansTC-VariableFont_wght-ea02b9aea1056f39fb2685ff48c4c0bc.woff2') format('truetype');
    font-display: swap;
}

html[lang="zh-tw"] body,
html[lang="zh-tw"] button,
html[lang="zh-tw"] input,
html[lang="zh-tw"] select,
html[lang="zh-tw"] textarea {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif;
}

/* placeholder 높이 측정용 mirror — 화면에 노출되면 안 됨 */
.form_cm_textarea_mirror {
    position: absolute;
    top: -9999px;
    left: 0;
    visibility: hidden;
    pointer-events: none;
}

html[lang="zh-tw"] .section_editor .note-editor .note-editable {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif !important;
}

.btn_custom {
    position: relative;
    width: 195px;
    height: 58px;
    background-image: url('/assets/img/game_download-8ac270ca4f6458935efd86091da8beff.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
    transition: background-image 0.2s ease;
}

.btn_custom:hover {
    background-image: url('/assets/img/game_download_hover-92cb95489f60cc900352ba5e572544b1.png');
}

/* 버튼 텍스트 (상단) */
.btn_custom .btn_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 145px;
    height: 55px;
    background-image: url('/assets/img/game_start_title_zh-tw-af668d4d81a3c1d6eea8597d1f436267.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

/* 버튼 텍스트 (상단) */
.btn_custom .btn_text_cbt_ready {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 145px;
    height: 55px;
    background-image: url('/assets/img/game_start_cbt_notice_title_zh-tw-880afc5178f0008091f81a1dd54903a2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

/* 버튼 텍스트 (상단) */
.btn_custom .btn_text_cbt_end {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 145px;
    height: 55px;
    background-image: url('/assets/img/game_start_cbt_ended_title_zh-tw-a6d22909fefcff9540bccf83c8fea0c1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

html[lang="zh-tw"] .btn_custom .btn_text {
    background-image: url('/assets/img/game_start_title_zh-tw-af668d4d81a3c1d6eea8597d1f436267.png');
}

html[lang="en"] .btn_custom .btn_text {
    background-image: url('/assets/img/game_start_title_en-ab538d64da0ea5c47a2713486dacee72.png');
}

/* Lottie 이펙트 애니메이션 (하단) */
.lottie-animation-effect {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

/* PC 배너 전체 영역 클릭 */
.key_visual_link_pc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

/* "자세히 보기" 버튼이 클릭 가능하도록 z-index 설정 */
.key_visual_link.only_pc {
    position: relative;
    z-index: 2;
}

/* OS 아이콘 스타일 */
.os-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.os-icon.windows {
    background-image: url('/assets/img/svg/ico_windows-b49fdabb37a25b183b8aec2736fa0102.svg');
}

.os-icon.mac {
    background-image: url('/assets/img/svg/ico_mac-fb6e0bd3c9905f2d7a68b0732561798a.svg');
}

.os-icon.hidden,
.os-download-image.hidden {
    display: none;
}

/* OS 아이콘이 있는 버튼 줄바꿈 방지 */
.btn_start_game,
.download_option_link {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 메인 페이지 다운로드 스토어 아이콘 Safari 호환 */
.group_btn_download a img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

/* 메인 페이지 다운로드 버튼 너비 조정 */
.group_btn_download .download_option_link {
    min-width: 290px !important;
}

/* 다운로드 페이지 버튼 */
.download_option_list .download_option_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* PC 다운로드 버튼 (game_download_pc.png) */
.download_option_link.type_pc_image {
    background: none;
    width: auto;
    max-width: 100%;
    height: auto;
    padding: 0;
}

.download_option_link.type_pc_image img {
    width: 367px;
    max-width: 480px;
    height: auto;
}

.download_option_item.version_pc .box_btn {
    justify-content: center;
}

/* 모바일 다운로드 영역 - PC (TestFlight + Google Play + iOS 안내) */
.download_option_item.version_mobile {
    flex: 0 0 286px;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
}

.download_mobile_store {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 16px;
}

.download_option_item.version_mobile .box_btn {
    flex-direction: column;
}

.download_mobile_info {
    text-align: left;
}

.download_mobile_notice {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-g5);
}

.download_mobile_detail_link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-g5);
    text-decoration: underline;
}

.download_mobile_detail_link.is_outlink::after {
    display: inline-block;
    vertical-align: middle;
    width: 17px;
    height: 16px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml, %3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.2929 4.5H6.50004V3.5H12.5H13V4V10H12V5.20711L4.85359 12.3536L4.14648 11.6464L11.2929 4.5Z' fill='%23808082'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
    content: "";
}

/* 모바일 다운로드 영역 - MO (iOS / Android 분리) */
@media screen and (max-width: 1024px) {
    .download_option_item.version_ios.only_mo,
    .download_option_item.version_android.only_mo {
        flex: 1;
        width: 100%;
        height: auto;
        min-height: auto;
        padding: 0;
        background: none;
        gap: 0;
    }

    .download_mo_banner {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        min-height: 336px;
        padding: 24px;
        box-sizing: border-box;
        background: url('/assets/img/background/img_download_bg_mo-358227b478ae3ca9c259d64402c77787.jpg') center/cover no-repeat;
    }

    .download_option_item.version_ios.only_mo .download_mobile_info {
        width: 100%;
        padding: 16px 0 0;
        box-sizing: border-box;
    }

    .download_option_item.version_ios.only_mo .box_btn,
    .download_option_item.version_android.only_mo .box_btn {
        width: 100%;
        justify-content: center;
    }

    .download_option_item.version_ios.only_mo .download_option_link,
    .download_option_item.version_android.only_mo .download_option_link {
        flex: none;
        height: 64px;
        margin: 0 auto;
    }

    .download_mobile_notice {
        font-size: 12px;
        line-height: 1.5;
    }

    .download_mobile_detail_link {
        font-size: 12px;
    }

    .download_mobile_detail_link.is_outlink::after {
        width: 8px;
        height: 8px;
        background-image: url("data:image/svg+xml, %3Csvg width='8' height='8' viewBox='0 0 8 8' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M2 1.5H6.5V6' stroke='%23808082'/%3E %3Cpath d='M6 2L1 7' stroke='%23808082'/%3E %3C/svg%3E");
    }
}

/* 게시판 검색 필터 - 검색 유형 셀렉트 (다국어 '제목+내용' 등 텍스트 표시) */
.filter .select_box {
    width: 140px;
}

.filter .select_box_mo {
    width: 140px;
}

.filter .select_btn .select_text {
    white-space: nowrap;
}

.footer_age_guide {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.footer_age_guide_image {
    width: 80px;
    height: auto;
    flex-shrink: 0;
}

.footer_age_guide_text {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer_age_guide_text li {
    position: relative;
    padding-left: 10px;
    color: var(--color-g6);
    font-size: 14px;
    line-height: 150%;
}

.footer_age_guide_text li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--color-g6);
}

.footer_age_guide_text li + li {
    margin-top: 2px;
}

@media (max-width: 1024px) {
    .footer_age_guide {
        align-items: flex-start;
        gap: 10px;
        margin-top: 24px;
    }

    .footer_age_guide_image {
        width: 64px;
    }

    .footer_age_guide_text li {
        font-size: 12px;
        word-break: keep-all;
    }
}

/* GNB 스토어 아이콘 - 공간 부족 시 세로 배치 */
.gnb_box_store {
    flex-wrap: wrap;
}

/* 404 배경 아이콘이 PC 구간에서 중앙을 기준으로 보이도록 정렬 */
@media screen and (min-width: 1025px) {
    .error_section .icon_404 {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* 쿠키 팝업 - 비활성 항목 라벨 */
.popup_cookies .cookies_item_inactive .checkbox_label {
    opacity: 0.4;
}

/* 쿠키 간단 동의 팝업 - 모바일 최대 너비, 가운데 정렬 */
@media screen and (max-width: 1024px) {
    #cookiesPopup.is_compact {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(440px, calc(100vw - 56px));
        max-width: 440px;
    }

    #cookiesPopup.is_compact .popup_inner {
        width: 100%;
        max-width: 440px;
        left: auto;
        right: auto;
        box-sizing: border-box;
    }
}

/* 쿠키 상세 팝업 - 배경 딤 레이어 */
#cookiesExpandedPopup.is_show {
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
}

#cookiesExpandedPopup .cookies_popup_dim {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

#cookiesExpandedPopup.is_show .cookies_popup_dim {
    display: block;
}

#cookiesExpandedPopup.is_show .popup_inner {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 1024px) {
    #cookiesExpandedPopup.is_show .popup_inner {
        left: 50%;
        right: auto;
        width: 100%;
        max-width: 630px;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        max-height: 100dvh;
        overflow-y: auto;
    }
}