/* ── pages / cases-surgery-log — 코성형 교과서(수술기록) ──────────
   기록 41건을 본문(사진 + 설명)까지 펼쳐 싣는다. 카드 목록이 아니라
   기록 한 건이 한 단락이고, 한 페이지에 5건씩 끊는다(site.js 의
   [data-pager]). 원문은 kowonglobal.com/surgery-log.
   구성: 히어로 → (안내 + 고지 + 기록 5건 + 페이저) → 형제 페이지 → 상담 CTA.
   .page-hero / .siblings / .cta-band (subpage.css) 와
   .pager / .tag / .disclaimer / .btn / .section (layout.css) 를 그대로 쓴다.
   이 파일은 그 프리미티브에 없는 것만 만든다. */

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

/* .page-hero 기본 오버레이는 검정 68%. hero.jpg 는 수술등이 켜진 밝은
   사진이라 68% 로는 흰 제목이 뜬다. 형제 케이스 페이지들과 같은 76%. */
.slog-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.76),rgba(0,0,0,.76)),
    var(--hero-img,none);
}

/* ── 목록 ──────────────────────────────────────────────────── */

/* 목록 안내 — 기록 전체에 걸리는 말이라 첫 기록 위에 둔다. */
.slog-list__note{
  padding:16px 20px;
  background:var(--brand-tint-1);
  border-radius:var(--radius-sm);
  font-size:var(--fs-16);line-height:1.6;letter-spacing:var(--ls-tight);
  color:var(--text-secondary);word-break:keep-all;
}
/* ── 기록 한 건 ────────────────────────────────────────────── */

.slog-list__records{margin-top:var(--sp-block)}
.slog-record{padding-block:var(--sp-block);border-top:1px solid var(--line-soft)}
.slog-record:first-child{border-top:0;padding-top:0}
/* 페이지에서 빠진 기록은 위 구분선까지 같이 사라져야 한다 */
.slog-record[hidden]{display:none}

/* 기록 번호 + 시술 태그 한 줄. 번호는 Pretendard 700 자간 넓힘
   (--font-numeric 서브셋에 영문 대문자가 없어 섞어 쓰지 않는다). */
.slog-record__log{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.slog-record__no{
  font-weight:700;font-size:var(--fs-14);line-height:1.2;
  letter-spacing:var(--ls-wide);color:var(--brand);
}
.slog-record__title{
  margin-top:14px;
  font-weight:700;font-size:var(--fs-32);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
.slog-record__by{
  margin-top:10px;
  font-size:var(--fs-14);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-tertiary);
}

/* 본문 — 원문이 사진과 설명을 번갈아 싣는다. 읽는 폭은 900 으로 묶고
   사진은 원본 비율 그대로 둔다(전후 합성이라 자르면 한쪽이 사라진다). */
.slog-record__body{
  max-width:900px;margin-top:var(--sp-stack);
  font-size:var(--fs-18);line-height:1.8;
  color:var(--text-secondary);word-break:keep-all;
}
.slog-record__body > * + *{margin-top:16px}
.slog-record__fig{margin-block:var(--sp-stack)}
.slog-record__fig img{
  width:100%;height:auto;
  border-radius:var(--radius-card);background:var(--surface-muted);
}

@media (max-width:767px){
  .slog-record__title{font-size:var(--fs-24)}
}

/* ── 고지 ──────────────────────────────────────────────────── */

/* 원문은 안내 바로 아래·기록 목록 위에 두는 role="note" 박스다.
   'Side effects' 라벨이 문장 앞에 붙는다. 안내 박스와 같은 판·같은 패딩으로
   두 줄이 한 덩어리로 읽히게 하고, 이쪽만 테두리로 구분한다. */
.slog-list__side{
  margin-top:var(--sp-tight);
  padding:16px 20px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
}
.slog-list__side-label{margin-right:8px;font-weight:700;color:var(--brand)}

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

/* 콘텐츠의 CTA 문구 한 줄 + 버튼뿐이라 --sp-section 여백은 과하다.
   center 프레이밍이면 로비 사진의 KOWON 사인이 버튼과 겹쳐 41% 로 올린다.
   (J컬 Sec_10 과 같은 값) */
.slog-cta{
  padding-block:var(--sp-block);
  background-position:0 0,center 41%;
}
/* 가운데 정렬은 .cta-band 의 text-align 과 .cta-band__actions 가 이미 한다.
   __inner 를 flex 로 묶으면 버튼 줄이 내용 너비로 줄어 모바일에서
   .cta-band__actions .btn{width:100%} 가 화면 폭을 못 채운다. */
.slog-cta__title{max-width:900px;margin-inline:auto}

/* 기록 전체가 상세로 가는 링크다. 목록 모양은 그대로 두고 링크만 얹는다. */
.slog-record__link{display:block}
.slog-record__link:hover .slog-record__title{color:var(--brand)}
.slog-record__more{margin-top:10px;color:var(--text-tertiary)}

/* ── 코성형 교과서 목록 — 카드 그리드 ──────────────────────────────
   원본(kowonps.com/cases/surgery-log)은 목록에 제목·시술·표지만 두고
   본문은 상세에서 보여준다. 우리 목록이 41건 전문을 펼치던 것을 카드로 돌린다.
   카드 톤은 J컬 Sec_8 칼럼 카드와 같게 맞춘다 —
   .card 프리미티브 + 1단 이미지 + 40px 알약 칩 + 제목 + 기록자. */
.slog-grid{margin-top:var(--sp-block)}

/* 그리드 칸이 늘어나야 .card 가 같은 행 형제와 키를 맞춘다. */
.slog-card{display:flex}
.slog-card__link{
  display:flex;flex-direction:column;width:100%;height:100%;
  transition:box-shadow .18s ease,transform .18s ease;
}
.slog-card__link:hover,.slog-card__link:focus-visible{
  box-shadow:0 8px 40px rgba(0,0,0,.14);transform:translateY(-2px);
}
/* 표지는 전부 750x635 라 4:3 틀에 맞는다. */
.slog-card__media{flex:none}
.slog-card__body{
  flex:1 1 auto;display:flex;flex-direction:column;
  padding:var(--sp-gap);      /* J컬 Sec_8 과 같은 30 */
}
/* LOG 번호 + 시술 칩 한 줄 */
.slog-card__log{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.slog-card__no{
  font-weight:700;font-size:var(--fs-14);line-height:1;letter-spacing:var(--ls-wide);
  color:var(--brand);
}
/* J컬 Sec_8 칩 값 그대로 — 40 높이 · 좌우 17 · 알약 · 16px */
.slog-card__tag{
  height:40px;padding-inline:17px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-16);line-height:1;
}
.slog-card__title{
  margin-top:14px;
  font-size:var(--fs-20);line-height:1.4;
  transition:color .18s ease;
}
.slog-card__link:hover .slog-card__title{color:var(--brand)}
/* 기록자 줄은 카드 바닥에 붙여 같은 행끼리 줄을 맞춘다. */
.slog-card__by{margin-top:auto;padding-top:var(--sp-tight)}

@media (max-width:767px){
  .slog-card__body{padding:24px 20px}
}