/* ========================================
   Store Section 스타일
   Store Section Styles for Sulwhasoo Holiday Festa
   ======================================== */

/* Store Section 기본 스타일 */
.store {
    max-width: 480px; /* 프로젝트 규칙: 480px 고정 너비 */
    margin: 0 auto; /* 중앙 정렬 */
    background: transparent;
    position: relative;
    padding: 0;
}

/* Store 컨테이너 */
.store-container {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}

/* Store 콘텐츠 */
.store-content {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

/* Store 이미지 컨테이너 */
.store-image-container {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: relative; /* 오버레이 버튼을 위한 상대 위치 */
}

/* Store 이미지 */
.store-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none; /* GIF 애니메이션과 충돌 방지 */
}

/* 카드 컨테이너 */
.store-cards-container {
    position: absolute;
    top: 75%;
    left: 5vw;
    right: 5vw;
    height: 44px;  /* auto → 44px로 변경 (카드와 동일한 높이) */
    display: flex;
    gap: 2vw;
    pointer-events: none;
    z-index: 10;
    justify-content: space-between;  /* center → space-between으로 변경 (양쪽 정렬) */
    align-items: center;
    padding-left: 5vw;   /* 4vw → 5vw로 변경 (FIND STORE를 10vw로) */
    padding-right: 5vw;  /* 4vw → 5vw로 변경 (SHARE를 90vw로) */
    background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
    backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
    box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
    border: none !important;             /* 테두리 제거 (강제 적용) */
    outline: none !important;            /* 아웃라인 제거 (강제 적용) */
}

/* 카드 공통 스타일 */
.store-card {
    background: transparent;  /* 완전 투명 */
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    backdrop-filter: none;   /* blur 효과 제거 */
    box-shadow: none;        /* 그림자 제거 */
    pointer-events: none;
    
    /* 버튼과 동일한 크기로 설정 */
    width: 140px;  /* 150px → 140px로 변경 */
    height: 44px;  /* 고정 높이 */
}

/* FIND STORE 카드 */
.store-card-left {
    background: transparent;  /* 완전 투명 */
    backdrop-filter: none;   /* blur 효과 제거 */
    box-shadow: none;        /* 그림자 제거 */
}

/* SHARE 카드 */
.store-card-right {
    background: transparent;  /* 완전 투명 */
    backdrop-filter: none;   /* blur 효과 제거 */
    box-shadow: none;        /* 그림자 제거 */
}

/* 카드 아이콘 */
.card-icon {
    font-size: 2rem;
    color: white;
    margin-bottom: 10px;
}

/* 카드 텍스트 */
.card-text {
    color: white;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 20px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Store 버튼 섹션들 (DOWNLOAD ALL 버튼과 동일한 구조) */
.store-button-section-top {
    position: absolute;
    top: 28%;  /* 27% → 28%로 변경 (1% 아래로) */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

/* 카드 내부 버튼 스타일 */
.store-card .store-support-button {
    width: 100%;
    height: 100%;
    margin-top: 0;
    pointer-events: auto;
    min-height: 44px;  /* 최소 터치 영역 보장 */
    border-radius: 15px;  /* 카드와 동일한 border-radius */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: 1.2;
}

/* Store 버튼 (Event 버튼과 동일한 스타일) */
.store-support-button {
    background: var(--sulwhasoo-black);
    color: var(--sulwhasoo-white);
    border: none;
    border-radius: 8px;
    padding: 1.5rem 2.5rem; /* Event 버튼과 동일한 크기 */
    font-family: 'Theinhardt', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.8rem; /* 1.5rem × 1.2 = 1.8rem (28.8px) */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    min-width: 300px; /* Event 버튼과 동일한 최소 너비 */
    pointer-events: auto; /* 버튼은 클릭 가능 */
}

/* 버튼 텍스트 정렬 스타일 */
.button-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    width: 100%;
    height: 100%;
}

/* SHARE 버튼 특별 스타일 */
.store-button-bottom {
    background: #FF6B35; /* 짙은 오렌지 색상 */
}

/* 각 버튼의 위치 지정 (DOWNLOAD ALL 버튼과 동일한 구조) */
.store-button-top {
    /* position과 transform 제거 - 섹션이 중앙 정렬 담당 */
}

/* CONTACT CUSTOMER SUPPORT 버튼 높이 고정 */
.store-support-button.store-button-top {
    height: 44px;
    padding: 0.5rem 2.5rem; /* 상하 패딩 조정으로 44px 높이 맞춤 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 반응형 미디어 쿼리 */

/* 작은 화면 (360px 이하) - iPhone SE, Galaxy S21 */
@media (max-width: 360px) {
    .store-cards-container {
        bottom: 8vh;
        height: 44px;  /* 18vh → 44px로 변경 */
        left: 3vw;
        right: 3vw;
        gap: 3vw; /* 1.5vw → 3vw로 증가 (간격 2배) */
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
        border: none !important;             /* 테두리 제거 (강제 적용) */
        outline: none !important;            /* 아웃라인 제거 (강제 적용) */
    }
    
    .store-card {
        padding: 12px;
        border-radius: 12px;
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
        border: none !important;             /* 테두리 제거 (강제 적용) */
        outline: none !important;            /* 아웃라인 제거 (강제 적용) */
    }
    
    .store-card-left {
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
    }
    
    .store-card-right {
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
    }
    
    .store-card .store-support-button {
        min-width: 100px;
        font-size: 0.95rem; /* 0.83rem → 0.95rem (15.2px) - 태국어 한 줄 표시 및 가독성 향상 */
        padding: 8px 16px;
        white-space: nowrap;
    }
}

/* 중간 화면 (361px - 390px) - iPhone 12/13/14 */
@media (min-width: 361px) and (max-width: 390px) {
    .store-cards-container {
        bottom: 10vh;
        height: 44px;  /* 22vh → 44px로 변경 */
        left: 4vw;
        right: 4vw;
        gap: 4vw; /* 2vw → 4vw로 증가 (간격 2배) */
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
        border: none !important;             /* 테두리 제거 (강제 적용) */
        outline: none !important;            /* 아웃라인 제거 (강제 적용) */
    }
    
    .store-card {
        padding: 16px;
        border-radius: 14px;
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
        border: none !important;             /* 테두리 제거 (강제 적용) */
        outline: none !important;            /* 아웃라인 제거 (강제 적용) */
    }
    
    .store-card-left {
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
    }
    
    .store-card-right {
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
    }
    
    .store-card .store-support-button {
        min-width: 130px;
        font-size: 1.0rem; /* 0.87rem → 1.0rem (16px) - 태국어 한 줄 표시 및 가독성 향상 */
        padding: 10px 20px;
        white-space: nowrap;
    }
}

/* 큰 화면 (391px 이상) - iPhone Pro Max, Pixel */
@media (min-width: 391px) {
    .store-cards-container {
        bottom: 12vh;
        height: 44px;  /* 25vh → 44px로 변경 */
        left: 5vw;
        right: 5vw;
        gap: 5vw; /* 2.5vw → 5vw로 증가 (간격 2배) */
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
        border: none !important;             /* 테두리 제거 (강제 적용) */
        outline: none !important;            /* 아웃라인 제거 (강제 적용) */
    }
    
    .store-card {
        padding: 20px;
        border-radius: 15px;
    }
    
    .store-card .store-support-button {
        min-width: 150px;
        font-size: 1.1rem; /* 0.97rem → 1.1rem (17.6px) - 태국어 한 줄 표시 및 가독성 향상 */
        padding: 12px 24px;
        white-space: nowrap;
    }
}

/* iPhone 시리즈 최적화 */
@media (max-width: 375px) {
    .store-cards-container {
        bottom: 8vh;
        height: 44px;  /* 18vh → 44px로 변경 */
        left: 3vw;
        right: 3vw;
        gap: 3vw; /* 1.5vw → 3vw로 증가 (간격 2배) */
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
        border: none !important;             /* 테두리 제거 (강제 적용) */
        outline: none !important;            /* 아웃라인 제거 (강제 적용) */
    }
    
    .store-card {
        padding: 12px;
        border-radius: 12px;
    }
    
    .store-card .store-support-button {
        min-width: 100px;
        font-size: 0.95rem; /* 0.83rem → 0.95rem (15.2px) - 태국어 한 줄 표시 및 가독성 향상 */
        padding: 8px 16px;
        white-space: nowrap;
    }
}

/* Android 기기 최적화 */
@media (min-width: 361px) and (max-width: 411px) {
    .store-cards-container {
        bottom: 10vh;
        height: 44px;  /* 23vh → 44px로 변경 */
        left: 4vw;
        right: 4vw;
        gap: 4vw; /* 2vw → 4vw로 증가 (간격 2배) */
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
        border: none !important;             /* 테두리 제거 (강제 적용) */
        outline: none !important;            /* 아웃라인 제거 (강제 적용) */
    }
    
    .store-card {
        padding: 18px;
        border-radius: 14px;
    }
    
    .store-card .store-support-button {
        min-width: 140px;
        font-size: 1.0rem; /* 0.87rem → 1.0rem (16px) - 태국어 한 줄 표시 및 가독성 향상 */
        padding: 10px 20px;
        white-space: nowrap;
    }
}

/* Galaxy S8+ 특화 미디어 쿼리 */
@media (min-width: 360px) and (max-width: 411px) and (-webkit-min-device-pixel-ratio: 3) {
    .store-cards-container {
        background: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
    }
    
    .store-card {
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
        border: none !important;             /* 테두리 제거 (강제 적용) */
        outline: none !important;            /* 아웃라인 제거 (강제 적용) */
    }
    
    .store-card-left {
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
    }
    
    .store-card-right {
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
    }
}

/* Galaxy Fold5 특화 미디어 쿼리 */
@media (min-width: 800px) and (max-width: 1200px) {
    .store-cards-container {
        background: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
    }
    
    .store-card {
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
        border: none !important;             /* 테두리 제거 (강제 적용) */
        outline: none !important;            /* 아웃라인 제거 (강제 적용) */
    }
    
    .store-card-left {
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
    }
    
    .store-card-right {
        background: transparent !important;  /* 배경 완전 투명 (강제 적용) */
        backdrop-filter: none !important;    /* blur 효과 제거 (강제 적용) */
        box-shadow: none !important;         /* 그림자 제거 (강제 적용) */
    }
}

/* 접근성 개선 */
@media (prefers-contrast: high) {
    .store-card {
        background: transparent !important;  /* 강제 투명 */
        border: none !important;             /* 테두리 제거 */
        backdrop-filter: none !important;   /* blur 효과 제거 */
        box-shadow: none !important;        /* 그림자 제거 */
    }
    
    .store-card .store-support-button {
        background: #000;
        color: #fff;
        border: 2px solid #fff;
    }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
    .store-card {
        background: transparent !important;  /* 강제 투명 */
        backdrop-filter: none !important;    /* blur 효과 제거 */
        box-shadow: none !important;         /* 그림자 제거 */
        border: none !important;           /* 테두리 제거 */
        outline: none !important;           /* 아웃라인 제거 */
    }
    
    .store-card-left {
        background: transparent !important;  /* 강제 투명 */
        backdrop-filter: none !important;    /* blur 효과 제거 */
        box-shadow: none !important;       /* 그림자 제거 */
    }
    
    .store-card-right {
        background: transparent !important;  /* 강제 투명 (연한 오렌지색 제거) */
        backdrop-filter: none !important;    /* blur 효과 제거 */
        box-shadow: none !important;       /* 그림자 제거 */
    }
}

/* Store 버튼 호버 효과 (DOWNLOAD ALL 버튼과 동일한 구조) */
.store-support-button:hover {
    background: #333;
    transform: translateY(-2px); /* Y축 이동만 담당 - 섹션이 중앙 정렬 담당 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Store 버튼 활성화 효과 (DOWNLOAD ALL 버튼과 동일한 구조) */
.store-support-button:active {
    transform: translateY(0); /* Y축 이동만 담당 - 섹션이 중앙 정렬 담당 */
}

/* Store 버튼 포커스 효과 */
.store-support-button:focus {
    outline: 2px solid var(--sulwhasoo-white);
    outline-offset: 2px;
}

/* 키보드로 포커스된 경우에만 포커스 링 표시 */
.store-support-button:focus-visible {
    outline: 2px solid var(--sulwhasoo-white);
    outline-offset: 2px;
}

/* 마우스 클릭으로 포커스된 경우 포커스 링 제거 */
.store-support-button:focus:not(:focus-visible) {
    outline: none;
}

/* 포커스 해제를 위한 클래스 */
.store-support-button.focus-removed:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 포커스 해제 애니메이션 */
.store-support-button.focus-removed {
    transition: outline 0.3s ease, box-shadow 0.3s ease;
}

/* PC 전용 스타일 (Mobile과 동일한 스타일 적용) */
@media (min-width: 481px) {
    /* CONTACT CUSTOMER SUPPORT 버튼 - Mobile과 동일한 폰트 크기 */
    .store-support-button {
        font-size: 1.44rem; /* PC에서 Mobile과 동일한 크기 */
    }
    
    /* FIND STORE, SHARE 버튼 - 줄바꿈 방지를 위한 폰트 크기 조정 */
    .store-card .store-support-button {
        font-size: 0.9rem; /* 0.73rem → 0.9rem (14.4px) - 태국어 한 줄 표시 및 가독성 향상 */
        white-space: nowrap;
    }
    
    /* 카드 너비 증가 - FIND STORE와 SHARE 버튼 너비 통일 */
    .store-card {
        width: 150px; /* 140px → 150px */
    }
    
    /* 컨테이너 설정 - PC에서 절대 위치 지정 */
    .store-cards-container {
        left: 0;  /* 전체 너비 사용 */
        right: 0; /* 전체 너비 사용 */
        justify-content: space-between;  /* 양쪽 정렬로 변경 */
        gap: 0;  /* gap 제거 */
    }
    
    /* Find Store 절대 위치 - 중심이 왼쪽에서 127px */
    .store-card-left {
        position: absolute;
        left: 52px;  /* 127px(중심) - 75px(너비/2) */
        margin: 0;
    }
    
    /* Share 절대 위치 - 중심이 오른쪽에서 127px */
    .store-card-right {
        position: absolute;
        right: 52px;  /* 127px(중심) - 75px(너비/2) */
        margin: 0;
    }
}

/* 반응형 디자인 */
@media (max-width: 480px) {
    .store-container {
        padding: 0;
    }
    
    /* Store 버튼 모바일 최적화 */
    .store-support-button {
        padding: 0.8rem 2rem; /* 모바일 최적화된 크기 */
        font-size: 1.44rem; /* 1.2rem × 1.2 = 1.44rem (23.04px) */
        min-width: 280px; /* 모바일 최적화된 최소 너비 */
    }
}

@media (max-width: 360px) {
    .store-image {
        border-radius: 0; /* 라운드 처리 제거 - Terms Section과 일관성 유지 */
    }
}

/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
    .store-image {
        transition: none;
    }
    
    .store-image:hover {
        transform: none;
    }
    
    /* Store 버튼 모션 감소 */
    .store-support-button {
        transition: none;
    }
    
    .store-support-button:hover {
        transform: none;
    }
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    .store-image {
        border: 2px solid var(--sulwhasoo-dark-brown);
    }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
    .store {
        background: var(--sulwhasoo-dark-brown);
    }
}

/* Store 버튼 클릭 애니메이션 */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Store 버튼 클릭 상태 (DOWNLOAD ALL 버튼과 동일한 구조) */
.store-support-button.button-clicked {
    transform: scale(0.95); /* 스케일만 적용 - 섹션이 중앙 정렬 담당 */
    transition: transform 0.1s ease;
}

/* 토스트 메시지 애니메이션 (중앙 정렬은 토스트 자체에서 처리) */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* 터치 디바이스 최적화 */
@media (hover: none) and (pointer: coarse) {
    .store-image:hover {
        transform: none;
    }
    
    .store-image:active {
        transform: scale(0.98);
    }
    
    /* Store 버튼 터치 최적화 (DOWNLOAD ALL 버튼과 동일한 구조) */
    .store-support-button:hover {
        transform: none; /* Y축 이동 제거 - 섹션이 중앙 정렬 담당 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    .store-support-button:active {
        transform: scale(0.98); /* 스케일만 적용 - 섹션이 중앙 정렬 담당 */
        background: #333;
    }
    
    /* 터치 디바이스에서 포커스 링 완전 제거 */
    .store-support-button:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    
    .store-support-button:focus-visible {
        outline: 2px solid var(--sulwhasoo-white);
        outline-offset: 2px;
    }
    
    /* 터치 디바이스에서 포커스 해제 클래스 강화 */
    .store-support-button.focus-removed:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}

/* 토스트 메시지 애니메이션 (SHARE 기능용) */
@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
}