/* ============================================================
   components.css — 공통 컴포넌트 (BEM)
   네이밍: [앱접두사]-[블록]__[요소]--[상태]
   ⚠️ tokens.css → base.css 이후 로드
   ============================================================ */

/* ══════════════════════════════════════════
   버튼
══════════════════════════════════════════ */
.nv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--nv-sp-2);
  padding: var(--nv-sp-2) var(--nv-sp-4);
  border-radius: var(--nv-r-md);
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-fw-medium);
  line-height: 1;
  transition: background var(--nv-tr-fast), opacity var(--nv-tr-fast), transform var(--nv-tr-fast);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  user-select: none;
}
.nv-btn:active:not(:disabled) { transform: scale(0.97); }
.nv-btn:disabled               { opacity: 0.4; cursor: not-allowed; }

/* 크기 */
.nv-btn--sm   { padding: var(--nv-sp-1) var(--nv-sp-3); font-size: var(--nv-text-xs); }
.nv-btn--lg   { padding: var(--nv-sp-3) var(--nv-sp-6); font-size: var(--nv-text-base); }
.nv-btn--full { width: 100%; }

/* 변형 */
.nv-btn--primary   { background: var(--nv-primary); color: #fff; }
.nv-btn--primary:hover:not(:disabled) { background: var(--nv-primary-h); }

.nv-btn--secondary { background: var(--nv-surface); color: var(--nv-text); border: 1px solid var(--nv-border); }
.nv-btn--secondary:hover:not(:disabled) { background: var(--nv-bg-3); }

.nv-btn--ghost     { background: transparent; color: var(--nv-text-2); }
.nv-btn--ghost:hover:not(:disabled) { background: var(--nv-surface); color: var(--nv-text); }

/* ══════════════════════════════════════════
   테마 토글 (floating, WCAG 2.5.5 44 × 44 px)
   외부 표준:
   - WCAG 2.5.5 Target Size — 44 × 44 px minimum
   - aria-pressed 토글 상태 영역
   - currentColor SVG·icon 영역
══════════════════════════════════════════ */
.nv-theme-toggle {
  position: fixed;
  top: var(--nv-sp-4);
  right: var(--nv-sp-4);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nv-surface);
  color: var(--nv-text);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r-full);
  cursor: pointer;
  z-index: var(--z-nav);
  box-shadow: var(--nv-shadow-sm);
  transition: background var(--nv-tr-fast), transform var(--nv-tr-fast);
  font-size: var(--nv-text-lg);
  line-height: 1;
}
.nv-theme-toggle:hover {
  background: var(--nv-bg-3);
  transform: scale(1.05);
}
.nv-theme-toggle:focus-visible {
  outline: 2px solid var(--nv-primary);
  outline-offset: 2px;
}
.nv-theme-toggle:active {
  transform: scale(0.95);
}
@media (max-width: 600px) {
  .nv-theme-toggle {
    top: auto;
    bottom: calc(var(--nv-bottom-h) + var(--nv-sp-3));
    right: var(--nv-sp-3);
  }
}

.nv-btn--danger    { background: var(--nv-error); color: #fff; }
.nv-btn--danger:hover:not(:disabled) { opacity: 0.85; }

.nv-btn--nvc       { background: var(--nv-nvc); color: #111; font-weight: var(--nv-fw-bold); }

/* ══════════════════════════════════════════
   폼
══════════════════════════════════════════ */
.nv-form-group  { display: flex; flex-direction: column; gap: var(--nv-sp-2); }

.nv-label {
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-fw-medium);
  color: var(--nv-text-2);
}

.nv-input,
.nv-select,
.nv-textarea {
  width: 100%;
  padding: var(--nv-sp-2) var(--nv-sp-3);
  background: var(--nv-bg-3);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r-md);
  color: var(--nv-text);
  font-size: var(--nv-text-sm);
  transition: border-color var(--nv-tr-fast), box-shadow var(--nv-tr-fast);
}
.nv-input:focus,
.nv-select:focus,
.nv-textarea:focus {
  border-color: var(--nv-primary);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.2);
  outline: none;
}
.nv-input--error { border-color: var(--nv-error); }
.nv-textarea     { resize: vertical; min-height: 100px; }
.nv-select       { cursor: pointer; }
.nv-form-error   { font-size: var(--nv-text-xs); color: var(--nv-error); }

/* ══════════════════════════════════════════
   카드
══════════════════════════════════════════ */
.nv-card {
  background: var(--nv-bg-2);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r-lg);
  padding: var(--nv-sp-4);
}
.nv-card--hoverable {
  transition: border-color var(--nv-tr-normal), box-shadow var(--nv-tr-normal);
  cursor: pointer;
}
.nv-card--hoverable:hover { border-color: var(--nv-primary); box-shadow: var(--nv-shadow-md); }

/* 통계 카드 */
.nv-stat-card {
  background: var(--nv-bg-2);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r-lg);
  padding: var(--nv-sp-4) var(--nv-sp-5);
  display: flex; flex-direction: column; gap: var(--nv-sp-2);
}
.nv-stat-card__label  { font-size: var(--nv-text-xs); color: var(--nv-text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.nv-stat-card__value  { font-size: var(--nv-text-2xl); font-weight: var(--nv-fw-bold); }
.nv-stat-card__value--nvc    { color: var(--nv-nvc); }
.nv-stat-card__value--points { color: var(--nv-points); }

/* ══════════════════════════════════════════
   뱃지
══════════════════════════════════════════ */
.nv-badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--nv-sp-2);
  border-radius: var(--nv-r-full);
  font-size: var(--nv-text-xs);
  font-weight: var(--nv-fw-semibold);
  line-height: 1.4; white-space: nowrap;
}
.nv-badge--primary  { background: rgba(108,99,255,0.2);  color: var(--nv-primary-h); }
.nv-badge--success  { background: rgba(76,175,80,0.2);   color: var(--nv-success); }
.nv-badge--warning  { background: rgba(255,193,7,0.2);   color: var(--nv-warning); }
.nv-badge--error    { background: rgba(244,67,54,0.2);   color: var(--nv-error); }
.nv-badge--nvc      { background: rgba(255,215,0,0.2);   color: var(--nv-nvc); }
.nv-badge--soon     { background: var(--nv-surface);     color: var(--nv-text-3); }
.nv-badge--free     { background: rgba(107,108,128,0.2); color: var(--tier-free); }
.nv-badge--basic    { background: rgba(120,193,243,0.2); color: var(--tier-basic); }
.nv-badge--pro      { background: rgba(108,99,255,0.2);  color: var(--tier-pro); }
.nv-badge--premium  { background: rgba(255,215,0,0.2);   color: var(--tier-premium); }
.nv-badge--vip      { background: rgba(255,107,107,0.2); color: var(--tier-vip); }

/* ══════════════════════════════════════════
   스켈레톤
══════════════════════════════════════════ */
.nv-skeleton {
  background: var(--nv-border);
  border-radius: var(--nv-r-md);
  animation: nv-skeleton-pulse 1.5s ease-in-out infinite;
}
.nv-skeleton--text   { height: 1em; width: 100%; }
.nv-skeleton--circle { border-radius: var(--nv-r-full); }
.nv-skeleton--card   { height: 120px; width: 100%; }

/* ══════════════════════════════════════════
   스피너
══════════════════════════════════════════ */
.nv-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--nv-border);
  border-top-color: var(--nv-primary);
  border-radius: var(--nv-r-full);
  animation: nv-spin 600ms linear infinite;
  flex-shrink: 0;
}
.nv-spinner--sm { width: 14px; height: 14px; }
.nv-spinner--lg { width: 32px; height: 32px; border-width: 3px; }

/* ══════════════════════════════════════════
   토스트 컨테이너
══════════════════════════════════════════ */
#nv-toast-container {
  position: fixed;
  top: calc(var(--nv-header-h) + var(--nv-sp-4));
  right: var(--nv-sp-4);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--nv-sp-2);
  pointer-events: none;
  max-width: 360px;
  width: calc(100% - var(--nv-sp-8));
}
.nv-toast {
  display: flex; align-items: flex-start; gap: var(--nv-sp-3);
  padding: var(--nv-sp-3) var(--nv-sp-4);
  background: var(--nv-surface);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r-lg);
  box-shadow: var(--nv-shadow-lg);
  pointer-events: auto;
  animation: nv-toast-in 200ms ease forwards;
  font-size: var(--nv-text-sm);
}
.nv-toast--success { border-left: 3px solid var(--nv-success); }
.nv-toast--error   { border-left: 3px solid var(--nv-error); }
.nv-toast--warning { border-left: 3px solid var(--nv-warning); }
.nv-toast--info    { border-left: 3px solid var(--nv-info); }
.nv-toast__icon { font-size: 1.1em; flex-shrink: 0; margin-top: 1px; }
.nv-toast__msg  { flex: 1; color: var(--nv-text); }

/* ══════════════════════════════════════════
   글로벌 로딩 오버레이
══════════════════════════════════════════ */
#nv-loading-overlay {
  position: fixed; inset: 0;
  background: rgba(22,23,28,0.7);
  z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--nv-tr-normal);
}
#nv-loading-overlay.is-visible { opacity: 1; pointer-events: auto; }

/* ══════════════════════════════════════════
   프로그레스 바
══════════════════════════════════════════ */
.nv-progress {
  width: 100%; height: 6px;
  background: var(--nv-bg-3);
  border-radius: var(--nv-r-full);
  overflow: hidden;
}
.nv-progress__bar {
  height: 100%; background: var(--nv-primary);
  border-radius: var(--nv-r-full);
  transition: width var(--nv-tr-normal);
}
.nv-progress__bar--success { background: var(--nv-success); }
.nv-progress__bar--nvc     { background: var(--nv-nvc); }

/* EXP 게이지 */
.nv-exp-bar { height: 8px; background: var(--nv-bg-3); border-radius: var(--nv-r-full); overflow: hidden; }
.nv-exp-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--nv-primary) 0%, var(--nv-secondary) 100%);
  border-radius: var(--nv-r-full);
  transition: width 600ms cubic-bezier(0.34,1.56,0.64,1);
}

/* ══════════════════════════════════════════
   아바타
══════════════════════════════════════════ */
.nv-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--nv-r-full);
  background: var(--nv-surface);
  color: var(--nv-text-2);
  font-weight: var(--nv-fw-semibold);
  overflow: hidden; flex-shrink: 0;
}
.nv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nv-avatar--sm { width: 28px; height: 28px; font-size: var(--nv-text-xs); }
.nv-avatar--md { width: 36px; height: 36px; font-size: var(--nv-text-sm); }
.nv-avatar--lg { width: 48px; height: 48px; font-size: var(--nv-text-base); }
.nv-avatar--xl { width: 64px; height: 64px; font-size: var(--nv-text-xl); }

/* ══════════════════════════════════════════
   기타
══════════════════════════════════════════ */
.nv-divider { width: 100%; height: 1px; background: var(--nv-border); }

.nv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--nv-sp-3); padding: var(--nv-sp-16) var(--nv-sp-8);
  color: var(--nv-text-3); text-align: center;
}
.nv-empty__icon  { font-size: 3rem; opacity: 0.5; }
.nv-empty__title { font-size: var(--nv-text-lg); font-weight: var(--nv-fw-semibold); color: var(--nv-text-2); }
.nv-empty__desc  { font-size: var(--nv-text-sm); }

/* SPA 에러 바운더리 Fallback */
#app-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100vh; gap: var(--nv-sp-4);
  color: var(--nv-text-2); text-align: center; padding: var(--nv-sp-8);
}

/* ══════════════════════════════════════════
   네비게이션 컴포넌트 (BEM: nav-)
══════════════════════════════════════════ */
.nav-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}

/* LNB 아이템 행 */
.nav-item__row {
  display: flex; align-items: center;
  gap: var(--nv-sp-3);
  padding: var(--nv-sp-2) var(--nv-sp-3);
  border-radius: var(--nv-r-md);
  cursor: pointer;
  color: var(--nv-text-2);
  font-size: var(--nv-text-sm);
  white-space: nowrap; overflow: hidden;
  transition: background var(--nv-tr-fast), color var(--nv-tr-fast);
  min-height: 40px;
  user-select: none;
}
.nav-item__row:hover { background: var(--nv-surface); color: var(--nv-text); }
.nav-item__row.is-active {
  background: rgba(108,99,255,0.15);
  color: var(--nv-primary-h);
}

.nav-item__icon  { font-size: 1.1rem; flex-shrink: 0; width: 32px; text-align: center; }
.nav-item__label { flex: 1; opacity: 0; transition: opacity var(--nv-tr-normal); }
.nav-item__arrow {
  margin-left: auto; font-size: 12px; flex-shrink: 0;
  transition: transform var(--nv-tr-normal), opacity var(--nv-tr-normal);
  opacity: 0;
}
.nav-item__arrow.is-open { transform: rotate(90deg); }

/* 사이드바 열렸을 때 텍스트 보이기 */
.nv-sidebar.is-open .nav-item__label,
.nv-sidebar.is-open .nav-item__arrow,
.nv-sidebar.is-mobile-open .nav-item__label,
.nv-sidebar.is-mobile-open .nav-item__arrow { opacity: 1; }

/* 서브메뉴 아코디언 */
.nav-sub {
  list-style: none; padding: 0; margin: 0;
  max-height: 0; overflow: hidden;
  transition: max-height var(--nv-tr-normal);
}
.nav-sub.is-open { max-height: 500px; }

.nav-sub__item {
  display: flex; align-items: center; gap: var(--nv-sp-2);
  padding: var(--nv-sp-2) var(--nv-sp-3) var(--nv-sp-2) calc(var(--nv-sp-3) + 32px + var(--nv-sp-3));
  cursor: pointer;
  color: var(--nv-text-3); font-size: var(--nv-text-sm);
  border-radius: var(--nv-r-md);
  transition: background var(--nv-tr-fast), color var(--nv-tr-fast);
  white-space: nowrap; overflow: hidden;
}
.nav-sub__item:hover   { background: var(--nv-surface); color: var(--nv-text-2); }
.nav-sub__item.is-active { color: var(--nv-primary-h); }

/* 오버레이 메뉴 확대 스타일 */
.nv-menu-overlay .nav-item__row  { font-size: var(--nv-text-base); padding: var(--nv-sp-3) var(--nv-sp-4); min-height: 52px; }
.nv-menu-overlay .nav-item__label { opacity: 1; }
.nv-menu-overlay .nav-item__arrow { opacity: 1; }
.nv-menu-overlay .nav-sub__item  { font-size: var(--nv-text-sm); padding: var(--nv-sp-3) var(--nv-sp-4) var(--nv-sp-3) calc(var(--nv-sp-4) + 32px + var(--nv-sp-3)); }

/* ─── 온보딩 모달 (2026-05-18) ─── */
/* 외부 자료: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ */
html.nv-onboarding--open { overflow: hidden; }
.nv-onboarding {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: var(--nv-sp-4);
  animation: nv-ob-fade 0.2s ease-out;
}
.nv-onboarding__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.nv-onboarding__panel {
  position: relative;
  max-width: 600px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  background: var(--nv-surface);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r-lg);
  padding: var(--nv-sp-6);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: nv-ob-slide 0.25s ease-out;
}
.nv-onboarding__close {
  position: absolute; top: var(--nv-sp-3); right: var(--nv-sp-3);
  width: 44px; height: 44px;
  background: transparent; border: none; cursor: pointer;
  color: var(--nv-text-2); font-size: 28px; line-height: 1;
  border-radius: var(--nv-r-md);
  transition: background var(--nv-tr-fast);
}
.nv-onboarding__close:hover, .nv-onboarding__close:focus {
  background: var(--nv-bg-2); color: var(--nv-text); outline: 2px solid var(--nv-primary);
}
.nv-onboarding__title {
  font-size: var(--nv-text-2xl); font-weight: var(--nv-fw-bold);
  margin: 0 0 var(--nv-sp-2); color: var(--nv-text);
  padding-right: 48px;
}
.nv-onboarding__desc {
  margin: 0 0 var(--nv-sp-5); color: var(--nv-text-2);
  font-size: var(--nv-text-base); line-height: 1.6;
}
.nv-onboarding__features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--nv-sp-3); margin-bottom: var(--nv-sp-5);
}
.nv-onboarding__feat {
  padding: var(--nv-sp-3); background: var(--nv-bg-2);
  border: 1px solid var(--nv-border); border-radius: var(--nv-r-md);
}
.nv-onboarding__feat-icon { font-size: 28px; margin-bottom: var(--nv-sp-1); }
.nv-onboarding__feat-title {
  font-weight: var(--nv-fw-semibold); color: var(--nv-text);
  font-size: var(--nv-text-sm); margin-bottom: 2px;
}
.nv-onboarding__feat-desc {
  font-size: var(--nv-text-xs); color: var(--nv-text-3); line-height: 1.5;
}
.nv-onboarding__plans {
  padding: var(--nv-sp-3) var(--nv-sp-4);
  background: linear-gradient(135deg, rgba(var(--nv-primary-rgb,99,102,241),0.08), rgba(var(--nv-primary-rgb,99,102,241),0.02));
  border-left: 3px solid var(--nv-primary);
  border-radius: var(--nv-r-md); margin-bottom: var(--nv-sp-5);
}
.nv-onboarding__plans-title {
  font-weight: var(--nv-fw-semibold); color: var(--nv-text);
  font-size: var(--nv-text-sm); margin-bottom: 4px;
}
.nv-onboarding__plans-desc {
  font-size: var(--nv-text-xs); color: var(--nv-text-2);
}
.nv-onboarding__actions {
  display: flex; gap: var(--nv-sp-2); flex-wrap: wrap;
  margin-bottom: var(--nv-sp-3);
}
.nv-onboarding__btn {
  flex: 1; min-width: 140px; min-height: 44px;
  padding: var(--nv-sp-3) var(--nv-sp-4);
  border: 1px solid var(--nv-border); border-radius: var(--nv-r-md);
  font-weight: var(--nv-fw-semibold); font-size: var(--nv-text-sm);
  cursor: pointer; text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--nv-tr-fast), border-color var(--nv-tr-fast);
}
.nv-onboarding__btn--primary {
  background: var(--nv-primary); color: #fff; border-color: var(--nv-primary);
}
.nv-onboarding__btn--primary:hover { background: var(--nv-primary-h); }
.nv-onboarding__btn--ghost {
  background: transparent; color: var(--nv-text-2);
}
.nv-onboarding__btn--ghost:hover { background: var(--nv-bg-2); color: var(--nv-text); }
.nv-onboarding__btn:focus { outline: 2px solid var(--nv-primary); outline-offset: 2px; }
.nv-onboarding__note {
  font-size: var(--nv-text-xs); color: var(--nv-text-3);
  text-align: center; padding-top: var(--nv-sp-2);
  border-top: 1px solid var(--nv-border);
}
/* S3.34 — Most Popular badge + dont-show (2026-05-22) */
.nv-onboarding__plans-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--nv-sp-2); margin-top: var(--nv-sp-3);
}
.nv-onboarding__plan {
  position: relative; padding: var(--nv-sp-3); text-align: center;
  background: var(--nv-bg-2); border: 1px solid var(--nv-border);
  border-radius: var(--nv-r-md);
}
.nv-onboarding__plan--featured {
  border-color: var(--nv-primary); background: rgba(88,166,255,0.1);
  transform: scale(1.05); box-shadow: 0 4px 12px rgba(88,166,255,0.2);
}
.nv-onboarding__plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--nv-primary); color: #fff;
  padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600;
}
.nv-onboarding__plan-name { display: block; font-weight: 600; margin-bottom: 4px; }
.nv-onboarding__plan-price { display: block; font-size: var(--nv-text-lg); color: var(--nv-primary); }
.nv-onboarding__dont-show {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--nv-text-sm); color: var(--nv-text-2);
  cursor: pointer; padding: var(--nv-sp-2) 0; justify-content: center;
}
.nv-onboarding__dont-show input { cursor: pointer; }
@media (max-width: 480px) {
  .nv-onboarding__plans-grid { grid-template-columns: repeat(2, 1fr); }
}
@keyframes nv-ob-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nv-ob-slide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .nv-onboarding, .nv-onboarding__panel { animation: none; }
}

/* S3.34 Phase 4 — 접근성 토글 (L-20 + L-18) */
.nv-a11y-large { font-size: 125% !important; }
.nv-a11y-large body, .nv-a11y-large p, .nv-a11y-large li, .nv-a11y-large button,
.nv-a11y-large a, .nv-a11y-large label, .nv-a11y-large input { font-size: 1em !important; }

.nv-a11y-high-contrast {
  --nv-text: #ffffff; --nv-text-2: #f0f0f0; --nv-text-3: #e0e0e0;
  --nv-bg: #000000; --nv-bg-2: #1a1a1a; --nv-border: #ffffff;
  --nv-primary: #66b3ff;
}
.nv-a11y-high-contrast a { text-decoration: underline; }
.nv-a11y-high-contrast button, .nv-a11y-high-contrast input { border: 2px solid #ffffff !important; }

#nv-a11y-widget {
  position: fixed; bottom: 20px; right: 20px; z-index: 9990;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--nv-primary, #58a6ff); color: #fff;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#nv-a11y-widget:hover, #nv-a11y-widget:focus { filter: brightness(1.15); outline: 2px solid #fff; outline-offset: 2px; }
#nv-a11y-widget-panel {
  position: fixed; bottom: 80px; right: 20px; z-index: 9991;
  background: var(--nv-bg-2, #161b22); border: 1px solid var(--nv-border, #30363d);
  border-radius: 8px; padding: 16px; min-width: 240px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.nv-a11y-panel__title { font-weight: 600; margin-bottom: 10px; color: var(--nv-text, #e6edf3); }
.nv-a11y-panel__option { display: flex; gap: 8px; align-items: center; padding: 6px 0; cursor: pointer; color: var(--nv-text-2); }
.nv-a11y-panel__option input { cursor: pointer; }
.nv-a11y-panel__close {
  position: absolute; top: 6px; right: 6px;
  background: transparent; border: 0; color: var(--nv-text-3);
  font-size: 20px; cursor: pointer; width: 28px; height: 28px;
}

/* H-09 Onboarding checklist (Empty state) — 2026-05-22 S3.35 */
.nv-onboarding {
  background: var(--nv-bg-2, #161b22);
  border: 1px solid var(--nv-border, #30363d);
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.nv-onboarding__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.nv-onboarding__title {
  font-size: 18px; font-weight: 700; color: var(--nv-text, #e6edf3);
  margin: 0;
}
.nv-onboarding__progress {
  background: var(--nv-bg, #0d1117);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
.nv-onboarding__progress-bar {
  background: linear-gradient(90deg, #58a6ff 0%, #2ea043 100%);
  height: 100%;
  transition: width 300ms ease;
}
.nv-onboarding__summary {
  color: var(--nv-text-2, #b1bac4);
  font-size: 13px;
  margin: 0 0 14px;
}
.nv-onboarding__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.nv-onboarding__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 8px;
  background: var(--nv-bg, #0d1117);
  border: 1px solid var(--nv-border, #30363d);
}
.nv-onboarding__item.is-done {
  opacity: 0.6;
  background: transparent;
}
.nv-onboarding__mark {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--nv-bg-2, #161b22);
  color: var(--nv-text-3, #8b949e);
  font-weight: 700;
}
.nv-onboarding__item.is-done .nv-onboarding__mark {
  background: #2ea043; color: #fff;
}
.nv-onboarding__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nv-onboarding__body strong { color: var(--nv-text, #e6edf3); font-size: 14px; }
.nv-onboarding__body small { color: var(--nv-text-3, #8b949e); font-size: 12px; }

/* ── WCAG 2.2 AAA 글로벌 규칙 (S3.37 a11y SPA) ──
 * 2.4.13 Focus Appearance (AAA) — 2px outline + 3:1 contrast 베이스라인
 * 2.5.8 Target Size (AA 격상) — 24×24 CSS px 최소
 * 2.5.7 Dragging Movements — 노비스타 안 드래그 인터랙션 0 (해당 0)
 * 2.4.12 Focus Not Obscured Enhanced — sticky/fixed 안 가림 0
 * 외부 자료:
 *   https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
 *   https://www.sarasoueidan.com/blog/focus-indicators/
 */
*:focus-visible {
  outline: 2px solid var(--nv-primary, #58a6ff);
  outline-offset: 2px;
  border-radius: 2px;
}
:root {
  --nv-target-min: 24px;
  --nv-target-aaa: 44px;
}
button:not(.nv-icon-btn):not([data-compact]),
a.nv-btn,
[role="button"]:not([data-compact]),
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-height: var(--nv-target-min);
  min-width: var(--nv-target-min);
}
@media (pointer: coarse) {
  button:not(.nv-icon-btn):not([data-compact]),
  a.nv-btn,
  [role="button"]:not([data-compact]),
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: var(--nv-target-aaa);
    min-width: var(--nv-target-aaa);
  }
}
.nv-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--nv-primary, #58a6ff);
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.nv-skip-link:focus {
  top: 0;
}
html.nv-a11y-high-contrast *:focus-visible {
  outline: 3px solid #ffeb3b;
  outline-offset: 3px;
}