:root {
  --ebit-black: #0a0a0a;
  --ebit-brown: #836c53;
  --ebit-orange: #e69001;
  --ebit-gray: #807f7f;
  --ebit-cream: #f4f0e9;
  --ebit-white: #fff;
}

body[data-ebit-project='true'] .ebit-scene {
  background: var(--ebit-white);
  color: #251f1a;
  overflow: hidden;
  position: relative;
}

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

.ebit-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: 7;
}

.ebit-scene-head span,
.ebit-hero-copy span,
.ebit-hero-sequence span,
.ebit-space header span,
.ebit-space > p,
.ebit-application-grid figcaption,
.ebit-swatches span,
.ebit-closing > span,
.ebit-closing > p {
  font-size: clamp(8px, .72vw, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ebit-scene-head strong {
  font-size: clamp(19px, 2.1vw, 37px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.07;
  text-align: right;
}

.ebit-hero { background: var(--ebit-black) !important; color: #fff !important; }
.ebit-hero-copy { left: 7%; position: absolute; top: 15%; z-index: 7; }
.ebit-hero-copy span { color: rgba(255,255,255,.48); }
.ebit-hero-copy strong { display: block; font-size: clamp(28px, 4.1vw, 68px); font-weight: 400; letter-spacing: -.06em; line-height: 1.02; margin-top: 26px; }
.ebit-hero-motion { height: 80%; left: 45%; position: absolute; top: 10%; width: 50%; }
.ebit-hero-rays,
body[data-ebit-project='true'] .ebit-hero-logo { left: 50%; object-fit: contain; position: absolute; top: 50%; transform: translate(-50%,-50%); }
body[data-ebit-project='true'] .ebit-hero-rays { animation: ebitRays 10s cubic-bezier(.2,.72,.2,1) 1 both; height: 19%; opacity: 0; width: 30%; z-index: 2; }
body[data-ebit-project='true'] .ebit-hero-logo { animation: ebitLogo 10s cubic-bezier(.2,.72,.2,1) 1 both; height: 54%; opacity: 0; width: 88%; z-index: 4; }
.ebit-hero-beam { animation: ebitBeam 10s ease-in-out 1 both; background: linear-gradient(90deg, rgba(230,144,1,0), rgba(230,144,1,.9), rgba(255,217,146,.4), rgba(230,144,1,0)); filter: blur(5px); height: 2px; left: -30%; opacity: 0; position: absolute; top: 57%; width: 36%; z-index: 4; }
.ebit-hero-sequence { align-items: center; bottom: 8%; display: flex; gap: 11px; left: 7%; position: absolute; z-index: 7; }
.ebit-hero-sequence i { background: rgba(255,255,255,.42); height: 1px; width: 28px; }

.ebit-brief { background: var(--ebit-cream) !important; display: grid; grid-template-columns: 42% 58%; padding: clamp(22px, 4vw, 68px); }
.ebit-brief .ebit-scene-head { display: block; left: 0; position: relative; right: 0; top: 0; }
.ebit-brief .ebit-scene-head strong { display: block; margin-top: 24px; max-width: 10em; text-align: left; }
.ebit-brief-paper { align-self: end; background: #ddd5ca; box-shadow: 0 24px 55px rgba(57,41,28,.16); height: 68%; margin: 0; overflow: hidden; position: relative; }
.ebit-brief-paper img { height: 100%; object-fit: contain; width: 100%; }
.ebit-brief-quotes { align-self: end; display: grid; gap: 1px; grid-column: 1; grid-row: 1; margin-top: auto; width: 84%; }
.ebit-brief-quotes p { border-top: 1px solid rgba(37,31,26,.22); display: flex; justify-content: space-between; margin: 0; padding: 10px 0; }
.ebit-brief-quotes span { color: var(--ebit-brown); font-size: clamp(7px, .63vw, 10px); letter-spacing: .1em; }
.ebit-brief-quotes strong { font-size: clamp(11px, 1vw, 16px); font-weight: 400; }

.ebit-directions { padding: clamp(22px, 4vw, 68px); }
body[data-ebit-project='true'] .ebit-direction-board { bottom: 7%; height: 73%; left: 6%; object-fit: contain; position: absolute; width: 88%; }
.ebit-direction-labels { bottom: 5%; display: grid; grid-template-columns: repeat(3, 1fr); left: 10%; position: absolute; right: 10%; }
.ebit-direction-labels span { color: var(--ebit-brown); font-size: clamp(7px, .62vw, 10px); letter-spacing: .1em; text-align: center; }

.ebit-anatomy { background: var(--ebit-cream) !important; }
.ebit-anatomy-stage { height: 65%; left: 50%; position: absolute; top: 63%; transform: translate(-50%,-50%); width: 84%; }
.ebit-anatomy-stage img { height: 100%; object-fit: contain; width: 100%; }
.ebit-anatomy-stage .note { color: var(--ebit-brown); font-size: 11px; letter-spacing: .12em; position: absolute; }
.ebit-anatomy-stage .note::before { background: currentColor; content: ''; height: 1px; position: absolute; width: 74px; }
.ebit-anatomy-stage .name {
  background: var(--ebit-orange);
  border-radius: 999px;
  box-shadow: 0 5px 16px rgba(37, 31, 26, .13);
  color: var(--ebit-black);
  font-size: clamp(10px, .86vw, 13px);
  font-weight: 600;
  left: 0;
  padding: 6px 9px 5px;
  top: 55%;
}
.ebit-anatomy-stage .name::before { right: -82px; top: 50%; }
.ebit-anatomy-stage .cross { left: 49%; top: 1%; }
.ebit-anatomy-stage .cross::before { left: 50%; top: 18px; transform: rotate(90deg); transform-origin: left; }
.ebit-anatomy-stage .ray { bottom: 2%; right: 0; }
.ebit-anatomy-stage .ray::before { left: -82px; top: .5em; }

.ebit-space { background: var(--ebit-black) !important; color: #fff !important; }
.ebit-space > img { filter: brightness(.43) saturate(.75); height: 100%; object-fit: cover; width: 100%; }
.ebit-space::after { background: linear-gradient(90deg, rgba(10,10,10,.85), transparent 52%); content: ''; inset: 0; position: absolute; }
.ebit-space header { left: 6%; position: absolute; top: 13%; z-index: 7; }
.ebit-space header span { color: rgba(255,255,255,.55); }
.ebit-space header strong { display: block; font-size: clamp(26px, 4vw, 66px); font-weight: 400; letter-spacing: -.055em; line-height: 1.02; margin-top: 24px; }
.ebit-space > p { bottom: 8%; left: 6%; position: absolute; z-index: 7; }
.ebit-space-beam { animation: ebitSpaceBeam 10s ease-in-out 1 both; background: linear-gradient(90deg, transparent, rgba(230,144,1,.86), rgba(255,224,168,.8), transparent); filter: blur(3px); height: 3px; left: -20%; opacity: 0; position: absolute; top: 53%; width: 42%; z-index: 5; }

.ebit-applications { background: var(--ebit-cream) !important; padding: clamp(22px, 4vw, 68px); }
.ebit-application-grid { bottom: 6%; display: grid; gap: 2%; grid-template-columns: repeat(3, 1fr); height: 69%; left: 6%; position: absolute; right: 6%; }
.ebit-application-grid figure { background: #d7cec3; margin: 0; min-width: 0; overflow: hidden; position: relative; }
.ebit-application-grid img { height: 100%; object-fit: cover; width: 100%; }
.ebit-application-grid .night img { object-position: center; }
.ebit-application-grid figcaption { background: rgba(10,10,10,.88); bottom: 0; color: #fff; left: 0; padding: 10px 12px; position: absolute; }

.ebit-palette { background: #fff !important; padding: clamp(22px, 4vw, 68px); }
.ebit-light-band { height: 16%; left: 0; object-fit: cover; position: absolute; top: 37%; width: 100%; }
.ebit-swatches { bottom: 7%; display: grid; gap: 2px; grid-template-columns: repeat(3, 1fr); left: 6%; position: absolute; right: 6%; }
.ebit-swatches article { display: flex; flex-direction: column; height: clamp(110px, 13vw, 210px); justify-content: space-between; padding: clamp(14px, 1.8vw, 28px); }
.ebit-swatches .brown { background: var(--ebit-brown); color: #fff; }
.ebit-swatches .orange { background: var(--ebit-orange); color: #17110b; }
.ebit-swatches .gray { background: var(--ebit-gray); color: #fff; }
.ebit-swatches strong { font-size: clamp(18px, 2.6vw, 43px); font-weight: 400; letter-spacing: -.03em; }

.ebit-closing { align-items: center; background: var(--ebit-black) !important; color: #fff !important; display: flex; flex-direction: column; justify-content: center; }
.ebit-closing > span { color: rgba(255,255,255,.45); margin-bottom: 3%; }
.ebit-closing-mark { height: 34%; position: relative; width: 64%; }
.ebit-closing-mark img { height: 100%; object-fit: contain; position: relative; width: 100%; z-index: 2; }
.ebit-closing-mark i { animation: ebitClosingGlow 5.8s ease-in-out infinite; background: radial-gradient(circle, rgba(230,144,1,.4), transparent 68%); height: 120%; left: 50%; position: absolute; top: 42%; transform: translate(-50%,-50%); width: 55%; }
.ebit-closing > strong { font-size: clamp(20px, 2.8vw, 47px); font-weight: 400; letter-spacing: -.04em; margin-top: 4%; }
.ebit-closing > p { bottom: 7%; position: absolute; }

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

@keyframes ebitRays {
  0%, 5.6% { opacity: 0; transform: translate(-50%,-50%) scale(.18); }
  13.6%, 33.6% { opacity: .46; transform: translate(-50%,-50%) scale(.82); }
  44%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
}

@keyframes ebitLogo {
  0%, 22.4% { opacity: 0; transform: translate(-50%,-50%) scale(.94); }
  35.2% { opacity: .72; transform: translate(-50%,-50%) scale(.98); }
  48%, 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

@keyframes ebitBeam {
  0%, 36% { left: -30%; opacity: 0; }
  42.4% { opacity: 1; }
  56% { left: 75%; opacity: .8; }
  64%, 100% { left: 120%; opacity: 0; }
}

@keyframes ebitSpaceBeam {
  0%, 8.88% { left: -30%; opacity: 0; }
  17.76% { opacity: 1; }
  51.8% { left: 76%; opacity: .9; }
  63.64%, 100% { left: 120%; opacity: 0; }
}

@keyframes ebitClosingGlow {
  0%, 100% { opacity: .16; transform: translate(-50%,-50%) scale(.78); }
  52% { opacity: .7; transform: translate(-50%,-50%) scale(1.08); }
}

@media (max-width: 1024px) {
  body[data-ebit-project='true'] .case__study__info__left,
  body[data-ebit-project='true'] .case__study__info__right { grid-column: 1 / -1; }
  body[data-ebit-project='true'] .ebit-brief,
  body[data-ebit-project='true'] .ebit-directions,
  body[data-ebit-project='true'] .ebit-anatomy,
  body[data-ebit-project='true'] .ebit-applications,
  body[data-ebit-project='true'] .ebit-palette { aspect-ratio: auto !important; min-height: 530px; }
}

@media (max-width: 656px) {
  body[data-ebit-project='true'] .ebit-brief,
  body[data-ebit-project='true'] .ebit-directions,
  body[data-ebit-project='true'] .ebit-anatomy,
  body[data-ebit-project='true'] .ebit-applications,
  body[data-ebit-project='true'] .ebit-palette,
  body[data-ebit-project='true'] .ebit-closing { aspect-ratio: auto !important; }
  .ebit-hero-copy { left: 7%; top: 11%; }
  .ebit-hero-copy strong { font-size: 24px; margin-top: 13px; }
  .ebit-hero-motion { height: 70%; left: 38%; top: 19%; width: 61%; }
  body[data-ebit-project='true'] .ebit-hero-logo { width: 95%; }
  body[data-ebit-project='true'] .ebit-hero-rays { width: 38%; }
  .ebit-hero-sequence { bottom: 6%; gap: 7px; }
  .ebit-hero-sequence i { width: 13px; }
  .ebit-scene-head strong { font-size: 22px; max-width: 58%; }
  .ebit-brief { display: block; min-height: 600px !important; }
  .ebit-brief .ebit-scene-head strong { max-width: 10em; }
  .ebit-brief-quotes { bottom: 22px; position: absolute; width: calc(100% - 44px); }
  .ebit-brief-paper { bottom: 120px; height: 315px; position: absolute; right: 22px; width: 50%; }
  .ebit-brief-quotes p { padding: 7px 0; }
  .ebit-brief-quotes strong { font-size: 11px; }
  .ebit-directions { min-height: 440px !important; }
  body[data-ebit-project='true'] .ebit-direction-board { bottom: 9%; height: 64%; left: 1%; width: 98%; }
  .ebit-direction-labels { display: none; }
  .ebit-anatomy { min-height: 410px !important; }
  .ebit-anatomy-stage { height: 58%; top: 66%; width: 96%; }
  .ebit-anatomy-stage .note { display: none; }
  .ebit-space header { left: 7%; top: 11%; }
  .ebit-space header strong { font-size: 24px; margin-top: 13px; }
  .ebit-space > p { font-size: 6px; }
  .ebit-applications { min-height: 500px !important; }
  .ebit-application-grid { height: 68%; left: 4%; right: 4%; }
  .ebit-application-grid figcaption { font-size: 5px; padding: 7px 5px; }
  .ebit-palette { min-height: 440px !important; }
  .ebit-light-band { height: 13%; top: 35%; }
  .ebit-swatches { bottom: 6%; left: 4%; right: 4%; }
  .ebit-swatches article { height: 125px; padding: 11px; }
  .ebit-swatches span { font-size: 6px; }
  .ebit-swatches strong { font-size: 14px; }
  .ebit-closing { min-height: 380px; }
  .ebit-closing-mark { height: 28%; width: 82%; }
  .ebit-closing > strong { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ebit-hero-motion *,
  .ebit-space-beam,
  .ebit-closing-mark i { animation: none !important; }
  body[data-ebit-project='true'] .ebit-hero-rays { display: none; }
  body[data-ebit-project='true'] .ebit-hero-logo { clip-path: none; opacity: 1; transform: translate(-50%,-50%); }
  .ebit-hero-beam,
  .ebit-space-beam { display: none; }
}

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/ebit-case-assets/ebit-logo-exact.png"],
img[src$="/ebit-case-assets/ebit-logo-white.png"] { aspect-ratio: 150/73; }
img[src$="/ebit-case-assets/ebit-rays-exact.png"] { aspect-ratio: 413/269; }
img[src$="/ebit-case-assets/ebit-logo-exact-r2.png"],
img[src$="/ebit-case-assets/ebit-logo-white-r2.png"] { aspect-ratio: 3590/1748; }
img[src$="/ebit-case-assets/ebit-rays-exact-r2.png"] { aspect-ratio: 2176/1416; }
img[src$="/ebit-case-assets/interview.jpg"] { aspect-ratio: 800/791; }
img[src$="/ebit-case-assets/logo-directions-r2.jpg"] { aspect-ratio:  4272/3423; }
img[src$="/ebit-case-assets/glass-installation.jpg"] { aspect-ratio: 275/127; }
img[src$="/ebit-case-assets/night-banner.jpg"] { aspect-ratio: 1/3; }
img[src$="/ebit-case-assets/founding-service.jpg"] { aspect-ratio: 283/400; }
img[src$="/ebit-case-assets/church-at-light.jpg"] { aspect-ratio: 1201/1800; }
img[src$="/ebit-case-assets/light-band.jpg"] { aspect-ratio: 15/2; }