/* ysun-www — 홈페이지 전용 스타일
   공통 토큰/컴포넌트는 design-system.css 에 있습니다. 여기에는 이 사이트에만
   필요한 소소한 조정만 둡니다. */

.link-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

/* ===========================================================================
   대문(Landing) — Pūkeko 사진을 화면 전체 배경으로.
   .home 스코프 안에서만 적용됩니다.
   =========================================================================== */

/* 사진 위에 얹는 텍스트 색 (라이트/다크 무관하게 항상 밝게) */
.home {
  --on-photo:        #f5f7fb;
  --on-photo-muted:  rgba(245, 247, 251, 0.78);
  --on-photo-line:   rgba(245, 247, 251, 0.22);

  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  color: var(--on-photo);
  background: #16211f; /* 이미지 로드 전 딥 톤 (Pūkeko 그늘색) */
  overflow-x: hidden;
}

/* --- 배경 사진: 스크롤과 무관하게 고정된 레이어들 ---
   ::before = 이미지 로드 전 딥톤 폴백           z:-3
   .bg-stage = JS 크로스페이드 슬라이드쇼         z:-2
   ::after  = 가독성 스크림                      z:-1                       */
.home::before,
.home::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.home::before {
  z-index: -3;
  /* 사진은 backgrounds.js 가 그린다. 여기서는 이미지 로드 전 딥톤만 보여,
     무작위로 고른 시작 사진이 잘못 번쩍이지 않도록 폴백 사진을 두지 않는다. */
  background-color: #16211f;
}

.home::after { z-index: -1; }

/* --- JS 슬라이드쇼 레이어 (사진 2장 이상일 때 backgrounds.js 가 생성) --- */
.bg-stage { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.bg-layer.is-visible { opacity: 1; }

/* 가로 원본을 세로 화면에서: 좌→우 한 번 패닝 (backgrounds.js 가 .bg-pan 부여).
   background-size: cover 가 세로 화면에서 이미지 높이를 꽉 채우고 폭이 넘치므로,
   background-position-x 를 0→100 으로 움직여 가로 구도를 왼쪽부터 오른쪽까지 훑는다.
   1회만 실행하고(iteration-count:1) 우측 끝에 머문다(both).
   주기(--bg-interval, 기본 12s): 처음 1초 좌측 정지 → 우측으로 → 끝 1초 우측 정지. */
.bg-layer.bg-pan {
  background-position-y: 50%;
  animation: bg-pan-x var(--bg-interval, 12000ms) ease-in-out 1 both;
}
@keyframes bg-pan-x {
  0%,   8.333%  { background-position-x: 0%; }
  91.667%, 100% { background-position-x: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-layer { transition: none; }
  .bg-layer.bg-pan { animation: none; background-position-x: 50%; }
}

/* --- 가독성 스크림: 위/아래는 진하게(헤더·푸터), 가운데는 은은하게 --- */
.home::after {
  background:
    linear-gradient(
      to bottom,
      rgba(12, 18, 20, 0.62) 0%,
      rgba(12, 18, 20, 0.22) 22%,
      rgba(12, 18, 20, 0.30) 55%,
      rgba(12, 18, 20, 0.70) 100%
    );
}

/* --- 헤더 / 푸터를 사진 위에 맞게 --- */
.home .site-header {
  border-bottom-color: var(--on-photo-line);
}
.home .site-footer {
  border-top-color: var(--on-photo-line);
  color: var(--on-photo-muted);
  margin-top: 0;
}
.home .brand { color: var(--on-photo); }
.home .brand__mark {
  border-radius: 7px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.home .nav a { color: var(--on-photo-muted); }
.home .nav a:hover,
.home .nav a[aria-current="page"] { color: var(--on-photo); }
.home .site-footer a { color: var(--on-photo); text-decoration: underline; text-underline-offset: 2px; }

/* 사진 위 헤더/푸터 텍스트는 은은한 그림자로 또렷하게 */
.home .site-header,
.home .site-footer {
  text-shadow: 0 1px 12px rgba(8, 12, 14, 0.45);
}

/* 빈 main 이 헤더와 푸터 사이를 채워 푸터를 바닥에 고정 */
.home__main { flex: 1 1 auto; }

/* --- 사진 캡션: 우측 하단, 8pt 흰 글씨 한 줄 (제목 - 날짜) --- */
.home .bg-caption {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-3);
  z-index: 1;
  margin: 0;
  max-width: 70vw;
  font-size: 8pt;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: right;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.home .bg-caption:empty { display: none; }