/* ============================================================================ 마사지로그 전역 리브랜드 2026 v2 — 국내 예약앱 스타일 (밝은 화이트 × 코랄 × 앰버) * 최후미 로드 → 테마팩·style.css·theme.css 위에서 승리 * 되돌리기: header.php 의 이 링크 1줄 제거 ============================================================================ */ /* ─────────────── 전역 토큰 리맵 — 라이트 ─────────────── */ :root{ --primary:#F15A48; --primary-dark:#DA4433; --primary-hover:#DA4433; --primary-light:#FFECE7; --primary-glow:rgba(241,90,72,.20); --primary-glow2:rgba(241,90,72,.08); --secondary:#F15A48; --secondary-light:#FFECE7; --accent:#FFB020; --accent-light:#FFF3E0; --success:#22C55E; --danger:#EF4444; --bg:#FFFFFF; --bg-base:#FFFFFF; --bg-card:#FFFFFF; --bg-card2:#F5F6F8; --bg-glass:rgba(255,255,255,.9); --bg-glass-dark:rgba(255,255,255,.8); --bg-header:#FFFFFF; --bg-topbar:#FFFFFF; --bg-mainnav:#FAFBFC; --bg-sidebar:#FFFFFF; --bg-input:#FFFFFF; --text-primary:#1A1A1E; --text-secondary:#3A3D44; --text-muted:#868B94; --text-on-primary:#FFFFFF; --border:#ECEEF1; --border-hover:#F15A48; --border-input:#E2E5E9; /* 신규 브랜드 토큰 */ --star:#FFB020; --gold:#FFB020; --char:#1A1A1E; --char-ink:#FFFFFF; --good:#22C55E; --surface:#FFFFFF; --surface-alt:#F5F6F8; --primary-soft:#FFECE7; --shadow-xs:0 1px 2px rgba(20,20,30,.05); --shadow-sm:0 1px 3px rgba(20,20,30,.06); --shadow-md:0 6px 20px rgba(20,20,30,.08); --shadow-lg:0 12px 36px rgba(20,20,30,.12); --shadow-xl:0 20px 48px rgba(20,20,30,.14); --shadow-card:0 1px 3px rgba(20,20,30,.06); --shadow-card-hover:0 10px 28px rgba(20,20,30,.12); --sb-login-bg:#F15A48; --sb-region-bg:#5B76F0; --sb-cat-bg:#F59E0B; --sb-comm-bg:#22C55E; --sb-vip-bg:#1A1A1E; } /* ─────────────── 다크 ─────────────── */ :root[data-theme="dark"]{ --primary:#FF7568; --primary-dark:#FF8A7E; --primary-hover:#FF8A7E; --primary-light:#3A211D; --primary-glow:rgba(255,117,104,.24); --primary-glow2:rgba(255,117,104,.10); --secondary:#FF7568; --secondary-light:#3A211D; --accent:#FFC24D; --accent-light:#3A2E18; --bg:#141416; --bg-base:#1D1E20; --bg-card:#1D1E20; --bg-card2:#212226; --bg-glass:rgba(20,20,22,.9); --bg-glass-dark:rgba(20,20,22,.8); --bg-header:#141416; --bg-topbar:#141416; --bg-mainnav:#1B1C1F; --bg-sidebar:#1D1E20; --bg-input:#1D1E20; --text-primary:#F2F3F5; --text-secondary:#CBCED4; --text-muted:#9A9EA7; --text-on-primary:#1A1A1E; --border:#2E2F33; --border-hover:#FF7568; --border-input:#33343A; --star:#FFC24D; --gold:#FFC24D; --char:#000000; --char-ink:#F2F3F5; --good:#37D07A; --surface:#1D1E20; --surface-alt:#212226; --primary-soft:#3A211D; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --primary:#FF7568; --primary-dark:#FF8A7E; --primary-hover:#FF8A7E; --primary-light:#3A211D; --primary-glow:rgba(255,117,104,.24); --secondary:#FF7568; --secondary-light:#3A211D; --accent:#FFC24D; --accent-light:#3A2E18; --bg:#141416; --bg-base:#1D1E20; --bg-card:#1D1E20; --bg-card2:#212226; --bg-glass:rgba(20,20,22,.9); --bg-header:#141416; --bg-topbar:#141416; --bg-mainnav:#1B1C1F; --bg-sidebar:#1D1E20; --bg-input:#1D1E20; --text-primary:#F2F3F5; --text-secondary:#CBCED4; --text-muted:#9A9EA7; --text-on-primary:#1A1A1E; --border:#2E2F33; --border-hover:#FF7568; --border-input:#33343A; --star:#FFC24D; --gold:#FFC24D; --char:#000000; --char-ink:#F2F3F5; --good:#37D07A; --surface:#1D1E20; --surface-alt:#212226; --primary-soft:#3A211D; } } /* ─────────────── body 배경(테마 연동) · 스무딩 ─────────────── */ body{ background:var(--bg); color:var(--text-primary); -webkit-font-smoothing:antialiased; letter-spacing:-.01em; } :root[data-theme="dark"] body{ background:var(--bg); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body{ background:var(--bg); } } /* ─────────────── 업소 카드 (파셜 _shop_card.php: .gl-card-*) — 사진우선·앰버 별점 ─────────────── */ .gl-card{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-card); transition:transform .18s, box-shadow .18s, border-color .18s; } .gl-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-hover); border-color:transparent; } .gl-card-thumb{ position:relative; aspect-ratio:5/4; background:linear-gradient(135deg,#ffd3c2,#ff9e80); overflow:hidden; } .gl-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; } .gl-card:hover .gl-card-thumb img{ transform:scale(1.05); } .gl-card-thumb-ph{ position:absolute; inset:0; background:linear-gradient(135deg,#ffd9d1,#ff9f8e); } .gl-card-badges{ position:absolute; top:10px; left:10px; display:flex; gap:5px; z-index:2; } .gl-badge{ font-size:10.5px; font-weight:800; padding:4px 8px; border-radius:6px; line-height:1; } .gl-badge-vip{ background:var(--char); color:var(--star); } .gl-badge-top{ background:var(--primary); color:#fff; } .gl-badge-new{ background:var(--good); color:#fff; } .gl-card-body{ padding:12px 13px 14px; } .gl-card-region{ font-size:12.5px; color:var(--text-muted); font-weight:600; display:inline-flex; align-items:center; gap:4px; } .gl-card-name{ font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--text-primary); margin:5px 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gl-card-cat{ font-size:12.5px; color:var(--text-muted); font-weight:500; } .gl-card-foot{ display:flex; align-items:center; gap:4px; margin-top:9px; } .gl-stars,.gl-star{ color:var(--star); font-size:13px; letter-spacing:-1px; } .gl-review-cnt{ color:var(--text-muted); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; } /* ─────────────── 업소 카드 (style.css 변형: .gl-img-wrap/.gl-info) ─────────────── */ .gl-card .gl-img-wrap,.gl-img-wrap{ aspect-ratio:5/4; background:linear-gradient(135deg,#ffd3c2,#ff9e80); } .gl-badge-rec{ background:var(--primary); color:#fff; } .gl-region-tag{ color:var(--primary); background:var(--primary-light); border-radius:6px; font-weight:700; } .gl-cat-tag{ color:var(--text-muted); background:var(--bg-card2); border-radius:6px; } .gl-name{ font-weight:700; letter-spacing:-.02em; } /* ─────────────── 공통 별점 앰버 통일 ─────────────── */ .stars,.rating-stars,.review-stars{ color:var(--star); } /* ─────────────── 스크롤바 ─────────────── */ ::-webkit-scrollbar-thumb{ background:#dfe2e6; border-radius:4px; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#33343a; } /* ============================================================================ v2 크롬 육안검토 후 보정 (2026-07-16) ============================================================================ */ /* ── 지역 퀵바(헤더): 솔리드 코랄 띠 → subtle 화이트 ── */ #regionQbar.region-qbar,.region-qbar{ background:var(--surface)!important; border-bottom:1px solid var(--border)!important; box-shadow:none!important; } .region-qbar-inner{ gap:5px; } .region-qbar-label{ color:var(--text-muted)!important; font-weight:700; } .region-qbar-a{ background:transparent!important; color:var(--text-muted)!important; font-weight:600!important; border:1px solid transparent!important; } .region-qbar-a:hover{ color:var(--primary)!important; background:var(--primary-soft)!important; } .region-qbar-a.active{ background:var(--primary-soft)!important; color:var(--primary)!important; border-color:transparent!important; font-weight:700!important; } .region-qbar-toggle,[id*=QbarToggle],[id*=QbarTabBtn]{ color:var(--text-muted)!important; background:transparent!important; } .region-qbar-tab,[id*=QbarTab]{ background:var(--surface)!important; border:1px solid var(--border)!important; color:var(--text-muted)!important; box-shadow:var(--shadow-sm)!important; } /* ── 지역 섹션 타일: 과대 높이(156px) → 컴팩트 칩 ── */ .hm .hm-reg{ aspect-ratio:auto!important; height:auto!important; min-height:0!important; display:flex!important; flex-direction:column; align-items:center; justify-content:center; } .hm .hm-reg-track{ align-items:stretch; } .hm .hm-reg-bg,.hm .hm-reg-grad{ display:none!important; } .hm .hm-reg-foot{ position:static!important; left:auto; right:auto; bottom:auto; background:none!important; padding:0!important; } .hm .hm-region-sec .hm-reg-name{ color:var(--text-primary)!important; text-shadow:none!important; } .hm .hm-region-sec .hm-reg-cnt{ color:var(--text-muted)!important; text-shadow:none!important; } .hm .hm-region-sec .hm-reg-cnt b{ color:var(--primary)!important; } /* ── 리빌 페이드 애니메이션 비활성화(스크롤 중 콘텐츠 흐림/빈칸 방지 → 즉시 표시, 앱처럼 스냅) ── */ .hm .hm-in{ opacity:1!important; transform:none!important; } /* ============================================================================ 타 페이지 컬러 정합(2026-07-16) — 무지개 칩·보라 헤더·초록 문의버튼 → 코랄 ============================================================================ */ /* 테마/검색 필터 칩: 인라인 무지개색 → 중립 필 + 선택시 코랄 */ .page-filter-tab{ background:var(--surface)!important; color:var(--text-secondary)!important; border:1px solid var(--border)!important; font-weight:600!important; box-shadow:none!important; } .page-filter-tab:hover{ border-color:var(--primary)!important; color:var(--primary)!important; background:var(--primary-soft)!important; } .page-filter-tab.active,.page-filter-tab.on,.page-filter-tab[aria-current],.page-filter-tab[aria-selected="true"]{ background:var(--primary)!important; color:#fff!important; border-color:var(--primary)!important; } .page-filter-tab .cnt,.page-filter-tab .count,.page-filter-tab b{ color:inherit!important; } /* 테마 섹션 헤더: 보라 인라인 틴트 → 코랄 틴트, 아이콘/강조 코랄 */ .theme-section-hd{ background:var(--primary-soft)!important; border-color:var(--border)!important; } .theme-section-hd .theme-more,.theme-section-hd a,.theme-section-hd [class*=icon]{ color:var(--primary)!important; } .theme-section-hd [class*=badge],.theme-section-hd [style*=background]{ background:var(--primary)!important; color:#fff!important; } /* 문의 위젯(초록 그라디언트 → 코랄) */ .wwc-fab{ background:var(--primary)!important; background-image:none!important; box-shadow:0 6px 18px rgba(241,90,72,.4)!important; } .wwc-fab:hover{ background:var(--primary-dark)!important; } .wwc-card .wwc-head,.wwc-card-head,.wwc-cta,.wwc-card .wwc-title-row{ background:var(--primary)!important; background-image:none!important; } .wwc-card a[style*=background],.wwc-tab.active{ background:var(--primary)!important; }