/* 페이지 전환 페이드 인 효과 */
@keyframes pageFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
html.page-fade-ready #main-content,
html.page-fade-ready .site-footer {
  animation: pageFadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  html.page-fade-ready #main-content,
  html.page-fade-ready .site-footer {
    animation: none !important;
  }
  #page-transition-curtain {
    display: none !important;
  }
}
/* 네이버 지도 및 공통 링크 스타일 (.visit-link) */
.visit-link {
  color: rgb(255 255 255 / 60%) !important;
  font-size: clamp(0.875rem, 1.1vw, 0.95rem) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
}
.visit-link:hover,
.visit-link:focus-visible {
  color: #ffffff !important;
  text-decoration: none !important;
}
:root {
  --blue: #0e3696;
  --blue-deep: #0022a4;
  /* 크레딧 시안의 섹션 한글 부제 색 — Figma 원본이 아니라 전달 스크린샷에서 추정한 값 */
  --blue-sky: #005eae;
  --navy: #061028;
  --panel: #0b1a3e;
  /* 2차 시안(10/17) 피그마 변수 — primary_*, secondary_50, gray_10, gray_5 */
  --primary: #005ead;
  --primary-deep: #004f8f;
  --primary-pale: #f4f8fa;
  --primary-ink: #030e17;
  --secondary: #f86b4b;
  --primary-20: #b3d4ef;
  --gray-10: #eef0f1;
  --gray-30: #c8ccd0;
  --gray-70: #525a60;
  --gray-80: #383e42;
  --gray-90: #212427;
  --ink: #f7f7f8;
  /* TODO(토큰-이름): 세컨더리가 노랑→주황으로 바뀌었다. 이름 정리는 방명록 작업(--guest-*)이 끝난 뒤 한 번에 한다 */
  --yellow: var(--secondary);
  /* 히어로·배너 그라디언트 끝색 — 세컨더리를 바꾸면 함께 바꾼다 */
  --hero-glow: var(--primary-pale);
  --banner-glow: color-mix(in srgb, var(--secondary) 55%, #516e8f);
  --lime: #b9ef70;
  --black: #101213;
  --white: #f8f9ec;
  --gray-600: #8490a5;
  --gray-400: #aebbd0;
  /* 크레딧 시안의 무채색 회색 — 전달 캡처에서 잰 추정치 */
  --gray-500: #8b959c;
  --gray-700: #6c7280;
  --gray-300: #c6cede;
  --gray-200: #d9dfe9;
  --gray-100: #ececec;
  --gray-050: #f7f7f7;
  /* GU-1000의 팔레트. 방명록 밖의 기존 색상은 유지한다. */
  --guest-surface: #030e17;
  --guest-accent: #f86b4b;
  --guest-primary: #005ead;
  --guest-primary-deep: #004f8f;
  --guest-glow: #f4f8fa;
  --guest-heading: #e0ecf5;
  --guest-ink: #f7f7f8;
  --guest-copy: #c8ccd0;
  --guest-line: #383e42;
  --designer-panel: rgb(23 76 126 / 10%);
  --home-intro-shade: linear-gradient(0deg, var(--primary-ink) 31.838%, rgb(3 12 21 / 80%) 62.023%, rgb(3 11 20 / 40%) 84.058%, rgb(3 7 17 / 0%) 100%);
  --glass-edge: inset 1px 1px 1px rgb(224 236 245 / 32%), inset -1px -1px 1px rgb(224 236 245 / 14%), inset 0 0 16px rgb(224 236 245 / 5%);
  --guest-form-surface: #22313d;
  --guest-overlay: rgb(16 18 19 / 50%);
  --guest-label: #b3d4ef;
  --guest-card: rgb(224 236 245 / 4.5%);
  --guest-card-hover: rgb(224 236 245 / 8%);
  --guest-header: rgb(16 18 19 / 80%);
  --guest-shade: linear-gradient(0deg, #030e17 31.838%, rgb(3 14 23 / 90%) 65.776%, rgb(3 12 21 / 80%) 78.177%, rgb(3 11 20 / 40%) 94.826%, rgb(3 7 17 / 0%) 100%);
  --fs-hero: clamp(3rem, 8vw, 8rem);
  --fs-h1: clamp(2.25rem, 4.5vw, 4rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 3rem);
  --fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --header-height: 64px;
  --wrap: 1280px;
  --page-gutter: clamp(1.25rem, 5.55vw, 5rem);
  --rule: rgb(198 206 222 / 22%);
  --gap: clamp(1rem, 2vw, 1.5rem);
}
*, *::before, *::after { box-sizing: border-box; word-break: keep-all; overflow-wrap: anywhere; }
html { scroll-padding-top: calc(var(--header-height) + 1rem); }
/* 사이트 전체 브라우저 스크롤바 숨김 (스크롤 기능은 정상 동작) */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
body { margin: 0; background: var(--navy); color: var(--white); font-family: Pretendard, 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; vertical-align: top; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: default; }
::selection { background: var(--yellow); color: var(--navy); }
.wrap { width: min(100% - var(--page-gutter) * 2, var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
/* 헤더 (2차 시안 GNB 382:1228) — 80px, 반투명 회색 바탕, 메뉴 칸 130px 가운데 정렬 */
.site-header { position: sticky; top: 0; z-index: 100; background: rgb(16 18 19 / 80%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-height); }
.site-header__logo { flex-shrink: 0; line-height: 0; }
.site-header__logo img { width: 214px; height: 32px; }
.gnb { display: flex; align-items: stretch; align-self: stretch; font-size: 1.125rem; font-weight: 500; line-height: 1; }
.gnb__inner { display: flex; align-items: stretch; justify-content: flex-end; width: 100%; }
.gnb a { display: inline-flex; align-items: center; justify-content: center; width: 130px; min-height: 44px; color: var(--gray-500); }
.gnb a[aria-current='page'] { color: var(--ink); }
.menu-toggle { display: none; }
/* 방명록 연결이 끊긴 탭에서는 메뉴·메인 구간·디자이너 방명록을 숨긴다 */
html[data-guestbook='down'] [data-guest-surface] { display: none !important; }
/* 푸터 (2차 시안 공통 footer 382:2330) — 로고·외부 링크 / 구분선 / 후원 로고·저작권 */
.site-footer { margin-top: clamp(4rem, 8vw, 8rem); padding-block: 3rem; border-top: 1px solid var(--gray-90); background: var(--black); color: var(--gray-70); font-size: .875rem; }
.site-footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.site-footer__brand { display: block; line-height: 0; }
.site-footer__brand img { width: 175px; height: auto; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.25rem; padding-block: .5rem; line-height: 20px; letter-spacing: .004em; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-90); }
.site-footer__partners { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 0; }
.site-footer__partners li { display: flex; align-items: center; line-height: 0; }
.site-footer__partners li + li::before { content: ''; width: 1px; height: 13px; margin-inline: 1.25rem; background: var(--gray-70); }
.site-footer__partners li:nth-child(2)::before { height: 20px; }
.site-footer__copy { margin: 0; color: var(--gray-80); font-size: .75rem; line-height: 1; text-align: right; }
.state { grid-column: 1 / -1; padding: clamp(2rem, 6vw, 4rem) 1rem; color: var(--gray-400); text-align: center; }
.state--error { color: var(--yellow); }
.state code { display: inline-block; margin-top: .5rem; padding: .2rem .5rem; background: rgb(255 255 255 / 8%); }
.skip-link { position: fixed; top: .75rem; left: var(--page-gutter); z-index: 200; padding: .75rem 1rem; background: var(--yellow); color: var(--navy); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--yellow); outline-offset: 5px; }
.back-to-top { position: fixed; right: var(--page-gutter); bottom: 1.5rem; z-index: 90; width: 3rem; height: 3rem; border-radius: 50%; background: var(--yellow); color: var(--navy); font-size: 1.5rem; }
.eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.button-link { display: inline-flex; justify-content: center; align-items: center; gap: 3rem; min-height: 3.25rem; padding: .75rem 2rem; border: 1px solid var(--rule); font-weight: 600; font-size: .9rem; }
.visual-media { pointer-events: none; }
.visual-media__video { position: absolute; inset: 0; }
.visual-media__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.visual-media img, .visual-media video { width: 100%; height: 100%; object-fit: cover; }
.media-toggle { min-height: 44px; position: absolute; bottom: 1rem; right: var(--page-gutter); z-index: 3; padding: .5rem .8rem; background: var(--navy); color: var(--white); border: 1px solid var(--rule); font-size: .75rem; }
/* 카드 마크는 꾸밈이므로 키보드·터치에서는 별도 조작을 요구하지 않는다. */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.75rem var(--gap); }
.card { display: block; min-width: 0; }
.card__media { position: relative; display: block; overflow: hidden; background: var(--panel); aspect-ratio: 5 / 4; }
.card__thumb { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.35s ease, opacity var(--motion-feedback, 0s) var(--motion-ease, ease), transform var(--motion-release, 0s) var(--motion-ease, ease); }
.card[data-hover] .card__thumb, .card:focus-visible .card__thumb { filter: grayscale(0%); opacity: var(--motion-card-opacity, .78); }
.card[data-pressed] .card__thumb { transform: scale(var(--motion-press-scale, 1)); }
.card--project .card__thumb { filter: grayscale(0%) blur(0px); opacity: 1; transform: scale(1); transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease; }
.card--project[data-hover] .card__thumb,
.card--project:hover .card__thumb,
.card--project:focus-visible .card__thumb { filter: grayscale(100%) blur(4px); opacity: 0.38; transform: scale(1.06); }
.card--project .card__hover-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 45.795px; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; z-index: 2; }
.card--project[data-hover] .card__hover-icon,
.card--project:hover .card__hover-icon,
.card--project:focus-visible .card__hover-icon { opacity: 1; }
.card--project .card__thumb[data-placeholder] ~ .card__hover-icon { display: none; }
.card__marker { display: none; }
.card__title { display: block; margin-top: 1rem; font-size: 1rem; font-weight: 600; }
.card__meta { display: block; margin-top: .25rem; color: var(--gray-400); font-size: .75rem; }
@media (hover: hover) and (pointer: fine) { .gnb a:hover { color: var(--ink); } .site-footer a:hover { color: var(--gray-30); } .button-link:hover { border-color: var(--yellow); color: var(--yellow); } }
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 601~900px 는 130px 메뉴 칸 4개와 로고가 한 줄에 안 들어간다 — 글자 폭 + 여백으로 줄인다 */
  .site-header__logo img { width: min(214px, 30vw); height: auto; }
  .gnb a { width: auto; padding-inline: clamp(.5rem, 1.6vw, 1.5rem); }
}
@media (max-width: 600px) {
  /* 시안 모바일 헤더는 48px — 메뉴는 햄버거 버튼과 세로 드롭다운으로 연다 */
  :root { --header-height: 48px; }
  .site-header__logo img { width: 161px; height: 24px; }
  .site-header__inner { position: relative; flex-wrap: wrap; gap: 0; min-height: var(--header-height); }
  
  /* 햄버거 아이콘 버튼 */
  .menu-toggle:not([hidden]) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  .menu-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  /* 열렸을 때 햄버거 -> X자 변형 */
  .menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 네비게이션 메뉴: 아래 영역을 밀어내지 않고 위에 뜨는 오버레이 팝업 */
  .gnb {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0.75rem 0 1.5rem;
    font-size: 1.05rem;
    border-top: 1px solid rgb(255 255 255 / 8%);
    border-bottom: none; /* 팝업창 하단 스트로크 삭제 */
    background: rgba(16, 18, 19, .9) !important; /* 불투명한 짙은 블랙으로 뒤 글씨 완벽 차단 */
    box-shadow: 0 20px 40px rgb(0 0 0 / 70%);
    z-index: 999;
  }
  .gnb__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-inline: var(--page-gutter);
  }
  .gnb a {
    width: 100%;
    justify-content: center; /* 텍스트 중앙 정렬 */
    text-align: center;
    padding: 0.9rem 0.5rem;
    min-height: 48px;
    border-bottom: 1px solid rgb(255 255 255 / 6%);
  }
  .gnb a:last-child {
    border-bottom: none; /* 마지막 메뉴(Credit) 아래 스트로크 삭제 */
  }
  .gnb a[aria-current='page'] {
    color: var(--secondary);
    font-weight: 600;
  }
  .site-header[data-menu-ready] .gnb { display: none; }
  .site-header[data-menu-open] .gnb { display: flex; }
  .site-header[data-menu-open] {
    transform: none !important;
  }
  .site-footer__top, .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__links { justify-content: flex-start; padding: 0; }
  .site-footer__copy { text-align: left; line-height: 1.5; }
  /* 좁은 화면은 로고 줄이 접히므로 구분선 대신 간격만 둔다 — 줄 머리에 구분선이 남지 않게 */
  .site-footer { padding-block: 2rem 2rem; }
  .site-footer__partners { gap: 1rem 1.5rem; }
  .site-footer__partners li::before { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .875rem; }
  .card__title { font-size: .9rem; }
  .card__meta { font-size: .7rem; }
}
/* 랩탑/데스크탑 환경(1024px 이상)에서 전체 사이트 비율 90% 축소 (10% 축소) */
@media (min-width: 1024px) {
  html {
    font-size: 90%; /* rem 단위를 사용하는 폰트, 여백, 그리드가 90%로 비례 축소 */
    --wrap: 1152px; /* 최대 콘텐츠 폭 1280px -> 1152px (90%) */
    --header-height: 58px; /* 헤더 높이 64px의 약 90% */
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }