@font-face {
  font-family: "Paperlogy";
  src: url("../font/Paperlogy-4Regular.ttf");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("../font/Paperlogy-5Medium.ttf");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("../font/Paperlogy-6SemiBold.ttf");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("../font/Paperlogy-7Bold.ttf");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("../font/Paperlogy-8ExtraBold.ttf");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("../font/Paperlogy-9Black.ttf");
  font-weight: 900;
  font-display: swap;
}

:root {
  --fm: #9a0007;
  --fm-hover: #de0000;
  --os: #1e2b6d;
  --os-hover: #0025e3;
}

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

/* common.css와 동일한 rem 기준 (1rem = 10px) */
html {
  font-size: 10px;
  background: #eef1f8;
}

body.landing-page {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: "Paperlogy", sans-serif;
  color: #222;
  background: #eef1f8;
  -webkit-font-smoothing: antialiased;
}

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

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

main.landing {
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: min(4rem, 4vh);
  justify-items: center;
  align-items: center;
}

/* 배경 + marquee (os sec5 패턴) */
.landing-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #eef1f8;
  background-image: url("../os/img/tour-bg.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.sec5-marquee {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.sec5-marquee-mover {
  display: flex;
  width: max-content;
  font-size: min(16rem, 12vw);
  font-weight: 900;
  color: var(--os);
  opacity: 0.04;
  white-space: nowrap;
  line-height: 1;
  animation: sec5-marquee-flow 50s linear infinite;
}

@keyframes sec5-marquee-flow {
  to {
    transform: translateX(-50%);
  }
}

.logo_wrap {
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding: min(10rem, 9vh) min(2.4rem, 4vw) min(2rem, 2vh);
}

.logo_wrap img {
  width: min(76.5rem, 86vw, 90vh);
  height: auto;
  aspect-ratio: 765 / 118;
}

.wrap {
  grid-row: 2;
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(16rem, 8vw);
  width: 100%;
  min-height: 0;
  padding: min(2rem, 2vh) min(2.4rem, 4vw);
}

/* 카드 높이를 기준으로 잡아 어떤 화면비에서도 비율이 유지되도록 처리 */
.left_wrap,
.right_wrap {
  position: relative;
  flex: 0 0 auto;
  height: min(50rem, 100%, 52vw);
  width: auto;
  aspect-ratio: 380 / 500;
  border-radius: min(3rem, 2.4vw);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  transition: box-shadow 0.35s ease;
}

.left_wrap {
  box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--fm) 6%, transparent);
}

.right_wrap {
  box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--os) 6%, transparent);
}

.left_wrap::before,
.right_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  border: min(0.8rem, 1vw) solid var(--fm);
  pointer-events: none;
  transition: border-color 0.35s ease;
}

.right_wrap::before {
  border-color: var(--os);
}

.left_wrap:hover {
  box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--fm-hover) 8%, transparent);
}

.left_wrap:hover::before,
.left_wrap:focus-visible::before {
  border-color: var(--fm-hover);
}

.right_wrap:hover {
  box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--os-hover) 8%, transparent);
}

.right_wrap:hover::before,
.right_wrap:focus-visible::before {
  border-color: var(--os-hover);
}

.left_wrap .bg,
.right_wrap .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

.left_wrap .bg {
  background-image: url("../img/fm.png");
}

.right_wrap .bg {
  background-image: url("../img/os.png");
}

.left_wrap:hover .bg,
.right_wrap:hover .bg {
  transform: scale(1.1);
}

.left_wrap .overlay,
.right_wrap .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, #000 0%, transparent 100%);
  opacity: 0.5;
  pointer-events: none;
}

.floor-info {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: min(2.4rem, 3vw, 2.5vh);
}

.floor-info .floor {
  display: block;
  font-size: min(5.2rem, 4.8vw, 6vh);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: min(1.4rem, 1.4vw, 1.5vh);
}

.floor-info p {
  font-size: min(4rem, 3.6vw, 4.6vh);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.landing-footer {
  grid-row: 3;
  position: relative;
  z-index: 1;
  width: 100%;
  height: min(8rem, 12vh);
  background: #656d71;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(3.2rem, 2.5vw);
  padding: 0 min(4rem, 3vw);
}

.landing-footer .f-logo {
  width: min(26rem, 26vw);
  height: auto;
  aspect-ratio: 260 / 40;
  object-fit: contain;
  flex-shrink: 0;
}

.landing-footer .info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: min(1.6rem, 1.5vw, 2vh);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.landing-footer .info span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.landing-footer .info .label {
  font-style: normal;
  font-weight: 700;
  margin-right: 0.6rem;
}

.landing-footer .info .sep {
  display: block;
  width: 0.15rem;
  height: 1em;
  margin: 0 min(1.4rem, 1.2vw);
  background: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

/* 태블릿 */
@media (max-width: 900px) {
  .logo_wrap {
    padding: min(6rem, 7vh) min(2.4rem, 4vw) min(1.6rem, 2vh);
  }

  .logo_wrap img {
    width: min(76.5rem, 78vw, 80vh);
  }

  .wrap {
    gap: min(8rem, 6vw);
  }

  .left_wrap,
  .right_wrap {
    height: min(50rem, 100%, 50vw);
  }

  .floor-info .floor {
    font-size: min(4.4rem, 5vw, 5.5vh);
  }

  .floor-info p {
    font-size: min(3.2rem, 3.8vw, 4vh);
  }

  .landing-footer {
    gap: min(2rem, 2.5vw);
    padding: 0 min(2.4rem, 3vw);
  }

  .landing-footer .info {
    font-size: min(1.4rem, 1.6vw, 1.8vh);
  }
}

/* 모바일 — 카드 세로 스택 (남는 높이를 두 카드가 나눠 가짐) */
@media (max-width: 600px) {
  main.landing {
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: min(5rem, 5vh);
  }

  .logo_wrap {
    padding: min(3rem, 5vh) min(2.4rem, 6vw) 0;
  }

  .logo_wrap img {
    width: min(76.5rem, 84vw);
  }

  .wrap {
    flex-direction: column;
    gap: min(2.4rem, 3vh);
    padding: min(1.2rem, 1.5vh) min(2.4rem, 6vw);
  }

  .left_wrap,
  .right_wrap {
    flex: 1 1 0;
    width: min(42rem, 82vw);
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: min(2.4rem, 4vw);
  }

  .left_wrap::before,
  .right_wrap::before {
    border-width: min(0.6rem, 1.4vw);
  }

  .floor-info .floor {
    font-size: min(4rem, 8vw);
    margin-bottom: min(0.8rem, 1vh);
  }

  .floor-info p {
    font-size: min(2.8rem, 5.8vw);
  }

  .landing-footer {
    height: auto;
    flex-direction: column;
    gap: min(1.6rem, 2vh);
    padding: min(2rem, 2.5vh) min(2.4rem, 5vw) min(2.4rem, 3vh);
  }

  .landing-footer .f-logo {
    width: min(20rem, 46vw);
  }

  .landing-footer .info {
    gap: min(0.5rem, 0.9vh) min(1.2rem, 3vw);
    font-size: min(1.3rem, 3.2vw, 1.6vh);
    line-height: 1.5;
    text-align: center;
    padding: min(0.2rem, 0.4vh) 0;
  }

  .landing-footer .info .sep {
    display: none;
  }

  .sec5-marquee-mover {
    font-size: min(16rem, 22vw);
  }
}

/* 가로 모드 등 높이가 매우 낮은 화면에서는 잠금을 풀어 스크롤 허용 */
@media (max-height: 480px) {
  body.landing-page,
  main.landing {
    height: auto;
    max-height: none;
    min-height: 100dvh;
    overflow: visible;
  }

  body.landing-page {
    overflow-y: auto;
  }

  .wrap {
    flex-direction: row;
    padding-bottom: min(2.4rem, 4vh);
  }

  .left_wrap,
  .right_wrap {
    flex: 0 0 auto;
    width: min(38rem, 40vw);
    height: auto;
    aspect-ratio: 380 / 500;
  }
}