@charset "utf-8";
@layer reset, form;
@import url("https://cdn.jsdelivr.net/gh/fonts-archive/GangwonEduPower/GangwonEduPower.css");

:root {
  --header-height: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem);
  --container-narrow: 1280;
  --container: 1500;
  --container-wide: 1762;
  --container-scale: 0.92;
  --container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
  --primary: #dc4240;
  --secondary: #001f3f;
  --accent: #dc4240;
  /* 브랜드 레드 (로고·포인트·CTA 공통) */
  --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-sec: "GangwonEdu Power", sans-serif;
  --font-sans: var(--font-pret);
  --toggle-nav-button-size: 24rem;
  /* 
     * 사이트 공통 이미지 플레이스홀더 변수
     * 
     * - --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);
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* #endregion view transition, scroll behavior */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  background-color: #fff;

  .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 {
    display: block;
    width: auto;
    height: clamp(44rem, calc(37.93rem + 1.62vw), 69rem);
  }

  .main-nav {
    .nav-menu-level-1 {
      display: flex;
    }

    .nav-item-level-1 {
      position: relative;
    }

    .nav-link-level-1 {
      display: flex;
      align-items: center;
      padding: 0.4lh clamp(10rem, calc(50.5 / 1920 * 100vw), 50.5rem);
      font: 600 18rem var(--font-sans);
    }

    .nav-menu-level-2 {
      position: absolute;
      top: calc(100% + 0.2lh);
      left: 50%;
      width: max-content;
      min-width: 120rem;
      background: #fff;
      transform: translateX(-50%);
      box-shadow: 0 7px 29px 0 rgba(100, 100, 111, 0.2);
    }

    .nav-link-level-2 {
      display: block;
      padding: 14rem;
      font-size: 14rem;
      text-align: center;
      color: #333;
      font-weight: 600;
    }

    .nav-link-level-2:hover {
      color: var(--primary);
    }

    @media (prefers-reduced-motion: no-preference) {
      .nav-details-level-1::details-content,
      .nav-menu-level-2 {
        transition: 0.3s allow-discrete;
      }

      .nav-details-level-1 {
        &::details-content {
          opacity: 0;
        }

        &[open]::details-content {
          opacity: 1;
        }
      }

      .nav-details-level-1:not([open]) .nav-menu-level-2 {
        top: 100%;
        border-radius: 8px;
      }
    }

    @media (width < 1280px) {
      display: none;
    }

    /* 데스크탑: 마우스 호버 시 하위 메뉴 노출 (클릭/키보드 토글도 그대로 동작) */
    @media (width >=1280px) {
      .nav-details-level-1::details-content {
        content-visibility: visible;
        opacity: 1;
      }

      .nav-menu-level-2 {
        top: 100%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .nav-item-level-1:hover .nav-menu-level-2,
      .nav-details-level-1[open] .nav-menu-level-2 {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
    }
  }

  /* 데스크탑 연락처 */
  .header-contact {
    display: flex;
    align-items: center;
    gap: 12rem;
    color: var(--black);

    .header-contact-icon {
      flex-shrink: 0;
      width: clamp(28rem, calc(34 / var(--container) * 100vw), 34rem);
      height: clamp(28rem, calc(34 / var(--container) * 100vw), 34rem);
      color: var(--accent);
    }

    .header-contact-list {
      display: grid;
      gap: 4rem;
      margin: 0;
    }

    .header-contact-item {
      display: flex;
      align-items: center;
      gap: 8rem;
      line-height: 1.2;
    }

    .header-contact-item dt {
      font: 400 var(--font-size-15) var(--font-sans);
      color: #444;
    }

    .header-contact-item dd {
      margin: 0;
      font: 700 var(--font-size-18) var(--font-sans);
      color: var(--accent);
      letter-spacing: 0.01em;
    }

    .header-contact-item dd a {
      color: inherit;
    }

    @media (width < 1280px) {
      display: none;
    }
  }

  .toggle-nav-button {
    position: relative;
    display: block;
    width: var(--toggle-nav-button-size);
    aspect-ratio: 1;
    cursor: pointer;

    .bar {
      position: absolute;
      inset: 0;
      height: 2px;
      margin: auto;
      background: currentcolor;
    }

    .bar-1 {
      translate: 0 -8rem;
    }

    .bar-3 {
      translate: 0 8rem;
    }

    @media (width >=1280px) {
      display: none;
    }
  }

  .toggle-nav {
    --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;
    }

    .toggle-nav-header {
      display: grid;
      align-items: center;
      justify-content: flex-end;
      height: var(--header-height);
    }

    .toggle-nav-close {
      position: relative;
      display: block;
      width: var(--toggle-nav-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 {
      .nav-item-level-1 {
        border-top: 1px solid var(--border-color);
      }

      .nav-item-level-1: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-item-level-2 {
        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;
      }
    }

    /* 모바일 메뉴 하단 연락처 */
    .toggle-nav-contact {
      display: grid;
      gap: 10rem;
      padding: 20rem var(--padding-inline);

      a {
        display: block;
        font-size: 15rem;
        color: #444;
      }

      a b {
        margin-right: 0.5ch;
        font-weight: 700;
        color: var(--accent);
      }
    }

    @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-footer {
  padding: 64rem 0;
  background: #2f2f2f;
  color: #8f8f8f;
  font-family: var(--font-sans);
  text-align: center;

  .container {
    display: grid;
    justify-items: center;
  }

  .terms-nav {
    display: block;
  }

  .nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 clamp(16rem, calc(36 / var(--container) * 100vw), 26rem);
    margin: 0;
  }

  .nav-link {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-size: 16rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    transition: color 0.25s ease;
  }

  .nav-link:focus-visible {
    outline: 2rem solid rgba(255, 255, 255, 0.45);
    outline-offset: 5rem;
    border-radius: 4rem;
  }

  .site-info {
    width: 100%;
    margin-top: 32rem;
  }

  .site-info address {
    font-style: normal;
  }

  .site-info-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8rem clamp(24rem, calc(32 / var(--container) * 100vw), 24rem);
    margin: 0;
    color: #9a9a9a;
  }

  .site-info-item {
    display: inline-flex;
    align-items: center;
    gap: 4rem;
    font-size: 14rem;
    font-weight: 500;
    white-space: nowrap;
  }

  .site-info-item dt {
    font-weight: 800;
    color: #b5b5b5;
  }

  .site-info-item dd {
    margin: 0;
    color: #9a9a9a;
  }

  .site-info-item a {
    color: inherit;
  }

  .site-info-item:not(:first-child) dt::after {
    content: " :";
  }

  .site-info-item:first-child dt {
    display: none;
  }

  .site-info-item:first-child dd {
    font-weight: 800;
    color: #b5b5b5;
  }

  .copyright {
    margin-top: 50rem;
    font-size: 14rem;
    font-weight: 500;
    color: #737373;
  }

  @media (any-hover: hover) {
    .nav-link:hover {
      color: var(--primary);
    }

    .site-info-item a:hover {
      color: #cfcfcf;
    }
  }

  @media (width < 768px) {
    padding-block: 46rem 48rem;

    .nav-menu {
      gap: 14rem 22rem;
    }

    .nav-link {
      font-size: 13rem;
    }

    .site-info {
      margin-top: 30rem;
    }

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

    .site-info-item {
      justify-content: center;
      font-size: 12rem;
      white-space: normal;
    }

    .copyright {
      margin-top: 34rem;
      font-size: 12rem;
    }
  }
}

/* Footer Modal */
.footer-modal {
  width: min(calc(100% - 40rem), 680rem);
  max-height: min(78dvh, 720rem);
  padding: 0;
  margin: auto;
  overflow: visible;
  border: 0;
  border-radius: 24rem;
  background: transparent;
  color: #111;
}

.footer-modal::backdrop {
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(4rem);
}

.footer-modal-panel {
  position: relative;
  display: grid;
  gap: 26rem;
  max-height: min(78dvh, 720rem);
  padding: clamp(34rem, calc(46 / var(--container) * 100vw), 46rem);
  overflow-y: auto;
  border-radius: inherit;
  background: #fff;
  box-shadow: 0 24rem 70rem rgba(0, 0, 0, 0.22);
}

.footer-modal-title {
  padding-bottom: 18rem;
  padding-right: 48rem;
  border-bottom: 2rem solid var(--primary);
  font: 900 var(--font-size-30) / 1.25 var(--font-sans);
  letter-spacing: -0.05em;
  color: var(--secondary);
}

.footer-modal-content {
  display: grid;
  gap: 16rem;
  font: 500 var(--font-size-16) / 1.75 var(--font-sans);
  letter-spacing: -0.035em;
  color: #444;
  text-align: left;
  word-break: keep-all;
}

.footer-modal-content strong {
  font-weight: 800;
  color: #111;
}

.footer-modal-content a {
  color: var(--primary);
}

.footer-modal-info {
  display: grid;
  gap: 6rem;
  margin-top: 10rem;
  padding: 18rem 20rem;
  border-radius: 14rem;
  background: #f7f7f7;
}

.footer-modal-close {
  position: absolute;
  top: 22rem;
  right: 22rem;
  display: block;
  width: 36rem;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: #f2f2f2;
  color: #111;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.footer-modal-close::before,
.footer-modal-close::after {
  position: absolute;
  inset: 0;
  width: 16rem;
  height: 2rem;
  margin: auto;
  border-radius: 99rem;
  background: currentColor;
  content: "";
}

.footer-modal-close::before {
  rotate: 45deg;
}

.footer-modal-close::after {
  rotate: -45deg;
}

.footer-modal-close:focus-visible {
  outline: 2rem solid rgba(220, 66, 64, 0.35);
  outline-offset: 4rem;
}

@media (any-hover: hover) {
  .footer-modal-close:hover {
    background: var(--primary);
    color: #fff;
    transform: rotate(90deg);
  }

  .footer-modal-content a:hover {
    text-decoration: underline;
  }
}

@media (width < 768px) {
  .footer-modal {
    width: calc(100% - 28rem);
    max-height: 82dvh;
    border-radius: 18rem;
  }

  .footer-modal-panel {
    max-height: 82dvh;
    gap: 22rem;
    padding: 34rem 24rem 28rem;
  }

  .footer-modal-title {
    padding-right: 42rem;
    font-size: var(--font-size-24);
  }

  .footer-modal-content {
    gap: 14rem;
    font-size: var(--font-size-15);
    line-height: 1.7;
  }

  .footer-modal-close {
    top: 18rem;
    right: 18rem;
    width: 32rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .nav-link,
  .footer-modal-close {
    transition: none;
  }
}