@import url('https://fastly.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');

:root {
  --pr: #5c41f4;
  --yellow: #f07e00;
  --red: #df4c4c;
  --or: #f07e00;
  --lg: linear-gradient(131deg, #18243e 0%, #282828 141%, #231a2c 273%);
  --bg: linear-gradient(131deg, #18243e 0%, #282828 119%, #231a2c 229%);
  --black_0f: #0f1116;
  --gray_9: #999999;
  --gray_5: #555555;
  --wt: #fff;
  --wt_0_5: rgba(255, 255, 255, 0.05);
  --item_bg: rgba(255, 255, 255, 0.03);
}

body.light,
.light {
  --lg: linear-gradient(90deg, #d1d9eb 0%, #cfcfcf 141%, #e3dcea 273%);
  --bg: linear-gradient(90deg, #d1d9eb 0%, #cfcfcf 119%, #e3dcea 229%);
  --wt: #000;
  --black_0f: linear-gradient(180deg, #d1d9eb 0%, #cfcfcf 119%, #e3dcea 229%);
  --pr: #5c41f4;
  --gray_9: #888;
  --gray_5: #bbb;
  --item_bg: rgba(255, 255, 255, 0.6);
}

button,
a {
  cursor: pointer;
}
select,
input,
textarea,
td,
th,
button {
  font-family: 'Wanted Sans Variable';
}

body {
  font-family: 'Wanted Sans Variable';
  background: var(--black_0f);
}

body.light {
  background: #eff0f2;
}
.nt {
  font-family: 'Noto Sans', sans-serif;
}
#wrap {
  position: relative;
  max-width: 1920px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.content {
  max-width: 1260px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
section:last-of-type {
  margin-bottom: 50px;
}
section.main {
  padding: 25px 20px 30px;
  margin-top: 20px;
  background: var(--bg);
  border-radius: 20px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

/* tit-box */
.tit-box {
}
.tit-box2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tit-box2 .toggle_btn {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: var(--or);
}
.tit-box2 .toggle_btn span:first-of-type {
  display: inline-block;
}
.tit-box2 .toggle_btn span:last-of-type {
  display: none;
}
.tit-box2 .toggle_btn.on span:first-of-type {
  display: none;
}
.tit-box2 .toggle_btn.on span:last-of-type {
  display: inline-block;
}
.tit-box .tit {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}

/* sec_tit */
.sec_tit {
  margin-bottom: 20px;
}
.sec_tit2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sec_tit2 a {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: var(--or);
  text-decoration: underline;
}
.sec_tit .tit {
  font-family: 'Noto Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
  height: 20px;
}
.sec_tit2 .tit {
  max-width: calc(100% - 80px); /* More 버튼 공간 확보 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* small_tit */
.small_tit {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}

/* submit-btn */
.btn-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
}
.submit-btn {
  width: 180px;
  height: 40px;
  border-radius: 15px;
  background: var(--pr);
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}

/* pager */
.pager {
  width: 100%;
  height: auto;
  margin-top: 40px;
}
.pager ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.pager ul .arrow_btn {
  width: 32px;
  height: auto;
}
.pager ul .arrow_btn.arrow_prev {
  margin-right: 15px;
}
.pager ul .arrow_btn.arrow_next {
  margin-left: 15px;
}
.pager ul .arrow_btn a {
  width: 32px;
  height: auto;
}
.pager ul .arrow_btn a img {
  width: 32px;
  height: auto;
}

.pager ul .num {
}
.pager ul .num a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: auto;
  aspect-ratio: 1/1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--wt);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
.pager ul .num.active a {
  background: var(--pr);
}
.pager ul .point_btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: auto;
  aspect-ratio: 1/1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--wt);
}

/* dim */
.dim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
.dim2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
}

/* slick-dots */
.slick-dots {
  position: absolute;
  bottom: 11px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.slick-dots li {
  width: 8px;
  height: 8px;
  background: #d2d2d2;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 100%;
}
.slick-dots li.slick-active {
  background: var(--pr);
}
.slick-track:before,
.slick-track:after {
  display: none;
}

/* footer */
footer {
  position: relative;
  height: auto;
  padding: 60px 0;
  background: var(--lg);
  z-index: 2;
  text-align: center;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}
footer .f-container {
  width: 100%;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
}
footer .f-container img {
  width: auto;
}
footer .f-container .txt {
  font-size: 17px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}

/* Footer 내부 .txt 안의 제목 태그 스타일 재정의 */
footer .f-container .txt h1 {
  font-size: 2em; /* 브라우저 기본 h1 크기 또는 원하는 크기 */
  font-weight: bold; /* 기본 h1 굵기 */
  /* 필요하다면 제목 위아래 여백 추가 */
  margin-top: 1em;
  margin-bottom: 0.5em;
  line-height: 1.2; /* 기본 줄 간격으로 복원 */
}

footer .f-container .txt h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 0.8em;
  margin-bottom: 0.4em;
  line-height: 1.2;
}

/* 필요에 따라 h3, h4, h5, h6 규칙도 추가 가능 */

/* Quill 정렬 클래스와 함께 사용할 때도 적용되도록 */
footer .f-container .txt h1.ql-align-center,
footer .f-container .txt h2.ql-align-center /* ... 등등 */ {
  /* 특별히 필요한 스타일이 없다면 위 규칙이 적용됨 */
}

footer .f-container .txt p {
  /* 필요하다면 p 태그 스타일도 여기서 조정 가능 */
  /* 예: 제목과의 간격을 위해 */
  margin-bottom: 0.5em;
}

/* Popup Base Styles */
.popup {
  display: none; /* Initially hidden */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff; /* Or your popup background color */
  z-index: 1001; /* Ensure popup is above overlay */
  /* Add other necessary popup styles like padding, border-radius, etc. */
  width: 400px; /* Example width */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.popup.active {
  display: block; /* Show when active */
}

/* Dim Overlay Styles */
.dim-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

.dim-overlay.active {
  display: block; /* Show when active */
}

/* Specific styles for Language Popup */
.pop-lang .popup-body {
  /* Add padding if needed, especially above the search box */
  padding: 20px;
}

.pop-lang .search-box {
  /* Style for the search box container */
  margin-bottom: 15px;
  position: relative; /* For positioning search icon if added later */
}

.pop-lang .search-box input {
  width: 100%;
  padding: 10px 15px; /* Adjust padding as needed */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background-color: var(--wt_0_5);
  color: var(--wt);
  font-size: 14px;
  box-sizing: border-box; /* Include padding and border in width */
}

.pop-lang .select-box {
  /* Container for the list */
}

.pop-lang .select-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px; /* Set a max height for the list */
  overflow-y: auto; /* Enable vertical scrolling */
  /* Add some padding for scrollbar */
  padding-right: 5px;
}

/* Optional: Style the scrollbar */
.pop-lang .select-box ul::-webkit-scrollbar {
  width: 6px;
}
.pop-lang .select-box ul::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.pop-lang .select-box ul::-webkit-scrollbar-thumb {
  background-color: var(--pr);
  border-radius: 3px;
}

#wrap * {
  scrollbar-color: var(--pr) transparent; /* thumb 색상 / track 색상 */
}

/* WebKit 기반 브라우저용 */
#wrap *::-webkit-scrollbar {
  width: 6px;
}

#wrap *::-webkit-scrollbar-thumb {
  background: var(--pr);
  border-radius: 3px;
}

#wrap *::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.advert-area,
.company-banners-pc {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#wrap .company-banners-pc::-webkit-scrollbar {
  display: none;
  width: 0px;
  height: 0px;
  background: transparent;
}
#wrap .company-banners-pc::-webkit-scrollbar-thumb {
  background: transparent;
}
#wrap .company-banners-pc::-webkit-scrollbar-track {
  background: transparent;
}

#wrap .advert-area::-webkit-scrollbar {
  display: none;
  width: 0px;
  height: 0px;
  background: transparent;
}
#wrap .advert-area::-webkit-scrollbar-thumb {
  background: transparent;
}
#wrap .advert-area::-webkit-scrollbar-track {
  background: transparent;
}

.pop-lang .select-box li {
  /* Styles for list items if needed */
}

.pop-lang .select-box button {
  width: 100%; /* Make buttons fill width */
  padding: 10px 15px;
  background-color: var(--wt_0_5); /* Default background */
  color: var(--wt);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pop-lang .select-box button:hover {
  background-color: rgba(255, 255, 255, 0.15); /* Hover effect */
}

/* Style for the active language button */
.pop-lang .select-box button.active,
.pop-lang .select-box button.active font {
  /* Target inner font tags too */
  /* background-color: var(--pr); */
  color: var(--wt) !important; /* Ensure default text color overrides interference */
  font-weight: bold !important; /* Force bold style */
  /* border-color: var(--pr); */
}

.f-container .txt em {
  font-style: italic;
}
.f-container .txt iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.f-container .txt a {
  color: var(--pr);
  text-decoration: underline;
}
.f-container img {
  width: auto;
  max-width: 100%;
}

#post-content em {
  font-style: italic;
}
#post-content iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
#post-content a {
  color: var(--pr);
  text-decoration: underline;
}
#post-content img {
  width: auto;
  max-width: 100%;
}

.loading {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.loading.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 9999 !important;
  position: relative;
}

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

.content,
.review-detail,
.review_list {
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0.3s,
    opacity 0.3s;
}

.content.visible,
.review-detail.visible,
.review_list.visible {
  visibility: visible !important;
  opacity: 1 !important;
}

@media (min-width: 1000px) {
  .loading {
    display: block; /* 실제 로딩 시 JS에서 block으로 변경 */
    background: #000 !important;
  }
  .loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: var(--lg); /* 이미 불투명도 없음 */
    z-index: 1;
  }
  .loading::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 360px;
    height: 100vh;
    background-image: var(--lg); /* 이미 불투명도 없음 */
    z-index: 1;
  }
}

@media (max-width: 767px) {
  .loading {
    display: block;
    background: #000 !important;
  }
  .loading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 130px;
    background: #1f2533;
    z-index: 2;
  }
}

/*!* Oddspedia 컨테이너 스타일 *!*/
/*.oddspedia-container {*/
/*  margin-top: 20px;*/
/*}*/

/*.oddspedia-container a {*/
/*  font-size: 18px;*/
/*  font-weight: 500;*/
/*  color: var(--wt);*/
/*  text-decoration: none;*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  gap: 8px;*/
/*}*/

/*!* 라이트 모드에서 Oddspedia 텍스트 색상 *!*/
/*body.light .oddspedia-container a {*/
/*  color: #333333;*/
/*}*/

/*!* 라이트 모드에서 Oddspedia 다크 이미지 사용 *!*/
/*body.light .oddspedia-logo {*/
/*  content: url('/images/svg/logo-oddspedia-dark.svg');*/
/*}*/