:root {
  --content-width: 1600px;
  --side-padding: 0px;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  color: #111;
    background: rgb(255, 255, 255);
}

/* 상단 네비 */
.header {
  padding-top: 50px;   /* 🔥 이 줄이 핵심 */
  padding-bottom: 32px;
}



.nav {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0;               /* 🔥 좌우 0 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}



.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.name {
  font-size: 18px;
  color: #111;
  text-decoration: none;
}

.name:hover {
  opacity: 0.6;
}



.menu {
  list-style: none;      /* bullet 제거 */
  display: flex;         /* 가로 정렬 */
  gap: 32px;             /* 텍스트 간 간격 */
  padding: 0;
  margin: 0;
}

.menu li {
  list-style: none;
}

.menu a {
  text-decoration: none;
  color: #111;
  font-size: 16px;
  transition: opacity 0.2s ease;
}

.menu a:hover {
  opacity: 0.4;
}



/* 메인 중앙 */
.main {
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main h1 {
  font-size: 96px;
  font-weight: 600;
  margin-bottom: 20px;  /* 🔥 48 → 24 */
}

.subtitle {
  margin-top: 16px;
  font-size: 22px;
  color: #666;
}

/* Grid */
.projects {
  max-width: var(--content-width);
  margin: 120px auto;
  padding: 0 var(--side-padding);

  column-count: 2;        /* 🔥 2 columns */
  column-gap: 20px;       /* 좌우 간격 */
}

/* Card */
.project-card {
  break-inside: avoid;
  margin-bottom: 20px;    /* 🔥 위 이미지와 항상 같은 간격 */
}


/* Image wrapper */
.project-image {
  position: relative;
  width: 100%;
}

/* 🔥 핵심: 이미지가 height를 결정 */
.project-image img {
  width: 100%;        /* width 통일 */
  height: auto;       /* 비율 유지 */
  display: block;
}

/* Title overlay */
.project-title {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  color: #fff;
  background: rgba(0,0,0,0.25);

  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Hover */
.project-card:hover img {
  filter: blur(px);
}

.project-card:hover .project-title {
  opacity: 1;
}

/* ===== Contact Container ===== */

/* ===== Contact Container ===== */

.contact {
  display: flex;
  justify-content: center;
  margin: 80px 0;
}

.contact-box {
  width: 100%;
  max-width: 720px;
  padding: 40px 48px;
  border: 1px solid #e5e5e5;
}

.contact-box h1 {
  font-size: 40px;
  margin-bottom: 24px; /* 🔥 위아래 길이 줄임 */
}

/* ===== Contact Form ===== */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px; /* 🔥 전체 세로 길이 타이트 */
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;  /* 🔥 label ↔ input 간격 */
}

.form-field label {
  font-size: 14px;
  color: #666;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"] {
  font-family: inherit;
  font-size: 16px;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
}

.form-field input[type="file"] {
  font-size: 14px;
}

/* file upload만 간격 넓힘 */
.file-field {
  gap: 16px;
}

/* ===== Submit Button ===== */

.contact-form button {
  align-self: flex-start;
  margin-top: 8px;

  padding: 3px 22px;
  font-size: 14px;
  font-family: inherit;

  background: none;
  border: 1px solid #111;
  border-radius: 999px;

  cursor: pointer;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.contact-form button:hover {
  filter: blur(1px);
  opacity: 0.8;
}

/* ===== Index Page Fix ===== */

/* index 메인에서는 중앙정렬/고정높이 해제 */
.main-index {
  height: auto;
  display: block;
}

/* projects가 header 밑에서 자연스럽게 시작 */
.main-index .projects {
  margin-top: 0;        /* 기존 120px 제거 */
}

/* header 아래 충분한 breathing space */
.header {
  position: relative;
  z-index: 10;
}

.project-card,
.project-image {
  overflow: visible;
}


/* ===== Project Detail ===== */

.project-detail {
  margin-top: 80px;
}

.project-hero {
  max-width: 720px;
  margin: 0 auto 120px auto;
  text-align: left;
}

.project-hero h1 {
  font-size: 20px;
  margin-bottom: 24px;
}

.project-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 48px;
}

.project-hero-image {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== About Page ===== */

.about {
  display: flex;
  justify-content: center;
  margin: 80px 0 160px;
}

.about-container {
  width: 100%;
  max-width: 720px;
  padding: 0 48px;
}

.about-container h1 {
  font-size: 40px;
  margin-bottom: 40px;
}

.about-content {
  font-size: 16px;
  line-height: 1.7;
  color: #111;
}

.about-content p {
  margin-bottom: 24px;
}

.about-meta {
  margin-top: 48px;
  font-size: 14px;
  color: #666;
}

.about-meta p {
  margin-bottom: 8px;
}

/* ===== About Image ===== */

.about-image {
  width: 100%;
  margin-bottom: 40px;}

.about-image img {
  width: 100%;
  height: auto;
  display: block;
}


/* ===== Single column project page ===== */
.single-column {
  column-count: 1;
}


.about-image {
  width: 100%;
    align-self: center; /* 🔥 이미지만 세로 중앙 */
  height: auto;
  display: block;
  margin-top: -80px;   /* 🔥 숫자 조절 */
}


body {
  cursor: url("../assets/cursor.png") 0 0, auto;
}


/* ===== Global Image Rounded ===== */

.project-image,
.row-image,
.about-image img,
.project-hero-image {
  border-radius: 12px;   /* 🔥 조절 포인트 */
  overflow: hidden;
}


/* ===============================
   PROJECTS PAGE ONLY
================================ */

/* main 중앙정렬 / 고정 높이 제거 */
.main-projects {
  display: block;
  height: auto;
  padding-top: -20%;
}

/* masonry 완전 차단 */
.main-projects .projects {
  column-count: 1;
  column-gap: 0;
  max-width: 1600px;
  margin: 1 auto px;
}

/* 한 프로젝트 = 한 row */
.project-row {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 96px;
  align-items: start;
  margin-bottom: 40px;
}

/* 이미지 */
.project-image {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 텍스트 영역 */
.project-info {
  display: flex;
  flex-direction: column;
}

/* 타이틀 */
.project-info h2 {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

/* 타입 */
.project-type {
  font-size: 13px;
  color: #888;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* View project — 이미지 오른쪽 기준 */
.project-link {
  align-self: flex-start; /* 왼쪽 정렬 */
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height:45px;      /* 🔥 핵심 포인트 */
  width: auto;
  display: block;
}

.logo:hover img {
  transform: scale(1.06);
  opacity: 0.85;
}