@import url('/user/new/css/font/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/* -------
    reset
------------------------------------------------------------------ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video,
a, span{
    margin:0; 
    padding:0; 
    border:0;
    /*vertical-align:top; */
    box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -moz-tap-highlight-color: rgba(0,0,0,0);
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
ul, ol, dl{list-style:none;}
img, video{-width:100%; vertical-align:middle;}
a{text-decoration:none; color:inherit;}
table{border-collapse:collapse; border-spacing:0;}
input, select{vertical-align:top;}
button{cursor:pointer; margin:0; padding:0; border:none; background:none;vertical-align:top}
.blind, legend, hr{display:block; position:absolute; top:0; left:-1000em; width:1px; height:1px; margin:-1px; overflow:hidden;}
i, em, address{font-style:normal; font-weight:normal;}
input[type="text"], input[type="password"] {padding:2px 5px;}
input[type="checkbox"], input[type="radio"], label{ cursor:pointer; }
input[type="radio"] {margin:0; vertical-align:middle; position:relative; bottom:1px; width:17px; height:17px; border:0 !important;}
input[type="checkbox"] {border:1px solid #c2c2c2; background:#ffffff; margin:0; vertical-align:middle; position:relative; bottom:1px; border:0 !important;}




body {font-family: 'Pretendard', sans-serif; font-weight: 500;}

#wrap{width:100%;}



:root{
	--primary-color: #5A52C3;
    --primary-light: #f0ebfd;
    --text-dark: #2F2E69;
    --text-gray: #616161;
    --line-color: #e7e1fc;
    --header-height: 85px;
    --mega-menu-height: 260px; 
}


/* =========================================
   Header
========================================= */
.header {position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: #ffffff; border-bottom: 1px solid #eaeaea; z-index: 1000; overflow: hidden; transition: height 0.3s ease, border-radius 0.3s ease; border-radius: 0 0 0 0;}
.header.open {height: var(--mega-menu-height); box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-radius: 0 0 20px 20px;}
.header-inner {display: flex; justify-content: space-between; align-items: flex-start; max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 100%; position: relative; z-index: 10;}
.logo, .util {height: var(--header-height); display: flex; align-items: center;}
.gnb {height: var(--header-height); flex: 1; display: flex; justify-content: center;}
.depth1 {display: flex; height: 100%;}
.depth1 > li {position: static; width: 130px; text-align: center;}
.depth1-title {display: flex; justify-content: center; align-items: center; height: var(--header-height); font-size: 20px; font-weight: 600; color: var(--text-dark); transition: color 0.2s;}
.depth1 > li:hover .depth1-title {color: var(--primary-color);}
.header::after {content: ''; position: absolute; top: var(--header-height); left: 0; width: 100%; height: 1px; background:#e7e1fc; opacity: 0; transition: opacity 0.2s ease; z-index: 5;}
.header.open::after {opacity: 1;}

.depth2 {padding-top:30px; display: flex; flex-direction: column; gap: 15px; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.2s ease;}
.header.open .depth2 {opacity: 1; visibility: visible;}
.depth2 a {font-size: 16px; font-weight: 400; color: var(--text-gray); white-space: nowrap; transition: color 0.2s;}
.depth2 a:hover {color: var(--primary-color); font-weight: 600;}

.lang-btn {position:relative; padding:4px 10px; font-size: 14px; color:#2F2E69; display: flex; align-items: center; }
.lang-btn:before{content:''; display:inline-block; width:14px; height:14px; margin-right:5px; background:url('/user/new/images/common/ico_lang.svg') no-repeat;}
.btn-donate {background-color: var(--primary-light); color: var(--primary-color); font-size: 16px; font-weight: 600; margin-left:20px; padding:4px 24px; border-radius:6px; transition: background 0.2s;}
.btn-donate:hover {background-color: var(--primary-color); color: #fff;}
.btn-mobile-menu {display: none;}


@media screen and (max-width: 1199px) {
	.logo{max-width:180px;}
	.logo > img{width:100%;}
	.depth1 > li {width:120px;}
	.depth1-title{font-size:18px;}
}

@media screen and (max-width: 991px){
	.header {border-radius: 0 !important; overflow: visible;}
    .header.open {height: var(--header-height);}
    .header::after {display: none;}
    .util {position: fixed; bottom: 0; right: -100%; width: 100%; height: 80px; background-color: #f9f9f9; display: flex; justify-content: center; align-items: center; gap: 20px; transition: right 0.3s ease; z-index: 1001; border-top: 1px solid #eaeaea;}
	.util.active {right: 0;}
    .btn-mobile-menu {display: flex; flex-direction: column; justify-content: center; gap: 5px; height: var(--header-height); width: 30px; z-index: 1001;}
    .btn-mobile-menu span {display: block; width: 100%; height: 2px; background: var(--text-dark); transition: all 0.3s;}
    .btn-mobile-menu.active span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
    .btn-mobile-menu.active span:nth-child(2) {opacity: 0;}
    .btn-mobile-menu.active span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}
    .gnb {position: fixed; top: var(--header-height); right: -100%; width: 100%; height: calc(100vh - var(--header-height) - 80px); background: #fff; flex-direction: column; justify-content: flex-start; transition: right 0.3s ease; overflow-y: auto; padding: 20px; }
    .gnb.active {right: 0;}
    .depth1 {flex-direction: column; gap: 0;}
    .depth1 > li {width: 100%; text-align: left; height: auto; border-bottom: 1px solid #eee;}
    .depth1-title {width: 100%; justify-content: space-between; font-size: 18px; }
    .depth2 {position: static; opacity: 1; visibility: visible; display: none; padding: 0 0 20px 10px; align-items: flex-start;}
    .depth1 > li.active .depth2 {display: flex;}
    .depth1 > li.active .depth1-title {color: var(--primary-color);}

}




/* =========================================
   Footer
========================================= */
.footer{width: 100%;}
.footer-main{background: linear-gradient(135deg, #514295 0%, #2c2d66 100%); padding: 60px 0 40px; color: #c9c3dd;}
.footer-inner{max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align:left;}

.footer-info{margin-bottom: 40px;}
.info-row{font-size: 14px; line-height: 1.6; margin-bottom: 8px;}
.divider{display:inline-block; width:1px; height:12px; background:#c9c3dd; margin:0 10px; vertical-align:middle;line-height:1.6}

.footer-account{margin-bottom: 40px; font-size: 14px;}
.privacy-link{display: inline-block; color: #fff; font-weight: 700; margin-bottom: 15px;}
.footer-account p{line-height: 1.5;}

.footer-bottom{display: flex; justify-content: space-between; align-items: center; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.15);}
.copyright{font-size: 13px; color: #a49aba; letter-spacing: 0.02em;}
.sns-links{display: flex; gap: 15px;}

.sns-icon{display: flex;justify-content: center; align-items: center; width: 32px; height: 32px; transition: all 0.1s; border-radius:50%;}
.sns-icon:hover{background: #fff;}

/* 4. 흰색 파트너 로고 영역 */
.footer-logos{background:#fff;
    padding:10px 0;
    border-top: 1px solid #eaeaea;
}
.logo-inner{display: flex;
    justify-content: flex-end; /* 우측 정렬 */
    align-items: center;
}
.logo-inner img{height:40px; /* 로고 높이에 맞춰 조절 */
    object-fit: contain;
}


/* =========================================
   Mobile / Tablet Responsive (768px 이하)
========================================= */
@media screen and (max-width: 768px){
    .footer-main{    padding: 40px 0 30px;
    }

    /* 정보 텍스트 모바일 레이아웃 */
    .info-row{    display: flex;
        flex-direction: column; /* 세로로 한 줄씩 배치 */
        gap: 5px;
        margin-bottom: 15px;
    }
    
    .divider { display: none; }

    /* 정책 및 계좌 간격 조정 */
    .footer-account { margin-bottom: 30px; }
    
    /* 카피라이트와 SNS 세로 배치 */
    .footer-bottom{    flex-direction: column;
        align-items: flex-start; /* 좌측 정렬 */
        gap:10px;
    }
    
    /* 흰색 로고 영역 모바일 최적화 */
    .footer-logos { padding: 20px 0; }
    .logo-inner{    justify-content: center; /* 모바일에서는 중앙 정렬 */
        flex-wrap: wrap; /* 로고가 많을 경우 줄바꿈 */
    }
}