@charset "UTF-8";
:root {
  --white: rgba(255, 255, 255, 1);
  --whitewhite: rgba(255, 255, 255, 1);
  --blackblack: rgba(0, 0, 0, 1);
  --graygray-400: rgba(225, 225, 225, 1);
  --graygray-700d: rgba(126, 126, 126, 1);
  --graygray-300: rgba(235, 235, 235, 1);
  --blackblack-60: rgba(0, 0, 0, 0.6);
  --graygray-600: rgba(189, 189, 189, 1);
  --graygray-700: rgba(144, 144, 144, 1);
  
  /* 반응형 레이아웃 변수 추가 */
  --mobile-max-width: 100vw;
  --mobile-container-width: 100%;
  --mobile-padding: 5.33vw; /* 20px/375px = 5.33% */
  --mobile-margin: 2.67vw; /* 10px/375px = 2.67% */
  
  /* 반응형 폰트 크기 */
  --mobile-font-xs: 3.2vw; /* 12px/375px = 3.2% */
  --mobile-font-s: 3.73vw; /* 14px/375px = 3.73% */
  --mobile-font-m: 4.27vw; /* 16px/375px = 4.27% */
  --mobile-font-l: 4.8vw; /* 18px/375px = 4.8% */
  --mobile-font-xl: 6.4vw; /* 24px/375px = 6.4% */
  
  --bold-body-m-800-font-family: "Pretendard", Helvetica;
  --bold-body-m-800-font-weight: 700;
  --bold-body-m-800-font-size: var(--mobile-font-m);
  --bold-body-m-800-letter-spacing: 0px;
  --bold-body-m-800-line-height: 1.5;
  --bold-body-m-800-font-style: normal;
  --regular-caption-m-400-font-family: "Pretendard", Helvetica;
  --regular-caption-m-400-font-weight: 400;
  --regular-caption-m-400-font-size: var(--mobile-font-xs);
  --regular-caption-m-400-letter-spacing: 0px;
  --regular-caption-m-400-line-height: 1.5;
  --regular-caption-m-400-font-style: normal;
  --regular-body-s-400-font-family: "Pretendard", Helvetica;
  --regular-body-s-400-font-weight: 400;
  --regular-body-s-400-font-size: var(--mobile-font-s);
  --regular-body-s-400-letter-spacing: 0px;
  --regular-body-s-400-line-height: 1.57;
  --regular-body-s-400-font-style: normal;
  --bold-title-s-800-font-family: "Pretendard", Helvetica;
  --bold-title-s-800-font-weight: 700;
  --bold-title-s-800-font-size: var(--mobile-font-xl);
  --bold-title-s-800-letter-spacing: 0px;
  --bold-title-s-800-line-height: 1.5;
  --bold-title-s-800-font-style: normal;
  --semibold-body-s-600-font-family: "Pretendard", Helvetica;
  --semibold-body-s-600-font-weight: 600;
  --semibold-body-s-600-font-size: var(--mobile-font-s);
  --semibold-body-s-600-letter-spacing: 0px;
  --semibold-body-s-600-line-height: 1.57;
  --semibold-body-s-600-font-style: normal;
  --pret-bold-18-font-family: "Pretendard", Helvetica;
  --pret-bold-18-font-weight: 700;
  --pret-bold-18-font-size: var(--mobile-font-l);
  --pret-bold-18-letter-spacing: 0px;
  --pret-bold-18-line-height: 1.56;
  --pret-bold-18-font-style: normal;
  --pret-regular-16-font-family: "Pretendard", Helvetica;
  --pret-regular-16-font-weight: 400;
  --pret-regular-16-font-size: var(--mobile-font-m);
  --pret-regular-16-letter-spacing: 0px;
  --pret-regular-16-line-height: 1.5;
  --pret-regular-16-font-style: normal;
}

/* 미디어 쿼리: 작은 화면 (320px 이하) */
@media (max-width: 320px) {
  :root {
    --mobile-padding: 4vw;
    --mobile-margin: 2vw;
  }
}

/* 미디어 쿼리: 큰 화면 (480px 이상) - 최대값 제한 */
@media (min-width: 480px) {
  :root {
    --mobile-font-xs: 12px;
    --mobile-font-s: 14px;
    --mobile-font-m: 16px;
    --mobile-font-l: 18px;
    --mobile-font-xl: 24px;
    --mobile-padding: 20px;
    --mobile-margin: 10px;
  }
}

/* 반응형 유틸리티 클래스들 */
.responsive-container {
  width: 100vw;
  max-width: 100%;
  overflow-x: hidden;
}

.responsive-padding {
  padding: var(--mobile-padding);
}

.responsive-margin {
  margin: var(--mobile-margin);
}

.responsive-text {
  font-size: var(--mobile-font-m);
  line-height: 1.5;
}

.responsive-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* 이미지 반응형 */
.responsive-img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* 반응형 그리드 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mobile-margin);
  width: 100%;
}

/* 모바일 안전 영역 */
.mobile-safe-area {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 버튼 반응형 */
.responsive-button {
  padding: 3vw 6vw;
  font-size: var(--mobile-font-m);
  border-radius: 2vw;
  min-height: 12vw;
  width: 100%;
  max-width: 300px;
}

@media (min-width: 480px) {
  .responsive-button {
    padding: 12px 24px;
    border-radius: 8px;
    min-height: 48px;
  }
}