/*
Theme Name: Astra Child Custom Blog
Theme URI: https://wpastra.com/
Description: Studio-grade Premium Minimalist Theme tailored for Astra Core Infrastructure.
Author: Custom Developer
Author URI: https://wpastra.com/
Template: astra
Version: 4.0.0
Text Domain: astra-child
*/

/* ==========================================================================
   1. 고급 웹폰트 및 시스템 변수 설정
   ========================================================================== */
/* 초고해상도 디스플레이에서도 글자 깨짐이 없는 프리미엄 프리텐다드 폰트 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
    --clr-primary: #0f172a;       /* 아주 깊고 신뢰감을 주는 딥 차콜 */
    --clr-accent: #4f46e5;        /* 트렌디하고 세련된 프리미엄 인디고 퍼플 */
    --clr-accent-hover: #4338ca;
    --clr-body: #334155;           /* 독서 시 피로감을 줄여주는 최적의 슬레이트 블랙 */
    --clr-muted: #64748b;          /* 메타 정보 및 날짜용 그레이 */
    --clr-bg: #f8fafc;             /* 갤러리 미술관 같은 은은하고 맑은 미색 배경 */
    --clr-white: #ffffff;
    --clr-border: #f1f5f9;         /* 경계선이 도드라지지 않도록 아주 연하게 처리 */
    
    /* 그림자 디테일 (카드가 붕 떠 있는 듯한 고급스러운 플로팅 효과) */
    --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.03), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
    --shadow-lg: 0 20px 40px -15px rgba(79, 70, 229, 0.12);
    
    --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* 하이엔드 모션 인터랙션 */
}

/* 아스트라 글로벌 타이포그래피 덮어쓰기 (자간 최적화) */
body, .site, input, select, textarea, button {
    font-family: var(--font-sans) !important;
    letter-spacing: -0.025em !important; /* 한글 가독성이 가장 정돈되어 보이는 간격 */
    background-color: var(--clr-bg) !important;
}

/* ==========================================================================
   2. 아스트라 부모 헤더 전용 마이크로 디자인 튜닝
   ========================================================================== */
/* 부모 헤더가 가지고 있는 고유의 정렬을 유지하되, 미세한 서체 투명도와 색상 조정 */
.main-header-bar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--clr-border) !important;
}

.main-header-menu .menu-item a {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: var(--transition) !important;
}

/* 다국어 플러그인 컴포넌트 텍스트 밸런스 정렬 */
.wpml-ls-item a, .lang-item a {
    font-size: 0.85rem !important;
    opacity: 0.8;
}

/* ==========================================================================
   3. 내가 만든 index.php 전용 매거진 카드 그리드 (완벽 통제 구역)
   ========================================================================== */
.custom-pure-main-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 24px;
}

.custom-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 48px 36px; /* 행간 여백을 넓혀 잡지 같은 느낌을 부여 */
    align-items: stretch; /* 카드의 세로 높이를 내부 컨텐츠 양에 관계없이 칼정렬 */
}

/* 개별 블로그 포스트 카드 스타일 */
.custom-blog-card {
    background: var(--clr-white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.custom-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(79, 70, 229, 0.15);
}

/* 썸네일 박스 16:10 황금비율 크기 강제 고정 시스템 */
.card-thumbnail {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #f1f5f9;
    position: relative;
}

.card-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 어떤 이미지가 들어와도 찌그러짐을 원천 차단 */
    display: block;
    transition: var(--transition);
}

.custom-blog-card:hover .card-thumbnail img {
    transform: scale(1.04);
}

/* 이미지가 없는 첫 번째 카드를 구제하는 은은한 그라데이션 플레이스홀더 */
.no-thumb-placeholder {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-icon {
    font-size: 1.8rem;
    opacity: 0.25;
}

/* 카드 내부 텍스트 레이아웃 및 하단 정렬 고정 */
.card-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-meta {
    margin-bottom: 12px;
}

.card-date {
    font-size: 0.85rem;
    color: var(--clr-muted);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.card-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 14px 0;
    word-break: keep-all; /* 한글 단어가 중간에 끊기지 않도록 예쁘게 래핑 */
}

.card-title a {
    color: var(--clr-primary);
    text-decoration: none;
    transition: var(--transition);
}

.card-title a:hover {
    color: var(--clr-accent);
}

.card-excerpt {
    color: var(--clr-body);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 24px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 세 줄이 넘어가면 자동으로 말줄임표 처리 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Read More 버튼 위치를 항상 카드의 가장 밑바닥 라인에 일렬 고정 */
.card-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(241, 245, 249, 0.8);
}

.read-more-btn {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--clr-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--transition);
}

.read-more-btn:hover {
    color: var(--clr-accent-hover);
    transform: translateX(4px);
}

/* ==========================================================================
   4. 번호형 페이지네이션 스타일링
   ========================================================================== */
.custom-pagination {
    margin-top: 70px;
    text-align: center;
}

.custom-pagination .nav-links {
    display: inline-flex;
    gap: 8px;
}

.custom-pagination .page-numbers {
    padding: 10px 18px;
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--clr-body);
    font-weight: 600;
    transition: var(--transition);
}

.custom-pagination .page-numbers.current,
.custom-pagination .page-numbers:hover {
    background: var(--clr-accent);
    color: var(--clr-white);
    border-color: var(--clr-accent);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.15);
}