.reveal { opacity: 0; transform: translateY(10px); transition: all .6s ease; }
.reveal.show { opacity: 1; transform: none; }
.active-link { border-bottom: 2px solid #2563eb; color: #2563eb; }
html { scroll-behavior: smooth; }
:root { --scroll-mt: 80px; }
.section { scroll-margin-top: var(--scroll-mt); }

/* === 통일된 텍스트 컬러 체계 === */
:root{ --fg:#0f172a; --fg-muted:#475569; --accent:#2563eb; }
#home .hero-copy{ color: var(--fg); }
#home .hero-copy p{ color: var(--fg-muted); }
#home .hero-copy h1 span{ color: var(--accent); }

/* 배경 이미지가 있을 때 가독성/톤 전환 */
#home.has-image { --fg:#f8fafc; --fg-muted: rgba(248,250,252,.92); --accent: #93c5fd; }
#home.has-image .hero-copy { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
#home.has-image .hero-copy h1 span { filter: drop-shadow(0 0 6px rgba(255,255,255,0.5)); }

/* 히어로 배경: 이미지 없을 때 블러 그라데이션 플레이스홀더 */
#hero-bg{ position:absolute; inset:0; z-index:-10; }
#hero-bg::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); filter: blur(14px) saturate(115%); transform: scale(1.04); opacity:.95; transition: opacity .35s ease; pointer-events:none; }
#home.has-image #hero-bg::before{ opacity:0; }

/* 히어로 오른쪽 제품 이미지: 단순 블러 플레이스홀더 → 이미지 페이드인 */
.hero-image-container { position: relative; border-radius: 1rem; overflow: hidden; }
.hero-image-container::before{ content:""; position:absolute; inset:0; background:rgba(241,245,249,0.4); filter: blur(20px) brightness(1.05); transform: scale(1.1); transition: opacity .35s ease; opacity:1; }
.hero-image-container.loaded::before{ opacity:0; }
.hero-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; display:none; transition: opacity .35s ease; }
.hero-image-container.loaded .hero-image{ opacity:1; }

/* 적용사례 이미지 컨테이너: 히어로와 동일한 확대 크롭(cover) */
.uc-image-container { position: relative; overflow: hidden; }
.uc-image-container::before{ content:""; position:absolute; inset:0; background:rgba(241,245,249,0.4); filter: blur(14px) brightness(1.03); transform: scale(1.06); transition: opacity .35s ease; opacity:1; }
.uc-image-container.loaded::before{ opacity:0; }
.uc-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition: opacity .35s ease; display:block; }

@media (max-width: 768px){
  #home:not(.has-image) .hero-copy{ background: rgba(255,255,255,0.85); -webkit-backdrop-filter: saturate(140%) blur(2px); backdrop-filter: saturate(140%) blur(2px); border-radius: 1rem; padding: 1rem 1.25rem; }
}