@charset "UTF-8";
/* ============================================================
   responsive-legacy.css
   레거시 table 기반 페이지 공통 반응형 처리 (2026-04-22)

   적용 범위:
   - .chtitle_body1 : 검색 필터 (1열 스택으로 변환)
   - .board_body1   : 데이터 테이블 (가로 스크롤 확보)
   - .subtitle_body1/2 : 타이틀/상단바
   - body/table 기본 overflow 제어

   전략:
   - board_body1 데이터 테이블은 card 변환이 아닌 "가로 스크롤 wrapper"
     (각 페이지마다 column 구조가 달라 일반 label 매핑 불가능)
   - chtitle_body1 검색 필터는 구조가 비교적 일관되어 1열 스택 가능
   - 개별 페이지는 필요 시 별도 fine-tune 가능
   ============================================================ */

/* ----- 기본 viewport 안전장치 ----- */
@media (max-width: 480px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    body > table {
        max-width: 100vw !important;
    }
    /* 중첩 content 테이블은 부모 td 의 padding 안에 머물도록 100% 로 제한 */
    body > table > tbody > tr > td > table {
        max-width: 100% !important;
    }
    /* min-width 강제 제거 (레거시 인라인 width=1200 등) */
    body > table[width]:not([width$="%"]) {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* 레거시 min-width 유틸리티 클래스 무력화 */
    .min1200, .min1300, .min1365, .min1400, .min1500, .min1600 {
        min-width: 0 !important;
    }
}

/* ----- 검색 필터 (chtitle_body1) ≤480px 1열 스택 ----- */
@media (max-width: 480px) {
    table.chtitle_body1 {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    /* inline style="display:none" (페이지별 커스텀 모바일 필터 치환 등) 은 숨김 유지 */
    table.chtitle_body1[style*="display:none"],
    table.chtitle_body1[style*="display: none"] {
        display: none !important;
    }
    table.chtitle_body1 > tbody {
        display: block !important;
        width: 100% !important;
    }
    table.chtitle_body1 > tbody > tr {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 1px;
    }
    /* chtitle_body2 는 라벨 셀 — 고정 너비로 */
    table.chtitle_body1 > tbody > tr > td.chtitle_body2 {
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        width: 100px !important;
        min-width: 100px !important;
        padding: 8px 10px !important;
        box-sizing: border-box;
        font-weight: 600;
    }
    /* chtitle_body3 는 값 셀 — 가변 */
    table.chtitle_body1 > tbody > tr > td.chtitle_body3 {
        display: flex !important;
        align-items: center;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 150px !important;
        padding: 6px 8px !important;
        box-sizing: border-box;
        flex-wrap: wrap;
        gap: 4px;
    }
    /* 검색 input/select 반응형 */
    table.chtitle_body1 input[type="text"],
    table.chtitle_body1 input[type="date"],
    table.chtitle_body1 select {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* ----- ≤800px 라벨과 값을 완전 세로 스택 ----- */
@media (max-width: 800px) {
    table.chtitle_body1 > tbody > tr > td.chtitle_body2,
    table.chtitle_body1 > tbody > tr > td.chtitle_body3 {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    table.chtitle_body1 > tbody > tr > td.chtitle_body2 {
        background: #eef4fb;
    }
}

/* ----- 데이터 테이블 (board_body1) — ≤480px 에서 카드 변환 ----- */
/* topmenu.jsp 의 JS 가 헤더 행 텍스트를 각 td 에 data-label 로 주입 → CSS 로 카드화 */
/* 영업관리 (/n_business/business/index) 와 동일한 1200px breakpoint 로 통일 (2026-04-22) */
@media (max-width: 480px) {
    table.board_body1 {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    table.board_body1 > tbody,
    table.board_body1 > tbody > tr {
        display: block !important;
        width: 100% !important;
    }
    /* 헤더 행 숨김 (board_body2 클래스 또는 첫 tr) */
    table.board_body1 > tbody > tr.board_body2,
    table.board_body1 > tbody > tr:first-child {
        display: none !important;
    }
    /* 데이터 행 → 카드 (board_con1/con2 + 공지 고정행 board_top1/top2 모두 포함) */
    table.board_body1 > tbody > tr.board_con1,
    table.board_body1 > tbody > tr.board_con2,
    table.board_body1 > tbody > tr.board_top1,
    table.board_body1 > tbody > tr.board_top2 {
        display: block !important;
        padding: 10px 12px !important;
        margin-bottom: 10px !important;
        border: 1px solid #e0e3e8 !important;
        border-radius: 6px !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        height: auto !important;
    }
    /* inline style="display:none" 인 행(history 토글 등)은 숨김 유지 — 특이도 +1(attribute) */
    table.board_body1 > tbody > tr.board_con1[style*="display:none"],
    table.board_body1 > tbody > tr.board_con1[style*="display: none"],
    table.board_body1 > tbody > tr.board_con2[style*="display:none"],
    table.board_body1 > tbody > tr.board_con2[style*="display: none"] {
        display: none !important;
    }
    /* 공지 고정행은 배경 강조 */
    table.board_body1 > tbody > tr.board_top1,
    table.board_body1 > tbody > tr.board_top2 {
        background: #fffbea !important;
        border-color: #f0d070 !important;
    }
    /* 카드 내 셀: 라벨 | 값 (!important 최소화 — 페이지별 레이아웃 override 가능하도록) */
    table.board_body1 tr.board_con1 > td,
    table.board_body1 tr.board_con2 > td,
    table.board_body1 tr.board_top1 > td,
    table.board_body1 tr.board_top2 > td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px dashed #eee !important;
        width: auto !important;
        height: auto !important;
        word-break: break-all;
        min-height: 28px;
    }
    /* .leftCon (업체명/담당자 등) 중앙/왼쪽 정렬은 페이지 자체 style 존중하되 최소 기본값 */
    table.board_body1 tr > td.leftCon {
        text-align: left;
    }
    table.board_body1 tr > td.rightCon {
        text-align: right;
    }
    /* 제목 셀 (board_subject/board_top2) 왼쪽 정렬 */
    table.board_body1 tr > td.board_subject,
    table.board_body1 tr > td.board_top2 {
        text-align: left;
        text-indent: 0 !important;
    }
    table.board_body1 tr.board_con1 > td:last-child,
    table.board_body1 tr.board_con2 > td:last-child,
    table.board_body1 tr.board_top1 > td:last-child,
    table.board_body1 tr.board_top2 > td:last-child {
        border-bottom: none !important;
    }
    /* data-label 이 있는 셀 앞에 라벨 표시 */
    table.board_body1 tr.board_con1 > td[data-label]::before,
    table.board_body1 tr.board_con2 > td[data-label]::before,
    table.board_body1 tr.board_top1 > td[data-label]::before,
    table.board_body1 tr.board_top2 > td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #555;
        background: #f5f6f8;
        padding: 3px 8px;
        border-radius: 3px;
        min-width: 80px;
        text-align: center;
        font-size: 11px;
        margin-right: 8px;
        flex-shrink: 0;
    }
    /* data-label 없거나 빈 label (체크박스/번호 컬럼) */
    table.board_body1 tr.board_con1 > td:not([data-label])::before,
    table.board_body1 tr.board_con2 > td:not([data-label])::before,
    table.board_body1 tr.board_top1 > td:not([data-label])::before,
    table.board_body1 tr.board_top2 > td:not([data-label])::before,
    table.board_body1 tr > td[data-label=""]::before {
        content: none;
    }
    table.board_body1 tr.board_con1 > td:not([data-label]),
    table.board_body1 tr.board_con2 > td:not([data-label]),
    table.board_body1 tr.board_top1 > td:not([data-label]),
    table.board_body1 tr.board_top2 > td:not([data-label]),
    table.board_body1 tr > td[data-label=""] {
        justify-content: center;
    }
    /* 내부 구분선/스페이서 모바일에서 숨김 */
    table.board_body1 > tbody > tr.board_line1,
    table.board_body1 > tbody > tr:has(> td.board_line2[colspan]),
    table.board_body1 > tbody > tr:has(> td[height][colspan]:empty) {
        display: none !important;
    }
    /* 폴백: board_line2 / 빈 spacer row 직접 처리 */
    table.board_body1 > tbody > tr > td.board_line2 {
        display: none !important;
    }
}

/* ============ list_body1 + onclick="goRead" 패턴 카드 변환 (사내업무 게시판들) ============
   대상: /direct/business_document/index, /direct/notice/index, /direct/notice_new/index,
         /direct/team_report/search, /direct/week_team/search 등
   컬럼(nth-child): 1 NO, 2(line), 3 구분, 4(line), 5 제목, 6(line), 7 작성자, 8(line), 9 날짜, 10(line), 11 조회수 */
@media (max-width: 480px) {
    /* 헤더/구분선 숨김 */
    table tr > td.list_body1,
    table tr.list_body2,
    table tr > td[background*="line_dot"] {
        display: none !important;
    }
    /* 데이터 행 → grid 카드 */
    table tr[onclick^="goRead"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2px 8px !important;
        width: 100% !important;
        height: auto !important;
        margin: 10px 0 !important;
        padding: 12px 14px !important;
        border: 1px solid #e0e3e8 !important;
        border-radius: 6px !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }
    /* 구분선 이미지 td 숨김 */
    table tr[onclick^="goRead"] > td:nth-child(2),
    table tr[onclick^="goRead"] > td:nth-child(4),
    table tr[onclick^="goRead"] > td:nth-child(6),
    table tr[onclick^="goRead"] > td:nth-child(8),
    table tr[onclick^="goRead"] > td:nth-child(10) {
        display: none !important;
    }
    /* 카드 내 td 기본 */
    table tr[onclick^="goRead"] > td {
        display: block !important;
        border: none !important;
        text-align: left !important;
        padding: 2px 0 !important;
        line-height: 1.5 !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-all !important;
    }
    /* Row 1: NO(1) | 구분(3) */
    table tr[onclick^="goRead"] > td:nth-child(1) {
        grid-column: 1; grid-row: 1;
        font-size: 11px; color: #888;
    }
    table tr[onclick^="goRead"] > td:nth-child(1)::before {
        content: "NO "; color: #999; font-weight: 600;
    }
    table tr[onclick^="goRead"] > td:nth-child(3) {
        grid-column: 2; grid-row: 1;
        font-size: 11px; color: #666; text-align: right !important;
    }
    /* Row 2: 제목(5) 전체폭 강조 */
    table tr[onclick^="goRead"] > td:nth-child(5) {
        grid-column: 1 / -1; grid-row: 2;
        font-size: 15px !important;
        font-weight: bold !important;
        color: #1a5ea0 !important;
        background: #f5f6f8 !important;
        border-radius: 4px !important;
        padding: 8px 10px !important;
        margin: 4px 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Row 3: 작성자(7) | 날짜(9) — 라벨 없이 */
    table tr[onclick^="goRead"] > td:nth-child(7) {
        grid-column: 1 / 2; grid-row: 3;
        font-size: 12px; color: #555;
    }
    table tr[onclick^="goRead"] > td:nth-child(9) {
        grid-column: 2 / 3; grid-row: 3;
        font-size: 12px; color: #555; text-align: right !important;
    }
    /* Row 4: 조회수(11) 전체폭 오른쪽 */
    table tr[onclick^="goRead"] > td:nth-child(11) {
        grid-column: 1 / -1; grid-row: 4;
        font-size: 11px; color: #888; text-align: right !important;
    }
    table tr[onclick^="goRead"] > td:nth-child(11)::before {
        content: "조회수 "; color: #999; font-size: 11px; margin-right: 2px;
    }
    /* 빈 메시지 "등록된 글이 없습니다" */
    table tr > td[colspan="13"][align="center"]:only-child,
    table tr:has(> td[colspan="13"][align="center"]) > td {
        display: block !important;
        text-align: center !important;
        padding: 24px 12px !important;
        font-size: 13px !important;
        color: #999 !important;
        border: 1px dashed #ccc !important;
        border-radius: 6px !important;
        background: #fafafa !important;
        margin: 16px 0 !important;
    }
}

/* ============ 검색 필터 (list_body1 패턴 페이지) — 3행 구조 ============
   Row 1: 검색구분 (searchtype) 전체폭
   Row 2: 검색대상 + 검색어 input + 검색 버튼
   Row 3: 글쓰기 버튼 (오른쪽 정렬) */
@media (max-width: 480px) {
    /* 필터 cell (td[align="right"] > table) — flex wrap */
    body td[align="right"] > table:has(select[name="searchtype"]),
    body td[align="right"] > table:has(select[name="searchcode"]) {
        width: 100% !important;
        display: block !important;
    }
    body td[align="right"] > table:has(select[name="searchtype"]) > tbody,
    body td[align="right"] > table:has(select[name="searchtype"]) > tbody > tr,
    body td[align="right"] > table:has(select[name="searchcode"]) > tbody,
    body td[align="right"] > table:has(select[name="searchcode"]) > tbody > tr {
        display: block !important;
        width: 100% !important;
    }
    body td[align="right"] > table:has(select[name="searchcode"]) > tbody > tr > td[align="right"] {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        text-align: left !important;
        padding: 6px 0 !important;
    }
    body td[align="right"] > table select,
    body td[align="right"] > table input[type="text"] {
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        font-size: 13px !important;
        min-height: 34px !important;
    }
    /* Row 1: searchtype 전체폭 */
    body td[align="right"] > table select[name="searchtype"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 1 !important;
    }
    /* Row 2: searchcode + search input + 검색 */
    body td[align="right"] > table select[name="searchcode"] {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 90px !important;
        max-width: 130px !important;
        order: 2 !important;
    }
    body td[align="right"] > table input[name="search"] {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        order: 3 !important;
    }
    body td[align="right"] > table a.btns[onclick*="goSearch"] {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        order: 4 !important;
    }
    /* 검색 다음 강제 줄바꿈 */
    body td[align="right"] > table:has(select[name="searchcode"]) > tbody > tr > td[align="right"]::after {
        content: "";
        flex: 0 0 100%;
        width: 100%;
        height: 0;
        order: 5;
    }
    /* Row 3: 글쓰기 오른쪽 정렬 */
    body td[align="right"] > table a.btns[href="write"] {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        margin: 0 0 0 auto !important;
        flex-basis: auto !important;
        width: auto !important;
        order: 6 !important;
    }
}

/* 기존 801~1200px 중간 규칙 제거 — 1200px 에서 바로 카드 전환 (영업관리와 통일) */

/* ----- 타이틀 영역 (subtitle_body1/2) 반응형 ----- */
@media (max-width: 480px) {
    table.subtitle_body1,
    table.subtitle_body2 {
        width: 100% !important;
    }
    td.subtitle_body2 {
        font-size: 13px;
        padding: 8px 10px !important;
    }
}

/* ----- 검색 필터 라벨 텍스트 (chtitle_body2) ----- */
@media (max-width: 480px) {
    .chtitle_body2 {
        font-size: 12px !important;
    }
}

/* ----- 버튼/링크 모바일 크기 보정 ----- */
@media (max-width: 800px) {
    a.btns_g, a.btns_bl, a.btns_r, a.btns_b,
    input[type="submit"], input[type="button"] {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 32px;
        box-sizing: border-box;
    }
}

/* ----- pagination 페이지네이션 반응형 ----- */
@media (max-width: 800px) {
    td[align="center"]:not(.menu) > a[href*="page="],
    td[align="center"]:not(.menu) > font > a {
        padding: 6px 10px !important;
        font-size: 12px !important;
        margin: 2px !important;
    }
}

/* ----- form 검색 submit 버튼 감싸는 div 반응형 ----- */
@media (max-width: 800px) {
    .search_list, td.search_list {
        padding: 8px 4px !important;
    }
}

/* ----- 이미지/로고 반응형 ----- */
@media (max-width: 800px) {
    img.logo_img {
        max-width: 120px !important;
    }
    .logo_text {
        font-size: 14px !important;
    }
    .logo_text span {
        display: none; /* 긴 URL 은 모바일에서 숨김 */
    }
}

/* ----- 좌측 메뉴 (left_*.jsp) ≤480px 완전 숨김 ----- */
/* topmenu.jsp 의 모바일 드로어가 메뉴 역할을 대체 */
@media (max-width: 480px) {
    td[background*="left_bg"],
    td[width="190"][valign="top"] {
        display: none !important;
    }
}

/* ----- 컨텐츠 영역 padding 조정 ----- */
@media (max-width: 800px) {
    body > table > tbody > tr > td > table td[style*="padding-left:10px"][style*="padding-right:10px"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}