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

@font-face {
    font-family: 'Noto Sans SC';
    font-weight: 100 900;
    font-style: normal;
    src: url('/assets/font/NotoSansSC-VariableFont_wght-19027354fc5a11ebb63ae9694306a257.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    font-weight: 100 900;
    font-style: normal;
    src: url('/assets/font/NotoSans-VariableFont_wdth,wght-d20000a6a1b541f180c42a7833e93549.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    font-weight: 100 900;
    font-style: normal;
    src: url('/assets/font/NotoSansThai-VariableFont_wdth,wght-8812628d06f904fe59cbfc017e7a470f.woff2') format('woff2');
    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;
}

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

html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="id"] body,
html[lang="id"] button,
html[lang="id"] input,
html[lang="id"] select,
html[lang="id"] textarea {
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
    letter-spacing: -0.02em;
}

html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea {
    font-family: 'Noto Sans Thai', 'Thonburi', 'Tahoma', 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;
}

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

html[lang="en"] .section_editor .note-editor .note-editable,
html[lang="id"] .section_editor .note-editor .note-editable {
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif !important;
}

html[lang="th"] .section_editor .note-editor .note-editable {
    font-family: 'Noto Sans Thai', 'Thonburi', 'Tahoma', sans-serif !important;
}

/* 글쓰기 — 게시판 선택: 한 줄 + 선택값 길이에 맞게 영역 동기 확장 */
.filter_detail_editor .select_area {
    width: max-content;
    min-width: 168px;
    max-width: none;
    flex: 0 0 auto;
}

.filter_detail_editor .select_area .select_box {
    width: max-content;
    min-width: 168px;
}

.filter_detail_editor .select_area .select_btn {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-width: 168px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}

.filter_detail_editor .select_area .select_text {
    flex: 0 0 auto;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.filter_detail_editor .select_area .select_options {
    width: max-content;
    min-width: 100%;
}

.filter_detail_editor .select_area .select_option_btn {
    white-space: nowrap;
}

.filter_detail_editor .search_input_area {
    flex: 1 1 auto;
    min-width: 0;
}

.filter_detail_editor>.btn {
    width: auto;
    min-width: 116px;
    max-width: 220px;
    height: auto;
    min-height: 48px;
    padding: 10px 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter_detail_editor>.btn .btn_text {
    white-space: nowrap;
}

/* 글쓰기 — 공통 테두리 (#3E3E40) */
.section_editor .select_btn,
.section_editor .search_input,
.section_editor .btn_outline,
.section_editor .note-editor.note-frame {
    border-color: var(--color-g8) !important;
    /* #3e3e40 */
}

.section_editor .note-editor .note-toolbar {
    border-bottom-color: var(--color-g8) !important;
}

.section_editor .select_btn:hover,
.section_editor .select_btn:focus,
.section_editor .select_btn[aria-expanded=true],
.section_editor .search_input:hover,
.section_editor .search_input:focus,
.section_editor .btn_outline:hover,
.section_editor .btn_outline:focus,
.section_editor .btn_outline:active {
    border-color: var(--color-g8) !important;
}

/* Summernote — 사이트 다크 테마 맞춤 (공식 dark mode 없음) */
.section_editor .note-editor.note-frame {
    color: var(--color-g9) !important;
    background-color: var(--color-g1) !important;
    border: 1px solid var(--color-g8) !important;
}

.section_editor .note-editor .note-toolbar {
    background-color: var(--color-g1) !important;
    border-bottom: 1px solid var(--color-g8) !important;
    color: var(--color-g9) !important;
}

.section_editor .note-editor .note-editing-area,
.section_editor .note-editor .note-editable {
    background-color: var(--color-bg) !important;
    color: var(--color-g9) !important;
}

.section_editor .note-editor .note-editable p,
.section_editor .note-editor .note-editable div,
.section_editor .note-editor .note-editable span,
.section_editor .note-editor .note-editable li,
.section_editor .note-editor .note-editable h1,
.section_editor .note-editor .note-editable h2,
.section_editor .note-editor .note-editable h3,
.section_editor .note-editor .note-editable h4,
.section_editor .note-editor .note-editable h5,
.section_editor .note-editor .note-editable h6 {
    color: inherit;
}

.section_editor .note-editor .note-placeholder {
    color: var(--color-g5) !important;
}

.section_editor .note-editor .note-btn:not(.note-color-btn) {
    color: var(--color-g9) !important;
    background-color: var(--color-g2) !important;
    border-color: var(--color-g3) !important;
}

.section_editor .note-editor .note-btn:not(.note-color-btn):hover,
.section_editor .note-editor .note-btn:not(.note-color-btn):focus,
.section_editor .note-editor .note-btn:not(.note-color-btn).active {
    color: var(--color-g9) !important;
    background-color: var(--color-g3) !important;
    border-color: var(--color-g4) !important;
}

.section_editor .note-editor .note-dropdown-menu {
    background-color: var(--color-up) !important;
    border-color: var(--color-g3) !important;
    color: var(--color-g9) !important;
}

.section_editor .note-editor .note-dropdown-menu>li>a,
.section_editor .note-editor .dropdown-item,
.section_editor .note-editor .note-dropdown-menu .note-dropdown-item {
    color: var(--color-g9) !important;
}

.section_editor .note-editor .note-dropdown-menu>li>a:hover,
.section_editor .note-editor .dropdown-item:hover,
.section_editor .note-editor .note-dropdown-menu .note-dropdown-item:hover {
    background-color: var(--color-g2) !important;
    color: var(--color-g9) !important;
}

.section_editor .note-editor .note-modal-content {
    background-color: var(--color-up) !important;
    color: var(--color-g9) !important;
    border-color: var(--color-g3) !important;
}

.section_editor .note-editor .note-modal-header,
.section_editor .note-editor .note-modal-footer {
    background-color: var(--color-g1) !important;
    border-color: var(--color-g2) !important;
    color: var(--color-g9) !important;
}

.section_editor .note-editor .note-modal-title,
.section_editor .note-editor .note-form-label,
.section_editor .note-editor .form-control {
    color: var(--color-g9) !important;
}

.section_editor .note-editor .note-input,
.section_editor .note-editor .form-control {
    background-color: var(--color-bg) !important;
    border-color: var(--color-g3) !important;
    color: var(--color-g9) !important;
}

/* 색상 팔레트 칩 — inline background 유지 (다크 오버라이드 제외) */
.section_editor .note-editor .note-color-btn {
    background-image: none !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: transparent !important;
}

.section_editor .note-editor .note-color-btn:hover,
.section_editor .note-editor .note-color-btn:focus,
.section_editor .note-editor .note-color-btn.active {
    background-image: none !important;
    color: transparent !important;
    border-color: #000 !important;
    transform: scale(1.2);
}

.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_tmp_zh-tw-fc41777b609785f0dd6bfec212bfe212.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

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

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

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

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

html[lang="th"] .btn_custom .btn_text {
    background-image: url('/assets/img/game_start_title_th-c4d10ae8cb80d2e20e9eeac5e49dde08.png');
    top: 43%;
}*/

/* 버튼 텍스트 (상단 - 게임 다운로드) */
.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_tmp_zh-tw-fc41777b609785f0dd6bfec212bfe212.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

html[lang="en"] .btn_custom .btn_text {
    background-image: url('/assets/img/game_start_title_tmp_en-e4536d6fb2c28fbeb0637948ad4303cc.png');
    width: 174px;
}

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

html[lang="zh-cn"] .btn_custom .btn_text {
    background-image: url('/assets/img/game_start_title_tmp_zh-cn-395be8ecd83a8e22fb7b2525bbe2ac03.png');
}

html[lang="id"] .btn_custom .btn_text {
    background-image: url('/assets/img/game_start_title_tmp_id-2b50d2dd3bdbebc914c07262896ddf8e.png');
    width: 174px;
}

html[lang="th"] .btn_custom .btn_text {
    background-image: url('/assets/img/game_start_title_tmp_th-f13e740e5bd3f3f67679f674aa179954.png');
    width: 150px;
    top: 43%;
}

/* 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_dark-0316301727102335f0df17aa37ea4283.svg');
}

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

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

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

/* 마이페이지 닉네임: 에러 메시지와 글자수(10/16) 겹침 방지 */
.user_card_form_character .search_input_error {
    max-width: calc(100% - 48px);
    padding-right: 8px;
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
}

.user_card_form_character .count_text {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    background-color: var(--color-bg);
    padding-left: 8px;
}

/* 마이페이지 닉네임 버튼: 다국어 텍스트에 맞춰 너비 확장 + 입력창 오른쪽 정렬 유지
   architect.min.css의 .btn:not(...):not(...) width:92px 보다 특이도를 높여 덮어씀 */
@media screen and (min-width: 1025px) {
    .user_card.is_show_form .user_card_form_character {
        flex-wrap: nowrap;
    }

    .user_card.is_show_form .user_card_form_character .search_input_area {
        flex: 1 1 auto;
        min-width: 0;
    }

    .user_card.is_show_form .user_card_form_character .search_input_area.is_large .search_input {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .user_card.is_show_form .user_card_form_character .btn.btn_duplicate:not(.btn_close_form):not(.btn_clear),
    .user_card.is_show_form .user_card_form_character .btn.btn_change:not(.btn_close_form):not(.btn_clear) {
        width: auto;
        min-width: 92px;
        padding: 0 16px;
        white-space: nowrap;
        flex-shrink: 0;
        align-self: center;
    }
}

/* 모바일: 입력창 전체 폭 → 아래 행에 중복확인 | 변경하기 나란히 */
@media screen and (max-width: 1024px) {
    .user_card.is_show_form .user_card_form_character {
        gap: 0 8px;
    }

    .user_card.is_show_form .user_card_form_character .search_input_area {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .user_card.is_show_form .user_card_form_character .btn.btn_duplicate {
        width: auto;
        margin: 52px 0 0;
        padding: 10px 12px;
        white-space: nowrap;
        flex: 0 1 auto;
    }

    .user_card.is_show_form .user_card_form_character .btn.btn_change {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin: 52px 0 0;
        white-space: nowrap;
    }

    /* 대표 캐릭터 정보(레벨·캐릭터명 | 클래스 | 서버): 각 항목은 한 덩어리로 유지, 폭이 모자라면 항목 단위로만 줄바꿈
       (grid auto-fit + minmax(0) 조합은 컬럼이 0까지 줄어들어 글자가 세로로 무너지므로 flex로 복구) */
    .user_card_game_info {
        width: 100%;
    }

    .user_card_game_info_inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .user_card_game_info .text {
        flex: 0 0 auto;
        white-space: nowrap;
        word-break: keep-all;
    }

    /* 텍스트 다음에 100% 폭의 빈 아이템을 두어 강제 줄바꿈 → 버튼은 항상 아래 줄 */
    .user_card_game_info_inner::after {
        content: "";
        flex: 0 0 100%;
        height: 0;
        order: 1;
    }

    /* 대표 캐릭터 설정 버튼: 텍스트 아래 별도 줄 + 다국어 길이에 맞춰 너비 확장 */
    .user_card .btn_character_setting.only_mo {
        order: 2;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        margin: 9px auto 0;
        white-space: nowrap;
    }
}

/* 메인 페이지 다운로드 스토어 아이콘 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/Mac 다운로드 버튼 (base + icon + title) */
.download_option_link.type_pc_image {
    background: none;
    width: auto;
    max-width: 100%;
    height: auto;
    padding: 0;
}

.os-download-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 367px;
    max-width: 100%;
}

.download_option_link.type_pc_image .os-download-bg {
    display: block;
    width: 100%;
    height: auto;
}

.os-download-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 56px;
    box-sizing: border-box;
    pointer-events: none;
}

/* architect.min.css .download_option_link img { height:100% } 오버라이드 */
.download_option_link.type_pc_image .os-download-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
    /* 타이틀 PNG 왼쪽 투명 여백 안으로 겹침 */
    position: relative;
    z-index: 1;
    margin-right: -8px;
    margin-left: 15px;
}

.download_option_link.type_pc_image .os-download-title {
    width: auto;
    height: auto;
    max-width: calc(100% - 24px);
    max-height: 75%;
    object-fit: contain;
}

html[lang="en"] .download_option_link.type_pc_image .os-download-title {
    margin-top: 3px;
}

html[lang="id"] .download_option_link.type_pc_image .os-download-title {
    margin-top: 2px;
}

html[lang="th"] .download_option_link.type_pc_image .os-download-title {
    margin-top: -5px;
}

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

/* 드라이버 다운로드 텍스트 - 테이블 셀(color-g9)과 동일 */
.download_driver_text {
    color: var(--color-g9);
}

/* 드라이버 로고 이미지 - architect.min.css(.download_driver_logo img) 오버라이드 */
.download_driver_logo img {
    max-height: 100%;
}

.download_driver_logo.amd img {
    max-width: 50%;
}

.download_driver_logo.geforce img {
    max-width: 66%;
    margin-top: -8px;
}

.download_driver_logo.directx img {
    max-width: 60%;
}

/* 리모트앱 박스 배경 */
.download_remote_box {
    background-color: #1a1a1c;
}

/* 스토어별 QR 카드 배경 (참조 이미지 톤) */
.download_option_item.version_ios,
.download_option_item.version_android {
    background-color: #2e2f32;
}

@media screen and (max-width: 1024px) {

    .download_option_item.version_ios,
    .download_option_item.version_android {
        background: url(/assets/img/background/img_download_bg_mo-358227b478ae3ca9c259d64402c77787.jpg) center/cover no-repeat;
    }
}

.download_option_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 푸터 언어 선택 */
.footer_lang {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.footer_lang_select {
    position: relative;
    width: 220px;
}

.footer_lang_button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--color-bo3);
    background-color: var(--color-up);
    color: var(--color-g9);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.footer_lang_button_text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.footer_lang_button_arrow {
    flex: none;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 8.75L12 15.25L5.5 8.75' stroke='%23a0a0a2' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    transition: transform 0.2s ease;
}

.footer_lang_button:hover,
.footer_lang_button:focus-visible {
    border-color: var(--color-bo5);
    outline: none;
}

.footer_lang_select.is_open .footer_lang_button_arrow {
    transform: rotate(180deg);
}

.footer_lang_list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    width: 100%;
    border: 1px solid var(--color-bo3);
    background-color: var(--color-up);
    box-sizing: border-box;
}

.footer_lang_select.is_open .footer_lang_list {
    display: block;
}

/* 아래쪽 여백이 부족해 목록이 잘리는 경우(주로 모바일에서 푸터까지 스크롤한 상태) 위로 열림 */
.footer_lang_select.is_up .footer_lang_list {
    top: auto;
    bottom: calc(100% + 4px);
}

.footer_lang_item + .footer_lang_item {
    border-top: 1px solid var(--color-bo1);
}

.footer_lang_option {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 0;
    background-color: transparent;
    color: var(--color-g9);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.footer_lang_option:hover,
.footer_lang_option:focus-visible {
    background-color: var(--color-g1);
    outline: none;
}

.footer_lang_option.is_selected {
    font-weight: 700;
}

@media screen and (max-width: 1024px) {
    .footer_lang {
        margin-bottom: 24px;
    }

    .footer_lang_select {
        width: 200px;
    }

    .footer_lang_button,
    .footer_lang_option {
        height: 44px;
        padding: 0 14px;
        font-size: 14px;
    }
}

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

.filter .select_box_mo {
    width: 100%;
}

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

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

.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: 768px) {
    .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%);
    }
}

/* 에러 페이지 - 레퍼런스 톤에 맞춘 다크 UI 보정 */
.error_section .error_title {
    color: rgba(255, 255, 255, 0.88);
}

.error_section .error_desc {
    color: rgba(255, 255, 255, 0.72);
}

.error_section .error_btn_primary {
    background-color: #d9d9dc;
    border-color: #d9d9dc;
    color: #2a2a2d;
}

@media screen and (min-width: 1025px) {

    .error_section .error_btn_primary:hover,
    .error_section .error_btn_primary:focus-visible {
        background-color: #ececef;
        border-color: #ececef;
        color: #1f1f21;
    }
}

/* 쿠키 팝업 - 다크 테마 (배경/텍스트) */
.popup_cookies .popup_inner {
    background-color: #2e2e30;
    border-color: #2e2e30;
    color: #ffffff;
}

.popup_cookies .popup_title,
.popup_cookies .popup_description,
.popup_cookies .checkbox_label,
.popup_cookies .cookies_item_content,
.popup_cookies .cookies_item_content .link {
    color: #ffffff;
}

.popup_cookies .popup_description {
    color: rgba(255, 255, 255, 0.9);
}

/* 쿠키 상세 팝업 — 팝업 폭이 좁아질 때 체크박스가 찌그러져 가려지는 문제 */
/* .checkbox_mark(24px)는 flex 아이템이라 기본 flex-shrink: 1이 적용되고,
   .checkbox_label은 min-width: auto(=min-content)라 줄어들지 않아 마크만 눌린다
   → 마크는 고정 크기로 두고, 라벨이 줄어들며 어절 단위로 줄바꿈되게 한다 */
.popup_cookies .cookies_item_header {
    align-items: flex-start;
}

.popup_cookies .checkbox_wrapper {
    align-items: flex-start;
    min-width: 0;
}

.popup_cookies .checkbox_mark {
    flex: none;
    margin-top: 3px;
}

.popup_cookies .checkbox_label {
    min-width: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 펼치기 버튼도 라벨에 밀려 줄어들지 않도록 */
.popup_cookies .cookies_item .btn_toggle_info {
    flex: none;
}

.popup_cookies .btn_link {
    color: #ffffff;
}

.popup_cookies .btn_link::after,
.popup_cookies .cookies_item_content .link::after {
    background-color: #ffffff;
}

.popup_cookies .btn:not(.btn_outline) {
    background-color: #f2f2f2;
    border-color: #f2f2f2;
}

.popup_cookies .btn:not(.btn_outline) .btn_text {
    color: #2e2e30;
}

.popup_cookies .btn_outline {
    background-color: transparent;
    border-color: #ffffff;
}

.popup_cookies .btn_outline .btn_text {
    color: #ffffff;
}

.popup_cookies .btn_outline:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.popup_cookies .ico_cookies,
.popup_cookies .ico_close_cookies,
.popup_cookies .ico_chevron_down {
    filter: brightness(0) invert(1);
}

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

/* 쿠키 팝업 - 체크박스 테두리 대비 (선택 가능: 밝게 / 비활성: 어둡게) */
.popup_cookies .checkbox_wrapper input:not(:disabled):not(:checked)~.checkbox_mark {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Crect x='0.5' y='0.5' width='23' height='23' stroke='%23e5e5e7'/%3E %3C/svg%3E");
}

.popup_cookies .checkbox_wrapper:hover input:not(:disabled):not(:checked)~.checkbox_mark {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect x='0.5' y='0.5' width='23' height='23' fill='white' fill-opacity='0.08' stroke='%23ffffff'/%3E %3C/svg%3E");
}

.popup_cookies .checkbox_wrapper input:disabled:not(:checked)~.checkbox_mark {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect x='0.5' y='0.5' width='23' height='23' fill='white' fill-opacity='0.02' stroke='%234a4a4c'/%3E %3C/svg%3E");
}

/* 쿠키 간단 동의 팝업 - 모바일 최대 너비, 가운데 정렬 */
@media screen and (max-width: 768px) {
    #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;
    }
}

/* 쿠키 팝업(간단/상세) - 메인 레이어 팝업(.popup_layer_banner, z-index 110)보다 위에 표시 */
#cookiesPopup,
#cookiesExpandedPopup {
    z-index: 120;
}

/* 쿠키 상세 팝업 - 배경 딤 레이어 */
#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: 768px) {
    #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;
    }
}

/* ===== Main Layer Popup (BNNER_LAYERPOPUP) ===== */
.popup_layer_banner {
    z-index: 110;
}

.popup_layer_banner .popup_inner {
    width: max-content;
    /* 가로모드 등 세로가 짧은 뷰포트에서 폭이 과도하게 줄어드는 것을 방지 */
    min-width: min(280px, 100vw);
    max-width: min(1400px, 86vw);
    max-height: 86vh;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    box-sizing: border-box;
}

.popup_layer_banner .layer_popup_media {
    position: relative;
    background: #1a1a1c;
}

.popup_layer_banner .layer_popup_swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.popup_layer_banner .layer_popup_slide {
    position: relative;
}

.popup_layer_banner .layer_popup_link {
    display: block;
    width: 100%;
    line-height: 0;
}

.popup_layer_banner .layer_popup_img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

.popup_layer_banner .layer_popup_cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    /*background: rgba(0, 0, 0, 0.45);*/
    pointer-events: none;
}

.popup_layer_banner .layer_popup_cta_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    max-width: 100%;
    white-space: nowrap;
    height: 44px;
    padding: 0 40px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    pointer-events: auto;
    box-sizing: border-box;
}

.popup_layer_banner .layer_popup_pagination {
    position: absolute;
    top: 16px;
    left: 16px;
    right: auto;
    bottom: auto;
    z-index: 3;
    width: auto;
    height: auto;
    padding: 0px 8px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.3);
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    box-sizing: border-box;
}

.popup_layer_banner .layer_popup_pagination .swiper-pagination-inner {
    display: flex;
    align-items: center;
}

.popup_layer_banner .layer_popup_pagination .swiper-pagination-current {
    min-width: 9px;
    color: var(--color-wo9);
}

.popup_layer_banner .layer_popup_pagination .swiper-pagination-total {
    display: flex;
    align-items: center;
    color: var(--color-wo3);
}

.popup_layer_banner .layer_popup_pagination .swiper-pagination-total::before {
    width: 1px;
    height: 8px;
    margin: 0 6px;
    background-color: var(--color-wo1);
    content: "";
}

.popup_layer_banner .layer_popup_nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transform: translateY(-50%);
}

.popup_layer_banner .layer_popup_nav_prev {
    left: 0;
}

.popup_layer_banner .layer_popup_nav_next {
    right: 0;
}

.popup_layer_banner .layer_popup_nav_next .ico {
    transform: scaleX(-1);
}

.popup_layer_banner .layer_popup_nav.swiper-button-lock,
.popup_layer_banner.single_slide .layer_popup_nav,
.popup_layer_banner.single_slide .layer_popup_pagination {
    display: none;
}

.popup_layer_banner .layer_popup_close {
    z-index: 4;
}

.popup_layer_banner .layer_popup_close_media {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.1);
    box-sizing: content-box;
}

.popup_layer_banner .layer_popup_close_media:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.popup_layer_banner .layer_popup_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 12px 16px;
    background: var(--color-up);
    box-sizing: border-box;
}

.popup_layer_banner .layer_popup_hide {
    min-width: 0;
    flex: 0 1 auto;
    width: fit-content;
    max-width: calc(100% - 48px);
}

.popup_layer_banner .layer_popup_hide .checkbox_label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-g9);
    white-space: nowrap;
}

.popup_layer_banner .layer_popup_close_footer {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex;
    flex-shrink: 0;
    margin-left: auto;
}

/* Tablet / PC (≥768): arrows + close on media, PC image */
@media screen and (min-width: 768px) {
    .popup_layer_banner .only_pc {
        display: block !important;
    }

    .popup_layer_banner .only_mo {
        display: none !important;
    }

    /* Tablet (768~1024): 팝업 폭 = 화면의 90% */
    .popup_layer_banner .popup_inner {
        width: 90vw;
        max-width: 90vw;
        max-height: 86vh;
    }

    .popup_layer_banner .layer_popup_media {
        width: 100%;
        max-height: calc(86vh - 52px);
    }

    .popup_layer_banner .layer_popup_img.only_pc {
        display: block;
        width: 100%;
        height: auto;
        max-height: calc(86vh - 52px);
        object-fit: contain;
        object-position: center;
    }

    .popup_layer_banner .layer_popup_close_footer {
        display: none !important;
    }

    .popup_layer_banner .layer_popup_close_media {
        display: inline-flex !important;
    }

    .popup_layer_banner .layer_popup_nav {
        display: flex;
    }
}

/* PC (≥1025): 팝업 폭 = 화면의 80% (최대 1400px) */
@media screen and (min-width: 1025px) {
    .popup_layer_banner .popup_inner {
        width: min(1400px, 80vw);
        max-width: min(1400px, 80vw);
    }
}

/* Mobile (≤767): swipe only, close in footer, mobile image */
@media screen and (max-width: 767px) {
    .popup_layer_banner .only_pc {
        display: none !important;
    }

    .popup_layer_banner .only_mo {
        display: block !important;
    }

    .popup_layer_banner .popup_inner {
        top: auto;
        bottom: 0;
        left: 50%;
        /* Mobile: 폭 100% / 높이 85vh 고정 (이미지 비율 무시) */
        width: 100vw;
        max-width: 100vw;
        height: 85vh;
        max-height: 85vh;
        border-radius: 25px 25px 0 0;
        overflow: hidden;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .popup_layer_banner .layer_popup_media {
        flex: 1 1 auto;
        width: 100%;
        height: calc(85vh - 56px);
        max-height: calc(85vh - 56px);
        min-height: 0;
    }

    .popup_layer_banner .layer_popup_swiper,
    .popup_layer_banner .layer_popup_swiper .swiper-wrapper,
    .popup_layer_banner .layer_popup_slide {
        width: 100%;
        height: 100%;
        max-height: 100%;
    }

    .popup_layer_banner .layer_popup_link {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 0;
    }

    /* 이미지는 미디어 영역(100% x 85vh-푸터)을 비율 무시하고 꽉 채운다 */
    .popup_layer_banner .layer_popup_img.only_mo {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100%;
        object-fit: fill;
        object-position: center;
    }

    .popup_layer_banner .layer_popup_pagination {
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    .popup_layer_banner .layer_popup_pagination .swiper-pagination-inner {
        justify-content: center;
    }

    .popup_layer_banner .layer_popup_nav {
        display: none !important;
    }

    .popup_layer_banner .layer_popup_close_media {
        display: none !important;
    }

    .popup_layer_banner .layer_popup_close_footer {
        position: static !important;
        top: auto !important;
        right: auto !important;
        display: inline-flex !important;
        flex-shrink: 0;
        margin-left: auto;
    }

    .popup_layer_banner .layer_popup_cta {
        padding: 0;
        background: transparent;
    }

    .popup_layer_banner .layer_popup_cta_btn {
        width: 100%;
        min-width: 0;
        height: 48px;
        border-radius: 0;
        margin: 0px 20px 16px 20px;
    }

    .popup_layer_banner .layer_popup_footer {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        width: 100%;
        min-height: 56px;
        padding: 12px 12px 12px 16px;
        box-sizing: border-box;
    }

    .popup_layer_banner .layer_popup_hide .checkbox_mark {
        width: 20px;
        height: 20px;
        background-size: cover;
    }

    .popup_layer_banner .layer_popup_hide .checkbox_label {
        font-size: 13px;
    }
}

/* Mobile landscape (≤767, 가로 > 세로): 가로형(PC) 배너 이미지 사용 */
@media screen and (max-width: 767px) and (orientation: landscape) {
    .popup_layer_banner .only_pc {
        display: block !important;
    }

    .popup_layer_banner .only_mo {
        display: none !important;
    }

    .popup_layer_banner .layer_popup_img.only_pc {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100%;
        object-fit: fill;
        object-position: center;
    }
}

/* ===== Dark Theme ===== */
:root {
    --color-primary: #ffffff;
    --color-secondary: #ff2259;
    --color-bg: #202022;
    --color-up: #141416;
    --color-g1: #1f1f21;
    --color-g2: #2e2e30;
    --color-g3: #4a4a4c;
    --color-g4: #6e6e70;
    --color-g5: #8a8a8c;
    --color-g6: #a0a0a2;
    --color-g7: #c4c4c6;
    --color-g8: #3e3e40;
    --color-g9: #f2f2f4;
    --color-bo1: rgba(255, 255, 255, 0.08);
    --color-bo3: rgba(255, 255, 255, 0.16);
    --color-bo5: rgba(255, 255, 255, 0.32);
    --color-bo7: rgba(255, 255, 255, 0.56);
    --color-bo9: rgba(255, 255, 255, 0.8);
}

body {
    background-color: var(--color-bg);
    color: var(--color-g9);
}

/* Header logos — dark-background (white) assets */
.header .logo {
    background-image: url('/assets/img/logo_pc_dark_zh-tw-4d2131e1ff827774bfccb279444830b2.png');
}

@media screen and (max-width: 1024px) {
    .header .logo {
        background-image: url('/assets/img/logo_mo_dark_zh-tw-8f7ae66f42a8436ff296dabe12a99de0.png');
    }
}

html[lang="en"] .header .logo {
    background-image: url('/assets/img/logo_pc_dark_en-a60e569f1ac88f9d8d995a895fc7e990.png');
}

@media screen and (max-width: 1024px) {
    html[lang="en"] .header .logo {
        background-image: url('/assets/img/logo_mo_dark_en-e7f15fe01a0579893981329aefcc531d.png');
    }
}

html[lang="zh-tw"] .header .logo {
    background-image: url('/assets/img/logo_pc_dark_zh-tw-4d2131e1ff827774bfccb279444830b2.png');
}

@media screen and (max-width: 1024px) {
    html[lang="zh-tw"] .header .logo {
        background-image: url('/assets/img/logo_mo_dark_zh-tw-8f7ae66f42a8436ff296dabe12a99de0.png');
    }
}

html[lang="zh-cn"] .header .logo {
    background-image: url('/assets/img/logo_pc_dark_zh-cn-a60e569f1ac88f9d8d995a895fc7e990.png');
}

@media screen and (max-width: 1024px) {
    html[lang="zh-cn"] .header .logo {
        background-image: url('/assets/img/logo_mo_dark_zh-cn-e7f15fe01a0579893981329aefcc531d.png');
    }
}

html[lang="id"] .header .logo {
    background-image: url('/assets/img/logo_pc_dark_id-a60e569f1ac88f9d8d995a895fc7e990.png');
}

@media screen and (max-width: 1024px) {
    html[lang="id"] .header .logo {
        background-image: url('/assets/img/logo_mo_dark_id-e7f15fe01a0579893981329aefcc531d.png');
    }
}

html[lang="th"] .header .logo {
    background-image: url('/assets/img/logo_pc_dark_th-a60e569f1ac88f9d8d995a895fc7e990.png');
}

@media screen and (max-width: 1024px) {
    html[lang="th"] .header .logo {
        background-image: url('/assets/img/logo_mo_dark_th-e7f15fe01a0579893981329aefcc531d.png');
    }
}

/* Hardcoded light fade gradients → dark bg */
.key_visual_name .swiper::before,
.key_visual_name .swiper::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, var(--color-bg) 100%);
}

@media screen and (min-width: 1025px) {
    .box_tab_swiper::before {
        background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 15%, var(--color-bg) 55%);
    }

    .box_tab_swiper::after {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, var(--color-bg) 55%);
    }
}

/* Intentionally dark surfaces that must not invert with g9 */
/* architect.min.css:2026 은 두 팝업 배경을 var(--color-g9)로 지정하는데, 다크 테마에서 g9가
   #f2f2f4(밝은색)로 재정의되어(위 :root) 배경이 화이트톤으로 뜬다 → 영상/갤러리 상세 팝업 모두
   실제 어두운 값으로 고정한다 */
.popup_detail_media,
.popup_detail_media_image {
    background-color: #1a1a1c;
}

/* 미디어 상세 팝업 X — 흰 버튼 위에서 invert 제거 + 더 진한 아이콘 */
.popup_detail_media .btn_close_popup .ico_close_black,
.popup_detail_media_image .btn_close_popup .ico_close_black {
    filter: none;
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.52849 3.46978L3.99816 2.93945L2.9375 4.00011L3.46783 4.53044L10.9375 12.0001L3.46783 19.4698L2.9375 20.0001L3.99816 21.0608L4.52849 20.5304L11.9982 13.0608L19.4678 20.5304L19.9982 21.0608L21.0588 20.0001L20.5285 19.4698L13.0588 12.0001L20.5285 4.53044L21.0588 4.00011L19.9982 2.93945L19.4678 3.46978L11.9982 10.9395L4.52849 3.46978Z' fill='%23111111'/%3E %3C/svg%3E");
}

/* 미디어 상세 팝업 X — hover 시 버튼이 사라져 보이는 현상 수정 */
/* 아래 .btn_ghost:hover 규칙이 배경을 transparent로 강제해, architect.min.css:2123의
   흰 배경(var(--color-hybewhite))을 덮어써서 어두운 팝업 위에서 버튼이 사라진 것처럼 보였다
   → 팝업 스코프에서 모든 상태의 흰 배경을 유지하고, hover는 살짝 어두운 톤으로 피드백만 준다 */
.popup_detail_media .btn_close_popup,
.popup_detail_media .btn_close_popup:focus,
.popup_detail_media .btn_close_popup:active,
.popup_detail_media_image .btn_close_popup,
.popup_detail_media_image .btn_close_popup:focus,
.popup_detail_media_image .btn_close_popup:active {
    background-color: var(--color-hybewhite);
    border-color: var(--color-hybewhite);
}

@media screen and (min-width: 1025px) {
    .popup_detail_media .btn_close_popup:hover,
    .popup_detail_media_image .btn_close_popup:hover {
        background-color: #e2e2e4;
        border-color: #e2e2e4;
    }
}

.toast.dark {
    background-color: #3e3e40;
}

.toast.dark .text {
    color: #f2f2f4;
}

.btn {
    background-color: #3e3e40;
    border-color: #3e3e40;
}

@media screen and (min-width: 1025px) {
    .btn:hover {
        background-color: #1a1a1c;
        border-color: #1a1a1c;
    }
}

/* Ghost buttons must stay transparent (do not inherit .btn dark fill) */
.btn_ghost,
.btn_ghost:hover,
.btn_ghost:focus,
.btn_ghost:active {
    background-color: transparent;
    border-color: transparent;
}

.btn_ghost .btn_text {
    color: var(--color-g7);
}

.btn_top {
    background-color: var(--color-up);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4), 0 1px 18px 0 rgba(0, 0, 0, 0.25);
}

/* Dark-filled icons → light on dark bg */
.ico_chevron_right_bold,
.ico_outlink_bold,
.ico_hamburger,
.ico_menu_close,
.ico_chevronup,
.ico_share,
.ico_logo_drimage,
.ico_logo_aquatree,
.ico_logo_hybe,
.ico_notify,
.ico_total,
.ico_close_black,
.ico_return,
.ico_check {
    filter: invert(1) brightness(1.15);
}

[class*=btn_swiper_]:not(.swiper-button-disabled) {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8.75 5.5L15.25 12L8.75 18.5' stroke='%23f2f2f4' stroke-width='1.5' stroke-linecap='square'/%3E %3C/svg%3E");
}

[class*=btn_swiper_].swiper-button-disabled {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15.25 5.5L8.75 12L15.25 18.5' stroke='%234a4a4c' stroke-width='1.5' stroke-linecap='square'/%3E %3C/svg%3E");
}

/* Checkbox — visible on dark surfaces */
.checkbox_mark {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Crect x='0.5' y='0.5' width='23' height='23' stroke='%234a4a4c'/%3E %3C/svg%3E");
}

.checkbox_wrapper:hover .checkbox_mark {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect x='0.5' y='0.5' width='23' height='23' fill='white' fill-opacity='0.06' stroke='%236e6e70'/%3E %3C/svg%3E");
}

/* Layer popup media stays near-black */
.popup_layer_banner .layer_popup_media {
    background: #1a1a1c;
}

/* GNB divider brush — soften for dark */
.gnb_link.is_divider::before {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Download CTA on dark page: light button + dark text (matches mockup) */
.download_option_link.type_dark {
    background-color: var(--color-g9);
    color: var(--color-g1);
}

/* Additional dark icons used site-wide */
.ico_me,
.ico_search_black,
.ico_pencil,
.ico_more_black,
.ico_download,
.ico_outlink,
.ico_reply,
.ico_refresh,
.ico_gift,
.ico_chevrondown:not(.ico_chevrondown_gray),
.ico_arrow_down_black {
    filter: invert(1) brightness(1.15);
}

/* GNB depth / outlink chevrons (default dark stroke) */
.gnb_item.is_depth>.gnb_link::after,
.gnb_item_outlink>.gnb_link::after,
.gnb_depth_link::after,
.header_navbar .select_btn .ico_arrow_down {
    filter: invert(1) brightness(1.15);
}

/* Checked checkbox — brighter fill on dark surfaces */
.checkbox_wrapper input:checked~.checkbox_mark {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='24' height='24' fill='%23f2f2f4'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.3283 7.22349C18.6363 7.52561 18.6411 8.02024 18.339 8.32829L10.3703 16.4533C10.2243 16.6022 10.0248 16.6865 9.81629 16.6875C9.60778 16.6885 9.40752 16.6061 9.26007 16.4587L5.35382 12.5524C5.04873 12.2473 5.04873 11.7527 5.35382 11.4476C5.65892 11.1425 6.15358 11.1425 6.45868 11.4476L9.80711 14.796L17.2235 7.23421C17.5256 6.92617 18.0202 6.92137 18.3283 7.22349Z' fill='%231a1a1c'/%3E %3C/svg%3E");
}

.checkbox_wrapper input:checked:hover~.checkbox_mark {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='24' height='24' fill='%23ffffff'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.3283 7.22349C18.6363 7.52561 18.6411 8.02024 18.339 8.32829L10.3703 16.4533C10.2243 16.6022 10.0248 16.6865 9.81629 16.6875C9.60778 16.6885 9.40752 16.6061 9.26007 16.4587L5.35382 12.5524C5.04873 12.2473 5.04873 11.7527 5.35382 11.4476C5.65892 11.1425 6.15358 11.1425 6.45868 11.4476L9.80711 14.796L17.2235 7.23421C17.5256 6.92617 18.0202 6.92137 18.3283 7.22349Z' fill='%231a1a1c'/%3E %3C/svg%3E");
}

/* Outlink SVG in custom download notice — light stroke */
.download_mobile_detail_link.is_outlink::after {
    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='%23a0a0a2'/%3E %3C/svg%3E");
}

@media screen and (max-width: 768px) {
    .download_mobile_detail_link.is_outlink::after {
        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='%23a0a0a2'/%3E %3Cpath d='M6 2L1 7' stroke='%23a0a0a2'/%3E %3C/svg%3E");
    }
}

/* ===== Dark Theme — contrast / component fixes ===== */

/* Active round/square tabs: white bg needs dark text (was hybewhite → invisible) */
.tab_round .tab_btn.is_active,
.tab_square .tab_btn.is_active {
    color: var(--color-hybeblack);
}

/* Header GNB depth submenu: was g8 (dark) on dark panel */
.gnb_depth_link {
    color: var(--color-g9);
}

@media screen and (min-width: 1025px) {
    .gnb_depth_link:hover {
        background-color: var(--color-g2);
        color: var(--color-g9);
    }
}

@media screen and (max-width: 1024px) {
    .gnb_depth_link {
        color: var(--color-g7);
    }
}

/* Login chip active: white bg needs dark text */
.header .btn_login:active,
.header .btn_login:focus-visible {
    color: var(--color-hybeblack);
    border-color: var(--color-g9);
    background: var(--color-g9);
}

/* Mobile page name in sticky navbar */
.header_navbar_page_name {
    color: var(--color-g9);
}

/* Write / edit CTAs — design: white button + dark pencil */
.filter_btn_edit,
.btn_fixed_right {
    background-color: var(--color-g9);
    border-color: var(--color-g9);
}

.filter_btn_edit:hover,
.btn_fixed_right:hover {
    background-color: #ffffff;
    border-color: #ffffff;
}

.filter_btn_edit .ico_pencil_white,
.btn_fixed_right .ico_pencil_white,
.btn_fixed_right .ico_reply_white {
    filter: invert(1) brightness(0.12);
}

/* Scroll-to-top stays dark; write FAB is white (above) */
.btn_top {
    background-color: var(--color-g8);
    border-color: var(--color-g8);
}

.btn_top .ico_chevronup {
    filter: invert(1) brightness(1.15);
}

/* Selects / inputs — light text on dark fields */
.select_text,
.select_text.selected,
.radio_label {
    color: var(--color-g9);
}

/* 모바일 native select — hybeblack(#000) 고정값 대신 다크 테마 텍스트색 */
.select_box_mo {
    color: var(--color-g9);
    color-scheme: dark;
}

.select_box_mo:disabled {
    color: var(--color-g4);
}

.select_box_mo option {
    background-color: var(--color-up);
    color: var(--color-g9);
}

/* 모바일 헤더 native select 화살표 — architect.min.css의 #1A1A1C 고정 stroke는 다크 배경에서 안 보임 */
.header_navbar .select_box_mo {
    background-image: url("data:image/svg+xml, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4.5 6.5L8 10L11.5 6.5' stroke='%23f2f2f4' stroke-linecap='square'/%3E %3C/svg%3E");
}

.header_navbar .select_box_mo:disabled {
    background-image: url("data:image/svg+xml, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4.5 6.5L8 10L11.5 6.5' stroke='%234a4a4c' stroke-linecap='square'/%3E %3C/svg%3E");
}

.coupon_box .select_box_mo {
    color: var(--color-g9);
    color-scheme: dark;
}

.coupon_box .select_box_mo:disabled {
    color: var(--color-g4);
}

.coupon_box .select_box_mo option {
    background-color: var(--color-up);
    color: var(--color-g9);
}

.input {
    color: var(--color-g9);
    background: var(--color-up);
}

.input:focus {
    border-color: var(--color-g7);
    outline: 4px solid rgba(255, 255, 255, 0.06);
}

.search_input {
    color: var(--color-g9);
}

.search_input:hover,
.search_input:focus {
    border-color: var(--color-g7);
}

.search_input:focus {
    outline: 4px solid rgba(255, 255, 255, 0.06);
}

.select_options {
    background-color: var(--color-up);
}

.select_btn:hover,
.select_btn:focus,
.select_btn[aria-expanded=true] {
    border-color: var(--color-g7);
}

.pagination_mobile .pagination_current {
    color: var(--color-g9);
}

.pagination_number.active {
    color: var(--color-hybeblack);
}

/* Filter chips — selected state was dark-on-dark */
.filter_item.is_selected .text {
    color: var(--color-g9);
}

.filter_list.type_check .is_selected .filter_btn::before {
    background-image: url("data:image/svg+xml, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M3.5 8L6.5 11L12 5.5' stroke='%23f2f2f4' stroke-linecap='square'/%3E %3C/svg%3E");
}

.filter_list_sub.type_check .filter_item.is_all.is_selected .filter_btn::before {
    background: transparent url("data:image/svg+xml, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='8' cy='8' r='2.5' fill='%23f2f2f4'/%3E %3C/svg%3E") center no-repeat;
}

/* Outline / secondary button text was g8 (too dark) */
.btn_outline .btn_text {
    color: var(--color-g7);
}

.btn_like_detail_page .number,
.category_box_title {
    color: var(--color-g7);
}

/* Popups / elevated surfaces → dark panels with light text */
.popup_inner {
    background-color: #2e2f32;
    color: var(--color-g9);
}

.popup_description {
    color: var(--color-g7);
}

/* 팝업 문구: 글자 단위(break-all) 대신 어절/단어 단위로 줄바꿈 (한/영/태/한자, iOS Safari 9+) */
.popup_title,
.popup_description,
.popup_alert_desc,
.popup_alert .popup_content,
.popup_confirm .popup_content {
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* architect.min.css의 element reset(p, ul, li …)이 word-break: break-all을 직접 지정해
   .popup_content의 상속을 덮어버린다 → 해당 태그만 다시 지정 */
.popup_alert .popup_content p,
.popup_alert .popup_content ul,
.popup_alert .popup_content ol,
.popup_alert .popup_content li,
.popup_confirm .popup_content p,
.popup_confirm .popup_content ul,
.popup_confirm .popup_content ol,
.popup_confirm .popup_content li {
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.popup_cookies .popup_inner,
.popup .select_area .select_option_btn {
    background-color: var(--color-up);
}

/* GNB outlink chevrons — light stroke */
.gnb_link.is_outlink::after {
    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='%23c4c4c6'/%3E %3C/svg%3E");
}

@media screen and (max-width: 1024px) {
    .gnb_link.is_outlink::after {
        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='%23a0a0a2'/%3E %3Cpath d='M6 2L1 7' stroke='%23a0a0a2'/%3E %3C/svg%3E");
    }
}

/* Sort selected indicator — light dot on dark bg */
.box_sort .sort_item.is_selected .sort_btn:before {
    background: transparent url("data:image/svg+xml, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='8' cy='8' r='2.5' fill='%23F2F2F4'/%3E %3C/svg%3E") center no-repeat;
}

/* Search / refresh / swiper ghost buttons — no bg, no hover fill */
.btn_search,
.btn_search:hover,
.btn_search:focus,
.btn_search:active,
.js_btn_refresh,
.js_btn_refresh:hover,
.js_btn_refresh:focus,
.js_btn_refresh:active,
.key_visual_name [class*=btn_swiper_],
.key_visual_name [class*=btn_swiper_]:hover,
.key_visual_name [class*=btn_swiper_]:focus,
.key_visual_name [class*=btn_swiper_]:active,
.box_head_group_btn [class*=btn_swiper_],
.box_head_group_btn [class*=btn_swiper_]:hover,
.box_head_group_btn [class*=btn_swiper_]:focus,
.box_head_group_btn [class*=btn_swiper_]:active {
    background-color: transparent;
    border-color: transparent;
}

@media screen and (min-width: 1025px) {

    .btn_search:hover,
    .js_btn_refresh:hover,
    .key_visual_name [class*=btn_swiper_]:hover,
    .box_head_group_btn [class*=btn_swiper_]:hover {
        background-color: transparent;
        border-color: transparent;
    }
}

/* ===== Post detail / comments (match design) ===== */

/* Outline action buttons: transparent + light border (not solid dark fill) */
.btn_outline,
.btn_outline:hover,
.btn_outline:focus,
.btn_outline:active {
    background-color: transparent;
    border-color: var(--color-g5);
}

.btn_outline .btn_text {
    color: var(--color-g9);
}

@media screen and (min-width: 1025px) {
    .btn_outline:hover {
        background-color: rgba(255, 255, 255, 0.06);
        border-color: var(--color-g7);
    }
}

/* Share icon — PNG (light strokes for dark theme) */
.ico_share_gray {
    width: 24px;
    height: 24px;
    background-image: url('/assets/img/ico_share_gray-6605c7d6822951e363c6da02ac8c424e.png');
    background-size: contain;
    background-position: center;
}

/* Outline button icons — brighten gray strokes for dark theme */
.btn_outline .ico_heart_line,
.btn_outline .ico_back {
    filter: brightness(1.8);
}

/* Comment composer — dark panel */
.form_cm,
.form_cm_edit {
    background-color: #2e2f32;
    border-color: var(--color-g2);
    color: var(--color-g9);
}

.form_cm_textarea {
    color: var(--color-g9);
    background: transparent;
}

/* 댓글 입력창/placeholder: 글자 단위(break-all) 대신 어절/단어 단위로 줄바꿈 (한/영/태/한자, iOS Safari 9+) */
.form_cm_textarea,
.form_cm_textarea_mirror {
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.form_cm_textarea::placeholder {
    color: var(--color-g5);
}

.form_cm_submit {
    background-color: var(--color-g8);
    color: var(--color-g9);
}

.form_cm_submit:disabled {
    background-color: var(--color-g2);
    color: var(--color-g5);
}

.form_cm_submit.form_cm_cancel {
    color: var(--color-g7);
}

.form_cm.form_cm_dragover::after {
    background-color: rgba(46, 47, 50, 0.9);
}

/* Image upload icon — match muted text (#8a8a8c / --color-g5), not near-white */
.form_cm_label::before,
.form_cm.is_disable .form_cm_label::before {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M21.5 21.5H2.5V2.5H21.5V21.5ZM4 18.8105V20H9.43945L12.5645 16.875L9.25 13.5605L4 18.8105ZM11.5605 20H18.9395L15.25 16.3105L11.5605 20ZM4 16.6895L9.25 11.4395L13.625 15.8145L15.25 14.1895L20 18.9395V4H4V16.6895ZM15.25 7C16.4926 7 17.5 8.00736 17.5 9.25C17.5 10.4926 16.4926 11.5 15.25 11.5C14.0074 11.5 13 10.4926 13 9.25C13 8.00736 14.0074 7 15.25 7ZM15.25 8.5C14.8358 8.5 14.5 8.83579 14.5 9.25C14.5 9.66421 14.8358 10 15.25 10C15.6642 10 16 9.66421 16 9.25C16 8.83579 15.6642 8.5 15.25 8.5Z' fill='%238a8a8c'/%3E %3C/svg%3E");
}

.form_cm .ico_photo {
    filter: brightness(0.65);
}

/* Empty comments icon — light so it reads on dark bg */
.no_data .ico_comment {
    filter: brightness(1.6);
}

/* en/id: tighter GNB/footer spacing for longer labels */
@media screen and (min-width: 1025px) {
    html[lang="en"] .gnb_list {
        gap: min(15px, 2vw);
    }

    html[lang="id"] .gnb_list {
        gap: min(13px, 2vw);
    }

    html[lang="th"] .gnb_list {
        gap: min(18px, 2vw);
    }

    html[lang="en"] .footer_nav_list,
    html[lang="id"] .footer_nav_list {
        gap: 0 32px;
    }
}
/* Pagination arrows — enabled/disabled tones were reversed on the dark UI:
   enabled arrows read as bright (g-light), disabled as dimmed. */
.pagination_button:not(:disabled) .ico_chevron_left {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='%24icon-edge-24-chevronleft'%3E %3Cpath id='arrow' d='M15.25 5.5L8.75 12L15.25 18.5' stroke='rgba(204, 204, 206, 1)' stroke-width='1.5' stroke-linecap='square'/%3E %3C/g%3E %3C/svg%3E")
}

.pagination_button:not(:disabled) .ico_chevron_right {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='%24icon-edge-24-chevronright'%3E %3Cpath id='arrow' d='M8.75 5.5L15.25 12L8.75 18.5' stroke='rgba(204, 204, 206, 1)' stroke-width='1.5' stroke-linecap='square'/%3E %3C/g%3E %3C/svg%3E")
}

.pagination_button:not(:disabled) .ico_double_chevron_left {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='%24icon-edge-24-doublechevronleft'%3E %3Cpath id='arrow' fill-rule='evenodd' clip-rule='evenodd' d='M11.7197 4.96978L12.25 4.43945L13.3107 5.50011L12.7803 6.03044L6.81065 12.0001L12.7803 17.9698L13.3107 18.5001L12.25 19.5608L11.7197 19.0304L5.21966 12.5304L4.68933 12.0001L5.21966 11.4698L11.7197 4.96978ZM17.7197 4.96978L18.25 4.43945L19.3107 5.50011L18.7803 6.03044L12.8107 12.0001L18.7803 17.9698L19.3107 18.5001L18.25 19.5608L17.7197 19.0304L11.2197 12.5304L10.6893 12.0001L11.2197 11.4698L17.7197 4.96978Z' fill='rgba(204, 204, 206, 1)'/%3E %3C/g%3E %3C/svg%3E")
}

.pagination_button:not(:disabled) .ico_double_chevron_right {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='%24icon-edge-24-doublechevronright'%3E %3Cpath id='arrow' fill-rule='evenodd' clip-rule='evenodd' d='M6.28032 4.96978L5.74999 4.43945L4.68933 5.50011L5.21966 6.03044L11.1893 12.0001L5.21966 17.9698L4.68933 18.5001L5.74999 19.5608L6.28032 19.0304L12.7803 12.5304L13.3107 12.0001L12.7803 11.4698L6.28032 4.96978ZM12.2803 4.96978L11.75 4.43945L10.6893 5.50011L11.2197 6.03044L17.1893 12.0001L11.2197 17.9698L10.6893 18.5001L11.75 19.5608L12.2803 19.0304L18.7803 12.5304L19.3107 12.0001L18.7803 11.4698L12.2803 4.96978Z' fill='rgba(204, 204, 206, 1)'/%3E %3C/g%3E %3C/svg%3E")
}

.pagination_button:disabled .ico_chevron_left {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='%24icon-edge-24-chevronleft'%3E %3Cpath id='arrow' d='M15.25 5.5L8.75 12L15.25 18.5' stroke='rgba(128, 128, 130, 1)' stroke-width='1.5' stroke-linecap='square'/%3E %3C/g%3E %3C/svg%3E")
}

.pagination_button:disabled .ico_chevron_right {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='%24icon-edge-24-chevronright'%3E %3Cpath id='arrow' d='M8.75 5.5L15.25 12L8.75 18.5' stroke='rgba(128, 128, 130, 1)' stroke-width='1.5' stroke-linecap='square'/%3E %3C/g%3E %3C/svg%3E")
}

.pagination_button:disabled .ico_double_chevron_left {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='%24icon-edge-24-doublechevronleft'%3E %3Cpath id='arrow' fill-rule='evenodd' clip-rule='evenodd' d='M11.7197 4.96978L12.25 4.43945L13.3107 5.50011L12.7803 6.03044L6.81065 12.0001L12.7803 17.9698L13.3107 18.5001L12.25 19.5608L11.7197 19.0304L5.21966 12.5304L4.68933 12.0001L5.21966 11.4698L11.7197 4.96978ZM17.7197 4.96978L18.25 4.43945L19.3107 5.50011L18.7803 6.03044L12.8107 12.0001L18.7803 17.9698L19.3107 18.5001L18.25 19.5608L17.7197 19.0304L11.2197 12.5304L10.6893 12.0001L11.2197 11.4698L17.7197 4.96978Z' fill='rgba(128, 128, 130, 1)'/%3E %3C/g%3E %3C/svg%3E")
}

.pagination_button:disabled .ico_double_chevron_right {
    background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='%24icon-edge-24-doublechevronright'%3E %3Cpath id='arrow' fill-rule='evenodd' clip-rule='evenodd' d='M6.28032 4.96978L5.74999 4.43945L4.68933 5.50011L5.21966 6.03044L11.1893 12.0001L5.21966 17.9698L4.68933 18.5001L5.74999 19.5608L6.28032 19.0304L12.7803 12.5304L13.3107 12.0001L12.7803 11.4698L6.28032 4.96978ZM12.2803 4.96978L11.75 4.43945L10.6893 5.50011L11.2197 6.03044L17.1893 12.0001L11.2197 17.9698L10.6893 18.5001L11.75 19.5608L12.2803 19.0304L18.7803 12.5304L19.3107 12.0001L18.7803 11.4698L12.2803 4.96978Z' fill='rgba(128, 128, 130, 1)'/%3E %3C/g%3E %3C/svg%3E")
}

/* ===== 쿠폰 등록 화면 — 다국어 문구 줄바꿈 처리 ===== */
/* architect.min.css의 element reset(li, p, select, ul …)이 word-break: break-all을 직접
   지정해 인도네시아어/영어 등에서 단어 중간이 끊긴다 → 쿠폰 화면 문구는 어절/단어 단위로 줄바꿈
   (한/영/태/한자, iOS Safari 9+ 대응으로 word-wrap 함께 지정) */
.coupon_box .box_title,
.coupon_box .box_title .title,
.coupon_box .select_label,
.coupon_box .select_text,
.coupon_box .select_option,
.coupon_box .select_option_btn,
.coupon_box .select_box_mo,
.coupon_box .select_box_mo option,
.coupon_box .coupon_form_input,
.coupon_box .btn_submit_coupon,
.coupon_box .btn_submit_coupon .btn_text,
.coupon_box .note_list,
.coupon_box .note_list .note_item {
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 제목이 여러 줄로 늘어나도 잘리지 않도록 */
.coupon_box .box_title .title {
    display: block;
}

/* PC 셀렉트 버튼 — 안내 문구가 두 줄 이상이 되어도 잘리지 않도록 높이 가변 */
.coupon_box .select_area.type_labal .select_box.only_pc .select_btn {
    height: auto;
    min-height: 64px;
}

/* 셀렉트 옵션 — 긴 서버/캐릭터명이 줄바꿈될 때 위아래 여백 확보 */
.coupon_box .select_option_btn {
    padding: 12px 16px;
}

@media screen and (max-width: 1024px) {
    /* 모바일 native select은 값 텍스트를 항상 한 줄로만 렌더링해서(줄바꿈 불가) 문구가 길면
       select box를 넘어가고, 절대배치로 덮어봐도 replaced element라 높이가 늘어나지 않아
       클릭 영역이 첫 줄에만 남는다 → 쿠폰 화면에서는 PC와 동일한 커스텀 셀렉트를 그대로 사용해
       문구가 어절 단위로 줄바꿈되며 높이가 늘어나게 한다 */
    .coupon_box .select_area.type_labal .select_box.only_pc {
        display: flex !important;
    }

    .coupon_box .select_area.type_labal > .select_label.only_mo,
    .coupon_box .select_area.type_labal > .select_box_mo {
        display: none !important;
    }

    /* 커스텀 셀렉트가 자체 테두리를 가지므로 영역의 테두리/여백은 제거(이중 테두리 방지) */
    .coupon_box .select_area.type_labal {
        min-height: 0;
        padding: 0;
        border: 0;
    }

    /* 셀렉트 버튼 — 라벨 + 여러 줄 문구를 모두 감싸도록 높이 가변 */
    .coupon_box .select_area.type_labal .select_box.only_pc .select_btn {
        height: auto;
        min-height: 64px;
        padding: 10px 44px 11px 15px;
    }

    /* 기존 모바일 native select과 동일한 글자 크기 유지 */
    .coupon_box .select_area.type_labal .select_text {
        font-size: 16px;
    }
}

/* ===== 검색 결과 없음(no_data) 문구 — 단어 단위 자동 줄바꿈 ===== */
/* .no_data.no_data_search .text는 architect.min.css:329에서 word-break: break-all을 직접
   지정하고, .txt_guide는 element reset(section 등, architect.min.css:419)에서 break-all을
   상속받아 단어 중간이 끊긴다 → 어절/단어 단위로 줄바꿈하고, 검색어처럼 한 단어가 한 줄보다
   길 때만 강제로 분리한다 (한/영/태/한자, iOS Safari 9+ 대응으로 word-wrap 함께 지정) */
.no_data,
.no_data .text,
.no_data .text span,
.no_data .sub_text,
.no_data .txt_guide,
.no_data.no_data_search .text,
.no_data.no_data_community .text,
.no_data.no_data_community .sub_text {
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 두 줄 이상으로 줄바꿈될 때도 가운데 정렬 유지 (.text는 이미 center) */
.no_data .txt_guide,
.no_data .sub_text {
    text-align: center;
}

/* ===== 모바일 GNB 메뉴 — 단어 단위 자동 줄바꿈 ===== */
/* .gnb_link / .gnb_depth_link는 element reset(architect.min.css:419)에서 word-break: break-all을
   상속받아 "Info Resmi Develop / er" 처럼 단어 중간이 끊긴다 → 모바일(1024px 이하)에서는
   어절/단어 단위로 줄바꿈하고, 한 단어가 한 줄보다 길 때만 강제로 분리한다.
   (한/영/태/인니/한자, iOS Safari 9+ 대응으로 word-wrap 함께 지정) */
@media screen and (max-width: 1024px) {
    .gnb .gnb_link,
    .gnb .gnb_depth_link {
        word-break: keep-all;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* 고정 높이(34px/40px)라 두 줄이 되면 문구가 영역을 넘치므로 높이를 가변으로 전환 */
    .gnb .gnb_link {
        height: auto;
        min-height: 34px;
    }

    .gnb .gnb_depth_link {
        height: auto;
        min-height: 40px;
    }

    /* 2단 배치(width: calc(50% - 8px))에서 좌우 항목의 줄 수가 달라도 정렬이 유지되도록 */
    .gnb .gnb_depth_item {
        display: flex;
    }

    .gnb .gnb_depth_item > .gnb_depth_link {
        width: 100%;
    }
}

/* ===== 인도네시아어 — 팝업 하단 버튼 폭을 문구 길이에 맞게 ===== */
/* architect.min.css:1463 의 .popup_footer .btn { min-width: 168px }는 문구가 짧은
   인도네시아어(Setuju semua 등)에서 버튼이 과하게 커 보인다 → id 로케일만 auto로 전환해
   내용 폭(+좌우 padding 20px)에 맞춘다. 다른 언어는 기존 168px 유지 */
html[lang="id"] .popup_footer .btn {
    min-width: auto;
}

/* ===== 에디터 모달(링크/이미지 첨부) 닫기(X) 버튼 — 다크 배경에서 보이도록 ===== */
/* summernote-lite.css:442 의 .close { color: #000; opacity: 0.2 }가 다크 모달 헤더
   (위 .note-modal-header 오버라이드)와 겹쳐 X가 사실상 안 보인다 → 밝은 색 + 불투명으로 전환.
   기본 opacity를 1로 올리면 summernote의 :hover(opacity: 1) 피드백이 사라지므로
   hover/focus는 색상 변화로 대체한다 */
.section_editor .note-editor .note-modal .close,
.section_editor .note-editor .note-modal-header .close {
    color: var(--color-g9) !important;
    opacity: 1 !important;
    font-size: 24px;
    line-height: 1;
    padding: 2px 4px !important;
    cursor: pointer;
}

.section_editor .note-editor .note-modal .close:hover,
.section_editor .note-editor .note-modal .close:focus,
.section_editor .note-editor .note-modal-header .close:hover,
.section_editor .note-editor .note-modal-header .close:focus {
    color: var(--color-g6) !important;
    opacity: 1 !important;
}

/* ===== 게시판 작성일시(post_date) — 단어 단위 자동 줄바꿈 ===== */
/* .post_date는 element reset(architect.min.css:419)에서 word-break: break-all을 상속받는다.
   값이 상대 시간 문구(CommonUtil.formatRelativeTime)일 때 "5 menit yang lalu",
   "5 minutes ago" 처럼 여러 단어가 되고, .post_info .post_date는 width: 96px 고정이라
   "5 menit ya / ng lalu" 처럼 단어 중간이 끊긴다 → 어절/단어 단위로 줄바꿈하고
   한 단어가 한 줄보다 길 때만 강제로 분리한다 (iOS Safari 9+ 대응으로 word-wrap 함께 지정) */
.post_date {
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ===== 다운로드 페이지 리모트 안내 제목 — 단어 단위 자동 줄바꿈 ===== */
/* .download_remote_title은 element reset(architect.min.css:419)에서 word-break: break-all을
   상속받는다. 문구(message.common.download.pc.description1)가 다국어에서 여러 단어이고
   "Bermain jarak jauh kapan saja..." 처럼 길어 단어 중간이 끊긴다 → 어절/단어 단위로
   줄바꿈하고 한 단어가 한 줄보다 길 때만 강제로 분리한다
   (문구에 삽입된 <br class="only_mo"> 강제 개행은 그대로 유지됨) */
.download_remote_title {
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ===== 다운로드 리모트 안내 — 초협소 화면(374px 이하) 세로 배치 ===== */
/* .download_remote_info는 architect.min.css:9383에서 로고와 문구를 가로로 나란히 두는데,
   1024px 이하에서 로고가 56px로 줄어도 남는 폭이 좁아 제목이 과도하게 여러 줄로 쪼개진다
   → 374px 이하에서는 로고를 위, 문구를 아래로 세로 배치하고 가운데 정렬한다 */
@media screen and (max-width: 374px) {
    .download_remote_info {
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    /* 가로 배치용 좌측 여백(architect.min.css:9393)을 세로 간격으로 전환 */
    .download_remote_content {
        margin: 8px 0 0;
    }
}

/* ===== 게시글 정렬 순서 필터 — 단어 단위 자동 줄바꿈 ===== */
/* .sort_btn은 button이라 element reset(architect.min.css:383)에서 word-break: break-all을
   상속받는다 → 다국어 라벨이 길어지면 "Paling Banyak Kome / ntar" 처럼 단어 중간이 끊긴다.
   어절/단어 단위로 줄바꿈하고 한 단어가 한 줄보다 길 때만 강제로 분리한다
   (iOS Safari 9+ 대응으로 word-wrap 함께 지정) */
.box_sort .sort_btn {
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* 버튼이 justify-content: center인데 텍스트가 두 줄이 되면 줄 정렬은 별도라 함께 지정 */
    text-align: center;
}

/* ===== 글/댓글 작성 제재 팝업(#userPostBlocked, #userCommentsBlocked) — 사유 텍스트 줄바꿈 ===== */
/* .popup .info_item .description은 flex: 1(architect.min.css:1929)인데 flex 아이템의 min-width 기본값이
   auto라서 공백 없는 긴 사유 문자열이 그대로 아이템 폭을 밀어내 팝업(552px)을 가로로 넘어간다
   → min-width: 0으로 축소를 허용하고, 한 단어가 한 줄보다 길면 강제로 분리해 세로로 늘어나게 한다 */
.popup_alert_large .info_item .description {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    word-wrap: break-word;
}

/* 사유 제목(Reason 등) 폭이 flex 축소로 찌그러지지 않도록 고정 */
.popup_alert_large .info_item .title {
    flex-shrink: 0;
}

/* ===== 신고하기 팝업(#user_charge) — 제목/작성자 라벨 줄바꿈 ===== */
/* .popup .info_item .title은 width: 90px(architect.min.css:1916)에 좌우 padding 24px라 실제 텍스트 폭이 42px,
   영문 "Author"가 "Auth / or"로 단어 중간에 끊긴다 → 라벨 폭을 넉넉히 늘리고 단어 중간 분리를 막는다 */
#user_charge .info_item .title {
    width: 120px;
    flex-shrink: 0;
    word-break: keep-all;
    overflow-wrap: normal;
}

@media screen and (max-width: 1024px) {
    #user_charge .info_item .title {
        width: 96px;
    }
}

/* ===== 댓글/답글 본문(.comment_detail_text) — 단어 단위 줄바꿈 ===== */
/* architect.min.css(3812, 1024px 이하 3825)가 word-break: break-all을 지정해 영문 단어가 글자 중간에서 끊긴다
   → 팝업 문구와 동일하게 어절/단어 단위(keep-all)로 바꾸고, 공백 없는 긴 URL 등 한 단어가 한 줄보다 길 때만
   overflow-wrap으로 강제 분리해 영역을 가로로 넘지 않게 한다. -webkit-line-clamp/더보기 동작은 그대로 유지 */
.comment_detail_text {
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ===== 댓글/답글 입력 폼 하단(.form_cm_utils) — 좁은 폭에서 버튼 줄바꿈 ===== */
/* .form_cm_group(architect.min.css:3502)이 flex nowrap이라 답글 폼처럼 좌우 여백으로 폭이 좁아지면
   글자수(0/1,000)와 취소/등록 버튼이 함께 찌그러져 "0/1,0 00", "Can cel", "Regis ter"처럼 글자가 깨진다
   → 글자수·버튼은 축소/줄바꿈을 막고(nowrap), 공간이 부족하면 버튼들이 글자수 아래 줄로 내려가도록 wrap 허용 */
.form_cm_utils {
    flex-wrap: wrap;
    row-gap: 8px;
}

.form_cm_group {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
    min-width: 0;
}

.form_cm_group .form_cm_count {
    flex-shrink: 0;
    white-space: nowrap;
}

.form_cm_group .btn_small {
    flex-shrink: 0;
    white-space: nowrap;
}