/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./.yarn/__virtual__/css-loader-virtual-1150f47405/0/cache/css-loader-npm-6.8.1-30d84b4cf1-f20bb2a181.zip/node_modules/css-loader/dist/cjs.js!./.yarn/__virtual__/sass-loader-virtual-c7c9d7b49f/0/cache/sass-loader-npm-13.3.2-82bfeae746-3486134c88.zip/node_modules/sass-loader/dist/cjs.js!./src/style/index.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
:root {
  --primary-color: #2563eb;
  --primary-hover-color: #3b82f6;
  --primary-active-color: #1d4ed8;
  --bg-color: #ffffff;
  --bg-alpha-color: rgba(255, 255, 255, 0.7);
  --bg-sub-color: #f8f9fa;
  --bg-sub-color2: #f1f3f5;
  --bg-loading-dummy-color: #e9ecef;
  --font-color: #212529;
  --font-sub-color: #495057;
  --bg-info-color: #dbeafe;
  --bg-warn-color: #ffe8cc;
  --bg-table4-color: #f1f3f5;
  --border-table4-color: #e9ecef;
  --bg-table5-color: #e3fafc;
  --border-table5-color: #c5f6fa;
  --bg-table6-color: #e6fcf5;
  --border-table6-color: #c3fae8;
  --bg-table7-color: #e7f5ff;
  --border-table7-color: #d0ebff;
  --bg-table12-header-color: #868e96;
  --font-table12-header-color: #ffffff;
  --bg-table12-first-td-color: #ced4da;
  --border-table12-first-td-color: #495057;
  --bg-table13-header-color: #22b8cf;
  --font-table13-header-color: #ffffff;
  --bg-table13-first-td-color: #e3fafc;
  --border-table13-first-td-color: #15aabf;
  --bg-table14-header-color: #20c997;
  --font-table14-header-color: #ffffff;
  --bg-table14-first-td-color: #e6fcf5;
  --border-table14-first-td-color: #12b886;
  --bg-table15-header-color: #339af0;
  --font-table15-header-color: #ffffff;
  --bg-table15-first-td-color: #e7f5ff;
  --border-table15-first-td-color: #228be6;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --radius-none: 0px;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 100%;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-60: 60;
  --z-70: 70;
  --z-80: 80;
  --z-90: 90;
}

:root .dark {
  --primary-color: #818cf8;
  --primary-hover-color: #a5b4fc;
  --primary-active-color: #6366f1;
  --bg-color: #202124;
  --bg-alpha-color: rgba(32, 33, 36, 0.7);
  --bg-sub-color: #18181b;
  --bg-sub-color2: #09090b;
  --bg-loading-dummy-color: #aaaaaa;
  --font-color: #f8f9fa;
  --font-sub-color: #adb5bd;
  --bg-info-color: #3b82f6;
  --bg-warn-color: #ff922b;
  --bg-table4-color: #495057;
  --border-table4-color: #343a40;
  --bg-table5-color: #0c8599;
  --border-table5-color: #0b7285;
  --bg-table6-color: #099268;
  --border-table6-color: #087f5b;
  --bg-table7-color: #1971c2;
  --border-table7-color: #1864ab;
  --bg-table12-header-color: #495057;
  --font-table12-header-color: #ffffff;
  --bg-table12-first-td-color: #adb5bd;
  --border-table12-first-td-color: #343a40;
  --bg-table13-header-color: #15aabf;
  --font-table13-header-color: #ffffff;
  --bg-table13-first-td-color: #99e9f2;
  --border-table13-first-td-color: #1098ad;
  --bg-table14-header-color: #12b886;
  --font-table14-header-color: #ffffff;
  --bg-table14-first-td-color: #96f2d7;
  --border-table14-first-td-color: #0ca678;
  --bg-table15-header-color: #228be6;
  --font-table15-header-color: #ffffff;
  --bg-table15-first-td-color: #a5d8ff;
  --border-table15-first-td-color: #1c7ed6;
}

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;
}

button {
  cursor: pointer;
}

html {
  font-size: 18px;
}

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--font-color);
  background-color: var(--bg-color);
  min-height: 100vh;
  overflow-x: hidden;
}

::-moz-selection {
  background: var(--primary-color);
  color: white;
}

::selection {
  background: var(--primary-color);
  color: white;
}

.flex-1 {
  flex: 1;
}
.flex-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.flex-col {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-evenly {
  justify-content: space-evenly;
}
.justify-end {
  justify-content: flex-end;
}

.gap-x-xs {
  column-gap: var(--space-xs);
}
.gap-x-sm {
  column-gap: var(--space-sm);
}
.gap-x-md {
  column-gap: var(--space-md);
}
.gap-x-lg {
  column-gap: var(--space-lg);
}
.gap-x-xl {
  column-gap: var(--space-xl);
}

.gap-y-xs {
  row-gap: var(--space-xs);
}
.gap-y-sm {
  row-gap: var(--space-sm);
}
.gap-y-md {
  row-gap: var(--space-md);
}
.gap-y-lg {
  row-gap: var(--space-lg);
}
.gap-y-xl {
  row-gap: var(--space-xl);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: 1rem;
}
.text-sm {
  font-size: var(--text-sm);
  line-height: 1.25rem;
}
.text-md {
  font-size: var(--text-md);
  line-height: 1.5rem;
}
.text-lg {
  font-size: var(--text-lg);
  line-height: 1.75rem;
}
.text-xl {
  font-size: var(--text-xl);
  line-height: 1.75rem;
}
.text-2xl {
  font-size: var(--text-2xl);
  line-height: 2rem;
}
.text-3xl {
  font-size: var(--text-3xl);
  line-height: 2.25rem;
}
.text-4xl {
  font-size: var(--text-4xl);
  line-height: 2.5rem;
}

.link {
  text-decoration: none;
  color: var(--primary-color);
}
.link:hover {
  color: var(--primary-hover-color);
}
.link:active {
  color: var(--primary-active-color);
}

.shadow {
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}

.index-template {
  display: flex;
  flex-direction: column;
}
.index-template__row {
  padding: var(--space-md);
  column-gap: var(--space-md);
  display: flex;
  margin-bottom: var(--space-lg);
}
.index-template__row .thumbnail {
  position: relative;
  min-width: 180px;
  min-height: 180px;
  width: 180px;
  height: 180px;
}
.index-template__row .thumbnail .img-circle {
  border-radius: var(--radius-full);
}
.index-template__row .thumbnail .img-radius {
  border-radius: var(--space-md);
}
.index-template__row .thumbnail .img-rectangle {
  border-radius: 0;
}
.index-template__row .thumbnail .img-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--bg-sub-color);
  transition: top 0.2s ease-in-out;
  overflow: hidden;
}
.index-template__row .thumbnail .img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.index-template__row:hover .thumbnail .img-wrapper {
  top: -8px;
}
.index-template__row .desc-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
  flex: 1;
}
.index-template__row .desc-wrapper a {
  text-decoration: none;
}
.index-template__row .desc-wrapper a:hover {
  color: var(--primary-hover-color);
}
.index-template__row .desc-wrapper a:active {
  color: var(--primary-active-color);
}
.index-template__row .desc-wrapper .sub {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  font-size: var(--text-sm);
}
.index-template__row .desc-wrapper .sub .category {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
  font-weight: bold;
}
.index-template__row .desc-wrapper .sub .date {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
  color: var(--font-sub-color);
}
.index-template__row .desc-wrapper .title {
  font-weight: bold;
  color: var(--font-color);
  font-size: var(--text-lg);
  line-height: 1.5;
}
.index-template__row .desc-wrapper .desc {
  line-height: 1.75;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

@media screen and (max-width: 768px) {
  .index-template__row {
    padding: var(--space-sm);
    row-gap: var(--space-md);
    flex-direction: column;
  }
  .index-template__row .thumbnail {
    min-width: 100%;
    min-height: 210px;
    width: 100%;
    height: 210px;
  }
  .index-template__row .thumbnail .img-wrapper {
    border-radius: var(--radius-md);
  }
  .index-template__row .desc-wrapper .desc {
    font-size: var(--text-sm);
    line-height: 1.5;
    -webkit-line-clamp: 3;
  }
}
@media screen and (max-width: 576px) {
  .index-template__row .thumbnail {
    min-height: 160px;
    height: 160px;
  }
  .index-template__row .desc-wrapper .sub .date {
    font-size: var(--text-xs);
  }
}
.permalink-template .article-info {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-md);
  row-gap: var(--space-md);
}
.permalink-template .article-info .img-wrapper {
  width: 70px;
  height: 70px;
}
.permalink-template .article-info .img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--bg-sub-color);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.permalink-template .article-info .desc-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
.permalink-template .article-info .desc-wrapper a {
  text-decoration: none;
}
.permalink-template .article-info .desc-wrapper .title {
  font-weight: bold;
  color: var(--font-color);
  font-size: var(--text-2xl);
  line-height: 1.5;
}
.permalink-template .article-info .desc-wrapper .sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-md);
}
.permalink-template .article-info .desc-wrapper .sub .category,
.permalink-template .article-info .desc-wrapper .sub .date {
  display: flex;
  align-items: center;
  row-gap: var(--space-xs);
  column-gap: var(--space-xs);
  font-size: var(--text-sm);
}
.permalink-template .article-info .desc-wrapper .sub .category,
.permalink-template .article-info .desc-wrapper .sub .category a {
  color: var(--primary-color);
}
.permalink-template .article-info .desc-wrapper .sub .category:hover,
.permalink-template .article-info .desc-wrapper .sub .category a:hover {
  color: var(--primary-hover-color);
}
.permalink-template .article-info .desc-wrapper .sub .category:active,
.permalink-template .article-info .desc-wrapper .sub .category a:active {
  color: var(--primary-active-color);
}
.permalink-template .article-info .desc-wrapper .sub .date {
  color: var(--font-sub-color);
}
.permalink-template .article-info .desc-wrapper .author {
  font-size: var(--text-sm);
}

.protected-index-template {
  display: flex;
  flex-direction: column;
}
.protected-index-template__row {
  padding: var(--space-md);
  column-gap: var(--space-md);
  display: flex;
  margin-bottom: var(--space-lg);
}
.protected-index-template__row .lock-figure {
  position: relative;
  min-width: 150px;
  min-height: 150px;
  width: 150px;
  height: 150px;
}
.protected-index-template__row .lock-figure .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--font-color);
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.2s ease-in-out;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--bg-sub-color);
}
.protected-index-template__row .lock-figure .svg-wrapper svg {
  width: 30%;
  height: 30%;
}
.protected-index-template__row:hover .svg-wrapper {
  top: -8px;
}
.protected-index-template__row .desc-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
  flex: 1;
}
.protected-index-template__row .desc-wrapper a {
  text-decoration: none;
}
.protected-index-template__row .desc-wrapper a:hover {
  color: var(--primary-hover-color);
}
.protected-index-template__row .desc-wrapper a:active {
  color: var(--primary-active-color);
}
.protected-index-template__row .desc-wrapper .sub {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  font-size: var(--text-sm);
}
.protected-index-template__row .desc-wrapper .sub .category {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
  font-weight: bold;
}
.protected-index-template__row .desc-wrapper .sub .date {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
  color: var(--font-sub-color);
}
.protected-index-template__row .desc-wrapper .title {
  font-weight: bold;
  color: var(--font-color);
  font-size: var(--text-lg);
  line-height: 1.5;
}
.protected-index-template__row .desc-wrapper .desc {
  line-height: 1.75;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.protected-index-template__row .desc-wrapper .protected-form {
  display: flex;
  align-items: center;
  column-gap: var(--space-md);
}
.protected-index-template__row .desc-wrapper .protected-form__item {
  flex: 1;
  display: flex;
  align-items: center;
}
.protected-index-template__row .desc-wrapper .protected-form__item label {
  font-size: var(--text-sm);
  max-width: 80px;
  width: 100%;
}
.protected-index-template__row .desc-wrapper .protected-form__item input {
  border: none;
  background-color: var(--bg-sub-color);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  width: 100%;
  outline: none;
  color: var(--font-color);
}
.protected-index-template__row .desc-wrapper .protected-form__submit-btn-wrapper .submit {
  display: flex;
  align-items: center;
  column-gap: var(--space-sm);
  cursor: pointer;
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  color: #ffffff;
  background-color: var(--primary-color);
}
.protected-index-template__row .desc-wrapper .protected-form__submit-btn-wrapper .submit:hover {
  background-color: var(--primary-hover-color);
}
.protected-index-template__row .desc-wrapper .protected-form__submit-btn-wrapper .submit:active {
  background-color: var(--primary-active-color);
}

@media screen and (max-width: 768px) {
  .protected-index-template__row {
    padding: var(--space-sm);
    row-gap: var(--space-md);
    flex-direction: column;
  }
  .protected-index-template__row .lock-figure {
    min-width: 100%;
    min-height: 210px;
    width: 100%;
    height: 210px;
  }
  .protected-index-template__row .lock-figure .svg-wrapper {
    border-radius: var(--radius-md);
  }
  .protected-index-template__row .desc-wrapper .desc {
    font-size: var(--text-sm);
    line-height: 1.5;
    -webkit-line-clamp: 3;
  }
}
@media screen and (max-width: 576px) {
  .protected-index-template__row .lock-figure {
    min-height: 160px;
    height: 160px;
  }
  .protected-index-template__row .desc-wrapper .sub .date {
    font-size: var(--text-xs);
  }
}
.article .contents_style {
  word-break: break-all;
  width: 100%;
  box-sizing: border-box;
  line-height: 2;
}
.article .contents_style ul,
.article .contents_style ol {
  margin: var(--space-md) 0;
}
.article .contents_style li {
  margin-left: var(--space-lg);
}
.article .contents_style a {
  color: var(--primary-color);
  text-decoration: none;
  cursor: pointer;
}
.article .contents_style a svg {
  margin-left: var(--space-xs);
}
.article .contents_style a:hover {
  color: var(--primary-hover-color);
}
.article .contents_style a:active {
  color: var(--primary-active-color);
}
.article .contents_style figure[data-ke-type=opengraph] a {
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: inherit;
  border: 1px solid var(--bg-sub-color);
}
.article .contents_style figure[data-ke-type=opengraph] a .og-image {
  border-right: 1px solid var(--bg-sub-color);
}
.article .contents_style figure[data-ke-type=opengraph] a .og-title {
  color: var(--font-color) !important;
}
.article .contents_style figure[data-ke-type=opengraph] a .og-desc,
.article .contents_style figure[data-ke-type=opengraph] a .og-host {
  color: var(--font-sub-color);
}
.article .contents_style figure[data-ke-type=opengraph] a:hover {
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}
.article .contents_style hr {
  margin: var(--space-md) auto;
}
.article .contents_style h1,
.article .contents_style h2,
.article .contents_style h3 {
  margin: var(--space-md) 0;
  font-weight: bold;
  color: var(--font-color);
}
.article .contents_style h1:hover,
.article .contents_style h2:hover,
.article .contents_style h3:hover {
  color: var(--primary-hover-color);
}
.article .contents_style h1:hover::after,
.article .contents_style h2:hover::after,
.article .contents_style h3:hover::after {
  content: " 🔗";
}
.article .contents_style h1:active,
.article .contents_style h2:active,
.article .contents_style h3:active {
  color: var(--primary-active-color);
}
.article .contents_style h4 {
  margin: var(--space-md) 0;
  font-weight: bold;
}
.article .contents_style h1 {
  cursor: pointer;
  color: var(--primary-color);
  font-size: var(--text-2xl);
}
.article .contents_style h2 {
  cursor: pointer;
  color: var(--primary-color);
  font-size: var(--text-xl);
}
.article .contents_style h3 {
  cursor: pointer;
  font-size: var(--text-lg);
}
.article .contents_style h4 {
  font-size: var(--text-md);
}
.article .contents_style sup {
  vertical-align: super;
}
.article .contents_style sub {
  vertical-align: sub;
}
.article .contents_style pre {
  width: 100%;
  margin: var(--space-md) 0;
  border-radius: var(--radius-md);
  position: relative;
}
.article .contents_style pre .clipboard {
  display: none;
  color: var(--font-color);
  background-color: var(--bg-alpha-color);
  border: none;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}
.article .contents_style pre .clipboard:hover {
  color: var(--primary-hover-color);
}
.article .contents_style pre .clipboard:active {
  color: var(--primary-active-color);
}
.article .contents_style pre:hover .clipboard {
  display: block;
}
.article .contents_style pre code {
  width: 100%;
  word-break: break-all;
  overflow-y: auto;
  padding: var(--space-md);
  box-sizing: border-box;
}
.article .contents_style p {
  word-break: break-word;
}
.article .contents_style p code,
.article .contents_style li code,
.article .contents_style a code {
  color: var(--primary-color);
  background-color: var(--bg-sub-color);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
}
.article .contents_style figure.imageblock {
  margin-top: var(--space-sm);
}
.article .contents_style figure.imageblock img,
.article .contents_style figure.imagegridblock img {
  border-radius: var(--radius-md);
}
.article .contents_style figure.imageblock img:hover,
.article .contents_style figure.imagegridblock img:hover {
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}
.article .contents_style figure.imageblock figcaption,
.article .contents_style figure.imagegridblock figcaption {
  font-style: italic;
  color: var(--font-sub-color);
}
.article .contents_style blockquote[data-ke-style=style1] {
  text-align: center;
  background: url(https://t1.daumcdn.net/keditor/dist/0.8.5/image/blockquote-style1.svg) no-repeat 50% 0;
  padding: 34px 0 0 0;
  font-size: 1.12em;
  color: var(--font-color);
  line-height: 1.67;
  border: 0 none;
  margin-bottom: var(--space-md);
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
  font-family: "Noto Serif KR", serif;
}
.article .contents_style blockquote[data-ke-style=style2] {
  background-color: var(--bg-warn-color);
  border: none;
  color: var(--font-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.article .contents_style blockquote[data-ke-style=style2]:before {
  display: inline-block;
  font-weight: bold;
  content: "⚠️ WARN";
  margin-right: var(--space-md);
  font-family: "Noto Sans KR", Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, "돋움", Helvetica, sans-serif;
}
.article .contents_style blockquote[data-ke-style=style2]:hover {
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}
.article .contents_style blockquote[data-ke-style=style3] {
  background-color: var(--bg-info-color);
  border: none;
  color: var(--font-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.article .contents_style blockquote[data-ke-style=style3]:before {
  display: inline-block;
  font-weight: bold;
  content: "💡 INFO";
  margin-right: var(--space-md);
  font-family: "Noto Sans KR", Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, "돋움", Helvetica, sans-serif;
}
.article .contents_style blockquote[data-ke-style=style3]:hover {
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}
.article .contents_style table {
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}
.article .contents_style table td,
.article .contents_style table tr {
  border: 1px solid var(--bg-sub-color2);
  background-color: var(--bg-sub-color);
  color: var(--font-color);
  padding: var(--space-xs) var(--space-sm);
}
.article .contents_style table:hover {
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}
.article .contents_style table[data-ke-style=style4] td,
.article .contents_style table[data-ke-style=style4] tr {
  border: 1px solid var(--border-table4-color);
}
.article .contents_style table[data-ke-style=style4] tr:nth-child(2n-1) td {
  background-color: var(--bg-sub-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style4] tr:nth-child(2n) td {
  background-color: var(--bg-table4-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style5] td,
.article .contents_style table[data-ke-style=style5] tr {
  border: 1px solid var(--border-table5-color);
}
.article .contents_style table[data-ke-style=style5] tr:nth-child(2n-1) td {
  background-color: var(--bg-sub-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style5] tr:nth-child(2n) td {
  background-color: var(--bg-table5-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style6] td,
.article .contents_style table[data-ke-style=style6] tr {
  border: 1px solid var(--border-table6-color);
}
.article .contents_style table[data-ke-style=style6] tr:nth-child(2n-1) td {
  background-color: var(--bg-sub-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style6] tr:nth-child(2n) td {
  background-color: var(--bg-table6-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style7] td,
.article .contents_style table[data-ke-style=style7] tr {
  border: 1px solid var(--border-table7-color);
}
.article .contents_style table[data-ke-style=style7] tr:nth-child(2n-1) td {
  background-color: var(--bg-sub-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style7] tr:nth-child(2n) td {
  background-color: var(--bg-table7-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style12] td,
.article .contents_style table[data-ke-style=style12] tr {
  border: 1px solid var(--border-table12-first-td-color);
}
.article .contents_style table[data-ke-style=style12] tr td {
  background-color: var(--bg-sub-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style12] tr td:first-child {
  background-color: var(--bg-table12-first-td-color);
  color: #212529;
}
.article .contents_style table[data-ke-style=style12] tr:first-child td {
  background-color: var(--bg-table12-header-color);
  color: var(--font-table12-header-color);
}
.article .contents_style table[data-ke-style=style13] td,
.article .contents_style table[data-ke-style=style13] tr {
  border: 1px solid var(--border-table13-first-td-color);
}
.article .contents_style table[data-ke-style=style13] tr td {
  background-color: var(--bg-sub-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style13] tr td:first-child {
  background-color: var(--bg-table13-first-td-color);
  color: #212529;
}
.article .contents_style table[data-ke-style=style13] tr:first-child td {
  background-color: var(--bg-table13-header-color);
  color: var(--font-table13-header-color);
}
.article .contents_style table[data-ke-style=style14] td,
.article .contents_style table[data-ke-style=style14] tr {
  border: 1px solid var(--border-table14-first-td-color);
}
.article .contents_style table[data-ke-style=style14] tr td {
  background-color: var(--bg-sub-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style14] tr td:first-child {
  background-color: var(--bg-table14-first-td-color);
  color: #212529;
}
.article .contents_style table[data-ke-style=style14] tr:first-child td {
  background-color: var(--bg-table14-header-color);
  color: var(--font-table14-header-color);
}
.article .contents_style table[data-ke-style=style15] td,
.article .contents_style table[data-ke-style=style15] tr {
  border: 1px solid var(--border-table15-first-td-color);
}
.article .contents_style table[data-ke-style=style15] tr td {
  background-color: var(--bg-sub-color);
  color: var(--font-color);
}
.article .contents_style table[data-ke-style=style15] tr td:first-child {
  background-color: var(--bg-table15-first-td-color);
  color: #212529;
}
.article .contents_style table[data-ke-style=style15] tr:first-child td {
  background-color: var(--bg-table15-header-color);
  color: var(--font-table15-header-color);
}
.article .contents_style figure.fileblock {
  background-color: #bac8ff;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}
.article .contents_style .container_postbtn {
  display: flex;
  align-items: center;
}
.article .contents_style div[data-ke-type=moreLess] {
  position: relative;
}
.article .contents_style div[data-ke-type=moreLess] .btn-toggle-moreless {
  padding: var(--space-xs) var(--space-md);
  font-weight: bold;
  background-color: var(--bg-color);
}
.article .contents_style div[data-ke-type=moreLess] .btn-toggle-moreless:after {
  content: " +";
}
.article .contents_style div[data-ke-type=moreLess].open .btn-toggle-moreless {
  margin-left: var(--space-md);
}
.article .contents_style div[data-ke-type=moreLess].open .btn-toggle-moreless:after {
  content: " x";
}
.article .contents_style div[data-ke-type=moreLess].open:before {
  position: absolute;
  top: 16px;
  left: 0;
  z-index: -1;
  content: "";
  background-color: #bbbbbb;
  height: 1px;
  width: 100%;
}
.article .contents_style div[data-ke-type=moreLess].open .moreless-content:after {
  display: block;
  content: "";
  margin-top: var(--space-lg);
  background-color: #bbbbbb;
  height: 1px;
  width: 100%;
}

.article .tt-sns-service-default {
  border-radius: var(--radius-md);
}
.article .another_category {
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-sub-color2) !important;
  background-color: var(--bg-sub-color) !important;
}
.article .another_category h4 {
  color: var(--font-sub-color) !important;
  font-size: var(--text-md) !important;
  border-bottom: 1px solid var(--bg-sub-color2) !important;
}
.article .another_category h4 a {
  color: var(--primary-color) !important;
  text-decoration: none;
}
.article .another_category h4 a:hover {
  color: var(--primary-hover-color) !important;
}
.article .another_category h4 a:active {
  color: var(--primary-active-color) !important;
}
.article .another_category:hover {
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}

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

#tt_captChaBottom {
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--bg-sub-color);
  padding: var(--space-sm);
  box-sizing: border-box;
}
#tt_captChaBottom .wrap_box_border {
  position: static;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  border-radius: var(--radius-md);
  border: none !important;
}
#tt_captChaBottom .wrap_box_border .wrap_box_bg {
  color: var(--font-color);
}
#tt_captChaBottom .inner_captcha_box {
  position: static;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-xs);
}
#tt_captChaBottom .inner_captcha_box #textRefresh,
#tt_captChaBottom .inner_captcha_box #noticeCaptcha {
  color: var(--font-color);
}

@media screen and (max-width: 576px) {
  #tt_captChaBottom .inner_captcha_box {
    flex-direction: column;
  }
}
.reply-write-form {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
.reply-write-form__item {
  display: flex;
  align-items: center;
  column-gap: var(--space-md);
}
.reply-write-form__item label {
  display: flex;
  align-items: center;
  column-gap: var(--space-sm);
  font-size: var(--text-sm);
  min-width: 120px;
}
.reply-write-form__item input {
  border: none;
  padding: var(--space-sm);
  background-color: var(--bg-sub-color);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
  outline: none;
  transition: max-width 0.2s ease-in-out;
  color: var(--font-color);
}
.reply-write-form__item input:focus {
  max-width: 100%;
}
.reply-write-form .secret-checkbox {
  display: flex;
  align-items: center;
  column-gap: var(--space-md);
}
.reply-write-form .secret-checkbox label {
  display: flex;
  align-items: center;
  column-gap: var(--space-sm);
  font-size: var(--text-sm);
  min-width: 120px;
}
.reply-write-form .secret-checkbox input {
  outline: none;
}
.reply-write-form textarea {
  background-color: var(--bg-sub-color);
  border: none;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  width: 100%;
  box-sizing: border-box;
  outline: none;
  color: var(--font-color);
}
.reply-write-form__submit-wrapper {
  display: flex;
  justify-content: flex-start;
}
.reply-write-form__submit {
  display: flex;
  align-items: center;
  column-gap: var(--space-sm);
  cursor: pointer;
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  color: #ffffff;
  background-color: var(--primary-color);
}
.reply-write-form__submit:hover {
  background-color: var(--primary-hover-color);
}
.reply-write-form__submit:active {
  background-color: var(--primary-active-color);
}

@media screen and (max-width: 576px) {
  .reply-write-form {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-sm);
  }
  .reply-write-form__item {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    row-gap: var(--space-sm);
  }
}
.reply-list {
  margin-top: var(--space-xl);
}
.reply-list ul,
.reply-list ol {
  list-style: none;
}
.reply-list ul a,
.reply-list ol a {
  text-decoration: none;
}
.reply-list ul {
  margin-left: var(--space-lg);
}
.reply-list__item {
  display: flex;
  column-gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.reply-list .img-wrapper {
  max-width: 60px;
  max-height: 60px;
  min-width: 60px;
  min-height: 60px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--bg-sub-color);
}
.reply-list .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reply-list .desc-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
.reply-list .desc-wrapper a {
  color: var(--primary-color);
}
.reply-list .desc-wrapper a:hover {
  color: var(--primary-hover-color);
}
.reply-list .desc-wrapper a:active {
  color: var(--primary-active-color);
}
.reply-list .desc-wrapper .user-info {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  row-gap: var(--space-sm);
  column-gap: var(--space-md);
}
.reply-list .desc-wrapper .user-info .username {
  font-size: var(--text-sm);
}
.reply-list .desc-wrapper .user-info .date {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--font-sub-color);
}
.reply-list .desc-wrapper .desc {
  line-height: 1.75rem;
}
.reply-list .desc-wrapper .control {
  display: flex;
  align-items: center;
  column-gap: var(--space-md);
  font-size: var(--text-sm);
}
.reply-list .desc-wrapper .control a {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
  color: var(--font-sub-color);
}
.reply-list .desc-wrapper .control a:hover {
  color: var(--primary-hover-color);
}
.reply-list .desc-wrapper .control a:active {
  color: var(--primary-active-color);
}

a.cloud {
  display: inline-block;
  padding: var(--space-xs);
  text-decoration: none;
  color: var(--primary-color);
}
a.cloud:hover {
  color: var(--primary-hover-color);
}
a.cloud:active {
  color: var(--primary-active-color);
}

a.cloud1 {
  font-size: 1.25rem;
  opacity: 1;
}

a.cloud2 {
  font-size: 1.125rem;
  opacity: 0.93;
}

a.cloud3 {
  font-size: 1rem;
  opacity: 0.86;
}

a.cloud4 {
  font-size: 0.875rem;
  opacity: 0.79;
}

a.cloud5 {
  font-size: 0.75rem;
  opacity: 0.72;
}

.related-article {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
.related-article__title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: var(--text-sm);
}
.related-article__title {
  color: var(--font-sub-color);
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
}
.related-article__body {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  column-gap: var(--space-md);
  height: 320px;
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.related-article__body::-webkit-scrollbar {
  display: none;
}
.related-article__body li {
  isolation: isolate;
  max-width: 260px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-sub-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.related-article__body li:hover {
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}
.related-article__body li:hover .thumbnail img {
  scale: 105%;
}
.related-article__body li a {
  text-decoration: none;
}
.related-article__body li .thumbnail {
  width: 100%;
  height: 190px;
}
.related-article__body li .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.2s ease-in-out;
}
.related-article__body li .desc {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
.related-article__body li .desc .title {
  color: var(--font-color);
  font-weight: bold;
  font-size: var(--text-lg);
  line-height: 1.5;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.related-article__body li .desc .title:hover {
  color: var(--primary-hover-color);
}
.related-article__body li .desc .title:active {
  color: var(--primary-active-color);
}
.related-article__body li .desc .date {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--font-sub-color);
}

#toc-wrapper {
  position: sticky;
  top: 100px;
  max-width: 220px;
  box-sizing: border-box;
  padding: 0 var(--space-md) 0 0;
  background-color: var(--bg-color);
  max-height: 60%;
  height: auto;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
#toc-wrapper ul#toc {
  list-style: none;
  font-size: var(--text-xs);
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
#toc-wrapper ul#toc .toc-h2,
#toc-wrapper ul#toc .toc-h3,
#toc-wrapper ul#toc .toc-h4 {
  text-decoration: none;
  color: var(--font-color);
}
#toc-wrapper ul#toc .toc-h2:hover,
#toc-wrapper ul#toc .toc-h3:hover,
#toc-wrapper ul#toc .toc-h4:hover {
  color: var(--primary-hover-color);
}
#toc-wrapper ul#toc .toc-h2:active,
#toc-wrapper ul#toc .toc-h3:active,
#toc-wrapper ul#toc .toc-h4:active {
  color: var(--primary-active-color);
}
#toc-wrapper ul#toc .toc-h3 {
  margin-left: var(--space-sm);
}
#toc-wrapper ul#toc .toc-h4 {
  margin-left: var(--space-md);
}
#toc-wrapper ul#toc .toc-active {
  font-weight: bold;
  color: var(--primary-color);
}

@media screen and (max-width: 992px) {
  #toc-wrapper {
    display: none;
  }
}
.progress {
  position: sticky;
  top: 0;
  left: 0;
  height: 5px;
  width: 100%;
  z-index: var(--z-20);
}
.progress__fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-hover-color));
  transition: width 0.2s ease-in-out;
}

.desktop-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  left: 0;
  height: 70px;
  box-sizing: border-box;
  padding: calc(var(--space-sm) + 5px) var(--space-lg) var(--space-sm) var(--space-lg);
  background-color: var(--bg-alpha-color);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: var(--z-10);
}
.desktop-header .sidebar-open-btn {
  display: none;
}
.desktop-header button {
  border: none;
  background-color: transparent;
  border-radius: var(--radius-md);
  width: 37px;
  height: 37px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--font-color);
}
.desktop-header button:hover {
  background-color: var(--bg-sub-color);
}
.desktop-header a.logo {
  text-decoration: none;
  color: var(--font-color);
}
.desktop-header a.logo:hover {
  color: var(--primary-hover-color);
}
.desktop-header a.logo:active {
  color: var(--primary-active-color);
}
.desktop-header a.logo > img {
  object-fit: cover;
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
}
.desktop-header nav {
  height: 100%;
}
.desktop-header nav ul {
  height: 100%;
  list-style: none;
}
.desktop-header nav ul li {
  font-size: var(--text-sm);
}
.desktop-header nav ul li a {
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--font-color);
  column-gap: var(--space-xs);
}
.desktop-header nav ul li a:hover {
  background-color: var(--bg-sub-color);
}

.toggle-theme .bi-brightness-high {
  display: flex;
}
.toggle-theme .bi-moon {
  display: none;
}

.dark .toggle-theme .bi-brightness-high {
  display: none;
}
.dark .toggle-theme .bi-moon {
  display: block;
}

@media screen and (max-width: 992px) {
  .desktop-header a.logo {
    display: none;
  }
  .desktop-header .sidebar-open-btn {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .desktop-header nav ul li a {
    padding: var(--space-sm);
  }
  .desktop-header nav ul li a span {
    display: none;
  }
}
@media screen and (max-width: 576px) {
  .desktop-header {
    display: none;
  }
}
.m-header {
  width: 100%;
  box-sizing: border-box;
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 65px;
  background-color: var(--bg-alpha-color);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: var(--z-10);
}
.m-header nav {
  width: 100%;
}
.m-header ul {
  list-style: none;
}
.m-header ul li {
  font-size: var(--text-xs);
}
.m-header ul li button {
  border: none;
  background-color: transparent;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--font-color);
  row-gap: var(--space-xs);
}
.m-header ul li a {
  min-width: 35px;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--font-color);
  row-gap: var(--space-xs);
}

@media screen and (max-width: 576px) {
  .m-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
@media screen and (max-width: 330px) {
  .m-header .tag-a-wrapper,
  .m-header .guestbook-a-wrapper {
    display: none;
  }
}
.search {
  display: flex;
  align-items: center;
  padding: 1px;
  border-radius: var(--radius-md);
  box-sizing: border-box;
}
.search.search-border-default {
  background: var(--bg-sub-color);
}
.search.search-border-gradient {
  background: linear-gradient(0.25turn, #339af0, #5c7cfa, #845ef7, #ff6b6b, #ff922b, #fcc419);
}
.search__input, .search__submit {
  height: 45px;
  box-sizing: border-box;
  background-color: var(--bg-sub-color);
  border: none;
  outline: none;
  color: var(--font-color);
}
.search__input {
  flex: 1;
  padding: var(--space-md);
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.search__submit {
  padding: 0 var(--space-md) 0 var(--space-sm);
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.visitor-section .sidebar-section__body {
  background-color: var(--bg-sub-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.visitor-section .sidebar-section__body .total,
.visitor-section .sidebar-section__body .today,
.visitor-section .sidebar-section__body .yesterday {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-sm);
  align-items: center;
  justify-content: center;
}
.visitor-section .sidebar-section__body .total span.count,
.visitor-section .sidebar-section__body .today span.count,
.visitor-section .sidebar-section__body .yesterday span.count {
  font-weight: bold;
}
.visitor-section .sidebar-section__body .total span.label,
.visitor-section .sidebar-section__body .today span.label,
.visitor-section .sidebar-section__body .yesterday span.label {
  font-size: var(--text-xs);
}

#sidebar .category-section .tt_category li.selected > a {
  cursor: not-allowed;
  color: var(--primary-color);
}
#sidebar .category-section .tt_category a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: var(--space-xs) 0;
  margin: var(--space-sm) 0;
  text-decoration: none;
  color: var(--font-color);
  column-gap: var(--space-sm);
}
#sidebar .category-section .tt_category a:hover {
  color: var(--primary-hover-color);
}
#sidebar .category-section .tt_category a:active {
  color: var(--primary-active-color);
}
#sidebar .category-section .tt_category a .c_cnt {
  font-size: var(--text-xs);
  color: var(--font-sub-color);
}
#sidebar .category-section .tt_category a.link_tit {
  margin-top: 0;
}
#sidebar .category-section .tt_category .sub_category_list {
  margin-left: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--font-sub-color);
}

.notice-section ul {
  list-style: none;
}
.notice-section ul a {
  display: block;
  text-decoration: none;
  color: var(--font-color);
  padding: var(--space-xs) 0;
  margin: var(--space-sm) 0;
}
.notice-section ul a:hover {
  color: var(--primary-hover-color);
}
.notice-section ul a:active {
  color: var(--primary-active-color);
}
.notice-section ul li:first-child a {
  margin-top: 0;
}
.notice-section ul li:last-child a {
  margin-bottom: 0;
}

.post-section .sidebar-section__body a {
  text-decoration: none;
}
.post-section .sidebar-section__body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-sm);
}
.post-section .sidebar-section__body li {
  width: 100%;
  padding: var(--space-sm) 0;
  display: flex;
  column-gap: var(--space-sm);
  align-items: center;
}
.post-section .sidebar-section__body .img-wrapper {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  background-color: var(--bg-sub-color);
  position: relative;
}
.post-section .sidebar-section__body .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
  transition: top 0.2s ease-in-out;
}
.post-section .sidebar-section__body .img-wrapper img:hover {
  top: -5px;
}
.post-section .sidebar-section__body .post-desc {
  flex: 1;
}
.post-section .sidebar-section__body .post-desc .title {
  width: 230px;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--font-color);
}
.post-section .sidebar-section__body .post-desc .title:hover {
  color: var(--primary-hover-color);
}
.post-section .sidebar-section__body .post-desc .title:active {
  color: var(--primary-active-color);
}
.post-section .sidebar-section__body .post-desc .category {
  width: 230px;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-sm);
  color: var(--font-sub-color);
}
.post-section .sidebar-section__body .post-desc .category:hover {
  color: var(--primary-hover-color);
}
.post-section .sidebar-section__body .post-desc .category:active {
  color: var(--primary-active-color);
}

.reply-section ul {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-sm);
}
.reply-section ul li a {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-sm);
  text-decoration: none;
  border-radius: var(--radius-md);
  color: var(--font-color);
  padding: var(--space-sm);
}
.reply-section ul li a .name,
.reply-section ul li a .date {
  font-size: var(--text-sm);
}
.reply-section ul li a:hover {
  background-color: var(--bg-sub-color);
}

#sidebar {
  padding: 0 var(--space-lg);
  width: 320px;
  box-sizing: border-box;
  background-color: var(--bg-color);
}
#sidebar .close-btn-wrapper {
  display: none;
}
#sidebar .sidebar-section {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
#sidebar .sidebar-section ul {
  list-style: none;
}
#sidebar .sidebar-section__title {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-sm);
  font-weight: bold;
  align-items: center;
  color: var(--font-sub-color);
  font-size: var(--text-sm);
}

@media screen and (max-width: 1200px) {
  #sidebar {
    padding-bottom: var(--space-lg);
    position: fixed;
    left: -900px;
    top: 0;
    z-index: var(--z-30);
    height: 100vh;
    overflow-y: auto;
    box-shadow: 0 5px 15px -5px var(--bg-sub-color);
    transition: left 0.2s ease-in-out;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #sidebar::-webkit-scrollbar {
    display: none;
  }
  #sidebar .close-btn-wrapper {
    z-index: var(--z-40);
    padding: var(--space-md) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: var(--bg-color);
  }
  #sidebar .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background-color: var(--bg-color);
    color: var(--font-color);
  }
  #sidebar .sidebar-close-btn:hover {
    background-color: var(--bg-sub-color);
  }
}
@media screen and (max-width: 576px) {
  #sidebar {
    width: 100%;
  }
}
.tag-cloud ul {
  list-style: none;
}
.tag-cloud ul a {
  text-decoration: none;
}

.pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-md);
}
.pagination a {
  text-decoration: none;
  color: var(--font-color);
}
.pagination .numbox {
  flex: 1;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-md);
}
.pagination .numbox .num {
  display: inline-block;
}
.pagination .numbox .num span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.pagination .numbox .num span:hover {
  color: #ffffff;
  background-color: var(--primary-hover-color);
}
.pagination .numbox .num span:active {
  color: #ffffff;
  background-color: var(--primary-active-color);
}
.pagination .numbox .num .selected {
  color: #ffffff;
  background-color: var(--primary-color);
  cursor: not-allowed;
}
.pagination .numbox .num .selected:hover, .pagination .numbox .num .selected:active {
  background-color: var(--primary-color);
}
.pagination .paging-prev-n-next-btn svg {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.pagination .paging-prev-n-next-btn svg:hover {
  color: #ffffff;
  background-color: var(--primary-hover-color);
}
.pagination .paging-prev-n-next-btn svg:active {
  color: #ffffff;
  background-color: var(--primary-active-color);
}
.pagination .no-more-prev,
.pagination .no-more-next {
  cursor: not-allowed;
  color: var(--font-sub-color);
}
.pagination .no-more-prev svg:hover,
.pagination .no-more-prev svg:active,
.pagination .no-more-next svg:hover,
.pagination .no-more-next svg:active {
  color: var(--font-color);
  background-color: transparent;
}

@media screen and (max-width: 576px) {
  .pagination .numbox {
    display: none;
  }
}
.img-detail {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  z-index: var(--z-50);
}
.img-detail__dimmed {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.img-detail-modal {
  border-radius: var(--radius-md);
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
  background-color: var(--bg-color);
  padding: var(--space-xs);
  z-index: var(--z-60);
}
.img-detail-modal__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 30px;
}
.img-detail-modal__header button.close-btn {
  border: none;
  background-color: transparent;
  color: var(--font-color);
}
.img-detail-modal__body {
  width: auto;
  height: auto;
  max-width: 70vw;
  max-height: 80vh;
  display: flex;
  align-items: center;
}
.img-detail-modal__body img {
  width: auto;
  height: auto;
  max-width: 70vw;
  max-height: calc(80vh - 30px - var(--space-md));
  border-radius: var(--radius-md);
}

.article-tags {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
.article-tags .tags {
  display: flex;
  flex-wrap: wrap;
  color: transparent;
}
.article-tags .tags a {
  color: var(--font-color);
  display: inline-block;
  margin: 0 var(--space-sm) var(--space-sm) 0;
  font-size: var(--text-sm);
  text-decoration: none;
  background-color: var(--bg-sub-color);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
}
.article-tags .tags a:before {
  content: "#";
}
.article-tags .tags a:hover {
  color: var(--primary-hover-color);
}
.article-tags .tags a:hover {
  color: var(--primary-active-color);
}

.reply {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
.reply .reply-title {
  display: flex;
  align-items: center;
  color: var(--font-sub-color);
  font-size: var(--text-sm);
  column-gap: var(--space-xs);
  font-weight: bold;
}

.intro-card {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  column-gap: var(--space-md);
  background-color: var(--bg-sub-color);
  border-radius: var(--radius-md);
  min-height: 150px;
}
.intro-card__img-wrapper {
  position: relative;
  min-width: 90px;
  min-height: 90px;
  max-width: 90px;
  max-height: 90px;
}
.intro-card__img-wrapper img {
  background-color: var(--bg-sub-color2);
  transition: top 0.2s ease-in-out;
  border-radius: var(--radius-full);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-card__img-wrapper img:hover {
  top: -8px;
}
.intro-card__text {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-sm);
}
.intro-card__text-name {
  font-weight: bold;
}
.intro-card__text-desc {
  color: var(--font-sub-color);
  line-height: 1.75;
  font-size: var(--text-sm);
}

@media screen and (max-width: 576px) {
  .intro-card {
    display: none;
  }
}
.permalink-template {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-lg);
}
.permalink-template .thumbnail-wrapper {
  width: 100%;
  height: 400px;
}
.permalink-template .thumbnail-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--bg-sub-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.permalink-template .post-control {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-sm);
  column-gap: var(--space-md);
  font-size: var(--text-sm);
  border-radius: var(--space-md);
  background-color: var(--bg-sub-color);
  padding: var(--space-sm) var(--space-md);
}
.permalink-template .post-control a {
  text-decoration: none;
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
  color: var(--font-color);
}
.permalink-template .post-control a:hover {
  color: var(--primary-hover-color);
}
.permalink-template .post-control a:active {
  color: var(--primary-active-color);
}
.permalink-template .article-tags {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
.permalink-template .article-tags .tags-title {
  display: flex;
  align-items: center;
  color: var(--font-sub-color);
  font-size: var(--text-sm);
  column-gap: var(--space-xs);
  font-weight: bold;
}

@media screen and (max-width: 576px) {
  .article-container .thumbnail-wrapper {
    height: 250px;
  }
}
.cover-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  column-gap: var(--space-md);
  height: 370px;
  overflow-x: auto;
  margin-bottom: var(--space-lg);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cover-card::-webkit-scrollbar {
  display: none;
}
.cover-card__item {
  isolation: isolate;
  max-width: 290px;
  min-width: 290px;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-sub-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cover-card__item a {
  text-decoration: none;
}
.cover-card__item:hover {
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}
.cover-card__item:hover .thumbnail img {
  scale: 105%;
}
.cover-card__item .thumbnail {
  display: block;
  width: 100%;
  min-height: 180px;
  max-height: 180px;
}
.cover-card__item .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.2s ease-in-out;
}
.cover-card__item .desc {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
.cover-card__item .desc .title {
  color: var(--font-color);
  font-weight: bold;
  font-size: var(--text-lg);
  line-height: 1.5;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.cover-card__item .desc .title:hover {
  color: var(--primary-hover-color);
}
.cover-card__item .desc .title:active {
  color: var(--primary-active-color);
}
.cover-card__item .desc .sub {
  display: flex;
  align-items: center;
  column-gap: var(--space-md);
  font-size: var(--text-xs);
}
.cover-card__item .desc .sub .category,
.cover-card__item .desc .sub .date {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
}
.cover-card__item .desc .sub .category span,
.cover-card__item .desc .sub .date span {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.cover-card__item .desc .sub .category {
  color: var(--primary-color);
}
.cover-card__item .desc .sub .category:hover {
  color: var(--primary-hover-color);
}
.cover-card__item .desc .sub .category:active {
  color: var(--primary-active-color);
}
.cover-card__item .desc .sub .date {
  color: var(--font-sub-color);
}
.cover-card__item .desc .summary {
  line-height: 1.5;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.cover-gallery {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-md);
  row-gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.cover-gallery__item {
  height: 400px;
  position: relative;
  isolation: isolate;
  width: 30%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-sub-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cover-gallery__item a {
  text-decoration: none;
}
.cover-gallery__item:hover {
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}
.cover-gallery__item:hover .thumbnail img {
  scale: 110%;
}
.cover-gallery__item:hover .desc {
  display: flex;
}
.cover-gallery__item .thumbnail {
  display: block;
  width: 100%;
  height: 100%;
}
.cover-gallery__item .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.2s ease-in-out;
}
.cover-gallery__item .desc {
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-md);
  flex-direction: column;
  row-gap: var(--space-md);
  background-color: var(--bg-alpha-color);
}
.cover-gallery__item .desc .title {
  color: var(--font-color);
  font-weight: bold;
  font-size: var(--text-sm);
  line-height: 1.3;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.cover-gallery__item .desc .title:hover {
  color: var(--primary-hover-color);
}
.cover-gallery__item .desc .title:active {
  color: var(--primary-active-color);
}
.cover-gallery__item .desc .sub {
  display: flex;
  align-items: center;
  column-gap: var(--space-md);
  font-size: var(--text-xs);
}
.cover-gallery__item .desc .sub .category,
.cover-gallery__item .desc .sub .date {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
}
.cover-gallery__item .desc .sub .category {
  color: var(--primary-color);
}
.cover-gallery__item .desc .sub .category:hover {
  color: var(--primary-hover-color);
}
.cover-gallery__item .desc .sub .category:active {
  color: var(--primary-active-color);
}
.cover-gallery__item .desc .sub .date {
  color: var(--font-sub-color);
}

@media screen and (max-width: 768px) {
  .cover-gallery__item {
    width: 48%;
  }
}
@media screen and (max-width: 576px) {
  .cover-gallery__item {
    width: 100%;
    box-shadow: 0 5px 15px -5px var(--bg-sub-color);
  }
  .cover-gallery__item .thumbnail img {
    scale: 110%;
  }
  .cover-gallery__item .desc {
    display: flex;
    font-size: var(--text-xs);
    padding: var(--space-sm);
  }
  .cover-gallery__item .desc .title {
    font-weight: normal;
  }
  .cover-gallery__item .desc .sub {
    display: none;
  }
}
.cover-cover {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.cover-cover__item {
  width: 100%;
  height: 400px;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  background-color: var(--bg-sub-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cover-cover__item a {
  text-decoration: none;
}
.cover-cover__item:hover {
  box-shadow: 0 5px 15px -5px var(--bg-sub-color);
}
.cover-cover__item:hover .thumbnail img {
  scale: 110%;
}
.cover-cover__item:hover .desc {
  display: flex;
}
.cover-cover__item .thumbnail {
  display: block;
  width: 100%;
  height: 100%;
}
.cover-cover__item .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.2s ease-in-out;
}
.cover-cover__item .desc {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  box-sizing: border-box;
  padding: var(--space-xl);
  flex-direction: column;
  row-gap: var(--space-md);
  align-items: flex-end;
  justify-content: flex-end;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--bg-alpha-color));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cover-cover__item .desc a.title {
  color: var(--font-color);
  font-size: var(--text-3xl);
  font-weight: bold;
  text-align: right;
}
.cover-cover__item .desc a.title:hover {
  color: var(--primary-hover-color);
}
.cover-cover__item .desc a.title:active {
  color: var(--primary-active-color);
}
.cover-cover__item .desc .sub {
  display: flex;
  align-items: center;
  column-gap: var(--space-md);
}
.cover-cover__item .desc .sub a.category,
.cover-cover__item .desc .sub .date {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
  color: var(--font-color);
}
.cover-cover__item .desc .sub a.category:hover {
  color: var(--primary-hover-color);
}
.cover-cover__item .desc .sub a.category:active {
  color: var(--primary-active-color);
}

@media screen and (max-width: 768px) {
  .cover-cover__item {
    height: 350px;
  }
  .cover-cover__item .desc a.title {
    font-size: var(--text-2xl);
  }
}
@media screen and (max-width: 576px) {
  .cover-cover__item {
    height: 320px;
  }
  .cover-cover__item .desc {
    padding: var(--space-lg);
  }
  .cover-cover__item .desc a.title {
    font-size: var(--text-xl);
  }
  .cover-cover__item .desc .sub {
    flex-direction: column;
    row-gap: var(--space-sm);
    align-items: flex-end;
  }
  .cover-cover__item .desc .sub a.category,
  .cover-cover__item .desc .sub .date {
    font-size: var(--text-sm);
  }
}
.cover-title {
  color: var(--font-sub-color);
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
  font-weight: bold;
  margin-bottom: var(--space-md);
}

.main-wrapper {
  width: calc(100% - 320px);
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
}

main {
  width: calc(100% - 220px - 10px);
  max-width: 1230px;
  box-sizing: border-box;
  padding: 0 var(--space-md);
}
main .main-title {
  display: flex;
  align-items: center;
  column-gap: var(--space-sm);
  font-weight: bold;
  color: var(--font-sub-color);
  margin-bottom: var(--space-lg);
}
main .main-contents {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 1200px) {
  .main-wrapper {
    width: 100%;
  }
}
@media screen and (max-width: 992px) {
  main {
    width: 100%;
  }
}
footer {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-2xl) var(--space-xl);
  color: var(--font-sub-color);
  font-size: var(--text-xs);
  display: flex;
  row-gap: var(--space-xl);
  column-gap: var(--space-md);
}
footer a {
  text-decoration: none;
  color: var(--font-sub-color);
}
footer a:hover {
  color: var(--primary-hover-color);
}
footer a:active {
  color: var(--primary-active-color);
}
footer .copyright-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
footer .copyright-container .skin-copyright {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-sm);
}
footer .copyright-container .skin-copyright > span {
  display: flex;
  align-items: center;
  column-gap: var(--space-sm);
}
footer .site-link-container,
footer .sns-link-container {
  max-width: 260px;
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-md);
}
footer .site-link-container a,
footer .sns-link-container a {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs);
}

@media screen and (max-width: 992px) {
  footer .site-link-container,
  footer .sns-link-container {
    max-width: 200px;
  }
}
@media screen and (max-width: 768px) {
  footer {
    flex-direction: column;
  }
  footer .site-link-container,
  footer .sns-link-container {
    max-width: 100%;
  }
}
button#heart-btn {
  bottom: 140px;
  display: none;
}

button#bottom-to-up-btn {
  bottom: 80px;
}

.floating-btn {
  position: fixed;
  right: 50px;
  border: none;
  z-index: var(--z-10);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--bg-sub-color2);
  border-radius: var(--radius-full);
  color: var(--font-color);
}
.floating-btn:hover {
  color: var(--primary-hover-color);
}
.floating-btn:hover {
  color: var(--primary-active-color);
}

@media screen and (max-width: 768px) {
  .floating-btn {
    right: 30px;
  }
}
#loading {
  display: block;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: var(--z-70);
  transition: opacity 0.25s ease-in-out;
}
#loading .loading__dimmed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-alpha-color);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: var(--z-80);
}
#loading .loading__spinner-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-90);
  display: flex;
  align-items: center;
  justify-content: center;
}
#loading .loading__spinner-wrapper .loading__spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--bg-alpha-color);
  border-left: 4px solid var(--primary-active-color);
  border-top: 4px solid var(--primary-color);
  border-right: 4px solid var(--primary-hover-color);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(290deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.contents {
  display: flex;
  width: 100%;
  margin: var(--space-lg) 0;
  max-width: 100vw;
  box-sizing: border-box;
}

/*# sourceMappingURL=style.css.map*/