/* =========================
   기본 리셋/공통
========================= */
*{ margin:0; padding:0; box-sizing:border-box; }
img{ max-width:100%; display:block; }
body{ 
  font-family: 'Pretendard', sans-serif;
  background:#000;
  letter-spacing: -0.03em;
}

/* =========================
   Section 1 · Hero
========================= */
#section1.hero{
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-text{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.hero-title{
  font-size: 120px;
  font-weight: 700;
  margin-bottom: 16px;
}

.hero-sub{
  font-size: 30px;
  font-weight: 400;
}

/* =========================
   Section 2 · Strengths
========================= */
#section2{
  position: relative;
  width: 100%;
  height: 744px;
  overflow: hidden;
  background: #f5f5f5;
}

.sec2-bg{
  position: absolute;
  inset: 0;
}

.sec2-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/img/vasectomy/02.jpg") center/cover no-repeat;
  filter:blur(22px);
  transform:scale(1.25);
  opacity:.45;
  z-index:1;
}

.sec2-bg img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
}

.sec2-text{
  position:absolute;
  left:260px;
  top:150px;
  z-index:10;
}

.sec2-sub{
  font-size:17px;
  font-weight:700;
  color:#779fd5;
  margin-bottom:15px;
  letter-spacing:.15em;
}

.sec2-title{
  font-size:60px;
  line-height:70px;
  font-weight:700;
  color:#191919;
}

/* =========================
   Section 3 · Procedure
========================= */
#section3{
  position: relative;
  width:100%;
  overflow:hidden;
  background:#fff;
}

.sec3-bg{
  position:relative;
  width:100%;
  height:970px;
}

.sec3-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.sec3-text{
  position:absolute;
  top:130px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  text-align:center;
}

.sec3-sub{
  font-size:17px;
  font-weight:700;
  letter-spacing:.15em;
  margin-bottom:30px;
  color:#fff;
}

.sec3-title{
  font-size:60px;
  line-height:66px;
  font-weight:700;
  color:#191919;
}

.sec3-video{
  position:absolute;
  left:50%;
  bottom:150px;
  transform:translateX(-50%);
  z-index:6;
}

.sec3-video video{
  width:1000px;
  object-fit:cover;
  background:#000;
}

/* 기본: PC용만 보이게, 모바일용은 숨김 */
.video-pc { display: block; }
.video-mo { display: none; }

/* =========================
   Section 4/5/6 이미지 공통
========================= */
.section-img img{
  width:100%;
  height:auto;
  object-fit:contain;
}

/* =========================
   Section 7
========================= */
#section7{
  position:relative;
  width:100%;
  overflow:hidden;
}

.sec7-bg img{
  width:100%;
  object-fit:contain;
}

.sec7-text{
  position:absolute;
  top:320px;
  right:230px;
  font-size:60px;
  line-height:75px;
  font-weight:400;
  text-align:center;
  color:#fff;
  z-index:5;
}

/* 기본: PC 텍스트만 보임 */
.mo-text { display:none; }
.pc-text { display:block; }

.highlight{ color:#779fd5; }
.b{ font-weight:700; }

/* 버튼 */
.sec7-buttons{
  position:absolute;
  top:calc(320px + 75px * 2 + 65px);
  right:275px;
  z-index:6;
  display:flex;
  gap:55px;
}

.sec7-buttons .btn-img img{
  transition:0.25s;
}

.sec7-buttons .btn-img:hover img{
  transform:scale(1.06);
  filter:brightness(1.12);
}

/* 기본: 숨겨진 상태 */
.fade-slide-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}

/* 보여질 때 */
.fade-slide-left.show {
  opacity: 1;
  transform: translateX(0);
}

/* =========================
   상담 퀵바 공통
========================= */

#consult-root {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}

/* Dim Backdrop */
.consult-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 9997;
}

/* 상담 카드 */
.consult-card {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 330px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  padding: 24px;
  z-index: 9998;

  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: .28s ease;
}

.consult-card.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.consult-card__header {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

.consult-field {
  margin-bottom: 12px;
}

.consult-input,
.consult-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
}

.consult-privacy {
  font-size: 13px;
}

.consult-submit {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 8px;
  background: #779fd5;
  color: #fff;
  font-size: 17px;
  margin-top: 8px;
  cursor: pointer;
  transition:.2s;
}

.consult-submit:hover {
  background:#5f86bf;
}

.consult-helper {
  margin-top: 8px;
  font-size: 12px;
  color:#777;
}

/* =========================
   플로팅 버튼 (FAB)
========================= */

.consult-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}

.consult-fab__btn {
  background: none;
  border: none;
  cursor: pointer;
}

.consult-fab__btn img {
  width: 74px;
  height: 74px;
  transition:.25s;
}

/* =========================
   모바일 튜닝
========================= */
@media(max-width:768px){

  #consult-root {
    bottom: 16px;
    right: 16px;
  }

  .consult-card {
    width: calc(100% - 40px);
    right: 20px;
    left: 20px;
    bottom: 100px;
    padding: 22px;
  }

  .consult-fab__btn img {
    width: 62px;
    height: 62px;
  }
}


/* =========================
   모바일 (절대좌표 재배치)
========================= */
@media(max-width:768px){

  /* Section1 */
  #section1.hero{
    height:92vh;
  }
  .hero-title{ 
	font-size: clamp(46px, 15vw, 80px);
    white-space: nowrap;   /* ★ 모바일에서 줄바꿈 금지 */
	margin-bottom: 5px;
  }
  .hero-sub{ font-size:clamp(18px,4.8vw,28px); }
  .hero-bg img { object-fit: fill; }

  /* Section2 */
  #section2{
    padding:80px 0;
	height: 830px;
	background: #fff;
  }
  .sec2-text{
    left:50%;
    top:80px;
    transform:translateX(-50%);
    text-align:center;
    padding:0 20px;
  }
  .sec2-sub{ font-size:12px; margin-bottom:8px; }
  .sec2-title{
    font-size:38px;
    line-height:42px;
	white-space: nowrap;   /* ★ 강제 한 줄 */
  }

  .sec2-title br{
    display: none;   /* ★ 모바일에서 줄바꿈 제거 */
  }

  /* Section3 */
  .sec3-bg{ height:100%; }
  .sec3-text{
    text-align:center;
	top: 10%;
	white-space: nowrap;
  }
  .sec3-sub{ 
	font-size:12px; 
	margin-bottom: 8px;
  }
  .sec3-title{
    font-size:38px;
    line-height:42px;
  }
  .sec3-video{
    margin:40px auto 60px;
    transform:none;
	left: 0px;
    bottom: 0px;
	padding: 28px;
  }
  .sec3-video video{
    width:100%;
  }

  .video-pc { display: none; }
  .video-mo { display: block; width: 100%; }

  /* SECTION 7 모바일: 텍스트와 버튼을 이미지 위에서 아래쪽 배치 */
  #section7 {
    position: relative;
  }

  .sec7-bg img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 텍스트 */
  .sec7-text {
    position: absolute;        /* 이미지 위에 올림 */
    bottom: 180px;             /* 이미지 하단에서 180px 위 */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;

    font-size: clamp(26px, 8vw, 38px);
    line-height: clamp(34px, 10vw, 52px);
    color: #fff;
    z-index: 5;
  }

  /* 버튼 묶음 */
  .sec7-buttons {
    position: absolute;        /* 이미지 위에 놓기 */
    bottom: 50px;              /* 텍스트보다 아래로 */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    display: flex;
    justify-content: center;
    flex-direction: row;       /* 모바일도 가로 배치 */
    gap: 12px;
    z-index: 6;
	top: calc(320px + 75px * 1 + 95px);
  }

  .sec7-buttons .btn-img img {
    width: 100%;
    max-width: 160px;          /* 버튼이 너무 커지지 않도록 제한 */
  }

  /* PCText 숨기고 모바일 텍스트만 */
  .pc-text { display:none; }
  .mo-text { display:block; }

}

@supports (-webkit-touch-callout: none) {
  .video-mo {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}