/* ── Custom Scrollbar (Dark / KR default) ── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #07080a; } ::-webkit-scrollbar-thumb { background: #262a36; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #3a7558; } /* ── Glassmorphism ── */ .glass-panel { background: rgba(21, 24, 32, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); } .glass-panel-light { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ── Common utilities ── */ .page-transition { transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; } .img-hover-zoom { overflow: hidden; } .img-hover-zoom img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .img-hover-zoom:hover img { transform: scale(1.06); } .glow-card { position: relative; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .glow-card:hover { border-color: rgba(76, 150, 114, 0.5); box-shadow: 0 0 25px rgba(45, 94, 70, 0.25); } /* ── Language toggle button ── */ .lang-btn { padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; transition: all 0.2s; cursor: pointer; color: #94a3b8; } .lang-btn.active { background: #4c9672; color: #ffffff; } .lang-btn:not(.active):hover { color: #e2e8f0; } .lang-divider { color: #3a4050; font-size: 11px; user-select: none; } /* ═══════════════════════════════════════════════ LIGHT THEME — applied when ═══════════════════════════════════════════════ */ /* Scrollbar */ .lang-en ::-webkit-scrollbar-track { background: #f1f5f9; } .lang-en ::-webkit-scrollbar-thumb { background: #cbd5e1; } .lang-en ::-webkit-scrollbar-thumb:hover { background: #3a7558; } /* Body / Font */ .lang-en body { background-color: #f8fafc !important; color: #1e293b !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; } /* Header */ .lang-en #main-header { background: rgba(255, 255, 255, 0.93) !important; border-bottom-color: rgba(0, 0, 0, 0.07) !important; } /* Glass panels → white cards */ .lang-en .glass-panel { background: rgba(255, 255, 255, 0.94) !important; border-color: rgba(0, 0, 0, 0.09) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07); } /* Backgrounds */ .lang-en .bg-brand-black { background-color: #f8fafc !important; } .lang-en .bg-brand-dark { background-color: #f1f5f9 !important; } .lang-en .bg-brand-darker { background-color: #e8edf4 !important; } .lang-en .bg-brand-surface{ background-color: #ffffff !important; } /* Text colors */ .lang-en .text-white { color: #1e293b !important; } .lang-en .text-brand-grayLight { color: #334155 !important; } .lang-en .text-brand-grayMuted { color: #64748b !important; } .lang-en .text-gray-300 { color: #475569 !important; } .lang-en .text-gray-400 { color: #64748b !important; } .lang-en .text-gray-200 { color: #374151 !important; } /* Green accents — keep branding but slightly deeper */ .lang-en .text-brand-greenAccent { color: #2d5e46 !important; } /* Borders */ .lang-en .border-white\/10 { border-color: rgba(0,0,0,0.10) !important; } .lang-en .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; } .lang-en .border-white\/20 { border-color: rgba(0,0,0,0.14) !important; } /* Semi-transparent whites → light grays */ .lang-en .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; } .lang-en .bg-white\/10 { background-color: rgba(0,0,0,0.06) !important; } .lang-en .bg-white\/95 { background-color: rgba(255,255,255,0.98) !important; } /* Hover states */ .lang-en .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.05) !important; } .lang-en .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.07) !important; } .lang-en .hover\:bg-white\/20:hover { background-color: rgba(0,0,0,0.10) !important; } /* Form inputs */ .lang-en input, .lang-en textarea { background-color: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.12) !important; color: #1e293b !important; } .lang-en input::placeholder, .lang-en textarea::placeholder { color: #94a3b8 !important; } /* Nav buttons */ .lang-en .nav-btn { color: #475569 !important; } .lang-en .nav-btn.text-white { color: #1e293b !important; } /* Mobile menu */ .lang-en #mobile-menu { background-color: rgba(255,255,255,0.97) !important; border-top-color: rgba(0,0,0,0.08) !important; } .lang-en #mobile-menu button { color: #334155 !important; } /* Footer */ .lang-en footer { background-color: #e2e8f0 !important; border-top-color: rgba(0,0,0,0.10) !important; } /* Map area */ .lang-en .map-bg { background-color: #dde3eb !important; } .lang-en .map-grid { opacity: 0.3; } /* Email notice */ .lang-en .bg-brand-green\/10 { background-color: rgba(45,94,70,0.08) !important; } .lang-en .border-brand-green\/30 { border-color: rgba(45,94,70,0.22) !important; } /* Glow card light override */ .lang-en .glow-card:hover { border-color: rgba(45,94,70,0.35); box-shadow: 0 0 20px rgba(45,94,70,0.12); } /* Lang toggle in light mode */ .lang-en .lang-btn:not(.active) { color: #64748b; } .lang-en .lang-btn:not(.active):hover { color: #1e293b; } .lang-en .lang-divider { color: #cbd5e1; } /* Selection */ .lang-en ::selection { background-color: #bbf7d0; color: #1e293b; } /* Map external link buttons */ .lang-en .map-link-btn { background-color: rgba(0,0,0,0.55) !important; } /* ───────────────────────────────────────── EN LIGHT — 이미지 위 텍스트 가독성 보정 ───────────────────────────────────────── */ /* Hero Video (EN Light Mode) */ .lang-en #hero-video { filter: brightness(0.95) contrast(1.0) !important; } .lang-en #hero-video-overlay { background: linear-gradient(to top, rgba(248, 250, 252, 0.9) 0%, rgba(248, 250, 252, 0.4) 60%, rgba(255,255,255,0.1) 100%) !important; } .lang-en .hero-gradient-text { background-image: linear-gradient(to right, #1e293b, #475569, #2d5e46) !important; } /* Feature showcase (AI/BIM 상단 히어로 이미지) — 밝은 이미지 위이므로 brightness 올리고 오버레이 색 변경 */ .lang-en .feature-img-overlay { background: linear-gradient(to top, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.5) 60%, transparent 100%) !important; } /* 히어로 이미지 위 텍스트를 어두운 색으로 */ .lang-en .feature-img-title { color: #1e293b !important; } .lang-en .feature-img-sub { color: #475569 !important; } /* intro-showcase 카드 오버레이 (Home intro 이미지 하단) */ .lang-en .intro-img-overlay { background: linear-gradient(to top, rgba(255,255,255,0.88) 0%, transparent 70%) !important; } .lang-en .intro-img-caption { background: rgba(255,255,255,0.85) !important; border-color: rgba(0,0,0,0.10) !important; } .lang-en .intro-img-caption .caption-label { color: #2d5e46 !important; } .lang-en .intro-img-caption .caption-text { color: #1e293b !important; } /* We-Are 섹션 배경 이미지 오버레이 — 라이트 모드에서 이미지를 밝게 유지 */ .lang-en #weare-bg-img { filter: brightness(0.75) contrast(1.0) !important; } .lang-en #weare-overlay { background: linear-gradient(to top, rgba(241,245,249,0.96) 0%, rgba(241,245,249,0.5) 60%, transparent 100%) !important; } .lang-en #weare-grid-overlay { background-color: rgba(241,245,249,0.55) !important; } /* 넘버링 카드 (01~05) / glow-card 전체 — 라이트 모드 조정 */ .lang-en .glow-card { background: rgba(255,255,255,0.95) !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.07); } .lang-en .glow-card .card-tag { background-color: rgba(45,94,70,0.10) !important; border-color: rgba(45,94,70,0.25) !important; color: #2d5e46 !important; } /* card-tag가 없는 경우 (bg-white/5 패턴)도 함께 처리 */ .lang-en .glow-card > div[class*="bg-white/5"] { background-color: rgba(45,94,70,0.10) !important; border-color: rgba(45,94,70,0.25) !important; color: #2d5e46 !important; } .lang-en .glow-card h3 { color: #1e293b !important; } .lang-en .glow-card p:not([class*="text-brand-green"]) { color: #475569 !important; } .lang-en .glow-card:hover { border-color: rgba(45,94,70,0.35); box-shadow: 0 0 20px rgba(45,94,70,0.12); }