/* Tokens / Base */ *, *::before, *::after { box-sizing: border-box; } /* Custom Selection */ ::selection { background: var(--color-primary); color: var(--color-white); } ::-moz-selection { background: var(--color-primary); color: var(--color-white); } /* Custom Webkit Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--color-surface); } ::-webkit-scrollbar-thumb { background: var(--color-line-strong); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* Cinematic Scroll Animations — progressively enhanced. Content is visible by default. When JS tags , .fade-up elements start hidden and reveal on intersection. */ .fade-up { transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .js-animations .fade-up:not(.is-visible) { opacity: 0; transform: translateY(30px); will-change: opacity, transform; } .fade-up.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================ Global Shell — Header · Announcement · Footer · Sticky ============================================================ */ /* Announcement Bar — compact runner above the header */ .announcement-bar { width: 100%; background: var(--color-primary); color: var(--color-white); font-size: var(--font-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; line-height: var(--lh-caption); transition: max-height 0.3s ease, opacity 0.3s ease; overflow: hidden; } .announcement-bar[hidden] { max-height: 0; opacity: 0; } /* Same rail as header chrome (announcement may sit inside `
` or as a sibling in partials) */ .announcement-bar > .container { width: 100%; max-width: var(--container); margin-inline: auto; min-width: 0; box-sizing: border-box; } .announcement-content { width: 100%; min-height: 32px; padding-block: var(--space-8); display: grid; grid-template-columns: var(--announcement-end-rail) 1fr var(--announcement-end-rail); align-items: center; column-gap: var(--space-8); box-sizing: border-box; } .announcement-content p { margin: 0; grid-column: 2; text-align: center; justify-self: center; min-width: 0; } .announcement-close { grid-column: 3; justify-self: end; align-self: center; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-white); font-size: 14px; line-height: 1; opacity: 0.55; transition: opacity 0.25s ease; } .announcement-close:hover, .announcement-close:focus-visible { opacity: 1; } /* Header / Footer / Announcement / Mega all inherit the shared .container padding — so logo, GNB, footer columns and all main content align on the same left gutter. Do NOT reintroduce a separate chrome-padding here. */ /* Header / Navigation */ .header { position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--color-line); /* Solid base — ensures legibility when backdrop-filter is unsupported */ background: var(--color-surface); will-change: transform; } /* 공지 → GNB 행 → 메가 패널 세로 스택 (position 은 위 .header 의 sticky 유지) */ .header.site-header { display: flex; flex-direction: column; align-items: stretch; } /* Full-width chrome rail — avoids shrink-to-content header rows in nested flex contexts */ .header.site-header > .container { width: 100%; max-width: var(--container); margin-inline: auto; min-width: 0; box-sizing: border-box; } .header-content { max-width: none; width: 100%; margin-left: auto; margin-right: auto; min-height: var(--header-height); min-width: 0; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: clamp(var(--space-20), 3vw, var(--space-40)); } .logo { display: flex; align-items: center; margin: 0; min-height: var(--header-height); min-width: 0; } .logo a { display: inline-flex; align-items: center; height: var(--header-height); padding-right: var(--space-4); font-size: var(--logo-mark-size); font-weight: 700; letter-spacing: 0.22em; line-height: 1; color: var(--color-primary); transition: color 0.25s ease; } nav.gnb { display: flex; align-items: center; justify-content: center; min-height: var(--header-height); flex: 1 1 auto; min-width: 0; padding-inline: var(--space-8); } .logo a:hover, .logo a:focus-visible { color: var(--color-accent); } .gnb-list { display: flex; align-items: center; justify-content: center; gap: var(--space-40); } .gnb-item a { position: relative; display: inline-flex; align-items: center; justify-content: center; height: var(--header-height); min-height: var(--header-height); line-height: 1; font-size: var(--nav-label-size); font-weight: 600; letter-spacing: var(--nav-label-tracking); text-transform: uppercase; white-space: nowrap; color: var(--color-text-sub); transition: color 0.25s ease; } .gnb-item a::after { content: ""; position: absolute; left: 0; bottom: calc((var(--header-height) - 1em) / 2 - 5px); width: 100%; height: 1px; background: var(--color-primary); transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .gnb-item a:hover, .gnb-item a:focus-visible, .gnb-item a.is-active, .gnb-item a[aria-current="page"] { color: var(--color-primary); } .gnb-item a:hover::after, .gnb-item a:focus-visible::after, .gnb-item a.is-active::after, .gnb-item a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .header-actions { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; margin-left: auto; gap: var(--space-20); min-width: 0; } /* Match GNB row: SEARCH / CART / MENU share the same bar height as SHOP … */ .header-actions .icon-btn { height: var(--header-height); min-height: var(--header-height); line-height: 1; font-size: var(--nav-label-size); letter-spacing: var(--nav-label-tracking); } /* Anchor wrap — positions the slide-out search directly to the left of the SEARCH toggle button (not somewhere in the middle of .header-actions). */ .header-search-wrap { position: relative; display: inline-flex; align-items: center; } /* Header Search — absolute overlay anchored to the SEARCH button's left edge. Width is written inline by layout-system.js from the real GIFT↔SEARCH gap, so the input always fits into the empty space without covering any GNB item. */ .header-search { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: var(--space-8); width: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease; } .header-search.is-open { opacity: 1; pointer-events: auto; } input[type="search"].search-input { width: 100%; height: 34px; padding: 0 var(--space-8); border: 0; border-bottom: 1px solid var(--color-line-strong); border-radius: 0; background: transparent; font-family: var(--font-family-sans); font-size: var(--nav-label-size); font-weight: 600; letter-spacing: var(--track-ui); color: var(--color-primary); -webkit-appearance: none; appearance: none; } input[type="search"].search-input::placeholder { color: var(--color-text-sub); text-transform: uppercase; letter-spacing: var(--track-ui); font-size: var(--nav-label-size); opacity: 1; } @supports (color: color-mix(in srgb, white, black)) { input[type="search"].search-input::placeholder { color: color-mix(in srgb, var(--color-text-muted) 82%, var(--color-text) 18%); } } input[type="search"].search-input:focus { border-bottom-color: var(--color-primary); outline: none; } input[type="search"].search-input::-webkit-search-cancel-button, input[type="search"].search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .icon-btn { min-height: var(--control-height); padding: 0 var(--space-8); font-size: var(--nav-label-size); font-weight: 600; letter-spacing: var(--nav-label-tracking); text-transform: uppercase; color: var(--color-text-sub); transition: color 0.25s ease; } .icon-btn:hover, .icon-btn.is-active, .icon-btn[aria-expanded="true"] { color: var(--color-primary); } /* Toggle label swap (MENU↔CLOSE) — aria-hidden marks decorative text */ .mega-toggle-label-close { display: none; } .mega-toggle[aria-expanded="true"] .mega-toggle-label-open { display: none; } .mega-toggle[aria-expanded="true"] .mega-toggle-label-close { display: inline; } /* Dim page below header while mega is open (header stays z-index 1000) */ .mega-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(26, 36, 33, 0.24); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0s linear 0.35s; } html.is-mega-open .mega-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s ease, visibility 0s linear 0s; } /* Mega Menu — closed state (single source; positioned under sticky header bar) */ .mega-menu { position: absolute; top: 100%; left: 0; width: 100%; z-index: 1; visibility: hidden; opacity: 0; transform: translateY(-10px); border-top: 1px solid var(--color-line); background: rgba(255, 255, 255, 0.98); max-height: calc(100vh - var(--header-height)); overflow-y: auto; box-shadow: 0 20px 40px rgba(0, 0, 0, 0); transition: visibility 0s linear 0.4s, opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; } /* Mega Menu — open state (single combined block) */ .header.is-menu-open .mega-menu, .mega-menu[aria-hidden="false"] { visibility: visible; opacity: 1; transform: translateY(0); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); transition: visibility 0s linear 0s, opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; } .mega-menu-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-40); padding: var(--space-48) 0; align-items: start; } .mega-primary { display: none; grid-column: 1 / -1; flex-direction: column; gap: var(--space-16); padding-bottom: var(--space-32); border-bottom: 1px solid var(--color-line); } .mega-primary-title { font-size: var(--font-label); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-text-muted); } .mega-primary-list { display: flex; flex-direction: column; gap: var(--space-12); } .mega-primary-list a { font-family: var(--font-family-display); font-style: italic; font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; color: var(--color-primary); transition: color 0.3s ease; } .mega-primary-list a:hover, .mega-primary-list a.is-active { color: var(--color-accent); } .mega-col { display: flex; flex-direction: column; gap: var(--space-20); } .mega-title { font-size: var(--font-label); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid var(--color-line); padding-bottom: var(--space-16); } .mega-list { display: flex; flex-direction: column; gap: var(--space-12); } .mega-list a { font-size: var(--font-body); line-height: var(--lh-body); color: var(--color-text-sub); letter-spacing: 0.01em; transition: color 0.3s ease, padding-left 0.25s ease; } .mega-list a:hover { color: var(--color-primary); padding-left: var(--space-4); } .mega-list a:focus-visible, .mega-primary-list a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .mega-menu, .mega-backdrop { transition: none; } } /* ============================================================ Global Footer ============================================================ */ .footer { background: var(--color-white); border-top: 1px solid var(--color-line); padding: var(--space-120) 0 var(--space-48); } .footer-top { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--space-80); padding-bottom: var(--space-64); border-bottom: 1px solid var(--color-line); } .footer-brand { display: flex; flex-direction: column; gap: var(--space-20); min-width: 0; } .footer-logo { font-size: clamp(1.5rem, 1.2vw + 1.2rem, 1.75rem); font-weight: 600; letter-spacing: var(--track-eyebrow); color: var(--color-primary); } .footer-tagline { font-family: var(--font-family-display); font-style: italic; font-size: 26px; letter-spacing: -0.015em; color: var(--color-text-sub); line-height: 1.25; } .footer-copy { font-size: var(--font-body); color: var(--color-text-muted); max-width: var(--prose-width); line-height: var(--lh-relaxed); } .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(220px, 1.4fr); gap: var(--space-40); min-width: 0; } .footer-col { display: flex; flex-direction: column; gap: var(--space-20); min-width: 0; } .footer-col-news { grid-column: auto; justify-self: end; width: min(100%, 320px); } .footer-title { font-size: var(--font-caption); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-primary); } .footer-list { display: flex; flex-direction: column; gap: var(--space-16); } .footer-list a { position: relative; display: inline-block; font-size: var(--font-body); line-height: var(--lh-body); color: var(--color-text-sub); transition: color 0.25s ease, padding-left 0.25s ease; } .footer-list a:hover, .footer-list a:focus-visible { color: var(--color-primary); padding-left: var(--space-8); } /* Newsletter ---------------------------------------------------- */ .footer-news-desc { font-size: 13px; color: var(--color-text-sub); line-height: 1.7; margin-bottom: var(--space-8); } .footer-news-form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; column-gap: var(--space-8); border-bottom: 1px solid var(--color-line-strong); transition: border-color 0.25s ease; } .footer-news-form.is-error { border-bottom-color: #b14a42; } .footer-news-form:focus-within { border-bottom-color: var(--color-primary); } input[type="email"].footer-news-input { width: 100%; min-width: 0; /* allow grid cell to shrink without overflowing */ height: var(--control-height); padding: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--font-family-sans); font-size: 14px; letter-spacing: 0.04em; color: var(--color-primary); } input[type="email"].footer-news-input::placeholder { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 600; } input[type="email"].footer-news-input:focus { outline: none; border: 0; } /* WebKit autofill — keep the dark primary text, no yellow background */ input[type="email"].footer-news-input:-webkit-autofill { -webkit-text-fill-color: var(--color-primary); -webkit-box-shadow: 0 0 0 1000px var(--color-white) inset; transition: background-color 5000s ease-in-out 0s; } .footer-news-submit { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--control-height); height: var(--control-height); box-sizing: border-box; padding: 0 var(--space-4); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; line-height: var(--control-line-height); color: var(--color-primary); white-space: nowrap; transition: color 0.25s ease; } .footer-news-submit:hover, .footer-news-submit:focus-visible { color: var(--color-accent); } .footer-news-submit-arrow { display: inline-block; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } .footer-news-submit:hover .footer-news-submit-arrow, .footer-news-submit:focus-visible .footer-news-submit-arrow { transform: translateX(4px); } .footer-news-feedback { grid-column: 1 / -1; min-height: 18px; margin-top: var(--space-12); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); } .footer-news-feedback:empty { margin-top: 0; } .footer-news-form.is-error .footer-news-feedback { color: #b14a42; } .footer-news-form.is-success .footer-news-feedback { color: var(--color-primary); } .footer-news-status { min-height: 18px; margin-top: var(--space-10); font-size: 11px; line-height: 1.45; letter-spacing: 0.03em; color: var(--color-text-muted); } .footer-news-status.is-error { color: #b14a42; } /* Bottom strip ------------------------------------------------- */ .footer-bottom { padding-top: var(--space-32); } .footer-bottom-inner { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); align-items: center; gap: var(--space-56); } .footer-copyright { color: var(--color-text-muted); font-size: 11px; letter-spacing: 0.08em; } .footer-meta { display: flex; align-items: center; gap: var(--space-32); flex-wrap: wrap; justify-content: flex-end; justify-self: end; width: max-content; max-width: 100%; min-width: 0; } .region-selector { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 36px; padding: 0 var(--space-12); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-text-sub); border: 1px solid var(--color-line); border-radius: 0; transition: color 0.25s ease, border-color 0.25s ease; } .region-selector:hover, .region-selector:focus-visible, .region-selector[aria-expanded="true"] { color: var(--color-primary); border-color: var(--color-line-strong); } .region-selector-caret { font-size: 9px; line-height: 1; } .footer-legal { display: flex; gap: var(--space-20); } .footer-legal a { font-size: 12px; color: var(--color-text-muted); letter-spacing: 0.05em; transition: color 0.25s ease; } .footer-legal a:hover, .footer-legal a:focus-visible { color: var(--color-primary); } .footer-social { display: flex; gap: var(--space-12); } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-line); color: var(--color-text-sub); transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .footer-social a:hover, .footer-social a:focus-visible { color: var(--color-white); background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-1px); } /* Sticky CTA */ .sticky { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1200; border-top: 1px solid var(--color-line); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(20px); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08); transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .sticky[data-visible="true"] { transform: translateY(0); } .sticky-content { max-width: var(--container); margin: 0 auto; padding: var(--space-16) var(--container-padding); display: flex; align-items: center; justify-content: space-between; } .sticky-info { display: flex; flex-direction: column; gap: 2px; } .sticky-eyebrow { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); letter-spacing: 0.22em; } .sticky-product { font-family: var(--font-family-display); font-style: italic; font-size: 22px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; } .sticky-price { font-family: var(--font-family-sans); font-weight: 700; font-size: 13px; color: var(--color-text-sub); } .sticky-actions { display: flex; gap: var(--space-16); } .sticky-save { padding: 0 var(--space-24); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; border: 1px solid var(--color-line-strong); min-height: var(--control-height); height: var(--control-height); line-height: var(--control-line-height); box-sizing: border-box; } .sticky-button { padding: 0 var(--space-40); background: var(--color-primary); color: var(--color-white); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; min-height: var(--control-height); height: var(--control-height); line-height: var(--control-line-height); box-sizing: border-box; transition: background 0.3s ease; } .sticky-button:hover { background: var(--color-primary-hover); } /* Scroll Progress */ .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--color-primary); z-index: 1000; transition: width 0.1s ease-out; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, p, ul, ol, li, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img { display: block; width: 100%; height: auto; image-rendering: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { border: 0; background: none; cursor: pointer; } input, textarea, select { border: 0; outline: 0; background: none; } :root { --swiper-theme-color: #1a2421 !important; /* Design Tokens - Colors */ --color-primary: #1a2421; --color-primary-rgb: 26, 36, 33; --color-deep-forest: #1a2421; --color-primary-dark: #111917; --color-primary-hover: #111917; --color-accent: #c98a53; /* Page canvas + chrome — match commerce column (no warm gutter frame) */ --color-bg: #ffffff; --color-surface: #ffffff; --color-surface-soft: #f5f5f4; --color-text: #1c1c1c; --color-text-sub: #5f5f5f; --color-text-muted: #8f8f8f; --color-line: #e5e2dc; --color-line-strong: #d0cbc3; --color-focus: #1a2421; --color-white: #ffffff; /* Dark band ↔ light section: hairline on light side + inner rules on dark panels */ --band-seam-on-light: 1px solid var(--color-line); --band-inner-line-dark: rgba(255, 255, 255, 0.14); /* Full-bleed dark rows — fallback flat primary; softened where color-mix is supported */ --color-band-dark: var(--color-primary); /* Typography System */ --font-family-display: "DM Serif Display", serif; /* Noto Sans KR loads from reset.css @import — sits after Latin webfonts for 한글 */ --font-family-sans: "Outfit", "Inter", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; --font-family-mono: "Space Mono", monospace; /* Type Scale — clamp rem-first; editorial display + readable body */ --font-hero: clamp(2.25rem, 4.2vw + 1.1rem, 3.75rem); --font-h1: clamp(1.75rem, 2.8vw + 0.85rem, 2.5rem); --font-h2: clamp(1.375rem, 1.4vw + 1.05rem, 1.75rem); --font-h3: clamp(1.125rem, 0.8vw + 0.95rem, 1.25rem); --font-section: clamp(1.375rem, 1.9vw + 0.95rem, 1.875rem); --font-sub: clamp(0.9375rem, 0.35vw + 0.85rem, 1rem); --font-card: clamp(0.9375rem, 0.25vw + 0.88rem, 1rem); --font-body: clamp(0.8125rem, 0.28vw + 0.76rem, 0.875rem); --font-label: clamp(0.625rem, 0.2vw + 0.55rem, 0.6875rem); --font-caption: clamp(0.6875rem, 0.15vw + 0.62rem, 0.75rem); /* Line-height rhythm — hierarchy + breathing */ --lh-none: 1; --lh-tight: 1.12; --lh-snug: 1.22; --lh-hero: 1.1; --lh-heading: 1.2; --lh-subhead: 1.35; --lh-body: 1.65; --lh-relaxed: 1.72; --lh-caption: 1.45; /* Measure — long-form comfort */ --prose-width: min(42rem, 100%); --prose-width-wide: min(48rem, 100%); /* Tracking — caps / mono: tight enough for 한글 가독성 */ --track-eyebrow: 0.14em; --track-label: 0.1em; --track-caps: 0.12em; --track-ui: 0.08em; /* Section & Grid Rhythm (desktop defaults — responsive.css overrides per breakpoint) */ /* Layout `gap` between blocks/cards: use --grid-gap (24px) or --space-32 (32px) only. */ --section-padding: 120px; --sub-gap: 32px; --content-gap: 32px; --subpage-head-body-gap: 32px; /* title block → body on subpages only */ --section-gap: 40px; /* overrides reset; used as section vertical padding */ --section-head-gap: 32px; /* title block → cards / section-content gap */ --grid-gap: 24px; --ed-card-gap: var(--grid-gap); --card-gap: 24px; --card-padding: 20px; --text-gap-xs: 4px; --text-gap-sm: 8px; --text-gap-md: 12px; --text-gap-lg: 16px; /* Title → desc → meta stack inside .card-body (8px) */ --card-stack-gap: var(--text-gap-sm); /* Sibling controls in .card-action (e.g. multiple buttons) — slightly looser */ --card-inner-gap: var(--text-gap-md); /* Primary controls: one tap height for .btn, .chip, .view-btn, .icon-btn, sticky CTAs */ --control-height: 48px; /* Single-line control copy — shared cap/baseline rhythm across mixed sizes */ --control-line-height: 1.1; --duration: 0.3s; --score: 0%; /* Spacing Rhythm */ --space-120: 120px; --space-80: 80px; --space-64: 64px; --space-48: 48px; --space-40: 40px; --space-32: 32px; --space-24: 24px; --space-20: 20px; --space-18: 18px; --space-16: 16px; --space-14: 14px; --space-12: 12px; --space-10: 10px; --space-8: 8px; --space-6: 6px; --space-4: 4px; --space-22: 22px; --space-28: 28px; --space-56: 56px; /* Layout Constraints — single gutter used by every page chrome */ --container: 1440px; --container-padding: 40px; /* reset.css section containers use --gutter; keep in sync with chrome gutters */ --gutter: var(--container-padding); --header-height: 52px; --announcement-height: 32px; /* Symmetric side rails in announcement grid (balances close button column) */ --announcement-end-rail: 40px; /* Global nav / utility row — readable next to logo without competing */ --nav-label-size: clamp(0.6875rem, 0.2vw + 0.62rem, 0.75rem); --nav-label-tracking: 0.12em; --logo-mark-size: clamp(16px, 0.35vw + 15px, 18px); /* Effects */ --radius-sm: 0px; /* Sharp lab aesthetics */ --radius-md: 0px; --radius-pill: 100px; --transition-base: var(--duration) cubic-bezier(0.16, 1, 0.3, 1); /* Editorial card system — calm motion, soft depth, aligned grids */ --card-radius: 2px; --card-border: rgba(26, 36, 33, 0.09); --card-border-hover: rgba(26, 36, 33, 0.14); --card-accent-hover: rgba(201, 138, 83, 0.2); --card-lift-y: -0.125rem; --card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 26px 52px -34px rgba(26, 36, 33, 0.14), 0 12px 24px -16px rgba(26, 36, 33, 0.06); --card-media-scale: 1.03; --card-media-scale-quiet: 1.018; --card-ease: cubic-bezier(0.16, 1, 0.3, 1); --card-duration: 0.55s; --card-pad-y: clamp(1rem, 1.15vw, 1.375rem); --card-pad-x: clamp(1rem, 1.35vw, 1.5rem); /* Subpage commerce polish — card lift, KPI tiles, grids (see subpage-layout.css) */ --commerce-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.94) inset, 0 14px 38px -30px rgba(17, 17, 17, 0.11); --commerce-card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 22px 52px -28px rgba(17, 17, 17, 0.15); --commerce-card-top: 2px solid var(--color-primary); /* Commerce route: breadcrumb rule + hero type stack (see subpage-layout.css) */ --commerce-breadcrumb-rule: var(--color-line); --commerce-breadcrumb-accent: rgba(201, 138, 83, 0.55); --commerce-hero-eyebrow-title: var(--text-gap-sm); --commerce-hero-title-body: var(--text-gap-lg); --commerce-hero-body-cta: var(--space-24); --commerce-hero-body-steps: var(--space-24); } @supports (color: color-mix(in srgb, white, black)) { :root { --color-band-dark: color-mix(in srgb, var(--color-primary) 91%, var(--color-bg) 9%); } } body { min-width: 320px; font-family: var(--font-family-sans); font-size: var(--font-body); line-height: var(--lh-body); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } /* 한글·라틴 혼합 시 어절 단위 줄바꿈 */ html[lang="ko"] body { word-break: keep-all; line-break: strict; } @supports (text-wrap: pretty) { html[lang="ko"] body .lead, html[lang="ko"] body .hero-lead-copy, html[lang="ko"] body .brand-pillar-desc, html[lang="ko"] body .card-desc, html[lang="ko"] body .finder-step-lead, html[lang="ko"] body .ledger-desc, html[lang="ko"] body .mix-card-desc, html[lang="ko"] body .process-card-desc, html[lang="ko"] body .personal-card-desc, html[lang="ko"] body .compare-card-desc, html[lang="ko"] body .why-card .card-desc, html[lang="ko"] body .editorial-section .overlay .title-wrap > p { text-wrap: pretty; } } #wrap { width: 100%; overflow-x: hidden; } .container { max-width: var(--container); margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } /* Optional subsection wrappers — space between title block and body block */ .content>.content-header+.content-body { margin-top: var(--section-head-gap, 56px); } .section { padding-top: var(--section-padding); padding-bottom: var(--section-padding); scroll-margin-top: var(--header-height); } /* Full-bleed bands (editorial, etc.): do not stack section padding on flush rows */ .section.is-flush { padding-top: 0; padding-bottom: 0; } .section:first-child { padding-top: 0; } /* Viewport hero — `.section` default padding-bottom (~120px) stacks under media and reads as “endless” hero */ .section.hero { padding-top: 0; padding-bottom: 0; } .section-content { display: flex; flex-direction: column; gap: var(--section-head-gap); /* title block → cards, single source of truth */ } .section-content-narrow { max-width: var(--prose-width-wide); margin: 0 auto; } .section-head { display: flex; flex-direction: column; gap: var(--space-16); max-width: 760px; /* no margin-bottom — section-content's gap is the only vertical offset */ } .section-head-center { margin-left: auto; margin-right: auto; text-align: center; } .section-body { display: flex; flex-direction: column; } .skip-nav { position: absolute; top: -9999px; left: 20px; z-index: 2000; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-white); } .skip-nav:focus-visible { top: 20px; } .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; } /* Breadcrumb — shared across every sub-page */ .breadcrumb { padding-top: var(--space-32); padding-bottom: var(--space-24); } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font-size: var(--font-caption); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--track-caps); } .breadcrumb li+li::before { content: "/"; color: var(--color-line-strong); } /* Commerce strip uses `li:not(:last-child)::after` in subpage-layout — suppress duplicate slash */ .breadcrumb.commerce-breadcrumb li + li::before { content: none; display: none; } .breadcrumb a { transition: color 0.2s ease; } .breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--color-primary); } .breadcrumb [aria-current="page"] { color: var(--color-primary); font-weight: 600; } .hero-title, .section-title { letter-spacing: -0.02em; } .hero-title { font-family: var(--font-family-display); font-size: var(--font-hero); line-height: var(--lh-hero); letter-spacing: -0.02em; font-style: italic; } .section-title { font-family: var(--font-family-display); font-size: var(--font-section); line-height: var(--lh-heading); letter-spacing: -0.016em; } .card-title { font-size: var(--font-card); line-height: var(--lh-snug); font-weight: 500; letter-spacing: -0.004em; color: var(--color-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; min-height: 2.44em; } .section-eyebrow, .hero-eyebrow { font-size: var(--font-label); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-text-muted); } .section-desc { font-size: var(--font-body); line-height: var(--lh-body); max-width: var(--prose-width-wide); color: var(--color-text-sub); } .card-desc { font-size: var(--font-body); line-height: var(--lh-body); color: var(--color-text-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 0 1 auto; margin: 0; min-height: 3.3em; } .card-meta { font-size: var(--font-caption); line-height: var(--lh-caption); letter-spacing: 0.03em; color: var(--color-text-muted); margin: 0; } /* JS State Control: hidden 속성을 강제로 우선 적용 (flex 등 오버라이드 방지) */ [hidden] { display: none !important; } .card-grid { display: grid; gap: var(--grid-gap); align-items: stretch; /* Keep every card in a row aligned to same height */ } /* Normalize wrapped grid items (
  • , etc.) so card baselines stay consistent */ .card-grid>li { display: flex; } .card-grid>li>.card, .card-grid>.card { flex: 1; height: 100%; } .card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--color-surface); overflow: hidden; transition: box-shadow var(--card-duration) var(--card-ease), border-color 0.35s ease, transform var(--card-duration) var(--card-ease); } .card:hover { box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); } .card-media { position: relative; flex-shrink: 0; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #ebe7df 0%, #d9d3c6 100%); overflow: hidden; } .card-media.card-media-note { aspect-ratio: 16 / 9; } /* If an inside .card-media fails to load (missing asset), fade it out so the tinted placeholder reads as the card's visual instead of a broken icon. */ .card-media img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center center; display: block; background: #ebe7df; transition: transform var(--card-duration) var(--card-ease); } .card-media.card-media-note img { aspect-ratio: auto; height: 100%; object-fit: cover; } .card:hover .card-media img { transform: scale(var(--card-media-scale-quiet)); } .card-media-note { display: flex; align-items: center; justify-content: center; font-size: var(--font-label); font-weight: 600; letter-spacing: var(--track-eyebrow); color: var(--color-primary); padding: var(--card-padding); background: var(--color-surface-soft); border-bottom: 1px solid var(--color-line); text-transform: uppercase; text-align: center; aspect-ratio: 16 / 9; } .card-body { display: flex; flex-direction: column; flex: 1 1 auto; flex-grow: 1; gap: var(--card-stack-gap); padding: var(--card-pad-y) var(--card-pad-x); min-height: 0; } .card-action { margin-top: auto; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; width: 100%; gap: var(--card-inner-gap); min-height: var(--control-height); } /* 빈 액션 영역이 차지하는 불필요한 여백(Dead Space) 완벽 제거 */ .card-action:empty { display: none; } .card-action .btn { flex: 1 1 auto; min-width: 0; width: 100%; min-height: var(--control-height); align-self: stretch; } .card-action .text-link { min-height: var(--control-height); display: inline-flex; align-items: center; line-height: var(--control-line-height); } /* Product / editorial cards share 1:1 media; finder step note uses .card-media-note */ .product-card .card-media { background: var(--color-surface-soft); } .btn, .icon-btn, .chip, .sticky-button, .sticky-save { display: inline-flex; align-items: center; justify-content: center; line-height: var(--control-line-height); transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .2s ease; } .btn { min-height: var(--control-height); padding: 0 28px; border-radius: var(--radius-pill); font-size: var(--font-caption); font-weight: 500; letter-spacing: var(--track-ui); } .btn-primary, .sticky-button { background: var(--color-primary); color: var(--color-white); } .btn-primary:hover, .sticky-button:hover { background: var(--color-primary-hover); } .btn-secondary { border: 1px solid var(--color-primary); color: var(--color-primary); background: transparent; } .btn-secondary:hover { background: rgba(17, 17, 17, .05); } .text-link { display: inline-flex; gap: 10px; align-items: center; font-size: var(--font-caption); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-primary); transition: color 0.25s ease; } .text-link::after { content: "→"; letter-spacing: 0; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .text-link:hover { color: var(--color-accent); } .text-link:hover::after { transform: translateX(6px); } .chip { min-height: var(--control-height); padding: 0 16px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-surface); font-size: var(--font-caption); font-weight: 500; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--color-text-sub); transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .chip:hover { border-color: var(--color-line-strong); color: var(--color-primary); } /* Toggle “selected” look — scope to chips & explicit toolbars only. Avoid bare button[aria-pressed] so .sticky-save, .journal-icon-btn, etc. keep their layout. */ .view-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); line-height: var(--control-line-height); box-sizing: border-box; } .chip[aria-pressed="true"], .chip.is-selected, .view-btn[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); } button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } button[aria-disabled="true"], .chip[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12); } .btn:active, .chip:active, .finder-options button:active, .icon-btn:active, .sticky-button:active, .sticky-save:active, .view-btn:active { transform: none; } /* Form & Input System */ .form-group { margin-bottom: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); } .input-label { font-size: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--color-text-sub); } input[type="text"], input[type="email"], input[type="tel"], input[type="password"] { width: 100%; height: 52px; padding: 0 var(--space-16); border: 1px solid var(--color-line); background: var(--color-white); font-family: var(--font-family-sans); font-size: var(--font-body); line-height: var(--lh-snug); letter-spacing: 0.01em; transition: border-color 0.3s ease; border-radius: 0; } input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="password"]:hover { border-color: var(--color-line-strong); } input:focus { border-color: var(--color-primary); outline: none; } /* Layout Utilities */ .grid { display: grid; gap: var(--grid-gap); } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); } .full-width { grid-column: span 2; } .title-lg { font-family: var(--font-family-display); font-size: clamp(32px, 3.6vw, 40px); line-height: 1.2; font-weight: 400; font-style: italic; letter-spacing: -0.02em; color: var(--color-primary); } .title-md { font-family: var(--font-family-display); font-size: 28px; line-height: 1.3; font-weight: 400; font-style: italic; letter-spacing: -0.02em; color: var(--color-primary); } .title-sm { font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: var(--color-primary); } .body-text { font-size: 15px; line-height: 1.6; color: var(--color-text-sub); } .caption { font-size: 13px; line-height: 1.5; color: var(--color-text-muted); } /* Page Headers */ /* ============================================================ Page Header — eyebrow + title + desc Shared editorial block above the first section of every sub-page ============================================================ */ .page-header { padding: var(--space-64) 0 var(--space-48); border-bottom: 1px solid var(--color-line); } .page-header>.container { display: flex; flex-direction: column; gap: var(--space-12); } .page-header .section-eyebrow { font-size: var(--font-label); letter-spacing: var(--track-eyebrow); color: var(--color-text-muted); } .page-title { font-family: var(--font-family-display); font-size: clamp(1.75rem, 2.6vw + 0.9rem, 2.5rem); font-style: italic; font-weight: 400; line-height: var(--lh-hero); letter-spacing: -0.018em; color: var(--color-primary); margin: 0; } .page-header .section-desc { max-width: var(--prose-width-wide); font-size: var(--font-body); line-height: var(--lh-relaxed); color: var(--color-text-sub); margin-top: var(--space-4); } /* The very first section after a page-header doesn't need a full 120px padding-top — the header already provides the opening beat. */ .page-header+.section { padding-top: var(--space-64); } /* Reduced motion 접근성: 동작 축소 선호 사용자 대응 */ @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; } } /* ============================================================ Shared tokens/components (moved from editorial.css) ============================================================ */ .eyebrow { font-family: var(--font-family-mono); font-size: var(--font-caption); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-accent); font-weight: 500; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); box-sizing: border-box; line-height: var(--control-line-height); padding: 15px 32px; font-family: var(--font-family-mono); font-size: var(--font-caption); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; cursor: pointer; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow .25s ease; background: transparent; color: var(--color-text); white-space: nowrap; } .btn:hover, .btn:focus-visible, .btn:active { transform: none; } /* All chip / toolbar controls — same no-lift contract as .btn */ .chip:hover, .chip:focus-visible, .chip:active, .view-btn:hover, .view-btn:focus-visible, .view-btn:active, .icon-btn:hover, .icon-btn:focus-visible, .icon-btn:active, .sticky-button:hover, .sticky-button:focus-visible, .sticky-button:active, .sticky-save:hover, .sticky-save:focus-visible, .sticky-save:active { transform: none; } .btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-hover); } .btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-text); } .btn-secondary:hover { background: var(--color-text); color: #fff; } .btn-on-dark { color: #fff; border-color: rgba(255, 255, 255, .5); } .btn-on-dark:hover { background: #fff; color: var(--color-primary); border-color: #fff; } .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); } .btn-ghost:hover { border-color: #fff; } .link-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; font-family: var(--font-family-mono); font-size: var(--font-caption); letter-spacing: var(--track-eyebrow); text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 6px; transition: gap .3s ease, color .25s ease; } .link-arrow::after { content: "→"; font-family: var(--font-family-sans); } .link-arrow:hover { gap: 16px; } @media (min-width: 1200px) { .header-content { column-gap: 28px; } .gnb-list { gap: 34px; } .gnb-item a { letter-spacing: calc(var(--nav-label-tracking) + 0.02em); } .header-actions { gap: 14px; } .mega-menu-content { gap: 52px; padding: 52px 0; } .footer-top { gap: 88px; padding-bottom: 72px; } .footer-logo { font-size: 30px; letter-spacing: 0.22em; } .footer-copy { max-width: 380px; line-height: 1.9; } .footer-nav { gap: 52px; } .footer-bottom { padding-top: 36px; } #sticky-buy .sticky-content { max-width: 1360px; margin: 0 auto; padding-left: 18px; padding-right: 18px; } #sticky-buy .sticky-info { gap: 8px; } #sticky-buy .sticky-price { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } } @media (min-width: 1200px) { .header { border-bottom-color: rgba(17, 17, 17, 0.12); } .header-content { min-height: 72px; } .gnb-item a { font-size: 12px; } .mega-menu { border-top-color: rgba(17, 17, 17, 0.12); box-shadow: 0 24px 48px rgba(17, 17, 17, 0.1); } .footer { padding-top: 96px; padding-bottom: 56px; } } .footer-title { letter-spacing: 0.2em; } .footer-list a { line-height: 1.55; } .footer-news-status { line-height: 1.5; } .footer-copyright { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } #sticky-buy { border-top: 1px solid rgba(17, 17, 17, 0.14); backdrop-filter: blur(8px); } #sticky-buy .sticky-product, #sticky-buy .sticky-price { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } #sticky-buy .sticky-button, #sticky-buy .sticky-save { min-height: var(--control-height); height: var(--control-height); line-height: var(--control-line-height); box-sizing: border-box; } #sticky-buy .sticky-button { transition: background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } #sticky-buy .sticky-button:hover, #sticky-buy .sticky-button:focus-visible, #sticky-buy .sticky-button:active { transform: none; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); } /* ============================================================================= Micro polish — alignment · rhythm · weight · motion ============================================================================= */ .card, .ed-card { transition: box-shadow var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color var(--duration) ease; } .card-media img { transition: transform calc(var(--duration) * 2.25) cubic-bezier(0.25, 0.46, 0.45, 0.94); } .card:hover .card-media img { transform: scale(var(--card-media-scale)); } .price, .product-price { font-weight: 600; } .product-card { display: flex; flex-direction: column; height: 100%; } .product-card .card-link { display: flex; flex-direction: column; flex: 1; min-height: 0; } .product-card .card-body { flex: 1; display: flex; flex-direction: column; padding: var(--card-padding); } .product-card .product-card__actions { margin-top: auto; display: flex; gap: 1px; background: var(--color-line); border-top: 1px solid var(--color-line); } .product-card .product-card__actions .btn { flex: 1; border: 0; border-radius: 0; } /* Reserve two lines so title / price / meta rows line up across a .card-grid row */ .product-card .card-body>.card-why, .product-card .card-body>.lab-picks-bestfor { flex-shrink: 0; min-height: calc(1.45em * 2); } .product-card .card-body>.eyebrow.card-meta, .product-card .card-body>.card-meta { flex-shrink: 0; min-height: calc(1.35em * 2); } .product-card .product-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--text-gap-sm); margin: 0; flex-shrink: 0; width: 100%; } .product-card .product-head .card-title { margin: 0; letter-spacing: -0.02em; flex: 1; min-width: 0; text-wrap: balance; } .product-card .product-price { margin: 0; flex-shrink: 0; line-height: 1.22; font-family: var(--font-family-mono); font-size: 13px; letter-spacing: -0.02em; } .product-card .card-body>.lab-picks-bestfor { margin-top: var(--text-gap-sm); } .product-card .card-body>.card-desc+.lab-picks-meta { margin-top: auto; } .product-card .card-body>.card-why+.eyebrow.card-meta { margin-top: auto; } .product-card .card-body>.card-action { margin-top: auto; } .product-card .card-media img { object-position: center center; } .ed-card .card-body h3 { font-weight: 600; } .ed-card .card-body>p:not(.eyebrow):not(.card-meta) { font-weight: 400; } /* ============================================================================= Editorial page shell — keep subpages aligned with index.html + reset.css Load page-shell.css after this file for #wrap / main overflow-x containment. On every route except index, load subpage-layout.css next (shared section titles, editorial overlay type, card hover, min-width guards). Pattern:
    with
    …
    reset.css hooks `.section .content` (grid), `.section .container` (max-width, gutters), and common `.section` vertical padding. Optional class hooks (same names as index where applicable): - `editorial` on full-bleed image bands paired with `ed-editorial is-flush` - `asym` on asymmetric product rows paired with `ed-asym` Do not add `process`, `cta`, `compare`, `personal`, `mix`, or `split` as section utility classes unless intentionally pairing with reset’s `.section.*` viewport modules. ============================================================================= */ /* ----- Premium Button v2 (used in all hero actions) ----- */ .btn-v2 { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); padding: var(--space-12) var(--space-24); font-family: var(--font-family-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-md); transition: all 0.25s ease; } /* Solid primary button */ .btn-v2.btn-solid { background: var(--color-primary); color: var(--color-white); border: 2px solid var(--color-primary); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12); } .btn-v2.btn-solid:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-2px); } /* Ghost secondary button */ .btn-v2.btn-ghost { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); } .btn-v2.btn-ghost:hover { background: rgba(var(--color-primary-rgb), 0.08); transform: translateY(-2px); } /* ----- Hero typography ----- */ .cinematic-hero .section-eyebrow, .cinematic-hero .hero-eyebrow { /* legacy support */ font-family: var(--font-family-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; color: var(--color-accent); margin-bottom: var(--space-20); text-transform: uppercase; } .cinematic-hero .page-title, .cinematic-hero .hero-title-v2 { /* legacy */ font-family: var(--font-family-display); font-style: italic; font-weight: 400; font-size: clamp(2.5rem, 6vw, 4.2rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-white); text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } .cinematic-hero .section-desc, .cinematic-hero .hero-desc-v2 { /* legacy */ font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); max-width: 52ch; }