* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  box-shadow: 0 0 0px 1000px white inset;
  -webkit-text-fill-color: #000;
}

/* 섹션1 */
.first-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: calc(100% - 7rem);
}

.first-section .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.first-section .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.first-section .content-container {
    position: absolute;
    width: 78%;
    max-width: 1536px;
    top: 6.4rem;
    height: calc(100% - 6.4rem);
    display: flex;
    /* 시안 반영: 히어로 타이틀 가운데 정렬 */
    justify-content: center;
    align-items: center;
}

.first-section .text-container {
    text-align: center;
    color: white;
    /* 시안 반영: 영문 히어로 타이틀 Capitana (한글은 아래 lang=ko 규칙에서 Paperlogy) */
    font-family: 'capitana', sans-serif;
    font-weight: 600;
    /* 시안 반영: 히어로 타이틀 40px(2.5rem) */
    font-size: 2.5rem;
}

/* 섹션2 */
.second-section {
    display: flex;
    width: 78%;
    max-width: 1536px;
    align-items: center;
    margin: 0 auto;
    padding: 9rem 0 5.75rem 0;
    gap: 12%;
}

.installer-second-section {
    display: block;
}

.second-section .content-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.second-section .title-container p {
    /* 시안 반영: 섹션 타이틀 36px(2.25rem) */
    font-size: 2.25rem;
    font-weight: 600;
    font-family: 'capitana', sans-serif;
    color: #1e1e1e;
}

.second-section .text-container p {
    font-size: 1.92rem;
    font-weight: 300;
    font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
    line-height: 1.8rem;
    color: #1e1e1e;
}

.second-section .image-container img {
    width: 532.6px;
    min-width: 9rem;
    height: auto;
}

/* 섹션3 */
.third-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    width: 78%;
    max-width: 1536px;
    margin: 0 auto;
}

.third-section .title-container p {
    font-size: 3rem;
    font-weight: 600;
    font-family: 'capitana', sans-serif;
    color: #1e1e1e;
}

.third-section .image-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5%;
}

.third-section .image-container .explanation-image {
    width: 21%;
}

/* 섹션4 */
.fourth-section {
    width: 78%;
    max-width: 1536px;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    margin: 8.3rem auto 0 auto;
}

.fourth-section .title-container h2 {
    font-size: 3rem;
    font-weight: 600;
    font-family: 'capitana', sans-serif;
    color: #1e1e1e;
    width: 100%;
    text-align: center;
}

.fourth-section .content-container {
    display: flex;
    flex-direction: row;
    gap: 4.5vw;
    justify-content: center;
}

/* 섹션5 */
.fifth-section {
    width: 78%;
    max-width: 1536px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 9.25rem;
}

.fifth-section .title-container p {
    font-size: 3rem;
    font-weight: 600;
    font-family: 'capitana', sans-serif;
    color: #1e1e1e;
    padding: 6.25rem 0 3.5rem 0;
}

.fifth-section form {
    width: 100%;
}

.fifth-section form .inputs-container {
    display: flex;
    flex-direction: column;
    row-gap: 3.1rem;
}

.fifth-section form label {
    font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
    font-size: 1.2rem;
    font-weight: 200;
    color: #1e1e1e;
}

.fifth-section form p {
    font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
    font-size: 0.9rem;
    font-weight: 200;
    color: #b2b2b2;
}

.fifth-section form .input-row-container {
     display: flex;
     gap: 12%;
     width: 100%;
}

.fifth-section form .input-container {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
}

.fifth-section form .input-container label span {
    color: red;
    vertical-align: middle;
    padding-left: 5px;
}

.fifth-section form .input-container select{
    width: 100%;
    padding: 1rem 0;
}

.fifth-section form .input-container input {
     width: 100%;
     height: 3.75rem;
     box-sizing: border-box;
     border-radius: 10px;
     border: 1px solid #b2b2b2;
     padding: 1rem;
     font-size: 1rem;
}


.fifth-section form .notice-container {
    padding: 0.8rem 0 2.75rem 0;
}

.fifth-section form button {
    padding: 0.9rem 0;
    width: 7rem;
    border: 1px solid transparent;
    border-radius: 1.5rem;
    background-color: #60E0E0;
    font-size: 1.3rem;
    font-weight: 600;
}

.installer-bottom-container p {
    text-align: center !important;
    /* 시안 반영: 설명문 18px(1.125rem), 자간 -1% */
    font-size: 1.125rem !important;
    letter-spacing: -0.01em;
}

/* installer 폰트 */
.installer-second-section .installer-text-container p {
    /* 시안 반영: 서브타이틀 18px(1.125rem), 자간 -1% */
    font-size: 1.125rem;
    font-weight: 300;
    font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
    /* 시안 반영: line-height 축소(기존 1.8rem은 여백 과다) */
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #1e1e1e;
}

/* 시안 반영: 한글(lang=ko)일 때만 Paperlogy 적용 (영문 폰트는 그대로 유지) */
html[lang="ko"] .first-section .text-container p,
html[lang="ko"] .second-section .title-container p,
html[lang="ko"] .installer-second-section .installer-text-container p,
html[lang="ko"] .installer-bottom-container p {
    font-family: 'Paperlogy', sans-serif;
}

.installer-second-section .content-container {
    gap: 1rem;
}

/* 시안 반영: 타이틀+서브타이틀+구분선을 한 그룹으로 묶어 내부 간격 25px (Figma Frame 307) */
.installer-title-group {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* 시안 반영: PC 콘텐츠 세로 간격 (그룹→지도 53px, 지도→설명 38px) */
@media (min-width: 1025px) {
    .installer-second-section .content-container {
        gap: 0;
    }

    .installer-title-group {
        margin-bottom: 53px;
    }

    .installer-second-section .installer-bottom-container {
        margin-top: 38px;
    }
}

.installer-second-section {
    padding-bottom: 4.75rem;
}

#become-an-installer-form {
    margin-top: 4.75rem;
}

.fifth-section form .notice-container p {
    font-size: 1.2rem;
    font-weight: 600;
    color: black;
}

/* 지도 css */
#map {
    /* 시안 반영: 세로 간격은 그룹/margin으로 일원화, 지도 자체 margin 제거 */
    margin: 0 auto;
    /* 시안 반영: 지도 높이 360px */
    height: 360px;
}

.g-recaptcha {
    padding-bottom: 2.75rem;
}

@media (max-width: 1400px) {
    .second-section {
        flex-direction: column-reverse;
    }

    .second-section .image-container {
        width: 100%;
        height: auto;
    }

    .second-section .image-container img{
        width: 100%;
        height: auto;
    }

    #map {
        /* 시안 반영: 세로 간격은 그룹/margin으로 일원화 */
        margin: 0 auto;
        /* 시안 반영: 지도 높이 360px */
        height: 360px;
    }
}

@media (max-width: 1024px) {
    .first-section .content-container p {
        font-size: 2rem;
    }

    .second-section {
        flex-direction: row;
    }

    .second-section .title-container p {
        font-size: 2rem;
    }

    .second-section .image-container img {
        width: 300px;
        height: auto;
    }

      .second-section .text-container p {
          font-size: 1.5rem;
          font-weight: 300;
          line-height: 2rem;
      }

      .third-section .title-container p {
          font-size: 2rem;
      }

      .fourth-section .title-container h2 {
            font-size: 2rem;
      }

      .fifth-section .title-container p {
          font-size: 2rem;
      }

      #map {
          margin: 40px auto;
          height: 400px;
      }
}

@media (max-width: 767px) {
    .first-section .image-container {
        height: 219px;
    }

    .first-section .content-container {
        top: 5.5rem;
        height: calc(100% - 5.5rem);
        justify-content: center;
        width: 300px;
    }

    .second-section {
        padding-top: 5rem;
        display: flex;
        flex-direction: column-reverse;
    }

    .second-section .content-container {
        gap: 1rem;
    }

    .second-section .title-container p {
        color: var(--text-color);
    }

    .second-section .text-container p {
        color: var(--text-color);
    }

  .second-section .image-container {
    width: 100%;
  }

    .second-section .image-container img{
      width: 100%;
      height: auto;
    }

  .third-section .image-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1rem;
  }

    .third-section .title-container p {
        color: var(--text-color);
    }

  .third-section .image-container .explanation-image{
    width: 100%;
    height: auto;
  }

    .fourth-section .title-container h2 {
        color: var(--text-color);
    }

  .fifth-section form button {
    width: 30%;
    font-size: 2vw;
  }

    .fifth-section .title-container p {
        color: var(--text-color);
    }

    .fifth-section form label {
        color: var(--text-color);
    }

    /* installer 폰트 */
    .installer-second-section .installer-text-container p {
        color: var(--text-color);
    }


    #map {
        margin: 30px auto;
        height: 300px;
    }

    .installer-bottom-container {
        margin-top: 1rem;
    }
}

@media (max-width: 425px) {
  .second-section,
  .third-section,
  .fourth-section,
  .fifth-section {
    width: 90%;
  }

  /* 섹션1 */
  .first-section .content-container {
    top: 4rem;
    height: calc(100% - 4rem);
    justify-content: center;
    align-items: center;
  }

  .first-section .text-container {
    font-size: 5vw;
    word-break: break-word;
  }

  /* 섹션2 */
  .second-section {
    flex-direction: column-reverse;
    gap: 2rem;
    padding: 4rem 0;
  }

  .second-section .title-container p {
    font-size: 5vw;
    text-align: center;
    word-break: break-word;
  }

  .second-section .text-container p {
    font-size: 4.5vw;
    line-height: 1.5rem;
    text-align: center;
  }

  .second-section .image-container img {
    width: 100%;
  }

  /* 섹션3 */
  .third-section .title-container p {
    font-size: 5vw;
    text-align: center;
    word-break: break-word;
  }

  .third-section .image-container {
    flex-direction: column-reverse;
    gap: 1.5rem;
  }

  .third-section .image-container .explanation-image {
    width: 100%;
  }

  /* 섹션4 */
  .fourth-section {
    gap: 3rem;
  }

  .fourth-section .title-container h2 {
    font-size: 5vw;
    text-align: center;
    word-break: break-word;
  }

  .fourth-section .content-container {
    flex-direction: column;
    gap: 2rem;
  }

  /* 섹션5 */
  .fifth-section {
    padding-bottom: 5rem;
  }

  .fifth-section .title-container p {
    font-size: 4vw;
    text-align: justify;
    padding: 4rem 0 2rem 0;
    word-break: break-word;
  }

  .fifth-section form .input-row-container {
    flex-direction: column;
    gap: 3rem;
  }

  .fifth-section form .input-container input {
    font-size: 1rem;
    height: 3.25rem;
  }

  .fifth-section form button {
     width: 100%;
     font-size: 4vw;
  }

    #map {
        margin: 20px auto;
        height: 200px;
    }

    .installer-second-section .content-container .installer-text-container {
        text-align: center;
    }
}

@media (min-width: 426px) {
    .horizonal-line {
        /* 시안 반영: 구분선 2px, #60E0E0, 너비 122px 고정 */
        border-top: 2px solid #60E0E0;
        width: 122px;
    }
}

/* 설명문 줄바꿈: PC에선 숨겨 한 줄, 모바일(≤767px)에선 표시해 시안대로 2줄 */
.br-mobile {
    display: none;
}

@media (max-width: 767px) {
    .br-mobile {
        display: inline;
    }
}

/*
 * ===== 태블릿~모바일(≤1024px) 유동 크기 (clamp) =====
 * Figma 모바일 시안(375px)값 → PC(1024~1025px 경계)값까지 폭에 따라 선형 보간.
 * 375px에서 시안값, 1024px에서 PC값에 도달해 ≥1025px(rem) 구간과 자연스럽게 이어짐.
 */
@media (max-width: 1024px) {
    /*
     * 모바일 컨텐트 폭: 히어로(전체폭) 대비 ~78% 유지.
     * @767의 .second-section{display:flex}+베이스 align-items:center 조합으로
     * 컨텐트가 쪼그라드는(squish) 현상을 막기 위해 block 유지 + 폭 고정.
     */
    .installer-second-section {
        display: block;
        width: 80%;
    }

    /* 히어로 타이틀: 14px(375) → 37.5px(1024) */
    .first-section .text-container p {
        font-size: clamp(14px, calc(3.62vw + 0.42px), 37.5px);
    }

    /* 콘텐츠 세로 간격: 그룹 내부 12→25, 그룹→지도 23→53, 지도→설명 17→38 */
    .installer-second-section .content-container {
        gap: 0;
    }

    .installer-second-section .installer-title-group {
        gap: clamp(12px, calc(2vw + 4.49px), 25px);
        margin-bottom: clamp(23px, calc(4.62vw + 5.68px), 53px);
    }

    .installer-second-section .installer-bottom-container {
        margin-top: clamp(17px, calc(3.24vw + 4.86px), 38px);
    }

    /* 섹션 타이틀: 14px(375) → 33.75px(1024), 왼쪽 정렬 */
    .installer-second-section .title-container p {
        font-size: clamp(14px, calc(3.04vw + 2.59px), 33.75px);
        text-align: left;
    }

    /* 서브타이틀: 10px(375) → 16.88px(1024), 왼쪽 정렬 */
    .installer-second-section .installer-text-container p {
        font-size: clamp(10px, calc(1.06vw + 6.03px), 16.88px);
        text-align: left;
    }

    /* 설명문: 10px(375) → 16.88px(1024) */
    .installer-second-section .installer-bottom-container p {
        font-size: clamp(10px, calc(1.06vw + 6.03px), 16.88px) !important;
    }

    /* 구분선: 너비 68→122, 두께 1→2, #60E0E0 */
    .installer-second-section .horizonal-line {
        border-top: clamp(1px, calc(0.154vw + 0.42px), 2px) solid #60E0E0;
        width: clamp(68px, calc(8.32vw + 36.8px), 122px);
    }

    /* 지도 높이: 150px(375) → 360px(1024), 자체 margin 제거 */
    #map {
        height: clamp(150px, calc(32.36vw + 28.65px), 360px);
        margin: 0 auto;
    }
}