/* ═══════════════════════════════════════════════════ FARO Redesign Overlay — redesign.css common.css / mobile.css 뒤에 연결. 기존 파일은 수정하지 않고 신규 Home/서브페이지 구조, 헤더 재배치, 텍스트 로고만 오버라이드. ═══════════════════════════════════════════════════ */ /* ─── 상담 예약 페이지 ─── */ .consult-card { background: #fff; border: 1px solid var(--line); padding: 32px 20px; } .consult-card-head { text-align: center; margin-bottom: 24px; } .consult-card-head h2 { margin-top: 8px; } .consult-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); } .consult-info { display: flex; align-items: flex-start; gap: 14px; } .consult-info .home-feature-icon { flex-shrink: 0; margin: 0; } .consult-info h3 { font-size: 15px; margin-bottom: 4px; } .consult-info p { font-size: 15px; color: var(--muted); } .consult-form-wrap h3 { font-size: 17px; margin-bottom: 12px; } .consult-form-note { text-align: center; font-size: 15px; color: var(--muted); margin-top: 14px; line-height: 1.6; word-break: keep-all; } .consult-phone-bar { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 20px; border: 1px solid var(--line); background: #fbf7f1; } .consult-phone-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--brown); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; } .consult-phone-text { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--muted); } .consult-phone-text b { font-size: 15px; color: var(--ink); font-weight: 500; } .consult-phone-number { flex-shrink: 0; font-family: var(--sans); font-size: 16px; color: var(--ink); border: 1px solid var(--line); padding: 10px 16px; } /* 모바일: 전화상담 바를 세로로 쌓아 텍스트 겹침/줄바꿈 방지 */ @media (max-width: 767px) { .consult-phone-bar { flex-wrap: wrap; } .consult-phone-text { flex: 1 1 100%; } .consult-phone-number { flex: 1 1 100%; text-align: center; margin-top: 4px; } } /* ─── 헤더: 상담예약 버튼 모바일에서도 노출 + 수직 중앙 정렬 ─── */ .header-cta { display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 40px; } /* ─── 헤더: 모바일 = 햄버거(좌) / 로고(중앙) / 상담예약(우) ─── */ /* position:sticky 자체가 absolute 자식의 포함 블록 역할을 하므로 position:relative로 덮어쓰지 않음 */ @media (max-width: 767px) { .header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* 헤더는 햄버거/상담예약 사이 중앙 고정 슬롯이라 폭이 좁음 — logo.png(800x77, 10.39:1)와 상담예약 버튼이 375px에서도 8px 이상 떨어지도록 로고 20px + CTA 패딩 축소 조합으로 확보 (23px 상한 기준 375px 안전폭 실측 후 20px로 확정 — 계산 근거는 대화 기록 참고) */ .header-logo img { height: 20px; } .header-nav-group { margin-left: auto; } .header-cta { height: 34px; padding: 0 4px; font-size: 15px; } } /* ─── 하단 sticky 상담바: Home에는 이미 상담예약 CTA 섹션이 있어 불필요, Footer/CTA를 가리지 않도록 숨김 ─── */ /* .sticky(#sticky)는 최상위에서 .app과 형제로 위치해 #home과 DOM상 형제 관계가 아니므로, */ /* :has()로 body 안에 #home.active가 있는지 확인해 스코핑 (JS의 currentId/STICKY_BLOCKED 로직은 그대로 유지 — Consult/Stores는 영향 없음) */ /* PC(1024px+)는 mobile.css에서 이미 .sticky 자체가 display:none이라 이 규칙과 무관 */ @media (max-width: 1023px) { body:has(#home.active) .sticky { display: none; } /* WHY compact 구간도 동일 원리: 하단 Reservation/Store CTA가 이미 있어 fixed 바는 중복이며 B&A compare-frame 이미지를 덮음 (Home 선례 이식, JS 무수정) */ body:has(#why.active) .sticky { display: none; } /* CRAFT도 레퍼런스 재구성으로 하단 상담 CTA 밴드가 생겨 동일 원리 적용 */ body:has(#craft.active) .sticky { display: none; } /* B&A도 레퍼런스 재구성으로 하단 RESERVATION 섹션이 생겨 동일 원리 적용 */ body:has(#before.active) .sticky { display: none; } /* Collection도 레퍼런스 재구성으로 하단 상담 CTA 밴드가 생겨 동일 원리 적용 */ body:has(#collection.active) .sticky { display: none; } /* Stores/Consult는 JS(STICKY_BLOCKED)가 이미 차단하지만, 숨김 transform 오프셋이 bottom 20px(768~1023)를 완전히 상쇄하지 못해 하단에 ~4px 슬리버가 걸리는 기존 기하 특성이 있어 CSS로도 완전 제거 (공통 .sticky 규칙은 무수정) */ body:has(#stores.active) .sticky, body:has(#consult.active) .sticky { display: none; } } /* ─── 헤더: nav + 상담예약 버튼을 한 그룹으로 묶어 우측 정렬 (겹침 방지) ─── */ .header-nav-group { display: flex; align-items: center; gap: 36px; } .desktop-nav { flex: 0 0 auto; gap: 32px; } .header-actions { flex: 0 0 auto; } /* 1200px(32px, 기존값) → 1130px(18px)까지 완만히 감소, 1130px → 1024px(12px)까지 추가로 더 감소. 두 구간의 기울기를 다르게 둬 1130px 경계에서 값(18px)은 이어지되 감소 속도만 바뀜. 로고/메뉴 글자/CTA 크기는 무영향. 상한을 1199px가 아닌 1279px로 넓혀 clamp()가 32px/.07em에서 멈춘 상태로 1200~1279px 구간을 그대로 덮게 함 — 1199→1200px 경계에서 기존 규칙(.1em)으로 갑자기 되돌아가던 문제 제거. 1280px+는 mobile.css의 gap:36px 규칙과 겹치지 않도록 그대로 비워둠 */ @media (min-width: 1130px) and (max-width: 1279px) { .desktop-nav { gap: clamp(18px, calc(18px + (100vw - 1130px) * 14 / 70), 32px); } /* 메뉴 단어 자체의 letter-spacing도 함께 축소해 gap이 좁아져도 메뉴 사이 구분이 또렷하게 보이도록 함. (100vw - 1130px)를 70px로 나눠 먼저 단위 없는 비율로 바꾼 뒤 .02em을 곱해야 실제로 em 단위로 스케일됨 — 70(단위 없음)으로 나누면 계산 결과가 대부분 px 취급되어 목표 .07em에 도달하지 못하는 버그가 있었음 */ .desktop-nav button, .desktop-nav a { letter-spacing: clamp(.05em, calc(.05em + (100vw - 1130px) / 70px * .02em), .07em); } } @media (min-width: 1024px) and (max-width: 1129px) { .desktop-nav { gap: clamp(12px, calc(12px + (100vw - 1024px) * 6 / 106), 18px); } .desktop-nav button, .desktop-nav a { letter-spacing: clamp(.03em, calc(.03em + (100vw - 1024px) / 106px * .02em), .05em); } } /* 1024~1100px: 로고+nav+상담 버튼의 실제 필요 폭이 이 구간 헤더 여유폭보다 커서 (nav item gap을 줄여도) 로고↔Navigation 사이 실제 간격이 0px가 되는 문제 — 로고/메뉴 글자/CTA 버튼 크기, nav item gap(위 clamp)은 그대로 두고 헤더 좌우 padding만 20px→36px로 연속 증가시켜 최소 8px 여백을 확보. 1100px에서 기존 clamp() padding(36px)과 자연스럽게 이어지므로 1099→1100 경계에서 값이 튀지 않음 */ @media (min-width: 1024px) and (max-width: 1099px) { .header { padding-inline: clamp(20px, calc(20px + (100vw - 1024px) * 16 / 76), 36px); } } /* ─── 모바일 메뉴 오버레이: 상담예약 버튼 ─── */ .menu-consult-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 40px); min-height: 48px; margin: 8px 20px 20px; padding: 14px 20px; background: var(--brown); color: #fff; border-radius: var(--radius-sm); font-family: var(--sans); font-size: 17px; } /* ─── 버튼 변형: 밝은 배경용 outline / 어두운 배경용 light ─── */ .btn.outline { background: transparent; color: var(--ink); border-color: var(--line-gold); } .btn.outline:hover { background: rgba(168, 135, 93, .08); } .btn.light { background: #fff; color: var(--ink); border-color: #fff; } .btn.light:hover { opacity: .9; } /* ─── 공용: 이미지 영역 (실제 asset 사용, data-img → JS가 background-image로 적용) ─── */ .home-hero-visual, .home-preview-visual, .ba-panel, .home-cta-card { background-color: #F1E9DA; background-size: cover; background-position: center; border: none !important; outline: none; position: relative; } .home-preview-visual::after, .home-cta-card::after { content: none; } /* ─── Home Hero: 이미지가 섹션 전체를 채우고 텍스트는 그 위에 오버레이 ─── */ .home-hero { position: relative; overflow: hidden; display: block; min-height: 500px; padding: 0; } /* Home 페이지 히어로만 세로로 더 길게 (Consult 히어로는 .home-hero 기본값 500px 유지) */ #home .home-hero { min-height: calc(100svh - var(--header-height-mobile)); } .home-hero-visual { position: absolute; inset: 0; } .home-hero-copy { position: relative; z-index: 2; max-width: 78%; padding: 48px 20px 40px; } .home-hero-copy > * { position: relative; z-index: 1; } .home-hero-copy .eyebrow { margin-bottom: 2px; } /* Eyebrow→제목: 2px */ .home-hero-copy h1 { font-size: var(--font-hero); line-height: 1.28; margin: 0 0 var(--space-4); /* Title→Body: 16px (top margin 제거 — eyebrow margin-bottom 단일 소스) */ } .home-hero-copy h1 .hero-line { display: block; white-space: nowrap; } .home-hero-copy h1 .accent { color: var(--gold); } .home-hero-copy p { margin-bottom: 0; } /* Body→Button 간격은 버튼 margin-top 단일 소스로 관리(이중 적용 제거) */ .home-hero-copy .btn { margin-top: var(--space-6); } /* Hero 문맥: 32px */ /* 텍스트 가독성 보강용 아주 약한 크림톤 그림자 (검정 금지) */ .home-hero-copy { text-shadow: 0 1px 18px rgba(250, 248, 244, .75); } /* Hero 전용 이미지 위치: 모델 얼굴이 텍스트 뒤로 오지 않도록 우측으로 이동 (모바일) */ .home-hero-visual { background-position: 72% center; } /* 이미지 전체를 덮는 overlay는 사용하지 않음 (이미지는 선명하게 유지) */ .home-hero-visual::before { content: none; } /* ─── Home Hero 모바일(~767px): 텍스트 뒤에는 이미지를 깔지 않고, 텍스트 안전영역이 끝나는 지점부터 이미지가 자연스럽게 시작 (Consult 히어로는 #home 스코프라 영향 없음) ─── */ @media (max-width: 767px) { /* 모바일 Hero: 이미지는 mask/overlay 없이 그대로, 텍스트 보호는 공통 180deg 상단 밴드 하나로만 처리 (data-img-mobile 전용 크롭 이미지 사용) */ #home .home-hero { position: relative; overflow: hidden; display: block; min-height: calc(100svh - var(--header-height-mobile)); background: #F5EFE6; } #home .home-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--hero-top-band-height); z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--hero-protect-stops)); } #home .home-hero::after { content: none; } #home .home-hero .home-hero-visual { position: absolute; inset: 0; z-index: 0; min-height: 0; background-size: cover; background-position: center center; -webkit-mask-image: none; mask-image: none; } #home .home-hero .home-hero-visual::before { content: none; } #home .home-hero .home-hero-copy { position: relative; z-index: 2; max-width: 93%; padding: 44px 20px 0; background: transparent; } } /* 히어로↔아이콘 사이 헤리티지 표기 — 기존 .eyebrow 문법(골드/와이드 트래킹) 재사용 */ .home-since { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 28px 20px; background: #FAF8F4; } .home-since-label { font-family: var(--sans); font-size: var(--text-xs); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); white-space: nowrap; } .home-since-line { flex: 1 1 auto; max-width: 120px; height: 1px; background: var(--line-gold); } /* ─── Home: Feature 4개 ─── */ .home-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; padding: 28px 20px; background: #FAF8F4; border-bottom: 1px solid var(--line); text-align: center; } .home-feature-icon { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; background: #F5EFE6; border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center; color: var(--gold); } /* 홈 features 개별 파일 아이콘 — 72×72px 표시 (PNG 원본 256×256은 유지, 비율 왜곡 방지) */ .home-features:not(.why-features) .home-feature-icon .home-feature-img { width: 72px; height: 72px; display: block; object-fit: contain; } /* 홈 features: 원형 배경/테두리 제거하고 아이콘만 단독 표시. 프레임을 아이콘 크기(72px)에 맞추고 기존 46px/모바일 44px 제한을 홈 한정으로 해제. WHY FARO(.why-features)·B&A·상담 섹션은 원형 유지되도록 :not()으로 제외 */ .home-features:not(.why-features) .home-feature-icon { width: 72px; height: 72px; background: none; border: none; border-radius: 0; } .home-feature h3 { font-size: 15px; letter-spacing: .03em; margin-bottom: 0; } .home-feature p { font-size: 15px; color: var(--muted); line-height: 1.5; } /* ─── Home: Collection / WHY / B&A Preview ─── */ .home-preview { display: flex; flex-direction: column; gap: 16px; padding: 44px 20px; border-bottom: 1px solid var(--line); cursor: pointer; } /* Eyebrow→Title 12px(전역 .eyebrow 16px 대신 이 컴포넌트 스코프에서만 재정의 — Collection/WHY/B&A 프리뷰 3곳 공유), h2 자체는 top margin을 갖지 않음(예전엔 eyebrow bottom + h2 top이 겹쳐 이중 간격이었음) */ .home-preview-copy .eyebrow { margin-bottom: 2px; } .home-preview-copy h2 { margin: 0; } /* font-size는 공용 h2 규칙(clamp) 그대로 상속 */ .home-preview-copy h2 .preview-line { display: block; white-space: nowrap; } .home-preview-copy .btn { margin-top: var(--space-5); } /* 본문 없이 제목→버튼: 24px, 버튼 margin-top 단일 소스 */ .home-preview-visual { min-height: 220px; } /* ─── Collection / WHY FARO 전용: 이미지를 섹션 전체에 채우고, 텍스트 쪽은 강한 브랜드톤 그라데이션으로 보호 */ /* (가로형 배경 이미지라 Hero처럼 텍스트 아래에서 이미지를 시작하면 경계선이 생겨, 대신 섹션 전체 이미지 + 강한 gradient 방식 사용) */ /* (Before & After는 home-preview-bg 클래스가 없어 위 기존 .home-preview 레이아웃 그대로 유지) */ .home-preview.home-preview-bg { position: relative; overflow: hidden; display: block; padding: 0; background: #F5EFE6; } .home-preview.home-preview-bg .home-preview-visual { position: absolute; inset: 0; min-height: 0; background-size: cover; background-position: center center; z-index: 0; } .home-preview.home-preview-bg .home-preview-copy { position: relative; z-index: 2; max-width: 78%; padding: 28px 20px 24px; background: transparent; } .home-preview.home-preview-bg .home-preview-copy > * { position: relative; z-index: 1; } .home-preview.home-preview-bg .home-preview-visual::before { content: none; } .home-preview.home-preview-bg .home-preview-copy::before { content: none; } /* 텍스트 보호는 섹션 전체 기준 overlay(::before)로 처리 — 배경은 구간별로 아래에서 지정 */ .home-preview.home-preview-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* Collection/WHY 프리뷰 버튼(≤1023px): .home-preview-copy가 tablet/PC에서 flex column인데 align-items 미지정 → 기본 stretch로 버튼이 컬럼 전체폭까지 늘어나 제목보다 커 보이던 문제. align-self로 이 버튼만 stretch에서 빠져나오게 함(부모 align-items는 건드리지 않아 다른 자식 영향 없음) */ @media (max-width: 1023px) { .home-preview.home-preview-bg .home-preview-copy .btn { align-self: flex-start; flex: 0 0 auto; /* 버튼 내용(예: "컬렉션 보기 →")의 실제 필요폭은 157px — 155px는 2px 부족해 줄바꿈 발생. 160px로 상향(요청 범위 140~180px 내). white-space:nowrap으로 줄바꿈 자체도 차단 */ inline-size: clamp(160px, 40%, 180px); max-inline-size: 100%; min-height: 48px; white-space: nowrap; } } /* ─── Collection / WHY FARO 모바일/태블릿(~1023px): 이미지는 섹션 전체, 상단 텍스트 영역만 강한 브랜드톤 그라데이션으로 보호 ─── */ @media (max-width: 767px) { .home-preview.home-preview-bg { min-height: clamp(320px, 42svh, 380px); } .home-preview.home-preview-bg::before { background: radial-gradient( ellipse 130% 95% at 6% 6%, #F5EFE6 0%, #EFE6D8 34%, rgba(239, 230, 216, .92) 46%, rgba(239, 230, 216, .58) 58%, rgba(239, 230, 216, .18) 70%, rgba(239, 230, 216, 0) 84% ); } } @media (min-width: 768px) and (max-width: 1023px) { /* 텍스트/이미지 영역을 실제로 분리(43%/57%) — DOM 순서가 그대로 좌우 배치를 결정 (Collection: copy→visual, WHY reverse: visual→copy 이미 마크업 순서가 이렇게 되어 있음). Collection과 WHY 모두 동일한 섹션 높이 사용 — 이미지 원본 비율별 aspect-ratio는 쓰지 않음 */ .home-preview.home-preview-bg { display: flex; flex-direction: row; align-items: stretch; height: clamp(340px, 42vw, 420px); } .home-preview.home-preview-bg::before { content: none; } .home-preview.home-preview-bg .home-preview-visual { position: relative; inset: auto; flex: 1 1 auto; min-width: 0; /* visual이 섹션 높이를 전부 사용(align-items:stretch) — cover로 여백 없이 채움 */ background-size: cover; background-repeat: no-repeat; } .home-preview.home-preview-bg[data-page="collection"] .home-preview-visual { background-position: center; } /* WHY: 인물 얼굴·상반신이 잘리지 않도록 상단 쪽으로 위치 조정 */ .home-preview.home-preview-bg[data-page="why"] .home-preview-visual { background-position: center 20%; } .home-preview.home-preview-bg .home-preview-copy { position: relative; flex: none; width: 43%; display: flex; flex-direction: column; justify-content: center; background: transparent; /* 좌측 여백을 Before & After 프리뷰(.home-preview[data-page="before"] 40px 고정)와 동일하게 통일 */ padding: 24px 40px; } /* 이미지↔copy 경계를 부드럽게: visual 자기 높이 전체를 덮는 ::after — copy 쪽이 아니라 visual 내부에서만 색이 번지므로 섹션 높이가 달라지거나 사각형 띠로 보이지 않음. Collection(copy가 왼쪽): 이미지 왼쪽 경계=배경색 → 오른쪽(이미지 안쪽)=투명 WHY(copy가 오른쪽, reverse): 이미지 오른쪽 경계=배경색 → 왼쪽(이미지 안쪽)=투명 */ .home-preview.home-preview-bg:not(.reverse) .home-preview-visual::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 180px; pointer-events: none; background: linear-gradient( 90deg, #F5EFE6 0%, rgba(245, 239, 230, .92) 28%, rgba(245, 239, 230, .8) 48%, rgba(245, 239, 230, .4) 72%, rgba(245, 239, 230, 0) 100% ); } .home-preview.home-preview-bg.reverse .home-preview-visual::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 180px; pointer-events: none; background: linear-gradient( 270deg, #F5EFE6 0%, rgba(245, 239, 230, .92) 28%, rgba(245, 239, 230, .8) 48%, rgba(245, 239, 230, .4) 72%, rgba(245, 239, 230, 0) 100% ); } } /* Home B&A 프리뷰: compare-frame 공통 패턴 사용 (WHY와 동일한 50:50+화살표+라벨 처리) */ .home-ba-preview { display: flex; flex-direction: column; gap: 16px; } .home-ba-set { display: flex; flex-direction: column; } @media (max-width: 767px) { /* 얼굴 정면/측면 페어: 위쪽 기준 크롭 유지 */ .home-preview[data-page="before"] .home-ba-set:nth-child(1) .ba-panel:first-child, .home-preview[data-page="before"] .home-ba-set:nth-child(1) .ba-panel.after { background-position: center 42%; } } /* Home B&A 프리뷰(1023px 이하): 타이틀/본문/버튼 가운데 정렬 — PC(1024+)는 좌측 정렬 그대로 유지 */ @media (max-width: 1023px) { .home-preview[data-page="before"] .home-preview-copy { text-align: center; max-width: 480px; margin: 0 auto; } .home-preview[data-page="before"] .home-preview-copy .btn { margin-left: auto; margin-right: auto; } /* "자연스러운 변화, 확실한 차이" 1줄 유지 전용 — 이 제목에만 폭 제한 완화 + 축소 폰트 적용 (전체 h2 크기·다른 프리뷰 제목엔 영향 없음, 360px 실측 후 확정) */ .home-preview[data-page="before"] .home-preview-copy h2 { max-width: none; white-space: nowrap; font-size: clamp(19px, 4.6vw, 30px); } .ba-title-break { display: none; } } /* ─── Home: Reservation + Store CTA ─── */ .home-cta-split { display: flex; flex-direction: column; } .home-cta-card { min-height: 240px; display: flex; align-items: flex-end; padding: 28px; cursor: pointer; overflow: hidden; } /* 사진 위 텍스트 가독성을 위한 어두운 스크림 (JS가 적용하는 실제 사진 위에 겹쳐짐) */ .home-cta-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 8, 6, .72) 0%, rgba(10, 8, 6, .32) 55%, rgba(10, 8, 6, .12) 100%); pointer-events: none; } .home-cta-copy { position: relative; z-index: 2; } .home-cta-copy .eyebrow { color: #dcc18a; } .home-cta-copy h3 { font-family: var(--sans); font-size: var(--font-h3); font-weight: 600; margin: 6px 0 var(--space-5); color: #fff; } .home-cta-copy .btn { margin-top: 0; } /* Reservation 카드 전용: 텍스트가 있는 왼쪽 영역 위주로만 크림톤 스크림 보호, 중앙/우측 이미지는 선명하게 유지 (Store는 기존 어두운 스크림 + 흰 텍스트 유지) */ .home-cta-card.light-overlay::before { background: linear-gradient( 90deg, rgba(250, 246, 239, .86) 0%, rgba(250, 246, 239, .72) 30%, rgba(250, 246, 239, .36) 52%, rgba(250, 246, 239, .08) 72%, rgba(250, 246, 239, 0) 100% ); } /* Store 카드 전용: 텍스트 쪽은 짙은 브라운/브론즈 톤으로 깊게 보호, 반대쪽은 사진이 선명하게 살아있도록 투명 (Reservation의 밝은 톤과 대비되는 진한 계열) */ .home-cta-card[data-page="stores"]::before { background: linear-gradient( 100deg, rgba(36, 24, 16, .8) 0%, rgba(36, 24, 16, .55) 30%, rgba(36, 24, 16, .24) 58%, rgba(36, 24, 16, 0) 82% ); } .home-cta-card.light-overlay .home-cta-copy .eyebrow { color: var(--gold); } .home-cta-card.light-overlay .home-cta-copy h3 { color: var(--ink); } /* ─── 태블릿 (768px~) ─── */ @media (min-width: 768px) { .home-features { grid-template-columns: repeat(4, 1fr); padding: 40px 40px; } .home-since { padding: 36px 20px; gap: 20px; } .home-since-line { max-width: 200px; } .consult-info-grid { grid-template-columns: 1fr 1fr; } } /* ─── 태블릿 전용 구간 (768px~1023px): PC도 모바일도 아닌 별도 구간 ─── */ /* Home Hero: 모바일과 같은 원리로 텍스트 뒤에는 이미지를 깔지 않고, 텍스트 안전영역 아래부터 이미지가 자연스럽게 시작 (Consult 히어로는 스코핑으로 영향 없음) */ @media (min-width: 768px) and (max-width: 1023px) { /* 태블릿 Hero: 모바일과 동일 원리 — 전용 크롭 이미지를 섹션 전체에 깔고, 텍스트 보호는 텍스트박스 뒤 그라데이션 하나로만 처리 (data-img-tablet 전용 크롭 이미지 사용). 높이는 PC와 같은 원리로 상한을 둠 — 100svh 그대로 두면 768×1024에서 hero가 첫 화면(960px+)을 과점해 Feature 영역이 전혀 보이지 않음 */ #home .home-hero { position: relative; overflow: hidden; display: block; min-height: clamp(480px, calc(100svh - var(--header-height-mobile) - 140px), 720px); background: #F5EFE6; } #home .home-hero::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--hero-band-width); z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--hero-protect-stops)); } #home .home-hero::after { content: none; } #home .home-hero .home-hero-visual { position: absolute; inset: 0; z-index: 0; min-height: 0; background-size: cover; background-position: center center; -webkit-mask-image: none; mask-image: none; } #home .home-hero .home-hero-visual::before { content: none; } #home .home-hero .home-hero-copy { position: relative; z-index: 2; max-width: 560px; padding: 56px 48px 0; background: transparent; } /* Collection / WHY FARO 태블릿 전용 보강 규칙은 위쪽 공통 @media (max-width: 1023px) 블록에서 처리 (모바일과 동일 원리) */ /* Reservation / Store: PC처럼 50:50 2분할 카드로 */ .home-cta-split { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; } .home-cta-card { min-height: 320px; } .home-cta-split .home-cta-card:first-child { border-right: 1px solid rgba(255, 255, 255, .14); } /* WHY 아이콘 스트립: 모바일 헤더 구간(~1023)에서는 본문도 compact — 2열×2줄 유지. .why-features 스코프라 Home 스트립(4열)은 무영향, 1024부터는 공통 4열 복귀 */ .why-features { grid-template-columns: repeat(2, 1fr); } /* B&A 프리뷰: 모바일용 세로 스택(풀폭 프레임 2개, 개당 약 568px)이 태블릿에서는 과대 → 페어 2개를 나란히 배치 + 좌우 여백 태블릿 기준 40px (compare-frame 구조/비율 자체는 무수정) */ .home-preview[data-page="before"] { padding: 56px 40px; gap: 20px; } .home-preview[data-page="before"] .home-ba-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } } /* ─── 데스크톱 (1024px~) ─── */ @media (min-width: 1024px) { /* Hero: PC는 좌측 텍스트 → 우측 이미지 방향으로 은은하게 밝아지는 가로 overlay */ .home-hero { display: flex; align-items: center; min-height: 560px; } /* Home 페이지 히어로만 첫 화면에 가깝게, 단 아래 Feature 4개 영역(약 160px)까지 첫 화면에 들어오도록 확보 (Consult 히어로는 .home-hero 기본값 560px 유지) */ #home .home-hero { min-height: clamp(480px, calc(100svh - var(--header-height-desktop) - 160px), 760px); } .home-hero-copy { max-width: 460px; padding: 0 40px 0 clamp(48px, calc((100vw - 1080px) / 2), 120px); } .home-hero-copy h1 { font-size: 42px; line-height: 1.24; } /* PC 중간 화면: 모델 얼굴이 텍스트 중앙 뒤로 오지 않도록 우측으로 이동 */ .home-hero-visual { background-position: 65% center; z-index: 0; } /* PC: 텍스트 박스 크기가 아니라 Hero 섹션 전체 세로 높이에 맞춘 좌측 안전영역 */ .home-hero::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--hero-band-width-desktop); z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--hero-protect-stops)); } .home-hero-copy { z-index: 2; } .home-features { width: 100%; padding: 40px clamp(48px, calc((100vw - 1080px) / 2), 120px); gap: 24px; align-items: start; } .home-feature-icon { width: 44px; height: 44px; } /* Collection / WHY FARO: 이미지를 섹션 전체에 채우고, 텍스트 쪽은 강한 브랜드톤 그라데이션으로 보호 */ /* 텍스트 카피 박스를 섹션(이미지) 높이만큼 stretch시켜 텍스트 영역과 이미지 영역의 세로 길이를 일치시킴 (기존 방식 유지) */ .home-preview.home-preview-bg { display: flex; align-items: stretch; justify-content: flex-start; min-height: 480px; } .home-preview.home-preview-bg.reverse { justify-content: flex-end; } .home-preview.home-preview-bg .home-preview-copy { flex: none; width: auto; max-width: 420px; display: flex; flex-direction: column; justify-content: center; background: transparent; padding: 0 40px 0 clamp(48px, calc((100vw - 1080px) / 2), 120px); } .home-preview.home-preview-bg.reverse .home-preview-copy { padding: 0 clamp(48px, calc((100vw - 1080px) / 2), 120px) 0 40px; } .home-preview.home-preview-bg .home-preview-copy::before { content: none; } /* Collection: 텍스트 왼쪽 — 왼쪽은 브랜드톤으로 강하게 보호, 오른쪽 이미지 방향으로 자연스럽게 투명 */ .home-preview.home-preview-bg:not(.reverse)::before { background: linear-gradient( 90deg, #F5EFE6 0%, #EFE6D8 30%, rgba(239, 230, 216, .88) 45%, rgba(239, 230, 216, .45) 60%, rgba(239, 230, 216, 0) 78% ); } /* WHY FARO: 텍스트 오른쪽 — 오른쪽은 브랜드톤으로 강하게 보호, 왼쪽 이미지 방향으로 자연스럽게 투명 */ .home-preview.home-preview-bg.reverse::before { background: linear-gradient( 270deg, #F5EFE6 0%, #EFE6D8 30%, rgba(239, 230, 216, .88) 45%, rgba(239, 230, 216, .45) 60%, rgba(239, 230, 216, 0) 78% ); } /* Before & After(home-preview-bg 미적용) 기존 좌우 분할 베이스 — Collection/WHY FARO도 이 bare 클래스를 공유하므로 그대로 유지 */ .home-preview { flex-direction: row; align-items: stretch; width: 100%; padding: 0; gap: 0; } .home-preview-copy { flex: 0 0 auto; width: clamp(320px, 30vw, 420px); display: flex; flex-direction: column; justify-content: center; padding: 60px 40px 60px clamp(48px, calc((100vw - 1080px) / 2), 120px); background: #FAF8F4; } /* Before & After 홈 미리보기 전용: 좌측 텍스트 + 우측 4이미지 가로형, 낮고 압축된 섹션 */ /* .ba-panel은 Before & After 서브페이지와 공유하는 클래스라 data-page="before"로 스코핑해 서브페이지에는 영향 없음 */ .home-preview[data-page="before"] { display: grid; grid-template-columns: minmax(320px, 36%) 1fr; align-items: center; min-height: 320px; padding-top: 72px; padding-bottom: 72px; } .home-preview[data-page="before"] .home-preview-copy { width: auto; padding: 0 40px 0 clamp(48px, calc((100vw - 1080px) / 2), 120px); background: transparent; } .home-preview[data-page="before"] .btn { width: auto; max-width: fit-content; align-self: flex-start; } /* 우측 이미지 영역: compare-frame 페어 2개가 나란히 (프레임 처리 자체는 공통 패턴이 담당) */ .home-preview[data-page="before"] .home-ba-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; max-width: 760px; } .home-preview[data-page="before"] .home-ba-set { display: flex; flex-direction: column; } /* 얼굴 페어: 시선축 기준 위쪽 크롭 유지 */ .home-preview[data-page="before"] .home-ba-set:nth-child(1) .ba-panel:first-child, .home-preview[data-page="before"] .home-ba-set:nth-child(1) .ba-panel.after { background-position: center 42%; } .home-cta-split { flex-direction: row; width: 100%; margin-top: 0; } .home-cta-card { flex: 1; min-height: 380px; } .home-cta-split .home-cta-card:first-child { border-right: 1px solid rgba(255, 255, 255, .14); } .consult-card { max-width: 720px; margin: 0 auto; padding: 48px; } .consult-phone-bar { max-width: 720px; margin: 20px auto 0; } } /* ─── PC 넓은 화면(1440px~): 텍스트 영역이 상대적으로 좁아지므로 얼굴 위치를 더 우측으로 ─── */ @media (min-width: 1440px) { .home-hero-visual { background-position: 58% center; } /* Wide PC 본문 정렬 (WHY 2-1 규칙의 Home 이식): 기존 clamp 식은 1320px에서 120px 상한에 걸려 그 이상에서 콘텐츠가 계속 퍼짐. full-bleed 배경(features/프리뷰)은 유지하고 내부 콘텐츠만 1200px 컬럼에 정렬 — calc((100% - 1200px)/2)는 1440px에서 정확히 120px = 기존값이라 점프 없음 */ .home-features { padding-left: calc((100% - 1200px) / 2); padding-right: calc((100% - 1200px) / 2); } .home-preview.home-preview-bg .home-preview-copy { padding-left: calc((100% - 1200px) / 2); /* border-box라 max-width 420px에 padding이 포함됨 — 늘어난 padding만큼 보정해 카피 콘텐츠 폭을 1440px 시점(260px)과 동일하게 유지. 1440px에서 = 420px */ max-width: calc(420px + (100% - 1440px) / 2); } .home-preview.home-preview-bg.reverse .home-preview-copy { padding-left: 40px; padding-right: calc((100% - 1200px) / 2); } /* B&A 프리뷰: 배경이 없는 본문형 섹션이라 섹션 자체를 1440으로 중앙 고정 (WHY 선례) */ .home-preview[data-page="before"] { max-width: 1440px; margin-left: auto; margin-right: auto; } } /* ═══ WHY FARO 페이지 (approved-design 레퍼런스 재구성) ═══ */ /* 공통: WHY 이미지 영역 placeholder — 원본 도착 전 브랜드톤 유지, 이미지 로드 성공 시 JS가 data-current-img를 세팅 → 라벨 자동 숨김 */ .why-hero-visual, .why-detail-visual, .why-ph { position: relative; background: linear-gradient(150deg, #F5EEE2 0%, #EADDC7 55%, #DCC8A8 100%); background-size: cover; background-position: center; } .why-hero-visual::after, .why-detail-visual::after, .why-ph::after { content: attr(data-label); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: var(--text-xs); letter-spacing: .3em; text-transform: uppercase; color: rgba(168, 135, 93, .55); pointer-events: none; } .why-hero-visual[data-current-img]::after, .why-detail-visual[data-current-img]::after, .why-ph[data-current-img]::after { content: none; } .why-ph::after { font-size: 10px; letter-spacing: .2em; } /* ─── WHY Hero: 모바일 = 이미지 위 / 텍스트 아래 (mobile-whyfaro.png 순서) ─── */ .why-hero { display: flex; flex-direction: column-reverse; background: #F5EFE6; overflow: hidden; border-bottom: 1px solid rgba(38, 29, 22, .08); } .why-hero-copy { padding: 40px 20px 48px; } .why-hero-copy .page-title { font-size: clamp(32px, 4vw, 44px); /* h2보다 명확히 크게(Page Hero) — Home Hero는 별도 규칙, 무영향 */ line-height: 1.22; max-width: 560px; margin: 0 0 2px; } .why-hero-visual { width: 100%; aspect-ratio: 4 / 5; } .why-hero-copy .btn { margin-top: var(--space-6); align-self: flex-start; } /* Hero 문맥: 32px */ /* WHY Hero 태블릿/PC: 메인 hero와 동일 방식 — 이미지가 섹션 전체를 풀블리드로 채우고(오버레이 없음, 선명 유지), 섹션 전체 높이의 좌측 브랜드톤 세로 밴드가 텍스트를 보호하며 우측으로 자연 페이드 */ @media (min-width: 768px) { .why-hero { position: relative; flex-direction: row; align-items: center; min-height: var(--subhero-min-h-tab); } .why-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; max-width: var(--subhero-copy-w-tab); padding: var(--subhero-copy-pad-tab); } .why-hero-visual { position: absolute; inset: 0; width: auto; aspect-ratio: auto; background-position: var(--subhero-img-pos); } /* 메인 hero PC와 동일한 그라데이션 레시피 (why-hero 스코프 사본) */ .why-hero::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--hero-band-width); z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--hero-protect-stops)); } /* placeholder 라벨은 이미지가 실제로 보이는 우측 절반 중앙에 */ .why-hero-visual::after { inset: 0 0 0 50%; } } @media (min-width: 1024px) { .why-hero { min-height: var(--subhero-min-h-pc); } .why-hero-copy { max-width: var(--subhero-copy-w-pc); padding: var(--subhero-copy-pad-pc); } .why-hero::before { width: var(--hero-band-width-desktop); } } /* ─── WHY: NATURAL DETAIL (모바일 = 이미지 위 / 텍스트 아래, PC = 좌 큰 이미지 / 우 텍스트) 여백은 고정 px 규칙 (docs/faro-responsive-design-rules.md 기반 지시값) ─── */ .why-detail { padding: 44px 20px; } .why-detail-visual { width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; } .why-detail-copy { padding: 16px 0 0; } .why-detail-copy .eyebrow { margin-bottom: 2px; } /* Eyebrow→제목: 2px */ .why-detail-copy h2 { margin-bottom: 2px; /* 제목→설명: 2px */ word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; } .why-detail-copy .btn { margin-top: 24px; } /* 설명→버튼: 24px */ /* 태블릿(768~1023)은 모바일과 같은 1열 stack 유지 — 헤더가 모바일형인 구간에서는 본문도 compact 1열 (2열 진입은 PC 1024부터) */ @media (min-width: 768px) { .why-detail { padding: 56px 40px; } .why-detail-visual { aspect-ratio: 16 / 10; } .why-detail-copy { padding: 20px 0 0; } .why-detail-copy p, .why-card-copy p { word-break: keep-all; } } @media (min-width: 1024px) { .why-detail { display: grid; /* 지시값 54%/46% — %트랙+gap은 가로 오버플로를 유발하므로 동일 비율의 fr로 구현 */ grid-template-columns: 52fr 48fr; gap: 40px; align-items: center; padding: 72px clamp(48px, calc((100vw - 1080px) / 2), 120px); } .why-detail-copy { padding: 0; } /* 고객후기 프레임과 같은 여백감: 이미지가 컬럼을 꽉 채우지 않고 독립 프레임처럼 */ .why-detail-visual { aspect-ratio: 16 / 9; max-width: 620px; justify-self: start; } } /* ─── WHY: CRAFT / B&A 프리뷰 공통 카드 — 고정 px 여백 규칙 ─── */ .why-craft-preview { padding: 0 20px 0; } .why-ba-preview { padding: 20px 20px 32px; } /* 고객후기(B&A 프리뷰) 모바일: 설명→버튼 24px(공용 규칙과 동일), fit-content 버튼 */ .why-ba-preview .why-card-copy .btn { margin-top: 24px; } /* Tablet/PC(768+): copy가 이미지 컬럼과 stretch로 높이를 맞추므로, 남는 높이는 버튼의 margin-top:auto로만 흡수 — eyebrow/제목/설명 사이 고정 간격은 그대로 유지. 버튼은 copy 전체폭 대신 fit-content 수준의 고정 폭만 사용(공용 .btn의 stretch 방지) */ @media (min-width: 768px) { .why-ba-preview .why-card-copy .btn { margin-top: auto; align-self: flex-start; width: fit-content; min-width: 145px; max-width: 185px; padding-inline: 22px; } } /* 실제 원본 사진 500×800(0.625:1, 세로형) — 프레임을 원본 비율에 최대한 맞춰 cover 크롭을 사실상 제거. (1.5/1.7 같은 가로로 넓은 비율은 정수리·머리끝이 크게 잘려 반려됨) */ .why-ba-preview .compare-frame { aspect-ratio: 1.25 / 1; } .why-ba-preview .compare-frame > .ba-panel { background-position: center top; } .why-card { background: #FAF6EF; border: 1px solid var(--line); border-radius: 16px; padding: 18px; min-width: 0; } .why-card-copy .eyebrow { margin-bottom: 2px; } /* Eyebrow→제목: 2px */ .why-card-copy h2 { font-size: var(--font-subtitle); line-height: 1.25; margin-bottom: 2px; /* 제목→설명: 2px */ word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; } .why-card-copy .btn { margin-top: 24px; } /* 설명→버튼: 24px */ /* CRAFT 이미지 3장: 모바일 = 1큰 + 2작은 그리드 (고객후기 프레임과 동일한 여백감) */ .why-craft-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; } .why-craft-imgs .why-ph { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; min-width: 0; } .why-craft-imgs .why-ph:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } /* ─── B&A compare-frame 공통 패턴 (사용처: WHY 프리뷰 + Home 프리뷰 한정) ─── 50:50 라운드 프레임 + 중앙 원형 화살표 + 이미지 내 BEFORE/AFTER 라벨. 프레임 1.22/1(모바일)·1.28/1(768+) → 칸 하나 ≈0.64 = 원본 세로 사진 비율, 크롭 최소화. 공통 .ba-panel(common.css)은 무수정 — 이 스코프에서만 override */ .compare-frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; border-radius: 14px; aspect-ratio: 1.22 / 1; } .compare-frame > .ba-panel { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; border-radius: 0; aspect-ratio: auto; background-size: cover !important; background-position: center center; } .compare-arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--line-gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); pointer-events: none; } @media (min-width: 768px) { .compare-frame { aspect-ratio: 1.28 / 1; } /* why-ba-preview는 위에서 1.25/1로 전 구간 고정(원본 500×800 비율 보호) — 여기서 재정의하지 않음 */ } /* 태블릿(768~1023): 카드도 compact 1열 — 텍스트 위 / 이미지 아래. 2열(좌 텍스트/우 이미지)은 PC 1024부터 */ @media (min-width: 768px) { .why-craft-preview { padding: 0 40px 0; } .why-ba-preview { padding: 24px 40px 40px; } .why-card { padding: 28px 32px; border-radius: 20px; } .why-craft-imgs, .why-ba-imgs { width: 100%; margin-top: 20px; } /* 고객후기 이미지 전용 margin-top 제거 — Craft 프리뷰/메인 B&A는 위 20px 규칙 그대로 유지 */ .why-ba-preview .why-ba-imgs { margin-top: 0; } /* CRAFT 갤러리: compact에서는 카드 내부 폭 전체 사용 (560 상한을 두면 좌측에 붙고 우측이 비어 보임 — PC 상한/정렬은 @1024 블록이 다시 지정) */ .why-craft-imgs { max-width: none; justify-self: stretch; grid-template-columns: repeat(3, 1fr); gap: 10px; } /* B&A 프레임: 태블릿 스택 레이아웃에서 세로로 지나치게 길어지지 않도록 폭 축소(560→420, 비율은 1.25/1 그대로라 크롭 없음), 카드 중앙 정렬 (margin auto는 PC에서 컬럼폭 = 프레임폭이라 자동으로 무효 → PC 우측 정렬 불변) */ .why-ba-imgs { max-width: 420px; margin-left: auto; margin-right: auto; justify-self: center; } .why-craft-imgs .why-ph:first-child { grid-column: auto; aspect-ratio: 3 / 4; } /* 고객후기 카드: 태블릿에서도 명확한 2열(좌 텍스트/우 이미지) — 이미지 비율(1.25/1)이 텍스트 콘텐츠보다 훨씬 높아 align-items:start만 쓰면 버튼 아래 큰 공백이 생김. stretch로 두 컬럼 높이를 맞추고, copy는 기본 flex-start로 상단에 모아 eyebrow→제목→설명 간격은 고정값 그대로 유지 — 남는 높이는 버튼의 margin-top:auto(아래 공용 규칙)로만 흡수 */ .why-ba-preview .why-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 24px; } .why-ba-preview .why-card-copy { display: flex; flex-direction: column; } .why-ba-preview .why-ba-imgs { margin-top: 0; max-width: none; width: 100%; justify-self: stretch; } /* 정수리~머리끝 크롭 금지: cover 대신 contain + 카드와 동일 배경으로 레터박스 처리 */ .why-ba-preview .compare-frame > .ba-panel { background-size: contain !important; background-color: #FAF6EF; } } @media (min-width: 1024px) { .why-craft-preview { padding: 0 clamp(48px, calc((100vw - 1080px) / 2), 120px) 0; } .why-ba-preview { padding: 28px clamp(48px, calc((100vw - 1080px) / 2), 120px) 56px; } /* 이미지 컬럼을 실제 블록 폭(최대 560px)으로 제한 — fr 비율 컬럼은 560 초과분이 컬럼 내부 빈 여백으로 남았음. 남는 공간은 space-between으로 컬럼 사이에 배분 */ .why-card { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 560px); justify-content: space-between; gap: 40px; padding: 32px 36px; align-items: center; } /* 카드 안 이미지 공통 규칙 (PC): CRAFT·B&A 동일 */ .why-craft-imgs, .why-ba-imgs { width: 100%; max-width: 560px; justify-self: end; margin-top: 0; } /* 고객후기 카드 전용: 이미지 컬럼 폭을 줄여 카드 세로 높이를 Craft 프리뷰 카드와 비슷하게 — 비율(1.25/1)은 그대로라 크롭 없이 높이만 줄어듦. align-items:stretch, copy는 상단에 모으고 남는 높이는 버튼 margin-top:auto로만 흡수(tablet과 동일 원리) */ .why-ba-preview .why-card { grid-template-columns: minmax(260px, 360px) minmax(0, 340px); align-items: stretch; } .why-ba-preview .why-card-copy { display: flex; flex-direction: column; } .why-ba-preview .why-ba-imgs { max-width: 340px; } .why-ba-preview .compare-frame > .ba-panel { background-size: contain !important; background-color: #FAF6EF; } } /* ─── CRAFT 전용 분리 (공통 .why-card / B&A 규칙 뒤에 배치해 우선 적용): 3장 갤러리는 compare-frame과 달리 고정 max-width로 묶으면 오른쪽에 작게 몰리고 카드 중앙에 빈 여백이 남음 → 이미지 컬럼이 남은 영역을 그대로 채우게 함. B&A(.why-ba-imgs/compare-frame)는 무수정 ─── */ @media (min-width: 1024px) { .why-craft-preview .why-card { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 40px; } .why-craft-imgs { width: 100%; max-width: none; justify-self: stretch; margin-top: 0; gap: 12px; } } /* ─── Wide PC(1440+): 본문 섹션 폭 고정 — hero/CTA full-bleed는 유지. border-box 기준 max-width 1440 = 좌우 padding 120×2 포함 → 콘텐츠 폭 1200px. 1440px 뷰포트 시점의 레이아웃과 같은 값이라 경계에서 점프 없음 ─── */ @media (min-width: 1440px) { .why-detail, .why-craft-preview, .why-ba-preview { max-width: 1440px; margin-left: auto; margin-right: auto; } /* CRAFT 갤러리 과대 확대 방지: 이미지 720 상한 + 컬럼도 같은 폭으로 재배분. 텍스트 컬럼 상한 368 = 카드 콘텐츠 1128 - 이미지 720 - gap 40 → 내부 빈 여백 0 */ .why-craft-preview .why-card { grid-template-columns: minmax(260px, 368px) minmax(0, 720px); } .why-craft-imgs { max-width: 720px; } } /* ─── WHY 모바일: 텍스트 블록 조밀화 — 텍스트·버튼·이미지가 한 덩어리로 읽히도록 (base 규칙 뒤에 배치해 모바일에서만 오버라이드, PC/Tablet 블록 무영향) ─── */ @media (max-width: 767px) { /* 스택 레이아웃에서 텍스트는 full width, 강제 줄바꿈 없이 자연 흐름 */ .why-detail-copy, .why-card-copy { width: 100%; max-width: none; } .why-detail-copy p, .why-card-copy p { max-width: none; line-height: 1.65; margin: 0; word-break: keep-all; } .why-detail-copy .btn, .why-card-copy .btn { margin-top: 14px; } .why-detail-copy h2 { margin-bottom: 2px; } .why-card-copy h2 { margin-bottom: 2px; } /* 단독 섹션 이미지도 모바일에서는 카드 이미지들과 같은 14px 라운딩으로 통일 */ .why-detail-visual { border-radius: 14px; } .why-craft-imgs, .why-ba-imgs { width: 100%; max-width: none; justify-self: stretch; margin-top: 16px; } .why-ba-preview .why-ba-imgs { margin-top: 12px; } } /* ─── WHY: Reservation / Store CTA 카드 (Home CTA와 동일 톤, WHY 전용 클래스) ─── */ .why-cta-split { display: grid; grid-template-columns: 1fr; margin-top: 0; /* CTA 위 간격은 .why-ba-preview의 padding-bottom으로만 제어 */ } .why-cta-card { position: relative; overflow: hidden; min-height: 360px; display: flex; align-items: center; background-color: #F1E9DA; background-size: cover; background-position: center; cursor: pointer; } /* Reservation: 밝은 사진 → 크림톤 안전영역, 잉크색 텍스트 */ .why-cta-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(245, 239, 230, .94) 0%, rgba(245, 239, 230, .62) 45%, rgba(245, 239, 230, 0) 78%); } /* Store: 진한 사진 → 다크 브라운 안전영역, 흰색 텍스트 */ .why-cta-card--store::before { background: linear-gradient(100deg, rgba(36, 24, 16, .78) 0%, rgba(36, 24, 16, .42) 50%, rgba(36, 24, 16, 0) 80%); } .why-cta-copy { position: relative; z-index: 1; max-width: 460px; padding: 44px 24px; } .why-cta-copy h3 { font-size: 24px; margin-bottom: 12px; } .why-cta-copy p { font-size: 15px; line-height: 1.7; overflow-wrap: break-word; } .why-cta-copy .btn { margin-top: 22px; } .why-cta-card--store .why-cta-copy h3 { color: #fff; } .why-cta-card--store .why-cta-copy p { color: rgba(255, 255, 255, .85); } @media (min-width: 768px) { .why-cta-card { min-height: 400px; } .why-cta-copy { padding: 48px 36px; } } @media (min-width: 1024px) { /* Reservation/Store 2열은 PC부터 (1024 미만은 1열 stack) */ .why-cta-split { grid-template-columns: 1fr 1fr; } .why-cta-copy { padding: 56px 48px; } } /* ═══ CRAFT 페이지 (approved-design pc/mobile-craft 레퍼런스 재구성) ═══ */ /* placeholder 패턴 (WHY 패턴 사본 — craft 스코프, 에셋 도착 전 라벨 표시) */ .craft-hero-visual, .craft-ph { position: relative; background: linear-gradient(150deg, #F5EEE2 0%, #EADDC7 55%, #DCC8A8 100%); background-size: cover; background-position: center; } .craft-hero-visual::after, .craft-ph::after { content: attr(data-label); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(168, 135, 93, .55); pointer-events: none; } .craft-hero-visual[data-current-img]::after, .craft-ph[data-current-img]::after { content: none; } /* ─── CRAFT Hero: WHY hero 검증 패턴 이식 (셀렉터만 교체, 모바일은 버튼 노출 유지) ─── */ .craft-hero { display: flex; flex-direction: column-reverse; background: #F5EFE6; overflow: hidden; } .craft-hero-copy { padding: 40px 20px 48px; } .craft-hero-copy .page-title { font-size: clamp(32px, 4vw, 44px); /* h2보다 명확히 크게(Page Hero) — Home Hero는 별도 규칙, 무영향 */ line-height: 1.22; max-width: 560px; margin: 0 0 2px; } .craft-hero-visual { width: 100%; aspect-ratio: 4 / 5; } .craft-hero-copy .btn { margin-top: var(--space-6); align-self: flex-start; } /* Hero 문맥: 32px */ @media (min-width: 768px) { .craft-hero { position: relative; flex-direction: row; align-items: center; min-height: var(--subhero-min-h-tab); } .craft-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; max-width: var(--subhero-copy-w-tab); padding: var(--subhero-copy-pad-tab); } .craft-hero-visual { position: absolute; inset: 0; width: auto; aspect-ratio: auto; background-position: var(--subhero-img-pos); } .craft-hero::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--hero-band-width); z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--hero-protect-stops)); } .craft-hero-visual::after { inset: 0 0 0 50%; } } @media (min-width: 1024px) { .craft-hero { min-height: var(--subhero-min-h-pc); } .craft-hero::before { width: var(--hero-band-width-desktop); } .craft-hero-copy { max-width: var(--subhero-copy-w-pc); padding: var(--subhero-copy-pad-pc); } } /* ─── CRAFT 스탯 밴드: 카운터 4개 (compact 2×2 / PC 4열) ─── visual stack: hero(full-bleed)→stats는 stats PT 소유, stats→process는 stats PB 소유. 개별/그룹 박스 대신 섹션 자체가 연한 웜톤 full-width 배경 띠 — .craft-stats가 이미 .app(width:100%)의 직계 자손이라 100vw 트릭 없이도 화면 좌우 끝까지 자연 확장. 단, 1440px+에서 .craft-stats를 .craft-process/.craft-summary와 같은 폭 고정 그룹에 넣으면 배경까지 1440px로 갇혀버려 실측 시 좌우 끝에 여백이 보임(반려) — 섹션 자체는 그 그룹에서 빼고 콘텐츠(.craft-stats-grid)에만 max-width를 줘서 "배경 full-bleed / 콘텐츠만 폭 제한"으로 분리 */ .craft-stats { padding: 44px 20px; background: #EFE6D8; } .craft-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; max-width: 1200px; margin: 0 auto; text-align: center; } .craft-stat { display: flex; flex-direction: column; align-items: center; } .craft-stat-num { display: flex; flex-direction: column; align-items: center; font-family: var(--sans); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; color: var(--ink); line-height: 1.1; } .craft-stat-num small { display: block; margin: 4px 0 0; font-size: 15px; font-weight: 500; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; } .craft-stat h3 { font-size: 15px; margin: 10px 0 0; } .craft-stat p { max-width: 150px; margin: 0 auto; font-size: 15px; color: var(--muted); line-height: 1.55; word-break: keep-all; } /* ─── PROCESS 12단계 (compact 2열 / PC 3열 — mobile-craft 레퍼런스가 2열) ─── top padding: 통계 밴드와 붙어 보이지 않도록 확보(모바일 48 / 태블릿 56 / PC 64) */ .craft-process { padding: 48px 20px 44px; } .craft-process .eyebrow, .craft-process h2, .craft-process-sub { text-align: center; } .craft-process h2 { margin: 8px 0 10px; } .craft-process-sub { color: var(--muted); margin: 0 0 24px; word-break: keep-all; } .craft-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .craft-step { background: #FAF6EF; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-align: left; min-width: 0; } .craft-step .craft-ph { aspect-ratio: 4 / 3; } .craft-step-copy { padding: 14px 14px 16px; } .craft-step-copy small { color: var(--gold); letter-spacing: .12em; font-size: 15px; } .craft-step-copy h3 { font-size: 15px; margin: 6px 0 0; } .craft-step-copy p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; word-break: keep-all; } /* ─── 요약 4카드 (compact 2열 / PC 4열) ─── */ .craft-summary { padding: 0 20px 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .craft-sum-card { padding: 8px; text-align: center; min-width: 0; } /* 번호형 배지 — 그림 SVG 대신 01~04 숫자만 담은 단순 원형 심볼(.home-feature-icon과 동일 프레임 재사용) */ .craft-sum-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; background: #F5EFE6; border: 1px solid rgba(199, 170, 114, .4); color: var(--gold); font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .04em; } .craft-sum-card small { color: var(--gold); letter-spacing: .16em; font-size: 15px; } .craft-sum-card h3 { font-size: 16px; margin: 8px 0 0; } .craft-sum-card p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; word-break: keep-all; } /* ─── Craft 하단 CTA(장인의 철학 / 왜 특별할까요): WHY CTA(.why-cta-*) 구조 재사용, 이 블록은 Craft 전용 modifier만 추가 — .why-cta-split/.why-cta-card 기본 규칙은 수정하지 않는다. 1차 크림톤 오버레이는 하얗게 날아가 실패, 2차 검정/차콜 scrim은 톤이 맞지 않아 반려됨 → #BFA78A(웜 베이지/골드) 기반 scrim + 좌상단 텍스트 정렬 + 차콜 텍스트로 확정 */ .craft-cta-split .craft-cta-card { align-items: flex-start; justify-content: flex-start; } .craft-cta-split .craft-cta-card::before { background: linear-gradient(180deg, rgba(191, 167, 138, .82) 0%, rgba(191, 167, 138, .58) 30%, rgba(191, 167, 138, .20) 58%, rgba(191, 167, 138, 0) 85%), linear-gradient(90deg, rgba(191, 167, 138, .72) 0%, rgba(191, 167, 138, .42) 40%, rgba(191, 167, 138, .12) 70%, rgba(191, 167, 138, 0) 100%); } .craft-cta-split .craft-cta-card--special::before { background: linear-gradient(180deg, rgba(191, 167, 138, .86) 0%, rgba(191, 167, 138, .62) 28%, rgba(191, 167, 138, .24) 56%, rgba(191, 167, 138, 0) 82%), linear-gradient(90deg, rgba(191, 167, 138, .76) 0%, rgba(191, 167, 138, .48) 42%, rgba(191, 167, 138, .16) 72%, rgba(191, 167, 138, 0) 100%); } .craft-cta-split .why-cta-copy { padding: clamp(28px, 4vw, 56px); max-width: 520px; color: #2A2118; } .craft-cta-split .why-cta-copy h3 { color: #2A2118; text-shadow: 0 1px 8px rgba(250, 246, 239, .35); } .craft-cta-split .why-cta-copy p { color: #3A2B1F; text-shadow: 0 1px 8px rgba(250, 246, 239, .3); } /* ─── CTA 밴드 (full-bleed 배경, 내부 콘텐츠만 정렬) ─── */ .craft-cta { background: #EFE6D8; padding: 44px 20px; } .craft-cta h3 { font-family: var(--sans); font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 10px; word-break: keep-all; } .craft-cta p { color: var(--muted); margin: 0 0 18px; word-break: keep-all; } /* ─── 태블릿(768~1023): compact 유지, 좌우 40px + 섹션 상하 56px ─── */ @media (min-width: 768px) { .craft-stats { padding: 56px 40px; } .craft-stats-grid { gap: 32px 20px; } .craft-process { padding: 56px 40px 56px; } .craft-steps { gap: 20px; } .craft-step-copy { padding: 18px; } .craft-summary { padding: 0 40px 56px; gap: 16px; } .craft-sum-card { padding: 8px 16px; } .craft-cta { padding: 56px 40px; } } /* ─── PC(1024+): 2열/다열 전환 ─── */ @media (min-width: 1024px) { .craft-stats { padding: 72px clamp(48px, calc((100vw - 1080px) / 2), 120px); } .craft-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } .craft-process { padding: 64px clamp(48px, calc((100vw - 1080px) / 2), 120px) 72px; } .craft-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .craft-summary { padding: 0 clamp(48px, calc((100vw - 1080px) / 2), 120px) 72px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .craft-cta { padding: 56px clamp(48px, calc((100vw - 1080px) / 2), 120px); } .craft-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .craft-cta p { margin-bottom: 0; } .craft-cta .btn { flex: 0 0 auto; } } /* ─── Wide PC(1440+): 본문 섹션 폭 고정 (WHY 2-1 규칙), CTA/STATS는 full-bleed 배경 유지 ─── */ @media (min-width: 1440px) { .craft-process, .craft-summary { max-width: 1440px; margin-left: auto; margin-right: auto; } /* .craft-stats는 배경이 있어 이 그룹에서 제외 — 콘텐츠 폭 제한은 .craft-stats-grid의 max-width:1200px(위에서 상시 적용)가 담당해 1440px+에서도 동일하게 동작 */ .craft-cta { padding-left: calc((100% - 1200px) / 2); padding-right: calc((100% - 1200px) / 2); } } /* ═══ BEFORE & AFTER 페이지 (approved-design pc/mobile-before&after 레퍼런스 draft 재구성) ═══ 공통 .ba / 고정 min-height .ba-panel 방식에 의존하지 않고 .ba-* 스코프로 구성. 페어 이미지는 compare-frame 공통 패턴 재사용 (min-height:0 override 포함) */ /* placeholder 패턴 (WHY/CRAFT 사본 — ba 스코프) */ .ba-hero-visual, .ba-link-visual { position: relative; background: linear-gradient(150deg, #F5EEE2 0%, #EADDC7 55%, #DCC8A8 100%); background-size: cover; background-position: center; } .ba-hero-visual::after, .ba-link-visual::after { content: attr(data-label); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(168, 135, 93, .55); pointer-events: none; } .ba-hero-visual[data-current-img]::after, .ba-link-visual[data-current-img]::after { content: none; } /* ─── B&A Hero: WHY/CRAFT 검증 패턴 이식 ─── */ .ba-hero { display: flex; flex-direction: column-reverse; background: #F5EFE6; overflow: hidden; } .ba-hero-copy { padding: 40px 20px 48px; } .ba-hero-copy .page-title { font-size: clamp(32px, 4vw, 44px); /* h2보다 명확히 크게(Page Hero) — Home Hero는 별도 규칙, 무영향 */ line-height: 1.22; max-width: 560px; margin: 0 0 2px; } .ba-hero-visual { width: 100%; aspect-ratio: 4 / 5; } .ba-hero-copy .btn { margin-top: var(--space-6); align-self: flex-start; } /* Hero 문맥: 32px */ @media (min-width: 768px) { .ba-hero { position: relative; flex-direction: row; align-items: center; min-height: var(--subhero-min-h-tab); } .ba-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; max-width: var(--subhero-copy-w-tab); padding: var(--subhero-copy-pad-tab); } .ba-hero-visual { position: absolute; inset: 0; width: auto; aspect-ratio: auto; background-position: var(--subhero-img-pos); } .ba-hero::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--hero-band-width); z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--hero-protect-stops)); } .ba-hero-visual::after { inset: 0 0 0 50%; } } @media (min-width: 1024px) { .ba-hero { min-height: var(--subhero-min-h-pc); } .ba-hero::before { width: var(--hero-band-width-desktop); } .ba-hero-copy { max-width: var(--subhero-copy-w-pc); padding: var(--subhero-copy-pad-pc); } } /* ─── 필터 pill (JS 없이 UI만 — 전체 active 고정, common .tab과 클래스 분리) ─── visual stack: hero(full-bleed)→filter는 filter PT 소유, filter→cases는 filter PB(그룹 간격) 소유 */ .ba-filter { padding: 44px 20px 24px; } .ba-filter-tabs { display: flex; gap: 8px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .ba-filter-tabs::-webkit-scrollbar { display: none; } .ba-pill { flex-shrink: 0; white-space: nowrap; height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--muted); background: transparent; } .ba-pill.active { background: var(--brown); color: #fff; border-color: var(--brown); } /* 매칭 사례가 아직 없는 카테고리(첫 가발): 비활성 노출 — 사례 에셋 추가 시 disabled 제거 */ .ba-pill:disabled { opacity: .45; cursor: default; } /* ─── 사례 카드 4개 (compact 1열 / PC 4열) — 이미지부는 compare-frame 재사용 ─── */ .ba-cases { padding: 0 20px 44px; display: grid; grid-template-columns: 1fr; gap: 24px; } .ba-case { background: #FAF6EF; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; min-width: 0; } .ba-case .compare-frame { border-radius: 0; } .ba-case-copy { padding: 18px; } .ba-case-copy h3 { font-size: 17px; margin: 0; word-break: keep-all; } .ba-case-copy p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; word-break: keep-all; } /* ─── CRAFTSMANSHIP / ATELIER 프리뷰 링크 카드 (compact 1열 / PC 2열) ─── */ .ba-preview-links { padding: 0 20px 44px; display: grid; grid-template-columns: 1fr; gap: 24px; } .ba-link-card { background: #FAF6EF; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; min-width: 0; } .ba-link-visual { aspect-ratio: 16 / 9; } .ba-link-copy { padding: 18px; } .ba-link-copy h3 { font-family: var(--sans); font-size: clamp(19px, 2vw, 24px); margin: 8px 0 0; word-break: keep-all; } .ba-link-copy p { font-size: 15px; color: var(--muted); line-height: 1.65; margin: 0 0 16px; word-break: keep-all; } /* ─── RESERVATION (compact 1열 / PC 3열): 좌우를 별도 카드로 나누지 않고 하나의 섹션형 CTA로 — 외곽 border/radius/shadow 없이 아주 연한 배경만 사용. var(--ivory)는 실측 결과 주변 배경과 거의 같은 값이라 육안상 구분 안 됨 — Craft와 동일 근거로 검증된 웜톤(#EFE6D8)으로 대체. .ba-reserve(배경 full-bleed)와 .ba-reserve-inner(콘텐츠 max-width:1200)를 분리 — Craft 통계와 동일 원칙. 전화/카카오톡/CTA를 .ba-reserve-actions의 동일 레벨 자식으로 둬 PC 3열 grid가 안정적으로 동작 */ .ba-reserve { padding: 24px 20px 36px; background: #EFE6D8; } .ba-reserve-inner { max-width: 1200px; margin: 0 auto; } /* 상단 소개(RESERVATION/제목/설명) 중앙정렬 — .ba-reserve-points(4개 포인트 카드)는 이미 자체적으로 text-align:center라 영향 없음, 카드 배경/테두리/폭은 무수정 */ .ba-reserve-copy .eyebrow { margin-bottom: 2px; text-align: center; } /* Eyebrow→제목: 2px */ .ba-reserve-copy h2 { margin: 0 0 2px; text-align: center; } /* 제목→설명: 2px */ .ba-reserve-copy > p { color: var(--muted); line-height: 1.65; margin: 0 auto 20px; max-width: 560px; text-align: center; word-break: keep-all; } .ba-reserve-points { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; } .ba-point { text-align: center; display: flex; flex-direction: column; align-items: center; } .ba-point .home-feature-icon { margin: 0 auto 8px; } .ba-point h4 { font-size: 15px; margin: 0; } .ba-point p { font-size: 15px; color: var(--muted); margin: 0; word-break: keep-all; } /* 상담 포인트 ↔ 예약 방법 구분: 중앙형 gradient divider(브라우저/콘텐츠 전체폭 아님, 가운데만 보이다 양끝으로 사라짐) — 위아래 여백이 곧 두 정보 그룹 사이 간격(Mobile 28px) */ .ba-reserve-divider { height: 1px; width: 100%; max-width: 460px; margin: 28px auto; background: linear-gradient( 90deg, transparent 0%, rgba(139, 115, 81, .22) 25%, rgba(139, 115, 81, .38) 50%, rgba(139, 115, 81, .22) 75%, transparent 100% ); } /* 제목·안내문구·연락수단·CTA 버튼까지 하나의 라운드 박스로 — .ba-case/.ba-link-card와 완전히 동일한 톤 (배경 #FAF6EF, 테두리 var(--line), border-radius 16px, 그림자 없음) */ .ba-reserve-methods { background: #FAF6EF; border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; } /* 예약 안내 행: 좌측 제목 -------- 우측 안내문 한 줄 구성. auto/minmax(30px,1fr)/auto — 가운데 점선 트랙이 남는 공간만 차지하고 최소 30px은 항상 확보. 모바일에서 공간이 부족하면 좌우 auto 트랙이 각자의 min-content까지 줄어들며, 좌측은 white-space:nowrap으로 줄바꿈을 막고 우측은 자연스럽게 최대 2줄까지 감싸짐 */ .ba-reserve-methods-intro { display: grid; grid-template-columns: auto minmax(30px, 1fr) auto; align-items: center; gap: 16px; width: 100%; margin-bottom: 14px; /* 기존 .ba-methods-sub의 margin-bottom:14px를 컨테이너로 이전 */ } .ba-reserve-methods h3 { font-size: var(--font-h3); margin: 0; white-space: nowrap; } /* 좌측 제목: 줄바꿈 금지 */ .ba-methods-divider { border-top: 1px dashed var(--line); } .ba-methods-sub { font-size: 15px; color: var(--muted); margin: 0; text-align: right; } /* 전화 예약 / 카카오톡 상담 / CTA — 모바일 1열 스택(DOM 순서 그대로) */ .ba-reserve-actions { display: flex; flex-direction: column; } .ba-reserve-action { display: flex; flex-direction: column; gap: 0; /* 예약 방법 제목→상세정보: 0px */ padding: 12px 0 12px 10px; /* 좌측 10px 들여쓰기 — 정보 블록 전용, CTA엔 적용 안 됨 */ border-bottom: 1px solid var(--line); } .ba-reserve-action:last-of-type { border-bottom: none; } /* div 중 마지막(카카오톡)엔 구분선 없음 */ .ba-reserve-action b { font-size: 15px; font-weight: 500; } .ba-reserve-action span { font-size: 15px; color: var(--muted); } /* CTA: .btn의 inline-flex(아이콘 정렬)는 유지하되 block 방향 자기중심 정렬을 위해 flex(비-inline)로 전환 + width:fit-content + margin:auto, 들여쓰기 미적용 */ .ba-reserve-action--cta { display: flex; width: 230px; max-width: 100%; margin: 20px auto 0; } /* ─── 태블릿(768~1023): compact 유지, 좌우 40px + 상하 56px 체계 ─── */ @media (min-width: 768px) { .ba-filter { padding: 56px 40px 28px; } .ba-cases { padding: 0 40px 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .ba-case-copy { padding: 28px 32px; } .ba-preview-links { padding: 0 40px 56px; gap: 28px; } .ba-link-copy { padding: 28px 32px; } .ba-reserve { padding: 28px 40px 44px; } .ba-reserve-divider { margin: 36px auto; } .ba-reserve-methods { padding: 32px 36px; } /* 상단(제목+설명) 전체 폭, 아래 여백으로 구분 → 하단은 전화/카카오톡/CTA 동일한 3열, 열 사이 얇은 세로 구분선, 전화·카카오톡 모두 10px 들여쓰기 유지 */ .ba-reserve-methods-intro { margin-bottom: 24px; } .ba-reserve-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 0 32px; } .ba-reserve-action { padding: 0 0 0 10px; border-bottom: none; } .ba-reserve-action:not(:last-child) { border-right: 1px solid var(--line); padding-right: 32px; } .ba-reserve-action--cta { width: 230px; max-width: 100%; margin: 0; justify-self: center; } } /* ─── PC(1024+): 4열 사례 / 2열 프리뷰 / 3열 RESERVATION ─── */ @media (min-width: 1024px) { .ba-filter { padding: 72px clamp(48px, calc((100vw - 1080px) / 2), 120px) 32px; } .ba-filter-tabs { justify-content: center; } .ba-cases { padding: 0 clamp(48px, calc((100vw - 1080px) / 2), 120px) 72px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .ba-case-copy { padding: 20px 22px 22px; } .ba-preview-links { padding: 0 clamp(48px, calc((100vw - 1080px) / 2), 120px) 72px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .ba-link-copy { padding: 32px 36px; } .ba-reserve { padding: 40px clamp(48px, calc((100vw - 1080px) / 2), 120px) 56px; } .ba-reserve-divider { margin: 44px auto; } .ba-reserve-points { grid-template-columns: repeat(4, 1fr); } /* 구조는 768px+ 규칙과 동일(상단 제목·설명 전체 폭 / 하단 동일 3열) — 카드 padding·열 간격만 확대 */ .ba-reserve-methods { padding: 36px 40px; } .ba-reserve-actions { gap: 0 40px; } } /* ─── Wide PC(1440+): 본문 섹션 폭 고정 (hero full-bleed 유지) ─── */ @media (min-width: 1440px) { .ba-filter, .ba-cases, .ba-preview-links { max-width: 1440px; margin-left: auto; margin-right: auto; } /* .ba-reserve는 배경이 있어 이 그룹에서 제외 — 콘텐츠 폭 제한은 .ba-reserve-inner의 max-width:1200px(위에서 상시 적용)가 담당해 1440px+에서도 동일하게 동작 */ } /* ═══ STORES 페이지 (approved-design pc/mobile-store 레퍼런스 draft 재구성) ═══ 검색 input은 기존 common.js filterStores(#storeSearch)와 common.css .search-input을 그대로 재사용 (JS 무수정). sticky는 JS STICKY_BLOCKED가 이미 차단 — CSS 불필요 */ /* placeholder 패턴 (WHY/CRAFT/B&A 사본 — stores 스코프) */ .stores-hero-visual { position: relative; background: linear-gradient(150deg, #F5EEE2 0%, #EADDC7 55%, #DCC8A8 100%); background-size: cover; background-position: center; } .stores-hero-visual::after { content: attr(data-label); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(168, 135, 93, .55); pointer-events: none; } .stores-hero-visual[data-current-img]::after { content: none; } /* ─── Stores Hero: 검증 패턴 이식 (버튼 없음 — 레퍼런스 기준) ─── */ .stores-hero { display: flex; flex-direction: column-reverse; background: #F5EFE6; overflow: hidden; } .stores-hero-copy { padding: 40px 20px 48px; } .stores-hero-copy .page-title { font-size: clamp(32px, 4vw, 44px); /* h2보다 명확히 크게(Page Hero) — Home Hero는 별도 규칙, 무영향 */ line-height: 1.22; max-width: 560px; margin: 0 0 2px; } .stores-hero-copy .page-subtitle { word-break: keep-all; } .stores-hero-visual { width: 100%; aspect-ratio: 4 / 5; } @media (min-width: 768px) { .stores-hero { position: relative; flex-direction: row; align-items: center; min-height: var(--subhero-min-h-tab); } .stores-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; max-width: var(--subhero-copy-w-tab); padding: var(--subhero-copy-pad-tab); } .stores-hero-visual { position: absolute; inset: 0; width: auto; aspect-ratio: auto; background-position: var(--subhero-img-pos); } .stores-hero::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--hero-band-width); z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--hero-protect-stops)); } .stores-hero-visual::after { inset: 0 0 0 50%; } } @media (min-width: 1024px) { .stores-hero { min-height: var(--subhero-min-h-pc); } .stores-hero::before { width: var(--hero-band-width-desktop); } .stores-hero-copy { max-width: var(--subhero-copy-w-pc); padding: var(--subhero-copy-pad-pc); } } /* ─── 검색 + 지역 칩: hero(full-bleed)→search는 search PT 소유 ─── */ .stores-search { padding: 44px 20px 0; } .stores-search-label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 10px; } /* 박스형 검색창 (레퍼런스 방향) — input 자체는 무장식, 박스가 외곽을 담당 */ .stores-search-box { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; background: #FAF6EF; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 14px; } .stores-search-box:focus-within { border-color: var(--gold); } .stores-search-icon { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--gold); } .stores-search-box .search-input { flex: 1; width: 100%; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; outline: none; appearance: none; -webkit-appearance: none; font-size: 15px; } .stores-search-box .search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .stores-region { overflow-x: auto; } /* ─── 지점 카드 리스트 (search→list 그룹 간격 24/28/32, compact 1열 / PC 2열) ─── */ .stores-list { padding: 24px 20px 44px; } #stores #storeList { display: grid; grid-template-columns: 1fr; gap: 16px; } #stores .store-card { background: #FAF6EF; border: 1px solid var(--line); border-radius: 14px; padding: 20px; min-width: 0; } #stores .store-card small { color: var(--gold); letter-spacing: .14em; font-size: 15px; } #stores .store-card h3 { font-family: var(--sans); font-size: 18px; margin: 6px 0 0; word-break: keep-all; } #stores .store-card p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0 0 12px; word-break: keep-all; } /* ─── 하단 상담 CTA 밴드 (full-bleed 배경, list PB가 경계 소유) ─── */ .stores-cta { background: #EFE6D8; padding: 44px 20px; } .stores-cta-copy b { display: block; font-family: var(--sans); font-size: clamp(19px, 2.2vw, 25px); font-weight: 400; margin-bottom: 0; word-break: keep-all; } .stores-cta-copy p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 18px; word-break: keep-all; } /* ─── 태블릿(768~1023): compact 유지, 좌우 40px + 상하 56px ─── */ @media (min-width: 768px) { .stores-search { padding: 56px 40px 0; } .stores-list { padding: 28px 40px 56px; } #stores #storeList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } #stores .store-card { padding: 24px; } .stores-cta { padding: 56px 40px; } } /* ─── PC(1024+): 지점 카드 2열 (레퍼런스), CTA 가로 배치 ─── */ @media (min-width: 1024px) { .stores-search { padding: 72px clamp(48px, calc((100vw - 1080px) / 2), 120px) 0; } .stores-list { padding: 32px clamp(48px, calc((100vw - 1080px) / 2), 120px) 72px; } #stores #storeList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } #stores .store-card { padding: 24px 28px; } .stores-cta { padding: 56px clamp(48px, calc((100vw - 1080px) / 2), 120px); } .stores-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .stores-cta-copy p { margin-bottom: 0; } .stores-cta .btn { flex: 0 0 auto; } } /* ─── Wide PC(1440+): 본문 섹션 폭 고정, CTA는 배경 full-bleed + 내부 정렬 ─── */ @media (min-width: 1440px) { .stores-search, .stores-list { max-width: 1440px; margin-left: auto; margin-right: auto; } .stores-cta { padding-left: calc((100% - 1200px) / 2); padding-right: calc((100% - 1200px) / 2); } } /* ═══ CONSULT 페이지 (approved-design pc/mobile-consultation 레퍼런스 draft 정리) ═══ 폼 2열은 공통 .form의 PC 규칙이 이미 담당(무수정). hero만 전용 스코프로 분리 — 레퍼런스가 낮은 밴드형이라 서브페이지 72svh 이식 대신 낮은 밴드형 스택(임시 안전형) */ .consult-hero { position: relative; overflow: hidden; background: #F5EFE6; } /* 모바일 임시 안전형: hero.png가 인물 좌측 구도라 겹침 배경으로는 서브카피 분리 불가 → 텍스트 블록(상단) + 이미지 밴드(하단) 스택으로 겹침 원천 제거. 전용 모바일 크롭(인물 우측) 도착 시 겹침 밴드형 복귀 검토 */ .consult-hero-visual { position: relative; z-index: 0; width: 100%; height: clamp(220px, 34svh, 300px); background-color: #F1E9DA; background-size: cover; background-position: 35% 30%; } .consult-hero-visual::after { content: attr(data-label); position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(168, 135, 93, .55); pointer-events: none; } .consult-hero-visual[data-current-img]::after { content: none; } .consult-hero-copy { position: relative; z-index: 2; padding: 44px 20px 28px; } /* Page Hero(서브페이지 hero) eyebrow→제목: 2px 통일 — 전역 .eyebrow 16px 대신 스코프 재정의 */ .why-hero-copy .eyebrow, .craft-hero-copy .eyebrow, .ba-hero-copy .eyebrow, .stores-hero-copy .eyebrow, .collection-hero-copy .eyebrow, .consult-hero-copy .eyebrow { margin-bottom: 2px; } .consult-hero-copy h1 { font-size: clamp(32px, 4vw, 44px); /* h2보다 명확히 크게 — 다른 서브페이지 Page Hero와 동일 값 */ line-height: 1.22; margin: 0 0 2px; /* 제목→설명: 2px(통일) */ overflow-wrap: break-word; text-wrap: balance; } .consult-hero-copy p { line-height: 1.65; margin: 0; word-break: keep-all; } /* 모바일 스택형은 텍스트가 배경색 위라 별도 보호 그라데이션 불필요 */ .consult-hero-copy::before { content: none; } @media (min-width: 768px) { .consult-hero { display: flex; align-items: center; min-height: var(--subhero-min-h-tab); } /* 태블릿/PC: 기존 겹침 구조 복귀 (좌측 세로 밴드가 텍스트 보호) */ .consult-hero-visual { position: absolute; inset: 0; width: auto; height: auto; background-position: var(--subhero-img-pos); } .consult-hero-copy { max-width: var(--subhero-copy-w-tab); padding: var(--subhero-copy-pad-tab); } /* PC/태블릿: 공통 90deg 좌측 세로 밴드 (전 페이지 공통 레시피) */ .consult-hero-copy::before { content: none; } .consult-hero::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--hero-band-width); z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--hero-protect-stops)); } .consult-hero-visual::after { inset: 0 0 0 50%; } } @media (min-width: 1024px) { .consult-hero { min-height: var(--subhero-min-h-pc); } .consult-hero::before { width: var(--hero-band-width-desktop); } .consult-hero-copy { max-width: var(--subhero-copy-w-pc); padding: var(--subhero-copy-pad-pc); } } /* ─── 본문 섹션 spacing contract 적용 (#consult 스코프 — 공통 .block 무수정) ─── */ #consult .block { padding: 44px 20px; } /* 동의행: 체크박스 좌 + 자세히 보기 우 */ .consult-agree-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .consult-agree-row .agree { flex: 1; } .consult-agree-more { flex: 0 0 auto; background: none; border: none; padding: 0; font-size: 15px; color: var(--gold); letter-spacing: .02em; cursor: pointer; } /* 동의 체크박스 바로 아래 수집항목/목적/보유기간 요약 박스 — 전체 방침은 .consult-agree-more(자세히 보기)로 유지 */ .consult-consent-summary { margin-top: 12px; padding: 14px 16px; background: var(--cream); border: 1px solid var(--line-gold); border-radius: var(--radius-sm); } .consult-consent-summary p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); word-break: keep-all; } .consult-consent-summary p + p { margin-top: 6px; } .consult-consent-summary p strong { color: var(--ink); font-weight: 600; margin-right: 6px; } .consult-consent-summary .consult-consent-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-gold); } @media (min-width: 768px) { #consult .block { padding: 56px 40px; } } @media (min-width: 1024px) { #consult .block { padding: 72px clamp(48px, calc((100vw - 1080px) / 2), 120px); } /* 레퍼런스 카드 폭에 맞춰 확대 (기존 720 → 960, 폼 2열 여유) */ #consult .consult-card, #consult .consult-phone-bar { max-width: 960px; } #consult .consult-info-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1440px) { #consult .block { max-width: 1440px; margin-left: auto; margin-right: auto; } } /* ═══ COLLECTION 페이지 (approved-design pc/mobile-collection 레퍼런스 draft 재구성) ═══ 탭 필터는 기존 common.js(.tab → filterProducts)와 .product/.collection-group 클래스를 그대로 재사용(JS 무수정). 공통 컴포넌트는 #collection 스코프 오버라이드로만 재스타일 */ /* placeholder 패턴 (hero — WHY/CRAFT/B&A/Stores 사본) */ .collection-hero-visual { position: relative; background: linear-gradient(150deg, #F5EEE2 0%, #EADDC7 55%, #DCC8A8 100%); background-size: cover; background-position: center; } .collection-hero-visual::after { content: attr(data-label); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(168, 135, 93, .55); pointer-events: none; } .collection-hero-visual[data-current-img]::after { content: none; } /* ─── Hero: 검증 패턴 이식. 모바일은 안전형 스택(카피+intro 카드가 길어 겹침형 부적합) ─── */ .collection-hero { position: relative; overflow: hidden; background: #F5EFE6; } .collection-hero-copy { padding: 44px 20px 28px; } .collection-hero-copy .page-title { font-size: clamp(32px, 4vw, 44px); /* h2보다 명확히 크게(Page Hero) — Home Hero는 별도 규칙, 무영향 */ line-height: 1.22; max-width: 560px; margin: 0 0 2px; /* 제목→설명: 2px(통일) */ } .collection-hero-copy .page-subtitle { word-break: keep-all; margin: 0; } .collection-hero-visual { position: relative; z-index: 0; width: 100%; height: clamp(220px, 34svh, 300px); } /* 박스/카드처럼 보이지 않게 — 테두리·배경·둥근모서리 제거, 폭 제한 없이 섹션 일반 폭 사용, 중앙정렬만 유지 */ #collection .collection-intro-card { text-align: center; } #collection .collection-intro-card b { white-space: nowrap; font-size: clamp(15px, 3.5vw, 22px); } #collection .collection-intro-card p { color: var(--muted); line-height: 1.65; margin: 8px auto 0; word-break: keep-all; } @media (min-width: 768px) { .collection-hero { display: flex; align-items: center; min-height: var(--subhero-min-h-tab); } .collection-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; max-width: var(--subhero-copy-w-tab); padding: var(--subhero-copy-pad-tab); } .collection-hero-visual { position: absolute; inset: 0; width: auto; height: auto; background-position: var(--subhero-img-pos); } .collection-hero::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--hero-band-width); z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--hero-protect-stops)); } .collection-hero-visual::after { inset: 0 0 0 50%; } } @media (min-width: 1024px) { .collection-hero { min-height: var(--subhero-min-h-pc); } .collection-hero::before { width: var(--hero-band-width-desktop); } .collection-hero-copy { max-width: var(--subhero-copy-w-pc); padding: var(--subhero-copy-pad-pc); } } /* ─── 필터 탭: common .tabs의 sticky/보더를 페이지 스코프에서 해제 ─── */ .collection-filter { padding: 44px 20px 0; } #collection .collection-tabs { position: static; background: transparent; border-bottom: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ─── 제품 그룹/카드: filter→products 그룹 간격 24/28/32, 그룹 사이 44/56/72 ─── */ /* 그룹 간격을 flex gap으로 처리 → display:none 그룹은 gap에 포함되지 않아 어떤 탭에서도 탭↓콘텐츠 여백이 컨테이너 padding-top(24/28/32)으로 고정됨 */ .collection-products { padding: 24px 20px 44px; display: flex; flex-direction: column; gap: 44px; } #collection .product-grid { grid-template-columns: 1fr; gap: 16px; } #collection .product { margin-bottom: 0; background: #FAF6EF; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; min-width: 0; } #collection .product .ph { height: auto; aspect-ratio: 4 / 3; background: linear-gradient(150deg, #F5EEE2 0%, #EADDC7 55%, #DCC8A8 100%); background-size: cover; background-position: center; } #collection .product .ph[data-current-img]::after { content: none; } #collection .product-info { padding: 18px; } #collection .product-info h3 { font-family: var(--sans); font-size: 18px; margin: 0; word-break: keep-all; } #collection .product-info p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; word-break: keep-all; } #collection .product-info .tags span { font-size: 15px; padding: 4px 10px; border-radius: 999px; } @media (min-width: 768px) { .collection-filter { padding: 56px 40px 0; } .collection-products { padding: 28px 40px 56px; gap: 56px; } #collection .product-grid { gap: 20px; } /* 가로형 카드: 이미지 좌 / 텍스트 우 (레퍼런스) */ #collection .product { display: grid; grid-template-columns: 44% 1fr; align-items: stretch; } #collection .product .ph { height: 100%; aspect-ratio: auto; min-height: 240px; } #collection .product-info { padding: 24px 28px; align-self: center; } } @media (min-width: 1024px) { .collection-filter { padding: 72px clamp(48px, calc((100vw - 1080px) / 2), 120px) 0; } .collection-products { padding: 32px clamp(48px, calc((100vw - 1080px) / 2), 120px) 72px; gap: 72px; } #collection .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } #collection .product .ph { min-height: 260px; } } /* ─── CTA 밴드 (full-bleed 배경 — 이미지 없는 동안 배경색으로 안정 처리) ─── */ .collection-cta-band { background: #EFE6D8; padding: 44px 20px; } .collection-cta-copy b { display: block; font-family: var(--sans); font-size: clamp(19px, 2.2vw, 25px); font-weight: 400; margin-bottom: 0; word-break: keep-all; } .collection-cta-copy p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 18px; word-break: keep-all; } @media (min-width: 768px) { .collection-cta-band { padding: 56px 40px; } } @media (min-width: 1024px) { .collection-cta-band { padding: 56px clamp(48px, calc((100vw - 1080px) / 2), 120px); } .collection-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .collection-cta-copy p { margin-bottom: 0; } .collection-cta-band .btn { flex: 0 0 auto; } } /* ─── Wide PC(1440+): 본문 섹션 폭 고정, CTA는 배경 full-bleed + 내부 정렬 ─── */ @media (min-width: 1440px) { .collection-filter, .collection-products { max-width: 1440px; margin-left: auto; margin-right: auto; } .collection-cta-band { padding-left: calc((100% - 1200px) / 2); padding-right: calc((100% - 1200px) / 2); } } /* ═══════════════════════════════════════════════════ 서브페이지 hero 공통 프레임 (Home 제외) — 2026-07 A안 통일 같은 화면 폭에서 6개 서브페이지 hero는 완전히 같은 틀: 모바일 = 풀블리드 겹침형(텍스트 상단 + 180deg 상단 보호 밴드), 768+ = 좌측 텍스트 컬럼 + 90deg 좌측 보호 밴드 (기존 블록이 토큰 공유). 파일 끝에 위치해 페이지별 잔여 규칙보다 캐스케이드 우선. ═══════════════════════════════════════════════════ */ @media (max-width: 767px) { .collection-hero, .why-hero, .craft-hero, .ba-hero, .stores-hero, .consult-hero { position: relative; overflow: hidden; display: block; min-height: var(--subhero-min-h-mo); background: #F5EFE6; } .collection-hero::before, .why-hero::before, .craft-hero::before, .ba-hero::before, .stores-hero::before, .consult-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--hero-top-band-height); z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--hero-protect-stops)); } .collection-hero::after, .why-hero::after, .craft-hero::after, .ba-hero::after, .stores-hero::after, .consult-hero::after { content: none; } .collection-hero-visual, .why-hero-visual, .craft-hero-visual, .ba-hero-visual, .stores-hero-visual, .consult-hero-visual { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; min-height: 0; background-size: cover; background-position: center center; -webkit-mask-image: none; mask-image: none; } .collection-hero-visual::before, .why-hero-visual::before, .craft-hero-visual::before, .ba-hero-visual::before, .stores-hero-visual::before, .consult-hero-visual::before { content: none; } .collection-hero-copy, .why-hero-copy, .craft-hero-copy, .ba-hero-copy, .stores-hero-copy, .consult-hero-copy { position: relative; z-index: 2; margin-top: 0; max-width: 88%; padding: 44px 20px 0; background: transparent; } /* 과거 ba-hero-mobile 크롭에 인물이 있어 밴드 높이를 240px로 축소했던 예외가 있었으나, 현재 자산(before-after/hero/hero-mobile.png)은 인물 없는 정물(서랍장) 사진으로 교체되어 그 근거가 사라짐 — CTA 버튼 하단 커버를 위해 예외 제거, 공통 --hero-top-band-height 사용 */ } /* Collection 인트로 카드: hero 프레임 통일을 위해 hero 밖 전용 섹션으로 이동 */ .collection-intro { padding: 24px 20px 0; } @media (min-width: 768px) { .collection-intro { padding: 28px 40px 0; } } @media (min-width: 1024px) { .collection-intro { padding: 32px clamp(48px, calc((100vw - 1080px) / 2), 120px) 0; } } /* ─── 이용약관 / 개인정보처리방침 모달 (단일 페이지 구조에 맞춘 오버레이 방식) ─── */ .modal-overlay { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(24, 19, 15, .5); opacity: 0; pointer-events: none; transition: opacity var(--duration) var(--ease); } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal-box { width: 100%; max-width: 560px; max-height: 82vh; display: flex; flex-direction: column; background: #FFFAF3; border-radius: 16px; box-shadow: var(--shadow-lg); transform: translateY(12px); transition: transform var(--duration) var(--ease); } .modal-overlay.open .modal-box { transform: translateY(0); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .modal-head h3 { font-size: 18px; } .modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: var(--muted); flex-shrink: 0; } .modal-body { padding: 20px 24px 28px; overflow-y: auto; } .modal-body h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 20px 0 6px; } .modal-body h4:first-child { margin-top: 0; } .modal-body p { font-size: 15px; line-height: 1.7; color: var(--muted); word-break: keep-all; } .modal-body p strong { color: var(--ink); font-weight: 600; } .modal-body ul { margin: 0 0 8px; padding-left: 18px; font-size: 15px; line-height: 1.7; color: var(--muted); } .modal-body ul li { word-break: keep-all; } @media (min-width: 768px) { .modal-box { max-height: 76vh; } .modal-head { padding: 24px 32px; } .modal-body { padding: 24px 32px 32px; } .modal-body p { font-size: 15px; } } /* ─── 약관/개인정보처리방침 목차(TOC) — 모달→독립 페이지 승격(Phase 1)으로 신규 추가. 본문 타이포그래피는 기존 .modal-body 규칙을 그대로 재사용(무수정) ─── */ .legal-page { max-width: var(--container-copy-wide); margin: 0 auto; } .legal-toc { margin: 24px 0 32px; padding: 20px 24px; background: #FFFAF3; border: 1px solid var(--line); border-radius: 12px; } .legal-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; } .legal-toc a { color: var(--muted); } .legal-toc a:hover { color: var(--ink); } /* ─── 아이콘 시스템: index.html 상단 hidden sprite()를 로 참조. 크기만 지정 — 색상은 currentColor로 상위 요소 color를 그대로 상속 ─── */ .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } .icon-18 { width: 18px; height: 18px; } .icon-20 { width: 20px; height: 20px; } .icon-22 { width: 22px; height: 22px; } .icon-24 { width: 24px; height: 24px; } .icon-26 { width: 26px; height: 26px; } /* 모달 닫기: 시각적 박스(32×32)는 그대로 두되, 클릭/터치 영역만 40×40으로 확장 (::before는 레이아웃에 관여하지 않는 절대배치라 주변 정렬에 영향 없음) */ .modal-close { position: relative; } .modal-close::before { content: ''; position: absolute; inset: -4px; } /* 준비 중인 SNS 채널: 클릭 가능한 링크처럼 보이지 않도록 명확한 비활성 상태 부여 */ .footer-disabled { opacity: .45; cursor: default; } .footer-disabled:hover { color: rgba(255, 255, 255, .56); } /* 활성 SNS 채널(현재 Instagram만): 클릭 가능한 버튼임을 명확히 드러내는 hover/focus/active 상태 selector에 .footer-social a까지 포함해 common.css의 .footer-social a:hover{color:gold}보다 명세 우선순위를 높임 — 그렇지 않으면 hover 시 아이콘 색이 배경(gold)과 같아져 사라짐 */ .footer-social a.footer-social-active { border-radius: 50%; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .footer-social a.footer-social-active svg { transition: transform .2s ease; } .footer-social a.footer-social-active:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); } .footer-social a.footer-social-active:hover svg { transform: scale(1.06); } .footer-social a.footer-social-active:active { transform: translateY(0) scale(.97); } .footer-social a.footer-social-active:active svg { transform: scale(1.02); } @media (prefers-reduced-motion: reduce) { .footer-social a.footer-social-active, .footer-social a.footer-social-active svg { transition: background-color .2s ease, color .2s ease; } .footer-social a.footer-social-active:hover, .footer-social a.footer-social-active:active { transform: none; } .footer-social a.footer-social-active:hover svg, .footer-social a.footer-social-active:active svg { transform: none; } } /* WHY FARO 고객 후기 카드 "더 많은 후기 보기" 버튼 전용 — 아이콘 교체로 gap이 늘어나며 기존 고정폭(185px)이 부족해 "보기"가 다음 줄로 꺾이던 문제 수정. 이 셀렉터로만 범위를 한정해 다른 .btn.outline 버튼에는 영향 없음 */ .why-ba-preview .why-card-copy .btn { width: auto; min-width: 200px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 14px; } .why-ba-preview .why-card-copy .btn .btn-icon { flex-shrink: 0; } /* ─── 히어로 CTA: light frosted glass ─── 기본 상태는 배경 완전 투명 + blur(8px)만 남겨 "유리 뒤가 뭉개지는" 효과만 주고, 흰 반투명 채움은 hover에서만 등장. 텍스트/아이콘/테두리는 항상 골드 포인트 컬러 (--gold, 아이콘은 stroke="currentColor"라 color 상속만으로 자동 반영 확인됨). 현재 CTA가 있는 4개 히어로(Home/WHY/CRAFT/B&A) 전 구간(모바일/태블릿/데스크톱)에 동일하게 .hero-cta로 명시적으로 한정 — "컬렉션 보기" 등 다른 .btn에는 누수되지 않음. 앞으로 다른 히어로(Collection/Consult/Stores)에 CTA가 추가되면 해당 hero-copy 스코프를 아래 목록에 더하고 버튼에 .hero-cta 클래스만 추가하면 됨. 조상 스코프까지 포함해 .btn.outline(및 :hover)보다 명세 우선순위를 확실히 높임(동률 방지). 컬렉션/상담/매장 히어로는 직후 콘텐츠가 바로 이어지는 구조라 CTA 의도적 미배치 (2026.08 결정) */ .home-hero-copy .btn.hero-cta, .why-hero-copy .btn.hero-cta, .craft-hero-copy .btn.hero-cta, .ba-hero-copy .btn.hero-cta { background: transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--gold); border-color: var(--gold); transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .home-hero-copy .btn.hero-cta:hover, .why-hero-copy .btn.hero-cta:hover, .craft-hero-copy .btn.hero-cta:hover, .ba-hero-copy .btn.hero-cta:hover { background: rgba(255, 255, 255, .35); border-color: var(--gold); } /* backdrop-filter 미지원 브라우저: 블러가 아예 없어 기본 상태를 완전 투명으로 두면 가독성 문제가 재발함 — 폴백에서만 기본 배경을 옅게 채워 대비 확보 */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .home-hero-copy .btn.hero-cta, .why-hero-copy .btn.hero-cta, .craft-hero-copy .btn.hero-cta, .ba-hero-copy .btn.hero-cta { background: rgba(255, 255, 255, .25); } }