/* ==========================================================================
📁 common_sections.css
📌 모든 CMS 콘텐츠 페이지 공통 스타일
작성 목적: page-title, section-heading, 공통 구조 정리
========================================================================== */

p {
  font-size: 14px;
  font-weight: 400;
  color: #444;
  line-height: 1.6;
  margin-bottom: 16px;
}
.page-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  color: #111;
}

/* 공통 기본값 */
section {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section-heading {
  font-size: 20px;
  margin: 35px 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-heading i {
  font-size: 15px;
  color: #1f3c88;
  position: relative;
  top: -0.1em;
}

.page-wrapper p,
.page-wrapper li {
  font-size: 16px;
  line-height: 1.7;
}

.page-wrapper img {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  border-radius: 8px;
}

/* ✅ AOS GPU 가속 처리 */
/* GPU 힌트만 주고, 속성값은 건드리지 않기 */
[data-aos] { will-change: transform, opacity; backface-visibility: hidden; }

/* 반드시 필요하면 '애니메이션이 끝난 상태'만 보정 */
.aos-animate { will-change: auto; }
/* 또는 특정 컴포넌트 범위만 제한적으로 */
.section-heading:not([data-aos]) { transform: translateZ(0); } /* 범위 축소 */


/* ✅ 동영상 삽입용 블록 */
.video-block {
  margin: 30px 0;
}
.video-block iframe {
  width: 100%;
  max-width: 100%;
  height: 300px;
  border: none;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .video-block iframe {
    height: 420px;
  }
}
.video-title {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  margin: 8px 0;
  color: #222;
}

/* 터치 상하 경계에서의 바운스 효과 제거 */
html, body {
  overscroll-behavior: none;        /* 모든 방향 바운스 방지 */
  -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
  touch-action: pan-y;               /* 가로 스와이프를 부드럽게 허용 */
}
.scroll-lock-x {
  overflow-x: auto;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}