/* consultation.css */

/* 상담 카드 스타일 */
.consultation-card {
  display: flex;
  align-items: flex-start;
  padding: 32px;
  border-radius: 12px;
  margin-bottom: 80px; /* 16px에서 32px로 증가 */
}

.consultation-card:last-child {
  margin-bottom: 0; /* 마지막 카드 여백 제거 */
}

.consultation-card.online {
  background-color: #f0f2ff;
}

.consultation-card.email {
  background-color: #fff4e6;
}

.consultation-card.visit {
  background-color: #fff0f0;
}

.card-icon {
  width: 120px;
  height: 120px;
  margin-right: 24px;
  flex-shrink: 0;
}

.card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-content h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 12px 0;
  color: #333;
}

.card-content p {
  margin: 0 0 16px 0;
  color: #444;
  line-height: 1.6;
}

.more-link {
  color: #2b5bcc;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.email-address {
  color: #2b5bcc;
  font-weight: 500;
  font-size: 16px;
}

/* FAQ 섹션 스타일 */
.faq-section {
  margin-bottom: 40px; /* 여백 줄임 */
  margin-top: 20px; /* 여백 줄임 */
}

.section-title {
  color: #4b7bec;
  font-size: 18px;
  margin-bottom: 20px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question,
.answer {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 4px;
  align-items: flex-start;
}

.question {
  background-color: #f8f9ff;
}

.answer {
  background-color: white;
}

.q-mark {
  color: #4b7bec;
  font-weight: bold;
}

.a-mark {
  color: #666;
  font-weight: bold;
}

.question p,
.answer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.answer p {
  color: #666;
}

/* 게시판 섹션 스타일 */
.board-section {
  margin-bottom: 0; /* 하단 여백 제거 */
  margin-top: 150px;
}

.board-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
}

.board-search {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  gap: 10px;
}

.search-box input {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 300px;
}

.search-box button {
  padding: 8px 20px;
  background: #666;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 게시판 테이블 스타일 */
.board-table {
  margin-bottom: 20px; /* 여백 줄임 */
}

.board-table table {
  width: 100%;
  border-top: 2px solid #333;
}

.board-table tbody tr {
  cursor: pointer;
}

.board-table th {
  background: #f8f9ff;
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.board-table td {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.board-table td:nth-child(2) {
  text-align: left;
}

.board-table .col-num {
  width: 10%;
}
.board-table .col-date {
  width: 15%;
}
.board-table .col-state {
  width: 10%;
}
.board-table .col-hit {
  width: 10%;
}

@media screen and (max-width: 768px) {
  .board-table th {
    padding: 10px;
    white-space: nowrap;
  }
  .board-table .col-date {
    display: none;
  }

  .board-table .col-state {
    display: none;
  }

  .board-table .col-hit {
    display: none;
  }
}

/* 페이지네이션 스타일 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 40px;
}

.pages {
  display: flex;
  gap: 5px;
}

.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  text-decoration: none;
  color: #666;
}

.pagination .prev,
.pagination .next {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.pagination .prev {
  background-image: url("../img/main/footer/next_arrow.png");
  transform: rotate(180deg); /* prev는 왼쪽을 향하도록 회전 */
}

.pagination .next {
  background-image: url("../img/main/footer/next_arrow.png");
}

.pagination a.active {
  color: #4169e1;
  font-weight: bold;
}

/* 게시판 버튼 영역 */
.board-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
  margin-bottom: 0; /* 하단 여백 제거 */
}

.write-btn {
  padding: 8px 24px;
  background: #4b7bec;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}

/* 검색 영역 스타일 */
.board-header {
  display: flex;
  justify-content: flex-end; /* 오른쪽 정렬 */
  margin-bottom: 20px;
}

.search-area {
  display: flex;
  gap: 10px;
  width: 500px; /* 너비 증가 */
}

.search-select {
  min-width: 120px; /* 셀렉트 박스 너비 증가 */
  padding: 12px 15px; /* 패딩 증가 */
  border: 1px solid #e9e9e9;
  border-radius: 15px; /* border-radius 15px로 설정 */
  font-size: 14px;
  color: #808080;
  background-color: #e9e9e9;
}

.search-input-wrapper {
  display: flex;
  flex-grow: 1;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 12px 40px 12px 15px; /* 패딩 증가 */
  border: 1px solid #e9e9e9;
  border-radius: 15px; /* border-radius 15px로 설정 */
  font-size: 14px;
  color: #808080;
  background-color: #e9e9e9;
}

.search-input::placeholder {
  color: #808080;
}

.search-button {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/search-icon.png") no-repeat center;
  width: 24px;
  height: 24px;
  border: none;
  cursor: pointer;
  opacity: 1; /* 아이콘 색상 조정을 위한 투명도 */
}

/* 반응형 스타일 */
@media screen and (max-width: 768px) {
  .consultation-card {
    flex-direction: column;
    padding: 24px;
  }

  .card-icon {
    margin: 0 0 16px 0;
  }

  .search-input {
    width: 100%;
  }

  .board-search {
    flex-direction: column;
  }
}

/* 마지막 섹션의 하단 여백 제어 */
.tab-content > *:last-child {
  margin-bottom: 0;
}