* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbarTrack) var(--scrollbarBackground);
}

body {
    background-color: var(--bodyBackground);
    color: var(--primaryText);

    margin: 0;

    font-family: 'Sunghyun Sans KR', 'Sunghyun Sans', sans-serif;
    font-size: 16px;
}

:root {
    --bodyBackground: #FFFFFF;
    --sectionBackground: #F3F3F5;
    --sectionInsetBackground: #e5e5ea;

    --scrollbarBackground: #FFFFFF;
    --scrollbarTrack: #CCCCCC;

    --toolbarButtonBackground: rgba(249, 249, 251, 0.75);
    --toolbarButtonBackgroundHover: rgba(255, 255, 255, 0.95);
    --toolbarButtonInsetBackground: transparent;
    --toolbarButtonInsetBackgroundHover: transparent;
    --toolbarButtonBorder: linear-gradient(145deg,
            var(--toolbarButtonBorder1),
            var(--toolbarButtonBorder2),
            var(--toolbarButtonBorder3),
            var(--toolbarButtonBorder4));

    --toolbarButtonBorder1: rgba(255, 255, 255, 0.95);
    --toolbarButtonBorder2: rgba(255, 255, 255, 0.28) 38%;
    --toolbarButtonBorder3: rgba(255, 255, 255, 0.08) 58%;
    --toolbarButtonBorder4: rgba(255, 255, 255, 0.95);

    --toolbarButtonBorderWidth: 1.25px;
    --toolbarButtonMinSize: 42px;
    --toolbarButtonBorderRadius: 999px;

    --toolbarResultsMaxHeight: 520px;
    --toolbarResultsBorderRadius: 18px;

    --toolbarText: rgba(60, 60, 62, 0.75);
    --toolbarTextFocus: #000000;
    --toolbarTextDisabled: rgba(60, 60, 62, 0.35);

    --primaryBorder: #CCCCCC;
    --secondaryBorder: #DCDCDC;

    --primaryText: #3c3c3e;
    --secondaryText: rgba(60, 60, 62, 0.75);
    --focusText: #000000;

    --primaryTextAlt: #e5e5ea;
    --focusTextAlt: #ffffff;

    --primaryAccent: #3cc1ff;
    --tintAccent: #E0FBFF;
    --focusAccent: #59CAFF;

    --primaryWarning: #E5294D;
    --tintWarning: #FFEDFF;
    --primaryConfirm: #2EC04F;
    --tintConfirm: #DBFFFF;

    --primaryInteraction: 0.5s cubic-bezier(0.00, 1.02, 0.43, 0.96);

    --productCardBackground: #F9F9FA;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bodyBackground: #000000;
        --sectionBackground: #1c1c1e;
        --sectionInsetBackground: #3c3c3e;

        --scrollbarBackground: black;
        --scrollbarTrack: #3c3c3e;

        --toolbarButtonBackground: rgba(14, 14, 15, 0.85);
        --toolbarButtonBackgroundHover: rgba(0, 0, 0, 1);
        --toolbarButtonBorder: linear-gradient(145deg,
                var(--toolbarButtonBorder1),
                var(--toolbarButtonBorder2),
                var(--toolbarButtonBorder3),
                var(--toolbarButtonBorder4));

        --toolbarButtonBorder1: rgba(249, 249, 249, 0.15);
        --toolbarButtonBorder2: rgba(168, 168, 168, 0.3) 38%;
        --toolbarButtonBorder3: rgba(168, 168, 168, 0.1) 58%;
        --toolbarButtonBorder4: rgba(249, 249, 249, 0.3);

        --toolbarText: rgba(242, 242, 247, 0.75);
        --toolbarTextFocus: #fff;
        --toolbarTextDisabled: rgba(242, 242, 247, 0.5);

        --primaryBorder: #3c3c3e;
        --secondaryBorder: #2c2c2e;

        --primaryText: #e5e5ea;
        --secondaryText: rgba(230, 230, 235, 0.75);
        --focusText: #ffffff;

        --primaryTextAlt: #3c3c3e;
        --focusTextAlt: #000000;

        --primaryWarning: #D14747;
        --tintWarning: #FFF4F4;
        --primaryConfirm: #2EC04F;
        --tintConfirm: #DDFFFF;
    }
}

h1,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    min-width: auto;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 478px) {
    .container {
        max-width: none;
    }
}

@media screen and (max-width: 767px) {
    .container {
        max-width: none;
    }
}

@media screen and (max-width: 990px) {
    .container {
        max-width: 927px;
    }
}

@media screen and (min-width: 991px) {
    .container {
        width: 75%;
        min-width: 927px;
        max-width: 1068px;
    }
}

@media screen and (min-width: 1440px) {
    .container {
        min-width: 1068px;
        max-width: 1440px;
    }
}

@media screen and (min-width: 1920px) {
    .container {
        min-width: 1280px;
        max-width: 1440px;
    }
}

.layout.content-wrapper {
    display: flex;
    flex-direction: column;

    max-width: 100vw;
}

.page.content-wrapper {
    display: flex;
    flex-direction: column;

    margin: 0px 0px 12px 0px;

    gap: 12px;

}

.section.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: var(--sectionBackground);
}

.section.content {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    padding: 24px 0px;
}

.section.action-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    margin-top: 12px;
    gap: 12px;
}

.action {
    margin-top: 12px;
    padding: 12px 32px;
    gap: 6px;
    border-radius: 25px;
    font-size: 17px;
    font-weight: 400;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    border: none;
    min-width: 120px;
    white-space: nowrap;
}

@media only screen and (max-width: 767px) {
    .action {
        font-size: 14px;
        min-width: 30px;
        padding: 7px 15px;
        line-height: 1.43;
    }
}

.action svg {
    width: 14px;
    height: 14px;
}

.action.prefer {
    background-color: var(--primaryAccent);
    color: var(--tintAccent);
}

.action.prefer:hover {
    background-color: var(--focusAccent);
    color: var(--tintAccent);
}

.action.alternative {
    background-color: transparent;
    color: var(--primaryAccent);
    border: 1px solid var(--primaryAccent);
}

.action.nonprefer {
    background-color: var(--secondary-border);
    color: var(--warning);
}

.action.nuetral {
    background-color: transparent;
    color: var(--primaryAccent);
    border: 1px solid var(--primaryAccent);
}

.action.prefer.fill,
.action.nonprefer.fill,
.action.nuetral.fill {
    width: 100%;
}

.h1.hero {
    font-size: 56px;
    line-height: 1;
    font-weight: 700;

    text-align: center;
}

@media only screen and (max-width: 991px) {
    .h1.hero {
        font-size: 48px;
        line-height: 1;
        font-weight: 700;
    }
}

@media only screen and (max-width: 767px) {
    .h1.hero {
        font-size: 40px;
        line-height: 1.125;
        font-weight: 800;
    }
}

@media only screen and (max-width: 478px) {
    .h1.hero {
        font-size: 28px;
        line-height: 1.125;
        font-weight: 900;
    }
}

p {
    margin: 0;
    line-height: 1.5;
}

.p.hero {
    font-size: 32px;
    line-height: 1.4;
    font-weight: 400;

    margin-top: 6px;

    text-align: center;
}

@media only screen and (max-width: 767px) {
    .p.hero {
        font-size: 24px;
        line-height: 1.35;

        max-width: 310px;
    }
}

@media only screen and (max-width: 478px) {
    .p.hero {
        font-size: 20px;
        line-height: 1.25;

        max-width: 256px;
    }
}