@import url('https://fastly.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');
@charset "UTF-8";
@font-face {
    font-family: 'DOSGothic';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'DungGeunMo';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'DOSMyungjo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSMyungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* basic */
article, aside, canvas, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
}

:root {
/*
--sidebar_base: 사이드바 기본 바탕
--light: 방명록, 공지사항 등의 바탕에 들어가는 밝은 톤
--dark: 이름, 소개, 검색창 등의 바탕에 들어가는 어두운 톤

--textwhite: 이름, 본문 글씨색/본문의 하얀 바탕에 사용되는 색
--textblack: 사이드바 등에 들어가는 글씨색

--pointcolor2: 바탕테두리, hover에 사용되는 포인트컬러2
--base: 본문 기본바탕색
--title: 블로그 타이틀 맨 위에 들어가는 색

--pointcolor: 제목, hover에 사용되는 메인 포인트컬러
*/

  --sidebar_base: #cfbb99;
  --light: #e5D7c4;
  --dark: #4c3d19;
  --textwhite: #f3e3b2;
  --textblack: #292f17;
  --base: #354024;
  --title: #889064;
  --pointcolor: yellow;
  --pointcolor2: #889063;
}

html {
  font-family: 'DOSGothic';
  font-size: 1.3rem;
}

a {
  text-decoration-line: none;
  color: var(--textblack);
  font-weight: normal;
}

h1, h2, h3, h4{
  font-family: 'DungGeunMo';
  font-weight: normal;
}

body{
  margin: 0;
  box-sizing: border-box;
  background-color: #292f17;
}
ul, ol {
   list-style:none;
   list-style-type: none;
}
.container {
  width: 1400px;
  margin: 0 auto;
}

[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: yellow;
}

.header-top {
  padding: 1rem;
  background-color: var(--title);
}

.header {
  width: 100%;
  height: 150px;
  background-color: var(--light);
  display: table;
  border-bottom: 3px solid var(--dark);
}

.blogTitle {
  display: table-cell;
  vertical-align: middle;
}

.blogTitle h1 {
  background-color: var(--sidebar_base);
  margin: 1rem;
  padding: 1.5rem;
  font-size: 3rem;
  color: var(--textwhite);
  border-style: inset;
  border-width: thick;
  box-shadow: inset 7px 7px var(--dark);
}

 .blogTitle a:hover { 
   color: var(--pointcolor2);
}

.sidebar {
  width: 25%;
  background-color: var(--sidebar_base);
  float: left;
  border-bottom: 20px solid var(--dark);
}

.sidebar_list {
  background-color: var(--sidebar_base);
  padding: 1rem;
}

.sidebar ul {
  padding: 0;
}

.sidebar_list li {
  margin-bottom: 0.5rem;
}

.sidebar_list h3 {
  padding: 1rem;
  margin-top: 2rem;
  background-color: var(--light);
  border-style: inset;
  border-width: thick;
}

.blogInfo {
  width: 100%;
}
.blogImage {
  margin: 0 auto;
  width: 260px;
  display: flex;
  justify-content: center;
  border: 7px ridge var(--light);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.userID {
  margin: 1rem;
  padding: 1rem;
  font-family: 'DungGeunMo';
  font-size: 2rem;
  color: var(--textwhite);
  background-color: var(--dark);
  border-style: inset;
  border-width: thick;
  box-shadow: inset 7px 7px var(--textblack);
}

.blogDesc {
  text-align: left;
  margin: 1rem;
  padding: 1rem;
  color: var(--textwhite);
  background-color: var(--dark);
  border-style: inset;
  border-width: thick;
  box-shadow: inset 7px 7px var(--textblack);
}

.snsID, .infoText {
  margin: 1rem;
  font-family: 'DungGeunMo';
  font-size: 1.4rem;
}

.snsID {
  border-bottom: 4px solid var(--dark);
}

.blogMenu {
  text-align: center;
  margin: 1rem;
  margin-top: 2rem;
  padding: 1rem;
  font-family: 'DungGeunMo';
  font-size: 1.6rem;
  background-color: var(--light);
  border-style: outset;
  border-width: 7px;
}

.blogMenu:active {
  background-color: var(--sidebar_base);
  border-style: inset;
}

.search {
  text-align: center;
}

.search input[type=text] {
  padding: 0.6rem;
  width: 200px;
  border-style: inset;
  border-width: thick;
  box-shadow: inset 4px 4px var(--textblack);
  background-color: var(--dark);
  color: var(--textwhite);
  font-family: 'DOSGothic';
}

.search input[type=button] {
  border-style: outset;
  border-width: thick;
  border-color: var(--gray);
  padding: 0.6rem;
  font-family: 'DOSGothic';
  background-color: var(--light);
}

.search input[type=button]:active {
  background-color: var(--gray);
  border-style: inset; 
}


.total {
  font-family: 'DungGeunMo';
  font-size: 2rem;
  padding-left: 1rem;
}

.today, .yesterday {
  font-family: 'DungGeunMo';
  font-size: 1.5rem;
  padding-left: 1rem;
  margin: 0;
}

.counter {
  margin-bottom: 2rem;
}

.info_wrap {
  display: inline-block;
  color: var(--dark);
}

.main {
  width: 75%;
  height: 100%;
  background-color: var(--pointcolor2);
  float: right;
}


.main_content{
  background-color: var(--base);
  margin: 2rem;
  padding: 1.5rem;
  color: var(--textwhite);
}

.main-content-list-title a, .list_content a {
  color: var(--base);
}

.menubar ul, .menubar ol {
  display: flex;
  justify-content: space-around;
  padding: 0;
  margin: 0;
}

.menubar {
  background-color: var(--light);
  padding: 0.5rem;
}

.menubar ul a {
  color: var(--textblack);
}
.menubar ul a:hover {
  color: var(--pointcolor2);
}

.thumbnail, .list {
  background-color: var(--base);
  margin: 1rem;
  border: 2px solid var(--textwhite);
}

.thumbnail .title, .list .title {
  background-color: var(--textwhite);
  margin: 0;
  padding: 0.5rem;
}

.thumbnail_wrap {
  margin: 1rem;
  text-align: center;
}

.thumbnail_wrap a {
  color: var(--textwhite);
}


.thumbnail_background {
  background-color: var(--pointcolor2);
  width: 264px;
  height: 264px;
  display: inline-block;
  position: relative;
}

.thumbnail_background::before {
  content: "[ NO IMAGE ]";
  position: absolute;
  top: 122px;
  left: 74px;
}

.thumbnail_background .thum {
  position: relative;
}

.list_content {
  margin: 0;
}

.tit_post {
  color: var(--textwhite);
  display: block;
  margin: 1rem;
  font-weight: normal;
  border: 2px solid var(--textwhite);
  border-left: 14px solid var(--textwhite);
  padding: 0.3rem;
}

.tit_post::before {
  content: "▶ ";
}

.tit_post:hover {
  background-color: var(--textwhite);
  color: var(--base);
}

.main-content {
  padding: 2rem;
}

.articleWrap {
  background-color: var(--base);
  padding: 2rem;
  color: var(--textwhite);
}

.articleWrap a{
  color: var(--textwhite);
}

#tt-body-page figure.imageblock img, figure.imageblock img {
  margin-top: 1rem;
}

.titleWrap {
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid var(--textwhite);
}

.titleWrap h2 {
  color: var(--pointcolor);
  font-size: 2.4rem;
  margin: 0;
  margin-bottom: 1rem;
}

.titleWrap h2::before {
  content: "[ ";
}

.titleWrap h2::after {
  content: " ]";
}

.titleWrap .category::before, .titleWrap .date::before {
  content: "▶ ";
}

.prev {
  float: left;
  width: 350px;
  color: var(--textwhite);
  padding-left: 2rem;
}

.next {
  float: right;
  text-align: right;
  width: 350px;
  color: var(--textwhite);
  padding-right: 2rem;
}

.prev h4, .next h4 {
  margin: 0;
  margin-bottom: 0.4rem;
}

.prev h4:hover, .next h4:hover {
  color: var(--pointcolor);
}

.prev h3::before {
  font-family: 'DOSGothic';
  content: "◀ ";
}

.next h3::after {
  font-family: 'DOSGothic';
  content: " ▶";
}

.prev p, .next p {
  margin: 0;
  margin-bottom: 1.5rem;
  color: var(--textwhite);
}

.prev a, .next a {
  color: var(--textwhite);
}

.admin {
  background-color: var(--base);
  color: var(--textwhite);
  padding: 2rem;
  padding-top: 0;
}

.admin a {
  color: var(--textwhite);
}

.admin a:hover {
  color: var(--base);
  background-color: var(--textwhite);
}

.tagTrail {
  margin-top: 1rem;
  color: var(--pointcolor);
  padding-left: 2rem;
  padding-right: 2rem;
}

.tagText a {
  color: var(--textwhite);
}

.rpWrap {
  padding: 2rem;
  padding-top: 0;
}

.rp-inputbox {
  clear: both;
  color: var(--textwhite);
  border-top: 2px solid var(--textwhite);
  margin-top: 2rem;
}

.rp-inputbox p {
  margin: 0;
}

.rp-inputbox h3 {
  font-size: 2rem;
}

.rp-inputbox input[type=checkbox] {
  margin-bottom: 1rem;
}

.rp-inputbox input[type=text], .rp-inputbox input[type=password] {
  width: 350px;
  height: 20px;
  border: none;
  resize: none;
  background-color: var(--base);
  color: var(--textwhite);
  font-size: 1rem;
  font-family: 'DOSGothic';
  padding: 1rem;
  box-shadow: 5px 5px inset var(--textblack);
  margin-bottom: 1rem;
  display: flex;
} 

.rp-inputbox input[type=text] {
}

.rp_form textarea {
  clear: both;
  width: 730px;
  height: 70px;
  border: none;
  resize: none;
  background-color: var(--base);
  color: var(--textwhite);
  font-size: 1rem;
  font-family: 'DOSGothic';
  padding: 1rem;
  box-shadow: 5px 5px inset var(--textblack);
}

.rp_form input[type=submit] {
  background-color: transparent;
  font-family: 'DOSGothic';
  font-size: 1rem;
  color: var(--textwhite);
  border: none;
}

.rp_form input[type=submit]:hover {
  color: var(--base);
  background-color: var(--textwhite);
}

.comment-list {
  margin-bottom: 3rem;
  display: inline-block;
}

.comment_username {
  color: var(--textwhite);
  margin-bottom: 1rem;
}

.comment_username h4, .comment_username a {
  color: var(--pointcolor);
  margin: 0;
  font-family: 'DungGeunMo';
}

.comment_username p {
  margin: 0;
}

.comment-link {
  display: none;
}

.comment_main {
  color: var(--base);
  background-color: var(--textwhite);
  display: inline-block;
  box-shadow: 7px 7px var(--base);
  margin-bottom: 0.5rem;
  padding: 1rem;
}

.comment_button {
  display: block;
  margin-bottom: 1rem;
}

.comment_button button {
  background-color: transparent;
  border: none;
  color: var(--textwhite);
  font-family: 'DOSGothic';
}

.comment_button button:hover {
  color: var(--pointcolor);
}

.rp-borderbottom {
  border: 2px solid var(--textwhite);
  margin-bottom: 2rem;
}

.guestbook {
  background-color: var(--base);
  padding: 2rem;
  margin: 2rem;

}

.tt-box-total {
  background-color: var(--textwhite);
  border-bottom: none;
  display: inline-block;
  padding: 0.5rem;
}

.tt-box-total .tt_txt_g, .tt-box-total .tt_num_g {
  color: var(--base);
  font-family: 'DungGeunMo';
  font-size: 2rem;
  margin: 0;
}

.tt-box-total .tt_num_g::before {
  content: " [";
}

.tt-box-total .tt_num_g::after {
  content: "]";
}

.tt-box-thumb, .tt_cmt_profile {
  display: none;
}

.tt-box-content .tt-link-user {
  font-family: 'DungGeunMo';
  color: var(--pointcolor);
  font-size: 1.5rem;
}

.tt-box-content .tt_desc {
  font-family: 'DOSGothic';
  color: var(--textwhite);
  font-size: 1rem;
}

.tt-wrap-cmt .tt-button-modify {
  border-radius: 0;
  background-color: var(--textwhite);
  background-image: none;
}

.tt-wrap-cmt .tt_date, .tt-link-comment .tt_txt_g {
  font-size: 0.7rem;
  font-family: 'DOSGothic';
  color: var(--textwhite);
}

.tt-link-comment .tt_txt_g::before {
  content: "[";
}

.tt-link-comment .tt_txt_g::after {
  content: "]";
}

.tt-link-comment .tt_txt_g:hover {
  color: var(--pointcolor);
}

.tt-item-reply .tt_cmt_info .tt_txt_g {
  color: var(--pointcolor);
  font-family: 'DOSGothic';
  font-size: 0.7rem;
}

.tt-item-reply .tt_cmt_info .tt_txt_g::before {
  content: "/ ";
}

.tt-item-reply .tt_cmt_info .tt_ico_fixed {
  display: none;
}

.tt-box-textarea .tt_txt_user {
  color: var(--textwhite);
  font-family: 'DungGeunMo';
  font-size: 1rem;
}

.tt-box-textarea textarea, .tt-box-textarea div {
  color: var(--textwhite);
}

.footer {
  width: 100%;
  height: 170px;
  clear: both;
  display: table;
  margin-bottom: 2rem;
}

.footer p {
  color: var(--pointcolor2);
  display: table-cell;
  text-align: right;
  vertical-align: bottom;
}

.tt-btn_register {
  border-radius: 0;
  font-family: 'DOSGothic';
  font-size: 0.7rem;
  background-color: var(--textwhite);
  color: var(--base);
}

.tt-btn_register:disabled {
  background-color: var(--pointcolor2);
  border: 1px solid var(--pointcolor2);
  color: var(--textwhite);
}

.tt-area-write .tt-box-account input {
  background-color: transparent;
  color: var(--textwhite);
  border-radius: 0;
  font-family: 'DOSGothic';
}

.listWrap {
  background-color: var(--base);
  padding: 2rem;
  margin: 2rem;
  margin-bottom: 8rem;
}

.listWrap a {
  color: var(--textwhite);
}

.list_title {
  background-color: var(--textwhite);
  color: var(--base);
  padding: 0.5rem 1rem;
  display: inline-block;
  margin-bottom: 1.3rem;
}

.list_item .left {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 2px solid var(--textwhite);
  border-left: 14px solid var(--textwhite);
  padding: 1rem;
}

.list_item .left h3, .list_item .left p {
  margin: 0;
}

.list_item .left span {
  font-size: 0.7rem;
  color: var(--gray);
}

.list_item .left span::before{
  content: "▶Date/ ";
}

.list_item .left h3::before {
  content: "[ ";
}

.list_item .left h3::after {
  content: " ]";
}

.list-empty {
  font-family: 'DOSGothic';
  color: var(--textwhite);
  font-size: 1rem;
}

.list-empty-imoticon {
  font-size: 3rem;
  font-family: 'DungGeunMo';
}

.paging {
  text-align: center;
  margin-top: 1rem;
}

.paging a:hover {
  color: var(--pointcolor);
}

.entryProtected {
  padding: 2rem;
  color: var(--textwhite);
  text-align: center;
  background-color: var(--base);
}

.entryProtected h2, .entryProtected a {
  font-family: 'DungGeunMo';
  font-size: 2.4rem;
  color: var(--textwhite);
}

.entryProtected h2 {
  margin-bottom: 4rem;
}

.entryProtected h2::before {
  content: "[ ";
}

.entryProtected h2::after {
  content: " ]";
}

.entryProtected input[type=password] {
  width: 200px;
  height: 5px;
  background-color: var(--textwhite);
  color: var(--base);
  padding: 1rem;
  border: none;
  font-size: 1rem;
} 

.entryProtected input[type=button] {
  border: none;
  background-color: transparent;
  font-family: 'DOSGothic';
  font-size: 1rem;
  color: var(--textwhite);
}

.protected_password {
  margin-top: 3.4rem;
}

.entryProtected input[type=button]:hover {
  color: var(--pointcolor);
}

.taglog {
  background-color: var(--base);
  padding: 2rem;
  margin: 2rem;
  color: var(--textwhite);
}

.tagTitle h3 {
  font-size: 2rem;
  margin: 0;
  background-color: var(--textwhite);
  display: inline-block;
  color: var(--base);
  padding: 1rem;
}

.taglog a {
  color: var(--textwhite);
}

.taglog li {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: inline-block;
}

.taglog li::before {
  content: "#";
  color: var(--pointcolor);
}

div[data-ke-type='moreLess'] .btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless {
  color: var(--textwhite);
  display: block;
  padding: 0.5rem;
  font-family: 'DOSGothic';
  font-size: 1rem;
  border-top: 2px solid var(--textwhite);
  border-bottom: 2px solid var(--textwhite);
  margin-bottom: 0.5rem;
}

div[data-ke-type='moreLess'] .btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless::before {
  content: "[ ";
}

div[data-ke-type='moreLess'] .btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless::after {
  content: " ]";
}

blockquote[data-ke-style='style1'] {
  color: var(--textwhite);
  font-size: 1.3rem;
  text-align: center;
  background-image: none;
  margin-bottom: 2rem;
}

#tt-body-page blockquote[data-ke-style='style1'] {
  color: var(--textwhite);
  font-size: 1.3rem;
  text-align: center;
  background-image: none;
  margin-bottom: 2rem;
}

blockquote[data-ke-style='style1'] span {
  font-family: 'DOSMyungjo' !important;
}

blockquote[data-ke-style='style1']::before{
  content: "'' ";
}

blockquote[data-ke-style='style1']::after {
  content: " ''";
}

blockquote[data-ke-style='style2'] {
  font-size: 1rem;
  color: var(--textwhite);
  border-left: 5px solid var(--textwhite);
  padding-left: 1rem;
}

blockquote[data-ke-style='box'], #tt-body-page blockquote[data-ke-style='box'], blockquote[data-ke-style='style3'], #tt-body-page blockquote[data-ke-style='style3'] {
  font-size: 1rem;
  color: var(--textwhite);
  background-color: var(--pointcolor2);
  border: 2px solid var(--textwhite);
  margin-bottom: 1rem;
}

blockquote[data-ke-style='style3']::before {
  content: "* ";
}

.container_postbtn .postbtn_like {
  border-radius: 0 !important;
}

figure.fileblock .filename, #tt-body-page figure.fileblock .filename {
  color: var(--textwhite);
}

figure.fileblock a::after, #tt-body-page figure.fileblock a::after {
  background-image: none;
}

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