/* 기본 스타일 초기화 및 변수 선언 */
:root {
    /* 배경 및 구조 */
    --bg-color: #030407;        /* 옵시디언 블랙 (가장 깊고 세련된 블랙) */
    --card-bg: #0B0D14;         /* 다크 차콜 (차가운 그레이 톤) */
    --navbar-bg: rgba(3, 4, 7, 0.85); /* 내비게이션 바 (반투명) */
    --border-color: #1A1D27;    /* 아주 미세한 테두리 */

    /* 텍스트 */
    --text-main: #F4F4F6;       /* 부드러운 화이트 */
    --text-muted: #8B90A0;      /* 메탈릭 그레이 (세련된 서브 텍스트) */

    /* 포인트 컬러 (강조) */
    --accent-primary: #3B82F6;  /* 코발트 블루 (스마트하고 미래지향적인 느낌) */
    --accent-secondary: #8B5CF6;/* 일렉트릭 퍼플 (트렌디한 서브 컬러) */
    --accent-gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(3, 4, 7, 0) 0%, var(--bg-color) 80%),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    background-attachment: fixed;
    color: var(--text-main);
    word-break: keep-all; /* 한글 단어 단위로 줄바꿈 (모바일 텍스트 정렬 최적화) */
    overflow-wrap: break-word; /* 긴 단어가 화면을 벗어나지 않도록 안전장치 추가 */
    line-height: 1.6;
    overflow-x: hidden; /* 배경 빛이 화면 밖으로 나갈 때 가로 스크롤 방지 */
    position: relative;
}

/* 전체 화면에 떠다니는 앰비언트 네온 배경 추가 */
body::before, body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(150px);
    z-index: -1;
    opacity: 0.85;
    animation: floatAmbient 20s infinite alternate ease-in-out;
    pointer-events: none; /* 배경이 클릭을 방해하지 않도록 설정 */
    will-change: transform; /* 애니메이션 렌더링 GPU 가속 최적화 */
}

body::before {
    top: -20%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
}

body::after {
    bottom: -20%;
    right: -10%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%);
    animation-delay: -10s;
    animation-direction: alternate-reverse;
}

@keyframes floatAmbient {
    0% { transform: translate(0, 0) scale(0.8); }
    33% { transform: translate(5vw, 10vh) scale(1.1); }
    66% { transform: translate(-10vw, 5vh) scale(0.9); }
    100% { transform: translate(10vw, -15vh) scale(1.2); }
}

/* 상단 내비게이션 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
    position: sticky;
    top: 0;
    background: var(--navbar-bg);
    backdrop-filter: blur(10px);
    z-index: 100;
}

.navbar .logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.navbar nav a {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-muted);
    text-decoration: none;
    margin-left: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.navbar nav a:hover, .navbar nav a.active {
    color: var(--accent-primary);
}

/* 히어로 섹션 */
.hero {
    height: 55vh;
    display: flex;
    align-items: center;
    padding: 0 10%;
    position: relative;
    overflow: hidden;
}

/* 히어로 배경 핑크/마젠타 네온 효과 추가 */
.hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    z-index: -1;
    filter: blur(120px);
    animation: pulseGlow 5s infinite alternate ease-in-out;
    pointer-events: none;
}

@keyframes pulseGlow {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* 최신 CSS 기법: 그라데이션 각도 자체를 부드럽게 회전시키는 속성 정의 */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.hero-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -2px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(30px);
    animation: titleReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

@keyframes titleReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 텍스트 그라데이션 강조 */
.text-gradient {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* 포트폴리오 섹션 */
.portfolio-section {
    padding: 60px 10%;
}

.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-bottom: 40px;
    font-weight: 700;
}

/* 포트폴리오 필터 버튼 */
.filter-container {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.filter-btn.active {
    background: var(--accent-primary);
    color: var(--bg-color);
    border-color: var(--accent-primary);
}

/* 반응형 그리드 시스템 (화면 크기에 따라 1~3열 자동 조절) */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

/* 비디오 카드 디자인 */
.video-card {
    background-color: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--border-color);
    animation: fadeInUp 0.8s ease backwards;
    cursor: pointer;
    position: relative;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rotateGradient {
    to { --angle: 360deg; }
}

.video-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8); /* 조잡한 블루 섀도우를 빼고 깊이감 있는 블랙 섀도우로 세련되게 변경 */
}

.video-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px; /* 선 굵기를 1px로 줄여 날렵하고 하이엔드적인 느낌 강조 */
    /* 빛의 꼬리가 따라다니는 듯한 세련된 그라데이션 */
    background: conic-gradient(from var(--angle), transparent 60%, var(--accent-primary) 90%, var(--accent-secondary) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.video-card:hover::after {
    opacity: 1;
    animation: rotateGradient 2.5s linear infinite;
}

/* 16:9 반응형 영상 비율 유지 */
.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
}

/* 영상 썸네일 및 플레이 오버레이 */
.video-wrapper img.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.video-card:hover .video-wrapper img.thumbnail {
    transform: scale(1.05);
}

/* 모달 팝업 스타일 */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease;
}

.modal.show {
    visibility: visible;
    opacity: 1;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 1100px;
    background: #000;
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.2);
    border: 1px solid var(--border-color);
}

/* 모달 내부 영상 래퍼 */
.modal-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 비율 유지 (모바일 호환성을 위한 대체 기법) */
    height: 0;
    border-radius: 12px;
    overflow: hidden;
    -webkit-transform: translateZ(0); /* iOS Safari 렌더링(검은 화면) 버그 방지 */
    transform: translateZ(0);
}

.modal-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.close-modal {
    position: absolute;
    top: -40px;
    right: 0;
    color: var(--text-muted);
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close-modal:hover {
    color: var(--text-main);
}

/* 영상 정보 텍스트 */
.video-info {
    padding: 20px 10px 5px;
}

.video-info .category {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 10px;
}

.video-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.video-info p {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 400;
}

/* CONTACT 섹션 스타일 */
.contact-section {
    padding: 80px 10%;
}

.contact-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.contact-content p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.contact-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.contact-btn {
    display: inline-block;
    padding: 15px 35px;
    background: var(--accent-gradient);
    color: var(--text-main);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.25);
}

.contact-btn.alt {
    background: transparent;
    border: 1px solid var(--border-color);
}

.contact-btn.alt:hover {
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* 푸터 */
footer {
    text-align: center;
    padding: 80px 0 40px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--border-color);
    margin-top: 100px;
}

/* 패밀리 사이트 드롭다운 */
.family-site {
    margin-top: 30px;
}

#family-site-select {
    background-color: var(--card-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s ease, color 0.3s ease;
}

#family-site-select:hover, #family-site-select:focus {
    border-color: var(--accent-primary);
    color: var(--text-main);
}

/* 모바일 최적화 반응형 레이아웃 */
@media (max-width: 768px) {
    /* 상단 내비게이션 */
    .navbar { flex-direction: column; gap: 15px; padding: 20px 5%; }
    .navbar nav a { margin: 0 10px; font-size: 0.85rem; }

    /* 히어로 섹션 */
    .hero { height: auto; padding: 140px 5% 80px; text-align: center; }
    .hero-content { margin: 0 auto; }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content h1 br, .contact-content h2 br, .contact-content p br { display: none; } /* 모바일에서 제목 및 p태그 강제 줄바꿈 해제 */

    /* 포트폴리오 섹션 */
    .portfolio-section { padding: 40px 5%; }
    .section-title { text-align: center; margin-bottom: 30px; }
    .filter-container { justify-content: center; gap: 10px; }
    .filter-btn { padding: 6px 16px; font-size: 0.8rem; }
    .grid-container { grid-template-columns: 1fr; gap: 30px; }

    /* CONTACT 섹션 */
    .contact-section { padding: 60px 5%; text-align: center; }
    .contact-content h2 { font-size: 2rem; }
    .contact-content p { font-size: 1rem; }
    .contact-buttons { justify-content: center; }
    .contact-btn { padding: 12px 25px; font-size: 0.85rem; }

    /* 팝업 모달 */
    .close-modal { top: -40px; right: 5px; font-size: 30px; }
}