/*
 Theme Name:   Astra Child (Bookcafe)
 Theme URI:    http://wpastra.com/
 Description:  Astra Child Theme for Custom Bookcafe Layout
 Author:       Antigravity
 Author URI:   http://wpastra.com/about/
 Template:     astra
 Version:      1.0.0
*/

/* 테이블 그리드 스타일 조정 (필요한 경우 여기에 작성) */
.custom-post-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 40px 0;
}

.custom-post-grid .grid-item {
    border: 1px solid #eee;
    padding: 15px;
    text-align: center;
}

.custom-post-grid img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.4;
    object-fit: cover;
}

/* ====================================================
   사용자 요청: 엘리멘터 목록 글자 크기 조정 (오밀조밀하게)
   ==================================================== */

/* 글자 크기(제목, 내용)를 작게 줄여서 오밀조밀하게 만들기 및 색상 변경 */
.elementor-post__title,
.anwp-pg-title,
.eael-entry-title,
.elementor-post__title a,
.anwp-pg-title a,
.eael-entry-title a {
    font-size: 16px !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
    color: #0c2b2f !important; /* 푸터의 안개숲 배경과 동일한 짙은 청록/녹색 */
    transition: color 0.2s ease;
    text-decoration: none;
}

/* 마우스를 올렸을 때는 상단 메뉴와 같은 보라색으로 포인트 */
.elementor-post__title a:hover,
.anwp-pg-title a:hover,
.eael-entry-title a:hover {
    color: #673ab7 !important; 
}

.elementor-post__excerpt,
.anwp-pg-excerpt,
.eael-entry-content {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* ====================================================
   사용자 요청: 책 썸네일 이미지만 완벽한 1:1 정사각형으로 고정
   ==================================================== */
/* 와일드카드를 사용하여 엘리멘터와 포스트 그리드 위젯의 썸네일 영역 전체를 타겟팅 */
div[class*="post-grid"] figure,
div[class*="post-grid"] .elementor-post__thumbnail__link,
.anwp-pg-post-thumbnail,
.anwp-link {
    aspect-ratio: 1 / 1 !important;
    /* 강제로 정사각형 뼈대 만들기 */
    overflow: hidden !important;
    border-radius: 8px;
    display: block !important;
}

div[class*="post-grid"] img,
.elementor-post__thumbnail__link img,
.anwp-pg-post-thumbnail img,
.anwp-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    /* 빈 공간이 생기더라도 원본 그림이 절대 잘리지 않도록 함 */
    background-color: #f9f9f9;
    /* 비율이 안 맞아 남는 위아래 공간을 위한 은은한 배경색 */
    display: block;
}

/* ====================================================
   히어로 배너 (Hero Banner) 통합 스타일 (배경 + 상단메뉴 + 하단카테고리)
   ==================================================== */
.custom-hero-banner {
    position: relative;
    width: 100%;
    /* 배너 높이를 넉넉하게 지정. 화면 크기에 따라 유동적 */
    height: 360px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* 메뉴가 fixed 되었으므로 요소들은 하단으로 밀어내기 */
    margin-bottom: 40px;
    /* 배너와 아래쪽 컨텐츠 사이 간격 */
}

/* 감싸는 컨테이너 (최대 너비 고정용) */
.hero-container {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}

/* 1. 상단 보라색 메뉴 바 */
.hero-top-menu {
    background-color: rgba(103, 58, 183, 0.9);
    /* 보라색 (#673ab7) 반투명 */
    width: 100%;
    /* 화면 꼭대기에 찰싹 붙음 */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* 워드프레스 관리자 바가 있을 경우 겹침 방지 */
.admin-bar .hero-top-menu {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .hero-top-menu {
        top: 46px;
    }
}

.hero-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* 상단 메뉴 화면 가운데 정렬 */
    gap: 30px;
}

.hero-nav-list li {
    margin: 0;
}

.hero-nav-list a {
    display: inline-block;
    color: #fff !important;
    text-decoration: none;
    padding: 5px 0;
    /* 9px에서 한 번 더 60% 축소 (5px) */
    font-size: 14px;
    /* 조금 더 날렵하게 보이도록 1px 축소 */
    line-height: 1 !important;
    /* 글자 주변의 눈에 보이지 않는 기본 여백까지 완전히 제거 */
    font-weight: 500;
    transition: opacity 0.2s;
}

.hero-nav-list a:hover {
    opacity: 0.8;
}

/* 2. 하단 카테고리 버튼들 */
.hero-bottom-categories {
    width: 100%;
    padding-bottom: 20px;
    /* 바닥과 약간의 여백 */
}

.category-flex {
    display: flex;
    justify-content: center;
    /* 가운데 정렬 */
    flex-wrap: wrap;
    /* 창이 좁아지면 줄바꿈 */
    gap: 15px;
    /* 버튼들 사이 원래 여백 */
}

.hero-bottom-categories a {
    background-color: rgba(30, 115, 190, 0.85);
    /* 짙은 파란색 반투명 */
    color: #fff !important;
    text-decoration: none;
    padding: 5px 20px;
    /* 6px에서 한 번 더 축소 (5px) */
    font-size: 14px;
    /* 조금 더 날렵하게 보이도록 1px 축소 */
    line-height: 1 !important;
    /* 숨은 글자 여백 제거 */
    font-weight: 500;
    border-radius: 3px;
    /* 살짝 둥글게 */
    transition: background-color 0.2s, transform 0.2s;
}

.hero-bottom-categories a:hover {
    background-color: rgba(30, 115, 190, 1);
    transform: translateY(-2px);
    /* 클릭 시 위로 살짝 뜨는 효과 */
}

/* 모바일 화면 대응 */
@media (max-width: 768px) {
    .custom-hero-banner {
        height: auto;
        min-height: 300px;
    }

    .hero-nav-list {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    .hero-nav-list a {
        padding: 10px 0;
    }



    .hero-bottom-categories a {
        padding: 8px 15px;
        font-size: 13px;
    }
}

/* ====================================================
   하단 글로벌 푸터 (상단 그림과 대칭되는 높이 및 숲 색상)
   ==================================================== */
.custom-global-footer {
    width: 100%;
    /* 상단 안개낀 숲 그림과 정확히 동일한 세로 폭 (450px) */
    height: 240px;
    /* 상단 이미지의 짙은 전나무 숲 밑단과 가장 비슷한 딥 청록색(Deep Forest Teal) 추출 적용 */
    background-color: #0c2b2f;
    display: flex;
    align-items: center;
    /* 텍스트 박스를 세로 중앙 정렬 */
    justify-content: center;
    /* 가로 중앙 정렬 */
    margin-top: 60px;
    /* 위쪽 본문과의 간격 */
    border-top: 3px solid #14494d;
    /* 밋밋하지 않게 숲 색상보다 약간 밝은 띠 추가 */
}

.footer-container {
    max-width: 1140px;
    width: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: center;
}

/* 고객님이 나중에 편하게 수정하실 수 있는 텍스트 박스 디자인 */
.footer-text-box {
    background-color: transparent;
    /* 반투명 검정 배경 제거 */
    border: none;
    /* 테두리 제거 */
    padding: 0;
    /* 패딩 제거 */
    text-align: center;
    color: #ffffff;
    /* 순수 흰색 텍스트 */
    max-width: 600px;
    width: 100%;
}

.footer-text-box h4 {
    color: #ffffff;
    font-size: 26px;
    /* 이미지처럼 제목을 더 크고 선명하게 */
    font-weight: 400;
    /* 너무 두껍지 않게 */
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: 2px;
    /* 글자 사이 간격 넓게 */
}

.footer-text-box p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 12px;
    color: #ffffff;
    /* 순수 흰색 글씨 */
    font-weight: 300;
}

.footer-text-box p:last-child {
    margin-bottom: 0;
    font-size: 13px;
    opacity: 0.8;
    /* 약간만 투명하게 */
}

/* ====================================================
   본문 하단 Home(목록으로) 버튼 스타일
   ==================================================== */
.back-to-home-btn {
    background-color: #f5f7f9;
    color: #555;
    border: 1px solid #ddd;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 25px;
    /* 둥근 캡슐 모양 */
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-to-home-btn:hover {
    background-color: #673ab7;
    /* 마우스 올렸을 때 상단 보라색과 깔맞춤 */
    color: #fff;
    border-color: #673ab7;
    transform: translateY(-2px);
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .custom-global-footer {
        height: auto;
        min-height: 300px;
        /* 모바일에서는 높이를 유동적으로 */
        padding: 40px 0;
    }

    .footer-text-box {
        padding: 30px 20px;
    }
}

/* ====================================================
   필살기: 글 제목 강제 짙은 숲색(녹색) 변경 (최강 우선순위)
   - 엘리멘터 테마 빌더나 기타 플러그인의 개별 색상 설정보다
     무조건 우선하도록 모든 경우의 수를 덮어씁니다.
   ==================================================== */
.elementor-widget-posts h1 a,
.elementor-widget-posts h2 a,
.elementor-widget-posts h3 a,
.elementor-widget-posts h4 a,
.elementor-widget-posts h5 a,
.elementor-widget-posts h6 a,
.elementor-widget-posts .elementor-post__title a,
.elementor-post__title a,
.anwp-pg-title a,
.eael-entry-title a,
article .entry-title a,
div[class*="post"] h3 a,
div[class*="grid"] h3 a,
div[class*="post"] h3,
div[class*="grid"] h3,
.elementor-post__title,
.single-category a {
    color: #0c2b2f !important;
}

/* 마우스를 올렸을 때 보라색 포인트 효과 */
.elementor-widget-posts h1 a:hover,
.elementor-widget-posts h2 a:hover,
.elementor-widget-posts h3 a:hover,
.elementor-widget-posts h4 a:hover,
.elementor-widget-posts h5 a:hover,
.elementor-widget-posts h6 a:hover,
.elementor-widget-posts .elementor-post__title a:hover,
.elementor-post__title a:hover,
.anwp-pg-title a:hover,
.eael-entry-title a:hover,
article .entry-title a:hover,
div[class*="post"] h3 a:hover,
div[class*="grid"] h3 a:hover,
.single-category a:hover {
    color: #673ab7 !important;
}

/* ====================================================
   엘리멘터 및 테마 본문 컨테이너 가운데 정렬 강제 적용 (좌측 쏠림 방지)
   ==================================================== */
.ast-container,
.site-content,
#content,
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-section-wrap,
.e-con-boxed {
    margin-left: auto !important;
    margin-right: auto !important;
}