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

.container {
    display: grid;
    height: 100vh;
    grid-template-rows: minmax(auto, 50px) 2fr auto;

    // PC
    @media (min-width: 1124px) {
        grid-template-areas: "header header header" "aside main chatAside" "aside footer chatAside";
        grid-template-columns: minmax(200px, 280px) 1fr minmax(200px, 400px);
    }

    // Tablet
    @media (max-width: 1125px) {
        grid-template-areas: "header" "main" "footer";
        grid-template-columns: 1fr;
    }

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

        // 햄버거 메뉴
        .hamburger {
            display: none;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 1.25rem;
            color: #333;
            flex-shrink: 0;

            &:hover {
                color: #000;
            }

            @media (max-width: 1125px) {
                display: flex;
            }
        }

        // 로고
        > a, > .logoLink {
            flex-basis: 137px;
            font-size: inherit;
            padding-right: 20px;
			flex-shrink: 0;
        }

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

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

    // 좌측 사이드바 (코인 목록)
    > .aside {
        grid-area: aside;
        overflow-y: auto;
        transition: transform 0.3s ease;
        background: #fff;

        @media (min-width: 1124px) {
            position: relative;
            transform: translateX(0);
            border-right: 1px solid #dedede;
        }

        // 모바일: 왼쪽에서 슬라이드
        @media (max-width: 1125px) {
            position: fixed;
            top: 56px;
            left: 0;
            width: min(320px, 85vw);
            height: calc(100vh - 56px);
            z-index: 1000;
            transform: translateX(-100%);
            border-right: 1px solid #dedede;
            box-shadow: none;
        }
    }

    // 사이드바 열림 상태
    &.sidebarOpen {
        > .aside {
            @media (max-width: 1125px) {
                transform: translateX(0);
                box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
            }
        }
    }

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

    // 우측 사이드바 (채팅)
    > .chatAside {
        grid-area: chatAside;
        transition: transform 0.3s ease;

        @media (min-width: 1124px) {
            position: relative;
            transform: translateX(0);
            border-left: 1px solid #dedede;
        }

        // 테블릿일 때
        @media (max-width: 1125px) {
            position: fixed;
            top: 56px;
            right: 0;
            width: min(400px, 100vw);
            height: 100vh;
            z-index: 1000;
            transform: translateX(100%);
        }
    }

    // 사이드바 오버레이 (모바일)
    > .overlay {
        display: none;

        @media (max-width: 1125px) {
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 999;
        }
    }

    &.sidebarOpen > .overlay {
        @media (max-width: 1125px) {
            display: block;
        }
    }

    // 하단 내용
    > .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;
			}
		}
	}
}