/* たる坊ワークス 全ページ共通：色の定義・基本スタイル・共通ヘッダー／フッター。
   ツール本体の見た目は各ページの <style> に置く（ここに足さない）。
   そっとあそびも読むので、ここを直したら /sotto/ の親メニューも見ておく。 */

:root{
  /* 色は note の「ツール」の青の1色だけ。塗り（帯・縁・グラフ）と、文字に使える濃い色と、淡い面の3組。
     棚ごとに色を分けた時期があったが、トップで色が多すぎて統一感が消えたのでやめた（docs/site-review.md §3） */
  --brand:#2a8fad;        /* 塗り（帯・縁・グラフ）。文字には使わない（白地で 4.5:1 に届かない） */
  --accent:#1d6a86;       /* リンク・ボタン。白地で 6.07:1、白文字を載せても 6.07:1 */
  --accent-soft:#e6f1f5;
  --paper:#ffffff;
  --panel:#f2f6f8;
  --ink:#1a1a1a;
  --sub:#595959;          /* 補足の文字はこれ一本。白地で 7.0:1、panel 上で 6.5:1 */
  --line:#d9e1e6;
  --page-w:680px;         /* 本文の幅。ヘッダー・フッターの左端をこれに揃える。ページごとに上書きする */
  --gutter:max(22px, calc((100% - var(--page-w)) / 2));
  --font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP","Noto Sans CJK JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--paper);color:var(--ink);line-height:1.7}
a{color:var(--accent)}

/* 共通ヘッダー：白地の上端に、青のかすれた帯（note のサムネの手で塗った縁の雰囲気）。
   帯の形は rough-band.svg（scripts/make_rough.py で作る）をマスクにして、色は --brand で塗る */
.site-header{position:relative;border-bottom:1px solid var(--line);background:var(--paper);padding:22px var(--gutter) 12px}
.site-header::before{
  content:"";position:absolute;left:0;right:0;top:0;height:14px;background:var(--brand);
  -webkit-mask:url(/assets/rough-band.svg) repeat-x 0 0/480px 14px;
          mask:url(/assets/rough-band.svg) repeat-x 0 0/480px 14px;
}
.site-logo{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-weight:700;font-size:17px;line-height:1.4}
.site-header h1{font:inherit}
.site-logo img{display:block;width:28px;height:28px}
.site-logo img.wordmark{width:auto;height:21px}   /* 「たる坊ワークス」の文字（07にくまるフォントの字形。scripts/make_logo.py） */
.site-logo:hover{opacity:.75}

/* 手で塗った縦の一塗り（見出しの印・カードの縁）。付けたい要素に class="rough-mark" を足すと左に出る */
.rough-mark{position:relative;padding-left:16px}
.rough-mark::before{
  content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:7px;background:var(--brand);
  -webkit-mask:url(/assets/rough-stroke.svg) no-repeat 0 0/100% 100%;
          mask:url(/assets/rough-stroke.svg) no-repeat 0 0/100% 100%;
}

/* 共通フッター。運営者情報などのリンクは .site-footer-nav に足す */
.site-footer{border-top:1px solid var(--line);padding:20px var(--gutter) 40px;font-size:13px;color:var(--sub)}
.site-footer-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:8px}
.site-footer-nav a{color:var(--sub)}

/* 投資系ページの免責。共通フッターの直前に置く */
.disclaimer{border-top:1px solid var(--line);padding:18px var(--gutter);font-size:13px;color:var(--sub);line-height:1.8}
.disclaimer > * + *{margin-top:6px}

/* 記事のパンくず */
.crumb{font-size:13px;color:var(--sub)}
.crumb a{color:var(--accent)}

/* 記事の公開日・更新日（見出しの下）。本文や手順を変えたら更新日を上げる。見た目だけの変更では上げない */
.dates{margin-top:8px;font-size:13px;color:var(--sub)}