/* ------------------------ 공통 및 section1 ------------------------ */
@media (max-width: 1440px) {
    header {
        padding: 0 30px;
    }
    .side-nav {
        right: 22px;
    }
    .btn-top {
        right: 15px;
    }
    .section-tit {
        padding-top: 50px;
        font-size: 30px;
    }
    .section-header {
        padding: 0 30px 60px 30px;
    }
    .txt-fill-effect {
        margin-top: 25px;
    }
    .fill-txt {
        font-size: 45px;
    }
    #section1 .main-headline {
        left: 30px;
    }
    footer {
        padding: 50px 30px 30px 30px
    }
    footer > div {
        display: block;
    }
    footer .footer-top .footer-main-title {
        font-size: 80px;
        white-space: nowrap;
    }
    footer .footer-bottom {
        margin-top: 25px;
    }
    footer .footer-bottom .footer-partners {
        display: flex;
        align-items: flex-start;
        justify-content: end;
    }
    footer .footer-bottom .footer-partners > div .dot {
        display: none;
    }
    footer .footer-bottom .footer-partners > div {
        flex-direction: column;
        align-items: end;
        gap: 25px;
        width: 240px;
    }
    footer .footer-logo-top {
        margin-right: auto;
    }
    .footer-copyright {
        margin-top: 100px;
        justify-content: space-between;
    }
}

@media (max-width: 1280px) {
    body {
        font-size: 20px;
    }
    .section-tit {
        padding-top: 45px;
        font-size: 26px;
    }
    .fill-txt {
        font-size: 35px;
    }
    
    #section1 .main-headline {
        bottom: 85px;
    }
    #section1 .main-headline h1 {
        font-size: 65px;
    }
    #section1 .main-headline p {
        margin-top: 40px;
        font-size: 28px;
    }
    #section1 .main-headline .video-btn {
        margin-top: 45px;
    }
    footer .footer-top .footer-main-title {
        font-size: 70px;
    }
}

@media (max-width: 1023px) {
    header {
        height: 70px;
    }
    header .logo {
        width: 180px;
    }
    header .lang-select .btn-lang-slt {
        padding: 7px 0;
        width: 75px;
        font-size: 15px;
    }
    header .lang-select .btn-lang-slt {
        margin-right: 52px;
    }
    .side-nav {
        display: none;
    }
    .btn-mobile-menu {
        display: flex;
        top: 23px;
        right: 30px;
    }
    section:not(#section1, #section3, #section6, #section8) {
        height: calc(100vh - 70px);
    }
    .section-header {
        padding: 0 30px 45px 30px;
    }
    #section1 {
        min-height: 100dvh;
        height: 100dvh;
    }
    #section1 .main-headline h1 {
        font-size: clamp(42px, 6.4vw, 60px);
    }
    #section1 .main-headline p {
        margin-top: 16px;
        font-size: clamp(16px, 2.3vw, 22px);
    }
    #section1 .mouse_scroll {
        bottom: 25px;
    }
    #section1 .down-arrow-2 {
        margin-top: -9px;
    }
    .btn-top {
        padding: 8px 10px 8px 5px;
        font-size: 13px;
    }
    .btn-top::before {
        width: 17px;
        height: 10px;
    }
    footer .footer-top .footer-main-title span, footer .footer-top .footer-main-title br {
        display: none;
    }
    footer .footer-top .footer-main-title img {
        display: block;
        width: 100%;
    }
}

@media (max-width: 768px) {
    body {
        width: 100%;
        font-size: 16px;
        overflow-x: hidden;
    }
    header {
        padding: 0 15px;
        height: 58px;
    }
    header .logo {
        width: 143px;
    }
    header .lang-select .btn-lang-slt {
        padding: 6px 0;
        margin-right: 36px;
        width: 60px;
        font-size: 12px;
    }
    header .lang-select .btn-lang-slt::before {
        width: 13px;
        height: 13px;
        background-size: contain;
    }
    header .lang-select .btn-lang-slt::after {
        margin-left: 5px;
    }
    header .lang-select .lang-options {
        top: 30px;
        border-radius: 13px;
        width: 60px;
    }
    header .lang-select .lang-options button {
        padding: 0 8px;
        font-size: 12px;
    }
    header .lang-select .lang-options button:first-child {
        padding-top: 10px;
        padding-bottom: 5px;
    }
    header .lang-select .lang-options button:last-child {
        padding-top: 5px;
        padding-bottom: 10px;
    }
    .btn-mobile-menu {
        top: 18px;
        right: 15px;
    }
    .mobile-nav {
        width: 73.68%;
    }
    .section-tit {
        padding-top: 35px;
        font-size: 20px;
    }
    .fill-txt {
        font-size: 24px;
    }
    .section-header {
        padding: 0 15px 30px 15px;
    }
    footer {
        padding: 40px 15px 45px 15px;
    }
    .footer-partners > div {
        width: 23.28vw !important;
    }
    .footer-logo-top {
        width: 37.63vw !important;
    }
    footer .footer-bottom .footer-partners > div {
        gap: 10px;
    }
    footer .footer-bottom .footer-copyright {
        margin-top: 70px;
    }
    .footer-copyright p {
        font-size: 12px;
    }
    .btn-top {
        right: 0;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    .fill-txt {
        font-size: 24px;
    }
    #section1 .main-headline {
        left: 50%;
        bottom: 16vh;
        transform: translate(-50%, 0) !important;
        width: calc(100% - (15px + 15px)); 
        max-width: 520px;
        text-align: center;
    }
    #section1 .main-headline h1 {
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        font-size: 44px;
    }
    #section1 .main-headline h1 span {
        display: block;
        text-align: center;
    }
    #section1 .main-headline h1 span:first-child {
        margin-bottom: 17px;
    }
    #section1 .main-headline h1 br {
        display: none;
    }
    #section1 .main-headline p {
        margin-top: 35px;
        font-size: 20px;
    }
    #section1 .main-headline::after {
        top: calc(50% - 4vh);
        left: 50%;
        transform: translate(-50%, -50%);
        width: 115vw;
        height: 113.1vw;
        background-size: contain;
    }
    .main-headline .video-btn-wrapper {
        text-align: center;
    }
    #section1 .main-headline .video-btn {
        width: 30px;
        height: 30px;
        background-size: 6px auto !important;
    }
    #section1 .mouse_scroll { 
        bottom: 20px; 
        width: 20px;
    }
    #section1 .mouse {
        width: 20px;
        height: 33px;
    }
    #section1 .wheel {
        width: 3px;
        height: 7px;
    }
    #section1 .down-arrow-1, #section1 .down-arrow-2 {
        width: 12px;
        height: 12px;
    }
}

@media (orientation: landscape) and (max-width: 932px) and (hover: none) and (pointer: coarse) {
    header {
        height: 58px !important;
        padding: 0 15px !important;
    }
    header .logo {
        width: 143px;
    }
    body{
        font-size: 16px !important;
    }
    section:not(#section1, #section3, #section6, #section7, #section8) {
        height: calc(100svh - 58px) !important; /* iOS 주소창 변동에도 안정 */
        min-height: auto !important;
    }
    .section-header {
        padding: 0 15px 45px 15px;
    }
    .btn-mobile-menu { 
        top: 18px;
        right: 15px;
    }
    .section-tit {
        padding-top: 35px;
        font-size: 20px;
    }
    .fill-txt {
        font-size: 24px;
    }
    #section1 .main-headline {
        left: 15px;
        bottom: 8vh;
        transform: none;
        width: min(58vw, calc(100% - 30px));
        text-align: left;
        z-index: 2;
    }
    #section1 .main-headline h1 {
        font-size: clamp(24px, 5.6vw, 36px);
        line-height: 1.24;
        word-break: keep-all;
    }
    #section1 .main-headline p {
        margin-top: 10px;
        font-size: clamp(12px, 2.2vw, 16px);
    }
    #section1 .main-headline .video-btn {
        margin-top: 16px;
        width: 30px;
        height: 30px;
        background-size: 6px auto !important;
    }
    #section1 .mouse_scroll { 
        bottom: 20px; 
        width: 20px;
    }
    #section1 .mouse {
        width: 20px;
        height: 33px;
    }
    #section1 .wheel {
        width: 3px;
        height: 7px;
    }
    #section1 .down-arrow-1, #section1 .down-arrow-2 {
        width: 12px;
        height: 12px;
    }
    .side-nav { 
        display: none !important;
    }
    .btn-top {
        right: 0;
    }
}

/* === Portrait Tall(세로로 긴 화면) 전용 오버라이드 === */
/* 폭이 넓어도 세로가 더 길면 모바일 헤더/내비 패턴을 강제 */
@media (min-width: 769px) and (orientation: portrait) and (max-aspect-ratio: 3/4) {
    /* 헤더: 1023px 이하 분기의 톤을 유지(70px) */
    header {
        height: 70px;
        padding: 0 30px; /* ≤1023px 분기와 조화되게 */
    }
    header .logo {
        width: 180px;
    }
    header .lang-select .btn-lang-slt {
        margin-right: 52px;
        padding: 7px 0;
        width: 75px;
        font-size: 15px;
    }
    .side-nav { 
        display: none !important;
    }
    .btn-mobile-menu {
        display: flex !important;
        top: 23px;
        right: 30px;
    }
    .mobile-nav { 
        width: min(86vw, 560px);
    }
    section:not(#section1, #section3, #section6, #section8) {
        height: calc(100vh - 70px);
    }
    #section1 .main-headline {
        left: 50%;
        bottom: 30vh;
        transform: translate(-50%, 0) !important;
        width: calc(100% - (30px + 30px));
        max-width: 820px;
        text-align: center;
    }
    #section1 .main-headline h1 { 
        font-size: clamp(46px, 5.6vw, 64px);
    }
    #section1 .main-headline p  { 
        font-size: clamp(16px, 2.2vw, 22px); 
    }
    #section1 .main-headline::after {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80vw;
        height: 78.68vw;
        background-size: contain;
    }
    #section1 .mouse_scroll {
        bottom: 25px;
    }
    #section1 .down-arrow-2 {
        margin-top: -9px;
    }
}

/* 세로가 아주 긴 포트레이트(iPad Pro 등)에서 여유 더 주기 */
@media (orientation: portrait) and (min-height: 1000px) {
    header .logo {
        width: 180px; 
    }
    header .lang-select .btn-lang-slt {
        padding: 7px 0;
        width: 75px;
        font-size: 15px;
    }
    .mobile-nav { 
        width: min(80vw, 560px); 
    }
}

/* 4) 노치 기기 안전영역 보정 */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        #section1 .main-headline {
        width: calc(100% - (max(15px, env(safe-area-inset-left)) + max(15px, env(safe-area-inset-right))));
        }
    }
}

/* JS 훅: 필요 시 강제 오버라이드용 */
html.is-portrait .side-nav { 
    display: none !important;
}
html.is-portrait .btn-mobile-menu { 
    display: flex !important;
}


/* ------------------------ section2 ------------------------ */
@media (max-width: 1440px) {
    #section2 .left-column {
        padding-left: 30px;
    }
    #section2 .left-column .about-info-list {
        margin-top: 65px;
    }
    #section2 .left-column .about-info-list dd {
        margin-top: 15px;
    }
    #section2 .left-column .info-item + .info-item {
        margin-top: 45px;
    }
    #section2 .left-column .info-item span.badge {
        font-size: 14px;
    }
}
@media (max-width: 1280px) {
    #section2 .left-column .about-info-list {
        margin-top: 55px;
    }
    #section2 .left-column {
        padding-bottom: 45px;
    }
    #section2 .left-column .info-item span.badge {
        font-size: 12px;
    }
    #section2 .left-column .info-item + .info-item {
        margin-top: 35px;
    }
}
@media (max-width: 1023px) {
    #section2 {
        height: auto!important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    #section2 .inner {
        flex-direction: column;
        gap: 55px;
        height: 100%;
        min-height: 0;
    }
    #section2 .left-column, #section2 .right-column {
        flex: auto;
        overflow: visible;
    }
    #section2 .right-column {
        width: 100vw;
        height: 100vw;
    }
    #section2 .right-column .right-column-bg,
    #section2 .right-column .map-container{
        inset:0;
        transform:none;
    }
    #section2 .right-column .right-column-bg img{
        width:100%;
        height:100%;
        object-fit:cover;
    }
}
@media (max-width: 768px) and (orientation: portrait) {
    #section2 .inner{
        gap:45px;
    }
    #section2 .left-column .about-info-list dt {
        font-size: 16px;
    }
    #section2 .left-column .about-info-list dd {
        line-height: 1.3;
    }
    #section2 .left-column {
        padding: 0 15px;
    }
}

@media (orientation: landscape) and (max-width: 932px) and (hover: none) {

    section#section2{
        height: calc(100vh - 58px) !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    #section2 .inner{
        flex-direction: row !important;  /* 2열 강제 */
        /* align-items: center; */
        gap: 0;
        height: calc(100vh - 58px) !important;
    }
    #section2 .left-column{ 
        padding: 0 15px 40px 15px;
        text-align: left !important;
        overflow-y: scroll;
    }
    #section2 .left-column .info-item span:not(.badge) {
        font-size: 16px;
    }
    #section2 .right-column{
        margin-top: 0;
        flex: 0 0 50%;
        height: auto;
        aspect-ratio: auto;
    }
    #section2 .right-column .right-column-bg,
    #section2 .right-column .map-container { 
        position: absolute;
        inset: 0;
        transform: none;
        overflow: hidden;
    }
    #section2 .right-column .right-column-bg img, #section2 .right-column .map-container video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        object-position: center center;
        max-width: unset;

    }
    
    /* iPhone SE 가로에서 ‘모바일 중앙정렬 규칙’이 남아있을 때를 대비한 리셋 */
    #section2 .left-column .section-tit{ text-align: left !important; }
    #section2 .about-info-list{ text-align: left !important; }
}


/* iOS 노치 안전영역 보정 */
@supports (padding: max(0px)){
    @media (max-width: 768px){
        #section2 .left-column {
        padding-left:  max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
        }
    }
}

/* ─────────────────────────────────────────────
    Safe-area 보정 (노치)
   ───────────────────────────────────────────── */
/* @supports (padding: max(0px)) {
    @media (orientation: landscape) and (max-width: 932px) {
        #section2 .inner{
        padding-left:  max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
        }
    }
    @media (min-width: 769px) and (orientation: portrait) and (max-aspect-ratio: 3/4) {
        #section2 .inner{
        padding-left:  max(30px, env(safe-area-inset-left));
        padding-right: max(30px, env(safe-area-inset-right));
        }
    }
} */

/* ------------------------ section9 ------------------------ */
.only-mo{
    display: none;
}
#section9 .wave-wrap .map-yongsan {
    position: absolute;
    top: calc(50% + 4px);
    left: calc(50% + 35px);
    transform: translate(-50%, -50%);
    width: 58%;
}
#section9 .district-container > img{
    position: absolute;
    left: 50%;
    top: calc(50% + 16px);
    transform: translate(-50%, -50%);
}
#section9 .wave-wrap {
    position: absolute;
    top: calc(50% + 76px);
    left: calc(50% - 134px);
    transform: translate(-50%, -50%);
    width: 30.25vw;
    height: 30.25vw;
}
#section9 .wave-wrap .wave{
    left: 52%;
}

@media (max-width: 1800px){

    #section9 .wave-wrap {
        top: calc(50% + 66px);
        left: calc(50% - 122px);
    }

}
@media (max-width: 1680px){

    #section9 .wave-wrap {
        top: calc(50% + 62px);
        left: calc(50% - 112px);
    }

}

@media (max-width: 1480px){
    
    #section9 .wave-wrap {
        top: calc(50% + 66px);
        left: calc(50% - 95px);
        width: 31.25vw;
        height: 31.25vw;
    }
}

@media (max-width: 1440px){

    #section9 .section-header .section-txt {
        margin-top: 80px;
    }

}

@media (max-width: 1280px) {
    
    #section9 .wave-wrap {
        top: calc(50% + 50px);
        left: calc(50% - 82px);
        width: 33.25vw;
        height: 33.25vw;
    }
    #section9 .district-container > img {
        top: calc(50% + 33px);
        left: calc(50% + 35px);
        width: 64.62vw;
    }

    #section9 .section-header .section-txt {
        margin-top: 50px;
        font-size: 20px;
    }

}
@media (max-width: 1140px) {
    
    #section9 .wave-wrap {
        top: calc(50% + 48px);
        left: calc(50% - 65px);
        width: 37.25vw;
        height: 37.25vw;
    }
    #section9 .district-container > img {
        top: calc(50% + 38px);
        left: calc(50% + 36px);
        width: 67.62vw;
    }

}

@media (max-width: 1080px) {
    
    #section9 .wave-wrap {
        top: calc(50% + 50px);
        left: calc(50% - 52px);
        width: 41.25vw;
        height: 41.25vw;
    }
    #section9 .district-container > img {
        top: calc(50% + 35px);
        left: calc(50% + 50px);
    }
    
}

@media (max-width: 1023px) {

    #section9 .wave-wrap {
        top: calc(50% + 52px);
        left: calc(50% - 34px);
    }
    
    #section9 .section-header .section-txt {
        margin-top: 30px;
        font-size: 18px;
    }

}

@media (max-width: 900px) {

    #section9 .wave-wrap {
        top: calc(50% + 52px);
        left: calc(50% - 30px);
    }
    
}

@media (max-width: 768px) {
    .only-pc{
        display: none;
    }
    .only-mo{
        display: block;
    }
    #section9{
        height: calc(100vh - 10px) !important;
    }
    #section9 .inner{
        background: url('../../images/user/bg_sec09_mo.jpg') no-repeat bottom center/cover;
    }
    #section9 .wave-wrap {
        top: calc(64% + 52px);
        left: calc(50% - 30px);
    }

}

@media (max-width: 490px){

    #section9{
        height: calc(100vh - 120px) !important;
    }

}

@media (orientation: landscape) and (max-width: 932px) and (hover: none) {

    #section9 .inner{
        background: url('../../images/user/bg_sec09.jpg') no-repeat center/cover;
    }

}

/* ------------------------ section3 ------------------------ */
@media (max-width: 1280px) {
    .section3-1 .scroll-list li img {
        width: 100px;
        margin-bottom: 30px;
    }
    .section3-1 .scroll-list li .visual-text {
        font-size: 28px;
    }
    .section3-1 .scroll-list li .visual-text strong {
        margin-top: 15px;
        font-size: 45px;
    }
} 
@media (max-width: 1023px) {
    .section3-1 .goal-visuals {
        height: calc(100vh - 70px);
    }
    .section3-1 .scroll-list {
        flex-direction: column;
    }
    .section3-1 .scroll-list li {
        flex-grow: 1;
    }
    .section3-1 .scroll-list li.on {
        background-size: 45%;
    }
    .section3-1 .scroll-list li .visual-text {
        font-size: 20px;
    }
    .section3-1 .scroll-list li .visual-text strong {
        margin-top: 10px;
        font-size: 35px;
    }
    .section3-1 .scroll-list li img {
        width: 80px;
    }
}
@media (max-width: 768px) {
    .section3-1 .goal-visuals {
        height: calc(100vh - 58px);
    }
    .section3-1 .scroll-list li .visual-text strong {
        font-size: 24px;
    }
    .section3-1 .scroll-list li.on {
        background-size: 80%;
    }
}
@media (orientation: landscape) and (max-width: 932px) and (hover: none) {
    .section3-1 .goal-visuals {
        height: calc(100vh - 58px);
    }
    .section3-1 .scroll-list {
        flex-direction: row;
    }
    .section3-1 .scroll-list li .visual-text strong {
        font-size: 24px;
    }
}

/* section3-2 */
@media (max-width: 1550px) {
    .section3-2 .strategy-items .strategy-item .bi-title {
        font-size: 40px
    }
}
@media (max-width: 1440px) {
    .section3-2 .strategy-items .strategy-item {
        padding: 60px 30px;
    }
    .section3-2 .section-tit {
        padding: 55px 30px 55px 30px;
    }
    .section3-2 .strategy-items .strategy-item .si-section {
        width: auto;
    }
    .section3-2 .strategy-items .strategy-item .si-info-section {
        padding-left: 30px;
    }
}
@media (max-width: 1300px) {
    .section3-2 .strategy-items .strategy-item {
        flex-wrap: wrap;
        gap: 40px;
    }
    .section3-2 .strategy-items .strategy-item .si-img {
        width: 100%;
    }
    .section3-2 .strategy-items .strategy-item .bi-desc {
        margin-top: 50px;
    }
    .section3-2 .strategy-items .strategy-item .si-info-section {
        padding-left: 0;
    }
}
@media (max-width: 1023px) {
    .section3-2 .strategy-items .strategy-item .bi-title {
        font-size: 35px;
    }
    .section3-2 .strategy-items .strategy-item .bi-desc {
        font-size: 22px;
    }
    .section3-2 .strategy-items .strategy-item .bi-desc li {
        padding-left: 30px;
    }
    .section3-2 .strategy-items .strategy-item .bi-title strong {
        margin-top: 15px;
    }
}
@media (max-width: 768px) {
    .section3-2 .strategy-items .strategy-item {
        gap: 25px;
        padding: 40px 15px !important
    }
    .section3-2 .strategy-items .strategy-item .bi-title {
        font-size: 24px;
    }
    .section3-2 .strategy-items .strategy-item .bi-title strong {
        margin-top: 10px;
    }
    .section3-2 .strategy-items .strategy-item .section-num {
        font-size: 12px;
    }
    .section3-2 .strategy-items .strategy-item .section-title {
        font-size: 10px;
    }
    .section3-2 .strategy-items .strategy-item .bi-desc {
        margin-top: 35px;
        font-size: 16px;
    }
        .section3-2 .strategy-items .strategy-item .bi-desc li {
        padding-left: 20px;
    }
    .section3-2 .strategy-items .strategy-item .si-img {
        margin-top: 15px;
    }
}
@media (orientation: landscape) and (max-width:932px) and (hover:none) and (pointer:coarse){
    .section3-2 .section-tit {
        padding: 25px 15px;
    }
    .section3-2 .strategy-items .strategy-item {
        flex-direction: row;
        padding-left: 15px !important;
        padding-right: 15px !important;
        gap: 25px;
    }
    .section3-2 .strategy-items .strategy-item .si-info-section {
        padding-left: 0;
    }
    .section3-2 .strategy-items .strategy-item .si-img {
        width: 43.1%;
    }
    .section3-2 .strategy-items .strategy-item .bi-title {
        font-size: 24px;
    }
    .section3-2 .strategy-items .strategy-item .bi-title strong {
        margin-top: 10px;
    }
    .section3-2 .strategy-items .strategy-item .section-num {
        font-size: 12px;
    }
    .section3-2 .strategy-items .strategy-item .section-title {
        font-size: 10px;
    }
    .section3-2 .strategy-items .strategy-item .bi-desc {
        margin-top: 35px;
        font-size: 16px;
    }
}


/* ------------------------ section4 ------------------------ */
@media (max-height: 890px) {
    /* #section4 {
        height: auto !important;
        overflow: visible !important;
    } */
}
@media (max-width: 1440px) {
    #section4 .zone-info .zone-tit {
        margin-top: 45px;
        font-size: 45px;
    }
    #section4 .zone-info {
        padding: 60px 30px;
    }
}
@media (max-width: 1280px) {
    #section4 .zone-tabs li {
        flex: 1;
    }
    #section4 .zone-tabs li a {
        width: 100%;
    }
    #section4 .zone-content .zone-detail {
        margin-top: 90px;
    }
}
@media (max-width: 1023px) {
    #section4, #section4 .pin-container {
        height: auto ! important;
    }
    #section4 .pin-container .zone-wrap {
        position: static !important;
        flex-direction: column;
        opacity: 1 !important;
    }
    #section4 .zone-info {
        flex-basis: auto;
        text-align: center;
    }
    #section4 .zone-content .zone-detail {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        margin-top: 50px !important;
    }
    #section4 .zone-content .zone-detail dl dd {
        margin: 0 auto;
    }
    #section4 .zone-content .zone-desc {
        margin-top: 30px;
    }
    #section4 .visual {
        border-left: none;
        height: 100vw;
    }
    #section4 .zone-content .zone-tit p {
        margin-bottom: 20px;
        font-size: 26px;
    }
    #section4 .zone-content .zone-tit {
        font-size: 35px;
    }
    #section4 .zone-content .zone-detail img {
        height: 60px;
    }
    #section4 .visual .minimap {
        width: 200px;
        height: 178px;
    }
}
@media (max-width: 768px) {
    #section4 .visual .minimap {
        top: 15px;
        left: 15px;
        width: 130px;
        height: 125px;
        border-radius: 6px;
    }
    #section4 .zone-content .zone-tit {
        font-size: 24px;
    }
    #section4 .zone-content .zone-tit p {
        font-size: 20px;
        font-weight: 600;
    }
    #section4 .zone-tabs a {
        border-radius: 3px;
        font-size: 12px;
        pointer-events: all;
    }
    #section4 #zone-wrap01 .zone-tabs li:first-child a, #section4 #zone-wrap02 .zone-tabs li:nth-child(2) a, #section4 #zone-wrap03 .zone-tabs li:nth-child(3) a {
        font-weight: bold;
    }
    #section4 .zone-info {
        padding: 40px 15px;
    }
    #section4 .zone-content .zone-desc {
        word-break: keep-all;
        line-height: 1.3;
    }
    #section4 .zone-content .zone-detail {
        margin-top: 40px !important;
    }
    #section4 .zone-content .zone-detail dl {
        align-items: baseline;
    }
    #section4 .zone-content .zone-detail dl dt {
        width: 120px;
    }
    #section4 .zone-content .zone-detail img {
        margin-bottom: 0;
        height: 50px;
    }
    #section4 .zone-content .zone-detail dl dd .badge {
        width: 65px;
        font-size: 12px;
    }
}

@media (orientation: landscape) and (max-width:932px) and (hover:none) and (pointer:coarse){
    #wrap #section4 {
        height: 100% !important;
    }
    #section4 .pin-container .zone-wrap {
        flex-direction: row;
        border-top: 1px solid #a0a5b5;
    }
    #section4 .zone-tabs a {
        border-radius: 3px;
        font-size: 12px;
        pointer-events: all;
    }
    #section4 .visual {
        border-left: 1px solid #a0a5b5;
        height: auto;
    }
    #section4 .visual .minimap {
        top: 15px;
        left: 15px;
        width: 130px;
        height: 125px;
        border-radius: 6px;
    }
    #section4 .zone-content .zone-tit {
        font-size: 24px;
    }
    #section4 .zone-content .zone-tit p {
        font-size: 20px;
        font-weight: 600;
    }
    #section4 .zone-info {
        flex-basis: 41.67%;
        padding: 40px 15px;
        text-align: left;
    }
    #section4 #zone-wrap01 .zone-tabs li:first-child a, #section4 #zone-wrap02 .zone-tabs li:nth-child(2) a, #section4 #zone-wrap03 .zone-tabs li:nth-child(3) a {
        font-weight: bold;
    }
    #section4 .zone-content .zone-detail img {
        margin-bottom: 0;
        height: 50px;
    }
    #section4 .zone-content .zone-detail dl + dl {
        margin-top: 10px;
    }
    #section4 .zone-content .zone-detail {
        margin-top: 40px !important;
    }
    #section4 .zone-content .zone-detail {
        align-items: flex-start;
    }
    #section4 .zone-content .zone-detail dl {
        align-items: baseline;
    }
    #section4 .zone-content .zone-detail dl dt {
        width: 80px;
    }
    #section4 .zone-content .zone-detail dl dd {
        margin: unset;
    }
    #section4 .zone-content .zone-detail dl dd .badge {
        width: 65px;
        font-size: 12px;
    }
}

/* ------------------------ section5 ------------------------ */
@media (max-width: 1023px) {
    #section5 .feature-list {
        padding: 0 30px;
        width: 100%;
    }
    #section5 .feature-list li img {
        display: none;
    }
}
@media (max-height: 823px) {
    #section5 {
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 100px;
    }
}
@media (max-width: 768px) {
    #section5 {
        padding-bottom: 120px;
        background: url('../../images/user/m_bg_sec05.png') bottom center / auto 100% no-repeat !important;
        background-attachment: scroll !important;
        background-size: cover !important;
    }
    #section5 .feature-list li {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 15px 0;
    }
    #section5 .feature-list li span {
        font-size: 12px;
    }
    #section5 .feature-list li p {
        margin: 0 auto;
        padding-left: 30px !important;
        font-size: 15px;
        opacity: 1;
        line-height: 1.3;
        text-align: center;
        word-break: keep-all;
    }
}

@media (orientation: landscape) and (max-width:932px) and (hover:none) and (pointer:coarse) {
    #wrap #section5 {
        padding-bottom: 50px;
        height: 100% !important;
    }
    #section5 .section-header {
        padding: 0 15px 25px 15px;
    }
    #section5 .feature-list li {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 15px 0;
    }
    #section5 .feature-list li span {
        font-size: 12px;
    }
    #section5 .feature-list li p {
        margin: 0 auto;
        padding-left: 30px;
        font-size: 15px;
        opacity: 1;
        line-height: 1.3;
        text-align: center;
        word-break: keep-all;
    }
}

/* ------------------------ section6-1 ------------------------ */
@media (max-height: 900px) {
    .section6-1{
        padding-bottom: 45px;
        height: auto !important;
    }
}
@media (max-width: 1870px){
    .section6-1 {
        padding-bottom: 45px;
    }
}
@media (max-width: 1520px) {
    .section6-1 .stats-grid-wrapper .stat-card {
        padding: 20px;
    }
    .section6-1 .stat-card .stat-value {
        font-size: 50px;
    }
    .section6-1 .stat-card .stat-value .sub-unit {
        font-size: 20px;
    }
}
@media (max-width: 1440px) {
    .section6-1 .stats-grid-wrapper {
        --gap: 60px;
        padding: 0 30px;
    }
    .section6-1 .stats-grid-wrapper .stats-tit span {
        margin-right: 30px;
    }
}
@media (max-width: 1280px) {
    .section6-1 .stats-grid-wrapper .stats-tit {
        font-size: 26px;
    }
    .section6-1 .stats-grid-wrapper .stats-tit span {
        font-size: 20px;
    }
}
@media (max-width: 1080px) {
    .section6-1 .stats-grid-wrapper {
        flex-direction: column;
    }
    .section6-1 .bg {
        background: url('../../images/user/m_bg_sec06.png') center 100% no-repeat !important;
        background-size: cover !important;
    }
}
@media (max-width: 820px) {
    .section6-1 .txt-fill-effect {
        text-align: center;
    }
    .section6-1 .stats-grid-wrapper .stat-card {
        border-radius: 6px;
    }
    .section6-1 .stats-grid-wrapper .stats-tit {
        font-size: 20px;
    }
    .section6-1 .stats-grid-wrapper .stats-tit span {
        margin-right: 20px;
        padding-bottom: 3px;
        font-size: 15px;
    }
    .section6-1 .stat-card .stat-label, .section6-1 .stat-card .stat-value .sub-unit {
        font-size: 16px;
    }
    .section6-1 .stat-card .stat-value {
        margin-left: unset;
        font-size: 32px;
    }
}
@media (max-width: 768px) {
    .section6-1 .stats-grid-wrapper {
        --gap: 45px;
        margin-top: 55px;
        padding: 0 15px;
    }
    .section6-1 .stats-grid-wrapper .stats-grid {
        margin-top: 20px;
    }
    .section6-1 .stat-card .stat-value {
        font-size: 30px;
    }
}
@media (orientation: landscape) and (max-width:932px) and (hover:none) and (pointer:coarse) {
    .section6-1 .stats-grid-wrapper {
        --gap: 45px;
        margin-top: 55px;
        padding: 0 15px;
    }
    .section6-1 .stats-grid-wrapper .stats-grid {
        margin-top: 20px;
    }
    .section6-1 .stats-grid-wrapper .stats-tit {
        font-size: 20px;
    }
    .section6-1 .stats-grid-wrapper .stats-tit span {
        margin-right: 20px;
        padding-bottom: 3px;
        font-size: 15px;
    }
    .section6-1 .stat-card .stat-value {
        font-size: 30px;
    }
    .section6-1 .stat-card .stat-label, .section6-1 .stat-card .stat-value .sub-unit {
        font-size: 16px;
    }
}
/* @media (max-width: 1870px){
    .section6-1 .stats-grid {
        width: 83%;
    }
    .section6-1 .stat-card .stat-value { 
        font-size: 55px; 
    }
    .section6-1 .stat-card .stat-value .sub-unit { 
        font-size: 22px;
    }
    .section6-1 .grid-watermark {
        font-size: clamp(48px, 4.5vw, 80px);
    }
}

@media (max-width: 1730px) {
    .section6-1 {
        padding-bottom:100px;
    }
    .section6-1 .stats-grid{
        margin-top: 20px;
        width: 1390px;
    }
}

@media (max-width: 1520px) {
    .section6-1 .stats-grid {
        padding: 0 60px;
        width: 100% !important;
    }
    .section6-1 .stat-card {
        padding: 25px 20px 35px;
    }
    .section6-1 .stat-card .stat-value {
        font-size: 50px;
    }
    .section6-1 .stat-card .stat-value .sub-unit {
        font-size: 20px;
    }
}

@media (max-width: 1440px) {
    .section6-1 .stats-grid {
        padding: 0 30px;
    }
    .section6-1 .stat-card .stat-label {
        font-size: 18px;
    }
}

@media (max-width: 1280px) {
    .section6-1 .grid-watermark {
        display: none !important;
    }
    .section6-1 .stats-grid{
        --cols: 3;  
        margin-top: 40px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
        "card1 card2 card3"
        "card4 card5 card6";
        margin-right: auto !important;
        margin-left:  auto !important;
    }
    #section6 .section6-1 .stats-grid > .empty-cell,
    #section6 .section6-1 .stats-grid > .grid-watermark{
        display: none !important;
    }
}

@media (max-width: 820px) {
    .section6-1 .bg {
        background: url('../../images/user/m_bg_sec06.png') center 100% no-repeat !important;
        background-size: cover !important;
    }
    .section6-1 .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "card1 card2"
                             "card3 card4"
                             "card5 card6";
    }
    .section6-1 .txt-fill-effect {
        text-align: center;
    }
    .section6-1 .stat-card .stat-label, .section6-1 .stat-card .stat-value .sub-unit {
        font-size: 16px;
    }
    .section6-1 .stat-card .stat-value {
        margin-left: unset;
        font-size: 32px;
    }
    .section6-1 .stat-card {
        align-items: center;
        justify-content: center;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .section6-1 {
        padding-bottom: 45px;
    }
    .section6-1 .stats-grid {
        padding: 0 15px;
    }
    .section6-1 .stat-card {
        padding: 0 15px;
    }
    .section6-1 .stat-card .stat-label {
        gap: 7px;
    }
}

@media (orientation: landscape) and (max-width:932px) and (hover:none) and (pointer:coarse) {
    .section6-1 {
        padding-bottom: 50px;
        height: 100% !important;
    }
    .section6-1 .stats-grid {
        padding: 0 15px;
    }
} */


/* ------------------------ section6-2 ------------------------ */
@media (max-height: 890px) {
    .section6-2 {
        height: auto !important;
        padding-bottom: 100px;
    }
}
@media (max-width: 1440px) {
    .section6-2 .timeline-swiper {
        margin-left: 30px;
    }
    .section6-2 .bi { 
        width: 32%; top: 9%; right: 5%;
    }
}

@media (max-width: 1280px) {
    .section6-2 .bi { 
        width: 30%; top: 8%; right: 4%; 
    }
    .section6-2 .timeline-swiper .swiper-btn-wrapper > div {
        width: 85px;
        height: 40px;
    }
    #section6-2 .timeline-swiper .swiper-slide {
        width: 360px;
    }
    .section6-2 .timeline-swiper .swiper-btn-wrapper > div button {
        background-size: 9px;
    }
    .section6-2 .timeline-swiper .swiper-autoplay-toggle {
        width: 40px;
        height: 40px;
    }
    #section6-2 .timeline-swiper .swiper-wrapper::before {
        top: 47px;
    }
    .section6-2 .date-circle.pulse::before {
        top: 42px;
    }
}

@media (max-width: 1023px) {
    .section6-2 .point-text { 
        margin-bottom: 10px; 
        line-height: 1.25; 
    }
    .section6-2 .detail-text { 
        font-size: 14px; 
    }
    .section6-2 .date-circle::after { 
        margin-top: 14px;
        width: 22px; 
        height: 22px; 
    } 
    .section6-2 .date-circle.pulse::before { 
        top: 40px;
        left: 6px; 
        width: 10px; 
        height: 10px; 
    }
    .section6-2 .timeline-line { 
        top: 44px; 
    }
    .section6-2 .bi { 
        width: 90%; 
        top: auto;  
        bottom: 50%; 
        transform: translateY(50%); 
    }
}

@media (max-width: 768px) {
    .section6-2 {
        min-height: calc(100svh - 58px) !important;
        padding-bottom: 70px;
    }
    #section6-2 .timeline-swiper {
        position: absolute;
        left: 15px;
        right: 0;
        bottom: 12%;
        margin-left: 0;
    }
    #section6-2 .timeline-swiper .swiper-wrapper {
        margin-top: 40px;
    }
    #section6-2 .timeline-swiper .swiper-slide {
        width: 290px;
    }
    #section6-2 .timeline-swiper .swiper-btn-wrapper {
        gap: 10px;
    }
    #section6-2 .timeline-swiper .swiper-btn-wrapper > div {
        width: 60px;
        height: 30px;
    }
    #section6-2 .timeline-swiper .swiper-btn-wrapper > div button {
        background-size: 7px;
    }
    .section6-2 .timeline-swiper .swiper-autoplay-toggle {
        width: 30px;
        height: 30px;
        background-size: 6px;
    }
    .section6-2 .timeline-swiper .swiper-autoplay-toggle.is-paused {
        background-size: 7px !important;
    }
    .section6-2 .date-circle::after {
        margin-top: 18px;
    }
    #section6-2 .timeline-swiper .swiper-wrapper::before {
        top: 44px;
    }
}

@media (orientation: landscape) and (max-width:932px) and (hover:none) and (pointer:coarse){
    .section6-2 { 
        min-height: calc(100svh - 58px) !important
    }
    .section6-2 .timeline-swiper {
        position: relative;
        left: 15px;
        right: 0;
        bottom: 12%;
        margin-left: 0;
    }
    #section6-2 .timeline-swiper .swiper-wrapper {
        margin-top: 40px;
    }
    #section6-2 .timeline-swiper .swiper-slide {
        width: 290px;
    }
    #section6-2 .timeline-swiper .swiper-btn-wrapper {
        gap: 10px;
    }
    #section6-2 .timeline-swiper .swiper-btn-wrapper > div {
        width: 60px;
        height: 30px;
    }
    #section6-2 .timeline-swiper .swiper-btn-wrapper > div button {
        background-size: 7px;
    }
    .section6-2 .timeline-swiper .swiper-autoplay-toggle {
        width: 30px;
        height: 30px;
        background-size: 6px;
    }
    .section6-2 .timeline-swiper .swiper-autoplay-toggle.is-paused {
        background-size: 7px !important;
    }
    #section6-2 .timeline-swiper .swiper-wrapper::before {
        top: 41px;
    }
    .section6-2 .date-circle.pulse::before {
        top: 36px;
    }
}


/* ------------------------ section7 ------------------------ */
@media (max-width: 1550px) {
    #section7 .logo-container .logo-item {
        right: -100px;
    }
    #section7 .logo-container .logo-item.sh {
        left: -100px;
    }
    #section7 .partner {
        gap: 80px;
    }
    #section7 .partner ul {
        gap: 80px;
    }
}

@media (max-width: 1440px) {
    #section7 .logo-container .logo-item {
        right: -80px;
        height: 260px;
    }
    #section7 .logo-container .logo-item.sh {
        left: -80px;
    }
}

@media (max-width: 1366px) {
    #section7 .logo-container { 
        --overlap: clamp(24px, 5vw, 120px);
        gap: clamp(12px, 2vw, 24px);
        justify-content: center;
        align-items: center;
    }
    #section7 .logo-container .logo-item {
        position: relative;
        width: clamp(420px, 42vw, 640px);
        aspect-ratio: 830 / 310;
        height: auto;
        left: auto;
        right: auto;
        margin-inline: calc(var(--overlap) * -1.5);
        overflow: hidden;
    }
    #section7 .logo-container .logo-item.sh {
        left: auto;
    }
    #section7 .logo-container .logo-item .inner {
        left: 10%;
        transform: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    #section7 .logo-container .logo-item.sh .inner {
        right: 15%;
    }
    #section7 .logo-container .logo-item img {
        max-width: 80%;
        height:auto;
    }
    #section7 .logo-container .logo-item .logo-subtext {
        margin-top: 16px;
        font-size: 16px;
        line-height: 1.3;
    }
    #section7 .logo-container .intersect {
        z-index: 3;
        width: clamp(36px, 4vw, 45px);
    }
    #section7 .partner{
        gap: 60px;
        padding: 20px 30px;
        margin-top: 70px;
        height: auto; 
    }
    #section7 .partner ul {
        gap: 60px;
    }
    #section7 .partner li img{
        max-height: 45px;
        object-fit: contain;
    }
}

@media (max-width: 1280px){
    #section7 .logo-container { 
        --overlap: clamp(18px, 4.2vw, 80px);
        gap: 0;
    }
    #section7 .logo-container .logo-item{ width: clamp(380px, 46vw, 560px);  }
    #section7 .logo-container .logo-item img{ max-width:66%; }
    #section7 .logo-container .logo-item .logo-subtext{ font-size:15px; }
    #section7 .partner li img {
        max-height: 35px;
    }
}

@media (max-width: 1023px) {
    #section7 {
        height: auto !important; 
        min-height:0 !important;
        overflow-y: visible !important;
    }
    #section7 .logo-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;                          
        --v-overlap: clamp(18px, 5vw, 42px);
    }
    #section7 .logo-container .logo-item {
        display: flex;
        align-items: start;
        position: relative;
        left: auto !important;
        right: auto !important;
        width:min(86vw, 520px);
        margin:0;
        overflow:hidden;
    }
    #section7 .logo-container .logo-item .inner {
        position: static !important;
        top:auto; 
        left:auto; 
        right:auto; 
        transform:none;
        display:flex; 
        flex-direction:column; 
        align-items:center; 
        justify-content:center;
        text-align:center; 
        padding:30px 0; 
        margin:0 auto;
    }
    #section7 .logo-container .logo-item img{ 
        max-width:66%; 
        height:auto; }
    #section7 .logo-container .logo-item .logo-subtext{ 
        margin-top:12px; 
        font-size:14px; 
        line-height:1.3; 
    }

    /* '위/아래 겹침' 포인트: 위 카드 하단과 아래 카드 상단을 서로 파고들게 음수마진 부여 */
    #section7 .logo-container .logo-item.korail{
        margin-bottom: calc(var(--v-overlap) * -1.5);
    }
    #section7 .logo-container .logo-item.sh{
        margin-top: calc(var(--v-overlap) * -1.5);
        align-items: end;
    }

    /* 가운데 X는 겹침 위에 보이도록 */
    #section7 .logo-container .intersect{
        width:35px; 
        position:relative; 
        z-index:3; 
        margin:6px 0;
    }
    #section7 .logo-container .intersect img{ width:100%; height:auto; }

    /* 파트너: 고정높이 해제 + 랩핑 허용(절대 안 잘리게) */
    #section7 .partner{
        gap:30px; 
        height:auto !important;
        background:rgba(0,0,0,.28); 
        backdrop-filter:blur(5px);
    }
    #section7 .partner ul{ 
        display:flex; 
        gap:30px; 
        justify-content:center; 
        align-items:center; 
    }
    #section7 .partner li{ 
        max-width:150px; 
    }
    #section7 .partner li img{ 
        height:30px; 
        object-fit:contain; 
    }
}

@media (orientation: landscape) and (max-width:932px) and (hover:none) and (pointer:coarse){
    #section7{
        height:100% !important; 
        min-height:0 !important; 
        overflow-y:visible !important;
        background-attachment:scroll !important;
    }
    #section7 .logo-container{ 
        --v-overlap: clamp(8px, 2.2vh, 22px); 
        gap:0; 
    }
    #section7 .logo-container .logo-item{
        width: clamp(360px, 60vw, 520px);
    }
    #section7 .logo-container .logo-item img{ 
        max-width:58%; 
    }
    #section7 .logo-container .logo-item .logo-subtext{ 
        font-size:13px; 
    }
    #section7 .logo-container .intersect{ 
        width: clamp(28px, 5.2vh, 40px); 
        margin:4px 0; 
    }
    #section7 .partner{ 
        margin-top:40px; 
        gap:20px; 
        padding:8px; 
    }
    #section7 .partner p { 
        font-size: 16px;
    }
    #section7 .partner ul{ 
        gap:12px; 
    }
    #section7 .partner li{ 
        flex: 50%; 
        max-width:120px; 
    }
    #section7 .logo-container .logo-item.korail {
        margin-bottom: calc(var(--v-overlap) * -5.5);
    }
    #section7 .logo-container .logo-item.sh {
        margin-top: calc(var(--v-overlap) * -5.5);
    }
}

@media (max-width: 768px) {
    #section7 {
        /* overflow: unset; */
        overflow: hidden;
    }
    #section7 .logo-container .logo-item { 
        width: min(92vw, 460px); 
    }
    #section7 .logo-container .logo-item img { 
        max-width: 64%; 
    }
    #section7 .logo-container .logo-item .logo-subtext { 
        font-size: 13px; 
    }
    #section7 .partner { 
        gap: 20px; 
        flex-direction: column; 
        margin-top: 50px; 
        padding: 20px 0;
    }
    #section7 .partner p { 
        font-size: 16px; 
    }
    #section7 .partner ul {
        flex-wrap: wrap;
        gap: 0;
        justify-content: center;
    }
    #section7 .partner li {
        padding-bottom: 20px;
        width: 50%;
        max-width: unset;
    }
    #section7 .partner li img {
        margin: 0 auto;
    }
      #section7 .logo-container .intersect{
        width:30px;
    }
}
@media (max-width: 600px) {
    #section7 .logo-container {
        padding: 0 35px;
    }
    #section7 .logo-container .logo-item {
        width: 100%;
        height: 165px;
    }
    #section7 .logo-container .logo-item.korail {
        margin-bottom: -45px;
    }
    #section7 .logo-container .logo-item.sh {
        margin-top: -45px;
    }
} 
  @media (max-width:450px){
    #section7 .logo-container .logo-item{
        aspect-ratio:830 / 350;
    } 
    #section7 .logo-container .logo-item.korail {
        margin-bottom: calc(var(--v-overlap) * -2);
    }
    #section7 .logo-container .logo-item.sh {
        margin-top: calc(var(--v-overlap) * -2);
    }
    #section7 .logo-container .intersect {
        width: 25px;
    }
} 
@media (max-width:360px){
    #section7 .logo-container{ 
        --v-overlap: 16px; 
    }
    #section7 .logo-container .logo-item{ 
        width: 92vw; 
        border-radius:18px; 
    }
    #section7 .logo-container .logo-item img{
        max-width:56%; 
    }
}


/* ------------------------ section8 ------------------------ */
@media (min-width: 1025px) {
    .video-section .controls button {
        /* 기본적으로 버튼을 숨김 */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .video-section:hover .controls button {
        /* 호버 시 버튼을 보이게 함 */
        opacity: 1;
        visibility: visible;
    }
}
@media (max-width: 1870px) {
    #section8 .brand-section > div {
        padding: 30px;
    }
}

@media (max-width: 1795px) {
    #section8 .brand-section .brand-color {
        width: 42.6%;
    }
    #section8 .brand-section .brand-info {
        width: 29%;
    }
}

@media (max-width: 1715px) {
    #section8 .brand-section {
        flex-wrap: wrap;
        gap: 30px;
    }
    #section8 .brand-section > div {
        flex: 1;
    }
    #section8 .brand-section .brand-info {
        text-align: center;
    }
    #section8 .brand-section .brand-info img {
        margin: auto auto 35px;
    }
    #section8 .brand-section .brand-info .label {
        margin: 0 auto;
    }
    #section8 .brand-section .brand-element .element-item {
        justify-content: center;
    }
    #section8 .brand-section .brand-element .element-item > div, #section8 .brand-section .brand-element .element-item p {
        width: 200px;
    }
    #section8 .brand-section .brand-color {
        flex-basis: 100%;
        justify-content: center;
        gap: 55px;
    }
    #section8 .brand-section .brand-color .color-palette, #section8 .brand-section .brand-color .brand-values {
        width: auto;
    }
}

@media (max-width: 1440px) {
    #section8 .brand-section {
        padding: 0 30px;
    }
}

@media (max-width: 1023px) {
    #section8 .brand-section > div {
        flex: 100%;
    }
    #section8 .video-section { 
        padding: 0 30px;
    }
    #section8 .video-section .video-player {
        width: 100%;
    }
}

@media (max-width: 820px) {
    #section8 .brand-section .brand-element .element-item + .element-item {
        margin-top: 30px;
    }
    #section8 .brand-section .brand-color {
        flex-direction: column;
    }
    #section8 .brand-section .brand-color .color-palette {
        flex-direction: column;
        gap: 15px;
    }
    #section8 .brand-section .brand-color .color-swatch-vertical > div {
        flex: 1;
    }
    #section8 .brand-section .brand-color .color-details {
        flex-direction: row;
        width: 100%;
    }
    #section8 .brand-section .brand-color .color-details .color-item {
        flex: 1;
    }
    #section8 .brand-section .brand-color .color-details .color-item span {
        width: 70px;
    }
    #section8 .brand-section .brand-color .color-swatch-vertical > div {
        justify-content: end;
        padding: 15px;
    }
    #section8 .brand-section .brand-color .color-swatch-vertical > div span em {
        display: block;
    }
    #section8 .brand-section .brand-color .brand-values .value-item {
        padding: 25px 0 25px 15px;
        height: auto;
    }
}

@media (max-width: 768px) {
    #section8 .section-header {
        padding: 0 15px 30px 15px;
    }
    #section8 .brand-section {
        gap: 15px;
        padding: 0 15px;
        font-size: 16px;
    }
    #section8 .brand-section > div {
        padding: 30px 25px;
    }
    #section8 .brand-section .brand-info {
        text-align: left;
    }
    #section8 .brand-section .brand-info img {
        width: 250px;
    }
    #section8 .brand-section .brand-info p {
        margin-top: 15px;
    }
    #section8 .brand-section .brand-info .label {
        margin: unset;
    }
    #section8 .brand-section .brand-element .element-item {
        justify-content: flex-start;
    }
    #section8 .brand-section .brand-element .element-item + .element-item {
        margin-top: 15px;
    }
    #section8 .brand-section .brand-element .element-item > div {
        width: 150px;
    }
    #section8 .brand-section .brand-element .element-item > div img {
        height: 35px;
    }
    #section8 .brand-section .brand-color {
        gap: 20px;
    }
    #section8 .brand-section .brand-color .color-details {
        font-size: 9px;    
    }
    #section8 .brand-section .brand-color .color-details .color-item span {
        width: 47px;
    }
    #section8 .brand-section .brand-color .brand-values .value-item {
        padding: 15px;
    }

    #section8 .video-section {
        margin: 40px 0 100px;
        padding: 0 15px;
    }
}

@media (orientation: landscape) and (max-width:932px) and (hover:none) and (pointer:coarse){
    #section8 .brand-section {
        gap: 15px;
        padding: 0 15px !important;
        font-size: 16px;
    }
    #section8 .brand-section .brand-element .element-item + .element-item {
        margin-top: 25px;
    }
    #section8 .video-section {
        margin: 45px 0 80px;
        padding: 0 15px;
    }
}

@media (hover: none) and (pointer: coarse) {
    #section8 .video-section .video-player .controls {
        transition: opacity .2s ease;
    }

    /* 재생 중 기본: 컨트롤 완전 비활성 */
    #section8 .video-section .video-player.is-playing .controls {
        opacity: 0;
        visibility: hidden;    /* 포커스/히트 테스트 제거 */
        pointer-events: none;  /* 탭 무시 */
    }

    /* 탭해서 HUD 띄웠을 때만 활성 */
    #section8 .video-section .video-player.is-playing.show-hud .controls {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* 안전망: inert가 있으면 무조건 비활성 */
    #section8 .video-section .video-player .controls[inert] {
        pointer-events: none;
        visibility: hidden;
    }
}

@media (hover: none) and (pointer: coarse) {
    /* hidden 속성이 붙으면 무조건 안 보이고(=레이아웃/히트테스트 제거) 클릭 불가 */
    #section8 .video-section .video-player .controls[hidden] { 
        display: none !important;
    }
}