@charset "utf-8";

/* 
  1. 기본 원리: clamp() 함수를 활용한 반응형 글꼴 크기 구현
  2. 화면 크기에 따라 최소값과 최대값 사이에서 글꼴 크기를 동적으로 조정
  3. 구문 형식: clamp(최소값, 계산식, 최대값)
  4. 계산 방식: calc((100 / 기준해상도) * 1vw 계수) - 화면 너비에 비례하는 글꼴 크기 계산

  구현 방식:
  - 기준 해상도에서 1rem = 1px 비율 설정
  - 기준 해상도보다 클 때: 비례 계수 유지하며 확대 비율 적용
  - 기준 해상도보다 작을 때: 화면 크기에 맞춰 최소값 유지하며 글꼴 크기 자동 조절
  - 1921px 이상 화면: 1920px 해상도 기준 비율 유지, 최대 100배까지 확대
  - 1919px ~ 1280px 구간: 화면 크기에 따른 글꼴 크기 조정, 컨테이너 크기에 맞춰 축소 처리
*/

:root{
    --font-size-60: clamp(32rem, calc(60 / var(--container) * 100vw), 60rem);
    --font-size-55: clamp(24rem, calc(55 / var(--container) * 100vw), 55rem);
    --font-size-52: clamp(24rem, calc(52 / var(--container) * 100vw), 52rem);
    --font-size-45: clamp(24rem, calc(45 / var(--container) * 100vw), 45rem);
    --font-size-40: clamp(24rem, calc(40 / var(--container) * 100vw), 40rem);
    --font-size-36: clamp(20rem, calc(36 / var(--container) * 100vw), 36rem);
    --font-size-32: clamp(20rem, calc(32 / var(--container) * 100vw), 32rem);
    --font-size-30: clamp(20rem, calc(30 / var(--container) * 100vw), 30rem);
    --font-size-28: clamp(18rem, calc(28 / var(--container) * 100vw), 28rem);
    --font-size-26: clamp(18rem, calc(26 / var(--container) * 100vw), 26rem);
    --font-size-20: clamp(16rem, calc(20 / var(--container) * 100vw), 20rem);
    --font-size-18: clamp(14rem, calc(18 / var(--container) * 100vw), 18rem);
    --font-size-18-to-14: clamp(14rem, calc(18 / var(--container) * 100vw), 18rem);
    --font-size-17: clamp(14rem, calc(17 / var(--container) * 100vw), 17rem);
    --font-size-16: clamp(14rem, calc(16 / var(--container) * 100vw), 16rem);
    --font-size-15: clamp(13rem, calc(15 / var(--container) * 100vw), 15rem);
    --font-size-14: clamp(12rem, calc(14 / var(--container) * 100vw), 14rem);
}

@media(min-width:1921px){
    html{ font-size: clamp(0px, calc((100 / 1920) * 1vw), 100px); }
}
@media(width:1920px){
	/* 1920px 해상도 환경: 글꼴 크기 6.25% 고정값 적용
   브라우저 기본 글꼴 크기 대응을 위한 최적화 설정
   다른 해상도에서는 clamp 함수로 동적 크기 조정을 하지만,
   1920px에서는 브라우저 기본 글꼴 크기 기준 6.25% 고정 비율로
   일관된 글꼴 표시 보장 */
	html{ font-size: 6.25%; }
}
@media(max-width:1919px) and (min-width:1280px){
    html{ font-size: clamp(0px, calc((100 / var(--container)) * var(--container-scale) * 1vw), 1px); }
}
@media(max-width:1279px) and (min-width:768px){
	/* 태블릿 화면 환경: 가독성 향상을 위한 0.875 계수 적용, 16rem이 14px로 표시되도록 비율 세부 조정 */
    html{ font-size: clamp(0px, calc((100 / 768) * 1vw), 1px); }
}
@media(max-width:767px){
    html{ font-size: clamp(0px, calc((100 / 360) * 1vw), 100px); }
}