/* ==========================================================================
   LGCNS.com 테마 오버라이드 — 색·타이포를 lgcns.com 서비스 페이지에 맞춤
   ==========================================================================
   기준: lgcns.com/kr/service/smart-factory/manufacturing-execution-management
   CDP computed style 실측 (2026-08-25):
     · 본문  #565656 · 20px/34px · ls -0.2px      · 제목 #121212 · 28px · 600 · ls -0.3px
     · 액센트 = 검정/LG 레드 유지 (블루바이올렛 시안은 2026-08-25 복귀) · 타이포·도식 문법만 lgcns 준용
     · 일러스트 카드 = 연보라→연분홍 파스텔      · 버튼·탭 = 검정 기조
   ⚠️ 이 파일은 sfa 레드 정체성(theme-sfa.css)을 lgcns 블루바이올렛으로 덮는다
      (2026-08-25 사용자 지시). 되돌리려면 base.html 에서 이 파일 로드만 빼면 된다.
   로드 순서: ds → portal → site → theme-sfa → 이 파일 (마지막 승자)
   ========================================================================== */

:root {
  /* 잉크 — lgcns 실측값 */
  --ink-900: #121212;
  --ink-700: #2B2B2B;
  --ink-500: #565656;   /* 본문 */
  --ink-400: #6E6E73;

  /* 액센트 — 검정/레드 기준 유지 (2026-08-25: 블루바이올렛 시안은 안 어울려 복귀).
     theme-sfa 의 LG 레드 토큰을 그대로 따른다 — 여기서 재정의하지 않는다. */

  /* DS 의 warning 토큰이 보라(#7C5CB0)라 공지 박스·plan/ext 태그가 블루바이올렛으로
     보였다 (2026-08-25 지적). 검정/레드 기준에 맞춰 뉴트럴 그레이로. */
  --warning:      #55555A;
  --warning-ink:  #3F3F44;
  --warning-soft: #F2F2F4;
}

/* 라벤더 하드코딩 테두리 보정 (site.css #D8CCEC · theme-sfa .notice #E4DAF2) */
.notice, .check.warn { border-color: #E3E3E8; }

/* 태그라인 — 강조 한 줄은 레드 단색 볼드 (그라데이션 시안은 복귀됨) */
.v2x-tagline { color: var(--accent-ink); font-weight: 700; }

/* 본문 타이포 — lgcns 서비스 페이지의 큼직한 리듬 (v2 페이지 한정) */
.v2x-c > p { font-size: 17px; line-height: 1.8; letter-spacing: -0.2px; }
.v2x-c > ul li { font-size: 16.5px; line-height: 1.8; letter-spacing: -0.2px; }
.v2x-c > dl > dd { font-size: 16px; line-height: 1.8; }
.v2x-c > dl > dt { font-size: 17px; }
.v2x-grid > .h h2, .v2x-cathead h2 {
  font-size: clamp(22px, 2.6vw, 28px); font-weight: 600;
  letter-spacing: -0.3px; line-height: 1.43;
}
.v2x-scard .lead { font-size: 13px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 제목은 1줄 말줄임 — 리드 2줄과 함께 108px 균일 높이를 유지한다 */
.v2x-scard .top { flex-wrap: nowrap; min-width: 0; }
.v2x-scard h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.v2x-scard .ty { flex: 0 0 auto; }

/* 맵 행 hover — 셀별 테두리가 아니라 행 전체를 감싸는 박스 하나 (2026-08-25).
   글자는 채움 없이 잉크만 강조 — 레드 채움 위 레드 글자로 안 보이던 문제 해소. */
.v2m-row:not(.v2m-head):hover { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.v2m-row:hover .v2m-lv1 { color: var(--accent-ink); }

/* 파스텔 일러스트 카드 — lgcns 의 연보라→연분홍 계열로 정돈 */
.v2x-shot.t1 { background: linear-gradient(135deg, #F7F1F1, #FBF0F2); }
.v2x-shot.t2 { background: linear-gradient(135deg, #FBF0F2, #F4F2F4); }
.v2x-shot.t3 { background: linear-gradient(135deg, #F4F2F4, #F9F0F0); }
.v2x-hero { background: linear-gradient(135deg, #F7F4F4 0%, #FBF1F3 55%, #F5F3F4 100%); }
.v2x-cta { background: linear-gradient(135deg, #F7F4F4, #FBF1F3); }

/* ── 오퍼링 맵 — lgcns.com Factova MES 도식 문법 ──
   연회색 캔버스 + 흰 라운드 패널 + 알약 칩. 강조(원고 있음) = 흰 바탕·바이올렛
   테두리(도식의 "표준 API"), 일반(준비중) = 연회색 알약(도식의 기능 칩). */
.v2m-scroll { background: #F4F5F7; border-radius: 16px; padding: 16px; position: relative; }
@media (max-width: 1000px) {
  .v2m-scroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 42px;
    pointer-events: none; border-radius: 0 16px 16px 0;
    background: linear-gradient(90deg, rgba(244,245,247,0), rgba(244,245,247,0.95)); }
}
.v2m { min-width: 848px; }
.v2m-lv2 { border-bottom: 0; }
.v2m-lv2 b { color: var(--ink-900); font-size: 14px; font-weight: 700; }
.v2m-lv2 .sub { color: var(--ink-300); }
.v2m-lv1 { background: transparent; border: 0; border-radius: 12px;
  color: var(--ink-900); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.v2m-cell { background: #fff; border: 1px solid #ECECF1; border-radius: 12px; padding: 12px; }
.v2m-cell.empty { background: transparent; border-style: dashed; border-color: #E2E2EA; }
.v2m-chip { border: 0; border-radius: 999px; background: #F4F4F6; color: #444449;
  padding: 6px 13px; font-size: 12.5px; }
.v2m-chip.has { background: #fff; border: 1px solid var(--ink-200); color: var(--ink-900);
  font-weight: 600; padding: 5.5px 12.5px; }
a.v2m-chip.has:hover { background: var(--accent); color: #fff; border-color: var(--accent); border-style: solid; }
.v2m-chip.ext { background: transparent; border: 1px dashed #C9C9D4; color: #8A8A93; }
.v2m-legend .v2m-chip { pointer-events: none; }

/* 상세 탭 hover — 글자 밑줄과 탭 밑줄이 겹쳐 지저분 → 글자 밑줄 제거 (2026-08-25) */
/* 스티키 탭 — 사이트 헤더(64px) 아래에 고정. 솔루션명(.tt)을 동승시켜
   "위쪽 제목 + 섹션 제목"이 스크롤에도 남는다 (2026-08-25 지시). 슬림 유지. */
.v2x-tabs { top: 64px; z-index: 30; }
.v2x-tabs .wrap { gap: 20px; }
.v2x-tabs a { padding: 11px 0 9px; font-size: 13px; }
.v2x-tabs .tt { flex: 0 0 auto; align-self: center; font-size: 13.5px; font-weight: 700;
  color: var(--ink-900); max-width: 200px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding-right: 4px; border-right: 1px solid var(--border);
  margin-right: 2px; }
/* <900px 은 사이트 헤더 높이가 줄바꿈으로 가변이라 고정 기준(top:64px)이 어긋난다 — 의도적 해제 */
@media (max-width: 899px) { .v2x-tabs { position: static; } }

.v2x-tabs a, .v2x-tabs a:hover,
.v2m-lv1, .v2m-lv1:hover, .v2m-chip, a.v2m-chip:hover { text-decoration: none; }

/* 인용(blockquote) 안의 정의형 dl — 150px 라벨열 그리드가 모바일에서 리본이 되므로 블록화 */
.v2x-quote dl.v2-kv { display: block; }
.v2x-quote dl.v2-kv dt { margin-top: 12px; font-weight: 700; }
.v2x-quote dl.v2-kv dd { margin: 4px 0 0; }
@media (max-width: 700px) { .v2x-c dl.v2-kv { display: block; } .v2x-c dl.v2-kv dd { margin: 4px 0 10px; } }
/* metrics 값 추출 불가 항목 — 라벨 전용 카드 */
.v2x-num .l.lonly { margin-top: 0; font-size: 15px; font-weight: 600; color: var(--ink-700); }

/* HIGH 회귀 수정(2026-08-26 최종 감사 #1) — site.css 의 .hero .inner padding 단축이
   portal.css 의 좁은 폭 좌우 패딩 복원 규칙을 로드 순서로 이겨 1256px 미만에서
   다크 히어로가 모서리에 밀착했다. 마지막 로드인 이 파일에서 다시 복원한다. */
@media (max-width: 1256px) { .hero .inner { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 640px)  { .hero .inner { padding-left: 24px; padding-right: 24px; } }

/* 배지(정량 효과) 다듬기 — 최종 감사 #3·#7 */
.v2x-num { display: flex; flex-direction: column; justify-content: center; }
.v2x-num .v { word-break: keep-all; }               /* "2.88억/년" 이 / 에서 개행되지 않게 */
.v2x-nums { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 300px)); }
/* 배지가 1장뿐이어도 전폭으로 늘어나 빈 상자처럼 보이지 않는다 */

/* 유틸 화면의 주황 계열(critical 토큰)도 레드/검정 기준으로 — 최종 감사 #5 */
:root { --critical: #C41922; --critical-ink: #A61620; --critical-soft: #FBE9EA; }