/* Cosmos theme — 深色宇宙版型用的共用 nav / footer 覆寫（body 加 class="cosmos" 啟用） */
:root {
  --space: #03040b;
  --ink: #e8ecff;
  --ink-2: rgba(232, 236, 255, 0.7);
  --ink-3: rgba(232, 236, 255, 0.44);
  --line: rgba(160, 180, 255, 0.14);
  --u0: #7aa2ff;
  --u1: #4cc9f0;
  --u2: #c77dff;
  --u3: #2ee6a6;
  --u4: #ffb547;
  /* 四個客群宇宙的主色（不分宇宙的頁面用 --u0） */
  --u-estate: var(--u1);     /* U-01 建案宇宙：建商・代銷 */
  --u-design: var(--u4);     /* U-02 設計宇宙：室內設計・裝修工程 */
  --u-brand: var(--u2);      /* U-03 品牌宇宙：建材品牌・展場・門市 */
  --u-enterprise: var(--u3); /* U-04 企業宇宙：企業・連鎖加盟・社團・空間業者 */
  --f-en: 'Outfit', 'Noto Sans TC', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* NAV */
body.cosmos #mainNav {
  background: rgba(3, 4, 11, 0.32);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(160, 180, 255, 0.08);
  transition: background 0.3s, box-shadow 0.3s;
}
body.cosmos #mainNav.scrolled {
  background: rgba(3, 4, 11, 0.74);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
body.cosmos .nav-logo img { filter: brightness(0) invert(1); }
body.cosmos .nav-links > li > a { color: rgba(232, 236, 255, 0.76); }
body.cosmos .nav-links > li > a:hover,
body.cosmos .nav-links > li.current > a { color: #fff; }
body.cosmos .nav-links > li.current > a::before {
  background: linear-gradient(90deg, var(--u1), var(--u2));
  box-shadow: 0 0 10px var(--u1);
}
body.cosmos .sub-menu {
  background: rgba(8, 11, 26, 0.94);
  border-color: rgba(160, 180, 255, 0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.cosmos .sub-menu li a { color: rgba(232, 236, 255, 0.74); }
body.cosmos .sub-menu li a:hover { color: #fff; background: rgba(122, 162, 255, 0.12); }
/* 解決方案選單：四個客群宇宙——服務名稱下面寫是給誰的，前面一顆宇宙色點 */
.sub-menu--universe a[href*="property-sales"] { --c: var(--u-estate); }
.sub-menu--universe a[href*="design-proposal"] { --c: var(--u-design); }
.sub-menu--universe a[href*="exhibition"] { --c: var(--u-brand); }
.sub-menu--universe a[href*="enterprise-digital"] { --c: var(--u-enterprise); }
body.cosmos .sub-menu--universe li a { display: grid; grid-template-columns: 7px auto; column-gap: 12px; align-items: center; padding: 9px 24px 9px 20px; }
body.cosmos .sub-menu--universe li a::before {
  content: ''; grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c, var(--u0)); box-shadow: 0 0 8px var(--c, var(--u0));
}
body.cosmos .sub-menu--universe small { grid-column: 2; margin-top: 1px; font-size: 11.5px; color: rgba(232, 236, 255, 0.46); }
/* 每個宇宙右邊一顆「▶ 體驗」，直接進該宇宙的沉浸式展示頁 */
.sub-menu--universe a[href*="property-showcase"] { --c: var(--u-estate); }
.sub-menu--universe a[href*="design-showcase"] { --c: var(--u-design); }
.sub-menu--universe a[href*="brand-showcase"] { --c: var(--u-brand); }
.sub-menu--universe a[href*="enterprise-showcase"] { --c: var(--u-enterprise); }
.sub-menu--universe li { display: flex; align-items: center; }
.sub-menu--universe li > a:first-child { flex: 1; }
body.cosmos .sub-menu--universe li a.sm-exp {
  display: inline-flex; flex: none; align-items: center; gap: 5px; margin-right: 14px; padding: 4px 10px 4px 9px; border-radius: 999px;
  font-size: 11.5px; line-height: 1.2; color: #fff; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent); transition: background .2s, border-color .2s;
}
body.cosmos .sub-menu--universe li a.sm-exp::before {
  width: 0; height: 0; border-radius: 0; background: none; box-shadow: none;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--c);
}
body.cosmos .sub-menu--universe li a.sm-exp:hover { background: color-mix(in srgb, var(--c) 28%, transparent); border-color: var(--c); }
body.cosmos .nav-cta {
  background: rgba(122, 162, 255, 0.08);
  border: 1px solid rgba(122, 162, 255, 0.55);
  color: #fff;
  border-radius: 999px;
  box-shadow: inset 0 0 14px rgba(122, 162, 255, 0.18);
}
body.cosmos .nav-cta:hover { background: rgba(122, 162, 255, 0.22); }
body.cosmos .nav-hamburger span { background: #fff; }

@media (max-width: 900px) {
  body.cosmos .nav-links {
    background: #050712;
    border-bottom-color: rgba(160, 180, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  }
  body.cosmos .nav-links > li { border-bottom-color: rgba(255, 255, 255, 0.06); }
  body.cosmos .nav-links > li.current > a { color: #fff; }
  body.cosmos .sub-menu {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  body.cosmos .sub-menu li a { color: rgba(232, 236, 255, 0.6); }
  body.cosmos .sub-menu li a:hover { background: transparent; color: #fff; }
  body.cosmos .sub-menu--universe li a { padding: 8px 24px 8px 34px; }
  body.cosmos .sub-menu--universe li a.sm-exp { margin-right: 20px; padding: 8px 14px 8px 12px; font-size: 12.5px; }
  body.cosmos .nav-links::after {
    background: linear-gradient(100deg, #7fe3ff 0%, #7aa2ff 45%, #c9a2ff 100%);
    color: #050714;
    border-radius: 999px;
  }
  body.cosmos .nav-mobile-backdrop { background: rgba(0, 0, 0, 0.55); }
}

/* FOOTER */
body.cosmos footer {
  z-index: 2;
  background: linear-gradient(180deg, #03040b 0%, #060a1c 100%);
  border-top: 1px solid rgba(160, 180, 255, 0.08);
}