/* ===== people_sw1 — 변호사 프로필 스와이퍼 ===== */
/* 모든 셀렉터에 .people_sw1 스코프 — 다른 위젯과 충돌 방지 */

/* CSS 변수 기본값 (widget_body.php에서 인라인 style로 오버라이드) */
.people_sw1 .psw1_wrap {
  --psw1-height: clamp(500px, calc(28.13vw + 410px), 860px);
  --psw1-height-mo: var(--psw1-height);
  --psw1-slide-bg: #c4c4c2;
  --psw1-slide-bg-img: none;
  --psw1-slide-bg-size: cover;
  --psw1-slide-bg-pos: center center;
  --psw1-img-height: 90%;
  --psw1-img-height-mo: var(--psw1-img-height);
  --psw1-img-align: flex-end;
  --psw1-arrow-size: 44px;
  --psw1-arrow-icon-size: 22px;
  --psw1-text-pt: clamp(40px, calc(3.91vw + 27.5px), 90px);
  --psw1-text-pb: clamp(40px, calc(3.91vw + 27.5px), 90px);
  --psw1-text-pt-mo: var(--psw1-text-pt);
  --psw1-text-pb-mo: var(--psw1-text-pb);
}

.people_sw1 {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* 컨테이너 */
.people_sw1 .psw1_wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.people_sw1 .psw1_swiper {
  width: 100%;
  height: var(--psw1-height);
  position: relative;
  overflow: hidden;
  /* ★ 슬라이드 사이 흰 여백 방지 — 컨테이너에 슬라이드와 같은 배경 깔아둠 */
  background-color: var(--psw1-slide-bg);
  background-image: var(--psw1-slide-bg-img);
  background-size: var(--psw1-slide-bg-size);
  background-position: var(--psw1-slide-bg-pos);
  background-repeat: no-repeat;
}

/* psw1_wrapper — JS에서 모든 스타일 인라인 처리 (Swiper 미사용 / 순수 JS) */
.people_sw1 .psw1_wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  /* ★ 슬라이드 사이로 다른 슬라이드가 비치는 것 방지 — 배경에 슬라이드 색 깔아둠 */
  background-color: var(--psw1-slide-bg);
}

/* 슬라이드 — JS가 absolute로 같은 자리에 쌓고 clip-path 마스크 적용 */
.people_sw1 .psw1_slide {
  background-color: var(--psw1-slide-bg);
  background-image: var(--psw1-slide-bg-img);
  background-size: var(--psw1-slide-bg-size);
  background-position: var(--psw1-slide-bg-pos);
  background-repeat: no-repeat;
  overflow: hidden;
  will-change: clip-path;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* inner — 단순한 relative 컨테이너 */
.people_sw1 .psw1_inner {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  margin: 0;
}

/* ===== 좌측 텍스트 영역 ===== */
.people_sw1 .psw1_text {
  position: relative;
  z-index: 2;
  width: 60%;
  max-width: 960px;
  height: 100%;
  margin-left: max(0px, calc((100% - 1600px) / 2));
  padding-top: var(--psw1-text-pt);
  padding-bottom: var(--psw1-text-pb);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, calc(0.78vw + 5.5px), 18px);
  box-sizing: border-box;
}

.people_sw1 .psw1_t1 {
  font-size: clamp(13px, calc(0.39vw + 11.75px), 18px);
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.people_sw1 .psw1_t2 {
  font-size: clamp(22px, calc(1.95vw + 15.75px), 47px);
  font-weight: 800;
  color: #111;
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin-bottom: clamp(20px, calc(1.56vw + 15px), 40px);
}

.people_sw1 .psw1_t2 strong,
.people_sw1 .psw1_t2 b {
  color: #111;
  font-weight: 900;
}

.people_sw1 .psw1_t3 {
  font-size: clamp(20px, calc(1.17vw + 16.25px), 35px);
  font-weight: 700;
  color: #111;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: clamp(10px, calc(0.78vw + 7.5px), 20px);
  text-align: right;
  align-self: flex-end;
  /* ★ t4, btn과 동일하게 화면 중앙 정렬 */
  margin-right: 16.6%;
}

.people_sw1 .psw1_t4 {
  font-size: clamp(12px, calc(0.31vw + 11px), 15px);
  font-weight: 400;
  color: #666;
  line-height: 1.65;
  letter-spacing: -0.02em;
  text-align: right;
  align-self: flex-end;
  margin-top: clamp(4px, calc(0.31vw + 3px), 8px);
  margin-right: 16.6%;
  /* ★ <br> 줄바꿈 보장 — 글로벌 nowrap 등 영향 차단 */
  white-space: normal !important;
  word-break: keep-all;
}

/* psw1_t4 안의 자식 div(.COM_tit 등)도 줄바꿈 + 블록 표시 강제 */
.people_sw1 .psw1_t4 > div,
.people_sw1 .psw1_t4 .COM_tit {
  white-space: normal !important;
  word-break: keep-all;
  display: block;
  width: 100%;
}

/* <br> 강제 표시 */
.people_sw1 .psw1_t4 br {
  display: inline !important;
}

/* ===== 버튼 ===== */
.people_sw1 .psw1_btn_wrap {
  margin-top: clamp(12px, calc(0.78vw + 9.5px), 22px);
  align-self: flex-end;
  /* ★ 우측 끝 → 화면(슬라이드 전체) 중앙 위치로
     텍스트 영역 폭 60% 기준: 화면 중앙은 텍스트 영역의 약 83% 지점
     → 우측에서 16.6% 여백 (slide폭의 10%) */
  margin-right: 16.6%;
}

.people_sw1 .psw1_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, calc(0.47vw + 10.5px), 18px) clamp(24px, calc(1.09vw + 20.5px), 38px);
  border: 1px solid #999;
  border-radius: 999px;
  background: transparent;
  color: #333;
  /* ★ 폰트 크기 키움 */
  font-size: clamp(14px, calc(0.31vw + 13px), 18px);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.people_sw1 .psw1_btn:hover {
  background: #333;
  color: #fff;
  border-color: #333;
}

/* ===== 우측 인물 이미지 (absolute로 띄워 텍스트 영역 위에 오버랩) ===== */
.people_sw1 .psw1_image {
  position: absolute;
  top: 0;
  right: max(0px, calc((100% - 1600px) / 2));
  width: 55%;
  max-width: 880px;
  height: 100%;
  display: flex;
  align-items: var(--psw1-img-align);
  justify-content: flex-end;
  overflow: visible;
  z-index: 1;
  pointer-events: none;   /* 텍스트/버튼 클릭 가능하도록 */
}

.people_sw1 .psw1_image > * { pointer-events: auto; }

/* widget_img.php가 출력하는 wg_img1 wrapper — 영역 전체 차지 */
.people_sw1 .psw1_image .wg_img1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: var(--psw1-img-align);
  justify-content: flex-end;
  position: relative;
}

/* 실제 이미지 — 사용자가 설정한 높이가 이미지 자체에 적용됨 */
.people_sw1 .psw1_image .wg_img1 img {
  width: auto;
  height: var(--psw1-img-height);   /* ★ 사용자 설정이 이미지에 직접 적용 */
  max-width: 100%;
  object-fit: contain;
  object-position: right bottom;
  display: block;
}

.people_sw1 .psw1_image_empty {
  width: 60%;
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.4);
  border: 2px dashed #999;
  color: #777;
  font-size: 14px;
  border-radius: 8px;
}

/* ===== 페이지네이션 (좌측 세로 도트) ===== */
.people_sw1 .psw1_pagination {
  position: absolute;
  left: clamp(20px, calc(3.13vw + 10px), 60px);
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}

.people_sw1 .psw1_pagination_bullet {
  width: 30px;
  height: 2px;
  background: rgba(0,0,0,0.25);
  border-radius: 0;
  opacity: 1;
  margin: 0 !important;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
  display: block;
}

.people_sw1 .psw1_pagination_bullet_active {
  background: #111;
  width: 50px;
}

/* ===== 네비게이션 화살표 (CodePen hero-slider 스타일) =====
   - 평소 숨김(opacity:0 + 안쪽으로 translate), 슬라이더 hover 시 등장
   - 큰 원형 + 흰색 점선 3px 보더 + 흰색 화살표 (기존의 3배 크기) */
.people_sw1 .psw1_btn_prev,
.people_sw1 .psw1_btn_next {
  position: absolute;
  top: 50%;
  width: calc(var(--psw1-arrow-size) * 1.6);
  height: calc(var(--psw1-arrow-size) * 1.6);
  margin-top: 0;
  border-radius: 50%;
  background: transparent;
  /* ★ 점선 → 실선 변경 */
  border: 2px solid #fff;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 10;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease, background 0.35s ease;
}

/* 슬라이더에 마우스 오버 시 화살표 등장 */
.people_sw1:hover .psw1_btn_prev,
.people_sw1:hover .psw1_btn_next {
  opacity: 1;
  visibility: visible;
}

.people_sw1 .psw1_btn_prev::after,
.people_sw1 .psw1_btn_next::after {
  content: none;
}

.people_sw1 .psw1_btn_disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.people_sw1 .psw1_btn_prev i,
.people_sw1 .psw1_btn_next i {
  /* ★ 아이콘 크기 축소 — 원 안에 잘 들어오게 */
  font-size: calc(var(--psw1-arrow-icon-size) * 1.4);
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* unicons 아이콘의 폰트 메트릭 보정 (살짝 위로 떠보일 때 중앙 정렬) */
  width: 1em;
  height: 1em;
  margin: 0;
}

.people_sw1 .psw1_btn_prev:hover,
.people_sw1 .psw1_btn_next:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.people_sw1 .psw1_btn_prev {
  left: clamp(15px, calc(1.56vw + 10px), 40px);
  transform: translate(30px, -50%);
}
.people_sw1:hover .psw1_btn_prev {
  transform: translate(0, -50%);
}

.people_sw1 .psw1_btn_next {
  right: clamp(15px, calc(1.56vw + 10px), 40px);
  transform: translate(-30px, -50%);
}
.people_sw1:hover .psw1_btn_next {
  transform: translate(0, -50%);
}

.people_sw1 .swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== 모바일 (768px 이하) =====
   ★ 정책: PC와 동일한 50:50 좌우 분할 유지
   - 좌측 50%: 텍스트 (t1·t2·t3·t4·btn 모두 우측정렬, 50% 라인에 딱 붙음)
   - 우측 50%: 이미지 (absolute, 하단정렬, 우측 살짝 잘림 허용)
*/
@media screen and (max-width: 768px) {
  .people_sw1 .psw1_swiper {
    height: var(--psw1-height-mo);
  }

  .people_sw1 .psw1_inner {
    padding: 0;
  }

  /* 좌측 텍스트 — 컨테이너 자체는 화면 100% 차지 (z-index로 이미지 위에 표시) */
  .people_sw1 .psw1_text {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding-left: clamp(12px, 3vw, 20px);
    padding-right: clamp(12px, 3vw, 20px);
    padding-top: var(--psw1-text-pt-mo);
    padding-bottom: var(--psw1-text-pb-mo);
    align-items: stretch;
    text-align: left;
    box-sizing: border-box;
  }

  /* t1/t2 — 화면 가로 100% 기준 가운데정렬 */
  .people_sw1 .psw1_t1,
  .people_sw1 .psw1_t2 {
    text-align: center;
    width: 100%;
    align-self: stretch;
  }

  /* t3·t4·버튼: 좌측 50% 영역의 우측정렬 (= 화면 가로 50% 라인 기준)
     ★ 50% 라인에서 좌측으로 20px만 밀어내 약간의 여백 확보 */
  .people_sw1 .psw1_t3,
  .people_sw1 .psw1_t4 {
    text-align: right;
    align-self: flex-start;
    width: 50%;
    max-width: 50%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .people_sw1 .psw1_btn_wrap {
    align-self: flex-start;
    width: 50%;
    max-width: 50%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 20px;
    text-align: right;
    box-sizing: border-box;
  }

  /* 모바일: 더보기 버튼 패딩 축소 + 폰트 살짝 줄임 */
  .people_sw1 .psw1_btn {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 999px;
  }

  /* 우측 이미지 — absolute, 우측을 화면 밖으로 -100px 밀어내어 잘리게
     하단은 섹션 끝에 맞춤 */
  .people_sw1 .psw1_image {
    position: absolute;
    top: 0;
    left: auto;
    right: -60px;                /* ★ 우측을 화면 밖으로 60px 밀어냄 */
    width: 60%;                  /* 화면 폭의 약 60% */
    max-width: none;
    height: 100%;
    align-items: flex-end;       /* 하단 정렬 — 섹션 끝에 맞춤 */
    justify-content: flex-end;
    overflow: visible;
  }

  .people_sw1 .psw1_image .wg_img1 {
    width: 100%;
    height: 100%;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .people_sw1 .psw1_image .wg_img1 img {
    height: var(--psw1-img-height-mo);
    width: auto;
    max-width: none;             /* 폭 제한 없음 — 우측 잘림 허용 */
    object-fit: contain;
    object-position: right bottom; /* 우측 끝에 정렬 — 살짝 잘려도 OK */
    display: block;
  }

  /* 모바일: 화살표를 섹션 하단 좌우에 배치 (hover 불가 → 항상 보이게) */
  .people_sw1 .psw1_btn_prev,
  .people_sw1 .psw1_btn_next {
    opacity: 1;
    visibility: visible;
    top: auto;
    bottom: 16px;
    width: calc(var(--psw1-arrow-size) * 1.1);
    height: calc(var(--psw1-arrow-size) * 1.1);
    border: 2px solid #fff;
    background: rgba(0,0,0,0.25);
  }
  .people_sw1 .psw1_btn_prev {
    left: 16px;
    right: auto;
    transform: none !important;
  }
  .people_sw1 .psw1_btn_next {
    right: 16px;
    left: auto;
    transform: none !important;
  }
  .people_sw1 .psw1_btn_prev i,
  .people_sw1 .psw1_btn_next i {
    font-size: calc(var(--psw1-arrow-icon-size) * 1.1);
  }

  .people_sw1 .psw1_pagination.swiper-pagination {
    left: 50%;
    top: auto;
    bottom: 20px;
    transform: translateX(-50%);
    flex-direction: row;
  }

  .people_sw1 .psw1_pagination .swiper-pagination-bullet {
    width: 20px;
  }

  .people_sw1 .psw1_pagination .swiper-pagination-bullet-active {
    width: 35px;
  }
}