/* ========================================================
   HYEONKYEONG HEO
   CLEAN / APPLE / MoMA ARTIST PORTFOLIO
   SIMPLE FINAL CSS
   ======================================================== */


/* ========================================================
   01. GLOBAL
   ======================================================== */

html,
body {
    scroll-behavior: auto !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #141414;
}

.page,
.content_container,
.site_container {
    transform: none !important;
    animation: none !important;
}


/* ========================================================
   02. BASIC
   ======================================================== */

a {
    transition: opacity .3s ease !important;
}

a:active {
    opacity: .65;
}

.page a.active {
    opacity: .45;
}

i,
em {
    font-style: italic;
}

b,
strong {
    font-weight: 500;
}

sub,
sup {
    position: relative;
    vertical-align: baseline;
}

sub {
    top: .3em;
}

sup {
    top: -.4em;
}

s {
    text-decoration: line-through;
}

ul,
ol {
    margin: 0;
    padding: 0 0 0 1em;
    text-align: left !important;
}

blockquote {
    margin: 0;
    padding: 0 0 0 1.5em;
    border-left: 1px solid rgba(0,0,0,.15);
    text-align: left !important;
}

hr {
    height: 1px;
    margin: 2.5rem 0;
    border: 0;
    background: rgba(0,0,0,.1);
}


/* ========================================================
   03. IMAGES
   ======================================================== */

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 0 0 !important;
    padding: 0;
    border: 0;
}

.content img {
    display: block;
    float: none;
    max-width: 100%;
    max-height: none !important;
    margin: 0 0 1.5rem 0 !important;
    opacity: 1 !important;
    transition: none !important;
}

.content img:hover,
.content img:focus,
.content img:active,
.thumbnails .thumbnail img:hover,
.thumbnails .thumbnail .image_container img:hover {
    opacity: 1 !important;
}


/* ========================================================
   04. BODY TYPOGRAPHY
   ======================================================== */

[data-predefined-style="true"] bodycopy {
    display: block;

    font-family:
        "Social Condensed Variable",
        Icons,
        -apple-system,
        sans-serif;

    font-size: 1.05rem;
    line-height: 1.8;
    font-weight: 400;
    font-style: normal;

    color: #141414;

    letter-spacing: .01em;

    font-variation-settings:
        'wdth' 75,
        'slnt' 0;

    text-align: left !important;
}

[data-predefined-style="true"] bodycopy a {
    color: rgba(20,20,20,.8);
    border-bottom: 1px solid rgba(0,0,0,.3);
    text-decoration: none;

    transition:
        opacity .3s ease,
        border-color .3s ease !important;
}

[data-predefined-style="true"] bodycopy a:hover {
    opacity: .6 !important;
    border-color: rgba(0,0,0,.8) !important;
}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
    border-bottom: 0;
    padding-bottom: 0;
}


/* ========================================================
   05. H1
   ======================================================== */

[data-predefined-style="true"] h1 {
    margin: 0 0 1rem;
    padding: 0;

    font-family:
        "Social Condensed Variable",
        Icons,
        -apple-system,
        sans-serif;

    font-size: 1.6rem;
    line-height: 1.1;
    font-weight: 703;
    font-style: normal;

    color: #141414;
    letter-spacing: -.03em;

    font-variation-settings:
        'wdth' 82.1,
        'slnt' 0;

    text-align: left !important;
}

[data-predefined-style="true"] h1 a {
    color: rgba(0,0,0,.9);
    border-bottom: 1px solid rgb(41,41,41);
}


/* ========================================================
   06. H2
   ======================================================== */

[data-predefined-style="true"] h2 {
    margin: 3rem 0 1rem;
    padding: 0;

    font-family:
        "Social Condensed Variable",
        Icons,
        -apple-system,
        sans-serif;

    font-size: 2.4rem;
    line-height: 1.8;
    font-weight: 600;
    font-style: normal;

    color: #141414;
    letter-spacing: -.01em;

    font-variation-settings:
        'wdth' 75,
        'slnt' 0;

    text-align: left !important;
}

[data-predefined-style="true"] h2 a {
    color: rgba(0,0,0,.6);
    border-bottom: 1px solid rgb(41,41,41);
}


/* ========================================================
   07. SMALL TEXT
   ======================================================== */

[data-predefined-style="true"] small {
    display: inline-block;

    font-family:
        "Diatype Variable",
        Icons,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    font-size: .9rem;
    line-height: 1.8;
    font-weight: 500;
    font-style: normal;

    color: rgba(0,0,0,.5);
    letter-spacing: .02em;

    text-align: left !important;
}

[data-predefined-style="true"] small a {
    color: rgba(0,0,0,.7) !important;
    border-bottom: 1px solid rgba(0,0,0,.2) !important;
    text-decoration: none;
}

[data-predefined-style="true"] small a:hover {
    opacity: .5 !important;
}


/* ========================================================
   08. MAIN LAYOUT
   ======================================================== */

[data-css-preset] .page,
[data-css-preset] body {
    background: #fff;
}

[data-css-preset] .container {
    margin-left: auto;
    margin-right: auto;
        margin-top: 0rem;
    text-align: left !important;
}

.page .container_width,
.content_container .container_width {
    width: 55% !important;
}

[data-css-preset] .content_padding {
    padding: 0;
}


/* ========================================================
   09. HOME THUMBNAILS
   ======================================================== */

div[thumbnails] {
    justify-content: flex-start;
}

[data-css-preset] .thumbnails {
    width: 100%;
    background: #fff;
}

[data-css-preset] .thumbnails_width {
    width: 100%;
}

[data-css-preset] [thumbnails-pad] {
    padding: 1.8rem;
}

[data-css-preset] [thumbnails-gutter] {
    margin: 0;
}


/* ========================================================
   10. THUMBNAIL TITLE
   ======================================================== */

.thumbnails .thumbnail .title {
    display: block !important;
    position: relative !important;

    margin: 0 !important;
    padding: .8rem 0 0 !important;

    background: transparent !important;

    font-family:
        "Diatype Variable",
        Icons,
        -apple-system,
        sans-serif;

    font-size: .8rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .01em;

    color: rgba(0,0,0,.9) !important;

    text-align: left !important;
    opacity: 1 !important;
    transition: none !important;
}

.thumbnails .title span {
    display: inline-block;
    margin: 0;
}


/* ========================================================
   11. THUMBNAIL METADATA
   ======================================================== */

.thumbnails .tags {
    margin: -.2rem 0 .1rem;

    font-family:
        Inter,
        "Diatype Variable",
        Icons,
        -apple-system,
        sans-serif;

    font-size: .75rem;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: .03em;

    color: rgba(0,0,0,.4);

    text-align: left !important;
}

.thumbnails .tags a {
    border-bottom: 0;
    color: rgba(0,0,0,.4);
    text-decoration: none;
}

.thumbnails .has_title .tags {
    margin-top: 1rem;
}


/* ========================================================
   12. SITE MENU BUTTON
   ======================================================== */

[data-css-preset] #site_menu_button {
    position: fixed;

    top: 3rem;
    left: 3rem;

    display: flex;
    justify-content: flex-start;

    padding: 16px;

    color: #141414;
    background: transparent;

    font-size: 14px;
    line-height: 3;

    z-index: 9999;
}

#site_menu_button.custom_icon {
    width: 40px;
    height: 40px;
}

#site_menu_button.active {
    display: none;
}


/* ========================================================
   13. SITE MENU
   ======================================================== */

#site_menu,
#site_menu_container,
.site_menu_content {
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#site_menu {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;

    width: 320px !important;
    min-width: 200px !important;
    max-width: 320px !important;
    height: 100vh !important;

    box-sizing: border-box;

    padding: 110px 30px 30px !important;

    font-family:
        "Diatype Variable",
        Icons,
        -apple-system,
        sans-serif;

    font-size: 14px;
    font-weight: 500;

    text-align: left;

    border-right: 1px solid rgba(0,0,0,.05);
    box-shadow: 8px 0 25px rgba(0,0,0,.035) !important;

    z-index: 99999 !important;
}

#site_menu a,
#site_menu .page-link a,
#site_menu .set-link > a,
.nav-link {
    padding: 0 !important;

    color: rgba(20,20,20,.85) !important;

    font-weight: 450 !important;
    text-decoration: none !important;

    border: 0 !important;

    transition: opacity .3s ease !important;
}

#site_menu a:hover,
#site_menu .page-link a:hover,
#site_menu .set-link > a:hover,
.nav-link:hover {
    opacity: .4 !important;
}

#site_menu a.active {
    color: #000 !important;
    opacity: 1;
}

#site_menu svg,
#site_menu img,
#site_menu .icon {
    display: inline-block;
    max-width: 24px;
    height: auto;
    vertical-align: middle;
}

#site_menu .close {
    display: none;
}

#site_menu .break {
    height: 35px;
    margin-top: 20px;
}

#site_menu .indent {
    margin-left: 20px;
    line-height: 1.2em;
}


/* ========================================================
   14. SITE TITLE
   ======================================================== */

.site_title a,
#site_title a,
.logo a,
#logo a,
.hyeonkyeong-logo {
    color: #141414 !important;

    font-weight: 550 !important;

    text-decoration: none !important;

    border-bottom: 1.5px solid rgba(0,0,0,.7) !important;

    padding-bottom: .15em !important;

    transition:
        opacity .3s ease,
        border-color .3s ease !important;
}

.site_title a:hover,
#site_title a:hover,
.logo a:hover,
#logo a:hover,
.hyeonkyeong-logo:hover {
    opacity: .5 !important;
    border-bottom-color: rgba(0,0,0,.3) !important;
}


/* ========================================================
   15. SHOP
   ======================================================== */

[data-css-preset] #shop_button {
    position: fixed;

    top: 1.5rem;
    right: 1.5rem;

    padding: 6px;

    color: rgba(0,0,0,.85);
    background: transparent;

    font-size: 36px;
    font-weight: 400;
    line-height: 1;
}

#shop_button.text {
    padding: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: 400;
}

#shop_button.custom_icon {
    width: 36px;
    height: auto;
}


/* ========================================================
   16. SHOP PRODUCT
   ======================================================== */

.shop_product {
    position: relative;
    display: block;

    width: 100%;
    max-width: 22rem;
}

.shop_product .price {
    display: block;

    margin-bottom: 1rem;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    font-size: 1.3rem;
    line-height: 1;
    font-weight: 400;

    color: rgba(0,0,0,.9);
}

.shop_product .dropdown {
    display: inline-block;

    width: 100%;

    margin-bottom: 1rem;
    padding: .8rem 2.5rem .8rem 1rem;

    box-sizing: border-box;

    border: 1px solid rgba(0,0,0,.15);

    background:
        #fff
        url(https://static.cargo.site/assets/images/select-line-arrows.svg)
        no-repeat right;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    font-size: 1.3rem;
    line-height: 1.2;

    color: rgba(0,0,0,.9);
}

.shop_product .button {
    display: inline-block;

    padding: .8rem 1rem .9rem;

    background: rgba(0,0,0,.85);

    color: #fff;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    font-size: 1.3rem;
    line-height: 1;

    text-align: left;
}


/* ========================================================
   17. QUICK VIEW
   ======================================================== */

.content img.image-zoom:active {
    opacity: .7;
}

[data-css-preset] .quick-view {
    width: 100%;
    height: 100%;
    padding: 0;
}

[data-css-preset] .quick-view-background {
    background: rgba(0,0,0,.25);
}

.quick-view-caption {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    margin: 3.5rem 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 400;

    text-align: center;
}

.quick-view-caption span {
    display: inline-block;

    padding: .5rem 1rem;

    background: rgba(0,0,0,.6);
    color: #fff;
}


/* ========================================================
   18. FEED
   ======================================================== */

.feed .content_container .page {
    page-break-after: always;
}


/* ========================================================
   19. MOBILE
   ======================================================== */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    /* ----------------------------------------------------
       MOBILE CONTENT
       ---------------------------------------------------- */

    .page .container_width,
    .content_container .container_width {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .page .content,
    .content_container .content {
        width: 100% !important;
        box-sizing: border-box;

        padding: 18px 20px 10px !important;
        margin: 0 !important;

        text-align: left !important;
    }

    .page text-limit,
    .content_container text-limit {
        display: block;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        text-align: left !important;
    }


    /* ----------------------------------------------------
       MOBILE IMAGES
       ---------------------------------------------------- */

    div[thumbnails] {
        width: auto !important;

        margin-left: -20px !important;
        margin-right: -20px !important;

        justify-content: flex-start;
    }

    [data-css-preset] .thumbnails,
    [data-css-preset] .thumbnails_width {
        width: 100% !important;
    }

    [data-css-preset] [thumbnails-pad] {
        padding: 0 !important;
    }

    [data-css-preset] [thumbnails-gutter] {
        margin: 0 !important;
    }

    .thumbnails .thumbnail {
        width: 100%;
        margin-bottom: 36px;
    }

    .thumbnails .thumbnail .image_container,
    .thumbnails .thumbnail .image_container img,
    .thumbnails .thumbnail img {
        display: block;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;

        transform: none !important;
        opacity: 1 !important;
    }


    /* ----------------------------------------------------
       MOBILE THUMBNAIL TEXT
       ---------------------------------------------------- */

    .thumbnails .thumbnail .title {
        padding: 12px 0 0 10px !important;
        margin: 0 !important;
    }

    .thumbnails .tags,
    .thumbnails .has_title .tags {
        margin: 5px 0 0 !important;
        padding: 0 20px !important;

        font-family:
            "Diatype Variable",
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            sans-serif;

        color: rgba(20,20,20,.45);
    }


    /* ----------------------------------------------------
       MOBILE MENU
       ---------------------------------------------------- */

    [data-css-preset] #site_menu_button {
        top: 20px;
        left: 20px;

        padding: 0;

        font-size: 14px;
        line-height: 1.2;
    }

    #site_menu {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 100vh !important;

        padding: 90px 24px 30px !important;

        border: 0 !important;
        box-shadow: none !important;

        overflow-y: auto;
    }

    #site_menu a,
    #site_menu .page-link a,
    #site_menu .set-link > a,
    .nav-link {
        display: block;

        margin: 0 0 16px !important;
        padding: 0 !important;

        font-size: 18px !important;
        line-height: 1.35 !important;
        font-weight: 450 !important;

        color: rgba(20,20,20,.88) !important;
    }

    #site_menu .break {
        height: 0;
        margin-top: 24px;
    }

    #site_menu .indent {
        margin-left: 16px;
        line-height: 1.35;
    }

    #site_menu .close {
        display: block;

        position: absolute;
        top: 15px;
        right: 20px;

        width: 44px;
        height: 44px;

        margin: 0;
        padding: 0;

        color: rgba(20,20,20,.42);

        font-size: 26px;
        line-height: 44px;

        text-align: center;
    }


    /* ----------------------------------------------------
       MOBILE SITE TITLE
       ---------------------------------------------------- */

    .site_title a,
    #site_title a,
    .logo a,
    #logo a,
    .hyeonkyeong-logo {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;

        font-weight: 550 !important;
    }


    /* ----------------------------------------------------
       MOBILE HR
       ---------------------------------------------------- */

    hr {
        margin: 28px 0 !important;
    }


    /* ----------------------------------------------------
       MOBILE QUICK VIEW
       ---------------------------------------------------- */

    [data-css-preset] .quick-view,
    body.mobile .quick-view {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0 !important;
    }

    .quick-view-caption {
        margin: 24px 16px;

        font-size: 14px;
        line-height: 1.4;
    }


    /* ====================================================
       MOBILE TYPE SETTINGS
       ↓ 앞으로 텍스트 크기/간격은 여기만 수정
       ==================================================== */

    [data-predefined-style="true"] bodycopy {
        font-size: 1.65rem !important;
        line-height: 1.8 !important;
        font-weight: 500;
        letter-spacing: .01em;
    }

    [data-predefined-style="true"] h1 {
        font-size: 2.4rem !important;
        line-height: 1.1 !important;
        margin: 0 0 1rem !important;
    }

    [data-predefined-style="true"] h2 {
        font-size: 2.4rem !important;
        line-height: 1.8 !important;
        margin: 3rem 0 1rem !important;
    }

    [data-predefined-style="true"] small {
        font-size: 1.4rem !important;
        line-height: 1.8 !important;
    }

    .gallery_image_caption {
        margin-top: 1.2rem !important;
        margin-bottom: 5rem !important;

        font-size: 1.6rem !important;
        line-height: 1.6 !important;
    }

    .thumbnails .thumbnail .title {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .thumbnails .tags,
    .thumbnails .has_title .tags {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}