/* ── Bangkok Times のフッター ──────────────────────────────
   本体（BaseLayout.astro）と同じ中身を、素の CSS で作り直したもの。
   **色と書体は置かれたサイトから借りる**（下の6つの変数）。既定値は
   Bangkok Times の色なので、何も繋がなくても単独で出る。
   目印は上端の虹の帯だけ。面ではなく線なので下地とぶつからない。 */
.btf{
  --btf-bg:#ffefdb;--btf-surface:#fffaf2;--btf-line:#ffe4c4;
  --btf-ink:#2b2138;--btf-ink-2:#544968;--btf-ink-3:#8b81a3;
  --btf-accent:#ea3c56;
  /* 丸章の地に混ぜる色の量。暗い配色では濃いめにしないと沈む */
  --btf-tint:11%;
  position:relative;margin:48px 0 0;padding:36px 0 26px;
  background:var(--btf-bg);color:var(--btf-ink);
  font-size:15px;line-height:1.8;text-align:left}
.btf::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#ff9f1c,#ff5d73,#2ec4b6,#2bb7f0)}
/* 上の余白を打ち消す。すぐ上の欄がもう下余白を持っている場所で使う。
   ＊ 虹の帯は必ず出すこと ＊
     はじめは付録トップ（/guide/ /provinces/）だけ帯をやめ、細い線1本に
     していた。すると**シェア欄とフッターが同じ地色の1枚の塊になり、
     どこからがフッターなのか分からなくなった。**姉妹3つと同じように、
     帯をフッターの上端に置き、地色を一段落とすほうが切れ目が読める。 */
.btf--tight{margin-top:0}
.btf *{box-sizing:border-box}
.btf .btf-in{max-width:1024px;margin:0 auto;padding:0 16px;
  display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:820px){.btf-in{grid-template-columns:minmax(16rem,22rem) minmax(0,1fr);gap:32px}}
.btf h2{margin:0;font-size:21px;font-weight:800;letter-spacing:.01em;line-height:1.4}
.btf h2 a{color:var(--btf-ink);text-decoration:none;transition:color .18s}
.btf h2 a:hover{color:var(--btf-accent)}
.btf p{margin:0}
.btf .btf-desc{margin-top:11px;font-size:13px;color:var(--btf-ink-2);max-width:34em}
.btf .btf-note{margin-top:13px;font-size:12px;font-weight:700;color:var(--btf-ink-3)}

/* SNS。丸いボタン。指を乗せたら浮く */
.btf .btf-sns{display:flex;flex-wrap:wrap;gap:10px;margin-top:17px;padding:0;list-style:none}
.btf .btf-sns a{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;
  background:var(--btf-surface);border:1px solid var(--btf-line);color:var(--btf-ink);
  text-decoration:none;transition:transform .18s,background .18s,color .18s}
.btf .btf-sns a:hover{transform:translateY(-2px);background:var(--btf-ink);color:var(--btf-bg)}
.btf .btf-sns svg{width:17px;height:17px;fill:currentColor}

/* 連絡先とページのリンク。性質ごとに行を分けてある（本体と同じ考え方）。
   ひと続きにすると画面幅ごとに切れ目が変わり、アドレスが行末で割れる */
.btf .btf-links{display:grid;gap:6px;margin-top:15px;font-size:12px}
.btf .btf-links p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.btf .btf-links a{color:var(--btf-ink-2);text-decoration:none;font-weight:500;
  text-underline-offset:3px;transition:color .18s}
.btf .btf-links a:hover{color:var(--btf-accent);text-decoration:underline}
.btf .btf-links a.btf-strong{color:var(--btf-ink);font-weight:700}
.btf .btf-mail{word-break:break-all}

/* Sections の丸章。下地に色を1割混ぜた地＋その色の枠と字にしてある。
   ベタ塗りだと、暗いサイトでも明るいサイトでも、そこだけ貼り紙に見える */
.btf .btf-secs h3{margin:0 0 11px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--btf-ink-3)}
.btf .btf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.btf .btf-chips+.btf-chips{margin-top:10px}
.btf .btf-chips a{display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;
  text-decoration:none;color:var(--btf-h,var(--btf-ink-2));
  background:var(--btf-surface);
  background:color-mix(in srgb,var(--btf-h,var(--btf-ink-3)) var(--btf-tint),var(--btf-surface));
  border:1px solid var(--btf-line);
  border-color:color-mix(in srgb,var(--btf-h,var(--btf-ink-3)) 32%,transparent);
  transition:transform .18s,background .18s,color .18s,border-color .18s}
.btf .btf-chips a:hover{transform:translateY(-2px);
  background:var(--btf-h,var(--btf-ink-2));border-color:var(--btf-h,var(--btf-ink-2));
  color:var(--btf-bg)}
.btf .btf-chips img{width:14px;height:14px;border-radius:4px;flex:none}
.btf .btf-c-coral{--btf-h:#c22a42}
:root[data-theme="dark"] .btf .btf-c-coral{--btf-h:#ff8a9d}
.btf .btf-c-jade{--btf-h:#0b7267}
:root[data-theme="dark"] .btf .btf-c-jade{--btf-h:#4fd6c4}
.btf .btf-c-cobalt{--btf-h:#2e429f}
:root[data-theme="dark"] .btf .btf-c-cobalt{--btf-h:#93a7e6}
.btf .btf-c-sky{--btf-h:#076a95}
:root[data-theme="dark"] .btf .btf-c-sky{--btf-h:#5cc9f5}
.btf .btf-c-mango{--btf-h:#9e5700}
:root[data-theme="dark"] .btf .btf-c-mango{--btf-h:#f0ad4b}
.btf .btf-c-rose{--btf-h:#a32a6d}
:root[data-theme="dark"] .btf .btf-c-rose{--btf-h:#f08ac2}
.btf .btf-c-orchid{--btf-h:#6b3f9b}
:root[data-theme="dark"] .btf .btf-c-orchid{--btf-h:#c39ae8}
.btf .btf-c-iris{--btf-h:#3e2a80}
:root[data-theme="dark"] .btf .btf-c-iris{--btf-h:#b3a4f0}

/* 11px の細かい字なので、薄い灰色（--btf-ink-3）では読めない。
   目立たせたくはないが、読めない字を置く意味はないので中間の濃さにする */
.btf .btf-copy{max-width:1024px;margin:26px auto 0;padding:17px 16px 0;
  border-top:1px solid var(--btf-line);font-size:11px;color:var(--btf-ink-2)}

/* ＊ サイドバーのあるアプリでは、本文の列の中に置くこと ＊
     付録3つとも、サイドバーは画面に貼り付いたまま動かない
     （position:fixed / sticky + height:100vh）。全幅のフッターを
     その下に敷くと、**左端がサイドバーの下に潜って読めなくなる**。
     タイ語ラボでは実際に著作権の行がほぼ隠れていた。
     本文の列（#main / .main）の中に入れれば、サイドバーは出したまま、
     フッターはちょうど本文の幅で出る。狭い画面ではサイドバーが
     引き出しに変わるので、そのときは自動で全幅になる。 */

/* 暗い配色では、丸章の地に混ぜる色を濃くする。地・線・字は向こうの
   変数がそのまま入れ替わるので、ここで書き足すことは無い */
:root[data-theme="dark"] .btf{--btf-tint:20%}

/* thai-lab の色と書体を借りる */
.btf{--btf-bg:var(--bg-3,#eef1f7);--btf-surface:var(--bg-2,#fff);--btf-line:var(--line,#e2e6ef);--btf-ink:var(--fg,#16181d);--btf-ink-2:var(--fg-2,#4a505c);--btf-ink-3:var(--fg-3,#8a90a0);--btf-accent:var(--red,#a51931);font-family:var(--sans,inherit)}
@media(max-width:860px){.btf{padding-bottom:calc(26px + 62px + env(safe-area-inset-bottom))}}