@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* 자식 테마의 style.css에 추가 */
#footer, .related-entry-card, .comment-area {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}


/* 화면 밖의 무거운 요소를 렌더링에서 제외 */
.footer-before-widgets, .site-footer, .sns-share, .entry-related {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1000px; /* 예상 높이 */
}





/* 모바일 화면 (일반적으로 1023px 이하 또는 테마 설정 기준) */
@media (max-width: 1023px) {
    /* 1. 모바일 메뉴 컨테이너를 가로 정렬로 변경 */
    ul.menu-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* 절대 줄바꿈 되지 않음 */
        justify-content: space-around !important; /* 항목 간 간격 균등 분배 */
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* 2. 각 리스트 항목(li)을 동일한 비율로 설정 */
    ul.menu-mobile li.menu-item {
        flex: 1 !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important; /* 텍스트가 넘쳐도 박스 크기 유지 */
    }

    /* 3. 링크 영역을 Flex박스로 만들어 수직/수평 중앙 정렬 */
    ul.menu-mobile li.menu-item a {
        display: flex !important;
        align-items: center !important;    /* 수직 중앙 정렬 */
        justify-content: center !important; /* 수평 중앙 정렬 */
        text-align: center !important;
        min-height: 45px !important;       /* 터치하기 편한 최소 높이 설정 */
        padding: 0 2px !important;         /* 상하 패딩 제거, 좌우만 유지 */
        text-decoration: none !important;
    }

    /* 4. 내부 텍스트 라벨 및 감싸는 태그 초기화 */
    ul.menu-mobile li.menu-item .caption-wrap,
    ul.menu-mobile li.menu-item .item-label {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;       /* 줄 간격을 기본으로 돌려 하단 쏠림 방지 */
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* 혹시 모를 하단 마진 강제 제거 */
    ul.menu-mobile li {
        margin-bottom: 0 !important;
    }
}






/* 헤더 전체 영역 높이 조절 */
#header {
    padding-top: 5px !important;    /* 위쪽 여백 축소 */
    padding-bottom: 0px !important; /* 아래쪽 여백 축소 */
    min-height: auto !important;     /* 테마가 설정한 최소 높이 해제 */
}

/* 헤더 내부 컨테이너 여백 조절 */
#header-in {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 사이트 이름(로고) 주변 여백 및 높이 조절 */
#header .logo {
    margin: 0 !important;            /* 로고 주변 마진 제거 */
    padding: 5px 0 !important;       /* 로고 위아래 미세 여백 */
    line-height: 1.2 !important;     /* 글자 줄 간격 축소 */
}

/* 사이트 이름 텍스트 크기 (너무 크면 높이를 차지하므로 조절) */
.site-name-text {
    font-size: 22px !important;      /* 모바일에서 너무 크다면 숫자를 줄이세요 */
	  font-weight: 600 !important;
    display: inline-block;
    vertical-align: middle;
}

/* 태그라인(설명 문구)이 비어있어도 공간을 차지할 경우 제거 */
.tagline {
    display: none !important;
}








/* 관련 글 전체 컨테이너 여백 조정 */
.related-entries {
    padding: 10px 0;
}

/* 카드 디자인: 그림자와 둥근 모서리 */
.related-entry-card {
    background: #fff;
    border: 1px solid #e0e0e0 !important;
    border-radius: 16px !important; /* 디스커버의 부드러운 곡선 */
    margin-bottom: 16px !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease;
}

/* 썸네일: 가로 가득 채우기 */
.related-entry-card-thumb {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.related-entry-card-thumb img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    /* 고정 비율을 설정하여 이미지가 늘어지는 것을 방지 (구글 디스커버 스타일) */
    aspect-ratio: 16 / 9 !important; 
    object-fit: cover !important; /* 비율에 맞게 꽉 채움 */
    display: block;
}

/* 데스크탑에서 카드가 너무 넓어지지 않게 조정 (선택 사항) */
@media screen and (min-width: 1024px) {
    .related-entry-card {
        max-width: 800px; /* 너무 퍼지면 화질이 낮아 보일 수 있으므로 상한선 설정 */
        margin-left: auto;
        margin-right: auto;
    }
}

/* 제목 및 본문 텍스트 */
.related-entry-card-content {
    padding: 12px !important;
    margin: 0 !important;
}

.related-entry-card-title {
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    color: #202124 !important; /* 구글 텍스트 전용 색상 */
    margin-bottom: 8px !important;
}






/* 본문을 밀어내는 상단 여백 제거 */
body.wp-child-theme-cocoon-child-master {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 만약 특정 모바일 클래스가 붙었을 때만 여백이 생긴다면 이것도 추가 */
body.mblt-header-mobile-buttons {
    margin-top: 0 !important;
}