/* ============================================================ pack-modern.css — 스타일 패키지 "Modern · Clean" (또또렌탈) v2 - head_meta.asp가 style_pack='modern'일 때만 로드 + - 모든 규칙 html[data-pack="modern"] 스코프 → 웅진(classic) 영향 0 - 무드: 쿨·크리스프·각진 미니멀. 알약/소프트 제거, 강한 보더 + 언더라인 탭 + 플랫 버튼 + 사각 배지 + 굵은 타이포. 컬러는 site_design(회청톤) 사용 ============================================================ */ /* ── 타이포: 좁은 자간 + 굵은 헤딩/제품명 ── */ html[data-pack="modern"] body { letter-spacing: -0.015em; } html[data-pack="modern"] .product-name, html[data-pack="modern"] .store-name { font-weight: 800; letter-spacing: -0.02em; } html[data-pack="modern"] .glass-header h2, html[data-pack="modern"] h1, html[data-pack="modern"] h2 { letter-spacing: -0.03em; } /* ── 헤더: 글래스 blur 제거 → 솔리드 화이트 + 브랜드 액센트 라인 ── */ html[data-pack="modern"] .glass-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #ffffff; border-bottom: 2.5px solid var(--color-primary, #6B8FC7); box-shadow: none; } /* 검색바: 각진 박스 + 또렷한 보더 */ html[data-pack="modern"] .glass-header input { border-radius: 6px; border: 1.5px solid #d7dde6 !important; background: #fff !important; } /* ── 제품명/가격: 더 크고 굵게 (또렷한 위계) ── */ html[data-pack="modern"] .product-name { font-size: 15px; } html[data-pack="modern"] .store-price, html[data-pack="modern"] .product-price { font-weight: 800; } /* ── 폰 프레임 배경: 차분한 쿨그레이 ── */ html[data-pack="modern"] .phone { background: var(--color-surface, #F4F8FC); } /* ── 제품 카드: 각짐(4px) + 강한 보더 + 그림자 제거 + 타이트 ── */ html[data-pack="modern"] .product-card, html[data-pack="modern"] .store-card { border-radius: 4px; border: 1.5px solid #c7d0dc; box-shadow: none; } html[data-pack="modern"] .product-card { padding: 12px; margin-bottom: 8px; } html[data-pack="modern"] .product-card:active { transform: none; background: #f7f9fc; } /* 썸네일/이미지: 각짐(4px) */ html[data-pack="modern"] .product-thumb-box { border-radius: 4px; background: #e9edf3; } html[data-pack="modern"] .img-frame, html[data-pack="modern"] .store-card img { border-radius: 4px; } /* ── 카드 버튼: 각짐(4px) + 플랫(그라데이션/그림자 제거) + 굵게 ── */ html[data-pack="modern"] .card-btn-group .btn-rental, html[data-pack="modern"] .card-btn-group .btn-consult { border-radius: 4px; font-weight: 700; } html[data-pack="modern"] .card-btn-group .btn-rental { border-width: 1px; } html[data-pack="modern"] .card-btn-group .btn-consult { background: var(--color-primary, #6B8FC7); box-shadow: none; } html[data-pack="modern"] .btn-order { border-radius: 4px; } html[data-pack="modern"] .btn-consult, html[data-pack="modern"] .btn-enter { border-radius: 4px; box-shadow: none; background: var(--color-primary, #6B8FC7); } html[data-pack="modern"] .btn-cart { border-radius: 4px; } /* ── 프로모 배지(tag-pill): 알약 → 사각(2px) ── */ html[data-pack="modern"] .tag-pill { border-radius: 2px; font-weight: 700; } /* ── 베스트 탭: 알약 → 언더라인 (완전히 다른 탭 패러다임) ── */ html[data-pack="modern"] .best-tab { border-radius: 0; background: transparent; border: none; border-bottom: 2.5px solid transparent; color: #8a93a0; padding: 6px 4px; margin-right: 8px; font-weight: 700; } html[data-pack="modern"] .best-tab.active { background: transparent; border-bottom-color: var(--color-primary, #6B8FC7); color: var(--color-primary, #6B8FC7); box-shadow: none; } /* ── 카테고리 필터 칩: 사각 아웃라인, 활성=솔리드 ── */ html[data-pack="modern"] .filter-chip { border-radius: 5px; background: #ffffff; border: 1px solid #d3dae3; color: #5b6573; font-weight: 700; } html[data-pack="modern"] .filter-chip.active { background: var(--color-primary, #6B8FC7); border-color: var(--color-primary, #6B8FC7); color: #fff; box-shadow: none; } html[data-pack="modern"] .filter-chip:not(.active) .chip-count { background: #eef1f5; color: #8a93a0; } /* ── 일반 chip / 드로어 항목: 각짐 ── */ html[data-pack="modern"] .chip { border-radius: 5px; } html[data-pack="modern"] .drawer-cat-btn, html[data-pack="modern"] .drawer-sub-btn { border-radius: 5px; } /* ── 바텀시트/모달/플로팅: 라운드 축소 ── */ html[data-pack="modern"] .recent-fab { border-radius: 12px; } /* 내부 썸네일도 버튼에 맞춰 라운드 사각(원형 → 각짐) */ html[data-pack="modern"] .recent-fab img { border-radius: 10px; } html[data-pack="modern"] .recent-sheet, html[data-pack="modern"] .filter-sheet { border-top-left-radius: 10px; border-top-right-radius: 10px; } html[data-pack="modern"] .phone-fab { border-radius: 10px; } /* ── 가격 강조 ── */ html[data-pack="modern"] .store-price, html[data-pack="modern"] .product-price { letter-spacing: -0.02em; } /* ============================================================ 레이아웃 v6 — 제품 카드: 1단 + 이미지 3장 유지 (사용자 요청 반영) 대상: #bestCardList(홈 베스트) + #productList(카테고리) 레이아웃은 1단·3칸 썸네일 그대로. modern 차별화는 위쪽 컴포넌트 규칙 (각진 보더/각진 썸네일/언더라인 탭/사각 배지/플랫 버튼/굵은 타이포)으로. 여기서는 제품명·가격 위계만 추가 강조. ※ v4(2단 그리드)·v5(풀폭 히어로 1장)는 사용자 피드백으로 철회. ============================================================ */ html[data-pack="modern"] #bestCardList .product-name, html[data-pack="modern"] #productList .product-name { font-size: 15.5px !important; font-weight: 800; } html[data-pack="modern"] #bestCardList .store-price, html[data-pack="modern"] #productList .store-price { font-size: 18px !important; } /* ============================================================ 슬라이드 배너 — 좌우 full-bleed + 각지게 + 상·하 여백 정리 (또또 modern) default(.flex-1.px-4) / shoplist(#catBannerZone.px-4) 부모 좌우 16px를 뚫음 ============================================================ */ html[data-pack="modern"] .banner-wrap { margin-left: -16px !important; margin-right: -16px !important; border-radius: 0 !important; /* 높이 고정(148px) 해제 → 배너 이미지 원본 비율(720:296)에 맞춰 자동 높이. full-bleed 폭에 비율이 일치 → object-cover라도 위아래 잘림 0 */ height: auto !important; aspect-ratio: 720 / 296 !important; } /* 메인(default): 배너 상단 여백 제거(부모 .flex-1 pt-3 12px 상쇄) → 헤더에 붙임. 하단은 카테고리 칩과의 간격(mb-3) 유지 */ html[data-pack="modern"] .flex-1.overflow-y-auto > .banner-wrap { margin-top: -12px !important; } /* 리스트(shoplist): 배너 상·하 여백 모두 제거 (catBannerZone pt-3 + banner-wrap mb-3) */ html[data-pack="modern"] #catBannerZone { padding-top: 0 !important; } html[data-pack="modern"] #catBannerZone .banner-wrap { margin-bottom: 0 !important; } /* ============================================================ 하단 고정 네비 (또또 전용 .mnav) — 완전히 다른 탭바 솔리드 아이콘(웅진과 다른 세트) + 활성 상단 인디케이터 바 + 가운데 원형 전화칩(흰 테두리 돌출). 마크업: nav_bottom.asp SITE_ID 분기 ============================================================ */ html[data-pack="modern"] .mnav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 390px; box-sizing: border-box; height: 62px; padding: 0 6px 9px; background: #ffffff; border-top: 1px solid #e8edf3; box-shadow: 0 -4px 20px rgba(0,0,0,0.07); display: flex; align-items: flex-end; justify-content: space-around; z-index: 50; } html[data-pack="modern"] .mnav-item { flex: 1; position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding-bottom: 2px; background: none; border: none; cursor: pointer; text-decoration: none; color: #9aa3b0; font-size: 10px; font-weight: 600; letter-spacing: -0.02em; } html[data-pack="modern"] .mnav-item i { font-size: 19px; line-height: 1; } html[data-pack="modern"] .mnav-item.active { color: var(--color-primary, #6B8FC7); } /* 활성 상단 인디케이터 바 (탭 상단에 짧은 막대) */ html[data-pack="modern"] .mnav-item.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--color-primary, #6B8FC7); } /* 가운데 전화: 원형 솔리드 칩 + 번호 (흰 테두리로 돌출 분리) */ html[data-pack="modern"] .mnav-call { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding-bottom: 2px; text-decoration: none; color: var(--color-primary, #6B8FC7); } html[data-pack="modern"] .mnav-call-ic { position: relative; width: 54px; height: 54px; border-radius: 50%; margin-top: -25px; background: var(--color-primary, #6B8FC7); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 23px; /* 아이콘 키움 20→23 */ border: none; /* 흰 테두리 제거 → 부드러운 컬러 그림자로 floating */ box-shadow: 0 6px 16px rgba(107,143,199,0.5), 0 2px 5px rgba(0,0,0,0.10); } /* 헤드셋 아이콘 흔들기 — 전화벨 울리듯 잠깐 흔들고 쉼(과하지 않게 주기 반복) */ html[data-pack="modern"] .mnav-call-ic i { display: inline-block; transform-origin: center; animation: mnavCallWiggle 3s ease-in-out infinite; } @keyframes mnavCallWiggle { 0%, 80%, 100% { transform: rotate(0deg); } 83% { transform: rotate(-13deg); } 86% { transform: rotate(11deg); } 89% { transform: rotate(-8deg); } 92% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { html[data-pack="modern"] .mnav-call-ic i { animation: none; } } html[data-pack="modern"] .mnav-call:active .mnav-call-ic { transform: scale(0.94); } html[data-pack="modern"] .mnav-call-num { font-size: 9px; font-weight: 800; letter-spacing: -0.03em; } /* ============================================================ 헤더 상단 아이콘(장바구니/사은품) — 둥근 회색 → 각진 청회 칩 + primary 라인 ============================================================ */ html[data-pack="modern"] .glass-header button.rounded-full { border-radius: 5px !important; background: var(--color-surface, #F4F8FC) !important; } html[data-pack="modern"] .glass-header button.rounded-full svg { stroke: var(--color-primary, #6B8FC7) !important; stroke-width: 2 !important; } /* ============================================================ 드로어 메뉴 (또또 전용) — 파스텔 다색+SVG → 청회 모노톤 + FA 아이콘 카테고리 아이콘은 drawer.asp SITE_ID 분기(.mdrw-cat-ic + FA solid) ============================================================ */ /* 헤더: 그라데이션(인라인) → 솔리드 primary */ html[data-pack="modern"] #drawerPanel > div:first-child { background: var(--color-primary, #6B8FC7) !important; } /* 닫기 버튼: 원형 → 각진 */ html[data-pack="modern"] #drawerPanel > div:first-child button { border-radius: 8px !important; } /* 카테고리/하위 버튼: 각지게 */ html[data-pack="modern"] .drawer-cat-btn, html[data-pack="modern"] .drawer-sub-btn { border-radius: 6px !important; } /* 또또 카테고리 아이콘칩(.mdrw-cat-ic): 청회 틴트 + FA 청회 아이콘 (파스텔 다색 통일) */ html[data-pack="modern"] .mdrw-cat-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--color-primary-light, #EAF1FA); display: flex; align-items: center; justify-content: center; color: var(--color-primary, #6B8FC7); font-size: 15px; flex-shrink: 0; } /* 특수메뉴 칩(인라인 radius:14px): 파스텔 다색 → 청회 단일톤 아웃라인 */ html[data-pack="modern"] #drawerPanel button[style*="border-radius:14px"] { border-radius: 8px !important; background: var(--color-surface, #F4F8FC) !important; border: 1px solid #dce4ef !important; } html[data-pack="modern"] #drawerPanel button[style*="border-radius:14px"] svg { stroke: var(--color-primary, #6B8FC7) !important; } html[data-pack="modern"] #drawerPanel button[style*="border-radius:14px"] span { color: var(--color-primary, #6B8FC7) !important; } /* 상담신청(인라인 그라데이션): 솔리드 primary 강조 유지 (소스 순서상 위 규칙을 덮음) */ html[data-pack="modern"] #drawerPanel button[style*="linear-gradient"] { background: var(--color-primary, #6B8FC7) !important; border-color: var(--color-primary, #6B8FC7) !important; } html[data-pack="modern"] #drawerPanel button[style*="linear-gradient"] span { color: #fff !important; } html[data-pack="modern"] #drawerPanel button[style*="linear-gradient"] svg { stroke: #fff !important; } /* ============================================================ 챗봇 FAB/말풍선 — 또또 하단바(.mnav 62px)와 겹침 방지: 위로 띄움 (외부 wzrental embed-kakao.js가 주입. 인라인 bottom을 !important로 보정) ============================================================ */ html[data-pack="modern"] #coway-fab { bottom: 74px !important; } /* 말풍선(CTA)은 FAB 위로 분리 → FAB와 겹침 방지 */ html[data-pack="modern"] #coway-cta { bottom: 155px !important; } /* ============================================================ 카테고리 필터바 — 웅진 베이지 하드코딩(category.css) → 또또 청회 surface ============================================================ */ html[data-pack="modern"] .filter-bar { background: rgba(244, 248, 252, 0.97) !important; } /* ============================================================ 제품 비교 버튼 — 아이콘 + "비교" 텍스트 병행 ============================================================ */ html[data-pack="modern"] .compare-check { gap: 3px; padding: 0 8px !important; color: #999; border-color: #ddd; background: #fafafa; } html[data-pack="modern"] .compare-check::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f362"; /* fa-right-left */ font-size: 11px; line-height: 1; } html[data-pack="modern"] .compare-check.active::before { content: "\f00c"; } /* ============================================================ 제품 비교 모달 — category.css의 웅진 주황 잔재 → 또또 청회 (#f5dcc8 헤더 테두리, #e0a07a 모델명, 파랑 기능칩 #E8F4FD) ============================================================ */ html[data-pack="modern"] .cmp-head-label, html[data-pack="modern"] .cmp-data-cell.cmp-head { border-right-color: #cdd9ec !important; } html[data-pack="modern"] .cmp-data-cell.cmp-head .p-model, html[data-pack="modern"] .compare-product-head .p-model { color: var(--color-primary-dark, #4E6FA3) !important; } /* 기능칩: 파랑 하드코딩 → 또또 청회 통일 */ html[data-pack="modern"] .compare-data-cell .func-chip, html[data-pack="modern"] .cmp-data-cell .func-chip { background: var(--color-primary-light, #EAF1FA) !important; color: var(--color-primary, #6B8FC7) !important; border-color: #cdd9ec !important; }