@charset "UTF-8";
.grid-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 15rem;
}

.applygrid-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  /*min-height: 15rem;*/
}

.applygrid-row {
    display: grid;
    /*grid-template-columns: 1fr 2fr 2fr 1fr 1fr 2fr 1fr;*/
    padding: 10px;
    border-bottom: 1px solid #ddd;
    align-items: center;
    gap: 10px;
}

.applygrid-row:hover{
	background-color: rgba(24, 144, 255, 0.03);
}

.applygrid-columns {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    align-items: center;
    gap: 10px;
}

.modalgrid-row {
    display: grid;
    /*grid-template-columns: 1fr 2fr 2fr 1fr 1fr 2fr 1fr;*/
    padding: 10px;
    border-bottom: 1px solid #ddd;
    align-items: center;
    gap: 10px;
}

.modalgrid-row:hover{
	background-color: rgba(24, 144, 255, 0.03);
}

.modalgrid-columns {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    align-items: center;
    gap: 10px;
}

/* colspan 역할 */
.rowspan-2 {
  grid-row: span 2;
}

.colspan-div2to3 {
  grid-column: 2 / span 3; /* 2번째 칸부터 3칸 차지 (colspan=3 효과) */
  background: #f8f9fa;
  padding: 5px;
}
.colspan-div1to3 {
  grid-column: 1 / span 3; /* 1번째 칸부터 3칸 차지 (colspan=3 효과) */
  background: #f8f9fa;
  padding: 5px;
}
.colspan-div1to4 {
  grid-column: 1 / span 4; /* 1번째 칸부터 4칸 차지 (colspan=4 효과) */
  background: #f8f9fa;
  padding: 5px;
}

.colspan-div2to4 {
  grid-column: 2 / span 4; /* 1번째 칸부터 4칸 차지 (colspan=4 효과) */
/*  background: #f8f9fa;*/
  padding: 5px;
}

.colspan-div1to5 {
  grid-column: 1 / span 5; /* 1번째 칸부터 5칸 차지 (colspan=5 효과) */
  padding: 5px;
}

.colspan-div1to7 {
  grid-column: 1 / span 7; /* 1번째 칸부터 5칸 차지 (colspan=7 효과) */
  padding: 5px;
}

.grid-row-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.grid-row-5.header {
  background-color: #f5f5f5;
  font-weight: bold;
  
}

.grid-row80w-6 {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) repeat(6, 1fr);
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.grid-row.header {
  background-color: #f5f5f5;
  font-weight: bold;
}

.applygrid-row.header {
  background-color: #f5f5f5;
  font-weight: bold;
  text-align: center;
}

.modalgrid-row.header {
  background-color: #f5f5f5;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 768px) {
  .grid-row {
    grid-template-columns: 1fr; /* 한 줄씩 세로 정렬 */
  }
  .grid-row.header {
    display: none; /* 모바일에서 헤더 숨김 */
  }
  .grid-row > div::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    color: #555;
  }
  
  .applygrid-row {
    grid-template-columns: 1fr; /* 한 줄씩 세로 정렬 */
  }
  .applygrid-row.header {
    display: none; /* 모바일에서 헤더 숨김 */
  }
  .applygrid-row > div::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    color: #555;
  }
  
  .modalgrid-row {
    grid-template-columns: 1fr; /* 한 줄씩 세로 정렬 */
  }
  .modalgrid-row.header {
    display: none; /* 모바일에서 헤더 숨김 */
  }
  .modalgrid-row > div::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    color: #555;
  }   
}