/* 키워드 상위노출 분석 결과 전용 스타일 (autohtml-project 40 기반) */

/* 메인 컨테이너 */
.keyword-exposure-result-container {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

/* 헤더 섹션 */
.keyword-exposure-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.keyword-exposure-title {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600; /* font-semibold */
  color: #16a34a; /* text-green-600 */
  margin: 0;
}

/* 액션 버튼 그룹 - 원래 디자인 유지 */
.keyword-exposure-actions {
  display: flex;
  gap: 8px;
}

/* 키워드 요약 테이블 - autohtml-project (41) 디자인 */
.keyword-summary-wrapper {
  display: flex;
  margin-bottom: 40px;
  gap: 40px;
}

/* 왼쪽 섹션 - 키워드 */
.keyword-summary-left {
  flex: 0 0 42%;
}

/* 오른쪽 섹션 - PC, 모바일, 월 검색량 */
.keyword-summary-right {
  flex: 1;
}

.keyword-summary-table {
  width: 100%;
  border-collapse: collapse;
}

.keyword-summary-table thead th {
  background: #f8f9fa;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  padding: 12px 16px;
  font-size: 0.875rem; /* text-sm = 14px */
  font-weight: 500; /* font-medium */
  color: #374151; /* text-gray-700 */
  text-align: center;
  white-space: nowrap;
}

.keyword-summary-table tbody td {
  background: #ffffff;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  padding: 12px 16px;
  font-size: 0.875rem; /* text-sm = 14px */
  color: #374151; /* text-gray-700 */
  text-align: center;
  white-space: nowrap;
}

/* 왼쪽 테이블 - 키워드 굵게 */
.keyword-summary-left .keyword-summary-table tbody td {
  font-weight: 500;
}

/* 분석 결과 테이블 - autohtml-project (41) 디자인 */
.keyword-analysis-table {
  width: 100%;
  border-collapse: collapse;
}

.keyword-analysis-table thead {
  background: #f8f9fa;
}

.keyword-analysis-table thead th {
  background: #f8f9fa;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  padding: 12px 16px;
  font-size: 0.875rem; /* text-sm = 14px */
  font-weight: 500; /* font-medium */
  color: #374151; /* text-gray-700 */
  text-align: center;
  white-space: nowrap;
}

.keyword-analysis-table tbody tr {
  background: #ffffff;
  border-bottom: 1px solid #eaeaea;
}

.keyword-analysis-table tbody tr:last-child {
  border-bottom: 1px solid #eaeaea;
}

.keyword-analysis-table tbody td {
  padding: 12px 16px;
  font-size: 0.875rem; /* text-sm = 14px */
  color: #374151; /* text-gray-700 */
  vertical-align: middle;
}

/* 순위 */
.keyword-analysis-table .rank-cell {
  text-align: center;
  font-family: "Pretendard-Regular", sans-serif;
  font-weight: 400;
}

/* 경쟁 가능 - Green Text "O" */
.keyword-analysis-table .competition-cell {
  text-align: center;
}

.competition-badge {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: #1ea152;
}

/* 포스팅 제목 */
.keyword-analysis-table .title-cell {
  text-align: left;
  white-space: normal; /* 제목은 줄바꿈 허용 */
}

.keyword-analysis-table .title-cell a {
  color: rgba(0, 153, 226, 1); /* text-blue-600 */
  text-decoration: none;
}

.keyword-analysis-table .title-cell a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* 블로그 지수 */
.keyword-analysis-table .blog-index-cell {
  text-align: center;
  white-space: nowrap;
}

.blog-index-badge {
  font-size: 0.875rem; /* text-sm = 14px */
  font-weight: 600;
}

/* 준1~7: 하늘색 */
.blog-index-sub-1,
.blog-index-sub-2,
.blog-index-sub-3,
.blog-index-sub-4,
.blog-index-sub-5,
.blog-index-sub-6,
.blog-index-sub-7 {
  color: #69b9df;
}

/* 최2, 최3: 빨간색 */
.blog-index-optimal-2,
.blog-index-optimal-3 {
  color: #cf1d1c;
}

/* 최1: 기존 스타일 유지 (빨간색) */
.blog-index-optimal-1 {
  color: #cf1d1c;
}

.blog-index-semi-optimal {
  color: #69b9df;
}

/* 작성일 */
.keyword-analysis-table .date-cell {
  text-align: center;
  white-space: nowrap;
}

/* 블로그 타이틀 */
.keyword-analysis-table .blog-title-cell {
  text-align: center;
}

/* 데이터 없음 메시지 */
.keyword-no-data {
  text-align: center;
  padding: 48px 24px;
  color: #9ca3af;
  font-size: 15px;
}

/* 반응형 */
@media (max-width: 1024px) {
  .keyword-exposure-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .keyword-exposure-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .keyword-exposure-btn {
    flex: 1;
    justify-content: center;
    min-width: 100px;
  }
}