@charset "UTF-8";

/* ==========================================
   Variables & Reset
========================================== */
:root {
  --bg-dark: #0a0f1a;
  --glass-bg: rgba(20, 25, 35, 0.5);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  --accent-cyan: #00f2fe;
  --accent-violet: #8b5cf6;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-mono: 'D2Coding', 'Fira Code', Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; background-color: var(--bg-dark); color: var(--text-main); font-family: var(--font-sans); line-height: 1.6; letter-spacing: -0.02em; word-break: keep-all; }
a { color: inherit; text-decoration: none; transition: all 0.2s; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font-family: inherit; outline: none; }

/* ==========================================
   Wet & Glow Background Effects
========================================== */
.bg-glow {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: radial-gradient(circle at 15% 20%, rgba(0, 242, 254, 0.08) 0%, transparent 40%),
              radial-gradient(circle at 85% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 40%);
  z-index: -2; pointer-events: none;
}
.bg-glass {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  backdrop-filter: blur(80px); -webkit-backdrop-filter: blur(80px);
  z-index: -1; pointer-events: none;
}

/* ==========================================
   Glass Panel Component
========================================== */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
}

/* ==========================================
   Header & Custom Category Board
========================================== */
#header { position: sticky; top: 0; z-index: 100; border-radius: 0 0 16px 16px; border-top: none; padding: 20px 0; transition: transform 0.28s ease, opacity 0.2s ease, box-shadow 0.2s ease; will-change: transform;}
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.logo { margin-bottom: 20px; }
.logo a { font-size: 1.4rem; font-weight: 700; color: var(--text-main); }

.cat-board { display: flex; flex-direction: column; gap: 12px; }
.cat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-row.sub-row { padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.1); }
.cat-block {
  padding: 10px 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px; color: #cbd5e1; font-size: 0.95rem; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.cat-block:hover { background: rgba(255, 255, 255, 0.08); }
.cat-block.active {
  border-color: var(--accent-cyan); color: var(--accent-cyan);
  background: rgba(0, 242, 254, 0.08); box-shadow: 0 0 12px rgba(0, 242, 254, 0.15);
}
.cat-block .c_cnt { font-size: 0.8rem; opacity: 0.6; font-weight: 400; }

.header-category-strip {
  --category-strip-height: 0px;
  overflow: hidden;
  max-height: var(--category-strip-height);
  opacity: 1;
  transform: translateY(0);
  margin-top: 18px;
  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    transform 0.28s ease,
    margin-top 0.28s ease;
  will-change: max-height, transform, opacity;
}

/* 기존 cat-board에 margin-top이 있으면 공백이 남을 수 있으니 제거 */
#custom-category-board.cat-board {
  margin-top: 0 !important;
}

/* 아래로 스크롤하면 카테고리 줄만 숨김 */
#header.category-strip-hidden .header-category-strip {
  max-height: 0 !important;
  opacity: 0;
  transform: translateY(-10px);
  margin-top: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .header-category-strip {
    transition: none;
  }
}
/* ==========================================
   Layout
========================================== */
#wrap { max-width: 1200px; margin: 32px auto; padding: 0 24px; display: flex; gap: 32px; align-items: flex-start; }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
#sidebar { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }

/* ==========================================
   Main Content - Lists & Cards
========================================== */
.list-header { padding: 24px; margin-bottom: 8px; }
.list-title { font-size: 1.2rem; color: var(--accent-cyan); }
.list-title span { color: var(--text-muted); font-size: 0.95rem; }
.list-desc { margin-top: 8px; color: var(--text-muted); font-size: 0.95rem; }

.article-wrap { display: flex; flex-direction: column; gap: 24px; }

.post-card { display: flex; gap: 24px; padding: 24px; transition: transform 0.3s, border-color 0.3s; }
.post-card:hover { transform: translateY(-4px); border-color: rgba(0, 242, 254, 0.4); }
.post-thumb { flex-shrink: 0; width: 220px; height: 150px; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,0.2); display: block; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.post-card:hover .post-thumb img { transform: scale(1.05); }
.post-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.post-category { font-size: 0.85rem; color: var(--accent-cyan); font-weight: 600; margin-bottom: 8px; display: inline-block; }
.post-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; line-height: 1.4; }
.post-title a:hover { color: var(--accent-cyan); }
.post-summary { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-date { font-size: 0.85rem; color: var(--text-muted); }

/* ==========================================
   Main Content - Post Detail
========================================== */
.post-detail { padding: 40px; }
.post-header { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--glass-border); }
.post-header .post-title { font-size: 2rem; margin: 12px 0; line-height: 1.3; }
.post-meta { display: flex; gap: 16px; color: var(--text-muted); font-size: 0.9rem; }

/* Article Body Typography */
.post-content { font-size: 1.05rem; line-height: 1.8; color: #cbd5e1; }
.post-content p { margin-bottom: 24px; }
.post-content h2, .post-content h3, .post-content h4 { color: var(--text-main); margin: 40px 0 16px; font-weight: 700; }
.post-content h2 { font-size: 1.6rem; border-bottom: 1px solid var(--glass-border); padding-bottom: 8px; }
.post-content h3 { font-size: 1.3rem; color: var(--accent-cyan); }
.post-content a { color: var(--accent-cyan); border-bottom: 1px dashed var(--accent-cyan); }
.post-content a:hover { border-bottom-style: solid; }
/* 본문 안 <b> / <strong> 강조 */
.post-content b,
.post-content strong,
#article-view b,
#article-view strong,
.article-view b,
.article-view strong {
  color: #b8fff2 !important;
  font-weight: 800 !important;
  background: linear-gradient(
    transparent 62%,
    rgba(111, 255, 219, 0.16) 62%
  );
  padding: 0 0.08em;
  border-radius: 0.2em;
  text-shadow: 0 0 10px rgba(111, 255, 219, 0.08);
}
.post-content ul, .post-content ol { margin-bottom: 24px; padding-left: 24px; }
.post-content li { margin-bottom: 8px; }

/* Tables */
.post-content table, #article-view table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.post-content th, #article-view table th { background: rgba(255,255,255,0.1) !important; color: #fff !important; border: 1px solid var(--glass-border) !important; padding: 12px; text-align: left; }
.post-content td, #article-view table td { background: transparent !important; border: 1px solid var(--glass-border) !important; color: var(--text-main) !important; padding: 12px; }

/* Blockquotes */
.post-content blockquote, #article-view blockquote[data-ke-style] {
  background: rgba(0, 0, 0, 0.3) !important; border: 1px solid var(--glass-border) !important;
  border-left: 4px solid var(--accent-cyan) !important; color: var(--text-main) !important;
  padding: 16px 24px !important; border-radius: 0 8px 8px 0 !important; box-shadow: none !important; text-align: left !important; margin-bottom: 24px;
}
.post-content blockquote *, #article-view blockquote[data-ke-style] * { color: var(--text-main) !important; }

/* Code Blocks & Syntax Highlighting */
.post-content pre, #article-view pre, .hljs {
  background-color: #0f172a !important; border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important; padding: 20px !important; margin-bottom: 24px; overflow-x: auto; box-shadow: inset 0 0 20px rgba(0,0,0,0.5) !important;
}
.post-content pre code, #article-view pre code, .hljs { font-family: var(--font-mono) !important; color: #38bdf8 !important; font-size: 0.95rem !important; }
.post-content p > code, #article-view p > code { background: rgba(56, 189, 248, 0.15) !important; color: #38bdf8 !important; padding: 2px 6px !important; border-radius: 4px !important; font-family: var(--font-mono) !important; font-size: 0.9em !important; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag { color: #f43f5e !important; }
.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-addition { color: #10b981 !important; }
.hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta { color: #64748b !important; font-style: italic; }
.hljs-variable, .hljs-template-variable, .hljs-selector-id, .hljs-selector-class { color: #8b5cf6 !important; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link { color: #f59e0b !important; }

/* Tags */
.post-tags { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--glass-border); }
.post-tags strong { color: var(--accent-cyan); margin-right: 8px; }
.post-tags a { display: inline-block; margin-right: 8px; color: var(--text-muted); background: rgba(255,255,255,0.05); padding: 4px 12px; border-radius: 20px; font-size: 0.9rem; }
.post-tags a:hover { background: rgba(0, 242, 254, 0.15); color: var(--accent-cyan); }

/* ==========================================
   Comments & Guestbook
========================================== */
.post-comments, .guestbook-wrap { margin-top: 40px; }
.section-title { font-size: 1.3rem; margin-bottom: 24px; border-bottom: 1px solid var(--glass-border); padding-bottom: 12px; color: var(--accent-cyan); }
.guestbook-wrap { padding: 40px; }

/* 댓글창 흰색 배경 강제 */
.tt_cmt_input, .tt_cmt_input textarea, .post-comments textarea, .guestbook-wrap textarea,
.post-comments input[type="text"], .post-comments input[type="password"],
.guestbook-wrap input[type="text"], .guestbook-wrap input[type="password"] {
  background-color: #ffffff !important; color: #222222 !important; border: 1px solid #cccccc !important; border-radius: 8px !important; padding: 12px !important;
}
.post-comments textarea::placeholder, .guestbook-wrap textarea::placeholder { color: #999999 !important; }
.post-comments .btn_register, .guestbook-wrap .btn_register { color: #000 !important; background: var(--accent-cyan) !important; font-weight: bold; border: none; border-radius: 8px; padding: 10px 20px; }

/* 댓글 작성자 이름 및 본문 색상 */
span.tt_txt_user, a.tt-link-user, .tt_user_name { color: #f8fafc !important; font-weight: 600 !important; }
a.tt-link-user:hover { color: var(--accent-cyan) !important; }
div.tt-cmt, .tt_desc { color: #cbd5e1 !important; }

/* ==========================================
   Pagination (페이징 UI 완벽 정돈)
========================================== */
.pagination { display: flex !important; justify-content: center !important; align-items: center !important; padding: 30px 0 !important; gap: 8px !important; }
.pagination .pages { display: flex !important; gap: 8px !important; align-items: center !important; }
.pagination a, .pagination .btn-prev, .pagination .btn-next, .pagination .num {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 36px !important; height: 36px !important; padding: 0 12px !important;
  border-radius: 8px !important; color: var(--text-muted) !important;
  background: rgba(255,255,255,0.05) !important; border: 1px solid var(--glass-border) !important;
  font-size: 0.95rem !important; text-decoration: none !important; box-sizing: border-box !important;
  position: relative !important; overflow: hidden !important; cursor: pointer !important;
}
.pagination a:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
.pagination a:not([href]) { opacity: 0.3 !important; pointer-events: none !important; cursor: default !important; }

/* 티스토리 현재 페이지 span 덮어쓰기 (이중 박스 해결) */
.pagination .num span { background: transparent !important; color: inherit !important; border: none !important; padding: 0 !important; }
.pagination .num span.selected {
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--accent-cyan) !important; color: #000 !important; font-weight: bold !important;
  width: 100% !important; height: 100% !important; z-index: 1 !important;
}

/* ==========================================
   Sidebar
========================================== */
.sidebar-module { padding: 24px; }
.module-title { font-size: 1.05rem; color: var(--accent-cyan); margin-bottom: 16px; border-bottom: 1px solid var(--glass-border); padding-bottom: 8px; }

.profile-module { text-align: center; }
.profile-img { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 16px; object-fit: cover; border: 2px solid var(--glass-border); }
.profile-name { font-size: 1.1rem; margin-bottom: 8px; }
.profile-desc { font-size: 0.85rem; color: var(--text-muted); }

.search-module input { width: 100%; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(0,0,0,0.2); color: #fff; margin-bottom: 8px; }
.search-module button { width: 100%; padding: 12px; border-radius: 8px; border: none; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; transition: background 0.2s; }
.search-module button:hover { background: var(--accent-cyan); color: #000; font-weight: bold; }

.list-module li { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.list-module a { color: var(--text-muted); font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.list-module a:hover { color: var(--accent-cyan); }
.cnt { font-size: 0.8rem; color: var(--accent-violet); background: rgba(139, 92, 246, 0.1); padding: 2px 6px; border-radius: 12px; margin-left: 8px; }

.counter-module p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 6px; display: flex; justify-content: space-between; }

/* ==========================================
   Footer
========================================== */
#footer { margin-top: 60px; border-radius: 16px 16px 0 0; border-bottom: none; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 24px; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 0.9rem; }
.footer-links { display: flex; gap: 16px; }
.footer-links a:hover { color: var(--accent-cyan); }

/* ==========================================
    기타 플러그인 & 디테일 픽스
========================================== */
/* 네임카드 다크 테마화 */
div.tt_box_namecard {
  background: rgba(30, 41, 59, 0.45) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; margin-top: 40px !important; padding: 24px !important;
}
div.tt_box_namecard .tt_txt_name { color: #f8fafc !important; }
div.tt_box_namecard .tt_txt_desc { color: #94a3b8 !important; }
div.tt_box_namecard .tt_txt_info { color: #cbd5e1 !important; }
a.tt_tit_cont, div.tt_box_namecard a.tt_tit_cont { color: #f8fafc !important; font-weight: 700 !important; }
a.tt_tit_cont:hover { color: var(--accent-cyan) !important; }

/* 카테고리의 다른 글 플러그인 다크 테마화 */
.another_category { border: 1px solid var(--glass-border) !important; background: rgba(255, 255, 255, 0.02) !important; border-radius: 12px !important; padding: 20px !important; margin-top: 40px !important; }
.another_category h4 { color: #f8fafc !important; font-size: 1.1rem !important; border-bottom: none !important; margin-top: 0 !important; }
.another_category table th, .another_category table td { border: none !important; background: transparent !important; }
.another_category a { color: #cbd5e1 !important; border-bottom: none !important; text-decoration: none !important; }
.another_category a:hover { color: var(--accent-cyan) !important; }

/* 새 글(N) 아이콘 잘림 현상 해결 */
img[src*="new_ico"], img[alt="N"], img[alt="new"] { display: inline-block !important; vertical-align: middle !important; margin-left: 6px !important; padding: 0 !important; width: auto !important; height: auto !important; max-height: 14px !important; overflow: visible !important; }

/* ==========================================
   Responsive (Mobile)
========================================== */
@media (max-width: 992px) {
  #wrap { flex-direction: column; }
  #sidebar { width: 100%; }
  .post-card { flex-direction: column; }
  .post-thumb { width: 100%; height: auto; aspect-ratio: 16/9; }
  .post-detail { padding: 24px; }
  .footer-inner { flex-direction: column; gap: 16px; }
}

/* ==========================================
    페이징 버튼 크기 강제 고정 (늘어남 완벽 차단)
========================================== */

/* 1. 전체 컨테이너: 내부 요소들이 절대 늘어나지 않도록 설정 */
.pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 40px 0 !important;
}

/* 2. 숫자들을 감싸는 영역: 자식 요소만큼만 너비를 가짐 */
.pagination .pages {
    display: flex !important;
    gap: 8px !important;
    width: auto !important; /* 중요: 너비를 자동(자식만큼)으로 설정 */
    flex: none !important;  /* 중요: 절대 공간을 채우려고 늘어나지 않음 */
}

/* 3. 모든 버튼(이전, 다음, 숫자) 공통: 고정 크기 및 늘어남 방지 */
.pagination a, 
.pagination .num, 
.pagination .btn-prev, 
.pagination .btn-next {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 크기 설정 */
    min-width: 40px !important; 
    max-width: 80px !important; /* 너무 커지는 것 방지 */
    height: 40px !important;
    
    /* 늘어남 방지 핵심 */
    flex: none !important; 
    flex-grow: 0 !important;
    
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* 4. 숫자 버튼만 따로 가로폭 제한 (정사각형 유지) */
.pagination a.num {
    width: 40px !important;
}

/* 5. 현재 페이지 (하늘색 강조된 부분) */
.pagination .num span.selected,
.pagination .num.selected {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: #00fbff !important; /* 형광 시안색 */
    color: #000 !important;
    font-weight: bold !important;
    border-radius: 7px !important;
}

/* 6. '이전', '다음' 글자 버튼은 글자 수에 맞게 약간 더 넓게 */
.pagination .btn-prev, 
.pagination .btn-next {
    width: auto !important;
    padding: 0 15px !important;
}

/* 7. 비활성화된 상태 (페이지 없을 때) */
.pagination a:not([href]), 
.pagination .no-more {
    opacity: 0.2 !important;
    cursor: default !important;
}

/* ==========================================
    페이징 UI 최종 정돈 (Wet & Glass Style)
========================================== */

/* 전체 컨테이너: 유리 질감 패널 */
.pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 20px !important;
  margin: 40px auto !important;
  max-width: fit-content !important; /* 번호 개수에 맞춰 너비 자동 조절 */
}

/* 숫자 버튼들을 일렬로 나열하는 핵심 영역 */
.pagination .pages {
  display: flex !important;
  flex-direction: row !important; /* 가로 정렬 강제 */
  align-items: center !important;
  gap: 8px !important;
}

/* 모든 페이징 버튼 공통 (숫자, 이전, 다음) */
.pagination a, 
.pagination .num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--glass-border) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* 마우스 오버 효과 */
.pagination a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/*  중요: 티스토리가 현재 페이지에 삽입하는 span 스타일링 (이중 박스 방지) */
.pagination .num span.selected {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-cyan) !important; /* 테마 포인트 컬러 (시안) */
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.4) !important;
}

/* 현재 페이지 버튼 자체의 레이아웃 보정 */
.pagination .num {
  position: relative !important;
}

/* 이전/다음 버튼이 없을 때 비활성화 처리 */
.pagination .no-more-prev,
.pagination .no-more-next {
  opacity: 0.2 !important;
  pointer-events: none !important;
  filter: grayscale(1);
}

/* 모바일 대응: 페이지가 많아지면 자연스럽게 줄바꿈 */
@media (max-width: 768px) {
  .pagination {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .pagination .pages {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

.profile-module {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  margin: 0 auto 18px;
  object-fit: cover;
  border: 2px solid var(--glass-border);
}

.profile-name {
  font-size: 1.9rem;
  margin-bottom: 10px;
  line-height: 1.2;
}

.profile-desc {
  max-width: 250px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
  word-break: keep-all;
}

.profile-actions-wrap {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 230px;
  margin-top: 20px;
}

.profile-subscribe,
.profile-actions {
  width: 100%;
}

.profile-subscribe .btn_subscription:not(button):not(a) {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

.profile-subscribe button.btn_subscription,
.profile-subscribe a.btn_subscription,
.profile-subscribe .btn_subscription button,
.profile-subscribe .btn_subscription .btn_tool,
.profile-subscribe button.btn_subscription.btn_toolbar,
.profile-subscribe button.btn_subscription.btn_menu_toolbar,
.profile-subscribe .btn_tool {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 242, 254, 0.28) !important;
  background: rgba(0, 242, 254, 0.12) !important;
  background-image: none !important;
  color: var(--accent-cyan) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: none !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.profile-subscribe button.btn_subscription:hover,
.profile-subscribe a.btn_subscription:hover,
.profile-subscribe .btn_subscription button:hover,
.profile-subscribe .btn_subscription .btn_tool:hover,
.profile-subscribe .btn_tool:hover {
  border-color: rgba(0, 242, 254, 0.42) !important;
  background: rgba(0, 242, 254, 0.18) !important;
  color: var(--accent-cyan) !important;
}

.profile-subscribe button.btn_subscription::before,
.profile-subscribe button.btn_subscription::after,
.profile-subscribe a.btn_subscription::before,
.profile-subscribe a.btn_subscription::after,
.profile-subscribe .btn_subscription button::before,
.profile-subscribe .btn_subscription button::after,
.profile-subscribe .btn_subscription .btn_tool::before,
.profile-subscribe .btn_subscription .btn_tool::after,
.profile-subscribe .btn_tool::before,
.profile-subscribe .btn_tool::after {
  display: none;
  content: none;
}

.profile-subscribe .btn_subscription .txt_tool_id,
.profile-subscribe .btn_subscription .img_common_tistory,
.profile-subscribe .btn_subscription [class*="ico_"],
.profile-subscribe .btn_subscription img {
  display: none !important;
}

.profile-subscribe .btn_subscription .txt_state,
.profile-subscribe .btn_subscription button .txt_state,
.profile-subscribe .btn_subscription .btn_tool .txt_state,
.profile-subscribe .btn_tool .txt_state {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  font: inherit !important;
  font-style: normal !important;
  color: inherit !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

.profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-actions--admin:not(.member) {
  display: none;
}

.profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.profile-btn:hover {
  border-color: rgba(0, 242, 254, 0.35);
  background: rgba(0, 242, 254, 0.08);
  color: var(--accent-cyan);
}

.profile-btn--primary {
  background: rgba(0, 242, 254, 0.12);
  border-color: rgba(0, 242, 254, 0.28);
  color: var(--accent-cyan);
}

.profile-btn--primary:hover {
  background: rgba(0, 242, 254, 0.18);
}

/* 모바일에서는 두 줄로 쌓기 */
@media (max-width: 768px) {
  .profile-actions {
    grid-template-columns: 1fr;
  }

  .profile-actions-wrap {
    max-width: 220px;
  }
}

.post-header {
  position: relative;
}

.admin-menu {
  position: absolute;
  top: 0;
  right: 0;
}

.admin-menu summary {
  list-style: none;
}

.admin-menu summary::-webkit-details-marker {
  display: none;
}

.admin-menu__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-menu__button:hover {
  border-color: rgba(6, 182, 212, 0.35);
  background: rgba(6, 182, 212, 0.08);
}

.admin-menu__button svg {
  width: 18px;
  height: 18px;
  fill: #cbd5e1;
}

.admin-menu[open] .admin-menu__button svg,
.admin-menu__button:hover svg {
  fill: var(--accent-cyan);
}

.admin-menu__list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
  z-index: 50;
}

.admin-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.92rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-menu__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent-cyan);
}

.admin-menu__item--danger:hover {
  color: #f87171;
}

@media (max-width: 768px) {
  .admin-menu {
    top: -4px;
    right: -4px;
  }

  .admin-menu__list {
    min-width: 150px;
  }
}

/* ===== Reading tools ===== */

/* 진행도 바 */
#reading-progress {
  position: fixed;
  top: 0px;
  left: 0;
  width: 105%;
  height: 4px;
  z-index: 300;
  pointer-events: none;
}

#reading-progress .reading-progress__bar {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet));
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.35);
  transition: width 0.08s linear;
}

/* 목차 */
.reading-toc {
  margin: 0 0 28px;
  padding: 18px;
}

.reading-toc__title {
  display: block;
  margin-bottom: 12px;
  color: var(--accent-cyan);
  font-size: 0.95rem;
  font-weight: 700;
}

.reading-toc__list {
  display: grid;
  gap: 8px;
}

.reading-toc__list a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.18s ease;
}

.reading-toc__list a:hover {
  color: var(--text-main);
  border-color: rgba(0, 242, 254, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.reading-toc__list a.is-active {
  color: var(--accent-cyan);
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.08);
}

.reading-toc__list a[data-level="3"] {
  margin-left: 14px;
  font-size: 0.94rem;
}

/* 제목 앵커 */
.post-content h2,
.post-content h3,
.post-content h4,
#article-view h2,
#article-view h3,
#article-view h4,
.article-view h2,
.article-view h3,
.article-view h4 {
  scroll-margin-top: 110px;
}

.heading-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  min-width: 24px;
  height: 24px;
  border-radius: 8px;
  border-bottom: none !important;
  color: var(--text-muted) !important;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
  font-weight: 700;
  vertical-align: middle;
  opacity: 0;
  transform: translateY(-1px);
  transition: all 0.18s ease;
}

.post-content h2:hover .heading-anchor,
.post-content h3:hover .heading-anchor,
.post-content h4:hover .heading-anchor,
#article-view h2:hover .heading-anchor,
#article-view h3:hover .heading-anchor,
#article-view h4:hover .heading-anchor,
.article-view h2:hover .heading-anchor,
.article-view h3:hover .heading-anchor,
.article-view h4:hover .heading-anchor {
  opacity: 1;
}

.heading-anchor:hover {
  color: var(--accent-cyan) !important;
  background: rgba(0, 242, 254, 0.08);
}

/* 코드 복사 버튼 */
.post-content pre,
#article-view pre,
.article-view pre {
  position: relative;
  padding-top: 55px !important;
}

.code-copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  z-index: 2;
}

.code-copy-btn:hover {
  color: var(--accent-cyan);
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.08);
}

/* 모바일 */
@media (max-width: 992px) {
  .reading-toc {
    padding: 16px;
  }

  .reading-toc__list a {
    padding: 8px 10px;
    font-size: 0.93rem;
  }

  .reading-toc__list a[data-level="3"] {
    margin-left: 10px;
  }

  .heading-anchor {
    opacity: 1;
  }
}

/* ==========================================
   Read Time
========================================== */
.read-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-cyan);
  font-weight: 600;
}

.read-time::before {
  content: '·';
  color: var(--text-muted);
  font-weight: 400;
}

/* ==========================================
   Lightbox
========================================== */
.blog-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.blog-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.blog-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 18, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.blog-lightbox__inner {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1200px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.blog-lightbox__image {
  max-width: 100%;
  max-height: calc(88vh - 60px);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.blog-lightbox__caption {
  max-width: min(92vw, 900px);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.blog-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.blog-lightbox__close:hover {
  background: rgba(0, 242, 254, 0.14);
  color: var(--accent-cyan);
}

/* 본문 이미지에 확대 힌트 */
.post-detail .post-content img {
  cursor: zoom-in;
}

@media (max-width: 768px) {
  .blog-lightbox__inner {
    width: 94vw;
  }

  .blog-lightbox__close {
    top: 12px;
    right: 12px;
  }
}

/* ==========================================
   Code Toolbar
========================================== */
.post-content pre,
#article-view pre,
.article-view pre {
  position: relative;
  padding-top: 58px !important;
}

.code-toolbar {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 2;
}

.code-toolbar__left,
.code-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.code-lang {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.code-wrap-toggle,
.code-toolbar .code-copy-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.18s ease;
}

.code-wrap-toggle:hover,
.code-toolbar .code-copy-btn:hover {
  border-color: rgba(6, 182, 212, 0.28);
  background: rgba(6, 182, 212, 0.08);
  color: var(--accent-cyan);
}

.code-wrap-toggle.is-active {
  border-color: rgba(6, 182, 212, 0.32);
  background: rgba(6, 182, 212, 0.1);
  color: var(--accent-cyan);
}

.code-toolbar .code-copy-btn {
  position: static !important;
  inset: auto !important;
}

.post-content pre.is-wrap,
#article-view pre.is-wrap,
.article-view pre.is-wrap {
  overflow-x: visible !important;
}

.post-content pre.is-wrap code,
#article-view pre.is-wrap code,
.article-view pre.is-wrap code,
.post-content pre.is-wrap,
#article-view pre.is-wrap,
.article-view pre.is-wrap {
  white-space: pre-wrap !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ==========================================
   최근 본 글 / 이어보기
========================================== */
.recent-history-sidebar {
  margin-top: 18px;
}

.continue-reading {
  margin-top: 28px;
  padding: 20px;
}

.continue-reading__title {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.recent-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.recent-history__item {
  margin: 0;
  padding: 0;
}

.recent-history__link {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.03);
  text-decoration: none;
  transition: all 0.18s ease;
}

.recent-history__link:hover {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.06);
}

.recent-history__cat {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.recent-history__title {
  display: block;
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.5;
  word-break: keep-all;
}

.recent-history__date {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

@media (max-width: 992px) {
  .continue-reading {
    margin-top: 22px;
    padding: 16px;
  }

  .recent-history__link {
    padding: 11px 12px;
  }
}
/* 사이드바 모듈 순서 강제 고정 */
#sidebar .profile-module {
  order: 1;
}

#sidebar .counter-module {
  order: 2;
}

#sidebar .search-module {
  order: 3;
}

#sidebar .js-recent-history-sidebar {
  order: 4;
}

#sidebar .list-module {
  order: 5;
}

#sidebar .tags-module {
  order: 6;
}


.search-help {
  margin: 0 0 10px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0.9;
}

.search-help kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
  color: var(--text-main);
  font-size: 0.78rem;
  font-family: inherit;
  text-align: center;
}

/* PC에서만 표시 */
@media (max-width: 992px) {
  .search-help--desktop {
    display: none;
  }
}
/* ==========================================
   연재 네비게이션
========================================== */
.series-nav {
  margin-top: 28px;
  padding: 20px;
}

.series-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.series-nav__eyebrow {
  color: var(--accent-cyan);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.series-nav__category {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.series-nav__category:hover {
  color: var(--accent-cyan);
}

.series-nav__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.series-nav__card {
  display: block;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  text-decoration: none;
  transition: all 0.18s ease;
}

.series-nav__card:hover {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.06);
}

.series-nav__card--empty {
  opacity: 0.65;
}

.series-nav__label {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-cyan);
  font-size: 0.82rem;
  font-weight: 700;
}

.series-nav__title {
  display: block;
  color: var(--text-main);
  font-size: 0.98rem;
  line-height: 1.55;
  word-break: keep-all;
}

.series-nav__date {
  display: block;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

@media (max-width: 768px) {
  .series-nav {
    margin-top: 22px;
    padding: 16px;
  }

  .series-nav__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .series-nav__grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================
   숫자형 연재 네비게이션
========================================== */
.episode-nav {
  margin-top: 28px;
  padding: 20px;
}

.episode-nav__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.episode-nav__eyebrow {
  color: var(--accent-cyan);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.episode-nav__series {
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 700;
}

.episode-nav__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.episode-nav__card {
  display: block;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  text-decoration: none;
  transition: all 0.18s ease;
}

.episode-nav__card:hover {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.06);
}

.episode-nav__card--empty {
  opacity: 0.6;
}

.episode-nav__label {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-cyan);
  font-size: 0.82rem;
  font-weight: 700;
}

.episode-nav__title {
  display: block;
  color: var(--text-main);
  font-size: 0.98rem;
  line-height: 1.55;
  word-break: keep-all;
}

.episode-nav__date {
  display: block;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

@media (max-width: 768px) {
  .episode-nav {
    margin-top: 22px;
    padding: 16px;
  }

  .episode-nav__grid {
    grid-template-columns: 1fr;
  }
}
/* 글 상세 하단의 "카테고리의 다른 글" + TAGS 숨김 */
.post-detail .another_category,
.post-detail .post-tags {
  display: none !important;
}
/*구독하기*/
/* ===== Profile action layout ===== */
.profile-actions-wrap {
  width: 100%;
  max-width: 230px;
  margin-top: 20px;
}

.profile-subscribe {
  width: 100%;
}

/* 티스토리 구독 버튼 바깥 래퍼(div.btn_tool) 정리 */
.profile-subscribe > .btn_tool {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 실제 구독 버튼(button.btn_subscription) */
.profile-subscribe > .btn_tool .btn_subscription,
.profile-subscribe > .btn_tool .btn_menu_toolbar.btn_subscription {
  appearance: none;
  -webkit-appearance: none;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 242, 254, 0.28) !important;
  background: rgba(0, 242, 254, 0.08) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--accent-cyan) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.profile-subscribe > .btn_tool .btn_subscription:hover,
.profile-subscribe > .btn_tool .btn_menu_toolbar.btn_subscription:hover {
  background: rgba(0, 242, 254, 0.14) !important;
  border-color: rgba(0, 242, 254, 0.4) !important;
  color: var(--accent-cyan) !important;
}

/* 구독중 상태 */
.profile-subscribe > .btn_tool .btn_subscription.following,
.profile-subscribe > .btn_tool .btn_menu_toolbar.btn_subscription.following {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--glass-border) !important;
  color: var(--text-main) !important;
}

/* 내부 장식 제거 */
.profile-subscribe > .btn_tool .btn_subscription strong,
.profile-subscribe > .btn_tool .btn_menu_toolbar.btn_subscription strong,
.profile-subscribe > .btn_tool .btn_subscription .img_common_tistory,
.profile-subscribe > .btn_tool .btn_menu_toolbar.btn_subscription .img_common_tistory {
  display: none !important;
}

.profile-subscribe > .btn_tool .btn_subscription em,
.profile-subscribe > .btn_tool .btn_menu_toolbar.btn_subscription em,
.profile-subscribe > .btn_tool .btn_subscription span,
.profile-subscribe > .btn_tool .btn_menu_toolbar.btn_subscription span {
  position: static !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font-style: normal !important;
  font-weight: 600 !important;
  text-indent: 0 !important;
}

/* 관리자 버튼 그룹 */
.profile-actions--admin {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}

.profile-actions--admin:not(.member) {
  display: none !important;
}

.profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.profile-btn:hover {
  border-color: rgba(0, 242, 254, 0.35);
  background: rgba(0, 242, 254, 0.08);
  color: var(--accent-cyan);
}

.profile-btn--primary {
  background: rgba(0, 242, 254, 0.12);
  border-color: rgba(0, 242, 254, 0.28);
  color: var(--accent-cyan);
}

.profile-btn--primary:hover {
  background: rgba(0, 242, 254, 0.18);
}

@media (max-width: 768px) {
  .profile-actions--admin {
    grid-template-columns: 1fr;
  }
}

.counter-module {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.counter-module p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
}

.counter-module p span:last-child {
  color: var(--accent-cyan);
  font-weight: 700;
}
/*목차 스크롤  */
html {
  scroll-behavior: smooth;
}

.post-content h2,
.post-content h3,
.post-content h4 {
  scroll-margin-top: 160px;
}

/* ==========================================
   검색 키워드 하이라이트
========================================== */
.search-hit {
  display: inline;
  padding: 0 0.15em;
  border-radius: 4px;
  background: rgba(250, 204, 21, 0.22);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.18) inset;
  color: #fff;
}

.search-hit-info {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(250, 204, 21, 0.18);
  background: rgba(250, 204, 21, 0.08);
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.search-hit-info strong {
  color: #fde68a;
  font-weight: 700;
}

.post-card .search-hit {
  padding: 0 0.12em;
}

@media (max-width: 768px) {
  .search-hit-info {
    margin-bottom: 14px;
    padding: 9px 11px;
    font-size: 0.84rem;
  }
}
/* ==========================================
   읽던 위치 복원
========================================== */
.resume-reading {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 260;
  width: min(360px, calc(100vw - 24px));
  padding: 16px;
  border-radius: 16px;
  display: grid;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.resume-reading.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.resume-reading__body {
  display: grid;
  gap: 6px;
}

.resume-reading__title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
}

.resume-reading__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.resume-reading__actions {
  display: flex;
  gap: 10px;
}

.resume-reading__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.resume-reading__btn:hover {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.08);
  color: var(--accent-cyan);
}

.resume-reading__btn--primary {
  background: rgba(0, 242, 254, 0.12);
  border-color: rgba(0, 242, 254, 0.28);
  color: var(--accent-cyan);
}

.resume-reading__btn--primary:hover {
  background: rgba(0, 242, 254, 0.18);
}

.resume-reading__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.18s ease;
}

.resume-reading__close:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-main);
}

@media (max-width: 992px) {
  .resume-reading {
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
    width: auto;
    padding: 14px;
  }

  .resume-reading__actions {
    flex-wrap: wrap;
  }

  .resume-reading__btn {
    flex: 1 1 120px;
  }
}
/* ==========================================
   연관 글 추천 카드
========================================== */
.related-posts {
  margin-top: 28px;
  padding: 20px;
}

.related-posts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.related-posts__eyebrow {
  color: var(--accent-cyan);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.related-posts__category {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.related-posts__category:hover {
  color: var(--accent-cyan);
}

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.related-posts__card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  text-decoration: none;
  transition: all 0.18s ease;
}

.related-posts__card:hover {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.06);
}

.related-posts__thumb {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
}

.related-posts__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-posts__thumb--empty::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(0,242,254,0.08), rgba(139,92,246,0.08));
}

.related-posts__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.related-posts__cat {
  display: block;
  margin-bottom: 6px;
  color: var(--accent-cyan);
  font-size: 0.8rem;
  font-weight: 700;
}

.related-posts__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-main);
  font-size: 0.96rem;
  line-height: 1.5;
  word-break: keep-all;
}

.related-posts__date {
  display: block;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

@media (max-width: 768px) {
  .related-posts {
    margin-top: 22px;
    padding: 16px;
  }

  .related-posts__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .related-posts__grid {
    grid-template-columns: 1fr;
  }

  .related-posts__card {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
  }

  .related-posts__thumb {
    width: 76px;
    height: 76px;
  }
}

/* ==========================================
   Search Popover
========================================== */
.search-module {
  position: relative;
  z-index: 40;
}

.search-module {
  position: relative;
  z-index: 40;
  isolation: isolate;
}

.search-module--invalid input {
  border-color: rgba(248, 113, 113, 0.7) !important;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.35);
}

.search-popover {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  z-index: 120;
  display: none;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8, 12, 22, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.42);
}

.search-popover::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 22px;
  width: 16px;
  height: 16px;
  background: rgba(8, 12, 22, 0.98);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-left: 1px solid rgba(255,255,255,0.12);
  transform: rotate(45deg);
}

.search-popover.is-open {
  display: block;
}

.search-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.search-popover__title {
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 700;
}

.search-popover__clear {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.search-popover__clear:hover {
  color: #fda4af;
}

.search-popover__list {
  display: grid;
  gap: 12px;
  max-height: 340px;
  overflow-y: auto;
}

.search-popover__group {
  display: grid;
  gap: 8px;
}

.search-popover__group + .search-popover__group {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.search-popover__group-title {
  padding: 0 2px;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.search-popover__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.search-popover__select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}

.search-popover__select:hover,
.search-popover__select.is-active {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.08);
  color: var(--accent-cyan);
}

.search-popover__text {
  min-width: 0;
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-popover__meta {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

.search-popover__meta--history {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
}

.search-popover__meta--category {
  background: rgba(0, 242, 254, 0.14);
  color: var(--accent-cyan);
}

.search-popover__meta--post {
  background: rgba(139, 92, 246, 0.16);
  color: #c4b5fd;
}

.search-popover__remove {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.search-popover__remove:hover {
  border-color: rgba(253, 164, 175, 0.32);
  background: rgba(253, 164, 175, 0.08);
  color: #fda4af;
}

.search-popover__empty {
  display: none;
  padding: 12px 10px 4px;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

@media (max-width: 992px) {
  .search-popover {
    top: calc(100% + 8px);
    padding: 10px;
  }

  .search-popover__list {
    max-height: 260px;
  }
}
/* ==========================================
   본문 커스텀 UI 블록
========================================== */
.content-banner,
.content-checklist,
.article-view-tools,
.article-summary {
  margin: 28px 0;
}

.content-banner {
  padding: 18px 18px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  box-shadow: var(--glass-shadow);
}

.content-banner__head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}

.content-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  font-size: 1.1rem;
}

.content-banner__meta {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.content-banner__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.content-banner__badge,
.content-banner__date,
.content-banner__extra {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.content-banner__badge {
  background: rgba(255,255,255,0.08);
  color: var(--text-main);
}

.content-banner__date,
.content-banner__extra {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
}

.content-banner__title {
  color: var(--text-main);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
}

.content-banner__body {
  color: #d7e0ec;
  font-size: 0.96rem;
  line-height: 1.75;
}

.content-banner__body > *:last-child {
  margin-bottom: 0 !important;
}

.content-banner--notice {
  border-color: rgba(0, 242, 254, 0.22);
  background: linear-gradient(180deg, rgba(0, 242, 254, 0.08), rgba(255,255,255,0.03));
}

.content-banner--update {
  border-color: rgba(139, 92, 246, 0.24);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.10), rgba(255,255,255,0.03));
}

.content-banner--warning {
  border-color: rgba(251, 191, 36, 0.28);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10), rgba(255,255,255,0.03));
}

.content-banner--success {
  border-color: rgba(52, 211, 153, 0.28);
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.10), rgba(255,255,255,0.03));
}

.content-banner--info,
.content-banner--tip {
  border-color: rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.10), rgba(255,255,255,0.03));
}

.content-checklist {
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  box-shadow: var(--glass-shadow);
}

.content-checklist__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.content-checklist__title-wrap {
  display: grid;
  gap: 6px;
}

.content-checklist__title {
  color: var(--text-main);
  font-size: 1.02rem;
  font-weight: 700;
}

.content-checklist__status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(0, 242, 254, 0.12);
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 700;
}

.content-checklist__score {
  text-align: right;
  display: grid;
  gap: 4px;
}

.content-checklist__score strong {
  color: var(--text-main);
  font-size: 1.08rem;
}

.content-checklist__score span,
.content-checklist__meta,
.content-checklist__note {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.content-checklist__progress {
  height: 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}

.content-checklist__progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet));
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.32);
}

.content-checklist__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.content-checklist__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: 10px;
}

.content-checklist__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
}

.content-checklist__bullet {
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.18);
  position: relative;
}

.content-checklist__text {
  color: #d7e0ec;
  font-size: 0.94rem;
  line-height: 1.65;
}

.content-checklist__item.is-done {
  border-color: rgba(52, 211, 153, 0.22);
  background: rgba(52, 211, 153, 0.08);
}

.content-checklist__item.is-done .content-checklist__bullet {
  border-color: rgba(52, 211, 153, 0.95);
  background: rgba(52, 211, 153, 0.9);
}

.content-checklist__item.is-done .content-checklist__bullet::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 4px;
  height: 9px;
  border-right: 2px solid #082f1f;
  border-bottom: 2px solid #082f1f;
  transform: rotate(40deg);
}

.content-checklist__item.is-doing {
  border-color: rgba(0, 242, 254, 0.22);
  background: rgba(0, 242, 254, 0.06);
}

.content-checklist__item.is-doing .content-checklist__bullet {
  border-color: rgba(0, 242, 254, 0.85);
}

.content-checklist__item.is-doing .content-checklist__bullet::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--accent-cyan);
}

.content-checklist__item.is-hold {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.07);
}

.content-checklist__item.is-hold .content-checklist__bullet {
  border-color: rgba(251, 191, 36, 0.92);
}

.content-checklist__item.is-hold .content-checklist__bullet::after {
  content: '!';
  position: absolute;
  inset: -2px 0 0;
  color: #fde68a;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.content-checklist__note {
  margin-top: 14px;
}

.content-checklist__note > *:last-child {
  margin-bottom: 0 !important;
}

.term-note {
  position: relative;
  display: inline-flex;
  vertical-align: baseline;
}

.term-note__trigger {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--accent-cyan);
  font: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
  cursor: help;
}

.term-note__bubble {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 80;
  width: min(280px, calc(100vw - 40px));
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8, 12, 22, 0.98);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4);
  color: #dbe7f5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.term-note__bubble::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -7px;
  width: 14px;
  height: 14px;
  background: rgba(8, 12, 22, 0.98);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-left: 1px solid rgba(255,255,255,0.12);
  transform: translateX(-50%) rotate(45deg);
}

.term-note__label {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 700;
}

.term-note__desc {
  display: block;
  color: #d7e0ec;
  font-size: 0.86rem;
  line-height: 1.55;
}

.term-note:hover .term-note__bubble,
.term-note:focus-within .term-note__bubble,
.term-note.is-open .term-note__bubble {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.article-view-tools {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
}

.article-view-tools__group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.article-view-tools__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.article-view-tools__btn:hover,
.article-view-tools__btn.is-active {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.1);
  color: var(--accent-cyan);
}

.article-view-tools__help {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.article-summary {
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
}

.article-summary__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.article-summary__title-wrap {
  display: grid;
  gap: 6px;
}

.article-summary__eyebrow {
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.article-summary__title {
  color: var(--text-main);
  font-size: 1.08rem;
  line-height: 1.4;
}

.article-summary__hint {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
  max-width: 240px;
  text-align: right;
}

.article-summary__lead {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.article-summary__lead p {
  margin: 0 !important;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: #dbe7f5;
  font-size: 0.94rem;
  line-height: 1.7;
}

.article-summary__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: 10px;
}

.article-summary__item {
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.article-summary__item-title {
  display: block;
  margin-bottom: 6px;
  color: var(--text-main);
  font-size: 0.94rem;
  font-weight: 700;
}

.article-summary__item-body,
.article-summary__empty {
  margin: 0 !important;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.post-detail.is-summary-active .post-content,
.post-detail.is-summary-active .post-comments,
.post-detail.is-summary-active .js-related-posts,
.post-detail.is-summary-active .related-posts,
.post-detail.is-summary-active .continue-reading,
.post-detail.is-summary-active .episode-nav,
.post-detail.is-summary-active .series-nav,
.post-detail.is-summary-active .reading-toc,
.post-detail.is-summary-active .post-tags {
  display: none !important;
}

body.reading-focus-mode #sidebar,
body.reading-focus-mode #footer,
body.reading-focus-mode .resume-reading,
body.reading-focus-mode .search-hit-info,
body.reading-focus-mode .continue-reading,
body.reading-focus-mode .episode-nav,
body.reading-focus-mode .series-nav,
body.reading-focus-mode .related-posts {
  display: none !important;
}

body.reading-focus-mode #wrap {
  max-width: 940px;
  display: block;
}

body.reading-focus-mode #main {
  width: 100%;
  max-width: 100%;
}

body.reading-focus-mode .post-detail {
  padding: 44px 48px;
}

body.reading-focus-mode #header {
  padding: 12px 0;
}

body.reading-focus-mode #custom-category-board {
  display: none !important;
}

@media (max-width: 992px) {
  .content-banner,
  .content-checklist,
  .article-view-tools,
  .article-summary {
    margin: 22px 0;
  }

  .content-banner,
  .content-checklist,
  .article-summary {
    padding: 16px;
  }

  .content-checklist__head,
  .article-summary__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .content-checklist__score,
  .article-summary__hint {
    text-align: left;
    max-width: none;
  }

  .term-note__bubble {
    left: 0;
    transform: translateX(0) translateY(6px);
  }

  .term-note__bubble::before {
    left: 22px;
    transform: rotate(45deg);
  }

  .term-note:hover .term-note__bubble,
  .term-note:focus-within .term-note__bubble,
  .term-note.is-open .term-note__bubble {
    transform: translateX(0) translateY(0);
  }

  body.reading-focus-mode #wrap {
    padding: 0 16px;
  }

  body.reading-focus-mode .post-detail {
    padding: 24px;
  }
}

@media print {
  html,
  body {
    background: #ffffff !important;
    color: #111111 !important;
  }

  .bg-glow,
  .bg-glass,
  #sidebar,
  #footer,
  #header,
  .resume-reading,
  .reading-toc,
  .article-view-tools,
  .admin-menu,
  .search-hit-info,
  .continue-reading,
  .episode-nav,
  .series-nav,
  .related-posts,
  .post-comments,
  #reading-progress {
    display: none !important;
  }

  #wrap,
  #main,
  .article-wrap,
  .post-detail {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .glass-panel,
  .post-detail,
  .content-banner,
  .content-checklist,
  .article-summary {
    background: #ffffff !important;
    color: #111111 !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .post-header,
  .post-content,
  .post-content *,
  .content-banner *,
  .content-checklist *,
  .article-summary * {
    color: #111111 !important;
  }

  .post-content a,
  .term-note__trigger {
    color: #111111 !important;
    border-bottom-color: #666666 !important;
    text-decoration-color: #666666 !important;
  }

  .post-content pre,
  .post-content code,
  .post-content table,
  .post-content th,
  .post-content td,
  .content-checklist__item,
  .article-summary__item,
  .article-summary__lead p {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #d0d0d0 !important;
    box-shadow: none !important;
  }

  .term-note__bubble {
    display: none !important;
  }

  .post-detail.is-summary-active .article-summary {
    display: block !important;
  }

  .post-detail.is-summary-active .post-content,
  .post-detail.is-summary-active .post-comments,
  .post-detail.is-summary-active .continue-reading,
  .post-detail.is-summary-active .episode-nav,
  .post-detail.is-summary-active .series-nav,
  .post-detail.is-summary-active .related-posts {
    display: none !important;
  }
}

.post-card-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.post-card-badge--notice {
  color: var(--accent-cyan);
  background: rgba(0, 242, 254, 0.08);
  border-color: rgba(0, 242, 254, 0.22);
}

.post-card-badge--update {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(96, 165, 250, 0.22);
}

.post-card-badge--warning {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(251, 191, 36, 0.22);
}

.post-card-badge--tip {
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(167, 139, 250, 0.22);
}
/* ==========================================
   홈 상단 공지 배너 보정
   - JS 변환 전 raw data-ui 배너 fallback
   - JS 변환 후 .content-banner 스타일 보정
   style.css 맨 아래에 추가
========================================== */

#main > .home-banner {
  margin: 0 0 8px;
}

.home-banner > [data-ui="banner"],
.home-banner > .content-banner {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 242, 254, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 242, 254, 0.08), rgba(255,255,255,0.03));
  box-shadow: var(--glass-shadow);
}

/* JS가 아직 변환하지 못한 raw 마크업 fallback */
.home-banner > [data-ui="banner"] {
  margin: 0;
  padding: 56px 20px 18px;
  color: #d7e0ec;
  font-size: 0.96rem;
  line-height: 1.75;
}

/*.home-banner > [data-ui="banner"]::before {
  content: attr(data-title);
  position: absolute;
  top: 18px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0, 242, 254, 0.12);
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}*/

.home-banner > [data-ui="banner"][data-date]::after {
  content: attr(data-date);
  position: absolute;
  top: 18px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

/* JS가 변환한 뒤 최종 모양 보정 */
.home-banner > .content-banner {
  margin: 0;
  padding: 20px 22px 18px;
  border-radius: 18px;
}

.home-banner > .content-banner .content-banner__head {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 10px;
}

.home-banner > .content-banner .content-banner__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(0, 242, 254, 0.10);
}

.home-banner > .content-banner .content-banner__badge {
  background: rgba(0, 242, 254, 0.12);
  color: var(--accent-cyan);
}

.home-banner > .content-banner .content-banner__title {
  font-size: 1.04rem;
  line-height: 1.45;
}

.home-banner > .content-banner .content-banner__body {
  color: #d7e0ec;
  font-size: 0.96rem;
  line-height: 1.75;
}

@media (max-width: 768px) {
  #main > .home-banner {
    margin-bottom: 4px;
  }

  .home-banner > [data-ui="banner"] {
    padding: 52px 16px 16px;
    border-radius: 16px;
    font-size: 0.92rem;
    line-height: 1.7;
  }

  .home-banner > [data-ui="banner"]::before {
    top: 16px;
    left: 16px;
  }

  .home-banner > [data-ui="banner"][data-date]::after {
    top: 16px;
    right: 16px;
  }

  .home-banner > .content-banner {
    padding: 16px 16px 15px;
    border-radius: 16px;
  }

  .home-banner > .content-banner .content-banner__head {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }

  .home-banner > .content-banner .content-banner__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .home-banner > .content-banner .content-banner__title {
    font-size: 0.98rem;
  }

  .home-banner > .content-banner .content-banner__body {
    font-size: 0.92rem;
    line-height: 1.7;
  }
}
/* ==========================================
   로컬 저장형 클릭 체크리스트 보강
========================================== */
.content-checklist__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.content-checklist__hint {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.content-checklist__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.content-checklist__reset:hover {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.08);
  color: var(--accent-cyan);
}

.content-checklist__item {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.content-checklist__item.is-interactive {
  cursor: pointer;
  user-select: none;
}

.content-checklist__item.is-interactive:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.content-checklist__item.is-interactive:focus {
  outline: none;
  border-color: rgba(0, 242, 254, 0.28);
  box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.08);
}

.content-checklist__item.is-interactive:active {
  transform: translateY(0);
}

.content-checklist__state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.content-checklist__item.is-done .content-checklist__state {
  border-color: rgba(52, 211, 153, 0.22);
  background: rgba(52, 211, 153, 0.12);
  color: #86efac;
}

.content-checklist__item.is-doing .content-checklist__state {
  border-color: rgba(0, 242, 254, 0.24);
  background: rgba(0, 242, 254, 0.10);
  color: var(--accent-cyan);
}

.content-checklist__item.is-hold .content-checklist__state {
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
}

.content-checklist__item.is-todo .content-checklist__state {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
}

@media (max-width: 768px) {
  .content-checklist__toolbar {
    align-items: flex-start;
  }

  .content-checklist__item {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .content-checklist__state {
    grid-column: 2 / -1;
    justify-self: flex-start;
    margin-top: 2px;
  }
}
/* ==========================================
   집중 읽기 / 가독성 패널
========================================== */
.post-detail {
  --font-reading-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, "Times New Roman", serif;
  --read-font-scale: 1.05;
  --read-line-height: 1.9;
  --read-paragraph-gap: 28px;
  --read-content-width: 780px;
  --read-font-family: var(--font-sans);
}

.article-reading-panel {
  margin: 28px 0;
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  box-shadow: var(--glass-shadow);
}

.article-reading-panel[hidden] {
  display: none !important;
}

.article-reading-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.article-reading-panel__title-wrap {
  display: grid;
  gap: 6px;
}

.article-reading-panel__eyebrow {
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.article-reading-panel__title {
  color: var(--text-main);
  font-size: 1.04rem;
  line-height: 1.45;
}

.article-reading-panel__close,
.article-reading-panel__reset {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.article-reading-panel__close {
  min-width: 72px;
  height: 38px;
  padding: 0 12px;
}

.article-reading-panel__reset {
  min-height: 38px;
  padding: 0 14px;
}

.article-reading-panel__close:hover,
.article-reading-panel__reset:hover {
  border-color: rgba(0, 242, 254, 0.24);
  background: rgba(0, 242, 254, 0.08);
  color: var(--accent-cyan);
}

.article-reading-panel__grid {
  display: grid;
  gap: 12px;
}

.article-reading-panel__group {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
}

.article-reading-panel__label-wrap {
  display: grid;
  gap: 4px;
}

.article-reading-panel__label {
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 700;
}

.article-reading-panel__label-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.article-reading-panel__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-reading-panel__option {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: #d7e0ec;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.article-reading-panel__option:hover,
.article-reading-panel__option.is-active {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.1);
  color: var(--accent-cyan);
}

.article-reading-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}

.article-reading-panel__hint {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.post-detail .post-content:not(.protected-content) {
  max-width: min(100%, var(--read-content-width));
  margin-left: auto;
  margin-right: auto;
  font-size: calc(1rem * var(--read-font-scale));
  line-height: var(--read-line-height);
  font-family: var(--read-font-family);
  transition: font-size 0.18s ease, line-height 0.18s ease, max-width 0.18s ease;
}

.post-detail .post-content:not(.protected-content) p {
  margin-bottom: var(--read-paragraph-gap);
}

.post-detail .post-content:not(.protected-content) ul,
.post-detail .post-content:not(.protected-content) ol,
.post-detail .post-content:not(.protected-content) blockquote,
.post-detail .post-content:not(.protected-content) pre,
.post-detail .post-content:not(.protected-content) table {
  margin-bottom: calc(var(--read-paragraph-gap) * 0.92);
}

.post-detail .post-content:not(.protected-content) h2,
.post-detail .post-content:not(.protected-content) h3,
.post-detail .post-content:not(.protected-content) h4 {
  scroll-margin-top: 96px;
}

@media (max-width: 992px) {
  .article-reading-panel {
    margin: 22px 0;
    padding: 16px;
  }

  .article-reading-panel__head,
  .article-reading-panel__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .article-reading-panel__option {
    min-width: 58px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.8rem;
  }

  .article-reading-panel__title {
    font-size: 0.98rem;
  }

  .post-detail {
    --read-content-width: 100%;
  }
}

@media print {
  .article-reading-panel {
    display: none !important;
  }

  .post-detail .post-content:not(.protected-content) {
    max-width: none !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    font-family: var(--font-sans) !important;
  }
}
/* ==========================================
   문단 포커스 하이라이트
   - 집중 읽기 모드에서 현재 읽는 블록만 강조
========================================== */

.post-detail .post-content .reading-focus-block {
  transition:
    opacity 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;
  scroll-margin-top: 120px;
}

body.reading-focus-mode .post-detail .post-content .reading-focus-block {
  opacity: 0.48;
}

body.reading-focus-mode .post-detail .post-content .reading-focus-block.is-reading-focus-nearby {
  opacity: 0.74;
}

body.reading-focus-mode .post-detail .post-content .reading-focus-block.is-reading-focus-target {
  opacity: 1;
  background: linear-gradient(90deg, rgba(0, 242, 254, 0.10), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 3px 0 0 rgba(0, 242, 254, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  transform: translateX(2px);
}

body.reading-focus-mode .post-detail .post-content p.reading-focus-block,
body.reading-focus-mode .post-detail .post-content blockquote.reading-focus-block,
body.reading-focus-mode .post-detail .post-content li.reading-focus-block {
  padding: 0.18em 0.72em;
  margin-left: -0.72em;
  margin-right: -0.72em;
}

body.reading-focus-mode .post-detail .post-content h2.reading-focus-block.is-reading-focus-target,
body.reading-focus-mode .post-detail .post-content h3.reading-focus-block.is-reading-focus-target {
  box-shadow:
    inset 0 -2px 0 rgba(0, 242, 254, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.reading-focus-mode .post-detail .post-content h2.reading-focus-block,
body.reading-focus-mode .post-detail .post-content h3.reading-focus-block {
  padding: 0.12em 0.28em 0.18em;
  margin-left: -0.28em;
  margin-right: -0.28em;
}

@media (max-width: 768px) {
  body.reading-focus-mode .post-detail .post-content .reading-focus-block {
    opacity: 0.56;
  }

  body.reading-focus-mode .post-detail .post-content .reading-focus-block.is-reading-focus-nearby {
    opacity: 0.82;
  }

  body.reading-focus-mode .post-detail .post-content p.reading-focus-block,
  body.reading-focus-mode .post-detail .post-content blockquote.reading-focus-block,
  body.reading-focus-mode .post-detail .post-content li.reading-focus-block {
    padding: 0.16em 0.56em;
    margin-left: -0.56em;
    margin-right: -0.56em;
  }
}

scrollbar-width: none;
-ms-overflow-style: none;
::-webkit-scrollbar { display: none; }

/* ==========================================
   윈도우 스타일 읽기 메뉴
   - 기존 퀵바/읽기툴 숨김
   - [메뉴] + 계층형 슬라이드 패널
========================================== */

.article-view-tools,
.article-reading-prefs,
#reading-quickbar,
#reading-menu-fab,
#reading-menu-sheet,
#reading-menu-backdrop,
#reading-menu-root {
  display: none !important;
}

/* 가독성 적용 */
body.reading-prefs-enabled .post-detail .post-content:not(.protected-content),
body.reading-prefs-enabled #article-view,
body.reading-prefs-enabled .article-view {
  max-width: min(calc(100vw - 40px), var(--reading-content-width, 780px));
  margin-left: auto;
  margin-right: auto;
}

body.reading-prefs-enabled .post-detail .post-content:not(.protected-content) :is(p, li, blockquote, figcaption),
body.reading-prefs-enabled #article-view :is(p, li, blockquote, figcaption),
body.reading-prefs-enabled .article-view :is(p, li, blockquote, figcaption) {
  font-size: calc(1rem * var(--reading-font-scale, 1.05));
  line-height: var(--reading-line-height, 1.9);
  font-family: var(--reading-font-family, inherit);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

body.reading-prefs-enabled .post-detail .post-content:not(.protected-content) p,
body.reading-prefs-enabled #article-view p,
body.reading-prefs-enabled .article-view p {
  margin-top: calc(0.65em * var(--reading-paragraph-gap, 1.15));
  margin-bottom: calc(0.95em * var(--reading-paragraph-gap, 1.15));
}

body.reading-prefs-enabled .post-detail .post-content:not(.protected-content) li,
body.reading-prefs-enabled #article-view li,
body.reading-prefs-enabled .article-view li {
  margin-top: calc(0.22em * var(--reading-paragraph-gap, 1.15));
  margin-bottom: calc(0.22em * var(--reading-paragraph-gap, 1.15));
}

body.reading-prefs-enabled .post-detail .post-content:not(.protected-content) :is(ul, ol, blockquote),
body.reading-prefs-enabled #article-view :is(ul, ol, blockquote),
body.reading-prefs-enabled .article-view :is(ul, ol, blockquote) {
  margin-top: calc(1em * var(--reading-paragraph-gap, 1.15));
  margin-bottom: calc(1em * var(--reading-paragraph-gap, 1.15));
}

body.reading-prefs-enabled .post-detail .post-content:not(.protected-content) :is(h2, h3, h4),
body.reading-prefs-enabled #article-view :is(h2, h3, h4),
body.reading-prefs-enabled .article-view :is(h2, h3, h4) {
  font-family: var(--reading-font-family, inherit);
  line-height: 1.42;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

body.reading-prefs-enabled .post-detail .post-content:not(.protected-content) h2,
body.reading-prefs-enabled #article-view h2,
body.reading-prefs-enabled .article-view h2 {
  margin-top: calc(1.7em * var(--reading-paragraph-gap, 1.15));
  margin-bottom: calc(0.64em * var(--reading-paragraph-gap, 1.15));
}

body.reading-prefs-enabled .post-detail .post-content:not(.protected-content) h3,
body.reading-prefs-enabled #article-view h3,
body.reading-prefs-enabled .article-view h3 {
  margin-top: calc(1.4em * var(--reading-paragraph-gap, 1.15));
  margin-bottom: calc(0.52em * var(--reading-paragraph-gap, 1.15));
}

body.reading-prefs-enabled .post-detail .post-content:not(.protected-content) pre,
body.reading-prefs-enabled .post-detail .post-content:not(.protected-content) code,
body.reading-prefs-enabled .post-detail .post-content:not(.protected-content) table,
body.reading-prefs-enabled #article-view pre,
body.reading-prefs-enabled #article-view code,
body.reading-prefs-enabled #article-view table,
body.reading-prefs-enabled .article-view pre,
body.reading-prefs-enabled .article-view code,
body.reading-prefs-enabled .article-view table {
  font-size: inherit;
  line-height: inherit;
}

/* 메뉴 버튼 */
.nested-readmenu__fab {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%);
  z-index: 340;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(12, 18, 36, 0.86);
  color: #eef3fb;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nested-readmenu__fab:hover,
.nested-readmenu__fab:focus-visible {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.1);
  color: #e9feff;
}

.nested-readmenu__fab-icon {
  font-size: 1rem;
  line-height: 1;
}

.nested-readmenu__fab-label {
  line-height: 1;
}

.nested-readmenu__backdrop[hidden] {
  display: none !important;
}

.nested-readmenu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 330;
  background: rgba(5, 8, 16, 0.48);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nested-readmenu__panel {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
  transform: translate(-50%, 12px) scale(0.98);
  transform-origin: center bottom;
  z-index: 350;
  width: min(calc(100vw - 18px), 360px);
  max-height: min(72vh, 520px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: rgba(10, 14, 28, 0.96);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
  overflow: hidden;
}

body.nested-readmenu-open .nested-readmenu__backdrop {
  opacity: 1;
}

body.nested-readmenu-open .nested-readmenu__panel {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.nested-readmenu__panel-head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nested-readmenu__title {
  color: #f5f8ff;
  font-size: 0.94rem;
  font-weight: 800;
  text-align: center;
}

.nested-readmenu__nav-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #f5f7fb;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.nested-readmenu__nav-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.nested-readmenu__viewport {
  height: min(58vh, 430px);
  overflow: hidden;
}

.nested-readmenu__track {
  display: flex;
  width: calc(100% * 9);
  height: 100%;
  transition: transform 0.22s ease;
}

.nested-readmenu__view {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nested-readmenu__view::-webkit-scrollbar {
  display: none;
}

.nested-readmenu__view-inner {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.nested-readmenu__intro {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.75rem;
  line-height: 1.55;
}

.nested-readmenu__note {
  margin: 6px 2px 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.74rem;
  line-height: 1.55;
}

.nested-readmenu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #f5f7fb;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
}

.nested-readmenu__item:hover {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.08);
  color: #ccfbff;
}

.nested-readmenu__item.is-active {
  border-color: rgba(0, 242, 254, 0.4);
  background: rgba(0, 242, 254, 0.16);
  color: #effcff;
  box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.12) inset;
}

.nested-readmenu__item.is-disabled {
  opacity: 0.38;
  pointer-events: none;
}

.nested-readmenu__item-side {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nested-readmenu__item-meta {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.nested-readmenu__item.is-active .nested-readmenu__item-meta {
  color: rgba(239, 252, 255, 0.9);
}

.nested-readmenu__item-arrow {
  color: rgba(255, 255, 255, 0.52);
  font-size: 1rem;
  line-height: 1;
}

.nested-readmenu__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.nested-readmenu__soft-btn {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #f5f7fb;
  font: inherit;
  cursor: pointer;
}

body.reading-focus-mode .nested-readmenu__fab {
  display: inline-flex !important;
}

@media (max-width: 768px) {
  body.reading-prefs-enabled .post-detail .post-content:not(.protected-content),
  body.reading-prefs-enabled #article-view,
  body.reading-prefs-enabled .article-view {
    max-width: calc(100vw - 24px);
  }

  .nested-readmenu__fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    height: 44px;
    padding: 0 14px;
  }

  .nested-readmenu__panel {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
    width: calc(100vw - 12px);
    max-height: min(74vh, 560px);
  }

  .nested-readmenu__viewport {
    height: min(60vh, 470px);
  }
}

@media print {
  .nested-readmenu__fab,
  .nested-readmenu__backdrop,
  .nested-readmenu__panel {
    display: none !important;
  }
}
/* ==========================================
   Windows Style UI System (최종)
========================================== */

/* 1. 작업 표시줄 (Taskbar) */
#win-taskbar {
  position: fixed;
  left: 20px; /* 중앙(50%)에서 좌측(20px)으로 변경 */
  bottom: 20px;
  /* transform: translateX(-50%); <- 이 줄을 삭제하거나 주석 처리하세요 */
  display: flex;
  align-items: center;
  padding: 6px;
  gap: 6px;
  border-radius: 16px;
  z-index: 1000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.win-btn {
  background: transparent;
  border: none;
  color: #e2e8f0;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  font-family: inherit;
}

.win-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent-cyan);
}

.win-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 4px;
}

/* 2. 시작 메뉴 (Start Menu) */
#win-start-menu {
  position: fixed;
  left: 20px; /* 작업 표시줄 위치와 동일하게 좌측 배치 */
  bottom: 85px;
  /* transform: translateX(-50%) translateY(15px); <- 아래처럼 변경 */
  transform: translateY(15px); 
  width: 240px;
  padding: 10px;
  border-radius: 18px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#win-start-menu:not([hidden]) {
  opacity: 1;
  /* transform: translateX(-50%) translateY(0); <- 아래처럼 변경 */
  transform: translateY(0);
  pointer-events: auto;
}

.win-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: #cbd5e1;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.2s;
}

.win-menu-item:hover {
  background: rgba(0, 242, 254, 0.12);
  color: var(--accent-cyan);
  transform: translateX(4px);
}

/* 3. 프로그램 창 (Window Panel) */
.win-window {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -45%) scale(0.95);
  width: min(92vw, 420px);
  max-height: 75vh;
  z-index: 1100;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

.win-window:not([hidden]) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.win-window-header {
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.win-window-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: -0.02em;
}

.win-window-close {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: #94a3b8;
  font-size: 1.4rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s;
}

.win-window-close:hover {
  background: #ef4444;
  color: #fff;
}

.win-window-content {
  padding: 24px;
  overflow-y: auto;
  background: rgba(10, 15, 26, 0.4);
}

/* 설정 항목 스타일 */
.win-setting-group { margin-bottom: 24px; }
.win-setting-group label {
  display: block; font-size: 0.8rem; color: var(--text-muted);
  font-weight: 700; margin-bottom: 10px; text-transform: uppercase;
}
.win-options { display: flex; flex-wrap: wrap; gap: 8px; }
.win-options button {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: #cbd5e1; padding: 8px 16px; border-radius: 10px; cursor: pointer;
  font-size: 0.88rem; font-weight: 600; transition: all 0.2s;
}
.win-options button:hover { border-color: var(--accent-cyan); }
.win-options button.active {
  background: var(--accent-cyan); color: #000; border-color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
}

/* 목차 리스트 스타일 */
#win-toc-content a {
  display: block; padding: 12px 16px; color: #cbd5e1; text-decoration: none;
  border-radius: 10px; margin-bottom: 6px; background: rgba(255,255,255,0.03);
  border: 1px solid transparent; font-size: 0.9rem; transition: all 0.2s;
}
#win-toc-content a:hover {
  background: rgba(0, 242, 254, 0.08); border-color: rgba(0, 242, 254, 0.2);
  color: var(--accent-cyan); transform: translateX(5px);
}

/* 오버레이 */
#win-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 998; backdrop-filter: blur(4px);
}

/* 모바일 최적화 */
@media (max-width: 768px) {
  #win-taskbar { 
    left: 15px; 
    bottom: 15px; 
    width: auto; /* 모바일에서 너무 넓어지지 않게 설정 */
  }
  #win-start-menu {
    left: 15px;
    bottom: 80px;
  }
}
/* ==========================================
   Sticky Section Indicator (좌측 하단 퀵바 위 배치)
========================================== */
#sticky-section-indicator {
  position: fixed;
  /* 위치 설정: 퀵바(bottom: 20px) + 퀵바 높이 + 여백 */
  bottom: 85px; 
  left: 20px;
  top: auto !important; /* 기존 상단 top 값 강제 초기화 */
  
  z-index: 997; /* 시작 메뉴(999)보다는 낮고 본문보다는 높게 */
  padding: 10px 18px;
  border-radius: 14px; /* 윈도우 알림창 느낌의 약간 각진 라운드 */
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.9); /* 퀵바보다 약간 더 진한 배경 */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  
  opacity: 0;
  pointer-events: none;
  /* 등장 애니메이션: 아래에서 위로 살짝 올라오며 나타남 */
  transform: translateY(15px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  
  max-width: 300px; /* 너무 길어지지 않게 제한 */
  display: block !important;
}

/* 활성화 상태 (스크롤 시 노출) */
#sticky-section-indicator.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.indicator-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  overflow: hidden;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-cyan);
  flex-shrink: 0;
}

#current-section-text {
  color: #f1f5f9;
  font-size: 0.88rem;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: -0.01em;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  #sticky-section-indicator {
    bottom: 80px;
    left: 15px;
    max-width: calc(100vw - 30px);
  }
}
/* ==========================================
   Content Folding System (Table, Quote, Code)
========================================== */
.fold-wrapper {
  position: relative;
  margin: 28px 0;
  border-radius: 16px;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 접힌 상태 */
.fold-wrapper.is-folded {
  max-height: 260px; /* 요청하신 220~280px 사이의 적정값 */
}

/* 접힌 부분 안개 효과 (Wet Mist) */
.fold-wrapper.is-folded::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(10, 15, 26, 0.95));
  pointer-events: none;
  z-index: 10;
}

/* 펼치기/접기 버튼 컨테이너 */
.fold-controls {
  display: flex;
  justify-content: center;
  margin-top: -20px; /* 안개 효과 위로 버튼 올림 */
  position: relative;
  z-index: 20;
}

.fold-btn {
  appearance: none;
  border: 1px solid rgba(0, 242, 254, 0.3);
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--accent-cyan);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fold-btn:hover {
  background: var(--accent-cyan);
  color: #000;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}

/* 펼쳐진 상태에서는 안개 효과 제거 및 버튼 위치 조정 */
.fold-wrapper.is-expanded {
  max-height: none;
}

.fold-wrapper.is-expanded::after {
  display: none;
}

.is-expanded + .fold-controls {
  margin-top: 10px;
}

/* 표 전용 보정: 티스토리 표는 div로 감싸져 있는 경우가 많음 */
.fold-wrapper table {
  margin: 0 !important;
}
/* ==========================================
   Reading Ruler (읽기 가이드 바)
========================================== */
#reading-ruler {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px; /* 얇고 세련된 라인 */
  background: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan), 0 0 4px rgba(255, 255, 255, 0.5);
  z-index: 9999; /* 최상단 레이어 */
  pointer-events: none; /* 중요: 클릭 방해 금지 */
  opacity: 0.7;
  mix-blend-mode: exclusion; /* 배경색에 따라 반전되어 가독성 확보 */
  will-change: transform;
}

/* 메뉴 내 상태 표시 텍스트 스타일 */
.win-menu-item small {
  margin-left: auto;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
}

.status-off {
  background: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.status-on {
  background: var(--accent-cyan);
  color: #000;
}
/* 읽기 가이드 바 기본 상태: 숨김 */
#reading-ruler {
  display: none; /* 기본은 안 보임 */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan);
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: exclusion;
  will-change: transform;
}

/* 활성화 클래스가 붙었을 때만 표시 */
#reading-ruler.is-active {
  display: block !important;
}
/* ==========================================
   Windows Style Toast Notifications
========================================== */
#win-notification-container {
  position: fixed;
  right: 20px;
  bottom: 85px; /* 퀵바 위쪽 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2000;
  pointer-events: none;
}

.win-toast {
  width: 280px;
  padding: 16px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid var(--accent-cyan); /* 포인트 라인 */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  color: #fff;
  pointer-events: auto;
  
  /* 등장 애니메이션: 오른쪽에서 슬라이드 */
  transform: translateX(120%);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.win-toast.is-visible {
  transform: translateX(0);
}

.win-toast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.win-toast-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.win-toast-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 1.1rem;
}

.win-toast-body {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #cbd5e1;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  #win-notification-container {
    right: 10px;
    left: 10px; /* 모바일은 꽉 차게 */
    bottom: 80px;
  }
  .win-toast {
    width: auto;
  }
}
/* ==========================================
   Empty Category / Search / Tag / Archive State
   - 빈 결과 안내 카드 정리
========================================== */
.empty-search-assist {
  margin: 18px 0 24px;
  padding: 28px;
  display: grid;
  gap: 22px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(0, 242, 254, 0.08), transparent 34%),
    radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.08), transparent 34%),
    rgba(10, 15, 26, 0.62);
}

.empty-search-assist__head {
  display: grid;
  gap: 10px;
}

.empty-search-assist__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(0, 242, 254, 0.10);
  border: 1px solid rgba(0, 242, 254, 0.22);
  color: var(--accent-cyan);
  font-size: 0.82rem;
  font-weight: 700;
}

.empty-search-assist__title {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.32;
  letter-spacing: -0.03em;
}

.empty-search-assist__desc {
  margin: 0;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.75;
}

.empty-search-assist__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.empty-search-assist__action,
.empty-search-assist__action--link {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s ease;
}

.empty-search-assist__action:hover,
.empty-search-assist__action--link:hover {
  border-color: rgba(0, 242, 254, 0.28);
  background: rgba(0, 242, 254, 0.10);
  color: var(--accent-cyan);
}

.empty-search-assist__actions .empty-search-assist__action:first-child {
  background: rgba(0, 242, 254, 0.12);
  border-color: rgba(0, 242, 254, 0.24);
  color: var(--accent-cyan);
}

.empty-search-assist__section {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.empty-search-assist__section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 0.02em;
}

.empty-search-assist__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.empty-search-assist__link-card {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  transition: all 0.18s ease;
}

.empty-search-assist__link-card:hover {
  border-color: rgba(0, 242, 254, 0.26);
  background: rgba(0, 242, 254, 0.08);
  transform: translateY(-2px);
}

.empty-search-assist__link-meta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.empty-search-assist__link-title {
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.55;
  word-break: keep-all;
}

/* empty assist가 들어오면 그 아래 빈 article-wrap 간격 정리 */
.js-empty-search-assist + .article-wrap {
  margin-top: 0 !important;
  min-height: 0 !important;
}

@media (max-width: 768px) {
  .empty-search-assist {
    margin: 14px 0 20px;
    padding: 18px;
    gap: 18px;
  }

  .empty-search-assist__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .empty-search-assist__action,
  .empty-search-assist__action--link {
    width: 100%;
  }

  .empty-search-assist__links {
    grid-template-columns: 1fr;
  }

  .empty-search-assist__link-card {
    min-height: 0;
  }
}

/*
빈 카테고리에서는 더 미니멀하게 버튼만 남기고 싶으면,
아래 1줄만 추가해서 추천 섹션을 숨기면 됩니다.

body#tt-body-category .empty-search-assist__section { display: none; }
*/

/* ===== 본문 하단 구독하기 버튼 ===== */
/* XPath: //*[@id="main"]/div[2]/article/div[3]/div[1]/div/div/button */

#main button.tt_btn_subscribe {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  min-width: 140px !important;
  height: 40px !important;
  padding: 0 16px !important;
  margin: 10px !important;

  border: 1px solid rgba(103, 232, 249, 0.22) !important;
  border-radius: 999px !important;
  background: linear-gradient(
    180deg,
    rgba(16, 28, 52, 0.94) 0%,
    rgba(9, 18, 34, 0.98) 100%
  ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(34, 211, 238, 0.08) !important;

  color: #e8fcff !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  cursor: pointer !important;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease !important;
}

#main button.tt_btn_subscribe:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(103, 232, 249, 0.36) !important;
  background: linear-gradient(
    180deg,
    rgba(20, 36, 66, 0.96) 0%,
    rgba(10, 20, 38, 1) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(34, 211, 238, 0.10),
    0 0 14px rgba(139, 92, 246, 0.06) !important;
}

#main button.tt_btn_subscribe:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.24) !important;
}

/* 버튼 텍스트 */
#main button.tt_btn_subscribe .tt_txt_g,
#main button.tt_btn_subscribe span.tt_txt_g {
  display: inline-block !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  text-indent: 0 !important;
  white-space: nowrap !important;

  color: #e8fcff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 숫자 배지 */
#main button.tt_btn_subscribe .tt_count_g {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 7px !important;
  margin-left: 2px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.06) !important;

  color: rgba(232,252,255,0.82) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* 기본 장식 제거 */
#main button.tt_btn_subscribe::before,
#main button.tt_btn_subscribe::after,
#main button.tt_btn_subscribe .img_common_tistory,
#main button.tt_btn_subscribe img {
  display: none !important;
  content: none !important;
}

/* 구독중 상태 */
#main button.tt_btn_subscribe.following,
#main button.tt_btn_subscribe.is_on {
  border-color: rgba(167, 139, 250, 0.24) !important;
  background: linear-gradient(
    180deg,
    rgba(28, 24, 50, 0.94) 0%,
    rgba(14, 14, 30, 0.98) 100%
  ) !important;
}

#main button.tt_btn_subscribe.following .tt_txt_g,
#main button.tt_btn_subscribe.is_on .tt_txt_g {
  color: #f0e7ff !important;
}