/*
 * 파일명: etiquette.css
 * 위치: /css/etiquette.css
 * 기능: 장례 상식 페이지 스타일
 * 작성일: 2025-03-28
 * 수정일: 2025-03-28
 */

/* ===================================
 * 콘텐츠 영역 스타일
 * ===================================
 */
/* 메인 제목 스타일 */
.container h1 {
    font-size: 2.0rem !important;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 2단계 제목 스타일 */
.etiquette-content h2 {
    font-size: 1.4rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #1E88E5;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

/* 3단계 제목 스타일 */
.etiquette-content h3 {
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: #212529;
}

/* 4단계 제목 스타일 */
.etiquette-content h4 {
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

/* 리스트 스타일 */
.etiquette-content ul, 
.etiquette-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

/* 문단 스타일 */
.etiquette-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* 카드 스타일 */
.etiquette-content .card {
    margin-bottom: 1.5rem;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 카드 헤더 스타일 */
.etiquette-content .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 500;
}

/* 테이블 스타일 */
.etiquette-content .table {
    margin-bottom: 0;
}

/* 테이블 헤더 스타일 */
.etiquette-content .table th {
    background-color: #f8f9fa;
}

/* ===================================
 * 아코디언 스타일
 * ===================================
 */
/* 아코디언 버튼 활성화 상태 */
.accordion-button:not(.collapsed) {
    background-color: #e7f1ff;
    color: #1E88E5;
}

/* ===================================
 * 플로팅 버튼 스타일
 * ===================================
 */
/* 플로팅 버튼 컨테이너 */
.floating-buttons {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}

/* 플로팅 버튼 기본 스타일 */
.floating-button {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background-color: rgba(33, 37, 41, 0.8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* 맨 위로 스크롤 버튼 */
.scroll-top-button {
    background-color: #4b5563;
}

/* 공유 버튼 */
.share-button {
    background-color: #1E88E5;
}

/* 플로팅 버튼 호버 효과 */
.floating-button:hover {
    transform: translateX(-5px);
}

/* ===================================
 * 반응형 스타일
 * ===================================
 */
/* 모바일 화면 대응 */
@media (max-width: 768px) {
    .floating-buttons {
        right: 10px;
    }
    
    .floating-button {
        width: 40px;
        height: 40px;
    }
}