/* ==========================================================================
   세진하이텍 Sejin HIGH TECH — 브랜드 아이덴티티 케이스
   강디자인

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

   설계 근거
   - 지면 #F9C6A9 은 BS-06 색상규정에 인쇄된 **sejin Red 의 30% 농도 단**이다.
     원색 넷이 전부 막혀서(Red 4.8 이램 · Gray 4.4 인슐런스 · Orange 3.8 타라 ·
     Black **0.0 쏘스텍**) 농도 단으로 내려갔다. ΔE2000 **9.0**(갤러리에스 #FCD7A8).
     마크 빨강 #DE0029 과의 명도대비 3.31 — 열여섯 단 가운데 ΔE 와 대비가 함께 서는 자리다.
   - ⚠ **지면색과 모션 바탕이 다르다.** BS-07 색상활용은 **원색 넷만** 바탕으로 규정한다.
     승인 블록이 있는 바탕에서만 차이층을 쓰므로, 모션은 sejin Red **100%** `#DE0029` 위에서 끝난다.
     규격이 요구하는 것은 「끝 프레임 = 승인 조합」이지 「지면색과 같을 것」이 아니다.
     페이지가 30%, 모션이 100% — 같은 색의 두 단이다.
   - 논지는 응용 구성이다. **응용 열여섯 가운데 일곱이 사인보드**다 —
     AS-09 WELCOME BOARD · 10 가로형 · 11 세로형 · 12 지주형 · 13 주차유도 ·
     14 현장용 · 15 부서사인. 서식은 여섯(명함·봉투·레터지·메모지·팩스·사원증)뿐이다.
   - 물성은 **실사 출력 시트를 스퀴지로 밀어 붙인 사인면**이다.
     잔 망점(주기 9px) + 넓고 무른 윤 + 되튐 ω 15.0 · ζ **0.90**.
     **감쇠비가 기존 열셋 가운데 가장 높다**(다음이 씨픽 0.85) — 밀어 붙인 시트는 되튀지 않는다.

   ⚠ 원본이 PDF 가 아니다 — `세진모음/` 의 **JPG 28장**(1649×2334 = A4 200dpi).
     bs00~bs09 · as00~as16 · 표지. 실측 한계가 200dpi 라 그보다 미세한 주장은 하지 않았다.

   - 뺀 것: AS-01 명함 · AS-02 대봉투/소봉투 · AS-03 레터지 · AS-04 메모지 · AS-05 팩스서식
     (주소·연락처), AS-06 사원증/방문증 · AS-08 표찰/명찰(**성명란**).
   ========================================================================== */






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

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

.sjh-hero { padding: clamp(80px, 13vw, 168px) 0 clamp(48px, 7vw, 92px); }
.sjh-hero__eyebrow { font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .26em; text-transform: uppercase;
  color: rgb(124, 75, 58); margin: 0 0 clamp(20px, 3vw, 34px); }
.sjh-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: #3a1108; }
.sjh-hero__title em { font-style: normal; box-shadow: inset 0 -.16em 0 rgba(255, 255, 255, .55); }
.sjh-hero__lede { font-size: clamp(16px, 1.7vw, 21px); max-width: 46em; margin: 0; color: #5c2013; }
.sjh-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(58, 17, 8, .3);
  font-size: clamp(12px, 1.15vw, 14px); letter-spacing: .06em; color: rgb(124, 75, 58); }

.sjh-sec { padding: clamp(52px, 8vw, 108px) 0; border-top: 1px solid rgba(58, 17, 8, .26); }
.sjh-sec--paper { background: #fff; border-top: none; }
.sjh-sec--pale { background: var(--sjh-paper); border-top: none; }
.sjh-sec--ink { background: var(--sjh-k); border-top: none; }
.sjh-kicker { font-size: clamp(11px, 1.05vw, 13px); letter-spacing: .24em; text-transform: uppercase;
  color: rgb(124, 75, 58); margin: 0 0 clamp(12px, 1.6vw, 18px); }
.sjh-sec--paper .sjh-kicker, .sjh-sec--pale .sjh-kicker { color: rgb(148, 101, 81); }
.sjh-sec--ink .sjh-kicker { color: #dfae9a; }
.sjh-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: #3a1108; }
.sjh-sec--paper .sjh-h, .sjh-sec--pale .sjh-h { color: var(--sjh-ink); }
/* --ink 절은 먹 지면이다. 글자를 뒤집지 않으면 안 보인다. */
.sjh-sec--ink .sjh-h { color: #fdf1ea; }
.sjh-p { font-size: clamp(15px, 1.5vw, 18px); max-width: 44em; margin: 0 0 1.1em; color: #5c2013; }
.sjh-sec--paper .sjh-p, .sjh-sec--pale .sjh-p { color: #5c2013; }
.sjh-sec--ink .sjh-p { color: #f6ded2; }
.sjh-p b { font-weight: 700; color: #3a1108; }
.sjh-sec--paper .sjh-p b, .sjh-sec--pale .sjh-p b { color: var(--sjh-ink); }
.sjh-sec--ink .sjh-p b { color: #ffffff; }
.sjh-note { font-size: clamp(12.5px, 1.2vw, 14.5px); max-width: 46em;
  margin: clamp(14px, 2vw, 22px) 0 0; color: rgb(119, 78, 61); }
.sjh-sec--paper .sjh-note, .sjh-sec--pale .sjh-note { color: rgb(148, 101, 81); }
.sjh-sec--ink .sjh-note { color: #dfae9a; }

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

.sjh-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); }
.sjh-colours li { background: #fff; border: 1px solid rgba(58, 17, 8, .12); padding-bottom: 14px; }
.sjh-chip { display: block; height: clamp(72px, 8.6vw, 112px); }
.sjh-colours strong { display: block; margin: 12px 12px 3px; font-size: clamp(11.5px, 1.05vw, 13px); color: var(--sjh-ink); }
.sjh-colours code { display: block; margin: 0 12px; font-size: 11px; letter-spacing: .05em; color: rgb(148, 101, 81); }
.sjh-colours em { display: block; margin: 3px 12px 0; font-style: normal; font-size: 11px; color: rgb(146, 107, 90); }

.sjh-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.6vw, 34px); margin-top: clamp(24px, 3.4vw, 38px); }
.sjh-grid2 figure { margin: 0; }
.sjh-grid2 img { width: 100%; background: #fff; border: 1px solid rgba(58, 17, 8, .14); }
.sjh-grid2 figcaption { margin-top: 11px; font-size: clamp(11.5px, 1.1vw, 13.5px); color: rgb(119, 78, 61); }
.sjh-sec--paper .sjh-grid2 figcaption, .sjh-sec--pale .sjh-grid2 figcaption { color: rgb(148, 101, 81); }
.sjh-sec--ink .sjh-grid2 figcaption { color: #dfae9a; }

.sjh-plate { margin: clamp(24px, 3.4vw, 40px) 0 0; }
.sjh-plate img { width: 100%; background: #fff; border: 1px solid rgba(58, 17, 8, .14); }
.sjh-plate figcaption { margin-top: 12px; font-size: clamp(12px, 1.15vw, 14px); color: rgb(119, 78, 61); }
.sjh-sec--paper .sjh-plate figcaption, .sjh-sec--pale .sjh-plate figcaption { color: rgb(148, 101, 81); }
.sjh-sec--ink .sjh-plate figcaption { color: #dfae9a; }

.sjh-motion { margin: clamp(28px, 4vw, 52px) 0 0; }
.sjh-motion video { width: 100%; background: var(--sjh-red); }
.sjh-motion figcaption { margin-top: 12px; font-size: clamp(12px, 1.15vw, 14px); color: rgb(119, 78, 61); }
.sjh-sec--paper .sjh-motion figcaption, .sjh-sec--pale .sjh-motion figcaption { color: rgb(148, 101, 81); }
.sjh-sec--ink .sjh-motion figcaption { color: #dfae9a; }

.sjh-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); }
.sjh-forbid li { padding: 9px 0 9px 26px; border-bottom: 1px solid rgba(58, 17, 8, .16);
  position: relative; font-size: clamp(12.5px, 1.25vw, 15px); color: #6b2a19; }
.sjh-forbid li::before { content: '\00D7'; position: absolute; left: 4px; color: #c0392b; font-weight: 700; }

.sjh-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); }
.sjh-list li { padding: 9px 0 9px 22px; border-bottom: 1px solid rgba(58, 17, 8, .24);
  position: relative; font-size: clamp(12.5px, 1.25vw, 15px); color: #5c2013; }
.sjh-list li::before { content: '—'; position: absolute; left: 0; color: var(--sjh-b2); }
.sjh-list li[data-out='true'] { color: rgb(150, 100, 77); }
.sjh-list li[data-out='true']::before { color: #b98266; }

.sjh-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); }
.sjh-case [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sjh-case [data-reveal] { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 860px) {
  .sjh-grid2, .sjh-list, .sjh-forbid, .sjh-colours { grid-template-columns: 1fr; }
  .sjh-mark img { width: 88%; }
}

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/sjh-case-assets/plate-basic.jpg"],
img[src$="/sjh-case-assets/plate-reverse.jpg"],
img[src$="/sjh-case-assets/plate-grid.jpg"],
img[src$="/sjh-case-assets/plate-concept.jpg"],
img[src$="/sjh-case-assets/plate-colour.jpg"],
img[src$="/sjh-case-assets/plate-coloruse.jpg"],
img[src$="/sjh-case-assets/use-pylon.jpg"],
img[src$="/sjh-case-assets/use-sign-h.jpg"],
img[src$="/sjh-case-assets/use-sign-v.jpg"],
img[src$="/sjh-case-assets/use-parking.jpg"],
img[src$="/sjh-case-assets/use-site.jpg"],
img[src$="/sjh-case-assets/use-welcome.jpg"],
img[src$="/sjh-case-assets/use-dept.jpg"],
img[src$="/sjh-case-assets/use-flag.jpg"],
img[src$="/sjh-case-assets/use-uniform.jpg"],
img[src$="/sjh-case-assets/plate-forbidden.jpg"],
img[src$="/sjh-case-assets/plate-type.jpg"],
img[src$="/sjh-case-assets/plate-cover.jpg"] { aspect-ratio: 275/389; }
img[src$="/leaderin-case-assets-v2/symbol-final.svg"] { aspect-ratio: 37/24; }
img[src$="/sjh-case-assets/mark-approved.jpg"] { aspect-ratio: 600/299; }