/* Mockup showcase — Figma: 디자인 스터디 / 목업팀 (60:889), 1920 × 8786
   좌표는 전부 Figma 원본값. 캔버스 스케일은 styles.css + assets/fit.js 가 담당. */

.mockup {
  height: 8786px;
  background: #e7e7e7;
}

.mockup p {
  margin: 0;
}

.mk-abs {
  position: absolute;
}

/* 169px 격자 — 가로선 (세로선은 grid-v.svg) */
.mk-rule-h {
  position: absolute;
  left: -204px;
  width: 2464px;
  height: 1px;
  background: #000;
  opacity: 0.1;
}

/* ── 다크 인트로 (60:1363) — y 0, h 384 ─────────────────── */
.mk-intro {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 384px;
  background: #262626;
  overflow: hidden;
}

/* Figma 원본은 mix-blend-luminosity · opacity 7% 레이어.
   스크롤 합성 부담을 없애려고 #262626 위에 미리 구운 이미지를 쓴다. */
.mk-intro__graphic {
  position: absolute;
  left: 88px;
  top: -430px;
  width: 1792px;
  height: 1824px;
  object-fit: cover;
}

.mk-intro__wordmark {
  position: absolute;
  left: 959.52px;
  transform: translateX(-50%);
  top: 63.22px;
  width: 228.403px;
  height: 83.159px;
}

.mk-intro__kr {
  position: absolute;
  left: 960.5px;
  transform: translateX(-50%);
  top: 180px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: -0.96px;
  color: #fff;
  opacity: 0.8;
  text-align: center;
  white-space: pre;
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
}

.mk-intro__en {
  position: absolute;
  left: 960.5px;
  transform: translateX(-50%);
  top: 272px;
  font-family: var(--font-outfit);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.51px;
  color: #fff;
  opacity: 0.4;
  text-align: center;
  white-space: pre;
}

/* ── 목업 프레임 (클리핑 있는 것들) ─────────────────────── */
.mk-frame {
  position: absolute;
  overflow: hidden;
}

.mk-frame img {
  position: absolute;
  display: block;
}

/* ── RESPONSE POINT 포스터 (60:1034) ────────────────────── */
.mk-poster-rp {
  position: absolute;
  left: 0;
  top: 1993px;
  width: 959.999px;
  height: 1442.345px;
}

.mk-poster-rp > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mk-poster-rp p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-pretendard);
  font-weight: 600;
  font-size: 29.38px;
  line-height: 1.35;
  letter-spacing: -0.5876px;
  color: #000;
  text-align: center;
}

/* ── From Limits to Possibilities 밴드 (60:1337) ─────────── */
.mk-band {
  position: absolute;
  left: 0;
  top: 8162px;
  width: 1920px;
  height: 192.13px;
  background: #000;
  overflow: hidden;
}

.mk-band__word {
  position: absolute;
  transform: translateX(-50%);
  top: 53.64px;
  font-family: var(--font-outfit);
  font-weight: 700;
  font-size: 84.724px;
  line-height: 1;
  letter-spacing: -7.6252px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.mk-band__dot {
  position: absolute;
  width: 10.325px;
  height: 10.325px;
}

.mk-band__rule-v {
  position: absolute;
  top: -11.06px;
  width: 0.492px;
  height: 276.979px;
  background: #fff;
  opacity: 0.3;
}

.mk-band__rule-h {
  position: absolute;
  left: -93.3px;
  top: 138.48px;
  width: 2086.448px;
  height: 0.492px;
  background: #fff;
  opacity: 0.3;
}

.mk-band__date {
  position: absolute;
  left: 1194.07px;
  top: 116.7px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
  font-size: 10.403px;
  line-height: 1.3;
  letter-spacing: -0.4161px;
  color: #fff;
  white-space: nowrap;
}

/* ── 크레딧 (60:1020) — y 8344, h 442 ───────────────────── */
.mk-credit {
  position: absolute;
  left: 0;
  top: 8344px;
  width: 1920px;
  height: 442px;
  background: #262626;
  font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: #fff;
}

.mk-credit p {
  position: absolute;
  margin: 0; /* 리셋 없으면 브라우저 기본 margin 1em 이 top 을 20px 밀어낸다 */
  line-height: 1.3;
  white-space: nowrap;
}

.mk-credit b {
  font-weight: 700;
}

.mk-credit__names {
  position: absolute;
  white-space: nowrap;
}

.mk-credit__names span {
  display: block;
  line-height: 1.1;
  margin-bottom: 6.21px;
}

.mk-credit__names span:last-child {
  margin-bottom: 0;
}

/* 좌측 브랜드 블록 (65:3206) — RESPONSE / POINT + 연도 */
.mk-credit__brand {
  position: absolute;
  left: 137px;
  top: 96px;
  width: 109px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mk-credit__brand-name {
  font-weight: 700;
}

.mk-credit__brand-name span {
  display: block;
  line-height: 1.3;
}

.mk-credit__brand-name span:first-child {
  margin-bottom: 6.21px;
}

.mk-credit__brand p {
  position: static;
  line-height: 1.3;
}

.mk-credit__logo {
  position: absolute;
  left: 1775px;
  top: 255px;
  width: 37.205px;
  height: 39.801px;
}