/* ============================================================
   PNTECH – 친환경 펄프 포장재 전문기업 스타일시트
   컨셉: 자연·녹색 파스텔 고급 기업 사이트
   ============================================================ */

/* ─── CSS Variables ─── */
:root {
  /* 녹색 파스텔 팔레트 */
  --g-50:   #f1f8e9;   /* 가장 연한 배경 */
  --g-100:  #dcedc8;
  --g-200:  #c5e1a5;
  --g-300:  #aed581;
  --g-400:  #9ccc65;
  --g-500:  #8bc34a;   /* 메인 포인트 */
  --g-600:  #7cb342;
  --g-700:  #558b2f;
  --g-800:  #33691e;   /* 딥 그린 */
  --g-900:  #1b5e20;
  --teal:   #4caf50;
  --teal-l: #b2dfdb;

  /* 중립 */
  --white:  #ffffff;
  --cream:  #fafdf5;   /* 크림빛 흰색 */
  --gray-50:#f4f7f0;
  --gray-100:#e8ede0;
  --gray-200:#d1dac4;
  --gray-400:#8fa07a;
  --gray-600:#5a6b47;
  --gray-800:#2c3a1e;
  --text:    #243318;
  --text-s:  #4a5e36;

  /* 폰트 */
  --font: 'Noto Sans KR', sans-serif;
  --font-en: 'Montserrat', sans-serif;

  /* 간격 */
  --sp-xs: .5rem;  --sp-sm: 1rem;
  --sp-md: 1.5rem; --sp-lg: 2.5rem;
  --sp-xl: 4rem;   --sp-2xl: 6rem;

  /* 반경 */
  --r-sm: 8px;  --r-md: 16px;
  --r-lg: 24px; --r-xl: 40px;
  --r-full: 9999px;

  /* 그림자 */
  --sh-sm: 0 2px 8px  rgba(56,142,60,.09);
  --sh-md: 0 4px 20px rgba(56,142,60,.13);
  --sh-lg: 0 8px 40px rgba(56,142,60,.17);
  --sh-xl: 0 16px 64px rgba(56,142,60,.21);

  /* 트랜지션 */
  --tr: .3s ease;
  --tr-slow: .6s cubic-bezier(.23,1,.32,1);
}

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);color:var(--text);background:var(--cream);
     line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}

/* ─── Layout ─── */
.container{max-width:1200px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.section-pad{padding-block:var(--sp-2xl)}

/* ─── Typography ─── */
.section-label{
  font-family:var(--font-en);font-size:.75rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--g-800);
  display:inline-block;margin-bottom:.4rem;
  background:var(--g-50);border:1px solid var(--g-100);
  padding:.25rem .9rem;border-radius:var(--r-full);
}
.section-title{
  font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;
  line-height:1.22;color:var(--gray-800);margin-bottom:var(--sp-md);
}
.section-subtitle{font-size:1.02rem;color:var(--text-s);max-width:520px;margin-inline:auto}
.section-desc{font-size:.97rem;color:var(--text-s);line-height:1.85;margin-bottom:.85rem}
.section-header{text-align:center;margin-bottom:var(--sp-xl)}

.gradient-text{
  background:linear-gradient(120deg,var(--g-800),var(--g-500),#66bb6a);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 2rem;border-radius:var(--r-full);
  font-weight:700;font-size:.92rem;transition:all var(--tr);white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--g-800),var(--g-600));
  color:var(--white);box-shadow:0 4px 20px rgba(56,142,60,.35);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(56,142,60,.48)}
.btn-ghost{
  border:2px solid var(--g-800);color:var(--g-800);background:transparent;
}
.btn-ghost:hover{background:var(--g-50);transform:translateY(-3px)}
.btn-sm-primary{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:var(--sp-sm);padding:.6rem 1.4rem;border-radius:var(--r-full);
  font-weight:700;font-size:.82rem;
  background:linear-gradient(135deg,var(--g-800),var(--g-600));
  color:var(--white);box-shadow:0 3px 12px rgba(56,142,60,.3);
  transition:all var(--tr);
}
.btn-sm-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(56,142,60,.4)}
.btn.full-w{width:100%;justify-content:center}

/* ─── HEADER ─── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(250,253,245,.88);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--gray-100);
  transition:box-shadow var(--tr);
}
.site-header.scrolled{box-shadow:var(--sh-md)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}

/* Logo */
.logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.logo-leaf svg{width:38px;height:38px}
.logo-text{display:flex;flex-direction:column;line-height:1.2}
.logo-text em{font-family:var(--font-en);font-style:normal;font-weight:800;
  font-size:1.15rem;color:var(--g-800);letter-spacing:.08em}
.logo-text span{font-size:.68rem;font-weight:500;color:var(--gray-600)}

/* Nav */
.nav-list{display:flex;align-items:center;gap:.4rem}
.nav-link{
  font-size:.88rem;font-weight:500;color:var(--text-s);
  padding:.45rem .85rem;border-radius:var(--r-sm);transition:all var(--tr);
  position:relative;
}
.nav-link::after{
  content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:0;height:2px;background:var(--g-700);border-radius:var(--r-full);
  transition:width var(--tr);
}
.nav-link:hover{color:var(--g-800)}
.nav-link:hover::after{width:55%}
.nav-link.active{color:var(--g-800);font-weight:700}

/* CTA 버튼 스타일 네비 */
.btn-nav{
  background:linear-gradient(135deg,var(--g-800),var(--g-600));
  color:var(--white)!important;border-radius:var(--r-full);
  padding:.5rem 1.2rem!important;font-weight:700!important;
  box-shadow:0 3px 14px rgba(56,142,60,.3);
}
.btn-nav:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(56,142,60,.42)}
.btn-nav::after{display:none!important}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:var(--r-sm)}
.hamburger span{display:block;width:24px;height:2.5px;background:var(--gray-800);
  border-radius:var(--r-full);transition:all var(--tr)}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ─── HERO ─── */
.hero-section{
  position:relative;min-height:100svh;
  display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(150deg,var(--cream) 0%,var(--g-50) 55%,#e8f5e9 100%);
  padding-top:70px;
}

.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.blob{
  position:absolute;border-radius:var(--r-full);
  filter:blur(90px);opacity:.32;
}
.blob-1{width:560px;height:560px;background:var(--g-200);top:-120px;right:-80px}
.blob-2{width:400px;height:400px;background:var(--teal-l);bottom:0;left:-80px}
.blob-3{width:260px;height:260px;background:var(--g-100);top:38%;right:22%;opacity:.5}

.leaves-pattern{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle, rgba(139,195,74,.08) 1px, transparent 1px);
  background-size:32px 32px;
}

.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-2xl);align-items:center;
  padding-block:var(--sp-xl);
}

/* Hero text */
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(139,195,74,.14);border:1px solid rgba(139,195,74,.35);
  color:var(--g-800);font-size:.78rem;font-weight:700;
  padding:.4rem 1rem;border-radius:var(--r-full);margin-bottom:var(--sp-md);
}
.hero-title{
  font-size:clamp(2.4rem,5vw,3.8rem);font-weight:900;
  line-height:1.15;color:var(--gray-800);margin-bottom:var(--sp-md);
}
.hero-desc{font-size:1.04rem;color:var(--text-s);line-height:1.9;margin-bottom:var(--sp-lg)}

.hero-kpi{
  display:flex;align-items:center;gap:var(--sp-md);
  margin-bottom:var(--sp-lg);
  background:rgba(255,255,255,.7);border:1px solid var(--g-100);
  border-radius:var(--r-lg);padding:1rem 1.5rem;width:fit-content;
  backdrop-filter:blur(8px);
}
.kpi-item{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.kpi-item strong{font-family:var(--font-en);font-size:1.4rem;font-weight:800;color:var(--g-800)}
.kpi-item span{font-size:.72rem;font-weight:500;color:var(--gray-600);white-space:nowrap}
.kpi-divider{width:1px;height:36px;background:var(--g-200)}
.hero-actions{display:flex;gap:var(--sp-sm);flex-wrap:wrap}

/* Hero Visual */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
.pulp-showcase{position:relative;width:340px;height:360px}

.pulp-card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(197,225,165,.8);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-xl);
  backdrop-filter:blur(12px);
  transition:transform var(--tr-slow);
}
.pulp-card:hover{transform:translateY(-8px) scale(1.02)}

/* 메인 카드 */
.main-card{
  width:240px;padding:1.2rem;
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}
.pulp-img-wrap{
  height:160px;
  background:linear-gradient(145deg,var(--g-50),var(--g-100));
  border-radius:var(--r-md);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  position:relative;margin-bottom:.9rem;
}
.pulp-illustration{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative;
}
.pulp-box{display:flex;flex-direction:column;align-items:center}
.box-lid{
  width:100px;height:18px;
  background:linear-gradient(180deg,#d4e8b0,#aed581);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  box-shadow:0 -2px 6px rgba(0,0,0,.06);
}
.box-body{
  width:110px;height:70px;
  background:linear-gradient(180deg,#c5e1a5,#9ccc65);
  border-radius:0 0 var(--r-sm) var(--r-sm);
  position:relative;overflow:hidden;
}
.box-texture{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    45deg,transparent,transparent 4px,
    rgba(255,255,255,.12) 4px,rgba(255,255,255,.12) 5px
  );
}
.box-inner-shadow{
  position:absolute;top:0;left:0;right:0;height:16px;
  background:linear-gradient(180deg,rgba(0,0,0,.08),transparent);
}
.leaf-deco{position:absolute;font-size:1.4rem;animation:floatLeaf 3s ease-in-out infinite}
.leaf-1{top:-10px;right:-10px;animation-delay:0s}
.leaf-2{bottom:-5px;left:-10px;animation-delay:1.5s}
@keyframes floatLeaf{
  0%,100%{transform:translateY(0) rotate(-10deg)}
  50%{transform:translateY(-8px) rotate(5deg)}
}
.pulp-card-info{display:flex;flex-direction:column;gap:.25rem}
.card-tag{
  font-size:.68rem;font-weight:700;font-family:var(--font-en);
  letter-spacing:.1em;color:var(--g-700);
  background:var(--g-50);border:1px solid var(--g-200);
  padding:.2rem .6rem;border-radius:var(--r-full);width:fit-content;
}
.pulp-card-info p{font-size:.85rem;font-weight:600;color:var(--gray-800)}

/* 사이드 카드 */
.side-card{
  width:164px;padding:.75rem 1rem;
  display:flex;align-items:center;gap:.7rem;
  position:absolute;z-index:3;
}
.side-card.top{top:0;right:-30px}
.side-card.bottom{bottom:0;left:-30px}
.side-icon{
  width:36px;height:36px;flex-shrink:0;
  background:linear-gradient(135deg,var(--g-600),var(--g-800));
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:.9rem;
}
.side-card > div{display:flex;flex-direction:column;gap:.1rem}
.side-card strong{font-size:.78rem;font-weight:700;color:var(--gray-800)}
.side-card span{font-size:.67rem;color:var(--gray-600)}

/* 인증 배지 */
.cert-badge{
  position:absolute;z-index:4;
  background:linear-gradient(135deg,var(--g-800),var(--g-600));
  color:white;border-radius:var(--r-full);
  padding:.4rem .9rem;font-size:.72rem;font-weight:700;font-family:var(--font-en);
  display:flex;align-items:center;gap:.4rem;
  box-shadow:0 4px 16px rgba(56,142,60,.4);
  bottom:20px;right:-20px;z-index:5;
  animation:floatBadge 2.5s ease-in-out infinite;
}
@keyframes floatBadge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

/* Scroll hint */
.scroll-hint{
  position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);z-index:5;
}
.scroll-hint span{
  display:block;width:22px;height:36px;
  border:2px solid var(--g-300);border-radius:var(--r-full);
}
.scroll-hint span::after{
  content:'';display:block;width:4px;height:8px;
  background:var(--g-600);border-radius:var(--r-full);
  position:relative;top:5px;left:50%;transform:translateX(-50%);
  animation:scrollDown 1.8s ease infinite;
}
@keyframes scrollDown{
  0%{opacity:1;top:5px} 100%{opacity:0;top:18px}
}

/* ─── STATS ─── */
.stats-section{
  background:linear-gradient(135deg,var(--g-900),var(--g-800),#1b5e20);
  padding-block:var(--sp-xl);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.08);
  border-radius:var(--r-lg);overflow:hidden;
}
.stat-item{
  display:flex;align-items:center;gap:var(--sp-sm);
  padding:var(--sp-lg) var(--sp-md);
  background:rgba(255,255,255,.04);
  transition:background var(--tr);
}
.stat-item:hover{background:rgba(255,255,255,.1)}
.stat-item > i{
  font-size:1.8rem;color:rgba(139,195,74,.7);flex-shrink:0
}
.stat-item div{display:flex;flex-direction:column;gap:.1rem}
.stat-item strong{
  font-family:var(--font-en);font-size:2rem;font-weight:800;color:white;line-height:1
}
.stat-item em{font-style:normal;font-size:1.1rem;color:var(--g-300);font-weight:600}
.stat-item p{font-size:.78rem;color:rgba(255,255,255,.6)}

/* ─── ABOUT ─── */
.about-section{background:var(--cream)}
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2xl);align-items:start
}
.about-certs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--sp-md)}
.cert-chip{
  display:flex;align-items:center;gap:.4rem;
  background:var(--g-50);border:1px solid var(--g-200);
  color:var(--g-800);font-size:.8rem;font-weight:600;
  padding:.35rem .85rem;border-radius:var(--r-full);
  transition:all var(--tr);
}
.cert-chip i{color:var(--g-600);font-size:.72rem}
.cert-chip:hover{background:var(--g-600);color:white;border-color:var(--g-600)}
.cert-chip:hover i{color:white}

.about-cards{display:flex;flex-direction:column;gap:var(--sp-sm)}
.value-card{
  background:white;border:1px solid var(--gray-100);
  border-radius:var(--r-md);padding:var(--sp-md) var(--sp-lg);
  display:flex;align-items:flex-start;gap:var(--sp-md);
  transition:all var(--tr);
}
.value-card:hover{
  transform:translateX(8px);box-shadow:var(--sh-md);
  border-color:var(--g-200);
}
.vc-icon{
  width:48px;height:48px;flex-shrink:0;
  background:linear-gradient(135deg,var(--g-50),var(--g-100));
  border:1px solid var(--g-200);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:var(--g-700);
  transition:all var(--tr);
}
.value-card:hover .vc-icon{
  background:linear-gradient(135deg,var(--g-600),var(--g-800));
  border-color:transparent;color:white;
}
.value-card h4{font-size:1rem;font-weight:700;color:var(--gray-800);margin-bottom:.3rem}
.value-card p{font-size:.85rem;color:var(--text-s);line-height:1.7}

/* ─── PRODUCTS ─── */
.products-section{background:linear-gradient(180deg,var(--gray-50) 0%,var(--g-50) 100%)}
.prod-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-md)
}
.prod-card{
  background:white;border:1px solid var(--gray-100);
  border-radius:var(--r-lg);overflow:hidden;
  transition:all var(--tr);display:flex;flex-direction:column;
}
.prod-card:hover{transform:translateY(-8px);box-shadow:var(--sh-xl);border-color:var(--g-200)}

.prod-thumb{
  height:140px;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.prod-thumb.food     {background:linear-gradient(135deg,#f9fbe7,#dcedc8)}
.prod-thumb.beauty   {background:linear-gradient(135deg,#fce4ec,#e8f5e9)}
.prod-thumb.elec     {background:linear-gradient(135deg,#e8f5e9,#e3f2fd)}
.prod-thumb.logistics{background:linear-gradient(135deg,#fff8e1,#e8f5e9)}
.prod-thumb.agri     {background:linear-gradient(135deg,#f9fbe7,#fff8e1)}
.prod-thumb.custom   {background:linear-gradient(135deg,var(--g-800),var(--g-600))}

.prod-icon-bg{
  width:64px;height:64px;
  background:rgba(255,255,255,.8);
  border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:var(--g-700);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  transition:all var(--tr);
}
.prod-card:hover .prod-icon-bg{
  background:linear-gradient(135deg,var(--g-600),var(--g-800));
  color:white;box-shadow:0 6px 20px rgba(56,142,60,.3);
}
.prod-thumb.custom .prod-icon-bg{
  background:rgba(255,255,255,.2);color:white;
}
.prod-thumb.custom .prod-icon-bg:hover{background:rgba(255,255,255,.35)}

.prod-leaves{
  position:absolute;top:8px;right:12px;font-size:1.2rem;
  animation:floatLeaf 3s ease-in-out infinite;
}

.prod-body{padding:var(--sp-md) var(--sp-lg) var(--sp-lg);flex:1;display:flex;flex-direction:column}
.prod-category{
  font-family:var(--font-en);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--g-700);
  margin-bottom:.4rem;display:block;
}
.prod-card h3{font-size:1.05rem;font-weight:700;color:var(--gray-800);margin-bottom:.6rem}
.prod-body > p{font-size:.85rem;color:var(--text-s);line-height:1.7;margin-bottom:var(--sp-sm);flex:1}
.prod-feat{display:flex;flex-direction:column;gap:.35rem}
.prod-feat li{
  font-size:.8rem;color:var(--text-s);
  display:flex;align-items:center;gap:.5rem;
}
.prod-feat i{color:var(--g-600);font-size:.72rem}

.highlight-card{
  border-color:var(--g-400) !important;
  background:linear-gradient(160deg,#f1f8e9,#dcedc8) !important;
}
.highlight-card .prod-category{color:var(--g-700) !important}
.highlight-card h3{color:var(--gray-800) !important}
.highlight-card .prod-body > p{color:var(--text-s) !important}
.highlight-card .prod-feat li{color:var(--text-s) !important}
.highlight-card .prod-feat i{color:var(--g-600) !important}
.highlight-card .prod-thumb.custom{background:linear-gradient(135deg,var(--g-700),var(--g-500)) !important}

/* ─── ECO SECTION ─── */
.eco-section{background:white}
.eco-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-md);
  margin-bottom:var(--sp-2xl);
}
.eco-card{
  text-align:center;padding:var(--sp-lg) var(--sp-md);
  background:var(--g-50);border:1px solid var(--g-100);
  border-radius:var(--r-lg);transition:all var(--tr);
}
.eco-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);background:white;border-color:var(--g-300)}
.eco-icon{
  width:56px;height:56px;margin:0 auto var(--sp-sm);
  background:linear-gradient(135deg,var(--g-600),var(--g-800));
  border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:white;
  box-shadow:0 6px 20px rgba(56,142,60,.3);
  transition:transform var(--tr);
}
.eco-card:hover .eco-icon{transform:scale(1.12)}
.eco-num{
  font-family:var(--font-en);font-size:2rem;font-weight:800;
  color:var(--g-800);line-height:1.1;margin-bottom:.4rem;
}
.eco-card h4{font-size:.95rem;font-weight:700;color:var(--gray-800);margin-bottom:.4rem}
.eco-card p{font-size:.82rem;color:var(--text-s);line-height:1.7}

/* 비교 테이블 */
.compare-wrap{
  background:var(--g-50);border:1px solid var(--g-100);
  border-radius:var(--r-xl);padding:var(--sp-xl);
}
.compare-title{
  font-size:1.15rem;font-weight:700;color:var(--gray-800);
  margin-bottom:var(--sp-lg);text-align:center;
}
.compare-table{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--g-200)}
.ct-header,.ct-row{
  display:grid;grid-template-columns:1.4fr 1.5fr 1fr 1fr;
  gap:0;
}
.ct-header{
  background:linear-gradient(135deg,var(--g-800),var(--g-600));color:white;
}
.ct-header span,.ct-row span{
  padding:.85rem 1rem;font-size:.85rem;font-weight:600;
  border-right:1px solid rgba(255,255,255,.1);
}
.ct-header span:last-child,.ct-row span:last-child{border-right:none}
.ct-row{background:white;border-top:1px solid var(--g-100)}
.ct-row:nth-child(even){background:var(--g-50)}

.highlight-col{background:rgba(139,195,74,.1)!important}
.ct-header .highlight-col{background:rgba(255,255,255,.15)!important}
.good{color:var(--g-800)!important}
.good i{color:var(--g-600)}
.bad{color:#b71c1c!important}
.bad i{color:#ef5350}
.mid{color:#e65100!important}
.mid i{color:#ff8f00}

/* ─── PROCESS ─── */
.process-section{background:linear-gradient(160deg,var(--g-50) 0%,white 100%)}
.process-steps{
  display:flex;align-items:flex-start;justify-content:center;
  gap:0;flex-wrap:nowrap;
}
.step{
  flex:1;text-align:center;padding:0 var(--sp-sm);max-width:200px;
}
.step-num{
  font-family:var(--font-en);font-size:.72rem;font-weight:800;
  letter-spacing:.1em;color:var(--g-600);margin-bottom:.5rem;
}
.step-icon{
  width:64px;height:64px;margin:0 auto var(--sp-sm);
  background:linear-gradient(135deg,var(--g-50),var(--g-100));
  border:2px solid var(--g-200);border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:var(--g-700);
  transition:all var(--tr);box-shadow:var(--sh-sm);
}
.step:hover .step-icon{
  background:linear-gradient(135deg,var(--g-600),var(--g-800));
  color:white;border-color:transparent;
  box-shadow:0 8px 24px rgba(56,142,60,.3);
  transform:scale(1.08);
}
.step h4{font-size:.92rem;font-weight:700;color:var(--gray-800);margin-bottom:.4rem}
.step p{font-size:.78rem;color:var(--text-s);line-height:1.7}

.step-arrow{
  font-size:1.2rem;color:var(--g-300);padding-top:1.8rem;flex-shrink:0;
}

/* ─── WHY ─── */
.why-section{background:var(--cream)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-md)}
.why-item{
  background:white;border:1px solid var(--gray-100);
  border-radius:var(--r-lg);padding:var(--sp-lg) var(--sp-md);
  text-align:center;transition:all var(--tr);position:relative;overflow:hidden;
}
.why-item::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--g-600),var(--g-400));
  transform:scaleX(0);transform-origin:left;transition:transform var(--tr);
}
.why-item:hover{transform:translateY(-8px);box-shadow:var(--sh-xl);border-color:var(--g-200)}
.why-item:hover::after{transform:scaleX(1)}
.why-num{
  font-family:var(--font-en);font-size:.7rem;font-weight:800;
  letter-spacing:.12em;color:var(--g-600);margin-bottom:.5rem;
}
.why-icon{
  width:60px;height:60px;margin:0 auto var(--sp-sm);
  background:linear-gradient(135deg,var(--g-50),var(--g-100));
  border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:var(--g-700);transition:all var(--tr);
}
.why-item:hover .why-icon{
  background:linear-gradient(135deg,var(--g-600),var(--g-800));
  color:white;box-shadow:0 8px 20px rgba(56,142,60,.3);
}
.why-item h4{font-size:.98rem;font-weight:700;color:var(--gray-800);margin-bottom:.4rem}
.why-item p{font-size:.83rem;color:var(--text-s);line-height:1.75}

/* ─── CONTACT ─── */
.contact-section{
  background: #0d1f12;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(76,175,80,.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(139,195,74,.05) 0%, transparent 55%),
    /* 도트 패턴 */
    radial-gradient(circle, rgba(100,200,80,.12) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px;
  position:relative;overflow:hidden;
}
/* 네온 원 컨테이너 */
.contact-neon-orbs{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  overflow:hidden;
}
/* 공통 네온 원 */
.neon-orb{
  position:absolute;
  border-radius:50%;
  border: 2px solid rgba(130,230,100,.55);
  box-shadow:
    0 0 18px 4px rgba(130,230,100,.35),
    0 0 40px 8px rgba(100,200,80,.18),
    inset 0 0 20px rgba(130,230,100,.08);
  background: radial-gradient(circle at 40% 40%,
    rgba(180,255,140,.12) 0%,
    rgba(100,200,80,.04) 55%,
    transparent 75%);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* 원 1 – 좌상 */
.neon-orb-1{
  width:120px; height:120px;
  top:8%; left:6%;
  animation: floatOrb1 7s ease-in-out infinite;
  opacity:.75;
}
/* 원 2 – 우상 */
.neon-orb-2{
  width:80px; height:80px;
  top:15%; right:10%;
  animation: floatOrb2 9s ease-in-out infinite;
  opacity:.6;
  animation-delay: -2s;
}
/* 원 3 – 좌중 */
.neon-orb-3{
  width:160px; height:160px;
  top:40%; left:2%;
  animation: floatOrb3 11s ease-in-out infinite;
  opacity:.45;
  animation-delay: -4s;
}
/* 원 4 – 중앙 하단 */
.neon-orb-4{
  width:96px; height:96px;
  bottom:18%; left:45%;
  animation: floatOrb4 8s ease-in-out infinite;
  opacity:.65;
  animation-delay: -1s;
}
/* 원 5 – 우하 */
.neon-orb-5{
  width:140px; height:140px;
  bottom:8%; right:5%;
  animation: floatOrb5 10s ease-in-out infinite;
  opacity:.55;
  animation-delay: -5s;
}
/* 원 6 – 우중 */
.neon-orb-6{
  width:64px; height:64px;
  top:55%; right:18%;
  animation: floatOrb6 6.5s ease-in-out infinite;
  opacity:.7;
  animation-delay: -3s;
}

@keyframes floatOrb1{
  0%  { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(18px, -24px) scale(1.08); }
  66% { transform: translate(-10px, 14px) scale(0.96); }
  100%{ transform: translate(8px, -12px) scale(1.04); }
}
@keyframes floatOrb2{
  0%  { transform: translate(0px, 0px) scale(1); }
  40% { transform: translate(-22px, 18px) scale(1.12); }
  80% { transform: translate(12px, -8px) scale(0.94); }
  100%{ transform: translate(-6px, 22px) scale(1.06); }
}
@keyframes floatOrb3{
  0%  { transform: translate(0px, 0px) scale(1); }
  25% { transform: translate(20px, -30px) scale(1.05); }
  60% { transform: translate(-15px, 20px) scale(0.95); }
  100%{ transform: translate(10px, -15px) scale(1.02); }
}
@keyframes floatOrb4{
  0%  { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(-28px, -18px) scale(1.10); }
  100%{ transform: translate(14px, 22px) scale(0.92); }
}
@keyframes floatOrb5{
  0%  { transform: translate(0px, 0px) scale(1); }
  35% { transform: translate(-16px, -28px) scale(1.07); }
  70% { transform: translate(24px, 12px) scale(0.97); }
  100%{ transform: translate(-8px, -18px) scale(1.03); }
}
@keyframes floatOrb6{
  0%  { transform: translate(0px, 0px) scale(1); }
  45% { transform: translate(20px, 25px) scale(1.15); }
  100%{ transform: translate(-12px, -14px) scale(0.90); }
}
.contact-section .container{position:relative;z-index:1}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--sp-2xl);align-items:start}

/* 다크 배경용 텍스트 색상 오버라이드 */
.contact-section .section-label{ color: rgba(160,230,120,.85) !important; }
.contact-section .section-title{ color: #f0fff0 !important; }
.contact-section .section-desc{ color: rgba(200,240,200,.8) !important; }

.contact-info-list{display:flex;flex-direction:column;gap:var(--sp-md);margin-top:var(--sp-lg)}
.contact-info-list li{display:flex;align-items:flex-start;gap:var(--sp-sm)}
.ci-icon{
  width:42px;height:42px;flex-shrink:0;
  background:linear-gradient(135deg,var(--g-400),var(--g-600));
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:white;margin-top:2px;
  box-shadow: 0 0 12px rgba(130,230,100,.3);
}
.contact-info-list li > div{display:flex;flex-direction:column;gap:.15rem}
.contact-info-list strong{font-size:.78rem;font-weight:700;color:rgba(160,230,120,.8);
  text-transform:uppercase;letter-spacing:.06em}
.contact-info-list span{font-size:.93rem;color:rgba(220,250,220,.9)}

.contact-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--sp-lg)}
.contact-tags span{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(130,230,100,.35);
  color:rgba(190,240,170,.9);
  font-size:.78rem;font-weight:600;
  padding:.3rem .85rem;border-radius:var(--r-full);
  transition:all var(--tr);cursor:default;
  backdrop-filter:blur(4px);
}
.contact-tags span:hover{
  background:rgba(130,230,100,.25);
  color:#f0fff0;
  border-color:rgba(130,230,100,.7);
  box-shadow: 0 0 10px rgba(130,230,100,.3);
}

/* Form */
.contact-form{
  background:rgba(15,35,18,.75);
  backdrop-filter:blur(20px);
  border:1px solid rgba(130,230,100,.22);
  border-radius:var(--r-xl);
  padding:var(--sp-xl);
  box-shadow:
    0 0 0 1px rgba(130,230,100,.08),
    0 24px 64px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(130,230,100,.12);
}
.contact-form h3{color:#f0fff0 !important;}
.form-row.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-sm)}
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--sp-sm)}
.form-group label{
  font-size:.78rem;font-weight:700;
  color:rgba(160,230,120,.8);
  text-transform:uppercase;letter-spacing:.06em;
}
.form-group input,
.form-group select,
.form-group textarea{
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(130,230,100,.2);
  border-radius:var(--r-sm);padding:.75rem 1rem;
  font-size:.9rem;color:rgba(230,255,230,.92);
  transition:all var(--tr);outline:none;width:100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:rgba(160,200,160,.45);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:rgba(130,230,100,.55);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(130,230,100,.12), 0 0 16px rgba(130,230,100,.15);
}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select{
  appearance:none;cursor:pointer;
  color:rgba(230,255,230,.92);
}
.form-group select option{ background:#0d1f12; color:#e0ffe0; }
.form-notice{
  text-align:center;margin-top:var(--sp-sm);
  font-size:.86rem;font-weight:600;min-height:1.4em;
}
.form-notice.success{color:#a5d6a7;}
.form-notice.error{color:#ef9a9a;}

/* ─── FOOTER ─── */
.site-footer{
  background:linear-gradient(135deg,#1b3a1b,#0d2b0d);
  padding-block:var(--sp-xl);
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-lg);flex-wrap:wrap;
}
.footer-brand{display:flex;align-items:center;gap:.65rem}
.footer-leaf svg{width:36px;height:36px}
.footer-brand strong{display:block;font-family:var(--font-en);font-size:1.1rem;
  font-weight:800;color:white;letter-spacing:.06em}
.footer-brand span{font-size:.72rem;color:rgba(255,255,255,.55)}
.footer-copy{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.8;text-align:center}
.footer-copy small{display:block;margin-top:.2rem;font-size:.73rem;color:rgba(255,255,255,.35)}
.footer-links{display:flex;gap:1.2rem;flex-wrap:wrap}
.footer-links a{font-size:.82rem;color:rgba(255,255,255,.55);transition:color var(--tr)}
.footer-links a:hover{color:var(--g-300)}

/* ─── Mobile Nav ─── */
@media(max-width:768px){
  .hamburger{display:flex}
  #main-nav{
    position:fixed;inset:0;
    background:rgba(250,253,245,.97);backdrop-filter:blur(20px);
    z-index:999;display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity var(--tr);
  }
  #main-nav.open{opacity:1;pointer-events:all}
  .nav-list{flex-direction:column;gap:var(--sp-sm);text-align:center}
  .nav-link{font-size:1.25rem;padding:.75rem 1.5rem}
  .btn-nav{font-size:1.1rem!important}
}

/* ─── Responsive ─── */
@media(max-width:1024px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .eco-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .process-steps{flex-wrap:wrap;gap:var(--sp-md)}
  .step-arrow{display:none}
  .step{max-width:160px}
}
@media(max-width:768px){
  .hero-grid{grid-template-columns:1fr;text-align:center;padding-block:var(--sp-xl)}
  .hero-actions{justify-content:center}
  .hero-kpi{margin-inline:auto}
  .hero-visual{margin-top:var(--sp-lg)}
  .pulp-showcase{width:280px;height:300px}
  .main-card{width:200px}
  .side-card.top{top:-10px;right:-20px}
  .side-card.bottom{bottom:-10px;left:-20px}

  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .form-row.two-col{grid-template-columns:1fr}
  .compare-table{font-size:.78rem}
  .ct-header,.ct-row{grid-template-columns:1fr 1fr 1fr 1fr}
  .ct-header span,.ct-row span{padding:.6rem .6rem;font-size:.72rem}

  .footer-inner{flex-direction:column;text-align:center}
  .footer-links{justify-content:center}
}
@media(max-width:480px){
  .why-grid{grid-template-columns:1fr}
  .eco-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--g-50)}
::-webkit-scrollbar-thumb{background:var(--g-300);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--g-500)}

/* ─── AOS ─── */
[data-aos]{pointer-events:none}
[data-aos].aos-animate{pointer-events:auto}

/* ============================================================
   로딩 스크린
   ============================================================ */
.loading-screen{
  position:fixed;inset:0;z-index:9999;
  background:#0d1f0d;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.loading-screen.hide{opacity:0;visibility:hidden;pointer-events:none}
#loadingCanvas{position:absolute;inset:0;width:100%;height:100%}
.loading-content{
  position:relative;z-index:2;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.loading-logo{
  width:80px;height:80px;
  animation:loadSpin 1.2s ease-in-out infinite alternate;
}
.loading-logo svg{width:100%;height:100%}
@keyframes loadSpin{
  0%{transform:scale(0.9) rotate(-5deg);opacity:.7}
  100%{transform:scale(1.1) rotate(5deg);opacity:1}
}
.loading-brand{
  font-family:var(--font-en);font-size:2.4rem;font-weight:900;
  color:white;letter-spacing:.18em;
  text-shadow:0 0 30px rgba(174,213,129,.6),0 0 60px rgba(174,213,129,.3);
}
.loading-copy{
  font-size:1rem;font-weight:500;color:rgba(255,255,255,.75);
  line-height:1.7;letter-spacing:.02em;
}
.loading-bar-wrap{
  width:200px;height:3px;background:rgba(255,255,255,.15);
  border-radius:var(--r-full);overflow:hidden;margin-top:.5rem;
}
.loading-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,#8bc34a,#aed581);
  border-radius:var(--r-full);
  transition:width .05s linear;
  box-shadow:0 0 10px rgba(174,213,129,.8);
}

/* ============================================================
   히어로 AI 배경
   ============================================================ */
.hero-section{
  background:linear-gradient(150deg,var(--cream) 0%,var(--g-50) 55%,#e8f5e9 100%);
}
.hero-bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
/* AI 이미지 배경 — Eco Value 동일 수준 밝기 */
.hero-bg-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  opacity:0.45;
  filter:saturate(0.9) brightness(1.1) blur(1px);
  transform:scale(1.04);
  transition:opacity .8s ease;
}
/* 흰색 반투명 오버레이 — 밝고 맑게 */
.hero-bg::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:rgba(240,250,235,.68);
}
.hero-bg-overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,0) 50%,
    rgba(220,240,210,.15) 100%
  );
}
.hero-grid{position:relative;z-index:1}
/* 밝은 배경이므로 텍스트 색상을 어두운 계열로 */
.hero-title{color:var(--gray-800) !important}
.hero-title .gradient-text{
  background:linear-gradient(120deg,var(--g-800),var(--g-600),#388e3c) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
.hero-desc{color:var(--text-s) !important}
.hero-badge{
  background:rgba(139,195,74,.18) !important;
  border-color:rgba(139,195,74,.45) !important;
  color:var(--g-800) !important;
}
.hero-kpi{background:rgba(255,255,255,.72) !important;border-color:var(--g-200) !important;backdrop-filter:blur(8px)}
.kpi-item strong{color:var(--g-800) !important}
.kpi-item span{color:var(--text-s) !important}
.kpi-divider{background:var(--g-200) !important}

/* ============================================================
   마퀴 바 (About 위) — 연한 연두 배경 (헤더와 동일 계열)
   ============================================================ */
.marquee-section{
  background:rgba(250,253,245,.95);
  border-top:1px solid var(--g-100);
  border-bottom:1px solid var(--g-100);
  overflow:hidden;
  padding:0;
  position:relative;
}
.marquee-section::before,
.marquee-section::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;
}
.marquee-section::before{left:0;background:linear-gradient(90deg,rgba(250,253,245,.95),transparent)}
.marquee-section::after{right:0;background:linear-gradient(-90deg,rgba(250,253,245,.95),transparent)}
.marquee-track{display:flex;align-items:center;height:52px;overflow:hidden}
.marquee-inner{
  display:flex;align-items:center;gap:0;
  white-space:nowrap;
  animation:marqueeRun 28s linear infinite;
  will-change:transform;
}
.marquee-inner span{
  font-family:var(--font-en);font-size:.88rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--g-700);
  padding:0 1.2rem;
}
.marquee-inner .sep{
  color:var(--g-400);font-size:.7rem;padding:0 .4rem;
}
@keyframes marqueeRun{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ============================================================
   CTA 플로팅 버튼 — 오른쪽 사이드 고정
   ============================================================ */
.cta-float-bar{
  position:fixed;right:0;top:50%;z-index:900;
  transform:translateY(-50%) translateX(100%);
  transition:transform .4s cubic-bezier(.23,1,.32,1);
  display:flex;flex-direction:column;gap:0;
  pointer-events:none;
}
.cta-float-bar.visible{
  transform:translateY(-50%) translateX(0);
  pointer-events:all;
}
.cta-float-inner{
  display:flex;flex-direction:column;gap:0;
}
.cta-float-msg{display:none}
.cta-float-btns{display:flex;flex-direction:column;gap:0}
.cta-btn-phone,.cta-btn-inquiry{
  display:flex;align-items:center;gap:.5rem;
  padding:.9rem 1rem .9rem .85rem;
  font-size:.82rem;font-weight:700;transition:all var(--tr);
  white-space:nowrap;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  box-shadow:-4px 0 20px rgba(0,0,0,.2);
  min-width:52px;
  max-width:52px;
  overflow:hidden;
  justify-content:center;
  transition:max-width .35s cubic-bezier(.23,1,.32,1), background var(--tr), box-shadow var(--tr);
}
/* 호버 시 텍스트 슬라이드 오픈 */
.cta-btn-phone:hover,
.cta-btn-inquiry:hover{
  max-width:180px;
  justify-content:flex-start;
  padding-left:1.1rem;
}
/* 아이콘 */
.cta-btn-phone i,
.cta-btn-inquiry i{
  flex-shrink:0;font-size:1rem;
}
/* 텍스트 (hover 전까지 숨김) */
.cta-btn-phone .cta-label,
.cta-btn-inquiry .cta-label{
  white-space:nowrap;
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .25s ease .1s, transform .25s ease .1s;
  font-size:.8rem;
}
.cta-btn-phone:hover .cta-label,
.cta-btn-inquiry:hover .cta-label{
  opacity:1;
  transform:translateX(0);
}
/* 전화 버튼 */
.cta-btn-phone{
  background:linear-gradient(135deg,#2e7d32,#388e3c);
  color:white;
  border:none;
  margin-bottom:6px;
}
.cta-btn-phone:hover{
  background:linear-gradient(135deg,#1b5e20,#2e7d32);
  box-shadow:-6px 0 24px rgba(46,125,50,.45);
}
/* 문의하기 버튼 */
.cta-btn-inquiry{
  background:linear-gradient(135deg,#7cb342,#558b2f);
  color:white;
  border:none;
}
.cta-btn-inquiry:hover{
  background:linear-gradient(135deg,#689f38,#33691e);
  box-shadow:-6px 0 24px rgba(124,179,66,.45);
}
@media(max-width:768px){
  .cta-btn-phone,.cta-btn-inquiry{min-width:46px;max-width:46px;padding:.8rem .75rem}
  .cta-btn-phone:hover,.cta-btn-inquiry:hover{max-width:46px;padding:.8rem .75rem;justify-content:center}
  .cta-btn-phone .cta-label,.cta-btn-inquiry .cta-label{display:none}
}

/* ============================================================
   Products 섹션 — 배경 + 파티클
   ============================================================ */
.products-section{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--g-50) 0%,var(--cream) 50%,var(--g-50) 100%);
}
/* 펄프 샘플 배경 이미지 랩 */
.products-bg-wrap{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.products-bg-img{
  width:100%;height:100%;object-fit:cover;object-position:center center;
  opacity:0.22;
  filter:saturate(0.7) brightness(1.05) blur(0.5px);
  transform:scale(1.04);
}
/* 밝은 오버레이 레이어 — 이미지가 흰배경이므로 살짝만 */
.products-section::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:rgba(245,252,240,.60);
}
.product-particles-canvas{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;width:100%;height:100%;
}
.products-section .container{position:relative;z-index:3}
/* 밝은 배경이므로 텍스트 어두운 계열로 */
.products-section .section-header .section-label{
  background:rgba(255,255,255,.9) !important;
  border-color:var(--g-200) !important;
  color:var(--g-800) !important;
}
.products-section .section-title{color:var(--gray-800) !important}
.products-section .section-subtitle{color:var(--text-s) !important}
.prod-card{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 20px rgba(56,142,60,.1);
}

/* ============================================================
   Eco Value 섹션 — AI 자연 석양 배경
   ============================================================ */
.eco-bg{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--g-50) 0%,#f0f8e8 50%,var(--g-50) 100%);
}
/* AI 밝은 숲 이미지 */
.eco-bg-img-wrap{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.eco-bg-img{
  width:100%;height:100%;object-fit:cover;object-position:center 35%;
  opacity:0.55;
  filter:saturate(1.0) brightness(1.05) blur(0.8px);
  transform:scale(1.04);
}
/* 흰색 반투명 오버레이 — 밝고 부드럽게 */
.eco-bg::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:rgba(245,252,240,.62);
}
.eco-bg::after{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 50%,rgba(230,245,220,.2) 100%);
}
.eco-bg .container{position:relative;z-index:3}
.eco-bg .section-label{
  background:rgba(255,255,255,.9)!important;
  border-color:var(--g-200)!important;
  color:var(--g-800)!important;
}
.eco-bg .section-title{color:var(--gray-800)!important;text-shadow:0 1px 4px rgba(255,255,255,.8)}
.eco-bg .section-subtitle{color:var(--text-s)!important}
.eco-card{
  background:rgba(255,255,255,.88) !important;
  border-color:rgba(139,195,74,.35) !important;
  backdrop-filter:blur(16px);
  box-shadow:0 4px 24px rgba(56,142,60,.12);
}
.eco-card:hover{
  background:rgba(255,255,255,.97) !important;
  border-color:var(--g-400) !important;
}
.eco-card h4{color:var(--gray-800) !important}
.eco-card p{color:var(--text-s) !important}
.eco-num{color:var(--g-800) !important}
.compare-wrap{
  background:rgba(255,255,255,.88) !important;
  border-color:var(--g-200) !important;
  backdrop-filter:blur(16px);
  box-shadow:0 4px 24px rgba(56,142,60,.1);
}
.compare-title{color:var(--gray-800) !important}
.ct-row{background:rgba(255,255,255,.85) !important;border-top-color:var(--g-100) !important}
.ct-row:nth-child(even){background:rgba(241,248,233,.75) !important}
.ct-header span,.ct-row span{color:var(--text)}
.ct-row .highlight-col{background:rgba(139,195,74,.18) !important;color:var(--g-800) !important}
.ct-row .good{color:var(--g-800) !important}
.ct-row .bad{color:#c62828 !important}
.ct-row .mid{color:#e65100 !important}

/* ============================================================
   Contact 팀 이미지
   ============================================================ */
.contact-team-img{
  width:100%;height:280px;border-radius:var(--r-xl);overflow:hidden;
  margin-bottom:var(--sp-lg);
  box-shadow:
    0 0 0 1px rgba(130,230,100,.2),
    0 0 30px rgba(130,230,100,.15),
    0 20px 60px rgba(0,0,0,.5);
  position:relative;
  background:linear-gradient(135deg,#1a3a0a,#0d2208);
}
.contact-team-img img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform .6s ease;
  display:block;
}
.contact-team-img:hover img{transform:scale(1.04)}
.contact-team-img:hover{
  box-shadow:
    0 0 0 1px rgba(130,230,100,.4),
    0 0 40px rgba(130,230,100,.25),
    0 20px 60px rgba(0,0,0,.5);
}
.contact-team-img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(5,20,8,.55) 100%);
  z-index:1;
}
.contact-team-placeholder{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#1a3a0a,#0d2208);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;
}
.contact-team-placeholder i{font-size:3rem;color:rgba(174,213,129,.5)}
.contact-team-placeholder span{
  font-family:var(--font-en);font-size:.9rem;font-weight:700;
  letter-spacing:.15em;color:rgba(174,213,129,.5);
}

/* ============================================================
   ODM 카드 문의하기 버튼
   ============================================================ */
.odm-body{color:var(--text-s) !important}
.odm-cta{
  display:flex;gap:.6rem;margin-top:var(--sp-sm);flex-wrap:wrap;
}
.odm-btn-phone,.odm-btn-inquiry{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.65rem 1.2rem;border-radius:var(--r-full);
  font-size:.82rem;font-weight:700;transition:all var(--tr);
  white-space:nowrap;
}
.odm-btn-phone{
  background:white;color:var(--g-800);
  border:1.5px solid var(--g-300);
}
.odm-btn-phone:hover{background:var(--g-50);border-color:var(--g-500);transform:translateY(-2px)}
.odm-btn-inquiry{
  background:linear-gradient(135deg,var(--g-800),var(--g-600));color:white;
  border:none;box-shadow:0 4px 14px rgba(56,142,60,.3);
}
.odm-btn-inquiry:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(56,142,60,.45)}

/* ============================================================
   관리자 버튼 & 상태등
   ============================================================ */
.admin-btn{
  display:flex;align-items:center;gap:.45rem;
  padding:.45rem .9rem;border-radius:var(--r-full);
  font-size:.88rem;font-weight:600;color:var(--text-s);
  background:var(--gray-50);border:1.5px solid var(--gray-200);
  cursor:pointer;transition:all var(--tr);position:relative;
  font-family:var(--font);
}
.admin-btn:hover{background:var(--g-50);border-color:var(--g-300);color:var(--g-800)}
.admin-btn i{font-size:.85rem}
.admin-label{font-size:.82rem}

/* 상태등 */
.inquiry-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  transition:background var(--tr),box-shadow var(--tr);
}
.inquiry-dot.green{
  background:#4caf50;
  box-shadow:0 0 0 3px rgba(76,175,80,.2);
}
.inquiry-dot.red{
  background:#f44336;
  box-shadow:0 0 0 3px rgba(244,67,54,.2);
  animation:dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(244,67,54,.2)}
  50%{box-shadow:0 0 0 7px rgba(244,67,54,.08)}
}

/* ============================================================
   모달 공통
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(20,35,20,.55);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-md);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.modal-overlay.open{opacity:1;pointer-events:all}

.modal-box{
  background:white;border-radius:var(--r-xl);
  box-shadow:0 24px 80px rgba(0,0,0,.22);
  position:relative;
  transform:translateY(24px) scale(.97);
  transition:transform .35s cubic-bezier(.23,1,.32,1);
  max-height:90vh;overflow:hidden;display:flex;flex-direction:column;
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}

.modal-close{
  position:absolute;top:1rem;right:1rem;z-index:10;
  width:36px;height:36px;border-radius:50%;
  background:var(--gray-50);border:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--gray-600);transition:all var(--tr);cursor:pointer;
}
.modal-close:hover{background:#fee2e2;color:#dc2626;border-color:#fca5a5}

/* ============================================================
   로그인 팝업
   ============================================================ */
.login-box{
  width:100%;max-width:380px;padding:2.5rem 2rem;text-align:center;
}
.login-icon{
  width:64px;height:64px;margin:0 auto 1.2rem;
  background:linear-gradient(135deg,var(--g-600),var(--g-800));
  border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:white;box-shadow:0 8px 24px rgba(56,142,60,.3);
}
.login-box h2{font-size:1.3rem;font-weight:800;color:var(--gray-800);margin-bottom:.35rem}
.login-box > form > p{font-size:.88rem;color:var(--text-s);margin-bottom:1.2rem}
.login-input-wrap{
  position:relative;margin-bottom:.6rem;
}
.login-input-wrap input{
  width:100%;padding:.85rem 3rem .85rem 1rem;
  border:1.5px solid var(--gray-200);border-radius:var(--r-sm);
  font-size:.95rem;color:var(--text);background:var(--gray-50);
  outline:none;transition:all var(--tr);
}
.login-input-wrap input:focus{
  border-color:var(--g-500);background:white;
  box-shadow:0 0 0 3px rgba(139,195,74,.15);
}
.pw-toggle{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  color:var(--gray-400);font-size:.9rem;padding:.3rem;
  background:none;border:none;cursor:pointer;transition:color var(--tr);
}
.pw-toggle:hover{color:var(--g-700)}
.login-error{
  font-size:.82rem;color:#dc2626;font-weight:600;
  min-height:1.2em;margin-bottom:.6rem;
}
.login-submit{margin-top:.4rem}

/* ============================================================
   관리자 패널
   ============================================================ */
.admin-box{
  width:100%;max-width:1100px;
}
.admin-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 1.8rem;border-bottom:1px solid var(--gray-100);
  flex-shrink:0;gap:1rem;flex-wrap:wrap;
}
.admin-header-left{display:flex;align-items:center;gap:1rem}
.admin-header-left > i{
  font-size:1.6rem;color:var(--g-700)
}
.admin-header-left h2{font-size:1.2rem;font-weight:800;color:var(--gray-800);margin:0}
.admin-header-left span{font-size:.8rem;color:var(--text-s)}
.admin-header-right{display:flex;align-items:center;gap:.5rem}

.btn-icon{
  display:flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border-radius:var(--r-sm);
  font-size:.8rem;font-weight:700;cursor:pointer;
  border:1.5px solid var(--gray-200);background:white;
  color:var(--gray-600);transition:all var(--tr);
  font-family:var(--font);
}
.btn-icon:hover{background:var(--g-50);border-color:var(--g-300);color:var(--g-800)}
.btn-excel{color:#1d6f42}
.btn-excel:hover{background:#e8f5e9;border-color:#81c784;color:#1b5e20}
.btn-refresh:hover{background:var(--g-50);border-color:var(--g-300)}

/* 필터 바 */
.admin-filter-bar{
  display:flex;gap:.75rem;padding:1rem 1.8rem;
  border-bottom:1px solid var(--gray-100);
  flex-shrink:0;flex-wrap:wrap;
}
.admin-search{
  flex:1;min-width:200px;padding:.6rem 1rem;
  border:1.5px solid var(--gray-200);border-radius:var(--r-sm);
  font-size:.86rem;color:var(--text);background:var(--gray-50);
  outline:none;transition:all var(--tr);
}
.admin-search:focus{border-color:var(--g-500);background:white;box-shadow:0 0 0 3px rgba(139,195,74,.12)}
.admin-select{
  padding:.6rem 1rem;border:1.5px solid var(--gray-200);border-radius:var(--r-sm);
  font-size:.86rem;color:var(--text);background:var(--gray-50);
  cursor:pointer;outline:none;transition:all var(--tr);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6b47' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;
  padding-right:2.2rem;
}
.admin-select:focus{border-color:var(--g-500);background-color:white}

/* 테이블 */
.admin-table-wrap{
  flex:1;overflow:auto;
  min-height:200px;
}
.admin-table{
  width:100%;border-collapse:collapse;font-size:.83rem;
}
.admin-table thead{position:sticky;top:0;z-index:1}
.admin-table th{
  background:var(--g-50);border-bottom:2px solid var(--g-200);
  padding:.75rem 1rem;text-align:left;font-weight:700;
  color:var(--g-800);white-space:nowrap;
}
.admin-table td{
  padding:.75rem 1rem;border-bottom:1px solid var(--gray-100);
  color:var(--text);vertical-align:middle;
}
.admin-table tr:hover td{background:var(--g-50)}
.admin-loading{
  text-align:center;padding:3rem;color:var(--gray-400);font-size:.9rem;
}

/* 상태 뱃지 */
.status-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .7rem;border-radius:var(--r-full);
  font-size:.72rem;font-weight:700;white-space:nowrap;
}
.status-badge.new{
  background:#fee2e2;color:#dc2626;
  border:1px solid #fca5a5;
}
.status-badge.read{
  background:var(--g-50);color:var(--g-800);
  border:1px solid var(--g-200);
}
.status-badge .dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;
}

/* 유형 뱃지 */
.type-badge{
  display:inline-block;
  padding:.2rem .6rem;border-radius:var(--r-full);
  font-size:.72rem;font-weight:600;
  background:var(--g-50);color:var(--g-800);
  border:1px solid var(--g-200);
}

/* 내용 미리보기 */
.msg-preview{
  max-width:200px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  color:var(--text-s);font-size:.82rem;
}

/* 액션 버튼 */
.btn-view{
  padding:.35rem .8rem;border-radius:var(--r-sm);
  font-size:.76rem;font-weight:700;
  background:linear-gradient(135deg,var(--g-600),var(--g-800));
  color:white;border:none;cursor:pointer;
  transition:all var(--tr);white-space:nowrap;
  font-family:var(--font);
}
.btn-view:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(56,142,60,.3)}

/* 페이지네이션 */
.admin-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.8rem;border-top:1px solid var(--gray-100);
  flex-shrink:0;flex-wrap:wrap;gap:.75rem;
}
#adminPageInfo{font-size:.82rem;color:var(--text-s)}
.admin-pagination{display:flex;gap:.35rem;flex-wrap:wrap}
.page-btn{
  width:34px;height:34px;border-radius:var(--r-sm);
  border:1.5px solid var(--gray-200);background:white;
  font-size:.8rem;font-weight:600;color:var(--gray-600);
  cursor:pointer;transition:all var(--tr);display:flex;align-items:center;justify-content:center;
  font-family:var(--font);
}
.page-btn:hover{border-color:var(--g-400);color:var(--g-800);background:var(--g-50)}
.page-btn.active{
  background:linear-gradient(135deg,var(--g-600),var(--g-800));
  color:white;border-color:transparent;
}

/* 상세 팝업 */
.detail-box{
  width:100%;max-width:560px;padding:2rem;
}
.detail-title{
  font-size:1.1rem;font-weight:800;color:var(--gray-800);
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:1.4rem;padding-bottom:1rem;
  border-bottom:1px solid var(--gray-100);
}
.detail-content{display:flex;flex-direction:column;gap:.85rem}
.detail-row{display:flex;flex-direction:column;gap:.25rem}
.detail-row label{
  font-size:.72rem;font-weight:700;color:var(--gray-400);
  text-transform:uppercase;letter-spacing:.08em;
}
.detail-row span,.detail-row p{
  font-size:.92rem;color:var(--text);line-height:1.7;
}
.detail-msg{
  background:var(--gray-50);border:1px solid var(--gray-100);
  border-radius:var(--r-sm);padding:.85rem 1rem;
  font-size:.9rem;line-height:1.8;color:var(--text);
  white-space:pre-wrap;
}

/* 로그인 input shake */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.login-input-wrap.shake{animation:shake .45s ease}

/* 미확인 행 강조 */
.row-unread{background:#fffde7 !important}
.row-unread:hover td{background:#fff9c4 !important}

/* ─── 반응형 (관리자 패널) ─── */
@media(max-width:768px){
  .admin-box{max-height:95vh}
  .admin-header{padding:1rem}
  .admin-filter-bar{padding:.75rem 1rem}
  .admin-table th,.admin-table td{padding:.6rem .75rem;font-size:.78rem}
  .msg-preview{max-width:120px}
  .admin-label{display:none}
}