@font-face {
  font-family: "D2Coding";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NanumMyeongjo";
  font-weight: normal;
  font-style: normal;
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/NanumMyeongjo/NanumMyeongjo.eot");
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/NanumMyeongjo/NanumMyeongjo.eot?#iefix")
      format("embedded-opentype"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/NanumMyeongjo/NanumMyeongjo.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/NanumMyeongjo/NanumMyeongjo.woff") format("woff"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/NanumMyeongjo/NanumMyeongjo.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "NanumMyeongjo";
  font-weight: 700;
  font-style: normal;
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/NanumMyeongjo/NanumMyeongjoBold.eot");
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/NanumMyeongjo/NanumMyeongjoBold.eot?#iefix")
      format("embedded-opentype"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/NanumMyeongjo/NanumMyeongjoBold.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/NanumMyeongjo/NanumMyeongjoBold.woff") format("woff"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/NanumMyeongjo/NanumMyeongjoBold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "NanumBarunpen";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumBarunpen.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "NanumBarunpen";
  font-weight: 700;
  font-style: normal;
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/NanumBarunpen/NanumBarunpen-Bold.eot");
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/NanumBarunpen/NanumBarunpen-Bold.eot?#iefix")
      format("embedded-opentype"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/NanumBarunpen/NanumBarunpen-Bold.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/NanumBarunpen/NanumBarunpen-Bold.woff") format("woff"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/NanumBarunpen/NanumBarunpen-Bold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "CookieRun";
  font-weight: 400;
  font-style: normal;
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot");
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot?#iefix") format("embedded-opentype"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.woff") format("woff"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "CookieRun";
  font-weight: 700;
  font-style: normal;
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.eot");
  src: url("https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.eot?#iefix") format("embedded-opentype"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.woff") format("woff"),
    url("https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.ttf") format("truetype");
  font-display: swap;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
html {
  font-size: 18px;
}
body {
  font-size: 1rem;
  line-height: 1;
  color: #212529;
  background-color: #fff;
}
.dark-theme body {
  background-color: #22272e;
  color: #dee2e6;
}
@media screen and (max-width: 992px) {
  html {
    font-size: 16px;
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  transition-property: background-color, color, box-shadow;
  border-radius: 8px;
  border: none;
  padding: 1rem;
  margin: 0;
}
.floating-btn {
  width: 52px;
  height: 52px;
  border-radius: 100%;
  background-color: #f1f3f5;
  color: #212529;
}
.floating-btn svg {
  width: 1rem;
}
.floating-btn:hover {
  background-color: #dbe4ff;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
.btn-primary {
  background-color: #4c6ef5;
  color: #dee2e6;
}
.btn-primary:hover {
  background-color: #364fc7;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
.btn-secondary {
  background-color: #e64980;
  color: #dee2e6;
}
.btn-secondary:hover {
  background-color: #a61e4d;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
.btn-text {
  background-color: inherit;
  color: #212529;
}
.btn-text:hover {
  background-color: #f1f3f5;
}
.btn-primary-text {
  background-color: inherit;
  color: #212529;
}
.btn-primary-text:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  background-color: #dbe4ff;
}
.btn-secondary-text {
  background-color: inherit;
  color: #212529;
}
.btn-secondary-text:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  background-color: #ffdeeb;
}
.link,
.link-sub {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  transition-property: color;
}
.link {
  color: #212529;
}
.link-sub {
  color: #868e96;
}
.link-primary:hover {
  color: #4c6ef5;
}
.link-secondary:hover {
  color: #e64980;
}
.alert {
  border-radius: 8px;
  box-sizing: border-box;
  padding: 1rem;
}
.alert:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
.alert-warning {
  border: 1px solid #ffa94d;
  background-color: #fff4e6;
}
.alert-warning:before {
  content: "⚠";
  margin-right: 0.8rem;
}
.tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 0.8rem;
  column-gap: 0.8rem;
}
.tags .cloud1 {
  background-color: #d6e4ff;
}
.tags .cloud1:hover {
  background-color: #2f54eb;
}
.tags .cloud2 {
  background-color: #efdbff;
}
.tags .cloud2:hover {
  background-color: #722ed1;
}
.tags .cloud3 {
  background-color: #ffd6e7;
}
.tags .cloud3:hover {
  background-color: #eb2f96;
}
.tags .cloud4 {
  background-color: #b5f5ec;
}
.tags .cloud4:hover {
  background-color: #13c2c2;
}
.tags .cloud5 {
  background-color: #ffe7ba;
}
.tags .cloud5:hover {
  background-color: #fa8c16;
}
.tag {
  text-decoration: none;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  column-gap: 2px;
  font-size: 0.85rem;
  color: #212529;
  background-color: #f1f3f5;
  transition: all 0.15s ease-in-out;
}
.tag:before {
  content: "#";
}
.tag:hover {
  background-color: #343a40;
  color: #dee2e6;
}
.img-circle {
  border-radius: 100%;
  overflow: hidden;
}
.dark-theme .btn-text {
  color: #dee2e6;
}
.dark-theme .btn-text:hover {
  background-color: #343a40;
}
.dark-theme .floating-btn {
  background-color: #343a40;
  color: #dee2e6;
}
.dark-theme .floating-btn:hover {
  background-color: #263ea0;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme .btn-primary {
  background-color: #5273e0;
  color: #dee2e6;
}
.dark-theme .btn-primary:hover {
  background-color: #263ea0;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme .btn-secondary {
  background-color: #e0529c;
  color: #dee2e6;
}
.dark-theme .btn-secondary:hover {
  background-color: #75204f;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
.dark-theme .btn-primary-text {
  background-color: inherit;
  color: #dee2e6;
}
.dark-theme .btn-primary-text:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
  background-color: #263ea0;
}
.dark-theme .btn-secondary-text {
  background-color: inherit;
  color: #dee2e6;
}
.dark-theme .btn-secondary-text:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
  background-color: #75204f;
}
.dark-theme .link {
  color: #dee2e6;
}
.dark-theme .link-sub {
  color: #adb5bd;
}
.dark-theme .link-primary:hover {
  color: #a8c1f8;
}
.dark-theme .link-secondary:hover {
  color: #f8a8cc;
}
.dark-theme .alert:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme .alert-warning {
  border: 1px solid #aa6215;
  background-color: #d87a16;
}
.dark-theme .tags .cloud1 {
  background-color: #263ea0;
}
.dark-theme .tags .cloud1:hover {
  background-color: #7f9ef3;
}
.dark-theme .tags .cloud2 {
  background-color: #51258f;
}
.dark-theme .tags .cloud2:hover {
  background-color: #ab7ae0;
}
.dark-theme .tags .cloud3 {
  background-color: #a02669;
}
.dark-theme .tags .cloud3:hover {
  background-color: #f37fb7;
}
.dark-theme .tags .cloud4 {
  background-color: #138585;
}
.dark-theme .tags .cloud4:hover {
  background-color: #58d1c9;
}
.dark-theme .tags .cloud5 {
  background-color: #aa6215;
}
.dark-theme .tags .cloud5:hover {
  background-color: #f3b765;
}
.dark-theme .tag {
  color: #dee2e6;
  background-color: #343a40;
}
.dark-theme .tag:hover {
  background-color: #f1f3f5;
  color: #212529;
}
@-webkit-keyframes fade {
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fade {
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar {
  display: none;
}
body .container {
  flex: 1;
  display: flex;
}
body .container .main-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
main .index-article-item {
  display: flex;
  column-gap: 2rem;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
main .index-article-item:nth-child(even) {
  flex-direction: row-reverse;
}
main .index-article-item .article-thumbnail-circle {
  border-radius: 100%;
}
main .index-article-item .article-thumbnail-rectangle {
  border-radius: 0;
}
main .index-article-item .article-thumbnail-round-rectangle {
  border-radius: 8px;
}
main .index-article-item .img-wrapper {
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(45deg, #ffdeeb, #dbe4ff);
}
main .index-article-item .img-wrapper:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
main .index-article-item .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main .index-article-item .detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
}
main .index-article-item .detail .title {
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.5;
}
main .index-article-item .detail .summary {
  line-height: 1.75;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
main .index-article-item .detail .sub-detail {
  column-gap: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
}
main .index-article-item .detail .sub-detail a.category,
main .index-article-item .detail .sub-detail span.date-info,
main .index-article-item .detail .sub-detail .comment-count {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
main .index-article-item .detail .sub-detail span.date-info,
main .index-article-item .detail .sub-detail .comment-count {
  color: #868e96;
}
.dark-theme main .index-article-item {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme main .index-article-item .img-wrapper {
  background: linear-gradient(-45deg, #5273e0, #263ea0);
}
.dark-theme main .index-article-item .img-wrapper:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme main .index-article-item .detail .sub-detail span.date-info,
.dark-theme main .index-article-item .detail .sub-detail .comment-count {
  color: #adb5bd;
}
@media screen and (max-width: 768px) {
  main .index-article-item {
    padding: 1rem;
  }
  main .index-article-item .img-wrapper {
    width: 140px;
    height: 140px;
  }
  main .index-article-item .detail .sub-detail span.comment-count {
    display: none;
  }
}
@media screen and (max-width: 567px) {
  main .index-article-item {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 1rem;
    padding: 1rem 0.8rem;
  }
  main .index-article-item:nth-child(even) {
    flex-direction: column;
  }
  main .index-article-item .img-wrapper {
    width: 100%;
    height: 280px;
    border-radius: 8px;
  }
}
main .common-article-container {
  max-width: 1430px;
  box-sizing: border-box;
  display: flex;
  column-gap: 1rem;
}
main .common-article-container .main-content {
  max-width: 1100px;
  width: 100%;
  word-break: break-all;
}
main .common-article-container #toc-container {
  display: none;
  word-break: break-all;
  flex: 1;
  box-sizing: border-box;
}
main .common-article-container #toc-container .toc-wrapper {
  position: sticky;
  top: 100px;
  left: 0;
  height: auto;
  width: 100%;
  background-color: #f1f3f5;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 0.8rem;
  max-height: 80vh;
  overflow: auto;
  font-size: 0.85rem;
}
main .common-article-container #toc-container .toc-wrapper ul.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
}
main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item1 a,
main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item2 a,
main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item3 a,
main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item4 a {
  line-height: 1.5;
  font-size: 0.85rem;
  text-decoration: none;
  color: #212529;
  transition: all 0.15s ease-in-out;
}
main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item1 a:hover,
main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item2 a:hover,
main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item3 a:hover,
main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item4 a:hover {
  color: #4c6ef5;
}
main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item2 {
  padding-left: 3px;
}
main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item3 {
  padding-left: 6px;
}
main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item4 {
  padding-left: 9px;
}
main .article-title-layer {
  position: relative;
  width: 100%;
  height: 340px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2rem;
}
main .article-title-layer .img-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
main .article-title-layer .img-layer img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
main .article-title-layer .background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(73, 80, 87, 0.75);
}
main .article-title-layer .txt-layer {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 0.8rem;
  box-sizing: border-box;
}
main .article-title-layer .txt-layer .date {
  display: flex;
  column-gap: 0.8rem;
  align-items: center;
  color: #dee2e6;
  font-size: 0.85rem;
}
main .article-title-layer .txt-layer .title {
  color: #dee2e6;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  transition-property: color;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 2px 2px 2px #343a40;
  line-height: 1.5;
  text-align: center;
}
main .article-title-layer .txt-layer .title:hover {
  color: #4c6ef5;
}
main .article-title-layer .txt-layer .category {
  display: flex;
  column-gap: 0.8rem;
  align-items: center;
  color: #dee2e6;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  transition-property: color;
  text-shadow: 2px 2px 2px #343a40;
}
main .article-title-layer .txt-layer .category:hover {
  color: #e64980;
}
main .article-title-layer .txt-layer .control {
  margin-top: 2rem;
  display: flex;
  column-gap: 1rem;
  align-items: center;
}
main .article-title-layer .txt-layer .control a {
  font-size: 0.85rem;
  color: #dee2e6;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  transition-property: color;
}
main .article-title-layer .txt-layer .control a:hover {
  color: #e64980;
}
main .common-article-container .article-body .contents_style {
  width: 100%;
  box-sizing: border-box;
  line-height: 2;
  word-break: break-all;
  font-size: 1rem;
}
main .common-article-container .article-body .contents_style ul,
main .common-article-container .article-body .contents_style ol {
  margin: 1rem 0;
}
main .common-article-container .article-body .contents_style li {
  margin-left: 3rem;
}
main .common-article-container .article-body .contents_style a {
  color: #4c6ef5;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
main .common-article-container .article-body .contents_style a svg {
  margin-left: 0.5rem;
}
main .common-article-container .article-body .contents_style a:hover {
  background-color: #dbe4ff;
}
main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a {
  border-radius: 8px;
  overflow: hidden;
  background-color: inherit;
  border: 1px solid #f1f3f5;
}
main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a .og-image {
  border-right: 1px solid #f1f3f5;
  transition: all 0.15s ease-in-out;
}
main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a .og-title {
  color: #212529;
}
main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a .og-desc,
main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a .og-host {
  color: #868e96;
}
main .common-article-container .article-body .contents_style hr {
  margin: 2rem auto;
}
main .common-article-container .article-body .contents_style h1,
main .common-article-container .article-body .contents_style h2,
main .common-article-container .article-body .contents_style h3,
main .common-article-container .article-body .contents_style h4 {
  margin: 1rem 0;
  font-weight: bold;
}
main .common-article-container .article-body .contents_style h1 a,
main .common-article-container .article-body .contents_style h2 a,
main .common-article-container .article-body .contents_style h3 a,
main .common-article-container .article-body .contents_style h4 a {
  color: #212529;
}
main .common-article-container .article-body .contents_style h1 a:hover,
main .common-article-container .article-body .contents_style h2 a:hover,
main .common-article-container .article-body .contents_style h3 a:hover,
main .common-article-container .article-body .contents_style h4 a:hover {
  color: #4c6ef5;
  background-color: rgba(0, 0, 0, 0);
}
main .common-article-container .article-body .contents_style h1 {
  border-bottom: 1px solid #f1f3f5;
}
main .common-article-container .article-body .contents_style h2 {
  font-size: 2rem;
}
main .common-article-container .article-body .contents_style h3 {
  font-size: 1.5rem;
}
main .common-article-container .article-body .contents_style h4 {
  font-size: 1rem;
}
main .common-article-container .article-body .contents_style sup {
  color: #e64980;
  vertical-align: super;
}
main .common-article-container .article-body .contents_style sub {
  color: #e64980;
  vertical-align: sub;
}
main .common-article-container .article-body .contents_style blockquote[data-ke-style="style2"],
main .common-article-container .article-body .contents_style blockquote[data-ke-style="style3"] {
  border-radius: 8px;
  border: none;
  padding: 2rem;
  margin: 1rem 0;
  box-sizing: border-box;
}
main .common-article-container .article-body .contents_style blockquote[data-ke-style="style2"]:before,
main .common-article-container .article-body .contents_style blockquote[data-ke-style="style3"]:before {
  font-weight: bold;
  margin-right: 1rem;
}
main .common-article-container .article-body .contents_style blockquote[data-ke-style="style2"] {
  background-color: #d9f7be;
  transition: all 0.15s ease-in-out;
}
main .common-article-container .article-body .contents_style blockquote[data-ke-style="style2"]:before {
  content: "💡 Tip";
  color: #52c41a;
}
main .common-article-container .article-body .contents_style blockquote[data-ke-style="style2"]:hover {
  box-shadow: 0px 4px 10px 2px rgba(35, 120, 4, 0.2);
}
main .common-article-container .article-body .contents_style blockquote[data-ke-style="style3"] {
  background-color: #dbe4ff;
  transition: all 0.15s ease-in-out;
}
main .common-article-container .article-body .contents_style blockquote[data-ke-style="style3"]:before {
  content: "📑 NOTE";
  color: #4c6ef5;
}
main .common-article-container .article-body .contents_style blockquote[data-ke-style="style3"]:hover {
  box-shadow: 0px 4px 10px 2px rgba(54, 79, 199, 0.2);
}
main .common-article-container .article-body .contents_style pre {
  margin: 1rem 0;
  border-radius: 8px;
  font-size: 1rem;
}
main .common-article-container .article-body .contents_style pre .pre-before-node {
  display: flex;
  align-items: center;
  background-color: #212529;
  padding: 0 0.8rem;
  height: 38px;
}
main .common-article-container .article-body .contents_style pre .pre-before-node .btn-wrapper {
  width: 150px;
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
main .common-article-container .article-body .contents_style pre .pre-before-node .btn-wrapper .mac-btn {
  width: 12px;
  height: 12px;
  border-radius: 100%;
}
main .common-article-container .article-body .contents_style pre .pre-before-node .btn-wrapper .red-mac-btn {
  background-color: #fa5252;
}
main .common-article-container .article-body .contents_style pre .pre-before-node .btn-wrapper .orange-mac-btn {
  background-color: #fab005;
}
main .common-article-container .article-body .contents_style pre .pre-before-node .btn-wrapper .green-mac-btn {
  background-color: #51cf66;
}
main .common-article-container .article-body .contents_style pre .pre-before-node .language {
  font-family: "D2Coding", system-ui, Apple Gothic, sans-serif;
  flex: 1;
  color: #868e96;
  font-size: 0.85rem;
  text-align: center;
}
main .common-article-container .article-body .contents_style pre .pre-before-node .code-copy-button-wrapper {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
main
  .common-article-container
  .article-body
  .contents_style
  pre
  .pre-before-node
  .code-copy-button-wrapper
  .code-copy-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: inherit;
  font-size: 0.85rem;
  height: 100%;
  color: #868e96;
}
main
  .common-article-container
  .article-body
  .contents_style
  pre
  .pre-before-node
  .code-copy-button-wrapper
  .code-copy-button:hover {
  color: #adb5bd;
}
main .common-article-container .article-body .contents_style pre code {
  font-family: "D2Coding", system-ui, Apple Gothic, sans-serif;
  padding: 1rem;
  box-sizing: border-box;
}
main .common-article-container .article-body .contents_style pre code::-webkit-scrollbar {
  display: none;
}
main .common-article-container .article-body .contents_style p {
  word-break: break-word;
}
main .common-article-container .article-body .contents_style p code,
main .common-article-container .article-body .contents_style li code,
main .common-article-container .article-body .contents_style a code {
  color: #212529;
  background-color: #dbe4ff;
  border: 1px solid #364fc7;
  border-radius: 4px;
  padding: 0 2px;
}
.dark-theme main .common-article-container .txt-layer .title:hover {
  color: #5273e0;
}
.dark-theme main .common-article-container .txt-layer .category:hover {
  color: #e0529c;
}
.dark-theme main .common-article-container .txt-layer .control:hover {
  color: #e0529c;
}
.dark-theme main .common-article-container #toc-container .toc-wrapper {
  background-color: #343a40;
}
.dark-theme main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item1 a,
.dark-theme main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item2 a,
.dark-theme main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item3 a,
.dark-theme main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item4 a {
  color: #dee2e6;
}
.dark-theme main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item1 a:hover,
.dark-theme main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item2 a:hover,
.dark-theme main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item3 a:hover,
.dark-theme main .common-article-container #toc-container .toc-wrapper ul.toc-list .toc-item4 a:hover {
  color: #5273e0;
}
.dark-theme main .common-article-container .article-body .contents_style a {
  color: #a8c1f8;
}
.dark-theme main .common-article-container .article-body .contents_style a:hover {
  background-color: #263ea0;
}
.dark-theme main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a {
  background-color: inherit;
  border: 1px solid #343a40;
}
.dark-theme main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a .og-image {
  border-right: 1px solid #343a40;
}
.dark-theme main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a .og-title {
  color: #dee2e6;
}
.dark-theme main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a .og-desc,
.dark-theme main .common-article-container .article-body .contents_style figure[data-ke-type="opengraph"] a .og-host {
  color: #adb5bd;
}
.dark-theme main .common-article-container .article-body .contents_style sup,
.dark-theme main .common-article-container .article-body .contents_style sub {
  color: #e0529c;
}
.dark-theme main .common-article-container .article-body .contents_style h1 {
  border-bottom: 1px solid #343a40;
}
.dark-theme main .common-article-container .article-body .contents_style h1 a,
.dark-theme main .common-article-container .article-body .contents_style h2 a,
.dark-theme main .common-article-container .article-body .contents_style h3 a,
.dark-theme main .common-article-container .article-body .contents_style h4 a {
  color: #dee2e6;
}
.dark-theme main .common-article-container .article-body .contents_style h1 a:hover,
.dark-theme main .common-article-container .article-body .contents_style h2 a:hover,
.dark-theme main .common-article-container .article-body .contents_style h3 a:hover,
.dark-theme main .common-article-container .article-body .contents_style h4 a:hover {
  color: #5273e0;
  background-color: rgba(0, 0, 0, 0);
}
.dark-theme main .common-article-container .article-body .contents_style blockquote[data-ke-style="style2"] {
  background-color: #3c8618;
  color: #dee2e6;
}
.dark-theme main .common-article-container .article-body .contents_style blockquote[data-ke-style="style2"]:before {
  content: "💡 Tip";
  color: #b2e58b;
  text-shadow: 2px 2px 2px #343a40;
}
.dark-theme main .common-article-container .article-body .contents_style blockquote[data-ke-style="style2"]:hover {
  box-shadow: 0px 4px 10px 2px rgba(29, 55, 18, 0.8);
}
.dark-theme main .common-article-container .article-body .contents_style blockquote[data-ke-style="style3"] {
  background-color: #263ea0;
  color: #dee2e6;
}
.dark-theme main .common-article-container .article-body .contents_style blockquote[data-ke-style="style3"]:before {
  content: "📑 NOTE";
  color: #a8c1f8;
  text-shadow: 2px 2px 2px #343a40;
}
.dark-theme main .common-article-container .article-body .contents_style blockquote[data-ke-style="style3"]:hover {
  box-shadow: 0px 4px 10px 2px rgba(22, 29, 64, 0.8);
}
.dark-theme main .common-article-container .article-body .contents_style p code,
.dark-theme main .common-article-container .article-body .contents_style li code,
.dark-theme main .common-article-container .article-body .contents_style a code {
  color: #212529;
  background-color: #a8c1f8;
  border: 1px solid #263ea0;
  border-radius: 4px;
  padding: 0 2px;
}
@media screen and (max-width: 1740px) {
  main .common-article-container {
    max-width: 1150px;
  }
  main .common-article-container .main-content {
    max-width: 1000px;
  }
}
@media screen and (max-width: 1740px) {
  main .common-article-container {
    max-width: 1150px;
  }
  main .common-article-container .main-content {
    max-width: 900px;
  }
}
@media screen and (max-width: 1460px) {
  main .common-article-container {
    max-width: 1000px;
  }
  main .common-article-container .main-content {
    max-width: 720px;
  }
}
@media screen and (max-width: 1280px) {
  main .common-article-container {
    max-width: 1050px;
  }
  main .common-article-container .main-content {
    max-width: 780px;
  }
}
@media screen and (max-width: 992px) {
  main .common-article-container {
    max-width: 900px;
  }
  main .common-article-container #toc-container {
    display: none !important;
  }
  main .common-article-container .main-content {
    max-width: 900px;
    width: 100%;
  }
}
.intro-card {
  background: linear-gradient(45deg, #4c6ef5, #e64980);
  width: 100%;
  height: 200px;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
}
.intro-card:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
.intro-card .img-wrapper {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.intro-card .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-card .intro {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.intro-card .intro p {
  color: #dee2e6;
}
.intro-card .intro .blogger {
  font-size: 0.85rem;
}
.intro-card .intro .desc {
  font-size: 0.85rem;
  line-height: 1.5;
}
.dark-theme .intro-card {
  background: linear-gradient(45deg, #5273e0, #e0529c);
}
.dark-theme .intro-card:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
.reply-container .reply-write-form form {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.reply-container .reply-write-form form .input-item {
  display: flex;
  align-items: center;
  column-gap: 1rem;
  color: #868e96;
}
.reply-container .reply-write-form form .input-item label {
  min-width: 200px;
  display: flex;
  align-items: center;
  column-gap: 0.8rem;
  font-size: 0.85rem;
}
.reply-container .reply-write-form form .input-item input {
  color: #212529;
  border: none;
  background-color: #f1f3f5;
  width: 320px;
  transition: all 0.15s ease-in-out;
  padding: 0.8rem;
  box-sizing: border-box;
  border-radius: 8px;
}
.reply-container .reply-write-form form .input-item input:focus {
  width: 100%;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  outline: none;
}
.reply-container .reply-write-form form .input-item input[type="checkbox"] {
  width: auto;
}
.reply-container .reply-write-form form .input-item textarea {
  color: #212529;
  border: none;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: #f1f3f5;
  min-height: 200px;
}
.reply-container .reply-write-form form .input-item textarea:focus {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  outline: none;
}
.reply-container .reply-write-form form .textarea-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0.8rem;
}
.reply-container .reply-list-container {
  margin-top: 2rem;
}
.reply-container .reply-list-container .reply-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}
.reply-container .reply-list-container .reply-list .reply-item {
  display: flex;
  column-gap: 1rem;
  padding: 1rem 0;
  margin-bottom: 1rem;
}
.reply-container .reply-list-container .reply-list .reply-item .left-area {
  width: 100px;
}
.reply-container .reply-list-container .reply-list .reply-item .left-area .img-wrapper {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 100%;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
.reply-container .reply-list-container .reply-list .reply-item .left-area .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reply-container .reply-list-container .reply-list .reply-item .right-area {
  flex: 1;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.reply-container .reply-list-container .reply-list .reply-item .right-area .name-wrapper {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
.reply-container .reply-list-container .reply-list .reply-item .right-area .name-wrapper a {
  text-decoration: none;
  color: #4c6ef5;
  transition: all 0.15s ease-in-out;
}
.reply-container .reply-list-container .reply-list .reply-item .right-area .name-wrapper a:hover {
  color: #364fc7;
}
.reply-container .reply-list-container .reply-list .reply-item .right-area .desc {
  line-height: 1.75;
  word-break: break-all;
}
.reply-container .reply-list-container .reply-list .reply-item .right-area .control {
  column-gap: 1rem;
  display: flex;
  align-items: center;
}
.reply-container .reply-list-container .reply-list .reply-item .right-area .control > a,
.reply-container .reply-list-container .reply-list .reply-item .right-area .control > span {
  display: flex;
  column-gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
}
.reply-container .reply-list-container .reply-list .reply-item .right-area .control .date {
  color: #868e96;
}
.reply-container .reply-list-container .reply-list .reply-item .right-area .control .date a {
  text-decoration: none;
  color: #e64980;
  transition: all 0.15s ease-in-out;
}
.reply-container .reply-list-container .reply-list .reply-item .right-area .control .date a:hover {
  color: #a61e4d;
}
.reply-container .reply-list-container .reply-list .reply-item .reply-sub-list {
  margin-left: 2rem;
}
.reply-container .reply-list-container .reply-sub-list {
  list-style: none;
  margin-left: 2rem;
}
.reply-container #tt_captChaBottom {
  display: block;
  position: static;
}
.reply-container #tt_captChaBottom .wrap_box_border {
  display: none;
}
.reply-container #innerBox {
  margin-top: 0.8rem;
  position: static !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.8rem;
  width: 100%;
  box-sizing: border-box;
}
.reply-container #innerBox #inputCaptcha {
  border: none;
  color: #212529;
  background-color: #f1f3f5;
  border-radius: 8px !important;
  padding: 0.8rem;
}
.reply-container #innerBox #textRefresh {
  color: #212529;
}
.reply-container #innerBox #noticeCaptcha {
  color: #212529;
}
.dark-theme .reply-container .reply-write-form form .input-item {
  color: #adb5bd;
}
.dark-theme .reply-container .reply-write-form form .input-item input,
.dark-theme .reply-container .reply-write-form form .input-item textarea {
  color: #dee2e6;
  background-color: #343a40;
}
.dark-theme .reply-container .reply-write-form form .input-item input:focus,
.dark-theme .reply-container .reply-write-form form .input-item textarea:focus {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme .reply-container .reply-list-container .reply-list .reply-item .left-area .img-wrapper {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme .reply-container .reply-list-container .reply-list .reply-item .right-area .name-wrapper {
  display: flex;
  align-items: center;
  column-gap: 0.8rem;
}
.dark-theme .reply-container .reply-list-container .reply-list .reply-item .right-area .name-wrapper a {
  color: #5273e0;
}
.dark-theme .reply-container .reply-list-container .reply-list .reply-item .right-area .name-wrapper a:hover {
  color: #263ea0;
}
.dark-theme .reply-container .reply-list-container .reply-list .reply-item .right-area .control .date {
  color: #adb5bd;
}
.dark-theme .reply-container .reply-list-container .reply-list .reply-item .right-area .control .date a {
  color: #e64980;
}
.dark-theme .reply-container .reply-list-container .reply-list .reply-item .right-area .control .date a:hover {
  color: #a61e4d;
}
.dark-theme .reply-container #innerBox #inputCaptcha {
  color: #dee2e6;
  background-color: #343a40;
}
.dark-theme .reply-container #innerBox #textRefresh {
  color: #dee2e6;
}
.dark-theme .reply-container #innerBox #noticeCaptcha {
  color: #dee2e6;
}
@media screen and (max-width: 992px) {
  .reply-container .reply-write-form form .input-item label {
    min-width: 170px;
  }
  .reply-container .reply-list-container .reply-list .reply-item .left-area {
    width: 80px;
  }
  .reply-container .reply-list-container .reply-list .reply-item .left-area .img-wrapper {
    width: 80px;
    height: 80px;
  }
  .reply-container .reply-list-container .reply-list .reply-item .right-area .control > a > span {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .reply-container .reply-write-form form .input-item label {
    min-width: 120px;
  }
}
@media screen and (max-width: 567px) {
  .reply-container .reply-write-form form .input-item input {
    width: 250px;
  }
  .reply-container .reply-list-container .reply-list .reply-item .left-area {
    width: 70px;
  }
  .reply-container .reply-list-container .reply-list .reply-item .left-area .img-wrapper {
    width: 70px;
    height: 70px;
  }
  .reply-container .reply-list-container .reply-list .reply-item .right-area .control {
    flex-direction: column;
    row-gap: 0.5rem;
    align-items: flex-start;
  }
  .reply-container .reply-list-container .reply-list .reply-item .right-area .control > a > span {
    display: flex;
  }
  .reply-container .reply-list-container .reply-sub-list {
    list-style: none;
    margin-left: 1rem;
  }
}
@media screen and (max-width: 320px) {
  .reply-container .reply-write-form form .input-item input {
    width: 200px;
  }
}
.protected-article-container {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  border-radius: 8px;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  padding: 2rem;
}
.protected-article-container .article-info {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.protected-article-container .article-info a {
  font-size: 1.5rem;
  font-weight: bold;
}
.protected-article-container .article-info .date {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  column-gap: 0.5rem;
  color: #868e96;
}
.protected-article-container .password-form {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.protected-article-container .password-form .password-form-item {
  display: flex;
  align-items: center;
}
.protected-article-container .password-form .password-form-item label {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  column-gap: 0.5rem;
  color: #868e96;
  width: 150px;
}
.protected-article-container .password-form .password-form-item input {
  width: 320px;
  transition: all 0.15s ease-in-out;
  background-color: #f1f3f5;
  border-radius: 8px;
  padding: 0.8rem;
  border: none;
  color: #212529;
}
.protected-article-container .password-form .password-form-item input:focus {
  flex: 1;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  outline: none;
}
.dark-theme .protected-article-container {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme .protected-article-container .article-info .date {
  color: #adb5bd;
}
.dark-theme .protected-article-container .password-form .password-form-item label {
  color: #adb5bd;
}
.dark-theme .protected-article-container .password-form .password-form-item input {
  background-color: #343a40;
  color: #dee2e6;
}
.dark-theme .protected-article-container .password-form .password-form-item input:focus {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.paging-container {
  max-width: 1430px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.paging-container .paging-prev-n-next-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #212529;
  transition: all 0.15s ease-in-out;
}
.paging-container .paging-prev-n-next-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}
.paging-container .paging-prev-n-next-btn:hover {
  color: #4c6ef5;
}
.paging-container .no-more-prev,
.paging-container .no-more-next {
  color: #868e96 !important;
}
.paging-container .no-more-prev:hover,
.paging-container .no-more-next:hover {
  cursor: not-allowed;
}
.paging-container .numbox {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.8rem;
}
.paging-container a {
  display: block;
  width: 35px;
  height: 35px;
  font-size: 1rem;
  text-decoration: none;
}
.paging-container a span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #212529;
  transition: all 0.15s ease-in-out;
}
.paging-container a span:hover {
  color: #4c6ef5;
}
.paging-container a .selected {
  color: #4c6ef5 !important;
}
.paging-container a .selected:hover {
  cursor: not-allowed;
}
.dark-theme .paging-container .paging-prev-n-next-btn {
  color: #dee2e6;
}
.dark-theme .paging-container .paging-prev-n-next-btn:hover {
  color: #5273e0;
}
.dark-theme .paging-container .no-more-prev,
.dark-theme .paging-container .no-more-next {
  color: #adb5bd !important;
}
.dark-theme .paging-container a span {
  color: #dee2e6;
}
.dark-theme .paging-container a span:hover {
  color: #5273e0;
}
.dark-theme .paging-container a .selected {
  color: #5273e0 !important;
}
@media screen and (max-width: 1740px) {
  .paging-container {
    max-width: 1150px;
  }
}
@media screen and (max-width: 1460px) {
  .paging-container {
    max-width: 1000px;
  }
}
@media screen and (max-width: 1280px) {
  .paging-container {
    max-width: 1050px;
  }
}
@media screen and (max-width: 992px) {
  .paging-container {
    max-width: 900px;
  }
}
.guestbook-container {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.guestbook-container h2.guestbook-title {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.8rem;
  font-size: 1.5rem;
  color: #868e96;
  font-weight: normal;
}
.dark-theme .guestbook-container h2.guestbook-title {
  color: #adb5bd;
}
.tag-cloud-container {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.tag-cloud-container .tag-title {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.8rem;
  font-size: 1.5rem;
  color: #868e96;
  font-weight: normal;
}
.dark-theme .tag-cloud-container .tag-title {
  color: #adb5bd;
}
.recommend-article-card-container {
  position: fixed;
  bottom: -800px;
  padding: 1rem;
  width: 340px;
  min-height: 130px;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  background-color: #f1f3f5;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  z-index: 60;
  border-radius: 8px;
  transition: all 0.15s ease-in-out;
  transition-property: bottom;
}
.recommend-article-card-container a.img-wrapper {
  display: block;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 100%;
  cursor: pointer;
}
.recommend-article-card-container a.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recommend-article-card-container a.img-wrapper:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
.recommend-article-card-container .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.recommend-article-card-container .info p.card-type {
  font-size: 0.85rem;
  color: #868e96;
  font-weight: bold;
}
.recommend-article-card-container .info a {
  line-height: 1.5;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.recommend-article-card-container .info p.date {
  font-size: 0.85rem;
  color: #868e96;
}
.prev-recommend-article-card-container {
  left: 8vw;
}
.next-recommend-article-card-container {
  right: 10vw;
}
.dark-theme .recommend-article-card-container {
  background-color: #343a40;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme .recommend-article-card-container a.img-wrapper:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme .recommend-article-card-container .info p.date {
  color: #adb5bd;
}
@media screen and (max-width: 992px) {
  .recommend-article-card-container {
    width: 280px;
    padding: 0.8rem;
  }
  .recommend-article-card-container a.img-wrapper {
    width: 100px;
    height: 100px;
  }
  .prev-recommend-article-card-container {
    left: 5vw;
  }
  .next-recommend-article-card-container {
    right: 12vw;
  }
}
@media screen and (max-width: 768px) {
  .recommend-article-card-container {
    display: none;
  }
}
.permalink-tags {
  display: flex;
  align-items: center;
  row-gap: 0.5rem;
  flex-wrap: wrap;
}
.permalink-tags a {
  color: #212529;
  display: inline-block;
  padding: 0.5rem;
  font-size: 0.75rem;
  text-decoration: none;
  background-color: #f1f3f5;
  transition: all 0.15s ease-in-out;
  margin-left: 0.5rem;
}
.permalink-tags a:first-child {
  margin-left: 0;
}
.permalink-tags a:before {
  content: "#";
}
.permalink-tags a:hover {
  background-color: #dbe4ff;
}
.dark-theme .permalink-tags a {
  color: #dee2e6;
  background-color: #343a40;
}
.dark-theme .permalink-tags a:hover {
  background-color: #5273e0;
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
main .upper-ad-container,
main .lower-ad-container {
  max-width: 1430px;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  margin: 0;
}
main .article-container {
  max-width: 1430px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  padding: 0 1rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 1740px) {
  main .upper-ad-container,
  main .lower-ad-container,
  main .article-container {
    max-width: 1150px;
  }
}
@media screen and (max-width: 1460px) {
  main .upper-ad-container,
  main .lower-ad-container,
  main .article-container {
    max-width: 1000px;
  }
}
@media screen and (max-width: 1280px) {
  main .upper-ad-container,
  main .lower-ad-container,
  main .article-container {
    max-width: 1050px;
  }
}
@media screen and (max-width: 992px) {
  main .upper-ad-container,
  main .lower-ad-container,
  main .article-container {
    max-width: 900px;
  }
}
header {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  height: 80px;
  padding: 0 2rem;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(7px);
  column-gap: 1rem;
  z-index: 98;
  transition: all 0.15s ease-in-out;
  transition-property: top;
}
header #sidebar-open-btn {
  display: none;
}
header a.title {
  font-size: 1.5rem;
  flex: 1;
}
header .menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  column-gap: 1rem;
}
header .menu button {
  width: 50px;
  height: 50px;
}
header #theme-btn .bi-moon {
  display: inline;
}
header #theme-btn .bi-sun {
  display: none;
}
.dark-theme header {
  background-color: rgba(34, 39, 46, 0.7);
}
.dark-theme header a.title {
  color: #dee2e6;
}
@media screen and (max-width: 1280px) {
  header #sidebar-open-btn {
    display: block;
  }
}
@media screen and (max-width: 992px) {
  header .menu {
    display: none;
  }
}
.progress-bar {
  position: sticky;
  top: 0;
  left: 0;
  height: 3px;
  z-index: 99;
}
.progress-bar .fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #e64980, #4c6ef5);
}
.dark-theme .progress-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #e0529c, #5273e0);
}
.fake-search-input {
  border: none;
  padding: 0.8rem;
  background-color: #f1f3f5;
  border-radius: 4px;
  width: 240px;
}
.fake-search-input:focus {
  outline: none;
}
.search-layer {
  display: flex;
  justify-content: center;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 99;
  background-color: rgba(33, 37, 41, 0.5);
  backdrop-filter: blur(12px);
}
.search-layer .search-popup {
  margin-top: 200px;
  width: 70vw;
  min-height: 150px;
  max-height: 300px;
  overflow-y: scroll;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  padding: 2rem;
}
.search-layer .search-popup::-webkit-scrollbar {
  display: none;
}
.search-layer .search-popup .search-form {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
.search-layer .search-popup .search-form .search-input {
  flex: 1;
  display: flex;
  column-gap: 0.5rem;
  border-radius: 8px;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
  padding: 0.8rem;
}
.search-layer .search-popup .search-form .search-input #search-input {
  flex: 1;
  border: none;
  background-color: inherit;
}
.search-layer .search-popup .search-form .search-input #search-input:focus {
  outline: none;
}
.search-layer .search-popup .search-form .search-input #search-btn {
  border: none;
  background-color: inherit;
  cursor: pointer;
}
.search-layer .search-popup .search-tags {
  margin-top: 2rem;
}
.search-layer .search-popup .search-tags .search-tags-title {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  column-gap: 0.8rem;
  color: #868e96;
}
.search-layer .search-popup .search-tags .search-tags-title svg {
  font-size: 0.85rem;
}
.search-layer .search-popup .search-tags .search-tags-title h3 {
  font-size: 0.85rem;
  font-weight: normal;
}
.hide-search-popup {
  display: none !important;
}
.dark-theme .fake-search-input {
  background-color: #343a40;
}
.dark-theme .search-layer {
  background-color: rgba(72, 72, 72, 0.5);
}
.dark-theme .search-layer .search-popup {
  background-color: #22272e;
}
.dark-theme .search-layer .search-popup .search-form .search-input {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme .search-layer .search-popup .search-form #search-input,
.dark-theme .search-layer .search-popup .search-form #search-btn {
  color: #dee2e6;
}
@media screen and (max-width: 1280px) {
  .fake-search-input {
    width: 200px;
  }
}
@media screen and (max-width: 992px) {
  .fake-search-input {
    width: 150px;
  }
}
@media screen and (max-width: 768px) {
  .fake-search-input {
    width: 100px;
  }
}
aside.sidebar #profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 1rem;
}
aside.sidebar #profile .img-wrapper {
  width: 120px;
  height: 120px;
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
aside.sidebar #profile .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
aside.sidebar #profile .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 1rem;
}
aside.sidebar #profile .info .name {
  font-weight: bold;
}
aside.sidebar #profile .info .desc {
  color: #868e96;
  font-size: 0.85rem;
  line-height: 1.75;
}
.dark-theme aside.sidebar #profile .img-wrapper {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
aside.sidebar #category ul {
  list-style: none;
}
aside.sidebar #category .tt_category li,
aside.sidebar #category .tt_category a {
  box-sizing: border-box;
}
aside.sidebar #category .tt_category .link_tit,
aside.sidebar #category .tt_category a.link_item,
aside.sidebar #category .tt_category a.link_sub_item {
  justify-content: left;
  font-size: 1rem;
  column-gap: 0.8rem;
}
aside.sidebar #category .tt_category .link_tit .c_cnt,
aside.sidebar #category .tt_category a.link_item .c_cnt,
aside.sidebar #category .tt_category a.link_sub_item .c_cnt {
  font-size: 0.75rem;
  color: #868e96;
}
aside.sidebar #category .tt_category li.selected > a.link_item {
  color: #4c6ef5;
}
aside.sidebar #category .tt_category ul.sub_category_list > li.selected > a.link_sub_item {
  color: #e64980;
}
.dark-theme aside.sidebar #category .link_tit .c_cnt,
.dark-theme aside.sidebar #category a.link_item .c_cnt,
.dark-theme aside.sidebar #category a.link_sub_item .c_cnt {
  color: #adb5bd;
}
.dark-theme aside.sidebar #category li.selected > a.link_item {
  color: #5273e0;
}
.dark-theme aside.sidebar #category ul.sub_category_list > li.selected > a.link_sub_item {
  color: #e0529c;
}
aside.sidebar #notice .body ul {
  list-style: none;
}
aside.sidebar #notice .body ul li a {
  justify-content: left;
  column-gap: 0.8rem;
}
aside.sidebar #recent-article ul li,
aside.sidebar #popular-article ul li {
  display: flex;
  align-items: center;
  column-gap: 0.8rem;
  padding: 0.8rem 0;
}
aside.sidebar #recent-article ul li .img-wrapper,
aside.sidebar #popular-article ul li .img-wrapper {
  transition: all 0.15s ease-in-out;
  background: linear-gradient(45deg, #ffdeeb, #dbe4ff);
  display: block;
  width: 55px;
  height: 55px;
  border-radius: 100%;
  overflow: hidden;
}
aside.sidebar #recent-article ul li .img-wrapper img,
aside.sidebar #popular-article ul li .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
aside.sidebar #recent-article ul li .img-wrapper:hover,
aside.sidebar #popular-article ul li .img-wrapper:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
}
aside.sidebar #recent-article ul li .info,
aside.sidebar #popular-article ul li .info {
  font-size: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
aside.sidebar #recent-article ul li .info a.title,
aside.sidebar #popular-article ul li .info a.title {
  width: 100%;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
aside.sidebar #recent-article ul li .info .sub-info,
aside.sidebar #popular-article ul li .info .sub-info {
  font-size: 0.85rem;
  display: flex;
  column-gap: 0.8rem;
  color: #868e96;
}
aside.sidebar #recent-article ul li .info .sub-info a.sub-info-category,
aside.sidebar #popular-article ul li .info .sub-info a.sub-info-category {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
aside.sidebar #recent-article ul li .info .sub-info a.sub-info-category span,
aside.sidebar #popular-article ul li .info .sub-info a.sub-info-category span {
  width: 120px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
aside.sidebar #recent-article ul li .info .sub-info .cnt,
aside.sidebar #popular-article ul li .info .sub-info .cnt {
  display: flex;
  column-gap: 0.5rem;
  align-items: center;
}
.dark-theme aside.sidebar #recent-article .img-wrapper,
.dark-theme aside.sidebar #popular-article .img-wrapper {
  background: linear-gradient(-45deg, #5273e0, #263ea0);
}
.dark-theme aside.sidebar #recent-article .img-wrapper:hover,
.dark-theme aside.sidebar #popular-article .img-wrapper:hover {
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
}
.dark-theme aside.sidebar #recent-article .info .sub-info,
.dark-theme aside.sidebar #popular-article .info .sub-info {
  color: #adb5bd;
}
aside.sidebar #recent-comments ul {
  list-style: none;
}
aside.sidebar #recent-comments li:nth-child(odd) {
  margin: 0.8rem 0 0.8rem 5px;
}
aside.sidebar #recent-comments li:nth-child(odd) .balloon:before {
  top: 18px;
  left: -8px;
  border-right: 8px solid #dbe4ff;
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid rgba(0, 0, 0, 0);
}
aside.sidebar #recent-comments li:nth-child(even) {
  margin: 0.8rem 5px 0.8rem 5px;
}
aside.sidebar #recent-comments li:nth-child(even) .balloon:before {
  bottom: 18px;
  right: -8px;
  border-left: 8px solid #dbe4ff;
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid rgba(0, 0, 0, 0);
}
aside.sidebar #recent-comments li .balloon {
  position: relative;
  background-color: #dbe4ff;
  padding: 0.8rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
}
aside.sidebar #recent-comments li .balloon:before {
  position: absolute;
  content: "";
}
aside.sidebar #recent-comments li .balloon .info {
  display: flex;
  align-items: flex-end;
  column-gap: 1rem;
  font-size: 0.85rem;
}
aside.sidebar #recent-comments li .balloon .info .name {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
aside.sidebar #recent-comments li .balloon .info .date {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  color: #868e96;
}
aside.sidebar #recent-comments li .balloon a.desc {
  line-height: 1.5;
}
.dark-theme aside.sidebar #recent-comments li:nth-child(odd) .balloon:before {
  border-right: 8px solid #263ea0;
}
.dark-theme aside.sidebar #recent-comments li:nth-child(even) .balloon:before {
  border-left: 8px solid #263ea0;
}
.dark-theme aside.sidebar #recent-comments li .balloon {
  background-color: #263ea0;
}
.dark-theme aside.sidebar #recent-comments li .balloon .info .date {
  color: #adb5bd;
}
aside.sidebar {
  width: 340px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
  padding: 1rem;
}
aside.sidebar .sidebar-ad-container {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
aside.sidebar #sidebar-close-btn {
  display: none;
}
aside.sidebar .sidebar-item {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
aside.sidebar .sidebar-item-title {
  display: flex;
  align-items: center;
  column-gap: 0.8rem;
  color: #868e96;
}
aside.sidebar .sidebar-item-title svg {
  font-size: 0.85rem;
}
aside.sidebar .sidebar-item-title h3 {
  font-size: 0.85rem;
  font-weight: normal;
}
@media screen and (max-width: 1280px) {
  aside.sidebar {
    position: fixed;
    top: 0;
    left: -800px;
    background-color: #fff;
    z-index: 99;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
    height: 100vh;
    overflow-y: scroll;
    transition: all 0.15s ease-in-out;
    transition-property: left;
  }
  aside.sidebar #sidebar-close-btn {
    display: block;
    width: 50px;
    height: 50px;
  }
  aside.sidebar::-webkit-scrollbar {
    display: none;
  }
  aside.sidebar.open-sidebar {
    left: 0;
  }
  .dark-theme aside.sidebar {
    background-color: #22272e;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.3);
  }
}
@media screen and (max-width: 567px) {
  aside.sidebar {
    width: 100vw;
  }
}
footer {
  max-width: 1430px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1rem 300px 1rem;
  display: flex;
  column-gap: 1rem;
  justify-content: flex-start;
  align-items: flex-start;
  color: #868e96;
  font-size: 0.85rem;
  box-sizing: border-box;
}
footer .copyright-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 1rem;
}
footer .copyright-container .skin-copyright {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}
footer .copyright-container .skin-copyright span {
  display: flex;
  column-gap: 0.8rem;
  align-items: center;
}
footer .copyright-container .skin-copyright span a {
  text-decoration: none;
  color: #4c6ef5;
  transition: all 0.15s ease-in-out;
}
footer .copyright-container .skin-copyright span a:hover {
  color: #364fc7;
}
footer .copyright-container .font-copyright {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0.8rem;
  font-size: 0.75rem;
  line-height: 1.5;
}
footer .site-link-container,
footer .sns-link-container {
  width: 300px;
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
}
footer .site-link-container .link-item,
footer .sns-link-container .link-item {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  font-size: 0.85rem;
}
.dark-theme footer {
  color: #adb5bd;
}
.dark-theme footer .copyright-container .skin-copyright a {
  color: #5273e0;
}
.dark-theme footer .copyright-container .skin-copyright a:hover {
  color: #263ea0;
}
@media screen and (max-width: 1740px) {
  footer {
    max-width: 1150px;
  }
  footer .site-link-container,
  footer .sns-link-container {
    width: 220px;
  }
}
@media screen and (max-width: 1460px) {
  footer {
    max-width: 1000px;
  }
  footer .copyright-container .skin-copyright {
    flex-direction: column;
    row-gap: 0.8rem;
    align-items: flex-start;
  }
}
@media screen and (max-width: 1280px) {
  footer {
    max-width: 1050px;
  }
}
@media screen and (max-width: 992px) {
  footer {
    max-width: 900px;
  }
  footer .site-link-container,
  footer .sns-link-container {
    font-size: 0.75rem;
    width: 200px;
  }
}
@media screen and (max-width: 768px) {
  footer {
    max-width: 900px;
    flex-direction: column;
    row-gap: 2rem;
  }
}
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(12px);
  z-index: 100;
  display: flex;
  align-items: center;
}
#loading .loading-container {
  margin: auto;
  width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 2rem;
}
#loading .loading-container p {
  text-transform: uppercase;
  font-size: 0.85rem;
  color: #212529;
  letter-spacing: 0.5rem;
  -webkit-animation: fade 2s infinite;
  -moz-animation: fade 2s infinite;
}
#loading .loading-container .profile-img-wrapper {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 100%;
}
#loading .loading-container .profile-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#loading .loading-container .stick-wrapper {
  display: flex;
  justify-content: center;
  margin-right: 8px;
}
#loading .loading-container .stick-wrapper .loading-stick {
  width: 35px;
  height: 3px;
  background: #212529;
  margin-left: -4.5px;
}
#loading .loading-container .stick-wrapper .loading-stick:nth-child(n) {
  transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -webkit-animation: fall 2s infinite;
  -moz-animation: fall 2s infinite;
}
#loading .loading-container .stick-wrapper .loading-stick:nth-child(2n) {
  transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -webkit-animation: rise 2s infinite;
  -moz-animation: rise 2s infinite;
}
.dark-theme #loading .loading-container p {
  color: #dee2e6;
}
.dark-theme #loading .loading-container .stick-wrapper .loading-stick {
  background: #dee2e6;
}
@-webkit-keyframes rise {
  50% {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
  }
}
@-moz-keyframes rise {
  50% {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
  }
}
@-webkit-keyframes fall {
  50% {
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
  }
}
@-moz-keyframes fall {
  50% {
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
  }
}
.floating-btn-group {
  position: fixed;
  bottom: -800px;
  right: 0;
  display: flex;
  padding: 2rem;
  z-index: 50;
  flex-direction: column;
  row-gap: 1rem;
  transition: all 0.15s ease-in-out;
  transition-property: bottom;
}
.floating-btn-group #floating-like-btn {
  display: none;
}
.floating-btn-group .bi-suit-heart-fill {
  display: none;
}
.floating-btn-group .bi-sun {
  display: none;
}