.asideButtons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 그룹들을 양쪽 끝으로 밀어냅니다. */
    width: 100%;
    height: 44px;
    margin-top: 10px;
}

.asideButtons-left-group,
.asideButtons-right-group {
    display: flex;
    align-items: center;
    /* gap: 12px; */
    /* gap 대신 margin으로 제어합니다. */
}

/* gap을 대체하기 위해 인접 형제 선택자를 사용하여 버튼 사이의 간격을 만듭니다. */
.asideButtons-left-group>*+*,
.asideButtons-right-group>*+* {
    margin-left: 4px;
}

.asideButtonBack {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 36px;
    height: 36px;
    border-radius: 100px;
    border: 1px solid var(--grey2);
    cursor: pointer;
    flex-shrink: 0;
}

.asideButtonBack svg {
    color: var(--grey4);
    width: 20px;
    height: 20px;
}

.asideButtonHistory {
    display: flex;
    justify-content: center;
    /* 수평 가운데 정렬 */
    align-items: center;
    /* 수직 가운데 정렬 */
    background-color: white;
    width: 36px;
    height: 36px;
    border-radius: 100px;
    border: 1px solid var(--grey2);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 4px;
}

.asideButtonHistory svg {
    width: 22px;
    height: auto;
    fill: var(--grey4);
}

.asideButtonHistory:hover,
.asideButtonContents:hover,
.asideButtonClose:hover,
.asideButtonBack:hover,
.asideButtonExpand:hover {
    background-color: var(--btnHover);
    border-radius: 100px;
}

.asideButtonClose {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 36px;
    height: 36px;
    border-radius: 100px;
    border: 1px solid var(--grey2);
    cursor: pointer;
    flex-shrink: 0;
    padding-right: 8px;
}

.asideButtonClose svg {
    fill: var(--grey4);
    width: 20px;
    height: 20px;
    padding-left: 3px;
}

.asideButtonExpand {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 36px;
    height: 36px;
    border-radius: 100px;
    border: 1px solid var(--grey2);
    cursor: pointer;
    flex-shrink: 0;
    /* 확장 버튼부터 오른쪽으로 정렬 시작 */
}

.asideButtonExpand svg {
    color: var(--grey4);
    width: 20px;
    height: auto;
}

/* 버튼이 부드럽게 사라지고 나타나도록 transition과 새로운 hidden 클래스를 추가합니다 */
.asideButtonBack,
.asideButtonHistory,
.asideButtonExpand {
    transition: opacity 0.3s ease, max-width 0.3s ease, margin-left 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
    overflow: hidden;
    /* 전환 중에 내용이 튀어나오지 않도록 합니다. */
    white-space: nowrap;
    /* 내부 텍스트나 아이콘이 줄바꿈되지 않도록 합니다. */
}

.button-hidden {
    opacity: 0;
    visibility: hidden;
    max-width: 0;
    padding: 0;
    margin-left: 0 !important;
    /* 인접 형제 선택자보다 우선 적용하기 위해 !important를 사용합니다. */
    border-width: 0;
    pointer-events: none;
    /* 보이지 않는 버튼에 클릭 이벤트가 발생하지 않도록 합니다 */
}