/* flux8 — 3PL 물류·풀필먼트 브랜드 아이덴티티 케이스
   지면색 #EC018C = flux8 HOT PINK (지면 04 색상규정 · Process C0 M100 Y0 K0)
   기존 71건의 지면색과 가장 먼 색이다(최근접 ΔE2000 19.5). */

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

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

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

body[data-flux8-project='true'] { background: #EC018C; }

.flux8-case {
  --flux8-pink: #EC018C;
  --flux8-blue1: #00ADEF;
  --flux8-blue2: #2550A9;
  --flux8-ink: #231F20;
  --flux8-paper: #FFFFFF;
  --flux8-mist: #FBEAF3;
  color: var(--flux8-ink);
  font-family: 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;
  line-height: 1.72;
  letter-spacing: -0.01em;
}

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

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

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

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

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

/* ── 마크·모션·지면 ─────────────────────────────────── */
.flux8-mark { margin: 26px 0 0; }
.flux8-mark img { width: 100%; border: 1px solid rgba(35, 31, 32, .1); background: #fff; }
.flux8-motion { margin: 26px 0 0; }
.flux8-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;
}

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

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

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

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

/* 자리 예약 — 굴릴 때 밀리지 않게 */
img[src$="/flux8-case-assets/mark-approved.png"] { aspect-ratio: 1400/476; }
img[src$="/flux8-case-assets/mark-mono.png"] { aspect-ratio: 1000/340; }
img[src$="/flux8-case-assets/plate-concept.jpg"],
img[src$="/flux8-case-assets/plate-basic.jpg"],
img[src$="/flux8-case-assets/plate-grid.jpg"],
img[src$="/flux8-case-assets/plate-colour.jpg"],
img[src$="/flux8-case-assets/plate-coloruse-a.jpg"],
img[src$="/flux8-case-assets/plate-coloruse-b.jpg"],
img[src$="/flux8-case-assets/plate-motif.jpg"],
img[src$="/flux8-case-assets/plate-type.jpg"],
img[src$="/flux8-case-assets/plate-forbidden.jpg"],
img[src$="/flux8-case-assets/app-namecard-r2.jpg"],
img[src$="/flux8-case-assets/app-envelope-l.jpg"],
img[src$="/flux8-case-assets/app-envelope-s.jpg"],
img[src$="/flux8-case-assets/app-letter.jpg"],
img[src$="/flux8-case-assets/app-memo.jpg"],
img[src$="/flux8-case-assets/app-sign.jpg"],
img[src$="/flux8-case-assets/app-plaque.jpg"] { aspect-ratio: 1400/990; }
.flux8-motion video { aspect-ratio: 1440/900; }