@import url("./vss-design-tokens.css");

/* ===== VISION SPACE 상단 아일랜드 바 + 다크/라이트 테마 (2026-09-13, rev2 2026-09-14) ===== */

/* ---------- 1. 아일랜드 상단 바 ----------
   폭: 콘텐츠 폭(컨테이너 최대 1660px − 좌우 15px)에 정렬
   R 26px = 스위치 R 9 + 스위치 상·하·우 여백 17 (동심) / 유리 효과는 ::before 에 둬서 드롭다운도 같은 블러 가능 */
:root {
  --vs-island-top: 14px; --vs-island-r: var(--vss-radius-panel); --vs-island-pad-l: 2.4rem; --vs-island-pad-r: 17px;
  --vs-accent: var(--vss-accent-action);
  --vs-glass-bg: rgba(18, 19, 23, .62); --vs-glass-line: rgba(255, 255, 255, .10);
  --vs-glass-shadow: 0 12px 32px rgba(0, 0, 0, .35); --vs-glass-blur: blur(18px) saturate(160%);
  --vs-ink: #1d1d1f; --vs-ink-2: #424245; --vs-ink-3: #6e6e73; --vs-paper: #f5f5f7; --vs-line: rgba(0, 0, 0, .10);
}
@media (max-width: 1359.98px) { :root { --vs-island-top: 10px; --vs-island-pad-l: 17px; } }

html body nav.site-navbar.site-navbar-transparent.navbar.navbar-expand-md.fixed-top.bg-black-navbar {
  top: var(--vs-island-top) !important; left: 0 !important; right: 0 !important;
  width: min(calc(100% - 30px), 1630px) !important; max-width: none !important; min-height: 62px;
  margin: 0 auto !important; padding-left: var(--vs-island-pad-l) !important; padding-right: var(--vs-island-pad-r) !important;
  border: 0 !important; border-radius: var(--vs-island-r) !important;
  background: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body nav.site-navbar.site-navbar-transparent.navbar.navbar-expand-md.fixed-top.bg-black-navbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; border: 1px solid var(--vs-glass-line);
  background-color: var(--vs-glass-bg); box-shadow: var(--vs-glass-shadow);
  -webkit-backdrop-filter: var(--vs-glass-blur); backdrop-filter: var(--vs-glass-blur);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
html body nav.site-navbar.site-navbar-transparent.navbar.navbar-expand-md.fixed-top.bg-black-navbar.navbar-toggled-show::before { background-color: rgba(18, 19, 23, .94); }

/* 드롭다운(회사·솔루션·문의·소개서·언어) = 아일랜드와 같은 유리 톤 */
html body .site-navbar .dropdown-menu, html body .site-navbar .dropdown-menu.show {
  background-color: var(--vs-glass-bg) !important; border: 1px solid var(--vs-glass-line) !important; box-shadow: var(--vs-glass-shadow) !important;
  -webkit-backdrop-filter: var(--vs-glass-blur); backdrop-filter: var(--vs-glass-blur);
}
@media (max-width: 1359.98px) {
  html body .site-navbar .dropdown-menu, html body .site-navbar .dropdown-menu.show {
    background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- 2. 테마 전환 스위치 (09-17 6차: 원형 대신 곡률 둥근 모서리 — 미지원 브라우저 R12/노브 R7, 지원 브라우저는 4절) ---------- */
.theme-toggle { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; width: 50px; height: 28px; padding: 0; margin: 0;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px; background: rgba(255, 255, 255, .08); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color .3s ease, border-color .3s ease; }
.theme-toggle:hover { border-color: rgba(255, 255, 255, .45); }
.theme-toggle:focus { outline: none; }
.theme-toggle:focus-visible { outline: var(--vss-border-selected) solid var(--vs-accent); outline-offset: 2px; }
.theme-toggle .tt-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 7px; background: #fff; color: var(--vs-ink);
  display: flex; align-items: center; justify-content: center; transition: transform .3s cubic-bezier(.4, .1, .2, 1), background-color .3s ease, color .3s ease; }
.theme-toggle svg { width: 12px; height: 12px; display: block; }
.theme-toggle .tt-sun { display: none; }
.nav-theme { display: flex; align-items: center; margin-left: 1.4rem; }
.theme-toggle--bar { position: absolute; top: 17px; right: calc(var(--vs-island-pad-r) + 44px); z-index: 3; }
@media (min-width: 1360px) { .theme-toggle--bar { display: none !important; } }
@media (max-width: 1359.98px) { .nav-theme { display: none !important; } }
html.vs-theme-anim body, html.vs-theme-anim body *:not(.tt-knob):not(video):not(img):not(iframe) {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease, box-shadow .4s ease !important; }

/* ---------- 3. 라이트 모드 (글자 = 다크블랙 #1d1d1f 계열, 애플·테슬라 톤) ---------- */
html[data-theme="light"] { color-scheme: light; --vs-glass-bg: rgba(255, 255, 255, .72); --vs-glass-line: rgba(0, 0, 0, .06); --vs-glass-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
html[data-theme="light"] body { background-color: var(--vs-paper) !important; color: var(--vs-ink); }
html[data-theme="light"] .loader, html[data-theme="light"] .loader.bg-dark { background-color: var(--vs-paper) !important; }
html[data-theme="light"] .loader img { filter: invert(1); }
html[data-theme="light"] body nav.site-navbar.site-navbar-transparent.navbar.navbar-expand-md.fixed-top.bg-black-navbar.navbar-toggled-show::before { background-color: rgba(255, 255, 255, .96); }
html[data-theme="light"] .theme-toggle { border-color: rgba(0, 0, 0, .16); background: rgba(0, 0, 0, .05); }
html[data-theme="light"] .theme-toggle:hover { border-color: rgba(0, 0, 0, .34); }
html[data-theme="light"] .theme-toggle .tt-knob { transform: translateX(22px); background: var(--vs-ink); color: #fff; }
html[data-theme="light"] .theme-toggle .tt-sun { display: block; }
html[data-theme="light"] .theme-toggle .tt-moon { display: none; }

/* 상단 바 내용 */
html[data-theme="light"] .navbar-brand .vslogo { filter: invert(.114) !important; }
html[data-theme="light"] .navbar-brand .backed-by { color: var(--vs-ink) !important; }
html[data-theme="light"] .navbar-brand img[alt="500 Global"] { filter: invert(.886); }
html[data-theme="light"] .site-navbar .nav-link, html[data-theme="light"] .site-navbar .current-lang, html[data-theme="light"] .site-navbar .fa-globe { color: var(--vs-ink) !important; }
html[data-theme="light"] .nav-item.dropdown .nav-link::after { background-color: var(--vs-ink) !important; }
html[data-theme="light"] .nav-divider { background-color: rgba(0, 0, 0, .2) !important; }
html[data-theme="light"] .youtube-link svg, html[data-theme="light"] .linkedin-link svg, html[data-theme="light"] .brochure-link svg { background-color: rgba(0, 0, 0, .06) !important; }
html[data-theme="light"] .youtube-link svg path, html[data-theme="light"] .linkedin-link svg path, html[data-theme="light"] .brochure-link svg path { fill: var(--vs-ink); }
html[data-theme="light"] .youtube-link:hover svg path, html[data-theme="light"] .linkedin-link:hover svg path { fill: #fff; }
html[data-theme="light"] .navbar-toggler-alternative-icon, html[data-theme="light"] .navbar-toggler-alternative-icon::before, html[data-theme="light"] .navbar-toggler-alternative-icon::after { background-color: var(--vs-ink) !important; }
html[data-theme="light"] .dropdown-item, html[data-theme="light"] .dropdown-item .lang-flag { color: var(--vs-ink) !important; }
html[data-theme="light"] .dropdown-item:hover, html[data-theme="light"] .dropdown-item:hover .lang-flag { color: #2176FF !important; }

/* 메인 히어로: 영상 선명하게(얇은 베일) + 로고 다크블랙 + 블러 번짐 */
html[data-theme="light"] .background-video { filter: saturate(1.05) contrast(1.04) !important; }
html[data-theme="light"] .bg-black-cover { background: linear-gradient(180deg, rgba(245, 245, 247, .52) 0%, rgba(245, 245, 247, .20) 32%, rgba(245, 245, 247, .20) 68%, rgba(245, 245, 247, .56) 100%) !important; }
html[data-theme="light"] .overlay-inner.bg-dark { background-color: var(--vs-paper) !important; }
html[data-theme="light"] .convert_to_white_logo { filter: invert(.114) drop-shadow(0 0 2px rgba(255, 255, 255, .85)) drop-shadow(0 0 18px rgba(255, 255, 255, .8)) !important; }
html[data-theme="light"] h4.mop { text-shadow: 0 0 2px rgba(255, 255, 255, .7), 0 0 16px rgba(255, 255, 255, .85); }
html[data-theme="light"] h4.mop, html[data-theme="light"] .solution-title, html[data-theme="light"] .solution-eyebrow { color: var(--vs-ink) !important; }
html[data-theme="light"] .btn_video { color: var(--vs-ink) !important; border-color: rgba(0, 0, 0, .16) !important; background-color: rgba(255, 255, 255, .58) !important; }
html[data-theme="light"] .btn_video:hover { border-color: #2176FF !important; }
html[data-theme="light"] .btn_video .small-image { filter: invert(.886); }
html[data-theme="light"] .partner-note { color: var(--vs-ink-2) !important; }

/* 공통 타이틀·설명 */
html[data-theme="light"] .ln-section h1, html[data-theme="light"] .ln-section h2, html[data-theme="light"] .ln-section h3 { color: var(--vs-ink); }
html[data-theme="light"] .company-title, html[data-theme="light"] .company-title b, html[data-theme="light"] .section-title, html[data-theme="light"] .section-title b { color: var(--vs-ink) !important; }
html[data-theme="light"] .color-gray, html[data-theme="light"] p.color-gray, html[data-theme="light"] h5.color-gray { color: var(--vs-ink-2) !important; }

/* 회사: 미션·연혁·파트너·지도·뉴스 — 흰 선 이미지 반전: 선 #1d1d1d / 바탕 #f5f5f5 */
html[data-theme="light"] #mission .swiper-slide img, html[data-theme="light"] #partners picture img { filter: invert(1) contrast(.788) brightness(1.075); }
html[data-theme="light"] div.company-history > p { color: var(--vs-ink-2) !important; }
html[data-theme="light"] div.company-history > p > span { color: var(--vs-ink) !important; }
html[data-theme="light"] div.company-history::before, html[data-theme="light"] div.company-history > p::before { background-color: rgba(0, 0, 0, .24) !important; }
html[data-theme="light"] .history-period { color: var(--vs-ink-3) !important; }
html[data-theme="light"] .history-toggle { background: #fff !important; border-color: rgba(0, 0, 0, .12) !important; color: var(--vs-ink) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
html[data-theme="light"] .history-toggle:hover { border-color: #2176FF !important; }
html[data-theme="light"] .vs-map { background: #e8e8ed; box-shadow: 0 12px 32px rgba(0, 0, 0, .10); }
html[data-theme="light"] .vs-map-frame { filter: none !important; }
html[data-theme="light"] .vs-map-caption { color: var(--vs-ink) !important; }
html[data-theme="light"] .vs-map-btn { background: #fff !important; border-color: rgba(0, 0, 0, .12) !important; color: var(--vs-ink) !important; }
html[data-theme="light"] .vs-map-btn:hover { border-color: #2176FF !important; }
html[data-theme="light"] #news .news-card { background: #fff !important; border-color: rgba(0, 0, 0, .06) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .05); }
html[data-theme="light"] #news .news-card:hover { border-color: #2176FF !important; }
html[data-theme="light"] .news-card h6 { color: var(--vs-ink) !important; }
html[data-theme="light"] .news-card .date { color: var(--vs-ink-3) !important; }
html[data-theme="light"] .news-thumb, html[data-theme="light"] #news .news-card.no-thumbnail .news-thumb { background-color: #ececf0 !important; }
html[data-theme="light"] .news-card.no-thumbnail .news-thumb::after { filter: invert(.114) !important; opacity: .85; }
html[data-theme="light"] .news-btn { border-color: rgba(0, 0, 0, .16) !important; background-color: #fff !important; }
html[data-theme="light"] .news-btn svg path { fill: var(--vs-ink); }

/* 솔루션 */
html[data-theme="light"] .card-box { background: #fff !important; border-color: rgba(0, 0, 0, .12) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .05); }
html[data-theme="light"] .card-box.active { border-color: #2176FF !important; background: #fff !important; }
html[data-theme="light"] .card-box .text-white, html[data-theme="light"] .card-box h3, html[data-theme="light"] .card-box li, html[data-theme="light"] .card-box b { color: var(--vs-ink) !important; }
html[data-theme="light"] .card-box p, html[data-theme="light"] .card-box p b { color: var(--vs-ink-2) !important; }
html[data-theme="light"] .tab-button { background: #fff !important; border-color: rgba(0, 0, 0, .12) !important; color: var(--vs-ink) !important; }
html[data-theme="light"] .tab-button.active, html[data-theme="light"] .tab-button:hover { border-color: #2176FF !important; }
html[data-theme="light"] .advantage-box { background: #fff !important; border-color: rgba(0, 0, 0, .10) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .05); }
html[data-theme="light"] .advantage-box, html[data-theme="light"] .advantage-box li, html[data-theme="light"] .advantage-box span, html[data-theme="light"] .advantage-box b, html[data-theme="light"] .advantage-box p { color: var(--vs-ink) !important; }
html[data-theme="light"] .animate-advantage-icon { filter: invert(.886); }
html[data-theme="light"] .counter, html[data-theme="light"] .count { color: var(--vs-ink-2) !important; }

/* 문의 폼 */
html[data-theme="light"] .form-control { background-color: #fff !important; color: var(--vs-ink) !important; border-color: rgba(0, 0, 0, .14) !important; }
html[data-theme="light"] .form-control::placeholder { color: #86868b !important; opacity: 1; }
html[data-theme="light"] .form-control:focus { border-color: #2176FF !important; box-shadow: 0 0 0 3px rgba(33, 118, 255, .12) !important; }
html[data-theme="light"] select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; }
html[data-theme="light"] select.form-control option { color: var(--vs-ink); background-color: #fff; }

/* 푸터 */
html[data-theme="light"] div.contact-copyright-section > img { filter: invert(.114) !important; }
html[data-theme="light"] .horizontal-line { border-color: rgba(0, 0, 0, .12) !important; }
html[data-theme="light"] footer .contact-copyright-text-wrapper h6, html[data-theme="light"] footer .contact-copyright-text-wrapper h6 span { color: var(--vs-ink-2) !important; }
html[data-theme="light"] footer .copyright-terms h6 { color: var(--vs-ink-3) !important; }
html[data-theme="light"] .back-to-top i { color: var(--vs-ink) !important; border-color: rgba(0, 0, 0, .28) !important; }

/* ---------- 4. 연속 곡률 모서리 (애플식 continuous corner) ----------
   corner-shape 지원 브라우저(크롬·엣지 139+)에서만 적용되고, 미지원 브라우저(사파리 등)는 기존 둥근 모서리를 그대로 씀.
   일반 원 모서리 R과 체감 크기가 같도록 곡선 구간을 1.53배로 늘림(superellipse 1.7). 높이에 막히는 상단 바·탭 버튼은 1.3. */
@supports (corner-shape: superellipse(2)) {
  *, *::before, *::after { corner-shape: superellipse(1.7); }
  div.company-history > p::before, .handle-icon, .rounded-circle { corner-shape: round; }
  html body nav.site-navbar.site-navbar-transparent.navbar.navbar-expand-md.fixed-top.bg-black-navbar, html body nav.site-navbar.site-navbar-transparent.navbar.navbar-expand-md.fixed-top.bg-black-navbar::before { border-radius: 31px !important; corner-shape: superellipse(1.3); }
  .theme-toggle { border-radius: 14px; corner-shape: superellipse(1.3); }
  .theme-toggle .tt-knob { border-radius: 9px; corner-shape: superellipse(1.3); }
  html body .site-navbar .dropdown-menu { border-radius: 24px !important; }
  .youtube-link svg, .linkedin-link svg, .brochure-link svg { border-radius: 9px !important; }
  .back-to-top i { border-radius: 16px !important; }
  .btn_video { border-radius: 24px !important; }
  .btn-view-detail { border-radius: 18px !important; }
  .btn_contacts { border-radius: 14px !important; }
  .partner-badge img { border-radius: 9px !important; }
  .collage-item, .tars-video-card { border-radius: 24px !important; }
  .history-toggle { border-radius: 24px !important; }
  .vs-map, .vs-map-btn { border-radius: 15px !important; }
  .vs-map-btn img { border-radius: 11px !important; }
  #news .news-card { border-radius: 24px !important; }
  .card-box, .tab-pane, .advantage-box { border-radius: 49px !important; }
  .tab-button { border-radius: 37px !important; corner-shape: superellipse(1.3); }
  .swiper-slide video, .video-item, .comparison-content { border-radius: 24px !important; }
  .slider-text { border-radius: 15px !important; }
  .label-before, .label-after { border-radius: 14px !important; }
  .form-control { border-radius: 15px !important; }
  @media (max-width: 768px) { .vs-map { border-radius: 11px !important; } }
}

/* ---------- 5. 2026-09-14 추가: 다크 배경 #030303 · 히어로 덮개 전체 높이+하단 페이드 · 푸터 구분선 ---------- */
:root { --vs_bg: #030303; }
html:not([data-theme="light"]) body { background-color: #030303 !important; }
html:not([data-theme="light"]) .tars-video-card, html:not([data-theme="light"]) .video-item, html:not([data-theme="light"]) .vs-map { background-color: #030303 !important; }
/* 모바일에서 히어로가 100vh보다 길어 덮개(vh-100) 아래로 영상이 드러나던 문제 → 섹션 전체 높이로 덮고 아래는 배경색으로 페이드 */
.overlay-inner .bg-black-cover.vh-100 { width: 100% !important; height: 100% !important; }
html:not([data-theme="light"]) .bg-black-cover { background: linear-gradient(180deg, rgba(21, 23, 33, .35) 0%, rgba(21, 23, 33, .35) 80%, rgba(3, 3, 3, .92) 100%) !important; }
html[data-theme="light"] .bg-black-cover { background: linear-gradient(180deg, rgba(245, 245, 247, .52) 0%, rgba(245, 245, 247, .20) 32%, rgba(245, 245, 247, .20) 62%, rgba(245, 245, 247, .66) 88%, #f5f5f7 100%) !important; }
/* 푸터 구분선: 0.5px 헤어라인, 다크는 어둡게 / 라이트는 보이게 (기존 흰색 1px × opacity .45 제거) */
footer .horizontal-line { opacity: 1 !important; border-top: 1px solid rgba(255, 255, 255, .2) !important; transform: scaleY(.5); transform-origin: 0 0; }  /* 크롬은 0.5px 테두리를 1px로 올려 그림 → 1px을 세로 50% 축소해 레티나 1픽셀 헤어라인 */
html[data-theme="light"] footer .horizontal-line { border-top-color: rgba(0, 0, 0, .26) !important; }

/* ---------- 6. 2026-09-14 페이지 스크롤바: 뒤 트랙(박스) 제거 · 둥근 막대만 2px · 오른쪽 끝 2px 여백 ----------
   폭 5px = 왼쪽 1px + 막대 2px + 오른쪽 2px(투명 테두리 + background-clip). 다크 짙은 회색 / 라이트 연한 회색으로 거의 안 보이게.
   크롬 121+는 scrollbar-width/color가 지정되면 ::-webkit-scrollbar를 무시하므로 auto로 되돌림(파이어폭스는 아래 표준 속성). */
@supports selector(::-webkit-scrollbar) {
  html, body { scrollbar-width: auto; scrollbar-color: auto; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 5px; height: 5px; background: transparent; }
  html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner { background: transparent; border: 0; box-shadow: none; }
  html::-webkit-scrollbar-button, body::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { min-height: 40px; border-radius: 10px; border-style: solid; border-color: transparent; border-width: 0 2px 0 1px; background-clip: padding-box; background-color: #2a2a2c; }
  html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background-color: #46464a; }
  html[data-theme="light"]::-webkit-scrollbar-thumb, html[data-theme="light"] body::-webkit-scrollbar-thumb { background-color: #d2d2d7; }
  html[data-theme="light"]::-webkit-scrollbar-thumb:hover, html[data-theme="light"] body::-webkit-scrollbar-thumb:hover { background-color: #b9b9be; }
}
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #2a2a2c transparent; }
  html[data-theme="light"] { scrollbar-color: #d2d2d7 transparent; }
}

/* ---------- 7. 2026-09-14 콘텐츠 이미지 모서리: 미션 도식·파트너 로고 이미지도 영상·카드와 같은 모서리 ----------
   (영상·카드·지도·뉴스 썸네일은 4절에서 이미 연속 곡률로 잘림. 전체 화면 히어로 영상과 투명 로고·아이콘은 제외) */
#mission .swiper-slide img, #partners picture img { border-radius: 16px; }
@supports (corner-shape: superellipse(2)) {
  #mission .swiper-slide img, #partners picture img { border-radius: 24px !important; corner-shape: superellipse(1.7); }
}

/* ---------- 8. 2026-09-14 라이트 모드 보정: 히어로 흰 그림자 제거 · 메인 로고 유리(블러) 다크그레이 · 상단 픽토그램·브랜드 다크그레이 ---------- */
html[data-theme="light"] { --vs-ink-soft: #48484a; }
html[data-theme="light"] h4.mop { text-shadow: none !important; }
/* 메인 로고: 원본 검정 픽셀은 숨기고, 로고 모양으로 잘린 반투명 다크그레이 + 뒤 영상 블러(유리) */
html[data-theme="light"] .convert_to_white_logo {
  filter: none !important;
  object-position: -99999px 0;
  background-color: rgba(50, 50, 52, .84);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  -webkit-mask: url("../assets/logo/visionspace_logo.png") center / 100% 100% no-repeat;
  mask: url("../assets/logo/visionspace_logo.png") center / 100% 100% no-repeat;
}
/* 상단 바: 브랜드·Backed in·500·아이콘·언어·스위치 노브·햄버거 = 다크그레이 */
html[data-theme="light"] .navbar-brand .vslogo { filter: invert(.282) !important; }
html[data-theme="light"] .navbar-brand .backed-by { color: var(--vs-ink-soft) !important; }
html[data-theme="light"] .navbar-brand img[alt="500 Global"] { filter: invert(.718) !important; }
html[data-theme="light"] .youtube-link svg path, html[data-theme="light"] .linkedin-link svg path, html[data-theme="light"] .brochure-link svg path { fill: var(--vs-ink-soft) !important; }
html[data-theme="light"] .youtube-link:hover svg path, html[data-theme="light"] .linkedin-link:hover svg path { fill: #fff !important; }
html[data-theme="light"] .site-navbar .fa-globe, html[data-theme="light"] .nav-lang .current-lang { color: var(--vs-ink-soft) !important; }
html[data-theme="light"] .theme-toggle .tt-knob { background: var(--vs-ink-soft) !important; }
html[data-theme="light"] .navbar-toggler-alternative-icon, html[data-theme="light"] .navbar-toggler-alternative-icon::before, html[data-theme="light"] .navbar-toggler-alternative-icon::after { background-color: var(--vs-ink-soft) !important; }

/* ---------- 9. 2026-09-14 라이트 모드 히어로 베일: 흰 톤 레이어 투명도 50% 더 (영상이 안개 없이 보이게, 맨 아래 배경색 페이드는 유지) ---------- */
html[data-theme="light"] .bg-black-cover { background: linear-gradient(180deg, rgba(245, 245, 247, .26) 0%, rgba(245, 245, 247, .10) 32%, rgba(245, 245, 247, .10) 66%, rgba(245, 245, 247, .40) 90%, #f5f5f7 100%) !important; }
html[data-theme="light"] .overlay-inner.bg-dark.opacity-10 { opacity: .05 !important; }

/* ---------- 10. 2026-09-14 채용 페이지 (문의 페이지와 같은 폼 문법) ---------- */
.careers-head h1.section-title { margin-bottom: 18px !important; }
/* theme.css 'p:last-child{margin-bottom:0}'(0,1,1)을 이기도록 (0,2,1) → [제목+설명] 60px [폼] */
.careers-head p.careers-lead { margin: 0 auto 60px; max-width: 760px; text-align: center; font-size: 15px; line-height: 1.7; color: #a7a7a7; word-break: keep-all; }
html[lang="ja"] .careers-lead, html[lang="zh-CN"] .careers-lead { word-break: normal; }
.careers-form { text-align: left; }
.careers-form .careers-submit { visibility: visible !important; animation: none !important; } /* theme.css .animated{visibility:hidden}: 스크롤 전에도 버튼 표시 */
.careers-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
@media (max-width: 768px) { .careers-grid { grid-template-columns: 1fr; } }
.careers-label { display: block; margin: 6px 12px 8px; font-size: 13px; color: #a7a7a7; }
.careers-intro { position: relative; }
.careers-intro textarea { min-height: 170px; padding-bottom: 30px; resize: vertical; }
.careers-count { position: absolute; right: 14px; bottom: 12px; font-size: 12px; color: #8a8a8e; pointer-events: none; }
.careers-count.is-over { color: #ff6b6b; }
.careers-file { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 16px 18px; border: 1px dashed rgba(255, 255, 255, .24); border-radius: 15px; background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; transition: border-color .2s, background-color .2s; }
.careers-file:hover, .careers-file:focus-visible, .careers-file.is-drag { border-color: #2176FF; background: rgba(33, 118, 255, .08); outline: none; }
.careers-file.has-file { border-style: solid; border-color: rgba(33, 118, 255, .65); }
.careers-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.careers-file-icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.careers-file-icon svg { width: 20px; height: 20px; }
.careers-file-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.careers-file-text b { font-weight: 600; }
.careers-file-text span { overflow: hidden; font-size: 12px; color: #a7a7a7; text-overflow: ellipsis; white-space: nowrap; }
.careers-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.careers-consent { text-align: center; }
.careers-consent-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 16px; row-gap: 6px; }
.careers-check { display: flex; justify-content: center; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; color: #d6d6d6; cursor: pointer; }
.careers-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #2176FF; }
.careers-check span { text-align: left; line-height: 22px; }
/* 내용 보기 = 동의 문구와 같은 줄·같은 14px, 펼친 내용은 줄 아래 */
.careers-more { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 22px; color: #a7a7a7; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(167, 167, 167, .45); }
.careers-more::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.careers-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.careers-more:hover { color: #fff; }
.careers-more:focus { outline: none; }
.careers-more:focus-visible { outline: 2px solid #2176FF; outline-offset: 3px; border-radius: 4px; }
.careers-privacy { max-width: 600px; margin: 12px auto 0; text-align: center; font-size: 12px; line-height: 1.7; white-space: pre-line; color: #8a8a8e; }
.careers-submit { border: 0; font-family: inherit; cursor: pointer; }
.careers-submit:disabled { opacity: .6; cursor: default; }
.careers-form .careers-actions { text-align: center !important; }
.careers-status { min-height: 22px; margin: 16px 0 0; font-size: 14px; text-align: center; }
.careers-status.is-success { color: #34c759; }
.careers-status.is-error { color: #ff6b6b; }
/* careers-focus-2px: 문의·채용 입력칸 선택 시 파란 2px 테두리, 그림자 없음 (대표 지시 2026-09-15). 테두리 1px→2px 만큼 패딩 1px 줄여 글자 위치 고정 */
.contact-section.form .form-control { box-shadow: none !important; }
html body .contact-section.form .form-control:focus { border: 2px solid #2176FF !important; box-shadow: none !important; outline: none !important; padding: 4.625px 10.25px !important; } /* 실측 기본 패딩 5.625/11.25px − 1px */
html body .contact-section.form .careers-form textarea.form-control:focus { padding-bottom: 29px !important; } /* 채용 자기소개는 글자수 표시 자리 30px */
html body .careers-form .careers-file:focus-within, html body .careers-form .careers-file:focus-visible { border: 2px solid #2176FF; box-shadow: none; padding: 15px 17px; }
html[data-theme="light"] .careers-lead, html[data-theme="light"] .careers-label { color: var(--vs-ink-2); }
html[data-theme="light"] .careers-file { border-color: rgba(0, 0, 0, .18); background: #fff; color: var(--vs-ink); }
html[data-theme="light"] .careers-file-icon { background: #f5f5f7; color: var(--vs-ink-soft); }
html[data-theme="light"] .careers-file-text span, html[data-theme="light"] .careers-privacy, html[data-theme="light"] .careers-count { color: var(--vs-ink-3); }
html[data-theme="light"] .careers-check { color: var(--vs-ink); }
html[data-theme="light"] .careers-more { color: var(--vs-ink-2); text-decoration-color: rgba(66, 66, 69, .35); }
html[data-theme="light"] .careers-more:hover { color: var(--vs-ink); }
html[data-theme="light"] .careers-status.is-success { color: #248a3d; }
html[data-theme="light"] .careers-status.is-error { color: #d70015; }
@supports (corner-shape: superellipse(2)) { .careers-file { border-radius: 23px; } .careers-file-icon { border-radius: 18px; } }

/* ---------- 11. 2026-09-15 라이트 모드 메인 히어로 텍스트 화이트 (대표 지시: 로고·문구·NVIDIA 안내 흰색) ---------- */
html[data-theme="light"] .main-section .convert_to_white_logo { background-color: rgba(255, 255, 255, .94) !important; } /* 8절 유리 블러(마스크·backdrop)는 유지, 톤만 흰색 */
html[data-theme="light"] .first-section .col-12.text-center.mb-6 > h4.mop { color: #fff !important; text-shadow: none !important; }
html[data-theme="light"] .first-section .partner-badge .partner-note { color: #fff !important; }

/* ---------- 12. 2026-09-15 반응 박스 통일 + 상단 메뉴 글자 반응 (대표 지시) ---------- */
/* 반응 박스: 둥근 모서리, 호버 = 회색 톤(테두리·면), 선택 = 파란 #2176FF 2px(문의 입력칸 기준). 면 색: 라이트 #fbfbfd / 다크 #1c1c1e */
html { --vs-box-fill: #1c1c1e; --vs-box-fill-hover: #2c2c2e; --vs-box-line: rgba(255, 255, 255, .12); --vs-box-line-hover: #8e8e93; --vs-nav-text: #d1d1d6; --vs-nav-text-hover: #fff; }
html[data-theme="light"] { --vs-box-fill: #fbfbfd; --vs-box-fill-hover: #f2f2f7; --vs-box-line: rgba(0, 0, 0, .1); --vs-box-line-hover: #aeaeb2; --vs-nav-text: #48484a; --vs-nav-text-hover: #1d1d1f; }
/* A. 면 색 */
html[data-theme] body :is(.tab-button, .tab-button.active, .card-box, .card-box.active, .advantage-box, #news .news-card, .history-toggle, .vs-map-btn, .contact-section.form .form-control, .contact-section.form .form-control:focus) { background-color: var(--vs-box-fill) !important; }
html[data-theme] body .careers-file:not(:hover):not(:focus-within):not(.is-drag) { background-color: var(--vs-box-fill); }
/* B. 박스 기본 테두리 1px(옅은 색). 호버·클릭 2px은 17절(안쪽 1px 링을 더해 크기 변화 없음) */
html[data-theme] body :is(.history-toggle, .vs-map-btn) { border-width: 1px !important; border-style: solid !important; border-color: var(--vs-box-line) !important; }
/* C. 호버 = 회색 톤 */
html[data-theme] body :is(#news .news-card:hover, .history-toggle:hover, .vs-map-btn:hover, .tab-button:not(.active):hover, .contact-section.form .form-control:not(:focus):hover) { border-color: var(--vs-box-line-hover) !important; background-color: var(--vs-box-fill-hover) !important; }
html[data-theme] body .button-container a:hover { border-color: var(--vs-box-line-hover) !important; }
html[data-theme] body .careers-form .careers-file:hover:not(:focus-within):not(.is-drag):not(.has-file) { border-color: var(--vs-box-line-hover); background-color: var(--vs-box-fill-hover); }
/* D. 선택 = 파란 2px */
html[data-theme] body :is(.tab-button.active, .tab-button.active:hover, .card-box.active) { border-color: #2176FF !important; }
html[data-theme] body :is(#news .news-card:focus-visible, .history-toggle:focus-visible, .vs-map-btn:focus-visible) { border-color: #2176FF !important; }
html[data-theme] body .careers-form :is(.careers-file.has-file, .careers-file.is-drag) { border: 2px solid #2176FF; padding: 15px 17px; }
/* E. 체크박스: 둥근 모서리, 호버 회색, 체크 = 파란색 */
html[data-theme] body form input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; border: 2px solid var(--vs-box-line-hover); border-radius: 5px; background: var(--vs-box-fill) center / 12px 12px no-repeat; cursor: pointer; transition: border-color .15s, background-color .15s; }
html[data-theme] body form input[type="checkbox"]:hover:not(:checked) { border-color: var(--vs-nav-text); background-color: var(--vs-box-fill-hover); }
html[data-theme] body form input[type="checkbox"]:checked { border-color: #2176FF; background-color: #2176FF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.2 5 8.7l4.6-5.1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-theme] body form input[type="checkbox"]:focus-visible { outline: 2px solid #2176FF; outline-offset: 2px; }
@supports (corner-shape: superellipse(2)) { html[data-theme] body form input[type="checkbox"] { border-radius: 7px; } }
/* F. 상단 메뉴: 호버 막대 없음. 평소 라이트 화이트 / 다크 그레이 → 호버 볼드 흰색 / 검정 */
html[data-theme] body nav .nav-item.dropdown .nav-link::after { display: none !important; }
html[data-theme] body nav :is(#navigation .nav-link, .nav-lang .nav-link) .current-lang { color: var(--vs-nav-text) !important; }
html[data-theme] body nav :is(#navigation .nav-item:hover > .nav-link, #navigation .nav-item.show > .nav-link, .nav-lang:hover > .nav-link, .nav-lang.show > .nav-link) .current-lang { color: var(--vs-nav-text-hover) !important; font-weight: 700 !important; }
html[data-theme] body nav :is(.dropdown-item, .dropdown-item .lang-flag, #navigation .dropdown-item) { color: var(--vs-nav-text) !important; background-color: transparent !important; }
html[data-theme] body nav :is(.dropdown-item:hover, .dropdown-item:hover .lang-flag, .dropdown-item:focus-visible .lang-flag, #navigation .dropdown-item:hover) { color: var(--vs-nav-text-hover) !important; font-weight: 700 !important; }
/* 굵어져도 옆 메뉴가 밀리지 않게 굵은 글자 폭을 미리 확보 (data-text는 vs-theme.js가 넣음) */
html body nav :is(#navigation, .nav-lang) .current-lang[data-text] { display: inline-flex; flex-direction: column; align-items: center; }
html body nav :is(#navigation, .nav-lang) .current-lang[data-text]::after { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; pointer-events: none; user-select: none; }

/* ---------- 13. 2026-09-15 상단 아이콘 회색 반응 · 입력칸 안 글자 · 자기소개·지도 R (대표 지시) ---------- */
html { --vs-inner-text: #a7a7a7; --vs-icon-tile: rgba(255, 255, 255, .2); --vs-icon-tile-hover: rgba(255, 255, 255, .36); --vs-icon-glyph: #fff; --vs-icon-glyph-hover: #fff; }
html[data-theme="light"] { --vs-inner-text: #6e6e73; --vs-icon-tile: rgba(0, 0, 0, .06); --vs-icon-tile-hover: rgba(0, 0, 0, .16); --vs-icon-glyph: #48484a; --vs-icon-glyph-hover: #1d1d1f; }
/* A. 링크드인·유튜브·소개서 아이콘: 브랜드 색 없이 면만 회색으로 채워짐, 아이콘은 그대로 보임(소개서 목록이 열려 있는 동안도) */
html[data-theme] body nav :is(.linkedin-link, .youtube-link, .brochure-link) svg { background-color: var(--vs-icon-tile) !important; transition: background-color .2s ease; }
html[data-theme] body nav :is(.linkedin-link, .youtube-link, .brochure-link) svg path { fill: var(--vs-icon-glyph) !important; transition: fill .2s ease; }
html[data-theme] body nav :is(.linkedin-link:hover, .youtube-link:hover, .brochure-link:hover, .nav-item.show > .brochure-link, .nav-item.dropdown:hover > .brochure-link) svg { background-color: var(--vs-icon-tile-hover) !important; }
html[data-theme] body nav :is(.linkedin-link:hover, .youtube-link:hover, .brochure-link:hover, .nav-item.show > .brochure-link, .nav-item.dropdown:hover > .brochure-link) svg path { fill: var(--vs-icon-glyph-hover) !important; }
/* B. 입력칸 안 글자: 자리표시·안내 글자는 PDF·DOC 안내처럼 라이트 그레이 레귤러, 입력한 값도 레귤러 */
html[data-theme] body .contact-section.form .form-control { font-weight: 400 !important; }
html[data-theme] body .contact-section.form .form-control::placeholder { color: var(--vs-inner-text) !important; font-weight: 400 !important; opacity: 1; }
html[data-theme] body .contact-section.form select.form-control:has(option[value=""]:checked) { color: var(--vs-inner-text) !important; }
html[data-theme] body .careers-form .careers-file-text b { font-weight: 400; color: var(--vs-inner-text); }
html[data-theme] body .careers-form .careers-file-text span { color: var(--vs-inner-text); }
/* C. 긴 글 칸(채용 간단한 자기소개·문의 내용) R 크게 = 이력서 첨부 박스와 같은 R, 글자수 표시는 모서리 곡선에서 조금 안쪽으로 */
html[data-theme] body .contact-section.form textarea.form-control { border-radius: 15px !important; }
html[data-theme] body .careers-form .careers-count { right: 18px; bottom: 14px; }
@supports (corner-shape: superellipse(2)) { html[data-theme] body .contact-section.form textarea.form-control { border-radius: 23px !important; } }
/* D. 지도 박스: R 크게 + 1px 회색 테두리(NAVER Map 버튼 테두리 톤) */
html[data-theme] body .vs-location .vs-map { border: 1px solid var(--vs-box-line) !important; border-radius: 24px !important; }
@supports (corner-shape: superellipse(2)) { html[data-theme] body .vs-location .vs-map { border-radius: 37px !important; } }
/* E. NAVER Map·TMAP 버튼 R 크게 — 연속 곡률(superellipse) 유지, 긴 글 칸·첨부 박스와 같은 23px (대표 지시 "알값 더 줘 러닝커브로") */
html[data-theme] body .vs-location .vs-map-actions .vs-map-btn { border-radius: 15px !important; }
@supports (corner-shape: superellipse(2)) { html[data-theme] body .vs-location .vs-map-actions .vs-map-btn { border-radius: 23px !important; corner-shape: superellipse(1.7); } }

/* ---------- 14. 2026-09-15 라이트 히어로 하단 흰 그라데이션 제거 · NVIDIA 배지 R · 언론 호버 파란색 (대표 지시) ---------- */
/* A. 라이트 모드 메인 영상 덮개: 아래로 갈수록 하얘지던 그라데이션 제거(위쪽 옅은 베일만 유지). 영상이 히어로 전체를 덮어서 영상 끝선이 드러나지 않음 */
html[data-theme="light"] body .first-section .bg-black-cover { background: linear-gradient(180deg, rgba(245, 245, 247, .26) 0%, rgba(245, 245, 247, .10) 32%, rgba(245, 245, 247, .10) 100%) !important; }
/* B. NVIDIA Preferred Partner 배지 R = 히어로 버튼 R(24px 연속 곡률) */
html[data-theme] body .partner-badge img { border-radius: 16px !important; }
@supports (corner-shape: superellipse(2)) { html[data-theme] body .partner-badge img { border-radius: 24px !important; } }
/* C. 언론(뉴스) 카드 호버 = 파란 테두리 (반응 박스 회색 호버의 예외) */
html[data-theme] body #news .news-card:hover { border-color: #2176FF !important; }

/* ---------- 15. 2026-09-15 비교 슬라이더 글자 흰색 (대표 지시: 라이트 모드에서 안 보임) ---------- */
/* REAL·TARS 라벨과 "드래그하여 비교해보기"는 영상 위 어두운 반투명 알약 위에 있어서 테마와 무관하게 흰 글자 */
html[data-theme] body .comparison-wrapper :is(.slider-text, .slider-text *, .label-before, .label-after) { color: #fff !important; }

/* ---------- 16. 2026-09-15 뉴스 좌우 버튼: 카드 바로 위 오른쪽 · 둥근 한 덩어리 + 가운데 파티션 (대표 지시) ---------- */
/* 키보드 ← → 이동은 vs-theme.js. 모바일(≤768px)은 news.css가 버튼을 숨김(스와이프) */
html[data-theme] body #news .news-controls { top: auto; bottom: -12px; gap: 0; overflow: hidden; border: 1px solid var(--vs-box-line); border-radius: 12px; background-color: var(--vs-box-fill); }
@supports (corner-shape: superellipse(2)) { html[data-theme] body #news .news-controls { border-radius: 18px; corner-shape: superellipse(1.7); } }
html[data-theme] body #news .news-controls::after { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1px; margin-left: -.5px; background: var(--vs-box-line); pointer-events: none; }
html[data-theme] body #news .news-controls .news-btn { width: 44px; height: 36px; padding: 0; border: 0 !important; border-radius: 0; background-color: transparent !important; opacity: 1; transition: background-color .2s ease; }
html[data-theme] body #news .news-controls .news-btn:not(:disabled):hover { background-color: var(--vs-box-fill-hover) !important; }
html[data-theme] body #news .news-controls .news-btn:disabled { cursor: default; }
html[data-theme] body #news .news-controls .news-btn:disabled svg { opacity: .3; }
html[data-theme] body #news .news-controls .news-btn:focus-visible { box-shadow: inset 0 0 0 2px #2176FF; }
html[data-theme] body #news .news-controls .news-btn svg path { fill: var(--vs-nav-text-hover); }

/* ---------- 17. 2026-09-15 테두리 두께 통일 + 테서렉트·타스 영상 테두리 (대표 지시) ---------- */
/* 모든 박스: 평소 1px · 마우스 호버 2px 회색 · 클릭(누르는 동안)·선택 2px 파란색.
   2px은 바깥 1px 테두리 + 안쪽 1px 링(inset 그림자)으로 만들어 박스 크기·글자 위치가 변하지 않음.
   썸네일·영상이 가장자리를 덮는 박스(뉴스 카드·카드·영상 틀)는 위에 얹는 ::after 링, 틀 없는 영상(솔루션 슬라이드·비교 슬라이더)은 안쪽 outline */
/* A. 평소 1px */
html[data-theme] body :is(.tab-button, .advantage-box) { border-width: 1px !important; border-style: solid !important; }
html[data-theme] body :is(.tab-button:not(.active), .advantage-box) { border-color: var(--vs-box-line) !important; }
html[data-theme] body :is(#news .news-card, .card-box) { border: 0 !important; }
html[data-theme] body form input[type="checkbox"] { border-width: 1px; }
/* B. 호버 2px 회색 */
html[data-theme] body :is(.history-toggle, .vs-map-btn, .tab-button:not(.active), .advantage-box, .button-container a, .demo-btn):hover { border-color: var(--vs-box-line-hover) !important; box-shadow: inset 0 0 0 1px var(--vs-box-line-hover) !important; }
html[data-theme] body .contact-section.form .form-control:not(:focus):hover { box-shadow: inset 0 0 0 1px var(--vs-box-line-hover) !important; }
html[data-theme] body .careers-form .careers-file:hover:not(:focus-within):not(.is-drag):not(.has-file) { border-style: solid; box-shadow: inset 0 0 0 1px var(--vs-box-line-hover); }
html[data-theme] body form input[type="checkbox"]:hover:not(:checked) { border-width: 2px; }
/* C. 클릭·선택 2px 파란색 (:not(#vs-x)는 호버 규칙보다 우선하게 하는 특이도 보강) */
html[data-theme] body :is(.history-toggle, .vs-map-btn, .tab-button, .advantage-box, .button-container a, .demo-btn):is(:active, :focus-visible, .active):not(#vs-x) { border-color: #2176FF !important; box-shadow: inset 0 0 0 1px #2176FF !important; }
html[data-theme] body form input[type="checkbox"]:checked { border-width: 2px; }
/* D. 가장자리를 덮는 박스·영상 틀: 위에 얹는 링 (메인 테서렉트 콜라주·타스 영상, 솔루션 영상 격자, 뉴스 카드, 카드) */
html[data-theme] body :is(#news .news-card, .card-box, .video-item, .collage-item, .tars-video-card) { position: relative; }
html[data-theme] body :is(.card-box, .video-item, .collage-item, .tars-video-card)::after, html[data-theme] body #news .news-card::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 1px solid var(--vs-box-line); border-radius: inherit; pointer-events: none; transition: border-color .2s ease; }
html[data-theme] body .card-box:hover::after { border-width: 2px; border-color: var(--vs-box-line-hover); }
html[data-theme] body :is(.video-item, .collage-item, .tars-video-card):is(:hover, :focus-visible)::after { border-width: 2px; border-color: #2176FF; } /* 영상 호버 = 파란색(대표 지시), 클릭 시 유튜브 영상으로 이동(vs-theme.js) */
html[data-theme] body [data-vs-yt] { cursor: pointer; outline: none; }
html[data-theme] body #news .news-card:hover::after { border-width: 2px; border-color: #2176FF; } /* 언론 카드 호버만 파란색(14절 예외 유지) */
html[data-theme] body :is(#news .news-card:active, #news a:focus-visible > .news-card, .card-box.active, .video-item:active, .collage-item:active, .tars-video-card:active)::after { border-width: 2px; border-color: #2176FF; }
/* E. 솔루션 테서렉트·타스 슬라이드 영상·비교 슬라이더: 영상 안쪽 outline (비교 슬라이더 영상은 포인터를 안 받아서 틀 호버로 반응) */
html[data-theme] body :is(#tesseract, #tars) .swiper-slide video { outline: 1px solid var(--vs-box-line); outline-offset: -1px; transition: outline-color .2s ease; }
html[data-theme] body :is(#tesseract, #tars) :is(.swiper-slide:not(.comparison) video:hover, .swiper-slide:not(.comparison) video:focus-visible, .comparison-wrapper:hover video) { outline-width: 2px; outline-offset: -2px; outline-color: #2176FF; }
html[data-theme] body :is(#tesseract, #tars) :is(.swiper-slide:not(.comparison) video:active, .comparison-wrapper:active video) { outline-width: 2px; outline-offset: -2px; outline-color: #2176FF; }
/* F. 솔루션 TESSERACT·TARS 요약 카드 글자 가운데 정렬 (인라인 text-align:left·.text-left를 덮어씀) */
html[data-theme] body .card-box :is(div, h3, p, ul, li) { text-align: center !important; }
/* G. 채용 "간단한 자기소개" 라벨 = "[필수] 개인정보 수집·이용에 동의합니다." 글씨체 (14px 레귤러 · 다크 #d6d6d6 / 라이트 --vs-ink) */
html[data-theme] body #careers-form .careers-label { font-size: 14px; font-weight: 400; color: #d6d6d6; }
html[data-theme="light"] body #careers-form .careers-label { color: var(--vs-ink); }
/* H. 선택칸(지원 포지션·문의 유형) 화살표 회색 = 칸 안 글자 톤 (다크 #a7a7a7 / 라이트 #6e6e73) */
html[data-theme] body select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7a7a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; }
html[data-theme="light"] body select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; }

/* ---------- 18. 2026-09-15 회사 미션 도식: 이미지 → SVG·HTML 재구성 + 설계 애니메이션 (대표 지시) ----------
   디자인은 원본 이미지(1420×752) 좌표 그대로. 화면에 들어오면 도식 전체가 위→아래로 한 번에 드러나고(09-17 7차, 아래 '등장 애니메이션'),
   동시에 점이 화살표를 따라 흐르고 박스 둘레를 돎(vs-theme.js). JS가 없거나 동작 줄이기 설정이면 완성 상태로 정지 */
#mission .vs-mission { position: relative; width: min(70%, 1420px, calc(75vh * 1420 / 752)); margin: 0 auto; aspect-ratio: 1420 / 752; container-type: inline-size; text-align: center; color: #fff; } /* 크기 = 기존 이미지 규칙(칸 70%·원본 1420px·높이 75vh) */
@media (max-width: 992px) { #mission .vs-mission { width: min(100%, 1420px); } }
#mission .vs-mission .vs-m-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
#mission .vs-m-svg path { fill: none; stroke: #8a8a8a; stroke-width: 2; }
#mission .vs-m-svg .vs-m-head { stroke-linecap: round; stroke-linejoin: round; }
#mission .vs-m-dots { display: none; }   /* 09-21 4차 대표 지시: 점 일단 숨김 (엔진도 vs-theme.js 에서 꺼 둠 — 되살릴 때 HIDE_DOTS 만 false) */
#mission .vs-m-dots circle { fill: #fff; }
#mission .vs-mission.is-live .vs-m-dots { opacity: 1; }
#mission .vs-mission img { position: absolute; display: block; height: auto; max-width: none; margin: 0; border-radius: 0 !important; corner-shape: round; pointer-events: none; user-select: none; -webkit-user-drag: none; }
#mission .vs-mission img:not(.vs-m-icon) { filter: none !important; }   /* 픽토그램은 39절 빛 번짐 애니메이션을 받아야 해서 제외 */
#mission .vs-mission .vs-m-text { position: absolute; }
#mission .vs-mission .vs-m-text p { margin: 0 !important; white-space: nowrap; color: #fff; letter-spacing: 0; }
#mission .vs-mission .vs-m-sub { font-size: 1.69cqw; line-height: 3.24cqw; font-weight: 400; }
#mission .vs-mission .vs-m-main { font-size: 2.11cqw; line-height: 3.38cqw; font-weight: 500; }
/* 등장 애니메이션 (09-17 7차, 대표 지시): 단계별로 그리던 방식(로고→선·화살표→박스→아이콘·글자, 3.1초 + 점 2.9초 후) 폐기.
   도식 전체(선·화살표·둥근 박스·아이콘·글자·점)를 완성 상태로 두고, 위→아래로 한 번에 훑어 내려가며 드러냄 + 12px 함께 내려옴. 전환 2.1초 → 다 보이는 시점 약 2.5초 → 1.7초(30% 빠르게, 픽셀 비교 측정).
   점은 JS가 .is-play 와 동시에 움직이기 시작 → 로고·화살표가 드러나는 순간 점도 같이 보임. HTML 의 --t/--d 값은 더 이상 쓰지 않음.
   마스크 = 위쪽 불투명·아래쪽 투명(경계 약 18% 부드럽게)인 세로 220% 그라데이션을 아래(100%) → 위(0)로 이동. 끝나면 JS가 .is-built 로 마스크 제거(로고 위 점 잘림 방지) */
#mission .vs-mission.is-armed { -webkit-mask-image: linear-gradient(#000 0 46%, transparent 54%); mask-image: linear-gradient(#000 0 46%, transparent 54%);
  -webkit-mask-size: 100% 220%; mask-size: 100% 220%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%; mask-position: 0 100%; transform: translateY(-12px); }
#mission .vs-mission.is-armed.is-play { -webkit-mask-position: 0 0; mask-position: 0 0; transform: none;
  transition: -webkit-mask-position 2.1s cubic-bezier(.3, .1, .6, 1), mask-position 2.1s cubic-bezier(.3, .1, .6, 1), transform 2.1s cubic-bezier(.3, .1, .6, 1); }
#mission .vs-mission.is-armed.is-built { -webkit-mask-image: none; mask-image: none; }
/* 라이트 모드: 기존 이미지와 같은 반전 톤 */
html[data-theme="light"] #mission .vs-mission { filter: invert(1) contrast(.788) brightness(1.075); }
/* 로고: 원본 로고 모양(마스크) 안에 라이트 그레이 그라데이션이 아주 천천히 은은하게 지나감 (대표 지시 09-15). 밝은 띠가 14초 중 10초 동안 왼쪽→오른쪽, 나머지는 쉼 */
#mission .vs-mission .vs-m-logo { position: absolute; display: block; aspect-ratio: 1400 / 135; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background-image: linear-gradient(100deg, #c7c7cc 0%, #c7c7cc 34%, #e4e4e8 50%, #c7c7cc 66%, #c7c7cc 100%); background-size: 300% 100%; background-position: 0% 0; }   /* 09-21 7차: 지나가는 빛을 은은하게(흰색 → #e4e4e8, 띠 폭 넓게) */
/* 로고 빛 지나감: 예전 14초 단독 → 39절 '로고 → 화살표 → 박스·픽토그램' 6.5초 한 묶음의 첫 구간 */
/* 점이 따라가는 보이지 않는 경로(로고·박스 둘레, 화살표) — 선으로 그리지 않음 */
#mission .vs-m-svg path.vs-m-track { stroke: none; fill: none; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #mission .vs-m-dots { display: none; } #mission .vs-mission .vs-m-logo { animation: none; } }

/* ---------- 19. 2026-09-15 뉴스 가로 스크롤바 위로·3px · 좌우 버튼 36×28·화살표 라이트 그레이 · 뉴스 카드 곡률 · 위로 가기 1px (대표 지시) ---------- */
/* A. 가로 스크롤바를 기사 이미지 위로: 트랙을 위아래로 뒤집어 스크롤바를 위로 보내고, 카드는 다시 뒤집어 원래 모습. 스크롤바↔이미지 12px */
#news .news-track { transform: rotateX(180deg); padding-bottom: 12px !important; align-items: stretch; }
#news .news-track > a { display: block; transform: rotateX(180deg); }
@supports selector(::-webkit-scrollbar) {
  #news .news-track { scrollbar-width: auto; scrollbar-color: auto; }   /* 크롬 121+는 이 둘이 있으면 아래 3px 규칙을 무시 */
  #news .news-track::-webkit-scrollbar { height: 3px; }
  #news .news-track::-webkit-scrollbar-track { background: transparent; }
  #news .news-track::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .28); border-radius: 3px; }
  #news .news-track::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .5); }
  html[data-theme="light"] #news .news-track::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .2); }
  html[data-theme="light"] #news .news-track::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .38); }
}
/* B. 좌우 버튼 한 칸 36×28, 화살표 라이트 그레이(다크 #c7c7cc / 라이트 #8e8e93) → 호버 때 밝게 */
html { --vs-news-arrow: #c7c7cc; }
html[data-theme="light"] { --vs-news-arrow: #8e8e93; }
html[data-theme] body #news .news-controls { border-radius: 10px; }
@supports (corner-shape: superellipse(2)) { html[data-theme] body #news .news-controls { border-radius: 15px; } }
html[data-theme] body #news .news-controls::after { top: 7px; bottom: 7px; }
html[data-theme] body #news .news-controls .news-btn { width: 36px; height: 28px; }
html[data-theme] body #news .news-controls .news-btn svg { width: 10px; height: 13px; }
html[data-theme] body #news .news-controls .news-btn svg path { fill: var(--vs-news-arrow); transition: fill .2s ease; }
html[data-theme] body #news .news-controls .news-btn:not(:disabled):hover svg path { fill: var(--vs-nav-text-hover); }
/* C. 뉴스 카드: R 24px 유지, 곡률만 더 둥글게(연속 곡률 1.7 → 1.2) */
@supports (corner-shape: superellipse(2)) { #news .news-card, #news .news-card::after { corner-shape: superellipse(1.2) !important; } }
/* D. 위로 가기 버튼 테두리 2px → 1px (바깥 크기 유지) */
html body .back-to-top i { border-width: 1px !important; padding: 9px 11px !important; }

/* ---------- 20. 2026-09-15 비교 슬라이더: 양 끝에서도 손잡이를 다시 잡을 수 있게 (대표 지시) ----------
   손잡이 잡기 영역을 좌우 20px씩 넓힘(보이는 모양은 그대로) + 모바일에서 가로 끌기가 페이지 스크롤로 뺏기지 않게. 끌기 시작 판정은 js/comparison-slider.js */
.comparison-wrapper { touch-action: pan-y; }
.comparison-wrapper .slider-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -20px; right: -20px; }

/* ---------- 21. 2026-09-15 모바일: 비교 슬라이더 끝 아이콘 안 잘리게 · 연혁 글자 왼쪽 정렬 (대표 지시) ---------- */
/* 모바일은 틀 폭 = 영상 폭이라 끝에 간 손잡이 아이콘 절반이 틀의 overflow:hidden에 잘렸음. 틀 안 요소는 모두 영상 범위 안이라 풀어도 다른 변화 없음(데스크톱은 틀이 영상보다 넓음) */
.comparison-wrapper { overflow: visible !important; }
/* 연혁 한 줄(날짜 + 내용, flex)이 부모의 가운데 정렬을 물려받아 두 줄짜리 내용이 가운데로 보였음 → 모바일은 왼쪽 정렬 */
@media (max-width: 768px) { #history .company-history > p { text-align: left !important; } #history .company-history > p > span { flex: 0 0 auto; min-width: 52px; font-size: 12px !important; line-height: 25.2px !important; } } /* 날짜 14→12px(대표 지시 "조금 줄여"), 칸 폭 고정(12px 기준 가장 넓은 날짜 ≈50px) → 모든 줄 내용 시작 위치 일치, 줄 높이는 내용 첫 줄과 같게 */
/* 모바일 뉴스 썸네일: news.css가 칸 200px 안에 사진을 180px로 줄여 위아래 10px 빈 띠가 생겨 사진이 잘린 듯 보였음(대표 지적) → 사진이 칸을 꽉 채움 */
@media (max-width: 768px) { #news .news-card .news-thumb img { height: 100% !important; } }
/* 모바일 뉴스 카드 제목 15→13px (대표 지시 "조금 줄여"), 줄 간격 비율 유지(1.4). 날짜 12px은 그대로 */
@media (max-width: 768px) { #news .news-card h6 { font-size: 13px !important; line-height: 1.4 !important; } }

/* ---------- 22. 2026-09-16 메인 TESSERACT·TARS 소개 문구 두 줄 (대표 지시) ----------
   PC는 문구 속 <br/>로 두 줄 고정. 모바일은 폭이 좁아 강제 줄바꿈이 "시각화하고,"만 홀로 남기므로 줄바꿈을 끄고 자연스럽게 흐르게 함 */
@media (max-width: 768px) { .solution-copy p.color-gray br { display: none; } }

/* ---------- 23. 2026-09-16 라이트 모드 상단 바 잉크 #17171B (대표 지시 "너무 그레이톤") ----------
   상단 바 안에서만 잉크 변수를 덮어씀(메뉴·드롭다운·지구본·소셜 아이콘·스위치 노브·햄버거). 로고는 이미지라 invert 값으로 같은 밝기 맞춤:
   검정 원본 vslogo는 invert(f)=255f → 23/255≈.09, 흰 원본 500 로고는 255(1−f) → 1−23/255≈.91 */
html[data-theme="light"] nav.site-navbar { --vs-ink-soft: #17171B; --vs-ink: #17171B; --vs-nav-text: #17171B; --vs-nav-text-hover: #17171B; }
html[data-theme="light"] nav.site-navbar .navbar-brand .vslogo { filter: invert(.09) !important; }
html[data-theme="light"] nav.site-navbar .navbar-brand img[alt="500 Global"] { filter: invert(.91) !important; }
/* 소셜·소개서 아이콘은 상단 바 밖(.nav-right)에 있어 변수 범위에 안 들어옴 → 직접 지정 */
html[data-theme="light"] :is(.youtube-link, .linkedin-link, .brochure-link) svg path { fill: #17171B !important; }

/* ---------- 24. 2026-09-16 뉴스 카드 제목 두 줄 고정 (대표 지시 "아래 길이가 들쑥날쑥") ----------
   제목이 1~4줄이라 카드 높이가 제각각이었음 → 두 줄까지만 보이고 넘치면 …, 한 줄짜리도 두 줄 높이를 차지해 카드 높이가 같아짐.
   ⚠️ 두 줄 자르기를 h6에 직접 걸면 잘린 셋째 줄이 아래 패딩(16px) 안에 그대로 비친다(overflow는 패딩 상자 기준으로 자름)
   → vs-theme.js가 제목 글자를 span.vs-clamp2로 감싸고, 자르기는 그 span에 건다. h6은 두 줄 높이만 확보 */
html[data-theme] body #news .news-card h6 { line-height: 1.4 !important; min-height: calc(2.8em + 24px); box-sizing: border-box; }
html[data-theme] body #news .news-card h6 .vs-clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ---------- 25. 2026-09-16 상단 바 테두리 (대표 지시 "1px 얇게, 더 어둡게, 티 안나게") ----------
   유리 바 테두리는 nav::before에 있다(다크 흰색 10% → 밝은 헤어라인이 또렷했음). 다크는 검정 55%로 바꿔 배경에 묻히게, 라이트는 8%로 아주 옅게.
   드롭다운(.dropdown-menu::before)은 --vs-glass-line 그대로 둔다 */
html[data-theme] body nav.site-navbar::before { border-width: 1px !important; border-color: rgba(0, 0, 0, .55) !important; }
html[data-theme="light"] body nav.site-navbar::before { border-color: rgba(0, 0, 0, .08) !important; }

/* ---------- 26. 2026-09-17 페이지 스크롤바 자리 제거 + 상단 유리 박스 블러 강화 (대표 지시) ----------
   ① 메인 오른쪽 "흰색 바" = 페이지 스크롤바 자리 5px(트랙 투명 → 라이트는 흰 줄, 다크는 어두운 틈). 6절의 가는 스크롤바 대신 스크롤바를 숨겨 자리 자체를 없앰(휠·트랙패드 스크롤은 그대로)
   ② 상단 바·드롭다운(18px)·히어로 버튼(6px)·아이콘 호버 칸·테마 스위치(0)의 블러를 한 값으로 올림 */
html, body { scrollbar-width: none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
html[data-theme] body { --vs-glass-blur: blur(28px) saturate(1.7); }
html[data-theme] body nav.site-navbar::before,
html[data-theme] body .dropdown-menu,
html[data-theme] body .button-container a,
html[data-theme] body .demo-btn,
html[data-theme] body .theme-toggle,
html[data-theme] body :is(.linkedin-link, .youtube-link, .brochure-link) svg { -webkit-backdrop-filter: var(--vs-glass-blur) !important; backdrop-filter: var(--vs-glass-blur) !important; }

/* ---------- 27. 2026-09-17 상단 바 폭: 맨 위는 넓게, 내려가면 1600px (대표 지시) ----------
   맨 위: 좌우 16px 간격(100% − 32px), 최대 2530px. 1·2페이지 경계선(첫 섹션 아래끝)이 상단 바에 닿으면 vs-theme.js가 html.vs-nav-compact를 붙여 최대 1600px로 줄어듦(09-17 2차).
   폭은 calc로 두고 max-width만 바꿔 트랜지션(min()끼리 보간 대신 px 값끼리 보간 → 끊김 없음) */
html body nav.site-navbar.site-navbar-transparent.navbar.navbar-expand-md.fixed-top.bg-black-navbar {
  width: calc(100% - 32px) !important; max-width: var(--vs-nav-wide, 2530px) !important;
  /* 09-17 3차: 넓은 상태 max-width를 '지금 화면의 실제 폭'(JS가 --vs-nav-wide에 px로 넣음)으로 → 1920 화면에서 2530→1888 구간(전체의 60%, 약 0.75초)을 헛돌지 않고 경계 통과 즉시 줄기 시작 */
  transition: max-width .84s cubic-bezier(.65, 0, .35, 1) !important;   /* 09-17 2차: .6s → 1.2s ease-in-out / 6차: 30% 빠르게 1.2s → .84s */
}
html.vs-nav-compact body nav.site-navbar.site-navbar-transparent.navbar.navbar-expand-md.fixed-top.bg-black-navbar { max-width: 1600px !important; }
@media (prefers-reduced-motion: reduce) { html body nav.site-navbar.site-navbar-transparent.navbar.navbar-expand-md.fixed-top.bg-black-navbar { transition: none !important; } }

/* ---------- 28. 2026-09-17 모바일(≤992px) TESSERACT·TARS 순서: 제목·부제 → 영상 → 설명 → View (대표 지시) ----------
   .solution-copy 를 display:contents 로 풀어 h2·h4·p·버튼을 그리드 칸으로 올린 뒤 order 로 재배치(HTML 20페이지 무수정).
   데스크톱 2열 배치는 그대로. 간격: 부제→영상 24px · 영상→설명 32px(기존 영상→제목 간격) · 설명→버튼은 기존 mb-8 유지 */
@media (max-width: 992px) {
  html body :is(.tesseract-info, .tars-info) { row-gap: 0; }
  html body :is(.tesseract-info, .tars-info) > .solution-copy { display: contents; }
  html body :is(.tesseract-info, .tars-info) > .solution-copy > .solution-title { order: 1; }
  html body :is(.tesseract-info, .tars-info) > .solution-copy > .solution-eyebrow { order: 2; margin-bottom: 24px; }
  html body :is(.tesseract-info, .tars-info) > .collage { order: 3; margin-bottom: 32px; }
  html body :is(.tesseract-info, .tars-info) > .solution-copy > p { order: 4; }
  html body :is(.tesseract-info, .tars-info) > .solution-copy > .btn-view-detail { order: 5; justify-self: center; }
}

/* ---------- 29. 2026-09-17 푸터 저작권·약관 줄: 맨 아래 가운데 → 회사 정보 바로 아래 왼쪽 정렬, 간격 60px (대표 지시) ----------
   footer.css 의 padding-top 10vh·가운데 정렬을 끄고, 회사 정보 블록 아래끝 ~ 저작권 줄 윗끝 = 60px (.mt-5 대신 margin-top 고정) */
html body footer div.copyright-terms { padding-top: 0 !important; margin-top: 60px !important; text-align: left !important; }

/* ---------- 30. 2026-09-18 모바일(≤768px) 푸터 가운데 정렬: 로고·회사 정보·저작권·약관 (대표 지시) ----------
   footer.css 의 왼쪽 고정 규칙(줄 최소폭 500px·flex, 오른쪽 칸 80%, 라벨 최소폭 40/112px)을 풀어 한 줄 글처럼 가운데로. 긴 주소는 줄바꿈돼도 가운데 */
@media (max-width: 768px) {
  html body footer div.contact-copyright-section { text-align: center; }
  html body footer div.contact-copyright-section > img { margin-left: auto; margin-right: auto; }
  html body footer div.contact-copyright-text-wrapper { min-width: 0; }
  html body footer div.contact-copyright-text-wrapper :is(.left-text-section, .right-text-section) { width: 100%; min-width: 0; text-align: center; }
  html body footer div.contact-copyright-text-wrapper :is(.left-text-section, .right-text-section) h6 { display: block; min-width: 0; width: 100%; text-align: center; }
  html body footer div.contact-copyright-text-wrapper :is(.left-text-section, .right-text-section) h6 span { display: inline; min-width: 0; }
  html body footer div.copyright-terms { text-align: center !important; }
}

/* ---------- 31. 2026-09-18 iOS 사파리 자동 링크 밑줄 제거 (대표 지시) ----------
   20페이지 <head> 의 format-detection meta 로 전화·이메일·주소 자동 링크를 끔. 그래도 사파리가 링크로 바꾸는 경우를 대비해 모양만 원래 글자처럼 */
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; border-bottom: 0 !important; font: inherit !important; }

/* ---------- 32. 2026-09-18 메인 로고 등장 = IR 자료 워드마크 애니메이션 (대표 지시, 로고 크기 유지) ----------
   IR Web(#hero .wmark)과 같은 타임라인 0.7초: VISION·SPACE 조각이 화면 양옆 밖에서 등속으로 날아와 가운데서 합류(75% 도착 후 흐려짐),
   동시에 전체 로고가 4배 → 1배로 줄며 나타남(50~70%), 100%에 완전히 보임. 조각은 JS(vs-theme.js)가 같은 로고 이미지를 복제해 잘라 씀
   (홈 로고 26232px 원본에서 VISION 0~46.9%·SPACE 51.3~100%, 사이 빈칸 가운데 49.09%에서 자름) → 라이트 모드 유리 효과도 그대로 따라감 */
.first-section .mov_logs.vs-wm { position: relative; }
.first-section .mov_logs.vs-wm > img { transition: none !important; will-change: transform, opacity; }
.first-section .mov_logs.vs-wm > img.vs-wm-l, .first-section .mov_logs.vs-wm > img.vs-wm-r { position: absolute; left: 0; top: 0; pointer-events: none; }
.first-section .mov_logs.vs-wm > img.vs-wm-l { clip-path: inset(0 50.91% 0 0); }
.first-section .mov_logs.vs-wm > img.vs-wm-r { clip-path: inset(0 0 0 49.09%); }
.first-section .mov_logs.vs-wm:not(.vs-wm-play) > img { opacity: 0; transform: none; }
.first-section .mov_logs.vs-wm.vs-wm-play > img:not(.vs-wm-l):not(.vs-wm-r) { animation: vsWmZoom .7s linear both; }
.first-section .mov_logs.vs-wm.vs-wm-play > img.vs-wm-l { animation: vsWmL .7s linear both; }
.first-section .mov_logs.vs-wm.vs-wm-play > img.vs-wm-r { animation: vsWmR .7s linear both; }
@keyframes vsWmZoom { 0%, 50% { opacity: 0; transform: scale(4); } 70% { opacity: .4; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes vsWmL { 0% { opacity: 1; transform: translate3d(-50.990vw, 0, 0); } 50% { opacity: 1; transform: translate3d(-16.997vw, 0, 0); } 75% { opacity: .5; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } }
@keyframes vsWmR { 0% { opacity: 1; transform: translate3d(51.341vw, 0, 0); } 50% { opacity: 1; transform: translate3d(17.114vw, 0, 0); } 75% { opacity: .5; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } }

/* ---------- 33. 2026-09-18 데모 실행 버튼: 테두리 점 2개 + 누르면 양갈래로 [Web] [UE] (대표 지시) ----------
   점 = 회사 미션 로고 둘레 점과 같은 규칙(JS vs-theme.js). 테두리 선 한가운데·곡률 모서리 그대로 계산, 서로 반대편, 7.8초에 한 바퀴.
   누르면 데모 실행(310px)이 가운데서 갈라져 두 버튼(150+10+150px)으로: 처음엔 안쪽 모서리가 평평하게 맞붙은 한 알약(.vs-join) → 0.45초에 벌어지며 둥글어짐.
   이때 점 2개가 하나씩(왼쪽 점 → Web, 오른쪽 점 → UE) 넘어가 각 버튼 둘레를 계속 돎. 바깥 클릭·Esc 면 반대로 합쳐져 데모 실행으로 돌아감.
   Web = TESSERACT 로그인 화면(새 탭). UE = 통합형 제작 중 → '준비 중', 누를 수 없음 */
.first-section .button-container { --vs-pill: 150px; }
@media (max-width: 360px) { .first-section .button-container { --vs-pill: 140px; } }
.first-section .button-container .demo-btn.vs-orbit, .first-section .button-container .vs-demo-opt { position: relative; }
.first-section .button-container .vs-demo-opt { display: inline-flex; align-items: center; justify-content: center; gap: .4em; width: var(--vs-pill);
  transition: width .45s cubic-bezier(.4, 0, .2, 1), margin .45s cubic-bezier(.4, 0, .2, 1), border-radius .45s cubic-bezier(.4, 0, .2, 1), border-color .45s ease; }
.first-section .button-container .vs-demo-opt .vs-demo-label { transition: opacity .3s ease .12s; }
.first-section .button-container .vs-demo-opt.vs-join .vs-demo-label { opacity: 0; transition-delay: 0s; }
.first-section .button-container .vs-demo-web.vs-join { width: calc(var(--vs-pill) + 5px); margin-right: -10px; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right-color: transparent !important; }
.first-section .button-container .vs-demo-ue.vs-join { width: calc(var(--vs-pill) + 5px); border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left-color: transparent !important; }
.first-section .button-container .vs-demo-ue { pointer-events: none; }   /* 누를 수 없음 + 마우스 올려도 파란 테두리 없음 */
.first-section .button-container .vs-demo-ue .vs-demo-label { color: rgba(255, 255, 255, .5); }
.first-section .vs-demo-soon { font-size: .82em; white-space: nowrap; }
.first-section .vs-orbit-svg { position: absolute; left: -1px; top: -1px; overflow: visible; pointer-events: none; z-index: 2; }
.first-section .vs-orbit-svg circle { fill: #fff; }
.first-section .vs-orbit-svg g { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .85)); }
html[data-theme="light"] .first-section .vs-orbit-svg circle { fill: #fff; }   /* 09-21 대표 지시: 라이트 모드에서도 흰 점 — 밝은 유리 위에서도 보이도록 그림자만 어둡게 */
html[data-theme="light"] .first-section .vs-orbit-svg g { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .85)); }   /* 12차: 점 테두리(어두운 그림자) 없앰 — 다크와 같게 */
html[data-theme="light"] .first-section .button-container a { border-color: #fff !important; }   /* 12차: 버튼 5개 테두리도 다크처럼 흰색 (이어 붙은 데모 버튼의 투명 면은 .vs-join 규칙이 우선) */
html[data-theme="light"] .first-section .button-container .vs-demo-ue .vs-demo-label { color: rgba(0, 0, 0, .38); }
@media (prefers-reduced-motion: reduce) { .first-section .vs-orbit-svg { display: none; } .first-section .button-container .vs-demo-opt, .first-section .button-container .vs-demo-opt .vs-demo-label { transition: none; } }

/* ---------- 35. 2026-09-18 상단 바 '500' 로고 높이 16px (대표 지시; 기존 HTML 인라인 24px·모바일 18px → 모든 화면 16px) ---------- */
html body nav.site-navbar .navbar-brand img[alt="500 Global"] { height: 16px !important; width: auto !important; }

/* ---------- 36. 2026-09-18 히어로 버튼 등장: 블러 유리가 테두리·글자와 동시에 채워지게 (대표 지시) ----------
   원인: 버튼 묶음(.button-container)이 투명도 0→1 로 나타나는데, 브라우저는 투명도 < 1 인 부모 안의 backdrop-filter 를 꺼 둠
        → 테두리·글자가 다 떠오른 뒤 투명도가 1 이 되는 순간 블러가 툭 채워졌음.
   해결: 묶음은 투명도 없이 20px 올라오기만 하고, 각 버튼의 블러 세기·테두리·글자·배경·아이콘·점을 같은 지연(0.4/0.6/0.8초)·같은 1초로 0에서 함께 올림.
   전환이 끝나면 JS(vs-theme.js)가 body.vs-hero-in 을 붙여 평소 규칙(마우스 올림 반응 등)으로 돌아감 */
body .first-section .col-12.text-center.mb-6 > .button-container { opacity: 1 !important; }
.first-section .col-12.text-center.mb-6 > .button-container:nth-of-type(1) { --vs-in: .4s; }
.first-section .col-12.text-center.mb-6 > .button-container:nth-of-type(2) { --vs-in: .6s; }
.first-section .col-12.text-center.mb-6 > .button-container:nth-of-type(3) { --vs-in: .8s; }
html[data-theme] body:not(.loaded) .first-section .button-container a {
  -webkit-backdrop-filter: blur(0px) saturate(1) !important; backdrop-filter: blur(0px) saturate(1) !important;
  border-color: transparent !important; color: transparent !important; background-color: transparent !important; }
body:not(.loaded) .first-section .button-container a :is(img, .vs-orbit-svg) { opacity: 0; }
html[data-theme] body.loaded:not(.vs-hero-in) .first-section .button-container a {
  transition: -webkit-backdrop-filter 1s ease-out var(--vs-in, .4s), backdrop-filter 1s ease-out var(--vs-in, .4s), border-color 1s ease-out var(--vs-in, .4s),
              color 1s ease-out var(--vs-in, .4s), background-color 1s ease-out var(--vs-in, .4s) !important; }
body.loaded:not(.vs-hero-in) .first-section .button-container a :is(img, .vs-orbit-svg) { transition: opacity 1s ease-out var(--vs-in, .4s); }

/* ---------- 37. 2026-09-21 글자 크기 조절 (대표 지시: 다크모드 스위치 왼쪽 / 2차: 세로 → 가로, 높이 28px로 스위치와 똑같이) ----------
   다크·라이트 스위치와 같은 50×28px·같은 유리 톤·같은 곡률. 왼쪽 칸 [−] 작게, 오른쪽 칸 [+] 크게. 100%(기본)에서 130%까지 10%씩.
   버튼은 vs-theme.js가 각 스위치 앞에 넣음(HTML 무수정). 끝 값에 닿은 칸은 흐리게 + 비활성 */
.vs-fs { position: relative; display: inline-flex; flex: 0 0 auto; width: 50px; height: 28px; padding: 0; margin: 0; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px; background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: var(--vs-glass-blur); backdrop-filter: var(--vs-glass-blur);
  transition: background-color .3s ease, border-color .3s ease; }
.vs-fs:hover { border-color: rgba(255, 255, 255, .45); }
.vs-fs-btn { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, opacity .2s ease; }
.vs-fs-btn + .vs-fs-btn { border-left: 1px solid rgba(255, 255, 255, .18); }
.vs-fs-btn:hover { background: rgba(255, 255, 255, .14); }
.vs-fs-btn:focus { outline: none; }
.vs-fs-btn:focus-visible { outline: 2px solid #2176FF; outline-offset: -2px; }
.vs-fs-btn[disabled] { opacity: .3; cursor: default; background: transparent; }
.vs-fs svg { width: 12px; height: 12px; display: block; }
.nav-theme { gap: 10px; }
.vs-fs--bar { position: absolute; top: 17px; right: calc(var(--vs-island-pad-r) + 102px); z-index: 3; }
@media (min-width: 1360px) { .vs-fs--bar { display: none !important; } }
/* 가로가 아주 좁은 휴대폰(≤389px)은 로고를 15% 줄여도(40절) 자리가 모자라 상단 바에서는 숨김 */
@media (max-width: 389.98px) { .vs-fs--bar { display: none !important; } }
html[data-theme="light"] .vs-fs { border-color: rgba(0, 0, 0, .16); background: rgba(0, 0, 0, .05); }
html[data-theme="light"] .vs-fs:hover { border-color: rgba(0, 0, 0, .34); }
html[data-theme="light"] .vs-fs-btn { color: var(--vs-ink); }
html[data-theme="light"] .vs-fs-btn:hover { background: rgba(0, 0, 0, .06); }
html[data-theme="light"] .vs-fs-btn + .vs-fs-btn { border-left-color: rgba(0, 0, 0, .12); }
@supports (corner-shape: superellipse(2)) {
  .vs-fs { border-radius: 14px; corner-shape: superellipse(1.3); }
}

/* ---------- 38. 2026-09-21 연혁 연도별 묶음 (대표 지시: 2025년 같은 해를 소제목으로, 본문은 1월·2월…) ----------
   HTML(회사 4개 언어)은 tools/careers/history_year.py 가 <p class="hist-year">2026년</p> 를 그 해 첫 줄 앞에 넣고 날짜를 달 표기로 바꿈.
   접힌 상태에서도 연도 소제목은 늘 보임(접기는 p.hist-more 만 숨김) */
div.company-history > p.hist-year { margin: 2.5em 0 .7em; padding-left: 48px; font-size: 21px; font-weight: 700; letter-spacing: .01em; color: #f5f5f7; }
div.company-history > p.hist-year:first-child { margin-top: .2em; }
div.company-history > p.hist-year::before { top: .42em; width: 11px; height: 11px; background-color: #f5f5f7; }
div.company-history > p:not(.hist-year) > span { display: inline-block; min-width: 3.2em; margin-right: .9em; }
div.company-history > p { text-align: left; }   /* 줄이 넘어갈 때 가운데로 몰리지 않게(영문·일문·중문에서 보이던 현상) */
html[data-theme="light"] div.company-history > p.hist-year { color: var(--vs-ink) !important; }
html[data-theme="light"] div.company-history > p.hist-year::before { background-color: var(--vs-ink) !important; }
@media (max-width: 1076px) { div.company-history > p.hist-year { font-size: 18px; } }
@media (max-width: 768px) { #history .company-history > p:not(.hist-year) > span { min-width: 38px; } }   /* 날짜 칸 폭: '2026.09'(52px) → '12월' 기준 */

/* ---------- 39. 2026-09-21 회사 제목 국·영문 병기 + 미션 도식 빛 흐름 (대표 지시) ----------
   ① 국문 제목은 '미션(Mission)' — 괄호 안 영문만 RoundControl(IR 자료와 같은 서체, 한글 글자는 없는 서체라 한글은 기존 그대로).
   ② 미션 도식: 점 대신 빛이 흐름. 6.5초 한 묶음 = 로고(0~1.3초) → 화살표 3개(1.2~2.5초) → 둥근 박스 테두리 + 픽토그램(2.4~4.4초) → 쉼.
      흐르는 선은 vs-theme.js 가 점이 쓰던 보이지 않는 경로(.vs-m-track)를 복사해 만들고, 박스는 화살표가 닿는 지점(--s)에서 출발 */
@font-face { font-family: "RoundControl"; src: url("../assets/fonts/RoundControl-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* 09-21 5차 대표 지시: 회사 페이지 제목은 모든 언어판에서 영문 하나(MISSION·HISTORY·NEWS) → 제목 전체를 RoundControl 로 */
html body .company-title b, html body .news-title b { font-family: "RoundControl", "ConthraxSb", sans-serif; font-weight: 400; letter-spacing: .015em; }

/* 09-21 7차 대표 지시 "그라데이션 시퀀스 제대로, 너무 밝지 않게 은은하게":
   단색 빛줄기 → 머리는 옅게 밝고 꼬리로 갈수록 사라지는 그라데이션(길이가 다른 반투명 선 8겹을 머리에 맞춰 겹침, vs-theme.js 가 Web Animations 로 움직임).
   7초 한 묶음 = 로고 빛(0~1.4초) → 화살표(1.2~2.45초, 머리가 박스에 닿는 순간 2.2초) → 박스 둘레(2.2~4.5초) + 픽토그램 은은하게 밝아짐(2.5~4.2초) → 쉼 */
#mission .vs-m-flow path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
#mission .vs-m-flow > g { stroke-width: 2; opacity: 0; }   /* 9차: 굵기·투명도·블러는 묶음(g)에 걸어 디졸브 */
#mission .vs-m-flow { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .14)); }
#mission .vs-mission.is-live .vs-m-logo { animation: vsMissionLogo 7s cubic-bezier(.45, 0, .35, 1) infinite; }
#mission .vs-mission.is-live .vs-m-icon { animation: vsMIconGlow 7s ease-in-out infinite; }
@keyframes vsMissionLogo { 0% { background-position: 100% 0; } 20%, 100% { background-position: 0% 0; } }
@keyframes vsMIconGlow { 0%, 35% { filter: brightness(1); } 47% { filter: brightness(1.38); } 60%, 100% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { #mission .vs-m-flow { display: none; } }

/* ---------- 40. 2026-09-21 휴대폰 상단 로고 15% 축소 (대표 지시) — 줄어든 자리에 글자 크기 버튼이 들어감 ---------- */
@media (max-width: 767.98px) {
  html body nav.site-navbar .navbar-brand .vslogo { height: 11.9px !important; max-height: 11.9px !important; width: auto !important; }   /* 14px → 11.9px (theme.css 의 max-height 1.5rem 도 같이 내림) */
  html body nav.site-navbar .navbar-brand img[alt="500 Global"] { height: 13.6px !important; margin-left: 7px !important; }                /* 16px → 13.6px */
}

/* ---------- 41. 2026-09-21 지도: 마우스를 올리면 휠로 확대·축소, 끌어서 이동 (대표 지시) ----------
   그동안은 지도 위에 투명한 링크를 덮어 눌렀을 때 네이버지도로 보내고 지도 자체는 못 만지게 해 뒀음(.vs-map-frame pointer-events:none).
   마우스가 있는 화면에서만 지도를 직접 조작하게 풀고(덮개 제거), 손가락으로 넘기는 화면에서는 페이지 스크롤이 지도에 갇히지 않도록 그대로 둠.
   지도 열기는 아래 NAVER Map·TMAP 버튼이 그대로 맡음 */
@media (hover: hover) and (pointer: fine) {
  html body .vs-map .vs-map-frame { pointer-events: auto !important; }
  html body .vs-map > .vs-map-link { display: none !important; }
}

/* ---------- 42. 2026-09-21 고객사·투자사·파트너 로고 격자 (대표 지시, bigwaverobotics.com 참조) ----------
   한 장짜리 이미지(partners.webp) → 로고 하나씩 1px 테두리 둥근 모서리 박스에. 모든 로고 높이를 24px 로 통일하고
   가로로 긴 로고만 칸 폭(82%)에 맞춰 줄어듦. 라이트 모드는 기존 규칙과 같게 흰 로고를 반전 */
.vs-partners { width: 100%; max-width: 1180px; margin: 0 auto 56px; }
.vs-pt-group + .vs-pt-group { margin-top: 38px; }
.vs-pt-title { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .16em; color: #8c8c8c; text-align: center; }
.vs-pt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.vs-pt-grid > li { display: flex; align-items: center; justify-content: center; height: 76px; padding: 0 16px; margin: 0;
  border: 1px solid var(--vs-box-line, rgba(255, 255, 255, .14)); border-radius: 12px; background: transparent; transition: border-color .25s ease, background-color .25s ease; }
.vs-pt-grid > li:hover { border-color: var(--vs-box-line-hover, rgba(255, 255, 255, .3)); background-color: var(--vs-box-fill-hover, rgba(255, 255, 255, .04)); }
.vs-pt-grid img { height: calc(24px * var(--k, 1)); width: auto; max-width: 84%; object-fit: contain; display: block; opacity: .92; }   /* 09-21 9차: --k = 로고별 보이는 크기 보정(tools/careers/logo_scale.py) */
.vs-pt-grid img { filter: brightness(.773); opacity: 1 !important; }   /* 12차 B안: 다크 = 라이트그레이 #c5c5c5 (흰 원본 × .773, 로고 안 명암 유지) */
html[data-theme="light"] .vs-pt-grid img { filter: invert(1); opacity: .773 !important; }   /* 12차 B안: 라이트 = #3a3a3f 근처 (검정 × 77.3% on 흰 박스) */
html[data-theme="light"] .vs-pt-title { color: var(--vs-ink-3); }
.vs-pt-grid > li { border-radius: 16px; }   /* 12차 D안: 곡률 모서리를 못 쓰는 브라우저(사파리)는 일반 둥근 모서리 16px */
@supports (corner-shape: superellipse(2)) { .vs-pt-grid > li { border-radius: 24px; corner-shape: superellipse(1.8); } }   /* 12차 D안: 반경 24px · 곡률 1.8 */
.vs-pt-grid--center { grid-template-columns: repeat(auto-fit, minmax(0, 176px)); justify-content: center; }   /* 투자사처럼 수가 적은 묶음은 가운데 */
@media (max-width: 1199.98px) { .vs-pt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .vs-pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vs-pt-grid > li { height: 68px; padding: 0 12px; } }
@media (max-width: 575.98px) { .vs-pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .vs-pt-grid > li { height: 62px; } .vs-pt-grid img { height: calc(21px * var(--k, 1)); } .vs-partners { margin-bottom: 40px; } }

/* ---------- 43. 2026-09-21 IR 자료 열람 요청 창 (대표 지시) — 상단 드롭다운과 같은 유리 톤. 동작은 vs-theme.js 'IR 자료 열람 요청' ---------- */
html.vs-ir-lock, html.vs-ir-lock body { overflow: hidden !important; }
.vs-ir-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
.vs-ir-modal[hidden] { display: none; }
.vs-ir-modal.is-open { opacity: 1; }
.vs-ir-card { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 30px 26px 24px; color: #f5f5f7; text-align: left;
  background: var(--vs-glass-bg, rgba(20, 20, 22, .82)); border: 1px solid var(--vs-glass-line, rgba(255, 255, 255, .12)); border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); -webkit-backdrop-filter: var(--vs-glass-blur, blur(28px) saturate(1.7)); backdrop-filter: var(--vs-glass-blur, blur(28px) saturate(1.7));
  transform: translateY(8px); transition: transform .2s ease; }
.vs-ir-modal.is-open .vs-ir-card { transform: none; }
.vs-ir-card h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: inherit; }
.vs-ir-desc { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #a7a7a7; }
.vs-ir-desc.is-done { margin: 6px 0 4px; color: inherit; }
.vs-ir-note { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: rgba(33, 118, 255, .14); color: #cfe0ff; }
.vs-ir-note[hidden] { display: none; }
.vs-ir-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 12px; background: transparent; color: #a7a7a7; font-size: 22px; line-height: 1; cursor: pointer; }
.vs-ir-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.vs-ir-field { display: block; margin: 0 0 12px; }
.vs-ir-field > span { display: block; margin: 0 0 6px; font-size: 13px; color: #a7a7a7; }
.vs-ir-field input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  color: #f5f5f7; font-size: 15px; outline: none; transition: border-color .2s ease; }
.vs-ir-field input:focus { border-color: #2176FF; }
.vs-ir-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.vs-ir-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 18px; font-size: 12.5px; line-height: 1.55; color: #a7a7a7; cursor: pointer; }
.vs-ir-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #2176FF; }
.vs-ir-submit { width: 100%; height: 46px; border: 0; border-radius: 14px; background: #f5f5f7; color: #030303; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity .2s ease; }
.vs-ir-submit:hover { opacity: .9; }
.vs-ir-submit:disabled { opacity: .55; cursor: default; }
.vs-ir-msg { min-height: 1.2em; margin: 10px 0 0; font-size: 13px; color: #a7a7a7; }
.vs-ir-msg.is-err { color: #ff6b6b; }
html[data-theme="light"] .vs-ir-card { color: var(--vs-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .16); }
html[data-theme="light"] .vs-ir-desc, html[data-theme="light"] .vs-ir-field > span, html[data-theme="light"] .vs-ir-consent, html[data-theme="light"] .vs-ir-msg { color: var(--vs-ink-3, #6e6e73); }
html[data-theme="light"] .vs-ir-desc.is-done { color: var(--vs-ink); }
html[data-theme="light"] .vs-ir-field input { border-color: rgba(0, 0, 0, .14); background: rgba(0, 0, 0, .03); color: var(--vs-ink); }
html[data-theme="light"] .vs-ir-submit { background: var(--vs-ink); color: #fff; }
html[data-theme="light"] .vs-ir-close:hover { background: rgba(0, 0, 0, .06); color: var(--vs-ink); }
html[data-theme="light"] .vs-ir-note { background: rgba(33, 118, 255, .1); color: #1650c0; }
@supports (corner-shape: superellipse(2)) {
  .vs-ir-card { border-radius: 37px; corner-shape: superellipse(1.7); }
  .vs-ir-field input, .vs-ir-submit, .vs-ir-close, .vs-ir-note { corner-shape: superellipse(1.7); }
}

/* ── 44. 우측 네비 픽토그램 높이 통일 (2026-09-21 11차 대표 지시 "뒤죽박죽 → 일관성") ──
   원래 그림 높이: 링크드인 17.9 · 유튜브 11.5 · 브로슈어 18.1 · 지구본 14 · 해/달 약 10~11px → 모두 13px.
   타일(25px)·스위치 크기는 그대로, 안의 그림만 viewBox 중심 기준으로 배율 조정 */
html body nav :is(.linkedin-link, .youtube-link, .brochure-link) svg path { transform-box: view-box; transform-origin: 50% 50%; }
html body nav .linkedin-link svg path { transform: scale(.726); }
html body nav .youtube-link svg path { transform: scale(1.13); }
html body nav .brochure-link svg path { transform: translate(-.91px, -.85px) scale(.718);   /* view-box 기준점이 (-3,-3) 아닌 (0,0)이라 중심 보정 */ }
html body nav .nav-lang .fa-globe { font-size: 13px !important; width: 13px; height: 13px; line-height: 13px; vertical-align: -1px; }
.theme-toggle .tt-knob svg.tt-sun { width: 13.9px; height: 13.9px; }     /* 해: 빛살 포함 그림이 viewBox의 15/16 */
.theme-toggle .tt-knob svg.tt-moon { width: 17.6px; height: 17.6px; }    /* 달: 그림이 viewBox의 11.8/16 */

/* ── 45. 라이트 모드 픽토그램 다크그레이 (2026-09-21 12차 대표 지시 "생블랙은 부담") ──
   메뉴 글자는 23절 #17171B 유지, 그림(소셜·소개서·지구본·스위치 노브·글자크기 ±·500 로고)만 #4a4a50. 마우스를 올리면 #17171B */
html[data-theme="light"] { --vs-picto: #4a4a50; }
html[data-theme="light"] body nav :is(.youtube-link, .linkedin-link, .brochure-link) svg path { fill: var(--vs-picto) !important; }
html[data-theme="light"] body nav :is(.linkedin-link:hover, .youtube-link:hover, .brochure-link:hover, .nav-item.show > .brochure-link, .nav-item.dropdown:hover > .brochure-link) svg path { fill: #17171B !important; }
html[data-theme="light"] body nav.site-navbar .fa-globe { color: var(--vs-picto) !important; }
html[data-theme="light"] body .theme-toggle .tt-knob { background: var(--vs-picto) !important; }
html[data-theme="light"] body .vs-fs-btn { color: var(--vs-picto); }
html[data-theme="light"] body nav.site-navbar .navbar-brand img[alt="500 Global"] { filter: invert(.71) !important; }   /* 흰 원본 → 255×(1−.71)=74 ≈ #4a4a4a */

/* ── 46. 연혁 점 (2026-09-21 12차) — 점은 불투명·선 위, 라이트는 다크그레이, 연도 점은 선 정중앙 ──
   선: 왼쪽 24px, 폭 1px → 중심 24.5px. 기존 점은 translateX(-46%)라 크기마다 중심이 조금씩 어긋났음 */
div.company-history > p::before { left: 24.5px !important; transform: translateX(-50%) !important; z-index: 3 !important; }
html[data-theme="light"] div.company-history > p::before,
html[data-theme="light"] div.company-history > p.hist-year::before { background-color: var(--vs-picto, #4a4a50) !important; opacity: 1 !important; }
html[data-theme="light"] div.company-history::before { background-color: rgba(0, 0, 0, .18) !important; z-index: 1 !important; }
div.company-history > p.hist-year::before { top: .42em; top: calc(.5lh - 5.5px) !important; }   /* 연도 점을 '2026년' 글자 줄 가운데 높이에 */
html[data-theme="light"] .vs-pt-grid > li { background-color: #fff !important; }   /* 12차: 라이트 모드 로고 박스 안쪽 흰색 */