/* **** common css **** */
input,
textarea {
  color: var(--sub-text-color);
  border: none;
  outline: 0;
}

input[type="submit"] {
  padding: 5px 10px;
  background: none;
}

input::placeholder {
  font-style: italic;
  color: var(--sub-text-color);
}

a {
  color: var(--main-color);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--hover-text-color);
}

*::selection {
  color: var(--select-color);
  background-color: var(--select-bg-color);
}

img::before {
  width: 0;
  height: 0;
  margin: 9999px;
  background: url("./images/image-error.svg") no-repeat center;
  content: "";
}

body {
  height: auto;
  overflow-x: hidden;

  /* font-size: var(--font-size); */
  -webkit-font-smoothing: antialiased;
  color: var(--main-color);
}

*::-webkit-scrollbar {
  width: 18px;
}

*::-webkit-scrollbar-track {
  background: white;
}

*::-webkit-scrollbar-thumb {
  background: var(--main-color);
  border: 7px white solid;
  border-radius: 100px;
  background-clip: padding-box;
}

/* **** common css end **** */

/* **** layout **** */
.wrapper {
  position: relative;
  display: flex;
  width: 900px;
  height: 100%;
  margin: 50px auto;
  justify-content: center;
}

.content-wrap {
  width: calc(100% - 315px);
}

/* **** layout end **** */

/* **** loader **** */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.loader-wrapper::after {
  position: absolute;
  z-index: -1;
  display: block;
  inset: 0;
  background-color: var(--button-bg-color);
  content: "";
  opacity: 0.5;
}

.loader-wrapper img {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
}

/* **** loader  end **** */

/* **** header user card **** */
.user-card-wrap {
  position: relative;
  z-index: 10;
  width: 300px;
  height: max-content;
  overflow: hidden;
  margin-right: 15px;
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.user-main {
  position: relative;
  width: 100%;
}

.user-info {
  position: absolute;
  bottom: -50px;
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: end;
  justify-content: center;
}

.user-intro {
  display: flex;
  width: 30%;
  height: 20px;
  margin: 0 0 20px 10px;
  align-items: center;
  background-color: var(--light-main-color);
  border-radius: 5px;
  box-shadow: var(--main-color) 0 0 3px;
}

.user-intro .intro-content {
  display: -webkit-box;
  width: 100%;
  padding: 0 5px;
  overflow: hidden;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-l);
  color: var(--dark-main-color);
  text-align: center;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.user-thumb {
  width: 85px;
  height: 85px;
}

.user-thumb img {
  width: 100%;
  height: 100%;
  border: 8px solid var(--bg-color);
  border-radius: 50px;
  outline: 1px solid var(--main-color);
  object-fit: cover;
}

.search-bar {
  width: 30%;
}

.user-bg {
  width: 100%;
  border-bottom: 1px solid var(--main-color);
}

.user-title {
  position: absolute;
  display: flex;
  width: 150px;
  height: 35px;
  overflow: hidden;
  background-color: var(--main-color);
  border-radius: 0 0 60px;
  align-items: center;
  justify-content: center;
}

.user-title .title-content {
  display: -webkit-box;
  width: 100%;
  padding: 0 20px;
  overflow: hidden;
  font-size: var(--font-size-s);
  color: var(--bg-color);
  text-align: center;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.user-bg img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* *** search bar *** */
.search-bar {
  display: flex;
  height: 20px;
  margin: 0 10px 20px 0;
  overflow: hidden;
  background-color: var(--button-bg-color);
  border-radius: 5px;
  box-shadow: var(--main-color) 0 0 3px;
  transition: all 0.5s ease 0s;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
}

.search-bar .search-icon {
  display: flex;
  height: 100%;
  padding-right: 4px;
  justify-content: center;
  align-items: center;
}

.search-bar input {
  width: 100%;
  height: 100%;
  padding-left: 4px;
  font-family: Unbounded, "Noto Sans SC", Pretendard, sans-serif, serif;
  font-size: var(--font-size-xs);
  color: var(--dark-main-color);
  background-color: var(--button-bg-color);
}

.search-bar input::placeholder {
  color: var(--sub-text-color);
}

.search-bar .search-icon .fa-magnifying-glass {
  font-size: var(--font-size-s);
  color: var(--main-color);
}

/* *** search bar end *** */

/* *** nav bar *** */
.nav-bar {
  display: flex;
  width: 65%;
  margin: 90px auto 0;
  justify-content: center;
  gap: 5px;
}

.nav-bar .nav-item {
  display: flex;
  width: 100%;
  height: 25px;
  background-color: var(--main-color);
  border-radius: 5px;
  transition: var(--transition);
}

.nav-bar .nav-item a {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--bg-color);
}

.nav-bar .nav-item:hover {
  background-color: var(--light-main-color);
}

.nav-bar .nav-item:hover a {
  color: var(--main-color);
}

/* *** nav bar end *** */

/* *** cate wrap *** */
.cate-wrap {
  display: flex;
  width: 100%;
  margin: 10px 0 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cate-click {
  display: flex;
  width: 65%;
  height: 25px;
  overflow: hidden;
  padding: 0 10px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  background-color: var(--button-bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.cate-title,
.cate-icon {
  width: 100%;
}

.cate-icon {
  flex: 1;
  transition: var(--transition);
}

.cate-click.active .cate-icon {
  transform: rotate(180deg);
}

.cate-list {
  display: none;
  width: 65%;
  height: max-content;
  margin-top: 5px;
  background-color: var(--button-bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

/* ** tt category ** */
.tt_category {
  padding: 10px;
  overflow: hidden;
}

.tt_category .link_tit {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-db);
}

.tt_category .link_tit > span {
  font-size: var(--font-size-s);
}

.category_list .link_item {
  display: block;
  padding-left: 5px;
  height: 100%;
  margin: 10px 0 5px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-db);
}

.category_list .sub_category_list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 10px;
  font-size: calc(var(--font-size-xs) - 1px);
  font-weight: var(--font-weight);
}

.sub_category_list .link_sub_item::before {
  content: " - ";
}

/* ** tt category end ** */

/* *** cate wrap end *** */

/* *** sns bar *** */
.sns-bar {
  display: flex;
  width: 100%;
  height: 20px;
  background-color: var(--main-color);
  align-items: center;
  justify-content: center;
}

.sns-item {
  display: flex;
  width: 20px;
  height: 20px;
  font-size: var(--font-size-xs);
  color: var(--bg-color);
  align-items: center;
  justify-content: center;
}

.sns-item .sns-icon {
  font-size: var(--font-size-xs);
  color: var(--bg-color);
}

/* *** sns bar end *** */

/* **** header user card end **** */

/* **** s_cover_group **** */
.cover-wrap {
  display: grid;
  padding: 15px;
  gap: 15px;
  grid-template-columns: repeat(2, 1fr);
  background-color: var(--button-bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.cover-box {
  display: grid;
  height: 260px;
  overflow: hidden;
  grid-template-rows: 10% 90%;
  border: 2px solid var(--main-color);
  border-radius: 5px;
}

.cover-title {
  display: flex;
  z-index: 1;
  width: 100%;
  padding: 4px 20px;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-db);
  color: var(--main-color);
  background-color: var(--bg-color);
  border-bottom: 2px solid var(--main-color);
  border-radius: 5px 5px 0 0;
}

/* *** cover notice *** */
.cover-notice .cover-item {
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow: hidden;
}

.cover-notice .cover-content {
  display: flex;
  height: 100%;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: var(--light-main-color);
  border-radius: 5px;
}

.cover-notice .cover-content .cover-sum {
  height: 70%;
  line-height: 30px;
  text-align: center;
}

.cover-notice .cover-content svg {
  width: 55px;
  height: 55px;
  padding-top: 15px;
}

/* *** cover notcie end *** */

/* *** cover post thumb *** */
.cover-post-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cover-post-thumb .cover-item {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: var(--transition);
}

.cover-thumb {
  width: 100%;
  height: 150px;
}

.cover-item .cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--button-bg-color);
}

.cover-post-thumb .cover-item .cover-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.cover-post-thumb .cover-item:hover .cover-thumb {
  filter: blur(1px) brightness(90%);
  transform: scale(1.1);
}

.cover-post-thumb .post-list {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: var(--main-color);
}

.cover-post-thumb .cover-item .cover-item-info {
  position: absolute;
  top: 0;
  z-index: 20;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 12px;
  font-weight: 500;
  color: var(--bg-color);
  text-align: center;
  text-shadow: var(--dark-main-color) 0 0 3px;
  opacity: 0;
  visibility: hidden;
  align-items: center;
  transition: var(--transition);
}

.cover-post-thumb .cover-item:hover .cover-item-info {
  opacity: 1;
  visibility: visible;
}

.cover-post-thumb .cover-item-title {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  font-size: 12px;
  word-break: break-all;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* *** cover post thumb end *** */

/* *** cover post list *** */
.cover-post-list .post-list {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  background-color: var(--bg-color);
  border-radius: 0 0 5px 5px;
}

.cover-post-list .cover-item {
  height: 100%;
  border-radius: 5px;
}

.cover-post-list .cover-item-info {
  display: flex;
  height: 100%;
  padding: 5px 10px;
  font-size: calc(var(--font-size-s) - 1px);
  align-items: center;
  justify-content: center;
  color: var(--bg-color);
  background-color: var(--main-color);
  border-radius: 5px;
  transition: var(--transition);
}

.cover-post-list .cover-item:hover .cover-item-info {
  color: var(--main-color);
  background-color: var(--light-main-color);
}

.cover-post-list .cover-item-title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* *** cover post list end *** */

/* **** s_cover_group end **** */

/* **** s_list **** */
.post-list .article-content {
  display: none !important;
}

.list-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* *** post header *** */
.post-header {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-db);
  text-align: center;
  justify-content: start;
  text-decoration: underline;
}

.post-header .list-cat-info {
  width: 100%;
  padding: 3px 5px;
  align-items: baseline;
  flex-shrink: 0;
  background-color: var(--button-bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.post-header .list-cat-info::before {
  font-family: remixicon;
  content: "\F40A";
}

/* *** post header end *** */

/* *** list arrange *** */
.post-list .list .list-thumbnail,
.post-list .list .list-summary {
  display: none;
}

.post-list .list .list-info {
  width: 100%;
  height: auto;
  padding: 10px;
  margin-top: 6px;
  color: var(--bg-color);
  background-color: var(--main-color);
  border: solid 1px var(--main-color);
  border-radius: 5px;
  transition: var(--transition);
}

.post-list .list .list-info:hover {
  color: var(--hover-text-color);
  background-color: var(--button-bg-color);
}

.post-list .list .list-info:nth-child(1) {
  margin-top: 10px;
}

.post-list .list .title-content {
  font-size: var(--font-size);
  font-weight: var(--font-weight-m);
}

.post-list .list .list-date {
  display: flex;
  font-size: var(--font-size-xs);
}

.post-list .list .list-sub-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.post-list .list .list-entry i {
  display: flex;
  align-items: center;
}

/* *** list arrange end *** */

/* *** thumb arrange *** */
.post-list .thumb .list-summary {
  width: 100%;
  overflow: hidden;
  font-family: pretendard;
  color: var(--bg-color);
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  transition: var(--transition);
  -webkit-line-clamp: 3;
}

.post-list .thumb {
  position: relative;
}

.post-list .thumb .list-info {
  position: absolute;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 20px;
  overflow: hidden;
  font-weight: var(--font-weight-b);
  text-shadow: rgb(0 0 0) 0 0 3px;
  background: linear-gradient(0deg, #333 0%, transparent 100%);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  justify-content: end;
  align-items: center;
}

.post-list .thumb .list-item:hover .list-info {
  opacity: 1;
  visibility: visible;
}

.post-list .thumb .list-title {
  display: flex;
  justify-content: left;
  width: 100%;
  margin: 5px;
  color: var(--bg-color);
  text-overflow: ellipsis;
}

.post-list .thumb .list-title .title-content {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--font-size);
  font-weight: var(--font-weight-db);
  word-break: break-all;
  overflow-wrap: break-word;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.post-list .thumb .list-sub-info {
  display: flex;
  width: 100%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-m);
  color: var(--sub-text-color);
  justify-content: left;
}

.post-list .thumb .list-entry {
  display: none;
}

.post-list .thumb .list-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.post-list .thumb .list-item {
  position: relative;
  padding: 0;
  overflow: hidden;
  background-color: var(--button-bg-color);
  border: 1px solid var(--main-color);
  border-radius: 3px;
  opacity: 0.99;
  aspect-ratio: 1 / 1;
}

.post-list .thumb .list-item .list-thumbnail {
  width: 100%;
  height: 100%;
  transition: var(--transition);
}

.post-list .thumb .list-item:not(.list-protected) .list-thumbnail::after,
.cover-thumb::after {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: var(--main-color);
  background-image: none;
  /* stylelint-disable */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M854.22 110.797H164.148c-72.499 0-131.174 58.777-131.174 131.174V748.75c0 72.499 58.777 131.174 131.174 131.174h690.074c72.499 0 131.174-58.777 131.174-131.174V241.97c0-72.397-58.675-131.174-131.174-131.174zm-552.55 168.14c36.864 0 66.765 29.901 66.765 66.765s-29.9 66.765-66.765 66.765-66.764-29.9-66.764-66.765 29.9-66.764 66.764-66.764zm617.575 359.22c-8.602 6.656-20.992 4.915-27.546-3.687L744.55 440.115c-.41-.614-41.472-53.248-91.34-48.23-40.55 4.608-80.384 47.82-115.2 125.03-36.864 82.023-73.012 124.826-113.664 134.861-46.08 11.162-85.812-20.07-127.898-53.35l-5.325-4.199c-49.254-38.605-72.806-29.798-167.629 63.079-3.788 3.788-8.806 5.632-13.721 5.632-5.12 0-10.24-1.946-14.029-5.94-7.578-7.782-7.475-20.275.307-27.852 86.119-84.378 138.752-129.127 219.341-65.844l5.427 4.199c35.943 28.365 66.97 52.838 94.208 46.08 27.136-6.656 56.423-44.544 87.143-112.743 41.472-92.057 90.828-141.926 146.944-148.07 72.192-7.68 124.723 60.723 126.873 63.693l146.944 194.15c6.554 8.704 4.915 20.992-3.686 27.546z'/%3E%3C/svg%3E");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 30px 30px;
  /* stylelint-enable */
  content: "";
  transition: var(--transition);
}

.post-list .thumb .list-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-out 0s;
  object-fit: cover;
}

.post-list .thumb .list-item:hover .list-thumbnail {
  filter: brightness(0.9) blur(1px);
  transform: scale(1.1);
}

.post-list .thumb .img-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out 0s;
}

.post-list .thumb .list-item:hover .img-empty img {
  filter: brightness(0.8) blur(1px);
  transform: scale(1.1);
}

.post-list .thumb .img-empty img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

/* *** thumb arrange end *** */

/* *** protected item *** */
.post-list .list-item.list-protected .title-content {
  display: none;
}

.post-list .thumb .list-item.list-protected .list-title::before {
  font-family: remixicon;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-m);
  content: " ***";
}

.post-list .thumb .list-item.list-protected .list-title .title-content {
  display: none;
}

.list-item.list-protected .list-thumbnail {
  background-color: var(--main-color) !important;
  background-image: none;
  /* stylelint-disable */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M164.365 242.065c15.602 0 28.25-12.584 28.25-28.122 0-15.667-12.648-28.187-28.25-28.187-15.411 0-28.09 12.52-28.09 28.187 0 15.538 12.679 28.122 28.09 28.122zM248.99 242.065c15.538 0 28.186-12.584 28.186-28.122 0-15.667-12.648-28.187-28.187-28.187-15.666 0-28.25 12.52-28.25 28.187 0 15.538 12.585 28.122 28.25 28.122zM335.22 242.065c15.603 0 28.123-12.584 28.123-28.122 0-15.667-12.52-28.187-28.123-28.187-15.57 0-28.122 12.52-28.122 28.187 0 15.538 12.552 28.122 28.122 28.122z' fill='%23464E55'/%3E%3Cpath d='M728.714 419.726c24.174 0 47.48 3.917 69.44 10.98V284.891H122.308v478.28h407.395c-19.326-33.58-30.499-72.426-30.499-113.905.001-126.552 102.925-229.54 229.51-229.54z' fill='%23464E55' opacity='.25'/%3E%3Cpath d='M845.282 793.734c-12.391 10.08-26.197 18.427-40.9 25.04 17.143-1.926 31.976-11.3 40.9-25.04z' fill='%23464E55'/%3E%3Cpath d='M854.464 457.545V199.689c0-31.013-25.233-56.31-56.31-56.31H122.309c-31.205 0-56.406 25.298-56.406 56.31v563.482c0 30.947 25.201 56.309 56.406 56.309h452.854c40.707 36.727 94.48 59.328 153.552 59.328 126.456 0 229.508-102.924 229.508-229.54 0-80.066-41.317-150.63-103.758-191.723zM335.22 185.755c15.603 0 28.123 12.52 28.123 28.188 0 15.539-12.52 28.122-28.123 28.122-15.57 0-28.122-12.584-28.122-28.122 0-15.667 12.552-28.187 28.122-28.187zm-86.23 0c15.538 0 28.186 12.52 28.186 28.188 0 15.539-12.648 28.122-28.187 28.122-15.666 0-28.25-12.584-28.25-28.122 0-15.667 12.585-28.187 28.25-28.187zm-84.625 0c15.602 0 28.25 12.52 28.25 28.188 0 15.539-12.648 28.122-28.25 28.122-15.411 0-28.09-12.584-28.09-28.122 0-15.667 12.679-28.187 28.09-28.187zm-42.057 577.416V284.89h675.846v145.816c-21.96-7.063-45.266-10.98-69.44-10.98-126.585 0-229.509 102.99-229.509 229.54 0 41.478 11.173 80.324 30.499 113.905H122.308zm722.974 30.563c-8.925 13.74-23.757 23.114-40.9 25.04-23.178 10.402-48.733 16.31-75.668 16.31-26.518 0-51.59-5.65-74.384-15.603-28.572-12.585-53.292-32.04-72.169-56.31-24.494-31.461-39.23-70.948-39.23-113.904 0-102.41 83.374-185.751 185.784-185.751 24.527 0 47.994 4.943 69.44 13.612 20.932 8.54 39.936 20.74 56.31 35.828 36.79 33.965 60.033 82.441 60.033 136.311 0 58.365-27.097 110.438-69.216 144.467z' fill='%23464E55'/%3E%3Cpath d='M818.636 629.107H806.95v-39.102c0-19.519-7.384-37.433-19.583-50.467-12.135-13.098-29.536-21.445-48.701-21.382-19.102-.063-36.47 8.284-48.637 21.382-12.2 13.034-19.647 30.948-19.647 50.467v39.102h-11.686c-4.88 0-8.797 3.98-8.797 8.732v103.438c0 4.943 3.916 8.796 8.797 8.796h159.94c4.88 0 8.86-3.853 8.86-8.796V637.839c0-4.752-3.98-8.732-8.86-8.732zm-60.58 92.201c0 10.787-8.731 19.519-19.422 19.519-10.786 0-19.455-8.732-19.455-19.519v-35.763c0-10.787 8.669-19.583 19.455-19.583 10.69 0 19.423 8.796 19.423 19.583v35.763zm16.534-92.2h-71.72v-39.103c0-11.236 4.238-21.253 10.852-28.316 6.645-7.062 15.41-11.236 24.945-11.236 9.662 0 18.33 4.174 24.944 11.236 6.614 7.063 10.98 17.079 10.98 28.316v39.102z' fill='%23464E55'/%3E%3Cpath d='M738.667 676.362c-6.197 0-11.269 5.01-11.269 11.3v29.921c0 6.23 5.072 11.236 11.269 11.236a11.206 11.206 0 0 0 11.235-11.236v-29.92c0-6.291-5.007-11.3-11.235-11.3z' fill='%23464E55'/%3E%3C/svg%3E");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 30px 30px;
  /* stylelint-enable */
  content: "";
  transition: var(--transition);
}

.post-list .list .list-item.list-protected .list-title::before {
  font-family: remixicon;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-m);
  content: " ***";
}

.list-item.list-protected:hover .list-thumbnail {
  filter: brightness(0.9) blur(1px);
  transform: scale(1.1);
}

/* *** protected item end *** */

/* *** list empty *** */
.list-empty {
  padding: 20px;
  font-size: var(--font-size-s);
  color: var(--sub-text-color);
  background-color: var(--button-bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.list-empty li {
  margin-bottom: 10px;
  list-style: inside disc;
}

/* *** list empty end *** */

/* **** s_list end **** */

/* **** s_article_rep **** */
.article-wrap::-webkit-scrollbar {
  width: 3px;
}

/* *** article info *** */
.article-info {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  margin-bottom: 10px;
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.article-title {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  justify-content: left;
  font-size: var(--font-size);
  font-weight: var(--font-weight-b);
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.article-info .info-left {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  justify-content: space-between;
}

.info-left-bottom,
.info-left-bottom a {
  font-size: var(--font-size-xxs);
  color: var(--sub-text-color);
}

.info-left-bottom .article-category {
  color: var(--dark-main-color);
}

.article-info .info-right {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  align-items: baseline;
  margin-top: 4px;
}

.info-right .admin-btn {
  width: 25px;
  height: 25px;
  font-size: var(--font-size-s);
  background-color: var(--main-color);
  border-radius: 5px;
  transition: var(--transition);
}

.info-right .admin-btn .admin-item {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--bg-color);
  border-radius: 5px;
}

.info-right .admin-btn:hover,
.info-right .admin-btn:hover .admin-item {
  color: var(--main-color);
  background-color: var(--light-main-color);
}

/* *** article info end *** */

/* *** article tag *** */
.article-tag {
  margin: 12px 0;
}

.post-tags {
  display: flex;
  height: 24px;
  font-size: 0;
  color: var(--main-color);
  justify-content: start;
}

.post-tags a {
  width: max-content;
  height: 24px;
  padding: 0 5px;
  margin-right: 5px;
  flex-wrap: wrap;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-db);
  line-height: 24px;
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.post-tags a::before {
  content: "#";
}

/* *** article tag end *** */

/* *** article content *** */

.article-content {
  width: 100%;
  padding: 10px;
  color: var(--text-color);
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.contents_style :is(h2, h3, h4) {
  margin-top: 10px;
  color: var(--main-color);
  font-weight: var(--font-weight-db) !important;
}

.contents_style h2 {
  font-size: var(--font-size-xl);
}

.contents_style h3 {
  font-size: var(--font-size-l);
}

.contents_style h4 {
  font-size: var(--font-size);
}

.contents_style p {
  margin: 5px !important;
}

.contents_style img {
  width: 100%;
}

figure {
  margin: 0 !important;
}

figure.imageblock {
  width: 100% !important;
  margin: 0 auto 6px !important;
}

figure.imageblock span {
  min-width: 100%;
  min-height: 100%;
}

figure.imageblock img {
  border-radius: 5px;
}

figure.imageblock.alignCenter {
  margin-top: 0;
}

figure.imagegridblock {
  margin-bottom: 6px !important;
}

figure.imagegridblock .image-container > span {
  margin: 0 !important;
}

figure.imagegridblock .image-container > span img {
  border-radius: 5px;
}

.tt-body-index .container_postbtn {
  margin: 15px 0 !important;
}

/* *** postbtn *** */

.container_postbtn {
  width: 100%;
  padding: 0 !important;
  margin-top: 10px;
}

.container_postbtn button.btn_menu_toolbar {
  display: none !important;
}

.container_postbtn .postbtn_like {
  display: flex !important;
  width: 100%;
  gap: 5px;
  padding: 0 !important;
  justify-content: space-between;
  border-color: transparent !important;
}

.container_postbtn .btn_post {
  height: 32px !important;
  padding: 0 10px !important;
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.container_postbtn .btn_post .ico_postbtn {
  display: none;
}

.container_postbtn .btn_post .like_on {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container_postbtn .btn_post .uoc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container_postbtn .btn_post .txt_like.uoc-count {
  display: inline-block;
  margin: 0 !important;
  font-family: Unbounded, "Noto Sans SC", Pretendard, sans-serif, serif !important;
  font-size: var(--font-size-s) !important;
  line-height: 20px !important;
  color: var(--main-color) !important;
}

.container_postbtn .btn_post.uoc-icon > .uoc-icon::before {
  display: inline;
  width: 17px;
  height: 17px;
  margin-right: 2px;
  background-color: var(--main-color);
  background-image: none;
  /* stylelint-disable */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5-1.977-1.186-7.083-3.937-9.131-8.499L1 13v-2h1.21A9.552 9.552 0 0 1 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2Zm0 2c-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5 5.56 5 4 6.657 4 9c0 .685.09 1.352.267 2h2.167L8.5 7.556l3 5L12.434 11H17v2h-3.434L11.5 16.444l-3-5L7.566 13H5.108c.79 1.374 1.985 2.668 3.537 3.903.745.593 1.54 1.146 2.421 1.7.299.189.595.37.934.572.339-.202.635-.383.934-.571a26.752 26.752 0 0 0 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 17px 17px;
  /* stylelint-enable */
  content: "";
  transition: var(--transition);
}

.container_postbtn .btn_post.uoc-icon > .uoc-icon.like_on::before {
  background-color: var(--main-color);
  /* stylelint-disable */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5-1.978-1.186-7.084-3.937-9.131-8.5h4.697l.934-1.556 3 5L13.566 13H17v-2h-4.566l-.934 1.556-3-5L6.434 11H2.21A9.552 9.552 0 0 1 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2Z'/%3E%3C/svg%3E");
  /* stylelint-enable */
}

.wrap_btn_share,
.wrap_btn:has([data-tiara-action-name="글통계_클릭"]),
.wrap_btn_etc {
  display: none;
}

/* * comment click * */
.container_postbtn .postbtn_like .wrap_btn .comment-click {
  display: flex;
  width: max-content;
  height: 32px;
  padding: 0 10px !important;
  font-family: Unbounded, "Noto Sans SC", Pretendard, sans-serif, serif !important;
  font-size: var(--font-size-s) !important;
  color: var(--main-color);
  line-height: normal !important;
  background-color: var(--bg-color) !important;
  border: 1px solid var(--main-color);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  transition: var(--transition);
  gap: 3px;
}

.comment-click i {
  font-size: var(--font-size);
}

/* * comment click end * */

/* *** postbtn end *** */

/* *** comment wrap *** */
.comment-wrap {
  display: none;
  width: 100%;
  height: max-content;
  padding: 15px;
  margin-top: 10px;
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.comment-wrap [data-tistory-react-app="Namecard"] {
  display: none;
}

.tt-box-total,
.tt-list-reply,
.tt-item-reply,
.tt-item-reply .tt-list-reply-comment {
  border: none !important;
}

.tt-list-reply > li {
  margin-bottom: 10px;
  background-color: var(--button-bg-color);
  border-radius: 10px;
}

.tt-wrap-cmt {
  flex-wrap: nowrap !important;
}

.tt-box-thumb {
  padding-left: 20px;
}

.tt-link-comment .tt_txt_g {
  padding-top: 15px !important;
  font-family: Pretendard-Regular, sans-serif !important;
  font-size: 12px !important;
}

.tt-wrap-cmt .tt-link-user {
  font-weight: var(--font-weight-db);
}

.tt-wrap-cmt .tt-link-user,
.tt-wrap-cmt .tt_desc {
  font-family: Unbounded, "Noto Sans SC", Pretendard, sans-serif, serif !important;
  font-size: var(--font-size-xs) !important;
}

.tt_img_area_reply.tt_ico_lock {
  display: inline;
  width: 14px;
  height: 14px;
  margin: 0 6px;
  background-color: var(--main-color);
  background-image: none !important;
  /* stylelint-disable */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M512 42.66q69.673 0 128.492 34.324t93.163 93.164 34.325 128.491V469.3h85.34q53.002 0 90.5 37.5t37.5 90.5v256q0 53.002-37.5 90.501t-90.5 37.5H170.66q-53.002 0-90.501-37.5t-37.5-90.5v-256q0-53.003 37.5-90.502t90.5-37.499H256V298.64q0-69.673 34.324-128.491t93.164-93.164T511.98 42.66zm341.34 512H170.68q-17.674 0-30.167 12.493T128.02 597.32v256q0 17.674 12.493 30.167t30.167 12.493h682.66q17.674 0 30.167-12.493T896 853.32v-256q0-17.675-12.493-30.167T853.34 554.66zM512 128q-70.676 0-120.668 49.992T341.34 298.66v170.66h341.34V298.66q0-70.677-49.991-120.668T512.02 128z' fill='%23444'/%3E%3C/svg%3E");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 14px 14px;
  /* stylelint-enable */
  content: "";
  transition: var(--transition);
}

.tt-wrap-cmt .tt-box-modify {
  margin-right: 12px;
}

.tt-list-reply-comment .tt-item-reply::before {
  top: 18px !important;
  height: 15px !important;
  border-bottom: 1px solid var(--main-color) !important;
  border-left: 1px solid var(--main-color) !important;
}

/* * comment input * */
.tt-box-textarea.tt-input-textarea .tt-inner-g {
  border-color: var(--main-color) !important;
}

.tt-box-textarea .tt-inner-g {
  overflow-y: auto !important;
  border-radius: 5px;
}

.tt-box-textarea .tt-inner-g .tt_txt_user {
  display: none;
}

.tt-box-textarea .tt_txt_user {
  font-family: Unbounded, "Noto Sans SC", Pretendard, sans-serif, serif !important;
}

.tt-box-textarea,
.tt-box-write {
  margin-right: 12px;
}

.tt-btn_register:disabled {
  background-color: #e5e5e5 !important;
  border: none !important;
}

.tt-btn_register {
  background-color: var(--main-color) !important;
  border: none !important;
  border-radius: 5px !important;
  transition: var(--transition);
}

.tt-btn_register:hover {
  color: var(--main-color);
  background-color: var(--light-main-color) !important;
  border: none !important;
}

.tt-box-write .tt-xe-input-helper {
  display: inline;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  background-color: var(--sub-text-color);
  background-image: none !important;
  /* stylelint-disable */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32v-48C576 64.5 511.5 0 432 0S288 64.5 288 144v48H64c-35.3 0-64 28.7-64 64v192c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V256c0-35.3-28.7-64-64-64h-32v-48z'/%3E%3C/svg%3E");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 17px 17px;
  /* stylelint-enable */
  content: "";
  transition: var(--transition);
}

.tt-box-write input[type="checkbox"]:checked + .tt-xe-input-helper {
  background-color: var(--main-color);
  background-image: none !important;
  /* stylelint-disable */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M144 144v48h160v-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zm-64 48v-48C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64v192c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64h16z'/%3E%3C/svg%3E");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 17px 17px;
  /* stylelint-enable */
  content: "";
  transition: var(--transition);
}

.tt-area-write .tt-box-account input {
  border-radius: 5px;
}

.tt-area-write .tt-box-account input:focus {
  color: var(--main-color) !important;
  border: 1px solid var(--main-color) !important;
}

.tt-area-write .tt-box-account {
  margin-right: 12px;
}

/* * comment input end * */

/* *** comment wrap end *** */

/* **** s_article_rep end **** */

/* **** s_guest **** */
.guestbook {
  width: 100%;
}

.guest-top {
  display: flex;
  width: 100%;
  height: 30px;
  padding-left: 10px;
  margin-bottom: 10px;
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
  align-items: center;
}

.guestbook [data-tistory-react-app="Comment"] {
  padding: 15px;
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

/* **** s_guest end **** */

/* **** s_tag **** */
.taglog .tag-top {
  display: flex;
  width: 100%;
  height: 30px;
  padding-left: 10px;
  margin-bottom: 10px;
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
  align-items: center;
}

.taglog .tag-list-wrap {
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.tag-list {
  display: flex;
  padding: 15px;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.taglog li a {
  display: inline-block;
  padding: 5px 10px;
  color: var(--main-color);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight);
  background-color: var(--light-main-color);
  border-radius: 5px;
}

.taglog li a:hover {
  color: var(--bg-color);
  background-color: var(--main-color);
  transition: var(--transition);
}

/* **** s_tag end **** */

/* **** s_paging **** */
.pagination {
  display: flex;
  width: 100%;
  height: 25px;
  padding: 0 15px;
  margin-top: 10px;
  overflow: hidden;
  background-color: var(--button-bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
  align-items: center;
  justify-content: space-around;
}

.pagination a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pagination .fa-solid {
  display: flex;
  font-size: calc(var(--font-size) - 2px);
  align-items: center;
}

.pagination .numbox {
  display: flex;
  width: 100%;
  column-gap: 5px;
  margin: 0 10px;
  font-size: calc(var(--font-size) - 2px);
  justify-content: space-evenly;
}

.numbox .num span {
  display: flex;
  width: 20px;
  height: 20px;
  font-family: Pretendard;
  font-size: calc(var(--font-size) - 2px);
  font-weight: 500;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.numbox .num .selected {
  font-size: var(--font-size);
  color: var(--dark-main-color);
}

/* **** s_paging end **** */

/* **** namecard **** */
.tt_box_namecard {
  min-height: 175px !important;
  margin: 10px 0 0 !important;
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

/* **** namecard end **** */

/* **** s_article_protected **** */
.protected {
  width: 100%;
  height: max-content;
  padding: 100px 15px;
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.protected .protected-enter {
  display: flex;
  justify-content: center;
}

.protected .password {
  display: flex;
  width: 200px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--main-color);
  border-radius: 5px;
}

.protected .password input {
  width: 100%;
}

.protected .password button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.protected .password button i {
  color: var(--main-color);
  font-size: var(--font-size-s);
  transition: var(--transition);
}

.protected button:hover i {
  color: var(--light-main-color);
}

/* **** s_article_protected end **** */

/* **** to top wrap **** */
.to-top-btn {
  position: fixed;
  right: calc(100vw - 95%);
  bottom: calc(100vh - 95%);
  z-index: 50;
  width: 30px;
  height: 30px;
  background-color: var(--bg-color);
  border: 1px solid var(--main-color);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.to-top-btn i {
  display: flex;
  font-size: var(--font-size-xl);
  color: var(--main-color);
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.to-top-btn:hover {
  color: var(--main-color);
  transform: scale(1.1);
}

/* **** to top wrap end **** */

/* **** copyright **** */
.copyright {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright a {
  width: 100%;
  height: 100%;
}

.copyright a svg {
  width: 100%;
  height: 100%;
}

/* **** copyright end **** */

/* **** responsive **** */
@media (width <= 925px) {
  body {
    padding: 20px;
  }

  .wrapper {
    margin: 0;
    width: 100%;
    flex-direction: column;
  }

  .user-card-wrap {
    width: 100%;
    margin: 0;
    overflow: visible;
  }

  .user-title {
    border-radius: 5px 0 60px;
  }

  .user-bg img {
    border-radius: 4px 4px 0 0;
  }

  .user-intro,
  .search-bar {
    margin-bottom: 10px;
  }

  .cate-list {
    position: absolute;
    top: 85%;
  }

  .content-wrap {
    width: 100%;
    margin-top: 10px;
  }

  .copyright {
    display: none;
  }
}

@media (width <= 480px) {
  body {
    padding: 10px;
  }

  .user-title {
    width: 40%;
  }

  .user-bg img {
    height: 125px;
    border-radius: 4px 4px 0 0;
  }

  .nav-bar {
    margin-top: 64px;
    width: 55%;
  }

  .cate-wrap {
    position: relative;
    width: 100%;
    margin: 10px 0 15px;
  }

  .cate-click,
  .cate-list {
    width: 55%;
  }

  .cate-list {
    top: 100%;
  }

  .sns-bar {
    border-radius: 0 0 4px 4px;
  }

  .cover-wrap {
    padding: 10px;
    grid-template-columns: repeat(1, 1fr);
  }

  .post-list .thumb .list-info {
    padding: 10px;
  }

  .post-list .thumb .list-title .title-content {
    font-size: var(--font-size-s);
  }

  .post-list .thumb .list-sub-info {
    font-size: var(--font-size-xxs);
  }
}

/* **** responsive end **** */