* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: var(--cursor-image) 0 0, auto !important;
  font-size: var(--content-ft);
}

a {
  color: inherit;
  text-decoration: none;
  border: none;
}

ul, ol {
  list-style: none;
}

button, input, textarea {
  font: inherit;
  border: none;
  background: none;
  outline: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

img {
  max-width: 100%;
  width: fit-content;
  height: fit-content;
  display: block;
  margin: 0 auto;
}

body {
  position: relative;
  font-family: var(--font-family);
  color: var(--content-color);
  font-size: var(--content-ft);
  background-color: var(--background-color);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image: var(--bg-image);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

body.blur-on::before {
  filter: blur(var(--blur-amount, 10px));
}

::selection {
  background-color: var(--drag-color);
  color: var(--drag-font);
}

body.pattern-on::before {
  background-position: left top;
  background-repeat: repeat;
  background-size: auto;
}

html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE, Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.top{
  bottom: var(--top-b);
  right: var(--top-r);
  z-index: 999;
  position: fixed;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}

.top img{
    height: var(--top-w);
    width: auto;
    display: block;
}

.top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* 사용X 항목 지우기 */
.container_postbtn, .another_category, .menu_toolbar,
.tt_box_namecard, .tistoryProfileLayerTrigger{
  display: none !important;
}

.commentList .name a{
  pointer-events: none;
}

/* 댓글 신고 버튼 삭제 - 필요시 복구 */
.date>a {display: none !important;}


/* 폰트 */
body.font1 {
  --font-family: "Dotum", "돋움", sans-serif;
}

body.font2 {
  --font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
}


/* 더보기 버튼 */
.btn-toggle-moreless{
  background-color: var(--point-color);
  color: var(--point-font-color) !important;
  border-radius: var(--border-radius);
  padding: 4px 12px;
  font-size: var(--content-ft) !important;
  font-family: var(--font-family) !important;
}


/* 프로필 */
.sidebar{
  width: var(--sidebar-w);
  display: block;
}

.profile{  
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 22px; /* 프로필 간격 */
}

.profile a{
  text-align: center;
}

.profile span{
  flex-grow: 1;
}

.profile-line{
  width: 100%;
  height: 2px;
  background-color: var(--point-color);
}

.profile-image{
}

.profile-image img{
  width: var(--sidebar-w);
  height: var(--sidebar-w);
  object-fit: cover;
}

.profile-name{
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.profile-about{
  line-height: 1.7; /* 줄 간격 */
  font-size: 13px; /* 작가의 말 글씨 크기 */
  text-align : justify;
}

.m-profile{
  display: block;
  position: fixed;
  z-index: 999999;

  width: 100%;
  max-width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, var(--post-color) 90%, transparent);
  
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease-in;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* 사파리 대응 */
}

.m-close{
  position: fixed;
  top: 10px;
  right: 10px;
}

.m-close i{
  color: var(--content-color);
  opacity: 0.6;
}

.m-profile .profile{
  width: 240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 22px;
  margin-top: 70px;
}

.m-profile .profile-image img{
  margin: 0 auto;
}


/* 디데이 */
.p-dday{
  width: 120px;
  margin: 0 auto;
  margin-top: 52px; /* 디데이 상단 공백 */

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dday-list{display: flex;}

.p-dday span{font-size: 11px;}

.dday-name{font-weight: bold;}
.dday-when{margin-left: auto;}

/* 메뉴 */
.menu{
  --menu-gap: 8px; /* 메뉴 간격 */

  width: 100%;
  display: flex;
  flex-basis: 100%;
  justify-content: flex-end;
  align-items: center;
  height: 28px;
  overflow: hidden;
  
  flex-direction: row;
  align-self: center;
  flex-wrap: nowrap;
  gap: var(--menu-gap);

  margin-bottom: calc(var(--side-gap) * -1 + 12px);
  margin-left: calc(var(--sidebar-w) + var(--side-gap));
}

.menu, .menu * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.menu>a:first-child,
.menu>.menu-2{
  background-color: transparent;
  color: var(--point-color);
}

.m-pro-bt{
  margin-right: 1px !important;
  margin-left: 6px;
  margin-top: 4px;
  display: none;
}

.m-pro-bt i{
  font-size: 12.4px !important;
}

.menu .tt_category{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.tt_category>li>a{
  display: none;
}

.menu .category_list li{
  display: flex !important;
  align-items: center !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu .category_list li a{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.menu i{
  font-size: 12px;
  margin-right: -8px;
  margin-top: 1px;
}

.menu>a:first-child{
  margin-right: -6px;
}

.menu .tt_category > li{
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
}

.menu .category_list{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--menu-gap);
}

.menu a{
  font-size: 11px;
  height: 20px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: var(--border-radius);
  background-color: var(--point-color);
  color: var(--point-font-color);
}

.menu span{
  box-sizing: border-box;
  height: 20px;
  white-space: nowrap;
  padding: 2px 0px;
  margin-right: 7px;
  color: var(--point-color);
}

.menu span i{
  font-size: 13px;
}

.hljs{
  background-color: var(--comment-color2);
}


/* 본문 */
.content{
  display: flex;
  flex-wrap: wrap;

  gap: var(--side-gap); /* 사이 간격 */

  width: var(--content-w);
  max-width: 100%;
  margin: 0 auto;
  padding-top: var(--start-h); /* 상단 여백 */
}

.post{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.post-item, .entryNotice{
  background-color: var(--post-color);
  padding: 40px 32px;
  border-radius: var(--post-radius);
}

.entryNotice ~ .entryNotice{
  margin-top: var(--post-gap);
}

.entryNotice .post-date{
  display: none;
}

.article{
  margin: 12px 0px;
}

.post-admin a:first-child{margin-right: 2px;}
.post-admin2 a:first-child{margin-right: 2px;}

.post-item ~ .post-item {
  margin-top: var(--post-gap);
}

.post-item:last-child{
  margin-bottom: 20px;
}

/* 본문 - 세부 설정 */
.post-top{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}

.post-images{
  margin: 12px 0px;
}


/* 제목 영역 */
.post-title{
  font-size: var(--t-size);
  font-weight: 900;
}

.post-admin{
  margin-left: auto;
  color: var(--md-color);
}



/* 태그 */
.post-tag{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  
  color: rgba(255,255,255,0);
  width: 100%;
  
  margin-bottom: 12px;
}

.post-tag a{
  background-color: var(--point-color);
  color: var(--point-font-color);
  font-size: 11px;
  padding: 2.4px 4px 1.4px 8px;

  clip-path: polygon(
    8px 0%,
    100% 0%,
    100% 100%,
    8px 100%,
    0% 50%
  );
}

.post-tag a::before{
  content: "#";
  margin-right: 2px;
}

.post-tag a:not(:last-child){
  margin-right: 3px;
}


/* 코멘트 영역*/
.post-admin2, .comment .control{
  font-size: 11px !important;
  color: var(--md-color);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  height: 14px;
  line-height: 1;
}

.post-admin2 a{
  font-size: 11px;
}

.comment .control a{
  font-size: 11px !important;
  display: inline-flex;
  align-items: center;
  height: 14px;
  line-height: 1;
}

.comment .control a span{
  font-size: 11px !important;
  line-height: 1;
  display: inline-flex;
  align-items: center; 
}

.post-comment{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0; /* 닉네임-내용 간격 */ 

  background-color: var(--comment-color);
  padding: 20px 9px;
}

.contents_style{
  line-height: 1.6;
}

.post-name, .comment .name{
  margin-right: auto;
  font-size: var(--c-name);
  font-weight: bold;
}

.post-date, .comment .date{
  font-size: 11px;
  margin-left: auto;
  color: var(--md-color);
  display: inline-flex;
  align-items: center;
  height: 14px; 
  line-height: 1;
}

.post-body{
  flex-basis: 100%;
}

.post-comment2{
  background-color: var(--comment-color);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0; /* 닉네임-내용 간격 */
}

.comment{width: 100%;}

.rp_general, .rp_admin{
  background-color: var(--comment-color);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0; /* 닉네임-내용 간격 */  

  padding: 20px 8px;
}

.rp_secret{
  background-color: var(--comment-color2);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0; /* 닉네임-내용 간격 */  

  padding: 20px 8px;
}

.rp_general>p, .rp_admin>p, .rp_secret>p{
  flex-basis: 100%;
  line-height: 1.6;
}

/* 답글 */
.commentList ol li ul div{
  background-color: var(--comment-color2);
  padding: 20px 16px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0; /* 닉네임-내용 간격 */  
}

.commentList ol li ul .name, .commentList ol li ul p{
  margin-left: 20px;
}

.commentList ol li ul .name::before{
  content: '└';
  margin-left: -22px;
  margin-right: 8px;
  font-weight: normal;
  color: var(--md-color);
}


/* 댓글 작성 */
.post-comment3{
  margin-top: var(--comment-gap);
  
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0; /* 닉네임-내용 간격 */ 
}

.post-comment2 [id^="entry"][id$="Comment"] {
  width: 100%;
}

.post-comment3 [id^="entry"][id$="Comment"] {
  width: 100%;
}

.commentWrite{
  background-color: var(--comment-color2);
  padding: 20px 16px 18px 16px;
}

.rp-top{
}

.rp-input{
  flex-basis: 100%;
  width: 100%;
}

.rp-input textarea{
  width: 100%;
  resize: vertical;
  line-height: 1.6;
  padding: 8px 0px;
}

.rp-check{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
  margin-bottom: -4px;
}

.secretWrap{
  display: flex;
  align-items: center;
  font-size: 11px;
  margin: 0;
}

.secretWrap .checkbox{
  margin-left: 2px;
  margin-right: 8px;
  accent-color: var(--point-color);
}

.rp-fin{
  background-color: var(--point-color);
  padding: 4px 12px;
  border-radius: var(--border-radius);
}

.rp-fin input{
  color: var(--point-font-color);
  font-size: 12px;
}


/* 보호글 */
.entryProtected{
  flex-basis: 100%;
}

.pswd{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  padding: 32px 20px;
  line-height: 1.6;
}

.pswd input{
  text-align: center;
  padding: 2px 0px;
  background-color: var(--comment-color2);
  color: var(--content-color);
}

.pswd .submit{
  background-color: var(--point-color);
  color: var(--point-font-color);
  padding: 2px 12px;
  border-radius: var(--border-radius);
  font-size: 11px;
}


/* 슬라이더 */
.image-container img{
  background-color: var(--post-color);
}

figure.imageslideblock div.image-container{
  background-color: var(--post-color);
}


/* 해시태그 */
.taglog ul{
  width: 100%;
}

.taglog ul li{
  display: inline-block;
}

.taglog .post-top{
  margin-bottom: 16px;
}

.taglog ul li a{
  background-color: var(--point-color);
  color: var(--point-font-color);
  font-size: 12px;
  padding: 4px 6px 4px 12px;

  clip-path: polygon(
    8px 0%,
    100% 0%,
    100% 100%,
    8px 100%,
    0% 50%
  );
}

.taglog ul li a::before{
  content: "#";
  margin-right: 2px;
}

.taglog ul li:not(:first-child){
  margin: 6px 0px;
  margin-left: 3px;
}

/* 코드 복사 */
.hljs {
  position: relative;
}

.hljs-copy-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: var(--point-color);
  color: var(--point-font-color);
  font-size: 14px;
  text-align: center;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.15s;
  z-index: 10;
}

.hljs-copy-btn:hover {
  opacity: 1;
}


/* 페이징 */
.paging{
  height: 64px;
  display: flex;
  justify-content: center;
  flex-basis: 100%;

  margin-left: auto;
  margin-top: calc(var(--side-gap) * -1 + 18px);
}

.numbox a{
  margin: 0px 2px;
}

.numbox .selected {
  font-weight: bold;
  background-color: var(--point-color);
  color: var(--point-font-color);
  padding: 4px 6px;
  border-radius: var(--border-radius);
}


/* 이모티콘 */
.text-emoticon {
  max-width: 100%;
  width: auto;
  height: var(--emo-size);
  display: inline-block;
  margin: 0 2px;
}

.emo {
  display: none;
}

.emo-list {
  position: fixed;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 28px 16px;

  left: 50%;
  top: 35%;
  transform: translate(-50%, 0%);

  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;

  border: 3px #ddd solid;
  background-color: var(--post-color);
  border-radius: var(--post-radius);
  z-index: 99;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.emo-t{
  font-size: 14px;
  font-weight: bold;

  text-align: center;
  flex-basis: 100%;
  
  margin-bottom: 20px;
}

.emo-list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  width: 50px;
}

.emo-list-item img {
  height: 32px;
}

.emo-list-item span {
  font-size: 11px;
  color: var(--content-color);
  margin-top: 4px;
  white-space: nowrap;
}

.emo-about{
  font-size: 11px;
  margin-right: 6px;
  margin-top: 1px;
}

.emo-about i{
  font-size: 13px;
}

/* 방명록 */
.tt-comment-cont{
  padding: 0px 4px;
}

.tt-box-total{display: none;}
.tt-box-thumb{display: none;}
.tt-list-reply, .tt_desc, .tt-box-meta, .tt-link-user, .tt_date, .tt-wrap-link-comment, .tt_txt_g{
  font-family: var(--font-family) !important;
  font-size: var(--content-ft) !important;
}

.tt-link-user, .tt-txt-mention{font-weight: bold;}

.guestbook .tt-list-reply-comment .tt-item-reply{
  background-color: var(--comment-color2);
}

.guestbook .tt-list-reply-comment .tt-item-reply:before{
  top: 20px;
  left: 20px;
}

.guestbook .tt-list-reply-comment .tt-item-reply{
  padding-left: 40px;
}

.tt-wrap-info{
  position: absolute;
  top: 4px;
  right: 22px;
}

.tt-wrap-cmt .tt-button-modify{
  margin-top: -7px;
  margin-right: 2px;
}

.tt-link-comment .tt_txt_g{
  margin-right: 2px;
}

.tt-wrap-cmt .tt_date, .tt_txt_g, .tt_num_g{
  font-size: 11px !important;
}

.tt_txt_g, .tt_num_g{margin-top: 2px;}

.tt-box-account input::placeholder, .tt_txt_user, .tt_num_g, .tt-txt-mention{
  font-family: var(--font-family) !important;
  font-size: var(--content-ft) !important;
}


.tt_txt_user{font-weight: bold;}

.tt-inner-g .tt-cmt, .tt-cmt div, .tt-btn-cancel, .tt-btn_register{
  font-family: var(--font-family) !important;
  font-size: var(--content-ft) !important;
}

.tt-area-write .tt-box-account input{
  padding: 8px 12px;
  border: none;
}

.tt-item-reply.rp_general{
  border: none;
  padding: 24px 0px;
}

.tt-list-reply{border-bottom: none;}

.guestbook .rp_general form {
  width: 100%;
}

.guestbook .rp_general .tt-area-write {
  width: 100%;
  box-sizing: border-box;
}

.guestbook .rp_general .tt_wrap_write {
  width: 100%;
  box-sizing: border-box;
}

.guestbook .tt-wrap-cmt .tt-box-content{
  width: 100%;
}


/* BGM 플레이어 */
.bgm-player{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  padding: 0px 20px;
  box-sizing: border-box;
  margin-top: 30px;
}

.bgm-title-wrap{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  height: 18px;
}

.bgm-title-track{
  display: inline-flex;
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.bgm-title-text{
  font-size: 11px;
  line-height: 20px;
  padding-right: 40px;
  color: var(--font-color, #333);
}

/* 텍스트가 길어서 넘칠 때만 */
.bgm-title-track.bgm-marquee{
  animation: bgm-scroll linear infinite;
  animation-duration: var(--bgm-duration, 8s);
}

@keyframes bgm-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.bgm-controls{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bgm-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--point-color);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.bgm-btn i{
  font-size: 10px;
}

.bgm-btn:active{
  opacity: 0.7;
}


/* 반응형 */ 
@media (max-width:900px){
  .menu {
    justify-content: center;
    align-self: center;
    margin-bottom: calc(var(--side-gap) * -1 + 10px);
    margin-left: auto;
    flex-wrap: wrap;

    height: fit-content;
  }

  .menu > .menu-sub {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    gap: var(--menu-gap);
    margin-bottom: 20px;
  }

  .menu-sub a,
  .menu-sub .category_list li,
  .menu-sub .category_list li a {
    height: 20px;
    box-sizing: border-box;
  }

  .content{
    padding-top: 40px;
  }

  .post{
    margin: 0 16px;
  }

  .sidebar{
    display: none;
  }

  .m-pro-bt{
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    height: 20px;
    box-sizing: border-box;
  }

  .post-item, .entryNotice {
    padding: 20px 16px;
  }

  .m-bgm{
    margin-top: -30px;
  }

  .m-bgm .bgm-title-wrap{
    display: none;
  }

  .m-bgm .bgm-player{
    padding: 0;
    margin: 20px 0px;
  }

  .top{
    display: none;
  }

}