/* BRIDGE hub pages shared CSS — v1.2 / 2026-07-24
 * Used by: starter-kits(ハブページ)のみ
 *   ※ products / journal / about は bridge.css へ移行済み(2026-07-24 実測で確認)
 * subpage.css の後に読み込む。自前の :root を持たず、subpage.css のトークンに依存する。
 * 配色は憲法第22条の4系統のみ。砂は「選択の瞬間」だけに使う。
 *
 * v1.2 で、starter-kits のDOMに出現しない20系統(.products-grid / .product-card* /
 * .notes-grid / .note-card* / .note-link / .note-tag / .showcase-* / .marquee* /
 * .hanko / .jump-chip / .jump-row ほか)を削除した。ルートLPは bridge.css へ
 * 移行済みで将来のconsumerがなく、bridge.js による注入もインラインスクリプトも
 * 無いことを実測済み。検証できない色をリポジトリに残すことが、憲法外の色が
 * 生き延びる経路そのものであるため(第9条4号)。
 */

/* ===== NAV LINKS(トップと同じ横並びナビ) ===== */
.nav-links{display:flex;gap:24px;font:600 11px/1 var(--sans-en);letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2)}
.nav-links a{position:relative;padding:6px 0;transition:color .15s}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink)}
.nav-links a.on::after{transform:scaleX(1)}
@media(max-width:640px){
  .nav{flex-wrap:wrap;row-gap:10px}
  .nav.scrolled{row-gap:8px}
  .nav-links{width:100%;gap:14px;flex-wrap:wrap;font-size:10px;letter-spacing:0.1em}
}

/* fixed nav 分のアンカーずれ防止 */
section[id]{scroll-margin-top:90px}

/* ===== TOOLBOX(Starter Kits カード) ===== */
.toolbox-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.toolbox-grid{grid-template-columns:1fr}}
.toolbox-card{background:var(--card);border:1px solid var(--line);padding:36px 32px;display:flex;flex-direction:column;gap:18px;position:relative;transition:transform .25s,box-shadow .25s}
.toolbox-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.toolbox-card.featured{background:var(--card);border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.toolbox-status{position:absolute;top:18px;right:20px;font:700 10px/1 var(--sans-en);letter-spacing:0.14em;text-transform:uppercase;padding:6px 10px;border-radius:2px}
.toolbox-status.avail{background:var(--navy);color:var(--on-fill)}
.toolbox-status.soon{background:var(--paper-2);color:var(--ink-3);border:1px solid var(--line)}
.toolbox-status.consult{background:var(--paper-3);color:var(--blue);border:1px solid var(--line)}
.toolbox-num{font:800 11px/1 var(--sans-en);letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-3)}
.toolbox-name{font:700 22px/1.3 var(--serif-jp);color:var(--ink);letter-spacing:-0.01em}
.toolbox-name .jp{display:block;font:500 11px/1 var(--sans-jp);color:var(--ink-3);letter-spacing:0.04em;margin-top:6px}
.toolbox-price{display:flex;align-items:baseline;gap:6px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.toolbox-price .yen{font:600 13px/1 var(--sans-jp);color:var(--ink-3)}
.toolbox-price .num{font:700 28px/1 var(--serif-en);color:var(--navy);letter-spacing:-0.01em}
.toolbox-price .unit{font:500 10px/1.4 var(--sans-jp);color:var(--ink-3);margin-left:4px}
.toolbox-for{font:600 11px/1.7 var(--sans-jp);color:var(--ink-2);letter-spacing:0.02em}
.toolbox-for .label{display:inline-block;font:700 9px/1 var(--sans-en);letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);margin-right:8px}
.toolbox-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.toolbox-list li{font:500 12px/1.5 var(--sans-jp);color:var(--ink-2);padding-left:18px;position:relative}
.toolbox-list li::before{content:'';position:absolute;left:0;top:8px;width:10px;height:1px;background:var(--ink-3)}
.toolbox-actions{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:14px}
.toolbox-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 18px;font:700 12px/1 var(--sans-jp);letter-spacing:0.06em;border-radius:2px;transition:all .18s;border:1px solid transparent}
.toolbox-btn.primary{background:var(--ink);color:var(--on-fill)}
.toolbox-btn.primary:hover{background:var(--navy)}
.toolbox-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.toolbox-btn.ghost:hover{border-color:var(--ink);background:var(--card)}
.toolbox-btn.disabled{background:var(--paper-3);color:var(--ink-3);cursor:not-allowed}
.toolbox-foot{max-width:var(--max);margin:48px auto 0;padding-top:32px;border-top:1px solid var(--line)}
.toolbox-foot p{font:500 11px/1.85 var(--sans-jp);color:var(--ink-3);max-width:780px}
.toolbox-foot p + p{margin-top:8px}

/* ===== セクション末尾のCTA ===== */
.notes-foot{max-width:var(--max);margin:56px auto 0;text-align:center}
.notes-cta{font:700 12px/1 var(--sans-jp);letter-spacing:0.08em;color:var(--ink);padding:16px 28px;border:1px solid var(--ink);border-radius:2px;display:inline-block;transition:all .2s}
.notes-cta:hover{background:var(--ink);color:var(--on-fill)}

/* ===== FOOTER 微調整 ===== */
.foot-links{flex-wrap:wrap;row-gap:10px}

/* ===== EDITORIAL DETAILS ===== */
/* hero: 透かしタイポ + 縦書きの添え書き */
.hero{overflow:hidden}
.hero-mark{position:absolute;right:-2%;bottom:-8%;font:700 clamp(110px,20vw,300px)/0.8 var(--serif-en);font-style:normal;letter-spacing:-0.04em;color:var(--ink);opacity:0.03;pointer-events:none;user-select:none;white-space:nowrap;z-index:0}
.hero-inner{position:relative;z-index:1}
/* 1文字ずつ縦に積む(writing-mode はブラウザ差が出るため使わない) */
.hero-vertical{position:absolute;top:50%;transform:translateY(-50%);right:clamp(20px,5vw,80px);width:15px;font:600 13px/1.9 var(--serif-jp);word-break:break-all;text-align:center;color:var(--ink-2);opacity:0.55;padding-left:16px;border-left:1px solid var(--line);z-index:1;box-sizing:content-box}
@media(max-width:900px){.hero-vertical{display:none}}

/* セクション背景の大きな番号 */
.s-inner{position:relative}
.s-num-ghost{position:absolute;top:-44px;right:0;font:700 clamp(88px,13vw,170px)/1 var(--serif-en);font-style:normal;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 13%,transparent);pointer-events:none;user-select:none;z-index:0}
.s-head,.toolbox-grid,.notes-foot,.toolbox-foot{position:relative;z-index:1}

/* ページ間トランジション(対応ブラウザのみ・MPA View Transitions) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .3s ease both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

/* カルテ用紙(方眼)— alt セクションに敷く */
section.alt{background-image:linear-gradient(color-mix(in srgb,var(--navy) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--navy) 6%,transparent) 1px,transparent 1px);background-size:24px 24px}

/* v2 rebrand: ロゴシンボル */
.nav-logo{display:inline-flex;align-items:center;gap:10px}
.nav-logo .mark{width:36px;height:16px;flex-shrink:0}
.nav-logo .mark path{fill:none;stroke-linecap:round}