/* ═══════════════════════════════════════════════════════════════════
   서비스 오퍼링 재구성 (2026-08-26) — 새 헤더 유틸·오퍼링 맵·Lv1 목록·
   세로형 웹브로셔 상세·검색 오버레이. 정본 계획: docs/proposals/offering-restructure-plan.md
   기존 v2/자료실 화면 스타일(site.css·theme-lgcns.css)은 건드리지 않는다.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 헤더 검색 버튼 ── */
.nav-search { display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px;
  font: inherit; font-size: 13px; color: var(--ink-400); background: var(--paper);
  cursor: pointer; white-space: nowrap; }
.nav-search:hover { border-color: var(--ink-900); color: var(--ink-900); }

/* ── 최소화 푸터 (구 .contact 대형 밴드 대체 — 2026-08-26 지시) ── */
/* 밝은 톤 — 히어로가 얇아진 뒤 하단 검은 띠가 과하게 도드라져 전환 (2026-08-26) */
.site-foot { background: #FAFAFB; color: var(--ink-300); margin-top: 72px;
  border-top: 1px solid var(--border); }
.site-foot .inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 18px; font-size: 12.5px; }
.site-foot img { height: 15px; opacity: 0.85; }
.site-foot code { color: var(--ink-400); }
.site-foot .meta { flex: 1 1 auto; min-width: 0; }
.site-foot .util { display: flex; gap: 16px; }
.site-foot .util a { color: var(--ink-400); text-decoration: none; }
.site-foot .util a:hover { color: var(--accent); text-decoration: underline; }

/* ── 상단 고정 스택: 콤팩트 다크 히어로 + 서브내비 (오퍼링 화면 전용) ── */
.off-stack { position: sticky; top: 64px; z-index: 40; }
@media (max-width: 899px) { .off-stack { position: static; } } /* 헤더 높이 가변 — 상세 탭과 동일 사유 */
.off-hero { background: #111; color: #fff; }
.off-hero .wrap { padding-top: 36px; padding-bottom: 30px; }
.off-hero .eyebrow { font-size: 11.5px; letter-spacing: 2.5px; color: #8E8E98;
  font-weight: 700; margin-bottom: 7px; }
.off-hero h1 { margin: 0; font-size: 30px; letter-spacing: -0.6px; font-weight: 700; }
.off-hero .stats { display: flex; gap: 34px; margin-top: 18px; }
.off-hero .stat .v { font-size: 21px; font-weight: 700; color: #fff; letter-spacing: 0; }
.off-hero .stat .l { font-size: 11.5px; color: #8E8E98; margin-top: 2px; }
.off-hero p { margin: 6px 0 0; font-size: 13.5px; color: #B9B9C2; }
.off-hero .back { font-size: 12.5px; color: #B9B9C2; text-decoration: none; }
.off-hero .back:hover { color: #fff; }
.off-sub { background: #fff; border-bottom: 1px solid var(--border); }
.off-sub .wrap { display: flex; gap: 34px; overflow: visible; }
.off-sub > .wrap > a, .off-sub .mi > a { display: inline-block; font-size: 16px;
  letter-spacing: 0; color: var(--ink-900); text-decoration: none;
  padding: 14px 2px 12px; border-bottom: 3px solid transparent; white-space: nowrap; }
.off-sub a.on { border-bottom-color: var(--accent); font-weight: 700; }
.off-sub > .wrap > a:hover, .off-sub .mi > a:hover { color: var(--accent); text-decoration: none; }
/* hover 플라이아웃 — Siemens 문법 번안 */
.off-sub .mi { position: relative; }
/* 입체감 — 상단 레드 라인 + 깊은 그림자 + 큰 타이포 (2026-08-27 지시).
   900~985px 우측 이탈은 max-width + 끝쪽 항목 우측 정렬로 방지 (검증 1회차 M2). */
.off-sub .fly { display: none; position: absolute; left: -20px; top: 100%; z-index: 70;
  background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: 0 0 14px 14px; box-shadow: 0 26px 56px rgba(17,17,17,.22);
  padding: 24px 30px 26px; max-width: calc(100vw - 40px); }
.off-sub .mi:hover .fly { display: flex; gap: 42px; flex-wrap: nowrap; overflow-x: auto; }   /* 옆으로 넓게 — 그룹 한 줄 (2026-08-27 지시) */
/* 플라이아웃 위치는 search.js 의 뷰포트 클램프가 조정 (검증 2회차 M2 — CSS 앵커로는 900~975px C&M 잘림 해결 불가) */
.off-sub .fly .grp { min-width: 148px; }
.off-sub .fly h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--ink-900);
  padding-bottom: 8px; border-bottom: 2px solid var(--ink-900); white-space: nowrap; }
.off-sub .fly ul { list-style: none; margin: 0; padding: 0; }
.off-sub .fly li a, .off-sub .fly li span { display: block; padding: 6px 0;
  font-size: 14.5px; color: var(--ink-900); text-decoration: none; border-bottom: 0;
  white-space: nowrap; }
.off-sub .fly li a:hover { color: var(--accent); }
.off-sub .fly li a:hover::after { content: " →"; }
.off-sub .fly li span { color: #ADADB5; }
.off-sub .fly .all { margin-top: 9px; }
.off-sub .fly .all a { font-size: 12.5px; color: var(--accent); font-weight: 700;
  text-decoration: none; padding: 0; }
@media (max-width: 899px) { .off-sub .wrap { overflow-x: auto; } .off-sub .fly { display: none !important; } }

/* ── 오퍼링 맵 (A안 — 기존 문법: 공통 Lv2 열 + 헤더 행 + 알약 칩) ── */
.off-map { padding: 30px 0 8px; }
.omap { display: flex; flex-direction: column; gap: 8px; }
.orow { display: grid; grid-template-columns: 148px repeat(5, minmax(0, 1fr)); gap: 8px; }
.orow .lv1t { display: flex; flex-direction: column; justify-content: center;
  font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--ink-900);
  text-decoration: none; line-height: 1.3; }
.orow .lv1t:hover { color: var(--accent); text-decoration: none; }
.orow .lv1t small { font-size: 11px; font-weight: 500; color: var(--ink-300); margin-top: 2px; }
.orow.ohead > div { font-size: 13px; font-weight: 700; color: var(--ink-900); padding: 2px 4px 4px; }
.orow.ohead .sub { display: block; font-size: 11px; font-weight: 500; color: var(--ink-300); }
.ocell { background: #fff; border: 1px solid #ECECF1; border-radius: 12px; padding: 10px;
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.ocell.empty { border-style: dashed; background: transparent; align-items: center;
  justify-content: center; color: #D5D5DC; font-size: 12px; }
.orow:not(.ohead):hover { outline: 1.5px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
/* 칩 라운드는 고정 12px — 999px 알약은 두 줄 칩이 과하게 둥글어짐 (2026-08-31 지시).
   글꼴 13px 정수 — 12.5px 비정수 크기가 96dpi 서브픽셀 자글거림 유발 (같은 날 지적) */
.ochip, .ochip-off { display: inline-block; padding: 4px 11px; border-radius: 12px;
  font-size: 13px; text-decoration: none; line-height: 1.4; }
.ochip { border: 1px solid var(--ink-900); color: var(--ink-900); font-weight: 600; background: #fff; }
a.ochip:hover { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }
.ochip-off { background: #F4F4F6; color: #9a9aa2; }
.off-legend { margin: 14px 2px 0; display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-300); align-items: center; }
.off-legend .ochip, .off-legend .ochip-off { pointer-events: none; }
@media (max-width: 899px) {
  .off-map-scroll { overflow-x: auto; }
  .orow { grid-template-columns: 104px repeat(5, minmax(122px, 1fr)); min-width: 860px; }
}

/* ── Lv1 페이지 — Siemens 목록 문법 (흰 바탕 번안) ── */
.off-lv1 { padding: 26px 0 10px; }
.off-lv1 .grpsec { margin: 0 0 8px; }
.off-lv1 h2 { margin: 26px 0 0; font-size: 15px; font-weight: 700; color: var(--ink-900);
  padding-bottom: 9px; border-bottom: 2px solid var(--ink-900); letter-spacing: 0; }
.off-lv1 ul { list-style: none; margin: 0; padding: 0; }
.off-lv1 li { border-bottom: 1px solid var(--border); }
.off-lv1 li a, .off-lv1 li .off { display: flex; align-items: baseline; gap: 12px;
  padding: 13px 2px; font-size: 15px; color: var(--ink-900); text-decoration: none; }
.off-lv1 li a b, .off-lv1 li .off b { font-weight: 600; }
.off-lv1 li a:hover { color: var(--accent); text-decoration: none; }
.off-lv1 li a:hover .go { opacity: 1; transform: none; }
.off-lv1 .tagline { font-size: 13px; color: var(--ink-400); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.off-lv1 li a:hover .tagline { color: var(--accent); }
.off-lv1 .badges { display: flex; gap: 8px; flex: 0 0 auto; font-size: 11.5px; color: var(--ink-300); }
.off-lv1 .go { flex: 0 0 auto; color: var(--accent); opacity: 0; transform: translateX(-4px);
  transition: opacity .12s, transform .12s; }
.off-lv1 li .off { color: #ADADB5; }
.off-lv1 li .off b { font-weight: 500; }
.off-lv1 li .off .stat { font-size: 11.5px; border: 1px dashed #D9D9E0; border-radius: 999px;
  padding: 2px 9px; color: #ADADB5; }

/* ── 상세 — 세로형 웹브로셔 (단일 흐름) ── */
.wb-head { border-bottom: 1px solid var(--border); }
.wb-head .wrap { padding-top: 34px; padding-bottom: 26px; }
.wb-head .crumb { font-size: 12.5px; color: var(--ink-300); }
.wb-head .crumb a { color: var(--ink-400); text-decoration: none; }
.wb-head .crumb a:hover { color: var(--accent); }
.wb-head h1 { margin: 10px 0 0; font-size: 34px; letter-spacing: -0.6px; color: var(--ink-900); }
.wb-head .tagline { margin: 10px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--ink-500); }
.wb-head .cta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.wb { max-width: 820px; }
.wb-sec { padding: 34px 0 4px; }
.wb-sec h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: 0; color: var(--ink-900); }
.wb-sec p { margin: 0 0 12px; font-size: 16px; line-height: 1.85; color: var(--ink-500); }
.wb-sec .wb-lead { font-size: 19px; line-height: 1.75; color: var(--ink-900); font-weight: 600; }
.wb-sec .wb-lead b { font-weight: 700; }  /* bolder 매핑(900) 방지 — 소형 한글 자글거림 (점검 MED) */
/* 좌측 제목열 부제(sub)에 한글 문장이 들어가는 경우 — mono 슬롯 대신 본문 폰트 (점검 LOW) */
.wb-page .v2x-grid .h .sub { font-family: var(--font-body); letter-spacing: 0; }
.wb-sec dl { margin: 0; }
.wb-sec dl > div { padding: 12px 0; border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 190px 1fr; gap: 14px; }
.wb-sec dt { font-weight: 700; font-size: 14.5px; color: var(--ink-900); }
.wb-sec dd { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-500); }
.wb-sec ul { margin: 0; padding: 0 0 0 2px; list-style: none; }
.wb-sec ul li { padding: 7px 0 7px 18px; position: relative; font-size: 15px;
  line-height: 1.75; color: var(--ink-500); }
.wb-sec ul li::before { content: ""; position: absolute; left: 2px; top: 17px;
  width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.wb-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px,100%), 300px));
  gap: 12px; }
.wb-num { background: #FAFAFB; border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; }
.wb-num .v { font-size: 26px; font-weight: 800; color: var(--accent); letter-spacing: -0.5px;
  word-break: keep-all; }
.wb-num .l { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--ink-400); }
.wb-quote { background: #FAFAFB; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0;
  padding: 18px 22px; margin: 6px 0; }
.wb-quote p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--ink-700); }
.wb-quote .by { margin-top: 8px; font-size: 13px; color: var(--ink-300); }
.wb-fig { margin: 22px 0 8px; }
/* 원본 픽셀 이상으로 확대하지 않는다 — 저해상 크롭 강제 확대 열화 방지 (2026-08-27) */
.wb-fig img { width: auto; max-width: 100%; max-height: 520px; height: auto;
  border: 1px solid var(--border);  /* 세로 긴 이미지는 페이지에서 줄이고 클릭 확대 (2026-08-29 리더 지시) */
  border-radius: 12px; background: #fff; display: block;
  box-shadow: 0 12px 32px rgba(17,17,17,.07); transition: box-shadow .15s; }
.wb-fig a:hover img { box-shadow: 0 16px 40px rgba(17,17,17,.14); }
.wb-fig figcaption { margin-top: 7px; font-size: 12px; color: var(--ink-300); line-height: 1.5; }
.wb-zoom { cursor: zoom-in; }
/* 여러 장은 나란히 — 이미지 세로 연속 나열 방지 (2026-08-29 4차) */
.wb-figrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin: 22px 0 8px; align-items: start; }
.wb-figrow .wb-fig { margin: 0; }
.wb-figrow .wb-fig img { width: 100%; }
.wb-video { margin: 10px 0; }
.wb-video .frame { position: relative; padding-top: 56.25%; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--border); background: #111; }
.wb-video iframe, .wb-video video { position: absolute; inset: 0; width: 100%;
  height: 100%; border: 0; background: #111; }
.wb-video .vmeta { margin: 8px 2px 0; font-size: 12px; color: var(--ink-300); }
.wb-video .vmeta a { color: var(--ink-400); }
.wb-video .card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; text-decoration: none; color: var(--ink-900); }
.wb-video .card:hover { border-color: var(--accent); text-decoration: none; }
.wb-video .card .play { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px;
  background: var(--accent); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 15px; }
.wb-video .card .t { font-weight: 600; font-size: 15px; }
.wb-video .card .d { font-size: 12.5px; color: var(--ink-300); margin-top: 2px; }
.wb-src { margin: 40px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-300); line-height: 1.7; }
@media (max-width: 700px) { .wb-sec dl > div { grid-template-columns: 1fr; gap: 4px; }
  .wb-head h1 { font-size: 27px; } }

/* ── 검색 오버레이 ── */
.search-ov { position: fixed; inset: 0; z-index: 200; background: rgba(17,17,17,.45); }
.search-ov .panel { max-width: 640px; margin: 9vh auto 0; background: #fff;
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.25); padding: 18px 20px 16px; }
.search-ov .row { display: flex; gap: 10px; }
.search-ov input { flex: 1; font: inherit; font-size: 16px; padding: 11px 14px;
  border: 1.5px solid var(--ink-900); border-radius: 10px; outline: none; }
.search-ov input:focus { border-color: var(--accent); }
.search-ov button { font: inherit; font-size: 13px; border: 1px solid var(--border);
  background: #fff; border-radius: 10px; padding: 0 14px; cursor: pointer; color: var(--ink-400); }
.search-ov button:hover { color: var(--ink-900); border-color: var(--ink-900); }
.search-ov .hint { margin: 8px 2px 0; font-size: 12px; color: var(--ink-300); }
.search-ov ul { list-style: none; margin: 10px 0 0; padding: 0; max-height: 52vh; overflow: auto; }
.search-ov li a, .search-ov li .off { display: flex; align-items: baseline; gap: 10px;
  padding: 10px 8px; border-radius: 8px; text-decoration: none; color: var(--ink-900); font-size: 14.5px; }
.search-ov li a:hover { background: #FAFAFB; color: var(--accent); text-decoration: none; }
.search-ov li .k { flex: 0 0 auto; font-size: 11px; color: var(--ink-300);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.search-ov li .off { color: #ADADB5; }
.search-ov li .g { font-size: 12px; color: var(--ink-300); margin-left: auto; flex: 0 0 auto; }

/* ── 탑메뉴 화면 히어로 통일 규격 (2026-08-27) — 자료실·구 허브의 대형 히어로 축소 ── */
.hero .inner { padding: 40px 48px 34px; }
.hero .inner h1 { font-size: clamp(26px, 3.2vw, 34px); }
.hero .inner .sub { font-size: 14.5px; margin-top: 10px; max-width: 720px; }
.hero .stats { margin-top: 16px; gap: 34px; }
.hero .stat .v { font-size: 21px; }
@media (max-width: 640px) { .hero .inner { padding: 30px 24px 26px; } }

/* ── 자료실 보기 전환 탭 ── */
.view-tabs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-300); margin: 0; }
.view-tabs a { display: inline-block; padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--ink-900); color: var(--ink-900); font-weight: 600;
  font-size: 12.5px; text-decoration: none; }
.view-tabs a:hover { background: var(--accent); border-color: var(--accent);
  color: #fff; text-decoration: none; }
.view-tabs a[aria-current] { background: var(--ink-900); color: #fff; }

/* ── 맵 시안 스위처 + B~E 변형 (시안 확정 전 검토용 — 확정 후 제거 예정) ── */
.vswitch { display: flex; gap: 8px; align-items: center; padding-top: 22px;
  font-size: 12.5px; color: var(--ink-300); flex-wrap: wrap; }
.vswitch button { font: inherit; font-size: 12.5px; padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--ink-400); cursor: pointer; }
.vswitch button:hover { border-color: var(--ink-900); color: var(--ink-900); }
.vswitch button.on { background: var(--ink-900); border-color: var(--ink-900);
  color: #fff; font-weight: 700; }
.vmap-wrap { padding-top: 22px; padding-bottom: 8px; }
.vmap .lv1 { display: flex; gap: 24px; }
.vmap .lv1 > .t { flex: 0 0 132px; font-size: 16px; font-weight: 700; color: var(--ink-900);
  letter-spacing: 0; line-height: 1.3; }
.vmap .groups { display: flex; gap: 10px; flex-wrap: nowrap; flex: 1; min-width: 0; }
.vmap .grp { min-width: 0; flex: 1 1 auto; }
.vmap .grp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.vmap.cellmap { background: #FAFAFB; border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; }
.vmap.cellmap .lv1 { padding: 12px 0; }
.vmap.cellmap .lv1 > .t { padding-top: 16px; }
.vmap.cellmap .grp { background: #fff; border: 1px solid #ECECF1; border-radius: 12px;
  padding: 12px 16px 14px; }
.vmap.cellmap .grp h3 { margin: 0 0 9px; font-size: 12px; font-weight: 600; color: #8A8A93; }  /* 정수화 — 비정수 크기 흐릿함 (검증 LOW) */
/* B 맵 행폭 균등 = 전체 네모 (2026-08-31 리더 확정, 텍스트 목업 승인).
   근본 원인: site.css 의 범용 .pills(플렉스 툴바)가 .vmap…pills 에 오적용되어
   lv1 행이 flex 아이템으로 내용 폭 축소 → 행폭 불균등·grow 무력화.
   블록 흐름 복원으로 .groups flex:1 + .grp flex:1 1 auto(내용 비례)가 정상 동작. */
.vmap.cellmap.pills { display: block; }
.vmap.pills .grp ul { gap: 6px; }
.vmap.pills .grp { min-width: min-content; }   /* 칩이 박스 밖으로 나가지 않게 */
/* 목록은 2열 그리드 — 항목 경계가 셀 단위라 긴 이름도 구분 명확, DX 행 높이는
   절반으로 (2026-08-29 4차 지시. 세로 1열은 DX 가 과대해져 교체) */
/* 열 폭은 내용 기반(auto) — 1fr 고정이 EN 짧은 이름('Factova MES')까지 꺾던 결함
   (2026-08-30). 긴 이름은 자연 wrap. */
.vmap.texts .grp ul { display: grid; grid-template-columns: repeat(2, auto);
  justify-content: start; column-gap: 26px; align-items: start; }
.vmap.texts .grp li { padding: 1px 0; }
.vmap.texts .grp li a { color: var(--ink-900); font-weight: 600; padding: 3px 0;
  display: inline-block; font-size: 14px; line-height: 1.45; text-decoration: none; }
.vmap.texts .grp li a:hover { color: var(--accent); }
.vmap.texts .grp li span { color: #ADADB5; padding: 3px 0; display: inline-block;
  font-size: 14px; line-height: 1.45; }
.vmap.openmap .grp ul { gap: 6px; }
.vmap.openmap .lv1, .vmap.smlist .lv1 { padding: 22px 0; border-top: 1px solid var(--border); }
.vmap.openmap .lv1:last-child, .vmap.smlist .lv1:last-child { border-bottom: 1px solid var(--border); }
.vmap.openmap .groups, .vmap.smlist .groups { gap: 40px; }
.vmap.openmap .grp h3, .vmap.smlist .grp h3 { margin: 0 0 10px; font-size: 13.5px;
  font-weight: 700; color: var(--ink-900); padding-bottom: 8px;
  border-bottom: 2px solid var(--ink-900); }
.vmap.smlist .grp ul { display: block; }
.vmap.smlist .grp li { border-bottom: 1px solid var(--border); }
.vmap.smlist .grp li:last-child { border-bottom: 0; }
.vmap.smlist .grp li a, .vmap.smlist .grp li span { display: block; padding: 9px 18px 9px 0;
  font-size: 14px; position: relative; color: var(--ink-900); text-decoration: none; }
.vmap.smlist .grp li a:hover { color: var(--accent); }
.vmap.smlist .grp li span { color: #ADADB5; }
@media (max-width: 899px) { .vmap .lv1 { flex-direction: column; gap: 10px; }
  .vmap .groups { flex-wrap: wrap; } }

/* ── F 시안: 기존 그리드 + 담백한 텍스트 링크 (알약 대체 — 2026-08-27 지시) ── */
.ocell.otext { gap: 3px 16px; padding: 11px 13px; }
.otxt, .otxt-off { display: inline-block; font-size: 13.5px; line-height: 1.55;
  padding: 1px 0; text-decoration: none; }
.otxt { color: var(--ink-900); font-weight: 600; }
a.otxt:hover { color: var(--accent); text-decoration: none; }
a.otxt:hover::after { content: " →"; }
.otxt-off { color: #ADADB5; }

/* ── 웹브로셔 정렬·밀도 교정 (2026-08-27 지적) ──
   좌측 섹션 제목과 우측 본문 첫 줄의 상하 기준을 맞추고(내부 패딩 34px 제거),
   섹션 상하 여백 66px → 42px 로 압축. 스티키 섹션 탭은 서브내비(64+49px) 아래로. */
.wb-page .v2x-sec { padding: 42px 0; scroll-margin-top: 170px; }
.wb-page .v2x-c .wb-sec { padding: 0; }
.wb-page .wb-sec > :first-child { margin-top: 0; }
.wb-page .wb-sec > :last-child { margin-bottom: 0; }
.wb-page .wb-sec ul li:first-child { padding-top: 0; }
.wb-page .wb-sec ul li:first-child::before { top: 10px; }
.wb-page .wb-sec dl > div:first-child { padding-top: 0; }
/* 상세의 스티키 섹션 탭 — 서브내비(64+49px) 아래 3단 고정. 인접 선택자(.off-stack +)는
   사이에 .wb-head 가 있어 불발이었다 (검증 2회차 M1). */
.wb-head ~ .v2x-tabs { top: 113px; z-index: 35; background: #fff; }  /* 0.96 비침 제거 (점검 LOW) */
@media (max-width: 899px) { .wb-head ~ .v2x-tabs { top: 0; position: static; } }

/* ── 디자인 검증 반영 (2026-08-27) ── */
/* H1: 탭 말줄임은 CSS 로 — 공간 있으면 전체 노출, 좁으면 170px 말줄임 + 양끝 페이드 */
.wb-head ~ .v2x-tabs a { display: inline-block; max-width: 170px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* 탭이 많은 페이지(ai-vision 10탭)에서 마지막 탭이 소리 없이 사라지던 결함(검증 HIGH):
   gap 축소로 밀도를 높이고, 넘칠 때는 얇은 스크롤바로 '더 있음'을 보이게 한다. */
.wb-head ~ .v2x-tabs .wrap { overflow-x: auto; gap: 16px; scrollbar-width: thin;
  scrollbar-color: #D8DAE2 transparent; }
.wb-head ~ .v2x-tabs .wrap::-webkit-scrollbar { display: block; height: 5px; }
.wb-head ~ .v2x-tabs .wrap::-webkit-scrollbar-thumb { background: #D8DAE2; border-radius: 3px; }
.wb-head ~ .v2x-tabs .wrap::-webkit-scrollbar-track { background: transparent; }
.wb-head ~ .v2x-tabs .wrap { -webkit-mask-image: linear-gradient(90deg, transparent 0,
  #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 22px,
  #000 calc(100% - 22px), transparent); }
/* M1: 스크롤스파이 활성 표시 (search.js) */
.wb-head ~ .v2x-tabs a.on { color: var(--accent); font-weight: 700; }
/* M3·L6: 배지 그리드 — 300px 고정 상한이 1024px 에서 1열 역전을 만들던 결함 */
.wb-page .wb-nums { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
/* L1: 영상 프레임 상단을 h2 와 정렬 */
.wb-page .v2x-c > .wb-video { margin-top: 0; }
/* M5: 포스터 대체 — 재생 전 오버레이 (검은 첫 프레임 보완, 재생 시 숨김) */
.wb-video .frame::after { content: "▶"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 999px;
  background: var(--accent); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 20px; padding-left: 5px; box-sizing: border-box;
  pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.wb-video .frame.playing::after { display: none; }

/* ── 첫 줄 광학 중심 정렬 (2026-08-27 지적: top 붙임이라 본문이 제목 위로 떠 보임)
   h2 줄박스 40px 기준 — (40 − 요소 줄박스)/2 를 첫 요소에 보정 ── */
.wb-page .wb-sec > p.wb-lead:first-child { padding-top: 3px; }   /* 19px·lh1.75 ≈ 33px */
.wb-page .wb-sec > p:first-child:not(.wb-lead) { padding-top: 5px; } /* 16px·lh1.85 ≈ 30px */
.wb-page .wb-sec > dl:first-child > div:first-child { padding-top: 11px; } /* dt 실측 잔차 보정 */
.wb-page .wb-sec > ul:first-child { padding-top: 7px; }          /* li 15px ≈ 26px */
.wb-page .wb-sec > ul:first-child > li:first-child { padding-top: 0; }
.wb-page .wb-sec > ul:first-child > li:first-child::before { top: 10px; }

/* ── 맵 회색 캔버스 복원 — 서브내비·본문과 영역 구분 (2026-08-27 지적) ── */
/* 회색 캔버스는 전폭 밴드가 아니라 맵 컨텐츠만 감싸는 패널 — 좌우 여백은 흰색
   (2026-08-27 재재지적). 색은 #F1F2F5 (흰 셀과 구분되는 단계). */
.off-map { background: transparent; padding-bottom: 26px; }
.off-map .off-map-scroll { background: #F1F2F5; border: 1px solid #E3E4EA;
  border-radius: 16px; padding: 14px; }
[data-mapv] .vmap-wrap { background: transparent; }
.vmap { padding: 14px 18px; }
.vmap.cellmap .grp { border-color: #E3E4EA; }
.ocell { border-color: #E3E4EA; }
.ocell.empty { color: #C6C8D2; border-color: #D8DAE2; }
.vswitch { padding-bottom: 16px; }

/* ── 도해 라이트박스 (클릭 → 팝업, 클릭/ESC 닫기) ── */
.wb-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(17,17,17,.78);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.wb-lightbox img { max-width: min(1400px, 92vw); max-height: 90vh; width: auto; height: auto;
  border-radius: 10px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.wb-lightbox .x { position: absolute; top: 18px; right: 24px; color: #fff;
  font-size: 14px; opacity: .85; }

/* ── 맵 C안 + Liquid Glass 확정 (2026-08-29 7차 — M2 에서 교체, 리더 지시) ──
   패널 = 앰비언트 광(레드/잉크) 배경, 셀 = 반투명 유리(backdrop blur·saturate) +
   밝은 엣지 + 사선 스펙큘러, hover 시 리프트·유리 밝아짐. 텍스트는 잉크 유지. */
.vmap.cellmap.texts .lv1 { border-radius: 12px; scroll-margin-top: 120px; }
.vmap.cellmap { position: relative; border: 0; border-radius: 24px;
  background:
    radial-gradient(640px 320px at 10% 6%, rgba(216,31,42,.16), transparent 62%),
    radial-gradient(760px 400px at 90% 26%, rgba(17,17,17,.12), transparent 66%),
    radial-gradient(560px 340px at 42% 98%, rgba(216,31,42,.09), transparent 60%),
    linear-gradient(180deg, #F5F5F8, #E9EAF0); }
.vmap.cellmap .grp { position: relative; overflow: hidden;
  background: rgba(255,255,255,.6);
  /* backdrop-filter 제거 (2026-08-31) — GPU 합성이 칩 텍스트 안티앨리어싱을 회색조로
     떨어뜨려 자글거림. 뒤가 그라디언트뿐이라 블러 없이도 유리 톤 동일. */
  border: 1px solid rgba(255,255,255,.78); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(17,17,17,.05),
    0 10px 30px rgba(17,17,17,.12);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.vmap.cellmap .grp::before { content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 30%); }
.vmap.cellmap .grp:hover { transform: translateY(-3px);
  background: rgba(255,255,255,.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 1px rgba(17,17,17,.05),
    0 18px 42px rgba(17,17,17,.18); }
.vmap.cellmap .grp h3 { color: #6E6E78; }
.off-legend .lg { font-size: 12px; color: var(--ink-400); }
.off-legend .lg::before { content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; background: var(--ink-900); margin-right: 6px; vertical-align: 1px; }
.off-legend .lg-off::before { background: #ADADB5; }

/* ── Type별 강조 섹션 (2026-08-29 결정 9) — C안 확정: 제목 형광 마커
   (2026-08-29 3차 지시 — 카드·배지 폐기, 제목 텍스트에 옅은 레드 하이라이터만) ── */
.v2x-sec--hl .h h2 { display: inline;
  background: linear-gradient(transparent 58%, rgba(216,31,42,.16) 58%); }

/* ── Demo 요청 팝업 (2026-08-29 결정 5) ── */
.btn-demo { background: #fff; border: 1.5px solid var(--accent); color: var(--accent);
  font-weight: 700; cursor: pointer; }
.btn-demo:hover { background: var(--accent); color: #fff; }
.demo-ov { position: fixed; inset: 0; z-index: 320; background: rgba(17,17,17,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.demo-ov[hidden] { display: none; }
.demo-ov .panel { background: #fff; border-radius: 14px; max-width: 460px; width: 100%;
  padding: 26px 28px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.demo-ov h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: 0; }
.demo-ov p { margin: 0 0 8px; font-size: 14px; line-height: 1.65; color: var(--ink-700, #3d3d46); }
.demo-ov p.d { font-size: 12.5px; color: var(--ink-400); }
.demo-ov .act { margin: 16px 0 0; text-align: right; }
.demo-ov .act .btn { cursor: pointer; }

/* ── Conference 영상 (2026-08-29 결정 11 — Resource) ── */
.conf-sec { padding: 34px 0 10px; }
.conf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px; margin-top: 18px; }
.conf-card { background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; }
.conf-card h3 { margin: 0 0 12px; font-size: 16px; letter-spacing: 0; }
.conf-card .vgrid { display: grid; gap: 12px; }
.conf-v { margin: 0; }
.conf-v figcaption { font-size: 12px; color: var(--ink-400); margin-bottom: 5px; }
.conf-v video { width: 100%; border-radius: 10px; background: #111; display: block;
  max-height: 420px; }  /* 세로 영상(InterBattery)이 카드 균형을 깨지 않게 (검증① MED) */
.conf-v .ph { border: 1.5px dashed var(--border); border-radius: 10px; padding: 30px 14px;
  text-align: center; font-size: 12.5px; color: #ADADB5; background: #FAFAFB; }
.wb-video .vt { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-900); }
.wb-video .vt:first-child { margin-top: 0; }

/* ── 오퍼링별 PPTX 다운로드 (2026-08-29 결정 2 — Resource) ── */
.dl-sec { padding: 34px 0 6px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; margin-top: 16px; }
.dl-grid .dl { display: flex; flex-direction: column; gap: 3px; background: #fff;
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  text-decoration: none; color: var(--ink-900); }
.dl-grid .dl:hover { border-color: var(--accent); }
.dl-grid .dl b { font-size: 13.5px; letter-spacing: 0; }
.dl-grid .dl .l1 { font-size: 11px; color: var(--ink-400); }
.dl-grid .dl .sz { font-size: 11px; color: var(--accent); font-weight: 700; }

/* ── KO/EN 토글 (2026-08-29 결정 4) ── */
.nav-lang { font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 12px;
  border-radius: 999px; border: 1px solid var(--border); background: #fff;
  color: var(--ink-900); cursor: pointer; }
.nav-lang:hover { border-color: var(--accent); color: var(--accent); }

/* EN 영문판 감수 전 표기 — 살짝 (2026-08-29 결정 4, 검증③ HIGH) */
.wb-ainote { margin: 34px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--ink-300, #9a9aa2); }

/* ══ Liquid Glass 부분 채택 (2026-08-29 8차 — 리더 확정)
   본문 요소만 유리: 앰비언트 배경·히어로 칩·틴트 밴드·수치 칩·인용·이미지
   프레임·오버레이. 메뉴·내비(헤더/서브내비/탭바/푸터)는 불투명 유지 —
   "메뉴가 비치는 건 별로" 판정. ══ */
body {
  background:
    radial-gradient(900px 520px at 8% -6%, rgba(216, 31, 42, .08), transparent 60%),
    radial-gradient(1100px 640px at 102% 10%, rgba(17, 17, 17, .07), transparent 65%),
    radial-gradient(820px 520px at 28% 112%, rgba(216, 31, 42, .05), transparent 60%),
    #F5F5F8;
  background-attachment: fixed; }

.off-hero { position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0F0F13, #17171D 52%, #241014); }
.off-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 300px at 82% 0%, rgba(216, 31, 42, .28), transparent 62%),
    radial-gradient(680px 360px at -6% 110%, rgba(255, 255, 255, .07), transparent 60%); }
.off-hero .wrap { position: relative; }
.off-hero .stats .stat { background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px;
  padding: 10px 16px 12px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }

.v2x-sec--tint { background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.v2x-sec:not(.v2x-sec--tint) { background: transparent; }
.wb-num { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 14px; padding: 12px 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 18px rgba(17, 17, 17, .07); }
.wb-quote { background: rgba(255, 255, 255, .5); border-left-color: var(--accent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 0 14px 14px 0; }
.wb-fig img { border-color: rgba(255, 255, 255, .9); border-radius: 12px;
  background: #fff; box-shadow: 0 8px 26px rgba(17, 17, 17, .10); }
.btn-demo { background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }

.demo-ov { background: rgba(17, 17, 17, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.demo-ov .panel, .search-ov .panel { background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 40px 90px rgba(17, 17, 17, .3); }
.search-ov { background: rgba(17, 17, 17, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* 준비 중 오퍼링 페이지 — 고정 주소(백링크 연동용, 2026-08-30) */
.wb-pending { padding: 46px 0 70px; }
.wb-pending p { margin: 0 0 10px; font-size: 15.5px; color: var(--ink-700, #3d3d46); }
.wb-pending p.d { font-size: 12.5px; color: var(--ink-400); }
.wb-pending .btn { margin-top: 10px; }

/* ── Resource 오퍼링별 자료 목록 (2026-08-30 2차 — 기존 행·열 방식, 콤팩트 높이) ── */
.rz .cols-rz, .rz .rz-row { display: grid; gap: 14px; align-items: center;
  grid-template-columns: 40px minmax(230px, 1.3fr) 1fr 1.2fr 0.7fr; }
.rz .cols-rz { padding: 6px 0; border-bottom: 2px solid var(--ink-900);
  font-size: 11px; font-weight: 700; color: var(--ink-400); }
.rz .rz-cat { margin-top: 14px; padding: 5px 0 4px; font-size: 12px; font-weight: 700;
  color: var(--ink-900); border-bottom: 1px solid var(--border); }
.rz .rz-cat span { color: var(--ink-400); font-weight: 600; }
.rz .rz-row { padding: 7px 0; border-bottom: 1px solid #F0F0F4; }
.rz .rz-row .num { font-size: 11px; color: var(--ink-300); }
.rz .rz-row .ttl .t-eyebrow { display: block; font-size: 10px; color: var(--ink-300);
  margin-bottom: 1px; }
.rz .rz-row h3 { margin: 0; font-size: 14.5px; letter-spacing: 0; }
.rz .rz-row h3 a { color: var(--ink-900); text-decoration: none; }
.rz .rz-row h3 a:hover { color: var(--accent); }
.rz .rz-row .off { color: #ADADB5; }
.rz .rz-row.off .t-eyebrow { color: #C6C8D2; }
.rz .cell { font-size: 12.5px; }
.rz .cell a { color: var(--ink-700, #3d3d46); text-decoration: none; }
.rz .cell a:hover { color: var(--accent); }
.rz .cell .none { color: #C6C8D2; }
@media (max-width: 899px) { .rz .cols-rz { display: none; }
  .rz .rz-row { grid-template-columns: 32px 1fr; }
  .rz .rz-row .cell { grid-column: 2; } }

/* Resource 동영상 즉석 재생 오버레이 (2026-08-30) */
.vplay-ov { position: fixed; inset: 0; z-index: 320; background: rgba(17,17,17,.8);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vplay-ov .frame { width: min(1200px, 90vw); }
.vplay-ov video { width: 100%; max-height: 85vh; border-radius: 12px; background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); display: block; }
.vplay-ov .x { position: absolute; top: 18px; right: 24px; color: #fff; font-size: 14px;
  opacity: .85; cursor: pointer; }
.rz .cell .vset { white-space: nowrap; }

/* 홈 맵 스타일 스위처 (2026-08-31 — 시안 A~F 상시 선택, 기본 C·기억) */
.vswitch-home { justify-content: flex-end; padding-top: 16px; padding-bottom: 0; }
.vswitch-home span { opacity: .7; }
.vswitch-home button { font-size: 11px; padding: 3px 10px; }

/* ══ 맵 신규 시안 (2026-08-31 홈 스위처 확장) ══ */
/* G — 다크 유리: 히어로의 다크가 맵까지 이어지는 버전 */
.mapdark .vmap.cellmap { background:
    radial-gradient(640px 320px at 82% 0%, rgba(216,31,42,.30), transparent 62%),
    radial-gradient(700px 380px at -5% 105%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(140deg, #101014, #17171D 55%, #241014); }
.mapdark .vmap.cellmap .grp { background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.35); }
.mapdark .vmap.cellmap .grp::before { background:
  linear-gradient(115deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 30%); }
.mapdark .vmap.cellmap .grp:hover { background: rgba(255,255,255,.12); }
.mapdark .vmap.cellmap .grp h3 { color: #9a9aa2; }
.mapdark .vmap .lv1 > .t { color: #fff; }
.mapdark .vmap.texts .grp li a { color: #ECECEF; }
.mapdark .vmap.texts .grp li a:hover { color: #FF6B73; }
.mapdark .vmap.texts .grp li span { color: #6E6E78; }

/* H — 노선도: 대분류 = 노선, 오퍼링 = 정차점 */
.metro { padding: 8px 0 4px; }
.metro .mline { display: flex; gap: 24px; padding: 20px 0 6px; }
.metro .mtitle { flex: 0 0 132px; font-size: 16px; font-weight: 700;
  color: var(--ink-900); padding-top: 28px; }
.metro .mtrack { flex: 1; min-width: 0; display: flex;
  gap: 44px; flex-wrap: wrap; padding: 0 6px; row-gap: 26px; overflow: hidden; }
/* 선은 세그(중분류) 단위로 — 트랙 전체 1선은 줄바꿈 시 둘째 줄이 선 없이 떠서 결함 */
.metro .mseg { position: relative; display: flex; gap: 26px; }
.metro .mseg::before { content: ""; position: absolute; left: -22px; right: -22px;
  top: 27px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #17171D 70%); }
.metro .mseg .mh { position: absolute; top: 0; left: 0; font-size: 10px;
  font-weight: 600; color: #8A8A93; white-space: nowrap; }
.metro .mstop { position: relative; padding-top: 42px; font-size: 13.5px;
  font-weight: 600; color: var(--ink-900); text-decoration: none; max-width: 150px; }
.metro .mstop::before { content: ""; position: absolute; top: 21px; left: 50%;
  transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 3.5px solid var(--ink-900); box-sizing: border-box; }
.metro a.mstop:hover { color: var(--accent); }
.metro a.mstop:hover::before { border-color: var(--accent); }
.metro .mstop-off { color: #ADADB5; }
.metro .mstop-off::before { border-color: #C6C8D2; }

/* I — 타일: 오퍼링당 균일 타일(앱 런처) */
.tilemap .tl1 { margin-top: 22px; }
.tilemap .tl1 > h3 { margin: 0 0 10px; font-size: 16px; letter-spacing: 0; }
.tilemap .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 10px; }
.tilemap .tile { display: flex; flex-direction: column; justify-content: space-between;
  gap: 8px; min-height: 84px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px rgba(17,17,17,.07);
  text-decoration: none; transition: transform .14s ease, box-shadow .14s ease; }
.tilemap a.tile:hover { transform: translateY(-2px); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 26px rgba(17,17,17,.13); }
.tilemap a.tile:hover .nm { color: var(--accent); }
.tilemap .tile .cat { font-size: 10px; color: var(--ink-300); }
.tilemap .tile .nm { font-size: 13.5px; font-weight: 700; color: var(--ink-900);
  line-height: 1.35; }
.tilemap .tile.off { background: rgba(255,255,255,.35); border-style: dashed;
  border-color: #D8DAE2; box-shadow: none; }
.tilemap .tile.off .nm { color: #ADADB5; font-weight: 600; }

/* J — M2 오프셋 레이어(종이 스택) 복원: 유리 확정(d962be21a) 전의 확정 시안.
   검정 테두리 + 우하단 솔리드 섀도, hover 시 살짝 들리며 레드 섀도. */
.mapm2 .vmap.cellmap { background: #F6F6F8; border: 1px solid var(--border);
  border-radius: 14px; }
.mapm2 .vmap.cellmap .grp { background: #fff; overflow: visible;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1.5px solid var(--ink-900); border-radius: 8px;
  box-shadow: 6px 6px 0 #D6D7DE;
  transition: box-shadow .14s ease, transform .14s ease; }
.mapm2 .vmap.cellmap .grp::before { display: none; }
.mapm2 .vmap.cellmap .grp:hover { transform: translate(-2px, -2px); background: #fff;
  box-shadow: 9px 9px 0 rgba(216,31,42,.32); }
.mapm2 .vmap.cellmap .grp h3 { color: #8A8A93; }

/* ══ Conference 독립 메뉴 (2026-08-31 요청 3·4) ══ */
.confx { padding: 34px 0 10px; }
.confx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 14px; }
.confx-card { display: flex; flex-direction: column; gap: 8px; min-height: 148px;
  padding: 20px 22px; border-radius: 16px; text-decoration: none;
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(17,17,17,.07); }
.confx-card h2 { margin: 0; font-size: 20px; letter-spacing: 0; color: var(--ink-900); }
.confx-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.confx-card .foot { margin-top: auto; display: flex; justify-content: space-between;
  font-size: 12px; color: var(--ink-400); }
.confx-card .go { color: var(--accent); font-weight: 700; }
a.confx-card:hover { text-decoration: none; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 30px rgba(17,17,17,.13);
  transition: transform .14s ease, box-shadow .14s ease; }
a.confx-card:hover h2 { color: var(--accent); }
.confx-card.off { background: rgba(255,255,255,.35); border-style: dashed;
  border-color: #D8DAE2; box-shadow: none; }
.confx-card.off h2 { color: #ADADB5; }
.confd { padding: 38px 0 8px; }
.confd.alt { background: #FAFAFB; }
.confd h2 { margin: 4px 0 14px; font-size: 21px; letter-spacing: 0; }
.conf-sum { list-style: none; margin: 0 0 14px; padding: 0; }
.conf-sum li { position: relative; padding: 5px 0 5px 16px; font-size: 15px;
  line-height: 1.7; color: var(--ink-900); font-weight: 600; }
.conf-sum li::before { content: ""; position: absolute; left: 2px; top: 14px;
  width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
/* 전문 보기 = 간결한 알약 버튼, 열리면 평문 기사 (2026-08-31 지적 — 전폭 박스 폐지) */
.conf-full { max-width: 860px; }
.conf-full > summary { cursor: pointer; display: inline-block; width: fit-content;
  padding: 8px 18px; border: 1px solid var(--ink-900); border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-900); list-style: none;
  background: #fff; }
.conf-full > summary:hover { border-color: var(--accent); color: var(--accent); }
.conf-full > summary::-webkit-details-marker { display: none; }
.conf-full > summary::before { content: "▸ "; color: var(--accent); }
.conf-full[open] > summary::before { content: "▾ "; }
.conf-full[open] > summary { margin-bottom: 6px; }
.conf-full p { margin: 0; padding: 9px 2px; font-size: 15px; line-height: 1.85;
  color: var(--ink-500); }
.conf-src { padding: 4px 2px 0 !important; }
.conf-src a { color: var(--accent); font-weight: 700; text-decoration: none; font-size: 13px; }
/* 좌 글 + 우 소형 영상 2열 (2026-08-31 지시) */
.confd .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 470px);
  gap: 36px; align-items: start; }
@media (max-width: 899px) { .confd .duo { grid-template-columns: 1fr; } }
/* 영상은 원본 비율 그대로 — 세로 영상(720×1280 스케치)이 가로 프레임에 갇혀
   좌우 검정이 생기던 문제 (2026-08-31). 가로는 컬럼 폭, 세로는 높이 520 기준 */
.confd .conf-v video { max-width: 100%; max-height: 520px; width: auto; height: auto;
  border-radius: 12px; background: #000; display: block; }
.confd .conf-v { margin: 0; }
.confd .conf-v figcaption { font-size: 12.5px; color: var(--ink-400); margin-bottom: 7px; }
.confd .conf-v .ph { padding: 44px 20px; border: 1px dashed #D8DAE2;
  border-radius: 12px; text-align: center; color: #ADADB5; font-size: 13.5px; }
.off-hero .back { display: inline-block; margin-bottom: 10px; font-size: 12.5px;
  color: #B9B9C2; text-decoration: none; }
.off-hero .back:hover { color: #fff; }

/* ── Resource 카드·자료 페이지 (2026-08-31 지시) ── */
/* 카드 제목 전체 표시 — theme-lgcns 의 nowrap 말줄임 해제 */
.v2x-scard h3 { white-space: normal; overflow: visible; text-overflow: clip; }
/* 카테고리 헤더 설명 문구를 제목(h2) 하단 기준으로 정렬 — 상단 붙음 지적 (2026-08-31) */
.v2x-cathead { align-items: end; }
.v2x-cathead p { padding-bottom: 4px; }
.sdl { padding: 30px 0 10px; max-width: 900px; }
.sdl .crumb { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-400); }
.sdl .crumb a { color: var(--ink-400); text-decoration: none; }
.sdl .crumb a:hover { color: var(--accent); }
.sdl .top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sdl h1 { margin: 0; font-size: 26px; letter-spacing: -0.5px; }
.sdl .ty { font-size: 11px; font-weight: 700; color: var(--accent);
  border: 1px solid currentColor; border-radius: 6px; padding: 2px 7px; }
.sdl .lead { margin: 10px 0 0; font-size: 15px; line-height: 1.75; color: var(--ink-500); }
.sdl-list { margin-top: 22px; border-top: 2px solid var(--ink-900); }
.sdl-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px;
  align-items: baseline; padding: 14px 2px; border-bottom: 1px solid var(--border); }
.sdl-row .k { font-size: 11.5px; font-weight: 700; color: var(--ink-400); }
.sdl-row .b b { font-size: 15px; color: var(--ink-900); }
.sdl-row .b p { margin: 4px 0 0; font-size: 13px; line-height: 1.65; color: var(--ink-400); }
.sdl-row .a { font-size: 13px; white-space: nowrap; }
.sdl-row .a a { color: var(--accent); font-weight: 700; text-decoration: none; }
.sdl-row .a a:hover { text-decoration: underline; }
.sdl-row .a .none { color: #C6C8D2; }
@media (max-width: 720px) { .sdl-row { grid-template-columns: 1fr; gap: 4px; }
  .sdl-row .a { white-space: normal; } }

/* Conference 서브내비·스케치 소개 문구 (2026-08-31) */
.conf-sub .wrap > span.off { display: inline-block; font-size: 16px; color: #ADADB5;
  padding: 14px 2px 12px; white-space: nowrap; cursor: default; }
.conf-intro { margin: 0 0 14px; max-width: 860px; font-size: 15px; line-height: 1.8;
  color: var(--ink-500); }

/* Conference 인덱스 = 리스트형 (2026-08-31 리더 선택 — 시안 A) */
.confx-list { list-style: none; margin: 24px 0 0; padding: 0; border-top: 2px solid var(--ink-900);
  max-width: 1100px; }
.confx-list li { border-bottom: 1px solid var(--border); }
.confx-list li > a, .confx-list li.off { display: grid; grid-template-columns: 210px 1fr auto;
  gap: 26px; align-items: baseline; padding: 22px 4px; text-decoration: none; color: var(--ink-900); }
.confx-list .nm { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.confx-list .bd b { font-size: 15px; font-weight: 600; }
.confx-list .bd small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-400); }
.confx-list .go { color: var(--accent); font-weight: 700; font-size: 14px; white-space: nowrap; }
.confx-list li > a:hover .nm, .confx-list li > a:hover .bd b { color: var(--accent); }
.confx-list li > a:hover { text-decoration: none; }
.confx-list li.off { color: #ADADB5; }
.confx-list li.off .nm { color: #ADADB5; }
.confx-list li.off .bd { font-size: 13px; padding-top: 5px; }
@media (max-width: 899px) { .confx-list li > a, .confx-list li.off { grid-template-columns: 1fr; gap: 6px; } }