.dh-detail{
  --ink:#1F1F1D;
  --paper:#FAF8F3;
  --deep:#141F12;
  --green:#2E3D2B;
  --clay:#C4502F;
  --gold:#E3C36B;
  --light:#F5F2EA;

  box-sizing:border-box;width:100%;margin:0 auto;
  /* 카페24 상세 영역 안에 들어가므로 뷰포트가 아니라 "이 박스"를 기준으로 높이를 잡는다 */
  container-type:inline-size;
  background:var(--deep);color:var(--light);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.dh-detail *{box-sizing:border-box;min-width:0}
.dh-detail img,.dh-detail video{display:block;max-width:100%}
.dh-detail p,.dh-detail h1,.dh-detail h2,.dh-detail h3{margin:0}
.dh-detail h1,.dh-detail h2,.dh-detail h3,.dh-detail p,
.dh-detail li,.dh-detail td,.dh-detail th,.dh-detail div{
  word-break:keep-all;overflow-wrap:break-word;
}


/* ============ 사진 위 텍스트 블록 (모든 섹션 공통) ============ */
.dh-s{position:relative;min-height:360px;display:flex;align-items:center;overflow:hidden}
.dh-s--short{min-height:360px}
@supports (min-height:1cqw){
  .dh-s{min-height:128cqw}          /* 세로로 넉넉하게 */
  .dh-s--short{min-height:104cqw}
}
.dh-s__bg{position:absolute;inset:0}
.dh-s__bg img{width:100%;height:100%;object-fit:cover}
.dh-s__bg video{width:100%;height:100%;object-fit:cover}
/* 사진을 죽여서 글자를 살린다 — 박스를 깔지 않는다 */
.dh-s__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,
      #141F12 0%, rgba(20,31,18,.90) 3%, rgba(12,20,10,.62) 9%,
      rgba(8,14,7,.26) 22%, rgba(8,14,7,.30) 46%, rgba(8,14,7,.62) 68%,
      rgba(12,20,10,.88) 84%, rgba(18,28,16,.97) 94%, #141F12 100%);
}
.dh-s__scrim--side{
  background:
    linear-gradient(105deg,rgba(8,14,7,.94) 0%,rgba(8,14,7,.72) 45%,rgba(8,14,7,.18) 100%),
    linear-gradient(to bottom,
      #141F12 0%, rgba(20,31,18,.88) 4%, rgba(8,14,7,.20) 16%,
      rgba(8,14,7,.20) 78%, rgba(12,20,10,.86) 92%, #141F12 100%);
}
/* 글자가 많은 섹션은 사진을 더 눌러야 읽힌다 */
.dh-s__scrim--heavy{
  background:
    linear-gradient(to bottom,
      #141F12 0%, rgba(18,28,16,.95) 6%, rgba(8,14,7,.84) 24%,
      rgba(8,14,7,.84) 76%, rgba(18,28,16,.95) 94%, #141F12 100%);
}
.dh-s__in{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:44px 20px}

/* ============ 타이포 ============ */
.dh-lab{
  display:inline-block;font-size:clamp(12px,2.8cqw,15px);letter-spacing:.22em;font-weight:700;
  color:var(--gold);margin-bottom:16px;
  padding:7px 14px;border:1px solid rgba(227,195,107,.45);border-radius:100px;
  background:rgba(227,195,107,.08);
}
.dh-t{
  font-weight:900;
  font-size:clamp(35px,9.4cqw,112px);line-height:1.06;letter-spacing:-.045em;
  margin-bottom:24px;
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.7));
}
.dh-t b{font-weight:900;color:var(--gold)}
.dh-p{
  font-size:clamp(17px,4.1cqw,26px);line-height:1.72;font-weight:500;
  color:rgba(245,242,234,.94);
  max-width:32em;text-shadow:0 2px 16px rgba(0,0,0,.75);
}
.dh-sm{font-size:clamp(14px,3.3cqw,19px);line-height:1.7;color:rgba(245,242,234,.62);margin-top:20px;max-width:34em}

/* 반짝이는 글자 — 금빛 샤인이 훑고 지나간다 */
.dh-shine{
  background:linear-gradient(100deg,
    #FFFDF6 0%,#FFFDF6 30%,#FFD97A 42%,#FFFCEA 50%,#FFD97A 58%,#FFFDF6 70%,#FFFDF6 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:dh-shine 3.2s linear infinite;
}
@keyframes dh-shine{from{background-position:120% 0}to{background-position:-120% 0}}
/* 밝은 배경용 샤인 — 어두운 금색 위로 밝은 금빛이 지나간다 */
.dh-s--light .dh-shine,.dh-br--light .dh-shine{
  background:linear-gradient(100deg,
    #8A6A16 0%,#8A6A16 28%,#E8C860 40%,#FFF3C4 50%,#E8C860 60%,#8A6A16 72%,#8A6A16 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:dh-shine 3.2s linear infinite;
}

/* 금색 그라디언트 글자 */
.dh-gold{
  background:linear-gradient(160deg,#F7E7B4 0%,#E3C36B 45%,#B8933D 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* 반짝이 입자 */
.dh-spark{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dh-spark i{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,235,170,.9) 40%,rgba(255,235,170,0) 70%);
  opacity:0;animation:dh-tw 2.1s ease-in-out infinite;
}
@keyframes dh-tw{
  0%,100%{opacity:0;transform:scale(.4)}
  45%{opacity:1;transform:scale(1.5)}
}
.dh-spark i:nth-child(1){left:12%;top:22%;animation-delay:0s}
.dh-spark i:nth-child(2){left:78%;top:16%;animation-delay:.5s;width:6px;height:6px}
.dh-spark i:nth-child(3){left:34%;top:68%;animation-delay:1.1s}
.dh-spark i:nth-child(4){left:88%;top:54%;animation-delay:1.7s;width:5px;height:5px}
.dh-spark i:nth-child(5){left:56%;top:34%;animation-delay:2.2s}
.dh-spark i:nth-child(6){left:22%;top:82%;animation-delay:2.8s;width:6px;height:6px}
.dh-spark i:nth-child(7){left:66%;top:78%;animation-delay:.9s}
.dh-spark i:nth-child(8){left:44%;top:12%;animation-delay:1.4s}
.dh-spark i:nth-child(9){left:8%;top:52%;animation-delay:0.3s;width:5px;height:5px}
.dh-spark i:nth-child(10){left:92%;top:34%;animation-delay:0.8s;width:4px;height:4px}
.dh-spark i:nth-child(11){left:50%;top:88%;animation-delay:1.3s;width:6px;height:6px}
.dh-spark i:nth-child(12){left:28%;top:42%;animation-delay:1.7s;width:4px;height:4px}
.dh-spark i:nth-child(13){left:72%;top:62%;animation-delay:0.2s;width:5px;height:5px}
.dh-spark i:nth-child(14){left:16%;top:72%;animation-delay:1.0s;width:4px;height:4px}
.dh-spark i:nth-child(15){left:60%;top:18%;animation-delay:1.5s;width:6px;height:6px}
.dh-spark i:nth-child(16){left:84%;top:84%;animation-delay:1.9s;width:4px;height:4px}


/* ============ 히어로 ============ */
.dh-hero{min-height:480px}
@supports (min-height:1cqw){.dh-hero{min-height:126cqw}}
/* 글씨는 위에 박고, 아래는 배경(영상/제품)이 숨 쉬게 비워 둔다 */
.dh-hero{align-items:flex-start}
.dh-hero .dh-s__in{align-self:flex-start;padding-top:13cqw;padding-bottom:0}
/* 위는 눌러서 글씨를 살리고, 아래는 열어서 제품을 보여준다 */
.dh-hero .dh-s__scrim{
  background:linear-gradient(to bottom,
    rgba(26,10,4,.90) 0%, rgba(26,10,4,.84) 12%, rgba(26,10,4,.62) 26%,
    rgba(26,10,4,.34) 40%, rgba(26,10,4,.12) 56%, rgba(26,10,4,.06) 72%,
    rgba(20,14,8,.22) 90%, #141F12 100%);
}
/* 제품이 아래쪽에 놓이도록 프레임을 위쪽으로 당긴다 */
.dh-hero__vid,.dh-hero__img{object-position:center 26%}
.dh-hero__t{
  color:#F5F2EA;-webkit-text-fill-color:#F5F2EA;
  font-weight:900;
  font-size:clamp(42px,11.6cqw,150px);line-height:1.0;letter-spacing:-.055em;
  margin-bottom:22px;filter:drop-shadow(0 8px 40px rgba(0,0,0,.75));
}
.dh-hero__img{display:none}
.dh-hero__vid{display:block}
@keyframes dh-kb{from{transform:scale(1)}to{transform:scale(1.12)}}

/* 스크롤 유도 */
.dh-scroll{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  width:1px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.85));
  animation:dh-sc 2s ease-in-out infinite;
}
@keyframes dh-sc{0%,100%{opacity:.25;height:30px}50%{opacity:1;height:52px}}

/* ============ 흐르는 띠 ============ */
.dh-band{
  background:var(--clay);color:#fff;overflow:hidden;
  padding:15px 0;white-space:nowrap;
  border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
}
.dh-band__t{
  display:inline-block;font-size:clamp(14px,3.3cqw,19px);font-weight:700;letter-spacing:.1em;
  animation:dh-roll 22s linear infinite;
}
.dh-band__t span{padding:0 26px}
@keyframes dh-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ 스펙 4칸 ============ */
.dh-spec{background:var(--deep);padding:0;position:relative}
.dh-spec__g{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr}
.dh-spec__c{
  padding:30px 20px;text-align:center;
  border-bottom:1px solid rgba(245,242,234,.12);border-right:1px solid rgba(245,242,234,.12);
}
.dh-spec__c:nth-child(2n){border-right:none}
.dh-spec__c:nth-child(n+3){border-bottom:none}
.dh-spec__k{font-size:clamp(12px,2.8cqw,15px);letter-spacing:.16em;color:rgba(227,195,107,.75);margin-bottom:9px}
.dh-spec__v{font-weight:800;font-size:clamp(19px,4.8cqw,32px);line-height:1.25;letter-spacing:-.02em}

/* ============ 숫자 훅 ============ */
.dh-num{
  font-weight:900;
  font-size:clamp(105px,32.5cqw,291px);line-height:.88;letter-spacing:-.07em;
  display:block;margin:6px 0 4px;
  filter:drop-shadow(0 0 42px rgba(227,195,107,.4));
}
.dh-num small{font-size:.32em;letter-spacing:0}

/* ============ 재료 카드 — 사진과 글자를 분리해 둘 다 선명하게 ============ */
.dh-cards{display:grid;gap:16px;margin-top:38px}
.dh-card{
  position:relative;overflow:hidden;border-radius:6px;padding:0;
  background:rgba(245,242,234,.07);border:1px solid rgba(245,242,234,.20);
  display:flex;flex-direction:column;
}
.dh-s--light .dh-card{background:#fff;border-color:#E0DACA;box-shadow:0 10px 30px rgba(31,31,29,.07)}
/* 사진 — 흐리게 깔지 않고 또렷하게 보여준다 */
.dh-card__ph{position:relative;aspect-ratio:5/3;overflow:hidden;background:#DDD9CD}
.dh-card__ph img{width:100%;height:100%;object-fit:cover;display:block}
.dh-card__no{
  position:absolute;left:12px;top:12px;z-index:2;
  min-width:30px;height:30px;padding:0 8px;border-radius:100px;
  background:rgba(20,31,18,.82);color:var(--gold);
  font-size:clamp(12px,3cqw,15px);font-weight:900;letter-spacing:.1em;
  display:flex;align-items:center;justify-content:center;
}
.dh-card__b{padding:20px 18px 22px;flex:1}
.dh-card__t{font-size:clamp(18px,4.5cqw,28px);font-weight:900;letter-spacing:-.025em;margin-bottom:8px}
.dh-card__d{font-size:clamp(15px,3.6cqw,22px);line-height:1.65;color:rgba(245,242,234,.78)}
/* 사진이 없는 항목은 톤만 (촬영 필요) */
.dh-card__ph--none{background:linear-gradient(150deg,#EFEDE6,#D9D6CB 55%,#C4C0B2)}
@media (min-width:768px){
  .dh-cards{grid-template-columns:repeat(3,1fr);gap:22px}


  .dh-card__b{padding:24px 22px 26px}
}

/* ============ 표 ============ */
.dh-tbl{width:100%;border-collapse:collapse;margin-top:26px;font-size:clamp(14px,3.3cqw,19px);max-width:640px}
.dh-tbl th,.dh-tbl td{padding:13px 8px;border-bottom:1px solid rgba(245,242,234,.14)}
.dh-tbl th{text-align:left;font-weight:400;color:rgba(245,242,234,.6);width:44%}
.dh-tbl td{text-align:right;font-variant-numeric:tabular-nums}
.dh-tbl tr.dh-hi th,.dh-tbl tr.dh-hi td{color:var(--gold);font-weight:700;font-size:clamp(17px,4.4cqw,24px)}

/* ============ 스텝 ============ */
.dh-steps{display:grid;gap:0;margin-top:24px;max-width:44em}
.dh-step{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid rgba(245,242,234,.14)}
.dh-step__n{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:#1A1A17;font-size:clamp(12px,2.8cqw,15px);font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-top:3px;
}
.dh-step__t{font-size:clamp(15px,3.6cqw,22px);line-height:1.65;color:rgba(245,242,234,.88)}

/* ============ 분기 카드 ============ */
.dh-fork{display:grid;gap:16px;margin-top:30px}
.dh-fk{position:relative;overflow:hidden;border-radius:3px;border:1px solid rgba(245,242,234,.2)}
.dh-fk__img{position:relative;height:210px;overflow:hidden}
.dh-fk__img img{width:100%;height:100%;object-fit:cover}
.dh-fk__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,14,7,.85),rgba(8,14,7,.1));
}
.dh-fk__tag{
  position:absolute;left:18px;bottom:16px;z-index:2;
  font-weight:900;font-size:clamp(23px,5.6cqw,38px);letter-spacing:-.03em;
}
.dh-fk__b{padding:24px 20px 26px;background:rgba(245,242,234,.06)}
.dh-fk__l{list-style:none;padding:0;margin:0 0 22px}
.dh-fk__l li{font-size:clamp(16px,4.2cqw,23px);color:rgba(245,242,234,.78);padding:6px 0 6px 15px;position:relative;line-height:1.6}
.dh-fk__l li::before{content:"";position:absolute;left:0;top:15px;width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ============ CTA ============ */
.dh-cta{
  position:relative;display:block;text-align:center;padding:18px 22px;
  background:var(--clay);color:#fff;text-decoration:none;
  font-size:clamp(16px,3.8cqw,23px);font-weight:800;letter-spacing:.02em;border-radius:3px;overflow:hidden;
  box-shadow:0 0 0 0 rgba(196,80,47,.6);animation:dh-pulse 2.6s ease-out infinite;
}
.dh-cta--gold{background:linear-gradient(135deg,#E3C36B,#C9A24A);color:#1A1A17;animation-name:dh-pulse-g}
@keyframes dh-pulse{0%{box-shadow:0 0 0 0 rgba(196,80,47,.55)}70%{box-shadow:0 0 0 16px rgba(196,80,47,0)}100%{box-shadow:0 0 0 0 rgba(196,80,47,0)}}
@keyframes dh-pulse-g{0%{box-shadow:0 0 0 0 rgba(227,195,107,.55)}70%{box-shadow:0 0 0 16px rgba(227,195,107,0)}100%{box-shadow:0 0 0 0 rgba(227,195,107,0)}}
/* 버튼 위 빛 스윕 */
.dh-cta::after{
  content:"";position:absolute;top:0;left:-100%;width:45%;height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0));
  transform:skewX(-20deg);animation:dh-sweep 3.2s ease-in-out infinite;
}

/* ============ 매장 ============ */
.dh-shops{display:grid;gap:0;margin-top:22px}
.dh-shop{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(245,242,234,.13)}
.dh-shop__n{font-size:clamp(16px,3.8cqw,23px);font-weight:700;flex:0 0 auto}
.dh-shop__a{font-size:clamp(14px,3.3cqw,19px);color:rgba(245,242,234,.55);text-align:right;line-height:1.5}


/* ============ 사진별 움직임 — 섹션마다 다르게 ============ */
.dh-s__bg img{transform-origin:center center;will-change:transform}
.dh-m1 img{animation:dh-m1 20s ease-in-out infinite alternate}
.dh-m2 img{animation:dh-m2 24s ease-in-out infinite alternate}
.dh-m3 img{animation:dh-m3 26s ease-in-out infinite alternate}
.dh-m4 img{animation:dh-m4 22s ease-in-out infinite alternate}
.dh-m5 img{animation:dh-m5 28s ease-in-out infinite alternate}
@keyframes dh-m1{from{transform:scale(1.02)}to{transform:scale(1.18)}}                      /* 밀고 들어가기 */
@keyframes dh-m2{from{transform:scale(1.18)}to{transform:scale(1.02)}}                      /* 빠져나오기 */
@keyframes dh-m3{from{transform:scale(1.16) translateX(3%)}to{transform:scale(1.16) translateX(-3%)}}   /* 왼쪽으로 */
@keyframes dh-m4{from{transform:scale(1.16) translateX(-3%)}to{transform:scale(1.16) translateX(3%)}}   /* 오른쪽으로 */
@keyframes dh-m5{from{transform:scale(1.14) translateY(2.5%)}to{transform:scale(1.14) translateY(-2.5%)}} /* 위로 */

/* ============ 스크롤 진입 효과 — 섹션마다 다르게 ============ */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .dh-slideL{opacity:0;transform:translateX(-46px);
      animation:dh-slideL linear both;animation-timeline:view();animation-range:entry 6% cover 32%}
    .dh-blur{opacity:0;filter:blur(14px);transform:translateY(26px);
      animation:dh-blur linear both;animation-timeline:view();animation-range:entry 6% cover 34%}
    .dh-stretch{opacity:0;letter-spacing:.16em;
      animation:dh-stretch linear both;animation-timeline:view();animation-range:entry 6% cover 36%}
  }
}
@keyframes dh-slideL{to{opacity:1;transform:translateX(0)}}
@keyframes dh-blur{to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes dh-stretch{to{opacity:1;letter-spacing:-.045em}}

/* ============================================================
   밝은 섹션 — 강조색은 금색 하나로 통일한다.
   밝은 배경에서는 밝은 금색이 안 읽히므로 톤만 낮춘 금색을 쓴다.
   ============================================================ */
.dh-s--light,.dh-br--light{--gold-on:#9A7A1E;--gold-on2:#7E6212}
.dh-s--light{background:var(--paper);color:var(--ink)}
.dh-s--light .dh-p{color:#3A3A36;text-shadow:none}
.dh-s--light .dh-sm{color:#6C6B64}
.dh-s--light .dh-t{filter:none}
.dh-s--light .dh-t b{color:var(--gold-on)}
.dh-s--light .dh-lab{
  color:var(--gold-on);border-color:rgba(154,122,30,.4);background:rgba(154,122,30,.07)}
.dh-s--light .dh-card{
  background:#fff;border-color:#E6E1D4;backdrop-filter:none;-webkit-backdrop-filter:none}
.dh-s--light .dh-step{border-color:#E6E1D4}
.dh-s--light .dh-step__t{color:#3A3A36}
.dh-s--light .dh-step__n{background:var(--gold-on);color:#fff}
.dh-s--light .dh-faq details{border-color:#E6E1D4}
.dh-s--light .dh-faq summary{color:var(--ink)}
.dh-s--light .dh-faq p{color:#5C5A53}
.dh-s--light .dh-faq summary::after{color:var(--gold-on)}
.dh-s--light .dh-rv__c{background:#fff;border-color:#E6E1D4}
.dh-s--light .dh-rv__s{color:#C9A227}
.dh-s--light .dh-rv__t{color:var(--ink)}
.dh-s--light .dh-rv__w{color:#8C8A82}
.dh-s--light .dh-stat{background:rgba(31,31,29,.05)}
.dh-s--light .dh-stat__k{color:#6C6B64}
/* 금빛 그라디언트 글자 — 밝은 배경용 */
.dh-s--light .dh-gold,.dh-br--light .dh-gold{
  background-image:linear-gradient(160deg,#C2A048 0%,#9A7A1E 48%,#7E6212 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.dh-s--light .dh-num{filter:drop-shadow(0 0 30px rgba(154,122,30,.18))}

/* 비교표 — 밝은 배경 대비 */
.dh-s--light .dh-vs{border-color:#DFD8C6}
.dh-s--light .dh-vs__h--a{background:#EFEADD;color:#8C8A82}
.dh-s--light .dh-vs__h--b{background:var(--gold-on);color:#fff}
.dh-s--light .dh-vs__c{border-color:#E6E1D4}
.dh-s--light .dh-vs__c--a{color:#96948C}
.dh-s--light .dh-vs__c--b{color:var(--ink);background:rgba(154,122,30,.08)}

/* 표 · 매장 · FOMO — 밝은 배경 대비 */
.dh-s--light .dh-tbl th,.dh-s--light .dh-tbl td{border-color:#E6E1D4}
.dh-s--light .dh-tbl th{color:#8C8A82}
.dh-s--light .dh-tbl td{color:var(--ink)}
.dh-s--light .dh-tbl tr.dh-hi th,.dh-s--light .dh-tbl tr.dh-hi td{color:var(--gold-on2)}
.dh-s--light .dh-shop{border-color:#E6E1D4}
.dh-s--light .dh-shop__a{color:#8C8A82}
.dh-s--light .dh-fomo{
  background:rgba(154,122,30,.09);border-color:rgba(154,122,30,.4);color:#7E6212}
.dh-s--light .dh-fomo b{color:var(--ink)}
.dh-s--light .dh-dot{background:#C9A227}

/* 정보 섹션도 충분한 높이를 갖되, 내용이 넘치면 알아서 늘어난다 */
.dh-s--auto{min-height:0!important}
.dh-s--auto .dh-s__in{padding-top:18cqw;padding-bottom:18cqw}

/* ============================================================
   호흡 브릿지 — 넓은 단색 위에 제품 하나, 글자는 여백에
   ============================================================ */
.dh-br{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;min-height:0;
  padding:22cqw 22px 24cqw;overflow:hidden;
}
.dh-br--light{background:#FAF8F3;color:#1F1F1D}
.dh-br__k{
  font-size:clamp(12px,2.8cqw,15px);letter-spacing:.3em;font-weight:700;color:var(--gold-on,#9A7A1E);
  margin-bottom:20px;
}
.dh-br__img{
  width:auto;max-width:min(76%,470px);height:auto;
  filter:drop-shadow(0 26px 40px rgba(31,31,29,.22));
  animation:dh-float 7s ease-in-out infinite;
}
.dh-br__img--wide{max-width:min(92%,780px)}
@keyframes dh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.dh-br__t{
  font-weight:900;font-size:clamp(30px,8.2cqw,92px);line-height:1.14;
  letter-spacing:-.04em;margin-top:32px;
}
.dh-br__t b{color:var(--gold-on,#9A7A1E);font-weight:900}
.dh-br__line{
  width:1px;height:52px;margin-top:30px;
  background:linear-gradient(to bottom,rgba(31,31,29,0),rgba(31,31,29,.4));
}

/* 위아래 섹션과 색이 이어지도록 경계에 그라디언트를 깐다 */
.dh-fade{position:relative;height:40cqw;min-height:230px;margin:0;padding:0;border:0;overflow:hidden}
/* 넓은 면적의 그라데이션은 8비트에서 띠가 생긴다. 미세 노이즈로 흩뜨린다. */
.dh-fade::after{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.07;mix-blend-mode:overlay;
}
.dh-fade--dark2light{
  background-image:linear-gradient(to bottom,
    #141F12 0%,#16210F 6%,#1A2714 12%,#212E19 19%,#2B3A21 26%,
    #3A4A2E 34%,#4E5C40 42%,#666F56 50%,#808770 58%,#9BA08C 66%,
    #B6B8A7 74%,#CDCDBF 82%,#E0DFD3 89%,#EFEDE4 95%,#FAF8F3 100%)}
.dh-fade--light2dark{
  background-image:linear-gradient(to bottom,
    #FAF8F3 0%,#EFEDE4 5%,#E0DFD3 11%,#CDCDBF 18%,#B6B8A7 26%,
    #9BA08C 34%,#808770 42%,#666F56 50%,#4E5C40 58%,#3A4A2E 66%,
    #2B3A21 74%,#212E19 81%,#1A2714 88%,#16210F 94%,#141F12 100%)}

/* ============================================================
   인셋 — 사진을 끝까지 채우지 않고 여백 안에 놓는다
   글자는 사진 위가 아니라 사진 바깥에
   ============================================================ */
.dh-inset{padding:16cqw 22px}
.dh-inset__img{
  border-radius:4px;overflow:hidden;margin-top:26px;
  box-shadow:0 20px 50px rgba(20,31,18,.16);
}
.dh-inset__img img{width:100%;height:auto}

/* ============ 비교 — 표가 아니라 대결 구도로 ============ */
.dh-vs2{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:44px}
.dh-vs2__col{
  position:relative;border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;
}
/* 왼쪽 — 일반 쑥떡. 눌러서 뒤로 물러나게 */
.dh-vs2__col--a{
  background:rgba(120,120,110,.10);border:1px solid rgba(120,120,110,.22);
  filter:saturate(.35);opacity:.72;
}
/* 오른쪽 — 떡함지. 들어올려서 앞으로 */
.dh-vs2__col--b{
  background:linear-gradient(170deg,rgba(227,195,107,.16),rgba(227,195,107,.05));
  border:1.5px solid var(--gold);
  box-shadow:0 16px 44px rgba(154,122,30,.20);
  transform:translateY(-10px);
}
.dh-s--light .dh-vs2__col--b{border-color:var(--gold-on);box-shadow:0 16px 44px rgba(154,122,30,.16)}
/* 승자 쪽에 빛이 훑고 지나간다 */
.dh-vs2__col--b::after{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.30),rgba(255,255,255,0));
  transform:skewX(-18deg);animation:dh-sweep 6s ease-in-out infinite;pointer-events:none;
}
.dh-vs2__h{
  padding:16px 12px;text-align:center;font-weight:800;font-size:clamp(16px,3.8cqw,23px);letter-spacing:-.02em;
}
.dh-vs2__col--a .dh-vs2__h{color:#8C8A82;background:rgba(120,120,110,.10)}
.dh-vs2__col--b .dh-vs2__h{
  background:var(--gold);color:#1A1A17;font-size:clamp(16px,4cqw,25px);font-weight:900;
}
.dh-s--light .dh-vs2__col--b .dh-vs2__h{background:var(--gold-on);color:#fff}
.dh-vs2__list{list-style:none;margin:0;padding:6px 0 10px}
.dh-vs2__list li{
  display:flex;gap:9px;align-items:flex-start;
  padding:15px 14px;border-bottom:1px solid rgba(140,138,130,.16);
}
.dh-vs2__list li:last-child{border-bottom:none}
.dh-vs2__ic{flex:0 0 auto;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(12px,3.25cqw,17px);font-weight:900;margin-top:2px}
.dh-vs2__col--a .dh-vs2__ic{background:rgba(120,120,110,.25);color:#7A786F}
.dh-vs2__col--b .dh-vs2__ic{background:var(--gold);color:#1A1A17}
.dh-s--light .dh-vs2__col--b .dh-vs2__ic{background:var(--gold-on);color:#fff}
.dh-vs2__t{font-size:clamp(18px,4.65cqw,25px);line-height:1.5;color:#8C8A82}
.dh-vs2__col--b .dh-vs2__t{font-size:clamp(19px,4.9cqw,27px);font-weight:800;color:var(--light);line-height:1.45}
.dh-s--light .dh-vs2__col--b .dh-vs2__t{color:var(--ink)}
.dh-vs2__s{display:block;font-size:clamp(14px,3.3cqw,19px);font-weight:500;margin-top:3px;color:rgba(245,242,234,.6)}
.dh-s--light .dh-vs2__col--b .dh-vs2__s{color:#6C6B64}
/* 가운데 VS 배지 */
.dh-vs2__badge{
  position:absolute;left:50%;top:-19px;transform:translateX(-50%);
  z-index:3;width:44px;height:44px;border-radius:50%;
  background:var(--clay);color:#fff;font-weight:900;font-size:clamp(14px,3.7cqw,19px);letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(196,80,47,.45);
  animation:dh-vsbeat 2.4s ease-in-out infinite;
}
@keyframes dh-vsbeat{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.09)}}

@media (min-width:768px){
  .dh-vs2{gap:16px;margin-top:54px}
  .dh-vs2__h{padding:20px 14px;}

  .dh-vs2__list li{padding:20px 20px}



  .dh-vs2__badge{width:56px;height:56px;top:-25px}
  .dh-vs2__col--b{transform:translateY(-16px)}
}

/* ============ 숫자 스탯 ============ */
.dh-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:26px}
.dh-stat{padding:26px 14px;text-align:center;background:rgba(245,242,234,.06)}
.dh-stat__n{font-weight:900;font-size:clamp(30px,8.2cqw,64px);line-height:1;letter-spacing:-.05em}
.dh-stat__n small{font-size:.42em;letter-spacing:-.01em}
.dh-stat__k{font-size:clamp(12px,2.8cqw,15px);color:rgba(245,242,234,.6);margin-top:9px}

/* ============ 후기 ============ */
.dh-rv{display:grid;gap:12px;margin-top:28px}
.dh-rv__c{background:rgba(245,242,234,.07);border:1px solid rgba(245,242,234,.16);border-radius:3px;padding:22px 20px}
.dh-rv__s{color:var(--gold);font-size:clamp(14px,3.5cqw,18px);letter-spacing:.14em;margin-bottom:10px}
.dh-rv__t{font-size:clamp(15px,3.6cqw,22px);line-height:1.65;font-weight:500}
.dh-rv__w{font-size:clamp(12px,2.8cqw,15px);color:rgba(245,242,234,.5);margin-top:12px}

/* ============ FAQ ============ */
.dh-faq{margin-top:26px;max-width:46em}
.dh-faq details{border-bottom:1px solid rgba(245,242,234,.16)}
.dh-faq summary{
  padding:17px 30px 17px 0;font-size:clamp(16px,3.8cqw,23px);font-weight:700;cursor:pointer;
  list-style:none;position:relative;
}
.dh-faq summary::-webkit-details-marker{display:none}
.dh-faq summary::after{
  content:"+";position:absolute;right:4px;top:15px;
  font-size:clamp(18px,4.5cqw,27px);font-weight:400;color:var(--gold);
}
.dh-faq details[open] summary::after{content:"−"}
.dh-faq p{padding:0 0 18px;font-size:clamp(15px,3.6cqw,22px);line-height:1.75;color:rgba(245,242,234,.72)}

/* ============ FOMO 띠 ============ */
.dh-fomo{
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:rgba(196,80,47,.16);border:1px solid rgba(196,80,47,.5);
  border-radius:3px;padding:13px 14px;margin-bottom:14px;
  font-size:clamp(14px,3.7cqw,20px);font-weight:700;color:#F3B9A6;text-align:center;line-height:1.5;
}
.dh-fomo b{color:#fff}
.dh-dot{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#E2604080;
  box-shadow:0 0 0 0 rgba(226,96,64,.7);animation:dh-blink 1.8s ease-out infinite;
}
@keyframes dh-blink{0%{box-shadow:0 0 0 0 rgba(226,96,64,.7);background:#E26040}70%{box-shadow:0 0 0 9px rgba(226,96,64,0)}100%{box-shadow:0 0 0 0 rgba(226,96,64,0);background:#E2604080}}

/* ============ 스크롤 등장 ============ */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .dh-up{opacity:0;transform:translateY(40px);
      animation:dh-up linear both;animation-timeline:view();animation-range:entry 6% cover 30%}
    .dh-zoom{opacity:0;transform:scale(.8);
      animation:dh-zoom linear both;animation-timeline:view();animation-range:entry 10% cover 38%}
  }
}
@keyframes dh-up{to{opacity:1;transform:translateY(0)}}
@keyframes dh-zoom{to{opacity:1;transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .dh-detail *{animation:none!important}
  .dh-shine,.dh-gold{-webkit-text-fill-color:currentColor;color:var(--light)}
  .dh-s__bg img{transform:none!important}
}

/* ============ 데스크톱 ============ */
@media (min-width:768px){
  .dh-detail{font-size:19px}
  .dh-s__in{padding:96px 44px}
  .dh-hero .dh-s__in{padding-bottom:104px}
  .dh-hero__vid{display:none}
  .dh-hero__img{display:block;animation:dh-kb 26s ease-in-out infinite alternate}
  .dh-spec__g{grid-template-columns:repeat(4,1fr)}
  .dh-spec__c{padding:42px 26px;border-bottom:none}
  .dh-spec__c:nth-child(2n){border-right:1px solid rgba(245,242,234,.12)}
  .dh-spec__c:last-child{border-right:none}
  .dh-cards{grid-template-columns:repeat(3,1fr);gap:18px}
  .dh-fork{grid-template-columns:1fr 1fr;gap:24px}
  .dh-fk__img{height:280px}
  .dh-shops{grid-template-columns:1fr 1fr;gap:0 44px}
  .dh-stats{grid-template-columns:repeat(4,1fr)}
  .dh-rv{grid-template-columns:repeat(3,1fr)}
  .dh-vs__h,.dh-vs__c{padding:18px 16px;}
  .dh-tbl{max-width:620px}
}


/* ============================================================
   숫자 카운트업 — JS 없이 CSS 카운터로
   @property 로 정수를 애니메이션하고 counter() 로 그려낸다.
   스크롤 애니메이션 미지원 환경에서는 정적 숫자가 그대로 보인다.
   ============================================================ */
@property --dh-n{syntax:"<integer>";initial-value:0;inherits:false}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .dh-cnt{position:relative;display:inline-block}
    .dh-cnt > i{font-style:normal}
    .dh-cnt::after{
      counter-reset:dhn var(--dh-n);
      content:counter(dhn);
      position:absolute;left:0;top:0;right:0;
      animation:dh-count 1.8s cubic-bezier(.2,.8,.2,1) both;
      animation-timeline:view();
      animation-range:entry 16% cover 46%;
    }
  }
}
@keyframes dh-count{from{--dh-n:0}to{--dh-n:var(--dh-to)}}

/* ============================================================
   인셋 이미지 — 사진을 끝까지 채우지 않고 여백 안에 놓는다
   ============================================================ */
.dh-figure-in{
  margin-top:34px;border-radius:5px;overflow:hidden;
  box-shadow:0 22px 54px rgba(20,31,18,.15);
}
.dh-figure-in img{width:100%;height:auto}
.dh-figure-in--frame{padding:0}

/* ============================================================
   여백 — 사진과 글자가 너무 붙어 있던 곳을 넓힌다
   ============================================================ */
.dh-s--auto .dh-s__in{padding-top:18cqw;padding-bottom:18cqw}
.dh-cards{gap:16px;margin-top:38px}
.dh-steps{margin-top:32px}
.dh-vs{margin-top:36px}
.dh-stats{margin-top:36px;gap:3px}
.dh-rv{margin-top:34px}
.dh-faq{margin-top:34px}
.dh-t{margin-bottom:28px}
.dh-lab{margin-bottom:20px}
.dh-br{padding-top:32cqw;padding-bottom:34cqw}
.dh-br__t{margin-top:40px}

/* ============================================================
   색 전환 — 더 길고 부드럽게. 중간에 탁한 띠가 생기지 않도록
   같은 색상 계열로 단계를 촘촘히 둔다.
   ============================================================ */
.dh-fade{height:34cqw;min-height:190px}
.dh-fade--dark2light{
  background:linear-gradient(to bottom,
    #141F12 0%,#1B2718 14%,#28351F 30%,#4A5540 48%,
    #8C9282 66%,#C8C6B8 82%,#EDEBE2 93%,#FAF8F3 100%)}
.dh-fade--light2dark{
  background:linear-gradient(to bottom,
    #FAF8F3 0%,#EDEBE2 8%,#C8C6B8 20%,#8C9282 36%,
    #4A5540 54%,#28351F 72%,#1B2718 87%,#141F12 100%)}

@media (min-width:768px){
  .dh-cards{gap:22px}
  .dh-s--auto .dh-s__in{padding-top:10cqw;padding-bottom:10cqw}
  .dh-fade{height:24cqw;min-height:260px}
}


/* ============================================================
   장식 캐릭터 — 쑥호와 찹새가 페이지 구석구석을 돌아다닌다
   배경을 뚫은 스프라이트를 절대배치하고 CSS 로만 움직인다.
   글자를 가리지 않도록 여백 쪽에만 두고 z-index 를 낮게 잡는다.
   ============================================================ */
.dh-deco{
  position:absolute;pointer-events:none;user-select:none;z-index:1;
  width:auto;height:auto;will-change:transform;
}
.dh-deco img{width:100%;height:auto;display:block}
/* 어두운 사진 섹션 위에서는 살짝 눌러 텍스트를 방해하지 않게 */
.dh-s .dh-deco{opacity:.9}
.dh-s--light .dh-deco,.dh-br--light .dh-deco{opacity:1}

/* 크기 */
.dh-deco--xs{width:64px}
.dh-deco--sm{width:96px}
.dh-deco--md{width:136px}
.dh-deco--lg{width:180px}
@media (min-width:768px){
  .dh-deco--xs{width:84px}
  .dh-deco--sm{width:124px}
  .dh-deco--md{width:180px}
  .dh-deco--lg{width:250px}
}

/* 좌우 반전 */
.dh-flip{transform:scaleX(-1)}

/* ── 움직임 ── */
/* 섹션 안을 왕복한다 — 화면 밖으로 나가지 않는다.
   cqw 는 상세 영역 폭 기준이라 이동 거리가 컨테이너에 맞춰 늘어난다. */
@keyframes dh-patrol{
  0%{transform:translateX(0) scaleX(1)}
  44%{transform:translateX(70cqw) scaleX(1)}
  50%{transform:translateX(70cqw) scaleX(-1)}
  94%{transform:translateX(0) scaleX(-1)}
  100%{transform:translateX(0) scaleX(1)}
}
@keyframes dh-patrol-back{
  0%{transform:translateX(70cqw) scaleX(-1)}
  44%{transform:translateX(0) scaleX(-1)}
  50%{transform:translateX(0) scaleX(1)}
  94%{transform:translateX(70cqw) scaleX(1)}
  100%{transform:translateX(70cqw) scaleX(-1)}
}
.dh-anim-cross{animation:dh-patrol 28s ease-in-out infinite}
.dh-anim-cross-back{animation:dh-patrol-back 32s ease-in-out infinite}

/* 걸을 때 위아래로 통통 */
@keyframes dh-hop{0%,100%{translate:0 0}50%{translate:0 -7px}}
.dh-anim-hop{animation:dh-hop 0.62s ease-in-out infinite}

/* 새가 날아다닌다 */
@keyframes dh-flit{
  0%{transform:translate(0,0) rotate(-4deg)}
  25%{transform:translate(26px,-20px) rotate(5deg)}
  50%{transform:translate(52px,4px) rotate(-3deg)}
  75%{transform:translate(22px,22px) rotate(6deg)}
  100%{transform:translate(0,0) rotate(-4deg)}
}
.dh-anim-flit{animation:dh-flit 9s ease-in-out infinite}
.dh-anim-flit2{animation:dh-flit 12s ease-in-out infinite reverse}

/* 제자리에서 둥실 */
@keyframes dh-float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.dh-anim-float{animation:dh-float2 5.5s ease-in-out infinite}

/* 가장자리에서 나왔다 들어가기 — 완전히 사라지지는 않는다 */
@keyframes dh-dip-b{
  0%,100%{transform:translateY(52%)}
  12%,30%{transform:translateY(2%)}
  42%{transform:translateY(48%)}
  56%,74%{transform:translateY(0%)}
  86%{transform:translateY(50%)}
}
@keyframes dh-dip-l{
  0%,100%{transform:translateX(-54%)}
  12%,30%{transform:translateX(-2%)}
  42%{transform:translateX(-50%)}
  56%,74%{transform:translateX(0%)}
  86%{transform:translateX(-52%)}
}
@keyframes dh-dip-r{
  0%,100%{transform:translateX(54%) scaleX(-1)}
  12%,30%{transform:translateX(2%) scaleX(-1)}
  42%{transform:translateX(50%) scaleX(-1)}
  56%,74%{transform:translateX(0%) scaleX(-1)}
  86%{transform:translateX(52%) scaleX(-1)}
}
.dh-anim-peek-b{animation:dh-dip-b 10s ease-in-out infinite}
.dh-anim-peek-l{animation:dh-dip-l 11s ease-in-out infinite}
.dh-anim-peek-r{animation:dh-dip-r 12s ease-in-out infinite}

/* 좌우로 살짝 흔들 */
@keyframes dh-sway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
.dh-anim-sway{animation:dh-sway 4.2s ease-in-out infinite;transform-origin:bottom center}

.dh-d1{animation-delay:-2s}.dh-d2{animation-delay:-5s}
.dh-d3{animation-delay:-8s}.dh-d4{animation-delay:-12s}

@media (prefers-reduced-motion:reduce){
  .dh-deco,.dh-deco *{animation:none!important}
  .dh-anim-peek-b,.dh-anim-peek-l,.dh-anim-peek-r{display:none}
}
/* 좁은 화면에서는 개수를 줄여 어수선해지지 않게 */
@media (max-width:520px){
  .dh-deco--hide-m{display:none}
}
/* 상세 영역이 넓어지면(PC) 세로로 길 이유가 없다 — 비율을 낮춘다 */
@container (min-width:700px){
  .dh-s{min-height:88cqw}
  .dh-s--short{min-height:76cqw}
  .dh-s--auto{min-height:0!important}
  .dh-hero{min-height:84cqw}
  .dh-br{padding-top:27cqw;padding-bottom:29cqw}
}

/* 재료 카드 — 밝은 섹션 글자색 (정리 중 유실되어 복구) */
.dh-s--light .dh-card__t{color:var(--ink)}
.dh-s--light .dh-card__d{color:#5C5A53}
.dh-s--light .dh-card{box-shadow:0 10px 30px rgba(31,31,29,.08)}
.dh-s--light .dh-spark i,.dh-br--light .dh-spark i{
  background:radial-gradient(circle,#FFF6D8 0%,rgba(201,162,39,.95) 40%,rgba(201,162,39,0) 70%)}

/* ============================================================
   글자색을 상속·변수에 맡기지 않고 리터럴로 못 박는다.
   var() 가 이 자리에서 안 풀리는 현상이 있어 값을 직접 쓴다.
   ============================================================ */
.dh-s:not(.dh-s--light) .dh-t{color:#F5F2EA;-webkit-text-fill-color:#F5F2EA}
.dh-s:not(.dh-s--light) .dh-t b{color:#E3C36B;-webkit-text-fill-color:#E3C36B}
.dh-s:not(.dh-s--light) .dh-p{color:rgba(245,242,234,.94);-webkit-text-fill-color:rgba(245,242,234,.94)}
.dh-s:not(.dh-s--light) .dh-sm{color:rgba(245,242,234,.62);-webkit-text-fill-color:rgba(245,242,234,.62)}
.dh-s:not(.dh-s--light) .dh-lab{color:#E3C36B;-webkit-text-fill-color:#E3C36B}
.dh-s:not(.dh-s--light) .dh-step__t{color:rgba(245,242,234,.88);-webkit-text-fill-color:rgba(245,242,234,.88)}
.dh-s:not(.dh-s--light) .dh-tbl td{color:#F5F2EA;-webkit-text-fill-color:#F5F2EA}
.dh-s:not(.dh-s--light) .dh-shop__n{color:#F5F2EA;-webkit-text-fill-color:#F5F2EA}

.dh-s--light .dh-t{color:#1F1F1D;-webkit-text-fill-color:#1F1F1D}
.dh-s--light .dh-t b{color:#9A7A1E;-webkit-text-fill-color:#9A7A1E}
.dh-s--light .dh-p{color:#3A3A36;-webkit-text-fill-color:#3A3A36}
.dh-s--light .dh-sm{color:#6C6B64;-webkit-text-fill-color:#6C6B64}
.dh-s--light .dh-lab{color:#9A7A1E;-webkit-text-fill-color:#9A7A1E}
.dh-br--light .dh-br__t{color:#1F1F1D;-webkit-text-fill-color:#1F1F1D}
.dh-br--light .dh-br__t b{color:#9A7A1E;-webkit-text-fill-color:#9A7A1E}

/* 그라디언트 글자(샤인·금색)는 반드시 마지막에 다시 투명으로 */
.dh-shine,.dh-s .dh-shine,.dh-br .dh-shine,
.dh-gold,.dh-s .dh-gold,.dh-br .dh-gold{
  -webkit-text-fill-color:transparent!important;color:transparent!important}

/* 배경도 상속·변수에 맡기지 않고 명시한다 */
.dh-s:not(.dh-s--light){background:#141F12}
.dh-s--light{background:#FAF8F3}
.dh-br--light{background:#FAF8F3}
/* 어두운 섹션의 표·매장 목록 글자 */
.dh-s:not(.dh-s--light) .dh-tbl th{color:rgba(245,242,234,.62);-webkit-text-fill-color:rgba(245,242,234,.62)}
.dh-s:not(.dh-s--light) .dh-tbl td{color:#F5F2EA;-webkit-text-fill-color:#F5F2EA}
.dh-s:not(.dh-s--light) .dh-tbl tr.dh-hi th,
.dh-s:not(.dh-s--light) .dh-tbl tr.dh-hi td{color:#E3C36B;-webkit-text-fill-color:#E3C36B}
.dh-s:not(.dh-s--light) .dh-shop__n{color:#F5F2EA;-webkit-text-fill-color:#F5F2EA}
.dh-s:not(.dh-s--light) .dh-shop__a{color:rgba(245,242,234,.55);-webkit-text-fill-color:rgba(245,242,234,.55)}
.dh-s:not(.dh-s--light) .dh-step__t{color:rgba(245,242,234,.88);-webkit-text-fill-color:rgba(245,242,234,.88)}
.dh-cnt::after{content:none!important}
.dh-cnt > i{visibility:visible!important}

/* ============================================================
   큰 글씨의 금색은 전부 반짝인다.
   금색이 '기본'이고 밝은 광택이 스쳐 지나가는 구조여야 한다.
   (반대로 하면 글자가 흰색으로 읽혀 금색 강조가 죽는다)
   ============================================================ */
@keyframes dh-shine{
  from{background-position:160% 0}
  to{background-position:-160% 0}    /* 멈추지 않고 등속으로 계속 흐른다 */
}

.dh-t b,
.dh-hero__t .dh-shine,
.dh-br__t b,
.dh-num,
.dh-stat__n,
.dh-spec__v,
.dh-fk__tag,
.dh-shine{
  background-image:linear-gradient(100deg,
    #E3C36B 0%, #E3C36B 30%,
    #F6E2A4 40%, #FFFBEC 47%, #FFFFFF 50%, #FFFBEC 53%, #F6E2A4 60%,
    #E3C36B 70%, #E3C36B 100%);
  background-size:300% 100%;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  animation:dh-shine 3.4s linear infinite;
}
/* 밝은 배경에서는 어두운 금색이 기본, 밝은 금빛이 스친다 */
.dh-s--light .dh-t b,
.dh-s--light .dh-num,
.dh-s--light .dh-stat__n,
.dh-s--light .dh-shine,
.dh-s--light .dh-fk__tag,
.dh-br--light .dh-br__t b,
.dh-br--light .dh-shine{
  background-image:linear-gradient(100deg,
    #9A7A1E 0%, #9A7A1E 30%,
    #B8942E 40%, #D4B04A 47%, #E6C862 50%, #D4B04A 53%, #B8942E 60%,
    #9A7A1E 70%, #9A7A1E 100%);
}
@media (prefers-reduced-motion:reduce){
  .dh-t b,.dh-hero__t .dh-shine,.dh-br__t b,.dh-num,.dh-stat__n,.dh-spec__v,.dh-fk__tag,.dh-shine{
    animation:none;background-position:50% 0}
}