/* ═══════════════════════════════════════════════════════════════
   GENBA design system ──「刃物の和モダン」共有キット
   紙 #F4EFE4 / 墨 #1C1814 / 朱 #C2362B ・ Noto Serif JP × IBM Plex Mono
   各ページの <style> より前に読み込む（ページ側の定義が勝てる順序）
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap');

::selection{ background:#C2362B; color:#FBF8F1; }
.font-serif{ font-feature-settings:"palt"; }
.font-mono{ font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace !important; }
:focus-visible{ outline:2px solid #C2362B; outline-offset:2px; border-radius:4px; }

/* 紙の質感 ── 全画面の極薄和紙ノイズ */
body::after{
  content:""; position:fixed; inset:0; z-index:130; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 判子（ブランドの実印） */
.hanko{ display:inline-flex; align-items:center; justify-content:center; background:#C2362B; color:#FBF8F1;
  font-family:'Noto Serif JP',serif; font-weight:900; line-height:1; border-radius:5px; transform:rotate(-4deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 2px 2px 0 rgba(28,24,20,.85); transition:transform .2s cubic-bezier(.2,.7,.2,1); }
a:hover .hanko{ transform:rotate(0deg); }

/* 押せる物理（背景色はユーティリティで自由） */
.btn-press{ border:2px solid #1C1814; box-shadow:4px 4px 0 #1C1814; transition:transform .13s cubic-bezier(.2,.7,.2,1), box-shadow .13s, background .18s, color .18s; }
.btn-press:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 #1C1814; }
.btn-press:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 #1C1814; }
.btn-press-paper{ border-color:#F4EFE4; box-shadow:4px 4px 0 rgba(20,16,9,.55); }
.btn-press-paper:hover{ box-shadow:5px 5px 0 rgba(20,16,9,.55); }
.btn-press-paper:active{ box-shadow:1px 1px 0 rgba(20,16,9,.55); }
/* 墨の面に押せる物理を出すとき＝影を朱に（墨on墨で影が消えるのを防ぐ） */
.btn-press-seal{ box-shadow:4px 4px 0 #C2362B; }
.btn-press-seal:hover{ box-shadow:5px 5px 0 #C2362B; }
.btn-press-seal:active{ box-shadow:1px 1px 0 #C2362B; }

/* セクション見出し（編集誌スタイル） */
.sec-tag{ display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11.5px; font-weight:600; letter-spacing:.24em; color:#C2362B; text-transform:uppercase; }
.sec-tag::before{ content:''; width:26px; height:2px; background:#C2362B; }
.sec-no{ font-family:'Noto Serif JP',serif; font-weight:900; font-size:clamp(56px,6.6vw,92px); line-height:.78;
  color:transparent; -webkit-text-stroke:1.5px rgba(194,54,43,.42); letter-spacing:-.02em; user-select:none; flex:none; }

/* 見出しの朱スタンプ（ヒーローの決めことば） */
.mark-seal{ position:relative; display:inline-block; color:#FBF8F1; padding:0 .12em; white-space:nowrap; isolation:isolate; }
.mark-seal::before{ content:''; position:absolute; left:-.03em; right:-.03em; top:7%; bottom:7%; background:#C2362B;
  border-radius:10px; transform:rotate(-1.6deg); z-index:-1; box-shadow:4px 5px 0 rgba(28,24,20,.9); }
@media (max-width:640px){ .mark-seal::before{ box-shadow:3px 3px 0 rgba(28,24,20,.9); } }

/* 図面シート（技術図面の額装：墨枠＋朱トンボ） */
.fig-sheet{ position:relative; background:#FBF8F1; border:2px solid #1C1814; border-radius:10px; box-shadow:10px 12px 0 rgba(28,24,20,.13); }
.fig-sheet::before{ content:''; position:absolute; inset:8px; pointer-events:none; z-index:5; opacity:.95;
  background-image:linear-gradient(#C2362B,#C2362B),linear-gradient(#C2362B,#C2362B),linear-gradient(#C2362B,#C2362B),linear-gradient(#C2362B,#C2362B),linear-gradient(#C2362B,#C2362B),linear-gradient(#C2362B,#C2362B),linear-gradient(#C2362B,#C2362B),linear-gradient(#C2362B,#C2362B);
  background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  background-repeat:no-repeat; }

/* 仕様の箱 ── 図面の枠のように墨の線で描く（影は出さない＝並べても静か） */
.spec-card{ background:#FBF8F1; border:1.5px solid #1C1814; border-radius:8px; }
/* 押し出したい箱だけ硬い影を足す（強み・売り文句） */
.spec-card-lift{ box-shadow:4px 4px 0 rgba(28,24,20,.14); transition:transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s; }
.spec-card-lift:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 rgba(28,24,20,.2); }
/* 墨の面に置く紙の箱＝影を朱に（暗いヒーローの上のカードなど） */
.spec-card-seal{ box-shadow:5px 6px 0 #C2362B; }
/* 箱の見出し＝朱の刻み＋モノスペース（技術ラベルの声） */
.spec-label{ display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  font-size:11px; font-weight:600; letter-spacing:.16em; color:#C2362B; }
.spec-label::before{ content:''; width:16px; height:2px; background:#C2362B; flex:none; }

/* 追従ヘッダー：スクロールすると墨の罫が1本立つ（assets/genba.js が .is-stuck を付ける） */
header{ transition:box-shadow .2s ease, background-color .2s ease; }
header.is-stuck{ box-shadow:0 2px 0 #1C1814, 0 16px 28px -24px rgba(28,24,20,.9); }

/* 地図の濃度キー（着色＝地域の色分けではなく「載っている現場の実数」） */
.dens-key{ display:inline-block; width:15px; height:9px; border:1px solid rgba(28,24,20,.55); }

/* ── ここから下は 2026-07-26 に各ページの <style> から吸い上げたもの ──
   ページ側に散らばっていると (a) 宣言を持たないページで壊れる (b) 同名で違う物理が併存する。
   実際に about.html は .seal-stamp を5箇所で使いながら宣言ゼロ＝朱枠が出ていなかった。 */

/* 朱枠のスタンプ（検証済み・審査済みの印） */
.seal-stamp{ border:2px solid #C2362B; color:#C2362B; border-radius:6px; }

/* リンクの下線が朱で伸びる */
.link-underline{ background-image:linear-gradient(#C2362B,#C2362B); background-size:0% 2px;
  background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s; }
a:hover .link-underline, .link-underline:hover{ background-size:100% 2px; }

/* カードの持ち上がり ── キットの影は blur 0（ぼかし影は別の設計言語）。
   ページ側に blur 16〜40px の同名実装が5つあったので、硬い影のこの1本に統一する。 */
.card-hover{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.card-hover:hover{ transform:translate(-2px,-2px); border-color:#1C1814; box-shadow:6px 6px 0 rgba(28,24,20,.16); }
@media (prefers-reduced-motion: reduce){
  .card-hover, .card-hover:hover{ transform:none !important; }
}

@media (max-width:640px){
  .sec-no{ font-size:44px; -webkit-text-stroke-width:1.2px; }
  .fig-sheet{ box-shadow:6px 7px 0 rgba(28,24,20,.13); }
}
@media (prefers-reduced-motion: reduce){
  .btn-press, .btn-press:hover, .btn-press:active{ transform:none !important; }
}

/* ── 寸法の一行（図面の注記の声）──────────────────────────────
   カードの中で「うちの部品が入るか」を一目で言う。数字だけ墨、単位と語は薄く。
   ⚠️ 素のCSSで書く ── Tailwind Play CDN は innerHTML で後から挿す要素の
   任意値クラスを生成しないことがある（line-clamp も同じ理由でここに置く）。 */
.spec-line{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  font-size:11.5px; font-feature-settings:"tnum"; color:#5C544A; }
.spec-line b{ font-weight:700; color:#1C1814; font-size:12.5px; margin-left:2px; }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── デモ（見本データ）の印 ──────────────────────────────────
   朱は「押すもの」なので使わない。墨の破線＝図面の仮線＝「これは仮の値」。
   隠さない・謝らない・小さく正確に言う。実在の工場が入ると自動的に消える。 */
.demo-tag{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle;
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  font-size:10.5px; font-weight:600; letter-spacing:.14em; line-height:1;
  color:#5A5248; border:1.5px dashed rgba(28,24,20,.45); border-radius:5px; padding:4px 7px;
  background:transparent; white-space:nowrap; }
.demo-tag::before{ content:''; width:5px; height:5px; flex:none; border-radius:50%; background:rgba(28,24,20,.45); }
/* 墨の面の上では紙色で（コントラスト比 8:1 以上を保つ） */
.on-ink .demo-tag, .demo-tag.on-ink{ color:#EDE6D8; border-color:rgba(244,239,228,.5); }
.on-ink .demo-tag::before, .demo-tag.on-ink::before{ background:rgba(244,239,228,.6); }
/* 一文の但し書き（本文の下に敷く） */
.demo-note{ font-size:12.5px; line-height:1.7; color:#5A5248; }

/* 言語切替（トップバー）
   色は currentColor 継承＝暗いバーでも明るいヘッダーでも読める（feed のような
   bg-paper ヘッダーに置いた時に paper-on-paper で消えるのを防ぐ）。 */
[data-setlang]{ color:inherit; opacity:.55; cursor:pointer; background:none; border:none; font:inherit; padding:0; transition:opacity .15s; }
[data-setlang]:hover{ opacity:1; }
[data-setlang].lang-on{ opacity:1; font-weight:700; }
.lang-switch{ display:inline-flex; align-items:center; gap:8px; }
.lang-switch .sep{ opacity:.3; }