/* ========== 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; }

/* 초협소 화면 보호(원하면 유지/삭제) */
@media (max-width: 560px){
  #s3-frame{ aspect-ratio:auto; }
  #s3-grid.s3__grid{
    grid-template-columns: 1fr;
    grid-auto-rows: 28vh;
    padding: 8px;
    gap: 8px;
  }
  #s3-grid .s3-card{ grid-area:auto !important; }
}