/* 홈 — 데모(design/demo-src/site.css)의 홈 구성을 실제 사이트로 옮긴 것. body.dhr 아래에서만 적용된다. */
/* 자간 0 · 글자 다듬기 끄기 (2026-09-22, 사장님 「전체 폰트가 PDF 파일 보는 느낌」). 글꼴은 Pretendard 가 잘 실리고 있었다 —
   조판이 문제였다. 사장님 Customizer 「추가 CSS」(DB · wp-custom-css) 가 body · 버튼 · 입력칸에 -0.01em, 제목 전부에 -0.025em,
   antialiased 를 !important 로 깔고, 우리 CSS 도 -0.01~-0.045em 을 여기저기 썼다. 그 추가 CSS 는 wp_head 끝에 나와
   우리보다 뒤이므로 특이도로 이긴다 — (0,2,1) !important. 양수 자간(눈썹 글자)은 파일 끝에서 같은 힘으로 되살린다. */
html body.dhr,html body.dhr *{letter-spacing:0 !important;-webkit-font-smoothing:auto !important;-moz-osx-font-smoothing:auto !important}
body.dhr{margin:0;background:var(--dh-ground);color:var(--dh-ink);font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
 font-size:16px;line-height:1.6;word-break:keep-all;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
@media(min-width:880px){body.dhr{padding-bottom:0}}
.dhr *,.dhr *::before,.dhr *::after{box-sizing:border-box}
.dhr h1,.dhr h2,.dhr h3{margin:0;line-height:1.25;letter-spacing:0;font-weight:700;text-wrap:balance}
.dhr p{margin:0}
.dhr a{color:inherit;text-decoration:none}
.dhr button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
.dhr svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.dhr img{max-width:100%;height:auto;display:block}
.dhr :focus-visible{outline:2px solid var(--dh-accent-deep);outline-offset:2px}
.dhr .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1.1rem,.6rem + 2vw,2.5rem)}
.dhr .n{font-variant-numeric:tabular-nums}
.dhr .center{text-align:center}

/* 테마가 wp_body_open 으로 찍는 모바일 헤더·드로어는 홈에서 숨긴다. 우리 헤더가 그 자리다. */
body.dhr .wd-mobile-header-custom,body.dhr .wd-mobile-drawer,body.dhr .wd-mobile-drawer-backdrop{display:none!important}
body.dhr .lg img{height:28px;width:auto;display:block}

/* 유틸 바 · 헤더 */
.dhr .util{display:none;background:var(--dh-surface);border-bottom:1px solid var(--dh-line);font-size:13px;font-weight:600;color:var(--dh-ink-2)}
@media(min-width:880px){.dhr .util{display:block}}
.dhr .util .wrap{display:flex;gap:1.2rem;min-height:34px;align-items:center}
.dhr .util .r{margin-left:auto;color:var(--dh-ink-3)}
/* 유리 — 헤더 · 탭바에만 (2026-10-06 사장님 승인). 상품 카드는 여전히 불투명이다 */
.dhr .gnb{position:sticky;top:0;z-index:30;background:var(--dh-glass);border-bottom:1px solid var(--dh-glass-line);box-shadow:inset 0 1px 0 var(--dh-glass-hi);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
@media(prefers-reduced-transparency:reduce){.dhr .gnb{background:var(--dh-surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
.dhr .tgl .moon{display:none} html[data-theme="dark"] .dhr .tgl .sun{display:none} html[data-theme="dark"] .dhr .tgl .moon{display:block}
/* 로그인한 관리자에게는 워드프레스 관리 바가 화면 위에 고정으로 붙는다. 그대로 두면
   스크롤할 때 우리 헤더가 그 아래로 들어가 아랫동이만 보인다.
   관리 바는 783px 이상에서 32px, 601–782px 에서 46px 로 고정이고, 600px 이하에서는
   absolute 라 같이 스크롤되므로 offset 이 필요 없다. */
@media(min-width:601px){body.admin-bar .gnb{top:46px}}
@media(min-width:783px){body.admin-bar .gnb{top:32px}}
.dhr .gnb-in{display:flex;align-items:center;gap:.6rem;height:56px}
.dhr .lg{display:flex;align-items:center;gap:.4rem;font-weight:900;font-size:17px;letter-spacing:0;min-height:44px;white-space:nowrap}
.dhr .lg .g{width:20px;height:20px;border-radius:50% 50% 50% 4px;background:var(--dh-ink)}
.dhr .hs{display:none;flex:1 1 auto;max-width:520px;margin:0 1rem;align-items:center;gap:.5rem;background:var(--dh-glass-in);box-shadow:inset 0 0 0 1px var(--dh-glass-in-line),inset 0 1px 0 var(--dh-glass-hi);border-radius:999px;min-height:42px;padding:0 .5rem 0 1rem;color:var(--dh-ink-3)}
@media(min-width:880px){.dhr .hs{display:flex}}
.dhr .hs input{flex:1 1 auto;min-width:0;border:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--dh-ink);min-height:40px;padding:0}
.dhr .hs input:focus{outline:none}
.dhr .hs:focus-within{box-shadow:inset 0 0 0 1.5px var(--dh-accent),0 0 0 4px var(--dh-ring);background:var(--dh-glass-in)}
.dhr .hs button{width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--dh-ink)}
.dhr .hs svg{width:20px;height:20px}
.dhr .dnav{display:none;gap:.2rem}
@media(min-width:880px){.dhr .dnav{display:flex}}
.dhr .dnav a{font-size:14px;color:var(--dh-ink-2);font-weight:600;padding:.5rem .7rem;border-radius:10px;min-height:44px;display:flex;align-items:center;white-space:nowrap}
.dhr .dnav a:hover{background:var(--dh-glass-in);box-shadow:inset 0 0 0 1px var(--dh-glass-in-line);color:var(--dh-ink)}
.dhr .sp{margin-left:auto;display:flex;gap:.1rem;align-items:center}
.dhr .gi{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;color:var(--dh-ink)}
.dhr .gi:hover{background:var(--dh-glass-in);box-shadow:inset 0 0 0 1px var(--dh-glass-in-line)}
.dhr .gi svg{width:23px;height:23px;stroke-width:2.1}
.dhr .gi .b{position:absolute;top:5px;right:4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--dh-accent);color:var(--dh-accent-ink);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.dhr .gi .lbl{display:none}
@media(min-width:880px){.dhr .gi.wide{width:auto;padding:0 .9rem 0 .7rem;gap:.4rem;border:0;background:var(--dh-glass-in);box-shadow:inset 0 0 0 1px var(--dh-glass-in-line),inset 0 1px 0 var(--dh-glass-hi);border-radius:999px;height:40px}.dhr .gi .lbl{display:inline;font-size:14px;font-weight:700}.dhr .gi.wide .b{position:static;margin-left:.1rem}}
.dhr .msearch-btn{display:flex}
@media(min-width:880px){.dhr .msearch-btn{display:none}}
.dhr .who{width:44px;height:44px;border-radius:999px;background:var(--dh-accent-soft);color:var(--dh-accent-deep);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-left:.25rem}
.dhr .who.in{background:var(--dh-ink);color:var(--dh-surface)}

/* 아래 탭 (모바일) */
.dhr .tabs{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:35;display:flex;padding:6px 8px;border-radius:999px;background:var(--dh-glass);border:1px solid var(--dh-glass-line);box-shadow:inset 0 1px 0 var(--dh-glass-hi),var(--dh-shadow);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
@media(prefers-reduced-transparency:reduce){.dhr .tabs{background:var(--dh-surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(min-width:880px){.dhr .tabs{display:none}}
.dhr .tabs a{flex:1 1 0;height:56px;border-radius:999px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--dh-ink-3);font-weight:700;transition:transform .16s cubic-bezier(.22,1,.36,1)}
.dhr .tabs a:active{transform:scale(.94)}
.dhr .tabs a svg{width:23px;height:23px;stroke-width:1.9}
.dhr .tabs a.on{color:var(--dh-accent-deep)}
.dhr .tabs a.on svg{stroke-width:2.3}

/* 공통 */
.dhr .sec{padding:clamp(2.2rem,1.6rem + 2.4vw,3.6rem) 0 0}
.dhr .sec-h{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.9rem}
.dhr .sec-h h2{font-size:clamp(1.35rem,1.15rem + 1vw,1.75rem)}
.dhr .sec-h .sub{font-size:14px;color:var(--dh-ink-3);font-weight:500}
.dhr .sec-h .lk{margin-left:auto}
.dhr .lk{font-size:15px;color:var(--dh-accent-deep);font-weight:700;display:inline-flex;align-items:center;gap:.1rem;min-height:44px}
.dhr .lk svg{width:18px;height:18px;stroke-width:2.4}
.dhr .big2{font-size:clamp(1.7rem,1.3rem + 2vw,2.5rem);font-weight:800;letter-spacing:0}
.dhr .lead{font-size:16px;color:var(--dh-ink-2);line-height:1.6;max-width:36rem;margin:.5rem auto 0}
.dhr .btn{min-height:48px;border-radius:999px;padding:0 1.35rem;font-size:16px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;letter-spacing:0;transition:filter 160ms,transform 160ms;line-height:1}
.dhr .btn svg{width:20px;height:20px;stroke-width:2.4}
.dhr .btn:active{transform:scale(.98)}
.dhr .btn-p{background:var(--dh-accent);color:var(--dh-accent-ink)}
.dhr .btn-d{background:var(--dh-ink);color:var(--dh-surface)}
.dhr .btn-w2{background:var(--dh-surface);color:var(--dh-ink)}
.dhr .btn-sm{min-height:42px;font-size:14px;padding:0 1rem}

/* 모바일 검색 · 히어로 2장 */
.dhr .msearch{display:flex;align-items:center;gap:.6rem;background:var(--dh-surface);border-radius:999px;min-height:50px;padding:0 1rem;margin:.9rem 0 .2rem;color:var(--dh-ink-3);font-size:15.5px;font-weight:500}
.dhr .msearch svg{width:21px;height:21px}
@media(min-width:880px){.dhr .msearch{display:none}}
.dhr .hero2{display:grid;gap:.9rem;grid-template-columns:1fr;padding-top:1rem}
.dhr .hero2 > *{min-width:0}
@media(min-width:880px){.dhr .hero2{grid-template-columns:1.55fr 1fr;padding-top:1.4rem}}
.dhr .hcard{display:flex;border-radius:28px;overflow:hidden;position:relative;min-height:250px;transition:transform 200ms}
.dhr .hcard:hover{transform:translateY(-3px)}
.dhr .hcard-a{background:var(--dh-surface);flex-direction:column}
@media(min-width:640px){.dhr .hcard-a{flex-direction:row;align-items:center}}
.dhr .htxt{padding:1.6rem 1.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;flex:1 1 auto;min-width:0}
@media(min-width:880px){.dhr .htxt{padding:2.2rem}}
.dhr .eb2{font-size:14px;font-weight:800;color:var(--dh-accent-deep);letter-spacing:.01em}
.dhr .hcard-a .hcard-t{margin:0;font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem);font-weight:900;letter-spacing:0;line-height:1.12}
/* 홈 대표 제목 — 화면에서만 감춘다 (검색엔진 · 스크린리더는 읽는다) */
.dhr .dhr-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dhr .htxt p{font-size:15px;color:var(--dh-ink-2);line-height:1.6;max-width:32ch}
.dhr .htxt .btn{margin-top:.4rem}
.dhr .hart{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 1.5rem 1.5rem}
@media(min-width:640px){.dhr .hart{padding:1.5rem 1.8rem 1.5rem 0}}
.dhr .hart .box{width:min(56vw,260px);aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:var(--dh-surface-2);display:flex;align-items:center;justify-content:center;transform:rotate(-5deg);box-shadow:0 30px 50px -30px rgba(0,0,0,.45)}
.dhr .hart .box img{width:100%;height:100%;object-fit:cover}
.dhr .hcard-b{background:var(--dh-accent-soft);color:var(--dh-ink)}
.dhr .hcard-b h2{font-size:clamp(1.55rem,1.2rem + 1.4vw,2.1rem);font-weight:900;letter-spacing:0;line-height:1.12}
.dhr .hcard-b h2 em{font-style:normal;color:var(--dh-accent-deep)}

/* 오늘의 특가 */
.dhr .deals{background:var(--dh-surface-2);border-radius:28px;padding:1.3rem 1.2rem .4rem;margin-top:1.4rem}
@media(min-width:880px){.dhr .deals{padding:1.6rem 1.8rem .6rem}}
.dhr .deals-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}
.dhr .deals-h h2{font-size:22px}
.dhr .ends{background:var(--dh-ink);color:var(--dh-surface);font-size:13.5px;font-weight:600;padding:.45rem .9rem;border-radius:999px;white-space:nowrap}
.dhr .ends b{font-weight:800;margin-left:.2rem}
.dhr .scroller{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.3rem 0 1rem;-webkit-overflow-scrolling:touch}
.dhr .scroller::-webkit-scrollbar{display:none}
.dhr .scroller .card{flex:0 0 auto;width:min(62vw,230px);scroll-snap-align:start}

/* 상품 카드 */
.dhr .grid{display:grid;gap:.85rem;grid-template-columns:repeat(2,1fr);text-align:left}
@media(min-width:640px){.dhr .grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.dhr .grid{grid-template-columns:repeat(4,1fr)}}
.dhr .card{background:var(--dh-surface);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform 200ms,box-shadow 200ms;text-align:left}
.dhr .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(17,17,17,.35)}
.dhr .card .fig{aspect-ratio:1/1;position:relative;display:block;margin:.6rem;border-radius:16px;overflow:hidden;background:var(--dh-surface-2)}
.dhr .card .fig img{width:100%;height:100%;object-fit:cover}
.dhr .card.is-out .fig{filter:saturate(.25) opacity(.7)}
/* 비로그인 — 「19」 가림 위의 한 줄. 불투명 · 사진 밑변에 붙는 띠. 왜인지는 .dhr-gate 가 한 번만 말한다 */
.dhr .card .fig .lock{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;background:var(--dh-ink);color:var(--dh-surface);font-size:13px;font-weight:700;line-height:1.3;text-align:center;padding:.45rem .5rem;letter-spacing:0;white-space:normal;word-break:keep-all}
.dhr .dhr-gate{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;margin:.25rem 0 1.1rem;padding:.8rem 1rem;background:var(--dh-surface);border:0;border-radius:16px;box-shadow:var(--lift-0,0 1px 2px rgba(17,17,17,.05));font-size:15px;line-height:1.55;color:var(--dh-ink-2);word-break:keep-all}
.dhr .dhr-gate b{color:var(--dh-ink)}
.dhr .dhr-gate a{color:var(--dh-accent-deep);font-weight:800;text-decoration:none;white-space:nowrap}
.dhr .dhr-gate a::after{content:" →"}
.dhr .dhr-gate a:hover,.dhr .dhr-gate a:focus-visible{text-decoration:underline}
/* 브랜드 페이지 소개 한 줄 — 제목 아래, 글자로 (검색엔진이 읽는다) */
.dhr .dhr-brandintro{margin:.35rem 0 0;max-width:64ch;font-size:15px;line-height:1.6;color:var(--dh-ink-2);word-break:keep-all}
.dhr .eb{position:absolute;top:.7rem;left:.7rem;font-size:13px;font-weight:800;letter-spacing:0;color:var(--dh-accent-deep);background:rgba(255,255,255,.92);padding:.25rem .55rem;border-radius:8px;z-index:1}
.dhr .eb.out{color:var(--dh-ink-3)}.dhr .eb.sale{color:var(--dh-accent-deep)}.dhr .eb.best{color:#9F1239}
.dhr .card .bd{padding:.2rem .95rem 1rem;display:flex;flex-direction:column;gap:.25rem;flex:1 1 auto}
.dhr .card .nm{font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.dhr .meta{display:flex;align-items:center;gap:.3rem;font-size:13.5px;color:var(--dh-ink-3);font-weight:500;flex-wrap:wrap}
.dhr .meta b{color:var(--dh-ink);font-weight:700}
.dhr .meta .brand{color:var(--dh-ink-2);font-weight:700}
.dhr .star{color:#F59E0B;font-size:13px}
.dhr .pr{margin-top:auto;padding-top:.35rem;display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap}
.dhr .pr b{font-size:18px;font-weight:800;letter-spacing:0}
.dhr .pr s{color:var(--dh-ink-3);font-weight:500;font-size:13.5px;margin-right:.35rem}
.dhr .pr small{font-size:13px;color:var(--dh-ink-3);font-weight:500}

/* 필터 알약 */
.dhr .fbar{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;align-items:center;margin:1.4rem 0 1.2rem}
.dhr .fsel{position:relative;display:inline-flex;align-items:center;gap:.35rem;min-height:46px;padding:0 .9rem 0 1.05rem;border-radius:999px;background:var(--dh-surface);font-size:15px;font-weight:700;cursor:pointer;border:1.5px solid transparent}
.dhr .fsel:hover{border-color:var(--dh-line-strong)}
.dhr .fsel svg{width:18px;height:18px;transform:rotate(90deg);color:var(--dh-ink-3)}
.dhr .fsel select{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.dhr .fsel:focus-within{outline:2px solid var(--dh-accent-deep);outline-offset:2px}

/* 브랜드 스토어 */
.dhr .bgrid{display:grid;gap:.9rem;grid-template-columns:1fr;margin-top:1.4rem;text-align:left}
@media(min-width:760px){.dhr .bgrid{grid-template-columns:repeat(3,1fr)}}
.dhr .bcard{background:var(--dh-surface);border-radius:22px;padding:1rem}
.dhr .bhead{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.dhr .bhead>div{flex:1 1 auto;min-width:0}
.dhr .bhead b{display:flex;align-items:center;gap:.3rem;font-size:16px;font-weight:800}
.dhr .vf{width:18px;height:18px;border-radius:999px;background:var(--dh-accent-deep);color:var(--dh-surface);display:inline-flex;align-items:center;justify-content:center}
.dhr .vf svg{width:12px;height:12px;stroke-width:3}
.dhr .bsub{display:block;font-size:13.5px;color:var(--dh-ink-3);font-weight:500;margin-top:.1rem}
.dhr .blogo{width:44px;height:44px;border-radius:12px;background:var(--dh-ink);color:var(--dh-surface);font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dhr .bthumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.dhr .bthumbs a{aspect-ratio:1.35/1;border-radius:14px;overflow:hidden;background:var(--dh-surface-2);display:flex;align-items:center;justify-content:center}
.dhr .bthumbs img{width:100%;height:100%;object-fit:cover}

/* 배너 · 푸터 */
.dhr .banner{margin-top:2.6rem;background:var(--dh-ink);color:var(--dh-surface);border-radius:28px;padding:2.6rem 1.5rem;text-align:center;background-image:radial-gradient(circle at 20% 0,rgba(56,189,248,.35),transparent 45%),radial-gradient(circle at 90% 100%,rgba(56,189,248,.2),transparent 40%)}
@media(min-width:880px){.dhr .banner{padding:3.6rem 2rem}}
.dhr .banner h2{font-size:clamp(1.7rem,1.3rem + 2vw,2.6rem);font-weight:900;letter-spacing:0;color:var(--dh-surface)}
.dhr .banner p{color:var(--dh-surface);opacity:.75;font-size:15.5px;max-width:34rem;margin:.8rem auto 1.3rem;line-height:1.65}
.dhr .dhr-about{margin-top:2.6rem;background:var(--dh-surface);border:1px solid var(--dh-line);border-radius:24px;padding:clamp(1.3rem,1rem + 1.5vw,2.2rem)}
.dhr .dhr-about__t{font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem);font-weight:900;color:var(--dh-ink);margin:0 0 1rem;letter-spacing:0;word-break:keep-all}
.dhr .dhr-about__g{display:grid;gap:1.3rem}
@media(min-width:880px){.dhr .dhr-about__g{grid-template-columns:1fr 1fr;gap:1.6rem 2.4rem}}
.dhr .dhr-about__c h3{font-size:16.5px;font-weight:800;color:var(--dh-ink);margin:0 0 .4rem;letter-spacing:0;word-break:keep-all}
.dhr .dhr-about__c p{font-size:15px;line-height:1.7;color:var(--dh-ink-2);margin:0;word-break:keep-all}
.dhr .dhr-about__l{margin-top:.5rem !important;font-size:14.5px}
.dhr .dhr-about__l a{color:var(--dh-accent-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dhr .foot{background:var(--dh-surface);color:var(--dh-ink-2);border-top:1px solid var(--dh-line);margin-top:2.4rem;padding:2.6rem 0 2rem}
.dhr .fgrid{display:grid;gap:1.8rem;grid-template-columns:1fr}
@media(min-width:760px){.dhr .fgrid{grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:2rem}}
.dhr .fabout p{font-size:14.5px;line-height:1.7;margin:.9rem 0 1.1rem;max-width:34rem}
.dhr .lg-w{color:var(--dh-ink)}.dhr .lg-w .g{background:var(--dh-ink)}
.dhr .fkakao{background:var(--dh-surface-2);border-radius:16px;padding:1rem;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.dhr .fkakao>div{flex:1 1 12rem}
.dhr .fkakao b{display:block;color:var(--dh-ink);font-size:15px}
.dhr .fkakao span{font-size:13.5px;color:var(--dh-ink-3)}
.dhr .fcol{display:flex;flex-direction:column;gap:.45rem}
.dhr .fcol b{color:var(--dh-ink);font-size:15px;margin-bottom:.3rem}
.dhr .fcol a{font-size:14.5px;color:var(--dh-ink-2);min-height:44px;display:flex;align-items:center}
.dhr .fcol a:hover{color:var(--dh-ink)}
.dhr .fmuted{font-size:13.5px;color:var(--dh-ink-3);line-height:1.6}
.dhr .flegal a{color:var(--dh-ink-2);text-decoration:underline}
.dhr .flegal{border-top:1px solid var(--dh-line);margin-top:2rem;padding-top:1.3rem;font-size:13px;line-height:1.8;color:var(--dh-ink-3)}
.dhr .flegal b{color:var(--dh-ink)}
@media(prefers-reduced-motion:reduce){.dhr *{transition:none!important}}

/* 스크롤러 화살표 (데스크톱) · 드래그 */
.dhr .scw{position:relative}
.dhr .scb{display:none;position:absolute;top:calc(50% - 40px);width:44px;height:44px;border-radius:999px;background:var(--dh-surface);color:var(--dh-ink);box-shadow:0 8px 24px -10px rgba(0,0,0,.4);align-items:center;justify-content:center;z-index:3;transition:opacity 160ms}
.dhr .scb svg{width:22px;height:22px;stroke-width:2.4}
.dhr .scb-prev{left:-14px}.dhr .scb-next{right:-14px}
.dhr .scb.off{opacity:0;pointer-events:none}
.dhr .scw-none .scb{display:none!important}
@media(min-width:880px){.dhr .scb{display:flex}.dhr .scroller{cursor:grab;scroll-snap-type:none}.dhr .scroller.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}}

/* 히어로 슬라이드 — 조작 줄은 카드 아래에 둔다. 카드 위에 겹치면 제목과 버튼을 가린다. */
.dhr .hslide{display:flex;flex-direction:column;gap:.6rem;min-width:0}
/* min-width:0 이 없으면 그리드/플렉스 칸이 내용 폭으로 벌어져서 translateX(-100%) 가
   뷰포트 한 장이 아니라 트랙 전체를 움직인다 */
.dhr .hviewport{overflow:hidden;border-radius:22px;width:100%;min-width:0}
.dhr .hslide-track{display:flex;width:100%;min-width:0;transition:transform .45s cubic-bezier(.22,1,.36,1);will-change:transform}
.dhr .hslide-item{flex:0 0 100%;min-width:0;border-radius:22px}
@media(prefers-reduced-motion:reduce){.dhr .hslide-track{transition:none}}
.dhr .hprice{display:flex;align-items:baseline;gap:.5rem;font-variant-numeric:tabular-nums}
.dhr .hprice s{color:var(--dh-ink-3);font-size:15px;font-weight:500}
.dhr .hprice b{font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);font-weight:900;letter-spacing:0;color:var(--dh-ink)}
.dhr .hctl{display:flex;align-items:center;justify-content:center;gap:.25rem}
.dhr .hnav{width:44px;height:44px;padding:0;border:0;background:none;color:var(--dh-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:999px}
.dhr .hnav svg{width:22px;height:22px}
.dhr .hprev svg{transform:rotate(180deg)}
.dhr .hnav:hover{background:var(--dh-surface-2)}
.dhr .hplay{width:44px;height:44px;margin-left:.15rem;padding:0;border:0;background:none;cursor:pointer;color:var(--dh-ink-2);display:flex;align-items:center;justify-content:center;gap:3px;border-radius:999px}
.dhr .hplay:hover{background:var(--dh-surface-2)}
.dhr .hplay::before,.dhr .hplay::after{content:"";width:3px;height:12px;background:currentColor;border-radius:1px}
.dhr .hplay[data-playing="0"]::before{width:0;height:0;background:none;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;border-radius:0}
.dhr .hplay[data-playing="0"]::after{display:none}

/* 카드 — 병당 가격은 파는 값 아래 캡션으로 */
.dhr .perb{margin-top:.2rem;font-size:13px;font-weight:600;color:var(--dh-ink-2);font-variant-numeric:tabular-nums}

/* ── 구매·가입을 미는 것들 (레퍼런스: 매 화면이 판다) ──────────────────────── */
/* 가입 유도 띠 — 헤더 위. 스크롤하면 같이 올라간다 (고정 아님). */
.dhr .promo{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:44px;padding:.45rem 1rem;background:var(--dh-ink);color:var(--dh-surface);font-size:14px;line-height:1.35;text-align:center}
.dhr .promo b{font-weight:800;color:var(--dh-surface)}
.dhr .promo span{color:var(--dh-surface);opacity:.72;font-weight:500}
.dhr .promo svg{width:18px;height:18px;stroke-width:2.4;color:var(--dh-accent-inv)}
.dhr a.promo:hover b{text-decoration:underline;text-underline-offset:3px}
.dhr .promo--in{background:var(--dh-accent-soft);color:var(--dh-ink)}
.dhr .promo--in b{color:var(--dh-accent-deep)}.dhr .promo--in span{color:var(--dh-ink-2)}
@media(max-width:479px){.dhr .promo span{display:none}}
/* 바로 가기 칩 — 모바일 헤더 아래. 데스크톱은 .dnav 가 같은 일을 한다. */
.dhr .bnav{border-top:1px solid var(--dh-glass-line);background:var(--dh-glass);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
@media(prefers-reduced-transparency:reduce){.dhr .bnav{background:var(--dh-surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
.dhr .bnav .wrap{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-top:.45rem;padding-bottom:.55rem}
.dhr .bnav .wrap::-webkit-scrollbar{display:none}
.dhr .bnav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 .85rem;border-radius:999px;background:var(--dh-glass-in);box-shadow:inset 0 0 0 1px var(--dh-glass-in-line),inset 0 1px 0 var(--dh-glass-hi);color:var(--dh-ink);font-size:14px;font-weight:700;white-space:nowrap}
.dhr .bnav a.bnav__hi{background:var(--dh-ink);color:var(--dh-surface)}
@media(min-width:880px){.dhr .bnav{display:none}}
/* 분류 타일 — 홈 */
/* 폰에서는 두 줄로 — 한 줄에 일곱 개를 밀어 넣으면 타일이 아이콘보다 좁아진다 */
.dhr .qcats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem .2rem;margin:1.6rem 0 1.4rem;text-align:center}
.dhr .qcats a{display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:13px;font-weight:700;color:var(--dh-ink);min-width:0}
.dhr .qcats__ic{width:54px;height:54px;border-radius:999px;background:var(--dh-surface);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 1px 0 var(--dh-line);transition:transform 160ms}
.dhr .qcats a:hover .qcats__ic{transform:translateY(-2px)}
.dhr .qcats__ic img{width:100%;height:100%;object-fit:cover}
.dhr .qcats__ic svg{width:26px;height:26px;color:var(--dh-ink);stroke-width:1.9}
.dhr .qcats a span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(min-width:640px){.dhr .qcats{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.6rem;margin-top:.3rem}.dhr .qcats__ic{width:72px;height:72px}.dhr .qcats a{font-size:14px}}
@media(min-width:640px){.dhr .qcats__ic svg{width:30px;height:30px}}
@media(min-width:880px){.dhr .qcats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.6rem;margin:2.6rem 0 2rem}.dhr .qcats__ic{width:84px;height:84px}.dhr .qcats__ic svg{width:34px;height:34px}}   /* 타일 줄은 아래 숫자 칸과 같은 양 끝에 맞춘다 (가운데 몰린 flex 를 같은 폭 칸으로) */
/* 푸터 — 입금 계좌 */
/* 입금 계좌 — 검은 푸터 위 어두운 상자에 흰 글씨는 읽기 어려웠다. 계좌번호만
   밝은 알약으로 띄운다. 이 줄은 손님이 받아 적는 줄이라 가장 잘 보여야 한다. */
.dhr .fbank{margin-top:1.8rem;padding:1.2rem 1.3rem;background:var(--dh-ink);color:var(--dh-surface);border:0;border-radius:var(--dh-radius-lg)}
.dhr .fbank__t{display:flex;align-items:center;gap:.5rem;margin:0 0 .8rem}
.dhr .fbank__t svg{width:20px;height:20px;color:var(--dh-accent-inv);stroke-width:1.9}
.dhr .fbank__t b{color:var(--dh-surface);font-size:14.5px;font-weight:700;letter-spacing:.01em}
.dhr .fbank__row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.dhr .fbank__row + .fbank__row{margin-top:.8rem}
.dhr .fbank__acc{flex:1 1 auto;min-width:0}
/* 옮겨 적는 줄이다 — 여기가 이 상자에서 가장 커야 한다 */
.dhr .fbank .n{display:block;color:var(--dh-surface);font-size:22px;font-weight:900;letter-spacing:.03em;
  line-height:1.2;font-variant-numeric:tabular-nums;word-break:break-all}
.dhr .fbank__meta{display:block;margin-top:.3rem;font-size:13.5px;color:var(--dh-surface);opacity:.72;line-height:1.5}
.dhr .fbank__copy{flex:0 0 auto;min-height:44px;padding:0 1.1rem;border-radius:999px;border:0;
  background:var(--dh-surface);color:var(--dh-ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer;
  transition:transform .2s cubic-bezier(.16,1,.3,1),background-color .2s}
.dhr .fbank__copy:hover{background:var(--dh-surface-2)}
.dhr .fbank__copy:active{transform:scale(.97)}
.dhr .fbank__copy.is-done{background:var(--dh-accent);color:var(--dh-accent-ink)}
/* 이름이 다르면 자동확인이 안 되고 사람이 손으로 처리한다 — 그래서 따로 세워 둔다 */
.dhr .fbank__note{margin:.9rem 0 0;padding:.7rem .85rem;border-radius:12px;background:rgba(127,127,127,.22);
  font-size:13px;line-height:1.6;color:var(--dh-surface)}
.dhr .fbank__note b{color:var(--dh-surface);font-weight:800}

/* ── 장바구니 서랍 — 불투명. 데스크톱은 오른쪽 420px, 모바일은 아래에서 올라온다. ── */
.dhr .dhc{position:fixed;inset:0;z-index:60}
.dhr .dhc[hidden]{display:none}
.dhr .dhc__dim{position:absolute;inset:0;background:var(--dh-veil);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .2s}
.dhr .dhc.on .dhc__dim{opacity:1}
.dhr .dhc__panel{position:absolute;left:0;right:0;bottom:0;max-height:88dvh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--dh-glass-hi),transparent 42%),var(--dh-glass);border-top:1px solid var(--dh-glass-line);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-radius:28px 28px 0 0;transform:translateY(100%);transition:transform .22s cubic-bezier(.22,1,.36,1);padding-bottom:env(safe-area-inset-bottom)}
.dhr .dhc.on .dhc__panel{transform:none}
@media(min-width:880px){.dhr .dhc__panel{left:auto;top:0;width:420px;max-height:none;border-radius:0;transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.dhr .dhc__panel,.dhr .dhc__dim{transition:none}}
/* 관리자에게는 워드프레스 관리 바(880px↑ 에서는 32px)가 위를 덮는다 — 서랍 머리가 그 아래로 들어가지 않게.
   홈은 shell.css 를 싣지 않으니 여기 둔다. */
@media(min-width:880px){body.dhr.admin-bar .dhc__panel{top:32px}}
body.dhc-open{overflow:hidden}
.dhr .dhc__head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem .7rem;border-bottom:1px solid var(--dh-glass-line)}
.dhr .dhc__head h2{font-size:19px;font-weight:900;letter-spacing:0;display:flex;align-items:baseline;gap:.35rem}
.dhr .dhc__head h2 .n{font-size:15px;color:var(--dh-accent-deep)}
.dhr .dhc__x{width:44px;height:44px;border-radius:999px;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--dh-ink)}
.dhr .dhc__x:hover{background:var(--dh-glass-in)}
.dhr .dhc__ship{padding:.75rem 1.1rem 0;font-size:14px;color:var(--dh-ink-2)}
.dhr .dhc__ship b{color:var(--dh-ink)}
.dhr .dhc__ship.is-ok b{color:var(--dh-accent-deep)}
.dhr .dhc__bar{display:block;height:6px;border-radius:999px;background:var(--dh-glass-in);box-shadow:inset 0 0 0 1px var(--dh-glass-in-line);margin-top:.45rem;overflow:hidden}
.dhr .dhc__bar i{display:block;height:100%;width:0;background:var(--dh-accent);transition:width .3s}
.dhr .dhc__ship.is-ok .dhc__bar i{background:var(--dh-accent-deep)}
.dhr .dhc__list{flex:1 1 auto;overflow-y:auto;padding:.5rem 1.1rem;min-height:120px}
.dhr .dhc__list.is-busy{opacity:.55}
.dhr .dhc__empty{text-align:center;padding:2rem 0;color:var(--dh-ink-2);font-size:15px;line-height:1.7}
.dhr .dhc__empty a{color:var(--dh-accent-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dhr .dhc__it{display:grid;grid-template-columns:64px minmax(0,1fr) 44px;gap:.7rem;align-items:start;padding:.8rem 0;border-bottom:1px solid var(--dh-glass-in-line)}
.dhr .dhc__it.is-busy{opacity:.4}
.dhr .dhc__im{width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--dh-glass-in);box-shadow:inset 0 0 0 1px var(--dh-glass-in-line);display:block}
.dhr .dhc__im img,.dhr .dhc__im i{width:100%;height:100%;object-fit:cover;display:block}
.dhr .dhc__nm{display:block;font-size:15px;font-weight:700;line-height:1.35;letter-spacing:0;word-break:keep-all}
.dhr .dhc__op{margin-top:.2rem;font-size:13px;color:var(--dh-ink-3);line-height:1.45;word-break:keep-all}
.dhr .dhc__row{display:flex;justify-content:space-between;align-items:baseline;margin-top:.35rem;font-size:13.5px;color:var(--dh-ink-2)}
.dhr .dhc__row b{font-size:15px;color:var(--dh-ink)}
.dhr .dhc__rm{width:44px;height:44px;border-radius:999px;font-size:24px;line-height:1;color:var(--dh-ink-3);display:flex;align-items:center;justify-content:center;margin:-.6rem -.6rem 0 0}
.dhr .dhc__rm:hover{background:var(--dh-glass-in);color:var(--dh-ink)}
.dhr .dhc__foot{padding:.8rem 1.1rem 1rem;border-top:1px solid var(--dh-glass-line);background:transparent}
.dhr .dhc__tot{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--dh-ink-2);margin-bottom:.7rem}
.dhr .dhc__tot b{font-size:22px;font-weight:900;letter-spacing:0;color:var(--dh-ink)}
.dhr .dhc__btns{display:grid;grid-template-columns:1fr 1.4fr;gap:.5rem}
.dhr .dhc__btns .btn{min-height:50px}
.dhr .btn-o{background:var(--dh-surface);color:var(--dh-ink);box-shadow:inset 0 0 0 1.5px var(--dh-ink)}
.dhr .dhc__btns .btn.is-off{background:var(--dh-surface-2);color:var(--dh-ink-3);cursor:default}
.dhr .dhc__note{margin-top:.6rem;text-align:center;font-size:13px;color:var(--dh-ink-3)}

/* ── 카드 2 — 라운디드 소프트 (design/carousel/soft-carousel.html 의 것을 그대로) ─────── */
.dhr .card{border-radius:24px;box-shadow:0 12px 32px rgba(0,0,0,.04);padding:.6rem .6rem 1.1rem;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.dhr .card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(0,0,0,.08)}}
.dhr .card .fig{margin:0;border-radius:18px;isolation:isolate}
.dhr .card .fig img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.dhr .card:hover .fig img{transform:scale(1.05)}}
.dhr .card .bd{padding:.95rem .5rem 0;gap:.2rem}
.dhr .card .nm{font-size:16px}
.dhr .eb{top:.75rem;left:.75rem;background:var(--dh-ink);color:var(--dh-surface);border-radius:999px;padding:.3rem .6rem}
.dhr .eb.sale{background:var(--dh-accent-deep);color:var(--dh-surface)}.dhr .eb.new{background:var(--dh-accent-deep);color:var(--dh-surface)}.dhr .eb.best{background:var(--dh-ink);color:var(--dh-surface)}.dhr .eb.out{background:var(--dh-ink-3);color:var(--dh-surface)}
.dhr .pr{padding-right:52px;gap:.35rem .45rem}
.dhr .pr .off{font-style:normal;font-size:17px;font-weight:800;color:var(--dh-accent-deep);letter-spacing:0}
.dhr .pr b{font-size:19px}
.dhr .perb{padding-right:52px}
/* 구매하기 — 카드 아래 오른쪽. 옵션(구성 · 맛)이 필수라 상품 페이지의 구매 상자로 간다. */
.dhr .card .buy{margin:.7rem .5rem 0;align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 1.05rem;border-radius:999px;background:var(--dh-ink);color:var(--dh-surface);font-size:14px;font-weight:800;letter-spacing:0;white-space:nowrap;position:relative;z-index:3;transition:transform .5s cubic-bezier(.16,1,.3,1),filter .3s}
.dhr .card .buy:hover{transform:translateY(-2px);filter:brightness(1.25)}
.dhr .card .buy:active{transform:scale(.96)}
.dhr .card .buy.is-out{background:var(--dh-surface-2);color:var(--dh-ink-3);cursor:default}

/* ── 섹션 머리 ── */
.dhr .sh{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.15rem}
.dhr .sh h2{font-size:clamp(1.45rem,1.15rem + 1.3vw,1.95rem);font-weight:800;letter-spacing:0;line-height:1.2;text-wrap:balance}
.dhr .sh-sub{font-size:15px;font-weight:500;color:var(--dh-ink-3);margin-top:.35rem;line-height:1.5}
.dhr .sh .lk{flex:0 0 auto;white-space:nowrap}
.dhr .deals-h > div h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.8rem)}
.dhr .deals{padding-bottom:.2rem}

/* ── 카루셀 (Swiper 11) — 오른쪽 끝은 화면 끝까지 흘러 다음 카드가 살짝 보인다 ── */
.dhr .wrap{--pad:clamp(1.1rem,.6rem + 2vw,2.5rem);padding-left:var(--pad);padding-right:var(--pad)}
.dhr .dhs-wrap{position:relative;margin:0 calc(-1 * var(--pad,1.1rem));padding:0 var(--pad,1.1rem);overflow:hidden}
.dhr .deals .dhs-wrap{margin:0 -1.2rem;padding:0 1.2rem}
@media(min-width:880px){.dhr .deals .dhs-wrap{margin:0 -1.8rem;padding:0 1.8rem}}
.dhr .dhs{position:relative;overflow:visible;padding:.5rem 0 1.3rem;z-index:1}
.dhr .dhs .swiper-wrapper{position:relative;display:flex;width:100%;box-sizing:content-box;transition-property:transform;transition-timing-function:cubic-bezier(.25,1,.5,1)}
.dhr .dhs .swiper-slide{flex:0 0 auto;position:relative;width:min(66vw,270px);height:auto;display:flex}
.dhr .dhs .swiper-slide .card{width:100%}
.dhr .dhs.swiper-initialized{cursor:grab}
/* 스크립트가 안 왔을 때도 넘겨 볼 수 있다 */
.dhr .dhs:not(.swiper-initialized) .swiper-wrapper{gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.dhr .dhs:not(.swiper-initialized) .swiper-slide{scroll-snap-align:start}
.dhr .dhs-nav{display:none;position:absolute;top:calc(50% - 44px);z-index:3;width:48px;height:48px;border-radius:50%;background:var(--dh-surface);color:var(--dh-ink);box-shadow:0 12px 32px rgba(0,0,0,.10);align-items:center;justify-content:center;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s,box-shadow .5s cubic-bezier(.16,1,.3,1)}
.dhr .dhs-nav svg{width:22px;height:22px;stroke-width:2.2}
.dhr .dhs-prev{left:calc(var(--pad,1.1rem) - 24px)}.dhr .dhs-prev svg{transform:rotate(180deg)}
.dhr .dhs-next{right:calc(var(--pad,1.1rem) - 24px)}
.dhr .dhs-nav:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(0,0,0,.14)}
.dhr .dhs-nav.swiper-button-disabled{opacity:0;pointer-events:none}
@media(min-width:880px){.dhr .dhs-wrap.is-ready .dhs-nav{display:flex}}

/* ── 브랜드 티커 — 천천히 흐르는 이름들. 동작 줄이기면 멈춘다 ── */
.dhr .tick{overflow:hidden;margin:2.2rem calc(-1 * var(--pad,1.1rem)) .4rem;padding:.9rem 0;border-top:1px solid var(--dh-line);border-bottom:1px solid var(--dh-line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.dhr .tick-in{display:flex;align-items:center;gap:1.6rem;width:max-content;animation:dhr-tick 48s linear infinite;font-size:clamp(1.1rem,1rem + .6vw,1.5rem);font-weight:800;letter-spacing:0;color:var(--dh-ink);white-space:nowrap}
.dhr .tick-in i{width:6px;height:6px;border-radius:50%;background:var(--dh-accent-deep);flex:0 0 auto}
@keyframes dhr-tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.dhr .tick-in{animation:none}}
/* 가격 줄 — 정가는 위에 작게, 아래 줄에 할인율 + 파는 값. 한 줄에 다 넣으면 좁은 카드에서 접힌다. */
.dhr .pr{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .4rem;padding-right:48px}
.dhr .pr s{flex-basis:100%;order:-1;margin:0;font-size:13px;color:var(--dh-ink-3);font-weight:500}
.dhr .pr b{font-size:19px;font-weight:800;letter-spacing:0;white-space:nowrap}
.dhr .pr b small{font-size:13px;font-weight:700;margin-left:1px}
.dhr .pr .off{font-size:17px}
.dhr .card .nm{min-height:0}
/* 좁은 두 칸(폰)에서는 + 를 사진 오른쪽 위로 올리고 가격 줄이 카드 폭을 다 쓴다 */
/* 버튼이 아래 줄을 쓰니 가격은 카드 폭을 다 쓴다 */
.dhr .pr,.dhr .perb{padding-right:0}
.dhr .card{padding-bottom:.85rem;display:flex;flex-direction:column}
.dhr .card .bd{flex:1 1 auto}
@media(max-width:639px){
  .dhr .pr b{font-size:18px}.dhr .pr .off{font-size:16px}
  .dhr .card .buy{align-self:stretch}
}

/* ══ 입체감 — 그림자를 두 겹으로 ═════════════════════════════════════════════
   흐린 그림자 한 장은 물체가 떠 있는 느낌만 준다. 바닥에 닿는 짧은 그림자와
   멀리 퍼지는 넓은 그림자를 겹쳐야 "면 위에 놓인 것"으로 읽힌다.
   반투명 면이나 블러는 쓰지 않는다 — 카드가 수십 장 깔리는 화면에서 스크롤이 끊긴다. */
.dhr{
  --lift-0: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);
  --lift-1:0 0 0 1px rgba(17,17,17,.05),0 2px 5px rgba(17,17,17,.07),0 30px 60px -26px rgba(17,17,17,.36);
  --lift-2:0 0 0 1px rgba(17,17,17,.06),0 4px 10px rgba(17,17,17,.09),0 44px 80px -32px rgba(17,17,17,.44);
  --edge:inset 0 1px 0 rgba(255,255,255,.16);
}
/* 카루셀 상자가 카드의 들린 그림자를 잘라냈다. 가로만 자르고 세로는 열어 둔다. */
.dhr .dhs-wrap{overflow:hidden}
@supports (overflow:clip){.dhr .dhs-wrap{overflow-x:clip;overflow-y:visible}}
.dhr .dhs{padding:.9rem 0 1.8rem}

/* 카드 — 마우스를 따라 3.2도까지만 기운다. 그 이상은 상품 사진이 찌그러져 보인다. */
/* 상품 카드의 3D 기울임은 ③ 목록 · 카드(2026-10-07)에서 뺐다 — 파일 끝 「③ 목록 · 카드」 참고 */
.dhr .bcard,.dhr .hcard-b{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
.dhr .bcard{box-shadow:var(--lift-0)}
@media(hover:hover){.dhr .bcard:hover{box-shadow:var(--lift-1);transform:perspective(1100px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}
.dhr .hcard{box-shadow:var(--lift-0)}
@media(hover:hover){.dhr .hcard:hover{box-shadow:var(--lift-1);transform:translateY(-3px)}}
/* 히어로 상품 사진 — 기울어진 판 위에 얹힌 것처럼 */
.dhr .hart .box{box-shadow:0 2px 6px rgba(17,17,17,.12),0 40px 60px -30px rgba(17,17,17,.55)}

/* 분류 타일 — 바닥에 닿는 원반 */
.dhr .qcats a{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.dhr .qcats__ic{box-shadow:var(--lift-0)}
.dhr .qcats a:hover .qcats__ic{box-shadow:var(--lift-1)}

/* 버튼 — 눌리는 물건처럼. 위쪽 안쪽 하이라이트 + 바닥 그림자, 누르면 내려앉는다. */
.dhr .btn-d,.dhr .card .buy{box-shadow:var(--edge),0 8px 20px -8px rgba(17,17,17,.55)}
.dhr .btn-d:active,.dhr .card .buy:active{box-shadow:var(--edge),0 3px 8px -4px rgba(17,17,17,.5);transform:translateY(1px) scale(.99)}
.dhr .btn-p{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px -8px rgba(56,189,248,.7)}
.dhr .btn-w2{box-shadow:0 1px 2px rgba(17,17,17,.1),0 12px 26px -12px rgba(17,17,17,.5)}
.dhr .scb,.dhr .dhs-nav{box-shadow:var(--lift-0)}
.dhr .scb:hover,.dhr .dhs-nav:hover{box-shadow:var(--lift-1)}
@media(prefers-reduced-motion:reduce){.dhr .card,.dhr .bcard,.dhr .qcats a,.dhr .hcard-b{transform:none!important}}

/* ══ 사장님 팝업(#pop6) — 테마에 맞춘다 ═══════════════════════════════════════
   스니펫이 인라인 <style> 로 형광 분홍(#FF0066)과 blur 를 쓴다. 우리 규칙은
   `body.dhr #pop6 …` (1,1,2) 라 스니펫의 `#pop6 …` (1,0,1) 보다 앞선다.
   팝업을 끄는 것은 스니펫 쪽 일이다 — 여기서는 모양만 맞춘다. */
body.dhr #pop-dim{background:rgba(17,17,17,.62)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.dhr #pop6 .panel{border-radius:22px!important;overflow:hidden!important;background:var(--dh-surface)!important;
  box-shadow:0 0 0 1px rgba(17,17,17,.06),0 4px 10px rgba(17,17,17,.09),0 44px 80px -30px rgba(17,17,17,.5)!important}
/* 사진 칸 — 스니펫의 형광 분홍(#ff0066) 바탕을 걷고, 사진은 폭을 다 쓰되 화면보다 길면 안에 맞춘다
   (장마다 비율이 달라 contain). 홈 히어로 클래스가 .hero 라 여기 .hero 와 겹쳤던 것은 .hhero 로 갈라 뒀다 */
body.dhr #pop6 .hero{display:block!important;padding:0!important;min-height:0!important;background:var(--dh-surface-2)!important;grid-template-columns:none!important}
/* 사장님 팝업 이미지는 4:5 다 — 사진 칸을 4:5 로 못 박고, 화면이 짧으면 칸 높이가 아니라 팝업 **폭**을 줄여
   비율을 지킨다 (아래 #pop6 max-width 의 (100dvh − 220px) × .8). 그래야 양옆 여백이 안 생긴다 */
body.dhr #pop6 .hero-media{display:flex!important;align-items:center;justify-content:center;aspect-ratio:4/5;overflow:hidden}
body.dhr #pop6 .hero-media img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
body.dhr #pop6 .x{width:44px!important;height:44px!important;border-radius:999px!important;background:var(--dh-surface)!important;
  border:1px solid var(--dh-line)!important;box-shadow:0 2px 8px rgba(17,17,17,.14)!important;display:flex!important;align-items:center;justify-content:center}
body.dhr #pop6 .buttons{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:.4rem!important;padding:.9rem .9rem .5rem!important;background:var(--dh-surface)!important;border:0!important}
body.dhr #pop6 .bbtn{flex:0 1 auto!important;min-height:44px!important;padding:0 1rem!important;border-radius:999px!important;
  background:var(--dh-surface)!important;color:var(--dh-ink-2)!important;border:1.5px solid var(--dh-line)!important;
  font-family:inherit!important;font-size:13.5px!important;font-weight:700!important;letter-spacing:0!important;
  box-shadow:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .2s,color .2s}
body.dhr #pop6 .bbtn:hover{border-color:var(--dh-ink)!important;color:var(--dh-ink)!important}
body.dhr #pop6 .bbtn.active{background:var(--dh-ink)!important;border-color:var(--dh-ink)!important;color:var(--dh-surface)!important}
body.dhr #pop6 .bar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:.5rem!important;padding:.4rem .9rem .9rem!important;background:var(--dh-surface)!important;border:0!important}
body.dhr #pop6 .bar button{min-height:50px!important;border-radius:999px!important;font-family:inherit!important;font-size:15px!important;font-weight:800!important;letter-spacing:0!important;box-shadow:none!important}
body.dhr #pop6 .btn-today{background:var(--dh-surface)!important;color:var(--dh-ink-2)!important;border:1.5px solid var(--dh-line-strong)!important}
body.dhr #pop6 .btn-today:hover{border-color:var(--dh-ink)!important;color:var(--dh-ink)!important}
body.dhr #pop6 .btn-close{background:var(--dh-ink)!important;color:var(--dh-surface)!important;border:0!important}
/* 팝업을 한 장만 띄울 때 — 칩 줄은 필요 없다 (front.js 가 .dhr-single 을 붙인다) */
body.dhr #pop6.dhr-single .buttons{display:none!important}
body.dhr #pop6.dhr-single .bar{padding:.9rem!important}

/* ── 회원탈퇴 화면 — 테마의 버튼·입력 규칙이 membership-cancel.css 를 이긴다.
      이 화면은 되돌릴 수 없는 곳이라 버튼과 입력이 또렷해야 한다. ── */
body.dhr .dh-leave{max-width:640px;margin:0 auto;padding:clamp(1.4rem,1rem + 2vw,2.4rem) 0}
body.dhr .dh-leave h2{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.2rem);font-weight:900;letter-spacing:0;margin:0 0 1.1rem}
body.dhr .dh-leave__form{display:grid;gap:1rem;margin-top:1.4rem}
body.dhr .dh-leave__field{display:grid;gap:.4rem}
body.dhr .dh-leave__field span{font-size:14px;font-weight:700;color:var(--dh-ink-2)}
body.dhr .dh-leave__field input{min-height:52px!important;height:auto!important;padding:0 1rem!important;border-radius:14px!important;
  border:1.5px solid var(--dh-line-strong)!important;background:var(--dh-surface)!important;font:inherit!important;font-size:16px!important;color:var(--dh-ink)!important;width:100%!important;box-shadow:none!important}
body.dhr .dh-leave__field input:focus{border-color:var(--dh-ink)!important;box-shadow:0 0 0 3px rgba(17,17,17,.08)!important;outline:none!important}
body.dhr .dh-leave__agree{display:flex;gap:.7rem;align-items:flex-start;font-size:15px;color:var(--dh-ink-2);line-height:1.6;word-break:keep-all}
body.dhr .dh-leave__agree input{width:22px;height:22px;flex:0 0 22px;margin-top:.15rem;accent-color:var(--dh-ink)}
body.dhr .dh-leave__submit{
  min-height:54px!important;height:auto!important;width:100%!important;padding:0 1.6rem!important;border:0!important;border-radius:999px!important;
  background:var(--dh-ink)!important;color:var(--dh-surface)!important;font:inherit!important;font-size:16.5px!important;font-weight:800!important;letter-spacing:0!important;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px -8px rgba(17,17,17,.55)!important;transition:filter .3s,transform .3s cubic-bezier(.16,1,.3,1)}
body.dhr .dh-leave__submit:hover{filter:brightness(1.25)}
body.dhr .dh-leave__submit:active{transform:translateY(1px) scale(.99)}
body.dhr .dh-leave__link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:700;color:var(--dh-accent-deep);text-decoration:underline;text-underline-offset:3px}
body.dhr .dh-leave__error{margin:.2rem 0 0;font-size:14.5px;font-weight:700;color:#B42318}
/* 탈퇴 마지막 확인 창 — 불투명. 블러는 쓰지 않는다. */
body.dhr .dh-leave__confirm{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:1.1rem}
body.dhr .dh-leave__confirm[hidden]{display:none}
body.dhr .dh-leave__dim{position:absolute;inset:0;background:rgba(17,17,17,.62);opacity:0;transition:opacity .2s}
body.dhr .dh-leave__confirm.on .dh-leave__dim{opacity:1}
body.dhr .dh-leave__box{position:relative;width:min(440px,100%);background:var(--dh-surface);border-radius:22px;padding:1.6rem 1.5rem 1.3rem;
  box-shadow:0 0 0 1px rgba(17,17,17,.06),0 4px 10px rgba(17,17,17,.09),0 44px 80px -30px rgba(17,17,17,.5);
  transform:translateY(12px) scale(.98);opacity:0;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s}
body.dhr .dh-leave__confirm.on .dh-leave__box{transform:none;opacity:1}
body.dhr .dh-leave__box h3{margin:0 0 1rem;font-size:21px;font-weight:900;letter-spacing:0;color:var(--dh-ink)}
body.dhr .dh-leave__confirm-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
body.dhr .dh-leave__confirm-list li{position:relative;padding-left:1.5rem;font-size:15px;line-height:1.6;color:var(--dh-ink-2);word-break:keep-all}
body.dhr .dh-leave__confirm-list li::before{content:"";position:absolute;left:.35rem;top:.6em;width:6px;height:6px;border-radius:999px;background:var(--dh-accent-deep)}
body.dhr .dh-leave__confirm-list b{color:var(--dh-ink);font-weight:800}
body.dhr .dh-leave__confirm-btns{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1.4rem}
body.dhr .dh-leave__cancel,body.dhr .dh-leave__go{min-height:52px;border-radius:999px;font:inherit;font-size:16px;font-weight:800;cursor:pointer;border:0}
body.dhr .dh-leave__cancel{background:var(--dh-surface);color:var(--dh-ink);box-shadow:inset 0 0 0 1.5px var(--dh-line-strong)}
body.dhr .dh-leave__cancel:hover{box-shadow:inset 0 0 0 1.5px var(--dh-ink)}
body.dhr .dh-leave__go{background:#B42318;color:var(--dh-surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px -8px rgba(180,35,24,.6)}
body.dhr .dh-leave__go:hover{filter:brightness(1.12)}
body.dhr .dh-leave__go:active{transform:translateY(1px)}
body.dhr .dh-leave__go[disabled]{background:var(--dh-ink-3);cursor:default;filter:none}
@media(prefers-reduced-motion:reduce){body.dhr .dh-leave__box,body.dhr .dh-leave__dim{transition:none}}

/* ── 푸터 — 폰에서 화면 두 개가 넘었다. 링크 묶음을 접는다. ─────────────────── */
.dhr .fcol__t{display:none}
.dhr .fcol__list{display:flex;flex-direction:column;gap:.45rem}
.dhr .fcol__pills{display:flex;flex-direction:column;gap:.45rem}
@media(max-width:759px){
  .dhr .fgrid{gap:0}
  .dhr .fabout{margin-bottom:1.2rem}
  .dhr .fabout p{margin:.7rem 0 .9rem;font-size:14px}
  .dhr .fcol{border-top:1px solid var(--dh-line)}
  .dhr .fcol[data-fcol]{display:block}
  .dhr .fcol__t{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
    min-height:52px;padding:0;background:none;border:0;cursor:pointer;color:var(--dh-ink);font:inherit;text-align:left}
  .dhr .fcol__t b{margin:0;font-size:15px;font-weight:700;color:var(--dh-ink)}
  .dhr .fcol__t svg{width:18px;height:18px;color:var(--dh-ink-3);transform:rotate(90deg);transition:transform .25s cubic-bezier(.16,1,.3,1)}
  .dhr .fcol__t[aria-expanded="true"] svg{transform:rotate(-90deg)}
  .dhr .fcol__list{display:none;padding:0 0 .6rem}
  .dhr .fcol__t[aria-expanded="true"] + .fcol__list{display:flex}
  /* 고객센터는 늘 펼쳐 둔다. 제목 · 전화번호 · 영업시간은 한 줄씩 블록으로 쌓는다 —
     가로 플렉스에 넣었더니 글줄이 줄바꿈 대신 화면 밖으로 밀려 잘렸다. */
  .dhr .fcol--open{padding:.9rem 0 .2rem;display:block}
  .dhr .fcol--open > b{display:block;font-size:15px;margin:0 0 .15rem}
  .dhr .fcol--open > a.n{display:flex;align-items:center;min-height:40px;font-size:19px;
    font-weight:800;color:var(--dh-ink);letter-spacing:0}
  .dhr .fcol--open > .fmuted{display:block;min-width:0;margin:.15rem 0 .6rem}
  /* 알약만 가로로 흐른다. 칸보다 길어지면 줄이 아니라 화면이 늘어난다 — 폭을 못 박는다 */
  .dhr .fcol__pills{flex-direction:row;flex-wrap:wrap;gap:.4rem}
  .dhr .fcol__pills a{min-height:44px;padding:0 .85rem;border-radius:999px;
    border:1px solid var(--dh-line);background:var(--dh-surface-2);font-size:14px;font-weight:600;color:var(--dh-ink-2);
    max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dhr .fcol a{min-height:44px}
  .dhr .fbank{margin-top:1.2rem;padding:1rem 1.05rem}
  .dhr .fbank .n{font-size:20px}
  .dhr .flegal{margin-top:1.2rem;padding-top:1rem;font-size:12.5px;line-height:1.7}
  .dhr .foot{padding:1.8rem 0 1.4rem;margin-top:1.8rem}
}
/* 팝업 오버레이가 폰에서 화면보다 넓어져 가로 스크롤이 생겼다 (390px 화면에 564px).
   스니펫이 정하는 폭을 화면 안으로 가둔다. */
body.dhr #pop-dim{position:fixed!important;inset:0!important;width:100%!important;max-width:100vw!important;overflow:hidden auto!important}
body.dhr #pop6{max-width:min(340px,calc(100vw - 3rem),calc((100dvh - 240px) * .8))!important;width:min(340px,calc(100vw - 3rem),calc((100dvh - 240px) * .8))!important}
/* 폰 — 탭 셋이 한 줄에 서게 (두 줄로 꺾이면 셋째 탭만 따로 떠 지저분하다). 넘치면 옆으로 민다 */
body.dhr #pop6 .buttons{flex-wrap:nowrap!important;justify-content:safe center!important;gap:.3rem!important;padding:.8rem .7rem .4rem!important;overflow-x:auto;scrollbar-width:none}
body.dhr #pop6 .buttons::-webkit-scrollbar{display:none}
body.dhr #pop6 .bbtn{flex:0 0 auto!important;min-height:40px!important;padding:0 .6rem!important;font-size:13px!important;white-space:nowrap!important}
body.dhr #pop6 .bar{padding:.4rem .7rem .7rem!important}
body.dhr #pop6 .bar button{min-height:48px!important;font-size:14.5px!important}
@media(min-width:880px){body.dhr #pop6 .buttons{gap:.4rem!important;padding:.9rem .9rem .5rem!important}body.dhr #pop6 .bbtn{min-height:44px!important;padding:0 1rem!important;font-size:13.5px!important}body.dhr #pop6 .bar{padding:.4rem .9rem .9rem!important}body.dhr #pop6 .bar button{min-height:50px!important;font-size:15px!important}}
@media(min-width:880px){body.dhr #pop6{max-width:min(400px,calc((100dvh - 260px) * .8))!important;width:min(400px,calc((100dvh - 260px) * .8))!important}}
body.dhr #pop6 .panel{max-width:100%!important;width:100%!important}

/* 홈 맨 위 검은 공지 띠(#wd-top-announce)는 사장님 스니펫이 JS 로 끼워 넣는다.
   글자는 front.js 가 우리 것으로 갈아 끼운다 — 그 전까지는 감춰 둔다.
   옛 문구("진행 중")가 한 번 번쩍이면 그것도 없는 혜택을 광고하는 것이다. */
body.dhr-ann #wd-top-announce:not([data-dhr-ann]){visibility:hidden!important}

/* 폰 검색창 — 헤더 아이콘과 홈 검색 알약이 연다.
   불투명이다. 이 사이트는 반투명 표면을 쓰지 않는다 (막만 어둡게 깐다). */
/* 테마 공지 띠(#wd-top-announce)가 z-index 9999 라 그 위로 올라가야 한다.
   성인인증 안내(100010)보다는 아래에 둔다 — 그건 법적 안내라 항상 위여야 한다. */
.dhr .dhsearch{position:fixed;inset:0;z-index:100000}
.dhr .dhsearch[hidden]{display:none}
.dhr .dhsearch__dim{position:absolute;inset:0;background:var(--dh-veil);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .18s ease}
.dhr .dhsearch.is-on .dhsearch__dim{opacity:1}
.dhr .dhsearch__panel{position:absolute;top:0;left:0;right:0;background:linear-gradient(180deg,var(--dh-glass-hi),transparent 42%),var(--dh-glass);border-bottom:1px solid var(--dh-glass-line);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-radius:0 0 28px 28px;
  padding:1.1rem 1rem 1.2rem;display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:.2rem;box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
  transform:translateY(-14px);opacity:0;transition:transform .2s cubic-bezier(.2,0,.2,1),opacity .18s ease;
  padding-top:calc(1.1rem + env(safe-area-inset-top))}
.dhr .dhsearch.is-on .dhsearch__panel{transform:none;opacity:1}
.dhr .dhsearch__form{display:flex;align-items:center;gap:.15rem;background:var(--dh-glass-in);box-shadow:inset 0 0 0 1px var(--dh-glass-in-line),inset 0 1px 0 var(--dh-glass-hi);border-radius:999px;
  min-height:52px;padding:0 .9rem 0 .35rem;min-width:0}
.dhr .dhsearch__form:focus-within{background:var(--dh-glass-in);box-shadow:inset 0 0 0 1.5px var(--dh-accent),0 0 0 4px var(--dh-ring)}
.dhr .dhsearch__ic{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;color:var(--dh-ink)}
.dhr .dhsearch__ic svg{width:21px;height:21px}
.dhr .dhsearch__in{flex:1 1 auto;width:0;min-width:0;border:0;background:none;font:inherit;font-size:16px;
  font-weight:500;color:var(--dh-ink);min-height:48px;padding:0}
.dhr .dhsearch__in:focus{outline:none}
.dhr .dhsearch__in::placeholder{color:var(--dh-ink-3)}
.dhr .dhsearch__x{min-height:44px;padding:0 .5rem 0 .85rem;color:var(--dh-ink-2);
  font-size:15.5px;font-weight:600;letter-spacing:0;white-space:nowrap}
.dhr .dhsearch__x:hover{color:var(--dh-ink)}
.dhr .dhsearch__body{margin-top:1rem;grid-column:1/-1;min-width:0}
.dhr .dhsearch__t{margin:0 0 .55rem;font-size:13px;font-weight:700;color:var(--dh-ink-3)}
.dhr .dhsearch__cats{display:flex;flex-wrap:wrap;gap:.45rem}
.dhr .dhsearch__cats a{display:inline-flex;align-items:center;min-height:40px;padding:0 .95rem;
  border-radius:999px;background:var(--dh-glass-in);box-shadow:inset 0 0 0 1px var(--dh-glass-in-line),inset 0 1px 0 var(--dh-glass-hi);color:var(--dh-ink);font-size:14.5px;font-weight:600;letter-spacing:0}
.dhr .dhsearch.is-empty .dhsearch__form{box-shadow:inset 0 0 0 2px var(--dh-accent-deep)}
.dhr.dhr-search-on{overflow:hidden}
/* 관리 바가 있으면 그만큼 내린다 */
body.admin-bar .dhsearch__panel{top:46px}
@media(min-width:783px){body.admin-bar .dhsearch__panel{top:32px}}
/* 880px 위에는 헤더에 진짜 검색창이 있다 — 창은 안 쓰지만 열리면 가운데로 */
@media(min-width:880px){
  .dhr .dhsearch__panel{max-width:640px;margin:0 auto;border-radius:28px;border:1px solid var(--dh-glass-line);top:12vh;left:1rem;right:1rem}
}
@media(prefers-reduced-motion:reduce){
  .dhr .dhsearch__panel,.dhr .dhsearch__dim{transition:none}
}

/* ── 성인인증 안내 팝업 (#dh-agegate2) — front.css 에 둔다 ──────────────────
   shell.css 에 두면 `dhr-wrap` 접두사 때문에 **홈에서는 안 걸린다** (홈 body 는
   `dhr` 뿐이다). 그래서 홈에서만 스니펫의 분홍이 그대로 나왔다. 푸터 계좌번호에서
   한 번 당한 것과 같은 함정이다. 선택자는 `body.dhr` 을 세 번 써서 같은 특이도
   (0,4,2)를 유지한다 — 스니펫 인라인 <style> 의 `.dh-ag2-primary` (0,1,0)를 이긴다. */
   사장님 Code Snippets 가 그린다. 그 파일은 건드리지 않고 색과 크기만 덮는다.
   스니펫의 인라인 <style> 은 `.dh-ag2-primary` (0,1,0) 이라 우리 (0,4,2)가 이긴다.
   분홍(#e91e63)이 배지 · 버튼 · 강조에 세 번 쓰였다. */
html body.dhr.dhr.dhr.dhr-ag2-off #dh-agegate2{ display: none !important; }
html body.dhr.dhr.dhr #dh-agegate2{ padding: 1.1rem; }
html body.dhr.dhr.dhr .dh-ag2-dim{ background: rgba(17,17,17,.62); }
html body.dhr.dhr.dhr .dh-ag2-card{
  max-width: 420px; padding: 1.7rem 1.4rem 1.1rem; border-radius: 22px;
  background: var(--dh-surface); text-align: center;
  box-shadow: 0 0 0 1px rgba(17,17,17,.06), 0 30px 70px -28px rgba(16,24,32,.6);
}
html body.dhr.dhr.dhr .dh-ag2-x{
  top: .5rem; right: .5rem; width: 40px; height: 40px; padding: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--dh-ink-3); background: none;
}
html body.dhr.dhr.dhr .dh-ag2-x:hover{ background: var(--dh-surface-2); color: var(--dh-ink); }
html body.dhr.dhr.dhr .dh-ag2-badge{
  background: var(--dh-accent-soft); color: var(--dh-accent-deep);
  font-size: 13px; font-weight:800; padding: .35rem .8rem; border-radius: 999px; margin-bottom: .9rem;
}
html body.dhr.dhr.dhr .dh-ag2-card h2{
  font-size: 20px; font-weight:900; line-height: 1.4; letter-spacing: 0;
  color: var(--dh-ink); margin: 0 0 .8rem; word-break: keep-all;
}
html body.dhr.dhr.dhr .dh-ag2-desc{
  font-size: 14px; line-height: 1.65; color: var(--dh-ink-2); margin: 0 0 .6rem; word-break: keep-all;
}
html body.dhr.dhr.dhr .dh-ag2-sub{ font-size: 13px; color: var(--dh-ink-3); }
html body.dhr.dhr.dhr .dh-ag2-desc b{ color: var(--dh-ink); font-weight:800; }
html body.dhr.dhr.dhr .dh-ag2-gift{
  background: var(--dh-surface-2); border-radius: 14px; padding: .8rem;
  font-size: 14px; font-weight:700; color: var(--dh-ink); margin: 1rem 0 1.1rem;
}
html body.dhr.dhr.dhr .dh-ag2-gift b{ color: var(--dh-accent-warm); font-weight:900; }
html body.dhr.dhr.dhr .dh-ag2-btn{
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 54px; padding: 0 1rem; border-radius: 999px; margin: 0 0 .5rem;
  font-size: 16px; font-weight:800; letter-spacing: 0; text-decoration: none;
}
html body.dhr.dhr.dhr .dh-ag2-primary{
  background: var(--dh-primary); color: var(--dh-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 26px -16px rgba(16,24,32,.7);
}
html body.dhr.dhr.dhr .dh-ag2-primary:hover{ background: #000; color: var(--dh-surface); }
html body.dhr.dhr.dhr .dh-ag2-ghost{
  min-height: 48px; background: var(--dh-surface); color: var(--dh-ink);
  border: 1.5px solid var(--dh-line-2); font-size: 15px; font-weight:700;
}
html body.dhr.dhr.dhr .dh-ag2-ghost:hover{ border-color: var(--dh-primary); }
html body.dhr.dhr.dhr .dh-ag2-later{
  display: block; width: 100%; min-height: 44px; margin-top: .2rem;
  font-size: 13px; font-weight: 600; color: var(--dh-ink-3);
  text-decoration: underline; text-underline-offset: 3px; background: none; border: 0;
}
html body.dhr.dhr.dhr .dh-ag2-later:hover{ color: var(--dh-ink); }

/* 푸터 입금 계좌 — 테마 페이지(dhr-wrap)에서 번호와 캡션이 검정으로 덮였다.
   홈(body.dhr)에서는 front.css 의 (0,2,0) 규칙이 이기지만 테마 화면에서는 진다.
   검은 상자 위 검은 글씨라 아예 안 보였다 — 같은 색을 여기서 다시 못 박는다. */
html body.dhr.dhr.dhr .fbank .n{ color: var(--dh-surface) !important; }
html body.dhr.dhr.dhr .fbank .n a{ color: inherit !important; text-decoration: none !important; } /* iOS 사파리 tel: 자동 링크 */
/* 은행 · 예금주 줄 — ink-3 는 잉크 면 위 2.3:1(다크 2.4:1)이라 안 읽혔다 (사장님 2026-10-07). 면과 같은 색을 .8 로 → 11:1 */
html body.dhr.dhr.dhr .fbank__meta{ color: var(--dh-surface) !important; opacity: .8; font-weight: 600; }
html body.dhr.dhr.dhr .fbank__t b{ color: var(--dh-surface) !important; }
html body.dhr.dhr.dhr .fbank__note{ color: var(--dh-surface) !important; }
html body.dhr.dhr.dhr .fbank__note b{ color: var(--dh-surface) !important; }
html body.dhr.dhr.dhr .fbank__copy{ color: var(--dh-ink) !important; background: var(--dh-surface) !important; }
html body.dhr.dhr.dhr .fbank__copy.is-done{ background: var(--dh-accent) !important; color: var(--dh-accent-ink) !important; }


/* 노보 카드 한 줄 — 남은 재고 · 하루 한도. 홈과 목록 양쪽에 걸린다 (.dhr 하나면 된다). */
.dhr .nlimit{margin-top:.3rem;font-size:13px;line-height:1.4;color:var(--dh-ink-2);word-break:keep-all;font-variant-numeric:tabular-nums}
.dhr .nlimit b{color:var(--dh-accent-deep);font-weight:800}

/* ── 노보 분류 목록 맨 위 안내 띠 ──────────────────────────────────────────
   상품의 브랜드 색(감청 · 노랑)을 그대로 쓴다. 우리 하늘색을 얹으면 노보 병 옆에서
   두 브랜드가 싸운다. 그라데이션 · 반투명 없이 판판한 면 세 개다. */
.dhr .nvb{background:#12328F;color:var(--dh-surface);border-radius:20px;padding:clamp(1.3rem,1rem + 2.4vw,2.2rem);margin:0 0 1.4rem;display:grid;gap:.85rem;justify-items:start}
.dhr .nvb__eb{margin:0;background:#FFE02E;color:var(--dh-ink);font-size:14px;font-weight:800;letter-spacing:0;padding:.4rem .75rem;border-radius:8px}
.dhr .nvb__h{margin:0;font-size:clamp(1.65rem,1.1rem + 3vw,3rem);font-weight:900;letter-spacing:0;line-height:1.14;word-break:keep-all}
.dhr .nvb__h mark{background:#FFE02E;color:var(--dh-ink);padding:0 .22em;border-radius:6px}
.dhr .nvb__set{margin:.15rem 0 0;background:#0B2469;border-radius:12px;padding:.7rem 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;font-size:clamp(1rem,.9rem + .7vw,1.35rem);font-weight:800;letter-spacing:0;word-break:keep-all}
.dhr .nvb__set i{flex:0 0 auto;width:1px;height:1.15em;background:#3C5CB8}
.dhr .nvb__p{margin:0;font-size:clamp(14px,13.4px + .2vw,16px);line-height:1.65;color:#DDE4FA;word-break:keep-all}
.dhr .nvb__notes{list-style:none;margin:.15rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:13px;line-height:1.5;color:#B8C6EE;word-break:keep-all}
.dhr .nvb__notes li{position:relative;padding-left:.85rem}
.dhr .nvb__notes li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;border-radius:50%;background:#FFE02E}
/* 데스크톱에서는 두 칸으로 편다. 한 칸으로 두면 1,120px 띠의 오른쪽 절반이 비어
   글이 왼쪽으로 몰린 것처럼 보였다. 왼쪽이 「무엇을」, 오른쪽이 「왜 · 어떻게」다. */
@media(min-width:900px){
  .dhr .nvb{gap:1rem clamp(1.6rem,3vw,3.4rem);align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
    grid-template-areas:"eb lead" "h lead" "set notes"}
  .dhr .nvb__eb{grid-area:eb}
  .dhr .nvb__h{grid-area:h}
  .dhr .nvb__set{grid-area:set;margin:0;align-self:center}
  .dhr .nvb__p{grid-area:lead;align-self:end;font-size:17px;margin-bottom:.2rem}
  .dhr .nvb__notes{grid-area:notes;align-self:center;flex-direction:column;gap:.45rem;font-size:13.5px}
}
/* 사장님이 올린 배너 이미지를 쓸 때. 띠 자리를 그대로 차지한다. */
.dhr .nvb-img{margin:0 0 1.4rem;display:block}
.dhr .nvb-img img{display:block;width:100%;height:auto;border-radius:20px}
.dhr .nvb-img__cap{margin:.55rem .2rem 0;font-size:13px;line-height:1.5;color:var(--dh-ink-2);word-break:keep-all}

/* 이미 가입된 번호입니다 — 가입 화면 머리판 뒤. 막기만 하고 끝내지 않고 갈 곳을 준다. */
.dhr .dhr-dup{max-width:min(560px,calc(100% - 2.2rem));margin:1.1rem auto 0;padding:1rem 1.1rem;background:#FFF4F2;border:0;border-radius:16px;color:#7A1C12}
.dhr .dhr-dup b{display:block;font-size:16px;font-weight:800;letter-spacing:0}
.dhr .dhr-dup p{margin:.35rem 0 0;font-size:14px;line-height:1.6;word-break:keep-all}
.dhr .dhr-dup__go{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin-top:.8rem !important}
.dhr .dhr-dup__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.2rem;border-radius:999px;background:var(--dh-ink);color:var(--dh-surface);font-size:14px;font-weight:800}
.dhr .dhr-dup__lk{font-size:14px;font-weight:700;color:#7A1C12;text-decoration:underline;text-underline-offset:3px}

/* ══ 추석 이벤트 — 첫 화면 맨 위 한 장 (2026-09-15) ═══════════════════════════
   명절 한 장이라 나머지 화면과 달라야 하지만, **다른 가게처럼 보이면 안 된다.**
   그래서 한지 빛 크림 바탕에 우리 글자색 · 우리 포인트 색을 그대로 쓰고,
   명절 표시는 보름달 하나로만 한다. **반투명 · 블러는 여기서도 안 쓴다.** */
.dhr .chu{ margin: 1rem 0 1.2rem; }
.dhr .chu__in{
  display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem;
  align-items: center; position: relative; overflow: hidden;
  padding: 1.4rem 1.3rem; border-radius: 22px; text-decoration: none;
  background: var(--dh-accent-soft); border: 1px solid var(--dh-line); color: var(--dh-ink);
  box-shadow: 0 1px 2px rgba(17,17,17,.05), 0 10px 24px -14px rgba(17,17,17,.22);
}
.dhr .chu__in:hover{ box-shadow: 0 2px 4px rgba(17,17,17,.07), 0 16px 32px -14px rgba(17,17,17,.28); }
.dhr .chu__eb{
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--dh-accent-warm); color: var(--dh-surface);
  font-size: 13px; font-weight:800; letter-spacing: 0;
}
.dhr .chu__h{
  margin: .6rem 0 .2rem; font-size: clamp(1.7rem, 1.25rem + 2.2vw, 2.5rem);
  font-weight:900; letter-spacing: 0; line-height: 1.15; word-break: keep-all;
}
.dhr .chu__s{ margin: 0; font-size: 15px; font-weight:700; color: var(--dh-ink-2); word-break: keep-all; }
.dhr .chu__p{ margin: .7rem 0 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.dhr .chu__p s{ color: var(--dh-ink-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.dhr .chu__p em{ font-style: normal; font-weight:900; font-size: 16px; color: var(--dh-accent-warm); }
.dhr .chu__p b{ font-size: 28px; font-weight:900; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.dhr .chu__n{ margin: .5rem 0 0; font-size: 14px; font-weight:700; color: var(--dh-ink-2); word-break: keep-all; }
.dhr .chu__cta{
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
  min-height: 48px; padding: 0 1.2rem; border-radius: 999px;
  background: var(--dh-ink); color: var(--dh-surface); font-size: 15px; font-weight:800;
}
.dhr .chu__cta svg{ width: 18px; height: 18px; }
.dhr .chu__art{ position: relative; justify-self: center; }
/* 보름달 — 명절 표시는 이것 하나면 된다 */
.dhr .chu__moon{
  position: absolute; right: -14px; top: -18px; width: 132px; height: 132px;
  border-radius: 50%; background: var(--dh-accent-soft); z-index: 0;
}
.dhr .chu__fig{
  position: relative; z-index: 1; display: block; width: 168px; height: 168px;
  border-radius: 18px; overflow: hidden; background: var(--dh-surface); border: 1px solid var(--dh-line);
}
.dhr .chu__fig img{ width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.dhr .chu__fig .lock{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
  background: var(--dh-ink); color: var(--dh-surface); font-size: 12px; font-weight:700;
  text-align: center; word-break: keep-all; line-height: 1.3;
}
@media (min-width: 720px){
  .dhr .chu__in{ grid-template-columns: minmax(0,1fr) 220px; gap: 1.6rem; padding: 1.8rem 1.8rem; }
  .dhr .chu__fig{ width: 200px; height: 200px; }
  .dhr .chu__moon{ width: 164px; height: 164px; right: -22px; top: -26px; }
}

/* ══ 제목 굵기가 전부 700 으로 눌리고 있었다 (2026-09-15) ═══════════════════════
   사장님: 「한가위 풀세트 / 10+1 … 나오는 자리 폰트 굵기가 좀 얇은듯?」

   맞다. 우리는 900 · 800 으로 썼는데 **실제로 그려지는 값은 700** 이었다.
   DevTools 프로토콜로 규칙 순서를 그대로 받아 보니 답이 하나로 나온다:

     h1, h2, h3, h4, h5, h6, .woocommerce h1, … { font-weight:700 !important; }

   사이트 어딘가(테마 · 스니펫)의 이 한 줄이 `!important` 라 우리 것이 전부 졌다.
   **폰트는 문제가 아니었다** — Pretendard 900 은 멀쩡히 실려 있다 (확인함).

   그래서 제목 굵기만 같은 무게(`!important`)로 다시 못 박는다. `!important` 끼리는
   특이도가 이기므로 `body.dhr …` 로 한 단계 올려 둔다. 눌린 것은 이 두 자리만이
   아니라 **홈의 모든 제목**이었다 — 섹션 제목 · 배너 · 서랍까지 같이 돌아온다.
   저쪽 한 줄이 없어지면 이 블록은 지워도 된다. */
body.dhr h1, body.dhr h2, body.dhr h3{ font-weight:800 !important; }
body.dhr .chu__h,
body.dhr .hcard-a .hcard-t,
body.dhr .hcard-b h2,
body.dhr .banner h2,
body.dhr .dhc__head h2,
body.dhr .dh-leave h2,
body.dhr .dh-leave__box h3{ font-weight:900 !important; }

/* 담은 뒤의 가입 벽 안내 (`Front\join_wall()`) — 장바구니 서랍 · 장바구니 화면.
   비회원은 결제하기를 눌러도 가입 화면으로 튕긴다. 그 말을 미리 여기서 한다.
   불투명 면이다 (반투명 · 블러는 여기서도 쓰지 않는다). */
.dhr .dhr-wall{background:var(--dh-ground);border:1px solid var(--dh-line);border-radius:14px;padding:.9rem 1rem 1rem;margin:0 0 .85rem}
.dhr .dhr-wall__t{margin:0;font-size:15px;line-height:1.5;color:var(--dh-ink);word-break:keep-all}
.dhr .dhr-wall__d{margin:.3rem 0 0;font-size:13.5px;line-height:1.6;color:var(--dh-ink-2);word-break:keep-all}
.dhr .dhr-wall__go{display:flex;align-items:center;justify-content:center;gap:.35rem;width:100%;min-height:48px;margin-top:.8rem;padding:0 1rem;border-radius:999px;background:var(--dh-ink);color:var(--dh-surface);font-size:15px;font-weight:800;text-decoration:none;box-sizing:border-box}
.dhr .dhr-wall__go svg{width:18px;height:18px}
.dhr .dhr-wall__in{margin:.6rem 0 0;text-align:center;font-size:13px;color:var(--dh-ink-2)}
.dhr .dhr-wall__in a{color:var(--dh-accent-deep);font-weight:700}

/* ── 안내 띠 (.dhn) — 헤더 바로 아래, 모든 화면 (2026-09-22, 세 번째 판) ───────────────
   첫 판(주황 띠 아코디언) · 둘째 판(아이콘 카드 세 장) 다 「톤이 안 어울린다」(사장님).
   그래서 사이트에 이미 있는 안내 줄 .dhr-gate 와 같은 옷 — 흰 상자 · 왼쪽 주황 선 · 글자만.
   줄 하나 = 이름표(굵게) · 핵심(굵게) · 나머지(회색) · 이어지는 곳(주황). 아이콘 · 색 원 없음.
   폰트는 사이트 기본을 못 박는다 — 테마 화면에서 다른 글꼴이 섞이지 않게. 전부 불투명. */
/* 안내 띠 — 네 번째 판 (2026-10-06, 사장님 「세로 줄 촌스럽다 · 깔끔하게」).
   세로 선 · 테두리 · 상자 없이 알약 칩 한 줄. 폰은 옆으로 넘기고 데스크톱은 셋이 한 줄. 글은 한 줄에서 잘린다 — 누르면 그 안내 페이지. */
.dhr .dhn{background:transparent;color:var(--dh-ink);font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
.dhr .dhn[hidden]{display:none}
.dhr .dhn-in{position:relative;display:flex;align-items:center;gap:8px;padding-top:.55rem;padding-bottom:.1rem}
.dhr .dhn__list{list-style:none;margin:0;padding:2px 0;flex:1 1 auto;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;background:none;border:0}
.dhr .dhn__list::-webkit-scrollbar{display:none}
.dhr .dhn__list>li{border:0;flex:0 0 auto;max-width:84%;min-width:0}
.dhr .dhn__row{display:inline-flex;align-items:center;gap:.45rem;max-width:100%;min-height:42px;padding:0 1rem 0 .85rem;border-radius:999px;background:var(--dh-glass-in);box-shadow:inset 0 0 0 1px var(--dh-glass-in-line),inset 0 1px 0 var(--dh-glass-hi);color:var(--dh-ink);text-decoration:none;font-size:13.5px;line-height:1.3;white-space:nowrap;transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1)}
.dhr .dhn__eb{font-weight:800;color:var(--dh-ink);white-space:nowrap}
.dhr .dhn__row--holiday .dhn__eb{color:var(--dh-accent-deep)}
.dhr .dhn__tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dh-ink-2)}
.dhr .dhn__tx strong{color:var(--dh-ink);font-weight:700}
.dhr .dhn__s{display:none}
.dhr .dhn__more{display:inline-flex;align-items:center;color:var(--dh-ink-3);white-space:nowrap;margin-left:-.2rem}
.dhr .dhn__more span{display:none}
.dhr .dhn__more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dhr .dhn__x{position:static;flex:0 0 auto;width:34px;height:34px;margin:0;padding:0;border:0;border-radius:999px;background:var(--dh-surface);box-shadow:var(--lift-0,0 1px 2px rgba(17,17,17,.05));color:var(--dh-ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.dhr .dhn__x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.dhr .dhn__x:hover{background:var(--dh-surface-2);color:var(--dh-ink)}
@media(min-width:880px){
  .dhr .dhn-in{padding-top:.75rem;padding-bottom:.2rem}
  .dhr .dhn__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible}
  .dhr .dhn__list>li{max-width:none}
  .dhr .dhn__row{width:100%;min-height:46px;font-size:14px;padding:0 1rem}
  .dhr .dhn__s{display:inline;color:var(--dh-ink-3)}
  .dhr .dhn__more{margin-left:auto;color:var(--dh-accent-deep);font-weight:800}
  .dhr .dhn__more span{display:inline}
}
@media(hover:hover) and (pointer:fine){.dhr .dhn__row:hover{transform:translateY(-1px);box-shadow:var(--lift-1,0 10px 24px -14px rgba(17,17,17,.3))}}
/* ── 노보 분류 배너 — 재고 있음 + 가격 인상 (2026-09-21, 테마에 맞춰 다시 지음) ────────
   흰 카드 · 검정 · 번트 오렌지 — 상품 카드 · 안내 띠와 같은 옷. 감청 · 노랑(노보 브랜드 색)은
   사이트와 안 어울렸다 (사장님). 폰은 위아래, 880px 부터 왼쪽 재고 · 오른쪽 가격. */
.dhr .nvs{display:grid;gap:1.1rem;margin:0 0 1.4rem;padding:clamp(1.2rem,1rem + 1.6vw,1.8rem);background:var(--dh-surface);border:1px solid var(--dh-line);border-radius:20px;color:var(--dh-ink)}
.dhr .nvs__main{display:grid;gap:.6rem;justify-items:start;min-width:0}
.dhr .nvs__eb{margin:0;font-size:13px;font-weight:800;color:var(--dh-accent-deep);letter-spacing:.02em}
.dhr .nvs__h{margin:0;font-size:clamp(1.45rem,1.05rem + 2vw,2.2rem);font-weight:900;line-height:1.2;letter-spacing:0;word-break:keep-all}
.dhr .nvs__h em{display:inline-block;font-style:normal;color:var(--dh-accent-deep)}
.dhr .nvs__p{margin:0;font-size:15px;line-height:1.6;color:var(--dh-ink-2);word-break:keep-all}
.dhr .nvs__notes{list-style:none;margin:.1rem 0 0;padding:0;display:grid;gap:.3rem;font-size:13.5px;line-height:1.5;color:var(--dh-ink-2);word-break:keep-all}
.dhr .nvs__notes li{position:relative;padding-left:.9rem}
.dhr .nvs__notes li::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:50%;background:var(--dh-accent-deep)}
.dhr .nvs__price{display:grid;gap:.7rem;align-content:start;padding:1rem;background:var(--dh-accent-soft);border:1px solid var(--dh-line);border-radius:14px;min-width:0}
.dhr .nvs__pt{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;font-size:14px;line-height:1.45;color:var(--dh-ink-2);word-break:keep-all}
.dhr .nvs__pt b{padding:.15rem .6rem;border-radius:999px;background:var(--dh-accent-deep);color:var(--dh-surface);font-size:13px;font-weight:800}
.dhr .nvs__grid{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.dhr .nvs__grid>div{margin:0;padding:.6rem .75rem;background:var(--dh-surface);border:1px solid var(--dh-line);border-radius:10px;min-width:0}
.dhr .nvs__grid dt{margin:0;font-size:13px;font-weight:700;color:var(--dh-ink-2);word-break:keep-all}
.dhr .nvs__grid dd{margin:.15rem 0 0;font-size:18px;font-weight:900;color:var(--dh-ink);font-variant-numeric:tabular-nums;line-height:1.2}
.dhr .nvs__grid dd small{font-size:13px;font-weight:700;margin-left:1px}
.dhr .nvs__note{margin:0;font-size:13px;line-height:1.5;color:var(--dh-ink-2);word-break:keep-all}
@media(min-width:880px){
  .dhr .nvs{grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr);gap:1.6rem;align-items:start}
  .dhr .nvs__p{font-size:16px}
}
/* 폰에서는 값 네 줄을 한 줄에 하나씩 — 두 칸이면 「120,000 원」의 원이 아랫줄로 떨어진다 */
@media(max-width:639px){
  .dhr .nvs__grid{grid-template-columns:minmax(0,1fr);gap:.4rem}
  .dhr .nvs__grid>div{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;padding:.5rem .75rem}
  .dhr .nvs__grid dd{margin:0;white-space:nowrap;font-size:17px}
}

/* 양수 자간 되살리기 — 위 전역 자간 0 규칙과 같은 특이도(0,2,1) · 뒤에 있어 이긴다. 대문자 눈썹 글자 · 계좌 번호만 */
html body.dhr .eb2,html body.dhr .fbank__t b{letter-spacing:.01em !important}
html body.dhr .nvs__eb{letter-spacing:.02em !important}
html body.dhr .fbank .n{letter-spacing:.03em !important}

/* ===== 2026-10-06 사이트 적용 2단계 — 홈 · 토스식 모션 =====
 * 누르면 줄고(빠르게) 떼면 천천히 돌아온다 · 숫자는 굴러 올라온다 · 등장은 흐림이 걷히며 ·
 * 폰 브랜드 카드는 겹쳐 쌓인다 · 탭바 활성 알약이 미끄러진다. transform · opacity · filter 외에는 안 움직인다. */
.dhr .is-press{transform:scale(.96) !important;transition:transform .09s ease !important}
.dhr .card.is-press,.dhr .hcard.is-press{transform:scale(.975) !important}
.dhr .btn,.dhr .card .buy,.dhr .qcats a,.dhr .tabs a,.dhr .lk,.dhr .bnav a,.dhr .fbank__copy{transition:transform .42s cubic-bezier(.22,1,.36,1),background-color .2s,color .2s,box-shadow .42s cubic-bezier(.22,1,.36,1)}
/* 탭바 — 활성 알약 */
.dhr .tabs .ind{position:absolute;top:6px;bottom:6px;left:8px;width:0;border-radius:999px;background:var(--dh-accent-soft);transition:left .36s cubic-bezier(.22,1,.36,1),width .36s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:0}
.dhr .tabs a{position:relative;z-index:1}
/* 마감 카운트다운 — 초가 바뀔 때 흐려졌다 또렷해진다 */
.dhr .ends .ss{display:inline-block;min-width:2ch;text-align:left}
.dhr .ends .ss.is-tick{animation:dhr-roll .36s cubic-bezier(.22,1,.36,1)}
@keyframes dhr-roll{0%{filter:blur(3px);transform:translateY(-5px);opacity:.3}100%{filter:blur(0);transform:none;opacity:1}}
/* 사진은 다 받아진 뒤에 떠오른다 (JS 가 body 에 .dhr-imgfx 를 붙인 뒤에만) */
body.dhr-imgfx .card .fig img,body.dhr-imgfx .bthumbs img,body.dhr-imgfx .hart img{opacity:0;transform:scale(1.03);transition:opacity .55s ease,transform .9s cubic-bezier(.22,1,.36,1)}
/* 받아진 뒤 — 위 규칙(0,3,2)보다 세야 한다. `body.dhr-imgfx img.is-ld`(0,2,2) 로 두었더니 홈 카드 사진이 영영 0 이었다 (2026-10-07 에 잡음) */
body.dhr-imgfx .card .fig img.is-ld,body.dhr-imgfx .bthumbs img.is-ld,body.dhr-imgfx .hart img.is-ld,body.dhr-imgfx img.is-ld{opacity:1;transform:none}
/* 브랜드 카드 스택 (폰) — 카드가 sticky 로 서고 다음 카드가 올라오면 앞 카드가 줄며 흐려진다 (GSAP scrub) */
@media(max-width:879px){
  .dhr .bgrid{gap:14px}
  .dhr .stk{height:min(460px,66dvh)}
  .dhr .stk:last-child{height:auto}
  .dhr .stk .bcard{position:sticky;top:calc(118px + env(safe-area-inset-top));transform-origin:50% 0}
}
/* 안내 벤토 — 첫 칸 넓고 반전, 셋째 칸 파랑 soft */
/* 안내 색인 — 상자 없이, 가는 선으로만 나뉘는 편집 지면 (2026-10-07 세 번째 판) */
.dhr .dhr-about{background:none;border:0;padding:0;margin-top:3rem}
.dhr .dhr-about__t{margin-bottom:1.4rem;font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem)}
.dhr .dhr-about__g{display:grid;gap:2rem;border-top:1px solid var(--dh-line-strong);padding-top:1.6rem}
.dhr .dhr-about__lead{min-width:0}
.dhr .dhr-about__big{margin:0;font-size:clamp(20px,17px + 1.2vw,30px);line-height:1.4;font-weight:800;color:var(--dh-ink);word-break:keep-all;max-width:22ch}
.dhr .dhr-about__lead .dhr-about__more{margin-top:.9rem}
.dhr .dhr-about__idx{display:grid;min-width:0}
.dhr .dhr-about__e{display:grid;gap:.7rem;padding:1.3rem 0;border-top:1px solid var(--dh-line);min-width:0}
.dhr .dhr-about__e:first-child{border-top:0;padding-top:0}
.dhr .dhr-about__e:last-child{padding-bottom:0}
.dhr .dhr-about__e h3{margin:0;font-size:17.5px;font-weight:800;color:var(--dh-ink);letter-spacing:0;word-break:keep-all}
.dhr .dhr-about__e p,.dhr .dhr-about__lead p:not(.dhr-about__big){margin:0;font-size:15px;line-height:1.7;color:var(--dh-ink-2);word-break:keep-all;max-width:56ch}
/* 1 — 규격 짝: 글자만, 둘 사이에 가는 세로선 */
.dhr .dhr-about__spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:.2rem 0 .1rem;padding:0}
.dhr .dhr-about__spec > div{min-width:0;padding:.1rem 1rem .1rem 0}
.dhr .dhr-about__spec > div + div{padding:.1rem 0 .1rem 1rem;border-left:1px solid var(--dh-line-strong)}
.dhr .dhr-about__spec dt{display:flex;align-items:center;gap:.35rem;font-size:15.5px;font-weight:800;color:var(--dh-ink);line-height:1.3}
.dhr .dhr-about__spec dt svg{width:18px;height:18px;stroke-width:2;color:var(--dh-accent-deep)}
.dhr .dhr-about__spec dt small{font-size:11.5px;font-weight:800;color:var(--dh-ink-3);letter-spacing:.04em !important}
.dhr .dhr-about__spec dd{margin:.25rem 0 0;font-size:13.5px;line-height:1.5;color:var(--dh-ink-2);word-break:keep-all}
/* 2 — 출고 타임라인: 선 위의 점 셋 */
.dhr .dhr-about__line{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:.3rem 0 .1rem;padding:1.1rem 0 0;list-style:none;counter-reset:none}
.dhr .dhr-about__line::before{content:"";position:absolute;left:5px;right:33%;top:4px;height:2px;background:var(--dh-line-strong);border-radius:2px}
.dhr .dhr-about__line li{position:relative;min-width:0}
.dhr .dhr-about__line li::before{content:"";position:absolute;left:0;top:-1.1rem;width:10px;height:10px;border-radius:999px;background:var(--dh-accent);box-shadow:0 0 0 3px var(--dh-bg,var(--dh-surface-2))}
.dhr .dhr-about__line li:last-child::before{background:var(--dh-ink)}
.dhr .dhr-about__line b{display:block;font-size:14.5px;font-weight:800;color:var(--dh-ink);line-height:1.3;word-break:keep-all}
.dhr .dhr-about__line span{display:block;margin-top:.15rem;font-size:13px;color:var(--dh-ink-3);line-height:1.4}
/* 3 — 큰 19 */
.dhr .dhr-about__age{display:flex;align-items:center;gap:.8rem}
.dhr .dhr-about__age span{font-size:clamp(32px,28px + 1vw,40px);font-weight:900;line-height:1;color:var(--dh-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em !important}
/* 자세히 · 링크 — 글자 링크 하나. 버튼 없음 */
.dhr .dhr-about__more{font-size:14.5px;color:var(--dh-ink-2)}
.dhr .dhr-about__more summary{cursor:pointer;font-weight:700;color:var(--dh-ink-3);list-style:none;display:inline-flex;align-items:center;gap:.3rem;min-height:32px}
.dhr .dhr-about__more summary::-webkit-details-marker{display:none}
.dhr .dhr-about__more summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.dhr .dhr-about__more[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.dhr .dhr-about__more[open] summary{color:var(--dh-ink)}
.dhr .dhr-about__more p{margin:.3rem 0 0;line-height:1.7;max-width:56ch}
.dhr .dhr-about__l{margin:0;display:grid;border-top:1px solid var(--dh-line);font-size:15px}
.dhr .dhr-about__l a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:48px;color:var(--dh-ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--dh-line);transition:border-color .2s,color .2s}
.dhr .dhr-about__l a svg{color:var(--dh-ink-3)}
.dhr .dhr-about__l a:last-child{border-bottom:0}   /* 다음 칸의 윗줄이 이어받는다 — 줄이 두 겹이 되지 않게 */
/* 폰 — 칸마다 같은 간격 (제목 · 그림 · 글 · 자세히 · 링크가 0.75rem 한 리듬) */
.dhr .dhr-about__lead{display:grid;gap:.75rem;align-content:start}
.dhr .dhr-about__lead .dhr-about__more{margin-top:0}
.dhr .dhr-about__big{font-size:19px;line-height:1.5;max-width:none;text-wrap:balance}
.dhr .dhr-about__g{gap:0}
.dhr .dhr-about__idx{border-top:1px solid var(--dh-line-strong);margin-top:1.6rem}
.dhr .dhr-about__e{gap:.75rem;padding:1.6rem 0}
.dhr .dhr-about__e:first-child{padding-top:1.6rem}
.dhr .dhr-about__e h3{font-size:17px;line-height:1.4}
.dhr .dhr-about__more summary{min-height:44px}
.dhr .dhr-about__e .dhr-about__more,.dhr .dhr-about__lead .dhr-about__more{margin:-.6rem 0}   /* 누르는 칸은 44px 그대로, 보이는 간격은 다른 줄과 같게 */
.dhr .dhr-about__age span{font-size:34px}
.dhr .dhr-about__l a svg{width:15px;height:15px;stroke-width:2.4;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.dhr .dhr-about__l a:hover{color:var(--dh-accent-deep);border-color:var(--dh-accent-deep)}
.dhr .dhr-about__l a:hover svg{transform:translateX(2px)}
@media(min-width:880px){
  .dhr .dhr-about__l{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;border-top:0;font-size:14.5px;margin-top:.2rem}
  .dhr .dhr-about__l a{display:inline-flex;justify-content:flex-start;gap:.15rem;min-height:36px;font-weight:800;border-bottom:1.5px solid var(--dh-line-strong)}
  .dhr .dhr-about__l a svg{color:currentColor}
  .dhr .dhr-about__l a:last-child{border-bottom:1.5px solid var(--dh-line-strong)}
  .dhr .dhr-about__big{font-size:clamp(20px,17px + 1.2vw,30px);line-height:1.4;max-width:22ch}
  .dhr .dhr-about__idx{border-top:0;margin-top:0}
  .dhr .dhr-about__e:first-child{padding-top:0}
  .dhr .dhr-about__e h3{font-size:17.5px}
  .dhr .dhr-about__more summary{min-height:32px}
  .dhr .dhr-about__e .dhr-about__more,.dhr .dhr-about__lead .dhr-about__more{margin:0}
  .dhr .dhr-about__g{grid-template-columns:5fr 7fr;gap:0;padding-top:2rem}
  .dhr .dhr-about__lead{padding-right:3rem;border-right:1px solid var(--dh-line);position:sticky;top:calc(var(--dh-hdr,68px) + 24px);align-self:start}
  .dhr .dhr-about__idx{padding-left:3rem}
  .dhr .dhr-about__e{grid-template-columns:minmax(0,1fr);gap:.75rem;padding:1.5rem 0}
  .dhr .dhr-about__line::before{right:30%}
  .dhr .dhr-about__lead .dhr-about__more[open] summary{display:none}
  .dhr .dhr-about__lead .dhr-about__more[open] p{margin-top:0}
}
@media(prefers-reduced-motion:reduce){.dhr .ends .ss.is-tick{animation:none} body.dhr-imgfx img{opacity:1;transform:none}}

/* ===== 홈 레이아웃 — 유리 시안 A (2026-10-06) =====
 * 히어로: 왼쪽 글 · 오른쪽 무대(사진 + 할인 알약 + 유리 캡션). 숫자 셋. 브랜드는 큰 카드(글자 원 · 눈썹 · 이름 · 한 줄 · 버튼). */
/* 슬라이드는 같은 칸(1/1)에 겹쳐 두고 .on 만 보인다 — 크로스페이드(흐림 4px → 0, 8px 올라옴). 높이는 가장 긴 장 */
.dhr .hhero{display:grid;grid-template-columns:minmax(0,1fr)}
.dhr .hslide{grid-area:1/1;display:grid;gap:1.2rem;padding:1.6rem 0 .8rem;align-items:center;min-width:0;
  transition:opacity .42s cubic-bezier(.23,1,.32,1),filter .42s cubic-bezier(.23,1,.32,1),transform .42s cubic-bezier(.23,1,.32,1)}
.dhr .hslide:not(.on){opacity:0;filter:blur(4px);transform:translateY(8px);pointer-events:none;visibility:hidden;
  transition:opacity .22s ease-out,filter .22s ease-out,transform .22s ease-out,visibility 0s .22s}
.dhr .hero__dots{grid-area:2/1;display:flex;gap:.1rem;margin:0 0 .2rem -.4rem}
.dhr .hero__dots .hdot{width:30px;height:32px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;border-radius:999px}
.dhr .hero__dots .hdot i{display:block;width:8px;height:8px;border-radius:999px;background:var(--dh-line-strong);transition:width .32s cubic-bezier(.23,1,.32,1),background .2s}
.dhr .hero__dots .hdot.on i{width:22px;background:var(--dh-ink)}
.dhr .hero__dots .hdot:focus-visible{outline:2px solid var(--dh-accent);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.dhr .hslide,.dhr .hslide:not(.on){transition:opacity .2s;filter:none;transform:none}}
.dhr .hero__tx{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;min-width:0}
.dhr .hero__eb{display:inline-flex;align-items:center;gap:.45rem}
.dhr .hero__eb i{width:8px;height:8px;border-radius:50%;background:var(--dh-accent);animation:dhr-blink 1.6s ease-in-out infinite}
@keyframes dhr-blink{0%,100%{opacity:1}50%{opacity:.35}}
.dhr .hero__t{margin:0;font-size:clamp(2rem,1.3rem + 3.4vw,3.9rem);font-weight:900;line-height:1.08;letter-spacing:0;color:var(--dh-ink);text-wrap:balance}
.dhr .hero__sub{font-size:16px;line-height:1.6;color:var(--dh-ink-2);max-width:36ch}
.dhr .hero__cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}
.dhr .stage{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--dh-radius-xl,28px);background:var(--dh-surface);box-shadow:var(--lift-0,0 1px 2px rgba(17,17,17,.06));overflow:hidden;transform-origin:50% 0;color:var(--dh-ink);text-decoration:none}
.dhr .stage__img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--dh-surface-2)}
.dhr .stage__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){.dhr .stage:hover .stage__img img{transform:scale(1.03)}}
.dhr .stage__pill{position:absolute;left:16px;top:16px;z-index:2;padding:.35rem .75rem;border-radius:999px;background:var(--dh-ink);color:var(--dh-surface);font-size:13px;font-weight:800;line-height:1.2}
.dhr .stage__cap{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.75rem 1rem;border-radius:999px;background:var(--dh-glass);border:1px solid var(--dh-glass-line);box-shadow:inset 0 1px 0 var(--dh-glass-hi),var(--dh-shadow);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
@media(prefers-reduced-transparency:reduce){.dhr .stage__cap{background:var(--dh-surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
.dhr .stage__cap b{font-size:15px;font-weight:800;color:var(--dh-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dhr .stage__cap .n{flex:0 0 auto;display:flex;align-items:baseline;gap:.35rem;font-variant-numeric:tabular-nums}
.dhr .stage__cap s{font-size:12.5px;color:var(--dh-ink-3)}
.dhr .stage__cap em{font-style:normal;font-size:17px;font-weight:900;color:var(--dh-ink)}
@media(min-width:880px){
  /* 무대는 상품 사진과 같은 정사각형 (사장님 2026-10-09 「카드 썸네일 사이즈 안 맞으니」 — 4:3 칸에 1:1 사진이라 위아래가 잘렸다).
     글 칸과 무대는 같은 높이의 가운데로 맞추고, 점은 글 칸 왼쪽 선에 붙인다 (「정렬도 맞추고」). */
  .dhr .hslide{grid-template-columns:minmax(0,1fr) min(440px,40%);gap:clamp(2rem,1rem + 3vw,4.5rem);padding:3.2rem 0 1.6rem;min-height:0}
  .dhr .stage{aspect-ratio:1/1}
  .dhr .hero__sub{font-size:17px}
  .dhr .hero__dots{margin:0 0 0 -.4rem}
}
/* 숫자 셋 */
.dhr .nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:1rem 0 .2rem;border-radius:var(--dh-radius-lg,20px);background:var(--dh-surface);box-shadow:var(--lift-0,0 1px 2px rgba(17,17,17,.06));overflow:hidden}
.dhr .num{padding:.95rem .6rem;text-align:center;min-width:0}
.dhr .num:nth-child(2n){border-left:1px solid var(--dh-line)}
.dhr .num:nth-child(n+3){border-top:1px solid var(--dh-line)}
.dhr .num b{display:block;font-size:clamp(1.45rem,1.15rem + 1.8vw,2.6rem);font-weight:900;line-height:1.1;color:var(--dh-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dhr .num span{display:block;margin-top:.3rem;font-size:13px;line-height:1.3;color:var(--dh-ink-3);font-weight:600}
@media(min-width:600px){.dhr .nums{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:none;box-shadow:none;overflow:visible;border-radius:0}
  .dhr .num{padding:1rem .9rem;border-radius:var(--dh-radius-lg);background:var(--dh-surface);box-shadow:var(--lift-0,0 1px 2px rgba(17,17,17,.06))}
  .dhr .num:nth-child(2n){border-left:0}.dhr .num:nth-child(n+3){border-top:0}}
/* 브랜드 큰 카드 */
.dhr .bgrid{grid-template-columns:1fr}
@media(min-width:880px){.dhr .bgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.dhr .bcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.55rem;min-height:300px;padding:1.4rem;border-radius:var(--dh-radius-xl,28px);background:var(--dh-surface);box-shadow:var(--lift-0,0 1px 2px rgba(17,17,17,.06));overflow:hidden;transform:none}
.dhr .bcard__pic{position:absolute;right:-22px;top:-22px;width:46%;max-width:190px;aspect-ratio:1/1;border-radius:50%;background:var(--dh-surface-2);display:flex;align-items:center;justify-content:center;font-size:clamp(3rem,2rem + 5vw,5.5rem);font-weight:900;color:var(--dh-ink);opacity:.9;pointer-events:none}
.dhr .bcard__eb{position:relative}
.dhr .bcard__t{margin:0;font-size:clamp(1.7rem,1.3rem + 2vw,2.5rem);font-weight:900;line-height:1.1;color:var(--dh-ink);letter-spacing:0}
.dhr .bcard__p{margin:0;font-size:15px;line-height:1.6;color:var(--dh-ink-2);max-width:38ch}
.dhr .bcard__cta{margin-top:.4rem}
.dhr .stk .bcard--inv,.dhr .bcard--inv{background:var(--dh-ink);color:var(--dh-surface)}
.dhr .bcard--inv .bcard__t{color:var(--dh-surface)}.dhr .bcard--inv .bcard__p{color:var(--dh-surface);opacity:.78}.dhr .bcard--inv .bcard__eb{color:var(--dh-accent)}
.dhr .bcard--inv .bcard__pic{background:rgba(127,127,127,.22);color:var(--dh-surface)}
.dhr .stk .bcard--acc,.dhr .bcard--acc{background:var(--dh-accent-soft)}
.dhr .bcard--acc .bcard__pic{background:rgba(26,92,255,.14)}
@media(min-width:880px){.dhr .stk .bcard,.dhr .bcard{min-height:340px}}

/* 신제품 글자 줄 (2026-10-06) — 썸네일 · 이름/규격 · 값 · 꺾쇠. 카드가 아니라 줄이라 한 화면에 여섯이 들어간다 */
.dhr .rows{display:grid;gap:0;background:var(--dh-surface);border-radius:var(--dh-radius-lg);box-shadow:var(--lift-0,0 1px 2px rgba(17,17,17,.06));padding:.25rem .9rem;overflow:hidden}
.dhr .row{display:grid;grid-template-columns:64px minmax(0,1fr) auto 20px;gap:.8rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--dh-line);color:var(--dh-ink);text-decoration:none;min-height:80px;transition:transform .42s cubic-bezier(.22,1,.36,1)}
.dhr .row:first-child{border-top:0}
.dhr .row__th{width:64px;height:64px;border-radius:14px;overflow:hidden;background:var(--dh-surface-2);display:flex;align-items:center;justify-content:center}
.dhr .row__th img{width:100%;height:100%;object-fit:cover}
.dhr .row__tx{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.dhr .row__nm{font-size:15.5px;font-weight:700;line-height:1.35;color:var(--dh-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dhr .row__sp{font-size:13px;color:var(--dh-ink-3)}
.dhr .row__pr{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;white-space:nowrap}
.dhr .row__pr s{font-size:12.5px;color:var(--dh-ink-3)}
.dhr .row__pr b{font-size:16.5px;font-weight:800;color:var(--dh-ink)}
.dhr .row__go{color:var(--dh-ink-3);display:flex}
.dhr .row__go svg{width:18px;height:18px}
@media(min-width:880px){.dhr .rows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.4rem;padding:.4rem 1.4rem}.dhr .row{grid-template-columns:72px minmax(0,1fr) auto 20px}.dhr .row__th{width:72px;height:72px}.dhr .row:nth-child(2){border-top:0}}
@media(hover:hover) and (pointer:fine){.dhr .row:hover .row__nm{color:var(--dh-accent-deep)}}

/* ══ ③ 목록 · 카드 — 유리 시안 A (design/glass/shop.html · 2026-10-07) ══════════════
   카드는 불투명(블러 없음) · 20px 모서리 · 1px 선 + 옅은 그림자. 호버는 2px 만 뜬다 — 하루 수십 번
   보는 동작이라 크게 움직이면 피곤하다(Emil). 3D 기울임 · 사진 확대 · 두 겹 그림자는 뺐다.
   구매하기는 폭을 다 쓰는 40px 알약(폰 · 데스크톱 같게). 가격은 한 줄: 파는 값 → 정가(취소선) → 할인율.
   비로그인의 「19」 사진은 키플 게이트 그대로지만 **작게 가운데** 그려 배지처럼 읽히게 한다 — 우회가 아니다,
   같은 이미지를 작게 보여 줄 뿐이고 로그인하면(.is-gated 없음) 사진이 칸을 다 채운다. */
.dhr .card{border-radius:20px;padding:10px 10px 10px;background:var(--dh-surface);border:1px solid var(--dh-line);box-shadow:0 1px 2px rgba(20,22,26,.04),0 12px 32px rgba(20,22,26,.06);transform:none;transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s ease,border-color .2s ease}
@media(hover:hover) and (pointer:fine){.dhr .card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(20,22,26,.05),0 18px 40px rgba(20,22,26,.1);border-color:var(--dh-line-strong)}}
.dhr .card:hover .fig img{transform:none}
.dhr .card.is-press{transform:scale(.975)!important}
.dhr .card .fig{margin:0;border-radius:12px;background:var(--dh-surface-2)}
.dhr .card .fig img{transition:none}
/* 비로그인 — 「19」 이미지를 칸의 절반 크기로 가운데에. 아래 띠(가입하면 사진 공개)는 그대로 */
.dhr .card.is-gated .fig img{position:absolute;left:0;right:0;top:0;bottom:2.1rem;margin:auto;width:46%;height:46%;object-fit:contain;transform:none;mix-blend-mode:multiply}
/* 다크: 곱하기 블렌드면 검은 숫자가 어두운 바탕에 묻힌다 → 흰 둥근 배지 그대로 */
html[data-theme="dark"] .dhr .card.is-gated .fig img{mix-blend-mode:normal;border-radius:14px}
.dhr .card .fig .lock{font-size:12px;font-weight:700;padding:.4rem .5rem;background:var(--dh-ink);color:var(--dh-surface)}
.dhr .eb{top:8px;left:8px;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--dh-ink);color:var(--dh-surface)}
.dhr .eb.sale,.dhr .eb.new{background:var(--dh-accent);color:var(--dh-accent-ink)}
.dhr .eb.best{background:var(--dh-ink);color:var(--dh-surface)}
.dhr .eb.out{background:var(--dh-ink-3);color:var(--dh-surface)}
.dhr .card .bd{padding:10px 2px 0;gap:4px}
.dhr .card .nm{font-size:14.5px;font-weight:700;line-height:1.35;min-height:0}
.dhr .meta{font-size:12.5px;gap:.25rem}
.dhr .pr{margin-top:0;padding:4px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.dhr .pr b{order:-1;flex-basis:auto;font-size:17px;font-weight:800;white-space:nowrap}
.dhr .pr b small{font-size:12px;font-weight:700;margin-left:1px;color:var(--dh-ink-3)}
.dhr .pr s{order:0;flex-basis:auto;font-size:12px;font-weight:500;color:var(--dh-ink-3);margin:0}
.dhr .pr .off{order:1;font-size:12px;font-weight:800;color:var(--dh-accent-deep);font-style:normal}
.dhr .perb{margin:0;font-size:12px;font-weight:600;color:var(--dh-ink-3)}
.dhr .card .buy,.dhr .card .buy.is-out{margin:10px 0 0;align-self:stretch;min-height:40px;padding:0 .9rem;font-size:13px;font-weight:800;border-radius:999px;box-shadow:none;transition:transform .16s cubic-bezier(.23,1,.32,1),filter .2s,background-color .2s}
.dhr .card .buy:hover{transform:translateY(-1px);filter:none;background:var(--dh-ink-2)}
.dhr .card .buy:active{transform:scale(.97);box-shadow:none}
.dhr .card .buy.is-out{background:var(--dh-surface-2);color:var(--dh-ink-3)}
.dhr .grid{gap:12px}
@media(min-width:880px){.dhr .grid{gap:16px}}
/* 폰(두 칸): 파는 값 한 줄, 그 아래 정가 + 할인율 한 줄 — 셋을 한 줄에 두면 세 줄로 꺾인다 */
@media(max-width:639px){.dhr .pr b{font-size:16px;flex-basis:100%}.dhr .pr .off{font-size:12px}.dhr .card .buy{align-self:stretch}}
@media(prefers-reduced-motion:reduce){.dhr .card,.dhr .card .buy{transition:none}}

/* 홈 — 타일 바로 아래 가림 안내: 위아래 16px 한 리듬 (2026-10-07, 사장님 「간격이 문제」) */
.dhr .qcats + .dhr-gate{margin:1rem 0 1rem}

/* ④ 담기 완료 막 (2026-10-08, 유리 시안) — 화면 전체가 흐려지고 가운데 유리 카드에 체크 원이 그려진다.
   유리는 헤더 · 탭바 · 시트 · 이 막에만. 움직이는 것은 opacity · transform · stroke-dashoffset 뿐 */
.dhr .dhd{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px;background:var(--dh-veil);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);opacity:0;transition:opacity .2s ease}
.dhr .dhd[hidden]{display:none}
.dhr .dhd.on{opacity:1}
.dhr .dhd__k{width:min(100%,360px);display:grid;justify-items:center;gap:12px;padding:28px 24px;border-radius:28px;background:linear-gradient(180deg,var(--dh-glass-hi),transparent 42%),var(--dh-glass);border:1px solid var(--dh-glass-line);box-shadow:inset 0 1px 0 var(--dh-glass-hi),var(--dh-shadow);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);transform:scale(.95);opacity:0;transition:transform .24s cubic-bezier(.23,1,.32,1),opacity .24s cubic-bezier(.23,1,.32,1);outline:0}
.dhr .dhd.on .dhd__k{transform:none;opacity:1}
.dhr .dhd__ring{width:96px;height:96px;border-radius:50%;background:var(--dh-accent);display:grid;place-items:center;box-shadow:0 12px 28px rgba(26,92,255,.32);transform:scale(.9);transition:transform .3s cubic-bezier(.23,1,.32,1) .08s}
.dhr .dhd.on .dhd__ring{transform:none}
.dhr .dhd__ring svg{width:48px;height:48px;fill:none;stroke:var(--dh-accent-ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .36s cubic-bezier(.23,1,.32,1) .12s}
.dhr .dhd.on .dhd__ring svg{stroke-dashoffset:0}
.dhr .dhd__t{margin:4px 0 0;font-size:22px;font-weight:900;line-height:1.3;color:var(--dh-ink);text-align:center;word-break:keep-all}
.dhr .dhd__s{margin:0;font-size:14px;line-height:1.5;color:var(--dh-ink-2);text-align:center;word-break:keep-all}
.dhr .dhd__s[hidden]{display:none}
.dhr .dhd__btn{width:100%;min-height:48px;margin-top:6px;padding:0 1.2rem;border:0;border-radius:999px;background:var(--dh-primary);color:var(--dh-primary-ink);font:inherit;font-size:16px;font-weight:800;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.dhr .dhd__btn:active{transform:scale(.97)}
.dhr .dhd__skip{min-height:40px;padding:0 1rem;border:0;border-radius:999px;background:transparent;color:var(--dh-ink-2);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.dhr .dhd__skip:hover{color:var(--dh-ink)}
.dhr .dhd__skip[hidden]{display:none}
body.dhr.dhd-open{overflow:hidden}
@media(prefers-reduced-transparency:reduce){.dhr .dhd{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(17,17,17,.62)}.dhr .dhd__k{background:var(--dh-surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.dhr .dhd,.dhr .dhd__k,.dhr .dhd__ring,.dhr .dhd__ring svg{transition:opacity .2s ease}.dhr .dhd__k,.dhr .dhd__ring{transform:none}.dhr .dhd__ring svg{stroke-dashoffset:0}}

@media(prefers-reduced-transparency:reduce){.dhr .dhsearch__panel{background:var(--dh-surface);-webkit-backdrop-filter:none;backdrop-filter:none}.dhr .dhsearch__dim{-webkit-backdrop-filter:none;backdrop-filter:none}.dhr .dhc__panel{background:var(--dh-surface);-webkit-backdrop-filter:none;backdrop-filter:none}.dhr .dhc__dim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(17,17,17,.62)}}

/* ── 홈 맨 위 영상 띠 (2026-10-09, 사장님 「히어로 배너처럼 큰 화면 · 영상 밑에 구매하기」) ──
   회원에게만 그린다. 영상과 아래 구매 줄은 한 장의 어두운 판 — 라이트 · 다크 어느 쪽이든 같은 색이다
   (영상 자체가 어둡다). 데스크톱 16:9 · 폰 9:16 파일이 없으면 1:1 원본을 가운데에 두고 양옆을 같은 어둠으로 녹인다. */
.dhr .hvid{position:relative;background:#07090D;color:#F3F4F6;margin:0 0 clamp(1.2rem,.8rem + 1.6vw,2.2rem)}
.dhr .hvid__media{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:9/16;height:auto;margin:0 auto;background:#07090D}
.dhr .hvid__v{display:block;width:100%;height:100%;object-fit:cover}
.dhr .hvid--sq .hvid__media{aspect-ratio:1/1;max-height:none}
/* 구매 줄은 영상 위에 얹는다 (2026-10-09, 사장님 「밑에 두지 말고 영상 위에 텍스트랑 버튼만」).
   아래에서 올라오는 어둠 그라데이션 위에 글 · 버튼. 블러는 쓰지 않는다 (움직이는 영상 위라 매 프레임 다시 그린다).
   글자 칸은 클릭이 영상 링크로 지나가게 두고, 버튼만 눌린다. */
.dhr .hvid__bar{position:absolute;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(to top,rgba(7,9,13,.94) 0%,rgba(7,9,13,.78) 38%,rgba(7,9,13,.32) 72%,rgba(7,9,13,0) 100%)}
.dhr .hvid__in{max-width:760px;margin:0 auto;padding:clamp(4.5rem,3rem + 6vw,8rem) 1.25rem clamp(1.4rem,1rem + 1.6vw,2.4rem);display:flex;flex-direction:column;align-items:center;text-align:center;font-family:inherit}
.dhr .hvid__eb{margin:0 0 .5rem;font-size:.8125rem;line-height:1.2;font-weight:700;letter-spacing:.16em;color:#C3CAD5;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.dhr .hvid__t{margin:0;font-size:clamp(1.6rem,1.05rem + 2.4vw,3rem);line-height:1.14;font-weight:800;color:#fff;word-break:keep-all;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.dhr .hvid__sub{margin:.55rem 0 0;font-size:clamp(.95rem,.9rem + .3vw,1.125rem);line-height:1.5;font-weight:600;color:#DDE2EA;word-break:keep-all;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.dhr .hvid__p{margin:.9rem 0 0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.25rem .6rem;font-variant-numeric:tabular-nums;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.dhr .hvid__p b{font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem);line-height:1.2;font-weight:800;color:#fff}
.dhr .hvid__p s{font-size:1rem;font-weight:600;color:#A9B1BE}
.dhr .hvid__p em{font-style:normal;font-size:.8125rem;line-height:1;font-weight:800;color:#fff;background:var(--dh-accent,#1A5CFF);padding:.4rem .6rem;border-radius:999px;text-shadow:none}
.dhr .hvid__cta{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:1.15rem;padding:0 1.9rem;border-radius:999px;background:var(--dh-accent,#1A5CFF);color:#fff;font-size:1.0625rem;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:0 8px 24px rgba(26,92,255,.35);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s ease}
.dhr .hvid__cta:active{transform:scale(.97);transition-duration:.1s}
/* 영상 위 글자는 늘 영상보다 위 층 (2026-10-12, 사장님 라이트 캡처 — 기기 병이 제목 앞을 가리고 제목이 어둡게 보였다).
   영상 칸 0 · 글자 칸 2 로 순서를 못 박고, 글자 칸을 자기 층으로 올린다. 제목 색 · 투명도는 다른 규칙이 못 덮게 */
.dhr .hvid{isolation:isolate}
.dhr .hvid .hvid__media{z-index:0}
.dhr .hvid .hvid__bar{z-index:2;transform:translateZ(0)}
.dhr .hvid .hvid__t{color:#fff !important;-webkit-text-fill-color:#fff;opacity:1 !important}

.dhr .hvid__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (hover:hover){.dhr .hvid__cta:hover{background:#3A73FF}}
@media (max-width:479px){.dhr .hvid__cta{align-self:stretch}}
@media (min-width:600px){.dhr .hvid--sq .hvid__media{aspect-ratio:auto;height:clamp(360px,calc(100dvh - 300px),640px);display:flex;justify-content:center}
  .dhr .hvid--sq .hvid__v{width:auto;height:100%;aspect-ratio:1/1;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}}
/* 데스크톱은 유리 카드 한 장 (사장님 2026-10-09 「여백을 없애고 글래스모피즘 박스 · 영상이 딱 박스 사이즈에서」).
   카드 안쪽 칸이 영상과 같은 16:9 라 잘리지도 비지도 않는다. 폭은 콘텐츠 폭(1200px)에 묶여 화면이 넓어도 높이가 끝없이 커지지 않는다.
   폰은 화면 폭을 다 쓰는 9:16 그대로 (사장님 「모바일은 사이즈 조정만」). */
@media (min-width:880px){
  .dhr .hvid{--fr:10px;width:min(1200px,calc(100% - 2*clamp(1.1rem,.6rem + 2vw,2.5rem)));margin:clamp(.9rem,.6rem + 1vw,1.5rem) auto clamp(1.6rem,1rem + 1.6vw,2.6rem);padding:var(--fr);border-radius:32px;background:linear-gradient(180deg,var(--dh-glass-hi),transparent 40%),var(--dh-glass);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 0 0 1px var(--dh-glass-in-line),inset 0 1px 0 var(--dh-glass-hi),0 2px 6px rgba(15,23,42,.06),0 30px 70px -24px rgba(26,92,255,.32)}
  .dhr .hvid__media{height:auto;aspect-ratio:16/9;max-height:none;width:100%;border-radius:calc(32px - var(--fr));background:#07090D}
  .dhr .hvid__bar{left:var(--fr);right:var(--fr);bottom:var(--fr);border-radius:0 0 calc(32px - var(--fr)) calc(32px - var(--fr))}
}
@media (min-width:880px) and (prefers-reduced-transparency:reduce){.dhr .hvid{background:var(--dh-surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (min-width:880px){.dhr .hvid__cta{min-height:56px;padding:0 2.25rem;font-size:1.125rem}}