@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap'); 
@import "UTF-8"; 

* {
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body, 
html {
    margin: 0 auto; 
    max-width: 1440px; 
    line-height: 1.5; 
    color: #000000; 
    font-size: 16px; 
    font-weight: 400; 
    font-family: 'Noto Sans SC', sans-serif; 
}

header h1 {
    margin-top: 128px; 
    margin-bottom: 100px; 
}

header h1 img {
    display: block; 
    margin: 0 auto; 
}

.text-area, 
.download-area {
    text-align: center; 
}

.text-area p {
    margin-bottom: 34px; 
    font-size: 34px; 
    line-height: 1.6; 
}

.text-area p:nth-child(3) {
    margin-bottom: 56px; 
}

.text-area a {
    display: block; 
    margin: 0 auto; 
    padding: 10px; 
    width: 258px; 
    height: 64px; 
    color: #000000; 
    font-size: 28px; 
    font-weight: 700; 
    text-align: center; 
    border: 1px solid #000000; 
    border-radius: 50px; 
    text-decoration: none; 
}

.text-area a:hover {
    color: #ffffff; 
    background-color: #000000; 
}

.download-area {
    margin-top: 138px; 
    padding-top: 88px; 
    padding-bottom: 108px; 
    background-color: #000000; 
}

.download-area p {
    color: #ffffff; 
}

.download-area p:nth-child(1) {
    position: relative; 
    padding-top: 108px; 
    font-size: 34px; 
    font-weight: 700; 
}

.download-area p:nth-child(1)::before {
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    width: 88px; 
    height: 78px; 
    background-image: url(./samsung_health_download.png); 
    transform: translateX(-50%); 
}

.download-area p:nth-child(2) {
    margin-top: 6px; 
    margin-bottom: 48px; 
    font-size: 20px; 
}

.download-area a {
    display: block; 
    margin: 0 auto; 
    padding: 8px; 
    width: 226px; 
    height: 40px; 
    color: #ffffff; 
    font-size: 14px; 
    border: 1px solid #ffffff; 
    border-radius: 20px; 
    text-decoration: none; 
    letter-spacing: 0.15em;
}

.download-area a:hover {
    color: #000000; 
    background-color: #ffffff; 
}

.download-area a span {
    display: inline-block; 
    position: relative; 
    padding-right: 24px; 
}

.download-area a span::after {
    content: ""; 
    position: absolute; 
    top: 50%; 
    right: 0; 
    width: 10px; 
    height: 10px; 
    background-image: url(./samsung_health_icon.png);
    transform: translateY(-50%); 
}

footer {
    padding: 28px 24px; 
}

footer p, 
footer a {
    color: #000000; 
    font-size: 12px; 
}

footer a {
    display: block; 
    margin-top: 4px; 
}

@media (prefers-color-scheme: light) {
    /* dark mode인 경우의 CSS */
    body, html {
        color: #000000; 
        background-color: #ffffff; 
    }

    .text-area a {
        color: #000000; 
        border: 1px solid #000000; 
    }

    .text-area a:hover {
        color: #ffffff; 
        background-color: #000000; 
    }

    .download-area {
        background-color: #000000; 
    }

    .download-area p {
        color: #ffffff; 
    }

    .download-area a {
        color: #ffffff; 
        border: 1px solid #ffffff; 
    }

    .download-area a:hover {
        color: #000000; 
        background-color: #ffffff; 
    }

    footer p, 
    footer a {
        color: #000000; 
    }
}

@media (prefers-color-scheme: dark) {
    /* dark mode인 경우의 CSS */
    body, html {
        color: #ffffff; 
        background-color: #000000; 
    }

    .text-area a {
        color: #ffffff; 
        border: 1px solid #ffffff; 
    }

    .text-area a:hover {
        color: #000000; 
        background-color: #ffffff; 
    }

    .download-area {
        background-color: #ffffff; 
    }

    .download-area p {
        color: #000000; 
    }

    .download-area p:nth-child(1)::before {
        background-color: #000000;
    }

    .download-area a {
        color: #000000; 
        border: 1px solid #000000; 
    }

    .download-area a:hover {
        color: #ffffff; 
        background-color: #000000; 
    }

    footer p, 
    footer a {
        color: #ffffff; 
    }
}