/* userPopup = 사용자 이름을 누르면 나오는 팝업  */
#article .userPopup {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: start;
    width: max-content;
    word-break: keep-all;
    white-space: nowrap;
    background-color: var(--default-background-color);
    border: 1px solid var(--alpha-10, rgb(0 0 0 / 10%));
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%);
}

#article .userPopup.active {
    display: flex;
}


#article .userPopup li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#article .userPopup li:hover,
#article .userPopup li:active {
    background-color: var(--alpha-10);
}

#article .userPopup a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 6px 8px;
    color: var(--alpha-70);
    background-color: transparent;
    border: 0;
    border-radius: 2px;
}

#article>.category1 {
    width: 100%;
    padding: 16px 16px 6px; /* 1104 수정 */
}

#article>.category1 .back {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    justify-content: flex-start;
    font-size:0.875rem;
    font-weight: 700;
}

#article>.category1 .back a {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    color: var(--default-anchor-color);
    text-decoration: none;
}

#article>.category1 .back a:hover,
 #article>.category1 .back a:active {
    background-color: var(--alpha-5);
}

#article .customHtml {
    display: flex;
    align-items: center;
    justify-content: center;
}

#article>.item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
}

#article>.item>.info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--alpha-5);
}

#article>.item>.info .etc {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    font-size: 0.875rem;
}

#article>.item>.info .etc .left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

#article>.item>.info .etc .userImage {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    background-color: var(--default-background-color);
    background-position: center;
    background-size: cover;
    border: 1px solid var(--alpha-5);
    border-radius: 50%;
}

#article>.item>.info .etc .nickName {
    position: relative;
    display: flex;
    gap: 2px; /* 1104 추가 */
    align-items: center;
    font-weight: 700;
    color: var(--default-anchor-color);
    white-space: nowrap;
    cursor: pointer;
}

#article>.item>.info .etc .author-area,
#article>.item>.info .etc .etc-area {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
}

#article>.item>.info .etc .like-area {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

/* 1004 추가 */
#article .dot {
    font-size: 0.6875rem;
    font-weight: 400; /* 1104 수정 */
    color: var(--alpha-40);
}

/* 여기까지 */

#article>.item>.info .etc .right {
    position: relative;
    padding-top: 4px;
}

#article>.item>.info .etc .right .buttons:hover,
#article>.item>.info .etc .right .buttons:active {
    background-color: var(--alpha-5);
    border-radius: 50%;
}

#article>.item>.info .etc .right .buttons svg {
    cursor: pointer;
    fill: var(--alpha-70);
}

/* 팝업 - 타이틀 영역에 more 버튼 누르면 나오는 그것 */

#article>.item>.info .etc .right .popUp {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 999;
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: center;
    max-height: 416px;
    padding: 4px;
    overflow-y: auto;
    word-break: keep-all;
    white-space: nowrap;
    background-color: var(--default-background-color);
    border: 1px solid var(--alpha-10, rgb(0 0 0 / 10%));
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%);
}

#article>.item>.info .etc .right .popUp form {
    flex-direction: column;
    gap: 2px;
}

#article>.item>.info .etc .right .popUp.active {
    display: flex;
}

#article>.item>.info .etc .right .popUp button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 6px 8px;
    color: var(--alpha-70);
    background-color: transparent;
    border: 0;
    border-radius: 2px;
}

#article>.item>.info .etc .right .popUp li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#article>.item>.info .etc .right .popUp li.ban button {
    color: var(--warning-color);
}

#article>.item>.info .etc .right .popUp button svg {
    fill: var(--alpha-70);
}

#article>.item>.info .etc .right .popUp button svg,
#article>.item>.info .etc .right .popUp button img {
    margin-right: 4px;
}

#article>.item>.info .etc .right .popUp button:hover,
#article>.item>.info .etc .right .popUp button:active {
    background-color: var(--alpha-5);
}

/* 사용하지 않지만 기존에 있는 요소
#article>.item>.info .etc .right .popUp li input {
    height: 25px;
    padding: 0;
    text-align: center;
}
*/

#article>.item>.info .titleContainer {
    display: flex;
    flex-direction: column;
    gap: 6px; /* 1104 수정 */
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

#article>.item>.info h1 {
    width: 100%;
    font-size: 1.125rem;
    line-height: 1.6rem; /* 1104 추가 */
    color: var(--default-font-color);
    word-break: break-all;
}

#article>.item>.info .category-area {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
    width: 100%;
}

#article>.item>.links {
    color: var(--alpha-40);
}

#article>.item>.links .link {
    display: flex;
    flex-wrap: wrap;
}

#article>.item>.files {
    color: var(--alpha-40);
}

#article>.item>.links a,
#article>.item>.files a {
    font-size: 0.9125rem;
    color: var(--point-background-color);
    text-decoration: underline;
}

#article>.item>.links a:hover,
#article>.item>.links a:active,
#article>.item>.files a:hover,
#article>.item>.files a:active {
    text-decoration: underline;
}

#article>.item>.customField {
    font-size: 0.9125rem;
    color: var(--alpha-40);
}

#article>.item>.customField>a {
    color: var(--point-background-color);
    text-decoration: underline;
    word-break: break-word;
}

/* 본문 영역 디자인 변경 없으며 프리텐다드 적용하지 않음 */
#article>.item>.content {
    font-family: var(--font-family-content);
    color: var(--default-font-color);
}

#article>.item>.content img {
    cursor: pointer;
}

#article>.item>.content .media {
    display: flex;
    /* justify-content: center; */
    margin-top: 20px;
    margin-bottom: 20px;
}

#article>.item>.content li {
    line-height: 1.5rem;
}

/* 본문영역 끝 */

/* 이전글 목록 다음글 버튼 */
#article>.item .listAndEdit {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

#article>.item .listAndEdit>div {
    display: flex;
    flex: 1;
    gap: 10px;
}

#article>.item .listAndEdit .left .button {
    justify-content: start;
}

#article>.item .listAndEdit .center .button {
    justify-content: center;
}

#article>.item .listAndEdit .right .button {
    justify-content: right;
}

/* 침하하 침흑흑 스크랩 버튼 영역 */
#article>.item .likeContainer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

#article>.item .likeContainer .like-area {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

#article>.item .likeContainer .like-area button {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 12px 16px 16px; /* 1104 수정 */
    font-size: 0.8125rem; /* 1104 수정 */
    font-weight: 700;
    color: var(--default-anchor-color);
    word-break: keep-all;
    cursor: pointer;
    background-color: var(--alpha-5);
    border: 0;
    border-radius: 50vw;
}

#article>.item .scrap-area button {
    cursor: pointer;
}

/* 침하하 온오프 다르게 애니메이션 - 1104 수정 */
#article>.item .likeContainer .like-area button.like.activated img,
#article>.item .likeContainer .like-area button.like:hover img {
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    animation: haha 0.5s linear;
}

@keyframes haha {
    0% {
        transform: rotate(0deg);
        transform-origin: 50% 50%;
    }

    30% {
        transform: rotate(45deg);
        transform-origin: 50% 50%;
    }

    40% {
        transform: rotate(0deg);
        transform-origin: 50% 50%;
    }

    60% {
        transform: rotate(-45deg);
        transform-origin: 50% 50%;
    }

    90% {
        transform: rotate(0deg);
        transform-origin: 50% 50%;
    }

    100% {
        transform: rotate(-45deg);
        transform-origin: 50% 50%;
    }
}

button#disabledLike,
 button#disabledDisLike {
    color: var(--alpha-20) !important;
    background-color: var(--default-background-color) !important;
    border: var(--alpha-5) 1px solid !important;
}

button#disabledLike img,
button#disabledDisLike img {
    opacity: 0.3;
}

button.like-full,
button.dislike-full {
    color: var(--point-color) !important;
    background: var(--point-background-color-10, rgb(28 168 175 / 10%)) !important;
}

#article>.item .likeContainer .like-area button:hover,
#article>.item .likeContainer .like-area button:active {
    background-color: var(--alpha-10);
}

#article>.item .likeContainer .like-area button.activated:hover,
#article>.item .likeContainer .like-area button.activated:active {
    background-color: var(--point-background-color-20) !important;
}

#article>.item .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
    font-size: 0.9125rem;
    color: var(--alpha-40);
    word-break: break-word;
}

#article>.item .tag {
    display: flex;
    font-family: var(--font-family-content);
}

/* 댓글 하단 목록 버튼 */

#article .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* share 도 사용하지 않지만 어딘가 들어가야 할것으로 추정
#modal .share {
    display: none;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

#modal .container.active {
    display: grid;
}

#modal .share a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#modal .share .shareItem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-color: var(--alpha-30);
    border-radius: 100%;
}

#modal .share .facebook {
    background-color: var(--facebook-color);
}

#modal .share .twitter {
    background-color: var(--twitter-color);
}

#modal .share .naver {
    background-color: var(--naver-color);
}

#modal .share .kakaoTalk,
#modal .share .kakaoStory {
    color: var(--default-font-color);
    background-color: var(--kakao-color);
}

#modal .share .tumblr {
    background-color: var(--tumblr-color);
}

#modal .share .pinterest {
    background-color: var(--pinterest-color);
}

#modal .share img {
    width: 20px;
    height: 20px;
}

*/

@media only screen and (max-width: 1199px) {
    #article {
        box-sizing: border-box;
    }

    #article>.item .commentsNotice {
        text-align: center !important;
    }

    /* 1104 추가 */
    #article>.item>.content,
 #article>.item>.files,
 #article>.item>.links,
 #article>.item .tags {
        font-size: 0.9125rem;
    }

    /* 여기까지 */
}

.bottomBoardListHeader {
    width: 100%;
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
}

@media only screen and (min-width: 1200px) {
    /* 1104 추가 */
    #article>.category1 {
        padding: 16px 16px 12px;
    }

    #article>.item>.info .titleContainer {
        flex-direction: row;
    }

    #article>.item>.info h1 {
        width: fit-content;
        font-size: 1.3125rem;
        word-break: keep-all;
        white-space: nowrap;
    }

    #article>.item>.info .category-area {
        width: fit-content;
    }

    #article>.item>.info {
        padding-bottom: 24px;
    }

    #article .viewCount,
 #article .datetime,
 #article .dot {
        font-size: 0.8125rem;
        font-weight: 400; /* 1104 수정 */
    }
}

/* Default styles for screens less than 768px */
.voteJoinContainer {
    width: 95%;
    margin: 0 auto;
  }

  /* Styles for screens 768px and above */

  /* @media only screen and (min-width: 768px) {
    .voteJoinContainer {
      width: 60%;
      margin: 0 auto;
    }
  } */

  .voteJoinContent {
    padding: 15px;
    margin-bottom: 10px;
    background-color: var(--alpha-5);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  }

  .voteJoinHeader {
    display: flex;
    align-items: center; /* 중앙 수직 정렬 */
    justify-content: space-between; /* 양쪽 끝에 요소 배치 */
    width: 100%; /* 전체 너비 사용 */
    font-size: 11px;
  }

  .voteJoinUser {
    display: flex;
    align-items: center;
  }

  .userAvatar {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 50%;
  }

  .voteJoinTitle {
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    font-size: 16px;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .voteJoinVoteOptions {
    margin-top: 10px;
  }

  .voteJoinOption {
    position: relative;
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    align-items: center;
    min-height: 35px;
    padding: 0;
    margin: 5px 0;
    cursor: pointer;
    background-color: var(--alpha-5);
    border-radius: 10px;
  }


  /* .voteJoinOption label {
    padding: 12px;
  } */

  .optionDesc {
    min-width: 0;   /* Allow shrinking */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .voteJoinOption input {
    display: none;
  }

/* Change the label structure */
.voteJoinOption label {
    display: flex;
    flex: 1;        /* Take available space but allow shrinking */
    align-items: center;
    min-width: 0;   /* Allow the label to shrink below content size */
    padding: 12px;
    margin-right: 10px;
    cursor: pointer;
  }

  .voteJoinOption span {
    /* flex-grow: 1; */
  }

  .voteJoinOption:hover {

  }

  .voteJoinOption:has(input:checked) {
    background-color: var(--point-background-color-80);
  }

  .voteJoinOption input {
    display: none; /* 기본 라디오 버튼 숨김 */
  }

  .large-button {
    padding: 5px; /* 여백 */
    font-size: 1.5rem; /* 크기 조절 */
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 10px;
    transition: background 0.3s ease-in-out; /* 부드러운 애니메이션 */
  }

  .large-button:hover {
    background: rgb(0 0 0 / 20%); /* 연한 회색 배경 */
  }

  .voteButtonContainer {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
  }

  /* 체크박스 또는 라디오 버튼이 비활성화된 경우 텍스트 색상 변경 */

  /* input:disabled + .optionDesc {
    color: #999;
  } */

  progress {
    position:absolute;
    left: 0; /* Ensures it starts from the left */

    /* z-index: 0; */
    z-index: 0;
    width: 100%;
    height: 100%;

    /* margin-top: 10px; */
    overflow: hidden;
    pointer-events: none;
    background-color:  var(--alpha-0);
    border-radius: 10px;
  }

  /* For WebKit browsers */
  progress::-webkit-progress-bar {
    background-color:  var(--alpha-0);
  }

  progress::-webkit-progress-value {
    background-color: var(--point-background-color-30);
  }

  .progress-bar-from-left::-webkit-progress-value {
    /* background-color: #F99; */
    background-color: var(--red-background-color-60);
  }

  .progress-bar-from-left-hide::-webkit-progress-value {
    background-color: #F99;

    /* background-color: var(--red-background-color-60); */
  }

  .progress-bar-from-right::-webkit-progress-value {
    /* background-color: #96DCF8; */
    background-color: var(--sky-background-color-60);
  }

  .progress-bar-from-right-hide::-webkit-progress-value {
    background-color: #96DCF8;

    /* background-color: var(--sky-background-color-60); */
  }

  .optionCount {
    flex-shrink: 0;  /* Prevent the count from shrinking */
    margin-right: 5px;
    font-size: 0.8rem;
    text-align: right;
    white-space: nowrap;
    z-index: 1;
  }

  .voteJoinVoteShowdownOptions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%; /* voteJoinContainer 내에서의 비율 조정 */
    padding: 20px 0;
    margin: 0 auto; /* 중앙 정렬 */
}

.voteJoinShowdownView {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35%;
    height: 100%;
    overflow: hidden; /* 이미지가 영역을 벗어나지 않도록 */
}

.voteJoinShowdownView label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    /* height: 100%; */
}

.showdownOptionImage {
    width: 100%;
    max-width: 100%; /* 부모 요소를 벗어나지 않도록 제한 */
    height: 100%;
    max-height: 300px; /* 부모 요소를 벗어나지 않도록 제한 */
    padding: 5px;
    cursor: pointer;
    background-color: var(--alpha-5);
    border-radius: 10px;
    object-fit: contain; /* 이미지 비율 유지하면서 컨테이너에 맞춤 */
}

.vs {
    flex-shrink: 0;
    padding: 0 15px;
    font-size: 24px;
    font-weight: bold;
}

.showdownOptionImage.leftCloseResult {
    background-color: var(--red-background-color-60);
    border: 5px var(--red-background-color-60);
}

.showdownOptionImage.rightCloseResult {
    background-color: var(--sky-background-color-60);
    border: 5px var(--sky-background-color-60);
}

.showdownOptionImage.leftOpenResult {
    background-color: var(--red-background-color-60);
    border: 5px var(--red-background-color-60);
}

.showdownOptionImage.rightOpenResult {
    background-color: var(--sky-background-color-60);
    border: 5px var(--sky-background-color-60);
}

/* 모바일 화면에서도 적절한 크기 유지 */

@media screen and (max-width: 1199px) {
    .voteJoinShowdownView {
        min-width: 200px;
    }

    .showdownOptionImage {
        min-height: 200px;
    }
}

@media screen and (max-width: 768px) {
    .voteJoinShowdownView {
        min-width: 150px;
    }

    .showdownOptionImage {
        min-height: 150px;
    }
}

@media screen and (max-width: 425px) {
    .voteJoinShowdownView {
        min-width: 120px;
    }

    .showdownOptionImage {
        min-height: 120px;
    }
}

/* 모바일 화면에서도 적절한 크기 유지 */
@media screen and (max-width: 375px) {
    .voteJoinShowdownView {
        min-width: 100px;
    }

    .showdownOptionImage {
        min-height: 100px;
    }
}

/* 모바일 화면에서도 적절한 크기 유지 */
@media screen and (max-width: 320px) {
    .voteJoinShowdownView {
        min-width: 80px;
    }

    .showdownOptionImage {
        min-height: 80px;
    }
}

@media screen and (min-width: 1200px) {
    .voteJoinShowdownView {
        min-width: 250px;
    }

    .showdownOptionImage {
        min-height: 250px;
    }

    .showdownOptionImage.leftCloseResult {
        border: 5px var(--point-background-color-0) solid;
    }

    .showdownOptionImage.rightCloseResult {
        border: 5px var(--blue-background-color-0) solid;
    }

    .showdownOptionImage.leftOpenResult {
        border: 5px var(--point-background-color-0) solid;
    }

    .showdownOptionImage.rightOpenResult {
        border: 5px var(--blue-background-color-0) solid;
    }

    .voteJoinInfo {
        font-size: 13px;
    }

    .showdownResult span {
        font-size: 15px !important;
    }

    .voteJoinTitle,
 .voteShowdownTitle{
        font-size: 20px !important;
    }

    .voteJoinVoteShowdownOptions {
        position: relative;
        width: 100%;
        max-width: 1200px;
        height: 40vh;
        max-height: 500px;
        padding: 0;
        margin: 15px auto;
    }

    .voteJoinShowdownView {
        position: absolute;
        width: 25%;
        min-width: 250px;
        margin: 0 !important;
        transform: translateX(-50%);
    }

    .voteJoinShowdownView:first-of-type {
        left: 25%; /* 왼쪽에서 25% 지점 */
    }

    .voteJoinShowdownView:last-of-type {
        left: 75%; /* 왼쪽에서 75% 지점 */
    }

    .showdownOptionImage {
        width: 100%;
        height: 100%;
        min-height: 250px;
        padding: 0;

        /* object-fit: cover; */
    }

    .vs {
        position: absolute;
        left: 50%;
        z-index: 1;
        transform: translateX(-50%);
    }
}

.voteJoinShowdownDesc {
    position: relative;
    display: flex;
    align-items: center;
    align-items: stretch; /* Make items stretch to fill container height */
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

.voteJoinShowdownDesc.resultOpen {
    gap: 0;
}

label[radiolabel] {
    display: flex;
    flex: 1; /* Ensure both labels take equal space */
    align-items: center;
    justify-content: center;
    width: 50%; /* Each label takes up half the available space */
    text-align: center;
    cursor: pointer;
}

/* Hide the radio button but keep it functional */
label[radiolabel] input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Make showdownOptionDesc fully take up space */
.showdownOptionDesc {
  box-sizing: border-box; /* Include padding in the height calculation */
    display: box;
    width: 100%; /* Ensures it fully occupies the label */
  height: 100%; /* This ensures both labels have the same height */
    padding: 10px;
    overflow: hidden;
    font-size: 15px;
    text-align: center;
    text-overflow: ellipsis;

    /* white-space: nowrap; */
    cursor: pointer;
    background-color: var(--alpha-5);
    border-radius: 10px; /* Default rounded corners */
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  -webkit-box-orient: vertical;
}

/* Properly remove border radius for left and right buttons */
.showdownOptionDesc.left {
    background-color: var(--alpha-5);
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.showdownOptionDesc.right {
    background-color: var(--alpha-5);
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* .voteJoinShowdownDesc.resultOpen .showdownOptionDesc {
    background-color: var(--alpha-0) !important;
} */


/* Highlight when selected */

/* label[radiolabel] input[type="radio"]:checked + .showdownOptionDesc.left {
    background-color: #F99;
}

label[radiolabel] input[type="radio"]:checked + .showdownOptionDesc.right {
    background-color: #96DCF8;
} */

 /* Highlight when selected, but NOT when inside .resultOpen */

/* .voteJoinShowdownDesc:not(.resultOpen) label[radiolabel] input[type="radio"]:checked + .showdownOptionDesc.left {
    background-color: #F99;
}

.voteJoinShowdownDesc:not(.resultOpen) label[radiolabel] input[type="radio"]:checked + .showdownOptionDesc.right {
    background-color: #96DCF8;
} */

/* Reverse progress direction */
.rtl-progress {
    right:0;
    direction: rtl; /* Makes progress start from the right */
    background-color: var(--alpha-0);
}

.showdownResult {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Push spans to opposite ends */
    width: 99%; /* Make it take up 80% of the parent */
    margin: 0 auto; /* Center it horizontally */
}


.showdownResult span {
    font-size: 12px;

    /* font-weight: bold; */
}

.voteShowdownTitle {
    margin-top: 20px;

    /* margin-bottom: 20px; */
    overflow: hidden;
    font-size: 16px;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

   /* Firefox의 프로그레스 바 스타일링 */
  progress::-moz-progress-bar {
    background-color: transparent;
  }

  .voteJoinOption progress::-moz-progress-bar {
    background-color: var(--point-background-color-30) !important;
  }

  .progress-bar-from-left::-moz-progress-bar {
    background-color: var(--red-background-color-60);
  }

  .progress-bar-from-right::-moz-progress-bar {
    background-color: var(--sky-background-color-60);
  }

  .progress-bar-from-left-hide::-moz-progress-bar {
    background-color: var(--red-background-color);
  }

  .progress-bar-from-right-hide::-moz-progress-bar {
    background-color: var(--sky-background-color);
  }

  /* Firefox의 빈 프로그레스 바 영역 스타일링 */
  progress {
    appearance: none !important;
    -moz-appearance: none !important;
    border: none !important;
    background: transparent !important;
  }

  #slot-1, #slot-2, #slot-3, #slot-6, #slot-6-1 {
    max-height: 250px;
  }

  #slot-5 {
    max-height: 100px;
    min-height: 70px;
  }

  #slot-4, #slot-4-1 {
    max-height: 90px;
  }

  #slot-1, #slot-4, #slot-5 {
    margin-top: 15px;
  }

  .view_og_container {
  width: 100%;
  /* max-width: 600px; */
  margin: 12px 0;
  display: flex;
  /* font-family: 'Noto Sans KR', sans-serif; */
}

.view_og_div {
  display: flex;
  background-color: var(--alpha-5);
  /* border: 1px solid #ddd; */
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.view_og_div:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.view_og_col1 {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
}

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

.view_og_col2 {
  flex-grow: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.view_og_title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
  /* color: #111; */
  color: var(--point-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view_og_url {
  font-size: 12px;
  color: var(--alpha-40);
  margin-bottom: 4px;
}

.view_og_description {
  font-size: 14px;
  /* color: #444; */
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 두 줄로 제한 */
  -webkit-box-orient: vertical;
}

@media (max-width: 480px) {
  .view_og_div {
    flex-direction: column;
  }

  .view_og_col1 {
    width: 100%;
    height: 180px;
  }

  .view_og_col2 {
    padding: 10px;
  }
}

.view_og_container a,
.view_og_container a * {
  text-decoration: none !important;
}

.view_og_container a:hover .view_og_title {
  text-decoration: underline;
}

/* underline 문제 해결을 위한 추가 CSS */
.view_og_container,
.view_og_container * {
  text-decoration: none !important;
}

.view_og_container a,
.view_og_container a:link,
.view_og_container a:visited,
.view_og_container a:hover,
.view_og_container a:active {
  text-decoration: none !important;
}

.view_og_container .view_og_title {
  text-decoration: none !important;
}

/* 호버 시 밑줄 효과는 유지하되, 기본 밑줄 제거 */
.view_og_container a:hover .view_og_title {
  text-decoration: underline !important;
}

/* 모든 자식 요소에 대해서도 text-decoration 제거 */
.view_og_container a * {
  text-decoration: inherit !important;
}

/* 제목 링크 스타일 */
.view_og_container .view_og_a {
  text-decoration: none !important;
}

.view_og_container .view_og_a:hover {
  text-decoration: none !important;
}

.view_og_container .view_og_a .view_og_title {
  text-decoration: none !important;
  transition: text-decoration 0.2s ease;
}

.view_og_container .view_og_a:hover .view_og_title {
  text-decoration: underline !important;
}

/* 전체 카드 호버 효과는 유지 */
.view_og_div {
  cursor: pointer;
}

.view_og_container img {
    height : 100% !important;
}

.og_close_btn:hover {
  background-color: var(--point-color) !important; /* 밝은 회색 배경 */
  border-radius: 4px;
}

.view_og_div.box_shadow_3 {
    position: relative;
}

.og-align-center {
    justify-content: center;
}

.og-align-right {
    justify-content: flex-end;
}

.og_close_btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--point-background-color-40);
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--default-font-color);
    border-radius: 4px;
}

    #slot-1, #slot-3, #slot-4, #slot-4-1 {
        min-height : 90px;
    }

    #slot-2 {
        min-height: 250px;
    }

    #slot-6, #slot-6-1 {
        min-height: 250px;
    }

@media screen and (max-width: 1199px) {
    #slot-6 {
        margin-bottom : 15px;
    }
}