.sec{
  padding:var(--sec-py) 0;
  background:var(--c-bg);
}
.sec--alt{background:var(--c-bg-alt)}
.sec__hl{font-style:normal;color:var(--c-primary)}
.sec__inner{
  width:100%;
  max-width:var(--inner-w);
  margin:0 auto;
  padding:0 var(--inner-px);
}

.sec__head{
  text-align:center;
  margin-bottom:var(--gap);
}
.sec__eyebrow{
  display:block;
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-primary);
  margin-bottom:12px;
}
.sec__title{
  font-family:var(--f-head);
  font-size:var(--fs-h2);
  font-weight:var(--fw-head);
  line-height:1.35;
  letter-spacing:-.02em;
}
.sec__title::after{
  content:'';
  display:block;
  width:44px;height:3px;
  margin:20px auto 0;
  background:var(--c-primary);
}
.sec__desc{
  margin-top:16px;
  color:var(--c-text-sub);
  white-space:pre-line;
}

@media (max-width:1024px){
  .sec{padding:var(--sec-py-m) 0}
  .sec__title{font-size:26px}
  .sec__head{margin-bottom:32px}
}

/* ===== 제목 스타일 =====
 *
 * 기본(A)은 위의 .sec__title::after 언더바.
 * body 에 title-b · title-c 를 붙이면 전 섹션이 한 번에 바뀐다.
 *
 * ⚠️ 위 기본 규칙을 고치지 않는다. 여기서 덮어쓰기만 한다.
 *    53개 사이트는 클래스가 없으므로 지금과 완전히 동일하게 동작한다.
 * ⚠️ 섹션 CSS 를 건드리지 않는다. 제목은 독립된 축이다.
 */

/* B — 언더바 없음. eyebrow 를 알약으로 */
.title-b .sec__title::after{display:none}

.title-b .sec__eyebrow{
  display:inline-block;
  margin-bottom:14px;
  padding:6px 16px;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--c-primary);
  background:var(--c-primary-l);
  border-radius:999px;
}

/* C — 왼쪽 정렬 + 세로 라인 */
.title-c .sec__head{
  text-align:left;
  padding-left:22px;
  border-left:3px solid var(--c-primary);
}
.title-c .sec__title::after{display:none}
.title-c .sec__eyebrow{margin-bottom:10px}
.title-c .sec__desc{margin-top:12px}

/* D — 언더바를 얇고 길게. 제목 위로 */
.title-d .sec__title::after{
  width:100%;max-width:180px;
  height:1px;
  margin-top:24px;
  opacity:.5;
}
.title-d .sec__eyebrow{letter-spacing:.2em}