:root {
  --sidebar-width: 300px;
  --max-content-width: 850px;
  --font-main: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  
  --color-bg: #ffffff;
  --color-sidebar-bg: #f9fafb;
  --color-sidebar-border: #eef2f6;
  --color-text-main: #111827;
  --color-text-muted: #6b7280;
  --color-accent: #4f46e5;
  --color-accent-hover: #4338ca;
  --color-border: #f3f4f6;
  --color-hover: #f3f4f6;
}

/* 다크모드 전용 변수 (컬러 팔레트) */
body.dark-mode {
  --color-bg: #0f172a; /* Slate 900 */
  --color-sidebar-bg: #0b0f1a;
  --color-sidebar-border: #1e293b;
  --color-text-main: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-accent: #6366f1; /* 좀 더 밝은 Indigo */
  --color-accent-hover: #818cf8;
  --color-border: #1e293b;
  --color-hover: #1e293b;
  --color-loading: #6366f1;
}

/* 시스템 다크모드 대응 미리 준비 (추후 확장을 위해) */
@media (prefers-color-scheme: dark) {
  /* 사용자가 명시적으로 라이트 모드를 선호하지 않는 경우 기본 다크모드 적용도 가능 (선택 사항) */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.6;
  display: flex;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-sidebar-border);
  z-index: 200;
  overflow-y: auto;
}

/* --- Tistory Legacy Table Tree Custom Styling (Hard Flattening) --- */
.category-area {
  padding: 0 0.75rem !important;
}

.category-area,
.category-area * {
  box-sizing: border-box !important;
}

/* 모든 테이블 요소를 블록화하여 평면적인 구조로 변경 (중첩 테이블 여백 제거) */
.category-area table,
.category-area tbody,
.category-area tr,
.category-area td {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important; /* 티스토리 시스템의 하얀 박스 제거 */
}

/* 불필요한 인덱스 세로 칸(td.ib) 및 이미지 강제 제거 */
.category-area td.ib,
.category-area .ib,
.category-area img {
  display: none !important;
}

/* 계층 구조(Children Div) 들여쓰기 및 수직선 */
.category-area div[id$="_children"] {
  padding-left: 0.6rem !important;
  margin-left: 0.35rem !important;
  border-left: 1px solid var(--color-border) !important;
}

/* 카테고리 텍스트 아이템 스타일 */
.category-area .branch3,
.category-area div[id^="text_"] {
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  position: relative;
  min-height: 2.2rem; /* 터치 영역 확보 */
  border-radius: 6px !important;
  font-size: 0.875rem !important;
  color: var(--color-text-muted) !important;
  transition: all 0.2s !important;
  cursor: pointer;
  width: 100% !important;
  background-color: transparent !important; /* 기본 배경 제거 */
}

/* 카테고리 글 개수 (숫자) 스타일 */
.category-area .c_cnt {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-left: 0.35rem; /* 숫자 앞에 공백 추가 */
}

/* 실제 텍스트가 들어있는 div에만 여백 부여 */
.category-area div[id^="text_"] {
  padding-left: 0.4rem !important;
}

/* 하위 메뉴가 있는(Folder) 요소만 화살표를 위한 왼쪽 여백 확보 */
.category-area table:has(+ div[id$="_children"]) div[id^="text_"] {
  padding-left: 1.1rem !important;
}

.category-area table:has(+ div[id$="_children"]) div[id^="text_"]::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 50%;
  width: 0.35rem;
  height: 0.35rem;
  border-right: 2px solid #9ca3af;
  border-bottom: 2px solid #9ca3af;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.2s;
}

/* 하위 메뉴가 열린 상태일 때 화살표 회전 */
.category-area table:has(+ div[id$="_children"][style*="display: block"]) div[id^="text_"]::before,
.category-area table:has(+ div[id$="_children"][style*="display:block"]) div[id^="text_"]::before {
  transform: translateY(-70%) rotate(45deg);
}

/* 하위 메뉴가 열린 상태일 때 화살표 회전 */
.category-area table:has(+ div[id$="_children"][style*="display: block"]) div[id^="text_"]::before,
.category-area table:has(+ div[id$="_children"][style*="display:block"]) div[id^="text_"]::before {
  transform: translateY(-70%) rotate(45deg);
}

.category-area div[id^="text_"]:hover {
  background-color: var(--color-hover) !important;
  color: var(--color-text-main) !important;
}

/* 활성 카테고리 (강조 스타일) */
.category-area div[style*="#4f46e5"],
.category-area div[style*="rgb(79, 70, 229)"],
.category-area .link_sub_on,
.category-area .selected {
  color: var(--color-accent) !important;
  font-weight: 600 !important;
  background-color: var(--color-hover) !important; /* 기본 강조 배경 */
}

/* 다크모드에서 활성 카테고리 배경색 미세 조정 */
body.dark-mode .category-area .selected,
body.dark-mode .category-area .link_sub_on {
  background-color: rgba(99, 102, 241, 0.15) !important;
  color: #a5b4fc !important; /* 연한 보라색 텍스트 */
}

.sidebar-inner {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar-header {
  margin-bottom: 1.5rem;
}

/* --- Search Box --- */
.sidebar-search {
  margin-bottom: 2.5rem;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: var(--color-bg); /* 배경색 변수 사용 */
  border: 1px solid var(--color-sidebar-border);
  border-radius: 8px;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.search-box input {
  width: 100%;
  border: none;
  background: none;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--color-text-main);
  outline: none;
}

.search-box button {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}

.search-box button:hover {
  color: var(--color-accent);
}

.category-toggle svg {
  stroke: #9ca3af;
  transition: transform 0.2s, stroke 0.2s;
  fill: none;
}

.category-area li.expanded > .category-toggle svg {
  transform: rotate(90deg);
  stroke: var(--color-accent);
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.logo-icon {
  background-color: var(--color-accent);
  color: white;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 800;
  font-size: 14px;
}

.logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ==========================================
   Category Tree Custom Styling
   ========================================== */

/* 1. Tistory 기본 인라인 디자인 요소 제거 및 초기화 */
.category-area img { display: none !important; }
.category-area ul, .category-area li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* 2. 트리 라인(Tree Line) 정의: 하위 메뉴가 있을 때만 수직선 표시 */
.category-area ul ul {
  border-left: 1px solid #e5e7eb; /* 층위 구분을 위한 수직선 */
  margin-left: 0.9rem !important; /* 수직선 위치 */
  padding-left: 0.5rem !important; /* 수직선과 텍스트 사이 여백 */
  display: none; /* 기본 접힘 */
}

/* 펼쳐진 상태 표시 */
.category-area li.expanded > ul {
  display: block;
}

/* 3. 항목 스타일 */
.category-area li {
  position: relative;
  margin: 1px 0;
}

.category-area a {
  display: flex !important;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  transition: all 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.category-area a:hover {
  background-color: var(--color-hover);
  color: var(--color-text-main);
}

/* 활성 카테고리 스타일 */
.category-area .selected, 
.category-area .link_sub_on, 
.category-area .link_menu_on {
  color: var(--color-accent) !important;
  font-weight: 600 !important;
  background-color: #f5f3ff !important;
}

.category-area .sub_category_list a {
  font-size: 0.825rem;
  padding: 0.35rem 0.65rem;
}

/* 최상위 '분류 전체보기' 항목 - 약간 회색으로 */
.category-area > ul > li:first-child > a,
.category-area .category_list > li:first-child > a {
  font-size: 0.8rem;
  color: #9ca3af;
  font-weight: 500;
}

/* --- Theme Toggle Button (Sidebar Footer) --- */
.theme-toggle-container {
  margin-bottom: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-sidebar-border);
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--color-hover);
  border: 1px solid var(--color-sidebar-border);
  border-radius: 50%; /* 원형 버튼 */
  color: var(--color-text-main);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-btn:hover {
  border-color: var(--color-accent);
  background-color: var(--color-bg);
  transform: rotate(15deg); /* 살짝 회전 애니메이션 */
}

.theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 해/달 아이콘 애니메이션 */
.theme-icon .sun { display: block; }
.theme-icon .moon { display: none; }

body.dark-mode .theme-icon .sun { display: none; }
body.dark-mode .theme-icon .moon { display: block; }

body.dark-mode .theme-toggle-btn {
  background-color: #1e293b;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
}

.copyright {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  opacity: 0.8;
}

/* --- Main Content --- */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 4rem 2rem;
}

.content-inner {
  width: 100%;
  max-width: var(--max-content-width);
}

.content-header {
  margin-bottom: 3rem;
}

.title-article {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0.5rem 0 1rem;
}

/* .category-badge: 카테고리 pill 스타일 (글 목록 + 글 본문 헤더 공통) */
.category-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  background-color: var(--color-hover); /* 변수 사용으로 다크모드 대응 */
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
  border: 1px solid var(--color-border);
}

.meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.meta span {
  display: flex;
  align-items: center;
}

.admin-links {
  display: flex;
  gap: 0.75rem;
  margin-left: auto;
}

.admin-links a {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  background-color: var(--color-hover);
  border-radius: 4px;
}

/* --- Article Body --- */
.article-body {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--color-text-main);
}

.article-body h2 { margin: 4.5rem 0 1.5rem; font-size: 1.6rem; font-weight: 700; border-bottom: 2px solid var(--color-border); padding-bottom: 0.75rem; color: var(--color-text-main); }
.article-body h3 { margin: 3.5rem 0 1.25rem; font-size: 1.35rem; font-weight: 700; color: var(--color-text-main); }
.article-body p { margin-bottom: 2.25rem; } /* 문단 사이 여백 대폭 확장 */
.article-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 3rem 0; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }

/* 리스트 스타일 최적화 */
.article-body ul, 
.article-body ol { 
  margin: 2.25rem 0; 
  padding-left: 1.5rem; 
}

.article-body li { 
  margin-bottom: 1.25rem; /* 항목 간 간격 시원하게 확보 */
  padding-left: 0.25rem;
}

.article-body li::marker {
  color: var(--color-accent); /* 불렛 포인트 강조색 */
  font-weight: 700;
}

/* 본문 내 링크(a 태그) 스타일 강화 */
.article-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(79, 70, 229, 0.3); /* 연한 보라색 밑줄 */
  font-weight: 500;
  transition: all 0.2s ease;
}

.article-body a:hover {
  color: var(--color-accent-hover);
  text-decoration-color: var(--color-accent-hover);
  text-decoration-thickness: 2px;
}

/* 다크모드에서 링크 밑줄 색상 조정 */
body.dark-mode .article-body a {
  text-decoration-color: rgba(165, 180, 252, 0.4);
}

/* 티스토리 테이블 기본 스타일 보정 */
.tt_article_useless_p_margin table {
  border-collapse: collapse;
  width: 100% !important;
  margin: 2rem 0;
}

.tt_article_useless_p_margin table td,
.tt_article_useless_p_margin table th {
  padding: 12px 18px; /* 요청하신 10px 16px보다 조금 더 시원하게 12px 18px로 조정 (원하시면 수정 가능) */
  border: 1px solid var(--color-border);
}

.tt_article_useless_p_margin table th {
  background-color: var(--color-sidebar-bg);
  font-weight: 700;
  text-align: left;
}

.article-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

/* --- Hide Tistory System Bottom Widgets (Author Box, Related Posts, etc) --- */
.author-meta, 
.author-box, 
.profile-box, 
.another_category, 
.tt-related-posts {
  display: none !important;
}

/* --- Code Blocks --- */
.article-body pre {
  background-color: #1e293b;
  color: #f8fafc;
  padding: 1.5rem;
  border-radius: 10px;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-family: 'Fira Code', 'Cascadia Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 0.95rem;
  line-height: 1.6;
}

.article-body code {
  background-color: #f1f5f9;
  color: #e11d48;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9em;
}

.article-body pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}


/* --- Post List UX --- */
.list-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-text-main);
}

.title-list {
  font-size: 1.4rem;
  font-weight: 700;
}

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

.post-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.post-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
  transition: all 0.2s ease;
  position: relative; /* 전체 영역 클릭 처리를 위해 필요 */
}

.post-item:hover {
  background-color: var(--color-hover);
  margin: 0 -1rem;
  padding: 1.5rem 1rem;
  border-radius: 12px;
  border-bottom: 1px solid transparent;
}

/* 제목 링크를 전체 카드로 확장 (Phantom Link) */
.post-info .title a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* 카테고리 배지 등 개별 클릭 요소는 위로 올림 */
.post-info .category-badge,
.post-item .thumbnail {
  position: relative;
  z-index: 5;
}

.post-item .thumbnail {
  width: 140px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-hover);
}

.post-item .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-item .thumbnail.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-hover);
  opacity: 0.6;
}

.post-info {
  flex: 1;
  min-width: 0;
}

.post-info .category-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  background-color: #ede9fe;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

.post-info .title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  line-height: 1.4;
}

.post-info .title a {
  color: var(--color-text-main);
}

.post-info .title a:hover {
  color: var(--color-accent);
}

.post-info .summary {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.post-info .post-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: #9ca3af;
}



/* --- Pagination --- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: all 0.2s;
}

.pagination a.num:hover {
  background-color: var(--color-hover);
  color: var(--color-text-main);
}

.pagination a.num.selected,
.pagination a.num:active {
  background-color: var(--color-accent);
  color: white;
  font-weight: 600;
}

.pagination a.prev,
.pagination a.next {
  font-weight: 500;
}

.pagination a.prev.no-more,
.pagination a.next.no-more {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* --- Guestbook & Comments --- */
.comment-area, .guestbook-area {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-border);
}

.comment-area h3, .guestbook-area h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  :root { --sidebar-width: 260px; }
  .main-content { padding: 3rem 1.5rem; }
}

@media (max-width: 768px) {
  body { flex-direction: column; }
  
  .sidebar { 
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 10px 0 30px rgba(0,0,0,0.05);
    z-index: 300; /* 모바일에서 최상단 */
  }
  
  .sidebar.open { transform: translateX(0); }
  
  .main-content { margin-left: 0; padding-top: 6rem; }
  
  .hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 400; /* 사이드바보다 더 위에 있도록 */
    width: 40px;
    height: 40px;
    background: var(--color-bg); /* 다크모드 변수 적용 */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    padding: 10px;
  }
  
  .hamburger-btn .bar {
    width: 20px;
    height: 2px;
    background-color: var(--color-text-main);
    transition: 0.3s;
  }
  
  /* Hamburger to X: 다시 원복된 순서(button-sidebar)에 따라 수정 가능하나, 
     현재 skin.html 원복 상태 (button먼저) 면 .hamburger-btn.open 과 같은 형태가 나음.
     하지만 JS에서 sidebar.classList.toggle('open')만 하므로
     CSS에서 .sidebar.open 보다 먼저 선언된 버튼을 찾으려면 인접 형제를 고려해야 합니다.
  */
  .sidebar.open ~ .hamburger-btn .bar:nth-child(1),
  .hamburger-btn.open .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .sidebar.open ~ .hamburger-btn .bar:nth-child(2),
  .hamburger-btn.open .bar:nth-child(2) { opacity: 0; }
  .sidebar.open ~ .hamburger-btn .bar:nth-child(3),
  .hamburger-btn.open .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    z-index: 250;
  }
  
  .sidebar-overlay.active { display: block; }
  
  .post-item { flex-direction: column; gap: 1rem; }
  .post-item .thumbnail { width: 100%; height: 180px; }
  .post-info .summary { font-size: 0.95rem; line-height: 1.5; }
  
  .title-article { font-size: 1.75rem; margin-top: 0; }
  .title-list { font-size: 1.25rem; }

  /* 모바일 본문 디테일 조정 */
  .article-body { font-size: 1.05rem; line-height: 1.7; }
  .article-body h2 { margin-top: 2rem; font-size: 1.4rem; }
  .article-body h3 { margin-top: 1.5rem; font-size: 1.2rem; }
  .article-body img { margin: 1.5rem 0; }

  /* 모바일 버튼 크기 밸런스 */
  .article-btn-primary,
  .article-btn-outline {
    padding: 0.6rem 1.4rem;
    font-size: 0.9rem;
    margin: 0.75rem 0;
  }
}

@media (min-width: 769px) {
  .hamburger-btn, .sidebar-overlay { display: none !important; }
}

/* --- Custom Components (Article Buttons) --- */
.article-btn-primary,
.article-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 1.5rem 0;
  cursor: pointer;
  border: 1.5px solid transparent;
  box-sizing: border-box;
  position: relative; /* 효과를 위한 기준점 */
  overflow: hidden;    /* 흐르는 효과가 밖으로 나가지 않게 */
}

/* 흐르는 빛 효과 (Shimmer) 공통 */
.article-btn-primary::before,
.article-btn-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.2), 
    transparent
  );
  transform: skewX(-25deg);
  animation: shimmer-flow 3s infinite linear;
}

@keyframes shimmer-flow {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* 1. 프라이머리 버튼 (꽉 찬 스타일) */
.article-btn-primary {
  background-color: var(--color-accent);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.article-btn-primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}

/* 2. 아웃라인 버튼 (선 스타일) */
.article-btn-outline {
  background-color: transparent;
  color: var(--color-accent) !important;
  border: 1.5px solid var(--color-accent);
}

.article-btn-outline::before {
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(79, 70, 229, 0.1), 
    transparent
  ); /* 아웃라인용은 더 투명하게 */
}

.article-btn-outline:hover {
  background-color: var(--color-accent);
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.2);
}

.article-btn-outline:hover::before {
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.2), 
    transparent
  );
}

/* 다크 모드시 버튼 미세 조정 */
body.dark-mode .article-btn-primary {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .article-btn-outline {
  background-color: rgba(99, 102, 241, 0.05);
}

body.dark-mode .article-btn-primary::before {
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.15), 
    transparent
  );
}