@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: #1a509e;
  --secondary: #e87a4a;
  --placeholder-bg: #444444;
  --white: #fff;
  --black: #222;
  --border-color: #ddd; /* components.css 공유 */
  --hover-border-color: #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; margin-inline: auto; max-width: calc(var(--container) * 1rem); width: calc(var(--container-scale) * 100%);

  &.container--narrow { max-width: calc(var(--container-narrow) * 1rem); }
  &.container--wide { max-width: calc(var(--container-wide) * 1rem); }
  &.container--fluid { max-width: none; width: auto; }

}

#header {
  position: absolute; inset: 0 0 auto; z-index: 99; background: #fff; 

  .container { display: flex; align-items: center; height: var(--header-height); justify-content: space-between; }
  .logo { justify-self: start; position: relative; display: inline-block; }
  .logo-image { display: block; width: auto; height: clamp(30rem, calc(50 / var(--container) * 100vw), 50rem); }

  .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), 50.5rem); font: 18rem var(--font-sans); }
    .nav-menu-level-2 { visibility: hidden; position: absolute; top: 75%; left: 50%; transform: translateX(-50%); min-width: 120rem; width: max-content; background: #fff; border: 1px solid #ddd; opacity: 0; }
    li:hover .nav-menu-level-2 { visibility: visible; top: 80%; opacity: 1; }
    .nav-link-level-2 { display: block; padding: 14rem; color: #333; font-size: 14rem; text-align: center; }
    .nav-link-level-2:hover { background: var(--primary); color: #fff; }
    .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-menu-toggle {
    position: relative; display: block; width: var(--site-menu-button-size); aspect-ratio: 1; cursor: pointer;

    .bar { position: absolute; inset: 0; margin: auto; height: 2px; 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; max-width: 280rem; width: 100%; height: 100dvh; padding: 0; background: #fff; border: 0; color: #000; 
    
    &::backdrop { background: #000; }
    .site-menu-header { display: grid; align-items: center; justify-content: flex-end; height: var(--header-height); }

    .site-menu-close {
     position: relative; margin-right: 16rem; display: block; width: var(--site-menu-button-size); aspect-ratio: 1; background: 0; 
      &::before,
      &::after { content: ""; position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 2px; background: currentcolor; transform: translateY(-50%) rotate(45deg); }
      &::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); text-align: left; font-size: 16rem; }
      summary.nav-link-level-1::before { content: ""; position: absolute; inset: 0; margin: auto 16rem auto auto; display: block; width: 8rem; aspect-ratio: 1; border: solid currentcolor; border-width: 0 1px 1px 0; transform: rotate(45deg) translateY(-75%); }
      [open] summary.nav-link-level-1::before { scale: 1 -1; translate: 0 -50%; }
      ::details-content { overflow: clip; height: 0; }
      [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) {
      & { transition: 0.3s allow-discrete; translate: 100%; }
      &::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 {
          overflow: clip;
          height: 0;
        }
        [open]::details-content {
          height: auto;
        }
      }
    }
  }

  .nav-right { position: absolute; display: flex; right: 0; top: 0; height: var(--header-height); gap: 30px; }
  .nav-right .nav-member { display: flex; align-items: center; gap: 10px; }
  .nav-right .nav-member .login { font-weight: 600; color: #034ea2; }
  .nav-right .nav-member .sparator { width: 3px; height: 3px; border-radius: 50rem; background: #dedede; }
  .nav-right .site-menu-toggle { aspect-ratio: 1; width: 100% !important; display: flex; align-items: center; justify-content: center; background: #034EA2; text-align: right; }
  .nav-right .site-menu-toggle .bar { width: 32px; background: #fff; transition: all .3s; }
  .nav-right .site-menu-toggle:hover .bar-2 { width: 25px; transition: all .3s; }

}

.logo-client { border-top: 1rem solid #ddd; padding: 15rem; }
.logo-client .swiper-slide .slide-client {width: 100%;/* max-width: 200rem; */height: 50rem;}


#footer {
  padding-block: 50rem clamp( 60rem, calc(100 / var(--container) * 100vw), 100rem ); color: #b8b8b8; background: var(--black); 
  
  .container { display: grid; gap: 0 2ch; }
  .legal-link-list { display: flex; gap: 0.625em 1ch; }
  .legal-link { display: block; padding: 0.9375em clamp(2ch, calc(34.5 / var(--container) * 100vw), 34.5rem); font: 700 var(--font-size-16) var(--font-play); text-align: center; color: #fff; background: #ffffff12; border-radius: 10rem; }
  .logo { display: block; width: auto; height: clamp(40rem, calc(60 / var(--container) * 100vw), 60rem); }
  .site-info-list { display: flex; flex-wrap: wrap; gap: 0.6lh 3.2ch; max-width: 90ch; margin-top: 2.375em; }
  .site-info-item { display: inline-flex; gap: 1.2ch; }
  .site-info-item dt, .site-info-item:first-child dd { font-weight: 600; }
  .copyright { margin-top: 2.1875em; font-family: var(--font-play); }

  @media (width >= 768px) {
    .legal-link-list { flex-direction: column; grid-area: 1 / 2 / 3 / 3; justify-self: end; margin-top: 20rem; }
  }
  @media (width < 768px) {
    .site-info { margin-top: 50rem; }
    .site-info-list { flex-direction: column; }
  }
}