@charset "UTF-8";

/* 공통 레이아웃 */
#wrap {min-height: 100vh; display: flex; flex-direction: column;}
#content {flex: 1;}
.inner {max-width: 1600px; margin: 0 auto; padding: 0 60px;}

/* header - Premium Design */
#header {background:#fff; position: sticky; top: 0; z-index: 1000; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);border-bottom: 1px solid rgba(74,144,226,0.08);}
#header.scrolled {background: rgba(255,255,255,0.98); box-shadow: 0 6px 30px rgba(0,0,0,0.12); border-bottom: 1px solid rgba(74,144,226,0.15);}
#header .inner {display: flex; align-items: center; justify-content: space-between; height: 95px; padding: 0 60px; max-width: 1600px;}

/* Header Left - 전화번호 */
#header .header-left {flex: 0 0 auto; position: relative;}
#header .header-left .tel {display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 50px; border: 1px solid rgba(74,144,226,0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;}
#header .header-left .tel::before {content: '📞'; font-size: 22px; animation: pulse 2s ease-in-out infinite;}
#header .header-left .tel::after {content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(74,144,226,0.1) 0%, transparent 70%); border-radius: 50%; transition: all 0.5s ease; transform: translate(-50%, -50%);}
#header .header-left .tel:hover::after {width: 300px; height: 300px;}
#header .header-left .tel:hover {background: linear-gradient(135deg, #EEF5FF 0%, #E8F4FF 100%); border-color: #4A90E2; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74,144,226,0.2);}
#header .header-left .tel-content {display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 2;}
#header .header-left .tel span {font-size: 12px; color: #666; font-weight: 500;}
#header .header-left .tel strong {font-size: 18px; font-weight: 700; color: #293aaf; letter-spacing: 0.5px;}
#header .header-left .tel:hover strong {color: #2D4A9E;}

/* Header Center - 로고 & GNB */
#header .header-center {flex: 1; display: flex; align-items: center; justify-content: center; gap: 50px;}
#header .logo {flex: 0 0 auto; line-height: 1; position: relative;}
#header .logo a {display: block; position: relative; transition: all 0.4s ease;}
#header .logo::before {content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(74,144,226,0.08) 0%, transparent 70%); border-radius: 50%; transition: all 0.5s ease; transform: translate(-50%, -50%); z-index: -1;}
#header .logo:hover::before {width: 150px; height: 150px;}
#header .logo:hover a {transform: scale(1.05);}
#header .logo img {height: 42px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.06)); transition: filter 0.3s;}
#header .logo:hover img {filter: drop-shadow(0 4px 12px rgba(74,144,226,0.3));}

/* GNB 메뉴 */
#header .gnb ul {display: flex; gap: 8px;}
#header .gnb li {position: relative;}
#header .gnb a {display: block; font-size: 16px; font-weight: 600; color: #333; padding: 12px 20px; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; border-radius: 12px; box-sizing:border-box}
#header .gnb a::before {content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(90deg, #293aaf, #667eea); border-radius: 3px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
#header .gnb a::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(74,144,226,0.06) 0%, rgba(102,126,234,0.06) 100%); border-radius: 12px; opacity: 0; transition: opacity 0.3s; z-index: -1;}
#header .gnb a:hover {color: #293aaf; transform: translateY(-2px);}
#header .gnb a:hover::before {width: 50%;}
#header .gnb a:hover::after {opacity: 1;}

/* Header Right - SNS */
#header .header-right {flex: 0 0 auto; display: flex; align-items: center; gap: 16px;}
#header .sns-list {display: flex; gap: 10px;}
#header .sns-list li {position: relative;}
#header .sns-list a {display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 1px solid rgba(74,144,226,0.12); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;}
#header .sns-list a::before {content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(74,144,226,0.2) 0%, transparent 70%); border-radius: 50%; transition: all 0.5s ease; transform: translate(-50%, -50%);}
#header .sns-list a:hover::before {width: 200px; height: 200px;}
#header .sns-list a:hover {background: linear-gradient(135deg, #293aaf 0%, #667eea 100%); border-color: #293aaf; transform: translateY(-4px) scale(1.08); box-shadow: 0 8px 20px rgba(74,144,226,0.35);}
#header .sns-list img {width: 20px; height: 20px; object-fit: contain; position: relative; z-index: 2; transition: all 0.3s;}
#header .sns-list a:hover img {filter: brightness(0) invert(1); transform: scale(1.1);}

/* 모바일 메뉴 버튼 */
#header .btn-mobile-menu {display: none; flex-direction: column; justify-content: center; align-items: center; width: 38px; height: 38px; cursor: pointer; padding: 6px; transition: all 0.3s ease; position: relative; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 10px; border: 1px solid rgba(74,144,226,0.12);}
#header .btn-mobile-menu:hover {background: linear-gradient(135deg, #EEF5FF 0%, #E8F4FF 100%); border-color: #4A90E2; transform: scale(1.05);}
#header .btn-mobile-menu span {display: block; width: 22px; height: 2.5px; background: #333; border-radius: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: absolute; left: 8px;}
#header .btn-mobile-menu span:nth-child(1) {top: 11px;}
#header .btn-mobile-menu span:nth-child(2) {top: 50%; transform: translateY(-50%);}
#header .btn-mobile-menu span:nth-child(3) {bottom: 11px;}
#header .btn-mobile-menu.active {background: linear-gradient(135deg, #293aaf 0%, #667eea 100%);}
#header .btn-mobile-menu.active span {background: #fff;}
#header .btn-mobile-menu.active span:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}
#header .btn-mobile-menu.active span:nth-child(2) {opacity: 0; transform: translateX(-100%);}
#header .btn-mobile-menu.active span:nth-child(3) {bottom: 50%; transform: translateY(50%) rotate(-45deg);}

/* 애니메이션 */
@keyframes pulse {
  0%, 100% {transform: scale(1);}
  50% {transform: scale(1.15);}
}

/* footer */
#footer {background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%); color: #fff; padding: 70px 0 50px; position: relative; overflow: hidden;}
#footer::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #293aaf, #667eea, #764ba2); opacity: 0.8;}
#footer .inner {position: relative; z-index: 2;}
#footer .footer-top {display: flex; justify-content: space-between; align-items: center; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 35px;}
#footer .footer-logo img {height: 50px; transition: all 0.4s ease; filter: brightness(1.2);}
#footer .footer-logo:hover img {transform: scale(1.08); filter: brightness(1.5) drop-shadow(0 4px 12px rgba(255,255,255,0.3));}
#footer .footer-menu {display: flex; gap: 35px;}
#footer .footer-menu a {font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.8); transition: all 0.3s; position: relative; padding-bottom: 4px;}
#footer .footer-menu a::after {content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #293aaf, #667eea); transition: width 0.4s ease;}
#footer .footer-menu a:hover {color: #fff; transform: translateY(-2px);}
#footer .footer-menu a:hover::after {width: 100%;}
#footer .footer-info p {font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.9; margin-bottom: 8px; transition: color 0.3s;}
#footer .footer-info p:hover {color: rgba(255,255,255,0.8);}
#footer .footer-info .copyright {margin-top: 25px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 500;}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
.inner {padding: 0 40px;}
#header .inner {padding: 0 40px; height: 85px;}
#header .header-center {gap: 28px;}
#header .gnb ul {gap: 6px;}
#header .gnb a {font-size: 15px; padding: 10px 10px;}
#header .header-left .tel {padding: 10px 16px; gap: 10px;}
#header .header-left .tel::before {font-size: 20px;}
#header .header-left .tel span {font-size: 11px;}
#header .header-left .tel strong {font-size: 16px;}
#header .logo img {height: 42px;}
#header .sns-list a {width: 40px; height: 40px;}
#header .sns-list img {width: 19px; height: 19px;}
#footer {padding: 60px 0 40px;}
#footer .footer-top {flex-direction: column; gap: 25px; text-align: center;}
#footer .footer-menu {flex-wrap: wrap; justify-content: center; gap: 25px;}
#footer .footer-logo img {height: 45px;}
#header .header-left .tel{display: none;}
}

/* 모바일 반응형 */
@media (max-width: 768px) {
.inner {padding: 0 16px;}
#header {box-shadow: 0 2px 12px rgba(0,0,0,0.1);}
#header .inner {height: 65px; padding: 0 16px;}
#header .header-left {display: none;}
#header .header-center {gap: 15px;justify-content: space-between;}
#header .logo img {height:28px;}
#header .gnb {display: none;}
#header .gnb.active {display: block; position: fixed; top: 65px; left: 0; width: 100%; height: calc(100vh - 65px); background: linear-gradient(180deg, #fff 0%, #fafbfc 100%); padding: 30px 20px; overflow-y: auto; z-index: 998; animation: slideDown 0.4s ease;}
#header .gnb-left.active {display: block; position: fixed; top: 65px; left: 0; width: 100%; height: calc(100vh - 65px); background: linear-gradient(180deg, #fff 0%, #fafbfc 100%); padding: 30px 20px; overflow-y: auto; z-index: 998; animation: slideDown 0.4s ease;}
#header .gnb-right.active {display: block; position: fixed; top: 65px; left: 0; width: 100%; height: calc(100vh - 65px); background: linear-gradient(180deg, #fff 0%, #fafbfc 100%); padding: 30px 20px; overflow-y: auto; z-index: 998; animation: slideDown 0.4s ease;}
#header .gnb ul {flex-direction: column; gap: 8px; align-items: stretch;}
#header .gnb li {width: 100%; border-bottom: none;}
#header .gnb a {padding: 18px 20px; font-size: 16px; text-align: center; width: 100%; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 1px solid rgba(74,144,226,0.08); border-radius: 12px; margin-bottom: 8px;}
#header .gnb a:hover {background: linear-gradient(135deg, #EEF5FF 0%, #E8F4FF 100%); border-color: #4A90E2;}
#header .header-right {gap: 4px;}
#header .sns-list {gap: 4px;}
#header .sns-list a {width: 38px; height: 38px;}
#header .sns-list img {width: 18px; height: 18px;}
#header .btn-mobile-menu {display: flex;}
#footer {padding: 50px 0 35px;}
#footer .footer-top {padding-bottom: 30px; margin-bottom: 25px;}
#footer .footer-menu {gap: 20px; font-size: 14px;}
#footer .footer-info p {font-size: 12px;}
#footer .footer-logo img {height: 42px;}
}

@keyframes slideDown {
  from {opacity: 0; transform: translateY(-20px);}
  to {opacity: 1; transform: translateY(0);}
}



/* ==================== 개인정보처리방침 레이어 팝업 ==================== */

/* 레이어 팝업 */
.layer-popup {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none; align-items: center; justify-content: center;}
.layer-popup.active {display: flex;}
.popup-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); cursor: pointer;}
.popup-container {position: relative; z-index: 2; width: 90%; max-width: 700px; max-height: 90vh; background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; animation: popupSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);}

/* 팝업 헤더 */
.popup-header {padding: 30px 30px 20px; border-bottom: 1px solid #E8EAED; display: flex; align-items: center; justify-content: space-between;}
.popup-header h3 {font-size: 24px; font-weight: 700; color: #1a1a1a;}
.btn-close {width: 36px; height: 36px; border: none; background: #F8FAFB; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; color: #666;}
.btn-close:hover {background: #E8EAED; color: #333; transform: rotate(90deg);}

/* 팝업 본문 */
.popup-body {flex: 1; overflow-y: auto; padding: 30px;}
.popup-body::-webkit-scrollbar {width: 6px;}
.popup-body::-webkit-scrollbar-track {background: #F8FAFB;}
.popup-body::-webkit-scrollbar-thumb {background: #C4C9D0; border-radius: 3px;}
.popup-body::-webkit-scrollbar-thumb:hover {background: #A0A5AD;}
.privacy-content {line-height: 1.8;}
.privacy-content h4 {font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 30px 0 16px; padding-bottom: 10px; border-bottom: 2px solid #293aaf;}
.privacy-content h4:first-child {margin-top: 0;}
.privacy-content p {font-size: 15px; color: #333; margin-bottom: 14px;}
.privacy-content ul {margin: 16px 0; padding-left: 20px;}
.privacy-content ul li {font-size: 14px; color: #555; margin-bottom: 10px; position: relative; padding-left: 12px;}
.privacy-content ul li::before {content: '•'; position: absolute; left: 0; color: #293aaf; font-weight: 700;}
.policy-date {font-size: 14px; color: #666; margin-top: 30px; padding-top: 20px; border-top: 1px solid #E8EAED; text-align: right; font-weight: 600;}

/* 팝업 푸터 */
.popup-footer {padding: 20px 30px; border-top: 1px solid #E8EAED; text-align: center;}
.btn-confirm {width: 100%; max-width: 200px; height: 50px; background: linear-gradient(135deg, #2D4A9E 0%, #4A6FD8 100%); color: #fff; font-size: 16px; font-weight: 600; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(74,144,226,0.3);}
.btn-confirm:hover {transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74,144,226,0.4);}

/* 팝업 애니메이션 */
@keyframes popupSlideUp {
  from {opacity: 0; transform: translateY(40px);}
  to {opacity: 1; transform: translateY(0);}
}

/* 모바일 반응형 - 팝업 */
@media (max-width: 768px) {
.popup-container {width: 95%; max-height: 85vh; border-radius: 16px;}
.popup-header {padding: 20px 20px 16px;}
.popup-header h3 {font-size: 20px;}
.btn-close {width: 32px; height: 32px;}
.popup-body {padding: 20px;}
.privacy-content h4 {font-size: 16px; margin: 24px 0 12px;}
.privacy-content p {font-size: 14px;}
.privacy-content ul li {font-size: 13px;}
.popup-footer {padding: 16px 20px;}
.btn-confirm {height: 48px; font-size: 15px;}
}