/* =========================================================
   KALTEK Header (PC Mega + Mobile Accordion) — Responsive
========================================================= */
:root{
  --bar-h:90px;              /* 헤더 높이 */
  --pv-w:380px; --pv-h:260px;/* 프리뷰 이미지 */
  --pad-x:clamp(16px,4vw,60px);

  /* PC 고정 규격 */
  --cols:5; --gap:28px;      /* 우측 5열, 간격 */
  --mega-gap:40px;           /* 좌우 영역 간격 */
  --nav-w-xl:780px;          /* ≥1440px */
  --nav-w-lg:680px;          /* 1280–1439px */
  --nav-w-md:560px;          /* 1024–1279px */

  --mv-pad: clamp(24px, 10vh, 140px);
  --mv-gap: clamp(10px, 2.2vh, 18px);
}

/* ---------- Header Bar ---------- */
.kaltek-hd{position: fixed;top: 0;z-index:1000;background:transparent;color:var(--ink-inv);width: 100%;
  border-bottom:1px solid transparent;transition:background .18s,color .18s,border-color .18s}
.hd-bar{height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad-x);margin:0 auto;width:100%}
/* ===== 로고 기본 ===== */
/* responsive Kaltek logo */
.hd-logo{
  position:relative;
  display:inline-block;
  width:clamp(180px, 20vw, 306px);
  height:auto;
  line-height:0;
}
.hd-logo a{display:block; width:100%; height:100%}
.hd-logo .logo-img{
  display:block;
  width:100%;
  height:auto;
  transition:opacity .25s ease, filter .25s ease, transform .25s ease;
  image-rendering:auto;
}

/* 호버 미세 반응 */
.hd-logo a:hover .logo-img{opacity:.92;}

/* 스크롤·다크배경에서 색상 반전(단일 에셋 사용 시 임시 대안) */
.is-scrolled .hd-logo .logo-img,
.on-dark .hd-logo .logo-img{filter:brightness(0) invert(1)}

/* 해상도별 보정 */
@media (max-width:1200px){
  .hd-logo{width:clamp(170px, 22vw, 260px)}
}
@media (max-width:992px){
  .hd-logo{width:clamp(160px, 28vw, 220px)}
}
@media (max-width:768px){
  .hd-logo{width:clamp(148px, 34vw, 200px)}
}
@media (max-width:480px){
  .hd-logo{width:clamp(136px, 42vw, 186px)}
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion:reduce){
  .hd-logo .logo-img{transition:none}
}

/* --- 파일 2종 사용 시 권장 토글 방식 ---
   HTML에 흰색/유색 이미지를 각각 <img class="logo-img logo--light">,
   <img class="logo-img logo--dark">로 두고 opacity로 전환 */
.hd-logo .logo--dark{position:absolute; inset:0; opacity:0}
.on-dark .hd-logo .logo--light{opacity:0}
.on-dark .hd-logo .logo--dark{opacity:1}
.is-scrolled .hd-logo .logo--light{opacity:0}
.is-scrolled .hd-logo .logo--dark{opacity:1}
/* --------------------------------------- */


/* 기본(밝은 배경 위) */
header:not(.is-solid) .hd-logo .logo-img{
  content:url('/imgs/Kaltek_logo_white.png');
}

/* 스크롤 내리거나 마우스오버 시 색상 변경 */
header.is-solid .hd-logo .logo-img{
  content:url('/imgs/Kaltek_logo.png');
}

/* 컬러 반전(스크롤·호버 시 JS/또는 :has로 부여) */
.kaltek-hd.is-solid{background:var(--white);color:var(--ink);box-shadow: 0 0 2px 2px rgba(0,0,0,.28);}
.kaltek-hd.is-solid .gnb__link{color:var(--ink)}

/* ---------- GNB ---------- */
.gnb{display:none;justify-content:flex-end}
.gnb__list{display:flex;gap:var(--gap);margin:0;padding:0;list-style:none;align-items:center;
  width:var(--nav-w-xl);justify-content:space-between}
.gnb__item{position:relative;flex:1;text-align:center}
.gnb__link{display:inline-block;position:relative;padding:26px 0;font-size:20px;font-weight:500;
  color:var(--ink-inv);text-decoration:none;white-space:nowrap;transition:color .18s}
.gnb__link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:4px;border-radius:2px;background:transparent;transition:background .18s}
.gnb__item:hover>.gnb__link::after{background:var(--brand)}

/* ---------- Mega (PC) ---------- */
.mega{position:absolute;left:0;top:var(--bar-h);width:100%;background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.08);display:none}
.kaltek-hd.is-open .mega{display:block}              /* JS 사용 시 */
.kaltek-hd:has(.gnb:hover) .mega,
.kaltek-hd:has(.gnb:hover) .mega,
.kaltek-hd:has(.mega:hover) .mega{display:block}     /* :has 지원 시 */
.mega__inner{padding:24px var(--pad-x);margin:0 auto;width:100%;
  display:flex;align-items:flex-start;justify-content:space-between;}

/* Left preview: 겹치기+opacity 전환, 반응형 축소 */
.mega__left{position:relative;display:grid;grid-template:1fr/1fr;min-height:var(--pv-h);
  min-width:420px;max-width:min(46vw,700px);flex:0 1 700px}
.pv{grid-area:1/1;display:flex;gap:26px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s,visibility .18s}
.pv__txt{padding-top: 24px;}
.pv__thumb{width:min(var(--pv-w),42vw);height:var(--pv-h);flex-shrink:0;border-radius:16px;
  background:#d9d9d9 center/cover no-repeat;box-shadow:0 8px 18px rgba(0,0,0,.08)}
.pv__title{font-size:40px;line-height:1.15;font-weight:1000;color:var(--brand)}
.pv__desc{margin-top:12px;color:#374151;line-height:1.6;max-width:460px}

/* Right: 5열 고정, 절대 wrap 금지(가로 스크롤 허용) */
.mega__right{width:var(--nav-w-xl);flex:0 0 var(--nav-w-xl);margin-left:auto;
  display:flex;flex-wrap:nowrap;gap:var(--gap);align-content:flex-start;justify-content:flex-start;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.sm{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;text-align:center;
  flex:0 0 calc((var(--nav-w-xl) - (var(--cols) - 1) * var(--gap)) / var(--cols))}
.sm__head{font-weight:500;color:#2a2f3a;margin-bottom:12px;font-size: 18px;}
.sm li a{display:block;padding:7px 0;font-size:16px;line-height: 1.2;text-decoration:none;color:#3b3f46}
.sm li a:hover{color:var(--brand)}

/* Preview 표시: JS(data-active) 또는 :has로 매핑 */
.kaltek-hd[data-active="about"]    .pv--about,
.kaltek-hd[data-active="products"] .pv--products,
.kaltek-hd[data-active="equip"]    .pv--equip,
.kaltek-hd[data-active="notice"]   .pv--notice,
.kaltek-hd[data-active="contact"]  .pv--contact{opacity:1;visibility:visible;pointer-events:auto}

/* :has 기반(상·하위 모두 트리거) */
.kaltek-hd:has(.gnb--about:hover)    .pv--about,
.kaltek-hd:has(.mega__right .sm--about:hover)    .pv--about,
.kaltek-hd:has(.gnb--products:hover) .pv--products,
.kaltek-hd:has(.mega__right .sm--products:hover) .pv--products,
.kaltek-hd:has(.gnb--equip:hover)    .pv--equip,
.kaltek-hd:has(.mega__right .sm--equip:hover)    .pv--equip,
.kaltek-hd:has(.gnb--notice:hover)   .pv--notice,
.kaltek-hd:has(.mega__right .sm--notice:hover)   .pv--notice,
.kaltek-hd:has(.gnb--contact:hover)  .pv--contact,
.kaltek-hd:has(.mega__right .sm--contact:hover)  .pv--contact{opacity:1;visibility:visible;pointer-events:auto}

/* ---------- Breakpoints (PC 단계적 축소) ---------- */
/* 1280–1439px */
@media (max-width:1439.98px){
  .gnb__list{width:var(--nav-w-lg)}
  .mega__right{width:var(--nav-w-lg);flex-basis:var(--nav-w-lg)}
  .sm{flex-basis:calc((var(--nav-w-lg) - (var(--cols) - 1) * var(--gap)) / var(--cols))}
  .pv__title{font-size:34px}
  .pv__thumb{width:min(360px,42vw);height:230px;display: none;}
  .mega__left{max-width:min(44vw,560px)}
}
/* 1024–1279px: 좌측 크게 축소, 썸네일 숨김. 우측 5열 유지(가로 스크롤 가능) */
@media (max-width:1279.98px){
  .gnb__list{width:var(--nav-w-md)}
  .mega__right{width:var(--nav-w-md);flex-basis:var(--nav-w-md)}
  .sm{flex-basis:calc((var(--nav-w-md) - (var(--cols) - 1) * var(--gap)) / var(--cols))}
  .mega__left .pv__thumb{display:none}
  .mega__left{min-width:320px;max-width:480px}
}

/* ---------- Mobile (≤1024): 메가 숨김 + 오프캔버스 ---------- */
@media (max-width:1023.98px){
  .gnb{display:none}
  .mega{display:none}

  .mnav-btn{width:44px;height:44px;border:1px solid #d6d7dc;border-radius:8px;position:relative;display:inline-block;background:#fff}

  .mnav{position:fixed;inset:0;background:#fff;transform:translateY(100%);transition:.28s ease;z-index:120;display:flex;flex-direction:column;padding-bottom: 16vh;}
  #mnavToggle{display:none}
  #mnavToggle:checked ~ .mnav{transform:translateY(0)}
  .mnav__head{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;}
  .mnav__logo{font-weight:1000;font-size:24px;color:var(--brand)}
  .mnav__close{width:44px;height:44px;border:1px solid #d6d7dc;border-radius:8px;position:relative;background:#fff}
  .mnav__close::before,.mnav__close::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:#3b3f46}
  .mnav__close::before{transform:translate(-50%,-50%) rotate(45deg)}
  .mnav__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
  .mnav__body{padding:8px 12px 28px;overflow:auto;display: flex;flex-direction: column;justify-content: center;height: 100%;}
  .acc{}
  .acc>summary{list-style:none;cursor:pointer;font-size:24px;font-weight:900;padding:10px 8px;margin-top: 12px;text-align: center;}
  .acc[open]>summary{color:#111}
  .acc ul{padding:0;max-height:0;overflow:hidden;transition:max-height .25s}
  .acc[open] ul{max-height:420px}
  .acc li a{display:block;text-align:center;padding:9px 0;color:#747b85;font-size:18px;font-weight: 500;}
}

/* ---------- Optional preview images ---------- */
.pv--about    .pv__thumb{background-image:url('/imgs/hd_1.png')}
.pv--products .pv__thumb{background-image:url('/imgs/hd_2.png')}
.pv--equip    .pv__thumb{background-image:url('/imgs/hd_3.png')}
.pv--notice   .pv__thumb{background-image:url('/imgs/hd_4.png')}
.pv--contact  .pv__thumb{background-image:url('/imgs/hd_5.png')}


/* ===== GNB 표시 강제 + 색상 대비 핫픽스 ===== */
.gnb{
  display:flex !important;
  justify-content:flex-end;
}
.gnb__list{justify-content:space-between}

/* 헤더 배경과 글자색 기본값 정리 */
.kaltek-hd{background: transparent; color:var(--ink-inv, #fafafa)}
.gnb__link{color:var(--ink-inv, #fafafa)}
.hd-logo a{color:currentColor}

/* 스크롤/호버시(솔리드 모드) 색 반전 */
.kaltek-hd.is-solid{background:#fff; color:#111}
.kaltek-hd.is-solid .gnb__link{color:#111}
.kaltek-hd.is-solid .hd-logo a{color:var(--brand, #3045a5)}

/* 모바일에서만 숨김 */
@media (max-width:1023.98px){
  .gnb{display:none !important}
}

/* ===== PC/모바일 분리 강제 패치 ===== */

/* 1) 기존 호버-열림 규칙을 PC에만 한정 */
.kaltek-hd:not(.is-mobile):has(.gnb:hover) .mega,
.kaltek-hd:not(.is-mobile):has(.mega:hover) .mega{display:block}

/* 2) 모바일 가드: 메가/gnb 완전 비활성 */
.kaltek-hd.is-mobile .mega{display:none !important; pointer-events:none}
.kaltek-hd.is-mobile .gnb{display:none !important}
.kaltek-hd.is-mobile .mnav-btn{display:inline-block}

/* 3) PC 기본 노출 */
@media (min-width:1024px){
  .kaltek-hd .gnb{display:flex}
  .kaltek-hd .mnav-btn{display:none}
}

/* 4) 뷰포트·입력장치 기반 이중 차단 */
@media (max-width:1023.98px), (hover:none){
  .mega{display:none !important; pointer-events:none}
  .gnb{display:none !important}
  /* :has 기반 열림도 강제 차단 */
  .kaltek-hd:has(.gnb:hover) .mega,
  .kaltek-hd:has(.mega:hover) .mega{display:none !important}
}


/* ===== Mobile panel drops from TOP under the header ===== */
.kaltek-hd{z-index:300}            /* 헤더를 최상단으로 */
.mnav-btn{position:relative;z-index:350} /* X 버튼 항상 위 */

@media (max-width:1023.98px){
  /* PC 컴포넌트 차단 유지 */
  .gnb,.mega{display:none !important}

  /* 패널을 '헤더 아래'에 붙이고 위에서 내려오게 */
  #mnav.mnav{
    position:fixed;
    left:0; right:0; top:var(--bar-h);
    height:calc(100vh - var(--bar-h));
    background:#fff;
    transform:translateY(-150%);     /* 위로 감춰두기 */
    transition:transform .32s ease;   /* 위→아래로 슬라이드 */
    z-index:250;                      /* 헤더보다 낮게 */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  #mnav.mnav.is-open{ transform:translateY(0) }

  /* 패널 안 별도 헤더 숨김 → 기존 헤더만 사용 */
  .mnav__head{ display:none }

  /* 아코디언 바디 여백 */
  .mnav__body{ padding:12px 16px 28px }

  /* 햄버거 기본은 투명 배경, 바는 헤더 색상 상속 */
  .mnav-btn{
    appearance:none;border:0;background:transparent;
    width:46px;height:46px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background .2s ease, box-shadow .2s ease;
  }
  .mnav-btn__bar{
    position:absolute;left:50%;width:22px;height:2px;background:#fff;
    transform:translateX(-50%);
    transition:transform .28s ease, opacity .2s ease, background .2s ease;
  }
  .mnav-btn__bar:nth-child(1){top:16px}
  .mnav-btn__bar:nth-child(2){top:22px}
  .mnav-btn__bar:nth-child(3){top:28px}

  /* 스크롤/열림 시 헤더 반전되면 검정 바로 */
  .kaltek-hd.is-solid .mnav-btn__bar{ background:#111 }

  /* 클릭 시 X 애니메이션 */
  .mnav-btn.is-active{ background:#fff; }
  .mnav-btn.is-active .mnav-btn__bar:nth-child(1){ top:22px; transform:translateX(-50%) rotate(45deg) }
  .mnav-btn.is-active .mnav-btn__bar:nth-child(2){ opacity:0 }
  .mnav-btn.is-active .mnav-btn__bar:nth-child(3){ top:22px; transform:translateX(-50%) rotate(-45deg) }
}

/* 헤더와 햄버거를 모든 레이어 위로 */
.kaltek-hd{position:fixed; top:0; z-index:9999}
.hd-bar{position:relative; z-index:10000}        /* 버튼 보호 */
.mnav-btn{position:relative; z-index:10001}

/* PC 메가패널과 모바일 패널의 레이어 고정 */
.mega{z-index:9998}
#mnav.mnav{z-index:9997}   /* 헤더 아래, 페이지 요소 위 */

/* 숨김 상태의 패널은 포인터 차단(겹침 방지) */
#mnav:not(.is-open){pointer-events:none}

/* ① 모바일 기본 컬러: 하얀색 금지, 스크롤/열림 때만 반전 */
@media (max-width:1023.98px){
  .kaltek-hd{background:none; color:#fafafa}
  .kaltek-hd:not(.is-solid) .mnav-btn__bar{background:#fff}
  .kaltek-hd.is-solid{background:#fff; color:#111}
  .kaltek-hd.is-solid .mnav-btn__bar{background:#111}
}

/* ② 레이어 고정: 헤더 > 모바일패널 > 나머지 */
.kaltek-hd{position:fixed; top:0; z-index:100001}
.mnav-btn{position:relative; z-index:100002}

/* 모바일 패널은 헤더 아래에서 내려오고, 전체를 덮는 오버레이 포함 */
#mnav{
  position:fixed; left:0; right:0; top:0; bottom:0;
  padding-top:0;
  background:#fff;
  transform:translateY(-150%); transition:transform .32s ease;
  z-index:100000;              /* 대부분 요소 위 */
  overflow:auto; -webkit-overflow-scrolling:touch;
}
#mnav.is-open{ transform:translateY(0) }
/* 딤 오버레이 */
#mnav::before{
  content:""; position:fixed; inset:0; background:rgba(255,255,255,.4);
  z-index:-1; opacity:0; transition:opacity .2s ease;
}
#mnav.is-open::before{ opacity:1 }

/* ③ 모바일 타이포 축소 */
@media (max-width:1023.98px){
  .hd-logo a{font-size:32px}
  .acc__head{font-size:18px; padding:14px 6px}
  .acc__panel a{font-size:16px; padding:10px 8px}
}

/* ④ 데스크톱에서 모바일 요소 완전 숨김 */
@media (min-width:1024px){
  #mnav{display:none !important}
  .mnav-btn{display:none !important}
}




/*------------------*/
/*----sub-visual----*/
/*------------------*/
.sub-visual{
  z-index: 100;
  position:relative;
  height:clamp(220px, 28vw, 300px); /* 얇게 400px 내외 */
  background: var(--sub-visual) no-repeat center/cover;
  display:flex; align-items:flex-end;
  isolation:isolate; /* 오버레이 분리 */
}
.sub-visual::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.28); /* 가독용 딤 */
  z-index:0;
}
.sv-inner{
  width:min(1400px,92%);
  margin:0 auto;
  padding:clamp(20px,3vw,32px) 0;
  position:relative; z-index:1;
}
.sv-title{
  margin:0;
  font-weight:700;
  font-size:clamp(28px, 5vw, 44px);
  line-height:1.1;
  color:#fff;
  letter-spacing:-0.01em;
  /* 필요시 얇은 하단 라인 */
  /* border-bottom:2px solid rgba(255,255,255,.4); padding-bottom:8px; */
}

/* ===== Mobile header height override ===== */
@media (max-width:1023.98px){
  :root{
    --bar-h:56px;                 /* 기존 90px → 56px */
  }
  .hd-bar{
    height:var(--bar-h);
    padding:0 clamp(12px,4vw,20px);
  }
  /* 로고와 햄버거 약간 축소로 높이 체감 추가 감소 */
  .hd-logo{ width:clamp(128px, 36vw, 180px) }
  .mnav-btn{ width:40px; height:40px }
  .mnav-btn__bar:nth-child(1){ top:12px }
  .mnav-btn__bar:nth-child(2){ top:19px }
  .mnav-btn__bar:nth-child(3){ top:26px }

  /* 슬라이드 패널 위치는 변수에 연동됨(이미 작성됨) */
  #mnav.mnav{ top:var(--bar-h); height:calc(100vh - var(--bar-h)) }
}

/* 초소형 기기(≤375px)에서 더 낮게 */
@media (max-width:375px){
  :root{ --bar-h:52px }
}