:root {
  /* 기본박스 */
  --box-background-color: rgb(255, 255, 255);

  /* 기본 텍스트 */
  --text-color: #555;

  /* 댓글박스 */
  --comment-background-color: #F4F4F4;

  /* 기본 테두리 */
  --border-color: #99B8BD;

  /* 입력폼 */
  --textbox-background-color: rgb(255, 255, 255);

  /* 포인트컬러 */
  --point-color1: #99B8BD; 
  --point-color2: rgb(255, 255, 255);

  /* 카테고리 컬러 */
  --category-color1: #D5D2CD;
  --category-color2: #F1F0EF;
  --category-background-color: #fff;

  /* 버튼 테두리 굵기 */
  --btn-border-width: 0px;

  /* 기본버튼 */
  --btn-color: #D5D2CD;
  --btn-text-color: #787878;
  --btn-border-color: #F1F0EF;

  /* 기본버튼(마우스오버) */
  --btn-hover-color: #787878;
  --btn-hover-text-color: #D5D2CD;
  --btn-hover-border-color: #cd86ff;

  /* 포인트버튼 */
  --point-btn-color: #ABD4D6;
  --point-btn-text-color: #787878;
  --point-btn-border-color: #ffc561;

  /* 포인트버튼(마우스오버) */
  --point-btn-hover-color: #D5D2CD;
  --point-btn-hover-text-color: #99B8BD;
  --point-btn-hover-border-color: #49d8ff;

  /* 메모 */
  --gradient-color1: rgb(153, 184, 189);
  --gradient-color2: rgb(171, 212, 214);
  --gradient-text-color: #ABD4D6;

  /* 스크롤바 */
  --scroll-color: #ABD4D6;
  --scroll-background-color: transparent;
}

/* 스크롤바 */
html *::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
  background-color: var(--scroll-background-color);
}
html *::-webkit-scrollbar-thumb {
  -webkit-box-shadow: none;
  background-color: var(--scroll-color);
}

/* 마우스 드래그 */
html *::selection {
  background-color: var(--point-color1);
}

/* 기본박스 */
#body .theme-box {
  background: var(--box-background-color);
  color: var(--text-color);
}

/* 인풋박스, 선택박스, 텍스트박스 */
.load-container input:not([type="button"]),
.load-container .form-input,
.load-container textarea,
.load-container .input-comment input,
.load-container .ui-search-box input,
.load-container select {
  background-color: var(--textbox-background-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

/* 링크 */
#body a:not(.highlight, .ui-btn, .pg_page),
#footer a,
#body .load-container #log_list .other-site-link {
  color: var(--point-color1);
}

/* 기타 기본설정 */
#body * {
  outline-color: var(--point-color1);
}
#footer {
  color: var(--text-color);
}
.load-container ::placeholder {
  color: var(--point-color1);
}
.hr {
  border-bottom: 1px solid var(--border-color);
}

/* 카테고리 */
#body #navi-category li {
  background-color: var(--category-background-color);
  border: 1px solid var(--category-color2);
}
#body #navi-category li a {
  color: var(--category-color2);
}
#body #navi-category li a#bo_cate_on {
  color: var(--category-color1);
}

/* 메모 */
.memo-content {
  vertical-align: top;
  padding: 2px 10px 2px 10px;
  border-radius: 1em 0 1em 0;
  color: var(--gradient-text-color);
  background-image: linear-gradient(
    -100deg,
    rgba(var(--gradient-color2), 0.3),
    rgba(var(--gradient-color1), 0.7) 95%,
    rgba(255, 255, 255, 0.8)
  );
  transform: rotate(10deg);
}

/* 일반 버튼 */
#body .ui-btn {
  background-color: var(--btn-color);
  color: var(--btn-text-color);
  border-color: var(--btn-border-color);
  border-width: var(--btn-border-width);
}
#body .ui-btn:hover {
  background-color: var(--btn-hover-color);
  color: var(--btn-hover-text-color);
  border-color: var(--btn-hover-border-color);
}

/* 포인트 버튼 */
#body .ui-btn.point {
  background-color: var(--point-btn-color);
  color: var(--point-btn-text-color);
  border-color: var(--point-btn-border-color);
  border-width: var(--btn-border-width);
}
#body .ui-btn.point:hover {
  background-color: var(--point-btn-hover-color);
  color: var(--point-btn-hover-text-color);
  border-color: var(--point-btn-hover-border-color);
}

/* 강조, 해시태그 */
.load-container .highlight,
#load-log-board #log_list .link_hash_tag {
  background-color: var(--point-color1);
  color: var(--point-color2);
}

/* 로그 박스 */
.load-container #log_list .item {
  color: var(--text-color);
}
.pic-header .ico-category {
  color: var(--category-color1);
}

/* 로그 날짜 */
#load-log-board #log_list .item .item-inner .item-comment {
  color: var(--text-color);
}

/* 댓글란 */
#load-log-board #log_list .item-comment {
  background-color: var(--box-background-color);
}
#load-log-board #log_list .item .item-inner .co-header p,
#load-log-board #log_list .item .item-inner .co-header p a {
  color: var(--text-color);
}
.co-content {
  background-color: var(--comment-background-color);
  color: var(--text-color);
}
.co-content:after {
  border-bottom-color: var(--comment-background-color);
}
.load-container .input-comment textarea {
  border-radius: 5px;
}

/* 댓글 파일첨부 버튼 */
.input-comment .file_box input[type="file"]::file-selector-button {
  background-color: var(--point-color1);
  color: var(--point-color2);
  border: 1px solid var(--border-color);
}

/* 페이지 버튼 */
.load-container .pg_wrap .pg_page.pg_current,
.load-container .pg_wrap .pg_page:hover {
  color: var(--point-color1);
  background-color: var(--point-color2);
  border-color: var(--border-color);
}
.load-container .pg_wrap .pg_page {
  border: 0.1rem solid;
  color: var(--point-color2);
  background-color: var(--point-color1);
  border-color: var(--border-color);
}

/* 프로필 설정 창 */
#profile-config-content {
  border: 1px solid var(--border-color);
}
#profile-config-content input:not([type="button"]),
#profile-config-content select,
#profile-config-content textarea {
  color: var(--text-color);
  background-color: var(--textbox-background-color);
  border: 1px solid var(--border-color);
}
#profile-config-content .guest-icon {
  border-bottom: 1px solid var(--border-color);
}

/* top 버튼 */
body #goto_top {
  bottom: 10px;
  right: 10px;
}
#goto_top img {
  display: none;
}
#goto_top::after {
  content: "▲";
  font-size: 1.5rem;
  background-color: var(--point-color2);
  color: var(--point-color1);
  border: 1px solid var(--point-color1);
  padding: 5px 10px;
  border-radius: 10px;
}