@charset 'UTF-8';

/**
 * 사용자 정의 스타일
 */
b {
  font-weight: 700;
}

::selection {
  background-color: #2255ae;
}

.work-sequence,
.custom-box,
div[data-ke-type='moreLess'].open .btn-toggle-moreless, 
#tt-body-page div[data-ke-type='moreLess'].open .btn-toggle-moreless,
div[data-ke-type='moreLess'] .moreless-content, 
#tt-body-page div[data-ke-type='moreLess'] .moreless-content {
  background-color: #52678A;
}

.work-sequence,
.custom-box,
.copy-btn,
figure[data-ke-type='opengraph'] div.og-text p.og-title, 
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title,
div[data-ke-type='moreLess'].open .btn-toggle-moreless, 
#tt-body-page div[data-ke-type='moreLess'].open .btn-toggle-moreless {
  color: #fff;
}

.work-sequence,
.custom-box,
.copy-btn,
figure.fileblock,
#tt-body-page figure.fileblock {
  transition: .3s;
}

.work-sequence,
.custom-box {
  margin-bottom: 25px;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  word-break: keep-all;
  font-weight: 700;
}

#post-container .work-sequence p,
#post-container .custom-box p {
  margin: 0 !important;
}

.copy-btn {
  margin-left: 8px;
  padding: 0 14px;
  border: 1px solid #52678a;
  border-radius: 25px;
  background-color: transparent;
}

hr[data-ke-style],
#tt-body-page hr[data-ke-style] {
  margin: 20px auto 40px;
  filter: invert(1);
}

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

.container_postbtn {
  justify-content: right;
}

.container_postbtn .postbtn_like {
  margin-right: 10px; 
}


/**
 * 이미지 슬라이드
 */
figure.imageslideblock div.mark span {
  margin: 20px 3px;
  width: 12px;
  height: 12px;
  border-radius: 100%;
}


/**
 * 링크
 */
figure[data-ke-type='opengraph'], #tt-body-page figure[data-ke-type='opengraph'] {
  margin: 0 0 16px;
}

figure[data-ke-type='opengraph'] a, 
#tt-body-page figure[data-ke-type='opengraph'] a {
  height: 150px;
  border-radius: 16px;
  overflow: hidden;
}

figure[data-ke-type='opengraph'] div.og-text {
  padding: 24px 30px 0 30px;
}

figure[data-ke-type='opengraph'] div.og-text p.og-title, 
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title,
figure[data-ke-type='opengraph'] div.og-text p.og-desc, 
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-desc,
figure[data-ke-type='opengraph'] div.og-text p.og-host, 
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host {
  font-family: 'SUITE', sans-serif;
}

figure[data-ke-type='opengraph'] div.og-text p.og-title, 
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title {
  margin: 0 0 6px 0 !important;
  font-size: 18px;
}

figure[data-ke-type='opengraph'] div.og-text p.og-desc, 
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-desc {
  font-size: 12px;
  line-height: 1.6;
}

figure[data-ke-type='opengraph'] div.og-text p.og-host, 
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host {
  margin: 0 !important;
  bottom: 18px;
}

@media (max-width: 600px) {
  figure[data-ke-type='opengraph'] a, 
  #tt-body-page figure[data-ke-type='opengraph'] a {
    height: 90px;
  }

  figure[data-ke-type='opengraph'] div.og-text p.og-title, 
  #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title {
    font-style: 16px;
  }

  figure[data-ke-type='opengraph'] div.og-text p.og-host, 
  #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host {
    bottom: 10px;
  }
}


/**
 * 더보기
 */
div[data-ke-type='moreLess'] .btn-toggle-moreless, 
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless {
  padding: 8px 12px;
  border: 1px solid #666;
  border-radius: 20px;
  font-family: 'SUITE', sans-serif;
}

div[data-ke-type='moreLess'].open .btn-toggle-moreless, 
#tt-body-page div[data-ke-type='moreLess'].open .btn-toggle-moreless {
  padding: 8px 24px 6px;
  border: none;
  border-radius: 12px 12px 0 0;
}

div[data-ke-type='moreLess'] .moreless-content, 
#tt-body-page div[data-ke-type='moreLess'] .moreless-content {
  padding: 16px 20px;
  border-radius: 0 20px 20px;
}


/**
 * 첨부 파일
 */
figure.fileblock,
#tt-body-page figure.fileblock {
  border: 1px solid #666;
  border-radius: 16px;
}

figure.fileblock .filename,
#tt-body-page figure.fileblock .filename {
  margin: 9px 0 0;
  color: #666;
}

figure.fileblock a::after,
#tt-body-page figure.fileblock a::after {
  filter: invert(1);
  opacity: 0.4;
}

figure.fileblock .name,
#tt-body-page figure.fileblock .name {
  height: fit-content;
}


/**
 * 카테고리 다른 글 스타일 정의 
 */
#post-container .another_category_color_gray,
#post-container .another_category_color_gray h4 {
  border-color: #666 !important;
}

.another_category {
  padding: 12px 16px 8px;
  border-radius: 16px;
}

#post-container .another_category h4,
#post-container .another_category th {
  font-size: 14px !important;
}

.another_category td {
  font-style: 13.5px;
}

#post-container .another_category th,
.another_category td {
  padding: 0px 2px 4px !important;
}


/**
 * 목록 스타일 정의 
 */
#post-container ol[data-ke-list-type='decimal'], 
#post-container #tt-body-page ol[data-ke-list-type='decimal'],
#post-container ul[data-ke-list-type='disc'], 
#post-container #tt-body-page ul[data-ke-list-type='disc'] {
  margin: 0;
  padding-left: 18px;
}

#post-container ol[data-ke-list-type='decimal'] li, 
#post-container #tt-body-page ol[data-ke-list-type='decimal'] > li,
#post-container ul[data-ke-list-type='disc'] > li, 
#post-container #tt-body-page ul[data-ke-list-type='disc'] > li {
  margin-bottom: 5px;
}

#post-container ol[data-ke-list-type='decimal'] li, 
#post-container #tt-body-page ol[data-ke-list-type='decimal'] > li {
  padding-left: 2px;
}

#post-container ol[data-ke-list-type='decimal'] li::marker, 
#post-container #tt-body-page ol[data-ke-list-type='decimal'] > li::marker,
#post-container ul[data-ke-list-type='disc'] > li::marker, 
#post-container #tt-body-page ul[data-ke-list-type='disc'] > li::marker {
  color: #2255ae;
  font-weight: 700;
}


/**
 * 호버
 */
@media (hover: hover ) {
  .work-sequence:hover,
  .copy-btn:hover {
    background-color: #2255ae;
  }

  .work-sequence:hover {
    background-color: #2255ae;
    color: #fff;
  }

  .copy-btn:hover {
    border: 1px solid #2255ae;
  }

  figure.fileblock:hover,
  #tt-body-page figure.fileblock:hover,
  figure[data-ke-type='opengraph'] a:hover, 
  #tt-body-page figure[data-ke-type='opengraph'] a:hover {
    background-color: #19212f;
  }

  div[data-ke-type='moreLess'] .btn-toggle-moreless:hover, 
  #tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless:hover,
  div[data-ke-type='moreLess'].open .btn-toggle-moreless:hover, 
  #tt-body-page div[data-ke-type='moreLess'].open .btn-toggle-moreless:hover {
    background-color: #52678A;
    color: #19212f;
  }

  .another_category_color_gray tr:hover  {
    color: #2255ae !important;
  }
}