/* hub.css — Novista Knowledge Hub 다크모드 스타일
 * tokens.css 변수 재사용 (--nv-bg / --nv-primary / --nv-text 등)
 * 외부 근거: https://natebal.com/best-practices-for-dark-mode/
 *           https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
 */

/* ── 기본 ── */
.nv-hub-body {
  background: var(--nv-bg, #16171c);
  color: var(--nv-text, #fff);
  font-family: var(--nv-font, 'Inter', 'Noto Sans KR', sans-serif);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

/* ── 내비 (브레드크럼) ── */
.nv-hub-nav {
  padding: 0.75rem 1.5rem;
  font-size: 0.85rem;
  color: var(--nv-text-3, #6b6c80);
  border-bottom: 1px solid var(--nv-border, #3a3b48);
}
.nv-hub-nav a {
  color: var(--nv-text-2, #b0b1c3);
  text-decoration: none;
}
.nv-hub-nav a:hover { color: var(--nv-primary, #6c63ff); }

/* ── 언어 전환 바 ── */
.nv-hub-lang-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  background: var(--nv-bg-2, #1e1f26);
  border-bottom: 1px solid var(--nv-border, #3a3b48);
}
.nv-hub-lang {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--nv-text-3, #6b6c80);
  transition: background 0.15s, color 0.15s;
}
.nv-hub-lang:hover,
.nv-hub-lang.active {
  background: var(--nv-surface, #2c2d38);
  color: var(--nv-primary, #6c63ff);
}

/* ── 메인 레이아웃 ── */
.nv-hub-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* ── 페이지 헤더 ── */
.nv-hub-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--nv-text, #fff);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.nv-hub-subtitle {
  color: var(--nv-text-2, #b0b1c3);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}

/* ── 아티클 헤더 ── */
.nv-hub-article-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--nv-border, #3a3b48);
}
.nv-hub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--nv-text-3, #6b6c80);
  margin-bottom: 0.75rem;
}
.nv-hub-category {
  color: var(--nv-primary, #6c63ff);
  font-weight: 600;
}
.nv-hub-views::before { content: '▶ '; }

/* ── 태그 ── */
.nv-hub-tags {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.nv-hub-tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: var(--nv-surface, #2c2d38);
  color: var(--nv-text-2, #b0b1c3);
}

/* ── 본문 — 마크다운 렌더링 ── */
.nv-hub-content {
  max-width: 68ch; /* 45-75자 — 다크모드 최적 줄 길이 */
}
.nv-hub-content h2 {
  font-size: 1.35rem;
  color: var(--nv-text, #fff);
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--nv-border, #3a3b48);
}
.nv-hub-content h3 {
  font-size: 1.1rem;
  color: var(--nv-text, #fff);
  margin: 1.75rem 0 0.5rem;
}
.nv-hub-content p {
  color: var(--nv-text-2, #b0b1c3);
  margin: 0 0 1.1rem;
  line-height: 1.8;
}
.nv-hub-content a {
  color: var(--nv-primary, #6c63ff);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nv-hub-content a:hover { color: var(--nv-primary-h, #8a84ff); }
.nv-hub-content ul,
.nv-hub-content ol {
  padding-left: 1.5rem;
  margin: 0 0 1.1rem;
  color: var(--nv-text-2, #b0b1c3);
}
.nv-hub-content li { margin-bottom: 0.4rem; }
.nv-hub-content code {
  font-family: var(--nv-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.88em;
  background: var(--nv-surface, #2c2d38);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  color: var(--nv-secondary, #00d2c8);
}
.nv-hub-content pre {
  background: var(--nv-bg-3, #25262f);
  border: 1px solid var(--nv-border, #3a3b48);
  border-radius: 8px;
  padding: 1.25rem;
  overflow-x: auto;
  margin: 0 0 1.5rem;
}
.nv-hub-content pre code {
  background: none;
  padding: 0;
}
.nv-hub-content blockquote {
  border-left: 3px solid var(--nv-primary, #6c63ff);
  margin: 0 0 1.1rem;
  padding: 0.75rem 1rem;
  background: var(--nv-bg-2, #1e1f26);
  border-radius: 0 6px 6px 0;
  color: var(--nv-text-2, #b0b1c3);
}
.nv-hub-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
}
.nv-hub-content th {
  background: var(--nv-surface, #2c2d38);
  color: var(--nv-text, #fff);
  padding: 0.6rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--nv-border, #3a3b48);
}
.nv-hub-content td {
  padding: 0.55rem 0.9rem;
  color: var(--nv-text-2, #b0b1c3);
  border-bottom: 1px solid var(--nv-bg-3, #25262f);
}

/* ── 관련 글 ── */
.nv-hub-related {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nv-border, #3a3b48);
}
.nv-hub-related-title {
  font-size: 1rem;
  color: var(--nv-text-2, #b0b1c3);
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.nv-hub-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nv-hub-related-list a {
  color: var(--nv-primary, #6c63ff);
  text-decoration: none;
  font-size: 0.9rem;
}
.nv-hub-related-list a:hover { text-decoration: underline; }

/* ── 카드 리스트 ── */
.nv-hub-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nv-hub-card {
  background: var(--nv-bg-2, #1e1f26);
  border: 1px solid var(--nv-border, #3a3b48);
  border-radius: 10px;
  transition: border-color 0.15s, transform 0.1s;
}
.nv-hub-card:hover {
  border-color: var(--nv-primary, #6c63ff);
  transform: translateY(-1px);
}
.nv-hub-card-link {
  display: block;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
}
.nv-hub-card-cat {
  font-size: 0.75rem;
  color: var(--nv-primary, #6c63ff);
  font-weight: 600;
  display: block;
  margin-bottom: 0.3rem;
}
.nv-hub-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nv-text, #fff);
  margin: 0 0 0.4rem;
  line-height: 1.4;
}
.nv-hub-card-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--nv-text-3, #6b6c80);
}

/* ── 카테고리 내비 필터 ── */
.nv-hub-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.nv-hub-cat-pill {
  font-size: 0.82rem;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  background: var(--nv-surface, #2c2d38);
  color: var(--nv-text-2, #b0b1c3);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nv-hub-cat-pill:hover,
.nv-hub-cat-pill.active {
  background: var(--nv-primary, #6c63ff);
  color: #fff;
}
.nv-hub-cat-count {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* ── 카테고리 허브 헤더 ── */
.nv-hub-category-header { margin-bottom: 1.5rem; }

/* ── 리스트 헤더 ── */
.nv-hub-list-header { margin-bottom: 1rem; }

/* ── 푸터 ── */
.nv-hub-footer {
  text-align: center;
  padding: 2rem 1.5rem;
  font-size: 0.82rem;
  color: var(--nv-text-3, #6b6c80);
  border-top: 1px solid var(--nv-border, #3a3b48);
}
.nv-hub-footer a {
  color: var(--nv-primary, #6c63ff);
  text-decoration: none;
}

/* ── RTL 지원 (ar / ur) ── */
[dir="rtl"] .nv-hub-nav { direction: rtl; }
[dir="rtl"] .nv-hub-content ul,
[dir="rtl"] .nv-hub-content ol { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .nv-hub-content blockquote {
  border-left: none;
  border-right: 3px solid var(--nv-primary, #6c63ff);
  border-radius: 6px 0 0 6px;
}

/* ── 반응형 ── */
@media (max-width: 600px) {
  .nv-hub-main { padding: 1.25rem 1rem 3rem; }
  .nv-hub-lang-bar { padding: 0.4rem 1rem; }
  .nv-hub-title { font-size: 1.35rem; }
}