/*
선택 1. "제목은 무조건 깔끔하게 한 줄!" (말줄임표 적용)
제목이 길어지면 뒷내용을 과감히 자르고 ...으로 보여줍니다. 디자인이 가장 정돈되어 보입니다.

장점: 카드 높이가 일정하게 유지됨.

단점: 제목이 긴 경우 내용을 다 볼 수 없음. (예: CBCT Landmark Det...)
.intro-card-title {
  // 기존 폰트 설정 유지
  font-family: 'Pretendard', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 100%;
  color: rgb(0, 0, 0);

  // [한 줄 자르기 세트 적용] 
  white-space: nowrap;      //줄바꿈 금지 
  overflow: hidden;         //넘치면 숨김 
  text-overflow: ellipsis;  // 처리 
  
  //(중요) 블록 요소여야 작동하므로 display 확인 
  display: block; 
}

선택 2. "제목은 다 보여줘야지!" (줄바꿈 허용) - 추천
제목이 길면 자연스럽게 두 줄, 세 줄로 내려갑니다. 지금 nowrap을 적용하지 않으면 기본적으로 이 상태입니다.

장점: 정보를 100% 전달할 수 있음.

단점: 제목 길이에 따라 카드 높이가 들쭉날쭉할 수 있음.

수정할 점 (팁): line-height: 100%로 되어 있는데, 줄바꿈이 되면 윗줄 글자와 아랫줄 글자가 너무 딱 붙어서 답답해 보입니다. 줄바꿈을 허용할 거라면 행간을 120%~130% 정도로 늘려주는 게 좋습니다.
.intro-card-title {
  /// ... 
  font-size: 30px;
  
  // 줄바꿈이 될 때 겹치지 않도록 행간 조절 추천 
  line-height: 130%; /* 100% -> 130% 
  
  /// 한글 단어 중간에 끊기지 않도록 설정 (가독성 UP) 
  word-break: keep-all; 
}

선택 3. (가장 추천 🌟) "최대 두 줄까지만 보여주기"
가장 프로페셔널한 방법입니다. "두 줄까지는 보여주고, 그래도 넘치면 그때 ...으로 자르기" 기법입니다. (Multi-line Ellipsis)

이 방법을 쓰면 디자인도 지키고 정보도 꽤 많이 보여줄 수 있습니다.
.intro-card-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: rgb(0, 0, 0);
  line-height: 130%; // 행간 필수 

  // [두 줄 말줄임표 매직 코드] 
  display: -webkit-box;
  -webkit-line-clamp: 2; // 보여줄 줄 수 (2줄) 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  
  // white-space: nowrap; 절대 금지! (이게 있으면 한 줄만 나옴) 
}
*/



@import url('font.css');

/* 1. 배너 영역 스타일 */
.banner-area {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    
    /* 배경 설정 (기존 Tailwind 속성 반영) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;

    /* [핵심 1] 높이 설정 전략 */
    /* 기본적으로 피그마 비율(1920:317)을 유지하되... */
    aspect-ratio: 1920 / 317;
    
    /* [핵심 2] 화면이 작아져도 이 높이 밑으로는 절대 줄어들지 마라! (안전장치) */
    min-height: 160px; 
    
    /* 내부 텍스트 중앙 정렬을 위한 Flex 설정 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. 배너 제목 텍스트 스타일 */
.banner-title {
    /* [핵심 3] 제목은 무조건 한 줄! */
    white-space: nowrap;
    
    /* 폰트 설정 (Pretendard Bold 추천) */
    font-family: 'Pretendard', sans-serif;
    font-size: 150px;
    font-weight: 400;       /* Bold */
    line-height: 100%;
    letter-spacing: -10%;  /*-.10px;*/
    color: #000000; /* 배경에 따라 흰색(#ffffff)으로 변경 고려 */
    text-align: center;
    
    /* [핵심 4] 반응형 폰트 크기 (clamp 함수) */
    /* 설명: 최소 24px, 평소엔 화면 넓이의 5%, 최대 60px */
    /* 이렇게 하면 화면이 줄어들면 글씨도 알아서 작아집니다! */
    font-size: clamp(100px, 5vw, 150px);
}


/*인트로 페이지*/
.intro-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 50px;
  font-weight: 700;       /* Bold */
  line-height: 150%;
  letter-spacing: 0%;
  color: white;           /* text-white */
}

.intro-sub-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 40px;
  font-weight: 400;       /* Bold */
  line-height: 150%;
  letter-spacing: 0%;
  color: white;           /* text-white */
}





.upload-button {
    /* 1. 크기 및 정렬 (w-[452px] h-[76px] flex justify-center items-center) */
    width: 546px;
    height: 96px;
    display: flex;             /* flex */
    justify-content: center;   /* justify-center */
    align-items: center;       /* items-center */

    margin-top: 133px;   /* mb-6 */


    font-family: 'Pretendard',sans-serif;;
    font-size: 30px;      /* 2. Size: 30px (기존 20px에서 변경) */
    font-weight: 700;     /* 3. Weight: Regular는 숫자 400입니다 (기존 700에서 변경) */
    line-height: 100%;    /* 4. Line height: 100% */
    letter-spacing: 0;    /* 5. Letter spacing: 0% */

    /* 2. 배경 및 폰트 (bg-white text-gray-800 text-[20px] font-bold) */
    background-color: #ffffff;
    color: #1f2937;            /* text-gray-800의 색상코드 */

    /* 3. 테두리 및 모양 (rounded-full border) */
    border-radius: 9999px;     /* rounded-full */
    border: 1px solid #e5e7eb; /* 연한 회색 테두리 추가 (선택사항) */

    /* 1. 줄바꿈 금지 (필수) */
    white-space: nowrap;

    /* 2. 넘치는 글자 숨기기 (안전장치 1) */
    overflow: hidden;

    /* 3. 넘치면 말줄임표(...) 처리 (안전장치 2) */
    text-overflow: ellipsis;


    /* 4. 그림자 및 효과 (shadow-md transition) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.upload-button-desc {
  font-family: 'Pretendard', sans-serif;
  font-size: 30px;
  font-weight: 400;       /* Bold */
  line-height: 100%;
  letter-spacing: 0%;
  color: rgb(0, 0, 0);           /* text-white */
}

/* 5. 마우스 올렸을 때 (hover:shadow-lg) */
.upload-button:hover {
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}





.intro-button {
    /* 1. 크기 및 여백 (px-8 py-4 text-lg) */
    width: 296px;
    height: 58px;
    /* 2. 박스 모델 설정 (테두리 포함해서 74px로 고정) */
    box-sizing: border-box; /* [추가됨] 이 속성이 있으면 크기가 정확해집니다 */

    display: flex;
    justify-content: center; /* 가로 중앙 */
    align-items: center;     /* 세로 중앙 */
    
    /* 3. 패딩 초기화 */
    /* 고정 높이를 줬으므로 상하 패딩이 있으면 계산이 꼬일 수 있어 0으로 둡니다 */
    padding: 0;
    

    font-family: 'Pretendard',sans-serif;;
    font-size: 25px;      /* 2. Size: 30px (기존 20px에서 변경) */
    font-weight: 400;     /* 3. Weight: Regular는 숫자 400입니다 (기존 700에서 변경) */
    line-height: 100%;    /* 4. Line height: 100% */
    letter-spacing: 0;    /* 5. Letter spacing: 0% */
    
    /* 2. 색상 및 테두리 (bg-white border-blue-400) */
    background-color: #ffffff;
    color: #111827; /* 진한 회색 (gray-900) */
    border: 1px solid #60a5fa; /* 파란색 테두리 */
    
    /* 3. 모양 (rounded-full shadow-lg) */
    border-radius: 9999px;
    font-weight: 700; /* bold */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    

    /* 1. 줄바꿈 금지 (필수) */
    white-space: nowrap;

    /* 2. 넘치는 글자 숨기기 (안전장치 1) */
    overflow: hidden;

    /* 3. 넘치면 말줄임표(...) 처리 (안전장치 2) */
    text-overflow: ellipsis;

    /* 4. 동작 */
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.intro-button:lang(en) {
    /* 1. 크기 및 여백 (px-8 py-4 text-lg) */
    width: 296px;
    height: 58px;
    /* 2. 박스 모델 설정 (테두리 포함해서 74px로 고정) */
    box-sizing: border-box; /* [추가됨] 이 속성이 있으면 크기가 정확해집니다 */

    display: flex;
    justify-content: center; /* 가로 중앙 */
    align-items: center;     /* 세로 중앙 */
    
    /* 3. 패딩 초기화 */
    /* 고정 높이를 줬으므로 상하 패딩이 있으면 계산이 꼬일 수 있어 0으로 둡니다 */
    padding: 0;
    

    font-family: 'Pretendard',sans-serif;;
    font-size: 20px;      /* 2. Size: 30px (기존 20px에서 변경) */
    font-weight: 400;     /* 3. Weight: Regular는 숫자 400입니다 (기존 700에서 변경) */
    line-height: 100%;    /* 4. Line height: 100% */
    letter-spacing: 0;    /* 5. Letter spacing: 0% */
    
    /* 2. 색상 및 테두리 (bg-white border-blue-400) */
    background-color: #ffffff;
    color: #111827; /* 진한 회색 (gray-900) */
    border: 1px solid #60a5fa; /* 파란색 테두리 */
    
    /* 3. 모양 (rounded-full shadow-lg) */
    border-radius: 9999px;
    font-weight: 700; /* bold */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    

    /* 1. 줄바꿈 금지 (필수) */
    white-space: nowrap;

    /* 2. 넘치는 글자 숨기기 (안전장치 1) */
    overflow: hidden;

    /* 3. 넘치면 말줄임표(...) 처리 (안전장치 2) */
    text-overflow: ellipsis;

    /* 4. 동작 */
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}











/* 마우스 올렸을 때 효과 (hover:bg-blue-600 hover:text-white) */
.intro-button:hover {
    font-family: 'Pretendard';
    font-size: 20px;      /* 2. Size: 30px (기존 20px에서 변경) */
    font-weight: 700;     /* 3. Weight: Regular는 숫자 400입니다 (기존 700에서 변경) */
    line-height: 100%;    /* 4. Line height: 100% */
    letter-spacing: 0;    /* 5. Letter spacing: 0% */

    background-color: #2B6DF9; /* 진한 파란색 배경 */
    color: #ffffff;             /* 흰색 글씨 */
    border-color: #2B6DF9;      /* 테두리도 같은 색으로 */
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
}



/* --- 탭 메뉴 스타일 (버튼형) --- */

/* 탭 버튼들을 감싸는 컨테이너 */
.tab-nav-container {
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    align-items: center;
    flex-wrap: wrap;         /* 화면이 좁으면 줄바꿈 */
    gap: 16px;               /* 버튼 사이 간격 */
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb; /* 하단 구분선 (선택사항) */
}

/* 탭 버튼 공통 스타일 (비활성 상태 기준) */
.tab-btn {
    width: 350px;
    height: 54px;

    font-family: 'Pretendard',sans-serif;;
    font-size: 20px;      /* 2. Size: 30px (기존 20px에서 변경) */
    font-weight: 400;     /* 3. Weight: Regular는 숫자 400입니다 (기존 700에서 변경) */
    line-height: 100%;    /* 4. Line height: 100% */
    letter-spacing: 0;    /* 5. Letter spacing: 0% */


    color: #4b5563;            /* 진한 회색 글씨 */
    background-color: #ffffff; /* 흰색 배경 */
    padding: 0px 0px;        /* 안쪽 여백 (버튼 크기 결정) */
    
    border: 1px solid #d1d5db; /* 회색 테두리 */
    border-radius: 9999px;     /* 둥근 알약 모양 */
    

    /* 1. 줄바꿈 금지 (필수) */
    white-space: nowrap;

    /* 2. 넘치는 글자 숨기기 (안전장치 1) */
    overflow: hidden;

    /* 3. 넘치면 말줄임표(...) 처리 (안전장치 2) */
    text-overflow: ellipsis;

    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
    
}

/* 마우스 올렸을 때 (Hover) */
.tab-btn:hover {
    background-color: #f9fafb; /* 아주 연한 회색 배경 */
    border-color: #9ca3af;     /* 테두리 조금 진하게 */
    color: #111827;            /* 글자 검게 */
}

/* 활성화된 탭 (Active) - 파란색 버튼 */
.tab-btn.active {
    background-color: #2563eb; /* 파란색 배경 (Primary Color) */
    color: #ffffff;            /* 흰색 글씨 */
    border-color: #2563eb;     /* 파란색 테두리 */

    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3); /* 그림자 효과 */

    font-family: 'Pretendard',sans-serif;;
    font-size: 20px;      /* 2. Size: 30px (기존 20px에서 변경) */
    font-weight: 700;     /* 3. Weight: Regular는 숫자 400입니다 (기존 700에서 변경) */
    line-height: 100%;    /* 4. Line height: 100% */
    letter-spacing: 0;    /* 5. Letter spacing: 0% */
    text-align: center;
}



.tab-func-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 50px;
  font-weight: 700;       /* Bold */
  line-height: 100%;
  letter-spacing: 0%;
  color: rgb(0, 0, 0);           /* text-white */
}
.tab-func-desc {
  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 400;       /* Bold */
  line-height: 100%;
  letter-spacing: 0%;
  color: rgb(0, 0, 0);           /* text-white */
}

.tab-func-analysis-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 30px;
  font-weight: 700;       /* Bold */
  line-height: 100%;
  letter-spacing: 0%;
  color: rgb(0, 0, 0);           /* text-white */
  text-align: center;
  margin-top: 100px;
}
.tab-func-analysis-desc {
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 400;       /* Bold */
  line-height: 100%;
  letter-spacing: 0%;
  color: rgb(0, 0, 0);           /* text-white */
  
}








/* 다운로드 버튼 공통 스타일 */
.download-btn {
    /* 1. 크기 및 배치 */
    width: 100%;
    max-width: 644px;
    height: 76px;
    margin-top: 32px;  /* mt-8 (8 * 4px = 32px) */
    
    /* 2. 플렉스박스 (내부 내용 중앙 정렬) */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 3. 색상 및 모양 */
    background-color: #f3e8ff; /* bg-purple-100 */
    border-radius: 9999px;     /* rounded-full */
    border: none;              /* 기본 테두리 제거 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */

    /* 4. 폰트 설정 */
    font-family: 'Pretendard', sans-serif;
    font-size: 30px;
    font-weight: 700;       /* Bold */
    line-height: 100%;
    letter-spacing: 0%;
    color: rgb(0, 0, 0);           /* text-white */

    /* 1. 줄바꿈 금지 (필수) */
    white-space: nowrap;

    /* 2. 넘치는 글자 숨기기 (안전장치 1) */
    overflow: hidden;

    /* 3. 넘치면 말줄임표(...) 처리 (안전장치 2) */
    text-overflow: ellipsis;

    /* 5. 동작 및 효과 */
    cursor: pointer;
    transition: background-color 0.2s ease; /* transition-colors */
}

/* 마우스 올렸을 때 (hover) - 단, 비활성화(disabled) 상태가 아닐 때만 */
.download-btn:hover:not(:disabled) {
    background-color: #e9d5ff; /* hover:bg-purple-200 */
}

/* 비활성화 (disabled) 상태 스타일 */
.download-btn:disabled {
    opacity: 0.6;          /* 흐리게 처리 */
    cursor: not-allowed;   /* 금지 커서 */
    background-color: #E0DDFF; /* 회색조로 변경하고 싶다면 추가 (선택사항) */
    color: #000000;            /* 텍스트도 회색으로 (선택사항) */
}

/* --------------------------------------------------------
   [추가] 스피너(로딩) 애니메이션 정의 
   (Tailwind의 'animate-spin'을 CSS로 직접 구현할 경우 필요)
   -------------------------------------------------------- */
.loading-spinner {
    animation: spin 1s linear infinite;
    /* Tailwind 'text-[#202975]' 색상 대응 */
    color: #202975; 
    margin-right: 12px; /* mr-3 */
    margin-left: -4px;  /* -ml-1 */
    width: 20px;        /* h-5 */
    height: 20px;       /* w-5 */
}









/* --- [NEW] 인트로 및 유틸리티 스타일 추가 --- */
.intro-card-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 25px;
  font-weight: 400;       /* Bold */
  line-height: 100%;
  letter-spacing: 0%;
  margin-top: 0px;
  color: rgb(0, 0, 0);           /* text-white */
}
.intro-card-desc {
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 400;       /* Bold */
  line-height: 120%;
  letter-spacing: 0%;
  margin-top: 16px;
  color: rgb(0, 0, 0);           /* text-white */
}
* {
    box-sizing: border-box; /* 테두리 포함 크기 계산 (필수) */
}

body {
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* 배경색 (연한 회색 예시) */
}

/* 2. 전체 레이아웃 컨테이너 (PC 화면 중앙 정렬용) */
.intro-container {
    width: 100%;
    max-width: 1920px; /* [핵심] 폭을 1920px로 한정 */
    margin: 0 auto;    /* 화면 중앙에 배치 */
    padding: 40px 20px; /* 상하 40px, 좌우 20px 여백 */
    
    /* 혹시라도 1920px를 넘가는 요소가 생기면 숨김 (안전장치) */
    overflow: hidden;
}

/* 3. 카드 그리드 (카드가 여러 개일 때 가로로 배치) */
.card-container {
    display: flex;          /* 가로 정렬 */
    flex-wrap: nowrap;      /* 줄바꿈 금지 */
    overflow-x: auto;       /* 가로 스크롤 생성 */
    gap: 24px;              /* 카드 사이 간격 */
    
    /* [핵심] 호버 효과(translateY -10px)가 잘리지 않도록 위쪽에 여백 확보 */
    /* 위쪽 20px, 아래쪽 40px(그림자 공간) */
    padding-top: 20px;      
    padding-bottom: 40px;   
    padding-left: 10px;     /* 스크롤 시작점 여백 */
    padding-right: 10px;    /* 스크롤 끝점 여백 */

    /* 스크롤 부드럽게 */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.intro-card-main-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 50px;       /* text-2xl */
    font-weight: 700;      /* font-bold */
    line-height: 100%;
    letter-spacing: 0.0em;
    color: #000000;        
    margin-top: 10px;   /* mb-6 */
    text-align: center;
}
.intro-card-main-sub-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;       /* text-2xl */
    font-weight: 400;      /* font-bold */
    color: #000000;        
    line-height: 100%;
    letter-spacing: 0%;
    margin-top: 5px;   /* mb-6 */
    margin-bottom: 10px;   /* mb-6 */
    text-align: center;
}

.info-message_desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 10px;       /* text-2xl */
    font-weight: 400;      /* font-bold */
    color: #000000;        
    line-height: 100%;
    letter-spacing: 0%;
    text-align: left;
}



/* =========================================
   [카드 컴포넌트 스타일] - 피그마 스펙 적용
   ========================================= */

.intro-card {
/* 350px 고정 크기 유지 */
    width: 350px;
    height: 500px;
    
    /* [중요] 공간이 부족해도 찌그러지지 않도록 방어 */
    flex-shrink: 0; 
    
    /* 스크롤 멈춤 지점 설정 */
    scroll-snap-align: start;
    
    /* (나머지 스타일 동일) */
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* 가로 스크롤바 숨기기 (크롬, 사파리, 오페라) */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
/* 가로 스크롤바 숨기기 (IE, 엣지, 파이어폭스) */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.intro-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}


.intro-card-img {
    width: 100%;
    /* flex: 1 -> 텍스트 공간을 뺀 나머지 높이를 이미지가 모두 차지함 */
    height: 250px;
    /*#flex: 1;*/ 
    object-fit: cover; /* 비율 유지하며 꽉 채움 */
    
    border-radius: 12px;
    border: 1px solid #000000; /* 요청하신 검은 테두리 유지 */
    margin-bottom: 20px;       /* 텍스트와 간격 */
}
.intro-card-text {
    flex: none; /* 크기 자동 계산 */
}



/* 비디오 배경용 오버레이 (텍스트 가독성을 위해 어둡게 처리) */
.bg-overlay {
    background: rgba(0, 0, 0, 0.0); 
}


.bg-responsive {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 반응형 핵심 코드 */
    object-position: center; /* 중앙 정렬 */
}


/* 전체 컨테이너: 크기 조절은 여기서 하세요 */
.ai-loader-box {
  position: relative; /* 자식 요소들의 기준점 */
  width: 300px;       /* 요청하신 300px */
  height: 300px;
  display: inline-block; /* 글자처럼 배치되거나 필요 시 block으로 변경 */
}

/* 1. 배경에서 회전할 이미지 스타일 */
/* 글자가 로딩이 되는 동안 계속 돌아감.  */
/* 
.spinner-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; // 이미지 비율 유지 
  // 13초 동안 무한 회전 
  animation: spin 13s linear infinite;

  z-index: 1;
}*/

.spinner-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    /* 모든 GIF는 기본적으로 숨김 */
    opacity: 0;
    /* 90초 주기로 무한 반복 */
    animation: cycle-gifs 90s infinite;
}

/* 각 GIF에 순차적 지연 시간 부여 (30초씩) */
.spinner-ring:nth-child(1) {
    animation-delay: 0s;
}

.spinner-ring:nth-child(2) {
    animation-delay: 30s;
}

.spinner-ring:nth-child(3) {
    animation-delay: 60s;
}

@keyframes cycle-gifs {
    /* 0% ~ 33.33% (약 30초) 동안만 보임 */
    0%, 33.32% {
        opacity: 1;
    }
    /* 그 외의 시간에는 숨김 */
    33.33%, 100% {
        opacity: 0;
    }
}



/* 2. 중앙에 고정될 이미지 스타일 */
.center-logo {
  position: absolute;  /* 부모 기준 절대 위치 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 정확히 정중앙으로 이동 */
  
  /* 중앙 이미지 크기 조절 (필요에 따라 % 또는 px로 수정 가능) */
  max-width: 50%;      
  max-height: 50%;
  z-index: 10;         /* 회전하는 이미지보다 위에 오도록 */
}
/* [최종 CSS] z-index를 강력하게 지정 */
.center-logo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 50%;
    max-height: 50%;
    z-index: 9999 !important; /* 무조건 맨 위에 뜨도록 설정 */
    display: block !important; /* 숨김 방지 */
}

/* 회전 애니메이션 키프레임 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/*
.video-center-crop {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%); //정확히 중앙을 기준으로 자름
    object-fit: cover;
}
*/



/* --- 팝업 전용 스타일 --- */

/* 1. 팝업 등장 애니메이션 (아래에서 위로 스르륵) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out forwards;
}

/* 2. 팝업 내부 스크롤바 예쁘게 꾸미기 (Custom Scrollbar) */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d1d5db; /* 회색 핸들 */
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #9ca3af; /* 호버 시 진한 회색 */
}


/* =========================================
   Custom Slider Style (뷰어 투명도 조절바)
   ========================================= */

   .custom-slider {
    -webkit-appearance: none; 
    appearance: none;
    width: 100%; 
    background: transparent; 
    height: 20px; /* 터치 영역 확보 */
}

.custom-slider:focus { 
    outline: none; 
}

/* 슬라이더 손잡이 (Thumb) */
.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    height: 18px; 
    width: 18px;
    border-radius: 50%;
    background: #2563eb; /* 파란색 핸들 */
    cursor: pointer;
    margin-top: -6px; /* 트랙 중앙 정렬 */
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
    transition: background 0.2s, transform 0.2s;
}

.custom-slider::-webkit-slider-thumb:hover {
    background: #1d4ed8; /* 호버 시 진한 파랑 */
    transform: scale(1.1);
}

/* 슬라이더 트랙 (Track) */
.custom-slider::-webkit-slider-runnable-track {
    width: 100%; 
    height: 6px;
    cursor: pointer;
    background: #93c5fd; /* 연한 파란색 트랙 */
    border-radius: 4px;
}