`·`` 는 그대로라 "안 보이는데 눌리는" 상태였다.
*
* 【원인】2026-08-18 17:55 ~ 08-19 04:00 사이 블로그1 `active_plugins` 가 9개 → 3개
* (남은 것 = elementor, elementor-pro, seo-by-rank-math). 아이콘 폰트 공급원이 함께 꺼졌다.
* · elementskit-lite … `modules/elementskit-icon-pack/assets/css/ekiticons.css`
* → `.icon-search11`(검색) · `.icon-menu-11`(모바일 햄버거)
* · master-addons … `assets/fonts/linear-icons/linear-icons.css` → `.lnr-user`(회원)
* · master-addons … Material Icons → `.jltma-material-icon-keyboard_arrow_down`
* (모바일 햄버거 서랍 안 하위메뉴 펼침 화살표 — 빈 네모칸으로 보였다)
* 장바구니만 멀쩡했던 이유 = 헤더 템플릿 커스텀 CSS(DB)에서 이미 인라인 SVG 배경으로
* 교체돼 있어 폰트에 의존하지 않았기 때문.
*
* 【왜 플러그인 재활성화가 아니라 CSS 인가】지시(2026-08-19): 플러그인은 되살리지 않고
* 아이콘을 폰트에서 떼어낸다. 카트처럼 DB 커스텀 CSS 에 넣으면 또 버전관리 밖으로
* 빠지므로 **저장소 코드(booking.css)** 에 둔다. booking.css 는 전 페이지 enqueue 라
* PC·모바일 헤더 양쪽에 동일 적용된다.
*
* 【마스크 방식】`background-color: currentColor` + `mask-image(SVG)` → 헤더 글자색을 그대로
* 따라간다(stroke='white' 를 하드코딩한 카트와 달리 색상 토큰이 바뀌면 함께 바뀜).
* 크기는 `1em` = 위젯 font-size(검색 18px / 회원 20px) → 종전 렌더 박스와 동일.
*
* 【!important 이유】두 플러그인이 나중에 재활성화되면 폰트 글리프(`content:"\eXXX"`)와
* 이 배경이 겹쳐 아이콘이 2개로 보인다. 항상 이 블록이 이기게 해 1개를 보장한다.
* → 폰트로 되돌리는 정본 절차 = 이 블록 삭제(+ 플러그인 활성화).
*
* 【적용 범위·해외 무영향】`.icon-search11`·`.icon-menu-11`·`.lnr-user`·`.jltma-material-icon-*` 를 가진 포스트는 운영 DB `_elementor_data`
* 전수 스캔 결과 헤더 템플릿 2개(18467 국내 / 35380 해외)뿐이다. 언어호스트 홈 실측
* (global/jp) 결과 두 클래스 **0건** + booking.css **미링크** = 해외 영향 0.
* 회원 아이콘은 해외에서 서버사이드 미출력(evt-language-domains.php should_render)이 정본.
* 장바구니(`.lnr-cart`)는 이 블록이 건드리지 않는다(기존 DB CSS 그대로).
*/
.icon-search11,
.icon-menu-11,
.lnr-user,
.jltma-material-icon-keyboard_arrow_down {
line-height: 1;
/* ★박스를 `` 자신에 준다 — ::before 만 키우면 부모가 옛 글리프 크기(18/20px)로 남아
* 아이콘이 박스를 넘쳐 이웃과의 간격·수직 정렬이 틀어진다. 여기서 크기를 잡고 가운데 정렬한다. */
display: inline-flex;
align-items: center;
justify-content: center;
/* !important 필요 — 엘리멘터 frontend.min.css 의 `.elementor-icon i{width:1em;height:1em}` 가
* 클래스 2개(0,2,0)라 단일 클래스 선택자보다 우선한다(실측: 24px 지정이 18px 로 눌림). */
width: var(--evt-navicon-size, 1em) !important;
height: var(--evt-navicon-size, 1em) !important;
}
.icon-search11::before,
.icon-menu-11::before,
.lnr-user::before,
.jltma-material-icon-keyboard_arrow_down::before {
content: "" !important;
display: block !important;
/* 기본은 위젯 font-size(1em). 장바구니(28px 하드코딩)와 나란히 서는 아이콘만 아래에서 px 로 키운다
* — 사장님 지적 2026-08-19 "장바구니 대비 너무 작아". 폰트 글리프 시절 크기(18/20px)를 그대로
* 복원했더니 28px 카트 옆에서 작아 보였다. 카트가 기준이므로 카트에 맞춘다. */
width: 100%;
height: 100%;
background-color: currentColor !important;
-webkit-mask: var(--evt-navicon) center / contain no-repeat !important;
mask: var(--evt-navicon) center / contain no-repeat !important;
}
/* 돋보기 — 원 + 손잡이(feather search 계열, 얇은 선) */
.icon-search11 {
--evt-navicon-size: 24px;
--evt-navicon: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='M15.8 15.8 21 21'/%3E%3C/svg%3E");
}
/* 3줄 햄버거 — 모바일 헤더 메뉴 토글(.elementor-menu-toggle).
* 열림/닫힘 두 `` 가 원본 템플릿에서 **동일한 `icon-menu-11`** 이다(엘리멘터가 display 로 교환).
* 폰트 시절과 같은 그림을 유지하려고 닫기(X)로 바꾸지 않았다 — 디자인 변경은 별건으로 지시받을 때.
*/
.icon-menu-11 {
--evt-navicon-size: 24px;
--evt-navicon: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M3.5 6.5h17M3.5 12h17M3.5 17.5h17'/%3E%3C/svg%3E");
}
/* ∨ 화살표 — 서랍(모바일 햄버거) 안 하위메뉴 펼침 표시. 원본은 Material Icons `keyboard_arrow_down`.
* 열림 상태 회전은 종전대로 상위 요소 transform 이 담당한다(마스크도 함께 회전).
*/
.jltma-material-icon-keyboard_arrow_down {
--evt-navicon: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
}
/* 사람 — 머리 + 어깨(회원/마이페이지). 원본 Linearicons `lnr-user` 도 채움 없는 윤곽선이었다
* (비활성 플러그인의 폰트를 직접 로드해 실측 확인). */
.lnr-user {
--evt-navicon-size: 26px;
--evt-navicon: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.6' r='3.9'/%3E%3Cpath d='M4.6 20.4v-1a5 5 0 0 1 5-5h4.8a5 5 0 0 1 5 5v1'/%3E%3C/svg%3E");
}
/* === 모바일 반응형 (480px 이하) — 모달/탭 === */
@media (max-width: 480px) {
.form-row-half {
grid-template-columns: 1fr;
}
.evt-modal {
max-height: 95vh;
border-radius: 12px 12px 0 0;
align-self: flex-end;
}
.tab-btn {
padding: 6px 12px;
font-size: 12px;
}
/* 장바구니 사이드패널 — 모바일 전체 너비 */
.evt-cart-panel {
width: 100%;
}
}
/* ==========================================================
이벤트 카드 슬라이더 [evt_event_cards]
========================================================== */
.evt-event-cards-section {
position: relative;
width: 100%;
max-width: 1100px;
margin: 20px auto;
}
.evt-cards-viewport {
position: relative;
overflow: hidden;
border-radius: 16px;
}
.evt-cards-track {
display: flex;
transition: transform 0.4s ease;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.evt-event-card {
flex: 0 0 100%;
min-width: 100%;
position: relative;
}
.evt-card-link {
display: block;
text-decoration: none;
position: relative;
overflow: hidden;
border-radius: 16px;
cursor: pointer;
}
.evt-card-image {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
transition: transform 0.3s ease;
}
.evt-card-link:hover .evt-card-image {
transform: scale(1.02);
}
.evt-card-badge {
position: absolute;
top: 12px;
left: 12px;
background: rgba(0, 145, 145, 0.9);
color: #fff;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.evt-card-info {
padding: 12px 8px;
text-align: center;
}
.evt-card-title {
font-size: 18px;
font-weight: 700;
color: #333;
margin: 0;
}
.evt-card-subtitle {
font-size: 14px;
color: #666;
margin: 4px 0 0;
}
/* 카드 슬라이더 네비게이션 */
.evt-cards-btn {
position: absolute;
top: 45%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
border: none;
color: #333;
font-size: 24px;
line-height: 1;
cursor: pointer;
z-index: 5;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: background 0.2s, transform 0.2s;
}
.evt-cards-btn:hover {
background: #fff;
transform: translateY(-50%) scale(1.1);
}
.evt-cards-prev { left: 12px; }
.evt-cards-next { right: 12px; }
/* 도트 네비게이션 */
.evt-cards-dots {
display: flex;
justify-content: center;
gap: 8px;
padding: 12px 0 4px;
}
.evt-cards-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: #ddd;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
padding: 0;
}
.evt-cards-dot.active {
background: #009191;
transform: scale(1.3);
}
/* 자동 탭 네비게이션 */
.evt-tab-nav-auto {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding: 12px 0;
}
/* 카드 슬라이더 내장 탭 */
.evt-cards-tab-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding: 0 0 12px;
}
.evt-cards-tab {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
background: #f5f5f5;
color: #555;
border: 1px solid #ddd;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.evt-cards-tab:hover {
background: #e8e8e8;
color: #333;
}
.evt-cards-tab.active {
background: #333;
color: #fff;
border-color: #333;
}
/* 카드 슬라이더 반응형 */
@media (max-width: 768px) {
.evt-event-cards-section {
margin: 12px auto;
}
.evt-cards-btn {
width: 32px;
height: 32px;
font-size: 20px;
}
.evt-cards-prev { left: 6px; }
.evt-cards-next { right: 6px; }
.evt-card-title {
font-size: 15px;
}
.evt-card-subtitle {
font-size: 12px;
}
.evt-card-info {
padding: 8px 4px;
}
.evt-cards-tab {
padding: 6px 12px;
font-size: 12px;
}
}
/* ==========================================================
Dr.Evers Ranking 섹션
— 원본 Elementor 디자인 1:1 재현
========================================================== */
.evt-ranking-section {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
font-family: 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif;
}
/* 탭 네비게이션 — 넓은 간격, 큰 텍스트, 밑줄 스타일 */
.evt-ranking-tabs {
display: flex;
border-bottom: 2px solid #e5e5e5;
margin-bottom: 0;
}
.evt-ranking-tab {
flex: 1;
padding: 18px 0;
font-size: 22px;
font-weight: 700;
color: #ccc;
background: none;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
text-align: center;
letter-spacing: -0.02em;
}
.evt-ranking-tab:hover {
color: #666;
}
.evt-ranking-tab.active {
color: #009191;
border-bottom-color: #009191;
}
/* 탭 콘텐츠 */
.evt-ranking-content {
display: none;
}
.evt-ranking-content.active {
display: block;
}
/* 레이아웃: 왼쪽 배너 + 오른쪽 리스트 */
.evt-ranking-layout {
display: flex;
gap: 40px;
padding: 35px 0 20px;
align-items: flex-start;
}
/* 왼쪽 배너 카드 — 이미지 위 텍스트 오버레이, 전체 클릭 */
.evt-ranking-banner {
flex: 0 0 460px;
position: relative;
display: block;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: #fff;
background: #1a1a1a;
}
.evt-ranking-banner:hover {
text-decoration: none;
color: #fff;
}
.evt-ranking-banner-img {
width: 100%;
height: auto;
display: block;
}
/* 이미지 위 그라데이션 오버레이 */
.evt-ranking-banner-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 28px 28px;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
z-index: 2;
}
.evt-ranking-banner-title {
font-size: 32px;
font-weight: 800;
color: #fff;
margin: 0 0 10px;
line-height: 1.25;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.evt-ranking-banner-subtitle {
font-size: 15px;
color: rgba(255,255,255,0.9);
line-height: 1.5;
margin: 0 0 18px;
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.evt-ranking-banner-cta {
display: inline-block;
padding: 10px 22px;
font-size: 15px;
font-weight: 600;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.8);
border-radius: 20px;
transition: background 0.2s, border-color 0.2s;
}
.evt-ranking-banner:hover .evt-ranking-banner-cta {
background: rgba(255,255,255,0.15);
border-color: #fff;
}
/* 오른쪽 리스트 영역 */
.evt-ranking-list {
flex: 1;
min-width: 0;
}
.evt-ranking-slider {
overflow: hidden;
}
.evt-ranking-slide-track {
display: flex;
transition: transform 0.4s ease;
}
.evt-ranking-slide {
flex: 0 0 100%;
display: flex;
flex-direction: column;
}
/* 개별 아이템 — 넉넉한 간격 */
.evt-ranking-item {
display: flex;
align-items: center;
padding: 22px 12px;
border-bottom: 1px solid #f0f0f0;
gap: 16px;
}
.evt-ranking-item:last-child {
border-bottom: none;
}
/* 순위 배지 — 큰 원 */
.evt-ranking-rank {
flex: 0 0 46px;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background: #009191;
color: #fff;
font-size: 19px;
font-weight: 700;
border-radius: 50%;
}
/* 1~3위 골드 */
.evt-ranking-item:nth-child(1) .evt-ranking-rank,
.evt-ranking-item:nth-child(2) .evt-ranking-rank,
.evt-ranking-item:nth-child(3) .evt-ranking-rank {
background: #c8a94e;
}
.evt-ranking-item-info {
flex: 1;
min-width: 0;
}
/* 시술명 — 굵게, 크게 */
.evt-ranking-treatment {
font-size: 20px;
font-weight: 700;
color: #222;
display: block;
line-height: 1.4;
}
.evt-ranking-brand {
font-weight: 400;
color: #666;
font-size: 17px;
}
/* 가격 — 정가 작게 + 할인가 크게 빨간색 */
.evt-ranking-prices {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
white-space: nowrap;
flex-shrink: 0;
margin-left: auto;
padding-left: 16px;
}
.evt-ranking-original {
font-size: 15px;
color: #bbb;
text-decoration: line-through;
}
.evt-ranking-discount {
font-size: 28px;
font-weight: 700;
color: #e53e3e;
}
.evt-ranking-empty {
padding: 40px;
text-align: center;
color: #999;
}
/* 슬라이드 도트 네비게이션 — 중앙 정렬 */
.evt-ranking-dots {
display: flex;
gap: 10px;
justify-content: center;
padding: 18px 0 0;
}
.evt-ranking-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ddd;
border: none;
cursor: pointer;
transition: background 0.2s;
}
.evt-ranking-dot.active {
background: #009191;
}
/* 반응형 */
@media (max-width: 900px) {
.evt-ranking-layout {
gap: 24px;
}
.evt-ranking-banner {
flex: 0 0 320px;
}
.evt-ranking-tab {
font-size: 18px;
padding: 14px 0;
}
.evt-ranking-item {
padding: 16px 8px;
}
.evt-ranking-discount {
font-size: 20px;
}
}
@media (max-width: 768px) {
.evt-ranking-section {
padding: 0 12px;
}
.evt-ranking-tab {
font-size: 16px;
padding: 12px 0;
}
.evt-ranking-layout {
flex-direction: column;
gap: 24px;
padding: 24px 0 16px;
}
.evt-ranking-banner {
flex: none;
width: 100%;
}
.evt-ranking-banner-title {
font-size: 22px;
}
.evt-ranking-item {
padding: 14px 4px;
gap: 12px;
}
.evt-ranking-rank {
flex: 0 0 34px;
width: 34px;
height: 34px;
font-size: 14px;
}
.evt-ranking-treatment {
font-size: 15px;
}
.evt-ranking-discount {
font-size: 20px;
}
.evt-ranking-original {
font-size: 12px;
}
}
/* ── 모바일 터치타겟 확대 (2026-07-09 UX: 클릭영역만 44px 확보, 아이콘 시각크기 유지) ──
min-width/height는 explicit width/height(및 !important width)를 이겨 레이아웃 변형 없이 hit-area만 키운다. */
@media (max-width: 768px) {
/* 닫기 버튼 · 슬라이더 화살표: 44px */
.modal-close,
.cart-panel-close,
.evt-cards-btn,
.evt-header-section .banner-btn {
min-width: 44px;
min-height: 44px;
}
/* 예약 달력 이전/다음 화살표 (Elementor 인라인 CSS, width 미설정) — hit-area 44px + 글리프 중앙정렬 */
#booking-shield-wrap .calendar-header button {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 삭제(✕) — 파괴적 동작 오터치 방지: 40px */
.cart-item-remove,
.selected-item-remove {
min-width: 40px;
min-height: 40px;
}
/* iOS Safari 포커스 자동 줌 방지 (<16px 입력 필드).
Elementor/테마 상속 규칙(≈14.6px)이 더 높은 우선순위라 shield-wrap 스코프 + !important로 이긴다.
font-size만 강제(레이아웃 영향 최소). */
#booking-shield-wrap input[type="text"],
#booking-shield-wrap input[type="tel"],
#booking-shield-wrap input[type="email"],
#booking-shield-wrap input[type="number"],
#booking-shield-wrap input[type="search"],
#booking-shield-wrap textarea,
#booking-shield-wrap select,
.form-group input,
.form-group textarea,
.form-group select {
font-size: 16px !important;
}
}
/* ==========================================================================
Dr.Evers Ranking — 아이템 설명 줄 (E열 설명 포함 옵션)
--------------------------------------------------------------------------
마크업은 ranking-inject.js가 생성한다(Elementor 원본에 설명 슬롯이 없음):
.er-rank-left > .er-rank-textwrap > (.er-rank-name + .er-rank-desc)
⚠ 원본 랭킹 CSS는 front page(9639) _elementor_data 안의