@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=Pragati+Narrow:wght@400;700&display=swap');

.sound_only {
    display: none;
}

/* 기본 폰트 설정 - Pragati Narrow가 아닌 경우에만 적용 */
body, p, div, span, a, button, input, textarea, select, label, h1, h2, h3, h4, h5, h6, li, ul, ol, table, td, th, tr {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}

/* Pragati Narrow 폰트 클래스 - 최고 우선순위 */
.font-pragati,
.font-pragati *,
.font-pragati div,
.font-pragati span {
    font-family: 'Pragati Narrow', sans-serif !important;
}


/* 체크박스 커스텀 스타일 - 오버라이드 */   
input[type="checkbox"]:checked + label {
    color:#FFCA3A;
}

input[type="checkbox"]:checked + label span {
    background:url(./img/chk.png) no-repeat 50% 50% #FFCA3A;
}

                    
/*애니메이션 - opacity fade*/
.fade {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.hidden-opacity {
    opacity: 0;
    transform: translateX(-2rem);
}

.visible-opacity {
    opacity: 1;
    transform: translateX(0);
}

/* 커스텀 마우스 커서 - 10px 흰색 원형 */
* {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="white"/></svg>'), auto;
}

/* 커서 팔로워 이미지 */
.cursor-follower {
    position: fixed;
    width: 72px;
    height: 72px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 9999;    
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    display: block;
    /* 이미지가 없을 경우를 위한 대체 스타일 */
    /* background-color: rgba(255, 255, 255, 0.8);
    border: 2px solid #333;
    border-radius: 4px; */
}

/* 포트폴리오 슬라이드 커서 효과 */
.portfolio-cursor {
    position: fixed;
    width: 108px;
    height: 108px;
    background: rgba(255, 255, 255);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pragati Narrow', sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.portfolio-cursor.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.portfolio-cursor.hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}

/* 멤버소개 초기 숨김 상태 */
.member-name-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.member-name-char.animate {
    opacity: 1;
    transform: translateY(0);
}

.member-content-typing {
    opacity: 0;
    white-space: normal;
    word-wrap: break-word;
    transition: opacity 0.5s ease-out;
}

.member-content-typing.animate {
    opacity: 1;
}

/* 멤버 카드 초기 숨김 상태 */
.member-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    position: relative;
    z-index: 20;
}

.member-card.animate {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s ease-out;
    position: relative;
    z-index: 20;
}