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

/* Practice Mode Modal - 타이틀 */
#practice-mode-modal .modal-title {
    position: absolute;
    top: calc(var(--modal-img-height, 100%) * 0.12);
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px; /* 통계 패널 타이틀과 동일한 크기 */
    font-weight: bold;
    color: var(--gold, #ffd700);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 20;
    pointer-events: none;
    text-align: center;
}

/* Practice Mode Modal - 모험 지역 드롭박스 위치 */
#practice-mode-modal .modal-day-select {
    /* practice_mode_select_modal .webp 이미지에 맞춰 조정 가능 (파일명에 공백 포함) */
    width: calc(var(--modal-img-width, 100%) * 0.65); /* 너비 (이미지 너비의 65%) */
    height: calc(var(--modal-img-height, 100%) * 0.18); /* 높이 (이미지 높이의 15%) */
    left: calc(var(--modal-img-width, 100%) * 0.145); /* 왼쪽 위치 (이미지 너비의 14.5%) */
    top: calc(var(--modal-img-height, 100%) * 0.45); /* 위쪽 위치 (이미지 높이의 46%) */
    /* 폰트 크기 조정 - 브라우저 크기에 따라 동적으로 변함 (최대 32px) */
    /* JavaScript의 adjustSelectFontSize 함수가 동적으로 조정합니다 */
    /* CSS에서 고정값을 설정하려면 아래 주석을 해제하세요 */
    /* font-size: clamp(16px, 3vw, 32px); */ /* 반응형 폰트 크기 (최소 16px, 최대 32px) */
    /* 텍스트가 잘리지 않도록 설정 (battle mode와 동일) */
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    z-index: 15 !important; /* 드롭다운이 열릴 때 다른 요소 위에 표시되도록 */
}

/* Practice Mode Modal - 난이도 드롭박스 위치 */
#practice-mode-modal .modal-count-select {
    /* practice_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.13); /* 위쪽 위치 (이미지 높이의 13%) */
    /* 폰트 크기 조정 - 브라우저 크기에 따라 동적으로 변함 (최대 32px) */
    /* JavaScript의 adjustSelectFontSize 함수가 동적으로 조정합니다 */
    /* CSS에서 고정값을 설정하려면 아래 주석을 해제하세요 */
    /* font-size: clamp(16px, 3vw, 32px); */ /* 반응형 폰트 크기 (최소 16px, 최대 32px) */
}

/* Practice Mode Modal - 시작하기 버튼 위치 */
#practice-mode-modal #practice-mode-modal-start-btn {
    /* practice_mode_select_modal .webp 이미지에 맞춰 조정 가능 (파일명에 공백 포함) */
    width: calc(var(--modal-img-width, 100%) * 0.37); /* 너비 (이미지 너비의 37%) */
    height: calc(var(--modal-img-height, 100%) * 0.17); /* 높이 (이미지 높이의 17%) */
    left: calc(var(--modal-img-width, 100%) * 0.096); /* 왼쪽 위치 (이미지 너비의 9.6%) */
    top: calc(var(--modal-img-height, 100%) * 0.75); /* 위쪽 위치 (이미지 높이의 75%) */
}

/* Practice Mode Modal - 취소 버튼 위치 */
#practice-mode-modal #practice-mode-modal-cancel-btn {
    /* practice_mode_select_modal .webp 이미지에 맞춰 조정 가능 (파일명에 공백 포함) */
    width: calc(var(--modal-img-width, 100%) * 0.37); /* 너비 (이미지 너비의 37%) */
    height: calc(var(--modal-img-height, 100%) * 0.17); /* 높이 (이미지 높이의 17%) */
    left: calc(var(--modal-img-width, 100%) * 0.53); /* 왼쪽 위치 (이미지 너비의 53%) */
    top: calc(var(--modal-img-height, 100%) * 0.75); /* 위쪽 위치 (이미지 높이의 75%) */
}