:root {
  --et-navy: #345172;
  --et-deep: #262261;
  --et-sky: #00AEEF;
  --et-sky-panel: #28AAE1;
  --et-orange: #F6891E;
  --et-green: #8CC63F;
  --et-pink: #EC008C;
  --et-gray: #939598;
  --et-ink: #1D2A37;
  --et-paper: #F6F6F2;
  --et-line: rgba(52, 81, 114, .18);
}

body[data-eyeglasses-travel-project='true'] .case__study__slices,
body[data-eyeglasses-travel-project='true'] .case__study__info {
  min-width: 0;
}

.et-scene {
  background: var(--et-paper);
  color: var(--et-ink);
  font-family: Arial, "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.et-scene *,
body[data-eyeglasses-travel-project='true'] .et-info-card * {
  box-sizing: border-box;
}

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

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

.et-scene-head,
.et-hero-copy {
  left: 5.2%;
  position: absolute;
  top: 7%;
  z-index: 8;
}

.et-scene-head > span,
.et-hero-copy > span,
.et-motion-caption > span,
.et-closing > span {
  display: block;
  font-size: clamp(8px, .7vw, 12px);
  font-weight: 700;
  letter-spacing: .15em;
  margin-bottom: 14px;
}

.et-scene-head h2 {
  font-size: clamp(26px, 3.15vw, 53px);
  font-weight: 520;
  letter-spacing: -.06em;
  line-height: 1.03;
  word-break: keep-all;
}

.et-light-head {
  color: #fff;
  text-shadow: 0 1px 12px rgba(18, 29, 38, .16);
}

.et-scene-note {
  bottom: 5.5%;
  font-size: clamp(11px, .86vw, 14px);
  font-weight: 650;
  left: 5.2%;
  letter-spacing: -.015em;
  line-height: 1.45;
  position: absolute;
  z-index: 8;
}

/* 01 Hero */
.et-hero {
  background: #EAEAE5;
}

.et-hero::before {
  background: linear-gradient(90deg, var(--et-orange), var(--et-green), var(--et-pink));
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  right: 50%;
  top: 0;
  z-index: 12;
}

.et-hero::after {
  background: linear-gradient(90deg, var(--et-navy), var(--et-sky));
  content: "";
  height: 6px;
  left: 50%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 12;
}

.et-hero-copy {
  top: 10%;
  width: 47%;
}

.et-hero-copy h1 {
  font-size: clamp(34px, 4.25vw, 72px);
  font-weight: 520;
  letter-spacing: -.068em;
  line-height: 1.01;
  word-break: keep-all;
}

.et-hero-copy p {
  font-size: clamp(11px, 1vw, 16px);
  line-height: 1.58;
  margin-top: 27px;
  word-break: keep-all;
}

.et-hero-photo {
  bottom: 0;
  left: 53%;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.et-hero-photo::after {
  background: linear-gradient(90deg, rgba(234, 234, 229, .98), rgba(234, 234, 229, 0) 26%);
  content: "";
  inset: 0;
  position: absolute;
}

.et-hero-photo img {
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
  width: 100%;
}

.et-hero-logo-card {
  align-items: center;
  background: rgba(255, 255, 255, .95);
  bottom: 7%;
  box-shadow: 0 24px 70px rgba(29, 42, 55, .12);
  display: flex;
  justify-content: center;
  padding: 3.1% 4.2%;
  position: absolute;
  right: 4.2%;
  width: 38%;
  z-index: 7;
}

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

.et-hero-axis {
  align-items: center;
  bottom: 7%;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 12px;
  left: 5.2%;
  letter-spacing: .14em;
  position: absolute;
  z-index: 7;
}

.et-hero-axis i {
  background: currentColor;
  height: 1px;
  opacity: .32;
  width: 48px;
}

/* 02 Focus */
.et-focus {
  background: #172634;
}

.et-focus-stage {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.et-focus-stage::after {
  background: linear-gradient(90deg, rgba(23, 38, 52, .92) 0%, rgba(23, 38, 52, .5) 42%, rgba(23, 38, 52, .1) 72%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 3;
}

.et-focus-blur {
  filter: blur(11px) saturate(.72);
  height: 110%;
  left: -2%;
  object-fit: cover;
  object-position: center 42%;
  opacity: .82;
  position: absolute;
  top: -5%;
  width: 104%;
}

.et-focus-lens {
  border-radius: 50%;
  height: 54%;
  overflow: hidden;
  position: absolute;
  right: 10%;
  top: 23%;
  width: 29%;
  z-index: 5;
}

.et-focus-lens img {
  height: 185%;
  left: -175%;
  max-width: none;
  object-fit: cover;
  object-position: center 42%;
  position: absolute;
  top: -42%;
  width: 358%;
}

.et-focus-ring {
  border: 3px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  height: 54%;
  position: absolute;
  right: 10%;
  top: 23%;
  width: 29%;
  z-index: 6;
}

.et-focus .et-scene-note {
  color: #fff;
}

/* 03 Structure */
.et-structure {
  background: #fff;
}

.et-structure-stage {
  bottom: 6%;
  left: 6%;
  position: absolute;
  right: 6%;
  top: 30%;
}

.et-grid {
  background-image:
    linear-gradient(rgba(52, 81, 114, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 81, 114, .075) 1px, transparent 1px);
  background-size: 34px 34px;
  inset: 0;
  position: absolute;
}

.et-structure-stage > img {
  left: 50%;
  position: absolute;
  top: 51%;
  transform: translate(-50%, -50%);
  width: 58%;
  z-index: 3;
}

.et-callout {
  color: var(--et-navy);
  font-size: clamp(11px, .74vw,12px);
  font-weight: 700;
  letter-spacing: .09em;
  position: absolute;
  white-space: nowrap;
  z-index: 5;
}

.et-callout i {
  background: currentColor;
  display: block;
  height: 1px;
  opacity: .38;
  position: absolute;
}

.et-callout-lens {
  bottom: 14%;
  left: 7%;
}

.et-callout-lens i {
  left: 0;
  top: -18px;
  transform: rotate(-18deg);
  transform-origin: left;
  width: 92px;
}

.et-callout-name {
  bottom: 7%;
  left: 47%;
}

.et-callout-name i {
  bottom: 23px;
  left: 50%;
  transform: rotate(90deg);
  transform-origin: left;
  width: 65px;
}

.et-callout-wing {
  right: 5%;
  top: 9%;
}

.et-callout-wing i {
  right: calc(100% + 12px);
  top: 50%;
  width: 92px;
}

/* 04 Variants */
.et-variants {
  background: #EEEFEA;
}

.et-variant-grid {
  bottom: 15%;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  left: 4.2%;
  position: absolute;
  right: 4.2%;
  top: 31%;
}

.et-variant {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 8%;
  position: relative;
}

.et-variant > span {
  font-size: clamp(7px, .64vw, 10px);
  font-weight: 700;
  left: 6%;
  letter-spacing: .13em;
  position: absolute;
  top: 7%;
}

.et-variant img {
  height: auto;
  width: 84%;
}

.et-variant-primary {
  background: #fff;
}

.et-variant-sky {
  background: var(--et-sky-panel);
  color: #fff;
}

.et-variant-navy {
  background: var(--et-deep);
  color: #fff;
}

.et-swatches {
  align-items: center;
  bottom: 6%;
  display: flex;
  gap: 9px;
  left: 5.2%;
  position: absolute;
}

.et-swatches i {
  background: var(--swatch);
  border-radius: 50%;
  height: clamp(16px, 1.9vw, 30px);
  width: clamp(16px, 1.9vw, 30px);
}

/* Motions */
.et-motion-scene {
  background: var(--et-paper);
}

.et-motion-scene video {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.et-motion-caption {
  color: var(--et-ink);
  left: 5.2%;
  pointer-events: none;
  position: absolute;
  top: 7%;
  z-index: 7;
}

.et-motion-caption h2 {
  font-size: clamp(18px, 2.2vw, 36px);
  font-weight: 540;
  letter-spacing: -.05em;
  line-height: 1;
}

/* 05 Journey */
.et-journey {
  background: #1B2A37;
}

.et-journey-photo {
  inset: 0;
  position: absolute;
}

.et-journey-photo::after {
  background: linear-gradient(90deg, rgba(19, 35, 48, .86), rgba(19, 35, 48, .1) 57%, rgba(19, 35, 48, .34));
  content: "";
  inset: 0;
  position: absolute;
}

.et-journey-photo img {
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  width: 100%;
}

.et-route {
  align-items: center;
  bottom: 11%;
  display: flex;
  left: 6%;
  position: absolute;
  right: 6%;
  z-index: 4;
}

.et-route i {
  background: rgba(255, 255, 255, .5);
  flex: 1;
  height: 1px;
}

.et-route b {
  background: var(--et-sky);
  border: 6px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .82);
  height: 14px;
  width: 14px;
}

.et-journey .et-scene-note {
  color: #fff;
  bottom: 5%;
}

/* 06 Applications */
.et-applications {
  background: #1B2A37;
}

.et-application-grid {
  bottom: 4.5%;
  display: grid;
  gap: 10px;
  grid-template-columns: 1.05fr .95fr;
  left: 4.2%;
  position: absolute;
  right: 4.2%;
  top: 27%;
}

.et-application-grid figure {
  background: #F0F0EB;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.et-application-grid img {
  flex: 1;
  height: 0;
  object-fit: cover;
  width: 100%;
}

.et-application-card img {
  object-position: center;
}

.et-application-sign img {
  object-position: center;
}

.et-application-grid figcaption {
  background: #fff;
  color: var(--et-ink);
  font-size: clamp(11px, .72vw, 12px);
  font-weight: 700;
  letter-spacing: .025em;
  padding: 14px 16px;
  word-break: keep-all;
}

/* 07 Illustration */
.et-illustration {
  background: #F1F0EB;
}

.et-illustration-stage {
  bottom: 4.2%;
  display: grid;
  gap: 10px;
  grid-template-columns: .95fr 1.05fr;
  left: 4.2%;
  position: absolute;
  right: 4.2%;
  top: 27%;
}

.et-illustration-stage figure {
  background: #fff;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.et-illustration-art {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 4%;
}

.et-illustration-art img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.et-illustration-photo img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.et-illustration-photo::after {
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  content: "";
  height: 52%;
  left: 24%;
  position: absolute;
  top: 24%;
  width: 42%;
}

.et-illustration-photo i {
  background: rgba(0, 174, 239, .9);
  height: 3px;
  left: 8%;
  position: absolute;
  right: 8%;
  top: 50%;
}

/* 08 Consistency */
.et-consistency {
  background: #1B2A37;
}

.et-consistency-grid {
  bottom: 4.2%;
  display: grid;
  gap: 8px;
  grid-template-columns: 1.2fr .8fr .8fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  left: 4.2%;
  position: absolute;
  right: 4.2%;
  top: 28%;
}

.et-consistency-grid figure {
  background: #fff;
  min-height: 0;
  overflow: hidden;
}

.et-consistency-grid img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.et-consistency-grid .tile-a {
  grid-row: 1 / 3;
}

.et-consistency-grid .tile-a img {
  object-position: center 42%;
}

.et-consistency-grid .tile-b {
  grid-column: 2 / 4;
}

.et-consistency-grid .tile-b img {
  object-position: center;
}

.et-consistency-grid .tile-c img {
  object-fit: contain;
  padding: 6%;
}

.et-consistency-grid .tile-d img {
  object-fit: contain;
  padding: 4%;
}

/* 09 Closing */
.et-closing {
  align-items: center;
  background: var(--et-deep);
  color: #fff;
  display: flex;
  justify-content: center;
}

.et-closing > span {
  left: 5.2%;
  margin: 0;
  position: absolute;
  top: 7%;
}

.et-closing-copy {
  left: 5.2%;
  position: absolute;
  top: 38%;
  width: 34%;
}

.et-closing-copy h2 {
  font-size: clamp(28px, 3.8vw, 64px);
  font-weight: 520;
  letter-spacing: -.065em;
  line-height: 1.02;
}

.et-closing-copy p {
  font-size: clamp(11px, 1vw, 16px);
  font-weight: 700;
  letter-spacing: .12em;
  margin-top: 22px;
}

.et-closing-logo {
  align-items: center;
  background: var(--et-paper);
  bottom: 8%;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .2);
  display: flex;
  justify-content: center;
  padding: 5.5% 6.5%;
  position: absolute;
  right: 5.2%;
  top: 8%;
  width: 52%;
}

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

.et-closing-colors {
  bottom: 8%;
  display: flex;
  gap: 7px;
  left: 5.2%;
  position: absolute;
}

.et-closing-colors i {
  border-radius: 50%;
  height: 12px;
  width: 12px;
}

.et-closing-colors i:nth-child(1) { background: var(--et-navy); border: 1px solid rgba(255,255,255,.45); }
.et-closing-colors i:nth-child(2) { background: var(--et-sky); }
.et-closing-colors i:nth-child(3) { background: var(--et-orange); }
.et-closing-colors i:nth-child(4) { background: var(--et-green); }
.et-closing-colors i:nth-child(5) { background: var(--et-pink); }

/* Information */
body[data-eyeglasses-travel-project='true'] .et-info-card {
  background: #F1F1ED;
  color: var(--et-ink);
}

body[data-eyeglasses-travel-project='true'] .et-info-card h2 {
  font-weight: 560;
  letter-spacing: -.035em;
}

body[data-eyeglasses-travel-project='true'] .et-info-card p {
  line-height: 1.58;
  word-break: keep-all;
}

@media (max-width: 1024px) {
  .et-scene-head h2 { font-size: clamp(24px, 4.4vw, 44px); }
  .et-hero-copy h1 { font-size: clamp(32px, 5.4vw, 56px); }
  .et-focus-lens,
  .et-focus-ring { right: 8%; width: 34%; }
  .et-structure-stage > img { width: 68%; }
}

@media (max-width: 656px) {
  .et-scene { aspect-ratio: auto !important; }

  .et-scene-head,
  .et-hero-copy {
    left: 7%;
    right: 7%;
    top: 7%;
    width: auto;
  }

  .et-scene-head > span,
  .et-hero-copy > span,
  .et-motion-caption > span,
  .et-closing > span {
    font-size: 7px;
    margin-bottom: 9px;
  }

  .et-scene-head h2 {
    font-size: 25px;
    max-width: 13em;
  }

  .et-scene-note {
    bottom: 5%;
    font-size: 11px;
    left: 7%;
    right: 7%;
  }

  .et-hero { min-height: 700px; }
  .et-hero-copy { top: 7.5%; }
  .et-hero-copy h1 { font-size: 36px; max-width: 9.5em; }
  .et-hero-copy p { font-size: 11px; margin-top: 18px; }
  .et-hero-photo { left: 0; top: 42%; }
  .et-hero-photo::after { background: linear-gradient(180deg, #EAEAE5 0%, rgba(234,234,229,.18) 31%, rgba(234,234,229,0) 60%); }
  .et-hero-photo img { object-position: 60% center; }
  .et-hero-logo-card { bottom: 7%; padding: 24px 26px; right: 5%; width: 70%; }
  .et-hero-axis { bottom: 2.3%; font-size: 11px; left: 7%; }

  .et-focus { min-height: 660px; }
  .et-focus-stage::after { background: linear-gradient(180deg, rgba(23,38,52,.94), rgba(23,38,52,.34) 52%, rgba(23,38,52,.15)); }
  .et-focus-blur { object-position: 54% center; }
  .et-focus-lens,
  .et-focus-ring { height: 260px; right: 7%; top: 48%; width: 260px; }
  .et-focus-lens img { height: 660px; left: -585px; top: -190px; width: 980px; }

  .et-structure { min-height: 650px; }
  .et-structure-stage { bottom: 9%; left: 5%; right: 5%; top: 34%; }
  .et-structure-stage > img { width: 94%; }
  .et-callout { font-size: 11px; }
  .et-callout-lens { bottom: 10%; left: 1%; }
  .et-callout-lens i { width: 56px; }
  .et-callout-name { bottom: 1%; left: 43%; }
  .et-callout-name i { width: 38px; }
  .et-callout-wing { right: 1%; top: 4%; }
  .et-callout-wing i { width: 52px; }

  .et-variants { min-height: 850px; }
  .et-variant-grid { bottom: 12%; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); left: 5%; right: 5%; top: 24%; }
  .et-variant { padding: 9%; }
  .et-variant img { width: 76%; }
  .et-variant > span { font-size: 7px; }
  .et-swatches { bottom: 4%; left: 7%; }

  .et-motion-scene {
    aspect-ratio: 16 / 9 !important;
    min-height: 0;
  }
  .et-motion-caption { left: 5%; top: 7%; }
  .et-motion-caption h2 { font-size: 15px; }

  .et-journey { min-height: 680px; }
  .et-journey-photo img { object-position: 62% center; }
  .et-journey-photo::after { background: linear-gradient(180deg, rgba(19,35,48,.9), rgba(19,35,48,.18) 55%, rgba(19,35,48,.4)); }
  .et-route { bottom: 10%; left: 7%; right: 7%; }

  .et-applications { min-height: 920px; }
  .et-application-grid { bottom: 4%; gap: 8px; grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); left: 5%; right: 5%; top: 23%; }
  .et-application-grid figcaption { font-size: 11px; padding: 10px 12px; }

  .et-illustration { min-height: 900px; }
  .et-illustration-stage { bottom: 4%; gap: 8px; grid-template-columns: 1fr; grid-template-rows: 1.05fr .95fr; left: 5%; right: 5%; top: 23%; }
  .et-illustration-photo::after { height: 58%; left: 23%; top: 21%; width: 50%; }

  .et-consistency { min-height: 900px; }
  .et-consistency-grid { bottom: 4%; grid-template-columns: 1fr 1fr; grid-template-rows: 1.35fr .8fr .8fr; left: 5%; right: 5%; top: 23%; }
  .et-consistency-grid .tile-a { grid-column: 1 / 3; grid-row: 1; }
  .et-consistency-grid .tile-b { grid-column: 1 / 3; grid-row: 2; }
  .et-consistency-grid .tile-c { grid-column: 1; grid-row: 3; }
  .et-consistency-grid .tile-d { grid-column: 2; grid-row: 3; }

  .et-closing { min-height: 640px; }
  .et-closing > span { left: 7%; top: 6%; }
  .et-closing-copy { left: 7%; top: 17%; width: 86%; }
  .et-closing-copy h2 { font-size: 34px; }
  .et-closing-copy p { font-size: 11px; margin-top: 14px; }
  .et-closing-logo { bottom: 12%; left: 5%; padding: 42px 28px; right: 5%; top: 42%; width: auto; }
  .et-closing-colors { bottom: 5%; left: 7%; }
}

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

/* Motion 03 caption stays legible while the aperture changes from navy to paper. */
.et-motion-caption-light {
  background: rgba(38, 34, 97, .88);
  color: #fff;
  padding: 13px 16px 14px;
}

@media (max-width: 656px) {
  .et-motion-caption-light {
    padding: 8px 10px 9px;
  }
}

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="https://kangdesign-portfolio.pages.dev/eyeglasses-travel/assets/photo-book-view.webp"],
img[src$="https://kangdesign-portfolio.pages.dev/eyeglasses-travel/assets/photo-glasses-book-r2.webp"] { aspect-ratio: 4272/2849; }
img[src$="https://kangdesign-portfolio.pages.dev/eyeglasses-travel/assets/illustration-eye-chart.webp"],
img[src$="https://kangdesign-portfolio.pages.dev/eyeglasses-travel/assets/photo-round-glasses.webp"] { aspect-ratio: 1/1; }
img[src$="/leaderin-case-assets-v2/symbol-final.svg"] { aspect-ratio: 37/24; }
img[src$="https://kangdesign-portfolio.pages.dev/eyeglasses-travel/assets/approved-logo.svg"] { aspect-ratio: 143/75; }
img[src$="https://kangdesign-portfolio.pages.dev/eyeglasses-travel/assets/photo-lens-chart-r2.webp"] { aspect-ratio: 2385/3600; }
img[src$="https://kangdesign-portfolio.pages.dev/eyeglasses-travel/assets/approved-logo-white.svg"] { aspect-ratio: 48/25; }
img[src$="https://kangdesign-portfolio.pages.dev/eyeglasses-travel/assets/business-card-backs.webp"] { aspect-ratio: 45/28; }
img[src$="https://kangdesign-portfolio.pages.dev/eyeglasses-travel/assets/signage-application.webp"] { aspect-ratio: 9/5; }
img[src$="https://kangdesign-portfolio.pages.dev/eyeglasses-travel/assets/signage-source.webp"] { aspect-ratio: 64/23; }