/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/
html { font-size: 16px; }

body {
  font-family: 'Pretendard Variable', sans-serif;
}


    /* === 메인(홈) 페이지만 배경 변경 === */
    body.home,
    body.home #page {
        background-color: eaebee !important; /* 원하는 색상 */
    }

        /* (선택) 헤더 색상도 메인에서만 변경 */
        body.home #masthead,
        body.home .main-header-bar {
            background-color: eaebee !important;
        }

/* ============================
   🔷 헤더 스타일
   ============================ */
/* 헤더 */


.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.2); /* 반투명 흰색 (70%) */
    backdrop-filter: blur(10px); /* 배경 흐림 효과 추가 */
    transition: background 0.3s ease-in-out;
}

.site-content { /* 또는 #content */
    padding-top: var(--header-h);
}


.ast-container {
    padding-top: 0px; 
}




/* 검색 아이콘 오른쪽 여백만 10px 주기 */
.ast-header-break-point .ast-search-menu-icon {
    margin-right: -15px;
    margin-bottom: 2px;
}


.site-header-primary-section-right .menu-toggle.main-header-menu-toggle {
  margin-right: -10px;
}


.site-logo-img,
.site-title a {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}




/* 기본: 라인 없음 */
.site-header {
    border-bottom: none;
    transition: border-bottom 0.3s ease;
}

/* 스크롤 시 클래스가 붙으면 라인 생성 */
    .site-header.scrolled {
        background-color: rgba(255, 255, 255, 0.95) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        transition: all 0.3s ease;
    }


    .site-title a {
  font-weight: 900 !important;
}



/* ============================
   🔷 메인 페이지 (글 목록) 스타일 인덱스사용할때
   ============================ */

/* 메인 페이지 글 제목 (왼쪽 정렬 유지) */
.blog .entry-title,
.home .entry-title {
    text-align: left;
    font-size: 1.5rem !important;
    font-weight: bold;
    color: #353849;
    margin-bottom: 5px;
}


/* 메인 페이지에서 날짜와 글쓴이 색상 */
.blog .author-name,
.blog .published,
.blog .entry-meta,
.blog .entry-meta a,
.home .author-name,
.home .published,
.home .entry-meta,
.home .entry-meta a {
    color: #A1A4BA !important;
    font-weight: normal;
}




/* 메인에서 카테고리와 제목 사이 간격 줄이기 */
.blog .post-category,
.home .post-category {
    margin-bottom: 0px;
    color: #777 !important;
    font-weight: normal;
}

/* 메인에서 날짜 위치 간격 조정 */
.blog .posted-on,
.home .posted-on {
    margin-top: 0;
    font-size: 0.875rem;
    color: #777 !important;
    font-weight: normal;
}



/* ============================
   🔷 카테고리 리스트 페이지 스타일
   ============================ */


/* ✅ 카테고리 전체 여백 확보 (헤더랑 안 겹치게) */
body.category .custom-category-container {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 👉 3열로 배열 */
    gap: 40px; /* 리스트간격 */
}

@media screen and (max-width: 1024px) {
    .custom-category-container {
        grid-template-columns: repeat(2, 1fr) !important; /* 태블릿에서는 2열 */
    }
}

@media screen and (max-width: 768px) {
  .custom-category-container {
    grid-template-columns: 1fr !important;  /* 강제 적용 */
  }
}








/* ✅ ast-container 안에서 수직 정렬 강제 */
body.category .ast-container {
    display: block !important;
}

/* ✅ 타이틀 */
.custom-category-header {
    padding: 50px 30px 10px;
    font-weight: bold;
    font-size: 2rem !important;
    text-align: center;
}

.custom-category-header h1 {
    font-size: 2rem !important;
    color: #353849;
    margin-bottom: 10px;
}

.custom-category-description {
    font-size: 0.9375rem;
    color: #A1A4BA;
    max-width: 800px;
    margin: 0 auto 50px;
    line-height: 1.6;
    font-weight: normal;
}




/* ✅ 카테고리 카드 스타일: 카드형 */
body.category .category-post {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ✅ 썸네일 위쪽 */
body.category .post-thumb {
  width: 100%;
  aspect-ratio: 4 / 2.5; 
  overflow: hidden;
  border-radius: 8px;
}

body.category .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* ✅ 텍스트 아래쪽 */
body.category .post-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ✅ 제목: 2줄까지 표시 */
body.category .post-info h2 a {
  color: #353849;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.5rem !important;
  line-height: 1.5;
}

/* ✅ 날짜 */
body.category .post-info .meta {
  color: #A1A4BA;
  font-size: 0.875rem;
}

/* ✅ 모바일 */

@media screen and (max-width: 768px) {
  body.category .post-info h2 a {
    font-size: 1.125rem !important;
    line-height: 1.3!important;
    letter-spacing: -0.2px;
  }

  body.category .post-thumb {
    aspect-ratio: 16 / 9;
  }
}

  body.category .post-info .meta {
   color: #A1A4BA;
   font-size: 0.8125rem;
   margin-bottom: 5px;
    }



/* 모바일에서 헤더가 콘텐츠를 덮는 문제 보정 */
:root {
    --ast-mobile-header-height: 10px;
}
/* 필요시 60~90px로 조정 */

@media (max-width: 921px) {
    /* 헤더가 fixed일 때: 페이지 상단에 여백 추가 */
    body.ast-header-break-point #page {
        padding-top: var(--ast-mobile-header-height);
    }
}

/* (선택) 관리자바가 보일 때 보정: 워드프레스 로그인 상태 */
@media (max-width: 782px) {
    body.admin-bar.ast-header-break-point #page {
        padding-top: calc(var(--ast-mobile-header-height) + 5px);
    }
}

/* ============================
   🔷 로고 움직임 금지
   ============================ */






    /* transform/transition은 필요한 속성만 허용 (배경색 전환 등) */
    #masthead,
    #masthead .site-branding {
        transform: none !important;
        transition-property: background-color, color, border-color, opacity;
        transition-duration: .3s; /* 필요 시 */
    }

/* ============================
   🔷 애니메이션(순차 내려오기) + 프레스 합성
   ============================ */

/* 움직임 최소화 사용자는 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
    .custom-post-list > .custom-post-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* 기본 상태: 살짝 위에서 시작 + scale 변수 합성 */
.custom-post-list > .custom-post-card {
    opacity: 0;
    transform: translateY(-32px) scale(var(--press, 1));
    content-visibility: auto;
    contain: layout paint style;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    transition-property: transform, opacity;
    transition-duration: .45s, .45s;
    transition-timing-function: ease-out, ease-out;
    transition-delay: calc(var(--stagger, 0) * 80ms), 0s; /* ← 카드별 지연 */
}

    /* 보일 때(로드/스크롤 공통) */
    .custom-post-list > .custom-post-card.is-visible {
        opacity: 1;
        transform: translateY(0) scale(var(--press, 1));
    }

/* hover는 뜨지 않게(프레스와 충돌 방지) */
@media (hover:hover) {
    .custom-post-list > .custom-post-card.is-visible:hover {
        transform: translateY(0) scale(var(--press, 1));
        box-shadow: 0 8px 20px rgba(0,0,0,.10);
    }
}

/* will-change는 애니 중에만 */
.custom-post-card.animating {
    will-change: transform, opacity;
}

/* 포커스/모바일 탭 하이라이트 */
.custom-post-list > .custom-post-card:focus-visible {
    outline: 2px solid #7c4dff;
    outline-offset: 3px;
}

.custom-post-list > .custom-post-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

    /* 프레스 상태: 눌릴 때만 크기 줄이기(지연값은 보존) */
    .custom-post-list > .custom-post-card.pressed {
        --press: 0.90; /* 줄어드는 정도 */
        transition-duration: .25s, .25s; /* 요청: 0.25초로 부드럽게 */
        box-shadow: 0 6px 12px rgba(0,0,0,.12);
    }




/* ============================
   🔷 메인 페이지 (글 목록) 스타일 프론트페이지사용할때
   ============================ */

/* ✅ 메인 리스트: 그리드 3열 */
.custom-post-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 768px) {
  .custom-post-list {
    grid-template-columns: 1fr;
    gap: 20px; 
  }
}

/* ✅ 카드형 레이아웃 */
.custom-post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (max-width: 768px) {
  .custom-post-card:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
}

/* ✅ 썸네일 상단 (절반) */
.custom-post-card .post-thumb {
  width: 100%;
  aspect-ratio: 4 / 2.5;
  overflow: hidden;
  padding: 0;
}

.custom-post-card .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ✅ 텍스트 영역 하단 (회색 배경 + 패딩) */
.custom-post-card .post-info {
  background-color: #fff;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ✅ 제목 */
.custom-post-card h2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-post-card h2 a {
  color: #353849;
  text-decoration: none;
  transition: color 0.3s ease;
}

.custom-post-card h2 a:hover {
  color: #5b6aff;
}

/* ✅ 날짜 */
.custom-post-card .meta {
  color: #A1A4BA;
  font-size: 0.9375rem;
  margin: 0;
}

/* ✅ 요약글 */
.custom-post-card .excerpt {
  color: #585B72;
  font-size: 1.0625rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✅ 반응형 태블릿: 2열 */
@media (max-width: 1024px) {
  .custom-post-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ✅ 반응형 모바일: 1열 + 크기 조정 */
@media (max-width: 768px) {
  .custom-post-list {
    grid-template-columns: 1fr;
  }

  .custom-post-card h2 {
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -0.2px;
  }

  .custom-post-card .excerpt {
    font-size: 0.9375rem;
    margin: 0;
  }

  .custom-post-card .meta {
    font-size: 0.8125rem;
    margin-bottom: 5px;
  }
}




.featured-post-card {
  grid-column: span 3; /* 전체 너비 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border: 2px solid #eee;
}

.featured-post-card .post-info {
  padding: 30px;
  background-color: #f9f9fc;
}





/* ============================
   🔷 본문 (단일 글) 페이지 스타일
   ============================ */

.entry-header {
    padding: 30px !important;
    border: 0px solid orange;
}




    /* 카테고리와 제목 사이 간격 줄이기 */
    .entry-header .ast-cat-links,
    .entry-header .post-category {
        margin-bottom: 8px !important;
    }

    /* 제목 아래 간격 줄이기 (날짜와 간격) */
    .entry-header .entry-title {
        margin-bottom: 8px !important;
    }

    /* 날짜 위쪽 간격 줄이기 */
    .entry-header .posted-on,
    .entry-header .post-date {
        margin-top: 0px !important;
    }

    body.single-post .ast-container {
    display: block !important;
}





/* 본문 대표 이미지 스타일 */
.single-post .post-thumbnail-full {
    
    margin-top: 0px !important;
    max-height: 400px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    max-width: 900px;
    margin: 0 auto 30px auto;
}

/* 본문 카테고리 (제목 위) */
.post-category {
    font-size: 0.9375rem;
    color: #0073aa;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: -10px;
    border: 0px solid red;
    font-weight: normal;
}

/* 본문 글 제목 */
.entry-title {
    text-align: center;
    font-size: 2rem !important;
    line-height: 150% !important;
    font-weight: 700 !important;
    color: #353849;
    margin-bottom: 10px;
    border: 0px solid green;
}



/* 본문 날짜 스타일 (제목 아래) */
.post-date {
    font-size: 0.9375rem;
    color: #A1A4BA;
    text-align: center;
    margin: 0px;
    border: 0px solid blue;
    font-weight: normal;
}

/* 본문 본문(내용) 영역 스타일 */
.single-post .entry-content {
    font-size: 1.0625rem;
    line-height: 180%;
    color: #353849;
    font-weight: none;
    max-width: 900px !important;
    margin: 30px auto 0 auto;
    padding: 0px;
    max-width: 900px;
}

/* 본문 내 이미지 스타일 */
.single-post .entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    
}

/* 본문 하단 라인 */
.post-divider {
  border: none;                       /* 기본 테두리 제거 */
  height: 1px;                        /* 1픽셀 높이로 명시 */
  background-color: #e4e4e4;            /* 연한 회색 */
  margin: 100px 0px 0px 0px;                     /* 여백 */

}



/* ============================
   🔷 댓글 스타일
   ============================ */

/* 댓글 영역 너비 조정 */
.comments-area,
.ast-comment-area,
#comments {
    max-width: 910px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    box-sizing: border-box;

}

#comment {
    height: 70px; /* 원하는 세로 높이 설정 */
    
}


.form-submit {
    text-align: center;
}


/* 전체 행 정렬: 라벨 왼쪽, 입력 오른쪽 */
.custom-comment-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* 라벨 스타일 */
.custom-comment-row label {
  width: 80px; /* 라벨 폭 고정 */
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* 입력창 스타일 */
.custom-comment-row input {
  flex: 1;
  padding: 10px 14px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}




/* ============================
   🔷 좋아요 공유하기
   ============================ */
.like-share-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 30px 0;
  flex-wrap: nowrap; 
}

.like-button {
  padding: 8px 14px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1rem;
  transition: 0.2s;
  color: #333;
}

.like-button.liked {
  background-color: #ffecec;
  border-color: #ff9999;
  color: #d33;
}

.like-button:hover {
  color: #d33 !important;
  background-color: #ffecec !important;
  border-color: #ff9999 !important;
}


/* 공유 버튼 디자인을 좋아요 버튼과 동일하게 */
.share-button {
    padding: 8px 14px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
    line-height: 1.2;
}


.share-button:hover {
  color: #333 !important;
  background-color: #fff !important;
  border-color: #ddd !important;
}


/* 공유 아이콘 사이즈 맞춤 */
.share-icon {
  width: 18px;
  height: 18px;
  margin-top: -1px;
}




/* ✅ 모바일에서도 가로 정렬 유지 */
@media (max-width: 768px) {
  .like-share-row {
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
  }

  .like-button-wrap,
  .share-button-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }

  .share-button-wrapper {
    justify-content: flex-end;
  }
}






/* ============================
   🔷 조회수 스타일
   ============================ */


/* 조회수 */
.post-views {
    font-size: 0.9375rem; /* 15px */
    color: #fff; /* 검은색 */
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    text-align: center;
}

.post-views-number {
    color: #fff;; /* 숫자만 빨간색 */
    font-weight: bold;
}





#ast-scroll-top .ast-icon {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}










/* ============================
   🔷 페이지네이션
   ============================ */
   /* ✅ 페이지네이션 컨테이너 정렬 (모든 위치에서 공통) */
.ast-pagination .nav-links,
body.blog .navigation.pagination .nav-links,
body.home .navigation.pagination .nav-links,
.navigation.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;           /* 줄바꿈 방지 */
  margin: 40px 0;
}

/* ✅ 페이지 번호 공통 버튼 (숫자 / 다음 / 이전) */
.ast-pagination .page-numbers,
body.blog .page-numbers,
body.home .page-numbers,
.navigation.pagination .page-numbers {
  display: inline-flex;        /* 텍스트 수직 정렬 */
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  height: 40px;
  font-size: 14px;
  line-height: 1;
  background-color: #EAEBEE;
  color: #353849;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

/* ✅ 현재 페이지 강조 */
.ast-pagination .page-numbers.current,
body.blog .page-numbers.current,
body.home .page-numbers.current,
.navigation.pagination .page-numbers.current {
  background-color: #353849;
  color: #fff;
  font-weight: bold;
}

/* ✅ 호버 효과 */
.ast-pagination .page-numbers:hover,
body.blog .page-numbers:hover,
body.home .page-numbers:hover,
.navigation.pagination .page-numbers:hover {
  background-color: #A1A4BA;
  color: white;
}

/* ✅ 다음 화살표 정렬 */
.page-numbers .ast-right-arrow {
  margin-left: 6px;
  position: relative;
  top: 0;
  font-size: 16px;
}


/* ✅ 모바일에서 페이지네이션 버튼 크기 자동 확장 방지 */
@media (max-width: 768px) {
  .ast-pagination .nav-links,
  body.blog .navigation.pagination .nav-links,
  body.home .navigation.pagination .nav-links,
  .navigation.pagination .nav-links {
    flex-wrap: wrap;             /* 모바일에선 줄바꿈 허용 */
  }

  .ast-pagination .page-numbers,
  body.blog .page-numbers,
  body.home .page-numbers,
  .navigation.pagination .page-numbers {
    flex: 0 0 auto;              /* 👉 버튼이 자동으로 늘어나지 않게 고정 */
    width: auto !important;     /* 👉 100% 되는 현상 강제 해제 */
    min-width: 40px;            /* ✅ 너무 작아지지 않게 최소값 */
  }
}


/* ✅ 게시물 없을 때 문구 */
.no-posts-message {
    text-align: center;
    padding: 100px 20px;
    font-size: 1.125rem;
    color: #A1A4BA;
}

/* ✅ 페이지네이션 정렬 */
.custom-pagination {
    margin: 60px 0 40px;
    display: flex;
    justify-content: center;
}





/* ============================
   🔷 푸터 스타일
   ============================ */

/* 푸터 */

.custom-footer {
    background-color: #EAEBEE !important;
    padding: 40px 20px !important;
    text-align: center !important;
    font-size: 0.9375rem !important;
    color: #585B72 !important;
}

.footer-container {
    max-width: 1100px;
    margin: auto;
}

.footer-logo img {
    width: 150px;
    margin-bottom: 20px;
}

.footer-info p {
    margin: 5px 0;
    color: #585B72;
}

.footer-links {
    margin-top: 20px;
}

    .footer-links a {
        color: #585B72;
        text-decoration: none;
        margin: 0 10px;
    }

        .footer-links a:hover {
            text-decoration: underline;
        }

.footer-social {
    margin-top: 30px;
}

    .footer-social a {
        display: inline-block;
        margin: 0 10px;
    }

    .footer-social img {
        width: 30px;
        height: 30px;
        transition: 0.3s;
    }

        .footer-social img:hover {
            opacity: 0.7;
        }