/* ゆびたん韓国語 サイト共通のデザイン（すべてのページで読み込みます）
   ゆびたん中国語版と同じ作り（丸みのあるカード・丸ゴシックの見出し・指ごとの色分け）で、色を青系にしたもの。
   色を変えたいときは、下の --accent（基調の青）と --bg（背景）を書き換えます。 */
:root{
  --bg:#eef2f8;
  --surface:#ffffff;
  --ink:#14233a;
  --muted:#5b6a80;
  --line:#d4dce8;
  --accent:#1d63c8;
  --accent-ink:#ffffff;
  --accent-soft:#e0ebfa;
  --next:#ffcf3f;
  --miss:#d8473b;
  --ok:#1d63c8;
  --good:#1b8a5a;
  --f-pinky:#f4c7cf;
  --f-ring:#f8dfaa;
  --f-middle:#cbe8bd;
  --f-index:#bfdcf5;
  --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 KR","Apple SD Gothic Neo","Malgun Gothic","Nanum Gothic",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:#5c9bf0;--accent-ink:#071a33;--accent-soft:#1a2c48;--next:#f0c23a;--miss:#ff7a6c;--ok:#5c9bf0;--good:#4cc28e;
    --f-pinky:#5a3940;--f-ring:#5a4b2a;--f-middle:#34502c;--f-index:#2c4760;--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{max-width:var(--wrap,1080px);margin:30px auto 32px;padding:0 16px;font-size:13px;color:var(--muted)}
.sitelinks{display:flex;flex-wrap:wrap;gap:6px 18px}
.sitelinks a{color:var(--muted)}
.sitelinks a:hover{color:var(--ink)}
.copy{flex-basis:100%;font-size:12px;opacity:.85;margin-top:4px;line-height:1.6}