/* ============================================================
   HIARC — home.css
   ============================================================ */

/* ── 히어로 배너 ────────────────────────────────────────────── */
.home-hero {
  position: relative;
  display: flex;
  padding: 210px 64px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 저널 없을 때 기본 회색 배경 */
.home-hero--empty {
  background-color: #999;
}

/* 배경 위 반투명 오버레이 */
.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* 중앙 텍스트 컨테이너 */
.home-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* 부제 */
.home-hero__sub {
  font-family: var(--font-base);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.12px;
  color: var(--color-text);
}

/* 메인 타이틀 */
.home-hero__title {
  font-family: var(--font-base);
  font-size: 64px;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -1.28px;
  color: var(--color-text);
}

/* 더 보기 버튼 */
.home-hero__btn {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--color-text);
  color: var(--color-text-inverse);
  font-family: var(--font-base);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  letter-spacing: -0.09px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.home-hero__btn:hover {
  opacity: 0.85;
}

/* ── 큐레이션 섹션 ─────────────────────────────────────────── */
.home-section {
  padding: var(--spacing-60) 0;
}

/* 짝수 섹션(2, 4번째): 회색 배경 */
.home-section--gray {
  background-color: #F5F5F5;
}

.home-section__title {
  font-family: var(--font-base);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  line-height: 100%;
  letter-spacing: -0.64px;
  color: #000;
  text-align: center;
  margin-bottom: var(--spacing-32);
}

/* 3열 카드 그리드 */
.home-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-32);
}

/* ── 작품 카드 ──────────────────────────────────────────────── */
.home-card {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

.home-card__thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-size: 115%;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: var(--spacing-sm);
  transition: background-size 0.3s ease;
}

.home-card:hover .home-card__thumb {
  background-size: 120%;
}

.home-card__title {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.08px;
  color: var(--color-text);
  margin-bottom: 2px;
}

.home-card__student {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--color-gray-200);
}

/* ── 모든 아이디어 보기 버튼 ─────────────────────────────────── */
.home-cta {
  display: flex;
  justify-content: center;
  padding-top: var(--spacing-60);
  padding-bottom: var(--spacing-60);
}

.home-cta__btn {
  display: flex;
  height: 40px;
  padding: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #FFF;
  font-family: var(--font-base);
  font-size: 20px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.4px;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.15s;
}

.home-cta__btn:hover {
  opacity: 0.85;
}

/* ── 태블릿 ───────────────────────────────────────────────── */
@media (max-width: 800px) {
  .home-hero {
    padding: 120px 20px;
    gap: 32px;
  }

  .home-hero__title { font-size: var(--fs-36); }
  .home-hero__sub   { font-size: var(--fs-18); }

  .home-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-20);
  }
}

/* ── 모바일 ───────────────────────────────────────────────── */
@media (max-width: 375px) {
  .home-hero {
    padding: 80px 16px;
    gap: 24px;
  }

  .home-hero__title { font-size: var(--fs-32); letter-spacing: -0.5px; }
  .home-hero__sub   { font-size: var(--fs-16); }

  .home-section__grid {
    grid-template-columns: 1fr;
  }
}