/*
 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-header-bg:  #d7f0f8;   /* 신규: 연한 하늘색 — 탑바 전용 */
  --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;
}

/* 헤더 로고 영역 */
.site-branding,
.ast-site-identity {
  display: flex;
  align-items: center;
}
.ast-site-identity .custom-logo,
.site-logo-img img {
    height: 48px !important;
    width: auto !important;
}
.ast-site-title,
.site-title a {
    font-size: 20px !important;
    line-height: 32px !important;   /* 로고 높이와 동일하게 */
    font-weight: 700 !important;
    color: #111418 !important;
}

/* =============================================
   탑바 네비게이션
   수정 시: 폰트/색상 변수 조정
   ============================================= */
.main-header-bar .main-navigation a,
.ast-nav-menu > li > a {
  color: #111418 !important;   /* #ffffff → #111418 */
  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: #ffffff !important;   /* var(--color-primary) → #ffffff */
  border: 1px solid var(--color-border) !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: var(--color-text) !important;   /* rgba(255,255,255,0.8) → var(--color-text) */
  font-size: 13px !important;
  padding: 10px 18px !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid var(--color-border) !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;
  }
}