/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Manrope', '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;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

/* iframe 최적화 */
body.iframe-mode {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* 팝업 내부에서 스크롤 최적화 */
html {
    scroll-behavior: smooth;
}

/* Reveal Animation Styles */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* Portfolio Image Section - 간격 완전 제거 */
.portfolio-image-section {
    background: #fafafa;
    padding: 0; /* 모든 패딩 제거 */
    margin: 0; /* 모든 마진 제거 */
    min-height: auto; /* 자동 높이로 변경 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    line-height: 0; /* 브라우저 기본 간격 제거 */
}

.portfolio-image-container {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column; /* 세로로 나열 */
    justify-content: center;
    align-items: center;
    margin: 0; /* 마진 제거 */
    padding: 0; /* 패딩 제거 */
    line-height: 0; /* 브라우저 기본 간격 제거 */
    gap: 0; /* 이미지 간격 제거 */
}

.portfolio-main-image {
    width: 100%;
    max-width: 95vw;
    height: auto;
    object-fit: cover;
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
    display: block;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* 애니메이션 활성화 */
.portfolio-image-section .reveal.active .portfolio-main-image {
    opacity: 1;
    transform: translateY(0);
}

/* 연속된 포트폴리오 이미지 섹션 간격 제거 */
.portfolio-image-section + .portfolio-image-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* MASKARITE BROOCH Section */
.maskarite-section {
    background: #fafafa;
    color: #000000;
    padding: 120px 80px; /* 좌우 여백을 동일하게 설정 */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.maskarite-inner {
    max-width: 1400px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start; /* center에서 start로 변경하여 자연스러운 정렬 */
    min-height: 60vh; /* 최소 높이 설정으로 수직 공간 확보 */
}

.maskarite-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-start; /* 좌측은 상단 정렬 유지 */
    align-self: start; /* 그리드 내에서 상단 정렬 */
}

.maskarite-number {
    font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
    font-size: 8rem;
    font-weight: 900;
    line-height: 0.8;
    color: #000000;
    margin-bottom: 20px;
    letter-spacing: -0.05em;
}

.maskarite-title {
    font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 0.85;
    color: #000000;
    margin: 0;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.maskarite-right {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: end; /* 그리드 내에서 하단 정렬 강화 */
    margin-bottom: -20px; /* 하단 여백 조정으로 더 아래로 배치 */
}

.maskarite-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: right;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-label {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.info-value {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #000000;
    line-height: 1.4;
    opacity: 0.8;
}

/* MASKARITE Section Animations */
.maskarite-number {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.maskarite-title {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.info-item {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-item:nth-child(1) {
    transition-delay: 0.4s;
}

.info-item:nth-child(2) {
    transition-delay: 0.6s;
}

.info-item:nth-child(3) {
    transition-delay: 0.8s;
}

/* Active state for animations */
.maskarite-section.reveal.active .maskarite-number,
.maskarite-section.reveal.active .maskarite-title,
.maskarite-section.reveal.active .info-item,
.maskarite-section.reveal.active .maskarite-portfolio-image {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* 반응형 디자인 */
@media (max-width: 1024px) {
    .portfolio-image-section {
        padding: 0; /* 모든 패딩 제거 */
        margin: 0; /* 모든 마진 제거 */
        min-height: auto; /* 자동 높이 */
    }
    
    .portfolio-main-image {
        max-width: 96vw;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    .portfolio-image-section {
        padding: 0; /* 모든 패딩 제거 */
        margin: 0; /* 모든 마진 제거 */
        min-height: auto; /* 자동 높이 */
    }
    
    .portfolio-main-image {
        max-width: 97vw;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 480px) {
    .portfolio-image-section {
        padding: 0; /* 모든 패딩 제거 */
        margin: 0; /* 모든 마진 제거 */
        min-height: auto; /* 자동 높이 */
    }
    
    .portfolio-main-image {
        max-width: 98vw;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* 반응형 디자인 */
@media (max-width: 1024px) {
    .hero-section { transform: translateX(30px); } /* 태블릿에서는 조금 덜 이동 */
    .hero-left {
        padding: 40px 60px 40px 60px; /* 좌우 여백을 동일하게 설정 */
    }
    
    .location-text {
        font-size: 16px;
    }
    
    .service-item {
        font-size: 14px;
    }

    .about-left {
        padding: 60px 60px; /* 좌우 여백을 동일하게 설정 */
    }

    .profile-image-container {
        width: 250px;
        height: 320px;
    }

    .hello-title {
        font-size: 2.5rem;
    }
    
    .location-text,
    .service-text {
        font-size: 14px;
    }

    .about-description p {
        font-size: 0.9rem;
    }

    .works-left {
        padding: 60px 40px;
    }

    .works-title {
        font-size: 56px;
    }

    .works-description p {
        font-size: 13px;
    }

    .works-description-kr p {
        font-size: 12px;
    }

    .maskarite-inner {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
        min-height: auto; /* 모바일에서는 최소 높이 해제 */
    }
    
    .maskarite-left {
        align-self: center; /* 모바일에서는 중앙 정렬 */
    }
    
    .maskarite-number {
        font-size: 6rem;
    }
    
    .maskarite-title {
        font-size: 3.5rem;
    }
    
    .maskarite-right {
        justify-content: center;
        align-self: center; /* 모바일에서는 중앙 정렬 */
        margin-bottom: 0; /* 모바일에서는 여백 초기화 */
    }
    
    .maskarite-info {
        text-align: center;
        gap: 30px;
    }
    
    /* Portfolio Image Section 1024px 반응형 - 간격 완전 제거 */
    .portfolio-image-section {
        padding: 0; /* 모든 패딩 제거 */
        margin: 0; /* 모든 마진 제거 */
        min-height: auto; /* 자동 높이 */
    }
    
    .portfolio-main-image {
        max-width: 96vw;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        flex-direction: column;
        transform: none; /* 모바일에서는 이동 제거 */
    }
    
    .hero-left {
        width: 100%;
        height: 50vh;
        padding: 40px 40px; /* 좌우 여백을 동일하게 설정 */
    }
    
    .hero-right {
        width: 100%;
        height: 50vh;
    }
    
    .location-section {
        margin: 20px 0;
    }

    .portfolio-floating-btn {
        bottom: 20px;
        right: 20px;
    }

    .portfolio-btn {
        padding: 12px 20px;
        font-size: 13px;
    }

    .about-section {
        flex-direction: column;
        height: auto; /* 고정 높이 해제하여 텍스트 잘림 방지 */
    }

    .about-left {
        width: 100%;
        height: auto; /* 고정 높이 해제 */
        padding: 40px 40px; /* 좌우 여백을 동일하게 설정 */
    }

    .about-right {
        width: 100%;
        height: auto; /* 고정 높이 해제 */
    }

    /* Skills Mobile Responsive */
    .skills-container { grid-template-columns: 1fr; gap: 0; max-width: 100%; }
    .skills-col { gap: 32px; }
    
    .skills-title {
        font-size: 1.3rem;
        margin-bottom: 25px;
    }
    
    .skill-name {
        font-size: 0.95rem;
    }
    
    .skill-year,
    .skill-level {
        font-size: 0.85rem;
    }
    
    .skill-desc {
        font-size: 0.85rem;
    }
    
    .analogue-item {
        font-size: 0.95rem;
    }
    
    .dot {
        width: 10px;
        height: 10px;
    }

    .about-shader-container { min-height: 300px; }

    .about-title {
        font-size: 36px;
    }

    .about-description p {
        font-size: 12px;
    }

    .works-section {
        flex-direction: column;
        height: auto; /* 고정 높이 해제하여 텍스트 잘림 방지 */
    }

    .works-left {
        width: 100%;
        height: auto; /* 고정 높이 해제 */
        padding: 40px;
    }

    .works-right {
        width: 100%;
        height: auto; /* 고정 높이 해제 */
    }

    .works-3d-container { min-height: 300px; }

    .works-title {
        font-size: 48px;
    }

    .works-description p {
        font-size: 12px;
    }

    .works-description-kr p {
        font-size: 11px;
    }

    .maskarite-section { 
        padding: 80px 20px 80px 20px; /* 좌우 여백을 동일하게 설정 */
        min-height: auto;
    }
    
    .maskarite-inner {
        min-height: auto; /* 768px에서도 최소 높이 해제 */
    }
    
    .maskarite-left {
        align-self: center; /* 768px에서도 중앙 정렬 */
    }
    
    .maskarite-right {
        align-self: center; /* 768px에서도 중앙 정렬 */
        margin-bottom: 0; /* 768px에서도 여백 초기화 */
    }
    
    .maskarite-number {
        font-size: 4.5rem;
    }
    
    .maskarite-title {
        font-size: 2.8rem;
    }
    
    .maskarite-info {
        gap: 25px;
    }
    
    .info-label {
        font-size: 0.9rem;
    }
    
    .info-value {
        font-size: 0.8rem;
    }
    
    /* Portfolio Image Section 768px 반응형 - 간격 완전 제거 */
    .portfolio-image-section {
        padding: 0; /* 모든 패딩 제거 */
        margin: 0; /* 모든 마진 제거 */
        min-height: auto; /* 자동 높이 */
    }
    
    .portfolio-main-image {
        max-width: 97vw;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mobile section spacing to avoid overlap */
    .hero-section { margin-bottom: 150px; }
    .about-section { margin-top: 300px; margin-bottom: 300px; }
    .works-section { margin-top: 300px; margin-bottom: 300px; }
}

@media (max-width: 480px) {
    .hero-left {
        padding: 30px 20px 30px 20px; /* 좌우 여백을 동일하게 설정 */
    }
    
    .logo-text {
        font-size: 12px;
    }
    
    .location-text {
        font-size: 14px;
    }
    
    .service-item {
        font-size: 12px;
    }

    .portfolio-floating-btn {
        bottom: 1000px !important;
        right: 60px !important;
    }

    .portfolio-btn {
        padding: 10px 16px;
        font-size: 12px;
        gap: 8px;
    }

    .btn-text {
        font-size: 12px;
    }

    .btn-arrow {
        font-size: 14px;
    }

    .about-left {
        padding: 30px 20px 30px 20px; /* 좌우 여백을 동일하게 설정 */
    }

    .profile-image-container {
        width: 200px;
        height: 260px;
    }

    .hello-title {
        font-size: 2rem;
    }
    
    .location-text,
    .service-text {
        font-size: 12px;
    }

    .about-description p {
        font-size: 0.85rem;
    }

    .works-left {
        padding: 30px 20px;
    }

    .works-title {
        font-size: 36px;
    }

    .works-year {
        font-size: 14px;
    }

    .works-description p {
        font-size: 11px;
    }

    .works-description-kr p {
        font-size: 10px;
    }

    .works-caption {
        font-size: 10px;
    }

    .maskarite-number {
        font-size: 3.5rem;
    }
    
    .maskarite-title {
        font-size: 2.2rem;
    }
    
    .maskarite-section {
        padding: 60px 15px 60px 15px; /* 좌우 여백을 동일하게 설정 */
    }
    
    .maskarite-inner {
        gap: 40px;
        min-height: auto; /* 480px에서도 최소 높이 해제 */
    }
    
    .maskarite-left {
        align-self: center; /* 480px에서도 중앙 정렬 */
    }
    
    .maskarite-right {
        align-self: center; /* 480px에서도 중앙 정렬 */
        margin-bottom: 0; /* 480px에서도 여백 초기화 */
    }
    
    /* Portfolio Image Section 480px 반응형 - 간격 완전 제거 */
    .portfolio-image-section {
        padding: 0; /* 모든 패딩 제거 */
        margin: 0; /* 모든 마진 제거 */
        min-height: auto; /* 자동 높이 */
    }
    
    .portfolio-main-image {
        max-width: 98vw;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        margin: 0 !important;
        padding: 0 !important;
    }
}