/* 1. 목록 영역 (기존 유지 및 정렬 보정) */
.lawyer_list_box { width: 100%; margin: 0px auto; } 
.lawyer_list { display: block; list-style: none; overflow: hidden; padding: 0; } 
.lawyer_info { padding: 10px 10px 30px 10px; float: left; min-height: 200px; width: 50%; box-sizing: border-box; } 
.lawyer_info:nth-child(2n+1) { clear: both; } 
.dt_img a img { width: 100%; transition: filter 0.3s; } 
.dt_img a img:hover { filter: brightness(60%); } 
.dt_info_1 { padding: 20px 0; font-weight: 600; font-size: 20px; } 
.dt_info_1 .p_tit { padding: 0 20px 0 10px; font-weight: 600; font-size: 16px; } 
.dt_department { padding: 0; font-size: 17px; text-align: left; font-weight: 400; } 

/* 2. 상세 정보 팝업 (오류 수정의 핵심) */
.detail_box { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #fff; 
    z-index: 9999; 
    visibility: hidden;         /* 기본 숨김 */
    transform: translateX(100%); /* 오른쪽 대기 */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s;
    overflow-y: auto;
}

/* 상세창이 열렸을 때 클래스 */
.detail_box.on { 
    visibility: visible; 
    transform: translateX(0); 
}

.detail_box_2 { 
    position: relative; 
    width: 100%; 
    min-height: 100%; 
    display: flex; 
    flex-direction: row; /* PC는 가로 배열 */
}

/* 닫기 버튼 */
.close { 
    cursor: pointer; 
    padding: 10px; 
    position: absolute; 
    top: 30px; 
    left: 30px; 
    z-index: 1000; 
}
.close img { width: 30px; }

/* 3. 이미지 및 정보 영역 (PC 버전) */
.detail_img { 
    width: 50%; 
    background-color: #fff; 
    order: 2; /* 이미지를 우측으로 */
    display: flex;
    align-items: center;
    position: relative;
}
.detail_img img { width: 100%; }

.detail_info { 
    width: 50%; 
    padding: 100px; 
    background-color: #fff; 
    order: 1; /* 정보를 좌측으로 */
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* 상세 텍스트 스타일 */
.f_box { width: 100%; }
.dt_name_2 { font-size: 52px; font-weight: bold; letter-spacing: -2px; margin-bottom: 50px; line-height: 1.2; } 
.dt_button2 { border-bottom: 1px solid #ccc; display: flex; gap: 10px; margin-bottom: 20px; } 
.dt_button2 button { padding: 10px 25px; font-size: 18px; border: none; background: none; cursor: pointer; color: #999; } 
.dt_button2 button.on { color: #967146; border-bottom: 2px solid #967146; font-weight: bold; } 
.dt_btn_info { font-size: 18px; line-height: 2.1; color: #666; display: none; }
.dt_btn_info.a { display: block; } /* 기본 활성화 */

/* 4. 반응형 레이아웃 (미디어 쿼리) */

/* 태블릿 및 작은 PC */
@media all and (max-width: 1350px) {
    .lawyer_info { width: 33.333%; }
    .lawyer_info:nth-child(2n+1) { clear: none; }
    .lawyer_info:nth-child(3n+1) { clear: both; }
    .detail_info { padding: 60px; }
    .dt_name_2 { font-size: 40px; }
}

/* 모바일 전환점 (1100px 미만) */
@media all and (max-width: 1100px) {
    .detail_box_2 { flex-direction: column; } /* 세로 배열로 변경 */
    
    .detail_img { 
        width: 100%; 
        order: 1; /* 이미지가 위로 */
        height: auto;
    }
    
    .detail_info { 
        width: 100%; 
        order: 2; /* 정보가 아래로 */
        padding: 40px 20px; 
        display: block;
    }

    .close { top: 20px; left: 20px; background: rgba(255,255,255,0.8); border-radius: 50%; }

    .dt_name_2 { font-size: 28px; margin-bottom: 30px; }
    .dt_button2 button { padding: 10px 15px; font-size: 16px; }
}

/* 초소형 모바일 */
@media all and (max-width: 540px) {
    .lawyer_info { width: 100%; }
    .dt_btn_info { font-size: 16px; }
}