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;

        .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-menu {
                        background-color: #fff;
                        
                        .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;
                    }
                }
            }
        }

        .offcanvas-footer {
            padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);

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

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

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

#main {
    flex-grow: 1;
    background: #000;
    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: #000;
    text-align: center;
    border-top: 1px solid #3d3d3d;
    padding: 15px 16px 0 16px;

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

    // 하단
    address {
        color: #7c7c7c;
        padding: 8px 16px 0 16px;
        font-size: 13px;
    }
}

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

.pagination {
    width: 100%;
    overflow-x: auto;
    
    > 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;
            }
        }
    }
}