/* =========================================================
   HUBISLAB — GLOBAL CATEGORY BAR (fixed header + mega menu)
   Shared by index / about / technology / products /
            program / blog / community / contact
   NOTE: self-namespaced vars (--nv-*) so this file does not
         depend on, or collide with, each page's :root palette
         (style.css uses --navy:#13201f, index/about #0E2A47).
   ========================================================= */
:root{
  --navh:94px;
  --nv-navy:#0E2A47;
  --nv-blue:#2E5AAC;
  --nv-gray:#68727f;
  /* 대분류↔중분류 가름선 / 중분류끼리 세로 구분선 공용 헤어라인.
     한 곳에서 바꾸면 헤더·메가패널·서브바가 모두 따라온다. */
  --nv-line:#d5dce5;
}
html{scroll-padding-top:var(--navh);}

.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--navh);
  background:#fff;color:var(--nv-navy);border-bottom:1px solid var(--nv-line);
  transform:translateY(-100%);
  transition:transform .38s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,
             background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;}
.nav.show{transform:translateY(0);}
/* No drop shadow anywhere on the header or its panels, on any page and in any
   state. The header, its sub-category bar and the hover panel are separated by
   their hairline borders alone (manyo pattern) — a shadow landed on the bar
   below as a grey gradient. Kept as explicit resets so a shadow reintroduced
   further down the file, or by a page-level rule, cannot bring it back. */
.nav,
.nav.show,
.nav.has-subbar,
.nav.has-subbar.show,
.nav .mega,
.nav.has-subbar .mega{box-shadow:none;}

/* ---------------------------------------------------------
   TRANSPARENT AT TOP (GNI pattern)
   .at-top  = page is scrolled to the very top -> no background
   .on-dark = the hero behind the bar is dark  -> light-on-dark
   Set by assets/js/nav.js. Pages without a hero never get .at-top.
   --------------------------------------------------------- */
.nav.at-top{background:transparent;border-bottom-color:transparent;box-shadow:none;}

/* dark hero -> white logo + white menu.
   A soft top scrim guarantees contrast where the art turns pale
   (e.g. the beige side of about.html's model shot). */
.nav.at-top.on-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,26,45,.42),rgba(10,26,45,0));}
.nav.at-top.on-dark{color:#fff;text-shadow:0 1px 12px rgba(10,26,45,.28);}
.nav.at-top.on-dark .nav__logo img{filter:brightness(0) invert(1);}
.nav.at-top.on-dark .nav__item>a{color:#fff;}
.nav.at-top.on-dark .nav__item>a::after{background:#fff;}
.nav.at-top.on-dark .nav__btn{background:transparent;color:#fff;}
.nav.at-top.on-dark .nav__btn:hover{background:rgba(255,255,255,.16);color:#fff;}
.nav.at-top.on-dark .nav__item.is-current>a{color:#fff;}
.nav.at-top.on-dark .nav__item.is-current>a::after{background:#fff;}

/* light hero -> keep the brand colours, just drop the background.
   A soft top scrim keeps the menu readable over busy photography. */
.nav.at-top.on-light::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,0));}

/* the mega menu is always a solid panel, even while the bar is transparent */
.nav.at-top .mega{background:#fff;}
/* 패널은 항상 흰 배경이므로 다크 히어로 위에서도 라벨 색을 따로 덮어쓰지 않는다.
   예전의 `.nav.at-top.on-dark .mega .mega__links .n{color:#2b3647}` 는 평상시 색을
   이미 진하게 만들어 버려서, 개별 항목에 마우스를 올려도 더 진해지지 않았다.
   기본 #9aa4b0 → hover #1a1a1a 규칙(아래)이 모든 상태에서 그대로 살아있게 둔다. */

/* while a mega menu is open the bar must go solid or the panel looks detached */
.nav.at-top.mega-open{background:#fff;border-bottom-color:var(--nv-line);}
.nav.at-top.mega-open.on-dark{color:var(--nv-navy);}
.nav.at-top.mega-open.on-dark .nav__logo img{filter:none;}
.nav.at-top.mega-open.on-dark .nav__item>a{color:var(--nv-navy);}
.nav.at-top.mega-open.on-dark .nav__item>a::after{background:var(--nv-navy);}
.nav.at-top.mega-open.on-dark .nav__btn{background:transparent;color:#3a4658;}
.nav.at-top.mega-open.on-dark .nav__item.is-current>a,
.nav.at-top.mega-open .nav__item.is-current>a{color:var(--nv-blue);}
.nav.at-top.mega-open.on-dark .nav__item.is-current>a::after,
.nav.at-top.mega-open .nav__item.is-current>a::after{background:var(--nv-blue);}
.nav.at-top.mega-open.on-light::before,
.nav.at-top.mega-open.on-dark::before{opacity:0;}
.nav.at-top.mega-open.on-dark{text-shadow:none;}

@media (prefers-reduced-motion:reduce){ .nav{transition:none;} }
.nav__bar{max-width:1440px;height:100%;margin:0 auto;padding:0 clamp(20px,4vw,60px);
  display:flex;align-items:center;}
.nav a{text-decoration:none;}
.nav__logo{display:flex;flex-direction:column;justify-content:center;line-height:1;}
/* 바가 74 → 94px 로 커진 만큼 로고·메뉴·버튼도 같이 올린다.
   하나만 키우면 위아래 여백이 어긋나 바가 비어 보인다. */
.nav__logo{flex-shrink:0;}
.nav__logo img{height:38px;width:auto;max-width:none;flex-shrink:0;display:block;} /* 영문 메뉴가 길어도 로고가 눌리지 않게 */
.nav__menu{display:flex;align-items:stretch;height:100%;gap:clamp(12px,2vw,34px);flex:1;margin-left:clamp(32px,6vw,96px);}
.nav__item{position:relative;display:flex;align-items:center;height:100%;}
.nav__item>a{display:flex;align-items:center;height:100%;padding:0 8px;font-size:18.5px;font-weight:600;
  color:var(--nv-navy);letter-spacing:-.01em;transition:color .2s ease;position:relative;}
.nav__item>a::after{content:"";position:absolute;left:8px;right:8px;bottom:30px;height:2px;
  background:var(--nv-navy);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1);}
.nav__item:hover>a::after{transform:scaleX(1);}
/* current page indicator */
.nav__item.is-current>a::after{transform:scaleX(1);background:var(--nv-blue);}
.nav__item.is-current>a{color:var(--nv-blue);}
.nav__right{display:flex;align-items:center;gap:8px;flex:none;margin-left:clamp(16px,2vw,32px);}
/* 테두리 없는 아이콘 버튼. 알약형 보더를 걷어내고 크기를 키워 헤더가 덜 답답하게
   보이도록 했다. 클릭 가능하다는 신호는 hover 시의 옅은 원형 배경이 대신한다. */
.nav__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 14px;
  border:0;border-radius:999px;background:transparent;color:#3a4658;
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .18s ease,color .18s ease;}
.nav__btn:hover{background:#f2f5f9;color:var(--nv-navy);}
.nav__btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}
.nav__btn--icon{width:40px;padding:0;}
.nav__btn--icon svg{width:21px;height:21px;}

.lang{position:relative;}
.lang__menu{position:absolute;top:calc(100% + 9px);right:0;min-width:132px;background:#fff;border-radius:8px;
  box-shadow:0 12px 30px -10px rgba(14,42,71,.3);border:1px solid #e6ebf1;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s ease;}
.lang.open .lang__menu{opacity:1;visibility:visible;transform:none;}
.lang__menu a{display:block;padding:11px 16px;font-size:14px;color:#2b3647;border-bottom:1px solid #edf0f4;}
.lang__menu a:last-child{border-bottom:0;}
.lang__menu a:hover{background:#f2f5f9;}
.lang__menu a.on{font-weight:700;color:var(--nv-navy);}

.mega{position:fixed;left:0;right:0;top:var(--navh);background:#fff;
  border-bottom:1px solid var(--nv-line);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.24s cubic-bezier(.4,0,.2,1);}
.nav__item:hover .mega{opacity:1;visibility:visible;transform:translateY(0);}
/* set by nav.js — this category's sub-bar is already on the page, so its hover
   panel would just duplicate it */
.nav__item.owns-subbar:hover .mega{opacity:0;visibility:hidden;transform:translateY(-8px);}
/* Sub-menu only — no thumbnail, no "자세히 보기".
   The hover panel is drawn as the SAME full-width equal-column bar with hairline
   dividers that a section's own sub-category bar uses (.tp-tabs). Previously the
   hover produced a left-aligned text row while the page showed the divided bar,
   so the two read as two different navigation systems for the same links. They
   are now one control in two states: hovering previews the bar, landing on the
   page leaves it in place. Mirrors manyo's GNB. */
.mega__inner{max-width:none;margin:0;padding:0;}
.mega__links{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;}
.mega__links a{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(13px,1.3vw,19px) 10px;width:auto;position:relative;
}
/* 중분류끼리의 세로 구분선 — 대분류(헤더)와 중분류 사이 가름선과 같은 헤어라인(#edf1f6) */
.mega__links a + a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:24px;background:var(--nv-line);
}
.mega__links .n{
  display:block;font-size:clamp(12px,.9vw,15px);font-weight:700;letter-spacing:.04em;
  color:#9aa4b0;transition:color .2s ease;
}
.mega__links a:hover .n{color:#1a1a1a;}
/* The one-line descriptions belong on the page, not in a divided bar —
   they force the cells to wrap and bury the link names. */
.mega__links .d{display:none;}

.searchbar{position:fixed;top:var(--navh);left:0;right:0;z-index:99;background:#fff;border-bottom:1px solid #eef1f5;
  transform:translateY(-100%);opacity:0;visibility:hidden;
  transition:.3s cubic-bezier(.4,0,.2,1);
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;}
.searchbar.open{transform:none;opacity:1;visibility:visible;}
.searchbar form{max-width:1440px;margin:0 auto;padding:24px clamp(20px,4vw,60px) 8px;display:flex;gap:14px;align-items:center;}
.searchbar svg{width:20px;height:20px;stroke:var(--nv-navy);fill:none;stroke-width:2;flex:none;}
.searchbar input{flex:1;border:0;border-bottom:2px solid var(--nv-navy);padding:10px 2px;font-size:18px;font-family:inherit;color:var(--nv-navy);outline:none;background:transparent;}
.searchbar .close{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:#8b96a6;padding:4px 8px;}
.searchbar .close:hover{color:var(--nv-navy);}
.searchbar__kw{max-width:1440px;margin:0 auto;padding:6px clamp(20px,4vw,60px) 24px;display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;}
.searchbar__kw .kw-label{font-size:13px;font-weight:700;color:var(--nv-navy);margin-right:4px;}
.searchbar__kw a{font-size:14px;color:#5a6676;transition:color .18s ease;}
.searchbar__kw a:hover{color:var(--nv-blue);}

/* ---------- 자동완성 드롭다운 ----------
   ul.sb-ac 는 form 안에 들어가므로 form 을 기준 박스로 삼는다.
   (기준이 없으면 position:fixed 인 .searchbar 를 잡아 화면 전체로 퍼진다.)
   좌우는 입력줄과 같은 안쪽 여백에 맞춘다. */
.searchbar form{position:relative;}
/* 브라우저 기본 지우기 버튼 — 우리 닫기 버튼과 × 가 두 개로 보인다 */
.searchbar input::-webkit-search-cancel-button,
.searchbar input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;}
.searchbar .sb-ac{
  left:clamp(20px,4vw,60px);right:clamp(20px,4vw,60px);
  top:calc(100% - 6px);margin-top:0;
}
/* 검색어를 입력하는 동안에는 추천 검색 키워드 줄을 감춘다 —
   자동완성 목록과 겹쳐 두 개의 제안이 동시에 보이는 걸 막는다. */
.searchbar.typing .searchbar__kw{display:none;}

/* ---------- let the hero sit UNDER the transparent bar ----------
   These heroes were built to start below a solid 74px bar, so they reserve
   that space with margin-top / sticky top. With the bar transparent the
   reserved strip shows as a blank band, so reclaim it. nav.js zeroes the
   margin-top; the sticky offsets have to be undone here.
   .phero__pin keeps full-viewport height — its scrub maths reads
   pin.clientHeight, so the height must stay consistent with top:0. */
.phero__pin{top:0 !important;height:100vh !important;}
.page-hero{margin-top:0;}

/* ---------- fallback mobile panel ----------
   Built by nav.js for pages without main.js's .drawer (index, about). */
.nav__mobile{position:fixed;inset:0;z-index:200;background:#fff;color:var(--nv-navy);
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:96px clamp(22px,6vw,48px) 56px;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;}
.nav__mobile.open{transform:translateY(0);}
.nav__mobile-close{position:absolute;top:26px;right:clamp(20px,5vw,44px);
  background:none;border:0;font-size:32px;line-height:1;color:var(--nv-navy);cursor:pointer;padding:4px 8px;}
.nav__mobile nav{display:flex;flex-direction:column;}
.nav__mobile a{text-decoration:none;}
.nav__mobile .lv1{font-size:1.6rem;font-weight:700;color:var(--nv-navy);padding:16px 0 6px;letter-spacing:-.02em;}
.nav__mobile .lv2{font-size:1rem;font-weight:500;color:#5a6676;padding:6px 0 6px 14px;}
.nav__mobile .lv2:active{color:var(--nv-blue);}
@media (prefers-reduced-motion:reduce){ .nav__mobile{transition:none;} }

/* style.css hides the legacy `.nav` list under 860px
   (`@media(max-width:860px){.nav,.header-cta{display:none}}`).
   That selector also matches this bar, so re-assert it here. */
header.nav{display:block;}

/* ---------- mobile menu button ----------
   The desktop menu is hidden under 960px, so the bar needs its own way into
   the drawer that assets/js/main.js builds. Hidden on desktop. */
.nav__burger{display:none;width:34px;height:34px;padding:0;align-items:center;justify-content:center;
  border:1px solid #d7dee6;border-radius:999px;background:#fff;color:#3a4658;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;}
.nav__burger span{display:block;position:relative;width:15px;height:1.5px;background:currentColor;border-radius:2px;}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:15px;height:1.5px;background:currentColor;border-radius:2px;}
.nav__burger span::before{top:-5px;}
.nav__burger span::after{top:5px;}
.nav.at-top.on-dark .nav__burger{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;}

@media (max-width:960px){
  header.nav{display:block;}   /* beat style.css's 860px `.nav{display:none}` */
  .nav__menu{display:none;}
  /*
     가운데 메뉴가 사라지면 오른쪽 묶음을 끝으로 밀어 주던 것도 함께 사라진다.
     그대로 두면 아이콘이 왼쪽 여백(20px)보다 20px 더 안쪽에 서서 오른쪽만
     넓어 보였다. 영문 쪽은 1200px 에서 이미 이렇게 하고 있다 — 같게 맞춘다.
  */
  .nav__right{margin-left:auto;}
  .nav__burger{display:inline-flex;}
  .mega__inner{flex-direction:column;gap:20px;padding-left:0;}
  .mega__links{flex-direction:column;align-items:flex-start;gap:2px;}
}

/* 모바일: 주문목록 아이콘 추가로 헤더 우측이 화면 밖으로 밀리던 문제 — 인스타 숨기고 간격 축소.
   왼쪽 여백은 auto 로 둔다: 자리가 남으면 오른쪽 끝에 붙고(로고와 여백이 같아진다),
   모자라면 0 으로 줄어 밀려 나가지 않는다 — 고정값(8px·4px)은 둘 다 못 한다 */
@media (max-width:560px){
  .nav__right{gap:2px;margin-left:auto;}
  .nav__right #insta{display:none;}
}
/* 320px (아주 오래된 폰) — 로고 38px + 아이콘 넷이 31px 넘쳐 햄버거가 잘렸다.
   좌우 여백을 줄이고 로고를 조금 낮춰 들어가게 한다. 360px 이상은 손대지 않는다 */
@media (max-width:340px){
  .nav__bar{padding:0 12px;}
  .nav__logo img{height:31px;}
  .nav__btn{padding:0 6px;}
}
/* 375px 에서 햄버거가 6px 잘리던 것 — 좁은 폰에서는 아이콘 버튼 폭을 줄인다 */
@media (max-width:400px){
  .nav__right{margin-left:auto;}
  .nav__btn{padding:0 8px;}
  .nav__btn--icon{width:34px;padding:0;}
}

/* 중문: 한글용 word-break:keep-all 이 띄어쓰기 없는 중국어 문장을 한 줄로 묶어 모바일에서 넘치던 문제 */
html[lang^="zh"] *{word-break:normal!important;line-break:strict;}

/* 영문 메뉴(TECHNOLOGY·COMMUNITY 등)가 길어 1760px 이하에서 우측 아이콘(언어·주문목록·검색)이 화면 밖으로 밀리던 문제
   → 좁아질수록 메뉴 글자·간격을 줄이고, 1200px 이하에서는 햄버거 메뉴로 전환 */
@media (max-width:1760px){
  html[lang^="en"] .nav__item>a{font-size:clamp(14px,1.22vw,18.5px);padding:0 5px;}
  html[lang^="en"] .nav__menu{gap:clamp(4px,1vw,34px);margin-left:clamp(20px,2.6vw,96px);}
  html[lang^="en"] .nav__btn{padding:0 10px;}
  html[lang^="en"] .nav__btn--icon{padding:0;}
}
@media (max-width:1200px){
  html[lang^="en"] .nav__menu{display:none;}
  html[lang^="en"] .nav__burger{display:inline-flex;}
  html[lang^="en"] .nav__right{margin-left:auto;}
}