/* ==========================================================================
   다보건설 DABO CONSTRUCTION — 브랜드 아이덴티티 케이스
   강디자인 · 2010

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

   설계 근거
   - 시그니춰가 비례로 못박혀 있다 — 심볼 10X · 사이 X · 워드마크 18X, 전체 29X.
     명함이든 현장 펜스든 같은 비율로 커진다. 이것이 이 케이스의 중심이다.
   - 상호 표기가 둘이라 시그니춰가 네 벌이다 — 가로형 2, 세로형 2,
     각각 「다보건설」과 「다보건설(주)」.
   - 지면 #00ADEF 는 BS-12 색상규정의 「다보건설 Blue 2」 실측값이고 지면에
     Pantone 2995 C 로 적혀 있다. 포트폴리오에 이 순수 시안 바탕이 없어 겹치지 않는다.
   - 마크의 형태·비례·색은 건드리지 않았다. BS-08 시그니춰(가로형1) 지면에서
     치수선을 빼고 본체만 뽑았고, 알파는 255 − min(R,G,B) + 언프리멀티플라이로 복원했다.
   - 뺀 것: AS-01 명함(실명·연락처 형식), AS-05 사원증(얼굴 사진),
     AS-08 배지(인물 사진), AS-03 봉투(주소 블록).
   - 지면에 크롭마크가 찍혀 있어 잉크 bbox 로는 여백이 안 잘린다. 안쪽 7.5% 들여 잘랐다.
   ========================================================================== */

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

.db-case {
  --db-b1: #2e3192; --db-b2: #00adef; --db-b3: #2f8dbe;
  --db-gr: #99d420; --db-yl: #fab80a; --db-ink: #231f20;
  background: var(--db-b2); color: var(--db-ink);
  font-family: 'Helvetica Neue', Helvetica, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  line-height: 1.62; -webkit-font-smoothing: antialiased;
}
.db-case * { box-sizing: border-box; }
.db-case img, .db-case video { display: block; max-width: 100%; height: auto; }
.db-case h1, .db-case h2, .db-case h3, .db-case p,
.db-case figcaption, .db-case li { word-break: keep-all; }
.db-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

/* 표제 */
.db-hero { padding: clamp(80px, 13vw, 168px) 0 clamp(48px, 7vw, 92px); }
.db-hero__eyebrow {
  font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .26em; text-transform: uppercase;
  color: #cdeefc; margin: 0 0 clamp(20px, 3vw, 34px);
}
.db-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: #fff;
}
.db-hero__title em { font-style: normal; color: #fff; box-shadow: inset 0 -.16em 0 var(--db-gr); }
.db-hero__lede { font-size: clamp(16px, 1.7vw, 21px); max-width: 46em; margin: 0; color: #e8f7fe; }
.db-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(255, 255, 255, .4);
  font-size: clamp(12px, 1.15vw, 14px); letter-spacing: .06em; color: #d7f0fd;
}

/* 구획 */
.db-sec { padding: clamp(52px, 8vw, 108px) 0; border-top: 1px solid rgba(255, 255, 255, .32); }
.db-sec--paper { background: #fff; border-top: none; }
.db-sec--ink { background: var(--db-b1); color: #eceefa; border-top: none; }
.db-kicker {
  font-size: clamp(11px, 1.05vw, 13px); letter-spacing: .24em; text-transform: uppercase;
  color: #d7f0fd; margin: 0 0 clamp(12px, 1.6vw, 18px);
}
.db-sec--paper .db-kicker { color: rgb(61, 123, 151); }
.db-sec--ink .db-kicker { color: rgb(164, 168, 216); }
.db-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);
}
.db-sec:not(.db-sec--paper):not(.db-sec--ink) .db-h { color: #fff; }
.db-p { font-size: clamp(15px, 1.5vw, 18px); max-width: 44em; margin: 0 0 1.1em; }
.db-sec:not(.db-sec--paper):not(.db-sec--ink) .db-p { color: #e8f7fe; }
.db-note {
  font-size: clamp(12.5px, 1.2vw, 14.5px); max-width: 46em;
  margin: clamp(14px, 2vw, 22px) 0 0; color: #d7f0fd;
}
.db-sec--paper .db-note { color: #55808f; }
.db-sec--ink .db-note { color: rgb(164, 168, 216); }

/* 마크 */
.db-mark {
  margin: clamp(28px, 4.4vw, 56px) 0 0; text-align: center;
  padding: clamp(30px, 5vw, 64px) 20px; background: #fff; border: 1px solid rgba(35, 31, 32, .1);
}
.db-mark img { margin: 0 auto; width: min(500px, 84%); }
.db-mark figcaption {
  margin-top: clamp(18px, 2.4vw, 28px); font-size: clamp(13px, 1.3vw, 15.5px); color: #55808f;
}

/* 비례 */
.db-prop {
  display: grid; grid-template-columns: 10fr 1fr 18fr; gap: 8px;
  margin: clamp(24px, 3.4vw, 38px) 0 0; align-items: stretch;
}
.db-prop div { padding: 18px 12px; text-align: center; color: #fff; }
.db-prop b { display: block; font-size: clamp(18px, 2.2vw, 28px); }
.db-prop span { display: block; font-size: clamp(11px, 1.1vw, 13px); opacity: .82; margin-top: 4px; }

/* 색 */
.db-colours { list-style: none; padding: 0; margin: clamp(24px, 3.4vw, 38px) 0 0; display: grid; gap: clamp(12px, 1.8vw, 20px); }
.db-colours li { background: #fff; border: 1px solid rgba(35, 31, 32, .1); overflow: hidden; }
.db-bar { display: block; height: clamp(50px, 5.8vw, 74px); }
.db-tints { display: grid; grid-template-columns: repeat(4, 1fr); height: clamp(26px, 3vw, 34px); }
.db-tints span { display: block; font-size: 10px; line-height: clamp(26px, 3vw, 34px); text-align: center; color: rgba(0,0,0,.45); }
.db-colours .meta { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px 14px; }
.db-colours strong { font-size: clamp(13px, 1.25vw, 15px); color: var(--db-ink); }
.db-colours code { font-size: 11.5px; letter-spacing: .06em; color: #7d949e; white-space: nowrap; }

/* 격자 */
.db-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.6vw, 34px); margin-top: clamp(24px, 3.4vw, 38px); }
.db-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 24px); margin-top: clamp(24px, 3.4vw, 38px); }
.db-grid2 figure, .db-grid4 figure { margin: 0; }
.db-grid2 img, .db-grid4 img { width: 100%; background: #fff; border: 1px solid rgba(35, 31, 32, .12); }
.db-sec--ink .db-grid2 img { border-color: rgba(255, 255, 255, .16); }
.db-grid2 figcaption, .db-grid4 figcaption { margin-top: 11px; font-size: clamp(12.5px, 1.2vw, 14px); color: #55808f; }
.db-sec--ink .db-grid2 figcaption { color: rgb(164, 168, 216); }
.db-sec:not(.db-sec--paper):not(.db-sec--ink) .db-grid4 figcaption { color: #ddf2fd; }

/* 모션 */
.db-motion { margin: clamp(28px, 4vw, 52px) 0 0; }
.db-motion video { width: 100%; background: #fff; }
.db-motion figcaption { margin-top: 12px; font-size: clamp(12px, 1.15vw, 14px); color: #d7f0fd; }
.db-sec--paper .db-motion figcaption { color: #55808f; }

/* 목록 */
.db-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(20px, 3vw, 40px); }
.db-list li {
  padding: 10px 0 10px 24px; border-bottom: 1px solid rgba(255, 255, 255, .14);
  position: relative; font-size: clamp(13px, 1.3vw, 15.5px);
}
.db-list li::before { content: '—'; position: absolute; left: 0; color: rgb(164, 168, 216); }

/* 등장 */
.db-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);
}
.db-case [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .db-case [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
  .db-grid2, .db-list { grid-template-columns: 1fr; }
  .db-grid4 { grid-template-columns: repeat(2, 1fr); }
  .db-mark img { width: 94%; }
}

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/leaderin-case-assets-v2/symbol-final.svg"] { aspect-ratio: 37/24; }
img[src$="/db-case-assets/mark-r2.png"] { aspect-ratio: 1000/356; }
img[src$="/db-case-assets/spec-grid.jpg"] { aspect-ratio: 800/1113; }
img[src$="/db-case-assets/spec-posneg.jpg"] { aspect-ratio: 1600/2067; }
img[src$="/db-case-assets/spec-sign-h.jpg"] { aspect-ratio: 200/251; }
img[src$="/db-case-assets/spec-sign-v.jpg"] { aspect-ratio: 1600/2051; }
img[src$="/db-case-assets/spec-coloruse.jpg"] { aspect-ratio: 1600/2439; }
img[src$="/db-case-assets/spec-forbidden.jpg"] { aspect-ratio: 800/1187; }
img[src$="/db-case-assets/use-fence-r2.jpg"] { aspect-ratio: 98/117; }
img[src$="/db-case-assets/use-pylon-r2.jpg"] { aspect-ratio: 245/313; }
img[src$="/db-case-assets/use-uniform-r2.jpg"] { aspect-ratio: 490/733; }
img[src$="/db-case-assets/use-dept-r2.jpg"] { aspect-ratio: 490/591; }
img[src$="/db-case-assets/use-frame-r2.jpg"] { aspect-ratio: 245/338; }
img[src$="/db-case-assets/use-flag-r2.jpg"] { aspect-ratio: 245/373; }
img[src$="/db-case-assets/use-letter-r3.jpg"] { aspect-ratio: 490/743; }
img[src$="/db-case-assets/use-tag-r2.jpg"] { aspect-ratio: 245/253; }

/* === 인쇄값의 근거 지면 (2026-08-16) === */
.db-plate { margin: clamp(24px, 3.4vw, 38px) auto 0; max-width: 620px; }
.db-plate img { display: block; width: 100%; height: auto; aspect-ratio: 1020/1660; background: #fff; border: 1px solid rgba(35, 31, 32, .12); }
/* 캡션 색은 이 케이스의 다른 캡션과 같은 값을 쓴다 — 대비 감사를 이미 통과한 색이다 */
.db-plate figcaption { margin-top: 11px; font-size: clamp(12.5px, 1.2vw, 14px); line-height: 1.75; color: #55808f; }