/* =========================================================
   [SECTION] 민사 센터 인트로 + 사례 슬라이더 (FINAL / FLEX)
   - 부트스트랩 없어도 레이아웃 유지
   - PC: 좌 텍스트 / 우 인물
   - MO(<=1000): 2번째 이미지처럼 카드형 2단 유지
========================================================= */

/* 섹션 전체 */
#section-cases{
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* 인트로 래퍼(배경/여백) */
.civillaw-intro-wrap{
  background:#fff;
  padding:40px 0 60px;
}

/* 인트로 컨테이너 */
.civillaw-intro{
  max-width:1400px;
  margin: 0 auto;
  padding: 0 20px; /* container 대체 */
}

/* ✅ 핵심: 2단 FLEX */
.civillaw-intro__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 40px;
}

/* 왼쪽 텍스트 */
.intro-left{
  flex: 1 1 auto;
  max-height: 790px;   /* ✅ 피그마 이미지 높이 */
  display: flex;
  align-items: center;
  max-width: 956px;
}

.intro-main{
  font-size: clamp(92px, 9.2vw, 130px); /* ✅ 최소~최대 제한 */
  font-weight:800;
  color:#0b2c5a;
  margin:0;
  line-height: 1.5;
  letter-spacing: -0.04em;
}

/* ✅ span이 공통 CSS에 영향받아도 타이틀 크기 따라가게 */
.intro-main span{
  display:block;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* 오른쪽 인물 */
.intro-right{
  flex: 0 0 550px;      /* 우측 고정폭 */
  display:flex;
  justify-content:flex-end;
}

.lawyer-card{
  position:relative;
  width:100%;
  max-width:550px;
}

.lawyer-photo-wrap{
  border-radius:20px;
  overflow:hidden;
}

.lawyer-photo{
  display:block;
  width:100%;
  height:auto;
}

/* 임명장(선택) */
.lawyer-cert{
  position:absolute;
  left: -90px;
  top: 130px;
  width: 210px;
  height:auto;
  z-index: 1;
}

/* 하단 정보 박스 */
.lawyer-info{
  position:absolute;
  right:25%;
  bottom:60px;
  width:55%;
  border-radius:16px;
  padding:14px 16px 12px;
  color:#fff;
  font-size:13px;
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  z-index: 2;
}

.lawyer-badge{
  display:flex;
  margin-bottom:6px;
  align-items:flex-end;
}

.badge-icon{
  width:22px;
  height:auto;
  margin-right:6px;
}

.badge-text{
  font-size:18px;
  color:#fff;
}

.lawyer-meta{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:3px;
}

.lawyer-title{
  font-size:24px;
  opacity:.8;
  margin:0;
  color:#fff;
}

.lawyer-name{
  font-size:40px;
  font-weight:800;
  margin:0;
  color:#fff;
}

.lawyer-desc{
  font-size:24px;
  margin:0;
  color:#FFB747;
  font-weight:800;
}

/* 아래 카드 영역 */
.section-wrap{
  box-shadow:0 12px 40px rgba(0,0,0,0.12);
  border-radius:20px;
  background:#fff;
  padding:150px 60px;
}
/* =========================
   PC 타이틀 폭/줄바꿈 보정 (최대 956px)
========================= */
@media (min-width:1001px){

  /* 왼쪽 영역 자체를 최대 956px로 제한 */
  #section-cases .intro-left{
    max-width: 956px;
  }

  /* 각 줄(span) 높이 안정화 */
  #section-cases .intro-main span{
    display:block;
    max-width: 956px;
    white-space: nowrap; /* ✅ 한 줄이 2줄로 깨지지 않게(1번째처럼) */
  }
}


@media (max-width:1000px){

  /* =========================
     전체 구조: 세로 스택
  ========================= */
  .civillaw-intro-wrap{
    background:#fff;
    padding: 60px 0 40px;
  }

  .civillaw-intro{
    padding: 0 10px;
  }

  .civillaw-intro__inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 28px;

    background:transparent;
    box-shadow:none;
    padding:0;
  }

  /* =========================
     상단 타이틀
  ========================= */
  .intro-left{
    order:1;
    max-width: 100%;
    text-align:center;
  }

  .intro-main{
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color:#0b2c5a;
    word-break: keep-all;
  }

  .intro-main span{
    display:block;
    white-space: normal;
  }

  /* =========================
     중앙 인물
  ========================= */
  .intro-right{
    order:2;
    flex: none;
    width: 100%;
    justify-content:center;
  }

  .lawyer-card{
    margin: 0 auto;
  }

  .lawyer-photo-wrap{
    border-radius: 0;
  }

  .lawyer-cert{
    display:none; /* 모바일 제거 */
  }

  /* =========================
     인물 정보 (이미지 위 오버레이)
  ========================= */
  .lawyer-info{
    position:absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    border-radius: 14px;
    padding: 10px 12px;
    text-align:right;
    width: 55%;
  }

  .lawyer-badge{
    justify-content:center;
    margin-bottom:4px;
  }

  .badge-icon{ width:14px; }
  .badge-text{ font-size:12px; }

  .lawyer-meta{
    justify-content:center;
  }

  .lawyer-title{
    font-size:12px;
  }

  .lawyer-name{
    font-size:18px;
    font-weight:800;
  }

  .lawyer-desc{
    font-size:12px;
    color:#FFB747;
    margin-top:2px;
  }

  /* =========================
     하단 카드 영역
  ========================= */
  .section-wrap{
    margin-top: 36px;
    padding: 36px 20px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  }

}