/* ===================================================================
   SUN PICTURES – style.css
   컬러 토큰 · 폰트 · 풀페이지 스크롤 · 반응형
   =================================================================== */

:root {
  --accent: #f75d33;      /* 포인트 오렌지 */
  --dark:   #2a2827;      /* 다크 */
  --dark-2: #1e1c1b;
  --paper:  #ffffff;
  --gray:   #f4f2f0;
  --text:   #2a2827;
  --text-soft: #6b6763;

  --header-h: 88px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: "Noto Sans", "Noto Sans KR", -apple-system, sans-serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--dark);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;               /* 스크롤은 .scroller가 담당 */
}

a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--accent); }

/* "──" 연결선 (Concept to Color ── and now to Code) */
.hr-line {
  display: inline-block;
  width: 46px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  vertical-align: middle;
  margin: 0 16px;
}

/* ===================== 헤더 (배경 없음 · 고정) ===================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: transparent;         /* 배경색 제거 */
}
.header-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo img {
  height: 56px;                    /* 로고 확대 */
  width: auto;
  display: block;
  transition: filter .3s var(--ease);
}
.gnb { display: flex; gap: 34px; }
.gnb a {
  color: #fff;
  font-weight: 500;
  font-size: 13px;                 /* 메뉴 폰트 축소 */
  letter-spacing: .1em;
  padding: 6px 2px;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  transition: color .25s;
}
.gnb a:hover { color: var(--accent); }
.gnb a.active { color: var(--accent); }   /* 선택 메뉴: 밑줄 대신 포인트 컬러 */

/* 밝은 배경 섹션 위에서는 헤더 글자를 어둡게 */
.site-header.on-light .gnb a { color: var(--dark); text-shadow: none; }
.site-header.on-light .gnb a:hover,
.site-header.on-light .gnb a.active { color: var(--accent); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px;
}
.menu-toggle span {
  width: 26px; height: 2px; background: #fff; border-radius: 2px;
  transition: .3s var(--ease);
}
.site-header.on-light .menu-toggle span { background: var(--dark); }

/* ===================== 우측 도트 네비 ===================== */
.dot-nav {
  position: fixed;
  right: 28px; top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.dot-nav a {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.65);
  background: transparent;
  transition: .3s var(--ease);
}
.dot-nav a.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.25);
}
.dot-nav.on-light a { border-color: rgba(42,40,39,.4); }
.dot-nav.on-light a.active { border-color: var(--accent); }

/* ===================== 스크롤 컨테이너 ===================== */
.scroller {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }

.section {
  position: relative;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.section-inner {
  width: 100%;
  max-width: 1240px;
  padding: 0 44px;
  margin: 0 auto;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--accent);
  margin-bottom: 18px;
}

/* ===================== 1. HERO : 영상 + 헤드카피 ===================== */
.hero {
  background: var(--dark-2);
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 0;                  /* 헤더 영역까지 영상으로 채움 */
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 100vh;
}
.hero-video-wrap {
  position: relative;
  width: 100vw;                    /* 좌우 꽉 채움 */
  flex: 0 0 68vh;                  /* 최상단(헤더 뒤)부터 채우고 세로 크롭(덜 잘리게) */
  overflow: hidden;
  background: #000;
}
/* 헤더 글자 가독성용 상단 그라데이션(영상 위) */
.hero-video-wrap::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 16%, rgba(0,0,0,0) 34%);
  pointer-events: none;
}
.hero-video {
  position: absolute;
  top: 50%; left: 50%;
  /* 16:9 영상을 폭 기준으로 채우고 세로를 크롭(cover) */
  width: 100vw;
  height: 56.25vw;                 /* 100vw 기준 16:9 높이 */
  min-height: 100%;
  min-width: 177.78vh;             /* 세로 기준으로도 항상 폭을 채움 */
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.hero-copy {
  flex: 1;                         /* 영상 아래 남은 영역에서 세로 중앙 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px 72px;            /* 하단 스크롤 힌트 공간 확보 → 카피가 위로 중앙 정렬 */
}
.hero-title {
  color: #fff;
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 38px);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.hero-sub {
  margin-top: 16px;
  color: rgba(255,255,255,.9);
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 400;
  letter-spacing: .03em;
}
.hero-sub em { color: var(--accent); font-weight: 600; }

.scroll-hint {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: rgba(255,255,255,.7);
  font-size: 11px; letter-spacing: .3em; font-weight: 600;
}
.scroll-hint i {
  width: 20px; height: 32px; border: 2px solid rgba(255,255,255,.55);
  border-radius: 12px; position: relative;
}
.scroll-hint i::after {
  content: ""; position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; background: #fff; border-radius: 2px;
  transform: translateX(-50%);
  animation: wheel 1.6s var(--ease) infinite;
}
@keyframes wheel { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,10px)} }

/* ===================== 2. ABOUT ===================== */
.about { background: var(--paper); color: var(--text); }
.about-inner { max-width: 980px; text-align: center; }
.about-title {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
}
.about-title-sub {
  display: block;
  margin-top: 16px;
  font-size: clamp(13px, 1.3vw, 17px);
  color: var(--text-soft);
  font-weight: 400;
  letter-spacing: .03em;
}
.about-body {
  margin-top: 40px;
  display: flex; flex-direction: column; gap: 22px;
}
.about-body p {
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.85;
  color: #4a4642;
  font-weight: 300;
}
.about-body .about-em {
  font-weight: 700;
  color: var(--dark);
  font-size: clamp(16px, 1.5vw, 21px);
  margin-top: 8px;
}

/* ===================== 3~6. PORTFOLIO ===================== */
.portfolio {
  color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.portfolio-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(18,16,15,.30) 0%, rgba(18,16,15,.28) 45%, rgba(18,16,15,.62) 100%);
}
/* 좌측 정렬 섹션: 왼쪽을 더 어둡게 */
.portfolio.left .portfolio-overlay {
  background:
    linear-gradient(95deg, rgba(18,16,15,.80) 0%, rgba(18,16,15,.42) 45%, rgba(18,16,15,.20) 100%),
    linear-gradient(to bottom, rgba(18,16,15,0) 55%, rgba(18,16,15,.45) 100%);
}
/* 우측 정렬 섹션: 오른쪽을 더 어둡게 */
.portfolio.right .portfolio-overlay {
  background:
    linear-gradient(265deg, rgba(18,16,15,.80) 0%, rgba(18,16,15,.42) 45%, rgba(18,16,15,.20) 100%),
    linear-gradient(to bottom, rgba(18,16,15,0) 55%, rgba(18,16,15,.45) 100%);
}
/* 분할 섹션: 전체 균일 + 하단 비네트 */
.portfolio.split .portfolio-overlay {
  background:
    linear-gradient(to bottom, rgba(18,16,15,.42) 0%, rgba(18,16,15,.40) 40%, rgba(18,16,15,.60) 100%);
}

.portfolio-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  height: 100%;
  padding: calc(var(--header-h) + 20px) 60px 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(26px, 9vh, 92px);
  text-shadow: 0 2px 20px rgba(0,0,0,.55);
}
/* 분할(Museum)은 영문제목 위 / 하단행 아래로 더 넓게 */
.portfolio.split .portfolio-inner { gap: clamp(40px, 16vh, 150px); }
.portfolio.left  .portfolio-inner { align-items: flex-start; text-align: left; }
.portfolio.right .portfolio-inner { align-items: flex-end;  text-align: right; }
.portfolio.split .portfolio-inner { align-items: stretch; text-align: left; }

.pf-eng {
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.pf-details { max-width: 560px; }
.portfolio.right .pf-details { margin-left: auto; }
.pf-title {
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 4px;
}
.pf-sub {
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 500;
  color: rgba(255,255,255,.85);
  margin-bottom: 6px;
}
.pf-date {
  font-size: 14px;
  color: rgba(255,255,255,.72);   /* 강조컬러 제거 → 뉴트럴 */
  font-weight: 500;
  letter-spacing: .05em;
  margin-bottom: 20px;
}
.pf-desc {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.9;
  color: rgba(255,255,255,.86);
  font-weight: 300;
}

/* 분할(Museum) 하단 행: 좌측 제목블록 / 우측 설명 */
.pf-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
}
.pf-bottom-row .pf-details { max-width: 46%; }
.pf-bottom-row .pf-desc { max-width: 46%; }
.portfolio.split .pf-date { margin-bottom: 0; }

/* ===================== 7. CLIENT ===================== */
.client { background: var(--paper); color: var(--text); }
.client-inner { text-align: center; }
.cc-title {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  margin-bottom: 44px;
}

/* --- 클라이언트 로고 그리드 (페이지를 채움) --- */
.client-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(18px, 3vw, 44px) clamp(20px, 3vw, 40px);
  align-items: center;
  justify-items: center;
  max-width: 1120px;
  margin: 0 auto;
}
.client-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(56px, 8vh, 84px);
}
.client-grid img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  opacity: .85;
  transition: opacity .25s, transform .25s;
}
.client-grid img:hover { opacity: 1; transform: scale(1.06); }

/* ===================== 8. CONTACT + 푸터 ===================== */
.contact-section {
  background: var(--gray);
  color: var(--text);
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.contact-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 12px) 40px 24px;
}
.contact-block {
  width: 100%;
  max-width: 720px;
  text-align: center;
}
.contact-block .eyebrow { text-align: center; }
.contact-lead {
  color: var(--text-soft);
  font-size: 15px;
  margin-bottom: 28px;
  line-height: 1.6;
}
.contact-lead strong { color: var(--accent); }
.contact-form { text-align: left; }
.field-row { display: flex; gap: 16px; }
.field { display: flex; flex-direction: column; flex: 1; margin-bottom: 14px; }
.field > span {
  font-size: 13px; font-weight: 600; color: #4a4642; margin-bottom: 7px;
}
.field > span i { color: var(--accent); font-style: normal; }
.field input, .field textarea {
  font-family: var(--font);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #ddd7d2;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(247,93,51,.15);
}
.hp-field { position: absolute; left: -9999px; opacity: 0; }

/* 개인정보 동의 체크 */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 18px;
  font-size: 13.5px;
  color: #4a4642;
  line-height: 1.5;
  cursor: pointer;
}
.consent input {
  width: 17px; height: 17px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent small { display: block; color: var(--text-soft); font-size: 12px; margin-top: 2px; }

.submit-btn {
  display: inline-block;
  margin-top: 6px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  padding: 14px 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;      /* 플랫: 그림자 제거 */
}
.submit-btn:hover { background: #ee4e22; }
.submit-btn:disabled { opacity: .6; cursor: default; transform: none; }
.form-result {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  min-height: 20px;
}
.form-result.ok  { color: #1f8a4c; }
.form-result.err { color: #d23f2f; }

/* 푸터 (컬러 없음 - 컨택트 배경과 동일, 어두운 글자) */
.site-footer {
  width: 100%;
  background: transparent;
  color: var(--text-soft);
  padding: 22px 0 22px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 30px;
}
.footer-brand img { height: 30px; width: auto; }
.footer-info { font-size: 12.5px; line-height: 1.75; color: var(--text-soft); }
.footer-info p { margin: 0; }
.footer-info strong { color: var(--dark); }
.footer-info a { color: var(--accent); }
.copyright {
  margin-left: auto;
  font-size: 12px;
  color: #9a938c;
  letter-spacing: .04em;
}

/* ===================== 반응형 (모바일/태블릿) ===================== */
@media (max-width: 900px) {
  :root { --header-h: 70px; }
  .header-inner { padding: 0 20px; }
  .logo img { height: 38px; }
  .gnb {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(26,24,23,.97);
    padding: 8px 0;
    transform: translateY(calc(-100% - var(--header-h) - 10px));
    transition: transform .35s var(--ease);
  }
  .gnb.open { transform: translateY(0); }
  .gnb a { padding: 15px 22px; color: #fff; text-shadow: none; font-size: 15px; }
  .site-header.on-light .gnb a { color: #fff; }
  .menu-toggle { display: flex; }
  .dot-nav { display: none; }

  /* 모바일: 풀페이지 스냅 완화 + 세로 스크롤 허용 */
  .scroller { scroll-snap-type: none; scroll-behavior: smooth; }
  .section {
    height: auto;
    min-height: 100vh;
    scroll-snap-align: none;
    padding-top: var(--header-h);
    padding-bottom: 40px;
  }
  .hero { min-height: 100vh; }
  .hero-inner { height: 100vh; }
  .hero-video-wrap { width: 100vw; flex: 0 0 58vh; }

  /* 포트폴리오 모바일: 세로 정렬 (Museum 페이지 간격에 통일) */
  .portfolio-inner,
  .portfolio.split .portfolio-inner {
    justify-content: center;
    gap: clamp(52px, 15vh, 130px);
    padding: calc(var(--header-h) + 30px) 24px 50px;
  }
  .portfolio.right .portfolio-inner { align-items: flex-start; text-align: left; }
  .portfolio.right .pf-details { margin-left: 0; }
  .portfolio .portfolio-overlay,
  .portfolio.left .portfolio-overlay,
  .portfolio.right .portfolio-overlay,
  .portfolio.split .portfolio-overlay {
    background: linear-gradient(to bottom, rgba(18,16,15,.40), rgba(18,16,15,.62));
  }
  .pf-details, .pf-bottom-row .pf-details, .pf-bottom-row .pf-desc { max-width: 100%; }
  .pf-bottom-row { flex-direction: column; align-items: flex-start; gap: 20px; }

  .field-row { flex-direction: column; gap: 0; }
  .contact-section { height: auto; min-height: 100vh; }
  .footer-inner { justify-content: center; text-align: center; }
  .copyright { margin: 8px auto 0; }
  .client-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 18px; }
  .client-grid span { height: 54px; }
}

@media (max-width: 520px) {
  .hero-title { font-size: 22px; }
  .about-body p { font-size: 15px; }
  .contact-block, .section-inner { padding-left: 22px; padding-right: 22px; }
  .hr-line { width: 30px; margin: 0 10px; }
}

/* 모션 최소화 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .scroll-hint i::after { animation: none; }
  .scroller { scroll-behavior: auto; }
}