@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ============================================================
   CMG — Shared design system
   ============================================================ */

:root {
  /* Brand */
  --cmg-navy:   #00269A;       /* primary — exact match to logo.svg fill */
  --cmg-navy-2: #001A6B;       /* deeper for hover */
  --cmg-navy-3: #2F4FC7;       /* lighter accent */
  --cmg-cyan:   #4FB9FF;       /* secondary accent — used sparingly */
  --cmg-amber:  #F2B844;       /* mono-spec data accent */

  /* Theme — light defaults */
  --bg:        #F4F4F2;
  --bg-2:      #FFFFFF;
  --bg-3:      #ECECE7;
  --line:      #1B1B1F1A;
  --line-2:    #1B1B1F33;
  --fg:        #0B0B14;
  --fg-2:      #3A3A48;
  --fg-3:      #6B6B7A;
  --primary:   var(--cmg-navy);
  --on-primary:#ffffff;

  /* Type */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* Mono stack falls back per-glyph: Latin/digits get JetBrains/IBM Plex Mono,
     Hangul gets IBM Plex Sans KR (loaded above) so eyebrows/specs read cleanly
     in Korean instead of OS fallback monospace. */
  --font-mono: "JetBrains Mono", "IBM Plex Mono", "IBM Plex Sans KR", "Pretendard Variable", "Pretendard", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--font-sans);

  /* Layout */
  --container: 1320px;
  --gutter: 32px;
  --header-h: 84px;
  --radius: 0px;            /* sharp, technical */
  --radius-sm: 0px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"] {
  --bg:    #07070D;
  --bg-2:  #0E0E18;
  --bg-3:  #14141F;
  --line:  #FFFFFF14;
  --line-2:#FFFFFF26;
  --fg:    #F2F2F5;
  --fg-2:  #B4B4C0;
  --fg-3:  #7A7A88;
  --primary: #5A60E8;
  --on-primary: #ffffff;
}

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations");
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: var(--font-sans); }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--primary); color: var(--on-primary); }

/* ============================================================
   Motion utilities — scroll reveals & micro-interactions
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
.reveal.is-in {
  animation: cmgReveal .9s var(--ease) both;
}
@keyframes cmgReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal[data-delay="1"].is-in { animation-delay: .08s; }
.reveal[data-delay="2"].is-in { animation-delay: .16s; }
.reveal[data-delay="3"].is-in { animation-delay: .24s; }
.reveal[data-delay="4"].is-in { animation-delay: .32s; }
.reveal[data-delay="5"].is-in { animation-delay: .40s; }
.reveal[data-delay="6"].is-in { animation-delay: .48s; }

/* Stagger children when a parent has .reveal-stagger */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
}
.reveal-stagger.is-in > * {
  animation: cmgReveal .7s var(--ease) both;
}
.reveal-stagger.is-in > *:nth-child(1) { animation-delay: .05s; }
.reveal-stagger.is-in > *:nth-child(2) { animation-delay: .12s; }
.reveal-stagger.is-in > *:nth-child(3) { animation-delay: .19s; }
.reveal-stagger.is-in > *:nth-child(4) { animation-delay: .26s; }
.reveal-stagger.is-in > *:nth-child(5) { animation-delay: .33s; }
.reveal-stagger.is-in > *:nth-child(6) { animation-delay: .40s; }
.reveal-stagger.is-in > *:nth-child(7) { animation-delay: .47s; }
.reveal-stagger.is-in > *:nth-child(8) { animation-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.mono { font-family: var(--font-mono); font-variant-ligatures: none; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; line-height: 1.05; font-weight: 700; word-break: keep-all; }
h1 { font-size: clamp(48px, 6.4vw, 104px); letter-spacing: -0.035em; }
h2 { font-size: clamp(36px, 4.2vw, 64px); letter-spacing: -0.028em; }
h3 { font-size: clamp(22px, 1.8vw, 32px); letter-spacing: -0.02em; }
h4 { font-size: 18px; letter-spacing: -0.01em; }

p { margin: 0 0 1em 0; color: var(--fg-2); word-break: keep-all; }

/* ============================================================
   Header — sticky, mega-menu host
   ============================================================ */

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header__row {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 48px;
}
@media (max-width: 1280px) { .site-header__row { gap: 32px; } }
@media (max-width: 1100px) { .site-header__row { gap: 20px; } }

.brand {
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 auto;
}
.brand__logo {
  height: 22px;
  width: auto;
}
[data-theme="dark"] .brand__logo {
  filter: brightness(0) invert(1);
}

/* Nav */
.nav { flex: 1; display: flex; align-items: center; justify-content: center; }
.nav__list {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: 4px;
}
@media (min-width: 1100px) {
  .nav__list { display: flex; }
}
.nav__item { position: static; }
.nav__link {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--header-h);
  padding: 0 18px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}
@media (max-width: 1280px) { .nav__link { padding: 0 12px; font-size: 14px; } }
.nav__link::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: -1px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
@media (max-width: 1280px) {
  .nav__link::after { left: 12px; right: 12px; }
}
.nav__item:hover .nav__link::after,
.nav__item.is-hover .nav__link::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px;
  padding: 0 18px;
  background: var(--primary); color: var(--on-primary);
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.nav__cta:hover { background: var(--cmg-navy-2); transform: translateY(-1px); }
[data-theme="dark"] .nav__cta:hover { background: #6C72FF; }
.nav__cta__arrow { width: 14px; height: 14px; }

/* Mobile / narrow-laptop hamburger — kicks in below the 1100px nav threshold. */
.nav__toggle {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-2);
  color: var(--fg);
  font-family: var(--font-sans);
  flex-shrink: 0;
}
@media (min-width: 1100px) { .nav__toggle { display: none; } }

/* ============================================================
   Mega menu — full-width column drop-down
   (모든 메뉴가 동시에 열림, 각 컴럼 중앙 정렬)
   ============================================================ */

.mega-wrap {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(15,20,90,.18);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height .35s var(--ease), opacity .25s var(--ease);
}
.mega-wrap.is-open {
  max-height: 600px;
  opacity: 1;
  pointer-events: auto;
}
.mega-wrap__bg {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(circle at 80% 0%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 55%),
    radial-gradient(circle at 20% 100%, color-mix(in oklab, var(--cmg-cyan) 14%, transparent), transparent 55%);
}
[data-theme="dark"] .mega-wrap__bg { opacity: .8; }
.mega-wrap > .container { position: relative; z-index: 1; }

.mega-backdrop {
  position: fixed; inset: var(--header-h) 0 0 0;
  background: rgba(0,0,0,.15);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
  z-index: 60;
}
.mega-backdrop.is-on { opacity: 1; pointer-events: auto; }
[data-theme="dark"] .mega-backdrop { background: rgba(0,0,0,.45); }

.mega-cols {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 48px 0 56px;
  margin: 0;
}

.mega-col {
  text-align: center;
  padding: 0 8px;
  position: relative;
}
.mega-col__title {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
  word-break: keep-all;
}
.mega-col__items {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 18px;
}
.mega-col__items a {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 400;
  color: var(--fg-2);
  position: relative;
  padding: 2px 0;
  word-break: keep-all;
  transition: color .18s var(--ease);
}
.mega-col__items a:hover { color: var(--primary); font-weight: 500; }

/* Mobile nav drawer
   Lives outside <header> in the DOM so `position: fixed` resolves against
   the viewport (header has backdrop-filter, which would otherwise create a
   containing block and trap the drawer to the header's box). */
.mnav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--bg);
  z-index: 95;             /* above .site-header (90) so it fully overlays hero */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 0 80px;
  display: none;
  border-top: 1px solid var(--line);
}
.mnav.is-open { display: block; }
.mnav__group { border-bottom: 1px solid var(--line); padding: 18px var(--gutter); }
.mnav__group:last-child { border-bottom: 0; }
.mnav__group h4 {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; margin: 0 0 12px;
}
.mnav__group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.mnav__group a {
  display: block;
  padding: 12px 0;
  font-size: 17px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.mnav__group a:hover { color: var(--primary); }
/* Lock body scroll while the drawer is open */
body.is-mnav-open { overflow: hidden; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  margin-top: 120px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
/* Top section: brand block on the left, full sitemap nav on the right.
   The nav owns its own grid (5 columns matching MENU) so the brand width
   doesn't fight with menu column widths. */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr);
  gap: 48px;
  padding: 72px 0 56px;
  align-items: start;
}
.site-footer__brand img { height: 28px; display: block; }
[data-theme="dark"] .site-footer__brand img { filter: brightness(0) invert(1); }
.site-footer__brand__tag {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.55;
  margin: 18px 0 0;
  font-weight: 500;
}
.site-footer__brand__addr {
  font-style: normal;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.6;
  margin-top: 14px;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.site-footer__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.site-footer__col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__col a {
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s var(--ease);
}
.site-footer__col a:hover { color: var(--primary); }

@media (max-width: 1100px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 600px) {
  .site-footer__top { padding: 56px 0 40px; }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (max-width: 400px) {
  .site-footer__nav { grid-template-columns: 1fr; }
}

.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--fg-3);
  text-transform: uppercase;
}

/* ============================================================
   Buttons & UI primitives
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 24px;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  background: var(--primary); color: var(--on-primary);
  border: 0;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--cmg-navy-2); }
.btn--ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--line-2);
}
.btn--ghost:hover { background: var(--bg-2); border-color: var(--primary); color: var(--primary); }
.btn--lg { height: 60px; padding: 0 32px; font-size: 16px; }
/* Arrow glyph inside .btn — drawn via CSS mask so it inherits the button
   text color (white on primary, primary on ghost) without extra markup. */
.btn .arr {
  width: 16px; height: 16px;
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='13 6 19 12 13 18'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='13 6 19 12 13 18'/></svg>") no-repeat center / contain;
  transition: transform .2s var(--ease);
}
.btn:hover .arr { transform: translateX(3px); }

.badge {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--bg-3); color: var(--fg-2);
  border: 1px solid var(--line);
}
.badge--accent { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* ============================================================
   Page header (used on sub-pages)
   ============================================================ */

.pagehead {
  padding: 96px 0 56px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  position: relative; overflow: hidden;
}
.pagehead__inner {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px;
}
.pagehead__crumbs {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--fg-3);
  text-transform: uppercase; margin-bottom: 20px;
}
.pagehead__crumbs span + span::before { content: "/"; padding: 0 8px; color: var(--line-2); }
.pagehead h1 { font-size: clamp(32px, 4.5vw, 72px); letter-spacing: -0.03em; word-break: keep-all; }
.pagehead__sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-3);
  text-align: right;
  max-width: 520px;
  line-height: 1.6;
  word-break: keep-all;
}
@media (max-width: 760px) {
  .pagehead { padding: 72px 0 40px; }
  .pagehead__inner { grid-template-columns: 1fr; gap: 20px; }
  .pagehead__sub { text-align: left; max-width: none; }
}

/* BRITEON brand mark variants — large watermark on /products/ archive +
   inline small wordmark on /products/{single} pagehead. */
.pagehead--briteon { position: relative; overflow: hidden; }
.pagehead--briteon .container { position: relative; }
.pagehead__briteon-mark {
  position: absolute;
  right: var(--gutter);
  bottom: -12px;
  height: 180px;
  width: auto;
  opacity: .06;
  pointer-events: none;
  user-select: none;
}
[data-theme="dark"] .pagehead__briteon-mark { filter: brightness(0) invert(1); opacity: .08; }
@media (max-width: 760px) {
  .pagehead__briteon-mark { height: 110px; bottom: -8px; opacity: .05; }
}

.pagehead__sub--briteon {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: none;
}
.pagehead__briteon-inline {
  height: 22px;
  width: auto;
  display: block;
}
[data-theme="dark"] .pagehead__briteon-inline { filter: brightness(0) invert(1); }
.pagehead__briteon-series {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--fg-3);
}
@media (max-width: 760px) {
  .pagehead__sub--briteon { flex-wrap: wrap; gap: 8px 14px; }
}

/* BRITEON wordmark above the LED-page series picker section. */
.cmg-biz-section--briteon { position: relative; }
.cmg-biz-section__brand {
  height: 32px;
  width: auto;
  display: block;
  margin-bottom: 18px;
  opacity: .9;
}
[data-theme="dark"] .cmg-biz-section__brand { filter: brightness(0) invert(1); }
@media (max-width: 600px) {
  .cmg-biz-section__brand { height: 24px; margin-bottom: 14px; }
}

/* ============================================================
   Subpage navigation tabs (for sectioned areas)
   ============================================================ */

.subnav {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: var(--header-h); z-index: 50;
}
.subnav__list {
  display: flex; gap: 0; list-style: none; padding: 0; margin: 0;
  overflow-x: auto;
}
.subnav__item a {
  display: inline-flex; align-items: center;
  padding: 18px 24px;
  font-size: 14px; font-weight: 500;
  color: var(--fg-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.subnav__item a:hover { color: var(--fg); }
.subnav__item a.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* ============================================================
   Section conventions
   ============================================================ */

/* Use vertical-only longhand so .section can be combined with .container
   on the same element without clobbering .container's horizontal gutter. */
.section { padding-top: 100px; padding-bottom: 100px; }
.section--tight { padding-top: 64px; padding-bottom: 64px; }
.section__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 760px) { .section__head { grid-template-columns: 1fr; } }
.section__head h2 { font-size: clamp(32px, 3.6vw, 56px); }
.section__head p {
  font-size: 16px;
  max-width: 480px;
  color: var(--fg-2);
  margin: 0;
  text-align: right;
  justify-self: end;
  word-break: keep-all;
}
@media (max-width: 760px) {
  .section__head p { text-align: left; justify-self: start; }
}
.section__head__link { font-size: 14px; font-weight: 600; color: var(--primary); justify-self: end; }

/* ============================================================
   Cards & lists used across pages
   ============================================================ */

.featcard {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 36px 32px;
  display: flex; flex-direction: column;
  gap: 16px;
  transition: border-color .2s var(--ease);
}
.featcard:hover { border-color: var(--primary); }
.featcard__num { font-family: var(--font-mono); font-size: 11px; color: var(--primary); letter-spacing: .12em; }
.featcard__title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.featcard__desc { font-size: 14px; color: var(--fg-2); margin: 0; }

/* Spec rows used on product/business pages */
.specs { border-top: 1px solid var(--line); }
.specs__row {
  display: grid; grid-template-columns: 200px 1fr 120px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  gap: 24px; align-items: baseline;
  font-size: 14px;
}
.specs__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.specs__v { color: var(--fg); font-weight: 500; }
.specs__u { font-family: var(--font-mono); color: var(--fg-3); font-size: 12px; text-align: right; }
@media (max-width: 560px) {
  .specs__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .specs__u { text-align: left; }
}

/* Placeholder image — striped */
.ph {
  position: relative;
  background: var(--bg-3);
  background-image:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(27,31,140,.05) 10px 11px);
  overflow: hidden;
}
[data-theme="dark"] .ph {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,255,255,.04) 10px 11px);
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 4px 8px;
  border: 1px solid var(--line);
}

/* ============================================================
   Page-specific styles — for WP Page bodies (history / contact /
   location). Rules live here (not inline <style>) because
   wp_kses_post() strips <style> tags from post_content.
   ============================================================ */

/* /about/history/ — interactive timeline */
.cmg-timeline { position: relative; padding-left: 0; }
.cmg-timeline::before {
  content: "";
  position: absolute;
  left: 132px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0, var(--line) 8%, var(--line) 92%, transparent 100%);
}
.cmg-timeline__row {
  display: grid;
  grid-template-columns: 110px 40px 1fr;
  gap: 16px;
  margin-bottom: 28px;
  align-items: start;
  position: relative;
}
.cmg-timeline__year {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
  line-height: 1;
  padding-top: 18px;
  text-align: right;
}
.cmg-timeline__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--primary);
  margin: 24px auto 0;
  position: relative;
  z-index: 1;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.cmg-timeline__row:hover .cmg-timeline__dot {
  transform: scale(1.4);
  background: var(--primary);
}
.cmg-timeline__card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 20px 28px;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cmg-timeline__row:hover .cmg-timeline__card {
  border-color: var(--primary);
  transform: translateX(4px);
  box-shadow: 0 12px 24px -16px rgba(0, 38, 154, .25);
}
.cmg-timeline__card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cmg-timeline__card li {
  font-size: 14px;
  color: var(--fg-2);
  padding-left: 16px;
  position: relative;
  line-height: 1.55;
}
.cmg-timeline__card li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px;
  background: var(--primary);
  opacity: .6;
}
@media (max-width: 760px) {
  .cmg-timeline::before { left: 80px; }
  .cmg-timeline__row { grid-template-columns: 60px 36px 1fr; gap: 8px; }
  .cmg-timeline__year { font-size: 22px; padding-top: 16px; }
}

/* ============================================================
   Homepage (front-page.php) — was inline <style> in the template,
   moved here for editability + cache-friendliness.
   ============================================================ */

/* HERO */
.hero {
  position: relative; overflow: hidden; padding: 0;
  background: var(--bg);
  min-height: calc(100vh - var(--header-h));
  display: flex; align-items: center;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--bg-3);
  background-size: cover; background-position: center;
  overflow: hidden;
}
/* Scrim used for slideshow / video — no bg image, just the gradient. */
.hero__bg--scrim { background: transparent; }
.hero__bg::after, .hero__bg--scrim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--bg) 85%, transparent) 0%,
    color-mix(in oklab, var(--bg) 60%, transparent) 50%,
    color-mix(in oklab, var(--bg) 35%, transparent) 100%);
}
[data-theme="dark"] .hero__bg::after,
[data-theme="dark"] .hero__bg--scrim::after {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--bg) 88%, transparent) 0%,
    color-mix(in oklab, var(--bg) 70%, transparent) 55%,
    color-mix(in oklab, var(--bg) 40%, transparent) 100%);
}
.hero__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0;
  background-color: var(--bg-3);
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  background: var(--bg-3);
}
.hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  justify-content: center; gap: 0;
  /* Vertical-only longhand — .hero__inner shares the element with .container
     so a `padding: X 0 Y` shorthand would wipe out .container's horizontal
     gutter at narrow viewports (same bug we fixed on .section earlier). */
  padding-top: 120px;
  padding-bottom: 96px;
  width: 100%;
}
.hero__left { max-width: 1100px; }
.hero h1 { font-size: clamp(48px, 7.4vw, 132px); letter-spacing: -0.04em; line-height: 1.02; font-weight: 700; word-break: keep-all; }
.hero__quote { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--fg-2); max-width: 540px; margin: 32px 0 28px; word-break: keep-all; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; padding: 28px 0 0;
  border-top: 1px solid var(--line);
  max-width: 720px; margin-top: 48px;
}
.hero__metric__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.hero__metric__v { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -0.03em; margin-top: 8px; color: var(--fg); }
.hero__metric__v small { font-size: .5em; color: var(--fg-3); font-weight: 500; margin-left: 4px; letter-spacing: 0; }
/* Narrow-laptop / tablet landscape range — fills the gap between mobile
   (≤760) and desktop (≥1100) that previously had no breakpoint. */
@media (max-width: 1100px) {
  .hero { min-height: auto; }
  .hero__inner { padding-top: 96px; padding-bottom: 80px; }
  .hero h1 { font-size: clamp(48px, 8vw, 88px); }
}
@media (max-width: 760px) {
  .hero__inner { padding-top: 80px; padding-bottom: 64px; }
  .hero h1 { font-size: clamp(40px, 11vw, 64px); }
  .hero__meta { gap: 16px; margin-top: 32px; padding-top: 20px; }
  .hero__metric__v { font-size: 26px; }
}
@media (max-width: 480px) {
  .hero__meta { grid-template-columns: 1fr; gap: 12px; }
}

/* TICKER */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); overflow: hidden; padding: 22px 0; }
.ticker__track { display: flex; gap: 64px; white-space: nowrap; animation: tickerScroll 50s linear infinite; width: max-content; }
.ticker__item { display: inline-flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); letter-spacing: .04em; }
.ticker__item::before { content: ""; width: 4px; height: 4px; background: var(--primary); display: inline-block; }
@keyframes tickerScroll { to { transform: translateX(-50%); } }

/* SHOWCASE */
.showcase { padding: 120px 0; }
.showcase__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
@media (max-width: 880px) { .showcase__grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 760px) { .showcase { padding: 80px 0; } }
.showcase__art { aspect-ratio: 4/5; background: var(--bg-2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.showcase__art .ph { position: absolute; inset: 0; }
.showcase__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.5)); pointer-events: none; }
.showcase__art__tag { position: absolute; left: 24px; bottom: 24px; z-index: 2; color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.showcase__title { font-size: clamp(36px, 5.2vw, 80px); letter-spacing: -0.03em; margin-bottom: 24px; word-break: keep-all; }
.showcase__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.showcase__list h4 { font-size: 16px; margin-bottom: 4px; }
.showcase__list p { font-size: 13px; color: var(--fg-3); margin: 0; }

/* BIZ GRID (homepage 사업영역) */
.bizgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 1024px) { .bizgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .bizgrid { grid-template-columns: 1fr; } }
.bizcard { background: var(--bg-2); padding: 48px 36px; display: flex; flex-direction: column; min-height: 460px; position: relative; transition: background .25s var(--ease); }
.bizcard:hover { background: var(--bg-3); }
.bizcard__num { font-family: var(--font-mono); font-size: 11px; color: var(--primary); letter-spacing: .12em; }
.bizcard__art { margin: 24px 0 32px; height: 160px; position: relative; }
.bizcard__title { font-size: 36px; letter-spacing: -0.02em; margin-bottom: 12px; }
.bizcard__sub { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); margin-bottom: 16px; letter-spacing: .08em; }
.bizcard__desc { font-size: 15px; color: var(--fg-2); line-height: 1.55; flex: 1; margin: 0; }
.bizcard__link { margin-top: 24px; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--primary); font-size: 14px; }
@media (max-width: 720px) {
  .bizcard { padding: 36px 28px; min-height: 380px; }
  .bizcard__title { font-size: 28px; }
}

/* Decorative inline mini-art used by some bizcards */
.biz-led { position: absolute; inset: 0; background: #000; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(8, 1fr); gap: 2px; padding: 8px; }
.biz-led i { background: color-mix(in oklab, var(--primary) 70%, #000); opacity: .25; }
.biz-led i.on { opacity: 1; }
.biz-server { position: absolute; inset: 0; background: #0a0a14; overflow: hidden; }
.biz-server::before { content: ""; position: absolute; inset: 16px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 1px, transparent 1px 8px), repeating-linear-gradient(to right, rgba(255,255,255,.04) 0 1px, transparent 1px 12px); border: 1px solid rgba(255,255,255,.1); }
.biz-server::after { content: ""; position: absolute; left: 28px; top: 28px; width: 6px; height: 6px; background: var(--primary); box-shadow: 18px 0 0 var(--primary), 36px 0 0 #00e676, 0 14px 0 #00e676, 18px 14px 0 var(--primary), 36px 14px 0 var(--primary); }
.biz-video { position: absolute; inset: 0; background: #000; overflow: hidden; }
.biz-video::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, color-mix(in oklab, var(--primary) 60%, transparent), transparent 50%), radial-gradient(circle at 70% 60%, #FF4A4A55, transparent 50%); }
.biz-video::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: rgba(255,255,255,.95); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* CLIENTS GRID */
.clients { padding-bottom: 120px; }
.clients__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 160px; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 1100px) { .clients__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; } }
@media (max-width: 760px)  { .clients__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 120px; } }
@media (max-width: 480px)  { .clients__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; } }
.client { background: var(--bg-2); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; transition: background .2s var(--ease); }
.client:hover { background: var(--bg-3); }
.client--wide { grid-column: span 2; }
.client--tall { grid-row: span 2; }
@media (max-width: 480px) {
  .client--wide, .client--tall { grid-column: span 1; grid-row: span 1; }
}
.client__name { font-size: 14px; font-weight: 600; line-height: 1.3; z-index: 1; }
.client__type { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--fg-3); text-transform: uppercase; margin-bottom: 4px; z-index: 1; }
.client--photo { color: #fff; background-color: #00269A; background-size: cover; background-position: center; }
.client--photo .client__type { color: rgba(255,255,255,.85); }
.client--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.85) 100%); pointer-events: none; }
.client__photo { position: absolute; left: 12px; top: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.55); text-transform: uppercase; }
.client__art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fg-3); font-family: var(--font-mono); font-size: 14px; letter-spacing: .15em; text-transform: uppercase; opacity: .8; }
.client--logo { padding: 0; }
.client--logo .client__art { font-size: clamp(14px, 1.8vw, 22px); color: var(--fg); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; text-transform: none; }
.client--logo .client__type, .client--logo .client__name { display: none; }

/* NEWS */
.news { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 96px 0; }
.news__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 880px) { .news__row { grid-template-columns: 1fr; } }
.newsitem { display: block; padding: 28px 0 32px; border-top: 1px solid var(--line); }
.newsitem__date { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--fg-3); text-transform: uppercase; margin-bottom: 14px; }
.newsitem__badge { display: inline-flex; padding: 2px 8px; background: var(--primary); color: var(--on-primary); font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.newsitem__title { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin-bottom: 10px; }
.newsitem__excerpt { font-size: 14px; color: var(--fg-2); margin: 0; }

/* CTA STRIP (homepage bottom) */
.ctastrip { padding: 120px 0; text-align: center; }
.ctastrip h2 { font-size: clamp(40px, 6vw, 96px); letter-spacing: -0.035em; margin-bottom: 36px; word-break: keep-all; }
.ctastrip__actions { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 760px) { .ctastrip { padding: 80px 0; } }

/* single-project.php layout — was inline grid */
.cmg-project-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 64px;
}
@media (max-width: 880px) {
  .cmg-project-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   /about/certifications/ — cert + patent gallery
   ============================================================ */
.cmg-certs-title {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 16px;
  font-weight: 700;
}
.cmg-certs-lead {
  color: var(--fg-2);
  max-width: 640px;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 48px;
}

/* Summary metric strip */
.cmg-certs-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 80px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.cmg-certs-meta__row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 28px 32px;
  border-right: 1px solid var(--line);
}
.cmg-certs-meta__row:last-child { border-right: 0; }
.cmg-certs-meta__v {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary);
  line-height: 1;
}
.cmg-certs-meta__k {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.4;
}
.cmg-certs-meta__k span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--fg-3);
  font-weight: 400;
  margin-top: 2px;
  text-transform: uppercase;
}
@media (max-width: 880px) {
  .cmg-certs-meta__row { padding: 22px 24px; gap: 14px; }
  .cmg-certs-meta__v { font-size: 36px; }
}
@media (max-width: 600px) {
  .cmg-certs-meta { grid-template-columns: 1fr; }
  .cmg-certs-meta__row { border-right: 0; border-bottom: 1px solid var(--line); }
  .cmg-certs-meta__row:last-child { border-bottom: 0; }
}

/* Section group */
.cmg-certs-section { margin-bottom: 80px; }
.cmg-certs-section__head { margin-bottom: 28px; }
.cmg-certs-section__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.cmg-certs-section__heading {
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  font-weight: 700;
}
.cmg-certs-section__desc {
  color: var(--fg-2);
  max-width: 600px;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* Card grid — locked at 4 per row above mobile, drops to 2 on small phones. */
.cmg-certs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 560px) { .cmg-certs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.cmg-cert {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: inherit;
  overflow: hidden;
  cursor: default;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.cmg-cert:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.cmg-cert:hover .cmg-cert__media img { transform: scale(1.03); }

.cmg-cert__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmg-cert__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform .4s var(--ease);
  background: #fff;
}
.cmg-cert__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(27,31,140,.05) 10px 11px);
}
.cmg-cert__placeholder span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--fg-3);
  text-transform: uppercase;
  line-height: 1.5;
}

.cmg-cert__body {
  padding: 18px 20px 20px;
  border-top: 1px solid var(--line);
}
.cmg-cert__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--fg);
  line-height: 1.35;
  margin-bottom: 4px;
}
.cmg-cert__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.cmg-cert--noimg { cursor: default; }
.cmg-cert--noimg:hover { transform: none; border-color: var(--line); }

/* Lightbox overlay (opened by cmg.js when [data-lightbox] is clicked) */
.cmg-lightbox {
  position: fixed; inset: 0;
  background: rgba(7, 7, 13, .92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity .25s var(--ease);
  cursor: zoom-out;
}
.cmg-lightbox.is-open { opacity: 1; }
.cmg-lightbox img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.cmg-lightbox__close {
  position: absolute; top: 20px; right: 24px;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  cursor: pointer;
  padding: 8px 12px;
}
.cmg-lightbox__close::before { content: "ESC  "; opacity: .6; }

/* ============================================================
   /business/* — interactive sections (LED · 영상 · 음향)
   ============================================================ */
.cmg-biz-hero {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 48px 48px 52px;
  margin-bottom: 56px;
  position: relative;
  overflow: hidden;
}
.cmg-biz-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 18px;
}
/* BRITEON brand stamp at the top of the LED hero. LED-only variant. */
.cmg-biz-hero__brand {
  display: block;
  height: 36px;
  width: auto;
  margin-bottom: 22px;
}
[data-theme="dark"] .cmg-biz-hero__brand { filter: brightness(0) invert(1); }
/* Subtle watermark on the right side for extra brand presence on /business/led/. */
.cmg-biz-hero--briteon::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -20px;
  width: 320px;
  height: 320px;
  background: url('../assets/img/briteon-wordmark.svg') no-repeat center / contain;
  opacity: .04;
  pointer-events: none;
}
@media (max-width: 760px) {
  .cmg-biz-hero__brand { height: 28px; margin-bottom: 16px; }
  .cmg-biz-hero--briteon::after { display: none; }
}
.cmg-biz-hero__title {
  font-size: clamp(32px, 4.4vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 24px;
  font-weight: 700;
  max-width: 720px;
}
.cmg-biz-hero__lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 640px;
  margin: 0;
}

/* Metric trio under hero */
.cmg-biz-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 80px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.cmg-biz-metric {
  padding: 28px 32px;
  border-right: 1px solid var(--line);
}
.cmg-biz-metric:last-child { border-right: 0; }
.cmg-biz-metric__v {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary);
  line-height: 1;
}
.cmg-biz-metric__v small {
  font-size: .55em;
  margin-left: 4px;
  color: var(--fg-3);
  font-weight: 500;
  letter-spacing: 0;
}
.cmg-biz-metric__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 10px;
}
@media (max-width: 760px) {
  .cmg-biz-metrics { grid-template-columns: 1fr; }
  .cmg-biz-metric { border-right: 0; border-bottom: 1px solid var(--line); }
  .cmg-biz-metric:last-child { border-bottom: 0; }
}

/* Process timeline — clickable steps that reveal a detail panel */
.cmg-biz-section { margin: 0 0 96px; }
.cmg-biz-section__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.cmg-biz-section__heading {
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 12px;
  font-weight: 700;
}
.cmg-biz-section__desc {
  color: var(--fg-2);
  max-width: 600px;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 36px;
}

.cmg-biz-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.cmg-biz-process::before {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  top: 28px;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.cmg-biz-step {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 14px 14px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.cmg-biz-step:hover { border-color: var(--primary); transform: translateY(-2px); }
.cmg-biz-step.is-active { border-color: var(--primary); background: var(--bg-2); }
.cmg-biz-step__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  border-radius: 999px;
}
.cmg-biz-step__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.cmg-biz-step__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 4px;
}
.cmg-biz-process-panels {
  margin-top: 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 32px 36px;
  min-height: 140px;
}
.cmg-biz-process-panel { display: none; }
.cmg-biz-process-panel.is-active { display: block; }
.cmg-biz-process-panel h4 {
  font-size: 18px;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.cmg-biz-process-panel p {
  color: var(--fg-2);
  line-height: 1.7;
  font-size: 14.5px;
  margin: 0;
  max-width: 720px;
}
@media (max-width: 1100px) {
  .cmg-biz-process { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .cmg-biz-process { grid-template-columns: repeat(2, 1fr); }
  .cmg-biz-process::before { display: none; }
  .cmg-biz-process-panels { padding: 24px 24px; }
  .cmg-biz-hero { padding: 36px 28px 40px; margin-bottom: 40px; }
}
@media (max-width: 480px) {
  .cmg-biz-process { grid-template-columns: 1fr; }
}

/* Capability cards — 2-col grid of service area cards */
.cmg-biz-caps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 760px) { .cmg-biz-caps { grid-template-columns: 1fr; } }
.cmg-biz-cap {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.cmg-biz-cap:hover { border-color: var(--primary); transform: translateY(-2px); }
.cmg-biz-cap__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--primary);
}
.cmg-biz-cap__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.cmg-biz-cap__desc {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.cmg-biz-cap__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cmg-biz-cap__list li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--fg-2);
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: var(--bg);
}

/* Series picker for LED page */
.cmg-biz-series {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.cmg-biz-series__tabs {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}
.cmg-biz-series__tab {
  display: block;
  padding: 18px 24px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cmg-biz-series__tab:last-child { border-bottom: 0; }
.cmg-biz-series__tab:hover { background: var(--bg); }
.cmg-biz-series__tab.is-active {
  background: var(--primary);
  color: var(--on-primary);
}
.cmg-biz-series__tab small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fg-3);
  margin-top: 4px;
  text-transform: uppercase;
  font-weight: 400;
}
.cmg-biz-series__tab.is-active small { color: rgba(255,255,255,.7); }
.cmg-biz-series__panels {
  padding: 32px 36px;
}
.cmg-biz-series__panel { display: none; }
.cmg-biz-series__panel.is-active { display: block; }

/* Panel layout — image left, copy right. Image gets more weight (1.1fr / 1fr)
   so the right side fills out to match the 7-item tab list height. */
.cmg-biz-series__layout {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: stretch;
}
.cmg-biz-series__media {
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 320px;
}
.cmg-biz-series__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.cmg-biz-series__noimg {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.cmg-biz-series__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
.cmg-biz-series__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
}
.cmg-biz-series__copy h4 {
  font-size: 24px;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.cmg-biz-series__copy p {
  color: var(--fg-2);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}
.cmg-biz-series__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cmg-biz-series__chip {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--primary);
  padding: 6px 12px;
  border: 1px solid var(--primary);
}
/* Key-value highlight strip — gives the right panel two extra lines of
   substance so it doesn't look thin next to the long tab list. */
.cmg-biz-series__highlights {
  margin: 4px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 16px;
  font-size: 13px;
}
.cmg-biz-series__highlights dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
  align-self: center;
}
.cmg-biz-series__highlights dd {
  margin: 0;
  color: var(--fg);
  line-height: 1.5;
}
.cmg-biz-series__detail {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.cmg-biz-series__detail:hover {
  background: var(--primary);
  color: var(--on-primary);
}
@media (max-width: 760px) {
  .cmg-biz-series__panels { padding: 24px 24px; }
  .cmg-biz-series__layout { grid-template-columns: 1fr; gap: 20px; }
  .cmg-biz-series__media { min-height: 0; aspect-ratio: 16 / 9; max-height: 240px; }
}
@media (max-width: 480px) {
  .cmg-biz-series__highlights { grid-template-columns: 1fr; gap: 2px 0; }
  .cmg-biz-series__highlights dt { margin-top: 8px; }
}
@media (max-width: 760px) {
  .cmg-biz-series { grid-template-columns: 1fr; }
  .cmg-biz-series__tabs { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
  .cmg-biz-series__tab { flex: 1; min-width: 50%; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
}

/* Brand badge row */
.cmg-biz-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 32px;
}
.cmg-biz-brand {
  padding: 16px 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.cmg-biz-brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 400;
  margin-top: 2px;
}

/* CTA strip at the bottom of biz pages */
.cmg-biz-cta {
  margin-top: 48px;
  padding: 40px 44px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.cmg-biz-cta h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.cmg-biz-cta p {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.cmg-biz-cta__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .cmg-biz-cta { grid-template-columns: 1fr; }
}

/* /support/troubleshoot/ — chat-bubble decision tree
   Manual / technical tone — no playful chrome. */
.cmg-ts {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 28px 32px 24px;
  max-width: 820px;
}
.cmg-ts__hint {
  font-size: 13px;
  color: var(--fg-3);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.cmg-ts__thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cmg-ts__bubble {
  max-width: 88%;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid var(--line);
  word-break: keep-all;
}
.cmg-ts__bubble--sys {
  align-self: flex-start;
  background: var(--bg);
  color: var(--fg);
}
.cmg-ts__bubble--me {
  align-self: flex-end;
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: -0.005em;
}
.cmg-ts__q {
  margin: 0;
  font-weight: 500;
  color: var(--fg);
}
.cmg-ts__solution-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 3px 8px;
  border: 1px solid var(--primary);
  margin-bottom: 10px;
}
.cmg-ts__items {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmg-ts__items li {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.55;
}
.cmg-ts__items li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--fg-3);
}
.cmg-ts__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-end;
  max-width: 88%;
  justify-content: flex-end;
}
.cmg-ts__choice {
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--fg);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.cmg-ts__choice:hover:not(:disabled) {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.cmg-ts__choice:disabled { opacity: .5; cursor: default; }

.cmg-ts__actions {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.cmg-ts__action {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.cmg-ts__action--primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.cmg-ts__action--primary:hover { background: var(--cmg-navy-2); border-color: var(--cmg-navy-2); }
.cmg-ts__action--secondary { border-color: var(--primary); color: var(--primary); }
.cmg-ts__action--secondary:hover { background: var(--primary); color: var(--on-primary); }
.cmg-ts__action--ghost:hover { border-color: var(--primary); color: var(--primary); }

.cmg-ts__footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: right;
}
.cmg-ts__restart {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 0;
}
.cmg-ts__restart:hover { color: var(--primary); }

@media (max-width: 560px) {
  .cmg-ts { padding: 20px 18px 18px; }
  .cmg-ts__bubble { max-width: 100%; padding: 12px 14px; }
  .cmg-ts__choices, .cmg-ts__actions { max-width: 100%; }
  .cmg-ts__choice, .cmg-ts__action { flex: 1 1 auto; min-width: 0; }
}

/* /support/resources/ + /resources/ archive — downloads table.
   Lives in the main stylesheet so the [cmg_resources] shortcode on
   /support/resources/ gets the styles on first paint, not just after a
   visit to the /resources/ archive (which used to ship inline <style>). */
.res-table { width: 100%; border-collapse: collapse; margin: 40px 0 0; }
.res-table th {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-3); text-align: left;
  padding: 14px 16px; border-bottom: 2px solid var(--primary);
}
.res-table td {
  padding: 18px 16px; border-bottom: 1px solid var(--line);
  font-size: 14px; vertical-align: middle;
}
.res-table tr:hover td { background: var(--bg-2); }
.res-table .title { font-weight: 600; font-size: 15px; color: var(--fg); }
.res-table .badge {
  display: inline-flex; padding: 3px 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); border: 1px solid var(--primary);
}
.res-table .date { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.res-table .dl {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: var(--primary);
  color: var(--on-primary); font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.res-table .dl:hover { background: var(--cmg-navy-2); }
.res-table .dl--disabled {
  background: transparent; color: var(--fg-3);
  border: 1px solid var(--line-2);
}
.res-table .size { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-left: 4px; }
@media (max-width: 760px) {
  .res-table th.hide-mobile, .res-table td.hide-mobile { display: none; }
  .res-table { margin-top: 24px; }
  .res-table td, .res-table th { padding: 14px 12px; }
}

/* /support/contact/ + /support/as/ — tabbed contact pages */
.cmg-contact-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.cmg-contact-tab {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.cmg-contact-tab:hover { color: var(--fg); }
.cmg-contact-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.cmg-contact-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}
.cmg-contact-title {
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 16px;
  font-weight: 700;
}
.cmg-contact-lead {
  color: var(--fg-2);
  max-width: 600px;
  margin: 0 0 40px;
  font-size: 15px;
  line-height: 1.65;
}

.cmg-contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 880px) {
  .cmg-contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

.cmg-contact-form,
.cmg-contact-info {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 32px 36px;
}
/* Sticky 연락처 카드 — follows scroll like the product detail sidebar.
   Drops back to static on mobile where the layout stacks. */
.cmg-contact-info {
  position: sticky;
  top: 96px;
}
@media (max-width: 880px) {
  .cmg-contact-info { position: static; }
}
@media (max-width: 560px) {
  .cmg-contact-form,
  .cmg-contact-info { padding: 24px 22px; }
}
.cmg-contact-formhead,
.cmg-contact-infohead {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.cmg-contact-missing {
  color: var(--fg-3);
  font-size: 13px;
  padding: 24px;
  border: 1px dashed var(--line-2);
  line-height: 1.6;
}

/* CF7 form polish — make the default markup look like the rest of the site */
.cmg-contact-form .wpcf7-form p { margin: 0 0 18px; }
.cmg-contact-form label {
  display: block;
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  color: var(--fg-2);
  font-weight: 500;
}
.cmg-contact-form input[type="text"],
.cmg-contact-form input[type="tel"],
.cmg-contact-form input[type="email"],
.cmg-contact-form input[type="url"],
.cmg-contact-form input[type="number"],
.cmg-contact-form textarea,
.cmg-contact-form select {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color .15s var(--ease);
  box-sizing: border-box;
}
.cmg-contact-form textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.cmg-contact-form input:focus,
.cmg-contact-form textarea:focus,
.cmg-contact-form select:focus {
  outline: 0;
  border-color: var(--primary);
}
.cmg-contact-form .wpcf7-checkbox,
.cmg-contact-form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
}
.cmg-contact-form .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 13px;
  color: var(--fg-2);
}
.cmg-contact-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  color: var(--fg-2);
  font-weight: 400;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--line);
  transition: border-color .15s, color .15s;
}
.cmg-contact-form .wpcf7-list-item label:hover { border-color: var(--primary); color: var(--fg); }
.cmg-contact-form input[type="file"] {
  margin-top: 6px;
  font-size: 13px;
  color: var(--fg-2);
}
.cmg-contact-form .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px;
  background: var(--primary);
  color: var(--on-primary);
  border: 1px solid var(--primary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  width: auto;
  margin-top: 16px;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.cmg-contact-form .wpcf7-submit:hover {
  background: var(--cmg-navy-2);
  border-color: var(--cmg-navy-2);
}
.cmg-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.cmg-contact-form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  font-size: 13px;
}
.cmg-contact-form .wpcf7-not-valid-tip {
  color: #d9384a;
  font-size: 12px;
  margin-top: 4px;
}

/* Contact info card */
.cmg-contact-dl { margin: 0; }
.cmg-contact-dl dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 20px;
}
.cmg-contact-dl dt:first-of-type { margin-top: 0; }
.cmg-contact-dl dd {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
}
.cmg-contact-dl dd a { color: inherit; text-decoration: none; }
.cmg-contact-dl dd a:hover { color: var(--primary); }
.cmg-contact-phone {
  font-family: var(--font-mono);
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2 !important;
}
.cmg-contact-email {
  font-family: var(--font-mono);
  font-size: 16px !important;
}
.cmg-contact-email a { color: var(--primary) !important; }
.cmg-contact-aside { color: var(--fg-3); font-size: 12px; }

/* /support/location/ — 3 location cards w/ map iframe */
.cmg-location {
  margin-bottom: 48px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.cmg-location__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
}
.cmg-location__info { padding: 32px 36px; }
.cmg-location__info h3 { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 16px; }
.cmg-location__addr { font-size: 14px; line-height: 1.7; color: var(--fg-2); margin: 0 0 16px; }
.cmg-location__phone {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700; margin: 0 0 16px;
}
.cmg-location__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--primary); text-decoration: none;
}
.cmg-location__link:hover { text-decoration: underline; }
.cmg-location__map { position: relative; min-height: 320px; }
.cmg-location__map iframe { width: 100%; height: 100%; min-height: 320px; display: block; border: 0; }
@media (max-width: 880px) {
  .cmg-location__grid { grid-template-columns: 1fr; }
  .cmg-location__map, .cmg-location__map iframe { min-height: 240px; }
}

/* ============================================================
   BRITEON product detail — single-cmg_product.php
   Card-based layout matching the front-page .featcard system.
   ============================================================ */

/* Hero band — full-width product image card */
.briteon-hero {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 48px 64px;
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.briteon-hero img {
  display: block;
  max-width: 100%;
  max-height: 420px;
  height: auto;
  width: auto;
  object-fit: contain;
}
@media (max-width: 760px) {
  .briteon-hero { padding: 28px 20px; margin-bottom: 32px; }
  .briteon-hero img { max-height: 280px; }
}

/* Main layout — content + CTA sidebar */
.briteon-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 960px) {
  .briteon-layout { grid-template-columns: 1fr; gap: 32px; }
}

.briteon-detail {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* Lead paragraph — primary-line accent on the left to lift it above body
   copy without going full bold. Matches the .featcard / .briteon-card system. */
.briteon-lead {
  position: relative;
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--primary);
  word-break: keep-all;
}
@media (max-width: 560px) {
  .briteon-lead { font-size: 17px; padding-left: 16px; }
}

/* Feature chips row */
.briteon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.briteon-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 6px 12px;
  border: 1px solid var(--primary);
  background: transparent;
}

/* Spec card grid — paired cards (캐비닛/픽셀 + LED/제어) */
.briteon-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 760px) {
  .briteon-specs { grid-template-columns: 1fr; }
}

.briteon-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.briteon-card:hover { border-color: var(--primary); }
.briteon-card__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.briteon-card__empty {
  color: var(--fg-3);
  font-size: 13px;
  line-height: 1.6;
  margin: 4px 0 0;
}

/* Key-value rows inside a card */
.briteon-kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
  align-items: baseline;
}
.briteon-kv:last-of-type { border-bottom: 0; }
.briteon-kv__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.briteon-kv__v { color: var(--fg); line-height: 1.5; }
.briteon-kv__v.mono { font-family: var(--font-mono); font-size: 13px; }

/* Lists used inside Custom product cards */
.briteon-list { font-size: 14px; line-height: 1.8; margin: 0; padding-left: 18px; }
.briteon-list--cols { columns: 2; column-gap: 32px; }
@media (max-width: 480px) {
  .briteon-list--cols { columns: 1; }
}

/* Wide table cards (cabinet sizes, scan ratios) */
.briteon-table-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 22px 28px 26px;
}
.briteon-table-card__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--fg);
}
.briteon-pitch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.briteon-pitch-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.briteon-pitch-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
}
.briteon-pitch-table tr:last-child td { border-bottom: 0; }

/* Right sidebar wrapper — holds the CTA card AND the related-downloads card. */
.briteon-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 960px) {
  .briteon-aside { position: static; }
}

/* CTA sidebar */
.briteon-cta {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.briteon-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
}
.briteon-cta__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--fg);
}
.briteon-cta__lead {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}
.briteon-cta .btn { align-self: stretch; justify-content: center; }
.briteon-cta__catalog {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--primary);
  text-decoration: none;
  margin-top: -4px;
}
.briteon-cta__catalog:hover { text-decoration: underline; }
.briteon-cta__contact {
  margin: 12px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px 16px;
  font-size: 13px;
}
.briteon-cta__contact dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  align-self: center;
}
.briteon-cta__contact dd {
  margin: 0;
  font-family: var(--font-mono);
}
.briteon-cta__contact a { color: var(--fg); text-decoration: none; }
.briteon-cta__contact a:hover { color: var(--primary); }

/* Related downloads card — second block in the right sidebar. Same border
   language as the CTA card so the two read as a stacked pair. */
.briteon-related {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.briteon-related__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
}
.briteon-related__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--fg);
}
.briteon-related__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.briteon-related__item { border-bottom: 1px solid var(--line); }
.briteon-related__item:last-child { border-bottom: 0; }
.briteon-related__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 0;
  text-decoration: none;
  color: var(--fg);
  transition: color .15s var(--ease);
}
.briteon-related__link:hover { color: var(--primary); }
.briteon-related__badge {
  grid-column: 1 / -1;
  display: inline-flex;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 2px 8px;
  margin-bottom: 4px;
  justify-self: start;
}
.briteon-related__name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  word-break: keep-all;
}
.briteon-related__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--fg-3);
  text-transform: uppercase;
  white-space: nowrap;
}
.briteon-related__link--disabled { color: var(--fg-3); cursor: not-allowed; }
.briteon-related__link--disabled:hover { color: var(--fg-3); }
.briteon-related__link--disabled .briteon-related__badge {
  color: var(--fg-3);
  border-color: var(--line-2);
}
.briteon-related__more {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  align-self: flex-end;
}
.briteon-related__more:hover { text-decoration: underline; }

/* Footer nav strip */
.briteon-footnav {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   Custom pagination — used by archive-*.php via cmg_pagination()
   ============================================================ */
.cmg-pagination {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px;
  margin: 64px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.cmg-pagination__nav,
.cmg-pagination__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: .02em;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.cmg-pagination__num:hover,
.cmg-pagination__nav:hover {
  border-color: var(--primary); color: var(--primary);
}
.cmg-pagination__num.is-current {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
  cursor: default;
}
.cmg-pagination__gap {
  padding: 0 4px;
  color: var(--fg-3); font-family: var(--font-mono); font-size: 13px;
}
.cmg-pagination__nav {
  padding: 0 16px;
}

/* Common util */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 880px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   Tweaks panel
   ============================================================ */

.tweaks-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  width: 48px; height: 48px;
  background: var(--fg); color: var(--bg);
  border: 0;
  display: none; /* enabled by JS when edit mode is on */
  align-items: center; justify-content: center;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.3);
}
.tweaks-fab.is-on { display: inline-flex; }

.tweaks {
  position: fixed; right: 20px; bottom: 80px; z-index: 95;
  width: 320px; max-height: 75vh; overflow-y: auto;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 64px -16px rgba(0,0,0,.25);
  padding: 0;
  display: none;
}
.tweaks.is-open { display: block; }
.tweaks__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.tweaks__head button {
  background: transparent; border: 0; color: var(--fg-3); padding: 4px;
}
.tweaks__body { padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 18px; }
.tweak {
  display: flex; flex-direction: column; gap: 8px;
}
.tweak__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3);
}
.tweak__row { display: flex; gap: 6px; flex-wrap: wrap; }
.tweak__swatch {
  width: 28px; height: 28px;
  border: 1px solid var(--line-2);
  cursor: pointer; padding: 0;
}
.tweak__swatch.is-on { outline: 2px solid var(--fg); outline-offset: 2px; }
.tweak__seg { display: inline-flex; border: 1px solid var(--line-2); }
.tweak__seg button {
  background: transparent; border: 0; color: var(--fg-2);
  padding: 8px 12px; font-size: 12px; font-weight: 500;
  border-right: 1px solid var(--line-2);
}
.tweak__seg button:last-child { border-right: 0; }
.tweak__seg button.is-on { background: var(--fg); color: var(--bg); }
.tweak__input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-2); background: var(--bg);
  color: var(--fg); font-size: 13px;
  font-family: inherit;
}
.tweak__input--lg { min-height: 72px; resize: vertical; line-height: 1.4; }

/* Theme transitions */
html, body, .site-header, .mega, .featcard, .pagehead, .ph, .site-footer, .subnav, .btn, .nav__cta, .specs__row {
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}