body {
    /* 폰트 */
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* 모바일에서 특정 요소의 negative margin 등으로 인해 가로 스크롤이 생기는 것 방지 */
html {
    overflow-x: hidden;
}

/* 라이트모드 배경 커스텀 */
/* body {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #fff var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgba(255, 255, 255, 0)  var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
    --tw-text-opacity: 1;
} */

/* 다크모드 배경 커스텀 */
/* body.color_scheme_dark {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #1a1a1a var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(30, 30, 30, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgba(30, 30, 30, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #09090b var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: #1a1a1a var(--tw-gradient-to-position);
    --tw-text-opacity: 1;
} */


.rhymix_content > p > img {margin: 0 auto;} /* 본문내 이미지 중간정렬 */
.rhymix_content img + img,
.rhymix_content p + p > img {
  margin-top: 6px;
}
.rhymix_content > p > video {margin: 0 auto; width: 70%;} /* 본문내 동영상 중간정렬, 너비설정 */

/* PC 스크롤바 색상 커스텀 (Chrome/Edge/Safari) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}
body.color_scheme_dark::-webkit-scrollbar-thumb {
    background-color: #3f3f46;
}
body.color_scheme_dark::-webkit-scrollbar-thumb:hover {
    background-color: #52525b;
}

/* PC 스크롤바 색상 커스텀 (Firefox) */
html {
    scrollbar-color: #c1c1c1 transparent;
}
body.color_scheme_dark {
    scrollbar-color: #3f3f46 transparent;
}

/* 안내창(swal) 텍스트 중앙 정렬 */
.swal-text {
    text-align: center;
}

/* 읽은 게시물 표시 (브라우저 방문 기록 기반) */
.v-list-title:visited {
    color: #94a3b8 !important;
}
body.color_scheme_dark .v-list-title:visited {
    color: #52525b !important;
}

/* 답글 들여쓰기: core.min.css 맨 끝에 depth별로 margin-left(0.8/1.6/2.4rem)가
   설정되어 있는데, margin-left는 박스 폭까지 줄여서 구분선이 끝까지 안 닿는다.
   같은 값을 유지하면서 margin-left만 padding-left로 대체 (박스 폭은 그대로 두고
   내용만 안쪽으로 밀림). #comment ul > li { padding: 15px 0; } 가 id 선택자라
   명시도가 더 높아서 그냥 두면 padding-left가 항상 0으로 덮어써지므로 !important 필요 */
.v-comment-depth1 {
    margin-left: 0;
    padding-left: 0.8rem !important;
}
.v-comment-depth2 {
    margin-left: 0;
    padding-left: 1.6rem !important;
}
li[class*="v-comment-depth"]:not(.v-comment-depth0):not(.v-comment-depth1):not(.v-comment-depth2) {
    margin-left: 0;
    padding-left: 2.4rem !important;
}

/* 답댓글 배경: 일반 background-color는 li 실제 폭 끝까지 안 닿아서,
   구분선(::before)과 똑같이 절대위치(left:0;right:0)로 좌우 끝까지 채운다.
   z-index:0을 li에 줘서 새 쌓임 맥락을 만들어야 ::after의 z-index:-1이
   li 밖(#comment의 흰 배경 등) 뒤로 새지 않고 li 안에서만 뒤로 깔림 */
li[class*="v-comment-depth"]:not(.v-comment-depth0) {
    position: relative;
    z-index: 0;
}
li[class*="v-comment-depth"]:not(.v-comment-depth0)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fbfbfb;
    z-index: -1;
}
body.color_scheme_dark li[class*="v-comment-depth"]:not(.v-comment-depth0)::after {
    background-color: #27272a;
}

/* #comment의 좌우 padding을 없앤 대신, 댓글 내용 쪽에 좌우 여백을 직접 부여.
   px-4/md:px-6는 core.min.css에 컴파일되어 있지 않아 동작하지 않으므로 직접 지정 */
.v-comment-items,
#comment .flex.flex-col.items-center.justify-center.h-32,
#comment nav[aria-label="Pagination"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
@media (min-width: 768px) {
    .v-comment-items,
    #comment .flex.flex-col.items-center.justify-center.h-32,
    #comment nav[aria-label="Pagination"] {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}
#comment-form-container {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}
@media (min-width: 768px) {
    #comment-form-container {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
    }
}