/* 전체 초기화 및 기본 설정 */
html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* body 또는 main에 헤더 높이만큼 padding 추가 (필요시 main 또는 body에 적용 가능) */
body {
    padding-top: 0px;
    /* .top-bar 높이와 동일 */
}

/* 상단 바 */
.top-bar {
    display: flex;
    /* 가로 배치 */
    align-items: center;
    /* 세로 가운데 정렬 */
    justify-content: space-between;
    /* 좌우 정렬 */
    padding: 20px 30px;
    /* 안쪽 여백 */
    border-bottom: 2px solid #4caf50;
    /* 하단 초록색 테두리 */
    background: white;
    /* 배경 흰색 */
    position: fixed;
    /* 상단 고정 */
    top: 0;
    /* 상단 위치 */
    left: 0;
    width: 100%;
    /* 전체 너비 */
    z-index: 9999;
    /* 다른 요소 위에 표시 */
    height: 80px;
    /* 높이 설정 */
}

/* 상단 바 왼쪽 영역 */
.top-bar-left {
    flex: 1;
    /* 공간 1 비율 할당 */
}

/* 로고 이미지 */
.logo {
    height: 40px;
    /* 높이 지정 */
    cursor: pointer;
    /* 마우스 올렸을 때 커서 변경 */
}

/* 상단 바 중앙 영역 */
.top-bar-center {
    flex: 2;
    /* 공간 2 비율 할당 */
    display: flex;
    /* 가로 배치 */
    justify-content: center;
    /* 가운데 정렬 */
}

/* 메인 메뉴 리스트 */
.main-menu {
    list-style: none;
    /* 기본 리스트 스타일 제거 */
    display: flex;
    /* 가로 배치 */
    gap: 50px;
    /* 메뉴 간 간격 */
}

/* 각 메뉴 아이템 */
.menu-item {
    position: relative;
    /* 자식 요소의 절대 위치 기준 */
    font-weight: bold;
    /* 굵은 글씨 */
    font-size: 1.3rem;
    /* 기본 글자 크기 */
    cursor: pointer;
    /* 클릭 가능 */
    user-select: none;
    /* 텍스트 드래그 방지 */
    color: #222;
    /* 텍스트 색상 */
    width: 100px;
    /* 고정 너비 */
    text-align: center;
    /* 텍스트 가운데 정렬 */
    padding: 12px 0;
    /* 위아래 여백 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    /* 효과 전환 */
}

/* 메뉴 hover 효과 */
.menu-item:hover {
    background-color: #e0f2e9;
    /* 배경색 변경 */
    border-radius: 6px;
    /* 둥근 테두리 */
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
    /* 그림자 효과 */
}

/* 상단 바 오른쪽 영역 */
.top-bar-right {
    flex: 1;
    /* 공간 비율 */
    display: flex;
    /* 가로 배치 */
    justify-content: flex-end;
    /* 오른쪽 정렬 */
    gap: 20px;
    /* 아이템 간 간격 */
    font-size: 1.2rem;
    /* 글자 크기 */
    align-items: center;
    /* 세로 가운데 정렬 */
}

/* 오른쪽 링크 스타일 */
.top-bar-right a {
    color: #222;
    /* 텍스트 색상 */
    text-decoration: none;
    /* 밑줄 제거 */
    cursor: pointer;
    /* 커서 표시 */
}

/* 오른쪽 링크 hover 효과 */
.top-bar-right a:hover {
    color: #4caf50;
    /* 초록색으로 변경 */
}

/* 돋보기 아이콘 */
.search-icon {
    font-size: 18px;
    /* 아이콘 크기 */
    cursor: pointer;
    /* 클릭 가능 */
    color: #333;
    /* 색상 */
}

/* 메가 메뉴 박스 */
.mega-menu {
    position: fixed;
    /* 절대 위치 */
    top: 80px;
    /* 상단바 아래 위치 */
    left: 0;
    width: 100%;
    /* 전체 너비 */
    background: #fff;
    /* 흰색 배경 */
    border-top: 3px solid #4caf50;
    /* 위쪽 테두리 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    /* 그림자 */
    max-height: 0;
    /* 초기 높이 0 */
    opacity: 0;
    /* 안보이게 */
    overflow: hidden;
    /* 넘치는 부분 숨김 */
    transition: max-height 0.4s ease, opacity 0.4s ease;
    /* 트랜지션 */
    z-index: 10000;
    /* 다른 요소 위에 */
    display: flex;
    /* 가로 정렬 */
    justify-content: center;
    /* 가운데 정렬 */
    padding: 0 50px;
    /* 좌우 여백 */
}

/* 메가 메뉴 열릴 때 */
.mega-menu.active {
    max-height: 400px;
    /* 높이 열림 */
    opacity: 1;
    /* 보이게 */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* 메가 메뉴 콘텐츠 */
.mega-menu-content {
    display: none;
    /* 초기 숨김 */
    max-width: 1100px;
    width: 100%;
    gap: 40px;
    align-items: center;
}

/* 활성화 시 보이게 */
.mega-menu-content.active {
    display: flex;
}

/* 메가 메뉴 컬럼 */
.mega-column {
    flex: 1;
}

/* 메가 메뉴 타이틀 */
.mega-column h3 {
    margin-bottom: 12px;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

/* 컬럼 내 리스트 */
.mega-column ul {
    list-style: none;
    padding-left: 0;
}

/* 리스트 항목 */
.mega-column ul li {
    margin-bottom: 12px;
}

/* 리스트 링크 */
.mega-column ul li a {
    color: #555;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.3rem;
    transition: color 0.3s ease;
}

/* 리스트 hover 효과 (브랜드별 색상 처리) */
.mega-column ul li a:hover {
    color: #4caf50;
}

.mega-column ul li a.brand-link[data-brand="schneider"]:hover {
    color: #2e7d32;
}

.mega-column ul li a.brand-link[data-brand="legrand"]:hover,
.mega-column ul li a.brand-link[data-brand="pizzato"]:hover {
    color: #d32f2f;
}

.mega-column ul li a.brand-link[data-brand="eaton"]:hover,
.mega-column ul li a.brand-link[data-brand="bussmann"]:hover {
    color: #1976d2;
}

.mega-column ul li a.brand-link[data-brand="rittal"]:hover {
    background: linear-gradient(90deg, #1976d2 0%, #d32f2f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 메가 메뉴 이미지 */
.mega-column img {
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* =========================
   로그인 → 프로필 아이콘 전환 UI
   ========================= */
.avatar-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.avatar-btn .fa-user {
    font-size: 18px;
}

.profile-menu {
    position: absolute;
    right: 30px;
    top: 80px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    min-width: 180px;
    padding: 8px;
    display: none;
    z-index: 2000;
}

.profile-menu.show {
    display: block;
}

.profile-menu a,
.profile-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: none;
    border: 0;
    cursor: pointer;
    color: #333;
}

.profile-menu a:hover,
.profile-menu button:hover {
    background: #f6f8f7;
}