: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: #262728;
    --bg-sub-color3: #dedede;
    --bt-hover-color: #4f4f4f;
    --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-table13-color: #f4feff;
    --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;
    --space-3xl: 6rem;
    --space-4xl: 7rem;
    --space-5xl: 8rem;
    --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: 1.25rem;
    --text-lg: 1.4rem;
    --text-xl: 1.8rem;
    --text-2xl: 2.05rem;
    --text-3xl: 2.35rem;
    --text-4xl: 2.6rem;
    --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: #d7d7de;
    --bg-sub-color3: #3e3e3e;
    --bt-hover-color: #c1c1c1;
    --bg-loading-dummy-color: #aaaaaa;
    --font-color: #f8f9fa;
    --font-sub-color: #adb5bd;
    --bg-info-color: #363636;
    --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-table13-color: #292C33;
    --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:16px;
}


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:#fff
}
::selection{
    background:var(--primary-color);
    color:#fff
}
.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 .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:3;
    -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 .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:#fff;
    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:20px;
}

/*들여쓰기*/
.article .contents_style ul,.article .contents_style ol{
    /*margin:var(--space-md) 0*/
    margin: 0 0;
}

.article .contents_style li{
    margin-left:var(--space-lg);
    line-height: 36px;
}
.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:4px solid var(--bg-sub-color);*/
    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:1em 0;
    /*margin: 0.5em 0 0 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)
}

/*제목 글자 줄간격 h4*/
.article .contents_style h4{
    margin:1em 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:auto;
    max-height: 650px;
    padding:var(--space-md);
    box-sizing:border-box;
    /*추가 부분분*/
    font-size : 14px;
    line-height: 1.4;
    font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
    tab-size: 3;
}

/*
.article .contents_style pre code{
  font-size: 14px;
  padding: 10px 20px 1px;
  font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
  border: 15px solid #292C33;
  border-radius: 8px;
  line-height: 1.4;
  overflow: auto;
}
*/




.article .contents_style p{
    word-break:break-word;
    line-height: 35px;
}

/*인라인 코드 inline code*/
.article .contents_style p code,.article .contents_style li code,.article .contents_style a code{
    /*color:var(--primary-color);*/
    /*color: #ff0000;
    font-weight: bold;
    background-color:var(--bg-sub-color);
    padding:var(--space-xs);
    border-radius:var(--radius-sm)*/

    font-family: Consolas !important;
    line-height: normal;
    background: rgba(135,131,120,0.15);
    color: #EB5757;
    border-radius: 3px;
    font-size: 90% !important;
    padding: 0.2em 0.4em;
    margin-right: 0.2em;
    display: inline-block;
    /*font-weight: bold;*/
}
.article .contents_style figure.imageblock{
    margin-top:var(--space-sm);
    margin-bottom: var(--space-md);
}
.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.6em;
    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)*/
    border-color: #d0d0d0;
  border-width: 0 0 0 4px;
  border-style: solid;
  padding: 1px 0 0 12px;
  color: #666;
  line-height: 1.75;
  font-size: 1em;
  text-align: left;
}
/*
.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;
    border-color: #d0d0d0;


  border-width: 0 0 0 4px;
  border-style: solid;
  padding: 1px 0 0 12px;
  color: #666;
  line-height: 1.75;
  font-size: 1em;
  text-align: left;
}
*/
.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:"⚠️";*/
    content:"💡";
    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);
    vertical-align: middle;
}
.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:3px solid var(--border-table12-first-td-color);
}
.article .contents_style table[data-ke-style=style13] tr td{
    /* background-color:var(--bg-sub-color);*/
    background-color:var(--bg-table13-color);
    /*background-color: #595959;*/
    color:var(--font-color);
}
.article .contents_style table[data-ke-style=style13] tr td:first-child{
    background-color:var(--bg-table13-color);
    /*background-color: #595959;*/
    /*color:#212529*/
    color:var(--font-color);
}
.article .contents_style table[data-ke-style=style13] tr:first-child td{
    /*background-color:var(--bg-table13-header-color);*/
    /*background-color: #595959;*/
    background-color:var(--bg-table13-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);
    /*margin: 20% !important;*/
    font-weight:bold;
    background-color:var(--bg-color);
    color: #b188fc;
}
.article .contents_style div[data-ke-type=moreLess] .btn-toggle-moreless:hover{
    color: #e7b3ff;
}
.article .contents_style div[data-ke-type=moreLess] .btn-toggle-moreless:before{
    content:"✔️ ";
}
.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:#bbb;
    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:#bbb;
    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 .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:#fff;
    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:.93
}
a.cloud3{
    font-size:1rem;
    opacity:.86
}
a.cloud4{
    font-size:.875rem;
    opacity:.79
}
a.cloud5{
    font-size:.75rem;
    opacity:.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 .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-open-btn{
    position:fixed;
    top:150px;
    left:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:132px;
    height:42px;
    padding:0 14px 0 10px;
    border:1px solid rgba(37,99,235,.34);
    border-left:none;
    border-top-right-radius:14px;
    border-bottom-right-radius:14px;
    background:linear-gradient(135deg,var(--primary-color),var(--primary-hover-color));
    color:#fff;
    font-weight:700;
    font-size:13px;
    letter-spacing:.02em;
    z-index:var(--z-20);
    box-shadow:0 8px 18px -10px rgba(37,99,235,.85);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.toc-open-btn:hover{
    transform:translateX(3px);
    box-shadow:0 10px 18px -9px rgba(29,78,216,.8);
    filter:brightness(1.04);
}
.toc-open-btn .toc-open-btn__icon{
    font-weight:900;
}


#toc-wrapper{
    position:fixed;
    top:0;
    left:-900px;
    z-index:var(--z-30);
    max-width:280px;
    box-sizing:border-box;
    padding:var(--space-md);
    background-color:var(--bg-sub-color);
    box-shadow:0 5px 15px -5px var(--bg-sub-color);
    height:100vh;
    width:100%;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    row-gap:var(--space-md);
    transition:left .2s ease-in-out
}
#toc-wrapper .toc-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
#toc-wrapper .toc-header .toc-title{
    display:flex;
    align-items:center;
    column-gap:var(--space-sm);
    font-weight:bold;
    color:var(--font-sub-color);
    font-size:1rem;
}
#toc-wrapper .toc-header .toc-close-btn{
    color:var(--font-color);
    border:none;
    background-color:rgba(0,0,0,0);
}
#toc-wrapper .toc-header .toc-close-btn:hover{
    color:var(--primary-hover-color)
}
#toc-wrapper .toc-header .toc-close-btn:active{
    color:var(--primary-active-color)
}
#toc-wrapper ul#toc{
    list-style:none;
    font-size:var(--text-sm);
    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);
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.45;
}
#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-h2{
    font-size: 1rem;
    font-weight: bold;
}
#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: 576px){
        .toc-open-btn{
        top:12px;
        min-width:118px;
        height:38px;
        font-size:12px
    }
    .toc-open-btn:hover{
        transform:none
    }
    #toc-wrapper{
        max-width:100%
    }
}
.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 .2s ease-in-out
}
.desktop-header{
    display:flex;
    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 a.logo{
    text-decoration:none;
    color:var(--font-color)
}

.desktop-header a.logo>span{
    font-weight:800
}

.desktop-header a.logo:hover{
    color:var(--primary-hover-color);
    animation: 0.1s vibration 4;
}
.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 .sidebar-open-btn{
    display:none
}
.desktop-header nav ul li button{
    border:none;
    background-color:rgba(0,0,0,0);
    border-radius:var(--radius-md);
    padding:var(--space-sm);
    align-items:center;
    color:var(--font-color)
}
.desktop-header nav ul li button:hover{
    background-color:var(--bg-sub-color);
}
.desktop-header nav ul li a,
.desktop-header nav ul li button.subscribe-link{
    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 button.subscribe-link{
    border:0;
    cursor:pointer;
    font-family:inherit;
    font-size:inherit;
}
.desktop-header nav ul li a.subscribe-link,
.desktop-header nav ul li button.subscribe-link{
    color:#fff;
    font-weight:700;
    border:1px solid rgba(37,99,235,.35);
    background:linear-gradient(135deg,var(--primary-color),var(--primary-hover-color));
    box-shadow:0 8px 16px -12px rgba(37,99,235,.95);
    transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.desktop-header nav ul li a.subscribe-link:hover,
.desktop-header nav ul li button.subscribe-link:hover{
    color:#fff;
    font-weight:700;
    animation:none;
    transform:translateY(-1px);
    background:linear-gradient(135deg,var(--primary-active-color),var(--primary-color));
    box-shadow:0 10px 18px -12px rgba(29,78,216,.95);
}
.desktop-header nav ul li.subscribe-a-wrapper{
    margin-left:10px;
}
/*메인 맨위위 맨 위위*/
.desktop-header nav ul li a:hover{
    background-color:var(--bg-sub-color);
    animation: 0.1s vibration 4;
    font-weight: bold;
}
.toggle-theme .bi-brightness-high{
    display:block
}
.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 nav ul li .sidebar-open-btn{
        display:flex
    }
}
@media screen and (max-width: 768px){
    .desktop-header nav ul li a,
.desktop-header nav ul li button.subscribe-link{
        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:rgba(0,0,0,0);
    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 button:hover,.m-header ul li button:active{
    background-color:var(--bg-sub-color)
}
.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)
}
.m-header ul li a:hover,.m-header ul li a:active{
    background-color:var(--bg-sub-color)
}
@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 ul.recent-post-list li:nth-child(n+4),
.post-section .sidebar-section__body ul.popular-post-list li:nth-child(n+4){
    display:none
}
.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 .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)
}
.tags-section .sidebar-section__body ul li:nth-child(n+13){
    display:none
}
.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-md);*/
    padding: 0 2rem 0 var(--space-md);
    width:300px;
    /*width: 10rem;*/
    box-sizing:border-box;
    background-color:var(--bg-color);
    /*right: var(--space-2xl);
    position: relative;*/
    display: flex;
    /*flex: 0 1 3px;*/
}


#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: 992px){
    #sidebar{
        padding-bottom:var(--space-lg);
        position:fixed;
        right:-900px;
        top:0;
        z-index:var(--z-30);
        height:100vh;
        overflow-y:auto;
        box-shadow:0 5px 15px -5px var(--bg-sub-color);
        transition:right .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:#fff;
    background-color:var(--primary-hover-color)
}
.pagination .numbox .num span:active{
    color:#fff;
    background-color:var(--primary-active-color)
}
.pagination .numbox .num .selected{
    color:#fff;
    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:#fff;
    background-color:var(--primary-hover-color)
}
.pagination .paging-prev-n-next-btn svg:active{
    color:#fff;
    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:rgba(0,0,0,0)
}
@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,.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:rgba(0,0,0,0);
    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:rgba(0,0,0,0)
}
.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 .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:250px;
    min-width:250px;
    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 .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-sm);
}
.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);
    font-weight: bold;
}
.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);

    overflow-x: auto;
    -ms-overflow-style: none;

    scrollbar-width: none;
}
.cover-gallery::-webkit-scrollbar{
    display:none;
}


/*커버 중 개별 하나*/
.cover-gallery__item{
    position:relative;
    isolation:isolate;
    
    max-width: 290px;
    min-width: 290px;
    /*width:33%;*/
    /*width: 30%;*/
    display: flex;
    /*display:block;*/
    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;
}
*/

/*사진 hover 했을 때 동작작*/
.cover-gallery__item:hover .desc{
    height: 100%;
    padding: var(--space-xl) var(--space-md) var(--space-md) var(--space-md);
}
.cover-gallery__item:hover .desc .title{
    font-size: var(--text-md);
    -webkit-line-clamp:4;
}
.cover-gallery__item:hover .desc .summary{
    font-size: var(--text-sm);
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
}



/*블록 안 사진*/
.cover-gallery__item .thumbnail{
    display:block;
    width:100%;
    min-height : 300px;
    max-height: 300px;
}
.cover-gallery__item .thumbnail img{
    width:100%;
    height: 100%;

    object-fit:cover;
    transition:scale .2s ease-in-out;
}
/*설명 블록*/
.cover-gallery__item .desc{
    position:absolute;
    bottom:0;
    left:0;
    /*display:none;*/
    display: flex;
    width:100%;
    box-sizing:border-box;
    padding:var(--space-md);
    flex-direction:column;
    row-gap:var(--space-md);
    background-color:var(--bg-alpha-color);

    /*블러 처리리*/
    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(1px);*/

    /*background-image: blur(6px);*/
    -webkit-backdrop-filter:blur(2px);
    /*-webkit-filter: blur(6px);*/
    backdrop-filter:blur(2px);
	/*transition: .4s;*/
}
/*설명 블록 -> 타이틀 제목*/
.cover-gallery__item .desc .title{
    color:var(--font-color);
    font-weight:bold;
    font-size:var(--text-sm);
    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-gallery__item .desc .summary{
    font-size:var(--text-xs);
    color:var(--font-color);
    display: none;

    line-height:1.3;
    word-break:break-all;
    overflow:hidden;
    text-overflow:ellipsis;
    /*
    display:-webkit-box;
    -webkit-line-clamp:3;
    -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-sm);
}
.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{
    font-weight: bold;
    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 .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-2xl);
    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)
    }
}


/*커버 링크 타입 link*/
.cover-link{
    width:25%;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    row-gap:var(--space-md);
    margin-bottom:var(--space-lg);
}
.cover-link__item{
    width:100%;
    height:250px;
    box-sizing:border-box;
    position:relative;
    isolation:isolate;
    background-color:var(--bg-sub-color);
    border-radius:var(--radius-md);
    overflow:hidden;
}

.cover-link__item a{
    text-decoration:none;
}
.cover-link__item:hover{
    box-shadow:0 5px 15px -5px var(--bg-sub-color);
}
.cover-link__item:hover .thumbnail img{
    scale:110%;
}
.cover-link__item:hover .desc{
    display:flex;
}
.cover-link__item .thumbnail{
    display:block;
    width:100%;
    height:100%;

    color:var(--font-color);
    font-size: var(--text-xs);
    text-align: right;
    line-height: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cover-link__item .thumbnail img{
    width:100%;
    height:90%;
    object-fit:cover;
    transition:scale .2s ease-in-out;
}



.cover-link__item .desc{
    height:45%;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    display:none;
    box-sizing:border-box;
    padding:var(--space-md);
    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.319), var(--bg-alpha-color));
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
.cover-link__item .desc a.title{
    color:var(--font-color);
    font-size:var(--text-sm);
    font-weight:bold;
    text-align:right;
}
.cover-link__item .desc a.title:hover{
    color:var(--primary-hover-color)
}
.cover-link__item .desc a.title:active{
    color:var(--primary-active-color)
}
.cover-link__item .desc .sub{
    display:flex;
    align-items:center;
    column-gap:var(--space-md);
    font-size: 0.6rem;
}
.cover-link__item .desc .sub a.category,.cover-link__item .desc .sub .date{
    display:flex;
    align-items:center;
    column-gap:var(--space-xs);
    color:var(--font-color)
}
.cover-link__item .desc .sub a.category:hover{
    color:var(--primary-hover-color)
}
.cover-link__item .desc .sub a.category:active{
    color:var(--primary-active-color)
}
@media screen and (max-width: 768px){
    .cover-link__item{
        height:350px
    }
    .cover-link__item .desc a.title{
        font-size:var(--text-md)
    }
}
@media screen and (max-width: 576px){
    .cover-link__item{
        height:320px
    }
    .cover-link__item .desc{
        padding:var(--space-sm)
    }
    .cover-link__item .desc a.title{
        font-size:var(--text-md)
    }
    .cover-link__item .desc .sub{
        flex-direction:column;
        row-gap:var(--space-sm);
        align-items:flex-end
    }
    .cover-link__item .desc .sub a.category,.cover-link__item .desc .sub .date{
        font-size:var(--text-xs)
    }
}

/*----링크크--------*/
.cover-thumbnail-1 {
    /*position: relative;
    margin-bottom: 77px;*/
    color: var(--font-sub-color);
    font-weight: bold;


    width: 100%;
    box-sizing: border-box;
    display: flex;
    column-gap: var(--space-md);
    row-gap:var(--space-md);
    height: 370px;
    overflow-x: auto;
    margin-bottom: var(--space-lg);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cover-thumbnail-1::-webkit-scrollbar{
    display:none;
}




.cover-thumbnail-1 TT1 {
    color: var(--font-sub-color);
    display: flex;
    align-items: center;
    column-gap: var(--space-xs);
    font-weight: bold;
    margin-bottom: var(--space-md);
    
    
}

.cover-thumbnail-1 ul {
  display: inline-block;
  /*width: 100%;*/
    max-width: 290px;
    min-width: 290px;
  vertical-align: top;
}

.cover-thumbnail-1 ul li {
  /*float: left;
  width: 33.333333333333333%;
  padding-left: 3.26797385620915%;
  margin: 0 0 38px;
  box-sizing: border-box;*/



    isolation: isolate;
    max-width: 200px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    scrollbar-width: none;
}
/*
.cover-thumbnail-1 ul li:hover .title{
    height: 100%;
    background-color: var(--bg-sub-color);
    position:absolute;
}*/

.cover-thumbnail-1 ul li a {
  display: block;
  text-decoration: none;
}

.cover-thumbnail-1 ul li:hover figure img{
    scale:110%;
}
.cover-thumbnail-1 ul li:hover .titlebox .title{
    display: none;
}
.cover-thumbnail-1 ul li:hover .titlebox .summary{
    display: inline-block;
    color:var(--primary-hover-color);
}
.cover-thumbnail-1 ul li:active .titlebox .summary{
    display: inline-block;
    color:var(--primary-active-color);
}


.cover-thumbnail-1 ul li figure {
  display: block;
  height: 0;
  margin-bottom: 9px;
  padding-bottom: 130.434782608695652%;
  background-color: var(--bg-color);
}

.cover-thumbnail-1 ul li figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  transition:scale .2s ease-in-out;
}

.cover-thumbnail-1 ul li .titlebox {
  padding-top: var(--space-xs);
  
  
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.cover-thumbnail-1 ul li .titlebox .title {
    color: var(--font-color);
    font-weight: bold;
    font-size: var(--text-md);
    word-break: break-all;

    position: relative;
    display: block;
}

.cover-thumbnail-1 ul li .titlebox .summary{
    font-size:var(--text-sm);
    color:var(--font-color);

    line-height:1.3;
    word-break:break-all;
    overflow:hidden;
    text-overflow:ellipsis;
    background-color: var(--bg-color);
    display: none;
}

.cover-thumbnail-1 ul li a:hover .titlebox .title .summary{
    display: block;
}


.cover-thumbnail-1 ul li .date {
  display: block;
  font-size: 0.75em;
  color: #999;
}

.cover-thumbnail-1 .more {
  position: absolute;
  top: 4px;
  right: 0;
  font-weight: 300;
  font-size: 0.875em;
  color: #999;
}

  .cover-thumbnail-1 h2 {
    font-weight: 600;
  }

  .cover-thumbnail-1 .more {
    top: 40px;
    right: 24px;
  }
/*
  .cover-thumbnail-1 ul li {
    float: none;
    width: 100%;
    margin-bottom: 30px;
    padding-left: 0;
  }*/

  .cover-thumbnail-1:first-child {
    border-top: 0;
  }





.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) 크기 넓이 폭*/
main{
    width:calc(100% - 400px);
    /*width: 80%;*/
    box-sizing:border-box;
    padding: 0 2rem 0 15rem;
    /*padding:0 var(--space-md)*/
    margin-right: 3rem;
}

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: 992px){
    main{
        width:100%;
        padding: 0 var(--space-md);
    }
}
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;
    box-shadow: 0 5px 5px #000000;
}
button#bottom-to-up-btn{
    bottom:80px;
    box-shadow: 0 5px 5px #000000;
}
/*플로팅 버튼 하트, 맨위*/
.floating-btn{
    position:fixed;
    right:var(--space-lg);
    border:none;
    z-index:var(--z-10);
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--space-xl);
    height:var(--space-xl);
    background-color:var(--bg-sub-color3);
    border-radius:var(--radius-full);
    color:var(--font-color)
}
.floating-btn#heart-btn:hover{
    /*box-shadow:0 5px 15px -5px var(--bg-sub-color)*/
    box-shadow: 0 4px 15px -7px var(--bt-hover-color);
    bottom : 145px;
}
.floating-btn#bottom-to-up-btn:hover{
    /*box-shadow:0 5px 15px -5px var(--bg-sub-color)*/
    box-shadow: 0 4px 15px -7px var(--bt-hover-color);
    bottom : 85px;
}
.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 .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 .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) auto;
    max-width:1800px;
    box-sizing:border-box;
}


/*진동*/
@keyframes vibration {
  from {
    transform: rotate(1deg);
  }
  to {
    transform: rotate(-1deg);
  }
}

/* 본문 색상밑줄 */
/* 물결 */
u{
    text-decoration-style: wavy;
    text-decoration-color:#f86868;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    
}
/* 형광펜 */
/*
u{
text-decoration:none;
display:inline;
background: linear-gradient(to top, #ff00006a, transparent 90%);
border-radius: 10px 30px;
}
*/
/* 본문 색상밑줄 끝 */

/*캡션*/
figure figcaption{
    padding-top: 0;
}


/*스크롤바바*/
::-webkit-scrollbar {
	width: 10px;  /* 세로축 스크롤바 길이 */
	height: 10px;  /* 가로축 스크롤바 길이 */
}
::-webkit-scrollbar-button:start {
	background-color: white; /* Top, Left 방향의 이동버튼 */
}
::-webkit-scrollbar-button:end {
	background-color: white; /* Bottom, Right 방향의 이동버튼 */
}
::-webkit-scrollbar-track-piece {
	background-color: white;	/*스크롤 바 배경 색상*/
}
::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background-color: gray; /*스크롤 바 색상*/
}


/* fallback home cover tuning */
.fallback-home-covers .notice-hero-card {
    position: relative;
    overflow: hidden;
    margin: 18px 0 24px;
    min-height: 420px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #000;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.fallback-home-covers .notice-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(110%);
    transform: scale(1);
    transition: transform .4s ease, filter .4s ease;
}

.fallback-home-covers .notice-hero-dimmed {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    transition: background .35s ease;
}

.fallback-home-covers .notice-hero-content {
    position: relative;
    z-index: 2;
    min-height: 420px;
    padding: 38px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}

.fallback-home-covers .notice-hero-card:hover,
.fallback-home-covers .notice-hero-card:focus-within{
    border-color: rgba(247, 201, 72, 0.45);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.fallback-home-covers .notice-hero-card:hover .notice-hero-bg,
.fallback-home-covers .notice-hero-card:focus-within .notice-hero-bg{
    transform: scale(1.04);
    filter: saturate(118%) brightness(1.05);
}

.fallback-home-covers .notice-hero-card:hover .notice-hero-dimmed,
.fallback-home-covers .notice-hero-card:focus-within .notice-hero-dimmed{
    background: rgba(0, 0, 0, 0.54);
}

.fallback-home-covers .notice-hero-card:hover .notice-hero-content,
.fallback-home-covers .notice-hero-card:focus-within .notice-hero-content{
    opacity: 1;
    transform: translateY(0);
}

.fallback-home-covers .notice-hero-kicker {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: #f7c948;
}

.fallback-home-covers .notice-hero-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.25;
    color: #fff;
}

.fallback-home-covers .notice-hero-desc {
    margin: 0;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.fallback-home-covers .notice-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fallback-home-covers .notice-hero-tags span {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.42);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.95);
}

.fallback-home-covers .fallback-popular-desc {
    margin-top: 8px;
    line-height: 1.55;
    color: var(--text-gray, #9aa0a6);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.fallback-popular-list .fallback-popular-item:nth-child(n+5){
    display:none
}
.fallback-popular-list .fallback-popular-item .desc-wrapper .title{
    display:block;
    overflow:visible;
    text-overflow:clip;
    -webkit-line-clamp:unset;
    -webkit-box-orient:initial;
    white-space:normal;
    line-height:1.5;
    word-break:break-word;
    overflow-wrap:anywhere
}

@media screen and (max-width: 768px) {
    .fallback-home-covers .notice-hero-card {
        min-height: 340px;
    }

    .fallback-home-covers .notice-hero-content {
        min-height: 340px;
        padding: 28px 22px;
    }

    .fallback-home-covers .notice-hero-title {
        font-size: 24px;
    }

    .fallback-home-covers .notice-hero-desc {
        font-size: 14px;
        line-height: 1.6;
    }
}
@media (hover: none){
    .fallback-home-covers .notice-hero-content{
        opacity:1;
        transform:none;
        pointer-events:auto
    }
}