/* ============================================
   CSS 변수 — 전체 사이트 컬러/폰트 통일
============================================= */
:root {
  /* 브랜드 컬러 */
  --color-primary: #472a75;
  --color-primary-dark: #311b54;
  --color-primary-light: #f4f0f9;
  --color-accent: #e60012;

  /* 기본 텍스트 */
  --color-text: #222222;
  --color-text-muted: #555555;
  --color-text-light: #888888;

  /* 배경 */
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-border: #eaeaea;

  /* 폰트 */
  --font-body: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-eng: 'Montserrat', sans-serif;

  /* 레이아웃 */
  --header-height: 80px;
  --container-max: 1200px;

  /* 전환 효과 */
  --transition: 0.3s ease;

  /* 그림자 (그림자 계층) */
  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 25px 60px rgba(0, 0, 0, 0.15);

  /* 브랜드 컬러 그림자 (보라톤 호버 효과) */
  --shadow-brand-sm: 0 8px 20px rgba(71, 42, 117, 0.15);
  --shadow-brand-md: 0 15px 35px rgba(71, 42, 117, 0.1);
  --shadow-brand-lg: 0 20px 45px rgba(71, 42, 117, 0.1);
  --shadow-brand-xl: 0 25px 60px rgba(71, 42, 117, 0.25);

  /* 모서리 둥글기 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* 타이포 스케일 */
  --text-h1: clamp(28px, 4vw, 48px);
  --text-h2: clamp(26px, 3.5vw, 40px);
  --text-h3: clamp(18px, 2vw, 24px);
  --text-lead: clamp(15px, 1.5vw, 18px);
  --text-body: 16px;
  --text-small: 14px;
}

/* ============================================
   유틸리티 클래스
============================================= */

/* 호버 시 살짝 떠오르는 효과 (카드 공통) */
.hover-lift {
  transition: transform var(--transition), box-shadow var(--transition);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-brand-lg);
}

/* 더 작은 호버 효과 */
.hover-lift-sm {
  transition: transform var(--transition), box-shadow var(--transition);
}

.hover-lift-sm:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-brand-md);
}

/* ============================================
   리셋 & 기본 스타일
============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

/* ============================================
   헤더 (네비게이션)
============================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: transparent;
  z-index: 1000;
  transition: background var(--transition), box-shadow var(--transition);
}

.site-header.scrolled {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-inner {
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 로고 */
.logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo img {
  height: 60px;
  width: auto;
}

.logo .logo-dark {
  display: block;
}

.logo .logo-light {
  display: none;
}

.site-header.scrolled .logo .logo-dark {
  display: none;
}

.site-header.scrolled .logo .logo-light {
  display: block;
}

/* PC 네비게이션 */
.nav-main {
  height: 100%;
}

.nav-list {
  display: flex;
  height: 100%;
}

.nav-item {
  position: relative;
  height: 100%;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 25px;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.site-header.scrolled .nav-link {
  color: var(--color-text);
}

.nav-item:hover .nav-link {
  background: var(--color-primary);
  color: #ffffff;
}

/* 스크롤 상태에서도 호버 시 보라 배경 + 흰 글씨 */
.site-header.scrolled .nav-item:hover .nav-link {
  background: var(--color-primary);
  color: #ffffff;
}
/* 서브 메뉴 */
.sub-nav {
  position: absolute;
  top: 100%;
  left: 0;  /* 50%에서 0으로 변경 */
  /* transform: translateX(-50%); 이 줄은 제거 */
  min-width: 200px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 0 0 8px 8px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.sub-nav li:first-child a {
  border-radius: 0;
}

.sub-nav li:last-child a {
  border-radius: 0 0 8px 8px;
}

.nav-item:hover .sub-nav {
  opacity: 1;
  visibility: visible;
}

.sub-nav li a {
  display: block;
  padding: 10px 25px;
  font-size: 15px;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.sub-nav li a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ============================================
   언어 선택 (플랫 나열)
============================================= */
.lang-list {
  margin-left: 20px;
  height: 100%;
  display: flex;
  align-items: center;
}

.lang-list ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 각 언어 아이템 */
.lang-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-family: var(--font-eng);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-radius: var(--radius-pill);
  letter-spacing: 0.6px;
  transition: color var(--transition), background var(--transition);
}

/* 호버 (트랜스페어런트 헤더) */
.lang-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

/* 활성 언어 (현재 페이지) */
.lang-item.active {
  color: #ffffff;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  cursor: default;
}

/* 스크롤 시 헤더 흰 배경일 때 */
.site-header.scrolled .lang-item {
  color: var(--color-text-muted);
}

.site-header.scrolled .lang-item:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.site-header.scrolled .lang-item.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* 국기 SVG 래퍼 */
.lang-flag-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 12px;
  overflow: hidden;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.lang-flag-svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 언어 코드 텍스트 */
.lang-code {
  letter-spacing: 0.6px;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .lang-list {
    margin-left: auto;
    margin-right: 10px;
  }

  .lang-list ul {
    gap: 2px;
  }

  /* 모바일에서는 헤더가 항상 흰 배경 */
  .lang-item {
    padding: 6px 8px;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .lang-item:hover,
  .lang-item.active {
    color: var(--color-primary);
    background: var(--color-primary-light);
  }

  .lang-flag-wrap {
    width: 16px;
    height: 11px;
  }
}

@media (max-width: 480px) {
  .lang-code {
    display: none;
  }

  .lang-flag-wrap {
    width: 22px;
    height: 15px;
  }

  .lang-item {
    padding: 6px 7px;
  }
}

/* 햄버거 (모바일 전용, 기본은 숨김) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  position: relative;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55),
              opacity 0.25s ease,
              background 0.3s ease,
              width 0.3s ease;
  transform-origin: center;
}

.nav-toggle span:nth-child(1) { width: 22px; }
.nav-toggle span:nth-child(2) { width: 16px; }  /* 가운데만 살짝 짧게 */
.nav-toggle span:nth-child(3) { width: 22px; }

.nav-toggle:hover span:nth-child(2) {
  width: 22px;  /* 호버 시 가운데도 길어짐 */
}

.site-header.scrolled .nav-toggle span {
  background: var(--color-text);
}

/* ============================================
   푸터
============================================= */
.site-footer {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.7);
}

/* 푸터 메인 영역 */
.footer-main {
  padding: 70px 20px 50px;
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr;
  gap: 50px;
}

/* 공통 — 컬럼 타이틀 */
.footer-col-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffffff;
  margin: 0 0 24px 0;
  position: relative;
  padding-bottom: 12px;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: #8a6bb8;
}

/* 1단 — 브랜드 */
.footer-logo {
  display: inline-block;
  margin-bottom: 20px;
}

.footer-logo img {
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);  /* 흰색 로고로 변환 */
  opacity: 0.95;
}

.footer-slogan {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: #8a6bb8;
  letter-spacing: 1px;
  margin: 0 0 14px 0;
}

.footer-desc {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  word-break: keep-all;
}

/* 2단 & 3단 — 링크 리스트 */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links li:last-child {
  margin-bottom: 0;
}

.footer-links a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color var(--transition);
}

.footer-links a:hover {
  color: #ffffff;
}

/* 3단 — 연락처 리스트 */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.footer-contact li:last-child {
  margin-bottom: 0;
}

.footer-contact li i {
  flex-shrink: 0;
  font-size: 14px;
  color: #8a6bb8;
  width: 16px;
  display: flex;
  justify-content: center;
}

.footer-contact a {
  color: inherit;
  transition: color var(--transition);
}

.footer-contact a:hover {
  color: #ffffff;
}

.footer-links-sub {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-links-sub li {
  margin-bottom: 10px;
}

.footer-links-sub a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-links-sub a:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* 4단 — 소셜 아이콘 */
.footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}

.footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 16px;
  transition: background var(--transition),
              color var(--transition),
              transform var(--transition);
}

.footer-social-btn:hover {
  transform: translateY(-3px);
}

.footer-social-btn[aria-label="인스타그램"]:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #ffffff;
}

.footer-social-btn[aria-label="네이버 스마트스토어"]:hover {
  background: #03c75a;
  color: #ffffff;
}

.footer-social-btn[aria-label="유튜브"]:hover {
  background: #ff0000;
  color: #ffffff;
}

/* 4단 — 회사정보 */
.footer-company {
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-company p {
  display: flex;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.footer-company p:last-child {
  margin-bottom: 0;
}

.footer-company p span {
  flex-shrink: 0;
  min-width: 88px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3px;
}

/* 하단 바 */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 20px;
  background: rgba(0, 0, 0, 0.25);
}

.footer-bottom-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-address {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}

.footer-addr-en {
  font-family: var(--font-body);
  font-size: 11px;
  opacity: 0.7;
}

.footer-copy {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.5px;
  margin: 0;
  white-space: nowrap;
}

/* 반응형 — 태블릿 (992px 이하) */
@media (max-width: 992px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
  }
}

/* 반응형 — 모바일 (768px 이하) */
@media (max-width: 768px) {
  .footer-main {
    padding: 50px 20px 30px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-col-title {
    font-size: 12px;
    margin-bottom: 18px;
    padding-bottom: 10px;
  }

  .footer-logo img {
    height: 38px;
  }

  .footer-desc {
    font-size: 12px;
  }

  .footer-bottom {
    padding: 18px 20px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-copy {
    font-size: 10px;
  }
}

/* ============================================
   상단으로 가기 버튼
============================================= */
.go-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition), background var(--transition);
  z-index: 999;
}

.go-top.visible {
  opacity: 1;
  visibility: visible;
}

.go-top:hover {
  background: var(--color-primary);
}

/* ============================================
   플로팅 퀵 메뉴 (AI 확장 버튼)
============================================= */
.quick-menu {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 998;
}

/* 확장 버튼 — 그라데이션 배경 */
.quick-ai-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  width: 52px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #b89dd9 0%, #6a4a9a 100%);
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(138, 107, 184, 0.25);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s ease;
  will-change: width;
}

.quick-ai-btn:hover {
  width: 140px;
  box-shadow: 0 10px 28px rgba(138, 107, 184, 0.35);
}

/* 평상시 — "AI" 텍스트 중앙 표시 */
.quick-ai-default {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-eng);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.quick-ai-btn:hover .quick-ai-default {
  opacity: 0;
}

/* 호버 시 — 확장 콘텐츠 (텍스트 + 아이콘) */
.quick-ai-expanded {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 16px 0 18px;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.25s ease 0.15s,
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
  pointer-events: none;
}

.quick-ai-btn:hover .quick-ai-expanded {
  opacity: 1;
  transform: translateX(0);
}

/* 확장 시 텍스트 */
.quick-ai-text {
  font-family: var(--font-eng);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  white-space: nowrap;
  color: #ffffff;
}

/* 확장 시 동물 SVG 아이콘 */
.quick-ai-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.quick-ai-svg svg {
  width: 100%;
  height: 100%;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .quick-menu {
    right: 14px;
    gap: 10px;
  }

  .quick-ai-btn {
    height: 46px;
    width: 46px;
  }

  .quick-ai-btn:hover {
    width: 126px;
  }

  .quick-ai-default {
    font-size: 14px;
  }

  .quick-ai-expanded {
    padding: 0 14px 0 16px;
  }

  .quick-ai-text {
    font-size: 12px;
  }

  .quick-ai-svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================
   반응형 — 태블릿 (1024px 이하)
============================================= */
@media (max-width: 1024px) {
  .header-inner {
    padding: 0 20px;
  }

  .nav-link {
    padding: 0 15px;
    font-size: 15px;
  }

  .logo img {
    height: 50px;
  }
}

/* ============================================
   반응형 — 모바일 (768px 이하)
============================================= */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
  }

  .header-inner {
    padding: 0 20px;
  }

  .logo img {
    height: 40px;
  }

  /* 햄버거 노출 */
  .nav-toggle {
    display: flex;
  }

  /* PC 네비게이션 숨김 → 모바일 드로어 */
  .nav-main {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: #ffffff;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.05);
  }

  .nav-main.open {
    transform: translateX(0);
  }

  .nav-list {
    flex-direction: column;
    height: auto;
    padding: 20px 0;
  }

  .nav-item {
    height: auto;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-link {
    height: auto;
    padding: 18px 30px;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 600;
  }

  /* 모바일에서 서브메뉴는 항상 펼쳐진 상태 */
  .sub-nav {
    position: static;
    transform: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    background: var(--color-bg-alt);
    padding: 10px 0;
    border-radius: 0;
    min-width: auto;
  }

  .sub-nav li a {
    padding: 10px 50px;
    font-size: 14px;
  }

  /* 모바일에선 스크롤 시 헤더 항상 흰 배경 (햄버거 가독성 위해) */
  .site-header {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .site-header .nav-toggle span {
    background: var(--color-text);
  }

  .site-header .logo .logo-dark {
    display: none;
  }

  .site-header .logo .logo-light {
    display: block;
  }

  /* 햄버거 열린 상태 (X 모양으로 변환) */
  .nav-toggle.open span {
    width: 22px;  /* 전부 같은 길이로 */
  }

  .nav-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }

  .nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 플로팅 메뉴 크기 축소 */

  .go-top {
    right: 15px;
    bottom: 20px;
    width: 42px;
    height: 42px;
  }

  .footer-address {
    font-size: 13px;
  }

  .footer-address .sep {
    display: block;
    height: 5px;
    visibility: hidden;
  }
}

/* ============================================
   히어로 영상 섹션
============================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 영상 배경 래퍼 */
.hero-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 영상 기본 스타일 */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  pointer-events: none;
}

/* PC 해상도 (1201px 이상) */
@media (min-width: 1201px) {
  .hero-video-pc {
    display: block;
  }
}

/* 태블릿 해상도 (769px ~ 1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
  .hero-video-tablet {
    display: block;
  }
}

/* 모바일 해상도 (768px 이하) */
@media (max-width: 768px) {
  .hero-video-mobile {
    display: block;
  }
}

/* 영상 위 어두운 오버레이 (텍스트 가독성용) */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  z-index: 2;
}

/* 히어로 텍스트 콘텐츠 */
.hero-content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  padding: 0 20px;
  text-align: center;
  color: #ffffff;
}

/* 빨간 뱃지 */
.hero-badge {
  display: inline-block;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 3px;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 타이틀 */
.hero-title {
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 24px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.5px;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .hero-title {
    font-size: 18px;
    letter-spacing: -1px;
  }
}

/* 설명 */
.hero-desc {
  font-size: var(--text-lead);
  line-height: 1.7;
  margin-bottom: 36px;
  opacity: 0.95;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 히어로 — 특허 뱃지 (투명 배경 + 흰 테두리) */
.hero-patent-badge {
  display: inline-block;
  padding: 14px 45px;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  background: transparent;
  border: 2px solid #ffffff;
  border-radius: var(--radius-pill);
  letter-spacing: -0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 모바일 */
@media (max-width: 768px) {
  .hero-patent-badge {
    padding: 12px 28px;
    font-size: 14px;
  }
}

/* 버튼 (라운드 아웃라인) */
.hero-btn {
  display: inline-block;
  padding: 14px 45px;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  background: transparent;
  border: 2px solid #ffffff;
  border-radius: 50px;
  letter-spacing: -0.5px;
  transition: all var(--transition);
}

.hero-btn:hover {
  background: #ffffff;
  color: var(--color-text);
}

/* ============================================
   히어로 반응형 — 모바일 미세 조정
============================================= */
@media (max-width: 768px) {
  .hero {
    min-height: 500px;
  }

  .hero-content {
    padding: 0 25px;
  }

  .hero-desc br {
    display: none;
  }

  .hero-btn {
    padding: 12px 32px;
    font-size: 15px;
  }

  .hero-overlay {
    background: rgba(0, 0, 0, 0.35);
  }
}

@media (max-width: 575px) {
  .hero-desc {
    display: none;
  }
}

/* ============================================
   공통 — 빨간 뱃지 / 흰 뱃지
============================================= */
.badge-red {
  display: inline-block;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 3px;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.badge-white {
  display: inline-block;
  padding: 14px 45px;
  font-size: 17px;
  font-weight: 600;
  color: #000000;
  background: #ffffff;
  border-radius: 50px;
  letter-spacing: -0.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ============================================
   MVC 섹션
============================================= */
.mvc {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 100px 20px;
  background-image: url('../img/main_sticky_00.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 어두운 오버레이 */
.mvc-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* 콘텐츠 래퍼 */
.mvc-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  text-align: center;
}

/* 상단 텍스트 영역 */
.mvc-head {
  margin-bottom: 60px;
}

.mvc-title {
  font-size: var(--text-h2);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 24px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 360px) {
  .mvc-title {
    font-size: 15px;
    letter-spacing: -1px;
  }
}

.mvc-desc {
  font-size: var(--text-lead);
  line-height: 1.7;
  color: #ffffff;
  opacity: 0.9;
  margin-bottom: 36px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

/* 3박스 그리드 */
.mvc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  margin-top: 40px;
}

.mvc-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 40px 20px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform var(--transition),
              background var(--transition),
              border-color var(--transition),
              box-shadow var(--transition);
  cursor: default;
}

.mvc-box:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.mvc-box h3 {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 2px;
  line-height: 1.3;
  margin: 0;
}

/* ============================================
   MVC 반응형
============================================= */
@media (max-width: 992px) {
  .mvc {
    padding: 80px 20px;
    min-height: 800px;
  }

  .mvc-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mvc-box {
    min-height: 130px;
    padding: 30px 20px;
  }

}

@media (max-width: 768px) {
  .mvc {
    padding: 60px 20px;
    min-height: 700px;
  }

  .mvc-head {
    margin-bottom: 40px;
  }

  .badge-white {
    padding: 12px 32px;
    font-size: 15px;
  }
}

/* ============================================
   BUSINESS 섹션
============================================= */
.biz {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 100px 20px;
  background-image: url('../img/main_sticky_01.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 어두운 오버레이 */
.biz-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

/* 콘텐츠 래퍼 */
.biz-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  text-align: center;
}

/* 상단 텍스트 영역 */
.biz-head {
  margin-bottom: 60px;
}

.biz-title {
  font-size: var(--text-h2);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 24px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.biz-desc {
  font-size: var(--text-lead);
  line-height: 1.7;
  color: #ffffff;
  opacity: 0.9;
  margin-bottom: 36px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

/* BUSINESS 설명 - 한글/영문 블록 구분 */
.biz-desc .desc-ko,
.biz-desc .desc-en {
  display: block;
}

.biz-desc .desc-divider {
  display: block;
  height: 1.5em;  /* 빈 줄 한 칸 높이 */
}

/* 4박스 그리드 */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 40px auto 0;
}

.biz-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 30px 15px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform var(--transition),
              background var(--transition),
              border-color var(--transition),
              box-shadow var(--transition);
  cursor: default;
}

.biz-box:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.biz-box h3 {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 2px;
  margin: 0;
}

/* ============================================
   BUSINESS 반응형
============================================= */
@media (max-width: 992px) {
  .biz {
    padding: 80px 20px;
    min-height: 800px;
  }

  .biz-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

}

@media (max-width: 768px) {
  .biz {
    padding: 60px 20px;
    min-height: 700px;
  }

  .biz-head {
    margin-bottom: 40px;
  }

  .biz-box {
    min-height: 100px;
    padding: 25px 10px;
  }

  .biz-box h3 {
    letter-spacing: 1px;
  }
}

/* ============================================
   숫자 카운터 섹션
============================================= */
.counter-section {
  position: relative;
  width: 100%;
  padding: 100px 20px;
  background-image: url('../img/main_number_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 패럴랙스 효과 (모바일에서는 꺼짐) */
  background-attachment: fixed;
  color: #ffffff;
}

.counter-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(93, 56, 140, 0.9); /* 보라톤 오버레이 */
  z-index: 1;
}

.counter-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

.counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.counter-box {
  text-align: center;
  padding: 20px 10px;
}

.counter-box i {
  font-size: 44px;
  margin-bottom: 16px;
  display: block;
  color: #ffffff;
  opacity: 0.95;
}

.counter-value {
  font-family: var(--font-eng);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: -1px;
}

.counter-label {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.9;
  margin: 0;
  line-height: 1.5;
}

/* ============================================
   카운터 반응형
============================================= */
@media (max-width: 992px) {
  .counter-section {
    padding: 80px 20px;
    background-attachment: scroll; /* 태블릿 이하는 패럴랙스 끄기 */
  }

  .counter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }
}

@media (max-width: 768px) {
  .counter-section {
    padding: 60px 20px;
  }

  .counter-box i {
    font-size: 36px;
    margin-bottom: 12px;
  }

  .counter-label {
    font-size: 14px;
  }
}

/* ============================================
   제품 소개 섹션
============================================= */
.products {
  width: 100%;
  padding: 100px 20px;
  background: var(--color-bg);
}

.products-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 상단 타이틀 */
.products-head {
  text-align: center;
  margin-bottom: 60px;
}

.products-title {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.products-subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-text-muted);
  letter-spacing: 1px;
  margin: 0;
}

/* 제품 그리드 — PC: 4열 × 2줄 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* 제품 카드 */
.product-card {
  display: block;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  transition: transform var(--transition), box-shadow var(--transition);
  color: inherit;
}

.product-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* 이미지 영역 (정사각형) */
.product-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f8f9fa;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.product-card:hover .product-img img {
  transform: scale(1.08);
}

/* 제품명 영역 */
.product-info {
  padding: 20px 15px;
  text-align: center;
}

.product-info h3 {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.3px;
  margin: 0;
}

/* ============================================
   제품 반응형
============================================= */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (max-width: 992px) {
  .products {
    padding: 80px 20px;
  }
}

@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .products {
    padding: 60px 20px;
  }

  .products-head {
    margin-bottom: 40px;
  }

  .product-grid {
    gap: 15px;
  }

  .product-card {
    border-radius: 14px;
  }

  .product-info {
    padding: 15px 10px;
  }

  .product-info h3 {
    font-size: 15px;
  }
}

@media (max-width: 420px) {
  .product-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: 0 auto;
  }
}

/* ============================================
   STORY 섹션
============================================= */
.story {
  position: relative;
  width: 100%;
  padding: 100px 20px;
  background-image: url('../img/main_sticky_021.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.story-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.story-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

.story-title {
  font-size: var(--text-h2);
  font-weight: 600;
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 40px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* STORY 보기 알약 버튼 */
.story-btn {
  display: inline-block;
  padding: 15px 55px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  background: #ffffff;
  border: 1px solid #bbbbbb;
  border-radius: 50px;
  letter-spacing: -0.3px;
  transition: all var(--transition);
}

.story-btn:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(71, 42, 117, 0.25);
}

/* ============================================
   STORY 반응형
============================================= */
@media (max-width: 992px) {
  .story {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .story {
    padding: 60px 20px;
  }

  .story-title {
    margin-bottom: 30px;
    line-height: 1.5;
  }

  .story-title br {
    display: none;
  }

  .story-btn {
    padding: 13px 40px;
    font-size: 16px;
  }

  .story-overlay {
    background: rgba(0, 0, 0, 0.6);
  }
}

/* ============================================
   공통 유틸 — 모바일 전용 줄바꿈
============================================= */
.br-mobile {
  display: none;
}

@media (max-width: 768px) {
  .br-mobile {
    display: inline;
  }
}

/* ============================================
   하위 페이지 공통 — 상단 타이틀 영역
============================================= */
.page-hero {
  position: relative;
  width: 100%;
  min-height: 400px;
  padding: 180px 20px 100px;
  background-image: url('../img/brand_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 필터: 이미지를 흑백으로 + 보라 오버레이 덮기 */
.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  background-size: inherit;
  background-position: inherit;
  filter: grayscale(100%);
  z-index: 0;
}

.page-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(71, 42, 117, 0.85);
  z-index: 1;
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
}

/* 브레드크럼 */
.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition);
}

.breadcrumb a:hover {
  color: #ffffff;
}

.breadcrumb .sep {
  opacity: 0.5;
}

.page-hero-title {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .page-hero {
    min-height: 280px;
    padding: 140px 20px 60px;
  }
}

/* ============================================
   Brand Intro — CEO 사진 + 텍스트 (인사말 1섹션)
============================================= */
.brand-intro {
  padding: 100px 20px;
  background: #ffffff;
}

.brand-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}

/* 왼쪽 — CEO 사진 */
.brand-intro-img {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.brand-intro-img img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  display: block;
}

/* 오른쪽 — 텍스트 */
.brand-intro-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 20px 0;
}

/* 빨간 뱃지 (기존 .badge-red 재사용) - 왼쪽 정렬 보장 */
.brand-intro-text .badge-red {
  align-self: flex-start;
  margin-bottom: 24px;
}

.brand-name {
  font-size: clamp(40px, 4.5vw, 56px);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 12px;
}

.brand-subtitle {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  color: #333333;
  margin-bottom: 28px;
}

.brand-description p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: 18px;
  text-align: justify;
  word-break: keep-all;
}

.brand-description p:last-child {
  margin-bottom: 0;
}

/* Brand Intro 반응형 */
@media (max-width: 992px) {
  .brand-intro {
    padding: 80px 20px;
  }

  .brand-intro-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .brand-intro-img {
    max-width: none;   /* 500px 제한 해제 */
    margin: 0;
    border-radius: 8px;
  }

  .brand-intro-img img {
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  .brand-intro-text {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .brand-intro {
    padding: 60px 20px;
  }

  .brand-description p {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* ============================================
   CEO Message — 인용구 스타일
============================================= */
.ceo-message {
  padding: 100px 20px;
  background: #fcfbf7;
}

.ceo-message-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* 인용구 아이콘 */
.quote-icon {
  font-size: 36px;  /* 50px에서 36px로 */
  color: var(--color-primary);
  opacity: 0.5;
  line-height: 1;
  display: inline-block;
}

.quote-top {
  margin-bottom: 20px;
}

.quote-bottom {
  transform: rotate(180deg);
  display: block;
  margin: 0 auto 15px;
}

.ceo-message-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 40px;
  letter-spacing: -0.5px;
}

@media (max-width: 425px) {
  .ceo-message-title {
    font-size: 22px;
  }
}

.ceo-message-desc {
  font-size: 17px;
  line-height: 1.9;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  text-align: justify;
  word-break: keep-all;
}

.ceo-message-desc:last-of-type {
  margin-bottom: 50px;
}

.ceo-message-sign {
  margin-top: 40px;
}

.sign-name {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 1px;
  padding-top: 10px;
}

/* CEO Message 반응형 */
@media (max-width: 992px) {
  .ceo-message {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .ceo-message {
    padding: 60px 20px;
  }

  .ceo-message-title {
    margin-bottom: 30px;
    line-height: 1.4;
  }

  .ceo-message-desc {
    font-size: 15px;
    line-height: 1.8;
  }

  .quote-icon {
    font-size: 28px;
  }
}

/* ============================================
   셀튠의 마음가짐 — 영상 섹션
============================================= */
.mindset {
  padding: 100px 20px;
  background: var(--color-bg-alt);
}

.mindset-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.mindset-head {
  margin-bottom: 50px;
}

.mindset-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.5px;
  margin: 0;
}

/* 영상 박스 */
.mindset-video-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #000000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.mindset-video-ratio {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;  /* 16:9 비율 */
  height: 0;
}

.mindset-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;  /* 자동재생 안정성 */
}

/* 설명 영역 */
.mindset-desc-wrap {
  max-width: 1200px;
  margin: 40px auto 0;
}

.mindset-desc {
  font-size: var(--text-lead);
  line-height: 1.9;
  color: var(--color-text-muted);
  text-align: justify;
  word-break: keep-all;
  margin: 0;
  letter-spacing: -0.3px;
}

/* 마음가짐 반응형 */
@media (max-width: 992px) {
  .mindset {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .mindset {
    padding: 60px 20px;
  }

  .mindset-head {
    margin-bottom: 30px;
  }

  .mindset-video-wrap {
    border-radius: 8px;
  }

  .mindset-desc-wrap {
    margin-top: 30px;
  }

  .mindset-desc {
    font-size: 15px;
    line-height: 1.8;
  }
}

/* ============================================
   CORE VALUE — 3대 핵심 가치
============================================= */
.core-value {
  padding: 100px 20px;
  background: #ffffff;
}

.core-value-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 상단 타이틀 */
.core-value-head {
  text-align: center;
  margin-bottom: 60px;
}

.core-value-head .badge-red {
  display: inline-block;
}

.core-value-main-title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 10px;
}

.core-value-sub {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0;
}

/* 겹친 3원 그래픽 */
.circles-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px auto 80px;
}

.value-circle {
  width: 260px;
  height: 260px;
  background: #f4efe4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition);
}

.value-circle p {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  color: #444444;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.3px;
}

/* 가운데 원이 위로 겹침 */
.value-circle.circle-left {
  z-index: 1;
  margin-right: -50px;
}

.value-circle.circle-center {
  z-index: 2;
  background: #f9f6ef;
  position: relative;
}

.value-circle.circle-right {
  z-index: 1;
  margin-left: -50px;
}

.value-circle:hover {
  transform: translateY(-5px);
}

/* 브랜드 비전 이미지 */
.vision-image {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 80px;
  background: var(--color-primary);
}

.vision-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 상세 리스트 */
.value-list {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 2px solid var(--color-primary);
}

.value-item {
  display: flex;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
  gap: 30px;
}

.value-item.value-item-last {
  border-bottom: none;
}

.value-item-title {
  flex: 0 0 220px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.3px;
}

.value-item-desc {
  flex: 1;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  text-align: justify;
  word-break: keep-all;
}

/* CORE VALUE 반응형 */
@media (max-width: 992px) {
  .core-value {
    padding: 80px 20px;
  }

  /* 태블릿: 원 크기 줄이기 */
  .value-circle {
    width: 220px;
    height: 220px;
  }

  .value-circle.circle-left {
    margin-right: -40px;
  }

  .value-circle.circle-right {
    margin-left: -40px;
  }
}

@media (max-width: 768px) {
  .core-value {
    padding: 60px 20px;
  }

  .circles-wrap {
    flex-direction: column;
    gap: 20px;
    margin: 40px auto 60px;
  }

  .value-circle {
    width: 200px;
    height: 200px;
  }

  /* 모바일은 겹침 해제 */
  .value-circle.circle-left,
  .value-circle.circle-right {
    margin: 0;
  }

  .vision-image {
    margin-bottom: 50px;
    border-radius: 8px;
  }

  /* 상세 리스트 세로 배치 */
  .value-item {
    flex-direction: column;
    gap: 8px;
    padding: 22px 0;
  }

  .value-item-title {
    flex: none;
  }

  .value-item-desc {
    font-size: 15px;
  }
}

@media (max-width: 420px) {
  .value-circle {
    width: 180px;
    height: 180px;
  }

  .value-circle p {
    font-size: 16px;
  }
}

/* ============================================
   제품소개 페이지 — 영양제 리스트
============================================= */
.product-intro {
  padding: 100px 20px;
  background: #ffffff;
}

.product-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 상단 타이틀 영역 */
.product-intro-head {
  text-align: center;
  margin-bottom: 70px;
}

.product-eng {
  display: inline-block;
  font-family: var(--font-eng);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.product-main-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

/* 상단 안내 박스 — 브랜드 컬러 포인트 */
.product-sub-badge {
  display: inline-block;
  background: var(--color-primary-light);
  padding: 10px 24px;
  border-radius: 9999px;  /* 최대 라운드 — 알약 형태 */
  margin-top: 4px;
}

.product-sub-info {
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: -0.2px;
  margin: 0;
}

/* 제품 리스트 그리드 — PC 4열 */
.product-list-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.product-list-item {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}

.product-list-item:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border-color: transparent;
}

/* 이미지 영역 */
.product-list-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f8f9fa;
}

.product-list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.product-list-item:hover .product-list-img img {
  transform: scale(1.06);
}

/* 콘텐츠 영역 */
.product-list-content {
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-list-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}

.product-list-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  word-break: break-all;
  margin-bottom: 20px;
  flex: 1;
}

/* "제품 자세히 보기 >" 링크 */
.product-list-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: -0.3px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  transition: color var(--transition), gap var(--transition);
}

.product-list-link i {
  font-size: 14px;
  transition: transform var(--transition);
}

.product-list-link:hover {
  color: var(--color-primary-dark);
}

.product-list-link:hover i {
  transform: translateX(4px);
}

/* ============================================
   제품소개 반응형
============================================= */
@media (max-width: 1200px) {
  .product-list-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (max-width: 992px) {
  .product-intro {
    padding: 80px 20px;
  }
}

@media (max-width: 900px) {
  .product-list-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .product-intro {
    padding: 60px 20px;
  }

  .product-intro-head {
    margin-bottom: 50px;
  }

  .product-list-content {
    padding: 20px 18px 22px;
  }

  .product-list-title {
    font-size: 18px;
  }

  .product-list-desc {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .product-list-link {
    font-size: 13px;
    padding-top: 12px;
  }
}

@media (max-width: 420px) {
  .product-list-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
    gap: 20px;
  }
}

/* ============================================
   DNA 검사 키트 섹션 (출시 예정)
============================================= */
.dna-kit {
  padding: 100px 20px;
  background: #f4f6f9;
  border-top: 1px solid var(--color-border);
}

.dna-kit-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* 이미지 박스 */
.dna-kit-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.dna-kit-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "출시 예정" 뱃지 */
.dna-kit-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: inline-block;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(71, 42, 117, 0.3);
}

/* 콘텐츠 영역 */
.dna-kit-content {
  padding: 20px 0;
}

.dna-kit-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  word-break: keep-all;
}

.dna-kit-desc {
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--color-text-muted);
  word-break: keep-all;
  margin-bottom: 25px;
  text-align: justify;
}

.dna-kit-list {
  margin-bottom: 25px;
  padding: 0;
}

.dna-kit-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.7;
  padding: 10px 0;
  word-break: keep-all;
}

.dna-kit-list li i {
  color: var(--color-primary);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 3px;
}

/* 안내 문구 */
.dna-kit-note {
  font-size: 13px;
  color: var(--color-text-light);
  font-style: italic;
  margin: 0;
  padding-top: 15px;
  border-top: 1px dashed var(--color-border);
}

/* ============================================
   DNA 키트 반응형
============================================= */
@media (max-width: 992px) {
  .dna-kit {
    padding: 80px 20px;
  }

  .dna-kit-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .dna-kit-content {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .dna-kit {
    padding: 60px 20px;
  }

  .dna-kit-desc {
    font-size: 15px;
  }

  .dna-kit-list li {
    font-size: 14px;
  }

  .dna-kit-img {
    aspect-ratio: 16 / 10;
  }

  .dna-kit-badge {
    font-size: 12px;
    padding: 6px 14px;
    top: 15px;
    left: 15px;
  }
}

/* ============================================
   스토리 페이지 — 페이지 히어로 (전용 배경)
============================================= */
.page-hero.page-hero-story {
  background-image: url('../img/story/story-bg.jpg');
}

/* ============================================
   스토리 인트로 — "과학이 사랑을 만나다"
============================================= */
.story-intro {
  position: relative;
  width: 100%;
  min-height: 600px;
  padding: 100px 20px;
  background-image: url('../img/story/story-intro-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.story-intro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.story-intro-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* center → flex-start */
  text-align: left;          /* center → left */
  gap: 40px;
  color: #ffffff;
}

/* 왼쪽 — 큰 타이틀 */
.story-intro-title {
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -2px;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* 오른쪽 — 설명 텍스트 */
.story-intro-desc {
  font-size: var(--text-body);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20px;
  text-align: justify;
  word-break: break-all;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.story-intro-desc:last-child {
  margin-bottom: 0;
}

/* 반응형 */
@media (max-width: 992px) {
  .story-intro {
    padding: 80px 20px;
    min-height: auto;
  }

  .story-intro-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .story-intro {
    padding: 60px 20px;
  }

  .story-intro-desc {
    font-size: 15px;
    line-height: 1.8;
  }

  .story-intro-overlay {
    background: rgba(0, 0, 0, 0.55);
  }
}

/* ============================================
   고객 이야기 섹션
============================================= */
.story-reviews {
  padding: 100px 20px;
  background: #ffffff;
}

.story-reviews-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.story-review-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.story-review-item.reverse .story-review-img {
  order: 2;
}

.story-review-item.reverse .story-review-text {
  order: 1;
}

/* 이미지 박스 */
.story-review-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.story-review-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 텍스트 영역 */
.story-review-title {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 24px;
  letter-spacing: -0.5px;
  word-break: keep-all;
}

.story-review-quote {
  font-size: var(--text-lead);
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.5;
  margin-bottom: 28px;
  padding-left: 20px;
  border-left: 4px solid var(--color-primary);
  word-break: keep-all;
  font-style: italic;
}

.story-review-desc {
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--color-text-muted);
  word-break: keep-all;
  text-align: justify;
}

/* 고객 이야기 반응형 */
@media (max-width: 992px) {
  .story-reviews {
    padding: 80px 20px;
  }

  .story-reviews-inner {
    gap: 80px;
  }

  .story-review-item {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* 모바일에서는 항상 이미지 위, 텍스트 아래 */
  .story-review-item.reverse .story-review-img,
  .story-review-item .story-review-img {
    order: 0;
  }

  .story-review-item.reverse .story-review-text,
  .story-review-item .story-review-text {
    order: 1;
  }

  .story-review-img {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .story-reviews {
    padding: 60px 20px;
  }
}

@media (max-width: 576px) {
  .story-reviews {
    padding: 60px 20px;
  }

  .story-review-desc {
    font-size: 15px;
  }
}

/* ============================================
   반려동물 콜라주 섹션
============================================= */
.story-collage {
  padding: 100px 20px;
  background: #f8f9fa;
}

.story-collage-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* CSS Grid 다이나믹 콜라주 */
.collage-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 180px;
  gap: 12px;
}

.collage-item {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  background: #e9ecef;
  transition: transform var(--transition), box-shadow var(--transition);
}

.collage-item:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 2;
  position: relative;
}

.collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.collage-item:hover img {
  transform: scale(1.08);
}

/* 큰 아이템 (2열 × 2행) */
.collage-item.size-lg {
  grid-column: span 2;
  grid-row: span 2;
}

/* 중간 아이템 (2열 × 1행) */
.collage-item.size-md {
  grid-column: span 2;
}

/* 콜라주 반응형 */
@media (max-width: 1200px) {
  .collage-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
  }
}

@media (max-width: 992px) {
  .story-collage {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .story-collage {
    padding: 60px 20px;
  }

  .collage-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 120px;
    gap: 8px;
  }

  .collage-item.size-lg {
    grid-column: span 2;
    grid-row: span 2;
  }

  .collage-item.size-md {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 480px) {
  .collage-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
  }

  .collage-item.size-lg,
  .collage-item.size-md {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* ============================================
   CTA 섹션
============================================= */
.story-cta {
  padding: 100px 20px;
  background: var(--color-primary);
  text-align: center;
}

.story-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  color: #ffffff;
}

.story-cta-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
  word-break: keep-all;
}

.story-cta-text {
  font-size: var(--text-lead);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  letter-spacing: -0.3px;
}

@media (max-width: 992px) {
  .story-cta {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .story-cta {
    padding: 60px 20px;
  }

  .story-cta-title {
    margin-bottom: 18px;
  }

  .story-cta-text {
    font-size: 16px;
  }
}

/* ============================================
   SCIENCE 페이지 공통 — 페이지 타이틀 배경
============================================= */
.page-hero.page-hero-science {
  background-image: url('../img/science/science_bg.jpg');
}

/* ============================================
   Proof of Innovation — 미니멀
============================================= */
.proof-section {
  padding: 100px 20px;
  background: #fff;
}

.proof-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.proof-eng {
  display: inline-block;
  font-family: var(--font-eng);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.proof-brand-name {
  font-family: var(--font-eng);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -2px;
  line-height: 1;
  margin: 0 0 28px;
}

.proof-lead {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.5px;
  margin: 0 0 10px;
}

.proof-sub {
  font-size: var(--text-body);
  color: var(--color-text-muted);
  margin: 0;
}

/* 구분선 */
.proof-divider {
  width: 60px;
  height: 2px;
  background: var(--color-primary);
  margin: 48px auto;
  border-radius: 1px;
}

/* 카운터 */
.proof-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 560px;
  margin: 0 auto;
}

.proof-stat {
  flex: 1;
  text-align: center;
  padding: 20px 0;
}

.proof-count {
  font-family: var(--font-eng);
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -2px;
  line-height: 1;
}

.proof-stat-unit {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 4px;
  vertical-align: baseline;
}

.proof-stat-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 12px 0 0;
  letter-spacing: 0.5px;
}

/* 세로 구분선 */
.proof-stat-sep {
  width: 1px;
  height: 60px;
  background: var(--color-border);
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .proof-section {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .proof-section {
    padding: 60px 20px;
  }

  .proof-brand-name {
    letter-spacing: -1px;
  }

  .proof-divider {
    margin: 36px auto;
  }

  .proof-stat-sep {
    height: 48px;
  }
}

/* ============================================
   섹션 공통 — Head (영문 + 타이틀 + 설명)
============================================= */
.section-head {
  text-align: center;
  margin-bottom: 60px;
}

.section-eng {
  display: inline-block;
  font-family: var(--font-eng);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.section-desc {
  max-width: 800px;
  margin: 0 auto;
}

.section-desc p {
  font-size: var(--text-lead);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

.section-desc strong {
  color: var(--color-primary);
  font-weight: 700;
}

@media (max-width: 425px) {
  .section-desc p {
    text-align: justify;
    word-break: break-all;
  }
}

/* ============================================
   국제 기준 81가지 영양 섹션
============================================= */
.nutrition-standard {
  padding: 100px 20px;
  background: var(--color-bg-alt);
}

@media (max-width: 992px) {
  .nutrition-standard {
    padding: 80px 20px;
  }
}

.nutrition-standard-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.nutrition-wide-img {
  margin-bottom: 60px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.nutrition-wide-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 4개 원형 (지방산/아미노산/미네랄/비타민) */
.nutrition-circles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

.nutri-circle {
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border: 2px solid var(--color-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  transition: transform var(--transition), border-color var(--transition);
}

.nutri-circle:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary);
}

.nutri-circle p {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.nutri-circle p strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 6px;
}

/* 81가지 영양 설계 안내 */
.nutrition-law-info {
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 50px;
  text-align: center;
}

.nutrition-law-info p {
  font-size: 17px;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
  word-break: keep-all;
}

.nutrition-law-info strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* AAFCO/FEDIAF/NRC */
.org-standards-list {
  margin-bottom: 50px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.org-standard-item {
  padding: 22px 28px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.org-standard-item:last-child {
  border-bottom: none;
}

.org-standard-item strong {
  font-size: 17px;
  color: var(--color-text);
  font-weight: 700;
}

.org-standard-eng {
  font-size: 13px;
  color: var(--color-text-light);
  font-style: italic;
}

@media (max-width: 992px) {
  .nutrition-circles {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
    margin: 0 auto 60px;
  }
}

@media (max-width: 768px) {
  .nutrition-standard {
    padding: 60px 20px;
  }

  .nutri-circle p {
    font-size: 13px;
  }

  .nutri-circle p strong {
    font-size: 16px;
  }

  .nutrition-law-info {
    padding: 24px;
  }

  .nutrition-law-info p {
    font-size: 15px;
  }
}

@media (max-width: 425px) {
  .nutrition-law-info p {
    text-align: justify;
    word-break: break-all;
  }
}

/* ============================================
   규정 인용문 — 접힘 방식 (Details/Summary)
============================================= */
.regulation-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.regulation-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 40px 0;
}

.regulation-details {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.regulation-details[open] {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: var(--color-primary-light);
}

.regulation-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  gap: 15px;
  transition: background var(--transition);
}

.regulation-summary::-webkit-details-marker {
  display: none;
}

.regulation-summary:hover {
  background: var(--color-primary-light);
}

.regulation-details[open] .regulation-summary {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-primary-light);
}

.reg-title {
  flex: 1;
  line-height: 1.5;
  word-break: keep-all;
}

.regulation-summary i {
  color: var(--color-primary);
  font-size: 18px;
  transition: transform var(--transition);
  flex-shrink: 0;
}

.regulation-details[open] .regulation-summary i {
  transform: rotate(180deg);
}

.regulation-body {
  padding: 24px 28px;
}

.reg-quote {
  font-family: var(--font-eng);
  font-size: 13px;
  color: var(--color-text-light);
  line-height: 1.7;
  font-style: italic;
  padding: 16px 20px;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  margin: 0 0 16px 0;
  text-align: justify;
  word-break: break-all;
}

.reg-explanation {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
  text-align: justify;
  word-break: break-all;
}

@media (max-width: 768px) {
  .regulation-summary {
    padding: 16px 18px;
    font-size: 14px;
  }

  .regulation-body {
    padding: 20px 18px;
  }

  .reg-quote {
    font-size: 12px;
    padding: 14px 16px;
  }

  .reg-explanation {
    font-size: 14px;
  }
}

/* ============================================
   영양소 상세 섹션 (아미노산/지방산/비타민/미네랄)
============================================= */
.nutrient-detail {
  padding: 100px 20px;
  background: #ffffff;
}

@media (max-width: 992px) {
  .nutrient-detail {
    padding: 80px 20px;
  }
}

.nutrient-detail-alt {
  background: var(--color-bg-alt);
}

.nutrient-detail-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 검사 보고서 이미지 */
.nutrient-report-img {
  margin: 50px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  background: #ffffff;
}

.nutrient-report-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 서브 헤드 (지용성/수용성 비타민 구분) */
.nutrient-sub-head {
  margin: 60px 0 30px;
  padding: 24px 28px;
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 10px 10px 0;
}

.nutrient-sub-head h3 {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 8px 0;
}

.nutrient-sub-head h3 small {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 8px;
}

.nutrient-sub-head p {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  text-align: justify;
  word-break: break-all;
}

/* 지방산 전용 — 알파 리놀렌산/EPA-DHA 분할 */
.fatty-acid-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 40px 0;
  padding: 32px;
  background: var(--color-bg-alt);
  border-radius: 12px;
}

.fatty-acid-item {
  text-align: center;
  padding: 10px;
}

.fatty-acid-item:first-child {
  border-right: 1px solid var(--color-border);
}

.fatty-acid-item p {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
  word-break: keep-all;
}

.fatty-acid-item strong {
  color: var(--color-text);
  font-weight: 700;
}

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

@media (max-width: 768px) {
  .fatty-acid-split {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }

  .fatty-acid-item:first-child {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 20px;
  }
}

@media (max-width: 425px) {
  .fatty-acid-item p {
    text-align: justify;
    word-break: break-all;
  }

  .fatty-acid-item p br {
    display: none;
  }
}

/* 하이라이트 박스 (섹션 마무리 요약) */
.nutrient-highlight {
  margin-top: 40px;
  padding: 30px 32px;
  border-radius: 12px;
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
}

.nutrient-highlight h5 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 14px;
}

.nutrient-highlight h5 i {
  font-size: 22px;
}

.nutrient-highlight p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
  text-align: justify;
  word-break: break-all;
}

.nutrient-highlight p strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* 영양소별 포인트 컬러 차별화 (선택) */
.nutrient-highlight.amino { background: #f4f0f9; }
.nutrient-highlight.fatty { background: #fef3f5; border-left-color: #e60012; }
.nutrient-highlight.fatty h5 { color: #e60012; }
.nutrient-highlight.vitamin { background: #fff9e8; border-left-color: #d97706; }
.nutrient-highlight.vitamin h5 { color: #b45309; }

@media (max-width: 768px) {
  .nutrient-detail {
    padding: 60px 20px;
  }

  .nutrient-report-img {
    margin: 40px 0;
  }

  .nutrient-sub-head {
    padding: 20px 22px;
    margin: 40px 0 24px;
  }

  .nutrient-sub-head h3 {
    font-size: 19px;
  }

  .nutrient-highlight {
    padding: 24px 22px;
  }

  .nutrient-highlight h5 {
    font-size: 16px;
  }

  .nutrient-highlight p {
    font-size: 14px;
  }
}

/* ============================================
   692 안전 검사 카드 그리드
============================================= */
.safety-standards {
  padding: 100px 20px;
}

@media (max-width: 992px) {
  .safety-standards {
    padding: 80px 20px;
  }
}

.safety-standards-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.safety-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.safety-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}

.safety-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary-light);
}

.safety-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.safety-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

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

.safety-card-text {
  padding: 20px 22px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.safety-card-text h6 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
}

.safety-count {
  color: var(--color-primary);
  font-weight: 800;
  margin-left: 4px;
}

.safety-card-text p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.safety-result {
  color: var(--color-primary);
  font-weight: 600;
}

@media (max-width: 992px) {
  .safety-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .safety-standards {
    padding: 60px 20px;
  }
}

@media (max-width: 576px) {
  .safety-cards-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 50px auto 0;
    gap: 16px;
  }

  .safety-card-text {
    padding: 16px 18px;
  }

  .safety-card-text h6 {
    font-size: 16px;
  }
}

/* ============================================
   안전 검사 상세 (6개 그룹)
============================================= */
.safety-cert-detail {
  padding: 100px 20px;
  background: #ffffff;
}

@media (max-width: 992px) {
  .safety-cert-detail {
    padding: 80px 20px;
  }
}

.safety-cert-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cert-group {
  padding: 60px 0;
  border-bottom: 1px solid var(--color-border);
}

.cert-group:first-child {
  padding-top: 0;
}

.cert-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* 검사 이유 박스 */
.reason-box {
  background: #fef2f2;                    /* 연한 빨간색 바탕 */
  border-left: 4px solid #e60012;          /* 빨간 좌측 선 */
  border-radius: 0 10px 10px 0;
  padding: 24px 28px;
  margin-top: 30px;
  text-align: justify;
  word-break: break-all;
}

.reason-box h6 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: #e60012;                          /* 빨간색 타이틀 */
  margin: 0 0 14px 0;
}

.reason-box h6 i {
  font-size: 20px;
  color: #e60012;                          /* 느낌표 원도 빨간색 */
}

.reason-box ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}

.reason-box ul li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 6px;
  word-break: keep-all;
}

.reason-box ul li:last-child {
  margin-bottom: 0;
}

/* 신선도 상세 리스트 (pH 등) */
.freshness-detail-list {
  margin-top: 40px;
  background: var(--color-bg-alt);
  border-radius: 12px;
  overflow: hidden;
}

.freshness-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}

.freshness-item:last-child {
  border-bottom: none;
}

.freshness-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.3px;
}

.freshness-content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  text-align: justify;
  word-break: break-all;
}

@media (max-width: 768px) {
  .safety-cert-detail {
    padding: 60px 20px;
  }

  .cert-group {
    padding: 40px 0;
  }

  .reason-box {
    padding: 20px 22px;
  }

  .reason-box h6 {
    font-size: 15px;
  }

  .reason-box ul li {
    font-size: 14px;
  }

  .freshness-item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 22px;
  }

  .freshness-label {
    font-size: 15px;
  }

  .freshness-content {
    font-size: 14px;
  }
}

/* ============================================
   특허 페이지 — 상단 타이틀 영역
============================================= */
.patent-intro {
  padding: 100px 20px;
  background: #fff;
}

.patent-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.patent-eng {
  display: inline-block;
  font-family: var(--font-eng);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.patent-brand-name {
  font-family: var(--font-eng);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -2px;
  line-height: 1;
  margin: 0 0 16px;
}

.patent-intro-desc {
  font-size: var(--text-lead);
  color: var(--color-text-muted);
  margin: 0 0 48px;
}

.patent-divider {
  width: 60px;
  height: 2px;
  background: var(--color-primary);
  margin: 48px auto;
  border-radius: 1px;
}

.patent-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}

.patent-stat {
  flex: 1;
  text-align: center;
  padding: 20px 0;
}

.patent-stat-number {
  font-family: var(--font-eng);
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -2px;
  line-height: 1;
}

.patent-stat-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}

.patent-stat-sep {
  width: 1px;
  height: 60px;
  background: var(--color-border);
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .patent-intro {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .patent-intro {
    padding: 60px 20px;
  }

  .patent-brand-name {
    letter-spacing: -1px;
  }

  .patent-intro-desc {
    margin-bottom: 36px;
  }

  .patent-stat-sep {
    height: 48px;
  }
}

/* ============================================
   메인 특허 9개 콤보 레이아웃 (지그재그)
============================================= */
.patent-combo {
  padding: 120px 20px;
 background: var(--color-bg-alt);
}

@media (max-width: 992px) {
  .patent-combo {
    padding: 80px 20px;
  }
}

.patent-combo-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.patent-combo-item {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 120px;
}

.patent-combo-item:last-child {
  margin-bottom: 0;
}

/* 짝수(reverse) → 우측에 인증서, 좌측에 영상+설명 */
.patent-combo-item.reverse .combo-cert {
  order: 2;
}

.patent-combo-item.reverse .combo-right {
  order: 1;
}

/* 좌측 인증서 이미지 */
.combo-cert {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}

.combo-cert:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.combo-cert img {
  width: 100%;
  height: auto;
  display: block;
}

/* 우측 영상 + 설명 */
.combo-right {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.combo-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  background: #000;
}

.combo-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.combo-info {
  padding: 4px 0;
}

.combo-tag {
  display: inline-block;
  padding: 10px 18px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: 700;
  border-radius: 30px;
  margin-bottom: 20px;
  letter-spacing: -0.3px;
  line-height: 1.4;
  word-break: keep-all;
}

.combo-desc {
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
  word-break: break-all;
  text-align: justify;
}

/* 반응형 */
@media (max-width: 1100px) {
  .patent-combo-item {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 90px;
  }

  /* 모바일에서는 항상 인증서 먼저, 영상+설명 나중 */
  .patent-combo-item.reverse .combo-cert {
    order: 0;
  }

  .patent-combo-item.reverse .combo-right {
    order: 1;
  }

  .combo-cert {
    max-width: 500px;
    margin: 0 auto;
  }

  .combo-right {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .patent-combo {
    padding: 80px 15px;
  }

  .patent-combo-item {
    margin-bottom: 70px;
    gap: 24px;
  }

  .combo-tag {
    font-size: 13px;
    padding: 8px 14px;
    margin-bottom: 16px;
  }

  .combo-desc {
    font-size: 15px;
    line-height: 1.8;
  }

  .combo-right {
    gap: 20px;
  }
}

/* ============================================
   추가 특허 인증 카드 그리드
============================================= */
.patent-additional {
  padding: 120px 20px;
  background: #fff;
}

.patent-additional-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.patent-additional-head {
  margin-bottom: 60px;
}

.patent-additional-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1px;
  margin: 0;
}

/* 카드 그리드 */
.patent-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.patent-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}

.patent-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary-light);
}

.patent-card-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.patent-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.patent-card:hover .patent-card-img img {
  transform: scale(1.04);
}

.patent-card-text {
  padding: 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.patent-card-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  border-radius: 20px;
  letter-spacing: -0.3px;
}

/* 미국 특허 태그 — 파란색 */
.patent-card-tag-us {
  background: #e8f2ff;
  color: #0052cc;
}

/* 출원중 태그 — 주황색 */
.patent-card-tag-pending {
  background: #fff4e5;
  color: #b45309;
}

.patent-card-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
  word-break: keep-all;
  font-weight: 500;
}

/* 반응형 */
@media (max-width: 992px) {
  .patent-additional {
    padding: 80px 20px;
  }
}

@media (max-width: 992px) {
  .patent-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 576px) {
  .patent-additional {
    padding: 80px 20px;
  }

  .patent-cards-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  .patent-card-text {
    padding: 18px 20px;
  }

  .patent-card-desc {
    font-size: 14px;
  }
}

/* ============================================
   하단 브랜드 메시지
============================================= */
.patent-footer-msg {
  padding: 100px 20px;
  background: var(--color-primary);
  color: #ffffff;
  text-align: center;
}

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

.patent-footer-inner p {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  word-break: keep-all;
  letter-spacing: -0.3px;
}

.footer-msg-accent {
  color: #ffffff;
  font-weight: 800;
  padding: 0 4px;
}

@media (max-width: 992px) {
  .patent-footer-msg {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .patent-footer-msg {
    padding: 70px 20px;
  }

  .patent-footer-inner p {
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
    word-break: break-all;
  }
}

/* ============================================
   프리미엄 원료 페이지 — 상단 인트로
============================================= */
.ingredient-intro {
  padding: 100px 20px 0;
  background: #ffffff;
  text-align: center;
}

/* 인트로 바로 다음에 오는 첫 섹션만 상단 여백 축소 */
.ingredient-intro + .ingredient-section {
  padding-top: 40px;
}

.ingredient-intro-inner {
  max-width: 1200;
  margin: 0 auto;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-border);
}

.ingredient-intro-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1px;
  line-height: 1.3;
  margin: 14px 0 0 0;
  word-break: keep-all;
}

.ingredient-accent {
  color: var(--color-primary);
  font-weight: 800;
}

.ingredient-intro-note {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 24px;
  font-size: var(--text-small);
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: -0.3px;
  background: var(--color-primary-light);
  border-radius: 999px;
}

@media (max-width: 992px) {
  .ingredient-intro {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .ingredient-intro {
    padding: 70px 20px 30px;
  }
}

/* ============================================
   원료 섹션 공통
============================================= */
.ingredient-section {
  padding: 100px 20px;
  background: #ffffff;
}

.ingredient-section-alt {
  background: var(--color-bg-alt);
}

.ingredient-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 와이드 이미지 (21:9 비율) */
.ingredient-wide-img {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin-bottom: 50px;
  aspect-ratio: 21 / 9;
  background: var(--color-bg-alt);
}

.ingredient-wide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 서브 헤드 (섹션 안 작은 타이틀) */
.ingredient-sub-head {
  text-align: center;
  margin-bottom: 40px;
}

.ingredient-sub-head h3 {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.5px;
  word-break: keep-all;
  margin: 0;
}

@media (max-width: 992px) {
  .ingredient-section {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .ingredient-section {
    padding: 70px 15px;
  }

  .ingredient-wide-img {
    border-radius: 10px;
    margin-bottom: 35px;
  }
}

/* ============================================
   원료 카드 그리드 (단백질 12개, 이후 유기농 섹션도 공용)
============================================= */
.ingredient-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ingredient-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}

.ingredient-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary-light);
}

.ing-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.ing-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

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

.ing-info {
  padding: 22px 24px;
  flex: 1;
}

.ing-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.3px;
  margin: 0 0 10px 0;
  line-height: 1.4;
  word-break: keep-all;
}

.ing-sub {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  margin-left: 4px;
  letter-spacing: -0.2px;
}

.ing-desc {
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
  text-align: justify;
  word-break: break-all;
}

/* 반응형 */
@media (max-width: 992px) {
  .ingredient-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 576px) {
  .ingredient-grid {
    grid-template-columns: 1fr;
  }

  .ingredient-card {
    max-width: 100%;
    width: 100%;
  }

  .ing-info {
    padding: 18px 20px;
  }

  .ing-title {
    font-size: 16px;
  }

  .ing-desc {
    font-size: 13px;
  }
}

/* ============================================
   원료 섹션 하단 안내문 (공통)
============================================= */
.ingredient-footer-note {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

.ingredient-footer-note p {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: 1.8;
  text-align: justify;
  margin: 0;
  word-break: break-all;
}

@media (max-width: 768px) {
  .ingredient-footer-note {
    margin-top: 40px;
    padding-top: 30px;
  }

  .ingredient-footer-note p {
    font-size: 13px;
  }
}

/* ============================================
   비전 AI 페이지 — 서비스 소개
============================================= */
.visionai-intro {
  padding: 100px 20px 60px;
  background: #ffffff;
  text-align: center;
}

.visionai-intro-inner {
  max-width: 1200;
  margin: 0 auto;
}

.visionai-intro-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1px;
  line-height: 1.35;
  margin: 14px 0 30px;
  word-break: keep-all;
}

.visionai-accent {
  color: var(--color-primary);
  font-weight: 800;
}

.visionai-intro-desc {
  font-size: var(--text-lead);
  line-height: 1.9;
  color: var(--color-text-muted);
  max-width: 800px;
  margin: 0 auto 60px;
  word-break: keep-all;
}

.visionai-intro-desc strong {
  color: var(--color-text);
  font-weight: 700;
}

/* 사용 방법 3단계 */
.visionai-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 20px auto 0;
  max-width: 1200px;
}

.visionai-step {
  position: relative;
  padding: 36px 28px 32px;
  background: var(--color-bg-alt);
  border-radius: 16px;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.visionai-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.step-num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: 16px;
}

.step-icon {
  width: 60px;
  height: 60px;
  margin: 10px auto 20px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(71, 42, 117, 0.12);
}

.step-icon i {
  font-size: 28px;
  color: var(--color-primary);
}

.step-title {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 10px 0;
  letter-spacing: -0.3px;
}

.step-desc {
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

@media (max-width: 992px) {
  .visionai-intro {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .visionai-intro {
    padding: 60px 20px;
  }

  .visionai-intro-desc {
    font-size: 15px;
    margin-bottom: 40px;
    text-align: justify;
    word-break: break-all;
  }

  .visionai-steps {
    grid-template-columns: 1fr;
    margin: 20px auto 0;
    gap: 20px;
  }

  .visionai-step {
    padding: 30px 24px 26px;
  }
}

/* ============================================
   비전 AI iframe 영역
============================================= */
.visionai-service {
  padding: 40px 20px 80px;
  background: #ffffff;
}

.visionai-service-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.visionai-iframe-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.visionai-iframe-wrap iframe {
  width: 100%;
  height: 950px;
  border: 0;
  display: block;
}

@media (max-width: 992px) {
  .visionai-service {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .visionai-service {
    padding: 60px 20px;
  }

  .visionai-iframe-wrap {
    border-radius: 12px;
  }

  .visionai-iframe-wrap iframe {
    height: 1100px;
  }
}

/* ============================================
   비전 AI 면책 고지
============================================= */
.visionai-notice {
  padding: 30px 20px 100px;
  background: #ffffff;
}

.visionai-notice-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.notice-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 32px;
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 12px 12px 0;
}

.notice-icon {
  flex-shrink: 0;
}

.notice-icon i {
  font-size: 28px;
  color: var(--color-primary);
}

.notice-title {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 10px 0;
  letter-spacing: -0.3px;
}

.notice-text p {
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
  text-align: justify;
  word-break: break-all;
}

.notice-text strong {
  color: var(--color-primary);
  font-weight: 700;
}

@media (max-width: 992px) {
  .visionai-notice {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .visionai-notice {
    padding: 60px 20px;
  }

  .notice-box {
    padding: 22px 24px;
    gap: 14px;
  }

  .notice-icon i {
    font-size: 22px;
  }

  .notice-title {
    font-size: 15px;
  }

  .notice-text p {
    font-size: 13px;
  }
}

/* ============================================
   비전 AI 고양이 — 전용 배경
============================================= */
.page-hero-visionai-cat {
  background-image: url('/assets/img/science/celltune-labs-science-visionaicat-bg.jpg') !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================
   Business 페이지 — 히어로 배경
============================================= */
.page-hero-business {
  background-image: url('/assets/img/partner/business_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================
   R&D 인트로 섹션
============================================= */
.rnd-intro {
  padding: 100px 20px;
  background: #ffffff;
}

.rnd-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 2단 그리드 (좌 텍스트 / 우 이미지) */
.rnd-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 100px;
}

.rnd-text-col {
  padding: 10px 0;
}

.rnd-text-col .section-eng {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-eng);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--color-primary);
  text-transform: uppercase;
}

.rnd-main-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -1px;
  line-height: 1.3;
  margin: 0 0 24px 0;
}

.rnd-desc {
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0 0 30px 0;
  word-break: keep-all;
}

.rnd-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rnd-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.6;
  word-break: keep-all;
}

.rnd-points li i {
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: 18px;
  margin-top: 2px;
}

/* 우측 이미지 */
.rnd-img-col {
  width: 100%;
}

.rnd-img-box {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.rnd-img-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* 하단 2단 박스 */
.rnd-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.rnd-bottom-card {
  padding: 36px 32px;
  background: var(--color-bg-alt);
  border-radius: 14px;
  border: 1px solid var(--color-border);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.rnd-bottom-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(71, 42, 117, 0.08);
  border-color: var(--color-primary-light);
}

.rnd-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rnd-card-icon i {
  font-size: 22px;
  color: var(--color-primary);
}

.rnd-card-text {
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
  word-break: keep-all;
}

.rnd-card-text strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* 반응형 */
@media (max-width: 992px) {
  .rnd-intro {
    padding: 80px 20px;
  }

  .rnd-intro-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 70px;
  }

  .rnd-img-col {
    order: -1;
    max-width: 700px;
    margin: 0 auto;
  }

  .rnd-bottom-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .rnd-intro {
    padding: 60px 20px;
  }

  .rnd-desc {
    font-size: 14px;
  }

  .rnd-points li {
    font-size: 14px;
  }

  .rnd-bottom-card {
    padding: 28px 24px;
    gap: 16px;
  }

  .rnd-card-icon {
    width: 42px;
    height: 42px;
  }

  .rnd-card-icon i {
    font-size: 18px;
  }

  .rnd-card-text {
    font-size: 14px;
  }
}

/* ============================================
   Your Market, Our Expertise — 지그재그 5단계
============================================= */
.market-expertise {
  padding: 100px 20px;
  background: var(--color-bg-alt);
  text-align: center;
}

.market-expertise-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 타이틀 */
.market-head {
  margin-bottom: 80px;
}

.market-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1.5px;
  line-height: 1.2;
  margin: 0;
  word-break: keep-all;
}

/* 지그재그 컨테이너 */
.zigzag-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
}

/* 각 스텝 */
.zz-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 8px;
}

/* 하단 타입: 타이틀(위) → 점 → 선 → 원(아래) */
.zz-step.zz-bottom {
  justify-content: flex-start;
}

/* 상단 타입: 원(위) → 선 → 점 → 타이틀(아래) */
.zz-step.zz-top {
  justify-content: flex-start;
  padding-top: 0;
}

/* 타이틀 */
.zz-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.3px;
  line-height: 1.4;
  margin: 0;
  padding: 10px 0;
  min-height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: keep-all;
}

/* 점 */
.zz-dot {
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 50%;
  margin: 8px 0;
  flex-shrink: 0;
}

/* 연결선 */
.zz-line {
  width: 2px;
  height: 60px;
  background: linear-gradient(to bottom, var(--color-primary), rgba(71, 42, 117, 0.2));
  flex-shrink: 0;
}

/* zz-top일 때 선은 반대 그라데이션 */
.zz-step.zz-top .zz-line {
  background: linear-gradient(to bottom, rgba(71, 42, 117, 0.2), var(--color-primary));
}

/* 메인 원 (outer) */
.zz-main-circle {
  width: 140px;
  height: 140px;
  background: #ffffff;
  border: 2px solid var(--color-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 35px rgba(71, 42, 117, 0.1);
  flex-shrink: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}

.zz-step:hover .zz-main-circle {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(71, 42, 117, 0.18);
}

/* 내부 원 */
.zz-inner-circle {
  width: 110px;
  height: 110px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.zz-inner-circle i {
  font-size: 44px;
}

/* 텍스트 전용 원 */
.zz-inner-circle.zz-text-only {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  letter-spacing: -0.3px;
  padding: 0 10px;
}

.zz-inner-circle.zz-text-only span {
  color: #ffffff;
}

/* 스텝 사이 화살표 (각 스텝 오른쪽에 위치) */
.zz-arrow {
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: #ffffff;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  z-index: 2;
}

.zz-arrow i {
  font-size: 14px;
  transform: rotate(-90deg);
}

.zz-step.last-step .zz-arrow {
  display: none;
}

/* 하단 설명 문구 */
.market-bottom-text {
  margin-top: 60px;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--color-text-muted);
  word-break: keep-all;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.d-desktop {
  display: inline;
}

/* 반응형 — 992px 이하 → 세로 타임라인 */
@media (max-width: 992px) {
  .market-expertise {
    padding: 80px 20px;
  }
  
  .zigzag-wrap {
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding: 20px;
  }

  .zz-step {
    flex-direction: row !important;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 500px;
    padding: 0;
  }

  /* 세로로 바뀌면 상/하 구분 없이 원 → 타이틀 순서 */
  .zz-step.zz-top,
  .zz-step.zz-bottom {
    justify-content: flex-start;
  }

  .zz-step.zz-top .zz-main-circle,
  .zz-step.zz-bottom .zz-main-circle {
    order: 1;
  }

  .zz-step.zz-top .zz-title,
  .zz-step.zz-bottom .zz-title {
    order: 2;
    text-align: left;
    justify-content: flex-start;
    padding: 0;
    min-height: auto;
    flex: 1;
    font-size: 16px;
  }

  /* 모바일에서 점과 선 숨김 */
  .zz-step.zz-top .zz-line,
  .zz-step.zz-bottom .zz-line,
  .zz-step.zz-top .zz-dot,
  .zz-step.zz-bottom .zz-dot {
    display: none;
  }

  /* 원 사이즈 축소 */
  .zz-main-circle {
    width: 100px;
    height: 100px;
  }

  .zz-inner-circle {
    width: 80px;
    height: 80px;
  }

  .zz-inner-circle i {
    font-size: 32px;
  }

  .zz-inner-circle.zz-text-only {
    font-size: 11px;
  }

  /* 화살표 위치 변경 — 스텝 사이 정중앙 */
  .zz-arrow {
    top: auto;
    bottom: -45px;
    left: 50px;
    right: auto;
    transform: translateX(-50%);
  }

  .zz-arrow i {
    transform: none;
  }

  .d-desktop {
    display: none;
  }

  .market-bottom-text {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .market-expertise {
    padding: 60px 20px;
  }

  .market-head {
    margin-bottom: 50px;
  }

  .market-bottom-text {
    margin-top: 40px;
    font-size: 14px;
  }
}
/* ============================================
   OEM / ODM Process 공통
============================================= */
.process-section {
  padding: 100px 20px;
  background: #ffffff;
}

.process-section.odm-section {
  background: var(--color-bg-alt);
}

.process-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.process-head {
  text-align: center;
  margin-bottom: 100px;
}

.section-eng-odm {
  color: var(--color-accent) !important;
}

.process-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -2px;
  margin: 12px 0 0 0;
  font-family: var(--font-eng);
}

/* 프로세스 그리드 */
.process-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

/* 아래 줄은 역방향 */
.process-row-bottom {
  direction: rtl;
  margin-top: 60px;
}

.process-row-bottom .process-step {
  direction: ltr;
}

/* 각 스텝 */
.process-step {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.process-step-empty {
  visibility: hidden;
}

/* 이중 원 */
.step-outer-circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.process-step:hover .step-outer-circle {
  transform: scale(1.03);
  box-shadow: 0 15px 40px rgba(71, 42, 117, 0.2);
}

.step-inner-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  text-align: center;
  gap: 6px;
}

.step-number {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-eng);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-main {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.3px;
  line-height: 1.35;
  word-break: keep-all;
}

.step-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
  word-break: keep-all;
}

/* 화살표 */
.step-arrow {
  position: absolute;
  z-index: 2;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 16px;
}

.arrow-right {
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
}

.arrow-left {
  top: 50%;
  left: -18px;
  transform: translateY(-50%);
}

.arrow-down {
  bottom: -48px;
  right: 50%;
  transform: translateX(50%);
}

/* ODM 빨강 테마 */
.odm-section .step-outer-circle {
  background: #fef2f2;
}

.odm-section .process-step:hover .step-outer-circle {
  box-shadow: 0 15px 40px rgba(230, 0, 18, 0.15);
}

.odm-section .step-inner-circle {
  border-color: var(--color-accent);
}

.odm-section .step-number {
  background: var(--color-accent);
}

.odm-section .step-arrow {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* 반응형 */
@media (max-width: 1100px) {
  .step-outer-circle {
    width: 190px;
    height: 190px;
  }

  .step-inner-circle {
    width: 155px;
    height: 155px;
    padding: 12px 14px;
  }

  .step-main {
    font-size: 12px;
  }

  .step-sub {
    font-size: 10px;
  }
}

@media (max-width: 992px) {
  /* 모바일/태블릿에서는 세로 일자 배치로 전환 */
  .process-section {
    padding: 80px 20px;
  }
  
  .process-grid {
    gap: 80px;
  }

  .process-row {
    grid-template-columns: 1fr;
    gap: 80px;
  }

  .process-row-bottom {
    direction: ltr;
    margin-top: 0;
  }

  .process-step {
    padding: 0;
  }

  .process-step-empty {
    display: none;
  }

  .step-outer-circle {
    width: 200px;
    height: 200px;
  }

  .step-inner-circle {
    width: 165px;
    height: 165px;
  }

/* 모든 화살표를 스텝 사이 정중앙으로 통일 배치 */
  .arrow-right,
  .arrow-left,
  .arrow-down {
    top: auto;
    bottom: -58px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  /* 모든 화살표 아이콘 방향 통일 — 아래쪽을 가리키도록 */
  .arrow-right i {
    transform: rotate(90deg);  /* > 를 시계방향 90도 → ∨ */
  }

  .arrow-left i {
    transform: rotate(-90deg); /* < 를 반시계 90도 → ∨ */
  }

  .arrow-down i {
    transform: rotate(0deg);   /* ∨ 그대로 */
  }

  .process-step.last-step .step-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .process-section {
    padding: 60px 20px;
  }

  .process-head {
    margin-bottom: 60px;
  }
}

/* ============================================
   Manufacturing Formats 섹션
============================================= */
.formats-section {
  padding: 100px 20px;
  background: #fcfbf7;
}

.formats-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.formats-head {
  text-align: center;
  margin-bottom: 60px;
}

.formats-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -1px;
  margin: 0;
}

.formats-sub {
  font-size: var(--text-lead);
  color: var(--color-text-muted);
  margin: 14px 0 0 0;
  letter-spacing: -0.3px;
}

.formats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.format-card {
  display: flex;
  flex-direction: column;
  transition: transform var(--transition);
}

.format-card:hover {
  transform: translateY(-6px);
}

.format-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}

.format-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.format-card:hover .format-img img {
  transform: scale(1.05);
}

.format-info {
  padding: 0 4px;
}

.format-name {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.5px;
  margin: 0 0 12px 0;
  font-family: var(--font-eng);
}

.format-desc {
  font-size: var(--text-small);
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
  word-break: keep-all;
}

@media (max-width: 1100px) {
  .formats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 992px) {
  .formats-section {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .formats-section {
    padding: 60px 20px;
  }
}

@media (max-width: 576px) {
  .formats-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .format-name {
    font-size: 20px;
  }

  .format-desc {
    font-size: 13px;
  }
}

/* ============================================
   US Patents 페이지
============================================= */

/* 인트로 */
.us-patent-intro {
  padding: 100px 20px;
  background: #ffffff;
  text-align: center;
}

.us-patent-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.us-patent-badge {
  display: inline-block;
  padding: 8px 20px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.us-patent-intro-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1px;
  line-height: 1.3;
  margin: 0 0 28px 0;
  word-break: keep-all;
}

.us-patent-intro-desc {
  font-size: var(--text-lead);
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
  text-align: justify;
}

@media (max-width: 992px) {
  .us-patent-intro {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .us-patent-intro {
    padding: 60px 20px;
  }

  .us-patent-intro-desc {
    font-size: 15px;
  }
}

/* 국제 기준 배너 */
.standards-banner {
  padding: 50px 20px;
  background: #ffffff;
}

.standards-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.standard-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 30px;
  background: var(--color-bg-alt);
  border-radius: 14px;
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}

.standard-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(71, 42, 117, 0.08);
}

.standard-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.standard-icon i {
  font-size: 26px;
}

.standard-text {
  display: flex;
  flex-direction: column;
}

.standard-text strong {
  font-family: var(--font-eng);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.3px;
  margin-bottom: 2px;
}

.standard-text span {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}

@media (max-width: 992px) {
  .standards-banner {
    padding: 40px 20px;
  }
}

@media (max-width: 768px) {
  .standards-banner-inner {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .standards-banner {
    padding: 30px 20px;
  }

  .standard-item {
    padding: 22px 24px;
  }

  .standard-icon {
    width: 48px;
    height: 48px;
  }

  .standard-icon i {
    font-size: 22px;
  }

  .standard-text strong {
    font-size: 18px;
  }
}

/* 특허 상세 지그재그 */
.us-patent-list {
  padding: 100px 20px;
  background: #ffffff;
}

.us-patent-list-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.us-patent-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 120px;
}

.us-patent-row:last-child {
  margin-bottom: 0;
}

.us-patent-row.reverse .us-patent-img-col {
  order: 2;
}

.us-patent-row.reverse .us-patent-txt-col {
  order: 1;
}

/* 이미지 박스 */
.us-patent-img-col {
  width: 100%;
}

.us-patent-img-box {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}

.us-patent-img-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.us-patent-img-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* 특허 씰 (우상단 배지) */
.us-patent-seal {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(71, 42, 117, 0.3);
  z-index: 2;
}

.us-patent-seal i {
  font-size: 28px;
}

.us-patent-seal.us-patent-seal-pending {
  background: #f59e0b;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

/* 텍스트 영역 */
.us-patent-txt-col {
  padding: 10px 0;
}

.us-patent-num {
  display: inline-block;
  padding: 8px 18px;
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-eng);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 30px;
  margin-bottom: 18px;
}

.us-patent-num.us-patent-num-pending {
  background: #f59e0b;
}

.us-patent-name {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.5px;
  line-height: 1.35;
  margin: 0 0 22px 0;
  word-break: keep-all;
}

.us-patent-desc {
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0 0 24px 0;
  word-break: keep-all;
  text-align: justify;
}

.us-patent-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.us-patent-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--color-primary-light);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.6;
}

.us-patent-points li i {
  flex-shrink: 0;
  font-size: 18px;
  margin-top: 1px;
}

/* 반응형 */
@media (max-width: 992px) {
  .us-patent-row {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 80px;
  }

  .us-patent-row.reverse .us-patent-img-col {
    order: 0;
  }

  .us-patent-row.reverse .us-patent-txt-col {
    order: 1;
  }

  .us-patent-img-col {
    max-width: 600px;
    margin: 0 auto;
  }

  .us-patent-txt-col {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 992px) {
  .us-patent-list {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .us-patent-list {
    padding: 60px 20px;
  }

  .us-patent-row {
    margin-bottom: 60px;
  }

  .us-patent-desc {
    font-size: 14px;
  }

  .us-patent-seal {
    width: 44px;
    height: 44px;
    top: 12px;
    right: 12px;
  }

  .us-patent-seal i {
    font-size: 22px;
  }
}

/* ============================================
   KOR Patents 페이지
============================================= */

/* 인트로 */
.kr-patent-intro {
  padding: 100px 20px;
  background: #ffffff;
  text-align: center;
}

.kr-patent-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.kr-patent-badge {
  display: inline-block;
  padding: 8px 20px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.kr-patent-intro-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1.5px;
  line-height: 1.2;
  margin: 0 0 28px 0;
  word-break: keep-all;
}

.kr-patent-intro-desc {
  font-size: var(--text-lead);
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
  text-align: justify;
}

@media (max-width: 992px) {
  .kr-patent-intro {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .kr-patent-intro {
    padding: 60px 20px;
  }

  .kr-patent-intro-desc {
    font-size: 15px;
  }
}

/* 특허 리스트 */
.kr-patent-list {
  padding: 100px 20px;
  background: var(--color-bg-alt);
}

.kr-patent-list-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* 카드 — 좌 이미지, 우 텍스트 */
.kr-patent-card {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 50px;
  align-items: center;
  padding: 40px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}

.kr-patent-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(71, 42, 117, 0.08);
}

/* 이미지 */
.kr-patent-img {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-border);
  background: #ffffff;
}

.kr-patent-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 텍스트 */
.kr-patent-text {
  padding: 6px 0;
}

.kr-patent-num {
  display: inline-block;
  padding: 7px 16px;
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-eng);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 30px;
  margin-bottom: 16px;
}

.kr-patent-name {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.5px;
  line-height: 1.4;
  margin: 0 0 18px 0;
  word-break: keep-all;
}

.kr-patent-desc {
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 0 0 22px 0;
  word-break: keep-all;
  text-align: justify;
}

/* 핵심 혜택 박스 */
.kr-benefit {
  padding: 18px 22px;
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 10px 10px 0;
}

.kr-benefit strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.kr-benefit strong i {
  font-size: 18px;
}

.kr-benefit p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
  font-weight: 500;
  word-break: keep-all;
}

/* 반응형 */
@media (max-width: 992px) {
  .kr-patent-list {
    padding: 80px 20px;
  }

  .kr-patent-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 30px;
  }

  .kr-patent-img {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .kr-patent-list {
    padding: 60px 20px;
  }

  .kr-patent-list-inner {
    gap: 40px;
  }

  .kr-patent-card {
    padding: 22px;
    gap: 22px;
  }

  .kr-patent-desc {
    font-size: 13px;
  }

  .kr-benefit {
    padding: 14px 18px;
  }

  .kr-benefit strong {
    font-size: 12px;
  }

  .kr-benefit p {
    font-size: 13px;
  }
}

/* ============================================
   KOR Patents — R&D 철학 인용 박스
============================================= */
.rnd-philosophy {
  padding: 100px 20px;
  background: var(--color-primary);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* 배경 장식 */
.rnd-philosophy::before,
.rnd-philosophy::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.rnd-philosophy::before {
  width: 400px;
  height: 400px;
  top: -150px;
  right: -100px;
}

.rnd-philosophy::after {
  width: 300px;
  height: 300px;
  bottom: -100px;
  left: -50px;
}

.rnd-philosophy-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.rnd-quote-top,
.rnd-quote-bottom {
  display: block;
  font-size: 60px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
}

.rnd-quote-top {
  margin-bottom: 20px;
}

.rnd-quote-bottom {
  margin-top: 30px;
  transform: rotate(180deg);
}

.rnd-philosophy-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1px;
  line-height: 1.3;
  margin: 0 0 32px 0;
  word-break: keep-all;
}

.rnd-philosophy-text {
  font-size: var(--text-lead);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  word-break: keep-all;
  text-align: justify;
  letter-spacing: -0.2px;
}

/* 반응형 */
@media (max-width: 992px) {
  .rnd-philosophy {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .rnd-philosophy {
    padding: 60px 20px;
  }

  .rnd-quote-top,
  .rnd-quote-bottom {
    font-size: 48px;
  }

  .rnd-quote-top {
    margin-bottom: 14px;
  }

  .rnd-quote-bottom {
    margin-top: 22px;
  }

  .rnd-philosophy-text {
    font-size: 15px;
  }
}

/* ============================================
   Product Details 페이지
============================================= */

/* 섹션 타이틀 */
.pd-intro {
  padding: 100px 20px 30px;
  background: #ffffff;
  text-align: center;
}

.pd-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pd-intro-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1px;
  line-height: 1.3;
  margin: 0 0 16px 0;
  word-break: keep-all;
}

.pd-intro-desc {
  font-size: var(--text-lead);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

@media (max-width: 992px) {
  .pd-intro {
    padding: 80px 20px 24px;
  }
}

@media (max-width: 768px) {
  .pd-intro {
    padding: 60px 20px 20px;
  }
  .pd-intro-desc {
    font-size: 15px;
  }
}

/* 탭 네비게이션 */
.pd-tabs-wrap {
  padding: 0 20px 30px;
  background: #ffffff;
  position: sticky;
  top: 70px;
  z-index: 10;
}

.pd-tabs-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pd-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: var(--color-bg-alt);
  border-radius: 14px;
}

.pd-tab {
  padding: 12px 22px;
  background: #ffffff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-eng);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.pd-tab:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

.pd-tab.active {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(71, 42, 117, 0.25);
}

@media (max-width: 992px) {
  .pd-tabs-wrap {
    padding: 0 20px 24px;
  }
}

@media (max-width: 768px) {
  .pd-tabs-wrap {
    padding: 0 20px 20px;
    position: static;
  }
  .pd-tabs {
    padding: 10px;
    gap: 6px;
  }
  .pd-tab {
    padding: 10px 14px;
    font-size: 12px;
  }
}

/* 탭 콘텐츠 */
.pd-content-wrap {
  padding: 100px 20px;
  background: var(--color-bg-alt);
}

.pd-content-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pd-panel {
  display: none;
  animation: pdFadeIn 0.4s ease;
}

.pd-panel.active {
  display: block;
}

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

@media (max-width: 992px) {
  .pd-content-wrap {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .pd-content-wrap {
    padding: 60px 20px;
  }
}

/* 상단 박스 */
.pd-top-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 50px;
  background: #ffffff;
  border-radius: 16px;
  margin-bottom: 40px;
  border: 1px solid var(--color-border);
}

.pd-top-img {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.pd-top-img img {
  width: 100%;
  height: auto;
  display: block;
}

.pd-badge {
  display: inline-block;
  padding: 7px 16px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.pd-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.8px;
  line-height: 1.3;
  margin: 0 0 10px 0;
  word-break: keep-all;
}

.pd-subtitle {
  font-family: var(--font-eng);
  font-size: var(--text-lead);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.3px;
  margin-bottom: 18px;
  word-break: keep-all;
}

.pd-desc {
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
  text-align: justify;
}

@media (max-width: 992px) {
  .pd-top-box {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px;
  }
  .pd-top-img {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .pd-top-box {
    padding: 22px;
  }
}

/* Key Features & Features and Benefits */
.pd-section {
  padding: 40px 50px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  margin-bottom: 40px;
}

.pd-section-title {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 20px 0;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
  word-break: keep-all;
}

.pd-sub-title {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-primary);
  margin: 30px 0 16px 0;
  word-break: keep-all;
}

.pd-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pd-list li {
  position: relative;
  padding: 12px 0 12px 28px;
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  word-break: keep-all;
}

.pd-list li:last-child {
  border-bottom: none;
}

.pd-list li::before {
  content: '\F270';
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--color-primary);
  font-size: 16px;
}

.pd-list li strong {
  color: var(--color-primary);
  font-weight: 700;
}

@media (max-width: 768px) {
  .pd-section {
    padding: 26px 22px;
  }
  .pd-section-title {
    font-size: 19px;
  }
  .pd-sub-title {
    font-size: 16px;
  }
  .pd-list li {
    padding: 10px 0 10px 24px;
    font-size: 13px;
  }
}

/* Meta Box */
.pd-meta-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 30px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 16px;
  margin-bottom: 40px;
}

.pd-meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-meta-item span {
  font-family: var(--font-eng);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.pd-meta-item strong {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.5;
  word-break: keep-all;
}

@media (max-width: 992px) {
  .pd-meta-box {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
  }
}

/* Stats Grid */
.pd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.pd-stat {
  padding: 35px 20px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  text-align: center;
  transition: transform var(--transition);
}

.pd-stat:hover {
  transform: translateY(-4px);
}

.pd-stat-num {
  font-family: var(--font-eng);
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -1.5px;
  margin-bottom: 8px;
}

.pd-stat-txt {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .pd-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .pd-stat {
    padding: 24px 12px;
  }
}

/* Features List */
.pd-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.pd-feature {
  display: flex;
  gap: 20px;
  padding: 28px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}

.pd-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(71, 42, 117, 0.08);
}

.pd-feature i {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.pd-feature strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.pd-feature p {
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

@media (max-width: 768px) {
  .pd-features {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pd-feature {
    padding: 20px;
    gap: 14px;
  }
  .pd-feature i {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

/* Specs Table */
.pd-specs-wrap {
  padding: 30px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  margin-bottom: 40px;
  overflow-x: auto;
}

.pd-specs {
  width: 100%;
  border-collapse: collapse;
}

.pd-specs thead tr {
  background: var(--color-primary);
  color: #ffffff;
}

.pd-specs th {
  padding: 14px 20px;
  text-align: left;
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.pd-specs td {
  padding: 14px 20px;
  font-size: var(--text-body);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.pd-specs tbody tr:last-child td {
  border-bottom: none;
}

.pd-specs tbody tr:hover {
  background: var(--color-primary-light);
}

.pd-specs td:first-child {
  font-weight: 600;
  color: var(--color-primary);
  width: 30%;
}

.pd-specs-mark {
  display: inline-block;
  padding: 3px 10px;
  margin-left: 6px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .pd-specs-wrap {
    padding: 16px;
  }
  .pd-specs th,
  .pd-specs td {
    padding: 10px 12px;
    font-size: 12px;
  }
}

/* Analysis Box */
.pd-analysis {
  padding: 40px 50px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  margin-bottom: 40px;
}

.pd-analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-border);
}

.pd-analysis-title {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}

.pd-analysis-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pd-analysis-list li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--color-text);
}

.pd-analysis-list li strong {
  color: var(--color-primary);
  font-weight: 600;
  display: inline-block;
  min-width: 160px;
}

.pd-analysis-text {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

.pd-ingredients-text {
  font-size: var(--text-small);
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 12px 0 0 0;
  word-break: break-word;
  text-align: justify;
}

@media (max-width: 992px) {
  .pd-analysis-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .pd-analysis {
    padding: 26px 22px;
  }
}

/* Action Buttons */
.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding: 30px 0 0;
}

.pd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-family: var(--font-eng);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}

.pd-btn-primary {
  background: var(--color-primary);
  color: #ffffff;
  border: 2px solid var(--color-primary);
}

.pd-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(71, 42, 117, 0.35);
}

.pd-btn-outline {
  background: #ffffff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.pd-btn-outline:hover {
  background: var(--color-primary-light);
  transform: translateY(-3px);
}

.pd-btn i {
  font-size: 16px;
}

@media (max-width: 768px) {
  .pd-btn {
    padding: 13px 22px;
    font-size: 13px;
  }
}

/* ============================================
   B2B Inquiry 페이지
============================================= */
.b2b-contact {
  padding: 100px 20px;
  background: #ffffff;
}

.b2b-contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: flex-start;
}

/* 좌측 정보 영역 */
.b2b-info {
  padding: 30px 0;
}

.b2b-badge {
  display: inline-block;
  padding: 8px 20px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.b2b-title {
  font-family: var(--font-eng);
  font-size: var(--text-h1);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -2px;
  line-height: 1.05;
  margin: 0 0 20px 0;
}

.b2b-subtitle {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.3px;
  line-height: 1.4;
  margin: 0 0 24px 0;
  word-break: keep-all;
}

.b2b-desc {
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0 0 18px 0;
  word-break: keep-all;
}

.b2b-desc:last-of-type {
  margin-bottom: 40px;
}

/* 좌측 직접 연락 박스 */
.b2b-direct {
  padding: 24px 26px;
  background: var(--color-bg-alt);
  border-radius: 14px;
  border: 1px solid var(--color-border);
}

.b2b-direct-item {
  display: flex;
  align-items: center;
  gap: 18px;
}

.b2b-direct-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.b2b-direct-text {
  display: flex;
  flex-direction: column;
}

.b2b-direct-text span {
  font-family: var(--font-eng);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.b2b-direct-text strong {
  font-family: var(--font-eng);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text);
}

.b2b-direct-text strong a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

.b2b-direct-text strong a:hover {
  color: var(--color-primary);
}

/* 우측 폼 영역 */
.b2b-form-wrap {
  padding: 45px 45px;
  background: var(--color-bg-alt);
  border-radius: 20px;
  border: 1px solid var(--color-border);
}

.b2b-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.b2b-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.b2b-field {
  display: flex;
  flex-direction: column;
}

.b2b-field label {
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.b2b-field .req {
  color: var(--color-accent);
  margin-left: 2px;
}

.b2b-field input[type="text"],
.b2b-field input[type="email"],
.b2b-field input[type="url"],
.b2b-field input[type="tel"],
.b2b-field textarea {
  width: 100%;
  padding: 14px 18px;
  background: #ffffff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: var(--text-body);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  box-sizing: border-box;
}

.b2b-field input:focus,
.b2b-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(71, 42, 117, 0.12);
}

.b2b-field input::placeholder,
.b2b-field textarea::placeholder {
  color: #b8b8b8;
}

.b2b-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.7;
}

/* 라디오 버튼 — 알약 스타일 */
.b2b-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.b2b-radio {
  position: relative;
  cursor: pointer;
  margin: 0;
}

.b2b-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.b2b-radio span {
  display: inline-block;
  padding: 11px 20px;
  background: #ffffff;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-small);
  font-weight: 600;
  transition: all var(--transition);
}

.b2b-radio:hover span {
  border-color: var(--color-primary-light);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.b2b-radio input[type="radio"]:checked + span {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 5px 15px rgba(71, 42, 117, 0.25);
}

.b2b-radio input[type="radio"]:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 제출 버튼 */
.b2b-submit-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.b2b-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 16px 34px;
  background: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-eng);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.b2b-submit:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(71, 42, 117, 0.35);
}

.b2b-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.b2b-submit i {
  font-size: 22px;
}

/* 상태 메시지 */
.b2b-status {
  margin-top: 18px;
  padding: 0;
  border-radius: 10px;
  font-size: var(--text-body);
  line-height: 1.7;
  display: none;
  word-break: keep-all;
}

.b2b-status-success,
.b2b-status-error {
  display: block;
  padding: 18px 22px;
}

.b2b-status-success {
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  color: #2e7d32;
}

.b2b-status-error {
  background: #ffebee;
  border: 1px solid #ffcdd2;
  color: #c62828;
}

.b2b-status i {
  font-size: 18px;
  margin-right: 6px;
  vertical-align: text-top;
}

.b2b-status a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* 반응형 */
@media (max-width: 992px) {
  .b2b-contact {
    padding: 80px 20px;
  }

  .b2b-contact-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .b2b-info {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .b2b-contact {
    padding: 60px 20px;
  }

  .b2b-form-wrap {
    padding: 28px 22px;
  }

  .b2b-field-row {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .b2b-radio-group {
    gap: 8px;
  }

  .b2b-radio span {
    padding: 10px 16px;
    font-size: 12px;
  }

  .b2b-submit {
    width: 100%;
    justify-content: center;
    padding: 15px 24px;
  }

  .b2b-submit-wrap {
    justify-content: stretch;
  }
}

/* ============================================
  Company Profile 페이지
============================================= */
.cp-section {
  padding: 100px 20px;
  background: #ffffff;
}

.cp-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 90px;
  align-items: center;
}

/* 좌측: 표지 이미지 + 배경 장식 */
.cp-visual {
  position: relative;
}

.cp-bg-shape {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 90%;
  height: 90%;
  background: var(--color-primary-light);
  border-radius: 20px;
  z-index: 0;
}

.cp-cover-link {
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  transition: transform var(--transition);
}

.cp-cover-link:hover {
  transform: translateY(-6px);
}

.cp-cover-box {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(71, 42, 117, 0.18);
  background: #ffffff;
}

.cp-cover-box img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.cp-cover-link:hover .cp-cover-box img {
  transform: scale(1.03);
}

/* 다운로드 오버레이 */
.cp-download-overlay {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 72px;
  height: 72px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(71, 42, 117, 0.4);
  transition: transform var(--transition), box-shadow var(--transition);
}

.cp-download-overlay i {
  font-size: 34px;
}

.cp-cover-link:hover .cp-download-overlay {
  transform: scale(1.08);
  box-shadow: 0 16px 40px rgba(71, 42, 117, 0.5);
}

/* 우측: 텍스트 */
.cp-badge {
  display: inline-block;
  padding: 8px 20px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.cp-title {
  font-family: var(--font-eng);
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1.2px;
  line-height: 1.2;
  margin: 0 0 40px 0;
}

/* What's Inside 목차 */
.cp-contents {
  padding: 30px 32px;
  background: var(--color-bg-alt);
  border-radius: 14px;
  border: 1px solid var(--color-border);
  margin-bottom: 36px;
}

.cp-contents-title {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.3px;
  margin: 0 0 20px 0;
  text-transform: uppercase;
}

.cp-contents-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cp-contents-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.cp-contents-list li i {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--color-primary);
  margin-top: 2px;
}

.cp-contents-list li strong {
  display: block;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
  letter-spacing: -0.2px;
  word-break: keep-all;
}

.cp-contents-list li span {
  display: block;
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-text-muted);
  word-break: keep-all;
}

/* 버튼 영역 */
.cp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.cp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-family: var(--font-eng);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.cp-btn-primary {
  background: var(--color-primary);
  color: #ffffff;
}

.cp-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(71, 42, 117, 0.35);
}

.cp-btn-primary i {
  font-size: 18px;
}

.cp-btn-link {
  color: var(--color-primary);
  background: transparent;
  padding: 16px 8px;
  border: none;
}

.cp-btn-link:hover {
  color: var(--color-text);
}

.cp-btn-link i {
  font-size: 22px;
  transition: transform var(--transition);
}

.cp-btn-link:hover i {
  transform: translateX(4px);
}

/* 반응형 */
@media (max-width: 992px) {
  .cp-section {
    padding: 80px 20px;
  }

  .cp-inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .cp-visual {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .cp-section {
    padding: 60px 20px;
  }

  .cp-title {
    margin-bottom: 30px;
  }

  .cp-contents {
    padding: 22px 20px;
  }

  .cp-download-overlay {
    width: 56px;
    height: 56px;
    bottom: 14px;
    right: 14px;
  }

  .cp-download-overlay i {
    font-size: 26px;
  }

  .cp-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cp-btn-primary {
    justify-content: center;
  }

  .cp-btn-link {
    justify-content: center;
  }
}

/* ============================================
   B2B Information 페이지
============================================= */

/* 인트로 */
.b2b-intro {
  padding: 100px 20px;
  background: #ffffff;
  text-align: center;
}

.b2b-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.b2b-intro-badge {
  display: inline-block;
  padding: 8px 20px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.b2b-intro-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1px;
  line-height: 1.3;
  margin: 0 0 28px 0;
  word-break: keep-all;
}

.b2b-intro-desc {
  font-size: var(--text-lead);
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

@media (max-width: 992px) {
  .b2b-intro {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .b2b-intro {
    padding: 60px 20px;
  }
  .b2b-intro-desc {
    font-size: 15px;
  }
}

/* 섹션 타이틀 공통 */
.b2b-section-head {
  text-align: center;
  margin-bottom: 50px;
}

.b2b-section-title {
  font-family: var(--font-eng);
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.8px;
  margin: 0 0 10px 0;
}

.b2b-section-sub {
  display: block;
  font-size: var(--text-body);
  color: var(--color-text-muted);
  font-weight: 500;
  word-break: keep-all;
}

@media (max-width: 768px) {
  .b2b-section-head {
    margin-bottom: 36px;
  }
}

/* MSRP 섹션 */
.b2b-msrp {
  padding: 100px 20px;
  background: var(--color-bg-alt);
}

.b2b-msrp-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.msrp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.msrp-card {
  padding: 24px 20px 28px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.msrp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(71, 42, 117, 0.08);
}

.msrp-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-bg-alt);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msrp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.msrp-name {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 10px 0;
  letter-spacing: -0.2px;
  word-break: keep-all;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msrp-price {
  font-family: var(--font-eng);
  font-size: var(--text-lead);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.3px;
}

/* 반응형 */
@media (max-width: 992px) {
  .b2b-msrp {
    padding: 80px 20px;
  }

  .msrp-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .b2b-msrp {
    padding: 60px 20px;
  }

  .msrp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .msrp-card {
    padding: 16px 12px 20px;
  }

  .msrp-name {
    font-size: 13px;
    min-height: 36px;
    margin-bottom: 6px;
  }

  .msrp-price {
    font-size: 17px;
  }
}

/* ============================================
   B2B Information — Dimensions / Carton / Logistics
============================================= */

/* Dimensions 섹션 */
.b2b-dimensions {
  padding: 100px 20px;
  background: #ffffff;
}

.b2b-dimensions-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Carton 섹션 */
.b2b-carton {
  padding: 100px 20px;
  background: var(--color-bg-alt);
}

.b2b-carton-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 공통 스펙 카드 (Dimensions & Carton에서 사용) */
.spec-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.spec-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.b2b-carton .spec-card {
  background: #ffffff;
}

.spec-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(71, 42, 117, 0.08);
}

.spec-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.spec-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spec-card-text {
  padding: 28px 30px 32px;
}

.spec-card-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.spec-card-label i {
  font-size: 22px;
  color: var(--color-primary);
}

.spec-card-label strong {
  font-family: var(--font-eng);
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.3px;
}

.spec-card-value {
  font-family: var(--font-eng);
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.5px;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.spec-card-note {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 500;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
  word-break: keep-all;
}

.spec-card-desc {
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

@media (max-width: 992px) {
  .b2b-dimensions {
    padding: 80px 20px;
  }
  .b2b-carton {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .b2b-dimensions,
  .b2b-carton {
    padding: 60px 20px;
  }

  .spec-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .spec-card-text {
    padding: 22px 22px 26px;
  }
}

/* Logistics & Compliance 섹션 */
.b2b-logistics {
  padding: 100px 20px;
  background: #ffffff;
}

.b2b-logistics-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.logistics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.logistics-card {
  padding: 36px 28px 30px;
  background: var(--color-bg-alt);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.logistics-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(71, 42, 117, 0.08);
}

.logistics-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(71, 42, 117, 0.2);
}

.logistics-icon i {
  font-size: 32px;
}

.logistics-title {
  display: block;
  font-family: var(--font-eng);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.logistics-value {
  display: block;
  font-family: var(--font-eng);
  font-size: var(--text-body);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin-bottom: 14px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
}

.logistics-desc {
  font-size: var(--text-small);
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
  text-align: left;
}

@media (max-width: 1024px) {
  .logistics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 992px) {
  .b2b-logistics {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .b2b-logistics {
    padding: 60px 20px;
  }

  .logistics-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .logistics-card {
    padding: 28px 22px 24px;
  }

  .logistics-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
  }

  .logistics-icon i {
    font-size: 26px;
  }

  .logistics-value {
    min-height: auto;
    margin-bottom: 10px;
  }
}

/* ============================================
   Global Reach 페이지
============================================= */

/* 공통 */
.gr-section-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
}

.gr-badge-mini {
  display: inline-block;
  padding: 6px 16px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.gr-section-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.8px;
  line-height: 1.3;
  margin: 0 0 14px 0;
  word-break: keep-all;
}

.gr-section-sub {
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

/* 인트로 */
.gr-intro {
  padding: 100px 20px;
  background: #ffffff;
  text-align: center;
}

.gr-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.gr-intro-badge {
  display: inline-block;
  padding: 8px 22px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  border-radius: 999px;
  margin-bottom: 26px;
}

.gr-intro-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -1px;
  line-height: 1.5;
  margin: 0 0 20px 0;
  word-break: keep-all;
}

.gr-highlight {
  color: var(--color-primary);
  font-weight: 800;
}

.gr-intro-sub {
  font-size: var(--text-h3);
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 36px 0;
}

.gr-intro-desc {
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  word-break: keep-all;
}

@media (max-width: 992px) {
  .gr-intro {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .gr-intro {
    padding: 60px 20px;
  }
  .gr-intro-desc {
    font-size: 15px;
  }
}

/* 숫자 임팩트 */
.gr-stats {
  padding: 0 20px 100px;
  background: #ffffff;
}

.gr-stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.gr-stat {
  text-align: center;
  padding: 40px 20px;
  background: var(--color-bg-alt);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}

.gr-stat:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(71, 42, 117, 0.08);
}

.gr-stat-num {
  font-family: var(--font-eng);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.gr-stat-plus {
  font-size: 0.65em;
  font-weight: 700;
}

.gr-stat-unit {
  font-size: 0.35em;
  font-weight: 700;
  margin-left: 4px;
  color: var(--color-primary);
  opacity: 0.75;
}

.gr-stat-label {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

.gr-stat-desc {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  font-weight: 500;
  word-break: keep-all;
}

@media (max-width: 992px) {
  .gr-stats {
    padding: 0 20px 80px
  }
}

@media (max-width: 768px) {
  .gr-stats {
    padding: 0 20px 60px;
  }
  .gr-stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .gr-stat {
    padding: 26px 14px;
  }
}

/* 월드맵 섹션 */
.gr-map-section {
  padding: 100px 20px;
  background: var(--color-bg-alt);
}

.gr-map-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.gr-worldmap {
  width: 100%;
  margin-bottom: 60px;
  padding: 20px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 40px rgba(71, 42, 117, 0.08);
}

.gr-worldmap-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* 진출국 카드 */
.gr-markets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.gr-market-card {
  padding: 28px 24px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}

.gr-market-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(71, 42, 117, 0.1);
}

.gr-market-hq {
  border: 2px solid var(--color-primary);
  background: linear-gradient(135deg, #ffffff 0%, var(--color-primary-light) 100%);
}

.gr-market-expanding {
  background: var(--color-primary-light);
  border: 1px dashed var(--color-primary);
}

.gr-market-flag {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 16px;
  color: var(--color-primary);
}

.gr-market-expanding .gr-market-flag i {
  font-size: 42px;
}

.gr-market-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-eng);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.gr-market-hq .gr-market-tag {
  background: var(--color-accent);
}

.gr-market-expanding .gr-market-tag {
  background: var(--color-primary);
  opacity: 0.85;
}

.gr-market-name {
  font-family: var(--font-eng);
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.4px;
  margin: 0 0 12px 0;
}

.gr-market-desc {
  font-size: var(--text-small);
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

@media (max-width: 992px) {
  .gr-map-section {
    padding: 80px 20px;
  }

  .gr-markets {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .gr-map-section {
    padding: 60px 20px;
  }
  .gr-worldmap {
    padding: 12px;
    margin-bottom: 40px;
  }
  .gr-markets {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .gr-market-card {
    padding: 22px 20px;
  }
  .gr-market-flag,
  .gr-market-expanding .gr-market-flag i {
    font-size: 36px;
  }
}

/* Why Partner */
.gr-why {
  padding: 100px 20px;
  background: #ffffff;
}

.gr-why-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.gr-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.gr-why-card {
  padding: 40px 28px 32px;
  background: var(--color-bg-alt);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.gr-why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(71, 42, 117, 0.1);
  background: #ffffff;
}

.gr-why-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(71, 42, 117, 0.25);
}

.gr-why-icon i {
  font-size: 34px;
}

.gr-why-title {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 12px 0;
  letter-spacing: -0.3px;
  word-break: keep-all;
}

.gr-why-desc {
  font-size: var(--text-small);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
  text-align: left;
}

@media (max-width: 992px) {
  .gr-why {
    padding: 80px 20px;
  }

  .gr-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .gr-why {
    padding: 60px 20px;
  }
  .gr-why-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .gr-why-card {
    padding: 32px 24px 28px;
  }
  .gr-why-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
  }
  .gr-why-icon i {
    font-size: 28px;
  }
}

/* CTA */
.gr-cta {
  padding: 0 20px 100px;
  background: #ffffff;
}

.gr-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 50px;
  background: var(--color-primary);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.gr-cta-bg-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.gr-cta-bg-1 {
  width: 400px;
  height: 400px;
  top: -120px;
  right: -100px;
}

.gr-cta-bg-2 {
  width: 280px;
  height: 280px;
  bottom: -80px;
  left: -60px;
}

.gr-cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.gr-cta-badge {
  display: inline-block;
  padding: 7px 20px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-family: var(--font-eng);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  border-radius: 999px;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}

.gr-cta-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1px;
  line-height: 1.3;
  margin: 0 0 20px 0;
  word-break: keep-all;
}

.gr-cta-desc {
  font-size: var(--text-lead);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 40px 0;
  word-break: keep-all;
}

.gr-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.gr-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: var(--font-eng);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}

.gr-btn-primary {
  background: #ffffff;
  color: var(--color-primary);
}

.gr-btn-primary:hover {
  transform: translateY(-3px);
  background: var(--color-primary-light);
}

.gr-btn-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.gr-btn-outline:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

.gr-btn i {
  font-size: 18px;
}

@media (max-width: 992px) {
  .gr-cta {
    padding: 0 20px 80px;
  }
}

@media (max-width: 768px) {
  .gr-cta {
    padding: 0 20px 60px;
  }
  .gr-cta-inner {
    padding: 50px 28px;
    border-radius: 20px;
  }
  .gr-cta-desc {
    font-size: 15px;
    margin-bottom: 30px;
  }
  .gr-cta-buttons {
    flex-direction: column;
  }
  .gr-btn {
    justify-content: center;
    padding: 14px 22px;
  }
}

/* ============================================
   Contact 페이지 히어로 배경
============================================= */
.page-hero-contact {
  background-image: url('/assets/img/contact_bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

@media (max-width: 768px) {
  .page-hero-contact {
    background-attachment: scroll;
  }
}

/* ============================================
   1:1 문의 페이지 — 추가 스타일 (b2bInquiry 확장)
============================================= */

/* 개인정보 동의 블록 */
.b2b-privacy {
  margin-top: 8px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.b2b-privacy-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.b2b-privacy-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.b2b-privacy-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}

.b2b-privacy-details summary {
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 0;
  outline: none;
  transition: color var(--transition);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.b2b-privacy-details summary::before {
  content: '▸';
  font-size: 11px;
  transition: transform 0.2s ease;
  display: inline-block;
}

.b2b-privacy-details[open] summary::before {
  transform: rotate(90deg);
}

.b2b-privacy-details summary:hover {
  color: var(--color-primary);
}

.b2b-privacy-details summary::-webkit-details-marker {
  display: none;
}

.b2b-privacy-box {
  margin-top: 12px;
  padding: 16px 18px;
  background: var(--color-bg-alt);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.b2b-privacy-box p {
  margin: 0 0 10px 0;
}

.b2b-privacy-box p:last-child {
  margin-bottom: 0;
}

.b2b-privacy-box strong {
  color: var(--color-text);
  font-weight: 700;
}

.b2b-privacy-note {
  font-size: 12px !important;
  color: var(--color-accent) !important;
  font-weight: 600;
  margin-top: 8px !important;
}

/* 좌측 정보 강조 (strong 태그) */
.b2b-desc strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* 모바일 */
@media (max-width: 768px) {
  .b2b-privacy {
    padding: 14px 16px;
  }
  .b2b-privacy-check {
    font-size: 13px;
  }
  .b2b-privacy-box {
    padding: 12px 14px;
    font-size: 12px;
  }
}

/* ============================================
   오시는 길 페이지
============================================= */

/* 인트로 + 연락정보 2단 */
.loc-intro {
  padding: 100px 20px;
  background: #ffffff;
}

.loc-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* 좌측: 환영 메시지 */
.loc-welcome {
  padding: 10px 0;
}

.loc-badge {
  display: inline-block;
  padding: 8px 22px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.loc-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1.5px;
  line-height: 1.2;
  margin: 0 0 24px 0;
  word-break: keep-all;
}

.loc-message {
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0 0 40px 0;
  text-align: justify;
  word-break: break-all;
}

.loc-address {
  padding: 24px 26px;
  background: var(--color-bg-alt);
  border-radius: 14px;
  border-left: 4px solid var(--color-primary);
}

.loc-address-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.loc-address-label i {
  font-size: 16px;
}

.loc-address-text {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
}

.loc-address-en {
  font-family: var(--font-eng);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

/* 우측: 연락 정보 리스트 */
.loc-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.loc-detail-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.loc-detail-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(71, 42, 117, 0.12);
  border-color: var(--color-primary);
}

.loc-detail-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform var(--transition);
}

.loc-detail-row:hover .loc-detail-icon {
  transform: scale(1.08);
}

.loc-detail-body {
  flex: 1;
  min-width: 0;
}

.loc-detail-label {
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 1px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.loc-detail-value {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
  word-break: break-all;
}

.loc-detail-sub {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: 1.5;
  word-break: keep-all;
}

.loc-detail-arrow {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--color-text-muted);
  transition: transform var(--transition), color var(--transition);
}

.loc-detail-row:hover .loc-detail-arrow {
  transform: translate(3px, -3px);
  color: var(--color-primary);
}

/* 반응형 */
@media (max-width: 992px) {
  .loc-intro {
    padding: 80px 20px;
  }

  .loc-intro-inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

@media (max-width: 768px) {
  .loc-intro {
    padding: 60px 20px;
  }
  .loc-detail-row {
    padding: 18px 20px;
    gap: 14px;
  }
  .loc-detail-icon {
    width: 48px;
    height: 48px;
    font-size: 19px;
  }
  .loc-detail-value {
    font-size: 16px;
  }
  .loc-detail-sub {
    font-size: 12px;
  }
  .loc-detail-arrow {
    font-size: 15px;
  }
  .loc-address {
    padding: 20px 22px;
  }
  .loc-address-text {
    font-size: 15px;
  }
}

/* 지도 섹션 */
.loc-map-section {
  padding: 100px 20px;
  background: var(--color-bg-alt);
}

.loc-map-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.loc-map-head {
  text-align: center;
  margin-bottom: 40px;
}

.loc-badge-mini {
  display: inline-block;
  padding: 6px 18px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.loc-map-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.8px;
  margin: 0;
}

.loc-map-wrap {
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  background: #f0ecf5;
}

.loc-map-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* 주소 오버레이 */
.loc-map-overlay {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  max-width: 380px;
}

.loc-map-overlay-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.loc-map-overlay-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.loc-map-overlay-text strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 2px;
  letter-spacing: -0.2px;
}

.loc-map-overlay-text span {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
  word-break: keep-all;
}

/* 외부 지도 앱 */
.loc-map-apps {
  margin-top: 30px;
  text-align: center;
}

.loc-map-apps-label {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

.loc-map-apps-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.loc-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.loc-app-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(71, 42, 117, 0.15);
  border-color: var(--color-primary);
}

.loc-app-btn i {
  font-size: 16px;
}

.loc-app-naver:hover {
  color: #03c75a;
  border-color: #03c75a;
}

.loc-app-kakao:hover {
  color: #fae100;
  background: #3c1e1e;
  border-color: #3c1e1e;
}

.loc-app-google:hover {
  color: #ffffff;
  background: #4285f4;
  border-color: #4285f4;
}

@media (max-width: 992px) {
  .loc-map-section {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .loc-map-section {
    padding: 60px 20px;
  }
  .loc-map-wrap {
    height: 420px;
    border-radius: 14px;
  }
  .loc-map-overlay {
    top: 14px;
    left: 14px;
    right: 14px;
    max-width: none;
    padding: 12px 16px;
    gap: 10px;
  }
  .loc-map-overlay-icon {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }
  .loc-map-overlay-text strong {
    font-size: 13px;
  }
  .loc-map-overlay-text span {
    font-size: 11px;
  }
  .loc-app-btn {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* ============================================
   FAQ (자주 묻는 질문) 페이지
============================================= */

/* 인트로 */
.faq-intro {
  padding: 100px 20px;
  background: #ffffff;
  text-align: center;
}

.faq-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.faq-intro-badge {
  display: inline-block;
  padding: 8px 22px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.faq-intro-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1px;
  line-height: 1.3;
  margin: 0 0 16px 0;
}

.faq-intro-desc {
  font-size: var(--text-lead);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

/* FAQ 본문 (사이드바 + 콘텐츠) */
.faq-main {
  padding: 100px 20px;
  background: var(--color-bg-alt);
}

.faq-main-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

/* 좌측 사이드바 */
.faq-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}

.faq-sidebar-label {
  font-family: var(--font-eng);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 2px;
  margin-bottom: 16px;
  padding-left: 4px;
  text-transform: uppercase;
}

.faq-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.faq-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition);
  border-bottom: 1px solid var(--color-border);
  word-break: keep-all;
}

.faq-nav-item:last-child {
  border-bottom: none;
}

.faq-nav-item:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.faq-nav-item.active {
  background: var(--color-primary);
  color: #ffffff;
}

.faq-nav-num {
  font-family: var(--font-eng);
  font-size: 11px;
  font-weight: 800;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  transition: all var(--transition);
  flex-shrink: 0;
}

.faq-nav-item.active .faq-nav-num {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* 도움 박스 */
.faq-help-box {
  padding: 24px 22px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-align: center;
}

.faq-help-box i.bi-chat-dots-fill {
  font-size: 32px;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: block;
}

.faq-help-box strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
  word-break: keep-all;
}

.faq-help-box p {
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0 0 16px 0;
  word-break: keep-all;
}

.faq-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  border-radius: 999px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.faq-help-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(71, 42, 117, 0.3);
}

.faq-help-btn i {
  font-size: 13px;
}

/* 우측 콘텐츠 */
.faq-content {
  background: transparent;
}

.faq-pane {
  display: none;
}

.faq-pane.active {
  display: block;
}

.faq-pane-title {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.5px;
  margin: 0 0 24px 0;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}

/* 아코디언 Q&A */
.faq-item {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.faq-item.open {
  box-shadow: 0 10px 30px rgba(71, 42, 117, 0.1);
  border-color: var(--color-primary);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.6;
  letter-spacing: -0.2px;
  transition: color var(--transition);
  word-break: keep-all;
}

.faq-q:hover {
  color: var(--color-primary);
}

.faq-q-num {
  flex-shrink: 0;
  font-family: var(--font-eng);
  font-size: 14px;
  font-weight: 800;
  color: var(--color-primary);
  min-width: 36px;
}

.faq-q-icon {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--color-primary);
  margin-left: auto;
  transition: transform var(--transition);
}

.faq-item.open .faq-q-icon {
  transform: rotate(180deg);
}

.faq-a {
  display: none;
  padding: 0 22px 22px 70px;
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--color-text-muted);
  text-align: justify;
  word-break: break-all;
}

.faq-item.open .faq-a {
  display: block;
}

.faq-a a.faq-link {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition);
}

.faq-a a.faq-link:hover {
  opacity: 0.75;
}

/* 반응형 */
@media (max-width: 992px) {
  .faq-intro {
    padding: 80px 20px;
  }
  
  .faq-main {
    padding: 80px 20px;
  }

  .faq-main-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    min-width: 0;
  }

  .faq-sidebar {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  /* 모바일: 카테고리 탭을 가로 스크롤로 */
  .faq-nav {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 999px;
    padding: 4px;
    background: #ffffff;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .faq-nav::-webkit-scrollbar {
    height: 4px;
  }

  .faq-nav::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 999px;
  }

  .faq-nav-item {
    flex-shrink: 0;
    padding: 10px 16px;
    border-bottom: none;
    border-radius: 999px;
    font-size: var(--text-small);
    white-space: nowrap;
  }

  .faq-nav-num {
    display: none;
  }

  .faq-nav-item.active {
    background: var(--color-primary);
  }

  .faq-sidebar-label {
    display: none;
  }

  .faq-help-box {
    margin-top: 24px;
    order: 2;
  }
}

@media (max-width: 768px) {
  .faq-intro {
    padding: 60px 20px;
  }

  .faq-main {
    padding: 60px 20px;
  }

  .faq-q {
    padding: 16px 18px;
    font-size: 14px;
    gap: 10px;
  }

  .faq-q-num {
    font-size: 13px;
    min-width: 32px;
  }

  .faq-a {
    padding: 0 18px 18px 60px;
    font-size: 13px;
  }
}


/* ============================================
   History 페이지
============================================= */

/* 공통 */
.hist-section-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
}

.hist-badge-mini {
  display: inline-block;
  padding: 6px 16px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.hist-section-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.8px;
  line-height: 1.3;
  margin: 0;
  word-break: keep-all;
}

/* 인트로 */
.hist-intro {
  padding: 100px 20px;
  background: #ffffff;
  text-align: center;
}

.hist-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.hist-intro-badge {
  display: inline-block;
  padding: 8px 22px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  border-radius: 999px;
  margin-bottom: 26px;
}

.hist-intro-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -1.2px;
  line-height: 1.3;
  margin: 0 0 22px 0;
  word-break: keep-all;
}

.hist-intro-desc {
  font-size: var(--text-lead);
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

@media (max-width: 992px) {
  .hist-intro {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .hist-intro {
    padding: 60px 20px;
  }
  .hist-intro-desc {
    font-size: 15px;
  }
}

/* 요약 카드 */
.hist-stats {
  padding: 50px 20px;
  background: #ffffff;
}

.hist-stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.hist-stat {
  position: relative;
  text-align: center;
  padding: 36px 22px 30px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
}

.hist-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.hist-stat-purple::before { background: #472a75; }
.hist-stat-blue::before { background: #2563eb; }
.hist-stat-red::before { background: #e60012; }
.hist-stat-green::before { background: #059669; }

.hist-stat:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(71, 42, 117, 0.1);
}

.hist-stat-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
  color: #ffffff;
}

.hist-stat-purple .hist-stat-icon { background: #472a75; }
.hist-stat-blue .hist-stat-icon { background: #2563eb; }
.hist-stat-red .hist-stat-icon { background: #e60012; }
.hist-stat-green .hist-stat-icon { background: #059669; }

.hist-stat-num {
  font-family: var(--font-eng);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: 10px;
}

.hist-stat-label {
  font-family: var(--font-eng);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.hist-stat-desc {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  font-weight: 500;
}

@media (max-width: 992px) {
  .hist-stats {
    padding: 40px 20px;
  }
}

@media (max-width: 768px) {
  .hist-stats {
    padding: 30px 20px;
  }
  .hist-stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .hist-stat {
    padding: 26px 14px 22px;
  }
  .hist-stat-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

/* 타임라인 섹션 */
.hist-timeline-section {
  padding: 100px 20px;
  background: var(--color-bg-alt);
}

.hist-timeline-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 범례 */
.hist-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
  padding: 18px 24px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--color-border);
}

.hist-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.hist-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hist-legend-purple { background: #472a75; }
.hist-legend-blue { background: #2563eb; }
.hist-legend-red { background: #e60012; }
.hist-legend-green { background: #059669; }

/* 타임라인 본체 */
.hist-timeline {
  position: relative;
  padding: 20px 0;
}

/* 중앙 세로선 */
.hist-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, transparent 0%, var(--color-primary) 5%, var(--color-primary) 95%, transparent 100%);
  transform: translateX(-50%);
  border-radius: 999px;
}

/* 연도 그룹 */
.hist-year-group {
  position: relative;
  margin-bottom: 60px;
}

.hist-year-group:last-child {
  margin-bottom: 0;
}

.hist-year-label {
  position: relative;
  display: block;
  width: 100px;
  height: 40px;
  margin: 0 auto 30px;
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-eng);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 999px;
  text-align: center;
  line-height: 40px;
  box-shadow: 0 8px 20px rgba(71, 42, 117, 0.25);
  z-index: 2;
}

/* 이벤트 카드 컨테이너 */
.hist-event {
  position: relative;
  width: 50%;
  padding: 0 40px;
  margin-bottom: 22px;
  box-sizing: border-box;
}

.hist-event-left {
  left: 0;
  padding-right: 50px;
}

.hist-event-right {
  left: 50%;
  padding-left: 50px;
}

/* 중앙 점 */
.hist-event-dot {
  position: absolute;
  top: 28px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(71, 42, 117, 0.2);
}

.hist-event-left .hist-event-dot {
  right: -8px;
}

.hist-event-right .hist-event-dot {
  left: -8px;
}

/* 이벤트 카드 */
.hist-event-card {
  padding: 22px 24px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
}

.hist-event-card::after {
  content: '';
  position: absolute;
  top: 28px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.hist-event-left .hist-event-card::after {
  right: -8px;
  border-left: 8px solid #ffffff;
}

.hist-event-right .hist-event-card::after {
  left: -8px;
  border-right: 8px solid #ffffff;
}

.hist-event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(71, 42, 117, 0.12);
}

/* 이벤트 날짜 */
.hist-event-date {
  font-family: var(--font-eng);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 1.2px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* 이벤트 태그 */
.hist-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  color: #ffffff;
  font-family: var(--font-eng);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.hist-tag-purple { background: #472a75; }
.hist-tag-blue { background: #2563eb; }
.hist-tag-red { background: #e60012; }
.hist-tag-green { background: #059669; }

.hist-pending {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: 0.5px;
}

/* 카테고리별 테두리 색 */
.hist-event[data-cat="found"] .hist-event-card { border-left: 4px solid #472a75; }
.hist-event[data-cat="kr"] .hist-event-card { border-left: 4px solid #2563eb; }
.hist-event[data-cat="us"] .hist-event-card { border-left: 4px solid #e60012; }
.hist-event[data-cat="md"] .hist-event-card { border-left: 4px solid #059669; }

/* 이벤트 제목 */
.hist-event-title {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.3px;
  line-height: 1.4;
  margin: 0 0 8px 0;
  word-break: keep-all;
}

/* 이벤트 설명 */
.hist-event-desc {
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
  word-break: keep-all;
}

/* 설립 카드 특별 스타일 */
.hist-event-foundation .hist-event-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--color-primary-light) 100%);
  border: 2px solid var(--color-primary) !important;
  border-left-width: 4px !important;
}

.hist-event-foundation .hist-event-dot {
  background: var(--color-primary);
  border-color: #ffffff;
  width: 20px;
  height: 20px;
  box-shadow: 0 4px 14px rgba(71, 42, 117, 0.5);
}

.hist-event-foundation .hist-event-left .hist-event-dot {
  right: -10px;
}

/* 반응형 — 태블릿 이하: 한쪽 정렬 */
@media (max-width: 992px) {
  .hist-timeline-section {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .hist-timeline-section {
    padding: 60px 20px;
  }
  .hist-legend {
    padding: 14px 16px;
    gap: 14px;
    margin-bottom: 30px;
  }
  .hist-legend-item {
    font-size: 12px;
  }
  .hist-timeline::before {
    left: 20px;
    transform: none;
  }
  .hist-year-label {
    width: 90px;
    height: 36px;
    line-height: 36px;
    margin: 0 0 24px 0;
    font-size: 14px;
  }
  .hist-event {
    width: 100%;
    padding: 0 0 0 48px;
    margin-bottom: 18px;
  }
  .hist-event-left,
  .hist-event-right {
    left: 0;
    padding-right: 0;
    padding-left: 48px;
  }
  .hist-event-dot,
  .hist-event-left .hist-event-dot,
  .hist-event-right .hist-event-dot {
    left: 12px;
    right: auto;
  }
  .hist-event-card::after,
  .hist-event-left .hist-event-card::after,
  .hist-event-right .hist-event-card::after {
    left: -8px;
    right: auto;
    border-left: none;
    border-right: 8px solid #ffffff;
  }
  .hist-event-foundation .hist-event-left .hist-event-dot {
    left: 10px;
    right: auto;
  }
  .hist-event-card {
    padding: 18px 20px;
  }
  .hist-event-title {
    font-size: 15px;
  }
  .hist-event-desc {
    font-size: 12px;
  }
}

/* CTA */
.hist-cta {
  padding: 100px 20px;
  background: #ffffff;
}

.hist-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 50px;
  background: var(--color-primary);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.hist-cta-bg-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.hist-cta-bg-1 {
  width: 400px;
  height: 400px;
  top: -120px;
  right: -100px;
}

.hist-cta-bg-2 {
  width: 280px;
  height: 280px;
  bottom: -80px;
  left: -60px;
}

.hist-cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hist-cta-badge {
  display: inline-block;
  padding: 7px 20px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-family: var(--font-eng);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  border-radius: 999px;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}

.hist-cta-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1px;
  line-height: 1.3;
  margin: 0 0 20px 0;
  word-break: keep-all;
}

.hist-cta-desc {
  font-size: var(--text-lead);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 40px 0;
  word-break: keep-all;
}

.hist-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.hist-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: var(--font-eng);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}

.hist-btn-primary {
  background: #ffffff;
  color: var(--color-primary);
}

.hist-btn-primary:hover {
  transform: translateY(-3px);
  background: var(--color-primary-light);
}

.hist-btn-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.hist-btn-outline:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

.hist-btn i {
  font-size: 18px;
}

@media (max-width: 992px) {
  .hist-cta {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .hist-cta {
    padding: 60px 20px;
  }
  .hist-cta-inner {
    padding: 50px 28px;
    border-radius: 20px;
  }
  .hist-cta-desc {
    font-size: 15px;
    margin-bottom: 30px;
  }
  .hist-cta-buttons {
    flex-direction: column;
  }
  .hist-btn {
    justify-content: center;
    padding: 14px 22px;
  }
}

/* ============================================
   영양소 데이터 표
============================================= */
.nutrient-tables-wrap {
  display: flex;
  gap: 24px;
  margin: 50px 0;
  align-items: flex-start;
}

.nutrient-table-scroll {
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  background: #fff;
  border: 1px solid var(--color-border);
}

.nutrient-table-scroll:first-child {
  flex: 1;
  min-width: 0;
}

.nutrient-table-side {
  flex-shrink: 0;
  width: 260px;
}

.nutrient-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  white-space: nowrap;
}

.nutrient-table thead th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: 12px 10px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  line-height: 1.4;
  vertical-align: middle;
}

.nutrient-table thead th small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.8;
  margin-top: 2px;
  line-height: 1.3;
}

.nutrient-table .thead-sub th {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 700;
  font-family: var(--font-eng);
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
}

.nutrient-table tbody td {
  padding: 10px 12px;
  text-align: center;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 14px;
}

.nutrient-table tbody tr:nth-child(even) {
  background: var(--color-bg-alt);
}

.nutrient-table tbody tr:hover {
  background: var(--color-primary-light);
}

/* 이름 열 왼쪽 정렬 */
.nutrient-table tbody td:nth-child(2) {
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
}

/* NO 열 */
.nutrient-table tbody td:nth-child(1) {
  font-family: var(--font-eng);
  font-weight: 600;
  color: var(--color-primary);
  width: 40px;
}

/* 셀튠 값 열 강조 */
.nutrient-table tbody td:nth-child(3) {
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(71, 42, 117, 0.04);
}

/* tfoot */
.nutrient-table-note {
  font-family: var(--font-eng);
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: right;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

/* 반응형 */
@media (max-width: 992px) {
  .nutrient-tables-wrap {
    flex-direction: column;
    gap: 20px;
  }
  .nutrient-table-scroll {
    width: 100%;
  }
  .nutrient-table-side {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .nutrient-tables-wrap {
    margin: 40px 0;
  }

/* 커스텀 스크롤바 */
  .nutrient-table-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-primary-light);
  }

  .nutrient-table-scroll::-webkit-scrollbar {
    height: 6px;
  }

  .nutrient-table-scroll::-webkit-scrollbar-track {
    background: var(--color-primary-light);
    border-radius: 3px;
  }

  .nutrient-table-scroll::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 3px;
  }

  .nutrient-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #5a3a8a;
  }

  .nutrient-table {
    font-size: 13px;
  }

  .nutrient-table thead th {
    padding: 10px 6px;
    font-size: 12px;
  }

  .nutrient-table tbody td {
    padding: 8px 6px;
  }
}

/* 리스트형 표 (잔류농약 등) */
.nutrient-table-list {
  table-layout: fixed;
}

@media (max-width: 768px) {
  .nutrient-table-list {
    table-layout: auto;
  }
}
.nutrient-table-list thead th {
  font-size: 16px;
  padding: 16px 10px;
}

.nutrient-table-list tbody td {
  font-family: var(--font-eng);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text);
  text-align: left;
  padding: 6px 10px;
  white-space: nowrap;
}

.nutrient-table-list {
  min-width: 700px;
}

.nutrient-table-list tbody td:nth-child(1),
.nutrient-table-list tbody td:nth-child(2),
.nutrient-table-list tbody td:nth-child(3),
.nutrient-table-list tbody td:nth-child(4),
.nutrient-table-list tbody td:nth-child(5) {
  font-weight: 400;
  color: var(--color-text);
  background: transparent;
}

/* ============================================
   법적 페이지 (개인정보처리방침, 이용약관)
============================================= */

.legal-section {
  padding: 100px 20px;
  background: #ffffff;
}

.legal-inner {
  max-width: 900px;
  margin: 0 auto;
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--color-text);
}

.legal-intro {
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 0 0 50px 0;
  padding: 24px 28px;
  background: var(--color-primary-light);
  border-radius: 12px;
  border-left: 4px solid var(--color-primary);
  text-align: justify;
  word-break: break-all;
}

.legal-article {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-border);
}

.legal-article:last-of-type {
  border-bottom: none;
}

.legal-article-title {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 18px 0;
  letter-spacing: -0.3px;
}

.legal-sub-title {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text);
  margin: 24px 0 10px 0;
}

.legal-article p {
  margin: 0 0 14px 0;
  text-align: justify;
  word-break: break-all;
}

.legal-list {
  margin: 14px 0;
  padding-left: 24px;
}

.legal-list li {
  margin-bottom: 8px;
  line-height: 1.85;
}

.legal-sub-list {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.legal-sub-list li {
  margin-bottom: 4px;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.legal-table-wrap {
  overflow-x: auto;
  margin: 16px 0;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.legal-table th,
.legal-table td {
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: var(--color-bg-alt);
  font-weight: 700;
  color: var(--color-text);
}

.legal-note {
  margin: 16px 0;
  padding: 14px 18px;
  background: var(--color-bg-alt);
  border-radius: 8px;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.legal-info-box {
  margin: 16px 0;
  padding: 24px 28px;
  background: var(--color-primary-light);
  border-radius: 12px;
  border-left: 4px solid var(--color-primary);
}

.legal-info-box p {
  margin: 0 0 6px 0;
  text-align: left;
  word-break: keep-all;
}

.legal-effective {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 2px solid var(--color-primary);
  text-align: right;
}

.legal-effective p {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-align: right;
}

/* 푸터 법적 링크 */
.footer-legal {
  margin: 12px 0 0 0;
  font-size: var(--text-small);
  text-align: center;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-legal a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-legal .sep {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.3);
}

/* 반응형 */
@media (max-width: 992px) {
  .legal-section {
    padding: 80px 20px;
  }
}

@media (max-width: 768px) {
  .legal-section {
    padding: 60px 20px;
  }

  .legal-intro {
    padding: 20px 22px;
    font-size: 15px;
  }

  .legal-article-title {
    font-size: var(--text-h3);
  }

  .legal-info-box {
    padding: 20px 22px;
  }

  .legal-table th,
  .legal-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* ============================================
   404 페이지
============================================= */

.error-404 {
  min-height: calc(100vh - 200px);
  padding: 100px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-primary-light) 100%);
}

.error-404-inner {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.error-404-num {
  font-family: var(--font-eng);
  font-size: clamp(120px, 18vw, 220px);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -8px;
  margin-bottom: 24px;
}

.error-404-title {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 18px 0;
  letter-spacing: -0.8px;
}

.error-404-desc {
  font-size: var(--text-lead);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0 0 40px 0;
  word-break: keep-all;
}

.error-404-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.error-404-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: var(--text-body);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition);
}

.error-404-btn i {
  font-size: 18px;
}

.error-404-btn-primary {
  background: var(--color-primary);
  color: #ffffff;
  border: 2px solid var(--color-primary);
}

.error-404-btn-primary:hover {
  background: #3a2160;
  border-color: #3a2160;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(71, 42, 117, 0.25);
}

.error-404-btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.error-404-btn-outline:hover {
  background: var(--color-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

.error-404-suggest {
  margin-top: 60px;
  padding-top: 50px;
  border-top: 1px solid var(--color-border);
}

.error-404-suggest-title {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 30px 0;
  letter-spacing: -0.3px;
}

.error-404-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.error-404-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-decoration: none;
  transition: all var(--transition);
}

.error-404-link:hover {
  border-color: var(--color-primary);
  box-shadow: 0 12px 30px rgba(71, 42, 117, 0.12);
  transform: translateY(-4px);
}

.error-404-link i {
  font-size: 32px;
  color: var(--color-primary);
  margin-bottom: 14px;
}

.error-404-link strong {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

.error-404-link span {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  word-break: keep-all;
}

/* 반응형 */
@media (max-width: 992px) {
  .error-404 {
    padding: 80px 20px;
  }

  .error-404-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .error-404 {
    padding: 60px 20px;
    min-height: calc(100vh - 150px);
  }

  .error-404-num {
    letter-spacing: -4px;
  }

  .error-404-actions {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 40px;
  }

  .error-404-btn {
    justify-content: center;
  }

  .error-404-suggest {
    margin-top: 40px;
    padding-top: 40px;
  }
}