@charset "UTF-8";

/* 온라인 질문 답변 */

/* Q&A 본문을 감싸는 상위 래퍼 */
.article-wrap{
	padding: 0 !important;
}

/* =========================
   Q&A 기준 박스 (폭/선 기준 핵심)
========================= */
.qna-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 1280px;
}

/* =========================
   Q&A 헤더 (선 기준)
========================= */
.qna-table-head {
    width: 100%;
    box-sizing: border-box;
    border-top: 2px solid #6b7388;
    border-bottom: 2px solid #6b7388;
}

/* 헤더 내부 한 줄 (답변상태 + 제목) */
.qna-table-row {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 700;
    height: 20px;
}

/* 헤더 내부 텍스트 */
.qna-table-row div{
	text-align: left;
	color: #1e2f7b;
}

/* 헤더의 답변상태 영역 */
.qna-head-state {
    width: 120px;
}

/* 헤더의 제목 영역 */
.qna-head-title {
    flex: 1;
    margin-left: 10px;
    text-align: center !important;
}

/* Q&A 카드 목록 전체 */
.qna-list {
    width: 100%;
}

/* 질문 1건에 해당하는 카드 */
.qna-card {
    border-bottom: 1px solid #ddd;   /* 카드 구분선 */
}

/* 카드 상단 정보 영역 */
.qna-header {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    font-size: 15px;
    cursor: pointer;
}

 /* 질문의 답변 상태 표시 */
.qna-status {
    width: 120px;
    text-align: left;
    font-size: 14px;
    color: #222;
    height: 100%;       
    line-height: 1;
}

/* 질문 제목 */
.qna-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    height: 100%;        
    line-height: 1;
    text-align: left;
    
}

/* 작성자·날짜 등 메타 정보 */
.qna-meta {
    margin-left: 20px;
    margin-top: 6px;
    font-size: 13px;
    color: #777;
    text-align: left;
    padding: 0px;
}

/* 질문 내용 영역 */
.qna-content {
    margin: 0 0 10px;
    padding: 0px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}

 /* 질문 본문 텍스트 */
.qna-content-text {
    padding-left: 20px;
}

/* 답변 전체 영역 */
.qna-reply {
    margin: 0 0 20px;
    padding: 0;
    background: #f6fbff;
    border-radius: 8px;
    text-align: left;
    margin-bottom: 20px;
}

/* 답변 작성자/구분 정보 */
.qna-reply-meta {
    font-size: 13px;
    font-weight: 700;
    padding-left: 20px;
    padding-top: 20px;
}

 /* 답변 내용 텍스트 */
.qna-reply-content {
    font-size: 14px;
    line-height: 1.7;
    padding-left: 20px;
}

/* =========================
   닫기 버튼 (이미지 + 텍스트)
========================= */
.qna-close {
    display: flex;                 
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: #1e2f7b;
    cursor: pointer;
    padding-bottom: 10px;
}

/* 닫기 버튼 아이콘 */
.qna-close img {
    width: 30px;
    height: 30px;
    display: block;
}

/* 글쓰기 버튼 영역 */
.qna-write-wrap {
    display: flex;
    justify-content: flex-end;   
    margin-bottom: 10px;         
}

/* 글쓰기 버튼 */
.btn-write {
    padding: 10px 18px;
    background: #3B82F6;
    color: #fff !important;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 20px;
}

/* 수정/삭제 버튼 영역 */
.qna-btn-box {
    display: flex;
    justify-content: flex-end;   /* 오른쪽 끝 */
    gap: 12px;
    margin-top: 20px;
    padding-right: 20px;
}

/* 공통 버튼 */
.qna-btn-box button {
    min-width: 80px;             
    padding: 9px 20px;           
    font-size: 14px;             
    font-weight: 700;
    border-radius: 8px;
    background: #f8fafc;         
    border: 1px solid #cbd5e1;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* 수정 버튼 */
.qna-btn-box button.qna-modify {
    border-color: #93c5fd;
    color: #1e40af;
}

.qna-btn-box button.qna-modify:hover {
    background: #eff6ff;
    border-color: #3b82f6;
}

/* 삭제 버튼 */
.qna-btn-box button.qna-delete {
    border-color: #fca5a5;
    color: #991b1b;
}

.qna-btn-box button.qna-delete:hover {
    background: #fff1f2;
    border-color: #dc2626;
}

/* 비밀번호 확인 박스 */
.check-pw-box {
    margin-top: 16px;
    padding: 16px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 18px;                
    flex-wrap: wrap;
}

/* 비밀번호 확인 박스 앞쪽 가상 요소 */
.check-pw-box::before {
    content: none;
    font-weight: 700;
    color: #1e293b;
    margin-right: 12px;      
}

/* 비밀번호 확인 박스 내 기존 텍스트 영역 */
.check-pw-box > div,
.check-pw-box > :not(.qna-pw):not(.confirm-pw) {
    display: none;
}

/* 비밀번호 입력 필드 */
.check-pw-box .qna-pw {
    width: 220px;
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    margin: 0 12px;
}

/* 비밀번호 확인 버튼 */
.check-pw-box .confirm-pw {
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #93c5fd;
    background: #eff6ff;
    color: #1e40af;
    cursor: pointer;
}

/* Q&A 폼 전체를 감싸는 외곽 박스 */
.form-wrapper2 {
    width: 65%;
    max-width: 900px;   /* 필요하면 1200px까지 가능 */
    margin: 40px auto;
    padding: 40px 30px;
    border: 1px solid #d6d6d6;
    border-radius: 15px;
    background: #fff;
    box-sizing: border-box;
}

/* Q&A 하단 영역 (페이징 + 버튼) */
.qna-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    margin-top: 30px;
    margin-bottom: 80px;   
    clear: both;       
}

/* 하단 영역 내 페이징 영역 */
.qna-bottom-bar .pagination {
    flex: 1;
    text-align: center;
}

/* 하단 영역 내 글쓰기 버튼 영역 */
.qna-write-wrap {
    flex-shrink: 0;
}

/* =========================
   Q&A 질문 수정 폼
========================= */
.qna-modify-form {
	margin-left: 20px;
    margin-top: 6px;
    font-size: 13px;
    color: #777;
    text-align: left;
    padding: 0px;
}

/* 수정 제목 */
.modify-text {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 10px;
}

/* 수정 textarea */
.modify-content {
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
}

/* textarea focus */
.modify-content:focus {
    border-color: #2563eb;
    background: #fff;
}

/* 공통 Q&A 버튼 */
.qna-btn-box button {
    min-width: 80px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* 수정하기 버튼 */
.qna-btn-box button.modify-confirm {
    border-color: #93c5fd;
    color: #1e40af;
}

/* hover (선택) */
.qna-btn-box button.modify-confirm:hover {
    background: #eff6ff;
    border-color: #60a5fa;
}


/* 버튼 hover */
.qna-modify-form .modify-confirm:hover {
    background: #1d4ed8;
}

/* float 정리 */
.qna-modify-form::after {
    content: "";
    display: block;
    clear: both;
}

#qna_title {
    width: 100%;          
    box-sizing: border-box;
}

#qna_secret {
	width: 230px;              
    box-sizing: border-box;
}

/* 비밀번호 줄만 가로 정렬 */
.form-group.inline {
    display: flex;
    align-items: center;   /* 세로 가운데 */
    gap: 12px;
}

/* 비밀번호 라벨 폭 고정 */
.form-group.inline .password {
    min-width: 90px;       /* 필요시 80~120px */
    font-weight: 600;
}

/* 비밀번호 input 크기 */
#qna_secret {
    width: 260px;          /* 원하는 폭 */
    height: 36px;
    padding: 6px 10px;
    box-sizing: border-box;
}

@media all and (max-width: 800px) {

  /* =========================
     Q&A 전체 래퍼
  ========================= */
  .qna-wrap {
    max-width: 100%;
    padding: 0 16px;
  }

  /* =========================
     Q&A 헤더
  ========================= */
  .qna-table-row {
    padding: 14px 12px;
    font-size: 14px;
  }

  .qna-head-state {
    width: 70px;          /* 답변상태 축소 */
    font-size: 13px;
  }

  .qna-head-title {
    margin-left: 6px;
    font-size: 14px;
  }

  /* =========================
     Q&A 카드
  ========================= */
  .qna-header {
    padding: 14px 12px;
    font-size: 14px;
  }

  .qna-status {
    width: 70px;
    font-size: 12px;
  }

  .qna-title {
    font-size: 14px;
  }

  .qna-meta {
    margin-left: 12px;
    margin-top: 6px;
    font-size: 12px;
  }

  .qna-content-text,
  .qna-reply-meta,
  .qna-reply-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .qna-content {
    font-size: 13px;
    line-height: 1.6;
  }

  /* =========================
     답변 영역
  ========================= */
  .qna-reply {
    margin: 0 0 16px;
    border-radius: 6px;
  }

  .qna-reply-meta {
    padding-top: 16px;
    font-size: 12px;
  }

  .qna-reply-content {
    font-size: 13px;
  }

  /* =========================
     닫기 버튼
  ========================= */
  .qna-close {
    font-size: 15px;
    gap: 6px;
  }

  .qna-close img {
    width: 26px;
    height: 26px;
  }

  /* =========================
     글쓰기 / 수정 / 삭제 버튼
  ========================= */
  .qna-write-wrap {
    justify-content: center;
    margin-top: 20px;
  }

  .btn-write {
    width: 50%;
    text-align: center;
    font-size: 14px;
    padding: 12px 0;
  }

  .qna-btn-box {
    justify-content: center;
    padding-right: 0;
    gap: 10px;
  }

  .qna-btn-box button {
    min-width: 70px;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* 비밀번호 확인 박스 */
  .check-pw-box {
    display: flex;
    flex-direction: row;        /* 🔥 세로 → 가로 */
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  /* 비밀번호 input */
  .check-pw-box .qna-pw {
    flex: 1;                    /* 🔥 입력칸이 남은 영역 차지 */
    width: auto;                /* 기존 100% 무력화 */
    min-width: 0;
    height: 38px;
    margin: 0 12px;
  }

  /* 확인 버튼 */
  .check-pw-box .confirm-pw {
    flex-shrink: 0;             /* 🔥 버튼 줄어들지 않게 */
    width: 72px;                /* 버튼 고정 폭 */
    height: 38px;
    padding: 0;
    font-size: 14px;
  }

  /* =========================
     Q&A 작성/수정 폼
  ========================= */
  .form-wrapper2 {
    width: 90% !important;
    max-width: 100%;
    margin: 20px auto;
    padding: 20px 16px;
    border-radius: 10px;
  }

  .modify-content {
    min-height: 100px;
    font-size: 13px;
  }

  /* 비밀번호 입력 줄 */
  .form-group.inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .form-group.inline .password {
    min-width: auto;
    font-size: 13px;
  }

  #qna_secret {
    width: 100%;
    height: 36px;
  }

  /* =========================
     하단 바 (페이징 + 버튼)
  ========================= */
  .qna-bottom-bar {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
  }

  .qna-bottom-bar .pagination {
    order: 2;
  }

  .qna-bottom-bar .qna-write-wrap {
    order: 1;
  }
}