@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

html { 
    scroll-behavior: smooth;
    /* 커스텀 마우스 커서 연동을 위해 데스크탑 브라우저 디폴트 커서 숨김 */
    cursor: none !important;
	overflow-x: hidden;
    max-width: 100%;
}

/* 인터랙티브 요소에 대한 강제 커서 제어 */
a, button, select, input, .hover-trigger, .magnetic-btn {
    cursor: none;
}

body {
    font-family: 'Pretendard', sans-serif;
    background-color: #FAFAFA;
    color: #111827;
    overflow-x: hidden;
	max-width: 100%;
	cursor: none !important;
}

/* 터치 지원 디바이스(모바일/태블릿)에서는 기본 시스템 커서 활성화 */
@media (pointer: coarse) {
    html { cursor: auto; }
    .custom-cursor, .custom-cursor-follower { display: none !important; }
}

/* --- 커스텀 커서 스타일 --- */
.custom-cursor {
    position: fixed;
    top: 0; left: 0;
    color: #FF6B00;
    font-size: 22px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.custom-cursor-follower {
    position: fixed;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border: 1px solid rgba(255, 107, 0, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, border-color 0.3s, background-color 0.3s;
}

/* 버튼 및 타겟 링크 호버 시 커서 변화 효과 */
.cursor-hover .custom-cursor {
    transform: translate(-50%, -50%) scale(1.5);
    color: #E66000;
}
.cursor-hover .custom-cursor-follower {
    width: 60px; height: 60px;
    background-color: rgba(255, 107, 0, 0.1);
    border-color: #FF6B00;
    backdrop-filter: blur(2px);
}

/* --- [수정] 대화형 가변 스크롤바 적용 --- */
::-webkit-scrollbar { 
    width: 10px; /* 스크롤바 작동 반경 영역 확보 */
}
::-webkit-scrollbar-track { 
    background: #111827; 
}
::-webkit-scrollbar-thumb { 
    background-color: #FF6B00; 
    border-radius: 100px;
    background-clip: padding-box;
    /* 양 옆에 투명한 테두리를 많이 주어 디폴트 상태는 2px처럼 보이게 처리 (10px - 4px - 4px) */
    border: 4px solid transparent; 
    transition: border 0.25s ease-in-out, background-color 0.25s ease-in-out;
}
::-webkit-scrollbar-thumb:hover { 
    background-color: #E66000; 
    /* 마우스를 올렸을 때는 투명한 테두리를 축소하여 6px 두께로 확장 (10px - 2px - 2px) */
    border: 2px solid transparent; 
}
/* 미세 아날로그 노이즈 오버레이 패턴 */
.noise-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9000;
    opacity: 0.03;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

/* 세로 읽기 및 인디케이터 유틸리티 */
.writing-vertical-rl { writing-mode: vertical-rl; rotate: 180deg; }
@keyframes scrollLine {
    0% { transform: translateY(-100%); }
    50% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* 3D 틸트 효과 레이아웃 유지 */
.transform-style-3d { transform-style: preserve-3d; }
.translate-z-10 { transform: translateZ(10px); }
.translate-z-20 { transform: translateZ(30px); }
.translate-z-30 { transform: translateZ(50px); }

/* 모달 및 정밀 썸네일 애니메이션 정렬 */
#notice-modal {
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#notice-modal .scale-95 {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 끊김 없는 마키 롤링 효과 */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

.about-pattern-bg {
    background-image: url('imgs/pattern05.png');
    background-repeat: repeat;
}