/*--------------------------------------------------------------
    # 1. 전역 스타일 (Global Styles)
    --------------------------------------------------------------*/
    :root {
        --reroof-font: "Open Sans", sans-serif;
        --reroof-font-two: "Rubik", sans-serif;
        --reroof-gray: #494949;
        --reroof-gray-rgb: 123, 100, 100;
        --reroof-base: #EE212B;
        --reroof-base-rgb: 238, 33, 43;
        --reroof-black: #082C4B;
        --reroof-black-rgb: 8, 44, 75;
        --reroof-white: #ffffff;
        --reroof-white-rgb: 255, 255, 255;
        --reroof-bdr-color: #DDDDDD;
        --reroof-bdr-color-rgb: 221, 221, 221;
    }

    body {
        color: var(--reroof-gray);
        font-size: 18px;
        line-height: 28px;
        font-weight: 400;
        font-family: var(--reroof-font);
    }

    body.locked {
        overflow: hidden;
    }

    a {
        color: var(--reroof-base);
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    a,
    a:hover,
    a:focus,
    a:visited {
        color: var(--reroof-black);
    }

    dl,
    ol,
    ul {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        list-style-type: none;
    }

    button {
        cursor: pointer;
        border: none;
        background: transparent;
        padding: 0;
    }


    /*--------------------------------------------------------------
    # 2. 데스크톱 헤더 (Navigations One)
    --------------------------------------------------------------*/
    .main-header {
        /*position: absolute;*/
        left: 0;
        right: 0;
        width: 100%;
        transition: all 500ms ease;
        z-index: 999;
    }

    .main-menu {
        position: relative;
        display: block;
    }

    .main-menu__wrapper {
        background-color: var(--reroof-white);
        position: relative;
        display: block;
    }

    .main-menu__wrapper-inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .main-menu__left {
        position: relative;
        display: block;
    }

    .main-menu__logo {
        position: relative;
        display: block;
    }

    .main-menu__logo a {
        position: relative;
        display: block;
    }

    .main-menu__logo a img {
        width: 100%;
    }

    .main-menu__main-menu-box {
        display: block;
    }

    .stricky-header.main-menu {
        background-color: var(--reroof-black);
    }

    .main-menu .main-menu__list,
    .main-menu .main-menu__list>li>ul,
    .main-menu .main-menu__list>li>ul>li>ul,
    .stricky-header .main-menu__list,
    .stricky-header .main-menu__list>li>ul,
    .stricky-header .main-menu__list>li>ul>li>ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: none;
    }

    @media (min-width: 1200px) {

        .main-menu .main-menu__list,
        .main-menu .main-menu__list>li>ul,
        .main-menu .main-menu__list>li>ul>li>ul,
        .stricky-header .main-menu__list,
        .stricky-header .main-menu__list>li>ul,
        .stricky-header .main-menu__list>li>ul>li>ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
    }

    .main-menu .main-menu__list>li,
    .stricky-header .main-menu__list>li {
        padding-top: 41px;
        padding-bottom: 40px;
        position: relative;
    }

    .main-menu .main-menu__list>li+li,
    .stricky-header .main-menu__list>li+li {
        //margin-left: 14px;
    }

    .main-menu .main-menu__list>li>a,
    .stricky-header .main-menu__list>li>a {
        position: relative;
        color: var(--reroof-black);
        font-size: 18px;
        line-height: 18px;
        font-weight: 600;
        padding: 10px 15px 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
        font-family: var(--reroof-font);
    }

    /* 데스크톱 메뉴 - 활성/호버 */
    .main-menu .main-menu__list>li.current>a,
    .main-menu .main-menu__list>li:hover>a,
    .stricky-header .main-menu__list>li.current>a,
    .stricky-header .main-menu__list>li:hover>a {
        color: var(--reroof-base);
    }

    /* 데스크톱 메뉴 - 드롭다운 (숨김) */
    .main-menu .main-menu__list>li>ul,
    .main-menu .main-menu__list>li>ul>li>ul,
    .stricky-header .main-menu__list>li>ul,
    .stricky-header .main-menu__list>li>ul>li>ul {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #121A46; /* 원본 CSS의 색상값 */
        min-width: 295px;
        padding: 25px 30px 25px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        opacity: 0;
        visibility: hidden;
        z-index: 99;
        transform: perspective(500px) rotatex(-20deg);
        transform-origin: 50% 0%;
        -webkit-box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 9%);
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 9%);
        -webkit-transition: all 300ms linear 0ms;
        transition: all 300ms linear 0ms;
    }

    /* 데스크톱 메뉴 - 드롭다운 (표시) */
    .main-menu .main-menu__list>li:hover>ul,
    .main-menu .main-menu__list>li>ul>li:hover>ul,
    .stricky-header .main-menu__list>li:hover>ul,
    .stricky-header .main-menu__list>li>ul>li:hover>ul {
        opacity: 1;
        visibility: visible;
        transform: perspective(500px) rotatex(0);
    }

    .main-menu .main-menu__list>li>ul>li,
    .main-menu .main-menu__list>li>ul>li>ul>li,
    .stricky-header .main-menu__list>li>ul>li,
    .stricky-header .main-menu__list>li>ul>li>ul>li {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        width: 100%;
        position: relative;
    }

    .main-menu .main-menu__list>li>ul>li+li,
    .main-menu .main-menu__list>li>ul>li>ul>li+li,
    .stricky-header .main-menu__list>li>ul>li+li,
    .stricky-header .main-menu__list>li>ul>li>ul>li+li {
        border-top: 1px solid rgba(var(--reroof-white-rgb), 0.05);
        margin-top: 0px;
    }

    /* 데스크톱 메뉴 - 드롭다운 링크 */
    .main-menu .main-menu__list>li>ul>li>a,
    .main-menu .main-menu__list>li>ul>li>ul>li>a,
    .stricky-header .main-menu__list>li>ul>li>a,
    .stricky-header .main-menu__list>li>ul>li>ul>li>a {
        position: relative;
        display: flex;
        align-items: center;
        color: rgba(var(--reroof-white-rgb), 0.80);
        font-size: 16px;
        line-height: 16px;
        font-weight: 400;
        padding: 17px 0px 17px;
        -webkit-transition: all 200ms linear 0ms;
        transition: all 200ms linear 0ms;
    }

    /* 데스크톱 메뉴 - 드롭다운 링크 호버 */
    .main-menu .main-menu__list>li>ul>li:hover>a,
    .main-menu .main-menu__list>li>ul>li>ul>li:hover>a,
    .stricky-header .main-menu__list>li>ul>li:hover>a,
    .stricky-header .main-menu__list>li>ul>li>ul>li:hover>a {
        color: var(--reroof-base);
        padding-left: 5px;
    }

    /* 스크롤 시 고정 헤더 (Sticky Header) */
    .stricky-header {
        position: fixed;
        z-index: 991;
        top: 0;
        left: 0;
        background-color: #fff; /* 원본 CSS의 색상값 */
        width: 100%;
        visibility: hidden;
        -webkit-transform: translateY(-120%);
        transform: translateY(-120%);
        -webkit-transition: visibility 500ms ease, -webkit-transform 500ms ease;
        transition: transform 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease;
        -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
        box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
    }

    /* 모바일에서 스티키 헤더 숨김 */
    @media (max-width: 1200px) {
        .stricky-header {
            display: none !important;
        }
    }

    /* 스티키 헤더 활성 상태 */
    .stricky-header.stricky-fixed {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        visibility: visible;
    }

    /*--------------------------------------------------------------
    # 3. 모바일 내비게이션 (Mobile Nav)
    --------------------------------------------------------------*/

    /* 모바일 햄버거 버튼 */
    .main-menu .mobile-nav__toggler {
        font-size: 20px;
        color: var(--reroof-black);
        cursor: pointer;
        -webkit-transition: 500ms;
        transition: 500ms;
        position: relative;
        top: 2px;
    }

    .main-menu .mobile-nav__toggler:hover {
        color: var(--reroof-black);
    }

    /* 데스크톱에서 햄버거 버튼 숨김 */
    @media (min-width: 1200px) {
        .main-menu .mobile-nav__toggler {
            display: none;
        }
    }

    /* 모바일 메뉴 래퍼 (전체 화면) */
    .mobile-nav__wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
        transition: transform 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
        visibility: hidden;
    }

    /* 모바일 메뉴 활성 상태 (JS로 .expanded 클래스 추가 시) */
    .mobile-nav__wrapper.expanded {
        z-index: 10000;
        opacity: 1;
        transform: translateX(0%);
        visibility: visible;
        -webkit-transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
        transition: transform 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
    }

    /* 모바일 메뉴 오버레이 (배경) */
    .mobile-nav__overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000000;
        opacity: 0.5;
        cursor: pointer;
    }

    /* 모바일 메뉴 콘텐츠 패널 (슬라이드되는 부분) */
    .mobile-nav__content {
        width: 300px;
        background-color: var(--reroof-white);
        z-index: 10;
        position: relative;
        height: 100%;
        overflow-y: auto;
        padding-top: 30px;}
    .mobile-nav__content .main-menu__list>li>ul,
    .mobile-nav__content .main-menu__list>li>ul>li>ul {
        display: none; /* 이 부분이 하위 메뉴를 기본적으로 숨깁니다 */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-left: 0.5em;
    }
    .mobile-nav__container ul{
        gap: 80px;
    }

    .mobile-nav__container .main-menu__list li{
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 5px;
    }
    .fa-angle-up{
        padding: 4px 5px; background-color: var(--reroof-black); color: white
    }

    .mobile-nav__content .main-menu__list li.dropdown > ul {
        /* 1. 기본적으로 하위 메뉴를 숨깁니다. */
        max-height: 0;
        overflow: hidden;
        display: block; /* display:none 대신 사용 */
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.5s ease-out,
        opacity 0.4s ease-out,
        visibility 0.4s ease-out;
    }

    .mobile-nav__content .main-menu__list li.dropdown > a.expanded + ul {
        /* 2. 'expanded' 클래스가 추가된 a 태그의 '다음' ul을 보여줍니다. */
        max-height: 500px; /* 하위 메뉴가 다 보일 수 있는 충분한 높이 */
        opacity: 1;
        visibility: visible;
        transition: max-height 0.5s ease-in,
        opacity 0.5s ease-in 0.2s,
        visibility 0.5s ease-in 0.2s;
    }

    .mobile-nav__content .main-menu__list li.dropdown > a button {
        /* 3. 화살표 아이콘 회전 애니메이션 */
        transition: transform 0.3s ease;
    }

    .mobile-nav__content .main-menu__list li.dropdown > a.expanded button {
        /* 4. 'expanded' 클래스가 있을 때 화살표를 180도 회전시킵니다. */
        transform: rotate(180deg);
        /*margin-right: 0;*/
        margin-left: 150px;
    }
    @media (max-width: 1200px){
        header.main-header {
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: #ffffff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }
    }
    @media (max-width: 1200px) {
        html,
        body {
            /* * .main-header의 부모 요소(body, html 등)에
             * overflow: hidden 또는 overflow-x: hidden이 있으면
             * position: sticky가 작동하지 않습니다.
             * * 'visible'로 강제하여 이 문제를 해결합니다.
             */
            overflow: visible !important;

            /* * 만약 가로 스크롤바가 생기는 것이 문제였다면,
             * 'clip'을 사용하는 것이 'hidden'보다 좋습니다.
             * overflow-x: clip;
             */
        }
    }