/* BASIC css start */
/* ===== 기본 레이아웃 ===== */
.expo-wrap { position: relative; }
.expo-container {
  width: 1000px;           /* PC 기준 1000px */
  max-width: 1000px;
  margin: 0 auto;
}
.expo-section { position: relative; }
.expo-section + .expo-section { margin-top: 0; }


/* ===== 이벤트 텍스트 ===== */
.event-wrap {
  text-align: center;      /* 중앙 정렬 */
  margin: 40px 0;          /* 위아래 여백 */
}

.event-label {
  font-size: 1.5rem;
  font-weight: 400;
  color: #333;
  margin-bottom: 12px;     /* 아래쪽 여백 */
}

.event-title {
  display: block;
  border: 1px solid #ccc;  /* 테두리 */
  padding: 12px 20px;      /* 안쪽 여백 */
  font-size: 1.2rem;
    font-weight: 600;
  color: #333;
  background: #f9f9f9;     /* 살짝 회색 배경 */
  max-width: 1000px;        /* 최대 가로폭 */
  margin: 0 auto;          /* 중앙 정렬 */
}

/* 이미지 + 핫스팟(영역링크) */
.image-map { position: relative; }
.image-map img {
  display: block;
  width: 100%;
  height: auto;
}
.image-map .hotspot {
  position: absolute;
  display: block;
  /* 시인성 확인용   운영 시 아래 3줄은 주석 처리 권장 */
  /* outline: 2px dashed rgba(255,0,0,.4); background: rgba(255,0,0,.06); */
  text-indent: -9999px;
  overflow: hidden;
}

/* ===== 따라다니는 띠배너 ===== */
.floating-ribbon {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 9999;

  background: #222;        /* 바탕 */
  border: 4px solid #3a3a3a;
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  overflow: hidden;
}

/* 이벤트 탭 버튼 */
.floating-ribbon .ribbon-item {
  min-width: 200px;        /* 예시 이미지 감안한 폭 */
  padding: 12px 12px;
  font-size: 16px;   /* ← 글씨 크기 키우기 */
  text-align: center;
  color: #cfcfcf;
  text-decoration: none;
  background: #1e1e1e;
  border-right: 1px solid #3a3a3a;
  font-weight: 600;
  line-height: 1;
  transition: background .2s, color .2s, transform .2s;
}
.floating-ribbon .ribbon-item:last-of-type { border-right: none; }
.floating-ribbon .ribbon-item:hover { color: #fff; transform: translateY(-1px); }


/* 띠배너 글자 줄바꿈 + 행간 조절 */
.floating-ribbon .ribbon-item span {
  display: block;
  white-space: normal;
  line-height: 1.4;  /* 원하는 값으로 조절 */
}

/* 활성 섹션 하이라이트 (좌측 빨강 느낌) */
.floating-ribbon .ribbon-item.active {
  background: #b21a05;     /* 예시 이미지의 붉은 탭 */
  color: #ffffff;
}

/* TOP 버튼 */
.floating-ribbon .ribbon-top {
  padding: 0 14px;
  background: #2b2b2b;
  color: #cfcfcf;
  border: none;
  border-left: 1px solid #3a3a3a;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.floating-ribbon .ribbon-top:hover { color: #fff; transform: translateY(-1px); }

/* ===== 접근성/보조 ===== */
html { scroll-behavior: smooth; } /* 기본 부드러운 스크롤 */

/* (선택) 1200px 미만 화면에서 띠배너 폭 대응 */
@media (max-width: 1200px) {
  .floating-ribbon .ribbon-item { min-width: 140px; padding: 12px 14px; }
}
/* BASIC css end */