/* ============================================================
   フィットスケール 共有シェル（兄弟サービスと同じ型）
   ヘッダー(.gs-topbar)・フッター(.gs-foot)・カラーパレット・記事ページの紙レイヤを
   全ページで共有するスタイルシート。ページ部品は main.css。
   ============================================================ */

/* ---- カラーパレット（テーマ 3 色・design/theme.json が正本。tests/test_theme_colors.py が突合）----
   役割は色に固定し、色ごとに「明るい段（装飾・面・図）」と「濃い段（文字・白抜きを乗せる面）」の 2 段を持つ。
   明るい段は白地とのコントラストが 3:1 台なので、文字色と白抜き文字を乗せる面には必ず濃い段を使う。

     役割                 theme.json         明るい段（装飾）      濃い段（文字・面）      淡い面
     構造・主要導線        main / main_light   --brand #14B8A6      --g #0F766E / --g-dark  --tint #CCFBF1 / --soft
     強調・注意・CTA       second / second_bg  --s #F97316          --s-ink #C2410C         --s-soft #FFEDD5
     データ・補足・第3系列  accent / accent_bg  --y #60A5FA          --y-deep #1D4ED8        --y-soft #DBEAFE
     文字                 ink / mute          --ink #10242B  --mute #5C7280
     地・罫・パネル        ground / rule / panel                     --line #C9E6E1  --soft #EFFAF8

   ※ --y / --y-deep という名前は参考実装の「黄」の名残（参照箇所が多いので改名しない）。中身は差し色。
   ※ 図・OG カードは同じ theme.json を scale.figure が読む（CSS と値を二重管理しない）。 */
body{
  --g:#0F766E;          /* 主色の濃い段（文字・白抜き面・リンク） */
  --g-dark:#0D5F59;     /* hover 用にさらに濃く */
  --brand:#14B8A6;      /* 主色の明るい段（帯・印・装飾） */
  --tint:#CCFBF1;       /* 主色の淡い面（ピル・チップ） */
  --soft:#EFFAF8;       /* パネルの面 */
  --s:#F97316;          /* 副色（強調・「そうならない」側）の明るい段 */
  --s-ink:#C2410C;      /* 副色の文字用 */
  --s-soft:#FFEDD5;     /* 副色の淡い面 */
  --y:#60A5FA;          /* 差し色（データ）の明るい段 */
  --y-deep:#1D4ED8;     /* 差し色の濃い段（文字にも使える。--y-soft の上で 5.5・白地で 6.7） */
  --y-soft:#DBEAFE;     /* 差し色の淡い面 */
  --bg:#EEF4F3;         /* 最背面 */
  --ink:#10242B;
  --mute:#5C7280;
  --card:#FFFFFF;
  --line:#C9E6E1;
  --foot:#0B3D38;

  --gs-bg:#EEF4F3;
  /* --gs-paper = 記事ページのコンテンツ面（白い紙）。--gs-card はその上に置くカードの面。
     既定（一覧・検索・詳細）はカードが白／背景がグレーで、body.gs-paper のページだけ
     紙=白／カード=淡い面へ反転する。 */
  --gs-paper:#FFFFFF;
  --gs-card:#FFFFFF;
  --gs-border:#C9E6E1;
  --gs-border-soft:#DCEFEB;
  --gs-ink:#10242B;
  --gs-mute:#5C7280;
  --gs-soft-mute:#7C8F9A;   /* 罫・区切り・装飾だけ（文字には使わない: 白地で 3.0 とコントラスト不足。文字は --gs-mute） */
  --gs-accent:#0F766E;
  --gs-accent-soft:rgba(15,118,110,.10);
  --gs-watermark:#DCEFEB;

  background:var(--bg) !important;
}

/* ==== 記事ページの紙レイヤ ====
   記事系（解説・ガイド・法務・用語集）は本文が地の色に直接乗るため、グレー地だと黒文字がくすむ。
   body に `gs-paper` を付けたページだけ、コンテンツ層 .gs-main を白い「紙」にする。
   - PC: 紙は max-width で中央寄せ（各テンプレートが --gs-paper-w = コンテンツ列 + 56px を宣言。既定 956px）。
   - スマホ(<992px): 紙を全幅にして body ごと白にする。
   - 紙の上では白いカードが地に溶けるので --gs-card を淡い面へ反転（カード側は var(--gs-card) を見るだけ）。 */
body.gs-paper{
  --gs-card:#F4F8F7;
  --gs-border-soft:#E1ECE9;
}
body.gs-paper .gs-main{
  background:var(--gs-paper);
  max-width:var(--gs-paper-w, 956px);
  margin:0 auto;
  box-shadow:0 0 0 1px rgba(16,36,43,.06), 0 20px 44px -36px rgba(16,36,43,.5);
}
@media (max-width:991.98px){
  body.gs-paper{ background:var(--gs-paper) !important; }
  body.gs-paper .gs-main{ max-width:none; box-shadow:none; }
}

.gs-wrap{ max-width:1340px; margin:0 auto; padding:0 32px; }

/* ---- top bar ---- */
.gs-topbar{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--line); }
.gs-topbar-in{ position:relative; max-width:1340px; margin:0 auto; padding:0 32px; height:74px; display:flex; align-items:center; gap:30px; }
.gs-logo{ display:flex; align-items:center; gap:9px; text-decoration:none; flex-shrink:0; }
.gs-logo-img{ height:52px; width:auto; display:block; }
.gs-logo-mark{ width:38px; height:38px; border-radius:50%; background:var(--soft); border:1.5px solid var(--brand);
  display:flex; align-items:center; justify-content:center; }
.gs-logo-mark .icon{ width:21px; height:21px; color:var(--g); }
.gs-logo-text{ font-size:1.45rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.gs-logo-text b{ color:var(--g); font-weight:800; }
.gs-nav{ display:flex; gap:24px; }
.gs-nav a{ font-size:.92rem; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap; transition:color .15s; }
.gs-nav a:hover{ color:var(--g); }
.gs-nav a.is-active{ color:var(--g); position:relative; }
.gs-nav a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-26px; height:3px;
  background:var(--brand); border-radius:3px 3px 0 0; }
.gs-nav a.gs-nav-sub{ margin-left:auto; font-weight:500; color:var(--mute); }

/* ---- nav dropdown groups（柱にメガメニューを付けるときに使う。DOM は参考実装と同じ 1 カラム） ---- */
.gs-nav-group{ position:relative; display:flex; align-items:center; }
.gs-nav-trigger{ display:inline-flex; align-items:center; gap:6px;
  font-family:inherit; font-size:.92rem; font-weight:600; color:var(--ink);
  white-space:nowrap; background:none; border:none; padding:0; cursor:pointer;
  transition:color .15s; }
.gs-nav-trigger:hover{ color:var(--g); }
.gs-nav-group.is-active > .gs-nav-trigger{ color:var(--g); }
.gs-nav-group.is-active::after{ content:""; position:absolute; left:0; right:0;
  bottom:-26px; height:3px; background:var(--brand); border-radius:3px 3px 0 0; }
.gs-nav-caret{ display:block; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; transition:transform .2s ease; }

/* ==== メガメニュー（全タブ共通の 1 カラム。セクションを縦に積む）====
     .gs-mm-grp    セクション（2 つ以上あるタブだけ .gs-mm-grp-h の見出しを付ける）
     .gs-mm-tile   アイコン＋説明つきの主要導線
     a             説明なしのテキストリンク（.gs-mm-sub は二次リンク）
   .gs-nav-menu は透明の位置決め箱で、padding-top がトリガーとパネルの隙間を埋めるホバーの橋渡しを兼ねる。
   実体のパネルは内側の .gs-mm-body で、背景・枠・スクロールはそちらが持つ。 */
.gs-nav-menu{ position:absolute; top:100%; left:0; width:310px;
  padding-top:18px; display:none; z-index:1001; }
.gs-nav-group:hover > .gs-nav-menu,
.gs-nav-group:focus-within > .gs-nav-menu,
.gs-nav-group.is-open > .gs-nav-menu{ display:block; }
.gs-nav-group:hover .gs-nav-caret,
.gs-nav-group:focus-within .gs-nav-caret,
.gs-nav-group.is-open .gs-nav-caret{ transform:rotate(180deg); }
.gs-mm-body{ display:flex; flex-direction:column; padding:10px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 26px 40px -22px rgba(16,36,43,.45);
  max-height:calc(100vh - 110px); overflow-y:auto; overscroll-behavior:contain; }
.gs-mm-i{ width:19px; height:19px; stroke:currentColor; stroke-width:1.85; fill:none;
  stroke-linecap:round; stroke-linejoin:round; display:block; }
.gs-mm-grp{ display:flex; flex-direction:column; }
.gs-mm-grp + .gs-mm-grp{ margin-top:8px; padding-top:10px; border-top:1px solid var(--line); }
.gs-mm-grp-h{ display:flex; align-items:center; gap:8px; margin:2px 0 6px; }
.gs-mm-grp-ic{ flex:0 0 auto; width:26px; height:26px; border-radius:7px;
  background:var(--soft); color:var(--g); display:grid; place-items:center; }
.gs-mm-grp-t{ font-size:.73rem; font-weight:800; color:var(--ink); }
.gs-mm-body a{ display:block; padding:7px 10px; border-radius:9px;
  font-size:.86rem; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-mm-body a:hover{ background:var(--soft); color:var(--g); }
.gs-mm-body a.is-active{ background:var(--soft); color:var(--g); }
.gs-mm-body a.is-active::after{ display:none; }
.gs-mm-body a.gs-mm-sub{ font-weight:500; color:#3B4A52; font-size:.83rem; }
.gs-mm-body a.gs-mm-tile{ display:flex; align-items:center; gap:12px;
  padding:8px 10px; white-space:normal; overflow:visible; }
.gs-mm-tile .gs-mm-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:9px;
  background:var(--soft); color:var(--g); display:grid; place-items:center; }
.gs-mm-tile .gs-mm-tt{ display:block; font-size:.87rem; font-weight:700; color:var(--ink); line-height:1.3; }
.gs-mm-tile .gs-mm-td{ display:block; font-size:.72rem; font-weight:500; color:var(--mute); }
.gs-mm-body a.gs-mm-tile:hover .gs-mm-tt,
.gs-mm-body a.gs-mm-tile.is-active .gs-mm-tt{ color:var(--g); }

/* 地方アコーディオン（施設のエリア）: 47 都道府県を一度に並べるとメニューが極端に長くなるので、
   地方（大区分）をクリックしたときだけ都道府県を出す。<details name> により同時に開くのは 1 地方だけ。 */
.gs-mm-region-h{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px; border-radius:9px; cursor:pointer; list-style:none;
  font-size:.86rem; font-weight:600; color:var(--ink);
  transition:background .15s ease, color .15s ease; }
.gs-mm-region-h::-webkit-details-marker{ display:none; }
.gs-mm-region-h:hover{ background:var(--soft); color:var(--g); }
.gs-mm-region[open] > .gs-mm-region-h{ color:var(--g); }
.gs-mm-region-c{ flex:0 0 auto; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; transition:transform .2s ease; }
.gs-mm-region[open] > .gs-mm-region-h .gs-mm-region-c{ transform:rotate(180deg); }
.gs-mm-region-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 6px; padding:2px 0 6px 10px; }
.gs-mm-body .gs-mm-region-list a{ padding:5px 8px; font-size:.82rem; font-weight:500; }

/* ---- mobile nav toggle (hamburger) ---- */
.gs-nav-toggle{ display:none; width:42px; height:42px; flex-shrink:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0;
  background:var(--soft); border:1px solid var(--line); border-radius:11px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease; }
.gs-nav-toggle:hover{ background:var(--tint); border-color:var(--brand); }
.gs-nav-toggle-bar{ width:19px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .2s ease, opacity .15s ease; }

@media (max-width:1100px){
  .gs-nav-toggle{ display:flex; margin-left:auto; }
  .gs-nav{
    position:absolute; top:100%; right:0;
    flex-direction:column; gap:2px; align-items:stretch;
    min-width:236px; padding:10px;
    background:#fff; border:1px solid var(--line); border-top:none;
    border-radius:0 0 16px 16px;
    box-shadow:0 26px 40px -24px rgba(16,36,43,.4);
    display:none;
  }
  .gs-topbar.nav-open .gs-nav{ display:flex; left:0; right:0; min-width:0; width:auto;
    max-height:calc(100dvh - 62px); overflow-y:auto;
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
  .gs-nav a{ padding:11px 14px; border-radius:10px; font-size:.95rem; }
  .gs-nav a:hover{ background:var(--soft); color:var(--ink); }
  .gs-nav a.is-active{ background:var(--soft); }
  .gs-nav a.is-active::after{ display:none; }
  .gs-nav a.gs-nav-sub{ margin-left:0; margin-top:6px; border-top:1px solid var(--line); border-radius:0 0 10px 10px; }
  .gs-nav-group{ flex-direction:column; align-items:stretch; }
  .gs-nav-group.is-active::after{ display:none; }
  .gs-nav-trigger{ justify-content:space-between; padding:11px 14px;
    border-radius:10px; font-size:.95rem; }
  .gs-nav-trigger:hover{ background:var(--soft); color:var(--ink); }
  .gs-nav-group.is-active > .gs-nav-trigger{ background:var(--soft); color:var(--g); }
  .gs-nav-menu{ position:static; width:auto; padding:0 0 4px 10px; }
  .gs-mm-body{ padding:0; background:none; border:none; border-radius:0;
    box-shadow:none; max-height:none; overflow:visible; }
  .gs-nav-group:hover > .gs-nav-menu,
  .gs-nav-group:focus-within > .gs-nav-menu{ display:none; }
  .gs-nav-group.is-open > .gs-nav-menu{ display:block; }
  .gs-nav-group:hover .gs-nav-caret,
  .gs-nav-group:focus-within .gs-nav-caret{ transform:none; }
  .gs-nav-group.is-open .gs-nav-caret{ transform:rotate(180deg); }
  .gs-topbar.nav-open .gs-nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .gs-topbar.nav-open .gs-nav-toggle-bar:nth-child(2){ opacity:0; }
  .gs-topbar.nav-open .gs-nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .gs-mm-grp + .gs-mm-grp{ margin-top:6px; padding-top:8px; }
  .gs-mm-body a{ padding:11px 12px; font-size:.92rem; }
  .gs-mm-body a.gs-mm-sub{ font-size:.9rem; }
  .gs-mm-body a.gs-mm-tile{ padding:11px 10px; }
  .gs-mm-tile .gs-mm-ic{ width:32px; height:32px; }
  .gs-mm-region-h{ padding:11px 12px; font-size:.92rem; }
  .gs-mm-region-list{ gap:0 8px; padding:2px 0 6px 8px; }
  .gs-mm-body .gs-mm-region-list a{ padding:9px 8px; font-size:.88rem; }
}

/* ---- footer ---- */
.gs-foot h2,.gs-foot h3,.gs-foot h4{ border-bottom:none; }
.gs-foot{ background:var(--foot); color:#AEC7C3; margin-top:64px; }
.gs-foot-in{ max-width:1340px; margin:0 auto; padding:50px 32px 0; }
.gs-foot-grid{ display:grid; grid-template-columns:1.9fr repeat(2,1fr); gap:28px; }
.gs-foot-logo{ display:inline-block; text-decoration:none; }
.gs-foot-logo img{ width:236px; max-width:100%; height:auto; display:block; }
.gs-foot-logo-text{ font-size:1.35rem; font-weight:800; color:#fff; letter-spacing:-.01em; }
.gs-foot-logo-text b{ color:#5EEAD4; font-weight:800; }
.gs-foot-about{ font-size:.77rem; line-height:1.85; color:#8FB1AC; margin:15px 0 0; max-width:26em; }
.gs-foot-sns{ display:flex; gap:9px; margin-top:16px; }
.gs-foot-sns a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:center; color:#CDE3E0; transition:background .15s, color .15s; }
.gs-foot-sns a:hover{ background:var(--g); color:#fff; }
.gs-foot-sns .icon{ width:15px; height:15px; }
.gs-foot-col h3{ font-size:.82rem; font-weight:800; color:#fff; margin:0 0 14px; }
.gs-foot-col a, .gs-foot-col .gs-foot-soon{ display:block; font-size:.78rem; color:#8FB1AC; text-decoration:none; margin-bottom:11px; }
.gs-foot-col a:hover{ color:#fff; }
.gs-foot-col .gs-foot-soon{ opacity:.7; }
.gs-foot-note{ font-size:.72rem; line-height:1.8; color:#9BC0BA; margin:34px 0 0; }
.gs-foot-note a{ color:#AEC7C3; }
.gs-foot-bar{ border-top:1px solid rgba(255,255,255,.1); margin-top:18px; padding:18px 0;
  text-align:center; font-size:.74rem; color:#9BC0BA; }
.gs-foot-bar a{ color:#8FB1AC; text-decoration:none; }
.gs-foot-bar a:hover{ color:#fff; }

@media (max-width:992px){
  .gs-wrap{ padding:0 18px; }
  .gs-topbar-in{ padding:0 18px; height:62px; }
  .gs-foot-in{ padding:42px 18px 0; }
  .gs-foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:600px){
  .gs-foot-grid{ grid-template-columns:1fr; gap:20px; }
}

/* ---- form controls ----
   チェックボックス／ラジオの選択色を主色へ揃える（全ページ共通）。 */
input[type="checkbox"], input[type="radio"]{ accent-color:var(--g); }