@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&family=Poppins:wght@400;700;900&display=swap');

body {
    background-image: url('https://contents-cdn.viewus.co.kr/image/2024/02/CP-2023-0064/image-a621b644-edab-4b61-991e-e71b01c132c8.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #e2e8f0; /* slate-200 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.8);
    z-index: -1;
}

body.lang-ko { font-family: 'Noto Sans KR', sans-serif; }
body.lang-en { font-family: 'Poppins', sans-serif; }
body.lang-ja { font-family: 'Noto Sans JP', sans-serif; }

.glassmorphic-card {
    background-color: rgba(30, 41, 59, 0.5); /* slate-800 with 50% opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.language-selector .lang-btn {
    transition: all 0.2s ease-in-out;
}

.language-selector .lang-btn.active {
    background-color: #38bdf8; /* sky-400 */
    color: #0f172a; /* slate-900 */
    font-weight: 700;
}

.deal-card, .review-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.deal-card:hover, .review-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2);
}

@media (max-width: 768px) {
    h1, .text-6xl, .text-5xl {
        font-size: 2.5rem; /* 40px */
        line-height: 1.2;
    }

    h2, .text-4xl {
        font-size: 2rem; /* 32px */
        line-height: 1.25;
    }

    h3, .text-3xl {
        font-size: 1.5rem; /* 24px */
        line-height: 1.3;
    }
    
    .text-2xl {
        font-size: 1.375rem; /* 22px */
        line-height: 1.4;
    }

    .text-xl {
        font-size: 1.25rem; /* 20px */
        line-height: 1.5;
    }

    p, .text-lg, .text-base {
        font-size: 1.05rem; /* ~17px */
        line-height: 1.6;
    }

    .text-sm {
        font-size: 0.9rem; /* ~14.4px */
        line-height: 1.4;
    }
    
    .py-20 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .py-24 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .px-8 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}