/* ============================================================
   KEMP 마케팅 랜딩 골드 스킨 오버레이 — landing-skin.css
   ------------------------------------------------------------
   목적:
   - market/ 랜딩 10종(틸 액센트·청회색 뉴트럴)을 본체 골드 디자인
     시스템(assets/css/style.css)에 정렬하는 오버레이 스타일시트.
   - 색·폰트패밀리·그림자·보더컬러만 바꾼다. spacing/size/grid/
     폰트크기는 절대 건드리지 않는다(레이아웃 불변 원칙).

   로드 순서(필수):
   - 각 랜딩 HTML의 인라인 <style> "뒤"에 로드할 것.
     <link rel="stylesheet" href="/assets/css/landing-skin.css">
     동일 특이도면 나중에 선언된 이 파일이 이긴다.
   - ※ 미이행 경고(2026-08-24 감사): 랜딩 10종(container·datacenter·
     ess·fastener·grating·gsave·marine·pipe·power·semiplant) 어디에도
     이 파일이 아직 링크돼 있지 않다. 각 HTML의 인라인 <style> 종료
     직후에 위 <link> 한 줄을 삽입해야 스킨이 실제로 적용된다.

   전략:
   - 랜딩 테마가 --teal 계열 6변수에 위임돼 있으므로 "변수명 유지 +
     값 재정의"가 기본. JS 주입 성공메시지·인라인 var() 참조도 함께
     추종된다.
   - 라이트/다크 2벌 모두 재정의(다크 블록 누락 시 틸 부활 방지).
     ※ 이 파일의 :root는 랜딩의 @media dark :root보다 캐스케이드상
     뒤이므로, 여기서 만지는 모든 변수는 아래 다크 블록에도 반드시
     재선언돼 있어야 한다.
   - 틸 채움+흰 글자 8종은 골드 채움+다크 잉크로 명시 교체
     (gold-500 + #fff는 대비 약 2.5:1로 WCAG 불합격이기 때문).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Noto+Sans+KR:wght@400;500;700;900&family=Space+Grotesk:wght@500;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ---------- 1. 토큰: 골드 램프 + 본체 뉴트럴(스틸) 램프 ---------- */
:root{
  /* 본체 골드 램프 (style.css와 동일값) */
  --gold-300:#F2CE4A;   /* 다크 배경 하이라이트 */
  --gold-400:#E3BC1F;   /* 다크 배경 표준 액센트 */
  --gold-500:#C7A008;   /* CTA 채움면 */
  --gold-600:#A98307;   /* 라이트 배경 대형 숫자·아이콘 */
  --gold-700:#8A6D00;   /* 라이트 배경 소형 라벨 텍스트 */
  --gold-tint:#FBF6E4;  /* 옐로우 틴트 배경 */
  --gold-tint2:#F3E9C3; /* 틴트 2단계(구 --tealbg2 위계 유지용 신설) */

  /* 역할 토큰: 채움/호버/아이콘/대형숫자/채움면 위 잉크 */
  --gold-fill:var(--gold-500);
  --gold-fill-hover:var(--gold-400); /* 호버는 밝은 쪽으로(본체 CTA 관례) */
  --gold-ico:var(--gold-600);
  --gold-num:var(--gold-600);        /* 라이트 대형 숫자(.value-list .no 등급) */
  --gold-ink:#101318;                /* 골드 채움 위 글자 — 항상 다크 */

  /* 본체 뉴트럴 스틸 램프 */
  --n-950:#101318; --n-900:#1A2029; --n-700:#3D4654; --n-600:#4A5361;
  --n-500:#6B7686; --n-400:#8B95A5; --n-300:#B9C0CC; --n-200:#D9DEE7;
  --n-100:#EBEEF3; --n-50:#F4F6F9;

  /* 폰트 3계층 (본체와 동일 스택) */
  --font:'Lato','Noto Sans KR',sans-serif;
  --font-display:'Space Grotesk','Lato','Noto Sans KR',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  /* ---------- 2. 랜딩 변수 재매핑 (라이트) ---------- */
  /* 틸 → 골드 */
  --teal:var(--gold-500);      /* 채움면 */
  --teal-d:#755E00;            /* 라이트 배경 텍스트·강조 — gold-700(#8A6D00)은
                                  --bg 위 4.23:1·--bg2 위 3.89:1·tealbg2 위 4.04:1로
                                  AA 4.5:1 미달이라 한 단계 다운
                                  (--bg 5.4:1 · --bg2 4.9:1 · tealbg2 5.1:1) */
  --teal-l:var(--gold-300);    /* 차트 그라디언트 밝은끝·다크사진 위 강조 */
  --tealbg:var(--gold-tint);
  --tealbg2:var(--gold-tint2);
  --ring:rgba(169,131,7,.45);  /* 포커스 링 — rgba 리터럴이라 별도 재정의 필수.
                                  gold-600 기반·농도 상향(구 .30은 합성 시
                                  약 1.3:1로 링 단독 식별 불가) */

  /* 청회색 뉴트럴 → 본체 스틸 램프 (색온도 정렬) */
  --bg:var(--n-100);
  --bg2:#E1E5EC;               /* n-100↔n-200 보간 */
  --surface:#FFFFFF;
  --surface2:var(--n-50);
  --surface3:var(--n-100);
  --ink:var(--n-950);
  --ink2:#2B333E;              /* n-900↔n-700 보간(원 --ink2 명도 유지) */
  --muted:var(--n-500);
  --faint:var(--n-400);
  --line:var(--n-200);
  --line2:var(--n-300);

  /* 그림자 색온도: 청색 rgba(16,28,36,…) → 본체 다크 rgba(16,19,24,…) */
  --shadow:0 1px 2px rgba(16,19,24,.04),0 4px 16px rgba(16,19,24,.06);
  --shadow-l:0 2px 6px rgba(16,19,24,.06),0 18px 46px rgba(16,19,24,.10);

  /* 앰버(경고) — 브랜드 골드와 색상대 겹침 해소: 오렌지 쪽으로 이동 */
  --amber:#B45309;
  --amberbg:#FBEEDC;

  /* semiplant/gsave/pipe 2차 스타일의 미정의 var(--card) 수리 */
  --card:var(--surface);
}

/* ---------- 3. 다크 모드 2벌 (누락 시 라이트 값이 다크를 덮침) ---------- */
@media (prefers-color-scheme:dark){:root{
  /* 골드 역할 토큰: 다크 배경에서는 한 단계 밝은 쪽 사용 */
  --gold-fill:var(--gold-400);
  --gold-fill-hover:var(--gold-300);
  --gold-ico:var(--gold-400);
  --gold-num:var(--gold-300);  /* 다크 대형 숫자(.g-stat .num 등급) */

  /* 틸 → 골드 (다크) */
  --teal:var(--gold-400);
  --teal-d:var(--gold-300);    /* 다크 배경 텍스트는 밝게 */
  --teal-l:#F6DC6B;
  --tealbg:#2C2515;            /* 다크 골드 틴트(본체 --amberbg 다크 참고 설계) */
  --tealbg2:#3B3118;
  --ring:rgba(227,188,31,.5);

  /* 다크 뉴트럴 — 스틸 색상(hue 220대)으로 재설계 */
  --bg:#0D1015; --bg2:#12151C;
  --surface:#161A22; --surface2:var(--n-900); --surface3:#212734;
  --ink:var(--n-100); --ink2:var(--n-200);
  --muted:var(--n-400); --faint:var(--n-500);
  --line:#262C38; --line2:#333B49;

  /* 다크 그림자는 기존 흑색 기반 유지(재선언으로 라이트 값 덮침 방지) */
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.28);
  --shadow-l:0 2px 6px rgba(0,0,0,.34),0 18px 46px rgba(0,0,0,.42);

  /* 앰버(경고) 다크 */
  --amber:#E8963C;
  --amberbg:#2E2113;
}}

/* ---------- 4. 폰트 정렬 ---------- */
body{font-family:var(--font)}
/* 본체 수치 성문 = IBM Plex Mono + tabular-nums
   (본체 실측: .g-stat .num 히어로 대형 연도수치 / .value-list .no 목차
    번호 / .news-card .date 전부 var(--font-mono)+tabular-nums).
   Space Grotesk는 fp-section h1 등 디스플레이 헤드라인 전용 —
   숫자에 쓰지 않는다.
   대상: .stats .n 히어로 통계 / .vs .vn 전후비교[gr·gsave·pipe계열] /
   .ev .evn 96% 대형숫자[dc] */
.stats .n,.vs .vn,.ev .evn{
  font-family:var(--font-mono);
  font-weight:600; /* Plex Mono 로드 가중치(500·600) 내로 — 원본 800은 합성볼드 */
  font-variant-numeric:tabular-nums;
}
/* 라이트 배경 대형 숫자 등급 교정: 원본 color:var(--teal-d)는 '소형 라벨'
   등급(gold-700) — 본체 역할 규칙(라이트 gold-600 [.value-list .no 준거] /
   다크 gold-300 [.g-stat .num 준거])으로 상향 */
.stats .n,.ev .evn{color:var(--gold-num)}
/* power.html의 class="mono"가 미정의였던 기존 버그 수리 */
.mono{font-family:var(--font-mono)}

/* ---------- 5. 골드 채움 + 다크 잉크 (대비 수정 핵심) ----------
   틸 배경+흰 글자였던 8종 전부. 배경은 변수 재매핑으로 이미
   골드로 바뀌므로 여기서는 글자색과 호버 방향만 교정한다. */
.topcta,
.btn-p,
.cta,
.mbar .m1,
.ribbon,
.step .sc,
.chips input:checked+span,
.tbltitle .tno{color:var(--gold-ink)}

/* 호버: 원본은 var(--teal-d)로 어두워졌지만, 골드에서 어두운 채움
   (gold-700)+다크 잉크는 대비 미달 — 밝은 쪽(gold-400/300)으로 반전 */
.topcta:hover,
.btn-p:hover,
.cta:hover{background:var(--gold-fill-hover);color:var(--gold-ink)}

/* 표 번호 배지: 원본 배경이 var(--teal-d)(→gold-700)라 채움 토큰으로 통일 */
.tbltitle .tno{background:var(--gold-fill)}

/* ---------- 6. 라이트 배경 위 골드 아이콘: gold-500은 대비가 약해
   본체 규칙(gold-600)으로 상향. 다크에서는 --gold-ico가 gold-400 ---------- */
.st .sh svg,
.spec li svg,
.ctalist li svg,
.nospam svg,
summary::after{color:var(--gold-ico)}
.eyebrow .dot{background:var(--gold-ico)}
/* gsave 2차 블록: STEP 라벨이 color:var(--teal)(채움색)를 텍스트로 사용
   → 텍스트 등급(gold-700/300)으로 교정 */
.peel .p .k{color:var(--teal-d)}

/* ---------- 6b. 리드폼 포커스·필수표시 (WCAG 1.4.11) ----------
   포커스 보더: 원본 var(--teal)→gold-500은 흰 입력창 배경 대비 2.29:1로
   비텍스트 3:1 미달(원본 틸 3.43:1보다 후퇴) — gold-600(3.54:1)으로 상향.
   링 농도는 위 --ring 토큰에서 상향 완료.
   필수표시 별표: 인라인 <span style="color:var(--teal)">*</span>은
   어떤 셀렉터 특이도로도 못 이기므로 !important로만 교정 가능. */
.leadform input:focus{border-color:var(--gold-600)}
.leadform label span[style*="--teal"]{color:var(--gold-ico)!important}

/* ---------- 7. 히어로 글로우 재설계 ----------
   원본: 틸 22% + 스틸블루 20% + 틸라이트 14% 3중 radial.
   골드+블루 혼색의 탁한 녹색조를 피하고 농도를 한 단계 낮춘
   골드+뉴트럴 조합으로 교체(위치·크기·blur는 원본 유지). */
.hero::before{background:
  radial-gradient(48% 42% at 22% 30%, color-mix(in srgb,var(--gold-500) 16%,transparent) 0%, transparent 68%),
  radial-gradient(40% 38% at 82% 18%, color-mix(in srgb,var(--n-400) 15%,transparent) 0%, transparent 66%),
  radial-gradient(46% 40% at 62% 76%, color-mix(in srgb,var(--gold-300) 10%,transparent) 0%, transparent 70%)}

/* ---------- 8. radius: 본체 2~4px 각진 지오메트리 정렬 (선별) ----------
   주 CTA 버튼·카드만. 칩/필/아이브로우 등 필형 요소는 유지. */
.topcta,.btn,.cta,
.mbar .m1,.mbar .m2{border-radius:3px}
.card{border-radius:4px}

/* ---------- 9. SVG 하드코딩 틸 (datacenter·fastener .dsvg) ----------
   presentation attribute는 CSS가 이기므로 속성 선택자로 덮는다.
   ※ fill/stroke 속성 선택자는 stop-color 속성에 매치되지 않으므로
   그라디언트 stop은 색상별로 전부 별도 커버해야 한다
   (dc:748 <linearGradient id="cg"> 두 번째 stop #0E9C86 누락분 포함).
   빨강 #C0492F(위험 표시)는 시맨틱 유지 — 건드리지 않는다. */
svg [fill="#0E9C86" i]{fill:var(--gold-fill)}
svg [stroke="#0E9C86" i]{stroke:var(--gold-fill)}
svg [fill="#097563" i]{fill:var(--teal-d)}
svg [fill="#3FBFA9" i]{fill:var(--gold-300)}
svg [stroke="#3FBFA9" i]{stroke:var(--gold-300)}
svg stop[stop-color="#3FBFA9" i]{stop-color:var(--gold-300)}
svg stop[stop-color="#0E9C86" i]{stop-color:var(--gold-fill)}
svg stop[stop-color="#097563" i]{stop-color:var(--teal-d)}
/* dc SVG '무기 세라믹 피막' 밴드 위 흰 글자: 밴드가 골드로 바뀌므로
   다크 잉크로 교체(감사상 .dsvg 내 흰 text는 이 1곳뿐) */
.dsvg text[fill="#fff" i],
.dsvg text[fill="#ffffff" i]{fill:#101318}

/* ---------- 10. 상태색 3벌 재배색 (semiplant·gsave·pipe 2차 블록) ----------
   성공 #2dbe8c·위험 #d64a3a는 시맨틱 유지.
   '주의/진행중' #c9a227만 브랜드 골드와 사실상 동일색이라
   경고용 앰버(오렌지, 위 --amber 토큰)로 이동 — 브랜드/경고 혼동 차단. */
/* semiplant: 4단계 진행 카드의 '진행중' */
.stage4 .now .bar{background:var(--amber)}
.stage4 .now .st{color:var(--amber)}
/* gsave: 수명주기 2단계(백청·관찰)·판정 '검토' 아이콘 */
.s2 .num{background:var(--amberbg);color:var(--amber)}
.s2 .zn{color:var(--amber)}
.rec.q .ic{background:var(--amberbg);color:var(--amber)}
/* pipe: 논증 카드 '유보' */
.grv .mid{border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
.grv .mid .k{color:var(--amber)}

/* ---------- 11. kemp-sitebar ----------
   배경 #101318(=본체 --n-950)·'문의' #C7A008(=gold-500)은 이미 정합 — 유지.
   hover #E3BC17만 본체 --gold-400 #E3BC1F의 오타로 판단, 교정. */
.ksb-nav a.ksb-cta:hover{color:var(--gold-400)}

/* One mobile brand bar; industry hero and fixed bottom bar retain sample access. */
@media (max-width:720px){
  .kemp-sitebar + .topbar{display:none}
}