/* 컨텐츠 페이지 공통 css */

/* 기본 테이블 스타일 유지 (PC) */
.t01,
.t04 {
    width: 100%;
    border-collapse: collapse;
}

/* 모바일 반응형 (768px 이하) */
@media screen and (max-width: 768px) {
    
    /* ========== 컨테이너 여백 조정 ========== */
    #container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .t01, .t04 {
	    width: 100% !important;
	    border-collapse: collapse !important;
	}

    table.t01 {
    	width: 100% !important;
	    border-collapse: collapse !important;
	    margin-bottom: 15px !important;
	    border-spacing: 0 !important;
	    font-size: 12px !important;
	    border-top: 2px solid #0667a5 !important;
    }
    
    .title {
        padding: 10px 0 !important;
        width: 95% !important; 
    }
    
    .title h3 {
        font-size: 18px !important;
        padding-right: 10px !important;
    }
    
    .title p {
        font-size: 13px !important;
        padding-top: 5px !important;
    }
    
    #order_info_box {
        overflow-x: auto !important;
        margin-bottom: 20px !important;
    }
    
    /* ========== 회원정보 테이블 (t01) 반응형 ========== */
    
    /* colgroup 숨김 */
    .t01 colgroup {
        display: none;
    }
    
    /* tbody를 블록으로 변경 */
    .t01 tbody {
        display: block;
    }
    
    /* 각 행을 블록으로 변경 */
    .t01 tbody tr {
        display: block !important;
        margin-bottom: 20px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        /*padding: 10px  10px 0px 10px!important;*/
        background-color: #fff !important;
    }
    
    /* th와 td를 블록으로 변경 */
    .t01 tbody th {
        display: block !important;
        /*width: 100% !important;*/
        text-align: left !important;
        padding: 10px 0 10px 10px !important;
        border: none !important;
        height: auto !important;
    }
    
    /* th 스타일 */
    .t01 tbody th {
        font-weight: bold !important;
        color: #0667a5 !important;
        /*padding-bottom: 8px !important;*/
        border-bottom: 1px solid #eee !important;
        /*margin-bottom: 8px !important;*/
    }
        
    /* td 스타일 */
    .t01 tbody td {
        /*padding-top: 0 !important;*/
        display: block !important;
        /*width: 100% !important;*/
        text-align: left !important;
        padding: 10px 10px 10px 10px !important;
        border: none !important;
        height: auto !important;
    }
    
    /* rowspan 처리된 th/td */
    .t01 tbody th[rowspan],
    .t01 tbody td[rowspan] {
        display: block !important;
    }
    
    /* input, select 요소 반응형 */
    .t01 input[type="insert"],
    .t01 input[type="password"],
    .t01 select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        /*margin: 5px 0 !important;*/
    }
    
    /* 전화번호, 휴대전화 입력 필드 */
    .t01 tbody td span {
        /*display: inline-block !important;*/
    }
    
    .t01 select[id^="mobilephone1"],
    .t01 select[id^="tel1"],
    .t01 select[id^="fax1"] {
        width: 80px !important;
    }
    
    .t01 input[id^="mobilephone"],
    .t01 input[id^="tel"],
    .t01 input[id^="fax"] {
        width: calc((100% - 150px) / 2 - 10px) !important;
        text-align: center;
    }
    
    /* 우편번호 검색 버튼 */
    .t01 .tbl_gray_btn {
        display: inline-block;
        text-align: center !important;
    }
    
    .t01 #zipcode {
        width: 100px !important;
        margin-right: 10px !important;
    }
    
    /* 주소 입력 필드 */
    .t01 input[id^="addr"] {
        width: 100% !important;
        margin-top: 8px !important;
    }
    
    /* 체크박스와 라벨 */
    .t01 input[type="checkbox"] {
        width: auto !important;
        margin-right: 5px !important;
        vertical-align: middle !important;
    }
    
    .t01 td p {
        margin-top: 8px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    
}


/* 작은 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    
    .title h3 {
        font-size: 16px !important;
    }
    
    .title p {
        font-size: 12px !important;
    }
    
    .t01 tbody th {
        font-size: 14px !important;
    }
    
    .t01 tbody td {
        font-size: 13px !important;
    }
    
    .t04 tbody td::before {
        min-width: 70px !important;
        font-size: 13px !important;
    }
    
    .t04 tbody td {
        font-size: 13px !important;
    }
    
    .lnb_btn ul li a {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    .popup-head .head-title {
        font-size: 14px !important;
    }
    
    .body-contentbox ul {
        font-size: 12px !important;
    }
    
    .popup .t04 {
        font-size: 11px !important;
    }
}


/* 매우 작은 모바일 (360px 이하) */
@media screen and (max-width: 360px) {
    
    .t01 select[id^="mobilephone1"],
    .t01 select[id^="tel1"],
    .t01 select[id^="fax1"] {
        width: 70px !important;
    }
    
    .t01 input[id^="mobilephone"],
    .t01 input[id^="tel"],
    .t01 input[id^="fax"] {
        width: calc((100% - 100px) / 2 - 8px) !important;
    }
}