@charset "UTF-8";
/* 항상 모든 비율은 가로부터! */

/* ============================================== */
/* A. 기본 설정 (Variables, Reset, Body) */
/* ============================================== */

/* 기본 변수 (기존 코드에서 그대로 가져옴) */
:root {
    --large-width: 1000px;
    --text-bright-color: #fff;
    --gray-color: #ddd;
}

/* ============================================== */
/* Z. 브라우저 기본 마진/패딩 초기화 */
/* ============================================== */

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background-image: url(img/artwork_bottom.png);
    background-position: bottom;
}

/* ======================================= */
/* A. HEADER & NAVIGATION 기본 스타일 (PC/Mobile 공통) */
/* ======================================= */

/* header 헤더 */
header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    /* 부모가 100% 너비를 차지해야 자식(.container)이 가운데 정렬됨 */
}

.nohero header {
    position: static;
    border-bottom: 1px solid var(--gray-color);
}

/* headA 사이트 이름 */
.headA {
    display: inline-block;
    line-height: 70px;
    padding-left: 20px;
    padding-right: 20px;
    color: var(--text-bright-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    text-decoration: none;
}

/* headB:네비게이션 메뉴 */
.headB ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.headB a {
    display: block;
    padding: 13px;
    color: var(--text-bright-color);
    font-size: 16px;
    text-decoration: none;
}

.headB a:hover {
    background-color: rgba(0, 0, 0, 0.3);
}


/* ======================================= */
/* B. 모바일 스타일 (Max 767px) */
/* ======================================= */
@media (max-width: 767px) {

    /* 모바일 상단 바를 Flex로 정렬 (로고와 토글 버튼을 양쪽으로) */
    header .container-small {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* 메뉴(headB)는 기본 숨김 */
    .headB {
        display: none;
    }

    
    /* 토글 버튼 스타일 */
    .headC {
        margin-right: 10px;
        padding: 0;
        border: none;
        outline: none;
        background: none;
        font-size: 28px;
        opacity: 1;
        cursor: pointer;
        color: var(--text-bright-color);
    }

    .headC:hover {
        opacity: 0.7;
    }
}


/* ======================================= */
/* C. PC 스타일 (Min 768px) */
/* ======================================= */
@media (min-width: 768px) {

    /* 1. 헤더 컨테이너 중앙 정렬 및 Flex 설정 (핵심 수정) */
    header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;

        /* 👇 중앙 정렬 핵심: 최대 너비를 설정하고 좌우 마진을 자동으로 */
        max-width: var(--large-width);
        /* 1000px */
        margin: 0 auto;
    }

    /* 2. PC에서는 모바일 컨테이너의 Flex 속성을 해제 (레이아웃 간섭 방지) */
    header .container-small {
        display: block;
    }

    /* 3. PC에서는 모바일 관련 요소 숨김/표시 */
    .headC {
        display: none;
    }

    .headB {
        display: block !important;
    }

    /* 4. 메뉴 가로 정렬 */
    .headB ul {
        display: flex;
    }
}


/* ============================================== */
/* C. 메인 콘텐츠 섹션 (conA, conB, conC, conD, conE) */
/* ============================================== */

/* 스와이퍼 양옆 화살표 숨기기 */
.swiper-button-next,
.swiper-button-prev {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

/* 스와이퍼 페이지네이션 점 색상 수정 */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
}

.swiper-pagination-bullet-active {
    background: #ffffff !important;
}


/* 콘텐츠A: main-banner-image 히어로 이미지 */
.conA {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    min-height: 450px;
    background-image: url(img/frame_1.png);
    background-position: center;
    background-size: cover;
    color: var(--text-bright-color);
    text-align: center;
}

/* ============================================== */
/* H. ARTWORK 페이지 히어로 이미지 전용 스타일 (수정됨) */
/* ============================================== */

/* 새로운 히어로 섹션 스타일 */
.conA-modified {
    margin-top: 40px; /* about.html의 about-hero 섹션과 비슷한 위쪽 여백 */
    margin-bottom: 40px; /* 아래쪽 여백 */
    text-align: center; /* 이미지를 중앙 정렬 */
}

.conA-modified .container {
    max-width: 100%; /* 부모(page-frame)의 너비를 따름 */
    padding: 0; /* page-frame 패딩을 활용하기 위해 자체 패딩 제거 */
}

.conA-modified img {
    display: block; /* 이미지 아래 불필요한 공백 제거 */
    width: 100%; /* 컨테이너 너비에 꽉 채움 */
    height: auto; /* 비율 유지 */
    object-fit: cover; /* 이미지가 잘리지 않게 조정 */
    max-height: 450px; /* about 페이지 상단 이미지들과 높이를 유사하게 맞춤 (조절 가능) */
    /* 현재 artworks 페이지의 상단 이미지는 두 인물 이미지 (좌우 분할)와 비슷하므로,
       여기서는 가로로 긴 이미지를 통으로 가정하고 높이 제한을 두었습니다. */
}


/* 모바일에서는 이미지의 높이를 좀 더 유연하게 조정 */
@media (max-width: 767px) {
    .conA-modified {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .conA-modified img {
        max-height: 300px; /* 모바일에서 높이 줄이기 (조절 가능) */
    }
}



/* ============================================== */
/* H. ARTWORK 페이지 히어로 이미지 정렬 수정 */
/* ============================================== */

/* 1. 기존 배경 이미지를 제거하여 <img> 태그가 노출되게 함 */
.conA.compact {
    background-image: none !important; /* 배경 이미지를 강제로 없앰 */
    height: auto !important; /* 높이도 콘텐츠(이미지)에 맞춰지도록 변경 */
    min-height: 0 !important; /* 최소 높이 설정 해제 */
    padding: 0 !important; /* 불필요한 패딩 제거 */
}

/* 2. 삽입된 <img> 태그가 부모(.container)에 꽉 차도록 설정 */
.conA.compact .container img {
    display: block;
    width: 100%; /* 부모 컨테이너(.container) 너비에 꽉 채움 */
    height: auto;
    margin: 0 auto; /* 혹시 모를 경우 중앙 정렬 */
}

/* 3. conA 섹션의 상하 여백을 ABOUT 페이지와 유사하게 조정 */
.conA.compact {
    margin-top: 40px;
    margin-bottom: 40px;
}


/* 스와이퍼 전체를 화면 높이로 */
.swiper {
    position: relative;
    width: 100%;
    height: 100vh;
}

/* 각 슬라이드 기본 */
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
}

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

/* 전체 위에 얹는 오버레이 */
.hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    pointer-events: none;
    z-index: 5;
}

/* 텍스트, 버튼 스타일 */
.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 3rem;
    margin: 0 0 10px;
}

.hero-subtitle {
    margin: 0 0 25px;
    font-size: 1rem;
    letter-spacing: 0.25em;
}

.hero-btn {
    pointer-events: auto;
    display: inline-block;
    padding: 10px 40px;
    border: 1px solid #fff;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.hero-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}


.hero-sns {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: #ffffff;
}

.hero-sns ul {
    display: flex;
    margin: -15px;
    padding: 0;
    list-style: none;
    gap: 15px;
    justify-content: center;
}

.hero-sns a {
    display: block;
    color: inherit;
    font-size: 1.1rem;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.hero-sns a:hover {
    opacity: 1;
}

.hero-sns p {
    font-size: 1rem;
    color: #fff;
    padding: 40px 0 20px 0;
    text-align: center;
    /* 텍스트 자체 중앙 정렬 */
    max-width: 800px;
    margin: 0 auto;
    /* 블록 요소 중앙 정렬 */
}

/* 폰트가 작아서 잘 안 보일 경우 (선택 사항) */
@media (max-width: 599px) {
    .hero-sns {
        bottom: 20px;
    }
}

@media (max-width: 767px) {
    .hero-sns p {
        white-space: nowrap;
        font-size: 0.6rem;
        padding: 30px 0 10px 0;
        /* 모바일에서 상하 패딩도 줄여 공간 확보 */
    }
}


.conA.compact {
    height: 450px;
    min-height: 0;
    background-image: url(img/frame_1.png);
}

.conA h1 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 15vw;
}

.conA p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 18px;
}


/* PC -콘텐츠A: main-banner-image  [width=768px]를 기준으로*/
@media (min-width: 768px) {
    .conA h1 {
        font-size: 115px;
    }

    .conA p {
        font-size: 24px;
    }
}

/* M 콘텐츠 B: 개요(icon+text)*/
.conB .container {
    padding-top: 80px;
    padding-bottom: 20px;
}

.conB .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    text-align: center;
}

.conB h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
}

.conB p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}

.conB a {
    color: var(--main-color);
    text-decoration: none;
    transform: scale(0.98);
    transition: 0.3s;
}

.conB a:hover {
    text-decoration: underline;
    transform: scale(1.2);
}

.conB i {
    font-size: 50px;
    color: #31523c;
    margin-bottom: 10px;
    transform: scale(0.98);
    transition: 0.3s;
}

.conB i:hover {
    transform: scale(1.2);
}


/* pc -콘텐츠B: 개요(아이콘+글자) [width=768px]를 기준으로*/
@media (min-width: 768px) {
    .conB .container {
        display: flex;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
    }

    .conB .text {
        flex: 1;
    }
}


/* M 콘텐츠 C: 개요(icon+text)*/
.conC {
    background: url(img/conC_bg.jpg)fixed;
    /* fixed 해야 고정이 됨 */
    min-height: 500px;
    color: var(--text-bright-color);
    background-size: cover;
}

.conC .text {
    padding: 20px;
}

.conC h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
}

.conC p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}

.conC a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 30px;
    border: solid 3px currentColor;
    border-radius: 6px;
    background-color: var(--accent-color);
    color: var(--text-bright-color);
    font-size: 14px;
    text-decoration: none;
}

.conC a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
}

.conC .photo img {
    position: center;
    padding: 50px;

}

/* pc -콘텐츠C: 개요(아이콘+글자) [width=768px]를 기준으로*/
@media (min-width: 768px) {
    .conC .container {
        display: flex;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
    }

    /* 가운데 오게 하기 */
    .conC .photo {
        flex: 3;
        padding-top: 100px;
    }

    .conC .text {
        flex: 2;
        padding: 180px 0;
    }
}


/* M 콘텐츠 D: 개요(icon+text)*/
.conD .container {
    padding-top: 2px;
}

.conD .text {
    padding: 20px;
}

.conD h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
}

.conD p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}

.conD a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 30px;
    box-shadow: 0 0 0 1px #888;
    border: solid 3px currentColor;
    border-radius: 6px;
    background-color: var(--accent-color);
    color: var(--text-bright-color);
    font-size: 14px;
    text-decoration: none;
}

.conD a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
}

.conD .photo {
    min-height: 300px;
    background-image: url(img/art.jpg);
    background-position: center;
    background-size: cover;

}

/* pc -콘텐츠D: 개요(아이콘+글자) [width=768px]를 기준으로*/
@media (min-width: 768px) {
    .conD .container {
        display: flex;
        flex-direction: row-reverse;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .conD .photo {
        flex: 0 0 400px;
    }

    .conD .text {
        flex: 1;
        padding: 50px;
    }
}

/* 콘텐츠E : 비디오 */
.conE {
    background-color: var(--main-color);
    color: var(--text-bright-color);
}

.conE video {
    padding-top: 50px;
    width: 100%;
}

/* PC-콘텐츠 E; 개요 (image + text) [width=768px]를 기준으로 */
@media (min-width: 768px) {
    .conE .container {
        display: block;
        /* 🚨 width: 1500px을 삭제하여 page-frame의 너비를 따르도록 합니다. */
        margin-left: auto;
        margin-right: auto;
    }
}

/* 모바일 */
@media (max-width: 767px) {
    /* 기존 스타일에서 conE 섹션의 상하 여백을 줄여줍니다. */
    .conE {
        /* 예시: PC에서 80px이라면 모바일에서 30px로 줄입니다. */
        margin-top: 30px; 
        margin-bottom: 30px;
    }
    
    /* conE 컨테이너 내부의 패딩도 확인하여 줄여줍니다. */
    .conE .container {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.page-heading {
    padding-top: 50px;
    font-size: 2rem;
    text-align: center;
    color: #a83430;
    
}

/* 모바일 (767px 이하) 최적화 */
@media (max-width: 767px) {
    .page-heading {
        font-size: 24px;
        letter-spacing: 3px;
        margin-top: 40px;
        margin-bottom: 20px;
    }
}

/* ============================================== */
/* D. FOOTER 푸터 */
/* ============================================== */

/* footer 푸터 */
/* 푸터 전체 배경 및 텍스트 색상 */
footer {
    background-color: #ffffff;
    color: #000000;
    padding: 40px 0 20px 0;
    text-align: center;
}

.footer-wrap {
    max-width: 800px;
    margin: 0 auto;
}

/* 안내 텍스트 스타일 */
.footer-text {
    margin: 0 0 15px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #444;
}

/* SNS 아이콘 컨테이너 */
.footer-sns ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 8px;
}

.footer-sns a {
    display: block;
    color: inherit;
    font-size: 1rem;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-sns a:hover {
    opacity: 1;
    color: #a83430;
}

/* 푸터C: 저작권 */
.footC {
    font-size: 12px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}


/* 푸터D: SNS 메뉴*/
.footD {
    margin-top: 20px;
}

.footD ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footD a {
    display: block;
    margin-right: 8px;
    padding: 0;
    color: inherit;
    font-size: 16px;
    text-decoration: none;
    border: solid 1px currentColor;
    width: 2em;
    line-height: 2em;
    border-radius: 50%;
    text-align: center;
}

.footD a:hover {
    background-color: rgba(0, 0, 0, 0.3);
}


/* ============================================== */
/* E. PRODUCT LIST 페이지 스타일 */
/* ============================================== */

/* product_a 소개 */

.listA {
    /* 배경 이미지 설정 */
    background-image: url('img/art_back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    color: #ffffff;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;

}


.listA h1 {
    padding-top: 50px;
    padding-bottom: 20px;
    font-size: 2rem;
    text-align: center;
}

.listA .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
    margin: 30px auto;
}

.listA article {
    flex: 0 0 calc(33.33% - 20px);
    margin: 10px;
    display: flex;
    flex-direction: column;
    border: solid 2px var(--gray-color);
    background-color: #fff;
    box-sizing: border-box;
    min-height: 0;
}

/* 링크 태그 내부 스타일 */
.listA a {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 텍스트 영역 */
.listA .text {
    padding: 20px;
    text-align: left;
    flex-grow: 1;
}

/* 제목 스타일 */
.listA .text .title {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 5px;
    font-weight: bold;
    color: #C41F25;
}

/* 날짜 스타일 */
.listA .text .date {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.2;
    color: #666;
}

/* 이미지 컨테이너 */
.listA .photo-wrap {
    overflow: hidden;
    position: relative;
    height: 0;
    padding-bottom: 75%;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

/* 마우스 오버 시 이미지 컨테이너에만 배경색 및 투명도 적용 */
.listA a:hover .photo-wrap {
    background-color: #f5f5f5;
    opacity: 0.8;
}

/* 이미지 스타일 */
.listA .photo-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* 기존 불필요한 p 태그 숨기기 */
.listA p:not(.date) {
    display: none;
}


/* --- 반응형 디자인 추가 (모바일에서는 1열) --- */
@media (max-width: 767px) {
    .listA .container {
        margin: 20px auto;
        padding: 0 10px;
    }

    .listA article {
        flex: 0 0 calc(100% - 20px);
        /* 모바일 1열 */
        margin: 10px 0;
    }

    .listA .text {
        padding: 10px;
        /* 💡 수정: 모바일 텍스트 패딩 조정 */
        flex-grow: 1;
    }

    .listA .photo-wrap {
        padding-bottom: 60%;
        /* 모바일에서 약간 더 넓은 비율로 설정 (선택 사항) */
        height: 0;
    }
}

/* 태블릿 (768px ~ 999px)에서는 2열 */
@media (min-width: 768px) and (max-width: 999px) {
    .listA article {
        flex: 0 0 calc(50% - 20px);
        /* 태블릿 2열 */
    }
}

/* product_b 소개 */
.listB h1 {
    font-size: 2rem;
    text-align: center;
}

.listB .container {

    display: flex;
    flex-wrap: wrap;
    max-width: var(--large-width);
    margin: 30px auto;
}

.listB article {
    flex: 1 1 384px;
    display: flex;
}

.listB a {
    flex: 1;
    margin: 10px;
    display: flex;
    border: solid 1px var(--gray-color);
    color: inherit;
    text-decoration: none;
}

.listB a:hover {
    opacity: 0.8;
    background-color: #252d28;
    color: #ddd;
}

.listB .photo {
    flex: 2;
    min-height: 0;
    background-position: center;
    background-size: cover;
}

.listB .text {
    flex: 3;
    margin: 10px;
}

.listB h2 {
    font-size: 18px;
}

.listB p {
    font-size: 14px;
    opacity: 0.8;
}


/* 작품에 대한 설명이 많을 때 사용 */
/* 너비가 600px 이하의 미디어에서 */
@media (max-width: 384px) {
    .listB .photo {
        flex: 1;
    }

    .listB p {
        display: none;
    }
}



/* ============================================== */
/* F. CONTACT 페이지 스타일 */
/* ============================================== */

/* 문의 페이지: 문의 대상 */
.contact {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    border: solid 1px var(--gray-color);
    text-align: center;
}

.contact span {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 2.2rem;
    width: 2em;
    line-height: 2em;
    border-radius: 50%;
    text-align: center;
    background-color: var(--main-color);
    color: var(--icon-color);
}

.contact h2 {
    margin-top: 0;
    font-size: 1.2rem;
}

.contact a {
    font-size: 1.4rem;
    color: inherit;
    text-decoration: none;
}


/* 3개일 경우 */
@media (min-width: 768px) {
    .contact-wrap {
        display: flex;
    }

    .contact {
        flex: 1;
        margin-right: 20px;
    }

    .contact:first-child {
        margin-right: 20px;
    }

    .contact:last-child {
        margin-right: 0;
    }
}


/* 문의 페이지: 지도 */

.location iframe {
    width: 100%;
    height: 400px;
    vertical-align: bottom;
}

.location h2 {
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: var(--main-color);
    color: var(--text-bright-color);
    font-size: 1.5rem;
    text-align: center;
}

@media (max-width: 767px) {
    
    /* ============================================== */
    /* 🚨 CONTACT 페이지 스타일 수정 */
    /* ============================================== */
    
    /* 1. PC용 히어로 섹션 숨기기 */
    .contact-hero {
        display: none !important; /* PC용 히어로를 모바일에서 완전히 숨김 */
    }

    /* 2. 모바일 전용 히어로 섹션 보이기 및 스타일 */
    .contact-hero-mobile {
        display: block !important; /* 모바일에서만 보이게 함 */
        width: 100% !important; 
        margin-bottom: 20px;
    }
    .contact-hero-mobile img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* 3. 🚨 텍스트 자간(글자 깨짐) 및 크기 문제 해결 */
    .contact-headline {
        letter-spacing: 0em !important; /* 자간(깨짐) 초기화 */
        font-size: 24px !important; /* 폰트 크기 조정 */
        line-height: 1.2 !important; /* 줄 간격 조정 */
        text-align: left !important; /* 왼쪽 정렬 */
        padding: 0 20px !important; /* 좌우 여백 추가 */
    }
    
}

/* 🚨 @media 바깥 (PC 영역)에서는 모바일 히어로 숨기기 */
.contact-hero-mobile {
    display: none;
}


/* ============================================== */
/* G. ABOUT 페이지 (about.html) 전용 스타일 */
/* ============================================== */



/* 1. ABOUT 페이지 body에 배경 패턴 적용 */
.about-page-bg {
    background: linear-gradient(-45deg, #ebb3b5, #ffffff); 
    position: relative; 
    background-position: bottom;
    background-image: url('img/bottom_ba.png'), linear-gradient(-45deg, #ebb3b5, #ffffff);
    background-repeat: no-repeat;
    /* background-size: 300px 300px; 패턴 크기 (원하는 간격에 맞게 조절 가능) */
    background-attachment: fixed;
}

/* 2. ARTWORK 페이지 body에 배경 패턴 적용 */
.artwork-page-bg {
    background: linear-gradient(-45deg, #ebb3b5, #ffffff); 
    position: relative; 
    background-position: bottom;
    background-image: url('img/bottom_ba.png'), linear-gradient(-45deg, #ebb3b5, #ffffff);
    background-repeat: no-repeat;
    /* background-size: 300px 300px; 패턴 크기 (원하는 간격에 맞게 조절 가능) */
    background-attachment: fixed;
   
    
}

/* 3. CONTACT 페이지 body에 배경 패턴 적용 */
.contact-page-bg {
    background: linear-gradient(-45deg, #ebb3b5, #ffffff); 
    position: relative; 
    background-position: bottom;
    background-image: url('img/bottom_ba.png'), linear-gradient(-45deg, #ebb3b5, #ffffff);
    background-repeat: no-repeat;
    /* background-size: 300px 300px; 패턴 크기 (원하는 간격에 맞게 조절 가능) */
    background-attachment: fixed;
}

/* 4. PLAN 페이지 body에 배경 패턴 적용 */
.plan-page-bg {
    background: linear-gradient(-45deg, #ebb3b5, #ffffff); 
    position: relative; 
    background-position: bottom;
    background-image: url('img/bottom_ba.png'), linear-gradient(-45deg, #ebb3b5, #ffffff);
    background-repeat: no-repeat;
    /* background-size: 300px 300px; 패턴 크기 (원하는 간격에 맞게 조절 가능) */
    background-attachment: fixed;
}


.page-bg {
    background-color: #e5e5e5;
    background-image: url('img/backtest.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.page-frame {
    max-width: 70% !important; /* 화면 전체 너비로 늘림, 부모 요소 제한 있다면 뚫지 못할 수 있음 */
    width: 100% !important; /* 명시적으로 100% 너비 */
    margin: 0 40 !important; /* 중앙 정렬 */
    padding: 40px 60px !important; /* 기존 패딩 유지 */
    background: #ffffff !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    /* 🚨 1. body의 기본 마진 및 여백 제거 */
    body {
        margin: 0 !important;
        padding: 0 !important;
        /* body의 배경색을 #ededed로 설정하여 page-frame이 차지하던 영역을 덮음 */
        background-color: #ffffff !important; 
    }

    /* 🚨 2. page-frame 제거 및 스타일 재정의 */
    .page-frame {
        max-width: 100% !important;
        margin: 0 !important; /* 외부 마진 제거 */
        padding: 20px !important; /* 내부 패딩은 적절히 유지 */
        
        /* 모바일에서는 page-frame의 흰색 배경과 그림자를 제거 */
        background: none !important; 
        box-shadow: none !important; 
    }

    /* 🚨 3. about 페이지의 body 배경색 덮어쓰기 (about 페이지 배경 이미지 제거) */
    body.about-page-bg {
        background-image: none !important; 
        background-color: #ffffff !important;
    }

    body.artwork-page-bg {
        background-image: none !important; 
        background-color: #ffffff !important;
    }

    body.contact-page-bg {
        background-image: none !important; 
        background-color: #ffffff !important;
    }

    body.plan-page-bg {
        background-image: none !important; 
        background-color: #ffffff !important;
    }
    
    /* 🚨 4. 푸터 스타일 조정 (푸터 배경은 흰색 유지) */
    footer {
        width: 100% !important;
        background-color: #ffffff !important; 
    }
}

/*  PC (800px 이상)에서만 흰색 종이만 넓히는 코드 */
@media (min-width: 800px) {
    .page-frame {
        max-width: 1600px;
        /* PC에서 원하는 너비로 확장 */
    }
}


/* G.2. 서브 페이지 공통 (ABOUT) */
.nohero .headA {
    color: #000 !important;
}

.nohero .headB a {
    color: #000 !important;
}

.nohero .headB a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* About 페이지 (nohero)에서 햄버거 아이콘 색상 수정 */
.nohero .headC {
    color: #000 !important;
    /* 흰색 배경에서 아이콘을 검은색으로 강제 변경 */
}


/* G.3. ABOUT 상단 2컷 이미지 레이아웃 (.about-hero) */
.about-hero {
    display: flex;
    gap: 24px;
    /* 두 이미지 사이 간격 */
    margin: 40px 0;
    /* 위·아래 여백 */
    padding: 0 100px;
}

/* 왼쪽: 정사각형 이미지 (오른쪽보다 작게) */
.hero-col-square {
    width: 220px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    overflow: hidden;
}

.hero-col-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 오른쪽: 가로로 긴 이미지 */
.hero-col-wide {
    flex: 1;
    height: 220px;
    overflow: hidden;
}

.hero-col-wide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================== */
/* H. ARTWORK 페이지 히어로 이미지 전용 스타일 (G.3. ABOUT 섹션 아래에 추가) */
/* ============================================== */

/* ============================================== */
/* J. 히어로 이미지 전체 화면 확장 및 정렬 */
/* ============================================== */

/* 1. 이미지 섹션 전체를 화면 너비로 확장 */
.full-width-hero {
    width: 100%; /* 화면 너비 100% 사용 */
    margin: 40px 0; /* 상하 여백 유지 */
}

/* 2. 기존의 artwork-hero-wide와 img 스타일은 그대로 사용 */
.artwork-hero-wide {
    /* 이 클래스는 더 이상 flex: 1이 필요 없지만, 높이 설정을 위해 유지 */
    height: 400px; 
    overflow: hidden;
}

.artwork-hero-wide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 잘려도 꽉 채우기 */
    object-position: center; 
    display: block;
}

/* 3. 모바일 처리 */
@media (max-width: 767px) {
    .full-width-hero {
        margin: 20px 0;
    }
    .artwork-hero-wide {
        height: 300px; 
    }
}


/* ============================================== */
/* Z. 모바일 반응형 설정 (768px 이하) */
/* ============================================== */

@media screen and (max-width: 768px) {
    
    /* 1. 흰색 종이 프레임 조정 */
    .page-frame {
        margin: 20px 0 !important; 
        padding: 20px 20px !important; 
    }
    
    /* 🚨 2. PC용 히어로 섹션 숨기기 (가장 확실하게 숨김) */
    .artwork-hero {
        display: none !important; 
    }

    /* 🚨 3. 모바일 전용 히어로 섹션 보이기 및 스타일 (가장 확실하게 보이게 함) */
    .artwork-hero-mobile {
        display: block !important; 
        width: 100% !important; 
        margin-bottom: 20px !important; 
    }
    .artwork-hero-mobile img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* 4. 헤드라인 글씨 자간/깨짐 해결 */
    .contact-headline {
        letter-spacing: 0em !important; 
        font-size: 24px !important; 
        line-height: 1.2 !important; 
        text-align: left !important; 
        padding: 0 20px !important; 
    }

    /* 5. 작품 목록 세로 쌓기 */
    .listA .container {
        display: flex !important; 
        flex-direction: column !important; 
        padding: 0 !important;
    }
    .listA article {
        width: 100% !important; 
        flex-basis: auto !important; 
        margin-bottom: 25px !important; 
    }
    
    /* 6. 푸터 조정 */
    footer .footer-wrap {
        padding: 10px 20px !important; 
    }
}

/* @media 밖 (PC/공통 영역)에 모바일용 히어로 기본 숨김 */
.artwork-hero-mobile {
    display: none; 
}

/* ============================================== */
/* I. ARTWORK 페이지 히어로 이미지 최종 확장 (Header & Menu 맞춤) */
/* ============================================== */

/* page-frame의 40px 패딩을 음수 마진으로 상쇄하여 이미지 영역 확장 */
.artwork-hero {
    display: flex;
    margin: 40px 0; /* 상하 여백 */
    
    /* 🚨 흰색 프레임의 좌우 패딩(40px)을 무시하고 확장 */
    margin-left: -40px !important; 
    margin-right: -40px !important;
    
    /* 확장된 영역 내에서 다시 40px 패딩을 주면 로고/메뉴 라인과 정확히 일치 */
    padding: 0 40px; 
    width: auto;
}

/* 모바일 (767px 이하) 처리 */
@media (max-width: 767px) {
    /* 모바일에서 page-frame의 패딩은 보통 10px이므로, 그에 맞춰 조정 */
    .artwork-hero {
        margin: 20px 0;
        margin-left: -10px !important;
        margin-right: -10px !important;
        padding: 0 10px; 
    }
}

/* ============================================== */
/* Z. 모바일 반응형 설정 (768px 이하) */
/* ============================================== */

@media screen and (max-width: 768px) {
    /* 기존에 말씀드렸던 .page-frame 조정 코드 (유지) */
    .page-frame {
        margin: 20px 0;
        padding: 20px 20px; 
    }

    /* 🚨 1. ARTWORK 작품 목록 컨테이너 설정 (.listA .container) */
    .listA .container {
        display: flex; /* Flexbox 레이아웃 사용 */
        flex-direction: column; /* 아이템들을 세로로 쌓음 */
        padding: 0;
    }
    
    /* 🚨 2. 개별 작품 아이템 (.listA article) 설정 */
    .listA article {
        /* 이전에 3개씩 나열하기 위해 설정했던 width/flex-basis를 무시하고 100% 사용 */
        width: 100%; 
        flex-basis: auto; 
        
        /* 모바일에서 아이템 간의 간격 조정 */
        margin-bottom: 25px; 
        
        /* border-box로 설정하여 패딩이 너비에 포함되도록 (안정성 강화) */
        box-sizing: border-box; 
    }
    
    /* 🚨 3. 작품 사진 영역 (.photo-wrap) 조정 (선택 사항) */
    .listA .photo-wrap {
        /* 모바일에서 사진 영역이 컨테이너 너비를 모두 차지하도록 */
        width: 100%;
        height: auto;
    }

    /* 4. 푸터 조정 (이전 설정 그대로 유지) */
    .footer-wrap {
        padding: 10px 20px; 
    }
    
    /* 추가: 상단 hero 영역의 글씨나 이미지 정렬이 깨졌을 경우를 위한 조정 */
    .artwork-hero {
        padding: 10px 0; /* 상하 패딩 조정 */
    }
    .artwork-hero img {
        width: 100%;
        height: auto;
    }

    .headC {
        display: block !important; /* 모바일에서 버튼이 보이도록 강제 */
    }
}

@media (max-width: 767px) {
	/* 작은 화면 전용 설정 */
	header .container-small {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}


/* G.4. 'WHO IS YUNI YOSHIDA?' 섹션 (.who) */
.who {
    max-width: var(--large-width);
    margin: 60px auto 40px;
    padding: 0 10px;
}

/* 위의 WHO IS YUNI YOSHIDA? 박스들 */
.who-heading {
    margin: 0 0 40px;
}

.who-line1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.18em;
    font-size: 1.1rem;
    margin-bottom: 8px;
    margin-left: 20o;
}

.who-line2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}

.who-word-box,
.who-name-box {
    display: inline-block;
    padding: 6px 18px;
    background-color: #000000;
    color: #ffffff;
}

.who-word-light {
    display: inline-block;
    margin-left: 6px;
}

.who-caption {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #C41F25;
}


.who-main {
    display: grid;
    grid-template-columns: 450px 1fr;
    /* 왼쪽 영역을 450px로 고정, 오른쪽은 남은 공간 */
    column-gap: 60px;
    /* 사진과 텍스트 사이 간격 (조정 가능) */
    margin-top: 40px;
    align-items: flex-start;
    /* 상단 정렬 */
    padding: 100 20px;
    /* 양쪽 여백 추가 */
    max-width: var(--large-width);
    /* 최대 너비 제한 */
    margin-left: auto;
    margin-right: auto;
}

.who-left {
    position: relative;

    padding-top: 20px;
    /* 텍스트 시작점에 맞춰 조정 */
}

/* GRAPHIC DESIGNER 텍스트 */
.who-role {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 24px;
    white-space: nowrap;
    position: static;
    /* 기본 흐름대로 배치 */
    top: auto;
    left: auto;
    padding-top: 25px;

}

/* 사진과 빨간 박스 위치 조정 */
.who-photo-wrap {
    position: relative;
    width: 300px;
    /* 사진 너비 (조정 가능) */
    margin-top: 10px;
    /* GRAPHIC DESIGNER 아래 간격 */
    margin-left: 60px;
    /* 이미지 시작 위치 조정 (오른쪽으로 밀기) */
    margin-top: -38px;
    z-index: 2;
    padding-left: 120px;
}

/* 빨간 박스 */
.who-redbox {
    position: absolute;
    left: 80px;
    /* 사진의 시작점에 맞춰 조정 */
    top: 50px;
    /* 사진의 위쪽으로 겹치게 (조정 가능) */
    width: 260px;
    /* 박스 너비 */
    height: 280px;
    /* 박스 높이 */
    background: #a83430;
    z-index: 1;
    padding-right: 50px;
}

.who-photo-wrap img {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
    object-fit: cover;
}

/* 아래 텍스트들 */
.who-bio-en {
    margin: 45px 0 4px;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: normal;
    /* 줄 바꿈 허용 */
    margin-bottom: 20px;
    /* 날짜와의 간격 */
    padding-left: 100px;
}


.birth-wrap {
    margin: 0 0 30px;
    /* 다음 텍스트와의 간격 */
}

.birth-line {
    font-size: 2rem;
    font-weight: 700;
    color: #a83430;
    line-height: 0.3;
    white-space: nowrap;
    /* 줄바꿈 방지 */
    padding-left: 350px;
    margin-top: 12px;
}

/* 오른쪽 프로필 텍스트 */

.who-right {
    padding-top: 20px;
    /* 왼쪽과 높이 맞추기 위해 조정 */
    text-align: left;
    /* 왼쪽 정렬 */
}

.who-name-ja {
    font-size: 2rem;
    color: #a83430;
    margin: 0 0 4px;
    padding-top: 20px;
    /* 위쪽 텍스트와의 간격 */
}

.who-name-en {
    font-size: 1rem;
    letter-spacing: 0.12em;
    margin: 0 0 32px;
}

.who-info h4 {
    font-size: 0.8rem;
    margin: 0 0 4px;
    font-weight: 700;
    padding-left: 0;
    /* PC 버전에서 적용되던 불필요한 패딩 제거 */
}

.who-info p {
    font-size: 0.9rem;
    margin: 0 0 10px;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 0;
    /* PC 버전에서 적용되던 불필요한 패딩 제거 */
}


/* G.5. 'INDEPENDENT ART DIRECTOR' 섹션 (.indep) */
/* --- INDEPENDENT SECTION PC 스타일 --- */

/* 1. 좌우 분할 설정 (Flexbox 사용) */
.indep-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 100px;
    padding: 0 40px;
    margin-left: 60px;
}

/* 2. 왼쪽 텍스트 영역 */
.indep-left {
    width: 45%;
    padding-top: 150px;
}

/* 상단 설명 텍스트 */
.indep-copy {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 세부 설명 텍스트와 세로선 */
.indep-detail {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 60px;
    padding-left: 20px;
    border-left: 2px solid #a83430;
}

/* 아래쪽 큰 텍스트 (INDEPENDENT ART DIRECTOR) */
.indep-tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    line-height: 1.05;
    color: #a83430;
    font-weight: 900;
}

.indep-tagline span {
    display: block;
}

.indep-right {
    position: relative;
    width: 50%;
    height: 400px;
}

/* 빨간 박스 (배경) */
.indep-red {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #a83430;
    z-index: 1;
    top: 70px;
    right: 0;
}

/* 포스터 이미지 */
.indep-right img {
    padding-top: 50px;
    position: absolute;
    width: 100%;
    max-width: 450px;
    height: auto;
    z-index: 2;
    top: 50px;
    right: 50px;
    display: block;
}


/* G.6. ABOUT 페이지 모바일 전용 미디어 쿼리 (~767px) */
/* 모바일 */
@media (max-width: 767px) {

    /* --- ABOUT HERO 2컷 이미지 모바일 (G.3) --- */
    .about-hero {
        flex-direction: column;
        gap: 16px;
        margin: 20px 0;
        padding: 0 16px;
    }

    .hero-col-square {
        width: 100%;
        aspect-ratio: 16 / 9;
        /* 모바일에서 가로로 길게 */
    }

    .hero-col-wide {
        display: none;
    }


    /* 카드 전체 여백 줄이기 */
    .page-frame {
        margin: 0;
        padding: 20px 10px;
    }

    /* independent 섹션: 위아래로 쌓기 */
    .indep-main {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-top: 100px;
        padding: 0 16px;
        margin-right: 40px;
    }

    .indep-left {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    .indep-copy {
        font-size: 1rem;
        line-height: 1.5;
        margin-top: 12px;
    }

    .indep-detail {
        font-size: 0.75rem;
        line-height: 1.6;
        padding-left: 0;
        border-left: none;
        margin-bottom: 20px;
        text-align: center;
    }

    .indep-tagline {
        font-size: 1.5rem;
        line-height: 1.05;
        margin-top: 24px;
        text-align: center;
    }

    .indep-tagline span {
        display: block;
    }

    .indep-right {
        width: 90%;
        height: 300px;
        margin-bottom: 20px;
    }

    .indep-right img {
        top: -30px;
        width: 100%;
        max-width: none;
        left: 5%;
        right: auto;
    }

    .indep-red {
        width: 300px;
        height: 120px;
        top: 0;
        right: 5%;
        padding-left: 20px;
    }


    /* WHO 섹션 모바일 레이아웃 수정 */
    .who-main {
        display: block;
        column-gap: 0;
        margin-top: 20px;
    }

    .who-heading {
        /* WHO IS YUNI YOSHIDA? 텍스트 블록 가운데 정렬 */
        text-align: center;
    }

    .who-role {
        /* GRAPHIC DESIGNER */
        text-align: center;
        margin-top: 100px;
        margin-bottom: 20px;
    }

    /* 1. "Yuni Yoshida was born..." 문장 숨기기 */
    .who-bio-en {
        display: none;
    }

    /* 2. 사진 프레임(`.who-photo-wrap`): 빨간 박스 위로 올리기 */
    .who-photo-wrap {
        position: relative;
        width: 250px;
        margin: 0 -60px 0;
        z-index: 2;
    }

    /* 3. 빨간 박스(`.who-redbox`): 사진 아래에 겹치도록 위치 조정 */
    .who-redbox {
        position: absolute;
        width: 200px;
        height: 260px;
        left: 0;
        transform: none;
        top: 20px;
        background: #a83430;
        z-index: 1;
        margin-left: 80px;
    }

    /* 4. 생년월일 텍스트(`.birth-wrap`) 숨기기 */
    .birth-wrap {
        display: none;
    }

    .who-right {
        padding-top: 0;
    }

    /* 이름은 가운데 정렬 유지 */
    .who-name-ja {
        padding-top: 10px;
        font-size: 1.5rem;
        text-align: center;
        padding-left: 0;
        padding-top: 50px;
    }

    .who-name-en {
        font-size: 0.9rem;
        margin-bottom: 20px;
        text-align: center;
        padding-left: 0;
    }

    /* 모든 프로필 설명(제목과 내용)은 왼쪽 정렬 */
    .who-info h4 {
        margin-top: 20px;
        text-align: left;
        padding-left: 20px;
        /* 좌우 여백을 위해 20px 패딩 유지 */
    }

    .who-info p {
        text-align: left;
        padding-left: 20px;
        /* 좌우 여백을 위해 20px 패딩 유지 */
    }

    .who-caption {
        margin-bottom: 30px;
    }
 }


  /* 모바일 메인 배너 이미지 경로 수정 */
   /* .conA {
        background-image: url(img/mobile_conA_bg.jpg);
        background-position: center;
        background-size: cover;
    }*/

    /* .conA.compact도 함께 변경 (compact 클래스를 사용할 경우) */
   /* .conA.compact {
        background-image: url(img/artwork_mo.png);
        background-position: center;
        background-size: cover;
    }

    body {
        background-image: none !important;
    }*/



/* ============================================== */
/* F. CONTACT 페이지 스타일 (최종 버전) */
/* ============================================== */

/* 메인 섹션 */

.contact-headline {
    font-size: 2.2rem;
    /* 멘트 크기 조절 */
    text-align: center;
    /* 텍스트 가운데 정렬 */
    margin: 30px 0 60px 0;
    /* 상/하단 여백 조절 */
    font-weight: 500px;
    letter-spacing: 3px;
    color: #C41F25;
    font-weight: 700;
    width: 100%;
    float: none;

}


/*
.contact-section {
    background-image: url('img/con-3.png');
    background-repeat: no-repeat; */
    /* 이미지를 반복하지 않음 */
   /* background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    background-color: #f0f0f0;


    /* 
    padding-top: 50px;
    padding-bottom: 50px;
} */

/* 컨테이너 */
.contact-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 1. 이미지 및 로고 영역 */
.contact-image-area {
    margin-bottom: 50px;
    padding: 0 100px;
}

.image-placeholder {
    width: 100%;
    height: 250px;
    background-color: #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    font-weight: bold;
}

/* 2. 연락처 정보 영역 (ADDRESS, EMAIL, SNS 레이아웃) */
.contact-main-info {
    display: flex;
    justify-content: space-between;
    /* 좌/우측 분리 */
    margin-bottom: 30px;
    padding: 0 100px;
    /* 이미지 영역과 동일한 좌우 여백 */
    margin-top: 20px;
}

/* 좌측 (ADDRESS, EMAIL) */
.contact-left {
    display: flex;
    flex-direction: column;
    width: 60%;
    gap: 40px;
    /* ADDRESS와 EMAIL 사이의 간격 */
}

/* 우측 (SNS) */
.contact-right {
    width: 30%;
    /* SNS 영역 너비 */
}

.contact-item {
    text-align: left;
}

.contact-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
    letter-spacing: 2px;
}

.contact-detail {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    word-break: break-all;
}

.contact-sub-detail {
    font-size: 0.9rem;
    color: #999;
    margin-top: 5px;
}

.contact-detail a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-detail a:hover {
    color: #a83430;
}

/* 3. 지도 영역 */
.contact-map-area {
    margin-top: 50px;
    padding: 0 100px;
    /* 이미지 영역과 동일한 좌우 여백 */
}

.contact-map-area iframe {
    width: 100%;
    height: 400px;
    border: 1px solid #ddd;
}


/* --- 반응형 (모바일) --- */
@media (max-width: 767px) {
    .contact-container {
        padding: 0 10px;
    }

    .contact-image-area,
    .contact-main-info,
    .contact-map-area {
        padding: 0 10px;
        /* 모바일에서 좌우 여백 줄이기 */
    }

    .contact-main-info {
        flex-direction: column;
        /* 세로로 쌓기 */
        gap: 40px;
    }

    .contact-left,
    .contact-right {
        width: 100%;
        /* 너비 꽉 채우기 */
    }

    .address-item {
        margin-bottom: 20px;
        /* 주소와 이메일 사이에 간격 추가 */
    }
}

.page-bg.contact-hero-bg {
    width: 100%;
    height: 500px;
    /* 원하는 높이로 조절하세요 */
    background-image: url('img/h_con1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;


}


/* --- 반응형 (모바일: 767px 이하에서만 적용) --- */
@media (max-width: 767px) {

    /* Contact 페이지 히어로 섹션에 모바일 전용 이미지 적용 */
    .page-bg.conA.compact.contact-hero-bg {
        background-image: url('img/m_test5.png');
        background-size: contain;
        /* 이미지가 잘리지 않게 비율 유지 */
        background-position: top center;
        /* 중앙 상단에 배치 */
        height: 380px;
    }

    .contact-container {
        padding: 0 10px;
    }

    .contact-image-area,
    .contact-main-info,
    .contact-map-area {
        padding: 0 10px;
    }
}

/* ... (기존 모바일 스타일은 여기에 그대로 유지) ... */
.contact-container {
    padding: 0 10px;
}

.contact-image-area,
.contact-main-info,
.contact-map-area {
    padding: 0 10px;
}

/* ============================================== */
/* F. CONTACT 페이지 SNS 아이콘 스타일 */
/* ============================================== */
.sns-list {
    list-style: none;
    /* 목록 기호 제거 */
    padding: 0;
    margin: 0;
}

.sns-list li {
    margin-bottom: 20px;
    /* 각 SNS 항목 사이의 세로 간격 */
}

.sns-list li:last-child {
    margin-bottom: 0;
    /* 마지막 항목 아래 간격 제거 */
}

.sns-list a {
    display: flex;
    /* 아이콘과 텍스트를 한 줄에 정렬 */
    align-items: center;
    /* 아이콘과 텍스트 수직 중앙 정렬 */
    text-decoration: none;
    /* 밑줄 제거 */
    color: #333;
    /* 텍스트 색상 */
    font-size: 1.1rem;
    /* 텍스트 크기 */
    transition: color 0.2s;
}

.sns-list a:hover {
    color: #a83430;
    /* 호버 시 색상 변경 */
}

.sns-list i {
    font-size: 1.3rem;
    /* 아이콘 크기 */
    margin-right: 15px;
    /* 아이콘과 텍스트 사이 간격 */
    width: 30px;
    /* 아이콘 너비 고정 (정렬 일관성) */
    text-align: center;
    /* 아이콘 중앙 정렬 */
}

/* 모바일 반응형: SNS 아이콘 크기 및 간격 조정 */
@media (max-width: 767px) {
    .sns-list li {
        margin-bottom: 15px;
        /* 모바일에서 간격 줄이기 */
    }

    .sns-list a {
        font-size: 1rem;
    }

    .sns-list i {
        font-size: 1.8rem;
        margin-right: 10px;
        width: 28px;
    }
}

/* ============================================== */
/* G. CONTACT 페이지 이메일 아이콘 스타일 */
/* ============================================== */
.email-link-wrap a {
    display: flex;
    /* 아이콘과 텍스트를 한 줄에 정렬 */
    align-items: center;
    /* 아이콘과 텍스트 수직 중앙 정렬 */
    text-decoration: none;
    /* 밑줄 제거 */
    color: #333;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.email-link-wrap a:hover {
    color: #a83430;
    /* 호버 시 색상 변경 */
}

.email-link-wrap i {
    font-size: 1.3rem;
    /* 아이콘 크기 (SNS와 동일하게) */
    margin-right: 15px;
    /* 아이콘과 텍스트 사이 간격 (SNS와 동일하게) */
    width: 30px;
    /* 아이콘 너비 고정 (SNS와 정렬 일관성) */
    text-align: center;
    /* 아이콘 중앙 정렬 */
}

/* 모바일 반응형: 이메일 아이콘 크기 및 간격 조정 */
@media (max-width: 767px) {
    .email-link-wrap a {
        font-size: 1rem;
    }

    .email-link-wrap i {
        font-size: 1.8rem;
        margin-right: 10px;
        width: 28px;
    }
}




/* ============================================== */
/* G. 지도 영역 스타일 (최종 - 내부 컨테이너 너비 맞추기) */
/* ============================================== */

/* 문의 페이지: 지도 */

.location iframe {
    width: 100%;
    height: 400px;
    vertical-align: bottom;
    /* 세로 정렬은 아래 */
}

.location h2 {
    margin: 0;
    padding-top: 70px;
    padding-bottom: 20px;
    background-color: #F7F7F7;
    color: #a83430;
    font-size: 1.5rem;
    text-align: center;
}

/* 모바일 반응형: */
@media (max-width: 767px) {
    .location {
        /* 모바일에서는 좌우 여백을 완전히 0으로 설정하여 화면을 꽉 채움 */
        padding-left: 0;
        padding-right: 0;
    }

    .location h2 {
        padding-left: 20px;
    }
}

/* ============================================== */
/* H. ARTWORK 페이지 전용 헤더 색상 설정 */
/* ============================================== */

/* 흰색 배경 프레임 안에서 헤더가 보일 수 있도록 텍스트 색상 강제 변경 */
.page-frame header .headA,
.page-frame header .headB a {
    color: #000000 !important; /* 글자색을 검은색으로 강제 변경 */
}

/* 마우스 오버 시 배경색도 흰색 프레임에 맞게 연하게 변경 */
.page-frame header .headB a:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}