movie/resources/sass/mobile/board/view.scss

/* 게시판 보기 */
#boardView
{
    box-sizing: border-box;
    padding: calc(var(--bs-gutter-x) * 0.5);

    .head {
        h5 {
            font-weight: bold;
            margin-bottom: 0;
        }
    }

    .body {
        margin: 20px 0;

        table {
            border: 1px solid #222c36;
            margin-bottom: 6px;

            > &:not(:first-child) {
                border-top: none;
            }

            tr {
                th, td {
                    text-align: left;
                    vertical-align: middle;
                    word-break: break-all;
                }
            }

            // 게시글 상단
            thead {
                tr {
                    th {
                        background: #090a0b;
                        border-bottom: 1px solid #222c36;

                        h5 {
                            margin-bottom: 0;
                            padding: 5px 0;
                        }
                    }

                    td {
                        img {
                            width: 100%;
                            max-width: 82px;
                        }

                        strong {
                            font-size: 0.813rem;
                            color: #56889a;
                        }

                        small {
                            font-size: 0.688rem;
                            vertical-align: baseline;
                            margin-left: 10px;
                            padding-left: 10px;
                            border-left: 1px solid #2c3946;
                        }

                        p {
                            font-size: 0.75rem;
                            margin-bottom: 0;
                        }

                        // 조회, 댓글, 좋아요, 싫어요, IP, QR, 인쇄, 주소
                        & ul {
                            display: inline-block;
                            list-style: none;
                            margin: 0;
                            padding: 0;

                            > li {
                                display: inline-block;

                                &::after {
                                    display: inline-block;
                                    content: "";
                                    width: 1px;
                                    height: 11px;
                                    background: #2c3946;
                                    vertical-align: inherit;
                                    margin: 0;
                                }

                                span {
                                    font-size: 0.75rem;
                                    padding: 0 10px;

                                    var {
                                        font-style: inherit;
                                    }

                                    i {
                                        margin-right: 5px;
                                    }
                                }

                                &:first-child span {
                                    padding-left: 0;
                                }

                                &:last-child span {
                                    padding-right: 0;
                                }

                                &:last-child::after {
                                    display: none;
                                    width: 0;
                                }
                            }
                        }

                        // SNS 공유
                        & ol {
                            min-width: auto;
                            margin-left: 20px;
                            border-radius: 0;
                            border-color: #cfcfcf #999 #666 #999;
                            border-width: 1px 1px 1px 0;
                            border-style: solid;
                            box-shadow: 2px 0 2px rgb(0 0 0 / 10%), 0 4px 4px rgb(0 0 0 / 20%), -2px 2px 2px rgb(0 0 0 / 10%);
                            -moz-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.2), -2px 2px 2px rgba(0, 0, 0, 0.1);
                            -webkit-box-shadow: 2px 0 2px rgb(0 0 0 / 10%), 0 4px 4px rgb(0 0 0 / 20%), -2px 2px 2px rgb(0 0 0 / 10%);

                            > li {
                                line-height: initial;
                                padding: 0.4rem 1.2rem;
                                cursor: pointer;

                                &:hover,
                                &:focus,
                                &:active {
                                    background: #eaeaea;
                                    color: #000;
                                }

                                i {
                                    margin-right: 3px;
                                }
                            }
                        }
                    }

                    &:last-child {
                        border-bottom: 1px solid #222c36;
                    }
                }
            }

            // 게시글 내용
            tbody {
                tr {
                    td {

                        // Links, Files
                        & ol {
                            margin: 0;
                            padding: 2px 10px;
                            list-style: none;

                            > li {
                                margin-bottom: 6px;

                                i {
                                    vertical-align: -2px;
                                }

                                &:last-child {
                                    margin-bottom: 0;
                                }
                            }
                        }

                        // 내용
                        blockquote {
                            min-height: 50px;
                            padding: 5px;
                            margin: 0;

                            img {
                                object-fit: cover;
                                max-width: 100%;
                                height: auto;
                            }

                            iframe {
                                width: 100%;

                                @supports (-webkit-touch-callout: none) {
                                    width: -webkit-fill-available;
                                }
                            }

                            pre[class*="language-"],
                            code[class*="language-"] {
                                overflow: auto;
                                white-space: break-spaces;
                                word-break: break-word;
                            }
                        }
                    }
                }
            }

            // 추천/비추천, 태그
            tfoot {
                tr {
                    td {
                        text-align: center;

                        button {
                            margin: 0 2px 0 2px;
                        }
                    }

                    &:last-child td {
                        text-align: left;
                        padding: 10px 18px 18px 18px;
                    }
                }
            }
        }

        nav {
            .dropdown-menu {
                min-width: auto;
                border-radius: 0;
                border-color: #cfcfcf #999 #666 #999;
                border-width: 1px 1px 1px 0;
                border-style: solid;
                box-shadow: 2px 0 2px rgb(0 0 0 / 10%), 0 4px 4px rgb(0 0 0 / 20%), -2px 2px 2px rgb(0 0 0 / 10%);
                -moz-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.2), -2px 2px 2px rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: 2px 0 2px rgb(0 0 0 / 10%), 0 4px 4px rgb(0 0 0 / 20%), -2px 2px 2px rgb(0 0 0 / 10%);

                .dropdown-item {
                    line-height: initial;
                    padding: 0.4rem 1.2rem;
                    cursor: pointer;

                    &:hover,
                    &:focus,
                    &:active {
                        background: #eaeaea;
                        color: #000;
                    }
                }
            }
        }
    }

    // 댓글 영역
    .foot {
        box-sizing: content-box;

        table {
            border: 1px solid #222c36;
            margin-bottom: 0;

            tr {
                th, td {
                    text-align: initial;
                    vertical-align: middle;
                    word-break: break-all;
                }
            }

            thead {
                tr {
                    th {
                        background: transparent;
                        border-bottom: 1px solid #222c36;

                        h5 {
                            font-size: 0.938rem;
                            font-weight: normal;
                            margin-bottom: 0;
                            padding: 5px 0;
                        }
                    }
                }
            }

            tbody {
                tr {
                    td {
                        border-top: 0;
                    }
                }
            }
        }
    }
}