/* =========================================================
   목록형 게시판 (BBSS001) 전용 CSS — simple 테마.
   list.html 의 표/페이징은 main.css 의 .table_st2 / .boardFoot 활용.
   view.html 의 상세/액션/추천/댓글/모달 스타일 + bbs-view.js 와 함께 동작.
   ========================================================= */

/* ---------- view: post head ---------- */
.post_head {
    padding: 1.5rem 0;
    border-top: 2px solid #333;
    border-bottom: 1px solid #ddd;
}
.post_head .tag {
    display: inline-block;
    font-size: 0.8rem;
    color: #1a3b8e;
    background: #eef1f7;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    margin-bottom: 0.6rem;
    font-weight: 600;
}
/* 분류(.cate) + 제목(h2) 한 줄 */
.post_head .post_title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 .7rem;
}
.post_head h2 {
    font-size: clamp(1.3rem, 2vw, 1.5rem);
    color: #222;
    font-weight: 700;
    margin: 0;
    line-height: 1.35;
}
/* 메타 — 항목 사이 세로 구분선(|), "라벨 : 값" */
.post_head .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.9rem;
    color: #444b57;              /* 라벨(제목쪽) 진하게 */
}
.post_head .meta > span {
    position: relative;
    padding: 0.1rem 0.9rem;
    line-height: 1.4;
    font-weight: 400;
    color: #000;
}
.post_head .meta > span:first-child { padding-left: 0; }
.post_head .meta > span + span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: #d5d9e0;
}
.post_head .meta em { font-style: normal; color: #6c7075; font-weight: 400; }   /* 값 연하게 */
/* 외부 링크(원문 보기)는 공통 버튼 btn.btn_s.btn_line_dark 사용 — 별도 스타일 없음 */

/* ---------- view: post body ---------- */
.post_body {
    padding: 2rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
}
.post_content {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    min-height: 200px;
}
.post_content img { max-width: 100%; height: auto; }
.post_content p   { margin: 1rem 0; }
.post_content h2,
.post_content h3 { margin: 2rem 0 1rem; color: #222; }
.post_empty {
    color: #999;
    text-align: center;
    padding: 3rem 0;
}

/* ---------- view: 첨부파일 (게시판 상세 — BBSS001/002/003/005 모두 bbs-basic.css 로드) ----------
[html]
<div class="post_files">
	<h4>첨부파일 <span id="fileCnt">2</span></h4><!-- 개수는 JS(view.js)가 채움 -->
	<ul class="attach_list">
		<li>
			<a href="/common/file/download.do?file_dtl_id=1" download>
				<span class="material-symbols-outlined attach_icon">download</span>
				<div class="attach_info">
					<span class="attach_label">Download</span>
					<span class="attach_name">공고문.hwp <span class="size">(1.1 MB)</span></span>
				</div>
			</a>
		</li>
		<!-- li 반복 -->
	</ul>
</div>
*/
.post_files { margin-bottom: 2rem; }
.post_files h4 { font-size: 0.95rem; margin: 0 0 0.8rem; color: #333; }
.post_files h4 span { color: #1a3b8e; }   /* 개수(첨부파일 N) — JS(view.js)가 채움 */

/* 첨부파일 목록 */
.attach_list { list-style: none; padding: 0; margin: 0; }
.attach_list li { border: 1px solid #ddd; margin-bottom: -1px; }   /* 테두리 겹침 */
.attach_list li a {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    background: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.attach_list li a:hover { background: #f5f5f5; }
.attach_list .attach_icon {
    flex: none;
    width: 66px;
    height: 66px;
    font-size: 1.5rem;
    color: #333;
    background: #f7f7f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--line-color);
}
.attach_list .attach_info {
    flex: 1;
    min-width: 0;                 /* flex 안에서 긴 파일명이 접히도록 */
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 1rem 0.5rem 0;
}
.attach_list .attach_label { font-size: 0.85rem; color: #888; }
.attach_list .attach_name { font-size: 1rem; color: #333; font-weight: 500; overflow-wrap: anywhere; }
.attach_list .attach_name .size { color: #888; font-size: 0.85rem; font-weight: 400; margin-left: 4px; white-space: nowrap; }

/* attach_list 모바일(≤900px) — 아이콘: 라운드 정사각형 + 왼쪽 여백(연한 라인) */
@media screen and (max-width: 900px) {
    .attach_list li a { gap: 12px; }
    .attach_list .attach_icon {
        width: 44px;
        height: 44px;
        margin: 10px 0 10px 12px;
        border: 1px solid var(--line-color);
        border-radius: 8px;
        font-size: 1.2rem;
    }
    .attach_list .attach_info { padding: 0.5rem 0.8rem 0.5rem 0; }
    .attach_list .attach_name { font-size: 0.92rem; }
}

/* ---------- view: 추천/반대 ---------- */
.post_vote {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}
.btn_vote {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.5rem;
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    min-width: 160px;
    justify-content: center;
}
.btn_vote em { font-style: normal; font-weight: 700; }
.btn_vote .material-symbols-outlined { font-size: 1.1rem; }
.btn_vote:hover:not(:disabled).up { border-color: var(--main-color-dark); color: var(--main-color-dark); }
.btn_vote:hover:not(:disabled).down { border-color: var(--red); color: var(--red);}
.btn_vote.up.on   { background: var(--main-color-dark); border-color: var(--main-color-dark); color: #fff; }
.btn_vote.down.on { background: var(--red); border-color: var(--red); color: #fff; }
.btn_vote.up.on:hover,
.btn_vote.down.on:hover {color: var(--white);}
.btn_vote:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- view: 액션 바 (이전/다음/목록 + 답글/수정/삭제/신고) ---------- */
.post_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.post_nav .nav_left,
.post_nav .nav_right {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.post_nav .btn_st1.btn.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
.post_nav .btn_st1.btn.delete {
    background: #fff;
    color: #e03b3b;
    border: 1px solid #e03b3b;
}
.post_nav .btn_st1.btn.delete:hover { background: #e03b3b; color: #fff; }
.post_nav .btn_st1.btn.report {
    background: #fff;
    color: #888;
    border: 1px solid #ddd;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.post_nav .btn_st1.btn.report .material-symbols-outlined { font-size: 1rem; }
.post_nav .btn_st1.btn.report:hover { background: #f1f3f5; color: #333; }

/* 모바일 — 두 그룹 세로로 쌓고, 버튼 2열 균등폭(홀수 남으면 꽉 채움) */
@media screen and (max-width: 600px) {
    .post_nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .post_nav .nav_left,
    .post_nav .nav_right {
        width: 100%;
        gap: 0.4rem;
    }
    .post_nav .nav_left > .btn,
    .post_nav .nav_right > .btn {
        flex: 1 1 calc(50% - 0.2rem);
        min-width: 0;
    }
}

/* ---------- view: 댓글 ---------- */
.post_replies {
    margin-top: 3rem;
    padding-top: 2rem;
}
.post_replies h3 {
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
    color: #333;
}
.post_replies h3 span { color: #1a3b8e; margin-left: 0.3rem; }
.reply_list { list-style: none; padding: 0; margin: 0; }
.reply_item {
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.reply_item:last-child { border-bottom: none; }
.reply_meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
}
.reply_meta .writer { font-weight: 600; color: #222; }
.reply_meta .date   { color: #999; font-size: .8rem;}
.reply_content { color: #444; line-height: 1.6; }
.reply_empty   { color: #999; text-align: center; padding: 2rem 0; }
.reply_actions {
    margin-top: .7rem;
    display: flex;
    gap: 0.2rem;
}
/* 신고/삭제 버튼은 공통 .btn.btn_s.btn_text (common.css) 사용 — 별도 스타일 없음 */

/* ---------- view: 댓글 작성 폼 (#replyForm) — 카드형 ---------- */
.reply_form {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    padding: 1.5rem;
    background: #fafbfc;
    border: 1px solid #e5e8ec;
    border-radius: 10px;
}
.reply_form_title {
    font-size: 1rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #e5e8ec;
}
.reply_form .guest_inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.reply_form .guest_inputs .guest_label {
    flex: 1 1 100%;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c7075;
    margin-bottom: 0.1rem;
}
.reply_form .guest_inputs input {
    width: auto;
    flex: 0 1 180px;
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
}
.reply_form input,
.reply_form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d4d9e0;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-family: inherit;
    font-size: 0.93rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reply_form input::placeholder,
.reply_form textarea::placeholder { color: #aab0b8; }
.reply_form input:focus,
.reply_form textarea:focus {
    outline: none;
    border-color: var(--main-color, #4f7bff);
    box-shadow: 0 0 0 3px rgba(79, 123, 255, 0.15);
}
.reply_form textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
    margin-bottom: 0.9rem;
}
/* 등록 버튼 — 우측 정렬 */
.reply_form > button[type="submit"] {
    align-self: flex-end;
    min-width: 110px;
}
.reply_disabled {
    margin-top: 1.5rem;
    color: #888;
    text-align: center;
    font-size: 0.9rem;
}

/* ---------- 모달 공통 ---------- */
.bbs_modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.bbs_modal .modal_inner {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.bbs_modal h3 { margin: 0 0 1rem; color: #222; font-weight: 500;}
.bbs_modal p  { color: #666; margin: 0 0 1rem; }
.bbs_modal input[type="password"],
.bbs_modal select,
.bbs_modal textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 0.95rem;
    box-sizing: border-box;
    font-family: inherit;
    margin-bottom: 0.6rem;
}
.bbs_modal textarea { resize: vertical; min-height: 80px; }
/* select 화살표는 common.css 전역(select) 에서 공통 처리 */
.bbs_modal .modal_actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
}
.bbs_modal .btn_cancel,
.bbs_modal .btn_save {
    padding: 0.6rem 1.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: inherit;
    border: 1px solid;
}
.bbs_modal .btn_cancel { background: #fff;     color: #555; border-color: #ddd; }
.bbs_modal .btn_save   { background: #1a3b8e;  color: #fff; border-color: #1a3b8e; }
.bbs_modal .btn_cancel:hover { background: #f5f5f5; }
.bbs_modal .btn_save:hover   { background: #14306f; border-color: #14306f; }

/* ---------- 반응형 ---------- */
@media (max-width: 768px) {
    .post_nav { flex-direction: column; align-items: stretch; }
    .post_nav .nav_left,
    .post_nav .nav_right { justify-content: center; }
    .btn_vote { min-width: 120px; padding: 0.6rem 1rem; }
    .reply_form { padding: 1.2rem; }
    .reply_form .guest_inputs input { flex: 1 1 100%; }
    .reply_form > button[type="submit"] { align-self: stretch; width: 100%; }
}

/* ===== 별점 (star_use_yn=Y) ===== */
/* 댓글 폼 별점 입력 */
.reply_star_input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    margin: 0 0 1rem;
    align-self: flex-start;
}
.reply_star_input .label {
    flex: 1 1 100%;              /* 별 위에 타이틀로 올림 (비회원 작성 라벨과 동일) */
    font-size: 0.8rem;
    color: #6c7075;
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.reply_star_input .btn_star {
    background: none; border: 0; padding: 0.05rem; cursor: pointer;
    color: #dcdfe4; font-size: 1.85rem; line-height: 1;
    transition: color 0.12s ease, transform 0.12s ease;
}
.reply_star_input .btn_star:hover { transform: scale(1.12); }
/* Material Symbols: 채운 별은 FILL 1(꽉찬), 빈 별은 기본 FILL 0(테두리) */
.reply_star_input .btn_star:hover,
.reply_star_input .btn_star.on { color: #fbbf24; font-variation-settings: 'FILL' 1; }
/* 댓글 표시 별점 */
.reply_subline { display:flex; align-items:center; gap:0.6rem; margin:0.15rem 0 0.5rem; }
.reply_subline .date { color:#999; font-size:.8rem; }
.reply_item .reply_star { display:inline-flex; align-items:center; gap:0.05rem; }
.reply_item .reply_star .star { font-size:1.05rem; line-height:1; }
.reply_item .reply_star .star.on  { color:#fbbf24; font-variation-settings: 'FILL' 1; }
.reply_item .reply_star .star.off { color:#cccccc; }


/********** board_list — 카드형 목록 (BBSS001) **********/
.board_list_wrap { width: 100%; }
.board_list_wrap a { text-decoration: none; color: inherit; }

.board_list_wrap .board_info {
  padding: 15px 0;
  font-size: 0.95rem;
  color: #333;
}
.board_list_wrap .board_info strong { font-weight: 600; }
.board_list_wrap .board_info .divider { margin: 0 10px; color: #ccc; }

.board_list_wrap .board_list { border-top: 1px solid #333; }
.board_list_wrap .board_list li { border-bottom: 1px solid #ddd; position: relative; }
.board_list_wrap .board_list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 20px;
  transition: background-color 0.2s ease;
}
.board_list_wrap .board_list > li.empty,
.gallery-list .empty { margin: 0 !important; padding: 30px; }
.board_list_wrap .board_list > li:hover { background-color: #f9f9f9; }

.board_list_wrap .board_content {
  flex: 1;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
}
.board_list_wrap .board_content > div { display: inline-flex; }
.board_list_wrap .board_content .board_date { font-size: 0.9rem; }

.board_list_wrap .board_title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
  line-height: 1.4;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
/* 제목 텍스트(.t)에만 밑줄 — 배지/분류칩/답글수는 제외 */
.board_list_wrap .board_title .t { text-decoration: none; }
.board_list_wrap .board_list li a:hover .board_title .t { text-decoration: underline; }

/* 제목 앞 배지 — 공지/분류/비밀 */
.board_list_wrap .board_title .badge_notice { color: #888a9e; font-size: 1.3rem; line-height: 1; vertical-align: middle; display: inline-block; transform: rotate(40deg); }
.cate { display: inline-block; font-size: 0.8rem; font-weight: 500; color: #4b6cff; background: #eef1ff; padding: 0.12rem 0.5rem; border-radius: 4px; }   /* 공통 — 목록·상세 공용 분류 배지 */
.board_list_wrap .board_title .lock { font-size: 1.3rem; color: #888a9e; vertical-align: middle; }
.board_list_wrap .board_title .reply_cnt { color: #888a9e; font-weight: 500; font-size: 1rem; }

.board_list_wrap .board_meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: #888;
  flex-wrap: wrap;
}
.board_list_wrap .board_meta p { position: relative; }
.board_list_wrap .board_meta p::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 12px;
  background-color: #e2e2e2;
  right: -0.5rem;
  top: 5px;
}
.board_list_wrap .board_meta p:last-child::before { display: none; }

.board_list_wrap .dday {
  flex-shrink: 0;
  min-width: 50px;
  height: 30px;
  padding: 0 12px;
  background-color: #1a3a6d;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.board_list_wrap .dday.end { background-color: #888; }  /* 접수마감 상태 */

.ic_right {
  width: 46px;
  height: 46px;
  border-radius: 100px;
  color: var(--white);
  background-color: #8d9bae;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 첨부파일 표시 */
.board_list_wrap .list_right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  z-index: 1;
}
.board_list_wrap .ic_file { display: inline-flex; gap: .8rem; margin-right: 1rem; align-items: center; }
.board_list_wrap .ic_file .file { cursor: pointer; display: inline-flex; align-items: center; }
.board_list_wrap .ic_file .file > img { width: 29px; height: auto; }
.board_list_wrap .ic_file .file .material-symbols-outlined { font-size: 1.5rem; color: #8d9bae; }

/* 반응형 */
@media screen and (max-width: 900px) {
  /* 모바일 — 한 줄(제목+메타) 세로 적층 */
  .board_list_wrap .board_list > li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 14px 15px;
  }
  /* 우상단 첨부 아이콘과 겹치지 않게 우측 여백 확보 */
  .board_list_wrap .board_content { padding-right: 2.5rem; width: 100%; }
  /* 제목: 배지·자물쇠·제목은 한 줄 유지(넘치면 줄바꿈) — 세로로 쪼개지지 않게 */
  .board_list_wrap .board_title { font-size: 1rem; flex-wrap: wrap; }
  /* 메타(작성일·작성자·조회)는 세로로, 구분선 제거 */
  .board_list_wrap .board_meta { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .board_list_wrap .board_meta p::before { display: none; }
  /* 첨부 아이콘 — 세로 중앙 대신 카드 우상단에 고정 */
  .board_list_wrap .list_right { top: 14px; transform: none; }
  .board_list_wrap .ic_file { margin-right: 0; }
}