/* ── pages / blog — KOWON Blog 허브 ────────────────────────────────
   아키타입 hub: 히어로 → 도입문(공식 블로그 링크) → 시술별 글 목록 →
   시술 페이지 카드 → 상담 CTA.
   .page-hero / .hubgrid / .hubcard / .cta-band (subpage.css) 와
   .card / .ratio / .grid / .tag / .sec-head / .btn (layout.css) 를 그대로 쓴다.
   글 목록은 KOWON TV 허브(page-tv.css)의 카테고리 머리 + 영상 카드 규칙과
   같은 값을 쓴다 — 두 허브가 같은 형태로 읽히게 하기 위함이다.
   이 파일은 그 프리미티브에 없는 것만 만든다. */

/* ── 히어로 ────────────────────────────────────────────────── */

/* .page-hero 기본 오버레이는 검정 68%. 이 페이지 사진(hero.jpg)은
   signature 허브와 같은 밝은 원본이라 68% 로는 핑크 eyebrow 와 흰 본문이
   읽히지 않는다. 그 페이지와 같게 80% 로 올린다. */
.blog-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),
    var(--hero-img,none);
}

/* ── 도입문 — 공식 블로그로 나가는 링크 카드 ──────────────── */

.blog-intro__inner{display:flex;justify-content:center}

/* 판(흰 면·radius·그림자)은 .hubcard 프리미티브 그대로다.
   원문은 카드 왼쪽에 소개 글, 오른쪽에 '네이버 블로그로 나가는' 버튼이 한 줄로
   놓인 모양이라 카드를 가로 배치로 편다. 읽기 줄 900 은 .prose 와 같은 폭. */
.blog-intro__card{
  width:100%;max-width:900px;
  flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-gap);
}
.blog-intro__text{min-width:0}
.blog-intro__btn{flex:none}

/* ── 시술별 글 목록 ───────────────────────────────────────── */

/* 카테고리 점프 칩. .tag 는 28px 높이의 표시용 칩이라 손가락으로 누르기엔
   낮다. 링크로 쓰는 여기서만 44px(최소 터치 영역)로 키우고 호버/포커스
   상태를 준다 — 같은 칩 줄을 쓰는 tv 허브와 같은 값이다. */
.blog-cats__nav{margin-bottom:var(--sp-tight)}
.blog-cats__tags{justify-content:center;gap:8px}
.blog-cats__tag{
  min-height:44px;padding-inline:18px;
  transition:background-color .18s ease,color .18s ease;
}
.blog-cats__tag:hover,.blog-cats__tag:focus-visible{background:var(--brand);color:var(--text-inverse)}

/* 원문에는 태그 알약 줄 밑에 'Browse by topic' 라벨 + 주제 이름 링크 줄이
   한 단 더 있다. 원문의 링크처(/topics/<주제>)는 이 빌드에 없으므로 주제 허브
   /topics 로 보낸다 (없는 URL 을 만들지 않는다 — SUBPAGE_CONVENTIONS). */

/* 카테고리 블록. 점프 링크로 이동하므로 고정 헤더(스크롤 후 fixed)가
   제목을 덮지 않게 스크롤 여백을 둔다. (tv 허브의 .tv-cat 과 같은 값) */
.blog-cat{scroll-margin-top:calc(var(--header-h) + 20px)}
.blog-cat+.blog-cat{margin-top:var(--sp-block)}

/* 카테고리 머리 — 제목 + 글 수를 한 묶음으로 두고,
   그 맞은편 오른쪽 끝에 주제 전체 링크를 붙인다. (tv 허브의 .tv-cat__head) */
.blog-cat__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;
  padding-bottom:20px;border-bottom:1px solid var(--line-soft);
}
.blog-cat__heading{min-width:0}
.blog-cat__title{
  font-weight:700;font-size:var(--fs-32);line-height:1.3;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
/* 글 수는 tv 의 영상 편수와 같게 제목 밑 작은 회색 줄로 둔다
   (알약 배지 .tag 를 쓰지 않는다 — 두 허브의 머리 모양을 맞춘다). */
.blog-cat__count{
  margin-top:6px;
  font-weight:500;font-size:var(--fs-16);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-tertiary);white-space:nowrap;
}
/* 태그별 목록(/blog?tag=…)이 이 빌드에 없어 같은 주제를 모아 둔 /topics 로 보낸다. */
.blog-cat__all{flex:none;margin-left:0;font-size:var(--fs-14);color:var(--brand)}
.blog-cat__all:hover{color:var(--text-primary)}

.blog-cat__grid{margin-top:var(--sp-stack)}

/* 글 카드 — tv 의 영상 카드(.tv-vid)와 같은 .card(+--shadow) 규칙.
   그리드 칸이 늘어나야 같은 행의 카드가 키를 맞춘다.
   원문 콘텐츠에 글별 주소가 없어 카드는 링크가 아니다 — 판과 호버만 같다. */
.blog-post{display:flex}
.blog-post__card{
  display:flex;flex-direction:column;width:100%;
  transition:box-shadow .18s ease,transform .18s ease;
}
.blog-post__card:hover,.blog-post__card:focus-within{
  box-shadow:0 8px 40px rgba(0,0,0,.14);transform:translateY(-2px);
}
/* 표지는 966 정사각(일부는 세로형) 한국어 카드다. tv 와 같은 16:9 틀에
   object-fit:cover 로 앉히면 가운데 띠만 남는다 — 표지의 인물·비포애프터
   구간이 그 띠라 의도한 자리다. */
.blog-post__media{flex:none}
/* 날짜를 카드 바닥에 붙여 같은 행의 카드끼리 줄을 맞춘다 —
   tv 의 영상 카드에는 없는 줄이라 .hubcard__more 와 같은 margin-top:auto 로 받는다. */
.blog-post__body{flex:1;display:flex;flex-direction:column}
/* 글 제목은 tv 영상 제목과 같은 18. (.card__title 기본 20보다 한 단 낮다) */
.blog-post__title{
  font-size:var(--fs-18);line-height:1.5;
  transition:color .18s ease;
}
.blog-post__card:hover .blog-post__title{color:var(--brand)}
/* 원문 카드 아래쪽의 발행일. .card__meta 그대로 두고 자리만 바닥으로 내린다. */
.blog-post__date{margin-top:auto;padding-top:12px}

/* 목록 끝 안내문 — 태그 줄을 가리키는 문장이라 목록과 붙여 두지 않는다. */
.blog-cats__note{
  margin-top:var(--sp-block);
  font-size:var(--fs-16);line-height:1.7;letter-spacing:var(--ls-tight);
  color:var(--text-secondary);text-align:center;word-break:keep-all;
}

/* ── 시술 페이지로 잇는 카드 ──────────────────────────────── */

.blog-more__grid{margin-top:var(--sp-block)}
.blog-more__cell{display:flex}
.blog-more__card{flex:1}
.blog-more__name{margin-top:12px}

/* .hubcard__more 자리(margin-top:auto)에 화살표만 놓는다.
   목록 항목 제목이 이미 링크 이름이라 'Read more' 문구를 새로 만들지 않는다.
   (KOWON TV 허브의 시술 카드와 같은 처리) */
.blog-more__arrow{
  display:block;
  font-size:var(--fs-24);line-height:1;color:var(--brand);
}

/* ── 상담 CTA ─────────────────────────────────────────────── */

/* 이 페이지 콘텐츠에는 CTA 제목·리드가 없다. 밴드는 라벨 + 버튼 + 고지라
   .cta-band 의 --sp-section 여백은 과하다. --sp-block 으로 낮춘다. */
.blog-cta{padding-block:var(--sp-block)}

/* .cta-band 기본 프레이밍은 center 라 로비 사진의 KOWON 사인이 글자와 겹친다.
   J컬 Sec_10 과 같은 세로 41% 로 올린다. */
.blog-cta{background-position:0 0,center 41%}
.blog-cta__inner{display:flex;flex-direction:column;align-items:center}
.blog-cta__actions{margin-top:var(--sp-tight)}

/* 의료광고 고지 — .disclaimer 의 회색(--text-tertiary)은 핑크 밴드 위에서
   읽히지 않는다. 밴드 안에서만 흰색 계열로 바꾼다. (tv·topics 와 같은 처리) */
.blog-cta__note{max-width:900px;color:rgba(255,255,255,.9)}

/* ── 태블릿·모바일 ────────────────────────────────────────── */

/* 한 카테고리가 글 4편이라 .grid--4 의 태블릿 2열에서는 2줄로 쪼개지고
   썸네일 옆 글줄도 좁아진다. tv 허브와 같게 1023 이하에서는 열을 하나로
   내리고 썸네일을 왼쪽에 둔 가로 카드로 바꾼다 — 블로그 목록과 같은
   형태라 세로 길이도 2열 그리드보다 짧아진다. */
@media (max-width:1023px){
  .blog-cat__grid{grid-template-columns:1fr}
  .blog-post__card{flex-direction:row;align-items:center}
  .blog-post__media{flex:0 0 44%}
  .blog-post__body{min-width:0;padding:16px 20px}
}

@media (max-width:767px){
  .blog-intro__card{padding:28px 24px;flex-direction:column;align-items:flex-start}
  .blog-intro__btn{width:100%}
  .blog-post__body{padding:14px 16px}

  /* 제목 줄에서 밀려 내려오므로 오른쪽 끝 대신 왼쪽에 붙인다. */
  .blog-cat__head{align-items:flex-start}
}