/* 더블 탭 및 핀치 줌 방지 */
html, body {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* 버튼 및 인터랙티브 요소 */
button, a, input, textarea, select {
    touch-action: manipulation;
}

/* Welcome 페이지 전용 스타일 */

/* 물결무늬 컨테이너 */
.wave-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

/* 물결무늬 레이어 공통 스타일 */
.wave-layer {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

/* Vector 2 물결무늬 (뒤쪽 레이어, 보라색) */
.wave-white {
    height: calc(550px + (100vw - 375px) * 0.3); /* 화면 너비에 따라 높이 증가 */
    background: url('../assets/index_Vector_2.png') no-repeat;
    background-size: 100% 100%;
    background-position: top center;
    z-index: 2;
}

/* Vector 3 물결무늬 (앞쪽 레이어, 그라데이션) */
.wave-gradient {
    height: calc(537px + (100vw - 375px) * 0.3); /* 화면 너비에 따라 높이 증가 */
    background: url('../assets/index_Vector_3.png') no-repeat;
    background-size: 100% 100%;
    background-position: top center;
    z-index: 3;
}

/* 메인 컨테이너 */
.welcome-container {
    position: relative;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 80px 24px 20px 24px;
    gap: 40px;
    overflow: hidden;
}

/* DingDong 로고 */
.logo-container {
    position: relative;
    left: 13px; /* 기존 14px에서 패딩 24px 차이 조정 */
    width: calc(228.47px + (220vw - 375px) * 0.15); /* 화면 너비에 따라 크기 증가 */
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    z-index: 25;
    flex-shrink: 0;
}

.logo-image {
    width: 100%;
    height: auto;
    aspect-ratio: 228.47 / 83.35;
    object-fit: contain;
}

.logo-icon {
    width: calc(106px + (100vw - 375px) * 0.08);
    height: auto;
    aspect-ratio: 106 / 95;
    object-fit: contain;
}

/* 캐릭터 섹션 */
.character-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    mask-image: url('../assets/index_Vector_3.png');
    -webkit-mask-image: url('../assets/index_Vector_3.png');
    mask-size: 100% calc(550px + (100vw - 375px) * 0.3); /* mask 크기도 화면에 맞게 증가 */
    -webkit-mask-size: 100% calc(550px + (100vw - 375px) * 0.3);
    mask-position: top center;
    -webkit-mask-position: top center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* 캐릭터 위치 설정 */
.character-masked {
    position: absolute;
    top: 180px; /* 고정 위치 유지 */
    right: calc(-60px + (100vw - 375px) * 0.02); /* 화면 크기에 따라 약간 조정 */
    width: calc(280px + (100vw - 375px) * 0.25); /* 화면 너비에 따라 크기 증가 */
    height: calc(550px + (100vw - 375px) * 0.3);
    z-index: 100;
}

.character-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* cover에서 contain으로 변경하여 전체가 보이도록 */
    object-position: center;
}

/* Welcome 섹션 */
.welcome-section {
    position: relative;
    max-width: calc(309px + (100vw - 375px) * 0.2); /* 화면 크기에 따라 너비 증가 */
    z-index: 30;
    margin-top: calc(120px + (100vh - 667px) * 0.1); /* 화면 높이에 따라 아래로 이동 */
    flex-shrink: 0;
}

.welcome-title {
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    font-size: calc(40px + (100vw - 375px) * 0.02 + (100vh - 667px) * 0.015); /* 화면 너비와 높이에 따라 증가 */
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: #323232;
    margin: 0 0 calc(20px + (100vh - 667px) * 0.01) 0;
}

.welcome-description {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: calc(15px + (100vw - 375px) * 0.008 + (100vh - 667px) * 0.005); /* 화면 너비와 높이에 따라 증가 */
    line-height: 1.33;
    letter-spacing: -0.32px;
    color: #71717a;
    margin: 0;
}

.welcome-description strong {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    color: #323232;
}

/* Start 섹션 */
.start-section {
    position: fixed; /* absolute에서 fixed로 변경 */
    bottom: calc(20px + (100vh - 667px) * 0.03); /* 원래 값으로 복원 */
    bottom: calc(20px + (100vh - 667px) * 0.03 + env(safe-area-inset-bottom, 0px)); /* 안전 영역 고려 */
    right: calc(30px + (100vw - 375px) * 0.03); /* 원래 값으로 복원 */
    display: flex;
    align-items: center;
    gap: calc(20px + (100vh - 667px) * 0.02 + (100vw - 375px) * 0.01);
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* 안전 영역 패딩 추가 */
}

.start-text {
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: calc(20px + (100vw - 375px) * 0.02 + (100vh - 667px) * 0.015); /* 텍스트 크기 증가 */
    color: #323232;
    text-transform: uppercase;
    letter-spacing: -0.32px;
}

.start-button {
    width: calc(60px + (100vw - 375px) * 0.05 + (100vh - 667px) * 0.03); /* 원래 크기로 복원 */
    height: calc(60px + (100vw - 375px) * 0.05 + (100vh - 667px) * 0.03); /* 원래 크기로 복원 */
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    position: relative;
    padding: 0;
    -webkit-tap-highlight-color: transparent; /* 모바일 탭 하이라이트 제거 */
}

.start-button:active {
    transform: scale(0.95);
}

.start-button-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 안드로이드 기기 전용 스타일 */
.android-device .welcome-section {
    margin-top: 130px; /* 안드로이드에서 더 아래로 */
}

.android-device .welcome-title {
    font-size: 38px; /* 크기 줄임 */
}

.android-device .welcome-description {
    font-size: 15px; /* 크기 줄임 */
}

.android-device .start-section {
    right: 35px;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px)); /* 안드로이드에서 추가 여백 */
}

.android-device .start-text {
    font-size: 20px; /* 크기 줄임 */
}

.android-device .start-button {
    width: 75px; /* 크기 줄임 */
    height: 75px;
    min-width: 75px;
    min-height: 75px;
}

/* 안드로이드 앱 WebView 전용 스타일 */
/* 네이티브에서 이미 패딩 처리하므로 웹에서는 추가 패딩 불필요 */
.in-app-android .start-section {
    /* 네이티브에서 windowInsetsPadding으로 이미 처리됨 */
    bottom: calc(20px + (100vh - 667px) * 0.03);
    padding-bottom: 0; /* 패딩 제거 */
}