/* ===================================
   Comparison Section Styles
   =================================== */

/* === 섹션 기본 배경 및 패딩 === */
section.comparison{
  padding: 40px 0;
  background-image: url('../images/comparison_bg.png') !important;
  background-position: center top !important;
  background-repeat: no-repeat !important; /* [수정] !important 오타 수정 */
  background-size: cover !important;
  overflow-x: clip; /* 자식 요소가 화면 밖으로 나가는 것을 방지 */
  position: relative;
}

/* 모바일 전용 배경 이미지 */
@media (max-width: 911px){
  section.comparison{
    background-image: url('../images/comparison_m_bg.png') !important;
    padding-top: 60px; /* 라벨 아래 콘텐츠 시작을 위한 상단 패딩 */
  }
}

/* === 문구, 이미지 간격 및 색상 변수 === */
:root {
  /* PC */
  --cmp-l1-size-pc: 2.4rem;
  --cmp-l2-size-pc: 1.6rem;
  --cmp-intro-gap-pc: 120px; /* 문단과 이미지 테이블 사이 간격 */
  --cmp-l1-l2-gap-pc: 30px;   /* PC: 1번 문구와 2번 문구 사이 간격 */
  --cmp-l1-color-pc: hsl(0, 0%, 100%);
  --cmp-l2-color-pc: hsl(0, 0%, 100%);
  --cmp-highlight-color: #000000;

  /* Mobile */
  --cmp-l1-size-mo: 1.6rem;
  --cmp-l2-size-mo: 1.2rem;
  --cmp-intro-gap-mo: 30px; /* 문단과 이미지 테이블 사이 간격 */
  --cmp-l1-l2-gap-mo: 10px;   /* Mobile: 1번 문구와 2번 문구 사이 간격 */
  --cmp-l1-color-mo: hsl(0, 0%, 100%);
  --cmp-l2-color-mo: hsl(0, 0%, 100%);
}

/* === 문단(인트로 텍스트) 공통 스타일 === */
.comparison .container {
  text-align: center;
}

.comparison .comp-intro-line1 b {
  background: var(--cmp-highlight-color);
  padding: 0 4px;
}

/* === PC 스타일 (912px 이상) === */
@media (min-width: 912px) {
  .comparison .mobile-only { display: none !important; }

  .comparison > .container {
    margin-bottom: var(--cmp-intro-gap-pc);
  }

  .comparison .pc-only.comp-intro-line1 {
    font-size: var(--cmp-l1-size-pc);
    color: var(--cmp-l1-color-pc);
    font-weight: 800;
    line-height: 1.3;
    margin: 20px 0 var(--cmp-l1-l2-gap-pc); /* 라벨과의 간격을 위해 상단 마진 추가 */
  }
  .comparison .pc-only.comp-intro-line2 {
    font-size: var(--cmp-l2-size-pc);
    color: var(--cmp-l2-color-pc);
    line-height: 1.6;
    margin: 0;
  }
}

/* === 모바일 & 태블릿 스타일 (911px 이하) === */
@media (max-width: 911px) {
  .comparison .pc-only { display: none !important; }

  .comparison > .container {
    margin-bottom: var(--cmp-intro-gap-mo);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .comparison .mobile-only.comp-intro-line1,
  .comparison .mobile-only.comp-intro-line2 {
    display: block;
    max-width: 90%;
  }

  .comparison .mobile-only.comp-intro-line1 {
    font-size: var(--cmp-l1-size-mo);
    color: var(--cmp-l1-color-mo);
    font-weight: 700;
    line-height: 1.35;
    margin: 20px 0 var(--cmp-l1-l2-gap-mo); /* 라벨과의 간격을 위해 상단 마진 추가 */
  }
  .comparison .mobile-only.comp-intro-line2 {
    font-size: var(--cmp-l2-size-mo);
    color: var(--cmp-l2-color-mo);
    line-height: 1.4;
  }
}

/* === 비교표 이미지 프레임 스타일 === */
:root {
  --comparison-max: 1500px;
  --cmp-ratio-pc: 4/3;
  --cmp-ratio-mo: 3/4;
}

.comparison-frame {
  width: min(100%, var(--comparison-max));
  margin-inline: auto;
}

.comparison-stack {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cmp-ratio-pc);
  height: auto;
  margin: 0 auto;
}

@media (max-width: 911px) {
  .comparison-stack {
    aspect-ratio: var(--cmp-ratio-mo);
  }
}

/* 새로운 간단한 구조 */
.comparison-stack {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cmp-ratio-pc);
  height: auto;
  margin: 0 auto;
}

.comparison-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.comparison-overlay {
  position: absolute;
  top: -2%;
  left: 0;
  width: 100%;
  height: 104%;
  z-index: 2;
  pointer-events: none;
}

/* 모바일에서 강제 적용 */
@media (max-width: 911px) {
  .comparison-overlay {
    top: -0.5% !important;
    height: 101% !important;
  }
}

.comparison-bg img,
.comparison-overlay img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

@media (max-width: 911px) {
  .comparison-stack {
    aspect-ratio: var(--cmp-ratio-mo);
  }
  
  .comparison-overlay img {
    width: 100% !important;
    height: 101% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }
}
/* =========================================================
 * 추가: Comparison 섹션 스크롤 애니메이션
 * ========================================================= */

/* --- 1. 애니메이션 시작 전 (초기 숨김 상태) --- */

.comparison .comp-intro-line1,
.comparison .comp-intro-line2 {
  opacity: 0;
  will-change: opacity, transform; /* 애니메이션 성능 최적화를 위한 힌트 */
}

/* line1은 살짝 위로 이동시켜 놓습니다. */
.comparison .comp-intro-line1 {
  transform: translateY(-20px);
  /* opacity와 transform이 0.7초 동안 부드럽게 변하도록 설정 */
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* line2는 제자리에서 서서히 나타나도록 설정 */
.comparison .comp-intro-line2 {
  transition: opacity 0.8s ease;
}

/* --- 2. 비교표 애니메이션 초기 상태 --- */
.comparison-frame {
  opacity: 0;
  will-change: opacity, transform;
}

.comparison-bg {
  transform: translateY(100%);
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.comparison-overlay {
  opacity: 0;
  transition: opacity 1s ease 0.6s; /* 0.6초 지연 후 페이드인 */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(4px 0 8px rgba(0, 0, 0, 0.2));
}


/* --- 3. 애니메이션 최종 상태 (화면에 나타났을 때) --- */

/* .cmp-show 클래스가 추가되면 이 스타일이 적용됩니다. */
.comparison .comp-intro-line1.cmp-show,
.comparison .comp-intro-line2.cmp-show {
  opacity: 1;
  transform: translateY(0); /* 원래 위치로 복귀 */
}

.comparison-frame.cmp-show {
  opacity: 1;
}

.comparison-frame.cmp-show .comparison-bg {
  transform: translateY(0);
}

.comparison-frame.cmp-show .comparison-overlay {
  opacity: 1;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(4px 0 8px rgba(0, 0, 0, 0.2));
}