/* 부모 그리드는 너비가 최소 300px부터 자동으로 열이 추가되는 구조로 설정 */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* 각 위젯 컨테이너 - Container Queries 활성화 */
.widget {
  display: grid;
  container-type: inline-size;
  border: 1px solid #ddd;
  padding: 10px;
}

/* 위젯 내부의 body 부분에 subgrid 적용 */
.widget-body {
  display: grid;
  grid-template-columns: subgrid; /* 부모 그리드 열 설정을 그대로 상속 */
  grid-column: span 2; /* 부모의 열을 모두 차지하도록 설정 */
  gap: 8px;
}

/* 위젯 헤더는 body와 별개로 상단에 위치, 전체 열 차지 */
.widget-header {
  font-size: 18px;
  font-weight: bold;
  grid-column: span 2;
}

/* 차트와 요약 부분은 박스만 표현 */
.chart {
  background-color: #f3f3f3;
  height: 80px;
}

.summary {
  background-color: #e3e3e3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 위젯이 넓어질 때 (400px 이상), 차트와 요약을 나란히 배치 */
@container (min-width: 400px) {
  .widget-body {
    grid-template-columns: 2fr 1fr;
  }
}

/* 위젯이 좁을 때 (399px 이하), 차트와 요약을 세로로 배치 */
@container (max-width: 399px) {
  .widget-body {
    grid-template-columns: 1fr;
  }
}