blog/resources/sass/mobile/main.scss

#index {

    // 공지사항, 최근 게시글
    .notice, .latest, .photo {
        table {
            border: none;
            border-spacing: 0;
            border-collapse: collapse;

            &.table > :not(caption) > * > * {
                border-bottom: 0;
            }

            &.table-bordered > :not(caption) > * {
                border: none;
            }

            &.table-bordered > :not(caption) > * > * {
                border: 1px solid #222c36;
            }

            tbody {
                tr {
                    th, td {
                        vertical-align: middle;
                    }

                    td {

                        a.board-name {
                            display: block;
                            color: #bbb;
                            margin-bottom: 4px;
                        }

                        p {
                            font-size: 0.813rem;
                            margin-bottom: 0;

                            label {
                                margin-right: 5px;

                                a {
                                    color: #cbd5e0;
                                }
                            }

                            del, a {
                                font-size: 0.875rem;
                                font-weight: normal;
                            }

                            var {
                                color: #aa0000;
                                font-style: normal;
                                margin-left: 3px;
                                letter-spacing: -1px;
                                vertical-align: middle;
                            }

                            i {
                                color: #cbd5e0;
                                margin-left: 3px;
                                vertical-align: -1px;
                            }

                            span {
                                font-size: 0.625rem;
                                margin-left: 3px;
                                vertical-align: middle;
                            }
                        }

                        small {
                            color: #818181;
                        }
                    }
                }
            }
        }

        .photo-strip {
            gap: 16px;
            scroll-snap-type: x mandatory;
        }

        // 사진/동영상
        figure {
            flex: 0 0 clamp(120px, 30vw, 260px);
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            text-align: left;
            scroll-snap-align: start;

            label {
                margin-right: 5px;

                a {
                    color: #cbd5e0;
                }
            }

            del, a {
                font-size: 14px;
                font-weight: normal;
            }

            var {
                color: #aa0000;
                font-style: normal;
                margin-left: 3px;
                letter-spacing: -1px;
                vertical-align: middle;
            }

            i {
                color: #cbd5e0;
                margin-left: 3px;
                vertical-align: -1px;
            }

            span {
                font-size: 10px;
                margin-left: 3px;
                vertical-align: middle;
            }

            a {
                width: 100%;
                overflow: hidden;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;

                    &:focus,
                    &:hover {
                        filter: drop-shadow(2px 2px 4px #969696);
                    }
                }
            }

            figcaption {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                margin: 5px 0;

                h5 a {
                    display: initial;
                }
            }
        }
    }

    // 주요 기사
    .news {
        .thumb {
            width: 96px;
            height: 96px;
            width: 100%;
            flex-shrink: 0;
            overflow: hidden;
            border-radius: 0.375rem;
            background: #f1f1f1;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
        }
    }

    section {
        margin: 10px 0;
    }
}