/* ============================================
   Battle Setting Modal 스타일
   ============================================ */

/* Battle Mode Modal - 모험 지역 드롭박스 위치 */
#battle-mode-modal .modal-day-select {
    /* battle_mode_select_modal.webp 이미지에 맞춰 조정 가능 */
    width: calc(var(--modal-img-width, 100%) * 0.65); /* 너비 (이미지 너비의 65%) */
    height: calc(var(--modal-img-height, 100%) * 0.15); /* 높이 (이미지 높이의 15%) */
    left: calc(var(--modal-img-width, 100%) * 0.145); /* 왼쪽 위치 (이미지 너비의 14.5%) */
    top: calc(var(--modal-img-height, 100%) * 0.27); /* 위쪽 위치 (이미지 높이의 29%) */
    /* 폰트 크기 조정 - 브라우저 크기에 따라 동적으로 변함 (최대 32px) */
    /* JavaScript의 adjustSelectFontSize 함수가 동적으로 조정합니다 */
    /* CSS에서 고정값을 설정하려면 아래 주석을 해제하세요 */
    /* font-size: clamp(16px, 3vw, 32px); */ /* 반응형 폰트 크기 (최소 16px, 최대 32px) */
}

/* Battle Mode Modal - 난이도 드롭박스 위치 */
#battle-mode-modal .modal-count-select {
    /* battle_mode_select_modal.webp 이미지에 맞춰 조정 가능 */
    width: calc(var(--modal-img-width, 100%) * 0.65); /* 너비 (이미지 너비의 65%) */
    height: calc(var(--modal-img-height, 100%) * 0.15); /* 높이 (이미지 높이의 15%) */
    left: calc(var(--modal-img-width, 100%) * 0.145); /* 왼쪽 위치 (이미지 너비의 14.5%) */
    top: calc(var(--modal-img-height, 100%) * 0.51); /* 위쪽 위치 (이미지 높이의 52.75%) */
}

/* Battle Mode Modal - 문제 타입 라디오 버튼 그룹 위치 */
#battle-mode-modal .modal-radio-group {
    /* battle_mode_select_modal.webp 이미지에 맞춰 조정 가능 */
    width: calc(var(--modal-img-width, 100%) * 0.8); /* 너비 (이미지 너비의 80%) */
    left: calc(var(--modal-img-width, 100%) * 0.1); /* 왼쪽 위치 (이미지 너비의 10%) */
    top: calc(var(--modal-img-height, 100%) * 0.7); /* 위쪽 위치 (이미지 높이의 70%) */
}

/* Battle Mode Modal - 시작하기 버튼 위치 */
#battle-mode-modal #battle-mode-modal-start-btn {
    /* battle_mode_select_modal.webp 이미지에 맞춰 조정 가능 */
    width: calc(var(--modal-img-width, 100%) * 0.37); /* 너비 (이미지 너비의 37%) */
    height: calc(var(--modal-img-height, 100%) * 0.115); /* 높이 (이미지 높이의 11.5%) */
    left: calc(var(--modal-img-width, 100%) * 0.0955); /* 왼쪽 위치 (이미지 너비의 9.55%) */
    top: calc(var(--modal-img-height, 100%) * 0.83); /* 위쪽 위치 (이미지 높이의 83%) */
}

/* Battle Mode Modal - 취소 버튼 위치 */
#battle-mode-modal #battle-mode-modal-cancel-btn {
    /* battle_mode_select_modal.webp 이미지에 맞춰 조정 가능 */
    width: calc(var(--modal-img-width, 100%) * 0.37); /* 너비 (이미지 너비의 37%) */
    height: calc(var(--modal-img-height, 100%) * 0.115); /* 높이 (이미지 높이의 11.5%) */
    left: calc(var(--modal-img-width, 100%) * 0.53); /* 왼쪽 위치 (이미지 너비의 53%) */
    top: calc(var(--modal-img-height, 100%) * 0.83); /* 위쪽 위치 (이미지 높이의 83%) */
}