/* ========== SECTION3 안정화 ========== */
#section3.s3{
  /* 조절 노브 */
  --padX: 0px;  /* 좌우 바깥선 두께 */
  --padT: 7px;  /* 위 바깥선 */
  --padB: 0px;  /* ↓ 바깥선(= “상자 밑 공간”) */
  --gap: 7px;   /* 박스 사이 간격(안쪽 선 두께) */

  --tile: #d4d4d4;  /* 박스 색 */
  --line: #fff;  /* 선 색 */

  /* 다른 전역 스타일 무력화 */
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important; /* 100vh 류 제거 */
}

/* 16:9 프레임: aspect-ratio만 사용 (가장 안정적) */
#s3-frame{
  position: relative;
  width: 100%;
  background: var(--line);
  aspect-ratio: 16 / 9;
}

/* 혹시 이전 폴백이 남아 있으면 강제로 끔 */
#s3-frame::before{ display:none !important; }

/* 프레임을 꽉 채우는 5×2 그리드 */
#s3-grid.s3__grid{
  position: absolute;
  inset: 0; /* 프레임 전체 차지 */
  /* 바깥선 두께 = padding, 안쪽선 = gap */
  padding: var(--padT) var(--padX) var(--padB) var(--padX);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--gap);
  background: var(--line);
  box-sizing: border-box;
}

/* 카드(텍스트 없음) */
#s3-grid .s3-card{
  background: var(--tile);
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

/* ===== 정확한 위치/크기 ===== */
/* #1: 2×2 (cols 1–2, rows 1–2) */
#s3-grid .s3-card:nth-child(1){ grid-column:1 / span 2; grid-row:1 / span 2; }
/* #2: 2×1 (cols 3–4, row 1) */
#s3-grid .s3-card:nth-child(2){ grid-column:3 / span 2; grid-row:1; }
/* #3: 1×1 (col 5, row 1) */
#s3-grid .s3-card:nth-child(3){ grid-column:5; grid-row:1; }
/* #4: 1×1 (col 3, row 2) */
#s3-grid .s3-card:nth-child(4){ grid-column:3; grid-row:2; }
/* #5: 2×1 (cols 4–5, row 2) */
#s3-grid .s3-card:nth-child(5){ grid-column:4 / span 2; grid-row:2; }


/* === 초소형 화면: frame을 흐름으로, 카드별 가로기준 비율 유지 === */
@media (max-width: 560px){
  /* 섹션3 자체는 절대 사라지지 않도록 안전핀 */
  #section3{
    display: block !important;
    position: relative;
    z-index: 1;
    min-height: 1px;     /* collapse 방지 */
    padding: 8px 0;
  }

  /* 🔧 프레임: 16:9 고정 해제 + 흐름 높이로 전환 */
  #s3-frame{
    aspect-ratio: auto !important;
    height: auto !important;
    background: transparent;
    position: relative; /* (기본 유지) */
  }

  /* 🔧 그리드: absolute 해제 → 정상 흐름으로 쌓이게 */
  #s3-grid.s3__grid{
    position: static !important;    /* absolute → static */
    inset: auto !important;
    display: block !important;      /* grid → block (줄깨짐/행높이 이슈 제거) */
    padding: 8px;
    background: transparent;
    box-sizing: border-box;
  }

  /* 카드 박스: ::before 패딩으로 부모 자체 높이 생성 (가로폭=100% 기준) */
  #s3-grid .s3-card{
    position: relative;
    width: 100%;
    margin: 0 0 8px;
    overflow: hidden;
    background: #e5e5e5;
    aspect-ratio: auto !important;  /* 다른 브레이크포인트의 aspect-ratio 무력화 */
  }
  #s3-grid .s3-card::before{
    content: "";
    display: block;
    padding-top: var(--pr, 56.25%); /* 기본 16:9 */
  }

  /* 카드 내부 미디어를 박스에 맞춤 */
  #s3-grid .s3-card > img,
  #s3-grid .s3-card picture,
  #s3-grid .s3-card video,
  #s3-grid .s3-card canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ✅ 카드별 비율값: data-id, nth-child 둘 다 매핑 (둘 중 하나만 있어도 동작) */
  /* padding-top% = 100 * (세로/가로) */
  #s3-grid .s3-card[data-id="1"], #s3-grid .s3-card:nth-child(1){ --pr: 66.666%; } /* 3:2 */
  #s3-grid .s3-card[data-id="2"], #s3-grid .s3-card:nth-child(2){ --pr: 150%;   } /* 2:3 */
  #s3-grid .s3-card[data-id="3"], #s3-grid .s3-card:nth-child(3){ --pr: 56.25%; } /* 16:9 */
  #s3-grid .s3-card[data-id="4"], #s3-grid .s3-card:nth-child(4){ --pr: 100%;  } /* 1:1 */
  #s3-grid .s3-card[data-id="5"], #s3-grid .s3-card:nth-child(5){ --pr: 75%;   } /* 4:3 */

  /* Section4/Contact는 section3 뒤에 정상적으로 이어지도록 */
  #section3 + #section4{ margin-top: -8px; position: relative; z-index: 0; }
}