/* =========================
  Site Header
========================= */
/* 기본 페이지: 헤더 높이만큼 확보 */
body{padding-top: var(--header-h);}

/* 히어로 톤 페이지: 처음부터 padding 고정 (토글 없음) */
body.has-heroTone{padding-top: 0;}

/* 프로젝트 페이지: padding 변화 없음 (스크롤 중 안정) */
body.is-project{padding-top: 0; overflow-anchor: none;}
.p-overview,.p-overview__stage,.p-overview__panel,[data-p-stage],[data-overview-anchor]{overflow-anchor: none;}

.site-header{--header-bg: transparent; --header-fg: var(--color-black); --header-logo: var(--color-primary); position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 1000; padding: 0 var(--padX-desktop); background: var(--header-bg); color: var(--header-fg); transition: background .25s ease,color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease;}
.site-header__inner{max-width: 100%; margin: 0 auto; height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center;}

/* =========================================================
   Header hero tone (project pages)
   - only BEFORE scroll (no bg state)
========================================================= */
.site-header:not(.is-scrolled):not(.is-open)[data-hero-tone="dark"]{--header-fg: var(--color-white);}
.site-header:not(.is-scrolled):not(.is-open)[data-hero-tone="light"]{--header-fg: var(--color-secondary);}
.site-header:not(.is-scrolled):not(.is-open)[data-hero-tone="red"]{--header-fg: var(--color-white);}

/* 로고 기본은 항상 header-logo를 따르게 */
.site-logo{display: inline-flex; align-items: center; color: var(--header-logo);}
.site-logo__mark{display: block; width: 150px; height: 31.25px;}
.site-logo svg{display: block; width: 150px; height: auto;}

@media(max-width:768px){
  .site-logo svg{width: 120px;}
}

/* 프로젝트 페이지(hero-tone)는 "스크롤 전/메뉴 닫힘" 상태에서만 로고가 header-fg를 따라가게 */
.site-header[data-hero-tone]:not(.is-scrolled):not(.is-open) .site-logo{color: var(--header-fg);}

/* red hero exception: Catch accent becomes black ONLY before scroll */
.site-header:not(.is-scrolled):not(.is-open)[data-hero-tone="red"] .header-prize__accent{color: var(--color-black);}

.catchprize{justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; color: inherit; text-decoration: none; font-size: var(--fs-body-xs); line-height: 1; opacity: .92; white-space: nowrap;}
.catchprize:hover{opacity: 1; text-decoration: underline; text-underline-offset: 3px;}

.lang{position: relative; display: inline-block;}
.lang[open] .lang__chev{transform: rotate(180deg);}
.lang__btn{list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; user-select: none; -webkit-tap-highlight-color: transparent;}
.lang__btn::-webkit-details-marker{display: none;}
.lang__label{font-size: var(--fs-body-sm); font-weight: 600; line-height: 1; letter-spacing: .02em; opacity: .95;}
.lang__chev{transition: transform .18s ease;}

.lang__menu{position: absolute; right: 0; top: calc(100% + 10px); min-width: 120px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; z-index: 50;}
.lang__item{display: flex; align-items: center; justify-content: flex-start; padding: 10px 12px; border-radius: 10px; color: #111; text-decoration: none;}
.lang__item:hover{background: rgba(0,0,0,.04);}
.lang__item[aria-current="page"]{background: rgba(0,0,0,.04); color: var(--color-primary); font-weight: 600;}

.brand{display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;}
.brand__mark{width: 150px; height: auto; display: block;}

.site-header__right{display: flex; align-items: center; gap: var(--space-5);}

.header-prize{margin: 0; justify-self: center; text-align: center; font-size: var(--fs-body-xs); line-height: 1; opacity: .9; white-space: nowrap;}
.header-prize__accent{color: var(--brand-accent); font-weight: 700;}

.hamburger{background: transparent; border: 0; padding: 0; position: relative; display: inline-block; width: 26px; height: 16px; cursor: pointer; line-height: 0; font-size: 0; color: inherit;}
.hamburger span{position: absolute; left: 0; display: block; height: 2px; width: var(--w); background: currentColor; border-radius: 2px; transition: none; transform: translateZ(0);}
.is-ready .hamburger span{transition: top .25s ease,transform .25s ease,opacity .2s ease,width .25s ease;}
.hamburger span:nth-child(1){--w: 18px; top: 0;}
.hamburger span:nth-child(2){--w: 26px; top: 7px;}
.hamburger span:nth-child(3){--w: 14px; top: 14px;}
.hamburger:hover span{--w: 26px;}
.site-header.is-open .hamburger span:nth-child(1){top: 7px; transform: rotate(45deg); --w: 22px;}
.site-header.is-open .hamburger span:nth-child(2){opacity: 0;}
.site-header.is-open .hamburger span:nth-child(3){top: 7px; transform: rotate(-45deg); --w: 22px;}

.site-header[data-theme="light"]{--header-bg: transparent; --header-fg: var(--color-black); --header-logo: var(--color-primary); --brand-accent: var(--color-primary);}
.site-header[data-theme="dark"]{--header-bg: rgba(0,0,0,.10); --header-fg: var(--color-white); --brand-accent: var(--color-primary); box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}
.site-header[data-theme="primary"]{--header-bg: var(--color-primary); --header-fg: var(--color-white); --brand-accent: var(--color-secondary); box-shadow: none;}

.site-header.is-scrolled{--header-bg: rgba(255,255,255,.90); --header-fg: var(--color-black); --header-logo: var(--color-primary); --brand-accent: var(--color-primary); box-shadow: 0 8px 24px rgba(0,0,0,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.site-header.is-open{--header-bg: rgba(255,255,255,.9); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;}
.site-header.is-closing{--header-bg: transparent; transition-delay: .0s;}
.site-header.is-open.is-scrolled{--header-bg: transparent;}

@media(max-width:768px){
  .site-header{padding: 0 var(--padX-mobile);}
  .site-header__right{gap: var(--space-1); justify-content: flex-end;}
  .brand__mark{width: 120px;}
  .header-prize{display: none;}
}

/* =========================
  Menu Overlay Layout
========================= */
.menu-overlay{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 900;}
.site-header.is-open + .menu-overlay{opacity: 1; pointer-events: auto;}
.menu-overlay__inner{height: 100%; max-width: 960px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
.site-header.is-open + .menu-overlay .menu-overlay__inner{opacity: 1; transform: translateY(0);}

/* =========================
  Big Menu
========================= */
.menu__list{margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 22px;}
.menu__link{font-family: var(--font-display); display: inline-flex; align-items: flex-start; gap: 14px; font-size: var(--fs-display); line-height: .95; font-weight: 800; color: #000; text-decoration: none; letter-spacing: -0.03em;}
.menu__link:hover{opacity: .85;}
.menu__link:focus-visible{outline: 2px solid #000; outline-offset: 6px;}
.menu__item{position: relative; margin-bottom: 16px;}
.menu__badge{position: absolute; z-index: 1; top: -10px; right: -34px; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-body-sm); line-height: 1; font-weight: 700; letter-spacing: 0; background: var(--color-primary); color: #fff; transform: translateY(10px);}
.menu__badge--pill{min-width: auto; height: 34px; padding: 0 12px;}

/* =========================
  Footer (overlay)
========================= */
.menu-footer{display: flex; gap: 28px; margin-top: 26px; align-items: center; opacity: .95;}
.menu-footer__link{display: inline-flex; align-items: center; gap: 8px; color: var(--color-black); text-decoration: none; font-size: var(--fs-body-sm); transition: background-color .25s ease,color .25s ease,transform .2s ease;}
.menu-footer__link:hover,.menu-footer__link:hover svg path{color: var(--color-primary); fill: var(--color-primary); text-decoration: underline;}
.menu-footer__link svg path{fill: var(--color-black);}

@media(max-width:960px){
  .menu-overlay__inner{padding: 0 var(--padX-desktop);}
}
@media(max-width:768px){
  .menu-overlay__inner{padding: 0 var(--padX-mobile);}
  .menu__badge{min-width: 28px; height: 28px; transform: translateY(8px);}
  .menu-footer{flex-direction: column; align-items: flex-start; gap: 10px;}
}

/* ===================== Project Card List ===================== */
.projects-wrap{margin-bottom: var(--space-section-md);}
.projects-grid{display: grid; grid-template-columns: repeat(3,1fr); gap: 0; max-width: var(--layout-max-1680); margin: 0 auto; padding: 0 var(--padX-desktop);}

@media(max-width:1024px){
  .projects-grid{grid-template-columns: repeat(2,1fr);}
}
@media(max-width:768px){
  .projects-grid{padding: 0 var(--padX-mobile);}
}
@media(max-width:640px){
  .projects-grid{grid-template-columns: 1fr;}
}

.p-card{position: relative; display: block; width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--color-gray800); transition: transform 420ms cubic-bezier(.22,.61,.36,1),opacity 420ms ease;}
.p-card::after{content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.22) 28%,rgba(0,0,0,0) 55%);}
.p-thumb{position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.005); transition: transform 240ms ease;}
.p-title{position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--space-4); padding: 0 var(--space-4); text-align: center; font-size: var(--fs-body-md); line-height: var(--lh-150); font-weight: 500; color: var(--color-white); opacity: .92; text-shadow: 0 4px 16px rgba(0,0,0,.45);}

.p-cat{position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2); border-radius: 8px; font-size: var(--fs-body-xs); line-height: 1; font-weight: 600; letter-spacing: .02em; color: var(--color-white); background: rgba(11,25,60,.3); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none;}

.p-card:hover .p-thumb{transform: scale(1.05);}
.p-card:hover .p-title{opacity: 1;}
.p-card:focus-visible{outline: 2px solid var(--color-accent); outline-offset: 4px;}

.p-card.is-enter{opacity: 0; transform: translateY(24px);}
.p-card.is-enter-active{opacity: 1; transform: translateY(0); transition: opacity .9s ease,transform .9s ease;}

@media(prefers-reduced-motion: reduce){
  .p-card{opacity: 1; transform: none; transition: none;}
}

/* ===================== More Project ===================== */
.projects-more{display: flex; justify-content: center; padding-top: var(--space-12);}
.projects-more-btn{display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); background: none; border: 0; cursor: pointer;}
.projects-more-btn[disabled]{cursor: default;}
.projects-more-label{display: flex; gap: 4px; font-size: var(--fs-body-sm); font-weight: 600; line-height: var(--lh-150); color: var(--color-black);}
.projects-more-label svg path{color: var(--color-black);}
.projects-more-label:hover,.projects-more-label:hover svg path{color: var(--color-primary); transition: color .25s ease;}
.projects-count{display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 999px; background: var(--color-primary); color: var(--color-white); font-size: var(--fs-body-xs); font-weight: 600;}
.icon-plus{color: var(--color-primary);}

/* ===================== Footer ===================== */
.site-footer{position: relative; z-index: 2; background: var(--color-secondary); color: var(--color-white);}
.footer-inner{max-width: var(--layout-max-1680); margin: 0 auto; padding: 0 var(--padX-desktop);}
.footer-top{display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 0 32px; border-bottom: 1px solid var(--color-gray800);}
.footer-left{display: flex; align-items: center; gap: 18px; min-width: 0;}
.footer-brand{font-weight: 700; letter-spacing: .2px; text-decoration: none; color: var(--color-white); transition: color .25s ease;}
.footer-brand:hover{color: var(--color-accent);}
.footer-contact{display: flex; align-items: center; gap: 16px; list-style: none; padding: 0; margin: 0; min-width: 0;}
.footer-contact-item{display: inline-flex; align-items: center; gap: 8px; color: var(--color-white); min-width: 0;}
.footer-contact-item svg path{fill: var(--color-gray400);}
.footer-link{display: flex; gap: 4px; font-size: var(--fs-body-xs); color: var(--color-gray400); text-decoration: none; white-space: nowrap; transition: background-color .25s ease,color .25s ease,transform .2s ease;}
.footer-link:hover,.footer-link:hover svg path{color: var(--color-accent); fill: var(--color-accent); text-decoration: underline; text-underline-offset: 3px;}
.footer-cta{display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; background: var(--color-accent); color: var(--color-secondary); text-decoration: none; font-weight: 700; flex: 0 0 auto; transition: background-color .25s ease,color .25s ease;}
.footer-cta svg path{fill: var(--color-secondary); transition: fill .25s ease;}
.footer-cta:hover,.footer-cta:hover svg path{background: var(--color-primary); color: var(--color-white); fill: var(--color-white);}
.footer-bottom{text-align: center; padding: 32px 0 64px;}
.footer-bottom p{font-size: var(--fs-body-xs); color: var(--color-gray500); line-height: 1.6;}

@media(max-width:768px){
  .footer-inner{padding: 0 var(--padX-mobile);}
  .footer-top{flex-direction: column; align-items: flex-start;}
  .footer-left{flex-direction: column; align-items: flex-start; width: 100%;}
  .footer-contact{flex-direction: column; align-items: flex-start; gap: 10px; width: 100%;}
  .footer-cta{width: 100%; justify-content: center;}
  .footer-bottom{text-align: left;}
}

/* ===================== 404 ===================== */
.p404{min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; justify-content: center;}
.p404__wrap{width: min(720px,100%); display: flex; flex-direction: column; align-items: center; text-align: center;}
.p404__img{width: min(420px,100%); height: auto; display: block;}
.p404__title{font-family: var(--font-display); margin: 0; padding-top: var(--space-fluid-40); font-size: var(--fs-h3); letter-spacing: -0.02em;}
.p404__desc{margin: 0; padding-top: var(--space-2); font-size: var(--fs-body-lg); line-height: 1.6; color: #666;}
.p404__actions{padding-top: var(--space-fluid-60); display: flex; justify-content: center;}
.p404-btn{display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 700; text-decoration: none; background: var(--color-primary,#111); color: #fff; transition: background-color .45s cubic-bezier(0.22,1,0.36,1),color .45s cubic-bezier(0.22,1,0.36,1);}
.p404-btn svg{width: 16px; height: 16px; display: block;}
.p404-btn:hover,.p404-btn:focus-visible{background: var(--color-accent); color: var(--color-secondary);}

@media(max-width:768px){
  .p404{padding-left: var(--padX-mobile); padding-right: var(--padX-mobile);}
  .p404__wrap{width: 100%;}
  .p404__img{width: min(380px,100%);}
}

.header-prize,.p-title,.menu-footer__link,.footer-link,.footer-cta-text,.footer-copy,.footer-tagline,.p404-btn,.p-cat{font-family: var(--font-display);}