/* =========================================================================== 액상덕후 UI/UX 테마 --------------------------------------------------------------------------- 붙여넣는 곳: WP 관리자 → 사용자 지정하기 → 추가 CSS (또는 Code Snippets 플러그인의 CSS 스니펫) 이 파일은 스타일만 얹는다. 다음은 절대 건드리지 않는다: · 폼 필드의 name / id — 입금 자동매칭이 이름으로 걸려 있다 · 성인인증(dreamsecurity) 단계 · 결제 · 장바구니의 데이터 경로 · keyple / kboard 플러그인의 동작 되돌리기: 이 CSS 를 지우면 원래대로 돌아온다. DB 는 손대지 않는다. =========================================================================== */ :root{ /* 폰트 — 테마가 이미 Pretendard 를 쓴다 */ --dh-font: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; /* 면 · 글자 · 포인트는 tokens.css 가 정한다 — 여기서는 옛 이름만 그쪽으로 잇는다. (2026-10-06 사고: hex→var 매핑 스크립트가 이 블록을 `--dh-surface: var(--dh-surface)` 꼴로 만들어 순환 참조가 됐고, 테마 화면 전체에서 토큰이 무효가 됐다. 자기 이름을 다시 쓰지 않는다) */ --dh-bg: var(--dh-ground); --dh-bg-2: var(--dh-surface-2); --dh-line-2: var(--dh-line-strong); /* 카드 아이브로 (신상 · 9월 특가 · 재구매 1위 · 품절) — 흰 카드 위 4.5:1 이상 */ --dh-eb-new: var(--dh-accent-deep); --dh-eb-sale: #B45309; --dh-eb-best: #9F1239; --dh-eb-out: var(--dh-ink-3); /* 주문 상태 — 색은 보조 신호다. 항상 한글 라벨과 함께 쓴다 */ --dh-st-pending: var(--dh-status-pending); /* 입금전 */ --dh-st-check: var(--dh-status-check); /* 확인필요 */ --dh-st-paid: var(--dh-status-paid); /* 입금확인 */ --dh-st-shipping: var(--dh-status-shipping); /* 배송중 */ --dh-st-done: var(--dh-status-done); /* 배송완료 */ --dh-r: 16px; --dh-r-lg: 22px; --dh-ez: cubic-bezier(.2, 0, .2, 1); /* 터치 타깃 — 최소 44px, 주요 CTA 48px */ --dh-tap: 44px; --dh-tap-cta: 48px; } /* --- 기본 ---------------------------------------------------------------- */ body{ font-family: var(--dh-font); color: var(--dh-ink); background: var(--dh-bg); /* 한글에 break-all 을 쓰면 어절 중간이 끊긴다 */ word-break: keep-all; overflow-wrap: break-word; } /* 키보드 이동이 보이게. 밝은 포인트색은 흰 배경에서 2.14:1 이라 링에 못 쓴다 */ :where(a, button, input, select, textarea, [tabindex]):focus-visible{ outline: 2px solid var(--dh-accent-deep); outline-offset: 2px; } /* 가격 · 수량처럼 세로로 정렬되는 숫자. 모노 폰트는 쓰지 않는다 — 같은 글꼴의 고정폭 숫자면 된다 */ .woocommerce-Price-amount, .quantity input, .order-total .amount{ font-variant-numeric: tabular-nums; } /* 작은 글자 바닥. 11–12px 캡션은 안드로이드 기본 한글 폰트에서 얇고 흐리게 나온다 */ .woocommerce small, .woocommerce .product_meta, .woocommerce-breadcrumb, .woocommerce ul.products li.product .woocommerce-loop-product__title + *{ font-size: max(13px, .85em); } /* --- 버튼 ---------------------------------------------------------------- 주요 액션은 밝은 하늘색 채움 + 검정 글자. 보조는 흰 바탕 + 테두리. */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce .single_add_to_cart_button, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-cart .checkout-button, .woocommerce-checkout #place_order{ background: var(--dh-accent) !important; color: var(--dh-accent-ink) !important; border: 0 !important; border-radius: 999px !important; min-height: var(--dh-tap-cta); padding: 0 1.4rem !important; font-weight:800 !important; letter-spacing: 0; transition: filter 160ms var(--dh-ez), transform 160ms var(--dh-ez); } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce-cart .checkout-button:hover, .woocommerce-checkout #place_order:hover, .woocommerce-form-login__submit:hover, .woocommerce-form-register__submit:hover{ filter: brightness(1.06); } .woocommerce-cart .checkout-button:active, .woocommerce-checkout #place_order:active{ transform: scale(.985); } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{ border-radius: 999px !important; min-height: var(--dh-tap); font-weight:700 !important; } /* --- 폼 ------------------------------------------------------------------ 글자 크기를 16px 아래로 내리지 않는다. iOS 사파리가 탭할 때 화면을 확대한다. */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea{ font-size: 16px !important; min-height: var(--dh-tap); border: 1px solid var(--dh-line-2) !important; border-radius: 10px !important; padding: 11px 13px !important; background: var(--dh-surface) !important; transition: border-color 160ms var(--dh-ez), box-shadow 160ms var(--dh-ez); } .woocommerce form .form-row input.input-text:focus, .woocommerce-checkout input.input-text:focus, .woocommerce-checkout select:focus, .woocommerce-checkout textarea:focus{ border-color: var(--dh-accent-deep) !important; box-shadow: 0 0 0 3px var(--dh-accent-soft) !important; outline: none !important; } /* 입금자명 입력을 약하게 만들면 그대로 운영 비용이 된다. 이름이 다르면 자동확인이 실패해 사람이 손으로 처리해야 한다. */ #depositor_name_field, .woocommerce-checkout .depositor-name{ background: var(--dh-accent-soft); border: 1px solid var(--dh-accent); border-radius: var(--dh-r); padding: 1rem !important; margin-block: .75rem; } /* --- 상품 카드 ------------------------------------------------------------ */ .woocommerce ul.products li.product{ background: var(--dh-surface); border-radius: var(--dh-r-lg); overflow: hidden; padding: .6rem .6rem 1rem; transition: transform 200ms var(--dh-ez), box-shadow 200ms var(--dh-ez); } .woocommerce ul.products li.product:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px -28px rgba(17,17,17,.35); } /* 이미지는 카드 안에서 한 번 더 둥글게 — 데모의 카드 구조 */ .woocommerce ul.products li.product img{ border-radius: var(--dh-r); } .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size: 15.5px; font-weight:700; letter-spacing: 0; line-height: 1.35; padding: .5rem .35rem 0; } /* 별점 색 — 데모와 같은 앰버 */ .woocommerce .star-rating span::before, .woocommerce .star-rating::before{ color: #F59E0B; } /* 병당 가격이 고객의 비교 지표다. 총액보다 크게 쓴다. */ .woocommerce ul.products li.product .price{ color: var(--dh-ink) !important; font-weight:900; letter-spacing: 0; font-variant-numeric: tabular-nums; } .woocommerce ul.products li.product .price del{ color: var(--dh-ink-3); font-weight: 500; font-size: .8em; } .woocommerce span.onsale{ background: var(--dh-accent) !important; color: var(--dh-accent-ink) !important; border-radius: 999px !important; font-weight:800; min-height: 0; line-height: 1.6; padding: .2rem .6rem; } /* --- 장바구니 · 결제 ------------------------------------------------------ */ .woocommerce-cart .cart_totals, .woocommerce-checkout #order_review{ background: var(--dh-surface); border: 0; border-radius: var(--dh-r-lg); padding: 18px !important; } .woocommerce-cart .quantity .qty{ border: 1px solid var(--dh-line-2) !important; border-radius: 9px !important; min-height: var(--dh-tap); } /* 표가 페이지를 가로로 밀지 않게 자기 안에서 스크롤한다 */ .woocommerce-cart .shop_table, .woocommerce-orders-table{ display: block; overflow-x: auto; } /* --- 주문 상태 배지 ------------------------------------------------------- 키플이 추가한 한국형 상태. 색만 입히고 라벨은 그대로 둔다. */ .order-status, .woocommerce-orders-table__cell-order-status mark{ border-radius: 999px; padding: .22rem .6rem; font-weight:700; font-size: .86em; background: transparent; } .status-wc-pending, .order-status.pending { color: var(--dh-st-pending); } .status-wc-need-check,.order-status.need-check{ color: var(--dh-st-check); } .status-wc-paid, .order-status.paid { color: var(--dh-st-paid); } .status-wc-shipping, .order-status.shipping { color: var(--dh-st-shipping); } .status-wc-completed, .order-status.completed { color: var(--dh-st-done); } /* --- 모바일 -------------------------------------------------------------- */ @media (max-width: 640px){ /* 주소창 때문에 100vh 는 실제 화면보다 크다 */ .dh-fullscreen{ min-height: 100dvh; } /* 하단 고정 구매 바가 있으면 홈 인디케이터에 가리지 않게 */ .dh-buybar{ padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); } .woocommerce ul.products{ gap: .7rem; } .woocommerce-cart .checkout-button, .woocommerce-checkout #place_order{ width: 100%; } } @media (prefers-reduced-motion: reduce){ .woocommerce ul.products li.product, .woocommerce-cart .checkout-button, .woocommerce-checkout #place_order{ transition: none !important; } .woocommerce ul.products li.product:hover{ transform: none; } } /* --- 마이페이지 (WooCommerce 기본 템플릿을 정돈) ------------------------- 테마가 my-account 를 안 꾸며서 목록이 맨