/* ============================================================
   ALLOPOP — layout & type system
   Type: Inter (sans) + Cormorant Garamond (narrow serif)
   ============================================================ */

/* ---- PP Editorial Old (self-hosted) ---- */
@font-face {
  font-family: "PP Editorial Old";
  src: url("../fonts/PPEditorialOld-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Editorial Old";
  src: url("../fonts/PPEditorialOld-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Editorial Old";
  src: url("../fonts/PPEditorialOld-Ultralight.woff2") format("woff2");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Editorial Old";
  src: url("../fonts/PPEditorialOld-UltralightItalic.woff2") format("woff2");
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Editorial Old";
  src: url("../fonts/PPEditorialOld-Ultrabold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Editorial Old";
  src: url("../fonts/PPEditorialOld-UltraboldItalic.woff2") format("woff2");
  font-weight: 800; font-style: italic; font-display: swap;
}

/* ---- Pretendard Variable (한글 전용, self-hosted) ---- */
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --grey:  #8a8a8a;
  --line:  #e3e3e3;
  /* 라틴은 PP Editorial Old / Inter가 먼저 소비하고, 한글 글리프는 Pretendard로 폴백 */
  --serif: "PP Editorial Old", "Cormorant Garamond", "Garamond", "Pretendard", serif;
  --sans:  "Inter", "Helvetica Neue", Helvetica, Arial, "Pretendard", sans-serif;
  --logo:  "Archivo Black", "Inter", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  overflow-x: hidden;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

em {
  font-style: italic;
  font-family: var(--serif);
}

/* ============ HEADER ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  font-size: 14px;
  font-weight: 500;
  mix-blend-mode: difference;
  color: #fff;
}

.site-header a { color: #fff; }

.nav-center {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  margin-right: 48px;
}

.nav-center .slash { color: #999; }

.nav-item .plus {
  display: inline-block;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  vertical-align: -1px;
  transition: transform .3s ease;
}

.nav-item:hover .plus { transform: rotate(90deg); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.hero-gallery {
  position: absolute;
  inset: 0;
}

.hg {
  position: absolute;
  overflow: hidden;
  background: #f2f2f2;
}

.hg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .8s ease;
}

/* collage placement — vivmgmt 스타일의 비정형 배치 */
.hg-1 { left: 0;    top: 18vh; width: 11vw; height: 60vh; }
.hg-2 { left: 12vw; top: 42vh; width: 15vw; height: 38vh; }
.hg-3 { left: 38vw; top: 30vh; width: 17vw; height: 55vh; }
.hg-4 { left: 63vw; top: 42vh; width: 16vw; height: 32vh; }
.hg-5 { left: 89vw; top: 18vh; width: 11vw; height: 58vh; }
.hg-6 { left: 80vw; top: 62vh; width: 13vw; height: 30vh; display: none; }

/* 거대 로고 — 이미지 위에 오버랩 */
.hero-logo {
  position: absolute;
  top: 14vh;
  left: 10vw;
  z-index: 3;
  font-family: var(--logo);
  font-size: 11.5vw;
  letter-spacing: -0.04em;
  line-height: .9;
  color: var(--black);
  user-select: none;
}

.hero-tag {
  position: absolute;
  z-index: 4;
  top: 17vh;
  left: 71vw;
  font-size: 24px;
  line-height: 1.25;
  max-width: 300px;
}

/* 대형 세리프 스테이트먼트 — 로고/이미지 위로 흐르는 문장 */
.hero-statement {
  position: absolute;
  z-index: 4;
  top: 36vh;
  left: 6vw;
  width: 90vw;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.9vw, 98px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--black);
  pointer-events: none;
}

.hero-statement .st-line2 { margin-left: 8vw; }

/* ============ 공통 섹션 타이포 ============ */
.big-serif {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 150px);
  line-height: 1.0;
  letter-spacing: -0.01em;
}

.section-sub {
  margin-top: 18px;
  font-size: 15px;
  color: var(--grey);
}

/* ============ WORK ============ */
.work {
  padding: 16vh 24px 10vh;
}

.work-filter {
  display: flex;
  gap: 24px;
  margin: 40px 0 48px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.filter-btn {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--grey);
  cursor: pointer;
  padding: 0;
  transition: color .25s;
}

.filter-btn:hover,
.filter-btn.is-active { color: var(--black); }

.work-grid {
  column-count: 4;
  column-gap: 20px;
}

.work-item {
  position: relative;
  display: block;
  break-inside: avoid;
  margin-bottom: 20px;
  cursor: pointer;
}

.work-item.is-hidden { display: none; }

.work-item .img-wrap {
  position: relative;
  overflow: hidden;
  background: #f6f6f6;
}

.work-item img.art { transition: opacity .45s ease; }

.work-item img.onbody {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
}

.work-item:hover img.onbody { opacity: 1; }

.work-item figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
}

.work-item figcaption .cat {
  color: var(--grey);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
}

/* ============ STATEMENTS ============ */
.statements {
  padding: 18vh 24px;
  border-top: 1px solid var(--line);
}

.statement-line {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.25;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}

.statement-line.in-view {
  opacity: 1;
  transform: none;
}

.statement-line:nth-child(even) { margin-left: 10vw; }

.statement-sub {
  margin-top: 8vh;
  font-size: 15px;
  line-height: 1.9;
  color: var(--grey);
}

/* ============ LOOKBOOK ============ */
.lookbook {
  padding: 12vh 0 12vh 24px;
  border-top: 1px solid var(--line);
}

.lookbook .big-serif,
.lookbook .section-sub { padding-right: 24px; }

.lookbook-strip {
  margin-top: 48px;
  overflow: hidden; /* 스크롤바 제거 */
}

/* 좌측 자동 롤링 트랙 (호버 시 일시정지) */
.lookbook-track {
  display: flex;
  width: max-content;
  animation: lbroll 70s linear infinite;
}

.lookbook-track:hover { animation-play-state: paused; }

@keyframes lbroll { to { transform: translateX(-50%); } }

.lookbook-strip figure {
  flex: 0 0 auto;
  width: clamp(240px, 26vw, 420px);
  margin-right: 20px;
}

.lookbook-strip img {
  height: clamp(320px, 36vw, 560px);
  object-fit: cover;
}

/* ============ CONTACT ============ */
.contact {
  padding: 16vh 24px;
  border-top: 1px solid var(--line);
}

.contact-form {
  max-width: 720px;
  margin-top: 8vh;
}

.field { margin-bottom: 40px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}

.field input,
.field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--black);
  background: transparent;
  font-family: var(--serif);
  font-size: 26px;
  padding: 6px 0 14px;
  border-radius: 0;
  outline: none;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #c4c4c4;
  font-style: normal; /* 한글 placeholder — 이탤릭 금지 */
  font-family: "Pretendard", var(--sans);
  font-size: 20px;
}

.field input:focus,
.field textarea:focus { border-bottom-width: 2px; }

.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--black);
  color: var(--white);
  border: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  padding: 18px 36px;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity .25s;
}

.submit-btn:hover { opacity: .8; }

.submit-btn .plus { font-size: 18px; font-weight: 400; }

.form-note {
  margin-top: 28px;
  font-size: 13px;
  color: var(--grey);
}

.form-email {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 24px;
}

.form-email a { border-bottom: 1px solid var(--black); }

/* ============ FOOTER ============ */
.site-footer {
  border-top: 1px solid var(--black);
  padding: 10vh 24px 0;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 900px;
}

.fcol h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 18px;
}

.fcol a {
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--black);
}

.fcol a:hover { text-decoration: underline; }

.copyright {
  margin-top: 10vh;
  font-size: 12px;
  color: var(--grey);
}

.footer-logo {
  font-family: var(--logo);
  font-size: 19.5vw;
  letter-spacing: -0.04em;
  line-height: .78;
  margin-top: 4vh;
  transform: translateY(0.12em);
  user-select: none;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  .work-grid { column-count: 2; }
  .hg-2, .hg-4 { display: none; }
  .hg-6 { display: block; }
  .hero-tag { left: auto; right: 24px; top: 27vh; font-size: 16px; max-width: 180px; text-align: right; }
  .hero-logo { font-size: 15.5vw; left: 24px; top: 12vh; }
  .hero-statement { top: 44vh; font-size: clamp(36px, 8.5vw, 72px); }
}

@media (max-width: 600px) {
  .nav-center { display: none; }
  .work-grid { column-count: 1; }
  .hg-1 { width: 30vw; }
  .hg-5 { width: 28vw; }
  .footer-cols { grid-template-columns: 1fr; }
  .field input, .field textarea { font-size: 20px; }
}

/* ============ MOTION ============ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(44px); }
  to   { opacity: 1; transform: none; }
}

.hero-logo      { animation: fadeUp .9s  .1s cubic-bezier(.2,.7,.2,1) both; }
.hero-tag       { animation: fadeUp .9s  .4s cubic-bezier(.2,.7,.2,1) both; }
.hero-statement { animation: fadeUp 1.1s .55s cubic-bezier(.2,.7,.2,1) both; }

/* 콜라주 이미지 — 느린 플로팅 */
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-16px); } }
.hg   { animation: drift 7s ease-in-out infinite alternate; }
.hg-2 { animation-delay: 1.2s; }
.hg-3 { animation-delay: .6s; }
.hg-4 { animation-delay: 1.8s; }
.hg-5 { animation-delay: .3s; }
.hg-6 { animation-delay: .9s; }

/* 스크롤 리빌 */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view { opacity: 1; transform: none; }

/* 호버 줌 */
.work-item .img-wrap img {
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .45s ease;
}
.work-item:hover .img-wrap img { transform: scale(1.04); }
.lookbook-strip img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.lookbook-strip figure:hover img { transform: scale(1.03); }
.work-item .img-wrap, .lookbook-strip figure { cursor: zoom-in; }

/* ============ MARQUEE ============ */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}

.marquee-track {
  display: inline-block;
  animation: marquee 30s linear infinite;
}

.marquee-track span {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 52px);
  padding-right: 56px;
}

.marquee-track .dot { color: var(--grey); }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 4vh 4vw;
  background: rgba(255, 255, 255, .96);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  cursor: zoom-out;
}

.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox img {
  max-width: 92vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .22);
  transform: scale(.95);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.lightbox.is-open img { transform: none; }

.lb-caption {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--black);
}

.lb-hint {
  font-size: 12px;
  color: var(--grey);
}

/* ============ 영문 타이포 스플릿 애니메이션 ============ */
.w  {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* PP Editorial Old 글리프가 em 박스를 넘어서므로 마스크 창에 여백 (레이아웃 영향 없음)
     - 위 .2em: 대문자 어센더(C 등), 아래 .32em: p/g/y 디센더 */
  padding: .2em .08em .32em;
  margin: -.2em -.08em -.32em;
}
.wi {
  display: inline-block;
  transform: translateY(160%); /* 늘어난 마스크 창 밖까지 완전히 숨김 */
  transition: transform .85s cubic-bezier(.2,.7,.2,1);
}
.ts-in .wi, .in-view .wi { transform: none; }

/* 로고는 글자 마스크로만 등장 (블록 페이드 제거) */
.hero-logo { animation: none; }

/* ============ STATEMENTS 배경 영상 ============ */
.statements {
  position: relative;
  overflow: hidden;
}

.statements-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.statements .statement-line,
.statements .statement-sub {
  position: relative;
  z-index: 2;
  color: #fff;
}

.statements .statement-sub { color: rgba(255, 255, 255, .88); }

/* ============ 푸터 로고 이미지 ============ */
img.footer-logo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6vh;
  transform: none;
}

/* ============ 히어로 9:16 영상 슬롯 ============ */
.hg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ============ FAQ (SEO/GEO) ============ */
.faq {
  max-width: 720px;
  margin-top: 12vh;
}

.faq-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  margin-bottom: 20px;
}

.faq details {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}

.faq details:last-child { border-bottom: 1px solid var(--line); }

.faq summary {
  font-family: var(--serif);
  font-size: 21px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--grey);
  transition: transform .3s ease;
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.9;
  color: #555;
}

/* 푸터 SEO 문단 */
.footer-seo {
  margin-top: 8vh;
  max-width: 860px;
  font-size: 12px;
  line-height: 1.9;
  color: #b5b5b5;
}