/* 기본 설정 (CSS 변수를 활용해 테마 관리를 쉽게 만듦) */
:root {
    --primary-color: #f7a600; /* 오렌지색 계열 (버튼 및 아이콘 색상) */
    --primary-hover: #ffb74d;
    --text-light: #ffffff;
    --text-dim: #cccccc;
    --card-bg: rgba(20, 30, 40, 0.65); /* 어두운 남색 반투명 */
    --card-hover-bg: rgba(30, 42, 55, 0.85); /* 마우스 오버 시 조금 밝아짐 */
    --border-color: rgba(255, 255, 255, 0.08); /* 눈에 잘 띄지 않는 아주 연한 흰색 테두리 */
}

/* 브라우저 기본 마진 및 패딩 제거 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    font-family: 'Noto Sans KR', sans-serif; /* 한글 폰트 */
    color: var(--text-light);
    overflow-x: hidden;
}

/* 배경 이미지 세팅 */
body {
    /* 로컬(images 폴더)에 저장된 산 배경 이미지 사용 */
    background: url('./images/background.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* 배경을 전체적으로 어둡고 깊이감 있게 만들어주는 오버레이(겹침) 레이어 */
.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 양쪽 가장자리를 어둡게, 가운데를 살짝 밝게 그라데이션 */
    background: radial-gradient(circle at center, rgba(30, 45, 60, 0.4) 0%, rgba(10, 15, 25, 0.85) 100%);
    z-index: -1;
}

/* 모든 콘텐츠가 가운데 정렬되도록 잡아주는 부모 레이아웃 */
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8vh 20px; /* 화면 높이에 따라 유동적인 위쪽 여백 */
    min-height: 100vh;
}

/* 상단 타이틀 로고 영역 */
.header {
    margin-bottom: 50px;
    text-align: center;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* 로고 기호와 글자 사이 간격 */
}

/* 로고 왼쪽 나뭇잎 아이콘 디자인 */
.logo-icon {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: contain;
}

/* 로고 텍스트 색상 그라데이션 만들기 (원본 유사) */
.logo .text-gradient {
    background: linear-gradient(135deg, #00A651, #0054A6, #ED1C24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo h1 {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -1px;
}

.logo h1 span {
    font-weight: 500;
}

/* 
  서비스 카드 묶음 영역 (CSS Grid)
  한 줄에 기본 3개씩 배치되도록 설정함 
*/
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 950px;
    width: 100%;
}

/* 개별 카드 디자인 (Glassmorphism 적용 - 투명 유리 느낌) */
.service-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none; /* a 태그 밑줄 제거 */
    color: var(--text-light);
    
    /* 배경 블러 처리 (글래스모피즘 핵심 속성) */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* 애니메이션 트랜지션 (마우스 올릴때 부드럽게) */
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 카드에 마우스를 올렸을 때의 호버 애니메이션 */
.service-card:hover {
    background: var(--card-hover-bg);
    transform: translateY(-8px); /* 위로 살짝 떠오름 */
    border-color: rgba(247, 166, 0, 0.4); /* 주황색 테두리가 살짝 켜짐 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* 카드 중앙을 장식하는 오렌지색 선형 아이콘 (이미지 버전) */
.service-icon {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    
    /* 이미지에 글로우 효과 적용 (SVG 내부 stroke와 함께 시너지) */
    filter: drop-shadow(0 0 8px rgba(247, 166, 0, 0.25));
}

/* 카드에 마우스를 올리면 아이콘이 살짝 커짐 */
.service-card:hover .service-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px rgba(247, 166, 0, 0.5));
}

/* 카드 하단의 텍스트(제목) 부분 */
.service-title {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
    word-break: keep-all; /* 한글 단어 단위 보존 */
}

/* ====== 반응형 웹 디자인 (모바일, 태블릿 지원) ====== */

/* 해상도가 900px 이하일 때 (태블릿) 3칸 -> 2칸으로 자동 조정 */
@media (max-width: 900px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 해상도가 600px 이하일 때 (모바일) 2칸 -> 1칸 세로 배열로 자동 조정 */
@media (max-width: 600px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
    
    .logo h1 {
        font-size: 2rem;
    }
}