/* ========================================
   CMS Grid System - Grid Layout Styles
   ======================================== */

/* Rowspan utilities */
.rowspan-2 { grid-row: span 2; }
.rowspan-3 { grid-row: span 3; }
.rowspan-4 { grid-row: span 4; }
.rowspan-5 { grid-row: span 5; }
.rowspan-6 { grid-row: span 6; }

/* Grid container */
.grid-container {
  display: grid;
  /* 동적 컬럼 수: --grid-columns CSS 변수로 제어 (기본 12) */
  grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
  grid-template-rows: repeat(var(--grid-rows, 2), 1fr);
  grid-auto-flow: row;
  align-items: stretch;
  gap: var(--grid-gap, 1.25rem);
  margin-bottom: 1rem;
  min-height: 400px;
}

/* CSS Grid 모드 전용 애니메이션 (grid-column 변경 시 transition) */
.grid-container .grid-item {
  transition: grid-column 250ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 250ms ease-in-out;
}

/* Unified Grid Container: 여러 row에 걸친 단일 그리드 */
.unified-grid-container {
  /* grid-template-rows를 명시하지 않고, 자동으로 필요한 행 생성 */
  /* 명시적 위치 지정(grid-row)이 있으면 자동으로 행이 생성됨 */
  grid-template-rows: none;
  grid-auto-rows: minmax(200px, auto);
  min-height: auto;
}

.grid-item,
.grid-item-placeholder {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Ensure immediate children fill the grid track height */
.grid-item > * {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* grid-item 내부의 카드들이 전체 높이를 차지하도록 */
.grid-item .card-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-item .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-item .card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Colspan utilities */
.colspan-1 { grid-column: span 1; }
.colspan-2 { grid-column: span 2; }
.colspan-3 { grid-column: span 3; }
.colspan-4 { grid-column: span 4; }
.colspan-5 { grid-column: span 5; }
.colspan-6 { grid-column: span 6; }
.colspan-7 { grid-column: span 7; }
.colspan-8 { grid-column: span 8; }
.colspan-9 { grid-column: span 9; }
.colspan-10 { grid-column: span 10; }
.colspan-11 { grid-column: span 11; }
.colspan-12 { grid-column: span 12; }

/* Rowspan items height adjustments */
.grid-item.rowspan-2 { display: flex; flex-direction: column; }
.grid-item.rowspan-2 .card,
.grid-item.rowspan-3 .card,
.grid-item.rowspan-4 .card,
.grid-item.rowspan-5 .card,
.grid-item.rowspan-6 .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-item.rowspan-2 .card-body,
.grid-item.rowspan-3 .card-body,
.grid-item.rowspan-4 .card-body,
.grid-item.rowspan-5 .card-body,
.grid-item.rowspan-6 .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}

/* ========================================
   반응형 그리드 조정
   ======================================== */

/* 태블릿 (992px 이하) */
@media (max-width: 992px) {
  .unified-grid-container {
    --grid-columns: 12;
  }

  /* CSS Grid 명시적 위치 지정 유지 (Bootstrap 클래스 없음) */
  .unified-grid-container .grid-item[style*="grid-column"] {
    max-width: 100%;
    min-width: 0;
  }
}

/* 태블릿 가로 (768px ~ 992px) */
@media (max-width: 992px) and (min-width: 769px) {
  .unified-grid-container {
    --grid-columns: 12;
  }

  /* 좁은 화면에서는 grid-column 범위 조정 */
  .unified-grid-container .grid-item {
    min-width: 0;
  }

  /* .grid-container 태블릿: 2컬럼으로 조정 */
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    --grid-columns: 2;
  }
}

/* 태블릿 세로 및 모바일 가로 (768px 이하) */
@media (max-width: 768px) {
  /* 모바일에서 그리드 시스템 컨테이너 하단 여백 확보 */
  .grid-system-container {
    padding-bottom: var(--grid-gap, 1.25rem);
  }

  .unified-grid-container {
    --grid-columns: 12;
    /* CSS Grid를 유지하되, Bootstrap 클래스가 우선 적용되도록 */
    grid-template-columns: repeat(12, 1fr);
  }

  /* 반응형 모드: Bootstrap Grid로 전환 */
  .unified-grid-container.responsive-mode {
    display: flex; /* Bootstrap row는 flexbox 사용 */
    flex-wrap: wrap;
    margin-left: calc(var(--bs-gutter-x, 0.75rem) * -0.5);
    margin-right: calc(var(--bs-gutter-x, 0.75rem) * -0.5);
  }

  .unified-grid-container.responsive-mode .grid-item {
    display: block;
    /* CSS Grid 명시적 위치 제거 */
    grid-column: unset !important;
    grid-row: unset !important;
    padding-left: calc(var(--bs-gutter-x, 0.75rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 0.75rem) * 0.5);
    margin-bottom: 1rem;
  }

  /* Bootstrap 클래스가 적용된 경우 해당 클래스의 너비 사용 */
  /* Bootstrap 클래스가 자동으로 너비를 설정하므로 별도 스타일 불필요 */

  /* rowspan 효과 제거 */
  .unified-grid-container.responsive-mode .grid-item.rowspan-2,
  .unified-grid-container.responsive-mode .grid-item.rowspan-3,
  .unified-grid-container.responsive-mode .grid-item.rowspan-4 {
    grid-row: unset;
  }

  /* .grid-container 모바일 반응형: 1컬럼으로 변경 */
  .grid-container {
    grid-template-columns: repeat(1, 1fr) !important;
    --grid-columns: 1;
    min-height: auto;
  }

  /* 모바일에서 모든 grid-item을 전체 너비로 */
  .grid-container .grid-item {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  /* rowspan 클래스 제거 (모바일에서는 수직으로 쌓임) */
  .grid-container .grid-item[class*="rowspan-"] {
    grid-row: span 1 !important;
  }
}

/* 모바일 (576px 이하) */
@media (max-width: 576px) {
  .unified-grid-container {
    --grid-columns: 12;
    gap: var(--grid-gap, 1.25rem);
  }

  /* Bootstrap Grid로 전환 - flexbox 유지 */
  .unified-grid-container.responsive-mode {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--bs-gutter-x, 0.75rem) * -0.5);
    margin-right: calc(var(--bs-gutter-x, 0.75rem) * -0.5);
  }

  .unified-grid-container.responsive-mode .grid-item {
    display: block;
    padding-left: calc(var(--bs-gutter-x, 0.75rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 0.75rem) * 0.5);
    margin-bottom: 0.75rem;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* 모바일에서는 기본적으로 전체 너비 */
  .unified-grid-container.responsive-mode .grid-item:not([class*="col-"]) {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid-container {
    gap: var(--grid-gap, 1.25rem);
    grid-template-columns: repeat(1, 1fr) !important;
    --grid-columns: 1;
    min-height: auto;
  }

  /* 모바일에서 모든 grid-item을 전체 너비로 */
  .grid-container .grid-item {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    width: 100%;
  }

  /* rowspan 클래스 제거 (모바일에서는 수직으로 쌓임) */
  .grid-container .grid-item[class*="rowspan-"] {
    grid-row: span 1 !important;
  }
}

/* 매우 작은 화면 (480px 이하) */
@media (max-width: 480px) {
  .unified-grid-container {
    gap: var(--grid-gap, 1.25rem);
  }

  .grid-container {
    gap: var(--grid-gap, 1.25rem);
    grid-template-columns: repeat(1, 1fr) !important;
    --grid-columns: 1;
  }

  /* 모바일에서 모든 grid-item을 전체 너비로 */
  .grid-container .grid-item {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    width: 100%;
  }

  /* rowspan 클래스 제거 (모바일에서는 수직으로 쌓임) */
  .grid-container .grid-item[class*="rowspan-"] {
    grid-row: span 1 !important;
  }
}




/* Grid spacing */
.grid-container {
  gap: var(--grid-gap, 1.25rem);
}

/* 그리드 시스템 컨테이너도 gap 사용 */
.grid-system-container {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap, 1.25rem);
  padding-bottom: var(--grid-gap, 1.25rem); /* 하단 여백 추가 */
}

/* Bootstrap Grid Mode - Column Item (JavaScript 마커 클래스) */
/* grid-col-item은 JavaScript에서 Bootstrap 클래스를 동적으로 적용하기 위한 마커 클래스입니다. */
/* 실제 레이아웃은 Bootstrap의 col-* 클래스들이 처리하므로 별도 스타일 불필요. */
/* 필요시 공통 스타일 추가 가능 */
.grid-col-item {
  padding: 0;
}

/* Bootstrap Grid 모드의 row도 gap 사용 (중첩 여부와 관계없이 통일된 여백) */
.row.mb-3 {
  margin-bottom: 0 !important;
  margin-left: calc(var(--grid-gap, 1.25rem) * -0.5);
  margin-right: calc(var(--grid-gap, 1.25rem) * -0.5);
  gap: var(--grid-gap, 1.25rem) 0; /* row gap: 세로 여백, col gap: 가로 여백 */
}

/* row 내부의 col에 gap 기반 padding 적용 */
.row.mb-3 > .grid-col-item {
  padding-left: calc(var(--grid-gap, 1.25rem) * 0.5);
  padding-right: calc(var(--grid-gap, 1.25rem) * 0.5);
}

/* 중첩된 그리드 내부의 row도 동일한 gap 사용 (여백 누적 방지) */
.grid-system-container .row.mb-3,
.grid-item .row.mb-3,
.grid-col-item .row.mb-3,
.grid-container .row.mb-3 {
  margin-bottom: 0 !important;
  margin-left: calc(var(--grid-gap, 1.25rem) * -0.5);
  margin-right: calc(var(--grid-gap, 1.25rem) * -0.5);
  gap: var(--grid-gap, 1.25rem) 0; /* row gap: 세로 여백, col gap: 가로 여백 */
}

/* 중첩된 그리드 시스템 컨테이너 내부의 row도 동일한 gap 사용 */
.grid-system-container .grid-system-container .row.mb-3,
.grid-item .grid-system-container .row.mb-3,
.grid-col-item .grid-system-container .row.mb-3 {
  margin-bottom: 0 !important;
  margin-left: calc(var(--grid-gap, 1.25rem) * -0.5);
  margin-right: calc(var(--grid-gap, 1.25rem) * -0.5);
  gap: var(--grid-gap, 1.25rem) 0; /* row gap: 세로 여백, col gap: 가로 여백 */
}

/* 중첩된 그리드 컨테이너 내부의 row도 동일한 gap 사용 */
.grid-system-container .grid-container .row.mb-3,
.grid-item .grid-container .row.mb-3,
.grid-col-item .grid-container .row.mb-3 {
  margin-bottom: 0 !important;
  margin-left: calc(var(--grid-gap, 1.25rem) * -0.5);
  margin-right: calc(var(--grid-gap, 1.25rem) * -0.5);
  gap: var(--grid-gap, 1.25rem) 0; /* row gap: 세로 여백, col gap: 가로 여백 */
}

/* 중첩된 row 내부의 col에도 동일한 gap 기반 padding 적용 */
.grid-system-container .row.mb-3 > .grid-col-item,
.grid-item .row.mb-3 > .grid-col-item,
.grid-col-item .row.mb-3 > .grid-col-item,
.grid-container .row.mb-3 > .grid-col-item {
  padding-left: calc(var(--grid-gap, 1.25rem) * 0.5);
  padding-right: calc(var(--grid-gap, 1.25rem) * 0.5);
}

/* ========================================
   Unified Bootstrap Grid - Rowspan 지원
   ======================================== */
.unified-bootstrap-grid {
  position: relative;
}

.unified-bootstrap-row {
  position: relative;
}

.unified-rowspan-item {
  /* rowspan 요소는 position: absolute로 여러 row에 걸쳐 배치 */
  position: absolute;
  z-index: 1;
  height: auto;
  min-height: 200px;
}

.unified-rowspan-placeholder {
  /* rowspan 요소가 차지할 공간을 유지하기 위한 placeholder */
  /* 실제 공간을 차지하되 내용은 보이지 않음 */
  visibility: hidden;
  min-height: 200px; /* 최소 높이로 공간 유지 */
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  pointer-events: none;
}

/* ========================================
   반응형 애니메이션 스타일 (ResponsiveAnimator용)
   ======================================== */

/* 필수 CSS - simpleResponsiveAnimation.js에서 사용 */
/* ResponsiveAnimator가 적용되는 경우에만 사용 */
.grid-container {
  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.grid-container .card {
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              width 250ms cubic-bezier(0.4, 0, 0.2, 1),
              height 250ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 250ms ease-in-out;
  will-change: transform;
}