/* =========================================================
   [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-photo2{
  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);
  }

}

/* =========================================================
   [SECTION] 상속센터 – 주요 업무 카드 (inherit-focus)
   - PC: 3열 Grid
   - MO(<=1000): 1장 Swiper 자동루프
   - ✅ 모바일 dots(페이지네이션) 스타일 포함 (네이비 톤)
========================================================= */

.inherit-focus{
  background:#fff;
  padding: 110px 0;
}

.inherit-focus__inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.inherit-focus__head{
  text-align:center;
  margin-bottom: 42px;
}

.inherit-focus__title{
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
  color:#0b2c5a;
}

.inherit-focus__desc{
  margin: 0;
  font-size: 18px;
  color:#6b7280;
}

/* 카드 공통 */
.inherit-focus__card{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(11,44,90,0.06);
}

.inherit-focus__cap{
  background:#0b2c5a;
  color:#fff;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align:center;
  padding: 20px 18px;
  font-size: 18px;
}

.inherit-focus__body{
  padding: 26px 22px;
  background:#fff;
  min-height: 112px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.inherit-focus__quote{
  margin: 0;
  font-size: 16px;
  color:#111827;
  line-height: 1.6;
  text-align:center;
}

/* ✅ PC 그리드 */
.inherit-focus__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ✅ 모바일 Swiper 영역은 기본 숨김 */
.inherit-focus__mo{
  display:none;
}

/* pagination wrapper */
.inherit-focus__pagination{
  margin-top: 16px;
  text-align:center;
}

/* ✅ dots(기본은 swiper 기본 클래스에 적용) */
.inherit-focus .swiper-pagination-bullet{
  width: 7px;
  height: 7px;
  opacity: .35;
  transform: scale(1);
}

.inherit-focus .swiper-pagination-bullet-active{
  opacity: 1;
  transform: scale(1.15);
}

/* =========================================================
   MOBILE (<=1000px): Grid 숨기고 Swiper 표시
========================================================= */
@media (max-width: 1000px){
  .inherit-focus{
    padding: 80px 0;
  }

  .inherit-focus__inner{
    padding: 0 14px;
  }

  .inherit-focus__title{
    font-size: 34px;
  }

  .inherit-focus__desc{
    font-size: 15px;
  }

  /* PC 그리드 숨김 */
  .inherit-focus__grid{
    display:none;
  }

  /* 모바일 Swiper 표시 */
  .inherit-focus__mo{
    display:block;
  }

  /* 한 장씩 보기 + 양 옆 여백(스크린샷처럼 넉넉하게) */
  .inheritFocusSwiper{
    padding: 0 14px;
  }

  .inheritFocusSwiper .swiper-slide{
    height:auto;
  }

  .inherit-focus__cap{
    font-size: 16px;
    padding: 18px 16px;
  }

  .inherit-focus__body{
    padding: 22px 18px;
    min-height: 110px;
  }

  .inherit-focus__quote{
    font-size: 15px;
  }

  /* ✅ 모바일 dots 가독성 조금 강화 */
  .inherit-focus .swiper-pagination-bullet{
    width: 8px;
    height: 8px;
    opacity: .28;
  }

  .inherit-focus .swiper-pagination-bullet-active{
    opacity: 1;
  }
}