/* 기본 설정 */
body { 
    margin: 0; 
    font-family: 'Arial', sans-serif; 
    color: #333; 
    
    /* [추가] 사이트 전체 텍스트 선택 및 드래그 방지 */
    -webkit-user-select: none;  /* Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* 표준 브라우저 */
}

a { text-decoration: none; color: inherit; }

/* [추가] 사이트 전체 이미지 드래그 방지 */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* 헤더 및 드롭다운 스타일 */
.header-nav { 
    position: sticky; top: 0; z-index: 1000;
    background: #fff; padding: 15px 40px; 
    border-bottom: 1px solid #eee;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.logo-area img { height: 28px; width: auto; }
.brand-name { font-size: 18px; font-weight: 700; color: #111; margin-left: 10px; }

.nav-menu { display: flex; align-items: center; gap: 25px; }
.nav-menu > a, .menu-item > a { font-size: 13px; font-weight: 600; color: #666; transition: color 0.2s; }
.nav-menu a:hover { color: #000; }

/* MALL 링크 스타일에서 붉은 테두리 삭제 */
.mall-link { 
    padding: 6px 14px; 
    border: none; /* 붉은 선 삭제 */
    color: #333;  /* !important 제거 */
    border-radius: 4px; 
    font-weight: 700; /* 강조 */
}
.mall-link:hover { 
    color: #d32f2f; /* !important 제거 */
}

.menu-item { position: relative; }
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    min-width: 250px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1000;
    border-top: 2px solid #333;
}
.menu-item:hover .dropdown { display: block; }
.dropdown strong { display: block; margin-top: 15px; margin-bottom: 8px; font-size: 11px; color: #999; text-transform: uppercase; }
.dropdown a { display: block; padding: 5px 0; font-size: 13px; color: #333; }
.dropdown a:hover { color: #d32f2f; padding-left: 5px; }


/* ================================================== */
/* [최종 수정] 글로벌 푸터 레이아웃 구조                */
/* ================================================== */

/* 푸터 기본 배경 및 마진 */
.main-footer { 
    background: #f9fafb; 
    padding: 60px 20px; 
    border-top: 1px solid #eaeaea; 
    font-size: 14px; 
    line-height: 1.6;
    margin-top: 80px; 
}

/* 모바일 기본 (위아래 세로 배치) */
.main-footer .footer-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column;
    gap: 30px; 
}

/* -------------------------------------------------- */
/* [PC 및 태블릿 레이아웃] 화면 폭 768px 이상         */
/* -------------------------------------------------- */
@media (min-width: 768px) {
    
    /* [핵심] 좌측 회사정보와 우측 SNS를 한 줄(양 끝) 배치하여 빈칸 채우기 */
    .main-footer .footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start; /* 회사 정보 첫 줄과 높이 일치 */
    }

    /* 좌측 블록 가로 비율 */
    .main-footer .footer-info-block {
        flex: 1.2;
        min-width: 0;
    }

    /* 우측 SNS 블록을 세로 2줄 유지하되 오른쪽 끝으로 바짝 밀착 */
    .main-footer .footer-social {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* 모든 내부 요소를 우측 정렬 */
        gap: 25px;            /* 인스타와 유튜브 사이 간격 */
        margin-top: 0;
        padding-top: 0;
    }

    /* 인스타, 유튜브 각각의 한 줄(타이틀+버튼)도 오른쪽 끝 정렬 */
    .main-footer .social-item {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    /* 인스타 첫 타이틀 높이를 좌측 회사명 첫 줄과 1px 단위까지 동기화 */
    .main-footer .social-item.instagram h4 {
        margin-top: -2px;
    }

    /* 최하단 CS센터와 카피라이트도 양 끝으로 가로 배치 */
    .main-footer .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 40px;
    }
    
    .main-footer .footer-bottom-cs { text-align: left; }
    .main-footer .footer-bottom-copyright { text-align: right; }
}