/* =========================================================================
   apply-nudge.css — 신청 폼 넛지 + pill 제출 (페이히어 이식)
   -------------------------------------------------------------------------
   #apply(.section.final) 안 신청 폼 스코프. 인라인 <style> 뒤에 로드되어
   소스 순서로 이기며, 버튼 override는 ID 스코프(#apply #leadForm ...)로
   특정도까지 확보한다. 콘텐츠 기본값을 숨기지 않는다 — 말풍선은 JS 주입
   요소(.apply-nudge)라 안전, 애니 초기상태만 JS/CSS로 부여.
   토큰: 오렌지 #f97316 / 진오렌지 #e85d0c, 틴트 #fff1e8 · rgba(249,115,22,.12),
        보더 rgba(249,115,22,.42), 텍스트 #17181c, pill 999px.
   ========================================================================= */

/* ---- 1. 안심 말풍선 넛지 (JS 주입) ------------------------------------- */
#apply #leadForm .apply-nudge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: center;
  max-width: 100%;
  margin: 4px auto 16px;
  padding: 11px 18px;
  border: 1px solid rgba(249, 115, 22, .42);
  border-radius: 999px;
  background: #fff1e8;
  color: #e85d0c;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  box-shadow: 0 10px 30px rgba(17, 17, 17, .06);
  /* 애니 초기상태(진입 전)는 JS가 .is-in 부여 전까지 유지 */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .42s ease, transform .42s ease;
  will-change: opacity, transform;
}

#apply #leadForm .apply-nudge.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* 아래쪽 꼬리(tail) — 보더 삼각형(바깥) + 채움 삼각형(안쪽) 이중 구성 */
#apply #leadForm .apply-nudge::before,
#apply #leadForm .apply-nudge::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 34px;
  width: 0;
  height: 0;
  border-style: solid;
}

/* 바깥(보더 색) 삼각형 */
#apply #leadForm .apply-nudge::before {
  border-width: 9px 8px 0 8px;
  border-color: rgba(249, 115, 22, .42) transparent transparent transparent;
}

/* 안쪽(배경 색) 삼각형 — 살짝 위로 겹쳐 보더 라인만 남김 */
#apply #leadForm .apply-nudge::after {
  margin-top: -1.5px;
  border-width: 8px 7px 0 7px;
  border-color: #fff1e8 transparent transparent transparent;
  transform: translateX(1px);
}

/* 은은한 bob — 진입 후 idle. transform/opacity만 사용 */
#apply #leadForm .apply-nudge.is-in {
  animation: apply-nudge-bob 3.4s ease-in-out .55s infinite;
}

@keyframes apply-nudge-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ---- 2. 제출 버튼 pill화 (ID 스코프로 인라인 .button 이김) ------------- */
#apply #leadForm button.button {
  min-height: 54px;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(249, 115, 22, .28);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}

#apply #leadForm button.button:hover {
  transform: translateY(-2px);
  background: #e85d0c;
  box-shadow: 0 16px 40px rgba(232, 93, 12, .34);
}

#apply #leadForm button.button:active {
  transform: translateY(0);
}

/* ---- 3. 인풋 포커스 강조(은은) ---------------------------------------- */
#apply #leadForm .field input:focus,
#apply #leadForm .field textarea:focus {
  outline: none;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .12);
}

/* ---- 4. .final-points 를 작은 체크 pill 로 정돈 ----------------------- */
#apply .final-points span {
  gap: 6px;
  padding: 0 15px;
  min-height: 38px;
  border-color: rgba(249, 115, 22, .42);
  color: #e85d0c;
  font-weight: 700;
}

#apply .final-points span::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background-color: rgba(249, 115, 22, .12);
  /* 오렌지 체크 마크 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23e85d0c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ---- 접근성: 모션 최소화 존중 ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #apply #leadForm .apply-nudge {
    transition: none;
    opacity: 1;
    transform: none;
  }
  #apply #leadForm .apply-nudge.is-in {
    animation: none;
    transform: none;
  }
  #apply #leadForm button.button,
  #apply #leadForm button.button:hover {
    transition: none;
    transform: none;
  }
}