/* ============================
   레이아웃 골격 + 헤더/푸터
   1920px 시안 → vw 환산
   ============================ */

#wrap {
  width: 100%;
  min-width: 320px;
  position: relative;
  margin: 0 auto;
  overflow-x: clip;
  visibility: hidden;
}
#container {
  width: 100%;
  position: relative;
  margin: 0 auto;
}
#footer {
  width: 100%;
  clear: both;
  position: relative;
  margin: 0 auto;
}

.inner {
  max-width: 1200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

@media all and (max-width: 1200px) {
  .inner {
    width: auto;
    margin-left: 3.90625%;
    margin-right: 3.90625%;
  }
}

/* ============================
   Header — 시안 navbar (오버레이)
   ============================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  color: var(--color-white);
  /* 배경 색에 무관하게 가독성 확보:
     흰 배경 → 검정처럼, 검정 배경 → 흰색처럼 반전 표현.
     header에 자체 background를 두면 효과가 사라지므로 배경 투명 유지. */
  mix-blend-mode: difference;
  isolation: isolate;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* 스크롤 내림 시 숨김 */
.header.is-hidden {
  transform: translateY(-100%);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5625vw 2.6042vw; /* 30 50 */
}

.header__logo {
  position: relative;
  display: inline-flex;
  color: inherit;
  width: 6.9792vw; /* 134 */
  height: 2.8646vw; /* 55 */
}

.header__logo svg {
  pointer-events: none;
}

.header__logo:hover .header__logo-svg--hover {
  visibility: visible;
  opacity: 1;
}

.header__logo:hover .header__logo-svg {
  visibility: hidden;
  opacity: 0;
}

.header__logo-svg {
  position: absolute;
  top: 0;
  left: 0;
  /* fit-content는 구형 iOS/iPadOS WebKit에서 SVG 폭이 300px로 풀려 로고가 가운데로 밀림 → 명시 폭 */
  width: 100%;
  height: 100%;
  transition:
    visibility 0.3s ease,
    opacity 0.3s ease;
}

.header__logo-svg--hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.9308vw; /* 높이(2.8646vw) × 177/173 */
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0.3s ease,
    opacity 0.3s ease;
  will-change: visibility, opacity;
}

.header__nav {
  display: block;
}

.header__menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.0833vw; /* 40 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.header__menu-link {
  display: inline-block;
  font-size: 1.25vw; /* 24 */
  font-weight: 400;
  line-height: 1.6;
  color: inherit;
  text-decoration: none;
}

/* 메뉴 밑줄 인디케이터 (JS가 left/width 제어) */
.header__menu-indicator {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  pointer-events: none;
  transition:
    left 0.35s ease,
    width 0.35s ease;
}

.header__menu-toggle {
  display: none;
}

/* 모바일 메뉴 열림 — 헤더는 오버레이 위 흰 고정 (difference 해제) */
.header.is-menu-open {
  mix-blend-mode: normal;
  color: var(--color-white);
}

.header.is-menu-open .header__menu-toggle-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  margin: 0;
  transition: transform 0.3s ease;
}

.header.is-menu-open .header__menu-toggle-bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.header.is-menu-open .header__menu-toggle-bar:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ============================
   Mobile Menu — 풀스크린 모달
   ============================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.95);
  color: var(--color-white);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    visibility 0.35s ease,
    opacity 0.35s ease;
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  width: 100%;
  height: 100%;
  padding: 11.196vw 4.071vw 10.178vw; /* 헤더 높이만큼 top */
  box-sizing: border-box;
}

.mobile-menu__nav {
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding-top: 15.267vw;
}

.mobile-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.036vw;
}

.mobile-menu__link {
  display: inline-block;
  font-size: 7.634vw;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: none;
}

.mobile-menu__social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.018vw;
}

.mobile-menu__social-link {
  display: inline-block;
  font-size: 6.107vw;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* 모바일 메뉴 열림 시 배경 스크롤 잠금 (html에 부여 — awards 모달과 동일) */
html.is-menu-open {
  overflow: hidden;
}

/* ============================
   Footer — 시안 1820 내부 / 검정
   ============================ */
.footer {
  position: relative;
  background: var(--color-black);
  color: var(--color-white);
}

/* JS(footer.js)가 진입 감지를 켤 때 부여 — 투명화하여 body 배경이 비치고
   common.css의 body{transition:background-color 0.6s}로 크로스페이드된다.
   JS 미실행 시 위 .footer 검정이 폴백으로 유지(흰 body 페이지 가독성 보존). */
.footer.is-bg-watch {
  background-color: transparent;
}

/* Contact CTA — 전 페이지 공통 (footer 최상단) */
.contact {
  max-width: 94.792vw;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.3333vw; /* 64 */
  padding: 8.3333vw 0; /* 160 0 */
  color: var(--color-white);
  text-align: left;
  /* 푸터 내부에 들어가 있어 상단 보더는 footer.border-top이 대체.
     CTA와 footer__inner(브랜드/사이트맵 영역) 사이 구분선은 border-bottom으로 처리. */
  border-top: 2px solid var(--color-grey-400);
  border-bottom: 2px solid var(--color-grey-400);
  /* 푸터 진입 시 배경이 흰색인 페이지(about/approach 등)에서, 검정 전환 전까지
     흰 글자가 묻히지 않도록 배경에 따라 반전 (body.is-bg-dark/light 스코프, 전 페이지 공통 방식). */
  transition: color 0.6s ease;
}

.contact__copy {
  margin: 0;
  font-size: 3.906vw;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-white);
  transition: color 0.6s ease;
}

body.is-bg-dark .contact,
body.is-bg-dark .contact__copy {
  color: var(--color-white);
}
body.is-bg-light .contact,
body.is-bg-light .contact__copy {
  color: var(--color-black);
}

/* 라인 마스크: 각 라인이 자기 높이만큼 잘려있고, 내부 인라인 블록이 아래에서 슬라이드 업 */
.contact__line {
  display: block;
  padding-bottom: 0.1em; /* descender 잘림 방지 */
}

.contact__line-inner {
  display: inline-block;
  will-change: transform;
}

/* JS가 .is-anim-ready 부여 → 마스크 + 초기 숨김 활성.
   JS 미실행/실패 시 기본 노출(fallback). */
.contact.is-anim-ready .contact__line {
  overflow: hidden;
}
.contact.is-anim-ready .contact__line-inner {
  transform: translateY(110%);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.contact.is-anim-ready.is-revealed .contact__line-inner {
  transform: translateY(0);
}

.contact__cta-wrap {
  display: inline-flex;
}

.footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7.344vw;
  padding: 4.1667vw 0; /* 80 0 */
  max-width: 94.792vw;
  margin-inline: auto;
}

/* Top */
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pad-section);
}

.footer__logo {
  display: inline-flex;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.footer__logo p {
  font-size: 3.93vw;
  color: var(--color-white);
  font-weight: 500;
  line-height: 1.14;
  margin-top: 2.065vw;
}

.footer__logo-svg {
  width: 17.969vw; /* 345 */
  height: 5.643vw; /* 108 */
}

.footer__sitemap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8.4896vw; /* 163 */
  min-width: 26.0417vw;
}

.footer__menu,
.footer__social {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__menu-link,
.footer__social-link {
  position: relative;
  display: inline-block;
  font-size: 1.6667vw; /* 32 */
  font-weight: 500;
  line-height: 1.5; /* Figma 150% */
  letter-spacing: 0.02em; /* Figma 2% */
  color: var(--color-grey-100);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__menu-link::after,
.footer__social-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

.footer__menu-link:hover,
.footer__menu-link:focus-visible,
.footer__menu-link.is-active,
.footer__social-link:hover,
.footer__social-link:focus-visible {
  color: var(--color-white);
}

.footer__menu-link:hover::after,
.footer__menu-link:focus-visible::after,
.footer__menu-link.is-active::after,
.footer__social-link:hover::after,
.footer__social-link:focus-visible::after {
  transform: scaleX(1);
}

/* Bottom */
.footer__bottom {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--pad-section);
}

/* Brand (좌측) */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.042vw;
  margin-top: auto;
}

/* 텍스트 3줄(YNL®/카피2)만 시안 이미지로 (행간 1:1 매칭) */
.footer__brand-info {
  display: block;
  width: 24.5313vw; /* 470 — 시안 폭 */
  max-width: 100%;
  height: auto;
}

.footer__awards {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-sm); /* 20 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__awards a {
  display: inline-flex;
}
.footer__awards img {
  height: 4.2188vw; /* 81 */
  width: auto;
  display: block;
}

.footer__meta {
  display: flex;
  flex-direction: column;
  min-width: 26.0417vw;
}

.footer__meta > img {
  width: 20.365vw;
}

.footer__meta a {
  display: inline-block;
  margin-top: 1.563vw;
  color: var(--color-white);
  font-size: 1.563vw;
}

.footer__top-btn {
  position: absolute;
  top: -5.208vw;
  right: 0;
  width: 3.125vw; /* 60 */
  height: 3.125vw; /* 60 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-key);
  color: var(--color-white);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}
.footer__top-btn:hover,
.footer__top-btn:focus-visible {
  transform: translateY(-4px);
}
.footer__top-btn svg {
  width: 1.458vw; /* 28 */
  height: 0.808vw; /* 15.51 */
} /* 28 12 */

.footer__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.5208vw; /* 10 */
  font-size: 1.25vw; /* 24 */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-grey-300);
}

/* ============================
   Footer — 모바일 (≤1200px)
   ============================ */
@media all and (max-width: 1200px) {
  .contact {
    padding: 80px 20px;
    gap: 32px;
  }
  .contact__copy {
    font-size: 36px;
  }
  .footer__inner {
    padding: 60px 20px;
    gap: 40px;
  }
  .footer__top {
    flex-direction: column;
    gap: 40px;
  }
  .footer__sitemap {
    width: 100%;
    gap: 40px;
  }
  .footer__menu-link,
  .footer__social-link {
    font-size: 22px;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }
  .footer__brand {
    gap: 24px;
  }
  .footer__brand-info {
    width: 80%;
  }
  .footer__awards img {
    height: 52px;
  }
  .footer__meta {
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }
  .footer__copy {
    font-size: 14px;
    gap: 6px;
  }
  .footer__top-btn {
    width: 48px;
    height: 48px;
  }
  .footer__top-btn svg {
    width: 20px;
    height: 9px;
  }
}

/* ============================
   Header — 모바일 (≤1200px)
   ============================ */
@media all and (max-width: 1200px) {
  .header__inner {
    padding: 16px 20px;
  }
  .header__logo-svg {
    width: 88px;
    height: 36px;
  }
}

@media all and (max-width: 640px) {
  .contact {
    margin: 0;
    max-width: 100%;
    padding: 10.178vw 4.071vw;
    gap: 4.071vw;
    border-bottom: none;
    position: relative;
    border-width: 1px;
    /* 배경 전환 시 버튼(.btn--pill, 0.25s)과 속도를 맞춰 인터렉션이 매끄럽게 느껴지도록 —
       PC의 0.6s는 그대로 유지, 모바일만 단축 */
    transition: color 0.25s ease;
  }
  .contact::after {
    content: "";
    width: calc(100% - 8.142vw);
    height: 1px;
    background-color: var(--color-grey-400);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .contact__copy {
    font-size: 5.089vw;
    transition: color 0.25s ease;
  }
  .footer__top-btn {
    width: 7.125vw;
    height: 7.125vw;
    top: -11vw;
  }
  .footer__top-btn svg {
    width: 2.799vw;
    height: 1.399vw;
  }
  .footer__inner {
    margin: 0 4.071vw;
    padding: 8.142vw 0;
    gap: 16.285vw;
  }
  .footer__nav {
    display: none;
  }
  .footer__top {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .footer__logo-svg {
    width: 26.814vw;
    height: 8.673vw;
  }
  .footer__logo p {
    font-size: 6.066vw;
    margin-top: 3.308vw;
  }
  .footer__sitemap {
    width: auto;
    min-width: auto;
  }
  .footer__menu-link,
  .footer__social-link {
    font-size: 3.308vw;
    line-height: 1.5;
    height: 5.089vw;
  }
  .footer__menu,
  .footer__social {
    gap: 1.018vw;
    display: flex;
    flex-direction: column;
  }
  .footer__meta {
    order: 1;
    flex-direction: column;
    width: auto;
    align-items: flex-start;
    min-width: auto;
    gap: 0;
  }

  .footer__meta > img {
    width: 33.333vw;
    height: auto;
  }

  .footer__meta a {
    font-size: 2.545vw;
    margin-top: 0;
  }
  .footer__brand {
    order: 2;
    gap: 1.018vw;
  }
  .footer__bottom {
    flex-direction: row;
    align-items: flex-end;
  }
  .footer__awards img {
    height: 7.125vw;
  }
  .footer__copy {
    font-size: 2.29vw;
  }
}

@media all and (max-width: 640px) {
  .header .header__inner {
    height: 11.196vw;
    padding: 0 4.071vw;
  }
  .header__logo {
    width: 17.534vw;
    height: 7vw;
  }
  .header__logo svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .header__logo:hover .header__logo-svg--hover {
    visibility: hidden;
    opacity: 0;
  }
  .header__logo:hover .header__logo-svg {
    visibility: visible;
    opacity: 1;
  }
  .header__logo-svg,
  .header__logo-svg--hover {
    transition: none;
  }

  .header__nav {
    display: none;
  }

  .header__menu-toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.781vw;
    width: 8.142vw;
    height: 8.142vw;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    /* button UA color가 상속을 막아 difference 블렌드가 깨지므로 header color 강제 */
    color: inherit;
  }
  .header__menu-toggle-bar {
    display: block;
    width: 4.58vw;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s ease;
  }

  .header.is-menu-open .header__menu-toggle-bar {
    width: 4.58vw;
  }
}