@import url("https://hangeul.pstatic.net/hangeul_static/css/maru-buri.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* ==========================================================================
   농업회사법인 (주)정푸드코리아 — 하이엔드 프리미엄 타이포그래피 시스템
   - 30~50년 전통 삼포 헤리티지를 품은 기품 있는 명조(마루부리 MaruBuri)
   - 초정밀 서브픽셀 렌더링과 모던 가독성의 고딕(Pretendard Variable) 앙상블
   - 황금비 자간(-0.02em ~ -0.035em) 및 행간(1.6 ~ 1.76) 전면 적용
   - AI 특유의 획일적 고딕 나열을 탈피한 깊이감 있는 위계(Hierarchy) 조판
   ========================================================================== */
:root {
  /* High-End Enterprise Typography System */
  --font-serif: "MaruBuri", "MaruBuriBold", "Nanum Myeongjo", "Batang", serif;
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-display: var(--font-serif);
  --font-ui: var(--font-sans);

  /* Optical Kerning & Micro-Spacing Tokens (황금비 자간) */
  --tracking-hero: -0.035em;
  --tracking-heading: -0.028em;
  --tracking-subheading: -0.02em;
  --tracking-body: -0.018em;
  --tracking-ui: -0.01em;
  --tracking-kicker: 0.12em;
  --tracking-badge: 0.06em;

  /* Line Height Rhythm Tokens (황금비 행간) */
  --lh-hero: 1.32;
  --lh-heading: 1.34;
  --lh-subheading: 1.45;
  --lh-body: 1.74;
  --lh-relaxed: 1.82;

  /* Brand Primary: 신뢰와 자연의 딥 포레스트 그린 (Solid Enterprise Tone) */
  --primary: #0a4d2e;
  --primary-hover: #073a22;
  --primary-active: #052a18;
  --primary-light: #16a34a;
  --primary-subtle: #f0fdf4;
  --primary-surface: #f4fbf6;
  --primary-border: #bbf7d0;
  --primary-ring: rgba(10, 77, 46, 0.16);

  /* Brand Accent: 따뜻한 하베스트 앰버 & 골드 */
  --accent: #b45309;
  --accent-gold: #d97706;
  --accent-light: #fef3c7;
  --accent-surface: #fffbeb;
  --accent-border: #fde68a;

  /* Neutrals: 고대비 텍스트 & 클린 서피스 */
  --ink: #0f172a;
  --text-main: #1e293b;
  --text-muted: #475569;
  --text-subtle: #64748b;
  --text-inverse: #ffffff;

  /* Backgrounds & Surfaces */
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --bg-subtle: #f1f5f9;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.96);

  /* Crisp Borders & Separators */
  --line: #e2e8f0;
  --line-light: #f1f5f9;
  --line-strong: #cbd5e1;
  --border-focus: var(--primary);

  /* Natural Multi-Layer Shadows (No AI-slop harsh blacks) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 10px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
  --shadow-xl: 0 20px 40px -8px rgba(10, 77, 46, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.05), 0 6px 16px -4px rgba(15, 23, 42, 0.05);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  /* Layout & Spacing */
  --max: 1240px;
  --max-wide: 1400px;
  --container-padding: clamp(16px, 3.8vw, 44px);
  --section-padding: clamp(64px, 7.5vw, 108px);
  --header-height: 84px;
  --header-height-mobile: 68px;

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.16s var(--ease);
  --transition-normal: 0.24s var(--ease);
  --transition-smooth: 0.38s var(--ease);
}

/* ==========================================================================
   CSS Reset & Base Foundations
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "cv08" 1, "kern" 1;
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "cv05" 1, "cv08" 1, "kern" 1;
  color: var(--text-main);
  background-color: var(--bg);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  font-weight: 700;
}

h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: var(--tracking-subheading);
  line-height: var(--lh-subheading);
  font-weight: 700;
}

p {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

picture {
  display: contents;
}

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

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

button {
  cursor: pointer;
  border: none;
  background: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Custom Refined Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-alt);
}
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-alt);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-subtle);
}

/* Accessibility Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Skip Link */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 10px 20px;
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   Global Header & Navigation (High-End Corporate Polish)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background: var(--surface-glass);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: height var(--transition-normal), box-shadow var(--transition-normal);
}

.site-header.scrolled {
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.07);
}

.header-inner {
  width: min(var(--max), calc(100% - var(--container-padding) * 2));
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand img {
  width: 48px;
  height: auto;
  aspect-ratio: 80 / 57;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.brand:hover img {
  transform: scale(1.04);
}

.brand span {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.brand b {
  display: block;
  font-size: 17.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-top: 1px;
}

.nav {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 6px;
}

.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-item > a {
  position: relative;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-item > a:hover {
  color: var(--primary);
  background: var(--primary-surface);
}

.nav-item > a[aria-current="page"] {
  color: var(--primary);
  font-weight: 800;
}

.nav-item > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}

/* Direct entry to the Korean business crew page. */
.crew-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: #e21e26;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.crew-nav-link:hover {
  background: #bd1520;
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 941px) and (max-width: 1100px) {
  .nav { gap: 2px; }
  .nav-item > a { padding: 10px 8px; font-size: 13px; }
  .crew-nav-link { padding: 10px 12px; font-size: 13px; }
  .header-cta { padding: 10px 12px; margin-left: 4px; font-size: 12px; }
  .brand { gap: 8px; }
  .brand b { font-size: 14px; }
  .brand span { font-size: 11px; }
}

/* Dropdown Menu */
.dropdown {
  position: absolute;
  top: calc(var(--header-height) - 4px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 200px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.dropdown a {
  display: block;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.dropdown a:hover {
  background: var(--primary-surface);
  color: var(--primary);
  transform: translateX(3px);
}

.dropdown a[aria-current="page"] {
  background: var(--primary-surface);
  color: var(--primary);
  font-weight: 700;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Header CTA Button */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--primary);
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  margin-left: 10px;
}

.header-cta:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.header-cta:active {
  transform: translateY(0) scale(0.98);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.language-switcher {
  flex: 0 0 auto;
  margin-left: 10px;
}

.language-switcher select {
  min-height: 34px;
  max-width: 112px;
  padding: 6px 24px 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background-color: var(--surface);
  color: var(--ink);
  font: 700 11px/1.2 var(--font-sans);
  cursor: pointer;
}

.language-switcher select:hover,
.language-switcher select:focus-visible {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
  outline-offset: 2px;
}

.menu-toggle {
  display: none;
  font-size: 26px;
  color: var(--ink);
  padding: 8px;
  line-height: 1;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
}

.menu-toggle:hover {
  background: var(--bg-subtle);
}

.menu-toggle .icon-close {
  display: none;
}

.menu-toggle .icon-open {
  display: inline-block;
}

.nav-backdrop {
  display: none;
}

/* ==========================================================================
   Hero Section (Cinematic Dignity & Restrained Precision)
   ========================================================================== */
.hero {
  position: relative;
  min-height: clamp(620px, 78vh, 840px);
  margin-top: var(--header-height);
  background: #04160e;
  color: #ffffff;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(1.1) brightness(1);
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 22, 14, 0.06) 0%, rgba(4, 22, 14, 0.18) 80%, rgba(4, 22, 14, 0.4) 100%),
    linear-gradient(90deg, rgba(4, 22, 14, 0.36) 0%, rgba(4, 22, 14, 0.14) 50%, rgba(4, 22, 14, 0.03) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(var(--max), calc(100% - var(--container-padding) * 2));
  margin: auto;
  padding: clamp(36px, 5vw, 64px) 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fef08a;
  margin-bottom: 22px;
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.8vw, 56px);
  font-weight: 700;
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-hero);
  color: #ffffff;
  margin-bottom: 20px;
  max-width: 900px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.hero h1 small {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 500;
  color: #e2e8f0;
  line-height: 1.42;
  letter-spacing: var(--tracking-subheading);
  margin-top: 10px;
  text-shadow: none;
}

.hero p.hero-desc {
  font-family: var(--font-sans);
  font-size: clamp(15.5px, 1.2vw, 17px);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: #cbd5e1;
  max-width: 680px;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* High-End Enterprise Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--tracking-ui);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn.primary {
  background: var(--primary);
  color: #ffffff !important;
  box-shadow: var(--shadow-sm);
}

.btn.primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn.primary:active {
  transform: translateY(0) scale(0.98);
}

.btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  transform: translateY(-1px);
}

.btn.secondary:active {
  transform: translateY(0) scale(0.98);
}

/* Hero Stats Bar */
.hero-stats {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 20px;
  max-width: 960px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-stat-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-stat-num {
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800;
  color: #fef08a;
  letter-spacing: -0.03em;
}

.hero-stat-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
}

/* ==========================================================================
   Section Standards & Comfortable Layouts
   ========================================================================== */
.section {
  padding: var(--section-padding) 0;
  position: relative;
}

.section.alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.container {
  width: min(var(--max), calc(100% - var(--container-padding) * 2));
  margin: auto;
}

.section-head {
  margin-bottom: clamp(36px, 4.5vw, 52px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.section-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
}

.section-head p {
  font-family: var(--font-sans);
  max-width: 540px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
}

/* Reveal Observer Animations */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Video Facade & News Highlights
   ========================================================================== */
.video-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}

.video-wrapper {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #000;
  aspect-ratio: 16 / 9;
}

.video-facade {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.76) 100%),
    url("assets/images/hero_cover.jpg") center/cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: var(--radius-md);
  gap: 14px;
  cursor: pointer;
  transition: transform var(--transition-normal);
}

.video-facade:hover {
  transform: scale(1.012);
}

.video-facade span {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  padding-left: 3px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.video-facade:hover span {
  background: var(--primary-hover);
  transform: scale(1.08);
}

.video-facade strong {
  font-size: 15.5px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.news-links {
  background: #ffffff;
  padding: clamp(24px, 3.5vw, 34px);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.news-links h3 {
  font-size: 18.5px;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary-surface);
}

.news-links a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-light);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-main);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.news-links a:last-child {
  border-bottom: none;
}

.news-links a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

/* ==========================================================================
   Business Area Grid (Authentic Cards)
   ========================================================================== */
.business-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}

.business-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0f172a;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  align-items: flex-end;
}

.business-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.business-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.84) 85%);
  transition: opacity var(--transition-normal);
}

.business-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.business-card:hover img {
  transform: scale(1.05);
}

.business-card > div {
  position: relative;
  z-index: 2;
  padding: 20px;
  width: 100%;
  color: #ffffff;
}

.business-card small {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  color: #86efac;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.business-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   News Cards & PR Feed
   ========================================================================== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}

.news-card {
  background: #ffffff;
  padding: 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.news-card[hidden] {
  display: none !important;
}

.news-card:hover,
.news-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.news-card time {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
}

.news-card h3 {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
}

/* ==========================================================================
   CSR & Sponsorship Split Banner
   ========================================================================== */
.activity-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
}

.activity {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 48px);
  color: #ffffff;
  overflow: hidden;
  text-align: center;
  transition: filter var(--transition-fast);
}

.activity:first-child {
  background:
    linear-gradient(135deg, rgba(10, 77, 46, 0.92), rgba(7, 58, 34, 0.96)),
    url("assets/images/love_img1.jpg") center/cover;
}

.activity:last-child {
  background:
    linear-gradient(135deg, rgba(180, 83, 9, 0.92), rgba(146, 64, 14, 0.96)),
    url("assets/images/support_img1.jpg") center/cover;
}

.activity:hover {
  filter: brightness(1.03);
}

.activity > div {
  position: relative;
  z-index: 2;
  max-width: 440px;
}

.activity .eyebrow {
  color: #ffffff;
  opacity: 0.9;
}

.activity h3 {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 900;
  color: #ffffff;
  margin: 10px 0;
}

.activity p {
  font-size: 15.5px;
  opacity: 0.92;
  line-height: 1.65;
}

/* ==========================================================================
   Subpages Hero & Sticky Nav
   ========================================================================== */
.sub-hero {
  position: relative;
  padding: calc(var(--header-height) + clamp(32px, 4.5vw, 56px)) 0 clamp(32px, 4.5vw, 56px);
  background: #04160e;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}

.sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 22, 14, 0.65) 0%, rgba(4, 22, 14, 0.9) 100%),
    url("assets/images/hero_cover.jpg") center/cover;
  opacity: 0.5;
}

.sub-hero > div {
  position: relative;
  z-index: 2;
}

.sub-hero .kicker {
  font-family: var(--font-sans);
  justify-content: center;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  color: #86efac;
  text-transform: uppercase;
}

.sub-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
}

.sub-nav {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--header-height);
  z-index: 50;
  box-shadow: var(--shadow-xs);
}

.sub-nav-inner {
  width: min(var(--max), calc(100% - var(--container-padding) * 2));
  margin: auto;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.sub-nav-inner::-webkit-scrollbar {
  display: none;
}

.sub-nav a {
  padding: 16px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

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

.sub-nav a.active,
.sub-nav a[aria-current="page"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 800;
}

.content-title {
  text-align: center;
  margin-bottom: clamp(32px, 4.5vw, 52px);
}

.content-title h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  color: var(--ink);
  margin-top: 6px;
}

/* ==========================================================================
   Product Catalog, Filter Pills & Search
   ========================================================================== */
.product-catalog-header {
  margin-bottom: 32px;
}

.product-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--text-muted);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.filter-pill .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: background-color var(--transition-fast);
}

.filter-pill .pill-count {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.05);
  color: inherit;
  font-weight: 700;
}

.filter-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #ffffff;
}

.filter-pill:hover .pill-dot {
  background: var(--primary-light);
}

.filter-pill.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border-color: var(--primary-hover);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(10, 92, 54, 0.28);
}

.filter-pill.active .pill-dot {
  background: #86efac;
}

.filter-pill.active .pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.product-search-wrap {
  position: relative;
  min-width: 260px;
  flex: 1 1 260px;
  max-width: 360px;
}

.product-search {
  position: relative;
  display: flex;
  align-items: center;
}

.product-search .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}

.product-search input {
  width: 100%;
  padding: 10px 16px 10px 38px;
  font-size: 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  background: #ffffff;
  outline: none;
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.product-search input::placeholder {
  color: var(--text-subtle);
  font-size: 13.5px;
}

.product-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

.product-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-muted);
}

.product-status-bar p strong {
  color: var(--primary);
  font-weight: 800;
}

.product-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-subtle);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--primary-border);
}

/* ==========================================================================
   Product Grid & Product Cards
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 24px;
}

.product-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-light);
  box-shadow: 0 14px 32px -4px rgba(10, 92, 54, 0.14), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.product-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.product-badges-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 7.5px;
  font-size: 11px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.brand-badge.brand-own {
  background: #e6f4ea;
  color: #0a5c36;
  border: 1px solid #b7e1cd;
}

.brand-badge.brand-oem {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.product-card-badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: var(--primary-subtle);
  color: var(--primary);
  border: 1px solid var(--primary-border);
  letter-spacing: -0.01em;
}

.product-card-badge.badge-accent {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.product-card-cat-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-subtle);
}

.product-card-img-wrap {
  width: 100%;
  aspect-ratio: 1.05;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: radial-gradient(circle at center, #ffffff 30%, #f4f6f5 100%);
  border-radius: var(--radius-md);
  padding: 14px;
  border: 1px solid #edf2ef;
  overflow: hidden;
}

.product-card img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--transition-smooth);
}

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

.product-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  min-height: 44px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}

.product-card-spec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--text-main);
}

.product-card-origin {
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--text-subtle);
}

.product-card-actions {
  display: grid;
  gap: 9px;
  margin-top: auto;
}

.product-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.product-card:hover .product-card-action svg {
  transform: translateX(4px);
  transition: transform var(--transition-fast);
}

.product-card-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.product-card-buy:hover {
  background: #143528;
}

.product-card-buy.is-pending {
  border: 1px solid var(--primary-border);
  background: var(--primary-subtle);
  color: var(--primary);
}

.product-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 20px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line);
}

.product-empty-state .empty-icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.product-empty-state h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.product-empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* ==========================================================================
   Product Detail Modal
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  max-width: min(840px, calc(100vw - 48px));
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  position: relative;
  padding: clamp(24px, 4vw, 36px);
  transform: scale(0.96) translateY(10px);
  transition: transform var(--transition-normal);
}

.modal-overlay.open .modal-card {
  transform: scale(1) translateY(0);
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 10;
}

.modal-close:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 50%;
}

.modal-close:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
  transform: rotate(90deg);
}

.modal-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
  gap: 28px;
  align-items: start;
}

.modal-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.modal-img-wrap {
  background: radial-gradient(circle at center, #ffffff 40%, #f4f6f5 100%);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  aspect-ratio: 1;
}

.modal-img-wrap img {
  max-height: 220px;
  max-width: 100%;
  object-fit: contain;
}

.modal-img-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.modal-img-footer .haccp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-weight: 700;
}

.modal-img-footer .temp-tag {
  color: var(--text-muted);
  font-weight: 600;
}

.modal-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.modal-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.modal-details .tag.cat-tag {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--primary-subtle);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}

.modal-badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--text-muted);
  border: 1px solid var(--line);
}

.modal-badge.badge-accent {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.modal-details h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin-bottom: 10px;
}

.modal-desc {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 18px;
}

.modal-specs-card {
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  margin-bottom: 22px;
  background: var(--bg-alt);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.modal-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.modal-spec-row:not(:last-child) {
  border-bottom: 1px dashed var(--line);
}

.spec-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.spec-label svg {
  color: var(--primary);
}

.spec-value {
  color: var(--ink);
  font-weight: 700;
  font-size: 13.5px;
  text-align: right;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.modal-primary-btn {
  flex: 1 1 calc(50% - 8px);
  min-width: 140px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  font-size: 14.5px;
  font-weight: 700;
}

.modal-secondary-btn {
  flex: 1 1 calc(50% - 8px);
  min-width: 140px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
}

/* ==========================================================================
   Manufacturing Process Flow & Facility Gallery
   ========================================================================== */
.process-flow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 125px), 1fr));
  gap: 12px;
  margin: 32px 0 64px;
}

.process-step {
  background: #ffffff;
  padding: 14px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.process-step:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.process-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-step-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}

.gallery figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.gallery figure:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery figcaption {
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}

/* 스마트팩토리 스토리: 사진 비율·장수에 맞춘 균형 배치 */
.gallery--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery--mixed {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery--mixed figure:first-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 560px);
}

.gallery--single {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

/* 후원모델 신뢰 콘텐츠 */
.brand-trust-section {
  padding-top: clamp(18px, 3vw, 36px);
}

.brand-trust-band {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  box-shadow: var(--shadow-md);
}

.brand-trust-media {
  min-height: 360px;
  overflow: hidden;
}

.brand-trust-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}

.brand-trust-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(30px, 5vw, 58px);
}

.brand-trust-copy h3 {
  margin: 8px 0 14px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.3;
}

.brand-trust-copy p {
  margin-bottom: 24px;
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.75;
}

.product-trust-strip {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 4vw, 42px);
  margin: 0 0 clamp(30px, 5vw, 48px);
  padding: 18px clamp(22px, 4vw, 40px) 18px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--bg-alt), #fff);
  box-shadow: var(--shadow-sm);
}

.product-trust-strip img {
  width: 190px;
  height: 190px;
  border-radius: calc(var(--radius-md) - 4px);
  object-fit: cover;
  object-position: center 22%;
}

.product-trust-strip p {
  margin: 4px 0 10px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.5;
}

.product-trust-strip a {
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
}

.support-model-primary {
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
}

.support-model-primary > img {
  width: min(100%, 480px);
  aspect-ratio: 2 / 3;
  justify-self: center;
  object-fit: cover;
  object-position: center top;
}

.support-model-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 26px);
  margin-bottom: clamp(50px, 7vw, 78px);
}

.support-model-gallery figure {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  box-shadow: var(--shadow-sm);
}

.support-model-gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 28%;
}

.support-model-gallery figcaption {
  padding: 14px 18px;
  color: var(--text-main);
  font-size: 13.5px;
  font-weight: 700;
}



/* ==========================================================================
   Smartfactory — Scoped Overview Grid & Catalog CTA (AGY-5 owned)
   These classes are ONLY used inside the smartfactory page section.
   They do not modify global .feature-row or any other page layout.
   ========================================================================== */

/* 3-column balanced grid for sf-overview cards (smartfactory overview) */
.smartfactory-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
  margin-bottom: clamp(36px, 5vw, 56px);
}

.sf-overview-card {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(20px, 2.5vw, 32px);
}

.sf-overview-card h3 {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ink);
  line-height: 1.35;
}

.sf-overview-card p {
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

/* Compact catalog CTA strip */
.sf-catalog-cta {
  border: 1px solid var(--line);
  border-left: 4px solid #2D6A4F;
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  margin-top: clamp(48px, 6vw, 72px);
  margin-bottom: 0;
}

.sf-catalog-cta-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 2.5vw, 32px);
  padding: clamp(20px, 2.5vw, 28px) clamp(20px, 2.5vw, 32px);
}

.sf-catalog-cta-label {
  min-width: 0;
}

.sf-catalog-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #2D6A4F;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.sf-catalog-title {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}

.sf-catalog-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sf-catalog-link {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.15s;
}

.sf-catalog-link:hover,
.sf-catalog-link:focus-visible {
  color: #2D6A4F;
}

.sf-catalog-code {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2D6A4F;
  background: rgba(45, 106, 79, 0.1);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}

.sf-catalog-name {
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
}

.sf-catalog-cta-btn {
  display: inline-block;
  padding: 9px 18px;
  background: #1B4332;
  color: #fff;
  border-radius: var(--radius-sm, 6px);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.sf-catalog-cta-btn:hover,
.sf-catalog-cta-btn:focus-visible {
  background: #2D6A4F;
}

/* Tablet: 2-col overview, stacked CTA */
@media (max-width: 960px) {
  .smartfactory-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sf-catalog-cta-inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: clamp(20px, 3vw, 28px) clamp(20px, 2.5vw, 28px);
  }

  .sf-catalog-title {
    white-space: normal;
  }

  .sf-catalog-cta-btn {
    justify-self: start;
  }
}

/* Mobile: 1-col */
@media (max-width: 640px) {
  .smartfactory-overview-grid {
    grid-template-columns: 1fr;
  }

  .sf-catalog-list {
    flex-direction: column;
    gap: 10px;
  }

  .sf-catalog-cta-btn {
    justify-self: stretch;
    text-align: center;
  }
}

/* ==========================================================================
   Company Values, Timeline, & Clients
   ========================================================================== */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}

.value-card {
  background: var(--bg-alt);
  padding: clamp(24px, 3.2vw, 32px);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-normal), border-color var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.value-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
}

.value-card span {
  display: inline-block;
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin-bottom: 12px;
}

.value-card h3 {
  font-family: var(--font-serif);
  font-size: 19.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--tracking-subheading);
  margin-bottom: 8px;
  line-height: 1.35;
}

.value-card p {
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-size: 14.5px;
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
}

.feature-row {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.feature-image {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.feature-copy h3 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--tracking-heading);
  margin-bottom: 16px;
  line-height: 1.42;
}

.feature-copy p {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  margin-bottom: 14px;
}

.timeline {
  max-width: 800px;
  margin: auto;
  position: relative;
  padding-left: 32px;
  border-left: 2px solid var(--line);
}

.timeline-row {
  position: relative;
  margin-bottom: 34px;
  padding-left: 16px;
}

.timeline-row::before {
  content: "";
  position: absolute;
  left: -39px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px var(--primary);
}

.timeline-row strong {
  display: block;
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1;
  font-size: 19px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.timeline-row p {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-main);
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: clamp(14px, 2vw, 20px);
  align-items: center;
}

.client-grid img {
  background: #ffffff;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast), filter var(--transition-fast);
  filter: grayscale(0.5);
}

.client-grid img:hover {
  transform: scale(1.04);
  filter: grayscale(0);
}

/* ==========================================================================
   B2B Partner Logo Wall (Monotone Corporate References)
   ========================================================================== */
.b2b-partner-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.b2b-partner-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 110px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.b2b-partner-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.b2b-partner-logo {
  max-height: 36px;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.85);
  transition: filter var(--transition-fast);
  margin-bottom: 8px;
}

.b2b-partner-item:hover .b2b-partner-logo {
  filter: grayscale(0%) opacity(1);
}

.b2b-partner-badge {
  font-size: 14.5px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.02em;
  background: #f1f5f9;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.b2b-partner-item:hover .b2b-partner-badge {
  background: var(--primary-surface);
  color: var(--primary);
  border-color: #86efac;
}

.b2b-partner-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.b2b-partner-type {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ==========================================================================
   B2B Consultation Wizard & Contact Form
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.contact-copy {
  background: var(--primary);
  color: #ffffff;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.contact-copy .eyebrow {
  color: #86efac;
}

.contact-copy h3 {
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: 16px;
}

.contact-copy p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.contact-copy dl {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 20px;
}

.contact-copy dt {
  font-size: 12px;
  font-weight: 700;
  color: #86efac;
  text-transform: uppercase;
}

.contact-copy dd {
  font-size: 18px;
  font-weight: 800;
}

.contact-form {
  background: #ffffff;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.contact-form label em {
  color: #ef4444;
  font-style: normal;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #ffffff;
  font-size: 14.5px;
  color: var(--text-main);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

/* 문의 접수 실패 폴백 (메일/전화 안내, 입력 보존) */
.contact-fallback {
  margin-top: 4px;
  padding: 20px;
  border: 1px solid var(--accent-border);
  border-left: 4px solid var(--accent-gold);
  border-radius: var(--radius-md);
  background: var(--accent-surface);
}
.contact-fallback-title {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
}
.contact-fallback-desc {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-main);
}
.contact-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-fallback-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
}
.contact-fallback-mail {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.contact-fallback-mail a {
  color: var(--primary);
  font-weight: 700;
}

.contact-fallback-modal .contact-fallback {
  width: min(560px, 100%);
  margin: 0;
  padding: 32px;
}

.contact-fallback-modal .contact-fallback-title {
  padding-right: 44px;
  font-size: 20px;
}

.evidence-review-banner {
  padding-bottom: 0;
}

.evidence-review-notice {
  padding: 24px;
  border: 1px solid #f0d49b;
  border-radius: var(--radius-md);
  background: #fffaf0;
  color: var(--text-main);
  text-align: center;
}

.evidence-review-notice strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 18px;
}

.evidence-review-notice p {
  max-width: 680px;
  margin: 0 auto 16px;
  color: var(--text-muted);
  line-height: 1.7;
}
@media (max-width: 640px) {
  .contact-fallback-actions .btn {
    flex: 1 1 100%;
  }
}

.privacy-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0;
  padding: 12px 14px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.privacy-consent input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--primary);
  cursor: pointer;
}

.privacy-consent label {
  cursor: pointer;
}

.privacy-consent p {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
}

.contact-submit {
  min-height: 50px;
  background: var(--primary);
  color: #ffffff;
  font-size: 15.5px;
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-submit:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.contact-submit:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.contact-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.botcheck {
  display: none !important;
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 3000;
  max-width: min(400px, calc(100vw - 32px));
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  color: #ffffff;
  background: #111827;
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  pointer-events: none;
}

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

.toast.success {
  background: var(--primary);
}

.toast.error {
  background: #dc2626;
}

/* ==========================================================================
   Global Footer
   ========================================================================== */
.site-footer {
  background: #111827;
  color: #9ca3af;
  padding: clamp(48px, 6vw, 68px) 0 36px;
  margin-top: auto;
}

.footer-inner {
  width: min(var(--max), calc(100% - var(--container-padding) * 2));
  margin: auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 44px);
}

.footer-inner img {
  width: 84px;
  height: auto;
  filter: grayscale(1) brightness(1.6);
  flex-shrink: 0;
}

.footer-inner div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.75;
}

.footer-inner strong {
  color: #f3f4f6;
  font-weight: 700;
}

.footer-inner a {
  color: #e5e7eb;
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.footer-inner .copyright {
  font-size: 12.5px;
  color: #6b7280;
  margin-top: 10px;
}

/* ==========================================================================
   No-JS Fallback Shell Support
   ========================================================================== */
.nojs-shell {
  padding: 24px;
  max-width: var(--max);
  margin: auto;
}

.nojs-shell header,
.nojs-shell nav {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.nojs-directory {
  columns: 2;
  margin: 20px 0;
  padding-left: 20px;
}

/* ==========================================================================
   Responsive Breakpoints (Fluid 320px ~ 1920px+)
   ========================================================================== */

/* Ultra-Wide 4K Screens (1440px ~ 1920px+) */
@media (min-width: 1441px) {
  :root {
    --max: 1320px;
  }
}

/* Tablet & Mobile Navigation Breakpoint (<= 940px) */
@media (max-width: 940px) {
  .site-header {
    height: var(--header-height-mobile);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 10000;
  }

  .site-header.nav-open {
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 10000;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 24px;
    color: var(--ink);
    border-radius: var(--radius-sm);
    cursor: pointer;
    z-index: 10003;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .language-switcher {
    margin-left: auto;
    margin-right: 4px;
  }

  .language-switcher select {
    max-width: 88px;
    min-height: 36px;
    padding-left: 8px;
    font-size: 10.5px;
  }

  .menu-toggle:hover,
  .menu-toggle:active {
    background: var(--bg-subtle);
    color: var(--primary);
  }

  body.nav-open .menu-toggle .icon-open {
    display: none;
  }

  body.nav-open .menu-toggle .icon-close {
    display: inline-block;
    color: var(--primary);
  }

  .nav {
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--header-height-mobile));
    height: calc(100dvh - var(--header-height-mobile));
    background: #ffffff;
    flex-direction: column;
    padding: 20px 24px 48px;
    gap: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
    z-index: 10002;
    visibility: hidden;
    pointer-events: none;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
  }

  .crew-nav-link {
    width: 100%;
    padding: 12px 16px;
    font-size: 17px;
  }

  .nav.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  body.nav-open {
    overflow: hidden;
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 9000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-item {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-item > a {
    width: 100%;
    padding: 12px 0;
    font-size: 18px;
  }

  .nav-item > a[aria-current="page"]::after {
    display: none;
  }

  /* 모바일 드로어: 드롭다운 서브메뉴를 항상 펼쳐진 단일 목록(아코디언형)으로 노출 */
  .dropdown {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 2px 0 10px;
    padding: 6px 6px 6px 10px;
    gap: 2px;
    transform: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--bg-subtle);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .dropdown a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 14px;
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .dropdown a:hover,
  .dropdown a:active {
    transform: none;
  }

  .nav-item:hover .dropdown,
  .nav-item:focus-within .dropdown {
    transform: none;
  }

  .header-cta {
    width: 100%;
    margin: 14px 0 0;
    padding: 12px;
  }

  .video-grid,
  .feature-row,
  .contact-layout,
  .activity-split {
    grid-template-columns: 1fr;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 20px;
  }
}

/* Tablet Portrait & Large Mobile (<= 768px) */
@media (max-width: 768px) {
  .brand-trust-band {
    grid-template-columns: 1fr;
  }

  .brand-trust-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .brand-trust-copy {
    padding: 28px 24px 32px;
  }

  .support-model-primary {
    grid-template-columns: 1fr;
  }

  .support-model-primary > img {
    width: min(100%, 440px);
  }

  .gallery--mixed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery--mixed figure:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 340px);
  }

  .sub-nav {
    top: var(--header-height-mobile);
  }

  .sub-nav a {
    padding: 14px 16px;
    font-size: 13.5px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .product-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px 16px;
  }

  .product-search-wrap,
  .product-search {
    max-width: 100%;
    width: 100%;
  }

  .modal-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .modal-img-wrap {
    aspect-ratio: auto;
    min-height: 200px;
    max-height: 280px;
  }

  .modal-img-wrap img {
    max-height: 220px;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-primary-btn,
  .modal-secondary-btn {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Compact Mobile Screens (<= 480px) */
@media (max-width: 480px) {
  .product-trust-strip {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 16px 12px 12px;
  }

  .product-trust-strip img {
    width: 104px;
    height: 124px;
  }

  .product-trust-strip p {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
  }

  .support-model-gallery {
    grid-template-columns: 1fr;
  }

  .support-model-gallery img {
    aspect-ratio: 4 / 3;
  }


  .gallery--four,
  .gallery--mixed,
  .gallery--single {
    grid-template-columns: 1fr;
  }

  .gallery--mixed figure:first-child,
  .gallery--mixed figure:last-child {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }

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

  .business-grid,
  .news-grid,
  .product-grid,
  .gallery {
    grid-template-columns: 1fr;
  }

  .client-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form {
    padding: 20px 16px;
  }

  .modal-card {
    padding: 20px 16px;
  }

  .nojs-directory {
    columns: 1;
  }
}

/* Ultra-Compact Mobile Screens (<= 360px) */
@media (max-width: 360px) {
  .brand {
    gap: 8px;
  }
  .brand b {
    font-size: 15px;
  }
  .brand span {
    font-size: 11px;
    line-height: 1.25;
  }
  .brand img {
    width: 40px;
  }
  .language-switcher select {
    max-width: 76px;
    padding-left: 6px;
  }
  .btn {
    font-size: 14px;
    padding: 0 20px;
  }
  .modal-overlay {
    padding: 12px;
  }
  .modal-card {
    max-width: calc(100vw - 24px);
    padding: 20px 14px;
  }
}

/* Reduced Motion Mode */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Remote feature styles merged from origin/main */
.product-catalog .product-card {
  padding: 0;
}
.product-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.product-open:hover {
  background: var(--paper);
}
.product-open img {
  object-fit: contain;
  background: #fff;
}
.product-name {
  margin: 18px 0 12px;
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.product-detail-link {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
}
html.product-modal-open,
.product-modal-open body {
  overflow: hidden;
}
.product-modal {
  width: min(900px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  border: 0;
  border-radius: 20px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 24px 80px #0004;
  overscroll-behavior: contain;
}
.product-modal::backdrop {
  background: #10231cd1;
}
.product-modal-panel {
  position: relative;
  padding: 64px 32px 32px;
}
.product-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: #fff;
  font-size: 30px;
  cursor: pointer;
}
.product-modal-close:hover {
  background: var(--paper);
}
.product-modal-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 32px;
}
.product-modal-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.product-modal-content {
  min-width: 0;
  overflow-wrap: anywhere;
}
.product-modal-content h2 {
  margin: 8px 0 12px;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.35;
}
.product-modal-code,
#product-modal-note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.product-specs {
  margin: 24px 0 16px;
  border-top: 2px solid var(--green);
}
.product-specs > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
}
.product-specs dt {
  font-weight: 700;
}
.product-specs dd {
  margin: 0;
}
.product-specs [data-spec="haccp"] {
  color: var(--green);
  font-weight: 700;
}
.product-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.product-modal-contact {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 8px;
  color: #fff;
  background: var(--green);
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
.product-modal-contact:hover {
  background: #143528;
}
.product-modal-detail-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 8px;
  color: #1a1a1a;
  background: #ffd597;
  font-weight: 800;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.product-modal-detail-btn:hover {
  background: #ffc266;
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .product-modal-panel {
    padding: 64px 20px 24px;
  }
  .product-modal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .product-modal-image {
    height: 200px;
  }
  .product-modal-actions {
    flex-direction: column;
    width: 100%;
  }
  .product-modal-contact,
  .product-modal-detail-btn {
    width: 100%;
  }
}
/* Media Kit & Official Downloads */
.downloads {
  margin: 0 0 44px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}
.media-kit-header {
  margin-bottom: 26px;
}
.media-kit-header h3 {
  margin: 6px 0 10px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.media-kit-desc {
  margin: 0;
  color: #4a5550;
  font-size: 14px;
  line-height: 1.65;
  max-width: 800px;
}
.media-kit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.media-kit-card {
  display: flex;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.media-kit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(27, 94, 32, 0.12);
  border-color: var(--green);
}
.media-kit-cover-wrap {
  flex-shrink: 0;
  width: 140px;
  aspect-ratio: 1 / 1.414;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #f0f3f1;
}
.media-kit-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-kit-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}
.media-kit-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.media-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #c8e6c9;
}
.media-spec {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.media-kit-content h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.3px;
}
.media-briefing {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #555e58;
}
.media-action {
  margin-top: auto;
}
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}
.btn-download:hover {
  background: var(--green);
}
.dl-icon {
  flex-shrink: 0;
}
.pr-contact-banner {
  margin-top: 24px;
  padding: 22px 28px;
  background: linear-gradient(135deg, #16241b 0%, #1e3b28 100%);
  border-radius: 14px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.pr-contact-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #81c784;
  margin-bottom: 4px;
}
.pr-contact-text h5 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.pr-contact-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 580px;
}
.pr-contact-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 24px;
  flex-shrink: 0;
}
.pr-contact-info a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}
.pr-contact-info a:hover {
  color: #81c784;
}
.contact-lbl {
  color: rgba(255, 255, 255, 0.65);
  font-size: 11.5px;
  font-weight: 700;
  display: inline-block;
  width: 56px;
}

/* News Section, Filters & Badges */
.news-section-head {
  margin-bottom: 14px;
}
.news-section-head h3 {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.news-filter-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 14px;
  flex-wrap: wrap;
}
.news-filter-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #d5ded8;
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.news-filter-tab:focus-visible,
.news-card-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset: 3px;
}
.news-filter-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.news-filter-tab.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.news-filter-tab .tab-count {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
}
.news-filter-tab.is-active .tab-count {
  color: #81c784;
  opacity: 1;
}
.news-result-count {
  margin-bottom: 22px;
  font-size: 13.5px;
  color: var(--muted);
}
.news-result-count strong {
  color: var(--ink);
  font-weight: 800;
}
.news-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.news-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.badge-press {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #c8e6c9;
}
.badge-media {
  background: #e3f2fd;
  color: #0d47a1;
  border: 1px solid #bbdefb;
}
.badge-csr {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffe0b2;
}
.news-press {
  font-size: 12px;
  font-weight: 700;
  color: #555e58;
}
.news-card-header time {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.news-title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -0.3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 48px;
}
.news-summary {
  font-size: 13px;
  line-height: 1.65;
  color: #555e58;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--primary);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.news-card-action span {
  transition: transform 0.2s ease;
}
.news-card:hover .news-card-action span,
.news-card:focus-within .news-card-action span {
  transform: translateX(3px);
}
.news-modal-content {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 4px 0 0;
  box-sizing: border-box;
  overflow: visible;
}
.modal-body.news-modal-body,
#modal-content.news-modal-body,
#modal-content:has(> .news-modal-content) {
  display: block;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: 0;
}
.news-modal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-right: 52px;
  padding-right: 0;
  margin-bottom: 16px;
  min-height: 36px;
  line-height: 1.5;
}
.news-modal-meta time {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}
.news-modal-content h2 {
  margin: 0 0 16px 0;
  color: var(--ink);
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.025em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.news-modal-content > p {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.news-modal-empty {
  color: var(--muted) !important;
}
.news-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line, #e2e8f0);
}
.btn-news-source,
.btn-news-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent, #b45309) 0%, var(--accent-gold, #d97706) 100%);
  color: #ffffff !important;
  font-family: var(--font-ui, var(--font-sans, "Pretendard Variable", Pretendard, sans-serif));
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.22);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s ease;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-news-pdf {
  background: var(--primary, #0a4d2e);
  box-shadow: 0 4px 14px rgba(10, 77, 46, 0.18);
}
.btn-news-pdf:hover {
  background: var(--primary-hover, #073a22);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10, 77, 46, 0.26);
}
.btn-news-pdf:focus-visible {
  outline: 2px solid var(--primary, #0a4d2e);
  outline-offset: 3px;
}
.btn-news-source:hover {
  background: linear-gradient(135deg, #9a4408 0%, var(--accent, #b45309) 100%);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(180, 83, 9, 0.34);
}
.btn-news-source:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.2);
}
.btn-news-source:focus-visible {
  outline: 2px solid var(--accent-gold, #d97706);
  outline-offset: 3px;
}
.btn-news-source .ext-icon {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease;
}
.btn-news-source:hover .ext-icon {
  transform: translate(2px, -2px);
}
@media (max-width: 480px) {
  .news-card {
    padding: 22px;
  }
  .news-modal-content {
    padding: 0;
  }
  .news-modal-meta {
    margin-right: 52px;
    padding-right: 0;
    gap: 6px;
    margin-bottom: 12px;
  }
  .news-modal-meta time {
    width: 100%;
    margin-left: 0;
    margin-top: 2px;
  }
  .news-modal-content h2 {
    margin: 0 0 14px 0;
    font-size: 19.5px;
    line-height: 1.45;
    letter-spacing: -0.02em;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .news-modal-content > p {
    font-size: 14.5px;
    line-height: 1.75;
    letter-spacing: -0.01em;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .news-modal-actions {
    margin-top: 24px;
    padding-top: 16px;
    justify-content: stretch;
    flex-direction: column;
  }
  .btn-news-source,
  .btn-news-pdf {
    width: 100%;
  }
}
.download-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.download-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: 0.2s;
}
.download-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}
.download-icon {
  font-size: 28px;
}
.download-card h4 {
  margin: 0 0 4px;
  font-size: 16px;
}
.download-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.admin-news-form {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 42px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}
.admin-news-form label > span {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 800;
}
.admin-news-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #cfd8d2;
  border-radius: 9px;
  background: #fff;
  padding: 0 16px;
  color: var(--ink);
  font: inherit;
}
.admin-news-form .btn {
  min-height: 48px;
  border: 0;
  cursor: pointer;
}
.admin-news-item {
  position: relative;
  padding-right: 70px;
}
.admin-news-delete {
  position: absolute;
  top: 22px;
  right: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  background: #fff;
  color: #b3261e;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.admin-news-delete:hover {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
}

/* Mobile PR / Media Kit stacking (merge-recovered wrapper) */
@media (max-width: 640px) {
  .news-pr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .download-grid,
  .admin-news-form {
    grid-template-columns: 1fr;
  }
  .media-kit-section {
    padding: 24px 18px;
  }
  .media-kit-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .media-kit-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .media-kit-cover-wrap {
    width: 160px;
  }
  .media-kit-meta {
    justify-content: center;
  }
  .media-action {
    width: 100%;
  }
  .btn-download {
    width: 100%;
    justify-content: center;
  }
  .pr-contact-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 18px;
  }
  .pr-contact-info {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 0;
    padding-top: 14px;
    width: 100%;
  }
  .news-pr-grid {
    grid-template-columns: 1fr;
  }
}

/* ── DETAIL SHOWCASE & BANNER ─────────────────────────────── */
.detail-showcase-section {
  margin: -10px 0 48px;
}
.detail-showcase-card,
.home-showcase-banner {
  background: linear-gradient(135deg, #16382b 0%, #1c4d3a 60%, #28634c 100%);
  border-radius: 16px;
  padding: 36px 32px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 12px 36px rgba(16, 35, 28, 0.12);
}
.detail-showcase-text,
.home-showcase-text {
  flex: 1;
  min-width: 280px;
}
.detail-showcase-badge,
.home-showcase-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.14);
  color: #9fe2bf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.detail-showcase-card h3,
.home-showcase-banner h3 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  color: #fff;
}
.detail-showcase-card p,
.home-showcase-banner p {
  margin: 0;
  color: #d1ded7;
  font-size: 14px;
  line-height: 1.6;
}
.detail-showcase-btns,
.home-showcase-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.detail-showcase-btns .btn.primary,
.home-showcase-actions .btn.primary {
  background: #ffd597;
  color: #1a1a1a;
  font-weight: 800;
  border: none;
}
.detail-showcase-btns .btn.primary:hover,
.home-showcase-actions .btn.primary:hover {
  background: #ffc266;
}
.detail-showcase-btns .btn.outline,
.home-showcase-actions .btn.outline {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}
.detail-showcase-btns .btn.outline:hover,
.home-showcase-actions .btn.outline:hover {
  background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 680px) {
  .detail-showcase-card,
  .home-showcase-banner {
    padding: 24px 20px;
  }
  .detail-showcase-text,
  .home-showcase-text {
    min-width: 0;
  }
  .detail-showcase-btns,
  .home-showcase-actions {
    width: 100%;
  }
  .detail-showcase-btns .btn,
  .home-showcase-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   Refined Homepage Sections (Clean, Professional, Trust-Inspiring)
   ========================================================================== */
.showcase-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(18px, 2.4vw, 24px);
}
.showcase-product-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  text-decoration: none;
}
.showcase-product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.showcase-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-light);
}
.showcase-img-wrap img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform var(--transition-smooth);
}
.showcase-product-card:hover .showcase-img-wrap img {
  transform: scale(1.06);
}
.showcase-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.04em;
}
.showcase-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.showcase-category {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-subtle);
  margin-bottom: 6px;
}
.showcase-info h3 {
  font-family: var(--font-serif);
  font-size: 18.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--tracking-subheading);
  margin-bottom: 8px;
  line-height: 1.34;
}
.showcase-info p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
  flex: 1;
}
.showcase-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.activity-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(20px, 3vw, 28px);
}
.activity-box {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-end;
  min-height: 280px;
  text-decoration: none;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.activity-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.activity-box-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-smooth);
}
.activity-box:hover .activity-box-bg {
  transform: scale(1.04);
}
.activity-box-content {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 3.5vw, 36px);
  color: #ffffff;
  width: 100%;
}
.activity-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #a7f3d0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}
.activity-box-content h3 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: var(--tracking-heading);
  margin-bottom: 10px;
  line-height: 1.32;
}
.activity-box-content p {
  font-size: 14px;
  color: #e2e8f0;
  line-height: 1.6;
  margin-bottom: 14px;
}
.activity-arrow {
  font-size: 13.5px;
  font-weight: 700;
  color: #fef08a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   Online Commerce & Quick Commerce Channels Section
   ========================================================================== */
.commerce-channel-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 24px;
}

@media (max-width: 1200px) {
  .commerce-channel-wall {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .commerce-channel-wall {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.commerce-channel-card {
  background: #ffffff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius-sm, 10px);
  padding: 24px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  position: relative;
  min-height: 175px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color var(--transition-fast, 0.2s), box-shadow var(--transition-fast, 0.2s), transform var(--transition-fast, 0.2s);
}

.commerce-channel-card:hover {
  border-color: var(--primary, #0a5c36);
  box-shadow: 0 8px 24px rgba(10, 92, 54, 0.08);
  transform: translateY(-3px);
}

.commerce-channel-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.badge-coupang {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.badge-rocket {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.badge-fresh {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.badge-bmart {
  background: #f0fdfa;
  color: #0f766e;
  border: 1px solid #99f6e4;
}

.badge-sanghoe {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.badge-temu {
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #fed7aa;
}

.commerce-channel-logo {
  height: 38px;
  max-width: 140px;
  object-fit: contain;
  margin: 6px 0 10px;
  transition: transform var(--transition-fast, 0.2s);
}

.commerce-channel-card:hover .commerce-channel-logo {
  transform: scale(1.04);
}

.commerce-channel-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink, #1e293b);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.commerce-channel-desc {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
  margin: 0 0 10px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.commerce-channel-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary, #0a5c36);
  background: var(--primary-surface, #f0fdf4);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(10, 92, 54, 0.12);
  margin-top: auto;
}

@media (max-width: 640px) {
  .commerce-channel-card {
    padding: 20px 10px 14px;
    min-height: 155px;
  }
  .commerce-channel-logo {
    height: 32px;
    max-width: 110px;
  }
  .commerce-channel-title {
    font-size: 13.5px;
  }
  .commerce-channel-desc {
    font-size: 11px;
  }
  .commerce-channel-badge {
    font-size: 10px;
    padding: 2px 8px;
  }
}

/* ==========================================================================
   Product 자사/OEM Type Tabs (제품정보 페이지 상단 운영 구분)
   ========================================================================== */
.product-type-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 8px 0 28px;
}
.product-type-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 68px;
  padding: 16px 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.product-type-tab:hover {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-sm);
}
.product-type-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.product-type-tab.active {
  border-color: var(--primary);
  background: var(--primary-surface);
  box-shadow: var(--shadow-md);
}
.product-type-tab > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.product-type-tab > span b {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: var(--tracking-ui);
}
.product-type-tab > span small {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.product-type-tab > strong {
  flex: none;
  min-width: 40px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}
.product-type-tab.active > strong {
  background: var(--primary);
  color: var(--text-inverse);
}

/* ==========================================================================
   Admin — 제품·노출 관리자 (localStorage 경량 도구, 데스크톱 + 모바일)
   ========================================================================== */
.admin-shell {
  width: min(var(--max), calc(100% - var(--container-padding) * 2));
  margin: 0 auto;
}
.admin-hero {
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.admin-hero h1,
.admin-hero h2 {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: var(--tracking-heading);
}
.admin-hero p {
  margin: 0;
  max-width: 720px;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: var(--lh-body);
}
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  padding-bottom: 4px;
}
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-main);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.admin-tab:hover {
  border-color: var(--primary-border);
}
.admin-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.admin-tab.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--text-inverse);
}
.admin-panel {
  animation: adminFade 0.25s ease;
}
.admin-panel[hidden],
.admin-panel:not(.active) {
  display: none;
}
@keyframes adminFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.admin-panel-head {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
}
.admin-panel-desc {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* 콘텐츠/섹션 노출 토글 그리드 */
.admin-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}
.admin-field-grid > * {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.admin-field-grid > * > span,
.admin-field-label {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* 제품 사용/미사용 · 자사/OEM 목록 */
.admin-product-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-product-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.admin-product-row:hover {
  border-color: var(--line-strong);
}
.admin-product-row.is-disabled {
  opacity: 0.55;
}
.admin-product-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-product-cat {
  flex: none;
  font-size: 12px;
  color: var(--text-subtle);
}
.admin-product-controls {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* select (자사/OEM 분류 등) */
.admin-shell select,
.admin-select {
  min-height: 42px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.admin-shell select:focus-visible,
.admin-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

/* 스위치형 토글 (input[type=checkbox] 기반, 별도 마크업 불필요) */
.admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.admin-toggle input[type="checkbox"],
input[type="checkbox"].admin-toggle {
  flex: none;
  position: relative;
  width: 46px;
  height: 26px;
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--line-strong);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.2s ease;
}
.admin-toggle input[type="checkbox"]::before,
input[type="checkbox"].admin-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}
.admin-toggle input[type="checkbox"]:checked,
input[type="checkbox"].admin-toggle:checked {
  background: var(--primary);
}
.admin-toggle input[type="checkbox"]:checked::before,
input[type="checkbox"].admin-toggle:checked::before {
  transform: translateX(20px);
}
.admin-toggle input[type="checkbox"]:focus-visible,
input[type="checkbox"].admin-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.admin-toggle-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

/* Admin & Product Tabs 반응형 (태블릿/모바일) */
@media (max-width: 860px) {
  .product-type-tabs {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .product-type-tab {
    min-height: 60px;
    padding: 14px 16px;
  }
  .product-type-tab > span b {
    font-size: 15px;
  }
  .admin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar {
    display: none;
  }
  .admin-field-grid {
    grid-template-columns: 1fr;
  }
  .admin-product-row {
    flex-wrap: wrap;
    gap: 10px 12px;
  }
  .admin-product-name {
    flex: 1 1 100%;
    white-space: normal;
  }
  .admin-product-controls {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .admin-shell select,
  .admin-select {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   유튜브 & 인스타그램 바이럴 홍보관 (VIRAL & SNS MEDIA)
   ========================================================================== */
.viral-section {
  padding: 64px 0 40px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 48px;
}

.viral-lead-text {
  max-width: 820px;
  margin: -16px 0 32px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* SNS Official Channel Cards (Dual Banner) */
.viral-channel-banner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.channel-card {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.channel-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.channel-youtube:hover {
  border-color: #ef4444;
}

.channel-instagram:hover {
  border-color: #e1306c;
}

.channel-card-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.yt-icon-wrap {
  background: #fef2f2;
  color: #ef4444;
}

.insta-icon-wrap {
  background: linear-gradient(135deg, #fdf2f8 0%, #fff1f2 50%, #fef3c7 100%);
  color: #e1306c;
}

.channel-card-info {
  flex: 1;
  min-width: 0;
}

.channel-card-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-bottom: 4px;
}

.yt-badge {
  background: #fee2e2;
  color: #dc2626;
}

.insta-badge {
  background: #fce7f3;
  color: #db2777;
}

.channel-card-info strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: var(--tracking-ui);
}

.channel-card-info p {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-card-action {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--primary-surface);
  transition: background 0.15s ease, color 0.15s ease;
}

.channel-card:hover .channel-card-action {
  background: var(--primary);
  color: #ffffff;
}

/* Viral Category Tabs */
.viral-tabs-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.viral-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.viral-tab-btn strong {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-alt);
  color: var(--text-muted);
}

.viral-tab-btn:hover {
  border-color: var(--primary-border);
  color: var(--primary);
}

.viral-tab-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.viral-tab-btn.active strong {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Viral Grid (2 columns desktop) */
.viral-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

.viral-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.viral-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-border);
}

.viral-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-alt);
}

.viral-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.viral-card:hover .viral-card-thumb img {
  transform: scale(1.05);
}

.viral-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.viral-badge-yt {
  background: #e11d48;
  color: #ffffff;
}

.viral-badge-ig {
  background: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%);
  color: #ffffff;
}

.viral-card-play-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  font-size: 12px;
}

.viral-card-body {
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.viral-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12.5px;
}

.viral-author-info {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.viral-author-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-surface);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.viral-author-name {
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viral-author-stats {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.viral-card-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.viral-card-desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
}

.viral-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.viral-tag-chip {
  font-size: 11px;
  color: var(--primary);
  background: var(--primary-surface);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-weight: 600;
}

.viral-card-footer {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

/* Trending Hashtags Box */
.viral-hashtags-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

.viral-hashtags-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.viral-hashtags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.viral-hashtag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.viral-hashtag-chip:hover {
  background: var(--primary-surface);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.viral-hashtag-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Viral Event Card */
.viral-event-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #07492a 0%, #0a5c36 100%);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

.viral-event-badge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: #facc15;
  color: #1e293b;
  flex-shrink: 0;
}

.viral-event-body {
  flex: 1;
}

.viral-event-body h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
}

.viral-event-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.btn.viral-event-btn,
.btn.viral-event-btn:visited,
.btn.viral-event-btn:hover,
.btn.viral-event-btn:focus {
  flex-shrink: 0;
  background: #ffffff !important;
  color: #0a5c36 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn.viral-event-btn:hover {
  transform: translateY(-2px);
}

/* Responsive Media Queries for Viral Section */
@media (max-width: 1024px) {
  .viral-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .viral-channel-banner {
    grid-template-columns: 1fr;
  }
  .viral-event-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }
  .viral-event-btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 540px) {
  .viral-grid {
    grid-template-columns: 1fr;
  }
  .channel-card {
    padding: 16px;
  }
  .channel-card-info p {
    white-space: normal;
  }
}

/* ==========================================================================
   Accessibility & Print Safety for Reveal Animations
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Smart Factory Page Specific Styles (.page-smartfactory Scope)
   ========================================================================== */
.page-smartfactory .sub-hero.company h1 {
  font-family: var(--font-serif);
  letter-spacing: var(--tracking-hero);
}

.page-smartfactory .sf-intro {
  max-width: 820px;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: var(--lh-relaxed, 1.8);
  color: var(--text-muted);
  letter-spacing: var(--tracking-body);
  margin: 0 0 clamp(36px, 4.5vw, 48px);
}

.page-smartfactory .sf-section {
  margin-top: clamp(48px, 6vw, 72px);
}

.page-smartfactory .sf-section:first-of-type {
  margin-top: 0;
}

.page-smartfactory .section-head {
  margin-bottom: 12px;
}

.page-smartfactory .sf-lead {
  max-width: 860px;
  margin: 0 0 clamp(24px, 3vw, 32px);
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.7;
  letter-spacing: var(--tracking-body);
}

/* (3) Department Cards: 13px pill label, 3 columns desktop, 1 column <=940px without 2+1 orphan */
.page-smartfactory .sf-dept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
}

.page-smartfactory .sf-dept-card {
  background: var(--bg-alt);
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page-smartfactory .sf-dept-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.page-smartfactory .sf-dept-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--primary-subtle, #f0fdf4);
  color: var(--primary, #0a4d2e);
  border: 1px solid var(--primary-border, #bbf7d0);
  margin-bottom: 14px;
}

.page-smartfactory .sf-dept-card h3 {
  font-family: var(--font-serif);
  font-size: 19.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--tracking-subheading);
  margin: 0 0 10px;
  line-height: 1.35;
}

.page-smartfactory .sf-dept-card p {
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  margin: 0;
}

/* (2) Overview Cards: 3 columns desktop, 1 column <=940px */
.page-smartfactory .sf-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}

.page-smartfactory .sf-overview-card {
  background: #ffffff;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.page-smartfactory .sf-overview-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.page-smartfactory .sf-overview-card h3 {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.4vw, 20px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--tracking-subheading);
  margin: 0 0 14px;
  line-height: 1.4;
}

.page-smartfactory .sf-overview-card p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  margin: 0;
}

.page-smartfactory .sf-overview-card p a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* (3) Harmonized Brand Colors for Roadmap (scoped strictly to smartfactory) */
.page-smartfactory .agentic-roadmap .eyebrow {
  color: #a7f3d0;
}

.page-smartfactory .agentic-roadmap-progress-label span {
  color: #6ee7b7;
}

.page-smartfactory .agentic-progress-track > span {
  background: linear-gradient(90deg, #16a34a, #6ee7b7);
}

/* (4) FIELD Story Gallery: scoped to .page-smartfactory */
.page-smartfactory .gallery--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
  align-items: stretch;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.page-smartfactory .gallery--pair figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.page-smartfactory .gallery--pair figure:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.page-smartfactory .gallery--pair img {
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  height: auto;
  object-fit: contain !important;
  object-position: center bottom;
  background: #ffffff;
  padding: 12px 12px 0;
}

.page-smartfactory .gallery--pair figcaption {
  margin-top: auto;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}

/* (5) Achievements 5 Cards: 2 hero cards on row 1, 3 cards on row 2 (no 4+1 orphan), 1 column on mobile */
.page-smartfactory .sf-achieve-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
}

.page-smartfactory .sf-achieve-card {
  background: var(--bg-alt);
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page-smartfactory .sf-achieve-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.page-smartfactory .sf-achieve-card:nth-child(1),
.page-smartfactory .sf-achieve-card:nth-child(2) {
  grid-column: span 3;
}

.page-smartfactory .sf-achieve-card:nth-child(3),
.page-smartfactory .sf-achieve-card:nth-child(4),
.page-smartfactory .sf-achieve-card:nth-child(5) {
  grid-column: span 2;
}

.page-smartfactory .sf-achieve-card .sf-metric-val {
  display: inline-block;
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin-bottom: 12px;
}

.page-smartfactory .sf-achieve-card h3 {
  font-family: var(--font-serif);
  font-size: 19.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--tracking-subheading);
  margin: 0 0 8px;
  line-height: 1.35;
}

.page-smartfactory .sf-achieve-card p {
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  margin: 0;
}

/* Responsive Breakpoints for Smart Factory */
@media (max-width: 940px) {
  .page-smartfactory .sf-dept-grid,
  .page-smartfactory .sf-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-smartfactory .gallery--pair {
    grid-template-columns: 1fr;
  }
  .page-smartfactory .sf-achieve-grid {
    grid-template-columns: 1fr;
  }
  .page-smartfactory .sf-achieve-card:nth-child(1),
  .page-smartfactory .sf-achieve-card:nth-child(2),
  .page-smartfactory .sf-achieve-card:nth-child(3),
  .page-smartfactory .sf-achieve-card:nth-child(4),
  .page-smartfactory .sf-achieve-card:nth-child(5) {
    grid-column: span 1;
  }
}

/* (2) Page-smartfactory Print Styles: safe white background & dark text for roadmap, avoid page break inside cards */
@media print {
  .page-smartfactory .agentic-roadmap {
    background: #ffffff !important;
    color: var(--ink, #0f172a) !important;
    border: 1px solid var(--line, #e2e8f0) !important;
    box-shadow: none !important;
  }

  .page-smartfactory .agentic-roadmap .eyebrow {
    color: var(--primary, #0a4d2e) !important;
  }

  .page-smartfactory .agentic-roadmap h2 {
    color: var(--ink, #0f172a) !important;
  }

  .page-smartfactory .agentic-roadmap-copy p,
  .page-smartfactory .agentic-roadmap-progress > p {
    color: var(--text-muted, #475569) !important;
  }

  .page-smartfactory .agentic-roadmap-progress {
    background: var(--bg-alt, #f8fafc) !important;
    border: 1px solid var(--line, #e2e8f0) !important;
  }

  .page-smartfactory .agentic-roadmap-progress-label strong {
    color: var(--ink, #0f172a) !important;
  }

  .page-smartfactory .agentic-roadmap-progress-label span {
    color: var(--primary, #0a4d2e) !important;
  }

  .page-smartfactory .agentic-progress-track {
    background: var(--line, #e2e8f0) !important;
  }

  .page-smartfactory .agentic-progress-track > span {
    background: var(--primary, #0a4d2e) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .page-smartfactory .sf-dept-card,
  .page-smartfactory .sf-overview-card,
  .page-smartfactory .sf-story-block,
  .page-smartfactory figure,
  .page-smartfactory .sf-achieve-card,
  .page-smartfactory .timeline-row,
  .page-smartfactory .timeline {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   OEM / B2B Page Custom Layout & Floating CTA
   ========================================================================== */
body.page-business2 {
  padding-bottom: 76px;
}

.oem-hero-card {
  background: linear-gradient(135deg, #0a4d2e 0%, #14532d 100%);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  margin-bottom: 48px;
  box-shadow: 0 12px 32px rgba(10, 77, 46, 0.16);
  position: relative;
  overflow: hidden;
}

.oem-hero-card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -15%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

.oem-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.oem-hero-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: var(--tracking-heading);
  color: #ffffff;
  margin: 0 0 14px;
}

.oem-hero-desc {
  font-size: clamp(14px, 1.2vw, 16.5px);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  max-width: 740px;
  margin: 0 0 28px;
}

.oem-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.oem-hero-actions .btn.primary {
  background: #ffffff;
  color: #0a4d2e;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.oem-hero-actions .btn.primary:hover {
  background: #f1f5f9;
  transform: translateY(-2px);
}

.oem-hero-actions .btn.outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.oem-hero-actions .btn.outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}

.oem-section {
  margin-bottom: 56px;
}

/* Capability Cards */
.oem-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.oem-cap-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.oem-cap-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-border);
  box-shadow: var(--shadow-sm);
}

.oem-cap-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--primary-subtle);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
}

.oem-cap-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

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

/* Specifications Section */
.oem-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.oem-spec-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
}

.oem-spec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.oem-spec-head h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.oem-spec-tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--primary-subtle);
  color: var(--primary);
  white-space: nowrap;
}

.oem-spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 16px;
}

.oem-chip {
  background: #f8fafc;
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
}

.oem-spec-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 14px;
}

.oem-spec-items {
  font-size: 13px;
  color: var(--text-subtle);
  background: #fbfcfd;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-top: auto;
  border: 1px dashed var(--line);
  line-height: 1.6;
}

.oem-spec-items strong {
  color: var(--ink);
  font-weight: 600;
}

/* MOQ Guide Section */
.oem-moq-section {
  background: var(--surface-alt, #f8fafc);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(24px, 3.5vw, 36px);
  margin-top: 24px;
  margin-bottom: 24px;
}

.oem-moq-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.oem-moq-badge {
  background: var(--accent-light, #fef3c7);
  color: var(--accent, #b45309);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.oem-moq-header h3 {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.oem-moq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.oem-moq-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px;
}

.oem-moq-item strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
}

.oem-moq-item p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.oem-moq-note {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

/* Process Steps */
.oem-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.oem-process-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.oem-process-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.oem-step-num {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.oem-process-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

.oem-process-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Bottom CTA Banner */
.oem-cta-banner {
  background: #ffffff;
  border: 2px solid var(--primary-border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 44px);
  margin-top: 36px;
  margin-bottom: 48px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(10, 77, 46, 0.08);
}

.oem-cta-banner h3 {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 12px;
}

.oem-cta-banner p {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto 24px;
  line-height: 1.65;
}

.oem-cta-banner .oem-cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Floating Sticky CTA Bar */
.oem-floating-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  z-index: 100;
  padding: 12px 0;
}

.oem-floating-inner {
  width: min(var(--max), calc(100% - var(--container-padding) * 2));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.oem-floating-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.oem-floating-badge {
  background: var(--primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.oem-floating-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.oem-floating-text strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oem-floating-text small {
  font-size: 12.5px;
  color: var(--text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oem-floating-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.oem-floating-actions .btn {
  padding: 9px 18px;
  font-size: 13.5px;
}

@media (max-width: 768px) {
  .oem-floating-text small {
    display: none;
  }
  .oem-floating-inner {
    gap: 8px;
  }
  .oem-floating-actions .oem-bar-tel {
    display: none;
  }
  .oem-floating-actions .btn {
    padding: 8px 14px;
    font-size: 13px;
  }
}

@media print {
  .oem-floating-bar {
    display: none !important;
  }
}