/* IDATSUKA — 共通のヘッダー・フッター・メニュー（刷新①）。css/tokens.css の変数だけを使う。
   箱・角丸・影は使わず、細い罫線と余白だけで区切る。 */

/* ── ヘッダー ── */
nav.sh {
  position: fixed; top: 0; left: 0; right: 0; z-index: 320;
  height: var(--head-h); padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3);
  background: rgba(var(--c-bg-rgb), .92); border-bottom: 1px solid var(--c-line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--c-fg);
  transition: transform var(--d-2) var(--ease-calm), background var(--d-2) var(--ease-calm), color var(--d-2) var(--ease-calm), border-color var(--d-2) var(--ease-calm);
}
nav.sh.nav-hidden { transform: translateY(-100%); }
.sh-logo {
  justify-self: start; font-family: var(--f-serif); font-weight: 400; font-size: 24px;
  letter-spacing: var(--ls-en-wide); color: inherit; text-decoration: none; line-height: 1;
  padding-right: .1em;
}
.sh-menu { display: flex; gap: clamp(14px, 1.8vw, 30px); list-style: none; margin: 0; padding: 0; }
.sh-menu a {
  font-family: var(--f-mincho); font-size: 13px; letter-spacing: .22em; color: inherit; opacity: .78;
  text-decoration: none; padding: 6px 0; position: relative; transition: opacity var(--d-1) var(--ease-calm);
}
.sh-menu a::after {
  content: ''; position: absolute; left: 0; right: .22em; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--d-2) var(--ease-calm);
}
.sh-menu a:hover, .sh-menu a.active { opacity: 1; }
.sh-menu a:hover::after, .sh-menu a.active::after { transform: scaleX(1); }
.sh-right { justify-self: end; display: flex; align-items: center; gap: var(--s-3); }

/* 昼／夜／自動：細い枠の中に3つ、選んでいるものは塗りつぶし */
.sh-theme { display: inline-flex; border: 1px solid currentColor; }
.sh-theme button {
  appearance: none; background: none; border: 0; margin: 0; cursor: pointer; color: inherit;
  font-family: var(--f-mincho); font-size: 11px; letter-spacing: .14em; padding: 5px 9px 5px 10px; line-height: 1.2;
  transition: background var(--d-1) var(--ease-calm), color var(--d-1) var(--ease-calm);
}
.sh-theme button + button { border-left: 1px solid currentColor; }
.sh-theme button[aria-pressed="true"] { background: currentColor; }
.sh-theme button[aria-pressed="true"] span { color: var(--c-bg); }
nav.sh.on-photo .sh-theme button[aria-pressed="true"] span { color: #141312; }
.sh-theme button:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

nav.sh .menu-toggle { display: none; position: relative; width: 26px; height: 16px; background: none; border: 0; cursor: pointer; z-index: 330; }
nav.sh .menu-toggle span { background: currentColor; }

/* 写真の上（トップの最初の一画面）：白で重ね、背景も罫線も消す */
nav.sh.on-photo { background: transparent; border-bottom-color: transparent; color: #fff; }

/* ── スマホ：メニューはハンバーガーに収める ── */
@media (max-width: 960px) {
  nav.sh { grid-template-columns: 1fr auto; }
  .sh-menu { display: none; }
  nav.sh .menu-toggle { display: block; }
}
@media (max-width: 520px) {
  .sh-logo { font-size: 20px; letter-spacing: .36em; }
  .sh-right .sh-theme { display: none; }   /* スマホではメニューの中に置く */
}
.mobile-menu { background: var(--c-bg); backdrop-filter: none; -webkit-backdrop-filter: none; gap: 1.25rem; padding-top: var(--head-h); overflow-y: auto; transition: opacity var(--d-2) var(--ease-calm); }
.mobile-menu a { font-family: var(--f-mincho); font-size: 1.05rem; letter-spacing: .22em; color: var(--c-sub); }
.mobile-menu a:hover, .mobile-menu a.active { color: var(--c-fg); transform: none; }
.mobile-menu .sh-theme { color: var(--c-fg); margin-top: var(--s-3); }
body.menu-open nav.sh { color: var(--c-fg); }
@media (min-width: 521px) { .mobile-menu .sh-theme { display: none; } }

/* ── フッター：左にロゴ、右に ©。細い罫線で区切る ── */
footer.sf {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: var(--s-5) var(--gutter); border-top: 1px solid var(--c-line); background: none;
  color: var(--c-fg);
}
.sf-logo { font-family: var(--f-serif); font-size: 20px; letter-spacing: var(--ls-en-wide); color: inherit; text-decoration: none; }
@media (max-width: 600px) { footer.sf { flex-direction: column; gap: 24px; text-align: center; } }
footer.sf p { margin: 0; font-family: var(--f-serif); font-size: 13px; letter-spacing: var(--ls-en); color: var(--c-sub); }

@media (prefers-reduced-motion: reduce) {
  nav.sh, .sh-menu a, .sh-menu a::after, .sh-theme button, .mobile-menu { transition: none; }
}