/* ======================================== Navigation Bar — Fixed Top + Mega Dropdown ======================================== */ /* 아이콘 폰트(Material Symbols) 로딩 전 리거처 텍스트(grid_view·desk 등) 노출 방지. site-tools.js가 폰트 준비 시 에 ms-ready 부여 → 그 전까지 아이콘 숨김 */ html:not(.ms-ready) .material-symbols-outlined { visibility: hidden !important; } .navbar { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height, 80px); z-index: 1000; background-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } /* Always white text — glass effect works on any background */ .navbar .navbar__logo { color: #fff; transition: color 0.4s ease; } .navbar .navbar__link { color: rgba(255,255,255,0.85); transition: color 0.4s ease; } .navbar .navbar__link:hover { color: #fc8505; } .navbar .navbar__link--active { color: #fff; } .navbar .navbar__icon-btn { color: rgba(255,255,255,0.85); transition: color 0.4s ease; } .navbar .navbar__icon-btn:hover { color: #fc8505; } /* Light background sections — dark text */ .navbar.navbar--light { background-color: rgba(255, 255, 255, 0.45); border-bottom-color: rgba(0, 0, 0, 0.06); } .navbar.navbar--light .navbar__logo { color: #18709c; } .navbar.navbar--light .navbar__link { color: #57534e; } .navbar.navbar--light .navbar__link:hover { color: #18709c; } .navbar.navbar--light .navbar__link--active { color: #18709c; } .navbar.navbar--light .navbar__link::after { background-color: #18709c; } .navbar.navbar--light .navbar__icon-btn { color: #2e3230; } .navbar.navbar--light .navbar__icon-btn:hover { color: #18709c; } .navbar--scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } .navbar--scrolled.navbar--light { background-color: rgba(255, 255, 255, 0.6); border-bottom-color: rgba(0, 0, 0, 0.08); } .navbar__inner { position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%; max-width: var(--max-width, 1536px); margin: 0 auto; padding: 0 var(--nav-px, 40px); } /* --- Left: Logo + Links --- */ .navbar__left { display: flex; align-items: center; gap: 48px; } .navbar__logo { display: inline-flex; align-items: center; transition: transform 0.15s ease; white-space: nowrap; line-height: 0; } .navbar__logo img { height: 44px; width: auto; display: block; user-select: none; -webkit-user-drag: none; } /* 두 로고 버전을 배경에 따라 토글 기본(어두운 배경) = 흰색 로고, .navbar--light = 파란 로고 */ .navbar__logo .navbar__logo-img--on-light { display: none; } .navbar--light .navbar__logo .navbar__logo-img--on-dark { display: none; } .navbar--light .navbar__logo .navbar__logo-img--on-light { display: block; } .navbar__logo:active { transform: scale(0.95); } .navbar__links { position: absolute; inset: 0; margin: auto; /* transform 없이 상하/좌우 중앙 (fixed 드롭다운 깨짐 방지) */ width: fit-content; height: fit-content; display: flex; align-items: center; gap: 0; font-size: 15px; } /* --- Nav Item (wrapper for link + dropdown) --- */ .navbar__item { position: relative; } .navbar__link { display: block; position: relative; color: #57534e; font-weight: 500; padding: 28px 16px; transition: color 0.3s ease; } .navbar__link::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 20px; height: 2px; background-color: #fc8505; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .navbar__link:hover { color: #18709c; } .navbar__item:hover .navbar__link::after, .navbar__link--active::after { transform: scaleX(1); } .navbar__link--active { color: #fc8505; font-weight: 600; } /* --- Right: Icon Buttons --- */ .navbar__right { display: flex; align-items: center; gap: 24px; } .navbar__icon-btn { padding: 8px; color: #2e3230; display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; transition: color 0.2s ease, transform 0.15s ease; } .navbar__icon-btn:hover { color: #18709c; } .navbar__icon-btn:active { transform: scale(0.95); } /* ======================================== Mega Dropdown ======================================== */ .mega-dropdown { position: fixed; top: var(--nav-height, 80px); left: 0; width: 100%; background: #ffffff; border-bottom: 1px solid #e7e5e4; box-shadow: 0 12px 40px rgba(46, 50, 48, 0.08); opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, visibility 0.4s ease; z-index: 999; } /* Show on hover */ .navbar__item:hover .mega-dropdown { opacity: 1; visibility: visible; clip-path: inset(0 0 0% 0); } /* Keep dropdown open when moving between link and dropdown */ .navbar__item:hover .navbar__link { color: #fc8505; } .navbar--light .navbar__item:hover .navbar__link { color: #18709c; } /* --- Consistent dropdown height --- */ .mega-dropdown__inner { display: flex; gap: 32px; max-width: var(--max-width, 1536px); margin: 0 auto; padding: 28px var(--nav-px, 40px) 28px; min-height: 340px; max-height: 82vh; overflow-y: auto; align-items: stretch; } /* --- Link Columns --- */ .mega-dropdown__columns { display: flex; gap: 16px; flex: 1; min-width: 0; } .mega-dropdown__col { flex: 1; min-width: 0; } .mega-dropdown__heading { font-size: 12px; font-weight: 700; color: #2e3230; margin-bottom: 8px; letter-spacing: 0.01em; } .mega-dropdown__col .mega-dropdown__heading:not(:first-child) { margin-top: 20px; } .mega-dropdown__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .mega-dropdown__list a { display: inline-block; font-size: 11.5px; font-weight: 500; color: #2e3230; transition: color 0.2s ease; padding: 1px 0; line-height: 1.4; word-break: keep-all; /* 한글이 단어 단위로 줄바꿈되게 — "(전동)" 중간 끊김 방지 */ overflow-wrap: normal; } .mega-dropdown__list a:hover { color: #18709c; } .mega-dropdown__more { color: #18709c !important; font-weight: 600 !important; text-decoration: underline; text-underline-offset: 3px; } /* ======================================== Cascade Product Dropdown (대분류 목록 → 호버 시 소분류 플라이아웃) ======================================== */ .mega-dropdown--cascade .mega-dropdown__inner { display: block; /* 기본 flex 해제 */ padding: 0 40px; min-height: 0; max-height: 80vh; overflow: visible; } .cat-cascade { position: relative; min-height: 84px; /* 기본=대분류 행(아이콘+라벨) 높이. 호버 시 JS가 소분류 높이만큼 늘림 */ transition: min-height 0.15s ease; } /* 대분류: 상단 가로 행 */ .cat-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; height: 84px; border-bottom: 1px solid #ececec; } .cat-menu__item { position: static; } .cat-menu__link { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #2e3230; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .cat-menu__link .cat-menu__icon { /* 특이도 ↑ — style.css의 .material-symbols-outlined(wght 400) 덮어쓰기 */ font-size: 27px; color: #555; transition: color 0.15s ease; font-variation-settings: 'FILL' 0, 'wght' 280, 'GRAD' 0, 'opsz' 24; /* 선 굵기 약 30% 얇게 (기본 400 → 280) */ } .cat-menu__label { line-height: 1; } .cat-menu__item:hover > .cat-menu__link { background: #f0f7f2; color: #18709c; } .cat-menu__item:hover > .cat-menu__link .cat-menu__icon { color: #18709c; } .cat-menu__arrow { display: none; } /* 대분류 행 아래로 펼쳐지는 소분류 패널 — 호버한 대분류 것만 표시 */ .cat-flyout { position: absolute; /* 시작점 = 상단 "전체 제품" 카테고리 버튼 위치 (--cat-align: JS 정렬 스크립트가 Products/카테고리 행 시작점으로 설정) */ left: var(--cat-align, 14px); right: 0; top: 84px; padding: 24px 0 28px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease; } .cat-menu__item:hover > .cat-flyout, .cat-menu__item.is-active > .cat-flyout { opacity: 1; visibility: visible; pointer-events: auto; } /* 단일 대분류 플라이아웃: 좌측 영문 타이틀 + 한글 부제목 / 우측 소분류 (JS가 left/width 지정) */ .cat-flyout { display: flex; gap: 36px; align-items: flex-start; } .cat-flyout__feature { flex-shrink: 0; width: 180px; } .cat-flyout__en { display: block; font-size: 30px; font-weight: 700; color: #1d1d1f; line-height: 1.12; letter-spacing: -0.01em; } .cat-flyout__ko { display: block; margin-top: 10px; font-size: 15px; color: #999; } .cat-flyout__sublist { list-style: none; margin: 0; padding: 0; width: 280px; columns: 2; column-gap: 26px; } .cat-flyout__sublist li { break-inside: avoid; margin-bottom: 11px; } .cat-flyout__sublist a { display: inline-block; font-size: 15px; color: #333; word-break: keep-all; } .cat-flyout__sublist a:hover { color: #18709c; } /* 우측: 시리즈 대표 이미지 슬라이더 — 세로형 카드 3개씩 가로 슬라이드 (products.json 자동 채움) */ .cat-slider { flex-shrink: 0; align-self: center; margin-left: auto; /* 오른쪽 끝으로 정렬 (좌우 밸런스) */ position: relative; width: 336px; /* 카드 104 × 3 + gap 12 × 2 */ } .cat-slider__viewport { overflow: hidden; width: 100%; } .cat-slider__track { display: flex; gap: 12px; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); } .cat-slide-card { position: relative; flex: 0 0 104px; height: 158px; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,0.12); } .cat-slide-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .cat-slide-card:hover img { transform: scale(1.06); } .cat-slide-card__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 10px; font-size: 11.5px; font-weight: 700; color: #fff; line-height: 1.25; background: linear-gradient(to top, rgba(0,0,0,0.78), transparent); } .cat-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.96); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 3px 10px rgba(0,0,0,0.14); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; color: #2e3230; font-size: 18px; line-height: 1; opacity: 0; transition: opacity 0.2s ease; } .cat-slider:hover .cat-slider__arrow { opacity: 1; } .cat-slider__arrow--prev { left: -13px; } .cat-slider__arrow--next { right: -13px; } .cat-slider__arrow.is-disabled { opacity: 0 !important; pointer-events: none; } /* "전체 제품": 전체 폭 + 블록(대분류별 그룹 칼럼) — flex/중앙정렬 해제 */ .cat-flyout--all { left: 0; right: 0; transform: none; width: auto; max-width: none; display: block; } .cat-flyout--all .cat-flyout__cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 24px; } .cat-flyout__group { width: 140px; } .cat-flyout__heading { margin: 0 0 9px; font-size: 15px; /* 임원용 가구의 "수체소"(소분류)와 동일 크기 */ font-weight: 700; color: #2e3230; letter-spacing: 0.01em; } .cat-flyout__list { list-style: none; margin: 0; padding: 0; } /* 좁은 화면: 칼럼 폭·간격 축소 → 8개 칼럼이 한 줄 유지 (의자·소파 줄바꿈 방지) */ @media (max-width: 1366px) { .cat-flyout--all .cat-flyout__cols { gap: 20px 10px; } .cat-flyout--all .cat-flyout__group { width: 126px; } } .cat-flyout--all .cat-flyout__list a { display: block; font-size: 13px; color: #555; padding: 1px 0; white-space: nowrap; } .cat-flyout--all .cat-flyout__list a:hover { color: #18709c; } /* --- Image Slider (Right Side — Carousel) --- */ .mega-dropdown__slider { position: relative; display: flex; align-items: center; width: calc(168px * 3 + 16px * 2); /* 3 items visible, 536px */ flex-shrink: 0; align-self: stretch; } .mega-dropdown__viewport { overflow: hidden; width: 100%; height: 100%; position: relative; } .mega-dropdown__track { display: flex; flex-direction: row; gap: 16px; height: 100%; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .mega-dropdown__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: #2e3230; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.2s ease; opacity: 0; visibility: hidden; } .mega-dropdown__slider:hover .mega-dropdown__arrow { opacity: 1; visibility: visible; } .mega-dropdown__arrow:hover { background: #fff; color: #18709c; transform: translateY(-50%) scale(1.05); } .mega-dropdown__arrow.is-disabled { opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .mega-dropdown__arrow--prev { left: -16px; } .mega-dropdown__arrow--next { right: -16px; } .mega-dropdown__slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } /* Back card (position 2) */ .mega-dropdown__slide[data-pos="2"] { transform: translateX(24px) scale(0.88); filter: blur(4px); opacity: 0.25; z-index: 0; } /* Middle card (position 1) */ .mega-dropdown__slide[data-pos="1"] { transform: translateX(12px) scale(0.94); filter: blur(2px); opacity: 0.45; z-index: 1; } /* Front card — active (position 0) */ .mega-dropdown__slide[data-pos="0"] { transform: translateX(0) scale(1); filter: blur(0); opacity: 1; z-index: 2; } .mega-dropdown__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .mega-dropdown__slide .mega-dropdown__promo-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 12px; font-size: 11px; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent); line-height: 1.35; opacity: 0; transition: opacity 0.4s ease; } .mega-dropdown__slide[data-pos="0"] .mega-dropdown__promo-label { opacity: 1; } /* Legacy promo support (will be replaced by slides) */ .mega-dropdown__promo { position: relative; display: block; border-radius: 8px; overflow: hidden; width: 168px; flex-shrink: 0; height: 284px; /* Explicit height (340px - 56px padding) to prevent flex collapse */ } .mega-dropdown__promo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .mega-dropdown__promo:hover img { transform: scale(1.04); } .mega-dropdown__promo-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); line-height: 1.35; } /* --- Compact dropdown (legacy) --- */ .mega-dropdown--compact .mega-dropdown__inner { padding: 20px var(--nav-px, 40px); } .mega-dropdown__list--horizontal { flex-direction: row !important; gap: 32px !important; } .mega-dropdown__list--horizontal a { font-size: 15px; font-weight: 500; color: #2e3230; padding: 4px 0; white-space: nowrap; } /* --- Backdrop overlay --- */ .mega-dropdown::before { content: ''; position: fixed; top: 100%; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.08); pointer-events: none; } /* ======================================== Mobile: hide links & dropdown ======================================== */ @media (max-width: 768px) { .navbar__links { display: none; } .navbar__left { gap: 0; } } /* ================================================================ 재배치: 로고 중앙 · 좌우 링크 분할 (배경색·텍스트색은 기존 글래스/배경적응 방식 그대로 — 오버라이드 없음) 좌: Products/Company · 중앙: 로고 · 우: Certification/Delivery/Support + 아이콘 ================================================================ */ /* 레이아웃: [좌그룹 flex:1] … [중앙로고] … [우그룹 flex:1] [아이콘] 좌·우 그룹을 동일 flex로 두어 로고가 두 링크 그룹 사이 정중앙에 오고, 링크가 로고를 침범하지 않도록(겹침 원천 차단) 함 */ .navbar__inner { justify-content: flex-start; } .navbar__group { display: flex; align-items: center; flex: 1 1 0; min-width: 0; } .navbar__group--left { justify-content: flex-end; } /* 링크를 로고 왼쪽 가까이 */ .navbar__group--right { justify-content: flex-start; } /* 링크를 로고 오른쪽 가까이 */ .navbar__logo { flex: 0 0 auto; margin: 0 32px; } .navbar__group .navbar__link { white-space: nowrap; } /* 제품소개 드롭다운: 카테고리 행을 왼쪽정렬 (JS가 Products 위치에 맞춰 padding-left 조정) */ .mega-dropdown--cascade .cat-menu { justify-content: flex-start; } /* Company·Support 드롭다운: 목록 열은 남는 폭을 채워(flex:1) 슬라이더를 오른쪽으로 밀고, 슬라이더는 고정폭 유지(공간 부족 시에만 축소) → 텍스트는 좌측 정렬, 이미지는 우측 */ .mega-dropdown__slider { flex-shrink: 1; min-width: 0; } /* 영문 라벨에 마우스 올리면 밑줄이 사라지고 그 자리로 한글이 올라옴 */ .navbar__link .nav-en { display: inline-block; } /* 현재 페이지 강조는 색상 변경만 (밑줄 제거) — 호버 시에도 밑줄 없음 */ .navbar__link::after { display: none; } .navbar__link .nav-kr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 21px); font-size: 11px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .navbar__item:hover .nav-kr { opacity: 0.8; transform: translate(-50%, 14px); } /* 그룹 안 링크는 정적 배치 (기존 절대중앙 해제) */ .navbar__group .navbar__links { position: static; inset: auto; margin: 0; width: auto; height: auto; } /* 중간 폭: 간격 축소로 중앙 로고와 링크 겹침 방지 */ @media (max-width: 1120px) { .navbar__inner { padding: 0 20px; } .navbar__group .navbar__link { padding-left: 11px; padding-right: 11px; } .navbar__group--right { margin-right: 14px; } .navbar__right { gap: 14px; } } @media (max-width: 768px) { .navbar__group--right { margin-right: 0; } } /* ================================================================ 우측 아이콘 3개 절대배치 — 로고+메뉴(정중앙)가 아이콘 폭에 영향받지 않게. 좌우 그룹이 전체 폭을 균등 분할하므로 로고가 화면 정중앙에 옴. ================================================================ */ .navbar__right { position: absolute; right: var(--nav-px, 40px); top: 50%; transform: translateY(-50%); } /* 좁은 화면: 링크·아이콘 겹침 방지를 위해 기존 흐름 배치로 복귀 (실측상 ~1160px부터 Catalog 링크가 아이콘 영역과 겹치기 시작 → 여유 두고 1180px) */ @media (max-width: 1180px) { .navbar__right { position: static; transform: none; } } /* ================================================================ 좁은 PC 화면 드롭다운 대응 (2026-07-22) - 슬라이더는 고정폭(flex-shrink:0)이라 창이 좁아지면 텍스트 칼럼만 쥐어짜여 이미지가 텍스트를 덮음 → 폭 구간별로 슬라이더를 축소하고 너무 좁으면 숨김. 링크 텍스트(word-break: keep-all)는 그대로 유지. ================================================================ */ /* 회사소개·고객지원 메가드롭다운 우측 이미지 슬라이더 */ @media (max-width: 1200px) { .mega-dropdown__slider { width: 400px; } } @media (max-width: 1050px) { .mega-dropdown__slider { width: 320px; } } @media (max-width: 920px) { .mega-dropdown__slider { display: none; } } /* 제품소개 캐스케이드: 소분류 플라이아웃 우측 카드 슬라이더 축소 (1024px에서 전 카테고리 13px, 900px에서 회의 테이블 45px 잘림 방지) */ @media (max-width: 1080px) { .cat-flyout { gap: 24px; } .cat-slider { width: 220px; } /* 카드 104 × 2 + gap 12 */ } @media (max-width: 880px) { .cat-slider { display: none; } } /* 제품소개 캐스케이드: 대분류 아이콘 행(전체 제품~소파)이 좁은 폭에서 두 줄로 감기는 문제 — 패딩·글자·아이콘을 단계적으로 줄여 한 줄 유지. (768px 이하는 PC 드롭다운이 숨겨지므로 769~900px 구간 대응) */ @media (max-width: 900px) { .cat-menu { gap: 2px 4px; } .cat-menu__link { padding: 8px 8px; font-size: 12.5px; } .cat-menu__link .cat-menu__icon { font-size: 24px; } } @media (max-width: 800px) { .cat-menu__link { padding: 8px 5px; font-size: 12px; } .cat-menu__link .cat-menu__icon { font-size: 21px; } }