@charset "utf-8";

/* =========================================
   Font Face (폰트 불러오기)
========================================= */
/* 1. 프리텐다드 폰트 불러오기 */
@import url("../font/pretendard.min.css");

/* 2. 잘난고딕 폰트 */
@font-face {
    font-family: 'jalnan gothic ttf';
    src: url('../font/JalnanGothic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 3. 팝핀 폰트 레귤러 */
@font-face {
   font-family: 'Poppins-Regular';
   src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/Poppins-Regular.woff') format('woff'),
        url('../fonts/Poppins-Regular.ttf') format('truetype');
   font-weight: 400;
   font-display: swap;
   font-style: normal;
 }

/* =========================================
   Global Typography Base (기본 폰트 선언)
========================================= */
body {
   font-family: 'Pretendard', sans-serif;
   letter-spacing: 0;
}

.title {
   font-family: 'jalnan gothic ttf', sans-serif;
   font-weight: 400;
}

/* =========================================
   Typography Classes - PC (기본 스케일)
========================================= */
/* 메인 클래스 (수정 완료: r, 400) */
.ft-54-r  { font-size: 3.375rem; font-weight: 400; } /* 54px, Regular */
.ft-48-r  { font-size: 3rem;     font-weight: 400; } /* 48px, Regular */

.ft-32-r  { font-size: 2rem;     font-weight: 400; } /* 32px, Regular */
.ft-32-b  { font-size: 2rem;     font-weight: 600; } /* 32px, SemiBold */
.ft-28-r  { font-size: 1.75rem;  font-weight: 400; } /* 28px, Regular */
.ft-20-r  { font-size: 1.25rem;  font-weight: 400; } /* 20px, Regular */
.ft-20-sb { font-size: 1.25rem;  font-weight: 600; } /* 20px, SemiBold */
.ft-18-r  { font-size: 1.125rem; font-weight: 400; } /* 18px, Regular */

/* 서브페이지용 직관적 네이밍 동기화 (Kiosk 페이지 등) */
.font-48  { font-size: 3rem;     font-weight: 700; } /* 48px */
.font-32  { font-size: 2rem;     font-weight: 700; } /* 32px */
.font-20  { font-size: 1.25rem;  font-weight: 400; } /* 20px */


/* =========================================
   Responsive Typography System (폰트 반응형)
   * 피그마 스타일 가이드 기반 (Line-height 포함)
========================================= */

/* 1. 태블릿 (1024px 이하 ~ 769px) */
@media screen and (max-width: 1024px) {
   /* H1 */
   .ft-54-r  { font-size: 2.625rem; } /* 42px */
   
   /* H2 */
   .ft-48-r, 
   .font-48  { font-size: 2.25rem; line-height: 1.25; } /* 36px, 125% */
   
   /* H3 */
   .ft-32-r,
   .ft-32-b, 
   .font-32  { font-size: 1.75rem; line-height: 1.3; }  /* 28px, 130% */
   
   /* H4 */
   .ft-28-r  { font-size: 1.5rem; line-height: 1.35; }  /* 24px, 135% */
   
   /* Body */
   .ft-20-r, 
   .ft-20-sb,
   .font-20  { font-size: 1.125rem; line-height: 1.6; } /* 18px, 160% */
   
   /* Caption */
   .ft-18-r  { font-size: 1rem; line-height: 1.5; }     /* 16px, 150% */
}

/* 2. 모바일 (768px 이하 ~ 403px) */
@media screen and (max-width: 768px) {
   .ft-54-r  { font-size: 2rem; line-height: 1.2; }    /* 32px, 120% */
   .ft-48-r, 
   .font-48  { font-size: 1.75rem; line-height: 1.25; } /* 28px, 125% */
   .ft-32-r,
   .ft-32-b, 
   .font-32  { font-size: 1.5rem; line-height: 1.3; }   /* 24px, 130% */
   .ft-28-r  { font-size: 1.25rem; line-height: 1.4; }  /* 20px, 140% */
   .ft-20-r, 
   .ft-20-sb,
   .font-20  { font-size: 1rem; line-height: 1.6; }     /* 16px, 160% */
   .ft-18-r  { font-size: 0.875rem; line-height: 1.5; } /* 14px, 150% */
}

/* 3. 소형 모바일 (402px 이하) */
@media screen and (max-width: 402px) {
   .ft-54-r  { font-size: 2rem; }       /* 32px */
   .ft-48-r, 
   .font-48  { font-size: 1.75rem; }    /* 28px */
   .ft-32-r,
   .ft-32-b, 
   .font-32  { font-size: 1.5rem; }     /* 24px */
   .ft-28-r  { font-size: 1.25rem; }    /* 20px */
   .ft-20-r, 
   .ft-20-sb,
   .font-20  { font-size: 1rem; }       /* 16px */
   .ft-18-r  { font-size: 0.875rem; }   /* 14px */
}