@charset 'UTF-8';

* {
  margin: 0;
  padding: 0;
  word-break: break-all;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
}

.icon {
  stroke: var(--color-font);
}

.icon--12x {
  width: 12px;
  height: 12px;
  transform: rotate(90deg);
}
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

button {
  border: none;
  cursor: pointer;
}

textarea,
input {
  color: var(--color-font);
  font-size: var(--font-size);
  font-family: var(--font);
  border: none;
  outline: none;
  background: none;
}

textarea {
  width: 100%;
  resize: none;
}

ol,
ul,
li {
  list-style: none;
}

.tistoryProfileLayerTrigger,
.container_postbtn,
.postbtn_ccl,
.uoc-count,
.ico_postbtn {
  display: none !important;
}

pre {
  margin-bottom: 12px;
  white-space: unset !important;
  overflow: hidden;
  border-radius: var(--round) !important;
}

::-webkit-scrollbar,
::-webkit-scrollbar {
  display: none;
}

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

.hidden,
[data-tistory-react-app='Namecard'] {
  display: none !important;
}

.loader {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--color-bg);
  transition: all 0.75s;
  z-index: 10000;
}

.loader--hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-item,
.loader-item::before,
.loader-item::after {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation-fill-mode: both;
  animation: loader 2s infinite ease-in-out;
}

.loader-item {
  color: var(--color-primary);
  font-size: 10px;
  position: fixed;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.1s;
}

.loader-item::before,
.loader-item::after {
  content: '';
  position: absolute;
  top: 0;
}

.loader-item::before {
  left: -24px;
  animation-delay: -0.2s;
}

.loader-item::after {
  left: 24px;
}

@keyframes loader {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

body {
  color: var(--color-font);
  font-size: var(--font-size);
  font-family: var(--font);
  font-weight: 500;
  line-height: 1;
  background-color: var(--color-bg);
}

.wrap {
  width: var(--content-width);
  margin: 80px auto;
  max-width: 95%;
  gap: 32px;
}

.header {
  border-radius: var(--round);
  box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.025);
  background-color: var(--color-wrap);
  overflow: hidden;
}

.header-img {
  width: 100%;height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 3 / 1.2;
}

.nav {
  padding: 16px;
  font-size: var(--font-size-s);
  border-radius: var(--round);
  box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.025);
  background-color: var(--color-wrap);
}

.nav > div {
  gap: 16px;
}

.main {
  padding: 32px;
  border-radius: var(--round);
  box-shadow: 0 4px 4px 4px rgba(0, 0, 0, 0.025);
  background-color: var(--color-wrap);
}

.flex {
  display: flex;
  align-items: center;
}

.flex--space {
  justify-content: space-between;
}

.flex--col {
  display: flex;
  flex-direction: column;
}

.nav {
  font-weight: 700;
  text-transform: uppercase;
}

.list-wrap:link,
.list-wrap:visited {
  padding: 16px 4px;
  transition: all var(--duration);
  border-bottom: 1px dotted var(--color-border);
}

.list-wrap:hover,
.list-wrap:active {
  font-weight: 700;
  letter-spacing: 0.25px;
}

.list-title,
.article-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;
  overflow: hidden;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  line-height: 1.4;
}

.list-date,
.article-date {
  flex: 0 0 auto;
}

.article-list a:link,
.article-list a:visited {
  display: flex;
  padding: 16px 4px;
  transition: all var(--duration);
}

.article-list li:first-child {
  border-top: 1px dotted var(--color-border);
}

.article-header {
  padding: 16px 4px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.article-title {
  font-weight: 700;
}

.list-date,
.article-date {
  font-size: var(--font-size-s);
  letter-spacing: 0.45px;
}

.searchlist {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.searchlist-content{
  padding: 24px 0;
}

.searchlist-content,
.article-category {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

.filter {
  position: relative;
  z-index: 999;
}

.filter-label-wrap {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
}

.filter-wrap {
  position: absolute;
  right: 0;
  top: 36px;
}

.filter-list {
  height: 0;
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  visibility: hidden;
  border-radius: var(--round);
  box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.045);
  background-color: var(--color-wrap);
  transition: height var(--duration);
}

.filter-item:link,
.filter-item:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px;
  padding: 10px 18px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--round);
  transition: all var(--duration);
}

.article-content {
  padding: 48px 0;
  line-height: 1.7;
}

.cover-post-title {
  font-size: var(--font-size-l);
  font-weight: 700;
}

.cover-post-content {
  margin-top: 24px;
  line-height: 1.7;
}

.article-related {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* border-bottom: 1px dashed var(--color-border); */
}

.article-list .article-related li {
  border: none;
}

.article-list .article-related a:link,
.article-list .article-related a:visited {
  padding: 12px 4px;
}

.article-list .article-related li {
  border-bottom: 1px dashed var(--color-border);
}

.article-list .article-related li:first-child {
  border-top: 1px dashed var(--color-border);
}

.related-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;
  overflow: hidden;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  line-height: 1.4;
}

.related-title {
  transition: all var(--duration);
}

.related-title:hover {
  font-weight: 700;
  letter-spacing: 0.25px;
}

.related-content {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-s);
}

.related-label {
  font-weight: 700;
}

.paging {
  padding: 24px 0;
}

.numbox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

@media screen and (max-width: 786px) {

  .wrap {
    margin: 30px auto;
  }
  
  .main {
    padding: 20px;
  }
}