/* ==========================================================================
   MOCAT — 브랜드 아이덴티티 케이스
   강디자인

   실측 정정 (2026-08-08)
   - 지면색이 #F6F1EA 로 선언돼 있었으나 근거가 없었다. 승인 원본 지면(SVG)을 재 보면
     흰색이 187회로 지배적이고 렌더 가장자리 최빈값이 #FFFFFF 100% 다. 자산 일곱 장도
     모두 흰색으로 측정된다. 실측 순백으로 되돌렸다.
     순백 위에서 흰 도판이 묻히므로 route 도판에 헤어라인과 그림자를 줬다.
   - 잉크가 #252123 로 선언돼 있었으나 원본 지면 값은 #231F20 이다. 실측값으로 고쳤다.
   - 브랜드색 실측: WINE #BA006E · RED #E31837 · ORANGE #F58025 · GREY #808285

   물성 — 정전식 터치면 (2026-08-08 추가)
   - 태그라인이 「touching the digital life」이고 마크 자체가 닿는 자리의 형상이다.
     닿은 자리에서 파면이 퍼지고, 마크는 이동하지 않고 그 파면을 따라 드러난다.
   - 착지 곡선 settle_ripple(t) = t. **스물두 물성 중 유일하게 선형이다** —
     파면은 일정한 속도로 퍼진다. 가속도 0, 감속 0. 나머지 스물하나는 전부 곡선이다.
   - 모션을 1440×900 / 30fps / 300프레임 / 정확히 10.000초 규격으로 다시 만들었다.
     이전 파일은 1280×720 / 195프레임 / 6.5초로 규격을 어기고 있었다.
   ========================================================================== */

:root {
  --mocat-wine: #ba006e;
  --mocat-red: #e31837;
  --mocat-orange: #f58025;
  --mocat-ink: #231f20;      /* 원본 지면 SVG 실측값 */
  --mocat-paper: #ffffff;   /* 승인 원본 지면 실측 — 가장자리 최빈 100% */
}

body[data-mocat-project='true'] .mocat-video,
body[data-mocat-project='true'] .mocat-media > img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

body[data-mocat-project='true'] .mocat-media > img {
  opacity: 0;
  transition: opacity .5s ease;
}

body[data-mocat-project='true'] .mocat-media > img.loaded { opacity: 1; }

body[data-mocat-project='true'] .mocat-scene {
  background: var(--mocat-paper);
  color: var(--mocat-ink);
  overflow: hidden;
  position: relative;
}

body[data-mocat-project='true'] .mocat-scene img { display: block; }

.mocat-scene-head {
  display: flex;
  justify-content: space-between;
  left: clamp(22px, 4.1vw, 70px);
  position: absolute;
  right: clamp(22px, 4.1vw, 70px);
  top: clamp(20px, 3.7vw, 62px);
  z-index: 6;
}

.mocat-scene-head span,
.mocat-route-grid article > span,
.mocat-color-panel span,
.mocat-final > span {
  font-size: clamp(11px, .75vw, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mocat-scene-head strong {
  font-size: clamp(18px, 2vw, 36px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-align: right;
}

/* 01 - an actual first sketch, isolated from the source PSD */
.mocat-sketch {
  background: var(--mocat-ink) !important;
  color: #fff !important;
}

.mocat-sketch::before {
  background: radial-gradient(circle at 50% 58%, rgba(186,0,110,.28), transparent 42%);
  content: '';
  inset: 0;
  position: absolute;
}

.mocat-sketch-paper {
  background: #fff;
  box-shadow: 0 28px 60px rgba(0,0,0,.35);
  left: 50%;
  padding: clamp(8px, 1.4vw, 22px);
  position: absolute;
  top: 58%;
  transform: translate(-50%, -50%) rotate(-4deg);
  width: clamp(220px, 34vw, 570px);
}

.mocat-sketch-paper img { height: auto; width: 100%; }
.mocat-sketch > p,
.mocat-touch > p {
  bottom: 6%;
  font-size: clamp(8px, .7vw, 12px);
  left: 0;
  letter-spacing: .16em;
  position: absolute;
  right: 0;
  text-align: center;
}

/* 02 - four real design directions */
.mocat-routes { padding: clamp(20px, 3.7vw, 64px); }
.mocat-routes .mocat-scene-head { left: 0; position: relative; right: 0; top: 0; }
.mocat-route-grid {
  display: grid;
  gap: clamp(10px, 1.6vw, 24px);
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(28px, 5vw, 80px);
}

.mocat-route-grid article {
  border-top: 1px solid rgba(37,33,35,.24);
  display: grid;
  grid-template-columns: auto 1fr;
  padding-top: clamp(10px, 1.2vw, 18px);
}

.mocat-route-grid img {
  background: #fff;
  border: 1px solid rgba(35,31,32,.14);
  box-shadow: 0 6px 18px rgba(35,31,32,.07);
  grid-column: 1 / -1;
  height: clamp(92px, 10.2vw, 176px);
  margin-bottom: clamp(9px, 1vw, 15px);
  object-fit: contain;
  width: 100%;
}

.mocat-route-grid article > span { color: var(--mocat-wine); padding-top: .32em; }
.mocat-route-grid h3 {
  font-size: clamp(18px, 1.9vw, 32px);
  font-weight: 400;
  justify-self: end;
  letter-spacing: -.04em;
  margin: 0;
}

/* 03 - touch activates the four-way O */
.mocat-touch {
  background: var(--mocat-wine) !important;
  color: #fff !important;
}

.mocat-touch-stage {
  height: clamp(190px, 30vw, 470px);
  left: 50%;
  position: absolute;
  top: 58%;
  transform: translate(-50%, -50%);
  width: clamp(190px, 30vw, 470px);
}

.mocat-touch-stage > img {
  filter: brightness(0) invert(1);
  height: 39%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  z-index: 3;
}

.mocat-touch-stage .ring {
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 50%;
  inset: 22%;
  position: absolute;
  animation: mocatRipple 3.8s ease-out infinite;
}

.mocat-touch-stage .ring-2 { animation-delay: .65s; }
.mocat-touch-stage .ring-3 { animation-delay: 1.3s; }
.mocat-touch-stage .axis { background: rgba(255,255,255,.36); left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.mocat-touch-stage .axis-x { height: 1px; width: 62%; }
.mocat-touch-stage .axis-y { height: 62%; width: 1px; }
.mocat-touch-stage .node { background: var(--mocat-orange); border: 2px solid #fff; border-radius: 50%; height: 12px; position: absolute; width: 12px; z-index: 2; }
.mocat-touch-stage .node-n { left: calc(50% - 6px); top: 18%; }
.mocat-touch-stage .node-e { right: 18%; top: calc(50% - 6px); }
.mocat-touch-stage .node-s { bottom: 18%; left: calc(50% - 6px); }
.mocat-touch-stage .node-w { left: 18%; top: calc(50% - 6px); }

/* 04 - color has an explicit role */
.mocat-color { display: grid; grid-template-columns: repeat(3, 1fr); }
.mocat-color-panel {
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.4vw, 40px);
  position: relative;
  z-index: 2;
}

.mocat-color-panel.wine { background: var(--mocat-wine); }
.mocat-color-panel.red { background: var(--mocat-red); }
.mocat-color-panel.orange { background: var(--mocat-orange); }
.mocat-color-panel strong { font-size: clamp(20px, 2.5vw, 42px); font-weight: 400; letter-spacing: -.04em; line-height: 1; margin-top: auto; }
.mocat-color-panel em { font-size: 10px; font-style: normal; letter-spacing: .12em; margin-top: 14px; }
.mocat-color-panel span,
.mocat-color-panel strong,
.mocat-color-panel em { position: relative; z-index: 5; }
.mocat-color > img {
  filter: brightness(0) invert(1);
  height: 34%;
  left: 50%;
  opacity: .22;
  position: absolute;
  top: 45%;
  transform: translate(-50%, -50%);
  width: auto;
  z-index: 1;
}

/* 05 - product application from the supplied PSD, logo overlaid exactly */
.mocat-product { background: #335f9d !important; }
.mocat-product-photo { height: 100%; object-fit: cover; width: 100%; }
.mocat-product-shade { background: linear-gradient(180deg, rgba(37,33,35,.12), rgba(37,33,35,.44)); inset: 0; position: absolute; }
.mocat-product-logo { filter: brightness(0) invert(1); max-width: 53%; position: absolute; right: 7%; top: 9%; width: 280px; }
/* ⚠ `height` 를 안 주면 셸이 상자를 장면 높이(486px)로 늘려
   원본 1184×373(3.17:1) 인 승인 시그니처가 271×486 으로 **세로 5.7배 늘어나고 44px 잘렸다.**
   `height: auto` 하나로 271×85 로 돌아온다. 승인 마크의 비례는 바꾸지 않는다. */
.mocat-product > p { bottom: 7%; color: #fff; font-size: clamp(8px, .72vw, 12px); left: 7%; letter-spacing: .14em; position: absolute; }

.mocat-signature-system { background: #fff !important; padding: clamp(18px, 3vw, 48px); }
.mocat-signature-system .mocat-scene-head { left: clamp(18px, 3vw, 48px); right: clamp(18px, 3vw, 48px); top: clamp(18px, 3vw, 48px); }
.mocat-signature-primary { left: 11%; position: absolute; right: 11%; top: 39%; }
.mocat-signature-primary img { margin: 0 auto; max-height: clamp(70px, 11vw, 175px); max-width: 80%; width: auto; }
.mocat-signature-scale { align-items: center; bottom: 12%; display: flex; gap: 11%; left: 11%; position: absolute; right: 11%; }
.mocat-signature-scale img:nth-child(1) { width: 24%; }
.mocat-signature-scale img:nth-child(2) { width: 9%; }
.mocat-signature-scale img:nth-child(3) { width: 4.5%; }
.mocat-signature-system > p { bottom: 4.5%; font-size: 9px; left: 11%; letter-spacing: .12em; position: absolute; }

.mocat-final { align-items: center; background: var(--mocat-paper) !important; display: flex; flex-direction: column; justify-content: center; }
.mocat-final > span { margin-bottom: 8%; }
.mocat-final img { max-height: 24%; max-width: 62%; width: auto; }
.mocat-final p { bottom: 8%; font-size: clamp(9px, .8vw, 13px); letter-spacing: .16em; position: absolute; }

body[data-mocat-project='true'] .case__study__info__left {
  display: grid;
  gap: var(--pd2);
  grid-column: 1 / 2;
  grid-template-columns: 1fr 1fr;
}

body[data-mocat-project='true'] .case__study__info__project__information { grid-column: 1 / -1; }
body[data-mocat-project='true'] .case__study__info__right { display: flex; flex-flow: column; grid-column: 2 / -1; row-gap: var(--pd2); }
body[data-mocat-project='true'] .case__study__info h2 { color: var(--color-gray50); margin-bottom: 8px; }
body[data-mocat-project='true'] .case__study__info h2:not(:first-child) { margin-top: 32px; }
body[data-mocat-project='true'] .case__study__info p:not(:last-child) { margin-bottom: 12px; }

@keyframes mocatRipple {
  0% { opacity: 0; transform: scale(.45); }
  18% { opacity: 1; }
  75%, 100% { opacity: 0; transform: scale(1.45); }
}

@media (max-width: 1024px) {
  body[data-mocat-project='true'] .case__study__info__left,
  body[data-mocat-project='true'] .case__study__info__right { grid-column: 1 / -1; }
}

@media (max-width: 656px) {
  body[data-mocat-project='true'] .mocat-routes {
    aspect-ratio: auto !important;
    min-height: 660px;
  }

  body[data-mocat-project='true'] .mocat-sketch,
  body[data-mocat-project='true'] .mocat-touch,
  body[data-mocat-project='true'] .mocat-final {
    aspect-ratio: auto !important;
    min-height: 390px;
  }

  .mocat-scene-head strong { max-width: 60%; }
  .mocat-routes .mocat-scene-head { display: block; }
  .mocat-routes .mocat-scene-head strong { display: block; font-size: 25px; margin-top: 18px; max-width: none; text-align: left; }
  .mocat-route-grid { gap: 10px; margin-top: 28px; }
  .mocat-route-grid img { height: 105px; }
  .mocat-route-grid h3 { font-size: 15px; }
  .mocat-touch-stage { top: 61%; }
  .mocat-color-panel { padding: 14px; }
  .mocat-color-panel span { font-size: 7px; }
  .mocat-color-panel strong { font-size: 18px; }
  .mocat-color-panel em { font-size: 7px; }
  .mocat-product-logo { max-width: 62%; right: 6%; }
  .mocat-signature-system .mocat-scene-head strong { font-size: 13px; }
  body[data-mocat-project='true'] .case__study__info__left { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mocat-touch-stage .ring { animation: none; opacity: .32; transform: scale(1); }
}

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

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/mocat-case-assets/route-01-r2.png"],
img[src$="/mocat-case-assets/route-03-r2.png"],
img[src$="/mocat-case-assets/route-04-r2.png"] { aspect-ratio: 1486/547; }
img[src$="/mocat-case-assets/mocat-signature-color.svg"],
img[src$="/mocat-case-assets/mocat-signature-wine.svg"] { aspect-ratio: 1184/373; }
img[src$="/mocat-case-assets/mocat-touch-symbol.svg"] { aspect-ratio: 27/37; }
img[src$="/mocat-case-assets/mocat-sketch.jpg"] { aspect-ratio: 20/13; }
img[src$="/mocat-case-assets/route-02-r2.png"] { aspect-ratio: 1486/352; }
img[src$="/mocat-case-assets/mocat-product.jpg"] { aspect-ratio: 70/59; }
img[src$="/mocat-case-assets/mocat-wordmark-wine.svg"] { aspect-ratio: 1184/293; }

/* 07 색상규정 지면 — 화면에 실은 별색 셋·인쇄값의 근거.
   ⚠ `.mocat-scene img` 에 폭·높이가 없다 → 로드 전 상자가 0 이 되고 lazy 가 안 터진다.
   ⚠ 「%」로 자리를 잡으면 좁은 폭에서 넘친다(bhi 판례) → 장면을 격자로. */
body[data-mocat-project='true'] .mocat-colour-plate {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 1.4cqw, 20px);
  padding: clamp(20px, 3.2vw, 52px);
}

body[data-mocat-project='true'] .mocat-colour-plate > .mocat-scene-head {
  position: static;
  max-width: none;
}

body[data-mocat-project='true'] .mocat-colour-plate > figure {
  position: static;
  margin: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(6px, 1cqw, 14px);
  justify-items: center;
}

body[data-mocat-project='true'] .mocat-colour-plate > figure img {
  aspect-ratio: 1600 / 1131;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid rgba(60, 20, 40, .14);
}

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

/* ⭐ 셸이 `split` 장면의 **모든 그림**에 높이를 박는다 —
   `.case__study__list .case__study__gallery__item.split .case__study__media img { height: 100% }` (특이도 0,4,1).
   전면 사진에는 맞지만 **위에 얹은 승인 마크까지 늘려 버린다.**
   원본 1184×373(3.17:1) 인 시그니처가 271×486 으로 **세로 5.7배 늘어나고 44px 잘렸다.**
   셸보다 높은 특이도로 되돌린다. 승인 마크의 비례는 바꾸지 않는다. */
.case__study__list .case__study__gallery__item.split .case__study__media img.mocat-product-logo {
  height: auto;
}