/* =====================================================================
   lisas atelier ― フッター（footer/style.css）
   ナビ担当。地は --color-bg-sub、ロゴは .logo .logo--lg（design.md 18.・23.）、文字は --fs-sm。
   - 形は base.css のクラスを使う（.wrap・.logo・.logo--lg・.logo-flower・.logo-accent・.btn・.btn--dm・.link・.fine・.sr-only）。
   - 日本語の名前（.logo-ja）は、お店の名前の正式な表記と読み方が決まるまで置かない（Q7）。
   - ここに書くのは base.css にない形だけ。クラスの頭は footer-。値は tokens.css の変数だけ。
   ===================================================================== */

.footer {
  /* body の下の余白（base.css の --page-bottom：画面下のボタンの場所）まで、フッターの地の色を伸ばす。
     フッターは <body> の最後に置く（README.md） */
  margin-bottom: calc(var(--page-bottom) * -1);
  padding: var(--space-7) 0 calc(var(--page-bottom) + var(--space-6));
  background: var(--color-bg-sub);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-align: center;
}
.footer-inner {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
}

/* ロゴと、場所の一行 */
.footer-brand {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}
/* ロゴのリンク：字の高さ（約 29px）だけでは押しにくいので、押せる高さを 44px 以上にする（design.md 18.）。
   中は <span>（花・LISA’S・ATELIER）と、読み上げだけの「（トップへ戻る）」 */
.footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
}
.footer-place { color: var(--color-text-sub); }
/* iPhone は2行（離島より／肩書き）。PC は「｜」でつないで1行 */
.footer-place > span { display: block; }
.footer-place > .footer-sep { display: none; }

/* ページの中のリンク：文字だけ・折り返して中央にそろえる。押せる大きさは 44px 以上 */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-4);
}
.footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding-inline: var(--space-1);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) {
  .footer-link:hover { color: var(--color-accent-text); }
}

/* Instagram の DM へ直接（.btn .btn--dm）と Instagram（.link） */
.footer-sns {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}
.footer-dm {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
}
.footer-sns .link svg {
  flex: none;
  width: var(--icon);
  height: var(--icon);
}

/* © と、試作の一言 */
.footer-end {
  display: grid;
  gap: var(--space-1);
}

/* ---------- PC・タブレット（768px〜） ---------- */
@media (min-width: 768px) {
  .footer-place > span,
  .footer-place > .footer-sep { display: inline; }
}