/* 강좌 상세 페이지 - 완벽 재현 스타일 */

/* ========================================
   GNB 보호 스타일 - 전역 스타일로부터 GNB 보호
   2025-12-08 추가
   ======================================== */

/* GNB 검색창 보호 - 그라데이션 테두리 유지 */
.gnb input[type="text"],
.top_menu_list input[type="text"],
#gnb input[type="text"],
.menu_area input[type="text"],
.top_main_search input[type="text"],
.search_wrap input[type="text"],
input.search_input {
  border: 2px solid transparent !important;
  background-image: linear-gradient(#fff, #fff),
    linear-gradient(45deg, #00d096, #0034e2) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: none !important;
}

.gnb input[type="text"]:focus,
.top_menu_list input[type="text"]:focus,
#gnb input[type="text"]:focus,
.menu_area input[type="text"]:focus,
.top_main_search input[type="text"]:focus,
.search_wrap input[type="text"]:focus,
input.search_input:focus {
  border-color: rgba(229, 103, 23, 0.8) !important;
  box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset,
    0 0 3px rgba(229, 103, 23, 0.6) !important;
  background-image: none !important;
}

/* GNB 버튼 보호 - 검정 테두리/박스쉐도우 제거 */
.gnb button,
.all_menu_btn,
.open_all_menu,
.top_menu_list button,
#gnb button,
.menu_area button,
button.all_menu_btn {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* X 버튼 검정 박스 제거 */
.close_btn,
.btn_close,
.all_menu_close,
button[class*="close"],
.gnb .close,
.menu_area .close {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  background-color: transparent !important;
}

/* 전체메뉴 박스 검정 테두리 제거 */
.all_menu_wrap,
.all_menu_box,
.menu_wrap,
.gnb_menu_wrap,
#all_menu {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  outline: none !important;
}

/* ======================================== */

.course-detail-wrapper * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 전체 래퍼 */
.course-detail-wrapper {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

/* 페이지 헤더 (제목 + 목록 버튼) */
.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  padding-top: 30px;
  border-bottom: 2px solid #e5e7eb;
}

/* 페이지 상단 제목 */
.course-page-title {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  text-align: left;
}

/* 목록 버튼 */
.btn-list {
  padding: 10px 45px;
  background-color: #003885;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-list:hover {
  background-color: #165cbe;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* 상단 카테고리 탭 영역 - 오른쪽 정렬 */
.course-category-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 15px;
  justify-content: flex-end;
}

.category-tab {
  padding: 10px 22px;
  color: white;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.category-tab:first-child {
  border-radius: 4px 0 0 4px;
  background-color: #3b82f6;
}

.category-tab:nth-child(2) {
  background-color: #a855f7;
}

.category-tab:nth-child(3) {
  background-color: #22c55e;
}

.category-tab:last-child {
  border-radius: 0 4px 4px 0;
  background-color: #3b82f6;
}

.category-tab:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* 메인 2열 그리드 컨테이너 */
.course-main-container {
  display: grid !important;
  grid-template-columns: 630px 1fr !important;
  gap: 10px !important;
  margin-bottom: 25px !important;
}

/* 왼쪽: 카드 (배경 제거, 이미지 중심) */
.course-main-card {
  background: none;
  border-radius: 0;
  padding: 0;
  position: relative;
  overflow: visible;
  box-shadow: none;
}

/* 썸네일 이미지 */
.course-thumbnail {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  display: block;
}

/* 버튼 그룹 */
.course-button-group {
  display: flex;
  gap: 10px;
}

.course-btn {
  flex: 1;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.course-btn-preview {
  background-color: #a855f7;
  color: white;
}

.course-btn-preview:hover {
  background-color: #9333ea;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.4);
}

/* 추천 버튼 */
.course-btn-recommend {
  background-color: #22c55e;
  color: white;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.course-btn-recommend:hover {
  background-color: #16a34a;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.course-btn-recommend.active {
  background-color: #3b82f6;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
  animation: thumbsUp 0.5s ease-in-out;
}

.recommend-icon {
  font-size: 16px;
  line-height: 1;
  transition: all 0.3s ease;
}

.course-btn-recommend:hover .recommend-icon {
  transform: scale(1.15);
}

.recommend-count {
  font-size: 14px;
  font-weight: 600;
  margin-left: 2px;
}

.course-btn-favorite {
  background-color: #ec4899;
  color: white;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.course-btn-favorite:hover {
  background-color: #d946a0;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
}

.course-btn-favorite.active {
  background-color: #3b82f6;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
  animation: thumbsUp 0.5s ease-in-out;
}

.course-btn-favorite.active:hover {
  background-color: #2563eb;
}

/* 관심과정 아이콘 */
.favorite-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

.favorite-icon::before {
  content: "♥";
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
  line-height: 1;
  transition: all 0.3s ease;
}

.course-btn-favorite:hover .favorite-icon::before {
  transform: scale(1.15);
}

.course-btn-favorite.active .favorite-icon::before {
  content: "👍";
  font-size: 18px;
  transform: scale(1.1);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* 추천 카운트 */
.recommend-count {
  font-size: 14px;
  font-weight: 600;
  margin-left: 3px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
  display: inline-block;
}

.course-btn-favorite.active .recommend-count {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 관심과정 물결 효과 */
.course-btn-favorite::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s, opacity 0.6s;
}

.course-btn-favorite.active::after {
  animation: ripple 0.6s ease-out;
}

.course-btn-preview::before {
  content: "▶";
  font-size: 11px;
}

/* .course-btn-favorite::before {
  content: "♥";
  font-size: 15px;
} */

/* 오른쪽: 정보 카드 */
.course-info-card {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 상단 배지들 */
.course-badges {
  display: flex;
  gap: 7px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.badge {
  padding: 6px 9px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: white;
}

.badge-company {
  background-color: #3b82f6;
}

.badge-worker {
  background-color: #a855f7;
}

.badge-normal {
  background-color: #22c55e;
}

.badge-mobile {
  background-color: #6b7280;
}

/* 교육유형 제목 */
.course-type-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 14px;
}

/* 정보 그리드 (2열) */
.course-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 0;
  margin-bottom: 5px;
  font-size: 14px;
}

.detail-row {
  display: contents;
}

.detail-label {
  color: #6b7280;
  font-weight: 500;
}

.detail-value {
  color: #1f2937;
  font-weight: 700;
}

/* 교육기간 섹션 */
.education-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}

.section-label {
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}

/* 교육기간 리스트 박스 */
.education-period-list {
  background: #f9fafb;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.9;
}

.period-item {
  margin-bottom: 10px;
}

.period-item:last-child {
  margin-bottom: 0;
}

.period-item label {
  cursor: pointer;
  display: block;
}

.period-type {
  font-weight: 700;
  color: #2563eb;
}

.period-deadline {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 3px;
  padding-left: 20px;
}

/* 지원금액 섹션 */
.support-section {
  margin-top: 14px;
}

.support-item {
  padding: 7px 0;
}

/* 가격 정보 */
.price-section {
  margin-top: 10px;
  padding-top: 1px;
  border-top: 1px solid #e5e7eb;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.price-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 600;
}

.price-value {
  font-size: 17px;
  color: #1f2937;
  font-weight: 700;
}

.price-value.highlight {
  color: #2563eb;
  font-size: 19px;
}

/* 유의사항 박스 */
.notice-section {
  background: #fef3c7;
  padding: 13px 16px;
  border-radius: 8px;
  margin: 14px 0;
  border-left: 4px solid #f59e0b;
}

.notice-section ul {
  margin: 0;
  padding-left: 18px;
}

.notice-section li {
  font-size: 12px;
  color: #92400e;
  line-height: 1.8;
  margin-bottom: 5px;
}

/* 수강신청 버튼 */
.course-btn-enroll {
  width: 100%;
  padding: 12px;
  background-color: #60a5fa;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.25s ease;
}

.course-btn-enroll:hover {
  background-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(96, 165, 250, 0.45);
}

/* 탭 메뉴 */
.course-tabs {
  list-style: none;
  display: flex;
  background: transparent;
  margin-top: 20px;
  margin-bottom: 0;
  gap: 0;
}

.course-tab-link {
  flex: 1;
  padding: 10px 20px;
  text-align: center;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.course-tab-link:first-child {
  border-radius: 10px 0 0 0;
}

.course-tab-link:last-child {
  border-radius: 0 10px 0 0;
}

.course-tab-link.current {
  background: #3b82f6;
  color: white;
}

.course-tab-link:hover:not(.current) {
  background: #d1d5db;
}

/* 탭 콘텐츠 */
.course-tab-content {
  display: none;
  background: white;
  padding: 32px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.course-tab-content.current {
  display: block;
}

/* 섹션 제목 */
.section-title {
  font-size: 21px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 3px solid #3b82f6;
}

/* 테이블 공통 */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
}

.info-table th {
  background: #f9fafb;
  padding: 15px 20px;
  text-align: center;
  font-weight: 700;
  color: #374151;
  border: 1px solid #e5e7eb;
  font-size: 14px;
}

.info-table td {
  padding: 15px 20px;
  border: 1px solid #e5e7eb;
  color: #1f2937;
  line-height: 1.8;
  font-size: 14px;
}

.info-table td.label {
  background: #f9fafb;
  font-weight: 700;
  text-align: center;
  width: 145px;
}

/* 강사 카드 */
.tutor-card {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #f9fafb;
  border-radius: 10px;
  margin-bottom: 14px;
}

.tutor-image {
  width: 105px;
  height: 105px;
  border-radius: 8px;
  object-fit: cover;
}

.tutor-info {
  flex: 1;
}

.tutor-name {
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 13px;
}

.tutor-details {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.8;
}

.tutor-details dt {
  font-weight: 700;
  color: #374151;
  margin-top: 9px;
}

.tutor-details dd {
  margin-left: 0;
  margin-bottom: 7px;
}

/* 강의목차 테이블 */
.lesson-table {
  width: 100%;
  border-collapse: collapse;
}

.lesson-table thead th {
  background: #3b82f6;
  color: white;
  padding: 15px;
  text-align: center;
  font-weight: 700;
  border: 1px solid #2563eb;
  font-size: 15px;
}

.lesson-table tbody td {
  padding: 13px 16px;
  border: 1px solid #e5e7eb;
  text-align: center;
  font-size: 14px;
}

.lesson-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

.lesson-table tbody tr:hover {
  background: #eff6ff;
}

/* 후기 테이블 */
.review-table {
  width: 100%;
  border-collapse: collapse;
}

.review-table thead th {
  background: #f9fafb;
  padding: 15px;
  text-align: center;
  font-weight: 700;
  color: #374151;
  border: 1px solid #e5e7eb;
  font-size: 15px;
}

.review-table tbody td {
  padding: 15px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
}

.review-table tbody td:first-child {
  text-align: center;
  font-weight: 700;
  background: #f9fafb;
  width: 115px;
}

.review-table tbody tr:hover {
  background: #f9fafb;
}

/* 반응형 */
@media (max-width: 1024px) {
  .course-main-container {
    grid-template-columns: 1fr;
  }

  .course-category-tabs {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .course-main-card {
    padding: 28px 22px;
  }

  .course-main-title {
    font-size: 21px;
  }

  .course-details-grid {
    grid-template-columns: 1fr;
  }

  .course-button-group {
    flex-direction: column;
  }

  .course-tabs {
    flex-direction: column;
  }
}

/* 애니메이션 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes thumbsUp {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.15) rotate(-5deg);
  }
  50% {
    transform: scale(1.05) rotate(0deg);
  }
  75% {
    transform: scale(1.12) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.course-main-card,
.course-info-card {
  animation: fadeInUp 0.6s ease-out;
}