/* ===================================================================
   공통 css (reset / 변수 / 공통 텍스트 크기)
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, p, a, img, video, ul, li { margin: 0; padding: 0; }
body { font-family: 'Pretendard', sans-serif; background: #000; color: #fff; -webkit-text-size-adjust: 100%; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
ul, li { list-style: none; }

:root {
    --max_width: 1920px;                                /* html 최대 가로폭 */
    --vh: 1vh;                                          /* 고정 화면높이 1% (script.js 에서 덮어씀) */

    /* 공통 텍스트 크기 (섹션별 타이틀/서브텍스트 통일용) */
    --fs_big: clamp(34px, 4.4vw, 84px);                 /* 큰 글씨 */
    --fs_mid: clamp(18px, 1.6vw, 30px);                 /* 중간 글씨 */
    --fs_small: clamp(14px, 1.1vw, 20px);               /* 작은 글씨 */

    --color_apply: #8ffbe0;                             /* 신청 버튼 색 (민트) */
    --color_inquiry: #ffffff;                           /* 문의 버튼 색 (흰색) */
    --color_btn_text: #111111;                          /* 버튼 글자색 */
}

.wrap { position: relative; max-width: var(--max_width); margin: 0 auto; overflow: clip; }

/* ===================================================================
   fixed_01 관련 css
   =================================================================== */
.fixed_01 {
    position: fixed; z-index: 1000;
    right: 10px; bottom: 20px;                          /* 데스크탑 위치 */
    display: flex; flex-direction: column; gap: 8px;    /* 버튼 위아래 배치, 간격 */
    transition: opacity .3s, transform .3s;
}
.fixed_01.is_hidden { opacity: 0; pointer-events: none; transform: translateY(20px); }   /* footer 보일 때 숨김 */
.fixed_01_btn {
    display: flex; align-items: center; justify-content: center;
    width: 200px; height: 60px;                         /* 버튼 크기 */
    border-radius: 14px; font-size: 18px; font-weight: 600; color: var(--color_btn_text);
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: transform .2s, box-shadow .2s, filter .2s;
}
.fixed_01_btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.35); filter: brightness(1.05); }   /* 호버 효과 */
.fixed_01_btn_apply { background: var(--color_apply); }
.fixed_01_btn_inquiry { background: var(--color_inquiry); }

@media (max-width: 768px) {
    .fixed_01 { left: 50%; right: auto; bottom: 10px; width: 90%; transform: translateX(-50%); flex-direction: row; gap: 8px; }   /* 모바일: 가로 배치, 전체의 90% */
    .fixed_01.is_hidden { transform: translateX(-50%) translateY(20px); }
    .fixed_01_btn { flex: 1; width: auto; height: 48px; font-size: 15px; border-radius: 10px; }
}

/* ===================================================================
   fixed_02 관련 css
   =================================================================== */
.fixed_02 { position: fixed; z-index: 900; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.fixed_02_bar {
    position: absolute; left: 0; top: 0; width: 100%; height: 80px;           /* 회색바 높이 */
    background: rgba(120,120,120,.55); backdrop-filter: blur(4px);            /* 반투명 회색 */
    transform: translateY(-100%); transition: transform var(--move_time, .6s) ease;
}
.fixed_02_title {
    position: absolute; left: 50%; top: 60%;                                  /* 중앙에서 아래로 10% */
    transform: translate(-50%, -50%); white-space: nowrap;
    font-size: clamp(56px, 8.85vw, 170px); font-weight: 800; line-height: 1;  /* 1920px 에서 170px */
    transition: top var(--move_time, .6s) ease, font-size var(--move_time, .6s) ease;
}
.fixed_02.is_scrolled .fixed_02_bar { transform: translateY(0); }
.fixed_02.is_scrolled .fixed_02_title { top: 40px; font-size: 28px; font-weight: 700; }   /* 회색바 정중앙, 작은 글씨 */

/* ===================================================================
   s01 관련 css
   =================================================================== */
.s01 { position: relative; height: calc(var(--vh) * 100 * 4.5); }      /* 전체 스크롤 길이 (script.js 에서 덮어씀) */
.s01_sticky { position: sticky; top: 0; height: calc(var(--vh) * 100); overflow: hidden; }
.s01_video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }   /* 화면 꽉 채움 */
.s01_dim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }   /* 영상 어둡게 */

.s01 {
    --s01_first_text_top: 72%;                                               /* 첫텍스트 세로 위치 (화면 높이 기준, 클수록 아래) */
    --s01_part_gap: clamp(40px, 15vw, 300px);                                /* 파트 두 덩어리 사이 간격 (1920px 에서 약 288px) */
    --s01_part_side: 5vw;                                                    /* 파트 좌우 최소 여백 */
    --s01_part_fade_time: .8s;                                               /* 파트 스르륵 뜨고 사라지는 시간 */
}
.s01_first_text {
    position: absolute; left: 0; top: var(--s01_first_text_top); width: 100%; padding: 0 20px;
    transform: translateY(calc(var(--vh) * 100)); opacity: 0;
    transition: transform var(--move_time, .6s) ease, opacity var(--move_time, .6s) ease;
}
.s01_first_text.is_on { transform: translateY(-50%); opacity: 1; }
.s01_first_text_inner { text-align: center; font-size: var(--fs_big); font-weight: 700; line-height: 1.25; will-change: transform; }

.s01_part { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--s01_part_fade_time) ease; }
.s01_part.is_on { opacity: 1; pointer-events: auto; }                       /* 지정 스크롤 지점에서 스르륵 등장 */
.s01_part_inner { display: flex; justify-content: center; align-items: center; width: fit-content; max-width: 100%; padding: 0 var(--s01_part_side); gap: var(--s01_part_gap); }   /* 두 덩어리(내용 폭) + 가운데 여백이 화면 가운데 정렬, 상하 가운데 정렬 */
.s01_block { flex: 0 1 auto; min-width: 0; }                                /* 덩어리 폭은 내용 기준 */
.s01_block_right { display: flex; flex-direction: column; align-items: flex-start; }
.s01_big_text { font-size: var(--fs_big); font-weight: 700; line-height: 1.25; }
.s01_small_text { margin-top: 20px; font-size: var(--fs_small); color: rgba(255,255,255,.85); }
.s01_mid_text { font-size: var(--fs_mid); font-weight: 500; line-height: 1.6; }
.s01_btn {
    display: inline-flex; align-items: center; margin-top: 30px; padding: 16px 32px;
    background: #fff; color: #111; border-radius: 6px; font-size: var(--fs_mid); font-weight: 600; pointer-events: auto;
    transition: transform .2s, background .2s;
}
.s01_btn:hover { transform: translateY(-3px); background: var(--color_apply); }

@media (max-width: 768px) {
    .s01 { --s01_part_gap: 72px; --s01_first_text_top: 72%; }                /* 모바일: 두 덩어리 간격 / 첫텍스트 위치 */
    .s01 { --s01_part_side: 24px; }
    .s01_part_inner { flex-direction: column; align-items: center; text-align: center; }   /* 모바일: 상하 배치, 가운데 정렬 */
    .s01_block_right { align-items: center; }
    .s01_btn { margin-top: 20px; padding: 13px 24px; }
}

/* ===================================================================
   s99 관련 css
   =================================================================== */
.s99 { width: 100%; }
.s99_img { width: 100%; height: auto; }

/* ===================================================================
   s98 관련 css  (s99 + 이미지 위 투명 링크 영역)
   =================================================================== */
.s98 { position: relative; width: 100%; }
.s98_img { width: 100%; height: auto; }
.s98_link {
    position: absolute; display: block;                                      /* 투명 클릭 영역 (이미지 크기 기준 % 라서 비율 바뀌어도 따라감) */
    left: var(--pc_left); top: var(--pc_top); width: var(--pc_width); height: var(--pc_height);
    /* background: rgba(255,0,0,.3); */                                      /* 위치 잡을 때 주석 해제하면 영역이 보임 */
}
@media (max-width: 768px) {                                                  /* 이미지 교체 기준 가로폭과 동일하게 */
    .s98_link { left: var(--mo_left); top: var(--mo_top); width: var(--mo_width); height: var(--mo_height); }
}

/* ===================================================================
   footer 관련 css
   =================================================================== */
.footer { background: #000; padding: 24px 90px; }                                  /* 좌우 폭은 box 여백, 상하 검정 여백 */
.footer_box {
    position: relative; overflow: hidden; border-radius: 24px; color: #fff;
    min-height: calc(var(--vh) * 100 - 48px); padding: 60px 52px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;   /* 층별 배치: 타이틀 - 버튼 - 정보 - copyright */
}
.footer_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.footer_dim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }        /* 배경 어둡게 (변수 조절은 이 값) */
.footer_box > * { position: relative; }
.footer_bg, .footer_dim { position: absolute; }
.footer_box > picture { position: absolute; inset: 0; }                          /* footer 배경 picture 를 박스 전체로 채움 */
.footer_title { font-size: var(--fs_big); font-weight: 800; line-height: 1.1; }
.footer_btns { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }   /* 오른쪽 치우침, 좁아지면 줄바꿈 */
.footer_btn {
    display: flex; align-items: center; justify-content: center; width: 360px; max-width: 100%; height: 68px;
    border-radius: 20px; font-size: 24px; font-weight: 600; color: var(--color_btn_text);
    transition: transform .2s, filter .2s;
}
.footer_btn:hover { transform: translateY(-3px); filter: brightness(1.05); }
.footer_btn_apply { background: var(--color_apply); }
.footer_btn_inquiry { background: var(--color_inquiry); }
.footer_info { font-size: var(--fs_mid); line-height: 1.9; }
.footer_info_label { display: inline-block; width: 100px; }
.footer_copyright { align-self: flex-end; font-size: var(--fs_small); color: #bbb; }

@media (max-width: 1100px) {
    .footer { padding: 16px 40px; }
    .footer_btns { flex-direction: column; align-self: flex-start; }               /* 폭이 좁아지면 버튼 세로 배치 */
    .footer_btn { width: 240px; height: 52px; font-size: 18px; }
}
@media (max-width: 768px) {
    .footer { padding: 8px 16px 90px; }                                            /* 하단: fixed 버튼과 겹치지 않도록 여유 */
    .footer_box { padding: 36px 20px 24px; border-radius: 16px; }
    .footer_box { gap: 28px; }
    .footer_info_label { display: block; width: auto; opacity: .8; }
    .footer_info_row { margin-bottom: 10px; }
    .footer_copyright { font-size: 12px; }
}