/* 옛 프론트(duckhoo-front)와 사장님 Code Snippets 가 우리 뒤에 인라인 <style> 로 들어온다.
   그 중 `dh-cta-fix` 는 `html body.dh-shell-on.dh-shell-on` 처럼 클래스를 두 번 써서 특이도를 올리고
   !important 까지 붙인다. 같은 특이도면 뒤에 오는 쪽이 이기므로 우리는 클래스를 세 번 써
   (0,3,2) 로 한 단계 더 올린다 — `html body.dhr.dhr-wrap.dhr-wrap`.
   등록된 핸들(dh-shell · dh-shop-polish · dh-front)은 shell.php 가 아예 뺀다.
   테마 껍데기를 걷어내고 우리 것을 씌운다 (홈·회원탈퇴 제외 모든 화면).
   테마 규칙이 !important 라 여기도 그렇게 쓴다. 테마 파일은 건드리지 않는다. */

/* 테마의 사이드 헤더 · 푸터 · 탭바 · 빠른 메뉴 · 모바일 헤더 · 마이페이지 상단 */
html body.dhr.dhr-wrap.dhr-wrap #masthead.dh-side,
html body.dhr.dhr-wrap.dhr-wrap #colophon,
html body.dhr.dhr-wrap.dhr-wrap .dh-tabbar,
html body.dhr.dhr-wrap.dhr-wrap .dh-quick,
html body.dhr.dhr-wrap.dhr-wrap .dh-side-foot,
html body.dhr.dhr-wrap.dhr-wrap .wd-mobile-header-custom,
html body.dhr.dhr-wrap.dhr-wrap .wd-mobile-drawer,
html body.dhr.dhr-wrap.dhr-wrap .wd-mobile-drawer-backdrop,
html body.dhr.dhr-wrap.dhr-wrap .wd-custom-breadcrumb-bar,
html body.dhr.dhr-wrap.dhr-wrap .wd-custom-top-wrap,
html body.dhr.dhr-wrap.dhr-wrap .wd-custom-footer,
html body.dhr.dhr-wrap.dhr-wrap .dh-annbar,
html body.dhr.dhr-wrap.dhr-wrap .dh-topbar,
html body.dhr.dhr-wrap.dhr-wrap #wd-top-announce,
html body.dhr.dhr-wrap.dhr-wrap .wd-main-header,
html body.dhr.dhr-wrap.dhr-wrap #vf-sticky-trigger-bar{ display: none !important; }

/* 216px 사이드 헤더 + 본문 그리드를 푼다 */
html body.dhr.dhr-wrap.dhr-wrap{
  background: var(--dh-ground) !important; background-image: none !important; background-attachment: scroll !important;
  padding: 0 !important; margin: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap #page.dh-shell{
  display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important;
  grid-template-columns: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap #content.dh-content{ min-height: 40vh; }
html body.dhr.dhr-wrap.dhr-wrap .wd-custom-mypage-shell{ background: transparent !important; }

/* 본문 폭 — 우리 헤더와 같은 컨테이너 */
html body.dhr.dhr-wrap.dhr-wrap #content > *,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-page #content > .woocommerce{ max-width: 1200px; margin-left: auto; margin-right: auto; }
html body.dhr.dhr-wrap.dhr-wrap #content,
html body.dhr.dhr-wrap.dhr-wrap #content.dh-content{ padding: 1rem clamp(1.1rem,.6rem + 2vw,2.5rem) 2.5rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-breadcrumb{ font-size: 13px; color: var(--dh-ink-3); margin-bottom: .8rem; }
html body.dhr.dhr-wrap.dhr-wrap h1.page-title, html body.dhr.dhr-wrap.dhr-wrap h1.woocommerce-products-header__title{
  font-size: clamp(1.7rem,1.3rem + 1.6vw,2.3rem); font-weight:900; letter-spacing: 0; margin: .4rem 0 1rem;
}

/* 목록: 우리 카드 4열 */
html body.dhr.dhr-wrap.dhr-wrap ul.products{ display: grid !important; gap: .85rem !important; grid-template-columns: repeat(2,1fr) !important; margin: 0 0 1.5rem !important; padding: 0 !important; list-style: none; }
@media (min-width:640px){ html body.dhr.dhr-wrap.dhr-wrap ul.products{ grid-template-columns: repeat(3,1fr) !important; } }
@media (min-width:980px){ html body.dhr.dhr-wrap.dhr-wrap ul.products{ grid-template-columns: repeat(4,1fr) !important; } }
html body.dhr.dhr-wrap.dhr-wrap ul.products li.product{ width: auto !important; margin: 0 !important; float: none !important; padding: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; }
html body.dhr.dhr-wrap.dhr-wrap ul.products li.product:hover{ transform: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-result-count{ font-size: 14px; color: var(--dh-ink-3); font-weight: 500; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-ordering select{ min-height: 44px; border-radius: 999px; border: 1.5px solid var(--dh-line-2); padding: 0 2.2rem 0 1rem; font-size: 14px; font-weight:700; background: var(--dh-surface); }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-pagination ul.page-numbers{ display: flex; gap: .35rem; justify-content: center; list-style: none; padding: 0; margin: 1.5rem 0; border: 0 !important; flex-wrap: wrap; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-pagination li{ border: 0 !important; }
/* `ul.page-numbers` 자신도 클래스가 page-numbers 다. 아래 규칙을 목록에까지 주면
   페이지 번호 뒤로 흰 알약이 화면 폭만큼 길게 깔린다. 칸(li 안의 링크)에만 준다. */
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-pagination li > .page-numbers{ min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--dh-surface); border: 1px solid var(--dh-line); color: var(--dh-ink); font-weight:700; padding: 0 .6rem; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-pagination li > .page-numbers.current{ background: var(--dh-ink); border-color: var(--dh-ink); color: var(--dh-surface); }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-pagination ul.page-numbers{ background: none !important; border-radius: 0 !important; min-width: 0 !important; height: auto !important; padding: 0 !important; }

/* 폰 페이지 줄 「← 5 / 10 →」 — 번호 줄이 두 줄로 꺾여 나왔다 (2026-10-09). 600px 위는 번호 줄 */
html body.dhr.dhr-wrap.dhr-wrap .dhr-pg{ display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 1.5rem 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pg__b{ width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--dh-surface); border: 1px solid var(--dh-line); color: var(--dh-ink); text-decoration: none !important; transition: transform .16s cubic-bezier(.23,1,.32,1); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pg__b svg{ width: 18px; height: 18px; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pg__b--prev svg{ transform: rotate(180deg); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pg__b:active{ transform: scale(.97); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pg__b.is-off{ opacity: .35; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pg__n{ min-width: 5.5rem; text-align: center; font-size: 15px; font-weight: 600; color: var(--dh-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pg__n b{ color: var(--dh-ink); font-weight: 800; }
@media (max-width: 599px){ html body.dhr.dhr-wrap.dhr-wrap .woocommerce-pagination{ display: none !important; } }
@media (min-width: 600px){ html body.dhr.dhr-wrap.dhr-wrap .dhr-pg{ display: none; } }

/* 상세: 이미지 · 요약 두 칸, 그 위에 키플의 STEP 옵션은 그대로 */
html body.dhr.dhr-wrap.dhr-wrap .single-product div.product{ display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width:900px){ html body.dhr.dhr-wrap.dhr-wrap .single-product div.product{ grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: start; } }
html body.dhr.dhr-wrap.dhr-wrap .single-product div.product > *{ grid-column: 1 / -1; }
html body.dhr.dhr-wrap.dhr-wrap .single-product div.product .woocommerce-product-gallery{ grid-column: 1; width: 100% !important; float: none !important; margin: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .single-product div.product .summary{ grid-column: 1; width: 100% !important; float: none !important; margin: 0 !important; }
@media (min-width:900px){ html body.dhr.dhr-wrap.dhr-wrap .single-product div.product .summary{ grid-column: 2; grid-row: 1 / span 2; } }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-product-gallery__image img{ border-radius: 22px; background: var(--dh-surface); }
html body.dhr.dhr-wrap.dhr-wrap .single-product .product_title{ font-size: clamp(1.4rem,1.1rem + 1.2vw,1.9rem); font-weight:800; letter-spacing: 0; line-height: 1.2; }
html body.dhr.dhr-wrap.dhr-wrap .single-product .summary p.price{ font-size: 24px; font-weight:900; letter-spacing: 0; color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .single-product .summary p.price del{ font-size: 15px; color: var(--dh-ink-3); font-weight: 500; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-tabs ul.tabs{ display: flex; gap: .3rem; border-bottom: 1px solid var(--dh-line); padding: 0 !important; margin: 1.6rem 0 1.2rem !important; overflow-x: auto; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-tabs ul.tabs::before, html body.dhr.dhr-wrap.dhr-wrap .woocommerce-tabs ul.tabs li::before, html body.dhr.dhr-wrap.dhr-wrap .woocommerce-tabs ul.tabs li::after{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-tabs ul.tabs li{ background: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-tabs ul.tabs li a{ display: flex; align-items: center; min-height: 48px; padding: 0 .9rem !important; font-size: 15px; font-weight:700; color: var(--dh-ink-3); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-tabs ul.tabs li.active a{ color: var(--dh-ink); border-bottom-color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-tabs .panel{ font-size: 16px; line-height: 1.75; color: var(--dh-ink-2); }
html body.dhr.dhr-wrap.dhr-wrap .related.products > h2, html body.dhr.dhr-wrap.dhr-wrap .upsells.products > h2{ font-size: 22px; font-weight:800; letter-spacing: 0; margin: 2rem 0 .9rem; }

/* 장바구니 · 결제 · 계정 컨테이너 */
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-cart .woocommerce, html body.dhr.dhr-wrap.dhr-wrap .woocommerce-checkout .woocommerce, html body.dhr.dhr-wrap.dhr-wrap .woocommerce-account .woocommerce{ max-width: 1000px; margin: 0 auto; }
html body.dhr.dhr-wrap.dhr-wrap .entry-title, html body.dhr.dhr-wrap.dhr-wrap .page-title{ font-size: clamp(1.7rem,1.3rem + 1.6vw,2.3rem); font-weight:900; letter-spacing: 0; }

/* 아래 탭바가 본문을 가리지 않게 */
@media (max-width:879px){ html body.dhr.dhr-wrap.dhr-wrap{ padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; } }

/* 푸터 — 테마의 !important 규칙에 밀려 바탕이 흰색으로 풀렸다. 여기서 다시 못 박는다. */
html body.dhr.dhr-wrap.dhr-wrap footer.foot{ background: var(--dh-surface) !important; color: var(--dh-ink-2) !important; border-top: 1px solid var(--dh-line) !important; margin-top: 2.4rem !important; padding: 2.6rem 0 2rem !important; }
html body.dhr.dhr-wrap.dhr-wrap footer.foot .fcol b, html body.dhr.dhr-wrap.dhr-wrap footer.foot .lg-w, html body.dhr.dhr-wrap.dhr-wrap footer.foot .fkakao b, html body.dhr.dhr-wrap.dhr-wrap footer.foot .flegal b{ color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap footer.foot a, html body.dhr.dhr-wrap.dhr-wrap footer.foot p, html body.dhr.dhr-wrap.dhr-wrap footer.foot .fmuted, html body.dhr.dhr-wrap.dhr-wrap footer.foot .flegal{ color: var(--dh-ink-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap footer.foot .fkakao{ background: var(--dh-surface-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap footer.foot .fkakao span, html body.dhr.dhr-wrap.dhr-wrap footer.foot .fmuted{ color: var(--dh-ink-3) !important; }
html body.dhr.dhr-wrap.dhr-wrap footer.foot a.btn-p{ color: var(--dh-accent-ink) !important; } /* 파랑 알약 위 글자 — 위 a 규칙(ink-2)이 덮어 1.4:1 이었다 (2026-10-06 점검) */
html body.dhr.dhr-wrap.dhr-wrap footer.foot .lg-w .g{ background: var(--dh-ink) !important; }
/* 계좌 상자는 반전(잉크 면) — 테마가 p 색을 덮어 안내 글이 사라졌다. 굵은 글자와 같은 색으로 못 박는다 */
html body.dhr.dhr-wrap.dhr-wrap footer.foot .fbank, html body.dhr.dhr-wrap.dhr-wrap footer.foot .fbank p, html body.dhr.dhr-wrap.dhr-wrap footer.foot .fbank .n, html body.dhr.dhr-wrap.dhr-wrap footer.foot .fbank__note, html body.dhr.dhr-wrap.dhr-wrap footer.foot .fbank__note b, html body.dhr.dhr-wrap.dhr-wrap footer.foot .fbank__t b{ color: var(--dh-surface) !important; }
html body.dhr.dhr-wrap.dhr-wrap footer.foot .fbank__meta{ color: var(--dh-surface) !important; opacity: .8; font-weight: 600; }
/* 헤더도 같은 이유로 */
html body.dhr.dhr-wrap.dhr-wrap header.gnb{ background: var(--dh-glass) !important; }
html body.dhr.dhr-wrap.dhr-wrap nav.tabs{ background: var(--dh-glass) !important; }

/* 목록 제목·검색 결과 제목은 보인다 (테마가 숨겨 둔다) */
/* 테마는 목록 h1 을 1px 로 숨기고 .woocommerce-products-header 를 아예 안 찍는다 — 제목은 shell.php archive_title 이 루프 앞에 그린다 */
html body.dhr.dhr-wrap.dhr-wrap .dhr-arch{ display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 1rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-arch__t{ font-size: clamp(1.5rem,1.2rem + 1.4vw,2.1rem); font-weight:900; letter-spacing: 0; line-height: 1.2; margin: 0; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-arch__n{ font-size: 14px; font-weight: 600; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-arch__d{ flex-basis: 100%; font-size: 15px; line-height: 1.55; color: var(--dh-ink-2); word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-arch__d p{ margin: 0; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-notices-wrapper:empty{ display: none; }

/* ── 옛 프론트가 칠해 둔 파스텔 그라데이션 · 둥근 카드 페이지를 지운다 ──────────
   dh-shell 은 body 에 그라데이션을, #page 에 1240px 흰 카드(radius 30px · 그림자)를 줬고
   dh-cta-fix 스니펫이 그 위에 다시 그라데이션을 덮었다. 우리 화면은 불투명 한 겹이다. */
html body.dhr.dhr-wrap.dhr-wrap #page.dh-shell,
html body.dhr.dhr-wrap.dhr-wrap #content.dh-content,
html body.dhr.dhr-wrap.dhr-wrap .dh-main,
html body.dhr.dhr-wrap.dhr-wrap main#primary.site-main{
  background: transparent !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-container{ max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap main#primary.site-main{ max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }

/* ── 상품 상세 ─────────────────────────────────────────────────────────────
   사장님 스니펫(vf-ppom-drawer)이 구매 폼을 화면 전체를 덮는 바텀시트로 만들고,
   그것을 여는 버튼을 아래에 고정으로 띄운다. 우리 화면에는 아래 탭바가 이미 있어
   고정 바가 둘이 겹치고, 무엇보다 단품에서는 그 트리거가 안 떠서 살 방법이 없었다.
   그래서 서랍을 풀어 구매 상자를 오른쪽 칸 안에 그대로 눕힌다 — 데모와 같은 구조다.
   폼과 필드는 그대로다. 위치와 모양만 바꾼다. */
html body.dhr.dhr-wrap.dhr-wrap.woocommerce div.product form.cart,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce div.product form.cart{
  position: static !important; inset: auto !important; transform: none !important;
  width: auto !important; height: auto !important; max-height: none !important;
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  overflow: visible !important; z-index: auto !important; transition: none !important;
  margin: 1rem 0 0 !important; padding: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-overlay,
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-close,
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-header,
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-handle,
html body.dhr.dhr-wrap.dhr-wrap .vf-sticky-trigger-bar{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-body{ position: static !important; overflow: visible !important; max-height: none !important; height: auto !important; padding: 0 !important; }
html.vf-drawer-lock, body.vf-drawer-lock{ overflow: visible !important; height: auto !important; touch-action: auto !important; }

/* 두 칸을 같은 선에서 시작시킨다. 사진은 스크롤을 따라오고, 구매 상자는 흐름대로. */
html body.dhr.dhr-wrap.dhr-wrap.single-product div.product{
  display: grid !important; gap: 1rem !important; grid-template-columns: minmax(0,1fr) !important;
  align-items: start !important;
}
@media (min-width:900px){
  html body.dhr.dhr-wrap.dhr-wrap.single-product div.product{ grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr) !important; gap: 2rem !important; }
  /* 사진을 sticky 로 붙여 뒀더니 아래 행(상세설명 · 연관 상품)이 스크롤로 올라오면서
     사진 위에 겹쳤다. sticky 는 새 스택 컨텍스트를 만들어 뒤 형제가 위에 그려진다.
     이 화면에서 얻는 것보다 잃는 게 커서 걷어냈다. */
}
html body.dhr.dhr-wrap.dhr-wrap.single-product div.product > *{ grid-column: 1 / -1 !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product div.product > .woocommerce-product-gallery{ grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; float: none !important; margin: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product div.product > .summary{
  grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; float: none !important; margin: 0 !important;
  /* 테마가 구매 상자를 sticky 로 붙여 둔다. 아래 행(연관 상품 · 추천)이 같은 그리드 안에
     있어서, 스크롤하면 카드들이 구매 상자 밑으로 지나가며 겹친다. */
  position: static !important; top: auto !important;
}
@media (min-width:900px){
  html body.dhr.dhr-wrap.dhr-wrap.single-product div.product > .summary{ grid-column: 2 !important; grid-row: 1 !important; }
}

/* 사진 — 여백 없이 꽉 채운다 */
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary{
  background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 18px !important; padding: clamp(.9rem,.6rem + 1vw,1.3rem) !important;
}
/* 사진 카드는 안쪽 여백을 두지 않는다 — 사진이 카드에 꽉 찬다 */
html body.dhr.dhr-wrap.dhr-wrap.single-product .woocommerce-product-gallery{
  background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 18px !important; padding: 0 !important; overflow: hidden !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .woocommerce-product-gallery__wrapper{ margin: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .woocommerce-product-gallery__image{
  border-radius: 0 !important; overflow: hidden !important; background: var(--dh-surface-2) !important; margin: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .woocommerce-product-gallery__image > a,
html body.dhr.dhr-wrap.dhr-wrap.single-product .woocommerce-product-gallery__image img{ display: block !important; width: 100% !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .woocommerce-product-gallery__image img{ aspect-ratio: 1/1; object-fit: cover !important; height: auto !important; padding: 0 !important; background: none !important; }
/* 썸네일 줄 — 정사각형으로 꽉 차게, 회색 여백 없이 */
html body.dhr.dhr-wrap.dhr-wrap.single-product .flex-control-thumbs,
html body.dhr.dhr-wrap.dhr-wrap.single-product .woocommerce-product-gallery .thumbnails{
  display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: .5rem !important;
  margin: 0 !important; padding: .6rem !important; list-style: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .flex-control-thumbs li{ margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; list-style: none !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .flex-control-thumbs li img{
  width: 100% !important; height: auto !important; aspect-ratio: 1/1; object-fit: cover !important;
  border-radius: 10px !important; padding: 0 !important; background: var(--dh-surface-2) !important;
  border: 1.5px solid transparent !important; opacity: 1 !important; cursor: pointer;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .flex-control-thumbs li img.flex-active{ border-color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .woocommerce-product-gallery__trigger{ top: 1.2rem !important; right: 1.2rem !important; }

html body.dhr.dhr-wrap.dhr-wrap.single-product .woocommerce-tabs,
html body.dhr.dhr-wrap.dhr-wrap.single-product .wc-prl-recommendations,
html body.dhr.dhr-wrap.dhr-wrap.single-product .related.products{ background: transparent !important; }

/* 구성 선택(.dhx) — 옛 프론트의 민트·회색 톤을 우리 토큰으로 갈아끼운다.
   JS 와 DOM 은 건드리지 않는다. 값이 오가는 PPOM select 는 그대로다. */
html body.dhr.dhr-wrap.dhr-wrap .dhx{
  --dhx-ink: var(--dh-ink);
  --dhx-ink-2: var(--dh-ink-2);
  --dhx-ink-3: var(--dh-ink-3);   /* 원래 #94A3AE 는 흰 배경 2.59:1 로 AA 미달 */
  --dhx-line: var(--dh-line);
  --dhx-line-2: var(--dh-line-strong);
  --dhx-ground: var(--dh-surface-2);
  --dhx-brand: var(--dh-primary);
  --dhx-accent: var(--dh-accent-deep);
  --dhx-accent-soft: var(--dh-accent-soft, #E6F6FE);
  --dhx-bg: var(--dh-surface);     /* 카드 · 합계 상자 면 — 안 이으면 다크에서 흰 면 위 흰 글자 (2026-10-07) */
  --dhx-warn: var(--dh-accent-deep); /* 덜 고른 상태의 게이지 · 숫자 — 주황을 쓰지 않는다 */
  --dhx-r: 14px;
}
/* 11–13px 은 쓰지 않는다 — 캡션 최소 13px, 본문 15px */
html body.dhr.dhr-wrap.dhr-wrap .dhx-card__head{ font-size: 15px !important; padding: 15px 14px !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx-card__no{ width: 24px !important; height: 24px !important; flex-basis: 24px !important; font-size: 13px !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx-card__state{ font-size: 13px !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-row__name,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle__name,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-chip__pick{ font-size: 15px !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-row__price,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle__sub{ font-size: 13px !important; }
/* 구매 줄 — 서랍을 풀었으니 고정이 아니라 구매 상자 안에서 흐른다.
   모바일에서 화면 아래에 고정하면 우리 탭바와 겹친다. */
html body.dhr.dhr-wrap.dhr-wrap.single-product form.cart{ display: flex !important; flex-direction: column !important; align-items: stretch !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .vf-drawer-actions,
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-actions{
  position: static !important; inset: auto !important; width: 100% !important; flex: 1 1 100% !important;
  display: flex !important; gap: .5rem !important; margin: 1rem 0 0 !important;
  padding: 0 !important; background: transparent !important; backdrop-filter: none !important;
  border: 0 !important; box-shadow: none !important; z-index: auto !important; height: auto !important;
  /* 이 줄은 버튼과 높이가 똑같은데 overflow 가 hidden 이었다. 그래서 호버로 버튼이 1px
     떠오르는 순간 윗변이 잘려 "위가 가려진" 것처럼 보였다. 그림자도 같이 잘렸다. */
  overflow: visible !important;
}
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-actions button{
  flex: 1 1 0 !important; height: 52px !important; min-height: 52px !important; max-width: none !important;
  border-radius: 999px !important; font-size: 16px !important; font-weight:800 !important; letter-spacing: 0 !important;
}
/* 담기 — 흰 바탕에 검정 테두리 */
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-actions button.single_add_to_cart_button{
  background: var(--dh-surface) !important; color: var(--dh-ink) !important;
  border: 1.5px solid var(--dh-primary) !important;
}
/* 결제하기 — 사이트 전체와 같은 검정 알약 */
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-actions button.wd-direct-checkout-btn{
  background: var(--dh-primary) !important; color: var(--dh-primary-ink) !important; border: 0 !important;
}
/* 아직 맛을 안 고른 상태 — 회색이되 글자는 읽힌다 (AA) */
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-actions button[disabled],
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-actions button.is-disabled{
  background: var(--dh-surface-2) !important; color: var(--dh-ink-3) !important;
  border-color: var(--dh-line) !important; cursor: not-allowed !important;
}
/* 단품의 수량 조절도 같은 높이로 */
html body.dhr.dhr-wrap.dhr-wrap.single-product form.cart .quantity input.qty{
  min-height: 48px !important; width: 84px !important; text-align: center !important;
  font-size: 16px !important; border: 1.5px solid var(--dh-line-strong) !important; border-radius: 12px !important;
}

/* 상세 설명 — 상품 사진과 같은 흰 면 위에, 이미지는 가운데로 */
html body.dhr.dhr-wrap.dhr-wrap.single-product .woocommerce-tabs .panel{
  background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 16px !important; padding: clamp(.9rem,.6rem + 1vw,1.6rem) !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product #tab-description img{ display: block !important; margin-left: auto !important; margin-right: auto !important; height: auto !important; }

/* 상세에 남아 있던 옛 색 — 핑크 뱃지 · 파란 밑줄 가격 · 민트 안내를 우리 것으로.
   글자 크기 바닥(캡션 13px)도 여기서 지킨다. */
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-viewer-count{
  background: var(--dh-surface-2) !important; color: var(--dh-ink-2) !important;
  font-size: 13px !important; border-radius: 999px !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-viewer-count strong{ color: var(--dh-accent-deep) !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .product_title{ color: var(--dh-ink) !important; }

/* 가격 — 파랑·밑줄을 걷고, 실제 숫자를 크게 (묶음 상품은 병당 가격이 비교 지표다) */
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary p.price,
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary p.price bdi,
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary p.price .amount{ color: var(--dh-ink) !important; text-decoration: none !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary p.price ins{ text-decoration: none !important; font-weight:900 !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary p.price ins .amount,
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary p.price ins bdi{ font-size: 26px !important; font-weight:900 !important; letter-spacing: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary p.price del,
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary p.price del .amount,
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary p.price del bdi{ color: var(--dh-ink-3) !important; font-size: 15px !important; font-weight: 500 !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-ppom-required-mark,
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-bundle-required-mark{ color: var(--dh-status-check, #B42318) !important; }

/* 배송·혜택 안내의 민트 톤과 12.5px 캡션 */
html body.dhr.dhr-wrap.dhr-wrap .dhx{ color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-ship .t,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-ship span.t,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-gauge__row .t{ color: var(--dh-accent-deep) !important; font-size: 13px !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-sum__label,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-gauge__n{ font-size: 13px !important; }

/* 병당 가격 — 묶음 상품에서 고객이 실제로 비교하는 숫자다. 민트 알약이던 것을
   총액과 나란히 읽히는 크기로 올린다 (총액 26px, 병당 20px). */
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary .dh-unit{
  background: var(--dh-accent-soft) !important; color: var(--dh-ink) !important;
  font-size: 20px !important; font-weight:900 !important; letter-spacing: 0 !important;
  border-radius: 999px !important; padding: .3rem .8rem !important; display: inline-flex !important;
  align-items: baseline !important; gap: .35rem !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary .dh-unit i{
  color: var(--dh-accent-deep) !important; font-style: normal !important;
  font-size: 14px !important; font-weight:700 !important;
}

/* 남은 12–12.5px 캡션을 13px 바닥으로 */
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-lock,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-picked__empty,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-desc{ font-size: 13px !important; }
/* 옛 프론트가 화면 밖에 세워 둔 원본 필드. 플러그인이 스스로 1px 로 접어 두려 하는데
   다른 규칙에 밀려 1200px 로 벌어져 있다 — 문서 폭이 뷰포트보다 넓어지는 원인이다.
   플러그인이 쓰려던 값 그대로 되돌린다. 값과 name 은 건드리지 않는다. */
html body.dhr.dhr-wrap.dhr-wrap .dhx-src{
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}

/* 수량 ± 는 구매 흐름의 터치 타깃이다 — 모바일에서 44px. 데스크톱은 원래대로 촘촘히. */
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty button{ height: 44px !important; min-height: 44px !important; }
@media (min-width:900px){
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty button{ height: 36px !important; min-height: 36px !important; }
}

/* ── 장바구니 (keyple .wd-cpg) ─────────────────────────────────────────────
   주문하기가 배경 없는 글자로 나와 버튼으로 보이지 않았다. 사이트 공통 검정 알약으로. */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-order__btn{
  background: var(--dh-primary) !important; color: var(--dh-primary-ink) !important;
  border: 0 !important; border-radius: 999px !important;
  min-height: 52px !important; width: 100% !important; max-width: 420px !important;
  font-size: 17px !important; font-weight:800 !important; letter-spacing: 0 !important; cursor: pointer;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-order__continue{
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-height: 44px !important; padding: 0 1.1rem !important; border-radius: 999px !important;
  border: 1.5px solid var(--dh-line-strong) !important; color: var(--dh-ink-2) !important;
  font-size: 15px !important; font-weight:700 !important; text-decoration: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-qty__btn,
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-bulk__btn{
  min-height: 44px !important; padding: 0 .9rem !important; font-size: 13px !important; font-weight:700 !important;
  border: 1.5px solid var(--dh-line) !important; border-radius: 999px !important;
  background: var(--dh-surface) !important; color: var(--dh-ink) !important;
}
/* 자동할인 안내 — 분홍 상자를 우리 강조면으로 */
html body.dhr.dhr-wrap.dhr-wrap #coupon-auto-notice{
  background: var(--dh-accent-soft) !important; border: 1px solid var(--dh-accent-soft) !important;
  border-radius: 14px !important;
}

/* ── 주문서 ────────────────────────────────────────────────────────────────
   결제하기가 파란 채움 + 검은 글자였다. 우리 검정 알약으로 바꾼다. */
html body.dhr.dhr-wrap.dhr-wrap #place_order,
html body.dhr.dhr-wrap.dhr-wrap #place_order.button.alt{
  background: var(--dh-primary) !important; color: var(--dh-primary-ink) !important;
  border: 0 !important; border-radius: 999px !important; min-height: 56px !important;
  font-size: 19px !important; font-weight:800 !important; letter-spacing: 0 !important;
}
/* 쿠폰·적립금 적용 버튼 — 회색 위 회색 글자(3.9:1)를 걷는다 */
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-checkout button.button,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-checkout #wc_gc_cart_redeem_send,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-checkout .wd-point-dummy-btn{
  background: var(--dh-surface) !important; color: var(--dh-ink) !important;
  border: 1.5px solid var(--dh-primary) !important; border-radius: 999px !important;
  min-height: 44px !important; font-size: 15px !important; font-weight:700 !important;
}

/* 주문서에 테마가 페이지 슬러그("checkout")를 h1 으로 한 번 더 찍는다.
   바로 아래 "결제하기" 가 진짜 제목이라 영문 슬러그만 남는다. 장바구니도 같다. */
html body.dhr.dhr-wrap.dhr-wrap.woocommerce-checkout .wd-page__header,
html body.dhr.dhr-wrap.dhr-wrap.woocommerce-cart .wd-page__header{ display: none !important; }

/* 무통장입금 안내 — 입금자명이 주문자명과 다르면 자동확인이 안 되고 사람이 손대야 한다.
   그래서 이 안내는 눈에 띄어야 한다. 다만 인라인으로 박힌 #ff1f79 는 흰 배경 3.6:1 로
   AA 미달이라, 색으로만 소리치는 대신 카드로 세우고 글자는 읽히는 색으로 바꾼다. */
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-bacs-notice{
  background: var(--dh-surface-2) !important;
  border-left: 0 !important;
  border-radius: 16px !important; padding: .9rem 1rem !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-bacs-notice p{ color: var(--dh-ink-2) !important; font-size: 15px !important; line-height: 1.6 !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-bacs-notice p:first-child{ color: var(--dh-status-check, #B42318) !important; font-weight:800 !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-guide-box{
  background: var(--dh-surface-2) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 12px !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-guide-box p{ color: var(--dh-ink-2) !important; font-size: 15px !important; }

/* 장바구니·주문서에 남은 작은 조작들 — 지우기(🗑 · ×) · 바로구매 · 수정.
   지우는 버튼이 16px 이면 옆의 수량 버튼을 누르기 쉽다. */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-info__remove,
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__remove,
html body.dhr.dhr-wrap.dhr-wrap .wd-orderer-edit-btn{
  min-width: 44px !important; min-height: 44px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 15px !important; color: var(--dh-ink-2) !important;
  background: transparent !important; border: 0 !important; cursor: pointer;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-subtotal__btn{
  min-height: 44px !important; padding: 0 .9rem !important; font-size: 13px !important; font-weight:700 !important;
  border: 1.5px solid var(--dh-line) !important; border-radius: 999px !important;
  background: var(--dh-surface) !important; color: var(--dh-ink) !important;
}

/* 장바구니의 마지막 손질 — 분홍 그라데이션 알림 하나가 더 있고(인라인 style),
   수량 ± 가 28px, 캡션 몇 개가 12px 다. */
html body.dhr.dhr-wrap.dhr-wrap #coupon-applied-notice{
  background: var(--dh-accent-soft) !important; background-image: none !important;
  border: 1px solid var(--dh-accent-soft) !important; border-radius: 14px !important;
}
html body.dhr.dhr-wrap.dhr-wrap #coupon-applied-notice div{ font-size: 13px !important; color: var(--dh-ink-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap #coupon-applied-notice div:first-child{ color: var(--dh-accent-deep) !important; font-weight:800 !important; }

html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-shipping__sub,
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-wishlist__more{ font-size: 13px !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-wishlist__more{ min-height: 44px !important; display: inline-flex !important; align-items: center !important; padding: 0 .9rem !important; }

/* ── 안내 문서(이용약관 · 개인정보처리방침 · 배송/교환/환불) ──────────────────
   긴 글은 읽는 폭과 리듬이 전부다. 한 줄 65자 언저리, 제목 앞에 숨 쉴 자리. */
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account):not(.woocommerce-cart):not(.woocommerce-checkout) .wd-page__content,
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account):not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content{
  background: var(--dh-surface); border: 1px solid var(--dh-line);
  border-radius: 16px; padding: clamp(1.1rem,.8rem + 1.4vw,2.2rem);
  font-size: 16px; line-height: 1.75; color: var(--dh-ink-2);
}
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .entry-content > *{ max-width: 68ch; }
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .entry-content h2{
  margin: 2.2rem 0 .7rem; font-size: 20px; font-weight:800; letter-spacing: 0;
  color: var(--dh-ink); line-height: 1.35; word-break: keep-all;
}
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .entry-content h2:first-child{ margin-top: 0; }
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .entry-content h3{ margin: 1.5rem 0 .5rem; font-size: 17px; font-weight:800; color: var(--dh-ink); word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .entry-content p{ margin: 0 0 1rem; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .entry-content ul{ margin: 0 0 1.2rem; padding-left: 1.15rem; }
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .entry-content li{ margin-bottom: .45rem; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .entry-content strong{ color: var(--dh-ink); font-weight:700; }

/* 껍데기를 쓰는 화면에서도 같다 — 관리 바 아래로 헤더가 끼어 들어가지 않게. */
@media (min-width:601px){ html body.dhr.dhr-wrap.dhr-wrap.admin-bar header.gnb{ top: 46px !important; } }
@media (min-width:783px){ html body.dhr.dhr-wrap.dhr-wrap.admin-bar header.gnb{ top: 32px !important; } }

/* ── 로그인 · 회원가입 · 내 계정 ────────────────────────────────────────────
   폼 필드의 name·id 는 그대로 둔다. 보이는 것만 바꾼다. */

/* 로그인은 한 줄로 읽히는 좁은 카드가 낫다 */
html body.dhr.dhr-wrap.dhr-wrap.woocommerce-account:not(.logged-in) .woocommerce{ max-width: 460px; margin-left: auto; margin-right: auto; }
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login,
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-register,
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-ResetPassword{
  background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 16px !important; padding: clamp(1.2rem,.9rem + 1.2vw,1.8rem) !important; margin: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-account h2{
  font-size: 22px; font-weight:900; letter-spacing: 0; margin: 0 0 1rem;
  text-decoration: none !important; border: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login label,
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-register label{
  display: block; font-size: 14px; font-weight:700; color: var(--dh-ink-2); margin-bottom: .35rem;
}
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login input.input-text,
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-register input.input-text,
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-ResetPassword input.input-text{
  width: 100% !important; min-height: 48px !important; font-size: 16px !important;
  border: 1.5px solid var(--dh-line-strong) !important; border-radius: 12px !important;
  padding: 0 .9rem !important; background: var(--dh-surface) !important; color: var(--dh-ink) !important;
}
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login .woocommerce-form-login__submit,
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-register .woocommerce-form-register__submit,
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-ResetPassword button.button{
  width: 100% !important; min-height: 48px !important; margin: .2rem 0 0 !important;
  background: var(--dh-primary) !important; color: var(--dh-primary-ink) !important;
  border: 0 !important; border-radius: 999px !important;
  font-size: 16px !important; font-weight:800 !important; letter-spacing: 0 !important; float: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login .woocommerce-form-login__rememberme{ display: flex; align-items: center; gap: .45rem; margin: .9rem 0 0; font-size: 15px; }
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login .lost_password{ margin: .9rem 0 0; font-size: 15px; }
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login .lost_password a{ color: var(--dh-accent-deep); text-decoration: none; }

/* ── 계정 · 회원가입 머리판 ────────────────────────────────────────────────
   테마는 페이지마다 왼쪽 위에 낱말 하나짜리 제목(`.wd-page__title`)을 찍는다.
   마이페이지에서 그것이 "내 계정" 으로 떠 있었다. 지우는 대신 제목이 설 자리를
   만든다 — 어두운 머리판 하나가 로그인 · 가입 3단계 · 마이페이지를 묶는다.

   유리(반투명 + 블러)는 여기서만 쓴다. 머리판 위 알약 · 단계 표시처럼
   **뒤 배경을 우리가 정한 곳**에만 얹고, 글을 읽는 면(폼 카드 · 상품 목록)은
   여전히 불투명이다. 카드가 수십 장 깔리는 화면에 블러를 넣으면 스크롤이 끊긴다. */
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah{
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 0 1.4rem; padding: clamp(1.3rem,1rem + 1.6vw,2rem) clamp(1.1rem,.8rem + 1.6vw,1.9rem);
  border-radius: 22px; background: var(--dh-ink); color: var(--dh-surface);
  box-shadow: 0 1px 2px rgba(16,24,32,.16), 0 18px 40px -22px rgba(16,24,32,.45);
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__bg{
  position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 60% at 10% 8%,  rgba(56,189,248,.40) 0%, rgba(56,189,248,0) 62%),
    radial-gradient(44% 58% at 92% 4%,  rgba(26,92,255,.30)  0%, rgba(26,92,255,0)  60%),
    radial-gradient(52% 62% at 62% 104%, rgba(26,92,255,.38) 0%, rgba(26,92,255,0) 64%);
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__in{ display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__txt{ flex: 1 1 240px; min-width: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__eb{
  margin: 0 0 .35rem; font-size: 13.5px; font-weight: 600; letter-spacing: .02em !important; color: var(--dh-accent-soft);
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__t{
  margin: 0; padding: 0; border: 0; font-size: clamp(26px,22px + 1.6vw,34px); font-weight:900;
  line-height: 1.15; letter-spacing: 0; color: var(--dh-surface); word-break: keep-all;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__t::before,
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__t::after{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__s{
  margin: .5rem 0 0; font-size: 15px; line-height: 1.6; color: #D6DEE6; word-break: keep-all; max-width: 46ch;
}
/* 유리 알약 — 뒤가 우리 머리판이라 대비를 계산할 수 있다 (흰 글자 12:1 위) */
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__chips{
  display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__chips li{
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 .8rem; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  font-size: 13.5px; font-weight:700; color: var(--dh-surface); white-space: nowrap;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__av{
  flex: 0 0 54px; width: 54px; height: 54px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 23px; font-weight:900; color: var(--dh-ink);
  background: var(--dh-surface); box-shadow: 0 6px 18px -8px rgba(0,0,0,.7);
}
/* 단계 — 몇 장 중 몇 번째인지 보이지 않으면 가입이 끝나는지 알 수 없다 */
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__steps{
  display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1.1rem 0 0; padding: 0;
  counter-reset: none;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__steps li{
  display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: 0 .85rem 0 .5rem;
  border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 13.5px; font-weight:700; color: #C4CCD4; white-space: nowrap;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__steps li.is-done{ color: var(--dh-accent-soft); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__steps li.is-now{
  background: var(--dh-surface); border-color: var(--dh-surface); color: var(--dh-ink);
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__no{
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); font-size: 12.5px; font-weight:800; color: var(--dh-surface);
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__steps li.is-now .dhr-ah__no{ background: var(--dh-ink); color: var(--dh-surface); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__steps li.is-done .dhr-ah__no{ background: rgba(169,217,245,.24); color: var(--dh-accent-soft); }
@media (min-width: 760px){
  html body.dhr.dhr-wrap.dhr-wrap .dhr-ah{ margin-bottom: 1.8rem; }
  html body.dhr.dhr-wrap.dhr-wrap .dhr-ah__chips{ margin-left: auto; }
}

/* 테마 페이지 제목은 머리판이 대신한다. 마크업은 그대로 두고 화면에서만 뺀다.
   `:has()` 로 **머리판이 실제로 그려진 화면에서만** 뺀다 — 그러지 않으면 어떤 이유로
   머리판이 안 나왔을 때 제목이 하나도 없는 화면이 된다. */
html body.dhr.dhr-wrap.dhr-wrap.dhr-auth .wd-page__article:has(.dhr-ah) .wd-page__header{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap.dhr-auth{ background: var(--dh-bg) !important; }
html body.dhr.dhr-wrap.dhr-wrap.dhr-auth .wd-page__content > .woocommerce > h2{
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 로그인 ──────────────────────────────────────────────────────────────
   현관이다. 좁은 한 칸으로 모으고, 폼은 머리판 아래 흰 카드로 얹는다. */
html body.dhr.dhr-wrap.dhr-wrap.dhr-auth.woocommerce-account:not(.logged-in) .wd-page__content > .woocommerce{
  max-width: 560px; margin-inline: auto;
}
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login{
  margin: 0 !important; padding: clamp(1.2rem,.9rem + 1.2vw,1.7rem) !important;
  background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(16,24,32,.05), 0 16px 34px -24px rgba(16,24,32,.30);
}
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login .form-row{ margin: 0 0 .9rem !important; padding: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login label{
  display: block; margin-bottom: .35rem; font-size: 14px; font-weight:700; color: var(--dh-ink);
}
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login input.input-text,
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login input[type="password"]{
  width: 100% !important; min-height: 52px !important; font-size: 16px !important;
  border: 1px solid var(--dh-line-2) !important; border-radius: 12px !important;
  padding: 0 13px !important; background: var(--dh-surface) !important;
}
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login .woocommerce-form-login__rememberme{
  display: flex !important; align-items: center; gap: .5rem; margin: 0 0 1rem !important; font-weight: 600;
}
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login .woocommerce-form-login__rememberme span{ font-size: 14.5px; color: var(--dh-ink-2); }
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login button[type="submit"]{
  width: 100% !important; min-height: 52px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--dh-primary) !important; color: var(--dh-surface) !important;
  font-size: 16px !important; font-weight:800 !important; letter-spacing: 0 !important;
  text-decoration: none !important; cursor: pointer;
}
html body.dhr.dhr-wrap.dhr-wrap form.woocommerce-form-login .lost_password{ margin: .9rem 0 0 !important; text-align: center; }

/* 회원가입으로 가는 길이 이 화면에 아예 없었다 */
html body.dhr.dhr-wrap.dhr-wrap .dhr-join{
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
  margin: 1rem 0 0; padding: 1.1rem 1.2rem; border-radius: 18px;
  background: var(--dh-surface); border: 1px solid var(--dh-line);
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-join__txt{ flex: 1 1 220px; min-width: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-join__txt b{ display: block; font-size: 16px; font-weight:800; color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-join__txt span{ display: block; margin-top: .25rem; font-size: 14px; line-height: 1.6; color: var(--dh-ink-3); word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-join__go{
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.3rem; border-radius: 999px;
  border: 1.5px solid var(--dh-primary); background: var(--dh-surface);
  color: var(--dh-ink) !important; font-size: 15px; font-weight:800; text-decoration: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-join__go:hover{ background: var(--dh-primary); color: var(--dh-surface) !important; }
@media (max-width: 559px){ html body.dhr.dhr-wrap.dhr-wrap .dhr-join__go{ flex: 1 1 100%; } }

/* ── 가입 3단계 — 키플이 만든 페이지 세 장 ────────────────────────────────
   세 장 모두 자기 헤더 · 카테고리 줄 · 푸터를 따로 그린다. 링크는 프로덕션을
   가리키고 분류 이름도 옛것이다. 우리 껍데기만 남기고 걷어낸다.
   폼 · 필드 이름 · 본인확인 버튼에는 손대지 않는다. */
html body.dhr.dhr-wrap.dhr-wrap .wd-register-mobile-header,
html body.dhr.dhr-wrap.dhr-wrap .wd-register-mobile-drawer,
html body.dhr.dhr-wrap.dhr-wrap .wd-register-mobile-drawer-backdrop,
html body.dhr.dhr-wrap.dhr-wrap .wd-register-breadcrumb,
html body.dhr.dhr-wrap.dhr-wrap .wd-register-top-wrap,
html body.dhr.dhr-wrap.dhr-wrap .wd-register-cats-wrap,
html body.dhr.dhr-wrap.dhr-wrap .wd-register-footer,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-mobile-header,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-mobile-drawer,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-mobile-drawer-backdrop,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-breadcrumb,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-top-wrap,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-cats-wrap,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-footer,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-mobile-header,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-mobile-drawer,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-mobile-drawer-backdrop,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-breadcrumb,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-top-wrap,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-cats-wrap,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-footer{ display: none !important; }

html body.dhr.dhr-wrap.dhr-wrap .wd-register-shell,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-shell,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-shell{ background: transparent !important; font-family: inherit !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-register-main,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-main,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-main{ max-width: 640px !important; margin: 0 auto !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-register-body,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-body,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-body{ max-width: none !important; margin: 0 !important; }

/* 폼은 흰 카드 한 장 */
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-box,
html body.dhr.dhr-wrap.dhr-wrap form.wd-join-form{
  background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 20px !important; padding: clamp(1.2rem,.9rem + 1.2vw,1.7rem) !important;
  box-shadow: 0 1px 2px rgba(16,24,32,.05), 0 16px 34px -24px rgba(16,24,32,.30);
}
/* 1단계는 버튼 하나뿐이다. 흰 상자 안에 검은 알약 하나만 든 모양은 비어 보였다 —
   상자를 걷고 머리판 바로 아래에 버튼만 세운다. */
html body.dhr.dhr-wrap.dhr-wrap .wd-register-actions{
  display: grid !important; gap: .6rem !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 1rem 0 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap a.wd-register-btn{
  position: relative; display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 60px !important; padding: 0 3.4rem !important; border-radius: 999px !important;
  text-decoration: none !important; font-size: 17px !important; font-weight:800 !important; letter-spacing: 0 !important;
  background: var(--dh-primary) !important; color: var(--dh-surface) !important; border: 0 !important; margin: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(16,24,32,.18), 0 14px 30px -18px rgba(16,24,32,.65);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
/* 오른쪽 화살표 — 글자가 아니라 그림이라 읽어 주는 말에는 섞이지 않는다 */
html body.dhr.dhr-wrap.dhr-wrap a.wd-register-btn::after{
  content: ""; position: absolute; right: .8rem; top: 50%; margin-top: -17px;
  width: 34px; height: 34px; border-radius: 999px; background-color: rgba(255,255,255,.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
html body.dhr.dhr-wrap.dhr-wrap a.wd-register-btn:hover{
  background: #000 !important; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(16,24,32,.18), 0 18px 36px -18px rgba(16,24,32,.75);
}
html body.dhr.dhr-wrap.dhr-wrap a.wd-register-btn:hover::after{ transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){
  html body.dhr.dhr-wrap.dhr-wrap a.wd-register-btn,
  html body.dhr.dhr-wrap.dhr-wrap a.wd-register-btn::after{ transition: none; }
}

/* 약관 동의 */
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-check-row,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-box-label,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-subcheck,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-age{
  font-size: 15.5px !important; line-height: 1.55 !important; color: var(--dh-ink) !important;
  gap: .65rem !important; align-items: center !important; word-break: keep-all;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-check-row{
  margin: 0 0 1rem !important; padding: 0 0 1rem !important;
  border-bottom: 1px solid var(--dh-line); font-weight:800 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-shell input[type="checkbox"]{
  width: 22px !important; height: 22px !important; flex: 0 0 22px !important; margin: 0 !important;
  accent-color: var(--dh-primary); cursor: pointer;
}
/* 필수 표시가 형광 분홍(#ff5c73)이었다 */
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-required{
  color: var(--dh-accent-deep) !important; font-size: 13.5px !important; font-weight:700 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-box-item{ margin-bottom: 1.4rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-scrollbox,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-marketing-box{
  background: var(--dh-surface-2) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 12px !important; padding: .9rem 1rem !important;
  font-size: 14px !important; line-height: 1.75 !important; color: var(--dh-ink-2) !important;
  height: 168px !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-marketing-title{ font-size: 15.5px !important; color: var(--dh-ink) !important; font-weight:700 !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-actions{
  display: flex !important; gap: .6rem !important; margin-top: 1.4rem !important; justify-content: stretch !important;
}
html body.dhr.dhr-wrap.dhr-wrap button.wd-agree-submit{
  flex: 1 1 auto !important; order: 2; min-height: 52px !important; height: auto !important; padding: 0 1.2rem !important;
  border: 0 !important; border-radius: 999px !important;
  background: var(--dh-primary) !important; color: var(--dh-surface) !important;
  font-size: 16px !important; font-weight:800 !important; cursor: pointer;
}
html body.dhr.dhr-wrap.dhr-wrap a.wd-agree-cancel{
  order: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.2rem; border-radius: 999px;
  border: 1.5px solid var(--dh-line-2) !important; background: var(--dh-surface) !important;
  color: var(--dh-ink-2) !important; font-size: 15px !important; font-weight:700 !important; text-decoration: none !important;
}

/* 정보 입력 */
html body.dhr.dhr-wrap.dhr-wrap .wd-join-field{ margin: 0 0 1.4rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-join-field:last-of-type{ margin-bottom: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-join-label{
  display: block !important; margin: 0 0 .45rem !important;
  font-size: 14px !important; font-weight:800 !important; color: var(--dh-ink) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-join-required{ color: var(--dh-accent-deep) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-join-stack{ display: grid !important; gap: .5rem !important; }
html body.dhr.dhr-wrap.dhr-wrap input.wd-join-input,
html body.dhr.dhr-wrap.dhr-wrap select.wd-join-select{
  width: 100% !important; min-height: 52px !important; height: 52px !important;
  padding: 0 13px !important; font-size: 16px !important; color: var(--dh-ink) !important;
  background: var(--dh-surface) !important; border: 1px solid var(--dh-line-2) !important; border-radius: 12px !important;
  box-shadow: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap input.wd-join-input:focus,
html body.dhr.dhr-wrap.dhr-wrap select.wd-join-select:focus{
  border-color: var(--dh-accent-deep) !important;
  box-shadow: 0 0 0 3px var(--dh-accent-soft) !important; outline: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap input.wd-join-input--locked,
html body.dhr.dhr-wrap.dhr-wrap select.wd-join-select[disabled]{
  background: var(--dh-surface-2) !important; color: var(--dh-ink-3) !important;
  border-style: dashed !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-join-help{
  margin-top: .4rem !important; font-size: 13px !important; line-height: 1.55 !important;
  color: var(--dh-ink-3) !important; word-break: keep-all;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-join-name-row{ display: block !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-join-radio-group{ display: flex !important; gap: .5rem !important; }
html body.dhr.dhr-wrap.dhr-wrap label.wd-join-radio{
  flex: 1 1 0; display: flex !important; align-items: center; justify-content: flex-start; gap: .6rem;
  min-height: 52px; padding: 0 .8rem; border-radius: 12px;
  border: 1px solid var(--dh-line-2); background: var(--dh-surface);
  font-size: 15.5px !important; font-weight:700; color: var(--dh-ink) !important; cursor: pointer;
}
html body.dhr.dhr-wrap.dhr-wrap label.wd-join-radio input[type="radio"]{
  width: 20px !important; height: 20px !important; accent-color: var(--dh-primary);
}
html body.dhr.dhr-wrap.dhr-wrap .wd-join-address-top{ grid-template-columns: minmax(0,1fr) auto !important; gap: .5rem !important; margin-bottom: .5rem !important; }
html body.dhr.dhr-wrap.dhr-wrap button.wd-join-address-btn{
  height: 52px !important; padding: 0 1.1rem !important; border-radius: 12px !important;
  border: 1.5px solid var(--dh-primary) !important; background: var(--dh-surface) !important;
  color: var(--dh-ink) !important; font-size: 15px !important; font-weight:800 !important; cursor: pointer;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-join-birthday{ grid-template-columns: 1.2fr .9fr .9fr !important; gap: .5rem !important; }
html body.dhr.dhr-wrap.dhr-wrap select.wd-join-select{
  -webkit-appearance: none !important; appearance: none !important; padding-right: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23616870' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 13px center !important;
}
/* 본인확인 — 이 줄이 가입의 첫 관문이다. 다른 필드보다 눈에 띄어야 한다.
   위쪽에 같은 버튼이 한 번 더 있었다 (폼 밖). 폼 안의 것 하나만 남긴다 —
   단계를 건너뛰는 것이 아니라 같은 버튼이 두 개였다. */
html body.dhr.dhr-wrap.dhr-wrap .wd-join-dream-auth{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-join-form > .wd-join-field:first-of-type{
  padding: 1rem 1.1rem !important; margin: 0 0 1.4rem !important;
  border-radius: 16px !important; background: var(--dh-accent-soft) !important;
  border: 1px solid var(--dh-accent-soft) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-join-dsma-wrap{ margin: .1rem 0 .5rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-join-form button.dsma-auth-button{
  display: inline-flex !important; align-items: center; gap: .5rem;
  min-height: 48px !important; padding: 0 1.2rem !important; border-radius: 999px !important;
  border: 0 !important; background: var(--dh-primary) !important; color: var(--dh-surface) !important;
  font-size: 15.5px !important; font-weight:800 !important; cursor: pointer;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-join-verify-status{
  display: block !important; font-size: 13.5px !important; line-height: 1.55 !important;
  font-weight:700 !important; word-break: keep-all;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-join-verify-status--pending{ color: var(--dh-st-check, #B42318) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-join-submit-wrap{ margin-top: 1.6rem !important; }
html body.dhr.dhr-wrap.dhr-wrap button.wd-join-submit{
  width: 100% !important; min-height: 54px !important; height: auto !important;
  border: 0 !important; border-radius: 999px !important;
  background: var(--dh-primary) !important; color: var(--dh-surface) !important;
  font-size: 17px !important; font-weight:800 !important; letter-spacing: 0 !important; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,32,.16), 0 12px 26px -16px rgba(16,24,32,.5);
}
html body.dhr.dhr-wrap.dhr-wrap button.wd-join-submit:hover,
html body.dhr.dhr-wrap.dhr-wrap button.wd-agree-submit:hover,
html body.dhr.dhr-wrap.dhr-wrap a.wd-register-btn:hover{
  background: #000 !important; filter: none !important; box-shadow: 0 1px 2px rgba(16,24,32,.16), 0 14px 30px -16px rgba(16,24,32,.55) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-join-password-match,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-email-validate{ font-size: 13.5px !important; }

/* 가입 세 화면은 페이지 본문이 아니라 템플릿이 통째로 그린다. 머리판은 우리 헤더
   바로 뒤에 붙고, 본문 폭은 이 상자가 준다. 영문 제목(Sign In · Terms & Policy)은
   머리판이 대신하므로 뺀다. */
html body.dhr.dhr-wrap.dhr-wrap .dhr-authtop{ padding-top: clamp(1rem,.7rem + 1.2vw,1.6rem); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-authtop > .wrap{ max-width: 640px; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-authtop .dhr-ah{ margin-bottom: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-authtop--end{ padding: 0 0 2.4rem; }
/* 로그인으로 돌아가는 줄이 카드에서 한참 떨어져 있었다. 테마가 본문 칸에 380px 최소
   높이를 줘서 짧은 화면이 억지로 늘어난 탓이다. 가입 화면에서는 풀어 준다. */
html body.dhr.dhr-wrap.dhr-wrap.dhr-signup #content{ min-height: 0 !important; padding-bottom: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap.dhr-signup .dhr-back{ margin-top: 1.1rem; }
html body.dhr.dhr-wrap.dhr-wrap .wd-join-title,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-title{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-register-main,
html body.dhr.dhr-wrap.dhr-wrap .wd-agree-main,
html body.dhr.dhr-wrap.dhr-wrap .wd-join-main{
  padding: 1.1rem clamp(1.1rem,.6rem + 2vw,2.5rem) .4rem !important;
}

/* 가입 화면 아래 로그인으로 돌아가는 길 */
html body.dhr.dhr-wrap.dhr-wrap .dhr-back{
  margin: 1rem 0 0; text-align: center; font-size: 14.5px; color: var(--dh-ink-3);
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-back a{
  color: var(--dh-ink); font-weight:800; text-decoration: underline; text-underline-offset: 3px;
}

/* 내 계정 — 인사말과 내용에 숨 쉴 자리 */
html body.dhr.dhr-wrap.dhr-wrap.woocommerce-account.logged-in .woocommerce-MyAccount-content{
  background: var(--dh-surface); border: 1px solid var(--dh-line);
  border-radius: 16px; padding: clamp(1.1rem,.8rem + 1.2vw,1.6rem);
  font-size: 16px; line-height: 1.7; color: var(--dh-ink-2);
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content p{ margin: 0 0 .8rem; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content strong{ color: var(--dh-ink); }

html body.dhr.dhr-wrap.dhr-wrap .woocommerce-account h2::after,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-account h2::before{ display: none !important; }

/* ── 마이페이지 ────────────────────────────────────────────────────────────
   데스크톱은 왼쪽 메뉴 + 오른쪽 내용, 모바일은 가로로 미는 알약 줄. */
@media (min-width:900px){
  html body.dhr.dhr-wrap.dhr-wrap.woocommerce-account.logged-in .woocommerce{
    display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 1.6rem; align-items: start;
  }
  /* 알림 상자가 첫 칸을 차지해 메뉴와 내용이 한 칸씩 밀린다 — 자리를 못박는다 */
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper{ grid-column: 1 / -1 !important; grid-row: 1 !important; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-account.logged-in .woocommerce > .dhr-ah{ grid-column: 1 / -1 !important; grid-row: 2 !important; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation{ grid-column: 1 !important; grid-row: 3 !important; width: auto !important; float: none !important; margin: 0 !important; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content{ grid-column: 2 !important; grid-row: 3 !important; width: auto !important; float: none !important; margin: 0 !important; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation ul{ display: block !important; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation li a{ width: 100%; justify-content: flex-start !important; }
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation ul{
  display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1.2rem; padding: 0;
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation li{ margin: 0 !important; border: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation li a{
  display: flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border-radius: 999px; border: 1.5px solid var(--dh-line); background: var(--dh-surface);
  color: var(--dh-ink-2); font-size: 15px; font-weight:700; text-decoration: none;
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation li.is-active a{
  background: var(--dh-primary); border-color: var(--dh-primary); color: var(--dh-primary-ink);
}

html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__note{
  margin: 0 0 1.1rem !important; padding: .8rem 1rem; border-radius: 12px;
  background: var(--dh-surface-2); color: var(--dh-ink-2);
  font-size: 14px; line-height: 1.6; word-break: keep-all;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__hi{
  display: flex; align-items: center; gap: .9rem; padding-bottom: 1.1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--dh-line);
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__av{
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 999px;
  background: var(--dh-primary); color: var(--dh-primary-ink);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight:800;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__hi b{ display: block; font-size: 19px; font-weight:800; letter-spacing: 0; color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__hi span:not(.dhr-acc__av){ display: block; font-size: 14px; color: var(--dh-ink-3); margin-top: .15rem; word-break: keep-all; }

html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__grid{ display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width:560px){ html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__grid{ grid-template-columns: repeat(3,1fr); } }
html body.dhr.dhr-wrap.dhr-wrap a.dhr-acc__tile{
  display: flex; flex-direction: column; gap: .25rem; min-height: 116px; padding: 1rem;
  border: 1.5px solid var(--dh-line); border-radius: 14px; background: var(--dh-surface);
  color: var(--dh-ink); text-decoration: none;
}
html body.dhr.dhr-wrap.dhr-wrap a.dhr-acc__tile:hover{ border-color: var(--dh-line-strong); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__ic{ color: var(--dh-ink); display: flex; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__ic svg{ width: 22px; height: 22px; }
html body.dhr.dhr-wrap.dhr-wrap a.dhr-acc__tile b{ font-size: 16px; font-weight:800; letter-spacing: 0; margin-top: .2rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__sub{ font-size: 13px; color: var(--dh-ink-3); line-height: 1.45; word-break: keep-all; }

html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__more{ display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__more a{
  display: flex; align-items: center; min-height: 44px; padding: 0 .95rem; border-radius: 999px;
  border: 1.5px solid var(--dh-line); background: var(--dh-surface);
  color: var(--dh-ink-2); font-size: 14px; font-weight:700; text-decoration: none;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__foot{ display: flex; gap: 1rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--dh-line); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__foot a{ min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight:700; text-decoration: none; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__out{ color: var(--dh-ink-2); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc__leave{ color: var(--dh-ink-3); margin-left: auto; }

/* 상품 아래 섹션 — 추천 · 상세설명 · 연관 상품은 전체 폭 한 줄씩. */
html body.dhr.dhr-wrap.dhr-wrap.single-product div.product > .wc-prl-recommendations,
html body.dhr.dhr-wrap.dhr-wrap.single-product div.product > .woocommerce-tabs,
html body.dhr.dhr-wrap.dhr-wrap.single-product div.product > .related.products,
html body.dhr.dhr-wrap.dhr-wrap.single-product div.product > .upsells.products{
  grid-column: 1 / -1 !important; width: 100% !important; margin: 2.2rem 0 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .wc-prl-recommendations h2,
html body.dhr.dhr-wrap.dhr-wrap.single-product .related.products > h2,
html body.dhr.dhr-wrap.dhr-wrap.single-product .upsells.products > h2{
  font-size: clamp(1.15rem,1rem + .6vw,1.4rem) !important; font-weight:800 !important;
  letter-spacing: 0 !important; color: var(--dh-ink) !important; margin: 0 0 .9rem !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .wc-prl-recommendations ul.products{
  display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: .85rem !important;
  /* 줄마다 높이가 달라지면 카드 크기가 제각각으로 보인다. 모든 줄을 가장 큰 줄에 맞춘다 */
  grid-auto-rows: 1fr !important;
  margin: 0 !important; padding: 0 !important;
}
@media (min-width:640px){ html body.dhr.dhr-wrap.dhr-wrap.single-product .wc-prl-recommendations ul.products{ grid-template-columns: repeat(3,1fr) !important; } }
@media (min-width:980px){ html body.dhr.dhr-wrap.dhr-wrap.single-product .wc-prl-recommendations ul.products{ grid-template-columns: repeat(4,1fr) !important; } }
/* 테마가 li 마다 각진 1px 테두리를 그린다. 안의 카드는 둥글어서 네 귀퉁이에 회색 사각형이
   삐져나왔다 — 카드 뒤에 정체 모를 네모가 하나 더 있는 것처럼 보였다. li 는 자리만 잡는다. */
html body.dhr.dhr-wrap.dhr-wrap.single-product .wc-prl-recommendations ul.products li.product{
  border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important;
  box-shadow: none !important; list-style: none !important;
  display: flex !important; align-items: stretch !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .wc-prl-recommendations ul.products li.product::before,
html body.dhr.dhr-wrap.dhr-wrap.single-product .wc-prl-recommendations ul.products li.product::after{ display: none !important; }
/* 이름이 한 줄인 카드와 두 줄인 카드가 섞이면 구매하기 높이가 어긋난다.
   카드가 칸을 꽉 채우게 하고 버튼은 언제나 맨 아래로 민다. */
html body.dhr.dhr-wrap.dhr-wrap.single-product .wc-prl-recommendations ul.products li.product > .card{
  width: 100% !important; height: 100% !important; margin: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .wc-prl-recommendations ul.products li.product .bd{ flex: 1 1 auto !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wc-prl-recommendations ul.products li.product .buy{ margin-top: auto !important; }

/* ── 구매 상자를 우리가 그린다 ─────────────────────────────────────────────
   타입 스케일: 13 · 15 · 17 · 20 · 34. 크기가 곧 순서다.
   구획은 선으로 나눈다 — 회색 상자를 겹쳐 쌓지 않는다. */
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary{
  padding: clamp(1.1rem,.8rem + 1.2vw,1.8rem) !important;
  display: flex !important; flex-direction: column !important; gap: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-eb{ display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-brand{ font-size: 13px; font-weight:700; color: var(--dh-ink-3); letter-spacing: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-badge{
  font-size: 13px; font-weight:800; letter-spacing: 0; padding: .16rem .5rem; border-radius: 6px;
  background: var(--dh-surface-2); color: var(--dh-ink-2);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-badge--sale{ background: var(--dh-accent-soft); color: var(--dh-accent-deep); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-badge--new{ background: var(--dh-accent-soft); color: var(--dh-accent-deep); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-badge--best{ background: #FBE4EA; color: #9F1239; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-badge--out{ background: var(--dh-surface-2); color: var(--dh-ink-3); }

html body.dhr.dhr-wrap.dhr-wrap h1.dhp-title{
  font-size: clamp(1.35rem,1.15rem + .9vw,1.7rem) !important; font-weight:800 !important;
  letter-spacing: 0 !important; line-height: 1.28 !important; color: var(--dh-ink) !important;
  margin: 0 0 .9rem !important; word-break: keep-all;
}

html body.dhr.dhr-wrap.dhr-wrap .dhp-price{ display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-off{ font-size: 20px; font-weight:900; letter-spacing: 0; color: #B42318; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-was{ font-size: 15px; font-weight: 500; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-now{ font-size: clamp(1.9rem,1.5rem + 1.6vw,2.15rem); font-weight:900; letter-spacing: 0; color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-now span{ font-size: .5em; font-weight:800; margin-left: .12em; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-unit{
  display: inline-flex; align-items: baseline; gap: .4rem; margin-top: .55rem;
  padding: .3rem .7rem; border-radius: 999px; background: var(--dh-accent-soft);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-unit b{ font-size: 17px; font-weight:900; letter-spacing: 0; color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-unit span{ font-size: 13px; font-weight:700; color: var(--dh-accent-deep); }

/* 같은 상품의 다른 구성 (Product\variants) — 「액상 5병 / 액상 10병」. 상품이 따로라 링크로 오간다.
   iOS 세그먼트처럼 회색 홈 안에 지금 것이 흰 판으로 올라온다. form.cart 바깥 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-vars{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 4px;
  margin: .9rem 0 .2rem; padding: 4px; border-radius: 16px; background: var(--dh-surface-2);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-var{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 52px; padding: .4rem .5rem; border-radius: 12px; text-align: center;
  color: var(--dh-ink-2) !important; text-decoration: none !important; background: transparent;
  transition: background-color .16s ease, transform .16s cubic-bezier(.23,1,.32,1);
  -webkit-tap-highlight-color: transparent;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-var b{ font-size: 15px; font-weight: 800; color: inherit; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-var > span{ font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-var.is-on{
  background: var(--dh-surface); color: var(--dh-ink) !important;
  box-shadow: 0 1px 2px rgba(17,17,17,.08), 0 2px 8px rgba(17,17,17,.06);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-var.is-on > span{ color: var(--dh-accent-deep); }
html body.dhr.dhr-wrap.dhr-wrap a.dhp-var:active{ transform: scale(.97); }
html body.dhr.dhr-wrap.dhr-wrap a.dhp-var:focus-visible{ outline: none; box-shadow: inset 0 0 0 1.5px var(--dh-accent), 0 0 0 4px var(--dh-ring); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-var.is-out{ opacity: .5; cursor: not-allowed; }
@media (hover: hover){ html body.dhr.dhr-wrap.dhr-wrap a.dhp-var:hover{ background: var(--dh-glass-in); color: var(--dh-ink) !important; } }
@media (prefers-reduced-motion: reduce){ html body.dhr.dhr-wrap.dhr-wrap .dhp-var{ transition: none; } }

/* 키플 위젯(조회수 · 오늘출발 · 무료배송)은 정보다. 다만 상자를 겹치지 않는다. */
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-viewer-count{ order: -1; align-self: flex-start; margin: 0 0 .7rem !important; padding: .3rem .6rem !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-today-dispatch,
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-free-shipping-gauge{
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: .8rem 0 !important; margin: 0 !important; box-shadow: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-today-dispatch{ border-top: 1px solid var(--dh-line) !important; margin-top: 1.1rem !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-free-shipping-gauge{ border-bottom: 1px solid var(--dh-line) !important; padding-bottom: 1.1rem !important; }

/* 사는 방법 — 결제 단계에서 처음 보면 늦는다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-trust{ list-style: none; margin: 1.2rem 0 0 !important; padding: 1.1rem 0 0 !important; border-top: 1px solid var(--dh-line); display: grid; gap: .8rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-trust li{ margin: 0 !important; padding: 0 !important; display: flex; gap: .6rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-trust__ic{ flex: 0 0 18px; color: var(--dh-ink-3); display: flex; padding-top: .12rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-trust__ic svg{ width: 18px; height: 18px; stroke-width: 1.9; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-trust__tx{ min-width: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-trust b{ display: block; font-size: 15px; font-weight:800; letter-spacing: 0; color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-trust span{ display: block; font-size: 13px; line-height: 1.5; color: var(--dh-ink-3); margin-top: .12rem; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-trust span b{ display: inline; font-size: 13px; color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-links{ display: flex; gap: 1rem; margin: 1rem 0 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-links a{ font-size: 14px; font-weight:700; color: var(--dh-accent-deep); text-decoration: none; min-height: 44px; display: flex; align-items: center; }

/* 사진은 잘라내지 않는다 — 병 전체가 보여야 한다 */
html body.dhr.dhr-wrap.dhr-wrap.single-product .woocommerce-product-gallery__image img{ object-fit: contain !important; background: var(--dh-surface) !important; }

/* ── 폼 컨트롤 한 벌 ───────────────────────────────────────────────────────
   상품 옵션 · 장바구니 · 주문서 · 계정이 각자 다른 셀렉트와 수량 버튼을 쓰고 있었다.
   여기서 한 번에 정한다: 높이 48, 반지름 12, 테두리 1.5px, 글자 16px.
   name·id·JS 는 건드리지 않는다 — 보이는 것만. */
/* 헤더 검색창(.hs)은 자기 모양이 있다 — 여기서 건드리지 않는다 */
html body.dhr.dhr-wrap.dhr-wrap select:not([multiple]),
html body.dhr.dhr-wrap.dhr-wrap input[type="text"], html body.dhr.dhr-wrap.dhr-wrap input[type="tel"], html body.dhr.dhr-wrap.dhr-wrap input[type="email"],
html body.dhr.dhr-wrap.dhr-wrap input[type="password"], html body.dhr.dhr-wrap.dhr-wrap input[type="search"]:not(.hs input), html body.dhr.dhr-wrap.dhr-wrap input[type="number"],
html body.dhr.dhr-wrap.dhr-wrap textarea{
  width: 100%; min-height: 48px; padding: .6rem .9rem; font-size: 16px; font-family: inherit;
  color: var(--dh-ink); background: var(--dh-surface);
  border: 1.5px solid var(--dh-line-strong); border-radius: 12px;
  box-shadow: none; appearance: none; -webkit-appearance: none;
  transition: border-color .15s ease;
}
html body.dhr.dhr-wrap.dhr-wrap select:not([multiple]){
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234E565F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; cursor: pointer;
}
html body.dhr.dhr-wrap.dhr-wrap select:focus-visible, html body.dhr.dhr-wrap.dhr-wrap input:focus-visible:not(.dhsearch__in):not(.hs input), html body.dhr.dhr-wrap.dhr-wrap textarea:focus-visible{
  outline: 3px solid var(--dh-ring); outline-offset: 1px; border-color: var(--dh-accent-deep);
}
html body.dhr.dhr-wrap.dhr-wrap select:hover, html body.dhr.dhr-wrap.dhr-wrap input:hover{ border-color: var(--dh-ink-3); }

/* ── 구성 선택 (테마 wd-option-builder) ────────────────────────────────────
   회색 판 위에 회색 줄이 겹쳐 있고 수량 버튼이 32px 였다. 카드 한 장으로 세운다. */
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-builder{ background: transparent !important; border: 0 !important; padding: 0 !important; margin: 1.2rem 0 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-builder-list{ display: grid !important; gap: .5rem !important; background: none !important; padding: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-item{
  background: var(--dh-surface) !important; border: 1.5px solid var(--dh-line) !important;
  border-radius: 14px !important; padding: .85rem .95rem !important; margin: 0 !important;
  display: flex !important; flex-direction: column !important; gap: .6rem !important;
}
/* 제목 아래 점선은 테마가 #ddd 로 못 박아 다크에서 흰 선 — 토큰으로 */
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-item__top{ border-bottom-color: var(--dh-line) !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-item__title{ font-size: 15px !important; font-weight:700 !important; letter-spacing: 0 !important; color: var(--dh-ink) !important; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-item__bottom{ display: flex !important; align-items: center !important; justify-content: space-between !important; gap: .6rem !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-qty{
  display: inline-flex !important; align-items: center !important; overflow: hidden !important;
  border: 1.5px solid var(--dh-line-strong) !important; border-radius: 999px !important; background: var(--dh-surface) !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-qty button{
  width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
  border: 0 !important; background: none !important; color: var(--dh-ink) !important;
  font-size: 18px !important; font-weight:700 !important; line-height: 1 !important; cursor: pointer;
  display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-qty button:hover{ background: var(--dh-surface-2) !important; }
/* 숫자 칸 — 테마가 span 에 #FFF 배경 · 테두리를 못 박아 다크에서 흰 상자 위 흰 글자였다 (2026-10-08). 알약 안이라 배경은 투명 */
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-qty > span{ min-width: 2.2rem; text-align: center; font-size: 16px; font-weight:800; font-variant-numeric: tabular-nums; color: var(--dh-ink) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-price{ font-size: 17px !important; font-weight:800 !important; letter-spacing: 0 !important; color: var(--dh-ink) !important; font-variant-numeric: tabular-nums; }

html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-builder-summary{ background: none !important; border: 0 !important; border-top: 1px solid var(--dh-line) !important; margin: 1.1rem 0 0 !important; padding: 1rem 0 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-builder-summary__row{ display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: .6rem !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-builder-summary__row > span{ font-size: 15px !important; font-weight: 600 !important; color: var(--dh-ink-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-builder-total{ font-size: 22px !important; font-weight:900 !important; letter-spacing: 0 !important; color: var(--dh-ink) !important; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .wd-option-builder-error{ font-size: 14px !important; color: var(--dh-status-check, #B42318) !important; font-weight:700 !important; margin: .6rem 0 0 !important; }

/* PPOM 옵션 라벨 */
html body.dhr.dhr-wrap.dhr-wrap.single-product .ppom-wrapper{ margin-top: 1.1rem !important; }
html body.dhr.dhr-wrap.dhr-wrap.single-product .ppom-wrapper label,
html body.dhr.dhr-wrap.dhr-wrap.single-product .ppom-wrapper .ppom-field-label{
  display: block !important; font-size: 15px !important; font-weight:700 !important;
  color: var(--dh-ink) !important; margin: 0 0 .4rem !important; letter-spacing: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .ppom-wrapper .form-group,
html body.dhr.dhr-wrap.dhr-wrap.single-product .ppom-wrapper .form-row{ margin: 0 0 .9rem !important; }

/* 무료배송 게이지가 구매 상자와 폼 안에 두 번 나온다 — 한 번만 보인다 */
html body.dhr.dhr-wrap.dhr-wrap.single-product form.cart .dh-drawer-ship{ display: none !important; }

/* ══ 상품 상세 — 우리 템플릿(templates/single-product.php) ═══════════════════
   구조: 사진 | 구매 상자 → 상품 설명 → 배송·교환 → 함께 볼 상품. 한 줄에 하나씩. */
html body.dhr.dhr-wrap.dhr-wrap.single-product div.product.dhp{ display: block !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-main{ padding: 0 0 3rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-crumb{ display: flex; gap: .35rem; align-items: center; padding: 1rem 0 .8rem; font-size: 13px; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-crumb a{ color: inherit; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-crumb a + a::before{ content: "›"; margin-right: .35rem; color: var(--dh-line-strong); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-crumb a:last-child{ color: var(--dh-ink); font-weight:700; }

html body.dhr.dhr-wrap.dhr-wrap .dhp-top{ display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; align-items: start; }
@media (min-width:900px){ html body.dhr.dhr-wrap.dhr-wrap .dhp-top{ grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: 2rem; } }

/* 사진 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal{ background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 18px; overflow: hidden; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__main{ position: relative; aspect-ratio: 1/1; background: var(--dh-surface); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__slide{ display: none; position: absolute; inset: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__slide.on{ display: block; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__slide .woocommerce-product-gallery__image,
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__slide .woocommerce-product-gallery__image a{ display: block; width: 100%; height: 100%; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__slide img{ width: 100% !important; height: 100% !important; object-fit: contain !important; display: block; background: var(--dh-surface); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__thumbs{ display: flex; gap: .5rem; padding: .6rem; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--dh-line); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__thumbs::-webkit-scrollbar{ display: none; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__thumbs button{
  flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 1.5px solid var(--dh-line); background: var(--dh-surface);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__thumbs button.on{ border-color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__thumbs img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* 비로그인 — 「19」 위의 문. 불투명 흰 판이 사진 아래쪽에 앉는다 (블러 없음) */
html body.dhr.dhr-wrap.dhr-wrap .dhp-gate{
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 2;
  background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 14px;
  padding: .95rem 1rem 1rem; display: grid; gap: .35rem; text-align: left; word-break: keep-all;
  box-shadow: 0 12px 28px -18px rgba(17,17,17,.35);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-gate__t{ margin: 0; font-size: 16px; font-weight:800; line-height: 1.35; color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gate__p{ margin: 0 0 .35rem; font-size: 13.5px; line-height: 1.55; color: var(--dh-ink-2); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gate__btn{
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.1rem;
  background: var(--dh-ink); color: var(--dh-surface) !important; font-size: 15px; font-weight:800; border-radius: 999px; text-decoration: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-gate__btn:hover{ background: var(--dh-accent-warm); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gate__login{
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: -.15rem 0 -.5rem;
  font-size: 14px; font-weight:700; color: var(--dh-ink-2) !important; text-decoration: underline; text-underline-offset: .18em;
}
@media (max-width: 420px){ html body.dhr.dhr-wrap.dhr-wrap .dhp-gate{ left: .5rem; right: .5rem; bottom: .5rem; padding: .8rem .85rem .9rem; } }

/* 구매 상자 안의 짧은 설명 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-short{ margin: .6rem 0 0; font-size: 15px; line-height: 1.65; color: var(--dh-ink-2); word-break: keep-all; }
/* 손으로 쓴 한 줄 설명(_dhr_text) — 가격 아래. form.cart 바깥이라 구매 게이트와 무관 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-about{ margin: .7rem 0 0; font-size: 15px; line-height: 1.65; color: var(--dh-ink-2); word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-short p{ margin: 0; }

/* 아래 섹션 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-sec{ margin-top: clamp(2rem,1.4rem + 2vw,3rem); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-sec > h2, html body.dhr.dhr-wrap.dhr-wrap .dhp-sec .sec-h h2{ font-size: clamp(1.15rem,1rem + .7vw,1.45rem); font-weight:800; letter-spacing: 0; margin: 0 0 .9rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-desc__body{
  background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 18px;
  padding: clamp(1rem,.7rem + 1vw,1.6rem); font-size: 16px; line-height: 1.75; color: var(--dh-ink-2);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-desc__body img{ display: block; max-width: 100%; height: auto; margin: 0 auto; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-desc__body p{ margin: 0 0 1rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-faq{ background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 18px; padding: .2rem 1.2rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-faq details{ border-top: 1px solid var(--dh-line); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-faq details:first-child{ border-top: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-faq summary{
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  min-height: 56px; font-size: 16px; font-weight:700; color: var(--dh-ink); letter-spacing: 0;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-faq summary::-webkit-details-marker{ display: none; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-faq summary svg{ width: 20px; height: 20px; flex: 0 0 20px; transform: rotate(90deg); transition: transform .2s; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-faq details[open] summary svg{ transform: rotate(-90deg); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-faq p{ margin: 0 0 1.1rem; font-size: 15px; line-height: 1.7; color: var(--dh-ink-2); word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-faq a{ color: var(--dh-accent-deep); }

/* ══ 상품 목록 — 우리 템플릿(templates/archive-product.php) ═══════════════════ */
html body.dhr.dhr-wrap.dhr-wrap .dha-main{ padding: 0 0 3rem; }
html body.dhr.dhr-wrap.dhr-wrap .dha-head{ padding: 1.4rem 0 .6rem; }
html body.dhr.dhr-wrap.dhr-wrap .dha-head__t{ display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
html body.dhr.dhr-wrap.dhr-wrap .dha-head h1{ font-size: clamp(1.6rem,1.2rem + 1.8vw,2.4rem); font-weight:900; letter-spacing: 0; line-height: 1.15; margin: 0; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dha-n{ font-size: 15px; font-weight:700; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dha-desc{ margin: .5rem 0 0; font-size: 15px; color: var(--dh-ink-2); max-width: 60ch; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dha-chips{ display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .4rem 0 .9rem; margin: 0 -1px; }
html body.dhr.dhr-wrap.dhr-wrap .dha-chips::-webkit-scrollbar{ display: none; }
html body.dhr.dhr-wrap.dhr-wrap .dha-chips a{
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95rem; border-radius: 999px;
  border: 1.5px solid var(--dh-line); background: var(--dh-surface); color: var(--dh-ink-2);
  font-size: 14px; font-weight:700; text-decoration: none; white-space: nowrap;
}
html body.dhr.dhr-wrap.dhr-wrap .dha-chips a.on{ background: var(--dh-primary); border-color: var(--dh-primary); color: var(--dh-primary-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dha-bar{ display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 .9rem; }
html body.dhr.dhr-wrap.dhr-wrap .dha-bar__n{ font-size: 14px; font-weight: 600; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dha-bar form.woocommerce-ordering{ margin: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dha-bar form.woocommerce-ordering select{ width: auto; min-height: 40px; padding: 0 2.2rem 0 .9rem; font-size: 14px; font-weight:700; border-radius: 999px; }
/* 정렬 — 분류 칩과 같은 알약이되 한 단 작게. 폰에서는 옆으로 밀린다 (줄바꿈하면 카드가 밀린다). */
html body.dhr.dhr-wrap.dhr-wrap .dha-sort{ display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1px; }
html body.dhr.dhr-wrap.dhr-wrap .dha-sort::-webkit-scrollbar{ display: none; }
html body.dhr.dhr-wrap.dhr-wrap .dha-sort a{
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 .85rem; border-radius: 999px;
  border: 1.5px solid var(--dh-line); background: var(--dh-surface); color: var(--dh-ink-2);
  font-size: 14px; font-weight:700; text-decoration: none; white-space: nowrap;
}
html body.dhr.dhr-wrap.dhr-wrap .dha-sort a:hover{ border-color: var(--dh-ink-3); color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dha-sort a.on{ background: var(--dh-primary); border-color: var(--dh-primary); color: var(--dh-primary-ink); }
@media (max-width: 599px){
  /* 건수와 정렬이 한 줄에 다 들어가지 않는다 — 건수를 위로 올린다. */
  html body.dhr.dhr-wrap.dhr-wrap .dha-bar{ display: grid; grid-template-columns: minmax(0,1fr); gap: .5rem; }
  html body.dhr.dhr-wrap.dhr-wrap .dha-sort{ min-width: 0; }
}
html body.dhr.dhr-wrap.dhr-wrap .dha-grid{ margin-bottom: 1.6rem; }
html body.dhr.dhr-wrap.dhr-wrap .dha-empty{ text-align: center; padding: 3.5rem 1rem; background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 18px; }
html body.dhr.dhr-wrap.dhr-wrap .dha-empty__ic{ display: inline-flex; width: 56px; height: 56px; border-radius: 999px; background: var(--dh-surface-2); align-items: center; justify-content: center; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dha-empty p{ margin: 1rem 0 1.2rem; font-size: 16px; line-height: 1.6; color: var(--dh-ink-2); }
html body.dhr.dhr-wrap.dhr-wrap .dha-empty p b{ color: var(--dh-ink); font-size: 18px; }

/* ══ 장바구니 — 키플 표를 카드로 ════════════════════════════════════════════
   마크업은 그대로(체크박스 · 수량 · 삭제가 이름으로 걸려 있다). 표를 풀어 상품마다 카드 한 장. */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg__title{ font-size: clamp(1.6rem,1.2rem + 1.8vw,2.4rem) !important; font-weight:900 !important; letter-spacing: 0 !important; margin: 1.2rem 0 1rem !important; }
html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table, html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table tbody, html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table tr, html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table td{ display: block !important; width: 100% !important; border: 0 !important; padding: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table thead, html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table colgroup{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table tbody{ display: grid !important; gap: .7rem !important; }
html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table tr.wd-cpg-row{
  display: grid !important; gap: .7rem 1rem !important; align-items: center !important;
  grid-template-columns: minmax(0,1fr) auto !important; grid-template-areas: "info info" "qty sub" "ship ship" !important;
  background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important; border-radius: 16px !important;
  padding: 1rem !important; margin: 0 !important;
}
@media (min-width:900px){
  /* 고정 폭 세 칸이 상품 칸을 254px 로 굶겼다. 배송 정보를 금액 아래 줄로 내리고 상품 칸에 여유를 준다. */
  html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table tr.wd-cpg-row{ grid-template-columns: minmax(0,1fr) 110px 150px !important; grid-template-areas: "info qty sub" "info qty ship" !important; row-gap: .3rem !important; }
}
html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table td.wd-cpg-col-info{ grid-area: info; }
html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table td.wd-cpg-col-qty{ grid-area: qty; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: .3rem !important; }
html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table td.wd-cpg-col-subtotal{ grid-area: sub; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: .3rem !important; }
html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table td.wd-cpg-col-shipping{ grid-area: ship; display: flex !important; align-items: baseline !important; gap: .4rem !important; font-size: 13px !important; color: var(--dh-ink-3) !important; }
@media (min-width:900px){
  html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table td.wd-cpg-col-qty, html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table td.wd-cpg-col-subtotal{ align-items: center !important; }
  html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table td.wd-cpg-col-shipping{ flex-direction: column !important; align-items: center !important; }
}
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-info{ display: flex !important; gap: .8rem !important; align-items: flex-start !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-info__check{ padding-top: .2rem; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-info__check input{ width: 20px; height: 20px; accent-color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-info__thumb{ flex: 0 0 72px; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--dh-surface-2); display: block; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-info__thumb img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-info__body{ min-width: 0; flex: 1 1 auto; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-info__head{ font-size: 15px !important; font-weight:800 !important; letter-spacing: 0 !important; color: var(--dh-ink) !important; line-height: 1.4; word-break: keep-all; display: flex; justify-content: space-between; gap: .5rem; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option-list{ margin-top: .45rem !important; display: grid; gap: .3rem; padding: 0 !important; }
/* 옵션 줄 — 라벨이 길어 한 줄에 라벨 · × · 수량 · 가격이 다 못 들어간다. 두 줄로 접는다:
   1줄 라벨(+×), 2줄 수량 | 가격. 옆 칸으로 흘러넘치던 원인이 min-width:auto 였다. */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option{
  display: grid !important; grid-template-columns: minmax(0,1fr) 44px !important;
  grid-template-areas: "label remove" "qty price" !important; gap: .45rem .6rem !important; align-items: center !important;
  min-width: 0 !important; max-width: 100% !important; font-size: 13px !important; color: var(--dh-ink-2) !important;
  padding: .55rem .7rem !important; background: var(--dh-surface-2) !important; border-radius: 10px !important; border: 0 !important;
}
/* 라벨은 흐르는 글로. 플렉스로 두면 '필수' 배지가 한 줄을 다 먹고 글자에 21px 만 남는다. */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__label{ grid-area: label; display: block !important; min-width: 0 !important; line-height: 1.45; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__badge{ display: inline-block !important; vertical-align: 1px; margin-right: .35rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__text{ display: inline !important; flex: none !important; width: auto !important; min-width: 0; white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width:639px){
  html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-info__thumb{ flex-basis: 56px !important; width: 56px !important; height: 56px !important; }
  html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-info{ gap: .55rem !important; }
}
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__remove{ grid-area: remove; justify-self: end; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__qty{ grid-area: qty; display: inline-flex !important; align-items: center !important; overflow: hidden !important; border: 1.5px solid var(--dh-line-strong) !important; border-radius: 999px !important; background: var(--dh-surface) !important; width: max-content !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__qty button{ width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; border: 0 !important; background: none !important; color: var(--dh-ink) !important; font-size: 17px !important; font-weight:700 !important; padding: 0 !important; cursor: pointer; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__qty span{ min-width: 2rem; text-align: center; font-size: 15px; font-weight:800; font-variant-numeric: tabular-nums; color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__price{ grid-area: price; justify-self: end; font-size: 15px !important; font-weight:800 !important; color: var(--dh-ink) !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap table.wd-cpg-table td.wd-cpg-col-info{ min-width: 0 !important; overflow: hidden !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-info__body, html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option-list{ min-width: 0 !important; max-width: 100% !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__label,
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__badge{ font-size: 12px !important; font-weight:800 !important; padding: .1rem .4rem !important; border-radius: 5px !important; background: var(--dh-surface) !important; color: var(--dh-ink-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-qty__num{ font-size: 17px !important; font-weight:800 !important; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-qty__num::before{ content: "수량 "; font-size: 13px; font-weight: 600; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-subtotal__amt{ font-size: 19px !important; font-weight:900 !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums; color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-shipping__main{ font-size: 14px !important; font-weight:700 !important; color: var(--dh-ink-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-shipping__main::before{ content: "배송비 "; font-weight: 600; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-bulk{ display: flex !important; gap: .4rem !important; margin: .8rem 0 0 !important; }
/* 추천 줄 */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom{ margin: 2.2rem 0 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__title{ font-size: 18px !important; font-weight:800 !important; letter-spacing: 0 !important; margin: 0 0 .8rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__list{ display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: .7rem !important; }
@media (min-width:640px){ html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__list{ grid-template-columns: repeat(3,1fr) !important; } }
@media (min-width:980px){ html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__list{ grid-template-columns: repeat(5,1fr) !important; } }
html body.dhr.dhr-wrap.dhr-wrap a.wd-cpg-recom__item{ display: block !important; background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important; border-radius: 14px !important; padding: .7rem !important; text-decoration: none !important; color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__thumb{ aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: var(--dh-surface-2); margin-bottom: .55rem; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__thumb img{ width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__name{ font-size: 14px !important; font-weight:700 !important; line-height: 1.4 !important; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__price{ margin-top: .35rem; font-size: 15px; font-weight:800; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__price del{ font-size: 13px; font-weight: 500; color: var(--dh-ink-3); margin-right: .3rem; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__price ins{ text-decoration: none; }
/* 합계 */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary{ margin: 1.6rem 0 0 !important; background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important; border-radius: 16px !important; padding: 1.1rem 1.2rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary__head{ font-size: 15px !important; font-weight:700 !important; color: var(--dh-ink-2) !important; margin: 0 0 .8rem !important; padding: 0 0 .8rem !important; border-bottom: 1px solid var(--dh-line) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary__calc{ display: grid !important; gap: .55rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary__sym{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary__item{ display: flex !important; flex-direction: row-reverse !important; justify-content: space-between !important; align-items: baseline !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary__item span{ font-size: 15px !important; color: var(--dh-ink-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary__item strong{ font-size: 16px !important; font-weight:700 !important; color: var(--dh-ink) !important; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary__item--discount strong{ color: var(--dh-status-check, #B42318) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary__item--discount strong::before{ content: "− "; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary__item--total{ margin-top: .4rem !important; padding-top: .8rem !important; border-top: 1px solid var(--dh-line) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary__item--total span{ font-weight:800 !important; color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-summary__item--total strong{ font-size: 24px !important; font-weight:900 !important; letter-spacing: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-order{ display: flex !important; flex-direction: column !important; align-items: center !important; gap: .6rem !important; margin: 1rem 0 0 !important; }
@media (min-width:900px){
  /* 두 칸은 **폼 안에서** 나눈다. `.wd-cpg` 를 격자로 만들고 폼을 display:contents 로
     풀면 제목 · 안내가 칸을 가로지르며 행 번호가 어긋나 오른쪽 덩어리가 제목 위로 올라간다.
     폼 자체를 격자로 두면 그런 셈이 필요 없다 — 주문 버튼도 폼 안에 그대로 있다. */
  html body.dhr.dhr-wrap.dhr-wrap .wd-cpg > form.wd-cpg-form{
    display: grid !important; grid-template-columns: minmax(0,1fr) 360px; gap: 0 1.5rem; align-items: start;
  }
  html body.dhr.dhr-wrap.dhr-wrap .wd-cpg > form.wd-cpg-form > *{ grid-column: 1; min-width: 0; }
  html body.dhr.dhr-wrap.dhr-wrap .dhr-cartside{
    grid-column: 2 !important; grid-row: 1 / -1 !important; position: sticky; top: 92px; align-self: start;
    display: grid; gap: .8rem; margin: 0 !important;
  }
  html body.dhr.dhr-wrap.dhr-wrap .dhr-cartside > *{ margin: 0 !important; }
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-cartside{ display: grid; gap: .8rem; }

/* ══ 주문서 — 두 칸 ═════════════════════════════════════════════════════════ */
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-title{ font-size: clamp(1.6rem,1.2rem + 1.8vw,2.4rem) !important; font-weight:900 !important; letter-spacing: 0 !important; margin: 1.2rem 0 1rem !important; text-align: left !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-grid{ display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 1rem !important; align-items: start !important; }
@media (min-width:1024px){
  html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-grid{ grid-template-columns: minmax(0,1fr) 380px !important; gap: 1.5rem !important; }
  html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-right{ position: sticky; top: 84px; }
}
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-left, html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-right{ display: grid !important; gap: 1rem !important; width: auto !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-card{ background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important; border-radius: 16px !important; padding: 1.2rem !important; margin: 0 !important; box-shadow: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-card-title{ font-size: 17px !important; font-weight:800 !important; letter-spacing: 0 !important; margin: 0 0 .9rem !important; padding: 0 !important; border: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-field-box label{ display: block !important; font-size: 14px !important; font-weight:700 !important; color: var(--dh-ink-2) !important; margin: 0 0 .35rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-field-box p.form-row{ margin: 0 !important; padding: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-field-grid{ display: grid !important; gap: .8rem !important; margin: 0 0 .8rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-field-grid--2{ grid-template-columns: 1fr !important; }
@media (min-width:640px){ html body.dhr.dhr-wrap.dhr-wrap .wd-field-grid--2{ grid-template-columns: 1fr 1fr !important; } }
html body.dhr.dhr-wrap.dhr-wrap .wd-postcode-row{ display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: .6rem !important; align-items: end !important; margin: 0 0 .8rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-address-search-btn{ min-height: 48px !important; padding: 0 1rem !important; border-radius: 12px !important; border: 1.5px solid var(--dh-primary) !important; background: var(--dh-surface) !important; color: var(--dh-ink) !important; font-size: 15px !important; font-weight:700 !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-product-item{ display: flex !important; gap: .8rem !important; align-items: flex-start !important; padding: .7rem 0 !important; border-top: 1px solid var(--dh-line) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-product-item:first-child{ border-top: 0 !important; padding-top: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-product-thumb{ flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--dh-surface-2); }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-product-thumb img{ width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-product-name{ font-size: 15px !important; font-weight:700 !important; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-product-price{ font-size: 15px !important; font-weight:800 !important; font-variant-numeric: tabular-nums; margin-top: .3rem; }
html body.dhr.dhr-wrap.dhr-wrap .wd-summary-row{ display: flex !important; justify-content: space-between !important; align-items: baseline !important; padding: .35rem 0 !important; font-size: 15px !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-summary-row span{ color: var(--dh-ink-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-summary-row strong{ font-weight:700 !important; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .wd-summary-total{ display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin-top: .6rem !important; padding-top: .9rem !important; border-top: 1px solid var(--dh-line) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-summary-total span{ font-size: 15px !important; font-weight:800 !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-summary-total strong{ font-size: 24px !important; font-weight:900 !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .wd-summary-point-info{ font-size: 13px !important; color: var(--dh-accent-deep) !important; font-weight:700 !important; margin-top: .4rem !important; }
/* 위 요약이 이미 합계를 보여 준다 — 워드커머스 표는 숨긴다. 결제 수단과 버튼은 그 아래 그대로. */
html body.dhr.dhr-wrap.dhr-wrap #order_review table.shop_table{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap #payment{ background: transparent !important; margin-top: .8rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wc_payment_method label{ font-size: 16px !important; font-weight:800 !important; }
html body.dhr.dhr-wrap.dhr-wrap .place-order{ padding: 0 !important; margin-top: .8rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-terms-custom{ font-size: 14px !important; color: var(--dh-ink-2) !important; line-height: 1.6 !important; margin: .8rem 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap #place_order{ width: 100% !important; }

/* ══ 상품 상세 — 사는 쪽으로 미는 것들 ═══════════════════════════════════════ */
/* 사진 위 — 할인율 알약, 몇 장째 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__pill{ position: absolute; z-index: 2; top: .8rem; left: .8rem; background: var(--dh-ink); color: var(--dh-surface); font-size: 13px; font-weight:800; padding: .35rem .7rem; border-radius: 999px; letter-spacing: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__n{ position: absolute; z-index: 2; right: .8rem; bottom: .8rem; background: var(--dh-surface); border: 1px solid var(--dh-line); color: var(--dh-ink-2); font-size: 13px; font-weight:700; padding: .25rem .6rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal__n b{ color: var(--dh-ink); }
/* 가격 아래 — 살까 말까를 정하는 사실 세 줄 */
html body.dhr.dhr-wrap.dhr-wrap ul.dhp-ben{ list-style: none; margin: .9rem 0 0 !important; padding: .8rem 0 0 !important; border-top: 1px solid var(--dh-line); display: grid; gap: .35rem; }
html body.dhr.dhr-wrap.dhr-wrap ul.dhp-ben li{ margin: 0 !important; padding: 0 0 0 1.1rem !important; position: relative; font-size: 14px; line-height: 1.5; color: var(--dh-ink-2); word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap ul.dhp-ben li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 999px; background: var(--dh-accent); }
html body.dhr.dhr-wrap.dhr-wrap ul.dhp-ben li:first-child{ color: var(--dh-ink); font-weight:700; }
/* 아래 고정 구매 줄 — 모바일. 폼의 버튼이 보이는 동안은 내려가 있다. */
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 36; display: block;
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--dh-glass); border-top: 1px solid var(--dh-glass-line);
  border-radius: 28px 28px 0 0; box-shadow: inset 0 1px 0 var(--dh-glass-hi), 0 -12px 32px rgba(17,17,17,.10);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transform: translateY(110%); transition: transform .22s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-transparency: reduce){ html body.dhr.dhr-wrap.dhr-wrap .dhp-bar{ background: var(--dh-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar[hidden]{ display: none; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar.is-away{ transform: none; }
@media (prefers-reduced-motion: reduce){ html body.dhr.dhr-wrap.dhr-wrap .dhp-bar{ transition: none; } }
@media (min-width:900px){ html body.dhr.dhr-wrap.dhr-wrap .dhp-bar{ display: none !important; } }
/* 구매 카드를 여는 줄. 화살표 하나로는 눌러야 하는 줄인지 알 수 없어 손님이 전화로 묻는다 —
   한 줄을 통째로 버튼으로 만들고 「옵션 열기」라고 글자로 적는다. */
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__open{
  display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 46px;
  margin: 0 0 .5rem; padding: 0 .7rem 0 .85rem; border-radius: 12px;
  border: 1px solid var(--dh-line); background: var(--dh-surface-2);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__open:hover{ background: var(--dh-surface-2); border-color: var(--dh-line-2); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__lbl{ flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__open .n{
  flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight:900; letter-spacing: 0;
  color: var(--dh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__more{
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .1rem;
  font-size: 13.5px; font-weight:800; color: var(--dh-accent-deep); white-space: nowrap;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__more svg{ width: 16px; height: 16px; transform: rotate(-90deg); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__row{ display: flex; align-items: center; gap: .5rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__cart{ flex: 0 0 50px; width: 50px; height: 50px; border-radius: 14px; border: 1.5px solid var(--dh-ink); background: var(--dh-surface); color: var(--dh-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__cart[hidden]{ display: none; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__cart svg{ width: 22px; height: 22px; }
/* 결제하기가 남은 자리를 다 쓴다. content 폭으로 두면 오른쪽이 비어 두 버튼이 왼쪽으로 몰린다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__buy{ flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 1.3rem; border-radius: 14px; background: var(--dh-primary); color: var(--dh-surface); font-size: 16px; font-weight:800; letter-spacing: 0; border: 0; cursor: pointer; white-space: nowrap; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar.is-off .dhp-bar__buy{ background: var(--dh-surface-2); color: var(--dh-ink-2); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar.is-off .dhp-bar__cart{ border-color: var(--dh-line-strong); color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar.nudge .dhp-bar__buy{ animation: dhp-nudge .5s; }
@keyframes dhp-nudge{ 20%{ transform: translateX(-4px); } 60%{ transform: translateX(4px); } }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__tip{
  position: absolute; right: 1rem; bottom: calc(100% + .45rem); background: var(--dh-ink); color: var(--dh-surface); font-size: 13px; font-weight:700; padding: .4rem .7rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__tip::after{ content: ""; position: absolute; right: 1.4rem; top: 100%; border: 5px solid transparent; border-top-color: var(--dh-ink); }
/* 구매 줄이 탭바 자리를 쓴다 */
@media (max-width:899px){ html body.dhr.dhr-wrap.dhr-wrap.dhp-page nav.tabs{ display: none !important; } html body.dhr.dhr-wrap.dhr-wrap.dhp-page{ padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; } }
/* 담긴 뒤의 워드커머스 알림 — 서랍이 대신 말하니 짧게 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-main .woocommerce-message{ background: var(--dh-accent-soft) !important; border: 0 !important; border-radius: 12px !important; color: var(--dh-ink) !important; padding: .8rem 1rem !important; margin: 1rem 0 0 !important; font-size: 14px !important; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-main .woocommerce-message::before{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-main .woocommerce-message a.button{ order: 2; margin-left: auto; min-height: 40px; padding: 0 1rem !important; border-radius: 999px !important; background: var(--dh-primary) !important; color: var(--dh-surface) !important; font-size: 14px !important; font-weight:700 !important; display: inline-flex; align-items: center; }
/* 가입 말풍선은 구매 줄이 올라와 있을 때만 — 줄이 내려가 있으면 말풍선만 떠 있게 된다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar:not(.is-away) .dhp-bar__tip{ display: none; }
/* 맛 칩 — 글자를 15px 로 키우고 나니 한 줄 고정(nowrap)이 칸을 넘어 왼쪽이 잘렸다. 줄바꿈을 허용한다. */
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-chip{ max-width: 100%; min-width: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-chip__pick{ white-space: normal !important; text-align: left !important; flex: 1 1 auto; min-width: 0; word-break: keep-all; line-height: 1.35 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty--mini button{ height: 40px !important; min-height: 40px !important; flex-basis: 32px !important; width: 32px !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty--mini .dhx-qty__n{ height: 40px !important; }
/* 묶음 줄 — 이름이 길면 수량 조절이 다음 줄로 내려간다. 이름을 다섯 줄로 접는 것보다 낫다. */
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle{ flex-wrap: wrap !important; row-gap: .5rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle__pick{ flex: 1 1 200px !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle > .dhx-qty{ margin-left: auto; }
/* 서랍 버튼 글자 — 테마의 링크 색 규칙이 검정 알약 위 글자를 회색으로 눌렀다 */
html body.dhr.dhr-wrap.dhr-wrap .dhc .btn-d, html body.dhr.dhr-wrap.dhr-wrap .dhc .btn-d svg{ color: var(--dh-surface) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhc .btn-o{ color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhc .btn.is-off, html body.dhr.dhr-wrap.dhr-wrap .dhc .btn.is-off svg{ color: var(--dh-ink-3) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar__buy{ color: var(--dh-surface) !important; }
/* 「옵션을 골라 주세요」 — 위 줄이 surface 를 !important 로 못 박아 다크에서 잿빛 위 잿빛(1.2:1)이 됐다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-bar.is-off .dhp-bar__buy{ color: var(--dh-ink-3) !important; }

/* ══ 구매 영역 — 카드 세 장 ══════════════════════════════════════════════════
   한 상자에 제목 · 가격 · 옵션 · 버튼 · 안내를 다 담았더니, 테마 스크립트가 그 상자
   (`.summary`)에 사진 높이만큼 인라인 height 를 박아 넣어 그보다 긴 내용이 상자 밖으로
   흘러 상세 설명 위에 겹쳤다. 인라인 스타일은 선택자로 못 이긴다.
   그래서 상자를 나눴다 — 카드마다 자기 내용만큼만 높이를 갖는다. 넘칠 상자가 없다. */
/* 칸 폭을 못 박지 않으면 안쪽에 줄바꿈이 안 되는 요소 하나가 칸을 밀어내 카드가
   화면보다 넓어진다 (320px 자리에 393px). auto 는 max-content 라 넘칠 수 있다. */
html body.dhr.dhr-wrap.dhr-wrap .dhp-buy{
  display: grid; gap: .8rem; align-content: start;
  grid-template-columns: minmax(0, 1fr); min-width: 0;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-buy > *{ min-width: 0; max-width: 100%; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card{
  background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 18px;
  padding: clamp(1.1rem,.8rem + 1.2vw,1.6rem); min-width: 0;
  /* 어떤 이유로도 내용이 카드 밖으로 나가지 않는다 */
  height: auto !important; max-height: none !important; overflow: visible; position: static !important;
}
/* 사는 방법 카드는 그 자체가 구획이라 안쪽에 선을 또 긋지 않는다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--trust ul.dhp-trust{ margin: 0 !important; padding: 0 !important; border-top: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form form.cart{ margin: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--info ul.dhp-ben{ margin-bottom: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--info .dhp-short{ margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--dh-line); }
/* 테마 템플릿 경로(우리 템플릿을 끈 경우)에도 같은 사고가 나지 않게 */
html body.dhr.dhr-wrap.dhr-wrap.single-product .summary{ height: auto !important; max-height: none !important; position: static !important; float: none !important; }

/* ══ 구매 서랍 (데스크톱) ═══════════════════════════════════════════════════
   상세가 길어 주문하려면 맨 위로 돌아가야 했다. 구매 카드가 화면 밖으로 나가면
   그 카드 **자체**가 오른쪽 서랍이 된다 — 폼을 복제하지 않으므로 고른 옵션이 그대로다. */
html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__head{ display: none; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked{
  position: fixed !important; right: 24px; left: auto; bottom: 24px; top: auto; z-index: 45;
  /* 위 .dhp-card 규칙이 `max-height: none !important` 로 못 박아 둔다 (내용이 상자 밖으로
     새는 것을 막으려고). 서랍일 때만 그 못을 뺀다 — 안 그러면 서랍이 화면보다 길어진다. */
  width: min(400px, calc(100vw - 48px)); height: auto !important; max-height: calc(100dvh - 120px) !important;
  overflow-y: auto !important; overscroll-behavior: contain;
  border-radius: 20px; padding-top: 0;
  background: linear-gradient(180deg, var(--dh-glass-hi), transparent 42%), var(--dh-glass); border-color: var(--dh-glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--dh-glass-hi), 0 4px 10px rgba(17,17,17,.09), 0 44px 80px -30px rgba(17,17,17,.5);
  animation: dhp-dock-in .42s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-transparency: reduce){ html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked{ background: var(--dh-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@keyframes dhp-dock-in{ from{ transform: translate(20px, 14px); opacity: 0; } }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .dhp-dock__head{
  display: flex; align-items: center; gap: .8rem; position: sticky; top: 0; z-index: 3;
  margin: 0 -1.2rem .9rem; padding: .9rem 1.2rem; background: var(--dh-glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--dh-glass-line); border-radius: 20px 20px 0 0;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__tx{ min-width: 0; flex: 1 1 auto; display: grid; gap: .1rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__tx b{ font-size: 14px; font-weight:800; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__tx .n{ font-size: 15px; font-weight:800; color: var(--dh-ink); font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__tx .n del{ font-size: 12.5px; font-weight: 500; color: var(--dh-ink-3); margin-right: .3rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__tx .n ins{ text-decoration: none; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__x{
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 999px; border: 0; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--dh-ink-2); display: flex; align-items: center; justify-content: center;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__x:hover{ background: var(--dh-surface-2); color: var(--dh-ink); }
/* 닫으면 알약 하나만 남는다 — 다시 누르면 서랍이 돌아온다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__open{
  position: fixed; right: 24px; bottom: 24px; z-index: 45; min-height: 52px; padding: 0 1.4rem; border: 0; border-radius: 999px;
  background: var(--dh-primary); color: var(--dh-surface) !important; font-size: 16px; font-weight:800; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 28px -10px rgba(17,17,17,.7);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__open[hidden]{ display: none; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__open svg{ width: 18px; height: 18px; transform: rotate(-90deg); }
@media (max-width: 899px){
  html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked{ position: static !important; width: auto; max-height: none; animation: none; }
  html body.dhr.dhr-wrap.dhr-wrap .dhp-dock__open{ display: none !important; }
}
@media (prefers-reduced-motion: reduce){ html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked{ animation: none; } }
/* 상세 카드도 같은 두 겹 그림자로 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-card,
html body.dhr.dhr-wrap.dhr-wrap .dhp-gal{ box-shadow: 0 0 0 1px rgba(17,17,17,.045), 0 1px 2px rgba(17,17,17,.05), 0 10px 24px -14px rgba(17,17,17,.22); border-color: transparent; }
/* 테마의 무료배송 게이지가 형광 분홍(#FF0D74)으로 강조한다. 우리 강조색은 번트 오렌지 하나다. */
html body.dhr.dhr-wrap.dhr-wrap .wd-free-shipping-gauge__hl,
html body.dhr.dhr-wrap.dhr-wrap .wd-free-shipping-gauge b,
html body.dhr.dhr-wrap.dhr-wrap .wd-free-shipping-gauge strong{ color: var(--dh-accent-warm) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-free-shipping-gauge__text{ color: var(--dh-ink) !important; } /* 테마 #333 — 다크에서 1.4:1 (2026-10-06 점검) */
html body.dhr.dhr-wrap.dhr-wrap .wd-free-shipping-gauge__bar > *,
html body.dhr.dhr-wrap.dhr-wrap .wd-free-shipping-gauge__fill{ background: var(--dh-ink) !important; }
/* 서랍 안에서는 게이지를 접는다 — 좁은 폭에서 옵션보다 먼저 눈에 들어올 이유가 없다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .wd-free-shipping-gauge{ display: none !important; }

/* ══ 선택창 — 브라우저 목록 대신 우리 목록 ═══════════════════════════════════
   원본 select 는 값을 쥔 채 1px 로 접혀 그대로 남는다 (name · change 경로 유지).
   묶음 상품의 옛 옵션 UI(.dhx)가 이미 같은 일을 하는 곳에는 걸리지 않는다. */
html body.dhr.dhr-wrap.dhr-wrap select.dhsel-src{
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important;
  background: none !important; appearance: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhsel{ position: relative; }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__btn{
  width: 100%; min-height: 52px; display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .6rem 1rem; border-radius: 14px; border: 1.5px solid var(--dh-line-strong);
  background: var(--dh-surface); color: var(--dh-ink-3);
  font-size: 15.5px; font-weight: 600; text-align: left; user-select: none;
  box-shadow: 0 1px 2px rgba(17,17,17,.04);
  transition: border-color .2s, box-shadow .3s cubic-bezier(.16,1,.3,1);
}
html body.dhr.dhr-wrap.dhr-wrap .dhsel__btn:hover{ border-color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhsel.is-open .dhsel__btn{ border-color: var(--dh-ink); box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__btn:focus-visible{ outline: 2px solid var(--dh-accent-deep); outline-offset: 2px; }
html body.dhr.dhr-wrap.dhr-wrap .dhsel.is-set .dhsel__btn{ color: var(--dh-ink); font-weight:700; }
/* 고른 값은 텍스트 노드가 아니라 CSS content 로 그린다 — 폼 안의 글자가 늘어나면
   사장님 스니펫이 그 칸을 다른 칸으로 잘못 읽는다 (front.js 의 설명 참고).
   화면낭독기에는 트리거의 aria-label 이 같은 말을 전한다. */
html body.dhr.dhr-wrap.dhr-wrap .dhsel__val{ flex: 1 1 auto; min-width: 0; line-height: 1.35; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__val::after{ content: attr(data-l); }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__cost{ flex: 0 0 auto; font-weight:800; color: var(--dh-ink); font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__cost::after{ content: attr(data-l); }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__chev{ flex: 0 0 20px; width: 20px; height: 20px; color: var(--dh-ink-3); transition: transform .3s cubic-bezier(.16,1,.3,1); }
html body.dhr.dhr-wrap.dhr-wrap .dhsel.is-open .dhsel__chev{ transform: rotate(180deg); }

html body.dhr.dhr-wrap.dhr-wrap .dhsel__list{
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  max-height: min(340px, 60dvh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--dh-surface); border-radius: 16px; padding: .35rem;
  box-shadow: 0 0 0 1px rgba(17,17,17,.07), 0 4px 10px rgba(17,17,17,.08), 0 30px 60px -24px rgba(17,17,17,.42);
  animation: dhsel-in .26s cubic-bezier(.16,1,.3,1);
}
/* 목록은 열 때만 만들어 document.body 로 띄운다. 폼 안에 남겨두면 그 글자가
   구매 게이트의 칸 이름 계산에 섞이고, 카드의 overflow 에도 잘린다.
   위 .dhsel__list 규칙(0,4,2)을 이겨야 하므로 클래스를 하나 더 붙여 (0,5,2)로 올린다 —
   같은 특이도면 뒤에 오는 쪽이 이기지만 여기서는 확실히 못 박는다. */
html body.dhr .dhsel__list.dhsel__list--pop,
html body.dhr.dhr-wrap.dhr-wrap .dhsel__list.dhsel__list--pop{
  position: fixed; right: auto; bottom: auto; z-index: 90;
  max-height: min(340px, 60dvh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--dh-surface); border-radius: 16px; padding: .35rem;
  box-shadow: 0 0 0 1px rgba(17,17,17,.07), 0 4px 10px rgba(17,17,17,.08), 0 30px 60px -24px rgba(17,17,17,.42);
}
/* 항목 규칙은 위 .dhsel__opt 가 그대로 쓰인다 — 여기서 다시 쓰지 않는다 */
html body.dhr.dhr-wrap.dhr-wrap .dhsel__list[hidden]{ display: none; }
@keyframes dhsel-in{ from{ transform: translateY(-6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ html body.dhr.dhr-wrap.dhr-wrap .dhsel__list{ animation: none; } }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__opt{
  width: 100%; min-height: 48px; display: flex; align-items: center; gap: .7rem; cursor: pointer;
  padding: .55rem .75rem; border: 0; border-radius: 11px; background: none; color: var(--dh-ink-2);
  font-size: 15px; font-weight: 600; text-align: left; user-select: none;
}
html body.dhr.dhr-wrap.dhr-wrap .dhsel__opt + .dhsel__opt{ margin-top: 1px; }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__opt:hover:not([disabled]){ background: var(--dh-surface-2); color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__opt:focus-visible{ outline: 2px solid var(--dh-accent-deep); outline-offset: -2px; }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__opt.on{ background: var(--dh-accent-soft); color: var(--dh-ink); font-weight:800; }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__opt.is-off{ opacity: .45; cursor: default; }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__nm{ flex: 1 1 auto; min-width: 0; line-height: 1.4; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__pr{ flex: 0 0 auto; font-weight:800; color: var(--dh-accent-warm); font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__tick{ flex: 0 0 18px; width: 18px; height: 18px; color: var(--dh-ink); opacity: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhsel__opt.on .dhsel__tick{ opacity: 1; }
/* 첫 줄은 "고르지 않음" 자리다 — 값이 아니라 안내다 */
html body.dhr.dhr-wrap.dhr-wrap .dhsel__opt:first-child .dhsel__nm{ color: var(--dh-ink-3); }

/* 옛 옵션 UI 에 못 박힌 흰색 — 다크에서 흰 면 위 흰 글자가 됐다 (사장님 캡처 2026-10-07).
   option-ui.css 가 `#fff` 를 직접 쓰는 자리를 전부 토큰으로 덮는다. 플러그인 파일은 안 건드린다. */
html body.dhr.dhr-wrap.dhr-wrap .dhx-card__no{ color: var(--dh-surface) !important; }                 /* 번호 배지: 잉크 면 위 글자 */
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle{ background: var(--dh-surface) !important; color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle.is-on{ background: var(--dh-accent-soft) !important; border-color: var(--dh-accent) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle__mark,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-chip{ background: var(--dh-surface) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx-below.woocommerce-tabs{ background: var(--dh-surface) !important; border-color: var(--dh-line) !important; }
/* 테마의 「0 / 11」 알약 — 복숭아색 인라인 (#FFF1EC 위 #FF5C35). 우리 포인트로 */
html body.dhr.dhr-wrap.dhr-wrap .vf-summary-count{ background: var(--dh-accent-soft) !important; color: var(--dh-accent-deep) !important; }
/* PPOM 의 원본 select — 접혀 있지만 단품에서는 그대로 보인다 */
html body.dhr.dhr-wrap.dhr-wrap form.cart select.ppom-input{ background-color: var(--dh-surface) !important; color: var(--dh-ink) !important; border-color: var(--dh-line-strong) !important; }
/* 단품의 테마 수량 상자(.quantity · vf-qty) — 테마가 #FAFAFA 위 #18181B 를 못 박아 다크에서 흰 상자. 스니펫의 `:disabled{color:#d4d4d8}` (0,2,0) 도 덮는다 */
html body.dhr.dhr-wrap.dhr-wrap form.cart .quantity{ background: var(--dh-surface-2) !important; border-color: var(--dh-line) !important; color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap form.cart .quantity .vf-qty-label{ color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap form.cart .quantity .vf-qty-btn{ color: var(--dh-ink) !important; background: transparent !important; }
html body.dhr.dhr-wrap.dhr-wrap form.cart .quantity .vf-qty-btn:disabled,
html body.dhr.dhr-wrap.dhr-wrap form.cart .quantity .vf-qty-btn[disabled]{ color: var(--dh-ink-3) !important; }
html body.dhr.dhr-wrap.dhr-wrap form.cart .quantity input.qty{ background: var(--dh-surface) !important; color: var(--dh-ink) !important; }
/* iOS 사파리가 계좌 번호를 tel: 링크로 감싸면 푸터 링크 색이 걸린다 — 어느 쪽이든 숫자는 상자 글자색 */
html body.dhr.dhr-wrap.dhr-wrap footer.foot .fbank .n a{ color: inherit !important; text-decoration: none !important; }

/* 구매 버튼의 호버 — 테마 쪽 색 그림자가 분홍으로 번졌다. 우리 것으로 못 박는다. */
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-actions button,
html body.dhr.dhr-wrap.dhr-wrap .single_add_to_cart_button,
html body.dhr.dhr-wrap.dhr-wrap .wd-direct-checkout-btn{
  filter: none !important; text-shadow: none !important; transition: box-shadow .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-actions button:hover,
html body.dhr.dhr-wrap.dhr-wrap .single_add_to_cart_button:hover,
html body.dhr.dhr-wrap.dhr-wrap .wd-direct-checkout-btn:hover{
  outline: 0 !important; text-shadow: none !important; filter: none !important;
  box-shadow: 0 8px 20px -8px rgba(17,17,17,.45) !important; transform: translateY(-1px);
}
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-actions button:active,
html body.dhr.dhr-wrap.dhr-wrap .single_add_to_cart_button:active,
html body.dhr.dhr-wrap.dhr-wrap .wd-direct-checkout-btn:active{ transform: translateY(1px) scale(.99); }
html body.dhr.dhr-wrap.dhr-wrap .vf-drawer-actions button[disabled]:hover,
html body.dhr.dhr-wrap.dhr-wrap .single_add_to_cart_button[disabled]:hover{ box-shadow: none !important; transform: none; }

/* ══ 마이페이지 — 표를 카드로 ═══════════════════════════════════════════════
   워드커머스 기본 주문 표는 좁은 칸에 번호 · 날짜 · 상태 · 금액 · 버튼을 밀어 넣는다.
   주문 하나가 카드 한 장이 되게 편다. 마크업은 그대로다 (링크 · 취소 버튼이 거기 걸려 있다). */
@media (min-width: 900px){
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-account .woocommerce{ display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 1.6rem; align-items: start; }
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation{
  background: var(--dh-surface); border-radius: 18px; padding: .6rem; margin: 0 0 1rem !important; width: auto !important; float: none !important;
  box-shadow: 0 0 0 1px rgba(17,17,17,.045), 0 1px 2px rgba(17,17,17,.05), 0 10px 24px -14px rgba(17,17,17,.22);
}
@media (min-width: 900px){ html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation{ position: sticky; top: 92px; margin: 0 !important; } }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 2px; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation li{ margin: 0 !important; border: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation li a{
  display: flex; align-items: center; min-height: 48px; padding: 0 .95rem !important; border-radius: 12px;
  font-size: 15px; font-weight:700; color: var(--dh-ink-2) !important; text-decoration: none; background: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation li a:hover{ background: var(--dh-surface-2) !important; color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation li.is-active a{ background: var(--dh-primary) !important; color: var(--dh-surface) !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content{ width: auto !important; float: none !important; padding: 0 !important; }

/* 주문 표 → 카드 */
html body.dhr.dhr-wrap.dhr-wrap table.woocommerce-orders-table{ border: 0 !important; border-collapse: separate !important; width: 100% !important; margin: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap table.woocommerce-orders-table thead{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap table.woocommerce-orders-table tbody{ display: grid !important; gap: .7rem !important; }
html body.dhr.dhr-wrap.dhr-wrap table.woocommerce-orders-table tr.woocommerce-orders-table__row{
  display: grid !important; grid-template-columns: minmax(0,1fr) auto !important;
  grid-template-areas: "num status" "date total" "act act" !important; gap: .35rem .8rem !important; align-items: center !important;
  background: var(--dh-surface) !important; border: 0 !important; border-radius: 16px !important; padding: 1.1rem 1.2rem !important;
  box-shadow: 0 0 0 1px rgba(17,17,17,.045), 0 1px 2px rgba(17,17,17,.05), 0 10px 24px -14px rgba(17,17,17,.22);
}
@media (min-width: 720px){
  html body.dhr.dhr-wrap.dhr-wrap table.woocommerce-orders-table tr.woocommerce-orders-table__row{
    grid-template-columns: minmax(0,1.1fr) auto minmax(0,.9fr) auto !important;
    grid-template-areas: "num status total act" "date status total act" !important; row-gap: .2rem !important;
  }
}
html body.dhr.dhr-wrap.dhr-wrap table.woocommerce-orders-table td{ display: block !important; border: 0 !important; padding: 0 !important; text-align: left !important; }
html body.dhr.dhr-wrap.dhr-wrap table.woocommerce-orders-table td::before,
html body.dhr.dhr-wrap.dhr-wrap table.woocommerce-orders-table th::before{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-number{ grid-area: num; display: block !important; border: 0 !important; padding: 0 !important; font-weight:800 !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-number a{ font-size: 16px; font-weight:800; color: var(--dh-ink) !important; text-decoration: none; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-date{ grid-area: date; font-size: 13.5px !important; color: var(--dh-ink-3) !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-status{ grid-area: status; justify-self: end; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-status{
  font-size: 13px !important; font-weight:800 !important; padding: .3rem .7rem !important; border-radius: 999px !important;
  background: var(--dh-surface-2) !important; color: var(--dh-ink-2) !important; white-space: nowrap;
}
/* 상태별 색 — 입금 확인 중은 손님이 할 일이 남은 상태다 */
html body.dhr.dhr-wrap.dhr-wrap tr.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status{ background: var(--dh-accent-soft) !important; color: var(--dh-accent-deep) !important; }
html body.dhr.dhr-wrap.dhr-wrap tr.woocommerce-orders-table__row--status-payment-confirmed .woocommerce-orders-table__cell-order-status,
html body.dhr.dhr-wrap.dhr-wrap tr.woocommerce-orders-table__row--status-ready-to-ship .woocommerce-orders-table__cell-order-status{ background: var(--dh-accent-soft) !important; color: var(--dh-accent-deep) !important; }
html body.dhr.dhr-wrap.dhr-wrap tr.woocommerce-orders-table__row--status-delivered .woocommerce-orders-table__cell-order-status,
html body.dhr.dhr-wrap.dhr-wrap tr.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status{ background: #E7F3EA !important; color: #1B5E2A !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-total{ grid-area: total; font-size: 15px !important; color: var(--dh-ink-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-total strong{ font-size: 17px; font-weight:900; letter-spacing: 0; color: var(--dh-ink); font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-actions{ grid-area: act; display: flex !important; gap: .45rem !important; flex-wrap: wrap; }
@media (min-width: 720px){ html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-actions{ justify-content: flex-end; } }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-actions .button{
  min-height: 44px !important; padding: 0 1.1rem !important; border-radius: 999px !important; font-size: 14px !important; font-weight:700 !important;
  display: inline-flex !important; align-items: center; background: var(--dh-surface) !important; color: var(--dh-ink) !important;
  border: 1.5px solid var(--dh-line-strong) !important; box-shadow: none !important; text-decoration: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-actions .button:hover{ border-color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-actions .button.cancel{ border-color: var(--dh-line-strong) !important; color: var(--dh-status-check, #B42318) !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-orders-table__cell-order-actions .button.view{ background: var(--dh-primary) !important; color: var(--dh-surface) !important; border-color: var(--dh-primary) !important; }

/* ══ 장바구니 — 남은 손질 ═══════════════════════════════════════════════════ */
/* 제목 옆 개수 — 형광 분홍이었다 */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg__count{
  background: var(--dh-primary) !important; color: var(--dh-surface) !important; font-size: 15px !important; font-weight:800 !important;
  min-width: 30px; height: 30px; padding: 0 .5rem !important; border-radius: 999px !important; display: inline-flex !important;
  align-items: center; justify-content: center; vertical-align: 4px; margin-left: .4rem !important; font-variant-numeric: tabular-nums;
}
/* 자동 할인 안내 두 개 — 인라인 style 로 분홍 그라데이션이 박혀 있어 !important 가 필요하다 */
html body.dhr.dhr-wrap.dhr-wrap #coupon-auto-notice,
html body.dhr.dhr-wrap.dhr-wrap #coupon-applied-notice{
  background: var(--dh-accent-soft) !important; border: 0 !important;
  border-left: 0 !important; border-radius: 16px !important;
  padding: .95rem 1.15rem !important; margin: 0 0 1rem !important; gap: .2rem !important; color: var(--dh-ink) !important;
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  box-shadow: 0 0 0 1px rgba(17,17,17,.03), 0 6px 16px -12px rgba(17,17,17,.3) !important;
}
html body.dhr.dhr-wrap.dhr-wrap #coupon-auto-notice b{ font-size: 13px !important; font-weight: 700 !important; color: var(--dh-accent-warm) !important; letter-spacing: .01em !important; }
html body.dhr.dhr-wrap.dhr-wrap #coupon-auto-notice .n{ font-size: 15px !important; font-weight:700 !important; color: var(--dh-ink) !important; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap #coupon-applied-notice *{ color: var(--dh-ink) !important; font-size: 14.5px !important; }
html body.dhr.dhr-wrap.dhr-wrap #coupon-applied-notice strong{ font-weight:800 !important; color: var(--dh-accent-warm) !important; }
/* 함께 구매하면 좋은 상품 — 썸네일이 상자를 꽉 채운다 (테마가 6px 안쪽 여백을 준다) */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__thumb{ padding: 0 !important; background: var(--dh-surface-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-recom__thumb img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; }
/* 비어 있는 위시리스트가 233px 를 먹는다 */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-wishlist.is-empty{ display: none !important; }
/* 옵션 줄의 필수 · 선택 배지 */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option__badge{ background: var(--dh-ink) !important; color: var(--dh-surface) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-option:has(.wd-cpg-option__badge) .wd-cpg-option__badge{ letter-spacing: 0; }
/* 바로구매 · 옵션 변경 — 회색 위 회색이던 것을 또렷하게 */
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-row .wd-cpg-direct, html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-row .wd-cpg-edit{
  min-height: 40px !important; padding: 0 .9rem !important; border-radius: 999px !important; font-size: 13.5px !important; font-weight:700 !important;
  background: var(--dh-surface) !important; color: var(--dh-ink) !important; border: 1.5px solid var(--dh-line-strong) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-row .wd-cpg-direct:hover, html body.dhr.dhr-wrap.dhr-wrap .wd-cpg-row .wd-cpg-edit:hover{ border-color: var(--dh-ink) !important; }

/* ══ 마이페이지 — 상자 하나가 아니라 카드 여러 장 ═══════════════════════════
   `.woocommerce-MyAccount-content` 를 흰 상자로 만들어 두고 뒤에서 padding 을 0 으로
   덮는 바람에, 글이 상자 가장자리에 붙었다. 바깥은 투명한 통으로 두고 그 안의
   블록마다 카드가 되게 한다 — 사이트의 다른 화면과 같은 규칙이다. */
html body.dhr.dhr-wrap.dhr-wrap.woocommerce-account .woocommerce-MyAccount-content,
html body.dhr.dhr-wrap.dhr-wrap.woocommerce-account.logged-in .woocommerce-MyAccount-content{
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; display: grid !important; gap: .8rem !important;
  align-content: start; font-size: 16px; line-height: 1.7; color: var(--dh-ink-2);
}
/* 안내 문단 하나짜리도 카드로 — 회색 바탕에 글만 떠 있지 않게 */
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content > p{
  margin: 0 !important; padding: 1.1rem 1.2rem; background: var(--dh-surface); border-radius: 16px;
  font-size: 15px; color: var(--dh-ink-2); word-break: keep-all;
  box-shadow: 0 0 0 1px rgba(17,17,17,.045), 0 1px 2px rgba(17,17,17,.05), 0 10px 24px -14px rgba(17,17,17,.22);
}
/* 빈 화면(주문 없음 · 다운로드 없음)도 카드로 */
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content .woocommerce-info,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content .woocommerce-message{
  margin: 0 !important; padding: 1.4rem 1.2rem !important; background: var(--dh-surface) !important;
  border: 0 !important; border-radius: 16px !important; color: var(--dh-ink-2) !important;
  font-size: 15px !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: .8rem;
  box-shadow: 0 0 0 1px rgba(17,17,17,.045), 0 1px 2px rgba(17,17,17,.05), 0 10px 24px -14px rgba(17,17,17,.22);
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content .woocommerce-info::before,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content .woocommerce-message::before{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content .woocommerce-info .button,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content .woocommerce-message .button{
  margin-left: auto; min-height: 44px; padding: 0 1.2rem !important; border-radius: 999px !important;
  background: var(--dh-primary) !important; color: var(--dh-surface) !important; font-size: 14px !important; font-weight:700 !important;
  display: inline-flex !important; align-items: center; box-shadow: none !important;
}
/* 대시보드 카드 */
html body.dhr.dhr-wrap.dhr-wrap .dhr-acc{
  background: var(--dh-surface); border-radius: 18px; padding: clamp(1.2rem,.9rem + 1.2vw,1.7rem);
  box-shadow: 0 0 0 1px rgba(17,17,17,.045), 0 1px 2px rgba(17,17,17,.05), 0 10px 24px -14px rgba(17,17,17,.22);
}
/* 계정 정보 폼 · 주소 폼 */
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content form{
  background: var(--dh-surface); border-radius: 18px; padding: clamp(1.2rem,.9rem + 1.2vw,1.7rem); margin: 0 !important;
  box-shadow: 0 0 0 1px rgba(17,17,17,.045), 0 1px 2px rgba(17,17,17,.05), 0 10px 24px -14px rgba(17,17,17,.22);
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content form fieldset{
  border: 0 !important; margin: 1.6rem 0 0 !important; padding: 1.4rem 0 0 !important; border-top: 1px solid var(--dh-line) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content form legend{
  padding: 0 !important; font-size: 17px !important; font-weight:800 !important; letter-spacing: 0 !important; color: var(--dh-ink) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content .woocommerce-form-row,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content p.form-row{ margin: 0 0 1rem !important; padding: 0 !important; float: none !important; width: auto !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content .form-row-first,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content .form-row-last{ width: auto !important; }
@media (min-width:640px){
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content form{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content form > *{ grid-column: 1 / -1; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content form > .form-row-first{ grid-column: 1; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content form > .form-row-last{ grid-column: 2; }
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content label{
  display: block !important; margin: 0 0 .4rem !important; font-size: 14px !important; font-weight:700 !important; color: var(--dh-ink-2) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content span.required{ color: var(--dh-status-check, #B42318); }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content em{ display: block; margin-top: .35rem; font-size: 13px; font-style: normal; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content button[type="submit"],
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-content .woocommerce-Button{
  min-height: 52px !important; padding: 0 1.6rem !important; border-radius: 999px !important; border: 0 !important;
  background: var(--dh-primary) !important; color: var(--dh-surface) !important; font-size: 16px !important; font-weight:800 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px -8px rgba(17,17,17,.55) !important;
}
/* 주소 — 두 칸 카드 */
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Addresses{ display: grid !important; grid-template-columns: 1fr !important; gap: .8rem !important; margin: 0 !important; }
@media (min-width:720px){ html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Addresses{ grid-template-columns: 1fr 1fr !important; } }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Address{
  width: auto !important; float: none !important; margin: 0 !important;
  background: var(--dh-surface); border-radius: 18px; padding: clamp(1.2rem,.9rem + 1.2vw,1.6rem);
  box-shadow: 0 0 0 1px rgba(17,17,17,.045), 0 1px 2px rgba(17,17,17,.05), 0 10px 24px -14px rgba(17,17,17,.22);
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Address-title{ display: flex !important; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 .8rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Address-title h2,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Address-title h3{ margin: 0 !important; font-size: 17px !important; font-weight:800 !important; letter-spacing: 0 !important; color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Address-title .edit{
  min-height: 40px; padding: 0 .95rem !important; border-radius: 999px !important; font-size: 13.5px !important; font-weight:700 !important;
  border: 1.5px solid var(--dh-line-strong) !important; color: var(--dh-ink) !important; text-decoration: none !important;
  display: inline-flex !important; align-items: center; white-space: nowrap;
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Address address{ font-style: normal; font-size: 15px; line-height: 1.7; color: var(--dh-ink-2); margin: 0; word-break: keep-all; }
/* 모바일 메뉴는 가로로 미는 알약 줄 — 세로로 세우면 화면 하나를 다 먹는다 */
@media (max-width:899px){
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation{ background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation ul{
    display: flex !important; flex-wrap: nowrap !important; gap: .4rem; overflow-x: auto; scrollbar-width: none;
    padding: .2rem 0 .9rem !important; margin: 0 !important;
  }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display: none; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation li{ flex: 0 0 auto; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation li a{
    min-height: 42px; padding: 0 .95rem !important; border-radius: 999px; white-space: nowrap;
    background: var(--dh-surface) !important; border: 1.5px solid var(--dh-line);
  }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation li.is-active a{ background: var(--dh-primary) !important; border-color: var(--dh-primary); }
}
/* 주소 두 장이 어긋난다 — 테마가 `.u-column1/2` 래퍼에 float 과 폭을 준다.
   격자는 `.woocommerce-Addresses` 에 걸려 있고 카드는 그 손자라, 래퍼도 함께 풀어야 한다. */
/* 카드 자신이 바로 자식일 수도 있다 — 그때 padding 을 0 으로 만들면 글이 모서리에 붙는다 */
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Addresses > *:not(.woocommerce-Address){
  width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; min-width: 0;
}
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Addresses > .woocommerce-Address{ width: auto !important; float: none !important; margin: 0 !important; min-width: 0; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Addresses > * > .woocommerce-Address{ width: 100% !important; }
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Address,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Address-title,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Address address,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Address-title h2,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Address-title h3{ text-align: left !important; }
/* 두 카드가 (1행 2열) · (2행 1열) 로 어긋난다 — 테마가 칼럼에 뭔가를 걸어 두어
   자동 배치가 첫 칸을 건너뛴다. 자리를 못 박는다. */
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Addresses{ direction: ltr !important; grid-auto-flow: row !important; }
@media (min-width:720px){
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Addresses > *:nth-child(1){ grid-column: 1 !important; grid-row: 1 !important; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-Addresses > *:nth-child(2){ grid-column: 2 !important; grid-row: 1 !important; }
}

/* 마이페이지 사이드 메뉴 — 위아래가 붙어 있었다 */
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation{ padding: .55rem !important; }
@media (min-width:900px){
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation{ padding: .8rem .6rem !important; }
  html body.dhr.dhr-wrap.dhr-wrap .woocommerce-MyAccount-navigation ul{ gap: .2rem !important; }
}

/* ══ 내 쿠폰함 (keyple) ═════════════════════════════════════════════════════ */
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupons{ display: grid; gap: 0; }
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-tabs{
  display: flex !important; gap: .3rem !important; align-items: stretch !important;
  margin: 0 0 1rem !important; padding: 0 0 .1rem !important; border-bottom: 1px solid var(--dh-line) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .keyple-tab-btn{
  display: inline-flex !important; align-items: center !important; gap: .4rem !important;
  min-height: 48px !important; height: auto !important; width: auto !important; padding: 0 1rem !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; cursor: pointer;
  font-family: inherit !important; font-size: 15.5px !important; font-weight:700 !important;
  color: var(--dh-ink-3) !important; border-bottom: 2.5px solid transparent !important; margin-bottom: -1px !important;
}
html body.dhr.dhr-wrap.dhr-wrap .keyple-tab-btn:hover{ color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .keyple-tab-btn.is-active{ color: var(--dh-ink) !important; font-weight:800 !important; border-bottom-color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .keyple-tab-count{
  min-width: 22px; height: 22px; padding: 0 .45rem !important; border-radius: 999px !important;
  background: var(--dh-surface-2) !important; color: var(--dh-ink-2) !important;
  font-size: 13px !important; font-weight:800 !important; display: inline-flex !important; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
html body.dhr.dhr-wrap.dhr-wrap .keyple-tab-btn.is-active .keyple-tab-count{ background: var(--dh-primary) !important; color: var(--dh-surface) !important; }
html body.dhr.dhr-wrap.dhr-wrap .keyple-tab-panel{ display: none; }
html body.dhr.dhr-wrap.dhr-wrap .keyple-tab-panel.keyple-tab-active{ display: grid !important; gap: .7rem !important; }
/* 쿠폰 한 장 — 왼쪽은 혜택, 오른쪽은 코드. 사이는 점선으로 뜯는 자리처럼. */
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon{
  display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 1rem 1.4rem !important;
  padding: 1.2rem 1.4rem !important; margin: 0 !important; border: 0 !important; border-radius: 16px !important;
  background: var(--dh-surface) !important;
  box-shadow: 0 0 0 1px rgba(17,17,17,.045), 0 1px 2px rgba(17,17,17,.05), 0 10px 24px -14px rgba(17,17,17,.22) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon-left{ min-width: 0; display: grid; gap: .25rem; }
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon-benefit{
  font-size: clamp(1.25rem,1.1rem + .6vw,1.6rem) !important; font-weight:900 !important; letter-spacing: 0 !important;
  color: var(--dh-ink) !important; font-variant-numeric: tabular-nums; line-height: 1.2 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon-name{ font-size: 15px !important; font-weight:700 !important; color: var(--dh-ink) !important; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon-condition{ font-size: 13.5px !important; color: var(--dh-ink-3) !important; line-height: 1.5 !important; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon-right{
  text-align: right; display: grid; gap: .2rem; justify-items: end; padding-left: 1.4rem;
  border-left: 1.5px dashed var(--dh-line-strong) !important; align-self: stretch; align-content: center;
}
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon-code{
  font-size: 15px !important; font-weight:800 !important; letter-spacing: .04em !important; color: var(--dh-ink) !important;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon-right > *:first-child{ font-size: 13px !important; color: var(--dh-ink-3) !important; font-weight: 600 !important; }
/* 만료 · 사용 완료 — 흐리게 하되 읽히게 (AA) */
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon.is-expired,
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon.is-used{ background: var(--dh-surface-2) !important; box-shadow: 0 0 0 1px rgba(17,17,17,.05) !important; }
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon.is-expired .keyple-my-coupon-benefit,
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon.is-used .keyple-my-coupon-benefit{ color: var(--dh-ink-3) !important; }
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon.is-expired .keyple-my-coupon-name,
html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon.is-used .keyple-my-coupon-name{ color: var(--dh-ink-2) !important; }
@media (max-width:639px){
  html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon{ grid-template-columns: minmax(0,1fr) !important; gap: .9rem !important; }
  html body.dhr.dhr-wrap.dhr-wrap .keyple-my-coupon-right{
    border-left: 0 !important; border-top: 1.5px dashed var(--dh-line-strong) !important;
    padding: .9rem 0 0 !important; justify-items: start; text-align: left;
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  }
}

/* ── 모바일 구매 시트 ─────────────────────────────────────────────────────
   데스크톱은 구매 카드가 오른쪽 서랍이 된다. 모바일에는 아래 구매 줄만 있어서
   옵션을 바꾸려면 상세를 한참 거슬러 올라가야 했다. 같은 카드를 아래에서 올린다 —
   **폼을 복제하지 않는다.** 진짜 폼이 그대로 올라오므로 고른 옵션이 유지되고,
   구매 게이트가 읽는 칸 이름도 폼 안쪽이라 바뀌지 않는다. */
html body.dhr.dhr-wrap.dhr-wrap .dhp-sheetdim{
  position: fixed; inset: 0; z-index: 38; background: var(--dh-veil);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: dhp-dim-in .24s ease;
}
@media (prefers-reduced-transparency: reduce){ html body.dhr.dhr-wrap.dhr-wrap .dhp-sheetdim{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(17,17,17,.62); } }
html body.dhr.dhr-wrap.dhr-wrap .dhp-sheetdim[hidden]{ display: none; }
@keyframes dhp-dim-in{ from{ opacity: 0; } }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet{
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  z-index: 40 !important; width: auto !important; margin: 0 !important;
  /* 위 .dhp-card 규칙이 max-height: none !important 라 여기서도 못을 박아야 한다 */
  height: auto !important; max-height: 86dvh !important;
  overflow-y: auto !important; overscroll-behavior: contain;
  /* 유리 시안 ④ (2026-10-08): 시트 모서리 28 · 유리 면 · 열림 320ms 드로어 커브(닫힘 220ms 는 front.js) */
  border-radius: 28px 28px 0 0 !important; padding-top: 0 !important;
  padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, var(--dh-glass-hi), transparent 42%), var(--dh-glass) !important; border-color: var(--dh-glass-line) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--dh-glass-hi), 0 -26px 60px -22px rgba(16,24,32,.55) !important;
  animation: dhp-sheet-in .32s cubic-bezier(.32,.72,0,1);
}
@keyframes dhp-sheet-in{ from{ transform: translateY(100%); } }
@media (prefers-reduced-transparency: reduce){ html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet{ background: var(--dh-surface) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce){
  html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet,
  html body.dhr.dhr-wrap.dhr-wrap .dhp-sheetdim{ animation: none; }
}
/* 시트 머리 — 잡는 손잡이와 닫기. 데스크톱 서랍 머리를 그대로 쓴다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhp-dock__head{
  display: flex; align-items: center; gap: .8rem; position: sticky; top: 0; z-index: 3;
  margin: 0 -1.1rem .9rem; padding: 1rem 1.1rem .8rem; background: var(--dh-glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--dh-glass-line); border-radius: 28px 28px 0 0;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhp-dock__head::before{
  content: ""; position: absolute; left: 50%; top: .4rem; width: 38px; height: 4px; margin-left: -19px;
  border-radius: 999px; background: var(--dh-line-2);
}
/* 손잡이는 끌 수 있다 — 브라우저 스크롤 · 당겨서 새로고침에 뺏기지 않게 (front.js 가 pointer 로 잡는다) */
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhp-dock__head{ touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet.is-dragging .dhp-dock__head{ cursor: grabbing; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet.is-dragging{ animation: none !important; }
/* 무료배송 게이지는 시트에서 뺀다 — 데스크톱 서랍과 같다. 시트는 고르고 사는 자리라
   화면의 5분의 1을 안내가 차지하면 정작 옵션이 밀린다 (상세 본문에는 그대로 있다) */
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .wd-free-shipping-gauge{ display: none !important; }
/* 게이지를 뺀 자리가 빈 칸으로 남았다. 머리판과 1번 상자 사이가 73px 이나 됐다:
   form 의 위 여백 16px + 비어 있는 PPOM 가격·오류 상자 42px. 시트는 화면이 좁으니 둘 다 없앤다.
   (오류 상자는 :empty 일 때만 감춘다 — 오류가 들어오면 다시 보인다) */
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet.is-sheet form.cart{ margin-top: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .vf-drawer-body{ padding-top: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .ppom-wrapper{ margin-top: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet #ppom-price-container:empty,
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet #ppom-error-container:empty{ display: none !important; }
/* 묶음 상품에서는 원본 선택칸 줄이 1px 로 접혀 있는데도 25px + 여백 15px 을 차지했다.
   보이는 UI 는 그 아래 .dhx 가 그린다 — 그 화면에서만 접는다 (단품에서는 그 줄이 본체다). */
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .vf-drawer-options:has(.dhx) .ppom-wrapper{ margin-bottom: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .vf-drawer-options:has(.dhx) .form-row.ppom-rendering-fields{
  margin: 0 !important; padding: 0 !important; min-height: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhp-dock__head{ margin-bottom: .4rem !important; }
/* 시트가 올라오면 아래 구매 줄은 내린다 — 같은 버튼이 두 번 보이면 안 된다 */
html body.dhr.dhr-wrap.dhr-wrap.dhp-sheet-on .dhp-bar{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap.dhp-sheet-on{ overflow: hidden !important; }

/* ── 옛 옵션 UI 의 수량 스테퍼가 줄 밖으로 잘렸다 ─────────────────────────
   앞선 시도(줄바꿈 허용 + `.dhx-card__inner{overflow:visible}`)는 되레 나빴다.
   그 카드는 `grid-template-rows: 0fr → 1fr` 로 접히는 아코디언이고, 접힌 상태를
   실제로 감추는 것이 안쪽의 `overflow:hidden` 이다. 그것을 풀자 닫힌 카드의
   행들이 서로 겹쳐 흘러나왔다. 되돌린다.

   진짜 원인은 폭이다. 스테퍼가 38+38+38 = 114px 로 고정이라 좁은 폰에서
   이름 · 가격과 함께 한 줄에 들어가지 못한다. 줄을 접는 대신 스테퍼를 줄인다.
   덤으로 버튼만 44px 이고 가운데 숫자칸은 36px 이라 위아래가 어긋나 보였다 —
   같은 높이로 맞춘다. */
/* 줄바꿈을 허용하면 flexbox 는 줄이기 전에 먼저 넘긴다 — 긴 이름 하나가 첫 줄을
   다 먹고 스테퍼가 둘째 줄로 떨어져 줄 높이가 89px 로 뛰었다. 한 줄로 못 박고
   이름 쪽이 줄어들게 한다. */
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-row,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-chip{ flex-wrap: nowrap !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle__pick{ flex: 1 1 auto !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle__name,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-row__name,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-chip__pick{ min-width: 0 !important; }
@media (max-width:899px){
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty{ flex: 0 0 auto !important; }
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty button{
    flex: 0 0 36px !important; width: 36px !important; height: 44px !important;
  }
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty__n{
    flex: 0 0 32px !important; width: 32px !important; height: 44px !important;
  }
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty--mini button{
    flex: 0 0 30px !important; width: 30px !important; height: 40px !important;
  }
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty--mini .dhx-qty__n{
    flex: 0 0 22px !important; width: 22px !important; height: 40px !important;
  }
  /* 그래도 폰에서는 한 줄에 이름 · 가격 · 스테퍼가 다 들어가지 않는다. 카드 안쪽
     폭이 252px 뿐이라(바깥 여백이 네 겹이다) 이름 자리가 60px 밖에 안 남아
     `브이메이트...` 처럼 잘려 무엇을 고르는지 알 수 없었다. 두 줄로 나눈다 —
     이름 한 줄, 그 아래 가격(왼쪽) · 스테퍼(오른쪽). 우연히 접히는 것이 아니라
     칸을 정해 두므로 잘릴 자리가 없다. */
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-row{
    display: grid !important; grid-template-columns: minmax(0,1fr) auto;
    align-items: center !important; column-gap: 8px !important; row-gap: 6px !important;
    padding: 10px 2px !important;
  }
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-row__name{
    grid-column: 1 / -1 !important; white-space: normal !important;
    overflow: visible !important; text-overflow: clip !important;
    word-break: keep-all; line-height: 1.35 !important;
  }
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-row__price{
    grid-column: 1 !important; justify-self: start !important; font-size: 13px !important;
  }
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-row > .dhx-qty{
    grid-column: 2 !important; justify-self: end !important;
  }
  /* 묶음 줄도 같은 셈 — 이름을 네 줄로 접는 것보다 아래에 스테퍼를 두는 편이 낫다 */
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle{
    display: grid !important; grid-template-columns: minmax(0,1fr) auto;
    align-items: center !important; column-gap: 8px !important; row-gap: 8px !important;
  }
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle__pick{ grid-column: 1 / -1 !important; }
  html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-bundle > .dhx-qty{
    grid-column: 2 !important; justify-self: end !important; margin: 0 !important;
  }
}

/* 값이 붙지 않는 선택을 세트 수만큼으로 묶을 때의 안내. 글자는 `data-l` 로 그린다 —
   폼 안에 텍스트 노드를 더하면 구매 게이트가 읽는 칸 이름이 바뀔 수 있다. */
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhr-onenote,
html body.dhr.dhr-wrap.dhr-wrap .wd-option-builder .dhr-onenote,
html body.dhr.dhr-wrap.dhr-wrap form.cart .dhr-onenote{
  margin: .5rem 0 0 !important; padding: 0 !important;
  font-size: 13px !important; line-height: 1.45 !important; font-weight: 600 !important;
  color: var(--dh-accent-warm) !important; word-break: keep-all;
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .18s ease, opacity .18s ease;
}
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhr-onenote.is-on,
html body.dhr.dhr-wrap.dhr-wrap .wd-option-builder .dhr-onenote.is-on,
html body.dhr.dhr-wrap.dhr-wrap form.cart .dhr-onenote.is-on{ max-height: 6rem; opacity: 1; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhr-onenote::before,
html body.dhr.dhr-wrap.dhr-wrap .wd-option-builder .dhr-onenote::before,
html body.dhr.dhr-wrap.dhr-wrap form.cart .dhr-onenote::before{ content: attr(data-l); }

/* 폰 검색창 — 테마 화면에서도 같게. 테마의 입력칸 리셋이 이 칸을 잡지 않게 못 박는다
   (위 규칙이 `input[type="search"]:not(.hs input)` 이라 이 칸에 걸린다). */
html body.dhr.dhr-wrap.dhr-wrap .dhsearch__in{
  width: auto !important; min-height: 48px !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important;
  box-shadow: none !important; font-size: 16px !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhsearch__form:focus-within{ box-shadow: inset 0 0 0 1.5px var(--dh-accent), 0 0 0 4px var(--dh-ring) !important; }
/* 검색칸 자신은 고리를 안 그린다 — 둥근 겉판이 그린다 (네모 파란 선이 안에 하나 더 생겼다, 2026-10-09) */
html body.dhr.dhr-wrap.dhr-wrap .hs input:focus, html body.dhr.dhr-wrap.dhr-wrap .dhsearch__in:focus{ outline: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhsearch{ z-index: 100000 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhsearch__ic{ color: var(--dh-ink) !important; background: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhsearch__x{ color: var(--dh-ink-2) !important; background: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhsearch__cats a{ color: var(--dh-ink) !important; text-decoration: none !important; }

/* 상품 제목 안의 브랜드 — 윗줄 회색 라벨로 빼 놨더니 `노보 데저트` 와
   `노보 블랙 데저트` 가 화면에서 둘 다 그냥 `데저트` 로 보였다. 제목 안에 두되
   본 이름보다는 한 단계 약하게 — 읽는 순서는 브랜드 → 이름이다. */
html body.dhr.dhr-wrap.dhr-wrap h1.dhp-title .dhp-title__b{
  color: var(--dh-ink-2); font-weight:700; white-space: nowrap;
}
/* 제목 아래 「디오리퀴드 액상 전체 9종 보기」 — 브랜드 페이지로 가는 길 (2026-10-20) */
html body.dhr.dhr-wrap.dhr-wrap a.dhp-brandlink{
  display: inline-flex; align-items: center; gap: .25rem; min-height: 32px; margin: .2rem 0 .1rem;
  font-size: 14px; font-weight: 700; color: var(--dh-accent-deep) !important; text-decoration: none !important;
}
@media (hover:hover){ html body.dhr.dhr-wrap.dhr-wrap a.dhp-brandlink:hover{ text-decoration: underline !important; text-underline-offset: 3px; } }

/* ══ 노보 물량 이벤트 — 하루 한도 · 남은 수량 ══════════════════════════════
   가격 바로 아래, `form.cart` 바깥이다. 폼 안에 글자를 더하면 구매 게이트가 읽는
   칸 이름이 바뀐다. 반투명은 쓰지 않는다 — 불투명 면에 왼쪽 굵은 선 하나. */
html body.dhr.dhr-wrap.dhr-wrap .dhp-novo{
  margin: .9rem 0 0; padding: .8rem .9rem .75rem 1rem; background: var(--dh-ground);
  border-radius: 16px; border-left: 0;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-novo__t{ display: block; font-size: 15px; font-weight:800; color: var(--dh-ink); letter-spacing: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-novo__t span{ color: var(--dh-accent-warm); font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-novo__p{ margin: .25rem 0 0 !important; font-size: 13.5px; line-height: 1.55; color: var(--dh-ink-2); word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-novo__rows{ margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--dh-line); display: grid; gap: .3rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-novo__row{ display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-size: 14px; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-novo__row span{ color: var(--dh-ink-2); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-novo__row b{ color: var(--dh-ink); font-weight:800; font-variant-numeric: tabular-nums; }

/* ── 담기가 거절됐을 때 ────────────────────────────────────────────────────
   테마는 워드커머스 안내를 자기 토스트(#wd-coupon-toast)로 옮기고 원본에 인라인
   `display:none` 을 박는다. 「장바구니에 담았습니다」 같은 한 줄에는 맞는 방식이지만,
   노보 하루 한도처럼 **왜 안 됐는지**를 설명하는 두 줄은 한 줄 토스트에서 잘리고
   몇 초 뒤 사라진다. 게다가 테마는 거절도 `success` 로 칠한다.

   그래서 거절(`.woocommerce-error`)일 때만 원본을 도로 세우고 토스트를 끈다.
   인라인 style 을 이기려면 `!important` 가 필요하다. `:has()` 가 없는 브라우저에서는
   둘 다 보일 뿐 읽는 데는 지장이 없다. */
html body.dhr.dhr-wrap.dhr-wrap ul.woocommerce-error{
  display: block !important; list-style: none !important; background: #FFF4F2 !important;
  border: 0 !important; border-left: 0 !important;
  border-radius: 12px !important; color: #7A1C12 !important; padding: .85rem 1rem !important;
  margin: 1rem 0 0 !important; font-size: 14px !important; line-height: 1.6 !important; word-break: keep-all;
}
html body.dhr.dhr-wrap.dhr-wrap ul.woocommerce-error li{ margin: 0 !important; padding: 0 !important; }
/* 워드커머스가 안내에 포커스를 옮긴다 (스크린리더가 읽게). 링은 남기되 브라우저 기본
   파랑 대신 이 상자의 색으로 — 파란 두 겹 테두리가 빨간 상자 위에 얹혀 있었다. */
html body.dhr.dhr-wrap.dhr-wrap ul.woocommerce-error:focus{ outline: 2px solid #B42318 !important; outline-offset: 2px !important; }
html body.dhr.dhr-wrap.dhr-wrap ul.woocommerce-error::before,
html body.dhr.dhr-wrap.dhr-wrap ul.woocommerce-error li::before{ display: none !important; content: none !important; }
html body.dhr.dhr-wrap.dhr-wrap:has(ul.woocommerce-error) #wd-coupon-toast{ display: none !important; }

/* ── 상품 후기 (#dhp-rev) ────────────────────────────────────────────────
   상세를 우리 템플릿으로 바꾸면서 리뷰 영역이 통째로 빠져 있었다. 안쪽 마크업은
   **워드커머스가 그린 그대로**다 — 폼 · 필드 이름 · 논스 · 구매자 확인이 그쪽
   것이라야 관리자 「상품평」 화면과 별점 집계가 맞는다. 여기서는 옷만 입힌다. */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .woocommerce-Reviews-title{ display: none; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev__n{
  margin-left: .4rem; font-size: .8em; color: var(--dh-accent-warm);
}
/* 테마가 리뷰를 탭 안에 넣어 두고 `#reviews` 를 `display:none !important` 로 접는다.
   우리 화면에는 탭이 없어서 열어 줄 사람이 없다 — 여기서 펴 준다. */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev #reviews{ display: grid !important; gap: 14px; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev #comments,
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev #review_form_wrapper,
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev #review_form,
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev #respond{ display: block !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev #commentform{ display: grid !important; }

/* 쓸 자리가 바로 아래 있으면 「아직 상품평이 없습니다」 상자는 같은 말을 두 번 한다
   (폼 제목이 이미 「첫 상품평을 남겨 주세요」다) — 그때는 뺀다. */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev #reviews:has(#commentform) .woocommerce-noreviews{ display: none; }

/* 아직 없고 쓸 자리도 없을 때 (비로그인 · 구매자 전용) */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .woocommerce-noreviews{
  margin: 0; padding: 26px 18px; background: var(--dh-surface); border: 1px solid var(--dh-line);
  border-radius: 16px; text-align: center; color: var(--dh-ink-2); font-size: 15px;
}

/* 후기 목록 — 한 장씩 흰 카드 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev ol.commentlist{
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev ol.commentlist li{
  margin: 0; padding: 0; background: none; border: 0; list-style: none;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment_container{
  display: block; background: var(--dh-surface); border: 1px solid var(--dh-line);
  border-radius: 16px; padding: 16px 18px;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment_container img.avatar{
  width: 34px; height: 34px; border-radius: 999px; float: left; margin: 0 10px 6px 0; border: 0; padding: 0;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-text{ margin: 0; border: 0; padding: 0; overflow: hidden; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-text p.meta{
  margin: 0 0 6px; font-size: 13px; color: var(--dh-ink-3);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .woocommerce-review__author{
  color: var(--dh-ink); font-weight:700; font-size: 15px;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .woocommerce-review__verified{
  color: var(--dh-accent-warm); font-weight:700;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .description{ color: var(--dh-ink); font-size: 15px; line-height: 1.65; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .description p{ margin: 0 0 .5em; }

/* 별 — 워드커머스가 글꼴로 그린다. 색만 우리 것으로 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .star-rating,
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev p.stars a{ color: var(--dh-accent-warm); }

/* 쓰는 자리 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev #review_form_wrapper{
  background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 16px; padding: 18px;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-reply-title{
  display: block; font-size: 17px; font-weight:800; color: var(--dh-ink); margin: 0 0 4px;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-notes,
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .woocommerce-verification-required{
  margin: 0 0 12px; font-size: 14px; color: var(--dh-ink-3);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-form{ display: grid; gap: 12px; margin: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-form p{ margin: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-form label{
  display: block; font-size: 14px; font-weight:700; color: var(--dh-ink-2); margin: 0 0 6px;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-form input[type="text"],
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-form input[type="email"],
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-form textarea{
  width: 100%; box-sizing: border-box; background: var(--dh-surface); color: var(--dh-ink);
  border: 1px solid var(--dh-line-strong); border-radius: 12px;
  padding: 12px 14px; font: inherit; font-size: 16px; min-height: 48px;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-form textarea{ min-height: 132px; line-height: 1.6; resize: vertical; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-form :is(input,textarea):focus{
  outline: none; border-color: var(--dh-ink); box-shadow: inset 0 0 0 1px var(--dh-ink);
}
/* 별점 고르기 — 손가락으로 눌러야 한다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev p.stars{
  display: flex; align-items: center; gap: 2px; margin: 0; font-size: 22px; line-height: 1;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev p.stars a{
  min-width: 30px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .form-submit{ margin: 4px 0 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .form-submit input[type="submit"]{
  width: 100%; min-height: 52px; background: var(--dh-ink) !important; color: var(--dh-surface) !important;
  border: 0 !important; border-radius: 999px !important; font-size: 16px; font-weight:800;
  cursor: pointer; padding: 0 20px; box-shadow: none !important; text-shadow: none !important;
}
@media (min-width: 720px){
  html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .form-submit input[type="submit"]{ width: auto; min-width: 200px; }
}

/* 사진 후기 — 올리는 칸 · 붙은 사진 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .dhr-rev-up input[type="file"]{
  width: 100%; box-sizing: border-box; background: var(--dh-surface); color: var(--dh-ink);
  border: 1px dashed var(--dh-line-strong); border-radius: 12px;
  padding: 12px 14px; font: inherit; font-size: 15px; min-height: 48px; cursor: pointer;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .dhr-rev-up__tip{
  display: block; margin-top: 8px; font-size: 14px; color: var(--dh-ink-2); word-break: keep-all;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .dhr-rev-up__tip b{ color: var(--dh-accent-warm); }

html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .dhr-rev-ph{
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .dhr-rev-ph__a{
  display: block; width: 96px; height: 96px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--dh-line); background: var(--dh-ground);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .dhr-rev-ph__img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 장바구니의 쿠폰 코드 칸 — 이 장바구니(키플 페이지)엔 워드커머스 쿠폰칸이 없다.
   합계 옆(.dhr-cartside) 맨 위에 세운다. 불투명 · 터치 44px. */
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn{
  background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 14px !important; padding: 14px !important; margin: 0 0 12px !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn__l{
  display: block !important; margin: 0 0 8px !important;
  font-size: 14px !important; font-weight:800 !important; color: var(--dh-ink) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn__row{ display: flex !important; gap: 8px !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn__i{
  flex: 1 1 auto !important; min-width: 0 !important; height: 46px !important;
  padding: 0 12px !important; border: 1px solid var(--dh-line) !important;
  border-radius: 10px !important; background: var(--dh-surface) !important;
  font-size: 15px !important; color: var(--dh-ink) !important; text-transform: uppercase;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn.is-bad .dhr-cpn__i{ border-color: var(--dh-accent-warm) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn__b{
  flex: 0 0 auto !important; height: 46px !important; padding: 0 18px !important;
  border: 0 !important; border-radius: 10px !important; background: var(--dh-ink) !important;
  color: var(--dh-surface) !important; font-size: 15px !important; font-weight:800 !important; cursor: pointer !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn.is-busy .dhr-cpn__b{ opacity: .6 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn__msg{
  margin: 8px 0 0 !important; font-size: 13px !important; line-height: 1.5 !important;
  color: var(--dh-ink-2) !important; word-break: keep-all;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn.is-bad .dhr-cpn__msg{ color: var(--dh-accent-warm) !important; font-weight:700 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn__on{ margin: 10px 0 0 !important; padding: 0 !important; list-style: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn__on li{
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 8px 10px !important; margin: 6px 0 0 !important;
  background: var(--dh-bg) !important; border-radius: 10px !important; font-size: 14px !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn__on li span{ margin-left: auto !important; color: var(--dh-ink-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-cpn__x{
  border: 0 !important; background: none !important; padding: 6px !important;
  font-size: 13px !important; color: var(--dh-ink-2) !important; text-decoration: underline !important; cursor: pointer !important;
}

/* 결제 화면 쿠폰칸의 안내 한 줄 (front.js 가 넣는다).
   테마 규칙을 이기려고 여기서도 클래스를 세 번 쓴다. */
html body.dhr.dhr-wrap.dhr-wrap .dhr-cocpn{
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--dh-ink-2) !important;
  word-break: keep-all !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-cocpn.is-bad{
  color: var(--dh-accent-warm) !important;
  font-weight:700 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-hide-note{ display: none !important; }

/* 결제 화면 쿠폰칸에 걸린 쿠폰 목록 (front.js 가 넣는다) */
html body.dhr.dhr-wrap.dhr-wrap .dhr-cocpn-on{
  margin: 8px 0 0 !important; padding: 0 !important; list-style: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-cocpn-on li{
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 8px 10px !important; margin: 6px 0 0 !important;
  background: var(--dh-surface-2) !important; border-radius: 10px !important;
  font-size: 13px !important; line-height: 1.4 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-cocpn-on li b{ font-weight:800 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-cocpn-on li span{ color: var(--dh-ink-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-cocpn-x{
  margin-left: auto !important; min-height: 32px !important; padding: 0 12px !important;
  border: 1px solid var(--dh-line) !important; border-radius: 999px !important;
  background: var(--dh-surface) !important; color: var(--dh-ink-2) !important;
  font-size: 12px !important; font-weight:700 !important; cursor: pointer !important;
}

/* ══ 주문서 마무리 — 다른 화면과 같은 얼굴로 (2026-09-15) ══════════════════════
   사장님: 「여기는 기존 테마와 좀 달라 보이는데 UI 가」. `?dhr_ui=1` 로 실제 값을
   받아 보니 어긋난 자리가 분명했다. 카드 · 격자 같은 뼈대는 이미 우리 것인데,
   **안쪽 알맹이가 키플 · 워드커머스 기본값 그대로**였다.

   ① 카드 안에 또 테두리 상자가 겹친다 (`#order_review` 는 **검정** 테두리 · `#payment` 는
      라운드 5px 인 워드커머스 기본). ② 분홍 세 가지(#E91E63 가격 · #FF4D73 필수표 ·
      #FF1F79 안내)가 남아 있다. ③ 회색이 우리 것이 아니다 (#222 · #666 · #F8F8F8 · #BDBDBD).
   ④ 적립금 입력칸만 검은 테두리 · 라운드 12 다 (다른 칸은 전부 var(--dh-line-strong) · 10).

   **마크업 · 폼 필드 이름은 한 글자도 안 건드린다.** 색과 크기만 얹는다. */

/* ① 겹친 상자 — 카드는 바깥 하나로 충분하다 */
html body.dhr.dhr-wrap.dhr-wrap #order_review,
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-order-review{
  border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap #payment,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce-checkout-payment{
  border: 0 !important; border-radius: 0 !important;
  padding: .8rem 0 0 !important; background: transparent !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-products-list{
  border: 0 !important; border-radius: 0 !important; padding: 0 !important;
}

/* ② 분홍 — 가격은 값이지 경고가 아니다. 검정으로 세운다 */
html body.dhr.dhr-wrap.dhr-wrap.woocommerce-checkout .woocommerce-Price-amount,
html body.dhr.dhr-wrap.dhr-wrap.woocommerce-checkout .woocommerce-Price-amount bdi,
html body.dhr.dhr-wrap.dhr-wrap.woocommerce-checkout .wd-checkout-product-price,
html body.dhr.dhr-wrap.dhr-wrap.woocommerce-checkout .wd-checkout-products-shipping{
  color: var(--dh-ink) !important;
}
/* 필수 표시는 「빠뜨리면 안 되는 칸」이라 눈에 띄어야 한다 — 우리 포인트 색으로 */
html body.dhr.dhr-wrap.dhr-wrap .wd-required-mark,
html body.dhr.dhr-wrap.dhr-wrap abbr.required{ color: var(--dh-accent-warm) !important; }
/* 입금 안내 상자 — 감싸는 div 자체가 분홍이라 안의 글이 전부 물들었다 */
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-bacs-notice{ color: var(--dh-ink-2) !important; }

/* ③ 우리 회색으로 */
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-product-name{ color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-option-text,
html body.dhr.dhr-wrap.dhr-wrap .wd-summary-row,
html body.dhr.dhr-wrap.dhr-wrap .wd-summary-row span{ color: var(--dh-ink-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-option-badge{
  color: var(--dh-ink-2) !important;
  border: 1px solid var(--dh-line-strong) !important;
  border-radius: 999px !important; font-size: 13px !important; font-weight:700 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-placeholder-note{
  background: var(--dh-surface-2) !important; color: var(--dh-ink-2) !important;
  font-size: 14px !important; line-height: 1.6 !important; border-radius: 12px !important;
  word-break: keep-all !important;
}

/* ④ 입력칸 · 버튼을 한 얼굴로 — 적립금 칸만 검은 테두리였다 */
html body.dhr.dhr-wrap.dhr-wrap .wd-point-dummy-input,
html body.dhr.dhr-wrap.dhr-wrap #wd_point_discount{
  border: 1px solid var(--dh-line-strong) !important;
  border-radius: 10px !important; font-weight:700 !important;
}
/* 주소찾기만 라운드 12 였다 — 나머지 보조 버튼과 같은 알약으로 */
html body.dhr.dhr-wrap.dhr-wrap .wd-address-search-btn{ border-radius: 999px !important; }

/* 폰에서 버튼 글자가 세로로 쪼개졌다 — 「전액사용」이 전/액/사/용 네 줄이 됐다.
   버튼은 줄이지 말고 글자칸이 줄어들게 한다 (min-width:0 이 없으면 칸이 안 줄어든다). */
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-coupon-box .button,
html body.dhr.dhr-wrap.dhr-wrap .wd-address-search-btn,
html body.dhr.dhr-wrap.dhr-wrap .wd-point-dummy-btn,
html body.dhr.dhr-wrap.dhr-wrap #wd_point_use_all{
  white-space: nowrap !important; flex: 0 0 auto !important; word-break: keep-all !important;
}
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-coupon-box .input-text,
html body.dhr.dhr-wrap.dhr-wrap .wd-point-dummy-input,
html body.dhr.dhr-wrap.dhr-wrap #wd_point_discount{ min-width: 0 !important; }
/* 카드가 테두리 · 여백만큼 밖으로 나가면 폰에서 화면이 옆으로 밀린다 */
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-page,
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-grid,
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-left,
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-right,
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-card{ box-sizing: border-box !important; max-width: 100% !important; }

/* **왼쪽 · 오른쪽 줄도 격자다 — 칸 폭을 못 박아야 한다.** `auto` 는 max-content 라
   안에 줄바꿈이 안 되는 것 하나가 칸을 밀어낸다: 350px 자리에 393px 이 잡혀 카드가
   화면 밖으로 나가고 폰이 옆으로 밀렸다 (상품 상세 `.dhp-buy` 에서 겪은 그것과 같다). */
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-left,
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-right{ grid-template-columns: minmax(0,1fr) !important; }
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-left > *,
html body.dhr.dhr-wrap.dhr-wrap .wd-checkout-right > *{ min-width: 0 !important; }

/* ===========================================================================
   송장 상자 — 주문 상세 맨 위 (`Tracking\box_html()`)
   ---------------------------------------------------------------------------
   손님이 이 화면에 오는 이유가 대개 이 열세 자리다. 그래서 푸터 계좌 상자와
   같은 생김새로 세운다 — 검은 면, 큰 흰 숫자, 복사 버튼. 두 곳 다 「받아 적어야
   하는 숫자」이고, 손님이 이미 한 번 본 모양이다.
   숫자는 `tabular-nums` 로 자리를 맞춘다 (모노 폰트를 쓰지 않는다).
   =========================================================================== */
html body.dhr.dhr-wrap.dhr-wrap .dhr-track{
  background: var(--dh-ink) !important; color: var(--dh-surface) !important;
  border-radius: 14px !important; padding: 1rem 1.15rem 1.15rem !important;
  margin: 0 0 1.25rem !important; box-sizing: border-box !important; max-width: 100% !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-track__co{
  display: flex !important; align-items: center !important; gap: .4rem !important;
  font-size: 13.5px !important; font-weight:700 !important; color: var(--dh-line-strong) !important;
  letter-spacing: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-track__ic svg{ width: 18px !important; height: 18px !important; display: block !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-track__row{
  display: flex !important; align-items: center !important; gap: .6rem !important;
  flex-wrap: wrap !important; margin-top: .35rem !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-track__no{
  font-size: 22px !important; font-weight:800 !important; color: var(--dh-surface) !important;
  font-variant-numeric: tabular-nums !important; letter-spacing: 0 !important; min-width: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-track__copy{
  flex: 0 0 auto !important; min-height: 36px !important; padding: 0 .85rem !important;
  border-radius: 999px !important; border: 1px solid var(--dh-ink-2) !important;
  background: transparent !important; color: var(--dh-surface) !important;
  font-size: 13.5px !important; font-weight:700 !important; cursor: pointer !important;
  white-space: nowrap !important; box-shadow: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-track__copy.is-done{ background: var(--dh-surface) !important; color: var(--dh-ink) !important; border-color: var(--dh-surface) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-track__go{
  display: inline-flex !important; align-items: center !important; gap: .35rem !important;
  min-height: 48px !important; margin-top: .85rem !important; padding: 0 1.15rem !important;
  border-radius: 999px !important; background: var(--dh-surface) !important; color: var(--dh-ink) !important;
  font-size: 15px !important; font-weight:800 !important; text-decoration: none !important;
  max-width: 100% !important; box-sizing: border-box !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-track__hint{
  margin: .75rem 0 0 !important; font-size: 13px !important; line-height: 1.6 !important;
  color: var(--dh-line-strong) !important; word-break: keep-all !important;
}

/* 가입 벽 안내는 장바구니 화면(테마 껍데기)에도 붙는다 — 거기서는 테마 규칙이
   `a` 와 버튼을 덮으므로 알약을 다시 못 박는다. */
html body.dhr.dhr-wrap.dhr-wrap .dhr-wall{ background: var(--dh-ground) !important; border: 1px solid var(--dh-line) !important; border-radius: 14px !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-wall__go{
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 48px !important; border-radius: 999px !important;
  background: var(--dh-ink) !important; color: var(--dh-surface) !important;
  font-size: 15px !important; font-weight:800 !important; text-decoration: none !important;
  box-shadow: none !important; border: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wall__in a{ color: var(--dh-accent-deep) !important; }

/* ===========================================================================
   후기 부르기 (`includes/review-ask.php`) — 주문 상세 · 마이페이지 첫 화면
   ---------------------------------------------------------------------------
   물건을 받은 손님이 이미 서 있는 자리에서 부른다. 잔소리가 되지 않게 흰 카드
   한 장으로 조용히 두고, 누를 것만 알약으로 세운다.
   =========================================================================== */
html body.dhr.dhr-wrap.dhr-wrap .dhr-ask{
  background: var(--dh-surface) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 14px !important; padding: 1rem 1.15rem 1.15rem !important;
  margin: 1.25rem 0 !important; box-sizing: border-box !important; max-width: 100% !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ask__t{
  margin: 0 !important; font-size: 17px !important; font-weight:800 !important;
  color: var(--dh-ink) !important; word-break: keep-all !important; letter-spacing: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ask__d{
  margin: .35rem 0 0 !important; font-size: 14px !important; line-height: 1.65 !important;
  color: var(--dh-ink-2) !important; word-break: keep-all !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ask__l{ list-style: none !important; margin: .9rem 0 0 !important; padding: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-ask__i{
  display: flex !important; align-items: center !important; gap: .75rem !important;
  padding: .7rem 0 !important; border-top: 1px solid var(--dh-line) !important; margin: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ask__i:first-child{ border-top: 0 !important; padding-top: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-ask__n{
  flex: 1 1 auto !important; min-width: 0 !important; font-size: 14.5px !important;
  line-height: 1.5 !important; color: var(--dh-ink) !important; word-break: keep-all !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ask__go{
  flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important;
  justify-content: center !important; min-height: 44px !important; padding: 0 1.05rem !important;
  border-radius: 999px !important; background: var(--dh-ink) !important; color: var(--dh-surface) !important;
  font-size: 14px !important; font-weight:800 !important; text-decoration: none !important;
  white-space: nowrap !important; border: 0 !important; box-shadow: none !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhr-ask__go--wide{ width: 100% !important; min-height: 48px !important; margin-top: .85rem !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-ask__done{
  flex: 0 0 auto !important; font-size: 13.5px !important; font-weight:700 !important; color: var(--dh-ink-3) !important;
}

/* ===========================================================================
   후기 카드 다시 (2026-09-18) — 사장님: 「레이아웃이 깔끔하지 않고 이상한 둥그런 아이콘」
   ---------------------------------------------------------------------------
   실측으로 원인 넷을 찾았다 (프로덕션 390px):
     · `.star-rating` 이 **`display:none`** — 테마가 접어 둬서 별이 아예 안 보였다
     · `.comment-text` 에 테두리 1px + radius 4 + padding 15 — **카드 안에 카드**
     · `img.avatar` 32px 그라바타 무늬 — 손님이 고른 것이 아니라 이메일에서 나온 그림
     · `p.meta` 가 flex 인데 폭 200px 라 이름 · 배지 · 대시 · 날짜가 두 줄로 접혔다
   별은 **유니코드로 그린다** — 워드커머스 글꼴(`font-family: WooCommerce`)이 안 실리면
   글자가 `SSSSS` 로 나오거나 아무것도 안 보인다. ★ 은 글꼴이 없어도 그려진다.
   =========================================================================== */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment_container{
  display: block !important; background: var(--dh-surface) !important;
  border: 1px solid var(--dh-line) !important; border-radius: 16px !important;
  padding: 16px 18px 18px !important; overflow: visible !important;
}
/* 카드 안의 카드를 없앤다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-text{
  border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  margin: 0 !important; background: none !important; overflow: visible !important;
}
/* 그라바타 무늬 — 서버에서 이미 빼지만 캐시된 화면을 위해 한 번 더 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev img.avatar{ display: none !important; }

/* 별 — 테마가 접어 둔 것을 펴고 우리가 그린다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .star-rating{
  display: block !important; position: relative !important;
  width: 5.6em !important; height: 1.3em !important; line-height: 1.3 !important;
  font-size: 15px !important; letter-spacing: 1px !important; overflow: hidden !important;
  font-family: var(--dh-font) !important; margin: 0 0 6px !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .star-rating::before{
  content: "★★★★★" !important; font-family: var(--dh-font) !important;
  color: var(--dh-line-strong) !important; position: absolute !important; left: 0 !important; top: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .star-rating span{
  position: absolute !important; left: 0 !important; top: 0 !important;
  overflow: hidden !important; white-space: nowrap !important; text-indent: 0 !important;
  padding-top: 0 !important; font-size: inherit !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .star-rating span::before{
  content: "★★★★★" !important; font-family: var(--dh-font) !important;
  color: #F59E0B !important; position: static !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .star-rating span strong{ display: none !important; }

/* 이름 · 배지 · 날짜 한 줄 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .comment-text p.meta{
  display: flex !important; align-items: center !important; flex-wrap: wrap !important;
  gap: 6px !important; margin: 0 0 8px !important; font-size: 13px !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .woocommerce-review__author{
  color: var(--dh-ink) !important; font-weight:800 !important; font-size: 15px !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .woocommerce-review__verified{
  font-style: normal !important; font-size: 12px !important; font-weight:700 !important;
  color: var(--dh-accent-warm) !important; background: var(--dh-accent-soft) !important;
  border-radius: 999px !important; padding: 2px 8px !important; line-height: 1.5 !important;
}
/* 이름과 날짜 사이의 대시는 필요 없다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .woocommerce-review__dash{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .woocommerce-review__published-date{
  margin-left: auto !important; color: var(--dh-ink-3) !important; font-size: 13px !important;
}

/* 사진 — 94px 는 무엇을 찍었는지 안 보인다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .dhr-rev-ph{
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 10px 0 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .dhr-rev-ph__a{
  display: block !important; width: min(220px, 62%) !important; line-height: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .dhr-rev-ph__img{
  width: 100% !important; height: auto !important; border-radius: 12px !important;
  border: 1px solid var(--dh-line) !important; display: block !important;
}

/* 별을 재 보니 두 가지가 더 남아 있었다 (390px 실측).
   · 워드커머스가 `.star-rating` 에 **`float: right`** 를 준다 — 별이 이름 줄
     오른쪽으로 떠서 meta 폭이 282 → 198px 로 줄고 날짜가 별에 붙었다
   · `span` 안의 「5 중에서 … 로 평가됨」 **텍스트 노드**가 별 뒤에 `5` 로 새어 나왔다.
     `strong` 만 숨겨서는 모자란다 — 글자 크기를 0 으로 죽이고 `::before` 만 살린다 */
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .star-rating{
  float: none !important; clear: both !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .star-rating span{
  font-size: 0 !important; letter-spacing: 0 !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-rev .star-rating span::before{
  font-size: 15px !important; letter-spacing: 1px !important;
}

/* 안내 띠 (.dhn) — 테마 화면에서 테마의 a · button 규칙(!important)을 이긴다. 모양은 front.css 가 그린다. */
html body.dhr.dhr-wrap.dhr-wrap .dhn ul{list-style:none!important;margin:0!important}
html body.dhr.dhr-wrap.dhr-wrap .dhn li{margin:0!important;padding:0!important}
html body.dhr.dhr-wrap.dhr-wrap a.dhn__row,html body.dhr.dhr-wrap.dhr-wrap a.dhn__row:hover{color:var(--dh-ink)!important;text-decoration:none!important;background:var(--dh-glass-in)!important;border:0!important;box-shadow:inset 0 0 0 1px var(--dh-glass-in-line),inset 0 1px 0 var(--dh-glass-hi)!important;border-radius:999px!important}
html body.dhr.dhr-wrap.dhr-wrap .dhn__eb,html body.dhr.dhr-wrap.dhr-wrap .dhn__tx,html body.dhr.dhr-wrap.dhr-wrap .dhn__tx strong{margin:0!important;padding:0!important;letter-spacing:0!important;text-transform:none!important;font-family:inherit!important}
html body.dhr.dhr-wrap.dhr-wrap .dhn__tx{color:var(--dh-ink-2)!important}
html body.dhr.dhr-wrap.dhr-wrap .dhn__tx strong{color:var(--dh-ink)!important}
html body.dhr.dhr-wrap.dhr-wrap .dhn__x{background:var(--dh-surface)!important;border:0!important;box-shadow:var(--lift-0,0 1px 2px rgba(17,17,17,.05))!important;color:var(--dh-ink-3)!important;width:34px!important;height:34px!important;border-radius:999px!important;min-width:0!important;padding:0!important;margin:0!important;border-radius:999px!important;line-height:1!important}



/* ── 글자 — 자간 0 · 무게 한 단계 아래 (2026-09-22, 사장님 「전체적인 웹사이트 폰트가 PDF 파일 보는 느낌」) ──
   원인은 글꼴이 아니라 **조판**이었다: Pretendard 는 잘 실리는데 본문까지 음수 자간(−0.01~−0.045em)에
   800·900 굵기가 깔려 인쇄물처럼 빽빽했다. 우리 CSS 의 음수 자간은 전부 0 으로, 굵기는 900→800 · 800→700 ·
   700→600 으로 내렸다. 테마 custom-css 가 `.woocommerce` · 제목 · 버튼에 음수 자간을 `!important` 로
   박아 두므로 여기서 도로 편다 (특이도 (0,4,2)+ · !important). 홈은 테마 CSS 를 안 실어 이 규칙이 필요 없다. */
html body.dhr.dhr-wrap.dhr-wrap,
html body.dhr.dhr-wrap.dhr-wrap.woocommerce, html body.dhr.dhr-wrap.dhr-wrap.woocommerce-page,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce, html body.dhr.dhr-wrap.dhr-wrap .woocommerce-page,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce h1, html body.dhr.dhr-wrap.dhr-wrap .woocommerce h2, html body.dhr.dhr-wrap.dhr-wrap .woocommerce h3,
html body.dhr.dhr-wrap.dhr-wrap .woocommerce a.button,
html body.dhr.dhr-wrap.dhr-wrap .entry-summary .product_title, html body.dhr.dhr-wrap.dhr-wrap .single_add_to_cart_button,
html body.dhr.dhr-wrap.dhr-wrap #reviews #reply-title, html body.dhr.dhr-wrap.dhr-wrap .wd-section-title h2,
html body.dhr.dhr-wrap.dhr-wrap .wd-product-title, html body.dhr.dhr-wrap.dhr-wrap .woocommerce-loop-product__title,
html body.dhr.dhr-wrap.dhr-wrap .wd-search__title, html body.dhr.dhr-wrap.dhr-wrap #vf-trigger-mobile-drawer{ letter-spacing: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap{ line-height: 1.6 !important; -webkit-font-smoothing: auto !important; }

/* 연휴 안내 줄 — 이름표만 주황. 다른 줄과 같은 옷에 색 하나로 「지금 볼 것」을 가른다 */
html body.dhr.dhr-wrap.dhr-wrap .dhn__row--holiday .dhn__eb{ color: var(--dh-accent-deep) !important; }

/* ── /price/ 전 상품 가격표 (2026-09-28) — 값을 묻는 검색에 답하는 표. 흰 표 · 검정 · 숫자는 오른쪽 · 폰은 옆으로 민다 ── */
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl{ max-width: 980px; margin: 0 auto; padding: 0 16px 2.5rem; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl__lead{ font-size: 16px; line-height: 1.6; color: var(--dh-ink-2); background: var(--dh-surface-2); border: 0; border-radius: 16px; padding: .9rem 1rem; margin: 0 0 1rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl__lead b{ color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl__nav{ display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl__nav a{ display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: var(--dh-ink); color: var(--dh-surface); font-weight: 600; font-size: 15px; text-decoration: none; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl__nav a span{ color: var(--dh-accent-soft); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl__sec{ margin: 0 0 2.2rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl__sec h2{ font-size: 22px; font-weight: 700; color: var(--dh-ink); margin: 0 0 .35rem; letter-spacing: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl__sec h2 small{ font-size: 15px; font-weight: 600; color: var(--dh-accent-deep); margin-left: .35rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl__s{ font-size: 15px; color: var(--dh-ink-2); margin: 0 0 .8rem; line-height: 1.6; }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl__scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 14px; }
html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t{ width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; margin: 0; }
html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t th, html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t td{ padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--dh-surface-2); vertical-align: top; }
html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t th{ font-size: 13px; font-weight: 700; color: var(--dh-ink-2); background: var(--dh-ground); white-space: nowrap; }
html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t tr:last-child td{ border-bottom: 0; }
html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t .num{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t td a{ color: var(--dh-ink); text-decoration: none; font-weight: 500; }
html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t td a b{ font-weight: 700; }
html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t td small{ color: var(--dh-ink-3); font-size: 13px; }
html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t td em{ font-style: normal; font-size: 12px; font-weight: 700; color: var(--dh-surface); background: var(--dh-ink-3); border-radius: 999px; padding: .1rem .5rem; margin-left: .3rem; }
html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t tr.is-out td{ color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap table.dhr-pl__t tr.is-out td a{ color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dhr-pl__foot{ font-size: 14px; color: var(--dh-ink-3); margin: 0; }

/* ── 노보 다른 맛 링크 · 노보 FAQ (2026-10-01) ─────────────────────────────── */
html body.dhr.dhr-wrap.dhr-wrap .dhp-flav{ margin: .9rem 0 0; padding: .85rem 0 0; border-top: 1px solid var(--dh-line); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-flav__t{ margin: 0 0 .5rem !important; font-size: 14px; font-weight: 800; color: var(--dh-ink); letter-spacing: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-flav__t small{ margin-left: .4rem; font-size: 12.5px; font-weight: 700; color: var(--dh-accent-warm); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-flav__list{ list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: .4rem; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-flav__list li{ margin: 0 !important; padding: 0 !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-flav__list a{ display: inline-flex; align-items: center; min-height: 36px; padding: 0 .8rem; border: 1px solid var(--dh-line); border-radius: 999px; background: var(--dh-surface); color: var(--dh-ink); font-size: 13.5px; font-weight: 700; text-decoration: none !important; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhp-flav__list a:hover{ border-color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-flav__more{ display: inline-block; margin-top: .6rem; font-size: 13.5px; font-weight: 800; color: var(--dh-accent-warm); text-decoration: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .dha-intro{ margin: 2rem 0 0; padding: clamp(1rem, .8rem + 1.2vw, 1.6rem); background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 20px; }
html body.dhr.dhr-wrap.dhr-wrap .dha-intro__t{ margin: 0 0 .5rem !important; font-size: clamp(18px, 16px + .8vw, 22px); font-weight: 900; color: var(--dh-ink); letter-spacing: 0; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dha-intro p{ margin: 0 !important; font-size: 15px; line-height: 1.7; color: var(--dh-ink-2); word-break: keep-all; }
/* 노보 분류 「종류와 가격」 표 (2026-10-20) — FAQ 위, 표는 /price/ 와 같은 모양 */
html body.dhr.dhr-wrap.dhr-wrap .dha-lineup{ margin: 2rem 0 1rem; padding: clamp(1rem, .8rem + 1.2vw, 1.6rem); background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 20px; }
html body.dhr.dhr-wrap.dhr-wrap .dha-lineup h2{ margin: 0 0 .5rem !important; font-size: clamp(18px, 16px + .8vw, 22px); font-weight: 900; color: var(--dh-ink); letter-spacing: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dha-lineup h2 small{ font-size: 14px; font-weight: 700; color: var(--dh-accent-deep); margin-left: .35rem; }
html body.dhr.dhr-wrap.dhr-wrap .dha-lineup p{ margin: 0 0 .9rem !important; font-size: 15px; line-height: 1.65; color: var(--dh-ink-2); word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dha-lineup .dhr-pl__scroll{ margin: 0 0 .8rem; }
html body.dhr.dhr-wrap.dhr-wrap .dha-lineup table.dhr-pl__t{ min-width: 460px; }
html body.dhr.dhr-wrap.dhr-wrap .dha-lineup .dha-lineup__s{ margin: 0 !important; font-size: 14px; }
html body.dhr.dhr-wrap.dhr-wrap .dha-lineup .dha-lineup__s a{ color: var(--dh-accent-deep); font-weight: 700; }
html body.dhr.dhr-wrap.dhr-wrap .dha-faq{ margin: 2rem 0 1rem; padding: clamp(1rem, .8rem + 1.2vw, 1.6rem); background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 20px; }
html body.dhr.dhr-wrap.dhr-wrap .dha-faq h2{ margin: 0 0 .6rem !important; font-size: clamp(18px, 16px + .8vw, 22px); font-weight: 900; color: var(--dh-ink); letter-spacing: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dha-faq__i{ border-top: 1px solid var(--dh-line); padding: .55rem 0; }
html body.dhr.dhr-wrap.dhr-wrap .dha-faq__i summary{ cursor: pointer; font-size: 15.5px; font-weight: 800; color: var(--dh-ink); line-height: 1.5; padding: .25rem 0; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dha-faq__i p{ margin: .35rem 0 .2rem !important; font-size: 14.5px; line-height: 1.65; color: var(--dh-ink-2); word-break: keep-all; }

/* 2026-10-01 넓은 말 SEO — FAQ 아래 안내 글 링크 */
html body.dhr.dhr-wrap.dhr-wrap .dha-faq__more{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--dh-ink-3)}
html body.dhr.dhr-wrap.dhr-wrap .dha-faq__more a{color:var(--dh-accent-deep);font-weight:700;text-decoration:none}
html body.dhr.dhr-wrap.dhr-wrap .dha-faq__more a:hover{text-decoration:underline}

/* 2026-10-01 안내 글 두 장(/liquid-guide/ · /mtl-vs-dl/) — 테마 페이지 본문(.wd-page__content)의 링크 · 표.
   링크가 본문과 같은 색이라 눌리는지 몰랐고, 표는 테두리 없이 폭 절반에 서 있었다. */
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account):not(.woocommerce-cart):not(.woocommerce-checkout) .wd-page__content a:not(.btn){
  color: var(--dh-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .wd-page__content table{
  width: 100%; max-width: 100%; border-collapse: collapse; margin: .6rem 0 1.4rem; font-size: 15px; line-height: 1.5;
  border: 1px solid var(--dh-line); border-radius: 12px; overflow: hidden;
}
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .wd-page__content th,
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .wd-page__content td{
  padding: 10px 12px; border-bottom: 1px solid var(--dh-line); vertical-align: top; text-align: left; word-break: keep-all;
}
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .wd-page__content th{ background: var(--dh-ground); color: var(--dh-ink); font-weight: 800; }
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .wd-page__content td:first-child{ color: var(--dh-ink); white-space: nowrap; }
html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .wd-page__content tr:last-child td{ border-bottom: 0; }
@media (max-width: 599px){
  html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .wd-page__content table{ font-size: 14px; }
  html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .wd-page__content th,
  html body.dhr.dhr-wrap.dhr-wrap.page:not(.woocommerce-account) .wd-page__content td{ padding: 8px 8px; }
}

/* ══ 맛 고르기 타일 (.dhpk) — 묶음 상품 구매 폼 안, 옛 옵션 UI 의 맛 칩 카드를 대신 보인다 (2026-10-07) ══
   폼 안이라 테마 규칙이 세다 — 한 단계 올린 선택자 + !important. 흰 카드 · 검정 · 파랑 포인트, 세로 선 없음, 모서리 16/999 */
html body.dhr.dhr-wrap.dhr-wrap .dhx-card.dhpk-src{ display: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk{ margin: 10px 0 14px; padding: 14px; border-radius: 16px; background: var(--dh-surface); box-shadow: 0 0 0 1px var(--dh-line); font-family: inherit; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__t{ display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__no{ display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--dh-ink); color: var(--dh-surface); font-size: 12.5px; font-weight: 800; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__cnt{ font-size: 14px; font-weight: 800; color: var(--dh-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk.is-done .dhpk__cnt{ color: var(--dh-accent); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__bar{ height: 6px; margin: 10px 0 12px; border-radius: 999px; background: var(--dh-surface-2); overflow: hidden; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__bar i{ display: block; height: 100%; width: 0; border-radius: 999px; background: var(--dh-accent); transition: width .32s cubic-bezier(.23,1,.32,1); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px){ html body.dhr.dhr-wrap.dhr-wrap .dhpk__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__tile{ position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 10px 8px; border-radius: 14px; background: var(--dh-surface); box-shadow: 0 0 0 1.5px var(--dh-line); cursor: pointer; user-select: none; -webkit-user-select: none; transition: box-shadow .2s, background .2s, transform .42s cubic-bezier(.23,1,.32,1); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__tile.is-on{ box-shadow: 0 0 0 2px var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__tile:active{ transform: scale(.97); transition-duration: .09s; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__name{ font-size: 14px; font-weight: 700; color: var(--dh-ink); line-height: 1.3; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__q{ margin-top: auto; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; height: 40px; border-radius: 999px; background: var(--dh-surface-2); overflow: hidden; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__b{ display: grid; place-items: center; height: 40px; font-size: 20px; font-weight: 700; color: var(--dh-ink); cursor: pointer; touch-action: none; transition: opacity .15s; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__b.is-off{ opacity: .25; cursor: default; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__b:focus-visible{ outline: 2px solid var(--dh-accent); outline-offset: -2px; border-radius: 999px; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__n{ text-align: center; font-size: 16px; font-weight: 800; color: var(--dh-ink); font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__tile.is-on .dhpk__n{ color: var(--dh-accent); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__n.is-tick{ animation: dhpk-tick .36s cubic-bezier(.23,1,.32,1); }
@keyframes dhpk-tick{ 0%{ filter: blur(2px); opacity: .4; transform: translateY(3px); } 100%{ filter: blur(0); opacity: 1; transform: none; } }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__quick{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__chip{ display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--dh-ink); color: var(--dh-surface); font-size: 13.5px; font-weight: 800; cursor: pointer; user-select: none; transition: opacity .15s, transform .42s cubic-bezier(.23,1,.32,1); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__chip--ghost{ background: var(--dh-surface); color: var(--dh-ink-2); box-shadow: 0 0 0 1.5px var(--dh-line); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__chip.is-off{ opacity: .35; cursor: default; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__chip:active{ transform: scale(.97); transition-duration: .09s; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__hint{ margin-top: 10px; font-size: 13.5px; color: var(--dh-ink-3); font-weight: 600; transition: color .2s; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk.is-done .dhpk__hint{ color: var(--dh-accent); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__hint.is-flash{ color: var(--dh-ink); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk.is-locked .dhpk__grid{ opacity: .55; }
/* 대량 상품(33 · 55병) — 맛 칸은 「+10」 단위, 서비스 칸은 맛마다 1병 (2026-10-09) */
/* 고르기 칸 전부(10병 맛 칸 · 서비스 칸 · 일반 묶음) — 「−10 · 10 · +10」을 한 알약에 넣으면 3칸 화면에서 가운데 숫자가 20px 밖에 안 남아 「1 / 0」으로 꺾였다.
   숫자를 위 한 줄(병 수 · 크게), 버튼 둘을 아래 반반으로 나눈다. 버튼은 44px (터치 타깃), 누르면 .97 로 눌린다 */
html body.dhr.dhr-wrap.dhr-wrap .dhpk .dhpk__q{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "n n" "m p"; gap: 6px; height: auto; border-radius: 0; background: none; overflow: visible; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk .dhpk__n{ grid-area: n; text-align: left; font-size: 20px; line-height: 1.1; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk .dhpk__n::after{ content: "병"; margin-left: 2px; font-size: 13px; font-weight: 700; color: var(--dh-ink-3); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk .dhpk__b{ height: 44px; border-radius: 999px; background: var(--dh-surface-2); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; transition: opacity .15s, transform .16s cubic-bezier(.23,1,.32,1); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk .dhpk__b--m{ grid-area: m; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk .dhpk__b--p{ grid-area: p; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk--lot .dhpk__b{ font-size: 14px; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk .dhpk__b:not(.is-off):active{ transform: scale(.97); }
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhpk .dhpk__b, html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .dhpk .dhpk__b{ background: var(--dh-glass-in); box-shadow: inset 0 0 0 1px var(--dh-glass-in-line); }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__n, html body.dhr.dhr-wrap.dhr-wrap .dhpk__b{ white-space: nowrap; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk__t b{ white-space: nowrap; }
html body.dhr.dhr-wrap.dhr-wrap .dhpk--svc{ margin-top: 0; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-gauge.dhr-off{ display: none !important; }
@media (prefers-reduced-motion: reduce){ html body.dhr.dhr-wrap.dhr-wrap .dhpk__n.is-tick{ animation: none; } html body.dhr.dhr-wrap.dhr-wrap .dhpk__tile, html body.dhr.dhr-wrap.dhr-wrap .dhpk__chip{ transition: none; } }

/* ③ 목록 · 카드(2026-10-07) — 상세 추천(`li.product > .card`)에서만 「19」 축소가 졌다: 테마 style.css 와 사장님 추가 CSS 가
   `ul.products li.product img` 에 width:100% · height:100% · aspect-ratio 를 !important 로 건다. 같은 세기로 되돌린다 */
html body.dhr.dhr-wrap.dhr-wrap ul.products li.product .card.is-gated .fig img{ width: 46% !important; height: 46% !important; aspect-ratio: auto !important; object-fit: contain !important; padding: 0 !important; margin: auto !important; background: none !important; }

/* 잠긴 구매 버튼(아직 다 안 고름) — 테마가 #E4E4E7 위 #A1A1AA(1.9:1) · 결제하기는 불투명도 .42 로 둔다.
   라이트 · 다크 모두 토큰 면 위 캡션색으로 (라이트 4.9:1 · 다크 5.2:1). 글자 · 동작은 그대로 (2026-10-07).
   사장님 스니펫 인라인 `.woocommerce div.product form.cart .single_add_to_cart_button:disabled`(0,5,2) 가 뒤에 오므로 `form.cart .vf-drawer-actions` 를 더해 (0,7,3) 으로 이긴다 */
html body.dhr.dhr-wrap.dhr-wrap form.cart .vf-drawer-actions .single_add_to_cart_button[disabled],
html body.dhr.dhr-wrap.dhr-wrap form.cart .vf-drawer-actions .single_add_to_cart_button.vf-btn-disabled,
html body.dhr.dhr-wrap.dhr-wrap form.cart .single_add_to_cart_button[disabled],
html body.dhr.dhr-wrap.dhr-wrap form.cart .vf-drawer-actions .wd-direct-checkout-btn[disabled],
html body.dhr.dhr-wrap.dhr-wrap form.cart .vf-drawer-actions .wd-direct-checkout-btn.vf-btn-disabled,
html body.dhr.dhr-wrap.dhr-wrap form.cart .wd-direct-checkout-btn[disabled]{
  background: var(--dh-surface-2) !important; color: var(--dh-ink-3) !important; opacity: 1 !important; border-color: transparent !important; box-shadow: none !important; filter: none !important;
}
/* 옛 옵션 UI 의 수량 스테퍼 — 버튼 · 숫자 칸에 #fff 가 못 박혀 다크에서 흰 네모 위 흰 숫자였다 (2026-10-07).
   면은 토큰, 숫자는 ink. 값 · 버튼 동작은 그대로 */
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty button{ background: var(--dh-surface) !important; color: var(--dh-ink) !important; border-color: var(--dh-line-strong) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty button:hover{ background: var(--dh-surface-2) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty__n{ background: var(--dh-surface) !important; color: var(--dh-ink) !important; border-color: var(--dh-line-strong) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty--mini button,
html body.dhr.dhr-wrap.dhr-wrap .dhx .dhx-qty--mini .dhx-qty__n{ background: var(--dh-surface) !important; color: var(--dh-ink) !important; }

/* ④ 담기 완료 막 — 테마의 button · h2 · p 규칙(!important)이 덮지 않게 못 박는다 (모양은 front.css) */
html body.dhr.dhr-wrap.dhr-wrap .dhd__btn{ background: var(--dh-primary) !important; color: var(--dh-primary-ink) !important; border: 0 !important; border-radius: 999px !important; min-height: 48px !important; height: auto !important; width: 100% !important; padding: 0 1.2rem !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.2 !important; box-shadow: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhd__skip{ background: transparent !important; color: var(--dh-ink-2) !important; border: 0 !important; border-radius: 999px !important; min-height: 40px !important; height: auto !important; width: auto !important; padding: 0 1rem !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: none !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhd__t{ margin: 4px 0 0 !important; padding: 0 !important; font-size: 22px !important; font-weight: 900 !important; color: var(--dh-ink) !important; }
html body.dhr.dhr-wrap.dhr-wrap .dhd__s{ margin: 0 !important; padding: 0 !important; font-size: 14px !important; color: var(--dh-ink-2) !important; }

/* ④-2 유리 안쪽 (2026-10-08, 사장님 「칸 색상이 글래스모피즘과 안 어울려」) — 시트 · 서랍 안의 옵션 상자 · 선택창 · 스테퍼 · 맛 타일은
   불투명 면색이 아니라 반투명 흰 틴트(--dh-glass-in) + 밝은 테두리로. 유리 위에 종이 상자를 올리지 않는다. 글자색은 그대로 */
html body.dhr.dhr-wrap.dhr-wrap.single-product .dhp-card--form.is-sheet .wd-option-item, html body.dhr.dhr-wrap.dhr-wrap.single-product .dhp-card--form.is-docked .wd-option-item{
  background: var(--dh-glass-in) !important; border-color: var(--dh-glass-in-line) !important; box-shadow: inset 0 1px 0 var(--dh-glass-hi);
}
html body.dhr.dhr-wrap.dhr-wrap.single-product .dhp-card--form.is-sheet .wd-option-qty, html body.dhr.dhr-wrap.dhr-wrap.single-product .dhp-card--form.is-docked .wd-option-qty{
  background: var(--dh-glass-in) !important; border-color: var(--dh-glass-in-line) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhsel__btn, html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .dhsel__btn{
  background: var(--dh-glass-in); border-color: var(--dh-glass-in-line); box-shadow: inset 0 1px 0 var(--dh-glass-hi);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet form.cart .quantity, html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked form.cart .quantity{
  background: var(--dh-glass-in) !important; border-color: var(--dh-glass-in-line) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhx, html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .dhx{
  --dhx-bg: var(--dh-glass-in); --dhx-ground: var(--dh-glass-in); --dhx-line: var(--dh-glass-in-line);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhx .dhx-bundle, html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .dhx .dhx-bundle,
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhx-bundle__mark, html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .dhx-bundle__mark,
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhx-chip, html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .dhx-chip,
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhx-qty button, html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .dhx-qty button,
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhx-qty__n, html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .dhx-qty__n{
  background: var(--dh-glass-in) !important; border-color: var(--dh-glass-in-line) !important;
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhpk, html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .dhpk{
  background: var(--dh-glass-in); box-shadow: 0 0 0 1px var(--dh-glass-in-line), inset 0 1px 0 var(--dh-glass-hi);
}
html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-sheet .dhpk__tile, html body.dhr.dhr-wrap.dhr-wrap .dhp-card--form.is-docked .dhpk__tile{
  background: var(--dh-glass-in); box-shadow: 0 0 0 1.5px var(--dh-glass-in-line);
}
/* 장바구니 서랍 발(footer 요소) — 테마가 폰에서 footer 에 흰 배경을 못 박아 유리 서랍 아래가 종이처럼 보였다 (2026-10-08) */
html body.dhr.dhr-wrap.dhr-wrap footer.dhc__foot{ background: transparent !important; border-top: 1px solid var(--dh-glass-line) !important; }

/* 친구 추천 카드 — 마이페이지 첫 화면 (includes/referral.php). 흰 카드 · 코드는 크게, 복사 버튼은 알약 */
html body.dhr.dhr-wrap.dhr-wrap .dhr-refcard{background:var(--dh-surface) !important;border:1px solid var(--dh-line) !important;border-radius:20px !important;padding:1.1rem 1.1rem 1rem !important;margin:0 0 1rem !important;box-shadow:0 1px 2px rgba(17,17,17,.04)}
html body.dhr.dhr-wrap.dhr-wrap .dhr-refcard__t{font-size:1.05rem !important;font-weight:800 !important;margin:0 0 .3rem !important;color:var(--dh-ink) !important}
html body.dhr.dhr-wrap.dhr-wrap .dhr-refcard__s{font-size:.875rem !important;line-height:1.55 !important;color:var(--dh-ink-2) !important;margin:0 0 .8rem !important;word-break:keep-all}
html body.dhr.dhr-wrap.dhr-wrap .dhr-refcard__row{display:flex;align-items:center;gap:.6rem;padding:.6rem 0;border-top:1px solid var(--dh-line);min-width:0}
html body.dhr.dhr-wrap.dhr-wrap .dhr-refcard__k{flex:0 0 3.2rem;font-size:.8125rem;color:var(--dh-ink-3);font-weight:600}
html body.dhr.dhr-wrap.dhr-wrap .dhr-refcard__code{flex:1 1 auto;font-size:1.35rem;font-weight:800;letter-spacing:.12em !important;color:var(--dh-ink);font-variant-numeric:tabular-nums}
html body.dhr.dhr-wrap.dhr-wrap .dhr-refcard__link{flex:1 1 auto;min-width:0;font-size:.8125rem;color:var(--dh-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body.dhr.dhr-wrap.dhr-wrap .dhr-refcard__copy{flex:0 0 auto;min-height:40px !important;padding:0 .95rem !important;border-radius:999px !important;border:0 !important;background:var(--dh-ink) !important;color:var(--dh-surface) !important;font-size:.8125rem !important;font-weight:700 !important;cursor:pointer;transition:transform 160ms ease-out}
html body.dhr.dhr-wrap.dhr-wrap .dhr-refcard__copy:active{transform:scale(.97)}
html body.dhr.dhr-wrap.dhr-wrap .dhr-refcard__copy.is-done{background:var(--dh-accent) !important;color:var(--dh-accent-ink) !important}

/* ── 가입 쿠폰 (2026-10-22) — 장바구니 · 결제의 안내 한 줄과 마이페이지 카드 ───────── */
html body.dhr.dhr-wrap.dhr-wrap .dhr-wc{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 .75rem;padding:.8rem 1rem;border-radius:16px;background:var(--dh-accent-soft);color:var(--dh-ink);min-width:0}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wc__t{display:flex;flex-direction:column;gap:.15rem;min-width:0}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wc__t b{font-size:.95rem;font-weight:800;color:var(--dh-ink)}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wc__t span{font-size:.8125rem;line-height:1.45;color:var(--dh-ink-2);word-break:keep-all}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wc__b{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border-radius:999px;background:var(--dh-accent);color:var(--dh-accent-ink);font-size:.875rem;font-weight:800;cursor:pointer;white-space:nowrap;transition:transform .16s ease-out}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wc__b:active{transform:scale(.97)}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wc__b:focus-visible{outline:none;box-shadow:0 0 0 4px var(--dh-ring)}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wc__gap,html body.dhr.dhr-wrap.dhr-wrap .dhr-wc__ok{flex:0 0 auto;font-size:.8125rem;font-weight:700;color:var(--dh-accent-deep);white-space:nowrap}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wcard{display:flex;flex-direction:column;gap:.35rem;background:var(--dh-surface) !important;border:1px solid var(--dh-line) !important;border-radius:20px !important;padding:1.1rem !important;margin:0 0 1rem !important}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wcard__eb{font-size:.8125rem;font-weight:700;color:var(--dh-accent-deep)}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wcard__amt{font-size:1.6rem;font-weight:900;color:var(--dh-ink);line-height:1.1}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wcard__s{font-size:.875rem;line-height:1.5;color:var(--dh-ink-2);word-break:keep-all}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wcard__row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.25rem 0}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wcard__code{font-size:1.05rem;font-weight:800;letter-spacing:.08em !important;padding:.35rem .7rem;border-radius:10px;background:var(--dh-surface-2);color:var(--dh-ink)}
html body.dhr.dhr-wrap.dhr-wrap .dhr-wcard__copy{min-height:40px;padding:0 1rem;border-radius:999px;border:1px solid var(--dh-line-strong);background:transparent;color:var(--dh-ink);font-weight:700;font-size:.8125rem;cursor:pointer}
@media (max-width:479px){html body.dhr.dhr-wrap.dhr-wrap .dhr-wc{flex-direction:column;align-items:stretch}html body.dhr.dhr-wrap.dhr-wrap .dhr-wc__b{justify-content:center}}

/* 브랜드 페이지 격자 위 묶음 한 장 (2026-10-30, 펠릭스부터) — Brand\lead_card() */
html body.dhr.dhr-wrap.dhr-wrap a.dha-lead{ display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "eb eb" "t p" "s s" "go go"; gap: .3rem .8rem; margin: 0 0 1.2rem; padding: clamp(1rem, .8rem + 1vw, 1.4rem); background: var(--dh-ink); color: var(--dh-surface); border-radius: 20px; text-decoration: none !important; box-shadow: 0 10px 28px rgba(16,24,40,.14); transition: transform 160ms ease-out; }
html body.dhr.dhr-wrap.dhr-wrap a.dha-lead:active{ transform: scale(.98); }
html body.dhr.dhr-wrap.dhr-wrap .dha-lead__eb{ grid-area: eb; justify-self: start; padding: .15rem .6rem; border-radius: 999px; background: var(--dh-accent); color: var(--dh-accent-ink); font-size: 13px; font-weight: 800; }
html body.dhr.dhr-wrap.dhr-wrap .dha-lead__t{ grid-area: t; align-self: end; font-size: clamp(19px, 17px + .8vw, 24px); font-weight: 900; color: var(--dh-surface); word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dha-lead__p{ grid-area: p; align-self: end; font-size: clamp(19px, 17px + .8vw, 24px); font-weight: 900; color: var(--dh-surface); white-space: nowrap; font-variant-numeric: tabular-nums; }
html body.dhr.dhr-wrap.dhr-wrap .dha-lead__s{ grid-area: s; font-size: 14px; color: var(--dh-surface); opacity: .8; word-break: keep-all; }
html body.dhr.dhr-wrap.dhr-wrap .dha-lead__go{ grid-area: go; margin-top: .5rem; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; background: var(--dh-surface); color: var(--dh-ink); font-size: 15px; font-weight: 800; }