@charset "utf-8";

/* =========================================
   1. 테마 변수 (다크모드 기반)
   ========================================= */
:root {
  --bg-body: #0d1117;       /* 전체 배경 */
  --bg-sidebar: #161b22;    /* 사이드바 배경 */
  --bg-card: #161b22;       /* 카드/박스 배경 */
  --bg-input: #0d1117;      /* 입력창 배경 */
  --bg-comment: #0d1117;    /* 댓글 배경 */
  --text-main: #e6edf3;     /* 메인 글자색 */
  --text-sub: #8b949e;      /* 보조 글자색 */
  --border: #30363d;        /* 테두리 색상 */
  --accent: #58a6ff;        /* 포인트 색상 (파랑) */
  --accent-hover: #1f6feb;  /* 포인트 호버 색상 */
  --code-bg: #f6f8fa;       /* 코드 블럭 배경 (light default) */
  --code-bg-dark: #1f2428;  /* 코드 블럭 배경 (dark) */
  --code-border-light: #d0d7de; /* code border light */
  --code-border-dark: #2d333b;  /* code border dark */
  --line: var(--border);

  /* Reader prefs (set by JS) */
  --gw-font-scale: 1;
  --gw-line-height: 1.75;
}

/* Global box-sizing */
*, *::before, *::after { box-sizing: border-box; }


body {
  font-family: 'Pretendard', sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
  line-height: 1.6;
  font-size: 16px;
}

/* [중요] 글자색 강제 적용 (안 보이는 문제 해결) */
body, p, span, div, li, table, td, th, a {
  color: var(--text-main);
}

a { text-decoration: none; color: inherit; transition: 0.2s; }
ul, li { list-style: none; }
button { cursor: pointer; border: none; background: none; color: inherit; font-family: inherit; }
img { max-width: 100%; display: block; }

/* 티스토리 기본 테이블 스타일 제거 */
table, tr, td, th, .tt-table-wrapper {
  background-color: transparent !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

/* =========================================
   3. 레이아웃 & 사이드바
   ========================================= */
.wrap { display: flex; min-height: 100vh; position: relative; }

.sidebar {
  width: 280px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  position: fixed; top: 0; left: 0; height: 100vh;
  padding: 24px;
  overflow-y: auto;
  z-index: 100;
  display: flex; flex-direction: column;
  transition: transform 0.3s ease-in-out;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* 프로필 카드 */
.profile-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--bg-body); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px 16px; margin-bottom: 24px;
  width: 100%;
}
.profile-img-wrap { display: block; width: 90px; height: 90px; margin-bottom: 16px; }
.img-circle { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg-sidebar); object-fit: cover; background: var(--border); }
.profile-name { display: block; font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; color: var(--text-main); }
.profile-desc { font-size: 0.85rem; color: var(--text-sub); margin-bottom: 16px; line-height: 1.4; word-break: keep-all; }
.profile-actions { display: flex; justify-content: center; gap: 8px; width: 100%; }
.theme-btn, .admin-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-sub); background: var(--bg-sidebar);
}
.theme-btn:hover, .admin-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 검색창 */
.search-box { position: relative; margin-bottom: 24px; }
.search-box input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 40px 10px 12px;
  color: var(--text-main); font-size: 0.9rem; outline: none;
}
.search-box input:focus { border-color: var(--accent); }
.search-box button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-sub); }

/* 카테고리 트리 */
.category-nav { flex: 1; }
.tt_category li { margin-bottom: 4px; position: relative; }
.tt_category > li > a { 
  display: block; padding: 8px 10px; border-radius: 6px; 
  font-size: 0.95rem; font-weight: 600; color: var(--text-main);
  padding-right: 35px;
}
.tt_category li a:hover { background: var(--bg-input); color: var(--accent); }

.tt_category .sub_category_list { 
  display: none; padding-left: 10px; margin-top: 4px; 
  border-left: 2px solid var(--border); margin-left: 12px; 
}
.tt_category li.item-open .sub_category_list { display: block; }
.tt_category .sub_category_list li a { font-size: 0.9rem; color: var(--text-sub); font-weight: 400; padding: 4px 10px; display: block; }
.tt_category .sub_category_list li a:hover { color: var(--accent); }

.cat-toggle-btn { 
  position: absolute; right: 5px; top: 5px; width: 30px; height: 30px; 
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); font-size: 12px; z-index: 10; cursor: pointer;
}
.cat-toggle-btn:hover { color: var(--accent); background: var(--bg-input); border-radius: 50%; }

.sidebar-footer { font-size: 0.8rem; color: var(--text-sub); text-align: center; margin-top: 20px; opacity: 0.6; }

/* =========================================
   4. 메인 컨텐츠 & 상단 네비게이션
   ========================================= */
.content {
  margin-left: 280px; flex: 1; width: calc(100% - 280px);
  padding: 40px 50px;
  transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
}

.top-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
  gap: 15px;
}
.top-nav-left { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.top-logo-img { height: 40px; width: auto; border-radius: 6px; }

.top-nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.dropdown { position: relative; display: inline-block; }
.top-menu-item {
  font-size: 0.95rem; font-weight: 700; color: var(--text-sub);
  padding: 10px 14px; border-radius: 8px; transition: 0.2s;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.top-menu-item:hover, .dropdown:hover .top-menu-item { background: var(--bg-card); color: var(--accent); }

.dropdown-content {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--bg-card); min-width: 180px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3); border: 1px solid var(--border);
  border-radius: 8px; z-index: 200; padding: 8px 0;
}
.dropdown-content a { color: var(--text-main); padding: 10px 16px; text-decoration: none; display: block; font-size: 0.9rem; }
.dropdown-content a:hover { background: var(--bg-input); color: var(--accent); }
.dropdown:hover .dropdown-content { display: block; }

/* =========================================
   [수정] 카테고리 헤더 (디자인)
   ========================================= */
.list-header-styled {
  text-align: center;
  margin-bottom: 60px;
  padding: 20px 0;
}
.list-title {
  font-size: 2.5rem; font-weight: 800; color: var(--text-main); margin-bottom: 20px;
}
.list-line {
  width: 50px; height: 4px; background-color: var(--accent); margin: 0 auto 20px auto; border-radius: 2px;
}
.list-desc { font-size: 1.1rem; color: var(--text-sub); font-weight: 400; }


/* =========================================
   5. 카드형 그리드 및 포스트 스타일
   ========================================= */
.post-item {
  background: var(--bg-card); 
  border: 1px solid var(--border);
  border-radius: 16px; 
  padding: 40px; 
  margin-bottom: 50px; 
  position: relative;
}

#tt-body-category .article-wrapper,
#tt-body-search .article-wrapper,
#tt-body-tag .article-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

#tt-body-category .post-item,
#tt-body-search .post-item,
#tt-body-tag .post-item {
  display: flex; flex-direction: column;
  padding: 0; margin-bottom: 0; height: 100%;
  overflow: hidden; border: 1px solid var(--border);
  transition: 0.3s ease;
}
#tt-body-category .post-item:hover,
#tt-body-search .post-item:hover,
#tt-body-tag .post-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  border-color: var(--accent);
}

#tt-body-category .post-thumbnail,
#tt-body-search .post-thumbnail,
#tt-body-tag .post-thumbnail {
  display: block; width: 100%; height: 200px; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
#tt-body-category .post-thumbnail img,
#tt-body-search .post-thumbnail img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease; border-radius: 0;
}
#tt-body-category .post-item:hover .post-thumbnail img,
#tt-body-search .post-item:hover .post-thumbnail img {
  transform: scale(1.05);
}

#tt-body-category .post-content-inner,
#tt-body-search .post-content-inner,
#tt-body-tag .post-content-inner {
  padding: 24px; display: flex; flex-direction: column; flex: 1;
}

#tt-body-category .post-category,
#tt-body-search .post-category {
  font-size: 0.8rem; font-weight: 700; color: var(--accent);
  margin-bottom: 8px; display: inline-block;
}
#tt-body-category .post-title,
#tt-body-search .post-title {
  font-size: 1.25rem; font-weight: 800; line-height: 1.4;
  margin-bottom: 12px; word-break: keep-all;
}
#tt-body-category .post-meta,
#tt-body-search .post-meta {
  font-size: 0.85rem; color: var(--text-sub); 
  margin-top: auto; padding-top: 16px; border: none; margin-bottom: 0; padding-bottom: 0;
}
#tt-body-category .post-body,
#tt-body-search .post-body {
  display: block !important;
  font-size: 0.95rem; color: var(--text-sub); line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box !important; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
  max-height: 4.8em;
}

#tt-body-category .toc-container, #tt-body-category .tags, #tt-body-category .comments-wrap, #tt-body-category .related-articles-category,
#tt-body-search .toc-container, #tt-body-search .tags, #tt-body-search .comments-wrap, #tt-body-search .related-articles-category {
  display: none !important;
}

/* 상세 페이지 스타일 */
.post-category { color: var(--accent); font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; display: inline-block; }
.post-title { font-size: 2rem; font-weight: 800; line-height: 1.3; margin-bottom: 20px; color: var(--text-main); }
.post-meta { color: var(--text-sub); font-size: 0.9rem; border-bottom: 1px solid var(--border); padding-bottom: 30px; margin-bottom: 40px; }

/* 본문 내용 스타일 (글자색 보장)
   NOTE:
   - 예전에는 .post-body span/div 전체에 font-size/line-height/word-break를 강제로 넣어서
     커스텀 코드 박스/비교 위젯/에디터 HTML 레이아웃까지 깨뜨렸습니다.
   - 본문 타이포는 문단성 요소에만 적용하고, 코드/커스텀 박스는 제외합니다.
*/
.post-body,
#article-view {
  color: var(--text-main) !important;
  font-size: 1.1rem;
  line-height: 1.8;
}
.post-body p,
.post-body li,
.post-body blockquote,
.post-body td,
.post-body th {
  color: var(--text-main) !important;
  font-size: inherit;
  line-height: inherit;
  word-break: keep-all;
}
/* code / rich code / custom code widgets must keep their own metrics */
.post-body :where(pre, code, kbd, samp, .gw-richcode, [data-ke-type="codeblock"]),
.post-body :where(pre, code, kbd, samp, .gw-richcode, [data-ke-type="codeblock"]) * {
  word-break: normal !important;
}
.post-body :where(pre code, pre code *, .gw-richcode, .gw-richcode *, [data-ke-type="codeblock"], [data-ke-type="codeblock"] *) {
  font-size: inherit !important;
  line-height: inherit !important;
}
.post-thumbnail { display: none; }
.post-body h2 { font-size: 1.6rem; margin: 50px 0 20px; border-bottom: 1px solid var(--border); padding-bottom: 10px; color: var(--text-main); }
.post-body h3 { font-size: 1.3rem; margin: 40px 0 15px; color: var(--text-main); }
.post-body pre { background: var(--code-bg); padding: 20px; border-radius: 8px; border: 1px solid var(--border); overflow-x: auto; margin: 30px 0; }
.post-body blockquote { border-left: 4px solid var(--accent); padding-left: 20px; margin: 20px 0; color: var(--text-sub); }

/* <p>로 쪼개진 코드 → pre로 합친 블록 (v42) */
.post-body pre.gw-codeblock{
  background: var(--code-surface) !important;
  color: var(--code-text) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.65;
}
.post-body pre.gw-codeblock code{
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: inherit !important;
}

/* =========================================
   본문: 에디터 인라인 스타일(테이블/코드) 테마 정규화
   ========================================= */

/* 테이블: tbody/thead 등 인라인 배경 제거까지 강제 */
.post-body table thead,
.post-body table tbody,
.post-body table tfoot{
  background: transparent !important;
}
.post-body table [style*="background"]{
  background: transparent !important;
}
.post-body table [style*="color"]{
  color: inherit !important;
}

/* 에디터가 만들어낸 '컬러 스팬 코드블록' 감지용 클래스 */
.post-body .gw-richcode{
  background: var(--code-surface) !important;
  color: var(--code-text) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.65;
}
.post-body .gw-richcode > div{
  display:block;
  white-space: pre;
}
.post-body .gw-richcode *{
  background: transparent !important;
  color: inherit !important;
}
/* 커스텀 코드/비교 위젯 내부 레이아웃 보존 */
.post-body pre *,
.post-body .gw-richcode *,
.post-body [data-ke-type="codeblock"] *{
  word-break: normal !important;
}

/* 라이트/다크 코드 색 변수 */
:root{
  --code-surface: var(--code-bg-dark);
  --code-text: #e6edf3;
  --code-border: var(--code-border-dark);
}
html[data-theme="light"]{
  --code-surface: var(--code-bg);
  --code-text: #111827;
  --code-border: var(--code-border-light);
}


/* =========================================
   [디자인 업그레이드] 카테고리 다른 글
   ========================================= */
.related-articles-category { margin: 60px 0 40px; }

.another_category {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  padding: 0 !important; margin: 0 !important;
  width: 100% !important; overflow: hidden;
}

.another_category h4 {
  background: var(--bg-sidebar) !important;
  padding: 18px 24px !important; margin: 0 !important;
  font-size: 1.05rem !important; font-weight: 700 !important;
  color: var(--accent) !important; border-bottom: 1px solid var(--border) !important;
}
.another_category h4 a { text-decoration: none !important; color: inherit !important; }

.another_category table { width: 100% !important; border-collapse: collapse !important; }
.another_category th, .another_category td {
  padding: 14px 24px !important; border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: var(--text-sub) !important; background-color: transparent !important;
  font-size: 0.95rem !important; transition: all 0.2s ease !important;
}
.another_category tr:last-child th, .another_category tr:last-child td { border-bottom: none !important; }
.another_category td { text-align: right !important; font-size: 0.85rem !important; opacity: 0.7; }

/* 호버 효과 */
.another_category tr:hover th, .another_category tr:hover td {
  background-color: var(--bg-input) !important;
  color: var(--text-main) !important; padding-left: 30px !important;
}
/* 현재 글 강조 */
.another_category .selected { background-color: rgba(88, 166, 255, 0.08) !important; position: relative; }
.another_category .selected th { color: var(--accent) !important; font-weight: 700 !important; }
.another_category .selected::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background-color: var(--accent);
}

/* =========================================
   [디자인 업그레이드] 댓글 시스템 (채팅형)
   ========================================= */
.comments-wrap { margin-top: 80px; padding-top: 50px; border-top: 1px solid var(--border); }
.comments-header { display: flex; align-items: center; margin-bottom: 30px; }
.comments-header h3 { font-size: 1.4rem; font-weight: 800; color: var(--text-main); margin: 0; }
.comments-header .count {
  background-color: var(--accent); color: #fff; padding: 2px 8px;
  border-radius: 12px; font-size: 0.8rem; margin-left: 10px; font-weight: 700;
}

/* 댓글 리스트 */
.comment-list { margin-top: 30px; list-style: none; padding: 0; }
.comment-list li { list-style: none; }

.comment-item {
  padding: 30px; background-color: var(--bg-card);
  border: 1px solid var(--border); border-radius: 16px;
  margin-bottom: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}
.comment-item:hover { transform: translateY(-2px); border-color: var(--text-sub); }

.comment-meta { margin-bottom: 15px; display: flex; align-items: center; }
.comment-meta .avatar {
  width: 45px; height: 45px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--accent); margin-right: 15px;
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.3);
}
.comment-meta .avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-meta .meta-info { display: flex; flex-direction: column; }
.comment-meta .nickname { font-size: 1rem; color: var(--text-main); font-weight: 700; }
.comment-meta .date { font-size: 0.8rem; opacity: 0.6; }

.comment-content p { color: var(--text-main); font-size: 1.05rem; line-height: 1.7; }

.comment-actions { margin-top: 15px; font-size: 0.9rem; }
.comment-actions a { color: var(--text-sub); margin-right: 15px; text-decoration: none; }
.comment-actions a:hover { color: var(--accent); }

/* 대댓글 스타일 */
.reply-list {
  margin-top: -10px; margin-bottom: 20px; padding-left: 40px; background: transparent;
}
.reply-list .comment-item {
  background-color: var(--bg-input);
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 16px 16px; margin-bottom: 0; box-shadow: none; position: relative;
}
.reply-list .comment-item::before {
  content: ''; position: absolute; top: -20px; left: -25px;
  width: 15px; height: 40px;
  border-bottom: 2px solid var(--border); border-left: 2px solid var(--border);
  border-radius: 0 0 0 10px;
}

/* 댓글 입력폼 */
.comment-form {
  background: var(--bg-card); padding: 30px; border-radius: 20px;
  border: 1px solid var(--border); box-shadow: 0 10px 40px rgba(0,0,0,0.3); margin-top: 40px;
}
.guest-inputs { display: flex; gap: 10px; margin-bottom: 20px; }
.guest-inputs input {
  padding: 12px; background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-main); border-radius: 8px; outline: none;
}
.input-wrapper textarea {
  width: 100%; height: 120px; background: var(--bg-body);
  border: 2px solid var(--border); border-radius: 12px;
  padding: 20px; color: var(--text-main); font-size: 1.05rem;
  resize: none; outline: none; box-sizing: border-box; transition: 0.3s;
}
.input-wrapper textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.1);
}

.form-bottom {
  display: flex; justify-content: space-between; align-items: center; margin-top: 20px;
}
.secret-check label { color: var(--text-sub); margin-left: 5px; cursor: pointer; }
.form-bottom button {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff; padding: 10px 30px; border-radius: 30px;
  font-weight: 700; font-size: 1rem; border: none; cursor: pointer;
  box-shadow: 0 4px 15px rgba(88, 166, 255, 0.4); transition: 0.2s;
}
.form-bottom button:hover {
  transform: scale(1.05); box-shadow: 0 6px 20px rgba(88, 166, 255, 0.6);
}

/* 페이지네이션 */
.pagination { 
  display: flex; justify-content: center; align-items: center; 
  gap: 10px; margin-top: 60px; width: 100%; 
}
.page-nums { display: flex; flex-direction: row !important; gap: 8px; align-items: center; }
.page-btn, .page-num {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%; color: var(--text-sub); text-decoration: none;
}
.page-num .selected, .page-num:hover { background: var(--accent); color: #fff; font-weight: bold; }
.no-more-prev, .no-more-next { opacity: 0.3; cursor: default; }

/* 플러그인 스타일 강제 적용 (Namecard는 개별 섹션에서 별도 스타일링) */
.tistory-profile-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}
.tistory-profile-card * {
  color: var(--text-main) !important; background-color: transparent !important;
}
.container_postbtn { background-color: transparent !important; padding: 20px 0 !important; } 
.postbtn_like { border: none !important; }

/* ===== Post button group (reaction/share/stats/etc) ===== */
.container_postbtn{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
}
.container_postbtn .postbtn_like{
  display:flex;
  gap:10px;
  align-items:center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
}
.container_postbtn .wrap_btn{
  position: relative;
}
.container_postbtn .btn_post{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0 !important;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: .92;
}
.container_postbtn .btn_post:hover{
  background: rgba(255,255,255,0.08);
  opacity: 1;
}
html[data-theme="light"] .container_postbtn .btn_post:hover,
body[data-theme="light"] .container_postbtn .btn_post:hover{
  background: rgba(0,0,0,0.06);
}
.container_postbtn .uoc-count, 
.container_postbtn .txt_like{
  font-weight: 700;
  font-size: 13px;
  margin-left: 6px;
}
.container_postbtn .btn_post .ico_postbtn,
.container_postbtn .btn_post .uoc-icon .ico_postbtn{
  text-indent: -9999px;
  display:block;
  width: 18px;
  height: 18px;
}
/* share layer */
.container_postbtn .layer_post{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  padding: 10px;
}
.container_postbtn .layer_post .bundle_post{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.container_postbtn .layer_post .btn_mark{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  background: transparent;
}
.container_postbtn .layer_post .btn_mark:hover{
  background: rgba(255,255,255,0.08);
}
html[data-theme="light"] .container_postbtn .layer_post .btn_mark:hover,
body[data-theme="light"] .container_postbtn .layer_post .btn_mark:hover{
  background: rgba(0,0,0,0.06);
}
.container_postbtn .layer_post .txt_sns{
  font-weight: 700;
  font-size: 13px;
}

/* 반응형 */
.mobile-header { display: none; }
.overlay { display: none; }

@media (max-width: 1280px) {
  .sidebar { transform: translateX(-100%); width: 280px; box-shadow: none; }
  .sidebar.active { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.5); }
  .content { margin-left: 0; width: 100%; padding: 20px; }
  .mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--bg-card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 90; }
  .mobile-logo { font-weight: 800; font-size: 1.2rem; color: var(--text-main); }
  .mb-menu-toggle, .theme-btn { font-size: 1.2rem; color: var(--text-main); }
  .overlay.active { display: block; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); z-index: 99; backdrop-filter: blur(2px); }
  
  .top-nav { flex-direction: column; align-items: center; gap: 15px; }
  .top-nav-right { display: flex !important; flex-wrap: wrap; justify-content: center; width: 100%; gap: 10px; }
  .top-menu-item { background: var(--bg-input); border: 1px solid var(--border); padding: 8px 12px; }
}

@media (max-width: 768px) {
  .top-nav { display: none; }
  .list-title { font-size: 2rem; }
}

/* =============================
   카테고리의 다른 글 (커스텀 카드형)
   - 플러그인 another_category 블록 숨김
   ============================= */
.another_category{display:none !important;}

.related-articles-category{
  margin-top: 26px;
}
.related-articles-category .rel-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:14px 0 10px;
  border-top:1px solid var(--line);
}
.related-articles-category .rel-cat{
  font-weight:800;
  color:var(--accent);
  text-decoration:none;
}
.related-articles-category .rel-title{
  color:var(--text-sub);
  font-weight:600;
}
.related-articles-category .rel-more{
  margin-left:auto;
  color:var(--text-sub);
  text-decoration:none;
  font-size:.9rem;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
}
.related-articles-category .rel-more:hover{
  color:var(--text-main);
  background:rgba(255,255,255,.03);
}

.related-articles-category .rel-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.related-articles-category .rel-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.related-articles-category .rel-link{
  display:block;
  padding:12px 14px;
  text-decoration:none;
  color:var(--text-main);
}
.related-articles-category .rel-post-title{
  font-weight:800;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.related-articles-category .rel-post-date{
  margin-top:6px;
  font-size:.85rem;
  color:var(--text-sub);
}

/* =============================
   댓글: 채팅 말풍선형 (기존 스타일 덮어쓰기)
   ============================= */
.comment-list{list-style:none; padding:0; margin:0; display:grid; gap:14px;}

.comment-item{display:flex; gap:12px; align-items:flex-start; padding:10px 0;}

.comment-meta .avatar img{
  width:38px; height:38px; border-radius:999px;
  object-fit:cover; border:1px solid var(--line);
}

.comment-content{
  flex:1;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  position:relative;
}
.comment-content p{margin:0; line-height:1.65;}

.comment-content:before{
  content:"";
  position:absolute;
  left:-6px; top:14px;
  width:10px; height:10px;
  background:rgba(255,255,255,.04);
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}

.comment-actions{margin-top:8px; display:flex; gap:10px; align-items:center;}
.comment-actions a{
  font-size:.9rem;
  color:var(--text-sub);
  text-decoration:none;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
}
.comment-actions a:hover{
  color:var(--text-main);
  background:rgba(255,255,255,.03);
}

/* 대댓글 */
.reply-list{margin:10px 0 0 50px; display:grid; gap:12px;}
.reply-item .comment-meta .avatar img{width:32px; height:32px;}
.reply-item .comment-content{background:rgba(255,255,255,.03);}
.reply-item .comment-content:before{background:rgba(255,255,255,.03);}


/* ================================
   (Fix) 기본 '카테고리의 다른 글' 중복 강제 숨김
   ================================ */
body .another_category,
body #another_category{
  display:none !important;
  height:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* ================================
   (Tune) 카테고리/목록 카드 정렬 개선
   ================================ */
.article-wrapper{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: stretch;
}
.post-item{
  height: 100%;
}
.post-content-inner{
  height:100%;
  display:flex;
  flex-direction:column;
}
.post-header{
  flex: 0 0 auto;
}
.post-body{
  flex: 1 1 auto;
}

/* ================================
   (Fix) 댓글 말풍선이 안 먹을 때 강제 적용
   ================================ */
.comments-wrap .comment-content{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  position: relative !important;
}
.comments-wrap .comment-content:before{
  content:"" !important;
  position:absolute !important;
  left:-6px !important;
  top:14px !important;
  width:10px !important;
  height:10px !important;
  background: rgba(255,255,255,.04) !important;
  border-left:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
  transform: rotate(45deg) !important;
}


/* GW LIGHT THEME VARS v1 */
html[data-theme="light"] {
  --text-main: #111827;
  --text-sub: #4b5563;
  --line: rgba(17,24,39,0.12);
  /* accent keeps */
}
html[data-theme="light"] body {
  background: #f6f7fb;
  color: var(--text-main);
}
html[data-theme="light"] .sidebar,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .post-item,
html[data-theme="light"] .comment-content,
html[data-theme="light"] .rel-card {
  background: rgba(17,24,39,0.03) !important;
}

/* ===== 카테고리 페이지 카드 정렬 Fix ===== */
.category .article-wrapper{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap:24px;
}

/* ===== 댓글 입력창 테마 강제 적용 ===== */
.comments-wrap textarea,
.comments-wrap input[type="text"],
.comments-wrap input[type="password"]{
  background: var(--bg-card, #0f141a) !important;
  color: var(--text-main) !important;
  border:1px solid var(--line) !important;
}
html[data-theme="light"] .comments-wrap textarea,
html[data-theme="light"] .comments-wrap input{
  background:#ffffff !important;
  color:#111 !important;
}


/* GW COMMENT FORM & LIGHT THEME v4 */
/* 입력창(댓글 폼) 테마 반영 + 정렬 개선 */
.comment-form,
.comments-wrap .comment-form {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  background: rgba(255,255,255,0.02);
}

.comments-wrap .guest-inputs {
  display:flex;
  gap:12px;
  margin-bottom:12px;
}
.comments-wrap .guest-inputs input {
  flex: 0 0 180px;
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--text-main);
  outline: none;
}

.comments-wrap textarea[name*="comment"] {
  width:100%;
  min-height: 140px;
  resize: vertical;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--text-main);
  outline: none;
}

.comments-wrap textarea[name*="comment"]::placeholder {
  color: rgba(154,164,178,0.8);
}

.comments-wrap .form-bottom {
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.comments-wrap button[type="submit"],
.comments-wrap button {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

html[data-theme="light"] .comment-form,
html[data-theme="light"] .comments-wrap .comment-form {
  background: rgba(17,24,39,0.03);
}

html[data-theme="light"] .comments-wrap .guest-inputs input,
html[data-theme="light"] .comments-wrap textarea[name*="comment"] {
  background: rgba(17,24,39,0.03);
}


/* GW CLEAN GRID v1 */
/* ===== 카드 그리드 정리 ===== */
.article-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

/* ===== 카드 높이/내부 레이아웃 고정 ===== */
.post-item {
  height: 260px !important;
}
.post-content-inner {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 22px !important;
}

/* ===== 카테고리 라벨 톤다운 ===== */
.post-category {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--text-sub) !important;
  margin-bottom: 6px !important;
}

/* ===== 제목 강조 + 아래 공간 자동 확보 ===== */
.post-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: auto !important;
}

/* ===== 날짜는 항상 하단 ===== */
.post-meta {
  font-size: 0.8rem !important;
  color: var(--text-sub) !important;
  margin-top: 16px !important;
}

/* ===== Hover 인터랙션 정돈 ===== */
.post-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.post-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25) !important;
}


/* GW LIGHT FIX v2 */
/* 라이트모드에서 '검은 덩어리'처럼 보이는 배경/텍스트를 강제 정리 */
html[data-theme="light"] {
  --text-main: #0f172a;
  --text-sub: #475569;
  --line: rgba(15,23,42,0.14);
  --bg-page: #f6f7fb;
  --bg-card: #ffffff;
  --bg-card2: rgba(15,23,42,0.03);
}

html[data-theme="light"] body {
  background: var(--bg-page) !important;
  color: var(--text-main) !important;
}

/* 레이아웃 큰 영역 */
html[data-theme="light"] .wrap,
html[data-theme="light"] .content {
  background: transparent !important;
}

/* 카드/패널류 (목록/본문/사이드바/댓글/관련글) */
html[data-theme="light"] .sidebar,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .post-item,
html[data-theme="light"] .post-content-inner,
html[data-theme="light"] .post-body,
html[data-theme="light"] .list-header-styled,
html[data-theme="light"] .toc-container,
html[data-theme="light"] .comments-wrap,
html[data-theme="light"] .related-articles-category,
html[data-theme="light"] .rel-card,
html[data-theme="light"] .comment-form,
html[data-theme="light"] .pagination {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--line) !important;
}

/* 카드 내부의 어두운 반투명 배경(다크 전용)을 라이트에선 제거 */
html[data-theme="light"] .post-item,
html[data-theme="light"] .rel-card,
html[data-theme="light"] .comment-content {
  box-shadow: 0 6px 18px rgba(15,23,42,0.06) !important;
}

html[data-theme="light"] .post-item:hover {
  box-shadow: 0 14px 28px rgba(15,23,42,0.10) !important;
}

/* 링크/강조색은 유지하되 과하지 않게 */
html[data-theme="light"] a {
  color: #2563eb;
}
html[data-theme="light"] .post-category {
  color: var(--text-sub) !important;
}

/* 입력폼 */
html[data-theme="light"] input,
html[data-theme="light"] textarea {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border: 1px solid var(--line) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: rgba(71,85,105,0.8) !important;
}

/* 말풍선 라이트 버전 */
html[data-theme="light"] .comments-wrap .comment-content {
  background: var(--bg-card2) !important;
}
html[data-theme="light"] .comments-wrap .comment-content:before {
  background: var(--bg-card2) !important;
  border-left: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* 관련글 카드 라이트 버전 */
html[data-theme="light"] .rel-card {
  background: var(--bg-card2) !important;
}
html[data-theme="light"] .rel-card a {
  color: var(--text-main) !important;
}
html[data-theme="light"] .rel-card-date {
  color: var(--text-sub) !important;
}

/* 라인/구분선 */
html[data-theme="light"] hr,
html[data-theme="light"] .list-line {
  border-color: var(--line) !important;
  background: var(--line) !important;
}


/* GW CATEGORY PRETTY v1 */
/* ================================
   사이드바 카테고리 예쁘게 (Tistory category_list 공통 커버)
   ================================ */
.category-nav {
  margin-top: 14px;
  padding: 10px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}

.category-nav ul,
.category-nav ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-nav a {
  color: var(--text-main);
  text-decoration: none;
}

.category-nav a:hover {
  text-decoration: none;
}

/* 1뎁스 */
.category-nav > ul > li,
.category-nav .tt_category > li,
.category-nav .category_list > li {
  margin: 4px 0;
}

.category-nav > ul > li > a,
.category-nav .tt_category > li > a,
.category-nav .category_list > li > a,
.category-nav .link_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1.2;
  transition: background .15s ease, transform .15s ease;
}

.category-nav > ul > li > a:hover,
.category-nav .tt_category > li > a:hover,
.category-nav .category_list > li > a:hover,
.category-nav .link_item:hover {
  background: rgba(255,255,255,0.04);
}

.category-nav .c_cnt,
.category-nav .count,
.category-nav .num {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-sub);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}

/* 2뎁스 (하위 ul) */
.category-nav li ul {
  margin-top: 6px;
  padding-left: 6px;
  border-left: 1px dashed var(--line);
}

.category-nav li ul li a {
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 600;
  color: var(--text-main);
  opacity: .92;
}

.category-nav li ul li a:hover {
  background: rgba(255,255,255,0.035);
  opacity: 1;
}

/* 화살표/토글 아이콘(있을 경우) */
.category-nav .ico_more,
.category-nav .ico_open,
.category-nav .ico_close,
.category-nav .fa-chevron-down,
.category-nav .fa-chevron-right {
  color: var(--text-sub);
  font-size: .85rem;
}

/* 라이트 모드 */
html[data-theme="light"] .category-nav {
  background: #ffffff !important;
}

html[data-theme="light"] .category-nav > ul > li > a:hover,
html[data-theme="light"] .category-nav .tt_category > li > a:hover,
html[data-theme="light"] .category-nav .category_list > li > a:hover,
html[data-theme="light"] .category-nav .link_item:hover {
  background: rgba(15,23,42,0.04) !important;
}

html[data-theme="light"] .category-nav .c_cnt,
html[data-theme="light"] .category-nav .count,
html[data-theme="light"] .category-nav .num {
  background: rgba(15,23,42,0.03) !important;
}


/* ================================
   GW DEV BLOG CATEGORY v2
   - 더 깔끔한 계층, 배지/잠금 아이콘, 토글 UX
   - 기존 v1 위에 "덮어쓰기" 형태로 적용
   ================================ */

/* 컨테이너 */
.category-nav {
  padding: 10px;
}

/* 리스트 기본 */
.category-nav .tt_category,
.category-nav .category_list,
.category-nav > ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 1뎁스 라인 */
.category-nav .tt_category > li,
.category-nav .category_list > li,
.category-nav > ul > li {
  position: relative;
  margin: 0;
}

/* 링크를 "행"처럼 */
.category-nav .tt_category > li > a,
.category-nav .category_list > li > a,
.category-nav > ul > li > a,
.category-nav .link_item {
  padding: 10px 38px 10px 10px; /* 우측 토글 버튼 공간 확보 */
  border-radius: 12px;
  background: transparent;
}

.category-nav .tt_category > li > a:hover,
.category-nav .category_list > li > a:hover,
.category-nav > ul > li > a:hover,
.category-nav .link_item:hover {
  transform: translateY(-1px);
}

/* 링크 내부 구성(라벨/아이콘/배지) */
.category-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.category-nav .cat-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.category-nav .cat-label {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-nav .cat-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--text-sub);
  background: rgba(255,255,255,0.02);
  flex: 0 0 auto;
}

.category-nav .cat-count,
.category-nav .c_cnt,
.category-nav .count,
.category-nav .num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  flex: 0 0 auto;
}

/* 비어있는(0) 카테고리: 덜 강조 */
.category-nav li.is-empty > a {
  opacity: 0.6;
}

/* 토글 버튼 */
.category-nav .cat-toggle-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--text-sub);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.category-nav .cat-toggle-btn:hover {
  color: var(--accent);
  border-color: rgba(88,166,255,0.35);
}

.category-nav li.item-open > .cat-toggle-btn i {
  transform: rotate(180deg);
}

.category-nav .cat-toggle-btn i {
  transition: transform .15s ease;
}

/* 2뎁스 */
.category-nav li > ul,
.category-nav .sub_category_list {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 1px dashed var(--line);
}

.category-nav li > ul li a,
.category-nav .sub_category_list li a {
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 600;
  opacity: 0.92;
}

.category-nav li > ul li a:hover,
.category-nav .sub_category_list li a:hover {
  opacity: 1;
}

/* 라이트 모드 조정 */
html[data-theme="light"] .category-nav .cat-lock,
html[data-theme="light"] .category-nav .cat-count,
html[data-theme="light"] .category-nav .c_cnt,
html[data-theme="light"] .category-nav .count,
html[data-theme="light"] .category-nav .num,
html[data-theme="light"] .category-nav .cat-toggle-btn {
  background: rgba(15,23,42,0.03) !important;
}



/* GW CLEAN GRID v2 SCOPED */
/* 상세글(ENTRY)에서 카드 고정 높이/그리드로 본문이 잘리는 문제 방지 */
#tt-body-entry .article-wrapper,
#tt-body-page .article-wrapper {
  display: block !important;
}

#tt-body-entry .post-item,
#tt-body-page .post-item {
  height: auto !important;
  min-height: 0 !important;
}

#tt-body-entry .post-content-inner,
#tt-body-page .post-content-inner {
  height: auto !important;
}

/* 목록/카테고리/검색 화면에서만 그리드 + 카드 높이 고정 */
#tt-body-index .article-wrapper,
#tt-body-category .article-wrapper,
#tt-body-search .article-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

#tt-body-index .post-item,
#tt-body-category .post-item,
#tt-body-search .post-item {
  height: 260px !important;
}


/* GW CATEGORY PRETTY v2 */
/* 카테고리: 정렬/줄바꿈/아이콘 깨짐 보정 */
.category-nav {
  padding: 12px 10px !important;
  border-radius: 14px !important;
}

.category-nav li, 
.category-nav a {
  word-break: keep-all !important;
}

.category-nav li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.category-nav .c_cnt,
.category-nav .count,
.category-nav .num {
  margin-left: auto !important;
  white-space: nowrap !important;
  min-width: 44px;
  text-align: center;
}

/* '비공개' 같은 괄호 텍스트가 줄 분리되는 느낌 완화 */
.category-nav li > a {
  line-height: 1.25 !important;
}
.category-nav li > a span {
  line-height: 1.25 !important;
}

/* 불필요한 작은 아이콘(예: RSS/새창 아이콘 등)이 있으면 숨김 */
.category-nav img {
  display: none !important;
}

/* 토글 화살표가 링크 옆에서 떠다니면 정렬 */
.category-nav .ico_more,
.category-nav .ico_open,
.category-nav .ico_close,
.category-nav .fa-chevron-down,
.category-nav .fa-chevron-right {
  margin-left: 6px !important;
  flex: 0 0 auto !important;
}


/* GW CATEGORY CLEAN v3 */
/* 목표: '텍스트 + 개수 뱃지'만 깔끔하게, 화살표는 하위 있을 때만 */
.category-nav {
  padding: 12px 10px !important;
  background: transparent !important;
  border: none !important;
}

.category-nav ul { margin:0 !important; padding:0 !important; list-style:none !important; }
.category-nav li { margin: 0 !important; padding: 0 !important; }

.category-nav a {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding: 10px 10px !important;
  border-radius: 12px !important;
  color: var(--text-main) !important;
  text-decoration:none !important;
}

.category-nav a:hover {
  background: rgba(255,255,255,0.045) !important;
}

html[data-theme="light"] .category-nav a:hover {
  background: rgba(15,23,42,0.045) !important;
}

/* 라벨(텍스트) */
.category-nav a .c_cnt,
.category-nav a .count,
.category-nav a .num {
  /* 링크 안에 count span이 들어오는 경우도 있어서 일단 리셋 */
}

.category-nav .c_cnt,
.category-nav .count,
.category-nav .num {
  margin-left:auto !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,0.02) !important;
  color: var(--text-sub) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

html[data-theme="light"] .category-nav .c_cnt,
html[data-theme="light"] .category-nav .count,
html[data-theme="light"] .category-nav .num {
  background: rgba(15,23,42,0.03) !important;
}

/* 2뎁스 */
.category-nav li ul {
  margin: 6px 0 10px 12px !important;
  padding-left: 10px !important;
  border-left: 1px dashed var(--line) !important;
}

.category-nav li ul a {
  padding: 8px 10px !important;
  font-weight: 600 !important;
  opacity: .92 !important;
}

/* 현재 카테고리(방문 페이지) 하이라이트 (티스토리 기본 클래스가 a.current인 경우 커버) */
.category-nav a.current,
.category-nav .selected > a,
.category-nav .active > a {
  background: rgba(77,163,255,0.14) !important;
  border: 1px solid rgba(77,163,255,0.20) !important;
}

/* 화살표/아이콘이 이상하게 '칩'처럼 붙는 문제 방지: 아이콘은 링크 끝에 고정 */
.category-nav i,
.category-nav .ico_more,
.category-nav .ico_open,
.category-nav .ico_close,
.category-nav .fa-chevron-down,
.category-nav .fa-chevron-right {
  margin-left: 6px !important;
  color: var(--text-sub) !important;
  flex: 0 0 auto !important;
}

/* 링크 안에 img 아이콘이 끼어드는 경우 숨김 */
.category-nav img { display:none !important; }

/* '(비공개)' 텍스트가 너무 눈에 띄면 톤다운 */
.category-nav a:has(*) {
  /* no-op for older browsers */
}
.category-nav a {
  word-break: keep-all !important;
}
.category-nav a span,
.category-nav a strong {
  word-break: keep-all !important;
}

/* 카테고리 토글 버튼(체크박스/버튼)이 있을 때 기본 스타일 정리 */
.category-nav button,
.category-nav .btn_toggle {
  all: unset;
  cursor: pointer;
  margin-left: 6px;
  color: var(--text-sub);
}


/* GW CATEGORY ACCORDION CSS v1 */
.category-nav li.has-children > a {
  padding-right: 8px !important;
}
.category-nav .gw-cat-toggle {
  margin-left: 6px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,0.02) !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 50 !important;
}
.category-nav .gw-cat-toggle:hover {
  background: rgba(255,255,255,0.05) !important;
}
html[data-theme="light"] .category-nav .gw-cat-toggle {
  background: rgba(15,23,42,0.03) !important;
}
.category-nav li.is-collapsed > ul {
  display: none !important;
}


/* ================================
   GW DEV BLOG CATEGORY FINAL
   - 위에 여러 실험 CSS가 있어도 최종 스타일이 이기도록 !important 적용
   ================================ */
.category-nav { border: 1px solid var(--line) !important; border-radius: 14px !important; }

.category-nav a { justify-content: space-between !important; }

.category-nav .cat-left { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
.category-nav .cat-label { font-weight: 700 !important; font-size: 14px !important; min-width: 0 !important; }
.category-nav li ul .cat-label,
.category-nav .sub_category_list .cat-label { font-weight: 600 !important; font-size: 13px !important; }

.category-nav .cat-count { margin-left: auto !important; }

.category-nav .cat-lock { border-radius: 7px !important; }

.category-nav .gw-cat-toggle {
  margin-left: 8px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,0.02) !important;
  color: var(--text-sub) !important;
}
.category-nav li.is-collapsed > a .gw-cat-toggle i { transform: rotate(-90deg) !important; }

html[data-theme="light"] .category-nav .gw-cat-toggle,
html[data-theme="light"] .category-nav .cat-lock,
html[data-theme="light"] .category-nav .cat-count {
  background: rgba(15,23,42,0.03) !important;
}

/* ===== GW PATCH v9: Category + Codeblock (Light/Dark) ===== */

/* --- Codeblock theme --- */
/* Tistory codeblock markup: pre[data-ke-type="codeblock"] > code */
.post-body pre,
.post-body pre[data-ke-type="codeblock"],
.tt_article_useless_p_margin pre[data-ke-type="codeblock"]{
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border, var(--border)) !important;
}

.post-body pre code,
.post-body pre[data-ke-type="codeblock"] code,
.tt_article_useless_p_margin pre[data-ke-type="codeblock"] code{
  color: var(--text-main) !important;
  background: transparent !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* highlight.js / prism common comment tokens */
.post-body pre code .hljs-comment,
.post-body pre code .token.comment,
.post-body pre code .comment{
  color: var(--text-sub) !important;
  font-style: italic;
}

/* Light/Dark mode codeblock background overrides */
html[data-theme="dark"], body[data-theme="dark"], body.dark{
  --code-bg: var(--code-bg-dark);
  --code-border: var(--code-border-dark);
}
html[data-theme="light"], body[data-theme="light"], body.light{
  --code-bg: #f6f8fa;
  --code-border: var(--code-border-light);
}

/* If data-theme isn't set, respect system preference */
@media (prefers-color-scheme: light){
  :root{ --code-bg:#f6f8fa; --code-border: var(--code-border-light); }
}
@media (prefers-color-scheme: dark){
  :root{ --code-bg: var(--code-bg-dark); --code-border: var(--code-border-dark); }
}
/* --- Category: tistory markup aware --- */
.category-nav{ padding: 10px !important; }
.category-nav ul{ list-style:none; margin:0; padding:0; }

/* root: tt_category > li ("분류 전체보기") */
.category-nav > ul.tt_category > li > a.link_tit{
  font-weight: 800;
  padding: 10px 38px 10px 10px;
}

/* 1차 items live in .category_list */
.category-nav .category_list > li{ position: relative; margin: 0; }
.category-nav .category_list > li > a.link_item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 38px 10px 10px;
  border-radius: 12px;
  font-weight: 700;
}

/* 2차 items live in .sub_category_list */
.category-nav .sub_category_list{ 
  margin-top: 6px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px dashed var(--line);
}
.category-nav .sub_category_list > li{ position: relative; }
.category-nav .sub_category_list > li > a.link_sub_item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 10px;
  border-radius: 10px;
  font-weight: 600;
  opacity: .94;
}

/* collapse: hide both possible sub containers */
.category-nav li.is-collapsed > ul.sub_category_list,
.category-nav li.is-collapsed > ul{
  display: none !important;
}

/* toggle button placement (must be direct child of li) */
.category-nav li.has-children > button.gw-cat-toggle{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 0;
}

.category-nav li.has-children > button.gw-cat-toggle:hover{
  background: rgba(255,255,255,0.08);
}

/* ===== Comments (Dev blog) ===== */
#comments.comments-wrap,
.comments-wrap{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255,255,255,0.02);
}

html[data-theme="light"] #comments.comments-wrap,
html[data-theme="light"] .comments-wrap{
  background: rgba(15,23,42,0.02);
}

.comments-header h3{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0 0 14px 0;
  font-size:18px;
}
.comments-header .count{
  font-size:13px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color: var(--text-sub);
  background: rgba(255,255,255,0.03);
}
html[data-theme="light"] .comments-header .count{
  background: rgba(15,23,42,0.03);
}

.comment-list{ list-style:none; padding:0; margin:0; }
.comment-list > li{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px;
  margin: 10px 0;
  background: rgba(255,255,255,0.02);
}
html[data-theme="light"] .comment-list > li{
  background: rgba(15,23,42,0.02);
}

/* form */
.comment-form{ margin-top: 14px; }
.comment-form .guest-inputs{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}
.comment-form .guest-inputs input{
  flex:1;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background: rgba(255,255,255,0.02);
  color: var(--text-main);
}
html[data-theme="light"] .comment-form .guest-inputs input{
  background: rgba(15,23,42,0.02);
}

.comment-form .input-wrapper{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background: rgba(255,255,255,0.02);
}
html[data-theme="light"] .comment-form .input-wrapper{
  background: rgba(15,23,42,0.02);
}

.comment-form textarea{
  width:100%;
  resize: vertical;
  min-height: 120px;
  border:0;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.6;
}

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

.comment-form .secret-check{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--text-sub);
  font-size: 13px;
}
.comment-form .secret-check input{ width:16px; height:16px; }

.comment-form button[type="submit"],
.comment-form button{
  border:1px solid var(--line);
  border-radius: 12px;
  padding:10px 14px;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  color: var(--text-main);
}
html[data-theme="light"] .comment-form button{
  background: rgba(15,23,42,0.06);
}
.comment-form button:hover{
  background: rgba(255,255,255,0.10);
}
html[data-theme="light"] .comment-form button:hover{
  background: rgba(15,23,42,0.10);
}

/* label + lock + count */
.category-nav .cat-left{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* =====================================================
   COMMENTS (Dev blog style) - matches provided markup
   #entry123Comment .comments-wrap #comments
   ===================================================== */

/* container */
#comments, .comments-wrap{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 16px;
  background: var(--bg);
}

.comments-header{
  display:flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.comments-header h3{
  margin:0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.comments-header .count{
  display: inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
}

/* list */
.comment-list{
  list-style:none;
  margin: 0;
  padding: 0;
}

.comment-list > li{
  border-top: 1px solid var(--line);
  padding: 14px 6px;
}

.comment-list > li:first-child{ border-top: 0; }

/* form */
.comment-form{
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.guest-inputs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.comment-form input[type="text"],
.comment-form input[type="password"]{
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--text-main);
  outline: none;
}

html[data-theme="light"] .comment-form input[type="text"],
html[data-theme="light"] .comment-form input[type="password"]{
  background: #fff;
}

.comment-form textarea{
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--text-main);
  outline: none;
  line-height: 1.55;
}

html[data-theme="light"] .comment-form textarea{
  background: #fff;
}

.comment-form input:focus,
.comment-form textarea:focus{
  border-color: rgba(99,102,241,0.6);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}

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

.secret-check{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--text-sub);
  font-size: 13px;
  user-select:none;
}

.secret-check input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
}

.comment-form button[type="submit"]{
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(99,102,241,0.18);
  color: var(--text-main);
  font-weight: 800;
  cursor: pointer;
}

.comment-form button[type="submit"]:hover{
  background: rgba(99,102,241,0.26);
}

html[data-theme="light"] .comment-form button[type="submit"]{
  background: rgba(99,102,241,0.12);
}
.category-nav .cat-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category-nav .cat-lock{
  opacity: 0.7;
  font-size: 0.9em;
}
.category-nav .cat-count{
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-sub);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}

/* hover + current */
.category-nav a.gw-cat-link:hover{ background: rgba(255,255,255,0.04); }
.category-nav li.is-current > a.gw-cat-link{ background: rgba(88,166,255,0.10); }

/* light mode category hover/toggle */
html[data-theme="light"] .category-nav a.gw-cat-link:hover{ background: rgba(15,23,42,0.04) !important; }
html[data-theme="light"] .category-nav li.has-children > button.gw-cat-toggle:hover{ background: rgba(15,23,42,0.06) !important; }
html[data-theme="light"] .category-nav .cat-count{ background: rgba(15,23,42,0.03) !important; }

/* --- Namecard (Tistory React App) --- */
[data-tistory-react-app="Namecard"]{
  margin: 14px 0 18px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
[data-tistory-react-app="Namecard"] .tt_box_namecard{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--line, var(--border));
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 620px;
  margin: 0; /* avoid awkward centered wide whitespace */
}
[data-tistory-react-app="Namecard"] .tt_box_namecard .tt_cont{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
[data-tistory-react-app="Namecard"] .tt_box_namecard .tt_tit_cont{
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  text-decoration: none;
  line-height: 1.25;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-tistory-react-app="Namecard"] .tt_box_namecard .tt_desc{
  font-size: 13px;
  color: var(--text-sub);
  text-decoration:none;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.95;
}
[data-tistory-react-app="Namecard"] .tt_box_namecard .tt_wrap_thumb{
  margin-left: 0;
  order: 0;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid var(--line, var(--border));
  background: rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
[data-tistory-react-app="Namecard"] .tt_box_namecard > .tt_wrap_thumb{ order: 0 !important; }
[data-tistory-react-app="Namecard"] .tt_box_namecard > .tt_cont{ order: 1 !important; }

[data-tistory-react-app="Namecard"] .tt_box_namecard .tt_thumb_g{
  width: 100%;
  height: 100%;
  display:block;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 999px;
}

/* hover */
[data-tistory-react-app="Namecard"] .tt_box_namecard{
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
[data-tistory-react-app="Namecard"] .tt_box_namecard:hover{
  transform: translateY(-1px);
  border-color: rgba(88,166,255,0.45);
}

/* light mode shadow tuning */
html[data-theme="light"] [data-tistory-react-app="Namecard"] .tt_box_namecard{
  box-shadow: 0 10px 26px rgba(2,6,23,0.08);
}

@media (max-width: 640px){
  [data-tistory-react-app="Namecard"] .tt_box_namecard{
    max-width: 100%;
    padding: 14px 14px;
  }
  [data-tistory-react-app="Namecard"] .tt_box_namecard .tt_desc{
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* =========================================================
   GW CATEGORY CHECKBOX ACCORDION v2 (stable)
   - DOM 재렌더/이벤트 충돌과 무관하게 토글 동작
   - input(display:none) 금지 / aria-hidden 금지
   ========================================================= */
/* 레이아웃: a(텍스트) + 토글(화살표)을 한 줄에 고정하고,
   하위 ul은 다음 줄로 내려오게 해서 '펼쳤을 때 화살표가 아래로 내려가는 현상'을 방지 + 화살표 X축 정렬 고정 */
.category-nav li.has-children{
  position: relative !important;
  display: block !important;
}

/* 상단 한 줄(링크 영역)은 항상 전체 폭을 차지 */
.category-nav li.has-children > a{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-right: 44px !important; /* 오른쪽 화살표 자리 확보 */
}

/* 하위 UL은 다음 줄로 */
.category-nav li.has-children > ul{
  display: block;
  width: 100% !important;
  margin-top: 4px !important;
}

/* checkbox: 화면에서만 숨김(접근성/토글 유지) */
.category-nav input.gw-collapse{
  position:absolute !important;
  width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* 화살표(label): li 우측 상단 고정 (펼쳐도 위치가 안 흔들림) */
.category-nav label.gw-collapse-toggle{
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  width:28px !important; height:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:6px !important;
  color: var(--text-sub) !important;
  cursor:pointer !important;
  z-index: 60 !important;
  pointer-events:auto !important;
}
.category-nav label.gw-collapse-toggle:hover{
  background: rgba(255,255,255,0.1) !important;
  color: var(--text-main) !important;
}

/* 루트(분류 전체보기) 아래 1차 목록은 과도한 들여쓰기 제거 */
.category-nav > ul.tt_category > li > ul.category_list{
  padding-left: 0 !important;
  margin-left: 0 !important;
}
html[data-theme="light"] .category-nav label.gw-collapse-toggle:hover{
  background: rgba(0,0,0,0.05) !important;
}
.category-nav label.gw-collapse-toggle i{ transition: transform 0.2s ease; }

/* 접힘/펼침: input → label → ul 구조 */
.category-nav input.gw-collapse:not(:checked) ~ ul { display:none !important; }
.category-nav input.gw-collapse:checked ~ ul { display:block !important; }

/* 아이콘 회전 */
.category-nav input.gw-collapse:not(:checked) + label.gw-collapse-toggle i { transform: rotate(-90deg); }
.category-nav input.gw-collapse:checked + label.gw-collapse-toggle i { transform: rotate(0deg); }


/* =========================================================
   GW CATEGORY v35 (stable)
   - keep toggle working (checkbox + label outside <a>)
   - fix arrow alignment: grid layout, no overlap
   ========================================================= */
.category-nav ul.tt_category li.has-children{
  display: grid !important;
  grid-template-columns: 1fr 30px !important;
  grid-auto-rows: auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  position: relative !important;
}
.category-nav ul.tt_category li.has-children > a{
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-right: 0 !important;
}
.category-nav ul.tt_category li.has-children > label.gw-collapse-toggle{
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}
.category-nav ul.tt_category li.has-children > label.gw-collapse-toggle:hover{
  background: rgba(255,255,255,0.08) !important;
}
.category-nav ul.tt_category li.has-children > input.gw-collapse{
  position: absolute !important; /* out of grid flow */
}
.category-nav ul.tt_category li.has-children > ul{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  margin-top: 4px !important;
}
/* checkbox -> show/hide (override any earlier rules) */
.category-nav ul.tt_category li.has-children > input.gw-collapse:not(:checked) ~ ul{
  display: none !important;
}
.category-nav ul.tt_category li.has-children > input.gw-collapse:checked ~ ul{
  display: block !important;
}
/* icon rotate */
.category-nav ul.tt_category li.has-children > label.gw-collapse-toggle i{
  transition: transform .18s ease !important;
}
.category-nav ul.tt_category li.has-children > input.gw-collapse:not(:checked) + label.gw-collapse-toggle i{
  transform: rotate(-90deg) !important;
}
.category-nav ul.tt_category li.has-children > input.gw-collapse:checked + label.gw-collapse-toggle i{
  transform: rotate(0deg) !important;
}



/* ===== TOC (Table of Contents) ===== */
.toc-container{
  margin: 16px 0 18px;
  padding: 12px 12px;
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 14px;
  background: var(--card, rgba(255,255,255,.7));
}
.toc-trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(0,0,0,.10));
  border-radius: 12px;
  background: transparent;
  color: var(--text-main);
  font-weight: 700;
  cursor: pointer;
}
.toc-trigger::after{
  content: "▾";
  opacity: .7;
}
.toc-content{
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, rgba(0,0,0,.12));
}
.toc-content.active{ display: block; }
.toc-content a{
  display: block;
  padding: 6px 6px;
  border-radius: 10px;
  color: var(--text-sub);
  text-decoration: none;
  line-height: 1.4;
}
.toc-content a:hover{ background: rgba(0,0,0,.04); color: var(--text-main); }
.toc-content a.toc-link-h3{ padding-left: 18px; font-weight: 600; }
.toc-content a.toc-link-h2{ font-weight: 700; }
.toc-content a.is-active{ background: rgba(0,0,0,.06); color: var(--text-main); }

/* dark tweaks */
html[data-theme="dark"] .toc-container{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
html[data-theme="dark"] .toc-trigger{
  border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] .toc-content a:hover{ background: rgba(255,255,255,.06); }
html[data-theme="dark"] .toc-content a.is-active{ background: rgba(255,255,255,.08); }



/* =========================================
   Post Body (Content) Theme Polish v40
   - Tables / code / blockquote / links
   - Force override editor inline styles for readability in light/dark
   ========================================= */

:root{
  --table-bg: rgba(255,255,255,0.02);
  --table-head-bg: rgba(255,255,255,0.05);
  --table-border: var(--border);
  --code-bg: rgba(255,255,255,0.06);
  --code-border: rgba(255,255,255,0.10);
  --quote-bg: rgba(255,255,255,0.04);
  --quote-border: rgba(88,166,255,0.45);
}

html[data-theme="light"]{
  --table-bg: #ffffff;
  --table-head-bg: #f3f4f6;
  --table-border: rgba(17,24,39,0.16);
  --code-bg: rgba(15,23,42,0.06);
  --code-border: rgba(15,23,42,0.10);
  --quote-bg: rgba(15,23,42,0.04);
  --quote-border: rgba(37,99,235,0.35);
}

/* Base typography */
.post-body{
  color: var(--text-main);
  font-size: calc(1rem * var(--gw-font-scale, 1));
  line-height: var(--gw-line-height, 1.75);
  word-break: keep-all;
}
.post-body a{
  color: var(--accent);
  text-decoration: none;
}
.post-body a:hover{
  text-decoration: underline;
}

/* Headings spacing */
.post-body h1, .post-body h2, .post-body h3, .post-body h4{
  margin: 1.4em 0 0.6em;
  line-height: 1.25;
}
.post-body h2{ scroll-margin-top: 90px; }
.post-body h3{ scroll-margin-top: 90px; }

/* Inline code */
.post-body code{
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  padding: 0.15em 0.4em;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
}

/* Code blocks */
.post-body pre{
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 12px;
  padding: 14px 16px;
  overflow: auto;
  margin: 1.1em 0;
}
.post-body pre code{
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.9em;
}

/* Blockquote */
.post-body blockquote{
  margin: 1.1em 0;
  padding: 12px 14px;
  border-left: 4px solid var(--quote-border);
  background: var(--quote-bg);
  border-radius: 10px;
  color: var(--text-main);
}
.post-body blockquote *{
  color: inherit;
}

/* Tables – override inline editor styles */
.post-body table{
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--table-bg) !important;
  color: var(--text-main) !important;
  margin: 1.2em 0 !important;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--table-border) !important;
}
.post-body table thead tr,
.post-body table tbody tr{
  background: transparent !important;
}
.post-body table th,
.post-body table td{
  background: transparent !important;
  color: var(--text-main) !important;
  border: 1px solid var(--table-border) !important;
  padding: 10px 12px !important;
  vertical-align: top;
}
.post-body table th{
  background: var(--table-head-bg) !important;
  font-weight: 700;
}
.post-body table td * ,
.post-body table th *{
  color: inherit !important;
}
.post-body table img{
  max-width: 100%;
  height: auto;
}

/* Horizontal rule */
.post-body hr{
  border: 0;
  border-top: 1px solid var(--line, var(--border));
  margin: 1.6em 0;
  opacity: 0.9;
}

/* Images */
.post-body img{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Lists */
.post-body ul, .post-body ol{
  padding-left: 1.25em;
}
.post-body li{
  margin: 0.25em 0;
}

/* === GW Enhancements v2026-03-05 === */

/* Theme palette: enforce consistent variables (light/dark) */
:root{
  --line: var(--border);
  --bg-page: var(--bg-body);
  --code-surface: var(--code-bg-dark);
  --code-text: var(--text-main);
  --code-border: var(--code-border-dark);
}

html[data-theme="dark"]{
  color-scheme: dark;
  --bg-body: #0d1117;
  --bg-sidebar: #161b22;
  --bg-card: #161b22;
  --bg-input: #0d1117;
  --bg-comment: #0d1117;
  --text-main: #e6edf3;
  --text-sub: #8b949e;
  --border: #30363d;
  --line: var(--border);
  --code-surface: var(--code-bg-dark);
  --code-text: #e6edf3;
  --code-border: var(--code-border-dark);
}

html[data-theme="light"]{
  color-scheme: light;
  --bg-body: #f6f7fb;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-comment: #ffffff;
  --text-main: #0f172a;
  --text-sub: #475569;
  --border: rgba(15,23,42,0.14);
  --line: rgba(15,23,42,0.14);
  --code-surface: rgba(15,23,42,0.06);
  --code-text: #0f172a;
  --code-border: rgba(15,23,42,0.10);
}

/* Progress bar */
#gw-progress{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
}
#gw-progress .bar{
  height: 100%;
  width: 0%;
  background: var(--accent);
}

/* Floating action buttons */
.gw-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9998;
}
.gw-fab .gw-fab-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,0.25);
  transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
html[data-theme="light"] .gw-fab .gw-fab-btn{
  box-shadow: 0 12px 26px rgba(15,23,42,0.10);
}
.gw-fab .gw-fab-btn:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
}
.gw-fab .gw-fab-btn:active{
  transform: translateY(0px);
}
.gw-fab .gw-fab-btn.is-hidden{
  display: none;
}

/* Toast */
#gw-toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(22, 27, 34, 0.92);
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
html[data-theme="light"] #gw-toast{
  background: rgba(255,255,255,0.92);
  box-shadow: 0 16px 34px rgba(15,23,42,0.16);
}

/* Lightbox */
.gw-lightbox{
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.76);
}
.gw-lightbox.is-open{
  display: flex;
}
.gw-lightbox img{
  max-width: min(100%, 1200px);
  max-height: 88vh;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}
.gw-lightbox .gw-lightbox-close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.35);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gw-lightbox .gw-lightbox-close:hover{
  border-color: rgba(255,255,255,0.38);
  background: rgba(0,0,0,0.45);
}
body.gw-no-scroll{
  overflow: hidden !important;
}

/* Code copy button */
.post-body pre{
  position: relative;
}
.post-body pre .gw-copy-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html[data-theme="light"] .post-body pre .gw-copy-btn{
  background: rgba(15,23,42,0.04);
}
.post-body pre .gw-copy-btn:hover{
  border-color: var(--accent);
  color: var(--accent);
}
.post-body pre .gw-copy-btn.is-copied{
  border-color: var(--accent);
  color: var(--accent);
}

/* Table scroll wrapper */
.gw-table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 16px 0;
  background: var(--bg-card);
}
.gw-table-scroll table{
  width: 100%;
  border-collapse: collapse;
}
.gw-table-scroll::-webkit-scrollbar{ height: 10px; }
.gw-table-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14); border-radius: 10px; }
html[data-theme="light"] .gw-table-scroll::-webkit-scrollbar-thumb{ background: rgba(15,23,42,0.14); }

/* External link badge */
.post-body a.gw-external::after{
  content: "\f08e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  margin-left: 6px;
  font-size: 0.85em;
  opacity: 0.7;
}

/* Heading anchor button */
.post-body h2, .post-body h3, .post-body h4{
  position: relative;
}
.post-body .gw-heading-anchor{
  margin-left: 8px;
  opacity: 0;
  transform: translateY(-1px);
  transition: opacity 0.12s ease;
  color: var(--text-sub);
}
.post-body h2:hover .gw-heading-anchor,
.post-body h3:hover .gw-heading-anchor,
.post-body h4:hover .gw-heading-anchor{
  opacity: 1;
}
.post-body .gw-heading-anchor:hover{
  color: var(--accent);
}

/* TOC improvements */
.toc-container{ margin: 16px 0; }
.toc-container.is-open #toc-content{ display: block; }
#toc-content{ display: none; }
#toc-content.active{ display: block; }
#toc-content .gw-toc-list{ list-style:none; margin: 10px 0 0 0; padding: 0; }
#toc-content .gw-toc-item a{
  display:block;
  padding: 6px 10px;
  border-radius: 12px;
  color: var(--text-main);
}
#toc-content .gw-toc-item a:hover{ background: rgba(255,255,255,0.06); }
html[data-theme="light"] #toc-content .gw-toc-item a:hover{ background: rgba(15,23,42,0.04); }
#toc-content .gw-toc-h3 a{ padding-left: 22px; opacity: .92; }
#toc-content a.is-active{
  background: rgba(37,99,235,0.12);
  color: var(--accent);
}
html[data-theme="dark"] #toc-content a.is-active{ background: rgba(59,130,246,0.22); }

/* Reading time */
.gw-readtime{
  margin-left: 8px;
  color: var(--text-sub);
  font-weight: 700;
  font-size: 0.92em;
}

@media (max-width: 768px){
  .gw-fab{ right: 14px; bottom: 14px; }
  #gw-toast{ bottom: 18px; font-size: 0.9rem; }
  .gw-lightbox{ padding: 12px; }
}



/* =========================================================
   (Add) Responsive embeds + Reader settings panel + Lightbox nav
   ========================================================= */

/* Responsive embeds */
.gw-embed{
  position: relative;
  width: 100%;
  padding-top: var(--gw-embed-ratio, 56.25%);
  margin: 16px 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.gw-embed iframe,
.gw-embed video,
.gw-embed embed{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gw-embed video{ object-fit: contain; }

/* Lightbox navigation + caption */
.gw-lightbox .gw-lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.35);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gw-lightbox .gw-lightbox-nav:hover{
  border-color: rgba(255,255,255,0.38);
  background: rgba(0,0,0,0.45);
}
.gw-lightbox .gw-lightbox-nav.is-hidden{ display: none; }
.gw-lightbox .gw-lightbox-prev{ left: 18px; }
.gw-lightbox .gw-lightbox-next{ right: 18px; }

.gw-lightbox .gw-lightbox-caption{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  max-width: min(92vw, 1200px);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  opacity: 0.92;
}
.gw-lightbox .gw-lightbox-caption.is-hidden{ display: none; }

/* Reader settings panel */
.gw-settings{
  position: fixed;
  inset: 0;
  z-index: 10000; /* below lightbox(10001) */
  display: none;
}
.gw-settings.is-open{ display: block; }
.gw-settings .gw-settings-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.gw-settings .gw-settings-panel{
  position: absolute;
  right: 18px;
  bottom: 82px; /* above FAB */
  width: 320px;
  max-width: calc(100vw - 36px);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  padding: 14px;
}
html[data-theme="light"] .gw-settings .gw-settings-panel{
  box-shadow: 0 24px 70px rgba(15,23,42,0.16);
}

.gw-settings .gw-settings-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.gw-settings .gw-settings-title{
  font-weight: 900;
  font-size: 1rem;
}
.gw-settings .gw-settings-close{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gw-settings .gw-settings-close:hover{
  border-color: var(--accent);
  color: var(--accent);
}

.gw-settings .gw-settings-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed rgba(255,255,255,0.10);
}
html[data-theme="light"] .gw-settings .gw-settings-row{
  border-top-color: rgba(15,23,42,0.10);
}
.gw-settings .gw-settings-row:first-of-type{ border-top: none; }

.gw-settings .gw-settings-label{
  font-weight: 900;
  font-size: 0.92rem;
  color: var(--text-main);
  white-space: nowrap;
}
.gw-settings .gw-settings-controls{
  display: flex;
  align-items: center;
  gap: 8px;
}
.gw-settings .gw-settings-btn{
  min-width: 40px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text-main);
  font-weight: 900;
}
html[data-theme="light"] .gw-settings .gw-settings-btn{
  background: rgba(15,23,42,0.04);
}
.gw-settings .gw-settings-btn:hover{
  border-color: var(--accent);
  color: var(--accent);
}
.gw-settings .gw-settings-value{
  width: 64px;
  text-align: center;
  font-weight: 900;
  color: var(--text-sub);
}

.gw-settings .gw-settings-reset{
  width: 100%;
  margin-top: 12px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-sub);
  font-weight: 900;
}
.gw-settings .gw-settings-reset:hover{
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 768px){
  .gw-settings .gw-settings-panel{
    right: 14px;
    bottom: 76px;
    width: calc(100vw - 28px);
  }
  .gw-lightbox .gw-lightbox-prev{ left: 12px; }
  .gw-lightbox .gw-lightbox-next{ right: 12px; }
}


/* =========================================================
   GW HOME & LIST UPGRADE v2026-03-05p3
   - Breadcrumb + view toggle
   - Category chips
   - Grid/List view modes
   - Home category dashboard
   ========================================================= */

/* List toolbar */
.list-header-styled .gw-list-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom: 10px;
}
.list-header-styled .gw-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size: 0.82rem;
  color: var(--text-sub);
}
.list-header-styled .gw-breadcrumb a{
  color: var(--text-sub);
  text-decoration:none;
}
.list-header-styled .gw-breadcrumb a:hover{
  color: var(--text-main);
}
.list-header-styled .gw-breadcrumb .sep{
  opacity: 0.55;
}
.list-header-styled .gw-breadcrumb .cur{
  color: var(--text-main);
  font-weight: 800;
}
.list-header-styled .gw-list-actions{
  display:flex;
  gap:8px;
}
.list-header-styled .gw-view-btn{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--text-sub);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.list-header-styled .gw-view-btn:hover{
  background: rgba(255,255,255,0.05);
  color: var(--text-main);
}
.list-header-styled .gw-view-btn.is-active,
.list-header-styled .gw-view-btn[aria-pressed="true"]{
  background: rgba(59,130,246,0.18);
  border-color: rgba(59,130,246,0.35);
  color: var(--text-main);
}

/* Category chips */
.gw-category-chips{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.gw-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--text-sub);
  text-decoration:none;
  font-size: 0.9rem;
  line-height: 1;
}
.gw-chip:hover{
  background: rgba(255,255,255,0.05);
  color: var(--text-main);
}
.gw-chip.is-active{
  background: rgba(59,130,246,0.18);
  border-color: rgba(59,130,246,0.35);
  color: var(--text-main);
  font-weight: 800;
}
.gw-chip .gw-chip-count{
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
.gw-chip.gw-chip-more{
  font-weight: 800;
}

/* Post excerpt (list pages) */
.post-excerpt{
  margin: 10px 0 0;
  color: var(--text-sub);
  font-size: 0.92rem;
  line-height: 1.55;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* View modes */
body[data-gw-view="grid"] .article-wrapper{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 26px !important;
  align-items: stretch !important;
}
body[data-gw-view="grid"] .post-item{
  height: auto !important;
  min-height: 240px;
}
body[data-gw-view="grid"] .post-content-inner{
  padding: 22px !important;
}

/* list view */
body[data-gw-view="list"] .article-wrapper{
  display:flex !important;
  flex-direction:column !important;
  gap: 16px !important;
}
body[data-gw-view="list"] .post-item{
  height: auto !important;
  display:grid !important;
  grid-template-columns: 240px 1fr;
  border-radius: 18px !important;
  overflow:hidden;
}
body[data-gw-view="list"] .post-item.gw-no-thumb{
  grid-template-columns: 1fr !important;
}
body[data-gw-view="list"] .post-thumbnail{
  display:block;
  width: 100%;
  height: 100%;
  min-height: 160px;
  margin: 0 !important;
  border-radius: 18px 0 0 18px;
  overflow:hidden;
}
body[data-gw-view="list"] .post-thumbnail img{
  width:100%;
  height:100%;
  object-fit: cover;
}
body[data-gw-view="list"] .post-content-inner{
  padding: 20px !important;
}
body[data-gw-view="list"] .post-title{
  font-size: 1.15rem !important;
}
body[data-gw-view="list"] .post-excerpt{
  -webkit-line-clamp: 2;
}

/* Home dashboard */
.gw-home-dashboard{
  margin: 18px 0 28px;
}
.gw-dash-head{
  margin-bottom: 14px;
}
.gw-dash-title{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
}
.gw-dash-desc{
  margin: 6px 0 0;
  color: var(--text-sub);
  font-size: 0.92rem;
}
.gw-dash-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.gw-dash-card{
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,0.02);
}
.gw-dash-card:hover{
  background: rgba(255,255,255,0.05);
}
.gw-dash-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 12px;
}
.gw-dash-card-title{
  font-weight: 900;
  color: var(--text-main);
  text-decoration:none;
  min-width:0;
}
.gw-dash-card-title:hover{
  color: var(--accent);
}
.gw-dash-card-count{
  margin-left:auto;
  font-size: 0.9rem;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.gw-dash-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

/* Mobile adjustments */
@media (max-width: 768px){
  .list-header-styled .gw-list-toolbar{
    flex-direction: column;
    align-items:flex-start;
  }
  .list-header-styled .gw-list-actions{
    align-self:flex-end;
  }

  body[data-gw-view="list"] .post-item{
    grid-template-columns: 1fr !important;
  }
  body[data-gw-view="list"] .post-thumbnail{
    border-radius: 18px 18px 0 0 !important;
    min-height: 180px;
  }
}

/* =========================================
   Home Board (카테고리별 최신글) - 20260305p4
   - Index 페이지에서 카테고리별 최신 N개 글을 보드 형태로 노출
   ========================================= */
.gw-home-board{ margin: 18px 0 28px; }
.gw-board{ border:1px solid var(--line); border-radius: 20px; padding: 16px; background: rgba(255,255,255,0.02); }
.gw-board-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom: 12px; }
.gw-board-title{ margin:0; font-size: 1.1rem; font-weight: 900; }
.gw-board-sub{ margin: 6px 0 0; color: var(--text-sub); font-size: 0.92rem; }
.gw-board-actions{ display:flex; gap:8px; align-items:center; }
.gw-board-toggle{ border:1px solid var(--line); background: rgba(255,255,255,0.02); color: var(--text-main); border-radius: 999px; padding: 8px 12px; font-size:0.9rem; cursor:pointer; }
.gw-board-toggle:hover{ background: rgba(255,255,255,0.05); }
.gw-board-toggle i{ margin-right: 6px; }

.gw-board-note{ color: var(--text-sub); font-size:0.92rem; margin-top: 8px; }
.gw-board-body{ margin-top: 14px; }

.gw-board-group{ margin-top: 20px; }
.gw-board-group:first-child{ margin-top: 0; }
.gw-board-group-title{ display:flex; align-items:center; gap: 10px; margin: 0 0 10px; }
.gw-board-group-title a{ font-weight: 900; color: var(--text-main); text-decoration:none; }
.gw-board-group-title a:hover{ color: var(--accent); }
.gw-board-group-count{ margin-left:auto; font-size: 0.85rem; color: var(--text-sub); font-variant-numeric: tabular-nums; padding: 6px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,0.02); }

.gw-board-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gw-board-card{ border:1px solid var(--line); border-radius: 18px; padding: 14px 14px 12px; background: rgba(255,255,255,0.02); }
.gw-board-card:hover{ background: rgba(255,255,255,0.05); }
.gw-board-card-head{ display:flex; align-items:center; gap: 10px; margin-bottom: 10px; }
.gw-board-card-title{ font-weight: 900; color: var(--text-main); text-decoration:none; min-width:0; }
.gw-board-card-title:hover{ color: var(--accent); }
.gw-board-card-count{ margin-left:auto; font-size: 0.85rem; color: var(--text-sub); font-variant-numeric: tabular-nums; padding: 6px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,0.02); }

.gw-board-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 8px; }
.gw-board-item{ display:flex; align-items:baseline; gap: 10px; min-width:0; }
.gw-board-date{ flex:0 0 auto; color: var(--text-sub); font-size:0.82rem; font-variant-numeric: tabular-nums; }
.gw-board-link{ color: var(--text-main); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gw-board-link:hover{ color: var(--accent); }
.gw-board-new{ flex:0 0 auto; font-size:0.72rem; padding: 2px 8px; border-radius: 999px; border:1px solid rgba(88,166,255,0.5); color: var(--accent); background: rgba(88,166,255,0.10); }

.gw-board-more{ margin-top: 10px; display:inline-flex; align-items:center; gap: 6px; font-size:0.9rem; color: var(--text-sub); text-decoration:none; }
.gw-board-more:hover{ color: var(--accent); }
.gw-board-empty, .gw-board-error{ color: var(--text-sub); font-size:0.9rem; padding: 6px 0 2px; }

.gw-home-board.is-collapsed .gw-board-body{ display:none; }

@media (max-width: 768px){
  .gw-board-grid{ grid-template-columns: 1fr; }
}

body#tt-body-index.gw-home-board-mode .article-wrapper,
body#tt-body-index.gw-home-board-mode .pagination{ display:none !important; }
body.gw-home-board-mode .list-header-styled .gw-list-actions{ display:none !important; }
/* p10: index board-only minimal layout */
body#tt-body-index.gw-home-board-mode .list-header-styled,
body#tt-body-index.gw-home-board-mode #gw-home-dashboard{ display:none !important; }
body#tt-body-index.gw-home-board-mode .gw-home-board{ margin-top: 0 !important; }
body#tt-body-index.gw-home-board-mode .content{ padding-top: 24px; }


/* =========================================
   Portfolio Home (index)
   ========================================= */
.gw-portfolio-home { margin: 18px 0 26px; }

.gw-hero {
  background: linear-gradient(180deg, rgba(88,166,255,0.12), rgba(88,166,255,0.02));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 18px;
}
.gw-hero-title { font-size: 1.65rem; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 8px; }
.gw-hero-sub { color: var(--text-sub); margin: 0 0 14px; line-height: 1.5; }
.gw-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.gw-badge {
  font-size: 0.8rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-main);
}
.gw-hero-links { display: flex; flex-wrap: wrap; gap: 10px; }
.gw-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-main);
  font-weight: 800;
  font-size: 0.9rem;
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gw-btn:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); }

.gw-section { margin-bottom: 18px; }
.gw-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.gw-section-head h3 { margin: 0; font-size: 1.1rem; font-weight: 900; }
.gw-section-desc { margin: 0; color: var(--text-sub); font-size: 0.86rem; line-height: 1.35; }
.gw-section-more {
  color: var(--text-sub);
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gw-section-more:hover { border-color: var(--accent); color: var(--accent); }

.gw-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) {
  .gw-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gw-project-grid { grid-template-columns: 1fr; }
}

.gw-project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  min-height: 126px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.gw-project-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.gw-project-title { margin: 0; font-weight: 900; font-size: 1rem; }
.gw-project-desc { margin: 0; color: var(--text-sub); font-size: 0.88rem; line-height: 1.45; }
.gw-project-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gw-project-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-sub);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.gw-project-links a:hover { border-color: var(--accent); color: var(--accent); }

.gw-project-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.gw-chip {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-sub);
  white-space: nowrap;
}

.gw-ps-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.gw-ps-desc { margin: 0; color: var(--text-sub); font-size: 0.88rem; line-height: 1.45; }
.gw-ps-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.gw-ps-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-main);
  font-weight: 800;
  font-size: 0.85rem;
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gw-ps-links a:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); }

.gw-empty-state {
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 14px;
  color: var(--text-sub);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* =========================================================
   Developer blog category mode (p7)
   ========================================================= */
body.gw-home-board-mode .list-header-styled .list-desc{ letter-spacing: -0.01em; }
.gw-board-title, .gw-board-group-title a, .gw-board-card-title, .gw-board-date{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.gw-board-link{ line-height: 1.5; }
.gw-dash-title, .gw-board-title{ letter-spacing: -0.02em; }
.top-nav-right .dropdown[style*="display: none"]{ display:none !important; }


/* p8 board-only home */
.gw-board-only .gw-board-head{ align-items:flex-start; }
body.gw-home-board-mode .gw-home-board{ margin-bottom: 36px; }
body.gw-home-board-mode #gw-home-dashboard{ margin-bottom: 22px; }


/* =========================================================
   Final hybrid design (2026-03-08-p11)
   Blog first, portfolio friendly
   ========================================================= */
:root{
  --gw-surface-soft: rgba(37,99,235,0.06);
}

.top-nav{
  margin-bottom: 24px;
  padding-bottom: 16px;
}
.top-logo-link{
  letter-spacing: -0.02em;
}
.top-nav-right{
  gap: 6px;
}
.top-menu-item{
  font-size: 0.92rem;
  font-weight: 700;
}

.profile-card{
  border-radius: 18px;
  padding: 22px 16px 18px;
}
.profile-name{
  letter-spacing: -0.02em;
}
.profile-desc{
  max-width: 16ch;
}
.sidebar-footer{
  font-variant-numeric: tabular-nums;
}

body.gw-home-board-mode .list-header-styled,
body.gw-home-board-mode #gw-home-dashboard,
body.gw-home-board-mode #gw-category-chips{
  display: none !important;
}
body.gw-home-board-mode .content{
  padding-top: 32px;
}
body.gw-home-board-mode .top-nav{
  margin-bottom: 20px;
}
body.gw-home-board-mode .gw-home-board{
  margin: 0 0 36px !important;
}

.gw-board{
  padding: 18px 18px 20px;
  border-color: var(--line);
  background: var(--bg-card);
  box-shadow: 0 12px 34px rgba(15,23,42,0.05);
}
html[data-theme="dark"] .gw-board{
  background: rgba(255,255,255,0.02);
  box-shadow: none;
}
.gw-board-head{
  margin-bottom: 8px;
}
.gw-board-title{
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.gw-board-sub{
  font-size: 0.88rem;
}
.gw-board-group{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.gw-board-group:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.gw-board-group-title{
  margin-bottom: 12px;
}
.gw-board-group-title a{
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.gw-board-group-count,
.gw-board-card-count{
  background: transparent;
}
.gw-board-grid{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.gw-board-card{
  border-radius: 14px;
  padding: 12px 12px 10px;
  border-color: var(--line);
  background: rgba(255,255,255,0.02);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
html[data-theme="light"] .gw-board-card{
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15,23,42,0.04);
}
.gw-board-card:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
}
.gw-board-card-title{
  font-size: 0.96rem;
}
.gw-board-list{
  gap: 7px;
}
.gw-board-item{
  align-items: center;
}
.gw-board-date{
  min-width: 72px;
  font-size: 0.78rem;
}
.gw-board-link{
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gw-board-more{
  margin-top: 12px;
  font-size: 0.84rem;
  font-weight: 700;
}
.gw-board-new{
  font-weight: 700;
}

@media (max-width: 980px){
  .top-nav{
    margin-bottom: 18px;
  }
  body.gw-home-board-mode .content{
    padding-top: 20px;
  }
}

html[data-theme="light"]{
  --bg-body: #f7f9fc;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-comment: #ffffff;
  --text-main: #111827;
  --text-sub: #64748b;
  --border: #dfe5ee;
  --line: #dfe5ee;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
}
html[data-theme="light"] .sidebar,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .search-box input,
html[data-theme="light"] .gw-board{
  box-shadow: 0 10px 30px rgba(15,23,42,0.04);
}
html[data-theme="light"] .theme-btn,
html[data-theme="light"] .admin-btn{
  background: #ffffff;
}
html[data-theme="light"] .top-menu-item:hover,
html[data-theme="light"] .dropdown:hover .top-menu-item{
  background: var(--gw-surface-soft);
}
html[data-theme="light"] .dropdown-content{
  box-shadow: 0 12px 32px rgba(15,23,42,0.10);
}

/* =========================================================
   Home hybrid portfolio (2026-03-14-p12)
   ========================================================= */
.gw-home-portfolio{
  display:none;
  margin: 0 0 30px;
}
body.gw-home-portfolio-mode .gw-home-portfolio{
  display:block;
}
body.gw-home-portfolio-mode .gw-home-board{
  margin-top: 0;
}

.top-nav-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.gw-top-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  font-weight:800;
}
html[data-theme="light"] .gw-top-link{
  background:#fff;
}
.gw-top-link:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.gw-btn-ghost{
  background:transparent !important;
}

.gw-home-hero{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  padding:22px 24px;
  margin-bottom:18px;
}
.gw-home-hero::after{
  content:"";
  position:absolute;
  inset:auto -80px -80px auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,0.16), rgba(37,99,235,0));
  pointer-events:none;
}
.gw-home-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.04);
  color:var(--text-sub);
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.gw-home-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(37,99,235,0.12);
}
.gw-home-hero .gw-hero-title{
  font-size:clamp(1.9rem, 3vw, 2.55rem);
  line-height:1.15;
  margin-bottom:10px;
}
.gw-home-hero .gw-hero-sub{
  max-width:58ch;
  font-size:1rem;
  line-height:1.7;
}
.gw-home-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 0 0 16px;
}
.gw-home-stat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.04);
  color:var(--text-sub);
  font-size:0.82rem;
  font-weight:700;
}
.gw-home-stat strong{
  color:var(--text-main);
  font-size:0.95rem;
  font-variant-numeric:tabular-nums;
}
.gw-home-stat span:last-child{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.gw-feature-grid,
.gw-writing-grid{
  display:grid;
  gap:14px;
}
.gw-feature-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.gw-writing-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.gw-feature-card,
.gw-writing-card{
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--bg-card);
  box-shadow:0 10px 30px rgba(15,23,42,0.04);
}
html[data-theme="dark"] .gw-feature-card,
html[data-theme="dark"] .gw-writing-card{
  background:rgba(255,255,255,0.02);
  box-shadow:none;
}
.gw-feature-card{
  min-height:180px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.gw-feature-meta{
  display:flex;
  justify-content:flex-end;
}
.gw-feature-list{
  list-style:none;
  margin:4px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.gw-feature-list li{
  min-width:0;
}
.gw-feature-list a{
  color:var(--text-main);
  font-size:0.9rem;
  line-height:1.45;
  text-decoration:none;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gw-feature-list a:hover{
  color:var(--accent);
}
.gw-writing-card{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:146px;
  transition:transform .15s ease, border-color .15s ease;
}
.gw-writing-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
}
.gw-writing-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--text-sub);
  font-size:0.78rem;
}
.gw-writing-category{
  display:inline-flex;
  align-items:center;
  min-width:0;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gw-writing-date{
  flex:0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric:tabular-nums;
}
.gw-writing-title{
  margin:0;
  font-size:1rem;
  line-height:1.45;
  letter-spacing:-0.01em;
}
.gw-writing-title a{
  color:var(--text-main);
  text-decoration:none;
}
.gw-writing-title a:hover{
  color:var(--accent);
}
.gw-writing-excerpt{
  margin:0;
  color:var(--text-sub);
  font-size:0.9rem;
  line-height:1.65;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.gw-empty-state{
  border:1px dashed var(--line);
  border-radius:16px;
  padding:18px;
  color:var(--text-sub);
  background:rgba(255,255,255,0.03);
}

body.gw-home-board-mode .list-header-styled,
body.gw-home-board-mode #gw-home-dashboard,
body.gw-home-board-mode #gw-category-chips{
  display:none !important;
}
body.gw-home-board-mode .gw-home-portfolio{
  margin-bottom:28px;
}
body.gw-home-board-mode .gw-home-board{
  margin-bottom:36px;
}

@media (max-width: 1180px){
  .gw-feature-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .gw-writing-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .gw-home-hero{
    padding:20px;
  }
  .gw-home-hero .gw-hero-title{
    font-size:1.7rem;
  }
  .gw-feature-grid,
  .gw-writing-grid{
    grid-template-columns:1fr;
  }
  .gw-writing-card{
    min-height:auto;
  }
  .gw-top-link{
    padding:7px 10px;
    font-size:0.86rem;
  }
}

/* =====================================================
   2026-03-14 category sidebar cleanup
   - hide raw '(비공개)' text by rebuilding anchor markup in JS
   - keep a small lock icon only
   - stabilize label/count alignment
   ===================================================== */
.category-nav a.gw-cat-link{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-width:0 !important;
}
.category-nav a.gw-cat-link .cat-left{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
.category-nav a.gw-cat-link .cat-label{
  display:block !important;
  min-width:0 !important;
  line-height:1.35 !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:anywhere !important;
}
.category-nav a.gw-cat-link .cat-lock{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:20px !important;
  height:20px !important;
  flex:0 0 auto !important;
  font-size:11px !important;
  opacity:.48 !important;
  border:none !important;
  background:transparent !important;
  padding:0 !important;
}
.category-nav a.gw-cat-link .cat-count{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:34px !important;
  height:24px !important;
  padding:0 9px !important;
  flex:0 0 auto !important;
  margin-left:10px !important;
}
html[data-theme="light"] .category-nav a.gw-cat-link .cat-count{
  background: rgba(15,23,42,0.03) !important;
}


/* --- Final cleanup (2026-03-15) --- */
.gw-home-stats,
.gw-home-stat,
.gw-feature-list,
.gw-feature-meta{
  display:none !important;
}

.gw-feature-card{
  min-height: 0;
}

.gw-home-hero .gw-hero-links{
  margin-top: 18px;
}


/* =========================================================
   Developer Blog clean rebuild (2026-03-15)
   - home: intro + recent posts + category board
   - remove portfolio-style featured work / stats dependency
   ========================================================= */
body.gw-devblog-home-mode .gw-home-portfolio{
  display:block !important;
  margin:0 0 28px !important;
}
body.gw-devblog-home-mode .list-header-styled{
  padding-top:0 !important;
}
body.gw-devblog-home-mode .gw-list-toolbar,
body.gw-devblog-home-mode #gw-category-chips,
body.gw-devblog-home-mode #gw-home-dashboard{
  display:none !important;
}
body.gw-devblog-home-mode .list-title{
  font-size:1.5rem !important;
  margin-bottom:10px !important;
}
body.gw-devblog-home-mode .list-desc{
  max-width:none !important;
}
body.gw-devblog-home-mode .gw-home-board{
  margin-top:34px !important;
  margin-bottom:40px !important;
}
.gw-dev-hero{
  position:relative;
  overflow:hidden;
  padding:26px 28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--bg-card);
  box-shadow:0 10px 30px rgba(15,23,42,0.04);
}
html[data-theme="dark"] .gw-dev-hero{
  background:rgba(255,255,255,0.02);
  box-shadow:none;
}
.gw-dev-hero::after{
  content:"";
  position:absolute;
  inset:auto -90px -90px auto;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,0.12), rgba(37,99,235,0));
  pointer-events:none;
}
.gw-dev-hero .gw-home-kicker{
  margin-bottom:14px;
}
.gw-dev-hero .gw-hero-title{
  margin:0 0 10px;
  font-size:clamp(2rem, 3.5vw, 2.9rem);
  line-height:1.12;
}
.gw-dev-hero .gw-hero-sub{
  max-width:60ch;
  margin:0 0 16px;
  color:var(--text-sub);
  font-size:1rem;
  line-height:1.75;
}
.gw-dev-hero .gw-hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}
.gw-dev-hero .gw-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg-body);
  font-weight:700;
}
.gw-dev-hero .gw-hero-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
body.gw-devblog-home-mode .top-nav-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
body.gw-devblog-home-mode .gw-top-link{
  background:transparent;
}
@media (max-width: 860px){
  .gw-dev-hero{
    padding:22px 20px;
  }
  .gw-dev-hero .gw-hero-title{
    font-size:1.9rem;
  }
}


/* =========================================================
   Developer Blog home fix (2026-03-16)
   - home recent posts: stable 3-col grid, hide extras, hide pagination
   ========================================================= */
body#tt-body-index.gw-devblog-home-mode .article-wrapper{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:24px !important;
  align-items:stretch !important;
}
body#tt-body-index.gw-devblog-home-mode .article-wrapper > .post-item{
  height:auto !important;
  min-height:220px !important;
}
body#tt-body-index.gw-devblog-home-mode .article-wrapper > .post-item.gw-home-recent-hidden{
  display:none !important;
}
body#tt-body-index.gw-devblog-home-mode .pagination,
body#tt-body-index.gw-devblog-home-mode .pagination.gw-home-pagination-hidden{
  display:none !important;
}
body#tt-body-index.gw-devblog-home-mode .post-content-inner{
  padding:18px !important;
}
body#tt-body-index.gw-devblog-home-mode .post-title{
  font-size:1.08rem !important;
  line-height:1.45 !important;
}
body#tt-body-index.gw-devblog-home-mode .post-excerpt{
  -webkit-line-clamp:3;
  font-size:0.9rem !important;
}
@media (max-width: 1180px){
  body#tt-body-index.gw-devblog-home-mode .article-wrapper{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px){
  body#tt-body-index.gw-devblog-home-mode .article-wrapper{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   FINAL AUDIT OVERRIDES (2026-03-16)
   - remove extra explanatory text on home
   - stabilize home recent-post layout
   - disable redundant home dashboard
   - protect custom code widgets from typography overrides
   ========================================================= */
#gw-home-dashboard{ display:none !important; }

.list-desc:empty{ display:none !important; }
body.gw-devblog-home-mode .list-desc,
body.gw-devblog-home-mode #gw-category-chips,
body.gw-devblog-home-mode .gw-list-toolbar{
  display:none !important;
}
body.gw-devblog-home-mode .gw-home-hero{
  padding: 24px 28px !important;
  margin-bottom: 20px !important;
}
body.gw-devblog-home-mode .gw-home-kicker,
body.gw-devblog-home-mode .gw-hero-sub{
  display:none !important;
}
body.gw-devblog-home-mode .gw-hero-links:empty{
  display:none !important;
}
body.gw-devblog-home-mode .gw-home-hero .gw-hero-title{
  margin-bottom: 14px !important;
}
body.gw-devblog-home-mode .gw-home-hero .gw-hero-badges{
  margin-bottom: 0 !important;
}
body.gw-devblog-home-mode .content{
  padding-top: 24px !important;
}

body#tt-body-index.gw-devblog-home-mode .article-wrapper{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:24px !important;
  align-items:stretch !important;
}
body#tt-body-index.gw-devblog-home-mode .article-wrapper > .post-item{
  display:flex !important;
  height:auto !important;
  min-height:0 !important;
}
body#tt-body-index.gw-devblog-home-mode .article-wrapper > .post-item.gw-home-recent-hidden,
body#tt-body-index.gw-devblog-home-mode .article-wrapper > .post-item[hidden]{
  display:none !important;
}
body#tt-body-index.gw-devblog-home-mode .post-content-inner{
  height:auto !important;
  padding:18px !important;
}
body#tt-body-index.gw-devblog-home-mode .pagination,
body#tt-body-index.gw-devblog-home-mode .pagination.gw-home-pagination-hidden,
body#tt-body-index.gw-devblog-home-mode .pagination[hidden]{
  display:none !important;
}

body#tt-body-index.gw-devblog-home-mode .list-header-styled{
  margin-bottom: 18px !important;
}
body#tt-body-index.gw-devblog-home-mode .list-title{
  margin-bottom: 8px !important;
}

.gw-board-title{ letter-spacing:-0.02em; }
.gw-board-head p,
.gw-dash-desc{ display:none !important; }

/* extra safety for custom code/compare widgets */
.post-body :where(.hljs, .shiki, .codehilite, .code-toolbar, .gw-richcode, [data-ke-type="codeblock"], [class*="code"], [class*="Code"], [class*="compare"], [class*="Compare"]) :is(p, div, span, li){
  line-height: inherit !important;
  word-break: normal !important;
}
.post-body :where(.hljs, .shiki, .codehilite, .code-toolbar, .gw-richcode, [data-ke-type="codeblock"], [class*="code"], [class*="Code"], [class*="compare"], [class*="Compare"]) {
  font-size: inherit !important;
}

@media (max-width: 1180px){
  body#tt-body-index.gw-devblog-home-mode .article-wrapper{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px){
  body#tt-body-index.gw-devblog-home-mode .article-wrapper{
    grid-template-columns:1fr !important;
  }
  body.gw-devblog-home-mode .gw-home-hero{
    padding:20px 18px !important;
  }
}


/* =========================================================
   Final full-check cleanup (2026-03-16)
   - dev blog home: no portfolio hero / no helper descriptions
   - compact recent posts + category board
   - stronger code widget safety
   ========================================================= */
body#tt-body-index.gw-devblog-home-mode #gw-home-dashboard,
body#tt-body-index.gw-devblog-home-mode #gw-home-portfolio,
body#tt-body-index.gw-devblog-home-mode .gw-home-dashboard,
body#tt-body-index.gw-devblog-home-mode .gw-home-portfolio,
body#tt-body-index.gw-devblog-home-mode .gw-list-toolbar,
body#tt-body-index.gw-devblog-home-mode #gw-category-chips,
body#tt-body-index.gw-devblog-home-mode .list-line,
body#tt-body-index.gw-devblog-home-mode .list-desc,
body#tt-body-index.gw-devblog-home-mode .gw-home-kicker,
body#tt-body-index.gw-devblog-home-mode .gw-home-stats,
body#tt-body-index.gw-devblog-home-mode .gw-featured,
body#tt-body-index.gw-devblog-home-mode .gw-feature-grid,
body#tt-body-index.gw-devblog-home-mode .gw-project-grid,
body#tt-body-index.gw-devblog-home-mode .gw-home-pagination-hidden,
body#tt-body-index.gw-devblog-home-mode .gw-home-recent-hidden,
body#tt-body-index.gw-devblog-home-mode .pagination,
body#tt-body-index.gw-devblog-home-mode .pagination.gw-home-pagination-hidden{
  display:none !important;
}

body#tt-body-index.gw-devblog-home-mode .list-header-styled{
  margin: 0 0 18px !important;
  padding: 0 !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body#tt-body-index.gw-devblog-home-mode .list-title{
  margin: 0 0 2px !important;
  font-size: 1.35rem !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

body#tt-body-index.gw-devblog-home-mode .article-wrapper{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:24px !important;
  align-items:stretch !important;
  margin-bottom:32px !important;
}
body#tt-body-index.gw-devblog-home-mode .article-wrapper > .post-item{
  display:flex !important;
  flex-direction:column !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
  border:1px solid var(--border) !important;
  border-radius:16px !important;
  background:var(--bg-card) !important;
  box-shadow:none !important;
}
body#tt-body-index.gw-devblog-home-mode .article-wrapper > .post-item:hover{
  transform: translateY(-4px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="dark"] body#tt-body-index.gw-devblog-home-mode .article-wrapper > .post-item:hover{
  box-shadow:none !important;
}
body#tt-body-index.gw-devblog-home-mode .post-content-inner{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  padding:18px !important;
}
body#tt-body-index.gw-devblog-home-mode .post-category{
  margin-bottom:8px !important;
  font-size:0.78rem !important;
}
body#tt-body-index.gw-devblog-home-mode .post-title{
  margin:0 0 10px !important;
  font-size:1.04rem !important;
  line-height:1.45 !important;
}
body#tt-body-index.gw-devblog-home-mode .post-excerpt{
  margin:0 0 16px !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
  font-size:0.92rem !important;
  line-height:1.65 !important;
  color:var(--text-sub) !important;
}
body#tt-body-index.gw-devblog-home-mode .post-meta{
  margin-top:auto !important;
  padding-top:14px !important;
  border-top:1px solid var(--line) !important;
  border-bottom:0 !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

body#tt-body-index.gw-devblog-home-mode .gw-home-board{
  display:block !important;
  margin-top:18px !important;
  margin-bottom:40px !important;
}
body#tt-body-index.gw-devblog-home-mode .gw-board-head{
  margin-bottom:16px !important;
  padding:0 !important;
}
body#tt-body-index.gw-devblog-home-mode .gw-board-title{
  margin:0 !important;
  font-size:1.35rem !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  font-family: inherit !important;
}
body#tt-body-index.gw-devblog-home-mode .gw-board-note{
  display:none !important;
}
body#tt-body-index.gw-devblog-home-mode .gw-board-group{
  margin-top:26px !important;
}
body#tt-body-index.gw-devblog-home-mode .gw-board-group-title{
  margin-bottom:14px !important;
}
body#tt-body-index.gw-devblog-home-mode .gw-board-grid{
  gap:18px !important;
}
body#tt-body-index.gw-devblog-home-mode .gw-board-card{
  padding:16px 16px 14px !important;
}

@media (max-width: 1180px){
  body#tt-body-index.gw-devblog-home-mode .article-wrapper{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px){
  body#tt-body-index.gw-devblog-home-mode .article-wrapper{
    grid-template-columns:1fr !important;
  }
}

/* code / compare widgets safety */
.post-body :where(pre, code, kbd, samp, [data-ke-type="codeblock"], [class*="code"], [class*="Code"], [class*="hljs"], [class*="prism"], [class*="syntax"], [class*="diff"], [class*="compare"], [class*="Compare"]),
.post-body :where(pre, code, kbd, samp, [data-ke-type="codeblock"], [class*="code"], [class*="Code"], [class*="hljs"], [class*="prism"], [class*="syntax"], [class*="diff"], [class*="compare"], [class*="Compare"]) *{
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.post-body :where([data-ke-type="codeblock"], [class*="code"], [class*="Code"], [class*="hljs"], [class*="prism"], [class*="syntax"], [class*="diff"], [class*="compare"], [class*="Compare"]) :where(p, div, span, li){
  font-size: inherit !important;
  line-height: inherit !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* 20260316nodesc: 홈 설명문 제거 */
body#tt-body-index.gw-devblog-home-mode .list-desc,
body#tt-body-index.gw-devblog-home-mode .gw-section-desc,
body#tt-body-index.gw-devblog-home-mode .gw-project-desc,
body#tt-body-index.gw-devblog-home-mode .gw-ps-desc,
body#tt-body-index.gw-devblog-home-mode .gw-dash-desc,
body#tt-body-index.gw-devblog-home-mode .gw-board-note{
  display:none !important;
}