:root {
    --base-color: 82, 87, 110;
  }
  
  .left-main {
    /* width: 372px; */
    padding: 0 4px;
    box-sizing: border-box;
    /* display: flex; */
    flex-direction: column;
    background-color: inherit; /* 기본 배경색상 유지 */
  }
  
  .top-left {
    flex-grow: 1;
    background-color: rgba(var(--base-color), 0.2); /* 약간의 어두운 배경색 */
    padding: 10px;
    margin: 5px 0;
    border: 1px solid transparent; /* 경계선을 투명하게 설정 */
  }
  
  .bottom-left {
    height: 130px; /* 높이 변경 */
    background-color: rgba(var(--base-color), 0.3); /* 약간 더 어두운 배경색 */
    padding: 0; /* 패딩 제거 */
    margin: 5px 0;
    border: none; /* 테두리 제거 */
  }
  
  .right-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  
  .top-right {
    height: 200px;
    background-color: rgba(var(--base-color), 0.4); /* 더 어두운 배경색 */
    padding: 0; /* 패딩 제거 */
    margin: 5px;
    border: none; /* 경계선 제거 */
  }
  
  .bottom-right {
    display: flex;
    flex-grow: 1;
  }
  
  .bottom-left-right {
    flex: 0.8;
    background-color: rgba(var(--base-color), 0.5); /* 가장 어두운 배경색 */
    padding: 10px;
    margin: 5px;
    border: 1px solid transparent; /* 경계선을 투명하게 설정 */
  }
  
  .bottom-right-right {
    flex: 1.5;
    background-color: rgba(var(--base-color), 0.6); /* 가장 어두운 배경색 */
    padding: 10px;
    margin: 5px;
    border: 1px solid transparent; /* 경계선을 투명하게 설정 */
    margin-left: 5px;
  }
  
  .site-selector-side-btn {
    background-color: #212529;
    color: white;
    border: none;
  }
  
  .site-selector-side-btn:hover {
    background-color: #343a40;
  }