@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap");

/* =================================================================
   01. Base / Reset
================================================================= */

/* -------------------------------------------------
  Reset
------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ================================================================
  E-model house VR
================================================================ */
.unit-vr {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 80px 0 0px;
}

.unit-vr__tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 40px;
  border-top: 1px solid #d8d0c5;
  border-bottom: 1px solid #d8d0c5;
}

.unit-vr__tab {
  min-height: 82px;
  padding: 12px 8px;
  border: 0;
  border-right: 1px solid #e6dfd5;
  background: #fff;
  color: #5f554a;
  cursor: pointer;
  font: inherit;
  transition: background-color 180ms ease, color 180ms ease;
}

.unit-vr__tab:first-child {
  border-left: 1px solid #e6dfd5;
}

.unit-vr__tab strong,
.unit-vr__tab small {
  display: block;
}

.unit-vr__tab strong {
  font-size: 20px;
  font-weight: 600;
}

.unit-vr__tab small {
  margin-top: 4px;
  font-size: 12px;
}

.unit-vr__tab:hover,
.unit-vr__tab.is-active {
  background: var(--sub-brown);
  color: #fff;
}

.unit-vr__viewer {
  position: relative;
  overflow: hidden;
  background: #111;
  aspect-ratio: 1200 / 629;
}

.unit-vr__viewer iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.unit-vr__external {
  display: none;
}

.unit-vr__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.unit-vr__actions a,
.unit-vr__external {
  min-width: 160px;
  padding: 13px 20px;
  border: 1px solid var(--sub-brown);
  color: var(--sub-brown);
  text-align: center;
}

.unit-vr__actions a:hover,
.unit-vr__external:hover {
  background: var(--sub-brown);
  color: #fff;
}

.unit-vr__notice {
  margin-top: 40px;
  padding: 24px 28px;
  background: #f6f3ee;
  color: #777067;
  font-size: 13px;
  line-height: 1.8;
}

.unit-vr__notice ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

@media (max-width: 768px) {
  .unit-vr {
    width: calc(100% - 40px);
    padding: 60px 0 0px;
  }

  .unit-vr__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 24px;
    border-bottom: 0;
  }

  .unit-vr__tab {
    min-height: 62px;
    border-bottom: 1px solid #e6dfd5;
  }

  .unit-vr__tab strong {
    font-size: 16px;
  }

  .unit-vr__viewer {
    aspect-ratio: 4 / 3;
  }

  .unit-vr__external {
    display: block;
    width: 100%;
    margin-top: 12px;
    box-sizing: border-box;
  }

  .unit-vr__actions {
    flex-direction: column;
  }

  .unit-vr__actions a {
    box-sizing: border-box;
    width: 100%;
  }

  .unit-vr__notice {
    margin-top: 30px;
    padding: 20px;
    font-size: 12px;
  }
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Malgun Gothic",
    sans-serif;
  color: #111;
  line-height: 1.5;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  vertical-align: top;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  border: 0;
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

address,
em,
i {
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* 화면에는 보이지 않지만 스크린리더에는 읽히는 텍스트 */
.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.mo {
  display: none;
}
.pc {
  display: block;
}
@media screen and (max-width: 1024px) {
  .mo {
    display: block;
  }
  .pc {
    display: none;
  }
}

/* =================================================================
   02. Shared / Fonts / Tokens / Header / Footer
================================================================= */

/* ================================================================
  00. Fonts / Design tokens / Global utilities
================================================================ */
@font-face {
  font-family: "Trajan Pro";
  src: url("../fonts/TrajanPro-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Trajan Pro";
  src: url("../fonts/TrajanPro-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Antro Vectra";
  src: url("../fonts/Antro_Vectra_Bolder.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Athena";
  src: url("../fonts/Athena.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --navy: #33465d;
  --cream: #f1ede5;
  --brown: #2e2a20;
  --serif: "Noto Serif KR", serif;
}
body {
  height: 100%;
  min-width: 320px;
  font-family: "Noto Sans KR", sans-serif;
  font-synthesis: none;
  color: #293544;
}
html {
  height: 100%;
}
.fullpage {
  width: 100%;
}
.skip-link {
  position: fixed;
  z-index: 999;
  top: -50px;
  left: 20px;
  background: #111;
  color: #fff;
  padding: 10px;
}
.skip-link:focus {
  top: 10px;
}
/* ================================================================
  01. Global header / Navigation
================================================================ */
.header {
  position: fixed;
  z-index: 100;
  top: 0;
  width: 100%;
  height: 145px;
  color: #fff;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}
.header:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#17304766, transparent);
}
.header:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 145px;
  left: 0;
  width: 100%;
  height: 0;
  background: #fff;
  border-top: 1px solid #edf0f3;
  opacity: 0;
  overflow: hidden;
  transition:
    height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}
.header:hover:after,
.header:focus-within:after,
.header.menu-open:after {
  height: 250px;
  opacity: 1;
}
.header .navi {
  position: relative;
  z-index: 2;
  width: min(1720px, calc(100% - 100px));
  height: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(154px, 340px) minmax(0, 1fr) minmax(280px, 340px);
  align-items: center;
}

.header:hover .logo > img,
.header:focus-within .logo > img,
.header.menu-open .logo > img,
.header.is-dark .logo > img {
  filter: brightness(0) saturate(100%) invert(16%) sepia(15%) saturate(939%) hue-rotate(9deg) brightness(92%) contrast(88%);
}
.header .logo strong {
  font-family: var(--serif);
  font-size: 22px;
}
.header .logo span {
  margin-top: 6px;
  font-size: 8px;
  letter-spacing: 1.8px;
}
.header .gnb {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: min(713px, 100%);
  height: 100%;
  justify-self: center;
  align-items: center;
  gap: 0;
  position: relative;
  left: clamp(-30px, -1.589vw, -19px);
}
.header .gnb.gnb--preview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.header .gnb-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 페이지 진입 시 GNB가 위에서 아래로 내려오는 공용 모션 */
.header .gnb.is-entering .gnb-item {
  opacity: 0;
  transform: translateY(-28px);
}
.header .gnb.is-entering.is-visible .gnb-item {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.55s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.header .gnb.is-entering.is-visible .gnb-item:nth-child(2) {
  transition-delay: 0.06s;
}
.header .gnb.is-entering.is-visible .gnb-item:nth-child(3) {
  transition-delay: 0.12s;
}
.header .gnb.is-entering.is-visible .gnb-item:nth-child(4) {
  transition-delay: 0.18s;
}
.header .gnb.is-entering.is-visible .gnb-item:nth-child(5) {
  transition-delay: 0.24s;
}
.header .gnb.is-entering.is-visible .gnb-item:nth-child(6) {
  transition-delay: 0.3s;
}
.header .gnb.is-entering.is-visible .gnb-item:nth-child(7) {
  transition-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  .header .gnb.is-entering .gnb-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.header .gnb-item > .depth1 {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.header .gnb-item > .depth1::before {
  content: "";
  position: absolute;
  top: 47px;
  left: 0;
  width: 12px;
  height: 2px;
  background: #c4a676;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity 0.25s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.header .gnb-item:hover > a,
.header .gnb-item:focus-within > a {
  color: #c4a676;
}
.header .gnb-item:hover > a::before,
.header .gnb-item:focus-within > a::before {
  opacity: 1;
  transform: scaleX(1);
}
.header .depth2 {
  position: absolute;
  z-index: 3;
  top: 145px;
  left: 50%;
  width: max-content;
  min-width: 120px;
  padding-top: 25px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -16px);
  transition:
    max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.5s;
}
.header .depth2 > a {
  display: block;
  padding: 4px 8px;
  color: #364255;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}
.header .depth2 > a:hover,
.header .depth2 > a:focus-visible {
  color: #c4a676;
  background-color: transparent;
}
.header:hover .depth2,
.header:focus-within .depth2,
.header.menu-open .depth2 {
  max-height: 220px;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0.04s, 0.08s, 0.04s, 0s;
}
.header .top-fixed-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}
.header .tel-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
}
.header .tel-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: filter 0.3s ease;
}
.header:hover .tel-icon,
.header:focus-within .tel-icon,
.header.menu-open .tel-icon,
.header.is-dark .tel-icon {
  filter: brightness(0) saturate(100%) invert(13%);
}
.header .reserve {
  display: inline-flex;
  width: 133px;
  height: 37px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.header .reserve img {
  display: none;
}
.header .reserve::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.header .mobile-menu-toggle {
  display: none;
}
.header:hover,
.header:focus-within,
.header.menu-open {
  background: #fff;
  color: #222;
  box-shadow: none;
  border-bottom: 1px solid #edf0f3;
}
.header.is-dark {
  color: #222;
}
.header.is-dark:before {
  opacity: 0;
}
.header:hover:before,
.header:focus-within:before,
.header.menu-open:before {
  opacity: 0;
}

/* ================================================================
  08. Global footer
================================================================ */
.footer-section {
  overflow: hidden;
  background: var(--brown);
}
.footer-section .site-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 359px;
  background: transparent;
  color: #fff;
}
.footer-section .site-footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -12px 0;
  background: #1e1e1e;
  transform: translateY(0);
}
.footer-section.is-footer-entering .site-footer::before {
  animation: footerRiseBounce 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  will-change: transform;
}
@keyframes footerRiseBounce {
  0% {
    transform: translateY(72px);
  }
  72% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
.footer-section .footer-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 200px);
  height: 100%;
  margin: 0 auto;
  padding: 60px 0 30px;
  box-sizing: border-box;
}
.footer-section .footer-primary {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.footer-section .footer-head,
.footer-section .footer-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-section .footer-logo {
  display: block;
  width: 154px;
  height: 48px;
}
.footer-section .footer-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.24px;
}
.footer-section .footer-phone img {
  display: block;
  width: 28px;
  height: 28px;
}
.footer-section .footer-details {
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-section .footer-address {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-style: normal;
}
.footer-section .footer-address > div {
  display: grid;
  grid-template-columns: 80px auto;
  align-items: flex-start;
}
.footer-section .footer-address strong,
.footer-section .footer-address span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.14px;
}
.footer-section .footer-address span {
  opacity: 0.6;
}
.footer-section .footer-notice {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.12px;
  text-align: right;
  opacity: 0.5;
}
.footer-section .footer-notice-mark {
  flex: 0 0 auto;
}
.footer-section .footer-notice-text {
  flex: 1 1 auto;
  min-width: 0;
}
.footer-section .footer-copyright {
  margin: 30px 0 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.12px;
  text-align: right;
  opacity: 0.5;
}

/* =================================================================
   03. Index page
================================================================= */

/* ================================================================
  02. FullPage shared layout / Navigation dots
================================================================ */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  html:not(.is-native-scroll):not(.is-fullpage-ready) #main > .section:not(#home) {
    visibility: hidden;
  }
}
.main-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ================================================================
  03. Main visual / Brand introduction
================================================================ */
html.is-site-intro,
html.is-site-intro body {
  overflow: hidden !important;
}
html.is-site-intro .header {
  opacity: 0;
  pointer-events: none;
}
html.is-site-intro .main-visual .main-visual-copy {
  visibility: hidden;
}
.main-visual.is-motion-pending .main-visual-copy,
.header.is-motion-pending .gnb {
  visibility: hidden;
}
.main-visual.is-motion-pending::before {
  transform: scale(1.3);
  filter: blur(1.5vw);
  transition: none;
}
.site-intro {
  --dark: #312e20;
  --cream: #f8f3ed;
  --intro-axis-offset: 12px;
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  background: var(--dark);
  color: #fff;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.25s ease,
    visibility 0s 0.25s;
}
.site-intro.is-finished {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-intro-dark,
.site-intro-cream {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.site-intro-title {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 94px;
  transform: translate(-50%, -50%);
  font-family: "Trajan Pro", "TrajanPro", var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: gap 1.5s ease;
}
.site-intro-title span {
  display: inline-flex;
  gap: 40px;
  transition: gap 1.5s ease;
}
.site-intro-title i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  transform: translate3d(0, 101%, 0);
  transition:
    opacity 2s cubic-bezier(0.19, 1, 0.22, 1),
    transform 2s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--i) * 0.06s);
}
.site-intro.is-words .site-intro-title i {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.site-intro.is-contract .site-intro-title {
  gap: 20px;
}
.site-intro.is-contract .site-intro-title span {
  gap: 6px;
}
.site-intro-wipes {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.site-intro-wipes i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 25.1%;
  display: block;
  background: var(--cream);
  transform: translate3d(-101%, 0, 0);
  transition: transform 1.55s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.site-intro-wipes i:nth-child(1) {
  top: 0;
}
.site-intro-wipes i:nth-child(2) {
  top: 25%;
  transform: translate3d(101%, 0, 0);
  transition-delay: 0.1s;
}
.site-intro-wipes i:nth-child(3) {
  top: 50%;
  transition-delay: 0.2s;
}
.site-intro-wipes i:nth-child(4) {
  top: 75%;
  transform: translate3d(101%, 0, 0);
  transition-delay: 0.3s;
}
.site-intro.is-wipe .site-intro-wipes i {
  transform: translate3d(0, 0, 0);
}
.site-intro-cream {
  z-index: 4;
  background: var(--cream);
  color: var(--dark);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0s 0.2s;
}
.site-intro.is-cream .site-intro-cream {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.site-intro-pattern {
  position: absolute;
  inset: -16% 0 -14%;
  background: url("../images/intro-line-pattern.svg") center/cover no-repeat;
  opacity: 0.52;
}
.site-intro-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(17px, 1.46vw, 28px);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition:
    transform 2.1s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 1.2s ease;
  will-change: transform, opacity;
}
.site-intro-copy-left {
  left: 50%;
  transform: translate3d(calc(-50% - 46.693vw), -50px, 0);
}
.site-intro-copy-right {
  left: 50%;
  right: auto;
  transform: translate3d(calc(-50% + 45.755vw), 10px, 0);
}
.site-intro.is-copy .site-intro-copy-left {
  opacity: 1;
  transform: translate3d(calc(-50% - 5.547vw), -50px, 0);
}
.site-intro.is-copy .site-intro-copy-right {
  opacity: 1;
  transform: translate3d(calc(-50% + 4.661vw), 10px, 0);
}
.site-intro-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 880px;
  height: 48px;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.site-intro-brand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 154px;
  height: 48px;
  background: #322e1f;
  -webkit-mask: url("../images/logo.svg") center/contain no-repeat;
  mask: url("../images/logo.svg") center/contain no-repeat;
  transform: translate3d(-50%, -50%, 0);
}
.site-intro-brand img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 154px;
  height: 48px;
  visibility: hidden;
  transform: translate3d(-50%, -50%, 0);
}
.site-intro-brand span {
  position: absolute;
  top: calc(50% + 5px);
  z-index: 1;
  width: 50%;
  height: 1px;
  background: #4b4739;
  opacity: 1;
  transform: scaleX(0);
  transition:
    transform 1.3s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.15s ease 0.1s;
  will-change: transform, opacity;
}
.site-intro-brand span:first-child {
  left: 0;
  transform-origin: left center;
}
.site-intro-brand span:last-child {
  right: 0;
  transform-origin: right center;
}
.site-intro.is-brand .site-intro-brand {
  opacity: 1;
}
.site-intro.is-copy-out .site-intro-copy {
  opacity: 0;
  transition-duration: 1.5s, 0.7s;
}
.site-intro.is-lines .site-intro-brand span {
  transform: scaleX(1);
}
.site-intro.is-window .site-intro-brand span {
  opacity: 0;
}
.site-intro-window {
  --intro-frame-half-w: min(439px, 36vw);
  --intro-frame-half-h: min(213px, 21vh);
  --intro-mask-axis-y: 0px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 100vw;
  height: calc(100vh + var(--intro-axis-offset) + var(--intro-axis-offset));
  overflow: hidden;
  visibility: hidden;
  transform: none;
}
.site-intro-window::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -6%;
  background: url("../images/hero-apartment2-intro_n.jpg") center/cover no-repeat;
  transform: scale(1);
  transform-origin: center;
  filter: none;
}
.site-intro-window::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgb(0 0 0 / 30%);
}
.site-intro.is-window .site-intro-window {
  visibility: visible;
}
.site-intro-window-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.site-intro-window-mask i {
  position: absolute;
  display: block;
  background: var(--cream);
  transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.site-intro-window-mask i:nth-child(1),
.site-intro-window-mask i:nth-child(2) {
  left: 0;
  width: 100%;
  height: 50%;
}
.site-intro-window-mask i:nth-child(1) { top: 0; }
.site-intro-window-mask i:nth-child(2) { top: 50%; }
.site-intro-window-mask i:nth-child(3),
.site-intro-window-mask i:nth-child(4) {
  top: 0;
  width: 50%;
  height: 100%;
}
.site-intro-window-mask i:nth-child(3) {
  left: 0;
  transform: translateX(calc(0px - var(--intro-frame-half-w)));
}
.site-intro-window-mask i:nth-child(4) {
  left: 50%;
  transform: translateX(var(--intro-frame-half-w));
}
.site-intro.is-window-open .site-intro-window-mask i:nth-child(1) {
  transform: translateY(calc(var(--intro-mask-axis-y) - var(--intro-frame-half-h)));
}
.site-intro.is-window-open .site-intro-window-mask i:nth-child(2) {
  transform: translateY(calc(var(--intro-frame-half-h) + var(--intro-mask-axis-y)));
}
.site-intro.is-expand .site-intro-window-mask i {
  transition-duration: 2.4s;
}
.site-intro.is-expand .site-intro-window-mask i:nth-child(1) { transform: translateY(-101%); }
.site-intro.is-expand .site-intro-window-mask i:nth-child(2) { transform: translateY(101%); }
.site-intro.is-expand .site-intro-window-mask i:nth-child(3) { transform: translateX(-101%); }
.site-intro.is-expand .site-intro-window-mask i:nth-child(4) { transform: translateX(101%); }
.site-intro-window-copy {
  display: none;
}
.site-intro-window-copy strong {
  font-family: "Trajan Pro", "TrajanPro", var(--serif);
  font-size: 20px;
  letter-spacing: 0.55em;
  white-space: nowrap;
}
.site-intro-window-copy small {
  font-family: var(--serif);
  font-size: 13px;
}
.site-intro.is-window .site-intro-window-copy {
  opacity: 0;
}
.site-intro-logo-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 154px;
  height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition:
    transform 1.45s cubic-bezier(0.22, 1, 0.36, 1) 2.4s,
    opacity 0.35s ease;
  will-change: transform;
}
.site-intro-logo-card img {
  width: 154px;
  height: 48px;
  filter: none;
}
.site-intro.is-window .site-intro-logo-card {
  opacity: 1;
}
.site-intro.is-logo-docking .site-intro-logo-card {
  transform: translate3d(calc(-50% + var(--intro-logo-x, 0px)), calc(-50% + var(--intro-logo-y, 0px)), 0) scale(var(--intro-logo-scale, 1));
}
.site-intro.is-expand .site-intro-window-copy,
.site-intro.is-window .site-intro-copy {
  opacity: 0;
  transition-delay: 0s;
}
.site-intro-skip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: 86px;
  height: 86px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(-120px, -120px, 0) translate(-50%, -50%);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.site-intro-skip.has-pointer {
  opacity: 1;
}
.site-intro-skip-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.site-intro-skip .ring-outer {
  width: 86px;
  height: 86px;
  background: #e3d4bd;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  animation: siteIntroSkipRingWave 2.1s ease infinite both;
}
.site-intro-skip .ring-inner {
  width: 68.558px;
  height: 68.558px;
  background: #827c5e;
  opacity: 1;
}
.site-intro-skip span {
  position: relative;
  z-index: 1;
  font-family: "Pretendard", var(--sans);
  font-size: 16px;
  font-weight: 700;
}
.site-intro.is-cream .site-intro-skip {
  color: #fff;
}
@keyframes siteIntroSkipRingWave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  20% {
    opacity: 0.3;
  }
  30% {
    transform: translate(-50%, -50%) scale(0.7);
  }
  70% {
    opacity: 0.3;
  }
  80% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}
@media (max-width: 1199px) {
  .site-intro {
    --intro-axis-offset: clamp(7px, 1.25vw, 12px);
  }
  .site-intro-title {
    width: calc(100vw - 40px);
    gap: clamp(24px, 4.6vw, 47px);
    font-size: clamp(11px, 2.1vw, 22px);
  }
  .site-intro-title span {
    gap: clamp(12px, 2.35vw, 24px);
  }
  .site-intro.is-contract .site-intro-title {
    gap: clamp(16px, 2vw, 20px);
  }
  .site-intro.is-contract .site-intro-title span {
    gap: 6px;
  }
  .site-intro-copy {
    font-size: clamp(15px, 2.2vw, 22px);
  }
  .site-intro-copy-left {
    transform: translate3d(-30vw, -42px, 0);
  }
  .site-intro-copy-right {
    transform: translate3d(30vw, 8px, 0);
  }
  .site-intro.is-copy .site-intro-copy-left {
    transform: translate3d(-50%, -42px, 0);
  }
  .site-intro.is-copy .site-intro-copy-right {
    transform: translate3d(-50%, 8px, 0);
  }
  .site-intro-brand {
    width: min(calc(100% - 64px), 720px);
    height: clamp(63px, 9.4vw, 88px);
  }
  .site-intro-brand::before {
    width: clamp(180px, 33.333vw, 320px);
    height: auto;
    aspect-ratio: 320/100;
  }
  .site-intro-brand span {
    width: 50%;
  }
  .site-intro-window {
    --intro-frame-half-w: min(44vw, 439px);
    --intro-frame-half-h: min(21.35vw, 213px);
  }
  .site-intro-window-copy strong {
    font-size: 12px;
    letter-spacing: 0.25em;
  }
  .site-intro-logo-card {
    width: clamp(180px, 33.333vw, 320px);
    height: auto;
    aspect-ratio: 320/100;
  }
  .site-intro-logo-card img {
    width: 100%;
    height: 100%;
  }
  .site-intro-skip {
    position: absolute;
    left: auto;
    top: auto;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    width: 72px;
    height: 72px;
    opacity: 1;
    transform: none !important;
  }
  .site-intro-skip .ring-outer {
    width: 72px;
    height: 72px;
  }
  .site-intro-skip .ring-inner {
    width: 57.4px;
    height: 57.4px;
  }
  .site-intro-skip span {
    font-size: 14px;
  }
}
@media (max-width: 599px) {
  .site-intro {
    --intro-axis-offset: 7px;
  }
  .site-intro-title {
    width: calc(100vw - 24px);
    gap: clamp(10px, 4vw, 16px);
    font-size: clamp(9px, 2.8vw, 11px);
  }
  .site-intro-title span {
    gap: clamp(4px, 1.5vw, 7px);
  }
  .site-intro.is-contract .site-intro-title {
    gap: clamp(8px, 3vw, 12px);
  }
  .site-intro.is-contract .site-intro-title span {
    gap: clamp(2px, 0.8vw, 4px);
  }
  .site-intro-copy {
    font-size: clamp(14px, 4.1vw, 17px);
  }
  .site-intro-copy-left {
    transform: translate3d(-42vw, -34px, 0);
  }
  .site-intro-copy-right {
    transform: translate3d(42vw, 6px, 0);
  }
  .site-intro.is-copy .site-intro-copy-left {
    transform: translate3d(-50%, -34px, 0);
  }
  .site-intro.is-copy .site-intro-copy-right {
    transform: translate3d(-50%, 6px, 0);
  }
  .site-intro-brand {
    width: calc(100% - 32px);
    height: 39px;
  }
  .site-intro-brand::before {
    width: 126px;
    height: 39px;
  }
  .site-intro-brand span {
    width: 50%;
  }
  .site-intro-window {
    --intro-frame-half-w: calc(50vw - 20px);
    --intro-frame-half-h: min(24vw, 96px);
  }
  .site-intro-logo-card {
    width: 126px;
    height: 39px;
  }
  .site-intro-logo-card img {
    width: 126px;
    height: 39px;
  }
  .site-intro-skip {
    width: 64px;
    height: 64px;
  }
  .site-intro-skip .ring-outer {
    width: 64px;
    height: 64px;
  }
  .site-intro-skip .ring-inner {
    width: 51px;
    height: 51px;
  }
  .site-intro-skip span {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-intro {
    display: none;
  }
  html.is-site-intro,
  html.is-site-intro body {
    overflow: auto !important;
  }
}

.main-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #20394b;
  color: #fff;
}
.main-visual::before {
  content: "";
  position: absolute;
  inset: -6%;
  background: url("../images/hero-apartment2_n.jpg") center/cover no-repeat;
  transform: scale(1);
  filter: blur(0);
  transform-origin: center;
  transition:
    left 1.6s ease,
    right 1.6s ease,
    top 1.6s ease,
    bottom 1.6s ease,
    transform 1.6s ease,
    filter 1.6s ease;
  will-change: transform, filter;
  z-index: 0;
}
.main-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgb(0 0 0 / 40%);
  opacity: 1;
  transition: opacity 1.6s ease;
  will-change: opacity;
}
.main-visual.is-brand-preview::after {
  opacity: 0;
}
.main-visual.is-brand-preview::before {
  inset: 0 0 0 36%;
  background-position: center;
  background-size: cover;
  transform: none;
  filter: blur(0);
}
.main-visual .main-visual-copy,
.main-visual .opening-badge {
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.main-visual.is-brand-preview .main-visual-copy {
  opacity: 0;
}
.main-visual.is-leaving .opening-badge {
  opacity: 0;
  transform: translateY(16px) scale(0.92);
}
.main-visual.is-intro::before {
  animation: hero-scale-down 1.6s ease forwards;
}
.main-visual.is-intro.is-brand-preview::before {
  animation: none;
  inset: 0 0 0 36%;
  background-position: center;
  background-size: cover;
  transform: none;
  filter: blur(0);
}
@keyframes hero-scale-down {
  from {
    transform: scale(1.3);
    filter: blur(1.5vw);
  }
  to {
    transform: scale(1);
    filter: blur(0);
  }
}
.main-visual .main-visual-copy {
  position: absolute;
  z-index: 1;
  top: 31.29%;
  left: calc(50% - 64.5px);
  width: min(1040px, calc(100% - 48px));
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateX(-50%);
}
.main-visual .main-visual-copy > p:first-child {
  align-self: flex-start;
  margin-left: 0;
  position: relative;
  left: -1.35em;
  font-size: 16px;
  letter-spacing: 0;
  visibility: hidden;
  opacity: 0 !important;
  transform: translate3d(-160px, 0, 0);
  transition:
    opacity 1.15s ease 0.25s,
    transform 1.65s cubic-bezier(0.22, 1, 0.36, 1) 0.25s !important;
}
.main-visual .main-visual-copy h1 {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  justify-content: center;
  font-family: "Trajan Pro", "TrajanPro", var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.9em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 0.01px #fff;
}
[data-aos="title-contract"] {
  opacity: 0;
  transition: none;
}
[data-aos="title-contract"].aos-animate {
  animation: titleContractFade 0.8s both;
}
.main-visual .main-visual-title {
  display: block;
  letter-spacing: 5rem;
}
[data-aos="title-contract"].aos-animate .main-visual-title {
  animation: titleContractSpacing 1.2s both;
}
@keyframes titleContractFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes titleContractSpacing {
  from {
    letter-spacing: 5rem;
  }
  to {
    letter-spacing: 0.9em;
  }
}
.main-visual .main-visual-invitation {
  align-self: flex-end;
  margin-right: -6px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  visibility: hidden;
  opacity: 0 !important;
  transform: translate3d(160px, 0, 0);
  transition:
    opacity 1.15s ease 0.25s,
    transform 1.65s cubic-bezier(0.22, 1, 0.36, 1) 0.25s !important;
}
.main-visual.is-animated .main-visual-copy > p:first-child,
.main-visual.is-animated .main-visual-invitation {
  visibility: visible;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0);
}
.main-visual .opening-badge {
  position: absolute;
  z-index: 2;
  right: clamp(44px, 3.646vw, 70px);
  bottom: clamp(44px, 7.527vh, 70px);
  width: 164px;
  height: 164px;
  border-radius: 50%;
  background: #424242;
  text-align: center;
  overflow: hidden;
}
.main-visual .opening-badge-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: opening-rotate 12s linear infinite;
}
.main-visual .opening-badge::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  background: #424242;
  transform: translate(-50%, -50%);
}
.main-visual .opening-badge-text {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2px;
}
.mobile-grand-open-bar {
  display: none;
}
@keyframes opening-rotate {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-visual .opening-badge-bg {
    animation: none;
  }
}
.main-visual .brand-intro {
  position: relative;
  display: block;
  background: transparent;
  overflow: hidden;
}
.main-visual .brand-intro-message {
  position: absolute;
  z-index: 2;
  left: -36%;
  top: 0;
  width: 36%;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--cream);
  background-image: url("../images/bg-brand-message.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  transition: left 1.6s ease;
  will-change: left;
}
.main-visual .brand-intro.is-entering .brand-intro-message {
  left: 0;
  transition: left 1.6s ease;
}
.main-visual .brand-intro-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  transition: visibility 0s 1.6s;
}
.main-visual .brand-intro-panel.is-visible {
  visibility: visible;
  transition: visibility 0s 0s;
}
.main-visual .brand-intro-panel .brand-intro-message {
  height: 100%;
}
.main-visual .brand-intro-panel.is-immediate .brand-intro-message {
  left: 0;
  transition: none;
}
.main-visual .brand-intro-panel.is-immediate [data-brand-motion] {
  opacity: 1 !important;
  clip-path: inset(0) !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
.main-visual .brand-intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  transform: translateY(72px);
}

.main-visual .brand-intro-message h2 {
  margin: 0;
  width: 213px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
  color: #322d1e;
  text-align: center;
}
.main-visual .brand-intro-message h2 em {
  font-style: normal;
}
.main-visual .brand-intro-message h2 > span:first-child {
  white-space: nowrap;
}
.main-visual .brand-intro-title-row {
  width: 213px;
  display: flex;
  justify-content: space-between;
}
.main-visual .brand-intro-line {
  position: relative;
  width: 6px;
  height: 194px;
  margin: 0;
  background: linear-gradient(#b98a46, #b98a46) center/1px 100% no-repeat;
  flex-shrink: 0;
}
.main-visual .brand-intro-line::before,
.main-visual .brand-intro-line::after {
  content: "";
  position: absolute;

  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b98a46;
}
.main-visual .brand-intro-line::before {
  top: 0;
  left: 0px;
}
.main-visual .brand-intro-line::after {
  bottom: 0;
  left: 0px;
}
.main-visual .brand-intro-copy {
  width: 296px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.32px;
  color: #322d1e;
}
.main-visual .brand-intro-copy p + p {
  margin-top: 0;
}
.main-visual .brand-intro-photo {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  display: none;
}
.main-visual .brand-intro-photo::before {
  content: "";
  position: absolute;
  inset: -5%;
  background: url("../images/hero-apartment2.jpg?v=20260819") 62% center/cover no-repeat;
  filter: brightness(0.72);
  transform: translateY(-52px) scale(1.09);
  transition:
    transform 2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.8s ease;
}
.main-visual .brand-intro.is-entering .brand-intro-photo {
  opacity: 1;
}
.main-visual .brand-intro.is-animated .brand-intro-photo::before {
  filter: brightness(1);
  transform: translateY(8px) scale(1);
}

.main-visual [data-brand-motion="title"] {
  opacity: 0;
  transform: translateY(-20px);
  transition:
    opacity 1.05s ease-out 0.65s,
    transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) 0.65s;
}
.main-visual [data-brand-motion="title"].is-motion-active {
  opacity: 1;
  transform: translateY(0);
}
.main-visual [data-brand-motion="line"] {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center top;
  transition:
    opacity 0.65s ease-out 0.9s,
    transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s;
}
.main-visual [data-brand-motion="line"].is-motion-active {
  opacity: 1;
  transform: scaleY(1);
}
.main-visual [data-brand-motion="copy-right"],
.main-visual [data-brand-motion="copy-left"] {
  opacity: 0;
  transition: none;
}
.main-visual [data-brand-motion="copy-right"] {
  transform: translateX(-32px);
}
.main-visual [data-brand-motion="copy-left"] {
  transform: translateX(32px);
}
.main-visual .brand-intro.is-animated [data-brand-motion="copy-right"] {
  animation: brandCopyFromLeft 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s both;
}
.main-visual .brand-intro.is-animated [data-brand-motion="copy-left"] {
  animation: brandCopyFromRight 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s both;
}
@keyframes brandCopyFromLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes brandCopyFromRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ================================================================
  04. Night visual / Project summary
================================================================ */
.project-summary {
  position: relative;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.project-summary .project-summary-bg {
  position: absolute;
  inset: 0;
  background: url("../images/bg-night_panel.jpg") center bottom / 100% auto no-repeat;
  opacity: 0.75;
  transform: scale(1);
  filter: blur(1.5vw);
  transition:
    transform 2s ease,
    filter 2s ease;
  will-change: transform, filter, background-position;
}
.project-summary:is(.is-night-animated, .is-mobile-night-bg-animated) .project-summary-bg {
  transform: scale(1);
  filter: blur(0);
}
.project-summary:not(.is-summary) .project-summary-bg {
  transition:
    transform 2s ease,
    filter 2s ease,
    background-position 1.2s ease;
}
.project-summary.is-summary .project-summary-bg {
  transform: scale(1);
  filter: blur(0);
  animation: summarySkyMove 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes summarySkyMove {
  0% {
    background-position: center 100%;
  }
  100% {
    background-position: center 13%;
  }
}
.project-summary.is-summary-returning .project-summary-bg {
  transform: scale(1);
  filter: blur(0);
  animation: summaryBuildingReturn 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes summaryBuildingReturn {
  0% {
    background-position: center 13%;
  }
  100% {
    background-position: center 100%;
  }
}
.project-summary .project-summary-intro {
  position: absolute;
  z-index: 2;
  top: 225px;
  left: 8.385%;
  color: #fff;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.project-summary .project-summary-intro p {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  opacity: 0;
  transform: translateX(-55px);
  transition:
    opacity 1.05s ease 0.7s,
    transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s;
}
.project-summary .project-summary-intro h2 {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.28px;
  opacity: 0;
  transform: translateX(55px);
  transition:
    opacity 1.05s ease 0.7s,
    transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s;
}
.project-summary.is-night-animated .project-summary-intro p,
.project-summary.is-night-animated .project-summary-intro h2,
.project-summary.is-mobile-night-intro-animated .project-summary-intro p,
.project-summary.is-mobile-night-intro-animated .project-summary-intro h2 {
  opacity: 1;
  transform: translateX(0);
}
.project-summary.is-night-reset .project-summary-bg {
  transform: scale(1);
  filter: blur(1.5vw);
  transition: none;
}
.project-summary.is-night-reset .project-summary-intro p {
  opacity: 0;
  transform: translateX(-55px);
  transition: none;
}
.project-summary.is-night-reset .project-summary-intro h2 {
  opacity: 0;
  transform: translateX(55px);
  transition: none;
}
.project-summary.is-summary .project-summary-intro {
  opacity: 0;
  transform: translateY(-48px);
}
.project-summary .project-summary-content {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: calc(100% - 322px);
  max-width: 1598px;
  height: 100vh;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(240px, 445px) minmax(460px, 1fr);
  gap: clamp(80px, 14.16vw, 272px);
  align-content: center;
  align-items: start;
  pointer-events: none;
}
.project-summary .project-summary-title {
  width: 100%;
  height: 140px;
  opacity: 1;
}
.project-summary .project-summary-title h2 {
  margin: 0;
  font-family: "Trajan Pro", "TrajanPro", serif;
  font-size: clamp(44px, 4.2vw, 80px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.8px;
  opacity: 0;
  transform: translateX(-70px);
  transition:
    opacity 1.05s ease 0.35s,
    transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
.project-summary .project-summary-title p {
  margin: 20px 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.2px;
  opacity: 0;
  transform: translateX(70px);
  transition:
    opacity 1.05s ease 0.35s,
    transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
.project-summary .project-summary-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 86px);
  gap: 60px 40px;
}
.project-summary .project-summary-grid article {
  height: 86px;
  min-width: 0;
  padding: 0;
  opacity: 0;
  transition:
    opacity 1s ease 0.85s,
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.85s;
}
.project-summary .project-summary-grid article:nth-child(-n + 3) {
  transform: translateY(-45px);
}
.project-summary .project-summary-grid article:nth-child(n + 4) {
  transform: translateY(45px);
}
.project-summary .project-summary-grid span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(255 255 255 / 30%);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.22px;
}
.project-summary .project-summary-grid span img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.project-summary .project-summary-grid strong {
  display: block;
  margin-top: 20px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  text-align: right;
  letter-spacing: -0.14px;
}
.project-summary.is-summary .project-summary-title h2,
.project-summary.is-summary .project-summary-title p {
  opacity: 1;
  transform: translateX(0);
}
.project-summary.is-summary .project-summary-grid article {
  opacity: 1;
  transform: translateY(0);
}
.project-summary.is-immediate .project-summary-bg,
.project-summary.is-immediate .project-summary-intro,
.project-summary.is-immediate .project-summary-title,
.project-summary.is-immediate .project-summary-grid {
  transition: none;
}
.project-summary.is-immediate .project-summary-bg {
  background-position: center 13%;
  filter: blur(0);
  animation: none;
}
.project-summary.is-immediate .project-summary-title h2,
.project-summary.is-immediate .project-summary-title p,
.project-summary.is-immediate .project-summary-grid article {
  opacity: 1;
  transform: none;
  transition: none;
}
.project-summary.is-summary-reset .project-summary-bg {
  background-position: center 91.28%;
  animation: none;
  transition: none;
}
.project-summary.is-summary-reset .project-summary-title h2,
.project-summary.is-summary-reset .project-summary-title p,
.project-summary.is-summary-reset .project-summary-grid article {
  opacity: 0;
  transition: none;
}
.project-summary.is-summary-reset .project-summary-title h2 {
  transform: translateX(-70px);
}
.project-summary.is-summary-reset .project-summary-title p {
  transform: translateX(70px);
}
.project-summary.is-summary-reset .project-summary-grid article:nth-child(-n + 3) {
  transform: translateY(-45px);
}
.project-summary.is-summary-reset .project-summary-grid article:nth-child(n + 4) {
  transform: translateY(45px);
}
/* ================================================================
  05. Location
================================================================ */
.location-section {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #f8f3ed;
  color: #322e1f;
}
.location-section .location-intro {
  position: absolute;
  z-index: 2;
  top: 43.91%;
  right: 5.208%;
  left: auto;
  width: 27.5%;
  text-align: center;
}
.location-section .location-intro p {
  font-family: "Trajan Pro", "TrajanPro", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.location-section .location-intro h2 {
  margin-top: 30px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.16px;
  opacity: 0;
  transform: translateX(60px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.location-section .location-intro strong {
  font-weight: 700;
  letter-spacing: -0.28px;
}
.location-section .location-intro span {
  font-weight: 400;
}
.location-section .location-heading {
  position: absolute;
  z-index: 1;
  top: 34.77%;
  right: 5.208%;
  left: auto;
  width: 27.5%;
  font-family: "Trajan Pro", "TrajanPro", serif;
  font-size: clamp(60px, 8.065vh, 75px);
  font-weight: 700;
  line-height: 1;
  color: rgb(50 46 31 / 10%);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-35px);
  transition:
    opacity 0.9s ease 0.35s,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
.location-section .location-map {
  position: absolute;
  z-index: 2;
  top: 15.573%;
  left: 2.344%;
  width: 63.334%;
  height: 84.624%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  background: #d9d9d9;
  box-shadow: none;
  clip-path: inset(100% 0 0);
  opacity: 0;
  transform: translateY(70px);
  transition:
    clip-path 1.35s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s,
    opacity 0.7s ease 0.45s,
    transform 1.35s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s;
}
.location-section .location-map > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.09);
  transform-origin: center;
  transition: transform 2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s;
}

/* Shared map magnifier: main location and environment subpage */
.environment-overview__map-magnifier {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: none;
  width: clamp(280px, 19vw, 370px);
  aspect-ratio: 1.22 / 1;
  border: 1px solid rgba(39, 36, 31, 0.55);
  border-radius: 2px;
  background-color: #f4f5f4;
  background-repeat: no-repeat;
  box-shadow: 0 28px 55px rgba(24, 22, 19, 0.24),
    0 10px 20px rgba(24, 22, 19, 0.16),
    0 1px 3px rgba(24, 22, 19, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(0.94);
  transition: opacity 0.24s ease,
    transform 0.35s cubic-bezier(0.22, 0.8, 0.2, 1);
  will-change: left, top, background-position, transform, opacity;
}
.environment-overview__map-magnifier.is-active {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}
@media (hover: hover) and (pointer: fine) {
  .environment-overview__map-magnifier {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .environment-overview__map-magnifier {
    transition: none;
  }
}
.location-section:is(.is-animated, .is-intro-animated) .location-intro p,
.location-section:is(.is-animated, .is-intro-animated) .location-intro h2 {
  opacity: 1;
  transform: translateX(0);
}
.location-section:is(.is-animated, .is-intro-animated) .location-heading {
  opacity: 1;
  transform: translateY(0);
}
.location-section.is-animated .location-map,
.location-section.is-map-animated .location-map {
  clip-path: inset(0);
  opacity: 1;
  transform: translateY(0);
}
.location-section.is-animated .location-map > img,
.location-section.is-map-animated .location-map > img {
  transform: scale(1);
}
/* ================================================================
  06. Premium features carousel
================================================================ */
.premium-section {
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff url("../images/bg-premium.png") center bottom / 100% auto no-repeat;
  color: #322e1f;
}
.premium-section .premium-layout {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}
.premium-section .premium-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}
.premium-section .premium-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 1;
  transform: translate3d(100%, 0, 0);
  transition:
    transform 1.05s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 1.05s;
  will-change: transform;
}
.premium-section.is-slide-immediate .premium-slide {
  transition: none !important;
}
.premium-section .premium-slide.is-active {
  z-index: 2;
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
.premium-section .premium-slide.is-before {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transform: translate3d(-100%, 0, 0);
  transition-delay: 0s;
}
.premium-section .premium-copy {
  position: absolute;
  left: 8.333%;
  top: 35.914%;
  width: min(515px, 38%);
}
.premium-section .premium-kicker {
  margin: 0;
  font-family: "Trajan Pro", var(--serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.premium-section .premium-intro {
  margin: 40px 0 0;
  font-size: 18px;
  line-height: 1.5;
}
.premium-section .premium-heading {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 8px;
  white-space: nowrap;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.4px;
}
.premium-section .premium-heading i {
  display: block;
  width: 288px;
  height: 1px;
  background: #322e1f;
}
.premium-section .premium-heading strong {
  font-weight: 700;
}
.premium-section .premium-detail {
  width: 51.845%;
  margin: 40px 0 0 48.155%;
  text-align: right;
}
.premium-section .premium-detail h2 {
  margin: 0 0 12px;
  color: #c4a676;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.premium-section .premium-detail p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  white-space: nowrap;
}
.premium-section .premium-gallery {
  container-type: inline-size;
  position: absolute;
  left: 47.708%;
  top: 22.043%;
  width: 43.958%;
  aspect-ratio: 1.4821;
  max-height: 71.183%;
}
.premium-section .premium-crop {
  position: absolute;
  overflow: hidden;
  background: #5d1515;
}
.premium-section .premium-crop::before {
  content: "";
  position: absolute;
  width: 126.777cqw;
  height: 84.479cqw;
  background: var(--premium-traffic-image, none) center/100% 100% no-repeat;
}
.premium-section.is-image-ready {
  --premium-traffic-image: url("../images/premium-traffic.webp");
  --premium-healing-image: url("../images/premium-healing.webp");
  --premium-infra-image: url("../images/premium-infra.webp");
  --premium-value-image: url("../images/premium-value.webp");
}
.premium-section .premium-crop-left {
  left: 0;
  top: 0;
  width: 32.464%;
  height: 47.583%;
  border-radius: 48px 120px 48px 48px;
}
.premium-section .premium-crop-left::before {
  left: -13.389cqw;
  top: -3.555cqw;
}
.premium-section .premium-crop-bottom {
  left: 24.289%;
  bottom: 0;
  width: 32.464%;
  height: 47.583%;
  border-radius: 48px 48px 120px 48px;
}
.premium-section .premium-crop-bottom::before {
  left: -37.678cqw;
  top: -44.668cqw;
}
.premium-section .premium-crop-tall {
  right: 0;
  top: 0;
  width: 39.692%;
  height: 100%;
  border-radius: 34px;
}
.premium-section .premium-crop-tall::before {
  left: -73.697cqw;
  top: -3.555cqw;
}
.premium-section .premium-gallery b {
  position: absolute;
  z-index: 2;
  left: 1.2%;
  top: 31.269%;
  color: #322e1f;
  font-family: "Antro Vectra", cursive;
  font-size: 150px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.8px;
  white-space: nowrap;
  transform: rotate(-15deg);
  transform-origin: center;
}
.premium-section .premium-slide-traffic b {
  left: 1.185%;
  top: 31.269%;
  width: 68.293%;
  height: 36.332%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.premium-section .premium-slide-healing .premium-crop::before {
  width: 149.052cqw;
  height: 98.341cqw;
  background-image: var(--premium-healing-image, none);
}
.premium-section .premium-crop-healing-top {
  left: 24.289%;
  top: 0;
  width: 32.464%;
  height: 47.583%;
  border-radius: 48px 120px 48px 48px;
}
.premium-section .premium-crop-healing-top::before {
  left: -35.9cqw;
  top: -19.905cqw;
}
.premium-section .premium-crop-healing-bottom {
  left: 0;
  bottom: 0;
  width: 32.464%;
  height: 47.583%;
  border-radius: 48px 48px 120px 48px;
}
.premium-section .premium-crop-healing-bottom::before {
  left: -11.611cqw;
  top: -61.019cqw;
}
.premium-section .premium-crop-healing-tall {
  right: 0;
  top: 0;
  width: 39.692%;
  height: 100%;
  border-radius: 34px;
}
.premium-section .premium-crop-healing-tall::before {
  left: -71.919cqw;
  top: -19.905cqw;
}
.premium-section .premium-slide-healing b {
  left: 2.725%;
  top: 78.999%;
  transform: none;
}
.premium-section .premium-gallery-infra .premium-crop::before {
  width: 118.365cqw;
  height: 78.91cqw;
  background-image: var(--premium-infra-image, none);
}
.premium-section .premium-crop-infra-top {
  left: 0;
  top: 0;
  width: 78.436%;
  height: 45.619%;
  border-radius: 34px 120px 34px 34px;
}
.premium-section .premium-crop-infra-top::before {
  left: 0;
  top: 0;
}
.premium-section .premium-crop-infra-bottom {
  right: 0;
  bottom: 0;
  width: 78.436%;
  height: 50.604%;
  border-radius: 34px 34px 34px 120px;
}
.premium-section .premium-crop-infra-bottom::before {
  right: 0;
  bottom: 0;
}
.premium-section .premium-slide-infra b {
  left: 51%;
  top: 19%;
}
.premium-section .premium-slide-value .premium-crop::before {
  width: 121.564cqw;
  height: 80.924cqw;
  background-image: var(--premium-value-image, none);
}
.premium-section .premium-crop-value-top {
  left: 0;
  top: 0;
  width: 70.972%;
  height: 47.583%;
  border-radius: 48px 120px 48px 48px;
}
.premium-section .premium-crop-value-top::before {
  left: -3.436cqw;
  top: 0;
}
.premium-section .premium-crop-value-bottom {
  left: 28.555%;
  bottom: 0;
  width: 42.417%;
  height: 47.583%;
  border-radius: 120px 48px 48px 48px;
}
.premium-section .premium-crop-value-bottom::before {
  left: -31.991cqw;
  top: -41.114cqw;
}
.premium-section .premium-crop-value-small {
  right: 0;
  bottom: 0;
  width: 24.526%;
  height: 47.583%;
  border-radius: 34px 34px 120px 34px;
}
.premium-section .premium-crop-value-small::before {
  left: -78.91cqw;
  top: -41.114cqw;
}
.premium-section .premium-slide-value b {
  left: 51.185%;
  top: 6.95%;
  transform: none;
}

/* Premium 1—4 shared staged motion */
.premium-section .premium-slide .premium-kicker,
.premium-section .premium-slide .premium-intro,
.premium-section .premium-slide .premium-heading > span,
.premium-section .premium-slide .premium-heading > strong,
.premium-section .premium-slide .premium-detail,
.premium-section .premium-slide .premium-crop,
.premium-section .premium-slide b {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-duration: 1.2s;
  transition-timing-function: ease;
  will-change: opacity, transform;
}
.premium-section .premium-slide .premium-kicker {
  transform: translate3d(-48px, 0, 0);
}
.premium-section .premium-slide .premium-intro {
  transform: translate3d(48px, 0, 0);
}
.premium-section .premium-slide .premium-heading > span {
  transform: scale(0.78);
  transform-origin: center;
  filter: brightness(1.8);
}
.premium-section .premium-slide .premium-heading > i {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.premium-section .premium-slide .premium-heading > strong {
  transform: translate3d(16px, 0, 0);
  filter: brightness(2.2);
}
.premium-section .premium-slide .premium-detail {
  transform: translate3d(0, 48px, 0);
}
.premium-section .premium-slide .premium-crop:nth-of-type(1) {
  transform: translate3d(0, -56px, 0);
}
.premium-section .premium-slide .premium-crop:nth-of-type(2) {
  transform: translate3d(-56px, 0, 0);
}
.premium-section .premium-slide .premium-crop:nth-of-type(3) {
  transform: translate3d(0, 56px, 0);
}
.premium-section .premium-slide-infra .premium-crop:nth-of-type(2) {
  transform: translate3d(0, 56px, 0);
}
.premium-section .premium-slide b {
  transform: translate3d(56px, 0, 0) rotate(-15deg);
}
.premium-section .premium-slide-healing b {
  transform: translate3d(56px, 0, 0);
}
.premium-section .premium-slide-infra b {
  transform: translate3d(56px, 0, 0) rotate(30deg);
}
.premium-section .premium-slide-value b {
  transform: translate3d(56px, 0, 0);
}

.premium-section .premium-slide .premium-crop::before {
  transform: scale(1.08);
  transition: transform 2.5s ease;
  will-change: transform;
}

.premium-section.is-premium-ready .premium-slide.is-active :is(.premium-kicker, .premium-intro, .premium-heading > span, .premium-heading > strong, .premium-detail, .premium-crop, b) {
  opacity: 1;
  filter: none;
}
.premium-section.is-premium-ready .premium-slide.is-active :is(.premium-kicker, .premium-intro, .premium-heading > span, .premium-heading > strong, .premium-detail, .premium-crop) {
  transform: translate3d(0, 0, 0) scale(1);
}
.premium-section.is-premium-ready .premium-slide.is-active .premium-crop::before {
  transform: scale(1);
}
.premium-section.is-premium-ready .premium-slide.is-active .premium-heading > i {
  transform: scaleX(1);
  transition-delay: 0.5s;
}
.premium-section.is-premium-ready .premium-slide.is-active b {
  transform: translate3d(0, 0, 0) rotate(-15deg);
  transition-delay: 0.4s;
}
.premium-section.is-premium-ready :is(.premium-slide-healing, .premium-slide-value).is-active b {
  transform: translate3d(0, 0, 0);
}
.premium-section.is-premium-ready .premium-slide-infra.is-active b {
  transform: translate3d(0, 0, 0) rotate(30deg);
}
.premium-section.is-premium-ready .premium-slide.is-active .premium-kicker {
  transition-delay: 0.2s;
}
.premium-section.is-premium-ready .premium-slide.is-active .premium-intro {
  transition-delay: 0.3s;
}
.premium-section.is-premium-ready .premium-slide.is-active .premium-heading > span {
  transition-delay: 0.4s;
}
.premium-section.is-premium-ready .premium-slide.is-active .premium-heading > strong {
  transition-delay: 0.6s;
}
.premium-section.is-premium-ready .premium-slide.is-active .premium-detail {
  transition-delay: 0.9s;
}
.premium-section.is-premium-ready .premium-slide.is-active .premium-crop:nth-of-type(1) {
  transition-delay: 0.2s;
}
.premium-section.is-premium-ready .premium-slide.is-active .premium-crop:nth-of-type(2) {
  transition-delay: 0.4s;
}
.premium-section.is-premium-ready .premium-slide.is-active .premium-crop:nth-of-type(3) {
  transition-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .premium-section .premium-slide,
  .premium-section .premium-slide * {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ================================================================
  07. Contact / Directions
================================================================ */
.contact-section {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  overflow: hidden;
  background: #312e20;
  color: #fff;
}
.contact-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -46.3%;
  bottom: 0;
  width: 88.1%;
  aspect-ratio: 1691 / 1339;
  background: url("../images/contact-pattern.png") center/cover no-repeat;
  opacity: 0.1;
  pointer-events: none;
}
.contact-section .contact-content {
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: clamp(170px, 22.15vh, 206px) 40px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.contact-section .contact-title {
  padding: 0;
  text-align: center;
}
.contact-section .contact-title h2 {
  margin: 0;
  color: #fff;
  font-family: "Trajan Pro", var(--serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}
.contact-section .contact-title p {
  margin: 20px 0 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.2px;
}
.contact-section .contact-map {
  width: 100%;
  aspect-ratio: 913 / 539;
  overflow: hidden;
  border-radius: 20px;
  background: #403c2a;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
}
.contact-section .contact-map-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.contact-section .contact-info {
  width: 404px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  align-items: stretch;
}
.contact-section .contact-links {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 20px;
}
.contact-section .contact-info > .contact-info-row {
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
  border: 0;
  text-align: left;
}
.contact-section .contact-info > .contact-info-row:first-child {
  padding-bottom: 40px;
  /*border-bottom: 1px solid rgba(255, 255, 255, 0.22);*/
}
.contact-section .contact-address {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.contact-section .contact-address > strong {
  width: auto;
  flex: none;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.18px;
}
.contact-section .contact-address address {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 17px;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.17px;
  white-space: nowrap;
}
.contact-section .contact-map-link {
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 42px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 21px;
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
  white-space: nowrap;
}
.contact-section .contact-map-link--naver {
  width: 183px;
  gap: 16px;
  background: #222;
}
.contact-section .contact-map-link--kakao {
  width: 189px;
  gap: 10px;
  background: #635713;
}
.contact-section .contact-map-link--naver img {
  width: 15px;
  height: 16px;
}
.contact-section .contact-map-link--kakao img {
  width: 19px;
  height: 27px;
}
.contact-section .contact-map-link strong {
  font-weight: 700;
}
.contact-section .contact-right {
  width: min(1332px, 100%);
  margin-top: clamp(72px, 13.12vh, 122px);
  display:flex;
  gap: 100px;
  align-items: center;
}
.contact-section .contact-right .contact-map {
  width: 100%;
  max-width: 676px;
  aspect-ratio: 676 / 398;
  margin: 0;
}
.contact-section .contact-right .contact-info {
  width: min(404px, 100%);
  justify-self: center;
}

@media (prefers-reduced-motion: reduce) {
  .main-visual .brand-intro-message,
  .main-visual .brand-intro-photo {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .main-visual .brand-intro-photo::before {
    filter: brightness(1);
    transform: none;
    transition: none;
  }
  .main-visual [data-brand-motion="title"],
  .main-visual [data-brand-motion="line"],
  .main-visual [data-brand-motion="copy-right"],
  .main-visual [data-brand-motion="copy-left"] {
    opacity: 1;
      transform: none;
    transition: none;
    animation: none;
  }
  .location-section .location-intro p,
  .location-section .location-intro h2,
  .location-section .location-heading,
  .location-section .location-map,
  .location-section .location-map > img {
    opacity: 1;
      transform: none;
    transition: none;
  }
  .project-summary .project-summary-intro p,
  .project-summary .project-summary-intro h2 {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }
  .project-summary .project-summary-bg {
    opacity: 0.7;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }
  .project-summary .project-summary-title h2,
  .project-summary .project-summary-title p,
  .project-summary .project-summary-grid article {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =================================================================
   04. Responsive
================================================================= */

/*
 * TABLE OF CONTENTS
 * ----------------------------------------------------------------
 * 00. Breakpoint guide
 * 01. Shared responsive layout / Touch devices
 * 02. Tablet / Small desktop (600px - 1199px)
 * 03. Reduced motion
 * 04. Mobile (320px - 599px)
 * ----------------------------------------------------------------
 */

/* ================================================================
  01. Shared responsive layout / Touch devices
================================================================ */
@media (max-width: 1199px), (hover: none) and (pointer: coarse) {
  :root {
    --page-gutter: clamp(20px, 5vw, 48px);
    --content-width: 920px;
    --mobile-header-height: 72px;
    --hero-viewport-height: 100vh;
  }
  @supports (height: 100svh) {
    :root {
      --hero-viewport-height: 100svh;
    }
  }

  html.is-mobile,
  html.is-mobile body {
    height: auto;
    overflow-x: clip;
    overflow-y: auto;
  }
  html.menu-open,
  html.menu-open body {
    overflow: hidden !important;
  }
  html.is-mobile .fullpage,
  html.is-mobile .main-section,
  html.is-mobile .footer-section {
    height: auto !important;
    min-height: 0;
  }
  .main-section {
    min-height: 0;
  }

  /* Header and full-screen navigation */
  .header {
    position: fixed;
    height: var(--mobile-header-height);
    color: #fff;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }
  .header::before,
  .header::after {
    display: none;
  }
  .header .navi {
    width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
    height: var(--mobile-header-height);
    grid-template-columns: 1fr auto;
  }
  .header .logo img {
    width: clamp(77px, 12vw, 120px);
  }
  .header .logo,
  .header .reserve,
  .header .tel-wrap {
    transition: opacity 0.4s ease;
  }
  .header .top-fixed-wrap {
    gap: clamp(16px, 2.5vw, 24px);
  }
  .header .reserve {
    order: 1;
    display: block;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
  }
  .header .reserve img {
    display: block;
    width: 24px;
    height: 24px;
  }
  .header .reserve span,
  .header .reserve::after,
  .header .tel-wrap span {
    display: none;
  }
  .header .tel-wrap {
    order: 2;
    display: flex;
  }
  .header .tel-icon {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
  }
  .header .mobile-menu-toggle {
    position: relative;
    z-index: 104;
    order: 3;
    display: grid;
    width: 24px;
    height: 24px;
    align-content: center;
    gap: 5px;
    touch-action: manipulation;
  }
  .header .mobile-menu-toggle img {
    position: absolute;
    inset: 0;
    display: block;
    width: 24px;
    height: 24px;
    transition:
      opacity 0.35s ease,
      transform 0.4s ease,
      filter 0.3s ease;
  }
  .header .mobile-menu-toggle .menu-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
  .header .mobile-menu-toggle .close-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.82);
  }
  .header.menu-open .mobile-menu-toggle .menu-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.82);
  }
  .header.menu-open .mobile-menu-toggle .close-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
  .header.menu-open {
    position: fixed;
    color: #322e1f;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .header.is-scrolled {
    color: #322e1f;
    background: #fff;
    border-bottom-color: rgb(50 46 31 / 10%);
    box-shadow: 0 8px 24px rgb(26 31 36 / 8%);
    backdrop-filter: blur(12px);
  }
  .header:not(.is-scrolled):not(.menu-open):hover,
  .header:not(.is-scrolled):not(.menu-open):focus-within {
    color: #fff;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .header:not(.is-scrolled):not(.menu-open):is(:hover, :focus-within) .logo > img,
  .header:not(.is-scrolled):not(.menu-open):is(:hover, :focus-within) .reserve img,
  .header:not(.is-scrolled):not(.menu-open):is(:hover, :focus-within) .mobile-menu-toggle .menu-icon {
    filter: none;
  }
  .header:not(.is-scrolled):not(.menu-open):is(:hover, :focus-within) .tel-icon {
    filter: brightness(0) invert(1);
  }
  .header.is-scrolled .logo > img,
  .header.is-scrolled .tel-icon,
  .header.is-scrolled .reserve img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(12%) saturate(1126%) hue-rotate(8deg) brightness(91%) contrast(87%);
  }
  .header.is-scrolled .mobile-menu-toggle .menu-icon,
  .header:hover .mobile-menu-toggle .menu-icon,
  .header:focus-within .mobile-menu-toggle .menu-icon {
    filter: brightness(0) saturate(100%);
  }
  .header.menu-open .logo > img,
  .header.menu-open .tel-icon,
  .header.menu-open .reserve img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(12%) saturate(1126%) hue-rotate(8deg) brightness(91%) contrast(87%);
  }
  .header:hover .reserve img,
  .header:focus-within .reserve img,
  .header:hover .tel-icon,
  .header:focus-within .tel-icon {
    filter: brightness(0) saturate(100%) invert(16%) sepia(12%) saturate(1126%) hue-rotate(8deg) brightness(91%) contrast(87%);
  }
  .header .gnb {
    position: fixed;
    z-index: 102;
    inset: 0;
    width: 100%;
    display: flex;
    padding: calc(var(--mobile-header-height) + 32px) var(--page-gutter) 48px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: auto;
    overscroll-behavior: contain;
    background: #f8f3ed url("../images/bg-brand-message.png") center/cover no-repeat;
    color: #322e1f;
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
    backface-visibility: hidden;
    contain: layout paint;
    will-change: transform;
    transition:
      transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.45s;
  }
  .header.menu-open .gnb {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition:
      transform 1s ease,
      visibility 0s linear 0s;
  }
  .header .gnb-item {
    display: block;
    width: min(100%, 760px);
    height: auto;
    min-height: 0;
    flex-shrink: 0;
    margin-inline: auto;
    padding: 0;
    border-bottom: 1px solid rgb(50 46 31 / 16%);
    opacity: 0;
    transform: translate3d(10%, 0, 0);
    transition:
      opacity 0.4s ease,
      transform 0.4s ease;
  }
  .header.menu-open .gnb-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 0.8s ease,
      transform 0.8s ease;
  }
  .header.menu-open .gnb-item:nth-child(1) {
    transition-delay: 0.6s;
  }
  .header.menu-open .gnb-item:nth-child(2) {
    transition-delay: 0.7s;
  }
  .header.menu-open .gnb-item:nth-child(3) {
    transition-delay: 0.8s;
  }
  .header.menu-open .gnb-item:nth-child(4) {
    transition-delay: 0.9s;
  }
  .header.menu-open .gnb-item:nth-child(5) {
    transition-delay: 1s;
  }
  .header.menu-open .gnb-item:nth-child(6) {
    transition-delay: 1.1s;
  }
  .header.menu-open .gnb-item:nth-child(7) {
    transition-delay: 1.2s;
  }
  .header .gnb-item > .depth1 {
    display: flex;
    width: 100%;
    height: clamp(66px, 8vw, 82px);
    min-height: clamp(66px, 8vw, 82px);
    padding: 0;
    align-items: center;
    justify-content: space-between;
    color: #322e1f;
    font-family: var(--serif);
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    line-height: 1.5;
  }
  .header .gnb-item > .depth1:focus {
    outline: none;
  }
  .header .gnb-item > .depth1:focus-visible {
    outline: 2px solid #c4a676;
    outline-offset: -2px;
  }
  .header .gnb-item > .depth1::before {
    content: "";
    position: static;
    order: 2;
    display: block;
    width: 9px;
    height: 9px;
    border: 0;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    background: transparent;
    opacity: 0.65;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .header .gnb-item.is-open > a::before {
    transform: rotate(225deg);
  }

  .header .gnb-item:not(.is-open) > a {
    color: #322e1f;
  }
  .header .gnb-item:not(.is-open) > a::before {
    opacity: 0.65;
    transform: rotate(45deg);
  }
  .header .gnb-item.is-open > a {
    color: #c4a676;
  }
  .header .depth2 {
    position: static;
    display: block;
    width: 100%;
    min-width: 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .header.menu-open .gnb-item:not(.is-open) > .depth2,
  .header:hover .gnb-item:not(.is-open) > .depth2,
  .header:focus-within .gnb-item:not(.is-open) > .depth2 {
    max-height: 0;
  }

  .header:hover .depth2,
  .header:focus-within .depth2,
  .header.menu-open .depth2 {
    transform: none;
  }
  .header .depth2 > a {
    position: relative;
    z-index: 1;
    display: block;
    padding: 7px 0;
    color: #6e6a5e;
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.65;
    text-align: left;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: color 0.3s ease;
  }
  .header .depth2 > a:last-child {
    margin-bottom: 22px;
  }
  .header .gnb-item.is-open > .depth2 > a {
    display: block !important;
    color: #6e6a5e !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Main visual */
  .main-visual {
    height: unset !important;
    position: relative;
    display: block;
    overflow: visible;
    background: #f8f3ed;
  }
  .main-visual::after {
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .main-visual::before,
  .main-visual::after {
    inset: 0;
    height: var(--hero-viewport-height);
  }
  html.is-mobile .main-visual::before {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  .main-visual.is-intro.is-brand-preview::before {
    transform: none;
    filter: none;
    animation: none;
    transition: none;
    will-change: auto;
  }
  .main-visual .main-visual-title {
    letter-spacing: var(--hero-title-spacing);
  }
  [data-aos="title-contract"].aos-animate .main-visual-title {
    animation: none;
  }
  .header.is-mobile-intro .logo,
  .header.is-mobile-intro .tel-wrap,
  .header.is-mobile-intro .reserve,
  .header.is-mobile-intro .mobile-menu-toggle {
    animation: mobileHeaderDrop 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
  }
  @keyframes mobileHeaderDrop {
    from {
      opacity: 0;
      transform: translateY(-28px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .main-visual .main-visual-copy {
    position: relative;
    z-index: 2;
    inset: auto;
    margin: 0 auto;
    color: #fff;
    transform: none;
  }
  .main-visual .main-visual-title > span {
    display: block;
  }

  /* Brand introduction */
  .main-visual .brand-intro-panel {
    position: relative;
    inset: auto;
    z-index: 3;
    visibility: visible;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
  }
  .main-visual .brand-intro-copy p {
    width: 100%;
    transform: none;
  }

  /* Project summary */
  .project-summary {
    position: relative;
  }
  .project-summary .project-summary-intro,
  .project-summary .project-summary-content {
    position: relative;
    inset: auto;
  }

  /* Location */
  .location-section .location-intro,
  .location-section .location-heading,
  .location-section .location-map {
    position: relative;
    inset: auto;
  }
  .location-section .location-intro {
    text-align: left;
  }
  .location-section .location-map > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .location-section .location-heading {
    opacity: 0 !important;
  }
  .location-section:is(.is-animated, .is-intro-animated) .location-heading {
    opacity: 1 !important;
  }

  /* Premium features */
  .premium-section {
    min-height: 0 !important;
  }
  .premium-section .premium-slider {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .premium-section .premium-slide {
    position: relative;
    inset: auto;
    visibility: visible;
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }
  .premium-section .premium-copy,
  .premium-section .premium-gallery {
    position: relative;
    inset: auto;
    transform: none;
  }
  .premium-section .premium-heading i {
    flex: 1;
    width: auto;
  }

  /* Contact */
  .contact-section {
    overflow: visible;
  }
  /* Footer */
  .footer-section .site-footer {
    height: auto;
  }
  .footer-section .footer-details {
    align-items: flex-start;
    flex-direction: column;
    gap: 40px;
  }
  .footer-section .footer-notice {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .project-summary .project-summary-title h2,
  .project-summary .project-summary-title p,
  .project-summary .project-summary-grid article {
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .project-summary.is-mobile-summary-animated .project-summary-title h2,
  .project-summary.is-mobile-summary-animated .project-summary-title p,
  .project-summary.is-mobile-summary-animated .project-summary-grid article {
    opacity: 1;
    transform: translate(0);
  }
  .project-summary.is-mobile-summary-animated .project-summary-title h2,
  .project-summary.is-mobile-summary-animated .project-summary-title p {
    transition-delay: 0.2s;
  }
  .project-summary.is-mobile-summary-animated .project-summary-grid article:nth-child(1) {
    transition-delay: 0.7s;
  }
  .project-summary.is-mobile-summary-animated .project-summary-grid article:nth-child(2) {
    transition-delay: 0.82s;
  }
  .project-summary.is-mobile-summary-animated .project-summary-grid article:nth-child(3) {
    transition-delay: 0.94s;
  }
  .project-summary.is-mobile-summary-animated .project-summary-grid article:nth-child(4) {
    transition-delay: 1.06s;
  }
  .project-summary.is-mobile-summary-animated .project-summary-grid article:nth-child(5) {
    transition-delay: 1.18s;
  }
  .project-summary.is-mobile-summary-animated .project-summary-grid article:nth-child(6) {
    transition-delay: 1.3s;
  }
}

/* ================================================================
  02. Tablet / Small desktop (600px - 1199px)
================================================================ */
@media (min-width: 600px) and (max-width: 1199px), (min-width: 600px) and (hover: none) and (pointer: coarse) {
  /* Main visual */
  .main-visual::before {
    background-position: center bottom;
    background-size: auto 95%;
  }
  .main-visual::after {
    width: 100%;
    background: rgb(0 0 0 / 28%);
  }
  .main-visual .main-visual-copy {
    width: min(720px, calc(100% - (var(--page-gutter) * 2)));
    height: var(--hero-viewport-height) !important;
    min-height: var(--hero-viewport-height);
    padding-top: clamp(180px, 22vh, 250px);
  }
  .main-visual .main-visual-copy > p:first-child {
    align-self: center;
    margin: 0;
    position: static;
    font-size: 18px;
    text-align: center;
  }
  .main-visual .main-visual-copy h1 {
    width: 100%;
    margin-top: 28px;
    font-size: clamp(38px, 5vw, 56px);
    line-height: 1.35;
    text-align: center;
    white-space: normal;
  }
  .main-visual .main-visual-title {
    --hero-title-spacing: 0.55em;
    text-indent: 0.55em;
    margin: 0 auto;
  }
  .main-visual .main-visual-invitation {
    display: block;
    margin-top: 24px;
    padding: 0;
    font-size: 22px;
    text-align: center;
    align-self: center;
  }
  .main-visual .opening-badge {
    top: calc(var(--hero-viewport-height) - 162px);
    right: var(--page-gutter);
    bottom: auto;
    left: auto;
    width: 130px;
    height: 130px;
  }

  /* Brand introduction */
  .main-visual .brand-intro-panel {
    display: grid;
    min-height: 720px;
    background: #f8f3ed;
  }
  .main-visual .brand-intro-message {
    position: unset;
    width: 100%;
    height: auto;
    padding: 90px var(--page-gutter);
    background: url("../images/bg-brand-message.png") center/cover no-repeat;
    color: #332e22;
    opacity: 1;
    transform: none;
  }
  .main-visual .brand-intro-content {
    width: min(520px, 100%);
    margin: auto;
    text-align: center;
    transform: none;
  }
  .main-visual .brand-intro-message h2 {
    position: static;
    text-align: center;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.45;
    width: unset;
    align-items: center;
  }
  .main-visual .brand-intro-title-row {
    justify-content: center;
    gap: 50px;
    width: unset;
  }
  .main-visual .brand-intro-line {
    position: relative;
    inset: auto;
    height: 160px;
  }
  .main-visual .brand-intro-copy {
    position: static;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 28px;
    font-size: 15px;
    line-height: 1.75;
    text-align: center;
  }
  .main-visual .brand-intro-photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 720px;
    opacity: 1;
  }

  /* Project summary */
  .project-summary {
    min-height: 1100px !important;
    padding: 100px var(--page-gutter) 380px;
    background: #26415c;
  }
  .project-summary .project-summary-bg {
    inset: 0;
    height: 100%;
    background-position: center 76%;
    background-size: auto 95%;
  }
  .project-summary .project-summary-intro,
  .project-summary .project-summary-content {
    width: min(var(--content-width), 100%);
    margin-inline: auto;
  }
  .project-summary .project-summary-intro p {
    font-size: 20px;
  }
  .project-summary .project-summary-intro h2 {
    max-width: 650px;
    margin-top: 10px;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.45;
  }
  .project-summary .project-summary-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 90px;
    padding: 0;
  }
  .project-summary .project-summary-title h2 {
    font-size: clamp(64px, 9vw, 88px);
  }
  .project-summary .project-summary-title p {
    margin-top: 18px;
    font-size: 19px;
  }
  .project-summary .project-summary-grid {
    margin-top: 50px;
    grid-template: none / repeat(2, minmax(0, 1fr));
    gap: 0 40px;
  }
  .project-summary .project-summary-grid article {
    min-height: 112px;
  }

  /* Location */
  .location-section {
    min-height: 720px !important;
    padding: 90px var(--page-gutter) 0;
  }
  .location-section .location-intro,
  .location-section .location-map {
    right: auto;
    left: auto;
    width: min(var(--content-width), 100%);
    max-width: none;
    margin-inline: auto;
  }
  .location-section .location-intro {
    text-align: left;
  }
  .location-section .location-intro h2,
  .location-section .location-intro strong,
  .location-section .location-intro span {
    word-break: keep-all;
  }
  .location-section .location-intro p {
    font-size: clamp(14px, 2.2vw, 17px);
    white-space: nowrap;
  }
  .location-section .location-intro h2 {
    margin-top: 24px;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.45;
  }
  .location-section .location-heading {
    width: min(var(--content-width), 100%);
    margin: 35px auto -24px;
    font-size: clamp(70px, 11vw, 110px);
    text-align: right;
  }
  .location-section .location-map {
    height: auto;
    aspect-ratio: 913 / 539;
    border-radius: 0;
  }
  /* Premium features */
  .premium-section .premium-slide {
    display: grid;
    min-height: 500px !important;
    grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
    gap: 50px;
    padding: 30px var(--page-gutter);
  }
  .premium-section .premium-copy {
    width: 100%;
    max-width: 440px;
    padding: 0;
    align-self: center;
  }
  .premium-section .premium-intro {
    margin-top: 45px;
  }
  .premium-section .premium-heading {
    gap: 20px;
    margin-top: 8px;
    font-size: clamp(32px, 4vw, 48px);
  }
  .premium-section .premium-detail {
    width: 100%;
    margin: 46px 0 0;
    text-align: left;
  }
  .premium-section .premium-detail p {
    white-space: normal;
  }
  .premium-section .premium-gallery {
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 251;
    margin: 0;
    align-self: center;
  }

  .premium-section .premium-slide b {
    font-size: 48px;
  }

  /* Footer */
  .footer-section .footer-inner {
    width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
    padding: 64px 0 38px;
  }
  .footer-section .footer-address {
    width: 100%;
  }

  .footer-section .footer-address span {
    word-break: keep-all;
  }
}

/* ================================================================
  03. Reduced motion
================================================================ */
@media (prefers-reduced-motion: reduce) {
  .header .gnb,
  .header .gnb-item,
  .header .mobile-menu-toggle img {
    transition-duration: 0.01ms !important;
  }
  .main-visual [data-brand-motion] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .project-summary :is(.project-summary-intro p, .project-summary-intro h2, .project-summary-title h2, .project-summary-title p, .project-summary-grid article) {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .project-summary .project-summary-bg {
    opacity: 0.7 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .location-section :is(.location-intro p, .location-intro h2, .location-map, .location-map > img) {
    opacity: 1 !important;
    clip-path: inset(0) !important;
    transform: none !important;
    transition: none !important;
  }
  .location-section .location-heading {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .premium-section .premium-slide :is(.premium-kicker, .premium-intro, .premium-heading > span, .premium-heading > strong, .premium-detail, .premium-crop, b) {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .premium-section .premium-heading > i,
  .premium-section .premium-crop::before {
    transform: none !important;
    transition: none !important;
  }
}

/* ================================================================
  04. Mobile (320px - 599px)
================================================================ */
@media (max-width: 599px) {
  :root {
    --page-gutter: clamp(16px, 5.55vw, 20px);
  }

  /* Header */
  .header .navi {
    width: calc(100% - 36px);
    margin-right: 16px;
    margin-left: 20px;
  }
  .header .logo img {
    width: 77px;
    height: 24px;
  }
  .header .top-fixed-wrap {
    gap: 20px;
  }
  .header .reserve,
  .header .reserve img {
    width: 24px;
    height: 24px;
  }
  .header .tel-icon {
    width: 28px;
    height: 28px;
  }
  .header .mobile-menu-toggle {
    width: 24px;
    height: 24px;
  }

  .header.menu-open .logo,
  .header.menu-open .reserve,
  .header.menu-open .tel-wrap {
    opacity: 1;
    pointer-events: auto;
  }
  .header.menu-open.is-scrolled {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .header .gnb {
    padding: 72px 20px 40px;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
  }
  .header .gnb-item {
    width: min(320px, 100%);
    margin: 0;
    border-bottom-color: #ddd;
  }
  .header .gnb-item:last-child {
    border-bottom: 0;
  }
  .header .gnb-item > .depth1 {
    height: auto;
    min-height: 0;
    padding: 0 0 20px;
    justify-content: center;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.18px;
    text-align: center;
  }
  .header .gnb-item > .depth1::before {
    display: none;
  }
  .header .gnb-item:not(.is-open) > a {
    color: #1e1e1e;
  }
  .header .depth2 > a {
    padding: 6px 0;
    font-size: 14px;
    text-align: center;
  }
  .header .depth2 > a:last-child {
    margin-bottom: 20px;
  }

  /* Main visual */
  .site-intro-window {
    top: 0;
    height: 100%;
    --intro-mask-axis-y: var(--intro-axis-offset);
  }
  .site-intro-window::after {
    inset: 0;
    height: 100%;
    background-image: url("../images/hero-apartment2-mobile-figma.png?v=20260824");
    background-color: #000;
    background-position: center;
    background-size: cover;
    transform: none;
  }
  .main-visual::before {
    top: 0;
    bottom: auto;
    background-image: url("../images/hero-apartment2-mobile-figma.png?v=20260824");
    background-color: #000;
    background-position: center;
    background-size: cover;
  }
  .main-visual::after {
    top: 0;
    bottom: auto;
    width: 100%;
    background: transparent;
  }
  .main-visual::before,
  .main-visual::after {
    height: 115.278vw;
  }
  .main-visual .main-visual-copy {
    width: calc(100% - (var(--page-gutter) * 2));
    height: 115.278vw !important;
    min-height: 115.278vw;
    gap: 3.889vw;
    justify-content: center;
    padding-top: var(--mobile-header-height);
    box-sizing: border-box;
  }
  .main-visual .main-visual-copy > p:first-child {
    align-self: center;
    margin-left: 0;
    position: static;
    font-size: clamp(14px, 4.444vw, 16px);
    text-align: center;
  }
  .main-visual .main-visual-copy h1 {
    width: 100%;
    margin-top: 0;
    font-size: clamp(20px, 6.111vw, 22px);
    line-height: 1.5;
    text-align: center;
    white-space: normal;
  }
  .main-visual .main-visual-title {
    /* Includes the visible spaces between every letter in the Figma source. */
    --hero-title-spacing: 0.55em;
    text-indent: 0.55em;
    max-width: 309px;
    margin: 0 auto;
  }
  .main-visual .main-visual-invitation {
    align-self: center;
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 0;
    font-size: clamp(17px, 5.556vw, 20px);
    text-align: center;
  }
  .main-visual .opening-badge {
    display: none;
    top: auto;
    right: clamp(8px, 2.315vw, 10px);
    bottom: clamp(11px, 3.056vw, 14px);
    left: auto;
    width: clamp(102px, 31.944vw, 115px);
    height: clamp(102px, 31.944vw, 115px);
  }
  .main-visual .opening-badge-text {
    font-size: 12px;
  }
  .mobile-grand-open-bar {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: 50px;
    padding: 0 0 env(safe-area-inset-bottom);
    box-sizing: content-box;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }
  .mobile-grand-open-bar > * {
    width: 50%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4a676;
  }
  .mobile-grand-open-date {
    background: #292928;
    font-size: 15px;
    letter-spacing: -0.15px;
  }
  .mobile-grand-open-register {
    background: #403c2a;
    font-size: 16px;
    text-decoration: none;
  }
  html.menu-open .mobile-grand-open-bar {
    opacity: 0;
    pointer-events: none;
  }

  /* Brand introduction */
  .main-visual .brand-intro-panel {
    height: auto;
    min-height: 752px;
    background: #f8f3ed url("../images/bg-brand-message.png") center/cover no-repeat;
  }
  .main-visual .brand-intro-message {
    position: static;
    left: auto;
    display: block;
    width: 100%;
    height: 100%;
    padding: 80px clamp(20px, 8.889vw, 32px);
    background: transparent;
    color: #332e22;
    opacity: 1;
    transform: none;
  }
  .main-visual .brand-intro-content {
    width: 100%;
    height: 100%;
    text-align: center;
    transform: none;
  }
  .main-visual .brand-intro-message h2 {
    position: static;
    width: 100%;
    align-items: center;
    font-size: clamp(25px, 7.778vw, 28px);
    line-height: 1.43;
    text-align: center;
  }
  .main-visual .brand-intro-title-row {
    width: 100%;
    justify-content: center;
    gap: clamp(24px, 9.167vw, 33px);
  }
  .main-visual .brand-intro-line {
    position: relative;
    inset: auto;
    height: 194px;
  }
  .main-visual .brand-intro-copy {
    position: static;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 30px;
    font-size: clamp(13px, 4.444vw, 16px);
    line-height: 1.5;
    text-align: center;
  }
  .main-visual .brand-intro-copy p + p {
    margin: 0;
  }
  .main-visual .brand-intro-photo {
    display: none;
  }

  /* Project summary */
  .project-summary {
    min-height: 1700px !important;
    padding: 80px var(--page-gutter) 417px;
    background: #26415c;
  }
  .project-summary .project-summary-bg {
    inset: 0;
    height: 100%;
    background-image: url("../images/bg-night_panel_mo.jpg");
    background-position: center bottom !important;
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: none !important;
    opacity: 1 !important;
  }
  .project-summary .project-summary-intro {
    width: 100%;
  }
  .project-summary .project-summary-intro p {
    font-size: clamp(17px, 5.556vw, 20px);
    line-height: 1.5;
  }
  .project-summary .project-summary-intro h2 {
    max-width: 320px;
    margin-top: 8px;
    font-size: clamp(25px, 7.778vw, 28px);
    line-height: 1.5;
  }
  .project-summary .project-summary-content {
    width: 100%;
    margin-top: 80px;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .project-summary .project-summary-title {
    width: 100%;
    height: auto;
  }
  .project-summary .project-summary-title h2 {
    font-size: clamp(46px, 15.556vw, 56px);
  }
  .project-summary .project-summary-title p {
    margin: 20px 0 0 6px;
    font-size: clamp(17px, 5.556vw, 20px);
  }
  .project-summary .project-summary-grid {
    width: 100%;
    grid-template: none / 1fr;
    gap: 10px;
    padding: 30px 15px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
  }
  .project-summary .project-summary-grid article {
    display: grid;
    min-height: 86px;
    grid-template-columns: 1fr;
    align-items: start;
  }
  .project-summary .project-summary-grid span {
    padding: 0 0 12px;
    border-bottom: 1px solid rgb(255 255 255 / 30%);
    font-size: clamp(19px, 6.111vw, 22px);
  }
  .project-summary .project-summary-grid span img {
    width: 24px;
    height: 24px;
  }
  .project-summary .project-summary-grid strong {
    margin: 20px 0 0;
    font-size: 14px;
    text-align: right;
    font-weight: 500;
  }

  /* Location */
  .location-section {
    min-height: 578px !important;
    padding: 80px var(--page-gutter) 3px;
  }
  .location-section .location-intro {
    width: 100%;
  }
  .location-section .location-intro p {
    font-size: clamp(17px, 5.556vw, 20px);
    line-height: 1.5;
    white-space: normal;
  }
  .location-section .location-intro h2 {
    margin-top: 20px;
    font-size: clamp(24px, 7.778vw, 28px);
    line-height: 1.5;
  }
  .location-section .location-heading {
    margin-top: 30px;
    font-size: clamp(50px, 16.667vw, 60px);
    text-align: left;
  }
  .location-section .location-map {
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 320 / 188;
    border-radius: 0;
  }
  /* Premium features */
  .premium-section .premium-slide {
    display: block;
    width: 100%;
    min-height: 781px !important;
    padding: 80px var(--page-gutter);
  }
  .premium-section .premium-copy {
    width: 100%;
    padding: 0;
  }
  .premium-section .premium-kicker {
    font-size: clamp(14px, 4.444vw, 16px);
  }
  .premium-section .premium-intro {
    margin-top: 40px;
    font-size: 18px;
  }
  .premium-section .premium-heading {
    gap: clamp(20px, 11.111vw, 40px);
    margin-top: 8px;
    font-size: clamp(34px, 11.111vw, 40px);
  }
  .premium-section .premium-detail {
    width: 100%;
    margin: 40px 0 0;
    text-align: right;
  }
  .premium-section .premium-detail h2 {
    margin-bottom: 12px;
    font-size: clamp(18px, 5.556vw, 20px);
  }
  .premium-section .premium-detail p {
    font-size: clamp(12px, 3.889vw, 14px);
    line-height: 1.43;
    white-space: normal;
  }
  .premium-section .premium-gallery {
    width: min(320px, 100%);
    height: 251px;
    margin: 40px auto 0;
  }
  .premium-section .premium-gallery b {
    font-size: 42px;
  }
  .premium-section.is-premium-ready .premium-slide.is-active .premium-crop:nth-of-type(1) {
    transition-delay: 1.3s;
  }
  .premium-section.is-premium-ready .premium-slide.is-active .premium-crop:nth-of-type(2) {
    transition-delay: 1.5s;
  }
  .premium-section.is-premium-ready .premium-slide.is-active .premium-crop:nth-of-type(3) {
    transition-delay: 1.7s;
  }
  .premium-section.is-premium-ready .premium-slide.is-active b {
    transition-delay: 1.5s;
  }

  /* Contact background crop */
  .contact-section::before {
    top: -149px;
    right: auto;
    bottom: auto;
    left: -1181px;
    width: 1691px;
    height: 1339px;
    aspect-ratio: auto;
    background-position: center;
    background-size: 1691px 1339px;
    opacity: 0.1;
  }
  /* Footer */

  .footer-section .footer-inner {
    width: calc(100% - (var(--page-gutter) * 2));
    padding: 60px 0;
  }
  .footer-section .footer-primary {
    gap: 60px;
  }
  .footer-section .footer-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 40px;
  }
  .footer-section .footer-logo {
    width: 154px;
    height: 48px;
  }
  .footer-section .footer-phone {
    font-size: 24px;
  }
  .footer-section .footer-address > div {
    grid-template-columns: 72px 1fr;
    align-items: flex-start;
  }
  .footer-section .footer-address strong,
  .footer-section .footer-address span {
    font-size: 14px;
  }
  .footer-section .footer-notice {
    font-size: 12px;
    line-height: 1.5;
  }

  .footer-section .footer-copyright {
    margin-top: 30px;
    font-size: 12px;
    text-align: right;
  }
}

/* =================================================================
   06. Pending page dialog
================================================================= */
html.is-pending-dialog-open { overflow: hidden; }
.pending-page-dialog[hidden] { display: none; }
.pending-page-dialog {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: grid;
  place-items: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .68);
  opacity: 0;
  transition: opacity .2s ease;
}
.pending-page-dialog.is-open { opacity: 1; }
.pending-page-dialog__panel {
  width: min(390px, 100%);
  padding: 40px;
  box-sizing: border-box;
  border-radius: 20px;
  outline: 0;
  background: #f8f3ed;
  color: #322d1e;
  transform: translateY(10px) scale(.985);
  transition: transform .2s ease;
}
.pending-page-dialog.is-open .pending-page-dialog__panel { transform: none; }
.pending-page-dialog__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pending-page-dialog__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pending-page-dialog__heading h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.28px;
}
.pending-page-dialog__heading img {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}
.pending-page-dialog__content p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.16px;
}
.pending-page-dialog__confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 56px;
  margin-top: 37px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: #635713;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}
.pending-page-dialog__confirm img {
  width: 13.3335px;
  height: 8px;
  transform: rotate(-90deg);
}
.pending-page-dialog__confirm:focus-visible { outline: 2px solid #322d1e; outline-offset: 3px; }
@media (max-width: 420px) {
  .pending-page-dialog__panel { padding: 28px; }
  .pending-page-dialog__heading h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pending-page-dialog,
  .pending-page-dialog__panel { transition: none; }
}

/* =================================================================
   MERGED SUBPAGE STYLES
================================================================= */
/* =================================================================
   05. Subpages
================================================================= */

/*
 * TABLE OF CONTENTS
 * ----------------------------------------------------------------
 * 00. Sub-page scope / Header state
 * 01. Shared hero / Breadcrumb / Page title
 * 02. Business overview gallery / Slider / Thumbnails
 * 03. Business overview information
 * 04. Location overview / Map / Benefits
 * 05. Contact / Directions
 * 06. Premium showcase
 * 07. Responsive: compact desktop (1350px)
 * 08. Responsive: tablet (1024px)
 * 09. Responsive: vertical tablet (768px)
 * 10. Responsive: mobile (640px)
 * 11. Responsive: contact / directions
 * 12. Responsive: premium showcase
 * ----------------------------------------------------------------
 */

/* ================================================================
  00. Sub-page scope / Header state
================================================================ */
.sub-page {
  --sub-brown: #312e20;
  --sub-ink: #222;
  --sub-line: #ededed;
  --sub-content: 1200px;
  color: var(--sub-ink);
  background: #fff;
  word-break: keep-all;
}

.sub-page .header.is-scrolled {
  background: #fff;
  color: #222;
  border-bottom: 1px solid #edf0f3;
}

.sub-wrap > .overview,
.sub-wrap > .environment-overview {
  padding-bottom: 0;
}
.sub-wrap > .premium-showcase .premium-showcase__list {
  padding-bottom: 0;
}
.subpage-notice {
  display: flex;
  align-items: center;
  gap: 60px;
  width: min(var(--sub-content), calc(100% - 40px));
  margin: 76px auto 80px;
  padding: 20px 40px;
  border-radius: 8px;
  color: #222;
  background: rgba(29, 29, 28, 0.08);
}
.subpage-notice > img {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
}
.subpage-notice p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 2;
  word-break: keep-all;
}
.subpage-notice strong {
  font-weight: 700;
}

@media (max-width: 640px) {
  .subpage-notice {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    margin: 60px auto 50px;
    padding: 20px;
  }
  .subpage-notice > img {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
  .subpage-notice p {
    margin: 0;
    font-size: 13px;
    line-height: 2;
    word-break: break-all;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .sub-wrap > .subpage-notice {
    margin-top: 100px;
  }
}

/* ================================================================
  01. Shared hero / Breadcrumb / Page title
================================================================ */
.sub-hero {
  position: relative;
  height: 430px;
  overflow: hidden;
  color: #fff;
  background: #000;
}
.sub-hero::after {
  position: absolute;
  z-index: 0;
  inset: -2px;
  background: url("../images/sub-hero.png") center 85% / cover no-repeat;
  content: "";
  filter: brightness(0.55);
  transform: scale(1.12);
  transform-origin: center center;
  transition:
    filter 1.6s ease,
    transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.sub-hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  content: "";
}
.sub-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding-top: 70px;
  text-align: center;
}
.sub-hero h2 {
  --sub-hero-title-spacing: 5rem;
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.5;
  opacity: 0;
  text-transform: uppercase;
  transform: translateX(0.325em);
  transition:
    letter-spacing 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
    opacity 1s ease 0.35s,
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.sub-hero__eyebrow {
  margin: 10px 0 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.8s ease 0.85s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.85s;
}
.sub-hero.is-intro-visible::after {
  filter: brightness(1);
  transform: scale(1);
}
.sub-hero.is-intro-visible h2 {
  opacity: 1;
  transform: translateX(0.1em);
  animation: subHeroTitleContract 1.2s 1.4s both;
}
.sub-hero.is-intro-visible .sub-hero__eyebrow {
  opacity: 1;
  transform: translateY(0);
}
@keyframes subHeroTitleContract {
  from {
    padding-left: var(--sub-hero-title-spacing);
    letter-spacing: var(--sub-hero-title-spacing);
  }
  to {
    padding-left: 0;
    letter-spacing: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sub-hero::after,
  .sub-hero h2,
  .sub-hero__eyebrow {
    transition: none;
  }
  .sub-hero.is-intro-visible h2 {
    animation: none;
  }
}

.breadcrumb {
  position: relative;
  z-index: 30;
  height: 65px;
  border-bottom: 1px solid var(--sub-line);
  background: #fff;
}
.breadcrumb-inner {
  display: flex;
  width: min(840px, calc(100% - 40px));
  height: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: #555;
  font-size: 14px;
}
.breadcrumb-inner > i {
  width: 1px;
  height: 18px;
  background: #ddd;
}
.breadcrumb-dropdown {
  position: relative;
  width: 156px;
  height: 100%;
}
.breadcrumb-select {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
  align-items: center;
  justify-content: space-between;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.breadcrumb img {
  display: block;
  width: 12px;
  height: 12px;
}
.breadcrumb-home img {
  width: 20px;
  height: 20px;
}
.breadcrumb-select img {
  transition: transform 0.25s ease;
}
.breadcrumb-dropdown.is-open .breadcrumb-select img {
  transform: rotate(90deg);
}
.breadcrumb-options {
  position: absolute;
  top: 65px;
  left: 0;
  z-index: 10;
  width: 200px;
  padding: 10px 0;
  border: 1px solid var(--sub-line);
  background: #fff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.breadcrumb-options[hidden] {
  display: none;
}
.breadcrumb-options a {
  display: block;
  padding: 9px 18px;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}
.breadcrumb-options a:hover,
.breadcrumb-options a:focus-visible,
.breadcrumb-options a.is-current {
  color: #c4a676;
  background: #faf8f4;
}

.section-heading {
  padding-top: 100px;
  text-align: center;
}
.section-heading h1 {
  margin: 0;
  color: #000;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
}
.section-heading span {
  display: block;
  width: 1px;
  height: 40px;
  margin: 40px auto;
  background: #777;
}

/* ================================================================
  Promotion video
================================================================ */
.promotion-video {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 60px;
}

.promotion-video__frame {
  position: relative;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}

.promotion-video__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  .promotion-video {
    width: calc(100% - 40px);
    padding-bottom: 40px;
  }

  .promotion-video__frame {
    aspect-ratio: 16 / 9;
  }
}

/* ================================================================
  02. Business overview gallery / Slider / Thumbnails
================================================================ */
.overview {
  width: min(var(--sub-content), calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 100px;
}
.overview-gallery {
  display: grid;
  grid-template-columns: minmax(0, 995px) 177px;
  gap: 20px;
  align-items: end;
}
.overview-slider {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 700px;
  overflow: hidden;
  background: #f4f4f2;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.overview-slider:focus-visible {
  outline: 2px solid var(--sub-brown);
  outline-offset: 3px;
}
.overview-track {
  position: relative;
  height: 100%;
}
.overview-slide {
  height: 100%;
}
.overview-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}
.overview-slider:active {
  cursor: grabbing;
}
.thumb-list {
  width: 177px;
  min-width: 0;
  height: 226px;
  overflow: hidden;
}
.thumb-list button {
  position: relative;
  display: block;
  width: 177px;
  height: 99px !important;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #f4f4f2;
  cursor: pointer;
}
.thumb-list button > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb-list .swiper-slide-thumb-active {
  border: 2px solid var(--sub-brown);
}
.thumb-list .swiper-slide-thumb-active > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center bottom;
}
.thumb-list .swiper-slide-thumb-active::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(49, 46, 32, 0.7);
  content: "";
}
.thumb-list .swiper-slide-thumb-active::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: url("../images/icon-check.svg") center / 24px 24px no-repeat;
  content: "";
}

/* ================================================================
  03. Business overview information
================================================================ */
.overview-grid {
  display: grid;
  margin-top: 60px;
  grid-template-columns: 381px 382px 381px;
  gap: 27px 28px;
}
.overview-item {
  min-width: 0;
}
.overview-item dt {
  display: flex;
  padding-bottom: 12px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(34, 34, 34, 0.3);
}
.overview-item dt span {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.22px;
}
.overview-item img {
  width: 24px;
  height: 24px;
}
.overview-item dd {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.14px;
  text-align: right;
}

/* ================================================================
  04. Location overview / Map / Benefits
================================================================ */
.environment-overview {
  padding-bottom: 140px;
}
.environment-overview__copy {
  position: relative;
  height: 470px;
  color: var(--sub-brown);
  text-align: center;
}
.environment-overview__copy > p {
  width: min(100%, 680px);
  margin: 0 auto;
  font-family: "Trajan Pro", serif;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0;
}
.environment-overview__copy h2 {
  margin: 20px 0 0;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.environment-overview__copy h2 strong {
  font-weight: 700;
}
.environment-overview__word {
  font-family: "Trajan Pro", serif;
  font-size: clamp(52px, 7vw, 100px);
  font-weight: 700;
  line-height: 1;
  opacity: 0.1;
  white-space: nowrap;
  margin-top :100px;
  display: block;
}
.environment-overview__map {
  position: relative;
  height: 971px;
  margin: 0;
  overflow: hidden;
  background: #d9d9d9;
}
.environment-overview__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.environment-benefits {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 100px 0 140px;
}
.environment-benefit {
  position: relative;
  display: grid;
  min-height: 222px;
  padding-top: 40px;
  grid-template-columns: 440px 267px 1fr;
  gap: 72px;
  color: var(--sub-brown);
}
.environment-benefit::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 512px;
  height: 1px;
  background: rgba(49, 46, 32, 0.15);
  content: "";
}
.environment-benefit h2 {
  margin: 0;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.environment-benefit h2 span {
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 2px #b8b8b8;
  paint-order: stroke fill;
}
.environment-benefit h3 {
  margin: 0 0 12px;
  color: #c4a676;
  font-size: 20px;
  line-height: 1.5;
}
.environment-benefit p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.environment-benefit b {
  align-self: center;
  font-family: "Antro Vectra", cursive;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

/* ================================================================
  05. Contact / Directions
================================================================ */
.location-guide {
  width: min(1332px, calc(100% - 48px));
  margin: 0 auto;
  padding: 52px 92px;
  display: grid;
  grid-template-columns: minmax(0, 676px) minmax(360px, 404px);
  align-items: center;
  justify-content: space-between;
  gap: 67px;
  border-radius: 30px;
  background: #f7f4f3;
  box-sizing: border-box;
}
.location-guide__map {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #403c2a;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
}
.location-guide__map img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 676 / 398;
  object-fit: fill;
}
.location-guide__details {
  display: flex;
  width: 100%;
  margin: 0;
  flex-direction: column;
  gap: 40px;
}
.location-guide__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 35px 12px;
  align-items: center;
  text-align: left;
}
.location-guide__item:first-child {
  padding-bottom: 40px;
  /*border-bottom: 1px solid rgba(30, 30, 30, 0.12);*/
}
.location-guide__item h2 {
  margin: 0;
  color: #1e1e1e;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.18px;
}
.location-guide__item address {
  margin: 0;
  color: rgba(30, 30, 30, 0.8);
  font-size: 17px;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.16px;
}
.location-guide__links {
  grid-column: 1 / -1;
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.location-guide .location-map-link--naver {
  width: 183px;
}
.location-guide .location-map-link--kakao {
  width: 189px;
}
.location-map-link {
  display: inline-flex;
  height: 42px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.location-map-link:hover,
.location-map-link:focus-visible {
  opacity: 0.86;
  transform: translateY(-2px);
}
.location-map-link strong {
  font-weight: 700;
}
.location-map-link img {
  display: block;
  flex: none;
  object-fit: contain;
}
.location-map-link--naver {
  gap: 16px;
  background: #222;
}

.location-map-link--kakao {
  gap: 10px;
  background: #635713;
}

/* ================================================================
  06. Premium showcase
================================================================ */
.premium-showcase {
  overflow: hidden;
  background: url("../images/premium-line.svg") center -260px / 1920px 929px no-repeat;
}
.premium-showcase__list {
  width: min(1260px, calc(100% - 48px));
  margin: 0 auto;
  padding: 80px 0 150px;
}
.premium-card {
  display: grid;
  height: 430px;
  grid-template-columns: 414px 612px 267px;
  gap: 0;
  align-items: start;
}
.premium-card:not(:last-child) {
  margin-bottom: 80px;
}
.premium-card:first-child {
  margin-bottom: 259px;
}
.premium-card__title {
  position: relative;
  z-index: 2;
  padding-top: 33px;
  color: var(--sub-brown);
  white-space: nowrap;
}
.premium-card__title > p,
.premium-card__title > strong {
  display: block;
  width: 390px;
  color: #c4a676;
  font-family: "Athena", "Trajan Pro", serif;
  font-size: 75px;
  font-weight: 400;
  line-height: 1;
}
.premium-card__title > p {
  letter-spacing: 0.05em;
}
.premium-card__title > strong {
  margin-top: 17px;
  letter-spacing: -0.01em;
}
.premium-card__title > small {
  display: block;
  margin-top: 35px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}
.premium-card__title h2 {
  display: flex;
  margin: 8px 0 0;
  gap: 23px;
  align-items: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
}
.premium-card__title h2 span {
  font-weight: 400;
}
.premium-card__image {
  position: relative;
  z-index: 1;
  width: 586px;
  height: 430px;
  margin: 0;
  overflow: hidden;
  border-radius: 20px 20px 150px;
  background: #111;
}
.premium-card:nth-child(2) .premium-card__image {
  border-radius: 150px 20px 20px;
}
.premium-card:nth-child(3) .premium-card__image {
  border-radius: 20px 150px 20px 20px;
}
.premium-card:nth-child(4) .premium-card__image {
  border-radius: 20px 20px 20px 150px;
}
.premium-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.premium-card:nth-child(2) .premium-card__image img {
  object-position: 55% center;
}
.premium-card__copy {
  position: relative;
  left: 0;
  padding-top: 197px;
  color: var(--sub-brown);
}
.premium-card__copy b {
  display: block;
  margin-bottom: 20px;
  font-family: "Antro Vectra", cursive;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.2px;
}
.premium-card__copy h3 {
  margin: 0 0 12px;
  color: #c4a676;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.premium-card__copy p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
}
.premium-card__nowrap {
  white-space: nowrap;
}

/* ================================================================
  07. Responsive: compact desktop (1350px)
================================================================ */
@media (max-width: 1350px) {
  .overview-gallery {
    grid-template-columns: minmax(0, 1fr) 150px;
  }
  .thumb-list button {
    width: 150px;
  }
  .thumb-list {
    width: 150px;
  }
  .overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 30px;
  }
}

/* ================================================================
  08. Responsive: tablet (1024px)
================================================================ */
@media (max-width: 1024px) {
  .sub-hero h2 {
    --sub-hero-title-spacing: 3rem;
  }
  .sub-hero {
    height: 400px;
  }
  .sub-hero::after {
    background-position: center 85%;
    background-size: cover;
  }
  .sub-hero__content {
    padding-top: 0;
  }
  .overview {
    width: min(900px, calc(100% - 64px));
    padding: 0 0 110px;
  }
  .overview-gallery {
    display: block;
  }
  .overview-slider {
    height: auto;
  }
  .thumb-list {
    width: 100%;
    height: calc((min(900px, calc(100vw - 64px)) - 12px) * 0.28125);
    margin-top: 16px;
  }
  .thumb-list button {
    width: calc((100% - 12px) / 2);
    height: 100% !important;
    aspect-ratio: auto;
  }
  .overview-grid {
    margin-top: 48px;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 30px;
  }
  .section-heading {
    padding-top: 80px;
  }
  .environment-overview__copy {
    height: 390px;
    padding-inline: 32px;
  }
  .environment-overview__copy h2 {
    font-size: 24px;
  }
  .environment-overview__copy h2 strong{
    font-size: 22px;
  }

  .environment-overview__map {
    height: 530px;
  }
  .environment-benefits {
    width: calc(100% - 64px);
    padding-block: 80px 100px;
  }
  .environment-benefit {
    grid-template-columns: 240px 1fr 160px;
    gap: 30px;
  }
  .environment-benefit::before {
    left: 270px;
  }
  .environment-benefit h2 {
    font-size: 44px;
  }
  .environment-benefit b {
    font-size: 32px;
  }
}

/* ================================================================
  09. Responsive: vertical tablet (768px)
================================================================ */
@media (max-width: 768px) {
  .environment-overview__copy {
    height: 600px;
    padding-inline: 20px;
  }
  .environment-overview__copy > p {
    width: min(100%, 560px);
    font-size: 20px;
  }


  .environment-overview__map {
    height: 420px;
  }
  .environment-overview__map img {
    position: relative;
    top: calc(50% - 62px);
    left: calc(50% + 45px);
    width: 799px;
    max-width: none;
    height: 470px;
    transform: translate(-50%, -50%);
  }
  .environment-benefits {
    width: calc(100% - 40px);
    padding: 100px 0 20px;
  }
  .environment-benefit {
    display: block;
    min-height: 390px;
    padding: 0;
  }
  .environment-benefit::before {
    top: 112px;
    right: 0;
    left: 0;
  }
  .environment-benefit::after {
    position: absolute;
    right: 0;
    bottom: 40px;
    left: 0;
    height: 1px;
    background: rgba(49, 46, 32, 0.15);
    content: "";
  }
  .environment-benefit h2 {
    font-size: 44px;
  }
  .environment-benefit > div {
    margin-top: 80px;
  }
  .environment-benefit h3 {
    font-size: 18px;
  }
  .environment-benefit b {
    display: block;
    font-size: 32px;
    margin-top: 30px;
    text-align: left;
  }
}

/* ================================================================
  10. Responsive: mobile (640px)
================================================================ */
@media (max-width: 640px) {
  .sub-hero h2 {
    --sub-hero-title-spacing: 1.5rem;
  }
  .sub-hero {
    height: 430px;
  }
  .sub-hero::after {
    inset: 0;
    background-position: calc(50% - 75px) -616px;
    background-size: 1200px 1200px;
  }
  .breadcrumb-inner {
    width: calc(100% - 40px);
    font-size: 13px;
  }
  .breadcrumb-dropdown {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }
  .breadcrumb-options {
    width: 100%;
    min-width: 140px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
  .breadcrumb-dropdown:last-child .breadcrumb-options {
    right: 0;
    left: auto;
  }
  .overview {
    width: calc(100% - 40px);
    padding: 0 0 100px;
  }
  .overview-slider {
  }
  .thumb-list {
    width: calc(100% + 20px);
    height: 99px;
    max-width: none;
    min-width: 0;
    margin-top: 20px;
  }
  .thumb-list button {
    width: 177px;
    height: 99px !important;
  }
  .overview-grid {
    margin-top: 40px;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .overview-item {
    height: 86px;
  }
  .sub-page .footer-section .footer-inner {
    width: calc(100% - 40px);
  }
  .environment-overview__copy {
    height: auto;
    padding-bottom: 80px;
  }
.environment-overview__word{
  margin-top: 80px;
}

  .environment-overview__map {
    height: 300px;
  }
  .environment-benefit {
    min-height: 462px;
  }
  .environment-benefit h2 {
    font-size: 40px;
  }
  .environment-benefit > div {
    margin-top: 104px;
  }
  .environment-benefit h3 {
    font-size: 20px;
  }
  .environment-benefit b {
    font-size: 40px;
  }
}

/* ================================================================
  11. Responsive: contact / directions
================================================================ */
@media (max-width: 1024px) {
  .location-guide {
    padding: 40px;
    gap: 40px;
  }
  .location-guide__details {
    gap: 48px;
  }
  .location-guide__item + .location-guide__item::before {
    left: -24px;
  }
  .location-guide__links {
    gap: 10px;
  }
  .location-map-link {
    padding-inline: 16px;
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .location-guide {
    padding: 0;
    grid-template-columns: 1fr;
    gap: 40px;
    border-radius: 0;
    background: transparent;
  }
  .location-guide__map {
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
  }
  .location-guide__details {
    display: flex;
    width: 100%;
    margin: 0;
    gap: 40px;
  }
  .location-guide__item + .location-guide__item {
    padding-top: 0;
  }
  .location-guide__item + .location-guide__item::before {
    display: none;
  }
  .location-guide__item:first-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .location-guide__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
  .location-guide__item h2 {
    display: flex;
    gap: 4px;
  }
  .location-guide__item address {
    margin-top: -8px;
    font-size: 16px;
    text-align: center;
  }
  .location-guide__links {
    width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 20px;
  }
  .location-guide .location-map-link--naver,
  .location-guide .location-map-link--kakao {
    width: 189px;
  }
}
@media (max-width: 640px) {
  .location-map-link {
    width: 189px;
    height: 42px;
    padding-inline: 20px;
    font-size: 17px;
  }
}

/* ================================================================
  12. Responsive: premium showcase
================================================================ */
@media (max-width: 1350px) {
  .premium-card {
    grid-template-columns: minmax(210px, 267px) minmax(430px, 586px) minmax(210px, 267px);
    gap: 28px;
  }
  .premium-card__image {
    width: 100%;
  }
  .premium-card__title > p,
  .premium-card__title > strong {
    font-size: 64px;
  }
}
@media (max-width: 1024px) {
  .premium-showcase__list {
    width: calc(100% - 64px);
  }
  .premium-card {
    height: 360px;
    grid-template-columns: 190px minmax(320px, 1fr) 200px;
    gap: 22px;
  }
  .premium-card__image {
    height: 360px;
  }
  .premium-card__title > p,
  .premium-card__title > strong {
    font-size: 48px;
  }
  .premium-card__title > small {
    margin-top: 52px;
    font-size: 15px;
  }
  .premium-card__title h2 {
    gap: 12px;
    font-size: 32px;
  }
  .premium-card__copy h3 {
    font-size: 18px;
  }
  .premium-card__copy p {
    font-size: 13px;
  }
}
@media (max-width: 768px) {
  .premium-showcase {
    background-position: center -120px;
    background-size: 1200px auto;
  }
  .premium-showcase__list {
    width: calc(100% - 40px);
    padding: 60px 0 100px;
  }
  .premium-card {
    display: flex;
    height: auto;
    margin-bottom: 100px;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .premium-card:last-child {
    margin-bottom: 0;
  }
  .premium-card:first-child {
    margin-bottom: 100px;
  }
  .premium-card__title {
    order: 1;
    padding-top: 0;
  }
  .premium-card__image {
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 586 / 430;
    border-radius: 16px 16px 80px;
  }
  .premium-card:nth-child(2) .premium-card__image {
    border-radius: 80px 16px 16px;
  }
  .premium-card:nth-child(3) .premium-card__image {
    border-radius: 16px 80px 16px 16px;
  }
  .premium-card:nth-child(4) .premium-card__image {
    border-radius: 16px 16px 16px 80px;
  }
  .premium-card__copy {
    left: 0;
    order: 3;
    padding-top: 0;
  }
  .premium-card__title > p,
  .premium-card__title > strong {
    width: auto;
    font-size: 50px;
  }
  .premium-card__title > strong {
    margin-top: 12px;
  }
  .premium-card__title > small {
    margin-top: 28px;
    font-size: 16px;
  }
  .premium-card__title h2 {
    margin-top: 6px;
    font-size: 40px;
  }
  .premium-card__copy b {
    margin-bottom: 16px;
  }
}
@media (max-width: 640px) {
  .premium-showcase {
    background: none;
  }
  .premium-showcase__list {
    width: calc(100% - 40px);
    padding: 0 0 60px;
  }
  .premium-card {
    display: block;
    height: auto;
    margin: 0 0 100px;
  }
  .premium-card:last-child {
    margin-bottom: 0;
  }
  .premium-card:first-child {
    margin-bottom: 100px;
  }
  .premium-card__title > p,
  .premium-card__title > strong {
    width: auto;
    font-size: 50px;
    line-height: 1;
  }
  .premium-card__title > strong {
    margin-top: 0;
  }
  .premium-card__title > small {
    margin-top: 40px;
    font-size: 18px;
    line-height: 1.5;
  }
  .premium-card__title h2 {
    margin-top: 8px;
    gap: 23px;
    font-size: 40px;
    line-height: 1.2;
  }
  .premium-card__image,
  .premium-card:nth-child(2) .premium-card__image,
  .premium-card:nth-child(3) .premium-card__image,
  .premium-card:nth-child(4) .premium-card__image {
    width: 100%;
    height: 235px;
    margin-top: 20px;
    aspect-ratio: auto;
    border-radius: 16px 16px 100px;
  }
  .premium-card:nth-child(2) .premium-card__image {
    border-radius: 100px 16px 16px;
  }
  .premium-card:nth-child(3) .premium-card__image,
  .premium-card:nth-child(4) .premium-card__image {
    border-radius: 16px 100px 16px 16px;
  }
  .premium-card__copy {
    width: 267px;
    margin-top: 20px;
  }
  .premium-card__copy b {
    margin-bottom: 20px;
    font-size: 20px;
  }
  .premium-card__copy h3 {
    margin-bottom: 12px;
    font-size: 20px;
  }
  .premium-card__copy p {
    font-size: 14px;
    line-height: 1.8;
  }
}

@media (max-width: 1024px) {
  .environment-overview {
    padding-bottom: 100px;
  }
}
@media (max-width: 640px) {
  .environment-overview {
    padding-bottom: 60px;
  }
}

@media (max-width: 1199px) {
  .contact-section {
    /*min-height: 877px !important;*/
    min-height: 700px !important;

    padding: 80px 20px 74px;
    display: block;
  }
  .contact-section .contact-content {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0px;
  }
  .contact-section .contact-title {
    position: static;
    width: 100%;
    text-align: left;
  }
  .contact-section .contact-title h2 {
    font-size: 40px;
    line-height: 1;
  }
  .contact-section .contact-title p {
    margin-top: 20px;
    font-size: 20px;
    line-height: 1.5;
  }
  .contact-section .contact-right {
    width: 100%;
    margin: 0 auto;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    transform: none;
  }
  .contact-section .contact-right .contact-map {
    position: static;
    width: 100%;
    margin: 0;
    aspect-ratio: 320/189;
    border-radius: 20px;
  }
  .contact-section .contact-right .contact-info {
    position: static;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .contact-section .contact-info > .contact-info-row {
    width: 100%;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border: 0;
    text-align: center;
  }

  .contact-section .contact-info > .contact-info-row:first-child{
    padding-bottom: 0;
    border-bottom: none;
  }
  .contact-section .contact-address {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .contact-section .contact-address > strong {
    width: auto;
    flex: none;
    display: flex;
    gap: 4px;
    font-size: 18px;
    line-height: 1;
  }
  .contact-section .contact-address address {
    font-size: 16px;
    line-height: 1;
    text-align: center;
  }
  .contact-section .contact-links {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
  }
  .contact-section .contact-map-link {
    width: 160px;
    height: 38px;
    padding: 0 20px;
    font-size: 13px;
  }
  .contact-section .contact-map-link--naver {
    gap: 16px;
  }
  .contact-section .contact-map-link--kakao {
    gap: 10px;
  }
  .contact-section .contact-map-link--naver img {
    width: 15px;
    height: 16px;
  }
  .contact-section .contact-map-link--kakao img {
    width: 15px;
    height: 22px;
  }
}

/* =================================================================
   Additional subpage components
   00. Shared content
   01. Community
   02. System tabs
   03. Neighborhood facility
   04. Unit plan
   05. Environment map stack
   06. Included appliances
   07. Complex design
   08. Site layout
================================================================= */

/* 00. Shared content */
.sub-image-notice {
  margin: 14px 0 0;
  color: #222;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-align: left;
}

.sub-content-intro {
  margin: 0 0 76px;
  color: var(--sub-brown);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.sub-content-intro span {
  display: block;
}

/* 01. Community */
.community {
  width: min(var(--sub-content), calc(100% - 48px));
  margin: 0 auto;
}

.community figure {
  margin: 0;
}

.community img {
  display: block;
  max-width: 100%;
}

.community__photos {
  display: grid;
  gap: 28px;
  margin-bottom: 80px;
}

.community__photos--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.community__photos--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.community__photos figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 381 / 202;
  border-radius: 8px;
  background: #eee;
}

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

.community__photos figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 155px;
  padding: 10px 16px;
  border-radius: 20px 0 0;
  background: rgba(196, 166, 118, 0.9);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
}

.community__facilities {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.community-row {
  display: grid;
  grid-template-columns: 688px 1fr;
  min-height: 340px;
  align-items: start;
  gap: 40px;
}

.community-row--reverse {
  grid-template-columns: 1fr 688px;
}

.community-card {
  overflow: hidden;
  width: 688px;
  height: 340px;
  border-radius: 8px;
}

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

.community-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-row:not(.community-row--reverse) .community-legend {
  padding-left: 0;
}

.community-row--reverse .community-legend {
  justify-self: end;
  padding-right: 0;
}

.community-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #222;
  font-size: 14px;
  line-height: 17px;
  white-space: nowrap;
}

.community-legend img {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.community__second-group {
  margin-top: 100px;
}

@media (max-width: 768px) {
  .community {
    width: min(100% - 32px, var(--sub-content));
  }

  .community__photos--three,
  .community__photos--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-row,
  .community-row--reverse {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .community-row--reverse .community-card {
    order: -1;
  }

  .community-card {
    width: 100%;
    height: auto;
    aspect-ratio: 688 / 340;
  }

  .community-row--reverse .community-legend {
    align-self: stretch;
  }

  .community-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

@media (max-width: 640px) {
  .community {
    width: min(100% - 40px, var(--sub-content));
  }
  .community-row{
    min-height: unset;
  }
  .community > .sub-content-intro,
  .community__second-group > .sub-content-intro {
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.02em;
  }

  .community__photos {
    margin-bottom: 40px;
  }

  .community__photos--three {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .community__photos--three figure {
    aspect-ratio: 320 / 202;
  }

  .community__photos--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 8px;
  }

  .community__photos--four figure {
    aspect-ratio: 156 / 140;
  }

  .community__photos--four figcaption {
    min-width: 106px;
    padding: 10px 16px;
    font-size: 16px;
    line-height: 24px;
  }

  .community__facilities {
    gap: 40px;
  }

  .community-row,
  .community-row--reverse {
    gap: 20px;
  }

  .community-legend {
    grid-template-columns: repeat(2, minmax(0, 154px));
    gap: 12px;
  }

  .community__second-group {
    margin-top: 80px;
  }
}

/* 02. System tabs */
.system-page {
  width: min(var(--sub-content), calc(100% - 48px));
  margin: 0 auto;
}

.system-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}

.system-tab {
  height: 45px;
  border: 0;
  border-radius: 6px;
  background: #f0f0f0;
  color: #111;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.system-tab.is-active {
  background: #c4a676;
  color: #fff;
  font-weight: 700;
}

.system-tab:focus-visible {
  outline: 2px solid #322e1f;
  outline-offset: 3px;
}

.system-panel[hidden] {
  display: none;
}

.system-section + .system-section {
  margin-top: 80px;
}

.system-copy {
  margin-bottom: 40px;
}

.system-copy h2 {
  margin: 0;
  color: #322e1f;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
}

.system-copy h2 span {
  display: block;
}

.system-copy p {
  margin: 20px 0 0;
  color: #222;
  font-size: 16px;
  line-height: 1.5;
}

.system-visual-group {
  overflow: hidden;
  border-radius: 8px;
}

.system-main-image {
  display: block;
  width: 100%;
  height: auto;
}

.system-detail-box {
  padding: 60px;
  background: #f5f5f5;
}

.system-detail-box--diagram {
  padding-right: 120px;
  padding-left: 120px;
}

.system-detail-box--diagram img {
  display: block;
  width: 100%;
  height: auto;
}

.system-feature-images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.system-feature-images img {
  display: block;
  width: 100%;
  height: auto;
}

.system-feature-grid {
  display: grid;
  gap: 40px 28px;
  margin-top: 40px;
}

.system-feature-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.system-feature-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.system-feature-grid article {
  min-width: 0;
}

.system-feature-grid h3 {
  margin: 0;
  color: #c4a676;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.system-feature-grid p {
  margin: 10px 0 0;
  color: #222;
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .system-page {
    width: min(100% - 40px, var(--sub-content));
  }

  .system-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 40px;
  }

  .system-tab {
    height: 45px;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
  }

  .system-section + .system-section {
    margin-top: 40px;
  }

  .system-copy {
    margin-bottom: 40px;
  }

  .system-copy h2 {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
  }

  .system-copy p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .system-copy p br {
    display: none;
  }

  .system-detail-box,
  .system-detail-box--diagram {
    padding: 20px;
  }

  .system-visual-group {
    border-radius: 4px;
  }

  .system-feature-images {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .system-feature-grid,
  .system-feature-grid--3,
  .system-feature-grid--4 {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
  }

  .system-feature-grid h3 {
    font-size: 18px;
    line-height: 1.5;
  }

  .system-feature-grid p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
  }
}

/* 03. Neighborhood facility */
.neighborhood-facility {
  width: min(var(--sub-content), calc(100% - 48px));
  margin: 0 auto;
}

.neighborhood-facility__intro {
  margin: 0 0 80px;
  color: #322e1f;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.neighborhood-facility__intro--mobile {
  display: none;
}

.neighborhood-facility__images {
  position: relative;
}

.neighborhood-facility__images > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.neighborhood-facility__plan {
  position: absolute;
  right: 22px;
  bottom: 20px;
  display: block;
  width: 262px;
  height: 131px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(245, 245, 245, 0.9);
}

.neighborhood-facility__plan img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 214.79px;
  height: 101.68px;
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
  .neighborhood-facility {
    width: calc(100% - 40px);
  }

  .neighborhood-facility__intro--desktop {
    display: none;
  }

  .neighborhood-facility__intro--mobile {
    display: block;
    width: 285px;
    margin: 0 auto 40px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
  }

  .neighborhood-facility__intro--mobile span {
    display: block;
  }

  .neighborhood-facility__images {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .neighborhood-facility__plan {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 131px;
  }

  .neighborhood-facility__plan img {
    position: absolute;
    width: 253px;
    height: 120px;
    border-radius: 0;
    transform: translate(-50%, -50%);
  }
}

/* 04. Unit plan */
.unit-plan {
  width: min(var(--sub-content), calc(100% - 48px));
  margin: 0 auto;
}

.unit-plan__tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}

.unit-plan__tab {
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: #f0f0f0;
  color: #000;
  font: inherit;
  font-size: 20px;
  line-height: 1.5;
  cursor: pointer;
}

.unit-plan__tab.is-active {
  background: #c4a676;
  color: #fff;
  font-weight: 700;
}

.unit-plan__tab:focus-visible {
  outline: 2px solid #322e1f;
  outline-offset: 3px;
}

.unit-plan__panel[hidden] {
  display: none;
}

.unit-plan__content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.unit-plan__banner {
  position: relative;
  width: 100%;
  height: 204px;
  overflow: hidden;
  background: #f7f3eb;
  grid-column: 1 / -1;
}

.unit-plan__banner-copy {
  position: absolute;
  top: 61px;
  left: 352px;
  z-index: 1;
}

.unit-plan__banner-copy h2 {
  margin: 0;
  color: #332e20;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
}

.unit-plan__banner-copy p {
  margin: 14px 0 0;
  color: #222;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

.unit-plan__banner .unit-plan__banner-icon {
  position: absolute;
  top: 36px;
  right: 40px;
  width: 178px;
  height: 132px;
  object-fit: cover;
}

.unit-plan__content {
  display: grid;
  grid-template-columns: 273px 581px 251px;
  align-items: start;
  justify-content: space-between;
  gap: 60px 26px;
}

.unit-plan__summary,
.unit-plan__main-images,
.unit-plan__side-images {
  display: flex;
  flex-direction: column;
}

.unit-plan__summary {
  position: relative;
  height: 883px;
  transform: translateX(32px);
}

.unit-plan__summary img:first-child {
  position: absolute;
  top: -201px;
  left: 0;
}

.unit-plan__concept-image {
  background: transparent;
  mix-blend-mode: multiply;
}

.unit-plan__info {
  position: absolute;
  top: 41px;
  left: 0;
  width: 273px;
  height: 872px;
  border: 1px solid var(--unit-accent);
  box-sizing: border-box;
}

.unit-plan__info h3 {
  margin: 13px 0 0;
  color: var(--unit-accent);
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.unit-plan__households {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 233px;
  height: 34px;
  margin: 20px auto 0;
  background: var(--unit-accent);
  color: #fff;
  line-height: 1;
}

.unit-plan__households strong {
  font-size: 22px;
  font-weight: 700;
}

.unit-plan__households span {
  font-size: 18px;
  font-weight: 400;
}

.unit-plan__areas {
  display: flex;
  width: 233px;
  margin: 8px auto 0;
  padding: 10px;
  box-sizing: border-box;
  flex-direction: column;
  gap: 8px;
  background: #f7f3eb;
}

.unit-plan__areas div {
  display: flex;
  min-height: 20px;
  align-items: center;
  justify-content: space-between;
}

.unit-plan__areas dt,
.unit-plan__areas dd {
  margin: 0;
  color: #222;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.unit-plan__areas dt {
  display: flex;
  width: 86px;
  padding: 4px 8px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.unit-plan__areas div:nth-child(1) dt,
.unit-plan__areas div:nth-child(3) dt,
.unit-plan__areas div:nth-child(5) dt {
  letter-spacing: 8.82px;
  text-indent: 8.82px;
}

.unit-plan__main-images {
  gap: 40px;
  align-self: end;
}

.unit-plan__side-images {
  align-self: end;
  gap: 35px;
}

.unit-plan__side-images--compact {
  width: 118px;
}

.unit-plan__side-images--compact img {
  width: 118px !important;
  max-width: 118px;
}

.unit-plan__notice {
  grid-column: 2 / -1;
  margin-top: -46px;
  padding-inline: 16px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .unit-plan {
    width: calc(100% - 40px);
  }

  .unit-plan__tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 40px;
  }

  .unit-plan__tab {
    font-size: 20px;
  }

  .unit-plan__banner {
    order: 2;
    height: 336px;
  }

  .unit-plan__banner-copy {
    top: 20px;
    left: 20px;
    right: 20px;
  }

  .unit-plan__banner-copy h2 {
    font-size: 24px;
  }

  .unit-plan__banner-copy p {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
  }

  .unit-plan__banner .unit-plan__banner-icon {
    top: 184px;
    right: auto;
    left: 50%;
    width: 178px;
    height: 132px;
    transform: translateX(-50%);
  }

  .unit-plan__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .unit-plan__summary,
  .unit-plan__main-images,
  .unit-plan__side-images {
    width: 100%;
    gap: 20px;
  }

  .unit-plan__summary {
    position: static;
    height: auto;
    order: 1;
    transform: none;
  }

  .unit-plan__summary img:first-child,
  .unit-plan__info {
    position: static;
  }

  .unit-plan__main-images {
    order: 3;
    align-self: auto;
  }

  .unit-plan__side-images {
    order: 4;
  }

  .unit-plan__info {
    width: 100%;
    height: 314px;
  }

  .unit-plan__households,
  .unit-plan__areas {
    width: calc(100% - 38px);
  }

  .unit-plan__summary img,
  .unit-plan__main-images img,
  .unit-plan__side-images img {
    width: 100%;
  }

  .unit-plan__side-images--compact img {
    width: 118px !important;
  }

  .unit-plan__side-images--compact {
    width: 118px;
    margin-right: auto;
    margin-left: auto;
  }

  .unit-plan__notice {
    order: 5;
    padding-inline: 12px;
  }
}

/* 05. Environment map stack */
.environment-overview__maps {
  display: grid;
  width: min(var(--sub-content), calc(100% - 48px));
  margin: 0 auto;
  grid-template-columns: 1fr;
  gap: 40px;
}

.environment-overview__maps .environment-overview__map {
  height: auto;
  overflow: visible;
  background: transparent;
}

.environment-overview__maps .environment-overview__map img {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
}

@media (max-width: 768px) {
  .environment-overview__maps {
    width: calc(100% - 40px);
    gap: 20px;
  }
}

/* 06. Included appliances */
.included-appliances {
  width: min(var(--sub-content), calc(100% - 48px));
  margin: 0 auto;
}

.included-appliances__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.included-appliances__message {
  position: relative;
  display: flex;
  height: 220px;
  padding: 0 60px;
  overflow: hidden;
  box-sizing: border-box;
  align-items: center;
  background-color: #1e1e1e;
  background-image: url("../images/included-appliances/message-pattern.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.included-appliances__message p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.32px;
}

.included-appliances__message strong {
  color: #c4a676;
  font-weight: 700;
}

.included-appliances__visual {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.included-appliances__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.included-appliances__visual figcaption {
  margin: 12px 0 0;
  color: #222;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-align: center;
}

@media (max-width: 768px) {
  .included-appliances {
    width: calc(100% - 40px);
  }

  .included-appliances__message {
    height: 170px;
    padding: 0 20px;
    background-position: center;
    background-size: auto 170px;
  }

  .included-appliances__message p {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.16px;
  }

  .included-appliances__visual figcaption {
    margin-top: 8px;
    line-height: 1.5;
  }
}

/* 07. Complex design */
.complex-design {
  width: min(var(--sub-content), calc(100% - 48px));
  margin: 0 auto;
}

.complex-design__features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 80px;
}

.complex-design-feature {
  position: relative;
  min-height: 144px;
  padding-right: 24px;
}

.complex-design-feature:not(:last-child)::after {
  position: absolute;
  top: 0;
  right: -14px;
  width: 1px;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  content: "";
}

.complex-design-feature > img {
  display: block;
  width: 43px;
  height: 43px;
  margin-bottom: 20px;
}

.complex-design-feature h3 {
  margin: 0 0 12px;
  color: #222;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.complex-design-feature p {
  margin: 0;
  color: #222;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.complex-design figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #eee;
}

.complex-design figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.complex-design__image-label {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  width: 120px;
  height: 37px;
  margin: 0;
  align-items: center;
  justify-content: center;
  border-radius: 8px 0 0;
  color: #fff;
  background: #312e20;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.complex-design__main-image {
  height: 800px;
}

.complex-design__main-image img {
  object-position: center 42%;
}

.complex-design__detail-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.complex-design__detail-images figure {
  height: 586px;
}

.complex-design__detail-images figure:first-child img {
  object-position: 34% center;
}

.complex-design__detail-images figure:last-child img {
  object-position: 53% center;
}

@media (max-width: 1024px) {
  .sub-content-intro {
    margin-bottom: 56px;
    font-size: clamp(30px, 4vw, 38px);
  }

  .complex-design__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 28px;
    margin-bottom: 60px;
  }

  .complex-design-feature:nth-child(2)::after {
    display: none;
  }

  .complex-design__main-image {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .complex-design__detail-images figure {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 640px) {
  .complex-design {
    width: min(100% - 32px, var(--sub-content));
  }

  .sub-content-intro {
    margin-bottom: 44px;
    font-size: 16px;
    line-height: 1.55;
  }

  .complex-design__features {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 48px;
  }

  .complex-design-feature {
    min-height: 0;
    padding: 24px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .complex-design-feature:first-child {
    padding-top: 0;
  }

  .complex-design-feature::after {
    display: none;
  }

  .complex-design-feature > img {
    margin-bottom: 14px;
  }

  .complex-design-feature h3 {
    font-size: 17px;
  }

  .complex-design-feature p {
    font-size: 13px;
  }

  .complex-design-feature p br {
    display: none;
  }

  .complex-design__main-image {
    aspect-ratio: 4 / 5;
  }

  .complex-design__detail-images {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
  }

  .complex-design__detail-images figure {
    aspect-ratio: 1 / 1;
  }
}

/* 08. Site layout */
.site-layout {
  width: min(var(--sub-content), calc(100% - 48px));
  margin: 0 auto;
}

.site-layout figure {
  margin: 0;
}

.site-layout figure img {
  display: block;
  width: 100%;
  height: auto;
}

.site-layout__plan {
  overflow: hidden;
}

.site-layout__plan img {
  aspect-ratio: 1199 / 963;
  object-fit: cover;
}

.site-layout__building-plan {
  margin-top: 80px !important;
}

@media (max-width: 768px) {
  .site-layout {
    width: min(100% - 32px, var(--sub-content));
  }

  .site-layout__plan img {
    aspect-ratio: auto;
    object-fit: contain;
  }

  .sub-image-notice {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.5;
  }

  .site-layout__building-plan {
    margin-top: 48px !important;
  }
}