/* [공통 스타일] */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.6; color: #333; background: #f9f9f9; }

/* 헤더 및 로고 */
header { background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 1000; }
.header-top { max-width: 1100px; margin: 0 auto; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-weight: bold; font-size: 1.8rem; color: #0056b3; text-decoration: none; }
.header-info { display: flex; align-items: center; gap: 15px; }
.header-info a { text-decoration: none; color: #555; }

/* 네비게이션 드롭다운 메뉴 */
nav { background: #fdfdfd; border-top: 1px solid #f0f0f0; }
.nav-container { max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; }
.menu-item { position: relative; flex: 0 1 auto; text-align: center; }
.menu-item > a { text-decoration: none; color: #333; font-weight: 500; font-size: 0.95rem; padding: 15px 25px; display: block; }

/* 서브메뉴 전체 영역 설정 */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    
    /* [중앙 정렬 핵심] */
    left: 50%;
    transform: translateX(-50%);
    
    background-color: #ffffff;
    min-width: 100%; /* 부모 메뉴 너비보다 작아지지 않게 */
    width: auto;     /* 긴 텍스트가 있으면 박스가 옆으로 늘어남 */
    
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1000;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border-radius: 0 0 8px 8px;
    border: 1px solid #eee;
    border-top: none; /* 상단 테두리는 자연스럽게 생략 */
}

/* 서브메뉴 내부의 글자 설정 */
.submenu li a {
    display: block;
    padding: 12px 25px; /* 좌우 여백을 조금 더 확보 */
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    
    /* 줄바꿈 방지 */
    white-space: nowrap; 
    
    /* [텍스트 정렬] 중앙 정렬을 원하시면 center, 아니면 left */
    text-align: center; 
    transition: all 0.2s;
    border-bottom: 1px solid #f9f9f9; /* 메뉴 간 구분선 */
}

/* 마지막 메뉴는 구분선 제거 */
.submenu li:last-child a {
    border-bottom: none;
}

/* 마우스 올렸을 때 배경색 변화 */
.submenu li a:hover {
    background-color: #f8fafc;
    color: #2563eb;
}

/* 메뉴 아이템에 마우스 올리면 서브메뉴 보이기 */
.menu-item:hover .submenu {
    display: block;
}

/* 상위 메뉴 활성화 상태 디자인 */
.menu-item:hover > a { 
    background: #f8f9fa; 
    color: #0056b3; 
}

/* 슬라이더 영역 */
.slider-section { background: #e9ecef; height: 300px; display: flex; align-items: center; justify-content: center; text-align: center; }

/* 카테고리 그리드 영역 */
.category-section { max-width: 1100px; margin: 50px auto; padding: 0 20px; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 15px; }
.grid-item { background: #fff; padding: 25px 10px; border-radius: 12px; text-align: center; text-decoration: none; color: inherit; border: 1px solid #eee; transition: 0.3s; }
.grid-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #0056b3; }

/* 플로팅 버튼 */
.floating-contacts { position: fixed; bottom: 30px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.contact-btn { padding: 12px 20px; border-radius: 30px; text-decoration: none; color: #fff; font-weight: bold; font-size: 13px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.contact-btn.kakao { background: #FAE100; color: #3C1E1E; }
.contact-btn.visit { background: #0056b3; }
.contact-btn.show { background: #ff4757; }

/* 상단 SNS 아이콘 정렬 스타일 */
.header-info {
    display: flex;
    align-items: center;
}

.tel-link {
    font-weight: bold;
    margin-right: 15px; /* 전화번호와 아이콘 사이 간격 */
    text-decoration: none;
    color: #333;
    font-size: 0.95rem;
}

.sns-group {
    display: flex;
    align-items: center;
    gap: 5px; /* 아이콘 사이 간격을 5px로 좁게 설정 */
}

.sns-group img {
    width: 28px;  /* 크기 통일 */
    height: 28px; /* 크기 통일 */
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.sns-group a:hover img {
    filter: brightness(0.9); /* 마우스 올리면 살짝 어둡게 */
}

/* 푸터 */
footer { background: #333; color: #fff; padding: 40px 20px; text-align: center; font-size: 13px; margin-top: 50px; }

/* 모바일 대응 */
@media (max-width: 768px) {
    .header-top { flex-direction: column; }
    .nav-container { display: grid; grid-template-columns: repeat(3, 1fr); }
    .menu-item > a { padding: 10px 5px; font-size: 0.8rem; }
    .submenu { display: none !important; }
}