@charset "utf-8";
/*
 * 2026-11-06: 반응형 — 같은 화면을 폭에 맞춰 줄이고 접는다 (able.css · able_board.css · 스킨 CSS 뒤에 불러온다)
 *  ~1340px  고정 폭(1300px)을 화면 폭으로 · 좌우 여백
 *  ~1024px  태블릿: 대시보드 카드 3열 · 패널 1열 · 메뉴 줄바꿈
 *  ~768px   휴대폰: 메뉴는 「메뉴」 단추로 펼침 · 상단 링크 가로 스크롤 · 목록 표 가로 스크롤
 *  ~480px   작은 휴대폰: 카드 2열 · 글자·여백 줄임
 */

/* ---------- 공통: 고정 폭 풀기 ---------- */
html, body { overflow-x: hidden; }
#hd, #ft { min-width: 0 !important; }
#hd_wrapper, #gnb_1dul, #wrapper, #hd_pop, #ft_catch, #ft_copy div, #ft_bottom {
    width: auto !important; max-width: 1300px; box-sizing: border-box;
}
img, video, iframe { max-width: 100%; }
#bo_v_con img, #bo_v_con iframe, #bo_v_con video, #bo_v_con table { max-width: 100% !important; height: auto; }
#able_menu_btn { display: none; }
.able_ico_inp { display: contents; }   /* 넓은 화면: 감싼 span 은 없는 것처럼 */
/* 로고 줄: 로고와 전체검색을 세로 가운데로 (모바일은 아래 768px 규칙이 덮는다) */
#hd_logo { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; }
#hd_logo #logo { position: static !important; transform: none !important; }
#hd_logo #logo h1, #hd_logo #logo h1 a { display: flex; align-items: center; margin: 0; }
#hd_logo #hd_sch { float: none !important; margin: 0 !important; }
.dash_hero { height: 120px; box-sizing: border-box; }   /* 대시보드 인사 배너 높이 고정 */
#bo_list, #bo_v, #bo_w, #bo_gall, #new_list, #memo_list, #scrap, #current_connect { padding: 20px !important; box-sizing: border-box; }

@media (max-width: 1340px) {
    #hd_wrapper, #gnb_1dul, #wrapper, #ft_catch, #ft_copy div, #ft_bottom { margin-left: 20px !important; margin-right: 20px !important; }
}

/* ---------- 태블릿 ---------- */
@media (max-width: 1024px) {
    #gnb_1dul { flex-wrap: wrap; gap: 6px !important; }
    #gnb .gnb_1da { padding: 0 12px !important; font-size: 14px; }

    .dash_stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .dash_grid { grid-template-columns: minmax(0, 1fr) !important; }
    .dash_hero { flex-wrap: wrap; gap: 14px; }

    /* 게시판 상단 「건수 · 검색 · 단추」 3칸 → 검색을 한 줄 전체로 */
    #bo_list .bo_fx:has(> .able_top_search), #bo_btn_top:has(> .able_top_search), #bo_gall .bo_fx:has(> .able_top_search) {
        grid-template-columns: auto 1fr !important;
    }
    .able_top_search { grid-column: 1 / -1; order: 3; justify-self: stretch !important; width: 100% !important; max-width: none !important; }
    .able_top_search form, .able_top_search .sch_bar { width: 100%; }
    .able_top_search { display: flex !important; }
    .able_top_search input[type="text"] { flex: 1 1 auto; width: auto !important; min-width: 0; }
    .able_top_search select { flex: 0 1 auto; max-width: 42%; }
}

/* ---------- 휴대폰 ---------- */
@media (max-width: 768px) {
    #hd_wrapper, #gnb_1dul, #wrapper, #ft_catch, #ft_copy div, #ft_bottom { margin-left: 12px !important; margin-right: 12px !important; }

    /* 상단: 로고 + 메뉴 아이콘 한 줄 · 아이콘을 누르면 [전체검색 → 메인 메뉴 → 상단 링크] 순서로 펼침
       #hd_wrapper 를 display:contents 로 풀어 #hd 안에서 순서를 다시 정한다 */
    #hd { display: flex; flex-direction: column; }
    #hd_wrapper { display: contents !important; }
    #hd > hr, #hd_wrapper > hr { display: none; }
    #hd_logo { order: 1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo btn" "sch sch"; align-items: center; gap: 0 8px; margin: 0 12px; padding: 10px 0; }
    #logo { grid-area: logo; position: static !important; transform: none !important; }
    #logo h1 a { display: flex; align-items: center; }
    #logo h1 a img { width: 150px !important; }
    #hd_sch { grid-area: sch; display: none; float: none !important; width: 100%; margin-top: 12px !important; }
    #hd.is_open #hd_sch { display: block; }
    #hd_sch form { display: flex; }
    #hd_sch #sch_stx { flex: 1 1 auto; width: auto !important; min-width: 0; }
    #gnb { order: 2; }
    /* 상단 링크: 메뉴를 열지 않아도 맨 위에 항상 — 한 줄, 좌우로 밀어서 본다 */
    #hd_topmenu { order: 0; display: block !important; margin: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 0; border-bottom: 1px solid var(--able-line-soft, #eef2f8); }
    #hd_topmenu::-webkit-scrollbar { display: none; }
    #tnb { float: none !important; display: flex; white-space: nowrap; width: max-content; }
    #tnb > li { float: none !important; margin: 0 4px 0 0 !important; flex: 0 0 auto; }
    #tnb a { font-size: 12px; padding: 0 4px; }

    /* 메뉴 아이콘(☰ ↔ ✕) */
    #able_menu_btn {
        grid-area: btn; display: block; position: relative; width: 40px; height: 40px; margin: 0; padding: 0;
        border: 0; border-radius: 10px; background: var(--able-primary-soft, #eaf3ff); color: var(--able-primary, #1f7cf5); cursor: pointer;
    }
    #able_menu_btn span { display: block; position: absolute; left: 11px; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
    #able_menu_btn span:nth-child(1) { top: 13px; }
    #able_menu_btn span:nth-child(2) { top: 19px; }
    #able_menu_btn span:nth-child(3) { top: 25px; }
    #hd.is_open #able_menu_btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    #hd.is_open #able_menu_btn span:nth-child(2) { opacity: 0; }
    #hd.is_open #able_menu_btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* 메인 메뉴: 아이콘을 누르면 세로로 펼침 */
    #gnb { padding: 0 12px; border-top: 0 !important; }
    #gnb_1dul { display: none !important; flex-direction: column; margin: 0 0 10px !important; padding: 6px 0 !important; gap: 2px !important; }
    #hd.is_open #gnb_1dul { display: flex !important; }
    #gnb .gnb_1dli { width: 100%; }
    #gnb .gnb_1da { display: block !important; width: 100%; box-sizing: border-box; }
    #gnb .gnb_2dul { display: block !important; position: static !important; width: auto !important; box-shadow: none !important; padding: 0 0 4px 14px !important; background: transparent !important; }
    #gnb .gnb_2da { padding: 8px 12px !important; font-size: 13px; }

    #container { padding: 18px 0 !important; }
    #container_title { font-size: 1.3em !important; }

    /* 대시보드 */
    .dash_hero { padding: 12px 16px !important; align-content: space-between; gap: 6px !important; }
    .dash_hero .dash_date, .dash_hero .dash_hello { display: none !important; }   /* 모바일: 날짜·인사말 숨김 */
    .dash_hero { align-content: flex-end; }
    .dash_hero .dash_qbtn { height: 32px !important; }
    .dash_hello { font-size: 18px !important; }
    .dash_quick { width: 100%; }
    .dash_qbtn { flex: 1 1 auto; justify-content: center; }
    .dash_stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .dash_recent_list { grid-template-columns: minmax(0, 1fr) !important; }
    .able_cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    .dash_stat { padding: 14px !important; }
    .dash_panel { padding: 20px !important; }
    .dash_list a { flex-wrap: wrap; }
    .dash_recent_list .dash_board_tag { display: none; }

    /* 게시판 목록: 표 → 카드형 (한 글 = 한 장) · 칸 이름은 js/able_icon_btn.js 가 data-label 로 붙인다 */
    .tbl_wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #bo_list .tbl_wrap { overflow: visible; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
    #bo_list .tbl_head01 table, #bo_list .tbl_head01 tbody { display: block; width: 100% !important; min-width: 0 !important; background: transparent !important; }
    #bo_list .tbl_head01 thead, #bo_list .tbl_head01 caption { display: none !important; }
    #bo_list .tbl_head01 tbody tr {
        position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
        margin: 0 0 10px; padding: 14px 44px 14px 16px; border-radius: 14px; background: #fff !important;
        box-shadow: 0 2px 10px rgba(31, 92, 184, .07); border: 1px solid #e8eef7;
    }
    #bo_list .tbl_head01 tbody tr:hover { border-color: var(--able-primary, #1f7cf5); }
    #bo_list .tbl_head01 tbody td {
        display: block; width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0 !important;
        background: transparent !important; text-align: left !important; font-size: 12px; color: var(--able-muted, #64748b); white-space: normal;
    }
    /* 제목은 한 줄 전체 · 크게 */
    #bo_list .tbl_head01 tbody td.td_subject { flex: 1 1 100%; order: -1; font-size: 15px; font-weight: 700; color: var(--able-ink, #13294b); padding: 0 0 4px !important; }
    #bo_list .tbl_head01 tbody td.td_subject a { color: inherit !important; }
    #bo_list .tbl_head01 tbody td.td_status { order: -2; flex: 0 0 auto; }
    /* 나머지 칸: 「칸이름 값」 */
    #bo_list .tbl_head01 tbody td[data-label]:not(.td_subject):not(.td_status):not(.td_chk)::before {
        content: attr(data-label); margin-right: 4px; color: #94a3b8; font-weight: 600;
    }
    #bo_list .tbl_head01 tbody td:empty, #bo_list .tbl_head01 tbody td.td_num2 { display: none !important; }
    #bo_list .tbl_head01 tbody td[data-label="번호"] { display: none !important; }   /* 카드에선 번호 숨김 */
    /* 체크박스는 카드 오른쪽 위 */
    #bo_list .tbl_head01 tbody td.td_chk { position: absolute; top: 14px; right: 14px; }
    #bo_list .tbl_head01 tbody td.td_chk::before { content: none !important; }
    /* 공지 · 빈 목록 */
    #bo_list .tbl_head01 tbody tr.bo_notice { background: #f5f9ff !important; }
    #bo_list .tbl_head01 tbody td.empty_table { flex: 1 1 100%; text-align: center !important; padding: 20px 0 !important; }
    #bo_list .tbl_head01 tbody td.empty_table::before { content: none !important; }
    #bo_list .bo_fx, #bo_btn_top, #bo_gall .bo_fx { flex-wrap: wrap; }
    #bo_cate ul, #bo_cate_ul { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
    .btn_bo_user { flex-wrap: wrap; }
    .pg_wrap { overflow-x: auto; margin: 16px 0 !important; }
    .pg_wrap .pg { display: flex !important; justify-content: center; flex-wrap: wrap; gap: 6px !important; }
    /* 목록 아래 단추 줄(선택삭제·복사·이동 · 글쓰기): 페이지 번호와 띄우고 단추끼리도 간격 */
    #bo_list .bo_fx, #bo_gall .bo_fx { margin-top: 14px !important; gap: 12px !important; }
    .btn_bo_adm, .btn_bo_user { gap: 8px !important; }

    /* 게시판 보기·쓰기 */
    #bo_v_title { font-size: 1.3em !important; }
    #bo_v_info { flex-wrap: wrap; }
    #bo_w .write_div input.frm_input, #bo_w .frm_input.full_input, #bo_w input[type="text"], #bo_w select { max-width: 100% !important; box-sizing: border-box; }
    #bo_w .bo_w_select select, #bo_w #ca_name { min-width: 0 !important; width: 100%; }
    #bo_w .bo_w_info { flex-direction: column; }
    #bo_w .bo_w_info > *, #bo_w .half_input { width: 100% !important; margin: 0 0 8px !important; }
    .btn_confirm { flex-wrap: wrap; }
    #bo_v_bot, .bo_v_nb { flex-wrap: wrap; }

    /* 스케줄 달력 */
    .cal_toolbar { gap: 10px !important; grid-template-columns: minmax(0, 1fr) !important; }
    .cal_nav { flex-wrap: wrap !important; }
    .cal_toolbar .able_top_search { min-width: 0; }
    .cal_toolbar .able_top_search input[type="text"] { width: auto !important; }
    .cal_right { flex-wrap: wrap; justify-content: space-between; }
    .cal_title { font-size: 18px !important; margin: 0 4px !important; }
    .cal_side { grid-template-columns: minmax(0, 1fr) !important; }
    .cal_view #bo_v_atc, .cal_view #bo_v_file, .cal_view .bo_v_nb, .cal_view #bo_vc, .cal_view .cmt_btn, .cal_view #bo_vc_w, .cal_view .bo_vc_w { margin-left: 16px !important; margin-right: 16px !important; }

    /* 보기 화면 정보표 · 글쓰기 표: 「제목 | 값」 두 칸씩 */
    .hosting_tbl, .hosting_tbl tbody, #bo_w .tbl_frm01 table, #bo_w .tbl_frm01 tbody, #bo_w table:not(.mceLayout):not([class*="cke"]) > tbody { display: block; width: 100% !important; }
    .hosting_tbl colgroup, #bo_w table colgroup { display: none; }
    .hosting_tbl tr, #bo_w table:not(.mceLayout):not([class*="cke"]) > tbody > tr { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
    .hosting_tbl th, #bo_w table > tbody > tr > th { word-break: keep-all !important; white-space: normal !important; overflow-wrap: anywhere; }
    .hosting_tbl th, .hosting_tbl td, #bo_w table:not(.mceLayout):not([class*="cke"]) > tbody > tr > th, #bo_w table:not(.mceLayout):not([class*="cke"]) > tbody > tr > td {
        display: block; width: auto !important; min-width: 0; word-break: break-all; box-sizing: border-box; padding: 10px 10px !important;
    }
    #bo_w table:not(.mceLayout) > tbody > tr > td[colspan], .hosting_tbl td[colspan] { grid-column: 1 / -1; }
    #bo_w td input[type="text"], #bo_w td input[type="url"], #bo_w td input[type="tel"], #bo_w td input[type="date"], #bo_w td select, #bo_w td textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

    /* 아이콘 단추 — 글자는 숨기고 아이콘만 (js/able_icon_btn.js 가 표시를 붙인다) · 다른 단추 규칙보다 우선하도록 선택자를 겹쳐 쓴다 */
    html body .able_ico.able_ico:not(.dash_qbtn) {
        width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important;
        display: inline-flex !important; align-items: center; justify-content: center; gap: 0 !important; letter-spacing: 0 !important;
    }
    html body .able_ico.able_ico::before { content: attr(data-ico); font-family: FontAwesome; font-size: 16px !important; line-height: 1; }
    .able_ico .able_ico_txt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    html body .able_ico.able_ico i.fa { display: none !important; }
    /* <input> 단추: 감싼 span 위에 아이콘, 글자는 투명 */
    .able_ico_inp { position: relative; display: inline-flex; width: 38px; height: 38px; vertical-align: middle; }
    .able_ico_inp::before {
        content: attr(data-ico); position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
        font-family: FontAwesome; font-size: 16px; color: var(--able-text, #334155); pointer-events: none;
    }
    html body .able_ico_inp > input { width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; -webkit-text-fill-color: transparent; color: transparent !important; overflow: hidden; }
    .able_ico_inp:hover::before { color: var(--able-primary, #1f7cf5); }

    /* 스케줄 글쓰기: 항목 이름은 위, 입력은 아래 (한 칸씩) */
    .cw_row, .cw_row.cw_two { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; padding: 14px 0 !important; }
    .cw_label { padding: 0 !important; font-size: 13px; }
    .cw_field { min-width: 0; }
    .cw_when { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 6px !important; align-items: center; }
    .cw_when .cw_tilde { display: none !important; }
    .cw_when .cw_date, .cw_when .cw_time { min-width: 0; }
    .cw_when .cw_date input, .cw_when .cw_time input { width: 100% !important; min-width: 0; box-sizing: border-box; }
    .cw_when.is_allday { grid-template-columns: minmax(0, 1fr); }
    .cw_opts { flex-wrap: wrap; gap: 8px !important; }
    .cw_quick { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
    .cw_quick button { white-space: nowrap; }
    .cw_summary { flex: 1 1 100%; }
    .cw_title_row { gap: 8px !important; }
    .cw_title_row .cw_title { min-width: 0; font-size: 17px !important; }
    .cw_imp { flex: 0 0 auto; white-space: nowrap; }

    /* 파일 첨부 줄: 클립 아이콘 + 파일 선택이 한 줄에 */
    #bo_w .file_wr { display: flex !important; align-items: center; gap: 8px; height: auto !important; min-height: 46px; padding: 8px 12px !important; box-sizing: border-box; }
    #bo_w .file_wr .lb_icon { position: static !important; flex: 0 0 auto; height: auto !important; line-height: 1 !important; }
    #bo_w .file_wr .frm_file { position: static !important; flex: 1 1 auto; min-width: 0; width: auto !important; height: auto !important; font-size: 12px; padding: 0 !important; }

    .able_top_search select { padding: 0 10px !important; }

    /* 새글: 검색칸이 한 줄 전체 */
    .nw_search { margin-left: 0 !important; width: 100%; box-sizing: border-box; }
    .nw_search .frm_input { flex: 1 1 auto; width: auto !important; min-width: 0; }
    .nw_search select { flex: 0 1 auto; min-width: 0; max-width: 40%; }
    /* 전체검색: 「여러 단어 · 모두 포함/하나라도」 줄바꿈 없이 */
    .sch_opt_label, .sch_sop label { white-space: nowrap; }
    .sch_opts { flex-wrap: wrap; }

    /* 레이어 팝업(메모·일정) */
    .memo_modal_box, .cal_modal_box, [class*="_modal"] > [class*="_box"] { width: calc(100vw - 24px) !important; max-width: none !important; max-height: calc(100vh - 40px); overflow-y: auto; }
}

/* ---------- 작은 휴대폰 ---------- */
@media (max-width: 480px) {
    .dash_quick { gap: 6px !important; }
    .dash_qbtn { padding: 0 10px !important; font-size: 12px !important; }
    .dash_stat_txt em { font-size: 11px !important; }
    .dash_stat_txt strong { font-size: 20px !important; }
    .dash_stat_icon { display: none !important; }
    .dash_item_date { display: none; }
}