/* =========================================================
   GOLIXX ブランドサイト 固有レイヤー（phase2-C 刷新）
   読み順: tokens.css → ui.css → site.css
   ★共通の器（appbar/gnav/hero-x/card/fold/beta-band/foot-cross 等）は
     ui.css（golixx-lib と同一）から来る。ここには「親ブランドの肌」と
     ブランドサイト固有の部品（製品ショーケース・実演サムネ）だけを置く。
   ★生pxは原則書かない。トークン参照。数少ない新設値は末尾 :root に集約。
   運営：vernal合同会社
   ========================================================= */

/* =========================================================
   1. GOLIXX の肌（親ブランド＝中立のスレート）
   4製品はそれぞれ色を持つ（quiz=マゼンタ/akaire=ティール/kaigi=藍/kono=葉緑）。
   親はどれか1色に寄らず「家（house）」として静かに構える＝五則「色は熟してから」。
   製品差替スロット（--primary/--hero-*）だけを上書きする。
   ========================================================= */
[data-brand="golixx"]{
  --primary:#3d5a73; --primary-d:#2b4257; --primary-l:#e8eef4; --bd-primary:#c2d0dd;
  --accent:var(--primary); --accent-d:var(--primary-d); --accent-l:var(--primary-l);
  --hero-2:#26333f; --hero-3:#16191d; --hero-ink:#d7e0ea;   /* スレート→チャコールの重厚グラデ */
}

/* =========================================================
   2. ヒーロー：GOLIXX の道具箱（道具が並ぶ1枚で全体像を想起）
   右の demo-card を「道具が並んだ棚」に。
   親ブランドの静かなヒーロー地に、製品色のタイルが映える。

   ★7製品になった時の設計（2026-07-31）
     7は割り切れない数。1枠を「ぜんぶ見る」（products.html への導線）に充てて
     8枠＝4列×2行にした。将来8製品なら 3×3＝9枠で同じ型が続く。
     ＝「製品数＋1」で常に矩形が埋まる。本文にも枠にも数を書かないので、
       製品が増えても文言の書き換えが要らない。
   ★識別は色でなく“形”（参考ボード：家紋）。7つの色は近いものが混ざるため、
     紋＝シルエットが第一の見分けで、色は第二。塗りつぶしても意味が残る形にする。
   ========================================================= */
.launcher{background:var(--surface); padding:var(--sp-3)}
.launcher-bar{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:0 var(--sp-1) var(--sp-2); border-bottom:var(--bw) solid var(--line); margin-bottom:var(--sp-3);
}
.launcher-bar .lb-dot{width:9px; height:9px; border-radius:var(--r-full); background:var(--line-strong); flex:0 0 auto}
.launcher-bar .lb-title{font-size:var(--fs-sm); font-weight:700; color:var(--muted); letter-spacing:.04em}
/* 道具箱はヒーロー右の枠いっぱいを使う（268px では足りない）*/
.hero-demo.wide{width:var(--launcher-w)}
/* ★2026-08-15：8製品になったので 4列×2行(8枠) → 3列×3行(9枠)。
   上のコメントに書いてあった「将来8製品なら 3×3＝9枠で同じ型が続く」の実行。
   製品数＋1（最後は「ぜんぶ見る」）で常に矩形が埋まる＝枠にも本文にも数を書かなくてよい。 */
.app-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2)}
.app-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-1);
  text-align:center; text-decoration:none;
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-1); color:#fff;
  min-height:76px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.app-tile .at-ic{width:30px; height:30px; display:block; flex:0 0 auto}
/* 狭い枠で2行に折れるので禁則を効かせる（長音符「ー」や小書き仮名を行頭に置かない）*/
.app-tile .at-name{font-size:var(--fs-2xs); font-weight:700; line-height:1.2; line-break:strict}
/* 製品色（各製品の primary＝その製品のヒーローの主色）。白文字はコントラスト実測済み */
.app-tile.t-quiz{background:linear-gradient(150deg,#1558b0,#0e3d7d)}
.app-tile.t-akaire{background:linear-gradient(150deg,#1f6f8b,#124b5f)}
.app-tile.t-kaigi{background:linear-gradient(150deg,#283593,#1a237e)}
.app-tile.t-kono{background:linear-gradient(150deg,#33691e,#1b4d06)}
/* ⚠順番ボードとその場投票は製品側の --primary が同値(#00695c)。色では見分けられないため
   ①紋（整理券／投票箱）で分ける ②明度で分ける（順番＝明るいteal／投票＝各製品のhero濃色）
   ③グリッド上で隣接させない（間にくじばこの紫を挟む）の3段構えで識別する。
   いずれも各製品が自分で持っている色（accent / hero-2 / hero-3）の範囲内で、
   製品ページとの連続性は壊していない。恒久策＝製品側でどちらかの色相を変えること（当社より申し送り）。 */
.app-tile.t-junban{background:linear-gradient(150deg,#00796b,#00332c)}
.app-tile.t-kuji{background:linear-gradient(150deg,#6a1b9a,#4a148c)}
.app-tile.t-vote{background:linear-gradient(150deg,#0b4f45,#062f29)}
/* 家系図は茶。8製品の中で唯一の色相なので、隣に何が来ても見分けが付く */
.app-tile.t-kakeizu{background:linear-gradient(150deg,#6d4c41,#4e342e)}
/* 「ぜんぶ見る」＝製品ではないので製品色を持たせない。親ブランドのスレートで“棚の把手”に見せる */
.app-tile.t-more{background:linear-gradient(150deg,#4a6076,#2b4257)}
/* quiz タイルの早押し●だけ、そっと脈打つ（正本§5：常時動作は reduced-motion で止める）*/
.app-tile.t-quiz .buzz-dot{transform-box:fill-box; transform-origin:center; animation:gx-buzz 2.4s var(--ease-in) infinite}
@keyframes gx-buzz{0%,100%{transform:scale(1)}50%{transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){ .app-tile.t-quiz .buzz-dot{animation:none} }

/* =========================================================
   3. 製品ショーケース（送客の主役）
   各カード：実演ミニデモ（その製品のヒーローを想起）＋名前＋一言＋詳細fold＋CTA。
   ========================================================= */
/* 4製品は 2×2 でバランスさせる（デモを大きく見せる）。狭幅では1列に落ちる。
   minmax(360px) ＝ 960px幅で2列 / 768px で2列 / 640px 以下で1列 */
.prods{display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:var(--sp-4)}
@media (max-width:640px){ .prods{grid-template-columns:1fr} }
.prod{
  display:flex; flex-direction:column;
  background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:box-shadow var(--dur-fast), transform var(--dur-fast);
}
.prod:hover{box-shadow:var(--shadow-md); transform:translateY(-2px)}
/* 実演サムネの帯。製品色の淡地に自己完結SVGを載せる */
.prod-demo{padding:var(--sp-3) var(--sp-4) 0; background:var(--pd-bg,#eef2f6)}
.prod-demo svg{display:block; width:100%; height:auto; border-radius:var(--r-md) var(--r-md) 0 0}
.prod-body{padding:var(--sp-4); display:flex; flex-direction:column; flex:1 1 auto; gap:var(--sp-1)}
.prod-head{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.prod-name{font-size:var(--fs-xl); font-weight:700; color:var(--pd-ink,var(--primary-d)); margin:0}
.prod-lead{color:var(--text); margin:0}
.prod-foot{margin-top:auto; padding-top:var(--sp-3); display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.prod-foot .prod-url{font-size:var(--fs-md); color:var(--muted); font-variant-numeric:tabular-nums}
/* カードの主ボタンは製品色（そのサービスへ行く合図）。色は各カードの --pd-btn で差替 */
.prod .btn.go{background:var(--pd-btn,var(--primary)); border-color:var(--pd-btn,var(--primary))}
.prod .btn.go:hover{background:var(--pd-btn-d,var(--primary-d)); border-color:var(--pd-btn-d,var(--primary-d))}
/* 製品ごとの色スロット（カード自身に付ける）*/
.prod.p-quiz  {--pd-bg:#e8eff9; --pd-ink:#0e3d7d; --pd-btn:#1558b0; --pd-btn-d:#0e3d7d}
.prod.p-akaire{--pd-bg:#e3f0f5; --pd-ink:#124b5f; --pd-btn:#1f6f8b; --pd-btn-d:#124b5f}
.prod.p-kaigi {--pd-bg:#e8eaf6; --pd-ink:#1a237e; --pd-btn:#283593; --pd-btn-d:#1a237e}
.prod.p-kono  {--pd-bg:#eef4e6; --pd-ink:#1b4d06; --pd-btn:#33691e; --pd-btn-d:#1b4d06}
.prod.p-junban{--pd-bg:#e0f2f1; --pd-ink:#00332c; --pd-btn:#00695c; --pd-btn-d:#004d40}
.prod.p-kuji  {--pd-bg:#f5ecf9; --pd-ink:#4a148c; --pd-btn:#6a1b9a; --pd-btn-d:#4a148c}
/* その場投票は順番ボードと製品側の色が同値のため、この面では濃度で分ける（vote 自身の hero-2/3 を採用）*/
.prod.p-vote  {--pd-bg:#e6efec; --pd-ink:#062f29; --pd-btn:#0b4f45; --pd-btn-d:#062f29}
.prod.p-kakeizu{--pd-bg:#f5eeeb; --pd-ink:#4e342e; --pd-btn:#6d4c41; --pd-btn-d:#4e342e}
/* 無料ベータの小バッジ（.badge.free を流用しつつ製品ページと同じ言い回し） */
.prod .badge.beta{background:var(--ok-bg); color:var(--ok-text); border:var(--bw) solid #bcd9be}

/* =========================================================
   4. 「なぜ GOLIXX か」3本柱（steps3 を流用するのでここは最小）
   ========================================================= */
.why .card h3{color:var(--primary-d)}

/* =========================================================
   5. 受付停止の静的告知（問い合わせ窓口は開かない・受託色を出さない）
   警告に見せない中立トーン。左罫は muted。
   ========================================================= */
.closed{
  background:var(--surface); border:var(--bw) solid var(--line); border-left:var(--bw-4) solid var(--muted);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:var(--sp-4) var(--sp-5);
}
.closed strong{display:block; font-size:var(--fs-lg); color:var(--text); margin-bottom:var(--sp-2)}
.closed p{color:var(--muted)}

/* =========================================================
   6. 状態のお知らせ（安心情報＝警告に見せない・緑系）
   法定3文書の「現在は販売なし／入力なし」告知に使用。
   ========================================================= */
.status{
  background:var(--ok-bg); border:var(--bw) solid #bcd9be; border-left:var(--bw-4) solid var(--ok);
  border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5);
}
.status strong{display:block; font-size:var(--fs-lg); color:var(--ok-text); margin-bottom:var(--sp-2)}
.status p{color:var(--text)}

/* =========================================================
   7. ブランドの署名行（ヒーロー下・信頼要素）
   ========================================================= */
/* ヒーロー（暗い地）の上で使うので文字色は継承（=--hero-ink）。mu tedにしない */
.trust-row{
  display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); align-items:center;
  color:inherit; font-size:var(--fs-md);
}
.trust-row .t-item{display:inline-flex; align-items:center; gap:var(--sp-1)}
.trust-row .t-item::before{content:"✓"; color:#86e29b; font-weight:700}  /* 暗地で4.5:1を満たす明るい緑 */

/* =========================================================
   8. ページ見出し（法的ページ）— pagehead は ui.css にあるが
      親ブランドは primary-d でなくチャコール寄りにして製品と差別化。
   ========================================================= */
[data-brand="golixx"] .pagehead{background:var(--primary-d)}

/* =========================================================
   9. レスポンシブ微調整
   ========================================================= */
@media (max-width:768px){
  /* ヒーローが1カラムになる幅。道具箱は 220px では4列に足りないので画面幅まで広げる
     （ui.css の .hero-demo.wide{width:220px} をここで上書き。読み順は ui→site）*/
  .hero-demo.wide{width:min(100%, var(--launcher-w))}
  .hero-demo .launcher{padding:var(--sp-3)}
}
@media (max-width:640px){
  /* 320px でも4列を保つ（1列あたり約60px）。紋を小さくして名前2行ぶんの高さを空ける */
  .app-grid{gap:var(--sp-1)}
  .app-tile{min-height:72px; padding:var(--sp-2) 0}   /* 横paddingを外して名前1行ぶんの幅を稼ぐ */
  .app-tile .at-ic{width:26px; height:26px}
  .prod-foot{gap:var(--sp-2)}
}

/* =========================================================
   10. 新設トークン（このサイト固有・1回だけ宣言）
   ========================================================= */
:root{
  --logo-hero:120px;   /* ヒーローのロゴ最大寸（装飾） */
  --launcher-w:376px;  /* 道具箱の幅。ヒーロー右カラム(.85fr≒380px)いっぱい＝4列を成立させる下限 */
}

/* ---------- 用途ナビ「何に困っていますか？」（2026-08-14 新設） ----------
   外部レビュー（ユーザー目線）の指摘＝「同じ7サービスを2回見せている。
   7個になると『で、私はどれを使えばいいの？』となる」への答え。

   ★ここは**索引**であって、下の製品カードとは役割が違う。
     参考ボード「ポスター＝画面に主役は1つ」「マッチラベル＝主役を1つ決めて他を小さくする」。
     だから**カード語彙を使わない**（枠は細く・高さは小さく・実演SVGを持たない）。
     カード型の攻め案も作ったが、下の一覧と語彙が同じになり
     「2回」を「3回」に増やすので採らなかった。
   ★紋はヒーローの道具箱と**同じ形**を小さく反復する（家紋＝塗りつぶして意味が残る形）。
     新しい装飾語彙を足さない。
   ★min(100%,300px) は 320px で横スクロールさせないため（実測して入れた）。 */
.needs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:var(--sp-2);margin-top:var(--sp-4)}
.need{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  column-gap:var(--sp-3);row-gap:2px;padding:var(--sp-3) var(--sp-4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  text-decoration:none;color:var(--text)}
.need:hover{background:var(--bg-hover);border-color:var(--line-strong)}
.need .need-ic{grid-row:1/3;width:26px;height:26px}
.need .need-ic svg{width:100%;height:100%;display:block}
.need .need-q{grid-column:2;font-weight:700;font-size:var(--fs-body);line-height:1.4}
.need .need-a{grid-column:2;font-size:var(--fs-sm);color:var(--muted)}
.need .need-arw{grid-column:3;grid-row:1/3;color:var(--primary);font-weight:700}