@charset "utf-8";
/* ============================================================
LOVVON DARK — 다크 전환 레이어 (2026-08-19)
[설계]
원본 CSS(lovvon.css / mobile_shop.css / mobile.css / 스킨 style.css)를
한 줄도 고치지 않는다. 이 파일 하나만 "가장 나중에" 로드해서 덮는다.
· lovvon.css 는 var(--lv-*) 토큰을 1,055곳에서 쓴다
→ :root 값만 다시 정의하면 테마 화면이 통째로 반전된다
· mobile_shop.css / mobile.css 는 색이 하드코딩(671곳)이고
theme/lovvon/head.sub.php 59줄에서 직접 echo 되므로
이 파일을 그 "바로 다음 줄"에 넣어 순서로 이긴다 (특이도 싸움 회피)
[롤백]
head.sub.php 에 추가한 한 줄만 주석 처리하면 즉시 원래 밝은 테마로 복귀.
[토큰 역할이 반전된다 — 이름 ≠ 값]
1,055곳을 고치지 않으려고 토큰 "이름은 그대로 두고 값만" 뒤집었다.
그래서 --lv-black 이 밝은색, --lv-white 가 어두운색이 된다. 헷갈리지 말 것.
실제 사용 분포를 재서 이렇게 해도 논리가 맞는 걸 확인했다:
--lv-black : 텍스트82 / 버튼배경42 / 보더68 → 밝은 글씨·흰 버튼면·밝은 보더
--lv-white : 배경59 / 버튼위글씨62 → 어두운 패널·흰 버튼 위 어두운 글씨
즉 기존 "검정 버튼 + 흰 글씨"가 자동으로 "밝은 버튼 + 어두운 글씨"가 된다.
============================================================ */
/* ── 1. 팔레트 (클라이언트 지정) ─────────────────────────────
배경 딥매트블랙 #080c15 / 텍스트 플래티넘 모노 #D1D5DB / 포인트 네온 하트비트 #ff007f
------------------------------------------------------------ */
:root {
/* 전경/배경 (역할 반전) */
--lv-black: #F3F4F6; /* 가장 강한 전경 — 제목·버튼면·강조 보더 17.8:1 AAA */
--lv-white: #080c15; /* 바탕면 — 딥 매트블랙 */
/* 회색 스케일 (어두움→밝음 으로 의미가 뒤집힘) — 괄호는 배경 대비비 */
--lv-gray-100: #131A26; /* 카드·섹션 면 (background 39곳) */
--lv-gray-200: #232B3A; /* 보더 전용 (border 197곳) */
--lv-gray-400: #7C8496; /* 흐린 텍스트 5.2:1 AA ← 원안 #6B7280 은 4.05 로 미달이었다 */
--lv-gray-600: #9CA3AF; /* 보조 텍스트 7.7:1 AAA */
--lv-gray-700: #D1D5DB; /* 본문 — 플래티넘 모노 13.3:1 AAA */
--lv-gray-800: #D1D5DB; /* 본문 강조 */
--lv-gray-900: #E5E7EB; /* 어두운 버튼이던 자리 → 밝은 버튼면 */
/* 브랜드 강조 — 베이지에서 네온 핑크로 교체 (50곳이 즉시 바뀐다) */
--lv-accent: #ff007f;
--lv-accent-light: #7a0040; /* 그라디언트 시작색 */
--lv-bg-warm: #0E141F; /* 매거진 섹션 배경 */
/* 네온 (원래도 핑크였음 — 유지) */
--lv-neon: #ff007f;
--lv-neon-glow: rgba(255, 0, 127, 0.55);
--lv-neon-haze: rgba(255, 0, 127, 0.28);
/* 위험/삭제 — 어두운 바탕에서 읽히도록 조정 */
--lv-danger: #ff6b6b;
--lv-danger-border: #7a2b2b;
--lv-danger-bg: #2A1418;
/* 타이포 — 국문·영문 Pretendard, 폴백 Noto Sans KR */
--lv-font: 'Pretendard Variable', Pretendard, 'Noto Sans KR', system-ui, 'Helvetica Neue', Arial, sans-serif;
/* 숫자 전용 — Montserrat (가격·수량 등에 .lv-num 으로 적용) */
--lv-font-num: 'Montserrat', 'Pretendard Variable', Pretendard, sans-serif;
}
/* ── 2. 바탕 강제 ─────────────────────────────────────────────
mobile_shop.css:5 가 body{color:#222; background:#fff} 를 하드코딩하고
mobile.css:5 는 background:#e6e6e6 이다. 둘 다 여기서 덮는다.
------------------------------------------------------------ */
html { background: var(--lv-white); }
body {
background: var(--lv-white);
color: var(--lv-gray-700);
font-family: var(--lv-font);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 원본 CSS가 흰 배경을 깔던 대표 컨테이너들 */
#wrapper, #container, #contents, .lv-wrap { background: transparent; }
/* ── 3. 숫자 타이포 ───────────────────────────────────────────
가격·수량은 Montserrat. tabular-nums 로 자릿수가 흔들리지 않게.
------------------------------------------------------------ */
.lv-num,
.lv-price, .lv-price-original, .lv-discount {
font-family: var(--lv-font-num);
font-feature-settings: 'tnum' 1;
font-variant-numeric: tabular-nums;
}
/* ── 4. 개별 보정 ─────────────────────────────────────────────
토큰 일괄 반전만으로는 어색해지는 소수 지점.
------------------------------------------------------------ */
/* 매거진 히어로 자리표시자 — gray-900 이 밝아졌으므로 어두운 면으로 되돌린다 */
.lv-mag-hero-placeholder { background: var(--lv-gray-100); }
/* 썸네일 면은 색을 깔지 않는다 (260821)
흰 누끼 완화용으로 어두운 면을 깔았었는데, 상품 사진의 여백과 면 색이
어긋나 사각형 테두리처럼 보였다. 원본 lovvon.css 820줄에도 gray-100 이
들어있으므로 여기서 transparent 로 덮는다(원본은 수정하지 않는다).
특이도: 원본이 `.lv-product-card .lv-thumb`(0,2,0) 이라 같은 형태로 맞받아야 이긴다. */
.lv-product-card .lv-thumb, .lv-thumb { background: transparent; }
/* 상품 카드 면 (260821) — 시안: 배경보다 한 겹 어두운 카드 위에 상품이 얹힌다
#0000002b = 검정 알파 2b(43/255 ≈ 17%). 불투명 색이 아니라 반투명이라
페이지 배경(#080c15)이 비쳐 같은 색 계열을 유지한 채 한 단계만 가라앉는다.
썸네일은 위에서 transparent 로 비웠으므로 이 카드 면이 그대로 비쳐 보인다. */
.lv-product-card {
background: #0000002b;
border-radius: 6px;
padding: 14px;
}
/* 위시 하트 — 원본은 흰 원(rgba(255,255,255,.9))이라 다크에서 흰 점으로 튄다.
시안처럼 면을 없애고 선만 남긴다. 위치는 카드 패딩 안쪽으로 맞춘다. */
.lv-product-card .lv-wish-btn {
top: 12px;
right: 12px;
background: transparent;
color: rgba(255, 255, 255, 0.55);
}
.lv-product-card .lv-wish-btn:hover { color: var(--lv-neon); background: transparent; }
.lv-product-card .lv-wish-btn.is-on { color: var(--lv-neon); background: transparent; box-shadow: none; }
/* ============================================================
5. UI ELEMENTS — 시안 07 반영
------------------------------------------------------------
[왜 필요한가]
--lv-black 은 텍스트 82곳 / 버튼면 42곳 / 보더 68곳에 함께 쓰인다.
토큰을 밝게 뒤집으면 텍스트·선·보더는 맞지만 "면"으로 쓰이던 42곳이
흰 덩어리가 된다(푸터·하단탭·공지바·버튼 등).
토큰은 다수인 텍스트 기준(밝게)으로 두고, 면으로 쓰이던 곳만 여기서 덮는다.
============================================================ */
:root {
--lv-face: #1E2430; /* 버튼·뱃지 기본 면 (시안 Default) */
--lv-face-strong: #0E141F; /* 푸터·하단탭 등 구조 면 */
--lv-on-neon: #ffffff; /* 네온 핑크 위 글씨 */
}
/* ── 5-1. 구조 면 — 밝아지면 안 되는 덩어리들 ───────────────── */
.lv-notice-bar,
.lv-footer,
.lv-tabbar,
#modalLayer .carting,
.lv-order-layout .od_coupon h3,
#sod_frm.lv-order-layout #order_address {
background: var(--lv-face-strong);
color: var(--lv-gray-700);
}
/* 아이콘 메뉴 원형 배경 — 원래 #111 원형이었다. 밝아지면 흰 원이 된다 */
.lv-icon-menu .sh-banner-img-wrap img { background: var(--lv-face-strong); }
/* 선으로 쓰이는 것들은 밝은 채로 두는 게 맞다 (덮지 않음)
.lv-hamburger span / .lv-panel-close::before,::after */
/* ── 5-2. BUTTON — 시안: Default 어두운 면 + 밝은 글씨 / Hover 네온 보더 ── */
.lv-btn-fill, .lv-btn-black, .lv-search-btn, .lv-btn-addr, .lv-btn-order,
.lv-btn-shop, .lv-cancel-submit, .lv-qa-btn-write, .lv-qa-search-btn,
.lv-search-bar-btn, .lv-faq-search-btn,
.lv-order-layout .btn_address,
.lv-order-layout #display_pay_button .btn_submit,
.lv-order-layout .od_coupon .cp_apply,
.lv-order-layout .od_coupon .od_cp_apply,
.lv-search-wrap #sch_res_detail .btn_submit,
#bo_w .btn_submit, #bo_w #btn_submit {
background: var(--lv-face);
color: var(--lv-black);
border: 1px solid transparent;
border-radius: 6px;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.lv-btn-fill:hover, .lv-btn-black:hover, .lv-search-btn:hover, .lv-btn-addr:hover,
.lv-btn-order:hover, .lv-btn-shop:hover, .lv-cancel-submit:hover,
.lv-qa-btn-write:hover, .lv-qa-search-btn:hover, .lv-search-bar-btn:hover,
.lv-faq-search-btn:hover,
.lv-order-layout .btn_address:hover,
.lv-order-layout #display_pay_button .btn_submit:hover,
#bo_w .btn_submit:hover, #bo_w #btn_submit:hover {
background: var(--lv-face);
border-color: var(--lv-neon);
opacity: 1;
}
/* 구매 버튼은 Primary — 시안 Active 상태(네온 채움 + 글로우) */
.lv-buybar-buy {
background: var(--lv-neon);
color: var(--lv-on-neon);
}
/* border-radius·border·glow 는 12-2 에서 네 버튼을 묶어서 준다.
여기 단독으로 두면 스크롤 전후로 모양이 달라진다(260821 실제로 그랬다). */
/* ── 5-3. 활성 탭 / 페이지네이션 — 시안: 네온 포인트 ────────── */
.lv-cat-tag.active, .lv-cat-tag:hover,
.lv-ship-tab.active, .lv-ship-tab:hover,
.lv-qa-cat-tab.active, .lv-faq-cat-tab.active,
.lv-sort-btn.active,
.lv-step.active .lv-step-num,
.lv-faq-item.open .lv-faq-toggle,
.lv-iu-write-btn:hover {
background: var(--lv-neon);
color: var(--lv-on-neon);
border-color: var(--lv-neon);
}
/* ── 5-4. BADGE — 시안: BEST 네온 채움 / NEW·SALE 어두운 면 ── */
.lv-badge, .lv-view-badge, .lv-badge-notice,
.lv-faq-q-badge, .lv-qa-block-label.q, .lv-qa-status.done {
background: var(--lv-face);
color: var(--lv-black);
/* ⚠️ 원본 .lv-badge 에는 border 가 아예 없다(875줄). width 가 0 이라
각 배지에서 border-color 만 줘도 선이 안 그려진다 — 여기서 1px 를 깔아 둔다. */
border: 1px solid transparent;
}
/* 시안 07 기준: BEST 만 네온 채움. NEW·SALE 은 어두운 면 유지 */
.lv-badge.best {
background: var(--lv-neon);
color: var(--lv-on-neon);
}
/* 장바구니 개수 — 시안의 핑크 원형 뱃지 */
.lv-cart-count {
background: var(--lv-neon);
color: var(--lv-on-neon);
}
/* ============================================================
6. 이미지 위 텍스트 & 링크 특이도 보정
------------------------------------------------------------
[문제 1] 이미지 위에 얹는 글씨가 --lv-white 를 쓰고 있었다.
원래는 "흰 글씨"라는 뜻이었지만 토큰을 뒤집으면 배경색(#080c15)이 되어
사진 위에서 안 보인다. 이런 자리는 테마와 무관하게 항상 흰색이어야 한다.
[문제 2] a 태그 규칙이 color 를 다시 잡는다.
a.lv-btn-fill:link 는 특이도 (0,1,1) 이라 5-2 의 .lv-btn-fill (0,1,0) 이 진다.
그래서 버튼 글씨가 어두운 채로 남았다. 같은 형태로 맞받아야 한다.
============================================================ */
:root { --lv-on-media: #ffffff; } /* 이미지·영상 위 고정 흰색 */
/* ── 6-1. 이미지 위 오버레이 — 항상 흰색 ─────────────────── */
.lv-hero-content,
.lv-hero .main_banner_wrap,
.lv-hero .main_title,
.lv-editorial-label h3,
.lv-mag-hero-content {
color: var(--lv-on-media);
}
.lv-editorial-label a,
.lv-editorial-label a:link,
.lv-editorial-label a:visited { color: var(--lv-on-media); }
/* ── 6-2. 히어로 CTA — 시안: 흰 외곽선, hover 는 네온 ────── */
.lv-hero-cta,
a.lv-hero-cta, a.lv-hero-cta:link, a.lv-hero-cta:visited {
border: 1px solid var(--lv-on-media);
color: var(--lv-on-media);
background: transparent;
border-radius: 6px;
}
.lv-hero-cta:hover,
a.lv-hero-cta:hover {
background: transparent;
border-color: var(--lv-neon);
color: var(--lv-neon);
box-shadow: 0 0 14px var(--lv-neon-haze);
}
/* 배너 스킨이 그리는 버튼도 동일하게 */
.lv-hero .banner_btn a,
.lv-hero .banner_btn a:link,
.lv-hero .banner_btn a:visited {
border: 1px solid var(--lv-on-media);
color: var(--lv-on-media);
border-radius: 6px;
}
.lv-hero .banner_btn a:hover {
border-color: var(--lv-neon);
color: var(--lv-neon);
box-shadow: 0 0 14px var(--lv-neon-haze);
}
/* ── 6-2b. 히어로 텍스트 위치 (260821) ────────────────────
원본 lovvon.css 648줄이 bottom:60px. 번호 불릿과 너무 붙어서 80px 로 올린다.
원본은 수정하지 않고 여기서 덮는다(특이도 동일 0,2,0 + 나중 로드).
⚠️ 이 규칙은 미디어쿼리 밖이라 **모바일에도 적용된다.**
원본의 @media(≤768px) `left:24px; bottom:40px` 중 bottom 만 80px 로 덮이고
left:24px 은 그대로 살아남는다 — 의도한 동작이다.
(미디어쿼리는 특이도를 올리지 않는다. 순서로 이긴다) */
.lv-hero .main_banner_wrap { bottom: 80px; }
/* ── 6-3. 히어로 페이지네이션 — 01 / 02 / 03 번호 + 왼쪽 정렬 (260821) ──
배너 스킨(swiper_main·main_banner·swiper_rolling)은 renderBullet 없이
빈