/* band-extra 전용 오버라이드: 이 영역은 전체 섹션의 기본 스타일을 정의합니다. */
.band-extra {
  /* PC 환경에서의 상하 패딩을 4vw로 설정합니다. */
  padding: var(--be-pad-pc, 4vw) 0;
}
.band-extra .container {
  /* 컨테이너 내부의 요소들을 세로로 정렬하고, 중앙에 위치시킵니다. */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 요소들 사이의 간격을 2rem으로 설정합니다. */
  gap: var(--be-gap, 2rem);
}

/* 흰색 둥근 네모 박스 (extra-pill) 스타일 */
.extra-pill {
  /* 너비는 뷰포트 너비의 92% 또는 최대 1180px로 설정하여 반응형으로 만듭니다. */
  width: min(1500px, 92%);
  /* 너비:높이 비율을 7:2.2로 설정하여 높이를 제어합니다. */
  aspect-ratio: 7 / 2.2;
  background: #fff;
  /* 둥근 모서리의 반경을 28px로 설정합니다. */
  border-radius: var(--be-radius, 28px);
  /* 그림자 효과를 추가합니다. */
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* 모바일 환경 (최대 너비 911px)을 위한 스타일 */
@media (max-width: 911px) {
  .band-extra {
    /* 모바일 환경에서는 상하 패딩을 8vw로 더 넓게 설정합니다. */
    padding: var(--be-pad-mo, 8vw) 0;
  }
  .extra-pill {
    /* 모바일에서는 너비를 92%로 고정합니다. */
    width: 92%;
    /* 모바일에서는 높이 비율을 7:3으로 설정하여 박스를 조금 더 높게 만듭니다. */
    aspect-ratio: 7 / 3;
    /* 모바일에서는 둥근 모서리 반경을 18px로 더 작게 설정합니다. */
    border-radius: var(--be-radius-mo, 18px);
  }
}

/* ===== 2025-08-29: hero/band 경계 흰줄 제거 ===== */
/* 히어로 섹션과 밴드 섹션 사이의 불필요한 공백과 경계선을 제거하기 위한 코드입니다. */
#home.hero { margin-bottom: 0 !important; }
#heroBgBand { margin-top: 0 !important; }
#heroBgBand .band-inner { margin-top: 0 !important; }
#heroBottomSpacer { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }

/* ===== 2025-08-29: about 영역 비워두기 (높이만 유지) ===== */
#about .container:empty {
  /* about 섹션의 내용이 비어 있을 때 최소 높이를 120px로 유지합니다. */
  min-height: var(--about-min-h, 120px);
}

/* 둥근 네모 박스 내부 텍스트 스타일 */
.extra-pill-text-wrap {
  /* 내부 텍스트를 세로로 정렬하고 가운데에 위치시킵니다. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 부모 요소인 .extra-pill의 전체 너비와 높이를 사용합니다. */
  width: 100%;
  height: 100%;
  text-align: center;
  /* 내부 패딩을 1rem으로 설정합니다. */
  padding: 1rem;
  /* 패딩을 너비 계산에 포함시켜 요소가 넘치지 않도록 합니다. */
  box-sizing: border-box;
}
.pill-title {
  /* 제목 폰트 크기를 2.5rem으로 설정합니다. */
  font-size: var(--pill-title-size-pc, 5rem);
  font-weight: 700;
  color: oklab(34.048% -0.01813 -0.1857); /* 색상 코드를 lab으로 변경했습니다. */
  line-height: 1.2;
  white-space: nowrap; /* 자동 줄바꿈 방지 */
  overflow: hidden; /* 넘치는 내용 숨기기 */
  text-overflow: clip; /* 넘치는 텍스트를 잘라냄 */
}
.pill-subtitle {
  /* 부제목 폰트 크기를 1.5rem으로 설정합니다. */
  font-size: var(--pill-subtitle-size-pc, 1.5rem);
  font-weight: 400;
  color: lab(0% 0 0);
  /* 위쪽 여백을 1rem으로 설정합니다. */
  margin-top: var(--pill-subtitle-mt-pc, 0.5rem);
  line-height: 1.5;
}

/* PC: 추가적인 크기 및 간격 제어 (CSS 변수 정의) */
:root {
  /* PC 환경에서의 제목, 부제목 폰트 크기 및 간격 변수를 정의합니다. */
  --pill-title-size-pc: 5rem;
  --pill-subtitle-size-pc: 3rem;
  --pill-subtitle-mt-pc: 1rem;
}

/* 모바일용 스타일 */
@media (max-width: 911px) {
  .extra-pill-text-wrap {
    /* 모바일에서는 내부 패딩을 2rem으로 더 넓게 설정합니다. */
    padding: 0.6rem;
  }
  .pill-title {
    /* 모바일에서는 제목 폰트 크기를 1.5rem으로 더 작게 설정합니다. */
    font-size: var(--pill-title-size-mo, 3rem);
  }
  .pill-subtitle {
    /* 모바일에서는 부제목 폰트 크기를 1rem으로 더 작게 설정합니다. */
    font-size: var(--pill-subtitle-size-mo, 1rem);
    /* 모바일에서는 위쪽 여백을 0.5rem으로 더 작게 설정합니다. */
    margin-top: var(--pill-subtitle-mt-mo, 0.5rem);
  }
  /* 모바일: 추가적인 크기 및 간격 제어 (CSS 변수 정의) */
  :root {
    /* 모바일 환경에서의 제목, 부제목 폰트 크기 및 간격 변수를 정의합니다. */
    --pill-title-size-mo: 2.5rem;
    --pill-subtitle-size-mo: 1.5rem;
    --pill-subtitle-mt-mo: 0.5rem;
  }
}

/* 둥근 네모 박스 아래 추가 문구 스타일 */
.extra-pill-bottom-text {
  /* 내부 텍스트를 세로로 정렬하고 가운데에 위치시킵니다. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}

.extra-pill-bottom-text p {
  /* 기본 문단 스타일 초기화 및 폰트 크기, 색상 설정 */
  margin: 0;
  color: hsl(0, 0%, 100%); /* 흰색 텍스트로 설정 */
}

.extra-pill-bottom-text p:first-child {
  /* 첫 번째 문단의 폰트 크기를 설정합니다. */
  font-size: var(--pill-bottom-size-pc, 2rem);
  font-weight: 700; /* 굵게 */
}

.extra-pill-bottom-text p:last-child {
  /* 마지막 문단의 폰트 크기, 간격, 색상을 설정합니다. */
  font-size: var(--pill-bottom-sub-size-pc, 1.5rem);
  font-weight: 400; /* 일반 굵기 */
  margin-top: var(--pill-bottom-mt-pc, 0.5rem);
}

/* '국가공인'에 적용될 볼드체 스타일 */
.bold-text {
  font-weight: 700;
}

/* PC에서는 줄바꿈 태그를 숨깁니다. */
.mobile-break {
  display: none;
}

/* 모바일용 스타일 */
@media (max-width: 911px) {
  /* 모바일에서는 줄바꿈 태그를 보이게 합니다. */
  .mobile-break {
    display: block; /* 모바일에서만 줄바꿈이 적용됩니다. */
  }

  .extra-pill-bottom-text {
    /* 모바일에서는 줄 간격을 1.4로 설정하여 가독성을 높입니다. */
    line-height: 1.4;
  }
  .extra-pill-bottom-text p:first-child {
    /* 모바일에서는 첫 번째 문구의 폰트 크기를 더 작게 설정합니다. */
    font-size: var(--pill-bottom-size-mo, 1.2rem);
  }
  .extra-pill-bottom-text p:last-child {
    /* 모바일에서는 마지막 문구의 폰트 크기 및 간격을 더 작게 설정합니다. */
    font-size: var(--pill-bottom-sub-size-mo, 0.9rem);
    margin-top: var(--pill-bottom-mt-mo, 0.3rem);
  }
}

/* PC: 추가적인 크기 및 간격 제어 (CSS 변수 정의) */
:root {
  --pill-bottom-size-pc: 4rem;
  --pill-bottom-sub-size-pc: 3rem;
  --pill-bottom-mt-pc: 0.3rem;
}

/* 모바일: 추가적인 크기 및 간격 제어 (CSS 변수 정의) */
:root {
  --pill-bottom-size-mo: 2rem;
  --pill-bottom-sub-size-mo: 1.8rem;
  --pill-bottom-mt-mo: 1rem;
}

/* PC 환경에서의 간격 조절 변수 설정 */
:root {
  --bottom-text-margin-top-pc: 2rem;
}

/* 모바일 환경에서의 간격 조절 변수 설정 */
@media (max-width: 911px) {
  :root {
    --bottom-text-margin-top-mo:0.5rem;
  }
}

/* extra-pill 아래 문구에 적용될 간격 스타일 */
.extra-pill-bottom-text {
  /* PC 환경에서 기본 간격을 설정합니다. */
  margin-top: var(--bottom-text-margin-top-pc, 2.5rem);
}

/* 모바일 환경에서의 간격 스타일 */
@media (max-width: 911px) {
  .extra-pill-bottom-text {
    margin-top: var(--bottom-text-margin-top-mo, 1rem);
  }
}
/* 무료 상담 버튼 스타일 */
.contact-button {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  /* 버튼 배경색 설정 */
  background: oklab(53.571000000000005% 0.18888 0.10378);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1rem 2.5rem;
  border-radius: 28px;
  border: none;
  /* 버튼 내부에 색을 채우는 그림자 효과 */
  box-shadow: inset 0 -24px 24px -12px rgba(0, 0, 0, 0.4);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 2rem;
  transform: translateY(0);
}

/* 마우스 오버 시 스타일 */
.contact-button:hover {
  background: lab(62.29% -39.74 -2.04);
  /* 마우스 오버 시 내부 그림자 효과 변경 */
  box-shadow: inset 0 -22px 22px -10px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
}

/* 기본 상태 - 요소들이 보이지 않도록 설정 */
.extra-pill, .extra-pill-bottom-text, .contact-button {
  opacity: 0;
  transform: translateY(50%);
  transition: all 0.5s ease;
}

/* 둥근네모 박스와 내부 문구: 왼쪽에서 오른쪽으로 나타나는 페이드 효과 */
.extra-pill.in-view {
  opacity: 1;
  transform: translateX(0);
  animation: fadeInLeft 1s forwards;
}

/* 더 이상 망설이지 마세요~ 책임집니다: 오른쪽에서 왼쪽으로 나타나는 페이드 효과 */
.extra-pill-bottom-text.in-view {
  opacity: 1;
  transform: translateX(0);
  animation: fadeInRight 1s forwards;
}

/* 무료 상담 버튼: 아래에서 위로 올라오는 팝잇 효과 */
.contact-button.in-view {
  opacity: 1;
  transform: translateY(0);
  animation: popUp 1s 0.5s forwards;
}

/* 애니메이션 정의 */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes popUp {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* band-extra 배경 강제 적용 */
.band-extra {
  background: lab(9.77% 22.35 -40.37) !important;  /* 원하는 색상코드로 변경 */
}


/* ✅ PC 전용 */
.extra-pill-bottom-text {
  margin-top: 2rem !important;   /* 박스(.extra-pill)와 문구 사이 간격 */
}

.contact-button {
  margin-top: 2rem !important;   /* 문구와 버튼 사이 간격 */
}

/* ✅ 모바일 전용 */
@media (max-width: 911px) {
  .extra-pill-bottom-text {
    margin-top: 0.5rem !important; /* 모바일에서 박스-문구 간격 */
  }

  .contact-button {
    margin-top: 1rem !important;   /* 모바일에서 문구-버튼 간격 */
  }
}

/* ✅ 모바일 전용: band-extra 배경 이미지를 가상요소로 강제 적용 (파일 맨 아래) */
@media (max-width: 911px) {
  section#bandExtra.band-extra {
    position: relative; /* 가상요소 기준 */
    background: none !important;            /* 기존 색/이미지 제거 */
    background-color: transparent !important;
    overflow: hidden; /* 스크롤 이슈 예방 */
  }

  section#bandExtra.band-extra::before {
    content: "";
    position: absolute;
    inset: 0;                 /* top/right/bottom/left: 0 */
    z-index: 0;               /* 내용 뒤, 섹션 배경 앞 */
    background: url("/images/round_bg.png") center / cover no-repeat;
    /* ↑ 경로 확실히 하려고 root 기준. 상대경로면 ../images/round_bg.png 로 맞춰도 됨 */
    pointer-events: none;
  }

  /* 섹션 안의 내용이 배경 위로 오도록 */
  section#bandExtra.band-extra > * {
    position: relative;
    z-index: 1;
  }

  /* 흰 박스가 배경을 다 가리면 살짝 투명도 주기(선택) */
  .extra-pill { background: rgba(255,255,255,0.94) !important; }
}
/* === extra-pill: 둥근네모 유지하면서 높이 자동 확장 === */
.extra-pill {
  aspect-ratio: auto !important;  /* 고정 비율 해제 */
  height: auto !important;        /* 내용에 맞게 늘어나기 */
  min-height: 220px;              /* 최소 높이 */
  
  /* ⬇️ 기존 둥근네모 스타일은 반드시 살려야 함 */
  background: #fff;                                /* 흰색 배경 */
  border-radius: var(--be-radius, 28px);           /* 둥근 모서리 */
  box-shadow: 0 10px 28px rgba(0,0,0,.08);         /* 그림자 효과 */

  padding-block: 1.5rem;   /* 위·아래 여백 */
  padding-inline: 2rem;    /* 좌우 여백(원하면 조절) */
}

/* 텍스트 간격은 gap으로 관리 */
.extra-pill-text-wrap {
  gap: 1rem; /* "걱정 마세요" ↔ "될까/된다" 간격 */
}

/* 모바일 전용 */
@media (max-width: 911px) {
  .extra-pill {
    min-height: 260px;    /* 모바일 최소 높이 */
    border-radius: var(--be-radius-mo, 18px);
    padding-block: 1rem;
    padding-inline: 1.2rem;
  }
  .extra-pill-text-wrap {
    gap: 0.6rem;
  }
}
.pill-title {
  white-space: nowrap;   /* 줄바꿈 방지 */
  word-break: keep-all;  /* 단어 단위 유지 */
}

/* ===== extra-pill 텍스트 간격/마진 보정 ===== */

/* 제목(가능 합니다.) */
.pill-title {
  margin-top: 0 !important;     /* 위쪽 여백 제거 */
  margin-bottom: 0 !important;  /* 아래쪽 여백도 제거 */
  line-height: 1.2;             /* 줄높이는 유지 */
}

/* 부제목("될까" → "된다") */
.pill-subtitle {
  margin-top: 0rem !important; /* 제목과 간격은 수동 지정 */
  margin-bottom: 0 !important;
  line-height: 1.4;
}

/* 텍스트 전체 간격(gap)으로 통제 */
.extra-pill-text-wrap {
  gap: 0.8rem !important;      /* 제목 ↔ 부제목 간격 */
  padding-block: 1rem !important; /* 위·아래 패딩 수동 보정 */
}

/* ===== 모바일 전용 보정 ===== */
@media (max-width: 911px) {
  .pill-subtitle {
    margin-top: 0.4rem !important; /* 모바일에서 더 좁게 */
  }
  .extra-pill-text-wrap {
    gap: 0.5rem !important;
    padding-block: 0.8rem !important;
  }
}
/* 제목 잘림 방지 오버라이드 */
.pill-title{
  overflow: visible !important;     /* 숨기지 말고 보이게 */
  text-overflow: initial !important;
  margin-top: 0 !important;         /* 여백 수동 관리 */
  margin-bottom: 0 !important;
  line-height: 1.2 !important;      /* 필요시 1.25~1.3까지 늘려도 됨 */
}

/* 제목-부제 간격은 마진 말고 gap으로 통일 */
.extra-pill-text-wrap{
  gap: 0.8rem !important;
  padding-block: 1rem !important;   /* 윗공간 안전마진 */
}

/* 모바일 미세 보정 */
@media (max-width: 911px){
  .extra-pill-text-wrap{ gap: 0.5rem !important; padding-block: .8rem !important; }
}