/* =========================================
   역량평가 항목 등록 (구분 / 역량 / 기준)
   ========================================= */

/* 컨테이너 기본 */
.competency-item-container{
  padding: .5rem 0 1.25rem;
}

/* 3단 레이아웃: 구분 / 역량 / 상세+기준 */
.competency-layout{
  display: grid;
  grid-template-columns: 220px minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: .75rem;
  align-items: flex-start;
}

@media (max-width: 1280px){
  .competency-layout{
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .competency-layout .panel-detail{
    grid-column: 1 / -1;  /* 상세는 한 줄 전체 */
  }
}

@media (max-width: 992px){
  .competency-layout{
    grid-template-columns: minmax(0, 1fr);
  }
  .competency-layout > .panel{
    grid-column: 1 / -1;
  }
}

/* 공통 패널 UI */
.competency-layout .panel{
  background:#fff;
  border:1px solid var(--clr-border-soft);
  border-radius: .5rem;
  box-shadow: var(--shadow-1);
  display:flex;
  flex-direction:column;
  min-height: 260px;
  overflow:hidden;
}

.competency-layout .panel-header{
  padding:.45rem .75rem;
  border-bottom:1px solid var(--clr-border-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f8fafc;
}

.competency-layout .panel-header h3{
  margin:0;
  font-size:.9375rem;
  font-weight:700;
  color:var(--clr-text);
}

.competency-layout .panel-header .sub-label{
  margin-left:.35rem;
  font-size:.8125rem;
  color:var(--clr-muted);
}

.competency-layout .panel-body{
  padding:.5rem .75rem .75rem;
  flex:1;
  overflow:auto;
}

.competency-layout .panel-footer{
  padding:.25rem .75rem .5rem;
  border-top:1px solid var(--clr-border-soft);
}

/* ==========================
   1) 검색 영역 보조 스타일
   ========================== */

.competency-item-container .bottom-container-search{
  margin-bottom:.5rem;
}

/* 검색 form은 기존 .bottom-container-search CSS 그대로 사용 */

/* ==========================
   2) 구분 / 역량 목록 테이블
   ========================== */

.panel-group-list table,
.panel-competency-list table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.875rem;
}

.panel-group-list thead th,
.panel-competency-list thead th{
  padding:.5rem .35rem;
  white-space:nowrap;
  text-align:center;
  background:#f4f6fb;
  border-bottom:1px solid #e3e7f0;
  font-weight:700;
}

.panel-group-list tbody td,
.panel-competency-list tbody td{
  padding:.45rem .35rem;
  border-top:1px solid #f0f2f6;
  white-space:nowrap;
  text-align:center;
}

.panel-group-list tbody tr:nth-child(even) td,
.panel-competency-list tbody tr:nth-child(even) td{
  background:#fafbff;
}

.panel-group-list tbody tr:hover td,
.panel-competency-list tbody tr:hover td{
  background:#eef3ff;
  cursor:pointer;
}

/* 선택된 행 하이라이트 */
#group-table tbody tr.selected td,
#competency-table tbody tr.selected td{
  background:#e0ecff !important;
  font-weight:600;
}

/* ‘정의 요약’ 같이 긴 텍스트는 좌측 정렬 + 말줄임 */
.panel-competency-list td:nth-child(4){
  text-align:left;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ==========================
   3) 상세 패널 (역량 + 기준)
   ========================== */

.panel-detail .detail-header{
  /* header는 .panel-header와 동일, 별도 조정 필요시 사용 */
}

.panel-detail .detail-actions{
  display:flex;
  gap:.35rem;
}

/* 상세 본문 스크롤 */
.panel-detail .detail-body{
  padding:.5rem .75rem .75rem;
  flex:1;
  overflow:auto;
}

/* 섹션 타이틀 */
.section-basic,
.section-criteria{
  margin-bottom:1rem;
}

.section-basic h4,
.section-criteria h4{
  margin:0 0 .5rem;
  font-size:.9rem;
  font-weight:700;
  color:var(--clr-text);
}

/* 섹션 헤더 (타이틀 + [+ 기준 추가] 버튼) */
.section-criteria .section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.35rem;
}

/* ==========================
   4) 폼 그리드 / 요소 배치
   ========================== */

.form-grid{
  display:grid;
  gap:.75rem 1rem;
}

.form-grid.two-column{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid .form-group{
  margin:0;  /* 기존 .form-group와 병행 사용 */
}

.form-group.full-width{
  grid-column:1 / -1;
}

/* detail 영역 input 공통 */
.panel-detail .form-group label{
  display:block;
  margin-bottom:.2rem;
  font-size:.8125rem;
  font-weight:600;
}

.panel-detail .form-group .form-control,
.panel-detail .form-group input[type="text"],
.panel-detail .form-group input[type="number"],
.panel-detail .form-group textarea{
  width:100%;
  border:1px solid var(--clr-border);
  border-radius:var(--radius-xs);
  padding:.45rem .55rem;
  font-size:.875rem;
}

/* 라디오 그룹 */
.radio-group{
  display:flex;
  align-items:center;
  gap:1.25rem;
}
.radio-group label{
  font-weight:500;
  font-size:.875rem;
}

/* 정의 textarea: auto-grow 전제 기본 높이/최대 높이 */
textarea.auto-grow{
  min-height:3.125rem;   /* 3줄 정도 */
  max-height:9rem;       /* 대략 5~6줄 */
  resize:vertical;       /* 필요시 수동 조정도 허용 */
}

/* ==========================
   5) 역량평가 기준 테이블
   ========================== */

#criteria-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.875rem;
}

#criteria-table thead th{
  padding:.45rem .4rem;
  text-align:center;
  background:#f4f6fb;
  border-bottom:1px solid #e3e7f0;
  white-space:nowrap;
}

#criteria-table tbody td{
  padding:.4rem .4rem;
  border-top:1px solid #f0f2f6;
  vertical-align:top;
}

#criteria-table tbody tr:nth-child(even) td{
  background:#fafbff;
}

#criteria-table input.criteria-no{
  width:80px;
  text-align:center;
}

#criteria-table textarea.criteria-text{
  width:100%;
  min-height:2.5rem;
  resize:vertical;
}

#criteria-table .btn-delete-criteria{
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid #f5b5b5;
  background:#fff1f1;
  font-size:.8rem;
  color:#d63333;
  cursor:pointer;
}

#criteria-table .btn-delete-criteria:hover{
  background:#ffe2e2;
}

/* 도움말 텍스트 */
.section-criteria .help-text,
.section-basic .help-text{
  margin-top:.25rem;
  font-size:.75rem;
  color:var(--clr-muted);
}