/* The photograph retains its original warm palette; only the text side is shaded. */
.external-home .ext-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  min-height: clamp(580px, 53vw, 820px);
  padding: clamp(64px, 5vw, 88px) 8vw 84px;
  background-color: #493023;
}
.external-home .ext-hero::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(25, 15, 9, .18), rgba(25, 15, 9, .06) 53%, transparent 72%), url("/assets/hero-warm-study.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.external-home .ext-hero-copy {
  position: relative;
  width: 100%;
  max-width: 760px;
}
.external-home .ext-hero h1 {
  margin: 0;
  color: #f5eddd;
  font-family: inherit;
  font-size: clamp(33.12px, 3.312vw, 58.88px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.04em;
  text-shadow: 0 2px 12px rgba(28, 16, 8, .16);
}
.external-home .ext-hero h1 span {
  display: block;
  white-space: nowrap;
}
.external-home .ext-hero-lead {
  max-width: 680px;
  margin: 26px 0 0;
  color: #ded4c5;
  font-family: Pretendard, "Noto Sans KR", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: -.015em;
  text-shadow: 0 1px 10px rgba(28, 16, 8, .2);
  word-break: keep-all;
}
@media (min-width: 641px) and (max-width: 980px) {
  .external-home .ext-hero {
    min-height: 560px;
    padding: 145px 8vw 100px;
  }
  .external-home .ext-hero::before { background-position: 38% center; }
  .external-home .ext-hero h1 { font-size: clamp(27.6px, 3.68vw, 35.88px); }
  .external-home .ext-hero-lead { max-width: 620px; font-size: 17px; }
}
/* Mobile uses the dedicated repository asset and keeps copy inside the brown wall. */
@media (max-width: 640px) {
  .external-home .ext-hero {
    min-height: clamp(420px, 123vw, 540px);
    padding: clamp(108px, 32vw, 170px) 6vw 48px;
  }
  .external-home .ext-hero::before {
    inset: 0;
    background-image: linear-gradient(90deg, rgba(25, 15, 9, .12), transparent 65%), url("/assets/hero-warm-study-mobile.webp");
    background-size: cover;
    background-position: left 42%;
    background-repeat: no-repeat;
  }
  .external-home .ext-hero-copy {
    max-width: 72%;
  }
  .external-home .ext-hero h1 {
    font-size: clamp(18px, 5vw, 23px);
    line-height: 1.55;
    letter-spacing: -.04em;
    text-shadow: 0 2px 8px rgba(20, 12, 7, .35);
  }
  .external-home .ext-hero h1 span,
  .external-home .ext-hero h1 span:last-child {
    max-width: none;
    white-space: nowrap;
    word-break: keep-all;
  }
}