/* ============================================================
   기린설비 — 공통 스타일
   디자인 근거: design.md/DESIGN.md (Ashton Bespoke 스타일 가이드)
   색은 4개만 사용: 양피지 / 먹색 / 흰색 / 와인(푸터 전용)
   ============================================================ */

:root {
  --c-parchment: #e0ded8;
  --c-ink: #262626;
  --c-white: #ffffff;
  --c-wine: #38141b;

  --font-serif: 'Noto Serif KR', 'Batang', serif;
  --font-sans: 'Noto Sans KR', 'Malgun Gothic', sans-serif;

  --sp-section: 120px;
  --sp-block: 24px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-parchment);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* ---------- 내비게이션 ---------- */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 40px;
  background: transparent;
}

.nav__brand {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.022em;
  text-decoration: none;
}

.nav__links {
  display: flex;
  gap: 28px;
}

.nav__links a {
  font-size: 15px;
  letter-spacing: 0.021em;
  text-decoration: none;
}

.nav__links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 히어로(어두운 배경) 위에 얹히는 변형 */
.nav--over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  color: var(--c-white);
}

/* ---------- 히어로 ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh; /* 모바일 주소창을 뺀 실제 보이는 높이 (미지원 브라우저는 100vh 폴백) */
  min-height: 480px;
  background: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 히어로 배경 영상 — 화면을 가득 채우고 제목·메뉴가 그 위에 얹힘.
   여러 개가 겹쳐 있다가 재생 순서에 따라 부드럽게 교체됨 */
.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero__video.is-active {
  opacity: 1;
}

.hero__title {
  position: relative;
  z-index: 5;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: 0.031em;
  color: var(--c-white);
  text-indent: 0.031em; /* 자간의 마지막 여백을 상쇄해 시각적 중앙 유지 */
}

/* ---------- 공통 텍스트 요소 ---------- */

.anchor-label {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.021em;
  text-align: center;
}

.statement {
  padding: 160px 24px;
  text-align: center;
}

.statement__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: 0.022em;
  max-width: 20em;
  margin: 0 auto;
}

.statement__title--sm {
  font-size: 32px;
  letter-spacing: 0.017em;
}

.statement__caption {
  margin-top: 32px;
  font-size: 15px;
  letter-spacing: 0.021em;
}

.btn-link {
  display: inline-block;
  margin-top: 32px;
  font-size: 18px;
  letter-spacing: 0.021em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- 50/50 분할 섹션 ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 60px;
}

.split__text h2,
.split__text h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 0.017em;
  margin-bottom: var(--sp-block);
}

.split__text p {
  max-width: 460px;
  margin-bottom: 16px;
}

.split__text p:last-child {
  margin-bottom: 0;
}

.split--rev .split__text {
  order: 2;
}

.split--rev .split__media {
  order: 1;
}

/* ---------- 임시 이미지 블록 (추후 <img>로 교체) ---------- */

.ph {
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  letter-spacing: 0.021em;
  width: 100%;
}

.ph--tall {
  aspect-ratio: 4 / 3;
  height: 100%;
}

.ph--wide {
  aspect-ratio: 21 / 9;
  width: min(92%, 900px);
  margin: 0 auto;
}

/* 임시 블록을 실제 사진(<img>)으로 교체해도 같은 배치가 유지되게 하는 규칙 */
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--c-ink);
}

/* 사진 자동 전환 슬라이드 — 겹쳐 두고 부드럽게 교체.
   사진이 겹침 구조라 칸 높이를 사진 비율(4:3)로 직접 지정 */
.media-rotate {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.media-rotate img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.media-rotate img.is-active {
  opacity: 1;
}

/* 작은 슬라이드 변형 — 칸보다 작게 가운데 배치, 사진 전체가 잘리지 않게 표시 */
.media-rotate--sm {
  width: 78%;
  align-self: center;
  justify-self: center;
}

/* 사진을 원본 비율 그대로 칸 가운데에 놓고, 테두리는 사진 크기에 딱 맞게 */
.media-rotate--sm img {
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
}

/* 사례 영상 — 잘리지 않게 전체를 보여주고 남는 공간은 먹색으로 채움 */
.split__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
}

.section > img {
  display: block;
  width: min(92%, 900px);
  margin: 0 auto;
  border: 1px solid var(--c-ink);
}

/* 사진 바로 아래에 붙는 설명 문구 */
.photo-caption {
  width: min(92%, 900px);
  margin: 16px auto 0;
  font-size: 15px;
  letter-spacing: 0.021em;
  text-align: center;
}

/* 사진 두 장을 나란히 배치하는 쌍 — 세로·가로가 섞여도 같은 비율로 맞춤 */
.split--pair {
  width: min(92%, 900px);
  margin: 0 auto;
  gap: 16px;
}

.split--pair .split__media {
  aspect-ratio: 4 / 5;
}

/* 사진·영상 3개를 나란히 배치하는 변형 */
.split--three {
  grid-template-columns: 1fr 1fr 1fr;
}

/* 잘리지 않고 원본 비율 그대로 보여주는 변형 */
.split--fit {
  align-items: center;
}

.split--fit .split__media {
  aspect-ratio: auto;
}

.split--fit .split__media img {
  height: auto;
}

/* 사진·영상 묶음 바로 아래에 오는 이미지와의 간격 */
.split--pair + img {
  margin-top: 16px;
}

/* 한 항목 안에서 설명 다음에 이어지는 사진 묶음과의 간격 */
.photo-caption + img {
  margin-top: 60px;
}

/* ---------- 작업일지 목록 (시공사례) ---------- */

.worklog {
  padding-top: 40px;
}

.log-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.log-row {
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 18px 8px;
  border-bottom: 1px solid var(--c-ink);
  text-decoration: none;
}

.log-row:first-child {
  border-top: 1px solid var(--c-ink);
}

/* 대표 사진 썸네일 */
.log-row__thumb {
  width: 260px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--c-ink);
  flex-shrink: 0;
  display: block;
}

.log-row__thumb--ph {
  background: var(--c-ink);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  letter-spacing: 0.021em;
}

.log-row__title {
  font-size: 18px;
  letter-spacing: 0.021em;
}

.log-row:hover .log-row__title {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.log-row__note {
  font-size: 15px;
}

.log-back {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 0;
}

.log-back a {
  font-size: 18px;
  letter-spacing: 0.021em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- 서브페이지 머리 ---------- */

.page-head {
  padding: 100px 24px 40px;
  text-align: center;
}

.page-head h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: 0.022em;
  margin-top: var(--sp-block);
}

.page-head .page-head__note {
  margin-top: var(--sp-block);
  font-size: 15px;
  letter-spacing: 0.021em;
}

/* ---------- 본문 좁은 컬럼 ---------- */

.prose {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px;
}

.prose p {
  margin-bottom: var(--sp-block);
}

.prose .anchor-label {
  text-align: left;
  margin-top: 40px;
}

/* ---------- 주요 서비스 칩 ---------- */

.service-chips {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.service-chips li {
  border: 1px solid var(--c-ink);
  border-radius: 4px;
  padding: 12px 28px;
  font-size: 16px;
  letter-spacing: 0.021em;
}

/* ---------- 사업자 정보 목록 ---------- */

.info-list {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px var(--sp-section);
}

.info-list div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-ink);
  font-size: 15px;
  letter-spacing: 0.021em;
}

.info-list div:first-child {
  border-top: 1px solid var(--c-ink);
}

.info-list dt {
  font-weight: 500;
}

/* ---------- 견적 절차 ---------- */

.steps {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px var(--sp-section);
}

.step {
  display: flex;
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--c-ink);
}

.step:last-child {
  border-bottom: 1px solid var(--c-ink);
}

.step__no {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 0.017em;
}

.step h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.021em;
  margin-bottom: 8px;
}

.step p {
  font-size: 16px;
}

/* ---------- 대형 전화 링크 ---------- */

.tel-wrap {
  text-align: center;
  padding: 24px;
}

.tel-big {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: 0.022em;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
}

.tel-note {
  margin-top: var(--sp-block);
  font-size: 15px;
  letter-spacing: 0.021em;
}

/* ---------- 섹션 래퍼 ---------- */

.section {
  padding-top: var(--sp-section);
}

.section--pad {
  padding-bottom: var(--sp-section);
}

.section > .anchor-label {
  margin-bottom: 60px;
}

/* ---------- 푸터 (와인색 — 사이트 유일의 유채색) ---------- */

.footer {
  margin-top: var(--sp-section);
  background: var(--c-wine);
  color: var(--c-white);
  text-align: center;
  padding: 120px 24px;
}

.footer__signoff {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 0.017em;
  margin: var(--sp-block) 0 48px;
}

.footer__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  letter-spacing: 0.021em;
}

.footer__info a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- 모바일 (768px 이하) ---------- */

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    gap: 14px;
    padding: 20px 16px;
  }

  .nav__links {
    gap: 18px;
  }

  .hero__title {
    font-size: 40px;
  }

  .statement {
    padding: 100px 20px;
  }

  .statement__title {
    font-size: 32px;
    letter-spacing: 0.017em;
  }

  .statement__title--sm {
    font-size: 26px;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .split--rev .split__text {
    order: 1;
  }

  .split--rev .split__media {
    order: 2;
  }

  .split__text {
    padding: 60px 24px 40px;
  }

  .ph--tall {
    height: auto;
  }

  .split__media img {
    height: auto;
  }

  .split--pair .split__media {
    aspect-ratio: auto;
  }

  /* 사진 슬라이드는 겹침 구조라 칸 높이를 비율로 고정 */
  .media-rotate {
    aspect-ratio: 4 / 3;
  }

  .media-rotate img {
    height: 100%;
    object-fit: cover;
  }

  .page-head {
    padding-top: 60px;
  }

  .page-head h1 {
    font-size: 32px;
    letter-spacing: 0.017em;
  }

  .tel-big {
    font-size: 32px;
  }

  .footer {
    padding: 80px 20px;
  }

  .step {
    gap: 24px;
  }

  .section {
    padding-top: 80px;
  }

  .footer {
    margin-top: 80px;
  }

  /* 작업일지: 좁은 화면에서는 사진을 폭 가득 채우고 제목을 아래로 */
  .log-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 24px 0;
  }

  .log-row__thumb {
    width: 100%;
  }
}