movie/resources/sass/mobile/layout.scss

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#header {
    position: relative;
    background: #012a4f;
    border-bottom: 1px solid #2c2c2c;
    margin-bottom: 10px;

    .navbar {
        .navbar-brand {
            color: #d3d629;
            font-size: 1.2rem;
            font-family: 'Open-Sans-Extrabold';
            font-weight: bolder;
        }

        .navbar-toggler,
        .navbar-toggler-icon {
            color: #a8aa2f;
        }

        #navbarSearch {
            margin-top: 7px;

            form {
                display: flex;
                flex-wrap: nowrap;

                input[type="search"] {
                    flex-shrink: 1;
                }

                button[type="submit"] {
                    flex-shrink: 0;
                    flex-basis: auto;
                }
            }
        }
    }

    #navbarMenu {
        max-width: 290px;
        background: #0f0f0f;
        color: #b7b8ba;

        .offcanvas-header {

            .offcanvas-title {
                font-size: 1.2rem;
                font-family: 'Open-Sans-Extrabold';
                font-weight: bolder;
            }

            &:nth-of-type(2) {
                padding-top: 0;

                .dropdown {
                    height: inherit;

                    .dropdown-item {
                        color: #333;

                        &:active {
                            background: none;
                        }
                    }
                }
            }
        }

        .offcanvas-body {
            padding-top: 0;

            > nav {
                margin-bottom: 30px;

                .nav {
                    .nav-link {
                        padding-left: 0;
                        padding-right: 0;
                        padding-bottom: 2px;
                    }
                }
            }

            .ad-coupang {
                height: auto;
                margin-top: auto;
                line-height: 0;

                small {
                    font-size: 11px;
                    color: #b7b8ba;
                    line-height: 15px;
                    margin-top: 10px;
                    display: block;
                }
            }

            table {
                width: 100%;

                caption {
                    caption-side: top;
                    padding: 0 0;
                    color: #b7b8ba;
                }

                tr {
                    th {
                        text-align: left;
                        padding: 3px 0;
                        font-weight: inherit;
                    }

                    td {
                        text-align: right;
                        padding: 3px 0;
                    }
                }
            }

            address {
                color: #8d8d8d;
                font-size: 0.7rem;
                line-height: 3rem;
                text-align: center;
                margin-bottom: 0;
            }
        }
    }
}

#main {
    flex-grow: 1;
    background: #0f0f0f;
    padding: 10px 0;

    // 내 정보 네비
    .navigate {
        ul {
            white-space: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            flex-wrap: inherit !important;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none;
            }

            li {
                a.active {
                    color: #fff;
                }
            }
        }
    }
}

footer {
    background: #0f0f0f;
    text-align: center;
    border-top: 1px solid #3d3d3d;
    padding: 15px 16px 0 20px;

    small {
        font-size: 12px;
        color: #bbbbbb;
        line-height: 15px;
        margin-top: 10px;
        display: block;
    }

    address {
        color: #839900;
        font-size: 0.7rem;
        margin-bottom: 0;
        text-align: center;
    }
}

// 게시판 에디터 색상
.mce-content-body  {
    background: #1f1f1f;
    color: #c1c1c1;
}

div.pagination {
    width: 100%;

    > ul {
        width: inherit;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;

        > li {
            width: inherit;
            text-align: center;

            > a {
                height: 100%;
                padding-left: 0;
                padding-right: 0;
            }
        }
    }
}