*{margin: 0; padding: 0; box-sizing: border-box;}
img{width: 100%; height: 100%; object-fit: cover;}
a{text-decoration: none; list-style: none;}
li{list-style: none;}
body{color: #f5f5f8; background-color: #191917; font-family: var(--kr_font);}

.inner{max-width: 1720px; width: 90%; margin: 0px auto;}
span.title{color: var(--main_color); font-size: 40px; font-weight: 700; font-family: var(--en_font);}


@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
  @font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('./woff2/PretendardVariable.woff2') format('woff2-variations');
}


:root{
  --main_color:#2C9B41;
  --sub_color:#E31F19;
  --en_font:"Fredoka", sans-serif;
  --kr_font:'Pretendard Variable';
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 0,
  'GRAD' 0,
  'opsz' 24
}

.mf-cursor:before {background-color:#E31F19; width: 60px; height: 60px; top: -30px; left: -30px;}
.mf-cursor.-text:before {opacity: 1;}
.mf-cursor-text{font-size: 20px;}



/* 버튼 */
.btn_box .cta_btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 16px 42px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #0ea544, #18e05a);
  color: #111;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
  transition:
    transform 0.16s ease-out,
    box-shadow 0.16s ease-out,
    background 0.2s ease-out;
    font-family: var(--en_font);
}

/* 호버 시 살짝 떠오르는 효과 */
.btn_box .cta_btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.55);
  background: linear-gradient(90deg, #10b24b, #19f163);
}

/* 클릭 시 */
.btn_box .cta_btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}


/* 하트 아이콘 구글 아이콘*/
.btn_box .icon_heart{
  font-size: 32px;
  transition: color 0.18s ease-out;
}


/* 호버 시 하트 색상 변경 (#E31F19) */
.btn_box .cta_btn:hover .icon_heart{
  color: #E31F19;
}

/* 세로 구분선 */
.btn_box .btn_divider{
  width: 1px;
  height: 32px;
  background: rgba(0,0,0,0.18);
  opacity: 0.4;
}

/* 텍스트 */
.btn_box .btn_text{
  letter-spacing: 0.15em;
}
