/* BASIC css start */
/* --- [1280px 환경용 SNS 버튼 영역] --- */

/* 1. 전체 영역 설정 (최대 너비 900px 중앙 정렬) */
.new-sns-wrap-wide {
    max-width: 900px; /* 1280px 환경에서 적절한 버튼 컨테이너 최대 너비 */
    width: 90%; 
    margin: 50px auto; /* 상하 여백 및 중앙 정렬 */
    text-align: center;
}

/* 2. SNS 영역 제목 바 (박스 위에 분리) */
.new-sns-wrap-wide .sns-title-bar-wide {
    font-size: 20px; 
    color: #888; 
    margin-bottom: 30px; /* 아래 박스와 간격 확보 */
    position: relative; 
    overflow: hidden; 
    text-align: center;
}
.new-sns-wrap-wide .sns-title-bar-wide b {
    font-weight: bold; color: #555; position: relative; z-index: 1;
    background-color: #fdfaf6; padding: 0 10px;
}
/* 구분선 스타일 */
.new-sns-wrap-wide .sns-title-bar-wide:before,
.new-sns-wrap-wide .sns-title-bar-wide:after {
    content: ""; position: absolute; top: 50%; width: 50%;
    height: 1px; background-color: #e0e0e0;
}
.new-sns-wrap-wide .sns-title-bar-wide:before { left: 0; margin-left: -50%; }
.new-sns-wrap-wide .sns-title-bar-wide:after { right: 0; margin-right: -50%; }


/* 3. SNS 버튼 목록을 감싸는 박스 스타일 */
.new-sns-wrap-wide .sns-box-container-wide {
    border: 1px solid #e0d5c6; 
    border-radius: 12px;
    background: #ffffff;
    padding: 30px; 
    margin-top: 0; 
    
    /* ★★★ [수정] 박스 자체에 관련된 transition 속성 제거 및 초기화 ★★★ */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    transition: none; /* 박스 전체 애니메이션 제거 */
}

/* 4. 버튼 목록 (3분할 Flexbox) */
.new-sns-wrap-wide .sns-btn-list-wide {
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex;
    justify-content: space-between; 
    gap: 15px; /* 버튼 간격 확장 */
}

/* 5. 개별 버튼 (li) 스타일 및 호버/클릭 효과 */
.new-sns-wrap-wide .sns-btn-list-wide li {
    flex: 1; 
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    transition: transform 0.2s, box-shadow 0.2s; /* 개별 버튼의 애니메이션은 유지 */
}

/* ★★★ [효과 유지] 개별 버튼 마우스 호버 시 드롭 쉐도우 ★★★ */
.new-sns-wrap-wide .sns-btn-list-wide li:hover {
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.18); 
}

/* 6. A 태그 (버튼 텍스트/크기) */
.new-sns-wrap-wide .sns-btn-list-wide li a {
    display: flex; align-items: center; justify-content: center; 
    height: 55px; /* 버튼 높이 증가 */
    font-size: 16px; /* 폰트 사이즈 증가 */
    font-weight: bold;
    text-decoration: none; position: relative; box-sizing: border-box;
    white-space: nowrap; transition: opacity 0.2s;
}

/* ★★★ [효과] 버튼 클릭(누를 때) 시 눌리는 효과 ★★★ */
.new-sns-wrap-wide .sns-btn-list-wide li a:active {
    transform: translateY(1px); 
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
    opacity: 1.0; /* 인코딩 오류 문자 제거 */
}

/* 7. SNS별 색상 및 아이콘 */
.new-sns-wrap-wide .sns-btn-list-wide li a.sns-kakao { color: #3C1E1E; }
.new-sns-wrap-wide .sns-btn-list-wide li a.sns-naver { color: #FFFFFF; }
.new-sns-wrap-wide .sns-btn-list-wide li a.sns-apple { color: #000000; }
.new-sns-wrap-wide .sns-btn-list-wide li a::before {
    content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; /* 아이콘 크기 살짝 키움 */
    background-size: contain; background-repeat: no-repeat;
}

/* BASIC css end */