/* ============================================================
   지뢰계 레이스 스킨 — style.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&display=swap');

/* ================================================================
   CSS 변수 기본값 (index.xml 색상 변수로 오버라이드됨)
   ================================================================ */
:root {
  --accent:      #d4537e;
  --accent-lt:   #f4c0d1;
  --accent-pale: #fbeaf0;
  --bg:          #fce8f0;
  --bg-card:     #ffffff;
  --bg-card2:    #fef4f8;
  --text:        #2e2e2e;
  --text-muted:  #aaaaaa;
  --lace-s:      #dda8c0;
  --lace-f:      #ffffff;
  --lace-h:      #fce8f0;
  --lace-e:      #ebb8d0;
  --shadow:      rgba(212,83,126,0.08);
  --tape:        rgba(255,182,206,0.55);
  --border:      rgba(212,83,126,0.12);
  --code-bg:     #fff8fb;
  --table-head:  #fbeaf0;
}

/* 흑백 테마 오버라이드 */
.theme-mono {
  --accent:      #888888;
  --accent-lt:   #cccccc;
  --accent-pale: #f0f0f0;
  --bg:          #1a1a1a;
  --bg-card:     #ffffff;   /* 카드 배경 흰색 */
  --bg-card2:    #f5f5f5;
  --text:        #1a1a1a;
  --text-muted:  #888888;
  --lace-s:      #aaaaaa;
  --lace-f:      #ffffff;
  --lace-h:      #f0f0f0;
  --lace-e:      #cccccc;
  --shadow:      rgba(0,0,0,0.25);
  --tape:        rgba(120,120,120,0.45);
  --border:      rgba(0,0,0,0.08);
  --code-bg:     #f8f8f8;
  --table-head:  #f0f0f0;
}


/* ================================================================
   리셋 & 기본
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* 배경 패턴 */
body.bg-dot {
  background-image: radial-gradient(var(--accent-lt) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
body.bg-grid {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 20px 20px;
}

a { color: inherit; }


/* ================================================================
   헤더
   ================================================================ */
.site-header {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--accent-lt);
  text-align: center;
  padding: 24px 20px 14px;
  /* sticky 제거 — 스크롤 가림 문제 해결 */
  position: relative;
  z-index: 10;
}
.theme-mono .site-header {
  background: rgba(255,255,255,0.92);
  border-bottom-color: #cccccc;
}

.blog-title {
  display: block;
  font-size: 17px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 3px;
  margin-bottom: 4px;
}
.blog-desc {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin: 0 0 6px;
}
.header-deco {
  font-size: 10px;
  color: var(--accent-lt);
  letter-spacing: 4px;
  margin-bottom: 12px;
}

/* 카테고리 네비 */
.cat-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 5px;
  padding-top: 10px;
  border-top: 1px dashed var(--accent-lt);
}
.theme-mono .cat-nav { border-top-color: #2a2a2a; }

/* 티스토리가 출력하는 카테고리 li/a 스타일 초기화 후 재정의 */
.cat-nav ul { list-style: none; margin: 0; padding: 0; display: contents; }
.cat-nav li { display: contents; }
.cat-nav li ul { display: contents; } /* 하위 카테고리도 평탄화 */

.cat-nav a,
.cat-nav-item {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 20px;
  transition: all 0.15s;
  white-space: nowrap;
}
.cat-nav a:hover,
.cat-nav a.current,
.cat-nav-item:hover {
  color: var(--accent);
  border-color: var(--accent-lt);
  background: var(--accent-pale);
}


/* ================================================================
   메인 레이아웃
   ================================================================ */
.site-main {
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 16px 80px;
}

/* index-list: 마진 병합을 이겨내도록 하단 여백을 110px로 대폭 증가 */
.index-list { 
  list-style: none; 
  margin: 0 0 150px 0 !important; 
  padding: 0; 
}

/* 레이스 간격 띄우기 완결판 */
.lace-wrap {
  position: relative;
  /* margin 순서: 위 양옆 아래 */
  margin: 40px 22px 90px !important; /* 아래쪽 여백을 90px로 팍 늘려서 레이스 사이 공백을 만듭니다 */
}

/* 첫 번째 게시글 상단 여백 방어 */
.lace-wrap:first-child, .index-list li:first-child { 
  margin-top: 40px !important; 
}

/* 카드 공통 */
.post-item,
.post-view,
.guestbook-wrap,
.protected-view {
  background: var(--bg-card);
  border-radius: 6px;
  position: relative;
  box-shadow: 0 2px 16px var(--shadow);
}
/* 레이스 SVG가 overflow:visible로 나오므로 카드 자체는 overflow:visible */
.post-view,
.guestbook-wrap,
.protected-view { overflow: visible; }
.post-item { overflow: visible; } /* 썸네일 모서리 처리용 */


/* ================================================================
   피드 카드
   ================================================================ */
.post-thumb-link { display: block; }
/* 수정 후: 피드 카드 썸네일 부분 */
.post-thumb {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover; display: block;
  border-radius: 6px 6px 0 0 !important; /* 👉 이미지 위쪽 모서리 6px 둥글게 깎기 (추가) */
  transform: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.post-info { padding: 14px 16px 16px; }
.post-category {
  display: block;
  font-size: 10px; color: var(--accent);
  letter-spacing: 1.5px; margin-bottom: 5px;
}
.post-title {
  display: block;
  font-size: 15px; font-weight: 500;
  color: var(--text); text-decoration: none;
  line-height: 1.5; margin-bottom: 6px;
}
.post-title:hover { color: var(--accent); }
.post-summary {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.75; margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-muted);
}


/* ================================================================
   글 목록 헤더 (카테고리/검색 결과 상단)
   ================================================================ */
.list-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; /* 여백을 넉넉하게 변경 */
  background: rgba(255, 255, 255, 0.7); /* 반투명 흰색 배경 쫙 깔아주기 */
  backdrop-filter: blur(5px); /* 뒤쪽 도트 무늬를 살짝 흐리게(블러) */
  border-radius: 8px; /* 모서리 둥글게 */
  border: 1px solid var(--accent-lt); /* 핑크색 연한 테두리 */
  margin-bottom: 20px;
}
.theme-mono .list-header { border-bottom-color: #2a2a2a; }
.list-title { font-size: 13px; font-weight: 500; color: var(--text); }
.list-count { font-size: 11px; color: var(--text-muted); }
.list-empty {
  text-align: center; padding: 40px;
  font-size: 13px; color: var(--text-muted); letter-spacing: 1px;
}


/* ================================================================
   페이지네이션
   ================================================================ */
/* ================================================================
   페이지네이션 이중박스 대참사 해결
   ================================================================ */
/* 1. 구린 바깥쪽 껍데기 박스 완전히 날려버리기 */
.pagination {
  display: flex; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  margin: 20px auto 40px; 
  padding: 0 !important;
  background: transparent !important; /* 구린 겉배경 삭제 */
  backdrop-filter: none !important;   /* 블러 삭제 */
  border: none !important;            /* 겉 테두리 삭제 */
}

/* 2. 숫자 버튼 자체에만 뽀얀 배경 줘서 가독성 챙기기 */
.page-btn {
  font-size: 12px; color: var(--text-muted);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.82) !important; /* 숫자 뒤에만 예쁘게 깔기 */
  border: 1px solid var(--accent-lt) !important;
  padding: 5px 12px; border-radius: 20px;
  transition: all 0.15s;
}

/* 3. 버튼에 마우스 올렸을 때 색상 유지 */
.page-btn:hover,
.page-btn.selected { 
  color: var(--accent) !important; 
  background: var(--accent-pale) !important; 
}

/* ================================================================
   본문 뷰
   ================================================================ */
.post-header {
  padding: 22px 20px 14px;
  border-bottom: 1px dashed var(--accent-lt);
  text-align: center;
}
.theme-mono .post-header { border-bottom-color: #2a2a2a; }

.post-view-title {
  font-size: 19px; font-weight: 500;
  color: var(--text); line-height: 1.5;
  margin: 8px 0 10px;
}

/* 수정/삭제 */
.post-admin {
  display: flex; gap: 6px;
  justify-content: flex-end; margin-top: 10px;
}
.admin-btn {
  font-size: 10px; font-family: inherit;
  color: var(--text-muted); background: transparent;
  border: 1px solid var(--accent-lt);
  padding: 3px 10px; text-decoration: none;
  border-radius: 2px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.admin-btn:hover { background: var(--accent-pale); color: var(--accent); }
.admin-btn--del:hover { background: #fff0f3; color: #c0476a; }
.theme-mono .admin-btn { border-color: #333; }
.theme-mono .admin-btn:hover { background: #2a2a2a; color: #aaa; }

.entry-content {
  padding: 22px 20px;
  font-size: 14.5px; line-height: 1.9;
  color: var(--text);
}
.entry-content p { margin: 0 0 16px; }

/* 공감 */
.post-reaction { text-align: center; padding: 14px 0; }

/* 태그 */
.post-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 14px 20px;
  border-top: 1px dashed var(--accent-lt);
}
.theme-mono .post-tags { border-top-color: #2a2a2a; }
.post-tag {
  font-size: 11px; color: var(--accent);
  background: var(--accent-pale);
  border: 1px solid var(--accent-lt);
  padding: 3px 10px; text-decoration: none;
  border-radius: 20px;
}
.post-tag:hover { background: var(--accent); color: #fff; }

/* 이전/다음 */
.post-nav {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 20px;
  border-top: 1px dashed var(--accent-lt);
}
.theme-mono .post-nav { border-top-color: #2a2a2a; }
.post-nav-item { font-size: 12.5px; }
.nav-label {
  display: block; font-size: 10px;
  color: var(--accent-lt); letter-spacing: 1px; margin-bottom: 2px;
}
.post-nav-item a { color: var(--text-muted); text-decoration: none; }
.post-nav-item a:hover { color: var(--accent); }


/* ================================================================
   관련글 위젯 — 티스토리 기본 스타일 완전 초기화
   ================================================================ */
.related-wrap {
  border-top: 1px dashed var(--accent-lt);
}
.theme-mono .related-wrap { border-top-color: #2a2a2a; }

/* 핑크 배경 제거 */
.related-wrap .another_category,
.related-wrap .related_article_wrap {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 14px 20px !important;
}
.related-wrap .another_category h4,
.related-wrap .related_article_wrap h4 {
  font-size: 10px !important; font-weight: 400 !important;
  color: var(--text-muted) !important;
  letter-spacing: 2px !important;
  margin: 0 0 8px !important;
  padding: 0 !important; border: none !important;
  background: none !important;
}
.related-wrap .another_category ul,
.related-wrap .related_article_wrap ul {
  list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.related-wrap .another_category li,
.related-wrap .related_article_wrap li {
  background: transparent !important; padding: 0 !important; margin: 0 !important;
}
.related-wrap .another_category li a,
.related-wrap .related_article_wrap li a {
  display: flex !important; justify-content: space-between !important;
  align-items: center !important;
  font-size: 12.5px !important; color: var(--text-muted) !important;
  text-decoration: none !important;
  padding: 5px 6px !important; border-radius: 3px !important;
  background: transparent !important;
  transition: color 0.15s, background 0.15s !important;
}
.related-wrap .another_category li a:hover,
.related-wrap .related_article_wrap li a:hover {
  color: var(--accent) !important;
  background: var(--accent-pale) !important;
}
.related-wrap .another_category li a span,
.related-wrap .related_article_wrap li a span {
  font-size: 11px !important; color: var(--text-muted) !important;
  flex-shrink: 0 !important; margin-left: 10px !important;
}


/* ================================================================
   댓글 — [##_comment_group_##] 티스토리 출력 스타일 오버라이드
   ================================================================ */
.comments-section {
  padding: 18px 20px 22px;
  border-top: 1px dashed var(--accent-lt);
}
.theme-mono .comments-section { border-top-color: #2a2a2a; }

.comments-title {
  font-size: 11px; font-weight: 400;
  color: var(--text-muted); letter-spacing: 3px;
  text-align: center; margin-bottom: 18px;
}
.comment-count {
  font-size: 11px; color: var(--accent);
  background: var(--accent-pale);
  padding: 1px 7px; border-radius: 20px; margin-left: 4px;
}

/* 티스토리 댓글 래퍼 */
.comments-section #cmt_view,
.comments-section .comment_box { background: transparent !important; border: none !important; }

/* 개별 댓글 */
.comments-section .t_comment {
  background: var(--bg-card2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 11px 14px !important;
  margin-bottom: 8px !important;
  list-style: none !important;
}
.comments-section .t_comment .comment_nickname,
.comments-section .t_comment strong {
  font-size: 12px !important; font-weight: 500 !important;
  color: var(--accent) !important; display: block !important; margin-bottom: 4px !important;
}
.comments-section .t_comment .comment_content {
  font-size: 13px !important; color: var(--text) !important; line-height: 1.7 !important;
}
.comments-section .t_comment .comment_date,
.comments-section .t_comment span.date {
  font-size: 10px !important; color: var(--text-muted) !important; margin-top: 5px !important; display: block !important;
}

/* 댓글 폼 */
.comments-section #cmt_form,
.comments-section .comment_input { margin-top: 14px !important; padding-top: 14px !important; border-top: 1px dashed var(--accent-lt) !important; background: transparent !important; }
.theme-mono .comments-section #cmt_form,
.theme-mono .comments-section .comment_input { border-top-color: #2a2a2a !important; }

.comments-section input[type=text],
.comments-section input[type=password],
.comments-section textarea {
  font-family: inherit !important; font-size: 12.5px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--accent-lt) !important;
  background: var(--bg-card) !important; color: var(--text) !important;
  outline: none !important; border-radius: 2px !important;
  width: 100% !important; margin-bottom: 6px !important;
}
.comments-section input:focus,
.comments-section textarea:focus { border-color: var(--accent) !important; }
.comments-section textarea { min-height: 80px !important; resize: vertical !important; }

.comments-section input[type=submit],
.comments-section button[type=submit] {
  font-family: inherit !important; font-size: 12px !important;
  padding: 7px 20px !important;
  border: 1px solid var(--accent-lt) !important;
  background: transparent !important; color: var(--accent) !important;
  cursor: pointer !important; border-radius: 2px !important;
  float: right !important; transition: background 0.15s !important;
}
.comments-section input[type=submit]:hover,
.comments-section button[type=submit]:hover { background: var(--accent-pale) !important; }


/* ================================================================
   비밀글
   ================================================================ */
.protected-box {
  text-align: center; padding: 44px 20px;
}
.protected-icon { font-size: 28px; margin-bottom: 10px; }
.protected-title {
  font-size: 16px; font-weight: 500; color: var(--text);
  margin: 0 0 10px;
}
.protected-msg { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.protected-form {
  display: flex; gap: 8px;
  justify-content: center; flex-wrap: wrap;
}
.protected-input {
  font-family: inherit; font-size: 12px;
  padding: 7px 12px; width: 180px;
  border: 1px solid var(--accent-lt);
  background: var(--bg-card); color: var(--text);
  outline: none; border-radius: 2px;
}
.protected-input:focus { border-color: var(--accent); }
.protected-btn {
  font-family: inherit; font-size: 12px;
  padding: 7px 16px;
  border: 1px solid var(--accent-lt);
  background: transparent; color: var(--accent);
  cursor: pointer; border-radius: 2px;
  transition: background 0.15s;
}
.protected-btn:hover { background: var(--accent-pale); }


/* ================================================================
   방명록 — [##_guestbook_group_##] 티스토리 출력 오버라이드
   ================================================================ */
.guestbook-wrap {
  padding: 22px 20px;
  border-radius: 6px;
}
.guestbook-title {
  font-size: 11px; font-weight: 400;
  color: var(--text-muted); letter-spacing: 3px;
  text-align: center; margin-bottom: 18px;
}

/* 방명록 입력 폼 */
.guestbook-wrap #guestbook_form,
.guestbook-wrap .guestbook_form { background: transparent !important; border: none !important; }

.guestbook-wrap input[type=text],
.guestbook-wrap input[type=password],
.guestbook-wrap textarea {
  font-family: inherit !important; font-size: 12.5px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--accent-lt) !important;
  background: var(--bg-card) !important; color: var(--text) !important;
  outline: none !important; border-radius: 2px !important;
  width: 100% !important; margin-bottom: 6px !important;
}
.guestbook-wrap input:focus,
.guestbook-wrap textarea:focus { border-color: var(--accent) !important; }
.guestbook-wrap textarea { min-height: 72px !important; resize: vertical !important; }

.guestbook-wrap input[type=submit],
.guestbook-wrap button[type=submit] {
  font-family: inherit !important; font-size: 12px !important;
  padding: 7px 20px !important;
  border: 1px solid var(--accent-lt) !important;
  background: transparent !important; color: var(--accent) !important;
  cursor: pointer !important; border-radius: 2px !important;
  float: right !important; transition: background 0.15s !important;
}
.guestbook-wrap input[type=submit]:hover { background: var(--accent-pale) !important; }

/* 방명록 글 */
.guestbook-wrap .t_guest {
  background: var(--bg-card2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 11px 14px !important;
  margin-bottom: 8px !important;
  list-style: none !important;
}
.guestbook-wrap .t_guest .guest_nickname,
.guestbook-wrap .t_guest strong {
  font-size: 12px !important; font-weight: 500 !important;
  color: var(--accent) !important; display: block !important; margin-bottom: 4px !important;
}
.guestbook-wrap .t_guest .guest_content {
  font-size: 13px !important; color: var(--text) !important; line-height: 1.7 !important;
}
.guestbook-wrap .t_guest .guest_date {
  font-size: 10px !important; color: var(--text-muted) !important;
  margin-top: 5px !important; display: block !important;
}

/* 방명록 페이지네이션 */
.guestbook-wrap .pager { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.guestbook-wrap .pager a {
  font-size: 12px; color: var(--text-muted);
  text-decoration: none; border: 1px solid var(--accent-lt);
  padding: 4px 10px; border-radius: 20px;
}
.guestbook-wrap .pager a:hover { color: var(--accent); background: var(--accent-pale); }


/* ================================================================
   게시글 이미지 — 폴라로이드
   ================================================================ */
.entry-content img {
  display: block;
  background: #fff;
  padding: 8px 8px 28px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.13);
  margin: 26px auto;
  max-width: 92%;
  position: relative;
  transform: rotate(-1.5deg);
  transition: transform 0.2s;
}
.entry-content img:nth-child(even) { transform: rotate(1deg); }
.entry-content img:hover { transform: rotate(0deg) scale(1.02); }
.theme-mono .entry-content img { background: #1a1a1a; }

/* 테이프 */
.entry-content figure.polaroid {
  display: block; text-align: center; margin: 26px auto; position: relative;
}
.entry-content figure.polaroid img { margin: 0 auto; }

.tape-pink .entry-content figure.polaroid::before,
.tape-mono .entry-content figure.polaroid::before {
  content: '';
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 52px; height: 18px;
  background: var(--tape);
  z-index: 1; border-radius: 1px;
}


/* ================================================================
   게시글 — 코드박스
   ================================================================ */
.entry-content code {
  background: var(--accent-pale); color: var(--accent);
  padding: 1px 6px; border-radius: 3px;
  font-size: 0.875em;
  font-family: 'Courier New', Consolas, monospace;
  border: 1px solid var(--accent-lt);
}
.entry-content pre {
  background: var(--code-bg);
  border: 1px solid var(--accent-lt);
  border-radius: 4px; margin: 18px 0; overflow: hidden;
  box-shadow: 0 2px 8px var(--shadow);
}
.entry-content pre::before {
  content: '· · ·';
  display: block;
  background: var(--accent-pale); color: var(--accent-lt);
  font-size: 13px; letter-spacing: 4px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--accent-lt);
  font-family: monospace;
}
.theme-mono .entry-content pre::before { background: #1a1a1a; border-bottom-color: #2a2a2a; color: #444; }
.entry-content pre code {
  display: block; padding: 14px 16px;
  background: none; color: var(--text);
  border: none; border-radius: 0;
  font-size: 13px; line-height: 1.75;
  overflow-x: auto;
}

/* ================================================================
   게시글 — 표
   ================================================================ */
.entry-content table {
  width: 100%; border-collapse: collapse;
  margin: 18px 0; font-size: 13.5px;
  border: 1px solid var(--accent-lt);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 2px 8px var(--shadow);
}
.entry-content table th {
  background: var(--table-head); color: var(--accent);
  font-weight: 500; padding: 9px 13px;
  text-align: left; border-bottom: 1px solid var(--accent-lt);
  font-size: 12.5px;
}
.entry-content table td {
  padding: 8px 13px;
  border-bottom: 1px solid var(--border);
  color: var(--text); line-height: 1.6;
}
.entry-content table tr:last-child td { border-bottom: none; }
.entry-content table tr:nth-child(even) td { background: var(--bg-card2); }

/* ================================================================
   게시글 — 인용구
   ================================================================ */
.entry-content blockquote {
  margin: 18px 0; padding: 13px 17px;
  background: var(--accent-pale);
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  font-size: 14px; line-height: 1.8; font-style: italic;
  border-radius: 0 4px 4px 0;
}


/* ================================================================
   푸터
   ================================================================ */
.site-footer {
  text-align: center; padding: 24px 20px;
  border-top: 1px solid var(--accent-lt);
}
.theme-mono .site-footer { border-top-color: #2a2a2a; }
.footer-deco { font-size: 10px; color: var(--accent-lt); letter-spacing: 4px; margin-bottom: 6px; }
.footer-copy { font-size: 11px; color: var(--text-muted); letter-spacing: 1px; }


/* ================================================================
   모바일
   ================================================================ */
@media (max-width: 480px) {
  .site-main { padding: 24px 8px 60px; }
  .lace-wrap { margin: 0 10px 32px; }
  .post-view-title { font-size: 17px; }
  .entry-content { padding: 18px 14px; font-size: 14px; }
}


/* ================================================================
   아바타 + 리본
   ================================================================ */
.avatar-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-right: 12px;
  margin-top: 8px;
}
.avatar-wrap img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 1.5px solid var(--accent-lt) !important;
}

/* 댓글 행 레이아웃 — 프사 왼쪽, 내용 오른쪽 */
.comments-section .t_comment {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.comments-section .t_comment .comment_content_wrap,
.comments-section .t_comment > div:last-child {
  flex: 1 !important;
  min-width: 0 !important;
}

/* 방명록 행도 동일 */
.guestbook-wrap .t_guest {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
}


/* ================================================================
   댓글 중복 박스 제거
   — 티스토리는 comment_wrap > #cmt_view 구조인데
     우리 .comments-section 이 이미 박스이므로
     내부 #cmt_view 의 배경/테두리/패딩 리셋
   ================================================================ */
.comments-section #cmt_view,
.comments-section .cmt_view,
.comments-section .comment-list-wrap {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
/* 댓글 폼 위 '댓글' 헤딩 숨기기 (우리 comments-title이 있으므로) */
.comments-section h3.tit_comment,
.comments-section .comment_head h3 {
  display: none !important;
}

/* post-view가 댓글 포함하므로 overflow visible 유지 */
.post-view { overflow: visible; }

/* ================================================================
   흑백 테마 추가 보정
   ================================================================ */
.theme-mono .post-item,
.theme-mono .guestbook-wrap,
.theme-mono .protected-view { background: #ffffff; }

.theme-mono .post-tags .post-tag { color: #555; background: #f0f0f0; border-color: #ccc; }
.theme-mono .post-title { color: #1a1a1a; }
.theme-mono .post-summary { color: #666; }
.theme-mono .post-date,
.theme-mono .post-counts { color: #999; }
.theme-mono .blog-title { color: #333; }
.theme-mono .cat-nav a { color: #666; }
.theme-mono .cat-nav a:hover { color: #333; background: #f0f0f0; border-color: #ccc; }
.theme-mono .comments-section input[type=text],
.theme-mono .comments-section input[type=password],
.theme-mono .comments-section textarea,
.theme-mono .guestbook-wrap input[type=text],
.theme-mono .guestbook-wrap input[type=password],
.theme-mono .guestbook-wrap textarea {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #cccccc !important;
}
.theme-mono .admin-btn { border-color: #ccc; color: #666; }
.theme-mono .related-wrap .another_category li a,
.theme-mono .related-wrap .related_article_wrap li a { color: #666 !important; }
.theme-mono .related-wrap .another_category li a:hover,
.theme-mono .related-wrap .related_article_wrap li a:hover { color: #333 !important; background: #f0f0f0 !important; }

/* ================================================================
   post-view : 댓글까지 포함하므로 border-radius 하단 처리
   ================================================================ */
.post-view {
  border-radius: 6px;
  background: var(--bg-card);
  box-shadow: 0 2px 16px var(--shadow);
  position: relative;
}

/* ================================================================
   댓글 & 방명록 폼 가로 삐져나옴 원천 차단 (치트키)
   ================================================================ */
.comments-section *, .guestbook-wrap * {
  box-sizing: border-box !important; 
  max-width: 100% !important; /* 부모 크기 100%를 절대 넘지 못함 */
  word-break: break-all !important; /* 너무 긴 영어나 링크도 무조건 줄바꿈 */
}

/* 텍스트 입력창 너비 꽉 차게 고정 */
.comments-section textarea, .guestbook-wrap textarea {
  width: 100% !important;
  max-width: 100% !important;
}

/* ================================================================
   티스토리 비로그인 폼 삐져나옴 절대 차단 (진짜 최종)
   ================================================================ */
/* 1. 티스토리가 몰래 주입하는 악질 컨테이너 고정 */
.guestbook-wrap form, 
.comments-section form,
.tt-area-write, 
.tt-area-reply {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* 2. 숨어있는 강철 뼈대(테이블) 강제 해체 */
.guestbook-wrap table, .comments-section table,
.guestbook-wrap tbody, .comments-section tbody,
.guestbook-wrap tr, .comments-section tr,
.guestbook-wrap td, .comments-section td {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: none !important;
}

/* 3. 입력창(이름, 비번, 내용) 규격화 및 줄바꿈 강제 */
.guestbook-wrap input, .comments-section input,
.guestbook-wrap textarea, .comments-section textarea,
.tt-area-write input, .tt-area-write textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  word-break: break-all !important;
}

/* ================================================================
   홈/카테고리 목록에서 자물쇠 숨기고, 글 읽을 때만 띄우기
   ================================================================ */
.only-post {
  display: none !important;
}
#tt-body-page .only-post {
  display: block !important;
}



/* 비밀글 입력 화면 보정 */
.protected-view {
  overflow: visible;
}
.protected-box {
  text-align: center;
  padding: 44px 20px;
}
.protected-form input[type=password] {
  font-family: inherit;
  font-size: 12px;
  padding: 7px 12px;
  width: 180px;
  border: 1px solid var(--accent-lt);
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  border-radius: 2px;
}
.protected-form input[type=password]:focus {
  border-color: var(--accent);
}
.protected-form button[type=submit] {
  font-family: inherit;
  font-size: 12px;
  padding: 7px 16px;
  border: 1px solid var(--accent-lt);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  border-radius: 2px;
}
.protected-form button[type=submit]:hover {
  background: var(--accent-pale);
}


/* ================================================================
   비밀글 상세 화면 보정 v2
   - 일반글은 그대로 보이고, 비밀글일 때만 protected-wrap 표시
   ================================================================ */
.protected-wrap {
  padding: 36px 20px 42px;
  border-top: 1px dashed var(--accent-lt);
}
.theme-mono .protected-wrap {
  border-top-color: #cccccc;
}
.protected-box {
  text-align: center;
  padding: 10px 0 0;
}
.protected-box .protected-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 10px;
}
.protected-form {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.protected-form .protected-input {
  font-family: inherit;
  font-size: 12px;
  padding: 8px 12px;
  width: 190px;
  border: 1px solid var(--accent-lt);
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  border-radius: 2px;
}
.protected-form .protected-input:focus {
  border-color: var(--accent);
}
.protected-form .protected-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 8px 16px;
  border: 1px solid var(--accent-lt);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s;
}
.protected-form .protected-btn:hover {
  background: var(--accent-pale);
}

/* ================================================================
   비밀글 비밀번호 화면 강제 보정
   ================================================================ */
.protected-wrap {
  position: relative;
  max-width: 520px;
  margin: 76px auto 110px !important;
  padding: 54px 34px 58px !important;
  background: var(--bg-card, #ffffff) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 18px var(--shadow, rgba(212,83,126,0.10)) !important;
  text-align: center !important;
  overflow: visible !important;
  isolation: isolate;
}

.protected-wrap::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 14px;
  pointer-events: none;
  z-index: -2;
  background-image:
    radial-gradient(circle, var(--lace-f, #ffffff) 0 5px, var(--lace-s, #dda8c0) 5.2px 5.8px, transparent 6px),
    radial-gradient(circle, var(--lace-f, #ffffff) 0 5px, var(--lace-s, #dda8c0) 5.2px 5.8px, transparent 6px),
    radial-gradient(circle, var(--lace-f, #ffffff) 0 5px, var(--lace-s, #dda8c0) 5.2px 5.8px, transparent 6px),
    radial-gradient(circle, var(--lace-f, #ffffff) 0 5px, var(--lace-s, #dda8c0) 5.2px 5.8px, transparent 6px);
  background-size: 18px 18px;
  background-position: top left, bottom left, top left, top right;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

.protected-wrap::after {
  content: '';
  position: absolute;
  inset: -13px;
  border: 1px solid var(--lace-s, #dda8c0);
  border-radius: 11px;
  pointer-events: none;
  z-index: -1;
}

.protected-wrap > * {
  position: relative;
  z-index: 1;
}

.protected-wrap .protected-box {
  padding: 0 !important;
}

.protected-wrap .protected-icon {
  font-size: 32px !important;
  margin-bottom: 12px !important;
}

.protected-wrap .protected-title,
.protected-wrap .article-title {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--text, #2e2e2e) !important;
  margin: 0 0 18px !important;
  line-height: 1.45 !important;
}

.protected-wrap .protected-msg {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--text-muted, #aaaaaa) !important;
  margin: 0 0 26px !important;
}

.protected-wrap .protected-form {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
}

.protected-wrap .protected-form input,
.protected-wrap .protected-form .protected-input,
.protected-wrap input[type=password] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 16px !important;
  border: 1px solid var(--accent-lt, #f4c0d1) !important;
  background: var(--bg-card, #ffffff) !important;
  color: var(--text, #2e2e2e) !important;
  border-radius: 3px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.protected-wrap .protected-form input:focus,
.protected-wrap input[type=password]:focus {
  border-color: var(--accent, #d4537e) !important;
  box-shadow: 0 0 0 2px rgba(212,83,126,0.10) !important;
}

.protected-wrap .protected-form button,
.protected-wrap .protected-form .protected-btn,
.protected-wrap button[type=submit] {
  flex: 0 0 auto !important;
  height: 42px !important;
  padding: 0 24px !important;
  border: 1px solid var(--accent-lt, #f4c0d1) !important;
  background: transparent !important;
  color: var(--accent, #d4537e) !important;
  border-radius: 3px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
}

.protected-wrap .protected-form button:hover,
.protected-wrap button[type=submit]:hover {
  background: var(--accent-pale, #fbeaf0) !important;
}

/* post-view 안에 들어간 경우 카드 이중 생성 방지 */
.post-view > .protected-wrap {
  max-width: none;
  margin: 0 !important;
  padding: 42px 20px 48px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.post-view > .protected-wrap::before,
.post-view > .protected-wrap::after {
  display: none !important;
}

@media (max-width: 480px) {
  .protected-wrap {
    margin: 52px 22px 80px !important;
    padding: 44px 22px 48px !important;
  }

  .protected-wrap .protected-form {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    max-width: 260px !important;
  }

  .protected-wrap .protected-form input,
  .protected-wrap .protected-form button,
  .protected-wrap input[type=password],
  .protected-wrap button[type=submit] {
    width: 100% !important;
  }
}

/* ================================================================
   티스토리 자동 프로필/구독 카드 숨기기
   ================================================================ */
[data-tistory-react-app="Namecard"],
.tt_box_namecard,
.tt_namecard,
.tt-profile,
.tt-blog-profile,
.article-profile,
.profile-card,
.tistory-profile {
  display: none !important;
}
/* ================================================================
   관련글 / 다른 글 위젯 핑크 배경 제거
   ================================================================ */
.related-wrap .another_category,
.related-wrap .another_category table,
.related-wrap .another_category tbody,
.related-wrap .another_category tr,
.related-wrap .another_category th,
.related-wrap .another_category td,
.article-content .another_category,
.article-content .another_category table,
.article-content .another_category tbody,
.article-content .another_category tr,
.article-content .another_category th,
.article-content .another_category td,
.entry-content .another_category,
.entry-content .another_category table,
.entry-content .another_category tbody,
.entry-content .another_category tr,
.entry-content .another_category th,
.entry-content .another_category td {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.related-wrap .another_category table,
.article-content .another_category table,
.entry-content .another_category table {
  border: none !important;
}

.related-wrap .another_category th,
.related-wrap .another_category td,
.article-content .another_category th,
.article-content .another_category td,
.entry-content .another_category th,
.entry-content .another_category td {
  border-bottom: 1px solid var(--accent-lt, #f4c0d1) !important;
  color: var(--text-muted, #aaaaaa) !important;
}

.related-wrap .another_category a,
.article-content .another_category a,
.entry-content .another_category a {
  color: var(--text-muted, #aaaaaa) !important;
  background: transparent !important;
}

.related-wrap .another_category a:hover,
.article-content .another_category a:hover,
.entry-content .another_category a:hover {
  color: var(--accent, #d4537e) !important;
}

/* ================================================================
   관리자 수정/삭제 버튼 보정
   ================================================================ */
.post-admin {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-top: 12px !important;
}

.admin-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-family: inherit !important;
  color: var(--text-muted, #aaaaaa) !important;
  background: transparent !important;
  border: 1px solid var(--accent-lt, #f4c0d1) !important;
  padding: 4px 11px !important;
  text-decoration: none !important;
  border-radius: 20px !important;
  cursor: pointer !important;
}

.admin-btn:hover {
  background: var(--accent-pale, #fbeaf0) !important;
  color: var(--accent, #d4537e) !important;
}

.admin-btn--del:hover {
  background: #fff0f3 !important;
  color: #c0476a !important;
}

/* ================================================================
   상단으로 이동 버튼
   ================================================================ */
.to-top-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent-lt, #f4c0d1);
  border-radius: 50%;
  background: var(--bg-card, #ffffff);
  color: var(--accent, #d4537e);
  font-size: 11px;
  font-family: inherit;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 14px var(--shadow, rgba(212,83,126,0.12));
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background 0.15s;
}

.to-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top-btn:hover {
  background: var(--accent-pale, #fbeaf0);
}

@media (max-width: 480px) {
  .to-top-btn {
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    font-size: 10px;
  }
}

/* ================================================================
   코드블럭 복사 버튼
   ================================================================ */
.entry-content pre,
.contents_style pre,
.article-content pre {
  position: relative !important;
}

.code-copy-btn {
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 2;
  padding: 3px 9px;
  border: 1px solid var(--accent-lt, #f4c0d1);
  border-radius: 20px;
  background: var(--bg-card, #ffffff);
  color: var(--accent, #d4537e);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.88;
}

.code-copy-btn:hover {
  background: var(--accent-pale, #fbeaf0);
}

.code-copy-btn.is-copied {
  background: var(--accent, #d4537e);
  color: #ffffff;
  border-color: var(--accent, #d4537e);
}

/* ================================================================
   이미지 캡션 디자인
   ================================================================ */
.entry-content figcaption,
.contents_style figcaption,
.article-content figcaption,
.entry-content .imageblock .cap1,
.contents_style .imageblock .cap1,
.article-content .imageblock .cap1,
.entry-content .caption,
.contents_style .caption,
.article-content .caption {
  display: block !important;
  margin: 8px auto 22px !important;
  text-align: center !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--text-muted, #aaaaaa) !important;
  letter-spacing: 0.3px !important;
}

.entry-content figcaption::before,
.contents_style figcaption::before,
.article-content figcaption::before,
.entry-content .imageblock .cap1::before,
.contents_style .imageblock .cap1::before,
.article-content .imageblock .cap1::before {
  content: 'caption. ';
  color: var(--accent-lt, #f4c0d1);
  font-size: 10px;
  letter-spacing: 1px;
}

/* ================================================================
   빈 목록 화면 디자인
   ================================================================ */
.list-empty,
.empty {
  position: relative !important;
  max-width: 420px !important;
  margin: 44px auto 70px !important;
  padding: 42px 24px !important;
  text-align: center !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px dashed var(--accent-lt, #f4c0d1) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 14px var(--shadow, rgba(212,83,126,0.10)) !important;
  color: var(--text-muted, #aaaaaa) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

.list-empty::before,
.empty::before {
  content: 'NO POST';
  display: block;
  margin-bottom: 10px;
  color: var(--accent, #d4537e);
  font-size: 11px;
  letter-spacing: 2px;
}

.list-empty::after,
.empty::after {
  content: '아직 등록된 글이 없어요.';
  display: block;
  margin-top: 4px;
  color: var(--text-muted, #aaaaaa);
  font-size: 13px;
}

/* ================================================================
   Mobile Double Lace Safe Area
   ================================================================ */
@media (max-width: 480px) {
  .site-main {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  .lace-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 72px !important;
  }

  .post-item,
  .post-view,
  .guestbook-wrap,
  .protected-view {
    overflow: visible !important;
  }
}

/* ================================================================
   Mono Theme Grid Background Visibility
   ================================================================ */
.theme-mono.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.13) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

/* ================================================================
   Protected Article Duplicate Output Guard
   ================================================================ */

/* 비밀글 폼이 있는 경우, 그 아래 일반 본문 영역을 즉시 숨김 */
.protected-wrap ~ .contents_style,
.protected-wrap ~ .entry-content,
.protected-wrap ~ .post-reaction,
.protected-wrap ~ .post-tags,
.protected-wrap ~ .related-wrap,
.protected-wrap ~ .post-nav,
.protected-wrap ~ .comments-section {
  display: none !important;
}

/* 최신 브라우저 보정: 비밀글 카드 내부의 일반 출력 영역 숨김 */
.post-view:has(.protected-wrap) > .contents_style,
.post-view:has(.protected-wrap) > .entry-content,
.post-view:has(.protected-wrap) > .post-reaction,
.post-view:has(.protected-wrap) > .post-tags,
.post-view:has(.protected-wrap) > .related-wrap,
.post-view:has(.protected-wrap) > .post-nav,
.post-view:has(.protected-wrap) > .comments-section {
  display: none !important;
}

/* ================================================================
   Protected Article Output Guard
   ================================================================ */
html.is-protected-article .post-view > .contents_style,
html.is-protected-article .post-view > .entry-content,
html.is-protected-article .post-view > .post-reaction,
html.is-protected-article .post-view > .post-tags,
html.is-protected-article .post-view > .related-wrap,
html.is-protected-article .post-view > .post-nav,
html.is-protected-article .post-view > .comments-section {
  display: none !important;
}

/* ================================================================
   홈 글 목록 강제 표시
   ================================================================ */
body#tt-body-index .index-list,
body#tt-body-index .index-card-wrap {
  display: block !important;
}

/* ================================================================
   홈에서 글 상세 카드 숨김
   ================================================================ */
body#tt-body-index .lace-wrap:has(.post-view) {
  display: none !important;
}

body#tt-body-index .index-list,
body#tt-body-index .index-card-wrap {
  display: none !important;
}

body#tt-body-page .list-result-wrap,
body#tt-body-page .pagination,
body#tt-body-page .list-header {
  display: none !important;
}

body#tt-body-index .protected-wrap,
body#tt-body-category .protected-wrap,
body#tt-body-search .protected-wrap,
body#tt-body-tag .protected-wrap {
  display: none !important;
}

body#tt-body-category .index-list {
  display: none !important;
}