/*
Theme Name: GeneratePress Child
Theme URI: https://starfragrance.kr
Description: 별내음공방 자식테마 — 기본폰트 Noto Sans KR / sedamyi 갤러리 / themovingclock 종이책
Author: Creskim
Template: generatepress
Version: 1.5.0
Text Domain: generatepress-child
*/

/* ============================================================
   0) 전체 기본 폰트 — Noto Sans KR
   ============================================================ */
body,
button,
input,
select,
textarea {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================================================
   1) sedamyi — 인스타 느낌 정사각 갤러리
   ── 조절 포인트: 칸 수(grid-template-columns), 간격(gap)
   ============================================================ */
.sedamyi-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 데스크탑 3칸 */
    gap: 8px;
    margin: 2rem 0;
}

@media (max-width: 600px) {
    .sedamyi-gallery {
        gap: 4px;                            /* 모바일은 더 촘촘하게 */
    }
}

.sedamyi-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;                     /* 정사각 1:1 */
    overflow: hidden;
    background: #f1f1f1;
    text-decoration: none;
}

.sedamyi-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.sedamyi-card:hover img {
    transform: scale(1.05);                  /* 살짝 줌인 */
}

.sedamyi-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .8rem;
    text-align: center;
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.4;
    word-break: keep-all;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .25s ease;
}

.sedamyi-card:hover .sedamyi-overlay {
    opacity: 1;                              /* 호버 시 제목 오버레이 */
}

.sedamyi-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #aaa;
    font-size: .85rem;
}

.sedamyi-empty {
    padding: 2rem 0;
    color: #888;
}

/* ============================================================
   2) themovingclock — 종이책 테마
   ── 본명조(Noto Serif KR) + 크림 지면 + 넉넉한 줄간격
   ============================================================ */
.category-themovingclock .entry-title,
.category-themovingclock .entry-content,
.category-themovingclock .entry-content p,
.category-themovingclock .entry-summary {
    font-family: 'Noto Serif KR', Georgia, 'Times New Roman', serif;
}

.category-themovingclock .entry-content,
.category-themovingclock .entry-summary {
    line-height: 2.0;
    letter-spacing: -0.01em;
    font-size: 1.05rem;
    color: #2b2b2b;
    word-break: keep-all;                    /* 한글 줄바꿈 자연스럽게 */
    text-align: justify;
}

/* 개별 글을 한 장의 종이처럼 */
.category-themovingclock .entry-content {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    background: #fbf8f1;                      /* 크림색 지면 */
    padding: 2.4rem 2.2rem;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}

.category-themovingclock .entry-title {
    text-align: center;
    letter-spacing: -0.02em;
}

/* ============================================================
   3) 개별 글(single) 상단 페이지헤더 대표이미지 숨김
   ── GeneratePress 무료판은 커스터마이저 토글이 없어 코드로 처리.
   ── functions.php의 remove_action이 주 처리, 이건 안전망(display:none).
   ── 목록/sedamyi 갤러리 썸네일은 영향 없음.
   ============================================================ */
.single .page-header-image-single {
    display: none;
}

/* ============================================================
   4) creation — 카드형 보기 (썸네일 + 제목 + 발췌)
   ── 조절 포인트: 칸 수(grid-template-columns), 간격(gap),
      썸네일 비율(aspect-ratio), 발췌 줄수(-webkit-line-clamp)
   ============================================================ */
.creation-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 데스크탑 3칸 */
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (max-width: 1024px) {
    .creation-cards {
        grid-template-columns: repeat(2, 1fr);  /* 태블릿 2칸 */
    }
}

@media (max-width: 600px) {
    .creation-cards {
        grid-template-columns: 1fr;             /* 모바일 1칸 */
        gap: 1.1rem;
    }
}

.creation-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.creation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.creation-card-thumb {
    display: block;
    aspect-ratio: 16 / 10;                      /* 썸네일 비율 */
    overflow: hidden;
    background: #f1f1f1;
}

.creation-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.creation-card:hover .creation-card-thumb img {
    transform: scale(1.04);
}

.creation-card-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #aaa;
    font-size: .85rem;
}

.creation-card-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.1rem 1.2rem;
}

.creation-card-title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.4;
    word-break: keep-all;
}

.creation-card-title a {
    color: #222;
    text-decoration: none;
}

.creation-card-title a:hover {
    text-decoration: underline;
}

.creation-card-meta {
    font-size: .8rem;
    color: #999;
}

.creation-card-excerpt {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: #666;
    word-break: keep-all;
    /* 4줄에서 말줄임 */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.creation-empty {
    padding: 2rem 0;
    color: #888;
}

/* ============================================================
   5) 본문 사진(이미지) 앞뒤 간격 — 모든 글 공통
   ── 글(문단) 사이 간격은 그대로 두고, 이미지 위아래로만 여백.
   ── 연속 사진끼리도 margin collapse로 한 칸 간격 생김.
   ── 조절 포인트: margin 값(1.6rem)
   ============================================================ */
.entry-content figure.wp-block-image,
.entry-content figure.wp-block-gallery,
.entry-content .wp-block-image {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}

/* 클래식 에디터로 넣은 이미지(<p><img>) 대비 */
.entry-content p > img {
    display: block;
    margin: 1.6rem auto;
}

/* ============================================================
   6) picture 그룹 — 갤러리 (썸네일 + 아래 제목)
   ── 적용: picture / picture-plant / picture-animal / picture-microorganism …
   ── 조절 포인트: 칸 수(grid-template-columns), 간격(gap), 비율(aspect-ratio)
   ============================================================ */
.picture-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 데스크탑 4칸 */
    gap: 1rem;
    margin: 2rem 0;
}

@media (max-width: 900px) {
    .picture-gallery {
        grid-template-columns: repeat(3, 1fr);  /* 태블릿 3칸 */
    }
}

@media (max-width: 600px) {
    .picture-gallery {
        grid-template-columns: repeat(2, 1fr);  /* 모바일 2칸 */
        gap: .6rem;
    }
}

.picture-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.picture-thumb {
    display: block;
    aspect-ratio: 4 / 3;                      /* 가로 4:3 */
    overflow: hidden;
    background: #f1f1f1;
    border-radius: 6px;
}

.picture-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.picture-card:hover .picture-thumb img {
    transform: scale(1.04);
}

.picture-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #aaa;
    font-size: .85rem;
}

.picture-title {
    margin-top: .55rem;
    font-size: .92rem;
    line-height: 1.4;
    color: #333;
    text-align: center;
    word-break: keep-all;
    /* 제목 길면 2줄에서 말줄임(그리드 정렬 유지) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.picture-card:hover .picture-title {
    text-decoration: underline;
}

.picture-empty {
    padding: 2rem 0;
    color: #888;
}