/* ------------------------------------------------------------------ * HAVEA 기반 레이아웃 — Aurora 확장 지점 (A: 기반 연결) * 값은 style.css 의 토큰만 참조한다. Aurora 셸(헤더·하단바·서랍·모달)의 구조와 provider 는 그대로 두고 * 글자 크기·폰트·폭·safe-area·터치 크기·포커스·모션 축소만 덮는다. * 순서: @shopby/shared common → component → aurora → 이 파일 → style.css (css-loader 가 @import 를 앞으로 올린다). * ------------------------------------------------------------------ */ /* 글자 크기: Aurora 는 <450px 에서 html 87.5%(root 14px) 로 줄인다 → 전 폭 100% 로 사용자 브라우저 설정을 존중. rem 토큰(본문 15 · 캡션 11 · h3 18)이 폭과 무관하게 같은 값으로 계산된다. */ html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 본문 정본 폰트·크기·가독 line-height. 배경은 어드민 디자인 설정 슬롯(--background-color)이라 덮지 않는다. */ body { /* 원본 = Pretendard(--font-kr) 기본. Switzer(--font-en)는 EN 아이브로·섹션 제목 등 명시한 곳만(9/14 PDP computed 대조) */ font-family: var(--font-kr); font-size: var(--h-fs-body); line-height: 1.55; color: var(--h-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'ss06', 'ss07', 'tnum'; } ::selection { background: var(--h-ink); color: var(--h-bg); } /* 키보드 포커스 — 가시적 링 (Aurora reset 의 all:unset 보다 뒤·높은 우선순위) */ :focus-visible { outline: 2px solid var(--h-ink); outline-offset: 2px; } /* 입력 래퍼(.text-field)가 overflow:hidden 이라 바깥 링이 잘린다 → 입력 안쪽 링 */ .text-field :focus-visible { outline-offset: -2px; } /* 일반 입력류 글자 하한 1rem(본문 15px 상속 방지). :where = 0 특이성이라 화면별 지정(검색 18/24px 등)은 그대로 이긴다. */ :where(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea) { font-size: 1rem; } /* iOS 는 16px 미만 입력에 포커스 시 자동 확대 — 모바일 입력류 최소 16px (원본 globals.css 와 동일 규칙) */ @media (max-width: 767px) { input:not([type='checkbox']):not([type='radio']), select, textarea { font-size: 16px !important; } } /* 모션 축소 설정 존중 */ [class^='hv-'] :where(a, button, span, img, td, th, input, label), [class*=' hv-'] :where(a, button, span, img, td, th, input, label) { vertical-align: baseline; } [class^='hv-'] select, [class*=' hv-'] select, select.h-input, select[class^='hv-'], select[class*=' hv-'] { appearance: auto; -webkit-appearance: auto; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- 폭 동기화 (360px~) ---- Aurora 콘텐츠 열은 min 375 / max 500. 360px 에서 15px 넘치던 최소폭만 풀고 500 상한은 그대로(PC 는 아래 컨테이너 블록). 하단바(.page .bottom-nav)·서랍/딤(.offcanvas, max 500)은 이미 같은 500 상한이라 함께 맞는다. 어드민 팝업은 건드리지 않는다. */ .page__content { min-width: 0; } /* 가로 넘침 가드 — 원본 globals.css 의 `body/main { overflow-x: clip }` 1:1. `hidden` 은 스크롤 컨테이너를 만들어 하위 sticky(하단 탭 바·고정 스트립)를 죽인다 — 그래서 clip 만 쓴다. */ body { overflow-x: clip; } .l-content { overflow-x: clip; } /* 전체 모달 두 종류 — 검색(.modal.title-modal--full) · FullModal→TitleModal(.modal.full-modal > .title-modal--full): 375 고정 → min(뷰포트, 500). 내부 375 최소폭도 해제. 팝업 크기는 키우지 않는다. */ .modal.title-modal--full, .modal.full-modal, .title-modal.title-modal--full { min-width: 0; width: 100%; max-width: 500px; } .title-modal--full .title-modal__content { min-width: 0; } /* 카트 고정 주문 바: min 375 해제(360 넘침) · 폭은 static 위치(.cart 왼쪽)+max 500 으로 본문과 동기화 · safe-area */ .cart__fixed-order-btn { min-width: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } /* ---- safe-area (index.html viewport-fit=cover) ---- */ .bottom-nav { padding-bottom: calc(0.3571428571rem + env(safe-area-inset-bottom, 0px)); } .footer { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } .fab-top-down { bottom: calc(7.1428571429rem + env(safe-area-inset-bottom, 0px)); } /* ---- 핵심 터치 타깃 48px (--h-h-btn) ---- */ .bottom-nav__link { min-height: var(--h-h-btn); } /* 로그인·비회원 주문조회 입력 46/버튼 44 · 카트 주문 45 · 검색 모달 입력 → 토큰 48 (수량·체크박스 등 inline 컨트롤은 제외) */ .normal-sign-in__input-wrap, .guest-order__input-wrap, .search-keyword-modal .text-field { height: var(--h-h-input); } .normal-sign-in button, .guest-order button, .cart__order-btn { height: var(--h-h-btn); } /* 헤더·모달 아이콘 버튼: 아이콘 위치는 그대로 두고 히트 영역만 48×48 로 확장 (pseudo 는 클릭을 버튼/링크로 전달) */ .header__cart-btn > a, .search-keyword-modal__back-btn { position: relative; } .header__left-btn::before, .header__cancel-btn::before, .header__cart-btn > a::before, .search-keyword-modal__back-btn::before, .title-modal__close-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: var(--h-h-btn); height: var(--h-h-btn); transform: translate(-50%, -50%); } /* ---- PC(≥1001px): Aurora 1000(배너 500 + 본문 500) → --h-container ---- 셸(page-inner·하단바·서랍 딤·FAB)은 컨테이너 폭. 본문 블록은 기본 500 상한(거래 폼·카트·로그인·주문·회원·마이페이지 보존), 일반 콘텐츠 페이지 루트만 컨테이너 폭. 어드민 팝업(.design-popup)은 건드리지 않는다. */ @media (min-width: 1001px) { .page__side { width: calc(100% - var(--h-container)); } .page-inner { max-width: var(--h-container); align-items: flex-start; } .page__content { width: auto; } .page__content.site { flex: 1; max-width: var(--h-container); } /* BNBGLEFT 어드민 배너: fixed 500 → 인플로우 sticky. 본문을 덮지 않고 등록 시 최대 절반(기존 500/1000 비율), 미등록 시 0 */ .page .banner--left { position: sticky; top: 0; flex: none; max-width: 50%; padding: 0; } /* 배너 등록 시 정확히 절반 폭 고정 → 아래 구매 바 1/4 오프셋과 일치. 미등록(figure 비어 있음)은 auto 0 유지 */ .page .banner--left:has(img) { width: 50%; } .page .banner--left figure:not(:empty) { padding: 0 20px; } /* 어드민 배너 이미지: 폭에 맞춰 비율 보존 (Aurora 는 500 고정 높이 전제) */ .page .banner--left img { height: auto; } .page .bottom-nav { left: 50%; right: auto; width: 100%; max-width: var(--h-container); transform: translateX(-50%); } .page .offcanvas__dim { left: 50%; max-width: var(--h-container); transform: translateX(-50%); } .page .fab-top-down { right: max(16px, calc(50% - var(--h-container) / 2 + 16px)); } .l-content > * { max-width: 500px; margin-left: auto; margin-right: auto; } .l-content > :is( .hv-story, .hv-art, .hv-limit, .hv-cart, .hv-co, .hv-co-done, .hv-co-fail, .hv-my, .hv-wish, .hv-discover, .hv-coupons, .hv-compare, .hv-report, .hv-rw, .hv-sw, .hv-wel, .hv-taste, .hv-find, .hv-ssu, .main-view, .product-detail:not(.purchase), .notice, .faq, .customer-center, .breadcrumb, .category-menu, .category-content, .l-panel:has(> .total-sort), .event-hero, .event-coupon-list, .event-nav, .event-list, .hv-policy, .hv-list, .hv-pdp, .hv-lounge, .hv-lounge-root, .hv-raffle, .hv-home, .hv-help, .hv-cs, .hv-size, .hv-cat, .hv-fol, .hv-event, .hv-oc, .hv-focus, .hv-nf, .hv-od, .hc, .tv-root ) { max-width: none; } /* 상품 상세 고정 구매 바 = 거래 폼: 500 상한 유지, 넓은 본문 아래 가운데 */ .l-content > .purchase.product-detail { left: 50%; transform: translateX(-50%); } /* 좌측 배너 등록 시(위 :has 로 폭 50% 고정) 본문(.site)은 컨테이너 오른쪽 절반 → 구매 바 중심 = 뷰포트 중심 + 컨테이너 폭/4. 배너 미등록이면 figure 가 비어 :has 불일치 → 뷰포트 중심 유지 */ .page-inner:has(> .banner--left img) .l-content > .purchase.product-detail { left: calc(50% + min(100%, var(--h-container)) / 4); } } /* ------------------------------------------------------------------ * HAVEA 로그인 (B1 Part 1) — 원본 apps/storefront/src/app/(shop)/login/* 의 인라인 스타일·Tailwind 를 CSS 로 풀어 이식. * 값은 원본 리터럴 그대로(검정 캔버스 위 흰색·알파는 원본 지면 고유값), 토큰이 있는 곳은 style.css 토큰 참조. * 소비처: src/pages/SignIn/Havea*.jsx · src/components/HaveaLogin/*.jsx. Aurora 기본 .sign-in 스타일은 쓰지 않는다. * 모바일/PC 경계는 원본 Tailwind md = 768px. * ------------------------------------------------------------------ */ /* ---- 풀스크린: /login·/sign-in 에서만 Aurora 셸(헤더·푸터·하단바·좌측 배너·측면 여백·500 상한·그림자) 숨김. Layout.jsx 가 pathname 으로 .page[data-havea-fullscreen] 를 단다. provider·라우터 구조는 그대로. ---- */ .page[data-havea-fullscreen] .page__side, .page[data-havea-fullscreen] .banner--left, .page[data-havea-fullscreen] .header, .page[data-havea-fullscreen] .footer, .page[data-havea-fullscreen] .hv-footer, .page[data-havea-fullscreen] .bottom-nav, .page[data-havea-fullscreen] .category-nav, .page[data-havea-fullscreen] .fab-top-down { display: none !important; } .page[data-havea-fullscreen] .page-inner { max-width: none; /* Layout 이 풀스크린에서 DesignPopup 을 안 그린다 — 이전 페이지 fixedTop 팝업이 남긴 인라인 margin-top 무효화 */ margin-top: 0 !important; } .page[data-havea-fullscreen] .page__content.site { width: 100%; max-width: none; min-width: 0; margin: 0; box-shadow: none; background: #000000; } .page[data-havea-fullscreen] .l-content { min-height: 0; } @media (min-width: 1001px) { .page[data-havea-fullscreen] .l-content > * { max-width: none; } } /* ---- 페이지 골격 (page.tsx) ---- */ .hv-login { position: relative; min-height: 100vh; min-height: 100dvh; background: #000000; color: #ffffff; display: flex; flex-direction: column; } /* 기본 리셋 — :where 로 특이도 0 유지: .hv-sns__btn/.hv-toggle/.hv-login__guest/.hv-form__link 의 크기·굵기·밑줄이 덮이지 않는다 */ :where(.hv-login) a { color: inherit; text-decoration: none; } :where(.hv-login) button { font: inherit; appearance: none; -webkit-appearance: none; } /* 탈출구 — 뒤로 (LoginBackButton.tsx) */ .hv-login__back { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #ffffff; cursor: pointer; } /* 모바일 상단 중앙 워드마크 = 홈 (md:hidden) */ .hv-login__home-m { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 2; color: #ffffff; } /* PC 상단 브랜드마크 행 (hidden md:flex) */ .hv-login__top-pc { display: none; position: relative; z-index: 1; align-items: center; justify-content: space-between; padding: 40px 80px 0; } .hv-login__home-pc { color: #ffffff; } .hv-login__spacer { flex: 1; min-height: calc(72px + env(safe-area-inset-top, 0px)); } /* 하단 콘텐츠 (px-6 md:px-20) */ .hv-login__bottom { position: relative; z-index: 1; padding: 0 24px calc(56px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; } .hv-login__column { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 28px; } .hv-login__value { margin: 0; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.92); } .hv-login__tamagotchi { margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.66); display: flex; align-items: center; justify-content: center; gap: 8px; } .hv-login__tamagotchi img { width: 22px; height: 22px; object-fit: contain; } .hv-login__cart-note { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); text-align: center; } /* 게스트 탈출구 (t-small · min-h-12 · underline · opacity .7) */ .hv-login__guest { display: flex; min-height: 48px; align-items: center; justify-content: center; font-size: var(--h-fs-body-sm); text-decoration: underline; text-underline-offset: 4px; opacity: 0.7; color: #ffffff; } .hv-login__guest:hover { opacity: 1; } /* 로그인 전용 미니 푸터 */ .hv-login__mini-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 16px; row-gap: 8px; font-size: 11px; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.06em; font-family: var(--font-en); } .hv-login__mini-footer a { opacity: 0.8; } .hv-login__mini-footer a:hover { opacity: 1; } @media (min-width: 768px) { .hv-login__home-m { display: none; } .hv-login__top-pc { display: flex; } .hv-login__bottom { padding-left: 80px; padding-right: 80px; } } /* ---- 배경 (LoginVideoBg.tsx) ---- */ .hv-backdrop { position: absolute; inset: 0; z-index: 0; background: #000000; overflow: hidden; } .hv-backdrop__video { width: 100%; height: 100%; object-fit: cover; display: block; } .hv-backdrop__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hv-backdrop__scrim, .hv-backdrop__vignette, .hv-backdrop__grain { position: absolute; inset: 0; pointer-events: none; } .hv-backdrop__scrim { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.06) 28%, rgba(0, 0, 0, 0.16) 50%, rgba(0, 0, 0, 0.66) 76%, rgba(0, 0, 0, 0.95) 100% ); } .hv-backdrop__vignette { background: radial-gradient(130% 90% at 50% 42%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%); } .hv-backdrop__grain--a { opacity: 0.14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .hv-backdrop__grain--b { opacity: 0.1; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,"); } .hv-grain-drift { animation: hvGrainShift 8s steps(6) infinite; } @keyframes hvGrainShift { 0% { transform: translate(0, 0); } 25% { transform: translate(-7px, 5px); } 50% { transform: translate(4px, -8px); } 75% { transform: translate(-5px, -4px); } 100% { transform: translate(0, 0); } } @media (prefers-reduced-motion: reduce) { .hv-grain-drift { animation: none; } } /* ---- SNS 버튼 (SnsLoginButtons.tsx) ---- */ .hv-sns { display: flex; flex-direction: column; gap: 10px; width: 100%; } .hv-sns__btn { border-radius: var(--h-radius-btn); background: rgba(15, 15, 18, 0.42); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; padding: 0; font-family: var(--font-kr); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; } .hv-sns__btn--kakao { background: #fee500; color: #191919; border: 1px solid #fee500; backdrop-filter: none; -webkit-backdrop-filter: none; font-weight: 700; transition: transform 160ms cubic-bezier(0.2, 0, 0, 1), opacity 160ms cubic-bezier(0.2, 0, 0, 1); } .hv-sns__btn--kakao:active { transform: scale(0.985); } .hv-sns__btn--glass { transition: background 160ms cubic-bezier(0.2, 0, 0, 1); } .hv-sns__btn--glass:hover { background: rgba(38, 38, 44, 0.6); } .hv-sns__btn--signup { gap: 8px; border: 1px solid rgba(255, 255, 255, 0.42); letter-spacing: -0.005em; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .hv-sns__btn--signup:hover { background: #ffffff; color: #0a0a0a; border-color: #ffffff; } .hv-sns__divider { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; } .hv-sns__line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.18); } .hv-sns__or { font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); color: rgba(255, 255, 255, 0.5); text-transform: uppercase; } /* ---- 알림 문구 (FormMessage.tsx onDark) ---- */ .hv-msg { border-radius: var(--h-radius-card); padding: 12px; font-size: var(--h-fs-caption); color: #ffffff; word-break: keep-all; line-height: 1.55; } .hv-msg--error { background: color-mix(in srgb, var(--h-warn) 22%, transparent); border: 1px solid rgba(255, 255, 255, 0.3); } .hv-msg--neutral { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); } .hv-msg--mb { margin-bottom: 4px; } .hv-msg--mt { margin-top: 16px; } .hv-inapp__copy { display: inline-flex; min-height: 48px; align-items: center; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; background: transparent; border: 0; padding: 0; color: inherit; cursor: pointer; } .hv-inapp__copied { margin-left: 8px; } /* ---- 아이디 로그인 토글 + 글래스 패널 (EmailLoginToggle.tsx onDark) ---- */ .hv-toggle { display: flex; min-height: 48px; width: 100%; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; font-size: var(--h-fs-body-sm); color: rgba(255, 255, 255, 0.6); cursor: pointer; background: transparent; border: 0; } .hv-toggle__chevron { transition: transform 200ms var(--h-ease); } .hv-toggle__chevron.is-open { transform: rotate(180deg); } .hv-panel { margin-top: 16px; position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--h-radius-card); padding: 20px; color: rgba(255, 255, 255, 0.88); } .hv-panel[hidden] { display: none; } .hv-panel__grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.1; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* ---- 아이디 폼 (LoginForm.tsx onDark) ---- */ .hv-form { position: relative; } .hv-form > :not([hidden]) ~ :not([hidden]) { margin-top: 16px; /* space-y-4 */ } .hv-form__banner { margin: 0; border-radius: var(--h-radius-input); border: 1px solid var(--h-line); background: transparent; padding: 12px; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: rgba(255, 255, 255, 0.9); } .hv-form > .hv-form__banner:first-child { margin-top: 16px; } .hv-form__banner--error { color: #dc2626; /* text-red-600 */ } .hv-form__field > * + * { margin-top: 4px; /* space-y-1 */ } .hv-form__label { display: block; font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 6px; } .hv-form__input { width: 100%; height: var(--h-h-btn); border-radius: var(--h-radius-input); border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(15, 15, 18, 0.42); color: #ffffff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0 12px; font-size: var(--h-fs-body); line-height: normal; letter-spacing: 0.15px; font-family: inherit; appearance: none; -webkit-appearance: none; } .hv-form__input::placeholder { color: rgba(255, 255, 255, 0.45); } .hv-form__error { margin: 0; font-size: var(--h-fs-caption); color: #dc2626; } /* .h-btn.h-btn--primary w-full — 원본 globals.css 버튼 문법. 로그인 지면은 토큰 반전이 없어 검정 버튼/흰 글자(원본 동일) */ .hv-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: var(--h-h-btn); padding: 0 24px; border: 0; border-radius: var(--h-radius-btn); font-size: var(--h-fs-btn); font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wide); text-transform: uppercase; font-family: var(--font-en); background: var(--h-ink); color: var(--h-bg); white-space: nowrap; user-select: none; cursor: pointer; transition: opacity var(--h-dur-1) var(--h-ease), background var(--h-dur-1) var(--h-ease), color var(--h-dur-1) var(--h-ease), transform var(--h-dur-1) var(--h-ease); } .hv-form__submit:hover { opacity: 0.8; } .hv-form__submit:active { transform: translateY(1px); } .hv-form__submit:disabled { opacity: 0.5; cursor: not-allowed; } .hv-form__links { display: flex; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 255, 255, 0.75); } .hv-form__link { display: inline-flex; min-height: 48px; align-items: center; font-size: var(--h-fs-body-sm); color: var(--h-ink-2); text-decoration: underline; text-underline-offset: 4px; } .hv-form__link:hover { color: #ffffff; } .hv-form__sep { color: rgba(255, 255, 255, 0.3); } .hv-form__signup { margin: 16px 0 0; font-size: var(--h-fs-body-sm); color: var(--h-ink-2); } .hv-form__signup-link { color: rgba(255, 255, 255, 0.8); text-decoration: underline; text-underline-offset: 4px; } .hv-form__signup-link:hover { opacity: 1; } /* native orderSheetNo 진입 시에만 — 글래스 버튼 문법으로 정렬 */ .hv-form__guest-order { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--h-radius-btn); border: 1px solid rgba(255, 255, 255, 0.42); background: rgba(15, 15, 18, 0.42); font-size: var(--h-fs-body-sm); color: #ffffff; } /* ------------------------------------------------------------------ * HAVEA 글로벌 푸터·공개 약관·비회원 조회 (B1 Part 2) — 원본 SiteFooter.tsx / PolicyShell.tsx / orders/guest-lookup 의 * 인라인·Tailwind 를 같은 값의 CSS 로 이식. 토큰은 style.css, 지면 고유 리터럴(검정 위 알파, tailwind gray/red)은 원본 값. * 소비처: src/components/Footer/HaveaSiteFooter.jsx · src/pages/HaveaPolicy · src/pages/HaveaGuestLookup. * ------------------------------------------------------------------ */ .hv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- 푸터 (SiteFooter.tsx) ---- */ .hv-footer { background: var(--h-footer-bg); color: var(--h-footer-ink); word-break: keep-all; /* 모바일/PC 전환은 뷰포트가 아니라 푸터 자신의 폭(컨테이너 쿼리) — native 화면의 640px 본문 열에서는 5열이 아니라 모바일 구성이 나온다 */ container-type: inline-size; container-name: hv-footer; } /* 기본 리셋 — :where 로 특이도 0: .hv-footer__partner-m 여백·.hv-footer__verify 밑줄 등 자체 클래스가 항상 이긴다 */ :where(.hv-footer) a { color: inherit; text-decoration: none; } :where(.hv-footer) :is(p, ul, dl, dd) { margin: 0; padding: 0; } :where(.hv-footer) ul { list-style: none; } /* .h-container: max 1280 · gutter 16 / 컨테이너 ≥768 40 */ .hv-footer__container { width: 100%; max-width: var(--h-container); margin: 0 auto; padding-inline: var(--h-gutter); } @media (min-width: 768px) { .hv-footer__container { padding-inline: var(--h-gutter-lg); } } /* 모바일 블록 (pt-8 · pb-[88px] + safe-area) */ .hv-footer__m { padding-top: 32px; padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } .hv-footer__pc { display: none; } .hv-footer__company-m { margin-bottom: 24px; } .hv-footer__summary-m { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: #ffffff; } .hv-footer__summary-m::-webkit-details-marker, .hv-footer__summary-pc::-webkit-details-marker { display: none; } .hv-footer__summary-m::marker, .hv-footer__summary-pc::marker { content: ''; } .hv-footer__chev-m { font-size: 16px; line-height: 1; color: rgba(255, 255, 255, 0.6); } .hv-footer__company-m:not([open]) .hv-footer__chev-m::before { content: '+'; } .hv-footer__company-m[open] .hv-footer__chev-m::before { content: '−'; } .hv-footer__about-m { margin-top: 16px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); } .hv-footer__about-m > * + * { margin-top: 8px; } .hv-footer__verify { text-decoration: underline; text-underline-offset: 2px; color: rgba(255, 255, 255, 0.85); transition: opacity var(--h-dur-1) var(--h-ease); } .hv-footer__tel { display: inline-flex; min-height: 48px; align-items: center; } .hv-footer__policies-m { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px; margin-bottom: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.85); } .hv-footer__sep { color: rgba(255, 255, 255, 0.25); } .hv-footer__partner-m { margin-bottom: 24px; font-size: 12px; color: rgba(255, 255, 255, 0.85); } .hv-footer__broker { font-size: 11px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); } .hv-footer__fair { margin-top: 16px; } .hv-footer__fair img { display: block; max-width: 100%; height: auto; } /* 데스크탑 — 원본 md=768 을 푸터 컨테이너 폭 기준으로 (뷰포트 기준이면 native 640px 열에서 5열이 깨진다) */ @media (min-width: 768px) { .hv-footer__m { display: none; } .hv-footer__pc { display: block; padding-top: 80px; padding-bottom: 40px; } .hv-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 48px; } .hv-footer__wordmark { display: inline-flex; align-items: center; color: var(--h-footer-ink); } .hv-footer__tagline { margin-top: 16px; max-width: 320px; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.65); } /* FooterCol 제목 = .t-eyebrow (11px · wider · uppercase · 500 · font-en) mb-3.5 */ .hv-footer__col-title, .hv-footer__summary-pc { margin: 0 0 14px; font-family: var(--font-en); font-size: var(--h-fs-caption); letter-spacing: var(--h-track-wider); text-transform: uppercase; font-weight: var(--h-fw-m); color: rgba(255, 255, 255, 0.5); } .hv-footer__summary-pc { display: flex; align-items: center; justify-content: space-between; list-style: none; color: #ffffff; cursor: default; pointer-events: none; } .hv-footer__company-pc > dl { display: grid !important; } .hv-footer__cs-email { font-size: 13px; font-family: var(--font-en); } .hv-footer__list { display: grid; gap: 8px; } .hv-footer__list li { font-size: 13px; } .hv-footer__list a { color: rgba(255, 255, 255, 0.85); transition: opacity var(--h-dur-1) var(--h-ease); } .hv-footer__list a:hover, .hv-footer__verify:hover { opacity: 1; } .hv-footer__dl { display: grid; gap: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.7); } .hv-footer__broker--pc { margin-top: 40px; max-width: 720px; } } @container hv-footer (max-width: 767px) { .page:not([data-havea-shop]) .hv-footer__container { padding-inline: var(--h-gutter); } .page:not([data-havea-shop]) .hv-footer__m { display: block; } .page:not([data-havea-shop]) .hv-footer__pc { display: none; } } /* ---- 공개 약관 (PolicyShell.tsx) ---- */ .hv-policy { background: var(--h-bg); color: var(--h-ink); width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 24px var(--h-gutter) 80px; } .hv-policy__inner { width: 100%; max-width: 768px; margin: 0 auto; } .hv-policy__home { display: inline-flex; min-height: 48px; align-items: center; font-family: var(--font-en); font-size: var(--h-fs-caption); letter-spacing: var(--h-track-wider); text-transform: uppercase; font-weight: var(--h-fw-m); color: var(--h-ink); text-decoration: none; transition: opacity var(--h-dur-1) var(--h-ease); } .hv-policy__home:hover { opacity: 0.6; } /* .h-head mt-3 !pt-3 */ .hv-policy__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding: 12px 0 24px; } /* .t-display-m + fontSize 40 고정 */ .hv-policy__title { margin: 0; font-family: var(--font-en); font-size: 40px; font-weight: var(--h-fw-sb); line-height: 1.05; letter-spacing: var(--h-track-tight); } .hv-policy__sub { margin: 4px 0 0; font-size: 13px; color: var(--h-ink-2); } .hv-policy__surface { margin-top: 8px; background: var(--h-surface); border-radius: 8px; padding: 24px; } .hv-policy__note { margin: 0; font-size: 14px; color: var(--h-ink-2); } .hv-policy__faq { margin-top: 8px; border-top: 2px solid var(--h-ink); } .hv-policy__qa { border-bottom: 1px solid var(--h-line); } .hv-policy__q { display: flex; align-items: center; min-height: 48px; padding: 12px 0; font-size: var(--h-fs-body); font-weight: var(--h-fw-m); list-style: none; cursor: pointer; } .hv-policy__q::-webkit-details-marker { display: none; } .hv-policy__a { padding-bottom: 20px; font-size: 14px; line-height: 1.7; color: var(--h-ink-2); word-break: keep-all; overflow-wrap: anywhere; } .hv-policy__a img { max-width: 100%; height: auto; } .hv-policy__retry { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 12px; padding: 0 16px; border: 1px solid var(--h-ink); border-radius: var(--h-radius-btn); background: var(--h-bg); color: var(--h-ink); font: inherit; font-size: var(--h-fs-btn); cursor: pointer; } /* 원본은 typography 플러그인이 없어 어드민 HTML 이 preflight 리셋(제목 크기/여백·목록 불릿 없음) 그대로 렌더된다 — 같은 리셋 */ .hv-policy__body { font-size: var(--h-fs-body); line-height: 1.55; color: var(--h-ink); word-break: keep-all; overflow-wrap: anywhere; } .hv-policy__body h1, .hv-policy__body h2, .hv-policy__body h3, .hv-policy__body h4, .hv-policy__body h5, .hv-policy__body h6 { margin: 0; font-size: inherit; font-weight: inherit; } .hv-policy__body p, .hv-policy__body ul, .hv-policy__body ol, .hv-policy__body blockquote, .hv-policy__body figure { margin: 0; padding: 0; } .hv-policy__body ul, .hv-policy__body ol { list-style: none; } .hv-policy__body a { color: inherit; text-decoration: inherit; } .hv-policy__body img { display: block; max-width: 100%; height: auto; } .hv-policy__body table { border-collapse: collapse; max-width: 100%; } @media (min-width: 768px) { .hv-policy { padding: 40px var(--h-gutter-lg) 120px; } } /* ---- 비회원 주문 조회 (orders/guest-lookup) ---- */ .hv-guest { background: var(--h-bg); color: var(--h-ink); width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 24px var(--h-gutter) 80px; } .hv-guest__inner { width: 100%; max-width: 448px; margin: 0 auto; } .hv-guest__head { margin-bottom: 24px; } .hv-guest__title { margin: 0; font-family: var(--font-en); font-size: var(--h-fs-display-m); font-weight: var(--h-fw-sb); line-height: 1.05; letter-spacing: var(--h-track-tight); } .hv-guest__sub { margin: 8px 0 0; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: #6b7280; } .hv-guest__form > * + * { margin-top: 16px; /* space-y-4 */ } .hv-guest__label { display: block; margin-bottom: 4px; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; text-transform: uppercase; color: #6b7280; } .hv-guest__input { width: 100%; height: var(--h-h-btn); padding: 0 12px; border: 1px solid var(--h-line); border-radius: var(--h-radius-input); background: var(--h-bg); color: var(--h-ink); font-size: var(--h-fs-body); line-height: normal; letter-spacing: 0.15px; font-family: inherit; appearance: none; -webkit-appearance: none; } .hv-guest__error { margin: 0; padding: 8px 12px; border: 1px solid #fecaca; border-radius: 4px; background: #fef2f2; font-size: var(--h-fs-caption); color: #b91c1c; } /* h-h-btn t-eyebrow rounded-h-btn bg-h-ink text-h-bg w-full uppercase */ .hv-guest__submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: var(--h-h-btn); border: 0; border-radius: var(--h-radius-btn); background: var(--h-ink); color: var(--h-bg); font-family: var(--font-en); font-size: var(--h-fs-caption); letter-spacing: var(--h-track-wider); text-transform: uppercase; font-weight: var(--h-fw-m); cursor: pointer; } .hv-guest__submit:disabled { opacity: 0.5; cursor: not-allowed; } .hv-guest__member { margin: 24px 0 0; text-align: center; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: #6b7280; } .hv-guest__member-link { color: var(--h-ink); text-decoration: none; text-underline-offset: 4px; } .hv-guest__member-link:hover { text-decoration: underline; } @media (min-width: 768px) { .hv-guest { padding: 40px var(--h-gutter-lg) 120px; } } /* ------------------------------------------------------------------ * HAVEA 공통 헤더 (B2 Task1) — 원본 components/home/discovery/MainHeader.tsx 의 STYLE_BLOCK·인라인 · HeaderSearchInline.tsx 의 * \3c style>·인라인을 같은 값의 CSS 로. 토큰은 style.css, 지면 고유 리터럴(#8a8a8a·#5A564E·#16130E·알파값)은 원본 값. * 테마: 원본 scrolled(글래스 라이트) + 앰비언트 투명([data-transparent], Task2 Hero). onHero(디스커버리 홈 비디오 위)는 /shop 소비처가 없어 옮기지 않았다. * 소비처: src/components/HaveaHeader/*.jsx · Layout.jsx(/shop 만 .page[data-havea-shop]). 모바일/PC 경계 768, 전체검색 1024, PC 높이 77. * ------------------------------------------------------------------ */ /* ---- /shop 셸: native 헤더·하단바·좌측 배너 대신 HAVEA 헤더(Layout 이 렌더 자체를 바꾼다). Aurora 500 상한(768~1000 포함)· 1000 컨테이너·측면 여백·그림자를 풀고 본문 열(.l-content)만 --h-container 로. 헤더 바·푸터는 풀폭(원본과 동일). ---- */ .page[data-havea-shop] .page__side, .page[data-havea-shop] .banner--left { display: none; } .page[data-havea-shop] .page-inner { max-width: none; } .page[data-havea-shop] .page__content.site { width: 100%; max-width: none; min-width: 0; margin: 0; box-shadow: none; } .page[data-havea-shop] .l-content { width: 100%; max-width: var(--h-container); margin: 0 auto; } /* 모바일·PC 트리를 둘 다 렌더하고 CSS(768)로 가른다(원본 md 게이트). display:contents 래퍼 — block 래퍼는 sticky 를 헤더 높이에 가둔다. */ .hv-mh-m { display: contents; } .hv-mh-pc { display: none; } @media (min-width: 768px) { .hv-mh-m { display: none; } .hv-mh-pc { display: contents; } } /* ---- 바 (scrolled 테마 rootVars) ---- */ .hv-mh-bar { --hv-mh-ink: var(--h-ink); --hv-mh-ink-dim: var(--h-ink-3); --hv-mh-pill: transparent; --hv-mh-pill-hover: var(--h-surface); --hv-mh-pill-border: rgba(0, 0, 0, 0); --hv-mh-search: transparent; --hv-mh-search-border: var(--h-line); --hv-mh-ring: var(--h-line); --hv-mh-ph: #8a8a8a; --hv-mh-scan: #5a564e; --hv-mh-scan-hover: rgba(0, 0, 0, 0.06); position: sticky; top: 0; /* 원본 z 50. 이 셸에서는 native 모달·전체검색·디자인 팝업 포털(z 7)보다 아래, native 헤더/하단바(z 5)보다 위 */ z-index: 6; /* 유리 토큰 정본 — 선 0 마스트헤드: 하단 보더 대신 blur + 미세 그림자 */ background: var(--h-glass-bg); backdrop-filter: var(--h-glass-blur); -webkit-backdrop-filter: var(--h-glass-blur); border-bottom: 1px solid rgba(255, 255, 255, 0); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05); transition: background 280ms var(--h-ease), border-color 280ms var(--h-ease); } /* 노치·iOS 크롬 툴바 전환에서 상단 잘림 방지 (viewport-fit=cover 와 세트) */ .hv-mh-bar--m { padding-top: env(safe-area-inset-top, 0px); transition: background 240ms var(--h-ease), box-shadow 240ms var(--h-ease); } /* 앰비언트: 어두운 포스터 배경 위 — 바 투명, 잉크·검색선만 흰 계열(알약 면·테두리는 평소대로 없음) */ .hv-mh-bar[data-transparent] { --hv-mh-ink: #ffffff; --hv-mh-ink-dim: rgba(255, 255, 255, 0.74); --hv-mh-pill-hover: rgba(255, 255, 255, 0.14); --hv-mh-search: rgba(255, 255, 255, 0.14); --hv-mh-search-border: rgba(255, 255, 255, 0.42); --hv-mh-ring: rgba(255, 255, 255, 0.55); --hv-mh-ph: rgba(255, 255, 255, 0.8); --hv-mh-scan: #ffffff; --hv-mh-scan-hover: rgba(255, 255, 255, 0.18); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* 원본: 모바일만 투명 시 그림자 제거(PC 는 유지) */ .hv-mh-bar--m[data-transparent] { box-shadow: none; } /* 기본 리셋 — :where 로 특이도 0 */ :where(.hv-mh-bar) button { font: inherit; appearance: none; -webkit-appearance: none; } :where(.hv-mh-bar) a { color: inherit; text-decoration: none; } :where(.hv-mh-bar) p, :where(.hv-mh-bar) ul { margin: 0; padding: 0; } /* ---- 워드마크 (LogoChip): 시각 크기 유지, 히트 영역 48(PC 56) ---- */ .hv-mh-logo { display: inline-flex; align-items: center; height: 48px; padding: 0 2px; background: transparent; border: none; cursor: pointer; flex: 0 0 auto; color: var(--hv-mh-ink); transition: color 220ms var(--h-ease); } .hv-mh-logo--pc { height: 56px; } /* ---- 모바일 1행 ---- */ .hv-mh-row-m { display: flex; align-items: center; gap: 20px; /* 4→2px — 홈 카드 세로 확보. 터치 48 은 .hv-mh-mtab 이 보장 */ padding: 2px 16px; } .hv-mh-mnav { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; } .hv-mh-mtab { position: relative; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; padding: 0; min-height: 48px; font-family: var(--font-en); font-weight: 500; font-size: 15px; line-height: 1; white-space: nowrap; color: var(--hv-mh-ink-dim); transition: color 160ms var(--h-ease); touch-action: manipulation; text-decoration: none; } .hv-mh-mtab:active { opacity: 0.5; } .hv-mh-mtab--active { color: var(--hv-mh-ink); font-weight: 700; } /* 활성 = 언더라인 대신 도트 (선 0 마스트헤드) */ .hv-mh-mtab--active::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; width: 3px; height: 3px; background: var(--hv-mh-ink); border-radius: 999px; } .hv-mh-actions-m { display: flex; align-items: center; gap: 0; flex: 0 0 auto; } /* ---- 원형 아이콘 버튼 48 · 카트 배지 ---- */ .hv-mh-plainbtn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: transparent; border: none; color: var(--hv-mh-ink-dim); cursor: pointer; transition: background 160ms var(--h-ease), color 200ms var(--h-ease), transform 120ms var(--h-ease); } .hv-mh-plainbtn:hover { background: var(--hv-mh-pill); color: var(--hv-mh-ink); } .hv-mh-plainbtn:active { transform: scale(0.94); } .hv-mh-cart { position: relative; } .hv-mh-badge { position: absolute; top: 8px; right: 7px; min-width: 15px; height: 15px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--h-point, #c8102e); color: #ffffff; border-radius: 4px; font-family: var(--font-en); font-weight: 700; font-size: 11.5px; line-height: 1; } /* ---- PC 행: 총높이 77 = 여기 76 + 바깥 보더 1. 양쪽 auto / 가운데 유연 스페이서, 검색은 flow 밖 정중앙 절대 배치 ---- */ .hv-mh-inner { box-sizing: border-box; height: calc(var(--h-h-discovery-header) - 1px); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; /* 본문 1280 칼럼과 로고·액션 x 정렬 — 컨테이너 캡 + 40px 거터(바 배경은 부모가 풀폭) */ max-width: var(--h-container); margin: 0 auto; padding: 16px 40px 6px; } .hv-mh-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .hv-mh-navpill { display: inline-flex; align-items: center; background: var(--hv-mh-pill); border: 1px solid var(--hv-mh-pill-border); border-radius: 999px; transition: background 180ms var(--h-ease); height: 56px; padding: 0 6px; gap: 2px; flex: 0 0 auto; } .hv-mh-navitem { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: transparent; cursor: pointer; border: none; color: var(--hv-mh-ink-dim); font-family: var(--font-en); font-weight: 500; white-space: nowrap; /* 좌우 여백은 CSS 정본 — 아래 좁은 폭 미디어쿼리가 덮는다 */ padding: 0 16px; height: 48px; font-size: 13px; transition: color 160ms var(--h-ease), background 160ms var(--h-ease); touch-action: manipulation; text-decoration: none; } .hv-mh-navitem:hover { color: var(--hv-mh-ink); } /* 탭·클릭 후 남는 UA 포커스 오벌 제거 — 키보드(:focus-visible)에만 링 */ .hv-mh-navitem:focus { outline: none; } .hv-mh-navitem:focus-visible { outline: 2px solid var(--hv-mh-ring); outline-offset: 2px; } /* 활성 = 잉크색 + 700 */ .hv-mh-navitem--active { color: var(--hv-mh-ink); font-weight: 700; } .hv-mh-actions { display: flex; align-items: center; gap: 2px; justify-self: end; } /* ---- 검색 래퍼: 넓은 폭 = 헤더 정중앙 절대배치 pill(≤380, 양쪽 720 예약) · 좁은 폭(<1024) = 액션 그룹 안 원형 아이콘 ---- */ .hv-mh-searchwrap { position: absolute; left: 50%; top: 16px; bottom: 6px; transform: translateX(-50%); display: flex; align-items: center; pointer-events: none; width: min(380px, calc(100vw - 720px)); } .hv-mh-searchbox { position: relative; width: 100%; pointer-events: auto; } .hv-mh-search { display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 0 6px 0 18px; /* 캡슐 radius — 샵 본문 검색과 같은 문법 */ border-radius: 999px; background: var(--hv-mh-search); border: 1px solid var(--hv-mh-search-border); color: var(--hv-mh-ink-dim); cursor: text; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); font-family: inherit; transition: background 180ms var(--h-ease), box-shadow 200ms var(--h-ease); } .hv-mh-search:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14); } .hv-mh-search--btn { pointer-events: auto; } .hv-mh-search__ph { flex: 1; text-align: left; color: var(--hv-mh-ph); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-mh-search input { flex: 1; border: none; background: transparent; color: var(--hv-mh-scan); font-size: 14px; font-weight: 500; font-family: inherit; min-width: 0; padding: 0; } /* 원본 outline:none 은 키보드 포커스까지 지웠다 — 마우스 포커스 링만 끄고 :focus-visible 은 _layout.css 정본(2px 잉크)과 같은 안쪽 링 */ .hv-mh-search input:focus { outline: none; } .hv-mh-search input:focus-visible { outline: 2px solid var(--hv-mh-ink); outline-offset: 2px; border-radius: 2px; } .hv-mh-search input::placeholder { color: var(--hv-mh-ph); font-weight: 500; } .hv-mh-search input::-webkit-search-cancel-button { display: none; } @media (max-width: 1023px) { /* 타블렛(768~1023): 절대배치를 버리고 우측 액션 그룹에 합류(flow) — 정중앙 절대배치가 nav 를 덮던 문제의 근본 해소 */ .hv-mh-searchwrap { position: static; transform: none; width: 48px; height: 48px; pointer-events: auto; justify-content: center; flex: 0 0 auto; } /* 4개 아이콘이 들어가도록 nav 좌우 여백만 축소 (터치 48 은 height 가 보장) */ .hv-mh-navitem { padding: 0 10px; } /* 좁은 폭은 입력이 아니라 아이콘 버튼 — 형제 아이콘과 동일하게 원형 */ .hv-mh-searchwrap .hv-mh-search { padding: 0; justify-content: center; border-radius: 50%; background: transparent; border: none; box-shadow: none; color: var(--hv-mh-ink-dim); } .hv-mh-searchwrap .hv-mh-search:hover { background: var(--hv-mh-pill); box-shadow: none; } .hv-mh-searchwrap .hv-mh-search__ph { display: none; } } /* 풀블리드(100vw) 요소는 스크롤바 폭만큼 문서를 넘친다(원본 globals.css 9/9 실측 7.5px) — body 에서 가로만 잘라낸다. ⚠️ overflow-x:hidden 은 스크롤 컨테이너를 만들어 하위 sticky(하단 탭 바)를 죽인다 → clip 만 쓴다(원본 동일) */ body { overflow-x: clip; } /* ---- 검색 패널: 풀블리드(100vw) 배경 시트 + 헤더 컨테이너 정렬 이너. 트리거 pill 이 뷰포트 정중앙이라 left:50%+translate 가 항상 안전 ---- */ .hv-mh-search-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 100vw; background: #ffffff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); z-index: 200; } .hv-mh-search-panel__inner { max-width: var(--h-container); margin: 0 auto; } .hv-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .hv-no-scrollbar::-webkit-scrollbar { display: none; height: 0; width: 0; } /* 대기 패널 (2열 장부형의 좌 300px 검색어 장부) */ .hv-mh-panel-idle { padding: 20px var(--h-gutter-lg) 24px; max-height: min(78vh, 820px); overflow-y: auto; display: flex; gap: 32px; } .hv-mh-panel-col { width: 300px; flex-shrink: 0; } .hv-mh-panel-block--gap { margin-bottom: 18px; } .hv-mh-panel-heading { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #8a8a8a; } .hv-mh-panel-heading--rank { margin-bottom: 4px; } .hv-mh-chips { display: flex; flex-wrap: wrap; gap: 8px; } .hv-mh-chip { border: 1px solid rgba(0, 0, 0, 0.1); background: transparent; border-radius: 999px; padding: 8px 12px; font-size: 12.5px; color: #16130e; cursor: pointer; font-family: inherit; } /* 1열 랭킹 — 순위 1~8 전부 잉크(상위 3 강조 없음) */ .hv-mh-rank { display: flex; align-items: baseline; gap: 8px; width: 100%; border: none; background: transparent; padding: 7px 4px; font-size: 13px; color: #16130e; cursor: pointer; text-align: left; font-family: inherit; } .hv-mh-rank__no { font-family: var(--font-en); font-weight: 700; font-size: 13px; color: var(--h-ink); width: 14px; flex-shrink: 0; font-variant-numeric: tabular-nums; } .hv-mh-rank__q { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 자동완성 드롭다운 — ul 패딩 0(하이라이트가 이너 폭 꽉), 행만 거터 들여쓰기 */ .hv-mh-suggest { list-style: none; padding: 0; margin: 0; } .hv-mh-suggest__item { display: flex; align-items: center; gap: 8px; padding: 8px var(--h-gutter-lg); cursor: pointer; background: transparent; } .hv-mh-suggest__item[aria-selected='true'], .hv-mh-suggest__all[aria-selected='true'] { background: rgba(0, 0, 0, 0.04); } .hv-mh-suggest__img { width: 40px; height: 40px; border-radius: var(--h-radius-card); object-fit: cover; flex-shrink: 0; display: block; } .hv-mh-suggest__text { flex: 1; min-width: 0; } .hv-mh-suggest__name { font-size: 13px; font-weight: 500; color: #16130e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-mh-suggest__price { font-size: 12px; color: #8a8a8a; } .hv-mh-suggest__all { display: flex; align-items: center; justify-content: center; padding: 12px var(--h-gutter-lg); cursor: pointer; border-top: 1px solid rgba(0, 0, 0, 0.06); background: transparent; font-size: 13px; font-weight: 500; color: #5a564e; } /* 새 몰 전용 상태 행(로딩/0건/실패) — 옵션 행과 같은 인셋, 보조 회색 */ .hv-mh-suggest__state { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px var(--h-gutter-lg); font-size: 13px; color: #8a8a8a; } .hv-mh-suggest__retry { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--h-line); border-radius: var(--h-radius-btn); background: transparent; color: var(--h-ink); font: inherit; font-size: 12.5px; cursor: pointer; } /* 대기 패널 우열(원본 안1 2열 장부형) — 최근 본 상품 132 카드 + 스토리 156 4:5 미니 커버(저장 토글), PC 넘김 화살표 */ .hv-mh-panel-divider { width: 1px; align-self: stretch; background: rgba(0, 0, 0, 0.08); } .hv-mh-panel-right { flex: 1; min-width: 0; } .hv-mh-panel-block--gap-lg { margin-bottom: 20px; } .hv-mh-hscroll { position: relative; } .hv-mh-hscroll__track { overflow-x: auto; } .hv-mh-viewed { display: flex; gap: 12px; } .hv-mh-viewed__card { flex: 0 0 auto; width: 132px; } .hv-mh-stories { display: flex; gap: 14px; } .hv-mh-story { position: relative; flex: 0 0 auto; width: 156px; } .hv-mh-story__btn { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .hv-mh-story__img { display: block; width: 156px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; } .hv-mh-story__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 12px; line-height: 1.4; color: #16130e; } .hv-mh-story__save { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #ffffff; cursor: pointer; } /* ---- 모바일 하단 탭 바 (원본 MobileTabBar.tsx): 가운데 떠 있는 프로스티드 알약, 스크롤 다운 시 축소. md+ 미노출 ---- */ .hv-tabbar { position: sticky; bottom: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: center; height: var(--h-h-tabbar); padding-bottom: env(safe-area-inset-bottom, 0px); pointer-events: none; transition: height 260ms var(--h-ease); } /* 축소 폭은 알약이 들어갈 만큼만(알약 = 버튼 48 + 패딩 6 = 54 고정) — 터치 48 은 줄이지 않는다 */ .hv-tabbar--compact { height: calc(var(--h-h-tabbar) - 8px); } @media (min-width: 768px) { .hv-tabbar { display: none; } } .hv-tabbar__pill { pointer-events: auto; display: flex; align-items: center; gap: 5px; background: var(--h-glass-bg); backdrop-filter: var(--h-glass-blur); -webkit-backdrop-filter: var(--h-glass-blur); border: 1px solid var(--h-glass-border); border-radius: 999px; padding: 3px 6px; box-shadow: var(--h-glass-shadow); } .hv-tabbar__btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 56px; height: 48px; padding: 0; border: 0; border-radius: 16px; background: transparent; color: var(--h-ink-2); cursor: pointer; text-decoration: none; font: inherit; appearance: none; -webkit-appearance: none; transition: color 220ms var(--h-ease), background 220ms var(--h-ease), width 260ms var(--h-ease), height 260ms var(--h-ease), gap 260ms var(--h-ease); } .hv-tabbar--compact .hv-tabbar__btn { width: 50px; gap: 0; } /* 활성 = 아이콘 채움 + 라벨 볼드 + 은은한 배경(튜브라이트 램프 제거, 원본 7/06) */ .hv-tabbar__btn--active { background: rgba(0, 0, 0, 0.06); color: var(--h-ink); } .hv-tabbar__btn:focus-visible { outline: 2px solid var(--h-ink); outline-offset: -2px; } .hv-tabbar__label { font-family: var(--font-kr); letter-spacing: -0.01em; font-weight: 500; color: var(--h-ink-2); white-space: nowrap; font-size: 11px; line-height: 1; max-height: 13px; opacity: 1; overflow: hidden; transition: max-height 260ms var(--h-ease), opacity 200ms var(--h-ease); } .hv-tabbar__btn--active .hv-tabbar__label { font-weight: 700; color: var(--h-ink); } .hv-tabbar--compact .hv-tabbar__label { max-height: 0; opacity: 0; } html[data-hero-overlay='true'] .hv-mh-bar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 0 !important; } /* ---- 헤더 자동 숨김 (원본 globals.css HeaderAutoHide 절 — opt-in: 페이지가 useHeaderAutoHide 를 켜면 html[data-header-autohide], 스크롤 방향에 따라 html[data-header-hidden] 토글. sticky 그대로 두고 transform 으로만 밀어 올린다(레이아웃 무변). 그 아래 붙는 스트립은 `--h-header-offset`(보일 때 헤더 실측 높이 · 숨을 때 0)을 top 으로 써서 같은 박자로 따라간다) ---- */ html[data-header-autohide='true'] .hv-mh-bar { transition: transform var(--h-dur-2) var(--h-ease), background 280ms var(--h-ease), border-color 280ms var(--h-ease); } html[data-header-hidden='true'] .hv-mh-bar { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { html[data-header-autohide='true'] .hv-mh-bar { transition: none; } } /* ---- 원본 (shop)/layout 플로팅: 카카오 상담 탭(KakaoChatFab) · 리스트 도구(ListFloatingTools). native Aurora 우하단 FAB 는 HAVEA 셸에서 숨긴다 ---- */ .page[data-havea-shop] .fab-top-down, .page[data-havea-pdp] .fab-top-down { display: none !important; } .hv-kakao-fab { position: fixed; right: 0; /* 모바일: 탭바·PDP 구매 바 중 큰 쪽 + safe-area + 리스트 도구 예약 + 20 */ bottom: calc(env(safe-area-inset-bottom, 0px) + max(var(--h-h-tabbar, 72px), var(--pdp-cta-h, 0px)) + var(--h-list-tools-reserve, 0px) + 20px); z-index: 40; width: 48px; height: 76px; display: flex; justify-content: flex-end; opacity: 1; transition: opacity 200ms; } .hv-kakao-fab--pdp { bottom: calc(env(safe-area-inset-bottom, 0px) + max(var(--h-h-tabbar, 72px), var(--pdp-cta-h, 0px)) + var(--h-list-tools-reserve, 0px) + 84px); } @media (min-width: 1024px) { .hv-kakao-fab, .hv-kakao-fab--pdp { bottom: calc(96px + var(--h-list-tools-reserve, 0px)); } } .hv-kakao-fab__tab { width: 30px; height: 76px; background: #0a0a0a; color: #ffffff; border-radius: 10px 0 0 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: var(--h-track-wider); writing-mode: vertical-rl; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92), 0 4px 14px rgba(0, 0, 0, 0.18); } .hv-list-floating { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--h-h-tabbar, 72px) + 20px); z-index: 39; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; } @media (min-width: 1024px) { .hv-list-floating { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); } } .hv-list-floating__recent { pointer-events: auto; display: block; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 1px solid var(--h-glass-border); box-shadow: var(--h-glass-shadow); background: var(--h-bg-product); transition: transform 240ms var(--h-ease); } .hv-list-floating__recent img { width: 100%; height: 100%; object-fit: cover; } .hv-list-floating__top { width: 48px; height: 48px; border-radius: 50%; background: var(--h-glass-bg); backdrop-filter: var(--h-glass-blur); -webkit-backdrop-filter: var(--h-glass-blur); color: var(--h-ink); border: 1px solid var(--h-glass-border); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--h-glass-shadow); cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 240ms var(--h-ease), transform 240ms var(--h-ease); } .hv-list-floating__top.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ------------------------------------------------------------------ * HAVEA /shop 본문 (B2 Task2) — 원본 app/(shop)/shop/page.tsx + _components 의 Tailwind/인라인과 globals.css 의 * .shop-hero-* / .shop-quick-chips / .shop-story-band / .shop-brand-pills / .pc-rail-aura 를 같은 값의 CSS 로. * 토큰은 style.css, 지면 고유 리터럴(검정 위 알파·스크림·#0A0A0A 띠)은 원본 값. /shop 셸(.page[data-havea-shop]) 밖에는 영향 없음. * 소비처: src/pages/HaveaShop/*. 모바일/PC 경계 768, 격자 4열 1024, 화살표 2xl 1536. * ------------------------------------------------------------------ */ /* ---- 페이지 루트: 본문 열(.l-content)은 풀폭으로 풀고(풀블리드 앰비언트·스토리 띠) .hv-shop 이 컨테이너 캡 + 거터. 가로 넘침은 clip(스크롤 컨테이너를 만들지 않아 sticky 생존) ---- */ .page[data-havea-shop] .l-content:has(> .hv-shop) { max-width: none; overflow-x: clip; } /* 컨테이너 캡 1280 — `_layout.css` 의 `.l-content > *`(500) 와 `.l-content > :is(…)`(max-width:none, `:has` 때문에 (0,3,0)) 둘 다 이기도록 셸 스코프에서 (0,4,0) 으로 고정. 거터·풀블리드(앰비언트·스토리 띠)는 그대로 */ .page[data-havea-shop] .l-content:has(> .hv-shop) > .hv-shop { max-width: var(--h-container); } .hv-shop { box-sizing: border-box; width: 100%; max-width: var(--h-container); margin: 0 auto; /* 모바일 상단 8(헤더에 더 붙게, 원본 9/9) · 하단 112(하단 탭 바 위) */ padding: 8px var(--h-gutter) 112px; background: var(--h-bg); color: var(--h-ink); } @media (min-width: 768px) { .hv-shop { padding: 40px var(--h-gutter-lg) 112px; } } :where(.hv-shop) :is(h1, h2, p, ul) { margin: 0; padding: 0; } :where(.hv-shop) ul { list-style: none; } :where(.hv-shop) a { color: inherit; text-decoration: none; } :where(.hv-shop) button { font: inherit; appearance: none; -webkit-appearance: none; } :where(.hv-shop) img { display: block; } /* ---- 섹션 공통 ---- */ .hv-shop-sec { margin-top: 48px; } .hv-shop-sec--lg { margin-top: 56px; } .hv-shop-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .hv-shop-sec__title { font-family: var(--font-en); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; } .hv-shop-sec__title--kr { font-family: inherit; } .hv-shop-sec__sub { font-size: 13px; color: var(--h-ink-2); } .hv-shop-sec__link { flex: 0 0 auto; min-height: 48px; padding: 0; border: 0; background: transparent; font-size: 12px; color: var(--h-ink-3); cursor: pointer; } /* 상태 한 줄(로딩/실패/0건) */ .hv-shop-status { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 32px 0; text-align: center; font-size: 13px; color: var(--h-ink-3); } .hv-shop-status--dark { color: rgba(255, 255, 255, 0.72); } .hv-shop-status--tight { padding: 12px 0 0; } .hv-shop-retry { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--h-line); border-radius: var(--h-radius-btn); background: transparent; color: var(--h-ink); font-size: 12.5px; cursor: pointer; } /* ---- 탭 칩(면 칩, 활성 = 잉크 필) · 정렬 ---- */ .hv-shop-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; } .hv-shop-tab { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--h-surface); color: var(--h-ink); font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; } .hv-shop-tab[aria-current] { background: var(--h-ink); color: var(--h-bg); } .hv-shop-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } .hv-shop-filter .hv-shop-tabs { flex: 1; min-width: 0; margin-bottom: 0; } .hv-shop-sort { flex: 0 0 auto; appearance: auto; -webkit-appearance: auto; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--h-surface); color: var(--h-ink); font: inherit; font-size: 13px; font-weight: 600; } /* ---- 가로 레일 + 프리즘 카드 슬롯(76vw · max 320) · 원형 40 버튼 · 거터 밖 화살표 ---- */ .hv-rail { position: relative; } .hv-rail__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; /* 풀블리드(-16) 트랙은 스냅 기준이 화면 끝 — scroll-padding 없으면 첫 카드가 x0 에 붙는다(원본 8/4) */ margin: 0 calc(-1 * var(--h-gutter)); padding: 0 var(--h-gutter) 8px; scroll-padding-left: var(--h-gutter); } .hv-prism { width: 76vw; max-width: 320px; flex: 0 0 auto; scroll-snap-align: start; } .hv-round-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); color: var(--h-ink); cursor: pointer; } .hv-round-btn:disabled { opacity: 0.3; } .hv-arrow { display: none; position: absolute; top: 50%; /* 레일 안에서 카드 위로만 — 헤더(z 6)·native 모달/디자인 팝업 포털(z 7)보다 아래 */ z-index: 1; transform: translateY(-50%); } .hv-arrow--prev { left: calc(var(--h-gutter-lg) * -1); } .hv-arrow--next { right: calc(var(--h-gutter-lg) * -1); } @media (min-width: 768px) { .hv-rail__track { margin: 0; padding: 0 0 8px; scroll-padding-left: 0; } .hv-arrow[data-scrollable] { display: flex; } } @media (min-width: 1536px) { .hv-arrow--prev { left: -48px; } .hv-arrow--next { right: -48px; } } /* ---- 상품 카드(ProductCard default/rail) ---- */ .hv-pc { position: relative; transition: opacity var(--h-dur-1) var(--h-ease); } @media (hover: hover) { .hv-pc:hover { opacity: 0.9; } } /* 레일 = 백지 + 라인 절반 농도 + 카드 오라(자기 사진 blur 28 + 지면색 55% 막). z 음수 = 배경 위·내용 아래(isolation 으로 카드 안에 가둠) */ .hv-pc--rail { isolation: isolate; overflow: hidden; height: 100%; padding: 0; border: 1px solid color-mix(in srgb, var(--h-line) 50%, transparent); border-radius: var(--h-radius-card); background: var(--h-bg); } .hv-pc--rail::before { content: ''; position: absolute; inset: -25%; z-index: -2; background: var(--pc-aura, none) center / cover no-repeat; filter: blur(28px) saturate(1.35); opacity: 0.42; transform: translateZ(0); pointer-events: none; } .hv-pc--rail::after { content: ''; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--h-bg) 55%, transparent); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .hv-pc--rail::before { will-change: transform; } } .hv-pc__link { position: relative; display: block; } .hv-pc__link:focus-visible { outline: 2px solid var(--h-ink); outline-offset: 2px; } /* 격자 = 4:5 플레이트(cover) · 레일 = 1:1 contain 풀블리드(위 모서리만 둥글게, 투명 — 오라가 사진 여백까지 비친다) */ .hv-pc__img { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--h-radius-card); background: var(--h-bg-product); container-type: inline-size; } .hv-pc--rail .hv-pc__img { aspect-ratio: 1 / 1; border-radius: var(--h-radius-card) var(--h-radius-card) 0 0; background: transparent; } .hv-pc__img img { width: 100%; height: 100%; object-fit: cover; } .hv-pc--rail .hv-pc__img img { object-fit: contain; } .hv-pc__img-main { transition: opacity 300ms var(--h-ease); } .hv-pc__img-hover { position: absolute; inset: 0; opacity: 0; transition: opacity 300ms var(--h-ease); pointer-events: none; } /* hover 스왑은 (hover:hover) 기기만 — iOS 는 첫 탭을 hover 로 소비해 두 번 눌러야 들어갔다(원본 8/3) */ @media (hover: hover) { .hv-pc:hover .hv-pc__img--swap .hv-pc__img-main { opacity: 0; } .hv-pc:hover .hv-pc__img--swap .hv-pc__img-hover { opacity: 1; } } .hv-pc__silhouette { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 700; font-size: clamp(40px, 14cqw, 80px); letter-spacing: -0.04em; color: rgba(0, 0, 0, 0.08); pointer-events: none; } .hv-pc__soldout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); color: #ffffff; font-family: var(--font-en); font-size: 13px; font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wider); text-transform: uppercase; } /* 랭킹 — 레일 36px 잉크 숫자 · 격자 20px 잉크 칩 */ .hv-pc__rank { position: absolute; left: 16px; top: 8px; font-family: var(--font-en); font-weight: 800; font-size: 36px; letter-spacing: -0.04em; color: var(--h-ink); } .hv-pc__rank-stamp { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--h-ink); color: var(--h-bg); font-family: var(--font-en); font-weight: 700; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; } .hv-pc__meta { position: relative; margin-top: 10px; } .hv-pc--rail .hv-pc__meta { margin-top: 0; padding: 10px 10px 12px; } .hv-pc__meta-link { display: flex; flex-direction: column; gap: 2px; padding-right: 32px; } .hv-pc__brand { display: inline-flex; align-items: flex-start; align-self: flex-start; font-family: var(--font-en); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .hv-pc__new { flex: 0 0 auto; width: 3px; height: 3px; margin: 3px 0 0 3px; border-radius: 50%; background: var(--h-point); opacity: 0.9; } .hv-pc__name { font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--h-ink-2); } /* 리밋 2줄 레일 카드(원본 ProductCard dense · imageRatio square-plate · nameLines 1 · hideBenefits — 안나 9/8 16:5x): 1:1 플레이트(contain), 이름 12px 한 줄 */ .hv-pc--limit .hv-pc__img { aspect-ratio: 1 / 1; } .hv-pc--limit .hv-pc__img img { object-fit: contain; } .hv-pc--limit .hv-pc__name { font-size: 12px; -webkit-line-clamp: 1; } /* 격자는 2줄 말줄임, 레일은 상품명 전부(원본 9/7) */ .hv-pc--grid .hv-pc__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hv-pc__benefits { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 2px; } .hv-pc__chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--h-ink-3); white-space: nowrap; } .hv-pc__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 4px; font-family: var(--font-en); font-weight: 700; } .hv-pc__pct { font-size: 14px; color: var(--h-sale-pct); } .hv-pc__final { font-size: 15px; font-variant-numeric: tabular-nums; } .hv-pc__reviews { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-en); font-size: var(--h-fs-caption); letter-spacing: 0.02em; color: var(--h-ink-3); } .hv-pc__reviews strong { font-weight: 600; color: var(--h-ink); } /* 저장(북마크) 48 히트박스, 브랜드 첫 줄 우측 광학 정렬 — 레일은 메타 패딩 10 만큼 보정. native .btn 기본 스타일을 덮는다 */ .hv-pc .hv-pc__like { position: absolute; right: -12px; top: -16px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--h-ink); line-height: 1; cursor: pointer; transition: color var(--h-dur-1) var(--h-ease); } .hv-pc--rail .hv-pc__like { right: -2px; top: -6px; } .hv-pc .hv-pc__like:disabled { opacity: 0.6; } .hv-pc .hv-pc__like:focus-visible { outline: 2px solid var(--h-ink); outline-offset: 2px; } /* ---- 전체 상품 격자 2/3/4열 ---- */ .hv-shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; } @media (min-width: 768px) { .hv-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .hv-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---- 히어로 ---- */ .hv-shop-hero { position: relative; margin-top: 0; } @media (min-width: 768px) { .hv-shop-hero { margin-top: 16px; } } /* 앰비언트 = 현재 포스터를 크게 흐려 헤더 뒤부터 카드 아래까지 깐 배경, 아래 45% 마스크 페이드. 섹션 안 z 0, 프레임/컨트롤 z 1. 모바일은 좌우 거터만큼 풀블리드, 위로 헤더 높이 + safe-area + 16. z -1 은 흰 면 밑으로 내려가 안 그려진다(원본 9/9) */ .hv-shop-hero-ambient { position: absolute; left: calc(-1 * var(--h-gutter)); right: calc(-1 * var(--h-gutter)); top: calc(-1 * (var(--h-h-header-m) + env(safe-area-inset-top, 0px) + 16px)); bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: paint; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0, 0, 0, 0) 100%); } /* 전역 img{max-width:100%} 가 140% 를 눌러 오른쪽이 비었다(원본 9/9) — max-width none */ .hv-shop-hero-ambient img { position: absolute; inset: -20%; width: 140%; max-width: none; height: 140%; object-fit: cover; filter: blur(34px) saturate(1.25) brightness(0.62); transition: opacity 480ms var(--h-ease); will-change: opacity; backface-visibility: hidden; } .hv-shop-hero-ambient::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 8, 0.5) 0%, rgba(8, 8, 8, 0.3) 45%, rgba(8, 8, 8, 0.06) 100%); } @media (min-width: 768px) { /* PC: 뷰포트 전폭, 헤더 77 + 컨테이너 pt 40 + mt 16 만큼 위로 */ .hv-shop-hero-ambient { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); top: calc(-1 * (var(--h-h-discovery-header) + 56px)); } .hv-shop-hero-ambient img { filter: blur(56px) saturate(1.25) brightness(0.6); } } .hv-shop-hero-frame { position: relative; z-index: 1; overflow: hidden; border-radius: var(--h-radius-card); } /* 모바일 = --cur 슬라이드(480ms) · PC = 카드 3장 한 줄, 위치는 order(--o) 로만(--cur 는 모바일 전용 — 둘을 같이 걸면 폭 전환 시 트랙이 밀린다) */ .hv-shop-hero-track { display: flex; transform: translateX(calc(var(--cur, 0) * -100%)); transition: transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1); } .hv-shop-hero-card { position: relative; display: block; flex: 0 0 auto; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; overflow: hidden; background: var(--h-bg-product); color: #ffffff; text-align: left; scroll-snap-align: start; cursor: pointer; } .hv-shop-hero-card:focus-visible { /* 프레임 overflow:hidden 에 잘리지 않게 안쪽 링 — 사진 위라 흰 토큰 */ outline: 2px solid var(--h-bg); outline-offset: -4px; } .hv-shop-hero-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* 하단 스크림 위 제목 — 들어올 땐 트랙 이동(480ms) 뒤 지연, 나갈 땐 바로 */ .hv-shop-hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 16px 16px; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0.72) 100% ); color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(18px); transition: opacity 320ms ease, transform 320ms ease; will-change: opacity, transform; } .hv-shop-hero-text.is-on { opacity: 1; transform: none; transition: opacity 560ms cubic-bezier(0.2, 0.7, 0.2, 1) 420ms, transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1) 420ms; } .hv-shop-hero-title { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-shop-hero-controls { position: relative; z-index: 1; display: none; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; } .hv-shop-hero-counter { font-size: 12px; font-weight: 600; color: var(--h-ink-3); font-variant-numeric: tabular-nums; } .hv-shop-hero-counter-m { position: absolute; right: 16px; bottom: 16px; z-index: 1; color: #ffffff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } @media (min-width: 768px) { .hv-shop-hero-track { gap: 12px; transform: none; align-items: center; } /* 포커스 = 가운데(order 2), 양옆은 살짝 작아져 뒤로(scale .92 + 투명도, 블러 없음). 호버·키보드 포커스는 강조만 — 순서를 옮기면 포인터 밑 카드가 갈려 mouseenter 가 쏟아진다 */ .hv-shop-hero-card { width: calc((100% - 24px) / 3); border-radius: var(--h-radius-card); order: var(--o, 2); opacity: 0.55; transform: scale(0.92); transform-origin: center; transition: opacity 480ms var(--h-ease), transform 480ms var(--h-ease); } .hv-shop-hero-card.is-focus { opacity: 1; transform: none; } .hv-shop-hero-card[data-off='1'] { display: none; } .hv-shop-hero-card:not(.is-focus) .hv-shop-hero-text { opacity: 0; transform: translateY(18px); } .hv-shop-hero-card:hover, .hv-shop-hero-card:focus-visible { opacity: 1; } .hv-shop-hero-card:hover .hv-shop-hero-text, .hv-shop-hero-card:focus-visible .hv-shop-hero-text { opacity: 1; transform: none; } .hv-shop-hero-text { padding: 64px 20px 20px; } .hv-shop-hero-title { font-size: 24px; } .hv-shop-hero-controls { display: flex; } .hv-shop-hero-counter-m { display: none; } } /* ---- 바로가기 칩: 모바일 한 스크롤러에 두 줄(아래 줄 패럴랙스 --sx × .14) · PC 가운데 두 줄 ---- */ .hv-shop-quick { margin-top: 24px; } .hv-shop-quick ul { display: flex; flex-direction: column; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--h-gutter)); padding: 0 var(--h-gutter); scrollbar-width: none; } .hv-shop-quick ul::-webkit-scrollbar { display: none; } .hv-shop-quick ul > li { display: flex; gap: 8px; width: max-content; } .hv-shop-quick ul > li:nth-child(2) { transform: translateX(calc(var(--sx, 0) * 0.14px)); will-change: transform; } .hv-quick-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 48px; padding: 6px 10px 6px 6px; border: 0; border-radius: var(--h-radius-card); background: var(--h-surface); color: var(--h-ink); cursor: pointer; } .hv-quick-chip:focus-visible { outline: 2px solid var(--h-ink); outline-offset: -3px; } .hv-quick-chip__thumb { flex: 0 0 auto; width: 28px; height: 28px; overflow: hidden; border-radius: var(--h-radius-card); background: #ffffff; } .hv-quick-chip__thumb--icon { display: flex; align-items: center; justify-content: center; } .hv-quick-chip__thumb img { width: 100%; height: 100%; object-fit: cover; } .hv-quick-chip__text { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; } .hv-quick-chip__label { font-size: 13px; font-weight: 600; } .hv-quick-chip__sub { font-size: 11px; font-weight: 500; color: var(--h-ink-3); } .hv-quick-chip__count { font-variant-numeric: tabular-nums; } @media (min-width: 768px) { .hv-shop-quick { margin-top: 32px; } .hv-shop-quick ul { gap: 10px; margin: 0; padding: 0; } .hv-shop-quick ul > li { gap: 10px; margin-inline: auto; } .hv-shop-quick ul > li:nth-child(2) { transform: none; will-change: auto; } .hv-quick-chip { gap: 8px; padding: 8px 12px 8px 8px; } .hv-quick-chip__thumb { width: 32px; height: 32px; } .hv-quick-chip__label { font-size: 15px; } } /* ---- 쉬어가는 이야기: 다크 풀블리드 띠, 안쪽은 컨테이너 폭 ---- */ .hv-story-band { margin: 56px calc(-1 * var(--h-gutter)) 0; padding: 36px 0 40px; background: #0a0a0a; color: #ffffff; } .hv-story-band__inner { max-width: var(--h-container); margin: 0 auto; padding: 0 16px; } .hv-story-band__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; } .hv-story-band__more { flex: 0 0 auto; min-height: 48px; padding: 0; border: 0; background: transparent; font-size: 13px; color: rgba(255, 255, 255, 0.72); cursor: pointer; } .hv-story-band__empty { justify-content: flex-start; padding: 8px 0 0; text-align: left; } @media (min-width: 768px) { .hv-story-band { position: relative; left: 50%; right: auto; width: 100vw; margin: 64px 0 0; padding: 40px 0 44px; transform: translateX(-50%); } .hv-story-band__inner { padding: 0 24px; } } /* ---- 브랜드 알약: 모바일 어긋난 두 줄(아래 줄 패럴랙스) · PC 한 줄 nowrap 스크롤 ---- */ .hv-brand-pills { max-width: 100%; overflow-x: auto; margin: 0 calc(-1 * var(--h-gutter)); padding: 0 var(--h-gutter); } .hv-brand-pills__rows { display: flex; flex-direction: column; gap: 8px; min-width: 0; width: max-content; } .hv-brand-pills__row { display: flex; gap: 8px; width: max-content; } .hv-brand-pills__row:nth-child(2) { transform: translateX(calc(var(--sx, 0) * 0.14px)); will-change: transform; } .hv-brand-pill { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border: 1px solid var(--h-line); border-radius: 999px; background: var(--h-bg); color: var(--h-ink); font-size: 13px; font-weight: 600; cursor: pointer; } .hv-brand-pill[aria-pressed='true'] { border-color: var(--h-ink); background: var(--h-ink); color: var(--h-bg); } .hv-brand-pill__avatar { flex: 0 0 auto; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: #ffffff; } .hv-brand-pill__avatar img { width: 100%; height: 100%; object-fit: cover; } .hv-brand-pill__name { white-space: nowrap; } .hv-rail--brand { margin-top: 20px; } .hv-shop-more-wrap { display: flex; justify-content: center; margin-top: 20px; } .hv-shop-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 48px; border: 1px solid var(--h-line); border-radius: var(--h-radius-btn); background: transparent; color: var(--h-ink); font-size: 14px; font-weight: 600; cursor: pointer; } @media (min-width: 768px) { .hv-brand-pills { margin: 0; padding: 0; } .hv-brand-pills__rows { flex-direction: row; flex-wrap: nowrap; } .hv-brand-pills__row { display: contents; } .hv-brand-pills__row:nth-child(2) { transform: none; will-change: auto; } .hv-shop-more { width: 280px; } } /* ---- 리밋 히어로 오버레이(원본 ShopLimitHero): 좌상단 LIVE 필(흰 면 + 펄스 도트) + 스크림 위 브랜드(22/24 800)·기획전명(13 500 .82) ---- */ @keyframes hv-shop-pulse { 50% { opacity: 0.5; } } .hv-shop-hero-pill { position: absolute; left: 16px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--h-bg); color: var(--h-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .hv-shop-hero-pill__dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--h-live, #c8102e); animation: hv-shop-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .hv-shop-hero-brand { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-shop-hero-sub { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; opacity: 0.82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 768px) { .hv-shop-hero-pill { top: 16px; } .hv-shop-hero-brand { font-size: 24px; } } /* ---- 운영자 배너 폴백(리밋 히어로 없을 때만, 원본 page.tsx): 760 컬럼 카드 16:9 · md 21:9, 이름 오버레이 ---- */ .hv-shop-banner { width: 100%; margin: 16px auto 0; } @media (min-width: 1024px) { .hv-shop-banner { max-width: 760px; } } .hv-shop-banner__link { position: relative; display: block; overflow: hidden; border-radius: var(--h-radius-card); } .hv-shop-banner__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } @media (min-width: 768px) { .hv-shop-banner__img { aspect-ratio: 21 / 9; } } .hv-shop-banner__name { position: absolute; left: 16px; right: 16px; bottom: 16px; font-size: 18px; font-weight: 700; color: #ffffff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- 공구 LIVE 바(원본 ⑤, 상단 히어로 없을 때만): 화이트 카드 + 펄스 도트 + 레드 LIVE ---- */ .hv-shop-gblive { margin-top: 48px; } .hv-shop-gblive__link { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 14px 16px; border: 1px solid var(--h-line); border-radius: var(--h-radius-card); background: #ffffff; color: inherit; transition: border-color 160ms var(--h-ease); } .hv-shop-gblive__link:hover { border-color: #000000; } .hv-shop-gblive__dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--h-live, #c8102e); animation: hv-shop-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .hv-shop-gblive__text { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-shop-gblive__live { color: var(--h-point, #c8102e); } .hv-shop-gblive__go { flex: 0 0 auto; font-size: 12px; color: #4b5563; } /* ---- 바로가기 칩 AD 알약(원본 ch.ad — 일반 보조 문구와 구분) ---- */ .hv-quick-chip__ad { flex: 0 0 auto; align-self: center; padding: 4px 8px; font-size: 11px; font-weight: 600; line-height: 1; background: var(--h-line); color: var(--h-ink-2); border-radius: var(--h-radius-chip); } /* ---- 쉬어가는 이야기 카드 트랙(원본 .shop-story-track/.shop-story-card): 모바일 70% 카드 + 다음 장 일부(스냅) · PC 4열 페이지 이동(--pg) ---- */ .hv-story-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px; } .hv-story-card { position: relative; display: block; flex: 0 0 70%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--h-radius-card); background: #1a1a1a; color: #ffffff; scroll-snap-align: start; } .hv-story-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-story-card__tag { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: 11px; font-weight: 600; } .hv-story-card__tag i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #ffffff; } .hv-story-card__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 14px 14px; text-align: left; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 62%, rgba(0, 0, 0, 0.68) 100%); color: #ffffff; } .hv-story-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.375; } .hv-story-card__meta { display: block; margin-top: 4px; font-size: 13px; opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-story-band__more { text-decoration: none; } .hv-story-band__pager { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; } .hv-story-band__count { min-width: 48px; text-align: center; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; } .hv-round-btn--dark { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } @media (min-width: 768px) { .hv-story-band__viewport { overflow: hidden; } .hv-story-track { gap: 16px; overflow: visible; margin: 0; padding: 0; transform: translateX(calc(var(--pg, 0) * (-100% - 16px))); transition: transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1); } .hv-story-card { flex: 0 0 calc((100% - 48px) / 4); } .hv-story-card__text { padding: 64px 16px 16px; } .hv-story-band__pager { display: flex; } } /* ---- 모션 최소화 — 반드시 위 패럴랙스/전환 규칙들 뒤(미디어쿼리는 특이도를 올리지 않는다) ---- */ @media (prefers-reduced-motion: reduce) { .hv-story-track { transition: none; } .hv-shop-hero-pill__dot, .hv-shop-gblive__dot { animation: none; } .hv-shop-quick ul > li:nth-child(2), .hv-brand-pills__row:nth-child(2) { transform: none; } .hv-shop-hero-track, .hv-shop-hero-card, .hv-pc, .hv-pc__img-main, .hv-pc__img-hover { transition: none; } .hv-shop-hero-text { transition: none; transform: none; } } @media (min-width: 768px) and (prefers-reduced-motion: reduce) { .hv-shop-hero-card { opacity: 0.6; transform: scale(0.94); } .hv-shop-hero-card.is-focus { opacity: 1; } } /* ------------------------------------------------------------------ * HAVEA 검색 (원본 app/(fullscreen)/search/*) — 전체화면 지면. 원본 Tailwind/인라인 값을 CSS 로 풀어 이식(md = 768). * 셸 숨김은 _havea-login.css 의 .page[data-havea-fullscreen] 규칙 공용, 바탕만 흰 면으로 되돌린다(data-havea-search). * 소비처: src/pages/HaveaSearch/*. 헤더 검색 패널 우열(최근 본 상품·스토리)은 _havea-header.css. * ------------------------------------------------------------------ */ .page[data-havea-search] .page__content.site { background: var(--h-bg); } .hv-search { min-height: 100vh; background: var(--h-bg); color: var(--h-ink); word-break: keep-all; } /* 상단 toolbar — 닫기 + 홈 (sticky, 흰 유리) */ .hv-search-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @media (min-width: 768px) { .hv-search-bar { padding: 12px 40px; } } .hv-search-bar__btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: inherit; transition: background 160ms var(--h-ease); } .hv-search-bar__btn:hover { background: rgba(0, 0, 0, 0.05); } /* 본문 = .h-container(1280 · 인셋 16/40) + pt 24/64 · pb 48/80 */ .hv-search-body { max-width: var(--h-container); margin: 0 auto; padding: 24px var(--hv-inset) 48px; } @media (min-width: 768px) { .hv-search-body { padding-top: 64px; padding-bottom: 80px; } } .hv-search-title { margin: 0; font-size: clamp(28px, 5vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; } .hv-search-caption { max-width: 420px; margin: 8px 0 0; font-size: 13px; opacity: 0.7; } .hv-search-form { margin-top: 24px; } @media (min-width: 768px) { .hv-search-form { margin-top: 40px; } } /* 입력 = 완전 pill(잉크 아웃라인), 좌측 아이콘, 검색 버튼 없음 */ .hv-search-field { position: relative; } .hv-search-field__icon { position: absolute; left: 16px; top: 0; bottom: 0; display: flex; align-items: center; color: #000000; pointer-events: none; } .hv-search-input { width: 100%; height: 48px; padding: 0 16px 0 48px; border: 1px solid var(--h-ink); border-radius: 999px; background: var(--h-bg); color: var(--h-ink); font: inherit; font-size: 16px; line-height: 24px; transition: border-color 160ms var(--h-ease); } .hv-search-input::placeholder { color: rgb(156, 163, 175); opacity: 1; } .hv-search-input:focus { border-color: #000000; outline: none; } .hv-search-input::-webkit-search-cancel-button { display: none; } /* 자동완성 — 라운드 카드, 그룹 라벨(caption 대문자 자간), 터치 48 행 */ .hv-search-suggest { margin-top: 12px; overflow: hidden; border: 1px solid var(--h-line); border-radius: var(--h-radius-card); } .hv-search-suggest__group { display: block; padding: 12px 12px 4px; font-size: 11px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: #9ca3af; } .hv-search-suggest__list { margin: 0; padding: 0; list-style: none; } .hv-search-suggest__row { border-bottom: 1px solid var(--h-line); } .hv-search-suggest__row:last-child { border-bottom: 0; } .hv-search-suggest__btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 160ms var(--h-ease); } .hv-search-suggest__btn:hover { background: rgba(0, 0, 0, 0.04); } .hv-search-suggest__thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--h-radius-card); background: var(--h-bg-product); object-fit: cover; } .hv-search-suggest__thumb--story { border-radius: 8px; } .hv-search-suggest__body { flex: 1; min-width: 0; } .hv-search-suggest__name { display: block; min-width: 0; flex: 1; font-size: 15px; line-height: normal; letter-spacing: 0.15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-search-suggest__brand { display: block; font-size: 11px; line-height: normal; letter-spacing: 0.15px; color: #6b7280; } .hv-search-suggest__price { flex: 0 0 auto; font-size: var(--h-fs-body); line-height: normal; letter-spacing: 0.15px; font-weight: 700; } .hv-search-suggest__all { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border: 0; border-top: 1px solid var(--h-line); background: transparent; font-family: var(--font-en); font-size: 11px; font-weight: 600; line-height: normal; letter-spacing: 0.55px; text-transform: uppercase; color: inherit; cursor: pointer; transition: background 160ms var(--h-ease); } .hv-search-suggest__all:hover { background: rgba(0, 0, 0, 0.04); } /* 섹션 리듬 — mt 40/56, 최근 본 상품 48/64 */ .hv-search-sec { margin-top: 40px; } .hv-search-sec--narrow { max-width: 520px; } .hv-search-sec--viewed { margin-top: 48px; } @media (min-width: 768px) { .hv-search-sec { margin-top: 56px; } .hv-search-sec--viewed { margin-top: 64px; } } .hv-search-sec__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .hv-search-eyebrow { margin: 0; font-family: var(--font-en); font-size: 11px; font-weight: 500; letter-spacing: var(--h-track-wider); text-transform: uppercase; color: var(--h-ink-2); } .hv-search-sec__action { min-height: 48px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--h-ink-3); cursor: pointer; } .hv-search-chips { display: flex; flex-wrap: wrap; gap: 8px; } .hv-search-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--h-line); border-radius: 999px; background: var(--h-bg); color: var(--h-ink); font: inherit; font-size: 13px; cursor: pointer; } .hv-search-chip:hover { border-color: var(--h-ink); } /* 최신 스토리 — 144 카드 4:5, 제목 2줄 캡션 */ .hv-search-stories { margin: 12px -16px 0; padding: 0 16px; overflow-x: auto; } .hv-search-stories__list { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; } .hv-search-story { flex: 0 0 auto; width: 144px; } .hv-search-story__link { display: block; color: inherit; } .hv-search-story__cover { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--h-radius-card); background: var(--h-bg-product); } .hv-search-story__cover img { width: 100%; height: 100%; object-fit: cover; } .hv-search-story__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 11px; font-weight: 500; line-height: normal; letter-spacing: 0.15px; } /* 순위 장부 — 헤딩(t-h3) → 16px → 2px 잉크 룰 → 행(48, 1px 헤어라인, 마지막 행 열어 둠) */ .hv-search-h3 { margin: 4px 0 0; font-size: 18px; font-weight: 500; line-height: 25.2px; letter-spacing: normal; } .hv-search-rank { display: grid; margin: 16px 0 0; padding: 4px 0 0; list-style: none; border-top: 2px solid var(--h-ink, #161513); } .hv-search-rank__row { border-bottom: 1px solid var(--h-line); } .hv-search-rank__row:last-child { border-bottom: 0; } .hv-search-rank__btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .hv-search-rank__btn:hover { opacity: 0.8; } .hv-search-rank__no { width: 18px; font-family: var(--font-en); font-size: 14px; font-weight: 700; color: var(--h-ink); font-variant-numeric: tabular-nums; } .hv-search-rank__q { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 최근 본 상품 — 132 카드 가로 레일 + PC 넘김 화살표 */ .hv-search-hscroll { position: relative; } .hv-search-hscroll__track { margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; } .hv-search-viewed { display: flex; gap: 12px; } .hv-search-viewed__card { flex: 0 0 auto; width: 132px; } /* ============================================================================ HAVEA 상품 목록 4종 — /products(검색·전체) · /categories/:no · /best · /newest (C-1) 원본: app/(shop)/{products,categories/[no],best,newest}/page.tsx 의 Tailwind/inline 값을 같은 값의 CSS 로. ListToolbar · SortSelect · DensityToggle · FilterPanel · PriceRangeSlider · ActiveFilterChips · Pagination · CategoryChipStrip · BestTimeframeTabs · BestSubCategoryTabs · BestRankItem · NewestSubCategoryChips. 값은 style.css :root 토큰만(색·간격·모서리·서체). 상품 카드는 _havea-shop.css .hv-pc(격자 변형) 재사용. ============================================================================ */ .hv-list { background: var(--h-bg); color: var(--h-ink); } /* ---- 히어로(제목 띠) — 원본 section pb-10 pt-8 md:pb-14 md:pt-20 + border-b line (카테고리 페이지는 선 없음, BEST 는 검정) ---- */ .hv-list-hero { padding: 32px 0 40px; border-bottom: 1px solid var(--h-line); } .hv-list-hero--noline { border-bottom: 0; } .hv-list-hero--dark { position: relative; overflow: hidden; background: #000; color: #fff; } .hv-list-hero__inner { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 0 var(--hv-inset); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; } .hv-list-hero__eyebrow { margin: 0 0 12px; font-family: var(--font-en); font-size: var(--h-fs-caption); font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wider); text-transform: uppercase; color: var(--h-ink); } .hv-list-hero__eyebrow--muted { color: var(--h-ink-2); } .hv-list-hero--dark .hv-list-hero__eyebrow { color: rgba(255, 255, 255, 0.55); } .hv-list-hero__title { margin: 0; font-size: clamp(56px, 9vw, 140px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; overflow-wrap: anywhere; } .hv-list-hero--stack .hv-list-hero__title { font-family: var(--font-stack); } .hv-list-hero--dark .hv-list-hero__title { font-family: var(--font-en); font-weight: 700; } .hv-list-hero__meta { margin: 12px 0 0; font-size: var(--h-fs-body-sm); color: var(--h-ink-2); } .hv-list-hero__meta + .hv-list-hero__meta { margin-top: 4px; } .hv-list-hero__note { margin: 12px 0 0; font-size: var(--h-fs-body-sm); color: var(--h-ink-3); } .hv-list-hero--dark .hv-list-hero__meta { font-size: 13px; color: rgba(255, 255, 255, 0.65); } /* 빵부스러기 — 원본 ol: 11px · tracking wider · ink-3 · font-en · uppercase, 현재 항목 ink */ .hv-crumb { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); text-transform: uppercase; color: var(--h-ink-3); } .hv-crumb a { color: inherit; text-decoration: none; } .hv-crumb li[aria-current] { color: var(--h-ink); } .hv-list-hero--dark .hv-crumb { color: rgba(255, 255, 255, 0.4); } .hv-list-hero--dark .hv-crumb li[aria-current] { color: #fff; } @media (hover: hover) { .hv-crumb a:hover { opacity: 0.6; } } @media (min-width: 768px) { .hv-list-hero { padding: 80px 0 56px; } } /* ---- 칩 스트립(카테고리 자식/형제/최상위) — 원본 CategoryChipStrip mt-8 + h-chip ---- */ .hv-chip-strip { margin-top: 32px; } .hv-chip-strip__scroll { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 0 var(--hv-inset); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .hv-chip-strip__scroll::-webkit-scrollbar { display: none; } .hv-chip-strip__row { display: flex; gap: 6px; } .hv-newest-chips { margin-top: 24px; } .hv-best-chips { margin-top: 20px; } @media (min-width: 768px) { .hv-newest-chips { margin-top: 32px; } } /* h-chip — 원본 globals.css .h-chip: 48 · 0 16 · 13px · fw m · line 보더 · radius chip */ .hv-chip { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 48px; padding: 0 16px; border: 1px solid var(--h-line); border-radius: var(--h-radius-chip); background: transparent; color: var(--h-ink); font-family: var(--font-stack); font-size: 13px; font-weight: var(--h-fw-m); letter-spacing: var(--h-track-normal); white-space: nowrap; text-decoration: none; cursor: pointer; transition: border-color var(--h-dur-1) var(--h-ease), background var(--h-dur-1) var(--h-ease), color var(--h-dur-1) var(--h-ease); } @media (min-width: 768px) { .hv-chip { height: 34px; padding: 0 14px; font-size: 12px; } } .hv-chip--active, .hv-chip[aria-pressed='true'], .hv-chip[aria-current] { background: var(--h-ink); color: var(--h-bg); border-color: var(--h-ink); } @media (hover: hover) { .hv-chip:not(.hv-chip--active):not([aria-pressed='true']):not([aria-current]):hover { border-color: var(--h-ink); } } /* BEST 다크 띠 위 칩 — 원본 BestSubCategoryTabs: 48 · 0 16 · 999 · 12px · 500 · white 25% 보더 */ .hv-chip--dark { border-radius: 999px; height: 48px; padding: 0 16px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.25); transition: all 160ms var(--h-ease); } .hv-chip--dark.hv-chip--active, .hv-chip--dark[aria-pressed='true'] { background: #fff; color: #000; border-color: #fff; } /* ---- 본문(툴바+격자) — 원본 .h-container pb-16 pt-5 md:pb-24 md:pt-8 ---- */ .hv-list-body { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 20px var(--hv-inset) 64px; } @media (min-width: 768px) { .hv-list-body { padding-top: 32px; padding-bottom: 96px; } } /* ---- 툴바 — 원본 ListToolbar: flex wrap gap 12 · border-b line · pb 12 · mb 20 ---- */ .hv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--h-line); } /* 필터 버튼 = 원본 h-btn ghost sm(대문자·자간 해제) */ .hv-toolbar__filter { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 16px; border: 1px solid var(--h-line); border-radius: var(--h-radius-btn); background: transparent; color: var(--h-ink); font: inherit; font-size: 13px; font-weight: var(--h-fw-m); letter-spacing: var(--h-track-normal); cursor: pointer; } .hv-toolbar__brands { display: none; } .hv-toolbar__spacer { flex: 1 1 0; } .hv-toolbar__count { margin-left: auto; font-size: var(--h-fs-body-sm); color: var(--h-ink-2); } @media (min-width: 768px) { .hv-toolbar__filter { height: var(--h-h-btn-sm); padding: 0 14px; font-size: 11px; } .hv-toolbar__brands { display: flex; flex: 1 1 0; min-width: 0; gap: 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .hv-toolbar__brands::-webkit-scrollbar { display: none; } } /* 정렬 드롭 — 원본 SortSelect(홈 SortDrop 문법): 텍스트 트리거 + 캡슐 시트 리스트박스 */ .hv-sort { position: relative; } .hv-sort__trigger { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 4px; border: 0; background: none; cursor: pointer; font-family: var(--font-stack); font-size: 14px; font-weight: 700; letter-spacing: var(--h-track-normal); color: var(--h-ink); } .hv-sort__chev { transition: transform 160ms var(--h-ease); } .hv-sort__trigger[aria-expanded='true'] .hv-sort__chev { transform: rotate(180deg); } .hv-sort__list { position: absolute; right: 0; top: calc(100% + 2px); z-index: 70; min-width: 140px; margin: 0; padding: 6px; list-style: none; background: var(--h-bg); border: 1px solid var(--h-line); border-radius: var(--h-radius-card); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .hv-sort__opt { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--h-radius-btn); background: none; cursor: pointer; font-family: var(--font-stack); font-size: 14px; font-weight: 500; color: var(--h-ink-2); text-align: left; } .hv-sort__opt[aria-selected='true'] { font-weight: 700; color: var(--h-ink); } /* 밀도 토글 — 원본 DensityToggle: md+ 만, gap 2 · line 보더 · radius btn · 48×48 · 11px 600 */ .hv-density { display: none; } @media (min-width: 768px) { .hv-density { display: flex; gap: 2px; overflow: hidden; border: 1px solid var(--h-line); border-radius: var(--h-radius-btn); } } .hv-density__btn { width: 48px; height: 48px; border: 0; background: transparent; color: var(--h-ink); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 160ms, color 160ms; } .hv-density__btn[aria-checked='true'] { background: var(--h-ink); color: var(--h-bg); } /* 적용 중 필터 칩 — 원본 ActiveFilterChips: gap 6 · wrap · mb 16 */ .hv-active-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .hv-active-chips__clear { align-self: center; margin-left: 4px; font-size: var(--h-fs-body-sm); color: var(--h-ink-2); text-decoration: underline; text-underline-offset: 2px; } /* ---- 격자 — 원본 gridDensityClass: 2열 gap 12/32, md gap 20/48, 밀도별 md/lg 컬럼 ---- */ .hv-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 32px; } @media (min-width: 768px) { .hv-list-grid { column-gap: 20px; row-gap: 48px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .hv-list-grid[data-density='compact'] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hv-list-grid[data-density='spacious'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .hv-list-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hv-list-grid[data-density='compact'] { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hv-list-grid[data-density='spacious'] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 빈 결과 — 원본 min-h 200 · 세로 중앙 · gap 12 */ .hv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 200px; text-align: center; } .hv-empty__text { margin: 0; font-size: var(--h-fs-body); color: var(--h-ink-2); } .hv-empty__link { font-size: var(--h-fs-caption); text-transform: uppercase; letter-spacing: var(--h-track-wider); color: var(--h-ink); text-decoration: underline; text-underline-offset: 4px; } .hv-empty-recs { margin-top: 40px; } .hv-empty-recs__title { margin: 0 0 16px; font-size: var(--h-fs-h3); font-weight: 700; } .hv-empty-recs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (min-width: 768px) { .hv-empty-recs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---- 페이지네이션 — 원본 Pagination: mt 56 · gap 6 · 48/36 버튼 · radius input ---- */ .hv-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 56px; } .hv-pagination__list { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } .hv-pagination__gap { padding: 0 4px; font-size: var(--h-fs-caption); color: var(--h-ink-3); } .hv-page-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; min-width: 48px; padding: 0 8px; border: 1px solid var(--h-line); border-radius: var(--h-radius-input); background: var(--h-bg); color: var(--h-ink); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: var(--h-track-wider); text-transform: uppercase; text-decoration: none; transition: border-color var(--h-dur-1) var(--h-ease), background var(--h-dur-1) var(--h-ease); } .hv-page-btn--num { padding: 0; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: normal; } .hv-page-btn[aria-current='page'] { background: var(--h-ink); color: var(--h-bg); border-color: var(--h-ink); } .hv-page-btn[aria-disabled='true'] { opacity: 0.3; pointer-events: none; } @media (min-width: 768px) { .hv-page-btn { height: 36px; min-width: 36px; font-size: 11px; } } @media (hover: hover) { .hv-page-btn:not([aria-current]):not([aria-disabled]):hover { border-color: var(--h-ink); background: var(--h-surface); } } /* 크롤러/보조기기용 숨김 페이지네이션(원본 sr-only) */ .hv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- 필터 시트 — 원본 ListToolbar drawer: fixed inset 0 z 50 · 딤 · 우측 aside max 384 · p 24 ---- */ /* ⚠️ 클래스 접두는 hv-fsheet — _havea-ui.css 의 바텀시트 셸 .hv-sheet(동의·재입고 시트)와 이름이 겹쳐 PC 동의 시트가 우측 풀높이 드로어로 그려졌다(9/14 실측). 같은 이름 재사용 금지. */ .hv-fsheet { position: fixed; inset: 0; z-index: 50; } .hv-fsheet__scrim { position: absolute; inset: 0; border: 0; padding: 0; background: var(--h-dim-sheet); cursor: pointer; } .hv-fsheet__panel { position: absolute; right: 0; top: 0; height: 100%; width: 100%; max-width: 384px; padding: 24px; overflow-y: auto; background: var(--h-bg); color: var(--h-ink); } .hv-fsheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .hv-fsheet__title { margin: 0; font-size: var(--h-fs-h3); font-weight: var(--h-fw-m); line-height: 1.4; } .hv-fsheet__close { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -8px; border: 0; background: none; color: var(--h-ink); font-size: 18px; line-height: 28px; cursor: pointer; } /* 필터 패널 — 원본 FilterPanel: 그룹 border-b pb 14 · 제목 12px 600 uppercase · 버킷 칩 · 커스텀 입력 · 브랜드 체크 ---- */ .hv-filter > :not([hidden]) ~ :not([hidden]) { margin-top: 20px; } @media (min-width: 1024px) { .hv-filter { position: sticky; top: 96px; padding-right: 16px; } } .hv-filter__head { display: flex; align-items: center; justify-content: space-between; } .hv-filter__eyebrow { margin: 0; font-family: var(--font-en); font-size: var(--h-fs-caption); font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wider); text-transform: uppercase; } .hv-filter__clear, .hv-filter__more { border: 0; background: none; padding: 0; font-family: inherit; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: rgb(75, 85, 99); text-underline-offset: 4px; cursor: pointer; } .hv-filter__more { margin-top: 8px; } @media (hover: hover) { .hv-filter__clear:hover, .hv-filter__more:hover { text-decoration: underline; } } .hv-filter__group { padding-bottom: 14px; border-bottom: 1px solid var(--h-line); } .hv-filter__h { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .hv-filter__h--flush { margin-bottom: 0; } .hv-filter__h-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .hv-filter__h-count { margin-left: 4px; letter-spacing: 0; text-transform: none; color: rgb(107, 114, 128); } .hv-filter__buckets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .hv-filter__custom { display: flex; gap: 8px; margin-top: 12px; } .hv-filter__input { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--h-line); border-radius: var(--h-radius-input); background: var(--h-bg); color: var(--h-ink); font-family: inherit; font-size: var(--h-fs-body); transition: border-color var(--h-dur-1) var(--h-ease); } .hv-filter__input::placeholder { color: var(--h-ink-3); } .hv-filter__input:focus { outline: none; border-color: var(--h-ink); } .hv-filter__input--brand { margin-bottom: 8px; } .hv-filter__apply-price { white-space: nowrap; } .hv-filter__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .hv-filter__opt { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; font-size: var(--h-fs-body); } .hv-filter__opt input { accent-color: var(--h-ink); } .hv-filter__opt-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hv-filter__nomatch { font-size: var(--h-fs-body-sm); color: var(--h-ink-2); } /* 적용 바 — 원본 sticky bottom 0 · -mx-6 px-6 · bg .98 · 상단 line · safe-area (§7.7 스티키 바) */ .hv-filter__apply { position: sticky; bottom: 0; margin-left: -24px; margin-right: -24px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.98); border-top: 1px solid var(--h-line); } .hv-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: var(--h-h-btn); padding: 0 24px; border: 0; border-radius: var(--h-radius-btn); background: var(--h-ink); color: var(--h-bg); font-family: var(--font-en); font-size: var(--h-fs-btn); font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wide); text-transform: uppercase; cursor: pointer; } .hv-btn-ghost-sm { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 16px; border: 1px solid var(--h-line); border-radius: var(--h-radius-btn); background: transparent; color: var(--h-ink); font-family: var(--font-en); font-size: 13px; font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wide); text-transform: uppercase; cursor: pointer; } @media (min-width: 768px) { .hv-btn-ghost-sm { height: var(--h-h-btn-sm); padding: 0 14px; font-size: 11px; } } /* 가격 범위 dual-thumb — 원본 PriceRangeSlider: 겹친 range 두 개, 트랙 6px, thumb 16 원형 ink 보더 */ .hv-range { position: relative; padding: 8px 0 24px; } .hv-range__track { position: relative; height: 6px; } .hv-range__base { position: absolute; inset: 0; border-radius: 999px; background: var(--h-line); } .hv-range__sel { position: absolute; top: 0; height: 6px; border-radius: 999px; background: var(--h-ink); } .hv-range input[type='range'] { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 6px; margin: 0; padding: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; } .hv-range input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--h-ink); background: var(--h-bg); pointer-events: auto; cursor: pointer; } .hv-range input[type='range']::-moz-range-thumb { width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--h-ink); background: var(--h-bg); pointer-events: auto; cursor: pointer; } .hv-range input[type='range']::-moz-range-track { background: transparent; } .hv-range input[type='range']:focus-visible { outline: none; } .hv-range input[type='range']:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--h-ink); outline-offset: 2px; } .hv-range__labels { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; line-height: 16px; color: rgb(75, 85, 99); } /* ---- BEST 타임프레임 탭 — 원본 BestTimeframeTabs: 모바일 4×1fr gap 4 / PC 4×220 + 1fr gap 8 ---- */ .hv-tf { position: relative; width: 100%; max-width: var(--h-container); margin: 40px auto 0; padding: 0 var(--hv-inset); } .hv-tf__grid { display: grid; gap: 4px; align-items: stretch; grid-template-columns: repeat(4, 1fr); } .hv-tf__btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 8px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; text-align: left; cursor: pointer; transition: all 160ms var(--h-ease); } .hv-tf__btn[aria-pressed='true'] { background: #fff; color: #000; border-color: #fff; } .hv-tf__dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 999px; background: var(--h-point); box-shadow: 0 0 0 4px rgba(255, 110, 30, 0.25); animation: hvBestPulse 1.4s ease-in-out infinite; } .hv-tf__en { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: var(--h-track-wider); opacity: 0.55; } .hv-tf__btn[aria-pressed='true'] .hv-tf__en { opacity: 0.7; } .hv-tf__kr { font-family: var(--font-en); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .hv-tf__range { display: none; } .hv-tf__range-label { font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); color: rgba(255, 255, 255, 0.45); } .hv-tf__range-hint { margin-top: 2px; font-size: 13px; color: #fff; } .hv-tf__updated { margin-top: 6px; font-family: var(--font-en); font-size: 11px; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; } @media (min-width: 768px) { .hv-tf__grid { gap: 8px; grid-template-columns: repeat(4, minmax(0, 220px)) 1fr; } .hv-tf__btn { padding: 20px 18px; } .hv-tf__en { font-size: 12px; } .hv-tf__kr { font-size: 26px; } .hv-tf__range { display: flex; flex-direction: column; justify-content: flex-end; margin-left: 8px; padding: 12px 0 4px 8px; border-left: 1px solid rgba(255, 255, 255, 0.14); } } @keyframes hvBestPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .hv-tf__dot { animation: none; } } /* BEST 순위 아이템 — 원본 BestRankItem: 번호 22/32 font-en 700 · TOP3 8px 마커 · 등락 11px .12em 600 */ .hv-rank { position: relative; } .hv-rank__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .hv-rank__num { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-en); font-size: 22px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--h-ink); font-variant-numeric: tabular-nums; } .hv-rank__dot { display: inline-block; width: 8px; height: 8px; margin-right: 2px; background: var(--h-ink); transform: translateY(-2px); } .hv-rank__trend { font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; } .hv-rank__trend--point { color: var(--h-point); } .hv-rank__trend--sale { color: var(--h-sale); } .hv-rank__trend--info { color: var(--h-info); } .hv-rank__trend--muted { color: var(--h-ink-3); } @media (min-width: 768px) { .hv-rank__num { font-size: 32px; } } /* BEST 검정 띠 풀블리드 — 본문 열(.l-content, 컨테이너 1280)이 뷰포트 가운데 있으므로 box-shadow 로 좌우를 뷰포트 끝까지 칠하고 clip-path 로 위아래만 잘라낸다(가상요소 100vw 방식은 서브픽셀 이음새가 생겼다). 원본은 뷰포트 풀폭 section. */ .hv-list-hero--dark { overflow: visible; box-shadow: 0 0 0 100vmax #000; clip-path: inset(0 -100vmax); } /* ============================================================================ HAVEA 공용 UI 원자 — 원본 globals.css 의 .h-btn 계열·.h-input·.t-eyebrow·.t-small + components/{Toast, LoginRequiredModal, QtyStepper, ModalCloseButton, ProductImage, CouponTicketCard} 를 같은 값으로. 값은 전부 style.css :root 토큰. 여러 화면(PDP·카트·주문서)이 공유한다. ============================================================================ */ /* ---- 타이포 유틸 (원본 .t-eyebrow / .t-small) ---- */ .t-eyebrow { font-size: var(--h-fs-caption); letter-spacing: var(--h-track-wider); text-transform: uppercase; font-weight: var(--h-fw-m); color: var(--h-ink); font-family: var(--font-en); } .t-small { font-size: var(--h-fs-body-sm); color: var(--h-ink-2); } .t-display-xl { font-size: var(--h-fs-display-xl); font-weight: var(--h-fw-b); line-height: 0.95; letter-spacing: var(--h-track-display); font-family: var(--font-en); } .t-display-l { font-size: var(--h-fs-display-l); font-weight: var(--h-fw-b); line-height: 0.98; letter-spacing: var(--h-track-display); font-family: var(--font-en); } .t-display-m { font-size: var(--h-fs-display-m); font-weight: var(--h-fw-sb); line-height: 1.05; letter-spacing: var(--h-track-tight); font-family: var(--font-en); } .t-h1 { font-size: var(--h-fs-h1); font-weight: var(--h-fw-sb); line-height: 1.15; letter-spacing: var(--h-track-tight); } .t-h2 { font-size: var(--h-fs-h2); font-weight: var(--h-fw-m); line-height: 1.25; letter-spacing: var(--h-track-tight); } .t-h3 { font-size: var(--h-fs-h3); font-weight: var(--h-fw-m); line-height: 1.4; } .t-body { font-size: var(--h-fs-body); } .t-mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .t-price { font-size: 15px; font-weight: var(--h-fw-sb); font-variant-numeric: tabular-nums; } .t-strike { text-decoration: line-through; color: var(--h-ink-3); font-weight: var(--h-fw-r); } .t-en { font-family: var(--font-en); font-feature-settings: 'ss01'; } /* ---- 버튼 (원본 .h-btn 문법 그대로) ---- */ .h-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-h-btn); padding: 0 24px; border: 0; border-radius: var(--h-radius-btn); font-size: var(--h-fs-btn); font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wide); text-transform: uppercase; font-family: var(--font-en); text-decoration: none; cursor: pointer; transition: opacity var(--h-dur-1) var(--h-ease), background var(--h-dur-1) var(--h-ease), color var(--h-dur-1) var(--h-ease), transform var(--h-dur-1) var(--h-ease); white-space: nowrap; user-select: none; } .h-btn:active { transform: translateY(1px); } .h-btn--primary { background: var(--h-ink); color: var(--h-bg); } .h-btn--secondary { background: var(--h-bg); color: var(--h-ink); border: 1px solid var(--h-ink); } .h-btn--ghost { background: transparent; color: var(--h-ink); border: 1px solid var(--h-line); } @media (hover: hover) { .h-btn--primary:hover { opacity: 0.86; } .h-btn--secondary:hover { background: var(--h-ink); color: var(--h-bg); } .h-btn--ghost:hover { border-color: var(--h-ink); } } .h-btn--point { background: var(--h-point); color: #ffffff; } .h-btn--block { width: 100%; } .h-btn--sm { height: 48px; padding: 0 16px; font-size: 13px; } @media (min-width: 768px) { .h-btn--sm { height: var(--h-h-btn-sm); padding: 0 14px; font-size: 11px; } } .h-btn--lg { height: var(--h-h-btn-lg); padding: 0 32px; font-size: 14px; } @media (max-width: 767px) { .h-btn--lg { padding: 0 24px; font-size: 13px; } } .h-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ---- 입력 (원본 .h-input) ---- */ .h-input { width: 100%; height: var(--h-h-input); padding: 0 14px; background: var(--h-bg); border: 1px solid var(--h-line); border-radius: var(--h-radius-input); font-size: var(--h-fs-body); color: var(--h-ink); font-family: inherit; transition: border-color var(--h-dur-1) var(--h-ease); } .h-input:focus { outline: none; border-color: var(--h-ink); } .h-input::placeholder { color: var(--h-ink-3); } /* ---- 시트 그립 핸들 44×4 (§7.2) ---- */ .hv-sheet-handle { display: block; width: 44px; height: 4px; border-radius: 999px; background: var(--h-line-strong); } /* ---- 토스트 (원본 Toast.tsx) ---- */ .hv-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(32px + env(safe-area-inset-bottom, 0px)); z-index: 10001; pointer-events: none; max-width: calc(100vw - 40px); display: flex; justify-content: center; } @media (max-width: 767px) { .hv-toast { bottom: calc(var(--h-h-tabbar, 64px) + 16px + env(safe-area-inset-bottom, 0px)); } } .hv-toast__pill { background: rgba(20, 20, 20, 0.92); color: #ffffff; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; padding: 13px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(8px); transition: opacity 220ms var(--h-ease), transform 220ms var(--h-ease); white-space: nowrap; display: flex; align-items: center; gap: 12px; } .hv-toast__pill.is-visible { opacity: 1; transform: translateY(0); } .hv-toast__msg { overflow: hidden; text-overflow: ellipsis; } .hv-toast__action { pointer-events: auto; color: #ffffff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 12px 2px; margin: -12px 0; white-space: nowrap; } /* ---- 로그인 필요 모달 (원본 LoginRequiredModal.tsx) ---- */ .hv-login-modal { position: fixed; inset: 0; z-index: 10000; background: var(--h-dim-sheet); display: flex; align-items: center; justify-content: center; padding: 24px; } .hv-login-modal[data-mobile] { align-items: flex-end; padding: 0; } .hv-login-modal__panel { position: relative; background: #f4f4f4; width: 100%; max-width: 460px; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); border-radius: 20px; overflow: hidden; opacity: 0; transition: transform 280ms var(--h-ease), opacity 280ms var(--h-ease); } .hv-login-modal__panel.is-entered { opacity: 1; } .hv-login-modal[data-mobile] .hv-login-modal__panel { max-width: 100%; border-radius: 20px 20px 0 0; opacity: 1; transform: translateY(100%); } .hv-login-modal[data-mobile] .hv-login-modal__panel.is-entered { transform: translateY(0); } .hv-login-modal__head { flex-shrink: 0; position: relative; padding: 20px 24px 12px; background: #f4f4f4; } .hv-login-modal__head--m { padding: 10px 0 0; } .hv-login-modal__head--m .hv-sheet-handle { margin: 0 auto 8px; } .hv-login-modal__close { background: transparent; border: none; padding: 4px; cursor: pointer; color: var(--h-ink); display: inline-flex; } .hv-login-modal__title { margin: 12px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .hv-login-modal__title--m { margin: 0; text-align: center; font-size: 18px; padding: 6px 0 14px; } .hv-login-modal__body { padding: 12px 22px 24px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; } .hv-login-modal[data-mobile] .hv-login-modal__body { padding: 14px 18px 22px; } .hv-login-modal__lock { width: 56px; height: 56px; border-radius: 50%; background: #ffffff; display: inline-flex; align-items: center; justify-content: center; color: var(--h-ink); margin-top: 8px; } .hv-login-modal__heading { margin: 2px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--h-ink); } .hv-login-modal[data-mobile] .hv-login-modal__heading { font-size: 16px; } .hv-login-modal__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--h-ink-2); max-width: 300px; white-space: pre-line; } .hv-login-modal__foot { flex-shrink: 0; padding: 14px 22px 20px; background: #f4f4f4; border-top: 1px solid var(--h-line); display: flex; flex-direction: column; gap: 8px; } .hv-login-modal[data-mobile] .hv-login-modal__foot { padding: 12px 18px calc(18px + env(safe-area-inset-bottom)); } .hv-login-modal__cta { width: 100%; height: 52px; background: var(--h-ink); color: #ffffff; border: none; border-radius: 8px; text-align: center; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; } .hv-login-modal__later { width: 100%; height: 48px; background: transparent; color: var(--h-ink-2); border: none; border-radius: 8px; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; } /* ---- 수량 스테퍼 (원본 QtyStepper.tsx — 흰 알약 + 그림자, 시각 32 · 터치 48 히트 슬롭) ---- */ .hv-qty { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; background: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); user-select: none; } .hv-qty__btn, .hv-qty__value { height: 32px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; color: #0e0e0c; border: 0; position: relative; } .hv-qty__btn { width: 34px; cursor: pointer; } .hv-qty__btn::after { content: ''; position: absolute; inset: -8px 0; } .hv-qty__btn--dec { padding-left: 2px; } .hv-qty__btn--inc { padding-right: 2px; } .hv-qty__btn:disabled { opacity: 0.35; cursor: default; } .hv-qty__value { min-width: 24px; padding: 0 4px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---- 모달 닫기 (원본 ModalCloseButton — 48 히트, 24 점유) ---- */ .hv-modal-close { background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; margin: -12px; color: var(--h-ink); } /* ---- 상품 이미지 (원본 ProductImage) ---- */ .hv-pimg { height: 100%; width: 100%; object-fit: cover; } .hv-pimg--contain { object-fit: contain; } .hv-pimg--logo { padding: 22%; } /* ---- 쿠폰 티켓 (원본 CouponTicketCard.tsx) ---- */ .hv-ticket { position: relative; background: #ffffff; border: 1px solid var(--h-line); border-radius: 16px; } .hv-ticket.is-selected { border: 1.5px solid var(--h-ink); } .hv-ticket.is-disabled { background: #f7f7f7; opacity: 0.7; } .hv-ticket__body { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px; } .hv-ticket__display { margin: 0; font-family: var(--font-en); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.02em; color: var(--h-ink); } .hv-ticket__title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--h-ink); } .hv-ticket.is-disabled .hv-ticket__display, .hv-ticket.is-disabled .hv-ticket__title { color: var(--h-ink-3); } .hv-ticket__badge { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 5px; background: rgba(0, 0, 0, 0.05); color: var(--h-ink-2); } .hv-ticket__badge--brand { background: rgba(99, 91, 255, 0.12); color: #5b53ff; } .hv-ticket__conds { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; } .hv-ticket__conds li { display: flex; gap: 7px; font-size: 14px; line-height: 1.45; color: var(--h-ink-2); } .hv-ticket__conds li span:first-child { flex-shrink: 0; } .hv-ticket__perf { position: relative; height: 1px; } .hv-ticket__notch { position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; } .hv-ticket__notch--l { left: -11px; } .hv-ticket__notch--r { right: -11px; } .hv-ticket__dash { position: absolute; left: 15px; right: 15px; top: 0; border-top: 1.5px dashed var(--h-line-strong); } .hv-ticket.is-selected .hv-ticket__dash { border-top-color: var(--h-ink); } .hv-ticket.is-disabled .hv-ticket__dash { opacity: 0.5; } .hv-ticket__foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 18px; gap: 12px; } .hv-ticket__expires { font-size: 14px; color: var(--h-ink-2); font-variant-numeric: tabular-nums; } .hv-ticket__chip { flex-shrink: 0; white-space: nowrap; padding: 9px 16px; border-radius: 999px; border: none; font-size: 14px; font-weight: 600; font-family: inherit; } .hv-ticket__chip--ink { padding: 9px 18px; background: var(--h-ink); color: #ffffff; cursor: pointer; } .hv-ticket__chip--outline { border: 1px solid var(--h-line-strong); background: var(--h-bg); color: var(--h-ink); cursor: pointer; } .hv-ticket__chip--muted { background: var(--h-surface); color: var(--h-ink-3); } /* ---- 공용 시트 셸 (원본 RestockNotifySheet·MadeToOrderConsentSheet — §7.2: radius 20, dim, md+ 중앙 카드) ---- */ @keyframes havea-sheet-backdrop { from { opacity: 0; } to { opacity: 1; } } @keyframes havea-sheet-slide { from { transform: translateY(100%); } to { transform: translateY(0); } } .hv-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: var(--h-dim-sheet); animation: havea-sheet-backdrop 240ms var(--h-ease); } .hv-sheet__panel { width: 100%; background: var(--h-bg); border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 88vh; box-shadow: var(--h-shadow-float); display: flex; flex-direction: column; animation: havea-sheet-slide 280ms cubic-bezier(0.22, 1, 0.36, 1); } .hv-sheet__panel--card { max-width: 28rem; } .hv-sheet__grip { display: flex; flex-shrink: 0; justify-content: center; margin: 8px 0 16px; } .hv-sheet__scroll { overflow-y: auto; flex: 1; padding-top: 8px; } .hv-sheet__titlebar { display: flex; align-items: center; justify-content: space-between; } .hv-sheet__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--h-ink); } .hv-sheet__x { display: flex; height: 48px; width: 48px; flex-shrink: 0; align-items: center; justify-content: center; margin-right: -12px; font-size: 20px; line-height: 1; color: var(--h-ink-2); background: transparent; border: 0; cursor: pointer; } @media (min-width: 768px) { .hv-sheet { align-items: center; } .hv-sheet__panel { border-radius: 20px; } .hv-sheet__grip { display: none; } } @media (prefers-reduced-motion: reduce) { .hv-sheet, .hv-sheet__panel { animation: none !important; } } /* ---- 캡션 타이포 (원본 .t-caption) ---- */ .t-caption { font-size: var(--h-fs-caption); letter-spacing: var(--h-track-wider); text-transform: uppercase; font-weight: var(--h-fw-m); color: var(--h-ink-2); } /* ---- 시각 숨김 (원본 sr-only) ---- */ .hv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 폼 알림 문구 밝은 지면 변형 (원본 FormMessage onDark=false — 색면 7% + --h-warn 글자, 아이콘 없음) */ .hv-msg--light { color: inherit; } .hv-msg--light.hv-msg--error { background: color-mix(in srgb, var(--h-warn) 7%, transparent); border: 1px solid color-mix(in srgb, var(--h-warn) 22%, transparent); color: var(--h-warn); } .hv-msg--light.hv-msg--neutral { background: rgba(0, 0, 0, 0.03); border: 1px solid var(--h-line); } /* ============================================================================ HAVEA 상품 상세(/products/:productNo) — 원본 app/(shop)/products/[productNo]/page.tsx + _components/* 의 클래스·인라인 값을 같은 값으로. globals.css .pdp-grid/.pdp-stage/.pdp-cta-grid + page.tsx 인라인 \3c style>(모바일 커버 스크롤·타이포) 포함. 값은 style.css :root 토큰. 모바일 우선, md 768 / lg 1024. ============================================================================ */ /* ---- 셸: 모바일 집중 모드 (원본 MinimalMobileHeader + [data-mobile-tab-bar]/[data-site-footer] 숨김) ---- */ @media (max-width: 767px) { .page[data-havea-pdp] .hv-mh-m, .page[data-havea-pdp] .hv-tabbar, .page[data-havea-pdp] .l-content ~ footer, .page[data-havea-pdp] .footer { display: none !important; } } .hv-pdp { background: var(--h-bg); color: var(--h-ink); } /* 원본 .h-container pb-32 pt-0 lg:pb-20 (--h-container 1440 + 거터) */ .hv-pdp-container { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 0 var(--hv-inset) 128px; } /* 원본 md:pt-6 — 브랜드 줄이 헤더에 붙지 않게 24 (9/14 좌표 대조: 갤러리 y 101 = 헤더 77 + 24) */ @media (min-width: 768px) { .hv-pdp-container { padding-top: 24px; } } @media (min-width: 1024px) { .hv-pdp-container { padding-bottom: 80px; } } /* ---- 그리드 (원본 .pdp-grid) ---- */ .hv-pdp-grid { display: grid; gap: 16px; grid-template-columns: 1fr; grid-template-areas: 'gallery' 'info' 'sections'; } .hv-pdp-slot-gallery { grid-area: gallery; position: relative; min-width: 0; } .hv-pdp-slot-info { grid-area: info; min-width: 0; } .hv-pdp-slot-info > :where(* + *) { margin-top: 12px; } .hv-pdp-slot-sections { grid-area: sections; min-width: 0; margin-top: 20px; } @media (min-width: 768px) and (max-width: 1023px) { .hv-pdp-grid { gap: 28px; grid-template-columns: 55fr 45fr; grid-template-areas: 'gallery info' 'sections info'; } } /* 원본 PdpColumnSticky(카시나식): 안쪽 스크롤 없음 — 컬럼이 뷰포트보다 짧으면 헤더 아래 96 에서, 길면 바닥이 뷰포트 바닥에 닿을 때 걸린다. top 은 HaveaProductDetail 의 실측(--pdp-col-top). 안쪽 스크롤 상자는 폭 15px 을 먹고 CTA 가 잘렸다(9/14 대조: 열 413 vs 398) */ @media (min-width: 768px) { .hv-pdp-slot-info { position: sticky; top: var(--pdp-col-top, 96px); align-self: start; padding-bottom: 40px; padding-left: 4px; } .hv-pdp-slot-info > :where(* + *) { margin-top: 16px; } } @media (min-width: 1024px) { .hv-pdp-grid { gap: 48px; grid-template-columns: var(--pdp-cols, 7fr 3fr); grid-template-areas: 'gallery info' 'sections info'; } .hv-pdp-slot-info { padding-left: 48px; } .hv-pdp-slot-sections { margin-top: 0; } } /* 모바일 = 스토리 게시글식 커버 스크롤 (안나 8/7 3차): 무대 sticky, 본문 시트가 덮으며 올라온다 */ @media (max-width: 767px) { .hv-pdp-slot-gallery { position: sticky; top: 0; z-index: 0; } .hv-pdp-slot-info { position: relative; z-index: 1; background: var(--h-bg); border-radius: 20px 20px 0 0; margin-inline: -16px; padding-inline: 16px; margin-top: -36px; padding-top: 24px; } .hv-pdp-slot-sections { position: relative; z-index: 1; background: var(--h-bg); margin-inline: -16px; padding-inline: 16px; margin-top: -20px !important; padding-top: 40px; padding-bottom: 24px; } } /* ---- 모바일 오버레이 헤더 (원본 MinimalMobileHeader overlay) ---- */ .hv-pdp-mh { display: none; } @media (max-width: 767px) { .hv-pdp-mh { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding-top: env(safe-area-inset-top, 0px); background: transparent; } } .hv-pdp-mh__row { position: relative; height: var(--h-h-gnb, 56px); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .hv-pdp-mh__chip { border-radius: 999px; background: var(--h-glass-bg); backdrop-filter: var(--h-glass-blur); -webkit-backdrop-filter: var(--h-glass-blur); border: 1px solid var(--h-glass-border); box-shadow: var(--h-glass-shadow); transition: background 200ms var(--h-ease), border-color 200ms var(--h-ease); color: var(--h-ink); } .hv-pdp-mh__back { padding: 14px; cursor: pointer; display: inline-flex; } .hv-pdp-mh__pill { display: flex; gap: 0; align-items: center; } .hv-pdp-mh__btn { padding: 14px; color: currentColor; display: inline-flex; background: transparent; border: 0; cursor: pointer; position: relative; } .hv-pdp-mh__badge { position: absolute; top: 6px; right: 6px; min-width: 14px; height: 14px; font-size: 11px; line-height: 14px; text-align: center; padding: 0 3px; background: var(--h-point); color: #ffffff; font-weight: 700; font-family: var(--font-en); } /* ---- 갤러리 (원본 ImageGallery + .pdp-stage) ---- */ .hv-pdp-gallery-empty { aspect-ratio: var(--h-aspect-card, 4 / 5); background: var(--h-bg-product); width: 100%; } .hv-pdp-gallery-pc { display: none; } .hv-pdp-stage { position: relative; width: 100%; overflow: hidden; height: min(calc(100vh - 180px), 720px); background: var(--h-bg); border-radius: var(--h-radius-card); } @media (min-width: 768px) and (max-width: 1023px) { .hv-pdp-stage { height: min(58vh, 560px); } } .hv-pdp-stage__img { position: absolute; inset: 0; } .hv-pdp-counter { position: absolute; background: rgba(22, 21, 19, 0.45); color: #ffffff; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; } .hv-pdp-counter--pc { right: 24px; bottom: 24px; } .hv-pdp-counter--m { right: 16px; bottom: 24px; } .hv-pdp-strip { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .hv-pdp-strip__btn { position: relative; display: block; overflow: hidden; padding: 0; width: 40px; height: 48px; border-radius: 4px; background: var(--h-bg); border: 1px solid transparent; opacity: 0.75; cursor: pointer; } .hv-pdp-strip__btn.is-active { border-color: var(--h-ink); opacity: 1; } .hv-pdp-gallery-m { position: relative; margin-left: -16px; margin-right: -16px; } .hv-pdp-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; list-style: none; margin: 0; padding: 0; } .hv-pdp-rail__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; background: var(--h-bg); position: relative; overflow: hidden; } .hv-pdp-stage-flow img { display: block; width: 100%; height: auto !important; max-height: 125vw; object-fit: contain; object-position: top; } .hv-pdp-dots { pointer-events: none; position: absolute; left: 0; right: 0; bottom: 12px; display: flex; align-items: center; justify-content: center; } .hv-pdp-dots__btn { pointer-events: auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; } .hv-pdp-dots__dot { display: block; width: 6px; height: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); transition: width 200ms var(--h-ease), background 200ms var(--h-ease); } .hv-pdp-dots__dot.is-active { width: 18px; background: var(--h-ink); } @media (min-width: 768px) { .hv-pdp-gallery-pc { display: block; } .hv-pdp-gallery-m { display: none; } } /* 라이브/품절 임박 필 (원본 LiveViewersPill + globals .h-pdp-*) */ @keyframes haveaLivePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } } @keyframes haveaPillRoll { 0%, 42% { transform: translateY(0); } 50%, 92% { transform: translateY(-16px); } 100% { transform: translateY(-32px); } } .hv-pdp-livepill { pointer-events: none; position: absolute; display: inline-flex; align-items: center; height: 22px; padding: 0 12px; border-radius: 999px; background: rgba(17, 17, 17, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff; font-size: 11px; font-weight: 500; gap: 5px; } .hv-pdp-livepill__dot { width: 5px; height: 5px; border-radius: 999px; background: var(--h-live, #c8102e); flex-shrink: 0; animation: haveaLivePulse 2s ease-in-out infinite; } .hv-pdp-livepill__one { display: inline-flex; align-items: center; height: 16px; } .hv-pdp-roll-viewport { height: 16px; overflow: hidden; display: inline-flex; align-items: center; } .hv-pdp-pill-roll { display: flex; flex-direction: column; animation: haveaPillRoll 7s cubic-bezier(0.4, 0, 0.2, 1) infinite; will-change: transform; } .hv-pdp-pill-roll > span { height: 16px; line-height: 16px; white-space: nowrap; display: flex; align-items: center; } @media (prefers-reduced-motion: reduce) { .hv-pdp-livepill__dot { animation: none; } .hv-pdp-roll-viewport { height: auto; overflow: visible; } .hv-pdp-pill-roll { animation: none; flex-direction: row; gap: 6px; } .hv-pdp-pill-roll > .hv-pdp-roll-clone { display: none; } } /* ---- 타이틀 블록 (page.tsx header + 인라인 \3c style>) ---- */ .hv-pdp-head > :where(* + *) { margin-top: 8px; } .hv-pdp-brand-eyebrow { display: inline-flex; align-items: center; align-self: flex-start; vertical-align: baseline; gap: 4px; background: transparent; padding: 0; text-decoration: none; transition: opacity 200ms var(--h-ease); font-size: 11px; font-weight: 800; letter-spacing: var(--h-track-wider); text-transform: uppercase; color: var(--h-ink-2); } .hv-pdp-brand-eyebrow:hover { opacity: 0.7; } .hv-pdp-h1 { margin: 6px 0 0; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--h-ink); } .hv-pdp-sub { margin: 4px 0 0; } .hv-pdp-promo { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--h-ink-2); } .hv-pdp-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 8px; } .hv-pdp-rating__link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; } .hv-pdp-rating__star { color: var(--h-ink); font-size: 14px; } .hv-pdp-rating__num { font-size: 13px; font-weight: 500; color: var(--h-ink); } .hv-pdp-rating__text { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--h-ink-3); } .hv-pdp-soldout-eyebrow { margin: 0; } @media (min-width: 768px) { .hv-pdp-brand-eyebrow { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--h-ink); } .hv-pdp-h1 { font-size: 20px; color: var(--h-ink-2); } } /* ---- 가격 행 (page.tsx .pdp-price-row + PriceBlock hero) ---- */ .hv-pdp-price-row { display: flex; align-items: center; gap: 12px; margin-top: 16px !important; } .hv-pdp-price-row__inner { min-width: 0; flex: 1; } .hv-pdp-price { font-variant-numeric: tabular-nums; } .hv-pdp-price__head { margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 15px; } .hv-pdp-price__pct { color: var(--h-sale-pct); font-weight: 700; } .hv-pdp-price__pct.is-muted { color: var(--h-ink-3); } .hv-pdp-price__strike { color: var(--h-ink-3); text-decoration: line-through; text-decoration-color: var(--h-ink-3); } .hv-pdp-price__main { display: flex; align-items: center; gap: 12px; } .hv-pdp-price-hero { margin: 0; min-width: 0; flex: 1; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-size: 20px; } @media (min-width: 768px) { .hv-pdp-price-hero { font-size: 26px; } } .hv-pdp-price__slot { flex-shrink: 0; } .hv-pdp-ledger { margin-top: 14px; background: var(--h-surface); border-radius: 12px; padding: 12px 16px 14px; } .hv-pdp-ledger__head { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0; background: transparent; border: 0; cursor: pointer; font-family: inherit; font-variant-numeric: tabular-nums; text-align: left; } .hv-pdp-ledger__best { display: flex; align-items: baseline; gap: 6px; } .hv-pdp-ledger__bestpct { font-size: 16px; font-weight: 700; color: var(--h-sale-pct); } .hv-pdp-ledger__bestwon { font-size: 17px; font-weight: 700; color: var(--h-ink); } .hv-pdp-ledger__toggle { display: inline-flex; flex-shrink: 0; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--h-ink); } .hv-pdp-ledger__toggle .hv-chev { stroke: var(--h-ink-2); stroke-width: 2; } .hv-pdp-ledger__hint { margin: 4px 0 0; font-size: 12px; color: var(--h-ink-3); } .hv-pdp-ledger__hint.is-clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .hv-pdp-ledger__rows { margin-top: 10px; border-top: 1px solid var(--h-line); padding-top: 8px; } .hv-pdp-ledger__row { display: flex; align-items: baseline; justify-content: space-between; padding: 5px 0; font-size: 13.5px; } .hv-pdp-ledger__row > span:first-child { color: var(--h-ink-2); } .hv-pdp-ledger__row > span:last-child { color: var(--h-ink); } .hv-pdp-ledger__row.is-bold { font-size: 14.5px; font-weight: 700; } .hv-pdp-ledger__row.is-bold > span:first-child { color: var(--h-ink); } .hv-pdp-ledger__cap { margin: -2px 0 2px; font-size: 12px; color: var(--h-ink-3); } .hv-chev { transition: transform 200ms var(--h-ease); } .hv-chev.is-open { transform: rotate(180deg); } /* ---- 쿠폰 받기 버튼 + 시트 (원본 PdpCouponButton) ---- */ .hv-pdp-coupon-btn { flex-shrink: 0; min-height: 36px; display: inline-flex; align-items: center; padding: 0 12px; background: var(--h-bg); color: var(--h-ink); border: 1px solid var(--h-ink); border-radius: 8px; font-weight: 600; font-size: 12px; line-height: 1; font-family: var(--font-kr); letter-spacing: -0.005em; cursor: pointer; transition: background 160ms var(--h-ease); } .hv-pdp-cmodal { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 24px; } .hv-pdp-cmodal[data-mobile] { align-items: flex-end; padding: 0; } .hv-pdp-cmodal__panel { width: 100%; max-width: 460px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); border-radius: 16px; overflow: hidden; } .hv-pdp-cmodal[data-mobile] .hv-pdp-cmodal__panel { max-width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; } .hv-pdp-cmodal[data-mobile] .hv-pdp-cmodal__panel.is-entered { transform: translateY(0); } .hv-pdp-cmodal__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 28px 16px; } .hv-pdp-cmodal[data-mobile] .hv-pdp-cmodal__head { padding: 22px 24px 16px; } .hv-pdp-cmodal__head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; } .hv-pdp-cmodal[data-mobile] .hv-pdp-cmodal__head h2 { font-size: 18px; } .hv-pdp-cmodal__x { background: transparent; border: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: -14px; margin-right: -14px; color: var(--h-ink); } .hv-pdp-cmodal__body { overflow-y: auto; flex: 1; padding: 6px 24px 12px; display: flex; flex-direction: column; gap: 16px; } .hv-pdp-cmodal[data-mobile] .hv-pdp-cmodal__body { padding: 6px 22px 12px; } .hv-pdp-cmodal__all { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-top: 1px solid var(--h-line); font-size: 13px; font-weight: 600; color: var(--h-ink-2); text-decoration: none; } .hv-pdp-cmodal__foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px 22px; } .hv-pdp-cmodal[data-mobile] .hv-pdp-cmodal__foot { padding: 12px 20px 18px; } .hv-pdp-cmodal__close { background: transparent; border: none; cursor: pointer; font-size: 14px; color: var(--h-ink-2); min-height: 48px; padding: 0 8px; } .hv-pdp-cmodal__all-btn { height: 48px; padding: 0 20px; background: var(--h-ink); color: #ffffff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: -0.01em; white-space: nowrap; } /* ---- 혜택(배송정보 행) + 모달 (원본 PdpBenefits · DeliveryInfoModalRow) ---- */ .hv-pdp-benefits { margin-top: 20px; padding-bottom: 4px; } .hv-pdp-benefits__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .hv-pdp-brow { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--font-kr); letter-spacing: -0.005em; font-size: 13px; } .hv-pdp-brow__icon { flex-shrink: 0; } .hv-pdp-brow--ship { align-items: flex-start; } .hv-pdp-brow--ship .hv-pdp-brow__icon { margin-top: 1px; } .hv-pdp-brow__stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hv-pdp-brow__stack .hv-pdp-brow__bold { white-space: normal; } .hv-pdp-brow__stack .hv-pdp-brow__sub { font-size: 12px; color: var(--h-ink-3); } .hv-pdp-brow__bold { font-weight: 700; color: var(--h-ink); white-space: nowrap; } .hv-pdp-brow__capsule { flex-shrink: 0; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; } .hv-pdp-brow__capsule--line { border: 1px solid var(--h-line); color: var(--h-ink-2); } .hv-pdp-brow__capsule--ink { border: 1px solid var(--h-ink); color: var(--h-ink); } .hv-pdp-brow__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--h-ink-2); } .hv-pdp-brow__chev { display: inline-flex; align-items: center; color: var(--h-ink-2); margin-left: auto; } .hv-pdp-dmodal { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 24px; } .hv-pdp-dmodal__panel { background: var(--h-bg); width: 100%; max-width: 440px; max-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); } .hv-pdp-dmodal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--h-line); flex-shrink: 0; } .hv-pdp-dmodal__head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; } .hv-pdp-dmodal__body { padding: 20px 22px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .hv-pdp-dmodal__dl { display: grid; grid-template-columns: 110px 1fr; row-gap: 12px; font-size: 13px; line-height: 1.6; margin: 0; } .hv-pdp-dmodal__item { display: contents; } .hv-pdp-dmodal__item dt { color: var(--h-ink-3); } .hv-pdp-dmodal__item dd { margin: 0; color: var(--h-ink); } .hv-pdp-dmodal__k { color: var(--h-ink-3); } .hv-pdp-dmodal__grid { display: grid; gap: 4px; } /* 혜택 줄 모달(원본 BenefitRow) — 상단 한 줄(기간·조건) · 값 아래 작은 둘째 줄(부분 무이자) · 각주 상자 */ .hv-pdp-dmodal__lead { margin: 0 0 12px; font-size: 12px; color: var(--h-ink-3); } .hv-pdp-dmodal__note { display: block; margin-top: 2px; font-size: 12px; line-height: 1.55; color: var(--h-ink-3); } .hv-pdp-dmodal__foot { margin: 14px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--h-surface); font-size: 12.5px; line-height: 1.6; color: var(--h-ink-2); } .hv-pdp-dmodal__empty { margin: 0; font-size: 13px; color: var(--h-ink-3); } /* ---- PC 옵션 드롭다운 (원본 OptionDropdownPC) ---- */ .hv-pdp-dd { position: relative; } .hv-pdp-dd__field { width: 100%; display: inline-flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; background: var(--h-bg); border: 1px solid var(--h-line); border-radius: 8px; font-family: var(--font-kr); font-size: 14px; color: var(--h-ink-3); letter-spacing: -0.005em; cursor: pointer; transition: border-color 160ms var(--h-ease); } .hv-pdp-dd__field.has-value { color: var(--h-ink); } .hv-pdp-dd__lead { display: inline-flex; align-items: center; gap: 10px; } .hv-pdp-dd__chev { color: var(--h-ink-2); transition: transform 220ms var(--h-ease); } .hv-pdp-swatch { width: 18px; height: 18px; border-radius: 50%; outline: 1px solid var(--h-line); outline-offset: -1px; display: inline-block; } .hv-pdp-dd__list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; background: var(--h-bg); border: 1px solid var(--h-line); border-radius: 8px; box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.18); z-index: 10; max-height: 320px; overflow-y: auto; } .hv-pdp-dd__opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 14px; font-weight: 500; font-family: var(--font-kr); border-radius: 8px; cursor: pointer; color: var(--h-ink); background: transparent; border: 0; text-align: left; } @media (hover: hover) { .hv-pdp-dd__opt:not(.is-unavailable):hover { background: var(--h-surface); } } .hv-pdp-dd__opt.is-unavailable { cursor: not-allowed; color: var(--h-ink-3); } .hv-pdp-dd__val { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-pdp-dd__trail { font-size: 12px; color: var(--h-ink-3); min-width: 44px; text-align: right; white-space: nowrap; flex-shrink: 0; } .hv-pdp-dd__opt:not(.is-unavailable) .hv-pdp-dd__trail { color: var(--h-ink-2); } .hv-pdp-dd__trail.is-warn { color: var(--h-warn); } .hv-pdp-dd__add { font-size: 12px; color: var(--h-ink-2); white-space: nowrap; flex-shrink: 0; } /* 값 ≥12 리스트 검색 — 패널 위 sticky (원본 OptionDropdownPC searchable) */ .hv-pdp-dd__search { position: sticky; top: 0; z-index: 1; padding: 2px 4px 6px; background: var(--h-bg); } .hv-pdp-dd__search-input { width: 100%; height: 40px; padding: 0 12px; font-size: 14px; font-family: var(--font-kr); border: 1px solid var(--h-line); border-radius: 8px; background: var(--h-bg); color: var(--h-ink); } .hv-pdp-dd__empty { padding: 14px 16px; font-size: 13px; color: var(--h-ink-3); } /* ---- 선택 카드 + 합계 (원본 SelectedOptionsPC) ---- */ .hv-pdp-lines { margin-top: 6px; } .hv-pdp-lines__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .hv-pdp-line { position: relative; background: var(--h-surface); border-radius: var(--h-radius-card); padding: 14px 16px; } .hv-pdp-line.has-remove { padding-right: 44px; } .hv-pdp-line__label { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--h-ink); overflow-wrap: anywhere; line-height: 1.4; /* 상품명 2줄 클램프 — 긴 이름이 3줄로 늘면 우측 컬럼이 화면을 넘긴다 (안나 9/6) */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .hv-pdp-line__cap { margin: 2px 0 0; font-size: 12px; color: var(--h-ink-3); } .hv-pdp-line__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: 12px; } .hv-pdp-line__amt { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; color: var(--h-ink); } .hv-pdp-line__won { font-weight: 500; } .hv-pdp-line__fixedqty { min-width: 40px; text-align: center; font-size: var(--h-fs-body-sm); font-variant-numeric: tabular-nums; } .hv-pdp-line__x { position: absolute; right: 0; top: 0; width: 48px; height: 48px; background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--h-ink-3); } /* 총 상품 금액 = 카시나식 회색 밴드 (안나 9/6 — 2px 잉크 룰 장부 문법은 이 자리에서 폐지). 레드 금지 */ .hv-pdp-lines__total { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 12px 16px; background: var(--h-surface); border-radius: var(--h-radius-card); } .hv-pdp-lines__total-label { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--h-ink-2); } .hv-pdp-lines__total-amt { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--h-ink); font-variant-numeric: tabular-nums; } .hv-pdp-lines__total-won { font-size: 16px; font-weight: 500; } /* ---- 추가상품 피커 (원본 ExtraProductPicker) ---- */ .hv-pdp-extra { margin-top: 16px; } .hv-pdp-extra__eyebrow { margin: 0; color: var(--h-ink-3); } .hv-pdp-extra__root { position: relative; margin-top: 8px; } .hv-pdp-extra__field { display: inline-flex; width: 100%; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; background: var(--h-bg); border: 1px solid var(--h-line); border-radius: var(--h-radius-input); font-size: 14px; color: var(--h-ink-3); letter-spacing: -0.005em; cursor: pointer; transition: border-color 160ms var(--h-ease); } .hv-pdp-extra__field .hv-chev { color: var(--h-ink-2); } .hv-pdp-extra__list { margin-top: 6px; padding: 6px; background: var(--h-bg); border: 1px solid var(--h-line); border-radius: var(--h-radius-card); } .hv-pdp-extra__row { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px; min-height: 56px; border-radius: var(--h-radius-card); cursor: pointer; color: var(--h-ink); background: transparent; border: 0; text-align: left; } @media (hover: hover) { .hv-pdp-extra__row:not(.is-soldout):hover { background: var(--h-surface); } } .hv-pdp-extra__row.is-soldout { cursor: not-allowed; color: var(--h-ink-3); } .hv-pdp-extra__thumb { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--h-bg-product); } .hv-pdp-extra__thumb img { width: 100%; height: 100%; object-fit: cover; } .hv-pdp-extra__text { min-width: 0; flex: 1; } .hv-pdp-extra__title { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-pdp-extra__cap { display: block; margin-top: 1px; font-size: 11.5px; color: var(--h-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-pdp-extra__price { display: block; margin-top: 2px; font-size: 13px; color: var(--h-ink-2); font-variant-numeric: tabular-nums; } .hv-pdp-extra__state { font-size: 12px; color: var(--h-ink-3); flex-shrink: 0; } .hv-pdp-extra__state.is-added { font-weight: 600; color: var(--h-ink); } /* ---- 저장(위시) 버튼 (원본 PdpWishButton) ---- */ .hv-pdp-wish { display: flex; align-items: center; justify-content: center; width: 100%; border: none; border-radius: var(--h-radius-btn); background: #ffffff; color: var(--h-ink); cursor: pointer; transition: color var(--h-dur-1) var(--h-ease); } .hv-pdp-wish:disabled { opacity: 0.6; } .hv-pdp-wish--pc { height: 56px; min-width: 56px; } .hv-pdp-wish--mobile { height: 52px; min-width: 52px; width: 52px; flex-shrink: 0; } .hv-pdp-wish__inner { display: flex; flex-direction: column; align-items: center; gap: 1px; } .hv-pdp-wish__count { font-size: 10px; font-weight: 600; line-height: 1; color: var(--h-ink-2); font-variant-numeric: tabular-nums; } /* ---- 구매 컨트롤 (원본 BuyControls + .pdp-cta-grid) ---- */ .hv-pdp-buy > :not([hidden]) ~ :not([hidden]) { margin-top: 16px; } .hv-pdp-buy--soldout > :not([hidden]) ~ :not([hidden]) { margin-top: 12px; } .hv-pdp-buy__dds { display: flex; flex-direction: column; gap: 12px; } .hv-pdp-buy__hint { margin: 0; } .hv-pdp-pc-only { display: none; } @media (min-width: 768px) { .hv-pdp-pc-only { display: block; } } .hv-pdp-soldout-btn { height: var(--h-h-btn); border-radius: var(--h-radius-btn); border: 1px solid var(--h-line); background: var(--h-bg-product); width: 100%; cursor: not-allowed; text-transform: uppercase; color: #6b7280; } .hv-pdp-cta-grid { display: none; } @media (min-width: 768px) { .hv-pdp-cta-grid { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px; margin-top: 8px; } .hv-pdp-cta-grid .h-btn { white-space: nowrap; padding-left: 8px; padding-right: 8px; } .hv-pdp-cta-cart { display: none; } } @media (min-width: 1024px) { .hv-pdp-cta-grid { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); } .hv-pdp-cta-cart { display: inline-flex; } } .hv-pdp-cta-grid .h-btn:disabled { opacity: 0.5; } .hv-pdp-feedback { display: inline-flex; align-items: center; margin: 0; padding: 10px 14px; background: var(--h-ink); color: var(--h-bg); font-size: 13px; gap: 8px; } .hv-pdp-optmodal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); padding: 16px; } .hv-pdp-optmodal__panel { background: var(--h-bg); width: 100%; max-width: 24rem; padding: 24px; border-radius: var(--h-radius-card); } .hv-pdp-optmodal__panel p { margin: 0; } .hv-pdp-optmodal__ok { margin-top: 16px; } /* ---- 재입고·동의 시트 내부 (원본 RestockNotifySheet · MadeToOrderConsentSheet) ---- */ .hv-restock__done { text-align: center; padding: 24px 0 8px; } .hv-restock__done-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--h-ink); } .hv-restock__done-sub { margin: 8px 0 0; font-size: 13px; color: var(--h-ink-2); } .hv-restock__close-btn { margin-top: 24px; } .hv-restock__form { margin-top: 8px; display: grid; gap: 14px; } .hv-restock__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--h-ink-2); } .hv-restock__agree { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; min-height: 48px; cursor: pointer; font-size: 12px; line-height: 1.5; color: var(--h-ink-2); } .hv-restock__agree input { margin-top: 2px; width: 16px; height: 16px; } .hv-restock__error { margin: 0; font-size: 13px; color: var(--h-warn); } .hv-consent__scroll { overflow-x: hidden; } .hv-consent__target { margin: 8px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--h-surface); font-size: 13px; color: var(--h-ink); font-weight: 600; } .hv-consent__caption { display: block; margin-top: 2px; font-weight: 400; color: var(--h-ink-2); } .hv-consent__lead { margin: 12px 0 0; font-size: 13px; color: var(--h-ink-2); line-height: 1.6; } .hv-consent__list { margin: 8px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.6; color: var(--h-ink-2); } .hv-consent__ctas { display: grid; flex-shrink: 0; gap: 8px; margin-top: 16px; } /* ---- 모바일 스티키 바 + 확신 서랍 (원본 MobileStickyBuyBar) ---- */ .hv-pdp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--h-line); padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 1024px) { .hv-pdp-sticky { display: none; } } .hv-pdp-sticky__row { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 48px; padding: 6px 16px 2px; background: transparent; border: none; gap: 10px; font-variant-numeric: tabular-nums; cursor: pointer; } .hv-pdp-sticky__label { min-width: 0; font-size: 13px; font-weight: 600; color: var(--h-ink); line-height: 1.2; } .hv-pdp-sticky__right { display: flex; flex-shrink: 0; align-items: center; gap: 8px; } .hv-pdp-sticky__nums { display: flex; align-items: baseline; gap: 6px; } .hv-pdp-sticky__pct { font-size: 16px; font-weight: 700; color: var(--h-sale-pct); } .hv-pdp-sticky__total { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--h-ink); } .hv-pdp-sticky__chev { color: var(--h-ink-2); transition: transform 200ms var(--h-ease); } .hv-pdp-sticky__chev.is-open { transform: rotate(180deg); } .hv-pdp-sticky__ctas { display: flex; align-items: center; padding: 4px 16px 8px; gap: 10px; } .hv-pdp-sticky__buy { min-width: 0; flex: 1; } .hv-pdp-sticky__buy:disabled { opacity: 0.5; } .hv-pdp-drawer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: var(--h-dim-sheet); animation: havea-sheet-backdrop 240ms var(--h-ease); } @media (min-width: 1024px) { .hv-pdp-drawer { display: none; } } .hv-pdp-drawer__panel { width: 100%; background: var(--h-bg); border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 88vh; max-height: 88dvh; box-shadow: 0 -16px 40px -16px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; animation: havea-sheet-slide 280ms cubic-bezier(0.22, 1, 0.36, 1); } .hv-pdp-drawer__grip { display: flex; flex-shrink: 0; align-items: center; justify-content: center; margin: 0; padding: 20px 0 24px; touch-action: none; cursor: grab; } .hv-pdp-drawer__scroll { flex: 1; min-height: 0; max-height: calc(88vh - 136px - env(safe-area-inset-bottom, 0px)); max-height: calc(88dvh - 136px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overflow-x: hidden; padding: 8px 0 16px; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .hv-pdp-drawer__titlewrap { margin-bottom: 4px; } .hv-pdp-drawer__title { font-size: 17px; font-weight: 700; color: var(--h-ink); } .hv-pdp-drawer__flat { margin-top: 8px; } .hv-pdp-drawer__prompt { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--h-ink); } .hv-pdp-drawer__btns { display: flex; flex-wrap: wrap; gap: 8px; } .hv-pdp-drawer__btn { min-height: 48px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--h-line); background: var(--h-bg); font-size: 14px; font-weight: 500; color: var(--h-ink); cursor: pointer; } .hv-pdp-drawer__btn.is-picked { border: 1.5px solid var(--h-ink); font-weight: 600; } .hv-pdp-drawer__btn.is-disabled { color: var(--h-ink-3); text-decoration: line-through; cursor: not-allowed; } .hv-pdp-drawer__btn-add { font-size: 12px; color: var(--h-ink-2); margin-left: 4px; } .hv-pdp-drawer__labelextra { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--h-ink-3); } .hv-pdp-drawer__leaf { margin-top: 8px; } .hv-pdp-mdd { border: 1px solid var(--h-line); border-radius: 8px; overflow: hidden; background: var(--h-bg); } .hv-pdp-mdd__trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; font-size: 14px; color: var(--h-ink-3); background: transparent; border: none; cursor: pointer; } .hv-pdp-mdd__trigger .hv-chev { color: var(--h-ink-2); } .hv-pdp-mdd__list { margin: 0; list-style: none; overflow-y: auto; border-top: 1px solid var(--h-line); max-height: 40vh; padding: 6px; touch-action: pan-y; overscroll-behavior: contain; } .hv-pdp-mdd__item { display: flex; width: 100%; align-items: center; justify-content: space-between; text-align: left; padding: 14px 10px; font-size: 14px; font-weight: 500; border-radius: 8px; background: transparent; border: 0; color: var(--h-ink); gap: 10px; cursor: pointer; } .hv-pdp-mdd__item.is-disabled { cursor: not-allowed; color: var(--h-ink-3); text-decoration: line-through; } .hv-pdp-mdd__text { min-width: 0; flex: 1; } .hv-pdp-mdd__main { display: block; } .hv-pdp-mdd__sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--h-ink-2); } .hv-pdp-mdd__trail { flex-shrink: 0; font-size: 12px; min-width: 44px; text-align: right; white-space: nowrap; color: var(--h-ink-2); } .hv-pdp-mdd__trail.is-warn { color: var(--h-warn); } .hv-pdp-mdd__add { flex-shrink: 0; font-size: 12px; color: var(--h-ink-2); } /* 값 ≥12 리스트 검색 — 리스트 위 sticky, 입력 44·fs16(iOS 자동 확대 방지) */ .hv-pdp-mdd__search { position: sticky; top: 0; z-index: 1; padding: 2px 4px 6px; background: var(--h-bg); } .hv-pdp-mdd__search-input { width: 100%; height: 44px; padding: 0 12px; font-size: 16px; border: 1px solid var(--h-line); border-radius: 8px; background: var(--h-bg); color: var(--h-ink); } .hv-pdp-mdd__empty { padding: 14px 10px; font-size: 13px; color: var(--h-ink-3); } .hv-pdp-drawer__steps { display: grid; gap: 8px; } .hv-pdp-drawer__ledger { margin-top: 16px; font-size: 14px; font-variant-numeric: tabular-nums; } .hv-pdp-drawer__lrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .hv-pdp-drawer__lkey { color: var(--h-ink-2); } .hv-pdp-drawer__lval { font-weight: 500; } .hv-pdp-drawer__lsale { color: var(--h-sale); } .hv-pdp-drawer__lship { text-align: right; } .hv-pdp-drawer__lstruck { color: var(--h-ink-3); margin-right: 6px; font-weight: 400; } .hv-pdp-drawer__lhint { margin: 0 0 16px; font-size: 12px; color: var(--h-ink-3); text-align: right; line-height: 1.5; } .hv-pdp-drawer__ltotal { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 2px solid var(--h-ink); } .hv-pdp-drawer__ltotal-label { font-size: 14px; color: var(--h-ink); } .hv-pdp-drawer__ltotal-amt { font-size: 22px; font-weight: 700; color: var(--h-ink); } .hv-pdp-drawer__lsaved { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--h-sale); text-align: right; } .hv-pdp-drawer__cta { display: grid; flex-shrink: 0; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; } .hv-pdp-drawer__cta .h-btn:disabled { opacity: 0.4; } @media (prefers-reduced-motion: reduce) { .hv-pdp-drawer, .hv-pdp-drawer__panel { animation: none !important; } } /* ---- 담기 성공 모달 / 시트 (원본 AddedToCartModal) ---- */ .hv-pdp-am { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 24px; overflow-y: auto; } .hv-pdp-am[data-mobile] { align-items: flex-end; padding: 0; } .hv-pdp-am__panel { background: var(--h-bg); width: 100%; max-width: 720px; display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); transition: transform 200ms var(--h-ease); } .hv-pdp-am[data-mobile] .hv-pdp-am__panel { max-width: 100%; max-height: 85dvh; border-radius: 20px 20px 0 0; } .hv-pdp-am__head { display: flex; align-items: center; justify-content: center; position: relative; padding: 20px 28px; border-bottom: 1px solid var(--h-line); } .hv-pdp-am[data-mobile] .hv-pdp-am__head { flex-direction: column; padding: 16px 20px; border-bottom: none; touch-action: none; cursor: grab; min-height: 48px; } .hv-pdp-am__handle { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); border-radius: 2px; } .hv-pdp-am__titlerow { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: 6px; } .hv-pdp-am__title-m { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; } .hv-pdp-am__title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; } .hv-pdp-am__x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); margin: 0; } .hv-pdp-am__body { overflow-y: auto; flex: 1; padding: 28px 28px 32px; } .hv-pdp-am[data-mobile] .hv-pdp-am__body { padding: 0 20px 24px; touch-action: pan-y; } .hv-pdp-am__added { margin: 0 0 20px; font-size: 18px; font-weight: 700; text-align: center; letter-spacing: -0.02em; } .hv-pdp-am__ctas { display: flex; justify-content: center; gap: 12px; margin-bottom: 36px; } .hv-pdp-am__cta { min-width: 180px; } .hv-pdp-am__rail-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .hv-pdp-am__scroller { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; } .hv-pdp-am__scroller .hv-pdp-am__cell { flex: 0 0 44%; scroll-snap-align: start; } .hv-pdp-am__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .hv-pdp-am__foot { padding: 12px 20px 20px; border-top: 1px solid var(--h-line); background: var(--h-bg); } /* ============================================================================ C-2b — 구매 안내 아코디언 · 정보 표 · 브랜드 공지 · 상세설명 · 레일 · 브랜드 블록 · 맨 위로 (원본 PdpAccordion · ProductSpecsCard · ShippingInfoCard · AdminGuidesSection · PdpBrandNotice · PdpDetailCollapsible · HorizontalScroller · HScrollArrows · PdpMoreBlock · PdpBrandBanner · ScrollToTopButton · .t-pdp-section · .h-chip) ============================================================================ */ .hv-pdp-pc-only-lg { display: none; } .hv-pdp-m-only-lg { display: block; } @media (min-width: 1024px) { .hv-pdp-pc-only-lg { display: block; } .hv-pdp-m-only-lg { display: none; } } /* 섹션 헤더 (원본 .t-pdp-section — font-en 18/700, 2px 잉크 룰) */ .t-pdp-section { font-family: var(--font-en); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--h-ink); display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; color: var(--h-ink); } .hv-pdp-section { margin-top: 56px; } .hv-pdp-slot-sections > .hv-pdp-section:first-child { margin-top: 0; } @media (min-width: 768px) { .hv-pdp-section { margin-top: 80px; } } .hv-pdp-section__h2 { /* 원본 PdpDetailCollapsible h2 = .t-pdp-section 그대로(mb 16, 9/14 computed 대조) */ margin-bottom: 16px; } /* 어드민 HTML 본문 (원본 prose prose-sm prose-neutral) */ .hv-pdp-prose { font-size: 14px; line-height: 1.7; color: var(--h-ink); max-width: none; word-break: break-word; } .hv-pdp-prose--guide { font-size: 13px; line-height: 1.65; color: var(--h-ink-2); margin-top: 16px; } .hv-pdp-prose img { max-width: 100%; height: auto; } .hv-pdp-prose p { margin: 0 0 1em; } .hv-pdp-prose a { color: inherit; text-decoration: underline; } .hv-pdp-prose table { max-width: 100%; border-collapse: collapse; } /* 상세설명 HTML — 이관 상세의 고정 폭 래퍼까지 컨테이너 안으로 (원본 .pdp-detail-html) */ .hv-pdp-detail-html { overflow-x: hidden; color: #374151; } .hv-pdp-detail-html * { max-width: 100% !important; box-sizing: border-box; } .hv-pdp-detail-html img, .hv-pdp-detail-html video, .hv-pdp-detail-html iframe { width: auto !important; height: auto !important; } .hv-pdp-detail-html table { width: 100% !important; table-layout: fixed; } .hv-pdp-detail-html td, .hv-pdp-detail-html th { word-break: break-word; } .hv-pdp-detail { position: relative; } .hv-pdp-detail__clip { overflow: hidden; position: relative; max-height: 540px; } @media (min-width: 768px) { .hv-pdp-detail__clip { max-height: 720px; } } .hv-pdp-detail__clip.is-open { max-height: none; overflow: visible; } .hv-pdp-detail__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--h-bg) 92%, transparent) 70%, var(--h-bg) 100%); pointer-events: none; } .hv-pdp-detail__toggle { display: inline-flex; width: 100%; align-items: center; justify-content: center; margin-top: 16px; padding: 16px 18px; gap: 8px; background: var(--h-bg); border: 1px solid var(--h-line); border-radius: var(--h-radius-btn); color: var(--h-ink); font-size: 15px; font-weight: 700; letter-spacing: -0.005em; cursor: pointer; font-family: inherit; } .hv-pdp-detail__chev { stroke-width: 2; transition: transform 220ms var(--h-ease); } /* 브랜드 공지 (원본 PdpBrandNotice) */ .hv-pdp-brand-notice__btn { width: 100%; justify-content: space-between; align-items: center; background: transparent; text-align: left; cursor: pointer; } .hv-pdp-brand-notice__chev { stroke-width: 2; flex-shrink: 0; transition: transform 200ms ease-out; } .hv-pdp-brand-notice__body { padding-top: 4px; } .hv-pdp-brand-notice__title { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #111827; } /* 정보 표 2열 (원본 dl grid-cols-[110px_1fr] gap-y-3 13px) */ .hv-pdp-dl { display: grid; grid-template-columns: 110px 1fr; row-gap: 12px; margin: 0; font-size: 13px; line-height: 1.65; } .hv-pdp-dl--pre { padding-top: 4px; } .hv-pdp-dl__item { display: contents; } .hv-pdp-dl__item dt { color: var(--h-ink-3); } .hv-pdp-dl__item dd { margin: 0; color: var(--h-ink); white-space: pre-line; } .hv-pdp-dl__full { grid-column: span 2; margin: 0; color: var(--h-ink-2); } .hv-pdp-duty { margin-top: 24px; } .hv-pdp-duty__heading { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--h-ink); } .hv-pdp-customer-info { margin-top: 16px; padding: 12px 16px; font-size: 13px; line-height: 1.65; background: var(--h-surface); color: var(--h-ink); } .hv-pdp-customer-info__label { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--h-ink-2); } .hv-pdp-customer-info__text { margin: 0; white-space: pre-wrap; } .hv-pdp-guides { padding-top: 4px; display: flex; flex-direction: column; gap: 20px; } .hv-pdp-guides__label { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--h-ink); } .hv-pdp-guides .hv-pdp-prose--guide { margin-top: 0; } /* 구매 안내 그룹 (원본 PdpAccordion) */ .hv-pdp-acc { margin-top: 8px; } .hv-pdp-acc__title { margin: 2px 0 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--h-ink); } .hv-pdp-acc__warn { margin: 0 0 10px; font-size: 13px; color: var(--h-warn); } .hv-pdp-acc__warn-sub { color: var(--h-ink-3); } .hv-pdp-acc__rule { border-top: 2px solid var(--h-ink); } .hv-pdp-acc__no { margin: 0; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 14px 0; font-size: 14px; font-weight: 600; color: var(--h-ink); border-bottom: 1px solid var(--h-line); gap: 10px; } .hv-pdp-acc__no-val { font-weight: 400; font-size: 12px; color: var(--h-ink-3); font-variant-numeric: tabular-nums; } .hv-pdp-acc__row.has-line { border-bottom: 1px solid var(--h-line); } .hv-pdp-acc__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 52px; padding: 14px 0; font-size: 14px; font-weight: 600; color: var(--h-ink); background: transparent; border: 0; cursor: pointer; gap: 10px; font-family: inherit; } .hv-pdp-acc__meta { display: flex; min-width: 0; align-items: center; gap: 8px; font-weight: 400; } .hv-pdp-acc__summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--h-ink-3); } .hv-pdp-acc__chev { flex-shrink: 0; color: var(--h-ink-2); } .hv-pdp-acc__body { padding: 0 0 18px; } .hv-pdp-acc-mobile { margin-top: 40px; } /* 레일 (원본 HorizontalScroller + HScrollArrows + PdpMoreBlock) */ .hv-hs { position: relative; } .hv-hs__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .hv-hs__cell { flex: 0 0 auto; width: var(--hs-w-base); scroll-snap-align: start; } @media (min-width: 1024px) { .hv-hs__cell { width: var(--hs-w-lg); } } .hv-hs-arrow { display: none; position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); color: var(--h-ink); cursor: pointer; } .hv-hs-arrow--prev { left: 8px; } .hv-hs-arrow--next { right: 8px; } @media (min-width: 768px) { .hv-hs-arrow { display: flex; } } .hv-pdp-more { padding: 28px 0; background: transparent; } @media (min-width: 768px) { .hv-pdp-more { padding: 40px 0; } } .hv-pdp-more__header { margin-bottom: 16px; } @media (min-width: 768px) { .hv-pdp-more__header { margin-bottom: 24px; } } .hv-pdp-more__header--pc-only { display: none; } @media (min-width: 1024px) { .hv-pdp-more__header--pc-only { display: block; } } .hv-pdp-more__title { margin: 2px 0 0; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 10px; } @media (min-width: 768px) { .hv-pdp-more__title { font-size: 20px; } } .hv-pdp-more__count { font-weight: 500; font-size: 11px; color: var(--h-ink-2); } @media (min-width: 768px) { .hv-pdp-more__count { font-size: 13px; } } @keyframes hvPdpShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .hv-pdp-skel { width: 100%; display: grid; gap: 8px; } .hv-pdp-skel__img { aspect-ratio: 4 / 5; border-radius: var(--h-radius-card); background: linear-gradient(90deg, var(--h-surface) 25%, var(--h-bg-product) 37%, var(--h-surface) 63%); background-size: 400% 100%; animation: hvPdpShimmer 1.4s ease infinite; } .hv-pdp-skel__line { height: 14px; width: 70%; background: var(--h-surface); border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .hv-pdp-skel__img { animation: none; } } .hv-pdp-fullwidth { min-width: 0; } .hv-pdp-brand-m { max-width: var(--h-container); margin: 0 auto; padding: 28px 0 0; } /* 브랜드 블록 (원본 PdpBrandBanner + .h-chip) */ /* 원본 globals .h-chip — 모바일 48/16/13 · md 34/14/12, weight 500, 자간 normal, 면 투명 */ .h-chip { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--h-line); background: transparent; color: var(--h-ink); font-size: 13px; font-weight: 500; letter-spacing: normal; text-decoration: none; white-space: nowrap; cursor: pointer; font-family: var(--font-stack); transition: all 160ms var(--h-ease); } @media (min-width: 768px) { .h-chip { height: 34px; padding: 0 14px; font-size: 12px; } } .h-chip:hover { border-color: var(--h-ink); } .hv-pdp-brandrow { margin-top: 24px; } .hv-pdp-brandrow__head { display: flex; align-items: center; gap: 12px; } .hv-pdp-brandrow__link { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .hv-pdp-brandrow__logo, .hv-pdp-brandrow__initials { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--h-radius-card); overflow: hidden; } .hv-pdp-brandrow__logo { background: var(--h-bg-product); border: 1px solid var(--h-line); } .hv-pdp-brandrow__logo img { width: 100%; height: 100%; object-fit: cover; } .hv-pdp-brandrow__initials { background: var(--h-ink); color: var(--h-bg); font-family: var(--font-en); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; } .hv-pdp-brandrow__names { min-width: 0; flex: 1; } .hv-pdp-brandrow__title { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; } .hv-pdp-brandrow__en { display: block; margin-top: 2px; font-size: 12px; color: var(--h-ink-3); font-family: var(--font-en); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-pdp-brandrow__chips { display: flex; flex-shrink: 0; align-items: center; gap: 6px; } .hv-pdp-brandrow__save { gap: 5px; } .hv-pdp-brandrow__save.is-saved { border-color: var(--h-ink); } .hv-pdp-brandrow__desc { margin: 12px 0 0; font-size: 13px; line-height: 1.65; color: var(--h-ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; word-break: keep-all; } /* 맨 위로 (원본 ScrollToTopButton — 모바일 20/96 + 스티키 바 위 12, PC 40/40) */ .hv-pdp-scroll-top { position: fixed; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); color: var(--h-ink); border: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 240ms var(--h-ease), transform 240ms var(--h-ease); z-index: 35; right: 20px; bottom: calc(env(safe-area-inset-bottom) + max(96px, var(--pdp-cta-h, 0px) + 12px)); } .hv-pdp-scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (min-width: 768px) { .hv-pdp-scroll-top { right: 40px; bottom: calc(40px + env(safe-area-inset-bottom)); } } /* native 우하단 FAB(맨 위로)는 PDP 에서 HAVEA 버튼이 대신한다 */ .page[data-havea-pdp] .fab-top-down { display: none !important; } /* ============================================================================ C-2c 리뷰 · 상품 문의 (원본 ReviewsSection/ReviewsList/ReviewImages/ReviewPolicyModal · InquiriesSection/InquiriesPreview/InquiryWriteModal) ============================================================================ */ /* 섹션 헤더 — 2px 잉크 룰은 상자(풀폭)에, 제목·링크는 베이스라인 정렬(안나 9/4). h2 의 margin·border 는 0 */ .hv-pdp-rv, .hv-pdp-inq { scroll-margin-top: 96px; } /* 리뷰 적립 안내 (원본 t-small mb-6 mt-0, ink-2) */ .hv-pdp-rv__reward { margin: 0 0 24px; color: var(--h-ink-2); } .hv-pdp-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--h-ink); margin-bottom: 24px; } .hv-pdp-sec-head__h2.t-pdp-section { margin: 0; border: 0; padding-bottom: 0; } .t-pdp-section__count { font-family: var(--font-en); font-size: 13px; font-weight: 500; color: var(--h-ink-2); } /* 헤더 우측 텍스트 링크 — 레이아웃 높이 = 글자 한 줄, 터치 48 은 겹침 레이어 */ .hv-pdp-sec-link { position: relative; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13px; line-height: 1.2; color: var(--h-ink-2); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-family: inherit; } .hv-pdp-sec-link:focus-visible { outline: 2px solid var(--h-ink); outline-offset: 2px; } .hv-pdp-sec-link__hit { position: absolute; inset: -16px -8px; } /* 빈 상태 헤드라인 (리뷰·문의 공용 골격) */ .hv-pdp-empty-title { margin: 0; white-space: pre-line; font-size: clamp(19px, 1.9vw, 24px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.4; color: var(--h-ink); } .hv-pdp-rv-empty__wrap { position: relative; } .hv-pdp-rv-stamp { position: absolute; right: 2px; top: -4px; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border: 2.5px solid var(--h-point); border-radius: 50%; color: var(--h-point); font-family: var(--font-en); font-size: 11px; font-weight: 900; letter-spacing: 0.1em; transform: rotate(12deg); } /* 리뷰 그리드 — 260px OVERALL 톤 존 + 목록 (모바일 1열) */ .hv-pdp-rv-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } @media (min-width: 768px) { .hv-pdp-rv-grid { grid-template-columns: 260px 1fr; } } .hv-pdp-rv-aside { background: var(--h-surface); padding: 20px; } .hv-pdp-rv-aside__eyebrow { margin: 0; } .hv-pdp-rv-aside__avg { margin: 8px 0; font-size: 44px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--h-ink); } .hv-pdp-rv-aside__avg.is-empty { color: var(--h-ink-3); } .hv-pdp-rv-aside__dash { opacity: 0.4; } .hv-pdp-rv-aside__outof { color: var(--h-ink-3); font-size: 18px; } .hv-pdp-rv-aside__count { margin: 0; color: var(--h-ink-2); line-height: 1.5; } .hv-pdp-rv-error { margin: 0; color: var(--h-ink-2); } .hv-pdp-rv-list { display: flex; flex-direction: column; gap: 24px; transition: opacity 160ms ease; } .hv-pdp-rv-list.is-loading { opacity: 0.55; } .hv-pdp-rv-sort { display: flex; flex-wrap: wrap; gap: 6px; } .hv-pdp-rv-chip { min-height: 48px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; border: 1px solid var(--h-line); background: transparent; color: var(--h-ink-2); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; } .hv-pdp-rv-chip:hover { border-color: var(--h-ink); background: var(--h-surface); } .hv-pdp-rv-chip.is-active, .hv-pdp-rv-chip.is-active:hover { background: var(--h-ink); color: var(--h-bg); font-weight: 600; } .hv-pdp-rv-pageempty { margin: 0; font-size: var(--h-fs-body); color: var(--h-ink-3); } .hv-pdp-rv-item { border-bottom: 1px solid var(--h-line); padding-bottom: 24px; } .hv-pdp-rv-item__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .hv-pdp-rv-item__who { margin: 0; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .hv-pdp-rv-best { background: var(--h-ink); color: #ffffff; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: var(--h-track-wider); font-family: var(--font-en); } .hv-pdp-rv-item__stars { color: var(--h-ink); margin: 0 0 8px; font-size: 14px; } .hv-pdp-rv-stars__empty { color: #d1d5db; } .hv-pdp-rv-item__content { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--h-ink-2); } .hv-pdp-rv-item__imgs { margin-top: 12px; } .hv-pdp-rv-thumbs { margin: 12px 0 0; padding: 0; list-style: none; display: flex; gap: 8px; } .hv-pdp-rv-thumb { position: relative; display: block; width: 80px; height: 80px; overflow: hidden; border-radius: 6px; border: 0; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--h-bg-product) 40%, transparent); } .hv-pdp-rv-thumb:focus-visible { outline: 2px solid var(--h-ink); outline-offset: 2px; } .hv-pdp-rv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 라이트박스 */ .hv-pdp-lb { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); padding: 16px; } .hv-pdp-lb__close { position: absolute; right: 16px; top: 16px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 24px; color: #ffffff; background: none; border: 0; cursor: pointer; } .hv-pdp-lb__close:hover { opacity: 0.7; } .hv-pdp-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); color: #ffffff; font-size: 24px; cursor: pointer; } .hv-pdp-lb__nav:hover { background: rgba(255, 255, 255, 0.3); } .hv-pdp-lb__nav--prev { left: 16px; } .hv-pdp-lb__nav--next { right: 16px; } .hv-pdp-lb__fig { position: relative; display: flex; flex-direction: column; align-items: center; max-height: 90vh; max-width: 90vw; margin: 0; } .hv-pdp-lb__img { max-height: 85vh; max-width: 90vw; object-fit: contain; } .hv-pdp-lb__cap { margin-top: 12px; font-size: var(--h-fs-caption); color: rgba(255, 255, 255, 0.8); } /* 전체보기 · 페이지네이션 */ .hv-pdp-rv-more, .hv-pdp-inq-more { gap: 6px; } .hv-pdp-inq-more { margin-top: 16px; } .hv-pdp-rv-pager { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; } .hv-pdp-rv-page { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; padding: 0 8px; border: 1px solid var(--h-line); border-radius: var(--h-radius-input); background: transparent; color: var(--h-ink); font-size: 14px; text-align: center; cursor: pointer; font-family: inherit; } .hv-pdp-rv-page--nav { padding: 0 12px; } .hv-pdp-rv-page:hover { border-color: var(--h-ink); } .hv-pdp-rv-page.is-current { border-color: var(--h-ink); background: var(--h-ink); color: var(--h-bg); cursor: default; } .hv-pdp-rv-page.is-disabled { color: var(--h-ink-3); cursor: default; } .hv-pdp-rv-page.is-disabled:hover { border-color: var(--h-line); } @media (min-width: 768px) { .hv-pdp-rv-page { min-height: 36px; min-width: 36px; } } /* 운영정책 모달 (셸 = 배송 모달, 폭 480) */ .hv-pdp-dmodal--policy { background: var(--h-dim-alert); } .hv-pdp-dmodal__panel--policy { max-width: 480px; } .hv-pdp-policy__body { padding: 18px 22px 8px; } .hv-pdp-policy__sec { margin-bottom: 18px; } .hv-pdp-policy__h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; } .hv-pdp-policy__p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--h-ink-2); } .hv-pdp-policy__p--next { margin-top: 4px; } .hv-pdp-policy__p--after { margin-top: 8px; } .hv-pdp-policy__ul { margin: 8px 0 0; padding: 0; list-style: none; } .hv-pdp-policy__li { font-size: 13px; line-height: 1.65; color: var(--h-ink-2); display: flex; gap: 6px; } .hv-pdp-policy__dot { color: var(--h-ink-3); } .hv-pdp-policy__foot { padding: 12px 22px 20px; flex-shrink: 0; display: flex; justify-content: flex-end; } /* 문의 — 실패 / 빈 상태 */ .hv-pdp-inq-error__title { margin: 0; font-size: 14px; color: var(--h-ink); } .hv-pdp-inq-error__sub { margin: 4px 0 0; color: var(--h-ink-3); } .hv-pdp-inq-empty__hours { margin: 8px 0 0; font-size: 13.5px; color: var(--h-ink-2); } .hv-pdp-inq-empty__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .hv-pdp-inq-empty__chip { border: 1px solid var(--h-line); border-radius: 999px; padding: 8px 13px; font-size: 12.5px; color: var(--h-ink-2); } .hv-pdp-inq-empty__sub { margin: 14px 0 0; color: var(--h-ink-3); } /* 문의 — 유형 칩(PC) · 목록 */ .hv-pdp-inq-chips { display: none; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } @media (min-width: 768px) { .hv-pdp-inq-chips { display: flex; } } .h-chip--active { background: var(--h-ink); color: var(--h-bg); border-color: var(--h-ink); } .hv-pdp-inq-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; } .hv-pdp-inq-li { border-bottom: 1px solid var(--h-line); } .hv-pdp-inq-li--pc-only { display: none; } @media (min-width: 768px) { .hv-pdp-inq-li--pc-only { display: block; } } .hv-pdp-inq-row { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 14px 0; cursor: default; } .hv-pdp-inq-row.is-openable { cursor: pointer; } .hv-pdp-inq-row.is-openable:focus-visible { outline: 2px solid var(--h-ink); outline-offset: 2px; } .hv-pdp-inq-row__l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .hv-pdp-inq-row__author { font-size: 13px; font-weight: 600; color: var(--h-ink); } .hv-pdp-inq-row__l2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .hv-pdp-inq-badge { font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 7px; border-radius: 999px; border: 1px solid var(--h-line); color: var(--h-ink-3); white-space: nowrap; } .hv-pdp-inq-badge.is-replied { border-color: var(--h-ink); color: var(--h-ink); } .hv-pdp-inq-row__l3 { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; } .hv-pdp-inq-row__text { font-size: 14px; line-height: 1.55; color: var(--h-ink); min-width: 0; white-space: pre-wrap; word-break: keep-all; } .hv-pdp-inq-row__text.is-secret { color: var(--h-ink-3); } .hv-pdp-inq-row__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hv-pdp-inq-lock { display: inline-block; vertical-align: -2px; margin-right: 4px; } .hv-pdp-inq-row__chev { margin-left: auto; flex-shrink: 0; align-self: center; color: var(--h-ink-3); transition: transform 160ms var(--h-ease); } .hv-pdp-inq-row__chev.is-open { transform: rotate(180deg); } .hv-pdp-inq-answer { margin: 0 0 14px; padding: 14px; border-radius: var(--h-radius-card); background: var(--h-surface); font-size: 14px; color: var(--h-ink-2); line-height: 1.6; white-space: pre-wrap; } .hv-pdp-inq-answer__label { margin: 0 0 6px; font-weight: 600; color: var(--h-ink); } .hv-pdp-inq-more--m { display: inline-flex; } @media (min-width: 768px) { .hv-pdp-inq-more--m { display: none; } } /* 문의 작성 모달 (원본 h-card max-w-lg p-6, 오버레이 black/40) */ .hv-pdp-imodal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); padding: 16px; } .hv-pdp-imodal__panel { width: 100%; max-width: 32rem; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; padding-bottom: calc(env(safe-area-inset-bottom) + 24px); background: var(--h-bg); border: 1px solid var(--h-line); border-radius: var(--h-radius-card); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .hv-pdp-imodal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .hv-pdp-imodal__title { margin: 0; font-size: var(--h-fs-h3, 1.125rem); font-weight: var(--h-fw-m); line-height: 1.4; } .hv-pdp-imodal__form { display: flex; flex-direction: column; gap: 16px; } .hv-pdp-imodal__alert { margin: 0; padding: 12px; border: 1px solid var(--h-warn); border-radius: 4px; background: #ffffff; color: var(--h-warn); font-size: 14px; } .hv-pdp-imodal__label { display: block; font-size: var(--h-fs-caption); text-transform: uppercase; color: var(--h-ink-3); } .hv-pdp-imodal__req { color: var(--h-warn); } .hv-pdp-imodal__field { margin-top: 4px; } .hv-pdp-imodal__textarea { margin-top: 4px; width: 100%; border: 1px solid var(--h-line); border-radius: var(--h-radius-input); background: #ffffff; padding: 12px; font-size: var(--h-fs-body); font-family: inherit; color: var(--h-ink); resize: vertical; } .hv-pdp-imodal__textarea:focus { outline: none; border-color: var(--h-ink); } .hv-pdp-imodal__err { margin: 4px 0 0; font-size: var(--h-fs-caption); color: var(--h-warn); } .hv-pdp-imodal__photos-title { margin: 0; font-size: var(--h-fs-body); font-weight: 600; } .hv-pdp-imodal__photos { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .hv-pdp-imodal__photo { position: relative; width: 64px; height: 64px; overflow: hidden; border: 1px solid var(--h-line); border-radius: 4px; background: #ffffff; } .hv-pdp-imodal__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hv-pdp-imodal__photo-x { position: absolute; right: 2px; top: 2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, 0.6); color: #ffffff; font-size: 12px; cursor: pointer; } .hv-pdp-imodal__photo-x:hover { background: rgba(0, 0, 0, 0.8); } .hv-pdp-imodal__photo-add { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px dashed var(--h-line); font-size: var(--h-fs-caption); color: var(--h-ink-3); cursor: pointer; } .hv-pdp-imodal__photo-add:hover { border-color: var(--h-ink); } .hv-pdp-imodal__secret { margin: 0; color: var(--h-ink-2); } .hv-pdp-imodal__hours { margin: 0; } .hv-pdp-imodal__foot { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--h-line); padding-top: 16px; } .hv-pdp-imodal__cancel { height: var(--h-h-btn); padding: 0 16px; border: 1px solid var(--h-line); border-radius: var(--h-radius-btn); background: #ffffff; font-size: var(--h-fs-caption); letter-spacing: var(--h-track-wider); text-transform: uppercase; font-weight: var(--h-fw-m); font-family: var(--font-en); color: var(--h-ink); cursor: pointer; } .hv-pdp-imodal__cancel:hover { background: #f9fafb; } .hv-pdp-imodal__submit { padding: 0 24px; } .hv-pdp-imodal__submit:hover:not(:disabled) { opacity: 0.8; } .hv-pdp-imodal__submit:disabled { opacity: 0.5; } /* ---- C-2d: 공구 바 (원본 PdpGbBar — bg-black · 13px · 모바일 sticky z-61) ---- */ .hv-pdp-gbbar { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; background: #000; padding: 0 16px; font-size: 13px; color: #fff; text-decoration: none; } .hv-pdp-gbbar__badge, .hv-pdp-gbbar__count { font-weight: 700; } .hv-pdp-gbbar__count { font-variant-numeric: tabular-nums; } .hv-pdp-gbbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 767px) { .hv-pdp-gbbar { position: sticky; top: 0; z-index: 61; } /* 공구 바 존재 시 오버레이 헤더(fixed z-60)를 바(44px) 아래로 — 겹침 차단 (원본 codex P1, !important 로 인라인 top 을 이김) */ [data-gb-bar] ~ [data-minimal-mobile-header] { top: 44px !important; } } /* ---- 리밋 오더 행 (원본 limitGb 서피스 카드 + 카운트다운) + 한정수량 고지 ---- */ .hv-pdp-limit { display: flex; align-items: center; gap: 8px; background: var(--h-surface); border-radius: var(--h-radius-card); padding: 11px 14px; font-size: 13px; color: var(--h-ink); text-decoration: none; margin-bottom: 8px; } .hv-pdp-limit__label { font-weight: 700; } .hv-pdp-limit__count { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .hv-pdp-limit-notice { margin: -6px 2px 14px; font-size: 12px; color: var(--h-ink-3); } /* ---- MAGAZINE_RELATED 래퍼 — 컨테이너 밖 렌더라 모바일 스티키 바(80px+safe-area)가 마지막 섹션을 가리지 않게 pb-32 (원본 max-md:pb-32) ---- */ @media (max-width: 767px) { .hv-pdp-mag { padding-bottom: 128px; } } /* ---- CURATIONS 2열 프로모 카드 (원본 page.tsx 1745-1850) ---- */ .hv-pdp-curations { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .hv-pdp-curations { grid-template-columns: 1fr 1fr; gap: 20px; } } .hv-pdp-curation { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 20px; aspect-ratio: 21 / 9; border-radius: var(--h-radius-card); text-decoration: none; } @media (min-width: 768px) { .hv-pdp-curation { padding: 24px; } } .hv-pdp-curation__wm { pointer-events: none; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 700; font-size: clamp(80px, 14vw, 200px); letter-spacing: -0.04em; opacity: 0.06; line-height: 1; } .hv-pdp-curation__top { position: relative; display: flex; align-items: center; gap: 10px; } .hv-pdp-curation__body { position: relative; } .hv-pdp-curation__title { margin: 0; font-family: var(--font-en); font-weight: 700; font-size: 30px; letter-spacing: -0.025em; line-height: 1.1; } .hv-pdp-curation__sub { margin: 4px 0 0; font-size: 13px; opacity: 0.85; } /* 스토리 캐러셀 (원본 components/home/MagazineCarousel3D.tsx — 다크 풀블리드, 플랫 일렬) — PDP 관련 스토리 · (메인 하단 공유) */ .hv-mag { background: linear-gradient(180deg, #0a0a0a 0%, #050505 60%, #000 100%); color: #fff; position: relative; overflow: hidden; } .hv-mag__inner { max-width: var(--h-container); margin: 0 auto; } .hv-mag__eyebrow { margin: 0; color: rgba(255, 255, 255, 0.55); } /* KR 헤드 (안나 7/28) — 1행 가벼움 + 2행 무게 */ .hv-mag__h2 { margin: 14px 0 0; font-family: var(--font-kr); font-weight: 400; letter-spacing: -0.02em; line-height: 1.16; } .hv-mag__h2 em { font-style: normal; font-weight: 700; } .hv-mag__stage { position: relative; user-select: none; cursor: grab; } .hv-mag__card { position: absolute; left: 50%; top: 50%; transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 720ms ease, box-shadow 720ms; cursor: pointer; overflow: hidden; border-radius: 16px; will-change: transform, opacity; } .hv-mag__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-mag__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.78) 100%); pointer-events: none; } .hv-mag__dim { position: absolute; inset: 0; pointer-events: none; } /* 저장 토글 (안나 7/28) — 우상단, /story 가판대·홈 저장 그리드와 동일 문법 */ .hv-mag__save { position: absolute; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; background: rgba(0, 0, 0, 0.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .hv-mag__no { position: absolute; font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: var(--h-track-wider); opacity: 0.6; } .hv-mag__caption { position: absolute; } .hv-mag__kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.72); } .hv-mag__title { font-family: var(--font-kr); font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .hv-mag__arrow { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); } .hv-mag__nav { display: flex; align-items: center; justify-content: center; margin-top: 0; font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); color: rgba(255, 255, 255, 0.55); font-weight: 600; } .hv-mag__navbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: 16px; } .hv-mag__bar { position: relative; height: 1px; background: rgba(255, 255, 255, 0.18); } .hv-mag__bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; transition: width 480ms cubic-bezier(0.22, 0.61, 0.36, 1); } .hv-mag__all { background: transparent; border: 0; padding: 0; color: rgba(255, 255, 255, 0.7); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } /* ============================================================================ HAVEA 브랜드 — /brands(명부·피드 스트립·TOP 5) · /brands/:no(표지형 히어로 + 목록) 원본: app/(shop)/brands/page.tsx · _components/BrandsListView.tsx · components/BrandTop5.tsx · brands/[brandNo]/_components/BrandHero.tsx 의 Tailwind/inline 값을 같은 값의 CSS 로. 값은 style.css :root 토큰만. 목록 격자·툴바는 _havea-list.css 재사용. ============================================================================ */ .hv-brands-wrap { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 0 var(--hv-inset); } /* ---- 타이틀 (원본 pb-8 pt-6 md:pb-10 md:pt-14) ---- */ .hv-brands-title { padding: 24px 0 32px; } @media (min-width: 768px) { .hv-brands-title { padding: 56px 0 40px; } } .hv-brands-title__eyebrow { margin: 0; } .hv-brands-title__h1 { margin: 8px 0 0; font-family: var(--font-en); font-size: clamp(44px, 9vw, 140px); font-weight: 700; letter-spacing: -0.025em; line-height: 0.95; } /* ---- 브랜드 피드 스트립 (원본 BrandFeedStrip) ---- */ .hv-brands-strip { padding-bottom: 56px; } @media (min-width: 768px) { .hv-brands-strip { padding-bottom: 80px; } } .hv-brands-strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } @media (min-width: 768px) { .hv-brands-strip__head { margin-bottom: 20px; } } .hv-brands-strip__h2 { margin: 0; } .hv-brands-strip__eyebrow { display: block; font-family: var(--font-en); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--h-ink-3); } .hv-brands-strip__sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--h-ink-2); } .hv-brands-strip__scroll { margin: 0 calc(var(--h-gutter) * -1); padding: 0 var(--h-gutter); overflow-x: auto; } .hv-brands-strip__list { margin: 0; padding: 0; list-style: none; display: flex; gap: 12px; } .hv-brands-strip__item { width: 160px; flex-shrink: 0; } .hv-brands-strip__link { display: block; text-decoration: none; color: inherit; } .hv-brands-strip__cover { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--h-bg-product); container-type: inline-size; } .hv-brands-strip__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .hv-brands-strip__typo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; word-break: break-word; font-family: var(--font-en); font-weight: 700; font-size: clamp(20px, 8cqw, 32px); letter-spacing: -0.04em; color: rgba(0, 0, 0, 0.12); } .hv-brands-strip__name { display: block; margin-top: 6px; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-brands-strip__pname { display: block; font-size: 11.5px; color: var(--h-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- TOP 5 (원본 BrandTop5) ---- */ .hv-top5 { padding-bottom: 56px; } @media (min-width: 768px) { .hv-top5 { padding-bottom: 80px; } } .hv-top5__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } @media (min-width: 768px) { .hv-top5__head { margin-bottom: 32px; } } .hv-top5__h2 { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-family: var(--font-en); font-size: clamp(28px, 4.5vw, 56px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .hv-top5__accent { font-weight: 500; font-size: 13px; color: var(--h-ink-2); } .hv-top5__desc { margin: 8px 0 0; font-size: 13px; color: var(--h-ink-2); } .hv-top5__grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 768px) { .hv-top5__grid { grid-template-columns: 1fr 1fr; gap: 48px; } .hv-top5__rows { display: flex; height: 100%; flex-direction: column; } } .hv-top5__en { font-family: var(--font-en); } .hv-top5-hero { display: block; text-decoration: none; color: inherit; } .hv-top5-hero__collage { position: relative; display: grid; overflow: hidden; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; aspect-ratio: 4 / 3.4; border-radius: 16px; background: var(--h-bg-product); } .hv-top5-hero__cell { position: relative; display: block; background: var(--h-bg-product); } .hv-top5-hero__cell--main { grid-row: 1 / 3; } .hv-top5-hero__cell img, .hv-top5-row__cut img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-top5-hero__num { position: absolute; left: 14px; top: 6px; font-family: var(--font-en); font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #ffffff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); } .hv-top5-hero__info { padding-top: 14px; } .hv-top5-hero__name { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .hv-top5-hero__name-en { font-size: 13px; color: var(--h-ink-3); margin-left: 6px; font-weight: 400; } .hv-top5-hero__desc { margin: 4px 0 0; font-size: 13.5px; color: var(--h-ink-2); line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .hv-top5-hero__count { margin: 4px 0 0; font-size: 12px; color: var(--h-ink-3); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; font-family: var(--font-en); } .hv-top5-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--h-line); text-decoration: none; color: inherit; } .hv-top5-row.is-last { border-bottom: 0; } @media (min-width: 768px) { .hv-top5-row { flex: 1; padding: 0; } } .hv-top5-row__rank { width: 26px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-en); } .hv-top5-row__cuts { display: flex; flex-shrink: 0; gap: 2px; } .hv-top5-row__cut { position: relative; display: block; width: 44px; height: 44px; overflow: hidden; border-radius: 8px; background: var(--h-bg-product); } @media (min-width: 768px) { .hv-top5-row__cut { width: 64px; height: 64px; } } .hv-top5-row__body { min-width: 0; flex: 1; } .hv-top5-row__name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; } .hv-top5-row__name-en { color: var(--h-ink-3); font-weight: 400; margin-left: 5px; font-size: 12.5px; } .hv-top5-row__desc { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--h-ink-3); } .hv-top5-row__count { flex-shrink: 0; font-size: 11.5px; color: var(--h-ink-3); font-variant-numeric: tabular-nums; font-family: var(--font-en); } /* ---- 명부 색인 (원본 BrandsListView 인덱스: h-chip 레일 + 보기 토글) ---- */ .hv-brands-index { padding-bottom: 24px; } @media (min-width: 768px) { .hv-brands-index { padding-bottom: 32px; } } .hv-brands-index__row { display: flex; align-items: center; gap: 12px; } .hv-brands-index__rail { display: flex; flex: 1; gap: 6px; overflow-x: auto; } @media (min-width: 768px) { .hv-brands-index__rail { flex-wrap: wrap; } } .hv-brands-index__chip { flex-shrink: 0; justify-content: center; font-family: var(--font-en); letter-spacing: 0.04em; min-width: 48px; } .hv-brands-index__views { display: flex; flex-shrink: 0; gap: 6px; } .hv-brands-index__view { width: 48px; justify-content: center; padding: 0; } @media (min-width: 768px) { .hv-brands-index__view { width: 34px; } } /* ---- 명부 list (검정 풀폭 BIG TYPE) ---- */ .hv-brands-list { background: #000; color: #fff; padding: 32px 0 56px; } @media (min-width: 768px) { .hv-brands-list { padding: 64px 0 96px; } } .hv-brands-list__flow { font-family: var(--font-en); font-weight: 500; font-size: clamp(26px, 4.5vw, 64px); letter-spacing: -0.02em; line-height: 1.3; display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 4px; align-items: baseline; } .hv-brands-list__pair { white-space: nowrap; } .hv-brands-list__link { cursor: pointer; display: inline-block; transition: opacity 160ms; text-underline-offset: 4px; color: inherit; text-decoration: none; } .hv-brands-list__link:hover { text-decoration: underline; opacity: 0.7; } .hv-brands-list__en { font-family: var(--font-kr, inherit); margin-left: 6px; } /* ---- 명부 grid (4열 Mono 플레이트) ---- */ .hv-brands-grid-sec { padding-bottom: 80px; } @media (min-width: 768px) { .hv-brands-grid-sec { padding-bottom: 120px; } } .hv-brands-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 32px; } @media (min-width: 768px) { .hv-brands-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; } } .hv-brands-grid__item { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; } .hv-brands-grid__tile { position: relative; aspect-ratio: 4 / 3; background: var(--h-bg-product); color: var(--h-ink); display: flex; align-items: center; justify-content: center; overflow: hidden; } .hv-brands-grid__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-brands-grid__typo { font-family: var(--font-en); font-weight: 700; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.02em; } .hv-brands-grid__cap { margin: 0; } .hv-brands-grid__name { font-family: var(--font-en); font-weight: 600; font-size: 13px; } .hv-brands-grid__en { font-size: 12px; color: var(--h-ink-2); margin-left: 6px; } /* ---- 폴백 · 빈 상태 ---- */ .hv-brands-fallback { padding-bottom: 64px; } @media (min-width: 768px) { .hv-brands-fallback { padding-bottom: 96px; } } .hv-brands-empty { display: flex; min-height: 240px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; } .hv-brands-empty__text { margin: 0; font-size: var(--h-fs-body); color: var(--h-ink-3); } /* ================================================================== * 브랜드홈 v2 (원본 brands/[brandNo] — BrandHero 커버/모자이크/시트 · BrandTabs · BrandSectionHead · BrandRanking · BrandEvents · BrandReviews) * ------------------------------------------------------------------ */ .hv-brand-hero { background: var(--h-bg); color: var(--h-ink); } /* 어드민 커버 — 풀블리드 sticky(시트가 위로 올라오고, 진행도만큼 blur·베일), 모바일 3:2 · PC clamp(300,28vw,420) */ .hv-brand-hero__cover { position: sticky; top: 0; z-index: 0; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--h-bg-product); } @media (min-width: 768px) { .hv-brand-hero__cover { aspect-ratio: auto; height: clamp(300px, 28vw, 420px); } } .hv-brand-hero__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); will-change: filter; } .hv-brand-hero__veil { position: absolute; inset: 0; background: var(--h-bg); } /* 상품 컷 모자이크 (커버 없을 때) — 3장 = 2:1:1, 첫 컷 모바일 2행 */ .hv-brand-hero__mosaic { display: grid; gap: 2px; aspect-ratio: 3 / 2; } .hv-brand-hero__mosaic--1 { grid-template-columns: 1fr; } .hv-brand-hero__mosaic--2 { grid-template-columns: 2fr 1fr; } .hv-brand-hero__mosaic--3 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); } .hv-brand-hero__cell { position: relative; overflow: hidden; background: var(--h-bg-product); } .hv-brand-hero__cell--first { grid-row: span 2; } .hv-brand-hero__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (min-width: 768px) { .hv-brand-hero__mosaic { aspect-ratio: auto; height: clamp(320px, 30vw, 460px); } .hv-brand-hero__mosaic--3 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr; } .hv-brand-hero__cell--first { grid-row: auto; } } /* 종이 시트 — 커버 위로 화면 폭 전체로 올라탐 (-mt-6 rounded-t-2xl pt-5 / md -mt-10 rounded-t-3xl pt-8), 컷 없으면 상단 여백만 */ .hv-brand-hero__sheet { position: relative; z-index: 10; background: var(--h-bg); padding-top: 40px; } .hv-brand-hero__sheet--over { margin-top: -24px; border-radius: 16px 16px 0 0; padding-top: 20px; } @media (min-width: 768px) { .hv-brand-hero__sheet { padding-top: 64px; } .hv-brand-hero__sheet--over { margin-top: -40px; border-radius: 24px 24px 0 0; padding-top: 32px; } .hv-brand-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } } .hv-brand-hero__names { min-width: 0; } .hv-brand-hero__eyebrow { margin: 0; color: var(--h-ink-3); } .hv-brand-hero__eyebrow-link { color: inherit; text-decoration: none; } /* t-display-l mt-2 break-keep */ .hv-brand-hero__h1 { margin: 8px 0 0; word-break: keep-all; font-size: var(--h-fs-display-l); font-weight: var(--h-fw-b); line-height: 0.98; letter-spacing: var(--h-track-display); font-family: var(--font-en); } .hv-brand-hero__meta { margin: 8px 0 0; font-family: var(--font-en); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .hv-brand-hero__cta { margin-top: 12px; flex-shrink: 0; } @media (min-width: 768px) { .hv-brand-hero__cta { margin-top: 0; } } /* 저장 알약 (하디 9/6 요청 2 · 안나 ②A) — 29CM 「♡ 3.4만」, 아이콘 = 사이트 공통 북마크, 0 도 표기 */ .hv-brand-hero__pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--h-line); background: var(--h-bg); color: var(--h-ink); font-size: 12.5px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: background 160ms var(--h-ease), color 160ms var(--h-ease); } .hv-brand-hero__pill.is-on { background: var(--h-ink); color: var(--h-bg); } /* 소개 — 2~3줄 접기 + 더보기 (하디 9/7 ④) */ .hv-brand-hero__desc { margin-top: 16px; max-width: 580px; } .hv-brand-hero__tagline { margin: 0; font-size: var(--h-fs-body); color: var(--h-ink-2); line-height: 1.6; } .hv-brand-hero__tagline.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hv-brand-hero__more { margin-top: 4px; display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--h-ink-3); cursor: pointer; } /* ---- 본문 (원본 h-container pb-20 pt-4 md:pb-[120px] md:pt-6) ---- */ .hv-brand-main { padding-top: 16px; padding-bottom: 80px; } @media (min-width: 768px) { .hv-brand-main { padding-top: 24px; padding-bottom: 120px; } } /* 앵커 탭 — 헤더 아래 sticky(z-20), 모바일 -mx-4 px-4 가로 스크롤, 활성 2px 잉크 밑줄 */ .hv-brand-tabs { position: sticky; top: var(--h-h-header-m); z-index: 20; margin: 0 -16px; padding: 0 16px; overflow-x: auto; background: var(--h-bg); border-bottom: 1px solid var(--h-line); } @media (min-width: 768px) { .hv-brand-tabs { top: var(--h-h-header); margin: 0; padding: 0; } } .hv-brand-tabs__list { margin: 0; padding: 0; list-style: none; display: flex; gap: 20px; min-width: max-content; } .hv-brand-tabs__a { display: block; padding: 14px 0 12px; font-size: 14px; font-weight: 500; color: var(--h-ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap; } .hv-brand-tabs__a.is-on { font-weight: 700; color: var(--h-ink); border-bottom-color: var(--h-ink); } /* 섹션 간격 — 랭킹 mt-8 md:mt-12 · 그 외 mt-14 md:mt-20 · 앵커 scroll-mt 132 */ .hv-brand-sec { scroll-margin-top: 132px; } .hv-brand-sec-gap { margin-top: 56px; } .hv-brand-sec-gap--first { margin-top: 32px; } @media (min-width: 768px) { .hv-brand-sec-gap { margin-top: 80px; } .hv-brand-sec-gap--first { margin-top: 48px; } } /* 섹션 헤더 — 국문 17/800 + 개수 13/500 ink-3 + 우측 「전체 ›」 12.5 ink-3 */ .hv-brand-sec__head { margin-bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .hv-brand-sec__h2 { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; } .hv-brand-sec__count { font-family: var(--font-en); font-size: 13px; font-weight: 500; color: var(--h-ink-3); } .hv-brand-sec__more { flex-shrink: 0; font-size: 12.5px; color: var(--h-ink-3); text-decoration: none; } /* 기간 칩 (h-chip) — 모바일 -mx-4 px-4 가로 스크롤 */ .hv-brand-rank__chips { display: flex; gap: 6px; margin: 0 -16px 16px; padding: 0 16px; overflow-x: auto; } .hv-brand-rank__chips .h-chip { flex-shrink: 0; } @media (min-width: 768px) { .hv-brand-rank__chips { margin: 0 0 16px; padding: 0; } } /* 가로 스크롤 컨테이너 (원본 HScroller) — 모바일 -mx-4 px-4 · PC -mx-10 px-10 */ .hv-hscroller { position: relative; } .hv-hscroller__track { overflow-x: auto; } .hv-brand-bleed { margin: 0 -16px; padding: 0 16px; } @media (min-width: 768px) { .hv-brand-bleed { margin: 0 -40px; padding: 0 40px; } } /* 기획전 카드 — 82vw(max 340) / PC 452, 16:9, 하단 그라데이션 캡션 */ .hv-brand-events { margin: 0; padding: 0; list-style: none; display: flex; gap: 12px; min-width: max-content; } .hv-brand-events__item { width: 82vw; max-width: 340px; } @media (min-width: 768px) { .hv-brand-events__item { width: 452px; max-width: none; } } .hv-brand-events__link { display: block; text-decoration: none; color: inherit; } .hv-brand-events__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--h-radius-card); background: var(--h-bg-product); } .hv-brand-events__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-brand-events__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55)); color: #fff; } .hv-brand-events__caption b { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; } .hv-brand-events__caption span { font-size: 12px; opacity: 0.9; } /* 베스트 리뷰 카드 — 80vw(max 320) / PC 320, 상품 헤더(56 썸네일) + 리뷰 행 ≤3 */ .hv-brand-reviews { margin: 0; padding: 0; list-style: none; display: flex; gap: 12px; min-width: max-content; } .hv-brand-reviews__card { width: 80vw; max-width: 320px; border: 1px solid var(--h-line); border-radius: var(--h-radius-card); padding: 12px; background: var(--h-bg); } @media (min-width: 768px) { .hv-brand-reviews__card { width: 320px; } } .hv-brand-reviews__product { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .hv-brand-reviews__thumb { flex-shrink: 0; overflow: hidden; width: 56px; height: 56px; border: 1px solid var(--h-line-2, var(--h-line)); border-radius: 8px; background: var(--h-bg); } .hv-brand-reviews__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; } .hv-brand-reviews__names { min-width: 0; } .hv-brand-reviews__name { display: block; font-size: 13px; color: var(--h-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-brand-reviews__price { display: block; font-family: var(--font-en); font-size: 12px; font-weight: 700; } .hv-brand-reviews__list { margin: 8px 0 0; padding: 0; list-style: none; } .hv-brand-reviews__row { padding: 8px 0; border-top: 1px solid var(--h-line-2, var(--h-line)); } .hv-brand-reviews__meta { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--h-ink-3); } .hv-brand-reviews__meta b { color: var(--h-ink); } .hv-brand-reviews__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-brand-reviews__text { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--h-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================================ HAVEA 스토리 — /story(표지 가판대) · /story/:no(커버플로우 상세) · 댓글 · 연관상품 줄 원본: app/(shop)/story/story.css 1:1 + MagazineArticleView/ArticleComments/HorizontalProductRow 의 inline·Tailwind 값을 같은 값의 CSS 로. 값은 style.css :root 토큰만. 좌우 인셋은 .hv-story-wrap(원본 .h-container) 단일 소유. ============================================================================ */ .hv-story { background: var(--h-bg); color: var(--h-ink); } .hv-story-wrap { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 0 var(--hv-inset); } .hv-story-fallback { padding: 40px 0 80px; } /* 상세 = 자체 헤더·액션바 (원본 HideSiteChrome + 푸터·탭바 숨김) */ .page[data-havea-story-article] .hv-mh-bar, .page[data-havea-story-article] .hv-mh-m, .page[data-havea-story-article] .hv-tabbar, .page[data-havea-story-article] .l-content ~ footer, .page[data-havea-story-article] .footer, .page[data-havea-story-article] .fab-top-down { display: none !important; } /* ============ 이번 호 — 클린 표지 (모바일 풀블리드 3:4) ============ */ .mag-cover-sec { padding: 0; } .mag-cover-link { display: block; position: relative; text-decoration: none; color: inherit; cursor: pointer; } .mag-cover-media { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--h-bg-product); overflow: hidden; } .mag-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mag-masthead { position: absolute; inset: auto 0 0; display: block; padding: 56px var(--h-gutter) 18px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%); color: #ffffff; } .mag-mh-kicker { display: block; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.78); } .mag-mh-title { margin: 8px 0 0; padding-right: 88px; font-size: clamp(20px, 7vw, 36px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; word-break: keep-all; text-wrap: balance; color: #ffffff; } .mag-mh-byline { display: block; margin-top: 10px; padding-right: 88px; font-size: 11px; color: rgba(255, 255, 255, 0.66); font-variant-numeric: tabular-nums; } .mag-postmark { position: absolute; top: 14px; right: var(--h-gutter); color: #fff; filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.55)); } .mag-postmark-no { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; } .mag-postmark-date { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ============ CHIPS ============ */ .mag-chips-sec { padding: 18px 0 0; } .mag-chips { display: flex; gap: 4px; overflow-x: auto; } .mag-chip { flex-shrink: 0; cursor: pointer; } /* ============ EMPTY ============ */ .mag-empty-sec { padding: 32px 0 80px; } .mag-empty { border: 1px solid var(--h-line); padding: 48px 24px; text-align: center; } .mag-empty-title { margin: 0; font-size: 14px; font-weight: 600; } .mag-empty-hint { margin-top: 8px; } /* ============ 지난 호 — 장부 헤더 + 2:3 표지 가판대 ============ */ .mag-stand-sec { padding: 26px 0 80px; } .mag-stand-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--h-ink); padding-bottom: 8px; } .mag-stand-t { font-size: 12px; font-weight: 800; letter-spacing: var(--h-track-wider); text-transform: uppercase; } .mag-stand-c { font-size: 12px; color: var(--h-ink-3); font-variant-numeric: tabular-nums; } .mag-stand-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; } .mag-stand-card { display: block; text-decoration: none; color: inherit; cursor: pointer; } .mag-stand-media { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden; background: var(--h-bg-product); container-type: inline-size; } .mag-stand-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } @media (hover: hover) { .mag-stand-card:hover .mag-stand-img { transform: scale(1.03); } } .mag-month + .mag-month { margin-top: 28px; } .mag-month-label { margin: 18px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--h-ink-3); font-variant-numeric: tabular-nums; } .mag-stand-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.78) 100%); } .mag-stand-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; } .mag-stand-cap--baked { bottom: auto; top: 12px; } .mag-stand-cap--baked .mag-stand-no { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); } .mag-stand-no { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; } .mag-stand-title { display: -webkit-box; margin-top: 3px; font-size: clamp(15px, 7.2cqw, 34px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); } .mag-stand-meta { display: block; margin-top: 3px; font-size: 11px; color: rgba(255, 255, 255, 0.68); font-variant-numeric: tabular-nums; } .mag-save { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; background: rgba(0, 0, 0, 0.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .mag-save:active { transform: scale(0.92); } .mag-cover-save { position: absolute; right: var(--h-gutter); bottom: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); padding: 0; background: rgba(255, 255, 255, 0.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); } .mag-cover-save:active { transform: scale(0.94); } @media (min-width: 768px) and (max-width: 1023px) { .mag-cover-sec { padding: 24px 0 0; } .mag-cover-link { max-width: 560px; margin: 0 auto; } .mag-cover-media { border-radius: 16px; } .mag-stand-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .mag-cover-sec { padding: 40px 0 0; } .mag-cover-link { display: grid; grid-template-columns: auto 1fr; gap: 0 56px; align-items: center; width: 100%; max-width: var(--h-container); margin: 0 auto; padding-inline: var(--h-gutter-lg, 40px); } .mag-cover-media { border-radius: 16px; height: min(calc(100vh - 300px), 620px); width: auto; aspect-ratio: 3 / 4; } .mag-masthead { position: static; padding: 0 0 8px; max-width: none; margin: 0; background: none; color: var(--h-ink); } .mag-mh-kicker, .mag-mh-title { color: inherit; } .mag-mh-byline { color: var(--h-ink-3); } .mag-postmark { top: 0; right: 0; background: none; padding: 0; color: var(--h-point); filter: none; } .mag-chips-sec { padding: 28px 0 0; } .mag-stand-sec { padding: 40px 0 120px; } .mag-stand-grid { grid-template-columns: repeat(4, 1fr); gap: 40px 24px; margin-top: 20px; } .mag-stand-meta { font-size: 12px; } .mag-stand-cap { left: 16px; right: 16px; bottom: 14px; } .mag-cover-save { position: static; margin-top: 16px; border: 1px solid var(--h-line-strong); background: none; color: var(--h-ink); backdrop-filter: none; } } /* ============ 월 서클 탭 ============ */ .mag-months-sec { padding: 20px 0 0; } .mag-months { display: flex; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: 4px; margin: -4px -4px 0; } .mag-month-tab { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; background: none; border: 0; padding: 0; cursor: pointer; min-width: 52px; color: var(--h-ink-3); } .mag-month-tab-circle { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--h-surface); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px var(--h-line); } .mag-month-tab-circle img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .mag-month-tab-circle--all { font-family: var(--font-en); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; color: var(--h-ink-2); } .mag-month-tab-label { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .mag-month-tab.is-active { color: var(--h-ink); } .mag-month-tab.is-active .mag-month-tab-circle { box-shadow: 0 0 0 2px var(--h-ink); } .mag-month-tab.is-active .mag-month-tab-label { font-weight: 800; } /* ============ 상세 — 측정높이 3단 셸 (원본 MagazineArticleView inline 값) ============ */ .hv-art { display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--h-ink); } .hv-art__header { flex: 0 0 auto; position: relative; z-index: 60; background: #fff; } .hv-art__hrow { display: flex; align-items: center; gap: 6px; margin: 0 auto; width: 100%; box-sizing: border-box; } .hv-art__hbtn { width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: transparent; color: var(--h-ink); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .hv-art__htitle { flex: 1; min-width: 0; font-family: var(--font-kr); font-weight: 700; letter-spacing: -0.02em; color: var(--h-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-art__prog { height: 3px; background: rgba(0, 0, 0, 0.1); } .hv-art__prog-bar { height: 100%; width: 0%; background: var(--h-ink); transition: width 80ms linear; } .hv-art__scroller { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; } .hv-art__hero { position: sticky; top: 0; z-index: 0; background: #0a0a0a; overflow: hidden; border-radius: 0; } .hv-art__gal { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; box-sizing: border-box; align-items: center; perspective-origin: 50% 50%; } .hv-art__slide { scroll-snap-align: center; position: relative; display: flex; align-items: center; justify-content: center; transform-origin: center center; will-change: transform; } .hv-art__card { position: relative; max-height: 100%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); background: #0a0a0a; } .hv-art__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .hv-art__count { position: absolute; right: 16px; bottom: 16px; z-index: 3; pointer-events: none; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-en); font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); } .hv-art__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0, 0, 0, 0.32); color: #fff; display: inline-flex; align-items: center; justify-content: center; z-index: 3; backdrop-filter: blur(6px); } .hv-art__nav--prev { left: 16px; } .hv-art__nav--next { right: 16px; } .hv-art__sheet { position: relative; z-index: 10; background: #fff; } .hv-art__col { margin: 0 auto; } .hv-art__meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-kr); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--h-ink-3); } .hv-art__cat { color: var(--h-ink-2); } .hv-art__date { font-family: var(--font-en); } .hv-art__h1 { margin: 0; font-family: var(--font-kr); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; white-space: pre-line; color: var(--h-ink); } .hv-art__credit { font-family: var(--font-en); font-size: 14px; color: var(--h-ink-3); } .hv-art__disclosure { border: 1px solid var(--h-line); border-radius: 10px; font-family: var(--font-kr); line-height: 1.6; color: var(--h-ink-2); } .mag-article-body { max-width: 40rem; font-family: var(--font-kr); line-height: 1.85; letter-spacing: -0.01em; color: var(--h-ink-2); word-break: keep-all; } .mag-article-body p { margin: 0 0 1.5em; } .mag-article-body p:last-child { margin-bottom: 0; } .mag-article-body > p:first-of-type { font-size: 1.05em; color: var(--h-ink); } .mag-article-body .mag-h { margin: 2.2em 0 0.7em; font-family: var(--font-kr); font-weight: 800; font-size: 1.18em; line-height: 1.4; letter-spacing: -0.02em; color: var(--h-ink); } .mag-article-body .mag-h:first-child { margin-top: 0; } .mag-article-body strong, .mag-article-body b { font-weight: 700; color: var(--h-ink); } .mag-article-body a { color: var(--h-ink); text-decoration: underline; text-underline-offset: 2px; } .hv-art__tags { display: flex; flex-wrap: wrap; gap: 10px; } .hv-art__tag { font-family: var(--font-kr); color: var(--h-ink-2); background: var(--h-surface); border-radius: 8px; padding: 10px 16px; white-space: nowrap; } .hv-art__follow { border-top: 2px solid var(--h-ink); display: grid; gap: 12px; } .hv-art__follow-eyebrow { color: var(--h-ink-3); } .hv-art__follow-head { margin: 0; font-family: var(--font-kr); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--h-ink); } .hv-art__follow-handle { font-size: 13px; color: var(--h-ink-3); font-variant-numeric: tabular-nums; } .hv-art__related { margin: 0 auto; } .hv-art__related-h2 { margin: 0 0 22px; font-family: var(--font-kr); font-weight: 800; letter-spacing: -0.02em; color: var(--h-ink); } .hv-art__bar { flex: 0 0 auto; z-index: 55; background: #fff; border-top: 1px solid var(--h-line); } .hv-art__bar-row { margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .hv-art__cbtn { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0; margin: -12px 0; color: var(--h-ink); font-family: var(--font-en); font-size: 16px; font-weight: 600; } .hv-art__acts { display: flex; align-items: center; gap: 8px; } .hv-art__abtn { background: none; border: none; cursor: pointer; color: var(--h-ink); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; margin: -12px 0; } .hv-art__abtn--save { margin: -12px -13px -12px 0; } /* 연관상품 줄 (원본 HorizontalProductRow + SectionHeader) */ .hv-story-prow__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; } @media (min-width: 768px) { .hv-story-prow__head { margin-bottom: 24px; } } .hv-story-prow__title { margin: 0; display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--font-en); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .hv-story-prow__count { font-family: var(--font-en); font-size: 13px; font-weight: 500; color: var(--h-ink-2); } /* 댓글 (원본 ArticleComments Tailwind 값) */ .hv-art-comments { margin-top: 40px; } .hv-art-comments__h2 { margin: 0 0 16px; font-family: var(--font-kr); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--h-ink); } .hv-art-comments__form { margin-bottom: 24px; display: flex; align-items: flex-start; gap: 8px; } .hv-art-comments__input { min-height: 52px; flex: 1; resize: none; border-radius: 8px; border: 1px solid var(--h-line); padding: 12px; font-size: 14px; font-family: inherit; outline: none; } .hv-art-comments__input:focus { border-color: var(--h-ink); } .hv-art-comments__submit { flex-shrink: 0; border-radius: 8px; border: 0; background: var(--h-ink); padding: 8px 16px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; min-height: 52px; } .hv-art-comments__submit:disabled { opacity: 0.5; } .hv-art-comments__login { margin-bottom: 24px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--h-line); padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--h-ink-2); text-decoration: none; } .hv-art-comments__error { margin: 0 0 16px; font-size: 14px; color: var(--h-warn); } .hv-art-comments__empty { margin: 0; font-size: 14px; color: var(--h-ink-3); } .hv-art-comments__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; } .hv-art-comments__item { border-bottom: 1px solid var(--h-line); padding-bottom: 16px; } .hv-art-comments__meta { margin-bottom: 4px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--h-ink-3); } .hv-art-comments__who { font-weight: 600; color: var(--h-ink-2); } .hv-art-comments__del { margin-left: auto; min-height: 32px; padding: 0 8px; font-size: 12px; color: var(--h-ink-3); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; cursor: pointer; } .hv-art-comments__text { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.6; color: var(--h-ink); font-family: var(--font-kr); } /* ============================================================================ * `/` 디스커버리 홈 (For You 스냅 페이저 + PC 커버플로우 히어로) — 원본 ForYouSnapPager.STYLE_BLOCK · * DesktopTodayHero · DesktopPlaySaved · FeedOnboarding.STYLE + Tailwind 유틸 등가 클래스(cn-*). * 값은 전부 원본 리터럴/토큰 그대로. 다크 밴드(#0A0A0A·#1c1a18·rgba 화이트)는 원본도 리터럴(h-on-dark 반전과 무관). * ⚠ 작성 중(WIP 2026-09-14) — 컴포넌트(pages/HaveaHome/*)가 이 클래스를 소비한다. docs/story-home-port-plan.md 참조. * ========================================================================== */ /* ── 셸: PC(≥1024) 히어로 / 1023 이하 페이저 (원본 hidden lg:block · lg:hidden) ── */ .cn-home-pc { display: none; } @media (min-width: 1024px) { .cn-home-pc { display: block; } .cn-home-mobile { display: none; } } /* 1023 이하: Layout 헤더는 숨기고 페이저 셸 안의 헤더(header prop)가 그 자리를 맡는다(원본 HideSiteChrome + header 주입) */ @media (max-width: 1023px) { .page[data-havea-home] .site > .hv-mh-m, .page[data-havea-home] .site > .hv-mh-pc { display: none; } } /* 셸 상단(헤더·래플·서클) — 덱 모드는 flex 컬럼의 고정 행, 조망·저장 모드는 body 스크롤이라 래퍼가 sticky 헤더를 자기 높이(53px) 안에 가둔다(9/14 실측). 그 두 모드에서만 박스를 지워 헤더의 sticky 기준을 셸로 올린다. */ .cn-shell-top { flex-shrink: 0; } .cn-shell-top--flow { display: contents; } /* 셸 안 헤더 래퍼 = display:contents (원본 `contents md:hidden` / `hidden md:contents lg:hidden`). 블록 래퍼로 두면 sticky 헤더가 래퍼 높이 안에 갇힌다(#1185·안나 7/27 과 같은 원인). */ .cn-shell-header { display: contents; } /* 홈 루트 — `.l-content > *` 데스크톱 500 상한 예외는 `_layout.css` 목록이 소유(직접 자식 클래스 기준) */ .hv-home--fallback { padding: 64px 16px; } .hv-home__partial { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 12px var(--hv-inset); background: var(--h-surface); color: var(--h-ink-2); font-size: var(--h-fs-body-sm); } .hv-home__partial-retry { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--h-ink); border-radius: var(--h-radius-btn); background: var(--h-bg); color: var(--h-ink); font: inherit; font-size: var(--h-fs-btn); cursor: pointer; } /* 셸 안 헤더: 767 이하 모바일 바 · 768~1023 PC 바 (원본 md:hidden / md:contents lg:hidden) — 각 블록의 자체 미디어 규칙을 따른다 */ /* ── 원본 STYLE_BLOCK ── */ /* 셸 높이 = 뷰포트 전체. dvh = iOS 주소창/툴바 접힘 실시간 반영 (JS innerHeight 실측 폐기 7/17) */ .cn-pager-shell { height: 100vh; min-height: 360px; } @supports (height: 100dvh) { .cn-pager-shell { height: 100dvh; } } /* 태블릿(768~1023) — 셸 폭만 카드에 맞춰 안쪽 요소가 함께 모이게 (안나 8/1) */ @media (min-width: 768px) and (max-width: 1023px) { .cn-pager-shell, .cn-ov-shell { max-width: 560px; margin-inline: auto; } } .cn-actbtn:hover { opacity: 0.78; } .cn-actbtn:active { transform: scale(0.88); } .cn-fcard { transition: transform 220ms cubic-bezier(.22,.61,.36,1); } .cn-fcard:active { transform: scale(0.992); } /* PC 캐러셀 화살표 — 카드 호버 시만 */ .cn-nav { opacity: 0; transition: opacity 160ms ease, background 160ms ease; } .cn-fcard:hover .cn-nav, .cn-nav:focus-visible { opacity: 1; } .cn-shelf-nav { opacity: 0; transition: opacity 160ms ease, background 160ms ease; } .cn-fcard:hover .cn-shelf-nav, .cn-shelf-nav:focus-visible { opacity: 1; } /* 첫 방문 힌트 — 왼쪽 패스·오른쪽 저장·위 패스 예고 */ @keyframes cnSwipeHintNudge { 0%,100%{transform:translate(0,0) rotate(0)} 12%{transform:translate(-38px,0) rotate(-1.2deg)} 24%{transform:translate(0,0)} 40%{transform:translate(38px,0) rotate(1.2deg)} 52%{transform:translate(0,0)} 70%{transform:translate(0,-32px)} 82%{transform:translate(0,0)} } @keyframes cnSwipeHintFade { 0%,6%{opacity:0} 14%,62%{opacity:1} 74%,100%{opacity:0} } .cn-swipe-hint { animation: cnSwipeHintNudge 4.2s var(--h-ease) 0.7s 1; } .cn-swipe-hint-pill { opacity: 0; animation: cnSwipeHintFade 4.2s var(--h-ease) 0.7s 1; } /* 정렬표시 스택 — 우측 가로 오프셋만 (안나 7/24 3차) */ .cn-story-stack-card { transition: transform var(--h-dur-2) var(--h-ease); transform-origin: top left; } .cn-story-stack-card[data-story-depth='0'] { transform: translate3d(0, 0, 0); } .cn-story-stack-card[data-story-depth='1'] { transform: translate3d(8px, 0, 0) scale(0.994); } .cn-story-stack-card[data-story-depth='2'] { transform: translate3d(14px, 0, 0) scale(0.988); } .cn-pager:has([data-swipe-state]) .cn-story-stack-card[data-story-depth='1'] { transform: translate3d(0, 0, 0) scale(1); } .cn-pager:has([data-swipe-state]) .cn-story-stack-card[data-story-depth='2'] { transform: translate3d(8px, 0, 0) scale(0.994); } @media (max-width: 1023px) { .cn-story-stack-card[data-story-depth='1']::after, .cn-story-stack-card[data-story-depth='2']::after { content: ''; position: absolute; top: 2px; bottom: 0; left: 50%; width: min(100% - 32px, 500px); transform: translateX(-50%); border-radius: 20px; pointer-events: none; transition: opacity var(--h-dur-1) linear; } .cn-story-stack-card[data-story-depth='1']::after { background: var(--h-ink-2); } .cn-story-stack-card[data-story-depth='2']::after { background: var(--h-ink-3); } .cn-pager:has([data-swipe-state]) .cn-story-stack-card[data-story-depth='1']::after { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cn-swipe-hint { animation: none; } .cn-swipe-hint-pill { animation: none; opacity: 1; } .cn-story-stack-card { transition: none; } } /* 덱 모드 잠금 스코프 = JS 마운트 클래스(cn-story-live) — 푸터 숨김(≤1023)·고무줄 차단. 탭바는 fixed 오버레이 */ @media (max-width: 1023px) { body.cn-story-live .footer, body.cn-story-live .l-content ~ footer { display: none !important; } html.cn-story-live, body.cn-story-live { overscroll-behavior: none; } } body.cn-story-live [data-mobile-tab-bar] { position: fixed !important; } .cn-mode-fade { animation: cnModeFade 260ms cubic-bezier(0.2, 0, 0, 1); } @keyframes cnModeFade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cn-mode-fade { animation: none; } } /* 저장 리스트 모드도 푸터 숨김 (안나 7/30) */ @media (max-width: 1023px) { body.cn-saved-live .footer, body.cn-saved-live .l-content ~ footer { display: none !important; } } /* ── CnEditorialCard Tailwind 등가 ── */ .cn-tap { position: absolute; top: 0; bottom: 0; z-index: 10; background: transparent; border: 0; padding: 0; cursor: pointer; } .cn-tap--l { left: 0; width: 18%; } .cn-tap--r { right: 0; width: 18%; } .cn-tap--c { left: 18%; right: 18%; } .cn-tap--full { left: 0; right: 0; } .cn-dots { pointer-events: none; position: absolute; left: 12px; right: 12px; top: 12px; z-index: 10; display: flex; gap: 4px; } .cn-dot { height: 2px; flex: 1; border-radius: 999px; background: rgba(255,255,255,0.35); } .cn-dot.is-on { background: #fff; } .cn-nav { position: absolute; top: 50%; z-index: 30; display: flex; width: 40px; height: 40px; transform: translateY(-50%); align-items: center; justify-content: center; border-radius: 50%; border: 0; padding: 0; background: rgba(0,0,0,0.45); color: #fff; backdrop-filter: blur(8px); cursor: pointer; } .cn-nav:hover { background: rgba(0,0,0,0.6); } .cn-nav--l { left: 16px; } .cn-nav--r { right: 16px; } .cn-blend { pointer-events: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; } .cn-overlay { pointer-events: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 11; } .cn-overlay__link { pointer-events: none; display: block; color: inherit; text-decoration: none; } .cn-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 연관상품 선반 */ .cn-shelf { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; } .cn-shelf::-webkit-scrollbar { display: none; } .cn-shelf--m { gap: 8px; padding: 0 12px; } .cn-shelf--pc { gap: 10px; padding: 0 16px; } .cn-shelf-src { flex-shrink: 0; color: rgba(255,255,255,0.55); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; } .cn-chip { display: flex; flex-shrink: 0; align-items: center; border-radius: 12px; background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; transition: background-color 160ms ease; } .cn-chip:hover { background: rgba(255,255,255,0.2); } .cn-chip--m { min-height: 56px; gap: 10px; padding: 6px 16px 6px 6px; } .cn-chip--pc { min-height: 68px; gap: 12px; padding: 8px 20px 8px 8px; } .cn-chip__img { border-radius: 8px; background: #fff; object-fit: contain; } .cn-chip__ph { border-radius: 8px; background: rgba(255,255,255,0.15); } .cn-chip--m .cn-chip__img, .cn-chip--m .cn-chip__ph { width: 48px; height: 48px; } .cn-chip--pc .cn-chip__img, .cn-chip--pc .cn-chip__ph { width: 56px; height: 56px; } .cn-chip__txt { display: flex; flex-direction: column; gap: 2px; } .cn-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.85); } .cn-chip--m .cn-chip__name { max-width: 128px; font-size: 12px; } .cn-chip--pc .cn-chip__name { max-width: 208px; font-size: 14px; } .cn-chip__price { font-weight: 600; color: #fff; } .cn-chip--m .cn-chip__price { font-size: 12px; } .cn-chip--pc .cn-chip__price { font-size: 15px; } .cn-shelf-nav { position: absolute; top: 50%; display: flex; width: 32px; height: 32px; transform: translateY(-50%); align-items: center; justify-content: center; border-radius: 50%; border: 0; padding: 0; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; } .cn-shelf-nav:hover { background: rgba(0,0,0,0.8); } .cn-shelf-nav--l { left: 4px; } .cn-shelf-nav--r { right: 4px; } /* 래플 배너 행 (② 활성 회차 없으면 미노출) */ .cn-raffle { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--h-line); background: var(--h-bg); font-size: 13px; font-weight: 700; color: var(--h-ink); text-decoration: none; } @media (min-width: 768px) { .cn-raffle { padding: 0 32px; } } /* ── FeedOnboarding (원본 STYLE) ── */ @keyframes fobPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } @media (prefers-reduced-motion: no-preference) { .fob-trigger { animation: fobPulse 2.4s ease-in-out infinite; } } .fob-trigger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: transparent; border: none; font-family: var(--font-en, sans-serif); font-size: 18px; font-weight: 700; color: var(--h-ink-3, #949494); cursor: pointer; transition: background 160ms ease, color 200ms ease, transform 120ms ease; flex-shrink: 0; } .fob-trigger:hover { background: rgba(22,21,19,0.06); color: var(--h-ink, #161513); animation: none; } .fob-trigger:active { transform: scale(0.94); animation: none; } .fob-trigger--float { position: fixed; right: 10px; top: 42%; z-index: 45; background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 14px rgba(0,0,0,0.10); color: var(--h-ink-2, #55504A); } /* ── PC 히어로 아래 Now 상품 4열 (원본 DesktopTodayHero) ── */ .cn-now { max-width: var(--h-container); margin: 0 auto; padding: 28px 40px 8px; } .cn-now__eyebrow { margin: 0; font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--h-ink-3); } .cn-now__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 12px; } .cn-now__item { color: var(--h-ink); text-decoration: none; } .cn-now__img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: var(--h-bg-product); border-radius: 8px; display: block; } .cn-now__name { display: block; font-size: 13px; font-weight: 600; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cn-now__price { display: block; font-size: 13px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; } .cn-now__pct { color: var(--h-sale); margin-right: 4px; } /* ============================================================================ * `/today/:no` 월호 뷰어 — 원본 components/today/TodayViewer.tsx 의 STYLE_BLOCK 1:1. * 사이트 셸(헤더·탭바·푸터) 숨김은 Layout `data-havea-today` 스코프로 좁힌다(원본은 라우트 전용 인라인 스타일). * ========================================================================== */ .page[data-havea-today] .hv-mh-m, .page[data-havea-today] .hv-mh-pc, .page[data-havea-today] .hv-tabbar, .page[data-havea-today] .footer, .page[data-havea-today] .l-content ~ footer, .page[data-havea-today] .hv-kakao-fab, .page[data-havea-today] .hv-list-floating, .page[data-havea-today] .fab-top-down { display: none !important; } html.tv-live, body.tv-live { overscroll-behavior: none; } .page[data-havea-today] .tv-root { max-width: none; margin-left: 0; margin-right: 0; } .page[data-havea-today] .page-inner, .page[data-havea-today] .l-content, .page[data-havea-today] .page__content { transform: none; filter: none; perspective: none; contain: none; will-change: auto; } .tv-root, .tv-root * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .tv-root .tv-stage-img { pointer-events: none; } @keyframes tv-stamp { 0% { transform: rotate(-9deg) scale(1.3); opacity: 0; } 60% { transform: rotate(-9deg) scale(0.96); opacity: 1; } 100% { transform: rotate(-9deg) scale(1); opacity: 1; } } .tv-stamp { animation: tv-stamp 360ms cubic-bezier(0.22, 1.4, 0.36, 1) both; } @keyframes tv-fade { from { opacity: 0; } to { opacity: 1; } } .tv-fade { animation: tv-fade 320ms ease both; } @media (prefers-reduced-motion: reduce) { .tv-stamp, .tv-fade { animation: none; } } @keyframes tvSegFill { from { width: var(--tv-fw); } to { width: var(--tv-tw); } } .tv-col { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; position: relative; } .tv-top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; } .tv-side, .tv-pchint { display: none; } .tv-wish { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: 999px; padding: 0; background: #ffffff; color: #111111; cursor: pointer; } .tv-wish[disabled] { opacity: 0.5; cursor: default; } .tv-wish--corner { position: absolute; right: 6px; top: 6px; } @media (min-width: 1024px) { .tv-col { max-width: 430px; margin: 0 auto; } .tv-side { display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 15%; max-width: 210px; aspect-ratio: 9/15.5; border-radius: 14px; overflow: hidden; opacity: 0.45; cursor: pointer; border: none; padding: 0; background: #0a0a0a; transition: opacity 200ms var(--h-ease); } .tv-side:hover { opacity: 0.7; } .tv-side img { width: 100%; height: 100%; object-fit: cover; display: block; } .tv-side--l { left: 3%; } .tv-side--r { right: 3%; } .tv-pchint { display: flex; justify-content: center; gap: 8px; padding: 8px 0 14px; font-size: 11px; color: rgba(255, 255, 255, 0.5); } } /* ============================================================================ D-2 리밋(공구) — 원본 app/(shop)/limit/page.tsx(v4 한 페이지) · limit/[eventNo]/page.tsx · _components/* · globals.css 리밋 절 1:1. 값은 전부 토큰(--h-*)에서. 티어 면 = 공구 블랙(.h-on-dark 토큰 반전) · 협력사 회색(--h-surface) · 타임세일 화이트(헤어라인). ============================================================================ */ /* ---- 토큰 반전 패널 (원본 globals.css .h-on-dark — 잉크·면·구분면·액센트 한 벌 전부 뒤집는다 + 검정 캔버스) ---- */ .h-on-dark { --h-ink: #ffffff; --h-bg: #0a0a0a; --h-ink-2: rgba(255, 255, 255, 0.72); --h-ink-3: rgba(255, 255, 255, 0.55); --h-line: rgba(255, 255, 255, 0.18); --h-surface: rgba(255, 255, 255, 0.07); --h-point: #ffffff; --h-sale: #ffffff; color: #ffffff; background: linear-gradient(180deg, #0a0a0a 0%, #050505 60%, #000 100%); } /* ---- 페이지 셸 ---- */ .hv-limit { background: var(--h-bg); color: var(--h-ink); } .hv-limit-wrap { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 0 var(--hv-inset); } /* 모바일은 고정 스트립이 헤더 바로 아래 붙어 한 덩어리로 읽히게 pt-0 (원본 pb-24 pt-0 md:pt-8) */ .hv-limit-wrap--index { padding-top: 0; padding-bottom: 96px; } .hv-limit-fallback { padding: 80px 0; } .hv-limit-panel { padding-top: 8px; } .hv-limit-empty { margin: 0; padding: 40px 0; text-align: center; font-size: 13px; color: var(--h-ink-3); } @media (min-width: 768px) { .hv-limit-wrap--index { padding-top: 32px; } .hv-limit-panel { padding-top: 12px; } } /* ---- 고정 스트립 한 줄 [브랜드 서클 … 캡슐 드롭] 60(모바일)/68(PC) — 헤더와 같은 유리 토큰, 헤더가 숨으면 --h-header-offset 을 따라 맨 위로 ---- */ .hv-limit-nav { position: sticky; top: var(--h-header-offset, 0px); z-index: 5; display: flex; align-items: center; gap: 12px; height: 60px; margin: 0 calc(-1 * var(--h-gutter)); padding: 0 var(--h-gutter); background: var(--h-glass-bg); backdrop-filter: var(--h-glass-blur); -webkit-backdrop-filter: var(--h-glass-blur); transition: top var(--h-dur-2) var(--h-ease), opacity 200ms var(--h-ease); } /* 종료 구간에선 스트립이 사라진다 — 레이아웃 시프트 없이 투명·통과(sticky 자리는 유지) */ .hv-limit-nav--off { opacity: 0; pointer-events: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .hv-limit-nav__slot { min-width: 0; flex: 1; } .hv-limit-nav__drop { flex-shrink: 0; } .hv-limit-nav__label { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; } .hv-limit-block, .hv-limit-section { scroll-margin-top: calc(var(--h-header-offset, 0px) + 60px + 8px); } .hv-limit-section--next { margin-top: 56px; } /* 캡슐 드롭 트리거 — 브라우저 기본 사각 포커스 링 대신 캡슐 모양 링 */ .hv-cdrop__trigger:focus-visible > span { box-shadow: 0 0 0 2px var(--h-ink); } @media (min-width: 768px) { .hv-limit-nav { height: 68px; margin: 0; padding: 0; } .hv-limit-block, .hv-limit-section { scroll-margin-top: calc(var(--h-header-offset, 0px) + 68px + 8px); } .hv-limit-section--next { margin-top: 80px; } } /* ---- 가로 스크롤 래퍼(원본 HScroller) ---- */ .hv-limit-hs { position: relative; } .hv-limit-hs__scroll { width: 100%; overflow-x: auto; } .hv-limit-hs__scroll--pad { padding: 4px 0; } /* ---- 브랜드 서클 내비 ---- */ .hv-limit-bnav__row { display: flex; gap: 14px; min-width: max-content; } .hv-limit-bnav__btn { width: 60px; padding: 0; border: 0; background: transparent; text-align: center; cursor: pointer; } .hv-limit-bnav__ring { display: block; box-sizing: border-box; width: 40px; height: 40px; margin: 0 auto; padding: 2px; overflow: hidden; border-radius: 50%; border: 1px solid transparent; box-shadow: inset 0 0 0 1px var(--h-line-2, var(--h-line)); background: var(--h-bg-product); background-clip: content-box; } .hv-limit-bnav__ring.is-on { border: 2px solid var(--h-ink); box-shadow: none; } .hv-limit-bnav__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .hv-limit-bnav__name { display: block; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; line-height: 1.25; font-weight: 500; color: var(--h-ink-3); } .hv-limit-bnav__name.is-on { font-weight: 700; color: var(--h-ink); } @media (min-width: 768px) { .hv-limit-bnav__ring { width: 44px; height: 44px; } } /* ---- 라이브 블록 (티어별 면) ---- */ .hv-limit-block--first { margin-top: 12px; } /* 타임세일(면 없음) 2번째부터 = 헤어라인 구분 (원본 mt-10 border-t pt-8 md:mt-14 md:pt-10) */ .hv-limit-block--sep { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--h-line-2, var(--h-line)); } /* 면 블록 = 모바일 전폭(-mx-4 px-4 py-5) · md+ 라운드(px-6 py-6) */ .hv-limit-block--faced { margin-left: calc(-1 * var(--h-gutter)); margin-right: calc(-1 * var(--h-gutter)); padding: 20px var(--h-gutter); } .hv-limit-block--faced.hv-limit-block--next { margin-top: 32px; } .hv-limit-block--gray { background: var(--h-surface); } @media (min-width: 768px) { .hv-limit-block--sep { margin-top: 56px; padding-top: 40px; } .hv-limit-block--faced { margin-left: 0; margin-right: 0; padding: 24px; border-radius: var(--h-radius-card); } .hv-limit-block--faced.hv-limit-block--next { margin-top: 40px; } } /* 블록 헤더 — 남은 시간(텍스트 한 줄) 좌, 쿠폰 바는 PC 우측 · 모바일 아래 전폭 */ .hv-limit-bh__time { display: flex; align-items: baseline; gap: 10px; } .hv-limit-bh__label { font-size: 12px; font-weight: 500; color: var(--h-ink-3); } /* 타이머 = 29CM 실측(모바일 14 · PC 16), 색은 잉크. 24h 미만 urgent 레드는 컴포넌트 규칙 */ .hv-limit-bh__cd { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .hv-limit-cd { font-size: 13px; font-weight: 700; } .hv-limit-cd.is-urgent, .hv-limit-bh__cd.is-urgent { color: #dc2626; } .hv-limit-bh__coupon-pc { display: none; } @media (min-width: 768px) { .hv-limit-bh__cd { font-size: 16px; } } @media (min-width: 1024px) { .hv-limit-bh { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .hv-limit-bh__coupon-pc { display: block; width: 360px; flex-shrink: 0; } .hv-limit-bh__coupon-m { display: none; } } /* ---- 쿠폰 바 (잉크 면 + 양쪽 펀칭 노치 + 「쿠폰받기 ↓」, 기간 표기 없음) ---- */ .hv-limit-cbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: 8px; background: var(--h-ink); color: var(--h-bg); } .hv-limit-cbar--mt { margin-top: 12px; } .hv-limit-cbar__notch { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--limit-face, var(--h-bg)); } .hv-limit-cbar__notch--l { left: 0; transform: translate(-50%, -50%); } .hv-limit-cbar__notch--r { right: 0; transform: translate(50%, -50%); } .hv-limit-cbar__text { min-width: 0; } .hv-limit-cbar__title, .hv-limit-cbar__meta { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hv-limit-cbar__title { font-size: 13px; font-weight: 800; } .hv-limit-cbar__meta { font-size: 11px; opacity: 0.7; } .hv-limit-cbar__btn { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.85); background: transparent; color: var(--h-bg); font-size: 12px; font-weight: 700; cursor: pointer; } /* ---- 포스터 히어로 ---- */ .hv-limit-hero { display: block; color: inherit; text-decoration: none; } .hv-limit-hero__img { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--h-radius-card); background: var(--h-bg-product); } .hv-limit-hero__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-limit-hero__live { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--h-bg); color: var(--h-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .hv-limit-hero__dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--h-live, #c8102e); } @media (prefers-reduced-motion: no-preference) { .hv-limit-hero__dot { animation: hv-limit-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } } @keyframes hv-limit-pulse { 50% { opacity: 0.5; } } /* 포스터 위 텍스트 — 브랜드 주인공(24/800, PC 28) · 제목 보조(13, 82%) · 스크림은 아래 55% 를 덮고 바닥 0.78 까지 */ .hv-limit-hero__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 80px 16px 16px; text-align: left; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0.78) 100%); color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .hv-limit-hero__brand { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .hv-limit-hero__title { display: block; font-size: 13px; font-weight: 500; opacity: 0.82; line-height: 1.35; } .hv-limit-hero__caption { display: block; margin-top: 12px; } .hv-limit-hero__caption > b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; } .hv-limit-hero__caption > span { display: block; font-size: 13px; color: var(--h-ink-2); } @media (min-width: 768px) { .hv-limit-hero__overlay { padding: 80px 20px 20px; } .hv-limit-hero__brand { font-size: 28px; } } /* ---- [포스터 | 리밋 상품 2줄 레일] ---- */ .hv-limit-rail { position: relative; } .hv-limit-rail--mt { margin-top: 20px; } .hv-limit-rail__col { min-width: 0; margin-top: 20px; } .hv-limit-rail__scroller { margin: 0 calc(-1 * var(--h-gutter)); padding: 0 var(--h-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--h-gutter); } .hv-limit-rail__cell { scroll-snap-align: start; } /* 원본 .h-rail-limit — 모바일 한 줄 2.15열 · md+ 카드 211(29CM PC 실측) × 2줄 */ .hv-limit-rail__track { display: grid; grid-auto-flow: column; grid-template-rows: auto; grid-auto-columns: calc((100% - 10px) / 2.15); column-gap: 10px; } .hv-limit-rail__more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 16px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.12); background: #ffffff; color: #000000; font-size: 14px; font-weight: 600; cursor: pointer; } @media (min-width: 768px) { .hv-limit-rail__scroller { margin: 0; padding: 0; scroll-padding: 0; } .hv-limit-rail__track { grid-template-rows: auto auto; grid-auto-columns: 211px; column-gap: 12px; row-gap: 24px; } .hv-limit-rail__more { display: none; } } @media (min-width: 1024px) { .hv-limit-rail__grid { display: grid; grid-template-columns: 519px 1fr; align-items: stretch; gap: 24px; } .hv-limit-rail__col { margin-top: 0; } /* PC 포스터가 옆 2줄 레일 높이를 그대로 채운다(1:1 대신 object-cover) */ .hv-limit-hero--fill { height: 100%; } .hv-limit-hero--fill > .hv-limit-hero__img { aspect-ratio: auto !important; height: 100%; } } /* ---- 리밋 상품 전체보기 바텀 시트 (모바일 전용, §7.2 시트 정본) ---- */ .hv-limit-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: var(--h-dim-sheet); animation: hv-limit-sheet-backdrop 240ms var(--h-ease); } .hv-limit-sheet__panel { display: flex; flex-direction: column; width: 100%; max-height: 88vh; max-height: 88dvh; padding: 8px 16px 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--h-bg); box-shadow: 0 -16px 40px -16px rgba(0, 0, 0, 0.18); animation: hv-limit-sheet-slide 280ms cubic-bezier(0.22, 1, 0.36, 1); } .hv-limit-sheet__grip-row { display: flex; flex-shrink: 0; align-items: center; justify-content: center; padding: 12px 0 16px; touch-action: none; cursor: grab; } .hv-limit-sheet__grip { width: 44px; height: 4px; border-radius: 999px; background: var(--h-line-strong); } .hv-limit-sheet__head { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding-bottom: 12px; } .hv-limit-sheet__title { display: flex; align-items: baseline; gap: 8px; } .hv-limit-sheet__title > b { font-size: 17px; font-weight: 700; } .hv-limit-sheet__title > span { font-size: 12px; color: var(--h-ink-3); } .hv-limit-sheet__x { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -12px; border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--h-ink-3); cursor: pointer; } .hv-limit-sheet__scroll { flex: 1; min-height: 0; max-height: calc(88vh - 120px - env(safe-area-inset-bottom, 0px)); max-height: calc(88dvh - 120px - env(safe-area-inset-bottom, 0px)); padding-bottom: 16px; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .hv-limit-sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; } @keyframes hv-limit-sheet-backdrop { from { opacity: 0; } to { opacity: 1; } } @keyframes hv-limit-sheet-slide { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (min-width: 768px) { .hv-limit-sheet { display: none; } } /* ---- 라이브 하단 유의사항 접힘 행 ---- */ .hv-limit-notice-wrap { margin-top: 48px; } .hv-limit-notice__summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; list-style: none; border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); font-size: 14px; font-weight: 600; cursor: pointer; } .hv-limit-notice__summary::-webkit-details-marker { display: none; } .hv-limit-notice__summary::marker { content: ''; } .hv-limit-notice__chev { flex-shrink: 0; transition: transform 160ms ease; } .hv-limit-notice[open] .hv-limit-notice__chev { transform: rotate(180deg); } .hv-limit-notice__list { display: grid; gap: 6px; margin: 12px 0 0; padding: 16px; list-style: none; border-radius: var(--h-radius-card); background: var(--h-surface); font-size: 13px; line-height: 1.65; color: var(--h-ink-2); } /* ---- 공유하기 FAB — 우하단 48 원형 유리, 위로가기 바로 위(원본 = 위로가기 48 + 8 간격). 이 스킨의 위로가기는 native `.fab-top-down`(fixed, bottom 114 · 50 — 모바일은 같은 x 에 있다) 이라 그 위 8px 에 앉힌다. PC 는 native 버튼이 거터 밖(우 240)이라 원본 값 그대로 ---- */ .hv-limit-share { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--h-h-tabbar, 72px) + 20px + 56px); z-index: 40; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--h-glass-border); background: var(--h-glass-bg); backdrop-filter: var(--h-glass-blur); -webkit-backdrop-filter: var(--h-glass-blur); box-shadow: var(--h-glass-shadow); color: var(--h-ink); cursor: pointer; } @media (min-width: 1024px) { .hv-limit-share { bottom: calc(40px + env(safe-area-inset-bottom, 0px) + 56px); } } /* ---- 오픈런 ---- */ .hv-limit-open__head { min-width: 0; } .hv-limit-open__h2, .hv-limit-ended__h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .hv-limit-open__sub { margin: 4px 0 0; font-size: 13px; color: var(--h-ink-2); } .hv-limit-dates { margin-top: 16px; } .hv-limit-dates__row { display: flex; gap: 6px; min-width: max-content; } .hv-limit-date { flex-shrink: 0; min-width: 52px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--h-line-2, var(--h-line)); background: transparent; color: var(--h-ink-3); font-size: 10.5px; line-height: 1.2; text-align: center; cursor: pointer; } .hv-limit-date > b { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .hv-limit-date.is-on { border: 1.5px solid var(--h-ink); color: var(--h-ink); } .hv-limit-date.is-on > b { font-weight: 700; } .hv-limit-carousel { position: relative; margin-top: 16px; overflow: hidden; border-radius: var(--h-radius-card); } .hv-limit-track { display: flex; transition: transform 480ms var(--h-ease); will-change: transform; } @media (prefers-reduced-motion: reduce) { .hv-limit-track { transition: none; } } .hv-limit-card { flex-shrink: 0; width: 100%; } .hv-limit-card__poster { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--h-bg-product); } .hv-limit-card__poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* 모바일 오버레이 — 브랜드·제목·흰 알림 버튼·날짜 바 */ .hv-limit-card__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 96px 16px 16px; text-align: center; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 30%, rgba(0, 0, 0, 0.62) 100%); color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .hv-limit-card__brand { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } .hv-limit-card__title { display: block; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; opacity: 0.88; } .hv-limit-card__notify { margin-top: 16px; } .hv-limit-card__date { margin-top: 0; padding: 10px 0; border-radius: 0 0 var(--h-radius-btn) var(--h-radius-btn); background: rgba(0, 0, 0, 0.45); font-size: 13px; font-weight: 500; text-shadow: none; } .hv-limit-card__pc { display: none; } .hv-limit-counter { position: absolute; right: 12px; top: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #ffffff; font-size: 11px; font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { .hv-limit-card { display: grid; grid-template-columns: 548px 1fr; } .hv-limit-card__poster { aspect-ratio: 1 / 1; } .hv-limit-card__overlay { display: none; } /* PC 우측 회색면 — 날짜 필 · 브랜드 · 제목 · 알림 받기 */ .hv-limit-card__pc { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px; text-align: center; background: var(--h-surface); } .hv-limit-card__datepill { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--h-ink-3); color: #ffffff; font-size: 12px; font-weight: 600; } .hv-limit-card__pcbrand { display: block; margin-top: 20px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } .hv-limit-card__pctitle { display: block; margin-top: 8px; font-size: 14px; color: var(--h-ink-2); } .hv-limit-card__pcnotify { width: 240px; margin-top: 28px; } .hv-limit-counter { right: 16px; top: 16px; } } /* ---- 종료 ---- */ .hv-limit-ended__sub { margin: 4px 0 16px; font-size: 13px; color: var(--h-ink-2); } .hv-limit-ended__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .hv-limit-ended__row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; border: 1px solid var(--h-line-2, var(--h-line)); color: var(--h-ink-3); text-decoration: none; } .hv-limit-ended__thumb { display: block; flex-shrink: 0; width: 64px; height: 64px; overflow: hidden; border-radius: 8px; background: var(--h-bg-product); opacity: 0.7; } .hv-limit-ended__thumb > img { width: 100%; height: 100%; object-fit: cover; } .hv-limit-ended__text { flex: 1; min-width: 0; } .hv-limit-ended__title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 600; } .hv-limit-ended__meta { display: block; font-size: 11.5px; opacity: 0.8; } .hv-limit-ended__badge { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--h-bg-product); font-size: 11px; font-style: normal; } /* ---- 오픈 알림 신청 버튼 + 모달 ---- */ .hv-gb-notify { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 0; border-radius: var(--h-radius-btn); background: #000000; color: #ffffff; font-size: 15px; font-weight: 700; cursor: pointer; } .hv-gb-notify--on-image { background: #ffffff; color: #000000; } .hv-gb-notify--compact { display: inline-flex; flex-shrink: 0; gap: 6px; width: auto; padding: 0 14px; border: 1px solid var(--h-line); background: #ffffff; color: var(--h-ink); font-size: 12px; font-weight: 600; white-space: nowrap; } .hv-gb-nmodal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.4); } .hv-gb-nmodal__panel { width: 100%; max-width: 448px; padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: #ffffff; color: #161513; } .hv-gb-nmodal__grip { display: block; width: 48px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: var(--h-line-strong); } .hv-gb-nmodal__done { padding: 32px 0; text-align: center; } .hv-gb-nmodal__bell { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; background: #000000; color: #ffffff; } .hv-gb-nmodal__done-text { margin: 0; font-size: 15px; font-weight: 700; } .hv-gb-nmodal__head { margin-bottom: 16px; } .hv-gb-nmodal__title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; } .hv-gb-nmodal__desc { margin: 4px 0 0; font-size: 12px; color: #6b7280; } .hv-gb-nmodal__form { display: flex; flex-direction: column; gap: 12px; } .hv-gb-nmodal__input { height: 48px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--h-line); font-size: 16px; } .hv-gb-nmodal__consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #4b5563; } .hv-gb-nmodal__check { width: 16px; height: 16px; margin-top: 2px; } .hv-gb-nmodal__err { margin: 0; font-size: 12px; color: #dc2626; } .hv-gb-nmodal__submit { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; border: 0; border-radius: var(--h-radius-btn); background: #000000; color: #ffffff; font-size: 15px; font-weight: 700; cursor: pointer; } .hv-gb-nmodal__submit:disabled { opacity: 0.6; } .hv-gb-nmodal__cancel { min-height: 40px; border: 0; background: transparent; font-size: 12px; color: #6b7280; cursor: pointer; } @media (min-width: 640px) { .hv-gb-nmodal { align-items: center; } .hv-gb-nmodal__panel { border-radius: 20px; } .hv-gb-nmodal__grip { display: none; } } /* ============================================================================ 상세 /limit/:eventNo — PC-A 스플릿 홀(좌 세로 포스터 3:4 / 우 상태·D-day·타이틀·CTA), 모바일 풀블리드 히어로 + 하단 고정 바 ============================================================================ */ .hv-limit-ev { padding-bottom: 112px; } .hv-limit-ev--ended { padding-bottom: 48px; } .hv-gb-hero { position: relative; } .hv-gb-hero__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #000000; } .hv-gb-hero__media > video, .hv-gb-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-gb-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)); } .hv-gb-hero__ad { position: absolute; right: 16px; top: 16px; } .hv-gb-hero__badge { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(22, 21, 19, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #ffffff; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; } .hv-gb-hero__badge-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--h-point); } .hv-gb-hero__credit { position: absolute; left: 20px; right: 20px; bottom: 24px; } .hv-gb-hero__credit-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: rgba(255, 255, 255, 0.9); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; } .hv-gb-hero__credit-text { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 12px; } .hv-gb-status { padding-top: 20px; } .hv-gb-status__row { display: flex; align-items: center; gap: 12px; } .hv-gb-status__bonus { margin: 8px 0 0; font-size: 12px; color: #4b5563; } .hv-gb-status__archived { margin: 8px 0 0; font-size: 12px; color: #6b7280; } .hv-gb-info { display: flex; flex-direction: column; padding-bottom: 32px; } .hv-gb-info__big { margin-top: 28px; } .hv-gb-info__eyebrow { margin: 0; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-ink-3); } .hv-gb-info__num { margin: 10px 0 0; font-size: 48px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .hv-gb-info__h1 { margin: 16px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; } .hv-gb-info__dates { margin: 8px 0 0; font-size: 14px; color: var(--h-ink-2); } .hv-gb-info__desc { max-width: 46ch; margin: 16px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--h-ink-2); } .hv-gb-info__notice { margin: 10px 0 0; font-size: 12px; color: var(--h-ink-3); } .hv-gb-info__cta { margin-top: auto; padding-top: 24px; } /* 모바일 READY/ING 는 하단 고정 바가 CTA — 본문 CTA 는 END 안내만 */ .hv-gb-info__cta--pc { display: none; } .hv-gb-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; background: #000000; color: #ffffff; font-size: 15px; font-weight: 700; text-decoration: none; } .hv-gb-cta--ended { border: 1px solid #e5e7eb; background: transparent; color: #9ca3af; font-weight: 400; } .hv-gb-hint { margin: 10px 0 0; font-size: 12px; color: var(--h-ink-3); } .hv-gb-hint--center { margin-top: 8px; text-align: center; } .hv-gb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--h-line); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hv-limit-ev__products { padding: 32px 0; } .hv-limit-ev__ph { margin: 0 0 16px; font-size: 12px; text-transform: uppercase; color: #6b7280; } .hv-limit-ev__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .hv-gb-hero__media { aspect-ratio: 21 / 9; } .hv-gb-hero__credit { left: 64px; right: auto; bottom: 48px; max-width: 672px; } .hv-limit-ev__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .hv-limit-ev__split { display: grid; grid-template-columns: 46fr 54fr; align-items: stretch; gap: 48px; width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 40px var(--h-gutter-lg) 0; } .hv-limit-ev__info { display: flex; flex-direction: column; max-width: none; margin: 0; padding: 0; } .hv-gb-hero__media { aspect-ratio: 3 / 4; border-radius: 12px; } .hv-gb-hero__credit { left: 20px; right: 20px; bottom: 24px; max-width: none; } .hv-gb-status { padding-top: 0; } .hv-gb-info { flex: 1; padding: 0; } .hv-gb-info__num { font-size: 60px; } .hv-gb-info__h1 { font-size: 26px; } .hv-gb-info__cta { max-width: 360px; } .hv-gb-info__cta--pc { display: block; } .hv-gb-bar { display: none; } } /* ============================================================================ C-3a 장바구니 — 원본 app/(shop)/cart/page.tsx · _components/* · components/{EmptyBagSuggestions,CheckoutStepper,MinimalMobileHeader} 의 Tailwind·인라인 값을 같은 값으로. 모바일 우선, md 768 / lg 1024. 값은 style.css :root 토큰. ============================================================================ */ /* ---- 셸: 모바일은 심플 헤더가 HAVEA 모바일 헤더를 대신하고, 채워진 카트만 탭 바·푸터 숨김(하단 고정 CTA) ---- */ @media (max-width: 767px) { .page[data-havea-cart] .hv-mh-m { display: none !important; } .page[data-havea-cart='filled'] .hv-tabbar { display: none !important; } } /* 사이트 푸터는 모바일·PC 모두 숨김 — 원본 cart/page.tsx·checkout/page.tsx `[data-site-footer]{display:none}` (운영자 요청 2026-05-23) */ .page[data-havea-cart='filled'] .l-content ~ footer, .page[data-havea-cart='filled'] .footer { display: none !important; } /* native 우하단 FAB(맨 위로)는 고정 CTA 와 겹친다 — 채워진 카트에선 숨김 */ .page[data-havea-cart='filled'] .fab-top-down { display: none !important; } .hv-cart { background: var(--h-bg); color: var(--h-ink); } /* 원본 h-container pb-20 pt-6 md:pb-[120px] md:pt-10 (채워진 카트는 lg 미만 pb 130 — 고정 CTA 클리어런스) */ .hv-cart-wrap { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 24px var(--hv-inset) 80px; } .hv-cart-fallback { padding-top: 80px; padding-bottom: 80px; } @media (max-width: 1023px) { .hv-cart--filled { padding-bottom: 130px; } } @media (min-width: 768px) { .hv-cart-wrap, .hv-cart-wrap--filled { padding-top: 40px; padding-bottom: 120px; } } /* ---- 모바일 심플 헤더 (타이틀 모드: ← 타이틀 홈, sticky 유리) ---- */ .hv-cart-mh { position: sticky; top: 0; left: 0; right: 0; z-index: 60; padding-top: env(safe-area-inset-top, 0px); background: var(--h-glass-bg); backdrop-filter: var(--h-glass-blur); -webkit-backdrop-filter: var(--h-glass-blur); } .hv-cart-mh__row { position: relative; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; } .hv-cart-mh__chip { display: inline-flex; padding: 14px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--h-ink); cursor: pointer; } .hv-cart-mh__title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--h-ink); white-space: nowrap; } @media (min-width: 768px) { .hv-cart-mh { display: none; } } /* ---- 머리: 제목(모바일 sr-only) + 스텝퍼 ---- */ .hv-cart-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .hv-cart-h1 { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (min-width: 768px) { .hv-cart-head { margin-bottom: 40px; } .hv-cart-h1 { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-family: var(--font-en); font-size: var(--h-fs-display-m, 40px); font-weight: var(--h-fw-sb, 600); line-height: 1.05; letter-spacing: var(--h-track-tight, -0.02em); } } .hv-cart-stepper { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 11px; letter-spacing: 0.06em; } .hv-cart-stepper__item { display: inline-flex; align-items: center; gap: 6px; color: var(--h-ink-3); font-weight: 400; } .hv-cart-stepper__item.is-done { color: var(--h-ink-2); } .hv-cart-stepper__item.is-active { color: var(--h-ink); font-weight: 700; } .hv-cart-stepper__label { white-space: nowrap; text-transform: uppercase; } .hv-cart-stepper__dot { margin: 0 2px; color: var(--h-ink-3); } @media (min-width: 768px) { .hv-cart-stepper { gap: 24px; font-size: 12px; } } /* ---- 2열 그리드: 라인 | sticky ORDER SUMMARY 380 ---- */ .hv-cart-grid { display: grid; grid-template-columns: 1fr; align-items: start; gap: 32px; } .hv-cart-col { min-width: 0; } .hv-cart-aside { display: none; } .hv-cart-xs-pc { display: none; } @media (min-width: 1024px) { .hv-cart-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; } .hv-cart-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; align-self: start; } .hv-cart-xs-pc { display: block; } .hv-cart-xs-m { display: none; } } .hv-cart-aside__eyebrow { margin: 0 0 8px; } /* ---- 최대 할인 배너 ---- */ .hv-cart-maxd { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 16px 18px; border-radius: var(--h-radius-card); background: var(--h-surface); transition: background 0.25s var(--h-ease); } .hv-cart-maxd--m { padding: 14px 16px; } .hv-cart-maxd__check { display: inline-flex; flex-shrink: 0; } .hv-cart-maxd__text { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--h-ink-2); } .hv-cart-maxd--m .hv-cart-maxd__text { font-size: 14px; } .hv-cart-maxd__text.is-on { font-weight: 700; color: var(--h-point); } .hv-cart-switch { position: relative; flex-shrink: 0; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; } .hv-cart-switch:disabled { opacity: 0.55; cursor: default; } .hv-cart-switch__track { position: absolute; inset: 10px 0; border-radius: 999px; background: var(--h-line-strong); } .hv-cart-switch.is-on .hv-cart-switch__track { background: var(--h-point); } .hv-cart-switch__knob { position: absolute; top: 12px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); transition: left 0.2s var(--h-ease); } .hv-cart-switch.is-on .hv-cart-switch__knob { left: 22px; } /* ---- 선택 헤더 ---- */ .hv-cart-sel { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 0; } .hv-cart-sel__all { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 13px; cursor: pointer; } .hv-cart-sel__check { width: 20px; height: 20px; accent-color: var(--h-ink); } .hv-cart-sel__actions { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; } .hv-cart-sel__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; border: 0; background: transparent; color: inherit; cursor: pointer; } .hv-cart-sel__btn:disabled { opacity: 0.4; } /* ---- 라인 카드 (모바일 보더 카드, PC 헤어라인) ---- */ @media (max-width: 767px) { .hv-cart-card { padding: 0 16px; border: 1px solid var(--h-line); border-radius: var(--h-radius-card); } .hv-cart-card + .hv-cart-card { margin-top: 12px; } } .hv-cart-hairline { display: none; height: 1px; background: var(--h-line); } @media (min-width: 768px) { .hv-cart-hairline { display: block; } } .hv-cart-line { display: grid; grid-template-columns: 24px 96px minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px 0 0; } .hv-cart-line__check { width: 16px; height: 16px; margin-top: 8px; accent-color: var(--h-ink); } .hv-cart-line__thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--h-radius-card); background: var(--h-bg-product); } .hv-cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; } .hv-cart-line__soldout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.6); font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--h-ink); } .hv-cart-line__meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hv-cart-line__brand { margin: 0; } .hv-cart-line__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: inherit; text-decoration: none; transition: opacity var(--h-dur-1) var(--h-ease); } .hv-cart-line__name:hover { opacity: 0.7; } .hv-cart-line__opt, .hv-cart-line__invalid { margin: 0; } .hv-cart-line__invalid { color: var(--h-sale); } .hv-cart-line__qty { margin-top: 6px; } .hv-cart-qty { display: flex; align-items: center; gap: 12px; } .hv-cart-qty__remove { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; border: 0; background: transparent; color: var(--h-ink-2); text-decoration: underline; cursor: pointer; } .hv-cart-qty__remove:disabled { opacity: 0.5; } .hv-cart-item.is-invalid { opacity: 0.85; } .hv-cart-item__bottom { padding-bottom: 16px; } .hv-cart-line__rows { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .hv-cart-line__row { display: flex; align-items: baseline; justify-content: space-between; } .hv-cart-line__row-label { font-size: 14px; color: var(--h-ink); } .hv-cart-line__row-label--muted { color: var(--h-ink-3); } .hv-cart-line__row-amt { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .hv-cart-line__row-ship { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } @media (min-width: 768px) { .hv-cart-line { grid-template-columns: 24px 120px minmax(0, 1fr); gap: 20px; padding: 20px 0 0; } } /* ---- 라인 「할인쿠폰」 행 ---- */ .hv-cart-lcoupon { display: flex; align-items: center; gap: 6px; margin-top: 14px; } .hv-cart-lcoupon__btn { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; height: 52px; padding: 0 14px; border: 1px solid var(--h-line); border-radius: var(--h-radius-input, 8px); background: var(--h-bg); color: var(--h-ink); text-align: left; cursor: pointer; } .hv-cart-lcoupon__btn.is-selected { border-color: var(--h-ink); } .hv-cart-lcoupon__btn:disabled { cursor: default; } .hv-cart-lcoupon__label { flex-shrink: 0; font-size: 13px; color: var(--h-ink-2); } .hv-cart-lcoupon__muted { flex: 1; font-size: 13px; color: var(--h-ink-3); text-align: right; } .hv-cart-lcoupon__sel { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; overflow: hidden; } .hv-cart-lcoupon__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--h-ink-2); } .hv-cart-lcoupon__disc { white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--h-point); font-variant-numeric: tabular-nums; } .hv-cart-lcoupon__chev { display: inline-flex; flex-shrink: 0; color: var(--h-ink-3); } .hv-cart-lcoupon__cancel { flex-shrink: 0; height: 52px; padding: 0 12px; font-size: 12px; } /* ---- 라인 CTA + 예상 결제 펼침 ---- */ .hv-cart-lact { display: flex; flex-direction: column; margin-top: 14px; } .hv-cart-lact__btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .hv-cart-lact__btns--one { grid-template-columns: minmax(0, 1fr); } .hv-cart-lact__btn { height: 52px; } .hv-cart-lact__est { margin-top: 14px; padding-top: 14px; } .hv-cart-lact__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: transparent; color: var(--h-ink); cursor: pointer; } .hv-cart-lact__est-label { white-space: nowrap; font-size: 15px; font-weight: 700; } .hv-cart-lact__est-val { display: inline-flex; align-items: center; gap: 6px; } .hv-cart-lact__amount { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .hv-cart-lact__chev { display: inline-flex; color: var(--h-ink-3); transition: transform 0.2s; } .hv-cart-lact__chev.is-open { transform: rotate(180deg); } .hv-cart-lact__rows { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; } .hv-cart-lact__row { display: flex; align-items: baseline; justify-content: space-between; } .hv-cart-lact__row > span:first-child { font-size: 13px; color: var(--h-ink-3); } .hv-cart-lact__row > span:last-child { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; } /* ---- PC ORDER SUMMARY 장부 ---- */ .hv-cart-sum { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 20px; background: var(--h-surface); } .hv-cart-sum__row { display: flex; align-items: baseline; justify-content: space-between; } .hv-cart-sum__label { font-size: 13px; font-weight: 400; color: var(--h-ink-2); } .hv-cart-sum__val { font-size: 14px; font-weight: 500; color: var(--h-ink); font-variant-numeric: tabular-nums; } .hv-cart-sum__val.is-accent { color: var(--h-sale); } .hv-cart-sum__cod { margin: 0; color: var(--h-ink-3); } .hv-cart-sum__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 2px solid var(--h-ink); } .hv-cart-sum__total-label { font-size: 16px; font-weight: 600; color: var(--h-ink); } .hv-cart-sum__total-val { font-size: 22px; font-weight: 700; color: var(--h-ink); font-variant-numeric: tabular-nums; transition: opacity 120ms; } .hv-cart-sum__total-val.is-pending { opacity: 0.5; } .hv-cart-sum__cta.is-disabled { opacity: 0.35; pointer-events: none; } .hv-cart-sum__wish { display: flex; align-items: center; justify-content: center; } /* ---- 크로스셀 · Editor's picks ---- */ .hv-cart-xs { margin-top: 48px; } .hv-cart-xs__head { margin-bottom: 16px; } .hv-cart-xs__h2 { margin: 4px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; } .hv-cart-xs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .hv-cart-xs__add { margin-top: 8px; } @media (min-width: 768px) { .hv-cart-xs__head { margin-bottom: 24px; } .hv-cart-xs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } /* ---- 빈 가방 ---- */ .hv-cart-empty { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); } .hv-cart-empty__hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 20px 0; text-align: center; } .hv-cart-empty__hero .t-eyebrow { margin: 0; } .hv-cart-empty__title { margin: 0; font-size: clamp(24px, 3.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; white-space: pre-line; } .hv-cart-empty__body { margin: 0; font-size: 14px; line-height: 1.7; color: var(--h-ink-2); } .hv-cart-empty__ctas { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 10px; } .hv-cart-empty__link { font-size: 13px; color: var(--h-ink-2); text-decoration: underline; text-underline-offset: 3px; } .hv-cart-empty__link:hover { opacity: 0.7; } .hv-cart-empty__shelf { position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 420px; margin-top: 40px; text-align: left; } .hv-cart-empty__h3 { margin: 4px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .hv-cart-empty__shelf-body { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--h-ink-2); } .hv-cart-empty__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; } .hv-cart-empty__thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--h-bg-product); } .hv-cart-empty__thumb:hover { opacity: 0.9; } .hv-cart-empty__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---- 모바일 sticky CTA 바 (lg 미만) ---- */ .hv-cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; } .hv-cart-bar__panel { max-height: 0; overflow: hidden; opacity: 0; background: #ffffff; transition: max-height 320ms var(--h-ease), opacity 240ms var(--h-ease); } .hv-cart-bar__panel.is-open { max-height: 600px; opacity: 1; box-shadow: var(--h-shadow-float, 0 -8px 24px rgba(0, 0, 0, 0.08)); } .hv-cart-bar__ledger { display: flex; flex-direction: column; gap: 12px; padding: 16px; } .hv-cart-bar__row { display: flex; align-items: baseline; justify-content: space-between; } .hv-cart-bar__row-label { font-size: 13px; color: var(--h-ink-3); } .hv-cart-bar__row-val { font-size: 14px; font-weight: 500; color: var(--h-ink); font-variant-numeric: tabular-nums; } .hv-cart-bar__row-val.is-sale { color: var(--h-sale); } .hv-cart-bar__cod { margin: 0; color: var(--h-ink-3); } .hv-cart-bar__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 2px solid var(--h-ink); } .hv-cart-bar__total-label { font-size: 16px; font-weight: 800; } .hv-cart-bar__total-val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } .hv-cart-bar__zones { display: flex; flex-direction: column; border-top: 1px solid var(--h-line); background: #ffffff; box-shadow: var(--h-shadow-float, 0 -8px 24px rgba(0, 0, 0, 0.08)); } .hv-cart-bar__zones.is-open { box-shadow: none; } .hv-cart-bar__toggle { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 44px; padding: 9px 16px 3px; border: 0; background: #ffffff; cursor: pointer; } .hv-cart-bar__saved { font-size: 12px; letter-spacing: -0.01em; color: var(--h-ink-3); } .hv-cart-bar__saved-pre { font-weight: 700; color: var(--h-point); } .hv-cart-bar__saved-amt { font-weight: 700; color: var(--h-sale); font-variant-numeric: tabular-nums; } .hv-cart-bar__chev { display: inline-flex; color: var(--h-ink-3); transition: transform 220ms var(--h-ease); } .hv-cart-bar__chev.is-open { transform: rotate(180deg); } .hv-cart-bar__ctawrap { padding: 5px 14px calc(14px + env(safe-area-inset-bottom)); } .hv-cart-bar__cta { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 54px; border: 0; border-radius: var(--h-radius-btn); background: var(--h-ink); color: #ffffff; font-family: var(--font-kr); white-space: nowrap; cursor: pointer; } .hv-cart-bar__cta.is-disabled { opacity: 0.35; font-size: 14px; font-weight: 700; cursor: default; } .hv-cart-bar__cta-amt { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .hv-cart-bar__cta-label { opacity: 0.95; font-size: 14px; font-weight: 700; letter-spacing: -0.005em; } @media (min-width: 1024px) { .hv-cart-bar { display: none; } } /* ---- 쿠폰 변경 모달 ---- */ .hv-cart-cmodal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--h-dim-sheet); } .hv-cart-cmodal--m { align-items: flex-end; padding: 0; } .hv-cart-cmodal__panel { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 90vh; overflow: hidden; border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); } .hv-cart-cmodal--m .hv-cart-cmodal__panel { max-width: 100%; border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; } .hv-cart-cmodal--m .hv-cart-cmodal__panel.is-entered { transform: translateY(0); } .hv-cart-cmodal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--h-line); } .hv-cart-cmodal__head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; } .hv-cart-cmodal__body { flex: 1; padding: 4px 24px; overflow-y: auto; } .hv-cart-cmodal__line { padding: 16px 0; border-bottom: 1px solid var(--h-line); } .hv-cart-cmodal__line.is-last { border-bottom: 0; } .hv-cart-cmodal__pname { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; } .hv-cart-cmodal__pamt { margin: 4px 0 0; font-size: 13px; color: var(--h-ink-2); font-variant-numeric: tabular-nums; } .hv-cart-cmodal__pdisc, .hv-cart-cmodal__cdisc { color: var(--h-sale); } .hv-cart-cmodal__cart { padding: 16px 0; border-top: 1px solid var(--h-line); } .hv-cart-cmodal__ctitle { margin: 0; font-size: 14px; font-weight: 600; } .hv-cart-cmodal__cdisc { font-weight: 500; } .hv-cart-cmodal__foot { padding: 14px 24px 18px; border-top: 1px solid var(--h-line); } .hv-cart-cmodal__err { margin: 0 0 8px; font-size: 12px; color: var(--h-sale); } .hv-cart-cmodal__use { width: 100%; height: 52px; border: 0; border-radius: 8px; background: var(--h-ink); color: #ffffff; font-size: 15px; font-weight: 600; cursor: pointer; } .hv-cart-cmodal__use:disabled { opacity: 0.7; cursor: default; } /* 아코디언 쿠폰 선택기 */ .hv-cart-cacc { margin-top: 12px; overflow: hidden; border: 1px solid var(--h-line); border-radius: var(--h-radius-card); background: var(--h-bg); transition: border-color 160ms var(--h-ease); } .hv-cart-cacc.is-open { border-color: var(--h-ink); } .hv-cart-cacc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: var(--h-bg); text-align: left; cursor: pointer; } .hv-cart-cacc__head:disabled { cursor: default; } .hv-cart-cacc__label { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--h-ink); word-break: keep-all; overflow-wrap: anywhere; } .hv-cart-cacc__label.is-open { font-weight: 700; } .hv-cart-cacc__chev { flex-shrink: 0; margin-top: 2px; color: var(--h-ink-3); transition: transform 160ms var(--h-ease); } .hv-cart-cacc__chev.is-open { transform: rotate(180deg); } .hv-cart-cacc__body { display: flex; flex-direction: column; gap: 14px; padding: 14px; border-top: 1px solid var(--h-line); background: #f4f4f4; } .hv-cart-cacc__none { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border: 1px solid var(--h-line); border-radius: var(--h-radius-btn); background: var(--h-bg); color: var(--h-ink); font-size: 14px; font-weight: 500; cursor: pointer; } .hv-cart-cacc__none.is-active { border-color: var(--h-ink); font-weight: 700; } .hv-cart-cacc__none:disabled { cursor: default; } /* ============================================================================ C-3b 주문서 — 원본 app/(shop)/checkout/{page.tsx, _components/*, complete, fail} 의 Tailwind·인라인 값을 같은 값으로. 셸(모바일 심플 헤더·탭 바/푸터 숨김·하단 CTA 바)은 _havea-cart.css 의 .page[data-havea-cart] · .hv-cart-bar 를 공유한다. ============================================================================ */ .hv-co { background: var(--h-bg); color: var(--h-ink); } @media (max-width: 767px) { .hv-co, html:has(.hv-co), html:has(.hv-co) body { overflow-x: clip; max-width: 100%; } } /* 원본 h-container pb-20 pt-6 md:pb-[120px] md:pt-10 · lg 미만 채워진 주문서 pb 130(고정 CTA) */ .hv-co-wrap { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 24px var(--hv-inset) 80px; } @media (max-width: 1023px) { .hv-co--filled { padding-bottom: 130px; } } @media (min-width: 768px) { .hv-co-wrap { padding-top: 40px; padding-bottom: 120px; } } .hv-co-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; } @media (min-width: 768px) { .hv-co-head { margin-bottom: 40px; } } /* 모바일: 제목은 심플 헤더가 표기 — h1 시각 숨김 (카트와 동일) */ .hv-co-h1 { margin: 0; position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (min-width: 768px) { .hv-co-h1:not(.is-sr) { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: var(--h-fs-display-m); font-weight: var(--h-fw-sb); line-height: 1.05; letter-spacing: var(--h-track-tight); font-family: var(--font-en); } } .hv-co-pg { margin-bottom: 24px; padding: 16px; border: 1px solid var(--h-line); border-left: 3px solid var(--h-warn); border-radius: var(--h-radius-card, 12px); background: #ffffff; font-size: 14px; line-height: 1.6; } /* handoff CartCheckout.jsx:320 — 2-col grid 1fr 380, gap 32/48, items-start */ .hv-co-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 32px; } @media (min-width: 1024px) { .hv-co-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; } } .hv-co-col { display: flex; min-width: 0; flex-direction: column; gap: 44px; } .hv-co-form { display: flex; flex-direction: column; gap: 32px; } /* ---- 섹션 wrapper ---- */ .hv-co-block__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; padding-bottom: 2px; } .hv-co-block__title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } /* ---- 배송지 ---- */ .hv-co-addr { width: 100%; max-width: 100%; } .hv-co-addr__bar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 12px; } .hv-co-addr__change { height: 48px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--h-line-strong); background: var(--h-bg); font-size: 13px; font-weight: 600; color: var(--h-ink); cursor: pointer; } .hv-co-addr__card { border: 1px solid var(--h-line); border-radius: 8px; padding: 18px; } @media (min-width: 768px) { .hv-co-addr__card { padding: 22px; } } .hv-co-addr__grid { display: grid; grid-template-columns: auto 1fr; column-gap: 28px; row-gap: 12px; } .hv-co-addr__pair { display: contents; } .hv-co-addr__k { font-size: 14px; color: var(--h-ink-3); white-space: nowrap; } .hv-co-addr__v { font-size: 14px; color: var(--h-ink); letter-spacing: -0.01em; line-height: 1.5; } .hv-co-addr__empty { margin: 0; color: var(--h-ink-3); } /* 배송 요청사항 */ .hv-co-req { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .hv-co-req__select, .hv-co-req__input { width: 100%; height: 48px; padding: 0 14px; font-size: 14px; line-height: normal; background: #ffffff; border: 1px solid var(--h-line); border-radius: 4px; color: var(--h-ink-3); } .hv-co-req__select.is-set, .hv-co-req__input { color: var(--h-ink); } /* 개인통관고유부호 */ .hv-co-cid { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; } .hv-co-cid__head { display: flex; align-items: baseline; justify-content: space-between; } .hv-co-cid__label { font-size: 13px; font-weight: 600; } .hv-co-cid__portal { padding: 6px 0; color: var(--h-ink-2); text-decoration: underline; text-underline-offset: 3px; } .hv-co-cid__input { min-height: 48px; padding: 0 14px; font-size: 16px; border: 1px solid var(--h-line); border-radius: 8px; background: var(--h-bg); color: var(--h-ink); } .hv-co-cid__input.is-invalid { border-color: var(--h-sale); } .hv-co-cid__help { margin: 0; color: var(--h-ink-3); } .hv-co-cid__help.is-invalid { color: var(--h-sale); } /* ---- 주소록 모달 (PC 460/radius 20 · 모바일 풀스크린) ---- */ .hv-co-book { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--h-dim-sheet); } .hv-co-book.is-mobile { align-items: stretch; padding: 0; } .hv-co-book__panel { display: flex; width: 100%; max-width: 460px; max-height: 85vh; flex-direction: column; overflow: hidden; border-radius: 20px; background: #ffffff; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); } .hv-co-book.is-mobile .hv-co-book__panel { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; } .hv-co-book__head { position: relative; display: flex; height: 56px; flex-shrink: 0; align-items: center; justify-content: center; border-bottom: 1px solid var(--h-line); } .hv-co-book__title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .hv-co-book__close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0; } .hv-co-book__body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; } .hv-co-book__add { width: 100%; height: 54px; margin-bottom: 8px; border: 1px solid var(--h-line-strong); border-radius: 12px; background: var(--h-bg); font-size: 14px; font-weight: 600; color: var(--h-ink); cursor: pointer; } .hv-co-book__empty { margin: 16px 0 0; color: var(--h-ink-3); text-align: center; } .hv-co-book__item { display: flex; gap: 12px; align-items: flex-start; padding: 18px 0; cursor: pointer; } .hv-co-book__txt { flex: 1; min-width: 0; } .hv-co-book__namerow { display: flex; align-items: center; gap: 8px; } .hv-co-book__name { font-size: 15px; font-weight: 700; } .hv-co-book__badge { padding: 3px 8px; border-radius: 6px; background: var(--h-surface); font-size: 11px; font-weight: 600; color: var(--h-ink-2); } .hv-co-book__addr { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--h-ink-2); } .hv-co-book__tel { margin: 2px 0 0; font-size: 14px; color: var(--h-ink-2); font-variant-numeric: tabular-nums; } .hv-co-book__check { display: inline-flex; flex-shrink: 0; margin-top: 2px; color: var(--h-ink); } .hv-co-book__sep { height: 1px; background: var(--h-line); } /* ---- 새 주소 모달 (원본 AddressModal — 토스 플로우) ---- */ .hv-co-am { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--h-dim-sheet); } .hv-co-am.is-mobile { align-items: flex-end; padding: 0; } .hv-co-am__panel { display: flex; width: 100%; max-width: 480px; max-height: 88vh; flex-direction: column; border-radius: 20px; background: var(--h-bg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); } .hv-co-am.is-mobile .hv-co-am__panel { max-width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; } .hv-co-am__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px 8px; } .hv-co-am.is-mobile .hv-co-am__head { padding: 18px 20px 8px; } .hv-co-am__title { margin: 0; flex: 1; text-align: center; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .hv-co-am__body { display: flex; flex-direction: column; gap: 22px; padding: 12px 28px 20px; overflow-y: auto; } .hv-co-am.is-mobile .hv-co-am__body { gap: 18px; padding: 12px 20px 16px; } .hv-co-am__label { font-size: 13px; font-weight: 700; color: var(--h-ink); letter-spacing: -0.01em; } .hv-co-uf { display: flex; flex-direction: column; gap: 6px; } .hv-co-uf__input { height: 38px; padding: 0 0 6px; border: none; border-bottom: 1px solid var(--h-line-strong); background: transparent; outline: none; font-size: 16px; color: var(--h-ink); font-family: var(--font-stack); border-radius: 0; } .hv-co-uf__input.is-en { font-family: var(--font-en); } .hv-co-uf__input.is-mono { font-variant-numeric: tabular-nums; } .hv-co-uf__input:disabled { opacity: 0.6; } .hv-co-am__search { display: flex; width: 100%; height: 48px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--h-line-strong); border-radius: var(--h-radius-btn); background: var(--h-bg); font-size: 14px; font-weight: 600; color: var(--h-ink); cursor: pointer; } .hv-co-am__search:disabled { opacity: 0.6; cursor: default; } .hv-co-am__picked { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--h-radius-card); background: var(--h-surface); } .hv-co-am__picked-txt { min-width: 0; } .hv-co-am__zip { margin: 0; font-size: 12px; color: var(--h-ink-3); font-family: var(--font-en); font-variant-numeric: tabular-nums; } .hv-co-am__addr { margin: 2px 0 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--h-ink); } .hv-co-am__changebtn { min-height: 48px; min-width: 48px; flex-shrink: 0; padding: 0 12px; margin-right: -12px; border: none; background: transparent; font-size: 13px; font-weight: 600; color: var(--h-ink-2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .hv-co-am__default { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--h-ink-2); cursor: pointer; } .hv-co-am__foot { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 16px 28px 24px; } .hv-co-am.is-mobile .hv-co-am__foot { padding: 14px 20px 18px; } .hv-co-am__err { grid-column: 1 / -1; font-size: 12px; color: var(--h-point); } /* Daum 우편번호 embed 모달 */ .hv-co-pc { position: fixed; inset: 0; z-index: 10002; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); } .hv-co-pc__panel { display: flex; width: min(560px, 92vw); height: min(600px, 90vh); flex-direction: column; background: #ffffff; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.4); } .hv-co-pc__bar { display: flex; height: 48px; flex-shrink: 0; align-items: center; justify-content: flex-end; border-bottom: 1px solid var(--h-line); } .hv-co-pc__embed { width: 100%; flex: 1; min-height: 0; } .hv-co-pc__err { margin: 4px 0 0; font-size: 12px; color: var(--h-warn); } .hv-co-pc__trigger { height: 36px; padding: 0 12px; border: 1px solid var(--h-line); background: #ffffff; font-size: 12px; text-transform: uppercase; white-space: nowrap; } /* ---- 주문 상품 (handoff CartCheckout.jsx:336-352 — 72px 1fr grid, gap 12, padding 14/0) ---- */ .hv-co-items { margin: 0; padding: 0; list-style: none; } .hv-co-item { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--h-line); } .hv-co-item.is-last { border-bottom: none; } .hv-co-item__thumb { position: relative; aspect-ratio: 4 / 5; background: var(--h-bg-product, var(--h-surface)); overflow: hidden; } .hv-co-item__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-co-item__meta { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .hv-co-item__brand, .hv-co-item__name, .hv-co-item__opt { margin: 0; } .hv-co-item__name { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hv-co-item__price { margin-top: 4px; } /* compact 가격 블록 (PDP_PRICE_AND_IMAGE_SPEC — 취소선 13/14 · 할인율+할인가 16/18 · 토글 13 ink-3) */ .hv-co-price__strike { margin: 0; font-size: 13px; color: var(--h-ink-3); font-variant-numeric: tabular-nums; } .hv-co-price__strike span { text-decoration: line-through; text-decoration-color: var(--h-ink-3); } .hv-co-price__main { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .hv-co-price__main.has-discount { margin-top: 4px; } @media (min-width: 768px) { .hv-co-price__strike { font-size: 14px; } .hv-co-price__main { font-size: 18px; } } .hv-co-price__pct { color: var(--h-sale-pct, var(--h-sale)); } .hv-co-price__toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border: 0; background: transparent; font-size: 13px; color: var(--h-ink-3); font-family: var(--font-kr); letter-spacing: -0.005em; cursor: pointer; font-variant-numeric: tabular-nums; } .hv-co-price__toggle-amt { font-weight: 600; color: var(--h-ink); } .hv-co-price__chev { display: inline-flex; align-items: center; justify-content: center; color: var(--h-ink-2); transition: transform 220ms var(--h-ease); } .hv-co-price__chev.is-open { transform: rotate(180deg); } .hv-co-price__bd { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height 280ms var(--h-ease), opacity 220ms var(--h-ease), margin 220ms var(--h-ease); } .hv-co-price__bd.is-open { max-height: 240px; opacity: 1; margin-top: 12px; } .hv-co-price__bd-in { display: grid; gap: 10px; padding: 4px 2px 2px; font-size: 13px; color: var(--h-ink); font-variant-numeric: tabular-nums; } .hv-co-price__sum { display: flex; justify-content: space-between; font-weight: 600; } .hv-co-price__row { display: flex; justify-content: space-between; padding-left: 8px; color: var(--h-ink-2); } .hv-co-price__row-amt { color: var(--h-ink); } /* ---- 쿠폰 · 적립금 ---- */ .hv-co-disc { display: grid; gap: 12px; } .hv-co-disc__row { display: flex; align-items: center; gap: 8px; min-width: 0; } .hv-co-disc__k { min-width: 80px; flex-shrink: 0; font-size: 13px; color: var(--h-ink-2); } .hv-co-disc__coupon { font-size: 13px; } .hv-co-disc__coupon.is-on { color: var(--h-sale); } .hv-co-disc__coupon.is-off { color: var(--h-ink-3); } .hv-co-disc__pt { display: flex; flex: 1; min-width: 0; gap: 6px; } .hv-co-disc__input { height: 48px; flex: 1; min-width: 0; padding: 0 12px; border: 1px solid var(--h-line); background: #ffffff; font-family: var(--font-kr); font-size: 14px; font-variant-numeric: tabular-nums; } .hv-co-disc__input:disabled { opacity: 0.5; } .hv-co-disc__max { flex-shrink: 0; } .hv-co-disc__max:disabled { opacity: 0.5; } .hv-co-disc__hint { margin: 0; } .hv-co-disc__bal { font-weight: 700; color: var(--h-ink); } /* ---- 결제수단 (토스 위젯 문법 — 전부 같은 크기 2열) ---- */ .hv-co-pay { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .hv-co-pay__chip { display: flex; min-height: 52px; align-items: center; justify-content: center; padding: 14px 12px; border-radius: 8px; border: 1px solid var(--h-line); background: var(--h-bg); font-size: 15px; font-weight: 500; color: var(--h-ink-2); cursor: pointer; transition: border-color 160ms var(--h-ease), box-shadow 160ms var(--h-ease), color 160ms var(--h-ease); } .hv-co-pay__chip.is-on { border-color: var(--h-ink); box-shadow: inset 0 0 0 1px var(--h-ink); color: var(--h-ink); font-weight: 600; } .hv-co-pay__escrow { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--h-ink-3); } .hv-co-pay__hint { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--h-surface); } .hv-co-pay__hint-text { font-size: 12px; color: var(--h-ink-2); } .hv-co-pay__none { padding: 16px; background: var(--h-surface); font-size: 13px; color: var(--h-ink-2); } /* ---- 약관 (handoff CartCheckout.jsx:405-414) ---- */ .hv-co-terms { display: grid; gap: 8px; font-size: 13px; } .hv-co-terms__all { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px; border: 1px solid var(--h-line); cursor: pointer; } .hv-co-terms__all strong { font-weight: 700; } .hv-co-terms__row { display: flex; align-items: center; gap: 8px; } .hv-co-terms__label { display: flex; flex: 1; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; color: var(--h-ink-2); cursor: pointer; } .hv-co-terms__cb { position: static; display: inline-block; width: 18px; height: 18px; margin: 0; opacity: 1; appearance: auto; -webkit-appearance: checkbox; accent-color: var(--h-ink); } .hv-co-terms__view { display: inline-flex; min-height: 48px; flex-shrink: 0; align-items: center; font-size: 12px; color: var(--h-ink-3); text-decoration: underline; text-underline-offset: 2px; } .hv-co-terms__refund { margin: 0; padding: 2px 10px 0; font-size: 12px; color: var(--h-ink-3); } .hv-co-terms__refund a { text-decoration: underline; text-underline-offset: 2px; } /* ---- PC aside (handoff CartCheckout.jsx:419-436 — surface 소면 장부, sticky 96) ---- */ .hv-co-aside { display: none; } @media (min-width: 1024px) { .hv-co-aside { position: sticky; top: 96px; display: flex; align-self: start; flex-direction: column; gap: 12px; } } .hv-co-sum { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--h-surface); } .hv-co-sum__eyebrow { margin: 0; } .hv-co-sum__row { display: flex; align-items: baseline; justify-content: space-between; } .hv-co-sum__k { font-size: 13px; color: var(--h-ink-2); } .hv-co-sum__k.is-big { font-size: 16px; font-weight: 600; color: var(--h-ink); } .hv-co-sum__v { font-size: 14px; font-weight: 500; color: var(--h-ink); font-variant-numeric: tabular-nums; } .hv-co-sum__v.is-accent { color: var(--h-sale); } .hv-co-sum__v.is-big { font-size: 22px; font-weight: 700; } .hv-co-sum__total { border-top: 2px solid var(--h-ink); padding-top: 12px; } .hv-co-sum__cod { margin: 0; color: var(--h-ink-3); } .hv-co-sum__bal { display: flex; align-items: baseline; justify-content: space-between; margin: -4px 0 0; } .hv-co-sum__bal-v { font-variant-numeric: tabular-nums; } .hv-co-sum__ssl { margin: 0; text-align: center; } .hv-co-sum__pg { margin: 0; padding: 12px; background: var(--h-surface); } .hv-co-sum__cta:disabled { opacity: 0.5; cursor: not-allowed; } /* 모바일 sticky 바 — 카트 바 공유 + 주문서 장부(결제금액 상단 → hr → 행) */ .hv-co-bar__total { border-top: 0; padding-top: 0; margin-top: 0; } .hv-co-bar__hr { height: 1px; background: var(--h-line); } @media (min-width: 1024px) { .hv-co-bar { display: none; } } .hv-co-bar .hv-cart-bar__toggle { min-height: 0; } /* 폼 메시지 (연한 색면 + 진한 글자) */ .hv-form-msg { padding: 12px; border-radius: var(--h-radius-card, 12px); font-size: 12px; line-height: 1.55; word-break: keep-all; } .hv-form-msg--error { background: color-mix(in srgb, var(--h-warn) 7%, transparent); color: var(--h-warn); } .hv-form-msg--neutral { background: var(--h-surface); color: var(--h-ink-2); } /* ---- 게스트 게이트 ---- */ .hv-co-guest { width: 100%; max-width: 672px; margin: 0 auto; } .hv-co-guest__h1 { margin-bottom: 24px; } .hv-co-guest__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--h-ink); } .hv-co-guest__total-k { color: var(--h-ink-2); } .hv-co-guest__total-v { font-size: 20px; font-variant-numeric: tabular-nums; } .hv-co-guest__card { margin-top: 20px; padding: 28px 24px; border-radius: 20px; background: var(--h-surface); text-align: center; } .hv-co-guest__title { margin: 0; font-size: 18px; font-weight: 700; } .hv-co-guest__body { margin: 8px 0 0; color: var(--h-ink-2); } .hv-co-guest__ctas { display: flex; justify-content: center; gap: 8px; margin-top: 18px; } .hv-co-guest__hint { margin: 10px 0 0; color: var(--h-ink-3); } /* ---- 결제 완료 (영수증 + 확정 도장) ---- */ .hv-co-done { background: var(--h-bg); color: var(--h-ink); } .hv-co-done__wrap { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 32px var(--hv-inset) 80px; } @media (min-width: 768px) { .hv-co-done__wrap { padding-top: 56px; padding-bottom: 120px; } } .hv-co-done__card { max-width: 560px; margin: 28px auto 0; } .hv-co-receipt { padding: 24px 20px 18px; border-radius: 8px 8px 0 0; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); text-align: left; } .hv-co-receipt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .hv-co-receipt__eyebrow { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--h-ink-3); font-family: var(--font-en); } .hv-co-receipt__no { text-transform: none; font-variant-numeric: tabular-nums; } .hv-co-receipt__h1 { margin: 8px 0 0; font-size: 20px; font-weight: 800; } .hv-co-receipt__hint { margin: 4px 0 0; font-size: 12px; color: var(--h-ink-3); } .hv-co-receipt__stamp { display: inline-flex; flex-shrink: 0; } .hv-co-receipt__stamp-txt { font-weight: 800; font-size: 14px; letter-spacing: 0.08em; } @keyframes hStampIn { 0% { transform: scale(1.7) rotate(-9deg); opacity: 0; } 60% { transform: scale(0.94) rotate(-9deg); opacity: 1; } 100% { transform: scale(1) rotate(-9deg); opacity: 1; } } .h-stamp-in { animation: hStampIn 420ms cubic-bezier(0.2, 1.4, 0.4, 1) 180ms both; } @media (prefers-reduced-motion: reduce) { .h-stamp-in { animation: none; transform: rotate(-9deg); } } .hv-co-receipt__ledger { margin-top: 16px; border-top: 2px solid var(--h-ink); } .hv-co-receipt__list { margin: 0; padding: 0; list-style: none; } .hv-co-receipt__li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13px; } .hv-co-receipt__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-co-receipt__qty { color: var(--h-ink-3); } .hv-co-receipt__amt { font-weight: 600; font-variant-numeric: tabular-nums; } .hv-co-receipt__disc { color: var(--h-sale); } .hv-co-receipt__amt.is-disc { font-weight: 700; } .hv-co-receipt__paid { display: flex; align-items: baseline; justify-content: space-between; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--h-line); } .hv-co-receipt__paid-k { font-size: 13px; font-weight: 700; } .hv-co-receipt__paid-v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .hv-co-receipt__orderno { margin: 16px 0 0; font-size: 13px; color: var(--h-ink-2); } .hv-co-receipt__edge { height: 10px; background: linear-gradient(-45deg, #ffffff 5px, transparent 0), linear-gradient(45deg, #ffffff 5px, transparent 0); background-size: 10px 10px; background-repeat: repeat-x; } .hv-co-done__ctas { display: grid; gap: 8px; margin-top: 24px; } /* ---- 결제 미완료 ---- */ .hv-co-fail { max-width: 672px; min-height: 60vh; margin: 0 auto; padding: 80px 24px; } .hv-co-fail__center { text-align: center; } .hv-co-fail__icon { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; margin-bottom: 32px; border: 1.5px solid var(--h-sale); border-radius: 999px; font-size: 30px; color: var(--h-sale); } .hv-co-fail__h1 { margin: 0; font-size: var(--h-fs-display-m); font-weight: var(--h-fw-sb); letter-spacing: var(--h-track-tight); line-height: 1.1; } .hv-co-fail__msg { margin: 16px 0 0; font-size: 14px; color: var(--h-ink-2); } .hv-co-fail__card { margin-top: 40px; padding: 16px; border: 1px solid var(--h-line); border-radius: var(--h-radius-card, 12px); background: #ffffff; } .hv-co-fail__card--next { margin-top: 12px; } .hv-co-fail__card-t { margin: 0; font-size: 14px; font-weight: 600; } .hv-co-fail__card-h { margin: 4px 0 0; font-size: 12px; color: var(--h-ink-2); } .hv-co-fail__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; } .hv-co-fail__btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 24px; border-radius: var(--h-radius-btn); font-size: 14px; font-weight: 600; text-transform: uppercase; } .hv-co-fail__btn.is-primary { background: var(--h-ink); color: var(--h-bg); } .hv-co-fail__btn.is-secondary { border: 1px solid var(--h-line-strong); } .hv-co-fail__btn.is-ghost { text-underline-offset: 4px; } .hv-co-fail__btn.is-ghost:hover { text-decoration: underline; } .hv-co-fail__support { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--h-line); text-align: center; } .hv-co-fail__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 8px; font-size: 12px; } .hv-co-fail__links a { text-decoration: underline; text-underline-offset: 4px; } .hv-oc { background: var(--h-bg); color: var(--h-ink); width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 24px var(--hv-inset) 80px; } .hv-oc__wrap { width: 100%; max-width: 672px; margin: 0 auto; } .hv-oc__center { text-align: center; } .hv-oc__eyebrow { margin: 0; font-family: var(--font-en); font-size: var(--h-fs-caption); line-height: normal; font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wider); text-transform: uppercase; color: var(--h-ink); } .hv-oc__title { margin: 12px 0 0; font-size: var(--h-fs-display-m); font-weight: var(--h-fw-sb); line-height: 1.05; letter-spacing: var(--h-track-tight); } .hv-oc__card { margin-top: 32px; background: var(--h-surface); border-radius: var(--h-radius-card); padding: 24px; text-align: left; } .hv-oc__dl { margin: 0; } .hv-oc__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hv-oc__dt { margin: 0; font-family: var(--font-en); font-size: var(--h-fs-caption); line-height: normal; font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wider); text-transform: uppercase; color: var(--h-ink); } .hv-oc__dd { margin: 0; font-size: var(--h-fs-body); line-height: normal; font-variant-numeric: tabular-nums; } .hv-oc__notice { margin: 24px 0 0; font-size: var(--h-fs-caption); line-height: 1.6; color: var(--h-ink-3); } .hv-oc__ctas { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; } @media (min-width: 640px) { .hv-oc__ctas { flex-direction: row; justify-content: center; } } @media (min-width: 768px) { .hv-oc { padding: 40px var(--hv-inset) 120px; } } /* ------------------------------------------------------------------ * HAVEA 회원가입(C-3c) — 원본 signup/_components/SignupClient.tsx 의 인라인 스타일·\3c style> 을 CSS 로 풀어 이식. * + 소셜 간편가입 완료(/signup/social) · 아이디/비밀번호 찾기(/login/find-*) · 웰컴(/welcome · /welcome/taste) · 발견 덱 카드(HaveaDeck). * 값은 원본 리터럴 그대로(다크 글래스 지면 고유값), 토큰이 있는 곳은 style.css 토큰 참조. 경계 md = 768px. * ------------------------------------------------------------------ */ /* ---- /signup 풀스크린 셸 (signup/page.tsx main) — Aurora 셸은 Layout 이 HAVEA_LOGIN_PATHS 로 숨긴다 ---- */ .hv-su { position: relative; min-height: 100vh; min-height: 100dvh; background: #000000; color: #ffffff; overflow: hidden; display: flex; flex-direction: column; } :where(.hv-su) a { color: inherit; text-decoration: none; } :where(.hv-su) button { font: inherit; appearance: none; -webkit-appearance: none; } .hv-su__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; min-height: 100vh; } /* Top chrome — BACK + havea (prototype SignupShell) */ .hv-su__chrome { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(20px, 4vw, 40px) clamp(24px, 5vw, 80px) 0; } .hv-su__back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; cursor: pointer; color: rgba(255, 255, 255, 0.7); font-family: var(--font-en); font-size: 12px; letter-spacing: 0.08em; min-height: 48px; padding: 0 4px 0 0; } .hv-su__logo { color: #ffffff; display: inline-flex; } .hv-su__logo-img { display: block; height: clamp(20px, 2.4vw, 26px); width: auto; filter: brightness(0) invert(1); } .hv-su__center { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(28px, 4vw, 40px) clamp(24px, 5vw, 80px) calc(40px + env(safe-area-inset-bottom, 0px)); } .hv-su__form { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 20px; } .hv-su__head { display: flex; flex-direction: column; gap: 10px; } .hv-su__eyebrow { margin: 0; font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: var(--h-track-wider); color: rgba(255, 255, 255, 0.55); } .hv-su__h1 { margin: 0; font-size: clamp(26px, 3vw, 32px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: #ffffff; } /* 다크 글래스 (prototype signupGlass) */ .hv-su__error, .hv-su__summary, .hv-su__agree, .hv-su__input { background: rgba(15, 15, 18, 0.42); border: 1px solid rgba(255, 255, 255, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hv-su__error { margin: 0; padding: 12px; border-radius: var(--h-radius-card); border-color: rgba(255, 122, 107, 0.5); color: #ff7a6b; font-size: 13px; } /* 순차 스택 — DOM 순서=시퀀스, 시각 순서는 flex order(슬롯 inline) */ .hv-su__stack { display: flex; flex-direction: column; gap: 16px; } .hv-su__slot[hidden] { display: none; } .hv-su__field { display: flex; flex-direction: column; gap: 8px; } .hv-su__field-head { display: flex; justify-content: space-between; align-items: baseline; } .hv-su__label { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: var(--h-track-wider); text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } .hv-su__hint { font-size: 12px; color: rgba(255, 255, 255, 0.45); } .hv-su__input { height: 52px; width: 100%; border-radius: var(--h-radius-input); color: #ffffff; padding: 0 16px; box-sizing: border-box; font-family: var(--font-kr); font-size: 16px; /* iOS 줌 방지 */ outline: none; } .hv-su__input::placeholder { color: rgba(255, 255, 255, 0.4); } .hv-su__ferr { font-size: 12px; color: #ff7a6b; } .hv-su__idmsg { margin: 4px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.5); } .hv-su__idmsg--ok { color: #5bcb8a; } /* 비번 강도 3-도트 */ .hv-su__dots-wrap { margin-top: 4px; } .hv-su__dots { display: flex; gap: 3px; } .hv-su__dot { height: 3px; flex: 1; border-radius: 2px; background: rgba(255, 255, 255, 0.2); } .hv-su__dot.is-on.hv-su__dot--ok { background: #5bcb8a; } .hv-su__dot.is-on.hv-su__dot--mid { background: var(--h-ink-3); } .hv-su__dot.is-on.hv-su__dot--weak { background: #ff7a6b; } .hv-su__dots-label { margin: 4px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.5); } /* 요약행 (답한 필드) */ .hv-su__summary { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-radius: var(--h-radius-card); cursor: pointer; text-align: left; color: #ffffff; } .hv-su__summary:hover { border-color: rgba(255, 255, 255, 0.5); } .hv-su__summary-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .hv-su__summary-label { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); flex-shrink: 0; } .hv-su__summary-value { font-size: 14px; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-su__summary-edit { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.6); flex-shrink: 0; } .hv-su__check { color: #5bcb8a; } /* 진행률 + CTA */ .hv-su__cta-wrap { display: flex; flex-direction: column; gap: 12px; } .hv-su__progress { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; } .hv-su__progress-fill { display: block; height: 100%; background: #ffffff; transition: width 0.3s ease; } .hv-su__cta { height: 56px; width: 100%; border-radius: var(--h-radius-btn); background: #ffffff; color: #0a0a0a; border: 1px solid #ffffff; font-family: var(--font-kr); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } .hv-su__cta:hover:not(:disabled) { opacity: 0.9; } .hv-su__cta:disabled { opacity: 0.4; cursor: not-allowed; } .hv-su__cta--submit { margin-top: 4px; } /* SNS 행 (3열 그리드 — Apple 미노출이어도 원본 그대로 3열) */ .hv-su__divider { display: flex; align-items: center; gap: 10px; margin: 2px 0; } .hv-su__line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.18); } .hv-su__or { font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); color: rgba(255, 255, 255, 0.5); } .hv-su__sns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .hv-su__sns-btn { height: 48px; padding: 0 24px; border-radius: var(--h-radius-btn); border: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: var(--h-fs-btn); font-weight: var(--h-fw-m); line-height: 16px; letter-spacing: var(--h-track-wide); text-transform: uppercase; cursor: pointer; } .hv-su__sns-btn:hover { opacity: 0.9; } .hv-su__sns-btn--kakao { background: #fee500; color: #191919; } .hv-su__sns-btn--naver { background: #03c75a; color: #ffffff; } .hv-su__sns-btn--apple { background: #000000; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); } .hv-su__login { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.6); } .hv-su__login-link { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; } /* 마지막 약관 바텀시트 */ .hv-su__sheet-backdrop { position: fixed; inset: 0; z-index: 60; border: 0; padding: 0; cursor: pointer; background: rgba(0, 0, 0, 0.6); animation: hvSuFade 0.2s ease; } .hv-su__sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; display: flex; justify-content: center; animation: hvSuSheetIn 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .hv-su__sheet-panel { width: 100%; max-width: 460px; background: rgba(18, 18, 22, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px 20px 0 0; padding: 12px clamp(20px, 5vw, 28px) calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; } .hv-su__grip { width: 40px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.3); margin: 0 auto 4px; } .hv-su__sheet-title { margin: 4px 0 4px; font-size: 18px; font-weight: 700; color: #ffffff; } .hv-su__agree-list { display: flex; flex-direction: column; gap: 12px; } .hv-su__agree { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 52px; padding: 0 16px; border-radius: var(--h-radius-card); cursor: pointer; } .hv-su__agree--strong { height: 56px; border-color: rgba(255, 255, 255, 0.5); } .hv-su__agree-main { display: flex; align-items: center; gap: 10px; } .hv-su__agree-cb { width: 16px; height: 16px; margin: 0; accent-color: #ffffff; appearance: auto; -webkit-appearance: auto; } .hv-su__agree-label { font-size: 14px; color: rgba(255, 255, 255, 0.9); } .hv-su__agree--strong .hv-su__agree-label { color: #ffffff; font-weight: 600; } .hv-su__agree-link { font-size: 12px; color: rgba(255, 255, 255, 0.55); text-decoration: underline; text-underline-offset: 4px; } .hv-su__foot { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.4); line-height: 1.6; } @keyframes hvSuSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes hvSuFade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hv-su__sheet, .hv-su__sheet-backdrop { animation: none; } .hv-su__progress-fill { transition: none; } } /* ---- /welcome (welcome/page.tsx) — HAVEA 사이트 셸 안 검정 캔버스 ---- */ .hv-wel { position: relative; min-height: 100vh; background: #000000; color: #ffffff; overflow: hidden; display: flex; align-items: center; justify-content: center; } :where(.hv-wel) a { color: inherit; text-decoration: none; } /* 완료 배경 셸 알파 (SignupBgShell) — 로그인 셸과 스크림 하단·그레인만 다르다 */ .hv-backdrop--silk .hv-backdrop__scrim { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.06) 28%, rgba(0, 0, 0, 0.16) 50%, rgba(0, 0, 0, 0.62) 76%, rgba(0, 0, 0, 0.94) 100% ); } .hv-backdrop--silk .hv-backdrop__grain--a { opacity: 0.13; } .hv-backdrop--silk .hv-backdrop__grain--b { opacity: 0.09; } .hv-wel__col { position: relative; z-index: 1; width: 100%; max-width: 460px; display: flex; flex-direction: column; margin: clamp(72px, 10vw, 120px) clamp(20px, 5vw, 24px) calc(clamp(72px, 10vw, 120px) + env(safe-area-inset-bottom, 0px)); gap: clamp(24px, 3vw, 32px); } .hv-wel__eyebrow { display: flex; align-items: center; gap: 10px; } .hv-wel__check { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #ffffff; color: #0a0a0a; font-family: var(--font-en); font-size: 12px; font-weight: 700; } .hv-wel__eyebrow-text { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: var(--h-track-wider); color: rgba(255, 255, 255, 0.8); } .hv-wel__head { display: flex; flex-direction: column; gap: 12px; } .hv-wel__h1 { margin: 0; font-size: clamp(32px, 4vw, 56px); font-family: var(--font-en); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: #ffffff; } .hv-wel__lede { margin: 0; font-size: clamp(14px, 1.4vw, 16px); line-height: 1.65; color: rgba(255, 255, 255, 0.7); } .hv-wel__benefits { margin: 0; padding: 0; list-style: none; display: grid; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; overflow: hidden; } .hv-wel__benefit { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px); background: rgba(15, 15, 18, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid rgba(255, 255, 255, 0.12); } .hv-wel__benefit:first-child { border-top: none; } .hv-wel__benefit-main { display: flex; flex-direction: column; gap: 2px; } .hv-wel__benefit-en { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #ffffff; } .hv-wel__benefit-kr { font-size: clamp(14px, 1.4vw, 15px); color: #ffffff; } .hv-wel__benefit-sub { font-size: 12px; color: rgba(255, 255, 255, 0.6); } /* CTA — 로그인 글래스 스타일 (handoff §5-5) */ .hv-wel__ctas { display: flex; flex-direction: column; gap: 10px; } .hv-wel__cta { width: 100%; height: 56px; border-radius: 13px; background: rgba(15, 15, 18, 0.42); color: #ffffff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--font-kr); font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background 180ms var(--h-ease), color 180ms var(--h-ease), border-color 180ms var(--h-ease); } .hv-wel__cta--browse { border: 1px solid rgba(255, 255, 255, 0.5); font-weight: 700; } .hv-wel__cta--my { border: 1px solid rgba(255, 255, 255, 0.42); font-weight: 600; } .hv-wel__cta:hover { background: #ffffff; color: #0a0a0a; border-color: #ffffff; } .hv-wel__footnote { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.6; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 16px; } /* ---- /welcome/taste (WelcomeTasteDeck.tsx — 시안 #16 화이트 카드) ---- */ .hv-taste { min-height: 100dvh; background: var(--h-bg); display: flex; align-items: flex-start; justify-content: center; } .hv-taste__card { width: 100%; max-width: 480px; margin: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: #ffffff; border-radius: 24px; padding: 28px 24px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; } .hv-taste__title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; white-space: pre-line; } .hv-taste__sub { margin: 10px 0 0; font-size: 14px; color: var(--h-ink-2); } .hv-taste__stack { position: relative; margin: 28px auto 0; width: 100%; max-width: 340px; aspect-ratio: 4 / 5; isolation: isolate; } .hv-taste__dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; } .hv-taste__dot { width: 4px; height: 4px; border-radius: 2px; background: var(--h-ink-3); transition: width 200ms var(--h-ease), background 200ms var(--h-ease); } .hv-taste__dot.is-active { width: 24px; background: var(--h-ink); } .hv-taste__progress { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: 14px; color: var(--h-ink-2); } .hv-taste__count { font-variant-numeric: tabular-nums; } .hv-taste__skip { display: inline-flex; min-height: 48px; align-items: center; text-decoration: underline; text-underline-offset: 4px; color: var(--h-ink-2); background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer; } /* ---- 발견 덱 카드 (GuestWishView.DeckCard) — 웰컴 온보딩·발견 덱·저장 탭 공용 ---- */ .hv-deck-card { position: absolute; inset: 0; touch-action: pan-y; background: var(--h-bg); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); } .hv-deck-card--overlay { border-radius: 24px; } .hv-deck-card.is-front { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08); } .hv-deck-card--story.is-front { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08); } .hv-deck-card__zone { position: relative; display: block; width: 100%; flex: 1; min-height: 0; background: var(--h-bg-product); } .hv-deck-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hv-deck-card__cap { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); padding: 0 18px 18px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; } .hv-deck-card--story .hv-deck-card__cap { inset: 0; height: auto; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.78) 100%); padding: 0 70px 22px 22px; } .hv-deck-card__brand, .hv-deck-card__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-deck-card__brand { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); } .hv-deck-card--story .hv-deck-card__brand { letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.72); } .hv-deck-card__name { margin-top: 2px; font-size: 16px; font-weight: 600; color: #ffffff; } .hv-deck-card--story .hv-deck-card__name { margin-top: 6px; font-family: var(--font-kr); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; } .hv-deck-card__price { display: block; margin-top: 3px; font-size: 15px; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; } .hv-deck-card--story .hv-deck-card__price { margin-top: 6px; font-size: 16px; } .hv-deck-card__arrow { position: absolute; right: 22px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #ffffff; font-size: 14px; pointer-events: none; } .hv-deck-card__plate { display: block; padding: 12px 14px 14px; flex-shrink: 0; color: inherit; text-decoration: none; } .hv-deck-card__plate-name { margin: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv-deck-card__plate-price { margin: 3px 0 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } /* 결정 스크림 + 도장 (SwipeDecisionScrim · SwipeStampChip) — 색은 전부 리터럴 */ .hv-swipe-scrim { position: absolute; inset: 0; z-index: 40; pointer-events: none; display: flex; align-items: flex-start; justify-content: flex-start; padding: 22px; transition: opacity 60ms linear; } .hv-swipe-scrim--save { background: rgba(255, 255, 255, 0.92); } .hv-swipe-scrim--pass { background: rgba(22, 21, 19, 0.88); } .hv-swipe-scrim--top-right { justify-content: flex-end; } .hv-swipe-scrim--bottom-center { align-items: flex-end; justify-content: center; } .hv-swipe-scrim__tag { display: inline-block; transform: rotate(-12deg); transform-origin: top left; } .hv-swipe-scrim--top-right .hv-swipe-scrim__tag { transform: rotate(12deg); transform-origin: top right; } .hv-swipe-scrim--bottom-center .hv-swipe-scrim__tag { transform: rotate(-6deg); transform-origin: bottom center; } .hv-stamp-chip { display: inline-block; padding: 9px 16px; border-radius: 4px; font-family: var(--font-en); font-size: 22px; font-weight: 800; letter-spacing: var(--h-track-wider); line-height: 1; text-transform: uppercase; white-space: nowrap; } .hv-stamp-chip--save { background: var(--h-stamp-positive); color: #ffffff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } .hv-stamp-chip--pass.hv-stamp-chip--dark { background: rgba(0, 0, 0, 0.18); color: rgba(255, 255, 255, 0.92); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92); } .hv-stamp-chip--pass.hv-stamp-chip--light { background: rgba(255, 255, 255, 0.82); color: var(--h-ink-2); box-shadow: inset 0 0 0 2px var(--h-ink-2); } /* ---- /login/find-id · /login/find-password (find-id/page.tsx + _FindIdForm.tsx · find-password) — 라이트 지면, h-container 440 ---- */ .hv-find { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 32px var(--hv-inset) 96px; background: var(--h-bg); color: var(--h-ink); } .hv-find__col { width: 100%; max-width: 440px; margin: 0 auto; } .hv-find__title { margin: 0 0 32px; font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -0.02em; } .hv-find__stack > :not([hidden]) ~ :not([hidden]) { margin-top: 20px; /* space-y-5 */ } .hv-find__lead { margin: 0; font-size: var(--h-fs-body-sm); color: #4b5563; } .hv-find__alert, .hv-find__sent { margin: 0; border-radius: var(--h-radius-input); border: 1px solid var(--h-line); background: rgba(244, 244, 244, 0.3); } .hv-find__alert { padding: 12px; font-size: var(--h-fs-caption); color: #dc2626; } .hv-find__sent { padding: 16px; font-size: var(--h-fs-body); color: #374151; } .hv-find__field > :not([hidden]) ~ :not([hidden]) { margin-top: 4px; /* space-y-1 */ } .hv-find__label { font-size: var(--h-fs-body-sm); font-weight: 500; color: var(--h-ink-2); } /* 원본 .form-input (인라인 \3c style>) */ .hv-find__input { height: 48px; width: 100%; border: 1px solid #dcdcdc; background: #ffffff; padding: 0 14px; font-size: 15px; letter-spacing: 0.15px; outline: 0; border-radius: 0; font-family: inherit; } .hv-find__input:focus { border-color: #1f1a14; } .hv-find__ferr { margin: 0; font-size: var(--h-fs-caption); color: #dc2626; } .hv-find__hint { margin: 0; font-size: var(--h-fs-body-sm); opacity: 0.7; } .hv-find__submit { display: flex; width: 100%; } .hv-find__links { margin: 0; font-size: var(--h-fs-body-sm); text-align: center; } .hv-find__link { display: inline-flex; min-height: 48px; align-items: center; color: var(--h-ink); text-decoration: underline; text-underline-offset: 4px; } .hv-find__link:hover { opacity: 0.8; } .hv-find__results { margin: 0; padding: 16px; list-style: none; border: 1px solid var(--h-line); background: #ffffff; } .hv-find__results > * + * { margin-top: 8px; } .hv-find__row { display: flex; align-items: center; justify-content: space-between; } .hv-find__id { font-size: var(--h-fs-body); font-weight: 600; color: var(--h-ink); } .hv-find__masked { font-size: var(--h-fs-body-sm); color: #9ca3af; } .hv-find__cta-row { display: flex; gap: 12px; } .hv-find__cta { flex: 1; text-align: center; } @media (min-width: 768px) { .hv-find { padding-top: 48px; } } /* ---- /signup/social (signup/social/page.tsx + SocialSignupForm.tsx) — 라이트 지면, 480 ---- */ .hv-ssu { background: var(--h-bg); color: var(--h-ink); } .hv-ssu__col { width: 100%; max-width: 480px; margin: 0 auto; padding: 40px var(--hv-inset) 96px; } .hv-ssu__title { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .hv-ssu__lede { margin: 8px 0 0; font-size: 14px; color: var(--h-ink-3); } .hv-ssu__form { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; } .hv-ssu__field { display: block; } .hv-ssu__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; } .hv-ssu__input { width: 100%; height: 48px; border-radius: 10px; border: 1px solid var(--h-line); background: #ffffff; padding: 0 16px; font-size: 16px; font-family: inherit; outline: none; } .hv-ssu__input:focus { border-color: #000000; } .hv-ssu__consents { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; } .hv-ssu__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; } .hv-ssu__cb { margin: 2px 0 0; width: 16px; height: 16px; appearance: auto; -webkit-appearance: auto; } .hv-ssu__consent-links { font-size: 12px; color: var(--h-ink-3); } .hv-ssu__link { text-decoration: underline; color: inherit; } .hv-ssu__alert { margin: 0; font-size: 13px; color: var(--h-live, #c8102e); } .hv-ssu__submit { margin-top: 8px; height: 52px; width: 100%; } .hv-ssu__submit:disabled { opacity: 0.4; } @media (min-width: 768px) { .hv-ssu__col { padding-top: 64px; } } /* ========================================================================== HAVEA 마이페이지·저장·발견·쿠폰·비교·취향 리포트·리뷰 랜딩·스토리 쓰기 (C-3d) 원본은 inline style + Tailwind 유틸 혼용 — inline 은 JSX 에 그대로, 유틸(h-container·grid·md: 반응형·hover)만 여기로. 토큰은 style.css :root (원본 globals.css) 그대로 사용. 새 팔레트·새 문법 없음. ========================================================================== */ /* ---- 공용 컨테이너 (원본 .h-container: max 1280 · gutter 16 / md 40) ---- */ .hv-my__container, .hv-wish__container, .hv-coupons__container, .hv-compare__container, .hv-report__container { width: 100%; max-width: var(--h-container, 1280px); margin: 0 auto; box-sizing: border-box; } .hv-my, .hv-wish, .hv-discover, .hv-coupons, .hv-compare, .hv-report, .hv-rw, .hv-sw { background: var(--h-bg); color: var(--h-ink); word-break: keep-all; } .hv-my button, .hv-wish button, .hv-coupons button, .hv-report button, .hv-rw button, .hv-sw button { font-family: inherit; } .hv-my__stat { transition: opacity 0.16s var(--h-ease); } @media (hover: hover) { .hv-my__stat:hover { opacity: 0.7; } } .hv-my__skel { border-radius: var(--h-radius-card, 8px); background: var(--h-surface); } .hv-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .hv-no-scrollbar::-webkit-scrollbar { display: none; } /* ---- 확인 다이얼로그 (원본 ConfirmDialog — dim=alert · radius lg · 340px) ---- */ .hv-confirm { position: fixed; inset: 0; z-index: 10000; background: var(--h-dim-alert, rgba(0, 0, 0, 0.4)); display: flex; align-items: center; justify-content: center; padding: 24px; } .hv-confirm__panel { width: 100%; max-width: 340px; background: var(--h-bg); border-radius: var(--h-radius-lg, 14px); padding: 24px 20px 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); } .hv-confirm__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; word-break: keep-all; } .hv-confirm__body { margin: 8px 0 0; font-size: 13px; color: var(--h-ink-2); line-height: 1.6; word-break: keep-all; } .hv-confirm__slot { margin-top: 8px; } .hv-confirm__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; } /* ---- 저장 리스트 (/mypage/wishlist) ---- */ .hv-wish__container { padding: 24px var(--h-gutter, 16px) 80px; } @media (min-width: 768px) { .hv-wish__container { padding: 48px var(--h-gutter-lg, 40px) 120px; } } .hv-wish__tabs { display: flex; margin-bottom: 20px; gap: 6px; } @media (max-width: 767px) { /* 스크롤 시 탭 고정 — 헤더에서 이어지는 풀블리드 흰 띠 (원본 v2) */ .hv-wish__tabs { position: sticky; top: var(--h-h-gnb, 56px); z-index: 30; margin-left: -16px; margin-right: -16px; padding: 8px 16px 10px; background: var(--h-bg); border-bottom: 1px solid var(--h-line, #e8e6e1); } } .hv-wish__tab { display: flex; align-items: baseline; flex: 1 1 0; min-width: 0; padding: 13px 4px; gap: 5px; white-space: nowrap; justify-content: center; border-radius: 999px; text-decoration: none; } .hv-wish__tab-en { display: none; font-family: var(--font-en); font-weight: 700; font-size: 11px; letter-spacing: var(--h-track-wider); opacity: 0.7; } .hv-wish__tab-ko { font-size: 15px; font-weight: 600; } .hv-wish__tab-cnt { font-size: 13px; opacity: 0.6; font-variant-numeric: tabular-nums; } .hv-wish__tab-cnt-pc { display: none; } @media (min-width: 768px) { .hv-wish__tabs { margin-bottom: 32px; } .hv-wish__tab { flex: 0 0 auto; padding: 18px 28px; gap: 8px; } .hv-wish__tab-en { display: inline; } .hv-wish__tab-cnt-m { display: none; } .hv-wish__tab-cnt-pc { display: inline; } } .hv-wish__grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 32px; } .hv-wish__cgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } .hv-wish__reco { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .hv-wish__brands { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } .hv-wish__viewtoggle { display: none; } @media (min-width: 768px) { .hv-wish__grid { grid-template-columns: repeat(4, 1fr); column-gap: 20px; row-gap: 48px; } .hv-wish__cgrid, .hv-wish__reco { grid-template-columns: repeat(4, 1fr); } .hv-wish__viewtoggle { display: flex; } } .hv-wish__name--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hv-wish__img { position: relative; width: 100%; aspect-ratio: var(--h-aspect-card, 4 / 5); border-radius: var(--h-radius-card, 8px); background: var(--h-bg-product); overflow: hidden; } .hv-wish__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-wish__silhouette { pointer-events: none; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 700; font-size: clamp(40px, 14cqw, 80px); letter-spacing: -0.04em; color: rgba(0, 0, 0, 0.08); } .hv-wish__soldout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); } .hv-wish__h3 { font-size: var(--h-fs-h3, 18px); font-weight: var(--h-fw-m); line-height: 1.4; } .hv-wish__empty { display: flex; min-height: 200px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; } .hv-wish__empty p { margin: 0; font-size: var(--h-fs-body, 15px); color: #6b7280; } .hv-wish__empty a { font-size: var(--h-fs-caption, 11px); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: inherit; } .hv-wish__fallback { display: flex; min-height: 160px; align-items: center; justify-content: center; font-size: 13px; color: var(--h-ink-3); } .hv-wish__srtitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---- 오늘의 발견 (/discover) ---- */ .hv-discover__inner { width: 100%; max-width: var(--h-container, 1280px); margin: 0 auto; padding: 24px var(--h-gutter, 16px) 80px; box-sizing: border-box; } .hv-discover__head { margin-bottom: 28px; } .hv-discover__h1 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; } .hv-discover__sub { margin: 10px 0 0; font-size: 14px; line-height: 1.6; white-space: pre-line; color: var(--h-ink-2); } .hv-discover__login { margin: 40px auto 0; max-width: 420px; } .hv-discover__loginsub { margin: 10px 0 0; font-size: 13px; color: var(--h-ink-2); text-align: center; } /* 덱 소진 가입 CTA 가 뜨면 페이지 로그인 CTA 숨김 — 동시 노출 CTA 1개 */ .hv-discover__deck:has(a[href^='/signup']) + .hv-discover__login { display: none; } @media (min-width: 768px) { .hv-discover__inner { padding: 48px var(--h-gutter-lg, 40px) 120px; } .hv-discover__h1 { font-size: clamp(40px, 5vw, 56px); } .hv-discover__head { margin-bottom: 40px; } } /* ---- 쿠폰 받기 (/coupons) — 티켓 문법 ---- */ .hv-coupons__head { padding: 40px var(--h-gutter, 16px) 24px; } .hv-coupons__body { padding: 0 var(--h-gutter, 16px) 64px; } @media (min-width: 768px) { .hv-coupons__head { padding: 56px var(--h-gutter-lg, 40px) 24px; } .hv-coupons__body { padding: 0 var(--h-gutter-lg, 40px) 96px; } } .hv-coupons__h1 { margin: 8px 0 0; font-family: var(--font-en); font-size: clamp(44px, 9vw, 140px); font-weight: 700; letter-spacing: -0.025em; line-height: 0.95; } .hv-coupons__h1 span { color: var(--h-point); } .hv-coupons__lede { margin: 12px 0 0; font-size: 14px; color: var(--h-ink-2); max-width: 560px; } .hv-coupons__empty { display: flex; min-height: 240px; align-items: center; justify-content: center; font-size: var(--h-fs-body, 15px); color: #6b7280; } .hv-coupons__zone { background: var(--h-surface, #f4f4f4); border-radius: 20px; padding: 18px 16px 20px; } .hv-coupons__eyebrow { margin: 0; font-family: var(--font-en); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7280; } .hv-coupons__list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 768px) { .hv-coupons__list { grid-template-columns: 1fr 1fr; } } .hv-coupons__ticket { position: relative; border-radius: 14px; padding: 16px 72px 16px 18px; overflow: hidden; } .hv-coupons__stub { position: absolute; right: 0; top: 0; bottom: 0; width: 56px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; writing-mode: vertical-rl; } .hv-coupons__stub--btn { background: transparent; border: none; cursor: pointer; font-family: var(--font-en); } /* ---- 상품 비교 (/compare) ---- */ .hv-compare__head { padding: 40px var(--h-gutter, 16px) 24px; } .hv-compare__body { padding: 0 var(--h-gutter, 16px) 64px; } @media (min-width: 768px) { .hv-compare__head { padding: 56px var(--h-gutter-lg, 40px) 24px; } .hv-compare__body { padding: 0 var(--h-gutter-lg, 40px) 96px; } } .hv-compare__h1 { margin: 8px 0 0; font-family: var(--font-en); font-size: clamp(44px, 9vw, 140px); font-weight: 700; letter-spacing: -0.025em; line-height: 0.95; } .hv-compare__lede { margin: 12px 0 0; font-size: 14px; color: var(--h-ink-2); max-width: 560px; } .hv-compare__scroll { overflow-x: auto; } .hv-compare__table { min-width: 100%; border-collapse: collapse; text-align: left; border: 1px solid var(--h-line); } .hv-compare__table th, .hv-compare__table td { border: 1px solid var(--h-line); padding: 12px; vertical-align: top; } .hv-compare__table thead tr { background: rgba(244, 244, 244, 0.2); } .hv-compare__table th { font-size: var(--h-fs-caption, 11px); text-transform: uppercase; color: #6b7280; font-weight: 500; } .hv-compare__table th[scope='row'] { background: rgba(244, 244, 244, 0.1); width: 128px; } .hv-compare__img { position: relative; aspect-ratio: 1 / 1; width: 100%; overflow: hidden; background: rgba(244, 244, 244, 0.3); } .hv-compare__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-compare__link { color: inherit; text-decoration: none; text-underline-offset: 4px; } .hv-compare__link:hover { text-decoration: underline; } .hv-compare__empty { display: flex; min-height: 280px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; } .hv-compare__empty p { margin: 0; font-size: var(--h-fs-body, 15px); color: #6b7280; } .hv-compare__cta { display: inline-flex; align-items: center; justify-content: center; height: var(--h-h-btn, 48px); padding: 0 24px; border-radius: var(--h-radius-btn, 8px); background: var(--h-ink); color: var(--h-bg); text-decoration: none; font-size: var(--h-fs-caption, 11px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .hv-compare__cta:hover { opacity: 0.8; } .hv-compare__muted { font-size: 12px; opacity: 0.7; } .hv-compare__sale { font-size: var(--h-fs-caption, 11px); color: #dc2626; } .hv-compare__stock { font-size: var(--h-fs-caption, 11px); } .hv-compare__stock--ok { color: #15803d; } .hv-compare__stock--out { color: #dc2626; } .hv-compare__strike { font-size: var(--h-fs-caption, 11px); margin-right: 4px; color: #9ca3af; text-decoration: line-through; } .hv-compare__price { font-size: 15px; font-weight: 600; } /* ---- 취향 리포트 (/mypage/report) ---- */ .hv-report__container { padding: 24px var(--h-gutter, 16px) 80px; } @media (min-width: 768px) { .hv-report__container { padding: 40px var(--h-gutter-lg, 40px) 120px; } } .hv-report__back { display: inline-flex; min-height: 48px; align-items: center; color: var(--h-ink-2); text-decoration: none; font-size: var(--h-fs-body-sm, 13px); } .hv-report__gate, .hv-report__paper { margin-left: auto; margin-right: auto; } .hv-report__gate { max-width: 520px; margin-top: 28px; } .hv-report__paper { max-width: 560px; margin-top: 20px; } .hv-report__gate-rows a { color: inherit; text-decoration: none; } .hv-report__profile { margin-top: 20px; border-top: 2px solid var(--h-ink); padding-top: 20px; } .hv-report__profile-head { margin-top: 12px; display: flex; align-items: center; gap: 16px; } .hv-report__profile-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.375; } .hv-report__profile-body { margin: 12px 0 0; font-size: 14px; line-height: 1.75; color: var(--h-ink-2); } .hv-report__streak { margin-top: 12px; display: flex; align-items: center; gap: 8px; } .hv-report__week { display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--h-line); font-size: 11px; font-weight: 800; } .hv-report__reco { margin-top: 40px; } .hv-report__reco-title { margin: 8px 0 0; font-size: 22px; font-weight: 800; } .hv-report__reco-body { margin: 8px 0 0; font-size: 13px; color: var(--h-ink-2); } .hv-report__reco-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 28px; } .hv-report__share { display: grid; gap: 8px; margin-top: 24px; } .hv-report__share .h-btn:disabled { opacity: 0.5; } .hv-report__locked { padding: 64px 16px 120px; text-align: center; } /* ---- 리뷰 랜딩 (/review/write) ---- */ .hv-rw__inner { margin: 0 auto; width: 100%; max-width: 560px; padding: 40px 16px; box-sizing: border-box; } @media (min-width: 768px) { .hv-rw__inner { padding: 56px 16px; } } .hv-rw__h1 { margin: 0; font-size: var(--h-fs-h2, 22px); font-weight: 700; letter-spacing: -0.02em; } .hv-rw__lead { margin: 8px 0 0; font-size: var(--h-fs-body, 15px); color: var(--h-ink-2); } .hv-rw__groups { margin-top: 32px; display: flex; flex-direction: column; gap: 32px; } .hv-rw__group { display: flex; flex-direction: column; gap: 12px; } .hv-rw__group-title { margin: 0; padding-bottom: 8px; font-size: var(--h-fs-body, 15px); font-weight: 600; border-bottom: 2px solid var(--h-ink); } .hv-rw__card { background: var(--h-bg); border: 1px solid var(--h-line); border-radius: var(--h-radius-card, 8px); padding: 16px; } .hv-rw__card--muted { opacity: 0.6; } .hv-rw__row { display: flex; gap: 12px; } .hv-rw__thumb { height: 80px; width: 64px; flex-shrink: 0; overflow: hidden; border-radius: var(--h-radius-sm, 6px); background: var(--h-bg-product); } .hv-rw__thumb img { height: 100%; width: 100%; object-fit: cover; } .hv-rw__name { margin: 4px 0 0; font-size: var(--h-fs-body, 15px); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hv-rw__opt { margin: 2px 0 0; font-size: var(--h-fs-caption, 11px); color: var(--h-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-rw__badge { margin: 0; display: flex; align-items: center; gap: 6px; } .hv-rw__badge-dot { display: inline-block; width: 5px; height: 5px; flex-shrink: 0; border-radius: 999px; background: currentColor; } .hv-rw__action { margin-top: 16px; } .hv-rw__done { border-top: 1px solid var(--h-line); padding-top: 8px; } .hv-rw__done summary { display: flex; min-height: 48px; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--h-fs-caption, 11px); color: var(--h-ink-3); } .hv-rw__done summary::-webkit-details-marker { display: none; } .hv-rw__done-list { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; } .hv-rw__foot { border-top: 1px solid var(--h-line); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; } .hv-rw__caption { margin: 0; font-size: var(--h-fs-caption, 11px); color: var(--h-ink-3); } .hv-rw__textlink { display: inline-flex; min-height: 48px; align-items: center; font-size: var(--h-fs-caption, 11px); text-decoration: underline; text-underline-offset: 4px; color: inherit; } .hv-rw__empty { margin-top: 32px; padding: 24px; border: 1px solid var(--h-line); border-radius: var(--h-radius-card, 8px); } .hv-rw__empty-title { margin: 0; font-size: var(--h-fs-body, 15px); font-weight: 600; } .hv-rw__empty-body { margin: 8px 0 0; font-size: var(--h-fs-caption, 11px); color: var(--h-ink-2); } .hv-rw__stars { margin-top: 8px; display: flex; gap: 4px; align-items: center; } .hv-rw__star { display: flex; height: 48px; width: 48px; align-items: center; justify-content: center; font-size: 24px; line-height: 1; background: transparent; border: 0; cursor: pointer; } .hv-rw__textarea { margin-top: 8px; width: 100%; border: 1px solid var(--h-line); border-radius: var(--h-radius-input, 8px); background: var(--h-bg); padding: 12px; font-size: 16px; font-family: inherit; box-sizing: border-box; } .hv-rw__photos { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .hv-rw__photo { position: relative; height: 64px; width: 64px; border-radius: 4px; border: 1px solid var(--h-line); background: var(--h-bg); } .hv-rw__photo img { width: 100%; height: 100%; object-fit: cover; } .hv-rw__photo-x { position: absolute; right: -10px; top: -10px; display: grid; height: 40px; width: 40px; place-items: center; background: transparent; border: 0; cursor: pointer; } .hv-rw__photo-x span { display: grid; height: 20px; width: 20px; place-items: center; border-radius: 999px; background: rgba(0, 0, 0, 0.6); font-size: 12px; color: #fff; } .hv-rw__photo-add { display: inline-flex; height: 64px; width: 64px; cursor: pointer; align-items: center; justify-content: center; border: 1px dashed var(--h-line); font-size: var(--h-fs-caption, 11px); color: var(--h-ink-3); } .hv-rw__photo-add:hover { border-color: var(--h-ink); } .hv-rw__msg { margin: 8px 0 0; font-size: 12px; color: var(--h-point); } .hv-rw__stamp-row { display: flex; align-items: center; gap: 16px; } /* ---- 스토리 쓰기 (/story/write) ---- */ .hv-sw__main { max-width: 680px; margin: 0 auto; padding: 32px 20px 0; } .hv-sw__main--login { padding-bottom: 64px; } .hv-sw__head { display: flex; align-items: baseline; justify-content: space-between; } .hv-sw__h1 { font-size: 22px; font-weight: 800; margin: 0; } .hv-sw__rule { height: 2px; background: var(--h-ink); border: 0; margin: 10px 0 0; } .hv-sw__notice { margin-top: 16px; font-size: 14px; line-height: 1.65; color: var(--h-ink-2); } .hv-sw__form { padding-top: 24px; padding-bottom: 40px; } .hv-sw__field { margin-top: 26px; } .hv-sw__label { display: block; font-size: 13px; font-weight: 700; color: var(--h-ink); } .hv-sw__num { font-family: var(--font-en); font-size: 11px; font-weight: 700; color: var(--h-ink-3); letter-spacing: 0.06em; margin-right: 8px; } .hv-sw__help { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--h-ink-3); } .hv-sw__input { width: 100%; margin-top: 10px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--h-line); border-radius: 10px; font-size: 16px; font-family: inherit; color: var(--h-ink); background: transparent; box-sizing: border-box; } .hv-sw__textarea { line-height: 1.7; resize: vertical; } .hv-sw__photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .hv-sw__photo { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--h-line); } .hv-sw__photo img { width: 100%; height: 100%; object-fit: cover; } .hv-sw__photo-tag { position: absolute; left: 4px; bottom: 4px; padding: 2px 5px; border-radius: 4px; background: var(--h-ink); color: #fff; font-size: 9px; } .hv-sw__box { margin-top: 26px; padding: 12px 14px; border: 1px solid var(--h-line); border-radius: 10px; font-size: 13px; line-height: 1.6; color: var(--h-ink-2); } .hv-sw__msg { margin: 10px 0 0; font-size: 12px; color: var(--h-point); } .hv-sw__done { padding-top: 28px; } .hv-sw__done-h1 { font-size: 22px; font-weight: 800; margin: 8px 0 12px; } .hv-sw__done-p { font-size: 14.5px; line-height: 1.65; color: var(--h-ink-2); margin: 0; } /* ================================================================== * E — 라운지(/story/lounge, 원본 story/lounge/page.tsx + LoungeTimeline.tsx + LoungeThemeToggle.tsx) * · 먼슬리 래플(/raffle, 원본 raffle/page.tsx + RaffleEntryButton.tsx) * 원본 인라인 스타일·Tailwind 유틸을 클래스로 옮김 — 값은 토큰(--h-*)·원본 수치 그대로. 지면은 백지(--h-bg), 입력·패널이 회지(--h-surface). * ------------------------------------------------------------------ */ .hv-lounge-root { background: var(--h-bg); color: var(--h-ink); } /* 다크 모드 = 한 장면 (원본 body { background: var(--h-bg) } — 헤더·탭 바·본문 열까지). 스킨 네이티브 셸(.page 계열)은 토큰을 안 쓰므로 여기서 덮는다 */ :root[data-theme='dark'] body, :root[data-theme='dark'] .page, :root[data-theme='dark'] .page-inner, :root[data-theme='dark'] .page__content, :root[data-theme='dark'] .l-content { background: var(--h-bg); color: var(--h-ink); } /* main: mx-auto max-w-640 px-gutter py-6 pb-16 · md: grid 200+640 gap-40 px-40 pb-24 */ .hv-lounge { box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto; padding: 24px var(--h-gutter) 64px; scroll-margin-top: 72px; } @media (min-width: 768px) { .hv-lounge { display: grid; max-width: 960px; grid-template-columns: 200px 640px; gap: 40px; padding: 24px 40px 96px; } .hv-lounge--soon { display: block; max-width: 640px; padding: 24px var(--h-gutter) 64px; } } .hv-lounge__soon { padding: 56px 0; text-align: center; } .hv-lounge__soon p { margin: 0; font-size: 15px; font-weight: 700; } /* ---- 헤더 (장부 헤더 문법 — 스토리 첫 번째, 라운지 두 번째) ---- */ .hv-lounge__head { display: flex; align-items: baseline; gap: 16px; } .hv-lounge__head-story { font-size: 20px; font-weight: 500; color: var(--h-ink-3); text-decoration: none; } .hv-lounge__head-h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; } .hv-lounge__rule { height: 2px; background: var(--h-ink); border: 0; margin: 8px 0 0; } .hv-lounge__floor-note { margin: 8px 0 0; font-size: 11px; color: var(--h-ink-3); } .hv-lounge__theme { display: flex; gap: 4px; } .hv-lounge__theme-chip { height: 30px; padding: 0 10px; font-size: 11.5px; } /* ---- 아바타 ---- */ .hv-lounge__avatar { border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--h-surface); } .hv-lounge__avatar img { width: 88%; height: 88%; object-fit: contain; } .hv-lounge__op { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-right: 6px; background: var(--h-ink); color: #fff; font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; border-radius: 3px; } /* ---- 메타 행 (답글·발췌 공용) ---- */ .hv-lounge__meta { display: flex; align-items: center; gap: 0; margin-bottom: 4px; } .hv-lounge__meta-name { font-size: 12px; font-weight: 600; color: var(--h-ink); } .hv-lounge__meta-time { margin-left: 6px; font-family: var(--font-en); font-size: 11px; color: var(--h-ink-3); font-variant-numeric: tabular-nums; } /* ---- 스레드 ---- */ .hv-lounge__thread { margin-top: 12px; } .hv-lounge__thread--lined { margin-top: 16px; margin-left: 2px; padding-left: 18px; border-left: 1px solid var(--h-line); } .hv-lounge__reply { margin-bottom: 16px; } .hv-lounge__reply-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--h-ink-2); white-space: pre-line; } .hv-lounge__reply-row { display: flex; gap: 8px; } /* 표준 입력 문법 — 48 · radius 8 · 백지 위 회지 · 16px(iOS 확대 방지) */ .hv-lounge__input { flex: 1; width: 100%; min-height: 48px; padding: 0 14px; border: none; border-radius: 8px; background: var(--h-surface); font-size: 16px; font-family: inherit; color: var(--h-ink); } .hv-lounge__textarea { padding: 12px 14px; line-height: 1.6; resize: none; } /* ---- 소인·표지 ---- */ .hv-lounge__stamp-label { font-family: var(--font-en); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; line-height: 1; } .hv-lounge__stamp-no { font-family: var(--font-en); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; } .hv-lounge__cover { position: relative; flex-shrink: 0; } .hv-lounge__cover--m { width: 104px; height: 130px; } @media (min-width: 768px) { .hv-lounge__cover--m { width: 160px; height: 200px; } } .hv-lounge__cover--s { width: 72px; height: 90px; } .hv-lounge__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; } .hv-lounge__cover-stamp { position: absolute; right: -10px; top: -10px; } /* ---- 아이브로·칩 ---- */ .hv-lounge__week-eyebrow { margin: 0; color: var(--h-ink-3); } .hv-lounge__week-eyebrow b { color: var(--h-ink); font-weight: 700; } .hv-lounge__eyebrow { margin: 0; color: var(--h-ink-3); } .hv-lounge__chips { display: flex; gap: 6px; flex-wrap: wrap; } .hv-lounge__chip { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--h-line); background: transparent; color: var(--h-ink-2); font-size: 12.5px; font-family: inherit; cursor: pointer; } .hv-lounge__chip--on { border-color: var(--h-ink); background: var(--h-ink); color: var(--h-bg); } /* ---- 컴포저 ---- */ .hv-lounge__composer { margin-top: 16px; } .hv-lounge__composer-img { margin: 10px 0 0; } .hv-lounge__composer-img img { max-width: 160px; border-radius: 10px; border: 1px solid var(--h-line); } .hv-lounge__composer-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .hv-lounge__composer .hv-msg { margin-top: 10px; } /* ---- 글 (스레드 조판) ---- */ .hv-lounge__post { padding-top: 32px; } .hv-lounge__post--compact { padding-top: 20px; } .hv-lounge__post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .hv-lounge__post-name { font-size: 13px; font-weight: 700; color: var(--h-ink); } .hv-lounge__post-time { font-family: var(--font-en); font-size: 11px; color: var(--h-ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .hv-lounge__ritual-tag { margin-left: auto; font-size: 10.5px; letter-spacing: 0.04em; color: var(--h-ink-3); } /* 매거진 본문 정본 17/18 — 미디어쿼리로 (SSR 플래시 방지 결) */ .hv-lounge__body { margin: 0; font-size: 17px; line-height: 1.85; letter-spacing: -0.01em; color: var(--h-ink-2); white-space: pre-line; } @media (min-width: 768px) { .hv-lounge__body { font-size: 18px; } } .hv-lounge__post-img { margin-top: 16px; max-width: 100%; max-height: 320px; border-radius: 10px; border: 1px solid var(--h-line); } .hv-lounge__reply-cta { margin: 8px 0 0; font-size: 12px; color: var(--h-ink-3); } .hv-lounge__linkbtn { padding: 0; border: none; background: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--h-ink); text-decoration: underline; text-underline-offset: 4px; min-height: 32px; } .hv-lounge__linkbtn--quiet { font-size: 11.5px; color: var(--h-ink-3); text-decoration: none; } /* ---- 발췌 ---- */ .hv-lounge__excerpts { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .hv-lounge__excerpt { padding-left: 14px; border-left: 1px solid var(--h-line); } .hv-lounge__excerpt-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--h-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- B1 클럽 홈 ---- */ .hv-lounge__club { margin-top: 16px; background: var(--h-surface); border-radius: 8px; padding: 14px 16px; } .hv-lounge__club-title { margin: 4px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; } .hv-lounge__club-intro { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--h-ink-2); } .hv-lounge__club-faces { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .hv-lounge__face { border: 2px solid var(--h-surface); border-radius: 50%; } .hv-lounge__club-joined { font-size: 11px; color: var(--h-ink-3); } .hv-lounge__club-pick { margin-top: 16px; } .hv-lounge__club-pick-title { margin: 4px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; } .hv-lounge__club-pick-sub { margin: 4px 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--h-ink-3); } .hv-lounge__club-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .hv-lounge__club-card { text-align: left; border: 1px solid var(--h-line); border-radius: 8px; padding: 10px 10px 12px; background: var(--h-bg); color: inherit; cursor: pointer; font-family: inherit; } .hv-lounge__club-card-name { display: block; font-size: 13.5px; font-weight: 800; } .hv-lounge__club-card-intro { display: block; font-size: 11px; line-height: 1.45; color: var(--h-ink-3); margin-top: 4px; min-height: 32px; } .hv-lounge__club-card-join { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--h-ink); } .hv-lounge__club-rows { margin-top: 28px; } .hv-lounge__club-row { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border: 0; border-bottom: 1px solid var(--h-line); background: transparent; color: inherit; font-family: inherit; cursor: pointer; text-align: left; } .hv-lounge__club-row-name { font-size: 14px; font-weight: 800; } .hv-lounge__club-row-cta { font-size: 11.5px; color: var(--h-ink-3); } .hv-lounge__club-row-cta--on { color: var(--h-ink); } /* ---- 리추얼 카드 ---- */ .hv-lounge__ritual { margin-top: 16px; border: 1px solid var(--h-line); border-radius: 8px; padding: 14px; position: relative; } .hv-lounge__ritual-title { margin: 4px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; } .hv-lounge__ritual-meta { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--h-ink-2); } .hv-lounge__ritual-meta span { display: block; } .hv-lounge__ritual-note { color: var(--h-ink-3); } .hv-lounge__ritual-joined { margin: 12px 0 0; font-size: 13px; font-weight: 700; } .hv-lounge__ritual-joined span { display: block; font-weight: 400; font-size: 11.5px; color: var(--h-ink-3); margin-top: 2px; } /* ---- PC 좌 내비 (sticky) ---- */ .hv-lounge__nav { display: none; } @media (min-width: 768px) { .hv-lounge__nav { display: flex; position: sticky; top: 88px; flex-direction: column; gap: 2px; align-self: start; } } .hv-lounge__nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; border: 0; background: transparent; color: var(--h-ink-2); font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer; text-align: left; } .hv-lounge__nav-item--on { background: var(--h-surface); color: var(--h-ink); font-weight: 800; } .hv-lounge__nav-eyebrow { margin: 14px 12px 4px; color: var(--h-ink-3); } .hv-lounge__nav-story { display: flex; gap: 10px; align-items: center; padding: 9px 12px; text-decoration: none; color: inherit; } .hv-lounge__nav-story img { width: 36px; height: 46px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .hv-lounge__nav-story-label { display: block; font-size: 11px; color: var(--h-ink-3); } .hv-lounge__nav-story-title { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.35; } /* ---- 이번 주 표지 ---- */ .hv-lounge__hero { margin: 22px 0 0; scroll-margin-top: 72px; } .hv-lounge__hero-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; } /* 명명 예외 — 라운지 질문 히어로: 24 / PC 32 · 600 · -0.01em · 1.38 */ .hv-lounge__q { margin: 8px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.38; text-wrap: balance; } @media (min-width: 768px) { .hv-lounge__q { font-size: 32px; } } .hv-lounge__q-helper { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--h-ink-3); } .hv-lounge__empty { padding: 48px 0; text-align: center; } .hv-lounge__empty-title { margin: 0; font-size: 15px; font-weight: 700; } .hv-lounge__empty-desc { margin: 6px 0 0; font-size: 13px; color: var(--h-ink-3); } /* ---- 주차 서클 (모바일) ---- */ .hv-lounge__circles { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 0; margin: 18px -4px 0; } @media (min-width: 768px) { .hv-lounge__circles { display: none; } } .hv-lounge__circle { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; min-width: 52px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--h-ink-3); } .hv-lounge__circle--on { color: var(--h-ink); } .hv-lounge__circle-face { width: 52px; height: 52px; border-radius: 50%; background: var(--h-bg); box-shadow: 0 0 0 1.5px var(--h-line-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 700; color: var(--h-ink); font-variant-numeric: tabular-nums; } .hv-lounge__circle--on .hv-lounge__circle-face { box-shadow: 0 0 0 2px var(--h-stamp-positive); color: var(--h-stamp-positive); } .hv-lounge__circle-label { font-size: 11px; font-family: var(--font-en); letter-spacing: 0.06em; font-weight: 400; } .hv-lounge__circle--on .hv-lounge__circle-label { font-weight: 600; } /* ---- 지난 주차 블록 ---- */ .hv-lounge__past { margin-top: 36px; padding-top: 22px; border-top: 2px solid var(--h-ink); scroll-margin-top: 72px; } .hv-lounge__past-head { display: flex; gap: 12px; align-items: flex-start; } .hv-lounge__past-q { margin: 6px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; text-wrap: balance; } .hv-lounge__no-answers { margin: 12px 0 0; font-size: 13px; color: var(--h-ink-3); } .hv-lounge__past-actions { margin: 12px 0 0; display: flex; gap: 14px; flex-wrap: wrap; } /* ================================================================== * 먼슬리 래플 (/raffle) * ------------------------------------------------------------------ */ .hv-raffle { background: var(--h-bg); min-height: 70vh; color: var(--h-ink); } /* h-container pb-24 pt-8 md:pb-32 md:pt-14 */ .hv-raffle__container { box-sizing: border-box; width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 32px var(--h-gutter) 96px; } @media (min-width: 768px) { .hv-raffle__container { padding: 56px var(--h-gutter-lg) 128px; } } .hv-raffle__empty { max-width: 448px; margin: 0 auto; padding: 80px 0; text-align: center; } .hv-raffle__empty-h1 { margin: 12px 0 0; font-size: 24px; font-weight: 800; } .hv-raffle__empty-p { margin: 12px 0 0; font-size: 14px; color: var(--h-ink-2); } .hv-raffle__empty .h-btn { display: inline-flex; text-decoration: none; } .hv-raffle__article { max-width: 560px; margin: 0 auto; } .hv-raffle__card { background: #ffffff; border-radius: 8px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07); overflow: hidden; } .hv-raffle__card-body { padding: 20px; } @media (min-width: 768px) { .hv-raffle__card-body { padding: 32px; } } .hv-raffle__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .hv-raffle__serial { margin: 4px 0 0; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } .hv-raffle__h1 { margin: 8px 0 0; font-size: 25px; font-weight: 800; line-height: 1.25; } @media (min-width: 768px) { .hv-raffle__h1 { font-size: 32px; } } .hv-raffle__period { margin: 8px 0 0; font-size: 13px; color: var(--h-ink-2); } .hv-raffle__prize-img { margin-top: 24px; overflow: hidden; background: var(--h-bg-product); aspect-ratio: 4 / 3; border-radius: 8px; } .hv-raffle__prize-img img { width: 100%; height: 100%; object-fit: cover; } .hv-raffle__rows { margin-top: 20px; border-top: 2px solid #000; } .hv-raffle__row { padding: 16px 0; } .hv-raffle__row--split { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .hv-raffle__row--line { border-top: 1px solid var(--h-line); } .hv-raffle__label { margin: 0; font-size: 12px; color: var(--h-ink-2); } .hv-raffle__prize-name { margin: 4px 0 0; font-size: 16px; font-weight: 800; } .hv-raffle__price { margin: 0; flex-shrink: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .hv-raffle__cond { margin: 4px 0 0; font-size: 14px; font-weight: 700; } .hv-raffle__entry { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .hv-raffle__entry-serial { margin: 0; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } .hv-raffle__entry-at { margin: 4px 0 0; text-align: right; font-size: 12px; color: var(--h-ink-3); } .hv-raffle__cta { min-height: 48px; width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; } .hv-raffle__cta:disabled { opacity: 0.6; } /* 절취선 (원본 radial-gradient 펀치) */ .hv-raffle__perf { height: 12px; background: radial-gradient(circle at 6px 12px, transparent 6px, var(--h-bg) 6.5px) 0 0 / 12px 12px repeat-x; } /* 응모 시트 */ .hv-raffle__sheet-root { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; } .hv-raffle__scrim { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(0, 0, 0, 0.45); cursor: pointer; } .hv-raffle__sheet { position: relative; z-index: 10; width: 100%; max-width: 560px; border-radius: 20px 20px 0 0; background: #fff; padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); } .hv-raffle__grip { margin: 0 auto; height: 4px; width: 44px; border-radius: 999px; background: #d1d5db; } .hv-raffle__sheet-h2 { margin: 20px 0 0; font-size: 18px; font-weight: 800; } .hv-raffle__sheet-p { margin: 8px 0 0; font-size: 13px; line-height: 24px; color: var(--h-ink-2); } .hv-raffle__form { margin-top: 20px; } .hv-raffle__flabel { display: block; font-size: 13px; font-weight: 700; } .hv-raffle__input { box-sizing: border-box; margin-top: 8px; height: 48px; width: 100%; border-radius: 8px; border: 1px solid var(--h-line); padding: 0 12px; font-size: 16px; font-family: inherit; } .hv-raffle__hint { margin: 4px 0 0; font-size: 11px; color: var(--h-ink-3); } .hv-raffle__hint--ret { line-height: 20px; } .hv-raffle__check { margin-top: 16px; display: flex; min-height: 44px; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 20px; } .hv-raffle__check--opt { margin-top: 8px; color: var(--h-ink-2); } .hv-raffle__check input { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; } .hv-raffle__form .hv-raffle__cta { margin-top: 20px; } .hv-raffle__msg { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--h-ink-2); } .hv-help { background: var(--h-bg); color: var(--h-ink); width: 100%; max-width: var(--h-container); margin: 0 auto; } .hv-help__hero { padding: 40px var(--hv-inset) 24px; } .hv-help__eyebrow { margin: 0; font-family: var(--font-en); font-size: var(--h-fs-caption); font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wider); text-transform: uppercase; color: var(--h-ink); } .hv-help__title { margin: 8px 0 0; font-family: var(--font-en); font-size: clamp(44px, 9vw, 140px); font-weight: var(--h-fw-b); letter-spacing: -0.025em; line-height: 0.95; } .hv-help__sub { margin: 12px 0 0; max-width: 560px; font-size: 14px; color: var(--h-ink-2); } .hv-help__body { padding: 0 var(--hv-inset) 64px; } .hv-help__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; } .hv-help__tile { display: block; background: var(--h-surface); border-radius: var(--h-radius-card); padding: 24px; color: inherit; text-decoration: none; transition: opacity var(--h-dur-1) var(--h-ease); } .hv-help__tile:hover { opacity: 0.7; } .hv-help__tile-label { display: block; font-size: var(--h-fs-h3); line-height: 1.4; font-weight: var(--h-fw-sb); } .hv-help__tile-desc { display: block; margin-top: 8px; font-size: 14px; color: var(--h-ink-2); } .hv-help__support { margin-top: 40px; background: var(--h-surface); border-radius: var(--h-radius-card); padding: 24px; } .hv-help__support-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; } .hv-help__support-title { margin: 0; font-size: 15px; font-weight: var(--h-fw-b); letter-spacing: -0.02em; } .hv-help__support-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.85; color: var(--h-ink-2); } .hv-help__en { font-family: var(--font-en); } .hv-help__support-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } @media (min-width: 768px) { .hv-help__hero { padding: 56px var(--h-gutter-lg) 24px; } .hv-help__body { padding: 0 var(--h-gutter-lg) 96px; } .hv-help__grid { grid-template-columns: 1fr 1fr; } .hv-help__support { padding: 32px; } .hv-help__support-cta { width: auto; grid-template-columns: auto auto; } .hv-help__support-cta > * { min-width: 180px; } .hv-help__support-title { font-size: 17px; } } @media (min-width: 1024px) { .hv-help__grid { grid-template-columns: repeat(3, 1fr); } } .hv-cs, .hv-size { background: var(--h-bg); color: var(--h-ink); width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 24px var(--hv-inset) 80px; } @media (min-width: 768px) { .hv-cs, .hv-size { padding: 40px var(--hv-inset) 120px; } } .hv-cs__inner { width: 100%; max-width: 768px; margin: 0 auto; } .hv-cs__back, .hv-size__back { display: inline-block; font-size: var(--h-fs-body-sm); color: var(--h-ink); text-decoration: none; } .hv-cs__back:hover, .hv-size__back:hover { text-decoration: underline; } .hv-cs__title { margin: 12px 0 0; font-size: var(--h-fs-display-m); font-weight: var(--h-fw-b); line-height: 1.05; letter-spacing: var(--h-track-display); } .hv-cs__body { margin-top: 40px; font-size: var(--h-fs-body); line-height: 1.7; color: var(--h-ink); word-break: keep-all; overflow-wrap: anywhere; } .hv-cs__body img { max-width: 100%; height: auto; } .hv-cs__note { margin: 40px 0 0; font-size: var(--h-fs-body); line-height: 1.625; color: var(--h-ink-2); } .hv-cs__retry { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 12px; padding: 0 16px; border: 1px solid var(--h-ink); border-radius: var(--h-radius-btn); background: var(--h-bg); color: var(--h-ink); font: inherit; font-size: var(--h-fs-btn); cursor: pointer; } .hv-size__title { margin: 12px 0 0; font-family: var(--font-stack); font-size: clamp(36px, 5vw, 56px); font-weight: var(--h-fw-sb); letter-spacing: -0.03em; line-height: 1; } .hv-size__lead { margin: 12px 0 0; font-size: var(--h-fs-body); line-height: normal; color: var(--h-ink-3); } .hv-size__section, .hv-size__measure { margin-top: 48px; } .hv-size__measure { background: var(--h-surface); padding: 24px; } .hv-size__h2 { margin: 0; font-size: var(--h-fs-h3); line-height: 1.4; font-weight: var(--h-fw-m); } .hv-size__scroll { margin-top: 16px; overflow-x: auto; } .hv-size__table { min-width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; } .hv-size__table thead tr { border-top: 1px solid var(--h-ink); border-bottom: 1px solid var(--h-line); } .hv-size__table th { padding: 12px; text-align: left; font-family: var(--font-en); font-size: var(--h-fs-caption); font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wider); text-transform: uppercase; } .hv-size__table tbody tr { border-bottom: 1px solid var(--h-line); } .hv-size__table td { padding: 12px; } .hv-size__size { font-weight: var(--h-fw-m); font-variant-numeric: tabular-nums; } .hv-size__num { font-variant-numeric: tabular-nums; } .hv-size__list { margin: 16px 0 0; padding: 0; list-style: disc inside; font-size: 14px; line-height: 20px; color: var(--h-ink-2); } .hv-size__list li + li { margin-top: 8px; } .hv-size__note { margin: 16px 0 0; font-size: var(--h-fs-caption); line-height: normal; color: var(--h-ink-3); } .hv-cat__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; } .hv-cat__bg { position: absolute; inset: 0; overflow: hidden; background: #0c0c0c; } .hv-cat__sheen { position: absolute; inset: -10%; background: radial-gradient(60% 50% at 30% 20%, #2a2a2a 0%, transparent 60%), radial-gradient(70% 60% at 80% 80%, #0c0c0c 0%, transparent 70%), linear-gradient(180deg, #1a1a1a 0%, #0c0c0c 100%); animation: catSheen 18s ease-in-out infinite; } .hv-cat__lines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 96px); } .hv-cat__band { position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%); filter: blur(40px); animation: catBand 11s ease-in-out infinite; } .hv-cat__grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } @keyframes catSheen { 0% { transform: translate3d(-20%, -10%, 0) scale(1.08); } 50% { transform: translate3d(6%, 4%, 0) scale(1.12); } 100% { transform: translate3d(-20%, -10%, 0) scale(1.08); } } @keyframes catBand { 0% { transform: translateX(-30%); opacity: 0; } 40% { opacity: 0.45; } 100% { transform: translateX(130%); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hv-cat__sheen, .hv-cat__band { animation: none; } } .hv-fol { background: #ffffff; min-height: 100%; } .hv-fol__main { max-width: 100%; margin: 0 auto; padding-top: 6px; padding-bottom: 96px; } .hv-fol__post { padding: 20px 0 8px; } .hv-fol__head { display: flex; align-items: flex-start; gap: 12px; padding: 0 16px; margin-bottom: 14px; } .hv-fol__avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; background: #f1efe8; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, 0.06); overflow: hidden; } .hv-fol__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .hv-fol__meta { min-width: 0; } .hv-fol__name-row { display: flex; align-items: center; gap: 6px; } .hv-fol__name { font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: 17px; color: var(--h-ink); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-fol__verified { width: 16px; height: 16px; flex: 0 0 auto; } .hv-fol__desc { margin: 3px 0 0; font-family: var(--font-kr); font-size: 15px; color: var(--h-ink-2); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hv-fol__arrows { display: none; } .hv-fol__arrow { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--h-ink-2); cursor: pointer; transition: background 160ms ease, color 160ms ease, transform 120ms ease; } .hv-fol__arrow:hover { background: rgba(0, 0, 0, 0.05); color: var(--h-ink); } .hv-fol__arrow:active { transform: scale(0.9); } .hv-fol__rail-wrap { position: relative; padding-left: 16px; } .hv-fol__rail { display: flex; gap: 10px; overflow-x: auto; padding-right: 16px; scroll-snap-type: x mandatory; } .hv-fol__cover { display: block; position: relative; flex: 0 0 auto; cursor: pointer; width: 82%; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #e5e5e5; scroll-snap-align: start; } .hv-fol__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hv-fol__sug { margin-top: 22px; } .hv-fol__sug-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 14px; } .hv-fol__sug-title { margin: 0; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: 22px; letter-spacing: -0.02em; color: var(--h-ink); } .hv-fol__sug-all { font-family: var(--font-en); font-size: 14px; font-weight: var(--h-fw-sb); color: var(--h-ink-3); text-decoration: none; } .hv-fol__sug-wrap { padding-left: 16px; position: relative; } .hv-fol__sug-arrows { display: none; } .hv-fol__sug-rail { display: flex; gap: 10px; overflow-x: auto; padding-right: 16px; } .hv-fol__sug-card { display: block; flex: 0 0 auto; width: 130px; cursor: pointer; text-decoration: none; } .hv-fol__sug-thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #e5e5e5; } .hv-fol__sug-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hv-fol__sug-name { margin: 10px 0 0; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: 14px; color: var(--h-ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-fol__sug-sub { margin: 2px 0 0; font-family: var(--font-kr); font-size: 12px; color: var(--h-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-fol__sentinel { height: 1px; } .hv-fol__fade { position: sticky; bottom: 0; height: 0; z-index: 20; pointer-events: none; } .hv-fol__fade-inner { position: absolute; left: 0; right: 0; bottom: 0; height: 88px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.82) 100%); } @media (min-width: 768px) { .hv-fol__main { max-width: 760px; padding-top: 12px; padding-bottom: 64px; } .hv-fol__post { padding: 26px 0 10px; } .hv-fol__head { padding: 0 24px; margin-bottom: 16px; } .hv-fol__avatar { width: 48px; height: 48px; } .hv-fol__name { font-size: 18px; } .hv-fol__verified { width: 17px; height: 17px; } .hv-fol__desc { font-size: 16px; } .hv-fol__arrows { display: flex; margin-left: auto; align-items: center; gap: 6px; align-self: flex-start; } .hv-fol__rail-wrap { padding-left: 24px; } .hv-fol__rail { gap: 12px; padding-right: 24px; } .hv-fol__cover { width: 440px; } .hv-fol__sug { margin-top: 30px; } .hv-fol__sug-head { padding: 0 24px 18px; } .hv-fol__sug-title { font-size: 26px; } .hv-fol__sug-all { font-size: 15px; } .hv-fol__sug-wrap { padding-left: 24px; } .hv-fol__sug-arrows { display: block; } .hv-fol__sug-rail { gap: 12px; padding-right: 24px; } .hv-fol__sug-card { width: 156px; } .hv-fol__sug-name { font-size: 15px; } .hv-fol__fade-inner { height: 104px; } } .hv-event { background: var(--h-bg); color: var(--h-ink); } .hv-event__hero { position: relative; } .hv-event__hero, .hv-event__hero-img { aspect-ratio: 16 / 9; width: 100%; } .hv-event__hero { overflow: hidden; } .hv-event__hero-img { display: block; height: 100%; object-fit: cover; } .hv-event__hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1) 50%, transparent); } .hv-event__hero-copy { position: absolute; bottom: 32px; left: 24px; right: 24px; color: #ffffff; } .hv-event__tag { margin: 0; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: var(--h-track-wider); text-transform: uppercase; color: rgba(255, 255, 255, 0.8); } .hv-event__title { margin: 0; font-size: var(--h-fs-display-m); font-weight: var(--h-fw-sb); line-height: 1.05; letter-spacing: var(--h-track-tight); color: inherit; } .hv-event__title--plain { color: var(--h-ink); margin-bottom: 24px; } .hv-event__promo { margin: 12px 0 0; font-size: var(--h-fs-body); line-height: normal; color: rgba(255, 255, 255, 0.9); } .hv-event__body { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 24px var(--hv-inset) 80px; } .hv-event__coupons { margin-bottom: 32px; padding: 16px 0; border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); } .hv-event__coupons-head { margin: 0 0 12px; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: var(--h-track-wider); text-transform: uppercase; color: var(--h-ink-3); } .hv-event__coupon-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; } .hv-event__coupon { border: 1px solid var(--h-line); padding: 8px 12px; font-size: var(--h-fs-body); line-height: normal; } .hv-event__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .hv-event__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 160px; } .hv-event__empty-text { margin: 0; font-size: var(--h-fs-body); color: var(--h-ink-3); } .hv-event__retry { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--h-ink); border-radius: var(--h-radius-btn); background: var(--h-bg); color: var(--h-ink); font: inherit; font-size: var(--h-fs-btn); cursor: pointer; } @media (min-width: 768px) { .hv-event__hero, .hv-event__hero-img { aspect-ratio: 21 / 9; } .hv-event__hero-copy { bottom: 64px; left: 64px; right: 64px; max-width: 672px; } .hv-event__title { font-size: 44px; } .hv-event__body { padding: 40px var(--hv-inset) 120px; } .hv-event__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } @media (min-width: 1024px) { .hv-event__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .hv-focus { background: #0a0a0a; color: #ffffff; } .page[data-havea-fullbleed] .l-content { max-width: none; } .hv-focus--notice { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--h-bg); color: var(--h-ink); } .hv-focus__notice { text-align: center; max-width: 448px; } .hv-focus__notice-title { margin: 12px 0 0; font-size: var(--h-fs-display-m); font-weight: var(--h-fw-sb); line-height: 1.05; letter-spacing: var(--h-track-tight); } .hv-focus__notice-body { margin: 16px 0 0; font-size: var(--h-fs-body); line-height: normal; color: var(--h-ink-3); } .hv-focus__container { width: 100%; max-width: var(--h-container); margin: 0 auto; } .hv-focus__eyebrow { margin: 0; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: 11px; letter-spacing: var(--h-track-wider); } .hv-focus__eyebrow--light { color: #888888; } .hv-focus__eyebrow--dim { color: rgba(255, 255, 255, 0.4); } .hv-focus__hero { min-height: 94vh; padding: 40px 16px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .hv-focus__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; z-index: 0; } .hv-focus__ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(280px, 44vw, 820px); letter-spacing: -0.06em; color: #ffffff; line-height: 0.85; } .hv-focus__hero-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; position: relative; } .hv-focus__hero-kicker { margin: 0; font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); color: rgba(255, 255, 255, 0.5); } .hv-focus__hero-sub { margin: 0; font-family: var(--font-en); font-size: 12px; letter-spacing: var(--h-track-wider); color: rgba(255, 255, 255, 0.55); } .hv-focus__hero-title { margin: 28px 0 0; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(72px, 13vw, 232px); letter-spacing: -0.05em; line-height: 0.86; } .hv-focus__hero-tagline { margin: 28px 0 0; font-size: 22px; font-weight: var(--h-fw-m); letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.82); max-width: 560px; } .hv-focus__scroll { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.5); } .hv-focus__scroll-label { font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); } .hv-focus__scroll-bar { display: inline-block; width: 1px; height: 40px; background: #ffffff; transform-origin: top; animation: fcsBob 1.6s ease-in-out infinite; } @keyframes fcsBob { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.35); } } .hv-focus__statement { background: #f5f5f5; color: #0a0a0a; height: 200vh; position: relative; } .hv-focus__statement-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 24px; } .hv-focus__statement-copy { margin: 32px 0 0; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(48px, 7.5vw, 132px); letter-spacing: -0.035em; line-height: 1.02; } .hv-focus__statement-note { margin: 40px 0 0; font-size: 17px; line-height: 1.65; color: #444444; max-width: 540px; } .hv-focus__numbers { padding: 88px 16px; background: #0a0a0a; color: #ffffff; border-top: 1px solid rgba(255, 255, 255, 0.06); } .hv-focus__numbers-title { margin: 40px 0 112px; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(48px, 5.5vw, 88px); letter-spacing: -0.03em; line-height: 1; } .hv-focus__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; row-gap: 32px; } .hv-focus__stat-value { margin: 0; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(76px, 7vw, 144px); letter-spacing: -0.04em; line-height: 0.88; font-variant-numeric: tabular-nums; } .hv-focus__stat-label { margin: 12px 0 0; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.55); font-weight: var(--h-fw-sb); } .hv-focus__stat-sub { margin: 4px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.5); } .hv-focus__studio, .hv-focus__lookbook { padding: 88px 16px; background: #f5f5f5; color: #0a0a0a; } .hv-focus__studio-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 28px; align-items: flex-start; } .hv-focus__studio-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 20px; aspect-ratio: 4 / 5; } .hv-focus__studio-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .hv-focus__studio-ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(160px, 36vw, 280px); letter-spacing: -0.04em; color: #ffffff; line-height: 0.85; } .hv-focus__studio-meta { margin: 0; position: relative; font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); font-weight: var(--h-fw-b); opacity: 0.8; } .hv-focus__studio-name { margin: 0; position: relative; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: 32px; letter-spacing: -0.03em; line-height: 1; opacity: 0.95; } .hv-focus__studio-title { margin: 0; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(40px, 4vw, 60px); letter-spacing: -0.03em; line-height: 1.05; } .hv-focus__studio-body { margin: 28px 0 0; font-size: 17px; line-height: 1.85; color: #3a3a3a; } .hv-focus__studio-dl { margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 24px 0; border-top: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .hv-focus__studio-dt { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.2em; color: #999999; } .hv-focus__studio-dd { margin: 4px 0 0; font-family: var(--font-en); font-weight: var(--h-fw-sb); font-size: 14px; letter-spacing: 0.02em; } .hv-focus__series { padding: 88px 16px; background: #0a0a0a; color: #ffffff; } .hv-focus__series-title, .hv-focus__lookbook-title { margin: 40px 0 88px; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(48px, 5.5vw, 88px); letter-spacing: -0.03em; line-height: 1; } .hv-focus__series-grid { display: grid; grid-template-columns: 1fr; gap: 28px; } .hv-focus__series-link { display: block; color: inherit; text-decoration: none; } .hv-focus__series-card { position: relative; display: flex; align-items: flex-end; overflow: hidden; padding: 20px; aspect-ratio: 4 / 5; } .hv-focus__series-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.62; } .hv-focus__series-ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(140px, 32vw, 260px); letter-spacing: -0.06em; color: #ffffff; line-height: 0.85; } .hv-focus__series-cat { position: relative; font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); font-weight: var(--h-fw-b); opacity: 0.85; } .hv-focus__series-date { margin: 0; font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); color: rgba(255, 255, 255, 0.5); } .hv-focus__series-name { margin: 10px 0 0; font-size: 22px; font-weight: var(--h-fw-m); letter-spacing: -0.01em; line-height: 1.3; } .hv-focus__lookbook-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; row-gap: 56px; } .hv-focus__visit { position: relative; overflow: hidden; padding: 96px 16px; } .hv-focus__visit-ghost { position: absolute; right: 40px; bottom: -100px; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(320px, 36vw, 640px); letter-spacing: -0.06em; color: #ffffff; opacity: 0.08; line-height: 0.82; } .hv-focus__visit-title { margin: 40px 0 56px; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(80px, 9vw, 168px); letter-spacing: -0.045em; line-height: 0.9; } .hv-focus__visit-cta, .hv-focus__next-cta { display: inline-block; background: #ffffff; padding: 20px 40px; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: 14px; letter-spacing: var(--h-track-wider); border-radius: var(--h-radius-btn); text-decoration: none; } .hv-focus__archive { padding: 64px 16px 96px; background: #f5f5f5; color: #0a0a0a; } .hv-focus__next { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin: 32px 0 104px; padding: 56px 24px; } .hv-focus__next-ghost { position: absolute; right: -24px; top: -24px; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(180px, 26vw, 400px); letter-spacing: -0.06em; color: #ffffff; opacity: 0.08; line-height: 0.82; } .hv-focus__next-kicker { margin: 0; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.2em; opacity: 0.7; } .hv-focus__next-title { margin: 14px 0 0; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(56px, 6vw, 104px); letter-spacing: -0.04em; line-height: 0.9; } .hv-focus__next-sub { margin: 14px 0 0; font-size: 17px; opacity: 0.85; } .hv-focus__next-cta { align-self: end; padding: 14px 22px; font-size: 11px; position: relative; } .hv-focus__past-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 20px; } .hv-focus__past-title { margin: 0; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: 32px; letter-spacing: -0.02em; } .hv-focus__past-sub { margin: 0; font-size: 12px; color: #888888; } .hv-focus__past-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #0a0a0a; } .hv-focus__past-row { display: grid; grid-template-columns: 100px 1fr 1fr 100px 70px; gap: 12px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .hv-focus__past-no { font-family: var(--font-en); font-size: 11px; color: #888888; letter-spacing: 0.1em; } .hv-focus__past-name { font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: 24px; letter-spacing: -0.02em; } .hv-focus__past-meta { font-size: 13px; color: #666666; } .hv-focus__past-view { text-align: right; font-family: var(--font-en); font-size: 11px; letter-spacing: var(--h-track-wider); font-weight: var(--h-fw-sb); color: inherit; text-decoration: none; } @media (min-width: 768px) { .hv-focus__hero { padding: 64px 40px 48px; } .hv-focus__numbers, .hv-focus__studio, .hv-focus__series, .hv-focus__lookbook { padding: 160px 40px; } .hv-focus__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hv-focus__studio-grid { grid-template-columns: 1.1fr 1fr; gap: 88px; margin-top: 56px; } .hv-focus__studio-card { padding: 32px; } .hv-focus__series-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .hv-focus__lookbook-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; row-gap: 56px; } .hv-focus__visit { padding: 176px 40px; } .hv-focus__archive { padding: 128px 40px 160px; } .hv-focus__next { padding: 56px 64px; } .hv-focus__statement-sticky { padding: 0 80px; } } @media (prefers-reduced-motion: reduce) { .hv-focus__scroll-bar { animation: none; } } .hc { background: var(--h-bg); color: var(--h-ink); } .hc__fallback { padding: 64px var(--hv-inset); } .hc-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 12px var(--hv-inset); background: var(--h-surface); color: var(--h-ink-2); font-size: var(--h-fs-body-sm); } .hc-notice__retry { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--h-ink); border-radius: var(--h-radius-btn); background: var(--h-bg); color: var(--h-ink); font: inherit; font-size: var(--h-fs-btn); cursor: pointer; } .hc-section { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 56px var(--hv-inset); } .hc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .hc-head--tight { margin-bottom: 16px; } .hc-head__main { min-width: 0; } .hc-head__title { margin: 0; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-family: var(--font-en); font-size: var(--h-fs-h2); font-weight: var(--h-fw-sb); letter-spacing: var(--h-track-tight); } .hc-head__count { font-family: var(--font-en); font-size: var(--h-fs-body-sm); font-weight: var(--h-fw-m); color: var(--h-ink-3); font-variant-numeric: tabular-nums; } .hc-head__sub { margin: 4px 0 0; font-size: var(--h-fs-body-sm); color: var(--h-ink-2); } .hc-head__all { display: none; font-family: var(--font-en); font-size: var(--h-fs-caption); font-weight: var(--h-fw-m); letter-spacing: var(--h-track-wider); text-transform: uppercase; color: var(--h-ink); text-decoration: none; flex-shrink: 0; } .hc-head__all:hover { opacity: 0.6; } .hc-rail-wrap { position: relative; } .hc-rail { display: flex; gap: 12px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; } .hc-rail__item { flex-shrink: 0; scroll-snap-align: start; width: clamp(156px, 22vw, 240px); } .hc-rail__item--display { width: 42%; } .hc-hero { position: relative; height: 100vh; min-height: 480px; margin-top: -44px; background: #0e0e0c; color: #ffffff; overflow: hidden; } .hc-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hc-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; } .hc-hero__frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100vh; border: 0; pointer-events: none; } .hc-hero__ph { position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 20%, #2a2a28 0%, rgba(42, 42, 40, 0) 60%), radial-gradient(120% 90% at 80% 90%, #1a1c22 0%, rgba(26, 28, 34, 0) 55%), linear-gradient(135deg, #15140f 0%, #23211b 50%, #14161c 100%); background-size: 180% 180%, 180% 180%, 200% 200%; animation: heroVidShift 16s ease-in-out infinite; } @keyframes heroVidShift { 0% { background-position: 0% 0%, 100% 100%, 0% 50%; } 50% { background-position: 40% 30%, 60% 70%, 100% 50%; } 100% { background-position: 0% 0%, 100% 100%, 0% 50%; } } @media (prefers-reduced-motion: reduce) { .hc-hero__ph { animation: none; } } .hc-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.72) 100%); } .hc-hero__tap { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; z-index: 2; background: transparent; border: 0; padding: 0; cursor: pointer; } .hc-hero__title-wrap { position: absolute; z-index: 3; pointer-events: none; left: 20px; right: 20px; bottom: 92px; } .hc-hero__title { margin: 0; font-family: var(--font-kr); font-size: 26px; font-weight: var(--h-fw-b); letter-spacing: -0.02em; line-height: 1.2; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4); } .hc-hero__counter { position: absolute; z-index: 3; pointer-events: none; right: 20px; bottom: 96px; display: flex; align-items: center; justify-content: center; min-width: 52px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(20, 20, 20, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.22); font-family: var(--font-en); font-weight: var(--h-fw-sb); font-size: 13px; color: rgba(255, 255, 255, 0.92); letter-spacing: 0.02em; } .hc-hero__counter-sep { opacity: 0.45; margin: 0 6px; } .hc-coupon { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0; padding: 16px; background: var(--h-bg); border-radius: var(--h-radius-card); } .hc-coupon__left { display: flex; align-items: center; gap: 14px; } .hc-coupon__amount { font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: 22px; letter-spacing: -0.02em; } .hc-coupon__label { margin: 0; font-family: var(--font-en); font-weight: var(--h-fw-sb); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .hc-coupon__sub { margin: 2px 0 0; font-size: 11px; color: var(--h-ink-2); } .hc-coupon__tag { background: var(--h-ink); color: var(--h-bg); padding: 4px 10px; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.14em; } .hc-cat__grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .hc-cat__card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--h-radius-card); background: var(--h-bg-product); color: #ffffff; text-decoration: none; } .hc-cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hc-cat__ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(72px, 14vw, 160px); letter-spacing: -0.04em; color: rgba(0, 0, 0, 0.07); } .hc-cat__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%); } .hc-cat__body { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: 20px; display: block; } .hc-cat__label { display: block; font-family: var(--font-en); font-size: clamp(22px, 2.2vw, 36px); font-weight: var(--h-fw-b); letter-spacing: -0.035em; line-height: 1.1; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); } .hc-cat__cta { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 12px 16px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--h-radius-btn); font-size: 13px; font-weight: var(--h-fw-sb); } .hc-sbc__title { margin: 0 0 24px; font-size: var(--h-fs-h3); line-height: 1.4; font-weight: var(--h-fw-sb); } .hc-sbc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .hc-sbc__card { display: block; color: inherit; text-decoration: none; } .hc-sbc__thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--h-bg-product); } .hc-sbc__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hc-sbc__label { margin: 12px 0 0; font-size: var(--h-fs-body); text-transform: uppercase; } .hc-brand__hero { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--h-radius-card); background: var(--h-bg-product); margin-bottom: 20px; color: #ffffff; text-decoration: none; } .hc-brand__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hc-brand__ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(140px, 18vw, 320px); letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.06); } .hc-brand__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%); } .hc-brand__badge { position: absolute; z-index: 1; top: clamp(16px, 3vw, 32px); left: clamp(20px, 4vw, 40px); background: #000000; color: #ffffff; padding: 4px 10px; font-family: var(--font-en); font-size: 11px; font-weight: var(--h-fw-b); letter-spacing: var(--h-track-wider); text-transform: uppercase; } .hc-brand__bottom { position: absolute; z-index: 1; left: clamp(20px, 4vw, 40px); right: clamp(20px, 4vw, 40px); bottom: clamp(20px, 4vw, 40px); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .hc-brand__en { display: block; font-family: var(--font-en); font-size: clamp(36px, 6vw, 88px); font-weight: var(--h-fw-b); letter-spacing: -0.025em; line-height: 1; } .hc-brand__kr { display: block; margin-top: 6px; font-size: 13px; opacity: 0.85; } .hc-brand__cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--h-radius-btn); font-size: 13px; font-weight: var(--h-fw-sb); } .hc-teaser { padding: 56px 0; background: #000000; color: #ffffff; } .hc-teaser__inner { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 0 var(--hv-inset); } .hc-teaser__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; } .hc-teaser__title { margin: 0; font-family: var(--font-en); font-weight: var(--h-fw-b); font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; } .hc-teaser__count { font-weight: var(--h-fw-m); color: rgba(255, 255, 255, 0.6); font-size: 14px; margin-left: 12px; } .hc-teaser__all { display: none; font-family: var(--font-en); font-size: var(--h-fs-btn); font-weight: var(--h-fw-sb); letter-spacing: var(--h-track-wider); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--h-radius-btn); padding: 10px 18px; text-decoration: none; } .hc-teaser__list { font-family: var(--font-en); font-weight: var(--h-fw-m); font-size: clamp(28px, 5vw, 72px); letter-spacing: -0.02em; line-height: 1.25; } .hc-teaser__item { display: inline-block; margin-right: clamp(12px, 1.5vw, 24px); color: inherit; text-decoration: none; transition: color 160ms var(--h-ease); } .hc-teaser__item:hover { color: rgba(255, 255, 255, 0.7); } .hc-teaser__kr { font-family: var(--font-kr); font-weight: var(--h-fw-m); } .hc-mag__grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .hc-mag__card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--h-radius-card); background: var(--h-bg-product); color: #ffffff; text-decoration: none; } .hc-mag__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hc-mag__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%); } .hc-mag__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 20px; } .hc-mag__cat { align-self: flex-start; font-family: var(--font-en); font-size: var(--h-fs-caption); letter-spacing: var(--h-track-wider); text-transform: uppercase; } .hc-mag__title { font-size: var(--h-fs-body); font-weight: var(--h-fw-sb); line-height: 1.4; } .hc-happy { padding: 48px 0 64px; background: var(--h-surface); } .hc-happy__inner { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 0 var(--hv-inset); } .hc-row--hot { padding-top: 56px; padding-bottom: 40px; } .hc-events__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; } .hc-events__card { display: block; color: inherit; text-decoration: none; } .hc-events__thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--h-bg-product); } .hc-events__thumb--wide { aspect-ratio: 4 / 3; } .hc-events__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hc-events__tag { display: inline-flex; align-items: center; margin-top: 12px; padding: 4px 12px; border: 1px solid var(--h-line); border-radius: 999px; font-size: var(--h-fs-caption); text-transform: uppercase; } .hc-events__label { margin: 12px 0 0; font-size: var(--h-fs-body); font-weight: var(--h-fw-sb); text-transform: uppercase; } .hc-events__promo { margin: 8px 0 0; font-size: var(--h-fs-caption); line-height: 1.5; color: var(--h-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hc-events__more { margin: 12px 0 0; font-size: var(--h-fs-caption); text-decoration: underline; text-underline-offset: 4px; } .hc-display { padding: 64px 0; } .hc-display__inner { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 0 var(--hv-inset); } .hc-display__promo { margin: -8px 0 24px; font-size: var(--h-fs-body); color: var(--h-ink-2); } .hc-display__explain { margin: 0 0 24px; font-size: var(--h-fs-caption); color: var(--h-ink-3); } .hc-display__banner { position: relative; aspect-ratio: 5 / 1; width: 100%; overflow: hidden; margin-bottom: 32px; } .hc-display__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hc-display__grid { display: grid; gap: 16px 16px; row-gap: 40px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-display__grid--one { grid-template-columns: 1fr; } @media (min-width: 768px) { .hc-section { padding: 88px var(--h-gutter-lg); } .hc-hero { margin-top: -72px; } .hc-head__all, .hc-teaser__all { display: inline-flex; } .hc-hero__tap { top: 72px; } .hc-hero__title-wrap { left: 40px; right: 40px; bottom: 40px; } .hc-hero__title { font-size: 38px; } .hc-hero__counter { right: 40px; bottom: 44px; min-width: 60px; height: 34px; font-size: 14px; } .hc-rail { gap: 16px; } .hc-rail__item--display { width: 26%; } .hc-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .hc-cat__card { aspect-ratio: 4 / 3; } .hc-cat__body { padding: 32px; } .hc-sbc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hc-brand__hero { aspect-ratio: 21 / 8; margin-bottom: 32px; } .hc-teaser { padding: 88px 0; } .hc-teaser__inner { padding: 0 var(--h-gutter-lg); } .hc-mag__grid { grid-template-columns: 1.6fr 1fr 1fr; } .hc-mag__card--lead { grid-row: span 2; } .hc-mag__card { aspect-ratio: auto; min-height: 260px; } .hc-mag__card--lead { aspect-ratio: 4 / 5; } .hc-happy { padding: 64px 0 88px; } .hc-happy__inner, .hc-display__inner { padding: 0 var(--h-gutter-lg); } .hc-row--hot { padding-top: 88px; padding-bottom: 40px; } .hc-events__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hc-events__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hc-display { padding: 96px 0; } .hc-display__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hc-display__grid--one { grid-template-columns: 1fr; } .hc-display__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .hc-events__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hc-display__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hc-display__grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hc-display__grid--six { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hc-rail__item--display { width: 19%; } } html[data-havea-notfound='true'] .page__content.site > *:not(.l-content) { display: none !important; } html[data-havea-notfound='true'] .l-content { max-width: none; } .hv-nf { min-height: 60vh; background: var(--h-bg); color: var(--h-ink); } .hv-nf__container { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 24px var(--hv-inset) 80px; } .hv-nf__wrap { width: 100%; max-width: 768px; margin: 0 auto; } .hv-nf__head { text-align: center; } .hv-nf__code { margin: 0; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; text-transform: uppercase; color: rgb(107, 114, 128); } .hv-nf__title { margin: 8px 0 0; white-space: pre-line; font-family: var(--font-en); font-size: var(--h-fs-display-m); font-weight: var(--h-fw-sb); line-height: 1.05; letter-spacing: var(--h-track-tight); } .hv-nf__body { margin: 16px 0 0; font-size: var(--h-fs-body); line-height: normal; letter-spacing: 0.15px; color: rgb(75, 85, 99); } .hv-nf__ctas { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; } .hv-nf__suggest { margin-top: 64px; } .hv-nf__suggest-title { margin: 0 0 24px; text-align: center; font-size: var(--h-fs-h3); font-weight: var(--h-fw-b); line-height: 20px; letter-spacing: 0.6px; text-transform: uppercase; } .hv-nf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .hv-nf__card { display: block; color: inherit; text-decoration: none; } .hv-nf__thumb { position: relative; aspect-ratio: 4 / 5; width: 100%; overflow: hidden; } .hv-nf__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } .hv-nf__card:hover .hv-nf__thumb img { transform: scale(1.05); } .hv-nf__name { margin: 8px 0 0; font-size: var(--h-fs-body); line-height: 1.25; letter-spacing: 0.15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hv-nf__price { margin: 4px 0 0; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: rgb(75, 85, 99); } @media (min-width: 640px) { .hv-nf__ctas { flex-direction: row; justify-content: center; } } @media (min-width: 768px) { .hv-nf__container { padding: 40px var(--hv-inset) 120px; } .hv-nf__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .hv-od { background: var(--h-bg); color: var(--h-ink); } .hv-od__hero { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 40px var(--hv-inset) 24px; } .hv-od__back { color: inherit; text-decoration: none; } .hv-od__eyebrow { margin: 16px 0 0; } .hv-od__title { margin: 8px 0 0; font-family: var(--font-en); font-size: clamp(28px, 4vw, 56px); font-weight: 700; letter-spacing: -0.025em; line-height: 1; } .hv-od__body { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 0 var(--hv-inset) 80px; } .hv-od__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } .hv-od__h2 { margin: 0 0 12px; } .hv-od__h2--rule { padding-bottom: 8px; border-bottom: 2px solid var(--h-ink); } .hv-od__h2--gap { margin-top: 32px; } .hv-od__list { margin: 0; padding: 0; list-style: none; } .hv-od__item { padding: 16px 0; } .hv-od__item + .hv-od__item { border-top: 1px solid var(--h-line); } .hv-od__item-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .hv-od__product { font-size: var(--h-fs-body); line-height: normal; letter-spacing: 0.15px; color: inherit; text-decoration: none; text-underline-offset: 4px; } .hv-od__meta { margin: 4px 0 0; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: rgb(107, 114, 128); } .hv-od__status { display: inline-block; margin-top: 4px; padding: 2px 8px; border: 1px solid var(--h-line-strong); border-radius: 9999px; background: #ffffff; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: var(--h-ink); } .hv-od__status[data-tone='point'] { border-color: var(--h-point); color: var(--h-point); } .hv-od__status[data-tone='muted'] { border-color: var(--h-line); color: var(--h-ink-3); } .hv-od__review { margin-top: 12px; } .hv-cf-entry { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .hv-cf-entry__btn { border: 0; background: none; padding: 0; font-family: inherit; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: var(--h-ink); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .hv-cf-entry__ok { margin: 0; padding: 6px 12px; border: 1px solid #bbf7d0; border-radius: 4px; background: #f0fdf4; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: #15803d; } .hv-cf-entry__partial { margin: 0; padding: 6px 12px; border: 1px solid var(--h-line); border-radius: 4px; background: var(--h-surface); font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: var(--h-ink-2); text-align: right; white-space: pre-line; } .hv-cf { width: 100%; max-width: 420px; padding: 16px; border-radius: 12px; background: var(--h-surface); } .hv-cf > :not([hidden]) ~ :not([hidden]) { margin-top: 16px; } .hv-cf__head { display: flex; align-items: center; justify-content: space-between; } .hv-cf__legend { color: var(--h-ink-2); } .hv-cf__close { min-height: 32px; border: 0; background: none; padding: 0; font-family: inherit; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: var(--h-ink-2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .hv-cf__close:disabled { opacity: 0.5; cursor: not-allowed; } .hv-cf__types { margin: 0; padding: 0; border: 0; } .hv-cf__label { display: block; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; text-transform: uppercase; color: var(--h-ink-3); } .hv-cf__hint { text-transform: none; letter-spacing: 0; } .hv-cf__chips { display: flex; gap: 6px; margin-top: 8px; } .hv-cf__chip { min-height: 44px; padding: 0 18px; border: 1px solid var(--h-line); border-radius: 999px; background: var(--h-bg); color: var(--h-ink); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 160ms var(--h-ease), color 160ms var(--h-ease); } .hv-cf__chip[aria-pressed='true'] { border-color: var(--h-ink); background: var(--h-ink); color: var(--h-bg); } .hv-cf__select, .hv-cf__input { margin-top: 4px; background: var(--h-bg); } .hv-cf__textarea { width: 100%; margin-top: 4px; padding: 8px 12px; border: 1px solid var(--h-line); border-radius: 8px; background: var(--h-bg); color: var(--h-ink); font-family: inherit; font-size: 16px; } .hv-cf__account > :not([hidden]) ~ :not([hidden]) { margin-top: 8px; } .hv-cf__notice { .hv-cf__collect > :not([hidden]) ~ :not([hidden]) { margin-top: 8px; } .hv-cf__ways { display: flex; gap: 12px; margin-top: 8px; } .hv-cf__way { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; cursor: pointer; } .hv-cf__way input { accent-color: var(--h-ink); } .hv-cf__collect-fields > :not([hidden]) ~ :not([hidden]) { margin-top: 8px; } margin: 0; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: var(--h-ink-3); white-space: pre-wrap; } .hv-cf__error { margin: 0; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: var(--h-warn); } .hv-cf__est { margin: 0; padding: 12px; border-radius: 8px; background: var(--h-bg); } .hv-cf__est-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; color: var(--h-ink-2); } .hv-cf__est-row dd, .hv-cf__est-sum dd { margin: 0; font-variant-numeric: tabular-nums; } .hv-cf__est-sum { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 2px solid var(--h-ink); font-size: 15px; font-weight: 700; } .hv-cf__est-remarks { margin: 8px 0 0; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: var(--h-ink-3); white-space: pre-wrap; } .hv-cf__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 4px; } .hv-cf__actions button:disabled { cursor: not-allowed; } .hv-od__dl { margin: 0; font-size: var(--h-fs-body); line-height: normal; letter-spacing: 0.15px; } .hv-od__dl > :not([hidden]) ~ :not([hidden]) { margin-top: 8px; } .hv-od__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .hv-od__row dd { margin: 0; } .hv-od__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 2px solid var(--h-ink); } .hv-od__dl > .hv-od__sum:not([hidden]) { margin-top: 10px; } .hv-od__sum-amt { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } .hv-od__addr { margin: 0; font-size: var(--h-fs-body); line-height: normal; letter-spacing: 0.15px; } .hv-od__addr-detail { margin: 4px 0 0; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: rgb(75, 85, 99); } .hv-od__invoice { margin: 8px 0 0; font-size: var(--h-fs-caption); line-height: normal; letter-spacing: 0.15px; color: rgb(107, 114, 128); } @media (min-width: 768px) { .hv-od__hero { padding-top: 80px; } .hv-od__body { padding-bottom: 120px; } .hv-od__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hv-od__products { grid-column: span 2 / span 2; } .hv-od__aside { grid-column: span 1 / span 1; } } .h-char-img { transform-origin: bottom center; will-change: transform; } .h-idle-breathe { animation: h-char-breathe 3.4s ease-in-out infinite; } .h-idle-rock { animation: h-idle-rock 2.6s ease-in-out infinite; } .h-idle-perk { animation: h-idle-perk 3.4s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; } .h-idle-snap { animation: h-idle-snap 3.2s steps(1, end) infinite; } .h-idle-heavy { animation: h-idle-heavy 3.6s cubic-bezier(0.6, 0, 0.3, 1) infinite; } .h-idle-flick { animation: h-idle-flick 1.6s ease-in-out infinite; transform-origin: 50% 85%; } .h-idle-floaty { animation: h-idle-floaty 4.4s ease-in-out infinite; } .h-idle-flap { animation: h-idle-flap 3.4s ease-in-out infinite; } .h-idle-rustle { animation: h-idle-rustle 3.2s ease-in-out infinite; } .h-idle-pour { animation: h-idle-pour 4s ease-in-out infinite; transform-origin: 42% 78%; } .h-idle-spring { animation: h-idle-spring 2.4s cubic-bezier(0.28, 0.84, 0.42, 1) infinite; } @keyframes h-char-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(0.992, 1.022); } } @keyframes h-idle-rock { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-16deg); } 24% { transform: rotate(13deg); } 38% { transform: rotate(-20deg); } 44% { transform: rotate(-18deg); } 54% { transform: rotate(8deg) translateY(-12%); } 64% { transform: rotate(-5deg) translateY(0); } 72% { transform: rotate(3deg) translateY(-6%); } 82% { transform: rotate(-1.5deg); } } @keyframes h-idle-perk { 0%, 100% { transform: scale(1, 1); } 18% { transform: scale(1.14, 0.78); } 36% { transform: scale(0.82, 1.3) translateY(-9%); } 48% { transform: scale(1.12, 0.86); } 60% { transform: scale(0.92, 1.12) translateY(-4%); } 72% { transform: scale(1.06, 0.95); } 84% { transform: scale(0.98, 1.02); } } @keyframes h-idle-snap { 0% { transform: rotate(0) translateY(0); } 10% { transform: rotate(-14deg); } 22% { transform: rotate(14deg); } 34% { transform: rotate(-14deg) translateY(-10%); } 46% { transform: rotate(14deg) translateY(-10%); } 58% { transform: rotate(0) translateY(0); } 100% { transform: rotate(0); } } @keyframes h-idle-heavy { 0%, 100% { transform: scale(1, 1); } 26% { transform: scale(1.22, 0.68); } 44% { transform: scale(0.88, 1.14) translateY(-8%); } 56% { transform: scale(1.12, 0.88); } 68% { transform: scale(0.96, 1.05); } 80% { transform: scale(1.02, 0.98); } } @keyframes h-idle-flick { 0%, 100% { transform: rotate(0) skewX(0); } 12% { transform: rotate(-8deg) skewX(-6deg); } 26% { transform: rotate(6deg) skewX(5deg); } 40% { transform: rotate(-4deg) skewX(-3deg); } 54% { transform: rotate(9deg) skewX(6deg); } 70% { transform: rotate(-6deg) skewX(-4deg); } 84% { transform: rotate(3deg) skewX(2deg); } } @keyframes h-idle-floaty { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(9%, -12%) rotate(2deg); } 45% { transform: translate(-3%, -20%) rotate(-1.5deg); } 70% { transform: translate(-9%, -9%) rotate(1deg); } } @keyframes h-idle-flap { 0%, 42%, 100% { transform: skewX(0) rotate(0); } 48% { transform: skewX(-16deg) rotate(-5deg) translateY(-8%); } 56% { transform: skewX(13deg) rotate(4deg); } 63% { transform: skewX(-10deg) rotate(-2.5deg) translateY(-4%); } 70% { transform: skewX(7deg); } 77% { transform: skewX(-4deg); } 84% { transform: skewX(0); } } @keyframes h-idle-rustle { 0%, 40%, 100% { transform: rotate(0); } 46% { transform: rotate(-18deg); } 54% { transform: rotate(12deg); } 61% { transform: rotate(-8deg); } 68% { transform: rotate(5.5deg); } 75% { transform: rotate(-3.5deg); } 82% { transform: rotate(2deg); } 89% { transform: rotate(-1deg); } } @keyframes h-idle-pour { 0%, 42%, 100% { transform: rotate(0); } 52% { transform: rotate(-24deg) translateY(-4%); } 72% { transform: rotate(-24deg); } 79% { transform: rotate(8deg); } 86% { transform: rotate(-5deg); } 93% { transform: rotate(2deg); } } @keyframes h-idle-spring { 0%, 100% { transform: scale(1, 1); } 12% { transform: scale(1.18, 0.76); } 28% { transform: translateY(-18%) scale(0.8, 1.35); } 40% { transform: scale(1.15, 0.82); } 52% { transform: translateY(-9%) scale(0.9, 1.14); } 63% { transform: scale(1.1, 0.9); } 73% { transform: translateY(-4%) scale(0.95, 1.06); } 82% { transform: scale(1.05, 0.97); } 90% { transform: scale(0.99, 1.01); } } .h-char-tap-bounce { animation: h-char-tapb 0.85s cubic-bezier(0.28, 0.84, 0.42, 1) 1 !important; } .h-char-tap-wiggle { animation: h-char-tapw 0.7s ease-in-out 1 !important; } .h-char-tap-spin { animation: h-char-taps 0.9s cubic-bezier(0.33, 0, 0.2, 1) 1 !important; transform-origin: 50% 58% !important; } @keyframes h-char-tapb { 0% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.12, 0.86); } 40% { transform: translateY(-22%) scale(0.94, 1.08); } 60% { transform: translateY(0) scale(1.08, 0.92); } 75% { transform: translateY(-9%) scale(0.98, 1.03); } 90% { transform: translateY(0) scale(1.03, 0.97); } 100% { transform: translateY(0) scale(1, 1); } } @keyframes h-char-tapw { 0% { transform: rotate(0); } 18% { transform: rotate(-11deg); } 40% { transform: rotate(9deg); } 62% { transform: rotate(-5deg); } 82% { transform: rotate(2.5deg); } 100% { transform: rotate(0); } } @keyframes h-char-taps { 0% { transform: translateY(0) rotate(0) scale(1, 1); } 20% { transform: translateY(-4%) rotate(0) scale(1.05, 0.9); } 65% { transform: translateY(-16%) rotate(360deg) scale(0.97, 1.02); } 85% { transform: translateY(0) rotate(360deg) scale(1.06, 0.94); } 100% { transform: translateY(0) rotate(360deg) scale(1, 1); } } .h-char-heart { position: absolute; top: 6%; transform: translateX(-50%); color: var(--h-ink, #141414); pointer-events: none; animation: h-char-heartup 0.9s ease-out forwards; } @keyframes h-char-heartup { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.5); } 18% { opacity: 1; transform: translate(-50%, -14%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -130%) scale(0.9); } } .h-stage { position: relative; overflow: hidden; touch-action: none; background: var(--h-surface, #f1efe9); transition: background 500ms ease; } .h-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 50% 42%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 72%); } .h-stage-corner { position: absolute; top: 12px; right: 14px; z-index: 5; font-size: 11px; font-weight: 800; color: var(--h-ink-3, #949494); font-variant-numeric: tabular-nums; } .h-stage-bubble { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 6; padding: 4px 10px; border-radius: 10px; background: #161513; color: #ffffff; font-size: 11.5px; font-weight: 800; white-space: nowrap; opacity: 0; transition: opacity 180ms linear; pointer-events: none; } .h-stage-shadow { position: absolute; left: 50%; bottom: 16px; width: 92px; height: 13px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.13); border-radius: 50%; filter: blur(1px); pointer-events: none; } .h-stage-pet { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); cursor: grab; will-change: transform; z-index: 4; } .h-stage-pet:active { cursor: grabbing; } .h-stage-pet--stroll { animation: h-stage-stroll 7.5s ease-in-out infinite; } @keyframes h-stage-stroll { 0%, 100% { margin-left: 0; } 25% { margin-left: -46px; } 50% { margin-left: 0; } 75% { margin-left: 46px; } } .h-hatch { isolation: isolate; } .h-hatch-img { transform-origin: bottom center; grid-area: 1 / 1; } .h-hatch-shake { animation: h-hatch-shake 1.1s ease-in-out 1; } @keyframes h-hatch-shake { 0% { transform: rotate(0deg) scale(1); } 12% { transform: rotate(-3deg) scale(1.01); } 24% { transform: rotate(3.5deg) scale(1.01); } 36% { transform: rotate(-5deg) scale(1.02); } 48% { transform: rotate(5.5deg) scale(1.02); } 60% { transform: rotate(-7deg) scale(1.03); } 72% { transform: rotate(7.5deg) scale(1.03); } 84% { transform: rotate(-5deg) scale(1.05); } 92% { transform: rotate(2deg) scale(1.08); } 100% { transform: rotate(0deg) scale(0.96); } } .h-hatch-pop { animation: h-hatch-pop 0.8s cubic-bezier(0.22, 1.2, 0.36, 1) 1; } @keyframes h-hatch-pop { 0% { transform: scale(0.72); opacity: 0.6; } 45% { transform: scale(1.14); opacity: 1; } 70% { transform: scale(0.97); } 100% { transform: scale(1); } } .h-hatch-ring { position: absolute; inset: 0; margin: auto; width: 40%; height: 40%; border-radius: 999px; border: 3px solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5), 0 0 34px 12px rgba(255, 236, 180, 0.9); animation: h-hatch-ring 0.62s ease-out 1 forwards; pointer-events: none; } @keyframes h-hatch-ring { 0% { transform: scale(0.25); opacity: 0; } 22% { opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } } .h-hatch-p { position: absolute; left: 50%; top: 50%; border-radius: 999px; animation: h-hatch-p 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) 1 both; pointer-events: none; } @keyframes h-hatch-p { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 18% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.9); opacity: 0; } } .h-evolve { isolation: isolate; } .h-evolve-old { transform-origin: bottom center; animation: h-evolve-flicker 1.4s steps(1) 1; } @keyframes h-evolve-flicker { 0% { filter: brightness(1); } 25% { filter: brightness(0); } 40% { filter: brightness(1); } 55% { filter: brightness(0); } 70% { filter: brightness(0.6); } 85% { filter: brightness(0); } 100% { filter: brightness(0); } } .h-evolve-dim { position: absolute; inset: -12px; border-radius: 16px; background: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, 0.55) 100%); animation: h-evolve-dim-in 1.4s ease-in 1 both; pointer-events: none; } @keyframes h-evolve-dim-in { from { opacity: 0; } to { opacity: 1; } } .h-evolve-ring { position: absolute; inset: 0; margin: auto; width: 44%; height: 44%; border-radius: 999px; border: 3px solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5), 0 0 34px 12px rgba(255, 236, 180, 0.9); animation: h-evolve-ring 0.55s ease-out 1 forwards; pointer-events: none; z-index: 1; } @keyframes h-evolve-ring { 0% { transform: scale(0.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } } .h-evolve-new { animation: h-evolve-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) 1; display: block; } @keyframes h-evolve-pop { 0% { transform: scale(0.6); opacity: 0; } 50% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } } .h-evolve-p { position: absolute; left: 50%; top: 50%; border-radius: 999px; animation: h-evolve-part 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) 1 both; pointer-events: none; } @keyframes h-evolve-part { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 18% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.9); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .h-char-img { animation: none !important; } .h-stage-pet--stroll { animation: none; } .h-hatch-shake, .h-hatch-pop, .h-hatch-ring, .h-hatch-p { animation: none !important; } .h-hatch-ring, .h-hatch-p { display: none; } .h-evolve-old, .h-evolve-dim, .h-evolve-ring, .h-evolve-new, .h-evolve-p { animation: none !important; } .h-evolve-dim, .h-evolve-ring, .h-evolve-p { display: none; } } .hv-oc__char-cta { background: var(--h-surface, #f4f4f4); margin-top: 12px; display: flex; align-items: center; gap: 16px; border-radius: 8px; padding: 16px; text-align: left; color: inherit; text-decoration: none; } .hv-oc__char-cta-text { min-width: 0; flex: 1; } .hv-oc__char-cta-title { display: block; font-weight: 600; font-size: 15px; } .hv-oc__char-cta-hint { display: block; font-size: 12px; color: #4b5563; } .hv-oc__char-cta-arrow { font-size: 15px; } .hv-mp-guest { background: var(--h-bg, #fff); color: var(--h-ink, #141414); } .hv-mp-guest__wrap { max-width: var(--h-container, 1280px); margin: 0 auto; padding: 80px var(--hv-inset, 16px) 96px; display: flex; flex-direction: column; align-items: center; text-align: center; } @media (min-width: 768px) { .hv-mp-guest__wrap { padding-top: 112px; } } .hv-mp-guest__egg { position: relative; } .hv-mp-guest__egg img { width: 96px; height: 118px; object-fit: contain; opacity: 0.9; } .hv-mp-guest__lock { position: absolute; right: -4px; bottom: -4px; display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.2); background: #fff; } .hv-mp-guest__title { margin: 24px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .hv-mp-guest__body { margin: 8px 0 0; max-width: 20rem; font-size: 15px; color: #6b7280; } .hv-mp-guest__cta { margin-top: 32px; } @charset 'utf-8'; /* ------------------------------------------------------------------ * HAVEA 디자인 토큰 — 이 스킨의 단일 정본 * 출처: havea-shopby apps/storefront/src/app/globals.css :root * 운영 커밋 0659796e5d907d48fec2ece081961054e61c9162 * (globals.css blob 5073740bb35b7a93365920fc9c7c9e36a0763294, 2026-09-12 대조) * 규칙: docs/design.md · docs/design-guidelines.md (havea-shopby 저장소) * - --h-* / --font-* 는 원본 값·단위(rem) 그대로. 원본이 바뀌면 여기와 diff 해서 반영한다. * - --k-*(kasina PoC)·shadcn 변수·다크 테마 블록은 스킨에 소비처가 없어 옮기지 않았다. * - 화면별 색/간격 복사 금지 — 값이 필요하면 아래 토큰을 var() 로 참조한다. * ------------------------------------------------------------------ */ :root { /* Font stacks */ --font-en: 'Switzer', Pretendard, system-ui, sans-serif; --font-kr: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --font-stack: var(--font-en), var(--font-kr); /* UI colors (B/W only) */ --h-bg: #ffffff; --h-bg-alt: #fafafa; --h-surface: #f6f6f6; --h-bg-product: #f4f4f4; --h-ink: #000000; --h-ink-2: #444444; --h-ink-3: #6b6b6b; --h-line: rgba(0, 0, 0, 0.12); --h-line-strong: rgba(0, 0, 0, 0.32); --h-point: #000000; /* Footer (inverted surface) */ --h-footer-bg: #000000; --h-footer-ink: #ffffff; /* Semantic */ --h-sale: #000000; --h-sale-pct: #c8102e; --h-sale-on-dark: #ff6b66; --h-stamp-positive: #c8102e; --h-success: #2e7a4a; --h-warn: #c8102e; --h-live: #c8102e; --h-info: #1f4fcc; --h-trend-up: #f04452; --h-trend-down: #3182f6; /* Shadow · dim */ --h-shadow-float: 0 -12px 34px rgba(0, 0, 0, 0.14); --h-shadow-card: 0 12px 34px rgba(0, 0, 0, 0.1); --h-dim-alert: rgba(0, 0, 0, 0.4); --h-dim-sheet: rgba(0, 0, 0, 0.2); /* Radius */ --h-radius-none: 0px; --h-radius-sm: 6px; --h-radius-md: 10px; --h-radius-lg: 14px; --h-radius-xl: 16px; --h-radius-card: 8px; --h-radius-btn: 8px; --h-radius-input: 8px; --h-radius-chip: 999px; /* Spacing */ --h-gutter: 16px; --h-gutter-md: 24px; --h-gutter-lg: 40px; /* .h-container 인셋 (원본 globals.css: padding-inline 16 → ≥768 40). 페이지 래퍼(.hv-*-wrap 등)는 이 토큰으로 — --h-gutter 만 쓰면 PC 에서 24px 안쪽으로 밀린다(9/14 F 대조 실측) */ --hv-inset: var(--h-gutter); --h-section: 80px; --h-section-mobile: 56px; /* Layout */ --h-container: 1280px; /* Glass */ --h-glass-bg: rgba(255, 255, 255, 0.6); --h-glass-blur: blur(22px) saturate(150%); --h-glass-border: rgba(0, 0, 0, 0.05); --h-glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); /* Heights */ --h-h-btn: 48px; --h-h-btn-sm: 36px; --h-h-btn-lg: 56px; --h-h-input: 48px; --h-h-gnb: 56px; --h-h-header: 72px; --h-h-discovery-header: 77px; --h-h-header-m: 53px; --h-h-tabbar: 64px; /* Aspect */ --h-aspect-card: 4 / 5; --h-aspect-tile: 1 / 1; --h-aspect-hero: 3 / 4; /* Typography sizes (fluid clamp · rem = 사용자 글자 크기 설정에 반응, 주석은 16px 기준 환산) */ --h-fs-display-xl: clamp(3.5rem, 8.5vw, 8rem); --h-fs-display-l: clamp(2.75rem, 5.5vw, 5.5rem); --h-fs-display-m: clamp(2rem, 4vw, 3.5rem); --h-fs-h1: clamp(1.75rem, 2.6vw, 2.5rem); --h-fs-h2: clamp(1.375rem, 1.9vw, 1.75rem); --h-fs-h3: 1.125rem; /* 18px */ --h-fs-body: 0.9375rem; /* 15px */ --h-fs-body-sm: 0.8125rem; /* 13px */ --h-fs-caption: 0.6875rem; /* 11px */ --h-fs-btn: 0.8125rem; /* 13px */ /* Weights */ --h-fw-r: 400; --h-fw-m: 500; --h-fw-sb: 600; --h-fw-b: 700; /* Tracking */ --h-track-display: -0.02em; --h-track-tight: -0.01em; --h-track-normal: 0; --h-track-wide: 0.06em; --h-track-wider: 0.08em; /* Motion */ --h-ease: cubic-bezier(0.2, 0, 0, 1); --h-dur-1: 160ms; --h-dur-2: 260ms; --h-dur-3: 420ms; /* ---- Aurora 소비처 별칭 — 고정 HAVEA 토큰을 Aurora 변수명으로 연결 (직접 색값 금지, 위 토큰만) ---- */ --whole-color: var(--h-bg); --black-color: var(--h-ink); --dark-gray-color: var(--h-ink-2); --blue-gray-color: var(--h-ink-2); --default-font-color: var(--h-ink); --gray-font-color: var(--h-ink-3); --gray-color: var(--h-ink-3); --default-color: var(--h-line); --empty-color: var(--h-surface); --tooltip-bg-color: var(--h-surface); --caution-color: var(--h-warn); --point-color-secondary: var(--h-info); /* ---- 어드민 가변 슬롯 — 어드민 디자인 설정(decorationConfig)을 BannerProvider 가 런타임에 :root 로 덮어쓴다. HAVEA 토큰으로 별칭하지 않고 스킨 기본값만 둔다 (어드민 값이 정본). ---- */ --background-color: #f5f6f8; --point-color: #f92626; } /* 원본 globals.css 와 동일한 토큰 오버라이드 — 모바일 큰 버튼 48 (터치 하한 유지) */ @media (max-width: 767px) { :root { --h-h-btn-lg: 48px; } } @media (min-width: 768px) { :root { --hv-inset: var(--h-gutter-lg); } } /* 라운지 화면 모드 다크 토큰 — 원본 globals.css :root[data-theme='dark'] 1:1 (LoungeThemeToggle 이 로 켠다, 다른 지면은 항상 라이트) */ :root[data-theme='dark'] { color-scheme: dark; --h-bg: #121212; --h-bg-alt: #161616; --h-surface: #1e1e1e; --h-bg-product: #f4f4f4; --h-ink: #f2f2f0; --h-ink-2: #bdbdba; --h-ink-3: #8c8c89; --h-line: rgba(255, 255, 255, 0.14); --h-line-strong: rgba(255, 255, 255, 0.34); --h-stamp-positive: #e8455b; --h-warn: #e8455b; --h-dim-alert: rgba(0, 0, 0, 0.6); --h-dim-sheet: rgba(0, 0, 0, 0.4); --h-glass-bg: rgba(18, 18, 18, 0.92); }