/* HS ENC — 건설·엔지니어링 브랜드 아이덴티티 케이스
   지면색 #FBCC86 = DIC 2529s 44% (지면 05 색상규정 · Process C0 M19 Y44 K0)
   HS ENC 아홉 색을 기존 지면색 50건과 전부 견줘 **가장 먼 것**이 이 색이다(ΔE2000 5.6).
   RED 는 wd #ED1C24 와 0.7 이라 쓸 수 없었다. */

/* 셸의 슬라이스 격자를 푼다 — 이걸 빼면 본문 폭이 절반으로 접힌다(471px). */
body[data-hsenc-project='true'] .case__study__slices { display: block; width: 100%; max-width: none; padding: 0; gap: 0; }
body[data-hsenc-project='true'] .case__study__info { display: none; }

.hsenc-site-host { display: block; width: 100%; }

#hsenc-case-root { display: block; width: 100%; }

body[data-hsenc-project='true'] { background: #FBCC86; }

.hsenc-case {
  --hsenc-red: #ED2128;
  --hsenc-yellow: #F7960F;
  --hsenc-tan: #FBCC86;
  --hsenc-dgray: #53545A;
  --hsenc-lgray: #C8C7C7;
  --hsenc-ink: #231F20;
  --hsenc-paper: #FFFFFF;
  --hsenc-mist: #FDF4E6;
  --hsenc-draft: #F7FAFC;
  color: var(--hsenc-ink);
  font-family: 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;
  line-height: 1.72;
  letter-spacing: -0.01em;
}

.hsenc-case img, .hsenc-case video { display: block; max-width: 100%; height: auto; }

.hsenc-wrap { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }

/* ── 표지 ───────────────────────────────────────────── */
.hsenc-hero {
  background: var(--hsenc-tan); color: var(--hsenc-ink);
  padding: clamp(64px, 11vw, 148px) 0 clamp(52px, 8vw, 104px);
}
.hsenc-hero__eyebrow {
  font-size: clamp(13px, 1.5vw, 15px); letter-spacing: .12em;
  text-transform: uppercase; opacity: .72; margin: 0 0 18px; font-weight: 700;
}
.hsenc-hero__title {
  font-size: clamp(30px, 6.2vw, 68px); line-height: 1.14; font-weight: 700;
  letter-spacing: -0.03em; margin: 0 0 22px;
}
.hsenc-hero__title em { font-style: normal; color: var(--hsenc-red); }
.hsenc-hero__lede { font-size: clamp(15px, 1.9vw, 19px); max-width: 62ch; margin: 0 0 30px; }
.hsenc-hero__lede b { font-weight: 700; }
.hsenc-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; }
.hsenc-hero__meta span {
  font-size: clamp(12px, 1.4vw, 14px); padding: 7px 14px;
  border: 1px solid rgba(35, 31, 32, .32); border-radius: 999px;
}

/* ── 장면 ───────────────────────────────────────────── */
.hsenc-sec { padding: clamp(46px, 7vw, 96px) 0; border-top: 1px solid rgba(35, 31, 32, .1); }
.hsenc-sec--paper { background: var(--hsenc-paper); border-top: none; }
.hsenc-sec--mist { background: var(--hsenc-mist); border-top: none; }
.hsenc-sec--draft { background: var(--hsenc-draft); border-top: none; }
.hsenc-sec--ink { background: var(--hsenc-dgray); color: #F4F4F5; border-top: none; }
.hsenc-sec--ink .hsenc-kicker { color: #FBCC86; }

.hsenc-kicker {
  font-size: clamp(12px, 1.4vw, 14px); letter-spacing: .1em; text-transform: uppercase;
  color: var(--hsenc-red); margin: 0 0 12px; font-weight: 700;
}
.hsenc-h {
  font-size: clamp(21px, 3.4vw, 36px); line-height: 1.3; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 18px;
}
.hsenc-p { font-size: clamp(14px, 1.7vw, 17px); max-width: 68ch; margin: 0 0 20px; }
.hsenc-p b { font-weight: 700; }

[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  [data-reveal].is-in { transition: none; }
}

/* ── 마크·모션·지면 ─────────────────────────────────── */
.hsenc-mark { margin: 26px 0 0; }
.hsenc-mark img { width: 100%; border: 1px solid rgba(35, 31, 32, .1); background: #fff; }
.hsenc-motion { margin: 26px 0 0; }
.hsenc-motion video { width: 100%; background: #fff; border: 1px solid rgba(35, 31, 32, .1); }
figure { margin: 0; }
figcaption { font-size: clamp(12px, 1.4vw, 14px); opacity: .72; margin-top: 10px; }

.hsenc-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.hsenc-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.hsenc-grid2 img, .hsenc-grid3 img { width: 100%; border: 1px solid rgba(35, 31, 32, .12); background: #fff; }
@media (max-width: 720px) {
  .hsenc-grid2, .hsenc-grid3 { grid-template-columns: 1fr; }
}

/* ── 색 칩 ──────────────────────────────────────────── */
.hsenc-colours { list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.hsenc-colours li {
  background: #fff; border: 1px solid rgba(35, 31, 32, .12);
  padding: 0 0 14px; display: flex; flex-direction: column;
}
.hsenc-chip { display: block; height: 62px; width: 100%; }
.hsenc-colours strong { font-size: 14px; margin: 12px 14px 2px; }
.hsenc-colours code { font-size: 12px; opacity: .74; margin: 0 14px 2px; }
.hsenc-colours em { font-style: normal; font-size: 12px; opacity: .62; margin: 0 14px; }

/* ── 실측 수치 ──────────────────────────────────────── */
.hsenc-measure { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 26px; }
.hsenc-measure div { background: #fff; border: 1px solid rgba(35, 31, 32, .12); padding: 18px 16px; }
.hsenc-sec--ink .hsenc-measure div { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.hsenc-measure b { display: block; font-size: clamp(20px, 2.8vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.hsenc-measure span { display: block; font-size: 12px; opacity: .68; margin-top: 6px; }

/* ── 사용금지 ───────────────────────────────────────── */
.hsenc-forbid { list-style: none; padding: 0; margin: 22px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.hsenc-forbid li {
  font-size: 13px; padding: 12px 14px; background: #fff;
  border-left: 3px solid var(--hsenc-red); border-radius: 2px;
}

/* 자리 예약 — 굴릴 때 밀리지 않게 */
img[src$="/hsenc-case-assets/mark-approved.png"],
img[src$="/hsenc-case-assets/mark-approved-white.jpg"] { aspect-ratio: 1400/210; }
img[src$="/hsenc-case-assets/plate-concept.jpg"],
img[src$="/hsenc-case-assets/plate-grid.jpg"],
img[src$="/hsenc-case-assets/plate-space.jpg"],
img[src$="/hsenc-case-assets/plate-sigblock.jpg"],
img[src$="/hsenc-case-assets/plate-colour.jpg"],
img[src$="/hsenc-case-assets/plate-coloruse-a.jpg"],
img[src$="/hsenc-case-assets/plate-coloruse-b.jpg"],
img[src$="/hsenc-case-assets/plate-type.jpg"],
img[src$="/hsenc-case-assets/plate-forbidden.jpg"],
img[src$="/hsenc-case-assets/app-namecard.jpg"],
img[src$="/hsenc-case-assets/app-envelope-l.jpg"],
img[src$="/hsenc-case-assets/app-envelope-s.jpg"],
img[src$="/hsenc-case-assets/app-letter.jpg"],
img[src$="/hsenc-case-assets/app-fax.jpg"],
img[src$="/hsenc-case-assets/app-memo.jpg"],
img[src$="/hsenc-case-assets/app-folder.jpg"],
img[src$="/hsenc-case-assets/app-a4holder.jpg"],
img[src$="/hsenc-case-assets/app-badge.jpg"],
img[src$="/hsenc-case-assets/app-idcard.jpg"],
img[src$="/hsenc-case-assets/app-approval.jpg"],
img[src$="/hsenc-case-assets/app-sign.jpg"],
img[src$="/hsenc-case-assets/app-plaque.jpg"],
img[src$="/hsenc-case-assets/app-board.jpg"],
img[src$="/hsenc-case-assets/app-guide.jpg"],
img[src$="/hsenc-case-assets/app-popbanner.jpg"],
img[src$="/hsenc-case-assets/app-diary.jpg"] { aspect-ratio: 1400/991; }
.hsenc-motion video { aspect-ratio: 1440/900; }