/* ===== 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: 26px; --vs-island-pad-l: 2.4rem; --vs-island-pad-r: 17px;
  --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. 테마 전환 스위치 (둥근 사각, R 9) ---------- */
.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: 9px; 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: 2px solid #2176FF; outline-offset: 2px; }
.theme-toggle .tt-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 6px; 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; }
  .theme-toggle .tt-knob { border-radius: 9px; }
  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-check { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 14px; color: #d6d6d6; cursor: pointer; }
.careers-check input { width: 18px; height: 18px; margin: 0; accent-color: #2176FF; }
.careers-privacy { margin: 8px 0 0 28px; font-size: 12px; color: #8a8a8e; }
.careers-privacy summary { width: max-content; cursor: pointer; }
.careers-privacy p { margin: 8px 0 0; line-height: 1.7; white-space: pre-line; }
.careers-submit { border: 0; font-family: inherit; cursor: pointer; }
.careers-submit:disabled { opacity: .6; cursor: default; }
.careers-status { min-height: 22px; margin: 16px 0 0; font-size: 14px; }
.careers-status.is-success { color: #34c759; }
.careers-status.is-error { color: #ff6b6b; }
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-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; } }