/* BASIC css start */
/* ============================================================
스위티스푼 모바일 메인화면 CSS
파일: main.css
※ 디자인/폰트/레이아웃 임의 변경 금지
============================================================ */
/* ============================================================
브라우저 기본 heading 마진 초기화 (main 영역 내)
h2/h3 기본 margin-top이 레이아웃을 밀어내는 문제 방지
============================================================ */
.main h2,
.main h3 {
margin-top: 0;
margin-bottom: 0;
}
/* 화면에는 숨기되 검색엔진·스크린리더에는 노출 (SEO/AEO용 h1 등) */
.main-blind {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
① 히어로 배너 슬라이더
JS: main.js > hero_slider
autoplay: 8000ms / speed: 1400ms / loop: true
============================================================ */
/* 히어로 슬라이더 컨테이너 풀스크린 */
.main-hero-slider {
width: 100%;
height: 100vh; /* fallback (svh 미지원 구형 브라우저) */
height: 100svh; /* 지원 브라우저 우선 적용 모바일 주소창 영역 제외(오버플로우/점프 방지) */
overflow: hidden;
position: relative;
display: block;
}
/* 첫 번째 슬라이드 초기 노출 (Swiper 초기화 전 CLS 방지) */
.main-hero-slider .swiper-slide:first-child {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 슬라이드 아이템 풀 높이, 오버레이 기준점 */
.hero-slide-item {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
/* 이미지 래퍼 풀 높이 */
.hero-img-wrap {
background-color: #fcfcfc;
width: 100%;
height: 100%;
}
/* 히어로 이미지 풀 커버 */
.responsive-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 히어로 오버레이 하단 그라데이션 */
.hero-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 55%;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.42));
pointer-events: none;
z-index: 2;
}
/* 히어로 콘텐츠 (타이틀 + CTA) */
.hero-content {
position: absolute;
bottom: 80px;
left: 0;
right: 0;
text-align: center;
z-index: 5;
padding: 0 1.5rem;
}
.hero-subtitle {
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 6px 0;
text-transform: uppercase;
}
.hero-title {
font-family: 'Josefin Sans', sans-serif;
font-size: 24px;
font-weight: 300;
letter-spacing: 0.05em;
color: #fff;
margin: 0 0 20px 0;
line-height: 1.2;
}
.hero-cta {
display: inline-block;
font-family: 'Josefin Sans', sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.25em;
margin-top: 20px;
color: #3b3b3b;
background-color: #fff;
border: 1px solid rgba(255, 255, 255, 0.7);
padding: 10px 28px;
text-decoration: none;
transition: background 0.3s, border-color 0.3s;
}
.hero-cta:active {
background: rgba(255, 255, 255, 0.15);
}
/* 히어로 페이지네이션 불릿 */
.main-hero-slider .swiper-pagination-bullet {
width: 6px;
height: 6px;
display: inline-block;
border-radius: 8px;
border: 1px solid #fff;
background: none;
opacity: 0.7;
}
.main-hero-slider .swiper-pagination-bullet-active {
opacity: 1;
background: #fff;
}
.main-hero-slider .swiper-pagination {
height: 20px;
z-index: 10;
bottom: 20px;
}
/* Swiper 스크롤바 공통 */
.swiper-scrollbar {
height: 4px;
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
margin-top: 10px;
}
.swiper-scrollbar-drag {
background-color: #000;
border-radius: 2px;
}
/* ============================================================
공통 유틸
============================================================ */
.mgt30 { margin-top: 30px; }
.mgt50 { margin-top: 50px; }
.prd-warp4 { margin: 1.25rem 0 0 0; }
.prd-warp5 { margin: 1.25rem 1.25rem 0 1.1rem; }
/* 상품 이미지 배경 (mix-blend-mode: multiply 흰 배경 제거 효과) */
.prd-img-bg {
background-color: rgba(0, 0, 0, .02);
text-align: center;
margin-bottom: 10px;
}
.prd-img-bg img {
mix-blend-mode: multiply;
max-width: 100%;
height: auto;
}
/* 리뷰 */
.prd-review {
font-size: 9px;
font-family: 'Lato', 'Noto Sans KR', sans-serif;
text-align: left;
color: #3b3b3b;
letter-spacing: -0.02em;
}
.prd-review-count {
padding-left: 3px;
color: #777;
font-family: 'PT Sans', sans-serif;
}
.review-height { min-height: 17px; }
/* 가격 */
.price-container { margin-top: 0px; }
.prd-price-bold {
text-align: left;
margin: 0;
font-weight: 600;
font-size: 13px;
color: #111;
padding: 5px 0px 0px 0px;
}
/* 뱃지 */
.m-badge {
display: none;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px;
font-size: 10px;
line-height: 19px;
vertical-align: middle;
letter-spacing: -.5px;
color: #fff;
background: #fb6a69;
}
/* ============================================================
공통 섹션 타이틀
============================================================ */
.main-title {
text-align: center;
margin: 60px auto 40px;
font-size: 0;
}
.title-t01 {
font-family: 'Josefin Sans', sans-serif;
color: #111;
font-size: 16px;
font-weight: 500;
text-align: center;
}
.title-t02 {
font-family: 'Josefin Sans', sans-serif;
color: #111;
font-size: 16px;
font-weight: 500;
text-align: left;
padding-left: 10px;
}
.section-title-wrap {
font-family: 'Lato', 'Noto Sans KR', sans-serif;
text-align: center;
color: #111;
}
.section-title-wrap .section-title {
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
}
.exp-banner-section .title-t01 {
font-family: "Noto Serif KR", serif !important;
font-size: 20px;
color: #000;
font-weight: 600;
letter-spacing: -0.02rem;
}
.exp-banner-section .event-title {
font-family: "Noto Serif KR", serif !important;
letter-spacing: -0.02rem;
padding: 0px 0px 0px 0px;
text-align: center;
line-height: 1.6em;
color: #000;
font-size: 19px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.section-title-wrap .section-subtitle { font-size: 13px; }
.section-title-wrap .section-bar { margin-bottom: 40px; }
/* 이벤트 배너 내 타이틀 p 태그로 h3 마진 이슈 제거 */
.event-title {
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
margin: 0;
}
/* ============================================================
② 탭 상품 영역 : LOVE & ENGAGEMENT
slidesPerView: 2.1 / 자동재생 없음 / 전환속도 700ms
============================================================ */
.m_tab01-area {
position: relative;
overflow: hidden;
margin-bottom: 60px;
}
.m_tab01-area .main-title { margin-bottom: 40px; }
/* 탭 목록 웨딩 | 커플링 | 주얼리 */
.m_tab01 {
font-size: 0;
text-align: center;
margin: 0 auto 45px;
}
.m_tab01 li {
position: relative;
display: inline-block;
margin: 0 10px;
padding: 0;
color: #aaa;
font-size: 12px;
text-align: center;
line-height: 1;
}
/* 탭 텍스트 border는 span(글자)에만 걸어 구분자 영향 제거 */
.m_tab01 li span {
display: inline-block;
padding-bottom: 3px;
border-bottom: 2px solid transparent;
}
/* 탭을 로 감싸 호버 시 링크 표시(클릭은 JS가 탭 전환으로 처리). 색·밑줄은 span이 담당 */
.m_tab01 li a { display: inline-block; color: inherit; text-decoration: none; cursor: pointer; }
.m_tab01 li.current { color: #111; }
.m_tab01 li.current span {
color: #111;
border-bottom-color: #111;
}
/* 탭 구분자 : 웨딩 | 커플링 | 주얼리 */
.m_tab01 li + li {
margin-left: 0;
}
.m_tab01 li + li::before {
content: '|';
color: #ccc;
font-size: 10px;
margin-right: 10px;
vertical-align: middle;
}
.tab-inner { margin-left: 0; }
.tabcontent01 { display: none; margin-top: 0; padding: 0; }
.tabcontent01.current { display: block; animation: tabFadeIn .3s ease; }
@keyframes tabFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* 공통 컬렉션 자세히보기 버튼 */
.shopnow-btn {
max-width: 50%;
font-family: Josefin Sans, Arial, sans-serif;
letter-spacing: -0.01em;
font-size: 13px;
font-weight: 500;
text-align: center;
margin: 0 auto;
background: #c2b8a6;
padding: 0; /* 패딩을 로 이동 → 버튼 전체 영역 클릭 가능 */
}
.shopnow-btn a { display: block; padding: 1.0rem 0px; font-family: Josefin Sans, Arial, sans-serif; color: #fff; }
/* ============================================================
탭 상품 슬라이더 공통 (swiper_prd01 ~ swiper_prd03)
slidesPerView: 2.1 / speed: 800ms / slidesPerGroup: 2
============================================================ */
/* 좌측 패딩 첫 상품이 화면 왼쪽에 달라붙지 않도록 */
.swiper_prd01.prd-swiper,
.swiper_prd02.prd-swiper,
.swiper_prd03.prd-swiper {
padding-left: 15px;
}
.swiper_prd01.prd-swiper ul,
.swiper_prd02.prd-swiper ul,
.swiper_prd03.prd-swiper ul {
display: flex;
padding: 0;
margin: 0;
}
/* 탭 상품 공통 슬라이드 스타일 */
.swiper_prd01.prd-swiper li a,
.swiper_prd02.prd-swiper li a,
.swiper_prd03.prd-swiper li a { padding: 0; }
.swiper_prd01.prd-swiper li,
.swiper_prd02.prd-swiper li,
.swiper_prd03.prd-swiper li { padding: 0; margin: 0 2% 0 0; }
.swiper_prd01.prd-swiper li .prd-img-wrap,
.swiper_prd02.prd-swiper li .prd-img-wrap,
.swiper_prd03.prd-swiper li .prd-img-wrap { background-color: rgba(0, 0, 0, .02); }
.swiper_prd01.prd-swiper li .prd-img-wrap img,
.swiper_prd02.prd-swiper li .prd-img-wrap img,
.swiper_prd03.prd-swiper li .prd-img-wrap img { mix-blend-mode: multiply; max-width: 100%; height: auto; }
.swiper_prd01.prd-swiper li .prd-name,
.swiper_prd02.prd-swiper li .prd-name,
.swiper_prd03.prd-swiper li .prd-name {
font-family: 'Lato', 'Noto Sans KR', sans-serif;
color: #1b1b1b;
font-size: 12px;
font-weight: 400;
letter-spacing: -0.020em;
text-align: left;
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.swiper_prd01.prd-swiper li .prd-subname,
.swiper_prd02.prd-swiper li .prd-subname,
.swiper_prd03.prd-swiper li .prd-subname {
font-family: 'Lato', 'Noto Sans KR', sans-serif;
font-weight: 400;
letter-spacing: 0.03em;
font-size: 10px;
color: #1d1c1c;
font-style: italic;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0px 0px 0px 0px;
}
.swiper_prd01.prd-swiper li .prd-price-sale,
.swiper_prd02.prd-swiper li .prd-price-sale,
.swiper_prd03.prd-swiper li .prd-price-sale { display: inline-block; padding-right: 3px; margin: 0; font-weight: bold; font-size: 13px; }
.swiper_prd01.prd-swiper li .prd-price-origin,
.swiper_prd02.prd-swiper li .prd-price-origin,
.swiper_prd03.prd-swiper li .prd-price-origin { display: inline-block; color: #777; font-size: 10px; font-family: 'PT Sans', sans-serif; }
.swiper_prd01.prd-swiper li .prd-discount-rate,
.swiper_prd02.prd-swiper li .prd-discount-rate,
.swiper_prd03.prd-swiper li .prd-discount-rate { position: absolute; font-family: 'Lato', 'Noto Sans KR', sans-serif; letter-spacing: 0.05em; right: 5px; bottom: 0; color: #fa5500; font-size: 12px; }
.swiper_prd01.prd-swiper li .prd-price-wrap,
.swiper_prd02.prd-swiper li .prd-price-wrap,
.swiper_prd03.prd-swiper li .prd-price-wrap { position: relative; padding-top: 4px; text-align: left; }
.swiper_prd01.prd-swiper .prd-info-text,
.swiper_prd02.prd-swiper .prd-info-text,
.swiper_prd03.prd-swiper .prd-info-text { max-width: 150px; margin-top: 10px; }
/* ============================================================
⑥ ENGAGEMENT RING 배너 (+ 공통 event-* 스타일)
============================================================ */
.event-banner-wrap { padding: 0; } /* 가로 패딩 제거 이미지 가로 100% */
/* makeshop_common.css 의 전역 figure{padding:0 5px} 덮어쓰기 좌우 5px 제거 */
.event-banner-wrap figure { margin: 0; padding: 0; }
.event-banner-wrap img { width: 100%; }
.event-banner-wrap figure img { width: 100%; }
.event-info-wrap { padding: 40px 0px 0px 0px; color: #222; }
.event-desc {
font-size: 0.85rem;
text-align: center;
line-height: 1.6;
letter-spacing: initial;
padding: 16px 20px 30px 20px;
margin: 0;
color: #555;
word-break: keep-all;
}
.exp-banner-section .event-desc {
text-align: center;
padding: 1.1rem 0rem 2.2rem 0rem;
font-size: 13px;
color: #000;
overflow: hidden;
text-overflow: ellipsis;
line-height: 20px;
word-break: keep-all;
font-style: normal !important;
font-weight: 400;
letter-spacing: -.26px !important;
}
.event-btn {
font-family: 'Josefin Sans', sans-serif;
letter-spacing: -0.01em;
font-size: 13px;
font-weight: 500;
text-align: center;
background: #c2b8a6;
color: #fff;
padding: 1.0rem 0;
max-width: 50%;
margin: 0 auto;
}
/* ============================================================
⑤ 경험 배너 슬라이더 (EXPERIENCE)
1:1 이미지 / 가운데 정렬 / 진행 스크롤바
============================================================ */
.exp-banner-section { padding: 0px; }
.exp-banner-section .main-title { margin: 90px auto 40px; }
.exp-banner-slider .swiper-slide {
text-align: center;
}
.exp-banner { display: block; } /* a 태그를 블록으로 슬라이드 높이 확보(이미지 미노출 방지) */
.exp-banner .exp-img-wrap {
position: relative;
margin: 0;
width: 100%;
padding-top: 100%; /* 1:1 비율 aspect-ratio 미지원 웹뷰에서도 안전하게 높이 확보 */
overflow: hidden;
background-color: #fcfcfc;
}
.exp-banner .exp-img-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.exp-banner .exp-info {
padding: 1.25rem;
color: #000;
text-align: center;
}
/* 경험 슬라이드 전용 버튼 (⑥ ENGAGEMENT 배너 .event-btn 과 분리 개별 수정 가능) */
.exp-banner-section .exp-btn {
letter-spacing: 0.01em;
font-size: 13px;
font-weight: 500;
text-align: center;
background: #c2b8a6;
color: #fff;
padding: 1.0rem;
max-width: 80%;
margin: 0 auto;
}
/* 타이틀/설명은 공통 event-title/event-desc 재사용, 버튼은 .exp-btn 전용 */
/* ============================================================
③ 기념일 컬렉션 (영상 + 스토리 + 슬라이더 + CTA 통합 카드)
영상 아래부터 CTA까지 #fafafa 한 덩어리로 연결
슬라이더/스크롤바/버튼 클래스는 이 섹션 전용 → 개별 수정 가능
============================================================ */
.anniversary-section { margin: 0.7rem 0 0 0; padding: 0; }
/* 영상 1:1 비율 고정 (720×720 권장) */
.anniversary-video-wrap { position: relative; overflow: hidden; }
/* 영상 위 하단 오버레이 문구 (그라디언트 딤 + 흰 텍스트, 클릭은 아래 링크로 통과) */
.anni-video-overlay {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 40px 20px 26px; text-align: center; color: #fff; pointer-events: none;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
}
.anni-video-title {
font-family: "Noto Serif KR", serif !important;
letter-spacing: -0.02rem;
font-size: 20px;
font-weight: 600;
line-height: 1.6em;
opacity: 0.9;
}
.anni-video-desc {
font-family: Arial, sans-serif;
font-size: 14px;
letter-spacing: -0.01rem;
line-height: 1.3;
opacity: 0.9;
margin: 12px 0px 20px;
word-break: keep-all;
font-weight: 500;
}
.anniversary-video-wrap video {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
display: block;
object-fit: cover;
transform: translateZ(0); /* GPU 합성 레이어로 분리 스크롤 시 렉/리페인트 감소 */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* 영상 아래 통합 카드 (#fafafa) */
.anniversary-info { padding: 50px 0px 70px 0px; background: #f1f3ef; }
.anniversary-title-wrap { }
.anniversary-title {
font-family: "Noto Serif KR", serif !important;
letter-spacing: -0.02rem;
margin: 0;
text-align: center;
line-height: 1.5em;
color: #000;
font-size: 25px;
font-weight: 600;
word-break: keep-all; /* 길어지면 두 줄 허용 (기존 nowrap 제거) */
}
.anniversary-desc {
font-size: 0.85rem;
text-align: center;
line-height: 1.6;
letter-spacing: initial;
padding: 16px 8px 0 8px;
margin: 0;
color: #555;
word-break: keep-all;
}
.anniversary-won { padding-left:5px; }
/* ── 기념일 상품 슬라이더 (1개 노출 / 이미지 축소 + 여백 / 리뷰 없음) ── */
.anni-prd-wrap { margin-top: 5px; }
.anni-prd-slider { overflow: hidden; }
.anni-prd-wrap .swiper-slide { position: relative; text-align: center; }
.anni-prd-wrap .swiper-slide .prd-link {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;
}
/* 이미지 축소 + 좌우 여백 (배경 박스 없이 #fafafa 위에 multiply) */
.anni-prd-wrap .prd-img-bg {
position: relative; /* 관심상품 하트 기준점 (이미지 우상단) */
background: #f1f3ef; /* 섹션 배경(.anniversary-info)과 동일 multiply 로 흰 배경 자연 제거 */
margin: 0 auto;
max-width: 70%; /* ← 이미지 크기 (값 줄이면 더 작아짐 / 여백 늘어남) */
}
/* 관심상품 하트: 이미지 우상단 (전역 .listWish absolute top/right/z-index 사용) */
.anni-prd-wrap .prd-img-bg .listWish { top: 5px; right: -5px; }
.anni-prd-wrap .prd-thumb { margin: 0; }
.anni-prd-wrap .prd-img-bg img { mix-blend-mode: multiply; max-width: 100%; height: auto; }
/* 텍스트 (좌측 정렬 · 폭은 아래 스크롤바(70%)와 동일하게 중앙 배치 → 이미지·스크롤바와 좌우 경계 일치) */
.anni-prd-wrap .anni-prd-info { text-align: left; width: 70%; margin: 14px auto 0; }
.anni-prd-wrap .prd-name { font-family: "Noto Serif KR", serif !important; letter-spacing: -0.01rem; color: #222; font-size: 17px; font-weight: 600; margin: 0; }
/* 보조설명: 1줄만 노출, 넘치면 말줄임(...) */
.anni-prd-wrap .prd-subname { font-family: 'Josefin Sans', sans-serif; letter-spacing: -0.01em; color: #5d5d5d; font-size: 11px; margin: 8px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anni-prd-wrap .price-container { margin-top: 8px; }
.anni-prd-wrap .price { display: inline-block; font-size: 14px; font-weight: bold; color: #3b3b3b; letter-spacing: -0.02em; }
.anni-prd-wrap .price-strike { display: inline-block; color: #999; font-size: 11px; margin-right: 5px; }
.anni-prd-wrap .prd-price-wrap { text-align: left; }
.anni-prd-wrap .prd-price-sale { display: inline-block; font-weight: bold; font-size: 14px; padding-right: 4px; }
.anni-prd-wrap .prd-price-origin { display: inline-block; color: #999; font-size: 11px; }
.anni-prd-wrap .prd-discount-rate { display: inline-block; color: #fa5500; font-size: 12px; padding-left: 4px; }
/* ── 기념일 CTA 버튼 (이 섹션 전용) ── */
.anni-cta {
display: block;
max-width: 50%;
margin: 30px auto 0;
padding: 1.0rem 0px;
font-family: Josefin Sans, Arial, sans-serif;
letter-spacing: -0.01rem;
font-size: 13px;
font-weight: 500;
text-align: center;
color: #fff;
background: #c2b8a6;
}
/* ============================================================
진행 스크롤바 (바) 탭 / 기념일 / 신상품 (섹션별 개별 정의)
각 섹션 독립 수정 가능(② 탭 / ③ 기념일 / ⑦ 신상품) 경험은 스크롤바 미사용
연한 트랙(#e5e1d8) 위 어두운 막대(#1b1b1b)
============================================================ */
/* ② LOVE & ENGAGEMENT (탭) */
.m_tab01-area .swiper-scrollbar {
position: relative; left: 0; width: 70%; height: 2px;
margin: 50px auto 0; background: #e5e1d8; border-radius: 0;
}
.m_tab01-area .swiper-scrollbar-drag { height: 2px; background: #1b1b1b; border-radius: 0; }
/* ③ 기념일 */
.anni-prd-slider .swiper-scrollbar {
position: relative; left: 0; width: 70%; height: 2px;
margin: 45px auto 0; background: #e5e1d8; border-radius: 0;
}
.anni-prd-slider .swiper-scrollbar-drag { height: 2px; background: #1b1b1b; border-radius: 0; }
/* ⑦ 신상품 */
.new-prd-slider .swiper-scrollbar {
position: relative; left: 0; width: 70%; height: 2px;
margin: 50px auto 0px; background: #e5e1d8; border-radius: 0;
}
.new-prd-slider .swiper-scrollbar-drag { height: 2px; background: #1b1b1b; border-radius: 0; }
/* ============================================================
⑦ 신상품 슬라이더 (new-prd-slider)
slidesPerView: 2.2 / 자동재생 7000ms / 전환속도 800ms
이미지: image_s (2열 소형 스타일)
============================================================ */
.new-prd-section { padding: 90px 0px 0px 0px; }
/* 좌측 패딩 첫 상품이 화면 왼쪽에 달라붙지 않도록 (탭 슬라이더와 동일) */
.new-prd-slider { padding-left: 15px; }
.new-prd-wrap .swiper-slide {
position: relative;
padding: 0 2% 0 0;
margin-bottom: 10px;
}
.new-prd-wrap .swiper-slide .prd-link {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.new-prd-wrap .swiper-slide div { position: relative; width: 100%; }
.new-prd-wrap .swiper-slide .prd-thumb { vertical-align: middle; margin: 0; }
.new-prd-wrap .swiper-slide .prd-subname {
font-family: 'Lato', 'Noto Sans KR', sans-serif;
font-weight: 400;
letter-spacing: 0.03em;
font-size: 10px;
color: #1d1c1c;
font-style: italic;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0px 0px 0px 0px;
}
.new-prd-wrap .swiper-slide .prd-name {
font-family: 'Lato', 'Noto Sans KR', sans-serif;
color: #1b1b1b;
font-size: 12px;
font-weight: 400;
letter-spacing: -0.020em;
text-align: left;
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.new-prd-wrap .swiper-slide .prd-review {
font-size: 9px;
font-family: 'Lato', 'Noto Sans KR', sans-serif;
text-align: left;
color: #3b3b3b;
letter-spacing: -0.02em;
}
.new-prd-wrap .swiper-slide .price {
text-align: left;
margin: 0;
font-weight: 600;
font-size: 13px;
color: #111;
padding: 5px 0px 0px 0px;
}
.new-prd-wrap .swiper-slide .price-strike { display: inline-block; color: #777; text-align: left; font-size: 11px; letter-spacing: -0.02em; }
.new-prd-wrap .prd-price-wrap { position: relative; padding-top: 0; text-align: left; }
.new-prd-wrap .prd-price-sale { display: inline-block; padding-right: 3px; margin: 0; font-weight: bold; font-size: 13px; }
.new-prd-wrap .prd-price-origin { display: inline-block; color: #777; font-size: 10px; font-family: 'PT Sans', sans-serif; }
.new-prd-wrap .prd-discount-rate { position: absolute; font-family: 'Lato', 'Noto Sans KR', sans-serif; letter-spacing: 0.05em; right: 5px; bottom: 0; color: #fa5500; font-size: 12px; }
/* 하단 상담 섹션 */
.visit_btn_wrap, .kakao_btn_wrap { text-align:center; }
.what_title { font-family: 'Noto Serif KR', serif !important; font-size: 1.6rem; text-align: center; font-weight: 600; line-height: 1.3; padding: 50px 0px 0px 0px; border-top: 1px solid #c7c7c7; }
.what_detail { font-size: 0.85rem; text-align: center; line-height: 1.6; letter-spacing: initial; padding: 20px 10px 35px 10px; word-break: keep-all; }
.what_title_warp { margin: 0px 0px 60px 0px; }
.visit_btn { min-width: 160px; width: 100%; max-width: 185px; text-align: center; padding: 15px 20px; display: inline-block; font-size: 13px; border: 1px solid #111111; position: relative; overflow: hidden; background-color: #111111; color: #ffffff; z-index: 1; transition: color 0.4s ease, border-color 0.4s ease; cursor: pointer; text-decoration: none; box-sizing: border-box; font-weight: 500; }
.kakao_info { letter-spacing: 0.02em; font-size: 0.85rem; text-align: center; line-height: 1.5; padding: 50px 0px 20px 0px; border-top: 1px solid #c7c7c7; margin-top: 50px; }
.kakao_btn { position: relative; display: inline-block; text-align: center; padding-bottom: 4px; color: #111; letter-spacing: 0.02em; font-size: 0.85rem; }
.kakao_btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #c7a97b; transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease; }
.kakao-link:hover .kakao_btn::after { transform: scaleX(0); }
/* ============================================================
상품 카드 찜 하트 (상품분류와 동일한 my-wish-list · 옵션 선택 없이 상품단위 찜, 빈↔채운 자동토글)
· Type A(add6/9/7): .prd-card 안 / Type B(add8/new): .swiper-slide 안(전체링크 .prd-link z-index:10 위)
============================================================ */
.prd-card { position: relative; } /* Type A 하트 포지셔닝 컨텍스트 (Type B 슬라이드는 이미 relative) */
.listWish { position: absolute; top: 10px; right: 10px; margin: 0; z-index: 20; } /* prd-link(z-index:10)보다 위 */
.listWish .my-wish-list {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%;
background: #fff; cursor: pointer; color: #222; box-sizing: border-box; line-height: 1;
}
.listWish .material-symbols-outlined { font-size: 18px; line-height: 1; color: #222; }
.listWish .heart-fill { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 18; }
.listWish .heart-line { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 18; }
/* ============================================================
우측 고정 버튼(.right_fixed) 노출 구간 (메인 전용, main.js가 .is-zone-shown 토글)
· 기본 숨김 → 히어로 지난 뒤 노출 → #end-fixed-bar 부터 다시 숨김
· 이 CSS는 메인에서만 로드되므로 다른 페이지의 버튼엔 영향 없음
============================================================ */
.right_fixed { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.right_fixed.is-zone-shown { opacity: 1; pointer-events: auto; }
/* BASIC css end */