/* ========================================
   Intro Hero
======================================== */

.intro-hero {
  position: relative;

  width: 100%;
  padding-bottom: 8.75rem;

  overflow: hidden;

  background-color: var(--color-white, #fff);
}

/* ========================================
   Hero Visual
======================================== */

.intro-hero-visual {
  position: relative;

  /*
   * 첫 진입 시 브라우저 전체 화면
   */
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;

  margin-right: auto;
  margin-left: auto;

  overflow: hidden;

  background-color: #ecebe7;

  /*
   * GPU 가속을 사용해 크기 변화가
   * 부드럽게 처리되도록 합니다.
   */
  transform: translateZ(0);
  backface-visibility: hidden;

  will-change:
    width,
    height,
    transform;
}

/* ========================================
   Hero Image
======================================== */

.intro-hero-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  /*
   * 첫 화면에서는 이미지를 조금 확대합니다.
   * JavaScript에서 1로 줄어들며
   * Zoom Out 효과가 만들어집니다.
   */
  transform:
    translate3d(0, 0, 0)
    scale(1.14);

  backface-visibility: hidden;

  will-change:
    transform,
    filter;
}

/* ========================================
   Heading
======================================== */

.intro-hero-heading {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;

  width: calc(100% - 2.5rem);

  color: #111;

  text-align: center;

  transform: translate3d(-50%, -50%, 0);
}

.intro-hero-title {
  margin: 0;

  font-family:
    var(
      --font-shilla-culture,
      var(--font-shilla, "Shilla")
    ),
    serif;

  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;

  visibility: hidden;
  opacity: 0;

  word-break: keep-all;

  will-change:
    opacity,
    filter,
    transform;
}

/* ========================================
   Divider
======================================== */

.intro-hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;

  width: 100%;
  max-width: 25rem;

  color: #333;

  visibility: hidden;
  opacity: 0;

  will-change:
    opacity,
    filter,
    transform;
}

.intro-hero-line {
  display: block;
  flex: 1;

  height: 0.0625rem;

  background-color: currentColor;
}

.intro-hero-symbol {
  display: block;

  width: 0.75rem;
  height: 0.75rem;

  object-fit: contain;
}

/* ========================================
   Content
======================================== */

.intro-hero-content {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(31.25rem, 1fr);

  align-items: center;
  gap: 5rem;

  width: min(
    calc(100% - 2.5rem),
    91.25rem
  );

  margin: 5rem auto 0;

  visibility: hidden;
  opacity: 0;

  will-change:
    opacity,
    filter,
    transform;
}

/* ========================================
   Watermark
======================================== */

.intro-hero-watermark {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  min-width: 0;

  pointer-events: none;
}

.intro-hero-watermark-image {
  display: block;

  width: min(100%, 28.125rem);
  height: auto;

  opacity: 0.2;
}

/* ========================================
   Copy
======================================== */

.intro-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  gap: 2rem;

  width: 100%;
  max-width: 37.5rem;

  margin-left: auto;

  color: var(--color-text-primary, #333);

  font-family:
    var(
      --font-noto-serif-kr,
      "Noto Serif KR"
    ),
    serif;

  font-size: 1rem;
  font-weight: 400;
  line-height: 1.9;

  text-align: right;
  word-break: keep-all;
}

.intro-hero-copy p {
  width: 100%;
  margin: 0;

  text-align: right;
}



/* section 02 */
.intro-keyword {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 100vh;
  min-height: 100svh;

  overflow: hidden;

  background-color: #f7f6f3;
  background-image:
    url("../../images/intro/전시소개-섹션2.png");

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.intro-keyword-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: min(
    calc(100% - 2.5rem),
    91.25rem
  );

  min-height: 100vh;
  min-height: 100svh;

  margin: 0 auto;

  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
}

/* ========================================
   Heading
======================================== */

.intro-keyword-heading {
  margin-bottom: 4.5rem;

  text-align: center;
}

.intro-keyword-title {
  margin: 0;

  color: #111;

  font-family:
    var(
      --font-shilla-culture,
      var(--font-shilla, "Shilla")
    ),
    serif;

  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.4;

  opacity: 0;
  visibility: hidden;

  transform: scale(0.94);

  will-change:
    opacity,
    transform,
    filter;
}

/* ========================================
   Carousel
======================================== */

.intro-keyword-carousel.swiper {
  width: 100%;
  overflow: visible;
}

.intro-keyword-list.swiper-wrapper {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 1.25rem;

  width: 100%;
  height: auto;
}

/* ========================================
   Keyword Item
======================================== */

.intro-keyword-item.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  height: auto;

  margin: 0;

  text-align: center;

  opacity: 0;

  transform: translateY(2.5rem);

  will-change:
    opacity,
    transform;
}

.intro-keyword-visual {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 14rem;

  margin-bottom: 1.5rem;
}

/* ========================================
   Ink
======================================== */

.intro-keyword-ink {
  position: absolute;
  z-index: 0;

  top: 50%;
  left: 50%;

  display: block;

  width: 15rem;
  height: 15rem;

  object-fit: contain;

  opacity: 0;

  transform:
    translate3d(-50%, -50%, 0)
    scale(0.45);

  transform-origin: center center;

  pointer-events: none;

  will-change:
    opacity,
    transform;
}

/* ========================================
   Character
======================================== */

.intro-keyword-character {
  position: relative;
  z-index: 1;

  color: #222;

  font-family:
    var(--font-yuji-syuku, "Yuji Syuku"),
    serif;

  font-size: 6.875rem;
  font-weight: 400;
  line-height: 1;

  opacity: 0;

  transform: translateY(1.25rem);

  will-change:
    opacity,
    transform;
}

/* ========================================
   Keyword Name
======================================== */

.intro-keyword-name {
  margin: 0;

  color: #111;

  font-family:
    var(
      --font-shilla-culture,
      var(--font-shilla, "Shilla")
    ),
    serif;

  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
}

/* ========================================
   Keyword Description
======================================== */

.intro-keyword-description {
  margin-top: 1.5rem;

  color: #737373;

  font-family:
    var(
      --font-noto-serif-kr,
      "Noto Serif KR"
    ),
    serif;

  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;

  word-break: keep-all;
}

/* ========================================
   Progress
======================================== */

.intro-keyword-progress {
  display: none;
}


/* section03 */
.intro-philosophy {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 100vh;
  min-height: 100svh;

  overflow: hidden;

  background-color: #222;
}

/* ========================================
   Background
======================================== */

.intro-philosophy-image {
  position: absolute;
  z-index: 0;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.04);

  will-change: transform;
}

/* ========================================
   Overlay
======================================== */

.intro-philosophy-overlay {
  position: absolute;
  z-index: 1;

  inset: 0;

  display: block;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(0, 0, 0, 0.52) 38%,
      rgba(0, 0, 0, 0.3) 70%,
      rgba(0, 0, 0, 0.22) 100%
    );

  pointer-events: none;
}

/* ========================================
   Inner
======================================== */

.intro-philosophy-inner {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  width: min(
    calc(100% - 2.5rem),
    91.25rem
  );

  min-height: 100vh;
  min-height: 100svh;

  margin: 0 auto;

  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
}

/* ========================================
   Content
======================================== */

.intro-philosophy-content {
  width: 100%;
  max-width: 33.75rem;

  color: #fff;

  will-change:
    opacity,
    transform,
    filter;
}

/* ========================================
   Title
======================================== */

.intro-philosophy-title {
  margin: 0;

  color: #fff;

  font-family:
    var(
      --font-shilla-culture,
      var(--font-shilla, "Shilla")
    ),
    serif;

  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: -0.02em;
}

/* ========================================
   Divider
======================================== */

.intro-philosophy-divider {
  display: flex;
  align-items: center;
  gap: 0.25rem;

  width: 100%;

  margin-top: 2rem;
  margin-bottom: 2rem;

  color: rgba(255, 255, 255, 0.85);

  will-change:
    opacity,
    transform;
}

.intro-philosophy-line {
  display: block;
  flex: 1;

  height: 0.0625rem;

  background-color: currentColor;
}

.intro-philosophy-symbol {
  display: block;

  width: 0.75rem;
  height: 0.75rem;

  object-fit: contain;

  filter: brightness(0) invert(1);
}

/* ========================================
   Description
======================================== */

.intro-philosophy-description {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  color: rgba(255, 255, 255, 0.92);

  font-family:
    var(
      --font-noto-serif-kr,
      "Noto Serif KR"
    ),
    serif;

  font-size: 1rem;
  font-weight: 400;
  line-height: 1.9;

  word-break: keep-all;
}

.intro-philosophy-description p {
  margin: 0;
}

/* section04 */
.intro-route {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 100vh;
  min-height: 100svh;

  overflow: hidden;

  background-color: #f3f2ef;
}


/* ========================================
   Background
======================================== */

.intro-route-background {
  position: absolute;
  z-index: 0;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  pointer-events: none;
}


/* ========================================
   Inner
======================================== */

.intro-route-inner {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: min(
    calc(100% - 2.5rem),
    91.25rem
  );

  min-height: 100vh;
  min-height: 100svh;

  margin: 0 auto;

  padding-top: 6.25rem;
  padding-bottom: 6.25rem;
}


/* ========================================
   Content
======================================== */

.intro-route-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  text-align: center;
}


/* ========================================
   Title
======================================== */

.intro-route-title {
  margin: 0;

  color: #111;

  font-family:
    var(
      --font-shilla-culture,
      var(--font-shilla, "Shilla")
    ),
    serif;

  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.35;

  letter-spacing: -0.02em;

  word-break: keep-all;

  will-change:
    opacity,
    transform,
    filter;
}


/* ========================================
   Description
======================================== */

.intro-route-description {
  margin: 1.25rem 0 0;

  color: #333;

  font-family:
    var(
      --font-noto-serif-kr,
      "Noto Serif KR"
    ),
    serif;

  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;

  text-align: center;

  word-break: keep-all;

  will-change:
    opacity,
    transform,
    filter;
}


/* ========================================
   Scroll Indicator
======================================== */

.intro-route-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: 3rem;

  will-change:
    opacity,
    transform;
}


/* Scroll Line */

.intro-route-scroll-line {
  position: relative;

  display: block;

  width: 0.125rem;
  height: 5rem;

  overflow: hidden;

  background-color:
    rgba(17, 17, 17, 0.2);
}


/*
 * 실제 움직이는 검은 선
 */
.intro-route-scroll-line::after {
  position: absolute;

  top: -100%;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: #111;

  content: "";

  animation:
    intro-route-scroll-line-motion
    1.8s
    cubic-bezier(0.77, 0, 0.18, 1)
    infinite;
}


/* Scroll Text */

.intro-route-scroll-text {
  display: block;

  margin-top: 0.875rem;

  color: #222;

  font-family:
    var(
      --font-noto-serif-kr,
      "Noto Serif KR"
    ),
    serif;

  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;

  letter-spacing: 0.18em;
}


/* ========================================
   Scroll Animation
======================================== */

@keyframes intro-route-scroll-line-motion {

  0% {
    transform:
      translateY(0);
  }

  45% {
    transform:
      translateY(100%);
  }

  55% {
    transform:
      translateY(100%);
  }

  100% {
    transform:
      translateY(200%);
  }
}


/* section05 */
/* ========================================
   Intro Location
======================================== */

.intro-location {
  position: relative;

  width: 100%;

  padding-top: 7.5rem;
  padding-bottom: 7.5rem;

  overflow: hidden;

  background-color: #fff;
}

.intro-location-inner {
  display: grid;
  grid-template-columns:
    minmax(0, 2fr)
    minmax(25rem, 1fr);

  width: min(
    calc(100% - 2.5rem),
    91.25rem
  );

  min-height: 43.75rem;

  margin: 0 auto;

  box-shadow:
    0 0.25rem 1.5rem
    rgba(0, 0, 0, 0.08);
}


/* ========================================
   Map
======================================== */

.intro-location-map {
  position: relative;

  min-width: 0;
  height: 100%;

  overflow: hidden;

  background-color: #f3f2ef;
}

.intro-location-map-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


/* ========================================
   Information
======================================== */

.intro-location-information {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;

  padding:
    3.75rem
    3.125rem;

  overflow: hidden;

  background-color:
    rgba(255, 255, 255, 0.94);
}


/* ========================================
   Tabs
======================================== */

.intro-location-tabs {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    repeat(2, 1fr);

  width: 12.5rem;

  margin: 0 auto 3rem;

  background-color: #efefef;
}

.intro-location-tab {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 2.75rem;

  padding:
    0.625rem
    1rem;

  color: #333;

  background-color: transparent;
  border: 0;

  font-family:
    var(
      --font-noto-serif-kr,
      "Noto Serif KR"
    ),
    serif;

  font-size: 1rem;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;

  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.intro-location-tab.is-active {
  color: #fff;
  background-color: #333;
}

.intro-location-tab:hover {
  background-color:
    rgba(51, 51, 51, 0.12);
}

.intro-location-tab.is-active:hover {
  background-color: #333;
}


/* ========================================
   Panels
======================================== */

.intro-location-panels {
  position: relative;
  z-index: 2;

  width: 100%;

  /*
   * 탭 변경 시 높이가 출렁이지 않도록
   * 최소 높이를 유지합니다.
   */
  min-height: 31.25rem;
}

.intro-location-panel {
  display: none;

  width: 100%;
}

.intro-location-panel.is-active {
  display: block;
}


/* ========================================
   Detail
======================================== */

.intro-location-detail {
  display: flex;
  flex-direction: column;

  width: 100%;
}

.intro-location-detail-item {
  width: 100%;
}

.intro-location-heading {
  margin: 0;

  color: #111;

  font-family:
    var(
      --font-noto-serif-kr,
      "Noto Serif KR"
    ),
    serif;

  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.5;
}

.intro-location-text {
  margin: 0.5rem 0 0;

  color: #737373;

  font-family:
    var(
      --font-noto-serif-kr,
      "Noto Serif KR"
    ),
    serif;

  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;

  word-break: keep-all;
}

.intro-location-link {
  color: inherit;
}


/* ========================================
   Divider
======================================== */

.intro-location-divider {
  display: flex;
  align-items: center;
  gap: 0.25rem;

  width: 100%;

  margin:
    2.25rem
    0;

  color:
    rgba(51, 51, 51, 0.55);
}

.intro-location-divider-line {
  display: block;
  flex: 1;

  height: 0.0625rem;

  background-color: currentColor;
}

.intro-location-divider-symbol {
  display: block;

  width: 0.625rem;
  height: 0.625rem;

  object-fit: contain;
}


/* ========================================
   Transport
======================================== */

.intro-location-transport {
  display: flex;
  flex-direction: column;

  width: 100%;
}

.intro-location-transport-item {
  display: grid;
  grid-template-columns:
    2.5rem
    minmax(0, 1fr);

  align-items: center;
  gap: 1rem;

  width: 100%;
}

.intro-location-transport-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.5rem;
  height: 2.5rem;
}

.intro-location-transport-icon img {
  display: block;

  width: 2rem;
  height: 2rem;

  object-fit: contain;
}

.intro-location-transport-content {
  min-width: 0;
}


/* ========================================
   Decoration
======================================== */

.intro-location-decoration {
  position: absolute;
  z-index: 0;

  right: 0;
  bottom: 0;

  display: block;

  width: 70%;
  height: 65%;

  object-fit: contain;
  object-position: right bottom;

  opacity: 0.18;

  pointer-events: none;
}











/* ========================================
   Tablet
======================================== */

@media (min-width: 48rem) and (max-width: 64rem) {
  .intro-hero {
    padding-bottom: 6.25rem;
  }

  .intro-hero-title {
    font-size: 2rem;
  }

  .intro-hero-divider {
    max-width: 20rem;
  }

  .intro-hero-content {
    grid-template-columns:
      minmax(0, 0.85fr)
      minmax(22.5rem, 1.15fr);

    gap: 2.5rem;

    width: calc(100% - 2.5rem);

    margin-top: 4rem;
  }

  .intro-hero-watermark-image {
    width: min(100%, 22.5rem);
  }

  .intro-hero-copy {
    gap: 1.5rem;

    max-width: 30rem;

    line-height: 1.8;
  }



  /* seciton02 */
  .intro-keyword-inner {
    width: calc(100% - 2.5rem);

    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
  }

  .intro-keyword-heading {
    margin-bottom: 3.5rem;
  }

  .intro-keyword-title {
    font-size: 2rem;
  }

  .intro-keyword-list.swiper-wrapper {
    gap: 1rem;
  }

  .intro-keyword-visual {
    min-height: 11rem;
  }

  .intro-keyword-ink {
    width: 12rem;
    height: 12rem;
  }

  .intro-keyword-character {
    font-size: 5rem;
  }

  .intro-keyword-name {
    font-size: 1.5rem;
  }

  .intro-keyword-description {
    margin-top: 1.25rem;

    font-size: 0.875rem;
  }


  /* section03 */
  .intro-philosophy-inner {
    width: calc(100% - 2.5rem);

    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
  }

  .intro-philosophy-content {
    max-width: 30rem;
  }

  .intro-philosophy-title {
    font-size: 2rem;
  }

  .intro-philosophy-divider {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
  }

  .intro-philosophy-description {
    gap: 1.75rem;

    font-size: 1rem;
    line-height: 1.8;
  }

  /* section04 */
  .intro-route-inner {
    width:
      calc(100% - 2.5rem);

    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .intro-route-title {
    font-size: 2rem;
  }

  .intro-route-description {
    margin-top: 1rem;

    font-size: 0.9375rem;
  }

  .intro-route-scroll {
    margin-top: 2.5rem;
  }

  .intro-route-scroll-line {
    height: 4.5rem;
  }


  /* section05 */
.intro-location {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
  }

  .intro-location-inner {
    grid-template-columns:
      minmax(0, 1.6fr)
      minmax(20rem, 1fr);

    width: calc(100% - 2.5rem);

    min-height: 37.5rem;
  }

  .intro-location-information {
    padding:
      2.5rem
      2rem;
  }

  .intro-location-tabs {
    width: 11.25rem;

    margin-bottom: 2.5rem;
  }

  .intro-location-tab {
    font-size: 0.875rem;
  }

  .intro-location-panels {
    min-height: 27.5rem;
  }

  .intro-location-heading {
    font-size: 1.25rem;
  }

  .intro-location-text {
    font-size: 0.875rem;
  }

  .intro-location-divider {
    margin:
      1.75rem
      0;
  }



}

/* ========================================
   Mobile
======================================== */

@media (max-width: 47.9375rem) {
  .intro-hero {
    padding-bottom: 5rem;
  }

  .intro-hero-visual {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
  }

  .intro-hero-heading {
    top: 48%;
    left: auto;
    right: 1.25rem;

    gap: 0.75rem;

    width: auto;
    max-width: 13.75rem;

    transform: translateY(-50%);
  }

  .intro-hero-title {
    font-size: 1.5rem;
    line-height: 1.45;
  }

  .intro-hero-divider {
    max-width: 9.375rem;
  }

  .intro-hero-symbol {
    width: 0.625rem;
    height: 0.625rem;
  }

  .intro-hero-content {
    display: block;

    width: calc(100% - 2.5rem);

    margin-top: 2.5rem;
  }

  .intro-hero-watermark {
    display: none;
  }

  .intro-hero-copy {
    align-items: flex-start;
    gap: 1.5rem;

    max-width: none;

    margin-left: 0;

    line-height: 1.75;
    text-align: left;
  }

  .intro-hero-copy p {
    text-align: left;
  }


  /* section02 */
  .intro-keyword {
    min-height: auto;
  }

  .intro-keyword-inner {
    display: block;

    width: calc(100% - 2.5rem);
    min-height: auto;

    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .intro-keyword-heading {
    margin-bottom: 3rem;
  }

  .intro-keyword-title {
    font-size: 1.5rem;
  }

  /* Swiper */

  .intro-keyword-carousel.swiper {
    overflow: hidden;
  }

  .intro-keyword-list.swiper-wrapper {
    display: flex;

    grid-template-columns: none;
    gap: 0;

    width: 100%;
    height: auto;
  }

  .intro-keyword-item.swiper-slide {
    flex-shrink: 0;

    width: 100%;
    max-width: none;

    opacity: 1;

    transform: none;
  }

  .intro-keyword-visual {
    min-height: 17.5rem;

    margin-bottom: 1.75rem;
  }

  .intro-keyword-ink {
    width: 18rem;
    height: 18rem;

    opacity: 1;

    transform:
      translate3d(-50%, -50%, 0)
      scale(1);
  }

  .intro-keyword-character {
    font-size: 7.5rem;

    opacity: 1;

    transform: none;
  }

  .intro-keyword-name {
    font-size: 1.5rem;
  }

  .intro-keyword-description {
    margin-top: 1.25rem;

    font-size: 0.875rem;
    line-height: 1.8;
  }

  /* Progress */

  .intro-keyword-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    width: 100%;

    margin-top: 2.5rem;

    color: #333;

    font-family:
      var(--font-noto-serif-kr),
      serif;

    font-size: 0.75rem;
    line-height: 1;
  }

  .intro-keyword-current,
  .intro-keyword-total {
    flex: 0 0 auto;

    min-width: 1.5rem;
  }

  .intro-keyword-total {
    text-align: right;
  }

  .intro-keyword-progress-track {
    position: relative;

    flex: 1;
    height: 1.75rem;
  }

  .intro-keyword-progress-line {
    position: absolute;

    top: 50%;
    right: 0;
    left: 0;

    height: 0.0625rem;

    background-color:
      rgba(51, 51, 51, 0.45);

    transform: translateY(-50%);
  }

  .intro-keyword-progress-thumb {
    position: absolute;

    top: 50%;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.75rem;
    height: 1.75rem;

    background-color: #fff;

    border:
      0.0625rem solid
      rgba(51, 51, 51, 0.6);

    transform:
      translate3d(0, -50%, 0);

    will-change: transform;
  }

  .intro-keyword-progress-image {
    display: block;

    width: 0.875rem;
    height: 0.875rem;

    object-fit: contain;
  }


  /* section03 */
  .intro-philosophy {
    min-height: 38rem;
  }

  .intro-philosophy-image {
    object-position: center;

    transform: none;
  }

  .intro-philosophy-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.56) 0%,
        rgba(0, 0, 0, 0.6) 100%
      );
  }

  .intro-philosophy-inner {
    align-items: center;

    width: calc(100% - 2.5rem);
    min-height: 38rem;

    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .intro-philosophy-content {
    max-width: none;
  }

  .intro-philosophy-title {
    font-size: 1.5rem;
    line-height: 1.4;
  }

  .intro-philosophy-divider {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }

  .intro-philosophy-symbol {
    width: 0.625rem;
    height: 0.625rem;
  }

  .intro-philosophy-description {
    gap: 1.5rem;

    font-size: 0.875rem;
    line-height: 1.8;
  }

  /* section04 */
  .intro-route {
    min-height: 100svh;
  }

  .intro-route-background {
    object-fit: cover;
    object-position: center;
  }

  .intro-route-inner {
    width:
      calc(100% - 2.5rem);

    min-height: 100svh;

    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  /*
   * 모바일도 레이아웃은 PC와 동일
   * 가운데 정렬을 그대로 유지합니다.
   */

  .intro-route-title {
    font-size: 1.75rem;
    line-height: 1.35;
  }

  .intro-route-description {
    margin-top: 1rem;

    font-size: 0.875rem;
    line-height: 1.7;
  }

  .intro-route-scroll {
    margin-top: 2.25rem;
  }

  .intro-route-scroll-line {
    width: 0.0625rem;
    height: 3.75rem;
  }

  .intro-route-scroll-text {
    margin-top: 0.75rem;

    font-size: 0.6875rem;
  }


  /* section05 */
  .intro-location {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .intro-location-inner {
    display: block;

    width:
      calc(100% - 2.5rem);

    min-height: 0;

    box-shadow:
      0 0.25rem 1.25rem
      rgba(0, 0, 0, 0.08);
  }


  /* Map */

  .intro-location-map {
    width: 100%;

    aspect-ratio: 1 / 1;
  }

  .intro-location-map-image {
    object-position: center;
  }


  /* Information */

  .intro-location-information {
    width: 100%;

    padding:
      2rem
      1.25rem
      2.5rem;
  }


  /* Tabs */

  .intro-location-tabs {
    width: 10rem;

    margin:
      0 auto
      2rem;
  }

  .intro-location-tab {
    min-height: 2.5rem;

    font-size: 0.75rem;
  }


  /* Panel */

  .intro-location-panels {
    min-height: 25rem;
  }

  .intro-location-heading {
    font-size: 1rem;
  }

  .intro-location-text {
    margin-top: 0.375rem;

    font-size: 0.75rem;
    line-height: 1.65;
  }


  /* Divider */

  .intro-location-divider {
    margin:
      1.5rem
      0;
  }


  /* Transport */

  .intro-location-transport-item {
    grid-template-columns:
      2rem
      minmax(0, 1fr);

    gap: 0.75rem;
  }

  .intro-location-transport-icon {
    width: 2rem;
    height: 2rem;
  }

  .intro-location-transport-icon img {
    width: 1.625rem;
    height: 1.625rem;
  }


  /* Decoration */

  /* .intro-location-decoration {
    width: 85%;
    height: 55%;

    right: 0;
    bottom: 0;

    opacity: 0.14;
  } */
}

/* ========================================
   Reduced Motion
======================================== */

@media (prefers-reduced-motion: reduce) {
  .intro-hero-visual,
  .intro-hero-image,
  .intro-hero-title,
  .intro-hero-divider,
  .intro-hero-content {
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;

    animation: none !important;
    transition: none !important;
  }


  /* section02 */
  .intro-keyword-title,
  .intro-keyword-item,
  .intro-keyword-character,
  .intro-keyword-ink {
    visibility: visible !important;
    opacity: 1 !important;

    filter: none !important;
    transform: none !important;

    animation: none !important;
    transition: none !important;
  }

  /* section03 */
  .intro-philosophy-content,
  .intro-philosophy-title,
  .intro-philosophy-divider,
  .intro-philosophy-description,
  .intro-philosophy-image {
    visibility: visible !important;
    opacity: 1 !important;

    filter: none !important;
    transform: none !important;

    animation: none !important;
    transition: none !important;
  }

  /* section04 */
  .intro-route-title,
  .intro-route-description,
  .intro-route-scroll {
    visibility: visible !important;
    opacity: 1 !important;

    filter: none !important;
    transform: none !important;

    animation: none !important;
    transition: none !important;
  }

  .intro-route-scroll-line::after {
    animation: none;
    transform: translateY(100%);
  }

  /* section05 */
  .intro-location-panel {
    transition: none !important;
  }

}