/* --- 스튜디오 소개 섹션 (PC 고해상도 시인성 극대화 버전) --- */

.studio-intro {
    padding: 10em 0 !important; /* PC에서 훨씬 시원한 공간감 */
    background-color: #fff;
}

.studio-benefit-list {
    margin-top: 6em;
    border-top: 4px solid #111; /* 선 두께를 키워 구분을 확실히 함 */
}

/* 행 단위 정렬 */
.benefit-row {
    display: flex;
    padding: 5.5em 0; /* 항목 간 간격을 넓게 벌려 시선 분산 방지 */
    border-bottom: 1px solid #f0f0f0;
    align-items: center; /* 세로 중앙 정렬 고정 */
}

/* 왼쪽 타이틀 영역 (번호와 제목) */
.benefit-header {
    flex: 0 0 380px; /* 제목 영역 너비 확장 */
    padding-right: 60px;
}

.benefit-header .num {
    display: block;
    font-size: 1.1rem; 
    font-weight: 900;
    color: #e0e0e0;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
}

.benefit-header h3 {
    font-size: 2.2rem; /* PC 메인 제목: 아주 크고 묵직하게 */
    font-weight: 900;
    color: #000;
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.benefit-header .ko {
    display: block;
    font-size: 1.25rem; /* 국문 보조 타이틀 확대 */
    color: #888;
    margin-top: 12px;
    font-weight: 600;
}

/* 오른쪽 본문 영역 */
.benefit-body {
    flex: 1;
}

.benefit-body p {
    /* [핵심] 어른들도 잘 보이도록 본문 크기를 1.4rem(약 22px)으로 확대 */
    font-size: 1.4rem; 
    color: #222; /* 대비를 높이기 위해 더 진한 검정색 적용 */
    line-height: 1.95; /* 행간을 충분히 넓혀 줄 섞임 방지 */
    margin: 0;
    word-break: keep-all; 
    letter-spacing: -0.01em;
}

.benefit-body strong {
    color: #000;
    font-weight: 800;
    /* 형광펜 효과로 핵심 문구 강조 */
    background: linear-gradient(to top, #f5f5f5 50%, transparent 50%);
}

/* --- 반응형 (840px 이하 모바일/태블릿) --- */
/* 모바일에서는 화면 크기에 맞게 자동으로 적절히 축소되도록 재설정 */
@media screen and (max-width: 840px) {
    .studio-intro {
        padding: 6em 0 !important;
    }

    .benefit-row {
        flex-direction: column;
        padding: 4em 1.5rem;
        align-items: flex-start; 
    }
    
    .benefit-header {
        flex: none;
        margin-bottom: 2.5em;
        padding-right: 0;
    }
    
    .benefit-header h3 {
        font-size: 1.8rem;
    }
    
    .benefit-header .ko {
        font-size: 1.1rem;
    }
    
    .benefit-body p {
        font-size: 1.15rem; /* 모바일은 기기 크기에 맞춰 적당한 크기로 유지 */
        line-height: 1.8;
    }
}









/* --- 환경 섹션 고퀄리티 수정 --- */
.studio-env {
    background-color: #fff;
    padding: 10em 0 !important;
}

.env-row {
    display: flex;
    align-items: center;
    gap: 8%;
    margin-bottom: 12em;
    
    /* [애니메이션 설정] 처음엔 투명하고 아래에 위치 */
    opacity: 0;
    transform: translateY(80px); 
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* [애니메이션 트리거] 자바스크립트에 의해 클래스가 붙으면 실행 */
.env-row.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.env-row.reverse { flex-direction: row-reverse; }

/* --- 이미지 박스: 뽀샤시 & 부드러운 효과 --- */
.env-image-box {
    flex: 0 0 65%;
    overflow: hidden;
    border-radius: 40px; /* [수정] 딱딱함을 없애기 위해 큰 곡률 적용 */
    box-shadow: 0 40px 80px rgba(0,0,0,0.08); /* 부드러운 그림자 */
    line-height: 0;
    position: relative;
    background: #fff;
}

.env-image-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    
    /* [수정] 뽀샤시 효과 (밝기 + 대비 조절 + 부드러운 광채 효과 모방) */
    filter: brightness(1.15) contrast(0.95) saturate(1.1) sepia(0.05); 
    /* brightness: 더 밝게 / contrast: 살짝 낮춰서 부드럽게 / sepia: 아주 미세한 온기 추가 */
    
    transition: filter 0.5s ease;
}

/* 이미지 위에 하얀 안개 느낌의 오버레이 추가 (뽀샤시 극대화) */
.env-image-box::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
}

/* --- 텍스트 박스 디자인 --- */
.env-text-box {
    flex: 0 0 27%;
}

.env-text-box .num {
    font-size: 0.9em;
    font-weight: 800;
    color: #c5a992; /* 부드러운 베이지/브라운 톤으로 변경 */
    letter-spacing: 0.3em;
    display: block;
    margin-bottom: 1.5em;
}

.env-text-box h3 {
    font-size: 2.2rem;
    font-weight: 700; /* 너무 굵지 않게 조절 */
    color: #222;
    margin-bottom: 1.2em;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

.env-text-box p {
    font-size: 1.1rem;
    color: #777;
    line-height: 1.85;
    word-break: keep-all;
}

/* 반응형 */
@media screen and (max-width: 980px) {
    .env-row, .env-row.reverse {
        flex-direction: column;
        opacity: 1 !important; 
        transform: none !important;
        padding: 0 1.5em;
    }
    .env-image-box {
        border-radius: 25px; /* 모바일은 조금 작게 */
    }
}






/* --- 지도 섹션 최적화 --- */
.map-wrap {
    margin: 4em 0;
    border-radius: 20px; /* 작가님 요청 스타일 반영 */
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    background: #f9f9f9; /* 로딩 전 배경 */
    position: relative;
    width: 100%;
}

/* 카카오 약도 내부 구조 강제 교정 */
.map-wrap .root_daum_roughmap {
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
}

.map-wrap .root_daum_roughmap .wrap_map {
    width: 100% !important;
    height: 450px !important; /* 고정 높이 */
}

/* 하단 정보 그리드 */
.location-detail-grid {
    margin-top: 5em;
    border-top: 2px solid #111;
}

.loc-item {
    display: flex;
    padding: 3.5em 0;
    border-bottom: 1px solid #f2f2f2;
    align-items: flex-start;
}

/* 왼쪽 라벨 */
.loc-label {
    flex: 0 0 300px;
}

.loc-label .en {
    display: block;
    font-size: 0.75em;
    font-weight: 800;
    color: #bbb;
    letter-spacing: 0.15em;
    margin-bottom: 6px;
}

.loc-label .ko {
    font-size: 1.25em;
    font-weight: 700;
    color: #111;
}

/* 오른쪽 내용 */
.loc-content {
    flex: 1;
}

.loc-content .main-text {
    font-size: 1.15em;
    color: #333;
    margin-bottom: 0.5em;
    word-break: keep-all;
}

.loc-content .sub-text {
    font-size: 0.95em;
    color: #888;
    margin-bottom: 1.5em;
}

/* 시간 리스트 스타일 */
.time-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.time-list li {
    font-size: 1.05em;
    margin-bottom: 0.8rem;
    color: #444;
}

.time-list li strong {
    font-weight: 700;
    color: #111;
}

/* 네비게이션 버튼 */
.loc-btns {
    display: flex;
    gap: 10px;
}

/* 반응형 */
@media screen and (max-width: 840px) {
    .loc-item {
        flex-direction: column;
        padding: 2.5em 1em;
    }
    .loc-label {
        margin-bottom: 1.5em;
        flex: none;
    }
    .map-wrap .root_daum_roughmap .wrap_map {
        height: 350px !important;
    }
}