body, body.dark {
    --main: #FFFFFF;
    --sub: #2F3437;
    --middle: #dddddd;

    --primary: #9b4dca;
    
}


body.light {
    --main: #2F3437;
    --sub: #FFFFFF;
    --middle: #5b646b;
}

::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}

::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(1, 1, 1, 0.5);
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(1, 1, 1, 0.2);
}

*,
*:after,
*:before {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    overflow-y: scroll;
}

body {
    color: var(--main);
    background: var(--sub);
    font-family: "Inter", "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1.6;
    margin: 0;
    
    /* transition: background-color 0.7s ease; */
}

blockquote {
    border-left: 0.3rem solid var(--middle);
    margin-left: 0;
    margin-right: 0;
    padding: 1rem 1.5rem;
}

blockquote *:last-child {
    margin-bottom: 0;
}


.button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
    background-color: var(--primary);
    border: 0.1rem solid var(--primary);
    border-radius: 0.4rem;
    cursor: pointer;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    height: 3.8rem;
    letter-spacing: 0.1rem;
    line-height: 3.8rem;
    padding: 0 3rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.button:focus,
.button:hover,
button:focus,
button:hover,
input[type=button]:focus,
input[type=button]:hover,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=submit]:focus,
input[type=submit]:hover {
    background-color: var(--sub);
    border-color: var(--middle);
    color: var(--main);
    outline: 0;
}

.button[disabled],
button[disabled],
input[type=button][disabled],
input[type=reset][disabled],
input[type=submit][disabled] {
    cursor: default;
    opacity: 0.5;
}

.button[disabled]:focus,
.button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type=button][disabled]:focus,
input[type=button][disabled]:hover,
input[type=reset][disabled]:focus,
input[type=reset][disabled]:hover,
input[type=submit][disabled]:focus,
input[type=submit][disabled]:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

.button.button-outline,
button.button-outline,
input[type=button].button-outline,
input[type=reset].button-outline,
input[type=submit].button-outline {
    background-color: transparent;
    color: var(--primary);
}

.button.button-outline:focus,
.button.button-outline:hover,
button.button-outline:focus,
button.button-outline:hover,
input[type=button].button-outline:focus,
input[type=button].button-outline:hover,
input[type=reset].button-outline:focus,
input[type=reset].button-outline:hover,
input[type=submit].button-outline:focus,
input[type=submit].button-outline:hover {
    background-color: transparent;
    border-color: var(--middle);
    color: var(--main);
}

.button.button-outline[disabled]:focus,
.button.button-outline[disabled]:hover,
button.button-outline[disabled]:focus,
button.button-outline[disabled]:hover,
input[type=button].button-outline[disabled]:focus,
input[type=button].button-outline[disabled]:hover,
input[type=reset].button-outline[disabled]:focus,
input[type=reset].button-outline[disabled]:hover,
input[type=submit].button-outline[disabled]:focus,
input[type=submit].button-outline[disabled]:hover {
    border-color: inherit;
    color: var(--primary);
}

.button.button-clear,
button.button-clear,
input[type=button].button-clear,
input[type=reset].button-clear,
input[type=submit].button-clear {
    background-color: transparent;
    border-color: transparent;
    color: var(--primary);
}

.button.button-clear:focus,
.button.button-clear:hover,
button.button-clear:focus,
button.button-clear:hover,
input[type=button].button-clear:focus,
input[type=button].button-clear:hover,
input[type=reset].button-clear:focus,
input[type=reset].button-clear:hover,
input[type=submit].button-clear:focus,
input[type=submit].button-clear:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--main);
}

.button.button-clear[disabled]:focus,
.button.button-clear[disabled]:hover,
button.button-clear[disabled]:focus,
button.button-clear[disabled]:hover,
input[type=button].button-clear[disabled]:focus,
input[type=button].button-clear[disabled]:hover,
input[type=reset].button-clear[disabled]:focus,
input[type=reset].button-clear[disabled]:hover,
input[type=submit].button-clear[disabled]:focus,
input[type=submit].button-clear[disabled]:hover {
    color: var(--primary);
}


code {
    background: var(--sub);
    border-radius: 0.4rem;
    font-size: 86%;
    margin: 0 0.2rem;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

pre {
    background: var(--sub);
    border-left: 0.3rem solid var(--primary);
    overflow-y: hidden;
}

pre>code {
    border-radius: 0;
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
}


hr {
    border: 0;
    border-top: 0.1rem solid var(--middle);
    margin: 3rem 0;
}


input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
textarea,
select {
    appearance: none;
    background-color: transparent;
    border: 0.1rem solid var(--middle);
    border-radius: 0.4rem;
    box-shadow: none;
    box-sizing: inherit;
    height: 3.8rem;
    padding: 0.6rem 1rem;
    width: 100%;
    color: var(--main);
}

input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    outline: 0;
}

select {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="var(--color-quaternary)" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
    padding-right: 3rem;
}

select:focus {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="var(--primary)" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
}

textarea {
    min-height: 6.5rem;
}

label,
legend {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

fieldset {
    border-width: 0;
    padding: 0;
}

input[type=checkbox],
input[type=radio] {
    display: inline;
}

.label-inline {
    display: inline-block;
    font-weight: normal;
    margin-left: 0.5rem;
}


.container {
    margin: 0 auto;
    max-width: 112rem;
    padding: 0 0.9rem;
    position: relative;
    width: 100%;
}

.row {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
}

.row.row-no-padding {
    padding: 0;
}

.row.row-no-padding>.column {
    padding: 0;
}

.row.row-wrap {
    flex-wrap: wrap;
}

.row.row-top {
    align-items: flex-start;
}

.row.row-bottom {
    align-items: flex-end;
}

.row.row-center {
    align-items: center;
}

.row.row-stretch {
    align-items: stretch;
}

.row.row-baseline {
    align-items: baseline;
}

.row .column {
    display: block;
    flex: 1 1 auto;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
}

.row .column.column-offset-10 {
    margin-left: 10%;
}

.row .column.column-offset-20 {
    margin-left: 20%;
}

.row .column.column-offset-25 {
    margin-left: 25%;
}

.row .column.column-offset-33,
.row .column.column-offset-34 {
    margin-left: 33.3333%;
}

.row .column.column-offset-50 {
    margin-left: 50%;
}

.row .column.column-offset-66,
.row .column.column-offset-67 {
    margin-left: 66.6666%;
}

.row .column.column-offset-75 {
    margin-left: 75%;
}

.row .column.column-offset-80 {
    margin-left: 80%;
}

.row .column.column-offset-90 {
    margin-left: 90%;
}

.row .column.column-10 {
    flex: 0 0 10%;
    max-width: 10%;
}

.row .column.column-20 {
    flex: 0 0 20%;
    max-width: 20%;
}

.row .column.column-25 {
    flex: 0 0 25%;
    max-width: 25%;
}

.row .column.column-33,
.row .column.column-34 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

.row .column.column-40 {
    flex: 0 0 40%;
    max-width: 40%;
}

.row .column.column-50 {
    flex: 0 0 50%;
    max-width: 50%;
}

.row .column.column-60 {
    flex: 0 0 60%;
    max-width: 60%;
}

.row .column.column-66,
.row .column.column-67 {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
}

.row .column.column-75 {
    flex: 0 0 75%;
    max-width: 75%;
}

.row .column.column-80 {
    flex: 0 0 80%;
    max-width: 80%;
}

.row .column.column-90 {
    flex: 0 0 90%;
    max-width: 90%;
}

.row .column .column-top {
    align-self: flex-start;
}

.row .column .column-bottom {
    align-self: flex-end;
}

.row .column .column-center {
    align-self: center;
}

@media (min-width: 40rem) {
    .row {
        flex-direction: row;
        margin-left: -1rem;
        width: calc(100% + 2rem);
    }

    .row .column {
        margin-bottom: inherit;
        padding: 0 1rem;
    }
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:focus,
a:hover {
    color: var(--middle);
}

/*!
* Milligram-scss v1.3.0
* https://milligram.github.io
*
* Copyright (c) 2017 CJ Patoilo
* Licensed under the MIT license
*/
dl,
ol,
ul {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
}

dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
    font-size: 90%;
    margin: 1.5rem 0 1.5rem 3rem;
}

ol {
    list-style: decimal inside;
}

ul {
    list-style: circle inside;
}


.button,
button,
dd,
dt,
li {
    margin-bottom: 1rem;
}

fieldset,
input,
select,
textarea {
    margin-bottom: 1.5rem;
}

blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
    margin-bottom: 2.5rem;
}


table {
    border-spacing: 0;
    width: 100%;
}

td,
th {
    border-bottom: 0.1rem solid var(--sub);
    padding: 1.2rem 1.5rem;
    text-align: left;
}

td:first-child,
th:first-child {
    padding-left: 0;
}

td:last-child,
th:last-child {
    padding-right: 0;
}


b,
strong {
    font-weight: bold;
}

p {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    letter-spacing: -0.1rem;
    margin-bottom: 2rem;
    margin-top: 0;
}

h1 {
    font-size: 4.6rem;
    line-height: 1.2;
}

h2 {
    font-size: 3.6rem;
    line-height: 1.25;
}

h3 {
    font-size: 2.8rem;
    line-height: 1.3;
}

h4 {
    font-size: 2.2rem;
    letter-spacing: -0.08rem;
    line-height: 1.35;
}

h5 {
    font-size: 1.8rem;
    letter-spacing: -0.05rem;
    line-height: 1.5;
}

h6 {
    font-size: 1.6rem;
    letter-spacing: 0;
    line-height: 1.4;
}

img {
    max-width: 100%;
    min-height: 200px;
}

.preview-panel.blur img {
    filter: blur(4px);
}

.clearfix:after {
    clear: both;
    content: " ";
    display: table;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

/**
* Icons
*/
.icon>svg {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.icon>svg path {
    fill: var(--middle);
}

/* img.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
} */

/**
* Site header
*/
.wrapper .container {
    max-width: 80rem;
}

.site-header {
    text-align: center;
}

a.site-title {
    color: var(--main) !important;
}

.site-title {
    margin-top: 2.5rem;
    font-size: 40px;
    font-weight: 700;
    word-break: break-all;
}

.navbar {
    display: block;
}

.navbar ul {
    margin-bottom: 1rem;
}
@media (min-width: 40rem) {
    .navbar ul {
        margin-bottom: 1.5rem;
    }
}

.nav-item {
    position: relative;
    display: inline-block;
    width: 55px;
    margin: 0.6rem;
    padding: 0.2rem;

    font-size: 14px;
    font-weight: 700;
    list-style: none;
    word-break: keep-all;
}

.nav-item::after {
    content: "";
    position: absolute;
    top: -3px; /* 글자와 선 사이의 간격 조정 */
    left: 0;
    right: 0;
    height: 3px; /* 선의 두께 */
    background-color: var(--main);
}

.nav-item a {
    color: var(--main);
    text-decoration: none;
}

/* .nav-item.active::after {
    background-color: rgb(2 141 117)
} */

.nav-item.active a {
    /* color: rgb(2 141 117) */
    text-decoration: underline;
}

.post-nav {
    text-align: center;
    padding: 1rem;
}

.post-title {
    display: block;
    text-align: center;
    font-weight: 400;
}

.post-header .post-title {
    color: var(--middle);
    font-size: 3rem;
    font-weight: 800;
}
.post-header .post-title::after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="%23fff" d="M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z"/></svg>') no-repeat center;
    
    content: '';
    display: inline-block;
    height: 22px;
    width: 34px;
}

.post-content {
    font-weight: 400;
}

.archive_type {
    text-align: center;
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 1.7rem;
}

.archive_type-sub {
    text-align: center;
    font-size: smaller;
    margin-top: -1.9rem;
}

@media (max-width: 40rem) {
    .archive_type {
        margin-bottom: 1rem;
    }
    .archive_type-sub {
        margin-top: -1.1rem;
    }
}

/**
* override column size for mobile
*/
@media (max-width: 40rem) {

    .row .column.column-33,
    .row .column.column-34,
    .row .column.column-50 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/**
* Site footer
*/
.site-footer {
    border-top: 1px solid #e8e8e8;
    margin: 2rem 0;
    padding: 2rem 0;

    display: flex;
    justify-content: center;
    gap: 20px; /* 두 div 사이 간격 설정 */
    margin-top: 50px; /* 원하는 위치로 조정 */
}

/* .contact-list,
.social-media-list {
    list-style: none;
    margin-left: 0;
} */

/**
* Misc
*/
.preview-panel {
    padding: 0.7rem 0;
    box-sizing: border-box;
    border: 1px solid var(--sub);
}

.preview-panel:hover {
    border: 1px solid var(--sub);
}























































.pre {
    position: relative;
    padding: 10px 0px;
    margin-bottom: 20px;
    text-align: center;
    border: solid 1px var(--main);
    border-radius: 5px;
}

.pre p {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: var(--main);
}

.pre a {
    color: #CFBCA6;
    text-decoration: underline;
}

.pre p:nth-child(3) a {
    color: #ff8e0b;
    text-decoration: underline;
}



.theme_changer {
    cursor: pointer;
    margin: 0;
    margin-top: 3.5px;
}

.theme_changer input {
    display: none;
}

.theme_changer input + div {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    position: relative;
    transition: box-shadow .5s ease 0s, transform .5s ease .1s;
}

.theme_changer input:checked + div:before {
    transform: scale(0);
}

.theme_changer input + div:before {
    /* background: url('/img/s.png') no-repeat center; */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="%23FFD43B" d="M210.2 53.9C217.6 50.8 226 51.7 232.7 56.1L320.5 114.3L408.3 56.1C415 51.7 423.4 50.9 430.8 53.9C438.2 56.9 443.4 63.5 445 71.3L465.9 174.5L569.1 195.4C576.9 197 583.5 202.4 586.5 209.7C589.5 217 588.7 225.5 584.3 232.2L526.1 320L584.3 407.8C588.7 414.5 589.5 422.9 586.5 430.3C583.5 437.7 576.9 443.1 569.1 444.6L465.8 465.4L445 568.7C443.4 576.5 438 583.1 430.7 586.1C423.4 589.1 414.9 588.3 408.2 583.9L320.4 525.7L232.6 583.9C225.9 588.3 217.5 589.1 210.1 586.1C202.7 583.1 197.3 576.5 195.8 568.7L175 465.4L71.7 444.5C63.9 442.9 57.3 437.5 54.3 430.2C51.3 422.9 52.1 414.4 56.5 407.7L114.7 320L56.5 232.2C52.1 225.5 51.3 217.1 54.3 209.7C57.3 202.3 63.9 196.9 71.7 195.4L175 174.6L195.9 71.3C197.5 63.5 202.9 56.9 210.2 53.9zM239.6 320C239.6 275.6 275.6 239.6 320 239.6C364.4 239.6 400.4 275.6 400.4 320C400.4 364.4 364.4 400.4 320 400.4C275.6 400.4 239.6 364.4 239.6 320zM448.4 320C448.4 249.1 390.9 191.6 320 191.6C249.1 191.6 191.6 249.1 191.6 320C191.6 390.9 249.1 448.4 320 448.4C390.9 448.4 448.4 390.9 448.4 320z"/></svg>') no-repeat center;
    transform: scale(1);

    content: '';
    width: inherit;
    height: inherit;
    position: absolute;
    left: 0;
    top: 0;
    transition: background .5s ease;
}

.theme_changer input + div:after {
    /* background: url('/img/m.png') no-repeat center center; */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="%2374C0FC" d="M320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C388.8 576 451.3 548.8 497.3 504.6C504.6 497.6 506.7 486.7 502.6 477.5C498.5 468.3 488.9 462.6 478.8 463.4C473.9 463.8 469 464 464 464C362.4 464 280 381.6 280 280C280 207.9 321.5 145.4 382.1 115.2C391.2 110.7 396.4 100.9 395.2 90.8C394 80.7 386.6 72.5 376.7 70.3C358.4 66.2 339.4 64 320 64z"/></svg>') no-repeat center center;
    transform: scale(0);

    border-radius: 50%;
    content: '';
    width: 21px;
    height: 21px;
    position: absolute;
    transition: all .5s ease;
}

.theme_changer input:checked + div {
    transform: scale(.5);
}

.theme_changer input:checked + div:after {
    transform: scale(2);
    transition: transform .5s ease .15s;
}

.theme_changer .toggle-button {
    margin-left: auto;
    margin-right: auto;
}





.thumbnail_title {
    position: absolute;
    left: 12px;
    bottom: 12px;
    align-items: stretch;
    background-color: transparent;
    border: 0 solid black;
    box-sizing: border-box;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    list-style: none;
    margin: 0px;
    min-height: 0px;
    min-width: 0px;
    max-width: calc(100% - 24px);
    padding: 0px;
    text-decoration: none;
    z-index: 0;
}
.thumbnail_title_inner {
    align-self: flex-start;
    max-width: 100%;
    height: 20px;
    pointer-events: none !important;
    justify-content: center;
    padding: 12px 6px !important;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 0 solid black;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.77);
    color: white;
}






/* 토스트 메시지 스타일 */
#copy-toast {
    visibility: hidden;
    min-width: 200px;
    margin-left: -100px;
    background-color: var(--main);
    color: var(--sub);
    text-align: center;
    border-radius: 4px;
    padding: 12px;
    position: fixed;
    left: 50%;
    bottom: 40px;
    font-size: 14px;
    font-weight: 600;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s, bottom 0.5s;
}
#copy-toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 60px;
}








.page-content p {
    word-break: break-all;
}










.archive-h3 {
    margin: 0;
}