/**
 * MoneyBull Toss & KakaoPay Style Clean Overrides
 * Version: 2.4 (Merged, Header/TOC Bugfixed & Table/List Modernized)
 * Target: GeneratePress + GenerateBlocks Theme
 * File: assets/css/moneybull-toss-style.css
 */

/* ==========================================================================
   1. GLOBAL VARIABLES & SYSTEM SETUP
   ========================================================================== */
:root {
  /* Typography */
  --mb-font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  
  /* Brand & Accent Colors */
  --mb-primary: #3182f6;
  --mb-primary-hover: #1b64da;
  --mb-primary-light: #e8f3ff;
  --mb-primary-alpha: rgba(49, 130, 246, 0.12);
  --mb-accent-green: #00c73c;
  --mb-accent-red: #f04438;
  
  /* Neutral Colors */
  --mb-text-main: #191f28;
  --mb-text-sub: #4e5968;
  --mb-text-muted: #8b95a1;
  --mb-bg-page: #f2f4f6;
  --mb-bg-card: #ffffff;
  --mb-bg-subtle: #f9fafb;
  --mb-border-subtle: #e5e8eb;
  
  /* Shadows & Radius */
  --mb-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --mb-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --mb-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.09);
  
  --mb-radius-sm: 10px;
  --mb-radius-md: 16px;
  --mb-radius-lg: 24px;
  
  /* Transition */
  --mb-transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. BASE & RESET OVERRIDES
   ========================================================================== */
body {
  background-color: var(--mb-bg-page) !important;
  color: var(--mb-text-main) !important;
  font-family: var(--mb-font-family) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.025em;
  word-break: keep-all;
  line-height: 1.6;
}

/* 본문 영역 상단 여백 조절 */
.site-content {
  padding-top: 20px !important;
}

/* 본문 링크 기본 스타일 */
.entry-content a:not(.wp-block-button__link):not(.read-more):not(.ez-toc-link) {
  color: var(--mb-primary);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: var(--mb-transition);
}

.entry-content a:not(.wp-block-button__link):not(.read-more):not(.ez-toc-link):hover {
  border-bottom-color: var(--mb-primary);
}

/* ==========================================================================
   3. HEADER & CATEGORY NAVIGATION
   ========================================================================== */
.site-header,
.main-navigation {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--mb-border-subtle) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  margin-bottom: 0 !important;
}

/* GeneratePress 헤더 내부 과도한 여백 제거 및 레이아웃 정렬 */
.site-header .inside-header,
.main-navigation .inside-navigation,
#site-navigation > div {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 8px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 네비게이션 & 카테고리 기본 링크 */
.main-navigation .main-nav ul li a,
.category-nav a {
  color: var(--mb-text-sub) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: var(--mb-radius-sm) !important;
  padding: 8px 14px !important;
  line-height: 1.4 !important;
  transition: var(--mb-transition) !important;
  background-color: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 카테고리/메뉴 선택(Active) 및 호버(Hover) 상태 */
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current_page_item > a,
.category-nav a.active,
.category-nav a:hover {
  background-color: var(--mb-primary-light) !important;
  color: var(--mb-primary) !important;
  font-weight: 700 !important;
}

/* 드롭다운 서브메뉴 */
.main-navigation ul ul,
.main-navigation .sub-menu {
  background-color: #ffffff !important;
  border-radius: var(--mb-radius-md) !important;
  border: 1px solid var(--mb-border-subtle) !important;
  box-shadow: var(--mb-shadow-lg) !important;
  padding: 8px !important;
  top: 100% !important;
  z-index: 999 !important;
}

.main-navigation .main-nav ul ul li a {
  color: var(--mb-text-sub) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: var(--mb-radius-sm) !important;
}

.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li.current-menu-item > a {
  background-color: var(--mb-primary-light) !important;
  color: var(--mb-primary) !important;
}

/* ==========================================================================
   4. ARTICLE TITLE & HEADINGS
   ========================================================================== */
/* 아티클 메인 대제목 (H1) */
h1.entry-title,
.entry-header h1 {
  color: var(--mb-text-main) !important;
  font-size: clamp(24px, 3.5vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.03em !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  word-break: keep-all !important;
}

/* 소제목 (H2, H3) */
.entry-content h2,
.inside-article h2 {
  font-size: clamp(20px, 2.5vw, 25px) !important;
  font-weight: 700 !important;
  color: var(--mb-text-main) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.025em !important;
  margin-top: 48px !important;
  margin-bottom: 18px !important;
  padding-left: 14px !important;
  border-left: 4px solid var(--mb-primary) !important;
  word-break: keep-all !important;
}

.entry-content h3,
.inside-article h3 {
  font-size: clamp(17px, 2vw, 20px) !important;
  font-weight: 700 !important;
  color: var(--mb-text-main) !important;
  line-height: 1.4 !important;
  margin-top: 36px !important;
  margin-bottom: 14px !important;
  word-break: keep-all !important;
}

/* ==========================================================================
   5. TABLE OF CONTENTS (Easy TOC 등)
   ========================================================================== */
#ez-toc-container,
.toc_container,
#ftoc-container,
.wp-block-table-of-contents {
  background-color: var(--mb-bg-subtle) !important;
  border: 1px solid var(--mb-border-subtle) !important;
  border-radius: var(--mb-radius-md) !important;
  padding: 20px 24px !important;
  margin: 32px 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 목차 타이틀 */
#ez-toc-container .ez-toc-title-container,
.toc_title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--mb-text-main) !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid var(--mb-border-subtle) !important;
  padding-bottom: 10px !important;
}

/* 목차 내부 리스트 */
#ez-toc-container ul,
.toc_container ul {
  margin: 0 !important;
  padding-left: 20px !important;
  list-style: decimal !important;
}

#ez-toc-container ul li,
.toc_container ul li {
  margin-bottom: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: var(--mb-text-sub) !important;
}

#ez-toc-container a,
.toc_container a {
  color: var(--mb-text-sub) !important;
  text-decoration: none !important;
  transition: var(--mb-transition) !important;
}

#ez-toc-container a:hover,
.toc_container a:hover {
  color: var(--mb-primary) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   6. CONTENT LISTS (UL / OL / LI Modern Styling)
   ========================================================================== */
/* 순서 없는 리스트 (Unordered List) - 블루 닷 스타일 */
.entry-content ul:not(.ez-toc-list):not(.wp-block-gallery) {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 20px 0 !important;
}

.entry-content ul:not(.ez-toc-list):not(.wp-block-gallery) > li {
  position: relative !important;
  padding-left: 22px !important;
  margin-bottom: 10px !important;
  color: var(--mb-text-main) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.entry-content ul:not(.ez-toc-list):not(.wp-block-gallery) > li::before {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 10px !important;
  width: 6px !important;
  height: 6px !important;
  background-color: var(--mb-primary) !important;
  border-radius: 50% !important;
}

/* 순서 있는 리스트 (Ordered List) - 토스/카카오 배지 스타일 */
.entry-content ol:not(.ez-toc-list) {
  list-style: none !important;
  counter-reset: mb-ol-counter !important;
  padding-left: 0 !important;
  margin: 20px 0 !important;
}

.entry-content ol:not(.ez-toc-list) > li {
  counter-increment: mb-ol-counter !important;
  position: relative !important;
  padding-left: 32px !important;
  margin-bottom: 12px !important;
  color: var(--mb-text-main) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.entry-content ol:not(.ez-toc-list) > li::before {
  content: counter(mb-ol-counter) !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  width: 22px !important;
  height: 22px !important;
  background-color: var(--mb-primary-light) !important;
  color: var(--mb-primary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   7. TABLES (Fintech Card & Sleek Modern Table)
   ========================================================================== */
.entry-content table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 28px 0 !important;
  border-radius: var(--mb-radius-sm) !important;
  border: 1px solid var(--mb-border-subtle) !important;
  overflow: hidden !important;
  font-size: 15px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.entry-content th {
  background-color: var(--mb-bg-subtle) !important;
  color: var(--mb-text-main) !important;
  font-weight: 700 !important;
  text-align: left !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--mb-border-subtle) !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
}

.entry-content td {
  padding: 14px 18px !important;
  color: var(--mb-text-sub) !important;
  border-bottom: 1px solid var(--mb-border-subtle) !important;
  background-color: #ffffff !important;
  transition: var(--mb-transition) !important;
  line-height: 1.5 !important;
}

.entry-content tr:last-child td {
  border-bottom: none !important;
}

/* 행 호버 시 은은한 하이라이트 */
.entry-content tr:hover td {
  background-color: var(--mb-primary-light) !important;
}

/* ==========================================================================
   8. COMMENTS SECTION
   ========================================================================== */
#comments,
.comments-area,
#respond {
  background: var(--mb-bg-card) !important;
  border-radius: var(--mb-radius-md) !important;
  border: 1px solid var(--mb-border-subtle) !important;
  padding: 32px !important;
  margin-top: 40px !important;
  box-shadow: var(--mb-shadow-sm) !important;
}

#reply-title,
.comments-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mb-text-main) !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.02em !important;
}

/* 댓글 입력 폼 공통 스타일 */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
  width: 100% !important;
  background-color: var(--mb-bg-subtle) !important;
  border: 1px solid var(--mb-border-subtle) !important;
  border-radius: var(--mb-radius-sm) !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  color: var(--mb-text-main) !important;
  font-family: var(--mb-font-family) !important;
  transition: var(--mb-transition) !important;
  outline: none !important;
  box-sizing: border-box !important;
  margin-bottom: 16px !important;
}

#commentform textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform input[type="url"]:focus,
#commentform textarea:focus {
  background-color: #ffffff !important;
  border-color: var(--mb-primary) !important;
  box-shadow: 0 0 0 3px var(--mb-primary-alpha) !important;
}

/* 댓글 제출 버튼 */
#commentform input[type="submit"],
.form-submit input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--mb-primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 28px !important;
  border-radius: var(--mb-radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--mb-transition) !important;
  box-shadow: 0 4px 12px rgba(49, 130, 246, 0.2) !important;
}

#commentform input[type="submit"]:hover,
.form-submit input[type="submit"]:hover {
  background-color: var(--mb-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(49, 130, 246, 0.3) !important;
}

/* 댓글 리스트 */
.comment-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 0 0 !important;
}

.comment-list li.comment {
  border-bottom: 1px solid var(--mb-border-subtle) !important;
  padding: 20px 0 !important;
  margin: 0 !important;
}

.comment-list li.comment:last-child {
  border-bottom: none !important;
}

.comment-author .fn {
  font-weight: 700 !important;
  color: var(--mb-text-main) !important;
  font-size: 15px !important;
}

.comment-metadata a {
  color: var(--mb-text-muted) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.comment-content {
  margin-top: 8px !important;
  color: var(--mb-text-sub) !important;
  font-size: 15px !important;
}

/* ==========================================================================
   9. CARDS & GRID CONTAINER
   ========================================================================== */
.inside-article,
.gb-loop-item,
.gb-grid-column .gb-container,
.sidebar .widget {
  background: var(--mb-bg-card) !important;
  border-radius: var(--mb-radius-md) !important;
  border: 1px solid var(--mb-border-subtle) !important;
  box-shadow: var(--mb-shadow-sm) !important;
  transition: var(--mb-transition) !important;
  will-change: transform, box-shadow;
}

.inside-article {
  padding: 36px !important;
  margin-bottom: 24px !important;
}

.sidebar .widget {
  padding: 24px !important;
  margin-bottom: 24px !important;
}

.inside-article:hover,
.gb-loop-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--mb-shadow-md) !important;
  border-color: rgba(49, 130, 246, 0.3) !important;
}

/* ==========================================================================
   10. BUTTONS & OTHER ELEMENTS
   ========================================================================== */
a.read-more,
.read-more a,
.wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--mb-primary-light) !important;
  color: var(--mb-primary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 22px !important;
  border-radius: var(--mb-radius-sm) !important;
  text-decoration: none !important;
  transition: var(--mb-transition) !important;
  border: none !important;
}

a.read-more:hover,
.read-more a:hover,
.wp-block-button__link:hover {
  background-color: var(--mb-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(49, 130, 246, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* 인용구 */
blockquote,
.wp-block-quote {
  background-color: var(--mb-primary-light) !important;
  border: none !important;
  border-left: 4px solid var(--mb-primary) !important;
  border-radius: 0 var(--mb-radius-sm) var(--mb-radius-sm) 0 !important;
  padding: 20px 24px !important;
  margin: 32px 0 !important;
  color: var(--mb-text-main) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

blockquote p,
.wp-block-quote p {
  margin: 0 !important;
}

/* 본문 이미지 */
.entry-content figure.wp-block-image img,
.inside-article figure.wp-block-image img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--mb-radius-md) !important;
  box-shadow: var(--mb-shadow-md) !important;
  border: 1px solid var(--mb-border-subtle) !important;
}

/* ==========================================================================
   11. MOBILE RESPONSIVE OPTIMIZATION
   ========================================================================== */
@media (max-width: 768px) {
  .site-header .inside-header,
  .main-navigation .inside-navigation,
  #site-navigation > div {
    padding: 6px 16px !important;
  }

  .inside-article {
    padding: 24px 18px !important;
    border-radius: var(--mb-radius-sm) !important;
  }

  #comments,
  .comments-area,
  #respond {
    padding: 20px 16px !important;
    border-radius: var(--mb-radius-sm) !important;
  }

  #ez-toc-container,
  .toc_container {
    padding: 16px 18px !important;
    border-radius: var(--mb-radius-sm) !important;
  }

  .entry-content th,
  .entry-content td {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
}