@charset "utf-8";

/* =====================================================
   CNC Design System Override
   Based on DESIGN_SYSTEM_GUIDE.md
   ===================================================== */

/* ----- Pretendard Font (CDN) ----- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ----- CSS Variables ----- */
:root {
  /* Primary Colors — Primary Dark를 메인으로 사용 */
  --ds-primary: hsl(224, 76%, 38%);
  --ds-primary-light: hsl(224, 60%, 88%);
  --ds-primary-dark: hsl(224, 76%, 28%);
  --ds-primary-bright: #1D4FD7; /* 다크모드 강조용 */
  --ds-primary-rgb: 23, 63, 171;

  /* Semantic Colors */
  --ds-success: #004516;
  --ds-warning: hsl(38, 92%, 50%);
  --ds-destructive: hsl(0, 72%, 51%);
  --ds-accent: #FBBF24;

  /* Neutral Colors */
  --ds-background: #FFFFFF;
  --ds-foreground: #1A1A1A;
  --ds-card: #F8FAFC;
  --ds-muted: hsl(214, 32%, 94%);
  --ds-border: #E2E8F0;

  /* Shadows */
  --ds-shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.06);
  --ds-shadow-md: 0 2px 8px hsla(0, 0%, 0%, 0.08);
  --ds-shadow-lg: 0 4px 16px hsla(0, 0%, 0%, 0.10);
  --ds-shadow-glow: 0 0 16px rgba(23, 63, 171, 0.15);

  /* Border Radius - Sharp corners (max 4px) */
  --ds-radius: 4px;
  --ds-radius-sm: 2px;

  /* Transitions */
  --ds-transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-bounce: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Override existing color variables */
  --color-blue1: hsl(224, 76%, 38%);
  --color-blue2: hsl(224, 60%, 70%);
  --color-blue3: hsl(224, 60%, 88%);
  --color-blue4: hsl(224, 60%, 95%);
}

/* ----- Typography: Pretendard 전면 적용 ----- */
/* 가이드: 본문/헤딩 = Pretendard, 로고 전용 = Outfit */

body,
input,
textarea,
select,
table,
button {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Roboto', sans-serif !important;
}

/* Korean NanumSquareNeo → Pretendard 교체 */
.neo-300 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 300 !important;
}
.neo-400,
[class*="neo-400"] {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 400 !important;
}
.neo-500 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 500 !important;
}
.neo-600 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 600 !important;
}
.neo-700 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 700 !important;
}
.neo-800 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 800 !important;
}
.neo-900 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 900 !important;
}

/* English Outfit → Pretendard 교체 (로고 제외) */
.en-100 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 100 !important;
}
.en-300 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 300 !important;
}
.en-400 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 400 !important;
}
.en-500 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 500 !important;
}
.en-600 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 600 !important;
}
.en-700 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 700 !important;
}
.en-800 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 800 !important;
}

/* Chinese/Japanese Noto Sans SC → Pretendard 교체 */
.sc-100 {
  font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans SC', sans-serif !important;
  font-weight: 100 !important;
}
.sc-300 {
  font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans SC', sans-serif !important;
  font-weight: 300 !important;
}
.sc-400 {
  font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans SC', sans-serif !important;
  font-weight: 400 !important;
}
.sc-500 {
  font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans SC', sans-serif !important;
  font-weight: 500 !important;
}
.sc-600 {
  font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans SC', sans-serif !important;
  font-weight: 600 !important;
}
.sc-700 {
  font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans SC', sans-serif !important;
  font-weight: 700 !important;
}
.sc-800 {
  font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans SC', sans-serif !important;
  font-weight: 800 !important;
}

/* 로고만 Outfit 유지 */
.main-logo-copy,
.header-dev .logo {
  font-family: 'Outfit', 'Pretendard Variable', sans-serif !important;
}

/* ----- HEADER: Glassmorphism ----- */
.header-dev {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-dev.col-white .h-top {
  background: var(--ds-primary-dark) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.header-dev.col-white.scrolled .h-top {
  background: var(--ds-primary-dark) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media screen and (min-width: 1024px) {
  .header-dev {
    background: var(--ds-primary-dark) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .header-dev.col-white {
    background: var(--ds-primary-dark) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .header-dev.scrolled {
    background: var(--ds-primary-dark) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Sub-menu: sharp corners */
  .header-dev .navbar-dev > li .sub-menu {
    border-radius: var(--ds-radius) !important;
    box-shadow: var(--ds-shadow-lg);
    border: 1px solid var(--ds-border);
  }

  .header-dev .navbar-dev > li .sub-menu li a:hover {
    border-radius: var(--ds-radius-sm) !important;
    background: var(--ds-primary-light);
  }
}

/* ----- HERO SECTION ----- */

/* Hero overlay and text-shadow are applied via inline styles in index.html
   (.main-visual needs position:relative for the overlay div to work) */

/* ----- 파랑 폰트색 대표 파랑 통일 ----- */
.text-blue {
  color: var(--ds-primary) !important;
}
.bs-icon-wrap span {
  color: var(--ds-primary) !important;
}
.squre-wrap:after {
  color: var(--ds-primary) !important;
}

/* Primary color for orange accent -> keep orange, but update primary blue references */
.visual-copy .main-copy .orange {
  color: var(--ds-accent);
}

/* ----- SECTION 2: Business / Services ----- */
/* Badge: 원본 그대로 유지 (둥근 리본) */
.badge-type-title .badge {
  background-color: var(--ds-primary) !important;
}

/* Business card: 원본 border-radius 유지 */
.business-list-wrap li a {
  transition: var(--ds-transition-smooth);
  overflow: hidden;
}

.business-list-wrap li a:hover {
  box-shadow: 0 8px 32px rgba(23, 63, 171, 0.25);
  transform: translateY(-4px);
}

/* Business card image style */
.business-list-wrap li a {
  position: relative;
  background: hsl(224, 76%, 30%) !important;
}
.business-list-wrap li a::before {
  display: none;
}
.business-list-wrap li a:hover::before {
  display: none;
}
.business-hover {
  z-index: 8 !important;
}
.business-list-wrap li a img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: brightness(1.2);
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.business-list-wrap li a:hover img {
  transform: scale(1.05);
  opacity: 1;
  filter: brightness(1.2);
}

/* Section 2 video: keep original rounded corners */
.main-visual2 {
  border-radius: 50px !important;
}

.main-visual2-wrap {
  top: -200px !important;
}

#section02 {
  z-index: 9 !important;
  position: relative !important;
}

/* Circular text: center of circle sits on video top edge */
.circular-text {
  top: -60px !important;
  right: 30px !important;
}

/* Arrow SVG inside circular-text: match original 84px size */
.circular-text > svg:first-child {
  width: 84px !important;
  height: 84px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
}

/* ----- SECTION 3: Experiences ----- */
#section03 {
  background-color: var(--ds-primary-dark) !important;
}
#section03 .main-inner {
  padding: 140px 0 !important;
}

/* experience-icon: 원본 그대로 유지 */
.main-experiences-wrap {
  margin-top: 50px !important;
}
.main-experiences-wrap .experience-icon {
  margin-bottom: 20px !important;
}

/* Metric-style count numbers (font defined in SECTION TITLES block) */
.main-experiences-wrap p.count {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ----- SECTION 4: Brands ----- */
.brand-more-btn > a {
  border-radius: var(--ds-radius) !important;
  padding: 10px 24px;
  transition: var(--ds-transition-smooth);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.brand-more-btn > a:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Logo box */
.logo-box .logo-wrap img {
  opacity: 0.6;
}
.logo-box .logo-wrap li:hover img {
  opacity: 1;
  transform: scale(0.65);
}

/* ----- FOOTER: Light style ----- */
#footer {
  background-color: var(--ds-card) !important;
  border-top: 1px solid var(--ds-border) !important;
  padding: 48px 0;
}

.f-info li a {
  color: var(--ds-foreground);
  font-weight: 600;
}

.f-info li a:hover {
  color: var(--ds-primary) !important;
}

.f-copyright {
  color: #64748B;
}

/* Family site dropdown: sharp corners */
.family-site-list ul {
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow-md);
}

.family-site-list a:hover {
  color: var(--ds-primary) !important;
  background-color: var(--ds-primary-light) !important;
}

.f-family-site button:hover:after {
  background-color: var(--ds-primary) !important;
}

.f-family-site.active button:after {
  background-color: var(--ds-primary) !important;
}

/* ----- GENERAL: Buttons & Links ----- */
/* All rounded elements -> sharp */
.main-section .go-more .i-go {
  border-radius: var(--ds-radius) !important;
}

.main-news-list .photo {
  border-radius: var(--ds-radius) !important;
}

.main-news-list a:hover .title {
  color: var(--ds-primary) !important;
}

/* Select dropdown: sharp corners */
.select .select-options {
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow-md);
}

/* ----- SECTION TITLES ----- */
.main-title,
.main-title b,
.main-title strong {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 900 !important; /* font-black: 페이지/섹션 제목 */
  letter-spacing: -0.02em;
}

.main-sub-title,
.main-sub-title b,
.main-sub-title strong {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 500 !important;
}

/* b/strong 태그 전역 리셋 해제 (Pretendard weight 적용 보장) */
b, strong {
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* 비즈니스 섹션 제목 - 폰트만 변경, 크기/패딩은 원본 유지 */
.business-main-title h3 {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
}

.business-main-title span {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
}

/* 뱃지 텍스트 - 폰트만 변경, 크기는 원본 유지 */
.badge-type-title .badge {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
}

/* 비즈니스 카드 텍스트 */
.business-hover {
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  padding: 0 !important;
}
.business-hover p,
.business-hover span {
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 20px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.business-hover p {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  padding-top: 10px !important;
}
.business-hover span {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ds-accent) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  padding-bottom: 10px !important;
}

/* 히어로 메인 카피 (AI-Powered / Human-Mastered) - Outfit 유지 (로고/영문 강조) */
.visual-copy .main-copy {
  font-family: 'Outfit', 'Pretendard Variable', sans-serif !important;
}

/* 히어로 서브 카피 */
.visual-copy .main-sub-copy {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
}

/* 경험/실적 숫자 */
.main-experiences-wrap p.count {
  font-weight: 600 !important;
  letter-spacing: -0.03em;
}

/* 경험/실적 라벨 */
.main-experiences-wrap .experience-sub {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 500 !important;
}

/* 브랜드 텍스트 */
.brand-text p {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
}

/* 네비게이션 */
.header-dev .navbar-dev > li > a {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 600 !important;
}
.header-dev .navbar-dev > li .sub-menu li a {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
  font-weight: 500 !important;
}

/* 푸터 텍스트 */
.f-info li {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
}
.f-contact li {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
}
.f-copyright {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;
}

/* ----- SCROLL DOWN indicator ----- */
.scroll-down .mouse {
  border-radius: 60px; /* keep pill shape for mouse icon */
}

/* ----- Circular text: keep original animation ----- */

/* ----- MOBILE OVERRIDES ----- */
@media all and (max-width: 532px) {
  .main-visual2 {
    border-radius: 0 !important;
  }
}

/* ----- Comparison Toggle Button ----- */
.design-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  gap: 8px;
}

.design-toggle button {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: var(--ds-transition-smooth);
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
  border-radius: var(--ds-radius);
}

.design-toggle .btn-original {
  background: #333;
  color: #fff;
}

.design-toggle .btn-original:hover {
  background: #555;
}

.design-toggle .btn-new {
  background: var(--ds-primary);
  color: #fff;
}

.design-toggle .btn-new:hover {
  background: var(--ds-primary-dark);
}

.design-toggle .btn-active {
  box-shadow: 0 0 0 3px rgba(23, 63, 171, 0.4);
}

/* =====================================================
   DARK MODE (body.dark)
   Based on DESIGN_SYSTEM_GUIDE.md Dark Mode columns
   ===================================================== */

body.dark {
  --ds-primary: #1D4FD7;
  --ds-primary-light: hsl(224, 60%, 30%);
  --ds-primary-dark: hsl(224, 76%, 38%);
  --ds-primary-bright: #3564E3;
  --ds-primary-rgb: 29, 79, 215;

  --ds-success: hsl(141, 70%, 35%);
  --ds-warning: hsl(38, 92%, 55%);
  --ds-destructive: hsl(0, 72%, 55%);
  /* accent stays same */

  --ds-background: hsl(216, 33%, 6%);
  --ds-foreground: hsl(0, 0%, 88%);
  --ds-card: hsl(215, 19%, 11%);
  --ds-muted: hsl(215, 19%, 17%);
  --ds-border: hsl(215, 19%, 20%);

  --ds-shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.2);
  --ds-shadow-md: 0 2px 8px hsla(0, 0%, 0%, 0.3);
  --ds-shadow-lg: 0 4px 16px hsla(0, 0%, 0%, 0.4);
  --ds-shadow-glow: 0 0 16px hsla(224, 76%, 48%, 0.25);

  --color-blue1: #1D4FD7;
  --color-blue2: #4a7af0;
  --color-blue3: hsl(224, 60%, 30%);
  --color-blue4: hsl(224, 60%, 15%);
}

/* ----- Dark: Page background & text ----- */
body.dark {
  background-color: var(--ds-background) !important;
  color: var(--ds-foreground) !important;
}

body.dark #wrap {
  background-color: var(--ds-background);
}

/* ----- Dark: Section 2 (Business/Services) ----- */
body.dark .section02 {
  background-color: var(--ds-background) !important;
}

body.dark .section02-wrap {
  background-color: var(--ds-background) !important;
}

body.dark .business-main-wrap {
  background-color: var(--ds-background) !important;
}

body.dark .business-main-title h3 {
  color: var(--ds-foreground) !important;
}

body.dark .business-main-title span {
  color: hsl(0, 0%, 70%) !important;
}

body.dark .badge-type-title .badge {
  background-color: var(--ds-primary) !important;
}

/* ----- Dark: Section 3 (Experiences/Metrics) ----- */
body.dark #section03 {
  background-color: var(--ds-primary-dark) !important;
}

/* ----- Dark: Section 4 (Brands) ----- */
body.dark .sec-brand {
  background-color: var(--ds-card) !important;
}

body.dark .brand-title .main-title {
  color: var(--ds-foreground) !important;
}

body.dark .brand-title .main-sub-title {
  color: hsl(0, 0%, 65%) !important;
}

/* ----- Dark: Header ----- */
body.dark .header-dev {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

@media screen and (min-width: 1024px) {
  body.dark .header-dev {
    background: var(--ds-primary-dark) !important;
  }

  body.dark .header-dev.scrolled {
    background: var(--ds-primary-dark) !important;
  }

  body.dark .header-dev .navbar-dev > li .sub-menu {
    background-color: var(--ds-card) !important;
    border-color: var(--ds-border) !important;
  }

  body.dark .header-dev .navbar-dev > li .sub-menu li a {
    color: var(--ds-foreground) !important;
  }

  body.dark .header-dev .navbar-dev > li .sub-menu li a:hover {
    background: var(--ds-primary-light) !important;
    color: #fff !important;
  }
}

body.dark .header-dev.col-white .h-top {
  background: var(--ds-primary-dark) !important;
}

body.dark .header-dev.col-white.scrolled .h-top {
  background: var(--ds-primary-dark) !important;
}

/* ----- Dark: Footer ----- */
body.dark #footer {
  background-color: var(--ds-card) !important;
  border-top-color: var(--ds-border) !important;
}

body.dark .f-info li {
  color: var(--ds-foreground) !important;
}

body.dark .f-info li a {
  color: var(--ds-foreground) !important;
}

body.dark .f-contact li {
  color: hsl(0, 0%, 60%) !important;
}

body.dark .f-copyright {
  color: hsl(0, 0%, 45%) !important;
}

body.dark .f-family-site button {
  color: var(--ds-foreground) !important;
  border-color: var(--ds-border) !important;
}

body.dark .family-site-list ul {
  background-color: var(--ds-card) !important;
  border: 1px solid var(--ds-border) !important;
}

body.dark .family-site-list a {
  color: hsl(0, 0%, 70%) !important;
}

body.dark .family-site-list a:hover {
  color: #fff !important;
  background-color: var(--ds-primary-light) !important;
}

/* ----- Dark: Brand logos (preserve original colors) ----- */
body.dark .logo-box .logo-wrap img {
  filter: none;
  opacity: 0.75;
}
body.dark .logo-box .logo-wrap li:hover img {
  opacity: 1;
}

/* ----- Dark: Toggle buttons ----- */
body.dark .design-toggle .btn-original {
  background: hsl(215, 19%, 17%);
}

body.dark .design-toggle .btn-original:hover {
  background: hsl(215, 19%, 25%);
}

/* ----- Dark: Theme Toggle button ----- */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  display: flex;
  gap: 4px;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 4px;
  box-shadow: var(--ds-shadow-md);
}

.theme-toggle button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  transition: var(--ds-transition-smooth);
  color: hsl(0, 0%, 50%);
  font-size: 18px;
}

.theme-toggle button:hover {
  background: var(--ds-muted);
  color: var(--ds-foreground);
}

.theme-toggle button.active {
  background: var(--ds-primary);
  color: #fff;
}

/* ----- Dark: Preview status bar ----- */
body.dark .preview-status {
  background: rgba(53, 100, 227, 0.9);
}

body.dark .preview-status.original {
  background: rgba(22, 29, 39, 0.95);
}

/* ===== Brand Logo Marquee Animation ===== */
.logo-box.marquee {
  width: 100%;
  overflow: hidden;
}
.logo-box.marquee .logo-wrap {
  display: flex;
  animation: marquee-scroll 20s linear infinite;
  width: max-content;
}
.logo-box.marquee .logo-wrap li {
  flex-shrink: 0;
  margin: 0 -15px;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Sub-page banner images (GitHub raw URLs) ===== */
.sub-top-wrap.business01 {
  background: transparent url(../images/sub-banner-business01.png) no-repeat 50% 0 / cover !important;
}
.sub-top-wrap.business02 {
  background: transparent url(../images/sub-banner-business02.png) no-repeat 50% 0 / cover !important;
}
.sub-top-wrap.business03 {
  background: transparent url(../images/sub-banner-business03.png) no-repeat 50% 0 / cover !important;
}
.sub-top-wrap.business04 {
  background: transparent url(../images/sub-banner-business04.png) no-repeat 50% 0 / cover !important;
}
.sub-top-wrap.business05 {
  background: transparent url(../images/sub-banner-business05.png) no-repeat 50% 0 / cover !important;
}
.sub-top-wrap.business06 {
  background: transparent url(../images/sub-banner-business06.png) no-repeat 50% 0 / cover !important;
}
.sub-top-wrap.business07 {
  background: transparent url(../images/sub-banner-business07.png) no-repeat 50% 0 / cover !important;
}
.sub-top-wrap.company {
  background: transparent url(../images/sub-banner-company.png) no-repeat 50% 0 / cover !important;
}
.sub-top-wrap.recruit {
  background: transparent url(../images/sub-banner-recruit.png) no-repeat 50% 0 / cover !important;
}
.sub-top-wrap.brand {
  background: transparent url(../images/sub-banner-brand.png) no-repeat 50% 0 / cover !important;
}
.sub-top-wrap.contact {
  background: transparent url(../images/sub-banner-contact.png) no-repeat 50% 0 / cover !important;
}

/* ===== Swiper awards carousel ===== */
.achieve-swiper .swiper-slide {
  width: 280px !important;
}
.achieve-swiper {
  overflow: hidden;
}

/* Swiper navigation buttons */
.btn-swiper-prev,
.btn-swiper-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
}
.btn-swiper-prev:hover,
.btn-swiper-next:hover {
  border-color: var(--ds-primary, #173fab);
  background: var(--ds-primary, #173fab);
}
.btn-swiper-prev:hover .icon-arrow29::before,
.btn-swiper-prev:hover .icon-arrow30::before,
.btn-swiper-next:hover .icon-arrow29::before,
.btn-swiper-next:hover .icon-arrow30::before {
  border-color: #fff;
}

/* CSS arrow icons replacing missing icon font */
.icon-arrow29,
.icon-arrow30 {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
}
.icon-arrow29::before,
.icon-arrow30::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #555;
  border-right: 2px solid #555;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: border-color 0.2s ease;
}
/* Left arrow (prev) */
.icon-arrow29::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
/* Right arrow (next) */
.icon-arrow30::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

/* Swiper disabled state */
.btn-swiper-prev.swiper-button-disabled,
.btn-swiper-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.btn-swiper-prev.swiper-button-disabled:hover,
.btn-swiper-next.swiper-button-disabled:hover {
  border-color: #ccc;
  background: #fff;
}
.btn-swiper-prev.swiper-button-disabled:hover .icon-arrow29::before,
.btn-swiper-next.swiper-button-disabled:hover .icon-arrow30::before {
  border-color: #555;
}

/* ===== Family site button icon fix ===== */
.f-family-site button i.icon-sign01 {
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 28px !important;
  width: 28px !important;
  text-align: center !important;
  right: 0 !important;
}

/* ===== Dark: Sub-page content ===== */

/* Override inline #f6f6f6 background on box-wrap parent divs */
body.dark [style*="background: #f6f6f6"],
body.dark [style*="background:#f6f6f6"] {
  background: var(--ds-card) !important;
}

/* Sub-page main content area background */
body.dark .sub-section {
  background-color: var(--ds-background) !important;
}

/* Sub-page title area */
body.dark .sub-title-wrap h3 {
  color: var(--ds-foreground) !important;
}
body.dark .sub-title-text {
  color: hsl(0, 0%, 75%) !important;
}

/* Work/service detail sections (careers, business) */
body.dark .work-wrap {
  background: var(--ds-card) !important;
}
body.dark .work-wrap * {
  color: var(--ds-foreground);
}
body.dark .work-title strong {
  color: var(--ds-foreground) !important;
}
body.dark .work-info dt {
  color: #e2e8f0 !important;
}
body.dark .work-info dd {
  color: hsl(0, 0%, 70%) !important;
}
body.dark .work-no {
  background-color: var(--ds-primary) !important;
  color: #fff !important;
}
body.dark .work-no-wrap .no-text {
  color: hsl(0, 0%, 60%) !important;
}
body.dark .box-wrap > li {
  border-color: var(--ds-border) !important;
}
body.dark .box-wrap {
  background: var(--ds-card) !important;
}

/* Brand page logos */
body.dark .sales-list-wrap img {
  filter: none;
  opacity: 0.85;
}
body.dark .sales-list-wrap li:hover img {
  opacity: 1;
}
body.dark .brand-wrap h4 {
  color: var(--ds-foreground) !important;
}
body.dark .side-wrap {
  border-color: var(--ds-border) !important;
}

/* Company mission page */
body.dark .company1-wrap {
  background-color: var(--ds-background) !important;
}
body.dark .identity-wrap {
  color: var(--ds-foreground) !important;
}
body.dark .mission-wrap {
  background-color: var(--ds-background) !important;
}
body.dark .squre-wrap {
  background-color: transparent !important;
  color: var(--ds-foreground) !important;
}
body.dark .squre-wrap p,
body.dark .squre-wrap b {
  color: var(--ds-foreground) !important;
}
body.dark .mission-title,
body.dark .vision-title,
body.dark .slogan-title {
  background-color: var(--ds-primary) !important;
  color: #fff !important;
}
body.dark .mission-box-wrap,
body.dark .vison-box-wrap,
body.dark .slogan-box-wrap {
  background-color: transparent !important;
}
/* Bracket decorations */
body.dark .squre-wrap::before,
body.dark .squre-wrap::after {
  border-color: hsl(0, 0%, 40%) !important;
}
body.dark .squre-wrap::before,
body.dark .squre-wrap::after {
  color: var(--ds-primary) !important;
}

/* Slogan list cards */
body.dark .slogan-list > div {
  background-color: var(--ds-primary) !important;
  border-color: var(--ds-border) !important;
}
body.dark .slogan-list strong,
body.dark .slogan-list strong *,
body.dark .slogan-list span {
  color: #fff !important;
}

/* Text color utilities for dark mode */
body.dark .text-blue {
  color: var(--ds-primary) !important;
}
body.dark .text-green {
  color: #4ade80 !important;
}

/* Sub-page general text */
body.dark .sub-section p,
body.dark .sub-section span:not(.text-blue):not(.text-green):not(.badge) {
  color: hsl(0, 0%, 80%);
}
body.dark .sub-section h3 {
  color: var(--ds-foreground) !important;
}
body.dark .sub-section h4 {
  color: var(--ds-foreground) !important;
}
body.dark .sub-section strong {
  color: var(--ds-foreground) !important;
}

/* Process icons (business pages) */
body.dark .process-list li span {
  color: hsl(0, 0%, 75%) !important;
}

/* Channel images (business pages) */
body.dark .channel-item {
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 4px;
}
body.dark .channel-item img {
  opacity: 0.8;
}
body.dark .channel-item:hover img {
  opacity: 1;
}

/* Company group page - dark mode logos */
body.dark .corporate-logo {
  background: #000 !important;
}
body.dark .corporate-logo img {
  filter: brightness(0) invert(1);
}
body.dark .subsidiary-img img {
  filter: brightness(0) invert(1);
}

/* Careers environment page - benefit icons & indent */
.benefit-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 6px;
  color: var(--ds-primary, #1D4FD7);
  flex-shrink: 0;
}
.work-info dt {
  color: var(--ds-primary, #1D4FD7) !important;
}
.work-info dd {
  padding-left: 24px;
}

/* Careers goal page - FAQ section title */
.faq-section-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--ds-primary, #1D4FD7);
  margin-bottom: 20px;
  padding-top: 40px;
  letter-spacing: 2px;
}

/* Careers goal page - FAQ section dark mode wrap */
body.dark .work-wrap {
  background: #000 !important;
}
body.dark .faq-section-title {
  color: var(--ds-primary) !important;
}

/* Careers goal page - FAQ remove bullet dots */
.sub-title-background .bullet-text::before {
  content: none;
}
.sub-title-background .bullet-text {
  padding-left: 0;
  margin: 2em 0;
}

/* Careers goal page - FAQ Q/A labels */
.faq-label {
  font-weight: 800;
  margin-right: 8px;
  font-size: 1.1em;
}
.faq-q {
  color: var(--ds-primary, #1D4FD7);
}
.faq-a {
  color: #888;
  font-size: 1.2em;
}
body.dark .faq-a {
  color: #aaa;
}

/* Careers goal page - FAQ item font sizes & indent */
.sub-title-background dt {
  font-size: 22px !important;
  padding-left: 0;
}
.sub-title-background dd {
  font-size: 18px !important;
  line-height: 1.7;
  padding-left: 28px;
}

/* Careers goal page - FAQ section dark mode */
body.dark .sub-title-background {
  background: var(--ds-card) !important;
}

/* Company competitiveness page */
body.dark .company-text-wrap {
  background: var(--ds-card) !important;
}
body.dark .company-text-wrap .en-title {
  color: var(--ds-foreground) !important;
}
body.dark .company-text-wrap .ko-sub {
  color: hsl(0, 0%, 75%) !important;
}
body.dark .company-text-wrap .sub-info {
  color: hsl(0, 0%, 65%) !important;
}
body.dark .company-text-wrap ul .no {
  border-color: var(--ds-primary-bright) !important;
}
body.dark .company-text-wrap ul .no .no-text {
  background: var(--ds-primary) !important;
}
body.dark .achievement-wrap {
  background: var(--ds-card) !important;
}
body.dark .award-text p {
  color: var(--ds-foreground) !important;
}
body.dark .award-text span {
  color: hsl(0, 0%, 65%) !important;
}

/* Sub-page footer area consistency */
body.dark .go-home a {
  color: var(--ds-foreground) !important;
  border-color: var(--ds-border) !important;
}

/* ===== Fix absolute /images/ paths in CSS ===== */
.header-dev .navbar-dev > li.has-sub > a::after,
.header-dev .navbar-dev > li.lang-selector > a::after {
  background: none !important;
  content: "" !important;
}

/* ===== CSS background images that use absolute /images/ paths ===== */
.best-choice-wrap {
  background: url(../images/company-bg.png) no-repeat 50% 0 / cover !important;
}
.slogan-list:after {
  background: transparent url(../images/company-cnc-bg.png) no-repeat center center / auto 50% !important;
}
.mission-list:after {
  background: transparent url(../images/company-cnc-bg.png) no-repeat center center / auto 50% !important;
}

/* =====================================================
   MOBILE RESPONSIVE OVERRIDES
   ===================================================== */

/* --- 768px breakpoint --- */
@media all and (max-width: 768px) {
  /* Index: Hero text sizing */
  .visual-copy {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .visual-copy .main-copy {
    font-size: 42px !important;
    line-height: 1.1em !important;
  }
  .visual-copy .main-sub-copy {
    font-size: 21px !important;
    line-height: 1.5em !important;
  }
  .visual-copy .main-logo .main-logo-img {
    max-width: 150px;
  }
  .visual-copy .main-logo-copy {
    font-size: 20px !important;
  }

  /* Index: Service cards 2 columns */
  .business-list-wrap.grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Index: Stats grid 2 columns */
  .main-experiences-wrap .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px 0;
  }
  .main-experiences-wrap p.count {
    font-size: 32px;
  }

  /* Sub pages: work-info full width */
  .work-info {
    width: 100% !important;
    padding: 12px 10px !important;
  }
  .work-info dl {
    padding: 12px 0 !important;
  }
  .work-info dt {
    font-size: 16px !important;
  }
  .work-info dd {
    font-size: 14px !important;
  }

  /* Sub pages: sub-section layout */
  .sub-section-wrap {
    flex-direction: column !important;
  }
  .sub-section-wrap > div {
    width: 100% !important;
  }

  /* Sub pages: process list horizontal scroll */
  .step-process-list {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .step-process-list li {
    width: calc(33.33% - 10px) !important;
    min-width: auto !important;
  }

  /* Company group: subsidiary cards stack */
  .subsidiary-wrap {
    flex-direction: column !important;
  }
  .subsidiary-wrap > div {
    width: 100% !important;
    margin-bottom: 20px;
  }
  .subsidiary-img {
    width: 100% !important;
  }
  .subsidiary-img img {
    max-width: 100% !important;
  }

  /* Company competitiveness: cards stack */
  .company-text-wrap ul {
    flex-direction: column !important;
  }
  .company-text-wrap ul li {
    width: 100% !important;
  }

  /* Brand page: logo grid 2 columns */
  .brand-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Careers goal: FAQ font size adjust */
  .faq-section-title {
    font-size: 26px !important;
  }
  .sub-title-background dt {
    font-size: 18px !important;
  }
  .sub-title-background dd {
    font-size: 15px !important;
    padding-left: 24px !important;
  }

  /* Footer responsive */
  footer .footer-info {
    flex-direction: column !important;
  }
}

/* --- 532px breakpoint --- */
@media all and (max-width: 532px) {
  .visual-copy .main-copy {
    font-size: 36px !important;
    margin-top: 0 !important;
  }
  .visual-copy .main-sub-copy {
    font-size: 21px !important;
  }

  /* Service cards 1 column on small phones */
  .business-list-wrap.grid-cols-3 {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  /* Section02 video area */
  .main-visual2-wrap {
    position: unset !important;
    transform: none !important;
    left: 0 !important;
  }
  .main-visual2 {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Process list items smaller */
  .step-process-list li {
    width: calc(50% - 10px) !important;
  }

  /* Channel logos smaller */
  .channel-logo-wrap img {
    max-width: 60px !important;
  }
}