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

   설계 근거
   - 이 케이스는 '매뉴얼'에 관한 것이다. 그래서 페이지가 매뉴얼처럼 움직인다.
     번호가 붙은 규칙, 헤어라인 표, 그리고 금지 그리드.
   - 색은 승인 매뉴얼 04 색상규정의 지정색 8개만 쓴다. 지어낸 색이 없다.
   - 앞 네 케이스(검정·흙색 / 종이·무채색 / 네이비·의전 / )와 다른 톤이다.

   바탕색 — 실측값이다. 지어낸 값이 아니다.
   승인 자산 33건(사진 제외)의 가장자리 띠에서 최빈색을 8단위 양자화로 뽑았다.
     BSAS 기본시스템 8장 · 응용시스템(AS-01~08) 8장 · 금지 셀 8컷
     실제 응용물 벡터 5건(8인치/9인치 박스 칼선 · 리플렛 · 메뉴판 · 스티커)
     로고 개발 아트보드 4건
   전부 예외 없이 #FFFFFF. 가장자리 점유 57.9~98.3%, 지면 안쪽(중앙 40%)도 동일.
   이 브랜드에는 따뜻한 종이가 한 장도 없다. 매뉴얼도 박스 칼선도 순백 위에 그려졌다.
   그래서 이전 값 #F5F3F0(근거 없는 미색)을 실측 순백으로 되돌렸다.
   순백 위에서는 흰 도판이 묻히므로, 도판에 --rule(16%) 테두리와 이중 그림자를 줘
   지면 위에 놓인 인쇄물처럼 뜨게 했다.

   물성 — 밀가루 얇게 깔린 작업대 (2026-08-08 추가)
   - 브랜드 이름이 「수타」다. 손으로 쳐서 늘리는 자리가 밀가루 뿌린 작업대다.
     지면은 실측 순백 그대로 둔다 — 밀가루도 희다. 결과 알갱이, 뭉친 자리,
     비스듬한 빛으로만 재료가 읽히게 했다.
   - **스무 물성 중 「가루」를 가진 것은 이것뿐이다.** 무엇이 얹히면 가루가 한 번
     일었다 퍼지며 내려앉고, 마크 둘레에 조금 쓸려 모인다.
   - 착지 곡선 settle_dough(t) = 1 - (1-t)^6. 오버슛 0 — 가루 깔린 판에 놓이는 것은
     튀지 않고 눌러 앉는다. t=0.05 에서 0.2649.
   - 기존 모션 배경이 #F3F5F7 (차갑고 어두운 회청)이라 이 케이스가 스스로 정정한
     실측 순백과 어긋나 있었다. 그것도 함께 바로잡았다.
   - 모션 3 의 크기 단계에서 승인 문서로 확인되지 않는 px 수치는 쓰지 않았다.
   ========================================================================== */

/* 지면 바탕 — 승인 매뉴얼 04 색상규정의 ORANGE(Main) 실측값이다.
   예전에는 #FFFFFF 였다. 그것도 실측(응용 33건 전부 순백)이지만
   한돈자조금 #FCFCFC 와 ΔE 1.0 으로 사실상 같은 색이었다.
   「종이색을 공유하지 마라」는 지시에 따라 브랜드 주색으로 옮겼다.
   기존 바탕 34개 중 최근접은 동일아크릴 #F06D17 로 ΔE 14.2.
   (BLUE #293377 은 캐리소프트 #17417C 와 11.4 라 바탕으로 못 쓴다 — 히어로 면으로만 쓴다) */
body[data-suta-pizza-project='true'] { background: #f1511b; }

body[data-suta-pizza-project='true'] .case__study__slices {
  display: block; width: 100%; max-width: none; padding: 0; gap: 0;
}
body[data-suta-pizza-project='true'] .case__study__info { display: none; }

.suta-pizza-site-host { grid-column: 1 / -1; width: 100%; margin: 0; padding: 0; }

.suta-case {
  --orange: #f1511b;
  --blue: #293377;
  --orange2: #f68712;
  --yellow: #fab20b;
  --blue2: #1e5baa;
  --blue3: #0d88ce;
  --gray: #a7a5a6;
  --black: #231f20;
  --paper: #ffffff;   /* 승인 매뉴얼·박스 칼선·응용물 지면 실측 (33건 전부 순백) */
  --plate: #ffffff;   /* 도판면 — 지면과 같은 흰색. 분리는 테두리와 그림자가 한다 */
  --red: #e11b22;

  --blue-70: rgba(41, 51, 119, 0.70);
  --blue-42: rgba(41, 51, 119, 0.42);
  --ink-64: rgba(35, 31, 32, 0.64);
  --rule: rgba(41, 51, 119, 0.16);
  --rule-soft: rgba(41, 51, 119, 0.08);
  --paper-72: rgba(255, 255, 255, 0.72);
  --paper-42: rgba(255, 255, 255, 0.42);

  --gutter: clamp(20px, 5.4vw, 112px);
  --stack: clamp(58px, 8.2vw, 148px);

  --sans: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
          'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  font-family: var(--sans);
  display: block; width: 100%;
  background: var(--orange); color: var(--black);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  word-break: keep-all;
}

.suta-case *, .suta-case *::before, .suta-case *::after { box-sizing: border-box; }
.suta-case img, .suta-case video { display: block; max-width: 100%; }
.suta-case .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 장면 골격 ─────────────────────────────────────────────── */
.suta-case .scene {
  position: relative; padding: var(--stack) var(--gutter);
  background: var(--paper); border-top: 1px solid var(--rule-soft); overflow: hidden;
}
.suta-case .scene:first-child { border-top: 0; }
.suta-case .scene.on-blue {
  background: var(--blue); color: var(--paper); border-top-color: transparent;
}
.suta-case .scene.on-orange {
  background: var(--orange); color: #fff; border-top-color: transparent;
}
.suta-case .scene-shell { width: 100%; max-width: 1520px; margin: 0 auto; }

.suta-case .scene-index {
  position: absolute; top: clamp(20px, 3vw, 46px); left: var(--gutter);
  font-family: var(--mono); font-size: clamp(11px, 0.86vw, 13px);
  letter-spacing: 0.2em; color: var(--blue-42); font-variant-numeric: tabular-nums;
}
.suta-case .on-blue .scene-index, .suta-case .on-orange .scene-index { color: var(--paper-42); }

/* ── 타이포 ────────────────────────────────────────────────── */
.suta-case h2 {
  font-size: clamp(26px, 3.3vw, 58px); line-height: 1.26;
  letter-spacing: -0.024em; font-weight: 700; margin: 0; color: var(--blue);
}
.suta-case .on-blue h2, .suta-case .on-orange h2 { color: #fff; }
.suta-case h3 { font-size: clamp(16px, 1.4vw, 24px); line-height: 1.38; font-weight: 600; margin: 0; }
.suta-case p { margin: 0; }
.suta-case .lead {
  font-size: clamp(14px, 1.14vw, 19px); line-height: 1.82;
  color: var(--ink-64); max-width: 60ch;
}
.suta-case .on-blue .lead, .suta-case .on-orange .lead { color: var(--paper-72); }
.suta-case .eyebrow {
  display: block; font-family: var(--mono);
  font-size: clamp(10px, 0.84vw, 13px); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--orange); padding-bottom: clamp(12px, 1.4vw, 22px);
  margin-bottom: clamp(18px, 2.2vw, 34px); border-bottom: 1px solid var(--rule);
}
.suta-case .on-blue .eyebrow, .suta-case .on-orange .eyebrow {
  color: var(--paper); border-bottom-color: rgba(255, 255, 255, 0.24);
}
.suta-case .section-head { max-width: 76ch; }
.suta-case .section-head .lead { margin-top: clamp(16px, 1.9vw, 30px); }

/* ── 01 히어로 ─────────────────────────────────────────────── */
.suta-case .scene-hero {
  /* 히어로는 흰 지면을 유지한다. 승인 로고는 화소 중앙값이 (22,43,116) 인 **파랑 마크**라
     파랑·오렌지 위에서는 대비가 무너진다(합성 표준편차 24.3 / 27.6 대 흰 바탕 78.5).
     지면 바탕 오렌지는 페이지 바깥면과 on-orange 구획에서 드러난다. */
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: clamp(26px, 3.4vw, 54px); padding-block: clamp(92px, 12vw, 176px);
}
.suta-case .hero-mark { width: min(62vw, 500px); height: auto; }
.suta-case .hero-thesis {
  font-size: clamp(19px, 2.3vw, 40px); line-height: 1.44;
  letter-spacing: -0.024em; font-weight: 700; max-width: 22ch; color: var(--blue);
}
.suta-case .hero-thesis em {
  font-style: normal; box-shadow: inset 0 -0.4em 0 rgba(250, 178, 11, 0.5);
}
.suta-case .hero-sub {
  font-size: clamp(13px, 1.06vw, 18px); line-height: 1.7; color: var(--ink-64); max-width: 34ch;
}
.suta-case .hero-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(8px, 1vw, 16px); margin-top: clamp(4px, 0.8vw, 12px);
}
.suta-case .hero-meta span {
  font-size: clamp(11px, 0.82vw, 13px); letter-spacing: 0.1em;
  padding: 0.6em 1.1em; border: 1px solid var(--rule); color: var(--ink-64);
}
.suta-case .spec-strip { display: flex; width: min(72vw, 560px); height: 10px; }
.suta-case .spec-strip i { flex: 1; }

/* ── 규칙 카드 (매뉴얼 형식) ───────────────────────────────── */
.suta-case .rules {
  margin-top: clamp(32px, 4vw, 70px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0; border-top: 1px solid var(--rule);
}
.suta-case .rules div {
  padding: clamp(16px, 2vw, 30px) clamp(14px, 1.6vw, 24px);
  border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
.suta-case .rules div:last-child { border-right: 0; }
.suta-case .rules code {
  display: block; font-family: var(--mono); font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.16em; color: var(--orange); margin-bottom: 0.7em;
}
.suta-case .rules b { display: block; font-size: clamp(14px, 1.16vw, 20px); font-weight: 600; color: var(--blue); }
.suta-case .rules span {
  display: block; margin-top: 0.5em; font-size: clamp(11px, 0.86vw, 13px);
  line-height: 1.62; color: var(--ink-64);
}

/* ── 금지 그리드 — 이 케이스의 심장 ────────────────────────── */
.suta-case .donts {
  margin-top: clamp(32px, 4.2vw, 74px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(12px, 1.5vw, 26px);
}
.suta-case .donts figure { margin: 0; }
.suta-case .donts .frame {
  background: var(--plate); border: 1px solid var(--rule); overflow: hidden;
  box-shadow: 0 1px 2px rgba(41, 51, 119, .06), 0 8px 20px rgba(41, 51, 119, .05);
  aspect-ratio: 700 / 460; display: flex; align-items: center; justify-content: center;
}
.suta-case .donts img { width: 100%; height: 100%; object-fit: contain; }
.suta-case .donts figcaption {
  margin-top: 0.7em; display: flex; gap: 0.7em; align-items: baseline;
  font-size: clamp(10px, 0.88vw, 14px); color: var(--ink-64); line-height: 1.5;
}
.suta-case .donts figcaption b {
  font-family: var(--mono); color: var(--red); font-weight: 500; flex: none;
}

/* ── 개발 경로 ─────────────────────────────────────────────── */
.suta-case .devline {
  margin-top: clamp(32px, 4.2vw, 74px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 1.5vw, 24px);
}
.suta-case .devline figure { margin: 0; }
.suta-case .devline .frame {
  background: var(--plate); border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(41, 51, 119, .06), 0 8px 20px rgba(41, 51, 119, .05);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 1.2vw, 20px); overflow: hidden;
}
.suta-case .devline img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.suta-case .devline figcaption {
  margin-top: 0.7em; font-size: clamp(10px, 0.88vw, 14px); color: var(--ink-64);
}
.suta-case .devline figcaption b { color: var(--orange); font-family: var(--mono); }
.suta-case .devline figure:last-child figcaption b { color: var(--blue); }

/* ── 색 ────────────────────────────────────────────────────── */
.suta-case .swatches {
  margin-top: clamp(30px, 3.8vw, 66px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
}
.suta-case .swatch i { display: block; height: clamp(74px, 7.6vw, 126px); }
.suta-case .swatch b { display: block; margin-top: 0.8em; font-size: clamp(12px, 1vw, 16px); font-weight: 600; color: var(--blue); }
.suta-case .swatch code {
  display: block; margin-top: 0.3em; font-family: var(--mono);
  font-size: clamp(9px, 0.78vw, 12px); letter-spacing: 0.04em; color: var(--ink-64);
}
.suta-case .swatch em {
  display: block; margin-top: 0.3em; font-style: normal;
  font-family: var(--mono); font-size: clamp(9px, 0.74vw, 11px); color: var(--ink-64);
}

/* ── 도판 ──────────────────────────────────────────────────── */
.suta-case .plates {
  margin-top: clamp(32px, 4.2vw, 74px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(14px, 1.8vw, 30px);
}
.suta-case .plates.wide { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.suta-case .plates figure { margin: 0; }
.suta-case .plates .frame {
  background: var(--plate); border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(41, 51, 119, .06), 0 10px 26px rgba(41, 51, 119, .055);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 1.3vw, 22px); overflow: hidden;
}
.suta-case .plates .frame.tall { aspect-ratio: 3 / 4; }
.suta-case .plates .frame.sheet { aspect-ratio: 16 / 11; padding: 0; }
.suta-case .plates .frame.cover { padding: 0; }
.suta-case .plates .frame.cover img { width: 100%; height: 100%; object-fit: cover; }
.suta-case .plates .frame.sheet img { width: 100%; height: 100%; object-fit: contain; }
.suta-case .plates img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.suta-case .plates figcaption {
  margin-top: 0.75em; font-size: clamp(11px, 0.88vw, 14px); color: var(--ink-64); line-height: 1.55;
}
.suta-case .plates figcaption .tag {
  display: inline-block; margin-right: 0.5em; padding: 0.12em 0.5em;
  border: 1px solid var(--rule); font-family: var(--mono);
  font-size: 0.86em; color: var(--blue-42);
}
.suta-case .on-blue .plates .frame {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); box-shadow: none;
}
.suta-case .on-blue .plates figcaption { color: var(--paper-42); }

/* ── 모션 ──────────────────────────────────────────────────── */
.suta-case .motion-stage { margin-top: clamp(28px, 3.6vw, 62px); }
.suta-case .motion-stage video {
  width: 100%; height: auto; background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(41, 51, 119, .06), 0 12px 30px rgba(41, 51, 119, .06);
}
.suta-case .motion-note {
  margin-top: clamp(13px, 1.6vw, 24px); padding-top: clamp(13px, 1.6vw, 24px);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(10px, 1.4vw, 26px);
}
.suta-case .motion-note strong {
  font-size: clamp(14px, 1.24vw, 21px); font-weight: 700; color: var(--blue);
}
.suta-case .motion-note span { font-size: clamp(11px, 0.94vw, 15px); color: var(--ink-64); }
.suta-case .on-blue .motion-stage video {
  border-color: rgba(255,255,255,0.22); box-shadow: none;
}
.suta-case .on-blue .motion-note { border-top-color: rgba(255,255,255,0.24); }
.suta-case .on-blue .motion-note strong { color: #fff; }
.suta-case .on-blue .motion-note span { color: var(--paper-42); }

/* ── 12 클로징 ─────────────────────────────────────────────── */
.suta-case .scene-closing {
  min-height: 90svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: clamp(24px, 3.2vw, 50px);
}
.suta-case .closing-line {
  font-size: clamp(18px, 2.1vw, 38px); line-height: 1.42;
  letter-spacing: -0.024em; font-weight: 700; max-width: 24ch; color: var(--blue);
}
.suta-case .case-footer {
  margin-top: clamp(28px, 3.6vw, 60px); padding-top: clamp(16px, 2vw, 30px);
  border-top: 1px solid var(--rule); width: min(100%, 880px);
  font-size: clamp(11px, 0.86vw, 13px); line-height: 1.74; color: var(--ink-64);
}

/* ── 진입 애니메이션 ───────────────────────────────────────── */
.suta-case [data-reveal] {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.86s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.86s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.suta-case [data-reveal].is-in { opacity: 1; transform: none; }
.suta-case [data-reveal][data-delay='1'] { transition-delay: 0.07s; }
.suta-case [data-reveal][data-delay='2'] { transition-delay: 0.14s; }
.suta-case [data-reveal][data-delay='3'] { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .suta-case [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .suta-case .plates.wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .suta-case .scene { padding: clamp(52px, 15vw, 84px) 20px; }
  .suta-case .scene-index { left: 20px; }
  .suta-case .plates, .suta-case .devline { grid-template-columns: minmax(0, 1fr); }
  .suta-case .donts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suta-case .rules, .suta-case .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suta-case .rules div:nth-child(2n) { border-right: 0; }
  .suta-case .hero-mark { width: 78vw; }
}

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/suta-pizza-case-assets/dont-2-r2.jpg"],
img[src$="/suta-pizza-case-assets/dont-3-r2.jpg"],
img[src$="/suta-pizza-case-assets/dont-4-r2.jpg"],
img[src$="/suta-pizza-case-assets/dont-6-r2.jpg"],
img[src$="/suta-pizza-case-assets/dont-7-r2.jpg"] { aspect-ratio: 230/151; }
img[src$="/suta-pizza-case-assets/dont-1-r2.jpg"],
img[src$="/suta-pizza-case-assets/dont-5-r2.jpg"] { aspect-ratio: 115/76; }
img[src$="/suta-pizza-case-assets/photo-1-r2.jpg"],
img[src$="/suta-pizza-case-assets/photo-3-r2.jpg"] { aspect-ratio: 89/59; }
img[src$="/leaderin-case-assets-v2/symbol-final.svg"] { aspect-ratio: 37/24; }
img[src$="/suta-pizza-case-assets/mark-logo.png"] { aspect-ratio: 400/129; }
img[src$="/suta-pizza-case-assets/bsas-concept.jpg"] { aspect-ratio: 1527/773; }
img[src$="/suta-pizza-case-assets/bsas-basic.jpg"] { aspect-ratio: 1528/899; }
img[src$="/suta-pizza-case-assets/dev-1-siann-r2.jpg"] { aspect-ratio: 442/343; }
img[src$="/suta-pizza-case-assets/dev-2-logo-r2.jpg"] { aspect-ratio: 312/343; }
img[src$="/suta-pizza-case-assets/dev-3-rev1-r2.jpg"] { aspect-ratio: 162/97; }
img[src$="/suta-pizza-case-assets/dev-4-rev2-r2.jpg"] { aspect-ratio: 27/14; }
img[src$="/suta-pizza-case-assets/dev-5-new-r2.jpg"] { aspect-ratio: 486/221; }
img[src$="/suta-pizza-case-assets/bsas-grid.jpg"] { aspect-ratio: 1528/1041; }
img[src$="/suta-pizza-case-assets/bsas-type.jpg"] { aspect-ratio: 1526/853; }
img[src$="/suta-pizza-case-assets/bsas-color.jpg"] { aspect-ratio: 382/255; }
img[src$="/suta-pizza-case-assets/bsas-coloruse-b.jpg"] { aspect-ratio: 1549/810; }
img[src$="/suta-pizza-case-assets/dont-8-r2.jpg"] { aspect-ratio: 20/13; }
img[src$="/suta-pizza-case-assets/as-05.jpg"] { aspect-ratio: 1527/925; }
img[src$="/suta-pizza-case-assets/as-08.jpg"] { aspect-ratio: 1593/995; }
img[src$="/suta-pizza-case-assets/app-menu-r2.jpg"] { aspect-ratio: 156/55; }
img[src$="/suta-pizza-case-assets/app-box-8-r2.jpg"] { aspect-ratio: 468/457; }
img[src$="/suta-pizza-case-assets/app-box-9-r2.jpg"] { aspect-ratio: 167/327; }
img[src$="/suta-pizza-case-assets/app-leaflet-r2.jpg"] { aspect-ratio: 468/187; }
img[src$="/suta-pizza-case-assets/app-banner-1-r2.jpg"] { aspect-ratio: 37/109; }
img[src$="/suta-pizza-case-assets/app-sticker-r2.jpg"] { aspect-ratio: 238/653; }
img[src$="/suta-pizza-case-assets/mockup-sign-1.jpg"] { aspect-ratio: 800/637; }
img[src$="/suta-pizza-case-assets/mockup-store-1.jpg"] { aspect-ratio: 50/69; }