/*
 * secuCenter theme-v2
 * Pretendard + Linear/Stripe 계열 엔터프라이즈 톤
 * body[data-design-version="v2"] 선택자로 활성화
 */

/* ── 폰트 ─────────────────────────────────────────────────── */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations');
}

/* ── 토큰 ─────────────────────────────────────────────────── */
body[data-design-version="v2"] {
  /* 타이포 */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* 타입 스케일 */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;

  /* 스페이싱 */
  --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* 라운딩 */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px;

  /* 컬러 베이스 */
  --c-bg:             #f7f8fa;
  --c-surface:        #ffffff;
  --c-surface-alt:    #fbfbfc;
  --c-border:         #e4e6eb;
  --c-border-subtle:  #eef0f4;
  --c-fg:             #0e1116;
  --c-fg-muted:       #5b6470;
  --c-fg-subtle:      #8a92a0;
  --c-fg-inverse:     #ffffff;

  /* 상태색 */
  --c-success:    oklch(62% 0.13 155);
  --c-success-bg: oklch(96% 0.03 155);
  --c-warn:       oklch(72% 0.15 75);
  --c-warn-bg:    oklch(97% 0.04 85);
  --c-danger:     oklch(60% 0.19 27);
  --c-danger-bg:  oklch(96% 0.03 27);
  --c-info:       oklch(60% 0.14 240);
  --c-info-bg:    oklch(96% 0.03 240);

  /* 차트 팔레트 */
  --ch-1: #3d5af1; --ch-2: #22c55e; --ch-3: #f59e0b;
  --ch-4: #ef4444; --ch-5: #8b5cf6; --ch-6: #0ea5e9; --ch-7: #64748b;

  /* 섀도우 */
  --sh-sm:    0 1px 2px rgba(17,24,39,0.04);
  --sh-md:    0 1px 3px rgba(17,24,39,0.06), 0 1px 2px rgba(17,24,39,0.04);
  --sh-lg:    0 4px 12px rgba(17,24,39,0.08), 0 2px 4px rgba(17,24,39,0.04);
  --sh-focus: 0 0 0 3px rgba(61,90,241,0.18);

  /* Balanced 테마 (기본) */
  --accent:           #3d5af1;
  --accent-weak:      #edf0ff;
  --accent-strong:    #2e46cc;
  --sidebar-bg:       #0f1419;
  --sidebar-fg:       #c8ccd6;
  --sidebar-fg-muted: #8892a0;
  --sidebar-active:   #1c2230;
  --sidebar-accent:   #3d5af1;
  --header-bg:        #ffffff;
  --content-bg:       #f7f8fa;

  /* 기존 변수 오버라이드 (현재 테마 시스템과 호환) */
  --muted-foreground: #5b6470;
  --border-color:     #e4e6eb;

  font-family: var(--font-sans);
  font-size: var(--fs-base);
  background: var(--c-bg);
  color: var(--c-fg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.005em;
}

/* ── 레이아웃 쉘 ─────────────────────────────────────────── */
body[data-design-version="v2"] .app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--c-bg);
}

/* 헤더 */
body[data-design-version="v2"] header,
body[data-design-version="v2"] .app-header {
  height: 52px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-5);
  gap: var(--sp-4);
  flex-shrink: 0;
  box-shadow: var(--sh-sm);
}

/* 로고 텍스트 */
body[data-design-version="v2"] .logo-text,
body[data-design-version="v2"] .brand-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-fg);
}

/* ── 사이드바 ─────────────────────────────────────────────── */
/* specificity: body[attr] .sidebar = (0,2,0) > .sidebar = (0,1,0) */
body[data-design-version="v2"] aside,
body[data-design-version="v2"] .sidebar {
  width: 228px;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-fg);
  border-right: none;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  transition: width 0.18s ease;
  /* overflow-y: auto가 토글 버튼을 clipping — visible로 해제 */
  overflow: visible;
}

/* 스크롤은 nav 영역으로 이동 */
body[data-design-version="v2"] .sidebar-nav {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

body[data-design-version="v2"] .sidebar.collapsed {
  width: 56px;
}

/* 사이드바 헤더 — 높이 없애고 overflow 열어서 버튼이 경계 밖으로 나오게 */
body[data-design-version="v2"] .sidebar-header {
  height: 0;
  padding: 0;
  border: none;
  overflow: visible;
  position: static;
}

/* 토글 버튼 — 사이드바 오른쪽 경계에 걸친 원형 버튼 */
body[data-design-version="v2"] .sidebar-toggle {
  position: absolute;
  top: 14px;
  right: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--c-fg-muted);
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  padding: 0;
  line-height: 1;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

body[data-design-version="v2"] .sidebar-toggle:hover {
  background: var(--c-surface);
  color: var(--c-fg);
  box-shadow: var(--sh-lg);
}

/* 사이드바 섹션 레이블 */
body[data-design-version="v2"] .nav-section-label,
body[data-design-version="v2"] .sidebar-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-fg-muted);
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
}

/* 사이드바 메뉴 아이템
   specificity: body[attr] .nav-submenu li button = (0,3,1) > .nav-submenu button = (0,2,1) */
body[data-design-version="v2"] .nav-item,
body[data-design-version="v2"] .sidebar nav button,
body[data-design-version="v2"] .sidebar nav a,
body[data-design-version="v2"] .nav-menu-item button,
body[data-design-version="v2"] .nav-submenu li button,
body[data-design-version="v2"] .nav-submenu li a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px var(--sp-2);
  color: var(--sidebar-fg);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  background-color: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
}

body[data-design-version="v2"] .nav-submenu li button:hover,
body[data-design-version="v2"] .nav-submenu li a:hover,
body[data-design-version="v2"] .nav-menu-item button:hover {
  background-color: rgba(255,255,255,0.05);
  color: #fff;
}

body[data-design-version="v2"] .nav-submenu li button.active,
body[data-design-version="v2"] .nav-submenu li a.active {
  background-color: var(--sidebar-active);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--sidebar-accent);
}

/* 사이드바 상위 메뉴
   specificity: body[attr] .nav-menu-parent = (0,2,0) > .nav-menu-parent = (0,1,0) */
body[data-design-version="v2"] .nav-menu-parent {
  color: var(--sidebar-fg);
  background-color: transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 8px var(--sp-3);
}
body[data-design-version="v2"] .nav-menu-parent.active {
  color: #fff;
}

/* 서브메뉴 */
body[data-design-version="v2"] .nav-submenu {
  margin: 2px 0 2px var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 1px solid rgba(255,255,255,0.1);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body[data-design-version="v2"] .nav-submenu li {
  list-style: none;
}

/* ── 메인 컨텐츠
   specificity: body[attr] .main-content = (0,2,0) > .main-content = (0,1,0) */
body[data-design-version="v2"] .main-content {
  background-color: var(--content-bg);
  padding: var(--sp-6);
}

/* 페이지 제목 */
body[data-design-version="v2"] h1 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-fg);
}
body[data-design-version="v2"] h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}
body[data-design-version="v2"] h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── 카드 ────────────────────────────────────────────────── */
body[data-design-version="v2"] .card,
body[data-design-version="v2"] .admin-section,
body[data-design-version="v2"] .dashboard-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--sp-4);
}

/* ── 버튼 ────────────────────────────────────────────────── */
body[data-design-version="v2"] button:not(.no-v2) {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  transition: background 0.12s, border-color 0.12s;
}
body[data-design-version="v2"] .btn-primary,
body[data-design-version="v2"] button[class*="primary"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
body[data-design-version="v2"] .btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* ── 테이블 ─────────────────────────────────────────────── */
body[data-design-version="v2"] table {
  font-size: var(--fs-sm);
  border-collapse: collapse;
  width: 100%;
}
body[data-design-version="v2"] th {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-fg-muted);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  text-align: left;
}
body[data-design-version="v2"] td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border-subtle);
  color: var(--c-fg);
  font-size: var(--fs-sm);
}
body[data-design-version="v2"] tr:hover td {
  background: var(--c-surface-alt);
}

/* ── 폼 요소 ────────────────────────────────────────────── */
body[data-design-version="v2"] input,
body[data-design-version="v2"] select,
body[data-design-version="v2"] textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-fg);
  transition: border-color 0.12s, box-shadow 0.12s;
}
body[data-design-version="v2"] input:focus,
body[data-design-version="v2"] select:focus,
body[data-design-version="v2"] textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--sh-focus);
}

/* ── 배지 / 태그 ─────────────────────────────────────────── */
body[data-design-version="v2"] .badge,
body[data-design-version="v2"] .status-badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  letter-spacing: 0.02em;
}

/* ── 메시지 알림 ─────────────────────────────────────────── */
body[data-design-version="v2"] .message {
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid transparent;
}
body[data-design-version="v2"] .message.success {
  background: var(--c-success-bg);
  color: var(--c-success);
  border-color: color-mix(in oklab, var(--c-success) 25%, transparent);
}
body[data-design-version="v2"] .message.error {
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border-color: color-mix(in oklab, var(--c-danger) 25%, transparent);
}

/* ── 관리자 탭 ──────────────────────────────────────────── */
body[data-design-version="v2"] .admin-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-4);
  background: transparent;
}
body[data-design-version="v2"] .admin-tab {
  padding: 8px var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-fg-muted);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  margin-bottom: -1px;
  transition: color 0.12s;
}
body[data-design-version="v2"] .admin-tab:hover { color: var(--c-fg); }
body[data-design-version="v2"] .admin-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}

/* ── 숫자 / 모노 ─────────────────────────────────────────── */
body[data-design-version="v2"] .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
body[data-design-version="v2"] .mono {
  font-family: var(--font-mono);
}

/* collapsed 상태 아이콘/텍스트 처리 */
body[data-design-version="v2"] .sidebar.collapsed .menu-text,
body[data-design-version="v2"] .sidebar.collapsed .nav-section-title,
body[data-design-version="v2"] .sidebar.collapsed .menu-arrow {
  display: none;
}

body[data-design-version="v2"] .sidebar.collapsed .nav-submenu {
  display: none;
}

body[data-design-version="v2"] .sidebar.collapsed .nav-menu button,
body[data-design-version="v2"] .sidebar.collapsed .nav-submenu li button {
  justify-content: center;
  padding: 8px;
}

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  body[data-design-version="v2"] aside,
  body[data-design-version="v2"] .sidebar {
    width: 56px;
  }
  body[data-design-version="v2"] .sidebar .menu-text { display: none; }
}