/* RTL 자동 반전본 — 원본: /en/assets/css/sections/main-sec_8.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=759bf402ed518166628ccac1a094738b */
/* main / Sec_8 — Surgery Log
   연분홍 배경(--brand-tint-2). 좌 타이틀(eyebrow+H2+lead) / 우 하단 View more 아웃라인 버튼,
   그 아래 before-after 썸네일 카드 3개(칩 + 인용 제목 + 기록자), 맨 아래 고지 문구.
   시안 1920 좌표: 섹션 1192 높이 / 상하 여백 140 / 타이틀 140 / 카드 380 / 고지 1004.
   카드 406×564, 사이 31(≈--sp-gap), 이미지 406×344, 본문 여백 30. */

.main-sec_8{
  /* 시안 상하 여백 140px = --sp-section(120) + 20 */
  padding-block:calc(var(--sp-section) + 20px);
  background:var(--brand-tint-2);
}

/* ── 헤더: 좌 텍스트 / 우 CTA(아래쪽 정렬) ────────────────── */
.main-sec_8__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-stack);
}
.main-sec_8__intro{max-width:710px}   /* 시안 텍스트 블록 폭 */
/* 시안 타이틀 블록은 180 높이(eyebrow 26 + 제목 82 + 리드 72) — 리드 위 여백만 20 */
.main-sec_8__intro .sec-lead{margin-top:20px}

/* 시안 CTA 180×56 — .btn 기본 폭(텍스트+70)보다 넓다 */
.main-sec_8__more{flex:none;min-width:180px}

/* ── 카드 ──────────────────────────────────────────────── */
.main-sec_8__cards{margin-top:var(--sp-block)}

.main-sec_8__card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* 시안 이미지 406×344 (원본 384×325 과 같은 비율) */
.main-sec_8__media{
  aspect-ratio:406 / 344;
  background:var(--surface-muted);
}

.main-sec_8__body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding:var(--sp-gap);   /* 시안 30 */
}

/* 시안 칩: 높이 40 / 좌우 20 / 16px 500 / pill
   (공용 .tag 는 28 높이 · 14px · radius-chip) */
.main-sec_8__tag{
  align-self:flex-start;
  height:40px;
  padding-inline:20px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-16);
  line-height:1;
}

.main-sec_8__title{
  margin-top:10px;      /* 시안 칩 아래 10 */
  margin-bottom:34px;   /* 시안 제목 박스 60(행간 1.4=56) + 아래 30 을 합친 값 */
}

/* 제목 줄 수가 달라지는 좁은 폭에서도 기록자 줄은 카드 아래에 붙는다 */
.main-sec_8__meta{
  margin-top:auto;
  line-height:1.4;
}

/* ── 고지 문구 ─────────────────────────────────────────── */
/* 시안 16px · 행간 1.5 · --text-tertiary 가운데 (공용 .disclaimer 는 14px · 1.6 · 상단 40) */
.main-sec_8__note{
  margin-top:var(--sp-block);
  font-size:var(--fs-16);
  line-height:1.5;
}

/* ── 태블릿 이하: 좁아진 타이틀 칸에서 강제 줄바꿈을 푼다 ──
   768 에서 intro 폭이 710 → 약 484 로 줄어 'he decided —' 한 줄만 남는다. */
@media (max-width:1023px){
  .main-sec_8__br{display:none}
}

/* ── 모바일: 헤더 세로 쌓기 ────────────────────────────── */
@media (max-width:767px){
  .main-sec_8__head{
    flex-direction:column;
    align-items:stretch;
    gap:var(--sp-gap);
  }
  .main-sec_8__more{align-self:flex-start}
}