/* ==========================================================================
   서울국제포럼 Seoul Forum for International Affairs — 브랜드 아이덴티티 케이스
   강디자인 · 2022–2024

   설계 근거
   - 이 케이스는 '의전'에 관한 것이다. 그래서 페이지 자체가 격자와 자리로 움직인다.
   - 현수막 실규격 2500×450 (5.556:1) 을 페이지의 반복 모듈로 쓴다.
   - 색은 승인 로고 2색과 현수막 9건에서 실측한 배경색만 쓴다. 지어낸 색이 없다.
   - 민주농원(검정·흙색·계절), 세라클린(종이·무채색·대조)과 의도적으로 다른 톤이다.

   바탕과 도판 — 실측
   - 바탕 #F1F2ED : `book-tokyo2022.jpg` 가장자리 띠 최빈색(8단위 양자화) 97.1%,
     양자화 색 종수 7. 자산 19건 중 가장 깨끗한 측정치다. 종이 바탕이 아니라
     기관이 자기 보고서 표지에 재단선까지 인쇄한 '정해 놓은 지면색'이다.
   - 도판 #FFFFFF : `app-letterhead-r2.jpg` + `app-folder-r2.jpg` 지면 92.4%(정확값 #FFFFFF).
   - 이 브랜드는 보고서 표지에서 '바탕은 상대에 맞춰 바꾸고, 그 위의 흰 카드와
     그 안의 순서는 바꾸지 않는' 구성을 쓴다(도쿄=담회색 / 캐나다=적·주황).
     케이스의 도판을 흰 카드로 띄운 것은 이 브랜드 자신의 장치를 따른 것이다.

   물성 — 인장된 현수막 면 (2026-08-08 추가)
   - 이 브랜드의 실물은 2500×450 현수막이다. 그래서 물성도 인장막으로 잡았다.
     가는 평직 결 · 인장으로 가운데가 눌린 면 · 코팅 광택 띠 · 네 귀퉁이가 당겨진 자국.
   - 열아홉 물성 중 **바탕 자체가 움직이는 것은 이것뿐이다.** 요소가 얹히면 마크가 아니라
     면 전체가 낮은 주파수로 한 번 출렁이고 돌아온다 — 가장자리가 붙들려 있기 때문이다.
   - 착지 곡선 settle_taut(t) = 1 - e^(-4.5t)·cos(5.8t).
     오버슛 +11.52% 로 가장 크고, 정점이 t=0.428 로 가장 늦다.
     증착필름(+9.79%, 초반 고주파 3회)·사출플라스틱(+5.17%, t=0.32)·고체블록(+1.33%)과
     주파수와 시점이 모두 갈린다.
   - 모션 2·3 의 배경색은 케이스 본문에 실린 현수막 실측색 그대로다. 지어낸 색이 없다.
   ========================================================================== */

/* 지면 바탕 — 승인 로고 워드마크의 네이비 실측값이다(로고 점유 39.1%).
   예전에는 #F1F2ED 였다. 그것도 실측(book-tokyo2022 표지 바탕)이지만
   21C어학원 #F0F0F0 과 ΔE 2.6, 한돈자조금 #FCFCFC 와 4.5 로 붙어 있었다.
   「종이색을 공유하지 마라」는 지시에 따라 옮겼다. 기존 바탕 34개 중 최근접은
   캐리소프트 #17417C 로 ΔE 12.8.
   현수막 배경 아홉(멕시코 16.9 · 한-EU 15.2 · 반도체 13.0)도 통과하지만 쓰지 않았다 —
   이 케이스의 논지가 「배경은 매번 바뀐다」인데 그중 하나를 브랜드색처럼 앉히면 논지와 어긋난다.
   승인 로고는 화소 중앙값 (0,48,124) 인 네이비라 네이비 면 위에서 사라진다(대비 19.7 대 밝은 지면 75.4).
   그래서 구획면은 실측 지면 --paper 를 그대로 두고, 바탕은 셸에서 드러나게 했다. */
body[data-seoul-forum-project='true'] { background: #003078; }

/* PORTO ROCHA 의 .case__study__slices 는 그리드다. 전체 폭으로 되돌린다. */
body[data-seoul-forum-project='true'] .case__study__slices {
  display: block; width: 100%; max-width: none; padding: 0; gap: 0;
}
body[data-seoul-forum-project='true'] .case__study__info { display: none; }

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

.sif-case {
  --navy: #003078;
  --ground: #003078;  /* 로고 워드마크 실측 · 지면 바탕 */
  --sky: #4098d0;
  --paper: #f1f2ed;   /* 실측 지면 — book-tokyo2022 표지 바탕 */
  --plate: #ffffff;   /* 실측 도판 — 레터헤드·L홀더 지면 */
  --ink: #1a1a1a;

  --navy-70: rgba(0, 48, 120, 0.70);
  --navy-44: rgba(0, 48, 120, 0.69);
  --navy-22: rgba(0, 48, 120, 0.22);
  --ink-66: rgba(26, 26, 26, 0.66);
  --ink-64: rgba(26, 26, 26, 0.64);
  --rule: rgba(0, 48, 120, 0.16);
  --rule-soft: rgba(0, 48, 120, 0.08);
  --paper-70: rgba(241, 242, 237, 0.70);
  --paper-40: rgba(241, 242, 237, 0.40);

  /* 흰 도판이 지면에 묻히지 않게 — 얇은 접지 그림자 + 넓은 들림 그림자 */
  --lift: 0 1px 2px rgba(0, 48, 120, 0.05), 0 10px 26px rgba(0, 48, 120, 0.07);

  --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;
  --serif: 'Times New Roman', Georgia, serif;

  font-family: var(--sans);
  display: block; width: 100%;
  background: var(--ground); color: var(--ink);   /* 셸에서 바탕이 드러난다. 구획면은 --paper 유지 */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  word-break: keep-all;
}

.sif-case *, .sif-case *::before, .sif-case *::after { box-sizing: border-box; }
.sif-case img, .sif-case video { display: block; max-width: 100%; }
.sif-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;
}

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

.sif-case .scene-index {
  position: absolute; top: clamp(20px, 3vw, 46px); left: var(--gutter);
  font-family: var(--serif); font-size: clamp(11px, 0.92vw, 15px);
  letter-spacing: 0.24em; color: var(--navy-44); font-variant-numeric: tabular-nums;
}
.sif-case .on-navy .scene-index { color: var(--paper-40); }

/* ── 타이포 ────────────────────────────────────────────────── */
.sif-case h2 {
  font-size: clamp(26px, 3.3vw, 58px); line-height: 1.26;
  letter-spacing: -0.022em; font-weight: 600; margin: 0; color: var(--navy);
}
.sif-case .on-navy h2 { color: var(--paper); }
.sif-case h3 {
  font-size: clamp(16px, 1.4vw, 24px); line-height: 1.38;
  letter-spacing: -0.012em; font-weight: 600; margin: 0;
}
.sif-case p { margin: 0; }
.sif-case .lead {
  font-size: clamp(14px, 1.14vw, 19px); line-height: 1.82;
  color: var(--ink-66); max-width: 60ch;
}
.sif-case .on-navy .lead { color: var(--paper-70); }
.sif-case .eyebrow {
  display: block; font-family: var(--serif);
  font-size: clamp(11px, 0.9vw, 14px); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--navy-44); padding-bottom: clamp(12px, 1.4vw, 22px);
  margin-bottom: clamp(18px, 2.2vw, 34px); border-bottom: 1px solid var(--rule);
}
.sif-case .on-navy .eyebrow {
  color: var(--paper-40); border-bottom-color: rgba(241, 242, 237, 0.22);
}
.sif-case .section-head { max-width: 76ch; }
.sif-case .section-head .lead { margin-top: clamp(16px, 1.9vw, 30px); }

/* ── 01 히어로 ─────────────────────────────────────────────── */
.sif-case .scene-hero {
  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);
}
.sif-case .hero-mark { width: min(58vw, 460px); height: auto; }
.sif-case .hero-thesis {
  font-size: clamp(19px, 2.3vw, 40px); line-height: 1.44;
  letter-spacing: -0.024em; font-weight: 600; max-width: 22ch; color: var(--navy);
}
.sif-case .hero-thesis em {
  font-style: normal; box-shadow: inset 0 -0.42em 0 rgba(64, 152, 208, 0.32);
}
.sif-case .hero-en {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(11px, 0.94vw, 15px); color: var(--ink-64);
}
.sif-case .hero-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(8px, 1vw, 16px); margin-top: clamp(4px, 0.8vw, 12px);
}
.sif-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);
}

/* 9색 실측 스트립 — 페이지 전체의 서명 */
.sif-case .event-strip { display: flex; width: min(74vw, 620px); height: 10px; }
.sif-case .event-strip i { flex: 1; }

/* ── 자리(슬롯) 다이어그램 ─────────────────────────────────── */
.sif-case .banner-module {
  margin-top: clamp(30px, 3.8vw, 66px);
  aspect-ratio: 2500 / 450;
  border: 1px solid var(--rule);
  position: relative; background: var(--plate); box-shadow: var(--lift);
}
.sif-case .on-navy .banner-module {
  background: rgba(241, 242, 237, 0.06); border-color: rgba(241, 242, 237, 0.24);
  box-shadow: none;   /* 네이비 면에서는 들림 그림자가 성립하지 않는다 */
}
.sif-case .slot {
  position: absolute; border: 1px solid var(--sky);
  display: flex; align-items: center; justify-content: center;
}
.sif-case .slot span {
  font-size: clamp(11px, 0.72vw,12px); letter-spacing: 0.1em;
  color: var(--navy-70); white-space: nowrap;
}
.sif-case .on-navy .slot span { color: var(--paper-70); }

.sif-case .slot-list {
  margin-top: clamp(26px, 3.2vw, 52px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0; border-top: 1px solid var(--rule);
}
.sif-case .slot-list div {
  padding: clamp(14px, 1.8vw, 26px) clamp(12px, 1.4vw, 22px);
  border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
.sif-case .slot-list div:last-child { border-right: 0; }
.sif-case .slot-list b {
  display: block; font-size: clamp(13px, 1.08vw, 18px); font-weight: 600; color: var(--navy);
}
.sif-case .slot-list span {
  display: block; margin-top: 0.5em; font-size: clamp(11px, 0.86vw, 13px);
  line-height: 1.6; color: var(--ink-64);
}

/* ── 실측 수치 ─────────────────────────────────────────────── */
.sif-case .measure {
  margin-top: clamp(30px, 3.8vw, 66px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0; border-top: 1px solid var(--rule);
}
.sif-case .on-navy .measure { border-top-color: rgba(241,242,237,0.22); }
.sif-case .measure div {
  padding: clamp(16px, 2vw, 30px) clamp(14px, 1.6vw, 24px);
  border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
.sif-case .on-navy .measure div {
  border-bottom-color: rgba(241,242,237,0.22); border-right-color: rgba(241,242,237,0.22);
}
.sif-case .measure div:last-child { border-right: 0; }
.sif-case .measure b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(19px, 2vw, 34px); letter-spacing: -0.01em; color: var(--navy);
}
.sif-case .on-navy .measure b { color: var(--paper); }
.sif-case .measure span {
  display: block; margin-top: 0.5em; font-size: clamp(11px, 0.86vw, 13px);
  letter-spacing: 0.07em; color: var(--ink-64);
}
.sif-case .on-navy .measure span { color: var(--paper-40); }

/* ── 9건 배경색 ────────────────────────────────────────────── */
.sif-case .bg-grid {
  margin-top: clamp(32px, 4vw, 70px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
}
.sif-case .bg-cell i { display: block; height: clamp(78px, 8vw, 132px); }
.sif-case .bg-cell b {
  display: block; margin-top: 0.8em; font-size: clamp(12px, 1vw, 16px); font-weight: 600;
}
.sif-case .bg-cell code {
  display: block; margin-top: 0.3em; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: clamp(10px, 0.82vw, 13px); letter-spacing: 0.06em; color: var(--ink-64);
}
.sif-case .bg-cell em {
  display: block; margin-top: 0.34em; font-style: normal;
  font-size: clamp(10px, 0.8vw, 12px); color: var(--ink-64);
}

/* ── 현수막 시퀀스 ─────────────────────────────────────────── */
.sif-case .banner-seq {
  margin-top: clamp(32px, 4.2vw, 74px);
  display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 38px);
}
.sif-case .banner-seq figure { margin: 0; }
.sif-case .banner-seq .frame {
  border: 1px solid var(--rule); background: var(--plate);
  box-shadow: var(--lift); overflow: hidden;
}
.sif-case .banner-seq img { width: 100%; height: auto; }
.sif-case .banner-seq figcaption {
  margin-top: 0.7em; display: flex; flex-wrap: wrap; gap: 0 1.2em;
  font-size: clamp(11px, 0.88vw, 14px); color: var(--ink-64);
}
.sif-case .banner-seq figcaption b { color: var(--navy); font-weight: 600; }

/* ── 응용 도판 ─────────────────────────────────────────────── */
.sif-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);
}
.sif-case .plates figure { margin: 0; }
.sif-case .plates .frame {
  background: var(--plate); border: 1px solid var(--rule); box-shadow: var(--lift);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 1.3vw, 22px); overflow: hidden;
}
.sif-case .plates .frame.tall { aspect-ratio: 3 / 4; }
.sif-case .plates img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.sif-case .plates figcaption {
  margin-top: 0.75em; font-size: clamp(11px, 0.88vw, 14px); color: var(--ink-64); line-height: 1.55;
}
.sif-case .on-navy .plates .frame {
  background: rgba(241,242,237,0.06); border-color: rgba(241,242,237,0.2);
  box-shadow: none;
}
.sif-case .on-navy .plates figcaption { color: var(--paper-40); }

/* ── 모션 ──────────────────────────────────────────────────── */
.sif-case .motion-stage { margin-top: clamp(28px, 3.6vw, 62px); }
.sif-case .motion-stage video {
  width: 100%; height: auto; background: var(--paper);
  border: 1px solid var(--rule); box-shadow: var(--lift);
}
.sif-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);
}
.sif-case .motion-note strong {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(14px, 1.24vw, 21px); letter-spacing: 0.04em; color: var(--navy);
}
.sif-case .motion-note span { font-size: clamp(11px, 0.94vw, 15px); color: var(--ink-64); }
.sif-case .on-navy .motion-note { border-top-color: rgba(241,242,237,0.22); }
.sif-case .on-navy .motion-note strong { color: var(--paper); }
.sif-case .on-navy .motion-note span { color: var(--paper-40); }

/* ── 12 클로징 ─────────────────────────────────────────────── */
.sif-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);
}
.sif-case .closing-line {
  font-size: clamp(18px, 2.1vw, 38px); line-height: 1.42;
  letter-spacing: -0.022em; font-weight: 600; max-width: 24ch; color: var(--navy);
}
.sif-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);
}

/* ── 진입 애니메이션 ───────────────────────────────────────── */
.sif-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;
}
.sif-case [data-reveal].is-in { opacity: 1; transform: none; }
.sif-case [data-reveal][data-delay='1'] { transition-delay: 0.08s; }
.sif-case [data-reveal][data-delay='2'] { transition-delay: 0.16s; }
.sif-case [data-reveal][data-delay='3'] { transition-delay: 0.24s; }

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

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sif-case .slot span { display: none; }
}
@media (max-width: 720px) {
  .sif-case .scene { padding: clamp(52px, 15vw, 84px) 20px; }
  .sif-case .scene-index { left: 20px; }
  .sif-case .plates { grid-template-columns: minmax(0, 1fr); }
  .sif-case .measure, .sif-case .slot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sif-case .measure div:nth-child(2n), .sif-case .slot-list div:nth-child(2n) { border-right: 0; }
  .sif-case .bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sif-case .hero-mark { width: 74vw; }
}

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/seoul-forum-case-assets/banner-quad.jpg"],
img[src$="/seoul-forum-case-assets/banner-uk.jpg"],
img[src$="/seoul-forum-case-assets/banner-usa.jpg"],
img[src$="/seoul-forum-case-assets/banner-japan.jpg"] { aspect-ratio: 50/9; }
img[src$="/seoul-forum-case-assets/book-tokyo2022.jpg"],
img[src$="/seoul-forum-case-assets/book-canada2023.jpg"],
img[src$="/seoul-forum-case-assets/book-canada2024.jpg"] { aspect-ratio: 713/1000; }
img[src$="/seoul-forum-case-assets/banner-india.jpg"],
img[src$="/seoul-forum-case-assets/banner-mexico.jpg"] { aspect-ratio: 4/1; }
img[src$="/leaderin-case-assets-v2/symbol-final.svg"] { aspect-ratio: 37/24; }
img[src$="/seoul-forum-case-assets/mark-logo.png"] { aspect-ratio: 20/13; }
img[src$="/seoul-forum-case-assets/banner-europe.jpg"] { aspect-ratio: 5/2; }
img[src$="/seoul-forum-case-assets/banner-semicon.jpg"] { aspect-ratio: 2400/341; }
img[src$="/seoul-forum-case-assets/banner-eu2024.jpg"] { aspect-ratio: 1200/251; }
img[src$="/seoul-forum-case-assets/app-letterhead-r2.jpg"] { aspect-ratio: 158/327; }
img[src$="/seoul-forum-case-assets/app-folder-r2.jpg"] { aspect-ratio: 418/327; }
img[src$="/seoul-forum-case-assets/app-shopping-bag-r2.jpg"] { aspect-ratio: 36/25; }
img[src$="/seoul-forum-case-assets/app-podium-r2.jpg"] { aspect-ratio: 52/23; }
img[src$="/seoul-forum-case-assets/app-banner-stand-r2.jpg"] { aspect-ratio: 218/653; }
img[src$="/seoul-forum-case-assets/app-award-r2.jpg"] { aspect-ratio: 234/29; }