/* =========================
   1. 기본 테마 변수 (라이트 모드)
   ========================= */
:root {
  --bg: #f4f5f7;
  --bg-elevated: #ffffff;
  --bg-elevated-soft: rgba(255, 255, 255, 0.7);
  --text-main: #111827;
  --text-sub: #6b7280;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.07);
  --border-soft: rgba(148, 163, 184, 0.4);
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.12);
  --transition-fast: 180ms ease-out;
  --transition-normal: 220ms ease;
  --max-width: 1120px;
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans KR", sans-serif;
}

/* =========================
   2. 다크 모드 (시스템 설정 연동)
   ========================= */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #020617;
    --bg-elevated: #020617;
    --bg-elevated-soft: rgba(15, 23, 42, 0.88);
    --text-main: #e5e7eb;
    --text-sub: #9ca3af;
    --accent: #60a5fa;
    --accent-soft: rgba(37, 99, 235, 0.17);
    --border-soft: rgba(51, 65, 85, 0.9);
    --shadow-soft: 0 22px 60px rgba(0, 0, 0, 0.8);
  }
}

/* =========================
   3. 전체 레이아웃 & 기본 폰트
   ========================= */
html,
body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at top left, #e5e7eb 0, #f4f5f7 40%, #e5e7eb 100%);
  background-color: var(--bg);
  color: var(--text-main);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
}

body {
  line-height: 1.7;
  font-size: 15px;
}

/* 전체 컨테이너(스킨에 있는 wrap류 요소에 맞춰 하나 골라 쓰세요) */
#wrap,
#container,
#content,
#main,
#body {
  max-width: var(--max-width);
  margin: 40px auto 60px;
  padding: 0 18px;
}

/* 링크 스타일 */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast),
    box-shadow var(--transition-fast), transform var(--transition-fast);
}

a:hover {
  color: #1d4ed8;
}

/* =========================
   4. 상단 블로그 제목 / 헤더
   ========================= */
header,
#header,
.blog-header {
  margin-bottom: 28px;
  padding: 20px 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.09),
      rgba(37, 99, 235, 0.02)
    ),
    var(--bg-elevated-soft);
  border: 1px solid var(--border-soft);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(18px);
}

/* 블로그 제목 */
header h1,
#header h1,
.blog-header h1,
.site-title {
  margin: 0 0 6px;
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* 부제/설명 */
header p,
#header p,
.blog-description {
  margin: 0;
  font-size: 14px;
  color: var(--text-sub);
}

/* 상단 메뉴 (카테고리/네비게이션) */
.nav,
.gnb,
.category_list,
#gnb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.nav a,
.gnb a,
.category_list a,
#gnb a {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-sub);
  background-color: rgba(148, 163, 184, 0.09);
}

.nav a:hover,
.gnb a:hover,
.category_list a:hover,
#gnb a:hover {
  color: var(--accent);
  background-color: var(--accent-soft);
}

/* =========================
   5. 글 목록 – 카드형 리스트
   ========================= */
/* 실제 스킨의 글 목록 컨테이너에 맞춰 하나 선택해서 쓰세요 */
.post-list,
.article-list,
#content .list,
#content .entry-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

/* 개별 글 카드 (클래스는 실제 스킨 구조에 맞게 수정 가능) */
.post-item,
.post-card,
.article-list > li,
.entry-item {
  list-style: none;
  padding: 18px 18px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  position: relative;
  overflow: hidden;
  transform: translateY(0);
}

.post-item:hover,
.post-card:hover,
.article-list > li:hover,
.entry-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(37, 99, 235, 0.35);
}

/* 카드형 썸네일 (있을 경우) */
.post-thumb,
.thumbnail,
.entry-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #e5e7eb;
}

.post-thumb img,
.thumbnail img,
.entry-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 제목 */
.post-item .title,
.post-card .title,
.article-list .title,
.entry-item .title,
.post-item h2,
.post-card h2,
.entry-item h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

/* 요약/내용 일부 */
.post-item .excerpt,
.post-card .excerpt,
.article-list .summary,
.entry-item .summary {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-sub);
}

/* 메타정보 (날짜, 카테고리 등) */
.post-meta,
.article-meta,
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-sub);
  align-items: center;
}

/* 카드 오른쪽 아래 작은 포인트 */
.post-item::after,
.post-card::after,
.entry-item::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.post-item:hover::after,
.post-card:hover::after,
.entry-item:hover::after {
  opacity: 1;
}

/* =========================
   6. 페이징
   ========================= */
.pagination,
.paging,
#paging {
  margin: 26px 0 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
}

.pagination a,
.paging a,
#paging a,
.pagination span,
.paging span,
#paging span {
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  color: var(--text-sub);
}

.pagination a:hover,
.paging a:hover,
#paging a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background-color: var(--accent-soft);
}

/* 현재 페이지 */
.pagination .selected,
.paging .selected,
#paging .selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

/* =========================
   7. 글 본문 페이지
   ========================= */
.post,
.article,
.entry-content,
.tt_article_useless_p_margin {
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  padding: 26px 24px 32px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  margin-top: 24px;
}

/* 본문 제목 */
.post h1,
.post h2.title,
.article h1,
.entry-content h1 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: clamp(24px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* 본문 메타 */
.post-header .meta,
.article .meta,
.entry-content .meta {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 16px;
}

/* 본문 내부 텍스트 */
.entry-content p,
.article p,
.tt_article_useless_p_margin p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.8;
}

/* 본문 이미지 */
.entry-content img,
.article img {
  max-width: 100%;
  border-radius: 12px;
  margin: 12px 0;
}

/* 본문 인용구 */
.entry-content blockquote,
.article blockquote {
  margin: 16px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
  color: var(--text-main);
}

/* =========================
   8. 반응형 조정
   ========================= */
@media (max-width: 720px) {
  #wrap,
  #container,
  #content,
  #main,
  #body {
    margin-top: 20px;
    margin-bottom: 40px;
    padding: 0 14px;
  }

  header,
  #header,
  .blog-header {
    padding: 16px 18px;
  }

  .post,
  .article,
  .entry-content,
  .tt_article_useless_p_margin {
    padding: 18px 16px 22px;
  }

  .post-item,
  .post-card,
  .article-list > li,
  .entry-item {
    padding: 14px 14px 12px;
  }
}