/* ============================================ WORKS HEADER / FOOTER — works/ と en/works/ 専用（唯一のソース） ⚠このファイルだけを編集すること。各HTMLへのコピーは禁止。 マークアップは scripts/sync_header.py の works_header_markup() / works_footer_markup() が生成する。検証: python scripts/sync_header.py --check ■ 何と一致させるか（2026-08-27 本人指示） 「works へ移動すると別サイトへ飛ばされた感じになる」ため、works の帯は **オンライン版 locahun3d.com（src/components/site-header.tsx / site-footer.tsx）** と寸法・書体・配色で一致させる。 スキャンサイトの黒ヘッダー(assets/site-header.css)ではなく **オンライン版** が 基準。works の URL は web.locahun3d.com のまま据え置き（共有リンク保護）なので、 ドメインは違っても見た目と導線だけは locahun3d.com と地続きにする。 ■ オンライン版との対応（数値の出どころ） site-header.tsx → 下の「HEADER」節 帯 : h-[55px] + border-b 1px = 56px / bg-bg/95 + backdrop-blur-sm 外周padding : .frame = max(clamp(1rem,4vw,48px), calc((100vw - 1440px)/2)) ナビ : 13px / <1200px 12px / <1024px（ドロワー）14px・py 11px ナビgap : 8px → ≥1200px 12px → ≥1680px 20px 番号コード : ≥1920px のみ表示（mono 10px / tracking .2em / opacity .5） ブランド : マーク22px + gap6px + 900 18px letter-spacing .01em（-1px 光学補正） EN チップ : mono 11px / tracking .12em / padding 4px 8px / border 1px ハンバーガー: <1024px / 40x40 / bar 20x1.5px / gap 4px / margin-left -8px site-footer.tsx → 下の「FOOTER」節 ライト面(.theme-online: bg #f6f8fa / ink #14181c / line #e2e7ec / accent #1ea0c4) © 行 + 規約リンク行。mono 10px。<720px はタップ高 44px。 ■ 配色 ヘッダーはオンライン版と同じく theme-online の外＝黒地。ただし accent だけは 青 #1ea0c4 に固定する（site-header.tsx が --color-accent をヘッダー配下で 上書きしているのと同じ扱い。既定のアンバーが混ざると別サイトに見える）。 ■ zoom について オンライン版は html に zoom（<720px=1 / 720–1199px=.8 / ≥1200px=.9）が かかっており、ヘッダーだけ zoom:calc(1/--z) で打ち消して実px＝CSSpxにしている。 works は zoom を使っていないので **ヘッダーはそのまま一致**する。 一方フッターは zoom の内側なので、同じ見え方にするには works 側の フッターへ同じ倍率を掛ける必要がある（下の FOOTER 節の @media を参照）。 ⚠ 倍率を変えるときは locahun3d_online/src/app/globals.css の html{zoom} と対。 ============================================ */ /* ブランド中心をオンライン版と一致させるための予約。オンライン版は assets/site-header.css 経由で html に同じ指定が入っている。 片側だけスクロールバー分(15px)が寄ると中心が 7.5px ずれる（過去の実測）。 */ html{scrollbar-gutter:stable both-edges} /* ══════════════════════════════════════════ HEADER ══════════════════════════════════════════ */ /* 継承の遮断: ページ本文の letter-spacing / line-height / font-weight / font-family が ヘッダーへ漏れると、同じCSSでもページ毎に文字幅・帯の高さが変わる。 ヘッダーは常にここで定義した値だけで描画されること。 */ .site-header.sh-works{ --wh-accent:#1ea0c4; --wh-ink:#fafaf6; --wh-line:rgb(255 255 255 / .18); --wh-muted:rgb(255 255 255 / .62); /* オンライン版 globals.css の @utility frame と同式 */ --wh-pad:max(clamp(1rem,4vw,48px),calc((100vw - 1440px) / 2)); font-family:'Noto Sans JP',ui-sans-serif,system-ui,sans-serif; font-weight:300;letter-spacing:normal;line-height:1.5; position:fixed;top:0;left:0;right:0;z-index:1050; height:56px; /* border-box: 55px + border 1px = オンライン版と同じ */ background:rgb(0 0 0 / .95); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border-bottom:1px solid var(--wh-line); display:flex;align-items:center;gap:8px; padding:0 var(--wh-pad); color:var(--wh-ink); } @media(min-width:1200px){.site-header.sh-works{gap:12px}} .site-header.sh-works *{box-sizing:border-box} /* ── ブランド（画面中央に固定） ── ⚠ 「グループ全体を中央寄せ」にしないこと。オンライン版と同じく 1fr / auto / 1fr の絶対配置グリッドの2列目に **ブランド単体** を置く。 こうすると水平中心が常に 50% になり、左右の要素構成が変わっても動かない。 */ .site-header.sh-works .sh-center{ position:absolute;left:0;right:0;top:0;height:55px;z-index:2; display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;gap:0;padding:0 var(--wh-pad);pointer-events:none} .site-header.sh-works .sh-brand{grid-column:2;grid-row:1; display:flex;align-items:center;gap:6px;pointer-events:auto; text-decoration:none;color:inherit} .site-header.sh-works .sh-brand svg{flex:none;width:22px;height:22px} /* ⚠ -1px は光学補正（オンライン版と同じ。Noto Sans JP のグリフが行内で 1px強沈み、マークより低く見えるため。数値でなく見た目で合わせている）。 */ .site-header.sh-works .sh-brand-text{font-weight:900;font-size:18px;letter-spacing:.01em; white-space:nowrap;color:var(--wh-ink);position:relative;top:-1px} /* ── ナビ ── 既定＝ドロワー（<1024px）。1024px 以上で1行ナビへ戻す。 ⚠ 境界は「min-width で足す」形で書くこと。max-width:1023px と書くと 1023.5px のような小数幅がどちらにも該当せず素通りする（オンライン版の max-[1024px]/min-[1024px] ペアと同じ理由）。 */ .site-header.sh-works .sh-left{ position:absolute;top:100%;left:0;right:0;display:none; padding:4px var(--wh-pad) 12px; background:#000;border-bottom:1px solid var(--wh-line)} .site-header.sh-works.sh-open .sh-left{display:block} .site-header.sh-works .sh-left nav{display:flex;flex-direction:column;align-items:stretch;gap:0} .site-header.sh-works .sh-left nav a{display:flex;align-items:center;gap:10px; font-size:14px;font-weight:300;padding:11px 0;color:var(--wh-muted); text-decoration:none;white-space:nowrap;transition:color .2s} @media(hover:hover){.site-header.sh-works .sh-left nav a:hover{color:var(--wh-ink)}} .site-header.sh-works .sh-left nav a:focus-visible{color:var(--wh-ink)} @media(min-width:1024px){ .site-header.sh-works .sh-left{position:static;display:flex;align-items:center; flex:1;min-width:0;padding:0;background:none;border-bottom:0} .site-header.sh-works .sh-left nav{flex-direction:row;align-items:center;gap:8px} .site-header.sh-works .sh-left nav a{font-size:12px;gap:6px;padding:0}} @media(min-width:1200px){ .site-header.sh-works .sh-left nav{gap:12px} .site-header.sh-works .sh-left nav a{font-size:13px}} @media(min-width:1680px){.site-header.sh-works .sh-left nav{gap:20px}} /* 番号コード。オンライン版と同じく 1920px 以上でのみ出す （それ未満で出すとナビが伸びて中央ブランドへ食い込む）。 */ .site-header.sh-works .sh-left nav a .code{display:none; /* 日本語フォールバックはオンライン版 @utility mono と同順（下の FOOTER 節の注記）。 */ font-family:'JetBrains Mono','Noto Sans JP',ui-monospace,Consolas,monospace; font-size:10px;letter-spacing:.2em;opacity:.5;transition:color .2s,opacity .2s} @media(min-width:1920px){.site-header.sh-works .sh-left nav a .code{display:inline}} @media(hover:hover){ .site-header.sh-works .sh-left nav a:hover .code{color:var(--wh-accent);opacity:1}} /* ── 右ゾーン（EN チップまで。カート/ログインは works に無いので再現しない） ── */ .site-header.sh-works .sh-right{flex:1;min-width:0;position:relative;z-index:1; display:flex;align-items:center;justify-content:flex-end;gap:8px} .site-header.sh-works .sh-lang{font-family:'JetBrains Mono','Noto Sans JP',ui-monospace,Consolas,monospace; font-size:11px;letter-spacing:.12em;padding:4px 8px; border:1px solid var(--wh-line);color:var(--wh-muted);text-decoration:none; transition:border-color .2s,color .2s} @media(hover:hover){ .site-header.sh-works .sh-lang:hover{border-color:var(--wh-accent);color:var(--wh-accent)}} /* ── ハンバーガー（<1024px） ── */ .site-header.sh-works .sh-hb{display:flex;flex:none;width:40px;height:40px;margin-left:-8px; align-items:center;justify-content:center;flex-direction:column;gap:4px; background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none} .site-header.sh-works .sh-hb i{display:block;width:20px;height:1.5px;background:var(--wh-muted); transition:background .2s} @media(hover:hover){.site-header.sh-works .sh-hb:hover i{background:var(--wh-accent)}} .site-header.sh-works.sh-open .sh-hb i{background:var(--wh-accent)} @media(min-width:1024px){.site-header.sh-works .sh-hb{display:none}} /* ══════════════════════════════════════════ FOOTER — オンライン版 site-footer.tsx と同構成・同トーン ⚠ ライト面（.theme-online）で正しい。works 本文は黒地だが、オンライン版は 全ページこのライトなフッターで終わるので、ここを暗くすると逆に 「別サイトに来た」感が出る（本人指示の趣旨）。 ══════════════════════════════════════════ */ .site-foot{ --sf-accent:#1ea0c4; --sf-bg:#f6f8fa; --sf-ink:#14181c; --sf-line:#e2e7ec; --sf-pad:max(clamp(1rem,4vw,48px),calc((100vw - 1440px) / 2)); font-family:'Noto Sans JP',ui-sans-serif,system-ui,sans-serif; font-weight:300;line-height:1.8;letter-spacing:.04em; background:var(--sf-bg);color:var(--sf-ink); border-top:1px solid var(--sf-line); margin:0;padding:0} /* オンライン版は html の zoom（720–1199px=.8 / ≥1200px=.9）の内側にフッターがある。 works は zoom を使っていないため、同じ倍率をここで掛けないと 「works だけフッターが一回り大きい」状態になる（実寸で約11%差）。 */ @media(min-width:720px){.site-foot{zoom:.8}} @media(min-width:1200px){.site-foot{zoom:.9}} .site-foot *{box-sizing:border-box} .site-foot .sf-inner{position:relative;padding:32px var(--sf-pad) 24px; display:flex;flex-direction:column;gap:16px} /* ⚠ font-weight:500 と color の書き方はオンライン版に合わせてある。 500 は .theme-online .mono（ライト面のモノ書体だけ太らせる規則）由来。 色は Tailwind の `text-ink/70` が出力する color-mix と同式にしてあり、 computed 値が oklab(...) で一字一句一致する（header-parity --works で照合）。 */ /* ⚠ JetBrains Mono に日本語グリフは無い。オンライン版の @utility mono は `"JetBrains Mono", var(--font-sans), ui-monospace, ...` と **Noto Sans JP を 2番目に**置いてあり、「利用規約」等の日本語はそこから描画される。ここで Noto Sans JP を落とすと日本語だけ Consolas 系のフォールバックへ落ち、 1文字あたり約1px 太る（実測 @1440: 利用規約 46.5px vs オンライン 42.5px）。 ASCII は JetBrains Mono が先勝ちするので見た目は変わらない。 */ .site-foot .sf-copy, .site-foot .sf-links a{font-family:'JetBrains Mono','Noto Sans JP',ui-monospace,Consolas,monospace; font-weight:500;font-size:10px;text-transform:uppercase; color:color-mix(in oklab, var(--sf-ink) 70%, transparent)} .site-foot .sf-copy{letter-spacing:.28em} .site-foot .sf-links{display:flex;flex-wrap:wrap;gap:16px} .site-foot .sf-links a{letter-spacing:.18em;text-decoration:none;transition:color .2s} @media(hover:hover){.site-foot .sf-links a:hover{color:var(--sf-accent)}} /* <720px はタップ領域 44px（Apple HIG / WCAG 2.5.5）。文字サイズは意匠なので変えない。 */ @media(max-width:719px){ .site-foot .sf-links{gap:8px 16px} .site-foot .sf-links a{display:inline-flex;align-items:center;min-height:44px}} @media(min-width:640px){ .site-foot .sf-inner{flex-direction:row;justify-content:space-between;align-items:center}}