/* ===========================================
   modal-select-child.css
   자녀 선택 모달(.child-list) 전용 보강 스타일

   - 기존 modal.css / label.css 의 클래스(.child-list, .child-list-item,
     .info, .label, .btn 등)는 그대로 재사용합니다.
   - 이 파일은 modal.css 보다 "뒤에" 로드되어 일부 규칙을 덮어쓰는
     용도이므로, 항상 .child-list 로 시작하는 셀렉터로 범위를 한정해
     다른 화면(다른 모달, 리스트 등)에 영향이 가지 않도록 했습니다.
   - 신규로 추가한 클래스명(child-top, label-groups, label-group,
     group-tit, label-wrap, badge-primary, edu-year)은 기존 프로젝트
     css 전체에서 사용되지 않는 이름인지 확인 후 작성했습니다.
   =========================================== */

/* ---------- 카드 레이아웃 ----------
   기존: 프로필 + 정보 + 버튼이 한 줄(flex row)로 고정
   변경: 라벨이 많아져도 안 무너지도록 상단(child-top) / 라벨영역을
        세로로 쌓는 구조로 변경

   주의: ".child-list-item" 클래스는 라벨그룹이 있는 "자녀 선택" 모달과
   라벨그룹이 없는 단순 STEP 선택 모달(#child-list, kidListHtml 스크립트)
   양쪽에서 공유합니다. 단순 모달 쪽은 .child-top 래퍼가 없는 구조라
   ".child-list-item" 전체를 덮어쓰면 그쪽 레이아웃이 깨지므로,
   라벨그룹이 있는 마크업에만 ".has-detail" 클래스를 추가로 붙여서
   셀렉터 범위를 명확히 구분합니다. */
.child-list .child-list-item.has-detail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.child-list .child-list-item.has-detail .child-top {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.child-list .child-list-item.has-detail .tb {
  margin-right: 0;
  flex: 0 0 auto;
}

/* 성별 구분 프로필 이미지 배경
   - img src 경로만 child-boy.svg / child-girl.svg 로 분기, 별도 JS 로직 없음
   - 배경색만 성별에 따라 살짝 다르게 표시 (선택 사항, 필요 없으면 이 블록만 삭제) */
.child-list .child-list-item.has-detail .tb .img.boy {
  background: #EAF1FF;
}

.child-list .child-list-item.has-detail .tb .img.girl {
  background: #FFEFF4;
}

/* 기존 modal.css 의 ".child-list-item .info { width: calc(100% - 134px); }" 는
   child-top 래퍼를 새로 추가하면서 기준 폭이 달라져 info가 쭈그러드는
   원인이 되므로, width를 calc 대신 flex로 명시적으로 덮어씁니다.
   (.has-detail 로 범위를 한정해 단순 STEP 모달의 .info 에는 영향 없음) */
.child-list .child-list-item.has-detail .info {
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
}

.child-list .child-list-item.has-detail .info .name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* 대표자녀 배지 */
.child-list .child-list-item.has-detail .info .badge-primary {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #568AF8;
  background: #EAF1FF;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1.4;
}

/* 학년도 표기: 기존 modal.css 의 ".info .school .year" 와는
   별개 용도라 클래스명을 edu-year 로 분리해 충돌 방지 */
.child-list .child-list-item.has-detail .info span.class .edu-year {
  color: #568AF8;
  font-weight: 600;
  margin-right: 2px;
}

.child-list .child-list-item.has-detail.off .info span.class .edu-year {
  color: #BDBEC0;
}

.child-list .child-list-item.has-detail .child-top .btn {
  flex-shrink: 0;
  margin-left: auto;
}

/* ---------- 라벨 그룹 영역 ----------
   "우리 원 / 우리 반" 그룹으로 나눠 라벨을 가로 wrap 표시 */
.child-list .child-list-item.has-detail .label-groups {
  display: block;
  width: 100%;
  align-self: stretch;
  flex: 0 0 auto;
  background: #F8F8F9;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  box-sizing: border-box;
}

.child-list .child-list-item.has-detail .label-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.child-list .child-list-item.has-detail .label-group + .label-group {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #E2E4E8;
}

.child-list .child-list-item.has-detail .label-group .group-tit {
  flex: 0 0 44px;
  width: 44px;
  font-size: 12px;
  font-weight: 600;
  color: #686B73;
  line-height: 1.6;
  padding-top: 1px;
}

.child-list .child-list-item.has-detail .label-group .label-wrap {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 라벨(칩) 사이즈 보정
   - label.css 의 .label 기본 스타일(색상, border-radius 등)은 그대로 두고
     이 화면에서만 패딩/폰트 크기를 줄여 wrap에 유리하게 조정 */
.child-list .child-list-item.has-detail .label-wrap span.label {
  display: inline-flex !important;
  align-items: center;
  margin-bottom: 0;
  padding: 0.3rem 0.6rem;
  font-size: 12px !important;
  white-space: nowrap;
  line-height: 1.3;
}

/* ---------- 선택되지 않은 자녀(off) ---------- */
.child-list .child-list-item.has-detail.off .label-groups {
  background: #F2F2F3;
}

.child-list .child-list-item.has-detail.off .label-wrap span.label {
  background: #C4C6C9 !important;
  color: #fff;
}

.child-list .child-list-item.has-detail.off .group-tit {
  color: #BDBEC0;
}

/* 라벨이 전혀 없는 카드는 그룹 영역 자체를 숨김
   (서버/JS에서 라벨이 없을 때 .is-empty 클래스를 부여) */
.child-list .child-list-item.has-detail .label-groups.is-empty {
  display: none;
}

/* ---------- "우리 반" 미배정 상태 (반 배정 대기중) ----------
   label-group 에 .is-waiting 클래스를 추가했을 때,
   label-wrap 안 텍스트를 라벨(칩)이 아닌 안내문구 톤으로 표시 */
.child-list .child-list-item.has-detail .label-group.is-waiting .label-wrap {
  align-items: center;
}

.child-list .child-list-item.has-detail .label-group.is-waiting .label-wrap .waiting-text {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: #BDBEC0;
  line-height: 1.3;
}

.child-list .child-list-item.has-detail.off .label-group.is-waiting .label-wrap .waiting-text {
  color: #BDBEC0;
}

/* ---------- 모바일 대응 ---------- */
@media screen and (max-width: 360px) {
  .child-list .child-list-item.has-detail .label-group .group-tit {
    width: 38px;
    font-size: 11px;
  }

  .child-list .child-list-item.has-detail .label-wrap span.label {
    font-size: 11px !important;
    padding: 0.28rem 0.55rem;
  }
}