/* =============================================================================
   home.css — 메인 페이지 전용 스타일
   역할: 히어로·4대 사업·통계·종목 교차·프리뷰 그리드 레이아웃.
   의존: tokens.css / base.css / components.css 이후 로드.
   주의: 두 페이지 이상에서 쓰게 되는 패턴이 생기면 components.css로 승격할 것.
   ========================================================================== */

/* ===== 히어로 ===== */
.hero {
  position: relative;
  min-height: 92vh; /* 100vh보다 살짝 낮게 — 아래 섹션이 살짝 보여 스크롤을 유도 */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink); /* 이미지 로드 전 배경 — 흰 화면 깜빡임 방지 */
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease; /* 슬라이드 크로스페이드 */
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
/* 슬로우 켄번즈 — 7초: 전환 주기 5초보다 길어야 줌이 끊기는 순간이 안 보인다 */
.hero-slide.is-active img { animation: kenburns 7s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
/* 사진 오버레이 2겹 — 좌측 다크(텍스트 가독의 핵심) + 하단 워시(톤 통일).
   좌측 82%→10%: 헤드라인·리드가 항상 어두운 면 위에 놓이게 한다 */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 43, 49, 0.82) 0%, rgba(24, 43, 49, 0.5) 45%, rgba(24, 43, 49, 0.08) 78%),
    var(--duotone);
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: var(--sp-15);
  color: var(--paper);
}
.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-1);
  color: rgba(255, 255, 255, 0.92); /* 사진 위에서는 흰색 — 레드는 앞의 바가 담당 */
  margin-bottom: var(--sp-2);
}
/* 오버라인 앞 코럴 바 — 컬러 포인트를 텍스트가 아닌 도형에 준다 (가독 유지) */
.hero-overline::before { content: ''; width: 32px; height: 3px; background: linear-gradient(90deg, #FF9C7E, var(--gold)); }
.hero h1 {
  font-size: var(--fs-7);
  font-weight: 900;
  max-width: 15em;
}
/* 단어 스태거 — home.js가 단어를 span으로 감싸고 --i(순번)를 심는다 */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  animation: wordUp 0.7s var(--ease-reveal) forwards;
  animation-delay: calc(var(--i) * 80ms); /* 80ms 간격 스태거 */
}
@keyframes wordUp { to { opacity: 1; transform: none; } }
.hero-lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-3);
  color: rgba(255, 255, 255, 0.94); /* 사진 위 가독 우선 — 옅은 회색 금지 */
  max-width: 32em;
  text-shadow: 0 1px 12px rgba(24, 43, 49, 0.4); /* 밝은 사진 대비 보험 */
}
.hero-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); flex-wrap: wrap; }

/* 슬라이드 인디케이터 — Space Grotesk 숫자, 미니멀 카운터 */
.hero-indicator {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 1;
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: var(--fs-1);
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.85);
  padding-top: var(--sp-1);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

/* 스크롤 유도 큐 — 2.2초 주기 바운스 (reduced-motion 시 base.css가 전체 차단) */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sp-3);
  transform: translateX(-50%);
  z-index: 1;
  width: var(--touch-target);
  height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  animation: scrollBounce 2.2s ease-in-out infinite;
}
.hero-scroll:hover { color: var(--paper); }
@keyframes scrollBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ===== 협회소개(4대 사업): 좌측 소개 + 우측 2×2 ===== */
.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr; /* 비대칭 — 균등 분할보다 긴장감 있는 비율 */
  gap: var(--sp-8);
  align-items: start;
}
.about-intro h2 { font-size: var(--fs-6); }
.about-intro p { color: var(--ink-soft); margin-bottom: var(--sp-3); }
.about-intro .hairline { margin-inline: 0; max-width: 200px; }

.pillar-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-4);
  padding-top: var(--sp-2);
}
.pillar-list svg { stroke: var(--wine); margin-bottom: var(--sp-2); }
.pillar-list h4 { font-size: var(--fs-3); margin-bottom: var(--sp-1); }
.pillar-list p { font-size: var(--fs-2); color: var(--ink-soft); }

/* ===== 통계 카운터 — 딥 틸 그라데이션 밴드 (슬로우 팬 모션) ===== */
.stats {
  background: linear-gradient(120deg, #12262B 0%, #0F6E68 50%, #12262B 100%);
  background-size: 220% 100%; /* 팬 여지 확보 — 14초 왕복으로 미세하게 흐른다 */
  animation: statsPan 14s ease-in-out infinite alternate;
  color: var(--paper);
  padding-block: var(--sp-8);
}
@keyframes statsPan {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  text-align: center;
}
.stats-grid strong {
  display: block;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--fs-6);
  color: #FF9C7E; /* 틸 위 라이트 코럴 — 다크 배경 전용 밝은 톤 (본문 --gold보다 한 단계 밝게) */
  font-variant-numeric: tabular-nums; /* 카운트업 중 자릿수 흔들림 방지 */
}
.stats-grid span { color: rgba(255, 255, 255, 0.88); font-size: var(--fs-1); } /* 가독 우선 */

/* ===== 빠른 서비스 ===== */
.services { padding-block: var(--sp-12); } /* 통계 밴드 직후라 표준 섹션보다 한 단계 낮게 */
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.service-card {
  display: block;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--line);
  border-top: 2px solid var(--wine); /* 상단 틸 라인 포인트 */
  border-radius: var(--radius);
  background: var(--paper);
  transition: box-shadow var(--dur-ui) ease, border-color var(--dur-ui) ease, transform var(--dur-ui) ease;
}
.service-card:hover { box-shadow: var(--shadow-card); border-color: var(--line-strong); transform: translateY(-4px); }
.service-card svg { stroke: var(--wine); margin-bottom: var(--sp-2); transition: transform var(--dur-ui) ease; }
.service-card:hover svg { transform: scale(1.12); }
.service-card h3 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-3); margin-bottom: var(--sp-1); }
.service-card:hover h3 { color: var(--wine); }
.service-card p { color: var(--ink-soft); font-size: var(--fs-1); }

/* ===== 종목 좌우 교차 ===== */
.discipline-row {
  display: grid;
  grid-template-columns: 7fr 5fr; /* 사진 우세 비대칭 */
  gap: var(--sp-8);
  align-items: center;
  margin-bottom: var(--sp-12);
}
.discipline-row:last-child { margin-bottom: 0; }
.discipline-row--flip figure { order: 2; } /* 좌우 교차 — 마크업 순서는 유지(접근성) */
.discipline-row figure { aspect-ratio: 3 / 2; position: relative; }
.discipline-row figure::after { content: ''; position: absolute; inset: 0; background: var(--duotone); opacity: 0.5; }
.discipline-mark { display: block; font-size: var(--fs-4); margin-bottom: var(--sp-1); }
.discipline-text h3 { font-size: var(--fs-5); margin-bottom: var(--sp-2); }
.discipline-text p { color: var(--ink-soft); margin-bottom: var(--sp-2); }

/* ===== 대회 일정 리스트 (행 기반 — 카드 나열 대신 프로그램북 표 감성) ===== */
.event-list { border-top: 1px solid var(--line-strong); }
.event-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-ui) ease;
}
.event-row:hover { background: rgba(15, 110, 104, 0.06); } /* 틸 6% — 스침 정도의 반응 */
.event-date { text-align: center; }
.event-date .day { font-family: var(--font-accent); font-weight: 700; font-size: var(--fs-5); display: block; line-height: 1.1; }
.event-date .month { font-size: var(--fs-1); color: var(--wine); font-weight: 700; letter-spacing: var(--label-spacing); }
.event-info h3 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-3); }
.event-info p { color: var(--ink-soft); font-size: var(--fs-1); margin-top: 4px; }
.more-row { text-align: center; margin-top: var(--sp-5); }

/* ===== 갤러리 모자이크 (비정형 그리드) ===== */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--sp-2);
}
.gallery-mosaic .img-frame { position: relative; cursor: zoom-in; }
.gallery-mosaic .img-frame img { transition: transform var(--dur-hover) ease; }
.gallery-mosaic .img-frame:hover img { transform: scale(1.03); }
/* 1·6번째 타일을 2×2로 키워 비정형 리듬 생성 (8장 기준 시각 균형점) */
.gallery-mosaic .img-frame:nth-child(1),
.gallery-mosaic .img-frame:nth-child(6) { grid-column: span 2; grid-row: span 2; }
.gallery-mosaic figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-2);
  font-size: var(--fs-1);
  color: var(--paper);
  background: var(--duotone);
  opacity: 0;
  transition: opacity var(--dur-ui) ease;
}
.gallery-mosaic .img-frame:hover figcaption { opacity: 1; }

/* ===== 영상 그리드 ===== */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.video-card { text-align: left; transition: transform var(--dur-ui) ease; }
.video-card:hover { transform: translateY(-4px); }
.video-card .img-frame { aspect-ratio: 16 / 9; position: relative; }
/* 재생 표시 — 와인 원 + 흰 삼각형, 호버 시 살짝 확대 */
.video-card .play-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(38, 32, 25, 0.25);
  transition: background var(--dur-ui) ease;
}
.video-card:hover .play-mark { background: rgba(38, 32, 25, 0.1); }
.video-card .play-mark span {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF9C7E, var(--gold)); /* 코럴 그라데이션 재생 버튼 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-ui) ease;
}
.video-card:hover .play-mark span { transform: scale(1.08); }
.video-card h3 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-2); margin-top: var(--sp-2); }
.video-card .meta { color: var(--ink-soft); font-size: var(--fs-1); }

/* ===== 공지 리스트 ===== */
.news-list { border-top: 1px solid var(--line-strong); }
.news-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  min-height: var(--touch-target);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.news-row .badge { justify-self: start; }
.news-row h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-2); }
.news-row:hover h3 { color: var(--wine); }
.news-row time { color: var(--ink-soft); font-size: var(--fs-1); }

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .discipline-row { gap: var(--sp-5); margin-bottom: var(--sp-8); }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .gallery-mosaic { grid-auto-rows: 160px; }
}
@media (max-width: 768px) {
  .hero { min-height: 80vh; }
  .hero h1 { font-size: var(--fs-6); }
  .hero-inner { padding-bottom: var(--sp-9); }
  .hero-indicator { display: none; } /* 좁은 화면에선 장식 제거 */
  .service-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-2); }
  .discipline-row { grid-template-columns: 1fr; }
  .discipline-row--flip figure { order: 0; } /* 모바일에선 항상 사진이 위 */
  .gallery-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  .video-grid { grid-template-columns: 1fr; }
  .pillar-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .service-grid { grid-template-columns: 1fr; }
  .event-row { grid-template-columns: 72px 1fr; }
  .event-row .badge { grid-column: 2; justify-self: start; }
  .news-row { grid-template-columns: 1fr auto; }
  .news-row .badge { order: -1; grid-column: 1 / -1; }
}