/* ==========================================================================
   NEKSON CODE IT / 기업문화 웹진 - style.css
   ========================================================================== */

/* 1. 디자인 시스템 토큰 및 변수 설정 */
:root {
  /* 다크 모드 (기본) */
  --accent-primary: #a78bfa;      /* 테크 라벤더 (주요 인터랙션) */
  --accent-secondary: #34d399;    /* 코드 그린 (보조 하이라이트) */
  --accent-warm: #f59e0b;         /* 워밍 앰버 (경고/포인트) */
  --accent-sky: #60a5fa;          /* 스카이 블루 (링크/포인트) */
  --accent-coral: #fb7185;        /* 소프트 코랄 (인물/감성) */
  
  --gradient-primary: linear-gradient(135deg, #a78bfa 0%, #34d399 50%, #60a5fa 100%);
  --gradient-hero: transparent;
  --gradient-editor: linear-gradient(180deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
  
  --bg-dark: #0d1117;             /* 에디터 최심부 다크 (GitHub Dark) */
  --bg-section-alt: #161b22;      /* IDE 패널 다크 */
  --bg-card: #1c2128;             /* 카드 배경 */
  --bg-modal: rgba(22, 27, 34, 0.85); /* 글래스모피즘 모달 백그라운드 */
  
  --text-primary: #f0f6fc;
  --text-secondary: #8b949e;
  --text-muted: #484f58;
  --text-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --text-heading: 'Outfit', 'Inter', sans-serif;
  
  --border-editor: rgba(167, 139, 250, 0.15);     /* 에디터 보더 */
  --border-subtle: rgba(255, 255, 255, 0.06);      /* 미세 보더 */
  --border-active: rgba(167, 139, 250, 0.5);
  
  --glow-primary: 0 0 25px rgba(167, 139, 250, 0.25);
  --glow-green: 0 0 20px rgba(52, 211, 153, 0.2);
  
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 라이트 모드 오버라이드 */
[data-mode="light"] {
  --accent-primary: #7c3aed;      /* 라이트모드 라벤더 (가시성 확보) */
  --accent-secondary: #059669;    /* 라이트모드 그린 */
  --accent-warm: #d97706;
  --accent-sky: #2563eb;
  --accent-coral: #e11d48;
  
  --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #059669 50%, #2563eb 100%);
  --gradient-hero: transparent;
  --gradient-editor: linear-gradient(180deg, #ffffff 0%, #f6f8fa 50%, #ffffff 100%);
  
  --bg-dark: #ffffff;
  --bg-section-alt: #f6f8fa;
  --bg-card: #f0f2f5;
  --bg-modal: rgba(246, 248, 250, 0.9);
  
  --text-primary: #1f2328;
  --text-secondary: #57606a;
  --text-muted: #8c959f;
  
  --border-editor: rgba(124, 58, 237, 0.15);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-active: rgba(124, 58, 237, 0.5);
  
  --glow-primary: 0 0 20px rgba(124, 58, 237, 0.15);
  --glow-green: 0 0 15px rgba(5, 150, 105, 0.1);
}

/* 2. 전역 스타일 초기화 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: 'Pretendard', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

input, button, select, textarea {
  font-family: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* 3. 공통 레이아웃 프레임 & 유틸리티 */
.mixed-main {
  width: 100%;
  margin: 0 auto;
  position: relative;
  background-color: var(--bg-dark);
  transition: var(--transition-smooth);
}

/* 스크롤 애니메이션 클래스 */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

/* 섹션 공통 헤더 */
.section-container {
  padding: 100px 24px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.section-header {
  margin-bottom: 60px;
}

.section-header.center-align {
  text-align: center;
}

.section-tag {
  font-family: var(--text-mono);
  font-size: 14px;
  color: var(--accent-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--text-heading);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
}

.section-desc {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.6;
}

.section-header.center-align .section-desc {
  margin: 0 auto;
}

/* IDE 창 프레임 공통 데코레이션 */
.ide-window-frame {
  background-color: var(--bg-section-alt);
  border: 1px solid var(--border-editor);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.ide-header-bar {
  height: 36px;
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-family: var(--text-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.ide-dots {
  display: flex;
  gap: 6px;
}

.ide-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--text-muted);
  opacity: 0.5;
}

.ide-dot.red { background-color: #ef4444; opacity: 0.8; }
.ide-dot.yellow { background-color: #f59e0b; opacity: 0.8; }
.ide-dot.green { background-color: #10b981; opacity: 0.8; }

.ide-title-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--bg-dark);
  padding: 0 16px;
  height: 36px;
  border-right: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
  color: var(--text-primary);
  margin-top: 1px;
}

.ide-title-tab-icon {
  color: var(--accent-primary);
}

/* 4. 12개 개별 섹션별 상세 스타일링 */

/* [섹션 1: HERO AREA] ========================================== */
.hero-section {
  width: 100%;
  height: 100vh;
  min-height: 650px;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

.hero-canvas-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.visual-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  background: var(--gradient-hero);
}

.v8-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--text-mono);
  font-size: 14px;
  letter-spacing: 1px;
}

.v8-badge {
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid var(--border-editor);
  color: var(--accent-primary);
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 500;
  pointer-events: auto;
  transition: var(--transition-fast);
  align-self: flex-start; /* 좌측 정렬 */
  margin-bottom: 16px; /* 아래 제목과의 자연스러운 간격 */
}

.v8-badge:hover {
  background: rgba(167, 139, 250, 0.2);
  box-shadow: var(--glow-primary);
}

.v8-counter {
  font-family: var(--text-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6) !important; /* 어두운 WebGL 캔버스 위에서 항상 가시성 확보 */
  margin-right: 4px; /* 닷과의 정렬 보정 */
}

.v8-bottom-content {
  margin-top: auto;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  pointer-events: auto;
}

.v8-title-block {
  margin: 0;
}

.v8-title-line {
  font-family: var(--text-heading);
  font-size: 72px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -2px;
}

.v8-char {
  display: inline-block;
  color: inherit;
  -webkit-text-fill-color: inherit; /* 부모 그라데이션 클리핑 컬러 완벽 상속 */
}

.v8-title-line.accent {
  color: var(--accent-primary) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: 0 0 35px rgba(167, 139, 250, 0.4); /* 어두운 WebGL 캔버스 위에서 영롱하게 빛나는 테크 네온 글로우 */
  transition: color 0.8s ease, text-shadow 0.8s ease; /* 슬라이드별 테마 색상 트랜지션 연동 */
}

.v8-terminal-panel {
  background: rgba(13, 17, 23, 0.75);
  border: 1px solid var(--border-editor);
  padding: 14px 20px;
  border-radius: 6px;
  font-family: var(--text-mono);
  font-size: 15px;
  color: var(--accent-secondary);
  max-width: 580px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  transition: var(--transition-smooth);
}

.v8-typing-cursor {
  display: inline-block;
  width: 8px;
  height: 18px;
  background-color: var(--accent-secondary);
  margin-left: 4px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from, to { background-color: transparent; }
  50% { background-color: var(--accent-secondary); }
}

.v8-nav-container {
  display: flex;
  align-items: flex-end; /* 닷의 하단선과 정렬되게 아래로 내림 */
  gap: 20px;
  width: 100%;
}

.v8-divider-line {
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-editor), transparent);
  margin-bottom: 8px; /* 닷의 중심 높이와 눈대중 정렬 */
}

.v8-nav-right-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px; /* 카운터와 내비게이션 닷 간격 */
  pointer-events: auto;
}

.v8-nav-dots {
  display: flex;
  gap: 12px;
}

.v8-nav-dot {
  width: 32px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  transition: var(--transition-smooth);
}

.v8-nav-dot.active {
  background-color: var(--accent-primary);
  width: 50px;
  box-shadow: var(--glow-primary);
}

/* [섹션 2: DEPARTMENT - 부서 탐방] ============================== */
.dept-section {
  background-color: var(--bg-dark);
}

.ide-tabs-container {
  display: flex;
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.ide-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--text-mono);
  font-size: 13px;
  color: var(--text-secondary);
  border-right: 1px solid var(--border-subtle);
  background-color: rgba(0, 0, 0, 0.15);
  transition: var(--transition-fast);
  position: relative;
  white-space: nowrap;
}

.ide-tab-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: transparent;
  transition: var(--transition-fast);
}

.ide-tab-btn:hover {
  background-color: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
}

.ide-tab-btn.active {
  background-color: var(--bg-section-alt);
  color: var(--text-primary);
}

.ide-tab-btn.active::after {
  background-color: var(--accent-primary);
}

.ide-tab-icon {
  font-size: 12px;
}

.ide-content-panel {
  padding: 40px;
  min-height: 420px;
  display: none;
}

.ide-content-panel.active {
  display: flex;
  gap: 40px;
  animation: tabFadeIn 0.5s ease-out;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dept-info {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dept-code-title {
  font-family: var(--text-mono);
  color: var(--accent-secondary);
  font-size: 14px;
  margin-bottom: 16px;
}

.dept-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.dept-desc {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 30px;
  font-size: 15px;
}

.dept-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dept-tag {
  font-family: var(--text-mono);
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--text-secondary);
}

.dept-visual {
  flex: 0.8;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  height: 320px;
}

.dept-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--transition-smooth);
}

.dept-visual:hover .dept-image {
  transform: scale(1.05);
}

/* [섹션 3: TECH INSIGHT - 테크 인사이트 캐러셀] ================== */
.tech-section {
  background-color: var(--bg-section-alt);
  overflow: hidden;
}

.tech-carousel-container {
  width: 100%;
  position: relative;
  cursor: grab;
}

.tech-carousel-container:active {
  cursor: grabbing;
}

.tech-carousel-track {
  display: flex;
  gap: 30px;
  padding: 20px 0;
  will-change: transform;
  transition: transform 0.1s ease-out; /* 드래그 반응을 위해 빠르게 */
}

.tech-card {
  width: 380px;
  flex-shrink: 0;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: var(--transition-smooth);
}

.tech-card:hover {
  transform: translateY(-8px);
  border-color: var(--border-editor);
  box-shadow: var(--glow-primary);
}

.tech-card-image-area {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.tech-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--transition-smooth);
}

.tech-card:hover .tech-card-img {
  transform: scale(1.06);
}

.tech-card-content {
  padding: 28px;
}

.tech-card-meta {
  font-family: var(--text-mono);
  font-size: 12px;
  color: var(--accent-primary);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}

.tech-card-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.tech-card-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.carousel-progress-bar {
  width: 100%;
  height: 2px;
  background-color: var(--border-subtle);
  margin-top: 40px;
  border-radius: 1px;
  position: relative;
}

.carousel-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--gradient-primary);
  border-radius: 1px;
  transition: width 0.1s ease-out;
}

/* [섹션 4: BUSINESS METRICS - 사업 실적 벤토] =================== */
.metrics-section {
  background-color: var(--bg-dark);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(220px, auto));
  gap: 24px;
  width: 100%;
}

.bento-item {
  background-color: var(--bg-section-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.bento-item:hover {
  border-color: var(--border-editor);
  transform: scale(1.02);
  box-shadow: var(--glow-primary);
}

/* 그리드 배치 */
.bento-item.large {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bento-item.tall {
  grid-row: span 2;
}

.bento-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--text-heading);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bento-title-icon {
  color: var(--accent-primary);
}

.bento-num-display {
  display: flex;
  align-items: baseline;
  margin-top: auto;
}

.bento-number {
  font-family: var(--text-heading);
  font-size: 56px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1px;
}

.bento-unit {
  font-size: 20px;
  color: var(--accent-secondary);
  margin-left: 8px;
  font-weight: 600;
}

.bento-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 12px;
}

/* 대형 벤토 내부 디테일 (SVG 차트 및 가로 분할 구조) */
.bento-large-content {
  display: flex;
  gap: 40px;
  flex-grow: 1;
  align-items: center;
}

.bento-large-text {
  flex: 1;
}

.bento-large-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* SVG 도넛 게이지 */
.svg-gauge {
  width: 160px;
  height: 160px;
  transform: rotate(-90deg);
}

.gauge-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 14;
}

.gauge-fill {
  fill: none;
  stroke: var(--accent-primary);
  stroke-width: 14;
  stroke-dasharray: 439.6; /* 2 * PI * r (r=70) */
  stroke-dashoffset: 439.6;
  stroke-linecap: round;
  transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gauge-center-text {
  position: absolute;
  font-family: var(--text-heading);
  font-size: 38px; /* 아주 크게 변경 */
  font-weight: 800; /* 웅장한 굵기로 변경 */
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.gauge-center-text span {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--text-mono);
  margin-top: 4px;
}

/* [섹션 5: NEW FACE - 신입 입사자 슬라이드] ===================== */
.newface-section {
  background-color: var(--bg-section-alt);
  overflow: hidden;
}

.newface-carousel-container {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 480px;
}

.newface-track {
  display: flex;
  gap: 40px;
  width: 100%;
  max-width: 1000px;
  justify-content: center;
  position: relative;
  perspective: 1500px;
}

.flip-card-wrapper {
  width: 280px;
  height: 380px;
  perspective: 1000px;
  flex-shrink: 0;
  transition: transform 0.6s var(--transition-smooth), opacity 0.6s var(--transition-smooth);
}

/* 3D 카드 플립 효과 */
.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.flip-card-wrapper:hover .flip-card {
  transform: rotateY(180deg);
}

.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.flip-front {
  background-color: var(--bg-card);
}

.flip-img-container {
  width: 100%;
  height: 72%;
  position: relative;
  overflow: hidden;
}

.flip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--transition-smooth);
}

.flip-front:hover .flip-img {
  transform: scale(1.05);
}

.flip-front-info {
  height: 28%;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flip-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.flip-dept {
  font-family: var(--text-mono);
  font-size: 12px;
  color: var(--accent-primary);
}

.flip-back {
  background-color: var(--bg-card);
  transform: rotateY(180deg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-color: var(--border-editor);
  background-image: linear-gradient(135deg, var(--bg-card) 0%, rgba(167, 139, 250, 0.05) 100%);
}

.flip-back-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

.flip-back-title {
  font-size: 14px;
  color: var(--accent-secondary);
  font-family: var(--text-mono);
  margin-bottom: 4px;
}

.flip-back-name {
  font-size: 20px;
  font-weight: 700;
}

.flip-back-q {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 14px;
  margin-bottom: 6px;
}

.flip-back-a {
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.6;
  font-weight: 400;
}

.flip-back-footer {
  font-family: var(--text-mono);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

/* [섹션 6: CULTURE - 사내 문화 갤러리] ======================== */
.culture-section {
  background-color: var(--bg-dark);
}

.masonry-grid {
  columns: 3 320px;
  column-gap: 24px;
  width: 100%;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 24px;
  background-color: var(--bg-section-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.masonry-item:hover {
  transform: translateY(-6px);
  border-color: var(--border-active);
  box-shadow: var(--glow-primary);
}

.masonry-img-area {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.2);
}

.masonry-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s var(--transition-smooth);
}

.masonry-item:hover .masonry-img {
  transform: scale(1.05);
}

.masonry-info {
  padding: 20px;
}

.masonry-meta {
  font-family: var(--text-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.masonry-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
}

/* HTML5 Dialog 전역 모달 스타일 */
dialog.custom-modal {
  border: 1px solid var(--border-editor);
  border-radius: 16px;
  background-color: var(--bg-card);
  color: var(--text-primary);
  max-width: 720px;
  width: 90%;
  padding: 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(15px);
}

dialog.custom-modal[open] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

dialog.custom-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

dialog.custom-modal[open]::backdrop {
  opacity: 1;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--text-heading);
}

.modal-close-btn {
  font-size: 24px;
  color: var(--text-muted);
  transition: color 0.2s;
}

.modal-close-btn:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 24px;
}

.modal-image-area {
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 20px;
}

.modal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-description {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* [섹션 7: CTO MESSAGE - CTO 메시지] =========================== */
.cto-section {
  background-color: var(--bg-section-alt);
  padding: 0 0 100px 0; /* 하단 패딩 확보하여 아코디언 컴포넌트 경계 유려하게 보정 */
}

.cto-parallax-hero {
  position: relative;
  height: 480px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 모바일 등 parallax 미지원 브라우저 백업 */
@media (max-width: 1024px) {
  .cto-parallax-hero {
    background-attachment: scroll;
  }
}

.cto-parallax-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.7) 0%, rgba(13, 17, 23, 0.95) 100%);
}

.cto-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 24px;
}

.cto-hero-tag {
  font-family: var(--text-mono);
  font-size: 14px;
  color: var(--accent-secondary);
  letter-spacing: 2px;
  margin-bottom: 16px;
  display: block;
}

.cto-hero-title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 20px;
  color: #ffffff; /* 항상 선명한 흰색으로 고정 */
}

.cto-name-label {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75); /* 밝은 텍스트 고정 */
  font-family: var(--text-heading);
}

/* 아코디언 컨테이너 */
.cto-accordion-area {
  max-width: 840px;
  margin: 80px auto;
  padding: 0 24px;
}

.accordion-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.accordion-item {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background-color: var(--bg-dark);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.accordion-item:hover {
  border-color: var(--border-editor);
}

.accordion-header {
  width: 100%;
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.accordion-question {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.accordion-icon {
  font-size: 18px;
  color: var(--accent-primary);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: rgba(255, 255, 255, 0.01);
}

.accordion-content-inner {
  padding: 0 28px 24px 28px;
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* [섹션 8: NEWS - 직원 소식 및 마퀴] =========================== */
.news-section {
  background-color: var(--bg-dark);
  overflow: hidden;
}

/* 무한 마퀴 */
.marquee-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: rgba(167, 139, 250, 0.04);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 16px 0;
  display: flex;
  overflow: hidden;
  margin-bottom: 60px;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeRun 25s linear infinite;
}

.marquee-item {
  font-family: var(--text-mono);
  font-size: 15px;
  color: var(--accent-primary);
  margin-right: 40px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
}

.marquee-dot {
  width: 6px;
  height: 6px;
  background-color: var(--accent-secondary);
  border-radius: 50%;
}

@keyframes marqueeRun {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 직원 소식 가로 슬라이더 */
.news-slider-container {
  position: relative;
}

.news-slider-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 10px 4px 30px 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* 파이어폭스 */
}

.news-slider-track::-webkit-scrollbar {
  display: none; /* 크롬/사파리 */
}

.news-slider-card {
  width: 320px;
  flex-shrink: 0;
  background-color: var(--bg-section-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 24px;
  scroll-snap-align: start;
  transition: var(--transition-smooth);
}

.news-slider-card:hover {
  border-color: var(--border-editor);
  transform: translateY(-6px);
  box-shadow: var(--glow-primary);
}

.news-slider-badge {
  font-family: var(--text-mono);
  font-size: 11px;
  color: var(--accent-secondary);
  border: 1px solid rgba(52, 211, 153, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 16px;
}

.news-slider-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.4;
}

.news-slider-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* [섹션 9: EVENT - 이벤트 응모] =============================== */
.event-section {
  background-color: var(--bg-section-alt);
}

.event-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.event-details {
  flex: 1;
}

.event-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.event-table td {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14.5px;
}

.event-table td:first-child {
  font-weight: 600;
  color: var(--accent-primary);
  width: 120px;
  font-family: var(--text-heading);
}

.event-table td:last-child {
  color: var(--text-secondary);
  line-height: 1.5;
}

.event-form-area {
  flex: 1.2;
}

.event-form-box {
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-family: var(--text-heading);
}

.form-input {
  width: 100%;
  background-color: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  transition: var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--glow-primary);
}

/* 드래그 앤 드롭 파일 업로드 구역 */
.dropzone {
  border: 2px dashed var(--border-editor);
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  background-color: rgba(167, 139, 250, 0.02);
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
}

.dropzone.dragover {
  background-color: rgba(167, 139, 250, 0.08);
  border-color: var(--accent-secondary);
}

.dropzone-icon {
  font-size: 32px;
  color: var(--accent-primary);
  margin-bottom: 12px;
}

.dropzone-text {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.dropzone-text span {
  color: var(--accent-primary);
  font-weight: 600;
}

.file-preview {
  margin-top: 12px;
  font-family: var(--text-mono);
  font-size: 12px;
  color: var(--accent-secondary);
  display: none;
}

.form-submit-btn {
  width: 100%;
  background: var(--gradient-primary);
  border-radius: 6px;
  padding: 14px 20px;
  font-weight: 700;
  color: #000;
  font-family: var(--text-heading);
  letter-spacing: 0.5px;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 15px rgba(167, 139, 250, 0.2);
}

.form-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-primary);
}

.form-submit-btn:active {
  transform: translateY(0);
}

/* [섹션 10: QUOTE - 오늘의 명언] =============================== */
.quote-section {
  background-color: var(--bg-dark);
  position: relative;
  overflow: hidden;
  padding: 140px 24px;
}

/* CSS conic-gradient 메쉬 배경 */
.quote-mesh-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.08;
  background: conic-gradient(from 180deg at 50% 50%, #a78bfa, #34d399, #60a5fa, #a78bfa);
  filter: blur(100px);
  pointer-events: none;
}

.quote-container {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.quote-editor-window {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.quote-editor-body {
  padding: 40px;
  font-family: var(--text-mono);
  font-size: 22px;
  line-height: 1.6;
  min-height: 200px;
  position: relative;
}

.quote-text-line {
  color: var(--accent-primary);
}

.quote-text-cursor {
  display: inline-block;
  width: 10px;
  height: 24px;
  background-color: var(--accent-primary);
  margin-left: 6px;
  vertical-align: middle;
  animation: blinkQuote 1s step-end infinite;
}

@keyframes blinkQuote {
  from, to { background-color: transparent; }
  50% { background-color: var(--accent-primary); }
}

.quote-author {
  margin-top: 30px;
  text-align: right;
  font-size: 14px;
  color: var(--text-secondary);
}

.quote-author::before {
  content: '// ';
  color: var(--accent-secondary);
}

/* [섹션 11: ARCHIVE - 지난 호 아카이브] ========================= */
.archive-section {
  background-color: var(--bg-section-alt);
}

.archive-layout {
  display: flex;
  gap: 60px;
  align-items: center;
}

.archive-info-area {
  flex: 1;
}

.archive-stack-area {
  flex: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 420px;
  position: relative;
}

/* 3D 스택 덱 카드 디자인 */
.archive-stack {
  position: relative;
  width: 280px;
  height: 380px;
  transform-style: preserve-3d;
}

.archive-deck-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.6s step-end;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

/* 카드 겹침 효과 */
.archive-deck-card:nth-child(1) {
  transform: translate3d(0, 0, 0) rotate(0deg);
  z-index: 3;
}

.archive-deck-card:nth-child(2) {
  transform: translate3d(15px, 15px, -10px) rotate(2deg);
  z-index: 2;
  opacity: 0.85;
}

.archive-deck-card:nth-child(3) {
  transform: translate3d(30px, 30px, -20px) rotate(4deg);
  z-index: 1;
  opacity: 0.7;
}

.archive-deck-card:nth-child(4) {
  transform: translate3d(45px, 45px, -30px) rotate(6deg);
  z-index: 0;
  opacity: 0.55;
}

/* 카드 이미지 및 상세내용 */
.deck-card-img-container {
  height: 70%;
  overflow: hidden;
  position: relative;
}

.deck-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deck-card-info {
  height: 30%;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg-card);
}

.deck-card-vol {
  font-family: var(--text-mono);
  font-size: 12px;
  color: var(--accent-primary);
  margin-bottom: 4px;
}

.deck-card-title {
  font-size: 16px;
  font-weight: 700;
}

/* [섹션 12: FOOTER - 푸터] ===================================== */
.footer-section {
  background-color: var(--bg-dark);
  padding: 80px 24px;
  border-top: 1px solid var(--border-subtle);
}

.footer-editor {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-editor-body {
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-brand-area {
  flex: 1.5;
  min-width: 280px;
}

.footer-logo {
  font-family: var(--text-heading);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.footer-logo span {
  color: var(--accent-primary);
}

.footer-slogan {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.footer-links-area {
  flex: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  min-width: 320px;
}

.footer-link-col-title {
  font-family: var(--text-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-secondary);
  margin-bottom: 18px;
}

.footer-link-list {
  list-style: none;
}

.footer-link-item {
  margin-bottom: 10px;
}

.footer-link-item a {
  font-size: 13.5px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.footer-link-item a:hover {
  color: var(--accent-primary);
  padding-left: 4px;
}

.footer-bottom-line {
  border-top: 1px solid var(--border-subtle);
  padding-top: 30px;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--text-mono);
  font-size: 12px;
  color: var(--text-muted);
  width: 100%;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copyright {
  color: var(--text-muted);
}

.footer-meta-info {
  display: flex;
  gap: 20px;
}

/* 5. 미디어 쿼리 - 반응형 최적화 */

/* 모바일 뷰 시뮬레이터 대응 룰 포함 */
/* 5. 미디어 쿼리 - 반응형 최적화 (Native 모바일 대응) */
@media (max-width: 768px) {
  .section-container {
    padding: 60px 16px;
  }
  
  .section-title {
    font-size: 28px;
  }
  
  /* 히어로 */
  .visual-overlay-container {
    padding: 60px 24px;
  }
  
  .v8-title-line {
    font-size: 42px;
  }
  
  .v8-terminal-panel {
    font-size: 13px;
    padding: 12px 16px;
    max-width: 100%;
  }
  
  /* 부서 탐방 */
  .ide-content-panel.active {
    flex-direction: column-reverse;
    padding: 24px;
    gap: 24px;
  }
  
  .dept-visual {
    height: 200px;
    flex: none;
  }
  
  /* 벤토 그리드 */
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  
  .bento-item.large, .bento-item.tall {
    grid-column: span 1;
    grid-row: span 1;
  }
  
  .bento-large-content {
    flex-direction: column;
    gap: 20px;
  }
  
  /* 입사자 슬라이드 */
  .newface-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 20px 0;
    justify-content: flex-start;
  }
  
  .flip-card-wrapper {
    scroll-snap-align: center;
    width: 260px;
    height: 360px;
  }
  
  /* 사내 문화 */
  .masonry-grid {
    columns: 1;
  }
  
  /* CTO 메시지 */
  .cto-parallax-hero {
    height: 320px;
  }
  
  .cto-hero-title {
    font-size: 24px;
  }
  
  .accordion-header {
    padding: 16px 20px;
  }
  
  .accordion-question {
    font-size: 14px;
  }
  
  /* 이벤트 응모 */
  .event-container {
    flex-direction: column;
    gap: 30px;
    width: 100%;
  }
  
  .event-details,
  .event-form-area {
    width: 100%;
    flex: none;
  }
  
  /* 명언 */
  .quote-editor-body {
    padding: 20px;
    font-size: 16px;
    min-height: 150px;
  }
  
  /* 아카이브 */
  .archive-layout {
    flex-direction: column;
    gap: 40px;
  }
  
  .archive-stack-area {
    height: 360px;
    width: 100%;
  }
  
  .archive-stack {
    width: 240px;
    height: 320px;
  }
  
  /* 푸터 */
  .footer-editor-body {
    padding: 20px;
    flex-direction: column;
  }
  
  .footer-links-area {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .footer-bottom-line {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 6. 모바일 뷰 시뮬레이터 대응 오버라이드 (PC에서 모바일 뷰 버튼 클릭 시 가동) */
.mixed-main.view-mobile {
  .section-container {
    padding: 60px 16px;
  }
  
  .section-title {
    font-size: 28px;
  }
  
  /* 히어로 */
  .visual-overlay-container {
    padding: 60px 24px;
  }
  
  .v8-title-line {
    font-size: 42px;
  }
  
  .v8-terminal-panel {
    font-size: 13px;
    padding: 12px 16px;
    max-width: 100%;
  }
  
  /* 부서 탐방 */
  .ide-content-panel.active {
    flex-direction: column-reverse;
    padding: 24px;
    gap: 24px;
  }
  
  .dept-visual {
    height: 200px;
    flex: none;
  }
  
  /* 벤토 그리드 */
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  
  .bento-item.large, .bento-item.tall {
    grid-column: span 1;
    grid-row: span 1;
  }
  
  .bento-large-content {
    flex-direction: column;
    gap: 20px;
  }
  
  /* 입사자 슬라이드 */
  .newface-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 20px 0;
    justify-content: flex-start;
  }
  
  .flip-card-wrapper {
    scroll-snap-align: center;
    width: 260px;
    height: 360px;
  }
  
  /* 사내 문화 */
  .masonry-grid {
    columns: 1;
  }
  
  /* CTO 메시지 */
  .cto-parallax-hero {
    height: 320px;
  }
  
  .cto-hero-title {
    font-size: 24px;
  }
  
  .accordion-header {
    padding: 16px 20px;
  }
  
  .accordion-question {
    font-size: 14px;
  }
  
  /* 이벤트 응모 */
  .event-container {
    flex-direction: column;
    gap: 30px;
    width: 100%;
  }
  
  .event-details,
  .event-form-area {
    width: 100%;
    flex: none;
  }
  
  /* 명언 */
  .quote-editor-body {
    padding: 20px;
    font-size: 16px;
    min-height: 150px;
  }
  
  /* 아카이브 */
  .archive-layout {
    flex-direction: column;
    gap: 40px;
  }
  
  .archive-stack-area {
    height: 360px;
    width: 100%;
  }
  
  .archive-stack {
    width: 240px;
    height: 320px;
  }
  
  /* 푸터 */
  .footer-editor-body {
    padding: 20px;
    flex-direction: column;
  }
  
  .footer-links-area {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .footer-bottom-line {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 쇼룸 스티키 z-index 이슈 대응을 위한 모바일 모드 오버라이드 */
.mixed-main.view-mobile {
  max-width: 412px;
  margin: 0 auto;
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}

/* 모바일일 때 Sticky 헤더 등 z-index 조정 */
.mixed-main.view-mobile .hero-section {
  height: 700px;
}

/* ==========================================================================
   5. [ADD] 미생성 이미지 플레이스홀더 (no-image-placeholder) 스타일
   ========================================================================== */
.no-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* 이미지가 정상 로드되면 절대 겹쳐서 노출되지 않도록 처리 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--text-mono);
  font-size: 13px;
  font-weight: 500;
  gap: 10px;
  z-index: 2;
  transition: var(--transition-smooth);
}

/* 플레이스홀더 색상 톤 정의 */
.no-image-placeholder.bg-purple { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.no-image-placeholder.bg-blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.no-image-placeholder.bg-emerald { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.no-image-placeholder.bg-orange { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
.no-image-placeholder.bg-pink { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
.no-image-placeholder.bg-red { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }

.no-image-icon {
  font-size: 24px;
  animation: floatPlaceholderIcon 3s ease-in-out infinite;
}

.no-image-text {
  letter-spacing: 1px;
  opacity: 0.8;
  font-size: 11px;
  text-transform: uppercase;
}

@keyframes floatPlaceholderIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}