@charset "UTF-8";

:root{
  --p-hero-minh:100svh;
  --p-1280:1280px;
  --p-radius:20px;
  --p-panel-lift:14svh;
  --p-gutter:var(--padX-desktop);
  --project-hero-title:var(--fs-h1);
  --p-overview-body:clamp(1.125rem, 1.8vw, 1.625rem);
  --p-overview-meta:clamp(0.8125rem, 1.2vw, 1rem);
  --p-nav-bg:var(--color-white);
  --p-nav-bd:rgba(0,0,0,.12);
  --p-nav-gray:rgba(0,0,0,.06);
}

@media(max-width:768px){
  :root{--p-gutter: var(--padX-mobile);}
}

/* =========================
  Split Words (About/Contact style)
========================= */
[data-split-words]{display: block;}
[data-split-words] .sw{display: inline-block; will-change: transform,opacity; transform: translate3d(0,1.1em,0); opacity: 0; transition: transform .9s var(--p-ease,cubic-bezier(.2,.8,.2,1)),opacity .9s var(--p-ease,cubic-bezier(.2,.8,.2,1)); transition-delay: calc(var(--sw-i,0)*55ms);}
[data-split-words].is-animated .sw{transform: translate3d(0,0,0); opacity: 1;}

@media(prefers-reduced-motion:reduce){
  [data-split-words] .sw{transform: none; opacity: 1; transition: none;}
}

/* =========================
   HERO (fixed background)
========================= */
.p-heroFx{position: fixed; inset: 0; z-index: 0; overflow: hidden; width: 100vw; height: 100svh;}
.p-heroFx__bg{position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;}
.p-heroFx__media{width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; filter: saturate(.95) contrast(.95);}
.p-heroFx::after{content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, rgba(0,0,0,.25)); pointer-events: none; z-index: 1;}
.p-heroFx__inner{position: relative; z-index: 3; height: var(--p-hero-minh); display: grid; place-items: center; padding: calc(var(--header-h) + 24px) var(--p-gutter) 32px; box-sizing: border-box;}
.p-heroFx__title{margin: 0; width: 100%; text-align: center; font-size: var(--project-hero-title); font-weight: 700; color: var(--color-white); line-height: 1.5; letter-spacing: -0.02em;}
.p-heroFx__line{display: block;}

/* =========================
   Spacer + Content layer
========================= */
.p-heroSpacer{height: 100svh;}
.p-body{position: relative; z-index: 1;}
.p-overviewCard{background: #fff; box-shadow: 0 -10px 40px rgba(0,0,0,.18);}

/* =========================
   Overview Section
========================= */
.p-overviewCard {
  width: 100%;
}

.p-overviewCard__inner {
  max-width: var(--layout-max-1680);
  margin: 0 auto;
  padding: var(--space-fluid-100) var(--p-gutter) var(--space-fluid-120);
}

.p-overviewCard__eyebrow {
  margin: 0 0 var(--space-fluid-64);
  font-size: var(--fs-h6);
  /* data-reveal-body 가 적용될 것이므로 초기 상태는 네 JS 로직에 따름 */
}

/* 1. bodyBig: 100% 가로폭 사용 및 가독성 확보 */
.p-overviewCard__bodyBig {
  width: 100%; /* 텍스트가 너무 길게 늘어지지 않도록 시스템적으로 제한 */
  margin: 0 0 var(--space-fluid-48); /* 하단 요소와의 여백 */
  font-size: var(--fs-body-xl);
  line-height: 1.8;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

/* 2. Layout: 텍스트와 로고의 공존 */
.p-overviewCard__layout {
  display: grid;
  /* 로고는 최소 120px에서 최대 auto까지, 나머지는 텍스트가 유연하게 가짐 */
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  column-gap: clamp(28px, 6vw, 80px);
  align-items: end;
}

.p-overviewCard__left {
  min-width: 0; /* 내부 요소가 그리드 폭을 터뜨리는 것 방지 */
}

.p-overviewCard__subTitle {
  margin: 0 0 var(--space-fluid-48);
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

/* =========================
   Overview Meta (Grid)
========================= */
.p-overviewMetaGrid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px 28px;
  align-items: center;
}

.p-overviewMetaItem {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  column-gap: 12px;
}

.p-overviewMetaLabel {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--color-gray300);
  line-height: 1;
  white-space: nowrap;
  font-size: var(--fs-body-xs);
  width: var(--meta-label-w, auto);
}

.p-overviewMetaValue {
  font-family: var(--font-display);
  line-height: 1;
  white-space: nowrap;
  font-size: var(--fs-body-sm);
}

/* =========================
   Brand Logo Area
========================= */
.p-overviewCard__brand {
  justify-self: end;
  align-self: end;
  flex-shrink: 0;
  max-width: clamp(140px, 15vw, 240px); /* 로고가 텍스트 영역을 과하게 침범하지 않도록 제한 */
}

.p-overviewCard__brandLogo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Accessibility: aria-hidden="true"이므로 시각적 요소로만 기능 */
}

/* =========================
   Responsive
========================= */

/* 태블릿 구간: 겹침 위험이 높으므로 배치를 전환하거나 로고를 조정 */
@media (max-width: 1024px) {
  .p-overviewCard__layout {
    column-gap: 40px;
  }
}

@media (max-width: 960px) {
  /* 네 기존 스타일대로 960px 이하에서 로고를 숨김 */
  .p-overviewCard__brand {
    display: none;
  }
  .p-overviewCard__layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .p-overviewMetaGrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .p-overviewMetaItem {
    grid-template-columns: 1fr;
    row-gap: 8px;
    justify-items: start;
  }
  
  .p-overviewMetaValue {
    white-space: normal;
    line-height: 1.4;
  }
}

/* =========================
   Reveal (title vs body)
========================= */
[data-reveal-title]{opacity: 0; transform: translate3d(0,14px,0); transition: opacity .6s var(--p-ease,cubic-bezier(.2,.8,.2,1)),transform .6s var(--p-ease,cubic-bezier(.2,.8,.2,1)); will-change: opacity,transform;}
[data-reveal-title].is-revealed{opacity: 1; transform: translate3d(0,0,0);}
[data-reveal-body]{opacity: 0; transform: translate3d(0,18px,0); transition: opacity .85s var(--p-ease,cubic-bezier(.2,.8,.2,1)),transform .85s var(--p-ease,cubic-bezier(.2,.8,.2,1)); transition-delay: .08s; will-change: opacity,transform;}
[data-reveal-body].is-revealed{opacity: 1; transform: translate3d(0,0,0);}

[data-split-words][data-reveal-title] .sw{transition-duration: .7s; transition-delay: calc(var(--sw-i,0)*35ms);}

@media(prefers-reduced-motion:reduce){
  [data-reveal-title],[data-reveal-body]{opacity: 1; transform: none; transition: none;}
  [data-split-words] .sw{transform: none; opacity: 1; transition: none;}
}

/* =========================
   Project Nav
========================= */
.p-navBar{position: relative; width: 100%; margin: 0; padding: 0; background: var(--p-nav-bg); border-top: 1px solid var(--p-nav-bd);}
.p-navBar__row{display: flex; width: 100%; margin: 0; padding: 0;}
.p-navBar__cell{margin: 0; padding: 0;}
.p-navBar__cell--next{flex: 0 0 40%;}
.p-navBar__cell--list{flex: 0 0 20%;}
.p-navBar__cell--prev{flex: 0 0 40%;}

.p-navBar__btn{display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; height: 100%; margin: 0; padding: 12px 24px; background: var(--p-nav-gray); border: 0; border-radius: 0; text-decoration: none; color: inherit; transition: background .22s ease,color .22s ease;}
.p-navBar__btn--next{justify-content: space-between; border-left: 1px solid var(--p-nav-bd); border-right: 1px solid var(--p-nav-bd);}
.p-navBar__btn--list{justify-content: center; border-right: 1px solid var(--p-nav-bd);}
.p-navBar__btn--prev{border-right: 1px solid var(--p-nav-bd);}
.p-navBar__btn.is-disabled{opacity: .35; pointer-events: none;}

.p-navBar__meta{display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto;}
.p-navBar__btn--next .p-navBar__meta{text-align: right;}
.p-navBar__cat{font-family: var(--font-display); font-size: var(--fs-body-xs); transition: opacity .22s ease;}
.p-navBar__title{font-family: var(--font-display); font-size: var(--fs-body-md); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.p-navBar__icon{display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .22s ease;}
.p-navBar__arrow{display: block; width: 21px; height: 21px; fill: currentColor;}
.p-navBar__arrow--left{transform: rotate(180deg);}

.p-navBar__btn:hover{background: var(--color-primary); color: var(--color-white);}
.p-navBar__btn:hover .p-navBar__cat{opacity: 1;}
.p-navBar__btn:hover .p-navBar__icon{transform: translate3d(2px,0,0);}
.p-navBar__btn--next:hover .p-navBar__icon{transform: translate3d(-2px,0,0);}

.p-navBar__cell--list{text-align: center;}
.p-navBar__cell--next,.p-navBar__cell--prev{min-width: 0; overflow: hidden;}
.p-navBar__btn--next,.p-navBar__btn--prev{min-width: 0; overflow: hidden;}
.p-navBar__cat,.p-navBar__title{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

@media(max-width:900px){
  .p-navBar__btn--next,.p-navBar__btn--prev{width: 100%; min-width: 0; overflow: hidden;}
  .p-navBar__meta{min-width: 0; overflow: hidden;}
  .p-navBar__cat,.p-navBar__title{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
}

@media(max-width:768px){
  .p-navBar__row{flex-wrap: wrap;}
  .p-navBar__cell--list{flex: 0 0 100%; order: 0;}
  .p-navBar__cell--next{flex: 0 0 50%; order: 1;}
  .p-navBar__cell--prev{flex: 0 0 50%; order: 2;}
  .p-navBar__btn--list{border-bottom: 1px solid var(--p-nav-bd); padding: 14px 20px;}
  .p-navBar__btn--next{border-right: 1px solid var(--p-nav-bd);}
  .p-navBar__btn--next .p-navBar__meta{text-align: left;}
}

/* sticky */
.p-navSticky{position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; transform: translate3d(0,110%,0); opacity: 0; pointer-events: none; transition: transform .28s var(--p-ease,cubic-bezier(.2,.8,.2,1)),opacity .22s ease; padding-bottom: env(safe-area-inset-bottom,0);}
.p-navSticky.is-visible{transform: translate3d(0,0,0); opacity: 1; pointer-events: auto;}
.p-navSticky .p-navBar{box-shadow: 0 -10px 30px rgba(0,0,0,.12);}

@media(max-width:768px){
  .p-navSticky .p-navBar__cell--next,.p-navSticky .p-navBar__cell--prev{display: none;}
  .p-navSticky .p-navBar__cell--list{flex: 0 0 100%;}
  .p-navSticky .p-navBar__btn--list{border-left: 0; border-right: 0;}

  .p-navBar__row{flex-wrap: wrap;}
  .p-navBar__cell--prev{display: none;}
  .p-navBar__cell--next{flex: 0 0 100%; order: 0;}
  .p-navBar__cell--list{flex: 0 0 100%; order: 1;}
  .p-navBar__btn--next{border-left: 0; border-right: 0; border-bottom: 1px solid var(--p-nav-bd);}
  .p-navBar__btn--list{border-right: 0;}
}