@charset "utf-8";

/*
 * ============================================================
 *  board_responsive.css — 게시판 반응형 (신규 작성)
 *  원본 참조: board.css (절대 수정 금지)
 *
 *  변경 내용:
 *   - #dp_board_pc_area 고정 1000px → 100%
 *   - photo_1~5 float+고정px → Flexbox 비율 레이아웃
 *   - 검색창 878px → 유연한 너비
 *   - 댓글·작성 textarea 고정px → 100%
 *   - 모바일 목록 최적화 (no·date·hit 숨김/축소)
 * ============================================================
 */


/* ============================================================
   게시판 영역 — 고정 1000px 해제
   ============================================================ */
#dp_board_pc_area {
    width: 100% !important;
    max-width: 100%;
    overflow: visible !important;
}


/* ============================================================
   목록 A타입 — 모던 데이터 테이블 (osts 스타일)
   ============================================================ */

/* 카드 래퍼 */
.board-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* 테이블 */
.board-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.board-table thead th {
    padding: 10px 12px;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-align: center;
    white-space: nowrap;
}
.board-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background .15s; }
.board-table tbody tr:last-child { border-bottom: none; }
.board-table tbody tr:hover { background: #f8fbff; }
.board-table tbody td { padding: 11px 12px; color: #555; vertical-align: middle; }

/* 열 너비 */
.board-table .col-no    { width: 56px; text-align: center; font-size: 12px; color: #aaa; }
.board-table .col-chk   { width: 32px; text-align: center; }
.board-table .col-title { text-align: left; }
.board-table .col-writer{ width: 80px; text-align: center; font-size: 12px; color: #888; }
.board-table .col-date  { width: 92px; text-align: center; font-size: 12px; color: #aaa; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-table .col-hit   { width: 52px; text-align: center; font-size: 12px; color: #bbb; }

/* 공지 행 */
.board-table tr.row-notice { background: #fffdf5; }
.board-table tr.row-notice:hover { background: #fef9e8; }

/* 답변 행 */
.board-table tr.row-reply { background: #fafcff; }
.board-table tr.row-reply .col-no { color: #ccc; }

/* 제목 셀 내부 */
.board-table .col-title a {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #333;
    line-height: 1.5;
}
.board-table .col-title a:hover .title-text { color: #289dcc; }
.board-table .title-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: 14px;
}

/* 답변 들여쓰기 */
.board-table .reply-indent { color: #ccc; font-size: 13px; flex-shrink: 0; }

/* 배지 */
.badge-notice {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 8px; font-size: 11px; font-weight: 700;
    background: #ff6b35; color: #fff; border-radius: 3px; letter-spacing: -0.3px;
}
.badge-new {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; font-size: 9px; font-weight: 800;
    background: #e53935; color: #fff; border-radius: 50%; flex-shrink: 0;
}
.badge-comment {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1px 5px; font-size: 11px; font-weight: 700;
    color: #289dcc; flex-shrink: 0;
}
.badge-comment::before { content: "["; }
.badge-comment::after  { content: "]"; }
.badge-head {
    display: inline-flex; padding: 1px 6px; font-size: 11px;
    background: #f0f0f0; color: #888; border-radius: 3px; flex-shrink: 0; white-space: nowrap;
}

/* 아이콘 */
.icon-file, .icon-mob, .icon-lock { font-size: 13px; flex-shrink: 0; opacity: .6; }

/* 데이터 없음 */
.board-table .no-data { text-align: center; padding: 40px 20px; color: #aaa; font-size: 14px; }

/* ============================================================
   상세보기 (view.php) — 모던 카드
   ============================================================ */
#dp_board_pc_view {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    margin-bottom: 24px;
}

/* 제목 영역 — 흰색 배경 + 타이포 위계 */
#dp_board_pc_view_title_area {
    padding: 28px 24px 20px !important;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #e8e8e8 !important;
    background: #fff !important;
}
#dp_board_pc_view_no {
    display: inline-block;
    font-size: 12px;
    color: #bbb;
    font-weight: 500;
    letter-spacing: 0.5px;
}
#dp_board_pc_view_title {
    display: block !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1.35 !important;
    margin-top: 6px;
    letter-spacing: -0.5px;
}
#dp_board_pc_view_other_info {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px !important;
    color: #aaa !important;
}
#dp_board_pc_view_other_info > span {
    color: #999;
    font-size: 12px !important;
}

/* 본문 */
#dp_board_pc_view_img_text {
    padding: 24px !important;
    min-height: 200px;
}
#dp_board_pc_view_text { line-height: 1.7; color: #333; font-size: 15px; }

/* 첨부파일 */
#dp_board_pc_view_file {
    padding: 16px 24px !important;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
#dp_board_pc_view_file > ul { list-style: none; margin: 8px 0 0; padding: 0; }
#dp_board_pc_view_file > ul > li {
    padding: 6px 0;
    font-size: 13px;
}
#dp_board_pc_view_file > ul > li a { color: #1976d2; text-decoration: none; }
#dp_board_pc_view_file > ul > li a:hover { text-decoration: underline; }

/* 하단 버튼 */
#dp_board_pc_view_buttom {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 20px 24px !important;
    border-top: 1px solid #e8e8e8;
    background: #fff;
}

/* 관리자 기능 소형 버튼 — 날짜변경/조회수/이동 등 인라인 유틸리티 */
.btn-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #5d4037;
    background: #fff8f0;
    border: 1px solid #ffcc80;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s;
    height: 28px;
    white-space: nowrap;
}
.btn-admin:hover {
    background: #ffe0b2;
    border-color: #ffa726;
}

/* 관리자 기능 영역 */
#dp_board_pc_view_admin_func_button {
    padding: 4px 12px !important;
    font-size: 12px !important;
    background: #fff3e0 !important;
    border: 1px solid #ffcc80 !important;
    border-radius: 4px !important;
    color: #e65100 !important;
    cursor: pointer;
}
#dp_board_pc_view_admin_func_area {
    padding: 16px 24px;
    background: #fffde7;
    border-bottom: 1px solid #f0e68c;
    font-size: 13px;
}

/* 비밀번호 입력 */
#dp_board_pc_view_no_auth {
    text-align: center;
    padding: 40px 24px !important;
}
#dp_board_pc_view_no_auth input[type=password] {
    max-width: 280px;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    margin-right: 8px;
}

/* 이미지 줌 */
#img_zoom_100p_layer {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#img_zoom_100p_layer_inner img { max-width: 95vw; max-height: 95vh; }
.add_img_area { margin-bottom: 16px; }
.add_img_area img { max-width: 100% !important; height: auto !important; border-radius: 4px; }

/* ============================================================
   댓글 — 모던 div 스타일
   ============================================================ */
#dp_board_pc_view_comment { margin-top: 24px; padding: 0 24px; }

/* 헤더 */
.cmt-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 2px solid #333;
}
.cmt-count { font-size: 14px; color: #333; }
.cmt-count strong { font-size: 16px; color: #1976d2; }
.cmt-del-all {
    padding: 4px 10px; font-size: 11px; background: #fff3e0;
    border: 1px solid #ffcc80; border-radius: 4px; color: #e65100; cursor: pointer;
}

/* 리스트 */
.cmt-list { background: #fff; }
.cmt-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 14px 20px; border-bottom: 1px solid #f0f0f0;
}
.cmt-item:last-child { border-bottom: none; }
.cmt-reply { background: #fafcff; }
.cmt-reply-icon { color: #bbb; font-size: 14px; flex-shrink: 0; padding-top: 2px; }
.cmt-body { flex: 1; min-width: 0; }

/* 메타 */
.cmt-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px;
}
.cmt-writer { font-size: 14px; font-weight: 600; color: #333; }
.cmt-writer-sub { font-size: 12px; color: #999; }
.cmt-date { font-size: 12px; color: #aaa; }
.cmt-actions { margin-left: auto; display: flex; gap: 4px; }

/* 버튼 */
.cmt-btn {
    padding: 3px 10px; font-size: 12px; border-radius: 4px; cursor: pointer;
    border: 1px solid #e0e0e0; background: #f8f9fa; color: #666;
    transition: all .15s;
}
.cmt-btn:hover { background: #e8e8e8; }
.cmt-btn-danger { color: #e53935; border-color: #ffcdd2; }
.cmt-btn-danger:hover { background: #ffebee; }

/* 내용 */
.cmt-text { font-size: 14px; line-height: 1.65; color: #444; }
.cmt-empty { color: #999; font-style: italic; }

/* 폼 영역 (답글/수정/삭제) */
.cmt-form-area {
    margin-top: 10px; padding: 14px; background: #f8f9fa;
    border: 1px solid #f0f0f0; border-radius: 8px;
}
.cmt-form-inputs {
    display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.cmt-form-inputs .form-input { max-width: 180px; }
.cmt-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* 댓글 작성 */
.cmt-write {
    background: #f8f9fa; border: 1px solid #e8e8e8; border-radius: 10px;
    padding: 20px; margin-top: 20px;
}
.cmt-write-title { font-size: 15px; font-weight: 700; color: #333; margin: 0 0 12px; }

/* 모바일 */
@media (max-width: 767px) {
    .cmt-item { padding: 12px 0; }
    .cmt-meta { gap: 4px 8px; }
    .cmt-actions { margin-left: 0; width: 100%; margin-top: 4px; }
    .cmt-form-inputs .form-input { max-width: 140px; }
}

/* ── 모바일 퍼스트 기본값: 번호/체크/날짜/조회열 숨김 ──
   @media (min-width: 768px) 에서 복원됨. MQ 없이 선언하는 것이 모바일 퍼스트 패턴. */
.board-table .col-no     { display: none; }
.board-table .col-chk    { display: none; }
.board-table .col-date   { display: none; }
.board-table .col-hit    { display: none; }
.board-table .col-writer { width: 60px; font-size: 11px; }
.board-table thead       { display: none; }
.board-table .title-text { font-size: 13px; }


/* ============================================================
   목록 B타입 — 모던 뉴스 카드 (osts 스타일)
   ============================================================ */

/* 공지 바 */
.board-notice-bar {
    background: #fffdf5;
    border: 1px solid #f0e8d0;
    border-radius: 8px 8px 0 0;
    padding: 0;
}
.notice-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f5eed8;
    transition: background .15s;
}
.notice-item:last-child { border-bottom: none; }
.notice-item:hover { background: #fef9e8; }
.notice-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }

/* 뉴스 카드 리스트 */
.news-list {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.board-notice-bar + .news-list { border-top: none; border-radius: 0 0 8px 8px; }
#dp_board_pc_list_B_type > .news-list:first-child { border-radius: 8px; }

.news-card {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: background .15s;
}
.news-card:last-child { border-bottom: none; }
.news-card:hover { background: #f8fbff; }

/* 관리자 체크박스 */
.card-chk { flex-shrink: 0; margin-right: 8px; padding-top: 4px; }

/* 썸네일 */
.card-thumb {
    flex-shrink: 0;
    width: 100px;
    height: 80px;
    margin-right: 16px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-secret { font-size: 11px; color: #aaa; }

/* 본문 */
.card-body { flex: 1; min-width: 0; }
.card-title-link { display: flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.card-title {
    font-size: 15px; font-weight: 700; color: #222;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    margin: 0; line-height: 1.4; flex: 1; min-width: 0;
}
.card-title-link:hover .card-title { color: #289dcc; }
.card-excerpt {
    margin: 6px 0 0; font-size: 13px; color: #777; line-height: 1.5;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* 메타 */
.card-meta {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    margin-top: 8px; font-size: 12px; color: #aaa;
}
.meta-writer { color: #888; }
.meta-date   { color: #bbb; }
.meta-hit    { color: #bbb; }
.meta-icon   { font-size: 12px; }

/* 데이터 없음 */
.board-empty { text-align: center; padding: 40px 20px; color: #aaa; font-size: 14px; background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; }


/* ============================================================
   목록 C타입 — photo_1~5 Flexbox 반응형
   (기본: 모바일 1열)
   ============================================================ */

/* ul → flex 컨테이너 (photo_N li 용) */
#dp_board_pc_list_C_type ul.underline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    overflow: visible;
}

/* photo_N 공통 — float 해제, 고정 margin 해제 */
#dp_board_pc_list_C_type ul li.photo_1,
#dp_board_pc_list_C_type ul li.photo_2,
#dp_board_pc_list_C_type ul li.photo_3,
#dp_board_pc_list_C_type ul li.photo_4,
#dp_board_pc_list_C_type ul li.photo_5 {
    float: none;
    margin: 0;
    box-sizing: border-box;
}

/* 모바일: 전부 1열 */
#dp_board_pc_list_C_type ul li.photo_1 { width: 100%; }
#dp_board_pc_list_C_type ul li.photo_2 { width: 100%; }
#dp_board_pc_list_C_type ul li.photo_3 { width: 100%; }
#dp_board_pc_list_C_type ul li.photo_4 { width: calc(50% - 6px); }
#dp_board_pc_list_C_type ul li.photo_5 { width: calc(50% - 6px); }

/* photo_N 내부 이미지 영역 — 고정 height 완화 */
#dp_board_pc_list_C_type ul li.photo_1 span.photo_1 { height: 56vw; line-height: normal; display: flex; align-items: center; justify-content: center; }
#dp_board_pc_list_C_type ul li.photo_2 span.photo_2 { height: 56vw; line-height: normal; display: flex; align-items: center; justify-content: center; }
#dp_board_pc_list_C_type ul li.photo_3 span.photo_3 { height: 56vw; line-height: normal; display: flex; align-items: center; justify-content: center; }
#dp_board_pc_list_C_type ul li.photo_4 span.photo_4 { height: 120px; line-height: normal; display: flex; align-items: center; justify-content: center; }
#dp_board_pc_list_C_type ul li.photo_5 span.photo_5 { height: 100px; line-height: normal; display: flex; align-items: center; justify-content: center; }

/* photo 내부 이미지 반응형 */
#dp_board_pc_list_C_type ul li [class^="photo_"] img { max-width: 100%; height: auto; }


/* ============================================================
   페이징 — osts 스타일 (텍스트 기반, 이미지 제거)
   ============================================================ */
#dp_board_pc_list_bottom_paging {
    text-align: center;
    width: 100%;
    margin: 16px 0;
}

/* paging_design1 기존 스타일 완전 제거 */
div.paging_design1 {
    height: auto !important;
    border: none !important;
    background: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}
div.paging_design1 > span.area {
    background: none !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
}
div.paging_design1 > span.area > span {
    margin: 2px !important;
    padding: 0 12px !important;
    min-width: 36px;
    height: 36px !important;
    line-height: 1 !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-family: inherit !important;
    font-size: 15px !important;
    color: #555 !important;
    cursor: pointer;
    transition: all .15s;
    vertical-align: middle;
}
div.paging_design1 > span.area > span:hover {
    background: #f5f5f5 !important;
    border-color: #bbb !important;
}
/* 현재 페이지 */
div.paging_design1 > span.area > span.list_paging_o {
    background: #4a9e4d !important;
    border-color: #3d8b40 !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(74,158,77,.25);
}
/* 일반 페이지 */
div.paging_design1 > span.area > span.list_paging_n {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    color: #555 !important;
}
/* 빈 span 숨김 */
div.paging_design1 > span.area > span.list_paging_n:empty { display: none !important; }

/* 비활성 화살표 (항상 표시, 클릭 불가) */
span.list_paging_disabled {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px !important;
    line-height: 1 !important;
    padding: 0 12px !important;
    margin: 2px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600;
    background: #f5f5f5 !important;
    border: 1px solid #e8e8e8 !important;
    color: #ccc !important;
    cursor: default;
    vertical-align: middle;
}

/* list_paging 공통 */
span.list_paging1,
span.list_paging2,
span.list_paging3,
span.list_paging_n,
span.list_paging_o {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px !important;
    line-height: 1 !important;
    padding: 0 12px !important;
    margin: 2px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    vertical-align: middle;
}
/* 이전/다음 화살표 */
span.list_paging1 {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    color: #888 !important;
}
span.list_paging1:hover {
    background: #f5f5f5 !important;
    border-color: #bbb !important;
}
/* 현재 페이지 */
span.list_paging2,
span.list_paging_o {
    background: #4a9e4d !important;
    border: 1px solid #3d8b40 !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(74,158,77,.25);
}
/* 일반 페이지 */
span.list_paging3,
span.list_paging_n {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    color: #555 !important;
}
span.list_paging3:hover,
span.list_paging_n:hover {
    background: #f5f5f5 !important;
    border-color: #bbb !important;
}

/* ============================================================
   목록 하단 — 버튼 영역
   ============================================================ */
#dp_board_pc_list_bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 0 16px;
    overflow: visible;
    clear: both;
}
/* 전체선택/선택삭제 — 한 줄 + form flex */
#dp_board_pc_list_bottom_all_check {
    float: none;
    margin: 0;
}
#dp_board_pc_list_bottom_all_check form {
    display: flex;
    gap: 6px;
    align-items: center;
}
/* 글쓰기 버튼 */
#dp_board_pc_list_bottom_write {
    float: none;
    margin-left: auto;
    margin-bottom: 0;
}

/* 하단 모든 버튼 — view 답글쓰기/수정하기 크기 통일 (100x30) */
#dp_board_pc_list_bottom button,
#dp_board_pc_view_buttom button,
#dp_form_pc_list_bottom button {
    min-width: 100px !important;
    max-width: none !important;
    width: auto !important;
    height: 34px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 600;
    border-radius: 6px !important;
}
/* ============================================================
   검색 — osts 스타일 (기존 완전 제거)
   ============================================================ */
#dp_board_pc_list_top_search {
    margin-top: 16px;
}
#dp_board_pc_list_top_search_form {
    display: flex !important;
    align-items: center;
    gap: 8px;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
}
#dp_board_pc_list_top_search_form fieldset {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
}
#dp_board_pc_list_top_search_keyword {
    flex: 1;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: #333 !important;
    outline: none;
    height: auto !important;
    line-height: 1.5 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    transition: border-color .2s;
}
#dp_board_pc_list_top_search_keyword::placeholder { color: #bbb; }
#dp_board_pc_list_top_search_keyword:focus {
    border-color: #90caf9 !important;
    box-shadow: 0 0 0 3px rgba(144,202,249,.15);
}
#dp_board_pc_list_top_search_submit,
#dp_form_pc_list_bottom_search_submit {
    flex-shrink: 0;
    float: none !important;
    width: auto !important;
    min-width: 80px;
    height: 42px !important;
    padding: 0 20px !important;
    border: 1px solid #90caf9 !important;
    border-radius: 8px !important;
    background: #e3f2fd !important;
    background-image: none !important;
    color: #1976d2 !important;
    font-size: 14px !important;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
#dp_board_pc_list_top_search_submit:hover,
#dp_form_pc_list_bottom_search_submit:hover {
    background: #bbdefb !important;
    border-color: #64b5f6 !important;
}

/* ============================================================
   작성·수정 폼 — textarea 고정 978px → 100%
   ============================================================ */
#dp_board_pc_write textarea.mobile_content {
    width: 100%;
    max-width: 100%;
    height: 300px;
    font-size: 13px;
    box-sizing: border-box;
    padding: 8px;
}

#dp_board_pc_mod textarea.mobile_content {
    width: 100%;
    max-width: 100%;
    height: 300px;
    font-size: 13px;
    box-sizing: border-box;
    padding: 8px;
}

/* 에디터 영역 높이 모바일 축소 */
#dp_board_pc_write #editor_textarea { height: 300px; }
#dp_board_pc_mod #editor_textarea   { height: 300px; }

/* 하단 버튼 영역 */
#dp_board_pc_write p.bottom_area { text-align: center; }
#dp_board_pc_mod p.bottom_area   { text-align: center; }


/* ============================================================
   비밀 인증 폼 — input 너비 유연화
   ============================================================ */
#dp_board_pc_mod_no_auth,
#dp_board_pc_del_no_auth,
#dp_board_pc_view_no_auth {
    padding: 30px 16px;
    font-size: 13px;
}

#dp_board_pc_mod_no_auth input[type=password],
#dp_board_pc_del_no_auth input[type=password],
#dp_board_pc_view_no_auth input[type=password] {
    width: 100%;
    max-width: 280px;
    padding-left: 10px;
    font-size: 13px;
    height: 38px;
    line-height: 38px;
    box-sizing: border-box;
}


/* ============================================================
   게시물 상세보기 — 타이틀 폰트 크기 축소
   ============================================================ */
#dp_board_pc_view_title { font-size: 18px; }
#dp_board_pc_view_title_area { padding: 16px 0; }

/* 첨부파일 목록 */
#dp_board_pc_view_file > ul > li { float: none; margin-bottom: 4px; }

/* ============================================================
   댓글 — textarea 834px → 100%
   ============================================================ */
#dp_board_pc_view_comment div.comment_area ul li.comment_line {
    padding: 16px 12px;
}

#dp_board_pc_view_comment div.comment_area_new {
    padding: 16px 12px;
}

#dp_board_pc_view_comment textarea.comment_content {
    width: 100%;
    max-width: 100%;
    height: 80px;
    font-size: 13px;
    box-sizing: border-box;
}

/* 댓글 작성자·비밀번호 입력 */
#dp_board_pc_view_comment input.comment_input_nick,
#dp_board_pc_view_comment input.comment_input_pwd {
    width: 120px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
}

/* 댓글 작성자 영역 wrapping */
#dp_board_pc_view_comment span.no_member_writer {
    float: none;
    display: block;
    margin-bottom: 8px;
}


/* ============================================================
   모던 폼 카드 (write/mod/reply 공용)
   ============================================================ */

/* 동의 카드 */
.board-agree-card {
    background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
    padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.agree-card-title { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 16px; }
.agree-section { margin-bottom: 16px; }
.agree-label { font-size: 13px; font-weight: 600; color: #555; margin-bottom: 8px; }
.agree-tabs { display: flex; gap: 0; margin-bottom: 0; }
.agree-tab {
    padding: 8px 16px; font-size: 12px; cursor: pointer; border: 1px solid #ddd;
    background: #f5f5f5; color: #666; transition: all .15s;
}
.agree-tab.active, .agree-tab:first-child { background: #fff; border-bottom-color: #fff; font-weight: 600; }
.agree-content {
    width: 100%; height: 100px; border: 1px solid #e0e0e0; border-radius: 0 0 6px 6px;
    padding: 12px; font-size: 12px; line-height: 1.6; color: #666; resize: none; background: #fafafa;
}
.agree-check { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: #333; cursor: pointer; }

/* 폼 카드 */
.board-form-card {
    background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
    overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.form-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px; border-bottom: 1px solid #f0f0f0; background: #f8f9fa;
}
.form-card-header h3 { font-size: 17px; font-weight: 700; color: #222; margin: 0; }
.required-info { font-size: 12px; color: #e53935; }
.form-card-body { border: none; padding: 0; margin: 0; }

/* 폼 행 */
.form-row {
    display: flex; align-items: center; padding: 14px 24px;
    border-bottom: 1px solid #f5f5f5;
    min-height: 48px;
}
.form-row:last-child { border-bottom: none; }
.form-label {
    flex-shrink: 0; width: 110px; font-size: 13px; font-weight: 600;
    color: #555;
    padding: 0 !important; margin: 0;
    margin-right: 20px !important;
    line-height: 43px; height: 43px;
}
.form-label .req { color: #e53935; font-weight: 700; margin-right: 2px; }
.form-field { flex: 1; min-width: 0; }
/* 복수행 콘텐츠(비밀번호변경, 이메일 등)는 상단 정렬 */
.form-row--top { align-items: flex-start; }
.form-row--top .form-label { height: auto !important; line-height: 43px !important; }
/* 주소 등 버튼 시작 행은 살짝만 */
.form-row--addr .form-label { line-height: 36px !important; }

/* 인풋 */
.form-input, .form-select {
    width: 100% !important; max-width: 100% !important;
    padding: 10px 14px !important; border: 1px solid #e0e0e0 !important; border-radius: 6px !important;
    font-size: 14px !important; color: #333 !important; background: #fff !important; outline: none;
    transition: border-color .2s; height: auto !important; line-height: 1.5 !important;
    box-sizing: border-box;
}
.form-input:focus, .form-select:focus {
    border-color: #90caf9 !important; box-shadow: 0 0 0 3px rgba(144,202,249,.15);
}
.form-input::placeholder { color: #bbb; }
.form-select { max-width: 240px !important; }

/* 체크박스 */
.form-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; cursor: pointer; padding: 8px 0; }

/* 파일 */
.form-file { margin-bottom: 6px; font-size: 13px; }
.file-limit { display: block; font-size: 12px; color: #999; margin-bottom: 6px; }
.btn-add-file {
    display: inline-block; margin-top: 6px; padding: 4px 12px;
    font-size: 12px; color: #1976d2; background: #e3f2fd;
    border: 1px solid #90caf9; border-radius: 4px; cursor: pointer;
}

/* 에디터 */
.form-editor { padding: 0 24px 24px; }

/* 버튼 */
.form-actions {
    display: flex; gap: 8px; justify-content: center;
    padding: 20px 24px; border-top: 1px solid #f0f0f0; background: #f8f9fa;
}
.btn {
    padding: 10px 28px; font-size: 14px; font-weight: 700;
    border-radius: 8px; border: 1px solid transparent; cursor: pointer;
    transition: all .15s;
}
.btn-primary {
    background: #e3f2fd; border-color: #90caf9; color: #1976d2;
}
.btn-primary:hover { background: #bbdefb; }
.btn-secondary {
    background: #f5f5f5; border-color: #d0d0d0; color: #666;
}
.btn-secondary:hover { background: #e8e8e8; }

/* 파일 리스트 (mod.php) */
.file-list { list-style: none; margin: 0; padding: 0; }
.file-item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px;
}
.file-action { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #888; cursor: pointer; white-space: nowrap; }
.file-name { color: #1976d2; text-decoration: none; }
.file-name:hover { text-decoration: underline; }
.file-size { color: #aaa; font-size: 12px; }

/* 라디오/체크박스 그룹 */
.form-radio, .form-checkbox {
    display: inline-flex; align-items: center; gap: 6px;
    margin-right: 16px;
    font-size: 14px; color: #333; cursor: pointer;
    line-height: 1.4;
}
.form-radio input[type="radio"], .form-checkbox input[type="checkbox"] {
    width: 16px; height: 16px; margin: 0; cursor: pointer;
}

/* textarea */
.form-textarea {
    width: 100% !important; min-height: 80px; padding: 10px 14px;
    border: 1px solid #e0e0e0 !important; border-radius: 6px !important;
    font-size: 14px; color: #333; line-height: 1.6;
    resize: vertical; outline: none;
}
.form-textarea:focus { border-color: #90caf9; box-shadow: 0 0 0 3px rgba(144,202,249,.15); }

/* 전화번호/사업자번호 그룹 */
.form-tel-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.form-tel { max-width: 120px !important; min-width: 70px; text-align: center; flex: 1; }
.tel-sep { color: #aaa; font-size: 16px; flex-shrink: 0; }

/* 주소 그룹 */
.form-addr-group .form-input { margin-bottom: 6px; }

/* 날짜 그룹 */
.form-date-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 힌트 텍스트 */
.field-hint { font-size: 12px; color: #999; margin-bottom: 6px; line-height: 1.4; }

/* view 전용 */
.view-value { font-size: 14px; color: #333; display: inline-block; font-weight: 600; line-height: 43px; height: 43px; }
.view-sub { font-size: 12px; color: #999; margin-left: 6px; }
.badge-state {
    display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 700;
    border-radius: 4px; border: 1px solid transparent;
}

/* form 하단 버튼 */
#dp_form_pc_view_bottom,
#dp_form_pc_list_bottom {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 0 0 16px;
}
#dp_form_pc_list_bottom_paging { width: 100%; text-align: center; margin: 16px 0; }
#dp_form_pc_list_bottom_all_check { float: none; margin: 0; }
#dp_form_pc_list_bottom_all_check form { display: flex; gap: 6px; }
#dp_form_pc_list_bottom_write { float: none; margin-left: auto; margin-bottom: 0; }

/* form 리스트 헤더 */
.form-list-header {
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #666;
}
.list-total strong { color: #333; font-weight: 700; }

/* form 상태 열 */
.board-table .col-state { width: 80px; text-align: center; }
.badge-state {
    display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 700;
    border-radius: 4px; border: 1px solid transparent;
}

/* form 검색 영역 */
.form-search-area { margin-top: 16px; }

/* 모바일: form 상태열 남기고 날짜 숨김 */
.form-table .col-date { display: none; }
@media (min-width: 768px) {
    .form-table .col-date { display: table-cell; width: 92px; white-space: nowrap; text-align: center; font-size: 12px; color: #aaa; font-variant-numeric: tabular-nums; }
}

/* 상태 배지 (form 전용) */
.state_1 { background: #e3f2fd !important; border-color: #90caf9 !important; color: #1565c0 !important; }
.state_2 { background: #fff3e0 !important; border-color: #ffcc80 !important; color: #e65100 !important; }
.state_3 { background: #f3e5f5 !important; border-color: #ce93d8 !important; color: #6a1b9a !important; }
.state_4 { background: #e8f5e9 !important; border-color: #a5d6a7 !important; color: #2e7d32 !important; }

/* 모바일 */
@media (max-width: 767px) {
    .form-row { flex-direction: column; padding: 12px 16px; align-items: flex-start !important; }
    .form-row .form-label,
    .form-row--top .form-label,
    .form-row--addr .form-label { width: 100% !important; height: auto !important; line-height: 1.4 !important; margin-bottom: 6px !important; padding-top: 0 !important; }
    .form-row .view-value { height: auto !important; line-height: 1.4 !important; }
    .form-card-header { padding: 14px 16px; }
    .form-actions { padding: 16px; }
    .form-editor { padding: 0 16px 16px; }
    .board-agree-card { padding: 16px; }
    .form-tel-group { flex-wrap: nowrap; }
    .form-tel { max-width: none !important; flex: 1; min-width: 60px; }
    .form-date-group { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .form-select { max-width: 100% !important; }
}

/* ============================================================
   카테고리 탭 — 프리미엄 필(pill) 디자인
   ============================================================ */
.board-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0;
    margin-bottom: 12px;
}
.board-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-decoration: none;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 24px;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
    letter-spacing: -0.2px;
}
.board-tab:hover {
    color: #333;
    background: #eef5fd;
    border-color: #c8ddf5;
    box-shadow: 0 2px 6px rgba(25,118,210,.08);
}
.board-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(25,118,210,.25);
    font-weight: 700;
}

/* 리스트 정보 바 */
.board-list-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #888;
}
.list-total { font-size: 13px; color: #888; }
.list-total strong { color: #333; font-weight: 700; font-size: 15px; }

/* 기존 headword 숨김 (모던 탭으로 대체) */
#dp_board_pc_list_top_headword { display: none !important; }
#dp_board_pc_list_top_total_record { display: none !important; }

/* 모바일 탭 */
@media (max-width: 767px) {
    .board-tabs { gap: 6px; padding: 12px 0; }
    .board-tab { padding: 7px 16px; font-size: 13px; }
}


/* ============================================================
   태블릿 (768px ~)
   ============================================================ */
@media (min-width: 768px) {

    /* A타입 — 태블릿: 테이블 헤더 + 열 복원 */
    .board-table thead { display: table-header-group; }
    .board-table .col-no     { display: table-cell; }
    .board-table .col-chk    { display: table-cell; }
    .board-table .col-date   { display: table-cell; }
    .board-table .col-hit    { display: table-cell; }
    .board-table .col-writer { width: 80px; font-size: 12px; }
    .board-table .title-text { font-size: 14px; }

    /* B타입 — 태블릿: 확대 */
    .news-card { padding: 20px; }
    .card-thumb { width: 160px; height: 120px; margin-right: 24px; border-radius: 8px; }
    .card-title { font-size: 17px; }
    .card-excerpt { -webkit-line-clamp: 3; }

    /* C타입 photo_N — 태블릿 2열 */
    #dp_board_pc_list_C_type ul li.photo_1 { width: 100%; }
    #dp_board_pc_list_C_type ul li.photo_2 { width: calc(50% - 6px); }
    #dp_board_pc_list_C_type ul li.photo_3 { width: calc(50% - 6px); }
    #dp_board_pc_list_C_type ul li.photo_4 { width: calc(33.33% - 8px); }
    #dp_board_pc_list_C_type ul li.photo_5 { width: calc(25% - 9px); }

    /* 이미지 영역 높이 조정 */
    #dp_board_pc_list_C_type ul li.photo_1 span.photo_1 { height: 420px; }
    #dp_board_pc_list_C_type ul li.photo_2 span.photo_2 { height: 240px; }
    #dp_board_pc_list_C_type ul li.photo_3 span.photo_3 { height: 200px; }
    #dp_board_pc_list_C_type ul li.photo_4 span.photo_4 { height: 150px; }
    #dp_board_pc_list_C_type ul li.photo_5 span.photo_5 { height: 110px; }

    /* 검색창 */
    #dp_board_pc_list_top_search_form { padding: 20px 30px; }
    #dp_board_pc_list_top_search_keyword { font-size: 14px; height: 28px; line-height: 28px; padding-left: 20px; }
    #dp_board_pc_list_top_search_submit { height: 30px; }

    /* 작성·수정 textarea */
    #dp_board_pc_write textarea.mobile_content { height: 400px; font-size: 14px; padding: 10px; }
    #dp_board_pc_mod   textarea.mobile_content { height: 400px; font-size: 14px; padding: 10px; }
    #dp_board_pc_write #editor_textarea { height: 450px; }
    #dp_board_pc_mod   #editor_textarea { height: 450px; }

    /* 댓글 */
    #dp_board_pc_view_comment div.comment_area ul li.comment_line { padding: 30px 40px; }
    #dp_board_pc_view_comment div.comment_area_new { padding: 30px 40px; }
    #dp_board_pc_view_comment textarea.comment_content { height: 44px; }
    #dp_board_pc_view_comment span.no_member_writer { float: right; display: inline-block; }

    /* 비밀 인증 */
    #dp_board_pc_mod_no_auth,
    #dp_board_pc_del_no_auth,
    #dp_board_pc_view_no_auth { padding: 60px; font-size: 14px; }
    #dp_board_pc_mod_no_auth input[type=password],
    #dp_board_pc_del_no_auth input[type=password],
    #dp_board_pc_view_no_auth input[type=password] { max-width: 200px; font-size: 14px; height: 34px; line-height: 34px; padding-left: 20px; }

    /* 상세보기 */
    #dp_board_pc_view_title { font-size: 24px; }
    #dp_board_pc_view_title_area { padding: 30px 0; }
    #dp_board_pc_view_file > ul > li { float: left; margin-bottom: 0; }

    /* 헤드워드 */
    #dp_board_pc_list_top_headword ul li span { padding: 0 20px; min-width: 80px; font-size: 12px; }
}


/* ============================================================
   데스크탑 (1025px ~) — 원본 크기 복원
   ============================================================ */
@media (min-width: 1025px) {

    /* C타입 photo_N — border-box 기준 유연 폭 (gap 13px) */
    #dp_board_pc_list_C_type ul.underline { gap: 30px 13px; }
    #dp_board_pc_list_C_type ul li.photo_1 { width: 100%; margin-right: 0; }
    #dp_board_pc_list_C_type ul li.photo_2 { width: calc((100% - 13px) / 2); margin-right: 0; }
    #dp_board_pc_list_C_type ul li.photo_3 { width: calc((100% - 26px) / 3); margin-right: 0; }
    #dp_board_pc_list_C_type ul li.photo_4 { width: calc((100% - 39px) / 4); margin-right: 0; }
    #dp_board_pc_list_C_type ul li.photo_5 { width: calc((100% - 52px) / 5); margin-right: 0; }

    /* 이미지 영역 — 원본 고정 높이 유지 */
    #dp_board_pc_list_C_type ul li.photo_1 span.photo_1 { height: 768px; }
    #dp_board_pc_list_C_type ul li.photo_2 span.photo_2 { height: 362px; }
    #dp_board_pc_list_C_type ul li.photo_3 span.photo_3 { height: 227px; }
    #dp_board_pc_list_C_type ul li.photo_4 span.photo_4 { height: 160px; }
    #dp_board_pc_list_C_type ul li.photo_5 span.photo_5 { height: 119px; }

    /* 검색창 — 유연한 너비 */
    #dp_board_pc_list_top_search_keyword { width: calc(100% - 44px); max-width: 100%; }

    /* 작성·수정 textarea — 유연한 너비 */
    #dp_board_pc_write textarea.mobile_content { width: 100%; max-width: 100%; height: 470px; }
    #dp_board_pc_mod   textarea.mobile_content { width: 100%; max-width: 100%; height: 470px; }
    #dp_board_pc_write #editor_textarea { height: 500px; }
    #dp_board_pc_mod   #editor_textarea { height: 500px; }

    /* 댓글 textarea — 유연한 너비 */
    #dp_board_pc_view_comment textarea.comment_content { width: 100%; max-width: 100%; }
}