@charset "utf-8";

/* 
    VIVID 커스텀 스타일 1.1.1
    커스텀 스타일 코드는 이 파일에 작성합니다.
*/

/* 댓글 링크로 이동시 상단 Padding */
html {scroll-padding-top: 80px;scroll-behavior:smooth;}
/* 스크롤 커스텀 스타일 */
html::-webkit-scrollbar {width: 10px;}
html::-webkit-scrollbar-track {background-color:transparent;}
html::-webkit-scrollbar-thumb {position: fixed;right: 2px;border: 4px solid rgb(227, 227, 227);background-color: rgb(227, 227, 227);border-radius: 20px;}
html.dark::-webkit-scrollbar-thumb {border: 4px solid #000;background-color: #000;border-radius: 20px;}
html::-webkit-scrollbar-thumb:hover {background-color: rgb(153, 153, 153);}
/* webkit기반 브라우저 다크모드일때 input 타입 date/time 아이콘에 대한 패치 */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16"><g fill="slategray"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/></g></svg>') no-repeat;
}
input[type="time"]::-webkit-calendar-picker-indicator {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16"><g fill="slategray"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"/></g></svg>') no-repeat;
}
body {
    /* background-color: #FFF; /* 라이트모드 배경컬러 */
    /* 폰트 */
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* img {display: unset;} /* 위젯페이지에서 내용직접추가 기능을 사용할때 이미지 정렬이 안되는 문제가 발생시 사용하는 패치 (권장안함) */

/* 상단 로그인 버튼 커스텀 */
/* .vi-btn-primary {background-color: #333; border:none;} /* 버튼 배경색상 */
/* .vi-btn-primary:hover {background-color: #333; border:none;} /* 버튼 오버시 스타일 */

/* 게시판 리스트 타이틀 커스텀 (기본형/웹진형) */
/* .vi-board-title {font-size: 20px;} */

.rhymix_content > p > img {margin: 0 auto;} /* 본문내 이미지 항상 중간정렬 */
.rhymix_content > p > img {border-radius: 12px;} /* 본문내 이미지 모서리 처리 */

/* 본문내 영상 너비 고정 */
/* .rhymix_content video {width: 720px;} */

/* 메뉴 아이콘 커스텀 스타일 예제 */
/*.icon-16-red {font-size: 16px; color: #ff0000;} /* 메뉴아이콘 사이즈 16픽셀 색상 레드 */
/*.icon-16-mr2 {font-size: 16px; margin-right:2px;} /* 메뉴아이콘 사이즈 16픽셀 우측 간격 2px */
.icon-color {color: #059669;}