* {
      font-family: "GmarketSansMedium", sans-serif;
  }

  body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: auto;

  }

  /* ✅ 배경 */
  body::before {
    background-color: #feb552;
      content: "";
      position: fixed;
      inset: 0;
      /* background-image: url('https://images.unsplash.com/photo-1622086084543-bbd378c16f5a?q=80&w=4470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); */
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      /* transform: scaleX(-1); */
      z-index: -1;
  }

  .layout-wrapper {
      position: relative;
      height: 100vh;
      overflow: hidden;
  }

  .top-bar {
      position: fixed;
      top: 0;
      width: 500px;
      /* layout-container와 동일한 너비 */
      height: 60px;
      background-color: #f8f9fa;
      border-bottom: 1px solid #dee2e6;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
  }

  /* 하단바 고정 */
  .bottom-bar {
      position: fixed;
      bottom: 0;
      width: 500px;
      /* layout-container와 동일한 너비 */
      /* height: 60px; */
      padding: 10px 0;
      background-color: #f8f9fa;
      border-top: 1px solid #dee2e6;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
  }

  .content-area {
      position: relative;
      padding: 60px 0 70px;
      /* 상단/하단바 높이만큼 여백 줌 */
      height: 100vh;
      overflow-y: auto;
      background-color: #fff;

      /* 스크롤바 감추기 */
      scrollbar-width: none;
      /* Firefox */
      -ms-overflow-style: none;
      /* IE & Edge */
  }

  .content-area::-webkit-scrollbar {
      display: none;
      /* Chrome, Safari, Opera */
  }

  .layout-container {
      width: 500px;
      position: absolute;
      right: 10%;
  }


  @media (max-width: 1024px) {
      .layout-container-left {
          display: none;
      }

      .layout-container {
          width: 100%;
          position: absolute;
          right: 0;
      }

      .top-bar,
      .bottom-bar {
          width: 100%;
          /* 모바일에서는 전체 너비 */
          left: 0;
          right: 0;
      }

      .col-lg-4.col-12 {
          height: 100vh;
      }
  }