:root {
  --ohsung-deep: #123b70;
  --ohsung-286: #2b5bb2;
  --ohsung-300: #1686c5;
  --ohsung-299: #18afe0;
  --ohsung-night: #071728;
  --ohsung-paper: #f4f7fb;
  --ohsung-ink: #10263c;
}

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

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

.ohsung-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;
}

.ohsung-scene-head span,
.ohsung-hero-copy span,
.ohsung-direction-grid article > span,
.ohsung-color-panel span,
.ohsung-application-copy > span,
.ohsung-banner-caption span,
.ohsung-signature > span {
  font-size: clamp(11px, .75vw, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ohsung-scene-head strong {
  font-size: clamp(18px, 2vw, 36px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.08;
  text-align: right;
}

.ohsung-hero { background: var(--ohsung-night) !important; color: #fff !important; }
.ohsung-hero::after { background: linear-gradient(90deg, rgba(7,23,40,.94), rgba(7,23,40,.15) 54%, rgba(7,23,40,.5)); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.ohsung-hero-copy { left: 5.2%; position: absolute; top: 18%; z-index: 6; }
.ohsung-hero-copy span { color: rgba(255,255,255,.72); }
.ohsung-hero-copy strong { display: block; font-size: clamp(28px, 4vw, 68px); font-weight: 400; letter-spacing: -.055em; line-height: 1.02; margin-top: 24px; }
.ohsung-motion-stage { height: 78%; position: absolute; right: 2%; top: 9%; width: 68%; z-index: 2; }
.ohsung-motion-stage .ohsung-rail { animation: ohsungRail 10s cubic-bezier(.18,.76,.2,1) 1 both; height: 12%; left: 8%; opacity: .82; position: absolute; transform-origin: right center; width: 75%; }
.ohsung-motion-stage .rail-a { background: var(--ohsung-286); top: 30%; transform: translateX(-32%) scaleX(.35); }
.ohsung-motion-stage .rail-b { animation-delay: .09s; animation-duration: calc(10s - .09s); background: var(--ohsung-300); top: 44%; transform: translateX(-24%) scaleX(.48); }
.ohsung-motion-stage .rail-c { animation-delay: .18s; animation-duration: calc(10s - .18s); background: var(--ohsung-299); top: 58%; transform: translateX(-40%) scaleX(.25); }
.ohsung-motion-stage .ohsung-part { animation: ohsungPart 10s cubic-bezier(.18,.76,.2,1) 1 both; background: currentColor; height: 5%; opacity: 0; position: absolute; width: 5%; }
.ohsung-motion-stage .part-1 { color: var(--ohsung-286); left: 6%; top: 16%; --end-x: 19%; --end-y: 34%; }
.ohsung-motion-stage .part-2 { animation-delay: .05s; animation-duration: calc(10s - .05s); color: var(--ohsung-300); left: 18%; top: 72%; --end-x: 31%; --end-y: 48%; }
.ohsung-motion-stage .part-3 { animation-delay: .1s; animation-duration: calc(10s - .1s); color: var(--ohsung-299); left: 30%; top: 22%; --end-x: 42%; --end-y: 62%; }
.ohsung-motion-stage .part-4 { animation-delay: .14s; animation-duration: calc(10s - .14s); color: var(--ohsung-286); left: 43%; top: 80%; --end-x: 53%; --end-y: 34%; }
.ohsung-motion-stage .part-5 { animation-delay: .18s; animation-duration: calc(10s - .18s); color: var(--ohsung-300); left: 52%; top: 12%; --end-x: 61%; --end-y: 48%; }
.ohsung-motion-stage .part-6 { animation-delay: .22s; animation-duration: calc(10s - .22s); color: var(--ohsung-299); left: 61%; top: 76%; --end-x: 68%; --end-y: 62%; }
.ohsung-motion-stage img { animation: ohsungLogo 10s cubic-bezier(.16,.76,.22,1) 1 both; filter: drop-shadow(0 20px 38px rgba(0,0,0,.3)); height: 64%; object-fit: contain; position: absolute; right: 1%; top: 18%; width: 44%; }
.ohsung-sequence { align-items: center; bottom: 8%; display: flex; gap: 12px; left: 5.2%; position: absolute; z-index: 6; }
.ohsung-sequence span { font-size: clamp(8px, .72vw, 12px); letter-spacing: .14em; }
.ohsung-sequence i { background: rgba(255,255,255,.58); height: 1px; width: 40px; }

.ohsung-directions { column-gap: clamp(18px, 2.6vw, 38px); display: grid; grid-template-columns: minmax(180px, .66fr) minmax(0, 2fr); padding: clamp(20px, 3.7vw, 64px); }
.ohsung-directions .ohsung-scene-head { display: block; left: 0; min-width: 0; position: relative; right: 0; top: 0; }
.ohsung-directions .ohsung-scene-head strong { display: block; margin-top: clamp(16px, 2vw, 28px); max-width: 8.4em; overflow-wrap: keep-all; text-align: left; }
.ohsung-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; }
.ohsung-direction-grid article { border-top: 1px solid rgba(16,38,60,.22); display: block; min-width: 0; padding-top: clamp(9px, 1vw, 16px); position: relative; }
.ohsung-direction-grid article.selected::after { background: var(--ohsung-299); content: ''; height: 4px; left: 0; position: absolute; right: 0; top: -2px; }
.ohsung-direction-grid img { background: #fff; height: clamp(150px, 19vw, 300px); margin-bottom: clamp(8px, 1vw, 15px); object-fit: contain; width: 100%; }
.ohsung-direction-grid article > span { color: var(--ohsung-300); display: block; padding-top: .35em; }
.ohsung-direction-grid h3 { font-size: clamp(16px, 1.5vw, 26px); font-weight: 400; letter-spacing: -.04em; line-height: 1.05; margin: 7px 0 0; overflow-wrap: keep-all; text-align: left; }

.ohsung-mark { background: #fff !important; }
.ohsung-mark-stage { height: clamp(250px, 36vw, 540px); left: 50%; position: absolute; top: 61%; transform: translate(-50%, -50%); width: min(70vw, 980px); }
.ohsung-mark-stage img { height: 100%; object-fit: contain; width: 100%; }
.ohsung-mark-stage .note { color: var(--ohsung-300); font-size: clamp(7px, .68vw, 11px); letter-spacing: .13em; position: absolute; }
.ohsung-mark-stage .note::before { background: currentColor; content: ''; height: 1px; position: absolute; width: 58px; }
.ohsung-mark-stage .circle { left: 2%; top: 26%; }
.ohsung-mark-stage .circle::before { right: -66px; top: .55em; }
.ohsung-mark-stage .o { left: 16%; top: 66%; }
.ohsung-mark-stage .o::before { right: -66px; top: .55em; }
.ohsung-mark-stage .m { right: 16%; top: 27%; }
.ohsung-mark-stage .m::before { left: -66px; top: .55em; }
.ohsung-mark-stage .layers { bottom: 12%; right: 1%; }
.ohsung-mark-stage .layers::before { left: -66px; top: .55em; }

.ohsung-construction { align-items: stretch; display: grid; grid-template-columns: 1.28fr .72fr; }
.ohsung-construction > img { height: 100%; object-fit: contain; width: 100%; }
.ohsung-construction > div { background: var(--ohsung-deep); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 4vw, 66px); }
.ohsung-construction > div span { font-size: clamp(9px, .75vw, 13px); letter-spacing: .13em; }
.ohsung-construction > div strong { font-size: clamp(24px, 3vw, 52px); font-weight: 400; letter-spacing: -.045em; line-height: 1.04; }

.ohsung-color { display: grid; grid-template-columns: repeat(3, 1fr); }
.ohsung-color-panel { color: #fff; display: flex; flex-direction: column; padding: clamp(18px, 2.5vw, 42px); }
.ohsung-color-panel.deep { background: var(--ohsung-286); }
.ohsung-color-panel.mid { background: var(--ohsung-300); }
.ohsung-color-panel.light { background: var(--ohsung-299); }
.ohsung-color-panel strong { font-size: clamp(18px, 2.2vw, 38px); font-weight: 400; letter-spacing: -.035em; margin-top: auto; }
.ohsung-color-panel em { font-size: 9px; font-style: normal; letter-spacing: .12em; margin-top: 12px; }

.ohsung-applications { align-items: stretch; display: grid; grid-template-columns: .62fr 1.38fr; padding: clamp(20px, 3.7vw, 64px); }
.ohsung-application-copy { align-self: start; padding-right: clamp(18px, 3vw, 50px); }
.ohsung-application-copy > span { color: var(--ohsung-300); }
.ohsung-application-copy strong { display: block; font-size: clamp(24px, 3vw, 52px); font-weight: 400; letter-spacing: -.045em; line-height: 1.04; margin-top: 22px; }
.ohsung-application-copy p { font-size: clamp(11px, 1vw, 16px); line-height: 1.5; margin-top: 28px; max-width: 32em; }
.ohsung-application-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1.15fr) minmax(0, .85fr); min-height: 0; }
.ohsung-application-grid img { background: #fff; height: 100%; min-height: 0; object-fit: contain; overflow: hidden; width: 100%; }
.ohsung-application-grid .wide { grid-column: 1 / -1; }

.ohsung-banner > img { height: 100%; object-fit: contain; width: 100%; }
.ohsung-banner-caption { background: rgba(7,23,40,.92); bottom: 0; color: #fff; left: 0; padding: clamp(16px, 2.8vw, 46px); position: absolute; width: min(48%, 640px); }
.ohsung-banner-caption strong { display: block; font-size: clamp(20px, 2.8vw, 48px); font-weight: 400; letter-spacing: -.04em; margin-top: 12px; }

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

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

@keyframes ohsungRail {
  0%, 5.12% { opacity: 0; transform: translateX(-42%) scaleX(.16); }
  14.08% { opacity: .86; }
  32%, 48.64% { opacity: .94; transform: translateX(0) scaleX(1); }
  57.6%, 100% { opacity: 0; transform: translateX(14%) scaleX(.85); }
}
@keyframes ohsungPart {
  0%, 5.12% { left: var(--start-x, initial); opacity: 0; transform: scale(.65); }
  11.52% { opacity: 1; }
  29.44%, 44.8% { left: var(--end-x); opacity: 1; top: var(--end-y); transform: scale(1); }
  52.48%, 100% { left: var(--end-x); opacity: 0; top: var(--end-y); transform: scale(.55); }
}
@keyframes ohsungLogo {
  0%, 27.52% { opacity: 0; transform: scale(.72) rotate(-4deg); }
  37.12%, 100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (max-width: 1024px) {
  body[data-ohsung-project='true'] .case__study__info__left,
  body[data-ohsung-project='true'] .case__study__info__right { grid-column: 1 / -1; }
  body[data-ohsung-project='true'] .ohsung-directions,
  body[data-ohsung-project='true'] .ohsung-applications { aspect-ratio: auto !important; }
  .ohsung-directions { display: block; min-height: 390px; }
  .ohsung-directions .ohsung-scene-head strong { max-width: 12em; }
  .ohsung-direction-grid { margin-top: 32px; }
  .ohsung-direction-grid img { height: 190px; }
  .ohsung-mark-stage { height: 66%; top: 64%; width: 92%; }
  .ohsung-applications { display: block; min-height: 640px; }
  .ohsung-application-copy { padding-right: 0; }
  .ohsung-application-copy strong { font-size: clamp(24px, 3.6vw, 38px); }
  .ohsung-application-copy p { margin-top: 18px; }
  .ohsung-application-grid { height: 310px; margin-top: 24px; }
}

@media (max-width: 656px) {
  body[data-ohsung-project='true'] .ohsung-directions,
  body[data-ohsung-project='true'] .ohsung-mark,
  body[data-ohsung-project='true'] .ohsung-signature { aspect-ratio: auto !important; min-height: 390px; }
  body[data-ohsung-project='true'] .ohsung-applications { aspect-ratio: auto !important; min-height: 540px; }
  .ohsung-hero-copy { left: 7%; top: 13%; }
  .ohsung-hero-copy strong { font-size: 28px; margin-top: 13px; }
  .ohsung-motion-stage { height: 64%; right: -4%; top: 27%; width: 88%; }
  .ohsung-motion-stage img { height: 50%; right: 6%; top: 27%; width: 46%; }
  .ohsung-sequence { bottom: 7%; left: 7%; }
  .ohsung-sequence i { width: 20px; }
  .ohsung-directions { display: block; }
  .ohsung-directions .ohsung-scene-head { display: block; }
  .ohsung-directions .ohsung-scene-head strong { font-size: 23px; margin-top: 16px; max-width: none; }
  .ohsung-direction-grid { gap: 8px; margin-top: 25px; }
  .ohsung-direction-grid img { height: 132px; }
  .ohsung-direction-grid article > span { font-size: 7px; }
  .ohsung-direction-grid h3 { font-size: 11px; }
  .ohsung-scene-head strong { max-width: 62%; }
  .ohsung-mark-stage { top: 64%; width: 92%; }
  .ohsung-mark-stage .note { display: none; }
  .ohsung-construction { grid-template-columns: 1fr 1fr; }
  .ohsung-construction > div { padding: 18px; }
  .ohsung-construction > div strong { font-size: 20px; }
  .ohsung-color-panel { padding: 13px 9px; }
  .ohsung-color-panel strong { font-size: 13px; }
  .ohsung-color-panel span, .ohsung-color-panel em { font-size: 6px; }
  .ohsung-applications { display: block; }
  .ohsung-application-copy strong { font-size: 24px; }
  .ohsung-application-copy p { font-size: 11px; margin-top: 14px; }
  .ohsung-application-grid { height: 250px; margin-top: 18px; }
  .ohsung-banner-caption { width: 66%; }
  .ohsung-signature > img { max-width: 82%; }
}

@media (prefers-reduced-motion: reduce) {
  .ohsung-motion-stage * { animation: none !important; }
  .ohsung-motion-stage .ohsung-rail { opacity: .85; transform: none; }
  .ohsung-motion-stage .ohsung-part { display: none; }
  .ohsung-motion-stage img { opacity: 1; transform: none; }
}

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/ohsung-case-assets/construction-grid-r2.jpg"],
img[src$="/ohsung-case-assets/application-window-r2.jpg"],
img[src$="/ohsung-case-assets/application-folder.jpg"],
img[src$="/ohsung-case-assets/application-package-r2.jpg"],
img[src$="/ohsung-case-assets/application-banner-r2.jpg"] { aspect-ratio: 225/164; }
img[src$="/ohsung-case-assets/proposal-01.jpg"],
img[src$="/ohsung-case-assets/proposal-02.jpg"],
img[src$="/ohsung-case-assets/proposal-03.jpg"] { aspect-ratio: 283/400; }
img[src$="/ohsung-case-assets/ohsung-symbol-exact.png"] { aspect-ratio: 71/69; }
img[src$="/ohsung-case-assets/ohsung-signature-exact.png"] { aspect-ratio: 567/173; }

/* 08 색상규정 지면 — 화면에 실은 별색 셋·인쇄값의 근거.
   ⚠ `.ohsung-scene img` 에는 폭·높이가 없다 → 로드 전 상자가 0 이 되고 lazy 가 안 터진다.
   ⚠ 「%」로 자리를 잡으면 좁은 폭에서 넘친다(bhi 판례) → 장면을 격자로. */
body[data-ohsung-project='true'] .ohsung-colour-plate {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 1.4cqw, 20px);
  padding: clamp(20px, 3.2vw, 52px);
}

body[data-ohsung-project='true'] .ohsung-colour-plate > .ohsung-scene-head {
  position: static;
  max-width: none;
}

body[data-ohsung-project='true'] .ohsung-colour-plate > figure {
  position: static;
  margin: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(6px, 1cqw, 14px);
  justify-items: center;
}

body[data-ohsung-project='true'] .ohsung-colour-plate > figure img {
  aspect-ratio: 1600 / 1165;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid rgba(20, 40, 80, .14);
}

body[data-ohsung-project='true'] .ohsung-colour-plate > figure figcaption {
  font-size: clamp(11px, 1.05cqw, 13px);
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
  word-break: keep-all;
}