/* ============================================================
   PER-PROJECT BRAND THEMES — each mockup feels like a real product
   ============================================================ */

/* ---------- 1. 모찌배달 — 따뜻한 푸드 앱 ---------- */
.mu-theme-delivery .mu-phone-screen {
  background: #FFF6EF;
  color: #3A2818;
  font-family: 'Do Hyeon', 'Jua', sans-serif;
}
.mu-theme-delivery .mu-statusbar { color: #3A2818; }
.mu-theme-delivery .mu-h-greet { font-family: 'Do Hyeon', sans-serif; font-weight: 400; color: #3A2818; }
.mu-theme-delivery .mu-h-loc { color: #8B6A4F; }
.mu-theme-delivery .mu-search {
  background: white;
  border-color: #FFE2CB;
  border-radius: 999px;
  color: #B89882;
}
.mu-theme-delivery .mu-cat {
  background: white;
  border: 1.5px solid #FFE2CB;
  border-radius: 18px;
  color: #6B4A2E;
}
.mu-theme-delivery .mu-cat.on {
  background: #FF8C5A;
  border-color: #FF8C5A;
  color: white;
}
.mu-theme-delivery .mu-section-t { font-family: 'Do Hyeon', sans-serif; font-weight: 400; color: #3A2818; }
.mu-theme-delivery .mu-more { color: #FF8C5A; }
.mu-theme-delivery .mu-prod-card {
  background: white;
  border-color: #FFE2CB;
  border-radius: 18px;
}
.mu-theme-delivery .mu-prod-name { font-family: 'Do Hyeon', sans-serif; font-weight: 400; }
.mu-theme-delivery .mu-prod-meta strong { color: #FF6B2C; font-family: 'Do Hyeon', sans-serif; }
.mu-theme-delivery .mu-badge { color: #FF6B2C; }
.mu-theme-delivery .mu-nav { background: white; border-color: #FFE2CB; }
.mu-theme-delivery .mu-nav > div.on { color: #FF8C5A; }
.mu-theme-delivery .mu-nav > div.cart {
  background: #FF8C5A;
  box-shadow: 0 4px 12px rgba(255, 140, 90, 0.45);
}
.mu-avatar.peach { background: linear-gradient(135deg, #FFD1B0, #FF9C6E); }

/* ---------- 2. 별다방 리워드 — 카페 프리미엄 (그린 + 세리프) ---------- */
.mu-theme-cafe .mu-phone-screen {
  background: #F8F2E6;
  font-family: 'Nanum Myeongjo', serif;
  color: #2A1F15;
}
.mu-theme-cafe .mu-statusbar { color: white; }
.mu-theme-cafe .mu-cafe-bg {
  background: linear-gradient(180deg, #1E3A2E 0%, #2D5544 100%);
}
.mu-theme-cafe .mu-cafe-hello { font-family: 'Nanum Myeongjo', serif; font-style: italic; opacity: 0.9; }
.mu-theme-cafe .mu-cafe-name { font-family: 'Nanum Myeongjo', serif; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.mu-theme-cafe .mu-cafe-card {
  background: #FFFCF5;
  border: 1px solid #E8DEC8;
}
.mu-theme-cafe .mu-cafe-tier { color: #B8923A; font-family: 'Nanum Myeongjo', serif; font-weight: 700; font-style: italic; }
.mu-theme-cafe .mu-cafe-bal { font-family: 'Nanum Myeongjo', serif; font-weight: 800; color: #1E3A2E; font-size: 18px; }
.mu-theme-cafe .mu-stamp.on { background: #1E3A2E; border-color: #1E3A2E; }
.mu-theme-cafe .mu-cafe-progress { background: #E8DEC8; }
.mu-theme-cafe .mu-cafe-progress > div {
  background: linear-gradient(90deg, #1E3A2E, #4A8B6E);
}
.mu-theme-cafe .mu-cafe-prog-t { font-family: 'Nanum Myeongjo', serif; color: #5C4A36; }
.mu-theme-cafe .mu-section-t { font-family: 'Nanum Myeongjo', serif; font-weight: 800; color: #2A1F15; }
.mu-theme-cafe .mu-coupon strong { font-family: 'Nanum Myeongjo', serif; font-weight: 800; color: #1E3A2E; }
.mu-theme-cafe .mu-coupon span { font-family: 'Nanum Myeongjo', serif; color: #5C4A36; }
.mu-theme-cafe .mu-nav {
  background: #FFFCF5;
  border-color: #E8DEC8;
}
.mu-theme-cafe .mu-nav > div.on { color: #1E3A2E; }

/* ---------- 3. 또또톡 — 활기찬 보라 채팅 ---------- */
.mu-theme-chat .mu-phone-screen {
  background: #F4EFFF;
  font-family: 'Hi Melody', 'Gowun Dodum', cursive;
  color: #2C1A52;
}
.mu-theme-chat .mu-chat-bar {
  background: linear-gradient(135deg, #7C4DFF 0%, #9B6FFF 100%);
  border-bottom: none;
  color: white;
}
.mu-theme-chat .mu-chat-bar > span:first-child,
.mu-theme-chat .mu-chat-bar > span:last-child { color: white; }
.mu-theme-chat .mu-chat-name { color: white; font-family: 'Hi Melody', cursive; font-size: 14px; font-weight: 500; }
.mu-theme-chat .mu-online { background: #B4FF6F; box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }
.mu-theme-chat .mu-chat-status { color: rgba(255,255,255,0.85); font-size: 10px; }
.mu-theme-chat .mu-chat-body {
  background: linear-gradient(180deg, #F4EFFF 0%, #FFE4F3 100%);
}
.mu-theme-chat .mu-chat-date { font-family: 'Hi Melody', cursive; color: #8B7BC4; }
.mu-theme-chat .mu-bubble {
  font-family: 'Hi Melody', cursive;
  font-size: 13px;
  border-radius: 22px;
}
.mu-theme-chat .mu-bubble.them {
  background: white;
  border: 1px solid #E5D9FF;
  color: #2C1A52;
}
.mu-theme-chat .mu-bubble.me {
  background: linear-gradient(135deg, #7C4DFF, #B05FFF);
  border-radius: 22px 22px 6px 22px;
}
.mu-theme-chat .mu-typing { background: white; border-color: #E5D9FF; }
.mu-theme-chat .mu-typing span { background: #7C4DFF; }
.mu-theme-chat .mu-chat-input {
  background: white;
  border-top-color: #E5D9FF;
}
.mu-theme-chat .mu-chat-input > span:first-child {
  background: linear-gradient(135deg, #FFE4F3, #FFC2E0);
  color: #FF4E91;
}
.mu-theme-chat .mu-chat-input input {
  font-family: 'Hi Melody', cursive;
  background: #F4EFFF;
  border-color: #E5D9FF;
  font-size: 11px;
}
.mu-theme-chat .mu-send {
  background: linear-gradient(135deg, #FF4E91, #FF7BB8);
  box-shadow: 0 2px 6px rgba(255, 78, 145, 0.4);
}

/* ---------- 4. 콘텐츠랩 — 다크 모드 SaaS ---------- */
.mu-theme-dash {
  background: #0B0F19 !important;
  color: #E5E7EB !important;
  font-family: 'Noto Sans KR', 'Inter', sans-serif !important;
  border: 1px solid #1F2937;
}
.mu-theme-dash .mu-dash-top {
  background: #111827;
  border-bottom-color: #1F2937;
}
.mu-theme-dash .mu-dash-logo {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 900;
  color: white;
}
.mu-theme-dash .mu-logo-mark {
  background: linear-gradient(135deg, #6366F1, #A855F7);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
}
.mu-theme-dash .mu-dash-tabs span {
  color: #94A3B8;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 500;
}
.mu-theme-dash .mu-dash-tabs span.on {
  background: #6366F1;
  color: white;
}
.mu-theme-dash .mu-avatar { background: linear-gradient(135deg, #6366F1, #A855F7); border-color: #1F2937; }
.mu-theme-dash .mu-stat-card,
.mu-theme-dash .mu-chart-card {
  background: #111827;
  border: 1px solid #1F2937;
}
.mu-theme-dash .mu-stat-k { color: #94A3B8; font-family: 'Noto Sans KR', sans-serif; }
.mu-theme-dash .mu-stat-v {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 900;
  color: white;
  letter-spacing: -0.03em;
}
.mu-theme-dash .mu-stat-d.up { color: #4ADE80; }
.mu-theme-dash .mu-stat-d.down { color: #F87171; }
.mu-theme-dash .mu-chart-head { color: #E5E7EB; font-family: 'Noto Sans KR', sans-serif; }
.mu-theme-dash .mu-legend { color: #94A3B8; }
.mu-theme-dash .mu-legend .d1 { background: #6366F1; }
.mu-theme-dash .mu-legend .d2 { background: #EC4899; }
.mu-theme-dash .mu-legend .d3 { background: #06B6D4; }

/* ---------- 5. 운동친구 — 강렬한 스포츠 ---------- */
.mu-theme-fit .mu-phone-screen {
  background: #0A0A0A;
  color: white;
  font-family: 'Black Han Sans', 'Noto Sans KR', sans-serif;
}
.mu-theme-fit .mu-statusbar { color: white; }
.mu-theme-fit .mu-fit-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(252, 211, 77, 0.3), transparent 50%),
    linear-gradient(180deg, #DC2626 0%, #991B1B 100%);
  position: relative;
}
.mu-theme-fit .mu-fit-hero::after {
  content: 'PUSH';
  position: absolute;
  font-family: 'Black Han Sans', sans-serif;
  font-size: 64px;
  color: rgba(255,255,255,0.06);
  bottom: -10px;
  left: 14px;
  letter-spacing: -0.05em;
  pointer-events: none;
}
.mu-theme-fit .mu-fit-hello { color: rgba(255,255,255,0.85); font-family: 'Noto Sans KR', sans-serif; font-weight: 500; }
.mu-theme-fit .mu-fit-name { font-family: 'Black Han Sans', sans-serif; color: white; font-size: 16px; letter-spacing: -0.02em; }
.mu-theme-fit .mu-ring-c strong { color: #FDE047; font-family: 'Black Han Sans', sans-serif; }
.mu-theme-fit .mu-ring-c span { color: rgba(255,255,255,0.7); }
.mu-theme-fit .mu-fit-stats {
  background: #141414;
  border-bottom-color: #1F1F1F;
}
.mu-theme-fit .mu-fit-stats > div + div { border-left-color: #1F1F1F; }
.mu-theme-fit .mu-fit-stats strong {
  font-family: 'Black Han Sans', sans-serif;
  color: #FDE047;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.mu-theme-fit .mu-fit-stats span { color: rgba(255,255,255,0.5); font-family: 'Noto Sans KR', sans-serif; font-weight: 500; }
.mu-theme-fit .mu-section-t { color: white; font-family: 'Black Han Sans', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: -0.02em; }
.mu-theme-fit .mu-mate {
  background: #141414;
  border-color: #1F1F1F;
}
.mu-theme-fit .mu-mate-n { color: white; font-family: 'Black Han Sans', sans-serif; font-weight: 400; }
.mu-theme-fit .mu-mate-d { color: rgba(255,255,255,0.5); }
.mu-theme-fit .mu-mate-btn {
  background: #FDE047;
  color: #0A0A0A;
  font-family: 'Black Han Sans', sans-serif;
  font-weight: 400;
}
.mu-theme-fit .mu-nav {
  background: #141414;
  border-color: #1F1F1F;
}
.mu-theme-fit .mu-nav > div { color: rgba(255,255,255,0.4); }
.mu-theme-fit .mu-nav > div.on { color: #FDE047; }
.mu-theme-fit .mu-nav > div.cart {
  background: #DC2626;
  color: white;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
}



/* ============================================================
   6. 모찌배달 어드민 — Admin Dashboard
   ============================================================ */
.mu-admin {
  width: 100%;
  max-width: 760px;
  height: 460px;
  background: #FAF7F2;
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(46,37,72,0.30), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 11px;
  color: #2A1F15;
}
.mu-admin-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #EFE9DC;
  border-bottom: 1px solid #DDD2BC;
}
.mu-admin-dots { display: flex; gap: 6px; }
.mu-admin-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #D5C9AE;
}
.mu-admin-dots span:nth-child(1) { background: #F87171; }
.mu-admin-dots span:nth-child(2) { background: #FBBF24; }
.mu-admin-dots span:nth-child(3) { background: #4ADE80; }
.mu-admin-url {
  flex: 1;
  background: white;
  border-radius: 6px;
  padding: 4px 12px;
  font-family: 'Noto Sans KR', monospace;
  font-size: 10px;
  color: #8B6E3A;
  border: 1px solid #DDD2BC;
}
.mu-admin-body {
  flex: 1;
  display: grid;
  grid-template-columns: 170px 1fr;
  min-height: 0;
}
.mu-admin-side {
  background: #2D2419;
  color: #D9C9A8;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mu-admin-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Do Hyeon', sans-serif;
  font-size: 16px;
  color: white;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mu-admin-logo-mark {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #FF8C5A, #FBBF24);
  border-radius: 6px;
}
.mu-admin-side nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.mu-admin-side nav a {
  font-size: 11px;
  padding: 7px 10px;
  border-radius: 6px;
  color: rgba(217, 201, 168, 0.7);
  letter-spacing: -0.01em;
}
.mu-admin-side nav a:hover { background: rgba(255,255,255,0.06); color: white; }
.mu-admin-side nav a.on {
  background: #FF8C5A;
  color: white;
  font-weight: 700;
}
.mu-admin-user {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
}
.mu-admin-user-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E0D7FF, #8B7BC4);
}
.mu-admin-user-r { font-size: 9px; color: rgba(217, 201, 168, 0.6); margin-top: 2px; }

.mu-admin-main {
  padding: 22px 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.mu-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.mu-admin-header h3 {
  font-family: 'Do Hyeon', sans-serif;
  font-size: 22px;
  color: #2A1F15;
  margin: 0;
}
.mu-admin-header p {
  font-size: 11px;
  color: #8B6E3A;
  margin: 4px 0 0;
}
.mu-admin-header p strong { color: #FF6B2C; }
.mu-admin-btn {
  background: #2D2419;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.mu-admin-filters {
  display: flex;
  gap: 6px;
}
.mu-admin-filters span {
  padding: 5px 12px;
  border-radius: 999px;
  background: white;
  border: 1px solid #DDD2BC;
  font-size: 10px;
  color: #5C4A36;
}
.mu-admin-filters span.on {
  background: #2D2419;
  color: white;
  border-color: #2D2419;
}
.mu-admin-table {
  background: white;
  border: 1px solid #DDD2BC;
  border-radius: 10px;
  overflow: hidden;
  flex: 1;
}
.mu-admin-tr {
  display: grid;
  grid-template-columns: 80px 80px 1fr 80px 80px;
  align-items: center;
  padding: 10px 14px;
  font-size: 11px;
  border-bottom: 1px solid #EFE9DC;
}
.mu-admin-tr:last-child { border-bottom: none; }
.mu-admin-th {
  background: #FAF7F2;
  font-size: 10px;
  color: #8B6E3A;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mu-admin-id { font-family: 'Noto Sans KR', monospace; color: #8B6E3A; }
.mu-admin-items { color: #5C4A36; }
.mu-admin-status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}
.mu-admin-status--on { background: #FFE5D0; color: #C2410C; }
.mu-admin-status--wait { background: #FEF3C7; color: #B45309; }
.mu-admin-status--done { background: #DCFCE7; color: #15803D; }

/* ============================================================
   7. 올리브 베이커리 — Editorial Brand site (type-led, Aesop)
   ============================================================ */
.mu-brand {
  width: 100%;
  max-width: 760px;
  height: 500px;
  background: #F5EFE3;
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(46,37,72,0.30), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Noto Sans KR', sans-serif;
  color: #1F1813;
}
.mu-brand-chrome {
  background: #ECE2CC;
  padding: 9px 14px;
  border-bottom: 1px solid #D4C5A5;
  display: flex;
  align-items: center;
}
.mu-brand-page {
  flex: 1;
  background: #F5EFE3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Nav */
.mu-brand-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px;
  background: #F5EFE3;
}
.mu-brand-nav-side {
  display: flex;
  gap: 24px;
  font-size: 10px;
  letter-spacing: 0.25em;
  font-weight: 500;
  color: #5C4B36;
}
.mu-brand-nav-side.r { justify-content: flex-end; }
.mu-brand-logo {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.4em;
  color: #1F1813;
  text-align: center;
  padding-left: 0.4em;
}

/* Hero — refined split with generous whitespace */
.mu-brand-hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  min-height: 0;
  border-top: 1px solid rgba(31, 24, 19, 0.10);
  border-bottom: 1px solid rgba(31, 24, 19, 0.10);
}
.mu-brand-hero-text {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(31, 24, 19, 0.08);
}
.mu-brand-num {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #8B7355;
  font-weight: 600;
  margin-bottom: 22px;
}
.mu-brand-h {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  color: #1F1813;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.mu-brand-p {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 12px;
  line-height: 1.85;
  color: #5C4B36;
  margin: 0 0 24px;
  font-style: italic;
}
.mu-brand-cta-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mu-brand-cta {
  padding: 10px 22px;
  background: transparent;
  border: 1px solid #1F1813;
  border-radius: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #1F1813;
  font-family: var(--f-body);
}
.mu-brand-cta.primary {
  background: #1F1813;
  color: #F5EFE3;
}

/* Hero illustration side */
.mu-brand-hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5EFE3;
  padding: 30px;
}
.mu-brand-hero-art::before {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(31, 24, 19, 0.08);
}
.mu-brand-svg {
  width: 75%;
  max-width: 280px;
  height: auto;
}
.mu-brand-art-caption {
  position: absolute;
  bottom: 32px;
  left: 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #8B7355;
}
.mu-brand-art-caption span:last-child {
  color: #1F1813;
  font-weight: 700;
  font-size: 10px;
  font-style: italic;
}

/* Meta strip */
.mu-brand-meta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 12px 32px;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: #8B7355;
  background: #F5EFE3;
}
.mu-brand-meta-row .dot { color: #C9B690; }

/* Products row */
.mu-brand-products {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(31, 24, 19, 0.10);
  background: #ECE2CC;
}
.mu-brand-product {
  display: flex;
  padding: 18px 20px;
  gap: 16px;
  align-items: center;
  background: #F5EFE3;
  border-right: 1px solid rgba(31, 24, 19, 0.08);
}
.mu-brand-product:last-child { border-right: none; }
.mu-brand-product .prod-art {
  width: 64px; height: 50px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
}
.mu-brand-prod-svg {
  width: 100%;
  height: 100%;
}
.mu-brand-product .meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mu-brand-product .meta .num {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #8B7355;
  font-weight: 600;
  font-family: 'Nanum Myeongjo', serif;
  font-style: italic;
}
.mu-brand-product .meta strong {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 13px;
  font-weight: 800;
  color: #1F1813;
  letter-spacing: -0.01em;
}
.mu-brand-product .meta em {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 10px;
  color: #5C4B36;
  font-style: italic;
}
.mu-brand-product .meta .price {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 11px;
  color: #1F1813;
  font-weight: 700;
  margin-top: 3px;
}

/* Feat card resizing for browser-style mockups */
.portfolio-card.feat .mu-admin,
.portfolio-card.feat .mu-brand,
.portfolio-card.feat .mu-dash {
  max-width: 100%;
}

/* ============================================================
   OLIVE BAKERY v2 — Premium Dark Editorial (.mu-bv2)
   ============================================================ */

/* Root override — dark luxury palette */
.mu-bv2 {
  background: #110E0A;
  font-family: 'Nanum Myeongjo', serif;
}

/* Chrome bar */
.mu-bv2-chrome {
  background: #0A0806;
  border-bottom: 1px solid rgba(200,146,58,0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}
.mu-bv2-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  display: block;
}
.mu-bv2-dots span:nth-child(1) { background: #3A1A1A; }
.mu-bv2-dots span:nth-child(2) { background: #3A2F1A; }
.mu-bv2-dots span:nth-child(3) { background: #1A3A1A; }
.mu-bv2-url {
  flex: 1;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(200,146,58,0.55);
  font-family: 'Nanum Myeongjo', serif;
}

/* Page wrapper */
.mu-bv2-page {
  background: #1A1510;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Nav bar */
.mu-bv2-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 28px;
  border-bottom: 1px solid rgba(200,146,58,0.12);
  background: rgba(26,21,16,0.97);
}
.mu-bv2-nav-links {
  display: flex;
  gap: 18px;
}
.mu-bv2-nav-links span,
.mu-bv2-nav-right span:not(.mu-bv2-reserve) {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(200,146,58,0.6);
  font-family: 'Nanum Myeongjo', serif;
  cursor: pointer;
}
.mu-bv2-logo {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.35em;
  color: #C8923A;
}
.mu-bv2-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mu-bv2-reserve {
  font-size: 8.5px;
  letter-spacing: 0.22em;
  color: #1A1510;
  background: #C8923A;
  padding: 5px 11px;
  border-radius: 2px;
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 700;
}

/* Hero section */
.mu-bv2-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 28px 16px;
}
.mu-bv2-kicker {
  font-size: 8.5px;
  letter-spacing: 0.28em;
  color: rgba(200,146,58,0.45);
  font-family: 'Nanum Myeongjo', serif;
  font-style: italic;
  margin-bottom: 14px;
}
.mu-bv2-hero-grid {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 12px;
  flex: 1;
  align-items: center;
}
.mu-bv2-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mu-bv2-headline {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.08;
  color: #EDE0C8;
  letter-spacing: -0.01em;
  margin: 0;
}
.mu-bv2-rule {
  width: 36px;
  height: 1px;
  background: rgba(200,146,58,0.55);
}
.mu-bv2-sub {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 10.5px;
  line-height: 1.7;
  color: rgba(237,224,200,0.55);
  font-style: italic;
  margin: 0;
}
.mu-bv2-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.mu-bv2-btn-fill {
  font-size: 8.5px;
  letter-spacing: 0.22em;
  color: #1A1510;
  background: #C8923A;
  padding: 7px 14px;
  border-radius: 2px;
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 700;
}
.mu-bv2-btn-line {
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: rgba(200,146,58,0.7);
  border-bottom: 1px solid rgba(200,146,58,0.35);
  padding-bottom: 1px;
  font-family: 'Nanum Myeongjo', serif;
}

/* Badge / art area */
.mu-bv2-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mu-bv2-badge {
  width: 118px;
  height: 118px;
  display: block;
}

/* Products strip */
.mu-bv2-products {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(200,146,58,0.14);
  background: #110E0A;
}
.mu-bv2-prod {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 28px;
  border-bottom: 1px solid rgba(200,146,58,0.07);
}
.mu-bv2-prod:last-child { border-bottom: none; }
.mu-bv2-pn {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(200,146,58,0.4);
  font-family: 'Nanum Myeongjo', serif;
  flex: 0 0 22px;
}
.mu-bv2-pmeta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mu-bv2-pmeta strong {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #D8CDB8;
  letter-spacing: 0.02em;
}
.mu-bv2-pmeta em {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 9px;
  color: rgba(200,146,58,0.5);
  font-style: italic;
}
.mu-bv2-price {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 11px;
  font-weight: 700;
  color: #C8923A;
}

/* Feat card — let bv2 fill naturally */
.portfolio-card.feat .mu-bv2 {
  max-width: 100%;
}

/* ============================================================
   MOCKUP: Taxi (Drop Mobility)
   ============================================================ */
.mu-theme-taxi { background: #0A0F1E; }
.mu-taxi-map { position: relative; width: 100%; height: 140px; overflow: hidden; flex-shrink: 0; }
.mu-taxi-map-svg { width: 100%; height: 100%; display: block; }
.mu-taxi-overlay { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); }
.mu-taxi-badge {
  background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.4);
  color: #93C5FD; font-size: 10px; padding: 4px 10px; border-radius: 20px;
  white-space: nowrap;
}
.mu-taxi-panel { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.mu-taxi-stats { display: flex; gap: 0; border: 1px solid #1E2B4A; border-radius: 10px; overflow: hidden; }
.mu-taxi-stat { flex: 1; padding: 8px 4px; text-align: center; border-right: 1px solid #1E2B4A; }
.mu-taxi-stat:last-child { border-right: none; }
.mu-taxi-stat strong { display: block; font-size: 15px; color: #E2E8F0; font-weight: 700; }
.mu-taxi-stat span { font-size: 9px; color: #64748B; }
.mu-taxi-req-t { font-size: 10px; color: #64748B; font-weight: 600; letter-spacing: 0.5px; }
.mu-taxi-req {
  display: flex; align-items: center; gap: 8px;
  background: #131C34; border: 1px solid #1E2B4A;
  border-radius: 8px; padding: 8px 10px;
}
.mu-taxi-req-dot { width: 8px; height: 8px; border-radius: 50%; background: #3B82F6; flex-shrink: 0; }
.mu-taxi-req-info { flex: 1; min-width: 0; }
.mu-taxi-req-from { font-size: 10px; color: #CBD5E1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-taxi-req-to { font-size: 9px; color: #64748B; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-taxi-req-eta { font-size: 9px; color: #F59E0B; white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   MOCKUP: Shop (Dealpang E-commerce)
   ============================================================ */
.mu-shop {
  width: 100%; height: 100%; background: #FAFAFA;
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; font-family: 'Noto Sans KR', sans-serif;
}
.mu-theme-shop { background: #FAFAFA; }
.mu-shop-top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: #fff;
  border-bottom: 1px solid #F0F0F0;
}
.mu-shop-logo { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 13px; color: #1A1A2E; flex-shrink: 0; }
.mu-shop-logo-mark {
  width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #FF6B35, #FF8E53);
  color: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.mu-shop-search {
  flex: 1; display: flex; align-items: center; gap: 5px;
  background: #F5F5F5; border-radius: 8px; padding: 5px 8px; font-size: 10px; color: #999;
}
.mu-shop-search input { border: none; background: transparent; font-size: 10px; color: #999; width: 100%; outline: none; }
.mu-shop-cart { font-size: 16px; position: relative; flex-shrink: 0; }
.mu-shop-cart span {
  position: absolute; top: -4px; right: -4px;
  background: #FF6B35; color: #fff; font-size: 8px; font-weight: 700;
  width: 13px; height: 13px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.mu-shop-cats {
  display: flex; gap: 6px; padding: 8px 14px; overflow-x: auto;
  background: #fff; border-bottom: 1px solid #F0F0F0;
}
.mu-shop-cats span { font-size: 10px; color: #888; padding: 4px 10px; border-radius: 20px; white-space: nowrap; cursor: pointer; }
.mu-shop-cats span.on { background: #1A1A2E; color: #fff; font-weight: 700; }
.mu-shop-banner {
  margin: 10px 14px 0; background: linear-gradient(135deg, #1A1A2E, #2D2B5E);
  border-radius: 10px; padding: 12px 14px; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.mu-shop-banner-label { font-size: 9px; color: #FF8E53; font-weight: 700; margin-bottom: 2px; }
.mu-shop-banner-title { font-size: 15px; font-weight: 800; }
.mu-shop-banner-sub { font-size: 9px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.mu-shop-timer { display: flex; gap: 3px; align-items: center; }
.mu-shop-timer span {
  background: #FF6B35; color: #fff; font-size: 12px; font-weight: 800;
  width: 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
}
.mu-shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px 14px; flex: 1; overflow: hidden; }
.mu-shop-card { border-radius: 10px; padding: 10px; position: relative; overflow: hidden; }
.mu-shop-badge {
  position: absolute; top: 8px; right: 8px;
  background: #FF6B35; color: #fff; font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 4px;
}
.mu-shop-img-ph { width: 100%; height: 52px; background: rgba(0,0,0,0.06); border-radius: 8px; margin-bottom: 6px; }
.mu-shop-name { font-size: 10px; color: #1A1A2E; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.mu-shop-price-row { display: flex; flex-direction: column; gap: 1px; }
.mu-shop-price-row strong { font-size: 11px; color: #FF6B35; font-weight: 800; }
.mu-shop-price-row del { font-size: 9px; color: #BBB; }

/* ============================================================
   MOCKUP: API Hub (Developer Portal)
   ============================================================ */
.mu-api {
  width: 100%; height: 100%; background: #0D1117;
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; font-family: 'Courier New', monospace;
}
.mu-theme-api { background: #0D1117; }
.mu-api-top {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #161B22; border-bottom: 1px solid #30363D;
}
.mu-api-dots { display: flex; gap: 5px; }
.mu-api-dots span { width: 9px; height: 9px; border-radius: 50%; }
.mu-api-dots span:nth-child(1) { background: #FF5F57; }
.mu-api-dots span:nth-child(2) { background: #FEBC2E; }
.mu-api-dots span:nth-child(3) { background: #28C840; }
.mu-api-title { font-size: 10px; color: #8B949E; flex: 1; text-align: center; }
.mu-api-version { font-size: 9px; color: #3FB950; padding: 2px 6px; border: 1px solid #3FB950; border-radius: 4px; }
.mu-api-body { flex: 1; display: flex; overflow: hidden; }
.mu-api-sidebar { width: 38%; background: #0D1117; border-right: 1px solid #21262D; padding: 10px 8px; overflow-y: auto; }
.mu-api-sb-title { font-size: 8px; color: #8B949E; font-weight: 700; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; }
.mu-api-ep {
  display: flex; align-items: center; gap: 5px; padding: 5px 6px;
  border-radius: 5px; cursor: pointer; margin-bottom: 2px;
}
.mu-api-ep.on { background: #21262D; }
.mu-api-ep.model { opacity: 0.7; }
.mu-api-method { font-size: 8px; font-weight: 800; min-width: 30px; }
.mu-api-path { font-size: 8px; color: #C9D1D9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-api-model-dot { width: 5px; height: 5px; border-radius: 50%; background: #8B949E; flex-shrink: 0; }
.mu-api-main { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.mu-api-main-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.mu-api-method-badge { font-size: 9px; color: #fff; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.mu-api-main-path { font-size: 10px; color: #C9D1D9; font-weight: 600; }
.mu-api-code-block { background: #161B22; border: 1px solid #21262D; border-radius: 6px; padding: 8px; }
.mu-api-code-block.resp { border-color: #1A3A1A; background: #0D1F0D; }
.mu-api-code-label { font-size: 8px; color: #8B949E; margin-bottom: 4px; font-family: 'Noto Sans KR', sans-serif; }
.mu-api-code-label.green { color: #3FB950; }
.mu-api-code { font-size: 9px; color: #C9D1D9; margin: 0; white-space: pre; line-height: 1.5; overflow: hidden; }