:root {
    --text-color: #222;
    --main-bg-color: rgba(220, 134, 75, 1);
    --main-bg-color-transp: rgba(220, 134, 75, 0);
    --main-bg-color-dark: rgba(193, 85, 39, 0.8);
    --main-lt-color: rgba(248, 247, 244, 1);
    --main-dk-color-transp: rgba(0, 0, 0, 0.7);
    --main-shadow-color: rgba(0, 0, 0, 0.3);
}

@font-face {
    font-family: "Pretendard-Regular";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
        format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "GyeonggiBatang";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GyeonggiBatang.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}

html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Pretendard-Regular", Dotum, dotum, sans-serif;
    font-size: 1.1rem;
    line-height: 1.5rem;
    font-weight: 300;
    color: var(--text-color);
    background-color: var(--main-bg-color);
    min-height: 100vh;
    position: relative;
    word-break: keep-all;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h6,
button,
.btn,
label,
blockquote {
    font-weight: normal;
    font-family: "GyeonggiBatang", Batang, batang, sans-serif;
    letter-spacing: -0.1rem;
}

a {
    color: var(--main-lt-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

blockquote {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 1rem 1rem 2rem;
}
blockquote:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: var(--main-lt-color);
    border-radius: 60px;
}

figure {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    margin: 0;
}

figure.half-right {
    left: initial;
    right: 0;
    width: 60%;
}

figure.half-left {
    left: 0;
    width: 60%;
}

.hero {
    position: relative;
    width: 100%;
    height: 150vh;
}
.hero:nth-child(1) figure {
    background-image: url("/res/img/main/_MG_8636.jpg");
}
.hero:nth-child(2) figure {
    background-image: url("/res/img/main/_MG_0446.jpg");
}
.hero:nth-child(3) figure {
    background-image: url("/res/img/main/02_feb_01.jpg");
}
.hero:nth-child(4) figure {
    background-image: url("/res/img/main/_MG_8683.jpg");
}
.hero:nth-child(5) figure {
    background-image: url("/res/img/main/06_jun_01.jpg");
}
.hero:nth-child(6) figure {
    background-image: url("/res/img/main/04_apr_02.jpg");
}
.hero:nth-child(7) figure {
    background-image: url("/res/img/main/03_mar_01.jpg");
}

.hero figure {
    background-position: center;
    transition: 0.5s;
    animation-timing-function: ease-in-out;
}

#bg3t,
#bg4t {
    opacity: 0;
}

#bg3,
#bg4 {
    z-index: -1;
}

.hero-inner {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    clip: rect(0, auto, auto, 0);
}
@supports (-webkit-overflow-scrolling: touch) {
    .hero-inner {
        clip: unset;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}

.hero__title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    margin: 3rem 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: var(--main-lt-color);
    font-size: 8vw;
    text-align: center;
    text-shadow: 2px 2px 3px var(--text-color);
}

.hero__box {
    display: flex;
    align-items: center;
    justify-content: left;
    position: fixed;
    top: 0;
    right: 0;
    padding: 0;
    width: 42%;
    height: 100%;
    color: var(--text-color);
    background-color: var(--main-bg-color);
}

.hero__content {
    margin: 2rem;
}

.pagetitle {
    position: absolute;
    top: 8vw;
    left: 5rem;
}
.pagesubtitle {
    position: absolute;
    font-size: 4.2vw;
    left: 9rem;
    top: 17vw;
}
.pagedesc {
    font-size: 1.7rem;
    margin-bottom: 12vh;
}

.hero__books {
    display: flex;
    align-items: center;
    justify-content: left;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.left-shelf,
.mid-shelf,
.right-shelf {
    transition: 0.5s;
    animation-timing-function: ease-in-out;
}

.left-shelf {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    text-align: center;
    top: 0;
    left: 0;
    padding: 0;
    width: 42%;
    height: 100%;
}

.left-shelf-folded {
    left: -42%;
}

.left-shelf-flip {
    left: auto;
    right: 0;
}

.left-shelf-flip-folded {
    right: -42%;
}

.books__title {
    margin: 4vw 0;
    padding: 0;
    color: var(--main-lt-color);
    font-size: 6.7vw;
    text-align: center;
    text-shadow: 2px 2px 3px var(--text-color);
}
.books__link {
    font-size: 1.8vw;
    margin: 0;
}

.mid-shelf {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    position: fixed;
    top: 0;
    left: 42%;
    padding: 0;
    width: 58%;
    height: 100%;
}

.mid-shelf-left {
    left: 0%;
}

.mid-shelf-flip {
    left: auto;
    right: 42%;
}

.mid-shelf-flip-right {
    right: 0;
}

.books,
.mags {
    display: grid;
    grid-template-rows: auto;
    transform: translate(-2rem, -0.5rem);
}

.books {
    grid-template-columns: 1fr 1fr;
}

.mags {
    grid-template-columns: 1fr 1fr 1fr;
}

.book {
    position: relative;
    width: 11rem;
    height: 15rem;
    margin: 2rem;
}

.mags .book {
    width: 9rem;
    height: 11rem;
    margin: 1.2rem;
}

.book-inner {
    position: absolute;
    width: 100%;
    height: 100%;
}

.book-pages {
    position: absolute;
    width: 100%;
    height: 100%;
    border: var(--main-lt-color) 0.1rem solid;
    background-color: var(--main-lt-color);
    z-index: -1;
    box-shadow: 2px 2px 3px var(--main-shadow-color);
}

.mag-pages {
    border: var(--text-color) 0.1rem solid;
    box-shadow: 2px 2px 3px var(--text-color);
}

.book-pagesX {
    position: absolute;
    width: 100%;
    height: 4%;
    background-color: #ccc;
    z-index: -2;
    transform: translate(0.3rem, 15.2rem) scale(1.015, 1) skewX(30deg);
    box-shadow: 2px 2px 3px var(--main-shadow-color),
        -1px 2px 3px var(--text-color);
}

.book-pagesY {
    position: absolute;
    height: 100%;
    width: 3%;
    background-color: #aaa;
    z-index: -3;
    transform: translate(11.2rem, 0.4rem) scale(1, 1.01) skewY(60deg);
    box-shadow: 2px 2px 3px var(--text-color);
}

.book__cover {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: 100%;
    color: var(--main-lt-color);
    background-color: var(--text-color);
    transform: none;
    border: var(--text-color) 0.1rem solid;
    transition: 0.2s;
    animation-timing-function: ease-in-out;
}

.mags .book__cover {
    color: var(--text-color);
    background-color: var(--main-lt-color);
}

.book__cover-border {
    position: absolute;
    width: 88%;
    height: 88%;
    margin: 6%;
    border: var(--main-bg-color) 0.1rem solid;
    z-index: 1;
}

.mags .book__cover-border {
    position: absolute;
    width: 100%;
    height: 0;
    margin: 51% 0 0;
    border: var(--text-color) 0.05rem solid;
    z-index: 1;
    top: 0;
}

.book:hover .book__cover,
.book__active .book__cover {
    transform: translate(-0.28rem, -0.5rem) scale(0.95, 1) skewY(-5deg);
}

.book__active .book-pagesY {
    box-shadow: 2px 2px 5px var(--main-bg-color);
}

.book__active .book-pagesX {
    box-shadow: 2px 2px 3px var(--main-shadow-color),
        -1px 2px 5px var(--main-bg-color);
}

.book__active .mag-pages {
    box-shadow: 2px 2px 3px var(--main-bg-color);
}

.book__title-area {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 58%;
}

.mags .book__title-area {
    height: 42%;
}

.book__title {
    padding: 0;
    margin: 0 2rem;
    font-size: 1.2rem;
}

.mags .book__title {
    margin: 0 0.8rem;
    font-size: 1.1rem;
}

.book__cover > figure {
    display: flex;
    position: absolute;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 42%;
    overflow: hidden;
}

.mags figure {
    height: 58%;
}

.book__cover img {
    width: 100%;
    align-self: center;
}

.book__cover .img-wide {
    width: auto;
    height: 100%;
}

.book__cover .img-top {
    align-self: start;
}

.right-shelf {
    display: grid;
    align-items: center;
    justify-content: left;
    position: fixed;
    top: 0;
    left: 100%;
    padding: 0;
    width: 42%;
    height: 400vh;
    color: var(--main-lt-color);
    background-color: var(--main-dk-color-transp);
}

.right-shelf-open {
    left: 58%;
}

.right-shelf-flip {
    left: auto;
    right: 100%;
    height: 900vh;
}

.right-shelf-flip-open {
    right: 58%;
}

.right-shelf h3 {
    font-size: 1.8rem;
    line-height: 2.5rem;
    margin: 0;
}

.right-shelf article {
    margin: 0 7vw 0 5vw;
    display: flex;
    height: 100vh;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.btn-area {
    margin-top: 3rem;
    width: 100%;
    height: fit-content;
    position: relative;
    height: 4.7rem;
}
button,
.button {
    padding: 0.8rem 1.5rem;
    font-size: 1.2rem;
    background-color: var(--main-bg-color);
    border: none;
    position: absolute;
    right: 3rem;
}

button:hover,
.button:hover {
    color: var(--main-bg-color-dark);
    background-color: var(--main-lt-color);
    text-decoration: none;
}

/* appendix */
.hero__dblcol {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: -5vh;
    left: 0;
    margin: 3rem 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: var(--main-lt-color);
    text-align: center;
    text-shadow: 2px 2px 3px var(--text-color);
}

.col {
    background-color: var(--main-dk-color-transp);
    margin-bottom: 5vh;
    width: 30%;
    height: fit-content;
    margin: 5vh;
    padding: 5rem 2rem;
    max-width: 20rem;
}

.col .button {
    position: relative;
    right: auto;
    top: 1rem;
}

/* footer */
.hero__centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: -5vh;
    left: 0;
    margin: 3rem 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: var(--main-lt-color);
    text-align: center;
    text-shadow: 2px 2px 3px var(--text-color);
}

.contact-card {
    background-color: var(--main-dk-color-transp);
    margin-bottom: 5vh;
    width: 40%;
    height: fit-content;
}

.contact-card h2 {
    font-size: 2rem;
}

footer {
    font-family: "GyeonggiBatang", Batang, batang, sans-serif;
}

/* styling tools */
.align-right {
    text-align: right;
}

@media (min-width: 1200px) {
    .hero__title {
        font-size: 6rem;
    }
    .books__title {
        font-size: 5rem;
    }
    .pagesubtitle {
        font-size: 3.15rem;
    }
}

@media (max-width: 800px) {
    body:before {
        content: "";
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -10;
        background: url("/res/bg.jpg") no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    p {
        font-size: 1rem;
    }

    .m-right {
        background-position: right !important;
    }

    .pagetitle {
        left: 3rem;
    }

    .pagesubtitle {
        left: 5rem;
    }

    .hero__box {
        width: 100%;
    }

    .m-content {
        position: relative;
        margin: 0 auto;
        height: fit-content;
    }

    .m-content .hero-inner {
        margin: 0 auto;
        max-width: 700px;
        position: initial;
        overflow: initial;
        clip: initial;
    }

    .m-content .hero__box {
        position: initial;
    }

    .m-content figure {
        position: initial;
        display: block;
        height: 20rem;
        width: 100%;
        margin: 0;
    }

    .pagedesc p {
        font-size: 5.5vw;
    }
    .right-shelf {
        width: 62%;
    }

    .right-shelf-open {
        left: 48%;
    }
    .right-shelf article {
        margin: 0 12vw 0 5vw;
    }
    .right-shelf-flip-open {
        right: 45%;
    }
    .right-shelf-flip {
        width: 55%;
    }

    .right-shelf-flip article {
        margin: 0 5vw 0;
    }

    .books {
        grid-template-columns: 1fr;
    }

    .books__title {
        font-size: 7vw;
    }
    .books__link {
        font-size: 2.5vw;
    }

    .book {
        width: 15vh;
        height: 20vh;
        margin: 1.2vh;
    }

    .book__cover-border {
        width: 90%;
        height: 90%;
    }

    .book__title {
        margin: 0 1.5vh;
        font-size: 2.2vh;
        line-height: 3.2vh;
    }

    .book-pagesX {
        display: none;
    }

    .book-pagesY {
        display: none;
    }

    .mags {
        grid-template-columns: 1fr 1fr;
        width: 100%;
        padding-left: 3rem;
    }

    .mags .book {
        width: 10vh;
        height: 13vh;
        margin: 2vh 1vh;
    }

    .mags .book__cover-border {
        margin: 75% 0 0;
    }

    .mags .book__title-area {
        height: 58%;
    }
    .mags .book__title {
        margin: 0 0.5rem;
        font-size: 0.8rem;
        line-height: 1rem;
    }

    .mags figure {
        height: 42%;
    }

    .book:hover .book__cover,
    .book__active .book__cover {
        transform: translate(-0.2rem, -0.35rem) scale(0.95, 1) skewY(-5deg);
    }

    .hero__dblcol {
        flex-direction: column;
        margin: 2rem 0;
    }

    .col {
        width: 60vw;
        padding: 1rem 2rem;
        margin: 2vh;
        max-width: 20rem;
    }

    .contact-card {
        padding: 2rem 3rem;
        word-break: break-word;
    }
}