/* ==================================================
   new_main.css - 신규 메인페이지 공통 스타일
   작성일: 2026-04-02
   적용: index_new.php, page_*.php
   ================================================== */

/* --- 기본 초기화 --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    /* [대체] 기존 onair_site.css 의 bg_main.png 배경 제거 */
    background: #fff;
    margin: 0;
    padding: 0;
}

/* ==============================================
   신규 고정 헤더 (#new_header)
   ============================================== */
#new_header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    /* 로고 확대에 맞춰 높이 140px로 증가 */
    background: #fff;
    /* border-bottom: 1px solid #e8e8e8; */ /* [제거] 헤더 하단 회색 선 */
    display: flex;
    align-items: center;
    /* justify-content: space-between 대신 컨테이너 내 항목 정렬 */
    padding: 0 36px;
    z-index: 1000;
}

/* 좌측 로고 이미지 */
.new_logo {
    display: block;
    text-decoration: none;
    height: 130px;
    /* 로고 세로 크기를 80px -> 120px로 대폭 확대 (1.5배) */
    flex-shrink: 0;
}

.new_logo img {
    height: 130px;
    width: auto;
    display: block;
}

/* 우측 네비게이션 - Times New Roman 스타일 */
.new_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* [v4] 전체 너비 고지, 메뉴 균등 분배 */
    flex-grow: 1;
    /* 남은 공간 모두 사용 */
    /* [v3: margin-left: 80px] [v4: margin-left: 44px] [v5] 로고-첫메뉴 간격 확대 */
    /* margin-left: 80px; */
    /* margin-left: 44px; */
    margin-left: 150px;
}

.new_nav a {
    font-family: 'Times New Roman', Times, serif;
    /* Times New Roman 글꼴 적용 */
    /* [v3: font-size: 26px] [v4] 약간 축소 [v5] 24px로 확대 */
    font-size: 24px;
    font-weight: 700;
    /* 볼드체 */
    color: #111;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.new_nav a:hover,
.new_nav a.current {
    color: #888;
}

/* ==============================================
   히어로 섹션 (index_new.php 전용)
   ============================================== */
#new_hero {
    position: relative;
    height: 100vh;
    /* 딱 100vh 가 되도록 채움 */
    padding-top: 140px;
    /* 고정 헤더 높이 140px 보정 */
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* 자식 요소들을 위아래로 배치 */
}

/* 텍스트를 화면 정중앙에 배치 */
.new_hero_center {
    /* [기존] top:140px; bottom:230px → 화면 전체 중앙으로 변경 */
    /* top: 140px; */
    /* bottom: 230px; */
    /* position: absolute; */
    /* inset: 0; */
    flex: 1; /* 남은 공간을 모두 차지해 메뉴와 스트립 사이 완벽히 중앙에 배치 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 브랜드 텍스트 */
.new_hero_text {
    display: flex;
    align-items: baseline;
    gap: 20px;
    user-select: none;  /* 드래그 텍스트 선택 방지 */
    cursor: default;    /* 텍스트 커서(I빔) → 일반 화살표로 고정 */
}

/* ON AIR : Times New Roman (Bold) */
.new_hero_text .hero_main {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    font-size: clamp(56px, 9vw, 108px);
    color: #111;
    line-height: 1;
    letter-spacing: -1px;
}

/* MODEL AGENCY : Times New Roman (Bold) */
.new_hero_text .hero_sub {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    /* [기존] font-size: clamp(14px, 2.2vw, 28px); */
    font-size: clamp(28px, 4.5vw, 54px); /* ON AIR 절반 크기 */
    color: #111;
    letter-spacing: 6px;
}

/* ==============================================
   포트폴리오 이미지 스트립 (히어로 하단)
   ============================================== */
#new_portfolio_strip {
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
    width: 100%;
    /* [기존] height 고정값 → aspect-ratio 16:9 로 변경 */
    /* height: 230px; */
    padding: 0 30px 0; /* 하단 들뜸 현상 방지를 위해 여백 0으로 딱 맞춤 */
    box-sizing: border-box;
}

#new_portfolio_strip ul {
    display: flex;
    gap: 0;                /* 이미지 사이 여백 제거 */
    align-items: flex-start; /* aspect-ratio 작동을 위해 stretch 해제 */
    /* [기존] height: 100%; */
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

#new_portfolio_strip ul li {
    flex: 1;
    aspect-ratio: 16 / 9;  /* 16:9 비율 자동 적용 */
    overflow: hidden;
    position: relative;
}

#new_portfolio_strip ul li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

#new_portfolio_strip ul li img {
    width: 100%;
    /* [기존] height: 230px → aspect-ratio 방식으로 변경 */
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* filter: grayscale(100%); 수정: 흑백에서 원본 컬러가 그대로 나타나게 반영 */
    filter: grayscale(0%);
    transition: filter 0.35s ease, transform 0.35s ease;
    display: block;
}

#new_portfolio_strip ul li:hover img {
    /* filter: grayscale(0%); 수정: 기존 코드 보존 */
    filter: grayscale(0%);
    transform: scale(1.04);
}

/* 제목/오버레이 숨기기 */
#new_portfolio_strip ul li strong,
#new_portfolio_strip ul li .pofol_over {
    display: none !important;
}

/* ==============================================
   서브 페이지 공통 레이아웃
   ============================================== */
.new_page_wrap {
    padding-top: 140px;
    /* 고정 헤더 높이 보정 */
    min-height: 100vh;
}

.new_page_content {
    max-width: 960px;
    margin: 0 auto;
    padding: 70px 40px 80px;
}

.new_page_title {
    text-align: center;
    margin-bottom: 50px;
}

.new_page_title h2 {
    font-family: 'Bodoni Moda', serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 38px;
    color: #111;
    letter-spacing: 4px;
    margin-bottom: 14px;
}

.new_page_title p {
    color: #c2c2c2;
    font-size: 13px;
    line-height: 20px;
}

/* --- Portfolio 페이지 그리드 --- */
#page_portfolio_grid ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 3px;
}

#page_portfolio_grid ul li {
    width: calc(25% - 3px);
    overflow: hidden;
    aspect-ratio: 1;
}

#page_portfolio_grid ul li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

#page_portfolio_grid ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(80%);
    transition: filter 0.3s ease, transform 0.3s ease;
    display: block;
}

#page_portfolio_grid ul li:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

#page_portfolio_grid ul li strong {
    display: none;
}

/* --- About 페이지 --- */
.about_icons_row {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 50px;
    list-style: none;
    padding: 0;
}

.about_icons_row li {
    text-align: center;
    width: 220px;
}

.about_icons_row li span {
    display: block;
    padding: 20px 0 8px;
    color: #111;
    font-size: 16px;
    font-weight: bold;
}

.about_icons_row li strong {
    color: #ed0e6e;
    font-size: 22px;
    font-weight: bold;
}

.about_body_text {
    color: #7d7d7d;
    line-height: 26px;
    font-size: 14px;
    max-width: 860px;
    margin: 0 auto;
}

/* --- Notice 페이지 --- */
#page_notice_frame {
    width: 100%;
    border: none;
    min-height: 600px;
    display: block;
}

/* --- Contact 페이지 --- */
.contact_info_row {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    list-style: none;
    padding: 0;
}

.contact_info_row li {
    flex: 1;
}

.contact_info_row .tit {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.contact_info_row li p {
    color: #7d7d7d;
    line-height: 24px;
}

/* --- 공통 푸터 --- */
#new_footer {
    height: 100px;
    background: #ebebeb;
}

.new_footer_inner {
    max-width: 960px;
    margin: 0 auto;
    padding-top: 20px;
    overflow: hidden;
    text-align: center;
}

.new_footer_inner img,
.new_footer_inner p {
    display: inline-block;
}

.new_footer_inner p {
    margin: 0;
    color: #acacac;
    line-height: 22px;
    font-size: 12px;
}

/* ==============================================
   [신규] 모바일 반응형 (Media Queries)
   ============================================== */
@media screen and (max-width: 768px) {
    /* 1. 헤더 구조 변경 및 메뉴 간격 최적화 */
    #new_header {
        height: auto;
        min-height: 110px;
        padding: 10px 10px 15px;
        flex-direction: column;
        justify-content: center;
    }
    .new_logo {
        height: 80px; /* 로고 크기 키움 */
        margin-bottom: 15px;
    }
    .new_logo img {
        height: 80px;
    }
    .new_nav {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 16px; /* 메뉴 상하좌우 여백 넓게 */
    }
    .new_nav a {
        font-size: 14px;
        letter-spacing: 0;
    }

    /* 2. 히어로 섹션 (텍스트 및 비율 조절, 스크롤 허용) */
    #new_hero {
        padding-top: 150px; /* 로고와 메뉴가 커졌으므로 패딩 증가 */
        min-height: 100vh;
        min-height: 100svh;
        height: auto; 
        overflow: visible; /* 5개 영상이 잘리지 않고 스크롤 되도록 허용 */
    }
    .new_hero_center {
        padding: 50px 0 60px; /* 메뉴바와 텍스트, 텍스트와 영상 사이 간격을 여유있게 넓힘 */
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .new_hero_text {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .new_hero_text .hero_main {
        font-size: 54px;
        text-align: center;
    }
    .new_hero_text .hero_sub {
        font-size: 20px;
        letter-spacing: 3px;
        text-align: center;
    }

    /* 3. 메인 포트폴리오 스트립 (각 5개 영상을 1행에 1개씩 5열(세로)로 배치하여 좌우 넓게) */
    #new_portfolio_strip {
        padding: 0 0 10px; /* 양옆 띄움 제거하여 100% 꽉차게 */
    }
    #new_portfolio_strip ul {
        flex-direction: column; /* 세로 나열 */
        gap: 4px; /* 영상 사이 4px 간격 */
    }
    #new_portfolio_strip ul li {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16/9;
    }

    /* 4. 서브페이지 공통 패딩 (포트폴리오 등 좌우 넓게) */
    .new_page_wrap {
        padding-top: 110px;
    }
    .new_page_content {
        padding: 30px 5px 60px; /* 좌우 여백을 최소 5px로 줄여 아주 넓게 */
    }
    .new_page_title h2 {
        font-size: 26px;
    }

    /* 5. 포트폴리오 뷰어 그리드 (2열로 유지하며 좌우 여백 축소) */
    #page_portfolio_grid ul {
        gap: 2px;
    }
    #page_portfolio_grid ul li {
        width: calc(50% - 1px);
    }

    /* 6. About & Contact 콘텐츠 세로 정렬 */
    .about_icons_row,
    .contact_info_row {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .contact_info_row li {
        text-align: center;
    }

    /* 7. 다음 지도 폭 100% 강제 적용 */
    .root_daum_roughmap {
        width: 100% !important;
    }

    /* 8. 푸터 레이아웃 단일화 */
    #new_footer {
        height: auto;
        padding-bottom: 20px;
    }
    .new_footer_inner img {
        float: none;
        display: block;
        margin: 0 auto;
    }
    .new_footer_inner p {
        float: none;
        margin: 15px 0 0;
        text-align: center;
        line-height: 18px;
    }
}