/* 기본 설정 */
:root {
    --gold: #c4a276;
    --black: #111;
    --gray: #f4f4f4;
    --inner-width: 1200px;
}

* { margin:0; padding:0; box-sizing: border-box; }
body { font-family: 'Pretendard', sans-serif; color: #333; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.inner { max-width: var(--inner-width); margin: 0 auto; padding: 0 20px; position: relative; }

/* 헤더 */
header .inner { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.logo-taebrow {
    width: 200px;   /* 기존보다 작게 조절 (원하는 수치로 변경 가능) */
    height: auto;  /* 비율에 맞춰 자동 조절 */
    object-fit: contain; 
        }
.gnb ul { display: flex; gap: 40px; }

/* 기본 상태 */
.gnb ul li a { 
    font-weight: 600; 
    font-size: 18px; 
    color: #333; /* 기본 글자색 (필요시 변경) */
    transition: all 1s ease; /* 변화를 부드럽게 만드는 핵심 코드 */
}

/* 마우스를 올렸을 때 (Hover) */
.gnb ul li a:hover {
    color: var(--black); /* 강조하고 싶은 색상 (예: 검정색) */
    font-weight: 800;  /* 글씨 두께도 더 두껍게 하고 싶다면 추가 */
}

/* [기본 상태] 스크롤 최상단일 때 */
header {
    height: 150px; /* 초기 높이 */
    background: transparent; /* 배경 투명 */
    position: fixed !important; /* 페이지 상단에 고정 */
    width: 100%;
    top: 0;
    z-index: 1000 !important;
    transition: all 0.4s ease; /* 부드러운 변화를 위한 핵심 속성 */
}

/* 로고와 메뉴 글자색도 최상단에선 흰색으로 설정 (필요시) */
header .logo-taebrow {
    filter: brightness(0) invert(1);
}
header .gnb ul li a {
    color: #fff; 
    transition: 0.4s;
}

/* ------------------------------------------------ */

/* [변화 상태] 스크롤을 내렸을 때 (.on 클래스가 붙음) */
header.on {
    height: 110px; /* 높이가 줄어듦 */
    background: #fff !important; /* 배경 흰색으로 변경 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 그림자 추가 */
    border-bottom: 1px solid #eee;
}

/* 스크롤 후 글자색을 어두운 색으로 변경 */
header.on .logo-taebrow {
    filter: none; /* 로고는 골드색으로 유지하거나 변경 */
}
header.on .gnb ul li a {
    color: #333; /* 메뉴 글씨 검정색으로 */
}

/* 메인 비주얼 */
.main-visual {
    padding-top: 100px; /* 헤더 높이만큼 조절 */ 
    height: 100vh;
    position: relative; 
    overflow: hidden;
    background: #000;
}
.video-container { position: absolute; top:0; left: 2px;00; width: 100%; height: 100%; display: flex;}
.video-container video { width: 33.3%; height: 120%; object-fit: cover; } /* 영상 꽉 차게 */
.visual-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; z-index: 10; /* 애니메이션 추가: 3초 대기 후 1초 동안 사라짐 */
    animation: zoomOutFade 5s forwards;
    animation-delay: 4s; }
.visual-text h2 { 
    font-size: 100px !important; /* 기존 50px에서 80px로 변경 */
    text-transform: uppercase; 
    letter-spacing: 5px; 
    white-space: nowrap; /* 줄바꿈 방지 (글자가 커졌을 때 대비) */
}

@keyframes zoomOutFade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        /* scale을 1.5 정도로 키워 줌 인 효과를 줌 */
        transform: translate(-50%, -50%) scale(15);
        visibility: hidden;
    }
}
.visual-text h2 { font-size: 50px; text-transform: uppercase; letter-spacing: 5px; }

/* 섹션 공통 */
.section { padding: 50px 0; }
.section-title { margin-bottom: 50px; position: relative; }
.section-title span { color: var(--gold); font-size: 14px; display: block; margin-bottom: 5px; }
.section-title h3 { font-size: 32px; font-weight: 300; }
.section-title h3 strong { font-weight: 700; margin-left: 10px; }
.more-btn { position: absolute; right: 0; top: 20px; border: 1px solid #ddd; padding: 5px 15px; font-size: 13px; color: #999; }

/* 부모 컨테이너 */
.main-flex-wrapper {
    display: flex;
    width: 100%;
    align-items: stretch; /* 두 섹션의 높이를 동일하게 맞춤 */
}

/* 각 섹션 설정 */
.main-flex-wrapper section {
    flex: 1; /* 동일하게 1:1 비율로 나눔 */
    width: 50%;
    padding: 80px 0; /* 위아래 여백만 유지 */
}

/* 좌우 배치 시 inner의 너비가 1200px이면 화면을 벗어나므로 조절 */
.main-flex-wrapper .inner {
    max-width: 100%; /* 부모 너비에 맞춤 */
    padding: 0 40px; /* 내부 여백만 유지 */
}

/* 모바일 대응 (화면이 좁아지면 다시 위아래로 배치) */
@media (max-width: 1024px) {
    .main-flex-wrapper {
        flex-direction: column;
    }
    .main-flex-wrapper section {
        width: 100%;
    }
}


/* [1] index - curriculum (index.html) */
.index-curriculum-grid {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 30px;
}

.index-curriculum-grid .item { 
    height: auto !important; /* 고정 높이 해제 */
    background: #fff; 
    display: flex; 
    flex-direction: column; /* 사진이 위, 글자가 아래로 배치되게 변경 */
    align-items: center;
    font-weight: bold; 
    border: 1px solid #ddd; 
    overflow: hidden;
}

/* ★ 사진 크기를 조절하는 핵심 부분 ★ */
.index-curriculum-grid .item .img-box {
    width: 100%;    
    height: 300px;  /* 이 숫자를 조절하면 사진의 세로 크기가 바뀝니다 (예: 300px, 400px) */
    overflow: hidden;
}

.index-curriculum-grid .item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 사진이 찌그러지지 않고 꽉 차게 조절 */
}

.index-curriculum-grid .item p {
    padding: 15px 0;
    width: 100%;
    text-align: center;
    background: #f9f9f9;
    border-top: 1px solid #eee;
}

/* 마우스 올렸을 때 효과 */
.index-curriculum-grid .item:hover img {
    transform: scale(1.1);
    filter: brightness(0.8);
}

/* [2] index - portfolio (index.html) */
/* 개별 아이템 설정 */
.index-portfolio-grid .item {
    display: flex;
    flex-direction: column;
}

.index-portfolio-grid .item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 사진이 찌그러지지 않고 꽉 차게 조절 */
    display: block;
}

/* ★ 사진 크기를 조절하는 핵심 부분 ★ */
.index-portfolio-grid .item .img-box {
    width: 100%;    
    height: 300px;  /* 이 숫자를 조절하면 사진의 세로 크기가 바뀝니다 (예: 300px, 400px) */
    overflow: hidden;
}

/* 마우스 올렸을 때 효과 */
.index-portfolio-grid .item:hover img {
    transform: scale(1.1);
    filter: brightness(0.8);
}

/* [3] index - review (index.html) */
/* 개별 아이템 설정 */
.index-review-grid .item {
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}
.index-review-grid .item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
/* ★ 사진 크기를 조절하는 핵심 부분 ★ */
.index-review-grid .item .img-box {
    width: 100%;    
    height: 350px; /* 캡처본처럼 세로로 길게 설정 */
    overflow: hidden;
}

/* 마우스 올렸을 때 효과 */
.index-review-grid .item:hover img {
    transform: scale(1.1);
    filter: brightness(0.8);
}

/* [4] index - profile-pic (index.html) */
.profile-pic .item .img-box img {
    width: 150%;
    height: 100%;
    object-fit: cover;
    
    /* [핵심] 가운데 정렬 공식 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    
    /* 기존 트랜지션 유지 (변형이 겹치므로 아래와 같이 작성 권장) */
    transition: 0.5s ease;
}

/* [5] index - 인스타그램 스타일 타이틀 */
.section-title.instagram-style {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    position: relative;
}

/* More+ 버튼 스타일 초기화 및 재설정 */
.section-title.instagram-style .more-btn {
    position: static;          /* 기존 absolute 위치 고정 해제 */
    transform: none;           /* 위치 이동 초기화 */
    display: inline-block;
    border: 1px solid #ddd;
    padding: 5px 15px;
    font-size: 13px;
    color: #999;
    /* absolute일 때의 top: 20px 등은 더 이상 필요 없습니다 */
}

.title-left { display: flex; align-items: center; gap: 10px; }
/* [추가] 로고 사진 크기 조절 */
.insta-logo { 
    width: 200px;   /* 기존보다 작게 조절 (원하는 수치로 변경 가능) */
    height: auto;  /* 비율에 맞춰 자동 조절 */
    object-fit: contain;
}

/* [6] index - 인스타그램 그리드: 6열 배치 */
.instagram-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important; /* 가로 6개 */
    gap: 15px; /* 사진 사이 간격 */
}

/* 개별 아이템 설정 */
.instagram-grid .item {
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

/* ★ 사진 크기: 인스타 특유의 세로가 긴 비율(4:5) 구현 ★ */
.instagram-grid .item .img-box {
    width: 100%;    
    height: 350px; /* 캡처본처럼 세로로 길게 설정 */
    overflow: hidden;
}

.instagram-grid .item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 마우스 올렸을 때 효과 */
.instagram-grid .item:hover img {
    transform: scale(1.1);
    filter: brightness(0.8);
}

/* 반응형: 태블릿에서는 3개, 모바일에서는 2개씩 */
@media (max-width: 1024px) {
    .instagram-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
    .instagram-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .instagram-grid .item .img-box { height: 250px; }
}

/* 서브 비주얼 */
.sub-visual { height: 900px; background:linear-gradient(to bottom, #f5cdcd, #f1eded); display: flex; align-items: center; justify-content: center; text-align: center; color: #070707; }
.sub-visual h2 { margin-top: 100px; font-size: 40px; letter-spacing: 2px; }
.sub-visual p { color: var(--gold); margin-top: 10px; }

/* 스크롤 마우스 전체 컨테이너 */
.scroll-mouse {
    position: absolute;
    bottom: 150px; /* 바닥에서 30px 띄움 */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}

/* 마우스 몸체 */
.scroll-mouse .mouse {
    width: 26px;
    height: 44px;
    border: 2px solid #000000; /* 흰색 테두리 */
    border-radius: 15px;
    margin: 0 auto 8px;
    position: relative;
}

/* 마우스 휠 (움직이는 부분) */
.scroll-mouse .wheel {
    width: 4px;
    height: 8px;
    background: #000000;
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    margin-left: -2px;
    animation: scroll-wheel 1.5s infinite; /* 애니메이션 적용 */
}

/* SCROLL 텍스트 */
.scroll-mouse p {
    color: #000000;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 500;
}

/* 휠 애니메이션 정의 */
@keyframes scroll-wheel {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(15px); }
}

/* 마우스 하단 화살표 스타일 */
.scroll-mouse .arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 10px;
}

.scroll-mouse .arrows span {
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #000000;
    border-right: 2px solid #000000;
    transform: rotate(45deg); /* V자 모양 만들기 */
    margin: -3px; /* 화살표 사이 간격 조절 */
    animation: arrows-down 1.5s infinite;
}

/* 두 번째 화살표에 시간차 지연 효과 */
.scroll-mouse .arrows span:nth-child(2) {
    animation-delay: 0.2s;
}

/* 화살표 애니메이션 정의 */
@keyframes arrows-down {
    0% { opacity: 0; transform: rotate(45deg) translate(-5px, -5px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: rotate(45deg) translate(5px, 5px); }
}

/* 기존 마우스 휠 애니메이션과 속도 맞추기 */
@keyframes scroll-wheel {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(15px); }
}

/* [1] 서브 페이지 - 학원 소개 (about.html) */
/* 강사 상세 레이아웃 */
.instructor-container { display: flex; gap: 60px; align-items: flex-start; padding: 50px 0; }
.instructor-photo { flex: 1; max-width: 450px; }
.instructor-photo img { width: 100%; border-radius: 10px; box-shadow: 20px 20px 0px var(--gold); } /* 포인트 디자인 */

.instructor-info { flex: 1.5; }
.instructor-info .position { color: var(--gold); font-size: 16px; font-weight: bold; text-transform: uppercase; }
.instructor-info .name { font-size: 36px; margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 10px; display: inline-block; }
.instructor-info .name strong { font-weight: 400; color: #666; font-size: 24px; margin-left: 10px; }

.career-group { margin-bottom: 30px; }
.career-group h4 { font-size: 18px; color: var(--gold); margin-bottom: 15px; border-left: 4px solid var(--gold); padding-left: 10px; }
.career-group ul li { margin-bottom: 8px; font-size: 16px; position: relative; padding-left: 15px; }
.career-group ul li::before { content: '•'; position: absolute; left: 0; color: #ccc; }

/* 반응형 처리 */
@media (max-width: 768px) {
    .instructor-container { flex-direction: column; align-items: center; text-align: center; }
    .instructor-photo { margin-bottom: 40px; }
    .career-group h4 { border-left: none; padding-left: 0; }
    .visual-text h2 {
        font-size: 40px; /* 모바일에서는 40px로 자동 조절 */ }
}
/* [2] 서브 페이지 - 커리큘럼 (curriculum.html) */
/* 커리큘럼 그리드 */
.curriculum-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px; 
}

.curriculum-grid .item { 
    height: auto !important; /* 고정 높이 해제 */
    background: #fff; 
    display: flex; 
    flex-direction: column; /* 사진이 위, 글자가 아래로 배치되게 변경 */
    align-items: center;
    font-weight: bold; 
    border: 1px solid #ddd; 
    overflow: hidden;
}

/* ★ 사진 크기를 조절하는 핵심 부분 ★ */
.curriculum-grid .item .img-box {
    width: 100%;    
    height: 300px;  /* 이 숫자를 조절하면 사진의 세로 크기가 바뀝니다 (예: 300px, 400px) */
    overflow: hidden;
}

.curriculum-grid .item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 사진이 찌그러지지 않고 꽉 차게 조절 */
}

.curriculum-grid .item p {
    padding: 15px 0;
    width: 100%;
    text-align: center;
    background: #f9f9f9;
    border-top: 1px solid #eee;
}

/* 마우스 올렸을 때 효과 */
.curriculum-grid .item:hover img {
    transform: scale(1.1);
    filter: brightness(0.8);
}

/* 라이트박스 배경 및 닫기 버튼 */
.lum-lightbox { z-index: 10000; background: rgba(0,0,0,0.9); }

.lum-close-button:after, .lum-close-button:before {
    content: ''; position: absolute; top: 50%; left: 0;
    width: 100%; height: 2px; background: #fff;
}
.lum-close-button:after { transform: rotate(45deg); }
.lum-close-button:before { transform: rotate(-45deg); }

/* 좌우 화살표 크기 및 색상 강조 */
.lum-previous-button, .lum-next-button {
    width: 50px;
    height: 50px;
}
.lum-previous-button:after, .lum-next-button:after {
    border-color: #fff !important;
    border-width: 4px !important;
}

/* 라이트박스 캡션 스타일 */
.lum-curriculum-gallery-caption {
    position: fixed;
    bottom: 40px;      /* 아래쪽에 배치 */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7); /* 반투명 검정 배경 */
    color: #fff;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    z-index: 10002;    /* 이미지보다 위에 오도록 */
    max-width: 80%;
    line-height: 1.5;
}

.review-caption p {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    word-break: keep-all;    /* 단어 단위 줄바꿈으로 자연스럽게 */
    overflow-wrap: break-word;
    text-align: center;
    width: 85%;             /* 양옆 여백 확보 */
    margin: 0 auto;
    transform: translateY(10px);
    transition: 0.3s;
}

/* [3] 서브 페이지 - 포트폴리오 (portfolio.html) */
.portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px;
}

/* 개별 아이템 설정 */
.portfolio-grid .item {
    display: flex;
    flex-direction: column;
}

.portfolio-grid .item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 사진이 찌그러지지 않고 꽉 차게 조절 */
    display: block;
}

/* ★ 사진 크기를 조절하는 핵심 부분 ★ */
.portfolio-grid .item .img-box {
    width: 100%;    
    height: 300px;  /* 이 숫자를 조절하면 사진의 세로 크기가 바뀝니다 (예: 300px, 400px) */
    overflow: hidden;
}

/* 마우스 올렸을 때 효과 */
.portfolio-grid .item:hover img {
    transform: scale(1.1);
    filter: brightness(0.8);
}
/* [4] 서브 페이지 - 수강생 후기 (review.html) */
/* 리얼후기 섹션 전체 설정 */
.real-review {
    padding: 50px 0;
    text-align: center;
    background: #fff;
}

.real-review-title {
    font-size: 32px;
    margin-bottom: 15px;
}

.real-review-desc {
    color: #666;
    margin-bottom: 100px;
}

/* 배경에 깔리는 큰 글자 효과 (REAL REVIEW) */
.real-review-cover {
    display: block;
    font-size: 80px;
    font-weight: 900;
    color: #f4f4f4;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    white-space: nowrap;
}

/* 이미지 리스트 그리드 배치 */
.review-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 배치 */
    gap: 50px;
    position: relative;
    z-index: 2; /* 텍스트보다 위로 배치 */
}

.real-review-img {
    width: 100%;
    height: 500px; /* 높이 고정 */
    
    object-fit: cover; /* 사진 비율 유지하며 꽉 채움 */
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.real-review-img:hover {
    transform: translateY(-10px); /* 마우스 올리면 살짝 위로 이동 */
}

/* 반응형 모바일 설정 */
@media (max-width: 768px) {
    .review-list {
        grid-template-columns: 1fr; /* 모바일은 1열로 */
    }
}

/* 부모 요소인 a 태그를 기준으로 레이어 위치 고정 */
.review-list a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

/* 마우스 올리기 전: 투명한 상태 */
.review-caption {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.6); /* 검정색 60% 투명도 */

/* 상하좌우 여백을 크게 주어 글씨 영역을 중앙으로 밀어넣음 */
    padding: 40px; 
    box-sizing: border-box; /* 패딩이 크기에 영향을 주지 않도록 설정 */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    opacity: 0; /* 평소엔 숨김 */
    transition: all 0.3s ease;
    z-index: 5;
}

/* 구분선 스타일 */
.review-caption h2.divider {
    position: relative;
    width: 210px; /* 선의 길이 */
    height: 2px; /* 선의 두께 */
    background: var(--gold, #c5a47e); /* 메인 컬러(골드) 사용 */
    margin: 15px auto; /* 위아래 간격 조절 및 중앙 정렬 */
    border: none;
}


/* 마우스 올렸을 때: 나타남 */
.review-list a:hover .review-caption {
    opacity: 1;
}

/* 캡션 내부 텍스트 스타일 */
.review-caption p {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;        /* 줄 간격을 넓혀 가독성 확보 */
    word-break: keep-all;    /* 단어 단위로 끊어짐 (한글 줄바꿈 최적화) */
    overflow-wrap: break-word; /* 너무 긴 단어는 강제로 줄바꿈 */
    text-align: center;      /* 중앙 정렬 */
    width: 90%;             /* 글자가 박스 끝에 붙지 않게 너비 제한 */
    margin: 0 auto;         /* 중앙 배치 */
}

.review-list a:hover .review-caption p {
    transform: translateY(0);
}

/* 배경 이미지 확대 효과 */
.review-list a:hover .real-review-img {
    transform: scale(1.1);
}

.review-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 30px;
}
/* 개별 아이템 설정 */
.review-grid .item {
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}
.review-grid .item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
/* ★ 사진 크기를 조절하는 핵심 부분 ★ */
.review-grid .item .img-box {
    width: 100%;    
    height: 350px; /* 캡처본처럼 세로로 길게 설정 */
    overflow: hidden;
}

/* 마우스 올렸을 때 효과 */
.review-grid .item:hover img {
    transform: scale(1.1);
    filter: brightness(0.8);
}

/* [5] 서브 페이지 - 공지사항 (notice.html) */

/* [6] 서브 페이지 - 문의하기 (contact.html) */

/* [7] 서브 페이지 - 위치 안내 (location.html) */
/* 지도 컨테이너 스타일 */
.map-container {
    width: 100%;
    margin-top: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* 모서리 둥글게 적용 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.map-container iframe {
    display: block; /* 하단 여백 제거 */
}

/* 퀵 메뉴 */
.quick-menu { 
    position: fixed; 
    right: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 999; 
}

/* 퀵 메뉴 내 이미지 기본 설정 */
.quick-menu ul li img {
    width: 65px;      /* 로고 크기를 적절하게 조절 */
    height: auto;
    object-fit: contain;
    transition: all 0.3s; /* 이미지 변화도 부드럽게 */
    display: block;
}

.quick-menu ul li { 
    background: #fff; 
    border: 1px solid #ddd; 
    width: 80px; 
    height: 80px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px; 
    text-align: center; 
    margin-bottom: -1px; 
    cursor: pointer; 
    transition: all 0.3s; /* 색상이 부드럽게 변하도록 추가 */
}

/* [추가] 마우스 올렸을 때(Hover) 효과 */
.quick-menu ul li:hover {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}

/* 첫 번째 자식 요소(상담신청 등) 기본 강조 유지 */
.quick-menu ul li:last-child { 
    background: var(--gold); 
    color: #fff; 
    border-color: var(--gold); 
}

/* [추가] 첫 번째 자식에 마우스 올렸을 때 조금 더 진하게 (선택 사항) */
.quick-menu ul li:first-child:hover {
    filter: brightness(1.1); /* 약간 더 밝게 표현 */
}
/* [1] 모든 섹션 공통: 배경색이 있어야 뒤의 푸터가 안 보입니다 */
.section { 
    background: #fff; 
    position: relative; 
    z-index: 10; 
}

/* [2] 인스타그램 섹션 (마지막 섹션): 푸터가 나올 공간을 위해 마진이 적용됨 */
.section.instagram {
    background: #fff; /* 배경색 필수 */
    position: relative;
    z-index: 10;
}

/* [3] 푸터: 바닥에 고정 */
footer { 
    padding-bottom: 80px !important; /* 퀵메뉴 높이보다 조금 더 여유있게 */
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1; /* 본문 섹션들보다 뒤에 배치 */
    background:linear-gradient(to bottom,#f1eded,#f5cdcd); 
    padding: 50px 0;
    text-align: left;
}

/* 라이트박스 컨테이너에 스크롤 허용 */
.lum-lightbox-inner {
    overflow-y: auto !important; /* 세로 스크롤 활성화 */
    display: block !important;   /* 중앙 정렬 방식 변경 (스크롤을 위해) */
}

/* 이미지 설정 변경 */
.lum-lightbox-image {
    max-height: none !important; /* 화면 높이 제한 해제 */
    max-width: 90% !important;   /* 가로 폭은 유지 */
    margin: 60px auto !important; /* 위아래 여백 확보 */
    height: auto !important;     /* 원본 비율 유지 */
}

/* 우측 상단 X 버튼 디자인 */
.lum-close-button {
    position: fixed !important;
    top: 20px !important;
    right: 70px !important;
    width: 50px;
    height: 50px;
    opacity: 1;
    z-index: 10005;
}

/* ============================================================
   모바일 최적화 섹션 (768px 이하 기기 전용)
   ============================================================ */
@media (max-width: 768px) {
    /* [1] 햄버거 메뉴 & 헤더 설정 */
    header { height: 80px !important; }
    header.on { height: 70px !important; }
    .logo-taebrow { width: 130px !important; }

    /* [1] 딤(Dim) 배경 추가: 메뉴 활성화 시 뒤쪽을 어둡게 */
    body.menu-open::after {
        content: '';
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.5); /* 투명도 50% */
        z-index: 999;
        display: block;
    }

    /* [2] 햄버거 버튼 & X자 변신 애니메이션 */
    .m-menu-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 25px;
        height: 18px;
        z-index: 1001;
        position: relative;
        transition: 0.3s;
    }
    .m-menu-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background: #333;
        transition: all 0.3s;
    }
    /* 스크롤 전 흰색 유지 */
    header:not(.on) .m-menu-btn span { background: #fff; }

    /* X자 모양으로 변경 (open 클래스 추가 시) */
    .m-menu-btn.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
        background: #333 !important; /* X자일 땐 항상 검정 */
    }
    .m-menu-btn.open span:nth-child(2) {
        opacity: 0; /* 가운데 선 숨김 */
    }
    .m-menu-btn.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
        background: #333 !important;
    }
    header:not(.on) .m-menu-btn span { background: #fff; }

    /* [3] GNB 메뉴창 */
    .gnb {
        display: block !important;
        position: fixed;
        top: 0; 
        right: -100%; /* 숨김 상태 */
        width: 65%; 
        height: 100vh;
        
        /* 투명도 조절: rgba(빨강, 초록, 파랑, 불투명도) */
        /* 마지막 숫자가 0.9면 90% 불투명(살짝 비침), 0.5면 반투명입니다. */
        background: rgba(255, 255, 255, 0.7); 
        
        /* 배경이 흐릿하게 보이는 효과 (더 고급스러워 보임) */
        backdrop-filter: blur(10px); 
        -webkit-backdrop-filter: blur(10px);

        z-index: 1000;
        transition: 0.4s ease-in-out;
        padding: 100px 30px;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    .gnb.active { right: 0; }
    .gnb ul { flex-direction: column !important; gap: 20px !important; }
    .gnb ul li a { color: #333 !important; font-size: 18px !important; font-weight: 700 !important; }

    /* [2] 퀵메뉴: 가로 잘림 해결 (100% 꽉 차게) */
    .quick-menu {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important; /* 70%에서 100%로 변경 */
        height: 60px !important;
        z-index: 10001 !important;
        background: #fff !important;
    }
    .quick-menu ul {
        display: flex !important;
        width: 100% !important; /* 70%에서 100%로 변경 */
        height: 100%;
    }
    .quick-menu ul li {
        flex: 1 !important; /* 모든 메뉴가 동일한 너비 점유 */
        width: auto !important;
        height: 100% !important;
        border: none !important;
        border-top: 1px solid #eee !important;
        border-right: 1px solid #eee !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        font-size: 10px !important;
        flex-direction: column;
    }
    .quick-menu ul li:last-child { border-right: none !important; background: var(--gold) !important; }
    .quick-menu ul li img { width: 22px !important; margin-bottom: 2px !important; }
    .top-btn { display: none !important; }

    /* [3] 인스타그램: 정사각형 최적화 및 사이즈 조정 */
    .instagram-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3열 배치 */
        gap: 5px !important;
        padding: 0 10px;
    }
    .instagram-grid .item .img-box {
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 100% !important; /* 가로세로 1:1 비율 고정 */
        position: relative;
    }
    .instagram-grid .item .img-box img {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
    }

    /* [4] 메인 비주얼 및 기타 그리드 */
    .video-container { flex-direction: column; }
    .video-container video:nth-child(n+2) { display: none; }
    .video-container video { width: 100% !important; height: 100vh !important; }
    .visual-text h2 { font-size: 35px !important; }
    
    .index-curriculum-grid, .index-portfolio-grid, .index-review-grid, .portfolio-grid, .review-grid {
        grid-template-columns: 1fr !important;
    }
    footer { padding-bottom: 80px !important; } /* 퀵메뉴 공간 확보 */
}