/* ============================================================
   Site Nav — SignCascade UD  (/_shared/site-nav.css)
   Canonical nav styles shared across all pages (except fee-map).
   ============================================================ */

/* ---- NAV BAR ---- */
.sc-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 clamp(16px, 4vw, 48px);
  background: var(--nav-bg, rgba(245, 241, 232, 0.88));
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--border-subtle, rgba(107, 94, 75, 0.10));
  transition: background 0.4s ease, transform 0.28s ease;
}
/* 下スクロールで自動格納（site-nav.jsが付与） */
.sc-nav.sc-nav-hidden { transform: translateY(-100%); }
.sc-nav-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}

/* Logo */
.sc-nav .sc-logo {
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  font-size: 1.15rem; font-weight: 800; color: var(--text-primary, #3D3428);
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; transition: color 0.3s;
}
.sc-nav .sc-logo-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent, #B8943E); color: var(--text-on-accent, #FFFFFF);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; letter-spacing: -0.5px;
  box-shadow: 0 2px 8px var(--accent-glow, rgba(184, 148, 62, 0.25));
}

/* Links */
.sc-nav-links {
  display: flex; align-items: center; gap: 28px;
}
.sc-nav-links a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.82rem; font-weight: 500; color: var(--text-secondary, #6B5E4B);
  text-decoration: none; transition: color 0.25s; position: relative;
  white-space: nowrap;
}
.sc-nav-links a:hover { color: var(--accent, #B8943E); }
.sc-nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--accent, #B8943E);
  border-radius: 1px; transition: width 0.25s ease;
}
.sc-nav-links a:hover::after { width: 100%; }
.sc-nav-links a.sc-hl {
  color: var(--accent, #B8943E); font-weight: 700; position: relative;
}
.sc-nav-links a.sc-hl::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 100%; height: 2px; background: var(--accent, #B8943E); opacity: 0.5;
}
.sc-nav-links a.sc-hl:hover { color: var(--accent, #B8943E); opacity: 0.8; }

/* Theme toggle */
.sc-nav .sc-theme-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 20px;
  border: 1px solid var(--border-medium, rgba(107, 94, 75, 0.18));
  background: var(--bg-card, #F7F3EA);
  cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.75rem; font-weight: 500; color: var(--text-secondary, #6B5E4B);
  transition: all 0.3s ease;
}
.sc-nav .sc-theme-toggle:hover {
  border-color: var(--accent, #B8943E); color: var(--accent, #B8943E);
}
.sc-nav .sc-theme-toggle::before { content: var(--mode-icon, "\1F319"); font-size: 0.9rem; }
.sc-nav .sc-theme-toggle::after  { content: var(--mode-label, "\30C0\30FC\30AF"); }

/* Hamburger */
.sc-mobile-btn {
  display: none; background: none; border: none;
  cursor: pointer; width: 32px; height: 32px; position: relative;
}
.sc-mobile-btn span,
.sc-mobile-btn span::before,
.sc-mobile-btn span::after {
  display: block; width: 20px; height: 2px;
  background: var(--text-secondary, #6B5E4B); border-radius: 1px;
  transition: all 0.3s ease; position: absolute; left: 6px;
}
.sc-mobile-btn span         { top: 15px; }
.sc-mobile-btn span::before { content: ''; top: -6px; }
.sc-mobile-btn span::after  { content: ''; top: 6px; }

.sc-mobile-only { display: none; }

/* Overlay */
.sc-mobile-overlay {
  display: none; position: fixed; top: 0; left: 0;
  width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 998;
}
.sc-mobile-overlay.active { display: block; }

/* ---- RESPONSIVE (mobile) ---- */
@media (max-width: 768px) {
  .sc-nav-links {
    position: fixed; top: 0; right: -280px; width: 280px; height: 100vh;
    background: var(--bg-primary, #FAF8F3);
    border-left: 1px solid var(--border-medium, rgba(107, 94, 75, 0.18));
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
    flex-direction: column; padding: 72px 24px 32px; gap: 0;
    transition: right 0.3s ease; z-index: 999; align-items: stretch;
  }
  .sc-nav-links.open { right: 0; }
  .sc-nav-links a {
    display: block; padding: 14px 8px; font-size: 0.95rem; font-weight: 500;
    color: var(--text-primary, #3D3428);
    border-bottom: 1px solid var(--border-subtle, rgba(107, 94, 75, 0.10));
    text-align: left;
  }
  .sc-nav-links a:hover { color: var(--accent, #B8943E); }
  .sc-nav-links a::after { display: none; }
  .sc-nav-links .sc-theme-toggle { margin-top: 20px; align-self: flex-start; }
  .sc-mobile-btn { display: block; z-index: 1001; }
  .sc-mobile-only { display: block; }
  #scMobileToggle { display: flex !important; }
  .sc-mobile-btn.active span { background: transparent; }
  .sc-mobile-btn.active span::before { top: 0; transform: rotate(45deg); }
  .sc-mobile-btn.active span::after  { top: 0; transform: rotate(-45deg); }
}

/* ---- COMPACT VARIANT (full-screen apps) ---- */
.sc-nav--compact {
  position: relative;
  padding: 0;
  background: var(--bg-elevated, #fff);
  backdrop-filter: none;
  border-bottom: 1px solid var(--border-subtle, rgba(107,94,75,.10));
}
.sc-nav--compact .sc-nav-inner {
  height: 36px;
  padding: 0 14px;
}
.sc-nav--compact .sc-logo {
  font-size: 13px;
  gap: 6px;
}
.sc-nav--compact .sc-logo-mark {
  width: 22px; height: 22px; border-radius: 6px;
  font-size: 9px;
}
.sc-nav--compact .sc-nav-links,
.sc-nav--compact .sc-nav-right {
  display: none;
}
.sc-nav--compact .sc-compact-back {
  display: inline-block;
  margin-left: auto;
  color: var(--accent, #005AFF);
  text-decoration: none; font-weight: 500; font-size: 12px;
}

/* ============================================================
   DARK-THEME FALLBACKS
   ページ側が --nav-bg / --mode-icon などのナビ用変数を定義して
   いない場合（おえかきスタジオ・コマわりメーカー等のアプリページ）、
   ダークモードでナビだけ明るいクリーム色のまま残ってしまう問題の対策。
   var() のフォールバック値だけを差し替えるので、変数を定義している
   通常ページの見た目には一切影響しない。
   ============================================================ */
[data-theme="dark"] .sc-nav {
  background: var(--nav-bg, rgba(36, 33, 24, 0.92));
  border-bottom-color: var(--border-subtle, rgba(200, 185, 150, 0.08));
}
[data-theme="dark"] .sc-nav .sc-logo { color: var(--text-primary, #E8E2D6); }
[data-theme="dark"] .sc-nav .sc-logo-mark {
  background: var(--accent, #D4A84A);
  color: var(--text-on-accent, #1C1A16);
  box-shadow: 0 2px 8px var(--accent-glow, rgba(212, 168, 74, 0.20));
}
[data-theme="dark"] .sc-nav-links a { color: var(--text-secondary, #B8AE9C); }
[data-theme="dark"] .sc-nav-links a:hover,
[data-theme="dark"] .sc-nav-links a.sc-hl { color: var(--accent, #D4A84A); }
[data-theme="dark"] .sc-nav-links a::after,
[data-theme="dark"] .sc-nav-links a.sc-hl::after { background: var(--accent, #D4A84A); }
[data-theme="dark"] .sc-nav .sc-theme-toggle {
  border-color: var(--border-medium, rgba(200, 185, 150, 0.14));
  background: var(--bg-card, #2A2720);
  color: var(--text-secondary, #B8AE9C);
}
[data-theme="dark"] .sc-nav .sc-theme-toggle:hover {
  border-color: var(--accent, #D4A84A);
  color: var(--accent, #D4A84A);
}
[data-theme="dark"] .sc-nav .sc-theme-toggle::before { content: var(--mode-icon, "\2600\FE0F"); }
[data-theme="dark"] .sc-nav .sc-theme-toggle::after  { content: var(--mode-label, "\30E9\30A4\30C8"); }
[data-theme="dark"] .sc-mobile-btn span,
[data-theme="dark"] .sc-mobile-btn span::before,
[data-theme="dark"] .sc-mobile-btn span::after { background: var(--text-secondary, #B8AE9C); }
[data-theme="dark"] .sc-mobile-btn.active span { background: transparent; }
@media (max-width: 768px) {
  [data-theme="dark"] .sc-nav-links {
    background: var(--bg-primary, #1C1A16);
    border-left-color: var(--border-medium, rgba(200, 185, 150, 0.14));
  }
  [data-theme="dark"] .sc-nav-links a {
    color: var(--text-primary, #E8E2D6);
    border-bottom-color: var(--border-subtle, rgba(200, 185, 150, 0.08));
  }
  [data-theme="dark"] .sc-nav-links a:hover { color: var(--accent, #D4A84A); }
}
[data-theme="dark"] .sc-nav--compact {
  background: var(--bg-elevated, #322E26);
  border-bottom-color: var(--border-subtle, rgba(200, 185, 150, 0.08));
}

/* ══════════════════════════════════════════════════════════════
   プリント一覧のサムネイル（2026-07-28 追加）
   ★経緯: .dl-card / .dl-grid / .dl-btn は各ページのインラインCSSにあるのに
     **.dl-thumb だけ定義が漏れているページがあった**（なんばんめ・かたち・
     おかね・よみ 等、新しい配置スクリプトで作った単元）。
     サムネPNGは 580×820px なので、指定が無いと原寸で表示されカードから
     はみ出す。全ページがこのCSSを読むので、ここに置けば一括で直る。
   ★あわせて、クリックで拡大プレビュー（site-nav.js のライトボックス）。
   ══════════════════════════════════════════════════════════════ */
.dl-thumb{
  display:block; width:100%; height:auto;
  border-radius:8px; margin-bottom:12px;
  border:1px solid var(--border-subtle, rgba(107,94,75,0.10));
  background:#fff;
  cursor:zoom-in;
  transition:opacity .25s ease, transform .25s ease;
}
.dl-thumb:hover{ opacity:.85; transform:translateY(-2px); }

/* 拡大プレビュー（ライトボックス） */
.sc-lb{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,17,12,.86);
  padding:clamp(12px,3vw,40px);
  opacity:0; transition:opacity .18s ease;
  cursor:zoom-out;
}
.sc-lb.is-open{ opacity:1; }
.sc-lb img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  border-radius:6px; background:#fff;
  box-shadow:0 12px 48px rgba(0,0,0,.5);
  cursor:default;
}
.sc-lb-cap{
  position:absolute; left:0; right:0; bottom:max(12px, env(safe-area-inset-bottom));
  text-align:center; color:#fff; font-size:.8rem; padding:0 16px;
  text-shadow:0 1px 4px rgba(0,0,0,.8); pointer-events:none;
}
.sc-lb-close{
  position:absolute; top:10px; right:14px;
  width:40px; height:40px; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:1.4rem; line-height:1; cursor:pointer;
}
.sc-lb-close:hover{ background:rgba(255,255,255,.26); }
body.sc-lb-open{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  .dl-thumb, .sc-lb{ transition:none; }
  .dl-thumb:hover{ transform:none; }
}

/* ── シートへの直リンク（#TK03-C）で該当カードまでスクロール ──────────
   ★各カードには sheet-id と同じ id が振ってある（2026-07-28 に全899枚へ付与）。
     PDFフッターのQR／URLに #<ID> を付ければ、紙から該当カードへ直行できる。
     ヘッダーに隠れないよう scroll-margin-top、着地したカードは一瞬光らせる。 */
.dl-card{ scroll-margin-top:88px; }
.dl-card:target{
  outline:3px solid var(--accent, #B8943E);
  outline-offset:2px;
  animation:sc-target-flash 1.8s ease-out 1;
}
@keyframes sc-target-flash{
  0%   { box-shadow:0 0 0 0 var(--accent-glow, rgba(184,148,62,.55)); }
  60%  { box-shadow:0 0 0 14px rgba(184,148,62,0); }
  100% { box-shadow:0 0 0 0 rgba(184,148,62,0); }
}
@media (prefers-reduced-motion:reduce){ .dl-card:target{ animation:none; } }