/* 줌인 줌아웃 시작 *********************** */

.zoom-container {
  /* flex-basis: 100%; */
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  margin-right: 10px;
  /* background-color: red; */
}

.zoom-out-btn,
.zoom-in-btn {
  height: 34px;
  padding: 10px 10px 8px 10px;
  margin-right: 0;
  margin-bottom: 5px;
  color: #fff;
  font-size: 11px;
  background-color: #333;
  border: 1px solid #fff !important;
  cursor: pointer;
  /* transition: background-color 0.3s ease, opacity 0.3s ease; */
}
.zoom-out-btn:hover:not(.disabled),
.zoom-in-btn:hover:not(.disabled) {
  background-color: #ff5a24;
  color: #fff;
}
.zoom-out-btn.disabled,
.zoom-in-btn.disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: #aeaeae; /* 비활성화 시 배경색 유지 */
}
/* 비활성화된 버튼의 호버 시 배경색 변화 방지 */
.zoom-out-btn.disabled:hover,
.zoom-in-btn.disabled:hover {
  background-color: #999;
  color: #fff;
}

/* 줌인 줌아웃 끝 *********************** */

/* 스크롤 관련 *********************** */

.scroll {
  /* width: 20px; */
  /* height: 200px; */
  overflow: auto;
  float: left;
  margin: 0 5px;
}
.scroll1::-webkit-scrollbar {
  width: 4px;
}
.scroll1::-webkit-scrollbar-track {
  background: #ddd;
}
.scroll1::-webkit-scrollbar-thumb {
  background: #ff5a24;
}
.scroll_all-selected-items {
  /* width: 20px; */
  /* height: 200px; */
  overflow: auto;
  /* float: left; */
  /* margin: 0 5px; */
}
.scroll2::-webkit-scrollbar {
  width: 2px;
}
.scroll2::-webkit-scrollbar-track {
  background: #333;
}
.scroll2::-webkit-scrollbar-thumb {
  background: #ff5a24;
}

/* 영문폰트 ***************************** */
.museomoderno {
  font-family: "MuseoModerno", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#loading-screen_ {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999999;
}

.progress-wrap {
  width: 300px;
  height: 5px;
  background: #eee;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}

#progress-bar {
  width: 0%;
  height: 100%;
  background: #ff5a24;
  transition: width 0.3s ease;
}

#progress-text {
  margin-top: 10px;
  font-size: 18px;
  color: #333;
}

/* 이미지 로딩관련 - 시작***************************************** */

:root {
  --primary: #007bff;
  overflow: hidden;
}
[hidden] {
  display: none !important;
}

i {
  font-style: normal;
}

#hamburger {
  display: block;
  position: absolute;
  right: 20px;
  top: 27px;
  background: black;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 100;
  /* overflow: hidden;  */
}

#hamburger i {
  position: relative;
  font-size: 30px; /* 인라인 스타일에서 가져옴 */
  color: #ff5a24 !important; /* 기본 색상 */
  /* transition: transform 0.1s ease, color 0.1s ease;  */
  transform: rotate(90deg);
}

#hamburger:hover i {
  /* animation: slideLeftToRight 0.5s linear ;  */
  color: #fff !important; /* 색상 변경, 우선순위 강제 */
}

@keyframes slideLeftToRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

/* 프롬프트 패널 열고 닫는 버튼 ************ */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* 로딩 스크린 스타일 */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.7s ease-out;
}

#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

#loading-text {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* 로딩 바 스타일 */
#loading-bar {
  width: 300px;
  height: 10px;
  background-color: #f3f3f3;
  /* border-radius: 10px; */
  box-shadow: inset 1px 1px 1px 1px #dedede;
  overflow: hidden;
}

#loading-bar-fill {
  width: 0;
  height: 100%;
  background-color: #fa5fff;
  transition: width 0.3s ease-in-out;
}

/* 스피너 애니메이션 */
/* .spinner {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin-top: 20px;
        } */

/* @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        } */

/* 이미지 스타일 */

img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS 길게 누르기 메뉴 방지 */
}
body {
  user-select: none; /* 선택 방지 (선택사항) */
}

img.loaded {
  opacity: 1;
}

/* 메인 콘텐츠 (기본적으로 숨김) */
.tab-container {
  display: none;
}

.tab-container.visible {
  display: block;
}

/* 이미지 로딩관련 - 끝***************************************** */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* border: 1px solid cyan; */
}
body {
  /* font-family: Arial, sans-serif; */
  font-family: "Pretendard", sans-serif;
  height: 100dvh; /* Ensure body fills viewport */
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-flow: row wrap;
  /* flex-direction: column; */
}

P {
  line-height: 20px;
}

h1 {
  font-size: 64px;
  /* margin-bottom: 10px;; */
}

h2 {
  font-size: 28px;
  font-weight: 800;
  color: #007bff;
  /* margin-bottom: 10px;; */
}

.h2_eng {
  font-family: "MuseoModerno", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 26px;
  color: #999;
}
.bracket {
  position: relative;
  top: -2px;
  /* font-size: 0.9em;  */
}

h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

h4 {
  font-size: 24px;
  margin-bottom: 10px;
}

h5 {
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 30px;
}

hr {
  border: none;
  height: 1px;
  background-color: #666; /* 초록색 선 */
  /* margin: 20px 0; */
}

a {
  color: #800080;
  text-decoration: none;
}
a:hover {
  color: #007bff;
}

.tab-container {
  /* flex: 1; */
  width: 100vw;
  height: 100dvh;
  border: none; /* Optional: re-add 'border: 1px solid #ccc' if desired */
  display: flex;
  flex-direction: row;
  /* gap: 10px; */
  /* padding: 30px 30px 0px 30px; */
  position: relative; /* For absolute positioning in mobile */
  background-color: #000;
}

.main-contatiner {
  display: flex;
  flex: 1;
  position: relative;
  flex-direction: column;
  /* background-color: red;  */
  height: auto;
  overflow: hidden;
  background-color: #fff;
}

.tab-content-wrapper {
  flex: 1;
  /* min-width: 300px; */
  /* max-height: 100%; */
  /* height:90%; */
  overflow-y: auto;
  /* padding-right: 20px; */
  padding: 0px 10px 0px 30px;
  position: relative;
  overscroll-behavior: contain;   
    -webkit-overflow-scrolling: touch;
  scroll-padding-top: var(--header-h);
}

input:focus,
textarea:focus,
select:focus{
  scroll-margin-top: var(--header-h);
}

.tab-buttons {
  display: flex;
  /* border-bottom: 1px solid #fff;  */
  margin-top: 31px;
  /* margin-bottom: 10px; */
  position: sticky;
  top: 30px;
  /* background-color: #000; */
  z-index: 10;
}
.tab-button {
  color: #fff;
  font-weight: 500;
  flex: 1; /* Equal width for all tabs */
  padding: 10px;
  text-align: center;
  cursor: pointer;
  background-color: #000;
  border: 2px solid #fff;
  align-items: center;
  /* outline: none; */
  /* word-break: break-all; */
}

.tab-button + .tab-button {
  border-left: none;
}
.tab-button:hover {
  background-color: #007bff; /* Black background on hover */
  color: #fff; /* White text on hover */
}
.tab-button.active {
  background-color: #007bff; /* Black background for active tab */
  /* border-bottom: 2px solid #007bff;  */
  color: #fff; /* White text for active tab */
}
.tab-button:first-child {
  border-left: none;
  white-space: nowrap;
}

/* 마지막 탭 - Advanced Tips */
.tab-button:last-child {
  /* background-color: rgb(77, 1, 77); */
  border-right: none;
}
/* .tab-button:hover:last-child {
  background-color: #ae00ae;
}
.tab-button.active:last-child {
  background-color: #ae00ae;
} */

.gradient {
  /* display: flex; */
  width: 100%;
  height: 30px;
  /* margin-right:10px; */
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9;
}

.tab-content {
  display: none;
  /* padding: 30px 0; */
  /* padding-top: 30px;  */
}
.tab-content.active {
  display: block;
}
.tab-content.active h3 {
  color: #007bff; /* Blue text for h3 in active tab */
}

.checkbox-container {
  width: 100%;
  /* padding-left: 30px; */
  display: flex;
  flex-flow: row wrap;

  /* justify-content:space-around; */
  /* gap:10px; */

  ul {
    list-style: none;
    margin-top: 0.1rem;
    margin-bottom: 1rem;

    li {
      margin-bottom: 0.2rem;
    }
  }
}
.checkbox-item {
  word-break: break-all;
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start; /* Vertically align checkbox and label */
  flex-basis: 200px;
}

.checkbox-item > label:hover {
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  margin: 0; /* Reset any default margin */
  margin-bottom: 5px;
  display: none;
}
.checkbox-item label {
  /* margin-right: 20px;  */
  color: #333; /* Default black */
  /* overflow: hidden; */
}
.checkbox-item input[type="checkbox"]:checked + label {
  color: #007bff; /* Blue when checked */
  /* font-weight: 600; */
}

.checkbox-item input[type="checkbox"]:checked + label .image-wrapper {
  border: 5px solid #007bff !important;
  /* outline: 5px solid #007bff;
            outline-offset: -5px;   */
  /* box-shadow: inset 0 0 0 5px #007bff; */
  /* margin-bottom:4px; */
}

.checkbox-item input[type="checkbox"]:checked + label img {
  height: 102%;
}

#all-selected-items {
  z-index: 1000;
  /* flex: 2;  */
  width: 336px;
  height: 100dvh;
  /* min-height: 100%;  */
  overflow-x: hidden;
  background-color: #000;
  /* border-radius: 5px; */
  /* border-left: 5px solid #fff; */
  /* padding-top: 90px; */
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  /* flex-basis: row wrap; */
  z-index: 10000;

  /* border: 1px solid #007bff;  */
  /* margin-bottom: 30px; */
  /* align-self: flex-start; */
}

#all-selected-items h3 {
  color: #fff; /* Default black for items */
  line-height: 1.3;
  margin-bottom: 20px;
  padding: 30px 20px 0 20px;
  flex-basis: initial;
}

#all-selected-items .label-section {
  padding: 0 20px 20px 20px;
  flex: 1;
}

#all-selected-items .label-section > div {
  color: #fff; /* Default black for items */
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem;
  min-height: 20px;
  position: relative;
  font-weight: 400;

  .copy-icon {
    min-width: 16px;
    height: 21px;
    /* cursor: pointer; */
    display: flex;
    align-items: center;
  }

  .copy-label {
    /* cursor: pointer; */
  }

  .tooltip {
    position: absolute;
    left: -125px;
    top: -34px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-5px);
    /* z-index:10000; */
  }

  .selectedTag {
    margin: 0;
    border: 0.5px solid #444;
    display: flex;
    align-items: center;
    border-radius: 3px;
    padding: 0 0.3rem;
    font-size: 13px;
    transition: all 0.1s;
    cursor: pointer;
    color: var(--primary);

    p {
      font-weight: 700;
      /* max-width: 130px; */
      /* white-space: nowrap; */
      /* overflow: hidden; */
      /* text-overflow: ellipsis; */
    }

    img {
      opacity: 1;
      scale: 0.8;
    }

    &:hover {
      /* color: var(--primary); */
      /* background: rgb(45, 45, 45); */
      border-color: #ff5a24;
      img {
        /* background: #ff5a24; */
        /* border-radius: 30px; */
        filter: invert(50%) sepia(71%) saturate(3691%) hue-rotate(344deg)
          brightness(99%) contrast(104%);
      }
    }

    button {
      border: none;
      background: black;
      border-radius: 50%;
      width: 8px;
      height: 8px;
      padding: 0;
      margin-left: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
#all-selected-items .buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
#all-selected-items button {
  font-weight: 500;
  padding: 8px; /* Match tab-button padding */
  background-color: #000; /* Match tab-button default background */
  color: #fff; /* Match tab-button default text color */
  border: 2px solid #666; /* Match tab-button border */
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  flex: 1; /* Equal width like tab buttons */
}
#all-selected-items button:hover {
  background-color: #ff5a24; /* Black background on hover */
  color: #fff; /* White text on hover */
  border: 2px solid #ff5a24; /* Match tab-button border */
}
#all-selected-items button:active {
  background-color: #ff5a24; /* Black background when clicked */
  color: #fff; /* White text when clicked */
}

/* #all-selected-items > *{
  display: none;
} */

.open {
  width: 100vw;

  /* width: 100vw; */
  position: absolute;
  left: 0;
  /* right: 0; */

  top: -28px;
  height: 30px;
  background-color: black;
  display: none;
  justify-content: center;
}

.ad-section {
  width: 336px;
  height: 280px;
  min-height: 280px;
  background-color: yellow;
  /* position: absolute; */
  /* right: 0px; */
  /* bottom: 0px; */
  /* bottom: 50px; */
  /* transform: translateX(-50%); */
  /* top: 45rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: #000;
  display: none;
}

.ad-section-wide {
  width: 100%;
  height: 120px;
  background-color: blue;
  /* position: absolute;
  right: 0px;
  bottom: 0px; */
  /* bottom: 50px; */
  /* transform: translateX(-50%); */
  /* top: 45rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: #000;
  margin-bottom: 20px;
  display: none;
}

.ad-section-footer-wide {
  width: 100%;
  height: 120px;
  background-color: green;
  /* position: absolute;
  right: 0px;
  bottom: 0px; */
  /* bottom: 50px; */
  /* transform: translateX(-50%); */
  /* top: 45rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: #000;
  display: none;
}

#footer {
  width: 300px;
  position: absolute;
  /* background-color: red; */
  margin: auto;
  justify-content: center;
  /* top: 66rem; */
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: #777;
  text-align: left;
  font-weight: 500;
  /* display:none; */
}

.image-wrapper {
  position: relative;
  overflow: hidden; /* 확대된 이미지 잘리도록 설정 */
  /* border: 1px solid red; */
  aspect-ratio: 2 / 3;
  margin-bottom: 2px;
}

.image {
  width: 100%;
  display: block;
}

#tab3 .image,
#tab5 .image {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
  transform-origin: 50% 50%;
}

#tab3 .image:hover,
#tab5 .image:hover {
  transform: scale(2);
}

#tab1 .image,
#tab2 .image,
#tab4 .image,
#tab6 .image,
#tab7 .image,
#tab8 .image {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
  transform-origin: 50% 50%;
}

#tab1 .image:hover,
#tab2 .image:hover,
#tab4 .image:hover,
#tab6 .image:hover,
#tab7 .image:hover,
#tab8 .image:hover {
  transform: scale(2);
}

.checkbox-container > h2,
h3,
h5,
.button-container {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* .button-container button:first-child:hover{
  background-color: #ff5a24;
}
.button-container button:first-child.selected{
  background-color: #ff5a24;
} */

.search-container {
  /* background-color: red; */
  flex: 1;
  display: inline-flex;
  /* margin-left: auto; */
  /* margin-right: 35px; */
  transform: translateY(-2px);

  input {
    padding: 6px;
    min-width: 200px;
    height: 34px;
    /* margin-right: 0.2rem; */
    border-radius: 0px;
    border: 1.5px solid #333;
    background: rgb(229, 229, 229);
    color: #333;

    &::placeholder {
      font-size: 14px;
      color: #999;
      transform: translateY(2px);
    }
  }

  input:focus {
    outline: none;
  }

  button {
    min-width: 70px;
    border: 1.5px solid #333;
    background: #333;
    padding: 0.2rem 1rem;
    color: rgb(223, 223, 223);
    font-size: 14px;
    cursor: pointer;
  }

  button:hover {
    border: 1.5px solid #007bff;
    background: #007bff;
  }
}

@media screen and (max-width: 1001px) {
  .search-container {
    margin-left: initial;
    margin-top: 0px;
    transform: translateY(0px);
    /* background-color: red; */
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    /* label{
      flex:9;
    } */
    input {
      /* min-width: initial; */
      /* width:100%; */
      &::placeholder {
        font-size: 13px;
        color: #999;
        transform: translateY(2px);
      }
    }

    button {
      /* flex: 1; */
      border: none;
      background: #333;
      padding: 0.2rem 1rem;
      color: rgb(223, 223, 223);
      font-size: 14px;
      cursor: pointer;
    }

    button:hover {
      background: #007bff;
    }
  }
}

#positionDisplay {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 8px;
  font-size: 16px;
}

/* 버튼들 스타일 정리 ******************************** */

.button-container {
  margin-bottom: 15px;
}

.button-container button {
  height: 34px;
  word-break: break-all;
}
.a-button,
.b-button,
.c-button,
.d-button,
.e-button,
.f-button,
.g-button {
  /* width:100px; */
  padding: 6px 20px;
  margin-right: 0px;
  margin-bottom: 5px;
  color: #fff;
  background-color: #999;
  /* transition: background-color 0.3s; */
  border: 1px solid #fff !important;
  /* border-radius: 10px; */
  cursor: pointer;
}

.a-button:hover,
.a-button.selected,
.b-button:hover,
.b-button.selected,
.c-button:hover,
.c-button.selected,
.d-button:hover,
.d-button.selected,
.e-button:hover,
.e-button.selected,
.f-button:hover,
.f-button.selected,
.g-button:hover,
.g-button.selected {
  background-color: #ff5a24;
  color: white;
}

.a-button0,
.b-button0,
.c-button0,
.d-button0,
.e-button0,
.f-button0,
.g-button0 {
  background-color: #333;
}

.a-box,
.b-box,
.c-box,
.d-box,
.e-box,
.f-box,
.g-box {
  display: flex;
  flex-flow: row wrap;
  /* justify-content:space-around; */
  gap: 10px;
  width: 100%;
  padding-top: 20px;
  border-top: 2px dotted #bcbcbc;
  display: none;
}
.a-box.visible,
.b-box.visible,
.c-box.visible,
.d-box.visible,
.e-box.visible,
.f-box.visible,
.g-box.visible {
  display: flex;
}

/* 선택된 아이템들이 안보이게 하는 버튼 */
#hide-button {
  color: #ffffff;
  position: absolute;
  /* top: 10px; */
  right: 15px;
  bottom: var(--dynamic-height, 100px); /* 기본값 100px */
  /* transition: bottom 0.3s ease; */
  cursor: pointer;
  font-size: 16px;
  /* 초기에 숨김 */
  display: none;
  z-index: 1000;
}

#show-selected-items {
  height: 50px;
  width: 100%;
  background-color: #000000;
  position: fixed;
  bottom: 0;
  left: 0;
  /* 초기에 숨김 */
  display: none;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  box-sizing: border-box;
}

#show-selected-items button {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
}

/* .tiptext {
            
        } */

/* 기본 상태에서는 원래 텍스트를 표시 */
.tiptext::before {
  content: "Advanced ";
}

.go-to-top {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  right: 25px;
  bottom: 25px;
  z-index: 10;
  padding: 1rem;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transform: translateY(30px);

  button {
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
  }
}

.go-to-top:hover {
  overflow: hidden;
  button {
    background: #ff5a24;
  }
}

.about {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.602);
  cursor: pointer;
}

.about .contents {
  width: 700px;
  height: 600px;
  max-height: 600px;
  overflow: auto;
  background-color: white;
  border: 2px solid #000;
  padding:40px 40px 0px 40px;
  cursor:default;
}

.about  h2{
  color:#333;
}

.about  p{
  color:#333;
  margin-bottom:30px;
}

.howtouse {
  font-size:24px;
  display: inline-block;
  transform: translateY(3px);
}

/* Mobile view */
@media (max-width: 768px) {
  input { font-size: 16px; }
  /* 화면 너비가 768px 이하일 때 텍스트 변경 */
  .tiptext::before {
    content: "";
  }

  .tab-container {
    flex-direction: row;
    padding: 0;
    overflow-y: auto; /* Allow scrolling for entire container */
  }
  .tab-buttons{
    flex-wrap: wrap;
  }
  .tab-content-wrapper {
    width: 100%;
    /* Leave room for all-selected-items */
    /* max-height: calc(100vh - 200px);  */
    /* max-height:60vh; */

    /* max-height: var(--dynamic-maxheight, 60vh); */
    height: 100%;
    padding: 15px 15px 200px 15px;
  }
  #all-selected-items {
    display: relative;
    position: fixed; /* Fix to bottom */
    bottom: -64vh;
    left: 0;
    width: 100%;
    /* height: 50vh; */
    height: 77vh;

    /* overflow-y: auto; */
    margin: 0;
    /* padding: 15px; */

    border-radius: 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Shadow upwards */
    /* background-color: #f0f0f0; */
    /* border: 1px solid #007bff;  */
    z-index: 5; /* Ensure it’s above other content */
    padding-bottom: 15px;
  }

  .open {
    display: flex;
  }
  .ad-section {
    display: none;
  }

  /* #footer{
    top: initial;
        bottom: 1.5rem;
  } */

  h2 {
    font-size: 24px;
    margin-bottom: 0px;
    margin-top: 15px;
  }

  .h2_eng {
    font-weight: 400;
    font-size: 22px;
  }

  .bracket {
    top: -1px;
  }

  h4 {
    font-size: 18px;
    /* margin-bottom: 10px;; */
  }

  hr {
    /* margin: 50px 0px; */
    /* display: none; */
  }

  #all-selected-items .buttons {
    margin-top: 20px;
  }

  .a-box,
  .b-box,
  .c-box,
  .d-box,
  .e-box,
  .f-box,
  .g-box {
    /* justify-content:space-around; */
    gap: 2.6%;
  }

  .checkbox-item {
    flex-basis: 25%;
    word-break: break-all; /* 단어를 강제로 나누어 줄바꿈 */
  }

  .tab-buttons {
    margin-top: 10px;
    top: 10px;
  }

  .toggle-icon {
    display: block;
  }
  .gradient {
    position: fixed;
    top: 30px;
    left: 0px;
    width: 98%;
    height: 75px;
    background-color: rgba(255, 255, 255, 0.8);
  }

  body {
    font-size: 13px;
  }

  h5 {
    font-size: 13px;
    margin-bottom: 10px;
  }

  /* 선택된 아이템들이 안보이게 하는 버튼 */
  #hide-button {
    /* 보이게 */
    display: block;
  }

  .go-to-top {
    position: absolute;
    right: 1rem;
    bottom: 120px;
  }

  /* 스크롤 관련 *********************** */

  .scroll {
    margin: 0 0px;
  }

  .checkbox-container {
    ul {
      margin-top: 0.1rem;
      margin-bottom: 1rem;

      li {
        margin-bottom: 0.2rem;
      }
    }
  }

  .a-button,
  .b-button,
  .c-button,
  .d-button,
  .e-button,
  .f-button,
  .g-button {
    height: 34px;
    padding: 6px 13px;
  }

  .zoom-out-btn,
  .zoom-in-btn {
    height: 34px;
    width: 34px;
    padding: 9px 10px 8px 10px;
    margin-right: 0;
    margin-bottom: 0px;
  }

  .zoom-container {
    flex-basis: 100%;
    display: none;
  }

  #tab1 .image:hover,
  #tab2 .image:hover,
  #tab3 .image:hover,
  #tab4 .image:hover,
  #tab5 .image:hover,
  #tab6 .image:hover,
  #tab7 .image:hover {
    transform: initial;
  }

  #hamburger {
    right: 17px;
    top: 30px;
    width: 30px;
    height: 30px;
    /* transform: rotate(-90deg); */
    /* transition: transform 0.1s ease, color 0.1s ease; */
  }

  #hamburger i {
    font-size: 30px;
    color: #ff5a24 !important;
    transform: rotate(-90deg);
  }

  #hamburger:hover i {
    /* animation: slideLeftToRight 0s linear infinite;  */
    color: #ff5a24 !important;
  }

  .checkbox-item input[type="checkbox"]:checked + label .image-wrapper {
    border: 0px solid #007bff !important;
    outline: 5px solid #007bff;
    outline-offset: -5px;
    /* box-shadow: inset 0 0 0 5px #007bff; */
    /* margin-bottom:4px; */
  }

  .checkbox-item input[type="checkbox"]:checked + label img {
    height: initial;
  }

  .about .contents{
    width: 320px;
    height: 400px;
    padding:20px 20px 0px 20px;
  }

  .howtouse {
  transform: translateY(4px);
}

}