@charset "utf-8";
/* ============================================================
   hero.css
   메인 Hero 영역 — 4종 통합
   - .main-hero--type1 : 배너 롤링형 (풀폭 1배너 슬라이드, 마케팅 중심)
   - .main-hero--type2 : 동영상 비주얼형 (브랜드 강조)
   - .main-hero--type3 : 슬라이드 + 로그인/신청 박스 (NEOTSOFT 표준)
   - .main-hero--type4 : 비주얼 + 기능 위젯 (전환 중심)
   ============================================================ */

/* ----- 공통 베이스 (Hero 영역 폰트: JalnanGo / 잘난2) ----- */
.main-hero {position: relative; overflow: hidden; width: 100%; font-family: "JalnanGo", "Pretendard", sans-serif;}
.main-hero .hero-copy {position: relative; z-index: 2;}
.main-hero .hero-title {font-size: 48px; font-weight: 400; line-height: 1.25; color: #fff; letter-spacing: -.5px;}
.main-hero .hero-desc {margin-top: 18px; font-size: 20px; font-weight: 400; color: rgba(255, 255, 255, .9);}
.main-hero .hero-cta {margin-top: 32px; display: flex; gap: 12px;}


/* ============================================================
   Type 1 — 배너 롤링형
   ============================================================ */
.main-hero--type1 {position: relative; height: 720px; overflow: hidden;}

/* 마름모 격자 — 사각형 격자(18px)를 45도 회전 */
.main-hero--type1::after {content: ""; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 18px 18px; transform: rotate(45deg); pointer-events: none; z-index: 2;}


.main-hero--type1 .hero-slider {position: relative; width: 100%; height: 100%;}
.main-hero--type1 .hero-slide {position: absolute; inset: 0; opacity: 0; transition: opacity .8s;}
.main-hero--type1 .hero-slide.is-active {opacity: 1;}
.main-hero--type1 .hero-slide-bg {position: absolute; inset: 0; background-size: cover; background-position: center;}
.main-hero--type1 .hero-slide-bg::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 38, 85, .72) 0%, rgba(20, 38, 85, .35) 35%, rgba(20, 38, 85, .05) 70%, rgba(20, 38, 85, 0) 95%);}
.main-hero--type1 .hero-copy {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 3;}
.main-hero--type1 .hero-copy .inner {color: #fff;}
.main-hero--type1 .hero-indicator {position: absolute; left: 0; bottom: 32px; width: 100%; display: flex; justify-content: center; gap: 8px; z-index: 3;}
.main-hero--type1 .hero-indicator button {width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .4);}
.main-hero--type1 .hero-indicator button.is-active {background: #fff; width: 32px; border-radius: 6px;}
.main-hero--type1 .hero-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: #0373e9; color: #fff; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; z-index: 3; transition: background .2s ease, transform .2s ease;}
.main-hero--type1 .hero-arrow:hover {background: #0260c4; transform: translateY(-50%) scale(1.06);}
.main-hero--type1 .hero-arrow--prev {left: max(20px, calc((100% - 1600px) / 2 + 20px));}
.main-hero--type1 .hero-arrow--next {right: max(20px, calc((100% - 1600px) / 2 + 20px));}

/* Type 1 — 텍스트 등장 모션 (슬라이드가 .is-active 될 때마다 stagger 자동 재생) */
.main-hero--type1 {--hero1-text-y: 40px; --hero1-text-blur: 8px; --hero1-desc-y: 28px; --hero1-btn-y: 20px;}
.main-hero--type1 .hero-slide .hero-title,
.main-hero--type1 .hero-slide .hero-desc,
.main-hero--type1 .hero-slide .hero-cta .btn {opacity: 0; will-change: transform, opacity, filter;}
.main-hero--type1 .hero-slide.is-active .hero-title {animation: hero1-title-in .9s cubic-bezier(.22, .61, .36, 1) .1s both;}
.main-hero--type1 .hero-slide.is-active .hero-desc {animation: hero1-desc-in .8s cubic-bezier(.22, .61, .36, 1) .35s both;}
.main-hero--type1 .hero-slide.is-active .hero-cta .btn {animation: hero1-btn-in .65s cubic-bezier(.22, .61, .36, 1) both;}
.main-hero--type1 .hero-slide.is-active .hero-cta .btn:nth-child(1) {animation-delay: .55s;}
.main-hero--type1 .hero-slide.is-active .hero-cta .btn:nth-child(2) {animation-delay: .7s;}

@keyframes hero1-title-in {
	from {opacity: 0; transform: translateY(var(--hero1-text-y)); filter: blur(var(--hero1-text-blur));}
	to {opacity: 1; transform: translateY(0); filter: blur(0);}
}
@keyframes hero1-desc-in {
	from {opacity: 0; transform: translateY(var(--hero1-desc-y));}
	to {opacity: 1; transform: translateY(0);}
}
@keyframes hero1-btn-in {
	from {opacity: 0; transform: translateY(var(--hero1-btn-y)) scale(.96);}
	to {opacity: 1; transform: translateY(0) scale(1);}
}

/* 태블릿 — 모션 강도 약화 */
@media (max-width: 1023px) {
	.main-hero--type1 {--hero1-text-y: 28px; --hero1-text-blur: 5px; --hero1-desc-y: 22px; --hero1-btn-y: 16px;}
}
/* 모바일 — 더 작게 */
@media (max-width: 767px) {
	.main-hero--type1 {--hero1-text-y: 20px; --hero1-text-blur: 3px; --hero1-desc-y: 16px; --hero1-btn-y: 14px;}
}
/* 접근성 — prefers-reduced-motion 사용자는 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
	.main-hero--type1 .hero-slide .hero-title,
	.main-hero--type1 .hero-slide .hero-desc,
	.main-hero--type1 .hero-slide .hero-cta .btn {opacity: 1; animation: none;}
}


/* ============================================================
   Type 2 — 동영상 비주얼형
   ============================================================ */
.main-hero--type2 {height: 100vh; min-height: 600px; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);}
/* 1920 해상도 전체 80% 축소(UserCommon.css :root{zoom:.8}) 보정.
   zoom 아래서 100vh는 화면의 80%(864px)로만 렌더됨. 화면을 꽉 채우려면 축소 전 기준 125vh(=100/0.8, ×0.8→1080px) 필요.
   단, 헤더(site-header--type4: topbar 37 + top 76 = 113px)가 흐름에서 자리를 차지하므로 그만큼 빼야 하단이 정확히 뷰포트 바닥에 닿음.
   → calc(125vh - 113px) : 1920x1080에서 히어로 하단 = 1080px 로 딱 맞음 */
@media (min-width: 1900px) and (max-width: 1920px) {
	.main-hero--type2 {height: calc(125vh - 113px);}
}
.main-hero--type2 .hero-video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.main-hero--type2 .hero-video-fallback {position: absolute; inset: 0; background-size: cover; background-position: center; display: none;}
.main-hero--type2::after {content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .55) 100%); z-index: 1;}
.main-hero--type2::before {content: ""; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 18px 18px; transform: rotate(45deg); pointer-events: none; z-index: 2;}
.main-hero--type2 .hero-copy {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 3;}
.main-hero--type2 .hero-title {text-shadow: 2px 2px 0 rgba(0, 0, 0, .45); font-size: 68px;}
.main-hero--type2 .hero-desc {font-size: 22px;}
.main-hero--type2 .hero-cta {justify-content: center;}

/* Type 2 — 타이틀/설명 폰트 사이즈 반응형 (type2 전용 override) */
@media (max-width: 1279px) {
	.main-hero--type2 .hero-title {font-size: 58px;}
	.main-hero--type2 .hero-desc {font-size: 22px;}
}
@media (max-width: 1023px) {
	.main-hero--type2 .hero-title {font-size: 48px;}
	.main-hero--type2 .hero-desc {font-size: 20px;}
}
@media (max-width: 767px) {
	.main-hero--type2 .hero-title {font-size: 34px;}
	.main-hero--type2 .hero-desc {font-size: 17px;}
}
@media (max-width: 479px) {
	.main-hero--type2 .hero-title {font-size: 28px;}
	.main-hero--type2 .hero-desc {font-size: 16px;}
}

/* Type 2 — 시네마틱 entrance 모션 (페이지 진입 시 1회 재생) */
.main-hero--type2 {--hero2-title-scale: 1.08; --hero2-title-blur: 12px; --hero2-desc-y: 20px; --hero2-btn-y: 16px;}
.main-hero--type2 .hero-title,
.main-hero--type2 .hero-desc,
.main-hero--type2 .hero-cta .btn {opacity: 0; will-change: transform, opacity, filter;}
.main-hero--type2 .hero-title {animation: hero2-title-in 1.2s cubic-bezier(.16, 1, .3, 1) .2s both;}
.main-hero--type2 .hero-desc {animation: hero2-desc-in .8s cubic-bezier(.16, 1, .3, 1) .7s both;}
.main-hero--type2 .hero-cta .btn {animation: hero2-btn-in .7s cubic-bezier(.16, 1, .3, 1) 1s both;}

@keyframes hero2-title-in {
	from {opacity: 0; transform: scale(var(--hero2-title-scale)); filter: blur(var(--hero2-title-blur)); letter-spacing: -2px;}
	to {opacity: 1; transform: scale(1); filter: blur(0); letter-spacing: -.5px;}
}
@keyframes hero2-desc-in {
	from {opacity: 0; transform: translateY(var(--hero2-desc-y));}
	to {opacity: 1; transform: translateY(0);}
}
@keyframes hero2-btn-in {
	from {opacity: 0; transform: translateY(var(--hero2-btn-y)) scale(.95);}
	to {opacity: 1; transform: translateY(0) scale(1);}
}

/* Type 2 모션 — 반응형 강도 조정 */
@media (max-width: 1023px) {
	.main-hero--type2 {--hero2-title-scale: 1.06; --hero2-title-blur: 8px; --hero2-desc-y: 16px; --hero2-btn-y: 14px;}
}
@media (max-width: 767px) {
	.main-hero--type2 {--hero2-title-scale: 1.04; --hero2-title-blur: 4px; --hero2-desc-y: 12px; --hero2-btn-y: 10px;}
}
/* Type 2 — 접근성 (모션 줄이기 사용자 즉시 표시) */
@media (prefers-reduced-motion: reduce) {
	.main-hero--type2 .hero-title,
	.main-hero--type2 .hero-desc,
	.main-hero--type2 .hero-cta .btn {opacity: 1; animation: none;}
}


/* ============================================================
   Type 3 — 슬라이드 + 로그인/신청 박스 (NEOTSOFT 표준)
   ============================================================ */
.main-hero--type3 {position: relative; padding: 80px 0 0px; background: var(--c-bg-soft); overflow: hidden;}
.main-hero--type3 .hero-bg-video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.main-hero--type3 .hero-bg-overlay {position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .1) 100%); z-index: 1; pointer-events: none;}
.main-hero--type3 .inner {position: relative; z-index: 2;}
.main-hero--type3 .hero-grid {display: grid; grid-template-columns: 1.75fr 1fr; gap: 24px; align-items: stretch;}

/* ----- 좌측 2배너 슬라이더 ----- */
.main-hero--type3 .hero-slider3 {position: relative; aspect-ratio: 944 / 715; align-self: start; margin-bottom: 36px;}  /* 롤링배너 1장 = 465×715 비율 고정 (2장 나란히 + gap14 → 944:715). align-self:start = 우측 로그인 높이가 배너 비율을 왜곡하지 않게 */
.main-hero--type3 .hero-viewport {position: absolute; inset: 0; overflow: hidden;}  /* 트랙만 잘라낸다 — 화살표(left:-12px)·인디케이터(bottom:-28px)는 슬라이더 직계라 안 잘림 */
.main-hero--type3 .hero-track {display: flex; gap: 14px; height: 100%; transition: transform .6s cubic-bezier(.22, .61, .36, 1); will-change: transform;}  /* 배너 1장씩 가로 이동 (2장 보이되 한 칸씩) */
.main-hero--type3 .hero-banner {flex: 0 0 calc((100% - 14px) / 2); position: relative; border-radius: var(--radius-l); overflow: hidden; padding: 36px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; cursor: pointer; transition: transform .25s;}
.main-hero--type3 .hero-banner:hover {transform: translateY(-3px);}
.main-hero--type3 .hero-banner-img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.main-hero--type3 .hero-banner::after {display: none;}
.main-hero--type3 .hero-banner--blue {background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);}
.main-hero--type3 .hero-banner--orange {background: linear-gradient(135deg, #c2410c 0%, #fb923c 100%);}
.main-hero--type3 .hero-banner--purple {background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 100%);}
.main-hero--type3 .hero-banner--green {background: linear-gradient(135deg, #14532d 0%, #22c55e 100%);}
.main-hero--type3 .hero-banner-tag {display: inline-block; align-self: flex-start; padding: 4px 12px; background: rgba(255, 255, 255, .2); border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .5px; margin-bottom: 14px; position: relative; z-index: 2;}
.main-hero--type3 .hero-banner-title {position: relative; z-index: 2; font-size: 26px; font-weight: 800; line-height: 1.25; margin-bottom: 8px;}
.main-hero--type3 .hero-banner-desc {position: relative; z-index: 2; font-size: 14px; opacity: .9; line-height: 1.5;}
.main-hero--type3 .hero-banner-cta {position: relative; z-index: 2; margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 10px 18px; background: rgba(255, 255, 255, .2); border-radius: 99px; font-size: 13px; font-weight: 600; backdrop-filter: blur(4px);}

.main-hero--type3 .hero-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--c-text); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-s); z-index: 5; font-size: 18px;}
.main-hero--type3 .hero-arrow:hover {background: #fff; color: var(--c-primary);}
.main-hero--type3 .hero-arrow--prev {left: -12px;}
.main-hero--type3 .hero-arrow--next {right: -12px;}
.main-hero--type3 .hero-indicator {position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5;}
.main-hero--type3 .hero-indicator button {width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: width .2s, background .2s;}
.main-hero--type3 .hero-indicator button.is-active {background: #fff; width: 28px; border-radius: 5px;}

/* Type 3 — 페이지 진입 시 등장 모션 (좌측 슬라이더는 좌→, 우측 사이드는 위→/우→ stagger) */
.main-hero--type3 {--hero3-x: 30px; --hero3-y: 24px;}
.main-hero--type3 .hero-slider3,
.main-hero--type3 .hero-login,
.main-hero--type3 .hero-action-btn {opacity: 0; will-change: transform, opacity;}
.main-hero--type3 .hero-slider3 {animation: hero3-slide-in .9s cubic-bezier(.22, .61, .36, 1) .1s both;}
.main-hero--type3 .hero-login {animation: hero3-up-in .8s cubic-bezier(.22, .61, .36, 1) .3s both;}
.main-hero--type3 .hero-action-btn--buy {animation: hero3-right-in .7s cubic-bezier(.22, .61, .36, 1) .5s both;}
.main-hero--type3 .hero-action-btn--ship {animation: hero3-right-in .7s cubic-bezier(.22, .61, .36, 1) .65s both;}

/* Type 3 — 슬라이드 전환마다 활성 페어 배너 stagger 등장 */
.main-hero--type3 .hero-track .hero-banner {animation: hero3-banner-in .8s cubic-bezier(.22, .61, .36, 1) both;}
.main-hero--type3 .hero-track .hero-banner:nth-child(1) {animation-delay: 0s;}
.main-hero--type3 .hero-track .hero-banner:nth-child(2) {animation-delay: .12s;}

@keyframes hero3-slide-in {
	from {opacity: 0; transform: translateX(calc(var(--hero3-x) * -1));}
	to {opacity: 1; transform: translateX(0);}
}
@keyframes hero3-up-in {
	from {opacity: 0; transform: translateY(var(--hero3-y));}
	to {opacity: 1; transform: translateY(0);}
}
@keyframes hero3-right-in {
	from {opacity: 0; transform: translateX(var(--hero3-x));}
	to {opacity: 1; transform: translateX(0);}
}
@keyframes hero3-banner-in {
	from {opacity: 0; transform: scale(.96);}
	to {opacity: 1; transform: scale(1);}
}
/* Type 3 — 접근성 (모션 줄이기 사용자 즉시 표시) */
@media (prefers-reduced-motion: reduce) {
	.main-hero--type3 .hero-slider3,
	.main-hero--type3 .hero-login,
	.main-hero--type3 .hero-action-btn,
	.main-hero--type3 .hero-track .hero-banner {opacity: 1; animation: none;}
}

/* ----- 우측 로그인/신청 박스 ----- */
.main-hero--type3 .hero-side {display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 450px; justify-self: end; margin-bottom: 36px;}
.main-hero--type3 .hero-login {flex: 1; min-height: 0; background: #fff; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-s); display: flex; flex-direction: column; font-family: var(--ff-base);}
.main-hero--type3 .hero-login .login-body, .main-hero--type3 .hero-login input, .main-hero--type3 .hero-login button, .main-hero--type3 .hero-login a, .main-hero--type3 .hero-login label {font-family: var(--ff-base);}
.main-hero--type3 .login-head {padding: 14px 24px; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent, #5a35d1) 100%); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 1px;}
.main-hero--type3 .login-body {padding: 22px 24px; flex: 1; display: flex; flex-direction: column;}
.main-hero--type3 .login-body > form {flex: 1; min-height: 0; display: flex; flex-direction: column;}  /* 실사이트 로그인폼(form 래퍼)이 카드 높이를 채우게 → 하단 소셜버튼 margin-top:auto가 바닥고정, 배너 높이 증가로 form 아래 생기던 여백 제거 */
.main-hero--type3 .login-field {margin-bottom: 10px; flex: 1 1 auto; display: flex; flex-direction: column;}  /* 배너높이로 카드가 늘어난 만큼 입력필드가 세로로 늘어나 로그인버튼 아래 여백을 채움 (남는공간 없으면 자연높이) */
.main-hero--type3 .login-field-label {display: block; font-size: 15px; color: var(--c-primary); font-weight: 700; margin-bottom: 4px;}
.main-hero--type3 .login-field .fld {min-height: 40px; height: auto; flex: 1 1 auto; font-size: 14px;}
.main-hero--type3 .login-options {display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--c-text-sub); margin: 8px 0 12px;}
.main-hero--type3 .login-options label {display: inline-flex; align-items: center; gap: 4px; cursor: pointer;}
.main-hero--type3 .login-options a:hover {color: var(--c-primary);}
.main-hero--type3 .login-find {display: inline-flex; align-items: center; gap: 6px;}  /* 아이디찾기 / 비밀번호찾기 — 팝업이 달라 링크 분리 */
.main-hero--type3 .login-find-sep {color: var(--c-line);}
/* 로그인 버튼 — 평상시: 은은한 광택 sweep + 아이콘 살짝 흔들림 / 오버시: 떠오름 + 광택 가속 + 아이콘 전진 */
.main-hero--type3 .login-submit {position: relative; overflow: hidden; width: 100%; height: 74px; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .25s ease, transform .25s ease, box-shadow .25s ease;}  /* transition은 base에 선언 — 마우스오버 전/후 모두 부드럽게 전환 */
.main-hero--type3 .login-submit::after {content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .14) 50%, transparent 100%); transform: skewX(-20deg); animation: login-shine 4s ease-in-out infinite;}
.main-hero--type3 .login-submit > span, .main-hero--type3 .login-submit-icon {position: relative; z-index: 1;}  /* 광택 레이어 위로 텍스트/아이콘 노출 */
.main-hero--type3 .login-submit:hover {transform: translateY(-2px);}
.main-hero--type3 .login-submit:hover::after {animation-duration: 1.6s;}
.main-hero--type3 .login-submit:active {transform: translateY(0);}
.main-hero--type3 .login-submit-icon {width: 20px; height: 20px; flex: 0 0 20px; transition: transform .25s ease; animation: login-icon-nudge 4s ease-in-out infinite;}  /* 얇은 stroke 로그인(입장) 아이콘 — 버튼 텍스트 우측 */
.main-hero--type3 .login-submit:hover .login-submit-icon {animation: none; transform: translateX(4px);}
@keyframes login-shine {
	0% {left: -60%;}
	55%, 100% {left: 130%;}
}
@keyframes login-icon-nudge {
	0%, 60%, 100% {transform: translateX(0);}
	68% {transform: translateX(3px);}
	76% {transform: translateX(0);}
}
@media (prefers-reduced-motion: reduce) {
	.main-hero--type3 .login-submit, .main-hero--type3 .login-submit-icon {transition: none; animation: none;}
	.main-hero--type3 .login-submit::after {display: none;}
	.main-hero--type3 .login-submit:hover {transform: none;}
	.main-hero--type3 .login-submit:hover .login-submit-icon {transform: none;}
}
.main-hero--type3 .login-social {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 0; padding-top: 10px;}  /* 입력필드가 늘어나며 여백을 흡수하므로 소셜버튼 상단 auto여백 제거(필드 바로 아래 자연배치) */
.main-hero--type3 .login-social .btn-soc {height: 46px; font-size: 15px; font-weight: 600; border-radius: var(--radius-s); display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid transparent;}
.main-hero--type3 .login-social .btn-soc-icon {width: 15px; height: 15px; flex: 0 0 15px;}
.main-hero--type3 .login-social .btn-soc i {font-size: 15px;}
.main-hero--type3 .login-social .btn-soc--naver {background: #03c75a; color: #fff;}
.main-hero--type3 .login-social .btn-soc--kakao {background: #fee500; color: #3c1e1e;}
.main-hero--type3 .login-social .btn-soc--signup {background: #fff; color: var(--c-text); border-color: var(--c-line);}

/* 로그인 후(MY INFO) — UserDev.css 의 .hero-login 계열(0,2,0)이 hero.css 보다 뒤에 로드되므로 0,3,0 특이도로 재조정 */
.main-hero--type3 .hero-login .user-welcome {padding: 20px 12px; font-size: 15px;}  /* 환영 문구 영역 — 높이 확대 (UserDev 기본 8px 12px / 13px) */
.main-hero--type3 .hero-login .user-welcome i {font-size: 16px;}
.main-hero--type3 .hero-login .stat-item .label {font-size: 15px;}  /* 항목 라벨(예치금·사서함·주문문의·노데이터·미결제) — UserDev 기본 13px */
.main-hero--type3 .hero-login .stat-item {padding: 13px 11px;}  /* 항목 자체 높이는 소폭 확대 — 축소는 항목 사이 간격으로만 */
.main-hero--type3 .hero-login .user-welcome {margin-bottom: 16px;}  /* 예치금 위 여백 확대 */
.main-hero--type3 .hero-login .user-stats {gap: 0; justify-content: center;}  /* 항목 상하간격 축소 — 행 늘이기(UserDev flex:1)를 끄고 자연높이로 묶어 세로 가운데 배치 */
.main-hero--type3 .hero-login .user-stats > .stat-item, .main-hero--type3 .hero-login .user-stats > .stat-row {flex: 0 0 auto;}  /* 남는 높이를 행이 흡수하지 않게 → 여백은 그룹 위/아래로 */
.main-hero--type3 .hero-login .user-buttons {margin-top: 16px;}  /* 노데이터·미결제 아래 여백 확대 */
.main-hero--type3 .hero-login .mypage-btn, .main-hero--type3 .hero-login .logout-btn {padding: 18px 12px; font-size: 16px;}  /* 마이페이지 / 로그아웃 버튼 높이 확대 (기본 11px) */
.main-hero--type3 .hero-actions {display: flex; flex-direction: column; gap: 8px;}
.main-hero--type3 .hero-action-btn {display: flex; align-items: center; gap: 12px; padding: 22px 16px; border-radius: var(--radius-m); border: 1px solid; font-family: var(--ff-base); transition: transform .15s, box-shadow .15s;}
.main-hero--type3 .hero-action-btn:hover {transform: translateX(2px); box-shadow: var(--shadow-s);}
.main-hero--type3 .hero-action-btn--buy {background: #fff5e6; border-color: #ffd9a8;}
.main-hero--type3 .hero-action-btn--buy:hover {background: #ffe8c8;}
.main-hero--type3 .hero-action-btn--ship {background: #e6f0ff; border-color: #b3ccff;}
.main-hero--type3 .hero-action-btn--ship:hover {background: #c8dfff;}
.main-hero--type3 .hero-action-icon {width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px;}
.main-hero--type3 .hero-action-text {flex: 1; font-weight: 700; color: var(--c-text); font-size: 22px;}
.main-hero--type3 .hero-action-arrow {color: var(--c-text-sub); font-size: 22px;}


/* ============================================================
   Type 4 — 롤링배너형 (8개 가로 무한 롤링)
   ============================================================ */
.main-hero--type4 {height: 540px; background: var(--c-bg-soft); padding: 80px 0; overflow: hidden; max-width: 100%; width: 100%; box-sizing: border-box;}
.main-hero--type4 .hero-roll {position: relative; width: 100%; height: 100%; max-width: 100%;}
.main-hero--type4 .hero-roll-track {display: flex; height: 100%; will-change: transform; transition: none;}
.main-hero--type4 .hero-roll-track.is-animating {transition: transform .4s cubic-bezier(.2, .8, .2, 1);}

/* 좌우 스크롤 버튼 */
.main-hero--type4 .hero-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .96); color: var(--c-text); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); z-index: 10; font-size: 22px; transition: background .2s, color .2s, box-shadow .2s; cursor: pointer;}
.main-hero--type4 .hero-arrow:hover {background: var(--c-primary); color: #fff; box-shadow: 0 6px 20px rgba(41, 98, 255, .35);}
.main-hero--type4 .hero-arrow:active {transform: translateY(-50%) scale(.95);}
.main-hero--type4 .hero-arrow--prev {left: 16px;}
.main-hero--type4 .hero-arrow--next {right: 16px;}
.main-hero--type4 .hero-roll-item {position: relative; flex: 0 0 310px; height: 100%; margin-right: 16px; border-radius: 10px; overflow: hidden; padding: 28px 24px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; cursor: pointer; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; z-index: 1;}
.main-hero--type4 .hero-roll-item:hover {transform: scale(1.18); box-shadow: 0 16px 40px rgba(0, 0, 0, .28); z-index: 5;}
.main-hero--type4 .hero-roll-img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.main-hero--type4 .hero-roll-item::before {content: ""; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .1);}
.main-hero--type4 .hero-roll-item::after {content: ""; position: absolute; left: -30px; bottom: -30px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .06);}
.main-hero--type4 .hero-roll-tag {position: relative; z-index: 2; display: inline-block; align-self: flex-start; padding: 4px 12px; background: rgba(255, 255, 255, .22); border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .5px; margin-bottom: 14px; backdrop-filter: blur(4px);}
.main-hero--type4 .hero-roll-title {position: relative; z-index: 2; font-size: 22px; font-weight: 800; line-height: 1.3; margin-bottom: 8px;}
.main-hero--type4 .hero-roll-desc {position: relative; z-index: 2; font-size: 13px; opacity: .9; line-height: 1.5; margin-bottom: 14px;}
.main-hero--type4 .hero-roll-arrow {position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 13px; font-weight: 600; opacity: .85;}
.main-hero--type4 .hero-roll-item--c1 {background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);}
.main-hero--type4 .hero-roll-item--c2 {background: linear-gradient(135deg, #c2410c 0%, #fb923c 100%);}
.main-hero--type4 .hero-roll-item--c3 {background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 100%);}
.main-hero--type4 .hero-roll-item--c4 {background: linear-gradient(135deg, #14532d 0%, #22c55e 100%);}
.main-hero--type4 .hero-roll-item--c5 {background: linear-gradient(135deg, #991b1b 0%, #ef4444 100%);}
.main-hero--type4 .hero-roll-item--c6 {background: linear-gradient(135deg, #155e75 0%, #06b6d4 100%);}
.main-hero--type4 .hero-roll-item--c7 {background: linear-gradient(135deg, #0f172a 0%, #475569 100%);}
.main-hero--type4 .hero-roll-item--c8 {background: linear-gradient(135deg, #831843 0%, #ec4899 100%);}


/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1279px) {
	.main-hero--type1 {height: 640px;}
	.main-hero--type2 {height: 100vh; min-height: 600px;}
	.main-hero--type3 .hero-banner-title {font-size: 22px;}
	.main-hero--type4 {height: 490px; padding: 70px 0;}
	.main-hero--type4 .hero-roll-item {flex: 0 0 290px; padding: 24px 22px;}
	.main-hero--type4 .hero-roll-title {font-size: 19px;}
	.main-hero .hero-title {font-size: 42px;}
}

@media (max-width: 1023px) {
	.main-hero--type1 {height: 560px;}
	.main-hero--type2 {height: 100vh; min-height: 540px;}
	.main-hero--type3 .hero-grid {grid-template-columns: 1fr; gap: 20px;}
	.main-hero--type3 .hero-side {max-width: none;}
	.main-hero--type3 .hero-login {flex: 0 0 auto;}
	.main-hero--type3 .hero-banner {padding: 28px;}
	.main-hero--type3 .hero-banner-title {font-size: 22px;}
	/* Type 3 모션 — 태블릿 강도 약화 */
	.main-hero--type3 {--hero3-x: 22px; --hero3-y: 20px;}
	.main-hero--type4 {height: 440px; padding: 60px 0;}
	.main-hero--type4 .hero-roll-item {flex: 0 0 250px; padding: 22px 20px;}
	.main-hero--type4 .hero-roll-title {font-size: 18px;}
	.main-hero .hero-title {font-size: 34px;}
	.main-hero .hero-desc {font-size: 18px;}
}

@media (max-width: 767px) {
	.main-hero--type1 {height: 460px;}
	.main-hero--type1 .hero-arrow {display: none;}
	.main-hero--type1 .hero-indicator {bottom: 20px;}
	.main-hero--type2 {height: 100vh; min-height: 480px;}
	.main-hero--type2 .hero-video {display: block;}
	/* 모바일도 동영상 유지 → 폴백 div 숨김 (영상 실패 시 위 .main-hero--type2 다크 배경이 폴백) */
	.main-hero--type2 .hero-video-fallback {display: none;}
	.main-hero--type3 {padding: 20px 0;}
	.main-hero--type3 .hero-slider3 {height: auto; aspect-ratio: auto;}  /* 모바일은 배너 원본비율(contain)로 세로 나열 → 비율고정 해제 */
	.main-hero--type3 .hero-viewport {position: relative; inset: auto;}  /* 슬라이더 높이가 auto 라 절대배치를 풀어야 배너 높이가 살아난다 */
	.main-hero--type3 .hero-track {gap: 10px; height: auto;}
	.main-hero--type3 .hero-banner {flex: 0 0 100%;}  /* 모바일은 1장씩 */
	/* 모바일 — 롤링배너를 원본 비율 그대로 표시 (crop 없이) */
	.main-hero--type3 .hero-banner {min-height: 0; padding: 0; border-radius: var(--radius-m);}
	.main-hero--type3 .hero-banner-img {position: static; width: 100%; height: auto; object-fit: contain;}
	.main-hero--type3 .hero-banner-title {font-size: 18px;}
	.main-hero--type3 .hero-banner-desc {font-size: 13px;}
	.main-hero--type3 .hero-arrow {display: none;}
	.main-hero--type3 .hero-slider3 {margin-bottom: 28px;}
	.main-hero--type3 .hero-side {margin-bottom: 28px;}
	.main-hero--type3 .hero-indicator {bottom: -22px;}
	.main-hero--type3 .login-body {padding: 18px;}
	/* 모바일 — 구매/배송대행 신청 버튼 좌우 2열, 각 버튼은 아이콘(위)+텍스트(아래) 세로 구조 */
	.main-hero--type3 .hero-actions {padding: 0; flex-direction: row; gap: 10px;}
	.main-hero--type3 .hero-action-btn {flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; padding: 14px 8px; gap: 8px; text-align: center;}
	.main-hero--type3 .hero-action-icon {width: 44px; height: 44px; flex: 0 0 44px; font-size: 20px;}
	.main-hero--type3 .hero-action-text {flex: 0 1 auto; font-size: 15px;}
	.main-hero--type3 .hero-action-arrow {display: none;}
	/* Type 3 모션 — 모바일 강도 약화 */
	.main-hero--type3 {--hero3-x: 18px; --hero3-y: 16px;}
	.main-hero--type4 {height: 380px; padding: 50px 0;}
	.main-hero--type4 .hero-roll-item {flex: 0 0 210px; padding: 20px 18px; margin-right: 12px;}
	.main-hero--type4 .hero-arrow {width: 36px; height: 36px; font-size: 18px;}
	.main-hero--type4 .hero-arrow--prev {left: 8px;}
	.main-hero--type4 .hero-arrow--next {right: 8px;}
	.main-hero--type4 .hero-roll-tag {padding: 3px 10px; font-size: 10px; margin-bottom: 10px;}
	.main-hero--type4 .hero-roll-title {font-size: 16px; margin-bottom: 6px;}
	.main-hero--type4 .hero-roll-desc {font-size: 12px; margin-bottom: 10px;}
	.main-hero .hero-title {font-size: 26px;}
	.main-hero .hero-desc {margin-top: 12px; font-size: 16px;}
	.main-hero .hero-cta {margin-top: 20px;}
}

@media (max-width: 479px) {
	.main-hero--type1 {height: 380px;}
	.main-hero--type2 {height: 100vh; min-height: 420px;}
	.main-hero--type3 .hero-banner {min-height: 0; padding: 0;}
	.main-hero--type3 .hero-banner-title {font-size: 16px;}
	.main-hero--type4 {height: 330px; padding: 45px 0;}
	.main-hero--type4 .hero-roll-item {flex: 0 0 170px; padding: 18px 16px;}
	.main-hero--type4 .hero-roll-title {font-size: 14px;}
	.main-hero .hero-title {font-size: 22px;}
}

/* Type 2 — 작은 모바일: 타이틀 확대 + 설명 볼드 (일반 ≤479 블록보다 뒤에 두어 소스순서로 우선 적용) */
@media (max-width: 479px) {
	.main-hero--type2 .hero-title {font-size: 30px;}
	.main-hero--type2 .hero-desc {font-weight: 600;}
}


/* ============================================================
   Hero 배경 이미지 (image/hero/ 폴더의 실제 사진)
   ============================================================ */
.hero-slide-bg--demo1 {background-image: url(../image/hero/background1.png);}
.hero-slide-bg--demo2 {background-image: url(../image/hero/background2.png);}
.hero-slide-bg--demo3 {background-image: url(../image/hero/background3.png);}
.hero-slide-bg--demo4 {background-image: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);}

/* 실배너 슬라이드(업체 배포) — 관리자에 등록한 배너 이미지를 슬라이드에 채운다.
   문구는 배너 이미지가 담당하므로 카피용 어둡게 깔리는 그라데이션은 끈다. */
.hero-slide-bg--banner::after {display: none;}
.main-hero--type1 .hero-slide-img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}


/* ============================================================
   폰트 정책 오버라이드 (_HANDOFF.md §7-3)
   메인이미지-1 / 메인이미지-2 : 타이틀만 잘난체, 그 외(버튼·CTA·설명 등)는 프리텐다드
   - 베이스 .main-hero 에서 "JalnanGo, Pretendard" 상속받는 것을 차단
   - .hero-title 은 베이스 JalnanGo 상속 그대로 유지
   ============================================================ */
.main-hero--type1 .hero-cta,
.main-hero--type1 .hero-cta *,
.main-hero--type1 .hero-arrow,
.main-hero--type1 .hero-desc,
.main-hero--type1 .hero-indicator,
.main-hero--type2 .hero-cta,
.main-hero--type2 .hero-cta *,
.main-hero--type2 .hero-desc {font-family: "Pretendard", sans-serif;}

/* === HERO 4종 시안 변형 (skin) === */

/* ============================================================
   HERO 4종 (skin) — main-hero--type1 베이스를 유지하고 hero-skin--N 추가
   - Type 1 = 기본 (skin 없음과 동일)
   - Type 2 = 다크 오버레이 강화
   - Type 3 = 컬러 패널 + 좌측 강조
   - Type 4 = 박스형 라운드 강조
   ============================================================ */

/* Type 2 — 위→아래 다크 오버레이로 변경 (가독성 강화) */
.hero-skin--2 .hero-slide-bg::after {background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .65) 100%) !important;}
.hero-skin--2 .hero-copy {top: auto; bottom: 80px; transform: none;}
.hero-skin--2 .hero-title {text-shadow: 0 2px 16px rgba(0, 0, 0, .4);}

/* Type 3 — 슬라이더 위에 좌측 컬러 패널 오버레이 (텍스트 영역 강조) */
.hero-skin--3 .hero-slider::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 42%; background: linear-gradient(135deg, rgba(41, 98, 255, .92) 0%, rgba(90, 53, 209, .85) 100%); z-index: 2; pointer-events: none;}
.hero-skin--3 .hero-copy {z-index: 3;}
.hero-skin--3 .hero-slide-bg::after {background: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0, 0, 0, .25) 100%) !important;}

/* Type 4 — 박스형 라운드 강조 (좌우 여백 + 라운드 + 그림자) */
.hero-skin--4 {height: auto !important; padding: 24px 24px 32px;}
.hero-skin--4 .hero-slider {height: 540px; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 23, 42, .25);}
.hero-skin--4 .hero-slide-bg::after {background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 60%) !important;}
.hero-skin--4 .hero-arrow {background: rgba(15, 23, 42, .85);}
@media (max-width: 1023px) {
	.hero-skin--4 {padding: 16px 16px 24px;}
	.hero-skin--4 .hero-slider {height: 460px; border-radius: 16px;}
}
@media (max-width: 767px) {
	.hero-skin--4 {padding: 10px 10px 16px;}
	.hero-skin--4 .hero-slider {height: 360px; border-radius: 12px;}
}