/* BASIC css start */ /* ============================================================================ * 기본 상단 (header.1.css) — 어헤이(URHEY) * 인클리어 헤더를 base 로 만들었고, 색은 body.brand-urhey 토큰이 바꾼다. * ---------------------------------------------------------------------------- * 메이크샵 [디자인 > 상단/하단 디자인 > 기본 상단] 의 CSS 탭에 넣는다. * * 여기 있는 건 "히어로 위에서 헤더를 투명하게" 만드는 규칙뿐이다. * 나머지 스타일은 전부 공통 css-js 의 common.css(Tailwind 빌드본)가 담당한다. * * 동작 : header.1.js 의 IntersectionObserver 가 [data-hero] 를 감시해 * 에 data-over-hero 를 붙였다 뗀다. 전환은 전부 아래 CSS 가 한다. * → 히어로 위 = 투명 / 히어로를 벗어나면 = 흰 배경 (자사몰과 동일) * * ※ 기존 운영 스킨의 header.1.css(리셋 + 구 마크업용 스타일)는 쓰지 않는다. * 구 마크업(#hdWrap, #header, .right_quick ...)이 사라졌으므로 대부분 죽은 규칙이고, * 전역 리셋(html,body,div{margin:0}...)은 우리 CSS와 겹친다. * ========================================================================== */ /* ── 1. 히어로가 없는 페이지에서는 프로모 띠를 감춘다 ─────────────── 자사몰은 홈에서만 프로모를 띄운다(isHome). 메이크샵엔 "메인 페이지"를 가리키는 치환코드가 없어, 히어로 존재 여부로 대신 판별한다. :has() 미지원 브라우저에서는 규칙 자체가 무효 → 항상 노출(안전한 쪽). */ body:not(:has([data-hero])) #nvPromo { display: none; } /* ── 2. 히어로는 헤더+프로모 밑으로 끌어올린다 ───────────────────── 이래야 반투명 헤더/프로모 뒤로 영상이 비친다. 자사몰은 main 에 음수 마진을 줬지만, 메이크샵은 본문 래퍼 구조가 페이지마다 달라 히어로 자신이 끌어올리도록 했다. */ [data-hero] { margin-top: calc(-1 * (var(--header-height-mobile) + 44px)); } @media (min-width: 768px) { [data-hero] { margin-top: calc(-1 * (var(--header-height-mobile) + 48px)); } } /* ── 3. 투명 ↔ 프로스트 전환을 부드럽게 ─────────────────────────── */ #nvHeader { transition: background-color .28s ease, box-shadow .28s ease, -webkit-backdrop-filter .28s ease, backdrop-filter .28s ease; } #nvHeader img { transition: filter .28s ease; } /* ── 3a. 히어로 위(최상단) : 헤더 투명 ─────────────────────────── */ html[data-over-hero] #nvHeader { background: transparent !important; border-bottom-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 텍스트·아이콘은 검정 + 흰 글로우 (영상이 밝은 톤이라 검정이 대비가 좋다) */ html[data-over-hero] #nvHeader a, html[data-over-hero] #nvHeader button { color: #111; text-shadow: 0 1px 10px rgba(255, 255, 255, 0.55); } /* 로고 PNG 는 색을 뺄 수 없으니 brightness(0) 으로 완전 검정 처리 */ html[data-over-hero] #nvHeader img { filter: brightness(0) drop-shadow(0 1px 8px rgba(255, 255, 255, 0.55)); } /* ── 3b. 스크롤 시작 시 : 헤더 프로스트(흰색 반투명 + 블러 + 쉐도우) ────── 히어로 페이지에서 스크롤이 조금이라도 내려가면 data-over-hero 대신 data-scrolled 가 붙는다(header.js). 로고/텍스트는 기본(네이비/정상)으로 복귀. ※ 자사몰은 "히어로를 완전히 벗어날 때" 흰색이었지만, 여기선 스크롤 시작 즉시 프로스트. */ html[data-scrolled] #nvHeader { background: rgba(255, 255, 255, 0.82) !important; border-bottom-color: transparent !important; -webkit-backdrop-filter: blur(12px) saturate(1.3) !important; backdrop-filter: blur(12px) saturate(1.3) !important; box-shadow: 0 6px 24px -10px rgba(17, 24, 39, 0.14) !important; } /* ── 4. 히어로 위 : 드롭다운을 흰 카드 → 반투명 유리로 ─────────── */ /* 히어로 위: 드롭다운을 흰 카드 → 반투명 유리로. 흰 배경은 .nv-dd 가 아니라 그 안쪽 카드(.nv-dd-card)에 있고, 그 배경/테두리는 Tailwind important 유틸이라 여기서도 !important 로 덮는다. */ html[data-over-hero] .nv-dd-card { background-color: rgba(255, 255, 255, 0.42) !important; border-color: rgba(255, 255, 255, 0.55) !important; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.22) !important; -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } /* ── 5. 모바일 드로어가 열리면 투명 해제 ─────────────────────────── 드로어는 흰 패널이라, 투명 상태 그대로면 헤더 글자가 묻힌다. */ html[data-over-hero] body.nv-drawer-open #nvHeader { background: var(--color-page-bg) !important; border-bottom-color: var(--color-line-base) !important; } html[data-over-hero] body.nv-drawer-open #nvHeader a, html[data-over-hero] body.nv-drawer-open #nvHeader button { color: inherit; text-shadow: none; } html[data-over-hero] body.nv-drawer-open #nvHeader img { filter: none; } /* ── 3a-1. 모바일 : 히어로 위 헤더를 흰색으로 ──────────────────────── 데스크톱은 밝은 히어로 영상 위라 검정(#111)이 대비가 좋지만, 모바일은 히어로 이미지가 화면을 꽉 채워 어둡게 깔리므로 흰색이 낫다. 가독성은 흰 글로우 대신 옅은 검정 그림자로 잡는다. 드로어가 열린 상태(흰 패널)는 제외 — 그때는 아래 5번 규칙이 맡는다. */ @media (max-width: 767px) { /* ⚠️ 헤더 아이콘 버튼은 Tailwind 색 유틸(text-[color:var(--color-text-sub)])을 달고 있고 novels.css 는 utilities 를 important 로 뽑는다. 그래서 !important 로 덮어야 한다. */ html[data-over-hero] body:not(.nv-drawer-open) #nvHeader a, html[data-over-hero] body:not(.nv-drawer-open) #nvHeader button, html[data-over-hero] body:not(.nv-drawer-open) #nvHeader button svg, html[data-over-hero] body:not(.nv-drawer-open) #nvHeader a svg, html[data-over-hero] body:not(.nv-drawer-open) #nvHeader a span { color: #fff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); } /* 로고 PNG : brightness(0) 로 검게 만든 뒤 invert(1) 로 흰색 전환 */ html[data-over-hero] body:not(.nv-drawer-open) #nvHeader img { filter: brightness(0) invert(1) drop-shadow(0 1px 10px rgba(0, 0, 0, .45)); } /* 장바구니 수량 배지는 브랜드 배경 + 흰 글자를 그대로 유지 */ html[data-over-hero] body:not(.nv-drawer-open) #nvHeader .nv-cart-badge, html[data-over-hero] body:not(.nv-drawer-open) #nvHeader a span[class*="bg-"] { text-shadow: none; } } /* ── 5. 검색 모달 ────────────────────────────────────────────────── ⚠ 배경 함정 : #nvSearch 는 class="nv" 를 갖는데, novels.css 의 :where(.nv){background-color:var(--color-page-bg)} 가 걸린다. fixed inset-0 이라 화면 전체가 불투명해지고, 그 위에 딤이 얹히면 "균일한 회색"이 되어 뒤 페이지가 통째로 사라진다. 마크업의 bg-transparent 와 아래 규칙이 이중 안전장치다. */ #nvSearch { background-color: transparent; } /* 패널 — 상자 느낌을 줄이고 여백과 그림자로 띄운다 */ #nvSearch .nv-search-panel { background: var(--color-card-bg); border-radius: 24px; padding: 54px 34px 28px; box-shadow: 0 40px 90px -30px rgba(16, 24, 40, .5), 0 2px 10px rgba(16, 24, 40, .05); } /* 등장 — 딤은 페이드, 패널은 살짝 올라오며 뜬다. ⚠ 가로 중앙은 Tailwind 의 -translate-x-1/2 가 잡는데, v4 는 이걸 transform 이 아니라 translate 속성으로 낸다. keyframes 에서 transform 에 -50% 를 또 주면 두 번 밀려 패널이 왼쪽으로 튄다. → 여기서는 세로 이동과 확대만 다룬다. */ #nvSearch:not(.hidden) .nv-search-dim { animation: nvSchDim .26s ease both; } #nvSearch:not(.hidden) .nv-search-panel { animation: nvSchIn .34s cubic-bezier(.16, 1, .3, 1) both; } @keyframes nvSchDim { from { opacity: 0 } to { opacity: 1 } } @keyframes nvSchIn { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: translateY(0) scale(1) } } /* 닫기 — 패널 안 우측 상단. ⚠ 패널 위쪽 여백(padding-top)이 충분해야 한다. 여백을 줄이면 바로 아래 검색 버튼과 자리가 겹친다(예전에 14px 겹쳤다). 패널 밖으로 빼는 방법도 써봤지만 헤더 메뉴 위에 얹혀 어색했다. */ #nvSearch .nv-search-x { position: absolute; top: 13px; right: 13px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: background-color .16s ease, color .16s ease; } #nvSearch .nv-search-x:hover { background: rgba(16, 24, 40, .06); color: var(--color-text-main); } #nvSearch .nv-search-x svg { width: 17px; height: 17px; } /* 메이크샵 form_search 는
검색 폼 까지 함께 찍는다. fieldset 기본 테두리와 legend 글자가 그대로 보이므로 지운다. legend 는 display:none 대신 스크린리더용으로 남긴다(폼 라벨). */ #nvSearch form, #nvSearch fieldset { display: block; width: 100%; margin: 0; padding: 0; border: 0; min-width: 0; } #nvSearch legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* 입력 줄 — 테두리 상자가 아니라 '밑줄 한 줄'. 상자를 없애면 입력 글자가 주인공이 되고 훨씬 가벼워 보인다. */ #nvSearch .nv-search-field { display: flex; align-items: center; gap: 13px; padding: 6px 0 14px; border-bottom: 1.5px solid var(--color-line-base); transition: border-color .2s ease; } #nvSearch .nv-search-field:focus-within { border-bottom-color: var(--color-brand-blue); } #nvSearch .nv-search-ico { width: 21px; height: 21px; flex: 0 0 auto; color: var(--color-text-muted); transition: color .2s ease; } #nvSearch .nv-search-field:focus-within .nv-search-ico { color: var(--color-brand-blue); } /* 메이크샵이 찍어내는 입력칸(.MS_search_word) — 기본 테두리·여백을 걷어낸다. 클래스를 바꿀 수 없어 후손 선택자 + !important 로 눌러야 한다. */ #nvSearch .nv-search-field input { flex: 1 1 auto; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--color-text-main); } #nvSearch .nv-search-field input::placeholder { color: var(--color-text-muted); font-weight: 400; letter-spacing: 0; } /* 검색 버튼 — 밑줄 줄 안에 들어가는 작은 알약 */ #nvSearch .nv-search-go { flex: 0 0 auto; display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; background: var(--color-button-primary-bg); color: var(--color-button-primary-text); transition: filter .16s ease, transform .12s ease; } #nvSearch .nv-search-go:hover { filter: brightness(1.12); } #nvSearch .nv-search-go:active { transform: translateY(1px); } /* 인기 검색어 — 테두리 알약 대신 옅은 배경 칩. 훨씬 가볍다. */ #nvSearch .nv-search-hot { margin-top: 22px; } #nvSearch .nv-search-hot-t { margin: 0 0 11px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--color-text-muted); } #nvSearch .nv-search-hot ul { display: flex; flex-wrap: wrap; gap: 7px; } /* ⚠ --color-page-bg / --color-card-bg 는 둘 다 #ffffff 다. 토큰을 쓰면 흰 패널 위에서 칩이 사라져 글자만 떠 보인다. 브랜드색을 아주 옅게 깔아 칩 모양이 남게 한다. */ #nvSearch .nv-search-hot .nv-tag { border: 0; border-radius: 999px; padding: 8px 14px; font-size: 13px; background: rgba(var(--color-brand-rgb), .055); color: var(--color-text-sub); } #nvSearch .nv-search-hot .nv-tag:hover { background: var(--color-brand-blue); color: var(--color-text-inverse); } @media (max-width: 520px) { #nvSearch .nv-search-panel { padding: 48px 20px 22px; border-radius: 18px; } #nvSearch .nv-search-field { gap: 10px; padding-bottom: 12px; } #nvSearch .nv-search-ico { width: 18px; height: 18px; } #nvSearch .nv-search-field input { font-size: 17px; } #nvSearch .nv-search-go { height: 33px; padding: 0 14px; font-size: 12.5px; } } /* BASIC css end */