/* RTL 자동 반전본 — 원본: /en/assets/css/page-head.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=f57489dcf49f2e8bb902d7f633cb1c31 */
/* ── 서브페이지 머리 ──────────────────────────────────────────
   2026-10-07 요청 "서브페이지 헤더 배너 삭제, 국문 홈페이지처럼 처리" 로 사진 풀스크린 배너
   (.page-hero 등)를 걷어내고, 국문 kowonps.com 서브페이지의 제목 영역 구성을 따른다.
     .page-head          빵부스러기 · eyebrow · 제목 · 리드 (왼쪽 정렬) — 서브페이지 41쪽
     .page-head--split   코 성형 유형 8쪽 — 오른쪽 이미지 카드 (폰에서는 카드 숨김)
   2026-10-08 배경 3안 중 V3(미드나잇 네이비) 확정: 짙은 남색 그라데이션 + 점 패턴 + 핑크 빛.
   어두운 배경이라 헤더는 투명(흰 글자)으로 두고, 섹션의 data-hero 로 site.js 가 스크롤 뒤
   흰 헤더로 바꾼다. 장식은 배경 레이어·가상요소뿐이라 글자 위치·크기에 영향이 없다.
   치수는 국문 측정값: 위 여백 헤더+60 / 아래 80, 빵부스러기→eyebrow 24, 리드 위 24. */

.page-head{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:calc(var(--header-h) + 60px) 80px;
  color:var(--text-inverse);
  background:
    radial-gradient(50% 120% at 100% 0%,rgba(255,10,108,.22),rgba(255,10,108,0) 60%),
    radial-gradient(40% 90% at 0% 100%,rgba(96,120,200,.16),rgba(96,120,200,0) 70%),
    linear-gradient(-120deg,#10172a 0%,#18213b 55%,#221b36 100%);
}
.page-head::before,.page-head::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.page-head::before{            /* 점 패턴 — 오른쪽으로 갈수록 드러난다 */
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 85%);
          mask-image:linear-gradient(100deg,transparent 35%,#000 85%);
}
.page-head::after{             /* 아래 가장자리 헤어라인 */
  right:0;left:0;bottom:0;height:1px;
  background:linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,.18) 50%,rgba(255,255,255,0));
}

.page-head__crumbs ol{
  display:flex;flex-wrap:wrap;
  font-size:var(--fs-14);line-height:1.4;color:rgba(255,255,255,.55);
}
.page-head__crumbs li+li::before{content:"\00B7";margin-inline:7px}
.page-head__crumbs a:hover{color:#fff}
/* eyebrow — 가는 Italiana 가 남색 위에서 묻혀서 또렷한 Pretendard 굵게로 바꾼다. 색은 브랜드 핑크, 크기 그대로 (2026-10-08) */
.page-head__eyebrow{margin-top:24px;font-family:var(--font-sans);font-weight:700;font-size:var(--fs-20);line-height:1.2;letter-spacing:.04em}
.page-head__title{
  margin-top:14px;
  font-weight:700;font-size:var(--fs-60);line-height:1.25;letter-spacing:var(--ls-tight);
  color:#fff;word-break:keep-all;
}
.page-head__crumbs+.page-head__title{margin-top:24px}   /* eyebrow 없는 페이지(Q&A) */
.page-head__lead{
  margin-top:24px;max-width:760px;
  font-size:var(--fs-18);line-height:1.65;letter-spacing:var(--ls-tight);
  color:rgba(255,255,255,.72);word-break:keep-all;
}

/* ── 코 성형 유형 — 오른쪽 이미지 카드 ───────────────────────── */
.page-head--split{padding-block:calc(var(--header-h) + 44px) 56px}
.page-head__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px 80px;align-items:center;
}
.page-head--split .page-head__title{font-size:var(--fs-50)}
.page-head__qa{
  margin-top:28px;max-width:760px;
  padding-right:20px;border-right:2px solid var(--brand);
}
.page-head__q{font-weight:700;font-size:var(--fs-16);line-height:1.4;color:#fff}
.page-head__a{
  margin-top:8px;
  font-size:var(--fs-18);line-height:1.65;letter-spacing:var(--ls-tight);
  color:rgba(255,255,255,.72);word-break:keep-all;
}
.page-head__figure{
  margin:0;overflow:hidden;
  background:#fff;border:1px solid rgba(255,255,255,.14);border-radius:24px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.page-head__figure img{display:block;width:100%;height:auto}

@media (max-width:1023px){
  .page-head{padding-block:calc(var(--header-h) + 48px) 64px}
  .page-head--split{padding-block:calc(var(--header-h) + 36px) 48px}
  .page-head__grid{grid-template-columns:minmax(0,1fr) 240px;gap:32px 48px}
}
@media (max-width:767px){
  .page-head{padding-block:calc(var(--header-h) + 40px) 48px}
  .page-head__eyebrow{margin-top:20px}
  .page-head__grid{grid-template-columns:1fr}
  .page-head__figure{display:none}
}
