/* free_notice */
.free_notice {
  width: 100%;
  height: auto;
}
.free_notice ul {
  display: flex;
  align-items: center;
  gap: 13px;
  overflow: visible;
  flex-wrap: nowrap;
}
.free_notice ul li {
  width: calc((100% - 26px) / 3);
  box-sizing: border-box;
  flex-shrink: 0;
}
.free_notice ul li .child-box {
  display: flex;
  align-items: center;
  gap: 29px;
  width: 100%;
  height: auto;
  aspect-ratio: 398 / 140;
  padding: 20px;
  background: var(--black_0f);
  border-radius: 15px;
  box-sizing: border-box;
}
.free_notice ul li .child-box > .img-box {
  min-width: 100px;
  width: 100px;
  height: auto;
  aspect-ratio: 1/1;
}
.free_notice ul li .child-box > .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.free_notice ul li .child-box .txt-box {
  display: flex;
  flex-flow: column;
  gap: 8px;
  overflow: hidden;
}
.free_notice ul li .child-box .txt-box .tit {
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--wt);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.free_notice ul li .child-box .txt-box .bt_txt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px;
}
.free_notice ul li .child-box .txt-box .bt_txt .user_info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.free_notice ul li .child-box .txt-box .bt_txt .user_info .user_img {
  min-width: 20px;
  width: 20px;
  height: auto;
  aspect-ratio: 1/1;
}
.free_notice ul li .child-box .txt-box .bt_txt .user_info .user_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.free_notice ul li .child-box .txt-box .bt_txt .user_info .name {
  font-size: 13px;
  font-weight: bold;
  line-height: 2;
  color: var(--wt);
  word-break: break-word;
}
.free_notice ul li .child-box .txt-box .bt_txt .user_info .date {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--gray_9);
}

.free_notice ul li .child-box .txt-box .bt_txt .chat_v {
  display: flex;
  align-items: center;
  gap: 10px;
}
.free_notice ul li .child-box .txt-box .bt_txt .chat_v p {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.13px;
  color: var(--wt);
}
.free_notice ul li .child-box .txt-box .bt_txt .chat_v p > img {
  width: 16px;
  height: auto;
  aspect-ratio: 1/1;
}

body.light .free_notice ul li .chat_v img,
body.light .pr_wt_sec ul li .chat_v img {
  filter: invert(1);
}
body.dark .free_notice ul li .chat_v img,
body.dark .pr_wt_sec ul li .chat_v img {
  filter: none;
}

/* slot-item */
.slot-item {
  width: 100%;
  height: auto;
}
.slot-item ul {
  display: flex;
  /* align-items: center; */ /* 필요시 주석 해제 또는 flex-start */
  gap: 26px; /* 아이템 간 간격 */
  /* overflow: auto; 제거 */
  /* overflow-y: hidden; 제거 */
  flex-wrap: wrap; /* 여러 줄로 표시 가능 */
  overflow: visible; /* 내용이 넘쳐도 표시 */
  /* overflow-y: scroll; <-- Remove this */
}

/* More 버튼을 첫 번째 줄에만 표시되도록 제한 */
.slot-item ul .more-item {
  order: 8; /* 8번째 위치에 배치 */
  flex-basis: calc((100% - (7 * 26px)) / 8); /* 8개 아이템과 동일한 너비 */
}
.slot-item ul li {
  /* width: 160px; 너비 180px로 변경 */
  width: calc((100% - (7 * 26px)) / 8); /* Reapply the 8-item width calculation */
  box-sizing: border-box;
  flex-shrink: 0; /* 너비 줄어들지 않도록 */
}
.slot-item2 ul {
  flex-wrap: wrap;
  gap: 28px 0;
  margin: 0 -14px;
  overflow: auto;
  overflow-y: hidden;
}
.slot-item2 ul.on {
  flex-wrap: wrap;
}
.slot-item ul li .img-box {
  width: 100%;
  height: auto;
  aspect-ratio: 150 / 199;
}
.slot-item ul li .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.slot-item ul li .txt-box {
  margin-top: 12px;
  text-align: center;
}
.slot-item ul li .txt-box .tit {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt);
}

/* More 버튼 스타일 */
.slot-item ul li.more-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-item ul li.more-item .more-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 199px;
  background: var(--black_0f);
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.2s;
}

.slot-item ul li.more-item .more-box:hover {
  background: var(--pr);
}

.slot-item ul li.more-item .more-box .txt-box {
  text-align: center;
  margin: 0;
}

.slot-item ul li.more-item .more-box .txt-box .tit {
  font-size: 16px;
  font-weight: 600;
  color: var(--wt);
  margin-bottom: 8px;
}

.slot-item ul li.more-item .more-box .more-arrow {
  font-size: 20px;
  color: var(--wt);
  font-weight: bold;
}

body.light .slot-item ul li.more-item .more-box {
  background: var(--wt);
}

body.light .slot-item ul li.more-item .more-box .txt-box .tit,
body.light .slot-item ul li.more-item .more-box .more-arrow {
  color: var(--black_0f);
}

/* live-game */
.live-game {
  width: 100%;
  height: auto;
}
.live-game ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -67.5px;
}
.live-game ul li {
  width: calc(100% / 2);
  height: 62px;
  padding: 0 67.5px;
  box-sizing: border-box;
}
.live-game ul li .child-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.live-game ul li:nth-child(odd) .child-box {
  box-sizing: border-box;
}
.live-game ul li:nth-child(even) .child-box {
  box-sizing: border-box;
}
.live-game ul li .child-box .icon-date {
  display: flex;
  align-items: center;
  gap: 26px;
}
.live-game ul li .child-box .icon-date .icon {
  width: 30px;
  height: auto;
  aspect-ratio: 1/1;
}
.live-game ul li .child-box .icon-date .icon img {
  width: 100%;
  height: auto;
}
.live-game ul li .child-box .icon-date .date {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--wt);
}
.live-game ul li .child-box .g_name {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
  text-align: center;
}
.live-game ul li .child-box .t_name {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: var(--or);
}

/* coin-inq */
.coin-inq {
  width: 100%;
  height: auto;
}
.coin-inq ul {
  display: flex;
  align-items: center;
  gap: 27px 0;
  margin: 0 -13.5px;
}
.coin-inq ul li {
  width: calc(100% / 4);
  height: auto;
  padding: 0 13.5px;
  box-sizing: border-box;
}
.coin-inq ul li .child-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  box-sizing: border-box;
  font-weight: 600;
}
.coin-inq ul li .child-box .img-box {
  width: 36px;
  height: auto;
  aspect-ratio: 1/1;
}
.coin-inq ul li .child-box .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coin-inq ul li .child-box .tit {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}

.coin-inq ul li .child-box .arrow_img {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 24px;
  height: auto;
  aspect-ratio: 1/1;
}
.coin-inq ul li .child-box .arrow_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* tab-btn */
.tab-btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.tab-btn ul {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tab-btn ul li {
}
.tab-btn ul li a {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}
.tab-btn ul li.active a,
.tab-btn ul li a.active {
  padding-bottom: 10px;
  color: var(--pr);
  border-bottom: 1px solid var(--pr);
}

.tab-btn > .banner-box {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 620px; /* Reverted to original value */
  width: 100%;
  height: 130px; /* Restored to original value */
  /* border: 1px solid rgba(255, 255, 255, 0.2); */
  border-radius: 10px;
  overflow: hidden;
}

.tab-btn > .banner-box img {
  border-radius: 10px;
}
.tab-btn > .banner-box p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt);
}

/* data-list */
.data-list {
  width: 100%;
  height: auto;
  margin-top: 40px;
}
.data-list ul {
  display: flex;
  align-items: stretch; /* 높이를 동일하게 맞춤 */
  flex-wrap: wrap;
  gap: 60px 0;
  margin: 0 -10px;
}
.data-list ul li {
  width: calc(100% / 3);
  padding: 0 10px;
  box-sizing: border-box;
  display: flex; /* 높이를 부모에 맞춤 */
  margin-bottom: 20px; /* 아이템 간 간격 조정 */
}
.data-list ul li .child-box {
  display: flex;
  flex-direction: column;
  padding: 6px; /* 패딩 더 줄임 */
  border: 1px solid var(--gray_5);
  border-radius: 20px;
  height: 100%;
  width: 100%; /* 너비 100% 설정 */
  transition: transform 0.3s ease; /* 호버 효과를 위한 트랜지션 */
}
.data-list ul li .child-box:hover {
  transform: translateY(-5px); /* 호버 시 약간 위로 올라가는 효과 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 호버 시 그림자 효과 */
}
.data-list ul li .child-box .img-box {
  width: 100%;
  height: 180px; /* 이미지 높이 증가 */
  margin-bottom: 15px; /* 여백 증가 */
  overflow: hidden; /* 이미지 크기 제한 */
  border-radius: 10px; /* 이미지에 둥근 테두리 적용 */
}
.data-list ul li .child-box .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* 이미지 중앙 정렬 */
  transition: transform 0.3s ease; /* 이미지 호버 효과 */
}
.data-list ul li .child-box:hover .img-box img {
  transform: scale(1.05); /* 호버 시 이미지 약간 확대 */
}

.data-list ul li .child-box .txt-box {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.data-list ul li .child-box .txt-box .tit {
  width: 100%;
  height: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 5px; /* 제목과 내용 사이 간격 줄임 */
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--wt);
}
.data-list ul li .child-box .txt-box .txt {
  width: 100%;
  height: auto;
  min-height: 42px; /* 최소 높이 증가 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 항상 2줄로 고정 */
  -webkit-box-orient: vertical;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5; /* 줄 간격 증가 */
  color: rgba(255, 255, 255, 0.9); /* 나이트 모드: 진한 흰색 */
  margin-bottom: 5px; /* 아래 여백 증가 */
}

/* 데이 모드에서 설명 텍스트 색상 */
body.light .data-list ul li .child-box .txt-box .txt {
  color: rgba(0, 0, 0, 0.8); /* 데이 모드: 진한 검정색 */
}

.data-list ul li .child-box .hash-tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 태그가 많을 경우 줄바꿈 */
  gap: 6px;
  margin-top: 15px; /* 여백 증가 */
}
.data-list ul li .child-box .hash-tag span {
  padding: 5px 10px;
  box-sizing: border-box;
  border: 1px solid var(--wt);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt);
}

.data-list ul li .child-box .user_info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding-left: 5px;
}
.data-list ul li .child-box .user_info .user_img {
  width: 24px;
  height: auto;
  aspect-ratio: 1/1;
}
.data-list ul li .child-box .user_info .user_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.data-list ul li .child-box .user_info .name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--wt);
}
.data-list ul li .child-box .user_info .date {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray_9);
}

/* review-sec */
.review-sec {
  width: 100%;
  height: auto;
  margin-top: 15px;
}
.review-sec .d-flex {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: flex-start; /* Add this line */
}
.review-sec .d-flex .review-area {
  flex: 1;
  /* max-width: calc(100% - 250px); */
  overflow: hidden;
}
.review-sec .d-flex .fixed-box {
  width: 235px;
  flex-shrink: 0;
}
.review-sec .d-flex .review-hd {
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.15);
}
.review-sec .d-flex .review-hd .tit {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
  word-break: break-all;
  white-space: normal;
  overflow-wrap: break-word;
}
.review-sec .d-flex .review-hd .user_info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.review-sec .d-flex .review-hd .user_info .user_img {
  width: 24px;
  height: auto;
  aspect-ratio: 1/1;
}
.review-sec .d-flex .review-hd .user_info .user_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.review-sec .d-flex .review-hd .user_info .name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--wt);
}
.review-sec .d-flex .review-hd .user_info .date {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray_9);
}

.review-sec .d-flex .review-content {
  min-height: 60vh;
}

.review-sec .d-flex .review-content #post-content {
  min-height: 50vh;
}
.review-sec .d-flex .review-content figure {
  width: auto;
  height: auto;
  max-width: 100%;
  margin-bottom: 40px;
  text-align: center;
}
.review-sec .d-flex .review-content figure img {
  width: auto;
  height: auto;
  max-width: 100%;
}
.review-sec .d-flex .review-content p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--wt);
}

/* fixed-box */
.fixed-box {
  position: sticky;
  top: 20px;
  padding: 30px 30px 30px;
  background: var(--lg);
  border-radius: 20px;
  box-sizing: border-box;
  width: 235px;
  flex-shrink: 0;
  max-height: 600px;
  overflow-y: auto;
}
.fixed-box .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.fixed-box .top .tit {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: var(--pr);
  overflow: visible;
  white-space: normal;
  text-overflow: unset;
  word-break: break-all;
  overflow-wrap: break-word;
}
.fixed-box .top .sd-btn {
  display: flex;
  align-items: center;
  gap: 20px;
}
.fixed-box .top .sd-btn .f_btn {
  width: 18px;
  height: auto;
}
.fixed-box .top .sd-btn .share-btn {
}
.fixed-box .top .sd-btn .download-btn {
}
.fixed-box .txt {
  margin-top: 25px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.6;
  color: var(--wt);
  word-break: break-all;
  white-space: normal;
  overflow-wrap: break-word;
}
.fixed-box .hashtag {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Add this line */
  gap: 6px;
  margin-top: 30px;
  word-break: break-all;
  white-space: normal;
  overflow-wrap: break-word;
}
.fixed-box .hashtag a {
  padding: 5px 10px;
  border: 1px solid var(--gray_9);
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt);
}

.fixed-box .post-stats {
  display: flex;
  align-items: center;
  gap: 15px;
}

.fixed-box .button-container button {
  padding: 8px 0 !important;
  width: calc((100% - 10px) / 3);
}

/* game-list */
.list_sec {
  margin-top: 40px;
}
.game-list {
  padding: 20px; /* 패딩 조정 */
  margin-top: 20px;
  background: var(--bg);
  border-radius: 20px;
  box-sizing: border-box;
}
.game-list-header {
  display: flex;
  justify-content: space-between; /* 제목 왼쪽, 버튼 오른쪽 정렬 */
  align-items: center;
  margin-bottom: 15px; /* 헤더와 게임 목록 사이 간격 */
}

/* 제목 스타일 조정 */
.game-list-header .section-title {
  margin-bottom: 0;
  font-size: 18px;
}

.game-list .slot-item {
  margin-top: 0;
}

/* sports-list */
.sports-list {
  width: 100%;
  height: auto;
  margin-top: 40px;
}
.sports-list .d-flex {
  display: flex;
  align-items: flex-start;
  gap: 70px;
}
.sports-list .category-box {
  position: sticky;
  top: 20px;
  max-width: 250px;
  width: 100%;
  height: auto;
}
.sports-list .category-box ul {
  width: 100%;
  height: auto;
  background-image: var(--lg);
  border-radius: 24px;
  padding: 12px 32px;
  box-sizing: border-box;
  margin-bottom: 0;
  border: none;
}
.sports-list .category-box ul li {
  width: 100%;
  height: auto;
}
.sports-list .category-box ul li .child-box {
  display: flex;
  align-items: center; /* Ensure vertical centering */
  justify-content: space-between;
  width: 100%;
  min-height: 60px; /* Change height to min-height */
  height: auto; /* Allow height to adjust */
  padding: 10px 15px; /* Adjust vertical padding */
  box-sizing: border-box;
}
.sports-list .category-box ul li .child-box .sports-name {
}
.sports-list .category-box ul li .child-box .sports-name p {
  display: flex;
  align-items: center; /* Ensure vertical centering */
  gap: 10px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  width: 100%;
}

.sports-list .category-box ul li .child-box .sports-name p div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 40px);
  flex: 1;
}
.sports-list .category-box ul li.active .child-box .sports-name p {
  color: #ff9500 !important; /* 아이콘 필터와 동일한 주황색 계열 */
}
/* .sports-list .category-box ul li .child-box .sports-name .icon {display: block; width: 30px; height: auto; aspect-ratio: 1/1; background: url(./../img/sports1.png)no-repeat 50% 50%; background-size: cover;} */
.sports-list .category-box ul li .child-box .sports-name .icon {
  display: block;
  width: 30px;
  height: 30px;
  aspect-ratio: 1/1;
}
.sports-list .category-box ul li.active .child-box .sports-name .icon {
  filter: none;
}

/* 스포츠 카테고리 이미지 필터 제거 */
.sports-list .category-box ul li .child-box .sports-name .icon img,
.sports-list .sport-category-item .child-box .sports-name .icon img {
  filter: none !important;
}

.sports-list .category-box ul li .child-box .arrow_icon {
  display: flex; /* Add flex for vertical alignment */
  align-items: center; /* Vertically center the image */
  width: 18px;
  height: auto;
  flex-shrink: 0; /* Prevent shrinking */
}
.sports-list .category-box ul li .child-box .arrow_icon img {
  width: 100%;
  height: auto;
}

/* sports-list2 */
.sports-list .category-box.category-box2 {
  max-width: 300px;
}
.sports-list .category-box.category-box2 ul:not(.list2) {
  padding: 10px 0;
  margin-bottom: 40px;
}
.sports-list .category-box.category-box2 ul:not(.list2):last-of-type {
  margin-bottom: 0;
}
.sports-list .category-box.category-box2 ul:not(.list2) li .child-box {
  position: relative;
}
.sports-list .category-box.category-box2 ul:not(.list2) li .child-box:before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  display: block;
  width: calc(100% - 40px);
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}
.sports-list .category-box.category-box2 ul:not(.list2) li:last-of-type .child-box:before {
  display: none;
}
.category-box2 .coin_logo {
  width: 36px;
  height: auto;
}

/* list2 */
.sports-list .category-box.category-box2 ul.list2 {
  display: flex;
  align-items: center;
  flex-flow: column;
  gap: 10px;
  padding: 20px;
  box-sizing: border-box;
}
.sports-list .category-box.category-box2 ul.list2 li {
}
.sports-list .category-box.category-box2 ul.list2 li .child-box {
  align-items: center;
  padding: 11px 20px;
  box-sizing: border-box;
  background: #ffffff07;
  border-radius: 10px;
}
.sports-list .category-box.category-box2 ul.list2 li .child-box .sports-name {
}
.sports-list .category-box.category-box2 ul.list2 li .child-box .sports-name p {
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}
.sports-list .category-box.category-box2 ul.list2 li .child-box .sports-name .coin_logo {
  width: 16px;
  height: auto;
}
.sports-list .category-box.category-box2 ul.list2 li .price {
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}

.sports-list .table-area {
  width: 100%;
  height: auto;
}
.sports-list .table-area table {
  table-layout: fixed;
  width: 100%;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.sports-list .table-area caption {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: -9999;
  opacity: 0;
}
.sports-list .table-area thead {
}
.sports-list .table-area tbody {
  border-radius: 0 0 10px 10px;
  border-left: 1px solid #121929;
  border-right: 1px solid #121929;
  box-sizing: border-box;
}

/* Apply gradient to the header row */
.sports-list .table-area thead tr {
  background-image: var(--lg);
}

.sports-list .table-area tr {
  border-bottom: 1px solid #27282d;
}
.sports-list .table-area th {
  height: 40px;
  vertical-align: middle;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--gray_9);
}

.sports-list .table-area1 th:nth-child(1),
.sports-list .table-area1 td:nth-child(1) {
  width: 48px;
  min-width: 48px;
  text-align: center;
  padding-left: 0;
}
.sports-list .table-area1 th:nth-child(2),
.sports-list .table-area1 td:nth-child(2) {
  min-width: 240px;
  width: 240px;
  text-align: center;
}
.sports-list .table-area1 th:nth-child(3),
.sports-list .table-area1 td:nth-child(3) {
  min-width: 360px;
  width: 360px;
  text-align: center;
}
.sports-list .table-area1 th:nth-child(4),
.sports-list .table-area1 td:nth-child(4) {
  width: auto;
  min-width: 80px;
  text-align: center;
}
.sports-list .table-area1 th:nth-child(5) {
  width: 100%;
  text-align: left;
  padding-left: 15px;
}

/* table-area2 */
.sports-list .table-area2 th {
  min-width: 112px;
  width: 112px;
}
.sports-list .table-area2 th:nth-child(1) {
  min-width: 60px;
  width: 60px;
}
.sports-list .table-area2 th:nth-child(6) {
  width: 100%;
}
.sports-list .table-area2 th:nth-child(8) {
  display: none;
  min-width: 42px;
  width: 42px;
}
.sports-list .table-area2 td:nth-child(8) {
  display: none;
}

.sports-list .table-area td {
  height: 54px;
  vertical-align: middle;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt);
}
.sports-list.sports-list2 .table-area td {
  height: auto;
  box-sizing: border-box;
  padding: 6px 0;
}
.sports-list .table-area th:nth-child(6) {
  width: 230px;
}
.sports-list .table-area td .d-flex {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sports-list .table-area td .d-flex img {
  width: 30px;
  height: 30px;
}
.sports-list .table-area td.red {
  color: var(--red);
}
.sports-list .table-area td > span {
  padding: 5px 8px;
  border-radius: 10px;
  background: var(--pr);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt);
}
.sports-list .table-area td .td_btn {
  width: 2px;
  height: auto;
}
.sports-list .table-area td .td_btn img {
  width: 100%;
  height: auto;
}
.sports-list .table-area td .g_bar_line {
  position: relative;
  width: 100%;
  height: 4px;
  margin-top: 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.sports-list .table-area td .g_bar_line span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 40%;
  height: 100%;
  background: var(--wt);
  z-index: 1;
  transition: all 3s;
}

/* news_sec */
.news_sec {
  width: 100%;
  height: auto;
  margin-bottom: 60px;
  margin-top: 40px;
}
/* .news_sec:last-of-type {margin-bottom: 0;} */
.news_item {
  width: 100%;
  height: auto;
}
.news_item ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px 0;
}
.news_item ul li {
  overflow: hidden;
}
.news_item ul li .child-box {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--gray_5);
  border-radius: 15px;
}
.news_item.news_item-1 ul li .child-box .txt-box {
  overflow: hidden;
}
.news_item.news_item-1 ul li .child-box .txt-box .tit {
  width: 100%;
  height: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.news_item.news_item-1 ul li .child-box .txt-box .txt {
  width: 100%;
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* news_item-1 */
.news_item.news_item-1 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.news_item.news_item-1 ul {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

.news_item.news_item-1 ul li {
  width: 100%;
}

.news_item.news_item-1 ul li .child-box {
  width: 100%;
  box-sizing: border-box;
}

.news_item.news_item-1 ul li .child-box .img-box {
  min-width: 300px;
  width: 300px;
  height: auto;
  aspect-ratio: 300 / 187;
  border-radius: 10px;
  overflow: hidden;
}
.news_item.news_item-1 ul li .child-box .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news_item.news_item-1 ul li .child-box .txt-box {
  min-width: 0;
  overflow: hidden;
}
.news_item.news_item-1 ul li .child-box .txt-box .tit {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news_item.news_item-1 ul li .child-box .txt-box .txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray_9);
}

/* news_item-2 */
.news_item.news_item-2 ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px 0;
  padding-right: 0 !important;
  padding-left: 0;
  margin: 0;
}
.news_item.news_item-2 ul li {
  width: calc(100% / 2);
  padding: 0;
  box-sizing: border-box;
}
.news_item.news_item-2 ul li .child-box {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--gray_5);
  border-radius: 15px;
}
.news_item.news_item-2 ul li .child-box .img-box {
  min-width: 193px;
  width: 193px;
  height: auto;
  aspect-ratio: 193 / 120;
  border-radius: 10px;
  overflow: hidden;
}
.news_item.news_item-2 ul li .child-box .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news_item.news_item-2 ul li .child-box .txt-box {
}
.news_item.news_item-2 ul li .child-box .txt-box .tit {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  width: 100%;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--wt);
  word-break: keep-all;
}
.news_item.news_item-2 ul li .child-box .txt-box .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray_9);
  word-break: keep-all;
}

/* notice-list */
.notice_sec {
}
.notice-list {
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}
.notice-list ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 0;
  padding: 20px 10px;
  background-image: var(--bg);
  border-radius: 10px;
}
.notice-list ul li {
  width: calc(100% / 2);
  height: auto;
  padding: 0 10px;
  box-sizing: border-box;
}
.notice-list ul li a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt);
  background: rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.notice-list ul li a span {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt);
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* pr_wt_sec */
.pr_wt_sec {
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}
.pr_wt_sec.pr_wt_sec2 {
  max-height: 460px;
  overflow: auto;
  overflow-x: hidden;
}

.pr_wt_sec.pr_wt_sec2::-webkit-scrollbar {
  width: 7px;
}
.pr_wt_sec.pr_wt_sec2::-webkit-scrollbar-thumb {
  background: var(--pr);
  border-radius: 10px;
  background-clip: padding-box;
  border: 2px solid transparent;
}
.pr_wt_sec.pr_wt_sec2::-webkit-scrollbar-track {
  background-color: var(--black_0f);
  border-radius: 0;
}

.pr_wt_sec.pr_wt_sec2 ul li .child-box {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.pr_wt_sec ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -10px;
  gap: 15px 0;
}
.pr_wt_sec ul li {
  width: calc(100% / 2);
  padding: 0 10px;
  box-sizing: border-box;
}

.pr_wt_sec.w-100 ul {
  gap: 15px;
  margin: 0;
}
.pr_wt_sec.w-100 ul li {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.pr_wt_sec ul li .child-box {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  margin-bottom: 0;
  background: var(--lg);
  box-sizing: border-box;
  border-radius: 10px;
  min-height: 140px;
  height: 180px; /* 카드 높이 고정 */
  max-height: 180px; /* 카드 최대 높이 제한 */
  overflow: hidden; /* 넘치는 내용 숨김 */
}

.pr_wt_sec ul li .child-box .img-box {
  position: relative;
  min-width: 100px;
  width: 100px;
  height: auto;
  aspect-ratio: 1/1;
  overflow: hidden; /* 추가: 이미지가 넘치지 않도록 */
  border-radius: 10px; /* 추가: 부모에도 radius 적용 */
  background-color: transparent; /* 변경: 배경색 투명으로 */
}

.pr_wt_sec ul li .child-box .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px; /* 추가: 이미지 자체에도 radius */
}

.pr_wt_sec ul li .child-box .txt-box {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 15px;
  flex: 1;
}

.pr_wt_sec ul li .child-box .txt-box .tit {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wt);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-bottom: 5px;
}

.pr_wt_sec ul li .child-box .txt-box .preview-content {
  color: var(--wt);
  font-size: 13px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  margin-top: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pr_wt_sec ul li .child-box .txt-box .bt_txt {
}
.pr_wt_sec ul li .child-box .txt-box .bt_txt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
}
.pr_wt_sec ul li .child-box .txt-box .bt_txt .user_info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pr_wt_sec ul li .child-box .txt-box .bt_txt .user_info .user_img {
  min-width: 20px;
  width: 20px;
  height: auto;
  aspect-ratio: 1/1;
}
.pr_wt_sec ul li .child-box .txt-box .bt_txt .user_info .user_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pr_wt_sec ul li .child-box .txt-box .bt_txt .user_info .name {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
  word-break: break-word;
}
.pr_wt_sec ul li .child-box .txt-box .bt_txt .user_info .date {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--gray_9);
}

.pr_wt_sec ul li .child-box .txt-box .bt_txt .chat_v {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pr_wt_sec ul li .child-box .txt-box .bt_txt .chat_v p {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.13px;
  /* color: var(--wt); */
  color: var(--gray_9);
}
.pr_wt_sec ul li .child-box .txt-box .bt_txt .chat_v p > img {
  width: 16px;
  height: auto;
  aspect-ratio: 1/1;
}

/* review_list */
.review_list {
  width: 100%;
  height: auto;
}
.cp_info {
  width: 100%;
  height: auto;
}
.cp_info ul {
  display: flex;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
.cp_info ul li {
  width: 100%;
  height: auto;
}
.cp_info ul li .child-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 27px 30px;
  background: var(--lg);
  box-sizing: border-box;
  border-radius: 10px;
}
.cp_info ul li .child-box .cp_logo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: calc(100% / 3);
}
.cp_info ul li .child-box .cp_logo:before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  content: '';
  width: 1px;
  height: 40px;
  background: var(--wt);
  opacity: 0.2;
}
.cp_info ul li .child-box .cp_logo img {
  width: 50px;
  height: auto;
}
.cp_info ul li .child-box .cp_logo .cp-tit {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  color: var(--wt);
}

.cp_info ul li .child-box .txt-box {
  position: relative;
  width: calc(100% / 3);
  padding: 0 30px;
  box-sizing: border-box;
}
.cp_info ul li .child-box .txt-box:before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  content: '';
  width: 1px;
  height: 40px;
  background: var(--wt);
  opacity: 0.2;
}
.cp_info ul li .child-box .txt-box .tit {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--gray_9);
}
.cp_info ul li .child-box .txt-box .txt {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--wt);
}

.cp_info ul li .child-box .btn-box {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 14px;
  width: calc(100% / 3);
}
/* .cp_info ul li .child-box .btn-box:before {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 40px; background: var(--wt);} */
.cp_info ul li .child-box .btn-box .cp_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12.7px;
  max-width: 240px;
  width: 100%;
  height: 36px;
  border: 1px solid var(--wt);
  border-radius: 10px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}
.cp_info ul li .child-box .btn-box .cp_btn img {
  width: 11px;
  height: auto;
}
.cp_info ul li .child-box .btn-box .pn {
  border-color: var(--or);
  color: var(--or);
}
.cp_info ul li .child-box .btn-box .rr {
}

/* review-detail */
.review-detail {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.review-detail .cp_info-fixed {
  position: sticky;
  top: 20px;
  min-width: 300px;
  width: 300px;
  height: auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.review-detail .cp_info-fixed .img-box {
  text-align: center;
}
.review-detail .cp_info-fixed .img-box img {
  width: 120px;
  height: auto;
  aspect-ratio: 1/1;
  margin-bottom: 20px;
  border-radius: 20px;
  overflow: hidden;
  object-fit: cover;
}
.review-detail .cp_info-fixed .img-box .name {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}

.review-detail .cp_info-fixed .play_now-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 240px;
  width: 100%;
  height: 46px;
  margin: 40px auto 50px;
  border-radius: 15px;
  background: var(--pr);
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}
.review-detail .cp_info-fixed .play_now-btn img {
  width: 16px;
  height: auto;
}

.review-detail .cp_info-fixed .star-val {
  margin-bottom: 37px;
}
.review-detail .cp_info-fixed .star-val .num-txt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: var(--yellow);
}

/* 라이트 모드에서 0점일 때 인라인 스타일을 덮어쓰기 */
body.light .review-detail .cp_info-fixed .star-val .num-txt p[style*='color: #ffffff'] {
  color: #000 !important;
}

/* 라이트 모드에서 0점일 때만 별점 아이콘 색상을 검은색으로 변경 */
body.light .star-item:not(.rating-green):not(.rating-orange):not(.rating-red) .star-icon {
  background-color: #000 !important;
}

/* 라이트 모드에서 점수별 별 색상 적용 */
body.light .star-item.rating-green .star-icon {
  background-color: #28a745 !important;
}

body.light .star-item.rating-orange .star-icon {
  background-color: var(--yellow) !important;
}

body.light .star-item.rating-red .star-icon {
  background-color: #dc3545 !important;
}

/* 라이트 모드에서 꺼진 별 스타일 */
body.light .star-item .star-icon.star-off {
  background-color: #6c757d !important;
}

/* 라이트 모드에서 별 색상 적용 */
body.light .review-detail .cp_info-fixed .star-val .star-item.rating-green img {
  filter: hue-rotate(80deg) saturate(4) brightness(0.7);
}

body.light .review-detail .cp_info-fixed .star-val .star-item.rating-orange img {
  filter: hue-rotate(45deg) saturate(3) brightness(0.8);
}

body.light .review-detail .cp_info-fixed .star-val .star-item.rating-red img {
  filter: hue-rotate(320deg) saturate(5) brightness(0.6);
}
.review-detail .cp_info-fixed .star-val .num-txt span {
}

.review-detail .cp_info-fixed .star-val .star-item {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 18px 0;
}
.review-detail .cp_info-fixed .star-val .star-item img {
  width: 16px;
  height: auto;
}

.review-detail .cp_info-fixed .star-val .safety_index {
}
.review-detail .cp_info-fixed .star-val .safety_index p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 7px 10px;
  border: 1px solid var(--yellow);
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  color: var(--yellow);
  border-radius: 15px;
}
.review-detail .cp_info-fixed .star-val .safety_index p img {
  width: 18px;
  height: auto;
}

.review-detail .cp_info-fixed .m_pay {
  width: 100%;
  height: auto;
}
.review-detail .cp_info-fixed .m_pay .tit {
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--wt);
  opacity: 0.5;
}
/* .review-detail .cp_info-fixed .m_pay .pay-item  */
.review-detail .cp_info-fixed .m_pay .pay-item .pay-img {
}
.review-detail .cp_info-fixed .m_pay .pay-item ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 0;
  margin: 0 -4px;
}
.review-detail .cp_info-fixed .m_pay .pay-item ul li {
  width: calc(100% / 4);
  padding: 0 4px;
  box-sizing: border-box;
}
.review-detail .cp_info-fixed .m_pay .pay-item .pay-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--wt);
  box-sizing: border-box;
}
.review-detail .cp_info-fixed .m_pay .pay-item .pay-img img {
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.review-detail .cp_info-fixed .licenses_owner {
}
.review-detail .cp_info-fixed .licenses_owner.first {
  width: 100%;
  height: auto;
  padding: 30px 0;
  margin: 30px 0;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.review-detail .cp_info-fixed .licenses_owner .tit {
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--wt);
  opacity: 0.5;
}
.review-detail .cp_info-fixed .licenses_owner .txt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--wt);
}
.review-detail .cp_info-fixed .licenses_owner .txt img {
  width: 18px;
  height: auto;
}

.review-detail .detail-content {
  width: 100%;
  height: auto;
}
.review-detail .detail-content .small_tit {
}
.review-detail .detail-content .review-txt {
  width: 100%;
  height: auto;
  padding: 25px 20px 17px;
  box-sizing: border-box;
  background: var(--lg);
  border-radius: 10px;
}
.review-detail .detail-content .review-txt .txt {
  /* Removed text truncation properties */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* display: -webkit-box; */
  /* -webkit-line-clamp: 3; */
  /* -webkit-box-orient: vertical; */
  width: 100%;
  height: auto;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--wt);
}
.review-detail .detail-content .review-txt .txt.on {
  -webkit-line-clamp: initial;
}
.review-detail .detail-content .review-txt .more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 84px;
  height: 28px;
  margin: 25px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--gray_9);
}
.review-detail .detail-content .review-txt .more-btn.en {
  width: 120px;
}
.review-detail .detail-content .review-txt .more-btn img {
  width: 14px;
  height: auto;
}
.review-detail .detail-content .review-txt .more-btn.on img {
  transform: rotate(180deg);
}

/* Add rotation for the expanded state using the .expanded class */
.review-detail .detail-content .review-txt .more-btn.expanded img {
  transform: rotate(180deg);
  transition: transform 0.3s ease; /* Add smooth transition */
}

.bonus_game {
  width: 100%;
  height: auto;
  margin-top: 40px;
}
.bonus_game ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px 0;
  margin: 0 -10px;
}
.bonus_game ul li {
  padding: 0 10px;
  box-sizing: border-box;
}
.bonus_game ul li .small_tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bonus_game ul li .small_tit button {
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  color: var(--gray_9);
}
.bonus_game ul li:first-of-type {
  max-width: 407px;
  width: 100%;
  height: auto;
}
.bonus_game ul li:last-of-type {
  max-width: 100%;
  width: 100%;
  height: auto;
}
.mypage-sec .bonus_game > ul > li:last-of-type {
  max-width: 50% !important;
}
.bonus_game.bonus_game2 li {
  max-width: 100% !important;
  width: 100%;
}
.bonus_game ul li .small_tit {
}
.bonus_game ul li .child-box {
  display: flex;
  flex-flow: column;
  gap: 10px;
  width: 100%;
  height: 300px;
  padding: 20px;
  box-sizing: border-box;
  background: var(--lg);
  border-radius: 10px;
}
.bonus_game ul li .child-box input {
  display: none;
}
.bonus_game ul li .child-box .bonus_game-item {
  position: relative;
  display: flex;
  justify-content: center;
  flex-flow: column;
  gap: 10px;
  height: 80px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 10px 10px 0;
  box-sizing: border-box;
}
.bonus_game ul li .child-box input:checked + .bonus_game-item {
  animation: jello-horizontal 0.9s both;
  border-left: 1px solid var(--yellow);
}
.bonus_game ul li .child-box input:checked + .bonus_game-item:before {
  position: absolute;
  top: 10px;
  right: 10px;
  content: '';
  display: block;
  width: 20px;
  height: auto;
  aspect-ratio: 1/1;
  background: url(./../img/ckd_on.png) no-repeat 50% 50%;
  background-size: cover;
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bonus_game ul li .child-box .bonus_game-item .tit {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--gray_9);
}
.bonus_game ul li .child-box input:checked + .bonus_game-item .tit {
  color: var(--yellow);
}
.bonus_game ul li .child-box .bonus_game-item .txt {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: var(--gray_9);
}
.bonus_game ul li .child-box input:checked + .bonus_game-item .txt {
  color: var(--wt);
}

.bonus_game ul li:last-of-type .child-box {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  gap: 10px;
}
.bonus_game ul li:last-of-type .child-box .bonus_game-item {
  border-radius: 10px;
}
.bonus_game ul li:last-of-type .child-box input:checked + .bonus_game-item {
  border: 0;
}
.bonus_game ul li:last-of-type .child-box .bonus_game-item {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: calc((100% - 20px) / 3);
  box-sizing: border-box;
}
.bonus_game ul li:last-of-type .child-box .icon_img {
  width: 30px;
  height: auto;
  margin-bottom: 6px;
}
.bonus_game ul li:last-of-type .child-box .icon_img img {
  width: 100%;
  height: auto;
}
.bonus_game ul li:last-of-type .child-box .name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt);
  text-align: center;
}

.bonus_game2 ul li:first-of-type .child-box {
  height: 346px;
  padding: 15px;
  box-sizing: border-box;
  justify-content: center;
  /* Assuming overflow might be inherited or applied here, ensure it's not auto */
  overflow: hidden; /* Change from potential auto to hidden */
}
.bonus_game2 ul li:first-of-type .child-box {
  justify-content: center;
}
.bonus_game2 ul li:first-of-type .child-box > .d-flex {
  display: flex;
  align-items: center;
  gap: 36px;
}
.bonus_game2 ul li:first-of-type .child-box .profile-area {
  max-width: 230px;
  width: 100%;
  height: auto;
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-img {
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-img .file_up {
  position: relative;
  width: 120px;
  height: auto;
  aspect-ratio: 1/1;
  margin: 0 auto;
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-img .file_up input[type='file'] {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 3;
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-img .file_up > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%;
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-img .file_up .file_btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: auto;
  z-index: 2;
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-img .file_up .file_btn img {
  width: 100%;
  height: auto;
}

.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-info {
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-info .tit {
  margin: 20px 0 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--gray_9);
  text-align: center;
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-info .d-flex {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-info img {
  width: 23.8px;
  height: auto;
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-info .txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt);
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-info .exp {
  padding: 3px 10px;
  background: var(--pr);
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
  border-radius: 20px;
}
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-name {
  margin-top: 10px;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: break-word;
}

.bonus_game2 ul li:first-of-type .child-box .rank-area {
  width: 100%;
  height: auto;
}
.bonus_game2 ul li:first-of-type .child-box .rank-area ul {
  display: flex;
  flex-flow: column;
  gap: 6px;
}
.bonus_game2 ul li:first-of-type .child-box .rank-area ul li {
  width: 100%;
  height: auto;
}
.bonus_game2 ul li:first-of-type .child-box .rank-area ul li .child-box {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 7px 15px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
}
.bonus_game2 ul li:first-of-type .child-box .rank-area ul li .child-box .rank_box {
  display: flex;
  align-items: center;
  gap: 15px;
}
.bonus_game2 ul li:first-of-type .child-box .rank-area ul li .child-box .rank_box img {
  width: 28px;
  height: auto;
}
.bonus_game2 ul li:first-of-type .child-box .rank-area ul li .child-box .rank_box .tit {
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}

.bonus_game2 ul li:first-of-type .child-box .rank-area ul li .child-box .point_txt {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--gray_9);
}

.bonus_game2 ul li:last-of-type .child-box {
  height: 346px;
  padding: 12px 15px;
  overflow-x: hidden;
}

.bonus_game2 ul li:last-of-type .child-box::-webkit-scrollbar {
  width: 7px;
}
.bonus_game2 ul li:last-of-type .child-box::-webkit-scrollbar-thumb {
  background: var(--pr);
  border-radius: 10px;
  background-clip: padding-box;
  border: 2px solid transparent;
}
.bonus_game2 ul li:last-of-type .child-box::-webkit-scrollbar-track {
  background-color: var(--black_0f);
  border-radius: 0;
}

.bonus_game2 ul li:last-of-type .child-box .my_activities {
  width: 100%;
  height: auto;
}
.bonus_game2 ul li:last-of-type .child-box .my_activities ul {
  display: flex;
  flex-flow: column;
  gap: 0;
}
.bonus_game2 ul li:last-of-type .child-box .my_activities ul li {
  width: 100%;
  height: auto;
}
.bonus_game2 ul li:last-of-type .child-box .my_activities ul li .txt-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 46px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.bonus_game2 ul li:last-of-type .child-box .my_activities ul li:last-of-type .txt-box {
  border-bottom: 0;
}
.bonus_game2 ul li:last-of-type .child-box .my_activities ul li .txt-box .txt {
  width: 100%;
  height: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--wt);
}
.bonus_game2 ul li:last-of-type .child-box .my_activities ul li .txt-box .date {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--gray_9);
}

/* comment-area */
.comment-area {
  width: 100%;
  height: auto;
  margin-top: 40px;
}
.comment-area .small_box {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}
.comment-area .small_box .small_tit {
  margin-bottom: 0;
}
.comment-area .small_box .small_tit .sub {
  display: block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--gray_9);
}
.comment-area .small_box .login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 105px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}
.comment-area .small_box .login-btn img {
  width: 18px;
  height: auto;
}

/* comment-box */
.comment-box {
  width: 100%;
  height: auto;
  padding: 30px 30px 40px;
  box-sizing: border-box;
  background-image: var(--lg);
  box-sizing: border-box;
  border-radius: 10px;
}
.comment-box .star-btn {
  display: flex;
  align-items: center;
  gap: 3px;
}
.comment-box .star-btn input[type='checkbox'] {
  display: none;
}
.comment-box .star-btn label {
}
.comment-box .star-btn label:before {
  content: '';
  display: block;
  width: 28px;
  height: auto;
  aspect-ratio: 1/1;
  background: url(./../img/star_off.png) no-repeat 50% 50%;
  background-size: cover;
}
.comment-box .star-btn input[type='checkbox']:checked + label:before {
  animation: jello-diagonal-1 0.8s both;
  content: '';
  display: block;
  width: 28px;
  height: auto;
  aspect-ratio: 1/1;
  background: url(./../img/star_on.png) no-repeat 50% 50%;
  background-size: cover;
}

@keyframes jello-diagonal-1 {
  0% {
    -webkit-transform: skew(0deg 0deg);
    transform: skew(0deg 0deg);
  }
  30% {
    -webkit-transform: skew(25deg 25deg);
    transform: skew(25deg 25deg);
  }
  40% {
    -webkit-transform: skew(-15deg, -15deg);
    transform: skew(-15deg, -15deg);
  }
  50% {
    -webkit-transform: skew(15deg, 15deg);
    transform: skew(15deg, 15deg);
  }
  65% {
    -webkit-transform: skew(-5deg, -5deg);
    transform: skew(-5deg, -5deg);
  }
  75% {
    -webkit-transform: skew(5deg, 5deg);
    transform: skew(5deg, 5deg);
  }
  100% {
    -webkit-transform: skew(0deg 0deg);
    transform: skew(0deg 0deg);
  }
}

/* comment-textarea */
.comment-textarea {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.comment-textarea textarea {
  width: 100%;
  height: 160px;
  border-radius: 10px;
  border: 1px solid var(--wt);
  padding: 25px 20px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 400;
  color: var(--wt);
  resize: none;
}

/* 라이트 모드에서 리뷰 작성란 텍스트 색상 */
body.light .comment-textarea textarea {
  color: #000;
}
.comment-textarea .maxlength_num {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--gray_9);
  z-index: 2;
}
.comment-textarea .maxlength_num i {
  font-style: unset;
}

/* comment-list */
.comment-list {
  width: 100%;
  height: auto;
  margin-top: 40px;
}
.comment-list ul {
  display: flex;
  flex-flow: column;
}
.comment-list ul li {
  width: 100%;
  height: auto;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.comment-list ul li:last-of-type {
  padding-bottom: 40px;
  border-bottom: 0;
}
.comment-list ul li .child-box {
  display: flex;
  flex-flow: column;
  gap: 15px;
  width: 100%;
  height: auto;
}
.comment-list ul li .child-box .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comment-list ul li .child-box .user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.comment-list ul li .child-box .user-info .img-box {
  width: 30px;
  height: auto;
  aspect-ratio: 1/1;
}
.comment-list ul li .child-box .user-info .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.comment-list ul li .child-box .user-info .name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--wt);
}
.comment-list ul li .child-box .s_score {
  display: flex;
  align-items: center;
  gap: 3px;
}
.comment-list ul li .child-box .s_score img {
  width: 14px;
  height: auto;
}

.comment-list ul li .child-box .md-btn {
  display: flex;
  align-items: center;
}
.comment-list ul li .child-box .md-btn a {
  position: relative;
  padding-right: 10px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--gray_9);
}
.comment-list ul li .child-box .md-btn a:last-child {
  padding-right: 0;
  margin-right: 0;
}
.comment-list ul li .child-box .md-btn a:last-child:before {
  display: none;
}
.comment-list ul li .child-box .md-btn a:before {
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
  content: '';
  display: block;
  width: 1px;
  height: 8px;
  background: var(--gray_5);
}
.comment-list ul li .child-box .md-btn button {
  position: relative;
  padding-right: 10px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--gray_9);
}
.comment-list ul li .child-box .md-btn button:last-child {
  padding-right: 0;
  margin-right: 0;
}
.comment-list ul li .child-box .md-btn button:last-child:before {
  display: none;
}
.comment-list ul li .child-box .md-btn button:before {
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
  content: '';
  display: block;
  width: 1px;
  height: 8px;
  background: var(--gray_5);
}

.comment-list ul li .child-box .txt-box {
}
.comment-list ul li .child-box .txt-box .txt {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--wt);
}

/* mypage-sec */
.mypage-sec {
  margin-bottom: 60px;
}

/* popup */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 360px;
  width: 100%;
  height: auto;
  padding: 40px 30px;
  box-sizing: border-box;
  background: var(--lg);
  z-index: 9999;
  border-radius: 10px;
}
.popup.open {
  animation: popupOpen 0.3s linear both;
  display: block;
}
@keyframes popupOpen {
  0% {
    top: 52%;
    opacity: 0;
  }
  100% {
    top: 50%;
    opacity: 1;
  }
}
.popup .popup-hd {
  text-align: center;
}
.popup .popup-hd .tit {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}
.popup .popup-hd .close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 24px;
  height: auto;
}
.popup .popup-hd .close-btn img {
  width: 100%;
  height: auto;
}

/* 라이트모드일 때 닫기 버튼 이미지 색상 변경 */
body.light .popup .popup-hd .close-btn img {
  filter: brightness(0);
}

.popup .popup-body {
  margin-top: 40px;
}
.popup .popup-body .search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 15px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}
.popup .popup-body .search-box .search-btn {
  width: 18px;
  height: auto;
}
.popup .popup-body .search-box .search-btn img {
  width: 100%;
  height: auto;
}
.popup .popup-body .search-box input {
  width: 100%;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--wt);
  outline: none;
}
.popup .popup-body .search-box input::placeholder {
  color: var(--gray_9);
}

.popup .popup-body .select-box {
  margin-top: 12px;
}
.popup .popup-body .select-box ul {
  display: flex;
  flex-flow: column;
}
.popup .popup-body .select-box ul li {
  width: 100%;
  height: auto;
}
.popup .popup-body .select-box ul li button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt);
  box-sizing: border-box;
  border-radius: 8px;
}
.popup .popup-body .select-box ul li button:not(.active):after {
  content: '';
  display: block;
  width: 20px;
  height: auto;
  aspect-ratio: 1/1;
  background: url(./../img/ckd.png) no-repeat 50% 50%;
  background-size: cover;
}
.popup .popup-body .select-box ul li.active button {
  background: rgba(255, 255, 255, 0.03);
}
.popup .popup-body .select-box ul li.active button:after {
  content: '';
  display: block;
  width: 20px;
  height: auto;
  aspect-ratio: 1/1;
  background: url(./../img/ckd_on.png) no-repeat 50% 50%;
  background-size: cover;
}

.popup .popup-body .input-box {
  display: flex;
  align-items: center;
  gap: 17px;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.popup .popup-body .input-box:last-of-type {
  margin-bottom: 0;
}
.popup .popup-body .input-box input {
  max-width: 190px;
  width: 100%;
  height: 46px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--wt);
  outline: none;
  box-sizing: border-box;
}
.popup .popup-body .input-box select {
  width: 90px;
  height: 46px;
  padding-right: 20px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--wt);
  outline: none;
  white-space: nowrap;
  appearance: none;
  background: url(./../img/select_icon.png) no-repeat 100% 50%;
  background-size: 18px;
  text-align: right;
}
.popup .popup-body .input-box select option {
  background: #18243e;
  text-align: center;
}

/* popup-body */
.login-popup {
  max-width: 560px;
}
.join-popup {
  max-width: 560px;
}
.myedit-popup {
  max-width: 560px;
}
.popup-body {
}
.popup-body .input-box2 {
  display: flex;
  flex-flow: column;
  gap: 12px;
  margin-bottom: 30px;
}
.popup-body .input-box2 .tit {
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}
.popup-body .input-box2 input {
  width: 1005;
  height: 46px;
  border-radius: 10px;
  padding: 0 15px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--wt);
  outline: none;
}
.popup-body .input-box2 input::placeholder {
  color: rgba(128, 128, 128, 0.8);
}

.popup-body .submit-btn.w-100 {
  width: 100%;
  margin-top: 20px;
}

.popup-body .join_btn {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}
.popup-body .join_btn .txt {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--wt);
}
.popup-body .join_btn .join {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: var(--or);
  text-decoration: underline;
}

/* .slick-track */
.slick-list {
  height: 100%;
}
.slick-track {
  height: 100%;
}

/* my_edit-btn */
.my_edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 33px;
  margin: 23px auto 0;
  border-radius: 20px;
  background: var(--pr);
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}

/* write-area */
.write_form {
  width: 100%;
  height: auto;
  padding: 30px;
  box-sizing: border-box;
  border-radius: 15px;
  background: var(--lg);
}
.write_form .input-box {
  display: flex;
  flex-flow: column;
  gap: 10px;
  margin-bottom: 30px;
}
.write_form .input-box .tit {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: var(--wt);
}
.write_form .input-box input {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid var(--wt);
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--wt);
  outline: none;
}
.write_form .input-box input::placeholder {
  color: #838383;
}
.write_form .input-box textarea {
  width: 100%;
  height: auto;
  aspect-ratio: 1200/600;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid var(--wt);
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--wt);
  outline: none;
  resize: none;
}
.write_form .input-box textarea::placeholder {
  color: #838383;
}

.write_form .input-box .add_input {
  position: relative;
  order: 3;
}
.write_form .input-box .add_input input {
}
.write_form .input-box .add_input .add_btn {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 25px;
  height: auto;
}

.write_form .input-box .input_item {
  position: relative;
}
.write_form .input-box .input_item input {
}
.write_form .input-box .input_item .del_btn {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 25px;
  height: auto;
}

.write_form .submit-btn {
  width: 100%;
}

/* no-data 메시지 스타일 */
.no-data {
  font-size: 14px;
  color: var(--gray_9);
  padding: 20px;
  text-align: center;
}

/* 로그인 오류 메시지 스타일 */
.login-error-message {
  color: #ff4d4d;
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

/* 오류 상태의 입력 필드 스타일 */
.input-error {
  border-color: #ff4d4d !important;
  background-color: rgba(255, 77, 77, 0.05) !important;
}

/* 오류 아이콘 스타일 */
.error-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #ff4d4d;
  font-size: 16px;
}

/* 업체 배너 스타일 */
.company-banners-pc {
  /* display: flex; */
  /* flex-direction: column; */
  gap: 20px;
  width: 100%;
  height: 100%;
}

.company-banners-mo {
  /* flex-direction: column; */
  margin-top: -15px;
  gap: 15px;
  width: 100%;
  height: 100%;
}

.company-banner {
  width: 100%;
  height: 180px; /* 높이를 늘려서 세로 공간 확보 */
  border-radius: 8px;
  overflow: hidden; /* Keep overflow hidden for image cropping */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  background-color: #000000; /* 검은색 배경 */
  transition:
    transform 0.25s cubic-bezier(0.4, 0.2, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.company-banner:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.company-banner img {
  width: 100%;
  height: 100%; /* Image fills the banner height */
  display: block;
  object-fit: cover; /* Image covers the area, maintaining aspect ratio */
}

/* category-btn */
.category-btn {
  transition: all 0.3s ease;
}
.category-btn:hover {
  color: var(--pr);
}

/* 카지노 리뷰 섹션 스타일 */
.casino-reviews {
  width: 100%;
  margin-top: 20px;
}

.casino-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.casino-item {
  width: calc(50% - 10px);
  margin-bottom: 20px;
}

.casino-card {
  background: var(--bg-color);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.casino-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15);
}

.casino-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.casino-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--main-color);
}

.safety-index {
  font-size: 14px;
  padding: 5px 10px;
  background: var(--sub-color);
  color: #fff;
  border-radius: 5px;
}

.casino-body {
  margin-bottom: 15px;
}

.casino-description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--font-color);
  height: 80px;
  overflow: hidden;
}

.casino-footer {
  display: flex;
  justify-content: flex-end;
}

.read-more {
  display: inline-block;
  padding: 8px 15px;
  background: var(--main-color);
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.read-more:hover {
  background: var(--sub-color);
}

/* 페이지네이션 스타일 */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 10px;
}

.page-btn {
  padding: 8px 15px;
  background: var(--main-color);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 5px;
}

.page-number {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-number.active {
  background: var(--main-color);
  color: #fff;
}

.loading,
.error,
.empty {
  width: 100%;
  padding: 30px;
  text-align: center;
  font-size: 16px;
  color: var(--font-color);
}

.error {
  color: #e74c3c;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
  .casino-item {
    width: 100%;
  }

  .casino-description {
    height: auto;
    max-height: 80px;
  }

  /* free_notice 모바일 반응형 */
  .free_notice ul {
    flex-direction: column;
    gap: 20px;
  }

  .free_notice ul li {
    width: 100%;
  }

  .free_notice ul li .child-box {
    aspect-ratio: auto;
    min-height: 120px;
  }

  .free_notice ul li .child-box > .img-box {
    min-width: 80px;
    width: 80px;
  }
}

/* 카지노 탭 메뉴 스타일 */
.casino-tabs {
  width: 100%;
  margin: 20px 0;
  border-bottom: 1px solid #eee;
}

.casino-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.casino-tabs ul li {
  padding: 10px 15px;
  cursor: pointer;
  position: relative;
  font-size: 15px;
  transition: all 0.3s ease;
}

.casino-tabs ul li:hover {
  color: var(--main-color);
}

.casino-tabs ul li.active {
  color: var(--main-color);
  font-weight: 700;
}

.casino-tabs ul li.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--main-color);
}

@media (max-width: 768px) {
  .casino-tabs {
    overflow-x: auto;
  }

  .casino-tabs ul {
    width: max-content;
  }

  .casino-tabs ul li {
    white-space: nowrap;
  }
}

/* 카지노 탭 내용 스타일 */
.bonus-info,
.games-info,
.providers-info,
.languages-info,
.payment-info {
  padding: 10px 0;
}

.bonus-info p,
.games-info p,
.providers-info p,
.languages-info p,
.payment-info p {
  margin-bottom: 8px;
  line-height: 1.5;
  font-size: 14px;
}

.bonus-info strong,
.games-info strong,
.providers-info strong,
.languages-info strong,
.payment-info strong {
  font-weight: 700;
  color: var(--main-color);
  margin-right: 5px;
}

/* 리뷰 설명 스타일 */
.review_description {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.description_text h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: var(--main-color);
  font-weight: 700;
}

.description_text p {
  line-height: 1.6;
  font-size: 16px;
  color: var(--font-color);
  white-space: pre-line;
}

/* 카지노 게임 추천 목록 스타일 */
.casino-game-list-container {
  padding: 20px 0;
}

.casino-recommendation-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
}
@media (max-width: 768px) {
  .section-title {
    font-size: 18px;
    padding: 0 15px;
  }
}

.loading-indicator {
  padding: 40px 0;
  text-align: center;
  font-size: 18px;
  color: #666;
}

.no-data {
  padding: 40px 0;
  text-align: center;
  font-size: 18px;
  color: #666;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
  .section-title {
    font-size: 20px;
    padding: 0 15px;
  }

  .casino-game-list-container {
    padding: 15px 0;
  }

  .casino-recommendation-section {
    margin-bottom: 30px;
  }
}

/* 가장 낮은 USDT 수수료 강조 표시 */
.best-price {
  color: #00c853 !important;
  font-weight: bold;
}

/* 페이지네이션 - 화살표 버튼 비활성화 상태 스타일 */
.pager .arrow_btn.disabled {
  opacity: 0.5;
  cursor: default;
}

.pager .arrow_btn.disabled a {
  cursor: default;
  pointer-events: none;
}

/* 퀼 에디터 스타일 */
.ql-editor {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.ql-editor p {
  margin-bottom: 1em;
}

.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: bold;
}

.ql-editor h1 {
  font-size: 2em;
}
.ql-editor h2 {
  font-size: 1.5em;
}
.ql-editor h3 {
  font-size: 1.17em;
}
.ql-editor h4 {
  font-size: 1em;
}
.ql-editor h5 {
  font-size: 0.83em;
}
.ql-editor h6 {
  font-size: 0.67em;
}

.ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin: 1em 0;
  padding-left: 1em;
  color: #666;
}

.ql-editor pre {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 1em;
  margin: 1em 0;
  overflow-x: auto;
}

.ql-editor code {
  background-color: #f5f5f5;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
}

.ql-editor ul,
.ql-editor ol {
  padding-left: 2em;
  margin: 1em 0;
}

.ql-editor li {
  margin-bottom: 0.5em;
}

.ql-editor img {
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 1em 0;
}

.ql-editor iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.ql-editor a {
  color: #0066cc;
  text-decoration: underline;
}

.ql-editor strong {
  font-weight: bold;
}

.ql-editor em {
  font-style: italic;
}

.ql-editor u {
  text-decoration: underline;
}

.ql-editor s {
  text-decoration: line-through;
}

/* post content word-wrap */
.review-content #post-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
}

/* td 요소 정렬 수정 */
.sports-list .table-area1 td:nth-child(1) {
  text-align: left;
  padding-left: 15px;
}
.sports-list .table-area1 td:nth-child(3) {
  text-align: left;
  padding-left: 15px;
}
.sports-list .table-area1 td:nth-child(5) {
  text-align: left;
  padding-left: 15px;
}

/* === APPLY FINAL TEXT COLOR CHANGES === */

/* Withdrawal Limits Table: Force ALL text inside data cells to WHITE (Max Specificity) */
body .review-txt .txt .table-responsive:first-of-type table td,
body .review-txt .txt .table-responsive:first-of-type table td * {
  /* Apply to td and all children */
  color: #ffffff !important;
}

/* Language Table: Force ALL text inside data cells to WHITE by default (Max Specificity) */
body .review-txt .txt .table-responsive:nth-of-type(2) table td,
body .review-txt .txt .table-responsive:nth-of-type(2) table td * {
  /* Apply to td and all children */
  color: #ffffff !important;
}

/* Language Table: Force '24/7' text (and similar spans) specifically to ORANGE (Max Specificity) */
/* This will override the general white rule above for these specific elements */
body .review-txt .txt .table-responsive:nth-of-type(2) table td span.flex > span:last-child,
body .review-txt .txt .table-responsive:nth-of-type(2) table td span.badge + span {
  color: var(--or, #ff9900) !important; /* Keep specific orange color */
}

/* === END APPLY FINAL TEXT COLOR CHANGES === */

/* === RESTORE BASIC TABLE STYLES === */

/* Styling for tables within the review text content */
.review-txt .txt .table-responsive table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  color: #cccccc; /* Default slightly dimmer color */
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  table-layout: fixed;
}

.review-txt .txt .table-responsive th,
.review-txt .txt .table-responsive td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}

.review-txt .txt .table-responsive th {
  background-color: rgba(255, 255, 255, 0.08);
  font-weight: 600;
  color: #ddd;
  white-space: nowrap;
}

/* Alternate row coloring */
.review-txt .txt .table-responsive tbody tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* === END RESTORE BASIC TABLE STYLES === */

/* === APPLY FINAL TEXT COLOR CHANGES === */

/* Review Text Link Color */
body .review-txt .txt a {
  color: #ff9900 !important; /* 링크 주황색, important 추가 */
  text-decoration: underline !important; /* 밑줄도 강제 */
}

/* Withdrawal Limits Table: Force ALL text inside data cells to WHITE (Max Specificity) */
body .review-txt .txt .table-responsive:first-of-type table td,
body .review-txt .txt .table-responsive:first-of-type table td * {
  /* Apply to td and all children */
  color: #ffffff !important;
}

/* Language Table: Force ALL text inside data cells to WHITE by default (Max Specificity) */
body .review-txt .txt .table-responsive:nth-of-type(2) table td,
body .review-txt .txt .table-responsive:nth-of-type(2) table td * {
  /* Apply to td and all children */
  color: #ffffff !important;
}

/* Language Table: Force '24/7' text (and similar spans) specifically to ORANGE (Max Specificity) */
/* This will override the general white rule above for these specific elements */
body .review-txt .txt .table-responsive:nth-of-type(2) table td span.flex > span:last-child,
body .review-txt .txt .table-responsive:nth-of-type(2) table td span.badge + span {
  color: var(--or, #ff9900) !important; /* Keep specific orange color */
}

/* === END APPLY FINAL TEXT COLOR CHANGES === */

/* === IMPROVE HEADING SEPARATION IN REVIEW TEXT === */
.review-txt .txt h2,
.review-txt .txt h3,
.review-txt .txt h4,
.review-txt .txt h5,
.review-txt .txt h6 {
  margin-top: 2.5em;
  padding-top: 1.5em;
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}

/* Optional: Adjust margin for the very first heading if it looks too spaced out */
.review-txt .txt > h2:first-child,
.review-txt .txt > h3:first-child,
.review-txt .txt > h4:first-child,
.review-txt .txt > h5:first-child,
.review-txt .txt > h6:first-child {
  margin-top: 1.5em;
  padding-top: 0;
  border-top: none;
}
/* === END IMPROVE HEADING SEPARATION IN REVIEW TEXT === */

/* Media Query for Mobile Devices */
@media (max-width: 767px) {
  /* Adjusted breakpoint */
  .content {
    padding: 80px 10px 0px 10px !important; /* Reduced padding further and added !important */
    max-width: none !important; /* Remove max-width for mobile */
  }

  .review-sec .d-flex {
    flex-direction: column !important; /* Force stacking */
    align-items: stretch !important; /* Force stretching */
    gap: 20px !important;
  }

  .review-sec .d-flex .review-area {
    max-width: 100% !important; /* Force full width */
    width: 100% !important;
    order: 1 !important;
  }

  .review-sec .d-flex .fixed-box {
    width: 100% !important; /* Force full width */
    max-width: 100% !important;
    position: static !important; /* Force static position */
    margin-top: 0 !important;
    order: 2 !important;
    padding: 20px !important;
  }

  /* Hide PC specific ad area */
  .advert-area.pc_block {
    display: none !important;
  }

  /* Adjust header padding if needed */
  header {
    padding: 15px !important;
  }

  /* Add padding to the bottom of the wrap to prevent overlap with f_menu */
  #wrap {
    padding-bottom: 70px !important; /* Slightly increased padding */
  }

  /* Ensure f_menu is always visible */
  .f_menu {
    display: flex !important;
  }

  /* Make sure aside area is hidden on mobile */
  .aside-area {
    display: none !important;
  }

  /* Adjust logo visibility if needed */
  .m_logo {
    display: block !important; /* Ensure mobile logo is visible */
  }
}

/* Casino page - Collapse/Expand Game List */
.slot-item.collapsed ul li:nth-child(n + 9) {
  display: none;
}

/* Optional: Adjust header layout if needed */
.casino-recommendation-section .section-header {
  display: flex; /* Arrange title and button side-by-side */
  justify-content: space-between; /* Put space between title and button */
  align-items: center; /* Align items vertically */
  margin-bottom: 10px; /* Add some space below the header */
}

/* More/Hide Button Style */
.toggle_btn {
  padding: 5px 12px;
  border: none;
  background-color: transparent;
  color: var(--or);
  border-radius: 15px;
  cursor: pointer;
  font-size: 16px; /* 폰트 크기 16px로 변경 */
  font-weight: bold;
  line-height: 1;
  transition: all 0.2s ease;
}

/* .toggle_btn:hover {
  background-color: rgba(255, 153, 0, 0.1);
} */

/* Game Detail Page Styles */
.review-content {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.game-image {
  text-align: center;
  margin-bottom: 20px;
}

.game-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.game-description {
  color: white;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  word-break: break-all;
  line-height: 1.6;
  margin-bottom: 20px;
}

.game-shortcut {
  margin-top: 20px;
  text-align: center;
}

.game-shortcut .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.game-shortcut .btn:hover {
  background-color: #45a049;
}

/* === END IMPROVE HEADING SEPARATION IN REVIEW TEXT === */

/* Mini Banner Styles */
.mini-banner-container,
.mini-banner-slider-top {
  width: 100%;
  height: 150px; /* Set fixed height */
  overflow: hidden; /* Hide overflow for the slider */
  position: relative; /* Needed for absolute positioning of arrows/dots */
}

/* Mini Banner Content Styles */
.mini-banner-content {
  position: absolute;
  left: 8%;
  top: 25%;
  width: 50%;
  color: #fff;
  text-align: left;
  z-index: 2;
}

/* Mini Banner Text Styles */
.mini-banner-content h2 {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #fff;
}

.mini-banner-content p {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 15px;
  color: #fff;
  word-wrap: break-word;
  word-break: keep-all;
  white-space: pre-wrap;
}

.mini-banner-content button {
  font-size: 13px;
  padding: 6px 12px;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.3s;
}

.mini-banner-content button:hover {
  opacity: 0.8;
}

.mini-banner-item {
  display: flex !important; /* Use !important to override potential Slick inline styles if needed */
  justify-content: center;
  align-items: center;
  height: 150px; /* Match container height */
  overflow: hidden;
  position: relative; /* For absolute positioning of content */
}

.mini-banner-item img,
.mini-banner-img {
  max-width: 100%;
  height: 100%; /* Fill container height */
  object-fit: cover; /* Cover the area properly */
  border-radius: 8px; /* Optional: Add some styling */
  display: block; /* Prevents extra space below the image */
}

/* Slick Slider Default Styles Adjustments (Optional but Recommended) */
/* Ensure dots and arrows are visible against your background */
.mini-banner-container .slick-dots li button:before,
.mini-banner-slider-top .slick-dots li button:before {
  color: white; /* Or a color that contrasts with your background */
  opacity: 0.5;
}

.mini-banner-container .slick-dots li.slick-active button:before,
.mini-banner-slider-top .slick-dots li.slick-active button:before {
  opacity: 1;
  color: var(--pr); /* Use your primary color for active dot */
}

.mini-banner-container .slick-prev,
.mini-banner-container .slick-next,
.mini-banner-slider-top .slick-prev,
.mini-banner-slider-top .slick-next {
  z-index: 1; /* Ensure arrows are above the slides */
}

.mini-banner-container .slick-prev:before,
.mini-banner-container .slick-next:before,
.mini-banner-slider-top .slick-prev:before,
.mini-banner-slider-top .slick-next:before {
  font-size: 24px; /* Adjust arrow size */
  color: white; /* Or a contrasting color */
}
/* Position arrows if needed */
/* .mini-banner-container .slick-prev { left: 10px; } */
/* .mini-banner-container .slick-next { right: 10px; } */

/* Media Query for Mobile Devices */
@media (max-width: 767px) {
  /* Adjusted breakpoint */
  .content {
    padding: 80px 10px 0px 10px !important; /* Reduced padding further and added !important */
    max-width: none !important; /* Remove max-width for mobile */
  }

  /* Mini Banner Mobile Styles (PC와 동일한 크기) */
  .mini-banner-content {
    top: 15%; /* 전체 콘텐츠를 더 위로 올림 */
  }

  .mini-banner-content h2 {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #fff;
  }

  .mini-banner-content p {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 10px; /* 텍스트와 버튼 사이 간격 줄임 */
    color: #fff;
    word-wrap: break-word;
    word-break: keep-all;
    white-space: pre-wrap;
  }

  .mini-banner-content button {
    font-size: 13px;
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.3s;
    margin-top: -8px; /* 버튼을 더 위로 올림 */
  }

  .mini-banner-content button:hover {
    opacity: 0.8;
  }

  .review-sec .d-flex {
    flex-direction: column !important; /* Force stacking */
    align-items: stretch !important; /* Force stretching */
    gap: 20px !important;
  }

  .review-sec .d-flex .review-area {
    max-width: 100% !important; /* Force full width */
    width: 100% !important;
    order: 1 !important;
  }

  .review-sec .d-flex .fixed-box {
    width: 100% !important; /* Force full width */
    max-width: 100% !important;
    position: static !important; /* Force static position */
    margin-top: 0 !important;
    order: 2 !important;
    padding: 20px !important;
  }

  /* Hide PC specific ad area */
  .advert-area.pc_block {
    display: none !important;
  }

  /* Adjust header padding if needed */
  header {
    padding: 15px !important;
  }

  /* Add padding to the bottom of the wrap to prevent overlap with f_menu */
  #wrap {
    padding-bottom: 70px !important; /* Slightly increased padding */
  }

  /* Ensure f_menu is always visible */
  .f_menu {
    display: flex !important;
  }

  /* Make sure aside area is hidden on mobile */
  .aside-area {
    display: none !important;
  }

  /* Adjust logo visibility if needed */
  .m_logo {
    display: block !important; /* Ensure mobile logo is visible */
  }
}

/* 페이지 전환 오버레이 */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  opacity: 0;
  animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 로딩 중 버튼 스타일 */
.aside-area .child-box > .tit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Force visibility for mini banner image within Slick */
.banner-box .mini-banner-slider-top {
  height: 130px; /* Match parent .banner-box height */
  width: 100%;
  overflow: hidden;
}

.banner-box .mini-banner-slider-top .slick-slide img.mini-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block !important;
}

/* Hide number text inside mini banner Slick dots and style the dot */
.banner-box .mini-banner-slider-top .slick-dots li button {
  font-size: 0; /* Hide the number text */
  width: 10px; /* Adjust button size for spacing if needed */
  height: 10px; /* Adjust button size for spacing if needed */
  padding: 0;
  overflow: hidden; /* Ensure text doesn't potentially overflow */
}

/* Style the dot using ::before */
/*.banner-box .mini-banner-slider-top .slick-dots li button::before {*/
/*  content: ''; !* Required to show the pseudo-element *!*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  transform: translate(-50%, -50%);*/
/*  width: 8px; !* Size of the dot *!*/
/*  height: 8px; !* Size of the dot *!*/
/*  border-radius: 50%;*/
/*  background-color: white; !* Default dot color *!*/
/*  opacity: 0.5;*/
/*}*/

/* Style the active dot */
.banner-box .mini-banner-slider-top .slick-dots li.slick-active button::before {
  opacity: 1;
  background-color: var(--pr); /* Active dot color (using primary variable) */
}

/* Hide number text in the original slick dots */
.mini-banner-container .slick-dots li button,
.banner-box .mini-banner-slider-top .slick-dots li button {
  /* Add both selectors for safety */
  font-size: 0 !important; /* Hide number text forcefully */
}

/* Slick Slider Default Styles Adjustments (Optional but Recommended) */
/* Ensure dots and arrows are visible against your background */

/* Add this rule to hide the number text */
.mini-banner-container .slick-dots li button {
  font-size: 0; /* Hide number text */
  /* Add other button base styles if needed, e.g., size */
  width: 10px;
  height: 10px;
  padding: 0;
}

.mini-banner-container .slick-dots li button:before {
  /* Keep original rule */
  color: white;
  opacity: 0.5;
  /* Ensure the pseudo-element displays correctly */
  content: '\2022'; /* Use unicode bullet character as default dot */
  font-size: 30px; /* Adjust size of the bullet character dot */
  line-height: 10px; /* Align the dot vertically */
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  text-align: center;
}

.mini-banner-container .slick-dots li.slick-active button:before {
  /* Keep original rule */
  opacity: 1;
  color: var(--pr);
}

/* Keep only this rule to hide number text */
.slick-dots li button {
  font-size: 0 !important;
}

/* Slick Slider Default Styles Adjustments (Optional but Recommended) */
/* Ensure dots and arrows are visible against your background */

/* Add rule to hide number text */
.mini-banner-container .slick-dots li button {
  font-size: 0; /* Hide number */
  width: 10px; /* Adjust size as needed */
  height: 10px;
  padding: 0;
}

.mini-banner-container .slick-dots li button:before {
  /* Modify existing rule */
  content: '\2022'; /* Add bullet character for the dot */
  font-size: 20px; /* Adjust dot size */
  line-height: 10px; /* Adjust vertical alignment */
  color: white;
  opacity: 0.5;
  /* Ensure positioning if needed */
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  text-align: center;
}

.mini-banner-container .slick-dots li.slick-active button:before {
  /* Modify existing rule */
  opacity: 1;
  color: var(--pr);
  /* Font size/content already set in the general :before rule */
}

/* Left Sidebar Bottom Banner Layout Fix */
.advert-area2 .mini-banner-slider-left {
  width: 100%;
  height: 100%; /* Match parent aspect ratio height */
  overflow: hidden; /* Prevent content overflow */
}

.advert-area2 .mini-banner-slider-left .slick-list,
.advert-area2 .mini-banner-slider-left .slick-track {
  height: 100%; /* Ensure slick containers fill the height */
}

.advert-area2 .mini-banner-slider-left img.left-banner-img {
  display: block; /* Remove extra space below image */
  width: 100%; /* Make image fill container width */
  height: 100%; /* Make image fill container height */
  object-fit: cover; /* Image covers the area, cropping if needed */
  max-width: 100%; /* Ensure image does not exceed container width */
}

/* Adjust dot positioning if needed */
.advert-area2 .slick-dots {
  bottom: 30px; /* Move dots up more */
}

/* Guideline Detail Page Hashtag Style */
.fixed-box .hashtag span {
  /* Use the specific ID if available, or this selector */
  padding: 5px 10px;
  box-sizing: border-box;
  border: 1px solid var(--wt); /* White border */
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--wt); /* White text */
  background: none; /* Ensure no background color */
}

/* No Data Message - Left Align */
.no-data {
  text-align: left; /* Align text to the left */
  padding-left: 15px; /* Optional: Add some left padding */
}

/* === ADVERT AREA SCROLLING LAYOUT === */
.advert-area {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Keep this */
  gap: 10px; /* Keep this */
  /* overflow-y: auto; <-- REMOVE this */
  min-height: 0; /* Keep this */
}

.company-banners-pc {
  /* display: flex; */
  /* flex-direction: column; */
  gap: 15px; /* 배너 간 간격 */
  width: 100%;
  flex-grow: 1; /* ADD this */
  overflow-y: auto; /* ADD this */
  min-height: 0; /* ADD this */
}

.company-banner {
  width: 100%;
  height: auto; /* 자동 높이 설정 */
  min-height: 140px; /* 최소 높이 설정 */
  border-radius: 8px;
  overflow: hidden; /* Keep overflow hidden for image cropping */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
  margin-bottom: 10px;
  background-color: #000000; /* 검은색 배경 */
}
.company-banner:hover {
  /* 호버 효과 제거 */
}

/* 새로운 업체 배너 구조 스타일 */
.company-banner-content {
  display: flex;
  flex-direction: column;
  height: auto; /* 자동 높이 설정 */
  min-height: 140px; /* 최소 높이 설정 */
}

/* 버튼이 없을 때 content 높이도 줄임 */
.company-banner.no-button .company-banner-content {
  min-height: 140px;
}

.company-banner-header {
  display: flex;
  align-items: center; /* 중앙 정렬 복원 */
  gap: 12px;
  padding: 15px 15px 10px 15px; /* 패딩도 조금 늘림 */
  flex-wrap: wrap; /* 긴 제목 줄바꿈 */
}

.company-banner-image {
  width: 40px; /* 이미지를 작게 처리 */
  height: 40px;
  overflow: hidden;
  border-radius: 6px;
  flex-shrink: 0;
}

.company-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.company-banner-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
  flex: 1; /* 남은 공간 모두 차지 */
  word-wrap: break-word; /* 긴 제목 줄바꿈 */
  word-break: break-word; /* 단어 중간에서도 줄바꿈 */
  overflow-wrap: break-word; /* 모던 브라우저 지원 */
  min-width: 0; /* flex 아이템 축소 허용 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 최대 2줄까지 표시 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.company-banner-body {
  padding: 0 15px 15px 15px; /* 하단 패딩도 늘림 */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0; /* flex 아이템 축소 허용 */
}

.company-banner-description {
  font-size: 14px;
  color: #cccccc;
  margin: 0 0 15px 0; /* 마진도 늘림 */
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word; /* 긴 단어 줄바꿈 */
  word-break: break-word; /* 단어 중간에서도 줄바꿈 */
  overflow-wrap: break-word; /* 모던 브라우저 지원 */
}

.company-banner-button {
  width: 100%;
  padding: 10px 15px; /* 패딩도 늘림 */
  border: 2px solid;
  border-radius: 12px; /* radius를 12로 변경 */
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.company-banner-button:hover {
  /* 호버 효과 제거 */
}

/* 모바일 스타일 - PC와 동일하게 통일 */
.company-banners-mo {
  /* flex-direction: column; */
  margin-top: -15px;
  gap: 15px;
  width: 100%;
  height: 100%;
}

/* 모바일 슬라이더 스타일 */
.company-banner-slider {
  margin-top: -15px;
  overflow: hidden;
  display: block !important;
  height: 212px;
  padding: 0 15px;
}

.company-banner-slider .company-banner {
  margin: 0;
  width: 100%;
  display: block !important;
}

/* 슬릭 초기화 후 스타일 */
.company-banner-slider.slick-initialized {
  display: block !important;
}

.company-banner-slider.slick-initialized .company-banner {
  display: block !important;
  float: left;
}

.company-banner-slider .slick-slide {
  padding: 0 7.5px;
}

/* PC용 업체 배너 보더 레디우스 */
.company-banner {
  border-radius: 8px;
}

/* 모바일용 업체 배너 보더 레디우스 제거 */
@media (max-width: 767px) {
  .company-banner {
    border-radius: 0 !important;
  }
}

.company-banner-slider .slick-dots {
  bottom: -35px;
}

.company-banner-slider .slick-dots li button:before {
  color: var(--wt);
  opacity: 0.3;
}

.company-banner-slider .slick-dots li.slick-active button:before {
  opacity: 1;
}

body.light .company-banner-slider .slick-dots li button:before {
  color: var(--text);
}

/* 호버 효과 제거 */
.company-banner-slider .slick-dots li button:hover:before {
  opacity: 0.3;
}

.company-banner-slider .slick-dots li.slick-active button:hover:before {
  opacity: 1;
}

/* 슬라이더 호버 애니메이션 제거 */
.company-banner-slider .slick-slide {
  transition: none !important;
}

.company-banner-slider .slick-slide:hover {
  transform: none !important;
}

.company-banner-slider .company-banner:hover {
  transform: none !important;
  transition: none !important;
}

/* 링크 스타일 제거 */
.company-banner a {
  text-decoration: none;
  color: inherit;
}

.company-banner a:hover {
  /* 호버 효과 제거 */
}

.fixed-box .post-stats {
  display: flex;
  align-items: center;
  gap: 15px;
}

.fixed-box .button-container button {
  padding: 8px 0 !important;
  width: calc((100% - 10px) / 3);
}

/* === END ADVERT AREA SCROLLING LAYOUT === */

/* === MYPAGE CURRENT RANK HIGHLIGHT === */
.rank-area ul li.current-rank {
  position: relative; /* Needed for absolute positioning of ::after */
}

.rank-area ul li.current-rank::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0; /* Position on the right edge */
  bottom: 0;
  width: 3px; /* Width of the purple bar */
  background-color: var(--pr); /* Use the purple color variable */
  border-radius: 0 10px 10px 0; /* Match parent border radius if needed */
}
/* === END MYPAGE CURRENT RANK HIGHLIGHT === */

/* Embedded Content Styles */
.quill-embed {
  margin: 1rem 0;
  position: relative;
  width: 100%;
}

.quill-embed .embed-loading {
  padding: 2rem;
  text-align: center;
  background: #f5f5f5;
  border-radius: 4px;
  color: #666;
}

/* Responsive container for video embeds */
.quill-embed .ejs-video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.quill-embed .ejs-video-container iframe,
.quill-embed .ejs-video-container object,
.quill-embed .ejs-video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Social media embeds */
.quill-embed .ejs-embed {
  margin: 0 auto;
  max-width: 550px;
  background: #fff;
  border: 1px solid #e1e8ed;
  border-radius: 4px;
  padding: 1rem;
}

/* Instagram embeds */
.quill-embed .ejs-instagram iframe {
  max-width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Twitter embeds */
.quill-embed .ejs-twitter iframe {
  margin: 0 auto !important;
}

/* TikTok embeds */
.quill-embed .ejs-tiktok iframe {
  margin: 0 auto !important;
  max-width: 325px !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .quill-embed {
    margin: 0.5rem 0;
  }

  .quill-embed .ejs-embed {
    padding: 0.5rem;
  }
}

/* 언어 선택 버튼 스타일 */
.pop-lang .select-box button {
  position: relative; /* ::after 위치 기준 */
  /* 필요에 따라 다른 버튼 스타일 추가 */
  padding-right: 35px; /* 아이콘 공간 확보 (증가) */
  /* 기타 스타일 (텍스트 정렬, 너비 등) */
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}

/* 활성 언어 버튼의 체크 아이콘 */
.pop-lang .select-box button.active::after {
  content: ''; /* 가상 요소 내용 필수 */
  display: block; /* 또는 inline-block */
  position: absolute;
  right: 10px; /* 오른쪽 여백 (조절 가능) */
  top: 50%;
  transform: translateY(-50%);
  width: 20px; /* 이미지 너비 (증가) */
  height: 20px; /* 이미지 높이 (증가) */
  background-image: url('../img/ckd_on.png'); /* 이미지 경로 확인! */
  background-repeat: no-repeat;
  background-size: contain; /* 또는 cover */
}

/* Responsive video embeds */
.ejs-embed {
  /* 중요: 실제 클래스명으로 변경해야 할 수 있습니다 */
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000; /* Optional: Add a black background */
}

.ejs-embed iframe,
.ejs-embed object,
.ejs-embed embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0; /* Remove potential borders */
}

.sec_tit2 .more_btn {
  text-decoration: none !important; /* 밑줄 확실히 제거 */
  /* 이전에 추가했던 font-size, font-weight, line-height 제거 (원래 스타일로 돌아감) */
  color: var(--or); /* 주황색으로 변경 */
}

@media screen and (max-width: 500px) {
  .notice_sec {
    margin-top: 20px;
  }
}

.sports-list.sports-list2 .d-flex > span {
  width: 100%;
  text-align: center;
}

/* Style adjustments specifically for the like button */
.fixed-box .top .sd-btn .like-btn {
  width: 22px; /* Increase size slightly from 18px */
  height: auto;
}

.fixed-box .top .sd-btn .like-btn img {
  /* Ensure full opacity and potentially increase brightness slightly */
  opacity: 1;
  filter: brightness(1.5) contrast(1.5); /* Increase brightness and contrast */
}

/* 라이트 모드에서 좋아요 이미지 색상 */
body.light .fixed-box .top .sd-btn .like-btn img {
  filter: brightness(0) contrast(1); /* 검은색으로 변경 */
}

/* Style for the liked state */
.fixed-box .top .sd-btn .like-btn.liked {
  background-color: var(--or); /* Use orange variable */
  border-radius: 50%; /* Make it circular */
  /* Add padding to create space around the image for the circle */
  padding: 4px;
  box-sizing: border-box; /* Include padding in the element's total width and height */
  /* Adjust size slightly if needed to make the circle look good */
  width: 26px; /* Adjust width considering padding */
  height: 26px; /* Adjust height considering padding */
  display: inline-flex; /* Center the image inside */
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease; /* Smooth transition */
}

/* Adjust image size within the liked button if needed */
.fixed-box .top .sd-btn .like-btn.liked img {
  width: 16px; /* Slightly smaller image inside the circle */
  height: auto;
  filter: none; /* Remove filter when liked, or adjust if needed */
}

/* 별점 색상 필터 */
.star-item.rating-green img[src*='star_on.png'] {
  filter: hue-rotate(80deg) saturate(5) brightness(0.9);
}

/* 주황색은 기본 이미지 색상을 사용하므로 별도 필터 없음 (또는 필요시 조정) */
.star-item.rating-orange img[src*='star_on.png'] {
  /* filter: none; */ /* 기본값 */
}

.star-item.rating-red img[src*='star_on.png'] {
  filter: hue-rotate(320deg) saturate(6) brightness(0.8);
}

/* 스타 아이콘 마스크를 사용한 컬러링 */
.star-item .star-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.star-item.rating-green .star-icon {
  -webkit-mask-image: url('../img/star_on.png');
  mask-image: url('../img/star_on.png');
  background-color: #28a745;
}
.star-item.rating-orange .star-icon {
  -webkit-mask-image: url('../img/star_on.png');
  mask-image: url('../img/star_on.png');
  background-color: var(--yellow);
}
.star-item.rating-red .star-icon {
  -webkit-mask-image: url('../img/star_on.png');
  mask-image: url('../img/star_on.png');
  background-color: #dc3545;
}
.star-item .star-icon.star-off {
  -webkit-mask-image: url('../img/star_off.png');
  mask-image: url('../img/star_off.png');
  background-color: #6c757d;
}

/* Safety Index Box and Text Color based on Safety Index */
.safety_index.safety-green p {
  border-color: #28a745 !important;
  color: #28a745 !important;
}
.safety_index.safety-green .safety-score {
  color: #28a745 !important;
}

.safety_index.safety-orange p {
  border-color: #ffc107 !important;
  color: #ffc107 !important;
}
.safety_index.safety-orange .safety-score {
  color: #ffc107 !important;
}

.safety_index.safety-red p {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
}
.safety_index.safety-red .safety-score {
  color: #dc3545 !important;
}

/* Default/0 score styles for Safety Index */
.safety_index:not(.safety-green):not(.safety-orange):not(.safety-red) p {
  border-color: var(--yellow); /* Default border */
  color: var(--yellow); /* Default text color */
}
.safety_index:not(.safety-green):not(.safety-orange):not(.safety-red) .safety-score {
  color: var(--yellow); /* Default score color */
}

/* 기타 스타일 */

/* ds 250429 */
.comment_input {
  box-sizing: border-box;
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.comment_input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Helper class to hide content until JS loads */
.js-hidden-content {
  visibility: hidden; /* Keep layout space */
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* Optional: fade-in effect */
}

/* Style to apply when content is loaded */
.js-content-loaded {
  visibility: visible;
  opacity: 1;
}

/* style.css - Add these rules, potentially near other .sports-list or .category-box rules */

/* Wrapper for sports list and toggle button for flex layout */
/* Using adjacent sibling or similar selector if HTML isn't changed */
.category-box.category-box1 > ul.sports-categories + .category-toggle {
  /* Removed in favor of wrapper flex layout */
}

/* Assuming ul and div.category-toggle are direct children or need a wrapper */
/* Adding styles directly to the parent .category-box for simplicity first */
/* We might need to wrap ul and div.category-toggle in an inner div if this doesn't work */

.category-box.category-box1 {
  /* display: flex; */ /* Applying flex here might break other layouts, apply to an inner wrapper if needed */
  /* align-items: flex-start; */
  /* gap: 15px; */
}

.category-box.category-box1 .sports-categories {
  /* flex-grow: 1; */ /* Apply this if using an inner flex wrapper */
  /* --- Keep existing Grid styles --- */
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* PC 기본 6열 */
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-box.category-box1 .category-toggle {
  /* flex-shrink: 0; */ /* Apply this if using an inner flex wrapper */
  text-align: center;
  margin-top: 10px; /* Re-add margin for now, remove if using flex gap */
}

/* Style the existing More/Hide button */
#category-toggle-btn {
  /* Apply styles from .sec_tit2 .more_btn */
  color: var(--or); /* Orange text */
  text-decoration: none !important; /* Remove underline */
  background: none; /* Ensure no background */
  border: none; /* Ensure no border */
  padding: 0; /* Reset padding, adjust if needed */
  font-size: 16px; /* Match .sec_tit2 a */
  font-weight: bold; /* Match .sec_tit2 a */
  cursor: pointer; /* Keep cursor style */
}

#category-toggle-btn:hover {
  /* Apply simple hover effect: underline */
  text-decoration: none !important; /* Add underline on hover */
  /* color: #e06a00; */ /* Optional: Slightly darker orange on hover */
}

/* --- Media Query for Mobile Grid (Keep in respond.css or move here) --- */
/* Assuming it's kept in respond.css for now */
/* @media screen and (max-width: 600px) { */
/*   .category-box.category-box1 .sports-categories { */
/*     grid-template-columns: repeat(3, 1fr); */
/*   } */
/*   .category-box.category-box1 .category-toggle { */
/*      margin-top: 15px;  */
/*   } */
/* } */

.category-box.category-box1 .category-toggle {
  text-align: center;
  margin-top: 10px;
}

/* Add flex layout for category content and adjust centering */
.category-box.category-box1 .category-content-wrapper {
  display: flex;
  align-items: flex-start; /* Align toggle button at top; change to center if preferred */
  justify-content: space-between;
  gap: 15px;
}

/* Vertically center each .child-box in its grid cell and allow grid to flex */
.category-box.category-box1 .sports-categories {
  align-items: center;
  flex: 1;
}

/* Override top margin since wrapper handles spacing */
.category-box.category-box1 .category-toggle {
  margin-top: 0;
}

.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-name {
  /* 모바일처럼 줄바꿈 처리 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: break-word;
  line-height: 1.2;
  overflow: visible;
}

@media (max-width: 767px) {
  .kv-banner,
  .banner-box,
  .mini-banner-slider-top {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  #wrap {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .f_menu {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  /* 이미 적용된 부분 유지 */
  .kv-banner,
  .banner-box,
  .mini-banner-slider-top {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

.kv-banner {
  height: 170px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.kv-banner .slick-list,
.kv-banner .slick-track,
.kv-banner .slick-slide {
  height: 100%;
  min-height: 0;
}
.kv-banner .slick-slide {
  display: flex !important;
  align-items: stretch;
}
.kv-banner .slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.kv-banner .slick-prev,
.kv-banner .slick-next {
  display: none !important;
}

@media (max-width: 767px) {
  .game-providers-popup,
  .language-details-popup {
    max-width: 320px !important;
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* 스포츠 경기 테이블 home/away 간격 */
.home-team {
  margin-bottom: 12px;
}

.comment-body {
  color: white;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-line;
  word-break: break-all;
  max-width: 100%;
}

/* Quill 링크 팝업(ql-tooltip) 흰색 배경 시 글씨 검정색 */
.ql-tooltip,
.ql-tooltip.ql-editing {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #222 !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  z-index: 99999 !important;
  margin: 0 !important;
  padding: 8px 12px !important;
}

/* 모든 Quill 툴팁 관련 요소 강제 고정 */
.ql-tooltip[data-mode='link']:not(.ql-editing) a:first-child,
.ql-tooltip[data-mode='link']:not(.ql-editing) a:last-child,
.ql-tooltip[data-mode='video'] a:first-child,
.ql-tooltip[data-mode='video'] a:last-child {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 99999 !important;
}

/* Quill 툴팁 내부 요소들도 고정 */
.ql-tooltip a,
.ql-tooltip input,
.ql-tooltip.ql-editing a,
.ql-tooltip.ql-editing input {
  position: relative !important;
}
.ql-tooltip input,
.ql-tooltip.ql-editing input,
.ql-tooltip a,
.ql-tooltip.ql-editing a {
  color: #fff !important;
}
.ql-tooltip input::placeholder {
  color: #bbb !important;
}
.ql-tooltip .ql-action,
.ql-tooltip .ql-remove {
  color: #fff !important;
}

@media (max-width: 767px) {
  .game-providers-popup .providers-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.loading {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  pointer-events: all;
  justify-content: center;
  align-items: center;
}
/* 기존 .loading-spinner 및 관련 스타일은 모두 삭제 */

.category-content-wrapper.category-border {
  background: var(--lg);
  border-radius: 24px;
  padding: 0;
  box-sizing: border-box;
  margin-bottom: 0;
  border: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
}

.category-content-wrapper.category-border .sports-categories {
  grid-column: 1 / 2;
  grid-row: 1;
}

#category-toggle-btn.more-btn {
  grid-column: 2 / 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  min-width: 100px;
  margin: 0;
  padding: 0 24px 0 0;
  border: none;
  border-radius: 0;
  background: none;
  box-sizing: border-box;
  color: var(--or);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  vertical-align: top;
  height: 40px;
  display: flex;
  align-items: center;
  margin-top: 20px;
}

@media screen and (max-width: 600px) {
  .category-content-wrapper.category-border {
    padding: 0 10px !important;
  }
}

@media screen and (max-width: 600px) {
  #category-toggle-btn.more-btn {
    padding: 0 8px !important;
    min-width: unset !important;
    margin-top: 8px !important;
    font-size: 14px !important;
    height: 32px !important;
  }
}

/* PC: 경기 일정 종목군 아이콘 - 다크모드 흰색 */
body:not(.light) .sports-list .table-area1 .sport-icon,
body:not(.light) .sports-list .table-area1 .sport-icon use {
  fill: #fff !important;
  color: #fff !important;
}

/* PC: 경기 일정 종목군 아이콘 - 라이트모드 검은색 */
body.light .sports-list .table-area1 .sport-icon,
body.light .sports-list .table-area1 .sport-icon use {
  fill: #000 !important;
  color: #000 !important;
}

/* 스포츠 테이블 이미지 필터 제거 (서버에서 경로로 주는 실제 이미지) */
.sports-list .table-area1 .icon img {
  filter: none !important;
}

/* PC: League(리그) 컬럼 볼드 및 날짜/팀명과 동일 스타일 */
.sports-list .table-area1 td:nth-child(2),
.sports-list .table-area1 td:nth-child(3),
.sports-list .table-area1 td:nth-child(4) {
  font-weight: bold !important;
  font-size: 15px !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* 리그명만 줄바꿈 처리 - 더 구체적인 선택자로 우선순위 높임 */
.sports-list .table-area1 td:nth-child(3),
.sports-list .table-area1 td:nth-child(3) * {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
  line-height: 1.2 !important;
  max-height: 60px !important;
  vertical-align: middle !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  border-bottom: none !important;
  outline: none !important;
}

@media (max-width: 767px) {
  /* 모든 주요 컬럼까지 강제 축소 */
  .sports-list .table-area1 td,
  .sports-list .table-area1 th,
  .sports-list .table-area1 td *,
  .sports-list .table-area1 th *,
  .sports-list .table-area1 td:nth-child(2),
  .sports-list .table-area1 td:nth-child(3),
  .sports-list .table-area1 td:nth-child(4) {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  /* 모바일에서 리그명 줄바꿈 처리 - 더 구체적인 선택자로 우선순위 높임 */
  .sports-list .table-area1 td:nth-child(3),
  .sports-list .table-area1 td:nth-child(3) * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-wrap: break-word !important;
    word-break: keep-all !important;
    line-height: 1.2 !important;
    max-height: none !important;
    vertical-align: middle !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    outline: none !important;
  }

  /* 추가 강제 스타일 - 최고 우선순위 */
  .sports-list .table-area1 tr td:nth-child(3) {
    display: table-cell !important;
    word-break: normal !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    max-height: none !important;
    text-align: center !important;
    width: 40% !important;
    min-width: 120px !important;
    padding: 8px 4px !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
  }
  .sports-list .table-area1 .sport-icon,
  .sports-list .table-area1 .icon svg,
  .sports-list .table-area1 svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }
}

/* 홈/어웨이 폰트 두께 및 패밀리 통일 (PC) */
.sports-list .table-area1 .home-team,
.sports-list .table-area1 .away-team {
  font-weight: bold !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

@media (max-width: 767px) {
  /* 모바일: 홈/어웨이 폰트 두께 및 패밀리 통일 */
  .sports-list .table-area1 .home-team,
  .sports-list .table-area1 .away-team {
    font-weight: 500 !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
}

/* 시간(날짜/시각) 컬럼 중앙 정렬 및 두께 통일 */
.sports-list .table-area1 td:nth-child(2),
.sports-list .table-area1 td:nth-child(2) span {
  text-align: center !important;
  justify-content: center !important;
  font-weight: bold !important;
}
@media (max-width: 767px) {
  .sports-list .table-area1 td:nth-child(2),
  .sports-list .table-area1 td:nth-child(2) span {
    text-align: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
  }
}

/* 핫매치/스포츠 테이블/카테고리 공통 컬럼 스타일 */
.date-col {
  width: 80px;
  text-align: center;
}
.league-col {
  flex: 1;
  text-align: center;
}
.team-col {
  flex: 1;
  text-align: left;
}
.game-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.t_name.nt.home {
  color: #f96200;
  margin-bottom: 5px;
}
.t_name.nt.away {
  color: #f96200;
}

@media (max-width: 767px) {
  .sports-list .table-area1 .sport-icon,
  .sports-list .table-area1 .icon svg,
  .sports-list .table-area1 svg,
  .sports-list .table-area1 .icon,
  .sports-list .table-area1 .sports-name .icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    vertical-align: middle !important;
  }

  .sports-list .table-area td .d-flex img {
    width: 18px !important;
    height: 18px !important;
  }

  .sports-list .category-box ul li .child-box .sports-name .icon,
  .sports-list .category-box ul li .child-box .sports-name .icon svg,
  .sports-list .category-box ul li .sports-name .icon,
  .sports-list .category-box ul li .sports-name .icon svg,
  .sports-list .category-box .sports-name .icon,
  .sports-list .category-box .sports-name .icon svg,
  .sports-list .category-box1 ul li .child-box .sports-name .icon,
  .sports-list .category-box1 ul li .child-box .sports-name .icon svg,
  .sports-list .sport-icon,
  .sports-list .icon svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }
}

/* 메인페이지 핫매치 - 다크모드 아이콘, 시간 흰색 */
body:not(.light) .live-game .sport-icon,
body:not(.light) .live-game .sport-icon use {
  fill: #fff !important;
  color: #fff !important;
}

/* 메인페이지 핫매치 - 라이트모드 아이콘, 시간 검은색 */
body.light .live-game .sport-icon,
body.light .live-game .sport-icon use {
  fill: #000 !important;
  color: #000 !important;
}

/* 메인페이지 스포츠 이미지 필터 제거 (서버에서 경로로 주는 실제 이미지) */
.live-game .icon img {
  filter: none !important;
}
.live-game .date,
.live-game .game-time {
}

/* 메인페이지 핫매치 - 아이콘, 시간 스타일 별도 */
.live-game .sport-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  display: inline-block;
  vertical-align: middle;
}
.live-game .sport-icon use {
  width: 24px !important;
  height: 24px !important;
}
.live-game .date,
.live-game .game-time {
  font-size: 18px !important;
  font-weight: bold !important;
}

@media (max-width: 768px) {
  .live-game .date,
  .live-game .game-time {
    font-size: 10px !important;
  }
}

@media (max-width: 768px) {
  .live-game .date,
  .live-game .game-time {
    font-size: 14px !important;
  }
}

.edit-textarea {
  width: 99% !important;
  min-height: 80px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border: 1px solid #555 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  resize: none !important;
  margin-top: 5px !important;
}

body,
#wrap {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .pr_wt_sec ul li .child-box {
    height: 180px;
    max-height: 180px;
    overflow: hidden;
  }
}

@media (max-width: 767px) {
  .notice-list ul li a .user_info .name,
  .pr_wt_sec ul li .child-box .bt_txt .user_info .name,
  .review-detail .cp_info-fixed .img-box .name {
    display: inline-block;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    flex-shrink: 0;
  }
  .review-detail .cp_info-fixed .img-box .name {
    max-width: 100%;
    height: auto;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    display: block;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .comment-list ul li .child-box .user-info .img-box {
    width: 30px !important;
    height: 30px !important;
    aspect-ratio: 1/1;
    flex-shrink: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .comment-list ul li .child-box .user-info .img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }
}
@media (max-width: 767px) {
  .review-sec .d-flex .review-hd .user_info .user_img {
    width: 30px !important;
    height: 30px !important;
    aspect-ratio: 1/1;
    flex-shrink: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
  }
  .review-sec .d-flex .review-hd .user_info .user_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }
  .review-sec .d-flex .review-hd .user_info .name {
    font-size: 15px !important;
    font-weight: 600;
    color: var(--wt);
    margin: 0 8px 0 0;
    min-width: 0;
    white-space: normal;
    word-break: break-all;
    overflow: visible;
    text-overflow: unset;
    display: block;
  }
  .comment-list ul li .child-box .user-info .img-box {
    width: 30px !important;
    height: 30px !important;
    aspect-ratio: 1/1;
    flex-shrink: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .comment-list ul li .child-box .user-info .img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }
  .comment-list ul li .child-box .user-info .name {
    font-size: 15px !important;
    font-weight: 600;
    color: var(--wt);
    margin: 0 8px 0 0;
    min-width: 0;
    white-space: normal;
    word-break: break-all;
    overflow: visible;
    text-overflow: unset;
    display: block;
  }
}

@media (max-width: 767px) {
  .comment-list ul li .child-box .user-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
    width: 100%;
  }
  .comment-list ul li .child-box .user-info .img-box {
    width: 30px !important;
    height: 30px !important;
    aspect-ratio: 1/1;
    flex-shrink: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
  }
  .comment-list ul li .child-box .user-info .img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }
  .comment-list ul li .child-box .user-info .name {
    font-size: 15px !important;
    font-weight: 600;
    color: var(--wt);
    margin: 0 8px 0 0;
    min-width: 0;
    flex-grow: 1;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: break-word;
    overflow: visible;
    text-overflow: unset;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .comment-list ul li .child-box .user-info .date,
  .comment-list ul li .child-box .user-info .s_score,
  .comment-list ul li .child-box .user-info .md-btn {
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .comment-header {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    width: 100%;
    min-width: 0;
    gap: 0;
    margin-bottom: 5px;
  }
  .comment-header img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
    object-fit: cover !important;
    flex-shrink: 0;
  }
  .comment-header span {
    font-weight: bold;
    color: white;
    margin-right: 10px;
    min-width: 0;
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
    display: block;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
  .comment-header .comment-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
  }
}

@media (max-width: 767px) {
  .comment-header .comment-nickname {
    flex-grow: 1 !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .comment-header .comment-date {
    flex: none !important;
    margin-right: 0 !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 10px !important;
    min-width: 60px !important;
    max-width: 90px !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 767px) {
  .comment-header {
    position: relative !important;
  }
}

body.light .free_notice ul li .child-box {
  background: #eff0f2 !important;
}

body.dark .free_notice ul li .child-box {
  background: #2b3753 !important;
}

body.light .slot-item ul li .chat_v img,
body.light .slot-item ul li .bt_txt img,
body.light .live-game ul li .icon-date img,
body.light .sports-list .category-box ul li .chat_v img,
body.light .sports-list .category-box ul li .bt_txt img,
body.light .coin-inq ul li .coin-info img {
  filter: invert(1);
}
body.dark .slot-item ul li .chat_v img,
body.dark .slot-item ul li .bt_txt img,
body.dark .live-game ul li .icon-date img,
body.dark .sports-list .category-box ul li .chat_v img,
body.dark .sports-list .category-box ul li .bt_txt img,
body.dark .coin-inq ul li .coin-info img {
  filter: none;
}

body.light .chat_v span,
body.light .bt_txt span {
  color: #111 !important;
}
body.dark .chat_v span,
body.dark .bt_txt span {
  color: #fff !important;
}

/* 1. 포럼 카드 닉네임도 반전 */
body.light .user_info .name {
  color: #111 !important;
}
body.dark .user_info .name {
  color: #fff !important;
}

/* 2. 카지노/스포츠/암호화폐 주요 리스트 텍스트 반전 */
body.light .sports-list .category-box .sports-name p,
body.light .sports-list .table-area,
body.light .sports-list .table-area th,
body.light .sports-list .table-area td,
body.light .sports-list .table-area td *,
body.light .category-box2 .sports-name p,
body.light .category-box2 .price,
body.light .coin-inq ul li .child-box .tit,
body.light .coin-inq ul li .g_name,
body.light .coin-inq ul li .child-box p {
  color: #111 !important;
}
body.dark .sports-list .category-box .sports-name p,
body.dark .sports-list .table-area,
body.dark .sports-list .table-area th,
body.dark .sports-list .table-area td,
body.dark .sports-list .table-area td *,
body.dark .category-box2 .sports-name p,
body.dark .category-box2 .price,
body.dark .coin-inq ul li .child-box .tit,
body.dark .coin-inq ul li .g_name,
body.dark .coin-inq ul li .child-box p {
  color: #fff !important;
}

body.light .footer-area {
  background: var(--black_0f);
}
body.light .advert-area {
  background: var(--black_0f);
}
body.light .content {
  background: #eff0f2;
}
body.light .sports-list .category-box ul {
  background: var(--lg);
}

body.light .category-content-wrapper.category-border {
  background: var(--lg);
}

body.light .sports-list .table-area thead {
  background: var(--lg);
}

body.light .sports-list .table-area thead tr {
  background: var(--lg);
}

body.light footer {
  background: var(--black_0f) !important;
}

/* Light mode gradients - notice list only */

/* Forum gradients - notice list */
body.light .notice-list ul {
  background: var(--lg);
}

body.light .pr_wt_sec ul li .child-box {
  background: var(--lg);
}

/* Review list gradients */
body.light .cp_info ul li .child-box {
  background: var(--lg);
}

/* 데이 모드 텍스트 색상 통합 관리 */
body.light .slot-item ul li .txt-box .tit,
body.light .section-title {
  color: rgba(0, 0, 0, 0.8);
}

/* 데이 모드 이미지 필터 통합 관리 */
body.light .sd-btn .share-btn img,
body.light .fixed-box .top .sd-btn .share-btn img,
body.light .review-hd .sd-btn .share-btn img,
body.light .review-hd .user_info .share-btn img,
body.light .sports-list .category-box ul li .child-box .arrow_icon img {
  filter: invert(1);
}

/* 활성화된 스포츠 카테고리의 화살표는 주황색 유지 */
body.light .sports-list .category-box ul li.active .child-box .arrow_icon img {
  filter: invert(48%) sepia(89%) saturate(1100%) hue-rotate(-1deg) brightness(100%) contrast(90%);
}

/* 데이 모드 스포츠 테이블 테두리 */
body.light .sports-list .table-area1 tbody {
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
}

body.light .sports-list .table-area1 tr {
  border-bottom: 1px solid #d0d0d0;
}

/* Day mode table borders for crypto page */
body.light .sports-list .table-area2 tbody {
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
}

body.light .sports-list .table-area2 tr {
  border-bottom: 1px solid #d0d0d0;
}

/* Day mode crypto transfer divider line */
body.light .sports-list .category-box.category-box2 ul:not(.list2) li .child-box:before {
  background: rgba(0, 0, 0, 0.2);
}

/* Day mode transfer fee items background */
body.light .sports-list .category-box.category-box2 ul.list2 li .child-box {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Day mode notice list items background */
body.light .notice-list ul li a {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Day mode post detail styles */
body.light .review-sec .d-flex .review-hd {
  border-bottom: solid 1px rgba(0, 0, 0, 0.15);
}

body.light .review-sec .d-flex .review-hd .tit {
  color: rgba(0, 0, 0, 0.8);
}

body.light .review-sec .d-flex .review-hd .user_info .name {
  color: rgba(0, 0, 0, 0.8);
}

body.light .review-sec .d-flex .review-hd .user_info .date {
  color: rgba(0, 0, 0, 0.6);
}

body.light .review-sec .d-flex .review-content p {
  color: rgba(0, 0, 0, 0.8);
}

body.light #post-content {
  color: rgba(0, 0, 0, 0.8);
}

body.light .fixed-box .txt {
  color: rgba(0, 0, 0, 0.8);
}

/* 댓글 배경 제거 - 데이 모드에서 배경 없음 */
body.light .comment-list ul li .child-box {
  background: transparent;
  border: none;
  box-shadow: none;
}

body.light .comment-list ul li .child-box .user-info .name {
  color: rgba(0, 0, 0, 0.8);
}

/* ===== JavaScript로 생성되는 댓글 스타일 (CSS 클래스 기반) ===== */

/* 댓글 컨테이너 */
.comment {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

body.light .comment {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* 댓글 헤더 */
.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.nickname-area {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: calc(100% - 90px);
  flex: none;
}

/* 댓글 프로필 이미지 */
.comment-profile-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
}

/* 댓글 닉네임 */
.comment-nickname {
  font-weight: bold;
  margin-right: 10px;
  color: white;
}

body.light .comment-nickname {
  color: rgba(0, 0, 0, 0.8);
}

/* 댓글 날짜 */
.comment-date {
  color: #888;
  font-size: 0.9em;
  text-align: right;
  min-width: 60px;
}

/* 댓글 내용 */
.comment-body {
  color: var(--wt);
}

/* 데이 모드 댓글 내용 - 더 구체적인 선택자로 우선순위 확보 */
body.light .comment .comment-body {
  color: rgba(0, 0, 0, 0.8);
}

/* 댓글 액션 컨테이너 */
.comment-actions-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px;
}

/* 댓글 액션 버튼들 */
.comment-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0;
}

/* Edit/Delete 버튼 */
.edit-comment-btn,
.delete-comment-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  font-size: 0.9em;
}

body.light .edit-comment-btn,
body.light .delete-comment-btn {
  color: rgba(0, 0, 0, 0.8);
}

/* 구분선 */
.comment-divider {
  width: 1px;
  height: 16px;
  background: #888;
  opacity: 0.5;
  margin: 0 8px;
}

/* 기존 댓글 구조도 대응 */
body.light .comment-list ul li .child-box .txt-box .txt {
  color: rgba(0, 0, 0, 0.8);
}

/* 기존 댓글 구조의 Edit/Delete 버튼 */
body.light .comment-list ul li .child-box .md-btn a,
body.light .comment-list ul li .child-box .md-btn button {
  color: rgba(0, 0, 0, 0.8);
}

body.light .comment_input {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.8);
}

body.light .comment_input::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

/* Day mode post detail comprehensive styles */
/* Author name in header */
body.light .review-sec .d-flex .review-hd .user_info .name {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* Sidebar stats - images and text */
body.light .fixed-box .post-stats p {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .fixed-box .post-stats img {
  filter: invert(1);
}

body.light .fixed-box .post-stats span {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* Reply section title */
body.light .comments-section h3 {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* Comment author names (dynamically generated) */
body.light .comment .comment-nickname {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* Comment content (dynamically generated) */
body.light .comment .comment-body {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* Comment dates (already gray, keeping consistent) */
body.light .comment .comment-date {
  color: rgba(0, 0, 0, 0.5) !important;
}

/* Edit/Delete buttons in comments (dynamically generated) */
body.light .comment .edit-comment-btn,
body.light .comment .delete-comment-btn {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* Comment actions container */
body.light .comment .comment-actions {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* Day mode comment divider lines */
body.light .comment {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* Day mode comment edit textarea */
body.light .edit-textarea {
  color: rgba(0, 0, 0, 0.8) !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* Day mode write page styles */
body.light .write_form .input-box input[type='text'] {
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .write_form .input-box input[type='text']::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}

body.light .ql-container {
  border-color: rgba(0, 0, 0, 0.3) !important;
}

body.light .ql-toolbar {
  border-color: rgba(0, 0, 0, 0.3) !important;
}

body.light .ql-editor {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .ql-editor.ql-blank::before {
  color: rgba(0, 0, 0, 0.5) !important;
}

/* 라이트 모드에서 Quill 에디터 내부 모든 요소의 색상 강제 적용 */
body.light .ql-editor * {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .ql-editor h1,
body.light .ql-editor h2,
body.light .ql-editor h3,
body.light .ql-editor h4,
body.light .ql-editor h5,
body.light .ql-editor h6 {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .ql-editor p {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .ql-editor ul,
body.light .ql-editor ol {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .ql-editor li {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .ql-editor blockquote {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .ql-editor code {
  color: #6c5dd3 !important;
}

body.light .ql-editor pre {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .ql-editor a {
  color: #6c5dd3 !important;
}

body.light .ql-editor strong {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .ql-editor em {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .ql-editor u {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .ql-editor s {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* Update Post button - keep white text */
body.light .write_form .submit-btn {
  color: white !important;
}

/* Review submit button - keep white text in light mode */
body.light .comment-area .submit-btn {
  color: white !important;
}

/* Mypage Edit Info modal - keep white text in light mode */
body.light .myedit-popup .submit-btn {
  color: white !important;
}

/* Login popup - keep white text in light mode */
body.light .login-popup .submit-btn {
  color: white !important;
}

/* Form inputs - light mode background and text color */
body.light .popup-body .input-box2 input {
  background: rgba(255, 255, 255, 0.6) !important;
  color: rgba(0, 0, 0, 0.8) !important;
}

/* Form placeholders - light mode color */
body.light .popup-body .input-box2 input::placeholder {
  color: rgba(128, 128, 128, 0.8) !important;
}

/* 페이지네이션 - 화살표 버튼 비활성화 상태 스타일 */
.pager .arrow_btn.disabled {
  opacity: 0.5;
  cursor: default;
}

.pager .arrow_btn.disabled a {
  cursor: default;
  pointer-events: none;
}

/* 페이지네이션 버튼 스타일 개선 */
/* 숫자 버튼 - 기본 흰색 텍스트 */
.pager ul .num a,
.pagination a {
  color: #ffffff !important;
}

/* 데이 모드 - 비활성화 숫자 버튼 (회색 배경 + 검은색 텍스트) */
body.light .pager ul .num a,
body.light .pagination a {
  background: rgba(128, 128, 128, 0.6) !important;
  color: #000000 !important;
  border-radius: 8px;
}

/* 데이 모드 - 활성화 버튼은 보라색 배경 + 흰색 텍스트 유지 */
body.light .pager ul .num.active a,
body.light .pagination a.active {
  background: var(--pr) !important;
  color: #ffffff !important;
}

/* 카지노 섹션 타이틀 ... 처리 (홈 섹션과 동일) */
.casino-recommendation-section .section-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 80px);
  display: block;
}

/* 화살표 버튼 - 나이트 모드에서 흰색 (기본 상태) */
.pager ul .arrow_btn a img,
.pagination .prev img,
.pagination .next img {
  filter: none; /* 기본 상태 (흰색) */
}

/* 화살표 버튼 - 데이 모드에서 검은색 */
body.light .pager ul .arrow_btn a img,
body.light .pagination .prev img,
body.light .pagination .next img {
  filter: invert(1);
}

/* Sports 페이지 전용 페이지네이션 스타일 */
.pagination a {
  color: #ffffff !important;
}

/* Comments 페이지네이션 (post_detail 페이지) */
#comments-pager ul .num a {
  color: #ffffff !important;
}

/* 데이 모드 - Comments 페이지네이션 비활성화 버튼 */
body.light #comments-pager ul .num a {
  background: rgba(128, 128, 128, 0.6) !important;
  color: #000000 !important;
  border-radius: 8px;
}

/* 데이 모드 - Comments 활성화 버튼은 보라색 배경 + 흰색 텍스트 유지 */
body.light #comments-pager ul .num.active a {
  background: var(--pr) !important;
  color: #ffffff !important;
}

#comments-pager ul .arrow_btn a img {
  filter: none; /* 기본 상태 (흰색) */
}

body.light #comments-pager ul .arrow_btn a img {
  filter: invert(1);
}

/* Guide 페이지네이션 (#pagination ID) */
#pagination ul .num a {
  color: #ffffff !important;
}

/* 데이 모드 - Guide 페이지네이션 비활성화 버튼 */
body.light #pagination ul .num a {
  background: rgba(128, 128, 128, 0.6) !important;
  color: #000000 !important;
  border-radius: 8px;
}

/* 데이 모드 - Guide 활성화 버튼은 보라색 배경 + 흰색 텍스트 유지 */
body.light #pagination ul .num.active a {
  background: var(--pr) !important;
  color: #ffffff !important;
}

#pagination ul .arrow_btn a img {
  filter: none; /* 기본 상태 (흰색) */
}

body.light #pagination ul .arrow_btn a img {
  filter: invert(1);
}

/* 리뷰 리스트 - Read Review 버튼 이미지 데이 모드에서 검은색 */
body.light .cp_btn.rr img {
  filter: invert(1);
}

/* 스포츠 카테고리 - 데이 모드에서 활성화된 카테고리 이름 색상 */
body.light .sports-list .category-box ul li.active .child-box .sports-name p {
  color: #ff9500 !important; /* 아이콘 필터와 동일한 주황색 계열 */
}

/* 리뷰 디테일 - 게임즈 섹션: 게임 아이콘 데이 모드에서 검은색 */
body.light .bonus_game ul li:last-of-type .child-box .icon_img img {
  filter: invert(1);
}

/* 리뷰 디테일 - 게임즈 섹션: 게임 이름 텍스트 데이 모드에서 검은색 */
body.light .bonus_game ul li:last-of-type .child-box .name {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* 리뷰 디테일 - 게임즈 섹션: 각 게임 아이템 배경색 */
body.light .bonus_game ul li .child-box .bonus_game-item {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* 리뷰 디테일 - 게임 프로바이더: 각 아이템 요소들의 배경색 */
body.light .bonus_game ul li .child-box .provider-item {
  background: rgba(255, 255, 255, 0.6) !important;
  color: rgba(0, 0, 0, 0.8) !important;
}

/* 리뷰 디테일 - 언어옵션: 각 아이템 요소들의 배경색 */
body.light .bonus_game ul li .child-box .language-item {
  background: rgba(255, 255, 255, 0.6) !important;
  color: rgba(0, 0, 0, 0.8) !important;
}

/* 리뷰 디테일 - 언어 옵션: 카테고리 섹션 배경 (JavaScript로 생성) */
body.light .language-category-section .category-content {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* 리뷰 디테일 - 언어 옵션: 언어 이름 텍스트 색상 */
body.light .language-category-section .language-name {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* 리뷰 디테일 - 언어 옵션: 카테고리 타이틀 구분선 색상 */
body.light .language-category-section .category-title {
  border-bottom-color: rgba(128, 128, 128, 0.3) !important;
}

/* 리뷰 디테일 - 플레이 나우 버튼: 데이 모드에서도 흰색 텍스트 유지 */
body.light .review-detail .cp_info-fixed .play_now-btn {
  color: #ffffff !important;
}

/* 마이페이지 - 경험치와 Edit Info 버튼 항상 흰색으로 고정 */
/* 경험치 배지 - 나이트모드와 데이모드 모두 흰색 */
.bonus_game2 ul li:first-of-type .child-box .profile-area .profile-info .exp {
  color: #ffffff !important;
}

/* Edit Info 버튼 - 나이트모드와 데이모드 모두 흰색 */
.my_edit-btn {
  color: #ffffff !important;
}

/* 마이페이지 프로필 X 버튼 - 데이모드에서 검은색 반전 */
body.light #deleteProfileImageBtn img {
  filter: invert(1) !important;
}

/* 헤더 로그아웃 버튼 이미지 - 데이모드에서 검은색 반전 */
body.light .logout_btn img {
  filter: invert(1) !important;
}

/* 사이드바 언어 관련 스타일 */
/* 언어 버튼 배경 - 데이모드에서 반투명 흰색 */
body.light .language .lang_btn {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* 언어 아래 화살표 - 데이모드에서 검은색 반전 */
body.light .language .lang_btn img {
  filter: invert(1) !important;
}

/* 언어 모달 관련 스타일 */
/* 언어 모달 X 버튼 - 데이모드에서 검은색 반전 */
body.light .pop-lang .close-btn img {
  filter: invert(1) !important;
}

/* 언어 모달 각 아이템 배경 - 데이모드에서 반투명 흰색 */
body.light .pop-lang .select-box ul li button {
  background: rgba(255, 255, 255, 0.6) !important;
  color: rgba(0, 0, 0, 0.8) !important;
}

/* 언어 모달 검색 영역 스타일 */
/* 검색창 전체 테두리 - 데이모드에서 옅은 회색 */
body.light .pop-lang .search-box {
  border-color: rgba(128, 128, 128, 0.5) !important;
}

/* 검색 입력창 배경 - 데이모드에서 반투명 흰색 */
body.light .pop-lang .search-box input {
  background: rgba(255, 255, 255, 0.6) !important;
  color: rgba(0, 0, 0, 0.8) !important;
}

/* 검색 입력창 placeholder - 데이모드에서 회색 */
body.light .pop-lang .search-box input::placeholder {
  color: rgba(128, 128, 128, 0.8) !important;
}

/* 돋보기 이미지 - 데이모드에서 검은색 반전 */
body.light .pop-lang .search-box .search-btn img {
  filter: invert(1) !important;
}

/* Support 페이지 스타일 */
.support-sec {
  width: 100%;
  padding: 40px 0;
}

.support-content {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.support-left,
.support-right {
  flex: 0 0 50%;
  width: 50%;
}

.support-box,
.inbox-box {
  border-radius: 10px;
  padding: 30px;
  min-height: 500px;
}

.support-header,
.inbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.light .support-header,
body.light .inbox-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.support-header h3,
.inbox-header h3 {
  font-size: 29px;
  font-weight: bold;
  color: var(--wt);
  margin: 0;
}

.send-message-btn {
  background: transparent;
  color: var(--or);
  border: 2px solid var(--or);
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.send-message-btn:hover {
  background: rgba(240, 126, 0, 0.1);
  color: var(--or);
  border-color: var(--or);
}

.inquiry-item,
.inbox-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin-bottom: 15px;
  background: var(--lg);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

/* 1:1 서포트 아이템 - 전체 영역 호버 효과 제거, 버튼만 호버 효과 */
.inquiry-item {
  transition: none;
}

/* 1:1 서포트 아이템 호버 시 배경색 변경 방지 */
.inquiry-item:hover {
  background: var(--lg) !important;
}

/* 1:1 서포트 아이템의 콘텐츠 영역 - 호버 효과 제거 */
.inquiry-content {
  flex: 1 !important;
  cursor: default; /* 포인터 커서 제거 */
  min-width: 0 !important; /* flex 아이템이 축소될 수 있도록 */
  overflow: visible !important; /* 넘치는 내용 표시 */
}

/* 1:1 서포트 아이템의 콘텐츠 영역 호버 시 배경색 변경 방지 */
.inquiry-item:hover .inquiry-content {
  background: transparent;
}

/* 인박스 아이템 - 기존 호버 효과 유지 */
.inbox-item:hover {
  background: var(--lg);
}

/* 인박스 콘텐츠 - 기존 스타일 유지 */
.inbox-content {
  flex: 1;
  cursor: pointer;
  min-height: 50px;
  padding: 6px 0;
}

/* 모바일에서 inbox-content 너비 수정 */
@media (max-width: 768px) {
  .inbox-content {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

.inquiry-title,
.inbox-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--wt);
  margin: 0 0 2px 0;
  /* 1:1 서포트 제목 말줄임표 처리 - 영역에 맞춰 유동적 */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  width: 100% !important; /* 고정 길이 제거, 영역에 맞춤 */
  min-width: 0 !important; /* flex 아이템이 축소될 수 있도록 */
  max-width: none !important; /* 최대 너비 제한 제거 */
  flex-shrink: 1 !important; /* 축소 가능하도록 강제 설정 */
  min-height: 18px; /* 최소 높이 더 줄임 */
  line-height: 1.1; /* 줄 간격 더 줄임 */
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
}

.inquiry-date,
.inbox-date {
  font-size: 12px;
  color: var(--gray_9);
  margin: 0;
}

.inquiry-actions,
.inbox-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.inquiry-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.edit-btn,
.delete-btn {
  background: #6c5dd3 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
  box-shadow: none !important;
}
.edit-btn:hover,
.delete-btn:hover {
  background: #4b3bb3 !important;
}
.inquiry-list {
  display: flex;
  flex-direction: column;
  max-height: 570px;
  overflow-y: auto;
}

.inquiry-item {
  padding: 18px 20px;
  border-radius: 12px;
  border: none !important;
  margin-bottom: 12px;
  transition: background 0.2s;
  min-height: 68px;
}
body:not(.light) .inquiry-item {
  background: var(--lg) !important;
  border: none !important;
}
.inbox-list .no-inbox-message {
  text-align: left !important;
  color: #aaa;
  font-size: 16px;
  padding: 32px 0;
  width: 100%;
}

.notification-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.notification-btn img {
  width: 20px;
  height: 20px;
  filter: brightness(0.7);
}

.notification-btn.active img {
  filter: brightness(1) sepia(1) hue-rotate(45deg) saturate(2);
}

.no-inquiries {
  text-align: left;
  padding: 32px 0;
}

.no-inquiries .inquiry-title {
  color: #aaa !important;
  font-size: 16px;
  margin: 0;
  text-align: left;
}
body.light .no-inquiries .inquiry-title {
  color: #aaa !important;
}

.no-inquiries-text {
  font-size: 16px;
  color: var(--gray_9);
  margin: 30px 0 0 0;
}

/* No inquiry message 스타일 */
.inquiry-item.no-inquiry-message {
  text-align: left;
  justify-content: flex-start;
  padding: 20px;
  background: transparent;
  border: none;
}

.inquiry-item.no-inquiry-message .inquiry-content {
  cursor: default;
}

.inquiry-item.no-inquiry-message .inquiry-title {
  color: var(--gray_9);
}

/* Send Message Modal 스타일 */
.send-message-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 1000px;
  min-height: 600px;
  height: auto;
  max-height: 80vh;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: 9999;
  box-shadow: none;
}

@media (max-width: 768px) {
  .send-message-popup {
    width: 95vw;
    min-height: auto;
    max-height: 90vh;
  }
}

.send-message-popup .popup-body {
  position: relative;
  padding: 0;
  max-height: none;
  width: 100%;
}

.send-message-popup .send-message-close-btn {
  position: absolute;
  top: 7px;
  right: 15px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 0;
}

@media (max-width: 768px) {
  .send-message-popup .send-message-close-btn {
    top: 5px;
    right: 12px;
  }
}

.send-message-popup .modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.send-message-popup .write_form {
  width: 90vw;
  max-width: 1000px;
  min-width: 600px;
  height: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
  overflow-y: auto;
}

/* 모달 스크롤바 스타일링 */
.send-message-popup .write_form::-webkit-scrollbar {
  width: 8px;
}

.send-message-popup .write_form::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.send-message-popup .write_form::-webkit-scrollbar-thumb {
  background: var(--pr);
  border-radius: 4px;
}

.send-message-popup .write_form::-webkit-scrollbar-thumb:hover {
  background: var(--pr-hover, #4a39d4);
}

@media (max-width: 768px) {
  .send-message-popup .write_form {
    width: 95vw;
    min-width: auto;
    height: auto;
    padding: 20px;
    border-radius: 10px;
  }
}

.send-message-popup .input-box {
  margin-bottom: 25px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.send-message-popup .input-box .tit {
  text-align: left;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--wt);
}

.send-message-popup .input-box input {
  width: 100%;
  height: auto;
  min-height: 45px;
  max-height: none;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--wt);
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
  text-align: left;
  transition: all 0.3s ease;
  resize: none;
  overflow: hidden;
  line-height: 2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.send-message-popup .input-box input:focus {
  outline: none;
  border-color: var(--pr);
  background: rgba(255, 255, 255, 0.08);
}

.send-message-popup .input-box .title-textarea {
  width: 100%;
  height: 0;
  padding: 15px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--wt);
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
  text-align: left;
  transition: all 0.3s ease;
  resize: none;
  overflow: hidden;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.send-message-popup .input-box .title-textarea:focus {
  outline: none;
  border-color: var(--pr);
  background: rgba(255, 255, 255, 0.08);
}

.send-message-popup #message-editor-container {
  width: 100%;
  height: 350px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
}

.send-message-popup #message-editor-container .ql-toolbar {
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 12px 20px !important;
}

.send-message-popup #message-editor-container .ql-container {
  min-height: 260px;
  max-height: 600px;
  border: none;
  font-size: 16px;
}

.send-message-popup #message-editor-container .ql-editor {
  min-height: 260px;
  max-height: 600px;
  color: var(--wt);
  font-size: 16px;
  padding: 20px;
  text-align: left;
  line-height: 1.6;
  overflow-y: auto;
}

.send-message-popup #message-editor-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}

.send-message-popup #message-editor-container .ql-editor::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.send-message-popup #message-editor-container .ql-editor::-webkit-scrollbar-thumb {
  background: var(--pr);
  border-radius: 4px;
}

.send-message-popup #message-editor-container .ql-editor::-webkit-scrollbar-thumb:hover {
  background: var(--pr-hover, #4a39d4);
}

.send-message-popup .submit-btn {
  margin-top: 10px;
  width: 100%;
  min-width: none;
  padding: 12px 30px;
  background: var(--pr);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: stretch;
}

.send-message-popup .submit-btn:hover {
  background: var(--pr-hover, #4a39d4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(92, 65, 244, 0.3);
}

.send-message-popup textarea {
  width: 100%;
  min-height: 120px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--wt);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  text-align: left;
}

.send-message-popup textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.send-message-popup textarea:focus {
  outline: none;
  border-color: var(--pr);
}

/* 데이모드 스타일 */
body.light .support-box,
body.light .inbox-box {
  background: transparent !important;
}

body.light .support-header h3,
body.light .inbox-header h3 {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .inquiry-item:not(.no-inquiry-message),
body.light .inbox-item {
  background: var(--lg) !important;
  border-color: rgba(128, 128, 128, 0.3) !important;
}

body.light .inquiry-item.no-inquiry-message {
  background: transparent !important;
  border: none !important;
}

body.light .inquiry-title,
body.light .inbox-title {
  color: var(--wt) !important;
}

body.light .no-inquiries h3 {
  color: rgba(0, 0, 0, 0.8) !important;
}

body.light .send-message-popup .write_form {
  background: var(--lg) !important;
  border-color: rgba(128, 128, 128, 0.3) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

body.light .send-message-popup .input-box .tit {
  color: rgba(0, 0, 0, 0.9) !important;
}

body.light .send-message-popup .input-box input {
  background: rgba(255, 255, 255, 0.8) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(128, 128, 128, 0.4) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.4 !important;
}

body.light .send-message-popup .input-box input:focus {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--pr) !important;
}

body.light .send-message-popup .input-box .title-textarea {
  background: rgba(255, 255, 255, 0.8) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(128, 128, 128, 0.4) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.4 !important;
}

body.light .send-message-popup .input-box .title-textarea:focus {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--pr) !important;
}

body.light .send-message-popup #message-editor-container {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(128, 128, 128, 0.4) !important;
}

body.light .send-message-popup #message-editor-container .ql-toolbar {
  background: rgba(248, 248, 248, 0.9) !important;
  border-bottom-color: rgba(128, 128, 128, 0.2) !important;
}

body.light .send-message-popup #message-editor-container .ql-editor {
  color: rgba(0, 0, 0, 0.9) !important;
}

body.light .send-message-popup textarea {
  background: rgba(255, 255, 255, 0.8) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(128, 128, 128, 0.4) !important;
}

body.light .inquiry-item.no-inquiry-message .inquiry-title {
  color: var(--gray_9) !important;
}

body.light .send-message-popup textarea::placeholder {
  color: rgba(128, 128, 128, 0.8) !important;
}

/* 반응형 */
@media (max-width: 768px) {
  .support-content {
    flex-direction: column;
    gap: 20px;
    padding: 0 15px;
  }

  .support-left,
  .support-right {
    flex: 1;
    width: 100%;
  }

  .support-header,
  .inbox-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .support-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .inquiry-item,
  .inbox-item {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .inquiry-actions,
  .inbox-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* 모바일에서 1:1 서포트 제목 말줄임표 처리 */
  .inquiry-content {
    max-width: 100% !important; /* 모바일에서는 타이틀 영역을 꽉 채움 */
  }

  .inquiry-title,
  .inbox-title {
    width: 100% !important; /* 고정 길이 제거, 영역에 맞춤 */
    min-width: 0 !important; /* flex 아이템이 축소될 수 있도록 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: none !important; /* 최대 너비 제한 제거 */
    flex-shrink: 1 !important; /* 축소 가능하도록 강제 설정 */
  }
}

.inquiry-item.no-inquiry-message {
  background: none !important;
  border: none !important;
}

.inquiry-list .inquiry-item.no-inquiry-message {
  background: none;
  border: none;
}

.complete-btn {
  background: #ff4d94 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
  box-shadow: none !important;
}
.complete-btn:hover {
  background: #d72670 !important;
}

.edit-btn,
.complete-btn,
.delete-btn {
  min-width: 110px;
  padding: 10px 0 !important;
  text-align: center;
}

.send-message-popup .category-select {
  position: relative;
}

.send-message-popup .category-input {
  width: 100%;
  height: 45px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--wt);
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.send-message-popup .category-input:hover {
  border-color: var(--pr);
  background: rgba(255, 255, 255, 0.08);
}

.send-message-popup .category-input:focus {
  border-color: var(--pr);
  background: rgba(255, 255, 255, 0.08);
}

.send-message-popup .dropdown-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.send-message-popup .category-select.open .dropdown-arrow {
  transform: rotate(180deg);
}

.send-message-popup .category-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--black_0f);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  margin-top: 5px;
  z-index: 1000;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.send-message-popup .category-dropdown li {
  padding: 15px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
  color: var(--wt);
  font-size: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.send-message-popup .category-dropdown li:last-child {
  border-bottom: none;
}

.send-message-popup .category-dropdown li:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Light mode styles for category select */
body.light .send-message-popup .category-input {
  background: rgba(255, 255, 255, 0.8) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(128, 128, 128, 0.4) !important;
}

body.light .send-message-popup .category-input:hover,
body.light .send-message-popup .category-input:focus {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--pr) !important;
}

body.light .send-message-popup .category-dropdown {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(128, 128, 128, 0.4) !important;
}

body.light .send-message-popup .category-dropdown li {
  color: rgba(0, 0, 0, 0.9) !important;
  border-bottom-color: rgba(128, 128, 128, 0.2) !important;
}

body.light .send-message-popup .category-dropdown li:hover {
  background: rgba(128, 128, 128, 0.1) !important;
}

/* 인박스 스타일 - 1대1 서포트와 완전히 동일하게 */
.inbox-box {
  border-radius: 10px;
  padding: 30px;
  min-height: 500px;
}

.inbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.inbox-header h3 {
  font-size: 29px;
  font-weight: bold;
  color: var(--wt);
  margin: 0;
}

.inbox-list {
  display: flex;
  flex-direction: column;
  max-height: 570px;
  overflow-y: auto;
}

.inbox-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-radius: 12px;
  border: none !important;
  margin-bottom: 12px;
  transition: background 0.2s;
  min-height: 68px;
}

body:not(.light) .inbox-item {
  background: var(--lg) !important;
  border: none !important;
}

.inbox-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.inbox-content {
  flex: 1;
  cursor: pointer;
}

.inbox-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--wt);
  margin: 0 0 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex-shrink: 1 !important;
  display: flex;
  align-items: center;
}

.inbox-item.unread .inbox-title {
  font-weight: 600;
  color: #fff;
}

.inbox-date {
  font-size: 12px;
  color: var(--gray_9);
  margin: 0;
}

.inbox-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.notification-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.notification-icon img {
  width: 16px;
  height: 16px;
  transition: all 0.3s ease;
}

.notification-icon.unread img {
  filter: brightness(1) saturate(1.2);
}

.notification-icon.read img {
  filter: brightness(0.5) saturate(0) contrast(0.5);
  opacity: 0.7;
}

/* 퀼 에디터 툴바 표시 조건 - JavaScript에서 관리 */
/* Inbox 읽기 모드에서 퀼 툴바 숨기기 */
#send-message-modal.message-view-mode .ql-toolbar {
  display: none !important;
}

/* Complete 모드에서 퀼 툴바 숨기기 */
#send-message-modal.complete-mode .ql-toolbar {
  display: none !important;
}

#send-message-modal.complete-mode .ql-container {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  background: var(--lg) !important;
  color: #fff !important;
}

#send-message-modal.complete-mode .ql-editor {
  color: #fff !important;
  padding: 15px !important;
  min-height: 150px !important;
  line-height: 1.5 !important;
}

/* Complete 모드에서 HTML 내용 스타일링 */
#send-message-modal.complete-mode .ql-editor h1,
#send-message-modal.complete-mode .ql-editor h2,
#send-message-modal.complete-mode .ql-editor h3,
#send-message-modal.complete-mode .ql-editor h4,
#send-message-modal.complete-mode .ql-editor h5,
#send-message-modal.complete-mode .ql-editor h6 {
  color: #fff !important;
  margin: 10px 0 !important;
  font-weight: 600 !important;
}

#send-message-modal.complete-mode .ql-editor p {
  margin: 8px 0 !important;
  line-height: 1.6 !important;
}

#send-message-modal.complete-mode .ql-editor ul,
#send-message-modal.complete-mode .ql-editor ol {
  margin: 10px 0 !important;
  padding-left: 20px !important;
}

#send-message-modal.complete-mode .ql-editor li {
  margin: 5px 0 !important;
}

#send-message-modal.complete-mode .ql-editor strong,
#send-message-modal.complete-mode .ql-editor b {
  font-weight: 600 !important;
}

#send-message-modal.complete-mode .ql-editor em,
#send-message-modal.complete-mode .ql-editor i {
  font-style: italic !important;
}

#send-message-modal.complete-mode .ql-editor u {
  text-decoration: underline !important;
}

#send-message-modal.complete-mode .ql-editor a {
  color: var(--pr) !important;
  text-decoration: underline !important;
}

#send-message-modal.complete-mode .ql-editor img {
  max-width: 100% !important;
  height: auto !important;
  margin: 10px 0 !important;
  border-radius: 4px !important;
}

#send-message-modal.complete-mode .ql-editor blockquote {
  border-left: 3px solid var(--pr) !important;
  padding-left: 15px !important;
  margin: 15px 0 !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 메시지 내용 영역 스타일링 */
.message-content {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: var(--lg) !important;
  color: #fff !important;
}

/* 인박스 메시지 모달 스타일링 */
.message-title-display {
  width: 100%;
  min-height: 45px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--wt);
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
  text-align: left;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  display: block;
}

.message-content-display {
  width: 100%;
  min-height: 150px;
  padding: 15px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--wt);
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
  text-align: left;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* HTML 내용 스타일링 */
.message-content-display h1,
.message-content-display h2,
.message-content-display h3,
.message-content-display h4,
.message-content-display h5,
.message-content-display h6 {
  color: var(--wt);
  margin: 10px 0;
  font-weight: 600;
}

.message-content-display p {
  margin: 8px 0;
  line-height: 1.6;
}

.message-content-display ul,
.message-content-display ol {
  margin: 10px 0;
  padding-left: 20px;
}

.message-content-display li {
  margin: 5px 0;
}

.message-content-display strong,
.message-content-display b {
  font-weight: 600;
}

.message-content-display em,
.message-content-display i {
  font-style: italic;
}

.message-content-display u {
  text-decoration: underline;
}

.message-content-display a {
  color: var(--pr);
  text-decoration: underline;
}

.message-content-display img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 4px;
}

.message-content-display blockquote {
  border-left: 3px solid var(--pr);
  padding-left: 15px;
  margin: 15px 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

/* 라이트모드에서 인박스 메시지 스타일 */
body.light .message-title-display {
  background: rgba(255, 255, 255, 0.8) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(128, 128, 128, 0.4) !important;
}

body.light .message-content-display {
  background: rgba(255, 255, 255, 0.8) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(128, 128, 128, 0.4) !important;
}

/* Reply 영역 스타일링 */
#reply-area {
  margin-top: 0;
  padding: 5px 0;
  margin-bottom: 0;
}

#reply-area h4 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 16px;
}

#reply-content {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px;
  background: var(--lg);
  color: #fff;
  min-height: 50px;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  /* 높이 제한 제거 - 전체 모달 스크롤 사용 */
}

/* Reply 영역에서 이미지 스타일링 */
#reply-content img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 4px;
  display: block;
}

#reply-content h1,
#reply-content h2,
#reply-content h3,
#reply-content h4,
#reply-content h5,
#reply-content h6 {
  color: #fff;
  margin: 10px 0;
  font-weight: 600;
}

#reply-content p {
  margin: 8px 0;
  line-height: 1.6;
}

#reply-content ul,
#reply-content ol {
  margin: 10px 0;
  padding-left: 20px;
}

#reply-content li {
  margin: 5px 0;
}

#reply-content strong,
#reply-content b {
  font-weight: 600;
}

#reply-content em,
#reply-content i {
  font-style: italic;
}

#reply-content u {
  text-decoration: underline;
}

#reply-content a {
  color: var(--pr);
  text-decoration: underline;
}

#reply-content blockquote {
  border-left: 3px solid var(--pr);
  padding-left: 15px;
  margin: 15px 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

/* 라이트모드(데이모드)일 때 모달 컨텐츠 스타일 - 회색 테두리에 검은 글씨 */
body.light .message-content {
  border: 1px solid rgba(128, 128, 128, 0.4) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

body.light #reply-area h4 {
  color: rgba(0, 0, 0, 0.85) !important;
}

body.light #reply-content {
  border: 1px solid rgba(128, 128, 128, 0.4) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

/* 라이트모드에서 Reply 영역 HTML 요소 스타일링 */
body.light #reply-content h1,
body.light #reply-content h2,
body.light #reply-content h3,
body.light #reply-content h4,
body.light #reply-content h5,
body.light #reply-content h6 {
  color: rgba(0, 0, 0, 0.85) !important;
}

body.light #reply-content a {
  color: var(--pr) !important;
}

body.light #reply-content blockquote {
  color: rgba(0, 0, 0, 0.7) !important;
}

body.light #send-message-modal.complete-mode .ql-container {
  border: 1px solid rgba(128, 128, 128, 0.4) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

body.light #send-message-modal.complete-mode .ql-editor {
  color: rgba(0, 0, 0, 0.85) !important;
}

/* Complete 모드에서 카테고리 비활성화 */
#send-message-modal.complete-mode .category-select {
  pointer-events: none;
  opacity: 0.6;
}

#send-message-modal.complete-mode .category-input {
  cursor: not-allowed;
}

/* Complete 모드에서 라디오 버튼 비활성화 */
#send-message-modal.complete-mode .category-radio-group {
  pointer-events: none;
  opacity: 0.6;
}

#send-message-modal.complete-mode .radio-item {
  cursor: not-allowed;
}

#send-message-modal.complete-mode .radio-item input[type='radio'] {
  pointer-events: none;
}

/* Complete 모드에서 타이틀 입력 필드 줄바꿈 처리 */
#send-message-modal.complete-mode input[name='title'] {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-all !important;
  white-space: pre-wrap !important;
}

/* Complete 모드에서 타이틀 표시 div 줄바꿈 처리 */
#send-message-modal.complete-mode .input-box[data-section='title'] div {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-all !important;
  white-space: pre-wrap !important;
  min-height: auto !important;
  height: auto !important;
}

/* Complete 모드에서 타이틀 표시용 div 스타일 */
.title-display {
  width: 100%;
  min-height: 45px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--wt);
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
  text-align: left;
  line-height: 1.4;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-all !important;
  white-space: pre-wrap !important;
  min-height: auto !important;
  height: auto !important;
  /* 한글 텍스트 줄바꿈을 위한 추가 속성 */
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 카테고리와 에디터 사이 여백 보장 */
#send-message-modal .input-box {
  margin-bottom: 20px !important;
}

#send-message-modal #editor {
  margin-top: 10px;
}

/* 카테고리 라디오 버튼 스타일 */
.category-radio-group {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .category-radio-group {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .category-radio-group {
    gap: 8px;
    margin-top: 8px;
  }
}

.radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  min-width: 120px;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .radio-item {
    padding: 8px 16px;
    min-width: 100px;
  }
}

@media (max-width: 480px) {
  .radio-item {
    padding: 6px 12px;
    min-width: 80px;
    font-size: 14px;
  }
}

.radio-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-text {
  color: var(--wt);
  font-size: 16px;
  font-weight: 500;
  margin-left: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .radio-text {
    font-size: 14px;
    line-height: 1.4;
  }
}

.radio-item input[type='radio']:checked + .radio-text {
  color: var(--or);
  font-weight: 600;
}

.radio-item:has(input[type='radio']:checked) {
  background: rgba(240, 126, 0, 0.1);
  border-color: var(--or);
}

/* 라이트모드에서 라디오 버튼 스타일 */
body.light .radio-item {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(128, 128, 128, 0.4);
  color: rgba(0, 0, 0, 0.9);
}

body.light .radio-item:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(128, 128, 128, 0.6);
}

body.light .radio-text {
  color: rgba(0, 0, 0, 0.9);
}

body.light .radio-item input[type='radio']:checked + .radio-text {
  color: var(--or);
}

body.light .radio-item:has(input[type='radio']:checked) {
  background: rgba(240, 126, 0, 0.1);
  border-color: var(--or);
}

.delete-btn {
  background: #6c5dd3 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
  box-shadow: none !important;
}

.delete-btn:hover {
  background: #4b3bb3 !important;
}

.no-inbox-message {
  text-align: left !important;
  color: #aaa;
  font-size: 16px;
  padding: 32px 0;
  width: 100%;
}

.no-inbox-message .inbox-title {
  color: #aaa !important;
  font-size: 16px;
  margin: 0;
  text-align: left;
}

body.light .inbox-box {
  background: var(--lg);
}

body.light .inbox-item {
  background: var(--lg);
}

body.light .inbox-item:hover {
  background: var(--lg);
}

body.light .inbox-title {
  color: var(--wt);
}

body.light .inbox-date {
  color: var(--gray_9);
}

body.light .notification-icon.read {
  color: rgba(255, 255, 255, 0.4);
  border: none;
}

body.light .delete-btn {
  background: #6c5dd3 !important;
  color: #fff !important;
  border: none !important;
}

body.light .delete-btn:hover {
  background: #4b3bb3 !important;
}

body.light .no-inbox-message {
  color: #aaa;
}

body.light .no-inbox-message .inbox-title {
  color: #aaa !important;
}

@media (max-width: 768px) {
  .inbox-box {
    padding: 20px;
  }

  .inbox-item {
    padding: 15px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .inbox-actions {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
  }

  .inbox-title {
    font-size: 14px;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-shrink: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .inbox-date {
    font-size: 12px;
  }

  .notification-icon {
    width: 20px;
    height: 20px;
  }

  .notification-icon::before {
    font-size: 12px;
  }

  .delete-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* 암호화폐 페이지 새로운 레이아웃 */
.sports-list .d-flex.crypto-main-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 24px !important;
  margin-bottom: 30px;
}

.sports-list .crypto-ranking-section {
  flex: 0 0 70% !important;
  width: 70% !important;
  max-width: none !important;
}

.sports-list .d-flex.crypto-main-row .crypto-fee-section {
  flex: 0 0 calc(30% - 30px) !important;
  width: calc(30% - 30px) !important;
  max-width: calc(30% - 30px) !important;
  margin-top: 0 !important;
}

.sports-list .crypto-transfer-section {
  width: 100%;
  margin-top: 20px;
}

.sports-list .crypto-transfer-section .category-box {
  margin: 0;
  max-width: none !important;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .sports-list .d-flex.crypto-main-row {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .sports-list .crypto-ranking-section,
  .sports-list .d-flex.crypto-main-row .crypto-fee-section {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
  }
}

.review-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.review-list-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

#sort-rating-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--or);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
}

#sort-rating-btn img {
  transition: transform 0.3s ease;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--wt);
}

.filter-icon-btn {
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  background: var(--pr);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sort-rating-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.3s ease;
  transform-origin: center center;
  width: 18px;
  height: auto;
}

/* 필터 모달 스타일 */
.filter-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.filter-modal.show {
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter-modal-content {
  background: var(--lg);
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
}

.filter-modal-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2a2e3d;
}

.filter-modal-header h2 {
  color: #fff;
  margin: 0;
  font-size: 24px;
}

.close-button {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

body.light .close-button {
  color: #000;
}

.filter-content {
  padding: 20px;
}

.filter-category {
  margin-bottom: 24px;
}

.filter-category-title {
  color: var(--pr);
  font-size: 18px;
  margin: 0 0 16px 0;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
}

.filter-subcategory-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-subcategory-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-subcategory-item input[type='checkbox'] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--pr);
  appearance: none;
  cursor: pointer;
  position: relative;
}

.filter-subcategory-item input[type='checkbox']:checked {
  background: var(--pr);
}

.filter-subcategory-item input[type='checkbox']:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.filter-subcategory-item label {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  line-height: 1.3;
}

.filter-modal-footer {
  padding: 20px;
  border-top: 1px solid #2a2e3d;
}

.apply-filters-button {
  width: 100%;
  padding: 12px;
  background: var(--pr);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.apply-filters-button:hover {
  opacity: 0.9;
}

body.light .filter-modal-header h2 {
  color: #000;
}

body.light .filter-subcategory-item label {
  color: #000;
  font-weight: 500;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  line-height: 1.3;
}

/* Sport Insights Section */
.sport-insights-section {
  margin-bottom: 40px;
  padding: 0 20px;
}

.sport-insights-section .small_tit {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text);
}

.sport-insights-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
}

.insights-wrapper {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scroll-behavior: smooth;
  width: 100%;
  min-height: 100px;
}

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

.insights-content {
  display: flex;
  gap: 20px;
  padding: 20px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--pr) transparent;
}

.insights-content::-webkit-scrollbar {
  height: 8px;
}

.insights-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.insights-content::-webkit-scrollbar-thumb {
  background: var(--pr);
  border-radius: 4px;
}

.insights-content::-webkit-scrollbar-thumb:hover {
  background: var(--pr-hover, #4a39d4);
}

.insight-card {
  min-width: 300px;
  border-radius: 8px;
  padding: 15px;
}

.team-images {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.team-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.team-image {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 6px;
}

.team-name {
  font-size: 12px;
  color: #fff;
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.vs {
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}

.match-info {
  margin-bottom: 15px;
}

.team-names {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.team-names span {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.game-date,
.category-tag {
  color: #888888;
  font-size: 12px;
}

.view-details {
  text-align: right;
}

.view-details span {
  color: #ff6b00;
  font-size: 14px;
  cursor: pointer;
}

.insights-content .no-data {
  width: 100%;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  padding: 20px 0;
}

/* 인사이트 헤더 스타일 */
.insights-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* 인사이트 네비게이션 스타일 */
.insights-navigation {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-right: 10px;
}

.insight-nav-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.insight-nav-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* 라이트 모드 스타일 */
body.light .insight-nav-btn {
  background: rgba(0, 0, 0, 0.2);
  color: #000;
}

body.light .insight-nav-btn:hover {
  background: rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  .insight-card {
    min-width: 280px;
    padding: 15px;
  }

  .insight-card .team-image {
    width: 50px;
    height: 50px;
  }

  .team-name {
    font-size: 11px;
    max-width: 70px;
  }

  .vs {
    font-size: 14px;
  }
}

/* Light mode adjustments */
body.light .insight-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

body.light .insight-card:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sport-insights-section {
  width: 100%;
  margin-bottom: 30px;
}

.sport-insights-section .small_tit {
  margin-bottom: 20px;
}

.sport-insights-container {
  width: 100%;
  overflow: hidden;
}

.insights-wrapper {
  width: 100%;
  overflow-x: auto;
  padding: 10px 0;
}

.insights-wrapper::-webkit-scrollbar {
  height: 0;
}

.insights-content {
  display: flex;
  gap: 15px;
}

.insight-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 20px;
  min-width: 300px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.insight-card .team-images {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  position: relative;
}

.insight-card .team-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: contain;
}

.insight-card .vs {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin: 0 10px;
}

.insight-card .match-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insight-card .team-names {
  display: flex;
  justify-content: space-around;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.insight-card .match-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.insight-card .game-date,
.insight-card .category-tag {
  color: #888888;
  font-size: 12px;
}

.insight-card .view-details {
  text-align: center;
  margin-top: auto;
}

.insight-card .view-details span {
  display: inline-block;
  color: #ff6b00;
  border: 1px solid #ff6b00;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.insight-card .view-details span:hover {
  background: rgba(255, 107, 0, 0.1);
}

/* 배너 타입 인사이트 제목 스타일 */
.insight-banner-title {
  color: var(--wt);
}

body.light .insight-banner-title {
  color: var(--text);
}

/* 팀 이름 표시 반응형 스타일 */
.team-name-display {
  width: 180px !important;
}

@media (max-width: 768px) {
  .team-name-display {
    width: 120px !important;
  }
}

.insights-content .no-data {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 20px;
  width: 100%;
}

@media (max-width: 768px) {
  .insight-card {
    min-width: 260px;
    max-width: 300px;
  }
}

/* 데스크톱에서 collapsed 상태일 때 6개 초과 아이템 숨기기 */
.sports-categories.collapsed li:nth-child(n + 7) {
  display: none !important;
}

/* 모바일에서 collapsed 상태일 때 2개 초과 아이템 숨기기 */
@media (max-width: 600px) {
  .sports-categories.collapsed li:nth-child(n + 3) {
    display: none !important;
  }
}

/* More 버튼에 화살표 아이콘 추가 */
#category-toggle-btn.more-btn::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 8px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--or);
  transition: transform 0.3s ease;
}

/* collapsed 상태가 아닐 때 화살표 뒤집기 */
.sports-categories:not(.collapsed) + #category-toggle-btn.more-btn::after {
  transform: rotate(180deg);
}

#category-toggle-btn.more-btn {
}

.insight-card {
  padding: 15px;
  background: var(--black_0f);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.team-images {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 160px;
  gap: 10px;
}

.team-image-container {
  width: 70px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
}

.team-image-container:first-child {
  left: 5%;
}

.team-image-container:last-child {
  right: 5%;
}

.team-image {
  width: 80px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
  margin-bottom: 15px;
}

.team-image-container span {
  font-size: 13px;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  width: 100px;
  min-width: 100px;
  word-break: break-word;
  white-space: normal;
  line-height: 1.2;
  max-height: 50px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

.vs {
  font-size: 14px;
  color: var(--text);
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translate(-50%, -50%);
}

.match-info {
  margin: 0;
}

.team-names {
  display: none;
}

.match-details {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  color: var(--gray_9);
  text-align: center;
}

.game-date,
.category-tag {
  color: var(--gray_9);
}

.view-details {
  margin-top: 8px;
  text-align: right;
}

.view-details span {
  font-size: 12px;
  color: var(--pr);
  cursor: pointer;
}

.insight-card {
  background: #2b3753;
  padding: 20px;
  border-radius: 10px;
}

.team-images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 10px;
  height: 120px;
}

.team-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.vs {
  font-size: 16px;
  font-weight: bold;
  color: var(--wt);
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
}

/* 스포츠 인사이트 라이트 모드 텍스트 색상 */
body.light .insight-card .team-names span,
body.light .insight-card .vs,
body.light .match-info-section .team-image-container span,
body.light .match-info-section .vs {
  color: #000 !important;
}

/* 스포츠 인사이트 라이트 모드 텍스트 색상 */
body.light .insight-card .team-image-container span,
body.light .insight-card .vs,
body.light .match-info-section .team-image-container span,
body.light .match-info-section .vs {
  color: #000 !important;
}

/* VS와 팀명 색상 설정 */
body.light .team-name {
  color: #000 !important;
}

body.light .team-names span {
  color: #000 !important;
}

body.light .vs {
  color: #000 !important;
}

/* 모바일 스타일 - PC와 동일하게 통일 */
.company-banners-mo {
  /* flex-direction: column; */
  margin-top: -15px;
  gap: 15px;
  width: 100%;
  /* height: 100%; */
}

/* 모바일에서도 동일한 스타일 적용 */
.company-banners-mo .company-banner {
  min-height: 200px; /* 모바일에서 최소 높이 설정 */
  height: auto; /* 내용에 따라 높이 자동 조정 */
}

.company-banners-mo .company-banner-content {
  min-height: 200px; /* 모바일에서 최소 높이 설정 */
  height: auto; /* 내용에 따라 높이 자동 조정 */
}

.company-banners-mo .company-banner-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 120px; /* 최소 높이 설정 */
}

.company-banners-mo .company-banner-description {
  flex: 1;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 모바일에서 더 많은 줄 허용 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 58px; /* 최소 높이 설정 */
  word-wrap: break-word; /* 긴 단어 줄바꿈 */
  word-break: break-word; /* 단어 중간에서도 줄바꿈 */
  overflow-wrap: break-word; /* 모던 브라우저 지원 */
  max-height: 80px; /* 최대 높이 제한 */
}

.company-banners-mo .company-banner-button {
  min-height: 35px;
  margin-top: auto;
  flex-shrink: 0; /* 버튼이 축소되지 않도록 */
}

/* 링크 스타일 제거 */
.company-banner a {
  text-decoration: none;
  color: inherit;
}

.company-banner a:hover {
  text-decoration: none;
}

@media (max-width: 767px) {
  .f_menu {
    height: 80px;
  }
}

@media (max-width: 767px) {
  .company-banners-mo {
    display: flex;
    flex-direction: column;
    margin-top: -15px;
    gap: 15px;
    width: 100%;
    /* height: 100%; */
    /* overflow-y: auto; */
    /* overflow: auto; */
  }

  .company-banners-mo .company-banner {
    width: 100%; /* 1열 배치를 위해 100% 너비 */
  }
}

/* 하단 배너 스타일 */
.bottom-banners-mo {
  width: 100%;
  margin-top: 15px;
}

.bottom-banner-item {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.bottom-banner-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bottom-banner-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bottom-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-banner-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.bottom-banner-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
  text-align: center;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bottom-banner-description {
  font-size: 14px;
  color: #cccccc;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 49px;
  text-align: center;
}

.bottom-banner-button {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  min-width: 80px;
  color: #ffffff !important;
  border: none;
}

.bottom-banner-button:hover {
  opacity: 0.8;
  text-decoration: none;
  color: #ffffff !important;
}

.aside-area.open {
  display: flex !important;
  z-index: 9999;
}

/* 라이트모드 업체 배너 스타일 */
body.light .company-banner {
  background-color: #eff0f2 !important;
}
body.light .company-banner-title {
  color: rgba(0, 0, 0, 0.9) !important;
}
body.light .company-banner-description {
  color: rgba(0, 0, 0, 0.9) !important;
}

.date {
  color: #888888;
  font-size: 13px;
  margin-top: 10px;
}
/* 댓글 관련 메시지 스타일 */
.no-replies-message {
  color: white;
}

body.light .no-replies-message {
  color: #000000cc !important;
}

/* 라이트모드 Read Review 버튼 스타일 */
body.light .cp_btn.rr {
  color: #5c41f4 !important;
  border-color: #5c41f4 !important;
}

body.light .cp_btn.rr img {
  filter: brightness(0) saturate(100%) invert(15%) sepia(90%) saturate(3000%) hue-rotate(246deg)
    brightness(70%) contrast(130%) !important;
}

.inquiry-content {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.inquiry-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  display: block !important;
  font-size: 16px;
  font-weight: 500;
  color: var(--wt);
  margin: 0 0 8px 0;
}

/* === 강제 말줄임표 처리: 1:1 문의 전체 === */
.inquiry-item {
  min-width: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

.inquiry-content {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  max-width: calc(100% - 120px) !important; /* 버튼 영역을 최소화해서 타이틀 영역 최대화 */
}

.inquiry-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex-shrink: 1 !important;
  display: block !important;
}
@media (max-width: 768px) {
  .inquiry-item {
    gap: 0 !important;
  }
  .inquiry-content {
    max-width: 100% !important;
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  .inquiry-actions {
    margin-left: 12px !important;
  }
}
.edit-btn,
.delete-btn,
.complete-btn {
  height: 30px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 14px;
}
@media (max-width: 768px) {
  .support-box,
  .inbox-box {
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  .inquiry-actions {
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-top: 12px !important;
  }
}
.inbox-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
}
.inbox-content {
  min-width: 0 !important;
  max-width: calc(100% - 120px) !important; /* 버튼 영역을 최소화해서 타이틀 영역 최대화 */
}
@media (max-width: 768px) {
  .support-box,
  .inbox-box {
    min-height: 0;
  }
  .inquiry-list,
  .inbox-list {
    max-height: 460px;
    overflow-y: auto;
  }
  .inquiry-list::-webkit-scrollbar,
  .inbox-list::-webkit-scrollbar {
    width: 8px;
  }
  .inquiry-list::-webkit-scrollbar-thumb,
  .inbox-list::-webkit-scrollbar-thumb {
    background-color: var(--pr);
    border-radius: 4px;
  }
  .inquiry-list::-webkit-scrollbar-thumb:hover,
  .inbox-list::-webkit-scrollbar-thumb:hover {
    background-color: #6b5bdb;
  }
  .inquiry-list::-webkit-scrollbar-track,
  .inbox-list::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }
  .inquiry-item {
    min-height: 100px;
    padding: 20px;
    margin-bottom: 15px;
    background: var(--lg);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }
  .inbox-item {
    min-height: 100px;
    padding: 20px;
    margin-bottom: 15px;
    background: var(--lg);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }
  .inbox-header {
    margin-top: 30px;
  }
  .inquiry-title,
  .inbox-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--wt);
    margin: 0 0 8px 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: block;
  }
  .inquiry-date,
  .inbox-date {
    font-size: 12px;
    color: var(--gray_9);
    margin: 0;
  }
  .inquiry-content,
  .inbox-content {
    flex: 1;
    min-width: 0;
  }
  .inquiry-actions,
  .inbox-actions {
    display: flex;
    gap: 10px;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .inbox-header h3 {
    text-align: left !important;
    width: 100%;
    justify-content: flex-start !important;
  }
  body.light .inquiry-item,
  body.light .inbox-item {
    background: var(--lg) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
  }
  body.light .inquiry-title,
  body.light .inbox-title {
    color: var(--wt) !important;
  }
  body.light .inquiry-date,
  body.light .inbox-date {
    color: var(--gray_9) !important;
  }
}
.message-content.inbox-title-view {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--wt);
  font-size: 16px;
  font-family: inherit;
  box-sizing: border-box;
  text-align: left;
  padding: 15px 20px;
  margin-bottom: 10px;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
body.light .message-content.inbox-title-view {
  background: rgba(255, 255, 255, 0.8) !important;
  color: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(128, 128, 128, 0.4) !important;
}

.category-content-wrapper.category-border {
  padding: 0 16px !important;
}

/* 스포츠 카테고리 이미지 필터 제거 */
.sports-list .category-box ul li .child-box .sports-name .icon img,
.sports-list .sport-category-item .child-box .sports-name .icon img {
  filter: none !important;
}
.sports-list .crypto-right-section .category-box {
  height: 50% !important;
}

/* 모바일에서 크립토 오른쪽 섹션 가로 꽉 채우기 */
@media (max-width: 768px) {
  .sports-list .crypto-right-section {
    width: 100% !important;
    margin-top: 20px;
  }

  .sports-list .crypto-right-section .category-box {
    width: 100% !important;
    min-width: 100% !important;
  }
  .inbox-content {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
.modal-logo-area {
  margin-top: 0;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-logo-area .logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-logo {
  max-width: 200px;
  height: auto;
  opacity: 1;
  transition: opacity 0.3s ease;
  display: block;
  margin: 0 auto;
}

/* 다크모드일 때는 다크모드 로고, 라이트모드일 때는 라이트모드 로고 표시 */
.modal-logo.logo-night {
  display: block;
}
.modal-logo.logo-day {
  display: none;
}
body.light .modal-logo.logo-night {
  display: none;
}
body.light .modal-logo.logo-day {
  display: block;
}
body.light .modal-logo-area {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

/* 매니저 정보 스타일 */
.manager-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 15px;
}

.manager-rank {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.manager-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--wt);
  white-space: nowrap;
}

body.light .manager-name {
  color: var(--wt);
}

/* 인박스 아이템에서 매니저 정보 위치 조정 */
.inbox-item {
  position: relative;
}

/* 날짜 영역 스타일 */
.inbox-date-area {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0px;
}

.inbox-date-area .inbox-date {
  margin: 0;
}

.inbox-item .manager-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  margin-left: 0;
  margin-right: 0;
  position: absolute;
  bottom: 10px;
  left: 15px;
}

/* 모바일에서 매니저 정보 조정 */
@media (max-width: 768px) {
  .inbox-date-area {
    justify-content: space-between;
    gap: 8px;
  }

  .inbox-item .manager-info {
    bottom: 20px;
  }
}

/* 리플리 타이틀 영역 스타일 */
.reply-title-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reply-title-area span {
  font-size: 16px;
  font-weight: 500;
  color: var(--wt);
}

.reply-title-area .manager-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 모바일에서 리플리 타이틀 조정 */
@media (max-width: 768px) {
  .reply-title-area {
    gap: 8px;
  }
}
.category-box .category-box2 .crypto-transfer-section {
  width: 300px !important;
}

/* 인사이트 필터 스크롤바 스타일 */
.filter-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.filter-dropdown-menu::-webkit-scrollbar-track {
  background: #2a2a2a;
  border-radius: 3px;
}

.filter-dropdown-menu::-webkit-scrollbar-thumb {
  background: #6c5dd3;
  border-radius: 3px;
}

.filter-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #8b7de3;
}

/* 라이트 모드에서 스크롤바 스타일 */
body.light .filter-dropdown-menu::-webkit-scrollbar-track {
  background: #f0f0f0;
}

body.light .filter-dropdown-menu::-webkit-scrollbar-thumb {
  background: #6c5dd3;
}

body.light .filter-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #8b7de3;
}

/* Slick 슬라이더 접근성 문제 해결 */
.slick-slide[aria-hidden='true'] a {
  pointer-events: none;
  tabindex: -1;
}
.slick-slide[aria-hidden='true'] a:focus {
  outline: none;
}
body.light .coin-inq ul li .child-box {
  background: rgba(255, 255, 255, 0.6);
}