/* ===== 테마 색상 (기준색만 바꾸면 전체 테마 변경) ===== */
/* 테마 변경: 아래 --theme-h(색상각, 0~360), --theme-s(채도), --theme-l(명도%)만 수정하세요.
   예: 초록 142, 보라 270, 주황 24 */
:root {
  /* 기준: Hue 217=블루, Saturation 91%, Lightness 56% → #2563eb 대응 */
  --theme-h: 217;
  --theme-s: 91%;
  --theme-l: 56%;
  --theme-primary: hsl(var(--theme-h), var(--theme-s), var(--theme-l));
  --theme-primary-light: hsl(var(--theme-h), var(--theme-s), 65%);
  --theme-primary-lighter: hsl(var(--theme-h), var(--theme-s), 75%);
  --theme-primary-dark: hsl(var(--theme-h), var(--theme-s), 45%);
  --theme-primary-muted: hsl(var(--theme-h), var(--theme-s), 96%);
  --theme-primary-shadow: hsl(var(--theme-h), var(--theme-s), 56%, 0.4);
  --theme-primary-shadow-strong: hsl(var(--theme-h), var(--theme-s), 56%, 0.6);
  --theme-primary-ring: hsl(var(--theme-h), var(--theme-s), 56%, 0.5);
  --theme-primary-opacity-10: hsl(var(--theme-h), var(--theme-s), 56%, 0.1);
  --theme-primary-opacity-20: hsl(var(--theme-h), var(--theme-s), 56%, 0.2);
  --theme-primary-opacity-30: hsl(var(--theme-h), var(--theme-s), 56%, 0.3);
  --theme-accent-light: hsl(24, 90%, 65%);
}
/* text-accent: 흰색 처리 */
.text-accent {
  color: #FFFFFF !important;
}
/* bg-accent: 메인컬러(primary) 적용 */
.bg-accent {
  background-color: var(--theme-primary, #2563eb) !important;
}

@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
}

body {
  font-family: "Pretendard Variable", sans-serif;
  font-weight: 400;
  word-break: keep-all;
}

/* 전역 word-break: keep-all 적용 (코드, URL 등은 제외) */
h1, h2, h3, h4, h5, h6,
p, span, div, li, td, th,
label, button, a,
.hero-form-label, .hero-form-header-line1, .hero-form-header-line2, .hero-form-header-line3,
.timer-display, .timer-digit-box, .timer-colon {
  word-break: keep-all;
}

/* 예외: 코드, URL, 입력 필드 등은 기본 동작 유지 */
code, pre, input, textarea, select,
[class*="url"], [href^="http"], [href^="mailto:"] {
  word-break: normal;
}

/* Tailwind font-sans 오버라이드 */
.font-sans {
  font-family: "Pretendard Variable", sans-serif !important;
}

/* Tailwind h-2 오버라이드: 높이 0rem */
.h-2 {
  height: 0rem !important;
}

/* care-grid: 본문 전체 가운데 정렬 */
#care-grid {
  text-align: center;
}
#care-grid > * {
  text-align: center;
}
#care-grid h3,
#care-grid p {
  text-align: center !important;
}

/* 로고 폰트 굵기 900 강제 적용 */
h1[style*="font-weight: 900"] {
  font-weight: 900 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1[style*="font-weight: 900"] span {
  font-weight: 900 !important;
}

/* Font Weight 유틸리티 클래스 */
.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }
.font-weight-800 { font-weight: 800 !important; }
.font-weight-900 { font-weight: 900 !important; }

/* 로딩 화면 - 귀여운 애니메이션 */
@keyframes loading-bar {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.animate-loading-bar {
  animation: loading-bar 1.2s ease-in-out infinite;
  width: 40%;
}
body.loading-complete #site-loading {
  opacity: 0;
  pointer-events: none;
}
body:not(.loading-complete) {
  overflow: hidden !important;
}

/* Animation Utilities - 아래에서 위로 페이드인 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate-fade-in-up {
  animation: fadeInUp 0.7s ease-out forwards;
}

/* Infinite Scroll Animation */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-scroll {
  animation: scroll 40s linear infinite;
}
.pause:hover {
  animation-play-state: paused;
}

/* Shimmer Effect for Buttons */
@keyframes shine {
  100% { left: 125%; }
}
.animate-shine {
  animation: shine 3s infinite;
}

/* CTA 버튼: 노란 글로우 펄스 */
@keyframes cta-glow {
  0%, 100% {
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1),
                0 0 20px rgba(255,252,0,0.4);
  }
  50% {
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1),
                0 0 32px rgba(255,252,0,0.55);
  }
}
/* 히어로 제출 버튼: 메인컬러 글로우 */
@keyframes cta-glow-primary {
  0%, 100% {
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1),
                0 0 20px var(--theme-primary-shadow, rgba(37,99,235,0.4));
  }
  50% {
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1),
                0 0 32px var(--theme-primary-shadow-strong, rgba(37,99,235,0.6));
  }
}
.btn-cta-glow {
  animation: cta-glow 2.2s ease-in-out infinite;
}
#hero-submit.btn-cta-glow {
  animation: cta-glow-primary 2.2s ease-in-out infinite;
}
.btn-cta-glow:hover {
  animation: none;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 0 36px rgb(0 0 0 / 50%) !important;
}
#hero-submit.btn-cta-glow:hover {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 0 36px var(--theme-primary-shadow-strong, rgba(37,99,235,0.6)) !important;
}

/* CTA 화살표: 호버 시 부드럽게 이동 */
.animate-cta-arrow-nudge {
  transition: transform 0.3s ease-out;
  display: inline-block;
}
button:hover .animate-cta-arrow-nudge,
.group:hover .animate-cta-arrow-nudge,
#hero-submit:hover .animate-cta-arrow-nudge {
  transform: translateX(6px);
}

/* 플로팅 CTA 버튼: 물결 웨이브 shine */
@keyframes wave-sweep {
  0% { transform: translateX(-100%) skewX(-12deg); opacity: 0.6; }
  50% { opacity: 1; }
  100% { transform: translateX(200%) skewX(-12deg); opacity: 0.6; }
}
.btn-wave::before,
.btn-wave::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-12deg);
  animation: wave-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.btn-wave::after {
  animation-delay: 1.4s;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* points-1-grid / points-2-grid: 내부 래퍼에서만 가로 스크롤, overflow-y: hidden으로 상하 스크롤 제거 */
#points-1-grid,
#points-2-grid {
    overflow: visible;
}
.points-1-grid-inner,
.points-2-grid-inner {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
#points-1-grid .points-1-card {
    min-height: 320px;
}

/* 둥근 모서리 검은 보더 현상 방지 (서브픽셀 렌더링 아티팩트) */
.time-deal-dark-block {
  box-shadow: inset 0 0 0 1px #020617;
  isolation: isolate;
}

.reveal-hidden {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 테블릿 (768px~1279px): 히어로 높이 1006px */
@media (min-width: 768px) and (max-width: 1279px) {
    .md\:h-\[720px\] {
        height: 1006px;
    }
}
/* 데스크톱 (1280px~): 히어로 높이 986px */
@media (min-width: 1280px) {
    .md\:h-\[720px\] {
        height: 986px;
    }
}
/* 테블릿 (768px~) 전체 조정 */
@media (min-width: 768px) {
    .max-w-\[1280px\].mx-auto {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .max-w-\[1920px\].mx-auto,
    .max-w-\[1920px\] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .lg\:px-24 {
        padding-left: 20rem !important;
        padding-right: 6rem !important;
    }
}

@media (min-width: 1280px) {
    .xl\:text-\[110px\] {
        font-size: 94px;
    }
    .xl\:text-7xl {
        font-size: 4.0rem;
        line-height: 1;
    }
}

.mb-8 {
    margin-bottom: -3rem;
}

.mb-10 {
    margin-bottom: 1.5rem !important;
}

.pb-2 {
    padding-bottom: 4.0rem;
}

.pb-4 {
    padding-bottom: 3rem;
}

.pt-20 {
    padding-top: 0rem !important;
}

.py-8 {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

/* bg-white 커스텀: 메인컬러 box-shadow 추가 */
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    box-shadow: 0 0 5px 0px var(--theme-primary-shadow, rgba(37, 99, 235, 0.4));
}

/* ===== 히어로 폼 디자인 개선 ===== */

/* Form Header 크기 조절 (여기서만 수정) - 배경 높이는 min-h, 이미지는 왼쪽 하단 고정으로 키움 */
.hero-form-container {
    --hero-header-min-h: 5rem;
    --hero-header-min-h-md: 6rem;
    --hero-header-img-width: 10rem;
    --hero-header-img-width-md: 9rem;
    --hero-header-img-max-h: 17rem;
    --hero-header-img-max-h-md: 12rem;
    --hero-header-img-margin-right: -0.75rem;
    --hero-header-img-margin-right-md: -1rem;
    --hero-header-img-margin-top: -1.25rem;
    --hero-header-img-margin-top-md: -1.5rem;
    --hero-header-img-scale: 1; /* 이미지 비율 조절: 1 = 100%, 0.5 = 50% (왼쪽 하단 고정) - HTML에서 {{text19}}로 관리 */
    --hero-header-line1-size: 0.8rem;
    --hero-header-line2-size: 1.05rem;
    --hero-header-line3-size: 1.05rem;
    --hero-header-line2-size-md: 1.2rem;
    --hero-header-line3-size-md: 1.2rem;
    /* 메인 컨테이너 스타일 */
    background-color: #ffffff !important;
    border-color: var(--theme-primary, #2563eb) !important;
}

/* Form Header: 배경 높이는 고정, 이미지는 absolute로 빼서 배경 높이와 무관하게 크기 조절 */
.hero-form-header {
    position: relative;
    overflow: visible;
    min-height: var(--hero-header-min-h);
    /* 배경은 JavaScript에서 동적으로 설정됨 (기준색 {{text9}}에서 보조색 자동 생성) */
    background: var(--hero-header-gradient, linear-gradient(89deg, color-mix(in srgb, #2563eb 32%, #87ffe1), color-mix(in srgb, #2563eb 100%, white)));
}
@media (min-width: 768px) {
    .hero-form-header { min-height: var(--hero-header-min-h-md); }
}
/* 이미지: 문서 흐름에서 제거 → 배경이 커지지 않음, 왼쪽 하단 고정 */
.hero-form-header-img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(var(--hero-header-img-width) * var(--hero-header-img-scale));
    max-width: calc(var(--hero-header-img-width) * var(--hero-header-img-scale));
    height: auto;
    margin-right: 0;
    margin-top: 0;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: visible;
    pointer-events: none;
    z-index: 0;  /* 텍스트 아래에 표시 */
}
.hero-form-header-img-el {
    max-height: calc(var(--hero-header-img-max-h) * var(--hero-header-img-scale));
    width: auto;
    height: auto;
    object-position: left bottom;
    display: block;
}
@media (min-width: 768px) {
    .hero-form-header-img {
        width: calc(var(--hero-header-img-width-md) * var(--hero-header-img-scale));
        max-width: calc(var(--hero-header-img-width-md) * var(--hero-header-img-scale));
    }
    .hero-form-header-img-el {
        max-height: calc(var(--hero-header-img-max-h-md) * var(--hero-header-img-scale));
    }
}
/* 텍스트 영역: 이미지 위로 겹치면서 더 넓게 표시 (margin-left 줄임) */
.hero-form-header-text {
    margin-left: calc(var(--hero-header-img-width) * 0.4);
    min-height: var(--hero-header-min-h);
    z-index: 1;  /* 이미지 위에 표시 */
}
@media (min-width: 768px) {
    .hero-form-header-text {
        margin-left: calc(var(--hero-header-img-width-md) * 0.4);
        min-height: var(--hero-header-min-h-md);
    }
}
.hero-form-header-line1 { font-size: var(--hero-header-line1-size); }
.hero-form-header-line2,
.hero-form-header-line3 {
    font-size: var(--hero-header-line2-size);
}
@media (min-width: 768px) {
    .hero-form-header-line2 { font-size: var(--hero-header-line2-size-md); }
    .hero-form-header-line3 { font-size: var(--hero-header-line3-size-md); }
}

/* 히어로 폼: 차종·연락처 라벨 텍스트 크기 */
.hero-form-label {
    font-size: 1.3rem !important;
}

/* 폼 래퍼 애니메이션 */
.hero-form-wrapper {
    animation: form-fade-in 0.8s ease-out forwards;
}

@keyframes form-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 입력 필드: 내부 그림자 제거, border 처리. 포커스 시 테두리 메인컬러 */
.hero-input:focus {
    background-color: white !important;
    border-color: var(--theme-primary, #2563eb) !important;
    box-shadow: 0 0 0 4px var(--theme-primary-opacity-20, rgba(37, 99, 235, 0.2)) !important;
    transform: translateY(-1px);
}

.hero-input:hover:not(:focus) {
    transform: translateY(-1px);
}

/* 폼 컨테이너 장식 요소 애니메이션 */
.hero-form-wrapper > div:first-child,
.hero-form-wrapper > div:nth-child(2),
.hero-form-wrapper > div:nth-child(3),
.hero-form-wrapper > div:nth-child(4) {
    animation: corner-glow 3s ease-in-out infinite;
}

@keyframes corner-glow {
    0%, 100% {
        opacity: 0.6;
        border-color: rgba(255, 255, 255, 0.4);
    }
    50% {
        opacity: 1;
        border-color: rgba(255, 255, 255, 0.7);
    }
}

.hero-form-wrapper > div:nth-child(2) {
    animation-delay: 0.5s;
}

.hero-form-wrapper > div:nth-child(3) {
    animation-delay: 1s;
}

.hero-form-wrapper > div:nth-child(4) {
    animation-delay: 1.5s;
}

/* 폼 내부 배경 패턴 애니메이션 */
.hero-form-wrapper .bg-\[radial-gradient\(circle_at_50%_50%\,rgba\(255\,255\,255\,0\.1\)_0%\,transparent_70%\)\] {
    animation: pattern-pulse 4s ease-in-out infinite;
}

@keyframes pattern-pulse {
    0%, 100% {
        opacity: 0.1;
        transform: scale(1);
    }
    50% {
        opacity: 0.15;
        transform: scale(1.05);
    }
}

/* 라벨 아이콘 애니메이션 */
.hero-form-wrapper label i {
    animation: icon-bounce 2s ease-in-out infinite;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

.hero-form-wrapper label:nth-child(1) i {
    animation-delay: 0s;
}

.hero-form-wrapper label:nth-child(2) i {
    animation-delay: 0.3s;
}

.hero-form-wrapper label:nth-child(3) i {
    animation-delay: 0.6s;
}

/* 체크박스 강조 (테마 자동컬러) */
#hero-agree:checked {
    box-shadow: 0 0 0 3px var(--theme-primary-opacity-20, rgba(37, 99, 235, 0.2));
}

/* 폼 헤더 배지 효과 */
.hero-form-wrapper .inline-flex {
    position: relative;
    overflow: hidden;
}

.hero-form-wrapper .inline-flex::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: badge-shine 3s ease-in-out infinite;
}

@keyframes badge-shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* 폼 컨테이너 호버 시 글로우 강화 */
.hero-form-wrapper:hover .bg-gradient-to-br {
    opacity: 0.7 !important;
}

/* 입력 필드 포커스 시 아이콘 색상 변경 */
.hero-input:focus + div i,
.hero-input:focus ~ div i {
    color: rgb(37, 99, 235) !important;
    opacity: 0.8 !important;
}

/* 모바일 반응형 조정 */
@media (max-width: 767px) {
    .hero-form-wrapper > div:first-child,
    .hero-form-wrapper > div:nth-child(2),
    .hero-form-wrapper > div:nth-child(3),
    .hero-form-wrapper > div:nth-child(4) {
        width: 6px;
        height: 6px;
    }
    
    .hero-form-wrapper .bg-gradient-to-br {
        opacity: 0.3;
    }
}

/* 타이머 컨테이너 - 화면 너비에 맞춰 최대한 크게 (vw 기준 스케일) */
#timer-container.timer-container,
.timer-container {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    /* 뷰포트 너비에 비례해 폰트 스케일 (8자+콜론3 = 약 11단위, 여유 있게 7vw, 최대 7rem) */
    font-size: clamp(1rem, 7vw, 7rem);
}

/* Seven Segment Font (세븐 세그먼트 폰트)
   디지털 시계·전자계량기·계산기에서 쓰는 7분할 숫자 표시(88:88:88 형태, 모든 막대 켜지는 구조)를 본뜬 폰트 */
@font-face {
    font-family: "DSEG7";
    src: url("https://cdn.jsdelivr.net/npm/@fontsource/dseg7-classic@5.2.5/files/dseg7-classic-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 타이머 단일 스트립: DD:HH:MM:SS (88:88:88 형태), 컨테이너 폰트 크기에 맞춰 스케일 */
.timer-display {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.08em;
    min-width: 0;
    width: 100%;
}

/* 콜론 구분자 - 흰색 + 메인컬러 그림자 (컨테이너 font-size 상속) */
.timer-colon {
    font-family: "DSEG7", "Courier New", Consolas, monospace;
    color: #fff;
    text-shadow:
        0 0 4px var(--theme-primary),
        0 0 10px var(--theme-primary-shadow-strong),
        0 0 20px var(--theme-primary-shadow),
        0 0 36px var(--theme-primary-shadow);
    font-size: 1em;
    line-height: 1;
    padding: 0 0.02em;
    user-select: none;
}
@media (min-width: 768px) {
    .timer-colon {
        text-shadow:
            0 0 6px var(--theme-primary),
            0 0 16px var(--theme-primary-shadow-strong),
            0 0 32px var(--theme-primary-shadow),
            0 0 48px var(--theme-primary-shadow);
    }
}

/* 타이머 숫자 - 박스 없음, 흰색 + 메인컬러 그림자 (컨테이너 font-size 상속) */
.timer-digit-box {
    font-family: "DSEG7", "Courier New", Consolas, monospace;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.02em;
    text-shadow:
        0 0 4px var(--theme-primary),
        0 0 10px var(--theme-primary-shadow-strong),
        0 0 20px var(--theme-primary-shadow),
        0 0 32px var(--theme-primary-shadow);
    transition: text-shadow 0.2s;
    flex-shrink: 0;
}
.timer-digit-box:hover {
    text-shadow:
        0 0 6px var(--theme-primary),
        0 0 14px var(--theme-primary-shadow-strong),
        0 0 28px var(--theme-primary-shadow),
        0 0 44px var(--theme-primary-shadow);
}
@media (min-width: 768px) {
    .timer-digit-box {
        text-shadow:
            0 0 6px var(--theme-primary),
            0 0 16px var(--theme-primary-shadow-strong),
            0 0 32px var(--theme-primary-shadow),
            0 0 48px var(--theme-primary-shadow);
    }
}