@charset "utf-8";
/*
  홈페이지(/page) 게시판 전용 스타일 — 운영 원본 board CSS 가 homepage_src 에 없어 신규 작성.
  - com.bbs board JSP(목록/FAQ/갤러리/상세/글쓰기) 가 쓰는 클래스 커버.
  - .pc_bbs 컨테이너(page/bbs/*.jsp 래퍼) 하위로 스코프해 다른 홈페이지 페이지에 영향 없음.
  - 포인트 컬러: #FFAE18 (홈페이지 메인 톤)
*/

.pc_bbs{ max-width:1100px; margin:60px auto 100px; padding:0 20px; color:#333; font-size:15px; line-height:1.6; }
.pc_bbs a{ color:inherit; text-decoration:none; }

/* ===== 채널 분기 =====
   - 기본(.pc_bbs)            : 홈페이지 PC (page/bbs) — pc_board(표) 노출
   - .pc_bbs.bbs_admt         : 관리자 (admt/bbs)      — PC형, 외곽 여백·중앙정렬 해제(패널 폭 채움)
   - .pc_bbs.bbs_app          : 앱 모바일 (contents/bbs)— mob_board 노출, 폰 폭                       */
.pc_bbs.bbs_admt{ width:100%; max-width:none; margin:0 0 20px; }
.pc_bbs.bbs_app{ max-width:480px; margin:0 auto; padding:16px; }
.pc_bbs.bbs_app .pc_board{ display:none; }                 /* 앱: 표 숨김 */
.pc_bbs.bbs_app .mob_board{ display:block; }               /* 앱: 카드리스트 노출 */
.pc_bbs.bbs_app .sub_input ul{ flex-wrap:nowrap; }        /* 제목+검색어 한 줄 */
.pc_bbs.bbs_app .sub_input li.input{ flex:1 1 auto; min-width:0; }
.pc_bbs.bbs_app .sub_input li.input input{ width:100%; box-sizing:border-box; }
.pc_bbs.bbs_app .sub_picture li{ width:calc(50% - 10px); } /* 갤러리 2열 */
.pc_bbs.bbs_app .button_below a{ width:100%; min-width:0; box-sizing:border-box; }
.pc_bbs .clear{ clear:both; }

/* ===== 검색바 ===== */
.pc_bbs .sub_input{ margin-bottom:24px; }
.pc_bbs .sub_input ul{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.pc_bbs .sub_input li{ display:inline-flex; }
.pc_bbs .sub_input select,
.pc_bbs .sub_input input[type=text]{ height:44px; border:1px solid #ddd; border-radius:6px; padding:0 14px; font-size:15px; background:#fff; }
.pc_bbs .sub_input li.input{ position:relative; }
.pc_bbs .sub_input li.input input{ width:240px; padding-right:64px; }
.pc_bbs .sub_input li.input a{ position:absolute; right:5px; top:5px; height:34px; line-height:34px; padding:0 16px; background:#FFAE18; color:#fff; border-radius:5px; font-weight:600; }

/* ===== 일반 목록(PC 테이블) ===== */
.pc_bbs .pc_board{ width:100%; }
.pc_bbs .table_col{ width:100%; border-collapse:collapse; border-top:2px solid #222; }
.pc_bbs .table_col th,
.pc_bbs .table_col td{ padding:14px 10px; text-align:center; border-bottom:1px solid #eee; font-size:14px; }
.pc_bbs .table_col thead th{ background:#fafafa; color:#444; font-weight:700; }
.pc_bbs .table_col td.lf{ text-align:left; }
.pc_bbs .table_col tbody tr:hover{ background:#fffaf0; }
.pc_bbs .tbl_gong span,
.pc_bbs .tbl_gong{ display:inline-block; background:#FFAE18; color:#fff; font-size:12px; font-weight:700; padding:2px 10px; border-radius:12px; }
.pc_bbs .new{ display:inline-block; margin-right:4px; color:#e8500e; font-weight:700; font-size:12px; }
.pc_bbs .a_space{ display:inline-block; padding:2px 8px; background:#f2f4f7; border-radius:10px; font-size:12px; color:#555; }
.pc_bbs .a_space3{ display:inline-block; padding:2px 8px; background:#eaf6ec; border-radius:10px; font-size:12px; color:#2e9d4f; }

/* ===== 모바일 목록 ===== */
.pc_bbs .mob_board{ display:none; }
.pc_bbs .mob_board ul{ list-style:none; margin:0; padding:0; border-top:2px solid #222; }
.pc_bbs .mob_board li{ padding:14px 6px; border-bottom:1px solid #eee; }
.pc_bbs .mob_board .board_fonts dt{ font-size:15px; font-weight:600; margin-bottom:6px; }
.pc_bbs .mob_board .board_fonts dd{ display:flex; gap:12px; color:#888; font-size:13px; }
.pc_bbs .mob_board .board_fonts dd p{ margin:0; }

/* ===== FAQ 아코디언 ===== */
.pc_bbs .faq_wrap .test_none{ text-align:center; color:#999; padding:60px 0; }
.pc_bbs .faq_list ul{ list-style:none; margin:0; padding:0; border-top:2px solid #222; }
.pc_bbs .faq_list li{ border-bottom:1px solid #eee; }
.pc_bbs .faq_list .fl_q_n{ display:flex; align-items:center; gap:14px; padding:20px 16px; cursor:pointer; font-size:16px; }
.pc_bbs .faq_list .ico_q_n,
.pc_bbs .faq_list .ico_a_n{ flex:0 0 36px; width:36px; height:36px; line-height:36px; text-align:center; border-radius:50%; font-weight:800; }
.pc_bbs .faq_list .ico_q_n{ background:#FFAE18; color:#fff; }
.pc_bbs .faq_list .ico_a_n{ background:#f2f4f7; color:#FFAE18; }
.pc_bbs .faq_list .fl_ttl{ flex:1; font-weight:600; }
.pc_bbs .faq_list .fl_q_n i{ flex:0 0 auto; width:10px; height:10px; border-right:2px solid #bbb; border-bottom:2px solid #bbb; transform:rotate(45deg); transition:transform .2s; }
.pc_bbs .faq_list li.open .fl_q_n i{ transform:rotate(225deg); }
.pc_bbs .faq_list .fl_a_n{ display:none; align-items:flex-start; gap:14px; padding:20px 16px; background:#fafafa; border-top:1px solid #eee; }
.pc_bbs .faq_list li.open .fl_a_n{ display:flex; }
.pc_bbs .faq_list .s_descript{ flex:1; }
.pc_bbs .faq_list .btn_basic_wrap{ margin-top:10px; }
.pc_bbs .faq_list .btn_basic{ display:inline-block; padding:6px 14px; border:1px solid #ddd; border-radius:5px; font-size:13px; }

/* ===== 갤러리 ===== */
.pc_bbs .sub_picture ul{ display:flex; flex-wrap:wrap; gap:20px; list-style:none; margin:0; padding:0; }
.pc_bbs .sub_picture li{ width:calc(25% - 15px); }
.pc_bbs .sub_picture li.no_data{ width:100%; text-align:center; color:#999; padding:60px 0; }
.pc_bbs .sub_picture .picture_cent{ display:block; }
.pc_bbs .sub_picture .picture_cent img{ width:100%; height:180px; object-fit:cover; border-radius:8px; background:#f2f4f7; }
.pc_bbs .sub_picture dl{ margin:10px 0 0; }
.pc_bbs .sub_picture dt{ font-weight:600; font-size:15px; }
.pc_bbs .sub_picture dd{ color:#888; font-size:13px; margin:4px 0 0; }

/* ===== 상세 보기 ===== */
.pc_bbs .sub_detailed{ border-top:2px solid #222; margin-bottom:24px; }
.pc_bbs .sub_detailed ul{ list-style:none; margin:0; padding:0; }
.pc_bbs .sub_detailed li{ border-bottom:1px solid #eee; padding:18px 16px; }
.pc_bbs .sub_detailed li h5{ font-size:20px; font-weight:700; margin:0 0 12px; }
.pc_bbs .sub_detailed li p{ display:inline-flex; align-items:center; margin:0 18px 0 0; color:#666; font-size:14px; }
.pc_bbs .sub_detailed .bg{ display:inline-block; margin-right:6px; color:#999; font-weight:600; }
.pc_bbs .sub_detailed li.big{ min-height:200px; }
.pc_bbs .sub_detailed li.big p{ display:block; color:#333; line-height:1.8; }
.pc_bbs .sub_detailed li.small .mob_bg{ }
.pc_bbs .sub_detailed img{ max-width:100%; height:auto; }
/* ===== 답변(reply) — 원글과 구분: 들여쓰기·연한 배경·↳답변 표시·작은 버튼 ===== */
.pc_bbs .reply_item{ border:1px solid #eee; border-left:3px solid #FFAE18; border-radius:6px; background:#fafafb; margin:0 0 10px 24px; }
.pc_bbs .reply_item::before{ content:"\21B3 답변"; display:block; padding:10px 16px 0; color:#FFAE18; font-weight:700; font-size:13px; }
.pc_bbs .reply_item li{ border-bottom:1px solid #eee; padding:10px 16px; }
.pc_bbs .reply_item li:last-child{ border-bottom:0; }
.pc_bbs .reply_item li h5{ font-size:16px; margin:0 0 8px; }
.pc_bbs .reply_item li.big{ min-height:auto; }
.pc_bbs .reply_btns{ text-align:right; margin:0 0 20px 24px; }
.pc_bbs .reply_btns a{ min-width:0; height:34px; line-height:34px; padding:0 16px; font-size:13px; }

/* 추천/반대 */
.pc_bbs #btnGood,
.pc_bbs #btnBad{ border:1px solid #ddd; background:#fff; border-radius:6px; padding:8px 18px; margin:0 4px; cursor:pointer; }

/* ===== 댓글 ===== */
.pc_bbs .comment{ margin-top:30px; border-top:2px solid #222; padding-top:20px; }
.pc_bbs .com_tit{ display:flex; align-items:center; gap:10px; margin-bottom:12px; font-weight:700; }
.pc_bbs .com_tit .bt_login{ height:34px; border:1px solid #ddd; border-radius:6px; background:#fff; padding:0 14px; font-size:13px; cursor:pointer; }
.pc_bbs .com_grade{ display:inline-flex; gap:8px; }
.pc_bbs .com_grade label{ cursor:pointer; font-size:13px; color:#f5b301; }
.pc_bbs .com_grade input{ vertical-align:middle; margin-right:2px; }
/* 댓글 작성 박스 */
.pc_bbs .com_write{ border:1px solid #e2e2e2; border-radius:8px; padding:14px; background:#fafafa; margin-bottom:24px; }
.pc_bbs .com_write .name{ font-weight:600; font-size:14px; margin:0 0 8px; }
.pc_bbs .com_write textarea{ width:100%; min-height:84px; border:1px solid #ddd; border-radius:6px; padding:10px 12px; font-size:14px; font-family:inherit; line-height:1.5; resize:vertical; box-sizing:border-box; background:#fff; }
.pc_bbs .com_write .btn{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }   /* byte 카운터(좌) + 등록버튼(우) 한 줄. 관리자 Bootstrap .btn(inline-block) 충돌도 flex로 덮어씀 */
.pc_bbs .com_write .btn #byte_area{ color:#999; font-size:12px; }
.pc_bbs .com_write .btn button{ min-width:84px; height:38px; border:0; border-radius:6px; background:#FFAE18; color:#fff; font-weight:600; font-size:14px; cursor:pointer; }
/* 댓글 목록 */
.pc_bbs .com_list .view_comment{ border-bottom:1px solid #eee; padding:14px 4px; }
.pc_bbs .com_list dl{ margin:0; }
.pc_bbs .com_list .name{ font-weight:600; font-size:14px; color:#333; }
.pc_bbs .com_list .txt{ margin:6px 0; font-size:14px; line-height:1.6; color:#444; word-break:break-all; }
.pc_bbs .com_list .time{ color:#999; font-size:12px; }
.pc_bbs .com_list .del{ color:#888; font-size:12px; margin-left:8px; }
/* 댓글 본인/관리자 수정·삭제 버튼 (공용 .del 클래스의 flex+아이콘 충돌 회피용 전용 클래스) */
.pc_bbs .com_list .com_act{ display:inline-block; vertical-align:middle; margin-left:6px; padding:1px 9px; border:1px solid #ddd; border-radius:4px; background:#fff; color:#666; font-size:12px; line-height:1.7; cursor:pointer; }
.pc_bbs .com_list .com_act:hover{ background:#f5f5f5; color:#333; }
.pc_bbs .com_list ul{ list-style:none; margin:8px 0 0; padding:0; }
.pc_bbs .com_list ul button{ border:1px solid #ddd; background:#fff; border-radius:6px; padding:4px 10px; margin-right:4px; font-size:12px; color:#555; cursor:pointer; }

/* ===== 페이징 ===== */
.pc_bbs .paging{ text-align:center; margin:30px 0; }
.pc_bbs .paging a,
.pc_bbs .paging strong,
.pc_bbs .paging span{ display:inline-block; min-width:34px; height:34px; line-height:34px; margin:0 2px; padding:0 6px; border:1px solid #e2e2e2; border-radius:5px; color:#555; }
.pc_bbs .paging strong,
.pc_bbs .paging .on{ background:#FFAE18; border-color:#FFAE18; color:#fff; font-weight:700; }
.pc_bbs .paging img{ vertical-align:middle; }

/* ===== 하단 버튼 ===== */
.pc_bbs .button_below{ text-align:center; margin:30px 0; }
.pc_bbs .button_below a,
.pc_bbs .button_below button{ display:inline-block; min-width:120px; height:46px; line-height:46px; margin:0 4px; padding:0 22px; border-radius:6px; font-weight:600; font-size:15px; border:0; cursor:pointer; }
.pc_bbs .button_below a.black,
.pc_bbs .button_below .black{ background:#FFAE18; color:#fff; }
.pc_bbs .button_below a.gray,
.pc_bbs .button_below .gray{ background:#e9ecef; color:#444; }

/* ===== 글쓰기 폼 ===== */
.pc_bbs .form_wrap{ border-top:2px solid #222; }
.pc_bbs .form_wrap fieldset{ border:0; margin:0; padding:0; }
.pc_bbs .form_wrap legend{ position:absolute; left:-9999px; }
.pc_bbs .form_wrap .txt-require{ margin:14px 0; color:#888; font-size:13px; }
.pc_bbs .form-input-group.hasDl dl{ display:flex; align-items:flex-start; border-bottom:1px solid #eee; margin:0; }
.pc_bbs .form-input-group.hasDl dt{ flex:0 0 160px; padding:16px; background:#fafafa; font-weight:600; }
.pc_bbs .form-input-group.hasDl dd{ flex:1; padding:12px 16px; }
.pc_bbs .txt-required img{ display:none; }   /* 필수 아이콘 이미지 없으면 숨김 */
.pc_bbs .txt-required:after{ content:" *"; color:#e8500e; font-weight:700; }
.pc_bbs .form-input,
.pc_bbs .form-control{ height:42px; border:1px solid #ddd; border-radius:6px; padding:0 12px; font-size:15px; background:#fff; }
.pc_bbs .form-input.w_100,
.pc_bbs textarea.form-input{ width:100%; }
.pc_bbs .form_wrap textarea{ width:100%; border:1px solid #ddd; border-radius:6px; padding:12px; font-size:15px; }
/* 입력요소 글꼴 통일 (textarea 기본 monospace 방지 → 제목/내용 동일 글꼴) */
.pc_bbs .form-input,
.pc_bbs .form-control,
.pc_bbs input[type=text],
.pc_bbs textarea{ font-family:inherit; }
.pc_bbs .input-group{ display:inline-flex; align-items:center; gap:0; }
.pc_bbs .input-group-append .btn{ height:42px; border:1px solid #ddd; border-left:0; background:#f7f7f7; padding:0 12px; border-radius:0 6px 6px 0; }
.pc_bbs .radio-group{ display:inline-flex; gap:18px; align-items:center; }
.pc_bbs .form-radio{ display:inline-flex; align-items:center; gap:6px; }
.pc_bbs .rowEdit{ width:100%; }