/*
Theme Name: Lotus Mindcare
Theme URI: https://lotusmindcare.kr
Description: 로터스마인드케어 전용 자식테마 — Apple 스타일의 미니멀·프리미엄 감성에 차분한 마음챙김 톤(세이지/연꽃)을 더한 디자인 시스템. Kadence 기반.
Author: Lotus Mindcare
Template: kadence
Version: 1.0.0
Text Domain: lotus-child
*/

/* ============================================================
   1. 디자인 토큰 (Design Tokens)
   ============================================================ */
:root {
  /* 배경 */
  --bg-primary: #FBFBFD;
  --bg-secondary: #F3F6F4;
  --bg-card: #FFFFFF;

  /* 텍스트 */
  --text-primary: #1D1D1F;
  --text-muted: #6E6E73;

  /* 브랜드 — 차분한 세이지·연꽃 */
  --accent: #4A9782;        /* 세이지 그린 */
  --accent-hover: #3E8271;
  --accent-soft: #E8F1ED;
  --lotus: #C98BB9;         /* 연꽃 포인트 */

  /* 경계/그림자 */
  --border: #E3E6E4;
  --shadow-soft: 0 4px 24px rgba(29, 41, 37, 0.06);
  --shadow-hover: 0 12px 40px rgba(29, 41, 37, 0.12);

  /* 상태 */
  --success: #34C759;
  --danger: #FF3B30;

  /* 라운드 */
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

/* ============================================================
   2. 기본 타이포·바탕
   ============================================================ */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* 본문 가독성 (플레이북 모바일 UX 기준) */
.entry-content { font-size: 1.0625rem; line-height: 1.85; }
.entry-content p { margin-bottom: 1.4em; }

/* ============================================================
   3. 버튼 / CTA
   ============================================================ */
.button, .wp-block-button__link, button.kb-button, .kt-btn {
  background-color: var(--accent);
  border-radius: 980px;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  min-height: 48px;
  font-weight: 600;
}
.button:hover, .wp-block-button__link:hover, .kt-btn:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

/* ============================================================
   4. 카드 (글 목록 / 허브 카드)
   ============================================================ */
.entry.loop-entry, .kb-content-block, .post-list-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.entry.loop-entry:hover, .post-list-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* ============================================================
   5. 접근성 (플레이북 STEP 2-3)
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   6. 히어로 / 섹션 여백
   ============================================================ */
.lotus-hero {
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--bg-primary) 60%);
  padding: 96px 24px;
  text-align: center;
  border-radius: 0 0 32px 32px;
}
.lotus-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: .5em; }
.lotus-hero p { font-size: 1.25rem; color: var(--text-muted); max-width: 620px; margin: 0 auto 1.6em; }

@media (min-width: 1024px) {
  .content-container.site-container { padding-top: 48px; }
}

/* ============================================================
   7. 포털 홈 — 기둥 카드 / 히어로 / 최신글 그리드
   ============================================================ */
/* 대문에서 중복되는 페이지 제목 숨김 (히어로가 대체) */
.home .entry-hero.page-hero-section,
.home header.entry-header,
.home .entry-title { display: none; }

.lotus-hero-cover { border-radius: 0 0 32px 32px; overflow: hidden; }

/* 4개 기둥 카드 */
.lotus-pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 26px 22px;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lotus-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
}
.lotus-pillar-card h3 { margin: 0 0 .4em; }
.lotus-pillar-card h3 a { color: var(--text-primary); text-decoration: none; }
.lotus-pillar-card:hover h3 a { color: var(--accent); }
.lotus-pillar-card p { margin: 0; font-size: .95rem; }

/* 최신글 그리드 카드 느낌 */
.wp-block-query .wp-block-post-template.is-layout-grid { gap: 2rem; }
.wp-block-query li .wp-block-post-featured-image img { box-shadow: var(--shadow-soft); }
.wp-block-query .wp-block-post-title { margin-top: .7em; line-height: 1.4; }
.wp-block-query .wp-block-post-title a { color: var(--text-primary); text-decoration: none; }
.wp-block-query .wp-block-post-title a:hover { color: var(--accent); }
.wp-block-query .wp-block-post-excerpt { color: var(--text-muted); font-size: .92rem; line-height: 1.7; }

@media (max-width: 767px) {
  .lotus-hero-cover { border-radius: 0 0 20px 20px; }
  .lotus-pillars .wp-block-column { margin-bottom: 1rem; }
}

/* 다크모드 대비 — 이미지/카드 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #000000;
    --bg-secondary: #1D1D1F;
    --bg-card: #1C1C1E;
    --text-primary: #F5F5F7;
    --text-muted: #86868B;
    --accent: #5FB8A0;
    --border: #2C2C2E;
  }
}