/* ============================================================================
   화성인사이드 디자인 시스템 오버라이드 레이어 (theme-inside.css)
   ----------------------------------------------------------------------------
   목적: 기존 한지·화로 웜톤(종이색 + 붉은 인장 + 구리색) 4개 CSS 시스템을
         화성인사이드 톤(딥블랙 #0A0A0A + 오프화이트 #F2F0EA + 오렌지 #E8622A)으로
         전면 재매핑한다. 기존 파일은 수정하지 않고 변수 재정의 + 동일 특이도
         후행 로드 오버라이드로만 동작한다.

   로드 순서(모든 페이지 공통): 기존 CSS 전부 뒤, 마지막 <link>로 로드할 것.
     styles.css / public-site.css / admin.css / organization.css
     / landing-v2.css / workspace-v2.css → (마지막) theme-inside.css

   폰트: Pretendard Variable은 HTML에서 별도 link로 self-host 로드된다.
         (/assets/fonts/pretendardvariable-dynamic-subset.css)
         이 파일은 폰트 스택 오버라이드만 담당한다.

   차례
     §1  화성인사이드 토큰 (--hi-*)
     §2  타이포그래피 (폰트 스택 강제)
     §3  전역 접근성·반응형 보증 (포커스링 / 터치 타깃 / reduced-motion)
     §4  브리지: styles.css 워크스페이스 변수 (+ body.theme-dark)
     §5  브리지: styles.css 포털 V2 --hg-* (+ body.theme-dark)
     §6  브리지: public-site.css --ps-*
     §7  브리지: admin.css 변수
     §8  브리지: organization.css oklch 변수
     §9  하드코딩 색 오버라이드 — styles.css 레거시 워크스페이스/포털
     §10 하드코딩 색 오버라이드 — 포털 V2 홈 섹션 (한지/화로 배경 제거)
     §11 하드코딩 색 오버라이드 — body.theme-dark 붉은 계열 교체
     §12 하드코딩 색 오버라이드 — public-site.css / admin.css
     §13 "열린 창" 유틸리티 (.hi-window / .hi-info-card / .hi-section-head / .hi-reveal)
   ========================================================================== */

/* ============================================================
   §1 화성인사이드 토큰
   ============================================================ */
:root {
  /* 팔레트 원색 */
  --hi-orange: #e8622a;        /* 브랜드 액센트: 큰 제목·룰·면·아이콘 전용 */
  --hi-orange-strong: #c94e1c; /* 밝은 배경 위 굵은 UI 텍스트·포커스링 (≥4:1) */
  --hi-orange-ink: #a63e12;    /* 밝은 배경 위 소형 라벨 텍스트 (≥4.5:1) */
  --hi-orange-soft: #f08a5c;   /* 어두운 배경 위 액센트 텍스트 */
  --hi-orange-tint: rgba(232, 98, 42, 0.12);
  --hi-orange-tint-strong: rgba(232, 98, 42, 0.2);
  --hi-black: #0a0a0a;         /* 딥블랙: 히어로·푸터 배경, 밝은 면 위 잉크 */
  --hi-black-2: #141414;       /* 딥블랙 위 1단계 표면 */
  --hi-black-3: #1d1d1d;       /* 딥블랙 위 2단계 표면 */
  --hi-offwhite: #f2f0ea;      /* 오프화이트: 밝은 면 배경, 어두운 면 위 본문 */
  --hi-white: #ffffff;         /* 순백: 카드 표면 */
  --hi-paper-deep: #e7e4db;    /* 오프화이트 심화 단계 */

  /* 텍스트 */
  --hi-ink: #0a0a0a;
  --hi-ink-2: #26262b;
  --hi-muted: #5c5b56;
  --hi-text-on-dark: #f2f0ea;
  --hi-muted-on-dark: #aba9a2;

  /* 라인 */
  --hi-line: rgba(10, 10, 10, 0.14);
  --hi-line-strong: rgba(10, 10, 10, 0.26);
  --hi-line-on-dark: rgba(242, 240, 234, 0.16);

  /* 상태색 (오렌지와 충돌하지 않게: 녹색/올리브/크림슨) */
  --hi-success: #2e7d4f;
  --hi-success-on-dark: #63c08a;
  --hi-warning: #6e5a10;
  --hi-warning-bg: #f1e9c9;
  --hi-warning-on-dark: #e0be55;
  --hi-error: #a8232f;
  --hi-error-bg: #fbedee;
  --hi-error-on-dark: #f1808a;

  /* 파생 */
  --hi-shadow: 0 18px 60px rgba(10, 10, 10, 0.12);
  --hi-shadow-on-dark: 0 18px 60px rgba(0, 0, 0, 0.5);
  --hi-cta-gradient: linear-gradient(180deg, #e8622a, #c2450f);
  --hi-focus: var(--hi-orange-strong);
  --hi-accent-text: var(--hi-orange-ink); /* 문맥별 액센트 텍스트(라이트 기본) */
  --hi-font:
    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Noto Sans KR", sans-serif;
}

body.theme-dark {
  --hi-focus: var(--hi-orange-soft);
  --hi-accent-text: var(--hi-orange-soft);
}

/* 어두운 면 위 콘텐츠용 컨텍스트 헬퍼 */
.hi-on-dark {
  --hi-accent-text: var(--hi-orange-soft);
  color: var(--hi-text-on-dark);
}

/* ============================================================
   §2 타이포그래피 — Pretendard 스택 강제
   기존 4개 시스템의 body/:root 선언과 개별 "Noto Serif KR" 하드코딩
   (styles.css 17곳, admin.css 9곳, organization.css 14곳)을 한 번에 이긴다.
   단일 서체 브랜드이므로 여기서만 !important를 사용한다(최후수단).
   ============================================================ */
html,
body,
body * {
  font-family: var(--hi-font) !important;
}

code,
pre,
kbd,
samp,
code *,
pre * {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace !important;
}

:root {
  font-family: var(--hi-font);
}

/* ============================================================
   §3 전역 접근성·반응형 보증
   ============================================================ */
html {
  min-width: 320px;
}

/* 포커스링: landing-v2.css의 #9f1415, admin.css의 rgba(143,48,36,…),
   styles.css / organization.css의 자체 포커스 규칙을 각각 동일 특이도로 교체 */
:focus-visible {
  outline: 3px solid var(--hi-focus);
  outline-offset: 3px;
}

body.theme-dark :focus-visible {
  outline-color: var(--hi-orange-soft);
}

/* landing-v2.css 선택자 미러 (공개 페이지) */
:is(.portal-body, .public-page) a:focus-visible,
:is(.portal-body, .public-page) button:focus-visible,
:is(.portal-body, .public-page) input:focus-visible,
:is(.portal-body, .public-page) select:focus-visible,
:is(.portal-body, .public-page) textarea:focus-visible {
  outline: 3px solid var(--hi-focus);
  outline-offset: 3px;
}

/* admin.css 선택자 미러 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--hi-focus);
  outline-offset: 3px;
}

/* styles.css 워크스페이스 폼 포커스 미러 */
.search-box input:focus-visible,
textarea:focus-visible,
.profile-register-grid input:focus-visible,
.profile-register-grid select:focus-visible,
.mypage-form input:focus-visible,
.mypage-form textarea:focus-visible {
  outline: 3px solid var(--hi-focus);
  border-color: var(--hi-orange-strong);
}

/* 터치 타깃 44px — landing-v2.css가 공개 페이지에만 걸던 규칙을
   admin/organization 워크스페이스까지 전역 확대 */
button,
select,
summary,
.button,
.nav-cta,
[role="button"] {
  min-height: 44px;
}

/* 모션 축소: 모든 페이지에서 애니메이션 무력화 (.hi-reveal 포함) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hi-reveal,
  .hi-reveal * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   §4 브리지 — styles.css 워크스페이스 변수
   (admin.css와 :root 변수명을 일부 공유하므로 여기서 함께 통합 재정의)
   ============================================================ */
:root {
  /* styles.css :root */
  --ink: var(--hi-ink);
  --ink-2: var(--hi-ink-2);
  --muted: var(--hi-muted);
  --line: #d9d6ce;
  --soft-line: #e5e2da;
  --paper: var(--hi-offwhite);
  --surface: var(--hi-white);
  --warm: var(--hi-paper-deep);
  --accent: var(--hi-orange-strong);
  --accent-2: var(--hi-orange);
  --gold: var(--hi-orange-strong);
  --green: var(--hi-success);
  --shadow: var(--hi-shadow);

  /* admin.css :root (공유명 --ink/--muted/--paper/--line/--gold 포함, 위와 동일값) */
  --paper-deep: var(--hi-paper-deep);
  --white: var(--hi-white);
  --ember: var(--hi-orange-strong);
  --ember-dark: var(--hi-orange-ink);
  --success: var(--hi-success);
  --error: var(--hi-error);
}

body.theme-dark {
  --ink: var(--hi-text-on-dark);
  --ink-2: #ddd9d1;
  --muted: var(--hi-muted-on-dark);
  --line: #2c2c2c;
  --soft-line: #222222;
  --paper: var(--hi-black);
  --surface: var(--hi-black-2);
  --warm: var(--hi-black-3);
  --accent: var(--hi-orange);
  --accent-2: var(--hi-orange-soft);
  --gold: var(--hi-orange-soft);
  --green: var(--hi-success-on-dark);
  --shadow: var(--hi-shadow-on-dark);
  background: var(--paper);
  color: var(--ink);
}

/* ============================================================
   §5 브리지 — styles.css 포털 V2 (--hg-*)
   ============================================================ */
:root {
  --hg-ink: var(--hi-ink);
  --hg-muted: #55544f;
  --hg-red: var(--hi-orange-strong);
  --hg-red-strong: var(--hi-orange);
  --hg-paper: var(--hi-offwhite);
  --hg-surface: var(--hi-white);
  --hg-line: rgba(10, 10, 10, 0.14);
  --hg-line-soft: rgba(10, 10, 10, 0.08);
}

body.theme-dark {
  --hg-ink: var(--hi-text-on-dark);
  --hg-muted: var(--hi-muted-on-dark);
  --hg-red: var(--hi-orange-soft);
  --hg-red-strong: var(--hi-orange);
  --hg-paper: var(--hi-black);
  --hg-surface: var(--hi-black-2);
  --hg-line: var(--hi-line-on-dark);
  --hg-line-soft: rgba(242, 240, 234, 0.09);
}

/* 포털 V2 헤더의 웜 화이트 배경을 오프화이트 계열로 */
.site-header {
  background: rgba(242, 240, 234, 0.92);
}

body.theme-dark .site-header {
  background: rgba(10, 10, 10, 0.88);
}

/* ============================================================
   §6 브리지 — public-site.css (--ps-*)
   ============================================================ */
:root {
  --ps-ink: var(--hi-ink);
  --ps-ink-soft: var(--hi-ink-2);
  --ps-paper: var(--hi-offwhite);
  --ps-paper-bright: var(--hi-white);
  --ps-paper-deep: var(--hi-paper-deep);
  --ps-muted: var(--hi-muted);
  --ps-line: rgba(10, 10, 10, 0.16);
  --ps-line-light: rgba(242, 240, 234, 0.2);
  --ps-red: var(--hi-orange-strong);
  --ps-red-dark: var(--hi-orange-ink);
  --ps-copper: var(--hi-orange);
  --ps-ivory: var(--hi-offwhite);
  --ps-green: var(--hi-success);
  --ps-sans: var(--hi-font);
  --ps-serif: var(--hi-font);
}

/* ============================================================
   §7 브리지 — admin.css
   (변수 자체는 §4에서 통합 재정의. 여기는 admin 전용 잔여 규칙만)
   ============================================================ */
/* admin body의 붉은 모눈 배경 → 무지 오프화이트 */
body {
  background: var(--paper, var(--hi-offwhite));
}

/* ============================================================
   §8 브리지 — organization.css (oklch 형식 유지, 값만 교체)
   ink/paper는 무채색(채도 0 근사), ember는 브랜드 오렌지(hue 41)로.
   forest 계열은 브랜드와 충돌하지 않으므로 유지한다.
   ============================================================ */
:root {
  --ink-950: oklch(0.15 0.004 80);
  --ink-800: oklch(0.28 0.004 80);
  --ink-650: oklch(0.44 0.004 80);
  --paper-50: oklch(0.975 0.004 92);
  --paper-100: oklch(0.958 0.006 92);
  --paper-200: oklch(0.92 0.007 92);
  --paper-300: oklch(0.85 0.008 92);
  --ember-700: oklch(0.52 0.15 41);
  --ember-600: oklch(0.65 0.175 41);
  --ember-100: oklch(0.93 0.045 45);
  --amber-700: oklch(0.5 0.09 95);
  --amber-100: oklch(0.94 0.05 95);
  --error-700: oklch(0.45 0.16 20);
  --error-100: oklch(0.94 0.04 20);
  --shadow-sm: 0 1px 3px oklch(0.2 0.004 80 / 0.08), 0 1px 2px oklch(0.2 0.004 80 / 0.04);
  --shadow-md: 0 16px 40px oklch(0.2 0.004 80 / 0.1), 0 4px 10px oklch(0.2 0.004 80 / 0.05);
}
/* 주의: organization.css의 --white/--line 은 admin·styles와 이름을 공유하며
   §4의 --white:#ffffff / --line:#d9d6ce 로 통합 재정의된다(값 동등). */

/* organization.css: 어두운 패널의 앰버 글로우·구리색 라벨 → 오렌지(oklch 유지) */
.auth-story {
  background:
    radial-gradient(circle at 78% 20%, oklch(0.65 0.175 41 / 0.26), transparent 30%),
    radial-gradient(circle at 5% 90%, oklch(0.65 0.175 41 / 0.14), transparent 33%),
    var(--ink-950);
}

.process-section {
  background:
    radial-gradient(circle at 90% 10%, oklch(0.65 0.175 41 / 0.24), transparent 30%),
    var(--ink-950);
}

.metric-primary {
  background:
    linear-gradient(145deg, transparent 52%, oklch(0.65 0.175 41 / 0.2)),
    var(--ink-950);
}

.auth-story-copy .eyebrow,
.auth-process span,
.process-section .eyebrow,
.process-list li > span {
  color: oklch(0.76 0.13 45);
}

/* ============================================================
   §9 하드코딩 색 오버라이드 — styles.css 레거시 워크스페이스/포털
   ============================================================ */

/* 9-1. .home-body 랜딩: Unsplash 외부 이미지 하드코딩 제거 */
.home-body {
  background: var(--hi-offwhite);
}

.home-logo span {
  color: var(--hi-orange-strong);
}

/* 9-2. 어두운 레일/사이드바: Unsplash 배경 + 금색 보더 → 딥블랙 면 */
.brand-rail,
.reference-sidebar,
.portal-sidebar,
.platform-body .brand-rail {
  border-right-color: rgba(232, 98, 42, 0.55);
  background: var(--hi-black-2);
}

.portal-sidebar {
  border-bottom-color: rgba(232, 98, 42, 0.55);
}

.brand-mark span {
  color: var(--hi-orange);
}

/* 9-3. 어두운 면 위 금색(#d6a24b 계열) 라벨 → 오렌지 */
.profile-share-card-top span,
.profile-public-section > span,
.profile-share-card-main em,
.public-share-card span,
.public-share-empty span,
.reference-brand span,
.reference-brand small,
.reference-menu a.active,
.reference-menu a:hover,
.sidebar-note span,
.reference-hero-copy > strong,
.reference-footer span,
.platform-body .brand-mark,
.platform-body .brand-mark span,
.platform-body .brand-block small,
.platform-body .nav-item.active,
.platform-body .nav-item:hover,
.platform-body .rail-footer strong,
.portal-brand span,
.portal-brand small,
.sidebar-auth-guest button:last-child,
.portal-menu button.active,
.portal-menu button:hover,
.portal-sidebar-note span,
.portal-hero-copy > strong {
  color: var(--hi-orange);
}

/* 9-4. 밝은 면 위 금색 라벨 → 오렌지 잉크(AA 확보) */
.onboarding-copy span,
.onboarding-steps li.complete strong,
.mypage-business-card span,
.account-summary-card span,
.readonly-score-card span,
.mypage-section-card > span,
.mypage-business-card dt,
.account-summary-card dt {
  color: var(--hi-orange-ink);
}

/* 챗봇 헤더·아바타 배지는 어두운 면 → 오렌지 */
.chatbot-header span,
.chatbot-message > span {
  color: var(--hi-orange);
}

.onboarding-steps li.active {
  border-color: var(--hi-orange);
}

/* 9-5. 밝은 면 위 붉은 액센트 텍스트/보더 → 오렌지 잉크·스트롱 */
.service-icon,
.platform-body .search-box span,
.platform-body .member-card .card-detail-cta,
.platform-body .stat-box strong,
.platform-body .match-score,
.preview-mini-list strong,
.portal-topnav button.active,
.auth-join-button,
.portal-auth-user button,
.portal-account-menu > button:hover,
.auth-check a,
.auth-card-header span,
.auth-demo strong,
.auth-message[data-type="error"],
.admin-actions button {
  color: var(--hi-orange-ink);
}

.support-card a {
  border-color: var(--hi-orange-strong);
  color: var(--hi-orange-ink);
}

.auth-demo button {
  border-color: var(--hi-orange-strong);
  color: var(--hi-orange-ink);
}

.chatbot-route-action {
  border-color: var(--hi-orange-strong);
  color: var(--hi-orange-ink);
}

.platform-body .tab-button.active {
  border-color: var(--hi-orange);
  color: var(--hi-orange-ink);
}

.platform-body .question-list button:hover {
  border-color: var(--hi-orange-strong);
  color: var(--hi-orange-ink);
}

.admin-badge {
  border-color: var(--hi-line-strong);
  color: var(--hi-orange-ink);
}

.admin-badge.suspended,
.admin-badge.rejected {
  background: var(--hi-error-bg);
  color: var(--hi-error);
}

.admin-filter button.active {
  border-color: var(--hi-orange-strong);
  background: var(--hi-orange-tint);
  color: var(--hi-orange-ink);
}

.portal-account-toggle span {
  border-right-color: var(--hi-orange-strong);
  border-bottom-color: var(--hi-orange-strong);
}

.portal-context {
  color: var(--hi-muted);
}

.auth-form input:focus,
.auth-form select:focus {
  border-color: var(--hi-orange);
}

/* 9-6. 붉은 그라데이션 CTA → 오렌지 그라데이션 */
.reference-cta,
.platform-body .primary-button,
.platform-body:not(.theme-dark) .primary-button,
.portal-cta,
.auth-submit,
.chatbot-form button,
.util-join,
.portal-loader-retry {
  border-color: var(--hi-orange-strong);
  background: var(--hi-cta-gradient);
}

.platform-body .filter-chip.active {
  border-color: var(--hi-orange);
  background: var(--hi-cta-gradient);
}

.home-vision-list em {
  background: var(--hi-cta-gradient);
}

/* 9-7. 게이지·링·바·로더의 붉은색 → 오렌지 */
.platform-body .score-ring,
.platform-body .large-score {
  border-top-color: var(--hi-orange);
  border-right-color: var(--hi-orange);
}

.profile-card-score {
  border-top-color: var(--hi-orange);
  border-right-color: var(--hi-orange);
}

.platform-body .bar span {
  background: var(--hi-orange);
}

.portal-loader span {
  border-top-color: var(--hi-orange);
}

.platform-body .member-card.selected::before {
  border-color: var(--hi-orange);
}

.platform-body .score-panel {
  border-color: var(--hi-orange-tint-strong);
}

.platform-body .assistant-header span {
  border-color: var(--hi-orange-tint-strong);
}

.screen-toolbar button {
  background: var(--hi-orange-strong);
}

.screen-search:hover,
.screen-search:focus-visible {
  border-color: var(--hi-orange-strong);
}

.skip-link {
  background: var(--hi-black);
}

.portal-theme-switch button.active {
  border-color: var(--hi-orange-strong);
  background: var(--hi-orange-strong);
}

/* 9-8. 붉은 틴트 면 → 오렌지 틴트 */
.survey-tabs button.active {
  background: var(--hi-orange-tint);
}

.survey-choice-group label.selected {
  background: var(--hi-orange-tint);
}

.chatbot-message.user > span {
  background: var(--hi-orange);
}

.chatbot-message.user p {
  border-color: var(--hi-orange-strong);
  background: var(--hi-orange-tint);
}

/* 9-9. Unsplash/웜 배경 면 정리 */
.preview-photo {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.06), rgba(10, 10, 10, 0.16)),
    var(--hi-black-3);
}

.video-box,
.platform-body .video-box {
  background:
    radial-gradient(circle at 80% 15%, rgba(232, 98, 42, 0.22), transparent 46%),
    var(--hi-black-2);
}

.public-share-card,
.public-share-empty {
  border-color: var(--hi-line-on-dark);
  background:
    radial-gradient(circle at 85% 12%, rgba(232, 98, 42, 0.16), transparent 44%),
    var(--hi-black-2);
}

.profile-card-hero {
  background:
    radial-gradient(circle at 88% 18%, rgba(232, 98, 42, 0.2), transparent 46%),
    var(--hi-black);
}

.reference-hero {
  background:
    radial-gradient(circle at 82% 22%, rgba(232, 98, 42, 0.18), transparent 46%),
    var(--hi-black);
}

.portal-hero {
  background:
    radial-gradient(circle at 82% 22%, rgba(232, 98, 42, 0.18), transparent 46%),
    var(--hi-black);
}

.portal-hero-copy > p:not(.portal-kicker) {
  color: rgba(242, 240, 234, 0.82);
}

.platform-body .app-shell {
  background: var(--paper);
}

.platform-body .workspace,
.platform-body.embed-mode .workspace,
.platform-body:not(.theme-dark) .workspace,
.platform-body.embed-mode:not(.theme-dark) .workspace {
  background: var(--paper);
}

body.theme-dark.platform-body,
body.theme-dark.platform-body .app-shell {
  background: var(--paper);
}

body.theme-dark.platform-body .workspace {
  background: var(--paper);
}

.portal-topbar,
.platform-body .topbar {
  border-bottom-color: var(--hi-line);
  background: rgba(242, 240, 234, 0.94);
}

/* 챗봇 헤더: Unsplash + 금색 보더의 어두운 패널 → 딥블랙 면 유지 */
.chatbot-header {
  border-bottom-color: rgba(232, 98, 42, 0.3);
  background:
    radial-gradient(circle at 85% 20%, rgba(232, 98, 42, 0.2), transparent 46%),
    var(--hi-black-2);
}

/* ============================================================
   §10 하드코딩 색 오버라이드 — 포털 V2 홈 섹션
   (bg-hero-hearth / bg-hanji-texture / bg-embers-close 무력화)
   ============================================================ */

/* 히어로: 화로 사진 → 딥블랙 + 오렌지 글로우 */
.home-hero {
  color: var(--hi-offwhite);
  background:
    radial-gradient(circle at 50% 118%, rgba(232, 98, 42, 0.28), transparent 58%),
    radial-gradient(circle at 84% 8%, rgba(232, 98, 42, 0.1), transparent 34%),
    var(--hi-black);
}

/* 화로 불씨 파티클 연출 제거 (화로 모티브 금지) */
.home-hero-embers {
  display: none;
}

.home-hero-eyebrow {
  color: var(--hi-orange);
}

.home-hero-title em {
  color: var(--hi-orange);
}

.home-hero-stats strong {
  color: var(--hi-orange);
}

/* 한지 텍스처 섹션 → 오프화이트 무지면 */
.home-fields {
  background: var(--hi-offwhite);
}

.home-quote {
  background: var(--hi-white);
}

.home-about-quote {
  color: var(--hi-ink-2);
}

/* 화로 불씨 사진 섹션 → 딥블랙 */
.home-values {
  background:
    radial-gradient(circle at 12% 88%, rgba(232, 98, 42, 0.14), transparent 42%),
    var(--hi-black);
}

.home-values .home-section-head span {
  color: var(--hi-orange);
}

.home-value-grid strong {
  color: var(--hi-orange-soft);
}

.home-cta-band {
  background:
    radial-gradient(circle at 88% 50%, rgba(232, 98, 42, 0.24), transparent 52%),
    var(--hi-black);
}

.home-cta {
  border-color: var(--hi-orange-strong);
  background: var(--hi-cta-gradient);
}

/* ============================================================
   §11 하드코딩 색 오버라이드 — body.theme-dark 붉은 계열 교체
   ============================================================ */
body.theme-dark .portal-topnav button.active,
body.theme-dark .portal-account-menu > button:hover,
body.theme-dark .gnb-item.current .gnb-top,
body.theme-dark .gnb-top.active,
body.theme-dark .gnb-item:hover .gnb-top,
body.theme-dark .gnb-drop button:hover,
body.theme-dark .gnb-drop button.active,
body.theme-dark .util-account-menu > button:hover,
body.theme-dark .home-flow strong,
body.theme-dark .home-quote blockquote em,
body.theme-dark .site-footer-links a:hover,
body.theme-dark .site-footer-links button:hover,
body.theme-dark .auth-check a {
  color: var(--hi-orange-soft);
}

body.theme-dark .portal-account-toggle span {
  border-color: var(--hi-orange-soft);
}

body.theme-dark .gnb-top::after {
  background: var(--hi-orange-soft);
}

body.theme-dark .portal-theme-switch button.active,
body.theme-dark .util-theme button.active {
  border-color: var(--hi-orange-strong);
  background: var(--hi-orange-strong);
}

body.theme-dark .auth-tabs button.active {
  background: var(--hi-orange-strong);
}

body.theme-dark .chatbot-message.user p {
  border-color: var(--hi-orange-soft);
}

/* 라이트 util-theme 액티브도 동일 계열로 (원본은 --hg 변수 기반이면 자동) */
.util-theme button.active {
  border-color: var(--hi-orange-strong);
  background: var(--hi-orange-strong);
}

/* ============================================================
   §12 하드코딩 색 오버라이드 — public-site.css / admin.css
   ============================================================ */

/* public-site: 히어로 조형물 CSS 변수(구리·아이보리) → 오렌지·오프화이트 */
.landing-hero-media {
  --network-copper: var(--hi-orange);
  --network-ivory: var(--hi-offwhite);
}

/* 멤버십 히어로의 진홍 배경 → 딥블랙 + 오렌지 글로우 */
.public-page-hero--membership {
  background:
    radial-gradient(circle at 82% 20%, rgba(232, 98, 42, 0.22), transparent 46%),
    var(--hi-black);
}

/* 404 페이지의 진홍 글로우 → 오렌지 글로우 */
body.error-404-page {
  background:
    linear-gradient(90deg, transparent 0 31%, rgba(242, 240, 234, 0.08) 31% calc(31% + 1px), transparent calc(31% + 1px)),
    radial-gradient(circle at 84% 18%, rgba(232, 98, 42, 0.24), transparent 30rem),
    var(--hi-black);
}

/* admin: 인증 브랜드 패널의 갈색 배경·화로 글로우 → 딥블랙 + 오렌지 글로우 */
.auth-brand {
  color: var(--hi-offwhite);
  background:
    radial-gradient(circle at 82% 18%, rgba(232, 98, 42, 0.32), transparent 26%),
    radial-gradient(circle at 15% 82%, rgba(232, 98, 42, 0.16), transparent 32%),
    var(--hi-black);
}

/* admin: 갈색 사이드 레일 → 딥블랙 면 */
.admin-rail {
  color: var(--hi-offwhite);
  background: var(--hi-black-2);
}

.rail-brand {
  background: var(--hi-white);
}

/* admin: 어두운 패널 위 금색 라벨 → 오렌지 소프트 */
.auth-brand .section-kicker,
.auth-principles dt,
.rail-label {
  color: var(--hi-orange-soft);
}

/* admin: 갈색 경고 텍스트 → 올리브 경고색 */
[data-tone="warning"],
.workflow-note.warning,
.service-settings-missing {
  color: var(--hi-warning);
}

/* admin: 금갈색 상태 알약 → 올리브 경고 팔레트 */
.status-pill.pending,
.status-pill.new,
.status-pill.needs_info {
  color: var(--hi-warning);
  background: var(--hi-warning-bg);
}

.status-pill.recommended,
.status-pill.reviewing,
.status-pill.matching,
.status-pill.introduced {
  color: var(--hi-warning);
  background: #ece2ba;
}

/* ============================================================
   §13 "열린 창" 유틸리티 (BRAND_INSIDE.md 4-1 / 4-2)
   기존 훅(data-reveal, landingReveal)과 무관한 신규 클래스만 사용.
   ============================================================ */

/* --- .hi-window: 한 변이 끊긴 오렌지 프레임 ------------------------------
   기본형: 우측 변이 열림(상단에 짧은 스텁만 남김).
   .hi-window--corner: 좌측+하단만 그리고 상단 일부 → 우상단이 열림. */
.hi-window {
  position: relative;
  padding: clamp(20px, 4vw, 36px);
}

.hi-window::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--hi-orange);
  border-right: 0;
  pointer-events: none;
}

.hi-window::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: clamp(24px, 26%, 72px);
  border-right: 2px solid var(--hi-orange);
  pointer-events: none;
}

.hi-window--corner::before {
  border: 2px solid var(--hi-orange);
  border-top: 0;
  border-right: 0;
}

.hi-window--corner::after {
  top: 0;
  left: 0;
  right: auto;
  width: clamp(48px, 58%, 420px);
  height: 0;
  border-right: 0;
  border-top: 2px solid var(--hi-orange);
}

/* --- .hi-info-card: 티저 정보 카드 자막 시스템 ---------------------------
   좌측 정렬 / 오렌지 가로 룰 / 소형 라벨(자간 넓게) / 대형 본문 */
.hi-info-card {
  display: grid;
  justify-items: start;
  gap: 12px;
  text-align: left;
}

.hi-info-card::before {
  content: "";
  width: 46px;
  height: 3px;
  background: var(--hi-orange);
}

.hi-info-card .hi-info-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--hi-accent-text);
}

.hi-info-card .hi-info-body {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 600;
  line-height: 1.5;
}

/* --- .hi-section-head: 섹션 헤더 공통(한글 라벨 + 제목, 영문 라벨 금지) -- */
.hi-section-head {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin: 0 0 clamp(24px, 4vh, 40px);
  text-align: left;
}

.hi-section-head .hi-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--hi-accent-text);
}

.hi-section-head .hi-section-label::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--hi-orange);
}

.hi-section-head :is(h1, h2, h3) {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* --- .hi-reveal: 줄 단위 시차 등장 ---------------------------------------
   JS가 .is-visible 을 붙이면 페이드 인 0.35s, 줄(.hi-reveal-line) 간 0.4s 시차.
   JS 미동작 시에도 콘텐츠는 항상 보인다(기본 opacity 유지).
   prefers-reduced-motion 은 §3에서 전부 무력화. */
@keyframes hi-reveal-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hi-reveal.is-visible:not(:has(.hi-reveal-line)) {
  animation: hi-reveal-in 0.35s ease-out both;
}

.hi-reveal.is-visible .hi-reveal-line {
  animation: hi-reveal-in 0.35s ease-out both;
}

.hi-reveal.is-visible .hi-reveal-line:nth-child(2) { animation-delay: 0.4s; }
.hi-reveal.is-visible .hi-reveal-line:nth-child(3) { animation-delay: 0.8s; }
.hi-reveal.is-visible .hi-reveal-line:nth-child(4) { animation-delay: 1.2s; }
.hi-reveal.is-visible .hi-reveal-line:nth-child(5) { animation-delay: 1.6s; }
.hi-reveal.is-visible .hi-reveal-line:nth-child(n + 6) { animation-delay: 2s; }

/* ==========================================================================
   §14  워드마크 판 (brand plate)
   WM3 워드마크는 '인사이드' 글자가 오프화이트라 어두운 면 위에서만 읽힌다.
   mono 변형도 오프화이트 아웃라인이라 마찬가지다. 따라서 로고가 놓이는 판을
   전부 딥블랙으로 통일하고, 오렌지 배지가 살아나는 컬러 워드마크를 쓴다.
   선택자를 두 번 겹쳐 쓴 것은 `.landing-v3 .site-brand`(0,2,0)처럼 후손
   선택자로 밝은 판을 칠하는 기존 규칙과 특이도를 맞추기 위한 것이다.
   ========================================================================== */
.site-brand.site-brand,
.site-footer-lockup.site-footer-lockup,
.public-brand.public-brand,
.error-404-brand.error-404-brand,
.brand-link.brand-link,
.rail-brand.rail-brand,
.auth-logo.auth-logo,
.mobile-auth-logo.mobile-auth-logo,
.state-logo.state-logo,
.rail-logo.rail-logo,
.brand-logo-image.brand-logo-image {
  background: transparent;
}

.site-brand.site-brand img,
.site-footer-lockup.site-footer-lockup img,
.public-brand.public-brand img,
.public-footer-brand.public-footer-brand img,
.error-404-brand.error-404-brand img,
.brand-link.brand-link img,
.rail-brand.rail-brand img,
.auth-logo.auth-logo img,
.mobile-auth-logo.mobile-auth-logo img,
.state-logo.state-logo img,
.rail-logo.rail-logo img,
.brand-logo-image.brand-logo-image img {
  filter: none;
  mix-blend-mode: normal;
  background: transparent;
}

/* 공개 페이지 헤더: 워드마크가 읽히도록 딥블랙 면으로 (밝은 헤더 위에서는
   '인사이드' 오프화이트 글자가 사라진다). 네비 텍스트도 함께 반전. */
.public-header.public-header,
.public-header.public-header .public-header-inner {
  background: var(--hi-black);
  border-bottom: 1px solid var(--hi-line-on-dark);
}

.public-header.public-header a,
.public-header.public-header button,
.public-header.public-header .public-nav a,
.public-header.public-header .public-menu-toggle span {
  color: var(--hi-text-on-dark);
}

.public-header.public-header .public-menu-toggle span[aria-hidden="true"] {
  background: var(--hi-text-on-dark);
}

.public-header.public-header a:hover,
.public-header.public-header a:focus-visible {
  color: var(--hi-orange-soft);
}

/* 헤더 안 강조 버튼은 오렌지 면으로 유지 */
.public-header.public-header .public-cta,
.public-header.public-header [class*="primary"] {
  background: var(--hi-orange);
  color: var(--hi-black);
  border-color: var(--hi-orange);
}

/* 푸터 워드마크 판도 동일 원칙 */
.public-footer-brand.public-footer-brand,
.site-footer-brand.site-footer-brand {
  background: transparent;
}

/* ==========================================================================
   §16  대비 회복 (자동 명암비 검사로 잡힌 실제 결함)
   ========================================================================== */

/* 오렌지 면 위의 오렌지 텍스트가 사라지던 문제.
   .public-cta-section 등 액센트 면은 오프화이트로 반전한다. */
.public-cta-section,
.public-cta-section p,
.public-cta-section li,
.public-cta-section small {
  color: var(--hi-text-on-dark);
}

.public-cta-section .public-eyebrow,
.public-cta-section .public-model-label,
.hi-on-dark .public-eyebrow,
.home-cta-band .public-eyebrow,
[class*="cta-band"] .public-eyebrow {
  color: var(--hi-white);
}

.public-cta-section h1,
.public-cta-section h2,
.public-cta-section h3,
.public-cta-section strong {
  color: var(--hi-white);
}

/* 맨 위로 버튼: 어두운 면 위 어두운 화살표 */
.public-back-to-top.public-back-to-top {
  color: var(--hi-orange);
  background: var(--hi-black-2);
  border: 1px solid var(--hi-orange);
}

.public-back-to-top.public-back-to-top:hover,
.public-back-to-top.public-back-to-top:focus-visible {
  color: var(--hi-black);
  background: var(--hi-orange);
}

/* 404 숫자: 원본이 background-clip:text + 투명 글자였는데 배경 그라데이션을
   무력화하면서 글자가 완전히 사라졌다. 단색으로 되돌린다. */
.error-404-code,
.error-404-page strong {
  color: var(--hi-orange);
  -webkit-text-fill-color: var(--hi-orange);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

/* 협업 모델 카드 헤더가 딥블랙/진한 오렌지로 번갈아 칠해진다.
   라벨을 오렌지로 두면 오렌지 면 위에서 사라지므로 흰색으로 통일한다. */
.public-model-label.public-model-label {
  color: var(--hi-white);
}