/* ===============================
   RESET
================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    font-family:
    "Pretendard",
    "Noto Sans KR",
    sans-serif;
    background:#10263E;
}

/* 항상 footer가 화면 맨 아래(콘텐츠가 짧아도) 자연스럽게 붙도록 하는
   sticky-footer 레이아웃입니다. #main이 남는 세로 공간을 채우고,
   footer는 그 아래 고정폭만큼만 차지합니다. */
body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}


/* ===============================
   INTRO
================================= */

#intro{

    position:fixed;
    inset:0;

    background:#10263E;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:9999;

    transition:1.5s ease;

}

#intro.hide{

    transform:translateY(-100%);
}


.intro-logo img{

    width:280px;

    opacity:0;

    animation:logoFade 1.5s forwards;
}

@keyframes logoFade{

    from{

        opacity:0;
        transform:translateY(25px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }

}



/* ===============================
   MAIN
================================= */

#main{

    width:100%;

    display:flex;
    flex-direction:column;
    flex:1 0 auto;

    position:relative;

    opacity:0;

    transition:1.2s ease;

}

#main.show{

    opacity:1;
}




/* ===============================
   HEADER
================================= */

.header{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:90px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 80px;

    z-index:100;

    background:transparent;

    border-bottom:1px solid rgba(255,255,255,.12);

    transition:.4s;
}


.header:not(.scrolled):hover{

    background:rgba(16,38,62,.55);
}


.logo img{

    height:45px;
}


/* ===============================
   모바일 대메뉴 토글(햄버거) 버튼
   데스크톱(1100px 초과)에서는 숨기고, 모바일 폭에서만 노출합니다.
================================= */

.mobile-nav-toggle{

    display:none;

    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;

    width:40px;
    height:40px;

    border:none;
    background:transparent;

    cursor:pointer;
    flex-shrink:0;

    z-index:110;
}

.mobile-nav-toggle span{

    display:block;

    width:22px;
    height:2px;

    border-radius:2px;

    background:#ffffff;

    transition:.25s ease;
}

.header.scrolled:not(.solid) .mobile-nav-toggle span{

    background:#10263E;
}

.mobile-nav-toggle.open span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.mobile-nav-toggle.open span:nth-child(2){
    opacity:0;
}

.mobile-nav-toggle.open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}


/* 모바일 메뉴가 열려있는 동안 뒤 배경 스크롤 방지 */
body.nav-lock{
    overflow:hidden;
}


/* ===============================
   스크롤 시 헤더 상태 전환
   맨 위에서는 기존처럼 투명 배경 + 흰색 텍스트를 유지하고,
   스크롤이 조금이라도 내려가면(js에서 .scrolled 클래스 부여) 흰 배경 + 진한 남색 텍스트로 전환됩니다.
================================= */

.header.scrolled{

    background:#ffffff;

    border-bottom:1px solid #eeeeee;

    box-shadow:0 4px 16px rgba(16,38,62,.08);
}


.header.scrolled:hover{

    background:#ffffff;
}


/* 로고 이미지는 별도의 남색 버전 파일이 없어, 스크롤 시 필터로 어둡게 전환합니다.
   추후 남색 로고 파일(l_02.png 등)이 준비되면 이 filter 대신 이미지를 교체해서 사용해도 됩니다. */

.header.scrolled .logo img{

    filter:brightness(0) saturate(100%);
}


.header.scrolled .menu a{

    color:#20344a;
}


.header.scrolled .call-number{

    color:#10263E;
}


.header.scrolled .call-divider{

    background:rgba(16,38,62,.2);
}


.header.scrolled .user-icon-btn{

    border-color:rgba(16,38,62,.35);
}


.header.scrolled .user-icon-btn svg{

    fill:#10263E;
}


.header.scrolled .user-icon-btn:hover,
.header.scrolled .user-icon-btn.open{

    background:rgba(16,38,62,.08);

    border-color:#10263E;
}


/* ===============================
   헤더 우측 그룹 : 전화번호 + 마이메뉴(사람 아이콘)
   대메뉴(.nav-wrap)와는 완전히 분리되어 있어, 이 영역을
   클릭/호버해도 메가패널이 열리지 않습니다.
================================= */

.header-right{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:flex-end;
    justify-content:center;

    height:100%;

    gap:6px;
}


.header-top-row{

    display:flex;

    align-items:center;

    gap:40px;

    height:46px;
}


/* ===============================
   대메뉴 : 사업안내~고객센터 5개의 간격(각 132px)은 그대로 유지한 채,
   헤더 전체 폭 기준 정중앙에 오도록 절대 위치로 배치합니다.
   ※ transform으로 중앙 정렬하면 안의 .mega-panel(position:fixed)의 기준이
     화면 전체가 아니라 이 박스로 바뀌어버려 메가패널이 화면 전체 폭으로
     펼쳐지지 못하므로, margin-left 방식으로 중앙 정렬합니다.
================================= */

.nav-wrap{

    position:absolute;

    left:50%;
    top:0;

    /* 대메뉴 5개 × 132px = 660px, 그 절반(330px)만큼 왼쪽으로 당겨서 중앙 정렬 */
    margin-left:-330px;

    height:90px;

    display:flex;
    align-items:center;

    z-index:5;
}


/* ===============================
   전화번호 아래 작은 퀵링크
   (카페 바로가기 / 로그인 / 운영시간)
================================= */

.quick-links{

    display:flex;

    align-items:center;

    gap:12px;
}


.quick-links a{

    color:rgba(255,255,255,.65);

    font-size:12px;
    font-weight:500;

    text-decoration:none;

    transition:.2s;
}


.quick-links a:hover{

    color:#ffffff;
}


.quick-links span{

    color:rgba(255,255,255,.55);

    font-size:12px;
}


.quick-links .divider{

    width:1px;
    height:9px;

    background:rgba(255,255,255,.3);
}


/* ===============================
   전화번호 (아이콘 배경은 포인트 컬러 남색)
================================= */

.call-info{

    display:flex;

    align-items:center;
}


.call-link{

    display:flex;

    align-items:center;

    color:inherit;

    text-decoration:none;
}


.call-icon{

    width:40px;
    height:40px;

    margin-right:10px;

    flex-shrink:0;

    border-radius:50%;

    background:#10263E;

    display:flex;

    align-items:center;
    justify-content:center;
}


.call-icon svg{

    width:20px;
    height:20px;

    fill:#ffffff;
}


.call-number{

    width:118px;

    color:#ffffff;

    font-size:20px;
    font-weight:700;

    letter-spacing:.5px;

    white-space:nowrap;
}


/* 전화번호와 사람 아이콘(마이메뉴) 사이 구분선 : 양쪽 여백(14px)이 동일합니다 */

.call-divider{

    width:1px;
    height:24px;

    margin:0 14px;

    flex-shrink:0;

    background:rgba(255,255,255,.28);
}


/* ===============================
   사람 아이콘 : 로그인 / 마이메뉴
   메뉴바(메가패널)는 header-top-row 호버로 열리지만,
   이 드롭다운은 사람 아이콘을 클릭했을 때만 열립니다.
================================= */

.user-menu{

    position:relative;
}


.user-icon-btn{

    width:40px;
    height:40px;

    flex-shrink:0;

    border-radius:50%;

    background:transparent;

    border:1px solid rgba(255,255,255,.5);

    display:flex;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:.2s ease;
}


.user-icon-btn svg{

    width:18px;
    height:18px;

    fill:#ffffff;
}


.user-icon-btn:hover,
.user-icon-btn.open{

    background:rgba(255,255,255,.18);
    border-color:#ffffff;
}


.user-menu-panel{

    position:absolute;

    top:calc(100% + 16px);
    left:50%;

    transform:translateX(-50%);

    min-width:190px;

    background:#ffffff;

    border-radius:12px;

    box-shadow:0 16px 30px rgba(0,0,0,.18);

    padding:22px 22px 12px;

    display:none;
    flex-direction:column;

    z-index:30;
}


.user-menu-panel.show{

    display:flex;
}


.user-panel-guest,
.user-panel-member,
.user-panel-general,
.user-panel-admin{

    display:none;
    flex-direction:column;
}


.user-menu[data-role="guest"] .user-panel-guest{

    display:flex;
}


.user-menu[data-role="member"] .user-panel-member{

    display:flex;
}


.user-menu[data-role="general"] .user-panel-general{

    display:flex;
}


.user-menu[data-role="admin"] .user-panel-admin{

    display:flex;
}


.user-panel-msg{

    font-size:14px;
    font-weight:700;

    color:#10263E;

    margin-bottom:14px;

    white-space:nowrap;
}


.user-panel-name{

    color:#3b5570;
}


.user-panel-line{

    width:100%;
    height:1px;

    background:#eeeeee;

    margin-bottom:8px;
}


.user-menu-panel a{

    padding:10px 2px;

    font-size:14px;
    font-weight:500;

    color:#555555 !important;

    text-decoration:none;

    border-bottom:1px solid #f5f5f5;

    white-space:nowrap;
}


.user-menu-panel a:last-child{

    border-bottom:none;
}


.user-menu-panel a:hover{

    color:#10263E !important;
    font-weight:700;
}


.menu{

    height:46px;

    position:relative;
}


.menu ul{

    list-style:none;
}

/* 모바일 아코디언 하위메뉴 : 데스크톱 폭에서는 항상 숨김
   (표시는 1100px 이하 미디어쿼리에서만 처리) */
.mobile-submenu{
    display:none;
}


.menu > ul{

    display:flex;

    height:100%;
}


.menu > ul > li{

    position:relative;

    height:100%;
}


.menu > ul > li > a{

    display:flex;

    justify-content:center;
    align-items:center;

    height:100%;
    width:132px;

    /* padding 대신 고정 width 사용 : 아래 mega-col과 폭이 같아야
       사업안내, 단지안내 등 대메뉴와 서브메뉴가 세로로 정확히 정렬됨 */
}


.menu a{

    text-decoration:none;

    color:white;

    font-size:18px;

    font-weight:600;

    transition:.3s;
}


.menu > ul > li:hover > a{

    position:relative;
}


.menu > ul > li:hover > a::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:14px;

    transform:translateX(-50%);

    width:6px;
    height:6px;

    border-radius:50%;

    background:#3b5570;
}


/* ===============================
   서브메뉴 : 컬럼별로 따로 뜨는 박스가 아니라
   전체가 하나로 이어진 패널 안에서 남색으로만 구분됩니다.
   가장 항목이 많은 컬럼(예: 분양안내 7개) 높이에 나머지 컬럼도 자동으로 맞춰집니다.
================================= */

.mega-panel{

    position:fixed;

    top:90px;
    left:0;

    /* 100vw는 스크롤바 폭까지 포함해서 header(width:100%)와 미세하게 어긋나므로 100%로 맞춤 */
    width:100%;

    background:rgba(16,38,62,.35);

    display:flex;
    justify-content:center;

    /* 대메뉴(.nav-wrap)가 화면 정중앙에 절대 위치로 고정되어 있고,
       메가패널도 동일하게 화면 기준 중앙 정렬만 해주면
       call-info(전화번호/사람아이콘) 폭과 무관하게 항상 세로줄이 맞습니다 */

    box-shadow:0 10px 24px rgba(0,0,0,.18);

    opacity:0;
    visibility:hidden;

    transform:translateY(-6px);

    transition:.25s ease;
}


.nav-wrap:hover .mega-panel{

    opacity:1;
    visibility:visible;

    transform:translateY(0);
}


.mega-col{

    /* 대메뉴 li와 동일한 폭/여백으로 맞춰서
       사업안내, 단지안내 등 상단 메뉴와 정확히 세로 정렬되게 함 */
    width:132px;

    display:flex;
    flex-direction:column;

    align-items:center;

    padding:20px 10px;
}


.mega-col a{

    display:block;

    padding:9px 10px;

    color:rgba(255,255,255,.75) !important;

    font-size:14px;
    font-weight:500;

    text-decoration:none;

    white-space:nowrap;
}


.mega-col a:hover{

    color:#ffffff !important;
    font-weight:700;
}


/* 지금 마우스가 올라가 있는 대메뉴 컬럼만 더 짙은 남색으로 강조 (나머지 컬럼은 옅은 반투명 유지) */

.mega-col.active{

    background:rgba(16,38,62,.85);
}


.mega-col.active a{

    color:#ffffff !important;
}


.mega-col.active a:hover{

    color:#9fd6c2 !important;
}


/* ===============================
   모바일/태블릿(1100px 이하) 대메뉴
   호버 기반 메가패널 대신, 햄버거 버튼으로 여닫는 전체화면 드롭다운 +
   하위메뉴가 여러 개인 항목은 탭하면 펼쳐지는 아코디언으로 전환합니다.
================================= */

@media (max-width:1100px){

    .header{
        padding:0 20px;
    }

    .mobile-nav-toggle{
        display:flex;
        margin-left:auto;
        margin-right:18px;
    }

    .header-top-row{
        gap:14px;
    }

    .call-number,
    .call-divider{
        display:none;
    }

    .nav-wrap{
        position:fixed;
        left:0;
        top:90px;
        margin-left:0;

        width:100%;
        height:calc(100vh - 90px);

        display:flex;
        flex-direction:column;
        align-items:stretch;

        background:#10263E;
        overflow-y:auto;

        z-index:99;

        opacity:0;
        visibility:hidden;
        transform:translateY(-12px);

        transition:.25s ease;
    }

    .nav-wrap.mobile-open{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .menu{
        width:100%;
    }

    .menu > ul{
        flex-direction:column;
        height:auto;
        width:100%;
    }

    .menu > ul > li{
        width:100%;
        height:auto;
        border-bottom:1px solid rgba(255,255,255,.12);
    }

    .menu > ul > li > a{
        width:100%;
        height:auto;
        justify-content:space-between;
        padding:18px 24px;
    }

    .menu > ul > li:hover > a::after{
        content:none;
    }

    .menu > ul > li.has-children > a::after{
        content:"";
        width:8px;
        height:8px;
        margin-left:8px;
        border-right:2px solid rgba(255,255,255,.7);
        border-bottom:2px solid rgba(255,255,255,.7);
        transform:rotate(45deg);
        transition:.25s ease;
    }

    .menu > ul > li.has-children.open > a::after{
        transform:rotate(-135deg);
    }

    /* 하위메뉴가 있는 대메뉴 항목을 탭하면, 해당 항목 바로 아래에서
       펼쳐지며 아래쪽 항목들을 밀어내는 진짜 아코디언 형태로 표시합니다.
       (기존에는 화면 하단의 공용 mega-panel에 표시되어 다른 메뉴와
       겹쳐 보이는 문제가 있었습니다.) */
    .mobile-submenu{
        display:none;
        flex-direction:column;
        width:100%;
        background:rgba(0,0,0,.15);
    }

    .menu > ul > li.open > .mobile-submenu{
        display:flex;
    }

    .mobile-submenu li{
        width:100%;
    }

    .mobile-submenu a{
        display:block;
        width:100%;
        padding:14px 40px;
        color:rgba(255,255,255,.85);
        font-size:14px;
        border-top:1px solid rgba(255,255,255,.06);
    }

    .mega-panel{
        display:none;
    }

    .header-right{
        flex-direction:row;
        align-items:center;
    }
}


/* ===============================
   서브페이지용 헤더
   메인페이지와 똑같이 투명 → 흰색으로 바뀌지만,
   내용이 길게 스크롤되므로 스크롤해도 항상 상단에 고정되도록 함
================================= */

.header.fixed-nav{

    position:fixed;
}


/* 배너 없는 심플 페이지는 스크롤 여부와 상관없이 항상 남색 배경 +
   흰색 글씨를 유지합니다(.header.scrolled가 흰 배경/진한 글씨로
   바꾸는 걸 덮어써서, 스크롤해도 글씨가 안 보이는 일이 없게 함). */
.header.solid{

    background:#10263E !important;
}

.header.solid .logo img{
    filter:none !important;
}

.header.solid .menu a{
    color:#ffffff !important;
}

.header.solid .call-number{
    color:#ffffff !important;
}

.header.solid .call-divider{
    background:rgba(255,255,255,.3) !important;
}

.header.solid .user-icon-btn{
    border-color:rgba(255,255,255,.6) !important;
}

.header.solid .user-icon-btn svg{
    fill:#ffffff !important;
}




/* ===============================
   SLIDER
================================= */

.slider{

    width:100%;
    height:100vh;

    position:relative;

    overflow:hidden;

}



.slide{

    position:absolute;

    width:100%;
    height:100%;

    inset:0;

    opacity:0;

    transform:translateX(100%);

    transition:
    transform 1.6s cubic-bezier(.77,0,.175,1),
    opacity 1.6s ease;

}


.slide.active{

    opacity:1;

    transform:translateX(0);

    z-index:2;

}


.slide.prev{

    transform:translateX(-100%);
}



.slide video{

    width:100%;
    height:100%;

    object-fit:cover;

}

/* ===============================
   FOOTER
================================= */

.footer{
    width:100%;
    background:#10263E;
    color:white;

    /* 좌우 여백을 헤더(로고 ↔ 사람 아이콘 영역)와 동일하게 맞춥니다 */
    padding:40px 80px 36px;

    flex-shrink:0;
}

.footer-wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
}

.footer-info{
    text-align:left;
    font-size:15px;
    line-height:1.8;
}

.footer-info-line{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 28px;
    margin:0;
}

.footer-info-line span{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
}

.footer-info-line span + span{
    position:relative;
    padding-left:28px;
}

.footer-info-line span + span::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:12px;
    background:rgba(255,255,255,.25);
}

.footer strong{
    margin-right:5px;
    color:#ffffff;
}

.copyright{
    margin:10px 0 0;
    color:#b8c1cc;
    font-size:14px;
}

.footer-logo{
    flex-shrink:0;
}

.footer-logo img{
    height:56px;
}

@media screen and (max-width: 1100px) {
    .footer{
        padding-left:20px;
        padding-right:20px;
    }
}

@media screen and (max-width: 980px) {
    .footer-wrap{
        justify-content:flex-start;
    }

    .footer-logo{
        order:-1;
    }
}

@media screen and (max-width: 680px) {
    .footer-info-line{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .footer-info-line span + span{
        padding-left:0;
    }

    .footer-info-line span + span::before{
        display:none;
    }
}


/* ===============================
   서브페이지 콘텐츠 (사업개요 등)
   전체 배경은 원래 남색이라, 이 안에서만
   흰색 바탕으로 바꿔서 표/이미지를 보여줍니다
================================= */

.page-body{

    background:#ffffff;

    /* sub-nav-bar가 배너 밖으로 절대 위치해 아래로 28px 튀어나오므로,
       그 아래 콘텐츠가 카드에 가리지 않도록 여백 확보 */
    padding-top:28px;

    /* 각각의 페이지 본문을 최소 화면 높이 이상으로 맞춰서,
       푸터가 첫 화면에서 바로 보이지 않고 스크롤 후 노출되도록 합니다. */
    flex:1 0 auto;
    min-height:calc(100vh - 100px);
}


/* ===============================
   배너 없는 서브페이지 (문의하기 / 문의내역 / 자주묻는질문 등)
   히어로 이미지 대신 고정헤더 바로 아래 얇은 브레드크럼 바만 배치합니다.
================================= */

.simple-topbar{

    /* 고정(fixed) 헤더 높이(90px)만큼 띄워서 헤더에 가려지지 않게 함 */
    margin-top:90px;

    background:#f7f8fa;

    border-bottom:1px solid #eaeaea;
}

/* For pages that use the compact/simple topbar (문의하기 등),
   hide the home icon and left dropdowns so only the breadcrumb shows,
   and reduce the bar height. */
.simple-topbar .sub-nav-left{
    display:none;
}

.simple-topbar .sub-nav{
    justify-content:flex-end;
}

.simple-topbar .sub-nav.plain{
    padding:6px 0;
}

.simple-topbar .breadcrumb{
    font-size:14px;
    padding:6px 0;
}


.sub-nav.plain{

    background:transparent;

    box-shadow:none;

    padding:14px 0;
}


.page-body.no-banner{

    padding-top:0;
}


.page-body.no-banner .content{

    padding-top:56px;
}


/* ===============================
   서브페이지 상단 히어로 비주얼
   (사업개요 페이지 등 접속 직후 보이는 배경+큰 제목)
================================= */

.sub-visual{

    position:relative;

    width:100%;
    height:480px;

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;
}


.sub-visual::before{

    content:"";

    position:absolute;
    inset:0;

    background:rgba(16,38,62,.45); /* 사진 위에 어두운 남색톤을 살짝 덮어서 글자 가독성 확보 */
}


.sub-visual-inner{

    position:relative;
    z-index:1;

    max-width:1400px;

    margin:0 auto;

    padding:0 80px;

    width:100%;

    color:#ffffff;
}


.sub-visual-inner h2{

    font-size:52px;
    font-weight:800;
}


.sub-visual-inner p{

    margin-top:14px;

    font-size:15px;

    color:#dfe6ee;
}


@media (max-width:900px){
    .sub-visual{
        height:360px;
    }
    .sub-visual-inner{
        padding:0 40px;
    }
    .sub-visual-inner h2{
        font-size:38px;
    }
}

@media (max-width:600px){
    .sub-visual{
        height:280px;
    }
    .sub-visual-inner{
        padding:0 20px;
    }
    .sub-visual-inner h2{
        font-size:28px;
    }
    .sub-visual-inner p{
        font-size:13px;
    }
}


.sub-visual .dots{

    margin-top:22px;

    display:flex;

    gap:8px;
}


.sub-visual .dots span{

    width:8px;
    height:8px;

    border-radius:50%;

    background:rgba(255,255,255,.4);

    display:block;
}


.sub-visual .dots span.on{

    background:#ffffff;
}


/* ===============================
   서브 내비게이션 바 (홈 아이콘 + 드롭다운 + 위치 안내)
   ※ sub-nav의 max-width는 아래 .content(1200px)와 반드시 동일해야
     "HOME > 사업안내 > 사업개요" 라인의 좌우 여백이 본문 여백과 맞습니다.
================================= */

.sub-nav{

    display:flex;

    align-items:stretch;

    justify-content:space-between;

    max-width:1200px;

    margin:0 auto;

    background:#ffffff;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    flex-wrap:wrap;
}

/* sub-nav가 배너와 아래 흰 배경 사이 경계선에 절반씩 걸치도록,
   sub-visual(position:relative) 기준으로 절대 위치시킴 */
.sub-nav-bar{

    position:absolute;

    left:0;
    right:0;
    bottom:-28px;

    z-index:3;
}


.sub-nav-left{

    display:flex;

    align-items:stretch;
}


.home-btn{

    width:56px;

    flex-shrink:0;

    background:#10263E;

    border-radius:0;

    display:flex;

    align-items:center;

    justify-content:center;
}


.home-btn svg{

    width:20px;
    height:20px;

    fill:#ffffff;
}


/* ===============================
   서브 카테고리 드롭다운 (사업안내 / 사업개요)
   기존 <select>를 스크린샷과 동일한 커스텀 드롭다운으로 교체
================================= */

.sub-dropdown{

    position:relative;
}


.sub-dropdown-toggle{

    height:56px;

    min-width:220px;

    padding:0 28px;

    border:none;
    border-right:1px solid #eeeeee;

    border-radius:0;

    background:#ffffff;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:16px;

    font-size:15px;
    font-weight:600;

    color:#333333;

    font-family:inherit;

    cursor:pointer;
}


.sub-dropdown-toggle .chevron{

    width:14px;
    height:14px;

    flex-shrink:0;

    fill:#999999;

    transition:.2s ease;
}


.sub-dropdown-toggle.open{

    color:#10263E;
}


.sub-dropdown-toggle.open .chevron{

    fill:#10263E;

    transform:rotate(180deg);
}


.sub-dropdown-panel{

    position:absolute;

    top:100%;
    left:0;

    min-width:220px;

    background:#ffffff;

    box-shadow:0 16px 30px rgba(0,0,0,.15);

    display:none;

    flex-direction:column;

    z-index:20;
}


.sub-dropdown-panel.show{

    display:flex;
}


.sub-dropdown-panel a{

    padding:16px 28px;

    font-size:14px;
    font-weight:500;

    color:#555555;

    text-decoration:none;

    border-bottom:1px solid #f0f0f0;

    white-space:nowrap;
}


.sub-dropdown-panel a:last-child{

    border-bottom:none;
}


.sub-dropdown-panel a:hover{

    background:#f7f7f7;

    color:#10263E;
    font-weight:700;
}


.breadcrumb{

    display:flex;

    align-items:center;

    gap:6px;

    padding-right:24px;

    font-size:13px;

    color:#888888;
}


.breadcrumb a{

    color:#888888;

    text-decoration:none;
}

.breadcrumb a:hover{

    color:#10263E;
}

.breadcrumb > span:last-child{

    color:#10263E;
    font-weight:700;
}


/* 배너형 서브네비(홈 아이콘 + 카테고리 드롭다운 2개 + 브레드크럼)는
   최소 폭이 넓어(홈 56px + 드롭다운 220px x2) 좁은 화면에서 잘리기 쉬우므로,
   줄바꿈 대신 가로 스크롤로 전환하고 드롭다운 폭/브레드크럼을 줄인다 */
@media (max-width:640px){
    .sub-nav-left{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        flex-shrink:0;
    }

    .sub-nav-left::-webkit-scrollbar{
        display:none;
    }

    .home-btn{
        width:48px;
    }

    .sub-dropdown-toggle{
        height:48px;
        min-width:140px;
        padding:0 18px;
        font-size:13px;
        white-space:nowrap;
    }

    .breadcrumb{
        display:none;
    }
}


.content{

    max-width:1200px;

    margin:0 auto;

    padding:70px 0 80px;

    color:#222;
}

/* 뷰포트가 1200px보다 좁아지면(대부분의 노트북/태블릿/모바일) 좌우 여백이
   0이 되어 본문이 화면 끝에 딱 붙어버리므로, 화면 크기에 맞춰 좌우 여백을 둔다 */
@media (max-width:1240px){
    .content{
        padding-left:32px;
        padding-right:32px;
    }
}

@media (max-width:768px){
    .content{
        padding-top:50px;
        padding-left:20px;
        padding-right:20px;
    }
}

@media (max-width:480px){
    .content{
        padding-left:16px;
        padding-right:16px;
    }
}


/* ===============================
   페이지 타이틀 : 텍스트 아래 전체 실선 대신,
   텍스트 오른쪽으로 이어지는 얇은 실선을 배치
================================= */

.content .page-title{

    display:flex;

    align-items:center;

    gap:60px;

    font-size:36px;
    font-weight:800;

    color:#10263E;

    margin:0 0 18px;
    padding-top:4px;
}


.content .page-title::after{

    content:"";

    flex:1;

    height:1px;

    background:#10263E;
}


.content .lead{

    font-size:20px;
    font-weight:700;
    margin-top:35px;
    margin-bottom:60px;
}

/* ===============================
   정보공개 : 콘텐츠와 동일한 가로폭(1200px)으로 고정
================================= */

.disclosure-wrap{
    max-width:1200px;
    margin:0 auto;
}

/* ===============================
   정보공개 게시글 리스트 (조합원 전용)
   - 포인트 컬러 : 남색(#10263E)
   - 게시글이 많아질 것을 고려해 제목 위주의 게시판형 리스트 + 페이지네이션
================================= */

.disclosure-search{
    display:flex;
    gap:10px;
    margin-bottom:20px;
    max-width:320px;
    margin-left:auto;
}

.disclosure-search input[type="text"]{
    flex:1;
    min-width:0;
    padding:13px 16px;
    border:1px solid #e4e7ed;
    border-radius:8px;
    font-size:14px;
    color:#222;
}

.disclosure-search input[type="text"]:focus{
    outline:none;
    border-color:#10263E;
}

.disclosure-search button{
    flex-shrink:0;
    padding:0 24px;
    border:none;
    border-radius:8px;
    background:#10263E;
    color:#ffffff;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:opacity .2s ease;
}

.disclosure-search button:hover{
    opacity:.88;
}

.post-list-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    border-bottom:2px solid #10263E;
    font-size:14px;
    font-weight:700;
    color:#10263E;
}

.post-list{
    display:flex;
    flex-direction:column;
}

.post-item{
    border-bottom:1px solid #e4e7ed;
}

.post-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 20px;
    text-decoration:none;
    color:inherit;
    transition:background .2s ease;
}

.post-item:hover .post-link{
    background:#f5f7fa;
}

.post-num{
    flex-shrink:0;
    width:64px;
    text-align:center;
    font-size:14px;
    color:#9aa5b5;
}

.post-title{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:16px;
    font-weight:600;
    color:#222;
}

.post-title-text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.post-item:hover .post-title-text{
    color:#10263E;
}

.post-attach-badge{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
}

.post-attach-badge svg{
    width:14px;
    height:14px;
    fill:#8b96a8;
}

.post-date{
    flex-shrink:0;
    width:120px;
    text-align:center;
    font-size:14px;
    color:#9aa5b5;
}

.post-author{
    flex-shrink:0;
    width:96px;
    text-align:center;
    font-size:14px;
    color:#9aa5b5;
}

.post-views{
    flex-shrink:0;
    width:80px;
    text-align:center;
    font-size:14px;
    color:#9aa5b5;
}

.post-empty{
    text-align:center;
    padding:100px 0;
    color:#9aa5b5;
    font-size:15px;
}

/* 페이지네이션 */

.pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:36px;
}

.pagination button{
    min-width:36px;
    height:36px;
    padding:0 6px;
    border:1px solid #e4e7ed;
    border-radius:8px;
    background:#ffffff;
    color:#4a586f;
    font-size:14px;
    cursor:pointer;
    transition:.2s ease;
}

.pagination button:hover:not(:disabled){
    border-color:#10263E;
    color:#10263E;
}

.pagination button.active{
    background:#10263E;
    border-color:#10263E;
    color:#ffffff;
    font-weight:700;
}

.pagination button.nav{
    color:#8b96a8;
}

.pagination button:disabled{
    opacity:.35;
    cursor:not-allowed;
}

@media (max-width:600px){
    .disclosure-search{
        max-width:100%;
        margin-left:0;
    }
    .post-num{
        display:none;
    }
    .post-author{
        display:none;
    }
    .post-date{
        width:auto;
        font-size:12px;
    }
    .post-views{
        width:56px;
        font-size:12px;
    }
}


/* ===============================
   정보공개 상세
================================= */

.detail-card{
    border:1px solid #e4e7ed;
    border-radius:22px;
    padding:0;
    background:#ffffff;
    box-shadow:0 16px 40px rgba(16,38,62,.08);
    overflow:hidden;
}

.detail-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:36px 36px 20px;
}

.detail-header h3{
    flex:1;
    min-width:0;
    font-size:26px;
    font-weight:800;
    color:#10263E;
    line-height:1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.detail-header .btn-outline{
    flex-shrink:0;
}

.detail-meta-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    font-size:14px;
    color:#8b96a8;
    padding:0 36px 28px;
    border-bottom:1px solid #eceef1;
}

.detail-meta-row span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.detail-meta-row svg{
    width:15px;
    height:15px;
    fill:#c1cbdc;
}

.detail-body{
    font-size:16px;
    color:#4a586f;
    line-height:1.9;
    white-space:pre-wrap;
    padding:32px 36px;
}

.detail-body img{
    display:block;
    max-width:100%;
    height:auto;
    margin:12px 0;
    border-radius:8px;
}

.detail-attachments{
    padding:0 36px 36px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.detail-attachments h4{
    font-size:14px;
    font-weight:700;
    color:#10263E;
    margin-bottom:14px;
}

.attachment-chip{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    font-weight:600;
    color:#10263E;
    background:#f7f8fa;
    padding:14px 18px;
    border-radius:14px;
    text-decoration:none;
    border:1px solid #eceef1;
    transition:.2s ease;
}

.attachment-chip:hover{
    background:#eef1f6;
    border-color:#c7d0de;
}

.attachment-chip .file-icon{
    flex-shrink:0;
    width:36px;
    height:36px;
    border-radius:10px;
    background:#eef1f6;
    display:flex;
    align-items:center;
    justify-content:center;
}

.attachment-chip .file-icon svg{
    width:18px;
    height:18px;
    fill:#10263E;
}

.attachment-chip .file-name{
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.attachment-chip .download-icon{
    flex-shrink:0;
    width:16px;
    height:16px;
    fill:#a7b1c2;
}

@media (max-width:600px){
    .detail-header{
        flex-wrap:wrap;
        padding:28px 24px 16px;
    }
    .detail-header h3{
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        font-size:20px;
    }
    .detail-meta-row{
        padding:0 24px 20px;
    }
    .detail-body{
        padding:24px;
    }
    .detail-attachments{
        padding:0 24px 24px;
    }
}

.btn-outline{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:12px 20px;
    border:1px solid #d5dae6;
    border-radius:999px;
    background:#ffffff;
    color:#10263E;
    text-decoration:none;
    font-weight:700;
    font-size:14px;
    transition:.2s ease;
}

.btn-outline svg{
    width:14px;
    height:14px;
    fill:currentColor;
}

.btn-outline:hover{
    background:#10263E;
    border-color:#10263E;
    color:#ffffff;
}


.info-table{

    width:100%;

    border-top:2px solid #10263E;
}


.info-table .row{

    display:flex;

    border-bottom:1px solid #e5e5e5;
}


.info-table .th{

    width:220px;
    flex-shrink:0;

    background:#f7f7f7;

    padding:18px 24px;

    font-weight:700;
}


.info-table .td{

    flex:1;

    padding:18px 24px;
}


/* ===============================
   건축개요 등 스펙(제원) 표 : 연면적처럼 항목이
   여러 줄로 묶이는 경우가 있어 실제 <table>(rowspan)로 구성합니다.
================================= */

.spec-title{

    display:flex;

    align-items:center;
    gap:10px;

    font-size:20px;
    font-weight:800;

    color:#10263E;

    margin:70px 0 20px;

    padding-bottom:16px;

    border-bottom:2px solid #10263E;
}


.spec-title::before{

    content:"";

    width:11px;
    height:11px;

    flex-shrink:0;

    background:#10263E;
}


.spec-table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

    border-top:2px solid #10263E;
}


.spec-table th,
.spec-table td{

    border-bottom:1px solid #e5e5e5;

    padding:18px 20px;

    font-size:15px;

    text-align:center;

    vertical-align:middle;
}


.spec-table th{

    width:190px;

    background:#f7f7f7;

    color:#10263E;

    font-weight:700;
}


.spec-table td{

    color:#333333;

    font-weight:500;
}


.spec-table tr:last-child th,
.spec-table tr:last-child td{

    border-bottom:2px solid #10263E;
}

/* 왼쪽 라벨 열 2개(190px x2)가 고정폭이라 좁은 화면에서 본문 열이 지나치게
   눌리기 쉬우므로, 표를 감싸는 컨테이너에서 가로 스크롤로 대응한다 */
.table-scroll{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

@media (max-width:640px){
    .table-scroll .spec-table{
        min-width:560px;
    }
}


.spec-note{

    margin-top:16px;

    font-size:13px;

    color:#888888;

    line-height:1.6;
}


/* ===============================
   타입안내 : 59A / 59B / 75 / 84 탭으로 전환되는
   평면도 뷰어 (탭을 누르면 script.js가 이미지/면적 값을 교체합니다)
================================= */

.type-tabs{

    display:flex;

    gap:16px;

    margin-bottom:50px;
}


.type-tab{

    flex:1;

    padding:18px 0;

    background:#e2e5ea;

    border:none;

    border-radius:40px;

    font-size:20px;
    font-weight:700;

    color:#777777;

    cursor:pointer;

    transition:.2s ease;
}


.type-tab:hover{

    background:#d3d8e0;
}


.type-tab.active{

    background:#10263E;

    color:#ffffff;
}

@media (max-width:480px){
    .type-tabs{
        gap:8px;
    }
    .type-tab{
        padding:14px 0;
        font-size:15px;
    }
}


.type-viewer{

    width:100%;
}


.type-viewer img{

    display:block;

    width:100%;
}


/* ===============================
   서브페이지 대표 이미지(사업개요/프리미엄/공급정보/위치안내/
   커뮤니티/복합단지뷰 등) — 원본 크기 그대로 삽입되므로
   화면 폭에 맞춰 반응형으로 줄어들도록 함
================================= */

.main-image{

    display:block;

    width:100%;
    height:auto;
}


/* 포인트컬러(남색)를 아주 옅게 깐 안내 문구 박스 */

.type-note{

    margin-top:60px;

    padding:26px 30px;

    background:rgba(16,38,62,.05);

    border-radius:4px;

    font-size:14px;

    color:#5b6b7c;

    line-height:1.7;
}


/* ===============================
   공사현장영상 : 유튜브 영상 갤러리
   (영상 목록은 js/script.js 상단의 VIDEO_DATA 배열에서 관리합니다)
================================= */

.video-head{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:24px;

    margin:35px 0 40px;
}


.video-lead{

    font-size:18px;
    font-weight:700;

    color:#333333;
}


.video-lead b{

    color:#10263E;
}


.youtube-link{

    display:inline-flex;
    flex-shrink:0;

    align-items:center;
    gap:8px;

    padding:14px 26px;

    border:1.5px solid #10263E;
    border-radius:40px;

    color:#10263E;

    font-size:15px;
    font-weight:700;

    white-space:nowrap;

    transition:.2s ease;
}


.youtube-link svg{

    width:20px;
    height:20px;

    fill:#FF0000;

    transition:.2s ease;
}


.youtube-link:hover{

    background:#10263E;

    color:#ffffff;
}


.youtube-link:hover svg{

    fill:#ffffff;
}


.video-single{

    position:relative;

    width:100%;
    padding-top:56.25%;

    background:#000000;

    margin-bottom:20px;

    box-shadow:0 12px 28px rgba(16,38,62,.14);
}


.video-single iframe{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    border:0;
}


@media (max-width:600px){

    .video-head{

        flex-direction:column;
        align-items:flex-start;
    }
}


.disclaimer{

    margin-top:24px;

    font-size:13px;

    color:#999;

    line-height:1.6;
}


@media (max-width:768px){

    .info-table .row{

        flex-direction:column;
    }

    .info-table .th{

        width:100%;
    }

    .interest-form{

        flex-direction:column;

        align-items:stretch;
    }

    .submit-btn{

        flex:none;

        width:100%;
    }
}


/* ===============================
   관심고객등록 폼
================================= */

.interest-desc{

    font-size:18px;
    font-weight:700;

    line-height:1.6;

    color:#222;

    margin-bottom:40px;
}


.privacy-box{

    border:1px solid #e2e2e2;

    background:#f9f9f9;

    padding:30px;

    margin-bottom:60px;
}


.privacy-box-title{

    font-size:16px;
    font-weight:800;

    color:#10263E;

    margin-bottom:10px;
}


.privacy-box > p{

    font-size:14px;

    line-height:1.7;

    color:#555555;
}


.privacy-scroll{

    margin-top:20px;

    max-height:260px;

    overflow-y:auto;

    padding:20px;

    background:#ffffff;

    border:1px solid #e5e5e5;
}


/* 단독 이용약관 / 개인정보처리방침 페이지 - 스크롤박스 없이 전문을 그대로 노출 */
.legal-doc{

    max-width:860px;

    margin:0 auto;
}

.legal-doc h3{

    font-size:16px;
    font-weight:700;

    color:#10263E;

    margin-top:28px;
    margin-bottom:10px;
}

.legal-doc h3:first-child{

    margin-top:0;
}

.legal-doc p{

    font-size:14px;

    line-height:1.8;

    color:#444444;

    margin-bottom:10px;
}

.legal-doc ul{

    list-style:disc;

    padding-left:20px;

    margin-bottom:10px;
}

.legal-doc li{

    font-size:14px;

    line-height:1.8;

    color:#555555;

    margin-bottom:4px;
}



.privacy-scroll h3{

    font-size:14px;
    font-weight:700;

    color:#10263E;

    margin-top:18px;
    margin-bottom:8px;
}


.privacy-scroll h3:first-child{

    margin-top:0;
}


.privacy-scroll p{

    font-size:13px;

    line-height:1.7;

    color:#555555;

    margin-bottom:6px;
}


.privacy-scroll ul{

    list-style:none;

    margin-bottom:6px;
}


.privacy-scroll li{

    font-size:13px;

    line-height:1.7;

    color:#666666;
}


.privacy-agree{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    font-size:14px;
    font-weight:700;

    color:#10263E;

    cursor:pointer;
}


.privacy-agree input[type="checkbox"]{

    width:18px;
    height:18px;

    accent-color:#10263E;

    cursor:pointer;
}


.interest-form{

    display:flex;

    align-items:flex-end;

    gap:16px;

    max-width:100%;
}


.form-row{

    flex:1;

    margin-bottom:0;
}


.form-row label{

    display:block;

    font-size:14px;
    font-weight:700;

    color:#10263E;

    margin-bottom:8px;
}


.form-row input{

    width:100%;
    height:52px;

    padding:0 18px;

    border:1px solid #dddddd;

    font-size:15px;

    font-family:inherit;
}


.form-row input:focus{

    outline:none;

    border-color:#10263E;
}


.submit-btn{

    flex:0 0 180px;

    width:auto;
    height:52px;

    background:#10263E;

    color:#ffffff;

    font-size:16px;
    font-weight:700;

    border:none;

    cursor:pointer;

    transition:.2s;
}


.submit-btn:hover{

    background:#0c1d30;
}


/* ===============================
   인증 페이지 공통 (로그인 / 회원가입 / 새 비밀번호 / 암호코드 입력)
   - 옅은 회색 배경 위에 흰색 카드가 화면 중앙에 오는 공통 레이아웃
   - .content 영역 높이를 최소 100vh로 채워서, 처음 화면에서는
     푸터가 보이지 않고 아래로 스크롤해야 푸터가 나타나도록 합니다.
================================= */

.page-body.auth-bg{

    background:#eef1f6;
    min-height:calc(100vh - 110px);
    padding-top:0;
    display:flex;
    align-items:center;
    justify-content:center;
}


.auth-content{

    width:100%;
    max-width:760px;
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:30px;

    margin:0 auto;
    padding:24px 0 56px;
    min-height:calc(100vh - 210px);
}


.auth-card{

    width:100%;
    max-width:440px;

    background:#ffffff;

    border:1px solid #e6eaf0;
    border-radius:24px;

    box-shadow:0 20px 48px rgba(16,38,62,.10);

    padding:48px 40px 40px;
}


.auth-card.wide{

    max-width:1200px;
}


/* 회원가입 폼(.signup-wizard)은 부모 .auth-content(760px 제한)보다 넓게
   써야 하므로 이 페이지에서만 컨테이너 폭 자체를 1200px까지 열어준다 */

.auth-content.signup-wizard{

    max-width:1200px;
}


.login-title{

    font-size:30px;
    font-weight:800;

    letter-spacing:.5px;

    color:#10263E;

    text-align:center;

    margin-bottom:32px;
}


/* 조합원 / 수분양자 선택 토글 */

.login-tabs{

    display:flex;

    background:#f2f4f7;

    border-radius:999px;

    padding:4px;

    margin-bottom:28px;
}


.login-tab{

    flex:1;

    height:44px;

    border:none;

    background:transparent;

    border-radius:999px;

    font-size:14px;
    font-weight:700;

    color:#8a94a3;

    font-family:inherit;

    cursor:pointer;

    transition:.25s ease;
}


.login-tab.active{

    background:#10263E;

    color:#ffffff;
}


.login-form .form-row{

    margin-bottom:14px;
}


.login-form input{

    width:100%;
    height:52px;

    padding:0 18px;

    border:1px solid #dde2ea;
    border-radius:10px;

    font-size:15px;

    font-family:inherit;
}


.login-form input:focus{

    outline:none;

    border-color:#10263E;
}


.login-submit-btn{

    width:100%;
    height:54px;

    background:#10263E;

    color:#ffffff;

    font-size:16px;
    font-weight:700;

    border:none;
    border-radius:10px;

    cursor:pointer;

    margin-top:8px;

    transition:.2s;
}


.login-submit-btn:hover{

    background:#0c1d30;
}


.login-note{

    margin-top:18px;

    font-size:12.5px;

    color:#9aa4b2;

    text-align:center;

    line-height:1.6;
}

.login-note-warn{
    color:#c0392b;
    font-weight:600;
}


.login-links{

    display:flex;

    justify-content:center;
    align-items:center;

    gap:12px;

    margin-top:22px;

    font-size:13px;

    color:#9aa4b2;
}


.login-links a{

    color:#9aa4b2;

    text-decoration:none;
}


.login-links a:hover{

    color:#10263E;
}


.login-links .divider{

    width:1px;
    height:10px;

    background:#dddddd;
}


/* ===============================
   로그인 페이지 하단 바로가기 메뉴 (6개)
   ※ 헤더의 기존 .quick-links(전화번호 옆 작은 링크)와 클래스명이
     겹치지 않도록 auth- 접두사를 붙였습니다.
================================= */

.auth-quick-links{

    display:flex;

    width:100%;
    max-width:720px;

    background:#ffffff;

    border:1px solid #e6eaf0;
    border-radius:24px;

    box-shadow:0 16px 40px rgba(16,38,62,.08);

    padding:26px 10px;
}


.auth-quick-link-item{

    flex:1;

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:10px;

    text-decoration:none;

    transition:.2s ease;
}


.auth-quick-link-icon{

    width:52px;
    height:52px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#eef3fb;

    transition:.2s ease;
}


.auth-quick-link-icon svg{

    width:24px;
    height:24px;

    fill:#10263E;
}


.auth-quick-link-label{

    font-size:12.5px;
    font-weight:600;

    color:#4a5568;

    white-space:nowrap;
}


/* 호버 시 아이콘 부분만 남색으로 강조되고, 텍스트 색상은 그대로 유지됩니다 */

.auth-quick-link-item:hover .auth-quick-link-icon{

    background:#10263E;
}


.auth-quick-link-item:hover .auth-quick-link-icon svg{

    fill:#ffffff;
}


.password-find-modal{

    max-width:420px;
    padding:40px 34px 32px;
}

.password-find-info{

    margin:24px 0 24px;
    padding:18px 20px;

    background:#f6f8fb;

    border-radius:12px;
}

.password-find-label{

    margin-bottom:6px;

    font-size:13px;
    font-weight:700;
    color:#7b8794;
}

.password-find-number{

    font-size:20px;
    font-weight:800;
    color:#10263E;
}

.password-find-number a{

    color:inherit;

    text-decoration:none;
}

.password-wrap{

    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px 0 40px;
}

.password-card{

    width:100%;
    max-width:520px;
    background:#ffffff;
    border:1px solid #e6eaf0;
    border-radius:24px;
    box-shadow:0 18px 42px rgba(16,38,62,.08);
    padding:40px 36px;
    margin:0 auto;
}

.password-lead{

    font-size:16px;
    line-height:1.8;
    color:#5f6b7a;
    margin-bottom:28px;
}

.password-form .field-group{

    margin-bottom:20px;
}

.password-form label{

    font-size:14px;
    font-weight:700;
    color:#10263E;
    margin-bottom:8px;
    display:block;
}

.password-form input{

    width:100%;
    height:52px;
    padding:0 16px;
    border:1px solid #dde2ea;
    border-radius:10px;
    font-size:15px;
    font-family:inherit;
}

.password-form input:focus{

    outline:none;
    border-color:#10263E;
}

.form-message{

    margin-top:14px;
    padding:12px 14px;
    border-radius:10px;
    font-size:14px;
    display:none;
}

.form-message.show{

    display:block;
}

.form-message.success{

    background:#ebf9f2;
    color:#157a4a;
}

.form-message.error{

    background:#fff2f0;
    color:#c23b2d;
}

.account-type-toggle{

    display:flex;
    gap:10px;
    margin-bottom:24px;
}

.account-type-btn{

    flex:1;
    height:46px;
    border:1px solid #dce3eb;
    border-radius:999px;
    background:#f7f9fc;
    color:#5f6b7a;
    font-size:14px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    transition:.2s ease;
}

.account-type-btn.active{

    background:#10263E;
    border-color:#10263E;
    color:#ffffff;
}

.find-id-link{

    display:inline-block;
    margin-top:10px;
    color:#10263E;
    font-weight:700;
    text-decoration:none;
}

.find-id-link:hover{

    text-decoration:underline;
}

@media (max-width:860px){

    .auth-quick-links{

        flex-wrap:wrap;

        row-gap:22px;
    }

    .auth-quick-link-item{

        flex:1 1 30%;
    }
}

@media (max-width:560px){

    .password-card{

        padding:32px 22px;
    }

    .auth-card{

        padding:36px 24px 30px;

        border-radius:18px;
    }

    .auth-quick-links{

        border-radius:18px;

        padding:22px 8px;
    }

    .auth-quick-link-item{

        flex:1 1 45%;
    }

    .auth-content{

        gap:28px;

        padding-top:24px;
    }
}


/* ===============================
   공사현장영상 갤러리
================================= */

.video-desc{

    font-size:16px;

    line-height:1.7;

    color:#444444;

    margin-bottom:40px;
}


.video-grid{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:30px;
}


.video-card{

    display:block;

    text-decoration:none;

    color:inherit;
}


.video-thumb{

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    background-size:cover;
    background-position:center;

    overflow:hidden;
}


.video-thumb::after{

    content:"";

    position:absolute;
    inset:0;

    background:rgba(16,38,62,.4);

    transition:.25s ease;
}


.video-card:hover .video-thumb::after{

    background:rgba(16,38,62,.55);
}


.play-btn{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:56px;
    height:56px;

    border-radius:50%;

    background:rgba(255,255,255,.9);

    display:flex;

    align-items:center;
    justify-content:center;

    z-index:1;

    transition:.25s ease;
}


.play-btn svg{

    width:22px;
    height:22px;

    margin-left:3px;

    fill:#10263E;
}


.video-card:hover .play-btn{

    background:#ffffff;

    transform:translate(-50%,-50%) scale(1.08);
}


.video-info{

    padding:16px 2px 0;
}


.video-date{

    font-size:13px;
    font-weight:600;

    color:#3b5570;
}


.video-title{

    margin-top:6px;

    font-size:16px;
    font-weight:700;

    color:#222222;
}


@media (max-width:900px){

    .video-grid{

        grid-template-columns:repeat(2, 1fr);
    }
}


@media (max-width:600px){

    .video-grid{

        grid-template-columns:1fr;
    }
}


/* ===============================
   회원가입 3단계 마법사
   (약관동의 → 회원정보입력 → 가입완료)
================================= */

.signup-grid{

    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
    align-items:start;
}

.signup-grid-3 .field-group{

    margin-bottom:0;
}

.signup-grid .field-group input,
.signup-grid .field-group select,
.signup-grid .field-group textarea,
.field-group input,
.field-group select,
.field-group textarea{

    border-radius:10px;
}

/* 회원가입 2단계(회원정보입력) : 1200px 폭을 살리는 2열 배치
   (반드시 .active 상태일 때만 grid를 적용해야 아코디언 형태로 열리지 않고
    STEP 전환 시에만 화면에 나타난다 - #id 선택자를 쓰면 .signup-step{display:none}
    보다 우선순위가 높아져 항상 보이는 문제가 있어 클래스 선택자로 작성함) */

.signup-step.active[data-step="2"]{

    display:grid;
    grid-template-columns:repeat(2, 1fr);
    column-gap:36px;
}


.signup-step[data-step="2"] .field-group{

    min-width:0;
}


.signup-step[data-step="2"] .field-group-full,
.signup-step[data-step="2"] .step-actions{

    grid-column:1 / -1;
}


.step-indicator{

    display:flex;

    justify-content:center;
    align-items:flex-start;

    margin-bottom:70px;
}


.step-indicator .step-item{

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:10px;

    width:150px;
}


.step-indicator .step-circle{

    width:42px;
    height:42px;

    border-radius:50%;

    background:#eeeeee;

    color:#999999;

    display:flex;

    align-items:center;
    justify-content:center;

    font-weight:800;
    font-size:16px;

    transition:.25s ease;
}


.step-indicator .step-label{

    font-size:14px;
    font-weight:700;

    color:#999999;
}


.step-indicator .step-item.active .step-circle{

    background:#10263E;
    color:#ffffff;
}


.step-indicator .step-item.active .step-label{

    color:#10263E;
}


.step-indicator .step-item.done .step-circle{

    background:#3b5570;
    color:#ffffff;
}


.step-indicator .step-item.done .step-label{

    color:#3b5570;
}


.step-indicator .step-line{

    width:70px;
    height:2px;

    background:#e5e5e5;

    margin:20px 4px 0;
}


.step-indicator .step-line.done{

    background:#3b5570;
}


.signup-step{

    display:none;
}


.signup-step.active{

    display:block;
}


/* 전체동의 */

.select-all-row{

    display:flex;

    align-items:center;

    gap:12px;

    padding:22px 26px;

    background:#10263E;

    margin-bottom:26px;
}


.select-all-row input[type="checkbox"]{

    width:20px;
    height:20px;

    accent-color:#3b5570;

    cursor:pointer;

    flex-shrink:0;
}


.select-all-row label{

    color:#ffffff;

    font-size:16px;
    font-weight:800;

    cursor:pointer;
}


.terms-notice{

    font-size:13px;

    color:#888888;

    line-height:1.8;

    margin-top:10px;
    margin-bottom:50px;

    padding-top:24px;

    border-top:1px solid #eeeeee;
}


.step-actions{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:10px;
}


.step-actions .btn-outline,
.step-actions .btn-primary{

    flex:0 0 200px;

    height:56px;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;

    font-family:inherit;

    border-radius:10px;
}


.step-actions .btn-outline{

    background:#ffffff;

    border:1px solid #cccccc;

    color:#555555;
}


.step-actions .btn-outline:hover{

    border-color:#10263E;
    color:#10263E;
}


.step-actions .btn-primary{

    background:#10263E;

    border:none;

    color:#ffffff;
}


.step-actions .btn-primary:hover{

    background:#0c1d30;
}


.step-actions .btn-primary:disabled{

    background:#cccccc;

    cursor:not-allowed;
}


/* 회원정보 입력 폼 */

.field-group{

    margin-bottom:30px;
}


.field-group > label{

    display:block;

    font-size:14px;
    font-weight:700;

    color:#10263E;

    margin-bottom:8px;
}


.member-type-toggle{

    display:flex;

    gap:10px;
}


.member-type-btn{

    flex:1;

    height:52px;

    border:1px solid #dddddd;
    border-radius:10px;

    background:#ffffff;
    color:#555555;

    font-size:15px;
    font-weight:700;
    font-family:inherit;

    cursor:pointer;

    transition:.2s ease;
}


.member-type-btn:hover{

    border-color:#10263E;

    color:#10263E;
}


.member-type-btn.active{

    background:#10263E;
    border-color:#10263E;

    color:#ffffff;
}


.field-inline{

    display:flex;

    gap:10px;
    align-items:stretch;
}


.field-inline input{

    flex:1;

    min-width:0;

    height:52px;

    padding:0 18px;

    border:1px solid #dddddd;

    font-size:15px;

    font-family:inherit;
}


.field-inline input:focus{

    outline:none;

    border-color:#10263E;
}


.btn-check{

    flex:0 0 130px;

    height:52px;

    background:#f2f2f2;

    border:1px solid #dddddd;

    color:#333333;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;

    white-space:nowrap;

    font-family:inherit;

    border-radius:10px;
}


.btn-check:hover{

    background:#10263E;

    color:#ffffff;

    border-color:#10263E;
}


.field-help{

    margin-top:8px;

    font-size:12.5px;

    color:#999999;

    line-height:1.6;
}


.field-check-msg{

    margin-top:8px;

    font-size:12.5px;
    font-weight:700;

    display:none;
}


.field-check-msg.show{

    display:block;
}


.field-check-msg.ok{

    color:#3b5570;
}


.field-check-msg.fail{

    color:#e0503c;
}


.field-row3{

    display:flex;

    gap:10px;
    flex-wrap:wrap;
}


.field-row3 input{

    flex:1;

    min-width:0;

    height:52px;

    padding:0 16px;

    border:1px solid #dddddd;

    font-size:15px;

    font-family:inherit;

    border-radius:10px;
}


.field-row3 input:focus{

    outline:none;

    border-color:#10263E;
}


.field-row3 .fixed{

    background:#f7f7f7;

    color:#555555;

    flex:0 0 90px;

    text-align:center;
}


.sms-agree{

    display:flex;

    align-items:flex-start;

    gap:8px;

    margin-top:10px;

    font-size:13px;

    color:#555555;

    line-height:1.5;

    cursor:pointer;
}


.sms-agree input{

    width:16px;
    height:16px;

    margin-top:2px;

    accent-color:#10263E;

    cursor:pointer;

    flex-shrink:0;
}


.addr-row{

    display:flex;

    gap:10px;
    margin-bottom:0;
}


.addr-row input{

    flex:1;

    min-width:0;

    height:52px;

    padding:0 18px;

    border:1px solid #dddddd;

    font-size:15px;

    font-family:inherit;

    background:#f7f7f7;

    border-radius:10px;
}


.addr-row input.zipcode{

    flex:0 0 160px;

    background:#ffffff;
}


/* 가입 완료 화면 */

.complete-wrap{

    text-align:center;

    padding:70px 0 50px;
}


.complete-icon{

    width:90px;
    height:90px;

    border-radius:50%;

    background:#3b5570;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:0 auto 32px;
}


.complete-icon svg{

    width:44px;
    height:44px;

    fill:#ffffff;
}


.complete-title{

    font-size:26px;
    font-weight:800;

    color:#10263E;

    margin-bottom:18px;
}


.complete-desc{

    font-size:15px;

    color:#555555;

    line-height:1.9;

    margin-bottom:44px;
}


.complete-desc b{

    color:#10263E;
}


@media (max-width:768px){

    .step-indicator .step-line{

        width:34px;
    }

    .step-indicator .step-item{

        width:100px;
    }

    .signup-grid,
    .signup-step.active[data-step="2"]{

        grid-template-columns:1fr;
    }

    .field-inline,
    .field-row3,
    .addr-row{

        flex-direction:column;
    }

    .btn-check{

        flex:none;

        width:100%;
    }

    .field-row3 .fixed{

        flex:none;

        width:100%;
    }

    .addr-row input.zipcode{

        flex:none;
    }

    .step-actions .btn-outline,
    .step-actions .btn-primary{

        flex:1 1 auto;
    }
}


/* ===============================
   문의하기 (1:1 문의 작성 / 접수완료)
================================= */

.inquiry-wrap{

    max-width:820px;

    margin:0 auto;
}


.inquiry-lead{

    font-size:16px;
    font-weight:600;

    color:#555555;

    margin:0 0 36px;

    line-height:1.6;
}


.inquiry-step{

    display:none;
}


.inquiry-step.active{

    display:block;
}


.inquiry-input,
.inquiry-textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid #dddddd;

    font-size:15px;

    font-family:inherit;

    color:#333333;
}


.inquiry-input{

    height:52px;
}


.inquiry-textarea{

    height:220px;

    line-height:1.7;

    resize:vertical;
}


.inquiry-input:focus,
.inquiry-textarea:focus{

    outline:none;

    border-color:#10263E;
}


.file-attach-row{

    display:flex;

    align-items:center;

    gap:14px;
}


@media (max-width:768px){

    .file-attach-row{

        flex-wrap:wrap;
    }
}


.file-attach-btn{

    flex-shrink:0;

    height:48px;

    padding:0 24px;

    background:#f2f2f2;

    border:1px solid #dddddd;

    color:#333333;

    font-size:14px;
    font-weight:700;

    font-family:inherit;

    cursor:pointer;

    transition:.2s ease;
}


.file-attach-btn:hover{

    background:#10263E;

    color:#ffffff;

    border-color:#10263E;
}


.file-attach-name{

    font-size:14px;

    color:#999999;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.file-attach-name.selected{

    color:#10263E;

    font-weight:600;
}


.inquiry-submit-btn{

    display:block;

    width:240px;

    height:58px;

    margin:50px auto 0;

    background:#10263E;

    color:#ffffff;

    border:none;
    border-radius:10px;

    font-size:16px;
    font-weight:700;

    font-family:inherit;

    cursor:pointer;

    transition:.2s ease;
}


.inquiry-submit-btn:hover{

    background:#0c1d30;
}


.inquiry-wrap .complete-wrap{

    padding:60px 0 20px;
}


.complete-actions{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;
}


.complete-btn-primary{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:240px;
    height:56px;

    background:#10263E;

    color:#ffffff !important;

    font-size:15px;
    font-weight:700;

    text-decoration:none;

    transition:.2s ease;
}


.complete-btn-primary:hover{

    background:#0c1d30;
}


/* ===============================
   문의내역 (목록 + 답변 아코디언)
   - 정보공개 목록과 동일한 리스트 디자인 사용
================================= */

.inquiry-list-wrap{

    position:relative;
}


.inquiry-status-col{

    flex-shrink:0;
    width:110px;
    text-align:center;
}


.inquiry-item{

    border-bottom:1px solid #e4e7ed;
}


.inquiry-link{

    cursor:pointer;
}


.inquiry-item:hover .inquiry-link,
.inquiry-item.open .inquiry-link{

    background:#f5f7fa;
}


.inquiry-item.open .post-title-text{

    color:#10263E;
}


.post-title .chevron{

    width:12px;
    height:12px;

    flex-shrink:0;

    fill:#aaaaaa;

    transition:.2s ease;
}


.inquiry-item.open .chevron{

    fill:#10263E;

    transform:rotate(180deg);
}


.status-badge{

    display:inline-block;

    padding:6px 16px;

    border-radius:20px;

    font-size:12.5px;
    font-weight:700;

    white-space:nowrap;
}


.status-badge.wait{

    background:rgba(224,80,60,.1);

    color:#e0503c;
}


.status-badge.done{

    background:rgba(16,38,62,.08);

    color:#10263E;
}


.inquiry-detail-panel{

    display:none;

    padding:28px 20px 32px 96px;

    background:#f7f8fa;
}


.inquiry-item.open .inquiry-detail-panel{

    display:block;
}


.inquiry-detail-block + .inquiry-detail-block{

    margin-top:26px;

    padding-top:26px;

    border-top:1px dashed #dddddd;
}


.inquiry-detail-label{

    display:inline-block;

    padding:4px 12px;

    margin-bottom:12px;

    background:#10263E;

    color:#ffffff;

    font-size:12px;
    font-weight:700;

    border-radius:4px;
}


.inquiry-detail-label.answer{

    background:#3b5570;
}


.inquiry-detail-text{

    font-size:14.5px;

    line-height:1.8;

    color:#444444;

    white-space:pre-wrap;
}


.inquiry-detail-pending{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    color:#888888;
}


.inquiry-detail-pending svg{

    width:18px;
    height:18px;

    flex-shrink:0;

    fill:#bbbbbb;
}


.inquiry-detail-date{

    margin-top:14px;

    font-size:12.5px;

    color:#999999;
}

.inquiry-attachment-img{
    display:block;
    max-width:100%;
    max-height:320px;
    margin-top:8px;
    border-radius:10px;
    border:1px solid #e4e7ed;
}

.inquiry-attachment-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    padding:8px 14px;
    border-radius:999px;
    background:#f5f7fa;
    border:1px solid #e4e7ed;
    color:#10263E;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}

.inquiry-detail-actions{
    margin-top:16px;
    display:flex;
    justify-content:flex-end;
}

.inquiry-delete-btn{
    padding:8px 16px;
    border-radius:8px;
    border:1px solid #e4e7ed;
    background:#ffffff;
    color:#c0392b;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.2s ease;
}

.inquiry-delete-btn:hover{
    background:#fdecea;
    border-color:#f0b5ad;
}


.inquiry-empty{

    display:none;

    text-align:center;

    padding:100px 0;

    color:#9aa5b5;

    font-size:15px;
}


.inquiry-empty.show{

    display:block;
}


@media (max-width:600px){

    .inquiry-status-col{

        width:auto;
    }

    .inquiry-detail-panel{

        padding:24px 20px 28px;
    }
}


/* ===============================
   자주묻는질문 (카테고리 탭 + 아코디언)
================================= */

.faq-tabs{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:50px;
}


.faq-tab{

    height:46px;

    padding:0 26px;

    background:#f2f2f2;

    border:none;
    border-radius:999px;

    font-size:14.5px;
    font-weight:700;

    color:#666666;

    font-family:inherit;

    cursor:pointer;

    transition:.2s ease;
}


.faq-tab:hover{

    background:#e2e5ea;
}


.faq-tab.active{

    background:#10263E;

    color:#ffffff;
}


.faq-list{

    margin-top:8px;
    border-top:2px solid #10263E;
}


.faq-item{

    border-bottom:1px solid #e5e5e5;
}


.faq-item.hide{

    display:none;
}


.faq-question{

    display:flex;

    align-items:center;

    gap:18px;

    width:100%;

    padding:22px 4px 22px;

    background:none;

    border:none;

    text-align:left;

    cursor:pointer;

    font-family:inherit;

    transition:.15s ease;
}


.faq-question:hover{

    background:#fafafa;
}


.faq-mark{

    flex-shrink:0;

    width:32px;
    height:32px;

    border-radius:50%;

    color:#ffffff;

    font-size:15px;
    font-weight:800;

    display:flex;

    align-items:center;
    justify-content:center;
}


.faq-mark.q{

    background:#10263E;
}


.faq-mark.a{

    background:#3b5570;
}


.faq-category-tag{

    flex-shrink:0;

    padding:5px 14px;

    border-radius:14px;

    background:rgba(16,38,62,.06);

    color:#10263E;

    font-size:12px;
    font-weight:700;

    white-space:nowrap;
}


.faq-question-text{

    flex:1;

    font-size:16px;
    font-weight:700;

    color:#222222;
}


.faq-chevron{

    width:14px;
    height:14px;

    flex-shrink:0;

    fill:#aaaaaa;

    transition:.2s ease;
}


.faq-item.open .faq-chevron{

    fill:#10263E;

    transform:rotate(180deg);
}


.faq-answer{

    display:none;

    padding:0 4px 30px 50px;
}


.faq-item.open .faq-answer{

    display:block;
}


.faq-answer-inner{

    display:flex;

    gap:18px;
}


.faq-a-text{

    flex:1;

    font-size:14.5px;

    line-height:1.85;

    color:#555555;

    white-space:pre-wrap;
}


.faq-empty{

    display:none;

    padding:110px 0;

    text-align:center;

    font-size:15px;

    color:#999999;
}


.faq-empty.show{

    display:block;
}


@media (max-width:600px){

    .faq-question{

        gap:12px;
    }

    .faq-category-tag{

        display:none;
    }

    .faq-answer{

        padding-left:20px;
    }

    .faq-answer-inner{

        gap:12px;
    }
}


/* ===============================
   FAQ 하단 문의 유도 CTA
================================= */

.faq-cta{

    display:flex;

    align-items:center;
    justify-content:space-between;

    flex-wrap:wrap;

    gap:24px;

    margin-top:60px;

    padding:40px 46px;

    background:linear-gradient(135deg,#10263E,#1a3a5c);
}


.faq-cta-title{

    font-size:19px;
    font-weight:800;

    color:#ffffff;

    margin-bottom:8px;
}


.faq-cta-desc{

    font-size:14px;

    color:#b9c6d4;
}


.faq-cta-btn{

    flex-shrink:0;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    height:54px;

    padding:0 32px;

    background:#3b5570;

    border-radius:999px;

    color:#ffffff !important;

    font-size:15px;
    font-weight:700;

    text-decoration:none;

    white-space:nowrap;

    transition:.2s ease;
}


.faq-cta-btn:hover{

    background:#4d6b8c;
}


@media (max-width:600px){

    .faq-cta{

        padding:32px 28px;
    }

    .faq-cta-btn{

        width:100%;
    }
}


/* ===============================
   전역 안내 모달 (조합원 전용 메뉴 접근 제한 등)
================================= */

.modal-overlay{

    position:fixed;
    inset:0;

    background:rgba(16,38,62,.55);

    display:none;

    align-items:center;
    justify-content:center;

    z-index:2000;
}


.modal-overlay.show{

    display:flex;
}


.modal-box{

    position:relative;

    width:400px;
    max-width:88vw;

    background:#ffffff;

    padding:44px 34px 34px;

    text-align:center;

    box-shadow:0 24px 60px rgba(0,0,0,.22);
}


.modal-close{

    position:absolute;

    top:14px;
    right:14px;

    width:32px;
    height:32px;

    border:none;
    background:none;

    cursor:pointer;
}


.modal-close svg{

    width:18px;
    height:18px;

    fill:#aaaaaa;
}


.modal-title{

    font-size:19px;
    font-weight:800;

    color:#10263E;

    margin-bottom:14px;
}


.modal-desc{

    font-size:14.5px;

    line-height:1.75;

    color:#555555;

    white-space:pre-line;

    margin-bottom:28px;
}


.modal-actions{

    display:flex;

    gap:10px;
}

.password-find-modal .modal-btn{
    width:100%;
    display:block;
    margin-top:8px;
}


.modal-btn{

    width:100%;
    max-width:100%;

    height:52px;

    border:none;

    font-size:14.5px;
    font-weight:700;

    font-family:inherit;

    cursor:pointer;

    transition:.2s ease;
}


.modal-btn.primary{

    background:#10263E;
    color:#ffffff;
}


.modal-btn.primary:hover{

    background:#0c1d30;
}


.modal-btn.ghost{

    background:#f2f2f2;
    color:#555555;
}


.modal-btn.ghost:hover{

    background:#e5e5e5;
}