@keyframes as-drift { 0% { transform: translate(-8%, -6%) scale(1.15); } 50% { transform: translate(8%, 6%) scale(1.3); } 100% { transform: translate(-8%, -6%) scale(1.15); } }
@keyframes as-drift2 { 0% { transform: translate(6%, 8%) scale(1.25); } 50% { transform: translate(-7%, -8%) scale(1.1); } 100% { transform: translate(6%, 8%) scale(1.25); } }
@keyframes as-sheen { 0% { opacity: .28; } 50% { opacity: .62; } 100% { opacity: .28; } }
@keyframes as-bobA { 0% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(-3deg); } 100% { transform: translateY(0) rotate(-3deg); } }
@keyframes as-bobB { 0% { transform: translateY(-10px) rotate(4deg); } 50% { transform: translateY(8px) rotate(4deg); } 100% { transform: translateY(-10px) rotate(4deg); } }

.glass { backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); }

/* 첫 화면 한 장에 헤더 · 안내 · 푸터가 다 보이게(고객사 요청) — 시안은 안내 영역만 화면 높이(100vh - 헤더)를 채워서
   푸터가 스크롤 아래에 있었고, 모바일은 패널 아래가 비어 간격이 넓었다. 페이지를 세로 flex로 두고 안내 영역이 남는 높이만 채운다.
   (이 파일은 첫 화면에서만 불러온다 — inc/setup.php) */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.as-landing {
	position: relative;
	background: #08090a;
	flex: 1 0 auto;
	display: flex; align-items: center; justify-content: center;
	padding: 48px 24px;
	overflow: hidden;
}

.as-landing__layer { position: absolute; }
.as-landing__layer--drift1 { inset: -20%; background: radial-gradient(60% 55% at 28% 32%, #262a31 0%, #14161a 42%, #08090a 78%); animation: as-drift 22s ease-in-out infinite; }
.as-landing__layer--drift2 { inset: -20%; background: radial-gradient(50% 46% at 74% 68%, rgba(184,135,59,0.30) 0%, rgba(184,135,59,0.07) 40%, transparent 72%); animation: as-drift2 28s ease-in-out infinite; mix-blend-mode: screen; }
.as-landing__layer--sheen { inset: 0; background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,0.055) 50%, transparent 70%); animation: as-sheen 9s ease-in-out infinite; }
.as-landing__layer--vignette { inset: 0; background: radial-gradient(78% 68% at 50% 50%, transparent 34%, rgba(0,0,0,0.62) 100%); }

.as-landing__pf { position: absolute; z-index: 2; pointer-events: none; background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 26px 60px rgba(0,0,0,.6)); will-change: transform; }
.as-landing__pf--a { top: -26%; left: -17%; width: 60vw; height: 156vh; opacity: 0.55; animation: as-bobA 26s ease-in-out infinite; }
.as-landing__pf--b { bottom: -40%; right: -15%; width: 58vw; height: 168vh; opacity: 0.5; animation: as-bobB 32s ease-in-out infinite; }

.as-landing__panel {
	position: relative; z-index: 5; width: 100%; max-width: 520px; text-align: center;
	background: rgba(14,15,17,0.52); border: 1px solid rgba(255,255,255,0.11); border-radius: 20px;
	padding: 44px 44px 34px; box-shadow: 0 34px 80px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.07);
}
.as-landing__title { font-family: var(--as-font); font-weight: 600; color: #fff; margin: 0; letter-spacing: -0.02em; line-height: 1.1; font-size: 48px; }
.as-landing__sub { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.62); margin: 20px 0 32px; }
.as-landing__cta {
	display: block; width: 100%; box-sizing: border-box; height: 68px; line-height: 68px;
	border-radius: 12px; border: none; background: var(--as-gold); color: var(--as-black);
	font-family: var(--as-font); font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
	cursor: pointer; text-decoration: none;
}
.as-landing__half-row { display: flex; gap: 10px; margin-top: 10px; }
.as-landing__half {
	flex: 1; min-width: 0; height: 54px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.22);
	background: rgba(255,255,255,0.07); color: #fff; font-family: var(--as-font); font-size: 14.5px; font-weight: 600; cursor: pointer;
	display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box;
}
.as-landing__back { display: inline-block; margin-top: 26px; font-size: 12.5px; color: rgba(255,255,255,0.46); text-decoration: underline; text-underline-offset: 3px; }
/* 버튼 hover(고객사 요청) — 위치는 움직이지 않고 색만 바뀐다(사용자 지시 — 떠오르기 · 그림자는 뺐다).
   금색 버튼은 눈에 띄게 밝은 금색(#d9ad64)으로, 반투명 버튼은 글씨 · 테두리가 같은 밝은 금색으로.
   사이트 전체의 a:hover(금색)가 금색 버튼 글씨까지 금색으로 바꿔 "A/S 접수"가 사라졌던 적이 있어 글씨색은 직접 준다. */
.as-landing__cta, .as-landing__half { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.as-landing__cta:hover, .as-landing__cta:focus-visible { color: var(--as-black); background: #d9ad64; }
.as-landing__cta:focus, .as-landing__cta:active { color: var(--as-black); }
.as-landing__cta:active { background: #a8792f; }
.as-landing__half:hover, .as-landing__half:focus-visible { color: #d9ad64; border-color: rgba(217,173,100,0.75); background: rgba(184,135,59,0.12); }
.as-landing__half:active { color: #d9ad64; background: rgba(184,135,59,0.18); }
@media (prefers-reduced-motion: reduce) {
	.as-landing__cta, .as-landing__half { transition: none; }
}

/* 푸터 고객센터 · 입금안내 나란히 — 랜딩만(고객사 요청, 다른 페이지는 시안대로 위아래). 폰은 칸 안에서 줄을 바꾼다 */
.as-footer__cols { flex-direction: row; flex-wrap: wrap; gap: 18px 48px; }

@media (max-width: 720px) {
	.as-landing { padding: 36px 20px; }
	.as-footer__cols { flex-wrap: nowrap; gap: 20px; }
	.as-footer__cols > div { min-width: 0; }
}
/* 주소창 · 하단 바 때문에 보이는 높이가 낮은 폰 — 패널 · 푸터 여백을 줄여 한 화면에 들어가게 */
@media (max-width: 720px) and (max-height: 740px) {
	.as-landing { padding: 20px; }
	.as-landing__panel { padding: 26px 22px 22px; }
	.as-landing__sub { margin: 12px 0 20px; }
	.as-landing__cta { height: 56px; line-height: 56px; }
	.as-landing__half { height: 46px; }
	.as-landing__back { margin-top: 16px; }
	.as-footer { padding: 24px 0; }
}
/* 높이가 낮은 화면(노트북 등)에서도 푸터까지 한 화면에 들어가게 패널을 줄인다 */
@media (max-height: 780px) and (min-width: 721px) {
	.as-landing { padding: 28px 24px; }
	.as-landing__panel { padding: 32px 40px 26px; }
	.as-landing__title { font-size: 40px; }
	.as-landing__sub { margin: 14px 0 22px; }
	.as-landing__cta { height: 58px; line-height: 58px; }
	.as-landing__half { height: 48px; }
	.as-landing__back { margin-top: 18px; }
}

@media (max-width: 480px) {
	.as-landing__panel { max-width: 400px; padding: 32px 24px 28px; }
	.as-landing__title { font-size: 36px; }
	.as-landing__sub { font-size: 13.5px; margin: 16px 0 26px; }
	.as-landing__cta { height: 62px; line-height: 62px; font-size: 17px; }
	.as-landing__half { height: 50px; font-size: 14px; }

	/* 모바일: 이미지 2장을 위/아래로 배치(디자인의 mob HERO_IMGS 그대로) — 데스크톱은 대각선 코너 배치 */
	.as-landing__pf--a { top: -8%; left: -40%; bottom: auto; right: auto; width: 128%; height: 54%; opacity: 0.5; }
	.as-landing__pf--b { bottom: -10%; right: -42%; top: auto; left: auto; width: 126%; height: 52%; opacity: 0.42; }
}