@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap'); /* ========================================================================= ENVY 헤더 / 푸터 (전역) — Frame 492 ========================================================================= */ :root { --envy-brand: #A10818; /* ENVY 로고 레드 (시안 Group41 #A10818) */ --envy-footer-bg: #F3F0EA; /* 푸터 크림 */ --envy-chrome-line: #ececec; /* ENVY 메인 그린 토큰 (CTA·강조 공통 출처) */ --envy-green-bright: #5BB233; /* 브랜드 CTA 그린 (바로구매 버튼색) */ --envy-green: #4f8a3d; /* 진한 그린 (호버/액티브) */ } /* ========================================================================= 라운드7 — 남색(#046bd2) 전역 → ENVY 메인 그린으로 교체 ------------------------------------------------------------------------ Astra 전역색 토큰을 그린으로 재정의. Astra는 동적CSS로 `:root{--ast-global-color-0:#046bd2;...}` 를 인라인 출력하므로(소스 순서상 우리 외부 스타일시트보다 뒤), 동일 `:root` 특이성으로는 못 이긴다. 또 `:root`(0,0,1,0)는 `body`(0,0,0,1)보다 특이성이 높아 body 셀렉터로도 못 덮는다 → 커스텀 프로퍼티 값에 !important 로 확정 우승. - --ast-global-color-0: 남색 #046bd2 → 메인 그린 #5BB233 (링크/담기버튼/페이지네이션/체크박스/skip-link) - --ast-global-color-1: 호버 진청 #045cb4 → 진한 그린 #4f8a3d - --ast-global-color-2 (#1e293b 본문 거의-검정)는 남색 아님 → 미터치. ========================================================================= */ :root { --ast-global-color-0: #5BB233 !important; /* 남색 #046bd2 → ENVY 메인 그린 */ --ast-global-color-1: #4f8a3d !important; /* 호버 진청 #045cb4 → 진한 그린 */ } body { font-family: 'Pretendard', 'Pretendard Variable', 'Noto Sans KR', -apple-system, sans-serif; } /* 한국어 어절 단위 줄바꿈 — 좁은 폭에서 "순간에"→"순간/에", "선별한"→"선별/한", 상품명 "오/렌지"처럼 단어 중간이 끊기던 것 방지(모바일 전 페이지 공통). (2026-07-08 모바일점검 M3) */ body { word-break: keep-all; } /* 콘텐츠 폭 1260 중앙 (Frame 564: 1920에서 좌우 여백 330 = 콘텐츠 330~1590) */ .envy-wrap { max-width: 1300px; margin: 0 auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } /* ── 헤더 (Frame 564: 총 120px = 위17 + 1행36 + 간격14 + 2행36 + 아래17) ── */ /* 헤더 섹션 바로가기 클릭 시 부드러운 스크롤 (홈 앵커 이동) */ html { scroll-behavior: smooth; } .envy-header { background: #fff; border-bottom: 1px solid var(--envy-chrome-line); position: relative; z-index: 50; } /* 1행: 로고(좌) + 아이콘(우) */ .envy-header__top { display: flex; align-items: center; justify-content: space-between; height: 36px; margin-top: 17px; } /* 로고 73×20 검정 볼드 산세리프 */ .envy-logo { font-family: 'Pretendard', 'Pretendard Variable', -apple-system, sans-serif; font-size: 27px; font-weight: 800; letter-spacing: 2px; color: #111; text-decoration: none; line-height: 1; } .envy-logo:hover { color: #111; opacity: .8; } /* 아이콘 30×30, 간격 24 */ .envy-header__icons { display: flex; align-items: center; gap: 24px; } .envy-ico { background: none; border: 0; padding: 0; color: #1a1a1a; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; position: relative; } .envy-ico:hover { color: var(--envy-green-bright, #5BB233); } /* 장바구니 배지 18px 초록 #407F3F */ .envy-cart-badge { position: absolute; top: -3px; right: -5px; background: #407F3F; color: #fff; font-size: 11px; font-weight: 700; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; } /* 2행: 카테고리+메뉴(좌 묶음) + 검색창(우) */ .envy-header__bar { display: flex; align-items: center; justify-content: space-between; height: 36px; margin-top: 14px; margin-bottom: 17px; } /* 카테고리+메뉴 좌측 묶음, 항목 간격 38 */ .envy-catnav { display: flex; align-items: center; gap: 38px; } .envy-catbtn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font-size: 16px; font-weight: 600; color: #000; padding: 0; line-height: 1; } .envy-catbtn__lines { width: 22px; height: 15px; display: inline-block; flex: 0 0 auto; background: linear-gradient(currentColor, currentColor) left top, linear-gradient(currentColor, currentColor) left center, linear-gradient(currentColor, currentColor) left bottom; background-size: 100% 2px; background-repeat: no-repeat; } /* 메뉴 항목 500/16 #000 (home.css .envy-nav 충돌과 무관: .envy-catnav 스코프) */ .envy-header .envy-catnav .envy-nav__item { font-size: 16px; font-weight: 500; color: #000; text-decoration: none; padding: 0; line-height: 1; opacity: 1; } .envy-header .envy-catnav .envy-nav__item:hover { color: var(--envy-green-bright, #5BB233); } .envy-header .envy-catnav .envy-nav__item.is-active { font-weight: 700; } /* ── 카테고리 드롭다운 (호버 + 클릭 겸용) — product_cat 자동 노출 ── */ .envy-catmenu { position: relative; } .envy-catbtn__caret { flex: 0 0 auto; transition: transform .18s ease; } .envy-catmenu:hover .envy-catbtn__caret, .envy-catmenu.is-open .envy-catbtn__caret { transform: rotate(180deg); } .envy-catdrop { position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 12px; min-width: 200px; padding: 8px 0; background: #fff; border: 1px solid #ececec; border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .10); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; } /* 상단 초록 포인트 라인 */ .envy-catdrop::before { content: ""; position: absolute; top: -1px; left: 16px; right: 16px; height: 3px; background: var(--envy-green-bright, #5BB233); border-radius: 3px; } /* 버튼↔패널 사이 투명 브릿지 (호버가 gap에서 끊기지 않게) */ .envy-catdrop::after { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .envy-catmenu:hover .envy-catdrop, .envy-catmenu.is-open .envy-catdrop { opacity: 1; visibility: visible; transform: translateY(0); } .envy-catdrop__item { display: block; padding: 11px 22px; line-height: 1.2; white-space: nowrap; font-size: 15px; font-weight: 500; color: #222; text-decoration: none; transition: color .12s, background-color .12s; } .envy-catdrop__item:hover { color: var(--envy-green-bright, #5BB233); background: #f6faf2; } .envy-catdrop__item.is-active { font-weight: 700; color: var(--envy-green-bright, #5BB233); } /* 검색창 280×36 r8, placeholder #94A3B8/13, 초록 돋보기 16 */ .envy-search { display: flex; align-items: center; width: 280px; height: 36px; border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden; flex: 0 0 auto; } .envy-search input { flex: 1; border: 0; outline: 0; padding: 0 16px; font-size: 13px; background: transparent; height: 100%; color: #333; } .envy-search input::placeholder { color: #94A3B8; } .envy-search button { width: 40px; height: 100%; border: 0; background: none; color: var(--envy-green-bright, #5BB233); cursor: pointer; display: flex; align-items: center; justify-content: center; } /* ── 푸터 (시안 Frame 290): 단일 블록 + 약관 링크 + 사업자정보 + 인스타 ── */ .envy-footer { background: var(--envy-footer-bg); margin-top: 80px; } .envy-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px 0 60px; } .envy-footer__main { min-width: 0; } .envy-logo--footer { font-family: 'Pretendard', 'Pretendard Variable', -apple-system, sans-serif; font-size: 36px; font-weight: 800; letter-spacing: 1px; color: #111; line-height: 1; margin: 0 0 24px; } .envy-footer__policy { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .envy-footer__policy a { font-family: 'Pretendard', 'Pretendard Variable', sans-serif; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -1px; color: #555; text-decoration: none; } .envy-footer__policy a:hover { color: #111; } .envy-footer__policy span { color: #cfc9bf; } .envy-footer__biz { font-family: 'Pretendard', 'Pretendard Variable', sans-serif; margin: 8px 0 0; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; color: #8a857c; } .envy-footer__biz span { color: #cfc9bf; margin: 0 6px; } .envy-footer__sns { flex: 0 0 auto; } .envy-footer__sns a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #e5e1d8; color: #555; transition: background-color .15s, color .15s; } .envy-footer__sns a:hover { background: var(--envy-green-bright, #5BB233); color: #fff; } /* 반응형 */ @media (max-width: 900px) { .envy-wrap { padding-left: 16px; padding-right: 16px; } /* height:36px 고정이면 catnav가 아래 줄로 wrap할 때 바 밖으로 삐져나와 결제/마이페이지 제목과 겹침 → auto로 풀어 헤더가 wrap된 행을 담게. (2026-07-08 모바일점검 M1) */ .envy-header__bar { flex-wrap: wrap; gap: 14px; height: auto; } .envy-nav { order: 3; width: 100%; overflow-x: auto; gap: 18px; } .envy-search { width: 100%; order: 2; } .envy-footer__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 0; } /* 카테고리바: 이제 2행 항목이 [카테고리 드롭다운]+[베스트] 2개뿐 → 가로스크롤 불필요. overflow를 풀어(visible) 절대배치 드롭다운 패널이 잘리지 않게 한다. (구: 7항목 가로스크롤 칩 2026-07-08 C2 → 드롭다운 개편으로 폐지 2026-07-27) */ .envy-catnav { order: 3; width: 100%; flex-wrap: nowrap; overflow: visible; gap: 24px; } .envy-catnav .envy-nav__item, .envy-catnav .envy-catbtn { flex: 0 0 auto; white-space: nowrap; } } /* 회원가입 동의 항목 (2026-08-12) — 질의서 Q41(만14세 필수)·Q45(마케팅 선택) */ .envy-consent { margin: 18px 0 10px; padding: 14px 16px; background: #fafaf8; border: 1px solid #e8e6e1; border-radius: 8px; } .envy-consent__row { margin: 0 0 8px; font-size: 14px; line-height: 1.5; } .envy-consent__row:last-of-type { margin-bottom: 0; } .envy-consent__row label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; color: #333; } .envy-consent__row input[type="checkbox"] { margin: 2px 0 0; flex: 0 0 auto; } .envy-consent__row b { font-weight: 700; color: #1a1a1a; } .envy-consent__note { margin: 10px 0 0; font-size: 12px; color: #8a867e; line-height: 1.5; } /* ============================================================ 예약 구매(사전예약) 배지 · 발송예정일 (2026-08-12, 1단계) ⚠️ 시안 없음 — 기존 토큰(--envy-green 계열)으로 임시 구성. 시안 확정 시 색/라운드/사이즈만 교체하면 되도록 토큰만 사용. ============================================================ */ .envy-preorder-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; } .envy-preorder-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 4px; background: var(--envy-green, #4f8a3d); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: nowrap; } .envy-preorder-ship { font-size: 14px; color: var(--envy-sub, #666); line-height: 1.4; } .envy-preorder-ship b { font-weight: 700; color: var(--envy-ink, #1d1f1c); } /* 카드(목록·추천·랭킹) — 우상단. ⚠️ 좌상단은 쓰지 않는다: 상품 사진 자체에 인증마크(Korea 공식스마트몰 등)가 박혀 있는 경우가 있어 겹친다(2026-08-12 실측, #122 엔비 사과 기프트세트). */ .envy-preorder-badge--card { position: absolute; z-index: 2; top: 8px; right: 8px; height: 22px; padding: 0 8px; font-size: 11px; pointer-events: none; } /* 타임세일 타이머가 우상단을 이미 쓰는 카드에서는 그 아래로 내린다. */ .envy-card__timer ~ .envy-preorder-badge--card { top: 46px; } /* 2026-08-16 (2단계 S1) — 단계별 배지 변형. ⚠️ 시안 없음(SPEC 6-5). 새 색을 만들지 않고 기존 토큰만 재배치한다. --soon(시작 전 티저) = 진한 초록 / --ended(예약 종료) = 회색. */ .envy-preorder-badge--soon { background: var(--envy-green-d, #3f7531); } .envy-preorder-badge--ended { background: var(--envy-gray, #8a8f88); } /* ============================================================ 예약 구매 — 2단계 S4 (격리 결제) ============================================================ */ /* 확정 7: 예약상품은 일반 장바구니와 섞지 않는다 → 접수중(open)이면 「장바구니」 버튼을 감춘다. L0 사다리: 표시는 CSS(3칸)에서 끝낸다 — 템플릿 덮어쓰기 0. ⚠️ 화면에서만 사라지고 DOM엔 남는다. **차단의 진실은 서버**(envy_preorder_block_cart_add, woocommerce_add_to_cart_validation)이고 이 CSS는 그 앞단의 UX일 뿐이다. 대상 2벌: 메인 form.cart의 실제 담기버튼 + 사이드/모바일 프록시 버튼. 선물(.envy-gift)·단체배송(.envy-ms-optin)은 **그대로 둔다**(확정 5·6). */ /* 🔴 2026-08-16 S9(a): 판정을 PHP가 상태로 실어 보낸다(body.envy-preorder-ui-{state}). CSS는 더 이상 "open이 아니면 평소"를 스스로 추론하지 않는다 — soon/ended는 아예 버튼이 안 그려진다 (envy_preorder_locked_cta). `.envy-preorder-open` 은 하위호환 별칭이라 같이 남긴다. */ body.envy-preorder-open .single_add_to_cart_button, body.envy-preorder-open [data-envy-proxy="cart"], body.envy-preorder-open [data-envy-mbar="cart"], body.envy-preorder-ui-open .single_add_to_cart_button, body.envy-preorder-ui-open [data-envy-proxy="cart"], body.envy-preorder-ui-open [data-envy-mbar="cart"] { display: none !important; } /* 티저(soon)·판매종료(ended)·품절 CTA — 누를 수 없는 상태임을 그 자리에서 말한다. 새 색을 만들지 않고 기존 토큰만 쓴다(시안 없음, SPEC 6-5). */ .envy-preorder-cta { margin: 16px 0 0; } /* ⚠️ `.button.alt`(테마·WC 초록 CTA) 클래스를 일부러 안 붙였다 — 붙이면 그 규칙이 이겨 "못 사는 버튼"이 살아 있는 초록 버튼처럼 보인다(2026-08-16 캡처에서 실제로 그랬다). */ .envy-preorder-cta__btn, .envy-side-cta--off .envy-preorder-cta__btn { width: 100%; min-height: 56px; border: 0; border-radius: 6px; background: var(--envy-gray, #8a8f88); color: #fff; font-size: 16px; font-weight: 700; cursor: not-allowed; opacity: 1; } .envy-preorder-cta__note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--envy-sub, #666); } .envy-side-cta--off { display: block; margin: 16px 0 0; } /* 모바일 고정바의 비활성 CTA도 같은 신호(회색)로. */ .envy-mobile-buybar button[disabled] { background: var(--envy-gray, #8a8f88) !important; color: #fff !important; cursor: not-allowed; } /* 결제화면 예약 안내 한 줄(약관 위, prio 5). 새 색 없이 기존 토큰만. */ .envy-preorder-conote { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--envy-green, #4f8a3d); border-radius: 6px; background: var(--envy-bg, #f6f7f4); color: var(--envy-ink, #1d1f1c); font-size: 14px; line-height: 1.5; } .envy-preorder-conote b { font-weight: 700; }