/* ═══════════════════════════════════════════════════════════
   BIZNOTE Manual — Editorial Design System
   Font: Pretendard (Korean optimized) + Fira Code (code)
   Palette: Warm neutral + Indigo accent
   ═══════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  /* Typography */
  --font-body: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  --font-code: 'Fira Code', 'Consolas', monospace;
  --font-display: 'Pretendard Variable', sans-serif;

  /* Palette — Warm Neutral + Indigo */
  --c-bg: #FAFAF8;
  --c-bg-warm: #F5F4F0;
  --c-bg-code: #F0EFE9;
  --c-bg-sidebar: #FFFFFF;
  --c-bg-hover: rgba(67, 56, 202, 0.04);
  --c-bg-active: rgba(67, 56, 202, 0.08);

  --c-text: #1A1A1A;
  --c-text-secondary: #6B6B6B;
  --c-text-tertiary: #9B9B9B;
  --c-text-inverse: #FFFFFF;

  --c-accent: #4338CA;
  --c-accent-light: #6366F1;
  --c-accent-lighter: rgba(99, 102, 241, 0.12);
  --c-accent-bg: rgba(67, 56, 202, 0.06);

  --c-border: #E8E6E1;
  --c-border-light: #F0EEE9;
  --c-divider: #E0DED8;

  --c-success: #059669;
  --c-warning: #D97706;
  --c-danger: #DC2626;
  --c-info: #2563EB;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  /* Layout */
  --sidebar-w: 280px;
  --toc-w: 220px;
  --content-max: 780px;
  --header-h: 56px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.2);

  /* Transition */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.2s;
}

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  overflow: hidden;
  height: 100vh;
}

/* ── Header ────────────────────────────────────────────── */
.mn-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-lg);
  gap: var(--sp-md);
}

.mn-header-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  text-decoration: none;
  color: var(--c-text);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  width: calc(var(--sidebar-w) - var(--sp-lg));
}

.mn-header-logo .logo-icon {
  width: 28px;
  height: 28px;
  background: var(--c-accent);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.mn-header-logo .logo-label {
  color: var(--c-text-secondary);
  font-weight: 400;
  font-size: 14px;
  margin-left: 2px;
}

.mn-header-search {
  flex: 1;
  max-width: 480px;
  position: relative;
}

.mn-header-search input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 0 16px 0 38px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg-warm);
  outline: none;
  transition: all var(--dur) var(--ease);
}

.mn-header-search input::placeholder {
  color: var(--c-text-tertiary);
}

.mn-header-search input:focus {
  border-color: var(--c-accent-light);
  background: #fff;
  box-shadow: var(--shadow-focus);
}

.mn-header-search .search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-tertiary);
  font-size: 14px;
  pointer-events: none;
}

.mn-header-search .search-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--c-text-tertiary);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-body);
  pointer-events: none;
}

.mn-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-left: auto;
}

.mn-header-version {
  font-size: 12px;
  color: var(--c-text-tertiary);
  background: var(--c-bg-warm);
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 500;
}

.mn-sidebar-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--c-text);
  font-size: 20px;
  cursor: pointer;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
}

.mn-sidebar-toggle:hover {
  background: var(--c-bg-hover);
}

/* ── Layout ────────────────────────────────────────────── */
.mn-layout {
  display: flex;
  height: 100vh;
  padding-top: var(--header-h);
}

/* ── Sidebar ───────────────────────────────────────────── */
.mn-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--c-bg-sidebar);
  border-right: 1px solid var(--c-border);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-lg) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
}

.mn-sidebar::-webkit-scrollbar { width: 5px; }
.mn-sidebar::-webkit-scrollbar-track { background: transparent; }
.mn-sidebar::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: 3px;
}

.mn-nav-group {
  margin-bottom: var(--sp-md);
}

.mn-nav-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-tertiary);
  padding: var(--sp-sm) var(--sp-lg);
  margin-bottom: 2px;
  user-select: none;
}

.mn-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 7px var(--sp-lg);
  font-size: 14px;
  color: var(--c-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  border-left: 3px solid transparent;
  user-select: none;
  line-height: 1.4;
}

.mn-nav-item:hover {
  color: var(--c-text);
  background: var(--c-bg-hover);
}

.mn-nav-item.active {
  color: var(--c-accent);
  background: var(--c-accent-bg);
  border-left-color: var(--c-accent);
  font-weight: 600;
}

.mn-nav-item .nav-icon {
  width: 20px;
  text-align: center;
  font-size: 13px;
  flex-shrink: 0;
  opacity: 0.7;
}

.mn-nav-item.active .nav-icon { opacity: 1; }

.mn-nav-item .nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  background: var(--c-accent-lighter);
  color: var(--c-accent);
  padding: 1px 7px;
  border-radius: 8px;
}

/* Sub-items (collapsible) */
.mn-nav-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s var(--ease);
}

.mn-nav-sub.open { max-height: 600px; }

.mn-nav-sub .mn-nav-item {
  padding-left: calc(var(--sp-lg) + 28px);
  font-size: 13px;
}

.mn-nav-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 7px var(--sp-lg);
  font-size: 14px;
  color: var(--c-text-secondary);
  cursor: pointer;
  border-left: 3px solid transparent;
  user-select: none;
  transition: all var(--dur) var(--ease);
  width: 100%;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  font-family: var(--font-body);
  text-align: left;
  line-height: 1.4;
}

.mn-nav-toggle:hover {
  color: var(--c-text);
  background: var(--c-bg-hover);
}

.mn-nav-toggle .toggle-arrow {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.2s var(--ease);
  color: var(--c-text-tertiary);
}

.mn-nav-toggle.open .toggle-arrow { transform: rotate(90deg); }

/* ── Content ───────────────────────────────────────────── */
.mn-content-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
}

.mn-content-area::-webkit-scrollbar { width: 6px; }
.mn-content-area::-webkit-scrollbar-track { background: transparent; }
.mn-content-area::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: 3px;
}

.mn-content-wrap {
  display: flex;
  max-width: calc(var(--content-max) + var(--toc-w) + var(--sp-3xl));
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-xl);
  gap: var(--sp-2xl);
}

.mn-content {
  flex: 1;
  min-width: 0;
  max-width: var(--content-max);
}

/* ── Table of Contents (right) ─────────────────────────── */
.mn-toc {
  width: var(--toc-w);
  flex-shrink: 0;
  position: sticky;
  top: var(--sp-2xl);
  max-height: calc(100vh - var(--header-h) - var(--sp-3xl));
  overflow-y: auto;
  scrollbar-width: none;
}

.mn-toc::-webkit-scrollbar { display: none; }

.mn-toc-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-tertiary);
  margin-bottom: var(--sp-md);
}

.mn-toc-list {
  list-style: none;
  border-left: 2px solid var(--c-border-light);
}

.mn-toc-item {
  font-size: 13px;
  line-height: 1.5;
}

.mn-toc-item a {
  display: block;
  padding: 4px 0 4px var(--sp-md);
  color: var(--c-text-tertiary);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: all var(--dur) var(--ease);
}

.mn-toc-item a:hover {
  color: var(--c-text-secondary);
}

.mn-toc-item a.active {
  color: var(--c-accent);
  border-left-color: var(--c-accent);
  font-weight: 500;
}

.mn-toc-item.depth-3 a { padding-left: calc(var(--sp-md) + 12px); font-size: 12px; }

/* ── Article Typography ────────────────────────────────── */
.mn-article {}

.mn-article h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--c-text);
  margin-bottom: var(--sp-sm);
}

.mn-article .mn-subtitle {
  font-size: 17px;
  color: var(--c-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--sp-2xl);
  font-weight: 400;
}

.mn-article h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin: var(--sp-2xl) 0 var(--sp-md) 0;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-border-light);
  scroll-margin-top: calc(var(--header-h) + var(--sp-lg));
}

.mn-article h2:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

.mn-article h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
  margin: var(--sp-xl) 0 var(--sp-sm) 0;
  scroll-margin-top: calc(var(--header-h) + var(--sp-lg));
}

.mn-article p {
  margin-bottom: var(--sp-md);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.8;
}

.mn-article ul, .mn-article ol {
  margin-bottom: var(--sp-md);
  padding-left: var(--sp-lg);
}

.mn-article li {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: var(--sp-xs);
  color: var(--c-text);
}

.mn-article li::marker { color: var(--c-text-tertiary); }

.mn-article strong { font-weight: 600; color: var(--c-text); }

.mn-article a {
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(67, 56, 202, 0.2);
  transition: border-color var(--dur) var(--ease);
}

.mn-article a:hover { border-bottom-color: var(--c-accent); }

/* Code inline */
.mn-article code {
  font-family: var(--font-code);
  font-size: 13px;
  background: var(--c-bg-code);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--c-accent);
  font-weight: 500;
}

/* Code block */
.mn-article pre {
  background: #1E1E2E;
  color: #CDD6F4;
  padding: var(--sp-lg);
  border-radius: var(--r-md);
  overflow-x: auto;
  margin-bottom: var(--sp-lg);
  font-size: 13px;
  line-height: 1.6;
}

.mn-article pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-weight: 400;
}

/* ── Callout boxes ─────────────────────────────────────── */
.mn-callout {
  display: flex;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-lg);
  font-size: 14px;
  line-height: 1.7;
  border-left: 4px solid;
}

.mn-callout-icon {
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 2px;
}

.mn-callout.tip {
  background: rgba(5, 150, 105, 0.06);
  border-left-color: var(--c-success);
}
.mn-callout.tip .mn-callout-icon { color: var(--c-success); }

.mn-callout.warn {
  background: rgba(217, 119, 6, 0.06);
  border-left-color: var(--c-warning);
}
.mn-callout.warn .mn-callout-icon { color: var(--c-warning); }

.mn-callout.info {
  background: rgba(37, 99, 235, 0.06);
  border-left-color: var(--c-info);
}
.mn-callout.info .mn-callout-icon { color: var(--c-info); }

.mn-callout.danger {
  background: rgba(220, 38, 38, 0.06);
  border-left-color: var(--c-danger);
}
.mn-callout.danger .mn-callout-icon { color: var(--c-danger); }

/* ── Step guide ────────────────────────────────────────── */
.mn-steps {
  margin-bottom: var(--sp-lg);
  counter-reset: step-counter;
}

.mn-step {
  display: flex;
  gap: var(--sp-md);
  padding: var(--sp-md) 0;
  counter-increment: step-counter;
}

.mn-step + .mn-step { border-top: 1px dashed var(--c-border-light); }

.mn-step::before {
  content: counter(step-counter);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--c-accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}

.mn-step-content h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--sp-xs);
}

.mn-step-content p {
  font-size: 14px;
  color: var(--c-text-secondary);
  margin-bottom: 0;
}

/* ── Table ─────────────────────────────────────────────── */
.mn-article table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-lg);
  font-size: 14px;
}

.mn-article table th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-secondary);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 2px solid var(--c-border);
  background: var(--c-bg-warm);
}

.mn-article table td {
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--c-border-light);
  vertical-align: top;
}

.mn-article table tr:hover td { background: var(--c-bg-hover); }

/* ── Image / Figure ────────────────────────────────────── */
.mn-figure {
  margin: var(--sp-lg) 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-bg-warm);
}

.mn-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.mn-figure figcaption {
  padding: var(--sp-sm) var(--sp-md);
  font-size: 13px;
  color: var(--c-text-secondary);
  text-align: center;
  border-top: 1px solid var(--c-border-light);
}

/* ── Keyboard shortcut ─────────────────────────────────── */
.mn-kbd {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--c-text-secondary);
  white-space: nowrap;
}

/* ── Breadcrumb ────────────────────────────────────────── */
.mn-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 13px;
  color: var(--c-text-tertiary);
  margin-bottom: var(--sp-lg);
}

.mn-breadcrumb a {
  color: var(--c-text-tertiary);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.mn-breadcrumb a:hover { color: var(--c-accent); }

.mn-breadcrumb .sep { font-size: 10px; }

/* ── Prev/Next navigation ──────────────────────────────── */
.mn-page-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin-top: var(--sp-3xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--c-border);
}

.mn-page-nav-link {
  display: flex;
  flex-direction: column;
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}

.mn-page-nav-link:hover {
  border-color: var(--c-accent-light);
  box-shadow: var(--shadow-sm);
  background: var(--c-accent-bg);
}

.mn-page-nav-link.next { text-align: right; }

.mn-page-nav-label {
  font-size: 12px;
  color: var(--c-text-tertiary);
  margin-bottom: 2px;
}

.mn-page-nav-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-accent);
}

/* ── Search overlay ────────────────────────────────────── */
.mn-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.mn-search-overlay.open { display: flex; }

.mn-search-modal {
  width: 580px;
  max-height: 480px;
  background: white;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: searchSlideIn 0.2s var(--ease);
}

@keyframes searchSlideIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mn-search-modal-input {
  display: flex;
  align-items: center;
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--c-border);
  gap: var(--sp-sm);
}

.mn-search-modal-input .search-icon { color: var(--c-text-tertiary); font-size: 16px; }

.mn-search-modal-input input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--c-text);
  background: transparent;
}

.mn-search-modal-input input::placeholder { color: var(--c-text-tertiary); }

.mn-search-results {
  overflow-y: auto;
  flex: 1;
  padding: var(--sp-sm);
}

.mn-search-result {
  display: block;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.mn-search-result:hover, .mn-search-result.focused { background: var(--c-bg-hover); }

.mn-search-result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 2px;
}

.mn-search-result-breadcrumb {
  font-size: 12px;
  color: var(--c-text-tertiary);
}

.mn-search-result mark {
  background: var(--c-accent-lighter);
  color: var(--c-accent);
  border-radius: 2px;
  padding: 0 2px;
}

.mn-search-empty {
  padding: var(--sp-xl);
  text-align: center;
  color: var(--c-text-tertiary);
  font-size: 14px;
}

/* ── Feature cards (home page) ─────────────────────────── */
.mn-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.mn-feature-card {
  padding: var(--sp-lg);
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-text);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}

.mn-feature-card:hover {
  border-color: var(--c-accent-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.mn-feature-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: var(--sp-md);
}

.mn-feature-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: var(--sp-xs);
}

.mn-feature-card-desc {
  font-size: 13px;
  color: var(--c-text-secondary);
  line-height: 1.5;
}

/* Feature card icon colors */
.mn-feature-card-icon.blue { background: rgba(37, 99, 235, 0.1); color: #2563EB; }
.mn-feature-card-icon.green { background: rgba(5, 150, 105, 0.1); color: #059669; }
.mn-feature-card-icon.amber { background: rgba(217, 119, 6, 0.1); color: #D97706; }
.mn-feature-card-icon.rose { background: rgba(225, 29, 72, 0.1); color: #E11D48; }
.mn-feature-card-icon.purple { background: rgba(99, 102, 241, 0.1); color: #6366F1; }
.mn-feature-card-icon.teal { background: rgba(13, 148, 136, 0.1); color: #0D9488; }

/* ── Tag / Badge ───────────────────────────────────────── */
.mn-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mn-tag.new { background: rgba(5, 150, 105, 0.1); color: var(--c-success); }
.mn-tag.pro { background: rgba(99, 102, 241, 0.1); color: var(--c-accent); }
.mn-tag.basic { background: var(--c-bg-warm); color: var(--c-text-secondary); }

/* ── Footer ────────────────────────────────────────────── */
.mn-footer {
  margin-top: var(--sp-3xl);
  padding: var(--sp-xl) 0;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
  color: var(--c-text-tertiary);
  text-align: center;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mn-toc { display: none; }
}

@media (max-width: 860px) {
  .mn-sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
    box-shadow: none;
  }

  .mn-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .mn-sidebar-toggle { display: flex; }

  .mn-header-logo { width: auto; }

  .mn-content-wrap {
    padding: var(--sp-lg) var(--sp-md);
  }

  .mn-page-nav { grid-template-columns: 1fr; }

  .mn-search-modal { width: calc(100% - 32px); }
}

@media (max-width: 480px) {
  .mn-header-search { display: none; }
  .mn-article h1 { font-size: 26px; }
  .mn-article h2 { font-size: 19px; }
  .mn-feature-grid { grid-template-columns: 1fr; }
}

/* ── Print ─────────────────────────────────────────────── */
@media print {
  .mn-header, .mn-sidebar, .mn-toc, .mn-page-nav, .mn-search-overlay { display: none !important; }
  .mn-layout { display: block; padding-top: 0; }
  .mn-content-area { overflow: visible; }
  .mn-content-wrap { max-width: 100%; padding: 0; }
}

/* ── Smooth page transition ────────────────────────────── */
.mn-content.loading { opacity: 0.4; transition: opacity 0.15s; }
.mn-content.loaded {
  opacity: 1;
  transition: opacity 0.3s var(--ease);
  animation: contentFadeIn 0.3s var(--ease);
}

@keyframes contentFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Visual Diagrams (overview page) ───────────────────── */

/* Flow diagram — horizontal arrow chain */
.mn-flow {
  display: flex;
  align-items: center;
  gap: 0;
  margin: var(--sp-lg) 0;
  overflow-x: auto;
  padding: var(--sp-md) 0;
  justify-content: center;
}

.mn-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mn-flow-icon {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  position: relative;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.mn-flow-icon:hover {
  transform: translateY(-3px);
}

/* Each step has unique color */
.mn-flow-step:nth-child(1) .mn-flow-icon {
  background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
  border: 2px solid #C7D2FE;
  box-shadow: 0 4px 12px rgba(99,102,241,0.1);
}

.mn-flow-step:nth-child(3) .mn-flow-icon {
  background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
  border: 2px solid #BBF7D0;
  box-shadow: 0 4px 12px rgba(34,197,94,0.1);
}

.mn-flow-step:nth-child(5) .mn-flow-icon {
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  border: 2px solid #FED7AA;
  box-shadow: 0 4px 12px rgba(249,115,22,0.1);
}

.mn-flow-step:nth-child(7) .mn-flow-icon {
  background: linear-gradient(135deg, #FDF2F8, #FCE7F3);
  border: 2px solid #FBCFE8;
  box-shadow: 0 4px 12px rgba(236,72,153,0.1);
}

.mn-flow-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text);
  text-align: center;
  max-width: 90px;
  line-height: 1.35;
}

.mn-flow-sublabel {
  font-size: 11px;
  color: var(--c-text-tertiary);
  text-align: center;
  max-width: 90px;
  line-height: 1.3;
  margin-top: -4px;
}

.mn-flow-arrow {
  font-size: 18px;
  color: var(--c-text-tertiary);
  padding: 0 10px;
  flex-shrink: 0;
  margin-bottom: 24px;
  opacity: 0.5;
}

/* Animated chevron arrow */
.mn-flow-arrow svg {
  width: 20px;
  height: 20px;
  stroke: var(--c-accent-light);
  stroke-width: 2.5;
  fill: none;
}

/* ── Tree structure diagram ────────────────────────────── */
.mn-tree-diagram {
  margin: var(--sp-lg) 0;
  padding: var(--sp-lg) var(--sp-xl);
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.mn-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--c-text);
}

.mn-tree-node .tn-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.mn-tree-node .tn-label { font-weight: 600; }
.mn-tree-node .tn-desc { color: var(--c-text-tertiary); font-size: 12px; margin-left: 4px; }

.mn-tree-children {
  margin-left: 14px;
  padding-left: 20px;
  border-left: 2px solid var(--c-border-light);
}

.mn-tree-children .mn-tree-children {
  border-left-color: var(--c-border);
  border-left-style: dashed;
}

/* ── Safe feature cards (icon + text horizontal) ───────── */
.mn-safe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
  margin: var(--sp-lg) 0;
}

.mn-safe-card {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: box-shadow 0.2s var(--ease);
}

.mn-safe-card:hover {
  box-shadow: var(--shadow-md);
}

.mn-safe-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.mn-safe-icon.si-save { background: #EEF2FF; }
.mn-safe-icon.si-history { background: #F0FDF4; }
.mn-safe-icon.si-trash { background: #FFF7ED; }
.mn-safe-icon.si-cloud { background: #EFF6FF; }

.mn-safe-text h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--c-text);
}

.mn-safe-text p {
  font-size: 13px;
  color: var(--c-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ── Formula flow (visual equation) ────────────────────── */
.mn-formula-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: var(--sp-md) 0;
  padding: var(--sp-lg);
  background: var(--c-accent-bg);
  border-radius: var(--r-md);
  border: 1px dashed var(--c-accent-lighter);
  flex-wrap: wrap;
}

.mn-formula-box {
  padding: 8px 16px;
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  min-width: 70px;
}

.mn-formula-box .fb-label {
  font-size: 10px;
  font-weight: 400;
  color: var(--c-text-tertiary);
  display: block;
  margin-bottom: 2px;
}

.mn-formula-box .fb-value {
  color: var(--c-text);
}

.mn-formula-box.result {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: white;
}

.mn-formula-box.result .fb-label { color: rgba(255,255,255,0.7); }
.mn-formula-box.result .fb-value { color: white; font-size: 16px; }

.mn-formula-op {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-accent);
}

/* ── Device mockup (CSS-only) ──────────────────────────── */
.mn-device-row {
  display: grid;
  grid-template-columns: 2fr 1.3fr 0.8fr;
  gap: var(--sp-lg);
  margin: var(--sp-lg) 0;
  align-items: end;
}

.mn-device {
  text-align: center;
}

.mn-device-frame {
  background: #1A1A1A;
  border-radius: 8px;
  padding: 6px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.mn-device-frame.desktop {
  width: 100%;
  border-radius: 8px 8px 0 0;
}

.mn-device-frame.desktop::after {
  content: '';
  display: block;
  height: 20px;
  background: #2A2A2A;
  margin: 6px -6px -6px;
  border-radius: 0 0 8px 8px;
}

.mn-device-frame.tablet {
  width: 80%;
  border-radius: 10px;
  padding: 8px;
}

.mn-device-frame.phone {
  width: 55%;
  border-radius: 14px;
  padding: 8px 4px;
}

.mn-device-frame.phone::before {
  content: '';
  display: block;
  width: 30px;
  height: 4px;
  background: #333;
  border-radius: 2px;
  margin: 0 auto 4px;
}

.mn-device-screen {
  background: #F5F4F0;
  border-radius: 3px;
  padding: 8px;
  min-height: 90px;
}

.mn-device-screen .ds-bar {
  height: 4px;
  background: var(--c-accent);
  border-radius: 2px;
  margin-bottom: 4px;
  width: 60%;
}

.mn-device-screen .ds-line {
  height: 3px;
  background: #E0DED8;
  border-radius: 1px;
  margin-bottom: 3px;
}

.mn-device-screen .ds-line:nth-child(3) { width: 85%; }
.mn-device-screen .ds-line:nth-child(4) { width: 70%; }

.mn-device-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  margin-top: var(--sp-sm);
}

.mn-device-sublabel {
  font-size: 11px;
  color: var(--c-text-secondary);
}

/* ── Search preview mockup ─────────────────────────────── */
.mn-search-preview {
  margin: var(--sp-lg) 0;
  padding: var(--sp-lg);
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.mn-search-preview .sp-bar {
  display: flex;
  gap: 8px;
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
}

.mn-search-preview .sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--c-accent-bg);
  border: 1px solid var(--c-accent-lighter);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-accent);
}

.mn-search-preview .sp-chip .sp-x {
  font-size: 10px;
  opacity: 0.5;
}

.mn-search-preview .sp-result {
  font-size: 13px;
  color: var(--c-text-secondary);
  padding: 4px 0;
  border-top: 1px solid var(--c-border-light);
}

/* Comparison boxes — before/after */
.mn-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  margin: var(--sp-lg) 0;
  align-items: stretch;
}

.mn-compare-box {
  padding: var(--sp-lg);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
}

.mn-compare-box.before {
  background: #FEF2F2;
  border-color: #FECACA;
}

.mn-compare-box.after {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.mn-compare-box .compare-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-sm);
}

.mn-compare-box.before .compare-title { color: #DC2626; }
.mn-compare-box.after .compare-title { color: #16A34A; }

.mn-compare-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mn-compare-box li {
  font-size: 14px;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
}

.mn-compare-box li::before {
  flex-shrink: 0;
  font-size: 14px;
}

.mn-compare-box.before li::before { content: '✕'; color: #DC2626; }
.mn-compare-box.after li::before { content: '✓'; color: #16A34A; font-weight: 700; }

.mn-compare-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--c-text-tertiary);
  padding: 0 var(--sp-md);
}

/* Visual table mockup (inline SVG diagram) */
.mn-diagram {
  margin: var(--sp-lg) 0;
  padding: var(--sp-lg);
  background: var(--c-bg-warm);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow-x: auto;
}

.mn-diagram-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-md);
  text-align: center;
}

/* Mini mockup table */
.mn-mock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: white;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--c-border);
}

.mn-mock-table th {
  background: var(--c-accent);
  color: white;
  font-weight: 600;
  padding: 8px 12px;
  text-align: left;
  font-size: 12px;
}

.mn-mock-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--c-border-light);
}

.mn-mock-table tr:last-child td { border-bottom: none; }

.mn-mock-table .mock-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
}

.mock-badge.blue { background: #DBEAFE; color: #2563EB; }
.mock-badge.green { background: #DCFCE7; color: #16A34A; }
.mock-badge.amber { background: #FEF3C7; color: #D97706; }
.mock-badge.red { background: #FEE2E2; color: #DC2626; }

/* Permission visual (nested boxes) */
.mn-perm-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-sm);
  margin: var(--sp-md) 0;
}

.mn-perm-card {
  padding: 14px;
  border-radius: var(--r-md);
  text-align: center;
  border: 2px solid;
}

.mn-perm-card .perm-icon { font-size: 24px; margin-bottom: 6px; }
.mn-perm-card .perm-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.mn-perm-card .perm-desc { font-size: 11px; line-height: 1.4; }

.mn-perm-card.owner {
  background: #EEF2FF;
  border-color: #818CF8;
  color: var(--c-accent);
}

.mn-perm-card.admin {
  background: #F0FDF4;
  border-color: #86EFAC;
  color: #16A34A;
}

.mn-perm-card.editor {
  background: #FFF7ED;
  border-color: #FDBA74;
  color: #EA580C;
}

.mn-perm-card.viewer {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #64748B;
}

/* Highlight number */
.mn-highlight-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-md);
  margin: var(--sp-lg) 0;
}

.mn-highlight-num {
  text-align: center;
  padding: var(--sp-lg) var(--sp-md);
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.mn-highlight-num .hn-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--c-accent);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.03em;
}

.mn-highlight-num .hn-label {
  font-size: 13px;
  color: var(--c-text-secondary);
}

/* ── Inline SVG icon sizing ────────────────────────────── */
.mn-icon-table {
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

/* ── Sharing scenario cards ─────────────────────────────── */
.mn-share-scenarios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin: var(--sp-lg) 0;
}

.mn-share-card {
  padding: var(--sp-lg);
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-align: center;
}

.mn-share-card .sc-illustration {
  margin-bottom: var(--sp-md);
  padding: var(--sp-md) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mn-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mn-person .p-head {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid;
}

.mn-person .p-body {
  width: 28px;
  height: 14px;
  border-radius: 14px 14px 4px 4px;
  border: 2px solid;
  border-top: none;
}

.mn-person .p-label {
  font-size: 9px;
  font-weight: 600;
  margin-top: 2px;
}

.mn-person.blue .p-head { border-color: #3B82F6; background: #DBEAFE; }
.mn-person.blue .p-body { border-color: #3B82F6; background: #DBEAFE; }
.mn-person.blue .p-label { color: #3B82F6; }
.mn-person.green .p-head { border-color: #16A34A; background: #DCFCE7; }
.mn-person.green .p-body { border-color: #16A34A; background: #DCFCE7; }
.mn-person.green .p-label { color: #16A34A; }
.mn-person.amber .p-head { border-color: #D97706; background: #FEF3C7; }
.mn-person.amber .p-body { border-color: #D97706; background: #FEF3C7; }
.mn-person.amber .p-label { color: #D97706; }

.mn-share-arrow {
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.mn-share-arrow .sa-line {
  width: 24px;
  height: 2px;
  background: var(--c-border);
  position: relative;
}

.mn-share-arrow .sa-line::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  border: 4px solid transparent;
  border-left-color: var(--c-border);
}

.mn-mini-data {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: var(--c-bg-warm);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  min-width: 60px;
}

.mn-mini-data .md-bar {
  height: 3px;
  background: var(--c-border);
  border-radius: 1px;
}

.mn-mini-data .md-bar:first-child {
  width: 60%;
  background: var(--c-accent);
}

.mn-mini-data-label {
  font-size: 9px;
  color: var(--c-text-tertiary);
  text-align: center;
  margin-top: 2px;
}

.mn-share-card .sc-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 4px;
}

.mn-share-card .sc-desc {
  font-size: 13px;
  color: var(--c-text-secondary);
  line-height: 1.6;
}

/* ── Permission scenario table ─────────────────────────── */
.mn-perm-scenario {
  margin: var(--sp-lg) 0;
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.mn-perm-scenario-header {
  padding: 12px 18px;
  background: var(--c-bg-warm);
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-secondary);
}

.mn-perm-scenario-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-bottom: 1px solid var(--c-border-light);
  font-size: 13px;
}

.mn-perm-scenario-row:last-child { border-bottom: none; }

.mn-perm-scenario-row .ps-project {
  padding: 10px 18px;
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-bg-warm);
  border-right: 1px solid var(--c-border-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mn-perm-scenario-row .ps-members {
  padding: 10px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.mn-perm-member {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.mn-perm-member .pm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mn-perm-member .pm-role {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
}

.pm-dot.owner { background: #818CF8; }
.pm-dot.admin { background: #34D399; }
.pm-dot.editor { background: #FBBF24; }
.pm-dot.viewer { background: #94A3B8; }

.pm-role.owner { background: #EEF2FF; color: #4338CA; }
.pm-role.admin { background: #F0FDF4; color: #16A34A; }
.pm-role.editor { background: #FFF7ED; color: #EA580C; }
.pm-role.viewer { background: #F8FAFC; color: #64748B; }

/* ── Role branch card ──────────────────────────────────── */
.mn-role-branch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin: var(--sp-xl) 0;
}

.mn-role-branch-card {
  padding: var(--sp-xl) var(--sp-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  text-decoration: none;
  color: var(--c-text);
  border-radius: var(--r-lg);
  transition: all 0.25s var(--ease);
  position: relative;
  overflow: hidden;
}

/* Admin card — indigo accent */
.mn-role-branch-card.admin {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  border: 2px solid #C7D2FE;
  cursor: pointer;
}

.mn-role-branch-card.admin:hover {
  border-color: var(--c-accent);
  box-shadow: 0 8px 24px rgba(67, 56, 202, 0.15);
  transform: translateY(-3px);
}

/* User card — green accent */
.mn-role-branch-card.user {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border: 2px solid #BBF7D0;
}

.mn-role-branch-card .rb-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
}

.mn-role-branch-card.admin .rb-icon {
  background: rgba(67, 56, 202, 0.1);
}

.mn-role-branch-card.user .rb-icon {
  background: rgba(22, 163, 74, 0.1);
}

.mn-role-branch-card .rb-role {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 12px;
  border-radius: 10px;
}

.mn-role-branch-card.admin .rb-role {
  background: rgba(67, 56, 202, 0.12);
  color: var(--c-accent);
}

.mn-role-branch-card.user .rb-role {
  background: rgba(22, 163, 74, 0.12);
  color: #16A34A;
}

.mn-role-branch-card .rb-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mn-role-branch-card .rb-desc {
  font-size: 13px;
  color: var(--c-text-secondary);
  line-height: 1.6;
}

/* CTA button style */
.mn-role-branch-card .rb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  padding: 8px 20px;
  border-radius: 8px;
  transition: all 0.2s var(--ease);
}

.mn-role-branch-card.admin .rb-link {
  background: var(--c-accent);
  color: white;
}

.mn-role-branch-card.admin:hover .rb-link {
  background: #3730A3;
}

.mn-role-branch-card.user .rb-link {
  background: rgba(22, 163, 74, 0.1);
  color: #16A34A;
  padding: 8px 20px;
}

@media (max-width: 640px) {
  .mn-role-branch { grid-template-columns: 1fr; }
}

/* ── UI Mockup — screen layout wireframe ───────────────── */
.mn-screen-mockup {
  margin: var(--sp-lg) 0;
  background: #1A1A1A;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.mn-screen-titlebar {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: #2A2A2A;
  gap: 6px;
}

.mn-screen-titlebar .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mn-screen-titlebar .dot.red { background: #FF5F56; }
.mn-screen-titlebar .dot.yellow { background: #FFBD2E; }
.mn-screen-titlebar .dot.green { background: #27C93F; }

.mn-screen-titlebar .titlebar-text {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: #888;
  font-family: var(--font-body);
}

.mn-screen-body {
  display: flex;
  min-height: 180px;
}

/* Sidebar area in mockup */
.mn-screen-sidebar {
  width: 160px;
  background: #222;
  border-right: 1px solid #333;
  padding: 12px 8px;
  flex-shrink: 0;
}

.mn-screen-sidebar .ss-group-title {
  font-size: 9px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  margin-bottom: 2px;
}

.mn-screen-sidebar .ss-item {
  padding: 4px 8px;
  font-size: 11px;
  color: #999;
  border-radius: 4px;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mn-screen-sidebar .ss-item.active {
  background: rgba(99,102,241,0.15);
  color: #A5B4FC;
}

.mn-screen-sidebar .ss-item .ss-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* Content area in mockup */
.mn-screen-content {
  flex: 1;
  background: #F5F4F0;
  padding: 12px;
}

/* Search bar in mockup */
.mn-screen-searchbar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
}

.mn-screen-searchbar .sb-input {
  flex: 1;
  height: 18px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.mn-screen-searchbar .sb-btn {
  width: 40px;
  height: 18px;
  background: var(--c-accent);
  border-radius: 3px;
}

/* Grid in mockup */
.mn-screen-grid {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.mn-screen-grid .sg-header {
  display: flex;
  background: #E8E6E1;
  border-bottom: 1px solid #ddd;
}

.mn-screen-grid .sg-cell {
  flex: 1;
  padding: 4px 6px;
  font-size: 9px;
  border-right: 1px solid rgba(0,0,0,0.06);
}

.mn-screen-grid .sg-cell:last-child { border-right: none; }

.mn-screen-grid .sg-header .sg-cell {
  font-weight: 700;
  color: #666;
  font-size: 8px;
}

.mn-screen-grid .sg-row {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}

.mn-screen-grid .sg-row:last-child { border-bottom: none; }

.mn-screen-grid .sg-row.selected {
  background: rgba(67,56,202,0.06);
}

.mn-screen-grid .sg-row .sg-cell {
  color: #333;
  font-size: 9px;
}

/* Form panel in mockup */
.mn-screen-form {
  width: 200px;
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 10px;
  flex-shrink: 0;
}

.mn-screen-form .sf-title {
  font-size: 9px;
  font-weight: 700;
  color: #666;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}

.mn-screen-form .sf-field {
  margin-bottom: 6px;
}

.mn-screen-form .sf-label {
  font-size: 8px;
  color: #999;
  margin-bottom: 2px;
}

.mn-screen-form .sf-input {
  height: 16px;
  background: #F5F4F0;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
}

.mn-screen-form .sf-input.filled {
  background: #fff;
  border-color: #bbb;
}

/* Annotation pointer */
.mn-annotation {
  margin: var(--sp-md) 0;
  padding: var(--sp-md) var(--sp-lg);
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 4px solid #F59E0B;
  border-radius: var(--r-sm);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
}

.mn-annotation .ann-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #F59E0B;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* Horizontal feature strip */
.mn-feature-strip {
  display: flex;
  gap: var(--sp-sm);
  margin: var(--sp-lg) 0;
  overflow-x: auto;
  padding: var(--sp-xs) 0;
}

.mn-feature-strip-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  min-width: 0;
  white-space: nowrap;
  transition: all 0.15s var(--ease);
}

.mn-feature-strip-item:hover {
  border-color: var(--c-accent-light);
  background: var(--c-accent-bg);
}

.mn-feature-strip-item .fsi-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* Action button mockup */
.mn-btn-mockup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
}

.mn-btn-mockup.primary {
  background: var(--c-accent);
  color: white;
  border-color: var(--c-accent);
}

.mn-btn-mockup.secondary {
  background: white;
  color: var(--c-text);
  border-color: var(--c-border);
}

@media (max-width: 640px) {
  .mn-compare { grid-template-columns: 1fr; }
  .mn-compare-arrow { transform: rotate(90deg); padding: var(--sp-sm) 0; }
  .mn-flow { flex-wrap: wrap; justify-content: center; }
  .mn-perm-visual { grid-template-columns: repeat(2, 1fr); }
  .mn-highlight-row { grid-template-columns: repeat(2, 1fr); }
  .mn-safe-grid { grid-template-columns: 1fr; }
  .mn-device-row { grid-template-columns: 1fr; }
  .mn-device-frame.tablet, .mn-device-frame.phone { width: 60%; }
  .mn-formula-flow { gap: 6px; padding: var(--sp-md); }
  .mn-share-scenarios { grid-template-columns: 1fr; }
  .mn-perm-scenario-row { grid-template-columns: 1fr; }
  .mn-perm-scenario-row .ps-project { border-right: none; border-bottom: 1px solid var(--c-border-light); }
  .mn-screen-sidebar { width: 100px; }
  .mn-screen-form { width: 140px; }
  .mn-feature-strip { flex-wrap: wrap; }
  .mn-icon-grid { grid-template-columns: repeat(2, 1fr); }
  .mn-comparison { grid-template-columns: 1fr; }
  .mn-comp-col + .mn-comp-col { border-left: none; border-top: 1px solid var(--c-border); }
}

/* ── Icon Card Grid ───────────────────────────────────── */
.mn-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.mn-icon-card {
  padding: var(--sp-lg);
  background: white;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-align: center;
  text-decoration: none;
  color: var(--c-text);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.mn-icon-card:hover {
  border-color: var(--c-accent-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.mn-icon-card .icon-card-icon {
  font-size: 32px;
  margin-bottom: var(--sp-sm);
}

.mn-icon-card .icon-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: var(--sp-xs);
}

.mn-icon-card .icon-card-desc {
  font-size: 13px;
  color: var(--c-text-secondary);
  line-height: 1.5;
}

/* ── Comparison Box ───────────────────────────────────── */
.mn-comparison {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: var(--sp-lg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: white;
}

.mn-comp-col {
  padding: var(--sp-lg);
}

.mn-comp-col + .mn-comp-col {
  border-left: 1px solid var(--c-border);
}

.mn-comp-header {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-md);
  border-bottom: 2px solid var(--c-border-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mn-comp-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mn-comp-col ul li {
  font-size: 13px;
  padding: 5px 0;
  color: var(--c-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mn-comp-col ul li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent-light);
  flex-shrink: 0;
}