/* ===== 기본 전체 설정 ===== */
html,
body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "Pretendard", -apple-system, system-ui, Segoe UI, Roboto,
    Helvetica, Arial, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* 링크 공통 */
a {
  color: #000;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.25s ease;
}
a:hover {
  color: #fff;
  background: #000;
}

/* ============================= */
/*  인덱스: 제목 + 카드 리스트   */
/* ============================= */

/* ===== 제목: 중앙 → 스크롤 후 상단 고정 ===== */
.hero-title {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
  font-weight: 900;

  font-size: clamp(40px, 8vw, 110px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  word-break: keep-all;

  width: 100%;
  max-width: 26ch;
  padding: 0 16px;

  z-index: 1;
  pointer-events: none;

  transition:
    top 0.35s ease,
    transform 0.35s ease;
}

/* 스크롤 후 상단 고정 상태 */
.hero-title.pinned {
  top: 32px;
  transform: translate(-50%, 0);
}

/* 좁은 화면에서 글자 줄 수 제어 */
@media (max-width: 768px) {
  .hero-title {
    max-width: 22ch;
  }
}
@media (max-width: 480px) {
  .hero-title {
    max-width: 18ch;
  }
}

/* ===== powered: 화면 하단 고정 ===== */
.powered {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: 400;
  color: #999;
  z-index: 6;
}
.powered a {
  color: #999;
}
.powered a:hover {
  color: #fff;
  background: #000;
}

/* ===== 본문은 제목 아래에서 시작 ===== */
main {
  margin-top: 100vh;
}

/* ===== 섹션 공통 ===== */
section {
  min-height: 100vh;
  padding: 40px 16px;
  box-sizing: border-box;

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

/* ===== bio 섹션: 카드 그리드 ===== */
.bio {
  text-align: left;
}

/* 카드 리스트 */
.card-grid {
  width: 100%;
  max-width: 640px;
  padding: 0 16px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* 개별 카드 */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #000;
  padding: 0;
  overflow: hidden;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  z-index: 2;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* 호버 효과 */
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.14);
}

/* ===== 이미지 영역 (원본 비율 유지) ===== */
.project-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;   /* 필요하면 contain으로 변경 가능 */
}

/* ===== 카드 텍스트 ===== */
.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px 16px;
  border-top: 1px solid #000;

  font-size: 13px;
  letter-spacing: 0.08em;

  text-transform: none;   /* 대문자 강제 없음 */
}

.project-title {
  font-weight: 600;
}
.project-link {
  font-weight: 500;
}

/* ===== 모바일 최적화 (인덱스) ===== */
@media (max-width: 600px) {
  section {
    padding: 32px 12px;
  }
  .card-grid {
    padding: 0 12px;
    gap: 32px;
  }
  .project-meta {
    padding: 10px 12px;
    font-size: 12px;
  }
}

/* 카드 모서리 완전 직각 */
.project-card,
.project-image,
.project-image img,
.project-meta {
  border-radius: 0 !important;
}

/* ===================================== */
/*  프로젝트 상세 페이지 전용 레이아웃   */
/*  (body class="project-page")          */
/* ===================================== */

body.project-page {
  background: #fff;
}

/* 인덱스용 section flex / min-height를 프로젝트에선 풀어주기 */
body.project-page section {
  min-height: auto;
  padding: 24px 16px;
  box-sizing: border-box;
  display: block;
}

/* 전체 레이아웃: 최대 960px, 가운데 정렬 */
body.project-page .project-layout {
  max-width: 960px;
  margin: 0 auto 80px;
}

/* ===== 미디어 영역 (이미지 & 유튜브 공통) ===== */
body.project-page .project-media {
  margin-top: 40px;
}

body.project-page .project-media-inner {
  width: 100%;
  border: 1px solid #000;              /* 카드와 동일한 외곽선 */
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  overflow: hidden;
}

/* 이미지 */
body.project-page .project-media-inner img {
  width: 100%;
  height: auto;
  display: block;
}

/* 유튜브 비디오 래퍼 (16:9 비율, 반응형) */
body.project-page .project-video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;                 /* 16:9 */
}

body.project-page .project-video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== 텍스트 영역: 전부 h1 느낌, 가운데 정렬 ===== */
body.project-page .project-details {
  margin-top: 40px;
}

body.project-page .project-text-block {
  text-align: center;
}

/* 안의 모든 텍스트 요소를 크게 */
body.project-page .project-text-block p,
body.project-page .project-text-block a {
  display: block;
  font-size: clamp(18px, 2.4vw, 28px);   /* h1-ish 사이즈 */
  font-weight: 700;
  margin: 8px 0;
  text-decoration: none;
}

body.project-page .project-text-block a {
  color: #000;
}

body.project-page .project-text-block a:hover {
  color: #fff;
  background: #000;
}

/* 모바일 여백 조정 */
@media (max-width: 600px) {
  body.project-page .project-layout {
    padding: 0 12px 40px;
  }
  body.project-page .project-media {
    margin-top: 28px;
  }
}