/*
 Theme Name:   Astra Child
 Theme URI:    https://layer-hub.com
 Description:  Layer Hub 차일드 테마 — Astra 기반
 Author:       Layer Hub
 Author URI:   https://layer-hub.com
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* =============================================
   CSS 변수 정의
   핵심: 여기 값만 바꾸면 사이트 전체 색상/폰트 반영
   ============================================= */
:root {
  --color-primary:    #0d0d1a;   /* 딥 네이비 — 헤더/푸터 배경 */
  --color-accent:     #5cc8e8;   /* 시안 — 포인트 컬러 */
  --color-accent2:    #b06ce8;   /* 퍼플 — 보조 포인트 */
  --color-bg:         #f9f8f5;   /* 페이지 배경 */
  --color-bg2:        #ffffff;   /* 카드/섹션 배경 */
  --color-text:       #1a1a1a;   /* 본문 텍스트 */
  --color-muted:      #888888;   /* 보조 텍스트 */
  --color-border:     #e8e4dc;   /* 구분선 */
  --font-main:        'Apple SD Gothic Neo','Noto Sans KR','Helvetica Neue',sans-serif;
  --font-en:          'Helvetica Neue','SF Pro Display',Arial,sans-serif;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        14px;
  --max-width:        1200px;
  --header-height:    64px;
}

/* =============================================
   기본 리셋
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.8;
  font-size: 15px;
}

/* =============================================
   헤더 — 딥 네이비 배경
   수정 시: --color-primary 변수값만 변경
   ============================================= */
.site-header,
#masthead,
.ast-masthead-custom-menu,
.main-header-bar {
  background: var(--color-primary) !important;
  border-bottom: none !important;
  height: var(--header-height);
}

/* 헤더 로고 영역 */
.site-branding,
.ast-site-identity {
  display: flex;
  align-items: center;
}

/* =============================================
   탑바 네비게이션
   수정 시: 폰트/색상 변수 조정
   ============================================= */
.main-header-bar .main-navigation a,
.ast-nav-menu > li > a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px;
  padding: 0 16px !important;
  line-height: var(--header-height) !important;
  transition: color 0.2s ease;
}

.main-header-bar .main-navigation a:hover,
.ast-nav-menu > li > a:hover {
  color: var(--color-accent) !important;
}

/* 드롭다운 메뉴 */
.ast-nav-menu .sub-menu {
  background: var(--color-primary) !important;
  border: 1px solid rgba(92, 200, 232, 0.15) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  min-width: 180px;
}

.ast-nav-menu .sub-menu li a {
  color: rgba(255,255,255,0.8) !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.ast-nav-menu .sub-menu li a:hover {
  color: var(--color-accent) !important;
  background: rgba(92,200,232,0.08) !important;
}

/* =============================================
   포스트 카드 레이아웃
   수정 시: --radius-md, --color-border 조정
   ============================================= */
.ast-article-post,
.post-thumb-img-content,
article.post {
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ast-article-post:hover,
article.post:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* 포스트 제목 */
.entry-title a {
  color: var(--color-text) !important;
  font-weight: 600;
  line-height: 1.4;
}

.entry-title a:hover {
  color: var(--color-accent) !important;
}

/* =============================================
   사이드바
   수정 시: 사이드바 너비는 Astra 설정에서 조정
   ============================================= */
#secondary,
.widget-area {
  background: var(--color-bg2);
  border-radius: var(--radius-md);
  padding: 20px;
}

.widget-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* =============================================
   푸터
   수정 시: --color-primary 변수값만 변경
   ============================================= */
.site-footer,
#colophon {
  background: var(--color-primary) !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 13px;
  padding: 32px 0;
}

.site-footer a {
  color: var(--color-accent) !important;
}

.site-footer a:hover {
  color: #ffffff !important;
}

/* =============================================
   반응형 — 모바일 (768px 이하)
   수정 시: 이 블록만 편집
   ============================================= */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
  }

  /* 모바일 사이드바 숨김 */
  #secondary,
  .widget-area {
    display: none;
  }

  /* 모바일 카드 패딩 축소 */
  .ast-article-post,
  article.post {
    margin-bottom: 16px;
  }
}

/* =============================================
   홈 페이지 전체 너비 레이아웃
   히어로 섹션이 사이드바 없이 풀 너비로 표시
   ============================================= */
.home .ast-right-sidebar,
.home .ast-left-sidebar,
.home #secondary {
    display: none !important;
}

.home #primary {
    width: 100% !important;
    float: none !important;
}

.home .ast-container > .ast-row {
    display: block !important;
}

/* 홈 페이지 완전 풀너비 오버라이드 */
.home .site-content,
.home .ast-container,
.home #content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.home .lh-hero {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}