@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap');

html {
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
}

html, body {
  padding: 0;
  margin: 0;
}

body {    
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 128px;
}

.headerBox {
  margin: 8px 48px;
}

.headerContent {
  max-width: 720px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.headerContent ul {
  padding: 0;
  margin: 0;
}

.headerContent ul li {
  display: inline-block;
}

.headerTitle {
  display: block;
  text-align: center;
  font-size: 0.75em;
  padding: 0px 8px;
  border-left: medium solid black;
  border-right: medium solid black;
}

.headerTitle h1 {
  display: inline-block;
  word-break: keep-all;
  padding: 0;
  margin: 0;
  margin-top: -0.125em;
}

.cleanAnchor a {
  text-decoration: none;
}

.bigDivider {
  align-self: stretch;
  height: 0.5em;
  background: #4fffb9;
  background: linear-gradient(90deg, #4fffb9 0%, #a720ff 100%);
  border-top: medium solid black;
  border-bottom: medium solid black;
  
  position: sticky;
  top: 0px;
  margin-bottom: 16px;
  z-index: 100;
}

@keyframes scaleProgress {
  0% {background-color: black; width: 0%;}
  99% {background-color: black; width: 99%;}
  100% {background-color: white; width: 100%;}
}

.bigDivider .bigDividerProgress {
  background: black;
  height: 100%;
  width: 0%;
  margin-left: 0px;

  animation-timeline: scroll(root);
  animation-name: scaleProgress;
  animation-duration: auto;
  animation-timing-function: linear;

  /* transition: background-color 0.5s ease-in-out;
  background-color: black; */
}

/* .bigDivider .bigDividerProgress.hidden {
  transition: background-color 0.5s ease-in-out;
  background-color: white;
} */

.mainBox {
  max-width: 1080px;
  padding: 0px 24px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.desktopOnly {
  display: none;
}

.sidebar {
  display: flex;
  padding: 8px;
  border: medium solid black;
  flex-direction: column;
  overflow: hidden;
  height: fit-content;
  transition: height 500ms;
}

.sidebar.closed .onlyOpened {
  display: none;
}

.sidebar:not(.closed) .onlyClosed {
  display: none;
}

.sidebar .minimalInfo {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 32px;
}

.sidebar .minimalInfo .pfp {
  width: auto;
  height: 100%;
}

.sidebar .minimalInfo .openButton {
  font-size: 2em;
}

.sidebar .blogInfo .img {
  width: 100%;
  display: block;
}

.sidebar .blogInfo .closeButton {
  height: 32px;
  background-color: black;
  color: white;
  font-size: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar .blogInfo .bloggerName {
  font-weight: bold;
  font-style: italic;
}

.sidebar .blogInfo .desc {
  overflow-wrap: break-word;
  text-align: justify;
}

.sidebar .blogInfo+hr {
  border: thin solid black;
}

.sidebar .content {
  display: flex;
  flex-direction: column;
  column-gap: 8px;
}

.sidebar .content .title {
  font-weight: bold;
  font-style: italic;
}

.sidebar .content ul {
  margin: 0px;
  margin-left: 0em;
  padding-left: 1.5em;
}

.sidebar .content hr {
  margin-inline-start: unset;
  margin-inline-end: unset;
}

.sidebar .content ul li {
  margin: 0px;
}

.sidebar .content .search {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar .content .search input {
  flex-grow: 1;
  border: none;
  border-bottom: solid black thin;
}

.sidebar .content .search input:focus {
  outline: none;
}

.sidebar .content .recentCommentsGroup {
  font-size: smaller;
  margin: 0 0 8px 0;
}

.covers {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.covers .featured .title {
  font-weight: bold;
  font-style: italic;
  margin: 0px;
}

.covers .featured .itemContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  overflow-y: hidden;
}

.covers .featured .item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
  width: fit-content;
  height: fit-content;
}

.covers .featured .item .thumbnailContainer {
  display: block;
  min-height: 144px;
  max-height: 144px;
  height: 144px;
  min-width: 192px;
  max-width: fit-content;
}

.covers .featured .item .thumbnailContainer a{
  display: block;
  width: 100%;
  height: 100%;
}

.covers .featured .item .thumbnailContainer .thumbnail {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.covers .featured .item .thumbnailContainer .thumbnailPlaceholder {
  display: block;
  height: 100%;
  width: 100%;
  background: rgb(79,255,185);
  background: linear-gradient(135deg, rgba(79,255,185,1) 0%, rgba(167,32,255,1) 100%);
}

.covers .featured .item .thumbnailContainer .thumbnail+.thumbnailPlaceholder {
  display: none;
}

.covers .featured .item .info {
  min-width: 100%;
  width: 0;
  overflow: hidden;
}

.covers .featured .item .title {
  font-weight: bold;
  font-style: italic;
  width: 100%;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.covers .featured .item .summary {
  box-sizing: border-box;
  width: 100%;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.75em;
  opacity: 0.8;
}

.covers .list>.title {
  font-weight: bold;
  font-style: italic;
  margin: 0px;
}

.articleContainer .admin {
  font-size: 0.75em;
  font-style: italic;
  border: thin dotted black;
  width: fit-content;
}

.articleContainer .contents_style figcaption {
  opacity: 0.5;
}

.articleContainer .contents_style blockquote[data-ke-style='style2'] {
  border-left: #666 solid medium;
  padding: 8px 0 8px 16px;
}

.articleContainer .contents_style a:link, 
.articleContainer .contents_style a:visited {
  color: black;
}

.articleContainer .contents_style a:hover {
  background: black; 
  color: #4fffb9;
  text-decoration: underline;
}

.articleContainer .contents_style a:active {
  background: none;
  color: #a720ff;
}

.listContainer .empty {
  font-size: 2em;
  opacity: 0.5;
  user-select: none;
  font-weight: bold;
  padding: 1em;
  margin: auto;
  width: fit-content;
}

.listContainer .paging {
  user-select: none;
  margin-top: 16px;
  padding: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.listContainer .paging div {
  width: fit-content;
}

.listContainer .paging .no-more-prev {
  opacity: 0.5;
  pointer-events: none;
}

.listContainer .paging .no-more-next {
  opacity: 0.5;
  pointer-events: none;
}

.listContainer>.titleContainer {
  margin: 2em 0;
}

.listContainer>.titleContainer>.title {
  /* margin: 0px; */
  display: inline;
}

.listContainer>.titleContainer>.count {
  font-style: italic;
}

.listContainer .listFlex {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.listContainer .listItem {
  display: flex;
  flex-direction: column;
}

.listContainer .listItem .thumbnailContainer {
  height: 160px;
  margin-right: 8px;
}

.listContainer .listItem .thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listContainer .listItem .thumbnailPlaceholder {
  max-width: 100%;
  height: 100%;
  background: rgb(79,255,185);
  background: linear-gradient(135deg, rgba(79,255,185,1) 0%, rgba(167,32,255,1) 100%);
}

.listContainer .listItem .thumbnail+.thumbnailPlaceholder {
  display: none;
}

.listContainer .listItem .content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.listContainer .listItem .content>.title {
  margin: 0;
  padding: 0;
}

.listContainer .listItem .content>.summary {
  font-size: 0.75em;
  opacity: 0.8;
  text-overflow: ellipsis;
  
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-clamp: 3;

  margin-bottom: 8px;

  min-width: 0;
}

.listContainer .listItem .content .blockTagGroup {
  font-size: 0.75em;
}

.guest .title {
}

.taglog .title {
}

.zoomImageBox {
  position: relative;
  overflow: hidden;
}
.zoomImageBox>img {
  max-width: 100%;
  display: block;
  width: 100%;
  height: auto;
}
.zoomImageBox img,
.zoomImageBox .zoomPlaceholder {
  transition: all 0.3s;
  transform: scale(1);
}

.zoomImageBox:hover img,
.zoomImageBox:hover .zoomPlaceholder {
  transform: scale(1.1);
}

.zoomImageBox::after {
  /* box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.25) inset; */
  border: medium dotted black;
  
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0%;
  transition: all 0.3s;
  pointer-events: none;
}

.zoomImageBox:hover::after {
  opacity: 100%;
}

.blockTagGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
}

.blockTagGroup .tag {
  background: black;
  color: white;
  padding: 0.25em 0.5em;
  height: fit-content;
  min-height: 1.5em;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.blockTagGroup .tag.cloud1 {
  border-left: thick solid #4fffb9;
  font-size: larger;
}

.blockTagGroup .tag.cloud2 {
  border-left: thick solid #65C7CB;
  font-size: large;
}

.blockTagGroup .tag.cloud3 {
  border-left: thick solid #7B90DC;
  font-size: medium;
}

.blockTagGroup .tag.cloud4 {
  border-left: medium solid #9158EE;
  font-size: small;
}

.blockTagGroup .tag.cloud5 {
  border-left: medium solid #A720FF;
  font-size: smaller;
}

.blockTagGroup .tag.postTag {
  border-left: thick solid #4fffb9;
}

.blockTagGroup .tag.category {
  border-left: thick double #a720ff;
}

.blockTagGroup .tag.user {
  border-left: thick groove #4fffb9;
}

.blockTagGroup .tag.prev {
  background: black;
  background: linear-gradient(90deg, #a720ff 0%, black 100%);
}

.blockTagGroup .tag.next {
  background: black;
  background: linear-gradient(270deg, #a720ff 0%, black 100%);
}

a {
  text-decoration: underline dotted;
}

a:link, a:visited {
  color: unset;
}

a:hover {
  background: black; 
  color: #4fffb9;
  text-decoration: underline;
}

a:active {
  background: none;
  color: #a720ff;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
  height: 64px;
  background-color: black;
}

footer div {
  font-size: small;
  width: fit-content;
  color: white;
}

body:not(#tt-body-page) .articleContainer {
  border-top: medium solid black;
}

body:not(#tt-body-page) .tt_box_namecard,
body:not(#tt-body-page) .tt-comment-cont,
body:not(#tt-body-page) .another_category,
body:not(#tt-body-page) .container_postbtn {
  display: none;
}

.showMore {
  font-weight: bold;
  font-style: italic;
  margin: 1em 0;
}

body#tt-body-page .articleContainer .showMore{
  display: none;
}

body#tt-body-guestbook .tt-comment-cont {
  display: unset;
}

.searchListOnly,
.categoryListOnly,
.tagListOnly,
.pageOnly {
  display: contents;
}

body:not(#tt-body-search) .searchListOnly,
body:not(#tt-body-category) .categoryListOnly,
body:not(#tt-body-tag) .tagListOnly,
body:not(#tt-body-page) .pageOnly {
  display: none;
}

@media (min-width:768px) {
  .mainBox {
    flex-direction: row;
    padding: 0px 48px;
  }

  .sidebar {
    min-width: 192px;
    max-width: 192px;
    flex-direction: column;
  }

  .header {
    min-height: 64px;
  }

  .headerTitle {
    text-align: left;
    font-size: 1em;
  }

  .headerContent {
    flex-direction: row;
  }

  .listContainer .listItem {
    height: 120px;
    flex-direction: row;
  }

  .listContainer .listItem .thumbnailContainer {
    min-width: 160px;
    width: 160px;
    height: unset;
  }

  .listContainer .listFlex {
    gap: 8px;
  }

  .sidebar .onlyOpened {
    display: block !important;
  }

  .sidebar .closeButton {
    display: none !important;
  }

  .sidebar .onlyClosed {
    display: none;
  }

  .desktopOnly {
    display: initial;
  }
}

@media (min-width:480px) and (max-width:767px)  {
  .headerTitle {
    font-size: 1em;
  }

  .sidebar {
    flex-direction: row;
    gap: 8px;
  }
}