/* [생성일] 2026-11-07
   [경위] 더하기협동조합 「내용 채우기」 제안 시안 공통 스타일 — 컨셉 「크림 종이에 노란 더하기」
   [변경이력]
     - 2026-11-07: 최초 생성
     - 2026-11-07: 사장님 「아임웹으로 되는 것만」 → 등장 모션·사진 위 딱지 제거, 표·단체 구매 칸을 상세 설명 칸으로 (색은 현 사이트 로고 실측 #F9BF2C·#4C4948, 바탕 크림 기준. 접두사 dh-) */

/* ── 토큰 ── */
:root{
  --yellow:#F9BF2C;        /* 로고 노랑 — 버튼·더하기 표시 (작은 글자색으로는 쓰지 않는다) */
  --yellow-soft:#FBE7A6;   /* 노랑 연한 띠 */
  --amber-ink:#7A5200;     /* 노랑 계열 글자 — 크림 바탕 대비 6.4:1 */
  --cream:#F7F2E6;         /* 바탕 (현 사이트 종이 질감과 같은 계열) */
  --cream-2:#EFE7D3;       /* 바탕 한 단 아래 */
  --paper:#FFFFFF;         /* 카드 */
  --ink:#2B2927;           /* 본문 */
  --ink-2:#5B5651;         /* 보조 글자 — 크림 바탕 5.6:1 */
  --line:#E2D9C6;          /* 가는 선 */
  --green-ink:#3E5A2E;     /* 식물 키트 라벨 */
  --memo:#1C2B3A;          /* 제안 메모 막대(고객 사이트와 구분되는 색) */
  --font:"Pretendard Variable","Pretendard",-apple-system,"Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;
  --r:8px;
  --wrap:1200px;
}

/* ── 바탕 ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:where(h1,h2,h3,h4,p,ul,ol,figure){margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.dh-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s2)}
.dh-num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--amber-ink);outline-offset:2px}

/* ── 제안 메모(시안 전용 · 납품물 아님) ── */
.dh-memo{background:var(--memo);color:#fff;font-size:14px}
.dh-memo__bar{max-width:var(--wrap);margin:0 auto;padding:10px var(--s2);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.dh-memo__who{font-weight:700}
.dh-memo__tabs{display:flex;gap:4px}
.dh-memo__tabs a{padding:4px 12px;border-radius:999px;text-decoration:none;opacity:.75}
.dh-memo__tabs a[aria-current]{background:#fff;color:var(--memo);opacity:1;font-weight:700}
.dh-memo__more{max-width:var(--wrap);margin:0 auto;padding:0 var(--s2) 12px}
.dh-memo__more summary{cursor:pointer;font-weight:600;padding:6px 0}
.dh-memo__body{display:grid;gap:var(--s3);padding:var(--s2) 0 var(--s2)}
.dh-memo__body ol{display:grid;gap:12px;counter-reset:n}
.dh-memo__body li{display:grid;gap:2px;padding-left:28px;position:relative}
.dh-memo__body li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--yellow);color:var(--memo);font-weight:800;font-size:12px;display:grid;place-items:center}
.dh-memo__body li b{font-weight:700}
.dh-memo__body li span{opacity:.85;line-height:1.55}
.dh-before{display:grid;gap:8px}
.dh-before img{border-radius:var(--r);border:1px solid rgba(255,255,255,.2);width:100%;max-width:420px}
.dh-before figcaption{font-size:13px;opacity:.75}
@media(min-width:900px){.dh-memo__body{grid-template-columns:1fr 420px}}

/* ── 머리 ── */
.dh-head{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.dh-head__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:14px 0}
.dh-logo img{width:220px;height:auto}
.dh-util{display:flex;gap:18px;font-size:14px;color:var(--ink-2)}
.dh-util a{text-decoration:none}
.dh-nav{display:flex;gap:28px;font-weight:600;font-size:15px;padding:0 0 12px}
.dh-nav a{text-decoration:none;white-space:nowrap}
.dh-nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--yellow)}
.dh-burger{display:none;width:40px;height:40px;place-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.dh-burger span{display:block;width:18px;height:2px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}
@media(max-width:899px){
  .dh-util{display:none}
  .dh-burger{display:grid}
  .dh-nav{display:none;flex-direction:column;gap:0;padding:0 0 var(--s2)}
  .dh-nav.is-open{display:flex}
  .dh-nav a{padding:12px 0;border-top:1px solid var(--line)}
  .dh-nav a[aria-current]{box-shadow:none;color:var(--amber-ink)}
  .dh-logo img{width:170px}
}

/* ── 공통 섹션 ── */
.dh-sec{padding:var(--s6) 0}
.dh-sec--tint{background:var(--cream-2)}
.dh-kicker{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--amber-ink);margin-bottom:12px}
.dh-kicker::before{content:"";width:14px;height:14px;background:
  linear-gradient(var(--yellow),var(--yellow)) center/14px 3px no-repeat,
  linear-gradient(var(--yellow),var(--yellow)) center/3px 14px no-repeat}
.dh-h2{font-size:clamp(26px,3.4vw,38px);line-height:1.25;font-weight:700;letter-spacing:-.01em}
.dh-lead{color:var(--ink-2);margin-top:12px;max-width:62ch}
.dh-sec__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s4)}
.dh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:700;text-decoration:none;background:var(--yellow);color:var(--ink);border:2px solid var(--yellow);white-space:nowrap}
.dh-btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.dh-btn--sm{min-height:40px;padding:0 16px;font-size:14px}
.dh-link{font-weight:700;text-decoration:underline;text-underline-offset:4px}
.dh-note{font-size:13px;color:var(--ink-2);margin-top:var(--s2)}

/* ── 히어로 ── */
.dh-hero{padding:var(--s6) 0 var(--s5);position:relative;overflow:hidden}
.dh-hero__grid{display:grid;gap:var(--s4);align-items:center}
.dh-hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.2;font-weight:800;letter-spacing:-.015em}
.dh-hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--yellow-soft) 62%)}
.dh-hero__sub{margin-top:var(--s2);color:var(--ink-2);font-size:17px;max-width:50ch}
.dh-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
.dh-hero__art{position:relative}
.dh-hero__art img{border-radius:16px;width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9)}
.dh-hero__chip{position:absolute;left:16px;bottom:16px;background:var(--paper);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;box-shadow:0 6px 20px rgba(43,41,39,.12)}
.dh-hero__chip b{color:var(--green-ink)}
.dh-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.dh-facts b{display:block;font-family:var(--mono);font-size:clamp(22px,3vw,32px);font-weight:500;letter-spacing:-.02em}
.dh-facts span{font-size:14px;color:var(--ink-2)}
@media(min-width:900px){.dh-hero__grid{grid-template-columns:1.1fr 1fr}}

/* ── 키트 분류 3칸 ── */
.dh-cats{display:grid;gap:var(--s3)}
.dh-cat{background:var(--paper);border-radius:16px;overflow:hidden;text-decoration:none;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line)}
.dh-cat img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(.9)}
.dh-cat__body{padding:var(--s3);display:grid;gap:6px;align-content:start}
.dh-cat__body h3{font-size:20px;font-weight:700}
.dh-cat__body p{color:var(--ink-2);font-size:15px}
.dh-cat__cnt{font-family:var(--mono);font-size:13px;color:var(--amber-ink);margin-top:6px}
@media(min-width:720px){.dh-cats{grid-template-columns:repeat(3,1fr)}}

/* ── 대표 키트 띠 ── */
.dh-feat{display:grid;gap:var(--s4);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:var(--s3);margin-top:var(--s4);align-items:center}
.dh-feat img{border-radius:12px;aspect-ratio:1;object-fit:cover;width:100%}
.dh-feat h3{font-size:24px;font-weight:700}
.dh-feat__price{display:flex;align-items:baseline;gap:10px;margin:12px 0}
.dh-feat__price b{font-family:var(--mono);font-size:26px;font-weight:500}
.dh-feat__price s{color:var(--ink-2);font-family:var(--mono)}
.dh-feat__price i{font-style:normal;font-size:12px;font-weight:700;background:var(--yellow);padding:2px 8px;border-radius:4px}
.dh-feat ul{display:grid;gap:6px;color:var(--ink-2);font-size:15px;margin:var(--s2) 0 var(--s3)}
.dh-feat li::before{content:"+ ";color:var(--amber-ink);font-weight:800}
@media(min-width:900px){.dh-feat{grid-template-columns:320px 1fr;padding:var(--s4)}}

/* ── 하는 일 3갈래 ── */
.dh-works{display:grid;gap:var(--s3)}
.dh-work{display:grid;gap:var(--s2);align-content:start}
.dh-work img{border-radius:12px;aspect-ratio:3/2;object-fit:cover;width:100%;filter:saturate(.9)}
.dh-work h3{font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px}
.dh-work h3 small{font-family:var(--mono);font-size:12px;color:var(--amber-ink);font-weight:500}
.dh-work p{color:var(--ink-2);font-size:15px}
@media(min-width:720px){.dh-works{grid-template-columns:repeat(3,1fr)}}

/* ── 아카이브 ── */
.dh-arch{display:grid;gap:var(--s3)}
.dh-arch a{display:grid;gap:10px;text-decoration:none}
.dh-arch img{border-radius:12px;aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(.9)}
.dh-arch time{font-family:var(--mono);font-size:13px;color:var(--amber-ink)}
.dh-arch h3{font-size:16px;font-weight:700;line-height:1.4}
.dh-arch p{font-size:14px;color:var(--ink-2)}
@media(min-width:720px){.dh-arch{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.dh-arch{grid-template-columns:repeat(4,1fr)}}

/* ── 문의 폼 ── */
.dh-ask{display:grid;gap:var(--s4)}
.dh-ask__side{display:grid;gap:var(--s2);align-content:start}
.dh-ask__side dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
.dh-ask__side dt{color:var(--ink-2)}
.dh-form{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:var(--s3);display:grid;gap:var(--s2)}
.dh-field{display:grid;gap:6px}
.dh-field label{font-size:14px;font-weight:700}
.dh-field input,.dh-field select,.dh-field textarea{font:inherit;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;width:100%}
.dh-field textarea{min-height:120px;resize:vertical}
.dh-field--2{display:grid;gap:var(--s2)}
.dh-agree{display:flex;gap:10px;align-items:start;font-size:14px;color:var(--ink-2)}
.dh-agree input{margin-top:4px}
@media(min-width:720px){.dh-field--2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.dh-ask{grid-template-columns:1fr 1.4fr}}

/* ── 푸터 ── */
.dh-foot{background:#FFFFFF;border-top:1px solid var(--line);padding:var(--s5) 0 var(--s4);font-size:14px}
.dh-foot__grid{display:grid;gap:var(--s4)}
.dh-foot h4{font-size:14px;font-weight:700;margin-bottom:10px}
.dh-foot ul{display:grid;gap:6px;color:var(--ink-2)}
.dh-foot a{text-decoration:none}
.dh-foot__biz{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);color:var(--ink-2);font-size:13px;display:grid;gap:4px}
.dh-foot__biz b{font-weight:600;color:var(--ink)}
@media(min-width:720px){.dh-foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* ── 상품 상세 ── */
.dh-crumb{font-size:13px;color:var(--ink-2);padding:var(--s2) 0}
.dh-crumb a{text-decoration:none}
.dh-prod{display:grid;gap:var(--s4);padding-bottom:var(--s5)}
.dh-gal{display:grid;gap:10px}
.dh-gal img{border-radius:16px;width:100%;aspect-ratio:1;object-fit:cover}
.dh-gal__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dh-gal__thumbs img{aspect-ratio:1;object-fit:cover;border-radius:8px;border:2px solid transparent}
.dh-gal__thumbs img.is-on{border-color:var(--yellow)}
.dh-buy{display:grid;gap:var(--s2);align-content:start}
.dh-buy__cat{font-size:13px;font-weight:700;color:var(--green-ink)}
.dh-buy h1{font-size:clamp(26px,3vw,34px);font-weight:800;line-height:1.25}
.dh-buy__one{color:var(--ink-2)}
.dh-spec{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:15px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:var(--s2) var(--s3)}
.dh-spec dt{color:var(--ink-2);white-space:nowrap}
.dh-spec dd{margin:0}
.dh-spec dd small{display:block;font-size:12px;color:var(--amber-ink)}
.dh-buy__price{display:flex;align-items:baseline;gap:10px}
.dh-buy__price b{font-family:var(--mono);font-size:32px;font-weight:500}
.dh-buy__price s{color:var(--ink-2);font-family:var(--mono)}
.dh-buy__price i{font-style:normal;font-size:12px;font-weight:700;background:var(--yellow);padding:2px 8px;border-radius:4px}
.dh-buy__pt{font-size:14px;color:var(--ink-2)}
.dh-buy__pt b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.dh-qty{display:flex;align-items:center;justify-content:space-between;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.dh-qty__ctl{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px}
.dh-qty__ctl button{width:36px;height:36px;font-size:18px}
.dh-qty__ctl span{font-family:var(--mono);min-width:36px;text-align:center}
.dh-buy__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dh-group{background:var(--yellow-soft);border-radius:12px;padding:var(--s2) var(--s3);display:grid;gap:6px;font-size:15px}
.dh-group b{font-weight:700}
.dh-group a{font-weight:700}
.dh-ship{font-size:14px;color:var(--ink-2);display:grid;gap:4px}
@media(min-width:900px){.dh-prod{grid-template-columns:1fr 1fr;gap:var(--s5)}}

.dh-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:var(--s4);overflow-x:auto}
.dh-tabs a{padding:14px 18px;text-decoration:none;font-weight:600;white-space:nowrap;color:var(--ink-2)}
.dh-tabs a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--yellow)}
.dh-tabs a small{font-family:var(--mono);font-size:12px;margin-left:4px}

.dh-detail{display:grid;gap:var(--s6)}
.dh-steps{display:grid;gap:var(--s3)}
.dh-step{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.dh-step img{aspect-ratio:3/2;object-fit:cover;width:100%}
.dh-step__body{padding:var(--s3);display:grid;gap:6px;align-content:start}
.dh-step__n{font-family:var(--mono);font-size:13px;color:var(--amber-ink)}
.dh-step h3{font-size:19px;font-weight:700}
.dh-step p{color:var(--ink-2);font-size:15px}
.dh-step p.tip{font-size:13px;color:var(--green-ink);background:#EEF3E8;border-radius:8px;padding:8px 12px;margin-top:6px}
@media(min-width:720px){.dh-steps{grid-template-columns:repeat(3,1fr)}}
.dh-care{display:grid;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:var(--s3)}
.dh-care li{display:flex;gap:10px;align-items:start}
.dh-care li::before{content:"✓";color:var(--green-ink);font-weight:800;flex:none}
.dh-manual{display:grid;gap:12px}
.dh-manual img{border-radius:16px;border:1px solid var(--line);max-width:820px;width:100%;margin:0 auto}
.dh-manual figcaption{text-align:center;font-size:13px;color:var(--ink-2)}
.dh-class{display:grid;gap:var(--s3)}
.dh-class__cards{display:grid;gap:var(--s2)}
.dh-class__cards div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:var(--s2) var(--s3)}
.dh-class__cards b{display:block;font-size:17px;margin-bottom:4px}
.dh-class__cards p{font-size:14px;color:var(--ink-2)}
@media(min-width:720px){.dh-class__cards{grid-template-columns:repeat(3,1fr)}}
.dh-review{border-top:1px solid var(--line);padding-top:var(--s4);display:grid;gap:var(--s2)}
.dh-review h2{font-size:20px;font-weight:700}
.dh-review__law{font-size:13px;color:var(--ink-2);display:grid;gap:2px}
.dh-review__empty{text-align:center;color:var(--ink-2);padding:var(--s4);border:1px dashed var(--line);border-radius:12px}

/* ── 상세 맨 위 표 + 단체 구매 칸 (아임웹 상세 설명 칸 안) ── */
.dh-top{display:grid;gap:var(--s2)}
@media(min-width:900px){.dh-top{grid-template-columns:1.4fr 1fr;align-items:start}}