아래 구분선으로 구분된 두 코드는 웹페이지에 존재하는 거의 모든 “상단 바(헤더‧네비바‧Top-bar 등)”를 #2F4F2F(딥 그린)으로 바꾸는 css 코드야. 실리콘밸리 css 전문가의 입장에서, 두 코드의 실효성과 효율성에 대해 점수를 매기고, 두 코드에서 얻은 교훈을 바탕으로 최상의 css 코드를 제공해 줘.

---

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   🎨 Design System Variables

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {

  --header-bg: #2F4F2F;

  --header-fg: #FFFFFF;

  --header-link: #B8E6B8;

  --header-hover: #A0D6A0;

  --header-shadow: 0 2px 4px rgba(0,0,0,0.1);

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   📍 Primary Header Selectors (High Specificity)

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Level 1: Semantic HTML */

header:not([data-skip-theme]),

nav:not([data-skip-theme]),

[role="banner"]:not([data-skip-theme]),

[role="navigation"]:not([data-skip-theme]) {

  background: var(--header-bg) !important;

  color: var(--header-fg) !important;

  box-shadow: var(--header-shadow) !important;

}

/* Level 2: Position-based (더 구체적인 선택자) */

[style*="position: fixed"][style*="top: 0"],

[style*="position: sticky"][style*="top: 0"],

.fixed:is(.top-0, [class*="top-0"]),

.sticky:is(.top-0, [class*="top-0"]) {

  background: var(--header-bg) !important;

  color: var(--header-fg) !important;

}

/* Level 3: Common naming patterns (성능 최적화) */

:is(

  [class^="header"], [class*=" header"],

  [class^="navbar"], [class*=" navbar"],

  [class^="topbar"], [class*=" topbar"],

  [class^="app-bar"], [class*=" app-bar"]

):where(:not([data-skip-theme])) {

  background: var(--header-bg) !important;

  color: var(--header-fg) !important;

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   🎯 Child Elements Styling

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Text elements */

:is(header, nav, [role="banner"]) :is(p, span, div, li) {

  color: inherit !important;

}

/* Links with hover states */

:is(header, nav, [role="banner"]) a {

  color: var(--header-link) !important;

  transition: color 0.2s ease;

}

:is(header, nav, [role="banner"]) a:hover {

  color: var(--header-hover) !important;

}

/* SVG icons */

:is(header, nav, [role="banner"]) svg {

  fill: currentColor !important;

  stroke: currentColor !important;

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   🛡️ Override Protection

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Remove gradients and images */

:is(header, nav, [role="banner"]) {

  background-image: none !important;

  backdrop-filter: none !important;

}

/* Ensure visibility */

:is(header, nav, [role="banner"]) {

  z-index: 999999 !important;

  position: relative;

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   🎮 Interactive Elements

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Buttons and inputs */

:is(header, nav, [role="banner"]) :is(button, input, select) {

  background: rgba(255,255,255,0.1) !important;

  color: var(--header-fg) !important;

  border: 1px solid rgba(255,255,255,0.2) !important;

}

:is(header, nav, [role="banner"]) :is(button, input, select):hover {

  background: rgba(255,255,255,0.2) !important;

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   📱 Responsive Considerations

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {

  /* Mobile menu backgrounds */

  [class*="mobile-menu"],

  [class*="burger-menu"],

  [class*="drawer"] {

    background: var(--header-bg) !important;

  }

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   🚀 Performance Optimization

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Prevent layout thrashing */

:is(header, nav, [role="banner"]) {

  contain: layout style;

  will-change: auto;

}

---

:root {

  --topbar-bg: #2F4F2F;

  --topbar-fg: #ffffff;

  --safe-z-index: 1000; /* 과도한 z-index 방지 */

}

/* ■■■ Core Selectors (위치 + 시맨틱 태그 + 클래스명) ■■■ */

/* 1. Fixed/Sticky + top:0 */

[style*="position:fixed"][style*="top:0"],

[style*="position:sticky"][style*="top:0"],

.fixed.top-0, .sticky.top-0,

/* 2. 시맨틱 태그 (header/nav는 최상위 요소로 제한) */

html > header,

html > nav,

html > [role="banner"],

/* 3. 클래스명 패턴 (대소문자 구분 없이 매칭) */

[class*="-header"],

[class*="-navbar"],

[class*="-topbar"],

[class*="-appbar"],

[class*="-top-bar"],

[id*="-header"],

[id*="-navbar"] {

  --apply-topbar-styles: true; /* 가상 플래그 */

}

/* ■■■ 스타일 적용 (플래그가 true인 경우에만) ■■■ */

:where([style*="--apply-topbar-styles: true"]) {

  background-color: var(--topbar-bg) !important;

  color: var(--topbar-fg) !important;

  fill: var(--topbar-fg) !important;

  stroke: var(--topbar-fg) !important;

  border-color: transparent !important;

  

  background-image: none !important;

  z-index: var(--safe-z-index) !important;

}

/* ■■■ 자식 요소 색상 (직계 자식만 타겟팅) ■■■ */

:where([style*="--apply-topbar-styles: true"]) > * {

  color: var(--topbar-fg);

  fill: var(--topbar-fg);

}

/* ■■■ 예외 처리 (오탐지 방지) ■■■ */

/* 예: GitHub의 코드 헤더 제외 */

.js-code-nav,

.file-header,

/* 추가 예외는 여기에 */

{

  --apply-topbar-styles: false !important;

}