/* 기본 설정 (Reset & Fonts) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f7f6;
    color: #333;
}

/* 전체 레이아웃 (Layout) */
main {
    width: 100%;
    max-width: 1100px; /* 콘텐츠 최대 넓이 */
    margin: 2rem auto; /* 상하 여백, 좌우 자동(가운데 정렬) */
    padding: 0 1rem;
}

header, footer {
    text-align: center;
    padding: 2rem 1rem;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

/* 각 섹션별 스타일 (Sections) */
section {
    padding: 3rem 0;
    margin-bottom: 2rem;
}

h1, h2, h3, h4 {
    margin-bottom: 1rem;
    line-height: 1.2;
}

h2 { font-size: 2.2rem; color: #2c3e50; text-align: center; }
h3 { font-size: 1.8rem; color: #34495e; }
h4 { font-size: 1.2rem; color: #2c3e50; }

a {
    text-decoration: none;
    color: #3498db;
}

p {
    margin-bottom: 1rem;
    color: #555;
}

/* 서비스 카드 스타일 (Cards) */
.card-container, .post-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 반응형 그리드 */
    gap: 1.5rem; /* 카드 사이의 간격 */
}

.card a, .post-snippet a {
    display: block;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    height: 100%;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card a:hover, .post-snippet a:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.card a .go-link {
    font-weight: bold;
    color: #3498db;
}

/* 블로그 미리보기 스타일 (Blog Preview) */
.post-snippet img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.post-snippet .category {
    display: inline-block;
    background-color: #e7f5ff;
    color: #3498db;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* ====================================================== */
/* 대표 서비스(Featured Card) 강조 스타일 */
/* ====================================================== */

.card.featured a {
    border-color: #3498db; /* 메인 색상으로 테두리 강조 */
    border-width: 2px;
    position: relative;
    background-color: #f8f9fa;
}

/* '대표 서비스' 뱃지 추가 */
.card.featured a::before {
    content: '대표 서비스';
    position: absolute;
    top: -1px; /* 테두리에 붙도록 조정 */
    right: 15px;
    background-color: #3498db; /* 메인 색상 */
    color: #fff;
    padding: 0.2rem 0.8rem;
    border-radius: 0 0 5px 5px;
    font-size: 0.8rem;
    font-weight: bold;
}


/* ====================================================== */
/* 핵심 가치(Features) 섹션 스타일 */
/* ====================================================== */

.features-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.feature-item {
    text-align: center;
    padding: 1rem;
}

/* 아이콘을 위한 예시 스타일 (실제 아이콘 라이브러리 사용 시 수정 필요) */
.feature-item i {
    font-size: 3rem;
    color: #3498db; /* 메인 색상 */
    margin-bottom: 1rem;
}

.feature-item h4 {
    margin-bottom: 0.5rem;
}

/* ====================================================== */
/* 반응형 웹을 위한 미디어 쿼리 (Responsive Web) */
/* ====================================================== */

/* 화면이 768px보다 작아지면 아래 스타일을 적용합니다. (태블릿 & 모바일) */
@media (max-width: 768px) {

    /* 제목 폰트 크기 줄이기 */
    h2 {
        font-size: 1.8rem;
    }
    h3 {
        font-size: 1.5rem;
    }

    /* 섹션의 상하 패딩 줄이기 */
    section {
        padding: 2rem 0;
    }

    /* 메인 콘텐츠 좌우 여백 줄이기 */
    main {
        padding: 0 1rem;
    }
    
    /* 서비스 카드와 블로그 게시물을 한 줄에 하나씩만 표시 */
    .card-container, .post-container {
        grid-template-columns: 1fr; /* 1개의 컬럼으로 변경 */
    }

    /* 블로그 미리보기 이미지 높이 자동 조절 */
    .post-snippet img {
        height: auto;
    }
}

/* 화면이 480px보다 작아지면 아래 스타일을 추가로 적용합니다. (모바일) */
@media (max-width: 480px) {
    
    /* 더 작은 화면에 맞춰 제목 폰트 크기 한번 더 줄이기 */
    h2 {
        font-size: 1.6rem;
    }
    h3 {
        font-size: 1.3rem;
    }

    /* 카드와 게시물의 내부 여백 줄이기 */
    .card a, .post-snippet a {
        padding: 1rem;
    }
}

/* ====================================================== */
/* 후원 안내 배너 스타일 */
/* ====================================================== */
.support-banner {
    background-color: #eaf5ff; /* 부드러운 파란색 계열 */
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}
.support-banner h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}
.support-banner p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
    color: #555;
}
.button-primary {
    display: inline-block;
    background-color: #3498db;
    color: #fff;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s;
}
.button-primary:hover {
    background-color: #2980b9;
}