/* global-style.css */
:root {
    --primary: #457856;
    --accent-coral: #E57373;
    
    /* 🏛️ 배경색을 따뜻한 미색(Warm Off-white)으로 변경 */
    --bg-body: #FAF9F6;  /* 부드러운 양모색 느낌 */
    --bg-card: #FFFFFF;  /* 카드는 순백색으로 유지하여 입체감 부여 */
    
    --text-main: #2C2C2C;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

body {
    font-family: 'Pretendard', sans-serif;
    background-color: var(--bg-body);
    margin: 0; padding: 0;
    color: var(--text-main);
    line-height: 1.6;
}

.u-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

/* 공통 카드 레이아웃 */
.u-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 25px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

/* 메뉴 격자 (2열) */
.u-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

/* 아이콘 카드 스타일 */
.u-icon-card {
    background: white;
    padding: 20px 15px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    border: 2px solid #eef2f6;
    box-shadow: var(--shadow);
    transition: 0.3s;
    text-align: center;
}
.u-icon-card:active { transform: scale(0.96); border-color: var(--primary); }

.u-icon-box {
    width: 48px; height: 48px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.3rem;
    margin-bottom: 12px;
}

/* SNS 그리드 (3열) */
.u-sns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

/* 색상 그라데이션 테마 */
.bg-church { background: linear-gradient(135deg, #3498db, #87ceeb); }
.bg-vision { background: linear-gradient(135deg, #f1c40f, #f39c12); }
.bg-jubo { background: linear-gradient(135deg, #2ecc71, #a8e063); }
.bg-meds { background: linear-gradient(135deg, #1dd1a1, #10ac84); }
.bg-bible { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.bg-thanks { background: linear-gradient(135deg, #ff7675, #fd79a8); }
.bg-prayer { background: linear-gradient(135deg, #ff9a9e, #fecfef); }
.bg-dash { background: linear-gradient(135deg, #667eea, #764ba2); }

/* 메타 정보(조회, 다운로드 등) 스타일 */
.med-meta-info {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: #888;
    font-weight: 600;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.med-meta-info i {
    margin-right: 4px;
    color: var(--primary); /* 아이콘에 포인트 색상 */
    font-size: 0.85rem;
}

/* 1. 말씀 카드 클릭 효과 */
.meditation-expand-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* 모바일 터치 시 파란 잔상 제거 */
}

/* 카드를 꾹 누르고 있을 때 (손맛의 핵심) */
.meditation-expand-card:active {
    transform: scale(0.97); /* 3% 정도 작아지며 눌리는 느낌 */
    filter: brightness(0.95); /* 약간 어두워지며 입체감 부여 */
}

/* 2. 시작하기 버튼 클릭 효과 */
.med-start-btn {
    transition: all 0.2s ease;
}

/* 버튼 위에 마우스를 올렸을 때 */
.med-start-btn:hover {
    background-color: #8e7454; /* 좀 더 짙은 브라운 */
    box-shadow: 0 4px 12px rgba(166, 138, 100, 0.3);
}

/* 버튼을 꾹 누를 때 */
.med-start-btn:active {
    transform: scale(0.95) translateY(2px); /* 5% 작아지며 아래로 살짝 내려감 */
    filter: brightness(0.85);
}

/* 3. 메뉴 아이콘 카드들에도 공통 적용 (선택사항) */
.u-icon-card:active {
    transform: scale(0.92);
    transition: transform 0.1s;
}

/* 📖 말씀 묵상 카드 전용 코랄 아이콘 박스 */
.med-icon-box-coral {
    width: 48px;                /* 박스 너비 */
    height: 48px;               /* 박스 높이 */
    background-color: #FFF0F0;  /* 아주 연한 코랄 핑크 배경 */
    border-radius: 14px;        /* 부드러운 곡선 테두리 */
    display: flex;
    align-items: center;        /* 아이콘 중앙 정렬 */
    justify-content: center;    /* 아이콘 중앙 정렬 */
    color: var(--accent-coral); /* 코랄색 (#E57373) 적용 */
    font-size: 1.5rem;          /* 아이콘 크기 확대 */
    flex-shrink: 0;             /* 화면이 작아져도 아이콘 크기 유지 */
    margin-top: 5px;            /* 텍스트와 높이 맞춤 */
    box-shadow: 0 4px 10px rgba(229, 115, 115, 0.1); /* 은은한 그림자 */
}

/* 아이콘 자체에 생동감 추가 */
.med-icon-box-coral i {
    filter: drop-shadow(0 2px 4px rgba(229, 115, 115, 0.2));
}