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

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

    // PC (aside 없을 때 기본 2열)
    @media (min-width: 1124px) {
        grid-template-areas: "header header" "main chatAside" "footer chatAside";
        grid-template-columns: 1fr minmax(200px, 400px);
    }

    // PC (aside 있을 때 3열)
    @media (min-width: 1124px) {
        &:has(> .aside) {
            grid-template-areas: "header header header" "aside main chatAside" "aside footer chatAside";
            grid-template-columns: minmax(200px, 280px) 1fr minmax(200px, 400px);
        }
    }

    // 모바일/태블릿
    @media (max-width: 1125px) {
        grid-template-areas: "header" "main" "footer";
        grid-template-columns: 1fr;
    }

    // aside가 없을 때 햄버거 숨기기 (모바일 코인 목록 뷰)
    &:not(:has(> .aside)) {
        > .header .hamburger {
            @media (max-width: 1125px) {
                display: none !important;
            }
        }
    }

    > .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;
                position: absolute;
                left: 8px;
            }
        }

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

        // PC 네비게이션 (모바일에서 숨김)
        .pcNav {
            display: flex;
            flex-grow: 1;
            align-items: center;
            justify-content: space-between;
            font-weight: 500;

            ul {
                display: flex;
                gap: 1rem;

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

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

        // 채팅 토글 버튼 (모바일 전용)
        .chatToggle {
            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;
                position: absolute;
                right: 8px;
            }
        }

        .clock {
            background: #434343;
            color: #fff;
            padding: 5px;
        }

        // 모바일: 로고 가운데 정렬
        @media (max-width: 1125px) {
            position: relative;
            justify-content: center;
        }
    }

    // 좌측 사이드바 (코인 목록)
    > .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);
            }
        }

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

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

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

        @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: calc(100vh - 56px - 56px);
            z-index: 1000;
            transform: translateX(100%);
        }
    }

    // 채팅 열림 상태
    &.chatOpen {
        > .chatAside {
            @media (max-width: 1125px) {
                transform: translateX(0);
                box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
            }
        }

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

    // 오버레이 (모바일)
    > .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;
        }
    }

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

        @media (max-width: 1125px) {
            padding-bottom: 56px;
        }

        @media (max-width: 576px) {
            > ol {
                padding: 0 0 2px 0;
            }
        }

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

            li {
                // 이용약관
                // 개인정보처리방침
                &:nth-of-type(1),
                &:nth-of-type(2) {
                    padding: 0 5px;

                    &:hover {
                        text-decoration: underline;
                        font-weight: 600;
                    }
                }

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

    // 모바일 하단 탭바
    > .bottomTab {
        display: none;

        @media (max-width: 1125px) {
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 56px;
            background: #fff;
            border-top: 1px solid #dedede;
            z-index: 1001;
            justify-content: space-around;
            align-items: center;

            button, a {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                font-size: 0.625rem;
                color: #888;
                text-decoration: none;
                flex: 1;
                height: 100%;
                border: none;
                background: transparent;
                cursor: pointer;

                svg {
                    font-size: 1.25rem;
                }

                &:hover {
                    color: #555;
                }
            }

            button.active, a.active {
                color: #333;
                font-weight: 600;
            }
        }
    }

    // 페이지네이션
	#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;
			}
		}
	}
}