/* --------------------------------------
  footer.css
  依存: common.css（カラー・フォント・余白トークン参照）
-------------------------------------- */

/* ベーススタイル（モバイルファースト）
-------------------------------------- */
.site-footer {
  background-color: var(--color--brand);
  /* IMAGE より：ダークブラウン系の深い背景色を採用。
    --color--text--1（#831843）をベースに彩度を落とした深色とし、
    フッターの「静謐な締めくくり」のトーンを体現する。        */
  padding-block-start: var(--space--16);
  padding-block-end: var(--space--12);
}

.site-footer__inner {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--padding--mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* フッターロゴ
-------------------------------------- */
.site-footer__logo {
  font-family: var(--font--display);
  font-weight: 400;
  font-size: 24px;
  color: var(--color--bg--1);
  letter-spacing: 0.12em;
  margin-block-end: var(--space--8);
  transition: opacity var(--duration) ease;
}

.site-footer__logo:hover {
  opacity: 0.75;
}

/* フッターナビゲーション
-------------------------------------- */
.site-footer__nav {
  margin-block-end: var(--space--6);
}

.site-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space--6) var(--space--8);
}

.site-footer__nav-link {
  font-family: var(--font--body);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color--text--2);
  transition: color var(--duration) ease;
}

.site-footer__nav-link:hover {
  color: var(--color--secondary);
}

.site-footer__nav-link:focus-visible {
  outline: 2px solid var(--color--focus);
  outline-offset: 3px;
  border-radius: var(--radius--sm);
}

/* コピーライト
-------------------------------------- */
.site-footer__copyright {
  font-family: var(--font--body);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color--text--2);
  opacity: 0.6;
  display: block;
}

/* デスクトップ（768px以上）
-------------------------------------- */
@media (width >= 768px) {

  .site-footer__inner {
    padding-inline: var(--padding--desktop);
  }

  .site-footer__nav-list {
    flex-wrap: nowrap;
    gap: var(--space--8);
  }
}