/* =============================================================
 *  충북 중대재해 사각지대 해소 사업 - 랜딩페이지 스타일
 * ============================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }   /* 네비게이터 클릭 시 부드럽게 이동 */

body {
  background: #f1ecf7;               /* 1920px 보다 넓은 화면에서 좌우 여백 색 */
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 본문(1~5번 이미지를 전체 폭으로 쌓기) ---------- */
.landing {
  margin: 0 auto;
  background: #ffffff;
}

.section {
  position: relative;                /* 핫스팟 기준점 */
  line-height: 0;                    /* 이미지 사이 미세 여백 제거 */
}

.section > img {
  display: block;
  width: 100%;                       /* 화면 폭에 맞춰 비율 유지 */
  height: auto;
}

/* ---------- 클릭 영역(반응형 이미지맵: % 좌표라 화면이 줄어도 정확) ---------- */
.hotspot {
  position: absolute;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* ▼ 클릭 영역을 눈으로 확인하려면 아래 두 줄 주석을 해제하세요 (작업용)
  background: rgba(255, 0, 0, .35);
  outline: 1px solid #ff0000; */
}
.hotspot:focus-visible { outline: 3px solid #7b2fb5; outline-offset: -3px; }

/* 신청 버튼(둥근 알약 모양)에 살짝 hover 효과 */
.section .hotspot:hover { background: rgba(0, 0, 0, .07); border-radius: 50px; }

/* ---------- 우측 중앙 고정 네비게이터(스크롤해도 따라다님) ---------- */
.navigator {
  position: fixed;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;                      /* 원본 폭 */
  z-index: 1000;
  line-height: 0;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .18));
}
.navigator img { display: block; width: 100%; height: auto; }
.navigator .hotspot:hover { background: rgba(123, 47, 181, .12); }

/* 화면이 작아지면 네비게이터도 작게 (핫스팟은 %라 자동으로 맞춰짐) */
@media (max-width: 1024px) { .navigator { width: 112px; } }
@media (max-width: 768px)  { .navigator { width: 92px;  } }
@media (max-width: 480px)  { .navigator { width: 70px;  } }
@media (max-width: 360px)  { .navigator { width: 60px;  } }