/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* -----------------------------------------
   1. 전체 레이아웃 (데스크톱 기준)
----------------------------------------- */
@media (min-width: 1025px) {

    /* 전체 레이아웃 wrapper */
    .container.grid-container {
        max-width: 1260px !important;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

    /* 본문 + 사이드바 2단 grid 레이아웃 */
    .generate-columns-container {
        display: grid !important;
        grid-template-columns: 1000px 260px !important; /* 본문 1000px, 사이드바 260px */
        column-gap: 0 !important;
        box-sizing: border-box;
    }

    /* 본문 wrapper */
    #primary.content-area {
        width: 1000px !important;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    /* 아티클 내부 전체 */
    .inside-article {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

    /* ✅ 수정됨: 본문 내용 900px 고정 및 완벽한 가운데 정렬 */
    .entry-content {
        width: 900px !important;
        margin: 0 auto !important; /* margin-left, right를 0에서 auto로 변경하여 중앙 정렬 */
        box-sizing: border-box;
    }

    /* 내부 요소들 */
    .entry-content > * {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* ✅ 수정됨: 사이드바 너비를 그리드 비율과 일치시킴 */
    #right-sidebar {
        width: 260px !important; /* 기존 360px에서 260px로 수정 */
        box-sizing: border-box;
    }
}

/* -----------------------------------------
   2. 사이드바 및 위젯 (검색창 등)
----------------------------------------- */
.widget_search input[type="search"] {
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    box-sizing: border-box;
}

.widget_search button {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    box-sizing: border-box;
    font-family: 'Pretendard', "Noto Sans KR", sans-serif; /* 폰트 통일감 부여 */
}

/* -----------------------------------------
   3. 타이포그래피 및 링크
----------------------------------------- */
a {
    text-decoration: none;
    transition: color 0.2s ease; /* 링크 색상 변경 시 부드럽게 전환되는 효과 추가 */
}

a:hover {
    text-decoration: underline;
}

h1 { font-size: 28px; line-height: 1.4; margin-bottom: 1em; }
h2 { font-size: 22px; line-height: 1.4; margin-bottom: 1em; }
h3 { font-size: 18px; line-height: 1.4; margin-bottom: 0.8em; }

/* -----------------------------------------
   4. 기술 블로그 맞춤 디자인 요소
----------------------------------------- */
/* ✅ 수정됨: 인라인 코드 스타일 (다크하고 세련된 느낌으로 변경) */
code {
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    background-color: #282c34; /* 어두운 배경 */
    color: #e06c75; /* 가독성 좋은 핑크/레드 텍스트 */
    padding: 3px 6px;
    font-size: 14px;
    border-radius: 4px;
}

/* 관련 글 박스 */
.related-posts {
    border: 1px solid #e9e9e9;
    border-radius: 12px; /* 너무 둥글지 않게 약간 수정 */
    padding: 20px;
    background-color: #fafafa; /* 박스 내부 배경색 살짝 추가 */
}

/* -----------------------------------------
   5. 메인 홈페이지 & 아카이브 글 목록 스타일 (유튜브 브랜드 컬러 적용)
----------------------------------------- */
/* 개별 포스트 박스 전체 */
.custom-post-box {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* 아주 은은한 그림자 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
}

/* 마우스를 올렸을 때 박스가 살짝 위로 떠오르는 효과 */
.custom-post-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* 썸네일 이미지 영역 */
.custom-thumb {
    width: 240px; /* 이미지 너비 고정 */
    overflow: hidden;
    border-radius: 8px; /* 이미지 모서리 둥글게 */
}

.custom-thumb img {
    width: 100%;
    height: 160px; /* 모든 썸네일 높이를 균일하게 맞춤 */
    object-fit: cover; /* 비율이 달라도 찌그러지지 않고 꽉 차게 */
    transition: transform 0.4s ease;
}

/* 박스에 마우스를 올리면 썸네일 이미지가 살짝 확대됨 */
.custom-post-box:hover .custom-thumb img {
    transform: scale(1.05); 
}

/* 제목 및 텍스트 영역 */
.custom-summary {
    flex: 1; /* 남은 우측 공간을 모두 차지 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.custom-summary h3 {
    margin-top: 0;
    font-size: 20px;
    font-weight: 700;
}

.custom-summary h3 a {
    color: #222222;
}

/* ✅ 수정됨: 제목 호버 시 포인트 색상 변경 (유튜브 로고의 분홍색 적용) */
.custom-summary h3 a:hover {
    color: #FC1D57 !important; /* 유튜브 로고 텍스트의 분홍색 적용 */
    text-decoration: none;
}

.custom-summary .excerpt {
    color: #555555;
    font-size: 15px;
    line-height: 1.6;
    margin-top: 5px;
}

/* ✅ 수정됨: '더 읽기' 텍스트를 버튼처럼 깔끔하게 (유튜브 로고의 분홍색 적용) */
.custom-summary .excerpt a {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #FC1D57 !important; /* 유튜브 로고 텍스트의 분홍색 적용 */
}

.custom-summary .excerpt a:hover {
    text-decoration: underline;
}

/* -----------------------------------------
   6. 반응형 레이아웃 (태블릿 & 모바일)
----------------------------------------- */

/* 태블릿 구간 (1024px 이하) */
@media (max-width: 1024px) {
    /* 전체 컨테이너 너비 제한 해제 */
    .container.grid-container {
        max-width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 2단 그리드를 1단으로 변경 (본문과 사이드바 수직 배치) */
    .generate-columns-container {
        display: block !important;
    }

    /* 본문 영역 너비 자동 조절 */
    #primary.content-area,
    .entry-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 사이드바를 본문 아래로 내리고 너비 확장 */
    #right-sidebar {
        width: 100% !important;
        margin-top: 40px;
    }
}

/* 모바일 구간 (768px 이하) */
@media (max-width: 768px) {
    /* 글 목록(포스트 박스) 구조 변경: 가로형 -> 세로형 */
    .custom-post-box {
        flex-direction: column !important; /* 썸네일과 텍스트를 위아래로 */
        padding: 15px;
    }

    .custom-thumb {
        width: 100% !important; /* 썸네일 가로 꽉 차게 */
        margin-bottom: 15px;
    }

    .custom-thumb img {
        height: auto; /* 이미지 비율 유지 */
        aspect-ratio: 16 / 9;
    }

    /* 타이포그래피 크기 소폭 축소 */
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 17px; }

    .custom-summary h3 {
        font-size: 18px;
    }
}