@charset "utf-8";
:root {
  --wktn-green: #008504;
  --wktn-light-green: #f0f6f0;
  --wktn-border: #d5d5d5;
  --wktn-focus: #246beb;
}

/* ========== 국립 워케이션 운영 휴양림 지도 ========== */
.wktn-list-map { position: relative; width: 100%; max-width: 330px; height: 457px; background: url(/images/workation/eco_map_workation.png) no-repeat 0 0;}

.mountain-list .wktn-list-map { float: left; position: relative; padding-bottom: 20px; margin: 0 40px 0 274px; }
.mountain-trail-list .wktn-list-map { margin: 0 40px 0 250px; padding-bottom: 0; }

.wktn-list-map button { position: absolute; display: block; overflow: hidden; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent url("/images/workation/ico_location.png") no-repeat center / contain; cursor: pointer; appearance: none; transition: transform 0.2s ease, filter 0.2s ease; }
.wktn-list-map button.wktn-map-1 { top: 180px; left: 145px; } /* 상당산성자연휴양림 */
.wktn-list-map button.wktn-map-2 { top: 87px; left: 74px; } /* 무의도자연휴양림 */
.wktn-list-map button.wktn-map-3 { top: 230px; left: 44px; } /* 신시도자연휴양림 */
.wktn-list-map button.wktn-map-4 { top: 80px; left: 140px; } /* 유명산자연휴양림 */
.wktn-list-map button.wktn-map-5 { bottom: 103px; left: 160px; } /* 남해편백자연휴양림 */
.wktn-list-map button.wktn-map-6 { top: 170px; right: 40px; } /* 칠보산자연휴양림 */
.wktn-list-map button.wktn-map-7 { top: 213px; left: 74px; } /* 희리산 자연휴양림 */
.wktn-list-map button.wktn-map-8 { top: 75px; right: 60px; } /* 대관령자연휴양림 */
.wktn-list-map button.wktn-map-9 { top: 99px; right: 115px; } /* 청태산자연휴양림 */

/* 마커 hover 및 선택 */
/* .wktn-list-map button:hover, .wktn-list-map button.is-active { z-index: 2; transform: translateY(-2px) scale(1.12); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25)); } */
.wktn-list-map .wktn-map-marker:hover {
  z-index: 2;
  transform: translateY(-2px) scale(1.1);
}
/* 선택된 마커 */
.wktn-list-map .wktn-map-marker.is-active {
  z-index: 2;
  transform: translateY(-2px) scale(1.1);
  filter: none;
}
/* 키보드 포커스 */
.wktn-list-map .wktn-map-marker:focus-visible {
  z-index: 2;
  outline: 3px solid var(--wktn-focus);
  outline-offset: 3px;
}

/* ========== 국립 워케이션 운영 휴양림 목록 ========== */
.mountain-trail-list #workationList.on {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.mountain-trail-list #workationList li {
  width: calc(100% - 2px);
  padding-left: 0;
}


/* ========== 국립 워케이션 운영 휴양림 ========== */
.mountain-trail-list #workationList li a {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--wktn-border);
  border-radius: 6px;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  color: #555;
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}


/* 마우스 오버 */
.mountain-trail-list #workationList li a:hover {
  border-color: var(--wktn-green);
  background-color: var(--wktn-light-green);
  color: var(--wktn-green);
}

/* 마커로 선택된 링크 */
.mountain-trail-list #workationList li a.is-active {
  border-color: var(--wktn-green);
  background-color: var(--wktn-light-green);
  color: var(--wktn-green);
  font-weight: 700;
  outline: 0;
}

.mountain-trail-list #workationList li a:focus {
  outline: 0;
}

/* 키보드 포커스 */
.mountain-trail-list #workationList li a:focus-visible {
  outline: 3px solid #246beb;
  outline-offset: 2px;
}


/* ========== 국립자연휴양림 워케이션 시설 현황 (상당산성) ========== */
.facility-status-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.75rem; row-gap: 2.5rem; width: 100%; min-width: 0; }
.facility-status-images img { display: block; width: 100%; height: 22.5rem; object-fit: cover; object-position: center; max-width: 100%; }


@media screen and (max-width: 1129px) {
  .mountain-trail-list .wktn-list-map { margin: 0 0 0 0; }
  .mountain-list .list-title { display: none; }
}

@media screen and (max-width: 1024px) {
  .facility-status-images { column-gap: 32px; row-gap: 32px; }
  .mountain-trail-list { padding: 40px 20px; }
  .facility-status-images img { height: clamp(280px, 35vw, 360px); }
  .mountain-trail-list #workationList li a { padding: 10px 4px; font-size: 15px; } 
  .mountain-trail-list .list-result { padding-top: 20px; }
  .mountain-list .list-result .result-title .sti { font-size: 15px; }
}

@media screen and (max-width: 768px) {
  .mountain-trail-list .list-title, .mountain-trail-list .wktn-list-map { display: none; }
  .mountain-list .list-result .result-title { display: flex; flex-direction: column; }

  /* 기존 PC 배치 해제 */
  .mountain-list.mountain-trail-list .list-wrap { display: block; }

  .mountain-trail-list .list-result { float: none; display: block; width: 100%; margin: 0; padding: 0; }

  /* 휴양림 링크 목록 */
  .mountain-trail-list #workationList.on {
    display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  .mountain-trail-list #workationList li { float: none; width: 100%; margin: 0; }

  .mountain-trail-list #workationList li a { width: 100%; min-height: 48px; padding: 10px 12px; }

  /* 시설 현황은 그대로 고정 노출 */
  .facility-status-images { grid-template-columns: 1fr; gap: 24px; }

  .facility-status-images img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
}

@media screen and (max-width: 480px) {
  .mountain-trail-list { padding: 20px; }
  .mountain-trail-list #workationList.on { grid-template-columns: 1fr; height: auto; }
  .facility-status-images { gap: 16px; }
  .wktn-facility h3 { font-size: 20px; }
  .mountain-list .list-result .result-title .sti { font-size: 14px; }
}