/* ---------- scrolling frame ---------- */

.stage {
  flex: 1;
  min-height: 0;
  padding: 0 var(--frame-gutter-x) var(--frame-gutter-bottom);
}

.stage__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--frame-radius);
  /* 배경을 깔지 않는다. 둥근 모서리로 잘리는 가장자리에서 바탕색이 1px 테두리처럼 비친다.
     이미지 로딩 자리표시자는 각 섹션(.hero 등)이 직접 갖는다. */
  container-type: size;
}

/* PC: 스테이지 박스를 12% 줄이고 가운데에 놓는다. 높이는 화면 높이를 그대로 쓴다.
   헤더 바도 같은 폭으로 줄여 박스와 좌우를 맞추고, 히어로 타이틀은 줄어든 cqw만큼 보정해
   기존 크기를 유지한다. (main.css는 메인에서만 불러오므로 서브 헤더는 그대로다.) */
@media (min-width: 1025px) {
  .stage__frame {
    width: 88%;
    margin-inline: auto;
  }

  .site-header {
    width: calc((100% - 2 * var(--frame-gutter-x)) * 0.88);
    margin-inline: auto;
    /* 줄어든 바 안에서 좌우 여백을 또 주면 로고가 박스보다 100px 안쪽으로 들어간다.
       바 폭이 곧 스테이지 폭이므로 안쪽 여백은 0으로 두고 프레임 가장자리에 맞춘다. */
    padding-inline: 0;
  }

  /* 기본 규칙(아래쪽 .hero__title)보다 우선하도록 한 단계 더 좁혀 잡는다.
     35.16cqw ÷ 0.88 = 39.955cqw — 줄어든 프레임에서도 타이틀 실제 폭은 그대로다. */
  .stage__frame .hero__title {
    width: min(39.955cqw, 52.95cqh, 457px);
  }
}

.hero-slider[fs] {
  width: 100%;
  height: 100%;
}

/* FullScroll normally sizes itself to the viewport; inside the frame it fills the frame. */
.hero-slider[fs][fs-ready] {
  height: 100%;
  margin-block-start: 0;
}

.page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ---------- hero ---------- */

.hero {
  background: #d9d9d9;
  isolation: isolate;
}

.hero__media,
.hero__media picture {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
}

/* Wide, short frames crop from the top so the tower stays below the copy. */
@container (min-aspect-ratio: 1.7) {
  .hero__media img {
    object-position: center 65%;
  }
}

.hero__content {
  position: absolute;
  top: clamp(24px, 5.787cqh, 50px);
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  text-align: center;
}

.hero__eyebrow {
  margin: 0;
  color: #fff;
  font-size: clamp(12px, 2.083cqh, 18px);
  font-weight: 400;
  line-height: 1.222;
  letter-spacing: 0.2em;
  text-shadow: 0 1px 8px rgb(12 33 76 / 14%);
}

.hero__title {
  width: min(35.16cqw, 52.95cqh, 457px);
  margin: clamp(4px, 0.694cqh, 6px) 0 0;
}

.hero__title img,
.hero__title svg {
  display: block;
  width: 100%;
  height: auto;
}

.hero__desc {
  margin: clamp(10px, 2.315cqh, 20px) 0 0;
  color: var(--navy);
  font-size: clamp(12px, 1.852cqh, 16px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.hero__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: clamp(10px, 2.315cqh, 20px) 0 0;
  font-size: min(3.243cqh, 24px);
  line-height: 1.25;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.hero__brand strong {
  color: var(--navy);
  font-weight: 700;
}

.hero__brand-sep {
  color: #aab4bf;
  font-weight: 300;
}

.hero__brand-name {
  color: var(--muted);
  font-weight: 400;
}

/* ---------- about (section02) ---------- */

.about {
  background: #f2f2f2;
  text-align: center;
  --about-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.about__person {
  position: absolute;
  bottom: 0;
  left: -0.31%;
  width: 48.36cqh;
  height: auto;
}

.about__city {
  position: absolute;
  right: -0.08%;
  bottom: 0;
  width: 62.38cqh;
  height: auto;
}

.about__pattern {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  width: 57.75cqh;
  height: auto;
  /* 가운데 정렬은 auto 마진이 맡고, GSAP은 scaleX 연출만 한다. */
  margin-inline: auto;
}

.about__heading {
  position: absolute;
  top: 6.83cqh;
  left: 50%;
  z-index: 3;
  width: 57.75cqh;
  transform: translateX(-50%);
  text-align: center;
}

.about__eyebrow {
  margin: 0;
  color: #001649;
  font-size: 2.778cqh;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.about__title {
  margin: 1.157cqh 0 0;
  color: #001649;
  font-size: 6.019cqh;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.about__title span {
  color: #6b777f;
}

.about__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.about__glow {
  position: absolute;
  top: 37.38cqh;
  left: 50%;
  z-index: 0;
  width: 70.6cqh;
  height: 36.46cqh;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgb(107 119 127 / 16%);
  filter: blur(7.176cqh);
  pointer-events: none;
}

.about__ring {
  position: absolute;
  top: 43.63cqh;
  left: 50%;
  z-index: 0;
  width: 57.87cqh;
  height: 24.07cqh;
  transform: translateX(-50%);
  border: 1px solid #bfbfbf;
  border-radius: 50%;
  pointer-events: none;
}

.about__track {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 가로 스와이프만 손에 따라오게 하고 세로 스크롤은 그대로 둔다. */
  touch-action: pan-y;
  user-select: none;
  transition: transform 850ms var(--about-ease);
}

.about__slide {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  transition:
    left 850ms var(--about-ease),
    top 850ms var(--about-ease),
    width 850ms var(--about-ease),
    height 850ms var(--about-ease),
    opacity 600ms ease,
    filter 600ms ease;
}

.about__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.about__slide.is-prev {
  top: 19.792cqh;
  left: calc(50% - 69.213cqh);
  z-index: 1;
  width: 33.912cqh;
  height: 31.481cqh;
  opacity: 0.6;
  filter: grayscale(1);
}

.about__slide.is-active {
  top: 21.412cqh;
  left: calc(50% - 32.986cqh);
  z-index: 3;
  width: 65.972cqh;
  height: 55.903cqh;
  opacity: 1;
  filter: none;
  cursor: default;
}

.about__slide.is-next {
  top: 19.792cqh;
  left: calc(50% + 35.301cqh);
  z-index: 1;
  width: 33.912cqh;
  height: 31.481cqh;
  opacity: 0.6;
  filter: grayscale(1);
}

.about__track .about__slide.is-wrapping {
  transition: none;
  opacity: 0;
}

.about__slide:not(.is-active):hover,
.about__slide:not(.is-active):focus-visible {
  opacity: 0.82;
  filter: grayscale(0.25);
}

.about__slide:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 4px;
}

/* 설명이 18px로 커지면서 37.87cqh 폭에서는 문장 끝 단어가 혼자 다음 줄로 떨어졌다.
   슬라이드 3장 중 가장 긴 줄(약 48cqh)이 수동 <br> 그대로 들어가는 폭으로 넓힌다. */
.about__copy {
  position: absolute;
  top: 77.315cqh;
  left: 50%;
  z-index: 2;
  width: 49cqh;
  transform: translate(-50%, 0);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.about.is-moving .about__copy {
  opacity: 0;
  transform: translate(-50%, 8px);
}

.about__label {
  margin: 0;
  color: #081a3c;
  font-size: 1.852cqh;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.about__slide-title {
  margin: 1.157cqh 0 0;
  color: #081a3c;
  font-size: 3.241cqh;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.about__desc {
  margin: 1.157cqh 0 0;
  color: #6b777f;
  font-size: min(2.432cqh, 18px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.04em;
  word-break: keep-all;
}

.about__arrows {
  display: none;
}

.about__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgb(8 26 60 / 8%);
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
  color: #081a3c;
  box-shadow: 0 6px 16px rgb(8 26 60 / 12%);
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.about__arrow:hover,
.about__arrow:focus-visible {
  background: #fff;
  transform: scale(1.06);
}

.about__arrow:active {
  transform: scale(0.96);
}

.about__arrow svg {
  width: 18px;
  height: 18px;
}

/* ---------- premium (section03) ---------- */

.premium {
  --premium-navy: #001649;
  --premium-gray: #6b777f;
  --premium-desc: #888;
  --premium-line: #ddd;
  background: #f2f2f2;
  text-align: center;
}

/* 가운데 정렬은 transform이 아니라 양쪽 inset + auto 마진으로 잡는다.
   GSAP이 transform을 애니메이션해도 중심이 풀리지 않는다. */
.premium__tab {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  width: 28.704cqh;
  height: 4.63cqh;
  margin: 0 auto;
  border-radius: 0 0 1.852cqh 1.852cqh;
  background: var(--premium-navy);
  color: #fff;
  font-size: 1.852cqh;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.premium__tab strong {
  font-weight: 700;
}

.premium__logo {
  position: absolute;
  top: 10.417cqh;
  right: 0;
  left: 0;
  z-index: 2;
  width: 25.926cqh;
  height: auto;
  margin-inline: auto;
}

.premium__title {
  position: absolute;
  top: 16.204cqh;
  right: 0;
  left: 0;
  z-index: 2;
  width: 54.28cqh;
  margin: 0 auto;
  color: var(--premium-navy);
  font-size: 6.019cqh;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.premium__title span {
  color: var(--premium-gray);
}

.premium__grid {
  position: absolute;
  top: 31.83cqh;
  left: 50%;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: min(117.13cqh, 90cqw);
  height: 62cqh;
  column-gap: 6.522%;
  row-gap: 12.326%;
  transform: translateX(-50%);
}

.premium__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.premium__lines i {
  position: absolute;
  display: block;
  background: var(--premium-line);
}

/* 세로선은 열 경계가 아니라 열 사이 간격(column-gap)의 한가운데에 놓는다. */
.premium__lines i:nth-child(1) {
  top: 0;
  bottom: 0;
  left: calc((100% - 2 * 6.522%) / 3 + 0.5 * 6.522%);
  width: 1px;
}

.premium__lines i:nth-child(2) {
  top: 0;
  bottom: 0;
  left: calc(2 * (100% - 2 * 6.522%) / 3 + 1.5 * 6.522%);
  width: 1px;
}

.premium__lines i:nth-child(3) {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
}

.premium__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.premium__label {
  margin: 0;
  color: var(--premium-navy);
  font-size: 1.505cqh;
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: -0.04em;
}

/* 아이콘 SVG에 원이 이미 들어 있어 배경 원은 두지 않는다. */
.premium__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.574cqh;
  height: 11.574cqh;
  margin-top: 1.157cqh;
}

.premium__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.premium__item-title {
  margin: 1.157cqh 0 0;
  color: var(--premium-navy);
  font-size: min(2.703cqh, 20px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.04em;
}

.premium__desc {
  margin: 1.157cqh 0 0;
  color: var(--premium-desc);
  font-size: min(2.432cqh, 18px);
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: -0.04em;
  word-break: keep-all;
}

.premium__item.is-gray .premium__label,
.premium__item.is-gray .premium__item-title {
  color: var(--premium-gray);
}

/* PC: 박스가 좌우로 좁아져도 양옆 슬라이드가 프레임 밖으로 잘리지 않게 붙여 준다. */
@media (min-width: 1025px) {
  .about__slide.is-prev {
    left: max(0.926cqh, calc(50% - 69.213cqh));
  }

  .about__slide.is-next {
    left: min(calc(50% + 35.301cqh), calc(100% - 34.838cqh));
  }
}

/* ---------- location (section04): 지도 → 카드 세로 페이지 ---------- */

.location {
  background: #f2f2f2;
}

.location__panel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f2f2f2;
}

.location__pattern {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  width: 57.75cqh;
  height: auto;
  margin-inline: auto;
}

.location__heading {
  position: absolute;
  top: 10.417cqh;
  right: 0;
  left: 0;
  z-index: 2;
  width: min(73.958cqh, calc(100% - 48px));
  margin-inline: auto;
  text-align: center;
}

.location__eyebrow {
  margin: 0;
  color: #001649;
  font-size: 2.778cqh;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.location__eyebrow span {
  color: #6a767f;
}

.location__title {
  margin: 1.157cqh 0 0;
  color: #001649;
  font-size: 6.019cqh;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.location__title span {
  color: #6a767f;
}

.location__map {
  position: absolute;
  top: 26.042cqh;
  right: 0;
  left: 0;
  z-index: 1;
  width: min(125.116cqh, 92cqw);
  aspect-ratio: 1081 / 609;
  margin: 0 auto;
}

.location__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location__cards {
  position: absolute;
  top: 8.333cqh;
  left: 50%;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: min(117.13cqh, 92cqw);
  /* 카드 글자가 커진 만큼 행 높이를 확보한다. */
  height: 87cqh;
  column-gap: 6.621%;
  row-gap: 8.333%;
  transform: translateX(-50%);
}

.location__cards::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 0;
  height: 1px;
  background: #ddd;
}

.location__cards::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 8.611%;
  left: 50%;
  z-index: 0;
  width: 1px;
  background: #ddd;
}

.location__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.location__card-media {
  position: relative;
  flex: none;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 0 20px 0 20px;
}

.location__card-cut {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 5px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.location__card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 472 / 234;
  object-fit: cover;
  border-radius: inherit;
}

.location__card-content {
  display: flex;
  align-items: center;
  gap: 2.315cqh;
  min-height: 9.259cqh;
  margin-top: 1.852cqh;
}

.location__card-icon {
  flex: 0 0 7.639cqh;
  width: 7.639cqh;
  height: 7.639cqh;
}

/* 폭을 cqh로 고정하면 좁아진 카드에서 설명이 강제로 접히고 카드 높이를 넘긴다.
   남은 폭을 모두 쓰게 해서 줄 수를 최소로 둔다. */
.location__card-copy {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.location__card-title {
  margin: 0;
  color: #001649;
  font-size: min(2.703cqh, 20px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.04em;
}

.location__card-desc {
  margin: 1.157cqh 0 0;
  color: #888;
  font-size: min(2.432cqh, 18px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.04em;
  word-break: keep-all;
}

@media (min-width: 769px) and (max-width: 980px) {
  .location__card-icon {
    flex: 0 0 6.5cqh;
    width: 6.5cqh;
    height: 6.5cqh;
  }

  .location__card-copy {
    width: auto;
  }

  .location__card-content {
    gap: 1cqh;
  }
}

@media (max-width: 768px) {
  .stage {
    padding: 12px 16px 8px;
  }

  .stage__frame {
    height: 100%;
    border-radius: 20px;
  }

  .hero__media img {
    object-position: center;
  }

  .hero__content {
    top: clamp(20px, 3vh, 64px);
    padding: 0 16px;
  }

  .hero__eyebrow {
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.16em;
  }

  .hero__title {
    width: min(68vw, 300px);
    margin-top: 6px;
  }

  .hero__desc {
    margin-top: 4px;
    color: #fff;
    font-size: 13px;
    line-height: 1.55;
    text-shadow: 0 1px 10px rgb(12 33 76 / 22%);
  }

  .hero__brand {
    gap: 6px;
    margin-top: 16px;
    font-size: 22px;
  }

  /* .hero__brand strong {
    color: #fff;
  } */

  .hero__brand-sep {
    color: rgb(255 255 255 / 45%);
  }

  .hero__brand-name {
    color: rgb(255 255 255 / 80%);
  }
}

/* ---------- about mobile: fixed frame with arrow controls ---------- */

@media (max-width: 768px) {
  .about {
    --about-active-w: min(78cqw, 46cqh);
    --about-active-h: calc(var(--about-active-w) * 483 / 570);
    --about-side-w: calc(var(--about-active-w) * 293 / 570);
    --about-side-h: calc(var(--about-side-w) * 272 / 293);
    --about-top: clamp(124px, 19cqh, 145px);
  }

  .about__person {
    display: none;
  }

  .about__city {
    right: -12px;
    bottom: 0;
    width: 58vw;
    opacity: 0.22;
  }

  .about__pattern {
    width: 200px;
  }

  .about__heading {
    top: 28px;
    width: 100%;
    padding: 0 20px;
  }

  .about__eyebrow {
    font-size: 13px;
    line-height: 1.4;
  }

  .about__title {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.25;
    white-space: normal;
  }

  .about__glow {
    top: calc(var(--about-top) + var(--about-active-w) * 0.242);
    width: calc(var(--about-active-w) * 1.07);
    height: calc(var(--about-active-h) * 0.652);
    filter: blur(5.5cqw);
  }

  .about__ring {
    top: calc(var(--about-top) + var(--about-active-w) * 0.337);
    width: calc(var(--about-active-w) * 0.877);
    height: calc(var(--about-active-h) * 0.43);
  }

  .about__slide.is-prev {
    top: calc(var(--about-top) - var(--about-active-w) * 0.0246);
    left: calc(50% - var(--about-active-w) * 1.0491);
    width: var(--about-side-w);
    height: var(--about-side-h);
  }

  .about__slide.is-active {
    top: var(--about-top);
    left: calc(50% - var(--about-active-w) / 2);
    width: var(--about-active-w);
    height: var(--about-active-h);
    pointer-events: none;
  }

  .about__slide.is-next {
    top: calc(var(--about-top) - var(--about-active-w) * 0.0246);
    left: calc(50% + var(--about-active-w) * 0.5351);
    width: var(--about-side-w);
    height: var(--about-side-h);
  }

  .about__copy {
    top: calc(var(--about-top) + var(--about-active-h) + 4cqh);
    width: min(330px, calc(100% - 40px));
    padding: 0 20px;
    transform: translateX(-50%);
  }

  .about__label {
    font-size: 12px;
  }

  .about__slide-title {
    margin-top: 6px;
    font-size: 21px;
  }

  .about__desc {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
  }

  .about__arrows {
    position: absolute;
    top: calc(var(--about-top) + var(--about-active-h) / 2);
    left: 6px;
    right: 6px;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
  }
}

/* ---------- premium mobile: 2 x 3 compact board ---------- */

@media (max-width: 768px) {
  .premium__tab {
    width: 156px;
    height: 28px;
    border-radius: 0 0 12px 12px;
    font-size: 10px;
  }

  .premium__logo {
    top: 44px;
    width: 156px;
  }

  .premium__title {
    top: 82px;
    width: calc(100% - 40px);
    font-size: 24px;
    line-height: 1.2;
    white-space: normal;
  }

  .premium__grid {
    top: 150px;
    right: 16px;
    bottom: 24px;
    left: 16px;
    width: auto;
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    column-gap: 8px;
    row-gap: 0;
    transform: none;
  }

  .premium__lines i:nth-child(1) {
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: auto;
  }

  .premium__lines i:nth-child(2) {
    top: 33.333%;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }

  .premium__lines i:nth-child(3) {
    top: 66.666%;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }

  .premium__item {
    justify-content: center;
  }

  .premium__label {
    font-size: 9px;
    line-height: 1.2;
  }

  .premium__badge {
    width: 58px;
    height: 58px;
    margin-top: 6px;
  }

  .premium__item-title {
    margin-top: 6px;
    font-size: 13px;
  }

  .premium__desc {
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.45;
  }
}

/* ---------- location mobile: heading over a 2 x 2 point grid ---------- */

@media (max-width: 768px) {
  .location__pattern {
    width: 200px;
  }

  .location__heading {
    top: 28px;
    width: 100%;
    padding: 0 20px;
  }

  .location__eyebrow {
    font-size: 13px;
    line-height: 1.4;
  }

  .location__title {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.25;
    white-space: normal;
  }

  /* 가로 슬라이드가 되면 Swiper의 .swiper-slide{display:block}이 이 규칙을 덮어써
     지도가 위로 붙는다. 특이도를 한 단계 올려 flex 가운데 정렬을 지킨다. */
  .location .location__panel--map {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
  }

  .location__map {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    flex: 0 0 auto;
    width: 116%;
    /* 폭이 화면보다 16% 넓으므로 좌우 음수 마진으로 양쪽을 똑같이 넘기게 한다. */
    margin: 0 -8%;
  }

  .location__cards {
    top: 40px;
    right: 16px;
    bottom: 40px;
    left: 16px;
    width: auto;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 24px;
    transform: none;
  }

  .location__cards::after {
    top: 0;
    bottom: 0;
    left: 50%;
  }

  .location__card {
    height: 100%;
  }

  .location__card-media {
    flex: 1;
    min-height: 0;
    border-radius: 0 12px 0 12px;
  }

  .location__card-cut {
    padding: 3px 5px;
    font-size: 10px;
  }

  .location__card-image {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .location__card-content {
    gap: 8px;
    min-height: 0;
    margin-top: 10px;
  }

  .location__card-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
  }

  .location__card-copy {
    width: auto;
    flex: 1;
  }

  .location__card-title {
    font-size: 12px;
    line-height: 1.25;
  }

  .location__card-desc {
    margin-top: 4px;
    font-size: 9.5px;
    line-height: 1.4;
  }
}

@media (min-width: 601px) and (max-width: 768px) {
  .location__map {
    width: 100%;
    margin-inline: 0;
  }
}

@media (max-width: 768px) and (max-height: 640px) {
  .about {
    --about-active-w: min(78cqw, 42cqh);
  }

  .about__city {
    display: none;
  }

  .premium__tab {
    width: 132px;
    height: 22px;
    border-radius: 0 0 9px 9px;
    font-size: 8.5px;
  }

  .premium__logo {
    top: 32px;
    width: 124px;
  }

  .premium__title {
    top: 60px;
    font-size: 19px;
  }

  .premium__grid {
    top: 100px;
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .premium__label {
    font-size: 8px;
  }

  .premium__badge {
    width: 42px;
    height: 42px;
    margin-top: 4px;
  }

  .premium__item-title {
    margin-top: 4px;
    font-size: 11px;
  }

  .premium__desc {
    margin-top: 4px;
    font-size: 8.5px;
    line-height: 1.4;
  }

  .location__heading {
    top: 20px;
  }

  .location__eyebrow {
    font-size: 11px;
  }

  .location__title {
    margin-top: 4px;
    font-size: 20px;
  }

  .location__panel--map {
    padding-top: 82px;
  }

  .location__map {
    width: 100%;
    margin-inline: 0;
  }

  .location__cards {
    top: 24px;
    right: 12px;
    bottom: 24px;
    left: 12px;
    column-gap: 10px;
    row-gap: 14px;
  }

  .location__card-media {
    border-radius: 0 10px 0 10px;
  }

  .location__card-content {
    gap: 6px;
    margin-top: 6px;
  }

  .location__card-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }

  .location__card-title {
    font-size: 11px;
  }

  .location__card-desc {
    margin-top: 2px;
    font-size: 8.5px;
  }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 560px) {
  .stage {
    padding: 12px 16px 8px;
  }

  .stage__frame {
    height: 100%;
    border-radius: 20px;
  }

  .hero__media img {
    object-position: center 58%;
  }

  .hero__content {
    top: 18px;
    padding: 0 20px;
  }

  .hero__eyebrow {
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.16em;
  }

  .hero__title {
    width: min(30vw, 190px);
    margin-top: 4px;
  }

  .hero__desc {
    margin-top: 8px;
    color: #fff;
    font-size: 11px;
    line-height: 1.45;
    text-shadow: 0 1px 10px rgb(12 33 76 / 22%);
  }

  .hero__brand {
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
  }

  .hero__brand strong {
    color: #fff;
  }

  .hero__brand-sep {
    color: rgb(255 255 255 / 45%);
  }

  .hero__brand-name {
    color: rgb(255 255 255 / 80%);
  }

  .about {
    --ls-active-w: min(24cqw, 58cqh);
    --ls-active-h: calc(var(--ls-active-w) * 483 / 570);
    --ls-side-w: calc(var(--ls-active-w) * 293 / 570);
    --ls-side-h: calc(var(--ls-side-w) * 272 / 293);
    --ls-top: clamp(84px, 30cqh, 150px);
  }

  .about__person {
    display: none;
  }

  .about__city {
    display: block;
    right: auto;
    bottom: 0;
    left: -6px;
    width: 20cqw;
    opacity: 0.18;
  }

  .about__pattern {
    width: 160px;
  }

  .about__heading {
    top: 14px;
    width: 100%;
    padding: 0 20px;
  }

  .about__eyebrow {
    font-size: 11px;
    line-height: 1.3;
  }

  .about__title {
    margin-top: 4px;
    font-size: 22px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .about__glow {
    top: calc(var(--ls-top) + var(--ls-active-w) * 0.242);
    left: 30%;
    width: calc(var(--ls-active-w) * 1.07);
    height: calc(var(--ls-active-h) * 0.652);
    filter: blur(3.5cqw);
  }

  .about__ring {
    top: calc(var(--ls-top) + var(--ls-active-w) * 0.337);
    left: 30%;
    width: calc(var(--ls-active-w) * 0.877);
    height: calc(var(--ls-active-h) * 0.43);
  }

  .about__slide.is-prev {
    top: calc(var(--ls-top) - var(--ls-active-w) * 0.0246);
    left: calc(30% - var(--ls-active-w) * 1.0491);
    width: var(--ls-side-w);
    height: var(--ls-side-h);
  }

  .about__slide.is-active {
    top: var(--ls-top);
    left: calc(30% - var(--ls-active-w) / 2);
    width: var(--ls-active-w);
    height: var(--ls-active-h);
    pointer-events: none;
  }

  .about__slide.is-next {
    top: calc(var(--ls-top) - var(--ls-active-w) * 0.0246);
    left: calc(30% + var(--ls-active-w) * 0.5351);
    width: var(--ls-side-w);
    height: var(--ls-side-h);
  }

  .about__copy {
    top: calc(var(--ls-top) + var(--ls-active-h) / 2);
    left: 68%;
    width: min(300px, 30cqw);
    padding: 0;
    transform: translate(-50%, -50%);
  }

  .about.is-moving .about__copy {
    transform: translate(-50%, calc(-50% + 8px));
  }

  .about__label {
    font-size: 11px;
  }

  .about__slide-title {
    margin-top: 4px;
    font-size: 19px;
  }

  .about__desc {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.45;
  }

  .about__arrows {
    position: absolute;
    top: calc(var(--ls-top) + var(--ls-active-h) / 2);
    left: calc(30% - var(--ls-active-w) / 2 - 50px);
    right: auto;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    width: calc(var(--ls-active-w) + 100px);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .premium__tab {
    width: clamp(150px, 50cqh, 236px);
    height: clamp(22px, 7cqh, 34px);
    border-radius: 0 0 10px 10px;
    font-size: clamp(9px, 2.7cqh, 13px);
  }

  .premium__logo {
    top: clamp(26px, 8cqh, 38px);
    width: clamp(124px, 38cqh, 180px);
  }

  .premium__title {
    top: clamp(50px, 16cqh, 76px);
    width: 100%;
    font-size: clamp(20px, 6.3cqh, 30px);
    line-height: 1.2;
    white-space: nowrap;
  }

  .premium__grid {
    top: clamp(80px, 26cqh, 124px);
    right: 24px;
    bottom: 14px;
    left: 24px;
    width: auto;
    height: auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 0;
    transform: none;
  }

  .premium__lines i:nth-child(1) {
    top: 0;
    right: auto;
    bottom: 0;
    left: calc(33.333% - clamp(10px, 3cqw, 28px) / 6);
    width: 1px;
    height: auto;
  }

  .premium__lines i:nth-child(2) {
    top: 0;
    right: auto;
    bottom: 0;
    left: calc(66.666% + clamp(10px, 3cqw, 28px) / 6);
    width: 1px;
    height: auto;
  }

  .premium__lines i:nth-child(3) {
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }

  .premium__item {
    justify-content: center;
  }

  .premium__label {
    font-size: clamp(8px, 2cqh, 10px);
    line-height: 1.2;
  }

  .premium__badge {
    width: clamp(38px, 13cqh, 64px);
    height: clamp(38px, 13cqh, 64px);
    margin-top: clamp(2px, 0.9cqh, 5px);
  }

  .premium__item-title {
    margin-top: clamp(2px, 0.9cqh, 5px);
    font-size: clamp(11px, 3.1cqh, 15px);
  }

  .premium__desc {
    margin-top: clamp(2px, 0.9cqh, 5px);
    font-size: clamp(9px, 2.1cqh, 10px);
    line-height: 1.4;
  }

  .location__pattern {
    width: clamp(120px, 30cqh, 170px);
  }

  .location__heading {
    top: clamp(18px, 5cqh, 30px);
    left: 7%;
    right: auto;
    width: 30%;
    margin-inline: 0;
    text-align: left;
  }

  .location__eyebrow {
    font-size: clamp(10px, 2.8cqh, 13px);
    line-height: 1.35;
  }

  .location__title {
    margin-top: clamp(3px, 1cqh, 6px);
    font-size: clamp(18px, 5.6cqh, 26px);
    line-height: 1.25;
    white-space: normal;
  }

  .location__panel--map {
    display: block;
    padding-top: 0;
  }

  /* 지도는 화면 세로 가운데에 놓는다. transform 대신 top으로 잡아 GSAP y 애니메이션과 겹치지 않게 한다.
     높이는 폭(56%)의 609/1081이라 반높이는 15.774cqw. */
  .location__map {
    position: absolute;
    top: calc(50% - 15.774cqw);
    right: 6%;
    left: auto;
    width: 56%;
    margin-inline: 0;
  }

  .location__cards {
    top: 50%;
    right: 6%;
    bottom: auto;
    left: 6%;
    width: auto;
    height: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
    column-gap: clamp(10px, 3cqw, 28px);
    row-gap: 0;
    transform: translateY(-50%);
  }

  .location__cards::before,
  .location__cards::after {
    display: none;
  }

  .location__card {
    padding-left: clamp(10px, 3cqw, 28px);
  }

  .location__card:first-child {
    padding-left: 0;
  }

  .location__card:not(:first-child) {
    border-left: 1px solid #ddd;
  }

  .location__card-media {
    height: clamp(70px, 25cqh, 140px);
    border-radius: 0 10px 0 10px;
  }

  .location__card-image {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .location__card-content {
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
    min-height: 0;
    margin-top: clamp(6px, 2.4cqh, 12px);
  }

  .location__card-icon {
    flex: 0 0 auto;
    width: 25%;
    max-width: clamp(26px, 9cqh, 44px);
    height: auto;
    aspect-ratio: 1;
  }

  .location__card-copy {
    width: auto;
    flex: 1;
    padding-left: clamp(5px, 1.4cqw, 12px);
  }

  .location__card-title {
    font-size: clamp(10px, 3cqh, 14px);
    line-height: 1.25;
  }

  .location__card-desc {
    margin-top: 2px;
    font-size: clamp(8px, 2.2cqh, 10px);
    line-height: 1.35;
  }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 360px) {
  .hero__content {
    top: 10px;
  }

  .hero__desc {
    margin-top: 6px;
    font-size: 10.5px;
    line-height: 1.4;
  }

  .hero__brand {
    margin-top: 6px;
  }
}

@media (orientation: landscape) and (max-width: 700px) and (max-height: 340px) {
  .premium__tab {
    width: 120px;
    height: 16px;
    border-radius: 0 0 7px 7px;
    font-size: 6.5px;
  }

  .premium__logo {
    top: 16px;
    width: 92px;
  }

  .premium__title {
    top: 36px;
    font-size: 14px;
  }

  .premium__grid {
    top: 58px;
    right: 12px;
    bottom: 8px;
    left: 12px;
  }

  .premium__label {
    font-size: 6.5px;
  }

  .premium__badge {
    width: 30px;
    height: 30px;
    margin-top: 2px;
  }

  .premium__item-title {
    margin-top: 2px;
    font-size: 8.5px;
  }

  .premium__desc {
    margin-top: 2px;
    font-size: 7px;
  }
}

@media (max-width: 380px) {
  .hero__title {
    width: min(72vw, 270px);
  }
}