@charset "utf-8";
@layer reset, form;

:root {
  interpolate-size: allow-keywords;
  --header-height: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem);
  --container-narrow: 1280;
  --container: 1400;
  --container-wide: 1762;
  --container-scale: 0.92;
  --container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
  --primary: #ff8605;
  --secondary: #f5f5f5;
  --placeholder-bg: #444444;
  --white: #fff;
  --black: #222;
  --border-color: #ddd; /* components.css 공유 */
  --border-color-hover: #444; /* components.css 공유 */
  --font-pret:
    "Pretendard Variable", "Pretendard", "Malgun Gothic", "Dotum", "Gulim",
    sans-serif;
  --font-sans: var(--font-pret);
  --site-menu-button-size: 25rem;
  /* 
     * 사이트 공통 이미지 플레이스홀더 변수
     * 
     * - --placeholder-image-bg : 기본 배경색 (이미지 로딩 실패 또는 미설정 시 표시)
     * - --placeholder-image-url : 플레이스홀더 로고 이미지 경로
     * - --placeholder-image-size : 플레이스홀더 로고 크기 (최대 크기 제한 포함)
     *
     * layout.css 에 선언하여 전역에서 동일한 디자인 컨셉 유지 및 관리.
     * 접근성 향상을 위해 이미지가 없을 경우에도 시각적 빈 공간이 없도록 함.
     */
  --placeholder-image-bg: #e0e0e0;
  --placeholder-image-url: url("/assets/images/layouts/placeholder-image.png");
  --placeholder-image-size: min(60%, 200rem);
}

/* #region view transition, scroll behavior */
@media (prefers-reduced-motion: no-preference) {
  /* @view-transition  { navigation: auto; } */
  html {
    scroll-behavior: smooth;
  }
}
/* #endregion view transition, scroll behavior */

.container {
  position: relative;
  width: calc(var(--container-scale) * 100%);
  max-width: calc(var(--container) * 1rem);
  margin-inline: auto;
  &.container--narrow {
    max-width: calc(var(--container-narrow) * 1rem);
  }
  &.container--wide {
    max-width: calc(var(--container-wide) * 1rem);
  }
  &.container--fluid {
    width: auto;
    max-width: none;
  }
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  z-index: 10;
  background: transparent;
  transition:
    background-color 250ms ease,
    box-shadow 250ms ease,
    backdrop-filter 250ms ease;
  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
  }
  .logo {
    position: relative;
    display: inline-block;
    justify-self: start;
  }
  .logo-image {
    width: auto;
    height: clamp(24rem, calc(30px / var(--container) * 100vw), 168px);
  }
  .main-nav {
    .nav-menu-level-1 {
      display: flex;
    }
    .nav-item-level-1 {
      position: relative;
    }
    .nav-link-level-1 {
      display: flex;
      align-items: center;
      height: var(--header-height);
      padding-inline: clamp(10rem, calc(50.5 / 1920 * 100vw), 22rem);
      font: 24rem var(--font-sans);
      color: white;
      font-weight: 700;
    }
    .nav-menu-level-2 {
      position: absolute;
      top: 75%;
      left: 50%;
      width: max-content;
      min-width: 120rem;
      background: #fff;
      border: 1px solid #ddd;
      transform: translateX(-50%);
      visibility: hidden;
      opacity: 0;
    }
    li:hover .nav-menu-level-2 {
      top: 80%;
      visibility: visible;
      opacity: 1;
    }
    .nav-link-level-2 {
      display: block;
      padding: 14rem;
      font-size: 14rem;
      text-align: center;
      color: #333;
    }
    .nav-link-level-2:hover {
      color: #fff;
      background: var(--primary);
    }
    .nav-item-level-2 + .nav-item-level-2 {
      border-top: 1px solid #ddd;
    }
    @media (prefers-reduced-motion: no-preference) {
      .nav-menu-level-2 {
        transition: 0.3s;
      }
    }
    @media (width < 1280px) {
      & {
        display: none;
      }
    }
  }
  .site-cta {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font: 600 20px var(--font-sans);
    color: #fff;
    white-space: nowrap;
    background: #ff8605;
    border-radius: 12px;

    transition:
      transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 250ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 250ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 250ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .site-cta:hover {
    transform: translateY(-2rem);
    box-shadow: 0 14rem 30rem rgba(0, 0, 0, 0.18);
    filter: brightness(1.02);
  }

  .site-cta:active {
    transform: translateY(0);
    box-shadow: 0 8rem 18rem rgba(0, 0, 0, 0.14);
  }

  @media (width >= 1280px) {
    .main-nav {
      margin-inline: auto;
    }
    .site-cta {
      display: inline-flex;
    }
    .site-menu-toggle {
      display: none;
    }
    .site-menu {
      display: none;
    }
  }
}
.site-menu-toggle {
  position: relative;
  display: block;
  width: var(--site-menu-button-size);
  aspect-ratio: 1;
  cursor: pointer;
  color: #ff8605;
  .bar {
    position: absolute;
    inset: 0;
    height: 2px;
    margin: auto;
    background: currentcolor;
  }
  .bar-1 {
    translate: 0 -8rem;
  }
  .bar-3 {
    translate: 0 8rem;
  }
}
.site-menu {
  --border-color: #eaeaea;
  --padding-block: 15rem;
  --padding-inline: 16rem;
  left: auto;
  z-index: 12;
  width: 100%;
  max-width: 280rem;
  height: 100dvh;
  padding: 0;
  color: #000;
  background: #fff;
  border: 0;
  &::backdrop {
    background: #000;
  }
  .site-menu-header {
    display: grid;
    align-items: center;
    justify-content: flex-end;
    height: var(--header-height);
  }
  .site-menu-close {
    position: relative;
    display: block;
    width: var(--site-menu-button-size);
    aspect-ratio: 1;
    margin-right: 16rem;
    background: 0;
    &::before,
    &::after {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background: currentcolor;
      transform: translateY(-50%) rotate(45deg);
      content: "";
    }
    &::after {
      transform: translateY(-50%) rotate(-45deg);
    }
  }
  .nav-menu-level-1 {
    & > li {
      border-top: 1px solid var(--border-color);
    }
    & > li:last-child {
      border-bottom: 1px solid var(--border-color);
    }
    .nav-link-level-1 {
      position: relative;
      display: block;
      width: 100%;
      padding: var(--padding-block) 30rem var(--padding-block)
        var(--padding-inline);
      font-size: 16rem;
      text-align: left;
    }
    summary.nav-link-level-1::before {
      position: absolute;
      inset: 0;
      display: block;
      width: 8rem;
      aspect-ratio: 1;
      margin: auto 16rem auto auto;
      border: solid currentcolor;
      border-width: 0 1px 1px 0;
      transform: rotate(45deg) translateY(-75%);
      content: "";
    }
    [open] summary.nav-link-level-1::before {
      translate: 0 -50%;
      scale: 1 -1;
    }
    ::details-content {
      height: 0;
      overflow: clip;
    }
    [open]::details-content {
      height: auto;
    }
    .nav-menu-level-2 {
      background: #f8f8f8;
    }
    .nav-menu-level-2 > li {
      border-top: 1px solid var(--border-color);
    }
    .nav-link-level-2 {
      position: relative;
      display: block;
      padding: var(--padding-block) var(--padding-inline);
      font-size: 14rem;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    & {
      translate: 100%;
      transition: 0.3s allow-discrete;
    }
    &::backdrop {
      opacity: 0;
      transition: 0.3s allow-discrete;
    }
    &:popover-open {
      translate: 0;
      &::backdrop {
        opacity: 0.6;
      }
      @starting-style {
        translate: 100%;
        &::backdrop {
          opacity: 0;
        }
      }
    }
    .nav-menu-level-1 {
      .nav-link-level-1,
      summary::before,
      ::details-content {
        transition: 0.3s allow-discrete;
      }
      ::details-content {
        height: 0;
        overflow: clip;
      }
      [open]::details-content {
        height: auto;
      }
    }
  }
}
.site-header.is-sticky .main-nav .nav-link-level-1:hover {
  color: var(--primary);
}

.site-footer {
  padding-block: 44px;
  color: #bfbfbf;
  background: #222;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 14rem;
}

.site-footer .nav-menu {
  display: flex;
  justify-content: flex-end;
  gap: 10rem;
  margin-bottom: 8rem;
}

.site-footer .nav-link {
  padding: 8rem 16rem;
  border-radius: 2px;
  border: 1px solid #555;
  font-size: 11rem;
  color: #eee;
}

.site-info-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15rem 37rem;
  margin-top: 0;
}

.site-info-item {
  display: inline-flex;
  align-items: center;
  gap: 7rem;
}

.site-info-item dt {
  font-weight: 600;
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
}

.site-info-item dd {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0px;
}

.site-info-item--row2 {
  flex-basis: 100%;
  margin-top: 4rem;
  gap: 40rem;
}

.site-info .copyright {
  margin-top: 38rem;
  font-size: 16rem;
  color: #b8b8b8;
  font-weight: 400;
}
.terms {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
}
.terms .f-nav {
  color: #fff;
  font-size: 16rem;
  font-weight: 600;
}
.terms-nav {
  display: flex;
  gap: 12px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -5px;
  border-bottom: solid 1px #555;
  padding-bottom: 17px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-sns {
  display: flex;
  align-items: center;
  gap: 12rem;
}

@media (max-width: 1024px) {
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16rem;
  }

  .footer-top .footer-logo img {
    max-width: 200px;
    height: auto;
  }

  .terms-nav {
    margin-left: 0;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 24rem;
    margin-top: 20rem;
  }

  .footer-sns {
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding-block: 24rem 40rem;
  }

  .footer-top {
    align-items: flex-start;
    text-align: left;
  }

  .terms-nav {
    display: flex;
    gap: 8rem;
  }

  .terms {
    padding: 8px 14px;
  }

  .terms .f-nav {
    font-size: 13rem;
  }

  .footer-bottom {
    align-items: flex-start;
  }

  .site-info-list {
    gap: 8rem 20rem;
  }

  .site-info-item dt,
  .site-info-item dd {
    font-size: 14px;
  }

  .site-info-item--row2 {
    flex-basis: 100%;
    margin-top: 8rem;
    gap: 20rem;
    flex-wrap: wrap;
  }

  .site-info .copyright {
    margin-top: 24rem;
    font-size: 13rem;
  }

  .footer-sns {
    margin-top: 16rem;
    gap: 10rem;
  }

  .footer-sns-link {
    width: 100%;
  }
}

.site-header.is-sticky {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10rem 30rem rgba(0, 0, 0, 0.08);
}

.site-header .main-nav .nav-link-level-1 {
  color: #fff;
}
.site-header.is-sticky .main-nav .nav-link-level-1 {
  color: #111;
  transition: color 200ms ease;
}
.logo-image--dark {
  display: none;
}
.logo-image--light {
  display: block;
}

.site-header.is-sticky .logo-image--light {
  display: none;
}
.site-header.is-sticky .logo-image--dark {
  display: block;
}

section[id] {
  scroll-margin-top: calc(var(--header-height) + 12rem);
}

.main-nav .nav-link-level-1.is-active {
  color: var(--primary);
}
.main-nav .nav-item-level-1.is-active > .nav-link-level-1 {
  color: var(--primary);
}
.site-menu .nav-link-level-1.is-active,
.site-menu .nav-link-level-2.is-active {
  color: var(--primary);
  font-weight: 700;
}