@charset "UTF-8";
/*skin start*/
/* font */ 

@font-face {
  font-family: 'Nadeuri';
  src: url('https://tistory1.daumcdn.net/tistory/8476792/skin/images/Nadeuri.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}


/* CSS Document */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Nadeuri', sans-serif;
  outline: none;
  font-size: 12pt;
  line-height: inherit;
  word-break: break-all;
}

a { 
  text-decoration: none; 
  background: transparent; 
  color: var(--point1-color); 
}

ul, li, ol {
  list-style: none; 
  padding:0; 
  margin: 0;
}

input:focus, textarea:focus, ::placeholder {
  outline: none; 
  border: none;
}

button {
  padding: 0; 
  border:0; 
  background: transparent;
}

img {
  vertical-align: bottom;
}

textarea {
  resize: none;
}

* a:hover {
  color: var(--point2-color); 
  transition: all 0.3s ease;
}

body {
  font-size: 12pt;

  color: var(--point1-color);
  overflow-x: hidden; 
  }




/* loading */
 #loading { 
 width: 100%; 
 height: 100%; 
 top: 0; 
 left: 0; 
 background: #ffffff;
 position: fixed; 
 display: none; 
 z-index: 999; 
 opacity: 0.9;
}

#loading > img { 
  display: none; 
  width: 70px; 
  height: 70px; 
  margin: auto;
}


/* html */
html {
  font-size: 12pt;

  background: var(--body-color);
  --border-radius-: var(--border-radius-);
  --btn-radius-: 5px;
  --font1-size: 12pt;
  --font2-size: 12pt;
  --line-height: var(--line-height);
  --padding1-: .5rem;
  --padding2-: 1rem;
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --width-: var(--width-);
  --height-: var(--height-);
  --transition-: all 0.3s ease;
  --grid-: var(--grid-);
}  

/* dark-mode toggle */
html[data-theme='light'] {
  --transform-mode: translateX(0px);
  --active-blob: calc(translateY(100%));
  --light-on: flex;
  --light-off: none;
  --tc-filter: invert(100%) hue-rotate(180deg);
  --side-img-light: flex;
  --side-img-dark: none;
}

html[data-theme='dark'] {
  --transform-mode: translateX(14px);
  --active-blob: calc(translateY(50%));
  --tc-filter: invert(0%);
  --side-img-light: none;
  --side-img-dark: flex;
}

button.theme-toggle {
  display: flex;
  cursor:pointer;
}

span.toggle {
  background: var(--point1-color);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  display: inline-block;
  position: relative;
  width: 32px;
  height: 18px;
}

span.toggle::after {
  background: var(--article-color);
  border-radius: 50%;
  content: '';
  display: inline-block;
  position: absolute;
  left: 2px;
  top: 2px;
  transition: all ease-in-out 0.2s!important;
  width: 12px;
  height: 12px;
  transform: var(--transform-mode);
}

span.toggle:active::after {
  transition: all ease-in-out 0.2s;
  width: calc(100% - 4px);
  border-radius: 12px;
  transform: var(--active-blob);
} 

/* dark-mode */
#darkmode {
  position: relative;
  width: var(--width-);
  text-align: right;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

#darkmode .btn{
  display: flex;
  align-items: center;
  gap: 5px;
}


/* layout */
#main {
  font-size: var(--font1-size);
  line-height: var(--line-height);
  width: 100%;
  height: 100vh;
  gap: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  flex-direction: column;   
}

#mobile-menu {
  display: none;
}

#whole {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--width-);
  height: var(--height-);
  background: var(--article-color);
  border: solid 1px var(--border-color);
  box-shadow: var(--box-color);
  border-radius: var(--border-radius-);
  overflow: hidden;
}


/* search */
.search {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: var(--article-color);
  border-radius:  var(--border-radius-);
  box-shadow: var(--box-color);
  border: solid 1px var(--border-color);
  padding: 5px;
  justify-content: center;
}

.search-inner {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.search input::placeholder {
  color: var(--point1-color);
}

.search input{
  color: var(--point2-color);
  padding: 0 3px;
  border: none;
  font-family: 'Nadeuri';
  background: none;
  letter-spacing: 1.5px;
  width: calc(100% - 15px);
}

.submit {
  width: 15px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--point1-color);
  cursor: pointer;
}

.submit:hover {
  color: var(--point2-color);
  transition: all 0.3s ease;
}


/* whole */
#container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

#container::-webkit-scrollbar { display: none; }

#fake-scrollbar {
  position: fixed; 
  top: calc(var(--whole-top, 100px)); 
  left: calc(var(--whole-right, 100px) + var(--whole-width, 1200px) + 20px); 
  width: 5px;
  height: var(--whole-height, 700px);
  z-index: 999;
}

#fake-scrollbar .scroll-thumb {
  width: 100%;
  background: var(--scroll-color);
  border-radius: 6px;
  position: absolute;
  left: 0;
}

#footer {
  position: relative;
  height: 70px;
  flex-shrink: 0;
  border-top: 1px solid var(--border-color);
  background: var(--article2-color, var(--article-color));
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: visible;  
}

#footer2 {
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 70px;
  border-top: solid 1px var(--border-color);
  position: relative;
}


.footer-inner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
}

.footer-menu,
.footer-cate {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  gap: 5px;
  font-weight: bold;
}

.footer-proimg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 2px var(--border-color);
  border-radius: 50%;
  cursor: pointer;
}

.footer-proimg .proimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: solid 2px var(--article-color);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  transition: 
    opacity 0.5s cubic-bezier(0.4,0,0.2,1), 
    transform 0.32s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform;
}

.footer-proimg:hover .proimg {
  transform: translate(-50%, -50%) scale(1.09);
}

html[data-theme='light'] .footer-proimg .profile-img-light {
  opacity: 1;
  pointer-events: auto;
}
html[data-theme='dark'] .footer-proimg .profile-img-dark {
  opacity: 1;
  pointer-events: auto;
}


/* pop-up */
.back { 
  display:none; 
  position:fixed; 
  z-index:99; 
  width:100%; 
  top:0; 
  left:0; 
  bottom:0; 
  right:0; 
  background:var(--point1op-color);}


.back-xx {
  width: 100%;
  height: 100%;
}

.pop-inner {
  font-size: var(--font1-size);
  position: absolute;
  z-index: 100;
  width: 500px;
  background: var(--article-color);
  border-radius: var(--border-radius-);
  border: solid 1px var(--border-color);
  box-shadow: var(--box-color);
  top: 50%;
  left: 50%;
  text-align: left;
  opacity: 1;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  padding: 10px;
  color: rgba(39,39,39,1.00);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.xxx {
  text-align: right;
  widows: 100%;
  color: var(--point1-color);
  font-weight: bold;
}

.xxx:hover {
  color: var(--point2-color);
  transition: all 0.3s ease;
  cursor: pointer;
} 




.back-profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 5px;
}

.back-proimg {
  position: relative;
  flex: 0 0 250px; 
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-proimg img.proimg {
  position: absolute;
  left: 0; top: 0;
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: var(--border-radius-);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1);
}

.back-info {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.back-text {
  height: calc(100% - 20px);
}

.back-title {
  color: var(--point1-color);
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}

.back-blogger {
  color: var(--point2-color);
  margin-bottom: 5px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.back-desc {
  color: var(--text-color);
  height: 190px;
  overflow-y: auto;
}

.back-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  margin-top: 5px;
}

html[data-theme='light'] .profile-img-light {
  opacity: 1;
  pointer-events: auto;
}
html[data-theme='dark'] .profile-img-dark {
  opacity: 1;
  pointer-events: auto;
}


/* footer2 */
.f-info {
  display: flex;
  padding: 5px;
  flex-direction: column;
  width: calc(50% - 69px);
  justify-content: center;
  align-items: center;
}

.f-text2 {
  text-align: center;
}

.f-info2 {
  display: flex;
  padding: 5px;
  flex-direction: column;
  width: 50%;
  justify-content: center;
  align-items: center;
}

.category {
  display: flex;
}


/* 블로그 제목과 닉네임 이름 부분 둘다 굵게였음
.f-info, .category a {
  font-weight: bold;
}
*/

/* 블로그 제목만 굵지 않게 하기 */
/* 카테고리 링크만 굵게 유지 */
.category a {
  font-weight: bold;
}
/* footer info는 기본 굵기(상속 끊기) */
.f-info {
  font-weight: normal;
}
.f-info { font-weight: bold; }           /* 전체는 굵게 유지 */
.f-info .f-text1 { font-weight: 400 !important; }  /* 문구만 얇게 */



.f-text1 {
  max-height: 30px;
  overflow-y: auto;
}

#footer2 .proimg {
  position: relative;
  width: 70px;
  height: 70px;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}

#footer2 .proimg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--article2-color);
  pointer-events: none;
  z-index: 9;
  transition: background 0.25s;
}

#footer2 .proimg:hover::after {
  background: rgba(255,255,255,0.22);
}

#footer2 .proimg:hover {
  cursor: pointer;
}

#footer2 .proimg-img-light,
#footer2 .proimg-img-dark {
  position: absolute;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1);
  z-index: 1;
}

html[data-theme='light'] #footer2 .proimg-img-light {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
html[data-theme='dark'] #footer2 .proimg-img-dark {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.menu {
  margin-right: 10px;
  display: flex;
}

.menu li {
  margin-right: 10px;
}

.menu li:last-child{
  margin-right: 0;
}

.menu, .cate {
  font-weight: bold;
}

.menu-btn, .cate-btn {
  display: flex;
  align-items: center;
}

.menu svg, .cate svg {
  margin-right: 3px;
}


/* category */
.link_tit, .sub_category_list, .c_cnt {
  display: none;
}

.category_list, .menu-list {
  display: none;
  z-index: 99;
  position: absolute;
  width: 25%;
  bottom: 69px;
  background: var(--article-color);
  border: solid 1px var(--border-color);
  right: -1px;
  padding: 10px;
  line-height: 2;
  border-radius: var(--border-radius-) var(--border-radius-) 0 0;
}

.cate_li {
  display: flex;
  align-items: center;
}

.link_sub_item
{
  margin-left: 5px;
}

.sub_item {
  margin-left: 5px;
}

.sub_category_list > li > a:before{content:"-";} 

.menu-btn:hover, .cate-btn:hover, .sub_item:hover {
  cursor: pointer;
  color: var(--point2-color); 
  transition: all 0.3s ease;
}


/* list */
.list-name {
  padding: var(--padding1-);
}

.category-name {
  border: solid 1px var(--border-color);
  border-radius: var(--border-radius-);
  padding: var(--padding1-);
  box-shadow: var(--box-color);
  margin-bottom: var(--padding1-);
}

.cate-name {
  font-weight: bold;
}

.cate-info {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cate-desc {
  text-align: center;
}

.empty {
  padding: var(--padding2-);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* list-gallery */
#list-gallery .list-td,
#list-gallery .summary {
  display: none;
}

#list-gallery .list-lock .thumbnail-info::after {
  content:"\f023"; 
  font-family:"Font Awesome 5 Free"; 
  font-weight: 700;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transition: all 0.3s ease;
  margin-top: -3px;
}

#list-gallery .list-inner,
#cover-gallery .list-inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-) , 1fr);
  gap: var(--padding1-);
}

#list-gallery .list-item,
#cover-gallery .list-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-);
  box-shadow: var(--box-color);
  background: var(--article-color);
  transition: box-shadow 0.18s;
}

#list-gallery .thumbnail,
#cover-gallery .thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

#list-gallery .thumbnail img,
#cover-gallery .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  background: var(--article-color);
}

/* hover 시 살짝 확대 */
#list-gallery .list-item:hover .thumbnail img,
#cover-gallery .list-item:hover .thumbnail img {
  transform: scale(1.07);
}

#list-gallery .thumbnail-info,
#cover-gallery .thumbnail-info {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--padding1-);
  background: rgba(0,0,0,0.58);
  color: var(--article-color);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: var(--border-radius-);
  transition: opacity 0.35s;
  font-size: var(--font1-size);
}

#list-gallery .list-item:hover .thumbnail-info,
#cover-gallery .list-item:hover .thumbnail-info {
  opacity: 1;
  pointer-events: auto;
}

#list-gallery .thumbnail-title,
#cover-gallery .thumbnail-title {
  font-size: var(--font2-size);
  font-weight: bold;
  margin-bottom: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#list-gallery .thumbnail-item,
#cover-gallery .thumbnail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

#list-gallery .thumbnail-date,
#cover-gallery .thumbnail-date {
  font-size: 80%;
  opacity: 0.85;
}
#list-gallery .thumbnail-cate,
#cover-gallery .thumbnail-cate {
  font-size: 80%;
  opacity: 0.72;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 왼쪽 위 삼각형 그림자 – 1mm는 transform부분
#list-gallery .list-item::after{
  content:"";
  position:absolute;
  left:-3px;
  top:-3px;
  width:0;
  height:0;

  border-top:18px solid rgba(0, 0, 0, 0.048);
  border-right:18px solid transparent;

  transform: translate(4px,4px);
  z-index:49;
  pointer-events:none;
}
*/




/* list- basic */
#list-basic .thumbnail,
#list-basic .summary {
  display: none;
}

/* 자물쇠색깔
#list-basic .list-lock .list-title::before{
  content:"\f023"; 
  font-family:"Font Awesome 5 Free"; 
  font-weight:700;
  margin-right: 3px;
} */
#list-basic .list-lock .list-title::before{
  content:"\f023";
  font-family:"Font Awesome 5 Free";
  font-weight:700;

  color: #C7A383;      /* ✅ 자물쇠 색 */
  margin-right: 8px;   /* ✅ 자물쇠 뒤 한 칸 더 */
}

#list-basic .list-inner,
#cover-basic .list-inner {
  display: flex;
  flex-direction: column;
  gap: var(--padding1-);
}

#list-basic .list-item,
#cover-basic .list-item {
  display: block;
  background: var(--article-color);
  border-radius: var(--border-radius-);
  box-shadow: var(--box-color);
  border: solid 1px var(--border-color);
  transition: box-shadow 0.18s;
  padding: 8px 15px;
  text-decoration: none;
}

#list-basic .list-td,
#cover-basic .list-td {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 리스트 글씨 굵지 않게 */
#list-basic .list-title,
#cover-basic .list-title {
  font-weight: normal;
  color: var(--point1-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font1-size);
}

#list-basic .list-date,
#cover-basic .list-date {
  color: var(--point2-color);
  opacity: 0.78;
  font-size: 92%;
  text-align: right;
  white-space: nowrap;
}

#list-basic .list-item:hover,
#cover-basic .list-item:hover {
  background: var(--point2-color);
  border: solid 1px var(--point2-color);
  transition: var(--transition-);
}

#list-basic .list-item:hover .list-title,
#list-basic .list-item:hover .list-date,
#cover-basic .list-item:hover .list-title,
#cover-basic .list-item:hover .list-date {
  color: var(--article-color);
  transition: var(--transition-);
}


/* list memo */
/* list-memo */
#list-memo .list-td,
#list-memo .summary-title,
#list-memo .summary-date,
#list-memo .cate-link,
#list-memo .category-name,
#list-memo .thumbnail-cate {
  display: none;
}

#list-memo .list-inner,
.cover-memo .list-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--padding1-);
}


/* 메모형 리스트에서 자물쇠 색,한칸띄기 수정정
#list-memo .list-lock .thumbnail-title::before{
  content:"\f023"; 
  font-family:"Font Awesome 5 Free"; 
  font-weight:700;
  margin-right: 3px;
} */
#list-memo .list-lock .thumbnail-title::before{
  content:"\f023";
  font-family:"Font Awesome 5 Free";
  font-weight:700;

  color: #C7A383;      /* ✅ 자물쇠 색 */
  margin-right: 8px;   /* ✅ 자물쇠 뒤 한 칸 */
}


#list-memo .list-item,
.cover-memo .list-item {
  display: flex;
  flex-direction: column;
  background: var(--article-color);
  border-radius: var(--border-radius-);
  box-shadow: var(--box-color);
  border: solid 1px var(--border-color);
  transition: box-shadow 0.18s;
  padding: var(--padding1-);
  text-decoration: none;
  gap: 8px;
  color: var(--text-color);
}

#list-memo .thumbnail,
.cover-memo .thumbnail {
  display: flex;
  align-items: center;
  gap: var(--padding1-);
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

#list-memo .thumbnail-info,
.cover-memo .thumbnail-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  gap: 2px;
}

#list-memo .thumbnail img,
.cover-memo .thumbnail img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--box2-color);
  background: var(--article-color);
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  display: block;
}

#list-memo .thumbnail img:hover,
.cover-memo .thumbnail img:hover {
  cursor: zoom-in;
}

#list-memo .list-item:hover .thumbnail img,
.cover-memo .list-item:hover .thumbnail img {
  transform: scale(1.10);
}

#list-memo .thumbnail-title,
.cover-memo .thumbnail-title {
  font-size: var(--font1-size);
  font-weight: normal; /* 메모형 리스트 제목 굵지않게게 */
  color: var(--point1-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#list-memo .thumbnail-item,
.cover-memo .thumbnail-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--padding1-);
}

#list-memo .thumbnail-date,
.cover-memo .thumbnail-date {
  font-size: 80%;
  color: var(--point2-color);
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#list-memo .thumbnail-cate,
.cover-memo .thumbnail-cate {
  font-size: 80%;
  color: var(--point2-color);
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#list-memo .summary-desc,
.cover-memo .summary-desc {
  font-size: var(--font1-size);
  color: var(--text-color);
  margin-top: 2px;
  word-break: break-word;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 5; /* 최대 5줄 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

#list-memo .list-item:hover,
.cover-memo .list-item:hover {
  background: var(--point2-color);
  border-color: var(--point2-color);
  transition: var(--transition-);
}

#list-memo .list-item:hover .thumbnail-title,
#list-memo .list-item:hover .thumbnail-date,
#list-memo .list-item:hover .thumbnail-cate,
#list-memo .list-item:hover .summary-desc,
.cover-memo .list-item:hover .thumbnail-title,
.cover-memo .list-item:hover .thumbnail-date,
.cover-memo .list-item:hover .thumbnail-cate,
.cover-memo .list-item:hover .summary-desc {
  color: var(--article-color);
  transition: var(--transition-);
}



/* memo popup */
#memo-img-modal {
  position: fixed; left: 0; top: 0; 
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.memo-img-modal-img {
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: var(--box-color);
  background: var(--article-color);
}
.memo-img-modal-bg {
  position: absolute; inset: 0; width: 100vw; height: 100vh;
  background: transparent;
}


/* list summary */
#list-summary .thumbnail-info,
#list-summary .thumbnail-item,
#list-summary .list-td,
#list-summary .summary-title,
#list-summary .summary-date {
  display: none;
}

#list-summary .list-lock .summary-desc::before{
  content:"\f023"; 
  font-family:"Font Awesome 5 Free"; 
  font-weight:700;
  margin-right: 3px;
}

#list-summary .list-inner,
.cover-summary .list-inner {
  display: grid;
  grid-template-columns: repeat( 2 , 1fr);
  gap: var(--padding1-);
}

#list-summary .list-item,
.cover-summary .list-item {
  display: flex;
  flex-direction: column;
  background: var(--article-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-);
  box-shadow: var(--box-color);
  padding: var(--padding1-);
  text-decoration: none;
  color: var(--text-color);
  gap: var(--padding1-);
  transition: box-shadow 0.18s;
}

#list-summary .thumbnail,
.cover-summary .thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--border-radius-);
}

#list-summary .thumbnail img,
.cover-summary .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 1/1;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

#list-summary .list-item:hover .thumbnail img,
.cover-summary .list-item:hover .thumbnail img {
  transform: scale(1.08);
}

#list-summary .summary-title,
.cover-summary .summary-title,
#list-summary .summary-date,
.cover-summary .summary-date {
  display: inline-block !important;
  font-weight: 700;
  color: var(--point1-color);
  font-size: var(--font1-size);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

#list-summary .summary-title,
.cover-summary .summary-title {
  margin-right: 5px;
}

#list-summary .summary-date,
.cover-summary .summary-date {
  font-weight: 400;
  font-size: 80%;
  color: var(--point2-color);
  opacity: 0.9;
}

#list-summary .summary-desc,
.cover-summary .summary-desc {
  font-size: var(--font1-size);
  color: var(--text-color);
  line-height: 1.5;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

#list-summary .list-item:hover,
.cover-summary .list-item:hover {
  background: var(--point2-color);
  color: var(--article-color);
  transition: var(--transition-);
  border: solid 1px var(--point2-color);
}

#list-summary .list-item:hover .summary-title,
.cover-summary .list-item:hover .summary-title,
#list-summary .list-item:hover .summary-date,
.cover-summary .list-item:hover .summary-date,
#list-summary .list-item:hover .summary-desc,
.cover-summary .list-item:hover .summary-desc {
  color: var(--article-color);
  transition: var(--transition-);
}


/* list - dday */
#list-dday .thumbnail-info,
#list-dday .list-td {
  display: none;
}

#list-dday .list-lock .summary-desc::before{
  content:"\f023"; 
  font-family:"Font Awesome 5 Free"; 
  font-weight:700;
  margin-right: 3px;
}

#list-dday .list-inner,
.cover-dday .list-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--padding1-);
}


#list-dday .list-item,
.cover-dday .list-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--article-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-);
  box-shadow: var(--box-color);
  padding: var(--padding1-);
  text-decoration: none;
  color: var(--text-color);
  gap: var(--padding1-);
  transition: box-shadow 0.18s;
}

#list-dday .thumbnail,
.cover-dday .thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16/6;
  overflow: hidden;
  border-radius: var(--border-radius-);
  background: var(--point1-color);
}

#list-dday .thumbnail img,
.cover-dday .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

#list-dday .summary,
.cover-dday .summary {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--article-color);
  text-align: center;
  z-index: 2;
  gap: var(--padding2-);
  padding: var(--padding1-);
}

#list-dday .summary-title,
.cover-dday .summary-title {
  font-size: var(--font1-size);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#list-dday .summary-date,
.cover-dday .summary-date {
  font-size: 1.08em;
  opacity: 0.92;
  order: 3;
}

#list-dday .summary-desc,
.cover-dday .summary-desc {
  order: 2;
  font-weight: 700;
}

#list-dday .list-item:hover .thumbnail img,
.cover-dday .list-item:hover .thumbnail img {
  transform: scale(1.08);
}

#list-dday .list-item:hover,
.cover-dday .list-item:hover {
  transition: var(--transition-);
  background: var(--point2-color);
}

.cover-dday .summary-desc2 {
  order: 3;
}

.cover-dday summary-dday {
  order: 2;
}


/* dday형에 d-날짜랑 날짜에 그림자주기 */
/* ✅ 제목 (summary-title) 그림자 */
#list-dday .summary-title,
.cover-dday .summary-title{
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
/* ✅ D-날짜 (summary-desc) 그림자 */
#list-dday .summary-desc,
.cover-dday .summary-desc{
  text-shadow: 0 1px 2px rgba(0,0,0,.45);

}
/* ✅ 일반 날짜 (summary-date) 그림자 */
#list-dday .summary-date,
.cover-dday .summary-date{
  text-shadow:
    0 1px 3px rgba(0,0,0,0.3);
}




/* cover */
.cover-inner {
  padding: var(--padding1-);
}

.cover-inner > .inner {
  margin-bottom: 10px;
}
.cover-inner > .inner:last-of-type {
  margin-bottom: 0;
}

/* cover-notice */
.cover-notice.inner,
.cover-gallery.inner,
.cover-basic.inner,
.cover-memo.inner,
.cover-summary.inner,
.cover-dday.inner,
.cover-swiper.inner {
  padding: var(--padding1-);
  border-radius: var(--border-radius-);
  border: solid 1px var(--border-color);
}

.cover-notice .notice-list {
  display: none;
}

.cover-notice .c-title {
  display: flex;
  gap: var(--padding1-);
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
}

.cover-gallery .c-title,
.cover-basic .c-title,
.cover-memo .c-title,
.cover-summary .c-title,
.cover-dday .c-title,
.cover-swiper .c-title {
  font-weight: 700;
  padding-bottom: var(--padding1-);
  display: flex;
  align-items: center;
  gap: var(--padding1-);
}

.cover-notice .c-title:hover {
  color: var(--point2-color);
  transition: var(--transition-);
}

.cover-notice.open .c-title i {
  transform: rotate(180deg);
  transition: var(--transition-);
}


/* cover swiper */
.swiper {
  width:calc(100% - var(--padding1-)) !important; 
  margin: 0 !important; 
}

.swiper.mySwiper  {
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-);
}

.swiper-slide {
  width: 100%;
  background: var(--article-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-);
  overflow: hidden;
}

.swiper-slide img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
  border-radius: var(--border-radius-);
}

.swiper-pagination-bullet {
  background: var(--point1-color) !important; 
  opacity: 100 !important;
}

.swiper-pagination-bullet-active {
   background: var(--point2-color) !important; 
  opacity: 100 !important;
}



/* article */
#article {
  font-size: var(--font2-size);
  color: var(--text-color);
}

#article .article-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: solid 1px var(--border-color);
  gap: var(--padding1-);
  padding: var(--padding1-);
}

#article .article-title {
  font-weight: 700 ;
  font-size: 15px; 
}

#article .article-date {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 80%;
  color: var(--point2-color);
}

#article .article-cate a {
  display: flex;
  align-items: center;
  font-size: var(--font2-size);
}

#article .article-desc {
  padding: var(--padding2-);
  border-bottom: solid 1px var(--border-color); 
}

blockquote[data-ke-style="style1"] {
  text-align: center;
}

blockquote[data-ke-style='style1'] span:before { 
  content: '❝';  
  display: block; 
  font-size: 2.2em;
  color: var(--point1-color);
  text-align: left;
  margin-top: 10px; 
}

blockquote[data-ke-style='style1'] span:after { 
  content: '❞';
  display: block; 
  font-size: 2.2em;
  color: var(--point1-color);
  text-align: right;
  margin-bottom: 10px;
}


blockquote[data-ke-style='style2'] {
  padding:5px; 
  margin:10px 0;  
  font-size: var(--font2-size); 
  line-height:20px; 
  font-weight: bold;
  text-align: left;
  background: var(--article-color);
  border-left: solid 3px var(--border-color); 
}

blockquote[data-ke-style='style3'] { 
  padding: 5px; 
  margin:10px 0; 
  font-size: var(--font2-size); 
  line-height: 20px; 
  overflow-y: auto;
}

.contents_style table td {
  padding: var(--padding1-);
  border: solid 1px var(--border-color);
}


ul[data-ke-list-type='disc'] > li {
  list-style: none !important;
}

#article .article-desc ul[data-ke-list-type='disc'] > li {
  position: relative;
  padding-left: 1.2em;
  margin: 0.4em 0;
  font-size: var(--font2-size);
  color: var(--text-color);
  line-height: 1.7;
  transition: color 0.18s;
}

#article .article-desc ul[data-ke-list-type='disc'] > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  background: var(--point1-color);
  border-radius: 50%;
}

#article .article-desc ul[data-ke-list-type='disc'] > li:hover::before {
  background: var(--point2-color);
  transition: var(--transition-);
}


ul[data-ke-list-type='circle'] > li {
  list-style: none !important;
}

#article .article-desc ul[data-ke-list-type='circle'] > li {
  position: relative;
  padding-left: 1.05em;
  margin: 0.4em 0;
  font-size: var(--font2-size);
  color: var(--text-color);
  line-height: 1.7;
  transition: color 0.18s;
}

#article .article-desc ul[data-ke-list-type='circle'] > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5.5px; 
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--point1-color);
  background: transparent;
  box-sizing: border-box;
  transition: border-color 0.18s;
}

#article .article-desc ul[data-ke-list-type='circle'] > li:hover::before {
  border-color: var(--point2-color);
}

ol[data-ke-list-type='decimal'] > li {
  list-style: none !important;
}

#article .article-desc ol[data-ke-list-type='decimal'] > li {
  position: relative;
  padding-left: 1.2em;
  margin: 0.4em 0;
  font-size: var(--font2-size);
  color: var(--text-color);
  line-height: 1.7;
  transition: color 0.18s;
  counter-increment: custom-ol;
}

#article .article-desc ol[data-ke-list-type='decimal'] {
  counter-reset: custom-ol;
}

#article .article-desc ol[data-ke-list-type='decimal'] > li::before {
  content: counter(custom-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--point1-color);
  font-weight: 700;
  font-size: 1em;
  transition: color 0.18s;
}

#article .article-desc ol[data-ke-list-type='decimal'] > li:hover::before {
  color: var(--point2-color);
}

figure[data-ke-type='opengraph'] div.og-text {
  font-size: var(--font1-size) !important;
  padding: var(--padding2-) !important;
}

div[data-ke-type='moreLess'] .btn-toggle-moreless {
  font-size: var(--font2-size) !important;
}

[data-ke-type="moreLess"] .btn-toggle-moreless::before {
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0d7"; /* ▼ */
  margin-right: 6px;
  font-size: 1em;
  transition: transform 0.32s cubic-bezier(.4,0,.2,1), color 0.18s;
  vertical-align: middle;
  transform: rotate(0deg);
}

[data-ke-type="moreLess"].open .btn-toggle-moreless::before {
  /* 같은 content지만, 180도 회전 */
  transform: rotate(180deg);
}

div[data-ke-type='moreLess'].open .moreless-content {
  border: solid 1px var(--border-color);
  background: #eee;
  padding: var(--padding2-);
  border-radius: var(--border-radius-);
}

[data-ke-type="moreLess"] .btn-toggle-moreless:hover::before,
[data-ke-type="moreLess"].open .btn-toggle-moreless::before {
  transform: rotate(180deg);
  color: var(--point2-color);
  transition: var(--transition-);
}

#article .container_postbtn .btn_menu_toolbar {
  border: none !important;
  line-height: inherit !important;
  height: 37px !important;
  margin-left: 0 !important;
  border-left: solid 1px var(--border-color) !important;
  border-radius: 0 !important;
}

#article .container_postbtn {
  padding: 0 !important;
}

#article .container_postbtn .postbtn_like {
  float: unset;
  display: flex;
  flex-direction: row-reverse;
  padding: 0 !important;
  border: none !important;
  border-radius: unset !important;
}

#article .container_postbtn .btn_post{
  background: var(--article-color);
  border-left: solid 1px var(--border-color);
  height: 37px;
  padding: var(--padding1-);
  display: flex;
}

#article .container_postbtn .btn_post .ico_postbtn {
  margin: 0 !important;
  max-width: unset !important;
}

#article .uoc-icon {
  display: flex;
  align-items: center;
}

#article .txt_like.uoc-count {
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  color: var(--point1-color);
  font-weight: 700;
  margin-left: 3px;
  transition: color 0.18s;
}

#article .uoc-count {
  color: var(--point1-color) !important;
  font-weight: 700;
  margin-left: 3px;
}

#article .uoc-icon.like_on .txt_like.uoc-count {
  color: var(--point2-color) !important;
  font-weight: 700;
}

#article .btn_post.uoc-icon {
  overflow: visible;
}

#article .btn_post .ico_like {
  width: 18px;
  height: 18px;
  margin: 3px 4px 0 0;
  background: none !important;
  position: relative;
  display: inline-block;
  text-indent: 0 !important;
  overflow: visible !important;
  color: var(--point2-color);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0;
  line-height: 18px;
  vertical-align: middle;
}

#article .btn_post .ico_like::before {
  content: "\f08a";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  font-size: 16px;
  color: var(--text-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: color 0.3s ease;
}

#article .btn_post .ico_like::after {
  content: "\f004";
  font-family: "Font Awesome 6 Free";
  font-weight: 900; 
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--point2-color);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

#article .btn_post .uoc-icon.like_on .ico_like::before {
  opacity: 0;
}

#article .btn_post .uoc-icon.like_on .ico_like::after {
  opacity: 1;
}

#article .btn_post.uoc-icon:focus,
#article .btn_post.uoc-icon:active,
#article .btn_post.sns_btn.btn_share:focus,
#article .btn_post.sns_btn.btn_share:active,
#article .container_postbtn .btn_post:focus,
#article .container_postbtn .btn_post:active {
  outline: none !important;
  box-shadow: var(--box-color) !important;
}

#article .container_postbtn .btn_post .ico_share {
  width: 18px !important; 
  height: 18px !important;
  margin: 0;
  background: none !important;
  position: relative;
  filter: none;
  color: var(--text-color);
  text-indent: 0 !important; 
  overflow: visible !important;
}

#article .container_postbtn .btn_post .ico_share::before {
  content: "\f1e0";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-size: 16px;
  color: currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: none !important;
  text-indent: 0;
  user-select: none;
  pointer-events: none;
}

.comment-btn:hover, 
.tag-btn:hover, 
.related-btn:hover,
#article .btn_post .ico_like:hover::before,
#article .container_postbtn .btn_post .ico_share:hover::before,
#article .container_postbtn .btn_post .ico_etc:hover::before,
.btn_menu_toolbar:hover .txt_state  {
  color: var(--point2-color);
  cursor: pointer;
  transition: var(--transition-);
}

#article .container_postbtn .btn_post .ico_etc {
  background: none !important;
  text-indent: 0 !important;
  overflow: visible !important;  
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0;
  color: var(--text-color);
  display: inline-block;
  line-height: 1;
}

#article .container_postbtn .btn_post .ico_etc::before {
  content: "\f141";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
  color: inherit;
}

#article .footnotes {
  margin: var(--padding2-) 0;
}


/* container_postbtn */
.wrap_btn > button[data-tiara-action-name="글통계_클릭"] {
  display: none !important;
}


/* article btn */
#article .article-paging {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px var(--border-color);
}

#article .article-prev a,
#article .article-next a {
  display: flex;
  align-items: center;
  padding: var(--padding1-);
}

#article .article-btn {
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px var(--border-color);
}

#article .article-btn1 {
  display: flex;
  justify-content: flex-start;
}

#article .comment-btn,
#article .tag-btn,
#article .related-btn {
  padding: var(--padding1-);
  border-right: solid 1px var(--border-color);
  width: 37px;
  height: 37px;
}



/* article btn inner */
.article-btn-inner {
  display: flex;
  flex-direction: column;
}

.article-tag {
  display: none;
  border-bottom: solid 1px var(--border-color);
  padding: var(--padding1-);
}

/* article related */
#article-related {
  display: none;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: var(--padding1-);
} 

#article-related .rd-text a {
  display: flex;
  align-items: center;
  padding: var(--padding1-);
  font-size: var(--font2-size);
  font-weight: 700;
}

#article-related .rd-text a svg {
  margin-right: 5px;
}

#article-related .rd-text a:hover,
#article-related a:hover .summary-title {
  color: var(--point2-color);
  transition: var(--transition-);
}

#article-related .rd-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  border-bottom: solid 1px var(--border-color);
}

#article-related .rd-inner .c-gwrap {
  box-sizing: border-box;
}

#article-related .c-gwrap {
  position: relative;
}

#article-related .rd-inner .thumbnail{
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

#article-related .rd-inner .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
  display: block;
}

#article-related .summary-title {
  text-align: center;
  font-size: var(--font2-size);
  color: var(--text-color);
  font-weight: 700;
}

/* 게시물 하단 이전게시물(이미지) 변경하기 */
#article-related .thumbnail-info {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88%;
  padding: 5px 6px;
  transform: translate(-50%, -50%);
  color: var(--article-color);
  font-size: 12pt;
  font-weight: 700;

  text-align: center;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1);

  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important; /* 글자에 그림자 주기 */

}

#article-related .rd-inner .list-item:hover .thumbnail img {
  transform: scale(1.09);
}

#article-related .rd-inner .list-item:hover .thumbnail-info {
  opacity: 0;
}

/* namecard */
[data-tistory-react-app="Namecard"] {
  order: 4;
}

#article .tt_box_namecard {
  background: var(--article-color) !important;
  color: var(--text-color) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: var(--padding1-) !important;
  min-height: 150px !important;
  align-items: center;
  flex-direction: column-reverse !important;
  justify-content: center !important; 
  gap: 5px;
}

.tt_box_namecard .tt_btn_subscribe .tt_txt_g, .tt_txt_g {
  font-size: var(--font2-size) !important;
}

#article .tt_box_namecard .tt_wrap_thumb {
  margin:  0 !important;
}

#article .tt_box_namecard .tt_cont {
  padding: 0 !important;
}

#article .tt_box_namecard .tt_cont a {
  font-size: var(--font2-size);
  font-weight: 700;
}

#article .tt_box_namecard .tt_desc {
  text-align: center;
  padding-top: 0 !Important;
  font-size: var(--font2-size);
}

.tt_box_namecard .tt_btn_subscribe {
  margin-bottom: 0 !important;
}

.tt_box_namecard .tt_btn_subscribe .tt_txt_g {
  font-size: var(--font1-size) !important;
}

/* comment */
#comment {
  font-family: 'Nadeuri', sans-serif !important;
  display: none;
  border-bottom: solid 1px var(--border-color);
}


/* guestbook & comment font size */
#comment,
#guestbook,
#guestbook *,
#comment *,
.tt-comment-cont,
.tt-comment-cont *,
.tt-wrap-cmt,
.tt-wrap-cmt *,
.tt-cmt,
.tt-cmt *,
.tt_desc,
.tt_desc *,
.tt-link-user,
.tt-link-user *,
.tt_date {
  font-size: 12pt !important;
  font-family: 'Nadeuri', sans-serif !important;
}

#guestbook .tt-list-reply {
  border-bottom: none !important;
}

.tt-list-reply {
  border-bottom: solid 1px var(--border-color) !important;
}

.tt-list-reply:last-of-type {
  border-bottom: none !important;
}

.tt-list-reply > li:last-child {
  border-bottom: none !important;
}

.tt-comment-cont > .tt-area-reply > .tt-list-reply > li.tt-item-reply:has(p.tt_cmt_info){
  background: var(--article-color);
  border-top: solid 1px var(--border-color) !important;
}

.tt-item-reply .tt_cmt_info .tt_ico_fixed{
  margin-right: 0;
  margin-bottom: 0;
}

.tt-item-reply .tt_cmt_info .tt_txt_g {
  font-size: var(--font1-size) !important;
  font-weight: bold;
}

.tt-item-reply .tt_cmt_info {
  margin: 0;
  padding: var(--padding2-) var(--padding2-) 0 var(--padding2-);
  font-family: inherit !important;
}

.tt-comment-cont {
  display: flex;
  flex-direction: column;
}

.tt-box-total {
  order: 1;
  padding: var(--padding1-);
  background: var(--article-color) !important;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  border-bottom: solid 1px var(--border-color);
  align-items: center;
}

.tt-area-reply {
  order: 3;
  margin-bottom: 0 !important;
}

.tt-comment-cont > form {
  order: 2;
  padding: var(--padding1-);
  background: var(--article-color);
}

ul.tt-list-reply-comment > li.tt-item-reply > form {
  padding: var(--padding1-);
}

.tt-box-total .tt_txt_g::after {
  content:"\f0e0";
  font-family:"Font Awesome 5 Free";
  font-weight: 400;
  color: var(--point1-color);
  font-size: 18px;
}


.tt_txt_g,
.tt_txt_g {
  font-size: 0 !important;
}


.tt-box-total .tt_num_g{
  color: var(--point1-color);
}

.tt-box-textarea .tt-inner-g {
  border-radius: var(--border-radius-) !important;
}

.tt-box-textarea .tt_txt_user {
  display: none;
}

.tt-cmt[data-placeholder]:empty:before {
  content: 'leave a comment..' !important;
  color: var(--point2-color) !important;
}

.tt-box-textarea.tt-input-textarea .tt-inner-g {
  color: var(--point1-color) !important;
  font-size: var(--font2-size) !important;
  border-color: var(--border-color) !important;
}

.tt-thumbnail {
  border-radius: var(--border-radius-) !important;
}

.tt-btn_register:disabled {
  background: var(--article-color) !important;
  border: solid 1px var(--border-color) !important;
  color: var(--point2-color);
}

.tt-btn_register {
  padding: var(--padding1-) !important;
  width: unset !important;
  height:  unset !important;
  border-radius: var(--border-radius-) !important;
  background: var(--point1-color) !important;
  border: solid 1px var(--border-color);
}

.tt-btn_register:hover,
.tt-btn_register:focus {
  background: var(--point2-color) !important;
  border: 1px solid var(--point2-color) !important;
  transition: var(--transition-);
}

.tt-wrap-cmt {
  padding: var(--padding2-);
}

.tt-list-reply-comment > li > .tt-wrap-cmt {
  padding-left: 30px;
}

.rp_general .tt-list-reply-comment > li:first-child > .tt-wrap-cmt {
  padding-top: 0;
}

.tt-wrap-cmt .tt-link-user,
.tt-wrap-cmt .tt_desc {
  font-size: var(--font1-size) !important;
}

.rp_general {
  background: var(--article-color);
  margin: 10px 0 !important;
  border-bottom: solid 1px var(--border-color);
  padding: 0 !important;
}

.tt-item-reply {
  padding: 0 !important;
}

.tt-list-reply li:first-child {
  border-top: none !important;
}

.rp_general {
  border: none;
}

.tt-item-reply .tt-list-reply-comment {
  border-top: none !important;
  margin: 0;
}

.tt-list-reply-comment > .tt-item-reply {
  border-top: none !important;
}

.tt-box-thumb {
  margin-right: 5px;
}

.tt-wrap-info .tt_date+.tt-wrap-link-comment:before {
  display: none !important;
}

.tt-link-comment .tt_num_g, .tt-link-comment .tt_txt_g{
  color: var(--point1-color) !important;
  font-weight: bold;
}

.tt-wrap-cmt .tt-wrap-link-comment {
  padding-left: 5px;
}

li.tt-item-reply.rp_general > .tt-wrap-cmt {
  border-top: solid 1px var(--border-color);
}

.tt-link-comment .tt_txt_g {
  font-size: var(--font1-size) !important;
  padding-top: var(--padding1-);
}

.tt-wrap-cmt .tt_date {
  font-size: var(--font1-size);
  padding-top: var(--padding1-) !important;
  color: var(--point2-color);
}

.tt-area-write .tt-box-account input {
  border-radius: var(--border-radius-) !important;
}


/* protected */
#protected {
  font-size: var(--font2-size);  
  height: 100%;
}

#protected .article-inner {
  background: var(--article-color);
  padding: var(--padding2-);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#protected .article-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

#protected .article-date {
  justify-content: space-between;
  align-items: center;
  gap: 100px;
  flex-direction: row-reverse;
  display: none;
}

#protected .article-title {
  font-weight: 700;

}

#protected .article-cate a{
  display: flex;
  align-items: center;
}

#protected .article-desc {
  text-align: center;
}

.lock-text {
  margin-bottom: 10px;
}

.lock-desc input[type="password"] {
  border: none; 
  font-family: 'Nadeuri'; 
  background: none; 
  border-radius: var(--border-radius-); 
  padding: var(--padding1-);
  color: var(--point1-color);
}

.lock-desc {
  display: flex;
  align-items: center;
  padding: var(--padding1-);
}

.lock-desc input[type="password"]::placeholder{
  color: var(--point2-color);
}

.lock-desc input[type="button"] {
  width: auto;
  font-family: 'Nadeuri';
  background: none; 
  border-radius: var(--border-radius-); 
  padding: var(--padding1-); 
  font-weight: bold;
  color: var(--point1-color);
  border: solid 1px var(--border-color);
}
 
.lock-desc input[type="button"]:hover {
  color: var(--point2-color);
  transition: all 0.3s ease;
  background: var(--border-color);
  cursor: pointer;
}


/* tag */
#tag {
  font-size: var(--font2-size);
}

#tag .article-title {
  margin-bottom: 10px;
}

#tag .article-title {
  border-bottom: solid 1px var(--border-color);
  font-weight: 700;
}

#tag .article-title,
#tag .article-desc {
  padding: var(--padding2-);
  background: var(--article-color);
}

#tag .article-desc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

#tag .article-desc a:before {
  content: "#";
  font-weight: 700;
  margin-right: 1px;
}


/* notice */
#notice .container_postbtn {
  display: none;
}

#notice {
  border-bottom: solid 1px var(--border-color);
  padding: var(--padding1-);
  font-size: var(--font2-size);
  color: var(--text-color);
}

#notice:last-child{
  border-bottom: none;  
}

#notice .article-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--padding1-);
  margin-bottom: var(--padding1-);
}

#notice .article-title {
  font-weight: 700;
}

/* paging */
#paging{
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-paging{
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  height: 30px;
  border: solid 1px var(--border-color);
  background: var(--article-color);
  border-radius: var(--border-radius-);
  box-shadow: var(--box-color);
  padding: 0 5px;
}

.num {
  margin: 0 5px;
}

.p-prev a, .p-next a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: solid 1px var(--border-color);
  background: var(--article-color);
  border-radius: var(--border-radius-);
  box-shadow: var(--box-color);
}

#paging .selected{
  color: var(--point2-color);
  font-weight: bold;
}














/* 반응형 */ 
@media (max-width:800px){
  #darkmode {
    position: relative;
    width: 100%;
    right: unset;
    top: unset;
    padding: 0;
    margin-bottom: 10px;
  }
  #main {
    height: auto !important;
    width: 96% !important;
    margin: 15px auto 15px auto;
  }
  #paging {
    margin: 0 5px;
  }
  button.theme-toggle {
    width: 100%;
    justify-content: flex-end;
  }
  #whole {
    width: 100%;
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
  } 
  #sidebar1 {
    width: 98%;
    height: auto;
  }
  .side-inner {
    width: 100%;
    position: relative;
    height: auto;
    top: unset;
  }
  #container {
    width: 100%;
    height: auto;
    order: 2;
  }
  .fake-scrollbar {
    display: none;
  }
  .btn svg {
    display: none;
  }
  #footer {
    display: none;
    width: 100%;
    order: 1;
    border-top: none;
    border-bottom: solid 1px var(--border-color);
  }
  #footer2 {
    width: 100%;
    border-bottom: solid 1px var(--border-color);
    border-top: none;
  }
  #mobile-menu .proimg {
    position: relative;
    width: 70px;
    height: 70px;
    overflow: hidden;
    margin: 0 auto 15px auto;
    border-radius: var(--border-radius-);
  }
  #mobile-menu .profile-img-light,
  #mobile-menu .profile-img-dark {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1);
    z-index: 1;
  }
  html[data-theme='light'] #mobile-menu .profile-img-light {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
  }
  html[data-theme='dark'] #mobile-menu .profile-img-dark {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
  }
  .m-menu, .m-cate {
    display: flex;
    gap: 5px;
    font-weight: 700;
  }
  .m-menu {
    margin-bottom: 5px;
  }  
 
  .swiper.mySwiper {
    max-height: 320px;
  }  
  .f-info, .category {
  display: flex;
  }
  .category_list, .menu-list {
    bottom: unset;
    top: 68px;
    width: 50%;
    border-radius: 0 0 var(--radius-) var(--radius-);
  }
  .f-text1 {
    display: none;
  }
  .list-summary .cover-item .thumbnail, #list-summary .list-item .thumbnail{
    height: 157px;
  }
  .back-title {
    margin-top: 5px;
  }
  .pop-inner {
    width: 95% !important;
  }
  .back-profile { 
    flex-direction: column;
  }
  .back-proimg img {
    width: 100%;
  }
  .back-desc {
    max-height: 190px;
    overflow-y: auto;
    height: unset;
  }
  .list-memo .memo-desc, #list-memo .memo-desc {
    line-height: unset;
  }
  .proimg{
    width: 59px;
  }

  #list-gallery .list-inner,
  #cover-gallery .list-inner,
  #list-memo .list-inner,
  .cover-memo .list-inner,
  #list-summary .list-inner,
  .cover-summary .list-inner{
  display: grid;
  gap: var(--padding1-);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  #mobile-menu {
    display: flex;
    flex-direction: column;
    background: var(--article-color);
    width: 100%;
    border: solid 1px var(--border-color);
    border-radius: var(--border-radius-);
    box-shadow: var(--box-color);
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }
  .s_paging {
    display: none;
  }
  #paging {
    gap: 5px;
  }
} 

/* scrollbar & drag */
::-webkit-scrollbar {
  width: 5px; 
}

::-webkit-scrollbar-track {
  background-color: var(--scrollbg-color); 
}

::-webkit-scrollbar-thumb {
  border-radius: 0; 
  background-color: var(--scroll-color);
}

::-webkit-scrollbar-button {
  display: none; 
}

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

/* copyright 삭제는 옵션 구매 후 해주세요!
링크 삭제 금지 */
#copyright a{ 
  position: fixed;
  left: 10px;        /* ← 오른쪽 → 왼쪽 */
  bottom: 10px;
  display: flex;
  flex-direction: row;   /* 아이콘 + 글자 순서 정상 */
  align-items: center;
  color: var(--point1-color);
  line-height: 1;
}

#copyright .planet-icon-wrap {
  width: 20px;
  height: 20px;
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  perspective: 800px;
}

#copyright .planet-icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: url('https://blog.kakaocdn.net/dn/Fhfej/btsOdIpDkjd/5fCNO20nJxRvnfEQv2yvVK/img.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: auto;
  background-position: center;
  position: relative;
  z-index: 2;
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}

#copyright .planet-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 10px;
  background: radial-gradient(ellipse at center, var(--point1-color) 0%, transparent 100%);
  border-radius: 50%;
  z-index: 1;
  animation: ringSpin 8s linear infinite;
  transform-origin: center;
  transform: translate(-50%, -50%) rotateX(75deg);
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}

@keyframes ringSpin {
  0% {
    transform: translate(-50%, -50%) rotateX(75deg) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(75deg) rotateZ(360deg);
  }
}

#copyright .copyright-1{ 
  display: flex;
  align-items: center;
  position: relative; 
  font-size: 11.5px; 
  font-weight: bold; 
  width: auto; 
  z-index: 999;
}

#copyright .copyright-2 {
  opacity: 0;
  transition: all 1s;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  font-weight: bold;
}

#copyright a:hover .copyright-2 {
  opacity: 1;
  color: var(--point1-color);
  transition: all 1s;
}
/* copyright 삭제는 옵션 구매 후 해주세요!
링크 삭제 금지 */


/*youtube*/
.youtube{
  position:relative; 
  width:100%; 
  padding-bottom:56.25%;
}
.youtube iframe{
  position:absolute; 
  width:100%; 
  height:100%;}

/*skin*/





/* 비밀글 <-- 글자 없애기
.tt-xe-label-text {
    display: none !important;
} */

.tt-xe-label-text {
  display: none !important;
}

.tt_img_area_reply {
  cursor: pointer;
}

.tt_img_area_reply:hover {
  filter: brightness(1.2);
  transition: filter 0.2s ease;
}



/* ===== 해/달 아이콘(다크모드 토글)만 숨기기 - 검색창 유지 ===== */

/* 1) 네 스킨에서 쓰는 토글 계열(가장 흔함) */
button.theme-toggle,
.theme-toggle,
.mode-toggle,
.darkmode-toggle,
.darkmode-switch,
#theme-toggle,
#toggle-theme,
#theme-toggle-btn,
#toggle-theme-btn,
span.toggle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2) #darkmode 영역 안에 “해/달 아이콘만” 따로 박힌 경우 (svg/i) */
#darkmode .btn svg,
#darkmode .btn i,
#darkmode .btn .light-on,
#darkmode .btn .light-off {
  display: none !important;
}

/* 3) 혹시 버튼 전체가 아니라 아이콘만 따로 떠있을 때(보험) */
#darkmode svg[class*="sun" i],
#darkmode svg[class*="moon" i],
#darkmode i[class*="sun" i],
#darkmode i[class*="moon" i] {
  display: none !important;
}






/* ===== FIX v2: '댓글' / '방명록' 글자만 숨기고 아이콘은 유지 ===== */

/* 1) 글 하단 툴바(포스트 버튼 영역) - 텍스트만 투명/0, 아이콘은 유지 */
#article .comment-btn .txt_state,
#article .comment-btn .tt_txt_g,
#article .comment-btn .label,
#article .comment-btn .text {
  font-size: 0 !important;
  color: transparent !important;
  letter-spacing: 0 !important;
}

/* 아이콘 요소는 다시 보이게(보험) */
#article .comment-btn svg,
#article .comment-btn i,
#article .comment-btn .ico_postbtn {
  display: inline-block !important;
  font-size: 16px !important;
  color: inherit !important;
}

/* 2) 댓글/방명록 상단 카운트(박스) - 라벨 글자만 숨김(숫자/아이콘 유지)
   ※ display:none 쓰면 ::after 아이콘이 같이 죽어서 font-size:0 방식으로 처리 */
#comment .tt-box-total .tt_txt_g,
#guestbook .tt-box-total .tt_txt_g,
#comment .tt-box-total .tt-xe-label-text,
#guestbook .tt-box-total .tt-xe-label-text {
  font-size: 0 !important;
  color: transparent !important;
  letter-spacing: 0 !important;
}

/* 상단 박스에서 아이콘(예: ::after로 찍힌 것) 크기 복구 */
#comment .tt-box-total .tt_txt_g::after,
#guestbook .tt-box-total .tt_txt_g::after {
  font-size: 18px !important;
  color: var(--point1-color) !important;
}

/* 3) 답글(Reply) 영역은 항상 표시 */
.tt_img_area_reply .txt_state,
.tt_img_area_reply .tt_txt_g,
.tt_img_area_reply .tt-xe-label-text {
  display: inline !important;
  font-size: inherit !important;
  color: inherit !important;
}


/* ===== PATCH: 공유 아이콘 글자 제거 + 답글 8pt ===== */

/* 1) 공유(share) 버튼: 글자(원문 텍스트) 숨기고 아이콘(::before)만 보이게 */
#article .btn_post.sns_btn.btn_share .ico_share {
  text-indent: -9999px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* 아이콘은 그대로 중앙에 표시 */
#article .btn_post.sns_btn.btn_share .ico_share::before {
  text-indent: 0 !important;
  font-size: 16px !important;
  line-height: 18px !important;
}

/* 2) 댓글/방명록의 '답글' 글자 8pt (숨김 X)
#comment .tt_img_area_reply,
#guestbook .tt_img_area_reply {
  font-size: 8pt !important;
  line-height: 1.1 !important;
} */

/* 답글 텍스트 후보들(스킨에 따라 다름) */
#comment .tt_img_area_reply .tt_txt_g,
#guestbook .tt_img_area_reply .tt_txt_g,
#comment .tt_img_area_reply .tt-xe-label-text,
#guestbook .tt_img_area_reply .tt-xe-label-text,
#comment .tt_img_area_reply .txt_state,
#guestbook .tt_img_area_reply .txt_state {
  display: inline !important;
  font-size: 8pt !important;
  line-height: 1.1 !important;
}

/* (보험) font-size가 안 먹는 구조면 시각적으로 8pt(12pt 기준 0.67배)로 축소 */
#comment .tt_img_area_reply .tt_txt_g,
#guestbook .tt_img_area_reply .tt_txt_g,
#comment .tt_img_area_reply .tt-xe-label-text,
#guestbook .tt_img_area_reply .tt-xe-label-text {
  transform: scale(0.67);
  transform-origin: left center;
  display: inline-block;
}





/* 리스트(목록) 글씨 12pt로 고정 */
#list-basic,
#list-basic a,
#list-basic .list-title,
#list-basic .list-date,
#list-basic .list-desc,
#list-basic li {
  font-size: 12pt !important;
}
/* 다른 리스트 타입도 12pt로 */
#list-gallery .thumbnail-title,
#list-gallery .thumbnail-date,
#list-memo .thumbnail-title,
#list-memo .thumbnail-date,
#list-summary .summary-title,
#list-summary .summary-date,
#list-dday .summary-title,
#list-dday .summary-date {
  font-size: 12pt !important;
}


/* 줄간격 */
#main { line-height: 1.5 !important; }



/* 공지사항 위쪽 배경색 */
/* ✅ 제목바(빨간선 영역)만 테두리 폭에 맞게 #F5E6D3로 채우기 */
#article .article-info,
#notice .article-info{
  align-items: stretch !important; /* 핵심: 가로 꽉 늘리기 */
  padding: 0 !important;
}

/* 일반 글( #article )은 .article-tc 안에 제목이 있음 */
#article .article-tc{
  width: 100% !important;
  background: #F5E6D3 !important;
  padding: 12px 10px !important;
  border-radius: var(--border-radius-) var(--border-radius-) 0 0 !important; /* 위쪽만 둥글게 */
  text-align: center;
}

/* 공지( #notice )는 .article-title이 바로 있음 */
#notice .article-title{
  width: 100% !important;
  background: #F5E6D3 !important;
  padding: 12px 10px !important;
  border-radius: var(--border-radius-) var(--border-radius-) 0 0 !important;
  text-align: center;
}

/* 날짜 줄은 그대로(원하면 아래도 같은 색으로 바꿀 수 있음) */
#article .article-date,
#notice .article-date{
  width: 100% !important;
  text-align: center;
}


/* ✅ 공지: 바깥 여백 제거(제목바가 테두리까지 붙게) */
#notice{
  padding: 0 !important;
}
#notice .article-inner{
  padding: 0 !important;
}

/* ✅ 제목만 배경색(빨간선 영역) */
#notice .article-title{
  width: 100% !important;
  background: #F5E6D3 !important;
  padding: 12px 10px !important;
  border-radius: var(--border-radius-) var(--border-radius-) 0 0 !important;
  text-align: center;
}

/* ✅ 날짜는 흰색 유지 */
#notice .article-date{
  background: transparent !important;
  padding: 8px 0 !important;
  text-align: center;
}





/* ===== 홈(최신글) 영역 글씨 12pt 통일 ===== */

/* 커버 제목 */
.cover-inner,
.cover-inner a,
.cover-inner .c-title,
.cover-inner .list-title,
.cover-inner .thumbnail-title,
.cover-inner .summary-title {
  font-size: 12pt !important;
}

/* 날짜 / 카테고리 */
.cover-inner .list-date,
.cover-inner .thumbnail-date,
.cover-inner .summary-date,
.cover-inner .thumbnail-cate {
  font-size: 12pt !important;
}

/* 요약글 */
.cover-inner .summary-desc {
  font-size: 12pt !important;
  line-height: 1.5;
}


/* - - - BGM 플레이어 관련 - - - */
.mm-bgm{
  position: fixed;
  bottom: 15px; /* 우측상단 원하면 bottom을 top 으로 변경 */
  right: 15px;
  z-index: 9999; /* 맨위로 */
  border: none;
}
/* - - - BGM 플레이어 끝 - - -*/




/* 메모 리스트 제목 아래 점선 */
/* ✅ 날짜 아래(= 상단 정보 묶음 아래) 갈색 점선 */
#list-memo .thumbnail,
.cover-memo .thumbnail {
  position: relative;
  padding-bottom: 8px; /* 점선과 내용 간격 */
  margin-bottom: 2px;  /* 점선 아래 여백(선택) */
}

#list-memo .thumbnail::after,
.cover-memo .thumbnail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px dashed rgba(120, 90, 60, 0.4); /* 편안한 진한 갈색 */
}

/* ✅ hover 색이 점선 아래(= 요약 영역)만 채워지게 */
#list-memo .summary-desc,
.cover-memo .summary-desc {
  position: relative;
  border-radius: 8px; /* 배경 들어갈 때 모서리(선택) */
}

#list-memo .summary-desc::before,
.cover-memo .summary-desc::before {
  content: "";
  position: absolute;
  inset: -4px -6px; /* 살짝 넓게(원하면 0으로) */
  background: rgba(120, 90, 60, 0.14); /* 은은한 브라운 */
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 8px;
  pointer-events: none;
}

#list-memo .list-item:hover .summary-desc::before,
.cover-memo .list-item:hover .summary-desc::before {
  opacity: 1;
}
/* 메모형(list-memo) 아래 요약 글씨 12pt 고정 */
#list-memo .summary-desc,
.cover-memo .summary-desc {
  font-size: 12pt !important;
  line-height: 1.5;
}



/* 오른쪽 화살표 3개 */
/* ✅ list-memo: 점선 오른쪽 끝에 작은 화살표 3개 */
#list-memo .thumbnail,
.cover-memo .thumbnail{
  position: relative !important;          /* 기준점 */
  padding-right: 22px !important;         /* 화살표 자리 확보 */
}

#list-memo .thumbnail::before,
.cover-memo .thumbnail::before{
  content: "‹‹‹";                         /* 원하는 기호로 바꿔도 됨 */
  position: absolute;
  right: 10px;                            /* 오른쪽 padding 10 */
  bottom: -16px;                           /* 점선 위치에 맞춰 미세조정 */
  font-size: 17pt;                         /* 작게 */
  /* font-weight: 700;    bold */
  letter-spacing: -2px;                   /* 3개 촘촘하게 */
  color: rgba(120, 90, 60, 0.7);          /* 점선색 톤 */
  pointer-events: none;
  z-index: 2;                             /* 점선 위로 */
}








/* new아이콘 변경 */
/* ===== NEW 아이콘을 ✦ 로 교체 (모든 리스트/커버 타입) ===== */

/* 0) 리스트 영역의 NEW 아이콘 이미지 숨김(모든 타입 공통) */
#list-basic  img[src*="new_ico"],
#list-basic2  img[src*="new_ico"],
#list-memo   img[src*="new_ico"],
#list-memo2   img[src*="new_ico"],
#list-gallery img[src*="new_ico"],
#list-gallery2 img[src*="new_ico"],
#list-summary img[src*="new_ico"],
#list-summary2 img[src*="new_ico"],
#list-dday   img[src*="new_ico"],
.cover-basic  img[src*="new_ico"],
.cover-memo   img[src*="new_ico"],
.cover-gallery img[src*="new_ico"],
.cover-summary img[src*="new_ico"],
.cover-dday   img[src*="new_ico"] {
  display: none !important;
}

/* 1) 목록형(list-basic) */
#list-basic .list-item:has(img[src*="new_ico"]) .list-title::after,
.cover-basic .list-item:has(img[src*="new_ico"]) .list-title::after {
  content: " ✦";
  margin-left: 4px;
  font-size: 14pt;
  color: var(--point2-color);
}

/* 1) 목록형(list-basic2) */
#list-basic2 .list-item:has(img[src*="new_ico"]) .list-title::after,
.cover-basic2 .list-item:has(img[src*="new_ico"]) .list-title::after {
  content: " ✦";
  margin-left: 4px;
  font-size: 14pt;
  color: var(--point2-color);
}

/* 2) 메모형(list-memo) */
#list-memo .list-item:has(img[src*="new_ico"]) .thumbnail-title::after,
.cover-memo .list-item:has(img[src*="new_ico"]) .thumbnail-title::after {
  content: " ✦";
  margin-left: 4px;
  font-size: 14pt;
  color: var(--point2-color);
}

/* 2) 메모형(list-memo2) */
#list-memo2 .list-item:has(img[src*="new_ico"]) .thumbnail-title::after,
.cover-memo2 .list-item:has(img[src*="new_ico"]) .thumbnail-title::after {
  content: " ✦";
  margin-left: 4px;
  font-size: 14pt;
  color: var(--point2-color);
}

/* 3) 갤러리형(list-gallery) */
#list-gallery .list-item:has(img[src*="new_ico"]) .thumbnail-title::after,
#cover-gallery .list-item:has(img[src*="new_ico"]) .thumbnail-title::after,
.cover-gallery .list-item:has(img[src*="new_ico"]) .thumbnail-title::after {
  content: " ✦";
  margin-left: 4px;
  font-size: 14pt;
  color: var(--point2-color);
}

/* 3) 갤러리형(list-gallery2) */
#list-gallery2 .list-item:has(img[src*="new_ico"]) .thumbnail-title::after,
#cover-gallery2 .list-item:has(img[src*="new_ico"]) .thumbnail-title::after,
.cover-gallery2 .list-item:has(img[src*="new_ico"]) .thumbnail-title::after {
  content: " ✦";
  margin-left: 4px;
  font-size: 14pt;
  color: var(--point2-color);
}

/* 4) 요약형(list-summary) */
#list-summary .list-item:has(img[src*="new_ico"]) .summary-title::after,
.cover-summary .list-item:has(img[src*="new_ico"]) .summary-title::after {
  content: " ✦";
  margin-left: 4px;
  font-size: 14pt;
  color: var(--point2-color);
}

/* 4) 요약형(list-summary2) */
#list-summary2 .list-item:has(img[src*="new_ico"]) .summary-title::after,
.cover-summary2 .list-item:has(img[src*="new_ico"]) .summary-title::after {
  /* content: " ✦"; new아이콘 */
  margin-left: 4px;
  font-size: 14pt;
  color: var(--point2-color);
}

/* 5) 디데이형(list-dday) */
#list-dday .list-item:has(img[src*="new_ico"]) .summary-title::after,
.cover-dday .list-item:has(img[src*="new_ico"]) .summary-title::after {
  content: " ✦";
  margin-left: 4px;
  font-size: 14pt;
  color: var(--point2-color);
}

/* ===== 메뉴(카테고리/메뉴 리스트) NEW 아이콘 → ✦ ===== */

/* 메뉴에 박힌 NEW 아이콘 이미지 숨김 */
.category_list img[src*="new_ico"],
.menu-list img[src*="new_ico"] {
  display: none !important;
}

/* 아이콘이 붙은 항목(링크) 뒤에 ✦ 붙이기 */
.category_list a:has(img[src*="new_ico"])::after,
.menu-list a:has(img[src*="new_ico"])::after {
  content: " ✦";
  margin-left: 3px;
  font-size: 12pt;
  color: var(--point2-color);
}


/* 글 하단 포스트버튼 영역 좋아요 오른쪽에 : 구독하기만 숨기기 */
.container_postbtn .btn_menu_toolbar{
  display: none !important;
}




/* ✅ 갤러리형 리스트 썸네일 왼쪽 위 삼각형 */
/* 1) 삼각형은 밖으로 나오게 */
#list-gallery .list-item,
#cover-gallery .list-item{
  position: relative;
  overflow: visible;
  border-radius: var(--border-radius-);
}

/* 2) ✅ 이미지는 thumbnail에서 다시 라운드로 잘라주기 */
#list-gallery .thumbnail,
#cover-gallery .thumbnail{
  overflow: hidden;
  border-radius: var(--border-radius-);
}

/* (보험) img 자체도 라운드 상속 */
#list-gallery .thumbnail img,
#cover-gallery .thumbnail img{
  border-radius: inherit;
  display: block;
}

/* 3) 삼각형(코너) */
#list-gallery .list-item::before,
#cover-gallery .list-item::before{
  content:"";
  position:absolute;
  left:-1px; top:-1px;
  width:0; height:0;
  border-top:18px solid #FFE7AE;
  border-right:18px solid transparent;
  z-index:50;
  pointer-events:none;
}

/* (선택) 접힌 그림자
#list-gallery .list-item::after,
#cover-gallery .list-item::after{
  content:"";
  position:absolute;
  left:-1px; top:-1px;
  width:0; height:0;
  border-top:18px solid rgba(0,0,0,.12);
  border-right:18px solid transparent;
  transform: translate(2px,2px);
  z-index: 49;
  pointer-events:none;
} */


/* 비밀글 밑에 점선표시 */
/* ===== 비밀글(Protected) 비밀번호 입력칸: list-memo처럼 점선 밑줄 ===== */
#protected .lock-desc input[type="password"]{
  border-bottom: 1px dashed rgba(120, 90, 60, 0.4) !important; /* list-memo 점선색 */
  border-radius: 0 !important; /* 밑줄형이라 모서리 둥글림 제거 */
  padding-bottom: 6px;         /* 밑줄과 글자 간격 */
}

/* 포커스 때도 유지(티스토리 기본 스타일이 덮는 경우 방지) */
#protected .lock-desc input[type="password"]:focus{
  border-bottom: 1px dashed rgba(120, 90, 60, 0.4) !important;
}



/* 카테고리 제목+검색어 박스 반아래 채우기 */
/* ✅ 박스 하단만 아주 옅은 배경(반 이하) 채우기 */
.category-name,
.search{
  position: relative;
  overflow: hidden; /* 아래 오버레이가 밖으로 삐져나오지 않게 */
}
/* 하단 채움 */
.category-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 40%;                 /* ← 30~45%로 취향 조절 */
  background: rgba(128, 127, 127, 0.05); /* ← 색/투명도 조절 */
  pointer-events: none;
  z-index: 0;
}
.search::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 0%;                 /* ← 30~45%로 취향 조절 */
  background: rgba(120, 90, 60, 0.04); /* ← 색/투명도 조절 */
  pointer-events: none;
  z-index: 0;
}
/* 글자/아이콘이 오버레이 위로 오게 */
.category-name > *,
.search > *{
  position: relative;
  z-index: 1;
}



/* 공지사항+글내용페이지 제목의 반아래도 채우기*/
/* ✅ 제목바: 아래쪽(약 45%)만 아주 옅게 어둡게

  /* 기본색 + 위는 투명, 아래만 살짝 어둡게(레이어 2개)
#article .article-tc,
#notice .article-title{
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,0.05) 55%,
      rgba(0,0,0,0.05) 100%
    ),
    #F5E6D3 !important;
}*/
/* (선택) 경계가 딱 싫으면 “부드럽게” 버전으로 교체 [엠보싱같음]
#article .article-tc,
#notice .article-title{
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,0.06) 100%
    ),
    #F5E6D3 !important;
}*/



/* ===== 글 하단 네임카드 '구독하기 +' 버튼 디자인 변경 ===== */
#article .tt_box_namecard .tt_btn_subscribe,
#article .tt_box_namecard .tt_btn_subscribe a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #FEF1C0 !important;  /* ✅ 배경색 */
  border: 1px solid rgba(120, 90, 60, 0.35) !important;
  border-radius: 0 !important;     /* ✅ 네모각(직사각형) */
  padding: 10px 16px !important;
  margin: 0 !important;

  color: #3b2f25 !important;
  font-weight: basic !important;
  box-shadow: none !important;
}
#article .tt_box_namecard .tt_btn_subscribe,
#article .tt_box_namecard .tt_btn_subscribe a{
  height: 20px !important;        /* 원하는 높이 */
  padding: 0 16px !important;     /* 세로 패딩 0 */
}

/* 버튼 안 글자 */
#article .tt_box_namecard .tt_btn_subscribe .tt_txt_g{
  font-size: 12pt !important;
  color: inherit !important;
}

/* hover */
#article .tt_box_namecard .tt_btn_subscribe:hover,
#article .tt_box_namecard .tt_btn_subscribe a:hover{
  filter: brightness(0.97);
}



/* 
          list-basic2 유형
                              */
/* =========================================================
   list-basic2 (또는 list-basic) : 메모지 게시판 스타일 (전체소스)
   - ba-b의 list-board2 느낌 참고
   - 큰 썸네일/미리보기 제거 → 게시판(줄 목록)처럼
   - 바깥 크림(노랑) 여백 1/2로
   - hover: #FEF8E0
   ========================================================= */

/* 0) 공통 타깃(스킨마다 list-basic2 / list-basic 둘 중 하나) */
:is(#list-basic2, #list-basic){
  /* 필요하면 페이지 여백 조정 */
}

/* 1) 메모지 판(전체 박스) */
:is(#list-basic2) .list-inner{
  background: #ffffff !important;
  border: 1px solid #7a3a2a !important;   /* 손그림 느낌의 진갈색 */
  border-radius: 21px !important;
  overflow: hidden !important;

  /* 바깥 크림색 여백(노랑) : 1/2로 (6px) */
  box-shadow:
    0 0 0 6px #F6E9BF,
    0 10px 22px rgba(0,0,0,.08) !important;

  padding: 12px 12px !important;
}

/* 2) ‘게시판처럼’ 보이게: 썸네일/미리보기/이미지 계열 제거
   - 스킨마다 클래스가 달라서 넓게 잡아둠 */
:is(#list-basic2) :is(
  .list-thumb, .thumb, .thumbnail, .thumb-wrap, .thumb_img,
  .list-summary, .summary, .list-desc, .desc, .excerpt,
  .list-content, .content, .txt, .text, .meta .image, figure
){
  display: none !important;
}

/* 스킨이 목록에서 대표이미지를 img로 바로 박는 경우(캡처처럼 크게 펼쳐짐) */
:is(#list-basic2) .list-item img{
  display: none !important;
}

/* 3) 한 줄(행) 스타일: 점선 + hover 배경 */
:is(#list-basic2) .list-item{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  margin: 0 !important;
  padding: 14px 12px !important;

  border-bottom: 2px dashed rgba(201, 176, 122, .95) !important; /* 굵은 점선(밝은 갈색) */
  transition: background-color .15s ease !important;
}

:is(#list-basic2) .list-item:last-child{
  border-bottom: 0 !important;
}

:is(#list-basic2) .list-item:hover{
  background: #FFFDE6 !important;  /* #FEF8E0 원래색 */
}

/* 4) 내부 정렬: 제목 왼쪽, 날짜 오른쪽
   - list-td가 없는 스킨도 있어서 둘 다 대응 */
:is(#list-basic2) :is(.list-td, .list-item){
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

/* 5) 제목 */
:is(#list-basic2) .list-title{
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  font-weight: 500 !important;
  color: #3b2a22 !important;
  text-decoration: none !important;
}

/* 제목 링크에 밑줄/굵기 방지 */
:is(#list-basic2) .list-title a{
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit !important;
}

/* 6) 날짜(오른쪽 끝) */
:is(#list-basic2) .list-date{
  white-space: nowrap !important;
  font-size: 15px !important;
  color: rgba(59, 42, 34, .65) !important;
}

/* 7) 비밀글 표시: 제목 맨앞 자물쇠
   - 스킨에서 비밀글 행에 .list-lock 같은 클래스가 붙는 경우를 가정 */
:is(#list-basic2) .list-lock .list-title::before{
  content: "🔒 " !important;
  color: #C7A383 !important;
}

/* 8) 모바일에서 살짝 압축 */
@media (max-width: 640px){
  :is(#list-basic2) .list-inner{
    padding: 10px 10px !important;
  }
  :is(#list-basic2) .list-item{
    padding: 12px 10px !important;
  }
}
/*
           수정
                          */
/* ===== list-basic2 메모지 게시판 : 요청 수정 4종 ===== */

/* 1) 갈색 테두리 박스 width 90% + 카테고리 박스에서 5px 아래로 */
:is(#list-basic2) .list-inner{
  width: 97% !important;
  margin: 5px auto 0 !important;   /* 위 5px 아래로 + 가운데 정렬 */
  padding: 0 !important;           /* ✅ hover 배경이 테두리까지 꽉 차게 */
  box-sizing: border-box !important;
}

/* 2) 행 hover 배경이 테두리에 맞게 꽉 차도록(좌우 빈틈 제거) */
:is(#list-basic2) .list-item{
  width: 100% !important;
  padding: 14px 16px !important;   /* 안쪽 여백은 행에서 처리 */
  box-sizing: border-box !important;
}

/* 3) 날짜를 “맨 오른쪽 고정” (항상 우측 끝) */
:is(#list-basic2) .list-td{
  width: 100% !important;
}

:is(#list-basic2) .list-date{
  margin-left: auto !important;    /* ✅ 오른쪽 끝으로 밀기 */
  flex: 0 0 auto !important;       /* 줄어들지 않게 */
  text-align: right !important;
  min-width: 86px !important;      /* 필요하면 70~110 사이로 조절 */
}

/* (선택) 제목이 길어도 날짜를 밀어내지 않게 */
:is(#list-basic2) .list-title{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* 4) hover가 모서리도 자연스럽게(overflow hidden이 클리핑) */
:is(#list-basic2) .list-inner{
  overflow: hidden !important;
}
/* 갈색선 박스(게시판) 5px 아래로 강제 이동 */
:is(#list-basic2) .list-inner{
  position: relative !important;
  top: 9px !important;
}
/* 비밀글 자물쇠를 list-basic과 동일하게(폰트어썸) */
:is(#list-basic2) .list-lock .list-title::before{
  content:"\f023" !important;
  font-family:"Font Awesome 5 Free" !important;
  font-weight:700 !important;

  color:#C7A383 !important;
  margin-right:8px !important;
}






/* 보호글(비밀글) 제목 오른쪽에 당근 이모지 넣기기
#protected .article-title{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#protected .article-title::after{
  content: "🥕" !important;
  display: inline-block;
  line-height: 1;
  margin-left: 0px;

  font-weight: 700 !important;
  letter-spacing: .04em !important;

  color: #c9b07a !important;
  background: none !important;
} */
/* 보호글(비밀글) 제목 오른쪽에 당근넣기, 이모지대신 당근 이미지로 */
#protected .article-title{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 비밀번호 입력페이지에서 제목 오른쪽에 당근보이게 
#protected .secret-title-text::after{
  content: "" !important;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("https://tistory1.daumcdn.net/tistory/8476792/skin/images/carrot.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 8px;
}
*/


/* 디데이형 제목 - 비스듬한 배경 */
#list-dday .summary-title{
  position: relative;
  z-index: 1;
  padding: 8px 16px;
  font-weight: 700;
}
/* 배경 직사각형 */
#list-dday .summary-title::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(197, 170, 140, 0.55); /* 흐린 갈색 */
  transform: skewX(-10deg);              /* ← 왼쪽 아래로 기울기 */
  z-index: -1;
  border-radius: 4px;
}




/* list-memo2 5px 아래로 강제 이동 */
:is(#list-memo2) .list-inner{
  position: relative !important;
  top: 9px !important;
}
/* =========================================================
   list-memo2 : 한줄 알림 pill (최종/통짜)
   - 왼쪽 40px: 일반글 ୨୧ / 비밀글(.list-lock) 자물쇠(FA)
   - 가운데: 제목(길면 ...), NEW 표시(list-basic/list-basic2 방식: ✦)
   - 오른쪽 끝: 날짜 고정
   - 오른쪽 회색 메타/요약/기타 텍스트 전부 제거(강제)
   - hover: 살짝 아래 + 탄력
   - 글자크기: 제목/날짜 12pt
   ========================================================= */

/* 리스트 컨테이너 */
#list-memo2 .list-inner,
.cover-memo2 .list-inner{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  width: 97% !important;
  margin: 0 auto !important; /* 가운데 정렬 */
  box-sizing: border-box !important;
}

/* 한 줄 pill */
#list-memo2 .list-item,
.cover-memo2 .list-item{
  position:relative !important;
  display:flex !important;
  align-items:center !important;

  border-radius:32px !important;
  /* 원래 그림자
  box-shadow:0 2px 6px rgba(0,0,0,0.15) !important; */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.08),   /* 아래 기본 그림자 */
    0 4px 10px rgba(0,0,0,0.06),  /* 퍼지는 그림자 */
    inset 0 1px 0 rgba(255,255,255,0.6),  /* 위쪽 하이라이트 */
    inset 0 -2px 3px rgba(0,0,0,0.05) !important; /* 안쪽 음영 */
    

  /* 왼쪽 40px만 다른 색 */
  background:linear-gradient(to right, #f2cbb7 0 40px, #f5e6d3 40px 100%) !important;

  padding:7px 14px 7px 52px !important; /* list-memo2 한줄 세로길이 늘리기.. 첫번째,세번째꺼만 */
  text-decoration:none !important;

  transform:translateY(0);
  will-change:transform;
  transition:transform 0.42s cubic-bezier(.34, 1.56, .64, 1);
}


#list-memo2 .list-item:hover,
.cover-memo2 .list-item:hover{
  transform:translateY(4px); /* 마우스오버하면 위로 올리려면 -4px하면 된다 */
}

/* 왼쪽 40px 표시: 일반글 = ୨୧ */
#list-memo2 .list-item::before,
.cover-memo2 .list-item::before{
  content:"୨୧";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  text-align:center;

  color:#834238;
  line-height:1.1;
  font-size:12pt;

  /* ୨୧ 깨짐(9e처럼) 방지용: 심볼 지원 폰트 우선 */
  font-family: "Segoe UI Symbol","Noto Sans Symbols 2","Apple Color Emoji","Nadeuri",sans-serif;
  font-weight:normal;
}

/* 비밀글이면 ୨୧ → 자물쇠(list-basic에서 쓰던 FA lock) */
#list-memo2 .list-item.list-lock::before,
.cover-memo2 .list-item.list-lock::before{
  content:"\f023";
  font-family:"Font Awesome 5 Free";
  font-weight:700;
  color:#834238;
}

/* ---------------------------------------------------------
   ✅ 회색글(메타/요약/기타) 완전 제거 핵심:
   list-item 안 요소를 기본 전부 숨기고,
   필요한 것(제목/날짜)만 다시 켬
   --------------------------------------------------------- */

/* 1) list-item 내부 요소 전부 숨김 */
#list-memo2 .list-item * ,
.cover-memo2 .list-item *{
  display:none !important;
}

/* 2) 구조는 살려야 해서 thumbnail / thumbnail-info는 다시 켬 */
#list-memo2 .list-item .thumbnail,
.cover-memo2 .list-item .thumbnail{
  display: contents !important; /* 납작하게 */
}

#list-memo2 .list-item .thumbnail-info,
.cover-memo2 .list-item .thumbnail-info{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-width:0 !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}



/* 4) 날짜(오른쪽 끝) 다시 켬 */
#list-memo2 .list-item .thumbnail-item,
.cover-memo2 .list-item .thumbnail-item{
  display:flex !important;
  align-items:center !important;
  margin-left:auto !important;
  flex:0 0 auto !important;
}

#list-memo2 .list-item .thumbnail-date,
.cover-memo2 .list-item .thumbnail-date{
  display:inline-block !important;
  white-space:nowrap !important;

  color:#834238 !important;
  font-size:12pt !important;
  opacity:.85 !important;

  min-width:70px; /* 날짜칸 고정(원하면 조절) */
  text-align:right !important;
}


/* (선택) 스킨이 new_ico 이미지를 넣더라도 어차피 숨김 처리됨(회색요소 방지) */
#list-memo2 img[src*="new_ico"],
.cover-memo2 img[src*="new_ico"]{
  display:none !important;
}

/* (보험) 대표이미지 등 이미지류 나오면 제거 */
#list-memo2 .thumbnail img,
.cover-memo2 .thumbnail img{
  display:none !important;
}

/* 세로길이 늘리기 */
#list-memo2 .list-item::before{ line-height: 1.5 !important; }
#list-memo2 .thumbnail-title,
#list-memo2 .thumbnail-date{ line-height: 1.5 !important; }


/* 3) 제목(가운데) 다시 켬
   - NEW 아이콘 잘림 방지: 제목박스는 flex, 말줄임은 a에서 처리 */
#list-memo2 .list-item .thumbnail-title,
.cover-memo2 .list-item .thumbnail-title{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;

  flex:1 1 auto !important;
  min-width:0 !important;

  color:#834238 !important;
  font-size:12pt !important;
  font-weight:normal !important;

  overflow:visible !important;  /* ✦ 잘림 방지(핵심) */
}

/* 제목 링크에서만 ... 처리 */
#list-memo2 .list-item .thumbnail-title a,
.cover-memo2 .list-item .thumbnail-title a{
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  color:inherit !important;
  text-decoration:none !important;
  font-weight:inherit !important;
}


/* list-memo2 NEW(✦)만 흰색 */
#list-memo2 .list-item .thumbnail-title::after,
.cover-memo2 .list-item .thumbnail-title::after{
  color: #fff !important;
}

/* 두줄로 넘어가면 ...으로 잘라주기 */
/* list-memo2 제목: 1줄 고정 + … 말줄임 */
#list-memo2 .thumbnail-title a,
.cover-memo2 .thumbnail-title a{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}
/* (중요) 부모가 flex면 말줄임이 안 먹는 경우가 있어서 같이 넣어주기 */
#list-memo2 .thumbnail-title,
.cover-memo2 .thumbnail-title{
  min-width:0 !important;
}

/* list-memo2유형 자물쇠쪽 가운데정렬하기 */
#list-memo2 .list-item::before{ padding-left:2px; } /* 또는 transform: translateX(1px); */



/* list-memo2유형 리스트에서 글 하나당 세로길이 40px로 고정하기 */
/* ✅ list-memo2: 한 줄 높이 40px 고정 */
#list-memo2 .list-item,
.cover-memo2 .list-item{
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;

  /* 높이 고정하려면 세로 padding은 0으로 */
  padding: 0 14px 0 52px !important;

  display: flex !important;
  align-items: center !important;
  overflow: hidden !important; /* 혹시 넘치면 잘라내기 */
}
/* ✅ 왼쪽 40px 영역(୨୧/자물쇠)도 40px 높이에 맞춰 가운데 */
#list-memo2 .list-item::before,
.cover-memo2 .list-item::before{
  height: 40px !important;
  line-height: 40px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
/* ✅ 제목/날짜도 한 줄 높이에 맞춰 수직정렬 */
#list-memo2 .thumbnail-title,
#list-memo2 .thumbnail-date,
.cover-memo2 .thumbnail-title,
.cover-memo2 .thumbnail-date{
  line-height: 40px !important; /* 글자가 위아래로 흔들리면 도움됨 */
}


/* 꼬맨것처럼 밧금추가 만들기 */
/* ✅ list-memo2: 왼쪽 색 경계(40px)에 '실로 꼬맨' 스티치 추가 */
#list-memo2 .list-item,
.cover-memo2 .list-item{
  position: relative !important; /* 이미 있어도 OK (스티치 포지션 기준) */
}
/* 스티치 본체 */
#list-memo2 .list-item::after,
.cover-memo2 .list-item::after{
  content: "";
  position: absolute;
  left: 40px;                 /* ✅ 색이 바뀌는 지점(너가 지금 40px 쓰고 있음) */
  top: 50%;
  transform: translate(-50%, -50%);  /* 경계선 중앙에 딱 걸치게 */

  width: 7px;                /* 스티치 '띠' 두께 */
  height: 30px;               /* 스티치 길이(원하면 18~28 조절) */
  border-radius: 6px;
  /* 빗금(실) 느낌 */
  background:
    repeating-linear-gradient(
      135deg,
      rgba(165, 110, 55, 0.95) 0px,   /* 황토/갈색 실 */
      rgba(243, 163, 84, 0.836) 2px,
      rgba(255, 255, 255, 0.00) 2px,
      rgba(255, 255, 255, 0.00) 5px
    );
  /* 입체감(살짝 튀어나온 느낌) */
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.55), /* 하이라이트 */
    inset -1px -1px 0 rgba(0,0,0,0.12),     /* 음영 */
    0 2px 4px rgba(0,0,0,0.18);             /* 바깥 그림자 */

  pointer-events: none;
  z-index: 3;  /* pill 위로 */
}
/* (선택) 스티치가 너무 선명하면 투명도만 살짝 낮추기 */
#list-memo2 .list-item::after{ opacity: 0.5; }







/* 비밀글 페이지에서 제목 width 200으로 자르기 */
/* ✅ 비밀글(보호글) 페이지 제목: 최대 200px + 줄바꿈 + 항상 가운데 */
#protected .article-title{
  display:inline-block !important;
  max-width:320px !important;

  white-space:normal !important;      /* 줄바꿈 허용 */
  overflow-wrap:anywhere !important;  /* 길어도 강제 줄바꿈 */
  word-break:keep-all !important;

  align-self:center !important;       /* flex 안에서도 가운데 */
  text-align:center !important;       /* 텍스트도 가운데 */
}



/* list-basic 5px 아래로 강제 이동 */
:is(#list-basic) .list-inner{
  position: relative !important;
  top: 4px !important;
}
/* list-gallery 5px 아래로 강제 이동 */
:is(#list-gallery) .list-inner{
  position: relative !important;
  top: 4px !important;
}


/* 내용페이지의 제목 폰트 크기 변경 */
.article-title{
  font-size: 12pt !important;
}




/* ===== 답글 버튼: 8pt + 구독버튼처럼 납작 네모각 ===== */
/* ===== '답글' 버튼 최종 스타일(8pt + 테두리 없음 + 납작 + padding 2px) ===== */
.tistory-reply-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 16px !important;        /* 더 납작하게 */
  padding: 0 2px !important;      /* 좌우 padding=2 */
  margin-left: 6px !important;

  background: #F3E2B7 !important; /* 연한 갈+노랑 섞인색(원하면 바꿔도 됨) */
  border: 0 !important;           /* 테두리 없음 */
  border-radius: 0 !important;    /* 네모각 */

  color: #3b2f25 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;

  /* 글자 */
  font-size: 8pt !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  transform: none !important;     /* scale 무력화 */
}

/* 버튼 안에 span/label이 있어도 무조건 8pt로 눌러버리기 */
.tistory-reply-btn *{
  font-size: 8pt !important;
  line-height: 1 !important;
  transform: none !important;
}

/* (선택) hover 시 살짝만
.tistory-reply-btn:hover{
  filter: brightness(0.97);
} */

.tistory-reply-btn{ font-size: 8pt !important; }



/* list-memo2 유형 제목길면 자르기 */
/* list-memo2 제목: list-basic2처럼 한 줄 + ... */
#list-memo2 .list-item .thumbnail-title,
.cover-memo2 .list-item .thumbnail-title{
  /* (있다면) overflow:visible !important;  이 줄은 삭제/주석 처리 */
  flex: 1 1 auto !important;
  min-width: 0 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 제목 링크도 같이(안전빵) */
#list-memo2 .list-item .thumbnail-title a,
.cover-memo2 .list-item .thumbnail-title a{
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}




/* 나비부분 -세로정렬 가로정렬로 */
.back-link ul {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  margin: 0;
}

.back-link li {
  list-style: none;
}

.back-link svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}



/* list-gallery2 유형 */
/* =========================================
   list-gallery2 : 스케치형(테두리/별제목/그라데이션 그림자)
   - 제목은 "⭐ ~ ⭐⭐⭐⭐⭐"만 쓰는 전제 (CSS만으로 본문 카운트 불가)
   ========================================= */
/* =================================================
   list-gallery2 : 단일 이미지 + 별 오버레이 (FINAL)
   ================================================= */


/* 아래쪽에 강제여백 생기게 */
/* list-summary2 맨 아래 여백 20px */
#list-gallery2 .list-inner{
  margin-bottom: 15px !important;
}


/* 1. 한 줄에 3개 */
#list-gallery2 .list-inner{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* 2. 카드 전체 */
#list-gallery2 .list-item{
  position: relative !important;
  border: 2px solid #835E45 !important;
  overflow: hidden !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

/* 3. 대표 이미지 – 세로 길게 */
#list-gallery2 .thumbnail{
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;   /* 세로 비율 */
  overflow: hidden !important;
}

#list-gallery2 .thumbnail img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* =================================================
   ⭐ 제목(별) 영역 – 이미지 위에 덮어쓰기
   ================================================= */

#list-gallery2 .thumbnail-info{
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 15%;                      /* 이미지 하단 1/3쯤 */
  z-index: 10 !important;
  pointer-events: none !important;

  /* 제목 띠 높이 복구 */
  min-height: 50px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* 반투명 배경 */
  background: rgba(199,163,131,0.5) !important;
}


/* ⭐ 텍스트 */
#list-gallery2 .thumbnail-title{
  position: relative !important;
  z-index: 2 !important;
  font-size: 16px !important;
  letter-spacing: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #000 !important;
  white-space: nowrap !important;
}

/* =================================================
   NEW 아이콘 완전 제거
   ================================================= */

#list-gallery2 img[src*="new_ico"]{
  display: none !important;
}

#list-gallery2 .thumbnail-title::after{
  content: "" !important;
}

/* =================================================
   불필요한 정보 제거
   ================================================= */

#list-gallery2 .thumbnail-item,
#list-gallery2 .thumbnail-date,
#list-gallery2 .thumbnail-cate,
#list-gallery2 .summary,
#list-gallery2 .list-td{
  display: none !important;
}

/* =================================================
   hover 효과 제거
   ================================================= */

#list-gallery2 .list-item:hover img{
  transform: none !important;
}

/* =================================================
   반응형
   ================================================= */

@media (max-width: 900px){
  #list-gallery2 .list-inner{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 520px){
  #list-gallery2 .list-inner{
    grid-template-columns: 1fr !important;
  }
}

/* list-gallery2 5px 아래로 강제 이동 */
:is(#list-gallery2) .list-inner{
  position: relative !important;
  top: 9px !important;
}


/* list-gallery2유형 왼쪾위에 삼각형 놓기 */
/* list-gallery2 카드: 삼각형을 밖으로 빼기 */
#list-gallery2 .list-item{
  position: relative !important;
  overflow: visible !important;   /* ★ 중요 */
}
/* list-gallery2 이미지 영역은 다시 클리핑 */
#list-gallery2 .thumbnail{
  overflow: hidden !important;
}
/* list-gallery2 왼쪽 위 삼각형 */
#list-gallery2 .list-item::before{
  content:"";
  position:absolute;
  left:-3px;
  top:-3px;
  width:0;
  height:0;

  border-top:18px solid #FFE7AE;   /* 색 */
  border-right:18px solid transparent;

  z-index:50;
  pointer-events:none;
}
/* list-gallery2 삼각형 그림자 (선택) */
#list-gallery2 .list-item::after{
  content:"";
  position:absolute;
  left:-2px;
  top:-2px;
  width:0;
  height:0;

  border-top:18px solid rgba(0,0,0,.12);
  border-right:18px solid transparent;

  transform: translate(2px,2px);
  z-index:49;
  pointer-events:none;
}

/* list-gallery2 제목 – 검은 테두리 */
#list-gallery2 .thumbnail-title{
  color: #f5e6d3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.015em;

  text-shadow:
    -0.5px -0.5px 0 #6B4E3A,
     0.5px -0.5px 0 #6B4E3A,
    -0.5px  0.5px 0 #6B4E3A,
     0.5px  0.5px 0 #6B4E3A,
     0   -1px 0 #6B4E3A,
     0    1px 0 #6B4E3A,
    -1px  0   0 #6B4E3A,
     1px  0   0 #6B4E3A;
}

/* =========================================
   list-gallery2 제목: 테두리 안쪽 + 2줄 제한
   ========================================= */

#list-gallery2 .thumbnail-info{
  padding-left: 5px !important;
  padding-right: 5px !important;
  box-sizing: border-box !important;
}

#list-gallery2 .thumbnail-title{
  padding: 0 5px !important;   /* 좌우 5px */

  /* 🔥 2줄 제한 */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;  /* 기존 nowrap 해제 */

  line-height: 1.3 !important;
}







/* 카테고리메뉴의 하위 카테고리 아이콘폴더 크기 줄임 */
/* 하위 카테고리 아이콘 (Font Awesome) */
.category_list i,
.category_list .fa,
.category_list [class*="fa-"] {
  font-size: 12px !important;
}
/* 색 변하게 */
.category_list i,
.category_list .fa,
.category_list [class*="fa-"] {
  font-size: 12px !important;
  color: #C7A383 !important;   /* ← 원하는 색 */
}
.category_list li:hover i,
.category_list li:hover .fa,
.category_list li:hover [class*="fa-"] {
  color: #D2B9A2 !important;
}





/* 태그 글씨색 바꾸기 */
/* /tag 페이지 전용 */
/* 본문 태그(#★★★★★ 등) 색상 변경 */
.article-desc a[href^="/tag/"] {
    color: #D3BEDE !important;
}
.article-desc a[href^="/tag/"]:hover {
    color: #E7DBED !important; 
}



/* 글쓸 때 사각박스 안에 글씨 12pt로 조정 */
/* 티스토리 에디터 사각박스(style3) 글씨 크기 수정 */
.tt_article_useless_p_margin blockquote[data-ke-style="style3"] {
  font-size: 12pt !important;
  line-height: 1.7;
}




/* =====================================
   TISTORY 이미지 코너 액자
   - 본문(글 내용) 이미지에만 적용
   - list-memo형 리스트 점선은 건드리지 않음
   ===================================== */

:root{
  --frame-color: #7a4a2e;   /* 고동색 */
  --frame-size: 16px;      /* 코너 길이 */
  --frame-width: 2px;      /* 선 두께 */
  --frame-offset: -6px;    /* 이미지 밖으로 */
}

/* ✅ 핵심: .thumbnail 제거!
   list-memo 점선이 thumbnail의 ::before/after로 그려지는 경우가 많아서
   thumbnail을 타겟에서 빼야 점선이 유지됨 */

/* 1️⃣ 티스토리 본문 이미지 래퍼 지정 (figure만) */
.tt_article_useless_p_margin figure,
figure[data-ke-type]{
  position: relative;
}

/* 2️⃣ 왼쪽 위 ┌ */
.tt_article_useless_p_margin figure::before,
figure[data-ke-type]::before{
  content:"";
  position:absolute;
  top: var(--frame-offset);
  left: var(--frame-offset);
  width: var(--frame-size);
  height: var(--frame-size);
  border-top: var(--frame-width) solid var(--frame-color);
  border-left: var(--frame-width) solid var(--frame-color);
  z-index: 10;
  pointer-events:none;
}

/* 3️⃣ 오른쪽 아래 ┘ */
.tt_article_useless_p_margin figure::after,
figure[data-ke-type]::after{
  content:"";
  position:absolute;
  bottom: var(--frame-offset);
  right: var(--frame-offset);
  width: var(--frame-size);
  height: var(--frame-size);
  border-bottom: var(--frame-width) solid var(--frame-color);
  border-right: var(--frame-width) solid var(--frame-color);
  z-index: 10;
  pointer-events:none;
}

/* 4️⃣ 오른쪽 위 ┐ (span 사용 시) */
.tt_article_useless_p_margin figure span.frame-tr,
figure[data-ke-type] span.frame-tr{
  position:absolute;
  top: var(--frame-offset);
  right: var(--frame-offset);
  width: var(--frame-size);
  height: var(--frame-size);
  border-top: var(--frame-width) solid var(--frame-color);
  border-right: var(--frame-width) solid var(--frame-color);
  z-index:10;
  pointer-events:none;
}

/* 5️⃣ 왼쪽 아래 └ (span 사용 시) */
.tt_article_useless_p_margin figure span.frame-bl,
figure[data-ke-type] span.frame-bl{
  position:absolute;
  bottom: var(--frame-offset);
  left: var(--frame-offset);
  width: var(--frame-size);
  height: var(--frame-size);
  border-bottom: var(--frame-width) solid var(--frame-color);
  border-left: var(--frame-width) solid var(--frame-color);
  z-index:10;
  pointer-events:none;
}

/* =====================================
   (선택) list-memo 안전장치:
   - 혹시 figure가 list-memo 안에 들어가는 스킨이면 그때만 액자 제거
   - 점선은 thumbnail이 담당하니 건드리지 않음
   ===================================== */
#list-memo figure[data-ke-type]::before,
#list-memo figure[data-ke-type]::after,
#list-memo .tt_article_useless_p_margin figure::before,
#list-memo .tt_article_useless_p_margin figure::after{
  border: 0 !important;
}






/* =====================================
   ✅ 더보기 버튼은 짧게 / 내용만 94% / 서로 딱 붙게
   ===================================== */

:root{
  --ml-border: rgba(122, 74, 46, 0.45);  /* 고동색 */
  --ml-radius: 4px;                      /* 둥근값 적게 */
  --ml-text: 12pt;
}

/* 1) 더보기 전체 래퍼: 내용(94%)을 가운데로 */
[data-ke-type="moreLess"]{
  width: 97% !important;          /* ✅ 내용 폭 기준 */
  margin: 10px auto !important;   /* 가운데 */
}

/* 2) 더보기 버튼: 글자만큼만(짧게) */
[data-ke-type="moreLess"] .btn-toggle-moreless{
  display: inline-flex !important;   /* ✅ 내용만큼 폭 */
  width: auto !important;            /* ✅ 핵심: 100% 금지 */
  max-width: 100% !important;

  align-items: center !important;
  justify-content: flex-start !important;

  padding: 4px 8px !important;
  box-sizing: border-box !important;

  font-size: var(--ml-text) !important;
  line-height: 1.2 !important;
  font-family: 'Nadeuri', sans-serif !important;

  color: #3b2f25 !important;
  background: #ffffff !important;

  border: 1px solid var(--ml-border) !important;
  border-radius: var(--ml-radius) !important;

  cursor: pointer !important;

  /* ✅ 아래 내용 박스랑 딱 붙이기 */
  margin: 0 !important;
}

/* 버튼 왼쪽 ▼ 아이콘 */
[data-ke-type="moreLess"] .btn-toggle-moreless::before{
  font-size: var(--ml-text) !important;
  margin-right: 6px !important;
  color: rgba(122, 74, 46, 0.9) !important;
}

/* 3) 펼친 내용 박스: 94% 폭(=부모폭) + 버튼과 딱 붙게 */
div[data-ke-type="moreLess"].open .moreless-content{
  width: 100% !important;        /* 부모(94%) 꽉 */
  box-sizing: border-box !important;

  margin: 0 !important;          /* ✅ 버튼과 내용 사이 간격 0 */
  padding: 12px !important;

  border: 1px solid rgba(122, 74, 46, 0.25) !important;
  border-radius: var(--ml-radius) !important;

  background: #fff !important;

  font-size: var(--ml-text) !important;
  line-height: 1.6 !important;
  font-family: 'Nadeuri', sans-serif !important;
}

/* 4) 혹시 기본 스타일이 위아래 여백을 넣는 경우 강제 제거 */
[data-ke-type="moreLess"] .moreless-content *{
  margin-top: 0 !important;
}

/* 더보기 펼친 내용 글씨색: 검은색 + 굵기 제거
div[data-ke-type="moreLess"].open .moreless-content{
  color: #000 !important;
  font-weight: normal !important;
} */



/* 말풍선 */
/* li 안에서 아이콘들이 가로로 나란히 */
.butterfly-item.secret-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 추가한 왼쪽 아이콘 버튼 */
.pw-icon{
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pw-icon svg{
  width: 22px;
  height: 22px;
  display: block;
  fill: #a5a5a5;
}

/* 말풍선: 엠보싱 + 글자길이만큼(최대 250) */
.pw-bubble[hidden]{ display:none !important; }

.pw-bubble{
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);   /* 🔥 항상 SVG 위쪽에 고정 */
  max-width: 250px;
  width: max-content;

  padding: 8px 12px;
  border-radius: 14px;

  background: linear-gradient(180deg, #ffffff, #eeeeee);
  border: 1px solid rgba(0,0,0,.12);

  /* 3mm 정도 퍼짐 그림자 */
/* ✅ (중요) 셀렉터 없이 box-shadow: 만 있으면 그 아래 CSS가 전부 무시됨.
   삭제 대신 유틸 클래스로 살려둠 (필요한 곳에 class="emboss-shadow"로 사용 가능) */
.emboss-shadow{
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.85),
    inset -1px -1px 2px rgba(0,0,0,.10),
    0 3px 8px rgba(0,0,0,.18);
}

  /* ✅ 줄바꿈 핵심 */
  white-space: normal;        /* 줄바꿈 허용 */
  word-break: break-word;     /* 긴 단어도 강제 줄바꿈 */
  overflow-wrap: break-word;

  /* SVG 안 가리게 */
  z-index: 10;
}


.pw-bubble-text{
  font-size: 12pt;            /* ✅ 요청한 12pt */
  line-height: 1.4;
  color: #333;
  display: block;
  white-space: pre-wrap;   /* 🔥 엔터 줄바꿈 핵심 */
  word-break: break-word;
}






/* =========================================================
   list-summary2 FINAL (2열 + 노치 날짜 + 스티커 랜덤)
   ========================================================= */

/* list-summary2 5px 아래로 강제 이동 */
:is(#list-summary2) .list-inner{
  position: relative !important;
  top: 12px !important;
}
/* 아래쪽에 강제여백 생기게 */
/* list-summary2 맨 아래 여백 20px */
#list-summary2 .list-inner{
  margin-bottom: 20px !important;
}



#list-summary2{
  --ls2-border:#7a3a2a;             /* 고동색 */
  --ls2-bw: 1px;                    /* 테두리 얇게 */
  --ls2-radius: 20px;              /* radius 동일 */
  --ls2-pad: 16px;                 /* 사방 padding */
  --ls2-text: rgba(177,140,78,.90);
  --ls2-tag-bg:#F0DFBF;
}

/* ✅ list-memo 느낌: flex-wrap 2열 (행 높이 공유 문제 없음) */
/* 개체당 거리조절 */
#list-summary2 .list-inner{
  display:flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;                 /* ✅ 개체 사이 간격 */
  align-items:flex-start !important;
}
/* 개체당 상하거리 조절 */
#list-summary2 .list-inner{
  row-gap: 30px !important;
  column-gap: 20px !important;
}

/* 2열 너비 */
#list-summary2 .list-item{
  width: calc(50% - 14px) !important;   /* gap 28 기준 */
}

@media (max-width:800px){
  #list-summary2 .list-item{ width: 100% !important; }
  #list-summary2 .list-inner{ gap: 18px !important; }
}

/* 불필요 요소 숨김 */
#list-summary2 .list-td,
#list-summary2 .thumbnail-info,
#list-summary2 .thumbnail-item{
  display:none !important;
}

/* 카드 */
#list-summary2 .list-item{
  position: relative !important;
  display:flex !important;
  flex-direction: column !important;
  gap: 10px !important;

  padding: var(--ls2-pad) !important;
  background: var(--article-color) !important;

  border: var(--ls2-bw) solid var(--ls2-border) !important;  /* ✅ 한 줄 */
  border-radius: var(--ls2-radius) !important;               /* ✅ 동일 */

  box-shadow: none !important;
  text-decoration:none !important;
  overflow: visible !important; /* 날짜가 위로 나와도 OK */
  min-width:0 !important;
}

/* summary 위, thumbnail 아래 */
#list-summary2 .summary{ order:1 !important; position:relative; }
#list-summary2 .thumbnail{ order:2 !important; position:relative; }

/* ✅ 텍스트가 항상 위(스티커/마스크에 안 가림) */
#list-summary2 .summary,
#list-summary2 .summary-desc,
#list-summary2 .summary-title,
#list-summary2 .summary-date{
  position: relative !important;
  z-index: 10 !important;
}

/* =========================
   날짜 노치(테두리 끊김)
   - 테두리 상단만 “끊기고” 날짜가 들어가는 느낌
   ========================= */
#list-summary2 .summary-date{
  position:absolute !important;
  top: 0 !important;
  left: 50% !important;                       /* 가운데 */
  transform: translate(-50%, -55%) !important;

  font-size: 11pt !important;                 /* ✅ 11pt */
  font-weight: 700 !important;
  line-height: 1 !important;
  color:#000 !important;

  padding: 2px 10px !important;
  background: var(--article-color) !important;
  border-radius: 999px !important;
}

/* 날짜 뒤에서 “테두리만” 가리는 마스크(노치) */
#list-summary2 .summary-date::before{
  content:"";
  position:absolute;
  left:-14px;
  right:-14px;
  top: 50%;
  transform: translateY(-50%);
  height: calc(var(--ls2-bw) + 4px);
  background: var(--article-color);
  z-index: -1;
}

/* 날짜랑 내용 겹침 방지 */
#list-summary2 .summary{
  padding-top: 10px !important;
  min-width:0 !important;
}

/* 본문 */
#list-summary2 .summary-desc{
  color: var(--ls2-text) !important;
  line-height: 1.55 !important;

  display:-webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow:hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
}

/* 그림 없을 때: 4줄 */
#list-summary2 .list-item.ls2-no-thumb .summary-desc{
  -webkit-line-clamp: 4 !important;
}

/* 그림 있을 때: 1줄 */
#list-summary2 .list-item.ls2-has-thumb .summary-desc{
  -webkit-line-clamp: 1 !important;
}

/* 썸네일 */
#list-summary2 .thumbnail{
  display:none !important;
  width:100% !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 16px !important;
  overflow:hidden !important;
  background: rgba(0,0,0,.03) !important;
}
#list-summary2 .thumbnail img{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  display:block !important;
  border-radius: inherit !important;
}
#list-summary2 .list-item.ls2-has-thumb .thumbnail{
  display:block !important;
}

/* 해시태그 바(= summary-title을 태그 바처럼 사용) */
#list-summary2 .summary-title{
  display:none !important;
  background: rgba(240,223,191,.55) !important; /* ✅ 더 연하게 */
  border: 2px dotted #D0AB9D !important; /* ✅ 진한 점선 */
  border-radius: 14px !important;
  padding: 6px 10px !important;

  color: rgba(59,47,37,.95) !important;
  font-size: 11pt !important;
  line-height: 1.2 !important;

  white-space: nowrap !important;
  overflow:hidden !important;
  text-overflow: ellipsis !important;
}

/* #테스트 보이게 */
#list-summary2 .summary-title{
  display:none;
}
#list-summary2 .list-item.has-ls2-tag .summary-title{
  display:block !important;
}

/* 해시태그 있을 때만 + 그림 없을 때만 */
#list-summary2 .list-item.has-ls2-tag.ls2-no-thumb .summary-title{
  display:block !important;
}

/* =========================
   스티커(우상단, -30deg)
   ========================= */
#list-summary2 .ls2-sticker{
  position:absolute !important;
  top: 10px !important;
  right: 15px !important;                /* ✅ 오른쪽 20 */
  width: 90px !important;
  height: 90px !important;   /* ✅ 가로세로 동일하게 고정 */
  object-fit: contain !important; /* 이미지 비율 유지 */

  transform: rotate(-30deg) !important;
  transform-origin: right top !important;

  z-index: 5 !important;                 /* ✅ 텍스트(10)보다 낮게 */
  pointer-events:none !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.16));
}

/* 스티커가 있어도 글이 안 가리게 우측 여백만 */
#list-summary2 .list-item.ls2-has-sticker .summary{
  padding-right: 78px !important;
}

/* =========================
   비밀글: 빗금 + 우하단 자물쇠
   ========================= */
#list-summary2 .list-item.list-lock{
  background:
    repeating-linear-gradient(
      135deg,
      rgba(199,163,131,0.18) 0px,
      rgba(199,163,131,0.18) 6px,
      transparent 6px,
      transparent 14px
    ),
    #fffdf8 !important;
}


#list-summary2 .list-item.list-lock .thumbnail{
  display:none !important;
}

#list-summary2 .list-item.list-lock::after{
  content:"\f023";
  font-family:"Font Awesome 5 Free";
  font-weight:700;

  position:absolute;
  right: 15px;
  bottom: 15px;

  width: 44px;
  height: 44px;
  border-radius: 14px;

  /*  background: #FEF1C0;  자물쇠 배경부분 그냥 색깔 */
  /* background: rgba(254,241,192,0.6) !important; 반투명하게 비밀글 자물쇠 배경부분*/
  /* 유리같이
  background: rgba(254,241,192,0.35) !important;
backdrop-filter: blur(2px); */
  border: 2px dotted rgba(122,58,42,.55);

  display:flex;
  align-items:center;
  justify-content:center;

  color: rgba(122,58,42,.92);
}
/* 자물쇠 배경부분 유리같이 */
#list-summary2 .list-item.list-lock::after{
  background: rgba(254,241,192,0.55) !important;
  backdrop-filter: blur(2px);
}
/* ===========================
   list-summary2 : 썸네일 더 꽉차게 + 날짜 노치(ddd.jpg 스타일)
   =========================== */

/* ✅ 그림 있는 글: 이미지 위 여백 줄이고, 카드 안을 더 꽉 채우기 */
#list-summary2 .list-item.ls2-has-thumb{
  /* 카드 패딩은 유지하되, 아래에서 썸네일이 패딩을 “먹고 들어가게” 처리 */
}

/* ✅ 썸네일을 카드 패딩 경계까지 더 붙게(여백 줄이기) */
#list-summary2 .list-item.ls2-has-thumb .thumbnail{
  display:block !important;

  /* 기존: margin-top이 있거나 padding 영향으로 작아 보이면 아래처럼 당겨서 꽉 차게 */
  margin-top: 4px !important;

  /* ✅ 핵심: 썸네일을 패딩 영역까지 확장(더 크게 보이게) */
  width: calc(100% + (var(--ls2-pad) * 2)) !important;
  margin-left: calc(var(--ls2-pad) * -1) !important;
  margin-right: calc(var(--ls2-pad) * -1) !important;

  /* 아래쪽도 더 꽉 차게 하고 싶으면 주석 해제 */
  /* margin-bottom: calc(var(--ls2-pad) * -1) !important; */

  border-radius: 16px !important;
  overflow:hidden !important;

  aspect-ratio: 16 / 10 !important;   /* 필요하면 4/3으로 바꿔도 됨 */
  background: rgba(0,0,0,.03) !important;
}

/* 이미지 자체는 꽉 채우기 */
#list-summary2 .list-item.ls2-has-thumb .thumbnail img{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  display:block !important;
  border-radius: inherit !important;
}

/* ===========================
   날짜: ddd.jpg처럼 “상단 테두리만 끊기고” 날짜가 끼어있게
   =========================== */

/* 날짜를 상단 중앙에 배치(원하면 left 값으로 왼쪽도 가능) */
#list-summary2 .summary-date{
  position:absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translate(-50%, -55%) !important;

  font-size: 13pt !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  color:rgb(65, 36, 4) !important;
  background: #fff !important;        /* ✅ 배경 흰색(pill) */
  padding: 2px 10px !important;
  border-radius: 999px !important;

  z-index: 20 !important;
}

/* ✅ 날짜 뒤에 테두리를 “가리는” 마스크
   (테두리 자체를 자르는 건 CSS로 어렵고, 배경으로 덮어서 ‘끊긴 듯’ 보이게 하는 방식) */
#list-summary2 .summary-date::before{
  content:"";
  position:absolute;
  left:-16px;
  right:-16px;
  top: 50%;
  transform: translateY(-50%);

  /* 테두리 두께보다 조금 크게 덮어야 확실히 끊김 */
  height: calc(var(--ls2-bw) + 6px) !important;

  background: #fff !important;        /* ✅ 카드 배경이 흰색이 아니라면 var(--article-color)로 바꿔 */
  z-index: -1;
}


/* 이미지 둥글게X */
#list-summary2 .list-item.ls2-has-thumb .thumbnail{
  border-radius: 0 !important;
  overflow: hidden !important;

  /* ✅ 가로만 카드 padding만큼 확장 */
  width: calc(100% + (var(--ls2-pad) * 2)) !important;
  margin-left: calc(var(--ls2-pad) * -1) !important;
  margin-right: calc(var(--ls2-pad) * -1) !important;

  /* ❌ 위/아래는 건드리지 않음 */
  margin-top: 4px !important;
}

#list-summary2 .list-item.ls2-has-thumb .thumbnail img{
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* 내용과 이미지간의 간격padding 줄이기 */
#list-summary2 .list-item{
  gap: 2px !important;   /* 10 → 4 */
}

/* 세로 최소길이 160px로 고정하기 */
/* 카드 최소 160px */
#list-summary2 .list-item{
  min-height: 160px !important;
}
/* summary가 남는 공간을 채우게 */
#list-summary2 .summary{
  flex: 1 1 auto !important;
  display:flex !important;
  flex-direction: column !important;
}
/* ✅ 핵심: 4줄 clamp 제거하고, 대신 남는 공간만큼 보여주기 */
/* 그림 없는 글: 본문 5줄 고정 */
#list-summary2 .list-item.ls2-no-thumb .summary-desc{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;  /* ✅ 5줄 */
  overflow: hidden !important;
}




/* #테스트 입력시 이미지 오른쪽 아래에 위치하기 */
/* =========================================
   list-summary2: #테스트(해시태그 바) 이미지 우하단 겹치기
   ========================================= */

/* 카드 기준 */
#list-summary2 .list-item{
  position: relative !important;
}

/* summary를 normal flow에서 빼기 */
#list-summary2 .summary{
  position: static !important;
}

/* 🔥 이미지 우하단에 고정 */
#list-summary2 .list-item.ls2-has-thumb.has-ls2-tag .summary-title{
  position: absolute !important;

  right: 12px !important;   /* 이미지 오른쪽 여백 */
  bottom: 22px !important;  /* 이미지 아래 여백 */

  z-index: 10000 !important;

/* #테스트 부분 점선,실선 조정 */
  background: rgba(246,240,230,0.55) !important;
  border: 2px dotted #D0AB9D !important; /* dotted 2px였음 */
  border-radius: 14px !important;

  padding: 5px 4px 5px 11px !important; /* 위 → 오른쪽 → 아래 → 왼쪽 */

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  max-width: calc(100% - 40px) !important;
}
/* #⭐ 카드만 바깥 갈색 테두리 두껍게 (현재는 ::before가 테두리 역할) */
#list-summary2 .list-item.has-star-border::before{
  box-shadow: 0 0 0 2px #5b3a29 !important; /* 기존 1px → 3px (즉 +2px) */
}
#list-summary2 .list-item.has-star-border{
  box-shadow:
    inset 0 0 0 9px #f6f0e6,   /* 기존 안쪽 아이보리 유지 */
    0 8px 11px rgba(73, 73, 73, 0.1),   /* 아래 그림자 진하게 */
    0 14px 16px rgba(0,0,0,0.18) !important; /* 퍼지는 그림자 */
}

/* ✅ #테스트 옆 NEW/✦ 제거 */
#list-summary2 .list-item.ls2-has-thumb.has-ls2-tag .summary-title::after{
  content: "" !important;
}
#list-summary2 .list-item.ls2-has-thumb.has-ls2-tag .summary-title img[src*="new_ico"]{
  display:none !important;
}

/* ✅ 스티커 때문에 생긴 '오른쪽 빈 공간' 제거 */
#list-summary2 .list-item.ls2-has-sticker .summary{
  padding-right: 0 !important;   /* 빈 공간 없애기 */
}
/* ===============================
   list-summary2 스티커 최상단 고정
   =============================== */
#list-summary2 .list-item{
  overflow: visible !important;
}

#list-summary2 .ls2-sticker{
  position: absolute !important;
  z-index: 50 !important;
}

/* === 2중 테두리 (이미지 전용) === */
/* ======================================
   list-summary2 카드 전체 2중 테두리
   바깥: 고동색
   안쪽: 두꺼운 아이보리
   ====================================== */

#list-summary2 .list-item{
  position: relative !important;

  /* 바깥 고동색 */
  border: 1px solid #5b3a29 !important;

  /* 안쪽 아이보리 띠 */
  box-shadow: inset 0 0 0 9px #f6f0e6 !important;
  border-radius: 25px !important;
  box-sizing: border-box !important;
}

/* ================================
   list-summary2 날짜 위치 + 날짜 부분만 인셋(아이보리) 제거
   (b2 맨 아래에 붙여넣기)
   ================================ */
/* 1) 날짜를 더 왼쪽으로 */
/* 날짜 양옆 여백 줄이기 */
#list-summary2 .summary-date{
  left: 25% !important;
  top: 0 !important;
  transform: translate(-50%, -55%) !important;

  padding: 1px 1px !important;  /* ← 이게 핵심 */

  background: transparent !important;
  z-index: 10050 !important;
}

/* 비밀글 스티커 숨김 */
#list-summary2 .list-lock .ls2-sticker,
#list-summary2 .list-item.list-lock .ls2-sticker{
  display:none !important;
}


/* 실제 썸네일이 있으면 대체 이미지 숨김..... 이미지 없으면 대체이미지 관련 */
.thumbnail .thumb-real + .thumb-fallback {
  display: none !important;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 개체마다 은은한 그림자주기 */
#list-summary2 .list-item{
  box-shadow:
    inset 0 0 0 9px #f6f0e6,
    0 3px 6px rgba(0, 0, 0, 0.123) !important;
}


/* 이미지 첨부시 아래 각진거 없애기 */
/* ================================
   list-summary2: 테두리 끊김(흰 틈) 해결
   - 갈색 바깥선만 오버레이로 "최상단"
   - 아이보리 인셋은 list-item 자체 inset으로 "뒤에"
   ================================ */

#list-summary2 .list-item{
  /* 기존 border/box-shadow가 뭐였든 '정리' */
  position: relative !important;
  border: 1px solid transparent !important; /* 두께는 유지, 색만 투명 */
  border-radius: 25px !important; /* 고동색 젤 바깥 테두리 */

  /* ✅ 아이보리 두꺼운 테두리는 여기서 유지(뒤에 깔림) */
  box-shadow:
    inset 0 0 0 9px #f6f0e6,
  0 3px 6px rgba(0, 0, 0, 0.123) !important;
}

/* ✅ 갈색 바깥 테두리만 위에 덮어서(끊김 방지) */
#list-summary2 .list-item::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  /* 텍스트(z-index:10)보다 아래, 이미지보단 위로 가게 */
  z-index: 9;

  /* 갈색 1px만 */
  box-shadow: 0 0 0 1px #5b3a29;
}


/* ✅ list-summary2 비밀글일 때 #테스트 테두리 실선 */
#list-summary2 .list-item.list-lock .summary-title{
  border-style: solid !important;
  border-width: 0.5px !important;   /* ← 여기서 굵기 줄이기 */
  border-color: #805842 !important; /* ← 여기 색 바꾸기 흐린색은:#DCC0B6 */
}


/* mission 개체 왼쪽 아래 7 day+30 day */
/* ✅ Mission 연속뱃지(7일/30일) : 글 카드 왼쪽 아래 */
#list-summary2 .mission-streak-badge{
  position: absolute !important;

  left: -25px !important;    /* ← 좌우 위치 여기서 수정 */
  bottom: -25px !important;  /* ← 상하 위치 여기서 수정 */

  width: 175px !important;   /* ← 크기 여기서 수정(원하는대로) */
  height: 146px !important;
  object-fit: contain !important;

  z-index: 9999 !important;
  pointer-events: none !important;

  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

/* =========================
   Mission 카테고리 월간뷰 UI
   ========================= */

.mission-monthly-wrap{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin: 10px 0 6px;
}

/* ✅ 첨부한 "캡슐" 느낌 버튼 */
.mission-monthly-btn{
  appearance:none;
  border: 0;
  cursor:pointer;

  padding: 8px 14px;
  border-radius: 999px;

  background: #f2ecff;               /* 연보라 파스텔 */
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(120,90,160,0.10),
    0 6px 14px rgba(70,40,120,0.12);

  color:#5a3f86;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height:1;
}

.mission-monthly-btn:hover{
  transform: translateY(-1px);
}

.mission-monthly-panel{
  width: 250px; /* 200~250 취향대로 */
  border-radius: 18px;
  background: #fbf8ff;
  border: 1px solid rgba(150,120,200,0.18);
  box-shadow: 0 10px 24px rgba(80,40,130,0.10);
  overflow:hidden;

  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 260ms ease, opacity 220ms ease, transform 220ms ease;
}

.mission-monthly-panel.is-open{
  max-height: 360px;
  opacity: 1;
  transform: translateY(0);
}

.mission-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  background: #f3edff;
  border-bottom: 1px solid rgba(150,120,200,0.15);
}

.mission-cal-head .m-title{
  font-weight: 700;
  color:#54307f;
  font-size: 13px;
}

.mission-cal-head button{
  border:0;
  background: transparent;
  cursor:pointer;
  font-size: 14px;
  color:#6a45a5;
  padding: 4px 6px;
  border-radius: 10px;
}
.mission-cal-head button:hover{
  background: rgba(140,100,200,0.12);
}

.mission-cal-grid{
  padding: 10px 10px 12px;
}

.mission-cal-week{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  color: rgba(90,60,130,0.65);
  text-align:center;
}

.mission-cal-days{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.mission-day{
  position: relative;
  height: 28px;
  border-radius: 10px;
  background: rgba(160,120,220,0.06);
  border: 1px solid rgba(160,120,220,0.10);
  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 12px;
  color: rgba(70,45,105,0.85);
}

.mission-day.is-empty{
  background: transparent;
  border: 0;
}

.mission-day .check{
  position:absolute;
  right: 5px;
  bottom: 3px;
  font-size: 12px;
  color: #5f33b4;
  filter: drop-shadow(0 1px 2px rgba(70,30,130,0.18));
}
/* ✅ 제목에 #완독이 있으면 체크(✔)가 빛나게 */
.mission-day.is-read .check{
  animation: missionReadGlow 1.15s ease-in-out infinite;
  /* 기존 drop-shadow는 유지 + 더 강하게 */
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,0.8))
    drop-shadow(0 0 6px rgba(160,120,220,0.55))
    drop-shadow(0 0 12px rgba(100,60,200,0.45));
  text-shadow:
    0 0 2px rgba(255,255,255,0.75),
    0 0 8px rgba(160,120,220,0.55),
    0 0 14px rgba(100,60,200,0.45);
}

@keyframes missionReadGlow{
  0%, 100%{
    transform: scale(1);
    opacity: 1;
  }
  50%{
    transform: scale(1.08);
    opacity: 1;
  }
}
.mission-day.is-hit{
  background: rgba(170,130,235,0.12);
  border-color: rgba(170,130,235,0.22);
}

.mission-day .ratio{
  position:absolute;
  left: 5px;
  bottom: 3px;
  font-size: 10px;
  color: rgba(90,60,130,0.55);
}
/* ✅ 카테고리 제목줄 오른쪽 끝으로 밀기 */
.category-name .cate-info{
  gap: 8px;
}

/* ✅ 월간뷰 버튼: 카테고리 바 안쪽 오른쪽 */
/* ===== 월간뷰 버튼 달력 스타일 맞추기 ===== */
.category-name .mission-monthly-btn{
  margin-left: auto;

  height: 28px;
  padding: 0 12px;

  background: #fbf8ff; /* 달력 패널 배경색과 맞춤 */
  border: 1px solid rgba(150,120,200,0.18); /* 달력 테두리색 */
  border-radius: 25px;

  box-shadow: none !important;   /* ✨ 그림자 제거 */

  color: #54307f;
  font-size: 14px;
  font-weight: 550;

  cursor: pointer;
  transition: background 0.2s ease;
}

.category-name .mission-monthly-btn:hover{
  background: #f3edff; /* 달력 헤더색과 맞춤 */
}
/* ✅ 달력 패널 아래 여백 15px */
.mission-monthly-panel{
  margin-bottom: 15px;
}


/* ✅ #완독(=is-read) 체크 ✔ : 노란 네온 글로우(확실하게) */
.mission-day.is-read .check{
  color: #C4A8EC !important; /* 진한 노랑 */
  font-weight: 900 !important;
  transform: translateZ(0); /* 렌더링 선명도 도움 */
  z-index: 3;

  /* 강한 광원 느낌(노랑 + 흰 하이라이트) */
  text-shadow:
    0 0 2px rgba(255,255,255,0.95),
    0 0 6px rgba(255,255,255,0.85),
    0 0 7px rgba(255,216,77,0.95),
    0 0 7px rgba(255,216,77,0.85),
    0 0 7px rgba(255,184,0,0.75),
    0 0 7px rgba(255,184,0,0.60) !important;

  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.50))
    drop-shadow(0 0 5px rgba(255,216,77,0.55))
    drop-shadow(0 0 5px rgba(255,184,0,0.50))
    drop-shadow(0 0 5px rgba(255,184,0,0.35)) !important;

  animation: missionReadNeon 1.1s ease-in-out infinite;
}

/* ✅ 더 “반짝” */
@keyframes missionReadNeon{
  0%,100%{
    transform: scale(1);
    opacity: 1;
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,0.70))
      drop-shadow(0 0 10px rgba(255,216,77,0.85))
      drop-shadow(0 0 18px rgba(255,184,0,0.70));
  }
  50%{
    transform: scale(1.18);
    opacity: 1;
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,0.95))
      drop-shadow(0 0 14px rgba(255,216,77,1.00))
      drop-shadow(0 0 26px rgba(255,184,0,0.95))
      drop-shadow(0 0 40px rgba(255,184,0,0.70));
  }
}
/* 전체카테고리에서 이미지 깨지는데 대체이미지로 관련////// 없어도 대체되네.. */
/* list 썸네일 대체 이미지 처리
.thumbnail {
  position: relative;
}
.thumb-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 실제 썸네일 있으면 fallback 숨김
.thumbnail .thumb-real + .thumb-fallback {
  display: none !important;
}
 */


/* ✅ list-summary2에서는 대체이미지(thumb-fallback) 절대 보여주지 않기 */
#list-summary2 .thumb-fallback{
  display: none !important;
}

/* ✅ list-memo: 비밀글(.list-lock)만 썸네일 이미지 숨기기 */
#list-memo .list-item.list-lock .thumbnail img,
.cover-memo .list-item.list-lock .thumbnail img{
  display: none !important;
}







/* 비밀입력 페이지에서 제목위에 특수문자 입력 */
/* ✅ 비밀글(Protected) 제목 위 장식 + 가운데정렬 */
#protected .article-title{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 16px !important;
}
/* 장식 줄 */
#protected .secret-ornament{
  width: 100% !important;
  text-align: center !important;
  line-height: 1 !important;
}
/* 제목 텍스트 줄(필요하면 여기서 폰트/폭 제어) */
#protected .secret-title-text{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 320px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
}
/* 장식 특수문자 돋움체 적용, 마름모 */
#protected .secret-ornament{
  font-family: "돋움", Dotum, sans-serif !important;
  color: #FFA26F;
  margin-bottom: 15px !important;   /*  11px, 8pt였음← 특수문자밑에 거리두기 */
  font-size: 7pt;
}
/* 비밀번호 입력페이지에서 제목 폰트컬러 변경 */




/* 비밀번호 입력 페이지에서 제목에 액자모양 적용하기
#protected .secret-title-text{
  display: inline-block !important;
  position: relative !important;

  /* 제목과 코너 사이 여백
  padding: 4px 8px !important; */

  /* (원하면) 제목 글자색도 여기서
  color: #835E45 !important; */

  /* 코너 색/두께/길이
  background-image:
    linear-gradient(#7a4a2e, #7a4a2e),
    linear-gradient(#7a4a2e, #7a4a2e),
    linear-gradient(#7a4a2e, #7a4a2e),
    linear-gradient(#7a4a2e, #7a4a2e);
  background-repeat: no-repeat !important; */

  /* 코너 길이(16px) / 선두께(2px)
  background-size:
    10px 2px,
    2px 10px,
    10px 2px,
    2px 10px;

  background-position:
    left top,
    left top,
    right bottom,
    right bottom;
} */
/* ✅ 비밀페이지 제목 부분에만 아이보리 배경, 이거적용하면 액자 없어짐..
#protected .secret-title-text{
  background: #F6F0E6 !important;
  padding: 8px 14px !important; 
  border-radius: 6px !important;
} */



/* 비밀번호 입력페이지 제목부분 액자+아이보리색 배경 */
#protected .secret-title-text{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 320px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;

  position: relative !important;

  /* ✅ 배경색은 background-color로 (액자 유지) */
  background-color: #F6F0E6 !important;

  /* ✅ 액자 코너 */
  background-image:
    linear-gradient(#7a4a2e, #7a4a2e),
    linear-gradient(#7a4a2e, #7a4a2e),
    linear-gradient(#7a4a2e, #7a4a2e),
    linear-gradient(#7a4a2e, #7a4a2e);
  background-repeat: no-repeat !important;
  background-size:
    10px 2px,
    2px 10px,
    10px 2px,
    2px 10px;
  background-position:
    left top,
    left top,
    right bottom,
    right bottom;

  /* ✅ 제목 박스 모양/여백 */
  padding: 8px 14px !important;
  border-radius: 6px !important;

  /* ✅ 제목 글자색 */
  color: #90652E !important;
}
/* 액자 직각으로 보이게 */
#protected .secret-title-text{
  border-radius: 0 !important;
}




/* 업로드 버튼 */
.img-upload-heart-btn{
  background: transparent;
  border: 0;
  padding: 0;
  margin-right: 6px;
  cursor: pointer;
  font-size: 7pt;      /* 요청한 7pt */
  line-height: 1;
  vertical-align: middle;
}
.img-upload-heart-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}

/* 댓글/방명록에 이미지 URL이 있으면 이미지로 보이게 */
#comment .cmt-img,
#guestbook .cmt-img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 6px 0;
}

/* 댓글/방명록에 유튜브 URL이 있으면 iframe으로 보이게 */
#comment iframe.cmt-yt,
#guestbook iframe.cmt-yt{
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  margin: 6px 0;
}

/* 업로드 버튼 → png */
.img-upload-heart-btn img{
  width: 19px;
  height: 21px;
  object-fit: contain;
}






/* 카테고리별 공지창 */
/* =========================
   카테고리 공지 버튼 + 모달(공지창)
   ========================= */

/* 버튼 컬러(갈색 파스텔) */
:root{
  --cateNotice-btn-bg: #f6eadf;
  --cateNotice-btn-bg-hover: #f0dece;
  --cateNotice-btn-border: rgba(128,88,66,0.26);
  --cateNotice-btn-text: #5a2f17;

  --cateNotice-modal-bg: #fffdf9;
  --cateNotice-modal-border: rgba(60,40,25,0.22);
  --cateNotice-dash: rgba(176,122,91,0.65);

  --cateNotice-scroll-thumb: rgba(210,147,107,0.95);
  --cateNotice-scroll-track: rgba(210,147,107,0.20);

  --cateNotice-text: #3b2417;
}

/* 다크모드 대응(원하면 색 더 조절해도 됨) */
html[data-theme='dark']{
  --cateNotice-btn-bg: #2f2620;
  --cateNotice-btn-bg-hover: #3a2f28;
  --cateNotice-btn-border: rgba(210,147,107,0.30);
  --cateNotice-btn-text: #f3d7c3;

  --cateNotice-modal-bg: #211a16;
  --cateNotice-modal-border: rgba(210,147,107,0.22);
  --cateNotice-dash: rgba(210,147,107,0.55);

  --cateNotice-scroll-thumb: rgba(210,147,107,0.85);
  --cateNotice-scroll-track: rgba(210,147,107,0.18);

  --cateNotice-text: #f2e6dd;
}

/* ✅ 카테고리 바 오른쪽에 붙는 공지 버튼 */
.category-name .cate-notice-btn{
  margin-left: auto;
  margin-right: 12px; /* 공지버튼 오른쪽 여백 */
  height: 28px;
  padding: 0 12px;

  background: var(--cateNotice-btn-bg);
  border: 1px solid var(--cateNotice-btn-border);
  border-radius: 25px;
line-height: 28px;
  
  box-shadow: none !important;
  color: var(--cateNotice-btn-text);
  font-size: 14px;
  font-weight: 350;

  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.category-name .cate-notice-btn:hover{
  background: var(--cateNotice-btn-bg-hover);
  transform: translateY(-1px);
}

/* ✅ 모달 오픈 중 배경 스크롤 방지 */
html.cateNoticeModal-open,
html.cateNoticeModal-open body{
  overflow: hidden !important;
}

/* ✅ 모달 전체 */
.cateNoticeModal{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}

.cateNoticeModal.is-open{
  display: block;
}

/* ✅ 바깥 클릭 영역(배경) */
.cateNoticeModal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}

/* ✅ 카테고리별 공지창 본체 (500x400 기본 / 화면 작으면 자동 축소) */
.cateNoticeModal__dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 496px;
  height: 396px;

  /* 🔽 추가 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;


  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 28px);

  background: var(--cateNotice-modal-bg);
  border: 1px solid var(--cateNotice-modal-border);
  border-radius: 32px;

  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  padding: 30px; /* 점선안 padding */
}

/* ✅ 카테고리별 공지사항 안쪽 점선 테두리(첨부 이미지 느낌)
.cateNoticeModal__dialog::after{  
  content:"";
  position: absolute;
  inset: 14px; /* 점선 위치 , 점선 안쪽으로
  border-radius: 24px;
  border: 2px dashed var(--cateNotice-dash);
  pointer-events: none;
} */

/* ✅ 카테고리별 공지사항의 배경이미지의 스크롤 영역 */
.cateNoticeModal__scroll{
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-right: 10px;
  color: var(--cateNotice-text);

  scrollbar-width: thin;
  scrollbar-color: #E8CDE0 transparent;

  box-sizing: border-box;
}

/* 공지사항 */
.cateNoticeModal__contentBox{
  position: relative;
  width: 100%;
  height: 100%;
}
.notice-bg .cateNoticeModal__contentBox{
  position: absolute;
  left: 72px;     /* ← 빨간 박스 시작 x */
  top: 109px;      /* ← 빨간 박스 시작 y */
  width: 360px;   /* ← 빨간 박스 가로 */
  height: 225px;  /* ← 빨간 박스 세로 */
  overflow: hidden;
}

.notice-bg .cateNoticeModal__scroll{
  width: 100%;
  height: 100%;
  padding: 0 8px 0 0;   /* 스크롤바 자리만 */
  box-sizing: border-box;
}
.notice-bg .cateNoticeModal__body{
  font-size: 11pt;
  line-height: 1.5;
}
/* 공지 안 이미지가 있으면 너무 커질 수 있으니 */
.notice-bg .cateNoticeModal__body img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}




/* Chrome/Edge */
.cateNoticeModal__scroll::-webkit-scrollbar{
  width: 4px;
}

.cateNoticeModal__scroll::-webkit-scrollbar-track{
  background: transparent;   /* 트랙 숨김 */
}

.cateNoticeModal__scroll::-webkit-scrollbar-thumb{
  background: #cfa88a;       /* 원하는 색 */
  border-radius: 10px;
}

/* 내용 기본 스타일 */
.cateNoticeModal__body{
  color: inherit;
  line-height: 1.65;
  word-break: break-word;
}
.cateNoticeModal__body img{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.cateNoticeModal__loading,
.cateNoticeModal__error{
  font-weight: 650;
  opacity: 0.85;
}




/* 첫화면 커버갤러리 이미지 안나올때 */
/* cover에서도: 썸네일 있으면 fallback 숨기기 */
#cover-gallery .thumbnail .thumb-fallback { display:block; }
#cover-gallery .thumbnail:has(.thumb-real) .thumb-fallback { display:none; }