/* ========================================
   1. 전체 요소 기본 설정
======================================== */

/*
모든 요소의 width / height 계산에
padding과 border를 포함한다.

레이아웃 크기 계산이 단순해지고,
카드나 입력창이 예상보다 커지는 문제를 줄여준다.
*/
* {
  box-sizing: border-box;
}


/* ========================================
   2. 페이지 전체 설정
======================================== */

body {
  /* 브라우저 기본 바깥 여백 제거 */
  margin: 0;

  /* 기본 글꼴 */
  font-family: Arial, "Noto Sans KR", sans-serif;

  /* 사이트 전체 배경색 */
  background: #f5f7f6;

  /* 기본 글자색 */
  color: #1f2937;
}


/* ========================================
   3. 사이트 상단 헤더
======================================== */

header {
  /* 날먹산 메인 색상 */
  background: #1f7a4d;

  /* 헤더 글자색 */
  color: white;

  /* 위아래 / 좌우 여백 */
  padding: 48px 20px;

  /* 가운데 정렬 */
  text-align: center;
}


/*
현재 index.html에서는 사이트 로고에
<h1>이 아니라 .site-logo를 사용한다.

따라서 예전의 "header h1" 스타일 대신
.site-logo를 직접 스타일링한다.
*/
.site-logo,
header > h1 {
  margin: 0;

  font-size: 42px;

  font-weight: 800;

  line-height: 1.2;
}


/*
사이트 로고 링크.

a 태그의 기본 파란색/밑줄을 없애고
헤더 글자색을 그대로 사용한다.
*/
.site-logo a,
.home-link {
  color: inherit;

  text-decoration: none;
}


/* 사이트 슬로건 */
header p {
  margin:
    10px
    0
    0;

  font-size: 18px;
}


/* ========================================
   4. 메인 콘텐츠 영역
======================================== */

main {
  /*
  큰 화면에서 콘텐츠가 너무 넓게 퍼지지 않도록
  최대 너비를 제한한다.
  */
  max-width: 1100px;

  /*
  좌우 auto = 화면 가운데 정렬
  */
  margin:
    0
    auto;

  /* 콘텐츠 안쪽 여백 */
  padding:
    30px
    20px;
}


/*
각 콘텐츠 섹션 사이 기본 간격
*/
section {
  margin-bottom: 40px;
}


/*
섹션 제목 공통 스타일
*/
h2 {
  margin-top: 0;

  margin-bottom: 18px;

  font-size: 26px;
}


/* ========================================
   5. 메인 소개 영역
======================================== */

/*
메인페이지의 H1과 설명 영역.

별도의 카드 디자인은 주지 않고
현재 메인 디자인 흐름을 유지한다.
*/
.main-intro {
  margin-bottom: 40px;
}


.main-intro h1 {
  margin:
    0
    0
    12px;

  font-size: 34px;

  line-height: 1.3;
}


.main-intro p {
  margin: 0;

  line-height: 1.7;

  color: #4b5563;
}


/* ========================================
   6. 검색 영역
======================================== */

.search-box {
  /*
  검색창과 검색 버튼을
  한 줄에 가로 배치한다.
  */
  display: flex;

  gap: 10px;
}


/* 검색 입력창 */
.search-box input {
  /*
  남은 공간을 검색창이 전부 사용한다.
  */
  flex: 1;

  padding: 14px;

  border:
    1px solid
    #d1d5db;

  border-radius: 10px;

  font-size: 16px;
}


/* 검색 버튼 */
.search-box button {
  border: 0;

  background: #1f7a4d;

  color: white;

  padding:
    0
    22px;

  border-radius: 10px;

  font-size: 16px;

  cursor: pointer;
}


/* ========================================
   7. 전체 필터 영역
======================================== */

.filters {
  /*
  검색창과 필터 사이 간격
  */
  margin-top: 20px;

  background: white;

  padding: 18px;

  border-radius: 14px;

  border:
    1px solid
    #e5e7eb;
}


/* 각 필터 그룹 */
.filter-group {
  margin-bottom: 16px;
}


/* 마지막 필터 그룹은 아래 여백 제거 */
.filter-group:last-child {
  margin-bottom: 0;
}


/* "지역", "소요시간" 등의 필터 제목 */
.filter-label {
  margin-bottom: 9px;

  font-size: 14px;

  font-weight: bold;

  color: #374151;
}


/*
모든 필터 버튼 영역 공통 배치
*/
.filter-box,
.time-filter-box,
.distance-filter-box,
.score-filter-box,
.feature-filter-box {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


/*
모든 필터 버튼 공통 디자인
*/
.filter-button,
.time-filter-button,
.distance-filter-button,
.score-filter-button,
.feature-filter-button {
  border:
    1px solid
    #d1d5db;

  background: white;

  color: #374151;

  padding:
    9px
    14px;

  border-radius: 999px;

  cursor: pointer;

  font-size: 14px;

  transition:
    all 0.2s ease;
}


/* 일반 버튼 hover */
.filter-button:hover,
.time-filter-button:hover,
.distance-filter-button:hover,
.score-filter-button:hover,
.feature-filter-button:hover {
  border-color: #1f7a4d;

  color: #1f7a4d;
}


/* 선택된 필터 버튼 */
.filter-button.active,
.time-filter-button.active,
.distance-filter-button.active,
.score-filter-button.active,
.feature-filter-button.active {
  background: #17603c;

  border-color: #17603c;

  color: white;

  font-weight: bold;

  box-shadow:
    0 0 0 3px
    rgba(31, 122, 77, 0.2);

  transform: translateY(-1px);
}


/*
선택된 버튼에 마우스를 올려도
선택 색상을 유지한다.
*/
.filter-button.active:hover,
.time-filter-button.active:hover,
.distance-filter-button.active:hover,
.score-filter-button.active:hover,
.feature-filter-button.active:hover {
  background: #17603c;

  border-color: #17603c;

  color: white;
}


/* ========================================
   8. 메인 산 목록 Grid
======================================== */

#mountain-list {
  /*
  산 카드를 Grid 형태로 배치한다.
  */
  display: grid;

  /*
  카드 하나는 최소 280px, 최대 320px 정도를 사용한다.

  산이 1개만 검색되어도
  화면 전체 폭으로 늘어나지 않게 한다.
  */
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(280px, 320px)
    );

  gap: 20px;

  /*
  남는 공간이 있을 때
  카드들을 왼쪽부터 배치한다.
  */
  justify-content: start;

  /*
  같은 행의 카드 높이를
  가장 높은 카드에 맞춘다.

  Grid 기본 동작도 stretch이지만
  의도를 명확하게 하기 위해 적어둔다.
  */
  align-items: stretch;
}


/* ========================================
   9. 메인 산 카드
======================================== */

.mountain-card {
  /*
  카드 내부를 세로 Flex 구조로 만든다.

  이 설정과 .detail-button의 margin-top:auto가 함께 작동해
  배지 개수가 달라도 "자세히 보기" 버튼이
  항상 카드 아래쪽 같은 위치에 정렬된다.
  */
  display: flex;

  flex-direction: column;

  height: 100%;

  background: white;

  border-radius: 16px;

  padding: 22px;

  box-shadow:
    0 4px 16px
    rgba(0, 0, 0, 0.08);

  transition:
    all 0.2s ease;
}


/* 카드 hover */
.mountain-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.12);
}


/* ========================================
   10. 산 카드 상단
======================================== */

.mountain-card-header {
  /*
  왼쪽 = 산 이름/지역
  오른쪽 = 날먹지수
  */
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 16px;

  margin-bottom: 22px;
}


/* 산 이름 */
.mountain-card h3 {
  margin:
    0
    0
    7px;

  font-size: 22px;

  line-height: 1.3;
}


/* 지역 */
.mountain-region {
  font-size: 14px;

  color: #6b7280;
}


/* ========================================
   11. 날먹지수 원형 표시
======================================== */

.score {
  min-width: 68px;

  width: 68px;

  height: 68px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  flex-shrink: 0;

  background: #e9f7ef;

  color: #17603c;

  border-radius: 50%;

  font-size: 24px;

  font-weight: 800;
}


/* 점수 아래 "점" 글자 */
.score span {
  font-size: 11px;

  font-weight: normal;
}


/* ========================================
   12. 산 핵심 정보
======================================== */

.mountain-stats {
  /*
  거리 / 시간 / 상승고도 / 높이
  2 x 2 구조
  */
  display: grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap: 10px;

  margin-bottom: 18px;
}


/* 정보 한 칸 */
.stat-item {
  background: #f7f9f8;

  border-radius: 10px;

  padding: 12px;
}


/* 작은 라벨 */
.stat-label {
  display: block;

  margin-bottom: 4px;

  font-size: 12px;

  color: #6b7280;
}


/* 실제 값 */
.stat-item strong {
  font-size: 16px;

  color: #1f2937;
}


/* ========================================
   13. 산 특징 배지
======================================== */

.mountain-tags {
  /*
  덕유산처럼 특징이 많으면
  자연스럽게 다음 줄로 넘어간다.
  */
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 20px;
}


/* 기본 배지 */
.mountain-tag {
  background: #f3f4f6;

  color: #4b5563;

  padding:
    6px
    9px;

  border-radius: 999px;

  font-size: 12px;
}


/* 좋은 특징 */
.mountain-tag.good {
  background: #e9f7ef;

  color: #17603c;
}


/* 특별 기능 */
.mountain-tag.special {
  background: #fff7e6;

  color: #9a6700;
}


/* ========================================
   14. 자세히 보기 버튼
======================================== */

.detail-button {
  /*
  카드 위쪽 내용이 짧아도
  남는 공간을 버튼 위쪽이 차지하게 한다.

  따라서 모든 카드 버튼의 위치가
  같은 행에서 정확히 맞는다.
  */
  margin-top: auto;

  width: 100%;

  /*
  버튼 높이를 고정해서
  모든 카드의 버튼 박스와 글씨 중심을 맞춘다.
  */
  min-height: 44px;

  border: 0;

  background: #1f7a4d;

  color: white;

  border-radius: 10px;

  font-size: 14px;

  font-weight: bold;

  cursor: pointer;

  text-decoration: none;

  /*
  a 태그를 Flex 컨테이너로 만들어
  "자세히 보기" 글씨를
  가로/세로 정확히 가운데 정렬한다.
  */
  display: flex;

  align-items: center;

  justify-content: center;

  line-height: 1;

  transition:
    all 0.2s ease;
}


/* 버튼 hover */
.detail-button:hover {
  background: #17603c;
}


/* ========================================
   15. SEO 랭킹 페이지 소개
======================================== */

.ranking-intro {
  background: white;

  padding: 28px;

  border-radius: 18px;

  border:
    1px solid
    #e5e7eb;

  margin-bottom: 28px;
}


/* 랭킹 페이지 H1 */
.ranking-intro h1 {
  margin-top: 0;

  font-size: 32px;
}


/* 소개문 */
.ranking-intro p {
  line-height: 1.7;
}


/* 안내문 */
.ranking-note {
  color: #6b7280;

  font-size: 13px;
}


/* ========================================
   16. SEO 랭킹 목록
======================================== */

.ranking-list {
  display: grid;

  gap: 12px;
}


/* 산 하나의 랭킹 행 */
.ranking-item {
  display: flex;

  align-items: center;

  gap: 18px;

  background: white;

  border:
    1px solid
    #e5e7eb;

  border-radius: 14px;

  padding: 18px;

  transition:
    all 0.2s ease;
}


/* 랭킹 카드 hover */
.ranking-item:hover {
  transform: translateY(-2px);

  box-shadow:
    0 6px 18px
    rgba(0, 0, 0, 0.08);
}


/* 순위 숫자 */
.ranking-number {
  min-width: 44px;

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: #f3f4f6;

  font-size: 18px;

  font-weight: bold;
}


/* 산 정보 영역 */
.ranking-content {
  flex: 1;

  min-width: 0;
}


/*
예전 랭킹 HTML은 h2를 사용했고,
현재 자동 생성 HTML은 h3를 사용할 수 있다.

둘 중 어느 쪽이어도 같은 디자인이 적용되도록
h2와 h3를 함께 지정한다.
*/
.ranking-content h2,
.ranking-content h3 {
  margin:
    0
    0
    6px;

  font-size: 20px;
}


/*
랭킹 산 이름 링크.

브라우저 기본 파란색/보라색 링크가 나오지 않도록
h2와 h3 링크를 모두 처리한다.
*/
.ranking-content h2 a,
.ranking-content h3 a {
  color: #1f2937;

  text-decoration: none;
}


.ranking-content h2 a:hover,
.ranking-content h3 a:hover {
  color: #17603c;
}


/* 산 요약 */
.ranking-summary {
  margin:
    0
    0
    10px;

  color: #6b7280;

  font-size: 14px;

  line-height: 1.5;
}


/* 거리 / 시간 등 */
.ranking-stats {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  font-size: 13px;

  color: #4b5563;
}


/* 랭킹 날먹지수 */
.ranking-score {
  min-width: 65px;

  width: 65px;

  height: 65px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: #e9f7ef;

  color: #17603c;
}


.ranking-score strong {
  font-size: 23px;
}


.ranking-score span {
  font-size: 11px;
}


/* ========================================
   17. SEO 랜딩페이지 관련 링크
======================================== */

.related-ranking-links {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 16px;
}


/* 각 관련 페이지 링크 */
.related-ranking-link {
  display: inline-block;

  padding:
    10px
    14px;

  border:
    1px solid
    #dddddd;

  border-radius: 8px;

  background: #ffffff;

  color: #222222;

  text-decoration: none;

  font-size: 14px;
}


.related-ranking-link:hover {
  background: #f5f5f5;

  border-color: #bbbbbb;
}


/* ========================================
   18. 메인페이지 SEO 허브
======================================== */

.seo-hub {
  /*
  이미 <main> 안에 있으므로
  별도로 width / max-width / 좌우 padding을 주지 않는다.

  상위 main의 정렬선을 그대로 따른다.
  */
  margin-top: 48px;

  margin-bottom: 48px;
}


/* SEO 허브 설명 */
.seo-hub-description {
  margin-top: 8px;

  margin-bottom: 20px;

  color: #555555;

  line-height: 1.6;
}


/* 5개 링크 카드 배치 */
.seo-hub-links {
  display: grid;

  /*
  공간이 충분하면 여러 열,
  좁아지면 자동 줄바꿈한다.
  */
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(200px, 1fr)
    );

  gap: 14px;
}


/* SEO 허브 카드 */
.seo-hub-card {
  display: flex;

  flex-direction: column;

  gap: 8px;

  padding: 18px;

  border:
    1px solid
    #dddddd;

  border-radius: 12px;

  background: #ffffff;

  color: #222222;

  text-decoration: none;

  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}


.seo-hub-card strong {
  font-size: 16px;
}


.seo-hub-card span {
  font-size: 14px;

  color: #666666;

  line-height: 1.5;
}


.seo-hub-card:hover {
  transform: translateY(-2px);

  border-color: #bbbbbb;

  box-shadow:
    0 4px 12px
    rgba(0, 0, 0, 0.06);
}


/* ========================================
   19. 산 상세페이지 - 관련 산 추천
======================================== */

.related-mountain-list {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px, 1fr)
    );

  gap: 14px;

  margin-top: 18px;
}


/* 관련 산 카드 */
.related-mountain-card {
  display: flex;

  flex-direction: column;

  gap: 8px;

  padding: 16px;

  border:
    1px solid
    #dddddd;

  border-radius: 12px;

  background: #ffffff;

  color: #222222;

  text-decoration: none;

  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}


/* 관련 산 이름 */
.related-mountain-card strong {
  font-size: 16px;

  line-height: 1.4;
}


/* 관련 산 정보 */
.related-mountain-card span {
  color: #666666;

  font-size: 13px;

  line-height: 1.5;
}


/* "최단코스 보기" */
.related-mountain-card
.related-mountain-link-text {
  margin-top: 4px;

  color: #1f6b45;

  font-weight: 600;
}


/* 관련 산 hover */
.related-mountain-card:hover {
  transform: translateY(-2px);

  border-color: #bbbbbb;

  box-shadow:
    0 4px 12px
    rgba(0, 0, 0, 0.06);
}

/* ========================================
   20. 사이트 공통 Footer
======================================== */

/*
Footer는 main 바깥에 있기 때문에
main과 동일한 max-width를 직접 지정한다.

그래야 메인 콘텐츠와
Footer의 왼쪽/오른쪽 정렬선이 맞는다.
*/
.site-footer {
  max-width: 1100px;

  /*
  화면 중앙 정렬
  */
  margin:
    20px
    auto
    0;

  /*
  main과 동일하게 좌우 20px 여백을 준다.
  */
  padding:
    32px
    20px
    40px;

  /*
  본문과 Footer의 경계를
  아주 약한 선으로 구분한다.
  */
  border-top:
    1px solid
    #dfe4e1;
}


/* ========================================
   Footer 사이트 소개
======================================== */

.footer-about {
  margin-bottom: 20px;
}


/* 사이트 이름 */
.footer-logo {
  display: block;

  margin-bottom: 8px;

  font-size: 20px;

  font-weight: 800;

  color: #1f2937;
}


/* 사이트 설명 */
.footer-about p {
  margin: 0;

  color: #6b7280;

  font-size: 14px;

  line-height: 1.7;
}


/* ========================================
   Footer 내부링크
======================================== */

.footer-links {
  /*
  링크를 한 줄에 배치하고,
  공간이 부족하면 자동 줄바꿈한다.
  */
  display: flex;

  flex-wrap: wrap;

  gap:
    10px
    18px;

  margin-bottom: 20px;
}


/* Footer 링크 */
.footer-links a {
  color: #374151;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;
}


/*
마우스를 올리면
날먹산 초록색으로 강조한다.
*/
.footer-links a:hover {
  color: #17603c;

  text-decoration: underline;
}


/* ========================================
   Footer 안내 문구
======================================== */

.footer-notice {
  margin:
    0
    0
    12px;

  color: #9ca3af;

  font-size: 12px;

  line-height: 1.6;
}


/* Copyright */
.footer-copyright {
  margin: 0;

  color: #9ca3af;

  font-size: 12px;
}

/* ========================================
   상세페이지 SEO 정보 목록
======================================== */

/*
"이 코스가 쉬운 이유"
"이런 사람에게 추천"
"산행 전 체크포인트"

3개 영역에서 공통으로 사용하는 리스트다.
*/
.seo-info-list {
  margin:
    16px
    0
    0;

  padding-left: 22px;

  color: #4b5563;
}


/*
리스트 하나하나의 문장
*/
.seo-info-list li {
  margin-bottom: 9px;

  line-height: 1.7;
}


/*
마지막 항목에는
불필요한 아래 여백 제거
*/
.seo-info-list li:last-child {
  margin-bottom: 0;
}



/* ========================================
   21. 산 상세페이지 공통 구조
======================================== */

/*
상세페이지 본문 전체.
너무 넓게 퍼지지 않도록 기존 main 폭 안에서 사용한다.
*/
.mountain-detail {
  width: 100%;
}


/* 홈 > 산 이름 경로 */
.breadcrumb {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 22px;

  color: #6b7280;

  font-size: 14px;
}


.breadcrumb a {
  color: #17603c;

  text-decoration: none;
}


.breadcrumb a:hover {
  text-decoration: underline;
}


/*
상세페이지 상단:
왼쪽 산 이름/설명 + 오른쪽 날먹지수 카드
*/
.detail-header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 28px;

  margin-bottom: 28px;
}


.detail-header > div:first-child {
  flex: 1;

  min-width: 0;
}


/* 지역 표시 */
.detail-region {
  margin-bottom: 10px;

  color: #6b7280;

  font-size: 14px;

  font-weight: 600;
}


/* 상세페이지 H1 */
.detail-header h1 {
  margin:
    0
    0
    14px;

  font-size: 34px;

  line-height: 1.3;
}


/* 산 요약 설명 */
.detail-height {
  margin: 0;

  color: #4b5563;

  line-height: 1.7;
}


/*
상세페이지의 일반 정보 섹션.
한눈에 보기뿐 아니라 코스 설명, 주차, FAQ 등에서 공통 사용.
*/
.detail-section {
  margin-bottom: 28px;

  padding: 24px;

  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: 18px;
}


.detail-section h2 {
  margin-bottom: 14px;
}


.detail-section h3 {
  margin:
    22px
    0
    10px;

  font-size: 18px;

  line-height: 1.4;
}


.detail-section p {
  margin:
    0
    0
    12px;

  color: #4b5563;

  line-height: 1.7;
}


.detail-section p:last-child {
  margin-bottom: 0;
}


/* 편의시설 목록 */
.detail-info-list {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px, 1fr)
    );

  gap: 12px;

  margin-top: 16px;
}


.detail-info-list > div {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  min-height: 58px;

  padding:
    14px
    16px;

  background: #f7f9f8;

  border: 1px solid #edf1ef;

  border-radius: 12px;
}


.detail-info-list span {
  color: #6b7280;

  font-size: 13px;
}


.detail-info-list strong {
  color: #1f2937;

  font-size: 14px;
}


/* FAQ */
.faq-intro {
  margin-bottom: 16px;
}


.faq-list {
  display: grid;

  gap: 10px;
}


.faq-item {
  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: 12px;
}


.faq-item summary {
  padding:
    15px
    16px;

  cursor: pointer;

  font-weight: 700;

  line-height: 1.5;
}


.faq-answer {
  padding:
    0
    16px
    16px;
}


.faq-answer p {
  margin: 0;
}


/* 최종 업데이트 */
.content-update {
  margin:
    10px
    0
    24px;

  color: #9ca3af;

  font-size: 12px;
}


.content-update p {
  margin: 0;
}


/* 메인/목록으로 돌아가기 버튼 */
.back-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 44px;

  padding:
    0
    18px;

  background: #1f7a4d;

  color: #ffffff;

  border-radius: 10px;

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.back-button:hover {
  background: #17603c;

  transform: translateY(-1px);
}


/* ========================================
   상세페이지 한눈에 보기
======================================== */

/*
한눈에 보기 전체 영역

기존 detail-section 기본 스타일을 사용하되
overview 전용 요소들을 추가로 꾸민다.
*/
.overview-section {
  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: 18px;

  padding: 24px;
}


/*
코스 이름 표시 영역

카드 그리드 위에서
현재 어떤 코스 기준 정보인지
먼저 보여준다.
*/
.overview-course-name {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 18px;

  margin-bottom: 20px;
}


/*
"코스" 작은 배지
*/
.overview-course-badge {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    6px
    10px;

  border-radius: 999px;

  background: #e9f7ef;

  color: #17603c;

  font-size: 12px;

  font-weight: 700;
}


/*
실제 코스 이름 텍스트
*/
.overview-course-name strong {
  font-size: 18px;

  color: #1f2937;

  line-height: 1.5;
}


/*
핵심 정보 카드 6개 배치

PC에서는 2열 또는 3열로 자연스럽게 정렬된다.
*/
.overview-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px, 1fr)
    );

  gap: 14px;
}


/*
개별 정보 카드
*/
.overview-card {
  background: #f7f9f8;

  border: 1px solid #edf1ef;

  border-radius: 14px;

  padding: 16px;

  min-height: 96px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


/*
카드 상단 라벨

예:
왕복거리
예상시간
*/
.overview-label {
  display: block;

  margin-bottom: 8px;

  font-size: 13px;

  color: #6b7280;

  line-height: 1.4;
}


/*
카드 안 실제 값

예:
1.2km
40분
150m
*/
.overview-value {
  font-size: 24px;

  font-weight: 800;

  color: #1f2937;

  line-height: 1.3;
}


/*
하단 태그 영역
*/
.overview-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 20px;
}


/* ========================================
   23. 날먹지수 / 난이도 설명 페이지
======================================== */

/*
날먹지수 구간을
카드 형태로 보여주는 전체 영역입니다.

모바일에서도 자연스럽게 줄바꿈되도록
grid를 사용합니다.
*/
.difficulty-guide {
  display: grid;

  /*
  화면이 넓으면 여러 칸,
  화면이 좁으면 자동으로 한 칸씩 표시됩니다.
  */
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px, 1fr)
    );

  gap: 16px;

  margin-top: 20px;
}


/* ========================================
   날먹지수 구간 카드
======================================== */

.difficulty-guide-item {
  padding: 20px;

  border: 1px solid #e5e7eb;

  border-radius: 14px;

  background: #ffffff;
}


/*
90~100점처럼
실제 점수 구간을 크게 표시합니다.
*/
.difficulty-guide-item > strong {
  display: block;

  margin-bottom: 6px;

  font-size: 1.35rem;
}


/*
진짜 날먹 / 쉬운 편 등
점수 의미를 표시합니다.
*/
.difficulty-guide-item > span {
  display: inline-block;

  margin-bottom: 10px;

  font-weight: 700;
}


/*
카드 안 설명 문장
*/
.difficulty-guide-item p {
  margin: 0;

  line-height: 1.7;

  color: #4b5563;
}


/* ========================================
   난이도 / 날먹지수 비교표
======================================== */

/*
모바일 화면에서 표가 너무 넓어질 경우
가로 스크롤이 가능하도록 합니다.
*/
.score-difference-table {
  width: 100%;

  margin-top: 20px;

  overflow-x: auto;
}


/*
실제 table
*/
.score-difference-table table {
  width: 100%;

  border-collapse: collapse;

  min-width: 560px;
}


/*
표 제목과 내용 셀 공통
*/
.score-difference-table th,
.score-difference-table td {
  padding: 13px 14px;

  border: 1px solid #e5e7eb;

  text-align: center;

  line-height: 1.6;
}


/*
표 맨 위 제목줄
*/
.score-difference-table th {
  font-weight: 700;

  background: #f8fafc;
}


/*
첫 번째 열은
평가 요소 이름이므로 왼쪽 정렬합니다.
*/
.score-difference-table td:first-child {
  text-align: left;

  font-weight: 600;
}


/* ========================================
   22. 상세페이지 상단 날먹지수 박스
======================================== */

/*
기존에는 점수, 라벨, 링크가
한 줄처럼 어색하게 붙어 보였기 때문에
세로형 카드처럼 보이도록 정리합니다.
*/
.detail-score {
  display: inline-flex;

  /*
  세로로 쌓이게 합니다.
  */
  flex-direction: column;

  /*
  왼쪽 정렬로 자연스럽게 배치합니다.
  */
  align-items: flex-start;

  gap: 8px;

  margin: 24px 0 32px;

  padding: 18px 20px;

  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: 16px;
}


/*
"🔥 날먹지수" 라벨
*/
.detail-score-label {
  font-size: 0.95rem;

  font-weight: 700;

  color: #6b7280;

  line-height: 1.4;
}


/*
실제 점수값
예: 100점
*/
.detail-score-value {
  margin: 0;

  font-size: 2rem;

  font-weight: 800;

  line-height: 1;

  color: #0f172a;
}


/* ========================================
   날먹지수 기준 보기 링크
======================================== */

/*
기존 텍스트 링크 느낌보다
작은 버튼/뱃지처럼 보이게 만듭니다.
*/
.score-guide-link {
  display: inline-block;

  padding: 8px 12px;

  border: 1px solid #bfdbfe;

  border-radius: 9999px;

  background: #eff6ff;

  color: #1d4ed8;

  font-size: 0.85rem;

  font-weight: 700;

  text-decoration: none;
}


/*
마우스를 올렸을 때
살짝 진해지게 처리합니다.
*/
.score-guide-link:hover {
  background: #dbeafe;

  text-decoration: none;
}

/* ========================================
   24. 모바일 반응형
======================================== */

@media (max-width: 600px) {

  /* -------------------------
     헤더
  ------------------------- */

  header {
    padding:
      36px
      16px;
  }


  .site-logo,
  header > h1 {
    font-size: 34px;
  }


  /* -------------------------
     메인 영역
  ------------------------- */

  main {
    padding:
      24px
      16px;
  }


  .main-intro h1 {
    font-size: 28px;
  }


  /* -------------------------
     검색
  ------------------------- */

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


  .search-box button {
    padding: 14px;
  }


  /* -------------------------
     메인 산 카드
  ------------------------- */

  #mountain-list {
    grid-template-columns: 1fr;
  }


  /* -------------------------
     랭킹 페이지
  ------------------------- */

  .ranking-intro {
    padding: 20px;
  }


  .ranking-intro h1 {
    font-size: 25px;
  }


  .ranking-item {
    align-items: flex-start;

    gap: 12px;
  }


  .ranking-number {
    min-width: 36px;

    width: 36px;

    height: 36px;

    font-size: 15px;
  }


  .ranking-score {
    min-width: 54px;

    width: 54px;

    height: 54px;
  }


  .ranking-score strong {
    font-size: 19px;
  }


  .ranking-stats {
    gap:
      8px
      10px;
  }


  /* -------------------------
     SEO 허브 / 관련 산
  ------------------------- */

  .seo-hub-links,
  .related-mountain-list {
    grid-template-columns: 1fr;
  }


  /* -------------------------
     상세페이지 상단
  ------------------------- */

  .detail-header {
    flex-direction: column;

    gap: 18px;
  }


  .detail-header h1 {
    font-size: 28px;
  }


  /*
  모바일에서는 날먹지수 카드가
  가로폭을 과도하게 차지하지 않도록 유지한다.
  */
  .detail-score {
    margin:
      0
      0
      8px;

    padding:
      16px
      18px;
  }


  .detail-score-value {
    font-size: 1.8rem;
  }


  .detail-section {
    padding: 20px;
  }


  .detail-info-list {
    grid-template-columns: 1fr;
  }


  /* -------------------------
     상세페이지 한눈에 보기
  ------------------------- */

  .overview-section {
    padding: 20px;
  }


  .overview-course-name strong {
    font-size: 16px;
  }


  .overview-grid {
    grid-template-columns: 1fr;
  }


  .overview-value {
    font-size: 22px;
  }


  /* -------------------------
     Footer
  ------------------------- */

  .site-footer {
    padding:
      28px
      16px
      32px;
  }


  .footer-links {
    gap:
      10px
      14px;
  }

}