/* 전 페이지 공통: 폰트 · 리셋 · 토큰 · 헤더 · 푸터.
   반응형 경계는 Framer 와 같다 — 데스크톱 ≥1200 / 태블릿 810–1199 / 모바일 <810. */

/* ---------- 폰트 ----------
   파일은 라이브(framerusercontent · Google Fonts)와 바이트까지 같다.
   - "Pretendard": 400~900 을 font-weight 로만 고른다(라이브의 "Pretendard SemiBold" 같은 굵기별 패밀리 = 같은 파일 + 해당 weight).
     local() 은 쓰지 않는다 — 설치된 OTF 를 잡으면 머신마다 렌더가 달라진다.
   - "Inter": Google Fonts v20 latin. unicode-range 가 없어서 한글은 sans-serif 로 떨어진다 — 라이브와 같다. */
@font-face { font-family: "Pretendard"; src: url("/assets/common/fonts/Pretendard-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/assets/common/fonts/Pretendard-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/assets/common/fonts/Pretendard-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/assets/common/fonts/Pretendard-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/assets/common/fonts/Pretendard-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/assets/common/fonts/Pretendard-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/common/fonts/Inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/common/fonts/Inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/common/fonts/Inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/common/fonts/Inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- 토큰 ---------- */
:root {
  --blue: #0e64d3;        /* SCC Blue */
  --black: #000;
  --white: #fff;
  --gray-100: #f0f0f0;
  --gray-400: #999;
  --gray-500: #848484;
  --header-h: 70px;
  --content-w: 1200px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Pretendard", sans-serif; color: var(--black); background: var(--white); }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- 공용 유틸 ---------- */
.br-mobile { display: none; }
@media (max-width: 809.98px) { .br-mobile { display: inline; } }

/* ---------- 헤더 ----------
   fixed 로 떠 있고, 바로 뒤의 .site-header-spacer(70px)가 본문을 밀어낸다.
   홈(/)은 header.js 가 .is-overlay 를 붙여 투명 헤더로 히어로 위에 겹치고, 히어로(main 의 첫 자식)가 지나가면 흰 헤더가 된다.
   아래로 스크롤하면 숨고 위로 스크롤하면 나온다. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.site-header-spacer { height: var(--header-h); }
.site-header.is-overlay + .site-header-spacer { display: none; }

.site-header__bar {
  /* 흰 헤더는 70px 줄 아래에 1px 선이 있다(투명 헤더엔 없음). 모바일 메뉴가 열려도 그 줄 아래에 남게 배경으로 그린다 */
  background: linear-gradient(var(--gray-100), var(--gray-100)) 0 calc(var(--header-h) - 1px) / 100% 1px no-repeat var(--white);
  transition: transform .6s cubic-bezier(.33, 1, .68, 1), opacity .6s cubic-bezier(.33, 1, .68, 1), background-color .2s ease-in-out;
}
.site-header.is-hidden .site-header__bar { transform: translateY(calc(-1 * var(--header-h))); opacity: 0; }
.site-header.is-overlay.is-top:not(.is-menu-open) .site-header__bar { background: transparent; }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); max-width: var(--content-w); margin: 0 auto;
}

.site-header__logo { display: block; position: relative; width: 130px; height: 20px; padding-left: 12px; }
.site-header__logo img { position: absolute; top: 0; left: 12px; height: 20px; transition: opacity .2s ease-in-out; }
.site-header__logo .logo-white { left: 11px; width: 120px; opacity: 0; }
.site-header.is-overlay.is-top:not(.is-menu-open) .logo-white { opacity: 1; }
.site-header.is-overlay.is-top:not(.is-menu-open) .logo-blue { opacity: 0; }

/* 데스크톱 메뉴 */
.gnb { display: flex; align-items: center; gap: 20px; }
.gnb__item { position: relative; }
.gnb__link {
  display: block; padding: 8px 20px; border-radius: 100px;
  font-size: 16px; line-height: 1.2em; font-weight: 600; white-space: nowrap;
  color: var(--black); transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
.site-header.is-overlay.is-top .gnb__link:not(.is-active) { color: var(--white); }
.gnb__link.is-active { background: var(--blue); color: var(--white); }

/* 하위 메뉴 — 알약 바로 아래 가운데, 호버 시 페이드인 */
.gnb__sub {
  position: absolute; top: 100%; left: calc(50% - 80px); /* transform 으로 가운데 맞추면 정수 px 로 붙어 라이브(소수 px)와 글자 래스터가 달라진다 */
  width: 160px; padding: 24px; border-radius: 12px; background: var(--white);
  will-change: transform; /* 라이브 패널이 별도 레이어라 글자 안티에일리어싱이 그에 맞춰진다 */
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; visibility: hidden; transition: opacity .17s ease-out, visibility 0s .17s;
}
/* 라이브(Framer) 테두리는 ::after 오버레이 1px #eee */
.gnb__sub::after { content: ""; position: absolute; inset: 0; border: 1px solid #eee; border-radius: inherit; pointer-events: none; }
.gnb__item:hover .gnb__sub, .gnb__item:focus-within .gnb__sub { opacity: 1; visibility: visible; transition: opacity .17s ease-out; }
.gnb__sub a { font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.5em; font-weight: 500; letter-spacing: -0.01em; color: var(--black); white-space: nowrap; }

/* 햄버거 · 모바일 메뉴 (데스크톱에선 숨김) */
.menu-toggle, .mobile-menu { display: none; }

@media (min-width: 1920px) {
  .site-header__logo { width: 118px; padding-left: 0; }
  .site-header__logo img { left: 0; }
  .site-header__logo .logo-white { left: -1px; }
}

@media (max-width: 1199.98px) {
  .site-header__inner { max-width: none; height: var(--header-h); padding: 12px 16px; }
  .site-header__logo { width: 118px; padding-left: 0; }
  .site-header__logo img { left: 0; }
  .site-header__logo .logo-white { left: -1px; }
  .gnb { display: none; }

  .menu-toggle { display: block; position: relative; width: 44px; height: 44px; }
  .menu-toggle span {
    position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 10px; background: var(--gray-400);
    transition: transform .2s ease-in-out, top .2s ease-in-out, background-color .2s ease-in-out;
  }
  .menu-toggle span:first-child { top: 15.5px; }
  .menu-toggle span:last-child { top: 26.5px; }
  .site-header.is-overlay.is-top:not(.is-menu-open) .menu-toggle span { background: var(--white); }
  .is-menu-open .menu-toggle span:first-child { top: 21px; transform: rotate(45deg); }
  .is-menu-open .menu-toggle span:last-child { top: 21px; transform: rotate(-45deg); }

  .is-menu-open .site-header__bar { background: var(--white); } /* 열린 메뉴엔 70px 줄 아래 선이 없다 */
  /* 닫힌 메뉴는 visibility 로도 숨겨 탭 포커스가 안 들어가게 한다(닫히는 애니메이션이 끝난 뒤에 숨김) */
  .mobile-menu { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .25s cubic-bezier(.33, 1, .68, 1), visibility 0s .25s; }
  .is-menu-open .mobile-menu { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
  .mobile-menu > ul { overflow: hidden; }

  .mobile-menu__row {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    height: 64px; padding: 20px 30px; background: var(--white); box-shadow: inset 0 -1px var(--gray-100);
    font-size: 16px; line-height: 1.2em; font-weight: 600; text-align: left; color: var(--black);
  }
  li:last-child > a.mobile-menu__row { height: auto; box-shadow: none; } /* 마지막 '후원' 줄만 높이 59.2 · 구분선 없음 */
  .mobile-menu__row img { width: 24px; height: 24px; transform: rotate(180deg); }
  .mobile-menu__group.is-open .mobile-menu__row { color: var(--blue); }
  .mobile-menu__group.is-open .mobile-menu__row img { transform: none; }

  .mobile-menu__sub { display: grid; grid-template-rows: 0fr; visibility: hidden; background: var(--gray-100); transition: grid-template-rows .25s cubic-bezier(.33, 1, .68, 1), visibility 0s .25s; }
  .mobile-menu__group.is-open .mobile-menu__sub { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
  .mobile-menu__sub > ul { overflow: hidden; }
  .mobile-menu__sub a { display: block; padding: 20px 30px; font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.5em; font-weight: 500; letter-spacing: -0.01em; color: var(--black); }
  .mobile-menu__sub a.is-dim { color: #111; } /* 라이브에서 '앱 소개'·'크러셔 클럽'만 #111 이다 */
}

/* ---------- 푸터 ----------
   라이브 footer_desktop / footer_tablet / footer_mobiile 그대로. 데스크톱 윗 여백만 페이지마다 72px 또는 80px 이다
   (라이브 footer_desktop_wide) — 80px 페이지는 페이지 css 에서 `--footer-pt: 80px` 를 준다. */
.site-footer { background: #262629; color: #c1c1c5; padding: var(--footer-pt, 72px) 36px 100px; }
.site-footer__inner { display: flex; flex-direction: column; gap: 80px; max-width: var(--content-w); margin: 0 auto; }

.site-footer__top { display: flex; justify-content: space-between; align-items: flex-start; }
.site-footer__brand { display: flex; flex-direction: column; gap: 12px; width: 267px; }
.site-footer__tagline { font-size: 18px; line-height: 1.5em; font-weight: 600; letter-spacing: -0.02em; color: var(--white); white-space: pre; }
.site-footer__logo svg { width: 207px; height: 34.984375px; } /* 라이브 svg 높이(34.98)와 같게 — 35 면 아래가 1/64px 씩 밀려 글자 래스터가 달라진다 */

.site-footer__menu { display: flex; justify-content: space-between; width: 433px; padding-top: 4px; white-space: pre; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col:nth-child(3) { width: 122px; } /* 라이브에서 이 칸만 글자(98px)보다 넓은 고정폭이다 */
.site-footer__col p { line-height: 1.3em; } /* 단위 없는 1.3 은 23.39px, 라이브(130%)는 23.41px 로 반올림이 달라 em 을 쓴다 */
.site-footer__title { font-size: 18px; font-weight: 600; color: var(--white); }
.site-footer__col p:not(.site-footer__title) { font-size: 16px; font-weight: 400; }

.site-footer__bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.site-footer__legal { display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.site-footer__copyright { line-height: 1.3em; font-weight: 600; white-space: pre; }
.site-footer__biz { line-height: 1.5em; white-space: pre; }
.site-footer__biz-mobile { display: none; }
.site-footer__terms { display: flex; gap: 20px; line-height: 1.3em; white-space: pre; }
.site-footer__terms p { text-decoration: underline; }

.site-footer__social { display: flex; gap: 12px; }
.site-footer__pill {
  display: flex; align-items: center; gap: 4px; padding: 8px 12px 8px 11px; border-radius: 78px; overflow: hidden; background: rgba(255, 255, 255, .05);
  font-size: 12px; line-height: 1.4em; font-weight: 500; letter-spacing: -0.02em; color: rgba(255, 255, 255, .5); white-space: pre;
}

.site-footer__gov { display: flex; align-items: center; gap: 40px; }
.site-footer__gov img { height: auto; }
.site-footer__gov a:nth-child(1) img { width: 103px; }
.site-footer__gov a:nth-child(2) img { width: 167px; }
.site-footer__gov a:nth-child(3) img { width: 141px; }

@media (max-width: 1199.98px) {
  .site-footer { padding-top: 72px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 40px; }
}

@media (max-width: 809.98px) {
  .site-footer { padding: 72px 16px 100px; }
  .site-footer__top { flex-direction: column; gap: 51px; }
  /* 라이브는 46px 폭 칸 4개를 100px 간격으로 줄바꿈해 2×2 로 놓는다(글자는 칸 밖으로 넘친다) */
  .site-footer__menu { flex-wrap: wrap; gap: 100px; width: 192px; justify-content: flex-start; }
  .site-footer__col, .site-footer__col:nth-child(3) { width: 46px; }
  .site-footer__bottom { gap: 18px; }
  .site-footer__biz { display: none; }
  .site-footer__biz-mobile { display: block; line-height: 1.5em; white-space: pre-wrap; }
  .site-footer__gov { gap: 20px; }
  .site-footer__gov a:nth-child(1) img { width: 76px; }
  .site-footer__gov a:nth-child(2) img { width: 121px; }
  .site-footer__gov a:nth-child(3) img { width: 102px; }
}