/* =============================================
   dojung511 블로그 — 커스텀 스킨
   클린 화이트 + 사이드바 레이아웃
============================================= */

/* ── 리셋 & 기본 ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #f8fafc;
  color: #1e293b;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ── 전체 래퍼 ── */
#wrap { max-width: 1100px; margin: 0 auto; }

/* ── 헤더 ── */
.header {
  background: #1e293b;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 24px;
}
.blog-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
  white-space: nowrap;
}
.blog-title a { color: #fff; }
/* 헤더 네비게이션 — 카테고리 트리가 중복 렌더되어 우측 상단에 삐져나오므로 숨김
   (카테고리는 사이드바에 이미 존재) */
.header-nav {
  display: none !important;
}
.header-nav a {
  font-size: 13px;
  color: #94a3b8;
  transition: color .15s;
}
.header-nav a:hover,
.header-nav a.active { color: #93c5fd; }

/* ── 본문 레이아웃 ── */
.layout-wrap {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 52px - 48px);
}

/* ── 사이드바 ── */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e2e8f0;
  padding: 20px 16px;
  position: sticky;
  top: 52px;
  height: calc(100vh - 52px);
  overflow-y: auto;
}

/* 사이드바 — 블로그 소개 */
.sidebar-profile {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
}
.sidebar-avatar {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.sidebar-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}
.sidebar-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}

/* 사이드바 — 섹션 라벨 */
.sidebar-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 8px;
  margin-top: 16px;
}

/* ===========================================================
   사이드바 — 카테고리 (티스토리 #treeComponent 트리 위젯)
   구조: #treeComponent > #category_{id} table
         └ td.ib  (트리 라인/들여쓰기 아이콘 — T자·폴더 모양)
         └ td.branch3[onclick]  (카테고리명 + .c_cnt + new 아이콘)
=========================================================== */
.sidebar-category { margin-bottom: 16px; }

/* 트리 컨테이너 — 테이블 기본 여백 제거 */
#treeComponent,
#treeComponent table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
#treeComponent td { vertical-align: middle; }

/* 트리 라인/들여쓰기 아이콘 제거 (T자·폴더·세로선 모양) */
#treeComponent td.ib { display: none !important; }
#treeComponent td.ib img { display: none !important; }

/* 카테고리명 옆 'new(N)' 아이콘 제거 */
#treeComponent img[src*="new_ico"],
#treeComponent .branch3 img { display: none !important; }

/* 클릭 영역 (td.branch3) — 커서 + 패딩 + 호버 */
#treeComponent td.branch3 {
  cursor: pointer;                       /* ← 손가락 커서 */
  display: block;
  padding: 8px 10px !important;
  border-radius: 7px;
  transition: background .15s;
}
#treeComponent td.branch3:hover {
  background: #f1f5f9;
}
#treeComponent td.branch3:hover div {
  color: #2563eb !important;
}
#treeComponent td.branch3:active {
  background: #dbeafe;
}

/* 카테고리 텍스트 */
#treeComponent [id^="text_"] {
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.3;
  font-weight: 500;
}

/* 글 개수 카운트 */
#treeComponent .c_cnt {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 400;
}

/* 분류 전체보기 (#category_0) — 헤더처럼 구분 */
#category_0 td.branch3 {
  border-radius: 0;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 4px;
  padding-bottom: 10px !important;
}
#category_0 [id^="text_"] {
  font-weight: 700 !important;
  color: #334155 !important;
}
#category_0 td.branch3:hover {
  background: transparent;
}

/* 사이드바 — 인기글 */
.sidebar-popular { margin-bottom: 16px; }
.popular-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.popular-list li { display: flex; gap: 8px; align-items: flex-start; }
.popular-rank {
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 5px;
  flex-shrink: 0;
  min-width: 18px;
  text-align: center;
}
.popular-list li:nth-child(n+4) .popular-rank { background: #e2e8f0; color: #64748b; }
.popular-title {
  font-size: 11px;
  color: #334155;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 메인 콘텐츠 ── */
.main-content {
  flex: 1;
  padding: 20px 24px;
  min-width: 0;
}

/* 섹션 헤더 */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #2563eb;
}
.section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.section-count { font-size: 12px; color: #94a3b8; }

/* 글 카드 */
.article-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.article-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  gap: 14px;
  transition: box-shadow .2s, border-color .2s;
}
.article-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  border-color: #bfdbfe;
}
.article-item:hover .article-title { color: #2563eb; }

/* 썸네일 */
.article-thumb {
  width: 88px;
  height: 66px;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-running { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.thumb-outdoor { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
.thumb-homecafe { background: linear-gradient(135deg, #ffedd5, #fed7aa); }
.thumb-default  { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }

/* 글 메타 */
.article-meta { flex: 1; min-width: 0; }
.article-tags { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.article-tag {
  background: #eff6ff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}
.article-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 5px;
  line-height: 1.4;
  transition: color .15s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-summary {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-date { font-size: 11px; color: #94a3b8; }

/* 빈 상태 */
.no-articles {
  text-align: center;
  padding: 32px;
  color: #94a3b8;
  font-size: 13px;
  background: #fff;
  border: 1px dashed #e2e8f0;
  border-radius: 10px;
}

/* 페이지네이션 */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  color: #475569;
  background: #fff;
  transition: all .15s;
}
.pagination a:hover { background: #eff6ff; border-color: #2563eb; color: #2563eb; }
.pagination .on, .pagination .active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ── 푸터 ── */
.footer {
  background: #1e293b;
  padding: 14px 24px;
  text-align: center;
}
.footer p { margin: 0; font-size: 11px; color: #64748b; }

/* ── 포스트 본문 테이블 반응형 ── */
.contents_style table,
.entry-content table,
#tt-body-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.contents_style table th,
.contents_style table td,
.entry-content table th,
.entry-content table td {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  word-break: keep-all;
}
.contents_style table th,
.entry-content table th {
  background: #f1f5f9;
  font-weight: 700;
}
/* 테이블 overflow 래퍼 (JS 미지원 환경 백업) */
.contents_style table,
.entry-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* 이미지 반응형 강제 */
.contents_style img,
.entry-content img {
  max-width: 100%;
  height: auto;
}

/* ── 모바일 대응 ── */
@media (max-width: 768px) {
  .layout-wrap { flex-direction: column; }
  .sidebar {
    width: 100%;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px;
  }
  .sidebar-profile { text-align: left; display: flex; gap: 12px; align-items: center; }
  .sidebar-avatar { margin: 0; flex-shrink: 0; }
  .main-content { padding: 16px; }
  .article-thumb { width: 72px; height: 54px; }
  .header-nav { display: none; }
}