.project-corner-icon {
    position: absolute;
    right: 1rem;   /* 살짝 좌측으로 이동 (우측 여백 증가) */
    bottom: 1rem;  /* 살짝 위로 이동 (하단 여백 증가) */
    width: 38px;   /* 48px의 80% */
    height: 38px;  /* 48px의 80% */
    object-fit: contain;
    filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.25));
    pointer-events: none;
}
/* 프로젝트 페이지 카드 아이콘: 그림자 제거 */
.projects-section .project-corner-icon { filter: none !important; opacity: 1 !important; }
.seq { opacity: 0; transform: translateY(16px); transition: opacity 1200ms ease, transform 1200ms ease; will-change: opacity, transform; }
.seq.seq--show { opacity: 1; transform: translateY(0); }
.projects-hero {
    padding-top: 150px;
    padding-bottom: 0;
    position: relative; /* 프로젝트 히어로에 화살표 절대 배치 기준 */
    min-height: calc(100vh - 64px); /* 헤더 제외 풀뷰 높이로 바닥까지 확보 */
}
.cta-title {
  margin: 0 0 0.5rem 0;
}
.cta-title a {
  color: inherit;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* 어바웃 하단 CTA 텍스트 1업 */
.cta-section.bg-gray .cta-title a {
  font-size: 1.25rem; /* 1다운 */
  background: var(--orange);
  color: #ffffff;
  padding: 0.75rem 1.2rem; /* 박스 살짝 확대 */
  border-radius: 0; /* 라운드 제거 */
}
.project-cta-bottom .cta-title a {
  background: var(--orange);
  color: #ffffff;
  padding: 0.75rem 1.2rem;
  border-radius: 0;
}
.cta-section.bg-gray .cta-title a:hover { filter: brightness(1.05); }
.cta-section.bg-gray .cta-title a .cta-text::after { display: none; }
/* 어바웃 하단 CTA가 bg-white일 때도 프로젝트 하단 버튼과 동일 스타일 적용 */
.cta-section.bg-white .cta-title a {
  font-size: 1.25rem;
  background: var(--orange);
  color: #ffffff;
  padding: 0.75rem 1.2rem;
  border-radius: 0;
}
.cta-section.bg-white .cta-title a:hover { filter: brightness(1.05); }
.cta-section.bg-white .cta-title a .cta-text::after { display: none; }
.cta-text {
  position: relative;
  display: inline-block;
}
.cta-text::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;      /* 텍스트에 밀착 */
  width: 100%; height: 2px;/* 밀착형 두께 */
  background: currentColor; /* 텍스트 컬러와 동일 */
  opacity: 0;               /* 호버 시에만 표시 */
}
.cta-title a:hover .cta-text::after { opacity: 1; } /* 애니메이션 없이 즉시 표시 */
/* 프로젝트 페이지 하단 CONTACT 전용 사이즈 업 */
.project-cta-bottom .cta-title {
    margin-top: 0.75rem;
}
.project-cta-bottom .cta-title a {
    font-size: 1.25rem; /* 어바웃과 동일 */
}
.project-cta-bottom .cta-title a:hover { filter: brightness(1.05); }
.project-cta-bottom .cta-title a .cta-text::after { display: none; }
.project-cta-bottom p {
    font-size: 1.2rem; /* 3다운 */
    line-height: 1.6;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .project-cta-bottom .cta-title a { font-size: 1.25rem; }  /* 어바웃과 동일 유지 */
  .project-cta-bottom p { font-size: 1.6rem; }           /* 3다운 적용 */
}

@media (min-width: 1024px) {
  .project-cta-bottom .cta-title a { font-size: 1.25rem; } /* 어바웃과 동일 유지 */
  .project-cta-bottom p { font-size: 2rem; }              /* 3다운 적용 */
}

@media (min-width: 1440px) {
  .project-cta-bottom .cta-title a { font-size: 1.25rem; }/* 어바웃과 동일 유지 */
  .project-cta-bottom p { font-size: 2.4rem; }           /* 3다운 적용 */
}

/* 프로젝트 페이지 하단 서브타이틀(성과를 위한 본질...) 2사이즈 다운 */
.project-cta-bottom .cta-subtitle-tight {
    font-size: clamp(1.45rem, 2vw, 1.6rem);
}
.cta-arrow { width: 28px; height: 28px; stroke-width: 4; } /* 더 크게, 더 볼드 */
.cta-underline {
  color: inherit;
  text-decoration: none;
  position: relative;
}
.cta-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.cta-underline:hover::after { transform: scaleX(1); }
.image-overlay-section { padding: 0; }
/* 어바웃: 이미지 제거 + 섹션 배경 주황 그라데이션 애니메이션 */
.image-overlay-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 1200px at 10% 10%, rgba(255, 106, 0, 0.15), transparent 60%),
                radial-gradient(1000px 1000px at 90% 20%, rgba(255, 106, 0, 0.12), transparent 60%),
                linear-gradient(180deg, rgba(255, 106, 0, 0.06), rgba(255, 106, 0, 0.03));
}

.image-overlay-section::before,
.image-overlay-section::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(40% 40% at 30% 20%, rgba(255, 106, 0, 0.25), transparent 70%);
    filter: blur(40px);
    animation: orangeGlow 10s ease-in-out infinite alternate;
    pointer-events: none;
}

.image-overlay-section::after {
    background: radial-gradient(35% 35% at 70% 30%, rgba(255, 106, 0, 0.20), transparent 70%);
    animation-duration: 12s;
    animation-delay: -4s;
}

@keyframes orangeGlow {
    0% { transform: translate(-10%, -5%) scale(1); opacity: 0.7; }
    50% { transform: translate(5%, 5%) scale(1.05); opacity: 0.9; }
    100% { transform: translate(10%, -5%) scale(1.1); opacity: 0.75; }
}

/* 요청: 이미지 오버레이 섹션의 배경 그라데이션 연출 제거 */
.image-overlay-section { background: transparent !important; }
.image-overlay-section::before,
.image-overlay-section::after { content: none !important; display: none !important; }

/* 어바웃: 이미지 오버레이 섹션 텍스트 컬러 지정 (제목=연한 그레이, 본문=주황) */
.image-overlay-section .overlay-text h3 { color: var(--text-secondary) !important; }
.image-overlay-section .overlay-text p { color: var(--orange) !important; }

/* 본문 첫 줄(스팬)만 연한 그레이로 통일 */
.image-overlay-section .overlay-text p .overlay-black { color: var(--text-secondary) !important; }

/* 어바웃: 오버레이 텍스트 사이즈 동일화 + 아랫줄 기준 3사이즈 업 + 볼드 */
.image-overlay-section .overlay-text.overlay-xl h3,
.image-overlay-section .overlay-text.overlay-xl p {
    font-size: 3.4rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

/* 어바웃: 오버레이 텍스트 행간 통일 - 제목 마진 제거 */
.image-overlay-section .overlay-text.overlay-xl h3 { margin: 0 !important; }
.promise-card.image-only.with-overlay.text-deep-gray .overlay-text,
.promise-card.image-only.with-overlay.text-deep-gray .overlay-text h3,
.promise-card.image-only.with-overlay.text-deep-gray .overlay-text p {
    color: #1a1a1a !important; /* 블랙에 가까운 진한 그레이 */
}

/* 비전/미션 카드 본문 텍스트 명도 살짝 상승 */
.promise-card.image-only.with-overlay.text-deep-gray .overlay-text p {
    color: rgba(0, 0, 0, 0.75) !important;
}
.card-caption {
    margin: 0.75rem 0 1.5rem;
    font-size: 1rem;
    color: rgba(0,0,0,0.7);
    text-align: left;
}
/* CSS Variables for Light/Dark Mode */
:root {
    /* Light Mode Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --text-primary: #000000;
    --text-secondary: #6e6e73;
    --border-color: rgba(0, 0, 0, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.08);
    --header-bg: rgba(255, 255, 255, 0.98);
    --orange: #FF6A00; /* 기본 주황색 */
    --letter-spacing-tight: -0.04em; /* 전역 자간(가장 좁게) */
    --letter-spacing-semi-tight: -0.01em; /* 타이틀용 덜 좁은 자간 */
    
    /* 카드 캐러셀 설정: 세로 기준, 가로는 3:4 비율로 자동 계산 */
    --card-height: 750px;          /* 세로 2배 확대 */
    --card-width: calc(var(--card-height) * 0.75); /* 3:4 비율(가로:세로) */
    --card-gap: 2rem;
    --card-gap-px: 32px;
    --animation-duration: 0.3s;
    --snap-threshold: 0.33; /* 카드 너비의 1/3 */
    /* 프로젝트(데스크톱) 가로 4장 고정용 변수 */
    --cards-per-row: 4;
    --cards-gap: 1rem;
    
    /* 하단 섹션 전용 카드 설정: 세로 고정, 가로 3:4 자동 계산 */
    --card-height-about: 900px;    /* 세로 2배 확대 */
    --card-width-about: calc(var(--card-height-about) * 0.75);
}

[data-theme="dark"] {
    /* Dark Mode Colors */
    --bg-primary: #000000;
    --bg-secondary: #1d1d1f;
    --text-primary: #ffffff;
    --text-secondary: #86868b;
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(255, 255, 255, 0.1);
    --header-bg: rgba(0, 0, 0, 0.98);
    --orange: #FF6A00; /* 기본 주황색 */
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fade In Up Animation */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow-x: hidden; /* 가로 스크롤 방지 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-tight);
}

p {
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: var(--letter-spacing-tight);
}

/* Container */
.container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Header & Navigation */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    border-bottom: none;
    transition: all 0.3s ease;
    opacity: 0; /* 초기에는 비표시 */
    pointer-events: none; /* 클릭 방지 */
    transform: translateY(-8px); /* 약간 위로 숨김 */
}

.header.header--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    height: 64px;
}

.logo a {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
    letter-spacing: -0.02em;
}

.logo a:hover {
    color: var(--text-primary);
}

.logo-dot {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.logo a:hover .logo-dot {
    color: var(--orange);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-size: 0.95rem;
    padding: 0.25rem 0.5rem;
    overflow: hidden;
    letter-spacing: var(--letter-spacing-tight);
}

.nav-menu a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.nav-menu a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-menu a:hover {
    color: white;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-menu a:hover::after {
    transform: scaleX(1);
    transform-origin: right;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: var(--bg-secondary);
    border-color: var(--orange);
}

.theme-icon {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-primary);
    transition: background-color 0.3s ease;
}


/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    background: #0a0a0a;
    position: relative;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--hero-overlay-opacity, 0));
    z-index: 1;
    pointer-events: none;
    will-change: background;
}

.hero-content {
    max-width: 800px;
    position: relative;
    z-index: 3; /* 비디오 및 오버레이 위에 확실히 표시 */
    padding: 80px 20px; /* 텍스트 여백 유지 */
    margin-top: -16px; /* 살짝 위로 */
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.1;
    color: #ffffff;
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
    letter-spacing: var(--letter-spacing-semi-tight);
}

/* 모바일/태블릿: 히어로 스크롤 락 비활성 시 텍스트가 숨김되지 않도록 즉시 표시 */
@media (max-width: 1024px) {
  /* 모바일/태블릿: 텍스트 레이어를 절대 배치로 비디오 위에 고정 */
  .hero-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    margin-top: 0;
  }
  .hero-title { text-align: center; opacity: 0; transform: translateY(24px); }
}

.hero-dot {
    color: var(--orange);
    font-weight: 900;
}

/* 스크롤 인디케이터 */
.scroll-indicator {
    position: absolute;
    bottom: 4rem; /* 더 위로 배치 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #ffffff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    cursor: pointer;
    z-index: 10;
}

.scroll-indicator:hover {
    opacity: 1;
}

/* 프로젝트 히어로에서도 동일 위치/스타일 적용, 색상만 그레이 */
.projects-hero .scroll-indicator { bottom: 2rem; }
.projects-hero .scroll-arrow { --arrow-color: #bdbdbd; opacity: 0.6; }

/* Scroll arrow (SVG) */
.scroll-arrow {
    --arrow-size: 56px; /* 크기 증가 */
    --arrow-color: #ffffff; /* 색상 */
    --arrow-stroke: 1.8; /* 더 얇게 */
    width: var(--arrow-size);
    height: var(--arrow-size);
    color: var(--arrow-color);
    display: block;
    animation: scrollFloat 2.5s ease-in-out infinite; /* 조금 더 빠르게 */
}

.scroll-arrow path {
    stroke-width: var(--arrow-stroke);
    transform: none; /* 비율 유지: 늘어남 제거 */
}

.scroll-indicator:hover .scroll-arrow {
    color: var(--orange);
}

/* 비전/미션 하단 인디케이터 위치 보정 */
.vision-mission .vision-scroll {
    position: absolute;
    bottom: clamp(3rem, 8vw, 6rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--orange); /* 주황색 표시 */
    z-index: 200; /* 섹션 위로 확실하게 */
    pointer-events: none; /* 버튼 기능 비활성화 */
}

/* 화살표를 항상 주황색으로 */
.vision-mission .vision-scroll .scroll-arrow {
    --arrow-color: var(--orange);
    --arrow-size: 56px;
    color: var(--orange);
}

/* 텍스트 제거로 불필요 - .scroll-text 삭제 */

@keyframes scrollFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    box-shadow: none;
    z-index: 0;
}

.hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform, opacity;
}

/* 모바일: 히어로 영상이 화면 전체를 강제로 채우지 않도록 고정 높이로 제한 */
@media (max-width: 768px) {
  /* 모바일: 영상 다시 섹션 전체 배경을 채우도록 복원 */
  .hero-video { position: absolute; inset: 0; height: 100%; }
  .hero-video video { height: 100%; max-height: none; }
}

.highlight {
    color: var(--orange);
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #ffffff;
    max-width: 600px;
    margin: 0 auto;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.8;
    text-align: left;
    letter-spacing: 0.01em;
}

/* 프로젝트 섹션 스타일 */
.projects-section {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 0 2rem 0;
    background: #000000;
    margin: 0;
    width: 100%; /* 100vw → 100%: 모바일 가로 스크롤 방지 */
}

/* Projects Section - White Theme Variant */
.projects-section.white-theme {
    background: var(--bg-primary);
    padding: 24px 100px 0 100px; /* 좌우 100px 적용 (모바일에서 오버라이드) */
}

/* 모바일: 프로젝트 섹션 좌우 패딩 축소로 내용 폭 회복 */
@media (max-width: 768px) {
  .projects-section.white-theme { padding: 16px 16px 0 16px; }
}

/* 모바일 가로(랜드스케이프): 카드 덮어쓰기 스택(세로 70% 겹침) + 유동 크기 */
@media (max-width: 768px) and (orientation: landscape) {
  :root { --card-overlap-y: 80%; }
  .projects-section.white-theme { padding: 12px 12px 0 12px; }
  .projects-cards-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: visible;
    touch-action: pan-y; /* 모바일 세로 스크롤 우선 */
    padding: 0 12px !important;
    padding-bottom: 6vh; /* 마지막 카드 하단 여유 축소 */
  }
  .projects-section.white-theme .project-card {
    width: clamp(340px, 90vw, 540px) !important; /* 더 과감히 축소 */
    max-width: 90vw !important;
    aspect-ratio: 3 / 4;
    max-height: 70vh;
    left: auto !important;
    transform: none !important; /* 기존 좌표 무효화 */
    margin: 0 auto; /* 중앙 정렬 */
    box-sizing: border-box;
    touch-action: auto; /* 카드 개별 제스처는 기본 */
  }
  .projects-section.white-theme .project-card + .project-card { margin-top: calc(-1 * var(--card-overlap-y)); }
  /* 레이어 순서 고정 */
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(1) { position: relative; z-index: 1; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(2) { position: relative; z-index: 2; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(3) { position: relative; z-index: 3; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(4) { position: relative; z-index: 4; }
}

/* 모바일 세로(포트레이트): 카드 더 축소 + 70% 겹침 스택 구현 */
@media (max-width: 768px) and (orientation: portrait) {
  :root { --card-overlap-y: 80%; }
  .projects-section.white-theme { padding: 12px 12px 0 12px; }
  .projects-section.white-theme .projects-cards-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: visible;
    touch-action: pan-y; /* 모바일 세로 스크롤 우선 */
  }
  .projects-section.white-theme .project-card {
    width: clamp(260px, 84vw, 320px) !important; /* 더 작은 폭 */
    max-width: 84vw !important;
    aspect-ratio: 3 / 4;
    max-height: 68vh;
    left: auto !important;
    transform: none !important;
    margin: 0 auto;
    touch-action: auto; /* 카드 개별 제스처는 기본(세로 스크롤 허용) */
  }
  .projects-section.white-theme .project-card + .project-card { margin-top: calc(-1 * var(--card-overlap-y)) !important; }
  /* 레이어 순서 고정: 프롬터(1) 뒤 → 뉴웨이브(4) 위 */
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(1) { z-index: 1; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(2) { z-index: 2; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(3) { z-index: 3; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(4) { z-index: 4; }
}

/* 모바일: 카드 배경 이미지를 전체 보이도록 contain 적용 */
@media (max-width: 768px) {
  .projects-section.white-theme .project-card.bg-image::before {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}

/* 모바일: NEW WAVE(4번째 카드) 상단 20%만 남기고 나머지 페이드 아웃 */
@media (max-width: 768px) {
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(4)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 80%;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    pointer-events: none;
    z-index: 5;
  }
}

/* 데스크톱 → 창 축소 시: 카드 유동 축소 + 겹침 스택 (세로 겹침) */
@media (min-width: 769px) and (max-width: 1200px) {
  :root { --web-card-overlap: 40%; }
  .projects-section.white-theme .projects-cards-container {
    display: flex !important; /* 기존 가로 스택을 덮어쓰기 */
    flex-direction: column !important;
    align-items: center;
    position: relative;
    overflow: visible;
    padding: 0 24px;
    gap: 0 !important;
    isolation: isolate; /* 스택 컨텍스트 명확화 */
    touch-action: pan-y; /* 모바일 세로 스크롤 우선 */
  }
  .projects-section.white-theme .project-card {
    width: clamp(520px, 70vw, 880px) !important;
    left: auto !important;
    margin: 0 auto;
    position: relative;
  }
  .projects-section.white-theme .project-card + .project-card { margin-top: calc(-1 * var(--web-card-overlap)); }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(1) { margin-top: 0; z-index: 1; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(2) { z-index: 2; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(3) { z-index: 3; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(4) { z-index: 4; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root { --web-card-overlap: 55%; }
  .projects-section.white-theme .project-card { width: clamp(480px, 72vw, 760px) !important; }
}

@media (min-width: 769px) and (max-width: 900px) {
  :root { --web-card-overlap: 65%; }
  .projects-section.white-theme .project-card { width: clamp(420px, 78vw, 680px) !important; }
}

/* 카드 위 안내 텍스트 (오버레이 제거 후 페이지 흐름 기준) */
.projects-intro {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 0 1.5rem 0; /* 카드와 간격 */
}
.projects-intro p {
    font-size: clamp(1.6rem, 3vw, 2.2rem); /* 2업 */
    line-height: 1.5;
    text-align: center;
    color: rgba(0,0,0,0.9);
    font-weight: 700;
}

/* 모바일: 프로젝트 인트로 좌우 여백 확장 및 가독성 보정 */
@media (max-width: 768px) {
    .projects-intro { padding: 0 24px; }
    .projects-intro p {
        font-size: 1.2rem; /* 모바일 가독성 */
        line-height: 1.6;
        text-align: left; /* 모바일에서는 좌측 정렬로 가독성 향상 */
        word-break: keep-all;
    }
    /* 프로젝트 섹션 높이 강제 최소값 제거로 하단 공백 축소 */
    .projects-section { min-height: auto; }
    /* 프로젝트 페이지 하단 CTA 상단 패딩 축소로 간격 제거 */
    .cta-section.project-cta-bottom { padding: 32px 0 56px; }
    /* 프로젝트 하단 CTA 타이틀 모바일 사이즈 */
    .project-cta-bottom .section-title {
        font-size: clamp(1.0rem, 4.8vw, 1.5rem);
        line-height: 1.3;
        word-break: keep-all;
        white-space: normal;
        max-width: 90vw;
        margin: 0 auto;
        text-align: center;
        position: relative; /* 닷을 우하단에 고정하기 위한 기준 */
        text-wrap: balance;
    }
    /* '...시작' 텍스트 바로 옆 우하단에 점 고정 */
    .project-cta-bottom .section-title .cta-end { position: relative; display: inline-block; white-space: nowrap; }
    .project-cta-bottom .section-title .cta-end .blinking-dot {
        position: absolute;
        right: -12px; /* 글자 바로 오른쪽 */
        bottom: 12px; /* 더 위로 올림 */
        top: auto !important; /* 기본 .blinking-dot의 top 오프셋 무효화 */
        margin: 0;
    }
}

/* 모바일: 컨택트 서브타이틀 한 줄 고정 + 자동 크기 조정 보조(CSS측) */
@media (max-width: 768px) {
  .contact-section .section-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-size: clamp(0.95rem, 3.8vw, 1.25rem);
    text-align: center;
    max-width: 92vw;
    margin: 0 auto;
  }
}

/* 프로젝트 섹션 진입 시 텍스트 → 카드 순차 등장 */
.projects-cards-container .project-card.fade-in-up { transition-delay: 0.2s; }
.projects-cards-container .project-card.fade-in-up:nth-child(2) { transition-delay: 0.4s; }
.projects-cards-container .project-card.fade-in-up:nth-child(3) { transition-delay: 0.6s; }
.projects-cards-container .project-card.fade-in-up:nth-child(4) { transition-delay: 0.8s; }

/* 두번째 히어로 오버레이 제거됨 */

/* 페이드 상태 클래스 */
/* 상태 클래스 미사용: 페이드 기능 제거 */

.projects-section.white-theme .projects-hero-title {
    color: var(--text-primary);
}

.projects-section.white-theme .project-card {
    background: var(--bg-primary);
    border: none;
}
/* 프로젝트 카드: 두꺼운 하얀색 아웃라인 */
.projects-section.white-theme .project-card {
    outline: 4px solid #ffffff !important;
    outline-offset: 0;
}

/* 겹침 연출을 방해하는 기존 좌표/변환 규칙 무력화 */
@media (max-width: 1200px) {
  .projects-section.white-theme .project-card:first-child,
  .projects-section.white-theme .project-card:nth-child(2),
  .projects-section.white-theme .project-card:nth-child(3) {
      left: auto !important;
      transform: none !important;
  }
}

.projects-section.white-theme .project-card-content {
    padding: 4rem 5rem;
}

.projects-section.white-theme .project-title,
.projects-section.white-theme .project-subtitle {
    color: var(--text-primary);
}

.projects-section.white-theme .project-description {
    color: var(--text-secondary);
}

.projects-section.white-theme .projects-cards-container {
    /* 가로 일렬 배치 */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.25rem;           /* 카드 간격 확대 */
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    padding: 0 1rem;        /* 좌우 여백 */
    padding-left: 6rem;     /* 좌측으로 더 당김 */
    touch-action: pan-y; /* 모바일에서 세로 스크롤 우선 */
}

/* 데스크톱에서도 가로 일렬 유지 + 4장 고정 노출 계산식 적용 */
@media (min-width: 1024px) {
  .projects-section.white-theme .projects-cards-container {
    display: grid !important;
    grid-template-columns: repeat(var(--cards-per-row), minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 1rem) !important;
    padding-left: clamp(2rem, 6vw, 6rem);
    padding-right: clamp(1rem, 3vw, 2rem);
  }
  .projects-section.white-theme .project-card {
    width: auto !important;
    max-width: none !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
  .projects-section.white-theme .project-card + .project-card { margin-top: 0 !important; }

  /* 데스크톱: 카드 레이어 순서 강제(프롬터→뉴웨이브로 갈수록 상위) */
  .projects-section.white-theme .projects-cards-container > .project-card { position: relative; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(1) { z-index: 1 !important; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(2) { z-index: 2 !important; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(3) { z-index: 3 !important; }
  .projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(4) { z-index: 4 !important; }
}


/* 1024-1200 구간에서도 4장 고정 유지(열 방향/폭 강제) */
@media (min-width: 1024px) and (max-width: 1200px) {
  .projects-section.white-theme .projects-cards-container {
    display: grid !important;
    grid-template-columns: repeat(var(--cards-per-row), minmax(0, 1fr));
  }
}

/* 데스크톱: NEW WAVE 우측 페이드 아웃 제거 (요청) */

/* (reverted) 데스크톱 프로젝트 섹션 여백/스크롤 오버라이드 제거 */


/* 하단 섹션 전용 초기 카드 위치 (removed with #about-tools) */
/* #about-tools .project-card:first-child {
    left: 50%;
    transform: translateX(-50%);
}

#about-tools .project-card:nth-child(2) {
    left: calc(50% + 1200px + 32px);
    transform: translateX(-50%);
}

#about-tools .project-card:nth-child(3) {
    left: calc(50% + 2464px);
    transform: translateX(-50%);
} */

/* Project Card Layout with Image */
.project-card-layout {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 100%;
    width: 100%;
}

.project-card-image {
    flex: 0 0 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 540px;
    background: #f5f5f5;
    overflow: hidden;
}

.project-card-image img {
    width: 100%;
    height: 540px;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.project-card-image img:not([src]), 
.project-card-image img[src=""] {
    opacity: 0;
}

.project-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Profile Info Styles */
.profile-info {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    text-align: left;
}

.profile-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.profile-title {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500;
}

/* Responsive adjustments for card layout */
@media (max-width: 768px) {
    .project-card-layout {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .project-card-image {
        flex: 0 0 auto;
        width: 240px;
        min-height: 360px;
    }
    
    .project-card-image img {
        height: 360px;
    }
}



.projects-hero-title {
    font-size: 4rem; /* 더 크게 */
    font-weight: 900;
    color: #000000; /* 검정색으로 변경 */
    text-align: center;                  /* 가운데 정렬 유지 */
    margin-bottom: 1rem;                 /* 하단 간격 */
    letter-spacing: var(--letter-spacing-semi-tight);
    display: block;                      /* 인라인 박스 제거 */
    border: none;                        /* 박스(아웃라인) 제거 */
    padding: 0;                          /* 내부 여백 제거 */
    will-change: opacity, transform;
}

/* 프로젝트 페이지 히어로 설명문 */
.projects-hero-desc {
    font-size: 1.5rem; /* 1단계 크게 */
    line-height: 1.6;
    color: #000000; /* 타이틀과 동일한 검은색 */
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 800px;
    font-weight: 700;
}

/* 프로젝트 섹션 상단 여백 확장: 타이틀 위 공간 확보 */
.projects-section.white-theme {
    padding-top: 0; /* 히어로 하단 화살표와 즉시 맞닿도록 */
}

/* 매우 얇고 연한 카드 아웃라인 공통 적용 */
.promise-card,
.promise-card.image-only,
.promise-card.image-only.with-overlay,
.values-section .promise-card.image-only.with-overlay,
.cta-section .promise-card,
.statement-card {
    border: 0.5px solid var(--border-color);
}

/* 프로젝트 카드(화이트 테마)에도 라이트 보더 적용 */
.projects-section.white-theme .project-card {
    background: transparent !important; /* 이미지가 보이도록 */
    border: none;
    height: auto;
    aspect-ratio: 3 / 4;
    width: calc(var(--card-width) * 0.80) !important; /* 살짝 더 축소 */
    position: relative;
    overflow: hidden;
    flex: 0 0 auto; /* 기존 카드가 줄어들지 않도록 고정 */
}

/* 프로젝트 카드의 CTA 버튼만 숨김 */
.projects-section .project-link { display: none !important; }

.projects-hero-title-dot {
    color: var(--orange);
    font-weight: 900;
}

.projects-cards-container {
    position: relative;
    margin: 0;
    width: 100%;
    height: auto; /* 세로 스택 콘텐츠 높이에 맞춤 */
    contain: layout paint; /* 레이아웃/페인트 격리로 성능 개선 */
}

.project-card {
    position: relative; /* 절대배치 해제 */
    width: min(100%, var(--card-width));
    height: auto;
    background: #1d1d1f;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 90vw;
    border: 1px solid #333333;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* 캐러셀 좌표 무효화 (프로젝트 페이지 세로 스택) */
.projects-section.white-theme .project-card:first-child,
.projects-section.white-theme .project-card:nth-child(2),
.projects-section.white-theme .project-card:nth-child(3) {
    left: auto !important;
}

/* 반응형 디자인 */
@media (max-width: 1400px) {
    .project-card {
        width: 95vw;
        height: auto;
        min-height: 0; /* 비율에 맞춰 자동 높이 */
    }
}

@media (max-width: 768px) {
    .project-card {
        width: 95vw;
        min-height: 0;
    }
    
    .project-card-content {
        will-change: opacity, transform;
        backface-visibility: hidden;
    }
    
    .project-title {
        font-size: 2.5rem;
    }
    
    .project-subtitle {
        font-size: 1.4rem;
    }
    
    .project-description {
        font-size: 1.2rem;
    }
}

/* 모바일: 카드가 서로 겹쳐 보이는 오버레이 연출 */
@media (max-width: 768px) {
    .projects-section.white-theme .projects-cards-container {
        display: flex;
        flex-direction: column;
        gap: 0; /* 겹침 연출에서는 간격 제거 */
        padding: 0 1rem; /* 좌우 여백 유지 */
        overflow-x: hidden; /* 모바일 가로 스크롤 방지 */
    }
    .projects-section.white-theme .project-card {
        position: relative;
        width: 95vw;
        max-width: 600px;
        align-self: center;
    }
    .projects-section.white-theme .project-card + .project-card {
        margin-top: -40px; /* 위 카드와 겹치도록 음수 마진 */
    }
    .projects-section.white-theme .project-card:nth-child(1) { z-index: 3; }
    .projects-section.white-theme .project-card:nth-child(2) { z-index: 2; }
    .projects-section.white-theme .project-card:nth-child(3) { z-index: 1; }
}

@media (max-width: 480px) {
    .projects-section.white-theme .project-card + .project-card {
        margin-top: -32px; /* 소형 디바이스는 겹침 정도 살짝 완화 */
    }
}

@media (max-width: 480px) {
    .project-card {
        width: 98vw;
        min-height: 0;
    }
    
    .project-card-content {
        padding: 2rem 2rem;
    }
    
    .project-title {
        font-size: 2rem;
    }
    
    .project-subtitle {
        font-size: 1.2rem;
    }
    
    .project-description {
        font-size: 1rem;
    }
}





.project-card-content {
    padding: 1.5rem 2rem; /* 패딩 상향 */
    text-align: left; /* 좌측 정렬 */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 상단 정렬 */
    align-items: flex-start; /* 좌측 정렬 */
}

/* Projects: 카드 내부 패딩 적용(화이트 테마) */
.projects-section.white-theme .project-card-content { padding: 1.5rem 2rem !important; }

.project-title {
    font-size: 3rem; /* 1사이즈 다운 */
    font-weight: 900;
    color: #ffffff !important; /* 화이트 텍스트 강제 */
    margin-bottom: 1.5rem;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.2;
}

/* 프로젝트 타이틀 줄에 아이콘 정렬 */
/* 타이틀-아이콘 행: 모바일에서는 같은 줄 우측 정렬, 데스크톱은 코너 고정 */
@media (max-width: 768px) {
  .project-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      width: 100%;
  }
  .project-title-row .project-title { margin-bottom: 0; }
  .project-title-row .project-corner-icon { position: static; width: 32px; height: 32px; }
}
@media (min-width: 769px) {
  .project-title-row { display: block; }
  .project-title-row .project-corner-icon {
      position: absolute; right: 1rem; bottom: 1rem; width: 38px; height: 38px;
  }
}

/* 레이아웃 기반 아이콘 배치: 컨테이너 방향 클래스에 따라 제어 */
.projects-cards-container.is-horizontal .project-title-row { display: block; }
.projects-cards-container.is-horizontal .project-title-row .project-corner-icon {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    right: auto;
    width: 38px; height: 38px;
}

.projects-cards-container.is-vertical .project-title-row {
    display: flex !important;
    align-items: center;
    justify-content: flex-start; /* 제목을 기준으로 좌측 정렬 */
    width: 100%;
    gap: 0.75rem;
}
.projects-cards-container.is-vertical .project-title-row .project-title { margin-bottom: 0; }
.projects-cards-container.is-vertical .project-title-row .project-corner-icon {
    position: static !important;
    width: 32px; height: 32px;
    margin-left: auto; /* 카드 우측 끝에 정렬(모바일과 동일한 느낌) */
}

/* NEW WAVE(4번째 카드) 아이콘 제거 */
.projects-section.white-theme .projects-cards-container > .project-card:nth-of-type(4) .project-corner-icon { display: none !important; }

.project-subtitle {
    font-size: 1.6rem; /* 1사이즈 다운 */
    font-weight: 700;
    color: #ffffff !important; /* 화이트 텍스트 강제 */
    margin-bottom: 1rem;
    line-height: 1.4;
    letter-spacing: var(--letter-spacing-semi-tight);
}

.project-subtitle-dot,
.project-title-dot {
    color: var(--orange);
    font-weight: 900;
}

.project-description {
    font-size: 1.4rem;
    line-height: 1.5;
    color: #86868b;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.project-features {
    margin-bottom: 2rem;
}

.feature-item {
    margin-bottom: 1rem;
}

.feature-item h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    padding-left: 1.5rem;
    background: var(--bg-primary);
    padding: 0.75rem 1rem 0.75rem 1.5rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--orange);
}

.feature-item h4::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--orange);
    font-weight: 700;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.tech-tag {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    min-width: 120px;
    text-align: center;
}

.tech-tag:hover {
    background: var(--orange);
    color: white;
    border-color: var(--orange);
}

.project-link {
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    position: relative;
    font-size: 1.2rem;
    padding: 0.75rem 1.5rem;
    background: var(--orange);
    cursor: pointer;
}

.project-link:hover {
    filter: brightness(1.1);
}

.project-link:hover {
    color: white;
}

.project-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-link:hover::after {
    transform: scaleX(1);
    transform-origin: right;
}

/* 임시 썸네일 이미지 */
.project-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    margin-top: 1rem;
}

/* 카드 배경 컬러 (각 카드별) */
/* 카드 배경 이미지를 CSS로 지정 */
.projects-section.white-theme .project-card.bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--card-image) center/cover no-repeat;
    filter: none !important;
    opacity: 1 !important;
}

/* 그레이 그라데이션 카드 배경 (배경 이미지 없이) */
.projects-section.white-theme .project-card.bg-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #f2f2f2 0%, #e6e6e6 100%);
}
/* NEW WAVE(그라데이션 카드) 아웃라인/그림자 제거 */
.projects-section.white-theme .project-card.bg-gradient { border: none !important; box-shadow: none !important; }
/* 오버레이 텍스트 가독성 */
.projects-section.white-theme .project-card .overlay {
    position: relative;
    z-index: 1;
    /* 카드 상단에서 텍스트를 더 위로 조정(한 단계 추가) */
    padding-top: clamp(2.5rem, 14%, 6rem) !important;
}

/* 카드 내용이 배경 위에서 충분히 띄도록 */
.projects-section.white-theme .project-card { border: none; }

.project-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}



.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.card-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.status-badge {
    background: var(--orange);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 120px;
    text-align: center;
}

.card-content p {
    color: #000000;
    font-size: 1rem;
    text-align: center;
    padding: 2rem 0;
    background: var(--bg-primary);
    border-radius: 12px;
    margin: 0;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .project-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .project-title {
        font-size: 2.5rem;
    }
    
    .project-subtitle {
        font-size: 1.25rem;
    }
}

/* Section Styles */
section {
    padding: 100px 0;
}

.section-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: var(--letter-spacing-semi-tight);
}
/* Contact: 물음표 아이콘 스타일 */
/* Contact: 문장형 끝점 주황 점 */
.ending-dot::after {
    content: '';
    display: inline-block;
    width: 0.22em; /* 조금 축소 */
    height: 0.22em;
    background: var(--orange);
    border-radius: 50%;
    margin-left: 0.25rem;
    position: relative;
    top: 0.04em; /* 약간 밑으로 이동 */
    animation: pulseDot 1.4s ease-in-out infinite;
    will-change: transform;
}

@keyframes pulseDot {
  0% { transform: scale(1); }
  50% { transform: scale(1.26); }
  100% { transform: scale(1); }
}

/* 깜빡이는 주황색 닷 애니메이션 */
.blinking-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: var(--orange);
    border-radius: 50%;
    margin-left: 0.25rem;
    animation: bounceDot 1.8s cubic-bezier(0.34, 0.74, 0.27, 0.99) infinite;
    will-change: transform;
    transform-origin: center bottom;
    position: relative;
    top: -3px; /* 위치 살짝 위로 */
}

/* 섹션 제목 주황색 마침표 */
.section-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--orange);
    border-radius: 50%;
    margin-left: 0.5rem;
}

/* 섹션 제목 주황색 텍스트 마침표 */
.section-dot-text {
    color: var(--orange);
    font-weight: 900;
}

@keyframes bounceDot {
    0% {
        transform: translateY(-8px) scale(1);
    }
    45% {
        transform: translateY(8px) scale(1.05, 0.95); /* 바닥에서 살짝 찌그러짐 */
    }
    60% {
        transform: translateY(6px) scale(0.98, 1.02); /* 반발 직후 복원 */
    }
    100% {
        transform: translateY(-8px) scale(1);
    }
}

.section-subtitle {
    font-size: 1.25rem;
    text-align: center;
    color: #000000;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.highlight-underline {
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.highlight-underline::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: var(--underline-width, 0%);
    height: 2px;
    background: var(--orange);
    transition: width 0.3s ease-out;
    border-radius: 1px;
}

/* Vision & Mission */
.vision-mission {
    background: var(--bg-secondary);
    padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 6vw, 80px);
    position: relative; /* 하단 화살표 절대 배치 기준 */
}

/* About 전용 화이트 페이지 배경 */
.white-page {
    background: #ffffff;
}
.white-page .vision-mission {
    background: #ffffff;
}

/* About 섹션 타이틀 - 문구 카드와 동일한 사이즈/컬러 */
.vision-mission .section-title {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}

/* 큰 사이즈 통일용 클래스 */
.big-promise {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    color: rgba(0,0,0,0.85);
}

/* About 섹션 서브타이틀 폰트 사이즈 2배 확대 */
.vision-mission .section-subtitle {
    font-size: 2.5rem;
    text-align: left;
}



.promise-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 기본 */
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-bottom: clamp(2rem, 4vw, 4rem);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    justify-items: stretch;
}

@supports (grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) {
    .vision-mission .promise-cards {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* 비전/미션 카드 중앙 정렬 및 고정 폭 트랙으로 과도한 늘어남 방지 */
.vision-mission .promise-cards {
    grid-template-columns: repeat(auto-fit, minmax(400px, 540px));
    justify-content: center;
    justify-items: stretch; /* 트랙 너비 채우기 (절대배치 콘텐츠 폭 0 문제 방지) */
    max-width: 1280px;
}

/* 카드가 트랙 폭을 가득 채우도록 보장 */
.vision-mission .promise-cards > .promise-card { width: 100%; }

/* 간격은 row-gap으로 관리 */
.promise-cards > .promise-card { margin: 0; }

.promise-card {
    background: transparent; /* 박스 내부 배경 제거 */
    padding: 3rem;
    border: 0; /* 어바웃 카드 아웃라인 제거 */
    width: auto; /* 그리드 폭 사용 */
}

.promise-card.image-only { padding: 0; border: 0; }

.promise-image { margin: 0; }

.promise-card.image-only .promise-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* 정사각형 비율 */
    overflow: hidden;
    background: transparent; /* 배경 제거 */
}

.promise-card.image-only .promise-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 카드 전체 채우기 */
    display: block;
    filter: none; /* 명도 정상화 */
}

.promise-card.image-only .promise-image img { border-radius: 0; }

/* 비전/미션 하단 미니 카드 3개 한 줄 레이아웃 */
.mini-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0; /* 카드 간격 제거 */
    align-items: stretch;
}
.mini-cards > .promise-card { margin: 0; }
.values-section .container { padding-left: 0; padding-right: 0; max-width: 1100px; margin: 0 auto; }
.mini-cards .overlay-text { padding: 0.5rem; }
.mini-cards .promise-card {
    transform: none; /* 스케일 제거로 좌우 간격 시각효과 축소 */
    transform-origin: center top;
}
.mini-cards .promise-card.image-only.with-overlay { aspect-ratio: 4 / 3; } /* 4:3 비율 */
.mini-cards .overlay-text h3 { font-size: 2rem; }
.mini-cards .overlay-text p { font-size: 1.3rem; line-height: 1.5; }

/* 모바일에서 비전/미션과 동일하게 세로 1열로 자동 배치 */
@media (max-width: 768px) {
    .values-section .mini-cards {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* 이미지 카드 위 텍스트 오버레이 (MISSION) */
.promise-card.image-only.with-overlay {
    position: relative;
    aspect-ratio: 1 / 1; /* 컨테이너 자체 비율 정사각형 */
    overflow: hidden;
}
.promise-card.image-only.with-overlay .overlay-text { position: absolute; inset: 0; }

/* 비전/미션(상단) 카드 아웃라인 표시: 항상 표시 */
.vision-mission .promise-card.image-only.with-overlay.no-bg.text-deep-gray { border: 0 !important; }

/* 특정 카드만 4:3 비율로 오버라이드 */
.promise-card.ratio-4-3.image-only .promise-image { aspect-ratio: 4 / 3; }
.promise-card.ratio-4-3.image-only.with-overlay { aspect-ratio: 4 / 3; }
/* 4:1 슬림 비율 (섹션 높이 약 1/3로 축소) */
.promise-card.ratio-4-1.image-only .promise-image { aspect-ratio: 4 / 1; }
.promise-card.ratio-4-1.image-only.with-overlay { aspect-ratio: 4 / 1; }
/* 2:1 비율 (현 4:1 대비 세로 2배) */
.promise-card.ratio-2-1.image-only .promise-image { aspect-ratio: 2 / 1; }
.promise-card.ratio-2-1.image-only.with-overlay { aspect-ratio: 2 / 1; }
.promise-card.ratio-3-4.image-only .promise-image { aspect-ratio: 3 / 4; }
.promise-card.ratio-3-4.image-only.with-overlay { aspect-ratio: 3 / 4; }
/* 16:9 비율 */
.promise-card.ratio-16-9.image-only .promise-image { aspect-ratio: 16 / 9; }
.promise-card.ratio-16-9.image-only.with-overlay { aspect-ratio: 16 / 9; }
.promise-card.image-only.with-overlay { border: 0; }
/* 값 카드 섹션에도 동일 아웃라인 유지 */
.values-section .promise-card.image-only.with-overlay { border: 0; }
.bg-white { background: #ffffff !important; }
.bg-gray { background: #f5f5f7 !important; }

/* 어바웃 섹션(vision-mission/values/image-overlay/cta) 카드 보더 가시성 강화 */
.vision-mission .promise-card,
.values-section .promise-card,
.image-overlay-section .promise-card,
.cta-section .promise-card {
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.12);
}

/* 다크 테마에서의 보더 가시성 강화 */
[data-theme="dark"] .vision-mission .promise-card,
[data-theme="dark"] .values-section .promise-card,
[data-theme="dark"] .image-overlay-section .promise-card,
[data-theme="dark"] .cta-section .promise-card {
    border-color: rgba(255, 255, 255, 0.12);
}

/* 카드 행 사이 구분 텍스트 (그리드 전체 폭) */
.grid-divider {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.5;
    color: rgba(0,0,0,0.85);
    font-weight: 700;
    margin: 0.5rem 0; /* 상하 간격 확보 */
}

/* 그리드 안에서 타이틀이 전체 열을 차지하도록 */
.grid-span {
    grid-column: 1 / -1;
}

/* 섹션 헤드라인 2배 확대 */
.headline-xl {
    font-size: 10rem; /* 2배 더 확대 (기존 5rem → 10rem) */
    line-height: 1.05;
}

/* 데스크톱 우선: 웹 환경에서 더욱 크게 */
.section-title.headline-xl {
    font-size: 6rem;
    line-height: 1.08;
}

/* 중간 슬로건 섹션 기본 여백 (데스크톱 우선) */
.slogan-section {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
}
.slogan-section .slogan-video {
    position: absolute; inset: 0; z-index: 0;
}
/* 슬로건 프리롤 캔버스 제거됨 */
.slogan-section .slogan-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.slogan-section .slogan-overlay { position: absolute; inset: 0; z-index: 0; background: none; }

/* 슬로건 섹션 구분용 라이트 아웃라인 */
.slogan-section .container {
    border: none;
    border-radius: 12px;
    background: transparent; /* 투명 처리 */
    backdrop-filter: none;
    padding: 60px 40px;
    position: relative;
    z-index: 2; /* 페이드 오버레이 위로 */
}

/* 상단/하단 페이드 그라데이션: 이미지 외곽 자연스럽게 처리 */
.slogan-section::before,
.slogan-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 200px;
    pointer-events: none;
    z-index: 1; /* 비디오보다 위 */
}
.slogan-section::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.slogan-section::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

/* 슬로건 타이틀 크기(현 6rem → 2/3 = 4rem) */
.slogan-section .section-title.headline-xl {
    font-size: 4rem;
    line-height: 1.1;
}

/* 모바일: 슬로건 2줄 강제 및 크기/행간 조정 */
@media (max-width: 768px) {
    .slogan-section .section-title.headline-xl {
        font-size: 2rem; /* 모바일에서 축소 */
        line-height: 1.25;
        word-break: keep-all;
        white-space: normal;
    }
    .slogan-section .section-title.headline-xl .mobile-br { display: inline; }
}

@media (max-width: 480px) {
    .slogan-section .section-title.headline-xl {
        font-size: 1.75rem; /* 더 작은 화면에서 추가 축소 */
        line-height: 1.3;
    }
}

.highlight-ai {
    color: var(--orange);
}
.promise-card.image-only.with-overlay .promise-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(var(--aboutHeroScale, 1));
    transform-origin: center center;
    transition: none;
}
/* About hero drag-fill: 좌우 여백을 드래그 비율에 따라 축소 */
.image-overlay-section .promise-card.image-only.with-overlay.hero-fill {
    position: relative;
    width: 100dvw; /* 100vw → 100dvw: 모바일 가로 오버플로우 방지 */
    max-width: 100dvw;
    height: 100vh;
    aspect-ratio: auto !important;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;
    transition: none;
}

/* 스크롤 진입 시 풀 히어로 확장 + 유지 */
/* expand-fixed 상태 제거: 항상 풀스크린 유지 */
/* About overlay: smooth expand to full hero on entry */
/* about expand-hero 제거됨 */
/* 어바웃 파티클 캔버스 */
.particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.about-terrain-overlay { z-index: 1; opacity: 0; transition: opacity 1s ease; }
/* aboutFlowPrefade 제거됨 */

/* 모바일: '생각이 곧 행동이...' 섹션 점 직사각형 캔버스 숨김 */
@media (max-width: 768px) {
    #aboutParticles { display: none !important; }
}

.promise-card.image-only.with-overlay .overlay-text {
    position: absolute;
    inset: 0;
    padding: 1.5rem;
    color: #ffffff;
    pointer-events: none; /* 텍스트가 드래그 방해하지 않도록 */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.promise-card.image-only.with-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.35) 100%);
    z-index: 1;
}

/* 배경 그라데이션 제거 변형 */
.promise-card.image-only.with-overlay.no-bg::after {
    background: none;
}

/* 텍스트를 어둡게 표시 (카드 배경 제거와 함께 사용) */
.promise-card.image-only.with-overlay.text-dark .overlay-text {
    color: #000000;
    z-index: 3; /* 텍스트 레이어 최상위 보장 */
}
.promise-card.image-only.with-overlay.text-dark .overlay-text h3,
.promise-card.image-only.with-overlay.text-dark .overlay-text p {
    color: #000000 !important; /* 내부 요소까지 검정색 강제 */
}

.promise-card.image-only.with-overlay .overlay-text h3 {
    margin: 0 0 0.5rem 0;
    color: var(--orange);
}

.promise-card.image-only.with-overlay .overlay-text p {
    margin: 0;
    color: rgba(255,255,255,0.95);
    font-size: 1.4rem;
    line-height: 1.6;
}

/* 임시 아이콘 스타일 (카드 제목 상단) */
.card-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 0.75rem;
    color: var(--orange);
    opacity: 0.9;
}

/* 값 카드: 아이콘을 원형 오렌지 닷으로 대체 */
.card-dot {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--orange);
    margin-bottom: 0.5rem;
}

/* 값 카드: 이미지 아이콘 스타일 (실행 우선 전용) */
.card-icon-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 0.75rem;
}

/* 오버레이 대형 텍스트 (2배) */
.overlay-xl p {
    font-size: 2.8rem !important;
    line-height: 1.3 !important;
}

/* 모바일: 어바웃 오버레이 텍스트 4줄 강제 보이기 위한 축소 */
@media (max-width: 768px) {
    .image-overlay-section .overlay-text.overlay-xl p {
        font-size: 2.2rem !important; /* 살짝 축소 */
        line-height: 1.5 !important;
        word-break: keep-all;
        white-space: normal;
    }
    .image-overlay-section .overlay-text.overlay-xl p .mobile-br { display: inline; }
}

@media (max-width: 480px) {
    .image-overlay-section .overlay-text.overlay-xl p {
        font-size: 2rem !important; /* 살짝 축소 */
        line-height: 1.55 !important;
    }
}

/* 오버레이 제목 크기 보강 (LAB 카드 제목 용도) */
.overlay-xl h3 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

/* 푸터 위 CTA 섹션 */
.cta-section {
    padding: 120px 0 80px;
    text-align: center;
}
.cta-subtitle-tight {
    margin: 0 0 0.25rem 0; /* 제목 위로 바짝 붙임 */
    font-size: clamp(0.85rem, 1.2vw, 1rem); /* 2사이즈 줄임 */
    font-weight: 700; /* 볼드 */
    color: rgba(0,0,0,0.85);
}
.cta-section .section-title {
    font-size: 3rem;
}

/* 순차 점등 점 애니메이션 (...)
   접근성: aria-hidden으로 보조기기 노출 방지 */
.seq-dots { display: inline-flex; gap: 6px; margin-left: 6px; }
.seq-dots .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--orange); opacity: 0.25;
    animation: seqBlink 1.2s infinite ease-in-out;
}
.seq-dots .dot:nth-child(1) { animation-delay: 0s; }
.seq-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.seq-dots .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes seqBlink {
    0%, 20%   { opacity: 0.25; transform: scale(0.9); }
    30%, 60%  { opacity: 1;    transform: scale(1); }
    70%, 100% { opacity: 0.25; transform: scale(0.9); }
}

/* CTA 하단 카드 성격 정의: 라이트 테두리와 중앙 정렬 유지 */
.cta-section .promise-cards {
    margin-top: 2rem;
    /* 프로젝트 카드 단독일 때 중앙 정렬 */
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
}
.cta-section .promise-cards > .promise-card { width: min(100%, 900px); }
.cta-section .promise-card {
    border: 0.5px solid var(--border-color);
}

/* 어바웃/프로젝트 CTA: 카드 폭 통일(절반 크기) */
.cta-section #project,
.cta-section #contact {
    width: min(100%, 450px);
}

/* 어바웃 하단 PROJECT 카드만 아웃라인 제거 */
.cta-section #project {
    border: 0.5px solid var(--border-color); /* 보더 복구 */
    width: min(100%, 700px); /* 가로로 더 길게 */
}

/* CTA 아이콘 행 스타일 */
.cta-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 0.25rem 0 1.5rem; /* 히어로에서 헤드라인과 간격 확대 */
}
/* 프로젝트 히어로: 아이콘-헤드라인 간격 4rem */
.projects-hero .cta-icons { margin-bottom: 4rem; }
.cta-icons img {
    width: 45px;   /* 56px의 80% */
    height: 45px;  /* 56px의 80% */
    object-fit: contain;
    /* 우·하단으로만 떨어지는, 덜 스무스한 섀도우 */
    filter: grayscale(0)
            drop-shadow(6px 8px 2px rgba(0, 0, 0, 0.10))   /* 살짝 좌·위로 */
            drop-shadow(2px 3px 8px rgba(0, 0, 0, 0.16));  /* 보조 섀도우도 동일 방향 조정 */
    opacity: 0.9;
    transform: translate(-4px, -4px); /* 살짝 좌상단으로 이동 */
}

/* 히어로 섹션 아이콘은 기존 사이즈/위치 유지 */
.projects-hero .cta-icons img {
    width: 56px;
    height: 56px;
    transform: none;
}

/* CTA 설명 텍스트 강화 */
.cta-desc {
    font-size: 3rem; /* overlay-xl h3와 동일 스펙 */
    line-height: 1.2;
    margin: 0 0 0.75rem 0;
    color: var(--orange);
    font-weight: 900;
    letter-spacing: var(--letter-spacing-semi-tight);
}
/* 텍스트 딥그레이 강제 규칙을 무시하고 CTA 설명 색상을 유지 */
.promise-card.image-only.with-overlay .overlay-text .cta-desc {
    color: var(--orange) !important;
}
/* 하단 PROJECT 카드 전용: 상위 규칙을 모두 무시하고 사이즈/컬러 강제 */
.cta-section #project .overlay-text .cta-desc {
    font-size: 2rem !important; /* 2단계 다운 */
    line-height: 1.3 !important;
    color: var(--orange) !important;
    font-weight: 500 !important; /* 볼드 제거 */
}

/* 아래 카드: 검정 블록으로 텍스트 수용 */
.promise-card.black-block {
    background: #ffffff; /* 화이트로 변경 */
    color: #000000;
    padding: 1.25rem 1.5rem; /* 더 낮춘 패딩 */
}

.promise-card.black-block h3 { color: var(--orange); margin-bottom: 0.5rem; }
.promise-card.black-block p { color: #000000; font-size: 1.7rem; line-height: 1.6; }

/* 섹션 소개 문구용 카드 */
.statement-card {
    background: transparent; /* 배경 제거 */
    padding: 2rem;
    border: 0;
}
.statement-card.full-span {
    grid-column: 1 / -1; /* 가로 풀사이즈 */
}
.statement-card .statement-text {
    margin: 0;
    font-size: 2.5rem; /* 기존 2배 크기 유지 */
    text-align: center; /* 중앙 정렬 */
    font-weight: 800; /* 볼드체 */
    color: rgba(0, 0, 0, 0.85); /* 명도를 살짝 높인 컬러 */
}

/* VISION 텍스트 카드 - 이미지 위 텍스트 오버레이 */
.promise-card.with-right-image {
    position: relative;
    padding: 0;
    aspect-ratio: 4 / 3; /* 카드 비율 고정 */
    overflow: hidden;
}

.promise-card.with-right-image .promise-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.promise-card.with-right-image .promise-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promise-card.with-right-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
    z-index: 1;
}

.promise-card.with-right-image .promise-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem;
    z-index: 2;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
}

.promise-card.with-right-image .promise-text p {
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 768px) {
    .promise-card.with-right-image {
        aspect-ratio: 4 / 5; /* 모바일에서는 세로 비율을 약간 늘려 가독성 향상 */
    }
}

.promise-card h3 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: var(--orange);
    letter-spacing: var(--letter-spacing-tight); /* 공통 자간 규칙 */
}

.promise-card p {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 0;
    letter-spacing: var(--letter-spacing-tight); /* 공통 자간 규칙 */
}



@media (max-width: 768px) {
    .promise-cards {
        grid-template-columns: 1fr; /* 모바일에서는 한 줄 */
        column-gap: 0;
        row-gap: 0; /* 세로 간격도 마진으로 제어 */
    }
    /* 기본: 2번째부터 간격 2rem */
    .promise-cards > .promise-card:nth-child(n+2) { margin-top: 2rem; }
    /* 모바일에서는 비전 바로 아래(2번째) 카드는 붙이기 */
    .promise-cards > .promise-card:nth-child(2) { margin-top: 0; }
    .promise-card { width: 100%; }
    .promise-card h3 {
        font-size: 1.8rem;
    }
    .promise-card p {
        font-size: 1.35rem;
    }
}

.core-principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.principle-item {
    background: var(--bg-primary);
    padding: 2rem;
    border-radius: 0;
    box-shadow: none;
    border: none;
    position: relative;
    overflow: hidden;
}

.principle-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--orange);
    opacity: 0.15;
    margin-bottom: 1.5rem;
    line-height: 1;
}

.principle-content h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 700;
}

.principle-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 0;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .promise-cards {
        grid-template-columns: 1fr;
        max-width: 700px;
        gap: 2rem;
    }
    
    .promise-card {
        padding: 2.5rem;
    }
    
    .promise-card h3 {
        font-size: 1.6rem;
        margin-bottom: 1.25rem;
    }
    
    .promise-card p {
        font-size: 1.2rem;
    }
    
    .core-principles {
        grid-template-columns: 1fr;
        max-width: 600px;
        gap: 2rem;
    }
    
    .principle-item {
        padding: 2rem;
    }
}

.core-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.value-item {
    text-align: center;
    padding: 2rem;
}

.value-number {
    width: 48px;
    height: 48px;
    background: var(--orange);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}

.value-item h4 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #1d1d1f;
}

.value-item p {
    color: #000000;
}

/* Labs Section */
.labs-section {
    background: var(--bg-primary);
}

.labs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}

.lab-card {
    background: var(--bg-primary);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}



.lab-header {
    margin-bottom: 0.75rem;
}



.lab-card h3 {
    font-size: 1.1rem;
    color: #1d1d1f;
}

.lab-card h4 {
    font-size: 1rem;
    color: var(--orange);
    margin-bottom: 0.5rem;
}

.lab-card p {
    color: #000000;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.lab-description {
    font-size: 0.85rem;
    line-height: 1.4;
    flex-grow: 1;
    margin-bottom: 0;
}

/* Connected Vision (removed) */

/* LAB 비디오 */
.lab-video {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem auto;
    max-width: 600px;
}

.lab-video video {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 8px 30px var(--shadow-color);
    background: var(--bg-secondary);
}

/* Contact Section */
.contact-section {
    background: var(--bg-primary);
}

.contact-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    max-width: 800px;
    margin: 0 auto;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.contact-icon {
    width: 30px;
    height: 30px;
    background: var(--text-secondary);
    color: var(--bg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.contact-details h4 {
    margin-bottom: 0.5rem;
    color: #1d1d1f;
}

.contact-details a {
    color: #FF6A00;
    text-decoration: none;
    font-weight: 500;
}

.contact-details a:hover {
    text-decoration: underline;
}

.contact-details p {
    color: #000000;
    margin: 0;
}

.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 100px;
}

.btn-primary {
    background: var(--orange);
    color: white;
}

.btn-primary:hover {
    background: #e56a20;
}

.btn-secondary {
    background: transparent;
    color: var(--orange);
    border: 1px solid var(--orange);
    border-radius: 0;
}

.btn-secondary:hover {
    background: var(--orange);
    color: white;
}



/* Footer */
.footer {
    background: #1d1d1f;
    color: white;
    padding: 2rem 0 1rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-brand h3 {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: #FFFFFF;
}

.footer-brand p {
    color: #86868b;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.footer-contact a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-contact a:hover {
    color: var(--orange);
}

/* 소셜 미디어 아이콘 스타일 */
.footer-social {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
  .footer-social { justify-content: center; }
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px; /* 80% of 24px */
    height: 19px; /* 80% of 24px */
    transition: opacity 0.3s ease;
    opacity: 0.7;
}

.footer-social a:hover {
    opacity: 1;
}

.footer-social img {
    width: 19px; /* 80% of 24px */
    height: 19px; /* 80% of 24px */
    filter: brightness(0) invert(1); /* 흰색으로 변환 */
    transition: filter 0.3s ease;
}

.footer-social a:hover img {
    filter: brightness(0) invert(1); /* 화이트 컬러로 하이라이트 */
}

.footer-contact a:hover {
    text-decoration: underline;
}

/* 데스크톱: 푸터 이메일 우측 정렬 */
@media (min-width: 1024px) {
  .footer-contact { display: flex; flex-direction: column; align-items: flex-end; }
  .footer-contact > span { text-align: right; display: block; }
}

.footer-bottom {
    border-top: 1px solid #424245;
    padding-top: 1rem;
    text-align: center;
    color: #86868b;
    font-size: 0.8rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-subtitle {
        max-width: 100%;
        padding: 0 20px;
        text-align: center;
    }
    .nav-container {
        padding: 1rem 1.5rem;
        height: 56px;
        justify-content: center; /* 로고 가운데 정렬 */
    }
    
    .logo a {
        font-size: 1.5rem;
    }
    
    /* 모바일: 로고 중앙 유지, 좌/우 메뉴 링크는 비표시(요청) */
    .nav-container { position: relative; justify-content: center; }
    .nav-menu {
        display: none !important;
        position: static;
        height: auto;
        padding: 0;
    }
    .nav-menu li, .nav-menu li:last-child { margin: 0; }
    .logo { text-align: center; width: 100%; }
    .logo a { display: inline-block; }
    .logo { text-align: center; width: 100%; }
    .logo a { display: inline-block; }
    
    .hero {
        min-height: auto; /* 전체화면 제거 */
        padding: 80px 20px 40px; /* 헤더가 항상 보이므로 여백 보정 */
    }
    
    .hero-content {
        margin-top: -8px; /* 모바일에서 덜 올림 */
    }

    .scroll-indicator {
        bottom: 15rem; /* 모바일에서 훨씬 위로 */
    }
    .projects-hero .scroll-indicator { bottom: 1.5rem; }
    .hero-title {
        font-size: 2rem;
    }
    
    /* 모바일에서도 영상은 섹션 전체 배경으로 유지 (높이 오버라이드 제거) */
    
    .section-title {
        font-size: 2rem;
    }
    
    /* 모바일/태블릿 규칙 보류 (웹 우선 적용) */
    
    .contact-grid {
        gap: 2rem;
    }
    
    .footer-container {
        padding: 0 1.5rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .labs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .lab-card {
        min-height: 250px;
        padding: 1.25rem;
    }
    
    .vision-mission-grid {
        grid-template-columns: 1fr;
    }
    
    .core-values {
        grid-template-columns: 1fr;
    }
    
    .lab-video {
        max-width: 400px;
    }
    
    main {
        padding-top: 56px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    /* 모바일 초소형: 전역 가로 오버플로우 방지 안전망 */
    html, body, main, .container { max-width: 100%; overflow-x: hidden; }
    
    .nav-container {
        padding: 1rem 1rem;
        height: 52px;
    }
    
    .footer-container {
        padding: 0 1rem;
    }
    
    .labs-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 0.5rem;
    }
    
    .lab-card {
        min-height: 220px;
        padding: 1rem;
    }
    
    .hero {
        padding: 80px 15px 50px;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    /* 소형 스마트폰 규칙 보류 (웹 우선 적용) */
    
    /* 소형 디바이스에서도 영상은 섹션 전체 배경으로 유지 (높이 오버라이드 제거) */
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-content {
        margin-top: -6px;
    }

    .scroll-indicator {
        bottom: 1.75rem;
    }
    .projects-hero .scroll-indicator { bottom: 1rem; }
    
    section {
        padding: 60px 0;
    }
    
    .lab-video {
        max-width: 300px;
    }
    
    main {
        padding-top: 52px;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* 모션 최소화 환경 및 저사양 디바이스 배려: 애니메이션/트랜지션 비활성 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Smooth scrolling for anchor links */
html {
    scroll-padding-top: 80px;
    text-size-adjust: 100%; /* iOS 글자 확대 방지 */
}

/* FOUC 방지: 스타일 로드 전까지 최소 안전 레이아웃 보장 */
body { visibility: visible; }
body:not(.loaded) .header { opacity: 0; transform: translateY(-8px); pointer-events: none; }
body:not(.loaded) .hero-title { opacity: 0; transform: translateY(24px); }

/* 줄바꿈 유틸: 데스크톱 숨김, 모바일 표시 */
.mobile-br { display: none; }
@media (max-width: 768px) { .mobile-br { display: inline; } }

/* 태블릿 전용 줄바꿈: 1024px 이하에서 표시 */
.tablet-br { display: none; }
@media (max-width: 1024px) { .tablet-br { display: inline; } }

/* 데스크톱 저해상도 전용 줄바꿈(1024–1280px) */
.narrow-desktop-br { display: none; }
@media (min-width: 1024px) and (max-width: 1280px) {
  .narrow-desktop-br { display: inline; }
}

/* 데스크톱 전 해상도 줄바꿈 */
.desktop-br { display: none; }
@media (min-width: 1024px) { .desktop-br { display: inline; } }

/* 모바일: 하단 CTA 타이틀(그리고 와이고가 진행 중인 프로젝트) 60% 크기 */
@media (max-width: 768px) {
    .cta-section.bg-white .section-title { font-size: 1.8rem; }
}

/* 모바일 전용: 프로젝트 하단 CTA 타이틀은 더 작게(상위 규칙 오버라이드) */
@media (max-width: 768px) {
    .cta-section.project-cta-bottom .section-title {
        font-size: clamp(1.62rem, 11.36vw, 3.08rem);
    }
}

/* 태블릿까지 닷 위치 보정(아이패드 포함) */
@media (max-width: 1024px) {
    .project-cta-bottom .section-title .cta-end { position: relative; display: inline-block; white-space: nowrap; }
    .project-cta-bottom .section-title .cta-end .blinking-dot {
        position: absolute;
        right: -12px;
        bottom: 12px;
        top: auto !important;
        margin: 0;
    }
}

/* 프로젝트 히어로 설명: 모바일에서 항상 1줄 유지 */
@media (max-width: 768px) {
    .projects-hero-desc {
        font-size: 1rem;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* 헤더 고정에 따른 메인 콘텐츠 조정 */
main {
    padding-top: 0; /* 초기에는 헤더 숨김 → 여백 없음 */
}

.header.header--visible ~ main {
    padding-top: 64px; /* 헤더 표시 시에만 여백 적용 */
}

/* 페이지 스크롤 게이지 */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--orange);
    z-index: 1100; /* 헤더(1000) 위 */
    transition: width 0.12s linear;
    pointer-events: none;
}

/* 어바웃: 단일 메시지 컬러 - 기본은 유지하고 지정 줄만 그레이 */
.image-overlay-section .overlay-text { color: inherit !important; }
.image-overlay-section .overlay-text * { color: inherit !important; }
.image-overlay-section .overlay-text .muted-gray { color: rgba(0,0,0,0.55) !important; }

/* test */

/* 아래 접힌 섹션: 보이는 순간까지 렌더링 지연으로 초기 로드 최적화 */
section.vision-mission,
section.slogan-section,
section.values-section,
section.projects-hero,
section.projects-section,
section.cta-section,
section.contact-section,
footer.footer {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

/* 모바일 예상 높이 보정 */
@media (max-width: 768px) {
  section.vision-mission,
  section.slogan-section,
  section.values-section,
  section.projects-hero,
  section.projects-section,
  section.cta-section,
  section.contact-section,
  footer.footer {
    contain-intrinsic-size: 700px;
  }
}

/* 모바일: 헤더-히어로 간격 제거 + 영상 70%로 축소 */
@media (max-width: 768px) {
  /* 헤더로 인해 main 상단 패딩이 생기는 것을 히어로에서만 상쇄 */
  .header.header--visible ~ main > .hero:first-child { margin-top: -64px; }
  /* 인라인 100vh를 덮어써서 실제 보이는 영상 높이를 70vh로 축소(헤더 높이 보정 포함) */
  .hero { min-height: calc(70vh + 64px) !important; padding: 0 !important; }
  .hero-video { inset: 0; height: 100%; }
  .hero-video video { height: 100%; }
}

@media (max-width: 480px) {
  /* 소형 디바이스: 헤더 52px 기준으로 보정 */
  .header.header--visible ~ main > .hero:first-child { margin-top: -52px; }
  .hero { min-height: calc(70vh + 52px) !important; padding: 0 !important; }
}