/* ==========================================================================
   RE:PERSONAL -- Columns (Glossary) Page
   Editorial ruled-line aesthetic, typography-driven.
   ========================================================================== */

/* -- Sidebar Layout ------------------------------------------------------ */

.col-page-wrap {
  display: flex;
  min-height: 100vh;
}

.col-sidebar {
  width: 220px;
  background: white;
  border-right: 1px solid var(--border-light);
  position: fixed;
  top: var(--nav-h);
  left: 0;
  bottom: 0;
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  z-index: 50;
}

.col-sidebar-header {
  margin-bottom: var(--space-lg);
}

.col-sidebar-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
}

.col-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.col-sidebar-label {
  font-family: var(--font-ui);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  padding: var(--space-sm) var(--space-xs) var(--space-xs);
}

.col-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
}

.col-sidebar-link:hover {
  background: #F5F5F5;
  color: var(--text);
}

.col-sidebar-link.active {
  background: var(--accent-light);
  color: var(--text);
  font-weight: 700;
}

.col-sidebar-link svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.col-sidebar-link.active svg {
  opacity: 1;
}

.col-sidebar-bottom {
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}

.col-page-main {
  flex: 1;
  margin-left: 220px;
}

@media (max-width: 768px) {
  .col-sidebar {
    display: none;
  }

  .col-page-main {
    margin-left: 0;
  }
}

/* -- Mobile Column Tabs -------------------------------------------------- */

.col-mobile-tabs {
  display: none;
  gap: 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .col-mobile-tabs {
    display: flex;
  }
}

.col-mobile-tab {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: var(--space-md) var(--space-lg);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.col-mobile-tab:hover {
  color: var(--text);
}

.col-mobile-tab--active {
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

/* -- Hero ---------------------------------------------------------------- */

.col-hero {
  padding-top: calc(var(--nav-h) + var(--space-2xl));
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (max-width: 767px) {
  .col-hero {
    height: 220px;
    padding-top: calc(var(--nav-h) + var(--space-lg));
  }
}

.col-kicker {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.col-hero-title {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.col-hero-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.6;
}

/* -- Column Nav (tab switcher between column pages) ---------------------- */

.col-nav {
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}

.col-nav-tabs {
  display: flex;
  gap: 0;
}

.col-nav-tab {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: var(--space-md) var(--space-lg);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all var(--ease);
  white-space: nowrap;
}

.col-nav-tab:hover {
  color: var(--text);
}

.col-nav-tab--active {
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

/* -- Content ------------------------------------------------------------- */

.col-content {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

/* -- Toolbar ------------------------------------------------------------- */

.col-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

/* -- Search -------------------------------------------------------------- */

.col-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  max-width: 320px;
  flex: 1;
  min-width: 200px;
  transition: border-color var(--ease);
}

.col-search-wrap:focus-within {
  border-color: var(--accent);
}

.col-search-wrap svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.col-search {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text);
  outline: none;
  width: 100%;
}

.col-search::placeholder {
  color: var(--text-muted);
}

/* -- Mode Toggle --------------------------------------------------------- */

.col-mode-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.col-mode-btn {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
}

.col-mode-btn + .col-mode-btn {
  border-left: 1px solid var(--border);
}

.col-mode-btn:hover {
  color: var(--text);
  background: var(--bg-warm);
}

.col-mode-btn.active {
  background: var(--accent);
  color: white;
}

/* -- Category Section ---------------------------------------------------- */

.col-category {
  margin-bottom: var(--space-2xl);
}

.col-cat-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--accent);
  margin-bottom: var(--space-md);
}

.col-cat-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.col-cat-icon svg {
  width: 16px;
  height: 16px;
}

/* Category color variants */
.col-cat-icon--knowledge { background: var(--type-knowledge); }
.col-cat-icon--narrative { background: var(--type-narrative); }
.col-cat-icon--experience { background: var(--type-experience); }
.col-cat-icon--curation { background: var(--type-curation); }
.col-cat-icon--creation { background: var(--type-creation); }
.col-cat-icon--performance { background: var(--type-performance); }
.col-cat-icon--relationship { background: var(--type-relationship); }

.col-cat-header:has(.col-cat-icon--knowledge) { border-bottom-color: var(--type-knowledge); }
.col-cat-header:has(.col-cat-icon--narrative) { border-bottom-color: var(--type-narrative); }
.col-cat-header:has(.col-cat-icon--experience) { border-bottom-color: var(--type-experience); }
.col-cat-header:has(.col-cat-icon--curation) { border-bottom-color: var(--type-curation); }
.col-cat-header:has(.col-cat-icon--creation) { border-bottom-color: var(--type-creation); }
.col-cat-header:has(.col-cat-icon--performance) { border-bottom-color: var(--type-performance); }
.col-cat-header:has(.col-cat-icon--relationship) { border-bottom-color: var(--type-relationship); }

.col-cat-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
}

.col-cat-count {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* -- Term Card ----------------------------------------------------------- */

.col-term {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--ease);
}

.col-term:last-child {
  border-bottom: none;
}

.col-term-en {
  flex-shrink: 0;
  min-width: 140px;
}

.col-term-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.3;
}

.col-term-kr {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.col-term-body {
  flex: 1;
  min-width: 0;
}

.col-term-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
  font-weight: 400;
}

.col-term-example {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-warm);
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', monospace;
  font-size: 0.78rem;
  color: var(--text-secondary);
  border-left: 2px solid var(--border);
}

.col-term-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: var(--space-xs);
}

.col-term-tag {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--accent-light);
  color: var(--text-secondary);
}

/* -- Easy Explanation (Feynman) ------------------------------------------ */

.col-term-easy {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: #F5F4F0;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.84rem;
  line-height: 1.8;
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);
}

.col-term-easy strong {
  color: var(--accent);
  font-weight: 700;
}

.col-easy-label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: white;
  background: var(--accent);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-right: 0.5rem;
  margin-bottom: 0.15rem;
  vertical-align: middle;
}

/* ==========================================================================
   Workflow Diagrams — Professional Redesign
   Typography hierarchy, color zones, numbered steps, concrete scenarios
   ========================================================================== */

.col-diagrams {
  margin-bottom: var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.col-diagrams-intro {
  margin-bottom: var(--space-sm);
}

.col-diagrams-title {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.col-diagrams-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 300;
}

/* -- Diagram Card -------------------------------------------------------- */

.col-diagram {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  transition: box-shadow var(--ease);
}

.col-diagram:hover {
  box-shadow: var(--shadow-md);
}

.col-diagram-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.col-diagram-num {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.06);
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.col-diagram-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.15rem;
}

.col-diagram-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
}

.col-diagram-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.6;
}

/* -- Takeaway ------------------------------------------------------------ */

.dg-takeaway {
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: #F6F6F4;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.dg-takeaway strong {
  color: var(--accent);
  font-weight: 700;
}

.dg-takeaway em {
  color: var(--text-muted);
  font-style: normal;
}

/* ==========================================================================
   Universal Card Flow System
   ========================================================================== */

.dg-cards {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-xs);
}

.dg-cards--collab {
  flex-wrap: wrap;
  row-gap: var(--space-sm);
}

.dg-card {
  flex: 1;
  min-width: 140px;
  padding: var(--space-md);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  background: white;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dg-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: 0.2rem;
}

.dg-card-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-warm);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.dg-card-num--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.dg-card-num--done {
  background: var(--type-narrative);
  border-color: var(--type-narrative);
  color: white;
}

.dg-card-zone {
  font-family: var(--font-ui);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0.1rem 0.4rem;
  background: var(--bg-warm);
  border-radius: 3px;
}

.dg-card-zone--remote {
  background: var(--accent);
  color: white;
}

.dg-card-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text);
}

.dg-card-analogy {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--type-narrative);
  line-height: 1.4;
  padding: 0.2rem 0;
}

.dg-card-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Card variants */
.dg-card--local {
  background: #FAFAF8;
  border-color: var(--border-light);
}

.dg-card--remote {
  background: var(--accent);
  border-color: var(--accent);
}
.dg-card--remote .dg-card-title { color: white; }
.dg-card--remote .dg-card-analogy { color: rgba(255,255,255,0.7); }
.dg-card--remote .dg-card-desc { color: rgba(255,255,255,0.5); }

.dg-card--dark {
  background: var(--accent);
  border-color: var(--accent);
}
.dg-card--dark .dg-card-title { color: white; }
.dg-card--dark .dg-card-analogy { color: rgba(255,255,255,0.7); }
.dg-card--dark .dg-card-desc { color: rgba(255,255,255,0.5); }

.dg-card--highlight {
  border-color: var(--type-knowledge);
  background: rgba(91,143,213,0.03);
}

.dg-card--done {
  border-color: var(--type-narrative);
  background: rgba(61,139,107,0.04);
}

/* Arrow between cards */
.dg-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  color: var(--text-muted);
  opacity: 0.4;
}

.dg-card-arrow--accent {
  color: var(--accent);
  opacity: 1;
}

/* ==========================================================================
   Sync Simple (Diagram 3 — redesigned)
   ========================================================================== */

.dg-sync-simple {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.dg-sync-box {
  flex: 1;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-lg);
}

.dg-sync-box--local {
  background: linear-gradient(180deg, #F6F6F4 0%, #EFEEEB 100%);
  border: 1.5px solid var(--border);
}

.dg-sync-box--remote {
  background: var(--accent);
  border: 1.5px solid var(--accent);
}

.dg-sync-box-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.dg-sync-box--local .dg-sync-box-title { color: var(--text); }
.dg-sync-box--remote .dg-sync-box-title { color: white; }

.dg-sync-box-desc {
  font-size: 0.72rem;
}
.dg-sync-box--local .dg-sync-box-desc { color: var(--text-muted); }
.dg-sync-box--remote .dg-sync-box-desc { color: rgba(255,255,255,0.55); }

/* Middle bridge */
.dg-sync-middle {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-sm);
  flex-shrink: 0;
  min-width: 220px;
  justify-content: center;
}

.dg-sync-divider {
  height: 1px;
  background: var(--border-light);
  margin: var(--space-2xs) 0;
}

.dg-sync-cmd {
  display: grid;
  grid-template-columns: 20px auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 var(--space-xs);
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.dg-sync-cmd-arrow {
  font-size: 0.85rem;
  font-weight: 700;
  grid-row: 1 / 3;
  text-align: center;
}

.dg-sync-cmd-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
}

.dg-sync-cmd-desc {
  grid-column: 3;
  grid-row: 1;
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: right;
}

.dg-sync-cmd-analogy {
  grid-column: 2 / 4;
  grid-row: 2;
  font-size: 0.68rem;
  font-weight: 500;
}

/* Cmd color variants */
.dg-sync-cmd--push {
  background: rgba(24,24,27,0.03);
}
.dg-sync-cmd--push .dg-sync-cmd-name { color: var(--accent); }
.dg-sync-cmd--push .dg-sync-cmd-arrow { color: var(--accent); }
.dg-sync-cmd--push .dg-sync-cmd-analogy { color: var(--accent); opacity: 0.5; }

.dg-sync-cmd--pull {
  background: rgba(91,143,213,0.05);
}
.dg-sync-cmd--pull .dg-sync-cmd-name { color: var(--type-knowledge); }
.dg-sync-cmd--pull .dg-sync-cmd-arrow { color: var(--type-knowledge); }
.dg-sync-cmd--pull .dg-sync-cmd-analogy { color: var(--type-knowledge); opacity: 0.5; }

.dg-sync-cmd--fetch {
  background: rgba(212,162,78,0.04);
}
.dg-sync-cmd--fetch .dg-sync-cmd-name { color: var(--type-experience); }
.dg-sync-cmd--fetch .dg-sync-cmd-arrow { color: var(--type-experience); }
.dg-sync-cmd--fetch .dg-sync-cmd-analogy { color: var(--type-experience); opacity: 0.6; }

.dg-sync-cmd--clone {
  background: rgba(61,139,107,0.04);
}
.dg-sync-cmd--clone .dg-sync-cmd-name { color: var(--type-narrative); }
.dg-sync-cmd--clone .dg-sync-cmd-arrow { color: var(--type-narrative); }
.dg-sync-cmd--clone .dg-sync-cmd-analogy { color: var(--type-narrative); opacity: 0.6; }

/* ==========================================================================
   LEGACY — Diagram 1 Pipeline (keeping for compat, hidden if unused)
   ========================================================================== */

/* Zone labels */
.dg-zones {
  display: flex;
  margin-bottom: var(--space-xs);
  gap: 2px;
}

.dg-zone {
  flex: 1;
  padding: 0.3rem 0;
  text-align: center;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.dg-zone--local {
  flex: 3;
  background: rgba(61, 139, 107, 0.06);
}

.dg-zone--remote {
  flex: 1;
  background: rgba(91, 143, 213, 0.06);
}

.dg-zone-label {
  font-family: var(--font-ui);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

/* Pipeline */
.dg-pipeline {
  display: flex;
  align-items: flex-start;
}

.dg-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.dg-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-warm);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
  position: relative;
  z-index: 1;
}

.dg-step-num--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.dg-step-card {
  text-align: center;
  padding: var(--space-sm) var(--space-sm);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  background: white;
  width: 100%;
  transition: all var(--ease);
}

.dg-step-card--staged {
  background: rgba(61, 139, 107, 0.04);
  border-color: rgba(61, 139, 107, 0.2);
}

.dg-step-card--commit {
  background: rgba(91, 143, 213, 0.04);
  border-color: rgba(91, 143, 213, 0.2);
}

.dg-step-card--remote {
  background: var(--accent);
  border-color: var(--accent);
}

.dg-step-card--remote .dg-step-name { color: white; }
.dg-step-card--remote .dg-step-detail { color: rgba(255,255,255,0.7); }

.dg-step-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 0.15rem;
}

.dg-step-detail {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.5;
  font-weight: 400;
}

/* Connector between steps */
.dg-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: var(--space-xs) 0;
  width: 100%;
}

.dg-connector-line {
  width: 1.5px;
  height: 16px;
  background: var(--border);
}

.dg-connector-line--accent {
  background: var(--accent);
  width: 2px;
}

.dg-connector-cmd {
  font-family: 'DM Sans', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 0.1rem 0.4rem;
  background: var(--bg-warm);
  border-radius: 3px;
}

.dg-connector-cmd--accent {
  color: white;
  background: var(--accent);
}

/* ==========================================================================
   Diagram 2 — Branch Timeline
   ========================================================================== */

.dg-branch {
  padding: var(--space-md) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dg-branch-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.dg-branch-label {
  font-family: 'DM Sans', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  min-width: 130px;
  text-align: right;
  flex-shrink: 0;
}

.dg-branch-row--main .dg-branch-label { color: var(--accent); }
.dg-branch-row--feature .dg-branch-label { color: var(--type-knowledge); }

.dg-branch-line {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.dg-branch-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: var(--space-sm);
  flex-shrink: 0;
}

/* Dots */
.dg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dg-dot--filled { background: var(--accent); }
.dg-dot--split { background: var(--accent); box-shadow: 0 0 0 3px rgba(24,24,27,0.1); }
.dg-dot--merge { background: var(--accent); box-shadow: 0 0 0 3px rgba(61,139,107,0.2); }
.dg-dot--branch { background: var(--type-knowledge); }
.dg-dot--work { background: var(--type-knowledge); opacity: 0.6; }
.dg-dot--pr { background: var(--type-knowledge); box-shadow: 0 0 0 3px rgba(91,143,213,0.2); }

/* Lines */
.dg-line {
  flex: 1;
  height: 2px;
  background: var(--accent);
  min-width: 24px;
}

.dg-line--dashed {
  background: repeating-linear-gradient(90deg, var(--border) 0, var(--border) 4px, transparent 4px, transparent 8px);
}

.dg-line--feature {
  background: var(--type-knowledge);
  opacity: 0.4;
}

.dg-spacer {
  width: 10px;
  flex-shrink: 0;
}

/* Event labels */
.dg-branch-events {
  display: flex;
  align-items: flex-start;
  padding-left: calc(130px + var(--space-sm));
}

.dg-event {
  font-family: var(--font-ui);
  font-size: 0.58rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  flex: 1;
  min-width: 24px;
}

.dg-event--accent {
  color: var(--accent);
  font-weight: 700;
}

/* Collab steps under timeline */
.dg-collab-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
}

.dg-collab-step {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
}

.dg-collab-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 1px;
}

.dg-collab-num--done {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.dg-collab-step strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 0.1rem;
}

.dg-collab-step p {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   Diagram 3 — Sync (Local ↔ Remote)
   ========================================================================== */

.dg-sync {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.dg-sync-panel {
  flex: 1;
  padding: var(--space-lg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: #FAFAF8;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dg-sync-panel--remote {
  background: var(--accent);
  border-color: var(--accent);
}

.dg-sync-panel--remote .dg-sync-title { color: white; }
.dg-sync-panel--remote .dg-sync-icon { color: rgba(255,255,255,0.5); }
.dg-sync-panel--remote .dg-sync-item { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.1); }
.dg-sync-panel--remote .dg-sync-item small { color: rgba(255,255,255,0.5); }
.dg-sync-panel--remote .dg-sync-dot { background: rgba(255,255,255,0.3); }

.dg-sync-icon {
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.dg-sync-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: var(--space-md);
}

.dg-sync-items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dg-sync-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.dg-sync-item:last-child { border-bottom: none; }

.dg-sync-item small {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.68rem;
  margin-left: auto;
}

.dg-sync-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Bridge (arrows between panels) */
.dg-sync-bridge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0 var(--space-xs);
  flex-shrink: 0;
  min-width: 180px;
}

.dg-sync-row {
  display: flex;
}

.dg-sync-arrow-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  transition: all var(--ease);
}

.dg-sync-arrow-bar svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.dg-sync-arrow-label {
  font-family: 'DM Sans', monospace;
  font-weight: 700;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.dg-sync-arrow-desc {
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: auto;
}

/* Arrow variants */
.dg-sync-arrow-bar--push {
  background: rgba(24,24,27,0.04);
}
.dg-sync-arrow-bar--push .dg-sync-arrow-label { color: var(--accent); }

.dg-sync-arrow-bar--pull {
  background: rgba(91,143,213,0.06);
}
.dg-sync-arrow-bar--pull .dg-sync-arrow-label { color: var(--type-knowledge); }

.dg-sync-arrow-bar--fetch {
  background: rgba(212,162,78,0.06);
}
.dg-sync-arrow-bar--fetch .dg-sync-arrow-label { color: var(--type-experience); }

.dg-sync-arrow-bar--clone {
  background: rgba(61,139,107,0.06);
}
.dg-sync-arrow-bar--clone .dg-sync-arrow-label { color: var(--type-narrative); }

/* ==========================================================================
   Diagram 4 — OSS Flow (vertical)
   ========================================================================== */

.dg-oss-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dg-oss-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  width: 100%;
  max-width: 480px;
}

.dg-oss-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-warm);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.dg-oss-num--done {
  background: var(--type-narrative);
  border-color: var(--type-narrative);
  color: white;
}

.dg-oss-card {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: white;
}

.dg-oss-card--pr {
  border-color: rgba(91,143,213,0.3);
  background: rgba(91,143,213,0.03);
}

.dg-oss-card--done {
  border-color: rgba(61,139,107,0.3);
  background: rgba(61,139,107,0.04);
}

.dg-oss-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.15rem;
}

.dg-oss-body {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.dg-oss-body strong {
  color: var(--text);
}

.dg-oss-where {
  margin-top: 0.3rem;
  font-family: 'DM Sans', monospace;
  font-size: 0.62rem;
  color: var(--text-muted);
}

.dg-oss-arrow {
  display: flex;
  justify-content: center;
  padding: var(--space-2xs) 0;
  color: var(--border);
}

/* -- Callout ------------------------------------------------------------- */

.dg-callout {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: rgba(232,121,74,0.04);
  border: 1px solid rgba(232,121,74,0.15);
  border-radius: var(--radius-md);
}

.dg-callout-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
  color: var(--type-performance);
}

.dg-callout-header strong {
  font-size: 0.82rem;
}

.dg-callout p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.dg-callout p strong {
  color: var(--type-performance);
}

/* -- No Results ---------------------------------------------------------- */

.col-no-results {
  text-align: center;
  padding: var(--space-3xl) 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .col-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .col-search-wrap {
    max-width: none;
  }

  .col-mode-toggle {
    align-self: flex-start;
  }

  .col-term {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .col-term-en {
    min-width: auto;
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
  }

  .col-term-kr {
    margin-top: 0;
  }

  /* Diagrams */
  .col-diagram {
    padding: var(--space-md);
  }

  .col-diagram-header {
    gap: var(--space-sm);
  }

  .col-diagram-num {
    font-size: 1.2rem;
  }

  /* Card flow */
  .dg-cards {
    flex-direction: column;
    gap: 0;
  }

  .dg-card {
    min-width: auto;
  }

  .dg-card-arrow {
    width: auto;
    height: 20px;
    transform: rotate(90deg);
  }

  /* Sync simple */
  .dg-sync-simple {
    flex-direction: column;
  }

  .dg-sync-middle {
    min-width: auto;
    padding: var(--space-sm) 0;
  }

  /* Legacy compat */
  .dg-pipeline {
    flex-direction: column;
    gap: 0;
  }

  .dg-collab-steps {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .dg-sync {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .dg-sync-bridge {
    min-width: auto;
  }
}

@media (min-width: 768px) {
  .col-hero {
    padding-top: calc(var(--nav-h) + var(--space-4xl));
    padding-bottom: var(--space-3xl);
  }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .nav, .footer, .col-search-wrap, .col-mode-toggle, .cta-banner-inner, .col-toolbar {
    display: none !important;
  }

  .col-hero {
    padding-top: 0;
  }

  .col-term {
    page-break-inside: avoid;
  }
}