body[data-pig-family-project="true"] {
  --pig-ink: #231f20;
  --pig-red: #f04923;
  --pig-green: #a5ce39;
  --pig-pink: #f7b4d1;
  --pig-sky: #00b3ea;
  --pig-orange: #faa819;
  --pig-cream: #fff8ee;
  --pig-paper: #fffdf8;
  --pig-muted: #736963;
}

body[data-pig-family-project="true"] .case__study__slices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-pig-family-project="true"] .case__study__gallery__item,
body[data-pig-family-project="true"] .case__study__gallery__item__inner {
  width: 100%;
  min-width: 0;
}

body[data-pig-family-project="true"] .pig-scene {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--pig-cream);
  color: var(--pig-ink);
  isolation: isolate;
  container-type: inline-size;
}

body[data-pig-family-project="true"] .pig-scene *,
body[data-pig-family-project="true"] .pig-scene *::before,
body[data-pig-family-project="true"] .pig-scene *::after {
  box-sizing: border-box;
}

body[data-pig-family-project="true"] .pig-scene img,
body[data-pig-family-project="true"] .pig-scene video {
  display: block;
}

body[data-pig-family-project="true"] .pig-scene figure,
body[data-pig-family-project="true"] .pig-scene h1,
body[data-pig-family-project="true"] .pig-scene h2,
body[data-pig-family-project="true"] .pig-scene p {
  margin: 0;
}

body[data-pig-family-project="true"] .pig-scene-heading {
  position: absolute;
  z-index: 8;
  top: 6.5%;
  left: 6.2%;
  max-width: 52%;
}

body[data-pig-family-project="true"] .pig-scene-heading > span,
body[data-pig-family-project="true"] .pig-overlay-copy > span,
body[data-pig-family-project="true"] .pig-touchpoint-copy > span,
body[data-pig-family-project="true"] .pig-store-copy > span,
body[data-pig-family-project="true"] .pig-motion-copy > span {
  display: block;
  margin-bottom: .85em;
  color: inherit;
  font-size: clamp(11px, 1.05cqw,13px);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
}

body[data-pig-family-project="true"] .pig-scene-heading > strong,
body[data-pig-family-project="true"] .pig-overlay-copy > strong,
body[data-pig-family-project="true"] .pig-touchpoint-copy > strong,
body[data-pig-family-project="true"] .pig-store-copy > strong {
  display: block;
  font-size: clamp(20px, 3.7cqw, 48px);
  font-weight: 620;
  letter-spacing: -.065em;
  line-height: 1.08;
  word-break: keep-all;
}

/* 01 — Hero */
body[data-pig-family-project="true"] .pig-hero {
  display: grid;
  grid-template-columns: 54% 46%;
  background: var(--pig-ink);
}

body[data-pig-family-project="true"] .pig-hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 6.4% 7.2% 6.2%;
  background: var(--pig-cream);
}

body[data-pig-family-project="true"] .pig-hero-logo {
  width: min(54%, 330px);
  height: auto;
  object-fit: contain;
  object-position: left center;
}

body[data-pig-family-project="true"] .pig-hero h1 {
  max-width: 94%;
  color: var(--pig-ink);
  font-size: clamp(32px, 5.8cqw, 74px);
  font-weight: 650;
  letter-spacing: -.082em;
  line-height: .98;
  word-break: keep-all;
}

body[data-pig-family-project="true"] .pig-hero-copy > p {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #625851;
  font-size: clamp(11px, 1.1cqw, 13px);
  font-weight: 700;
  letter-spacing: .04em;
}

body[data-pig-family-project="true"] .pig-hero-copy > p i {
  width: clamp(14px, 2.3cqw, 34px);
  height: 1px;
  background: currentColor;
  opacity: .45;
}

body[data-pig-family-project="true"] .pig-hero-food {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--pig-red);
}

body[data-pig-family-project="true"] .pig-hero-food::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(35,31,32,.06), transparent 28%, rgba(35,31,32,.08));
  pointer-events: none;
}

body[data-pig-family-project="true"] .pig-hero-food > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
}

body[data-pig-family-project="true"] .pig-hero-seat {
  position: absolute;
  z-index: 3;
  width: 11.5%;
  aspect-ratio: 1;
  border: 3px solid rgba(255,255,255,.86);
  border-radius: 50%;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--seat) 58%, transparent);
}

body[data-pig-family-project="true"] .pig-hero-seat.seat-a { --seat: var(--pig-sky); top: 8%; right: 10%; }
body[data-pig-family-project="true"] .pig-hero-seat.seat-b { --seat: var(--pig-pink); top: 44%; left: 8%; }
body[data-pig-family-project="true"] .pig-hero-seat.seat-c { --seat: var(--pig-orange); bottom: 8%; right: 15%; }
body[data-pig-family-project="true"] .pig-hero-seat.seat-d { --seat: var(--pig-green); bottom: 16%; left: 24%; }

/* 02 — Table */
body[data-pig-family-project="true"] .pig-table-story {
  background: #5a3a2a;
}

body[data-pig-family-project="true"] .pig-table-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  filter: saturate(.93) contrast(1.02);
}

body[data-pig-family-project="true"] .pig-table-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(35,31,32,.02) 20%, rgba(35,31,32,.78) 100%);
}

body[data-pig-family-project="true"] .pig-overlay-copy {
  position: absolute;
  z-index: 5;
  left: 6.2%;
  right: 6.2%;
  bottom: 7.5%;
  max-width: 75%;
  color: white;
}

body[data-pig-family-project="true"] .pig-table-ring {
  position: absolute;
  z-index: 4;
  width: 7.5%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 50%;
}

body[data-pig-family-project="true"] .pig-table-ring::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--ring);
}

body[data-pig-family-project="true"] .pig-table-ring.ring-1 { --ring: var(--pig-sky); top: 8%; left: 47%; }
body[data-pig-family-project="true"] .pig-table-ring.ring-2 { --ring: var(--pig-pink); top: 42%; right: 4%; }
body[data-pig-family-project="true"] .pig-table-ring.ring-3 { --ring: var(--pig-orange); bottom: 5%; left: 46%; }
body[data-pig-family-project="true"] .pig-table-ring.ring-4 { --ring: var(--pig-green); top: 40%; left: 4%; }

/* 03 — Process, kept to one scene */
body[data-pig-family-project="true"] .pig-process {
  background: #f4f0e9;
}

body[data-pig-family-project="true"] .pig-process-track {
  position: absolute;
  left: 5.8%;
  right: 5.8%;
  bottom: 6.5%;
  display: grid;
  grid-template-columns: 1fr 6% 1fr 6% 1.18fr;
  align-items: center;
  gap: 1.4%;
  height: 57%;
}

body[data-pig-family-project="true"] .pig-process-step {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  height: 100%;
  min-width: 0;
}

body[data-pig-family-project="true"] .pig-process-step > span {
  color: rgb(117, 107, 102);
  font-size: clamp(8px, .95cqw, 12px);
  font-weight: 700;
  letter-spacing: .1em;
}

body[data-pig-family-project="true"] .pig-process-step > div {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(35,31,32,.12);
  border-radius: 10px;
  background: white;
}

body[data-pig-family-project="true"] .pig-process-step > div img {
  width: 84%;
  height: 76%;
  object-fit: contain;
}

body[data-pig-family-project="true"] .pig-process-step.approved > div {
  background: var(--pig-cream);
  border-color: color-mix(in srgb, var(--pig-red) 45%, transparent);
}

body[data-pig-family-project="true"] .pig-process-step.approved > div img {
  width: 88%;
}

body[data-pig-family-project="true"] .pig-process-step figcaption {
  min-height: 2.8em;
  color: #5f5651;
  font-size: clamp(11px, 1.05cqw, 13px);
  line-height: 1.4;
  word-break: keep-all;
}

body[data-pig-family-project="true"] .pig-process-arrow {
  position: relative;
  width: 100%;
  height: 1px;
  background: rgba(35,31,32,.34);
}

body[data-pig-family-project="true"] .pig-process-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(35,31,32,.55);
  border-right: 1px solid rgba(35,31,32,.55);
  transform: translateY(-50%) rotate(45deg);
}

/* 04 — Faces */
body[data-pig-family-project="true"] .pig-faces {
  background: var(--pig-ink);
  color: white;
}

body[data-pig-family-project="true"] .pig-heading-light { color: white; }

body[data-pig-family-project="true"] .pig-face-stage {
  position: absolute;
  inset: 0;
}

body[data-pig-family-project="true"] .pig-face-symbol {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 56%;
  width: 28%;
  height: 48%;
  object-fit: contain;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.25));
}

body[data-pig-family-project="true"] .pig-person {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 17%;
  height: 34%;
}

body[data-pig-family-project="true"] .pig-person i {
  position: absolute;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--person-color);
  opacity: .28;
}

body[data-pig-family-project="true"] .pig-person img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body[data-pig-family-project="true"] .person-father { --person-color: var(--pig-sky); left: 7%; top: 48%; }
body[data-pig-family-project="true"] .person-mother { --person-color: var(--pig-pink); right: 7%; top: 47%; }
body[data-pig-family-project="true"] .person-girl { --person-color: var(--pig-orange); left: 29%; bottom: 2%; width: 14%; }
body[data-pig-family-project="true"] .person-boy { --person-color: var(--pig-green); right: 29%; bottom: 1%; width: 14%; }

/* 05 — Approved mark */
body[data-pig-family-project="true"] .pig-approved {
  display: grid;
  grid-template-columns: 42% 58%;
  background: var(--pig-paper);
}

body[data-pig-family-project="true"] .pig-approved-panel {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: 7%;
}

body[data-pig-family-project="true"] .pig-approved-panel > span {
  font-size: clamp(8px, 1cqw, 13px);
  font-weight: 700;
  letter-spacing: .12em;
}

body[data-pig-family-project="true"] .symbol-panel {
  align-items: center;
  background: var(--pig-green);
  color: var(--pig-ink);
}

body[data-pig-family-project="true"] .symbol-panel > span { align-self: flex-start; }

body[data-pig-family-project="true"] .symbol-panel img {
  width: 58%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 20px 34px rgba(35,31,32,.12));
}

body[data-pig-family-project="true"] .word-panel {
  background: var(--pig-cream);
}

body[data-pig-family-project="true"] .word-panel img {
  align-self: center;
  width: 88%;
  height: 45%;
  object-fit: contain;
}

body[data-pig-family-project="true"] .word-panel strong {
  display: block;
  max-width: 92%;
  font-size: clamp(18px, 2.65cqw, 34px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1.18;
  word-break: keep-all;
}

/* 06 — Character and color system */
body[data-pig-family-project="true"] .pig-system {
  background: #f7f5f0;
}

body[data-pig-family-project="true"] .pig-palette {
  position: absolute;
  top: 8%;
  right: 6%;
  display: flex;
  gap: 5px;
}

body[data-pig-family-project="true"] .pig-palette i {
  display: block;
  width: clamp(20px, 3.1cqw, 38px);
  aspect-ratio: 1;
  border-radius: 50%;
}

body[data-pig-family-project="true"] .pig-palette i:nth-child(1) { background: var(--pig-red); }
body[data-pig-family-project="true"] .pig-palette i:nth-child(2) { background: var(--pig-green); }
body[data-pig-family-project="true"] .pig-palette i:nth-child(3) { background: var(--pig-pink); }
body[data-pig-family-project="true"] .pig-palette i:nth-child(4) { background: var(--pig-sky); }
body[data-pig-family-project="true"] .pig-palette i:nth-child(5) { background: var(--pig-orange); }

body[data-pig-family-project="true"] .pig-character-line {
  position: absolute;
  left: 5.5%;
  right: 5.5%;
  bottom: 7%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 1.5%;
  height: 52%;
}

body[data-pig-family-project="true"] .pig-character-line figure {
  position: relative;
  display: grid;
  place-items: end center;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: white;
}

body[data-pig-family-project="true"] .pig-character-line figure::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: var(--strip);
}

body[data-pig-family-project="true"] .pig-character-line figure:nth-child(1) { --strip: var(--pig-sky); }
body[data-pig-family-project="true"] .pig-character-line figure:nth-child(2) { --strip: var(--pig-pink); }
body[data-pig-family-project="true"] .pig-character-line figure:nth-child(3) { --strip: var(--pig-orange); }
body[data-pig-family-project="true"] .pig-character-line figure:nth-child(4) { --strip: var(--pig-green); }

body[data-pig-family-project="true"] .pig-character-line img {
  position: relative;
  z-index: 2;
  max-width: 76%;
  max-height: 92%;
  object-fit: contain;
}

body[data-pig-family-project="true"] .pig-family-mark {
  position: absolute;
  z-index: 5;
  right: 5.2%;
  top: 9%;
  width: 21%;
  max-height: 26%;
  object-fit: contain;
  opacity: .96;
}

/* 07 — Touchpoints */
body[data-pig-family-project="true"] .pig-touchpoints {
  background: #e8e7e3;
}

body[data-pig-family-project="true"] .pig-touchpoint-copy {
  position: absolute;
  z-index: 10;
  top: 6.2%;
  left: 6%;
  max-width: 62%;
}

body[data-pig-family-project="true"] .pig-touchpoints figure {
  position: absolute;
  overflow: hidden;
  border-radius: 9px;
  box-shadow: 0 18px 42px rgba(35,31,32,.13);
  background: white;
}

body[data-pig-family-project="true"] .pig-touchpoints figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 응용 보드는 여러 항목과 캡션이 배열된 문서다.
   cover 로 채우면 항목이 프레임 밖으로 밀려나 사라진다 — 유니폼 61%, 사인 21%, 명함 20% 손실. */
body[data-pig-family-project="true"] .touch-main { left: 6%; bottom: 6%; width: 42%; height: 53%; }
body[data-pig-family-project="true"] .touch-main img { object-fit: contain !important; padding: 4%; }
body[data-pig-family-project="true"] .touch-card { right: 5%; top: 5%; width: 29%; height: 37%; transform: rotate(1.2deg); }
body[data-pig-family-project="true"] .touch-card img { object-fit: contain !important; padding: 4%; }
body[data-pig-family-project="true"] .touch-store { left: 51%; bottom: 6%; width: 23%; height: 43%; transform: rotate(-1.3deg); }
body[data-pig-family-project="true"] .touch-store img { object-fit: contain !important; padding: 5%; }
body[data-pig-family-project="true"] .touch-uniform { right: 4%; bottom: 6%; width: 22%; height: 43%; transform: rotate(.8deg); }
body[data-pig-family-project="true"] .touch-uniform img { object-fit: contain !important; padding: 4%; }

/* Motion scenes */
body[data-pig-family-project="true"] .pig-motion-scene {
  background: var(--pig-cream);
}

body[data-pig-family-project="true"] .pig-motion-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--pig-cream);
}

body[data-pig-family-project="true"] .pig-motion-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--pig-cream);
}

body[data-pig-family-project="true"] .pig-motion-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(35,31,32,.35), transparent 35%, transparent 68%, rgba(35,31,32,.42));
}

body[data-pig-family-project="true"] .motion-three .pig-motion-vignette {
  background: linear-gradient(180deg, rgba(0,0,0,.48), transparent 36%, transparent 70%, rgba(35,31,32,.42));
}

body[data-pig-family-project="true"] .pig-motion-copy {
  position: absolute;
  z-index: 4;
  top: 6.5%;
  left: 6.2%;
  max-width: 48%;
  color: white;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}

body[data-pig-family-project="true"] .pig-motion-copy strong {
  display: block;
  font-size: clamp(24px, 4cqw, 52px);
  font-weight: 620;
  letter-spacing: -.065em;
  line-height: 1.05;
  word-break: keep-all;
}

body[data-pig-family-project="true"] .pig-motion-copy p {
  margin-top: 1em;
  max-width: 36em;
  font-size: clamp(9px, 1.18cqw, 14px);
  line-height: 1.55;
  word-break: keep-all;
}

body[data-pig-family-project="true"] .pig-motion-still {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  display: none;
  width: 54%;
  max-height: 45%;
  object-fit: contain;
  transform: translate(-50%,-50%);
}

/* 09 — Application + motion 2 */
body[data-pig-family-project="true"] .pig-motion-application {
  display: grid;
  grid-template-columns: 42% 58%;
  background: var(--pig-paper);
}

body[data-pig-family-project="true"] .pig-motion-application > .pig-motion-frame {
  position: relative;
  inset: auto;
  grid-column: 2;
  min-width: 0;
}

body[data-pig-family-project="true"] .pig-motion-application-art {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--pig-red);
}

body[data-pig-family-project="true"] .pig-motion-application-art > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 49% center;
  mix-blend-mode: normal;
}

body[data-pig-family-project="true"] .pig-motion-application-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(35,31,32,.28));
}

body[data-pig-family-project="true"] .pig-application-badge {
  position: absolute;
  z-index: 4;
  left: 8%;
  bottom: 7%;
  width: 26%;
  max-height: 31%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.16));
}

body[data-pig-family-project="true"] .pig-motion-application .pig-motion-copy {
  max-width: 68%;
}

/* 10 — Store */
body[data-pig-family-project="true"] .pig-store {
  background: var(--pig-ink);
}

body[data-pig-family-project="true"] .pig-store-copy {
  position: absolute;
  z-index: 8;
  left: 5.5%;
  top: 7%;
  max-width: 48%;
  color: white;
  text-shadow: 0 2px 16px rgba(0,0,0,.28);
}

body[data-pig-family-project="true"] .pig-store figure {
  position: absolute;
  overflow: hidden;
  border-radius: 9px;
  background: #423b37;
}

body[data-pig-family-project="true"] .pig-store figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-pig-family-project="true"] .store-finished { left: 5.5%; bottom: 6%; width: 47%; height: 50%; }
body[data-pig-family-project="true"] .store-finished img { object-position: center 47%; }
body[data-pig-family-project="true"] .store-interior { right: 5%; top: 6%; width: 39%; height: 45%; }
/* 같은 응용 보드라 위 .touch-store 와 동일하게 문서로 다룬다. */
body[data-pig-family-project="true"] .store-interior img { object-fit: contain !important; padding: 4%; }
body[data-pig-family-project="true"] .store-food { right: 5%; bottom: 6%; width: 39%; height: 39%; }
body[data-pig-family-project="true"] .store-food img { object-position: center 56%; }

/* 12 — Closing */
body[data-pig-family-project="true"] .pig-closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6.5%;
  background: var(--pig-cream);
  text-align: center;
}

body[data-pig-family-project="true"] .pig-closing > img {
  position: relative;
  z-index: 3;
  width: 54%;
  max-height: 34%;
  object-fit: contain;
}

body[data-pig-family-project="true"] .pig-closing > strong {
  position: relative;
  z-index: 3;
  color: var(--pig-ink);
  font-size: clamp(25px, 4.25cqw, 54px);
  font-weight: 620;
  letter-spacing: -.068em;
  line-height: 1.05;
}

body[data-pig-family-project="true"] .pig-closing > p {
  position: relative;
  z-index: 3;
  color: #6d625c;
  font-size: clamp(11px, 1.25cqw, 15px);
  font-weight: 700;
  letter-spacing: .04em;
}

body[data-pig-family-project="true"] .pig-closing-halo {
  position: absolute;
  inset: 0;
  z-index: 1;
}

body[data-pig-family-project="true"] .pig-closing-halo i {
  position: absolute;
  width: 19%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .13;
}

body[data-pig-family-project="true"] .pig-closing-halo i:nth-child(1) { background: var(--pig-sky); left: -3%; top: 12%; }
body[data-pig-family-project="true"] .pig-closing-halo i:nth-child(2) { background: var(--pig-pink); right: 1%; top: -4%; }
body[data-pig-family-project="true"] .pig-closing-halo i:nth-child(3) { background: var(--pig-orange); left: 18%; bottom: -14%; }
body[data-pig-family-project="true"] .pig-closing-halo i:nth-child(4) { background: var(--pig-green); right: 17%; bottom: -16%; }

/* Project information */
body[data-pig-family-project="true"] .case__study__info {
  margin-top: 8px;
}

body[data-pig-family-project="true"] .case__study__info__project__information,
body[data-pig-family-project="true"] .case__study__info__credits {
  background: #f1efeb;
  color: var(--pig-ink);
}

body[data-pig-family-project="true"] .case__study__info h2 {
  letter-spacing: -.04em;
}

body[data-pig-family-project="true"] .case__study__info p {
  word-break: keep-all;
}

@media (max-width: 656px) {
  body[data-pig-family-project="true"] .case__study__slices { gap: 8px; }

  body[data-pig-family-project="true"] .pig-scene {
    aspect-ratio: auto !important;
    min-height: 560px;
    border-radius: 8px;
  }

  body[data-pig-family-project="true"] .pig-scene-heading {
    top: 30px;
    left: 24px;
    right: 24px;
    max-width: none;
  }

  body[data-pig-family-project="true"] .pig-scene-heading > span,
  body[data-pig-family-project="true"] .pig-overlay-copy > span,
  body[data-pig-family-project="true"] .pig-touchpoint-copy > span,
  body[data-pig-family-project="true"] .pig-store-copy > span,
  body[data-pig-family-project="true"] .pig-motion-copy > span {
    font-size: 11px;
  }

  body[data-pig-family-project="true"] .pig-scene-heading > strong,
  body[data-pig-family-project="true"] .pig-overlay-copy > strong,
  body[data-pig-family-project="true"] .pig-touchpoint-copy > strong,
  body[data-pig-family-project="true"] .pig-store-copy > strong {
    font-size: 26px;
  }

  body[data-pig-family-project="true"] .pig-hero {
    display: flex;
    flex-direction: column;
    min-height: 700px;
  }

  body[data-pig-family-project="true"] .pig-hero-copy {
    flex: 0 0 54%;
    padding: 28px 25px 24px;
  }

  body[data-pig-family-project="true"] .pig-hero-logo { width: 58%; }
  body[data-pig-family-project="true"] .pig-hero h1 { font-size: 43px; line-height: .98; }
  body[data-pig-family-project="true"] .pig-hero-copy > p { gap: 6px; font-size: 11px; }
  body[data-pig-family-project="true"] .pig-hero-food { flex: 1 1 auto; min-height: 280px; }
  body[data-pig-family-project="true"] .pig-hero-food > img { object-position: center 56%; }

  body[data-pig-family-project="true"] .pig-table-story { min-height: 600px; }
  body[data-pig-family-project="true"] .pig-table-photo { object-position: 50% center; }
  body[data-pig-family-project="true"] .pig-overlay-copy { left: 24px; right: 24px; bottom: 28px; max-width: none; }
  body[data-pig-family-project="true"] .pig-table-ring { width: 13%; }

  body[data-pig-family-project="true"] .pig-process { min-height: 870px; }
  body[data-pig-family-project="true"] .pig-process-track {
    top: 180px;
    bottom: 28px;
    left: 24px;
    right: 24px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 24px 1fr 24px 1.25fr;
    gap: 8px;
    height: auto;
  }
  body[data-pig-family-project="true"] .pig-process-step { grid-template-columns: 27px 1fr; grid-template-rows: 1fr auto; gap: 6px 8px; }
  body[data-pig-family-project="true"] .pig-process-step > span { grid-row: 1 / 3; padding-top: 8px; }
  body[data-pig-family-project="true"] .pig-process-step > div { min-height: 128px; }
  body[data-pig-family-project="true"] .pig-process-step figcaption { min-height: auto; font-size: 11px; }
  body[data-pig-family-project="true"] .pig-process-arrow { width: 1px; height: 100%; justify-self: center; }
  body[data-pig-family-project="true"] .pig-process-arrow::after { top: auto; right: 50%; bottom: 0; transform: translateX(50%) rotate(135deg); }

  body[data-pig-family-project="true"] .pig-faces { min-height: 730px; }
  body[data-pig-family-project="true"] .pig-face-symbol { top: 54%; width: 48%; height: 37%; }
  body[data-pig-family-project="true"] .pig-person { width: 28%; height: 25%; }
  body[data-pig-family-project="true"] .person-father { left: 4%; top: 38%; }
  body[data-pig-family-project="true"] .person-mother { right: 4%; top: 38%; }
  body[data-pig-family-project="true"] .person-girl { left: 13%; bottom: 3%; width: 24%; }
  body[data-pig-family-project="true"] .person-boy { right: 12%; bottom: 3%; width: 24%; }

  body[data-pig-family-project="true"] .pig-approved { display: flex; flex-direction: column; min-height: 780px; }
  body[data-pig-family-project="true"] .pig-approved-panel { flex: 1 1 50%; padding: 26px; }
  body[data-pig-family-project="true"] .symbol-panel img { width: 43%; height: 74%; }
  body[data-pig-family-project="true"] .word-panel img { width: 88%; height: 48%; }
  body[data-pig-family-project="true"] .word-panel strong { font-size: 23px; }

  body[data-pig-family-project="true"] .pig-system { min-height: 760px; }
  body[data-pig-family-project="true"] .pig-palette { top: 135px; left: 24px; right: auto; }
  body[data-pig-family-project="true"] .pig-palette i { width: 24px; }
  body[data-pig-family-project="true"] .pig-family-mark { top: 116px; right: 22px; width: 43%; max-height: 20%; }
  body[data-pig-family-project="true"] .pig-character-line {
    left: 16px;
    right: 16px;
    bottom: 18px;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    height: 510px;
  }
  body[data-pig-family-project="true"] .pig-character-line img { max-width: 72%; max-height: 88%; }

  body[data-pig-family-project="true"] .pig-touchpoints { min-height: 790px; }
  body[data-pig-family-project="true"] .pig-touchpoint-copy { top: 30px; left: 24px; right: 22px; max-width: none; }
  body[data-pig-family-project="true"] .pig-touchpoints figure { border-radius: 7px; }
  body[data-pig-family-project="true"] .touch-main { left: 18px; top: 184px; bottom: auto; width: 62%; height: 250px; }
  body[data-pig-family-project="true"] .touch-card { right: 17px; top: 202px; width: 37%; height: 190px; }
  body[data-pig-family-project="true"] .touch-store { left: 18px; bottom: 20px; width: 44%; height: 310px; }
  body[data-pig-family-project="true"] .touch-uniform { right: 18px; bottom: 20px; width: 47%; height: 332px; }

  body[data-pig-family-project="true"] .pig-motion-scene { min-height: 226px; aspect-ratio: 16 / 9 !important; }
  body[data-pig-family-project="true"] .pig-motion-copy { top: 18px; left: 18px; max-width: 58%; }
  body[data-pig-family-project="true"] .pig-motion-copy strong { font-size: 20px; }
  body[data-pig-family-project="true"] .pig-motion-copy p { display: none; }
  body[data-pig-family-project="true"] .pig-motion-video { object-fit: cover; }

  body[data-pig-family-project="true"] .pig-motion-application { display: flex; flex-direction: column; min-height: 720px; }
  body[data-pig-family-project="true"] .pig-motion-application-art { flex: 1 1 54%; min-height: 390px; }
  body[data-pig-family-project="true"] .pig-motion-application > .pig-motion-frame { flex: 0 0 330px; width: 100%; }
  body[data-pig-family-project="true"] .pig-motion-application .pig-motion-copy { max-width: 66%; }
  body[data-pig-family-project="true"] .pig-application-badge { width: 30%; }

  body[data-pig-family-project="true"] .pig-store { min-height: 830px; }
  body[data-pig-family-project="true"] .pig-store-copy { top: 28px; left: 24px; right: 24px; max-width: none; }
  body[data-pig-family-project="true"] .store-finished { left: 18px; top: 170px; bottom: auto; width: calc(100% - 36px); height: 280px; }
  body[data-pig-family-project="true"] .store-interior { left: 18px; right: auto; top: 460px; width: calc(50% - 22px); height: 345px; }
  body[data-pig-family-project="true"] .store-food { right: 18px; bottom: 25px; width: calc(50% - 22px); height: 345px; }

  body[data-pig-family-project="true"] .pig-closing { min-height: 610px; gap: 44px; padding: 30px 22px; }
  body[data-pig-family-project="true"] .pig-closing > img { width: 82%; max-height: 27%; }
  body[data-pig-family-project="true"] .pig-closing > strong { font-size: 37px; }
  body[data-pig-family-project="true"] .pig-closing > p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-pig-family-project="true"] .pig-motion-video { display: none !important; }
  body[data-pig-family-project="true"] .pig-motion-vignette,
  body[data-pig-family-project="true"] .pig-motion-copy { display: none !important; }
  body[data-pig-family-project="true"] .pig-motion-still { display: block !important; }
}

/* 모션은 1440×900 이다. 껍데기의 .page__card 는 16/9 라 object-fit:cover 가 위아래를 각 45줄
   (높이의 10%) 잘라냈다. **모션이 든 카드에만** 영상 비율을 돌려준다 — 다른 카드는 건드리지 않는다. */
body[data-pig-family-project="true"] .page__card:has(video) { aspect-ratio: 1440 / 900 !important; }  /* 카드에 style="aspect-ratio:16/9" 가 인라인으로 박혀 있어 !important 가 없으면 안 먹는다 */

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/food-share-r2.webp"] { aspect-ratio: 3/2; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/food-table.webp"] { aspect-ratio: 2200/1467; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/approved-symbol-final.png"] { aspect-ratio: 250/271; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/approved-logo-final.svg"] { aspect-ratio: 17/6; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/food-hero-16x9.webp"] { aspect-ratio: 16/9; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/process-candidate-2.webp"] { aspect-ratio: 491/180; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/process-candidate-3.webp"] { aspect-ratio: 131/34; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/approved-symbol-final.svg"] { aspect-ratio: 83/90; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/character-father-r2.png"] { aspect-ratio: 726/731; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/character-mother-r2.png"] { aspect-ratio: 726/1034; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/character-girl-r2.png"] { aspect-ratio: 690/681; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/character-boy-r2.png"] { aspect-ratio: 690/759; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/approved-wordmark-final.svg"] { aspect-ratio: 94/45; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/character-family-line-r2.png"] { aspect-ratio: 898/649; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/application-sign-r2a.webp"] { aspect-ratio: 1499/1000; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/application-cards-r2.webp"] { aspect-ratio: 312/215; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/application-storefront-r2a.webp"] { aspect-ratio: 1665/1147; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/application-uniform-r2a.webp"] { aspect-ratio: 1460/731; }
img[src$="https://kangdesign-portfolio.pages.dev/pig-family/assets/store-finished.webp"] { aspect-ratio: 127/92; }

/* 06 색상규정 지면 — 화면에 실은 인쇄값 열여섯의 근거 */
body[data-pig-family-project="true"] .pig-colour-plate {
  background: #f7f5f0;   /* 색 체계 장면과 같은 지면 */
}

body[data-pig-family-project="true"] .pig-colour-plate > figure {
  position: absolute;
  top: 25%;
  bottom: 5.5%;
  left: 6.2%;
  right: 6.2%;
  margin: 0;
  /* ⚠ flex + width:auto/height:auto 로 짜면 **로드 전 상자가 0 이 되고**
     `loading="lazy"` 가 영영 발동하지 않는다(실측 3×2px · currentSrc 빈 값).
     그림 칸을 격자로 먼저 확정한다. */
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(8px, 1.1cqw, 15px);
  justify-items: center;
}

/* ⚠ 셸의 `.case__study__media img{width:100%}` 와 특이도가 같다.
   본문 속성으로 감싸 케이스 쪽이 이기게 한다.
   장면이 고정 비율이라 자리는 이미 잡혀 있고, 지면은 그 안에 맞춰 넣는다. */
body[data-pig-family-project="true"] .pig-colour-plate > figure img {
  aspect-ratio: 1600 / 1131;   /* 로드 전에도 상자가 있어야 lazy 가 발동한다 */
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid rgba(60, 40, 30, .14);
}

body[data-pig-family-project="true"] .pig-colour-plate > figure figcaption {
  flex: 0 0 auto;
  font-size: clamp(11px, 1.05cqw, 13px);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  word-break: keep-all;
}