@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ==========================================================================
   NH RECYTECH — Header
   배경/톤: 원본(Light Corporate) 유지
   스타일 메커니즘: 22.html GNB 스타일(골드 포인트, 언더라인, 라운드 드롭다운) 이식
   ========================================================================== */

:root{
  --nh-header-bg:#F1F6F7;
  --nh-header-bg-light:#F8FAFA;

  --nh-ink:#27343D;
  --nh-ink-soft:#69767D;

  --nh-gold:#C9A961;
  --nh-gold-dark:#9C7A34;

  --nh-border:#DCE6E9;
  --nh-border-soft:#E8EFF1;

  --nh-panel-bg:rgba(255,255,255,.9);
  --nh-panel-text:#4B5961;
  --nh-panel-text-active:#27343D;
  --nh-panel-hover-bg:rgba(201,169,97,.12);

  --nh-shadow:0 6px 24px rgba(32,55,65,.07);
  --nh-menu-shadow:0 16px 34px rgba(32,55,65,.13);
}


/* ==========================================================================
   HEADER — 배경은 원본 라이트 그라데이션 유지
   ========================================================================== */

.header{
  position:relative;
  z-index:120;

  background:
    linear-gradient(
      180deg,
      var(--nh-header-bg) 0%,
      var(--nh-header-bg-light) 100%
    ) !important;

  border-bottom:1px solid var(--nh-border) !important;

  box-shadow:var(--nh-shadow);

  overflow:visible;
}

.header::before{
  display:none !important;
}


/* 하단 골드 그라데이션 경계 (22 스타일) */

.header::after{
  content:'';

  position:absolute;

  left:6%;
  right:6%;
  bottom:-1px;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(201,169,97,.35) 25%,
      rgba(201,169,97,.5) 50%,
      rgba(201,169,97,.35) 75%,
      transparent 100%
    );
}


/* ==========================================================================
   LOGO — 원본 로고 그대로
   ========================================================================== */

.header .logo{
  position:relative;
  z-index:5;
}

.header .logo a{
  background-image:url(../images/common/logo_b.png) !important;

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.header .logo a:hover{
  opacity:.95;
  transform:translateY(-1px);
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.header .nav,
.header .nav .nav-depth1-link,
.header .nav .nav-depth2-link{
  font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;
}

.header .nav{
  position:relative;
  z-index:5;
}

.header .nav .nav-depth1-item{
  position:relative;
}


/* 메뉴 사이 구분선 (22 스타일 — 골드 톤) */

.header .nav .nav-depth1-item + .nav-depth1-item::before{
  content:'';

  position:absolute;

  left:0;
  top:50%;

  width:1px;
  height:16px;

  transform:translateY(-50%);

  background-color:rgba(201,169,97,.4);
}


/* ==========================================================================
   1차 메뉴
   ========================================================================== */

.header .nav .nav-depth1-link{
  position:relative;
  
  color:var(--nh-ink) !important;

  font-size:1.125rem;
  font-weight:400 !important;

  letter-spacing:-.025em;

  padding:1rem .8rem !important;

  border-radius:0;

  background:transparent !important;

  transition:color .22s ease;
  
}


/* 22 스타일: ::before 로 중앙에서 퍼지는 언더라인 */

.header .nav .nav-depth1-link::before{
  content:'';

  position:absolute;

  left:1.25rem;
  right:1.25rem;
  bottom:.45rem;

  height:2px;

  border-radius:2px;

  background:var(--nh-gold);

  transform:scaleX(0);
  transform-origin:center;

  transition:transform .3s ease;
}

.header .nav .nav-depth1-link::after{
  display:none !important;
}


/* Hover / Active — 골드 텍스트 + 골드 언더라인 */

.header .nav .nav-depth1-item:hover .nav-depth1-link,
.header .nav .nav-depth1-item.active .nav-depth1-link{
  color:var(--nh-gold-dark) !important;

  font-weight:400 !important;

  transform:translateY(-1px);
}

.header .nav .nav-depth1-item:hover .nav-depth1-link::before,
.header .nav .nav-depth1-item.active .nav-depth1-link::before{
  transform:scaleX(1);
}


/* ==========================================================================
   DROPDOWN MENU — 22 스타일(라운드 14px, 상단 골드 보더, 내부 여백)
   ========================================================================== */

.header .nav .nav-depth2{
  background:var(--nh-panel-bg) !important;

  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);

  border:1px solid rgba(220,230,233,.85);
  border-top:2px solid var(--nh-gold);

  border-radius:0 0 14px 14px;

  padding:8px;

  min-width:170px;

  box-shadow:var(--nh-menu-shadow);

  overflow:hidden;
}

.header .nav .nav-depth2::before{
  display:none !important;
}

.header .nav .nav-depth2-item{
  margin:3px;
  background:transparent;
}

.header .nav .nav-depth2-item + .nav-depth2-item{
  margin-top:3px;
}


/* ==========================================================================
   2차 메뉴
   ========================================================================== */

.header .nav .nav-depth2-link{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  color:var(--nh-panel-text) !important;

  font-size:0.98rem;
  font-weight:400 !important;

  line-height:1.4;

  border-radius:10px;

  background:transparent !important;

  transition:
    color .18s ease,
    background-color .18s ease;

	  /* 좌측 정렬 + 오른쪽 여백 축소 */
  padding:.58rem .4rem .58rem .9rem;

  border-radius:6px;

  background:transparent !important;
}

.header .nav .nav-depth2-link::before{
  display:none !important;
}


/* 2차 메뉴 Hover (22 스타일 — 골드톤 배경) */

/* "고객지원" 드롭다운(5번째 1차 메뉴)의 마지막 항목("책임있는 광물
   고충처리 핫라인")만 별도 처리 — 글자 크기는 다른 항목과 동일하게
   유지하고, 줄바꿈 위치는 gnb.html에 직접 넣은 <br>로 고정 */
.header .nav .nav-depth1-item:nth-child(5) .nav-depth2-item:last-child .nav-depth2-link{
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  text-align:left !important;
  justify-content:flex-start !important;
  line-height:1.35 !important;
  max-width:150px !important;
}

.header .nav .nav-depth2-item:hover .nav-depth2-link{
  color:#8A5A0F !important;
  font-weight:700 !important;

  background:var(--nh-panel-hover-bg) !important;

  padding-left:1.3rem;

  transform:none;
  box-shadow:none;
}


/* ==========================================================================
   LANGUAGE
   ========================================================================== */

.header .lang-box,
.header .lang-box a{
  color:var(--nh-ink-soft) !important;

  font-weight:400 !important;
}

.header .lang-box{
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
}

.header .lang-box a{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-width:34px;
  min-height:34px;

  border-radius:6px;

  transition:
    color .18s ease,
    background-color .18s ease;
}

.header .lang-box a:hover{
  color:var(--nh-gold-dark) !important;

  background:rgba(201,169,97,.12);
}


/* ==========================================================================
   BUTTON
   ========================================================================== */

.header .btn-nav,
.header .btn-all-menu{
  border-radius:7px;

  background:transparent;

  transition:background-color .2s ease;
}

.header .btn-nav:hover,
.header .btn-all-menu:hover{
  background:rgba(201,169,97,.12);
}

.header .btn-nav span,
.header .btn-all-menu span{
  background-color:var(--nh-ink) !important;
}


/* ==========================================================================
   TEXT
   ========================================================================== */

.header .text-white{
  color:var(--nh-ink) !important;
}


/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media screen and (min-width:1024px){

  .header .nav .nav-depth1-item + .nav-depth1-item{
    margin-left:.10rem;
  }

}


/* ==========================================================================
   MOBILE / ASIDE — 원본 라이트 톤 유지 + 골드 포인트
   ========================================================================== */

.aside{
  background:
    linear-gradient(
      180deg,
      #F1F6F7 0%,
      #F8FAFA 100%
    );

  box-shadow:-18px 0 45px rgba(32,55,65,.13);
}


/* 모바일 1차 메뉴 */

.aside-bx .nav-depth1-link{
  position:relative;

  color:var(--nh-ink) !important;

  font-size:.95rem;

  font-weight:400 !important;

  letter-spacing:-.02em;
}


/* 모바일 활성 메뉴 (골드톤) */

.aside-bx .nav-depth1-link.on{
  color:var(--nh-gold-dark) !important;

  font-weight:400 !important;
}


/* 모바일 활성 라인 */

.aside-bx .nav-depth1-link.on::after{
  content:'';

  position:absolute;

  left:0;
  right:40%;

  bottom:.25rem;

  height:2px;

  border-radius:2px;

  background:var(--nh-gold);
}


/* 모바일 2차 메뉴 */

.aside-bx .nav-depth2{
  background:#F7F1E6 !important;

  border:1px solid rgba(201,169,97,.25);

  border-radius:9px;

  margin-top:.4rem;

  padding:.3rem 0;
}


/* 모바일 2차 메뉴 글씨 */

.aside-bx .nav-depth2-link{
  color:#4B5961 !important;

  font-size:.9rem;

  font-weight:400 !important;
}

.aside-bx .nav-depth2-link:hover{
  color:var(--nh-gold-dark) !important;
}


/* ==========================================================================
   MOBILE HEADER
   ========================================================================== */

@media screen and (max-width:1023px){

  .header{
    box-shadow:0 5px 18px rgba(32,55,65,.06);
  }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media screen and (prefers-reduced-motion:reduce){

  .header .logo a,
  .header .nav .nav-depth1-link,
  .header .nav .nav-depth1-link::before,
  .header .nav .nav-depth2-link,
  .header .lang-box a,
  .header .btn-nav,
  .header .btn-all-menu{
    transition:none !important;
  }

}