@charset "UTF-8";
/*****
 * 여기서 쓰인 모든 !important는,
 * 티스토리 내장 css와의 충돌 때문에 어쩔 수 없이 사용함.
 */
/***** css 변수 *****/
:root {
  --vertical-margin-article: 12px; /* 본문 속 컨텐츠 사이 간격 */
  --list-vertical-margin-article: 2px; /* 본문 속 리스트 간격 */
  --list-vertical-margin-aside: 2px; /* 사이드바 속 리스트 간격 */
  --blockquote-text-color: #666; /* blockquote 기본 글자 색 */
  --series-box-max-height: 379px; /* 게시글 시리즈 상자 최대 높이 */
}

/***** scss 변수 *****/
/***** 비(non)텍스트 직계 자식 선택용 *****/
/***** 미디어쿼리 *****/
@media screen and (max-width: 1060px) {
  .area-aside .box-profile {
    border-top: none;
  }
}
/***** 폰트 선언 *****/
@font-face {
  font-family: "Consola";
  src: url(Consola.ttf);
}
/***** 계층 구조 표현 & 스코프 선언 *****/
/* 1. 메인 컨테이너 (#container .main) */
/* 1-1. 본문 (.article-view .contents_style, .article-view .contents_style .moreless-content) */
/* 1-1-1. Wrapper 블럭 (blockquote, td) */
/* 1-1-2. blockquote 블럭 (blockquote) */
/* 1-1-3. 게시글 시리즈 상자 (.series-box) */
/* 1-1-4. 리스트 (ul, ol, li) */
/* 1-1-5. 코드 상자 (code) */
/* 1-2. 사이드바 (.area-aside) */
/* 1-2-1. 프로필 상자 (.box-profile) */
/* 1-2-2. 목차 상자 Wrapper (.fragment-index-box-floating-wrapper) */
/* 1-2-3. 목차 상자 (.box-fragment-index) */
/* 목차 상자는 Wrapper 없이도 자립 가능해야 하므로, 목차 상자 Wrapper 내부에 있더라도 자식으로 취급 않음 */
/***** 웬만해서는 위의 계층 구조가 서술된 역순으로 css가 적용되도록 짤 것 *****/
@media screen and (max-width: 1060px) {
  #container .main .area-aside {
    position: fixed;
  }
}
@media screen and (min-width: 1061px) {
  #container .main .area-aside {
    position: relative;
  }
}
#container .main .area-aside .fragment-index-box {
  margin-top: 0 !important;
}
#container .main .area-aside .fragment-index-box * {
  color: var(--blockquote-text-color);
}
#container .main .area-aside .fragment-index-box .fixed-header:first-child {
  margin-top: 0 !important;
}
#container .main .area-aside .fragment-index-box ul, #container .main .area-aside .fragment-index-box ol, #container .main .area-aside .fragment-index-box li {
  margin-top: var(--list-vertical-margin-aside);
  margin-bottom: var(--list-vertical-margin-aside);
  padding: 0;
}
#container .main .area-aside .fragment-index-box ul:first-child, #container .main .area-aside .fragment-index-box ol:first-child, #container .main .area-aside .fragment-index-box li:first-child {
  margin-top: 0;
}
#container .main .area-aside .fragment-index-box ul:last-child, #container .main .area-aside .fragment-index-box ol:last-child, #container .main .area-aside .fragment-index-box li:last-child {
  margin-bottom: 0;
}
#container .main .area-aside .fragment-index-box ul, #container .main .area-aside .fragment-index-box ol {
  list-style: none outside none;
}
#container .main .area-aside .fragment-index-box ul li, #container .main .area-aside .fragment-index-box ol li {
  display: flex;
  flex-direction: row;
}
#container .main .area-aside .fragment-index-box ul li::before, #container .main .area-aside .fragment-index-box ol li::before {
  flex: none;
  content: attr(data-marker) ".";
  padding-right: 4px;
}
#container .main .area-aside .fragment-index-box ul li.main-index, #container .main .area-aside .fragment-index-box ol li.main-index {
  font-size: 18px;
  line-height: 26px;
}
#container .main .area-aside .fragment-index-box ul li.sub-index, #container .main .area-aside .fragment-index-box ol li.sub-index {
  font-size: 16px;
  line-height: 24px;
}
#container .main .area-aside .fragment-index-box ul li.sub-index::before, #container .main .area-aside .fragment-index-box ol li.sub-index::before {
  padding-left: 4px;
}
#container .main .area-aside .fragment-index-box ul li a, #container .main .area-aside .fragment-index-box ol li a {
  word-break: break-all;
  list-style: none outside none;
  text-decoration: none;
}
#container .main .area-aside .fragment-index-box ul li a:hover, #container .main .area-aside .fragment-index-box ol li a:hover {
  text-decoration: underline;
  color: rgba(0, 0, 0, 0.87);
}
#container .main .area-aside .fragment-index-box-floating-wrapper {
  position: relative;
  display: flex;
}
#container .main .area-aside .fragment-index-box-floating-wrapper .fragment-index-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
#container .main .area-aside .fragment-index-box-floating-wrapper .fragment-index-box .fixed-header {
  flex: 0 0 auto;
}
#container .main .area-aside .fragment-index-box-floating-wrapper .fragment-index-box .scroll-area {
  flex: 1 1 auto;
  overflow-y: auto;
}
#container .main .area-aside .fragment-index-box-floating-wrapper {
  width: max-content;
  min-width: calc(1px * var(--min-width));
  max-width: calc(100vw + 1px * var(--max-width-offset));
}
#container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-disabled {
  width: auto;
  min-width: unset;
  max-width: unset;
}
#container .main .area-aside .fragment-index-box-floating-wrapper {
  height: max-content;
  max-height: unset;
  overflow-y: visible;
}
#container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-absolute, #container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-fixed {
  height: auto;
  max-height: calc(100vh + 1px * var(--max-height-offset));
  overflow-y: auto;
}
#container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-absolute, #container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-fixed {
  box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.4);
}
#container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-absolute {
  position: absolute;
  top: 0;
}
#container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-fixed {
  position: fixed;
  top: 70px;
}
#container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-none, #container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-disabled {
  position: relative;
  box-shadow: none;
}
#container .main .area-aside .fragment-index-box-floating-wrapper .box-fragment-index-button {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}
#container .main .area-aside .fragment-index-box-floating-wrapper .box-fragment-index-button:hover {
  background-color: rgb(240, 240, 240);
}
#container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-absolute .box-fragment-index-button, #container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-fixed .box-fragment-index-button {
  background-image: url(icon-close.svg);
}
#container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-none .box-fragment-index-button {
  background-image: url(icon-float.svg);
}
#container .main .area-aside .fragment-index-box-floating-wrapper.is-floating-disabled .box-fragment-index-button {
  display: none;
}
#container .main .area-aside .box-profile .link-sns {
  display: inline-block;
  width: inherit;
  height: 34px;
  background-repeat: unset;
  background-position: unset;
  border: none;
}
#container .main .area-aside .box-profile .link-sns .icon {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #ddd;
  border-radius: 36px;
  position: relative;
}
#container .main .area-aside .box-profile .link-sns .icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#container .main .area-aside .box-profile .link-sns .icon-description {
  display: inline-block;
  height: 34px;
  line-height: 0;
  font-size: 14px;
  font-weight: 400;
  color: #777;
  vertical-align: middle;
}
@media screen and (max-width: 1060px) {
  #container .main .area-aside .box-profile {
    border-top: none;
  }
}
#container .main .article-view .contents_style code,
#container .main .article-view .contents_style .moreless-content code {
  font-family: "Consola", monospace;
  font-weight: normal;
  white-space: pre;
  overflow-x: auto;
}
#container .main .article-view .contents_style ul, #container .main .article-view .contents_style ol, #container .main .article-view .contents_style li,
#container .main .article-view .contents_style .moreless-content ul,
#container .main .article-view .contents_style .moreless-content ol,
#container .main .article-view .contents_style .moreless-content li {
  margin-top: var(--list-vertical-margin-article);
  margin-bottom: var(--list-vertical-margin-article);
  list-style-position: outside;
}
#container .main .article-view .contents_style ul a, #container .main .article-view .contents_style ol a, #container .main .article-view .contents_style li a,
#container .main .article-view .contents_style .moreless-content ul a,
#container .main .article-view .contents_style .moreless-content ol a,
#container .main .article-view .contents_style .moreless-content li a {
  display: inline;
}
#container .main .article-view .contents_style .series-box,
#container .main .article-view .contents_style .moreless-content .series-box {
  max-height: var(--series-box-max-height);
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}
#container .main .article-view .contents_style .series-box .fixed-header,
#container .main .article-view .contents_style .moreless-content .series-box .fixed-header {
  flex: 0 0 auto;
}
#container .main .article-view .contents_style .series-box .scroll-area,
#container .main .article-view .contents_style .moreless-content .series-box .scroll-area {
  flex: 1 1 auto;
  overflow-y: auto;
}
#container .main .article-view .contents_style .series-box li a,
#container .main .article-view .contents_style .moreless-content .series-box li a {
  display: inline;
}
#container .main .article-view .contents_style .series-box li.current_url,
#container .main .article-view .contents_style .moreless-content .series-box li.current_url {
  list-style: none;
}
#container .main .article-view .contents_style .series-box li.current_url::before,
#container .main .article-view .contents_style .moreless-content .series-box li.current_url::before {
  content: "→　";
}
#container .main .article-view .contents_style blockquote *:not(a):not(a *),
#container .main .article-view .contents_style .moreless-content blockquote *:not(a):not(a *) {
  color: var(--blockquote-text-color);
}
#container .main .article-view .contents_style blockquote > *:not(p, a, h1, h2, h3, h4, h5, h6, b, i, u, strong, em, small, sup, sub, br, mark, span), #container .main .article-view .contents_style td > *:not(p, a, h1, h2, h3, h4, h5, h6, b, i, u, strong, em, small, sup, sub, br, mark, span),
#container .main .article-view .contents_style .moreless-content blockquote > *:not(p, a, h1, h2, h3, h4, h5, h6, b, i, u, strong, em, small, sup, sub, br, mark, span),
#container .main .article-view .contents_style .moreless-content td > *:not(p, a, h1, h2, h3, h4, h5, h6, b, i, u, strong, em, small, sup, sub, br, mark, span) {
  margin-top: var(--vertical-margin-article);
  margin-bottom: var(--vertical-margin-article);
}
#container .main .article-view .contents_style blockquote > *:first-child, #container .main .article-view .contents_style td > *:first-child,
#container .main .article-view .contents_style .moreless-content blockquote > *:first-child,
#container .main .article-view .contents_style .moreless-content td > *:first-child {
  margin-top: 0;
}
#container .main .article-view .contents_style blockquote > *:last-child, #container .main .article-view .contents_style td > *:last-child,
#container .main .article-view .contents_style .moreless-content blockquote > *:last-child,
#container .main .article-view .contents_style .moreless-content td > *:last-child {
  margin-bottom: 0;
}
#container .main .article-view .contents_style > *:not(p, a, h1, h2, h3, h4, h5, h6, b, i, u, strong, em, small, sup, sub, br, mark, span),
#container .main .article-view .contents_style .moreless-content > *:not(p, a, h1, h2, h3, h4, h5, h6, b, i, u, strong, em, small, sup, sub, br, mark, span) {
  margin-top: var(--vertical-margin-article);
  margin-bottom: var(--vertical-margin-article);
}
#container .main .article-view .contents_style > *:first-child,
#container .main .article-view .contents_style .moreless-content > *:first-child {
  margin-top: 0;
}
#container .main .article-view .contents_style > *:last-child,
#container .main .article-view .contents_style .moreless-content > *:last-child {
  margin-bottom: 0;
}
#container .main .article-view .contents_style p a,
#container .main .article-view .contents_style .moreless-content p a {
  display: inline;
}

/***** 기타 *****/
.inner-footer {
  text-align: center;
}

/***** 기본 스킨이 제공하는 것들 중에서, 안 보이게 할 것들 따로 빼놓음 *****/
div[data-tistory-react-app=Namecard],
.another_category,
.article-page,
.article-related,
.box-site,
.box-archive,
.box-visit {
  display: none;
}

/*# sourceMappingURL=odyssey-custom.css.map */