/* Common Styles */

:root {
    --bg: #ffffff;
    --post-bg: #fcfcfc; /* 블로그 배경색 */
    --text: #111111;
    --sub-text: #666666;
    --card-bg: #F5F5F5; 
    --accent: #2563eb;
    --border: #EDEDED;
    --quote-bg: #f0f7ff; /* 강조박스 색상 */
    --card-shadow: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] {
    --bg: #121212;
    --post-bg: #121212;
    --text: #ececec;
    --sub-text: #aaaaaa;
    --card-bg: #1e1e1e;
    --border: #333333;
    --quote-bg: #1e293b; /* 강조박스 색상 */
    --card-shadow: rgba(0, 0, 0, 0.2);
}




    /* 2. 기본 스타일 */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { 
        background-color: var(--bg); 
        color: var(--text); 
        font-family: 'Pretendard', -apple-system, sans-serif; 
        line-height: 1.6;
        transition: background-color 0.3s, color 0.3s;
    }
    .container { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }




/* sns-badges -> badge-group */
.badge-group { display: flex; gap: 12px; flex-wrap: wrap; }
.badge { 
    padding: 10px 20px; 
    border-radius: 30px; 
    background: var(--card-bg); 
    border: 1px solid var(--border);
    text-decoration: none; 
    color: var(--text); 
    font-size: 0.9rem;
    font-weight: 500; 
    transition: all 0.2s;

    display: inline-flex;
    align-items: center; 
    gap: 8px; /* 아이콘과 글자 사이 간격을 margin-right 대신 gap으로 해결 가능 */
}
.badge:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.badge i {
    margin-right: 6px; /* 아이콘과 텍스트 사이 간격 */
    font-size: 1rem;   /* 아이콘 크기 살짝 키우기 */
    vertical-align: middle;
}



/* 섹션 별 타이틀 */
.section-title { margin-top: 80px; margin-bottom: 30px; font-size: 1.8rem; }



/* project-card -> preview-card */
.preview-card { 
    flex: 0 0 350px; scroll-snap-align: start;
    background: var(--card-bg); border-radius: 16px; 
    overflow: hidden; border: 1px solid var(--border);
    box-shadow: 0 4px 15px var(--card-shadow);
    transition: 0.3s;
    scroll-snap-align: start; /* 스크롤 정지 시 카드의 시작 부분을 기준선에 맞춤 */
}
.preview-card:hover { transform: scale(1.02); }
.preview-img { width: 100%; height: 200px; background: #eee; object-fit: cover; }
.preview-info { padding: 25px; }
.preview-info h3 { margin-bottom: 10px; }
.preview-info p { color: var(--sub-text); font-size: 0.95rem; margin-bottom: 20px; height: 3rem; overflow: hidden; }
/* 모바일 환경에서 프리뷰카드 크기 줄이기 */
@media (max-width: 600px) {
    .preview-card { flex: 0 0 280px; }
}



    /* a태그? */
    .view-more { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
    .view-more:hover { 
        color : var(--text);
        outline: 2px solid var(--text); 
        outline-offset: 8px;
        border-radius: 8px;
    }




/* 6. 블로그 섹션 */
/* blog -> post */
.post-list { display: flex; flex-direction: column; gap: 15px; }
.post-item { 
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px; background: var(--card-bg); border-radius: 12px;
    text-decoration: none; color: var(--text); border: 2px solid var(--border);
    transition: 0.2s;
}
.post-item:hover { border-color: var(--accent); }
.post-date { color: var(--sub-text); font-size: 0.85rem; }




.copyright {
    font-size: 0.85rem; color: #999; margin-top: 20px;
}