@charset "utf-8";

/* ==========================================================================
   [ 게시판 및 폼 요소 모바일 반응형 (board_m.css) ]
   기준: 1024px 이하 화면 (태블릿 & 스마트폰)
   ========================================================================== */
@media (max-width: 1024px) {

    /* ----------------------------------------------------
       1. 폼(Form) 입력 요소 최적화
       ---------------------------------------------------- */
    input[type=text],
    input[type=password], 
    input[type=number],
    select,
    textarea {
        max-width: 100%; /* 기존 90% 제한을 풀고 모바일 화면에 꽉 차게 */
    }
    
    input[type=text].short,
    input[type=number].short,
    input[type=text].idshort,
    select {
        width: 100%; /* 모바일에서는 짧은 폼도 100%로 시원하게 배치 */
        margin-bottom: 5px;
    }


    /* ----------------------------------------------------
       2. 게시판 리스트 (.table_list, .table_photolist)
       ---------------------------------------------------- */
    .table_list,
    .table_photolist,
    .table_read,
    .table_write {
        width: 100%; /* 부모 100% 꽉 채움 */
    }

    /* 일반 게시판 텍스트 축소 및 여백 조절 */
    .table_list thead th { font-size: 14px; height: 45px; padding: 10px 5px; }
    .table_list tbody td { font-size: 13px; padding: 12px 5px; }
    .table_list tbody td:nth-child(2) { font-size: 15px; } /* 제목 크기 미세 축소 */
    
    /* 제목 아래쪽 메타 태그(작성자, 날짜, 조회수) 간격 축소 */
    .table_list tbody td span.date,
    .table_list tbody td span.name,
    .table_list tbody td span.hit {
        font-size: 12px; margin-right: 8px; 
    }

    /* 포토 게시판 높이 자동화 */
    .table_photolist tbody td a { width: 100%; }
    .table_photolist tbody td a img { height: auto; aspect-ratio: 4 / 3; }


    /* ----------------------------------------------------
       3. 게시판 읽기 (.table_read)
       ---------------------------------------------------- */
    .table_read thead th { font-size: 18px; padding: 15px 10px; }
    .table_read tbody tr td { padding: 15px 10px; font-size: 15px; }
    .table_read tbody tr td.info1 { padding: 10px; font-size: 13px; }
    .table_read tbody tr td img { max-width: 100%; }
    
    /* 관리자 답변 박스 모바일 대응 */
    .table_read tbody tr td.answer { padding: 25px 15px; }
    .table_read tbody tr td.answer p { max-width: 100%; font-size: 15px; padding: 15px; }


    /* ----------------------------------------------------
       4. 게시판 쓰기 (.table_write) - 가로 표를 세로로 변환 🔥
       ---------------------------------------------------- */
    .table_write th,
    .table_write td {
        display: block; /* 💡 표의 칸을 블록으로 바꿔 위아래로 쌓이게 만듭니다 */
        width: 100%;
        box-sizing: border-box;
    }
    .table_write th {
        text-align: left;
        border-bottom: none; /* td와 이어지도록 선 제거 */
        padding: 15px 10px 5px 10px; 
        background: transparent; /* 배경색 제거하여 깔끔하게 */
    }
    .table_write td { padding: 5px 10px 15px 10px; }
    .table_write td a.idcheck { width: 100%; margin-top: 5px; }


    /* ----------------------------------------------------
       5. 로그인 및 비밀번호 상자 (.login, #pass_wrap)
       ---------------------------------------------------- */
    div#login, 
    div#idpw_search { padding: 30px 20px; }
    
    /* 로그인 입력과 버튼을 좌우 배치에서 상하 배치로 변경 */
    div#login .login-flex-wrap { flex-direction: column; }
    div#login ul { width: 100%; }
    div#login ul li { 
        flex-direction: column; /* 아이디 라벨과 입력창을 위아래로 */
        align-items: flex-start; 
        margin-bottom: 15px; 
    }
    div#login ul li span { margin-bottom: 8px; width: 100%; }
    div#login ul li input[type=text],
    div#login ul li input[type=password] { width: 100%; }
    
    /* 로그인 버튼 100% 채우기 */
    div#login .login_btn,
    div#login input[type=submit] { width: 100%; height: 50px; }

    /* 비밀번호 확인 상자 */
    #pass_wrap { width: 95%; margin: 30px auto; }
    #pass_wrap input[type=password] { width: 90%; margin: 30px auto 15px; }
    #pass_wrap a.pass_btn, #pass_wrap input[type=button] { width: 90%; }
    
    #telok_wrap { padding: 30px 15px; font-size: 15px; }


    /* ----------------------------------------------------
       6. 검색창 및 페이지네이션
       ---------------------------------------------------- */
    div.search_wrap { 
        flex-wrap: wrap; /* 창이 좁아지면 아래로 떨어지게 */
        padding: 15px; 
    }
    div.search_wrap select { width: 100%; }
    div.search_wrap input[type=text] { flex: 1; min-width: 60%; }
    div.search_wrap button,
    div.search_wrap input[type=submit] { width: 80px; }

    /* 페이지네이션 화살표 및 숫자 축소 */
    .pagi a, .pagi strong { width: 30px; height: 30px; font-size: 14px; }
    .pagi a.first, .pagi a.last { font-size: 16px; }


    /* ----------------------------------------------------
       7. 전후사진 (탭 & 갤러리 리스트)
       ---------------------------------------------------- */
    ul.pic_tab { 
        width: 100%; 
        flex-wrap: wrap; /* 탭이 많으면 아랫줄로 넘김 */
        gap: 6px; 
    }
    ul.pic_tab li { 
        flex: none; 
        width: calc(33.333% - 6px); /* 모바일: 한 줄에 3개씩 */
        height: 40px; 
    }
    ul.pic_tab li a { font-size: 14px; border-radius: 4px; }

    ul.pic_wrap { gap: 30px 4%; }
    ul.pic_wrap li { width: 48%; } /* 모바일: 한 줄에 2개씩 */
    ul.pic_wrap li a { font-size: 15px; }
    ul.pic_wrap li a p.mask span.material-symbols-outlined { font-size: 30px; }
}

/* 스마트폰 세로 모드 대응 (가장 작은 화면 480px 이하) */
@media (max-width: 480px) {
    /* 전후사진 탭을 한 줄에 2개씩 넓게 */
    ul.pic_tab li { width: calc(50% - 6px); }
    /* 전후사진 갤러리를 1열로 넓게 */
    ul.pic_wrap li { width: 100%; }
}