/* ============================================================================= * 기획전(promotions) 사용자 페이지 v8 (서브 타이틀 폐지 + 타이틀 레이아웃 도입) * * 컬러 변수 (2개) * --color-bg-hero : 히어로 ~ 탭 시작 직전까지 1100px 컨테이너 내부 BG * --color-point : 활성 탭 글자/하단 라인, 상품 카드 일부 강조 (글자색 흰색) * ※ 탭 컨텐츠 영역(.promo-tabs-section)은 항상 흰색 (#FFFFFF) 고정. * ※ 1100px 컨테이너 외부(웹) 는 회색 (#FAFAFA) — body / .promotion-page 가 담당. * * 골격 * .promotion-page (web) ─ 외부 회색 BG (#FAFAFA) * .promotion_wrap ─ 1100px(PC) / 풀폭(MO) — 배경 = color-bg-hero * ├ .promo-image HERO/SUB * ├ .coupon_section 링크/쿠폰 버튼 * ├ .timesale_section 스와이프 (웹 4.5 / 모바일 2.3) * └ .promo-tabs-section 탭 영역 (BG 흰색) * ├ .promo-tabs 탭 BAR (텍스트, sticky) * └ .promo-tab-panel × 3 * └ .promo-tab-head — 헤더 (3가지 레이아웃 모디파이어) * └ .content-list.layout-grid.content-list--{square|poster|circle} (카드 그리드) * * 탭 카드 레이아웃 (content_layout) — list.php 그리드뷰(item-list.css) 와 통일 * 타이틀 레이아웃 (tab_title_layout) — 5가지 모디파이어. 공통(폰트·패딩) 룰이 baseline, 각 모디파이어는 디자인 정체성만. * .promo-tab-head--subtle-gradient : 옅은 그라디언트 BG + PART NN 인덱스 (좌) * .promo-tab-head--gradient-plain : 옅은 그라디언트 BG, 인덱스 없음 (중) * .promo-tab-head--plain-left : 흰 BG, 인덱스 없음 (좌) * .promo-tab-head--plain-center : 흰 BG, 인덱스 없음 (중) * .promo-tab-head--part-center : 흰 BG + PART NN 인덱스 (중) * ============================================================================= */ /* ─── 셸 — 웹은 1100px 외부 회색, 모바일·미리보기 그대로 흰색 ─── */ .promotion-page { background: #FFFFFF; } /* web_base.css 가 html, body 양쪽에 #fff 깔아둠 → body 가 viewport 보다 짧을 때 끝/footer 직전이 흰색으로 비치는 문제. * 본 페이지에선 html(:root) 도 회색으로 같이 강제하고 body 에 min-height:100vh 로 보강. */ html:has(body.promotion-page.is-web) { background: #FAFAFA; } .promotion-page.is-web { background: #FAFAFA; min-height: 100vh; } .promotion-page .promotion-page-content { padding: 0; } /* 모바일 한정: 전역 mobile_base.css 의 `.top-gnb { position:fixed; top:0; z-index:9999 }` 를 normal flow 로 되돌린다. * GNB 가 흐름 안에 있으면 스크롤 시 자연스럽게 offscreen 되고, 그 자리에 sticky 탭이 top:0 으로 안착한다. * 결과: 클래스 토글 / scroll listener / sticky top 동적 변경 일체 불필요 — 브라우저 sticky 엔진 한 채널만 사용해 iOS Safari race 깜빡임 제거. */ .promotion-page.is-mobile .top-gnb { position: static; z-index: auto; } /* ─── 본문 컨테이너 ─── */ .promotion_wrap { background: var(--color-bg-hero, #FFFFFF); text-align: center; } /* 웹: 1100px 고정 + 위아래 1rem 마진. viewport 가 1100 미만이어도 비율 축소 X → 가로 스크롤. */ .promotion-page.is-web .promotion_wrap { width: 1100px; margin: 1rem auto; } /* 모바일: GNB 가 flow 안이라 padding-top 으로 자리 비울 필요 없음. 하단은 .bottom-gnb(fixed) 만큼만 확보. */ .promotion-page.is-mobile .promotion_wrap { width: 100%; padding-bottom: 3.875rem; } /* ─── 미리보기 띠 ─── */ .promotion-preview-bar { background: #1F2937; color: #FFF; text-align: center; padding: 0.5rem 1rem; font-size: 0.875rem; letter-spacing: -0.0125rem; } /* ─── 풀이미지 (HERO / SUB) — 흰줄 방지 ─── */ .full_img { width: 100%; display: block; vertical-align: top; } .promo-image { display: block; line-height: 0; font-size: 0; } .promo-image img { width: 100%; display: block; vertical-align: top; } /* ─── 쿠폰/링크 버튼 ─── */ .coupon_section { text-align: center; line-height: 0; font-size: 0; } /* 영역 간 통일된 세로 간격 — hero·sub1·button·swipe·sub2 동일. 단, 서브2 → 탭 사이는 간격 없음 (탭 영역이 sub2 바로 이어붙어야 함). */ .promotion_wrap > * + * { margin-top: 1.5rem; } .promotion-page.is-web .promotion_wrap > * + * { margin-top: 2rem; } .promotion_wrap > .promo-tabs-section, .promotion-page.is-web .promotion_wrap > .promo-tabs-section { margin-top: 0; } .coupon_section a { display: inline-block; cursor: pointer; line-height: 0; font-size: 0; vertical-align: top; } .coupon_section a img { display: block; width: 100%; vertical-align: top; } /* ─── 스와이프 ─── */ .timesale_section { background: transparent; } .timesale_wrap { box-sizing: border-box; padding: 1.5rem 0 2rem; } .timesale_wrap .swiper { padding: 0 1.25rem; box-sizing: border-box; } .promotion-page.is-web .timesale_wrap .swiper { max-width: 1100px; margin: 0 auto; padding: 0 1.875rem; } /* 슬라이드 카드 */ .slide_each { display: block; background: #FFFFFF; overflow: hidden; text-decoration: none; color: inherit; margin: 0.375rem; border-radius: 1rem; letter-spacing: -0.03em; } .slide_each .ticket_img { line-height: 0; } .slide_each .ticket_img img { width: 100%; display: block; vertical-align: top; aspect-ratio: 3 / 4; object-fit: cover; } .slide_each .ticket_info { text-align: center; padding: 0.875rem 0.625rem 1rem; } .slide_each .area { display: inline-block; background: var(--color-point, #FF4B4B); color: #FFFFFF; font-weight: 600; font-size: 0.8125rem; padding: 0.1875rem 0.75rem; border-radius: 999px; } .slide_each .category { display: block; color: #555; font-size: 0.8125rem; margin-top: 0.375rem; } .slide_each .title { color: #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; font-size: 0.9375rem; font-weight: 700; line-height: 1.3rem; margin-top: 0.375rem; min-height: 2.5rem; padding: 0 0.25rem; } /* 스와이프 네비 — 메인 페이지와 동일한 흰색 동그라미 + 회색 화살표. * 평상 시 살짝 투명, hover 시 불투명. 모바일·웹 모두 적용 (Swiper 디폴트 파랑 차단). */ .timesale_section .swiper-button-prev, .timesale_section .swiper-button-next { width: 2.5rem; height: 2.5rem; background: rgba(255, 255, 255, 0.65); border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); color: #555; transition: background .15s ease, box-shadow .15s ease, color .15s ease; } .timesale_section .swiper-button-prev:hover, .timesale_section .swiper-button-next:hover { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); color: #222; } .timesale_section .swiper-button-prev::after, .timesale_section .swiper-button-next::after { font-size: 0.9375rem; font-weight: 700; } /* ─── 탭 영역 (컨텐츠 BG 항상 흰색) ─── */ .promo-tabs-section { background: #FFFFFF; } /* 탭 BAR — 텍스트, sticky top:0 (모바일/웹 동일). * 모바일은 GNB 가 normal flow 라 스크롤 시 자연스레 offscreen 되며, 그 직후 탭이 viewport top 에 stick. * 별도 stuck 분기·class 토글 없음 — sticky 엔진 단일 채널. */ .promo-tabs { display: flex; background: #FFFFFF; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #EEE; } .promo-tab { flex: 1; appearance: none; border: 0; cursor: pointer; background: #FFFFFF; color: #999999; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; padding: 1rem 0.5rem; box-sizing: border-box; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s, font-weight .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 웹은 1100px 의 풍부한 폭에 맞게 탭 높이·글자 크기 한 사이즈 업. */ .promotion-page.is-web .promo-tab { font-size: 1.125rem; padding: 1.25rem 0.5rem; border-bottom-width: 4px; } .promo-tab:hover { color: #777; } .promo-tab.is-active { color: var(--color-point, #FF4B4B); font-weight: 700; border-bottom-color: var(--color-point, #FF4B4B); } /* ─── 탭 패널 헤더 — 5개 타이틀 레이아웃. 공통 룰이 baseline, 각 모디파이어는 디자인 정체성만. ─── */ /* ─── 공통 (5개 레이아웃 일괄) ─────────────────────────────────────────────── * 폰트 크기/굵기/상하 패딩/인덱스 간격은 모두 여기서 결정. * 모디파이어는 디자인 정체성(BG 그라디언트 / PART NN 인덱스 / 정렬)만 담당. */ /* 헤더 박스 — 8개 공통 패딩. 부모 .promotion_wrap 의 text-align:center 상속 차단(기본 left). */ .promo-tab-head { background: #FFFFFF; text-align: left; word-break: keep-all; letter-spacing: -0.03em; padding: 2rem 1.25rem; } .promotion-page.is-web .promo-tab-head { padding: 3rem 1.875rem; } /* 인덱스(PART NN / 분수형 공통 부분) — 분수형은 아래에서 일부 override */ .promo-tab-head__index { display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-point); margin-bottom: 0.75rem; font-variant-numeric: tabular-nums; } /* 타이틀 박스(h2) — 폰트 사이즈는 모바일 1.5rem / 웹 2rem. */ .promo-tab-head__title { margin: 0; color: #111; font-weight: 800; line-height: 1.5; letter-spacing: -0.03em; word-break: keep-all; font-size: 1.5rem; } .promotion-page.is-web .promo-tab-head__title { font-size: 2rem; } /* 라인 — 첫 줄 vs 나머지 줄을 시각적으로 분리. * 마크업: .promo-tab-head__title > .line, .line.line--rest (PromotionHelper::renderLinedTitle 생성) * 첫 줄 — h2 폰트사이즈 상속 (모바일 1.5rem / 웹 2rem), color #333, weight 700 * 나머지 — 모바일 1rem / 웹 1.25rem, color #888 */ .promo-tab-head__title .line { display: block; color: #333; font-weight: 700; } .promo-tab-head__title .line--rest { color: #888; font-weight: 400; font-size: 1rem; } .promotion-page.is-web .promo-tab-head__title .line--rest { font-size: 1.25rem; } /* 첫 줄(.line) 과 그 다음 줄(.line--rest) 사이는 line-height 만으론 부족 — 시각적 분리를 위해 추가 간격. * 주의: 둘째 줄부터는 .line.line--rest 라 .line 셀렉터가 같이 매치된다 → :first-child 로 첫째 줄만 한정. */ .promo-tab-head__title .line:first-child + .line--rest { margin-top: 0.5rem; } /* ─── 모디파이어 — 디자인 정체성만 (BG / 따옴표 / 분수형 인덱스 / 중앙 정렬) ─── */ /* SUBTLE_GRADIENT — 옅은 그라디언트 BG + PART NN (좌) */ .promo-tab-head--subtle-gradient { background: linear-gradient(135deg, color-mix(in srgb, var(--color-point) 14%, #fff) 0%, color-mix(in srgb, var(--color-point) 4%, #fff) 50%, #fff 100%); border-bottom: 1px solid color-mix(in srgb, var(--color-point) 12%, transparent); } /* GRADIENT_PLAIN — 그라디언트 BG (인덱스 없음, 중앙 정렬은 아래 묶음에서) */ .promo-tab-head--gradient-plain { background: linear-gradient(135deg, color-mix(in srgb, var(--color-point) 14%, #fff) 0%, color-mix(in srgb, var(--color-point) 4%, #fff) 50%, #fff 100%); border-bottom: 1px solid color-mix(in srgb, var(--color-point) 12%, transparent); } /* 중앙 정렬 — GRADIENT_PLAIN + *_CENTER */ .promo-tab-head--gradient-plain, .promo-tab-head--plain-center, .promo-tab-head--part-center { text-align: center; } /* 웹: 카드 그리드 패딩 — 4면 모두 1.875rem 으로 통일 (모바일 .content-list.layout-grid 의 1rem 균등과 동일 정신). * item-list.css 의 .is-web .content-list { padding: 1.5rem 0 3.75rem !important } 를 specificity 로 override. */ .promotion-page.is-web .promo-tabs-section .content-list { padding: 1.875rem !important; } /* 그라디언트가 아닌 레이아웃(흰 BG) — 헤더 박스 padding-bottom 과 content-list padding-top 이 중복되어 텍스트 ↔ 카드 간격이 좌우보다 커지는 문제. * content-list 의 상단 패딩만 제거 (좌우/하단은 그대로). 그라디언트 계열은 BG 경계가 명확해서 그대로 둠. * 주의: 웹 룰은 위 .promotion-page.is-web .promo-tabs-section .content-list { padding: 1.875rem !important } 와 * specificity 동일(0,3,0)이라 반드시 그 뒤에 선언해야 cascade 로 이긴다. */ .promo-tab-head--plain-left + .content-list, .promo-tab-head--plain-center + .content-list, .promo-tab-head--part-center + .content-list { padding-top: 0; } .promotion-page.is-web .promo-tab-head--plain-left + .content-list, .promotion-page.is-web .promo-tab-head--plain-center + .content-list, .promotion-page.is-web .promo-tab-head--part-center + .content-list { padding-top: 0 !important; } /* ─── 탭 컨텐츠 그리드 ──────────────────────────────────────────── * 카드 마크업·내부 스타일은 list.php 그리드뷰(item-list.html + item-list.css) 와 통일. * 즉 wrapper 가 .content-list.layout-grid.content-list--{square|poster|circle} 이고 * 카드는 형태. 그리드 칸수/썸네일 비율/메타·가격·뱃지·평점 스타일은 모두 item-list.css 가 SSoT. * * 본 파일에서는 기획전 한정 변형만 정의: * - .promo-tabs-section 컨텐츠 BG (흰색) * - CIRCLE 모디파이어 (원형 썸네일 + area 알약 + 가벼운 정보) * - 기획전 카드는 sell_area(place_name) 칩을 마크업하지 않음 (PromotionHelper 가 처리). 별도 CSS 불필요. * ============================================================== */ /* ─── CIRCLE / CIRCLE_FULL — 둘 다 동일 베이스 (원형 썸네일 + 지역 알약 + 카테고리 + 제목, 중앙 정렬). * 차이: CIRCLE_FULL 만 추가로 가격·뱃지·쿠폰 노출. * specificity 메모: item-list.css 의 .content-list.layout-grid .thum (0,3,0) / * .is-web .content-list .thum (0,3,0) 를 이기기 위해 * 랩퍼 셀렉터에 .content-list.layout-grid 까지 함께 매칭한다 (0,4,0+). */ .content-list--circle, .content-list--circle-full { text-align: center; } .content-list--circle .list_content, .content-list--circle-full .list_content { background: transparent; } /* 원형 썸네일 — max-width 로 카드 외부 여백 확보 (썸네일이 카드 폭에 꽉 차지 않게) */ .content-list.layout-grid.content-list--circle .thum, .content-list.layout-grid.content-list--circle-full .thum, .is-web .content-list.layout-grid.content-list--circle .thum, .is-web .content-list.layout-grid.content-list--circle-full .thum { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; max-width: 84%; margin: 0 auto; } .content-list.layout-grid.content-list--circle .thum img, .content-list.layout-grid.content-list--circle-full .thum img, .is-web .content-list.layout-grid.content-list--circle .thum img, .is-web .content-list.layout-grid.content-list--circle-full .thum img { border-radius: 50%; } .content-list--circle .info, .content-list--circle-full .info { align-items: center; gap: 0.375rem; padding: 0.5rem 0.125rem; } .content-list--circle .area, .content-list--circle-full .area { display: inline-block; background: var(--color-point, #FF4B4B); color: #FFFFFF; font-weight: 600; font-size: 0.8125rem; padding: 0.1875rem 0.75rem; border-radius: 999px; margin-top: 0.25rem; } .content-list--circle .category, .content-list--circle-full .category { display: block; color: #777; font-size: 0.8125rem; } .content-list--circle .title, .content-list--circle-full .title { font-size: 0.9375rem; font-weight: 700; color: #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; } /* CIRCLE_FULL 전용 — 가격·뱃지 중앙 정렬 (LIST/POSTER 의 좌측 정렬 override) */ .content-list--circle-full .price_box { justify-content: center; } .content-list--circle-full .badges { justify-content: center; }