:root {
  --dt-paper: #f7f4ea;
  --dt-paper-bright: #fffdf8;
  --dt-ink: #231f20;
  --dt-yellow: #da9d16;
  --dt-sky: #10a7e8;
  --dt-deep: #13437f;
  --dt-indigo: #1e1c6a;
  --dt-pale-blue: #e7f4f8;
  --dt-line: rgba(19, 67, 127, .18);
  --dt-shadow: 0 22px 54px rgba(24, 49, 77, .13);
  --dt-font: "Noto Sans CJK KR", "NanumSquare", "Apple SD Gothic Neo", Arial, sans-serif;
}

body[data-ddangtech-project="true"] {
  /* 지면 바탕 — 납품 대소봉투·현판 인쇄면의 실측값이다(그 면의 29~54%).
     예전 #D8D8D6 은 **실측이 아니었다** — 케이스 자산 6건 어디에도, 원본 폴더 어디에도 없는
     일반 회색이었다. 21C어학원 #F0F0F0 과 ΔE 8.6, 렌탈코리아 #BDC0C3 과 9.2 로 붙어 있었다.
     원본(`내용물10/후불로고/땅테크`)의 대소봉투·현판·명함을 다시 재서 이 값을 얻었다.
     기존 바탕 34개 중 최근접은 세라클린 #C8BE96 로 ΔE 11.3 — 12 에 못 미치지만
     걸려 있던 두 쌍(8.6·9.2)이 풀리고, 무엇보다 **실측값이 아닌 값을 실측값으로** 바꾼다.
     파랑 #009CDE 는 다보건설 #00ADEF 와 6.6, 금 #D2A20C 는 12.0 이지만 점유가 1% 라 못 쓴다.
     `.ai` 넷은 PDF 호환이 없어 렌더 불가였다. 납품 JPG 에서 쟀다. */
  background: #e4deb4;
}

body[data-ddangtech-project="true"] .case__study__slices,
.case__study__slices[data-ddangtech-mounted="true"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.case__study__slices[data-ddangtech-mounted="true"] .case__study__gallery__item,
.case__study__slices[data-ddangtech-mounted="true"] .case__study__gallery__item__inner {
  margin: 0;
  min-width: 0;
  padding: 0;
  width: 100%;
}

.dt-scene,
.dt-scene * {
  box-sizing: border-box;
}

.dt-scene {
  background: var(--dt-paper-bright);
  border: 0;
  border-radius: 0;
  color: var(--dt-ink);
  display: block;
  font-family: var(--dt-font);
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.dt-scene h1,
.dt-scene h2,
.dt-scene p,
.dt-scene figure,
.dt-scene figcaption {
  margin: 0;
}

.dt-scene img,
.dt-scene video,
.dt-scene svg {
  display: block;
  max-width: 100%;
}

.dt-kicker {
  align-items: center;
  color: rgba(35, 31, 32, .72);
  display: inline-flex;
  font-size: clamp(9px, .75vw, 12px);
  font-weight: 700;
  gap: .75em;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.dt-kicker b {
  color: var(--dt-deep);
  font-size: .92em;
  font-weight: 800;
  letter-spacing: .08em;
}

.dt-kicker-light {
  color: rgba(255, 255, 255, .68);
}

.dt-kicker-light b {
  color: var(--dt-yellow);
}

.dt-scene-head {
  left: 7.2%;
  position: absolute;
  top: 8.3%;
  width: 63%;
  z-index: 5;
}

.dt-scene-head h2 {
  color: var(--dt-ink);
  font-size: clamp(28px, 3.15vw, 54px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.24;
  margin-top: clamp(14px, 1.4vw, 24px);
  word-break: keep-all;
}

.dt-scene-head-light h2 {
  color: #fff;
}

/* 01 — Hero */
.dt-hero {
  background: var(--dt-paper);
}

.dt-hero-copy {
  left: 7.2%;
  position: absolute;
  top: 10.5%;
  width: 45%;
  z-index: 5;
}

.dt-hero-copy h1 {
  color: var(--dt-ink);
  font-size: clamp(38px, 4.45vw, 76px);
  font-weight: 720;
  letter-spacing: -.06em;
  line-height: 1.12;
  margin-top: clamp(18px, 1.8vw, 30px);
  word-break: keep-all;
}

.dt-hero-copy h1 em {
  color: var(--dt-deep);
  font-style: normal;
}

.dt-hero-copy p {
  color: rgba(35, 31, 32, .68);
  font-size: clamp(13px, 1.2vw, 19px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.75;
  margin-top: clamp(20px, 2.2vw, 36px);
  max-width: 31em;
  word-break: keep-all;
}

.dt-hero-logo {
  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;
  right: 5.8%;
  top: 20.5%;
  width: 40.5%;
  z-index: 4;
}

.dt-hero-logo img {
  height: auto;
  width: 100%;
}

.dt-hero-land {
  bottom: -1px;
  height: 51%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

/* 02 — Promise */
.dt-promise {
  background: #10365f;
  color: #fff;
  padding: 7.7% 7.2%;
}

.dt-promise > .dt-kicker {
  position: relative;
  z-index: 3;
}

.dt-promise-copy {
  left: 7.2%;
  position: absolute;
  top: 31%;
  width: 86%;
  z-index: 3;
}

.dt-promise-copy h2 {
  color: #fff;
  font-size: clamp(36px, 4.6vw, 78px);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1.27;
  word-break: keep-all;
}

.dt-promise-copy h2 em {
  color: var(--dt-yellow);
  font-style: normal;
  font-weight: 760;
}

.dt-promise-contour {
  bottom: -2%;
  height: 55%;
  left: -1%;
  position: absolute;
  width: 102%;
  z-index: 1;
}

.dt-promise-contour path {
  fill: none;
  stroke: rgba(255, 255, 255, .1);
  stroke-linecap: round;
  stroke-width: 2;
}

.dt-promise-contour circle {
  fill: var(--dt-yellow);
}

/* 03 — Structure */
.dt-structure {
  background: #fffdf8;
}

.dt-structure-stage {
  bottom: 2.8%;
  height: 64%;
  left: 4%;
  position: absolute;
  width: 92%;
}

.dt-structure-stage > img {
  height: auto;
  left: 50%;
  position: absolute;
  top: 18%;
  transform: translateX(-50%);
  width: 51%;
  z-index: 3;
}

.dt-structure-guides {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.dt-structure-guides path {
  fill: none;
  stroke: rgba(19, 67, 127, .33);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.dt-structure-guides circle {
  fill: var(--dt-yellow);
}

.dt-structure-label {
  position: absolute;
  z-index: 4;
}

.dt-structure-label small,
.dt-structure-label strong {
  display: block;
}

.dt-structure-label small {
  color: var(--dt-deep);
  font-size: clamp(8px, .65vw, 10px);
  font-weight: 800;
  letter-spacing: .16em;
}

.dt-structure-label strong {
  color: var(--dt-ink);
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: .55em;
}

.dt-structure-base {
  bottom: 15%;
  left: 6.5%;
}

.dt-structure-method {
  left: 10.5%;
  top: 13%;
}

.dt-structure-growth {
  right: 7.5%;
  text-align: right;
  top: 11.5%;
}

/* 04 — Curve */
.dt-horizon {
  background: #0f3159;
}

.dt-horizon-stage {
  bottom: 0;
  height: 69%;
  left: 0;
  position: absolute;
  width: 100%;
}

.dt-horizon-stage svg {
  height: 100%;
  width: 100%;
}

.dt-horizon-main,
.dt-horizon-faint {
  fill: none;
  stroke-linecap: round;
}

.dt-horizon-main {
  stroke-width: 18;
}

.dt-horizon-faint {
  stroke: rgba(255, 255, 255, .045);
  stroke-width: 74;
}

.dt-curve-label {
  color: rgba(255, 255, 255, .72);
  font-size: clamp(10px, .85vw, 13px);
  font-weight: 650;
  letter-spacing: .03em;
  position: absolute;
  z-index: 3;
}

.dt-curve-label::before {
  background: var(--dt-yellow);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 5px;
  margin-right: 8px;
  vertical-align: 2px;
  width: 5px;
}

.dt-curve-terrain {
  bottom: 15%;
  left: 15%;
}

.dt-curve-horizon {
  bottom: 38%;
  left: 47%;
}

.dt-curve-route {
  bottom: 25%;
  right: 12%;
}

/* Motion scenes */
.dt-motion-scene {
  background: #fff;
}

.dt-motion-scene video {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.dt-motion-meta {
  background: rgba(255, 255, 255, .92);
  left: clamp(16px, 3.4vw, 50px);
  padding: clamp(13px, 1.45vw, 22px) clamp(16px, 1.8vw, 28px);
  position: absolute;
  top: clamp(16px, 3.4vw, 50px);
  z-index: 5;
}

.dt-motion-meta h2 {
  color: var(--dt-ink);
  font-size: clamp(16px, 1.75vw, 28px);
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.2;
  margin-top: .7em;
  white-space: nowrap;
}

/* 06 — Color */
.dt-color {
  background: var(--dt-paper);
}

.dt-color-stage {
  bottom: 0;
  height: 72%;
  left: 0;
  position: absolute;
  width: 100%;
}

.dt-color-stage > svg {
  height: 100%;
  width: 100%;
}

.dt-color-arc {
  fill: none;
  stroke: var(--dt-deep);
  stroke-linecap: round;
  stroke-width: 22;
}

.dt-color-signal {
  fill: rgba(218, 157, 22, .15);
}

.dt-color-signal-core {
  fill: var(--dt-yellow);
}

.dt-color-city {
  fill: none;
  stroke: var(--dt-sky);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 18;
}

.dt-color-city rect:nth-of-type(1) {
  fill: var(--dt-yellow);
  stroke: none;
}

.dt-color-city rect:nth-of-type(2) {
  fill: var(--dt-deep);
  stroke: none;
}

.dt-color-label {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 3;
}

.dt-color-label i {
  border-radius: 50%;
  display: block;
  height: clamp(9px, .9vw, 14px);
  margin-bottom: .8em;
  width: clamp(9px, .9vw, 14px);
}

.dt-color-label small {
  color: rgba(35, 31, 32, 0.63);
  font-size: clamp(8px, .63vw, 10px);
  font-weight: 800;
  letter-spacing: .16em;
}

.dt-color-label strong {
  color: var(--dt-ink);
  font-size: clamp(12px, .95vw, 16px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: .5em;
  white-space: nowrap;
}

.dt-color-yellow {
  bottom: 8%;
  left: 13%;
}

.dt-color-yellow i {
  background: var(--dt-yellow);
}

.dt-color-sky {
  left: 51.5%;
  top: 10%;
}

.dt-color-sky i {
  background: var(--dt-sky);
}

.dt-color-deep {
  bottom: 9%;
  right: 9%;
}

.dt-color-deep i {
  background: var(--dt-deep);
}

/* 07 — Convergence */
.dt-convergence {
  background: #f4f0e5;
}

.dt-convergence-stage {
  bottom: 0;
  height: 70%;
  left: 0;
  position: absolute;
  width: 100%;
}

.dt-convergence-route {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.dt-convergence-route path {
  fill: none;
  stroke: rgba(19, 67, 127, .26);
  stroke-dasharray: 6 12;
  stroke-linecap: round;
  stroke-width: 2;
}

.dt-convergence-route circle {
  fill: var(--dt-yellow);
}

.dt-process-card {
  background: #fffdf8;
  box-shadow: var(--dt-shadow);
  overflow: hidden;
  position: absolute;
  z-index: 3;
}

.dt-process-card img {
  height: calc(100% - 40px);
  object-fit: contain;
  width: 100%;
}

.dt-process-card figcaption {
  align-items: center;
  color: rgba(35, 31, 32, .58);
  display: flex;
  font-size: clamp(9px, .72vw, 11px);
  font-weight: 650;
  height: 40px;
  letter-spacing: .02em;
  padding: 0 16px;
}

.dt-process-card figcaption b {
  color: var(--dt-deep);
  font-size: .88em;
  letter-spacing: .12em;
  margin-right: 10px;
}

.dt-process-elements {
  height: 35%;
  left: 4.5%;
  top: 29%;
  width: 52%;
}

.dt-process-lockup {
  height: 31%;
  left: 40%;
  top: 60%;
  width: 25%;
}

.dt-process-final {
  height: 37%;
  right: 5.5%;
  top: 18%;
  width: 27%;
}

.dt-process-final img {
  padding: 7% 10% 3%;
}

/* 08 — Graphic system */
.dt-graphic {
  background: var(--dt-pale-blue);
}

.dt-graphic-head {
  width: 68%;
}

.dt-graphic-stage {
  bottom: 0;
  height: 75%;
  left: 0;
  position: absolute;
  width: 100%;
}

.dt-graphic-stage svg {
  height: 100%;
  width: 100%;
}

.dt-grid-lines path {
  fill: none;
  stroke: rgba(19, 67, 127, .13);
  stroke-width: 2;
}

.dt-parcel {
  fill: rgba(255, 255, 255, .28);
  stroke: var(--dt-deep);
  stroke-linejoin: round;
  stroke-width: 4;
}

.dt-terrain-line {
  fill: none;
  stroke-linecap: round;
}

.dt-terrain-a {
  stroke: rgba(16, 167, 232, .92);
  stroke-width: 8;
}

.dt-terrain-b {
  stroke: rgba(19, 67, 127, .42);
  stroke-width: 3;
}

.dt-graphic-point {
  fill: var(--dt-yellow);
}

.dt-graphic-ring {
  fill: none;
  stroke: rgba(218, 157, 22, .38);
  stroke-width: 2;
}

.dt-graphic-label {
  color: rgba(19, 67, 127, 0.76);
  font-size: clamp(8px, .7vw, 11px);
  font-weight: 800;
  letter-spacing: .18em;
  position: absolute;
}

.dt-label-boundary {
  left: 28.5%;
  top: 41%;
}

.dt-label-survey {
  right: 13%;
  top: 30%;
}

.dt-label-terrain {
  bottom: 10%;
  left: 45%;
}

/* 10 — Touchpoints */
.dt-touchpoints {
  background: #f3efe4;
}

.dt-touch-head {
  width: 43%;
}

.dt-touch-stage {
  bottom: 1.5%;
  height: 77%;
  left: 0;
  position: absolute;
  width: 100%;
}

.dt-touch-card {
  background: #fff;
  box-shadow: var(--dt-shadow);
  overflow: hidden;
  position: absolute;
}

.dt-touch-card img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.dt-touch-card figcaption {
  background: rgba(255, 255, 255, .92);
  bottom: 0;
  color: rgba(35, 31, 32, .62);
  font-size: 11px;
  font-weight: 700;
  left: 0;
  letter-spacing: .12em;
  padding: 8px 11px;
  position: absolute;
}

.dt-touch-space {
  height: 65%;
  left: 4.5%;
  top: 19%;
  width: 65%;
  z-index: 1;
}

.dt-touch-sign {
  height: 35%;
  right: 4.5%;
  top: 3%;
  width: 34%;
  z-index: 3;
}

.dt-touch-envelope {
  bottom: 4%;
  height: 39%;
  right: 3.5%;
  width: 39%;
  z-index: 4;
}

/* 12 — Closing */
.dt-closing {
  background: #0f3159;
  color: #fff;
  padding: 7.6% 7.2%;
}

.dt-closing > .dt-kicker {
  position: relative;
  z-index: 5;
}

.dt-closing-copy {
  left: 7.2%;
  position: absolute;
  top: 26%;
  width: 42%;
  z-index: 5;
}

.dt-closing-copy h2 {
  color: #fff;
  font-size: clamp(34px, 4vw, 68px);
  font-weight: 680;
  letter-spacing: -.055em;
  line-height: 1.2;
  word-break: keep-all;
}

.dt-closing-copy p {
  color: rgba(255, 255, 255, .62);
  font-size: clamp(12px, 1.1vw, 17px);
  font-weight: 550;
  letter-spacing: -.02em;
  margin-top: clamp(20px, 2.1vw, 32px);
}

.dt-closing-logo {
  align-items: center;
  background: #fffdf8;
  display: flex;
  height: 48%;
  justify-content: center;
  padding: 5.5%;
  position: absolute;
  right: 5.8%;
  top: 22.5%;
  width: 44%;
  z-index: 4;
}

.dt-closing-logo img {
  height: auto;
  width: 100%;
}

.dt-closing-land {
  bottom: -1px;
  height: 43%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.dt-closing-land path {
  fill: none;
  stroke: rgba(16, 167, 232, .42);
  stroke-linecap: round;
  stroke-width: 18;
}

.dt-closing-land circle {
  fill: var(--dt-yellow);
}

/* Project information */
.case__study__info[data-ddangtech-mounted="true"] {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, .85fr);
  margin-top: 10px;
  min-width: 0;
  width: 100%;
}

.case__study__info[data-ddangtech-mounted="true"] > * {
  min-width: 0;
}

.dt-info-card {
  background: #fffdf8;
  color: var(--dt-ink);
  font-family: var(--dt-font);
  height: 100%;
  min-height: 330px;
  padding: clamp(34px, 4vw, 62px);
}

.dt-info-card h2 {
  color: var(--dt-deep);
  font-size: clamp(10px, .8vw, 13px);
  font-weight: 800;
  letter-spacing: .15em;
  margin: 0 0 clamp(22px, 2.3vw, 34px);
  text-transform: uppercase;
}

.dt-info-card p {
  color: rgba(35, 31, 32, .72);
  font-size: clamp(13px, 1.1vw, 17px);
  letter-spacing: -.025em;
  line-height: 1.8;
  margin: 0 0 1.3em;
  word-break: keep-all;
}

.dt-info-card .case__study__info__credits__inner h2:not(:first-child) {
  margin-top: 36px;
}

@media (max-width: 900px) {
  .dt-scene-head {
    width: 76%;
  }

  .dt-touch-head {
    width: 52%;
  }

  .dt-color-label strong {
    white-space: normal;
  }
}

@media (max-width: 656px) {
  body[data-ddangtech-project="true"] .case__study__slices,
  .case__study__slices[data-ddangtech-mounted="true"] {
    gap: 8px;
  }

  .dt-scene:not(.dt-motion-scene) {
    aspect-ratio: auto !important;
    min-height: 620px;
  }

  .dt-scene-head {
    left: 7%;
    top: 7%;
    width: 86%;
  }

  .dt-scene-head h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.28;
    margin-top: 16px;
  }

  .dt-kicker {
    font-size: 9px;
  }

  .dt-hero {
    min-height: 690px !important;
  }

  .dt-hero-copy {
    left: 7%;
    top: 7.5%;
    width: 86%;
  }

  .dt-hero-copy h1 {
    font-size: clamp(39px, 11.5vw, 50px);
    line-height: 1.13;
    margin-top: 18px;
  }

  .dt-hero-copy p {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 22px;
    max-width: 25em;
  }

  .dt-hero-logo {
    left: 13%;
    right: auto;
    top: 47%;
    width: 74%;
  }

  .dt-hero-land {
    height: 37%;
  }

  .dt-promise {
    min-height: 560px !important;
    padding: 8% 7%;
  }

  .dt-promise-copy {
    left: 7%;
    top: 28%;
    width: 86%;
  }

  .dt-promise-copy h2 {
    font-size: clamp(31px, 8.8vw, 39px);
    line-height: 1.42;
  }

  .dt-promise-contour {
    height: 44%;
  }

  .dt-structure {
    min-height: 690px !important;
  }

  .dt-structure-stage {
    bottom: 1%;
    height: 66%;
    left: 3%;
    width: 94%;
  }

  .dt-structure-stage > img {
    left: 7%;
    top: 23%;
    transform: none;
    width: 86%;
  }

  .dt-scene .dt-structure-guides {
    display: none;
  }

  .dt-structure-label small {
    font-size: 8px;
  }

  .dt-structure-label strong {
    font-size: 12px;
  }

  .dt-structure-base {
    bottom: 11%;
    left: 5%;
  }

  .dt-structure-method {
    left: 37%;
    top: auto;
    bottom: 2%;
  }

  .dt-structure-growth {
    right: 4%;
    text-align: right;
    top: auto;
    bottom: 12%;
  }

  .dt-horizon {
    min-height: 610px !important;
  }

  .dt-horizon-stage {
    height: 56%;
  }

  .dt-horizon-main {
    stroke-width: 13;
  }

  .dt-horizon-faint {
    stroke-width: 52;
  }

  .dt-curve-label {
    font-size: 11px;
  }

  .dt-curve-terrain {
    bottom: 12%;
    left: 9%;
  }

  .dt-curve-horizon {
    bottom: 35%;
    left: 39%;
  }

  .dt-curve-route {
    bottom: 24%;
    right: 7%;
  }

  .dt-motion-scene {
    aspect-ratio: 1440 / 900 !important;
    min-height: 0;
  }

  .dt-motion-meta {
    left: 10px;
    padding: 9px 11px 10px;
    top: 10px;
  }

  .dt-motion-meta .dt-kicker {
    font-size: 7px;
  }

  .dt-motion-meta h2 {
    font-size: 13px;
    margin-top: 6px;
  }

  .dt-color {
    min-height: 690px !important;
  }

  .dt-color-stage {
    height: 66%;
  }

  .dt-color-stage > svg {
    transform: scale(1.35) translateX(-3%);
    transform-origin: center 64%;
  }

  .dt-color-arc {
    stroke-width: 18;
  }

  .dt-color-label small {
    font-size: 7px;
  }

  .dt-color-label strong {
    font-size: 11px;
    max-width: 11em;
    white-space: normal;
  }

  .dt-color-yellow {
    bottom: 7%;
    left: 7%;
  }

  .dt-color-sky {
    left: 46%;
    top: 13%;
  }

  .dt-color-deep {
    bottom: 8%;
    right: 5%;
  }

  .dt-convergence {
    min-height: 790px !important;
  }

  .dt-convergence-stage {
    height: 70%;
  }

  .dt-scene .dt-convergence-route {
    display: none;
  }

  .dt-process-card img {
    height: calc(100% - 32px);
  }

  .dt-process-card figcaption {
    font-size: 9px;
    height: 32px;
    padding: 0 10px;
  }

  .dt-process-elements {
    height: 26%;
    left: 5%;
    top: 2%;
    width: 90%;
  }

  .dt-process-lockup {
    height: 30%;
    left: 5%;
    top: 35%;
    width: 55%;
  }

  .dt-process-final {
    bottom: 3%;
    height: 25%;
    right: 5%;
    top: auto;
    width: 68%;
  }

  .dt-process-final img {
    padding: 5% 8% 1%;
  }

  .dt-graphic {
    min-height: 650px !important;
  }

  .dt-graphic-head {
    width: 86%;
  }

  .dt-graphic-stage {
    height: 67%;
  }

  .dt-graphic-stage svg {
    transform: scale(1.25) translateX(-2%);
    transform-origin: center 60%;
  }

  .dt-graphic-label {
    font-size: 7px;
  }

  .dt-label-boundary {
    left: 18%;
    top: 45%;
  }

  .dt-label-survey {
    right: 7%;
    top: 34%;
  }

  .dt-label-terrain {
    bottom: 7%;
    left: 39%;
  }

  .dt-touchpoints {
    min-height: 820px !important;
  }

  .dt-touch-head {
    width: 86%;
  }

  .dt-touch-stage {
    bottom: 1%;
    height: 70%;
  }

  .dt-touch-space {
    height: 36%;
    left: 5%;
    top: 1%;
    width: 90%;
  }

  .dt-touch-sign {
    height: 25%;
    left: 17%;
    right: auto;
    top: 42%;
    width: 66%;
  }

  .dt-touch-envelope {
    bottom: 1%;
    height: 27%;
    left: 8%;
    right: auto;
    width: 84%;
  }

  .dt-touch-card figcaption {
    font-size: 11px;
    padding: 6px 8px;
  }

  .dt-closing {
    min-height: 670px !important;
    padding: 8% 7%;
  }

  .dt-closing-copy {
    left: 7%;
    top: 16%;
    width: 86%;
  }

  .dt-closing-copy h2 {
    font-size: clamp(34px, 9.5vw, 42px);
    line-height: 1.25;
  }

  .dt-closing-copy p {
    font-size: 13px;
    margin-top: 18px;
  }

  .dt-closing-logo {
    height: 29%;
    left: 8%;
    padding: 7%;
    right: auto;
    top: 49%;
    width: 84%;
  }

  .dt-closing-land {
    height: 29%;
  }

  .dt-closing-land path {
    stroke-width: 12;
  }

  .case__study__info[data-ddangtech-mounted="true"] {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
  }

  .dt-info-card {
    min-height: 0;
    padding: 34px 26px;
  }

  .dt-info-card p {
    font-size: 14px;
    line-height: 1.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dt-scene *,
  .dt-scene *::before,
  .dt-scene *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

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

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/leaderin-case-assets-v2/symbol-final.svg"] { aspect-ratio: 37/24; }
img[src$="https://kangdesign-portfolio.pages.dev/ddangtech/assets/approved-logo.svg"] { aspect-ratio: 97/56; }
img[src$="https://kangdesign-portfolio.pages.dev/ddangtech/assets/exploration-elements.webp"] { aspect-ratio: 5/2; }
img[src$="https://kangdesign-portfolio.pages.dev/ddangtech/assets/exploration-lockup-structure-r2.webp"] { aspect-ratio: 57/28; }
img[src$="https://kangdesign-portfolio.pages.dev/ddangtech/assets/installed-space.webp"] { aspect-ratio: 25/16; }
img[src$="https://kangdesign-portfolio.pages.dev/ddangtech/assets/signboard-logo-detail.webp"] { aspect-ratio: 9/5; }
img[src$="https://kangdesign-portfolio.pages.dev/ddangtech/assets/envelope-system.webp"] { aspect-ratio: 9/7; }