/* 3. 모달 헤더 (Flexbox로 안정성 높임) */
.modal-header {
    display: flex;
    justify-content: space-between; /* 요소들을 양쪽 끝으로 밀착 */
    align-items: center;          /* 세로 중앙 정렬 */

    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

/* [선택] 모달 제목 스타일 */
.modal-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0; /* h3 태그의 기본 마진 제거 */
    color: #333;
}

/* 닫기 버튼 스타일 */
.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;

    padding: 0 5px; /* 클릭 영역을 살짝 넓힘 */

    /* Flexbox 아이템 설정 */
    flex-shrink: 0; /* 모달이 좁아져도 버튼이 찌그러지지 않게 함 */
}

.modal-close-btn:hover {
    color: #000;
}


/* 1. 모달 레이어 (컨테이너) */
#modal-layer {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* * 기본(모바일) 너비: 화면의 90%
     * (기존 80%보다 조금 넓혀서 모바일에서 더 시원하게 보이도록 함)
     */
    width: 90%;

    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1001;

    /* * 모바일에서는 max-width를 줘서 너무 커지지 않게 할 수도 있습니다.
     * 예: max-width: 500px;
     */
}

/* 2. 모달 콘텐츠 (페이지가 로드될 영역) */
.modal-content-2 {
    padding: 5px;
    overflow-y: auto;

    /* 기본(모바일) 최대 높이: 화면 높이의 80% */
    max-height: 80vh;
}


/* * --- ⬇️ PC 환경을 위한 미디어 쿼리 추가 ⬇️ ---
 * 화면 너비가 768px 이상일 때 (태블릿 및 PC)
 */
@media screen and (min-width: 768px) {

    #modal-layer {
        /* * [옵션 1] 너비를 700px로 고정 (추천)
         * 이렇게 하면 PC 화면이 아무리 커져도 모달은 700px로 유지됩니다.
         */
        width: 700px;

        /* * [옵션 2] 80%를 유지하되 최대 너비 제한 (이전 코드와 유사)
         * 만약 이전 코드에서 max-width를 빠트리셨다면 이것만 추가해도 됩니다.
         */
        /*
        width: 80%;
        max-width: 800px;
        */
    }

    .modal-content-2 {
        /* PC에서는 최대 높이를 vh(상대값) 대신 px(고정값)으로 지정 */
        max-height: 650px; /* 예: 최대 높이를 650px로 고정 */
    }
}