/* 기본 스타일 (데스크톱에서는 영향 없음) */
.select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px; /* 글씨 크기 일관성 유지 */
}

/* inputPrice는 모바일 미디어 쿼리 안에서만 width를 조정하도록 합니다. */
.inputPrice{
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px; /* 글씨 크기 일관성 유지 */
    width: 100%;
}

.inputPeriod {
    border: 1px solid #ccc;
}

/* 모바일 화면에만 적용될 스타일 */
@media screen and (max-width: 768px) {
    /* select 요소 너비 및 마진 조정 */
    .select {
        width: 100%; /* 부모 td의 content box 100% 사용 */
        box-sizing: border-box;
        margin-bottom: 5px;
    }

    /* inputPrice 요소 너비 및 마진 조정 */
    .inputPrice {
        width: 100%; /* 부모 td의 content box 100% 사용 */
        box-sizing: border-box;
        margin-bottom: 5px;
    }

    /* 기간 입력 필드 조정 - controlPrice.html에 해당 */
    .inputPeriod {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 5px;
        display: block;
    }
    .period-separator {
        display: block;
        text-align: center;
        margin: 5px 0;
        color: #666;
        font-weight: bold;
    }

    /* 기간 입력 필드가 들어있는 td는 flexbox로 내부 요소 정렬 - controlPrice.html에 해당 */
    td[data-label="기간"] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-right: 10px;
        padding-left: 55%; /* data-label 공간 확보를 위해 55%로 조정 */
        min-height: unset;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    td[data-label="기간"]::before {
        top: 10px;
        transform: none;
    }

    /* data-label이 있는 td는 기본적으로 오른쪽 정렬 (텍스트 데이터) */
    /* 단, input/select가 있는 td, 특정 라벨이 있는 td는 제외 */
    table td:not([data-label="기간"]):not([data-label="기간 이름"]):not([data-label="방 유형"]):not([data-label="저장"]):not([data-label="수정"]):not([data-label="삭제"]):not([data-label="방"]):not([data-label="기본 인원"]):not([data-label="최대 인원"]) {
        text-align: right;
    }


    /* 버튼 스타일 조정 */
    .btn {
        width: 100%;
        box-sizing: border-box;
        margin-top: 10px;
        margin-bottom: 20px;
        font-size: 16px;
    }

    /* ---------- 테이블 반응형 처리 ---------- */

    table {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 20px;
        display: block;
        border: none;
    }

    table thead {
        display: none; /* 모바일에서 테이블 헤더 숨김 */
    }

    table tbody, table tr {
        display: block;
        width: 100%;
    }

    table tr {
        border: 1px solid #ccc;
        margin-bottom: 15px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        border-radius: 8px;
    }

    table td {
        display: block;
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding: 10px 10px 10px 55%; /* data-label을 위한 공간 확보: 55%로 조정 */
        min-height: 40px;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right; /* 기본적으로 내용을 오른쪽 정렬 */
    }

    /* 마지막 셀에는 하단 테두리 없음 */
    table td:last-child {
        border-bottom: none;
    }

    /* data-label (숨겨진 th 내용) 표시 */
    table td:before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 40%; /* label 공간: 40%로 조정 */
        padding-right: 5px;
        white-space: normal;
        text-align: left;
        font-weight: bold;
        color: #555;
        top: 50%;
        transform: translateY(-50%);
        line-height: 1.2;
    }

    /* 입력 필드나 select가 들어있는 td는 라벨을 안쪽으로 밀어 넣지 않도록 조정 */
    td[data-label="기간 이름"], /* controlPrice.html에 해당 */
    td[data-label="방 유형"], /* controlPrice.html 및 controlRoom.html의 두 번째 테이블에 해당 */
    td[data-label="방"], /* controlRoom.html의 첫 번째 테이블에 해당 */
    td[data-label="기본 인원"], /* controlRoom.html의 첫 번째 테이블에 해당 */
    td[data-label="최대 인원"] { /* controlRoom.html의 첫 번째 테이블에 해당 */
        text-align: left; /* 입력 필드는 왼쪽 정렬 */
        padding-left: 55%; /* data-label 공간과 일치하게 패딩 조정 */
    }

    /* data-label이 있는 input/select td의 before는 다시 띄워줘야 함 */
    td[data-label="기간 이름"]::before, /* controlPrice.html에 해당 */
    td[data-label="방 유형"]::before, /* controlPrice.html 및 controlRoom.html의 두 번째 테이블에 해당 */
    td[data-label="방"]::before, /* controlRoom.html의 첫 번째 테이블에 해당 */
    td[data-label="기본 인원"]::before, /* controlRoom.html의 첫 번째 테이블에 해당 */
    td[data-label="최대 인원"]::before { /* controlRoom.html의 첫 번째 테이블에 해당 */
        left: 10px;
        width: 40%;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap; /* 다시 줄바꿈 안함 */
    }

    /* 가격 입력 필드 TD에 대한 패딩 조정 - controlPrice.html에 해당 */
    td[data-label*="가격"] {
        padding-left: 55%; /* 라벨과 입력 필드 간 간격 확보 */
    }


    /* 버튼이 있는 td는 data-label 숨김 및 가운데 정렬 */
    table td[data-label="저장"],
    table td[data-label="수정"],
    table td[data-label="삭제"] {
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }
    table td[data-label="저장"]:before,
    table td[data-label="수정"]:before,
    table td[data-label="삭제"]:before {
        content: none;
    }

    /* controlPrice.html의 첫 번째 테이블의 특정 빈 td (수정/삭제 버튼 칸) */
    table:nth-of-type(1) tbody tr:first-child td:nth-last-child(2),
    table:nth-of-type(1) tbody tr:first-child td:last-child {
        display: none;
    }

    /* controlRoom.html의 두 번째 테이블 (기존 데이터 표시)의 셀 정렬 */
    table:nth-of-type(2) td[data-label="방 유형"],
    table:nth-of-type(2) td[data-label="방 이름"] {
        text-align: left;
        padding-left: 55%; /* data-label 공간 확보 */
    }
    table:nth-of-type(2) td:not([data-label="방 유형"]):not([data-label="방 이름"]) {
        text-align: right;
    }

    /* 기타 요소들 */
    .gal-btn {
        margin-bottom: 10px;
    }

    .gal-con {
        border: 1px solid #dee2e6;
        align-items: center;
        margin-bottom: 20px;
    }

    .cntct-con{
        border: 1px solid #dee2e6;
        align-items: center;
        margin: 20px;
        background-color: #fafafa;
    }

    .icon-style{
        padding: 10px;
        width: 60px;
        background-color: #FFFFFF;
        border-radius: 40%;
        margin: 20px;
    }

    .contac-trans{
        border-radius: 5px;
        border: #0f3e68 solid 1px;
        color: #0f3e68;
        padding: 0 5px;
        margin: 5px 5px 0 5px;
        text-align: center;
    }

    .contac-method{
        border-radius: 5px;
        border: #0f3e68 solid 1px;
        color: #0f3e68;
        padding: 0 5px;
        margin: 5px 5px 0 5px;
        font-size: 15px;
        text-align: center;
    }
    .contac-jak{
        color: #0f3e68;
        margin-right: 5px;
        margin-left:5px;
        margin-top: 5px;
        text-align: center;
    }
    .contac-jak-one{
        vertical-align:middle;
        color: #0f3e68;
        padding: 5px;
    }
    .arrow-box {
        width: 0;
        height: 0;
        border-top: 10px solid transparent ;
        border-bottom: 10px solid transparent;
        border-right: 10px solid transparent;
        border-left: 10px solid #0f69c6;
    }
    .contact-responsive-img {
        width: 105%;
        padding: 15px;
    }
    #ddnayoReserv{
        width: 100%;
        height: 100%;
    }
}

.contact-responsive-img {
    display: block;
    padding: 30px;
    width: 100%;
    height: auto;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#ddnayoReserv{
    width: 100%;
    min-height: 2500px;
}