/* ゆびたんスペイン語 サイト共通のデザイン（すべてのページで読み込みます）
   ゆびたん中国語版と同じ作り（丸みのあるカード・丸ゴシックの見出し・指ごとの色分け）で、色を青系にしたもの。
   色を変えたいときは、下の --accent（基調の青）と --bg（背景）を書き換えます。 */
:root{
  --bg:#eef2f8;
  --surface:#ffffff;
  --ink:#14233a;
  --muted:#5b6a80;
  --line:#d4dce8;
  --accent:#c0272d;
  --accent-ink:#ffffff;
  --accent-soft:#fbe4e4;
  --next:#ffcf3f;
  --miss:#d8473b;
  --ok:#c0272d;
  --good:#1b8a5a;
  /* 指ごとの色：ゆびたん本体と同じ（小指＝紫、薬指＝青、中指＝緑、人差し指＝だいだい） */
  --f-pinky:#dccdf0;
  --f-ring:#c3daf2;
  --f-middle:#c4e5d0;
  --f-index:#f7d3b8;
  --f-thumb:#e3e6ea;
  --key-ink:#1f2b3d;
  --shadow:0 1px 2px rgba(20,35,58,.06),0 6px 20px rgba(20,35,58,.07);
  --font-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
  --font-body:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --font-ko:"Noto Sans","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1520;--surface:#172133;--ink:#e3eaf4;--muted:#93a2b8;--line:#2b3a50;
    --accent:#f08a84;--accent-ink:#2a0708;--accent-soft:#3a1a1c;--next:#f0c23a;--miss:#ff7a6c;--ok:#f08a84;--good:#4cc28e;
    --f-pinky:#4a3d63;--f-ring:#2d4a66;--f-middle:#2f5040;--f-index:#66462f;--f-thumb:#2c3440;--key-ink:#e3eaf4;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ko{font-family:var(--font-ko)}

/* ---- 上のバー：ロゴと、ページへのリンク ---- */
.topbar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-in{max-width:var(--wrap,1080px);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-mark{width:36px;height:36px;border-radius:11px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:19px;flex:none}
.logo-txt{font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:.02em;line-height:1.1}
.logo-txt small{display:block;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.topbar .spacer{flex:1}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px;flex-wrap:wrap}
.seg a{border-radius:999px;padding:5px 14px;font-weight:700;font-size:14px;color:var(--muted);text-decoration:none}
.seg a[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.seg a:not([aria-current]):hover{color:var(--ink)}
.chip{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
@media (max-width:560px){.logo-txt small,.topbar .chip{display:none}.seg a{padding:4px 10px;font-size:13px}}

/* ---- ページの先頭へ戻るボタン ---- */
#toTop{position:fixed;right:18px;bottom:18px;z-index:60;width:46px;height:46px;border:0;border-radius:14px;background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{filter:brightness(1.08)}
#toTop svg{display:block}
@media (prefers-reduced-motion:reduce){#toTop{transition:none}}

/* ---- ページ下のリンク（ゆびたん本体と同じ作り：濃い色の帯に青海波の模様。色はスペイン語版の青） ---- */
.sitefoot{margin-top:36px;background:#4a0d14 url(seigaiha.png) repeat;background-size:40px 20px;color:#dfe8f7;
  border-top:3px solid #e2b843;box-shadow:0 -3px 0 var(--accent);font-size:13px}
.sitefoot .sitelinks{max-width:var(--wrap,1080px);margin:0 auto;padding:22px 16px 26px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px}
.sitefoot .sitelinks a{color:#f3f7ff;text-decoration:none}
.sitefoot .sitelinks a:hover{color:#fff;text-decoration:underline}
.copy{flex-basis:100%;text-align:center;font-size:12px;opacity:.85;margin-top:6px;line-height:1.6}