/* ==========================================================================
   홍삼야돈 — 브랜드 아이덴티티 케이스
   강디자인

   읽는 사람 — 의뢰를 검토하는 사업주다. 이야기로 쓴다.
   실측 층(색 수치·물성)은 CASE_NOTES 에만 둔다.

   설계 근거
   - 지면 #EC9206 은 BS-05 색상규정의 Main Color 가운데 하나다(200dpi 실측).
     ΔE2000 **7.3**(핫핑거 #F68313). 나머지 셋은 전부 막혔다 —
     빨강 `#AE011D` 2.3(LEEJE) · 크림 `#EFD49D` 4.5(갤러리에스) · 검정 `#010101` **0.2(쏘스텍)**.
   - 물성은 **방수 코팅한 면 앞치마**다. 공개할 수 있는 응용이 앞치마와 탑차라서 골랐다.
     성긴 능직 결(대각·주기 12px) + 코팅면의 넓고 약한 윤 + 되튐 ω 10.0 · ζ **0.28**.
     **감쇠비가 기존 열넷 가운데 가장 낮다**(다음이 SP 0.30) — 천이 오래 흔들린다.

   ⚠ 원본이 PDF 가 아니다 — `홍삼야돈BI완성/홍삼야돈전체모음/` 의 **JPG 15장**
     (1652×2338 = A4 200dpi). 표지 + BS-01~14. 실측 한계가 200dpi 라
     그보다 미세한 주장은 하지 않았다. → jpg-page-manuals-new-axis

   - 뺀 것 (제3자 표시·연락처)
     BS-08 명함디자인 — 연락처
     BS-09 박스디자인 — **HACCP 인증마크**
     BS-13 간판디자인 — **산우들 ®** 과 **HACCP 인증마크**가 마크와 나란히 있다
     BS-10 배너/프라이스카드 — 육류 사진(출처 미확인)
     BS-12 스티커디자인 — 인증 표시 확인 안 됨. 안전 쪽으로 뺐다
   - **모기업 (주)초우를 이 페이지에서 다루지 않는다.** 간판 지면에 상호가 인쇄돼 있지만
     이 케이스가 다루는 것은 홍삼야돈이라는 **제품 브랜드**의 아이덴티티뿐이다.
   ========================================================================== */






body[data-hsy-project='true'] { background: #ec9206; }
body[data-hsy-project='true'] .case__study__slices { display: block; width: 100%; max-width: none; padding: 0; gap: 0; }
body[data-hsy-project='true'] .case__study__info { display: none; }
.hsy-site-host { width: 100%; }

.hsy-case {
  --hsy-or: #ec9206; --hsy-red: #ae011d; --hsy-cream: #efd49d;
  --hsy-k: #010101;
  --hsy-ink: #3d1305; --hsy-paper: #fdf7ee;
  background: var(--hsy-or); color: var(--hsy-ink);
  font-family: 'Helvetica Neue', Helvetica, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  line-height: 1.62; -webkit-font-smoothing: antialiased;
}
.hsy-case * { box-sizing: border-box; }
/* img 에 width/height 속성이 박혀 있어 폭만 줄면 세로로 늘어난다. 바닥 규칙. */
.hsy-case img, .hsy-case video { display: block; max-width: 100%; height: auto; }
.hsy-case h1, .hsy-case h2, .hsy-case h3, .hsy-case p,
.hsy-case figcaption, .hsy-case li { word-break: keep-all; }
.hsy-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

.hsy-hero { padding: clamp(80px, 13vw, 168px) 0 clamp(48px, 7vw, 92px); }
.hsy-hero__eyebrow { font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .26em; text-transform: uppercase;
  color: #8a5a33; margin: 0 0 clamp(20px, 3vw, 34px); }
.hsy-hero__title { font-size: clamp(29px, 4.9vw, 72px); line-height: 1.16; letter-spacing: -.02em;
  font-weight: 700; margin: 0 0 clamp(22px, 3vw, 36px); color: #3d1305; }
.hsy-hero__title em { font-style: normal; box-shadow: inset 0 -.16em 0 rgba(255, 255, 255, .55); }
.hsy-hero__lede { font-size: clamp(16px, 1.7vw, 21px); max-width: 46em; margin: 0; color: #5c2b0c; }
.hsy-hero__meta { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 44px);
  margin-top: clamp(34px, 5vw, 58px); padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid rgba(61, 19, 5, .3);
  font-size: clamp(12px, 1.15vw, 14px); letter-spacing: .06em; color: #8a5a33; }

.hsy-sec { padding: clamp(52px, 8vw, 108px) 0; border-top: 1px solid rgba(61, 19, 5, .26); }
.hsy-sec--paper { background: #fff; border-top: none; }
.hsy-sec--pale { background: var(--hsy-paper); border-top: none; }
.hsy-sec--ink { background: var(--hsy-k); border-top: none; }
.hsy-kicker { font-size: clamp(11px, 1.05vw, 13px); letter-spacing: .24em; text-transform: uppercase;
  color: #8a5a33; margin: 0 0 clamp(12px, 1.6vw, 18px); }
.hsy-sec--paper .hsy-kicker, .hsy-sec--pale .hsy-kicker { color: rgb(143, 105, 66); }
.hsy-sec--ink .hsy-kicker { color: #dfbe9a; }
.hsy-h { font-size: clamp(24px, 3.5vw, 44px); line-height: 1.22; letter-spacing: -.015em;
  font-weight: 700; margin: 0 0 clamp(16px, 2.2vw, 26px); color: #3d1305; }
.hsy-sec--paper .hsy-h, .hsy-sec--pale .hsy-h { color: var(--hsy-ink); }
/* --ink 절은 먹 지면이다. 글자를 뒤집지 않으면 안 보인다. */
.hsy-sec--ink .hsy-h { color: #fdf4e8; }
.hsy-p { font-size: clamp(15px, 1.5vw, 18px); max-width: 44em; margin: 0 0 1.1em; color: #5c2b0c; }
.hsy-sec--paper .hsy-p, .hsy-sec--pale .hsy-p { color: #5c2b0c; }
.hsy-sec--ink .hsy-p { color: #f6e6d2; }
.hsy-p b { font-weight: 700; color: #3d1305; }
.hsy-sec--paper .hsy-p b, .hsy-sec--pale .hsy-p b { color: var(--hsy-ink); }
.hsy-sec--ink .hsy-p b { color: #ffffff; }
.hsy-note { font-size: clamp(12.5px, 1.2vw, 14.5px); max-width: 46em;
  margin: clamp(14px, 2vw, 22px) 0 0; color: #95683d; }
.hsy-sec--paper .hsy-note, .hsy-sec--pale .hsy-note { color: rgb(143, 105, 66); }
.hsy-sec--ink .hsy-note { color: #dfbe9a; }

.hsy-mark { margin: clamp(28px, 4.4vw, 56px) 0 0; text-align: center;
  padding: clamp(30px, 5vw, 64px) 20px; background: #fff; border: 1px solid rgba(61, 19, 5, .1); }
.hsy-sec--paper .hsy-mark { background: var(--hsy-paper); }
.hsy-mark img { margin: 0 auto; width: min(400px, 78%); }
.hsy-mark figcaption { margin-top: clamp(18px, 2.4vw, 28px); font-size: clamp(13px, 1.3vw, 15.5px); color: rgb(143, 105, 66); }

.hsy-colours { list-style: none; padding: 0; margin: clamp(24px, 3.4vw, 38px) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.hsy-colours li { background: #fff; border: 1px solid rgba(61, 19, 5, .12); padding-bottom: 14px; }
.hsy-chip { display: block; height: clamp(72px, 8.6vw, 112px); }
.hsy-colours strong { display: block; margin: 12px 12px 3px; font-size: clamp(11.5px, 1.05vw, 13px); color: var(--hsy-ink); }
.hsy-colours code { display: block; margin: 0 12px; font-size: 11px; letter-spacing: .05em; color: rgb(143, 105, 66); }
.hsy-colours em { display: block; margin: 3px 12px 0; font-style: normal; font-size: 11px; color: #c09a70; }

.hsy-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.6vw, 34px); margin-top: clamp(24px, 3.4vw, 38px); }
.hsy-grid2 figure { margin: 0; }
.hsy-grid2 img { width: 100%; background: #fff; border: 1px solid rgba(61, 19, 5, .14); }
.hsy-grid2 figcaption { margin-top: 11px; font-size: clamp(11.5px, 1.1vw, 13.5px); color: #95683d; }
.hsy-sec--paper .hsy-grid2 figcaption, .hsy-sec--pale .hsy-grid2 figcaption { color: rgb(143, 105, 66); }
.hsy-sec--ink .hsy-grid2 figcaption { color: #dfbe9a; }

.hsy-plate { margin: clamp(24px, 3.4vw, 40px) 0 0; }
.hsy-plate img { width: 100%; background: #fff; border: 1px solid rgba(61, 19, 5, .14); }
.hsy-plate figcaption { margin-top: 12px; font-size: clamp(12px, 1.15vw, 14px); color: #95683d; }
.hsy-sec--paper .hsy-plate figcaption, .hsy-sec--pale .hsy-plate figcaption { color: rgb(143, 105, 66); }
.hsy-sec--ink .hsy-plate figcaption { color: #dfbe9a; }

.hsy-motion { margin: clamp(28px, 4vw, 52px) 0 0; }
.hsy-motion video { width: 100%; background: var(--hsy-or); }
.hsy-motion figcaption { margin-top: 12px; font-size: clamp(12px, 1.15vw, 14px); color: #95683d; }
.hsy-sec--paper .hsy-motion figcaption, .hsy-sec--pale .hsy-motion figcaption { color: rgb(143, 105, 66); }
.hsy-sec--ink .hsy-motion figcaption { color: #dfbe9a; }

.hsy-forbid { list-style: none; padding: 0; margin: clamp(20px, 2.6vw, 30px) 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(18px, 2.4vw, 32px); }
.hsy-forbid li { padding: 9px 0 9px 26px; border-bottom: 1px solid rgba(61, 19, 5, .16);
  position: relative; font-size: clamp(12.5px, 1.25vw, 15px); color: #6b3512; }
.hsy-forbid li::before { content: '\00D7'; position: absolute; left: 4px; color: #c0392b; font-weight: 700; }

.hsy-list { list-style: none; padding: 0; margin: clamp(18px, 2.4vw, 26px) 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(18px, 2.4vw, 32px); }
.hsy-list li { padding: 9px 0 9px 22px; border-bottom: 1px solid rgba(61, 19, 5, .24);
  position: relative; font-size: clamp(12.5px, 1.25vw, 15px); color: #5c2b0c; }
.hsy-list li::before { content: '—'; position: absolute; left: 0; color: var(--hsy-b2); }
.hsy-list li[data-out='true'] { color: rgb(139, 106, 59); }
.hsy-list li[data-out='true']::before { color: #b99060; }

.hsy-case [data-reveal] { opacity: 0; transform: translateY(18px);
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1); }
.hsy-case [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hsy-case [data-reveal] { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 860px) {
  .hsy-grid2, .hsy-list, .hsy-forbid, .hsy-colours { grid-template-columns: 1fr; }
  .hsy-mark img { width: 88%; }
}

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/hsy-case-assets/plate-basic.jpg"],
img[src$="/hsy-case-assets/plate-black.jpg"],
img[src$="/hsy-case-assets/plate-grid.jpg"],
img[src$="/hsy-case-assets/plate-concept.jpg"],
img[src$="/hsy-case-assets/plate-colour.jpg"],
img[src$="/hsy-case-assets/plate-coloruse.jpg"],
img[src$="/hsy-case-assets/use-apron.jpg"],
img[src$="/hsy-case-assets/use-vehicle.jpg"],
img[src$="/hsy-case-assets/plate-forbidden.jpg"],
img[src$="/hsy-case-assets/plate-cover.jpg"] { aspect-ratio: 275/389; }
img[src$="/leaderin-case-assets-v2/symbol-final.svg"] { aspect-ratio: 37/24; }
img[src$="/hsy-case-assets/mark-approved.jpg"] { aspect-ratio: 240/109; }