/* =============================================
   다만미디어 - 메인 스타일시트 (다크 테마 리뉴얼)
   ============================================= */

/* === CSS VARIABLES (다크 테마) === */
:root {
  /* 기본 다크 배경 */
  --bg-dark:      #0b0f17;
  --bg-dark-2:    #111827;
  --bg-dark-3:    #1a2236;
  --bg-card:      #16202f;
  --bg-card-hover:#1e2d42;

  /* 기존 호환용 */
  --primary:      #0a1628;
  --primary-light:#142040;

  /* 강조색 */
  --accent:       #e63946;
  --accent-hover: #c1121f;
  --gold:         #f4a261;

  /* 텍스트 */
  --text-primary: #f0f4f8;
  --text-secondary:#a8b8cc;
  --text-muted:   #6b7e94;

  /* 흰색/라이트 섹션 강조 */
  --white:        #ffffff;
  --light-bg:     #f8f9fb;
  --light-card:   #ffffff;
  --light-border: #e2e8f0;
  --light-text:   #1e293b;
  --light-text-2: #475569;

  /* 그레이 (하위 호환) */
  --gray-50:  #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-500: #adb5bd;
  --gray-700: #495057;
  --gray-900: #212529;

  /* 그라데이션 */
  --gradient-main:   linear-gradient(135deg, #0b0f17 0%, #1a3a6e 100%);
  --gradient-dark:   linear-gradient(135deg, #0b0f17 0%, #0f1c2e 100%);
  --gradient-accent: linear-gradient(135deg, #e63946 0%, #f4a261 100%);
  --gradient-card:   linear-gradient(135deg, #16202f 0%, #1e2d42 100%);

  /* 그림자 */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.45);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.55);

  /* 반경 */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* 트랜지션 */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* 폰트 */
  --font-main: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-main);
  color: var(--text-primary);
  background: var(--bg-dark);
  line-height: 1.7;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* === LAYOUT === */
.container {
  width: min(1200px, 100% - 2rem);
  margin: 0 auto;
}
.section { padding: 100px 0; }

/* 섹션 배경 구분 */
.section-dark    { background: var(--bg-dark); }
.section-dark-2  { background: var(--bg-dark-2); }
.section-dark-3  { background: var(--bg-dark-3); }
.section-light   { background: var(--light-bg); }
.section-white   { background: var(--white); }

/* === TYPOGRAPHY === */
.section-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  background: rgba(230, 57, 70, 0.15);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(230,57,70,0.25);
}
.section-header {
  text-align: center;
  margin-bottom: 64px;
}
.section-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 16px;
}
/* 라이트 섹션에서는 텍스트를 어둡게 */
.section-light .section-title,
.section-white .section-title {
  color: var(--light-text);
}
.section-light .section-tag,
.section-white .section-tag {
  color: var(--accent);
  background: rgba(230,57,70,0.08);
  border-color: rgba(230,57,70,0.15);
}
.section-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}
.section-light .section-desc,
.section-white .section-desc {
  color: var(--light-text-2);
}
.gradient-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn-lg { padding: 16px 36px; font-size: 1.05rem; border-radius: var(--radius-md); }
.btn-primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 4px 15px rgba(230,57,70,0.4);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(230,57,70,0.5);
}
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.25);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}
.section-light .btn-secondary,
.section-white .btn-secondary {
  color: var(--light-text);
  border-color: var(--light-border);
}
.section-light .btn-secondary:hover,
.section-white .btn-secondary:hover {
  background: var(--light-text);
  color: var(--white);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--white);
}
.btn-white {
  background: var(--white);
  color: var(--light-text);
  box-shadow: var(--shadow-md);
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
}
.btn-ghost {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.12);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}

/* === HEADER === */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0;
  transition: var(--transition);
  background: rgba(11, 15, 23, 0.85);
  backdrop-filter: blur(10px);
}
.site-header.scrolled {
  background: rgba(11, 15, 23, 0.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), var(--shadow-md);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 150px;
}
/* 헤더 로고 래퍼 */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* 헤더 로고 이미지 */
.logo-img {
  height: 140px;
  width: auto;
  max-width: 400px;
  object-fit: contain;
  display: block;
  transition: opacity 0.3s ease;
}
.logo-img:hover { opacity: 0.85; }

/* 푸터 로고 이미지 - 헤더와 동일 크기 */
.footer-logo-img {
  height: 140px;
  width: auto;
  max-width: 400px;
  object-fit: contain;
  display: block;
  margin-bottom: 14px;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav a {
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--white);
  background: rgba(255,255,255,0.1);
}
.main-nav .nav-cta {
  background: var(--accent);
  color: var(--white) !important;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
}
.main-nav .nav-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}

/* === HERO === */
.hero {
  min-height: 100vh;
  background: var(--gradient-dark);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: none;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 15, 23, 0.6) 0%,
    rgba(11, 15, 23, 0.5) 60%,
    rgba(11, 15, 23, 0.75) 100%
  );
}
.hero-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(230,57,70,0.6);
  border-radius: 50%;
  animation: float-particle linear infinite;
}
@keyframes float-particle {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100px) scale(1.5); opacity: 0; }
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 100px;
  padding-bottom: 120px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 30px;
  margin-bottom: 32px;
}
.badge-dot {
  width: 8px;
  height: 8px;
  background: #4caf50;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.7; }
}
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.hero-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,0.65);
  margin-bottom: 48px;
  line-height: 2;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 80px;
}
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 28px 40px;
  backdrop-filter: blur(10px);
  width: fit-content;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32px;
}
.stat-num {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.stat-unit {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}
.stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  letter-spacing: 0.05em;
}
.stat-divider {
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.12);
}
.hero-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem;
  animation: bounce-down 2s ease-in-out infinite;
}
@keyframes bounce-down {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* === PORTFOLIO PANORAMA SLIDER === */
.portfolio-panorama {
  background: var(--bg-dark-2);
  padding: 100px 0 60px;
  overflow: hidden;
}
.panorama-track-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.panorama-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.panorama-slide {
  flex: 0 0 100%;
  position: relative;
  aspect-ratio: 16/7;
  cursor: pointer;
  overflow: hidden;
  background: var(--bg-dark-3);
}
.panorama-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.panorama-slide:hover img { transform: scale(1.03); }
.panorama-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11,15,23,0.85) 0%,
    rgba(11,15,23,0.3) 50%,
    transparent 100%
  );
  display: flex;
  align-items: flex-end;
  padding: 40px;
}
.panorama-slide-info {
  color: var(--white);
}
.panorama-cat {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.panorama-slide-info h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.panorama-slide-info p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}
.panorama-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 72px;
  height: 72px;
  background: rgba(230,57,70,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}
.panorama-slide:hover .panorama-play-btn { transform: translate(-50%, -50%) scale(1); }

/* 슬라이더 컨트롤 */
.panorama-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}
.panorama-btn {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 1rem;
  transition: var(--transition);
  cursor: pointer;
}
.panorama-btn:hover { background: var(--accent); border-color: var(--accent); }
.panorama-dots {
  display: flex;
  gap: 8px;
}
.panorama-dot {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
}
.panorama-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }

/* 최신작 그리드 */
.latest-works {
  background: var(--bg-dark-3);
  padding: 60px 0 100px;
}
.latest-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.latest-work-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
}
.latest-work-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,255,255,0.15);
}
.latest-work-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-dark-3);
}
.latest-work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.latest-work-card:hover .latest-work-thumb img { transform: scale(1.06); }

/* 호버 유튜브 미리보기 오버레이 */
.hover-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.latest-work-card:hover .hover-video-overlay { opacity: 1; }
.hover-video-overlay iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}
.hover-play-icon {
  position: relative;
  z-index: 3;
  width: 56px;
  height: 56px;
  background: rgba(230,57,70,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 4px 20px rgba(230,57,70,0.5);
  transition: transform 0.2s;
}
.latest-work-card:hover .hover-play-icon { transform: scale(1.1); }

.latest-work-body {
  padding: 16px 20px;
}
.latest-work-cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
  background: rgba(230,57,70,0.2);
  color: var(--accent);
}
.latest-work-body h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}
.latest-work-body p {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.latest-works-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}
.latest-tab-btn {
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  transition: var(--transition);
  cursor: pointer;
}
.latest-tab-btn.active,
.latest-tab-btn:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

/* === SERVICES OVERVIEW (다크 배경) === */
.services-overview { background: var(--bg-dark-2); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  transition: var(--transition);
  display: block;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-accent);
  opacity: 0;
  transition: var(--transition);
  border-radius: inherit;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(230,57,70,0.4);
}
.service-card:hover::before { opacity: 0.12; }
.service-card:hover h3,
.service-card:hover p,
.service-card:hover .service-link { color: var(--white); }
.service-card:hover .service-tags li {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}
.service-card:hover .service-icon-wrap {
  background: rgba(255,255,255,0.12);
  color: var(--white);
}
.service-card > * { position: relative; z-index: 1; }
.service-card--featured {
  background: var(--gradient-accent);
  border-color: transparent;
}
.service-card--featured h3 { color: #ffffff !important; }
.service-card--featured p { color: #ffffff !important; }
.service-card--featured .service-link { color: #ffffff !important; }
.service-card--featured .service-icon-wrap {
  background: rgba(255,255,255,0.25);
  color: #ffffff;
  border-color: rgba(255,255,255,0.4);
}
.service-card--featured .service-tags li {
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.95);
}
.service-badge-new {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.2);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255,255,255,0.3);
}
.service-icon-wrap {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 24px;
  transition: var(--transition);
}
.service-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  transition: var(--transition);
}
.service-card p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 20px;
  transition: var(--transition);
  overflow: visible;
  word-break: keep-all;
  white-space: normal;
}
.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.service-tags li {
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary);
  padding: 4px 12px;
  border-radius: 20px;
  transition: var(--transition);
  border: 1px solid rgba(255,255,255,0.1);
}
.service-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}
.services-more {
  text-align: center;
  margin-top: 48px;
}

/* === PORTFOLIO PREVIEW (다크) === */
.portfolio-preview { background: var(--bg-dark); }
.portfolio-filter {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.filter-btn {
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.06);
  transition: var(--transition);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}
.filter-btn.active,
.filter-btn:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  min-height: 300px;
}
.portfolio-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255,255,255,0.07);
  transition: var(--transition);
  cursor: pointer;
}
.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,255,255,0.15);
}
.portfolio-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bg-dark-3);
  overflow: hidden;
}
.portfolio-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.portfolio-card:hover .portfolio-thumb-img { transform: scale(1.05); }
.portfolio-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.25);
  font-size: 2.5rem;
  gap: 8px;
}
.portfolio-thumb-placeholder span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.2);
}
.portfolio-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 52px;
  height: 52px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
  opacity: 0;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(230,57,70,0.5);
}
.portfolio-card:hover .portfolio-play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.portfolio-cat-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--accent);
  color: var(--white);
  padding: 4px 10px;
  border-radius: 20px;
}
.portfolio-body {
  padding: 20px 24px;
}
.portfolio-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.4;
}
.portfolio-body .portfolio-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
}
.portfolio-loading {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  color: var(--text-muted);
  gap: 16px;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.portfolio-more {
  text-align: center;
  margin-top: 48px;
}

/* === WHY US (라이트 + 다크 강조 섹션) === */
.why-us {
  background: var(--light-bg);
  position: relative;
  overflow: hidden;
}
.why-us::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-accent);
}
.why-us-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.why-us-text .section-header {
  text-align: left;
  margin-bottom: 24px;
}
.why-us-text .section-tag {
  background: rgba(230,57,70,0.08);
  border-color: rgba(230,57,70,0.15);
}
.why-us-text .section-title {
  color: var(--light-text);
}
.why-us-text .section-title { margin-bottom: 16px; }
.why-desc {
  font-size: 1rem;
  color: var(--light-text-2);
  margin-bottom: 32px;
  line-height: 1.9;
}
.why-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}
.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.why-list i {
  color: var(--accent);
  font-size: 1.1rem;
  margin-top: 3px;
  flex-shrink: 0;
}
.why-list strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--light-text);
  margin-bottom: 2px;
}
.why-list span {
  font-size: 0.875rem;
  color: var(--light-text-2);
}
.why-us-visual {
  position: relative;
  height: 420px;
}
.visual-card {
  position: absolute;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--light-border);
}
.visual-card--main {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gradient-accent);
  color: var(--white);
  z-index: 2;
}
.visual-card--sm { min-width: 180px; }
.visual-card--top { top: 0; right: 0; }
.visual-card--bottom { bottom: 0; left: 0; }
.visual-icon {
  width: 52px;
  height: 52px;
  background: rgba(230,57,70,0.1);
  color: var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.visual-card--main .visual-icon {
  background: rgba(255,255,255,0.2);
  color: var(--white);
}
.visual-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--light-text);
  line-height: 1;
}
.visual-card--main .visual-num { color: var(--white); }
.visual-label {
  font-size: 0.8rem;
  color: var(--light-text-2);
  margin-top: 2px;
}
.visual-card--main .visual-label { color: rgba(255,255,255,0.75); }

/* === CLIENTS (다크) === */
.clients {
  background: var(--bg-dark-2);
  padding: 80px 0;
}
.clients-ticker {
  overflow: hidden;
  position: relative;
}
.clients-ticker::before,
.clients-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 160px;
  z-index: 2;
  pointer-events: none;
}
.clients-ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-dark-2) 0%, transparent 100%);
}
.clients-ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-dark-2) 0%, transparent 100%);
}
.clients-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  animation: ticker 30s linear infinite;
  padding: 16px 0;
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.clients-track:hover { animation-play-state: paused; }
.client-logo-item {
  flex-shrink: 0;
  width: 180px;
  height: 90px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  transition: var(--transition);
  overflow: hidden;
}
.client-logo-item:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.16);
}
.client-logo-item img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(3) opacity(0.4);
  transition: var(--transition);
}
.client-logo-item:hover img {
  filter: grayscale(0%) brightness(1) opacity(1);
}
.logo-fallback {
  display: none;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
}
.client-logo-item:hover .logo-fallback { color: rgba(255,255,255,0.7); }

/* === CTA SECTION === */
.cta-section {
  background: var(--gradient-accent);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.cta-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.cta-text h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}
.cta-text p {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  line-height: 1.9;
}
.cta-actions {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* === FOOTER === */
.site-footer {
  background: #050b14;
  color: var(--white);
  padding-top: 80px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-logo { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.footer-tagline {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}
.footer-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.9;
  margin-bottom: 28px;
}
.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 1rem;
  transition: var(--transition);
  border: 1px solid rgba(255,255,255,0.08);
}
.footer-social a:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.footer-col h2, .footer-col h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col li a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.4);
  transition: var(--transition);
}
.footer-col li a:hover { color: var(--white); }
.footer-contact-list li {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-contact-list i {
  color: var(--accent);
  font-size: 0.875rem;
  margin-top: 2px;
  width: 14px;
}
.footer-bottom {
  padding: 24px 0;
}
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-bottom p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.25);
}

/* === SCROLL TO TOP === */
.scroll-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: var(--accent);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(230,57,70,0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: var(--transition);
  z-index: 999;
}
.scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top:hover {
  background: var(--accent-hover);
  transform: translateY(-3px);
}

/* === MODAL === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(6px);
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.modal-box {
  background: var(--bg-dark-2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
.modal-overlay.active .modal-box { transform: scale(1); }
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px 32px 0;
}
.modal-header h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}
.modal-close {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-secondary);
  transition: var(--transition);
  flex-shrink: 0;
}
.modal-close:hover { background: rgba(255,255,255,0.15); color: var(--white); }
.modal-body { padding: 24px 32px 32px; }
.modal-box--portfolio { max-width: 900px; }

/* 미디어 영역 */
.modal-media-area { position: relative; margin-bottom: 0; }
.modal-video-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 12px;
}
.modal-video-wrap iframe { width: 100%; height: 100%; border: none; }
.modal-image-wrap {
  aspect-ratio: 16/9;
  background: var(--bg-dark-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.modal-image-wrap img { width: 100%; height: 100%; object-fit: contain; }
.modal-img-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.modal-img-error i { font-size: 2.5rem; }
.modal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}
.modal-nav-btn {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
}
.modal-nav-btn:hover:not(.disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.modal-nav-btn.disabled { opacity: 0.3; cursor: not-allowed; }
.modal-nav-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 48px;
  text-align: center;
}
.modal-thumb-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.modal-thumb-strip::-webkit-scrollbar { height: 4px; }
.modal-thumb-strip::-webkit-scrollbar-track { background: transparent; }
.modal-thumb-strip::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}
.modal-thumb {
  position: relative;
  flex-shrink: 0;
  width: 80px; height: 56px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
  background: var(--bg-dark-3);
}
.modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.modal-thumb.active { border-color: var(--accent); transform: scale(1.05); }
.modal-thumb:hover:not(.active) { border-color: rgba(255,255,255,0.3); }
.thumb-yt-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4);
  color: #ff0000;
  font-size: 1.3rem;
  pointer-events: none;
}
.modal-video { aspect-ratio: 16/9; margin-bottom: 20px; border-radius: var(--radius-md); overflow: hidden; }
.modal-video iframe { width: 100%; height: 100%; border: none; }
.modal-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.modal-meta span {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
}
.modal-meta i { color: var(--accent); }
/* modal-meta-row = modalMeta div의 클래스 */
.modal-meta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0 12px;
}
.modal-meta-row span {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal-meta-row i { color: var(--accent); }
/* modal-desc-area = modalDesc div의 클래스 */
.modal-desc-area {
  padding-top: 4px;
}
.modal-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.9;
}

/* 모달 갤러리 (영상+사진 동시 표시) */
.modal-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.modal-gallery-grid img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  border: 2px solid transparent;
}
.modal-gallery-grid img:hover {
  transform: scale(1.03);
  border-color: var(--accent);
  opacity: 0.9;
}
.modal-gallery-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 10px;
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* 카드 미디어 뱃지 */
.media-badge {
  position: absolute;
  bottom: 10px; right: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  display: flex; align-items: center; gap: 4px;
  backdrop-filter: blur(4px);
}
.media-badge i { font-size: 0.75rem; }
.portfolio-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === DIVIDER === */
.section-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .why-us-inner { grid-template-columns: 1fr; gap: 60px; }
  .why-us-visual { display: none; }
  .latest-works-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 모바일 히어로 영상 숨김 */
@media (max-width: 768px) {
  .hero-video-wrap { display: none; }
  .logo-img { height: 80px; max-width: 240px; }
  .header-inner { height: 100px; }
}

@media (max-width: 768px) {
  .section { padding: 72px 0; }
  .main-nav { display: none; }
  .main-nav.open {
    display: block;
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: rgba(11,15,23,0.98);
    backdrop-filter: blur(20px);
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .main-nav.open ul { flex-direction: column; gap: 4px; }
  .main-nav.open a { display: block; padding: 12px 16px; }
  .hamburger { display: flex; }
  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  .hero-stats { flex-direction: column; gap: 24px; padding: 24px; }
  .stat-divider { width: 60px; height: 1px; }
  .services-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .latest-works-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; text-align: center; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom .container { flex-direction: column; text-align: center; }
  .panorama-slide { aspect-ratio: 16/9; }
  .panorama-slide-overlay { padding: 20px; }
  .panorama-slide-info h3 { font-size: 1rem; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2.2rem; }
  .hero-actions { flex-direction: column; }
  .hero-stats { width: 100%; }
  .stat-item { padding: 0 16px; }
  .footer-links { grid-template-columns: 1fr; }
  .modal-header { padding: 24px 24px 0; }
  .modal-body { padding: 20px 24px 24px; }
  .scroll-top { bottom: 20px; right: 16px; }
}

/* =============================================
   모바일 터치 영역 + UI 최적화
   ============================================= */

/* 가로 스크롤 완전 차단 */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

@media (max-width: 768px) {
  /* 필터/탭 버튼 터치 최적화 */
  .filter-btn, .latest-tab-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* 카드 터치 최적화 */
  .portfolio-card, .latest-work-card, .service-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* 최신작업물 탭 가로 스크롤 (버튼 잘리지 않게) */
  .latest-works-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  .latest-works-tabs::-webkit-scrollbar { display: none; }
  .latest-tab-btn { flex-shrink: 0; }

  /* 포트폴리오 필터 — 모바일에서 홈 탭과 동일한 가로 스크롤 */
  .portfolio-filter-wrap {
    margin-bottom: 32px;
    /* 전폭 사용 (section 안에서 좌우 여백 없이) */
    width: 100%;
  }
  .portfolio-page-filter {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    scroll-snap-type: x proximity;
    /* 양 끝 버튼이 잘리지 않도록 좌우 패딩 */
    padding: 4px 20px 10px !important;
  }
  .portfolio-page-filter::-webkit-scrollbar { display: none; }
  .portfolio-page-filter .filter-btn {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* 햄버거 버튼 터치 영역 확보 */
  .hamburger {
    min-width: 48px;
    min-height: 48px;
    padding: 8px;
    touch-action: manipulation;
  }

  /* 스크롤 탑 버튼 */
  .scroll-top {
    width: 48px;
    height: 48px;
    touch-action: manipulation;
  }

  /* 모달 닫기 버튼 */
  .modal-close {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }
}

.performed-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.performed-tag{display:inline-block;padding:4px 8px;border:1px solid currentColor;border-radius:6px;font-size:.75rem;line-height:1.4;color:inherit;overflow-wrap:anywhere}.performed-service-fieldset{padding:14px;border:1px solid #cbd5e1;border-radius:8px;margin:12px 0}.performed-service-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.performed-service-options label{display:flex;align-items:center;gap:6px;min-height:36px}@media(max-width:480px){.performed-service-options{grid-template-columns:1fr}}

#portfolioForm .performed-service-fieldset{color:#1e293b;background:#fff}#portfolioForm .performed-service-fieldset p,#portfolioForm .performed-service-options label{color:#334155}#portfolioForm .performed-tag{color:#334155;background:#f1f5f9;border-color:#cbd5e1}


/* Compact, readable service tags on light portfolio cards. */
.performed-tags{gap:5px;margin:0 0 10px;align-items:center}.performed-tag{padding:4px 7px;font-size:11px;font-weight:600;line-height:1.5;color:#334155;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:5px;white-space:nowrap;overflow-wrap:normal;max-width:100%;box-sizing:border-box}.performed-tag-more{color:#64748b;background:#fff;flex-shrink:0}.admin-pf-body .performed-tags{margin-bottom:10px}

/* User-requested muted, looping hero backgrounds; poster remains underneath. */
.hero .hero-video-wrap,.page-hero .page-hero-video-wrap{display:block}.background-video-toggle{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;margin:12px 0;border:1px solid #ffffff70;border-radius:8px;background:#09111ccc;color:#fff;font:inherit;font-size:.875rem;cursor:pointer;position:relative;z-index:2}.background-video-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}

.background-video-toggle{width:32px;height:32px;min-height:0;padding:0;justify-content:center;font-size:14px;border-color:#ffffff40;background:#09111c80;opacity:.65}.background-video-toggle:hover,.background-video-toggle:focus-visible{opacity:1}

.background-video-toggle[hidden]{display:none}

/* Readable footer and inquiry contrast within the existing dark/red palette. */
.site-footer .footer-desc,.site-footer .footer-col li a,.site-footer .footer-contact-list li,.site-footer .footer-bottom p{color:#b5bdcc}
.service-inquiry-banner .btn-primary{background:#bd233b;color:#fff}.service-inquiry-banner .btn-primary:hover{background:#a81e33}

/* Mobile home uses the existing static gradient; do not display a frozen video poster. */
@media (max-width:768px), (hover:none) and (pointer:coarse){
  .hero .hero-video-wrap,.hero .background-video-toggle{display:none!important;}
}

/* =============================================
   추가 페이지 스타일 (about, services, portfolio, contact, admin)
   다크 테마 리뉴얼
   ============================================= */

/* === PAGE HERO (서브페이지 공통 - 홈 히어로 수준 확대) === */
.page-hero {
  min-height: 560px;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
}

/* 유튜브 배경 래퍼 */
.page-hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: none;
}
.page-hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(7,10,18,0.72) 0%,
    rgba(7,10,18,0.62) 55%,
    rgba(7,10,18,0.85) 100%
  );
}

/* 그리드 패턴 */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 1;
}
.page-hero-content {
  position: relative;
  z-index: 2;
}
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.45);
  font-size: 0.85rem;
  margin-bottom: 24px;
}
.page-breadcrumb a {
  color: rgba(255,255,255,0.45);
  transition: var(--transition);
}
.page-breadcrumb a:hover { color: var(--white); }
.page-breadcrumb span { color: rgba(255,255,255,0.25); }
.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.page-hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.85;
  max-width: 560px;
}

/* 히어로 악센트 라인 */
.page-hero-accent {
  display: inline-block;
  width: 56px;
  height: 4px;
  background: var(--gradient-accent);
  border-radius: 2px;
  margin-bottom: 24px;
}

/* 모바일: 유튜브 숨김, 높이 축소 */
@media (max-width: 768px) {
  .page-hero {
    min-height: 340px;
    padding: 120px 0 60px;
  }
  .page-hero-video-wrap { display: none; }
  .page-hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .page-hero p { font-size: 1rem; }
}

/* === ABOUT PAGE === */
.about-intro {
  background: var(--bg-dark);
}
.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-intro-text h2 {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.4;
}
.about-intro-text p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 2;
  margin-bottom: 20px;
  word-break: keep-all;
}
.about-visual-box {
  background: var(--gradient-dark);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about-stat-row {
  display: flex;
  gap: 24px;
}
.about-stat {
  flex: 1;
  text-align: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 24px 16px;
}
.about-stat-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.about-stat-unit {
  font-size: 1.2rem;
  color: var(--accent);
  font-weight: 700;
}
.about-stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-top: 6px;
}

/* === ABOUT POINT ITEMS (가독성 개선) === */
.about-point {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  transition: var(--transition);
}
.about-point:last-child { margin-bottom: 0; }
.about-point:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(230,57,70,0.25);
}
.about-point-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(230,57,70,0.12);
  border: 1px solid rgba(230,57,70,0.2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.05rem;
}
.about-point-body h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.about-point-body p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0;
}
.about-point-body p strong {
  color: var(--white);
  font-weight: 700;
}

/* 핵심 가치 (라이트 섹션으로 강조) */
.values-section { background: var(--light-bg); }
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.value-card {
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  text-align: center;
  transition: var(--transition);
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.value-icon {
  width: 64px;
  height: 64px;
  background: rgba(230,57,70,0.08);
  color: var(--accent);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 20px;
}
.value-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--light-text);
  margin-bottom: 8px;
}
.value-card p {
  font-size: 0.875rem;
  color: var(--light-text-2);
  line-height: 1.85;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* === SERVICES PAGE === */
.service-detail-section { background: var(--bg-dark); }
.service-detail-section:nth-child(even) { background: var(--bg-dark-2); }
.service-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.service-detail-inner.reverse { direction: rtl; }
.service-detail-inner.reverse > * { direction: ltr; }
.service-detail-text h2 {
  font-size: clamp(1.8rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.4;
}
.service-detail-text p {
  font-size: 0.975rem;
  color: var(--text-secondary);
  line-height: 2;
  margin-bottom: 24px;
}
.service-detail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.service-detail-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.service-detail-list i { color: var(--accent); font-size: 0.9rem; }
.service-visual {
  background: var(--bg-dark-3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
/* 유튜브 영상 영역 (서비스 페이지) */
.service-video-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bg-dark);
  overflow: hidden;
}
.service-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.service-video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.2);
  font-size: 3.5rem;
  gap: 16px;
  min-height: 250px;
}
.service-video-placeholder span {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.3);
}
.service-video-admin-hint {
  padding: 12px 20px;
  background: rgba(230,57,70,0.08);
  border-top: 1px solid rgba(230,57,70,0.15);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  gap: 8px;
}
.service-video-admin-hint i { color: var(--accent); }

/* 서비스 프로세스 (다크 강조) */
.service-process {
  background: var(--bg-dark-3);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.service-process::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-accent);
}
.service-process .section-title { color: var(--text-primary); }
.service-process .section-tag {
  background: rgba(230,57,70,0.15);
  border-color: rgba(230,57,70,0.25);
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  margin-top: 48px;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 10%; right: 10%;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}
.process-num {
  width: 72px; height: 72px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--accent);
  margin-bottom: 20px;
  position: relative; z-index: 1;
  transition: var(--transition);
}
.process-step:hover .process-num {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.process-step h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.process-step p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* === PORTFOLIO PAGE (다크) === */
.portfolio-page { background: var(--bg-dark); }
/* 필터 wrap — 전폭으로 늘어나도록 (container 밖에 위치) */
.portfolio-filter-wrap {
  width: 100%;
  margin-bottom: 48px;
}

/* PC: 가운데 정렬, 줄바꿈 허용 */
.portfolio-page-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 1rem;
}
.portfolio-search {
  max-width: 400px;
  margin: 0 auto 40px;
  position: relative;
}
.portfolio-search input {
  width: 100%;
  padding: 12px 20px 12px 48px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 40px;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition);
}
.portfolio-search input::placeholder { color: var(--text-muted); }
.portfolio-search input:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
}
.portfolio-search i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}
.portfolio-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.portfolio-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 60px;
}
.page-btn {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}
.page-btn.active, .page-btn:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

/* === CONTACT PAGE (다크 메인 + 폼은 라이트) === */
.contact-page { background: var(--bg-dark); }
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
}
.contact-info h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.contact-info > p {
  font-size: 0.975rem;
  color: var(--text-secondary);
  line-height: 2;
  margin-bottom: 40px;
}
.contact-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.contact-item-icon {
  width: 48px; height: 48px;
  background: rgba(230,57,70,0.12);
  color: var(--accent);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  border: 1px solid rgba(230,57,70,0.2);
}
.contact-item h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.contact-item p {
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.7;
}
/* 폼 카드는 흰색으로 강조 */
.contact-form-card {
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-xl);
}
.contact-form-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--light-text);
  margin-bottom: 32px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--light-text-2);
}
.form-group label span { color: var(--accent); }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--light-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: var(--light-text);
  background: var(--white);
  transition: var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(230,57,70,0.1);
}
.form-group textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.7;
}
.form-group select { cursor: pointer; }
.form-submit { width: 100%; justify-content: center; font-size: 1rem; padding: 16px; }
.form-notice { font-size: 0.8rem; color: var(--light-text-2); margin-top: 12px; text-align: center; }

/* 회사소개서 다운로드 버튼 */
.brochure-download-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #fff;
  color: #e63946;
  font-size: 1rem;
  font-weight: 700;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  text-decoration: none;
  margin-bottom: 10px;
  border: 2px solid #e63946;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(230,57,70,0.12);
}
.brochure-download-btn:hover {
  background: #e63946;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230,57,70,0.3);
}
.brochure-download-btn i:first-child { font-size: 1.3rem; }
.brochure-download-btn span { flex: 1; }
.brochure-download-btn i:last-child { font-size: 0.9rem; opacity: 0.8; }

/* 채팅 문의 버튼 */
.chat-inquiry-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #03c75a;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  text-decoration: none;
  margin-bottom: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(3,199,90,0.3);
}
.chat-inquiry-btn:hover {
  background: #02b350;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(3,199,90,0.45);
  color: #fff;
}
.chat-inquiry-btn i:first-child { font-size: 1.3rem; }
.chat-inquiry-btn span { flex: 1; }
.chat-inquiry-btn i:last-child { font-size: 0.85rem; opacity: 0.8; }

/* 구분선 */
.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: #aaa;
  font-size: 0.85rem;
}
.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ddd;
}

.form-success {
  display: none;
  text-align: center;
  padding: 40px;
}
.form-success i { font-size: 3rem; color: #4caf50; margin-bottom: 16px; }
.form-success h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--light-text);
  margin-bottom: 8px;
}
.form-success p { font-size: 0.9rem; color: var(--light-text-2); }

/* 소셜 아이콘 (연락처 페이지) */
.contact-social { display: flex; gap: 12px; }
.contact-social a {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 1.1rem;
  transition: var(--transition);
}
.contact-social a:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

/* === ADMIN PAGE === */
.admin-layout {
  min-height: 100vh;
  background: var(--gray-50);
}
.admin-header {
  background: var(--primary);
  padding: 0;
}
.admin-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.admin-header-inner .logo-text { font-size: 1.2rem; }
.admin-header-inner .admin-label {
  font-size: 0.75rem;
  background: var(--accent);
  color: var(--white);
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.admin-nav-btn {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.admin-nav-btn:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.admin-content { padding: 40px 0; }
.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.admin-section-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.admin-stat-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex; align-items: center; gap: 16px;
}
.admin-stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.admin-stat-icon.red { background: rgba(230,57,70,0.1); color: var(--accent); }
.admin-stat-icon.blue { background: rgba(10,22,40,0.08); color: var(--primary); }
.admin-stat-icon.green { background: rgba(76,175,80,0.1); color: #4caf50; }
.admin-stat-icon.orange { background: rgba(244,162,97,0.15); color: var(--gold); }
.admin-stat-icon.purple { background: rgba(156,39,176,0.1); color: #9c27b0; }
.admin-stat-icon.teal { background: rgba(0,150,136,0.1); color: #009688; }
.admin-stat-num { font-size: 1.8rem; font-weight: 800; color: var(--primary); line-height: 1; }
.admin-stat-label { font-size: 0.8rem; color: var(--gray-700); margin-top: 4px; }
.admin-tabs {
  display: flex;
  gap: 4px;
  background: var(--gray-100);
  padding: 4px;
  border-radius: var(--radius-md);
  width: fit-content;
  margin-bottom: 32px;
}
.admin-tab {
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  transition: var(--transition);
  cursor: pointer;
}
.admin-tab.active {
  background: var(--white);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.admin-table-wrap {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  padding: 14px 20px;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.admin-table td {
  padding: 16px 20px;
  font-size: 0.875rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--gray-50); }
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.badge-red { background: rgba(230,57,70,0.1); color: var(--accent); }
.badge-blue { background: rgba(10,22,40,0.08); color: var(--primary); }
.badge-green { background: rgba(76,175,80,0.1); color: #388e3c; }
.badge-yellow { background: rgba(244,162,97,0.15); color: #e65100; }
.action-btn {
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  transition: var(--transition);
  cursor: pointer;
}
.action-btn-edit { background: rgba(10,22,40,0.06); color: var(--primary); }
.action-btn-edit:hover { background: var(--primary); color: var(--white); }
.action-btn-delete { background: rgba(230,57,70,0.08); color: var(--accent); }
.action-btn-delete:hover { background: var(--accent); color: var(--white); }
.form-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.form-modal.active { opacity: 1; pointer-events: auto; }
.form-modal-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: min(1100px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
.form-modal.active .form-modal-box { transform: scale(1); }
.form-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 32px 0;
}
.form-modal-header h3 { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
.form-modal-body { padding: 24px 32px 32px; }
.img-preview-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.img-preview-item {
  aspect-ratio: 16/9;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.img-preview-item .remove-img {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: rgba(0,0,0,0.7);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.admin-login {
  min-height: 100vh;
  background: var(--gradient-main);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.admin-login-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px;
  width: min(440px, 100%);
  box-shadow: var(--shadow-xl);
}
.admin-login-box h1 { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.admin-login-box p { font-size: 0.9rem; color: var(--gray-700); margin-bottom: 32px; }

/* === RESPONSIVE ADDITIONS === */
@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .service-detail-inner { grid-template-columns: 1fr; gap: 40px; }
  .service-detail-inner.reverse { direction: ltr; }
  .process-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .process-steps::before { display: none; }
  .portfolio-full-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .about-intro-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .page-hero { padding-bottom: 48px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .portfolio-full-grid { grid-template-columns: 1fr; }
  .contact-form-card { padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .admin-table { font-size: 0.8rem; }
  .admin-table td, .admin-table th { padding: 10px 12px; }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .values-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .about-stat-row { flex-direction: column; }
  .admin-stats { grid-template-columns: 1fr; }
}

/* Service layout: keep content aligned, readable and responsive. */
.service-detail-inner{gap:clamp(32px,5vw,72px);align-items:start}
.service-detail-inner>*{min-width:0}
.service-detail-inner .service-visual{align-self:center;width:100%}
.service-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.service-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:0;white-space:normal;text-align:center}
.service-detail-section .service-detail-text p{max-width:60ch}
.service-detail-page{max-width:1120px;padding-bottom:80px;font-size:16px;line-height:1.8}
.service-detail-page>nav:first-child{font-size:.9rem;color:var(--text-secondary);margin-bottom:24px}
.service-detail-page h1{margin:0 0 24px;font-size:clamp(2rem,4vw,3rem);line-height:1.3}
.service-detail-page h2{font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.4;margin:0 0 18px}
.service-detail-page p{font-size:1rem;line-height:1.9;color:var(--text-secondary);margin:0 0 20px;max-width:80ch}
.service-detail-page article{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px}
.service-detail-page article>h1,.service-detail-page article>.project-description{grid-column:1/-1}
.service-detail-page article>section{padding:28px;border:1px solid var(--border-color,#303b4c);border-radius:16px;background:var(--bg-dark-2,#151e2b);margin:8px 0}
.service-detail-page article>section ul{display:grid;gap:12px;padding:0;list-style:none}
.service-detail-page article>section li{padding-left:18px;position:relative;line-height:1.75}
.service-detail-page article>section li:before{content:'•';position:absolute;left:0;color:var(--accent,#f1364e)}
.service-detail-page>section{margin:48px 0 32px}
.service-detail-page nav[aria-label="관련 카테고리"],.service-detail-page nav[aria-label="다른 서비스"],.service-detail-page>p:last-child{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:20px 0}
.service-detail-page nav .btn{margin:0;min-height:46px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.service-detail-page .portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
.service-detail-page .portfolio-card{display:flex;min-height:140px;height:100%;border-radius:14px}
.service-detail-page .portfolio-body{width:100%;padding:24px}
.service-detail-page .portfolio-body h3{font-size:1rem;line-height:1.7;margin:0;white-space:normal;overflow-wrap:anywhere}
@media(max-width:900px){.service-detail-page .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.service-detail-page article{grid-template-columns:1fr;gap:16px}.service-detail-page article>section{padding:22px}.service-detail-page .portfolio-grid{grid-template-columns:1fr;gap:14px}.service-detail-page .portfolio-card{min-height:100px}.service-actions .btn{flex:1 1 100%}.service-detail-page nav .btn{flex:1 1 100%}.service-detail-page{padding-top:110px}}

.service-detail-page .portfolio-card{flex-direction:column;overflow:hidden}.service-project-media{position:relative;aspect-ratio:16/9;width:100%;background:var(--bg-dark,#0b1017);overflow:hidden}.service-project-media img{display:block;width:100%;height:100%;object-fit:cover}.service-project-video{position:absolute;right:12px;bottom:12px;background:#111d;color:#fff;padding:5px 10px;border-radius:20px;font-size:.8rem}.service-project-placeholder{display:grid;place-items:center;height:100%;color:var(--text-secondary)}.service-video-project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;padding:20px;background:var(--bg-dark-2);border:1px solid var(--border-color,#303b4c);border-radius:16px;color:inherit}.service-video-project .service-project-media{border-radius:10px}.service-video-project h3{font-size:1.2rem;line-height:1.7;overflow-wrap:anywhere}.service-video-project p{margin:12px 0 0}@media(max-width:640px){.service-video-project{grid-template-columns:1fr;gap:18px;padding:16px}}

/* One navigation group above related projects, followed by one clear inquiry action. */
.service-detail-page .service-project-navigation{display:flex;flex-wrap:wrap;gap:12px;padding:20px;background:#111b29;border:1px solid #344359;border-radius:16px;margin:24px 0}.service-nav-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border:1px solid;border-radius:10px;font-size:.95rem;font-weight:700;line-height:1.5;text-align:center;transition:background .15s,border-color .15s}.service-nav-all{background:#eef3fb;border-color:#eef3fb;color:#142237}.service-nav-category{background:#38202a;border-color:#965063;color:#ffced7}.service-nav-service{background:#182f47;border-color:#426e98;color:#c7e6ff}.service-nav-link:hover{filter:brightness(1.15);text-decoration:none}.service-nav-link:focus-visible{outline:3px solid #fff;outline-offset:4px}.service-detail-page .service-inquiry-banner{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px;margin:40px 0 0;border:1px solid #98404e;border-radius:18px;background:linear-gradient(110deg,#2c1c28,#161e2d)}.service-inquiry-banner h2{margin:0 0 10px}.service-detail-page .service-inquiry-banner p{margin:0;max-width:65ch}.service-inquiry-banner>.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;flex-shrink:0}@media(max-width:640px){.service-detail-page .service-project-navigation{padding:14px;gap:10px}.service-nav-link{flex:1 1 calc(50% - 10px);padding:12px 10px;font-size:.9rem}.service-nav-all{flex-basis:100%}.service-detail-page .service-inquiry-banner{flex-direction:column;align-items:stretch;padding:24px;gap:22px}.service-inquiry-banner>.btn{width:100%}}

/* Portfolio-first service pages with readable illustrated planning cards. */
.service-portfolio-first .service-page-intro{margin:0 0 28px}.service-portfolio-first .service-related-projects{margin:0 0 32px}.service-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:48px 0}.service-detail-page .service-guide-card{margin:0;border-radius:22px;overflow:hidden;background:#fff8e8;color:#302414;border:1px solid #e4cba6;box-shadow:0 12px 32px #0002}.service-guide-art-wrap{border-bottom:4px solid #ed324e}.service-guide-art{height:190px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#7c244c;background:linear-gradient(130deg,#ffe7d0,#ffd9e5)}.service-guide-art.guide-calendar{color:#1b4c70;background:linear-gradient(130deg,#d4f4f3,#deebff)}.service-guide-art svg{width:160px;height:120px;z-index:1;transform:rotate(-5deg)}.guide-orbit{position:absolute;width:190px;height:190px;border:1px solid currentColor;opacity:.18;border-radius:50%;right:-30px;top:-65px}.orbit-two{width:120px;height:120px;left:24px;top:120px}.guide-art-caption{position:absolute;bottom:16px;font-size:.68rem;letter-spacing:.12em;font-weight:700}.service-guide-body{padding:28px}.service-guide-tag{display:inline-flex;background:#d81935;color:white;font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:18px;margin-bottom:16px}.service-detail-page .service-guide-body h2{font-size:1.5rem;color:#302414;margin:0 0 24px;line-height:1.45}.service-guide-body h3{font-size:1.05rem;color:#4e2c27;line-height:1.65;margin:22px 0 8px}.service-detail-page .service-guide-body p{font-size:1rem;line-height:1.85;color:#675440;margin:0 0 18px}.service-guide-body ul{list-style:none;padding:0;display:grid;gap:16px;margin:24px 0}.service-guide-body li{display:flex;gap:12px;align-items:flex-start;line-height:1.75}.service-step-number{flex-shrink:0;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#f2dfc3;color:#77462d;font-size:.8rem;font-weight:800}.service-guide-link{display:inline-flex;color:#b30c29;font-weight:700;line-height:1.7}.service-eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;color:#ffb4c0;margin-bottom:12px}.service-portfolio-first article.service-seo-copy{display:block;padding:32px;margin:48px 0;border:1px solid #2b384d;border-radius:18px;background:#101826}.service-seo-copy>section{margin:28px 0}.service-seo-copy li{line-height:1.9;margin:8px 0}.service-detail-page .service-inquiry-banner h2{font-size:clamp(1.35rem,2.3vw,1.8rem)}
@media(max-width:700px){.service-guide-grid{grid-template-columns:1fr;gap:24px;margin:32px 0}.service-guide-body{padding:24px}.service-guide-art{height:160px}.service-portfolio-first article.service-seo-copy{padding:24px}}

/* Service reading rhythm and restrained editorial guide artwork. */
.service-detail-page{line-height:1.6;letter-spacing:-.01em}
.service-detail-page h1{line-height:1.25;letter-spacing:-.02em}
.service-detail-page h2{line-height:1.35;letter-spacing:-.02em}
.service-detail-page p{line-height:1.6;margin-bottom:14px}
.service-detail-page .portfolio-body{padding:20px}
.service-detail-page .portfolio-body h3{line-height:1.5;letter-spacing:-.01em}
.service-video-project h3{line-height:1.45;letter-spacing:-.015em;margin:0}
.service-guide-grid{gap:24px;margin:36px 0}
.service-detail-page .service-guide-card{background:#131c28;border-color:#344154;border-radius:18px;box-shadow:none;color:#edf2f8}
.service-guide-art-wrap{border-bottom:1px solid #344154}
.service-guide-art,.service-guide-art.guide-calendar{height:112px;background:linear-gradient(120deg,#1e2939,#141e2b);color:#e99baa}
.service-guide-art.guide-calendar{color:#9cb9d6}
.service-guide-art svg{width:min(100%,320px);height:100px;transform:none}
.service-guide-body{padding:26px}
.service-guide-tag{background:#32232d;color:#ffc4ce;border:1px solid #704451;border-radius:6px;padding:5px 9px;font-size:12px;line-height:1.4;letter-spacing:0;margin-bottom:12px}
.service-detail-page .service-guide-body h2{font-size:24px;color:#f4f7fc;line-height:1.35;margin:0 0 20px;letter-spacing:-.02em;text-wrap:balance}
.service-guide-body h3{font-size:17px;color:#f0d7de;line-height:1.45;margin:20px 0 8px;letter-spacing:-.01em}
.service-detail-page .service-guide-body p{font-size:16px;line-height:1.6;color:#bdc8d8;margin:0 0 14px}
.service-guide-body ul{gap:14px;margin:20px 0}
.service-guide-body li{line-height:1.55;gap:12px;color:#d4ddea}
.service-step-number{width:28px;height:28px;background:#243145;color:#d6e4f7;border:1px solid #41536b;border-radius:6px;letter-spacing:0}
.service-guide-link{color:#ffb4c0;line-height:1.5}
.service-detail-page .service-seo-copy li{line-height:1.6;margin:6px 0}
.service-detail-page .service-seo-copy>section{padding:24px;margin:20px 0}
.service-detail-page .service-inquiry-banner h2{line-height:1.35;text-wrap:balance}
@media(max-width:700px){.service-guide-body{padding:22px}.service-detail-page .service-guide-body h2{font-size:22px}.service-guide-art,.service-guide-art.guide-calendar{height:100px}.service-guide-grid{gap:20px;margin:28px 0}}

/* Premium glass artwork based on the supplied reference, brand navy and crimson. */
.service-guide-art.premium-guide-art,.service-guide-art.premium-guide-art.guide-calendar{height:auto;aspect-ratio:1.5;background-image:url("../images/service-guides/premium-glass-v1.webp");background-size:200% 100%;background-repeat:no-repeat;background-position:left center}.service-guide-art.premium-guide-art.guide-calendar{background-position:right center}.service-guide-art-wrap{border-bottom:1px solid #3c4558}.service-detail-page .service-guide-card{background:linear-gradient(150deg,#1b2332,#111a26);border-color:#394456;box-shadow:0 12px 28px #0002}

/* Match project-detail composition beneath portfolio card titles. */
.portfolio-body .project-card-composition{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px;align-items:flex-start}.project-card-composition>span{display:inline-flex;padding:5px 9px;border:1px solid #945269;border-radius:7px;font-size:12px;font-weight:700;line-height:1.4;background:#402330;color:#ffb3c0;letter-spacing:-.01em}.project-card-composition>.project-card-category{background:#193854;border-color:#477da6;color:#c3e7ff}.portfolio-body:has(.project-card-composition) h3{margin-bottom:0}

/* Compact contact processing notice; no consent gate or preselected controls. */
.contact-privacy-notice{margin-top:18px;color:#4c5869;font-size:.85rem;line-height:1.65;text-align:center}.contact-privacy-notice>p{margin:0 0 8px}.contact-privacy-details summary{display:list-item;width:fit-content;margin:0 auto;cursor:pointer;color:#263c56;text-decoration:underline;text-underline-offset:4px;padding:8px 4px}.contact-privacy-details summary:focus-visible{outline:2px solid #ff9eb1;outline-offset:4px;border-radius:4px}.contact-privacy-content{text-align:left;margin-top:12px;padding:20px;border:1px solid #3b475b;border-radius:12px;background:#111a28;overflow-wrap:anywhere}.contact-privacy-content dl{margin:0}.contact-privacy-content dt{color:#f0f4fa;font-weight:700;margin:16px 0 5px}.contact-privacy-content dt:first-child{margin-top:0}.contact-privacy-content dd{margin:0;color:#c5cedd}.contact-privacy-content a{color:#b6dbff;text-decoration:underline;text-underline-offset:3px}.contact-privacy-content>p{margin:18px 0 0;font-size:.8rem;color:#bfc9d9}@media(max-width:640px){.contact-privacy-content{padding:16px}.contact-privacy-notice{font-size:.82rem}}

.portfolio-detail{padding-top:130px;padding-bottom:64px;max-width:1100px}.portfolio-detail h1{font-size:clamp(1.7rem,4vw,2.8rem);margin:24px 0;overflow-wrap:anywhere}.portfolio-detail section{margin:36px 0}.portfolio-detail dl{display:grid;grid-template-columns:130px 1fr;gap:12px}.portfolio-detail dd{margin:0}.project-description{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9}.detail-image{display:inline-block;width:calc(50% - 12px);margin:6px;vertical-align:top}.detail-image img{display:block;width:100%;height:auto;border-radius:12px}.portfolio-detail .portfolio-card{color:inherit;text-decoration:none}#projectMediaDialog{max-width:95vw;max-height:95vh;border:0;border-radius:12px;padding:16px}#projectMediaDialog::backdrop{background:#000b}#projectMediaContent img{display:block;max-width:85vw;max-height:80vh;object-fit:contain}#projectMediaContent iframe{border:0;width:80vw;height:70vh}@media(max-width:640px){.detail-image{width:100%;margin:8px 0}.portfolio-detail dl{grid-template-columns:100px 1fr}#projectMediaContent iframe{width:85vw;height:50vh}}

/* Reserve a stable presentation frame without cropping original photos. */
.detail-image{aspect-ratio:16/9;vertical-align:top;background:#f3f4f6}.detail-image img{display:block;width:100%;height:100%;object-fit:contain}[data-detail-video]{display:inline-flex;flex-direction:column;max-width:480px}[data-detail-video] img{width:100%;height:auto;aspect-ratio:4/3}#projectMediaContent iframe{aspect-ratio:16/9;border:0}

.portfolio-detail .btn-outline{color:var(--text-primary,#f3f4f6);border-color:#b8c4d0}.portfolio-detail nav .btn{margin:4px 4px 4px 0;white-space:normal;overflow-wrap:anywhere}

.project-feature-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:16px;background:#000}.project-scope{padding:24px;border:1px solid #7b3e4d;border-radius:16px;background:#201b29}.project-scope .performed-tags{display:flex;flex-wrap:wrap;gap:8px}.project-scope .performed-tag{color:#ffb3c0;background:#402330;border:1px solid #945269;padding:7px 12px;border-radius:8px;font-weight:700}.project-scope ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0;list-style:none}.project-scope h3{color:#ffc0cb}.project-scope p{line-height:1.6}.project-detail-page>.portfolio-grid,.project-detail-page>section>.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.project-detail-page .portfolio-card{overflow:hidden;border:1px solid #344154;border-radius:16px;background:#172130;display:flex;flex-direction:column}.project-related-image{aspect-ratio:16/9;background:#111827}.project-related-image img{width:100%;height:100%;object-fit:cover;display:block}.project-detail-page .portfolio-body{padding:20px}.project-detail-page .portfolio-body h3{line-height:1.5;font-size:17px}.project-final-inquiry{padding:28px;border:1px solid #8c4254;border-radius:18px;background:linear-gradient(120deg,#30202e,#151e2b)}.project-final-inquiry>div>span{font-size:12px;letter-spacing:.12em;color:#ffb4c0}.project-final-inquiry h2{margin:10px 0}.project-inquiry-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:22px}.project-inquiry-actions>.btn{order:-1}.project-detail-page{line-height:1.6;letter-spacing:-.01em}@media(max-width:640px){.project-scope ul,.project-detail-page>section>.portfolio-grid{grid-template-columns:1fr}.project-final-inquiry{padding:22px}.project-inquiry-actions{align-items:stretch;flex-direction:column}}

.project-detail-page dl:has(.project-type-label){display:flex;flex-wrap:wrap;align-items:center;gap:12px}.project-detail-page .project-type-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.project-type-badge{display:inline-flex;align-items:center;padding:6px 12px;background:#38202a;color:#ffc2cf;border:1px solid #925365;border-radius:8px;font-size:14px;font-weight:700;line-height:1.5}

.project-detail-page .project-scope-sample h2{font-size:22px;margin:0 0 16px;line-height:1.35}.project-scope-sample h2 small{display:inline-block;font-size:12px;font-weight:500;color:#b7becd;margin-left:8px}.project-detail-page .scope-sample-note{font-size:13px;line-height:1.5;color:#b7becd;margin:14px 0 0}

.project-detail-page .project-scope .project-category-tag{background:#193854;color:#c3e7ff;border-color:#477da6;text-decoration:none}.project-feature-image img{display:block;width:100%;max-height:650px;aspect-ratio:16/9;object-fit:contain;border-radius:16px;background:#111827}.project-detail-page .project-scope h2{font-size:22px;margin:0 0 16px}.project-detail-page .project-scope .performed-tags{gap:8px}.project-detail-page .project-scope .performed-tag{font-size:14px;line-height:1.5}.project-detail-page>article>dl:empty{display:none}

/* Distinct, accessible photo lightbox controls. */
#projectMediaDialog{background:#111a28;color:#f4f7fc;border:1px solid #43516a;padding:18px;box-shadow:0 20px 70px #0008}#projectMediaDialog [data-close-media]{display:block;margin:0 0 14px auto;padding:10px 18px;border:1px solid #718199;border-radius:8px;background:#27364a;color:#fff;font:inherit;font-weight:700;cursor:pointer}#projectMediaContent .photo-navigation{display:flex;justify-content:space-between;gap:20px;margin-top:18px}#projectMediaContent .photo-navigation button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:10px;border:1px solid #8197b4;font:inherit;font-weight:700;cursor:pointer;background:#273b54;color:#fff}#projectMediaContent .photo-navigation .photo-next{background:#d92643;border-color:#ff7187}#projectMediaContent .photo-navigation button:hover{filter:brightness(1.2)}#projectMediaDialog button:focus-visible{outline:3px solid #fff;outline-offset:3px}#projectMediaContent .photo-position{text-align:center;margin:12px 0 0;color:#d2dbe8;font-size:14px;letter-spacing:.05em}@media(max-width:480px){#projectMediaContent .photo-navigation{gap:12px}#projectMediaContent .photo-navigation button{padding:12px 16px;flex:1}}

#projectMediaDialog{box-sizing:border-box;max-height:95vh;max-height:95dvh}#projectMediaContent img{max-height:calc(95vh - 185px);max-height:calc(95dvh - 185px);max-width:100%;margin:auto}#projectMediaContent .photo-navigation{margin-top:14px}#projectMediaContent .photo-position{margin-top:8px}

/*!
 * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */
.fa{font-family:var(--fa-style-family,"Daman UI Icons Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Daman UI Icons Free"}.fa-brands,.fab{font-family:"Daman UI Icons Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{-webkit-animation-name:fa-beat;animation-name:fa-beat;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{-webkit-animation-name:fa-bounce;animation-name:fa-bounce;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{-webkit-animation-name:fa-fade;animation-name:fa-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{-webkit-animation-name:fa-beat-fade;animation-name:fa-beat-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{-webkit-animation-name:fa-flip;animation-name:fa-flip;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{-webkit-animation-name:fa-shake;animation-name:fa-shake;-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-duration:var(--fa-animation-duration,2s);animation-duration:var(--fa-animation-duration,2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,steps(8));animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s}}@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}.fa-rotate-by{-webkit-transform:rotate(var(--fa-rotate-angle,none));transform:rotate(var(--fa-rotate-angle,none))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}

.fa-file-alt:before{content:"\f15c"}.fa-laptop:before{content:"\f109"}.fa-comments:before{content:"\f086"}.fa-blog:before{content:"\f781"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-film:before{content:"\f008"}.fa-lightbulb:before{content:"\f0eb"}.fa-exclamation-circle:before{content:"\f06a"}.fa-users:before{content:"\f0c0"}.fa-chevron-up:before{content:"\f077"}.fa-bullseye:before{content:"\f140"}.fa-globe:before{content:"\f0ac"}.fa-star:before{content:"\f005"}.fa-wifi:before{content:"\f1eb"}.fa-image:before{content:"\f03e"}.fa-handshake:before{content:"\f2b5"}.fa-play-circle:before{content:"\f144"}.fa-check-circle:before{content:"\f058"}.fa-layer-group:before{content:"\f5fd"}.fa-arrow-right:before{content:"\f061"}.fa-comment-dots:before{content:"\f4ad"}.fa-phone:before{content:"\f095"}.fa-file-pdf:before{content:"\f1c1"}.fa-tag:before{content:"\f02b"}.fa-comment:before{content:"\f075"}.fa-envelope:before{content:"\f0e0"}.fa-info-circle:before{content:"\f05a"}.fa-calendar-check:before{content:"\f274"}.fa-clock:before{content:"\f017"}.fa-images:before{content:"\f302"}.fa-download:before{content:"\f019"}.fa-broadcast-tower:before{content:"\f519"}.fa-bolt:before{content:"\f0e7"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-play:before{content:"\f04b"}.fa-search:before{content:"\f002"}.fa-chevron-down:before{content:"\f078"}.fa-tasks:before{content:"\f0ae"}.fa-times:before{content:"\f00d"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-building:before{content:"\f1ad"}.fa-music:before{content:"\f001"}.fa-calendar:before{content:"\f133"}.fa-check:before{content:"\f00c"}.fa-paper-plane:before{content:"\f1d8"}.fa-video:before{content:"\f03d"}.fa-instagram:before{content:"\f16d"}.fa-youtube:before{content:"\f167"}@font-face{font-family:"Daman UI Icons Free";font-style:normal;font-weight:900;font-display:swap;src:url("/fonts/icons-solid.woff2") format("woff2")}@font-face{font-family:"Daman UI Icons Free";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/icons-regular.woff2") format("woff2")}@font-face{font-family:"Daman UI Icons Brands";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/icons-brands.woff2") format("woff2")}.fas,.fa-solid{font-weight:900}.far,.fa-regular{font-weight:400}.fab,.fa-brands{font-weight:400}