/*
 * Theme Name:  Hokyung Fixed Sidebar Theme
 * Author:      kimhokyung
 * Description: 왼쪽 고정 사이드바 메뉴와 오른쪽 포트폴리오 그리드 테마
 * Version:     2.0
 * Text Domain: hokyung-theme
 */

/* ============================================================
   기본 초기화 (Reset)
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8fafc;
    color: #334155;
}

/* ============================================================
   레이아웃 공통 컨테이너
   ============================================================ */

/* 사이드바 + 콘텐츠 래퍼 */
.wrapper {
    min-height: 100vh;
}

/* ============================================================
   포트폴리오 그리드 (핀터레스트 스타일)
   ============================================================ */
.pin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 24px;
}

/* ============================================================
   본문 이미지 반응형 처리
   ============================================================ */
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ============================================================
   썸네일 1:1 정사각형 래퍼
   ============================================================ */
.post-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 비율 */
    overflow: hidden;
    background-color: #f3f4f6;
}

.post-thumbnail-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* 비율 유지 + 넘치는 부분 크롭 */
    object-position: center; /* 중앙 기준 크롭 */
    transition: transform 0.5s ease;
}

/* 카드 호버 시 이미지 확대 효과 */
.article-card:hover .post-thumbnail-wrapper img {
    transform: scale(1.1);
}