bitforum-frontend/app/styles/common.module.scss

.container {
    display: grid;
    height: 100vh;
    grid-template-areas: "header header" "ticker ticker" "main aside" "footer aside";
    grid-template-columns: 1fr minmax(200px, 400px);
    grid-template-rows: minmax(auto, 50px) minmax(auto, 3%) 2fr auto;

    > .header {
        grid-area: header;
        border-bottom: 1px solid #dedede;
        background: #f4f4f4;

        // 로고
        > a {
            font-size: inherit;
            padding-right: 20px;
        }

        // 메뉴
        nav {
            font-weight: 700;

            ul {
                li {
                    a, button {
                        &:hover {
                            font-weight: 500;
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }

    // 전광판
    > .panel {
        grid-area: ticker;
        border-bottom: 1px solid #dedede;
    }

    // 좌측 내용
    > .main {
		position: relative;
        grid-area: main;
        overflow-y: auto;
        border-bottom: 1px solid #dedede;
    }

    // 우측 내용
    > .aside {
        grid-area: aside;
        border-left: 1px solid #dedede;
    }

    // 하단 내용
    > .footer {
        grid-area: footer;
        font-size: 0.688rem;
        padding: 4px;

        ol {
            display: flex;
            flex-flow: row;
            justify-content: space-between;

            li {
                &:nth-of-type(1) { // 최근 게시글
                    flex-grow: 1;
                }

                &:nth-of-type(2) { // 공지사항
                    flex-grow: 1;
                }

                &:nth-of-type(3) { // Copyright
                    flex-grow: 0;
                }
            }
        }
    }

	#pagination {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		padding: 0.938rem 0 1.25rem 0;

		button {
			margin: 0 0.125rem;
			padding: 0.25rem 0.625rem;
			border-radius: 3px;

			&:hover {
				background: #f0f0f0;
				outline: 1px solid #dedede;
			}

			&.active {
				background: #f0f0f0;
				outline: 1px solid #b3b3b3;
				pointer-events: none;
			}
		}
	}
}