/* ==========================================================================
   라니디저트 rani dessert café — 브랜드 아이덴티티 케이스
   강디자인

   실측 대조 (2026-08-08)
   승인 로고 `rani-logo-exact.png` 를 2단위 양자화·구역별 중앙값으로 재측정했다.
     --rani-rose   #BA7077  ✓ 마크와 **정확히 일치** (13.9%, 왼쪽 하트 글리프)
     --rani-cacao  #231916  ✓ 마크와 **정확히 일치** (82.1%, 글자 전체)
     --rani-cream  #F6EFE6  ✓ 포장 사진에서 지지됨
                            (package-ribbon 17.05% · package-bags 21.08% 가 Δ30 이내)
     --rani-ribbon #604742  △ 사진 안 0.9% — 리본 면적이 작아 그럴 수 있다. 그대로 둔다
     --rani-paper  #FFFDF9  ✗ 근거 없음 → **#FFFFFF** 로 정정.
                            승인 제안 지면 세 장이 모두 가장자리 최빈 #FFFFFF 100% 다

   물성 — 그로그랭 리본 (2026-08-08 추가)
   - 케이스가 wrap · tie · sign 이다. 싸고 묶는 브랜드다.
     지면 #BA7077 은 승인 로고 실측값이고, 그 위에 가로 골이 촘촘한 리본면을 깔았다.
     골을 따라 광택이 흐르고, 마크는 포장지색 #F6EFE6 으로 눌려 들어간다.
   - 착지 곡선 settle_cinch 는 **스물네 물성 중 유일하게 도중에 멈춘다** —
     0.62 까지 당긴 뒤 t=0.30~0.58 구간에서 값이 고정되고 다시 조여 1.0 에 닿는다.
     표본 301개 중 84구간이 정지 구간이다. 매듭은 한 번에 조여지지 않는다.
   - 모션을 1440×900 / 30fps / 300프레임 / 정확히 10.000초 규격으로 다시 만들었다.
     이전 파일은 1280×720 / 225프레임 / 7.5초로 규격을 어기고 있었다.
   ========================================================================== */

:root {
  --rani-rose: #ba7077;
  --rani-cacao: #231916;
  --rani-ribbon: #604742;
  --rani-cream: #f6efe6;
  --rani-paper: #ffffff;   /* 승인 제안 지면 3장 가장자리 최빈 100% */
}

body[data-rani-project='true'] .rani-video,
body[data-rani-project='true'] .rani-storefront img,
body[data-rani-project='true'] .rani-interior > img,
body[data-rani-project='true'] .rani-dessert-pair img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

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

body[data-rani-project='true'] .rani-scene img { display: block; }
.rani-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; }
.rani-scene-head span,
.rani-direction-grid article > span,
.rani-color-panel span,
.rani-packaging-copy > span,
.rani-interior span,
.rani-signature > span { font-size: clamp(11px, .75vw, 13px); letter-spacing: .12em; text-transform: uppercase; }
.rani-scene-head strong { font-size: clamp(18px, 2vw, 36px); font-weight: 400; letter-spacing: -.04em; line-height: 1.08; text-align: right; }

.rani-directions {
  column-gap: clamp(18px, 2.6vw, 38px);
  display: grid;
  grid-template-columns: minmax(170px, .62fr) minmax(0, 2fr);
  padding: clamp(20px, 3.7vw, 64px);
}
.rani-directions .rani-scene-head {
  display: block;
  left: 0;
  min-width: 0;
  position: relative;
  right: 0;
  top: 0;
}
.rani-directions .rani-scene-head strong {
  display: block;
  margin-top: clamp(16px, 2vw, 28px);
  max-width: 8em;
  overflow-wrap: keep-all;
  padding-right: 6px;
  text-align: left;
}
.rani-direction-grid { display: grid; gap: clamp(10px, 1.5vw, 24px); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(28px, 4.6vw, 72px); min-width: 0; }
.rani-direction-grid article { border-top: 1px solid rgba(35,25,22,.22); display: block; min-width: 0; padding-top: clamp(9px, 1vw, 16px); position: relative; }
.rani-direction-grid article.selected::after { background: var(--rani-rose); content: ''; height: 4px; left: 0; position: absolute; right: 0; top: -2px; }
.rani-direction-grid img { background: #fff; height: clamp(145px, 19vw, 300px); margin-bottom: clamp(8px, 1vw, 15px); object-fit: contain; width: 100%; }
.rani-direction-grid article > span { color: var(--rani-rose); display: block; padding-top: .35em; }
.rani-direction-grid h3 { font-size: clamp(16px, 1.55vw, 27px); font-weight: 400; letter-spacing: -.04em; line-height: 1.05; margin: 7px 0 0; overflow-wrap: keep-all; text-align: left; }

.rani-gift { background: var(--rani-cacao) !important; color: #fff !important; }
.rani-gift-stage { left: 50%; position: absolute; top: 57%; transform: translate(-50%, -50%); width: min(62vw, 860px); }
.rani-box { animation: raniBox 6s cubic-bezier(.2,.75,.22,1) infinite; aspect-ratio: 1.66; background: var(--rani-paper); box-shadow: 0 28px 60px rgba(0,0,0,.24); position: relative; width: 100%; }
.rani-box .ribbon { animation: raniWrap 6s cubic-bezier(.2,.75,.22,1) infinite; position: absolute; }
.rani-box .horizontal { background: var(--rani-ribbon); height: 9%; left: 0; top: 45.5%; width: 100%; }
.rani-box .vertical { background: var(--rani-rose); height: 100%; left: 47%; top: 0; width: 6%; }
.rani-box .bow { animation: raniTie 6s cubic-bezier(.2,.75,.22,1) infinite; border: 7px solid; border-bottom-color: transparent; border-radius: 50% 50% 46% 46%; height: 22%; position: absolute; top: 38%; width: 15%; }
.rani-box .bow.left { border-color: var(--rani-rose); border-bottom-color: transparent; left: 34%; transform: rotate(18deg); }
.rani-box .bow.right { border-color: var(--rani-ribbon); border-bottom-color: transparent; right: 34%; transform: rotate(-18deg); }
.rani-box em { animation: raniLabel 6s ease infinite; background: var(--rani-paper); color: var(--rani-cacao); font-size: clamp(8px, .8vw, 13px); font-style: normal; left: 50%; letter-spacing: .08em; padding: 16px 20px; position: absolute; text-transform: lowercase; top: 50%; transform: translate(-50%, -50%); }
.rani-gift > p { bottom: 6%; font-size: clamp(8px, .72vw, 12px); left: 0; letter-spacing: .16em; position: absolute; right: 0; text-align: center; }

.rani-mark-stage { height: clamp(230px, 34vw, 510px); left: 50%; position: absolute; top: 61%; transform: translate(-50%, -50%); width: min(76vw, 1050px); }
.rani-mark-stage img { height: 100%; object-fit: contain; width: 100%; }
.rani-mark-stage .note { color: var(--rani-rose); font-size: clamp(7px, .68vw, 11px); letter-spacing: .13em; position: absolute; }
.rani-mark-stage .note::before { background: currentColor; content: ''; height: 1px; position: absolute; width: 56px; }
.rani-mark-stage .ribbon-note { left: 0; top: 31%; }
.rani-mark-stage .ribbon-note::before { right: -64px; top: .55em; }
.rani-mark-stage .heart-note { left: 16%; top: 13%; }
.rani-mark-stage .heart-note::before { right: -64px; top: .55em; }
.rani-mark-stage .signature-note { right: 3%; top: 41%; }
.rani-mark-stage .signature-note::before { left: -64px; top: .55em; }
.rani-mark-stage .cafe-note { bottom: 10%; right: 20%; }
.rani-mark-stage .cafe-note::before { left: -64px; top: .55em; }

.rani-dessert-pair { display: grid; grid-template-columns: .84fr 1.16fr; }
.rani-dessert-pair figure, .rani-storefront figure { margin: 0; overflow: hidden; position: relative; }
.rani-dessert-pair figcaption, .rani-storefront figcaption { bottom: 5%; color: #fff; font-size: clamp(8px, .7vw, 12px); left: 6%; letter-spacing: .14em; position: absolute; text-shadow: 0 1px 10px rgba(0,0,0,.42); }

.rani-color { display: grid; grid-template-columns: repeat(3, 1fr); }
.rani-color-panel { display: flex; flex-direction: column; padding: clamp(14px, 2.2vw, 36px); }
.rani-color-panel.rose { background: var(--rani-rose); color: #fff; }
.rani-color-panel.cacao { background: var(--rani-cacao); color: #fff; }
.rani-color-panel.cream { background: var(--rani-cream); color: var(--rani-cacao); }
.rani-color-panel strong { font-size: clamp(17px, 2.1vw, 36px); font-weight: 400; letter-spacing: -.04em; line-height: 1; margin-top: auto; }
.rani-color-panel em { font-size: 9px; font-style: normal; letter-spacing: .12em; margin-top: 14px; }

.rani-packaging { background: #fff !important; display: grid; gap: clamp(20px, 4vw, 64px); grid-template-columns: .58fr 1.42fr; padding: clamp(24px, 4.8vw, 80px); }
.rani-packaging-copy { align-self: end; padding-bottom: 4%; }
.rani-packaging-copy > span { color: var(--rani-rose); }
.rani-packaging-copy strong { display: block; font-size: clamp(24px, 3vw, 52px); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; margin-top: 22px; }
.rani-packaging-copy p { font-size: clamp(11px, 1vw, 16px); line-height: 1.45; margin-top: 28px; max-width: 380px; }
.rani-packaging-grid { display: grid; gap: clamp(8px, 1vw, 16px); grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; min-height: 0; }
.rani-packaging-grid img { height: 100%; min-height: 0; object-fit: cover; width: 100%; }
.rani-packaging-grid .primary { grid-row: 1 / -1; }

.rani-storefront { display: grid; grid-template-columns: 1fr 1fr; }
.rani-storefront figure:first-child::after { background: linear-gradient(90deg, transparent, rgba(35,25,22,.12)); content: ''; inset: 0; position: absolute; }
.rani-interior { display: grid; grid-template-columns: .7fr 1.3fr; }
.rani-interior > img { object-position: 50% 40%; }
.rani-interior > div { align-items: flex-start; background: var(--rani-cacao); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(22px, 4vw, 68px); }
.rani-interior span { color: var(--rani-rose); }
.rani-interior strong { font-size: clamp(24px, 3.2vw, 55px); font-weight: 400; letter-spacing: -.05em; line-height: 1.04; margin-top: 24px; }

.rani-signature { align-items: center; background: var(--rani-paper) !important; display: flex; flex-direction: column; justify-content: center; }
.rani-signature > span { margin-bottom: 4%; }
.rani-signature > img { max-height: 56%; max-width: 70%; object-fit: contain; }
.rani-signature > p { bottom: 7%; font-size: clamp(9px, .8vw, 13px); letter-spacing: .16em; position: absolute; }

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

@keyframes raniBox { 0%, 5% { opacity: 0; transform: translateY(24px) scale(.98); } 18%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.99); } }
@keyframes raniWrap { 0%, 18% { opacity: 0; transform: scaleX(.02); } 42%, 86% { opacity: 1; transform: scaleX(1); } 96%, 100% { opacity: 0; } }
@keyframes raniTie { 0%, 35% { opacity: 0; transform: scale(.25); } 58%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes raniLabel { 0%, 52% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 66%, 86% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 96%, 100% { opacity: 0; } }

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

@media (max-width: 656px) {
  body[data-rani-project='true'] .rani-directions { aspect-ratio: auto !important; display: block; min-height: 340px; }
  body[data-rani-project='true'] .rani-gift,
  body[data-rani-project='true'] .rani-mark,
  body[data-rani-project='true'] .rani-packaging,
  body[data-rani-project='true'] .rani-signature { aspect-ratio: auto !important; min-height: 410px; }
  .rani-scene-head strong { max-width: 63%; }
  .rani-directions .rani-scene-head { display: block; }
  .rani-directions .rani-scene-head strong { display: block; font-size: 25px; margin-top: 18px; max-width: none; text-align: left; }
  .rani-direction-grid { gap: 9px; margin-top: 28px; }
  .rani-direction-grid img { height: 128px; }
  .rani-direction-grid article { display: block; }
  .rani-direction-grid article > span { display: block; font-size: 7px; }
  .rani-direction-grid h3 { font-size: 12px; margin-top: 7px; text-align: left; }
  .rani-gift-stage { top: 60%; width: 88%; }
  .rani-mark-stage { top: 63%; width: 96%; }
  .rani-mark-stage .note { display: none; }
  .rani-color-panel { padding: 13px; }
  .rani-color-panel span { font-size: 6px; }
  .rani-color-panel strong { font-size: 16px; }
  .rani-color-panel em { font-size: 6px; }
  .rani-packaging { display: block; padding: 28px; }
  .rani-packaging-copy { padding-bottom: 22px; }
  .rani-packaging-copy p { margin-top: 14px; }
  .rani-packaging-grid { height: 235px; }
  .rani-interior strong { font-size: 22px; }
  .rani-signature > img { max-width: 88%; }
  body[data-rani-project='true'] .case__study__info__left { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rani-box, .rani-box .ribbon, .rani-box .bow, .rani-box em { animation: none; opacity: 1; }
}

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

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/rani-case-assets/proposal-01-r2.jpg"],
img[src$="/rani-case-assets/proposal-02-r2.jpg"],
img[src$="/rani-case-assets/proposal-03-r2.jpg"] { aspect-ratio: 194/137; }
img[src$="/rani-case-assets/storefront-day-r2.webp"],
img[src$="/rani-case-assets/storefront-night-r2.webp"] { aspect-ratio: 1901/4021; }
img[src$="/rani-case-assets/rani-logo-exact-r2.png"] { aspect-ratio: 2990/1280; }
img[src$="/rani-case-assets/walnut-tarts-r2.jpg"] { aspect-ratio: 3/4; }
img[src$="/rani-case-assets/macarons.jpg"] { aspect-ratio: 900/641; }
img[src$="/rani-case-assets/package-ribbon.jpg"] { aspect-ratio: 899/900; }
img[src$="/rani-case-assets/package-bags.jpg"] { aspect-ratio: 18/13; }
img[src$="/rani-case-assets/package-variations.jpg"] { aspect-ratio: 179/225; }
img[src$="/rani-case-assets/interior-sign.jpg"] { aspect-ratio: 124/225; }