/* ===========================================================================
   Miqto 共通シェル（ヘッダー/ナビ/フッター）
   ---------------------------------------------------------------------------
   ポータル(index.html) と 記事(article.css) の両方から読み込む唯一の正本。
   マークアップの正本は site/partials/header.html / footer.html で、
   server.js が起動時に <!--HEADER--> / <!--FOOTER--> を差し替える。
   ※ 色変数(--soft 等)は読み込み側が定義している前提。
   =========================================================================== */

/* ブランドマーク（ヘッダー/フッター共通・大きめに統一）
   ※ shell.css は index.html のインライン style と article.css の両方より後に読み込まれるため、
     ここで定義するとポータル・記事・フッターすべてに一貫して効く（アイコンが小さい指摘への対応）。 */
.brand{display:inline-flex;align-items:center;gap:.62rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand__mark{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;
  box-shadow:0 10px 24px -8px rgba(11,47,121,.6);flex:none}
.brand__mark img{width:32px;height:32px;display:block}
.brand__name{font-weight:800;font-size:1.35rem;letter-spacing:-.01em}
@media(max-width:760px){
  .brand__mark{width:38px;height:38px;border-radius:11px}
  .brand__mark img{width:29px;height:29px}
  .brand__name{font-size:1.24rem}
}

/* ヘッダーのナビ */
.nav{display:flex;align-items:center;gap:1.15rem;font-size:.86rem}
.nav a{color:var(--soft)}
.nav a:hover{color:#fff;text-decoration:none}
.nav__cta{color:#bfe9ec!important;border:1px solid rgba(27,199,206,.4);background:rgba(46,111,242,.16);
  padding:.3rem .8rem;border-radius:999px;font-weight:700}
.nav__cta:hover{background:rgba(46,111,242,.3);border-color:rgba(27,199,206,.7)}
@media(max-width:760px){
  .top__in{flex-wrap:wrap;gap:.5rem;row-gap:.7rem}
  .nav{width:100%;gap:.9rem;font-size:.8rem;flex-wrap:wrap;justify-content:flex-start}
  .nav__cta{margin-left:auto}
}

/* フッター */
footer,.ft{position:relative;z-index:2;border-top:1px solid var(--line);margin-top:auto;background:rgba(255,255,255,.015)}
.ft__grid{display:grid;gap:1.6rem 2rem;padding-block:2.2rem 1.6rem;
  grid-template-columns:1.4fr repeat(3,1fr)}
@media(max-width:900px){.ft__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft__grid{grid-template-columns:1fr;gap:1.4rem}}
.ft__brand .brand{margin-bottom:.6rem}
.ft__lead{margin:0;font-size:.8rem;line-height:1.8;color:var(--faint);max-width:34ch}
.ft__col{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.ft__h{font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--pri2);text-transform:uppercase;margin-bottom:.15rem}
.ft__col a{font-size:.82rem;color:var(--soft);line-height:1.55}
.ft__col a:hover{color:#fff;text-decoration:none}
.ft__sub{display:block;font-size:.72rem;color:var(--faint)}
.ft__btm{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;justify-content:space-between;align-items:center;
  padding-block:1rem 1.5rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--faint)}
.ft__note{color:var(--faint)}
.ft__in{padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;font-size:.8rem;color:var(--faint)}