/* Montserrat 폰트 */
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 300;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
            unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 300;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
            unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 300;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
            unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 300;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
            unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 300;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
            unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
            unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
            unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
            unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 700;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
            unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 700;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
            unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 700;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
            unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 700;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
            unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
        @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 700;
            src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }

        /* 기본 스타일 및 리셋 */
        body {
            font-family: 'Montserrat', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #ffffff;
            color: #000000;
        }

        /* 컨테이너: 전체 너비 제한 및 중앙 정렬 */
        .container {
            width: 85%;
            max-width: 1400px; /* 큰 화면에 맞게 확장 */
            margin: 0 auto;
            padding: 20px 0;
        }

        /* 1. 헤더 (상단 내비게이션 및 이름) */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 40px 0;
        }

        header .nav-links {
            display: flex;
            gap: 40px;
        }

        header .nav-links a {
            text-decoration: none;
            color: #000000;
            font-size: 16px;
            font-weight: normal; /* 이미지와 동일하게 설정 */
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        header .site-title {
            font-size: 30px;
            font-weight: bold;
            letter-spacing: 2px;
            white-space: nowrap; /* 제목이 줄바꿈되지 않도록 */
        }
         header .nav-links a:hover {
            opacity: 0.7;
        }
        header .site-title a {
            text-decoration: none;
            color: #000000;
        }
         footer {
            background: #fff;
            color: #333;
            text-align: left;
            padding: 10px 0;
            /* margin-top: 40px; */
        }

        /* 메인 섹션 */
        .main-section {
            position: relative;
            width: 100%;
            /* margin: 40px 0 60px 0; */
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .main-text-overlay {
            position: relative;
            text-align: center;
            /* margin-bottom: 40px; */
            z-index: 2;
        }

        .main-text-overlay h2 {
            font-size: 40px;
            font-weight: normal;
            margin: 0 0 20px 0;
            letter-spacing: 3px;
            color: #000000;
        }

        .main-text-overlay .main-disclaimer {
            font-size: 14px;
            color: #000000;
            margin: 0;
            line-height: 1.6;
        }

        .main-image-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            aspect-ratio: 1;
            margin: 0 auto;
        }

        .main-image-slider {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .main-image-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .main-image-slide.active {
            opacity: 1;
            z-index: 1;
        }

        .main-image-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .main-image-indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .main-image-indicators .main-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        .main-image-indicators .main-indicator:hover {
            transform: scale(1.2);
        }

        .main-image-indicators .main-indicator.active {
            background-color: #000000;
        }

        /* 2. WORKS 섹션 (중앙 타이틀) */
        .works-section {
            text-align: center;
            /* 상단 패딩을 80px에서 40px로 줄여서 WELCOME 텍스트를 위로 올림 */
            padding:  40px 40px 0; 
        }

        .works-section h2 {
            font-size: 40px;
            font-weight: normal;
            margin-bottom: 20px;
            letter-spacing: 3px;
        }

        .works-section p {
            font-size: 14px;
            color: #000000;
            margin-bottom: 60px;
        }

        /* 3. 카드 섹션 (작업물 그리드) */
        .card-container {
            display: flex;
            justify-content: center;
            gap: 40px; /* 카드 사이의 간격 */
            padding-bottom: 80px;
        }

        .work-card {
            width: 45%; /* 컨테이너 너비의 절반보다 약간 작게 */
            max-width: 600px;
            text-align: center;
            cursor: pointer;
            transition: opacity 0.3s ease;
        }
        
        .work-card:hover {
            opacity: 0.8;
        }

        .card-image-wrapper {
            width: 100%;
            height: auto; /* 이미지 높이는 내용에 맞게 조정 */
            aspect-ratio: 4/3; /* 이미지 비율 (예시: 4:3) */
            background-color: #eee; /* 이미지가 없을 때의 배경 */
            margin-bottom: 15px;
            overflow: hidden;
            border: 1px solid #e0e0e0;
        }

        .card-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 이미지가 영역을 채우도록 */
        }
        
        /* 이미지와 동일한 느낌을 주기 위해 이미지 대신 배경을 사용 (실제 이미지 경로가 없으므로) */
        #image-left {
            /* 실제 사이트와 비슷한 느낌을 주는 임시 배경 이미지 */
            background-image: url('placeholder_phone.jpg'); 
            background-size: cover;
            background-position: center;
            background-color: #a8d5e5;
        }
        #image-right {
            /* 실제 사이트와 비슷한 느낌을 주는 임시 배경 이미지 */
            background-image: url('placeholder_lens.jpg');
            background-size: cover;
            background-position: center;
            background-color: #555;
        }
        
        .work-card h3 {
            font-size: 16px;
            font-weight: bold;
            margin: 10px 0 5px 0;
        }

        .work-card p.caption {
            font-size: 14px;
            color: #000000;
            margin-top: 0;
            line-height: 1.5;
        }
        
        .work-card p.source {
            font-size: 12px;
            color: #000000;
            margin-top: 20px;
        }

        /* 모바일 반응형 */
        @media (max-width: 900px) {
            header {
                flex-direction: column;
                padding: 20px 0;
            }
            header .nav-links {
                margin-top: 15px;
                gap: 20px;
            }
            header .site-title {
                font-size: 24px;
            }
            .card-container {
                flex-direction: column;
                align-items: center;
            }
            .work-card {
                width: 90%;
            }
            .works-section {
                padding: 60px 0 30px 0;
            }
            .main-image-container {
                max-width: 90%;
            }
            .main-text-overlay h2 {
                font-size: 32px;
            }
            .main-text-overlay .main-disclaimer {
                font-size: 12px;
            }
            .main-image-indicators {
                bottom: 10px;
            }
            .main-image-indicators .main-indicator {
                width: 10px;
                height: 10px;
            }
        header .nav-links a.active {
            font-weight: bold;
        }
    }

        header .site-title {
            font-size: 30px;
            font-weight: bold;
            letter-spacing: 2px;
            white-space: nowrap;
        }

        header .site-title a {
            text-decoration: none;
            color: #000000;
        }

        /* About 섹션 */
        .about-section {
            /* padding: 60px 0; */
            max-width: 900px;
            margin: 0 auto;
        }

        /* 페이지 타이틀 h1 통일 (about 기준) */
        .about-section h1,
        .portfolio-section h1,
        .gallery-section h1,
        .contact-section h1 {
            font-size: 40px;
            font-weight: normal;
            margin-bottom: 40px;
            letter-spacing: 3px;
            text-align: center;
        }

        .section-subtitle {
            font-size: 14px;
            color: #000000;
            text-align: center;
            margin: 0 0 40px 0;
        }

        .about-content {
            display: flex;
            gap: 60px;
            align-items: flex-start;
            margin-bottom: 60px;
        }

        .profile-image {
            width: 230px;
            height: 300px;
            object-fit: cover;
            border: 1px solid #e0e0e0;
        }

        .about-text {
            flex: 1;
        }

        .about-text h2 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .about-text p {
            font-size: 16px;
            line-height: 1.8;
            color: #000000;
            margin-bottom: 20px;
        }

        .skills-section {
            margin-top: 60px;
        }

        .skills-section h2 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
            text-align: center;
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .skill-item {
            text-align: center;
        }

        .skill-item img {
            width: 80px;
            height: 80px;
            object-fit: contain;
            margin-bottom: 10px;
        }

        .skill-item p {
            font-size: 14px;
            color: #000000;
        }


        /* 모바일 반응형 */
        @media (max-width: 900px) {
            header {
                flex-direction: column;
                padding: 20px 0;
            }
            header .nav-links {
                margin-top: 15px;
                gap: 20px;
            }
            header .site-title {
                font-size: 24px;
            }
            .about-content {
                flex-direction: column;
                align-items: center;
            }
            .profile-image {
                width: 250px;
                height: 250px;
            }
            .skills-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
         /* Contact 섹션 */
        .contact-section {
            /* padding: 60px 0; */
            max-width: 800px;
            margin: 0 auto;
        }

        .contact-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .contact-header h1 {
            font-size: 40px;
            font-weight: normal;
            margin-bottom: 20px;
            letter-spacing: 3px;
        }

        .contact-header p {
            font-size: 14px;
            color: #000000;
        }

        .contact-form {
            margin-bottom: 60px;
        }

        .form-group {
            margin-bottom: 30px;
        }

        .form-group label {
            display: block;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #e0e0e0;
            font-size: 16px;
            font-family: 'Montserrat', Arial, sans-serif;
            box-sizing: border-box;
        }

        .form-group textarea {
            min-height: 200px;
            resize: vertical;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #000000;
        }

        .submit-btn {
            background-color: #000000;
            color: #fff;
            padding: 15px 40px;
            border: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: opacity 0.3s ease;
        }

        .submit-btn:hover {
            opacity: 0.8;
        }

        .contact-info {
            text-align: center;
            padding-top: 60px;
            border-top: 1px solid #e0e0e0;
        }

        .contact-info h2 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
        }

        .contact-info p {
            font-size: 16px;
            line-height: 1.8;
            color: #000000;
            margin-bottom: 10px;
        }

        .contact-info a {
            color: #000000;
            text-decoration: none;
        }

        .contact-info a:hover {
            opacity: 0.7;
        }
     
        /* CSS 파일에 추가해도 되고, 우선 여기에 두어 비율을 맞췄습니다 */
        .contact-section {
            /* 폼이 비어있어도 최소한 이 정도 높이는 유지해서 푸터를 아래로 밀어냅니다 */
            min-height: 65vh; 
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 50px;
        }

        .contact-info {
            margin-top: 40px; /* 제목/설명과 연락처 사이 간격 */
        }
  

        /* 모바일 반응형 */
        @media (max-width: 900px) {
            header {
                flex-direction: column;
                padding: 20px 0;
            }
            header .nav-links {
                margin-top: 15px;
                gap: 20px;
            }
            header .site-title {
                font-size: 24px;
            }
        }
     
       /* Gallery 섹션 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 30px;
    /* [참고] 가로형이 중간에 들어갈 때 빈 공간을 자동으로 채우고 싶다면 아래 주석을 해제하세요 */
    /* grid-auto-flow: dense; */
}

.gallery-item {
    width: 100%;
    aspect-ratio: 1; /* 기존 정사각형 유지 */
    overflow: hidden;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    position: relative;
}

/* ------------------- 여기서부터 추가된 부분 ------------------- */
.gallery-item.w-2 {
    grid-column: span 2;  /* 그리드 2칸 차지 */
    aspect-ratio: auto;   /* 정사각형 고정 해제 (가로로 늘어나기 위함) */
}

.gallery-item.w-2 img {
    aspect-ratio: 1920 / 1080; /* 가로형 이미지 비율 적용 */
    height: auto;
}
/* ----------------------------------------------------------- */

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-item .caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    z-index: 10;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(100%);
    transition: all 0.4s ease-in-out;
}

.gallery-item:hover .caption {
    opacity: 1;
    transform: translateY(0);
}

.cp_title {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

.caption > p {
    color: white;
    font-size: 0.95em;
    text-align: center;
    line-height: 1.5em;
    margin: 2px 0;
}

/* 모달 배경 */
.modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* 검정 배경 */
}

/* 닫기 버튼 */
.close-btn {
    position: absolute;
    top: 30px;
    right: 50px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}

.close-btn:hover {
    color: #bbb;
}

/* 모달 내부 컨텐츠(비디오)*/
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 너비와 높이 중 더 작은 쪽에 맞추도록 설정 */
    width: 90%;            /* 좌우 여백 확보 */
    height: 80vh;          /* 화면 높이의 80%까지만 차지하도록 제한 */
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content video {
    /* 영상의 원래 비율을 유지하면서 박스 안에 꽉 차게 설정 */
    max-width: 100%;
    max-height: 100%;
    width: auto;           /* 비율에 맞게 너비 자동 조절 */
    height: auto;          /* 비율에 맞게 높이 자동 조절 */
    
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    outline: none;
}

        /* 모바일 반응형 */
        @media (max-width: 1200px) {
            .gallery-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 900px) {
            header {
                flex-direction: column;
                padding: 20px 0;
            }
            header .nav-links {
                margin-top: 15px;
                gap: 20px;
            }
            header .site-title {
                font-size: 24px;
            }
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
        }

        @media (max-width: 600px) {
            .gallery-grid {
                grid-template-columns: 1fr;
            }
        }
         /* Portfolio 섹션 (about-section과 동일한 h1 위치 - 패딩 0) */
        .portfolio-section {
            padding: 0;
        }

        .portfolio-header {
            text-align: center;
            /* margin-bottom: 60px; */
        }

        .portfolio-header h1 {
            font-size: 40px;
            font-weight: normal;
            margin-bottom: 20px;
            letter-spacing: 3px;
        }

        .portfolio-header p {
            font-size: 14px;
            color: #000000;
        }
        /* 비디오 컨테이너: 16:9 비율 고정 */
        
        .video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 비율 유지 (9 / 16 * 100) */
    background-color: #000; /* 영상 여백을 검은색으로 채움 */
    margin-bottom: 20px;
    overflow: hidden;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* object-fit: contain -> 영상 전체가 다 보이게 (여백 발생)
       object-fit: cover   -> 꽉 차게 (정사각형의 경우 상하가 잘릴 수 있음)
    */
    object-fit: contain; 
}
/* 포트폴리오 전용 내부 스타일 (CSS 파일에 옮기셔도 됩니다) */
        .portfolio-video-box {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
            background-color: #fcfcfc; /* 영상 주변 미세한 배경색 */
        }

        .portfolio-video-box video {
            width: auto;
            max-width: 100%;
            /* 정사각형 영상이 너무 커지지 않도록 높이 제한 */
            max-height: 550px; 
            height: auto;
            display: block;
            border: 1px solid #e0e0e0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }

        .portfolio-item {
            min-width: 100%;
            box-sizing: border-box;
            padding: 0 20px;
        }

        /* 중복 태그 제거 후 깔끔해진 컨텐츠 레이아웃 */
        .portfolio-container {
            max-width: 1000px;
            margin: 0 auto;
        }

/* 포트폴리오 아이템 내부 레이아웃 정리 */
.portfolio-item {
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.portfolio-content {
    width: 100%;
    max-width: 900px;
    /* 영상과 텍스트가 조화롭도록 여백 조정 */
}

        /* 스크롤 컨테이너 */
        .portfolio-scroll-container {
            position: relative;
            overflow: hidden;
        }

        .portfolio-scroll-wrapper {
            display: flex;
            transition: transform 0.5s ease;
        }

        .portfolio-item {
            min-width: 100%;
            flex-shrink: 0;
            padding: 0 20px;
        }

        .portfolio-content {
            max-width: 1000px;
            margin: 0 auto;
        }

        .portfolio-image {
            width: 100%;
            margin-bottom: 40px;
            border: 1px solid #e0e0e0;
        }

        .portfolio-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        .portfolio-image-placeholder {
            width: 100%;
            aspect-ratio: 4/3;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .portfolio-info {
            max-width: 800px;
            margin: 0 auto;
        }

        .portfolio-info h2 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .portfolio-info p {
            font-size: 16px;
            line-height: 1.8;
            color: #000000;
            margin-bottom: 20px;
        }

        .portfolio-info-subtitle {
            font-size: 14px;
            color: #666;
            margin-bottom: 30px;
        }

        /* 듀얼 비디오 레이아웃 (포트폴리오 Vytz 등) */
        .video-dual-flex {
            display: flex;
            gap: 15px;
            justify-content: center;
            align-items: flex-start;
            width: 100%;
            max-width: 1100px;
            margin: 0 auto 40px;
        }

        .video-dual-flex .video-box {
            flex: 0 1 auto;
        }

        .video-dual-flex .video-box video {
            height: auto;
            max-height: 550px;
            width: auto;
            max-width: 100%;
            display: block;
            border-radius: 0;
            border: 1px solid #eee;
            object-fit: contain;
        }

        @media (max-width: 768px) {
            .video-dual-flex {
                flex-direction: column;
                align-items: center;
            }
            .video-dual-flex .video-box {
                width: 100%;
                max-width: 400px;
            }
            .video-dual-flex .video-box video {
                max-height: none;
                width: 100%;
            }
        }


        /* 네비게이션 버튼 */
        .nav-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            margin-top: 60px;
        }

        .nav-btn {
            background-color: #000000;
            color: #ffffff;
            border: none;
            padding: 15px 30px;
            font-size: 14px;
            font-family: 'Montserrat', Arial, sans-serif;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: opacity 0.3s ease;
        }

        .nav-btn:hover {
            opacity: 0.8;
        }

        .nav-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        /* 인디케이터 */
        .scroll-indicator {
            text-align: center;
            margin-top: 30px;
            font-size: 14px;
            color: #000000;
            opacity: 0.6;
        }

        .page-indicator {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .page-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .page-dot.active {
            background-color: #000000;
        }


        /* 모바일 반응형 */
        @media (max-width: 900px) {
            header {
                flex-direction: column;
                padding: 20px 0;
            }
            header .nav-links {
                margin-top: 15px;
                gap: 20px;
            }
            header .site-title {
                font-size: 24px;
            }
            .nav-buttons {
                gap: 20px;
            }
            .nav-btn {
                padding: 12px 20px;
                font-size: 12px;
            }
        }
        /* Portfolio 1,2 섹션 */

        .portfolio-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .portfolio-header h1 {
            font-size: 40px;
            font-weight: normal;
            margin-bottom: 20px;
            letter-spacing: 3px;
        }

        .portfolio-header p {
            font-size: 14px;
            color: #000000;
        }

        .portfolio-content {
            max-width: 1000px;
            margin: 0 auto;
        }

        .portfolio-image {
            width: 100%;
            margin-bottom: 40px;
            border: 1px solid #e0e0e0;
        }

        .portfolio-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        .portfolio-info {
            max-width: 800px;
            margin: 0 auto;
        }

        .portfolio-info h2 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .portfolio-info p {
            font-size: 16px;
            line-height: 1.8;
            color: #000000;
            margin-bottom: 20px;
        }

        .back-link {
            text-align: center;
            margin-top: 60px;
        }

        .back-link a {
            text-decoration: none;
            color: #000000;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            border-bottom: 1px solid #000000;
            padding-bottom: 2px;
        }

        .back-link a:hover {
            opacity: 0.7;
        }


        /* 모바일 반응형 */
        @media (max-width: 900px) {
            header {
                flex-direction: column;
                padding: 20px 0;
            }
            header .nav-links {
                margin-top: 15px;
                gap: 20px;
            }
            header .site-title {
                font-size: 24px;
            }
        }
        /* 이미지 컨테이너 (포트폴리오/ABOUT 등) */
        .image-container {
            max-width: 1000px;
            margin: 40px auto;
            display: block;
        }

        .image-container img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 0;
        }

        /* 클릭하여 상세보기 이미지 (Vytz 등) */
        .image-view-item {
            cursor: pointer;
        }

        .image-view-item:hover {
            opacity: 0.9;
        }

        /* --- Vytz 이미지 모달 및 효과 --- */
        .vytz-thumbnail-wrapper {
            position: relative;
            cursor: pointer;
            overflow: hidden;
            max-width: 1000px;
            margin: 40px auto;
        }
        .vytz-thumbnail-wrapper img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.3s ease;
        }
        .vytz-thumbnail-wrapper:hover img {
            transform: scale(1.02);
        }
        .hover-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: 0.3s;
            font-weight: bold;
        }
        .vytz-thumbnail-wrapper:hover .hover-overlay {
            opacity: 1;
        }

        /* TVING 스타일: 포스터 + 설명 나란히 */
        .portfolio-hero {
            display: flex;
            gap: 40px;
            align-items: stretch;
            margin: 0 auto 40px;
            max-width: 1000px;
        }

        .portfolio-poster {
            flex: 0 0 auto;
            width: 280px;
            min-height: 380px;
            overflow: hidden;
            border: 1px solid #e0e0e0;
        }

        .portfolio-poster img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .portfolio-hero .portfolio-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            margin: 0;
            max-width: none;
        }

        @media (max-width: 768px) {
            .portfolio-hero {
                flex-direction: column;
                align-items: center;
            }
            .portfolio-poster {
                width: 100%;
                max-width: 280px;
                min-height: 400px;
            }
        }

        /* 이미지 모달 (포트폴리오 상세보기) */
        .modal-content--image {
            max-width: 95%;
            max-height: 90vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .modal-content--image img {
            max-width: 100%;
            max-height: 90vh;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }

        .vytz-modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            overflow-y: auto;
            padding: 60px 0;
        }
        .vytz-modal-content {
            max-width: 900px;
            margin: 0 auto;
            width: 90%;
        }
        .vytz-modal-content img {
            width: 100%;
            height: auto;
            margin-bottom: 20px;
            border: 1px solid #333;
        }
        .vytz-close {
            position: fixed;
            top: 20px;
            right: 40px;
            color: #fff;
            font-size: 50px;
            cursor: pointer;
            z-index: 2100;
        }
        .vytz-close:hover {
            color: #bbb;
        }