.main {
    flex: 1;
    overflow: hidden;
    background-color: var(--font-active-color);
    display: flex;
    justify-content: center;
    align-items: center;
}


/*!* 왼쪽 사이드바 스타일 *!*/
/*.sidebar {*/
/*    width: 80px;*/
/*    height: 100vh;*/
/*    background: #212529;*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    padding-top: 20px;*/
/*}*/

/* 오른쪽 설정 패널 스타일 */
/*.settings-panel {*/
/*    width: 300px;*/
/*    height: 100vh;*/
/*    background: #f8f9fa;*/
/*    border-left: 1px solid #ccc;*/
/*    position: fixed;*/
/*    top: 0;*/
/*    right: 0;*/
/*    padding: 20px;*/
/*    overflow-y: auto; !* 스크롤 가능 *!*/
/*}*/

/*.footer {*/
/*    height: 25vh;*/
/*    position: fixed;*/
/*    bottom: 0;*/
/*    left: 80px; !* 사이드바 넓이 *!*/
/*    right: 300px; !* 설정 패널 넓이 *!*/
/*    background: #f8f9fa;*/
/*    border-top: 1px solid #ccc;*/
/*    text-align: center;*/
/*    padding: 8px;*/
/*}*/

/* 캔버스 컨테이너 */
/*#canvas-container {*/
/*    border: 1px solid var(--secondaryContainer-color);*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/* tab */
/*.custom-tabs .nav-link {*/
/*    border: none;*/
/*    border-bottom: 2px solid transparent;*/
/*    color: var(--tabDeactiveFont-color);*/
/*    font-weight: 500;*/
/*}*/

/*.custom-tabs .nav-link.active {*/
/*    color: var(--basicAtiveFont-color);*/
/*    border-bottom: 3px solid var(--tabBottomActiveBorder-color);*/
/*    background-color: transparent;*/
/*}*/
.page-preview {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    word-break: break-word;
    white-space: normal;
    color: var(--dark-color);
    border: 2px solid var(--btn-bd-color);
    border-radius: var(--btn-size);
    background-color: var(--light-color);
    flex-shrink: 0;
}
.page-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background-color: var(--grid-bg-color);
    transition: opacity 0.25s ease-out;
}
.page-preview:hover {
    cursor: pointer;
    border: 2px solid var(--tertiary-color);
}
.page-preview.selected {
    border: 2px solid var(--tertiary-color);
}
.page-preview.selected::before {
    opacity: 1;
}