/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Calvraen 명상 브랜드용 Astra 자식 테마 — 차분한 어스톤 디자인 + 도움 페이지 자동 생성. 이 폴더를 zip으로 압축해 원본 wp-content/themes/ 에 업로드 후 활성화하세요.
Author: site
Template: astra
Version: 2.0.0
Text Domain: astra-child
*/

/* =========================================================================
   1. 브랜드 토큰 — 차분한 어스톤(웜 아이보리 · 세이지 그린 · 테라코타)
      색상 6개만 바꾸면 사이트 전체 톤이 함께 움직입니다.
   ========================================================================= */
:root {
  --bg:        #f5f1ea;   /* 페이지 배경 — 웜 아이보리 */
  --surface:   #ffffff;   /* 카드/본문 표면 */
  --ink:       #2c2a26;   /* 본문 텍스트 — 웜 차콜 */
  --muted:     #847d72;   /* 보조 텍스트 */
  --line:      #e6dfd3;   /* 구분선/테두리 */
  --sage:      #6f7d63;   /* 메인 — 세이지 그린 */
  --sage-d:    #586a4b;
  --clay:      #b9764f;   /* 포인트 — 테라코타 */
  --clay-d:    #a4623d;
  --radius:    14px;
  --shadow:    0 18px 48px -24px rgba(44,42,38,.35);
  --container: 1140px;
  --measure:   720px;     /* 읽기 좋은 본문 폭 */

  /* Astra 변수도 함께 덮어써 톤 통일 */
  --ast-global-color-0: var(--sage);
  --ast-global-color-1: var(--sage-d);
  --ast-global-color-2: var(--ink);
  --ast-global-color-3: var(--ink);
  --ast-global-color-4: var(--bg);
}

/* =========================================================================
   2. 전체 톤 / 타이포그래피
   ========================================================================= */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.85;
  letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .ast-archive-entry-title, .site-title {
  font-family: "Nanum Myeongjo", "Noto Serif KR", serif;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}
a { color: var(--sage-d); transition: color .25s ease; }
a:hover { color: var(--clay); }

.ast-container { max-width: var(--container); }
/* 콘텐츠 영역은 배경 비워 아이보리가 비치게 */
#content, .site-content, #primary { background: transparent; }
.entry-content > * + * { margin-top: 1.25em; }

::selection { background: rgba(111,125,99,.22); }

/* 박스 레이아웃 해제 → 헤더/배경/푸터 색상 전체폭 (내용은 .ast-container로 가운데 정렬 유지) */
.ast-box-layout #page,
body.ast-box-layout #page,
.ast-padded-layout #page {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================================
   3. 헤더 — 가볍고 단정하게
   ========================================================================= */
.site-header, .main-header-bar {
  background: rgba(245,241,234,.85);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line);
}
.main-header-bar { padding-top: 10px; padding-bottom: 10px; }
.site-title a {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.site-description { color: var(--muted); font-style: italic; }

.main-header-menu .menu-item > a {
  position: relative;
  font-weight: 600;
  font-family: "Pretendard", sans-serif;
  color: var(--ink);
}
.main-header-menu .menu-item > a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 8px;
  height: 1.5px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.main-header-menu .menu-item > a:hover::after,
.main-header-menu .current-menu-item > a::after { transform: scaleX(1); }

/* =========================================================================
   4. 첫 히어로 — 비대칭 에디토리얼 + 젠 물결(orb) 모티프
      (functions.php가 홈 상단에 삽입)
   ========================================================================= */
.ac-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding: 124px 24px 112px;
}
/* 오른쪽 동심원 물결 — 호흡/명상 모티프 */
.ac-hero__orb {
  position: absolute;
  right: -180px; top: -80px;
  width: 660px; height: 660px;
  pointer-events: none;
  background: repeating-radial-gradient(circle at center,
              rgba(111,125,99,.16) 0 1.5px, transparent 1.5px 30px);
  -webkit-mask-image: radial-gradient(circle at center, #000 58%, transparent 72%);
          mask-image: radial-gradient(circle at center, #000 58%, transparent 72%);
}
/* 작은 보조 원(테라코타) */
.ac-hero__orb::after {
  content: "";
  position: absolute; right: 230px; top: 250px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(185,118,79,.20), rgba(185,118,79,0) 70%);
}
.ac-hero__inner { position: relative; max-width: var(--container); margin: 0 auto; }
.ac-hero__index {
  display: flex; align-items: center; gap: 12px;
  font-family: "Pretendard", sans-serif;
  font-size: .82rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 28px;
}
.ac-hero__index::before { content: ""; width: 38px; height: 1px; background: var(--clay); }
.ac-hero__title {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 16ch;
}
.ac-hero__title em { font-style: normal; color: var(--sage); }
.ac-hero__lead {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  color: var(--muted);
  max-width: 44ch;
  line-height: 1.95;
  margin: 0 0 42px;
}
.ac-hero__actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

/* 텍스트형 링크 버튼 (큰 버튼 두 개의 진부함 탈피) */
.ac-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Pretendard", sans-serif; font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 5px;
  transition: color .25s ease, border-color .25s ease;
}
.ac-link span { transition: transform .25s ease; }
.ac-link:hover { color: var(--sage); border-color: var(--sage); }
.ac-link:hover span { transform: translateX(6px); }
.ac-link--soft { border-color: transparent; color: var(--muted); }
.ac-link--soft:hover { color: var(--clay); border-color: transparent; }

/* =========================================================================
   5. 버튼 (일반)
   ========================================================================= */
.ast-button, .button, button, input[type="submit"],
.wp-block-button__link, .ac-btn {
  background: var(--sage);
  color: #fff !important;
  border: 0;
  border-radius: 999px !important;
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  padding: 13px 30px;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}
.ast-button:hover, .button:hover, .wp-block-button__link:hover,
input[type="submit"]:hover, .ac-btn:hover {
  background: var(--sage-d);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* =========================================================================
   6. 블로그 / 아카이브 카드
   ========================================================================= */
/* Astra 기본 1열 그리드를 2열 카드로 강제 (동적 CSS보다 우선) */
.blog .site-main .ast-row,
.archive .site-main .ast-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px !important;
  margin: 0 !important;
}
.blog .ast-article-post,
.archive .ast-article-post {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(44,42,38,.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog .ast-article-post:hover,
.archive .ast-article-post:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
/* layout-5는 기본 좌우분할(이미지25%/글75%) → 카드용으로 이미지 상단 풀폭 스택 */
.blog .blog-layout-5,
.archive .blog-layout-5 { display: block !important; }
.blog .ast-article-inner,
.archive .ast-article-inner { padding: 0 !important; }
/* 이미지: 풀폭 상단, 여백 0 */
.blog .blog-layout-5 .ast-blog-featured-section,
.archive .blog-layout-5 .ast-blog-featured-section {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.blog .ast-blog-featured-section a,
.archive .ast-blog-featured-section a { display: block; }
/* 텍스트 영역: 풀폭 + 카드 내부 여백 (Astra의 width:75%/padding 무력화) */
.blog .blog-layout-5 .post-content,
.archive .blog-layout-5 .post-content {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: 28px 30px 30px !important;
}
/* 카드 내부 요소 좌우 마진 제거(들쭉날쭉 방지) */
.blog .blog-layout-5 .post-content > *,
.archive .blog-layout-5 .post-content > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* 카테고리 라벨 간격 */
.blog .blog-layout-5 .cat-links,
.archive .blog-layout-5 .cat-links {
  display: block;
  margin: 0 0 10px !important;
  font-size: .78rem; letter-spacing: .04em;
}
.blog .blog-layout-5 .cat-links a,
.archive .blog-layout-5 .cat-links a { color: var(--clay); }
.blog .ast-article-post .post-thumb-img-content img,
.blog .ast-blog-featured-section img,
.archive .ast-article-post .post-thumb-img-content img,
.archive .ast-blog-featured-section img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}
.blog .entry-title, .archive .entry-title { font-size: 1.4rem; line-height: 1.4; margin: 0 0 10px; }
.blog .entry-title a, .archive .entry-title a { color: var(--ink); }
.blog .entry-title a:hover, .archive .entry-title a:hover { color: var(--sage); }
/* 메타(날짜 등) 여백 */
.blog .entry-meta, .archive .entry-meta,
.blog .ast-blog-meta-container, .archive .ast-blog-meta-container {
  color: var(--muted); font-size: .85rem; margin: 0 0 14px;
}
/* 발췌 여백 + 톤 */
.blog .ast-excerpt-container, .archive .ast-excerpt-container {
  color: var(--muted); margin: 0 0 20px; line-height: 1.8;
}

/* '더 읽기' 버튼 (카드 하단) */
.ac-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sage);
  color: #fff !important;
  font-weight: 600;
  font-size: .92rem;
  padding: 10px 22px;
  border-radius: 999px;
  transition: background .25s ease, transform .15s ease, box-shadow .25s ease;
}
.ac-readmore span { transition: transform .25s ease; }
.ac-readmore:hover {
  background: var(--sage-d);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.ac-readmore:hover span { transform: translateX(4px); }

@media (max-width: 768px){
  .blog .site-main .ast-row,
  .archive .site-main .ast-row { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   7. 단일 글 / 페이지 — 차분한 읽기 카드
   ========================================================================= */
.single .ast-article-single,
.page .ast-article-single {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 64px);
  box-shadow: 0 1px 2px rgba(44,42,38,.04);
}
.single .entry-content, .page .entry-content { max-width: var(--measure); }
.single .entry-title { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: .4em; }
.single .entry-content, .single .entry-content p { line-height: 2; }
blockquote {
  border-left: 3px solid var(--sage);
  background: rgba(111,125,99,.06);
  padding: 18px 24px; border-radius: 6px;
  font-style: italic; color: var(--ink);
}

/* =========================================================================
   7-b. 블로그 페이지 [ac_all_posts] — 전체 글 풀콘텐츠 목록형
   ========================================================================= */
.ac-bloglist { display: block; }
.ac-fullpost {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 52px);
  margin-bottom: 36px;
  box-shadow: 0 1px 2px rgba(44,42,38,.04);
}
.ac-fullpost__title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 0 0 12px;
}
.ac-fullpost__title a { color: var(--ink); text-decoration: none !important; border-bottom: 0; }
.ac-fullpost__title a:hover { color: var(--sage); text-decoration: none !important; }
.ac-fullpost__meta {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.ac-fullpost__meta a { color: var(--clay); }
.ac-fullpost__content { line-height: 2; }
.ac-fullpost__content > * + * { margin-top: 1.2em; }
.ac-fullpost__content img { max-width: 100%; height: auto; border-radius: 8px; }

/* =========================================================================
   8. 사이드바 / 위젯
   ========================================================================= */
.widget {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 26px;
}
.widget-title {
  font-family: "Nanum Myeongjo", serif;
  font-size: 1.1rem; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.widget-title::before { content: "◦ "; color: var(--clay); }

/* 사이드바 스티키 — 스크롤 시 위젯이 따라옴 */
@media (min-width: 922px){
  #secondary, .widget-area .ast-sidebar {
    position: sticky;
    top: 100px;
    align-self: flex-start;
  }
}

/* =========================================================================
   9. 푸터 — 깊은 올리브 톤으로 마무리
   ========================================================================= */
.ac-footer {
  background: #2a2d24;
  color: #c9ccbf;
  padding: 64px 24px 48px;
}
.ac-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  max-width: var(--container);
  margin: 0 auto;
}
.ac-footer h3 {
  font-family: "Nanum Myeongjo", serif;
  color: #fff; font-size: 1.5rem; margin: 0 0 14px;
}
.ac-footer h4 { color: #fff; font-size: 1rem; margin: 0 0 16px; font-family: "Pretendard", sans-serif; }
.ac-footer p { color: #9ba292; margin: 0; font-size: .95rem; line-height: 1.85; }
.ac-footer ul { list-style: none; margin: 0; padding: 0; }
.ac-footer li { margin-bottom: 11px; }
.ac-footer a { color: #c9ccbf; font-size: .95rem; }
.ac-footer a:hover { color: #fff; }
.ac-footer .ac-btn { background: var(--clay); margin-top: 10px; }
.ac-footer .ac-btn:hover { background: var(--clay-d); }

/* Astra 기본 푸터바(카피라이트) 톤 맞춤 */
.site-footer, .ast-small-footer, .footer-sml-layout, .ast-footer-copyright {
  background: #21241c;
  color: #8f968360;
}
.ast-small-footer, .ast-footer-copyright { color: #9ba292 !important; }
.ast-small-footer a { color: #c9ccbf; }

/* =========================================================================
   10. 반응형
   ========================================================================= */
@media (max-width: 880px){
  .ac-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 768px){
  .ac-hero { padding: 84px 20px 76px; }
  .ac-hero__orb { right: -260px; top: -120px; opacity: .6; }
}
@media (max-width: 520px){
  .ac-footer__grid { grid-template-columns: 1fr; }
  .ac-hero__actions { gap: 20px; }
}