/* ================== 1. Design Tokens & Base ================== */
:root {
  --rem-base: 62.5%;
}

html {
  font-size: var(--rem-base);
  scrollbar-gutter: stable;
}

body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  font-feature-settings: 'case', 'ss01', 'ss05', 'ss07';
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -o-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  font-size: var(--fs-body);
  line-height: 1;
  word-break: keep-all;
}

/* swiper button */
.swiper-button-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 20px;
}

.swiper-btn {
  appearance: none;
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;

  width: 36px;
  height: 36px;

  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='18' r='17.5' fill='white' stroke='%23e5e5e5'/%3E%3Cpath d='M20 12L14 18L20 24' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.3s ease;
}

.swiper-btn.next {
  transform: rotate(180deg);
}

.swiper-btn:disabled,
.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

.swiper-btn:not(:disabled):hover {
  opacity: 0.7;
}

/* font-weight */
.fw-100 {
  font-weight: 100;
}

.fw-200 {
  font-weight: 200;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}