.page-head{position:relative}

.page-head__visual{
  position:relative;
  display:flex;align-items:center;
  min-height:220px;
  background:var(--c-primary);
  color:#fff;
  text-align:center;
  overflow:hidden;
}
.page-head__visual::before{
  content:'';
  position:absolute;inset:0;
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
}
.page-head__visual::after{
  content:'';
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
}

.page-head__inner{
  position:relative;z-index:1;
  width:100%;
  max-width:var(--inner-w);
  margin:0 auto;
  padding:0 var(--inner-px);
}

.page-head__title{
  font-family:var(--f-head);
  font-size:var(--fs-h1);
  font-weight:var(--fw-head);
  letter-spacing:-.01em;
}
.page-head__desc{
  margin-top:12px;
  font-size:17px;
  opacity:.9;
}

.page-head__crumbs ol{
  display:flex;flex-wrap:wrap;
  gap:8px;
  font-size:var(--fs-sm);
}
.page-head__crumbs li+li::before{content:'/';margin-right:8px;opacity:.5}
.page-head__crumbs a:hover{text-decoration:underline}

/* --a  배경 안 (하단 중앙) */
.page-head--a .page-head__visual{padding:26px 0}
.page-head--a .page-head__crumbs{
  position:absolute;left:0;right:0;bottom:22px;z-index:2;
  color:#fff;
}
.page-head--a .page-head__crumbs ol{justify-content:center;opacity:.85}

/* --b  배경 아래 띠 */
.page-head--b .page-head__crumbs{
  background:var(--c-bg-alt);
  border-bottom:1px solid var(--c-line);
}
.page-head--b .page-head__crumbs ol{
  padding:15px 0;
  color:var(--c-text-mute);
}

/* --c  배경 위 띠 */
.page-head--c{display:flex;flex-direction:column-reverse}
.page-head--c .page-head__crumbs{
  border-bottom:1px solid var(--c-line);
}
.page-head--c .page-head__crumbs ol{
  padding:15px 0;
  color:var(--c-text-mute);
}

/* --d  크게 (배경 안 · 하단 중앙)
   ⚠️ 배경 이미지가 없으면 컬러 면적만 넓어진다. 이미지를 쓰는 사이트용. */
.page-head--d .page-head__visual{
  min-height:350px;
  padding:40px 0;
}
.page-head--d .page-head__title{font-size:clamp(30px,3.4vw,48px)}
.page-head--d .page-head__desc{margin-top:16px;font-size:18px}

/* 단색만 있을 때 밋밋하지 않게 */
.page-head--d .page-head__visual::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.55)),
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.10),transparent 60%);
}

.page-head--d .page-head__crumbs{
  position:absolute;left:0;right:0;bottom:26px;z-index:2;
  color:#fff;
}
.page-head--d .page-head__crumbs ol{justify-content:center;opacity:.85}

@media (max-width:1024px){
  .page-head__visual{min-height:150px}
  .page-head__title{font-size:26px}
  .page-head__desc{font-size:15px}
  .page-head--a .page-head__crumbs{bottom:14px}
  .page-head--b .page-head__crumbs ol,
  .page-head--c .page-head__crumbs ol{padding:12px 0;font-size:13px}

  .page-head--d .page-head__visual{min-height:240px;padding:30px 0}
  .page-head--d .page-head__desc{font-size:15px}
  .page-head--d .page-head__crumbs{bottom:16px}
}