/* Musubi Media — design tokens */
:root {
  --blue-50:  #EAF6FD;
  --blue-100: #C7E7F8;
  --blue-200: #8FCEEF;
  --blue-300: #4DB4E6;
  --blue-400: #1FA8E0;   /* primary, from logo light */
  --blue-500: #0B72B9;   /* logo deep */
  --blue-600: #00538F;
  --blue-700: #003C75;
  --blue-900: #001F3F;

  --ink:      #0A0A0A;
  --ink-2:    #1A1F2A;
  --slate:    #5A6472;
  --slate-2:  #8A93A1;
  --line:     #E6EAEF;
  --line-2:   #F1F4F8;
  --bg:       #FFFFFF;
  --soft:     #F5F8FB;
  --soft-2:   #EEF3F8;

  --grad-blue: linear-gradient(135deg, #1FA8E0 0%, #0B72B9 100%);
  --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #F5F8FB 100%);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(10,20,40,.04), 0 1px 3px rgba(10,20,40,.06);
  --shadow:    0 4px 16px rgba(10,40,80,.06), 0 1px 4px rgba(10,40,80,.04);
  --shadow-lg: 0 24px 60px rgba(10,40,80,.12), 0 4px 12px rgba(10,40,80,.06);

  --font-display: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-kr:      "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- shared bits used across variations ---------- */

.mm-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.mm-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-500);
  font-weight: 500;
}
.mm-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.mm-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}
.mm-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.mm-lead {
  color: var(--slate);
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
  margin: 0;
  text-wrap: pretty;
}

.mm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.mm-btn:hover { transform: translateY(-1px); }
.mm-btn-primary {
  background: var(--ink);
  color: #fff;
}
.mm-btn-primary:hover { background: var(--blue-500); }
.mm-btn-blue {
  background: var(--blue-400);
  color: #fff;
}
.mm-btn-blue:hover { background: var(--blue-500); }
.mm-btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.mm-btn-ghost:hover { border-color: var(--ink); }
.mm-btn-link {
  color: var(--blue-500);
  font-weight: 500;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mm-btn-link:hover { gap: 10px; }

.mm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--slate);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--line);
}
.mm-dot { width: 6px; height: 6px; border-radius: 999px; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }

/* nav (shared) */
.mm-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 247, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(15, 17, 21, 0.06);
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Dark theme — when scrolled over a dark section */
.mm-nav.mm-nav-dark {
  background: rgba(15, 17, 21, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.mm-nav.mm-nav-dark .mm-nav-links a { color: rgba(255,255,255,0.85); }
.mm-nav.mm-nav-dark .mm-nav-links a:hover { color: var(--blue-400, #1FA8E0); }
.mm-nav.mm-nav-dark .mm-btn-ghost {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.2);
}
.mm-nav.mm-nav-dark .mm-btn-ghost:hover {
  border-color: rgba(255,255,255,0.4);
}

/* Work card hover (used in home Work grid) */
.mm-work-card:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 168, 224, 0.5) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Logo swap based on theme */
.mm-nav .mm-logo-dark { display: none; }
.mm-nav.mm-nav-dark .mm-logo-light { display: none; }
.mm-nav.mm-nav-dark .mm-logo-dark { display: inline-block; }
.mm-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mm-nav-logo { display: flex; align-items: center; gap: 10px; }
.mm-nav-logo img { height: 56px; width: auto; }
.mm-nav-links { display: flex; align-items: center; gap: 28px; }
.mm-nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: 4px 0;
}
.mm-nav-links a:hover { color: var(--blue-500); }
.mm-nav-right { display: flex; align-items: center; gap: 14px; }
.mm-lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.mm-lang span.active { color: var(--ink); }

/* footer (shared) */
.mm-footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 32px;
  background: var(--soft);
  margin-top: 80px;
}
.mm-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.mm-footer h4 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  font-family: var(--font-mono);
}
.mm-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mm-footer ul a { font-size: 14px; color: var(--slate); }
.mm-footer ul a:hover { color: var(--ink); }
.mm-footer-brand img { height: 56px; margin-bottom: 16px; width: auto; max-width: 100%; }
.mm-footer-brand p { color: var(--slate); font-size: 14px; line-height: 1.6; max-width: 280px; }
.mm-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 12px;
  color: var(--slate-2);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* fade-in on scroll utility */
.mm-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.mm-fade.in { opacity: 1; transform: translateY(0); }

/* ───────── Hero mockup (TV + POS) ───────── */
.va-mockup {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(180deg, #F5F8FB 0%, #E8F1F8 100%);
  border-radius: 28px;
  padding: 64px 56px 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.va-mockup-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: end;
}
.va-mockup-pos { transform: translateY(40px); }

/* ───────── Class-based responsive grids (used in home-apple.jsx) ───────── */
.va-hero { padding: 88px 0 40px; text-align: center; position: relative; }
.va-hero-mockup-wrap { margin-top: 80px; padding: 0 32px; }

.va-services { padding: 120px 0 80px; }
.va-services-header { text-align: center; margin-bottom: 72px; }
.va-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.va-service-card {
  padding: 48px 32px 40px;
  border-bottom: 1px solid var(--line);
}
.va-service-card + .va-service-card { border-left: 1px solid var(--line); }

.va-partner { padding: 80px 0; background: var(--soft); }
.va-partner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.va-partner-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

.va-about { padding: 120px 0; }
.va-about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.va-about-logo { width: 200px; height: 200px; margin-bottom: 24px; }

.va-cta { padding: 80px 0; }
.va-cta-card {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 72px 56px;
  position: relative;
  overflow: hidden;
}
.va-cta-glow {
  position: absolute;
  right: -120px; top: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(31,168,224,.5) 0%, transparent 70%);
}
.va-cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.va-logos {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  opacity: 0.55;
}

/* ───────── Container-based responsive (works at any viewport) ───────── */
.va { container-type: inline-size; container-name: va; }

/* Both viewport-based AND container-based — covers real mobile and iframe-in-canvas */
@media (max-width: 768px) {
  .mm-container { padding: 0 20px; }
  .mm-nav-inner { padding: 12px 18px; gap: 12px; }
  .mm-nav-links { display: none; }
  .mm-nav-right .mm-lang,
  .mm-nav-right .mm-btn-ghost { display: none; }
  .mm-nav-right .mm-btn-primary { padding: 8px 14px !important; font-size: 13px !important; white-space: nowrap; }
  .mm-nav-logo img { height: 40px; }

  .mm-footer { padding: 40px 0 24px; margin-top: 48px; }
  .mm-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding-bottom: 28px;
  }
  .mm-footer-brand { grid-column: 1 / -1; }
  .mm-footer-brand p { max-width: none; }
  .mm-footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }

  .va-hero { padding: 48px 0 24px; }
  .va-hero-mockup-wrap { margin-top: 48px; padding: 0 4px; }
  .va-mockup { padding: 28px 16px 0; border-radius: 18px; }
  .va-mockup-grid { grid-template-columns: 1fr; gap: 24px; }
  .va-mockup-pos { transform: none; max-width: 220px; margin: 0 auto; }

  .va-services { padding: 56px 0 24px; }
  .va-services-header { margin-bottom: 32px; }
  .va-services-grid { grid-template-columns: 1fr; }
  .va-service-card { padding: 32px 4px 28px; }
  .va-service-card + .va-service-card { border-left: none; }

  .va-partner { padding: 56px 0; }
  .va-partner-grid { grid-template-columns: 1fr; gap: 32px; }
  .va-partner-stats { gap: 18px; margin-top: 28px; }

  .va-about { padding: 56px 0; }
  .va-about-grid { grid-template-columns: 1fr; gap: 24px; }
  .va-about-logo { width: 96px; height: 96px; margin-bottom: 12px; }

  .va-cta { padding: 32px 0 56px; }
  .va-cta-card { padding: 40px 24px; border-radius: var(--radius-lg); }
  .va-cta-glow { width: 240px; height: 240px; right: -80px; top: -80px; }

  .va-logos { gap: 20px 28px; }
}

@container va (max-width: 768px) {
  .mm-container { padding: 0 20px; }
  .mm-nav-inner { padding: 12px 18px; gap: 12px; }
  .mm-nav-links { display: none; }
  .mm-nav-right .mm-lang,
  .mm-nav-right .mm-btn-ghost { display: none; }
  .mm-nav-right .mm-btn-primary { padding: 8px 14px !important; font-size: 13px !important; white-space: nowrap; }
  .mm-nav-logo img { height: 40px; }

  .mm-footer { padding: 40px 0 24px; margin-top: 48px; }
  .mm-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding-bottom: 28px;
  }
  .mm-footer-brand { grid-column: 1 / -1; }
  .mm-footer-brand p { max-width: none; }
  .mm-footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }

  /* Hero */
  .va-hero { padding: 48px 0 24px; }
  .va-hero-mockup-wrap { margin-top: 48px; padding: 0 4px; }
  .va-mockup { padding: 28px 16px 0; border-radius: 18px; }
  .va-mockup-grid { grid-template-columns: 1fr; gap: 24px; }
  .va-mockup-pos { transform: none; max-width: 220px; margin: 0 auto; }

  /* Three-up services */
  .va-services { padding: 56px 0 24px; }
  .va-services-header { margin-bottom: 32px; }
  .va-services-grid { grid-template-columns: 1fr; }
  .va-service-card { padding: 32px 4px 28px; }
  .va-service-card + .va-service-card { border-left: none; }

  /* Partner */
  .va-partner { padding: 56px 0; }
  .va-partner-grid { grid-template-columns: 1fr; gap: 32px; }
  .va-partner-stats { gap: 18px; margin-top: 28px; }

  /* About */
  .va-about { padding: 56px 0; }
  .va-about-grid { grid-template-columns: 1fr; gap: 24px; }
  .va-about-logo { width: 96px; height: 96px; margin-bottom: 12px; }

  /* CTA */
  .va-cta { padding: 32px 0 56px; }
  .va-cta-card { padding: 40px 24px; border-radius: var(--radius-lg); }
  .va-cta-glow { width: 240px; height: 240px; right: -80px; top: -80px; }

  /* Logo trust row */
  .va-logos { gap: 20px 28px; }
}

/* ───────── home-musubi.jsx (.mm2) — mobile fallback for inline-grid layouts ───────── */
@media (max-width: 768px) {
  .mm2 section { padding-left: 20px !important; padding-right: 20px !important; }
  .mm2 h1 { font-size: clamp(36px, 9vw, 56px) !important; }
  .mm2 h2 { font-size: clamp(26px, 6.5vw, 34px) !important; }
  .mm2 .mm-nav-inner { padding: 12px 18px !important; gap: 10px !important; }
  .mm2 .mm-nav-links { display: none !important; }
  .mm2 .mm-nav-right .mm-btn-ghost { display: none !important; }
  .mm2 .mm-nav-right .mm-btn-primary { padding: 8px 14px !important; font-size: 13px !important; white-space: nowrap; }
  .mm2 .mm-nav-logo img { height: 32px !important; }

  /* Force every multi-col grid in .mm2 to single column */
  .mm2 [style*="gridTemplateColumns"],
  .mm2 [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Stat tiles stay 2-col so they don't get too tall */
  .mm2 .mm-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; }

  /* Hero padding tighter */
  .mm2 section[style*="88px 32px"] { padding: 56px 20px 36px !important; }

  /* Buttons wrap nicely */
  .mm2 .mm-btn { font-size: 14px !important; }
  
  /* Reduce huge clamp() top paddings */
  .mm2 section { padding-top: 48px !important; padding-bottom: 48px !important; }
}