/* =========================================================
   정보 블로그 — 에디토리얼 프리미엄 디자인 레이어
   원칙: Pretendard · 절제된 단일 액센트 · 여백 리듬 · 정교한 카드 · 은은한 모션
   ========================================================= */

:root {
  --ink:        #1b1b20;
  --ink-soft:   #565660;
  --ink-faint:  #8b8b95;
  --paper:      #ffffff;   /* 밝은 배경 */
  --surface:    #ffffff;
  --line:       rgba(24,24,27,.10);
  --line-strong:rgba(24,24,27,.16);
  --accent:     #e5600b;   /* 망고 액센트(밝은배경 대비) */
  --accent-ink: #be470b;
  --accent-tint:rgba(229,96,11,.08);
  --radius:     16px;
  --radius-sm:  10px;
  --ease:       cubic-bezier(.16,1,.3,1);
  --shadow-sm:  0 1px 2px rgba(24,24,27,.04), 0 4px 14px rgba(24,24,27,.05);
  --shadow-md:  0 18px 44px -20px rgba(24,24,27,.28);
  --wrap:       1120px;
}

/* 밝은 배경 + 어두운 글씨 (Kadence 팔레트 정렬) */
body {
  --global-palette1: #e5600b;
  --global-palette2: #be470b;
  --global-palette-highlight: #e5600b;
  --global-palette3: #1b1b20;
  --global-palette4: #3f3f46;
  --global-palette5: #565660;
  --global-palette6: rgba(24,24,27,.12);
  --global-palette7: #f2f2f4;
  --global-palette8: #ffffff;
  --global-palette9: #ffffff;
}
html, body { background: #ffffff !important; color: #1b1b20 !important; }
.entry-content, .entry-content p, .entry-content li, .single .entry-content { color: #26262c !important; }
.content-bg, .single .entry.content-bg, .single-content { background: #ffffff !important; }
.header-navigation .menu-item > a { color: #26262c; }
input, textarea, select { background: #ffffff !important; color: #1b1b20 !important; border-color: rgba(24,24,27,.15) !important; }
.site-footer, .site-footer-wrap, .site-top-footer-wrap, .site-bottom-footer-wrap { background: #fafafa !important; color: #565660; }
.widget a, .widget-area { color: #3f3f46; }
.widget a:hover { color: #e5600b; }

/* ---------- 타이포 & 베이스 ---------- */
body,
button, input, select, textarea,
.entry-title, .entry-content, .site-title, .content-title-style-normal .entry-title {
  font-family: "Pretendard", "Pretendard Variable", system-ui, -apple-system, sans-serif;
}

body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.003em;
}

h1, h2, h3, h4, .entry-title {
  letter-spacing: -0.02em;
  word-break: keep-all;
  line-height: 1.28;
}

a { transition: color .35s var(--ease); }

/* 본문 가독성 (단일 글) */
.single .entry-content {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #26262c;
}
.single .entry-content > * { max-width: 46rem; }
.single .entry-content h2 { margin-top: 2.4em; font-size: 1.6rem; }
.single .entry-content h3 { margin-top: 1.8em; font-size: 1.28rem; }

/* ---------- 사이트 헤더 ---------- */
.site-header-wrap .site-header-row-container-inner,
#masthead {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-branding .site-title,
.site-title a {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.header-navigation .menu-item > a { font-weight: 600; letter-spacing: -0.01em; }
.header-navigation .menu-item > a:hover { color: var(--accent); }

/* ---------- 마스트헤드 (블로그 상단 히어로 + 검색) ---------- */
.mango-masthead {
  margin: 0 auto;
  padding: clamp(3.2rem, 6vw, 5.5rem) 1.25rem clamp(2.2rem, 4vw, 3.4rem);
  max-width: var(--wrap);
  text-align: center;
}
.mango-masthead-inner { max-width: 640px; margin: 0 auto; }
.mango-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.15rem;
}
.mango-mast-title {
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 0.7rem;
  text-wrap: balance;
}
.mango-mast-sub {
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  color: var(--ink-soft);
  line-height: 1.7;
  word-break: keep-all;
  margin: 0 auto 2rem;
  max-width: 34rem;
}

/* 검색바 */
.mango-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.mango-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint), var(--shadow-sm);
}
.mango-search-ico { display: inline-flex; color: var(--ink-faint); flex: 0 0 auto; }
.mango-search input[type="search"] {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--ink);
  padding: 0.35rem 0;
  min-width: 0;
}
.mango-search input::placeholder { color: var(--ink-faint); }
.mango-search button {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.62rem 1.25rem;
  border-radius: 999px;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.mango-search button:hover { background: var(--accent-ink); transform: scale(1.03); }
.mango-search button:active { transform: scale(0.97); }

/* Kadence 기본 아카이브/검색 타이틀 숨김 (마스트헤드로 대체) */
.archive .kadence-hero-inner-wrap .entry-hero-container-inner .hero-section-title-wrap,
.blog .kadence-hero-inner-wrap,
.search-results .kadence-hero-inner-wrap,
.search-archive-title,
.archive .base-inner-title-wrap,
.archive-title { display: none; }

/* ---------- 글 목록 (loop) — 1열 가로형 리스트 ---------- */
/* 창 크기에 맞춰 한 줄에 2~3개 카드(반응형 그리드) */
.kadence-posts-list.grid-cols,
.content-wrap.kadence-posts-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 1.6rem;
}

/* 카드: 세로형(썸네일 위 + 콘텐츠 아래) — 그리드 셀에서 균일 높이 */
.content-style-boxed .entry.content-bg.loop-entry,
.loop-entry.entry {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.loop-entry.entry:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.loop-entry.entry.is-clickable { cursor: pointer; }   /* 카드 전체 클릭 */

/* 썸네일 (모바일 기준: 상단 16:9). Kadence 2:3 비율 트릭 무력화 → flow 기반 */
.loop-entry > .post-thumbnail {
  position: relative;
  display: block !important;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0 !important;
  border-radius: 0;
  overflow: hidden;
  background: #ecece8;
}
.loop-entry .post-thumbnail-inner {
  position: static !important;
  padding: 0 !important;
  height: 100%;
  display: block;
}
.loop-entry .post-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.loop-entry:hover .post-thumbnail img { transform: scale(1.05); }

/* 콘텐츠 영역 */
.loop-entry > .entry-content-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2vw, 1.45rem) clamp(1.15rem, 2vw, 1.5rem) clamp(1.2rem, 2vw, 1.5rem);
}
/* 제목 2줄 클램프(카드 높이 균일) */
.loop-entry .entry-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 카테고리 라벨 (pill) */
.entry-taxonomies .category-links { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.entry-taxonomies .category-links a {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.entry-taxonomies .category-links a:hover { background: var(--accent); color: #fff; }

/* 제목 */
.loop-entry .entry-title { font-size: clamp(1.05rem, 1.4vw, 1.22rem); font-weight: 800; margin: 0 0 0.5rem; }
.loop-entry .entry-title a { color: var(--ink); background-image: none; }
.loop-entry .entry-title a:hover { color: var(--accent); }

/* 요약 */
.loop-entry .entry-summary {
  color: var(--ink-soft);
  font-size: 0.975rem;
  line-height: 1.72;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 0.75rem;
}

/* 콘텐츠 세로 여백 압축 (카드 높이 안에 정갈하게) */
.loop-entry .entry-header { margin-bottom: 0.5rem; }
.loop-entry .entry-meta { margin-top: 0.3rem; }
.loop-entry .entry-title { margin: 0 0 0.4rem; }

/* 메타 */
.loop-entry .entry-meta { font-size: 0.82rem; color: var(--ink-faint); }
.loop-entry .entry-meta a { color: var(--ink-faint); }
.loop-entry .entry-meta a:hover { color: var(--accent); }

/* 더보기 링크 — Kadence 기본 영문("READ MORE") 텍스트 숨기고 "자세히 보기"로 */
.loop-entry .entry-footer { margin-top: 0.9rem; }
.loop-entry .more-link-wrap { margin: 0; }
.loop-entry .entry-actions .post-more-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0 !important;      /* 기본 텍스트(READ MORE/스크린리더) 숨김 */
  color: var(--accent);
}
.loop-entry .entry-actions .post-more-link .screen-reader-text { display: none !important; }
.loop-entry .entry-actions .post-more-link::before { content: "자세히 보기"; font-size: 0.9rem !important; }
.loop-entry .entry-actions .post-more-link .kadence-svg-iconset { font-size: 0.9rem !important; transition: transform .35s var(--ease); }
.loop-entry:hover .post-more-link .kadence-svg-iconset { transform: translateX(4px); }

/* 메타: 작성자 숨기고 날짜만 (전역 — 목록/상세 모두) */
.entry-meta .posted-by { display: none; }

/* ---------- 페이지네이션 ---------- */
.kadence-pagination a, .kadence-pagination .page-numbers {
  border-radius: 10px !important;
  transition: all .35s var(--ease);
}
.kadence-pagination .page-numbers.current { background: var(--accent) !important; border-color: var(--accent) !important; }

/* ---------- 푸터 ---------- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer, .site-footer-row-container-inner { background: var(--surface); }
.site-footer a:hover { color: var(--accent); }

/* ---------- 스크롤 리빌 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .loop-entry:hover .post-thumbnail img { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- 좁은 화면: 1열 ---------- */
@media (max-width: 620px) {
  .kadence-posts-list.grid-cols,
  .content-wrap.kadence-posts-list { grid-template-columns: 1fr !important; }
  .mango-masthead { padding-top: 2.4rem; }
}

/* ---------- 푸터 법적 링크 소형 바 ---------- */
.mango-legal-bar {
  text-align: center;
  padding: 1.15rem 1rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  background: #fafafa;
  display: flex;
  gap: 1.1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.mango-legal-bar a { color: var(--ink-soft); }
.mango-legal-bar a:hover { color: var(--accent); }