* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; font-size: 14px; line-height: 1.5; color: #333; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { border: none; background: none; cursor: pointer; }
input, textarea { border: none; background: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption { border: none; }
fieldset { border: none; }
legend { border: none; }
address { border: none; }
blockquote { border: none; }
hr { border: none; }

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #F1F1F1;
}
::-webkit-scrollbar-thumb {
  background: #303538;
  border-radius: 999px;
}

.only-pc { display: block; }
.only-m { display: none; }
@media (max-width: 900px) {
  .only-pc { display: none!important; }
  .only-m { display: block!important; }
}

/** Swiper navigation 커스텀 */
.swiper-button-next,
.swiper-button-prev {
  color: #3cb4e5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.91);
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: background .2s, box-shadow .2s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #3cb4e5;
  color: #fff;
  box-shadow: 0 4px 24px rgba(60,180,229,.12);
}
.swiper-button-next::after,
.swiper-button-prev::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  height: 20%;
  border-top: 2px solid #777;
  border-right: 2px solid #777;
}
.swiper-button-next::after {
  transform: translate(-80%, -50%) rotate(45deg);
}
.swiper-button-prev::after {
  transform: translate(-20%, -50%) rotate(-135deg);
}
.swiper-button-next svg,
.swiper-button-prev svg {
  display: none !important;
}

/* 예시: 버튼위치 */
.swiper-button-prev {
  left: 24px;
}
.swiper-button-next {
  right: 24px;
}

@media (max-width: 900px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
  .swiper-button-prev { left: 6px; }
  .swiper-button-next { right: 6px; }
}

/** Swiper pagination 커스텀 (progressbar & bullet) */
.swiper-pagination {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 80%;
  height: 8px;
  z-index: 10;
  display: block;
}
.swiper-pagination-progressbar {
  background: #eaf6fb;
  border-radius: 3px;
  height: 8px;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #3cb4e5;
  border-radius: 3px;
  height: 100%;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background: #eaf6fb;
  opacity: 1;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #3cb4e5;
  transition: background .25s, border .25s;
}
.swiper-pagination-bullet-active {
  background: #3cb4e5;
  border: 2px solid #2589ae;
}

/* 번역 등을 위한 .swiper-pagination 커스텀 */
.swiper-pagination[dir="rtl"] {
  left: initial;
  right: 50%;
  transform: translateX(50%);
}

/* 반응형: pagination 간소화 */
@media (max-width:640px) {
  .swiper-pagination {
    height: 4px;
    width: 70%;
    bottom: 8px;
  }
  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 3px;
  }
}
.swiper-pagination-progressbar {
  position: absolute !important;
  top: auto !important;
  left: 50% !important;
  bottom: 28px !important;
  transform: translateX(-50%) !important;
  width: 320px !important;
  max-width: 85vw !important;
  background: rgba(255,255,255,.1)!important;
  border-radius: 999px !important;
  height: 6px !important;
  box-shadow: 0 1px 8px 0 rgba(60, 180, 229, 0.08) !important;
  z-index: 20 !important;
  overflow: hidden !important;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #FFF !important;
  border-radius: 999px !important;
  height: 100% !important;
  transition: width .35s cubic-bezier(0.4,0,0.2,1) !important;
}

/* 반응형 */
@media (max-width:640px) {
  .swiper-pagination-progressbar {
    width: 80vw !important;
    min-width: 120px;
    height: 4px;
    bottom: 10px !important;
  }
}