:root {
  --main-100: #e6f7ec;
  --main-200: #b3eac7;
  --main-300: #80dda3;
  --main-400: #4dd07f;
  --main-500: #21bf48; /* 메인 */
  --main-600: #1ca843;
  --main-700: #178f3a;
  --main-800: #127530;
  --main-900: #0d5c26;
  --gray-300: #c4c4c4;
  --gray-500: #e0e0e0;
  --gray-700: #767676;
  --text-color: #000000;
  --color-red: #eb5757;
  /* 메인 홈페이지에서만 사용하는 색상과 크기 변수들 */
  --color-bg-light: #f2f2f2;
  --color-white: #fff;
  --gap-sm: 0.5rem;
  --gap-md: 1rem;
  --gap-lg: 2rem;
  --gap-xl: 3rem;
  --breakpoint-mobile: 767px;
  --border-radius-sm: 0.5rem;
  --border-radius-full: 5rem;
}

.wide-container {
  max-width: 1310px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

html {
  font-size: 10px;
}
body {
  font-size: 1.6rem;
  font-family: "SpoqaHanSansNeo-Regular", sans-serif;
}

/* >>>>>>>>>>>> CSS 리팩토리용 유틸리티 클래스 >>>>>>>>>>>>> */

/*
 * 약어 네이밍의 유틸리티 클래스 모음
 *
 * 사용법:
 * - HTML에서 클래스명을 조합하여 사용
 * - 예: <div class="ds-f items-c justify-c">
 *
 * 네이밍 규칙:
 * - 약어 사용: display -> ds, font-weight -> fw
 * - 예: .ds-b, .ds-f, .fw-b, .pos-r
 *
 * 분류:
 * - Display: .ds-b, .ds-f, .ds-g, .ds-n
 * - Flexbox: .flex-col, .items-stretch, .justify-c
 * - Position: .pos-r, .pos-a, .pos-f
 * - Spacing: .mb-4, .mt-8, .p-4
 * - Colors: .text-gray, .bg-white
 * - Sizing: .w-full, .h-full, .aspect-1
 */

/* ========== Font Family(폰트) ========== */
.fw-m {
  font-family: "SpoqaHanSansNeo-Medium", sans-serif;
}
.fw-b {
  font-family: "SpoqaHanSansNeo-Bold", sans-serif;
}

/* ========== Width & Height(너비, 높이) ========== */
.w-5 {
  width: 5rem;
}
.w-full {
  width: 100%;
}

.h-5 {
  height: 5rem;
}
.h-full {
  height: 100%;
}

/* ========== Object Fit ========== */
.of-cover {
  object-fit: cover;
}
.of-contain {
  object-fit: contain;
}

/* ========== Flexbox ========== */
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-center-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ========== Aspect Ratio ========== */
.aspect-1 {
  aspect-ratio: 1;
}

/* ========== Flexbox Align Items ========== */
.items-stretch {
  align-items: stretch;
}

/* ========== Flexbox 조합 ========== */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-center-y {
  /* 세로만 중앙 (가로는 왼쪽) */
  display: flex;
  align-items: center;
}

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

.flex-start {
  display: flex;
  justify-content: flex-start;
}

/* ========== Grid ========== */
.grid-center {
  display: grid;
  place-items: center;
}

/* ========== Flex ========== */
.flex-1 {
  flex: 1;
}

/* ========== Display ========== */
.ds-b {
  display: block;
}
.ds-n {
  display: none;
}
.ds-ib {
  display: inline-block;
}
.ds-f {
  display: flex;
}
.ds-g {
  display: grid;
}

/* ========== Position ========== */
.pos-r {
  position: relative;
}
.pos-a {
  position: absolute;
}
.pos-f {
  position: fixed;
}
.pos-sticky {
  position: sticky;
}

/* ========== Background ========== */
.bg-cover-center {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.bg-n {
  background: none;
}

.bg-white {
  background-color: var(--color-white);
}

/* ========== Margin ========== */
.mb-1 {
  margin-bottom: 1rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 3rem;
}
.mb-4 {
  margin-bottom: 4rem;
}

/* ========== Cursor ========== */
.cur-p {
  cursor: pointer;
}

/* ========== Text Color ========== */
.text-black {
  color: var(--text-color); /* 검정색 */
}

.text-gray {
  color: var(--gray-700);
}

.text-green {
  color: var(--main-500);
}

.text-white {
  color: var(--color-white);
}

/* ========== Text Align ========== */
.text-center {
  text-align: center;
}

/* ========== Border ========== */
.border-none {
  border: none;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* ===== 공통 CSS 스타일 ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 포커스 스타일 (키보드 사용자를 위함 - TAB 키로 이동할 때 적용) */
*:focus-visible {
  outline: 0.2rem solid #21bf48;
  outline-offset: 0.2rem;
}
button {
  appearance: none;
  border: none;
  color: var(--text-color);
}
.common-btn {
  background-color: var(--main-500);
  border-radius: 0.5rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  min-width: 12.2rem;
  min-height: 5.4rem;
  position: relative;
  overflow: hidden;
  transition: all 0.2s linear 0s;
}

/* 화살표 아이콘 효과 */
.common-btn::before {
  content: "\ea6e";
  font-family: "remixicon";
  font-size: 3rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 0.7rem;
  position: absolute;
  top: 0;
  left: -1rem;
  height: 100%;
  width: 3rem;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 0 50% 50% 0;
  transform: scale(0, 1);
  transform-origin: left center;
  transition: all 0.2s linear 0s;
}

/* hover 효과 */
.common-btn:hover {
  text-indent: 1rem;
}

.common-btn:hover::before {
  transform: scale(1, 1);
}

/* disabled 버튼 */
.common-btn:disabled {
  background-color: var(--gray-300);
  color: #fff;
  cursor: not-allowed;
}

.common-btn:disabled:hover {
  text-indent: 0;
  background-color: var(--gray-300);
  font-weight: 700;
}

.common-btn:disabled::before {
  display: none;
}

/* 메인, 푸터 강조 텍스트 */
.strong {
  font-family: "SpoqaHanSansNeo-Bold";
}

/* 헤더 검색창 기본 clear 버튼 삭제 */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
input {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}