/* 인사이트 블로그 — .blog-page 스코프(마케팅 전역 CSS와 충돌 방지).
   와이어프레임(.docs/blog) 레이아웃을 사이트 톤으로 구현: featured 3열 + 카테고리 칩
   + 최신글/인기글 2단 + 상세. 반응형 900px 에서 사이드바가 아래로 스택. */

.blog-page {
  --blog-ink: #1b2138;
  --blog-sub: #5b6276;
  --blog-mute: #8a90a4;
  --blog-line: #eceef4;
  --blog-bg: #f7f8fb;
  --blog-accent: #3d6df6;
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--blog-ink);
  background: #fff;
}
.blog-page * { box-sizing: border-box; }
.blog-page a { color: inherit; text-decoration: none; }
/* 헤딩·p margin 리셋은 전역 base.css 가 이미 수행 → 별도 리셋 없음
   (공용 .page-hero h1 의 margin-bottom 을 덮어써 히어로 간격이 무너지는 것 방지). */

/* 히어로는 공용 .page-hero(style.css) 사용 — 다른 페이지와 통일. 블로그 전용 히어로 제거. */

/* ---- 컨테이너 ---- */
.blog-container { max-width: 1120px; margin: 0 auto; padding: 40px 24px 80px; }

/* ---- 공통: 아이브로 / 칩 / 썸네일 ---- */
.blog-eyebrow {
  font: 600 11px/1 Inter, "Noto Sans KR", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blog-mute);
  margin-bottom: 16px;
}
.blog-chip {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #eef1f8;
  color: #4a5270;
}
/* 카테고리별 색 */
.blog-chip[data-cat="nocode"] { background: #e2f6f0; color: #10876a; }
.blog-chip[data-cat="outsourcing"] { background: #e8eaff; color: #4a52d0; }
.blog-chip[data-cat="bubble"] { background: #e5f0ff; color: #2f6fe0; }
.blog-chip[data-cat="success"] { background: #fdf0dc; color: #b7791f; }
.blog-chip[data-cat="insight"] { background: #f1e8fd; color: #7c3aed; }
.blog-chip[data-cat="subscription"] { background: #fde8f1; color: #c026a0; }

.blog-thumb, .blog-row-thumb {
  overflow: hidden;
  background: var(--blog-bg);
}
.blog-thumb img, .blog-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-thumb.is-logo img, .blog-row-thumb.is-logo img { object-fit: contain; padding: 18px; }
/* 썸네일 없을 때 플레이스홀더(카테고리 색 그라디언트) */
.blog-thumb--ph { display: flex; align-items: center; justify-content: center; }
.blog-thumb--ph span {
  font: 700 14px "Noto Sans KR", sans-serif; color: #fff;
  opacity: 0.95; letter-spacing: 0.02em;
}
.blog-thumb--ph[data-cat="nocode"] { background: linear-gradient(135deg, #14b88a, #0e9d76); }
.blog-thumb--ph[data-cat="outsourcing"] { background: linear-gradient(135deg, #6b73f0, #4a52d0); }
.blog-thumb--ph[data-cat="bubble"] { background: linear-gradient(135deg, #4f8ff7, #2f6fe0); }
.blog-thumb--ph[data-cat="success"] { background: linear-gradient(135deg, #f0a93e, #d98a1f); }
.blog-thumb--ph[data-cat="insight"] { background: linear-gradient(135deg, #9b5cf6, #7c3aed); }
.blog-thumb--ph[data-cat="subscription"] { background: linear-gradient(135deg, #ec5aa8, #c026a0); }
.blog-thumb--ph[data-cat] { background: linear-gradient(135deg, #8b93ad, #5b6488); }

.blog-card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; font-size: 13px; color: var(--blog-mute);
}
.blog-card-meta .dot { color: #cfd3df; }

/* ---- featured ---- */
.blog-featured { margin-bottom: 40px; }
.blog-featured-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.blog-card--feature {
  display: flex; flex-direction: column;
  border: 1px solid var(--blog-line); border-radius: 16px; overflow: hidden;
  background: #fff; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.blog-card--feature:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(27, 33, 56, 0.1); }
.blog-card--feature .blog-thumb { aspect-ratio: 16 / 10; }
.blog-card-body { display: flex; flex-direction: column; padding: 18px 20px 22px; }
.blog-card-body .blog-chip { margin-bottom: 12px; }
.blog-card-body h3 { font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.blog-card-body p {
  margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--blog-sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- 카테고리 탭 ---- */
.blog-cats {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--blog-line);
}
.blog-cat {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--blog-line);
  background: #fff; color: var(--blog-sub); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.15s ease;
}
.blog-cat:hover { border-color: #c9d2ee; color: var(--blog-ink); }
.blog-cat.active { background: var(--blog-ink); border-color: var(--blog-ink); color: #fff; }

/* ---- 본문 레이아웃(최신글 + 사이드바) ---- */
.blog-body { display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: start; }
.blog-main-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 20px;
}
.blog-main-head h2 { font-size: 20px; font-weight: 700; }
.blog-sort { font-size: 13px; color: var(--blog-mute); }

/* 최신글 행 카드 */
.blog-latest { display: flex; flex-direction: column; }
.blog-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--blog-line);
}
.blog-row:first-child { padding-top: 0; }
.blog-row-thumb { aspect-ratio: 16 / 10; border-radius: 12px; }
.blog-row-body { display: flex; flex-direction: column; min-width: 0; }
.blog-row-body .blog-chip { margin-bottom: 10px; }
.blog-row-body h3 {
  font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em;
  transition: color 0.15s ease;
}
.blog-row:hover .blog-row-body h3 { color: var(--blog-accent); }
.blog-row-body p {
  margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--blog-sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.blog-more {
  display: block; width: 100%; margin-top: 28px; padding: 14px;
  border: 1px solid var(--blog-line); border-radius: 12px; background: #fff;
  color: var(--blog-sub); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.15s ease;
}
.blog-more:hover { border-color: #c9d2ee; color: var(--blog-ink); background: var(--blog-bg); }
.blog-empty { padding: 48px 0; text-align: center; color: var(--blog-mute); }

/* ---- 사이드바: 인기글 ---- */
.blog-side { position: sticky; top: 96px; }
.blog-widget { border: 1px solid var(--blog-line); border-radius: 16px; padding: 22px 20px; background: var(--blog-bg); }
.blog-widget-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.blog-widget-empty { font-size: 13px; color: var(--blog-mute); }
/* ⚠️ 전역 base.css 의 `ol>li:before{content:counter(number)"."}` 가 list-style 와 무관하게
   "1." 을 찍어 커스텀 rank 와 번호가 중복된다 → ::before 를 무력화(content:none)해 제거. */
.blog-pop { list-style: none; margin: 0; padding: 0; }
.blog-pop > li { counter-increment: none; }
.blog-pop > li::before { content: none; }
.blog-pop > li + li { border-top: 1px solid #e6e9f1; }
/* 순위(좌·세로 중앙) + [제목 윗줄 / 조회 아랫줄] 2단 스택 */
.blog-pop a {
  display: flex; align-items: center; gap: 14px; padding: 13px 6px;
  border-radius: 8px; transition: background 0.15s ease;
}
.blog-pop a:hover { background: #fff; }
.blog-pop a:hover .blog-pop-title { color: var(--blog-accent); }
.blog-pop-rank {
  flex: none; width: 18px; text-align: center;
  font-family: Inter, sans-serif; font-size: 17px; font-weight: 600; line-height: 1;
  color: #b7bdc9;
}
.blog-pop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.blog-pop-title {
  min-width: 0;
  font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--blog-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blog-pop-views { font-size: 12.5px; line-height: 1.3; color: var(--blog-mute); }

/* ============================== 상세 ============================== */
.blog-detail-page { background: #fff; }
.blog-detail { max-width: 760px; padding-top: 64px; }
.blog-detail-head { padding-bottom: 28px; border-bottom: 1px solid var(--blog-line); margin-bottom: 32px; }
.blog-detail-head .blog-chip { margin-bottom: 16px; }
.blog-detail-head h1 { font-size: 30px; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em; }
.blog-detail-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 18px; font-size: 14px; color: var(--blog-mute);
}
.blog-detail-meta .dot { color: #cfd3df; }
.blog-detail-thumb { border-radius: 16px; overflow: hidden; margin-bottom: 32px; background: var(--blog-bg); }
.blog-detail-thumb img { width: 100%; display: block; }
.blog-detail-thumb.is-logo img { object-fit: contain; padding: 32px; }

/* 본문 타이포 */
.blog-detail-body { font-size: 16px; line-height: 1.8; color: #2c3145; }
.blog-detail-body p { margin: 0 0 20px; }
.blog-detail-body h3 { font-size: 20px; font-weight: 700; margin: 36px 0 14px; letter-spacing: -0.01em; }
.blog-detail-body ul, .blog-detail-body ol { margin: 0 0 20px; padding-left: 22px; }
.blog-detail-body li { margin-bottom: 8px; }
.blog-detail-body a { color: var(--blog-accent); text-decoration: underline; }
.blog-detail-body strong { font-weight: 700; color: var(--blog-ink); }
.blog-detail-body img { max-width: 100%; border-radius: 12px; }

.blog-detail-nav { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--blog-line); }
.blog-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  border: 1px solid var(--blog-line); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--blog-sub); transition: all 0.15s ease;
}
.blog-back:hover { border-color: #c9d2ee; color: var(--blog-ink); background: var(--blog-bg); }

/* ============================== 반응형 ============================== */
@media (max-width: 900px) {
  .blog-body { grid-template-columns: 1fr; gap: 36px; }
  .blog-side { position: static; }
  .blog-featured-grid { grid-template-columns: 1fr 1fr; }
  .blog-featured-grid .blog-card--feature:nth-child(3) { display: none; } /* 모바일 featured 2개 */
}
@media (max-width: 640px) {
  /* 히어로 반응형은 공용 .page-hero(style_resp.css)가 처리 */
  .blog-container { padding: 28px 18px 60px; }
  .blog-featured-grid { grid-template-columns: 1fr; }
  .blog-featured-grid .blog-card--feature:nth-child(3) { display: flex; }
  .blog-row { grid-template-columns: 120px 1fr; gap: 14px; }
  .blog-row-body h3 { font-size: 15px; }
  .blog-row-body p { display: none; }
  .blog-detail { padding-top: 40px; }
  .blog-detail-head h1 { font-size: 24px; }
}