/* ── pages / about-safety — Safety System ──────────────────────────
   아키타입 article. 콘텐츠 JSON 의 template_note 가 지정한 대로
   J컬 Sec_1(히어로) → Sec_2 형태의 '제목·리드·본문' 섹션 반복 → Sec_10(CTA).

   뼈대는 전부 공용 프리미티브다.
     히어로   .page-hero      (subpage.css)
     영상     .card + .ratio--16x9   (layout.css)
     장비     .grid--3 + .card + .sub-label
     원칙     .numbered       (subpage.css)
     형제이동 .siblings       (subpage.css)
     상담     .cta-band       (subpage.css)
   이 파일은 그 프리미티브에 없는 것만 덮어쓴다. */


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

/* .page-hero 기본 오버레이는 검정 68%. 이 페이지 사진(hero.jpg)은 수술실
   조명이라 원본이 거의 흰색이고, 68% 로는 회색 바탕이 되어 핑크 eyebrow 와
   흰 본문이 읽히지 않는다. about 허브와 같이 80% 로 올린다. */
.safety-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),
    var(--hero-img,none);
}


/* ── KOWON SAFETY FILM — 청소·소독 영상 (A안: 좌우 2단) ─────────
   글은 왼쪽, 세로 영상(쇼츠)은 오른쪽 폰 프레임 안. 재생 단추는 layout.css 의
   .yt-play 그대로이고, 누르면 site.js 가 그 자리에 플레이어를 넣는다.
   1023 이하에서는 글 → 영상 한 줄로 쌓고 가운데 정렬한다. */
.safety-film__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp-block);
  align-items:center;max-width:1040px;margin-inline:auto;
}
.safety-film__text{text-align:left}
.safety-film__lead{margin-top:var(--sp-tight);max-width:560px}
.safety-film__actions{margin-top:var(--sp-stack);display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.safety-film__meta{margin-top:var(--sp-tight);font-size:var(--fs-14);color:var(--text-tertiary)}
.safety-film__phone{padding:10px;border-radius:42px;background:#16181d;box-shadow:0 24px 60px rgba(0,0,0,.18)}
.safety-film__screen{border-radius:32px;background:#000}
/* 재생 단추 — 공용 .yt-play(흰 96px 원) 대신 이 섹션 원래 모양인 브랜드 핑크 72px 원 */
.safety-film__screen .yt-play::before{width:72px;height:72px;background:var(--brand);box-shadow:0 4px 20px rgba(0,0,0,.35)}
.safety-film__screen .yt-play::after{border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--text-inverse)}
@media (max-width:767px){
  .safety-film__screen .yt-play::before{width:56px;height:56px}
  .safety-film__screen .yt-play::after{border-width:9px 0 9px 15px}
}
@media (max-width:1023px){
  .safety-film__grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--sp-stack)}
  .safety-film__text{text-align:center}
  .safety-film__lead{margin-inline:auto}
  .safety-film__actions{justify-content:center}
  .safety-film__phone{width:min(300px,78vw)}
}


/* ── 안전을 위한 장비 ──────────────────────────────────────── */

.safety-gear__list{margin-top:var(--sp-block)}

/* 그리드 칸이 늘어나야 같은 행의 카드가 키를 맞춘다. */
.safety-gear__item{display:flex}

/* .card__body 기본 패딩 20 은 이미지 아래 캡션용이다. 본문만 있는
   카드라 J컬 카드들과 같은 여유(28/24)를 준다. */
.safety-gear__body{flex:1;padding:28px 24px}

/* .sub-label 의 핑크 막대는 align-items:center 라 제목이 두 줄이 되면
   가운데로 내려간다. 첫 줄 옆에 고정한다. */
.safety-gear__title{align-items:flex-start;word-break:keep-all}
.safety-gear__title::before{margin-top:.3em}

.safety-gear__text{margin-top:14px;line-height:1.7}


/* ── 장비보다 프로토콜 ─────────────────────────────────────── */

.safety-protocol__list{margin-top:var(--sp-block)}

/* .numbered 기본은 3열이다. 여기는 항목이 4개이고 본문이 길어
   3열이면 마지막 줄에 한 장만 남는다. 2×2 로 세운다. */
.safety-protocol__list{grid-template-columns:repeat(2,1fr)}
@media (max-width:767px){
  .safety-protocol__list{grid-template-columns:1fr}
}

/* 섹션을 닫는 한 줄. eyebrow 와 같은 디스플레이 서체·브랜드 색을 쓰되
   맺음말이라 크기만 한 단 올린다. */
.safety-protocol__signoff{
  margin-top:var(--sp-block);
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-40);line-height:1.2;letter-spacing:var(--ls-tight);
  color:var(--brand);text-align:center;
}


/* ── 병원소개 형제 페이지 이동 ─────────────────────────────── */

/* .siblings 는 그 자체로 완결된 가로 목록이다. 칸만 준다. */
.safety-more__nav{margin-inline:auto}


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

/* .cta-band 기본 배치는 center 라 사진의 인물 얼굴이 제목 뒤에 겹친다.
   J컬 Sec_10·about 과 같은 프레이밍(세로 41%)으로 올려 글자 뒤를 비운다. */
.safety-cta{background-position:0 0,center 41%}

/* .cta-band 는 컨테이너가 없다. 안쪽 .container 가 가운데 정렬을 이어받는다. */
.safety-cta__inner{display:flex;flex-direction:column;align-items:center}

/* 제목이 한 문장으로 길다. 1280 을 다 쓰면 한 줄이 너무 길어진다. */
.safety-cta__inner .cta-band__title{max-width:1000px}
.safety-cta__inner .cta-band__lead{max-width:760px}