style.css

@charset "UTF-8";
:root{
    --white:#ffffff;
    --grey-50:#fbfbfb;
    --grey-100:#f7f7f7;
    --grey-200:#f1f1f1;
    --grey-300:#e5e5e5;
    --grey-400:#c2c2c2;
    --grey-500:#a4a4a4;
    --grey-600:#7a7a7a;
    --grey-700:#666666;
    --grey-800:#474747;
    --grey-900:#252525;
    --grey-dimmed-05:#25252505;
    --grey-dimmed-10:#2525251a;
    --grey-dimmed-20:#25252533;
    --grey-dimmed-30:#2525254d;
    --grey-dimmed-50:#25252580;
    --grey-dimmed-70:#252525b3;
    --grey-dimmed-85:#252525d9;
    --danger:#ffcccc;
    --warning:#fde7a0;
    --disabled:var(--grey-400);
    --bg-color:#ffffff;
    --bg-dimmed-90:#ffffffe6;
    --text-color:var(--grey-900);
    --text-light:var(--grey-800);
    --text-lighter:var(--grey-700);
    --primary-rgb:33,71,196;
    --primary-color:rgb(var(--primary-rgb))!important;
    --primary-dimmed-70:rgba(var(--primary-rgb), 0.7)!important;
    --primary-dimmed-20:rgba(var(--primary-rgb), 0.2)!important;
    --primary-dimmed-10:rgba(var(--primary-rgb), 0.1)!important;
    --bg-btn:var(--grey-dimmed-10);
    --bg-btn-hover:var(--grey-dimmed-20);
    --bg-overlay:var(--grey-dimmed-05);
    --fg-btn-dark:var(--grey-50);
    --bg-btn-dark:var(--grey-700);
    --bg-btn-dark-hover:var(--primary-color);
    --font-h1:3rem;
    --font-h2:2rem;
    --font-h3:1.5rem;
    --font-xl:1.25rem;
    --font-lg:1.125rem;
    --font-md:16px;
    --font-sm:0.875rem;
    --font-xs:0.75rem;
    --font-medium:400;
    --font-bold:700;
    --line-height-sm:1.3;
    --line-height-md:1.5;
    --line-height-lg:1.8;
    --letter-spacing-kr:-0.0625em;
    --font-sans:-apple-system,BlinkMacSystemFont,Helvetica,"Segoe UI",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    --box-padding:14px;
    --btn-padding:0.25em 0.75em;
    --radius-sm:4px;
    --radius-md:8px;
    --radius-circle:50%;
    --blur:blur(8px);
    --border:1px solid var(--border-color);
    --border-color:var(--grey-300);
    --shadow:0 1px 2px 0 var(--grey-dimmed-20);
    --icon-size:24px;
    --btn-min-w:24px
}
.dropdown-content .dropdown-profile-title,.hd .p-category,.module-notice ul li a,.toc-wrap .toc li{white-space:nowrap;text-overflow:ellipsis}
#tt-search .tt-search-inner input:focus,:focus{outline:0}
body,html{font-family:var(--font-sans);font-weight:var(--font-medium);font-size:var(--font-md);line-height:var(--line-height-md);color:var(--text-color);background-color:var(--bg-color);scroll-behavior:smooth;min-width:320px;-webkit-tap-highlight-color:transparent;-moz-tap-highlight-color:transparent;-ms-tap-highlight-color:transparent;text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%}
::selection{background-color:var(--primary-dimmed-20)}
::-webkit-scrollbar{-webkit-appearance:none;width:8px;height:8px}
::-webkit-scrollbar-track{background:0 0}
::-webkit-scrollbar-thumb{background-color:var(--grey-dimmed-10);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background-color:var(--grey-dimmed-50)}
#content{opacity:0}
#content.show{opacity:1!important;transition:opacity .4s ease-in}
i{margin:0 4px 0 0}
.container_postbtn .btn_menu_toolbar.following .ico_check_type1,.post-reply,.protected .media .textbox.focus-wrap{margin-top:16px}
#search-bar.active .input-text,#search-bar.active .search-close-icon,#tt-body-archive .not-found .archive,#tt-body-category .not-found .category,#tt-body-tag .not-found .tag,.dropdown-content ul li a,.e-content figure.imageblock.widthContent,.h-entry .list_content .post-link,.module-category .sub_category_list li,.secret-wrap input:checked~.checkmark:after,.show,.thumnail a,article,aside,canvas,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{color:inherit;}
#container,#header_wrap #header_gnb,nav div{max-width:100%!important}
button,input{border:0;border-radius:0;background-color:transparent}
.thumnail,.thumnail img{border-radius:var(--radius-sm)}
img{border-style:none;box-sizing:border-box}
address,em{font-style:normal}
a{cursor:pointer;color:inherit;text-decoration:none!important}
ol,ul{list-style:none}
.blind{position:absolute;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;width:1px;height:1px}
#sidebar .module,.list_content{margin-bottom:32px}
.index_wrap{position:relative;background-color:inherit;overflow:hidden}
.list_detail_wrap{overflow:hidden;text-decoration:none}
.list_detail_wrap .post_title{margin-bottom:4px;display:-webkit-box;overflow:hidden}
.entry-tag,.list_detail_wrap .post_text,.module-notice ul li,.post-reply .tt-link-comment .tt_txt_g,.post_list,.visitor-row{font-size:var(--font-sm)}
.list_detail_wrap .post_text{position:relative;color:var(--text-light);max-height:48px;overflow:hidden;margin-bottom:8px;display:-webkit-box}
#container nav ul li,.post_category .material-icons-outlined{font-size:var(--font-md)}
#paging .pagination .selected,#paging .pagination li a:hover,.area_btn_more_wrap .link_more:hover,.entry-tag a,.hd .sub-info .meta-cate a,.module-category .category_list a:hover,.module-notice ul li:hover a,.post-content .tx-link,.post-content a,.tag-list a,.tt-box-total .tt_num_g{color:var(--primary-color)}
#paging .pagination li,#wrap,.post_category,.post_date,.post_list,.visitor-row .visitor-date{display:inline-block}
.post_list{color:var(--text-light)}
.list_content{position:relative;overflow:hidden}
.area_related_wrap .list_item .area_info .title:hover,.dropdown-profile_info-inner a:hover .dropdown-profile-title,.list_content:hover .post_title,.popularPost-list a:hover{color:var(--primary-color);transition:.3s}
.dropdown-profile_info-inner a:hover img,.list_content:hover .thumnail img{-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}
#paging{margin:32px auto}
#paging .pagination li a{position:relative;display:block;margin:0 4px;padding:12px 0;color:var(--text-light);min-width:var(--btn-min-w)}
#paging .pagination .selected{cursor:default}
#paging .no-more-next,#paging .no-more-prev{color:var(--disabled)!important;cursor:default}
#sidebar .module-content{padding:0 4px 0 8px}
#sidebar .module .module-title{padding:8px 4px}
.module-category .sub_category_list li a{color:var(--text-light);-webkit-transition:color .3s;-moz-transition:color .3s;-ms-transition:color .3s;-o-transition:color .3s;transition:color .3s}
.module-category .c_cnt,.module-category .link_tit{display:none}
.module-category .sub_category_list>li,.module-category .tt_category,.secret-wrap,.toc-wrap,.visitor,header{position:relative}
.module-category .category_list>li{position:relative;font-size:var(--font-sm)}
.module-category .category_list>li a{display:inline-block;padding:4px 0}
.module-category .category_list li ul a{margin-left:0;padding-left:12px}
.module-category .sub_category_list li:first-child:before{top:auto;bottom:auto}
.module-category .sub_category_list:before{border-left:2px solid var(--border-color);content:"";display:block;height:calc(100% - 36px);left:4px;position:absolute;width:1px;bottom:4px}
.module-notice ul li a{display:block;overflow:hidden;padding:4px 0}
.module-notice ul li:hover a{transition:color .3s}
.ad-module{margin-left:-2px;margin-bottom:5px}
#wrap{width:100%;position:relative;min-height:100vh;margin-top:92px}
#wrap #container{width:1200px;flex:1;margin:0 auto;min-height:100vh}
#gnb{margin:4px 24px 32px}
#gnb ul{display:flex;white-space:nowrap;border-bottom:var(--border);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
#gnb ul::-webkit-scrollbar{display:none}
#gnb ul li{flex:0 0 auto}
#gnb ul li a,.e-content.post-content p{position:relative;display:block}
#gnb ul li a:hover:before{width:105%}
#gnb ul li a:before{content:"";position:absolute;bottom:6px;left:-2px;right:0;width:0;height:2px;margin:auto;background-color:var(--primary-dimmed-20);-webkit-transition:.3s;transition:.3s}
header>.tt-search-inner{position:absolute;right:70px;top:20px;z-index:0}
header>.tt-search-inner input{background:0 0!important;border-bottom:1px solid #fff;color:#fff!important;padding:10px;font-size:15px;width:280px;outline:0}
header>.tt-search-inner input::placeholder{color:#fff}
#header_wrap #header_gnb #header-title a,.list_detail_wrap .post_title{font-size:var(--font-lg);font-weight:var(--font-bold)}
.toc-wrap .toc-item.h2:before,.toc-wrap .toc-title .toc-icon:before{font-family:"Material Icons Outlined";vertical-align:bottom;margin-right:4px}
#header_wrap #header_gnb #header-title a,#paging .pagination li a,#sidebar .module .module-title,.btn_close .close-icon,.ft-writer,.list_detail_wrap .post_title,.visitor .total{font-weight:var(--font-bold)}
.dropdown-content ul li a:hover,.tag-list a{background-color:var(--primary-dimmed-10)}
#paging,.ad-module,.protected .e-content,.thumnail{text-align:center}
.list_detail_wrap .post_text,.list_detail_wrap .post_title,.popularPost .popular-right{-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}
#paging .page-icon,#search-bar .search-icon,.popularPost-info{vertical-align:middle}
#header_wrap #header_gnb #header-title{padding-left:24px;margin-right:auto}
#header_wrap{width:100%;background-color:var(--bg-dimmed-90);z-index:99;position:fixed;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);top:0;left:0;line-height:88px;min-width:300px;transition:line-height .5s ease-out}
#header_wrap.shrink{line-height:56px;box-shadow:var(--shadow)}
#header_wrap #header_gnb{width:1200px;margin:4px auto auto;position:relative;display:flex;align-items:center}
.progress-bar{height:4px;background:var(--primary-dimmed-20);width:0%;position:fixed;z-index:990}
#header-ico .btn_topMenu{background:0 0;cursor:pointer}
.menu-icon{width:var(--icon-size);height:4px;border-bottom:3px solid var(--grey-700)}
.menu-icon:nth-child(2){border-bottom:3px solid var(--primary-color)}
#header-ico{padding-right:24px}
.header-home{float:left;line-height:51px;margin-right:15px}
#search-bar{background-color:var(--grey-dimmed-05);border-radius:var(--radius-md);display:flex;padding:4px 8px;margin:0 12px 4px}
#search-bar.active{background-color:var(--grey-100);position:absolute;right:4px;transition:.3s}
#search-bar .search-icon{cursor:pointer;color:var(--text-lighter)}
#search-bar .search-close-icon{cursor:pointer;padding-bottom:4px;color:var(--grey-700);font-size:16px;font-weight:600;display:none}
#search-bar .input-text{text-indent:8px;padding-bottom:2px}
.menu_toolbar .txt_tool_id{color:#000!important}
.btn_site{background:var(--primary-color);color:var(--grey-50)!important;padding:12px;margin:10px;display:block}
#tt-body-page figure figcaption,.footer-wrap,.post-reply .tt-box-textarea .tt-cmt:before,.post-reply .tt-link-comment .tt_txt_g,.post-reply .tt-wrap-cmt .tt_date{color:var(--text-lighter)}
.btn_close{cursor:pointer;position:absolute;z-index:3;top:24px;right:16px}
.btn_close .close-icon{font-size:var(--icon-size);color:var(--text-light)}
#container nav{min-width:280px}
#container nav ul li{line-height:48px;display:inline-block;padding:0 16px}
#container #main #content{flex:2.85;overflow:hidden;position:relative}
#container #main #sidebar{flex:1;max-width:302px;min-width:260px}
#container #sidebar.right{margin-left:36px;margin-right:0;padding-left:24px;border-left:1px solid var(--grey-200);height:min-content}
.footer-wrap{border-top:var(--border);font-size:var(--font-xs);background-color:var(--grey-200);padding:24px;margin-top:48px}
.ft-writer{margin-bottom: 16px;}
.thumnail{position:relative;display:block;float:right;overflow:hidden;margin-left:16px}
.e-content figure.imageblock.alignLeft,.e-content figure.imageblock.floatLeft figcaption,.e-content figure.imageblock.floatRight figcaption,.not-found{text-align:left}
.not-found{display:block;width:100%;margin-bottom:32px}
.not-found li{position:relative;line-height:2}
#tt-body-archive .not-found ul,#tt-body-category .not-found ul,#tt-body-page .notice .sub-info .meta-cate .txt,#tt-body-tag .not-found ul,.dropdown-content .tt_category img,.not-found .archive,.not-found .category,.not-found .tag,.rcomment .rcomment-meta{display:none}
#tt-body-category .h-entry:after,#tt-body-index .h-entry:after,#tt-body-search .h-entry:after,#tt-body-tag .h-entry:after{display:block;border-bottom:var(--border);width:100%;content:"";margin:32px 0}
#tt-body-category .index_s_list,#tt-body-index .index_s_list{padding-bottom:0;margin-bottom:12px}
#tt-body-page figure.fileblock,figure.fileblock{border-radius:var(--radius-md);border:var(--border)}
#tt-body-page figure figcaption{padding-top:4px}
#tt-body-page .h-entry{background:inherit;max-width:100%;width:100%;margin:0 auto}
.tag-list{display:flex;flex-wrap:wrap;row-gap:16px}
.tag-list a{margin:4px;padding:4px 8px;border-radius:var(--radius-sm)}
.e-content blockquote[data-ke-style=style1],hr,hr[data-ke-style]{background:0 0!important}
.hd .p-category{display:inline-block;max-width:160px;overflow:hidden}
.hd h1.hd-heading{display:inline-block;margin:8px 0;line-height:var(--line-height-sm);word-break:normal;word-wrap:break-word}
.hd .sub-info{color:var(--text-light);font-size:var(--font-sm);position:relative;line-height:100%;margin:4px 0 4px 1px}
.hd .sub-info .meta-cate{display:inline-flex;align-items:center}
.hd .sub-info a{color:inherit}
.hd .sub-info .wide-button-wrap{display:none;position:absolute;right:0}
.hd .wide-button-wrap .wide-icon{font-size:var(--icon-size);vertical-align:middle}
.post-content{max-width:100%;padding-bottom:0;font-size:16px;margin-top:20px}
.post-content iframe{margin:0;padding:0;border:0}
.post-content .adsbygoogle,.post-content .kakao_ad_area{box-sizing:border-box;background:var(--grey-dimmed-10);background:-webkit-linear-gradient(to left,var(--grey-dimmed-05),var(--grey-dimmed-10));background:linear-gradient(to left,var(--grey-dimmed-05),var(--grey-dimmed-10));overflow:hidden;border:1px solid var(--grey-dimmed-10)!important;border-radius:var(--radius-md)}
.ads-wrap{margin-top:4px;max-width:100%;background:var(--primary-dimmed-10);overflow:hidden;border-radius:var(--radius-md)}
.ads-wrap.side-short{width:300px;height:250px}
.ads-wrap.side-long{width:300px;height:600px}
.comment-wrap,.dimmed,.e-content figure.imageblock.widthContent img,.h-entry .content-width,.post-content .txc-table{width:100%}
.ads-wrap.article-bottom,.ads-wrap.article-top{box-sizing:border-box;margin:16px 0}
.post-content .tx-link:hover,.post-content a:hover{text-decoration:underline!important}
.post-content h2{font-size:var(--font-h2)}
.post-content h3{font-size:var(--font-h3)}
.post-content h2,.post-content h3{margin:40px 0 16px;line-height:var(--line-height-sm)}
.post-content h4,.post-content h5,.post-content h6{font-size:var(--font-xl);margin:24px 0 16px}
.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{font-weight:var(--font-bold)!important;word-break:normal;word-wrap:break-word}
.post-content p,.post-content p[data-ke-size]{margin:16px 0;line-height:var(--line-height-lg);word-break:normal;word-wrap:break-word}
.post-content ol,.post-content ul{margin:32px 0 32px 8px}
.post-content ol ol,.post-content ul ul,.toc-wrap ul{margin:0}
.post-content ol li,.post-content ul li{margin:12px 0 4px 16px}
.post-content ol li::marker,.post-content ul li::marker{font-size:var(--font-xs)}
.post-content ol {list-style-type: decimal;}
.post-reply .tt-wrap-cmt .tt_desc{font-size:var(--font-sm);color:var(--text-color)!important}
.dropdown-content .github-link,.post-reply .tt-wrap-cmt .tt-link-user{font-size:var(--font-sm);color:var(--text-light)}
.post-reply .tt-wrap-cmt .tt-box-meta{padding:4px 0 8px}
.tt-comment-cont .tt-wrap-cmt .tt_cmt_profile{line-height:1}
.post-reply .tt-comment-cont *{font-family:inherit!important}
#guestbook .tt-comment-cont,#guestbook .tt-list-reply,.post-reply .tt-comment-cont{display:flex;flex-direction:column-reverse}
.post-reply .tt-list-reply{display:block;border-bottom:var(--border)}
.area_related_wrap .list_related,.post-reply .tt-item-reply,.post-reply .tt-list-reply-comment .tt-item-reply{border-top:var(--border)}
.post-reply .tt-item-reply .tt-list-reply-comment{border-top:none}
.post-reply .tt-box-total{padding:12px 4px;border:0;order:1}
.post-reply .tt-box-textarea{margin-bottom:8px}
.post-reply .tt-area-write{margin-bottom:20px}
.post-reply .tt-area-write .tt-box-thumb{display:none;padding-top:16px}
.post-reply .tt-box-thumb{padding-top:16px}
.tt-list-reply-comment .tt-item-reply:before{top:48px!important}
.post-reply .tt_wrap_write{display:block;background-color:var(--grey-100);border:var(--border);border-radius:var(--radius-md)}
.post-reply .tt_wrap_write .tt-inner-g{border:0;padding:12px 16px 0}
.post-reply .tt-wrap-info{align-items:end}
.post-reply .tt-box-write{padding:0 16px 12px}
.post-reply .tt-btn_register{background-color:var(--bg-btn-dark);color:var(--fg-btn-dark)!important;border:none!important;border-radius:var(--radius-sm);width:auto;height:auto;padding:var(--btn-padding)}
.tt-btn_register:disabled{background-color:var(--disabled)!important;color:var(--fg-btn-dark)!important}
.post-reply .tt-btn_register:not(:disabled):hover{background-color:var(--bg-btn-dark-hover);transition:.3s}
.post-reply .tt-box-textarea #comment::placeholder{color:transparent}
.post-reply .tt-area-write .tt-box-account{display:flex;justify-content:flex-end;padding-top:4px;padding-right:16px;margin-bottom:0}
.post-reply .tt-area-write .tt-box-account input{max-width:200px;margin-left:16px;margin-top:8px;border:var(--border);font-size:var(--font-sm);border-radius:var(--radius-md)}
.post-reply .tt_btn_prev_more{background:var(--grey-100);color:var(--text-light);margin-bottom:16px;border-radius:var(--radius-md);border:none}
.post-reply .tt_btn_prev_more:hover{background:var(--grey-200);transition:.3s}
#guestbook .post-reply{margin-top:12px}
#guestbook .post-reply .tt-area-reply{margin-bottom:0}
#guestbook .tt-box-total{order:2;border:0}
#guestbook .tt-comment-cont form{order:3;border:0}
#guestbook .tt-list-reply li:first-child{order:1;border-top:var(--border)}
#guestbook .tt-list-reply li.tt-item-reply.rp_general:first-child{order:0}
.admin-menu{font-size:var(--font-xs);background:var(--bg-btn);padding:var(--btn-padding);border-radius:var(--radius-sm);margin:0 4px}
.toc-wrap,pre code{padding:var(--box-padding)}
.admin-menu:hover{background-color:var(--bg-btn-hover)}
.toc-wrap{background-color:var(--grey-100);border-radius:var(--radius-md);margin:16px 0 32px;font-size:var(--font-sm);box-sizing:border-box}
.dropdown-content .header_layer .inner_header_layer .info_profile_type1,.visitor{padding-top:8px}
.toc-wrap .toc-title{border-bottom:var(--border);padding:0 4px;position:relative;line-height:40px;display:flex}
.toc-wrap .toc-title .toc-icon:before{content:"\e242";font-size:20px}
.toc-wrap .toc-item a{color:var(--text-color)}
.toc-wrap .toc-item.h3{padding-left:20px}
.toc-wrap .toc-item.h2:before{content:"\e315"}
.toc-wrap .toc-item.h3:before{content:"-";margin-right:8px;vertical-align:bottom}
.toc-wrap .toc li{overflow-x:hidden;overflow-y:auto;margin:8px 0}
.visitor-row .visitor-cell{display:inline-block;margin-right:4px}
.visitor .total{font-size:var(--font-h3);color:var(--text-light)}
.secret-wrap{display:block;padding-left:28px;cursor:pointer;font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.secret-wrap input{position:absolute;cursor:pointer;height:0;width:0}
.secret-wrap .checkmark{position:absolute;top:0;left:0;height:20px;width:20px;border:1px solid;transition:.3s}
.secret-wrap:hover input~.checkmark{background-color:#b1b1b1;border-color:#b3b5b7}
.secret-wrap input:checked~.checkmark{background-color:#2196f3;border-color:#2196f3}
.secret-wrap .checkmark:after{content:"";position:absolute;display:none;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.reply_thumb{float:left;margin-right:15px;margin-top:2px}
.reply_thumb img{border-radius:50%}
.comment-wrap{background-color:#f6f6f6;border-radius:10px;display:block;padding:10px 20px}
.reply_content{display:flex;min-height:70px;position:relative;padding:10px 0;border-radius:10px}
.reply_content .name,.reply_content .name a{font-weight:600;font-size:14px}
.reply_content .control{display:inline-block;margin:10px 0;font-size:12px}
.reply_content .modify,.reply_content .write{background:#f6f6f6;padding:2px 4px 4px 6px;border:var(--border);border-radius:3px;transition:.3s}
.reply_content .modify:hover,.reply_content .write:hover{background:#555;color:#fff;border-color:#555}
.reply_content .comment-content p{line-height:2.5em}
.reply_content .comment-content{font-size:14px;max-width:740px;word-break:break-all;margin:7px 15px 7px 0}
.reply_date{font-size:12px;margin-top:5px;margin-bottom:10px}
.reply_date a{margin-left:0}
.reply_date>a:before{content:"\00B7";margin-right:1px;margin-left:1px}
hr.point-another{border-color:#dedede!important;margin:0}
#tt-body-category .h-entry h2,#tt-body-index .h-entry h2{line-height:140%}
#tt-body-category .h-entry,#tt-body-index .h-entry,#tt-body-search .h-entry{max-width:100%}
#tt-body-category .h-entry .content-width,#tt-body-category .protected .content-width,#tt-body-index .h-entry .content-width,#tt-body-search .h-entry .content-width,#tt-body-search .protected .content-width,#tt-body-tag .h-entry .content-width,#tt-body-tag .protected .content-width{padding:0}
#tt-search{position:absolute;left:-35px;z-index:999;top:-50px;width:280px;color:#333;display:block!important}
#tt-search input{background:0 0;color:#fff;font-size:15px}
#tt-search .tt-search-inner{display:inline}
#tt-search .tt-search-inner input{border-bottom:var(--border);line-height:40px;height:40px;width:100%;color:#fff;text-indent:10px}
#tt-search .tt-search-inner input::placeholder{color:#fff}
.input-wrap .textbox input{padding:3px 7px;font-size:14px;height:24px;line-height:24px;position:relative;z-index:9}
.entry-tag a::before{content:"#"}
.entry-tag a{margin:4px}
.dimmed{display:none;background-color:var(--grey-dimmed-85);position:fixed;height:100%;top:0;left:0;z-index:100;transition:opacity 1s ease-out;cursor:pointer}
.area_title_wrap,.popularPost-info{display:table-cell}
.dropdown-content .dropdown-profile{overflow-x:hidden;border-bottom:5px solid var(--border-color)}
.dropdown-content .dropdown-profile_info-inner a{position:relative;margin-top:64px;padding:36px 24px;display:flex;align-items:center;gap:16px}
.dropdown-content .dropdown-profile_info{z-index:1;position:relative}
.dropdown-content .dropdown-profile_info img{object-fit:cover;border-radius:var(--radius-circle);width:60px;height:60px;box-shadow:var(--shadow)}
.dropdown-content .dropdown-profile-title{font-size:var(--font-lg);font-weight:var(--font-bold);display:block;width:160px;overflow:hidden}
.dropdown-content .tt_category .sub_category_list li:before{content:"·";font-weight:900;position:absolute;left:24px}
.dropdown-content .tt_category a{padding:0 24px}
.dropdown-content .tt_category li .sub_category_list li a{padding-left:36px}
.dropdown-content .tt_category .link_tit{width:100%;display:block;padding-top:8px;color:var(--text-light)}
.dropdown-content{max-width:90%;width:300px;position:fixed;top:0;right:0;bottom:0;margin:0;overflow:hidden;background:var(--bg-color);font-size:14px;z-index:999;transform:translateX(101%);transition:.2s cubic-bezier(.23, 1, .32, 1) .1s}
.dropdown-content ul li{line-height:36px;text-indent:8px;text-decoration:none;display:block}
.dropdown-content-toggle{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.protected,.sr-only{overflow:hidden}
.dropdown-content-toggle::-webkit-scrollbar{display:none}
.dropdown-content #dropdown-menu{margin-bottom:64px}
.dropdown-content .header_layer:after{content:none}
.dropdown-content .header_layer{box-sizing:border-box;position:inherit;font-family:inherit;display:inline-block!important;width:100%;box-shadow:none;border-top:var(--border);border-bottom:var(--border)}
.dropdown-content .header_layer .inner_header_layer *{color:var(--text-color)}
.dropdown-content .inner_header_layer .txt_id_type2{font-size:16px}
.dropdown-content .inner_header_layer .tit_list_type{padding:24px 24px 8px;color:var(--text-light)}
.dropdown-content .header_layer .list_toolbar{margin:8px 0}
.dropdown-content .header_layer .list_toolbar a{padding-left:24px}
.dropdown-content .ico_tistory_sign{display:none!important}
.category_list li a img{display:none}
ul.list_related{margin:0}
.another_category,.another_category_color_gray{margin:16px 0 32px!important}
.protected .media-wrap{margin:60px auto}
.protected .media .protectedPassword{border:var(--border);line-height:27px}
#tt-body-page .protected .textbox input{border:var(--border);border-radius:var(--radius-sm);line-height:36px;box-sizing:border-box;text-indent:10px;width:260px}
.protected .media .media_btn{height:36px;line-height:36px;padding:0 8px;border:var(--border);cursor:pointer;box-sizing:border-box;border-radius:var(--radius-sm);transition:.3s;background:var(--bg-btn)}
.protected .media .media_btn:hover{background:var(--bg-btn-hover)}
@media only screen and (max-width:1023px){
#header_wrap #header_gnb #header-title a{max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ads-wrap.side-short{width:100%;height:200px}
.ads-wrap.side-long{width:100%;height:250px}
#tt-body-category .h-entry .content-width,#tt-body-category .protected .content-width,#tt-body-search .h-entry .content-width,#tt-body-search .protected .content-width,#tt-body-tag .h-entry .content-width,#tt-body-tag .protected .content-width{margin:0}
.list_content{cursor:pointer;justify-content:center;align-items:center;max-height:unset!important}
.h-entry{max-width:900px;width:auto!important;max-height:unset;padding:0 16px 0 24px}
#comment-form,.module{width:unset!important}
.list_detail_wrap{max-height:unset;vertical-align:middle}
#comment ol>li{padding:unset!important}
.dropdown-content{min-width:300px}
#search-form,#sidebar,#sidebar-category{display:none}
.dropdown-content ul li:first-child{display:block}
.dropdown-content .tt_category li{padding:0}
#tt-search{position:initial!important;left:initial!important;top:initial!important;width:100%;display:none!important}
#tt-search input{color:#333!important}
#tt-search input::placeholder{color:#333!important}
#guestbook,#taglog{margin:0!important;padding:0 20px 0 24px;max-width:none!important}
#no-search-results{padding:0 24px 0 48px;min-width:280px}
.module{max-width:unset!important}
#btn_goCategory{display:block!important}
}
@media only screen and (min-width:1023px){
#main.sidebarPosition.right{display:flex;margin:20px;padding-left:10px}
#header_wrap #header_gnb #header-title{padding-left:30px}
.hd .sub-info .wide-button-wrap{display:inline-block}
.h-entry .content-width{max-width:810px;margin:0 auto}
.h-entry .content-width.wide{max-width:1200px}
#search-form,#sidebar-category{display:block}
}
.container_postbtn .wrap_btn{padding:var(--btn-padding);margin-right:8px;background:var(--bg-btn);border-radius:var(--radius-sm);font-size:var(--font-md)!important}
.container_postbtn .wrap_btn:hover{background:var(--bg-btn-hover);transition:.3s}
.container_postbtn .btn_menu_toolbar:hover{background:var(--primary-color)!important;color:var(--grey-50);transition:.3s}
.container_postbtn .btn_post{padding:0!important}
.container_postbtn .btn_menu_toolbar{background:var(--bg-btn);border-radius:var(--radius-sm)!important;border:0!important;margin:0!important;width:auto!important;height:auto!important;padding:var(--btn-padding)!important}
.container_postbtn .btn_menu_toolbar .txt_state{display:flex;padding:var(--btn-padding);color:var(--fg-btn-dark)}
.container_postbtn .txt_state::before{content:"\e866";font-family:"Material Icons Outlined";font-size:18px;margin-right:2px}
.container_postbtn .postbtn_like{display:inline-block;border:0!important;padding:0!important}
.container_postbtn{padding:32px 0 16px!important;visibility:hidden}
.container_postbtn button{outline-style:none!important}
.container_postbtn .postbtn_ccl{float:none!important;position:absolute!important;right:0!important;top:50%!important}
.container_postbtn .btn_subscription{color:var(--grey-50);background-color:var(--grey-700)}
.container_postbtn .btn_subscription:hover{background-color:var(--primary-color)}
#tistoryCclLayer{width:70px;padding:4px 24px 12px 16px}
.post-content ol li p,.post-content ul li p{line-height:normal!important}
.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;padding:0;position:absolute;width:1px}
.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}
.popularPost .popular-right{display:-webkit-box;overflow:hidden}
.popularPost .right-pop{overflow:hidden;padding-left:12px;font-size:14px;display:flex;align-items:center}
.popularPost .right-pop.right{padding:0 12px 0 5px}
.popularPost-list{padding:4px 0}
.popularPost-list a{display:table;width:100%;table-layout:fixed}
.area_related_wrap .related_table{margin:8px 0;display:table;width:100%}
.area_related_wrap .related_header{display:table-row}
.area_related_wrap .tit_related{font-size:var(--font-lg)}
.area_btn_more_wrap .link_more{flex:none;clear:both;font-size:var(--font-sm);align-self:flex-end;margin:4px}
.area_btn_more_wrap{display:table-cell;position:relative;text-align:right}
.area_related_wrap .list_item{position:relative;overflow:hidden;padding:8px 0;margin-left:0;border-bottom:var(--border)}
.area_related_wrap .area_info{display:flex;overflow:hidden;text-decoration:none}
.area_related_wrap{margin:48px 0}
.area_related_wrap .list_item .area_info .title{display:block;overflow:hidden;height:auto;white-space:nowrap;text-overflow:ellipsis;font-size:var(--font-sm);padding-right:8px}
.area_related_wrap .list_item .area_info .list_date{display:inline-block;color:var(--text-light);font-size:var(--font-xs);margin-left:auto}
.material-icon,.material-icons-outlined,.material-icons-round{vertical-align:text-bottom;font-size:var(--icon-size);user-select:none}
.e-content blockquote[data-ke-style=style1] span[style]{font-family:initial!important;color:var(--text-color)!important}
.e-content blockquote[data-ke-style=style2]{color:var(--text-color)!important}
.e-content blockquote[data-ke-style=style1],.e-content blockquote[data-ke-style=style2]{color:var(--text-color)!important;font-size:var(--font-md)!important;border-color:var(--grey-700)!important;border-width:0 0 0 3px!important;border-style:solid!important;padding:0 0 0 12px!important;text-align:left!important;line-height:var(--line-height-lg)!important}
.e-content blockquote[data-ke-style=style3]{padding:var(--box-padding)!important;font-size:var(--font-sm);color:var(--text-color)!important;border:none!important;border-radius:var(--radius-sm)!important;background-color:var(--primary-dimmed-10)!important}
.e-content blockquote{display:block;margin:32px 0!important}
hr,hr[data-ke-style]{display:block;margin:32px auto!important;width:100%!important;height:0!important;border-bottom:var(--border)!important}
.e-content table[data-ke-style]{margin:32px 0!important;border-spacing:0px}
.e-content table[data-ke-style] th{background-color:var(--grey-50)}
.e-content table[data-ke-style] td,.e-content table[data-ke-style] th{border:var(--border);word-break:break-word;font-size:var(--font-sm);padding:8px}
.e-content table[data-ke-style=style1] tr:first-child td,.e-content table[data-ke-style=style2] tr:first-child td,.e-content table[data-ke-style=style3] tr:first-child td{border-bottom:var(--borde)}
.e-content table[data-ke-style=style10] tr:first-child td,.e-content table[data-ke-style=style11] tr:first-child td,.e-content table[data-ke-style=style8] tr:first-child td,.e-content table[data-ke-style=style9] tr:first-child td{border-bottom:3px solid var(--border-color)}
.e-content table[data-ke-style=style12] tr:nth-child(odd) td,.e-content table[data-ke-style=style13] tr:nth-child(odd) td,.e-content table[data-ke-style=style14] tr:nth-child(odd) td,.e-content table[data-ke-style=style15] tr:nth-child(odd) td,.e-content table[data-ke-style=style4] tr:nth-child(2n) td,.e-content table[data-ke-style=style5] tr:nth-child(2n) td,.e-content table[data-ke-style=style6] tr:nth-child(2n) td,.e-content table[data-ke-style=style7] tr:nth-child(2n) td{background-color:var(--grey-100)}
.e-content table[data-ke-style=style10],.e-content table[data-ke-style=style11],.e-content table[data-ke-style=style8],.e-content table[data-ke-style=style9]{border-left:0 transparent;border-right:0 transparent}
table[data-ke-style=style12] tr td:first-child,table[data-ke-style=style13] tr td:first-child,table[data-ke-style=style14] tr td:first-child,table[data-ke-style=style15] tr td:first-child{background-color:var(--grey-200)!important}
.e-content table[data-ke-style=style12] tr:first-child td,.e-content table[data-ke-style=style13] tr:first-child td,.e-content table[data-ke-style=style14] tr:first-child td,.e-content table[data-ke-style=style15] tr:first-child td{background-color:var(--grey-800)!important;border-color:var(--grey-700);color:var(--grey-50)}
.e-content table[data-ke-style=style16],.e-content table[data-ke-style=style16] tr,.e-content table[data-ke-style=style16] tr td{border-color:transparent}
.e-content table[data-ke-style=style10] tr:first-child td,.e-content table[data-ke-style=style11] tr:first-child td,.e-content table[data-ke-style=style1] tr:first-child td,.e-content table[data-ke-style=style2] tr:first-child td,.e-content table[data-ke-style=style3] tr:first-child td,.e-content table[data-ke-style=style9] tr:first-child td{border-bottom-color:var(--primary-color)!important}
.e-content div[data-ke-type=moreLess]{position:relative;caret-color:auto;margin:16px 0 32px;border-bottom:var(--border);border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}
.e-content div[data-ke-type=moreLess] .btn-toggle-moreless{display:block;color:var(--text-color)!important;font-size:initial;line-height:initial;background-color:var(--grey-100);padding:16px 56px 16px 32px;overflow:hidden;word-wrap:break-word}
.e-content div[data-ke-type=moreLess] .btn-toggle-moreless:hover{text-decoration:none!important;background-color:var(--grey-200)}
.e-content div[data-ke-type=moreLess] .btn-toggle-moreless:after{display:inline-block;position:absolute;right:32px;content:"\e5cf";font-family:"Material Icons Outlined";font-size:var(--icon-size);color:var(--text-lighter);cursor:pointer;transform:rotateZ(0);-webkit-transition:transform .3s;transition:transform .3s}
.e-content div[data-ke-type=moreLess].open .btn-toggle-moreless:after{transform:rotateZ(180deg);-webkit-transition:transform .3s;transition:transform .3s}
.e-content div[data-ke-type=moreLess] .moreless-content{display:block;max-height:0;padding:0 32px;overflow-y:hidden;transition:max-height .3s}
.e-content div[data-ke-type=moreLess].open .moreless-content{max-height:400px;border-bottom:var(--border);overflow-y:scroll;transition:max-height .3s}
.e-content div[data-ke-type=moreLess] .moreless-content:before{display:block;content:"";height:16px}
.e-content div[data-ke-type=moreLess] .moreless-content:after{display:block;content:"";height:24px}
.e-content div[data-ke-type=moreLess] .moreless-content p{margin:4px 0!important}
.e-content figure{margin:32px 0}
.e-content figure.imageblock{display:table;position:relative}
.e-content figure.imageblock.alignCenter{text-align:center;margin:32px auto}
.e-content figure.imageblock.alignRight{text-align:right;margin-left:auto}
.e-content figure.imageblock.floatLeft{float:left;margin-right:20px}
.e-content figure.imageblock.floatRight{float:right;margin-left:20px}
.e-content figure.imageblock img{display:inline-block;max-width:100%;margin:0;height:auto}
figure.imageslideblock div.image-container .btn{top:auto;bottom:4px;cursor:pointer}
figure.imageslideblock div.image-container .btn span{opacity:.8;background-color:var(--grey-dimmed-85);border-radius:var(--radius-circle)}
figure.imageslideblock div.image-container .btn-prev{left:auto;right:64px}
code,kbd,samp{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;font-size:var(--font-sm);border-radius:var(--radius-md)}
pre code{display:block;overflow-x:auto;tab-size:4}
.hljs-ln-numbers{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;border-right:var(--border);vertical-align:top;width:20px;padding-left:0}
.hljs-ln td.hljs-ln-numbers{padding-right:8px}
.hljs-ln td.hljs-ln-code{padding-left:12px}
code::-webkit-scrollbar{-webkit-appearance:none}
code::-webkit-scrollbar-track{background:0 0}
code::-webkit-scrollbar-thumb{background-color:var(--grey-dimmed-50);border-radius:var(--radius-sm)}
code::-webkit-scrollbar-thumb:hover{background-color:var(--grey-dimmed-70)}
table{border-spacing:0px}
table td,table th{border:var(--border);padding:4px 8px}
code table td,code table th{border:inherit;padding:inherit;text-align:inherit}
blockquote[data-ke-style=style1] blockquote[data-ke-style=style1]{margin:0!important}
@media only screen and (max-width:600px){
.popup-word{width:50%}
#search-bar{background-color:transparent}
#search-bar .input-text{display:none}
.area_related_wrap .list_item{padding:16px 0}
.toc-wrap .toc li{margin:16px 0}
.dropdown-content ul li a:hover{background-color:inherit}
}
@media only screen and (max-width:450px){
#header_wrap #header_gnb #header-title a{font-size:var(--font-lg)}
#header_wrap #header_gnb #header-title{padding-left:16px}
#header_wrap{line-height:64px}
#wrap{margin-top:68px}
#gnb{margin:0 16px 24px}
.thumnail img{height:90px;width:90px}
.header-blog-menu li a{display:block}
.h-entry{padding:0 16px}
#guestbook,#taglog{padding:0 14px 0 18px}
.write-form .input-wrap{flex-direction:column}
#gnb ul{font-size:var(--font-sm)}
#header-ico{padding-right:16px}
}