:root {
  --bg: #f6f8fb; --surface: #ffffff; --text: #1f2933; --muted: #5f6b7a; --line: #e2e8f0;
  --brand: #2f5d8a; --brand-weak: #e8f0f8; --ok: #1f8a4c; --ok-weak: #e6f5ec; --ng: #c0392b; --ng-weak: #fbeaea;
  --ios: #0a84ff; --android: #2bb673;
  --surface-2: #fbfcfe; --code: #f1f4f8; --footer: #eef2f7; --cta-from: #f2f7fc; --cta-border: #cfe0f1; --mark: #fff1a8; --warn: #a86400; --warn-weak: #fff4e0;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 106.25%; } /* 17px */
@media (min-width: 768px) { html { font-size: 112.5%; } } /* 18px */
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; line-height: 1.85; font-size: 1rem; }
a { color: var(--brand); }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.site-header .wrap { padding-top: 12px; padding-bottom: 12px; }
.site-title { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.layout { padding-top: 20px; padding-bottom: 32px; }
h1 { font-size: 1.35rem; line-height: 1.5; margin: 8px 0 16px; }
h2 { font-size: 1.15rem; margin: 32px 0 12px; padding-left: 10px; border-left: 4px solid var(--brand); }
.hero { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.hero h1 { margin-top: 0; }
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.set-list, .question-list { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.set-list li + li, .question-list li + li { border-top: 1px solid var(--line); }
.set-list a, .question-list a { display: flex; gap: 12px; align-items: baseline; padding: 12px 16px; text-decoration: none; color: var(--text); }
.set-list a:hover, .question-list a:hover { background: var(--brand-weak); }
.set-title { flex: 1; font-weight: 600; }
.set-count { color: var(--muted); font-size: .9rem; }
.qnum { flex: none; width: 3.5em; font-weight: 700; color: var(--brand); }
.qsum { color: var(--muted); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.question { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.question h1 { font-size: 1rem; color: var(--muted); font-weight: 600; margin-top: 0; }
.q-body ul { padding-left: 1.2em; }
.q-body img, .explanation img { display: block; margin: 12px auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.q-body table, .explanation table { border-collapse: collapse; margin: 12px 0; display: block; overflow-x: auto; }
.q-body th, .q-body td, .explanation th, .explanation td { border: 1px solid var(--line); padding: 4px 8px; }
.q-body pre, .explanation pre { background: var(--code); padding: 12px; border-radius: 6px; overflow-x: auto; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.choice { min-width: 64px; padding: 10px 18px; font-size: 1.1rem; font-weight: 700; border: 2px solid var(--brand); border-radius: 10px; background: var(--surface); color: var(--brand); cursor: pointer; font-family: inherit; }
.choice:hover { background: var(--brand-weak); }
.choice.is-correct { background: var(--ok); border-color: var(--ok); color: #fff; }
.choice.is-wrong { background: var(--ng-weak); border-color: var(--ng); color: var(--ng); }
.result { min-height: 1.8em; margin: 4px 0; font-weight: 700; }
.result.ok { color: var(--ok); } .result.ng { color: var(--ng); }
.answer { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; background: var(--surface-2); }
.answer summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--brand); }
.answer .correct { margin-top: 0; padding: 8px 12px; background: var(--ok-weak); border-radius: 8px; }
.source { font-size: .85rem; color: var(--muted); margin: 16px 0 0; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 20px; }
.pager a { text-decoration: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.about p { margin: 0; }
/* ---- アプリへの誘導 ---- */
.app-cta { margin: 32px 0; background: linear-gradient(135deg, var(--cta-from), var(--surface)); border: 1px solid var(--cta-border); border-radius: 16px; padding: 20px; }
.app-cta-inline { margin: 20px 0 0; }
.app-cta-head { display: flex; gap: 14px; align-items: center; }
.app-cta-head img { border-radius: 14px; flex: none; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.app-cta-title { font-weight: 700; font-size: 1.1rem; margin: 0; line-height: 1.5; }
.app-cta-sub { margin: 2px 0 0; font-size: .9rem; color: var(--muted); line-height: 1.6; }
.app-cta-points { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 520px) { .app-cta-points { grid-template-columns: 1fr; } }
.app-cta-points li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; line-height: 1.6; }
.app-cta-points strong { display: block; color: var(--brand); }
.app-cta-points strong::before { content: "✓ "; color: var(--ok); }
.app-cta-points span { font-size: .88rem; color: var(--muted); }
.app-cta-buttons { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.store-btn { display: inline-flex; flex-direction: column; justify-content: center; min-width: 168px; padding: 8px 18px; border-radius: 10px; background: #111; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.store-btn small { font-size: .65rem; font-weight: 400; opacity: .85; }
.store-btn.store-btn-sub { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.hero-app { margin: 12px 0 0; padding: 10px 14px; background: var(--brand-weak); border-radius: 10px; font-size: .95rem; }
/* 画面下は AdSense のアンカー広告と重なるため、上に固定する */
.app-bar { position: fixed; left: 8px; right: 8px; top: 8px; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.app-bar[hidden] { display: none; }
.app-bar img { border-radius: 9px; flex: none; }
.app-bar p { flex: 1; margin: 0; line-height: 1.35; font-size: .85rem; }
.app-bar p span { display: block; color: var(--muted); font-size: .78rem; }
.app-bar-btn { flex: none; padding: 8px 16px; border-radius: 999px; background: var(--brand); color: #fff; text-decoration: none; font-weight: 700; }
.app-bar-close { flex: none; border: 0; background: none; color: var(--muted); font-size: 1.2rem; padding: 4px 6px; cursor: pointer; }
body.has-app-bar { padding-top: 64px; }
.btn { display: inline-block; padding: 6px 16px; border-radius: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; }
.btn.ios { background: var(--ios); } .btn.android { background: var(--android); }
.site-footer { background: var(--footer); border-top: 1px solid var(--line); padding: 20px 0; font-size: .85rem; color: var(--muted); }
.site-footer .note { margin: 0 0 8px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0; }
.copy { margin: 0; }
@media (max-width: 480px) {
  h1 { font-size: 1.2rem; }
  .question, .hero { padding: 16px; }
  .choice { flex: 1 1 calc(50% - 10px); }
}

/* ---- 問題ページ ---- */
.progress { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; font-size: .9rem; color: var(--muted); }
.progress-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--brand); }
.choices { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 8px; }
.choices.choices-short { flex-direction: row; flex-wrap: wrap; }
.choice { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; padding: 12px 14px; text-align: left; font-size: 1rem; font-weight: 400; line-height: 1.6; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.choices-short .choice { width: auto; flex: 1 1 calc(25% - 10px); justify-content: center; align-items: center; }
.choice:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-weak); }
.choice:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.choice:disabled { cursor: default; }
.choice-key { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; background: var(--brand-weak); color: var(--brand); font-weight: 700; }
.choice-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.choice-text img { max-height: 160px; }
.choice-mark { flex: none; margin-left: auto; font-weight: 700; }
.choice.is-correct { border-color: var(--ok); background: var(--ok-weak); color: var(--text); }
.choice.is-correct .choice-key { background: var(--ok); color: #fff; }
.choice.is-correct .choice-mark::after { content: "○"; color: var(--ok); }
.choice.is-wrong { border-color: var(--ng); background: var(--ng-weak); color: var(--text); }
.choice.is-wrong .choice-key { background: var(--ng); color: #fff; }
.choice.is-wrong .choice-mark::after { content: "×"; color: var(--ng); }
.choice.is-dim { opacity: .55; }
.result { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 0; padding: 12px 16px; border-radius: 10px; min-height: 0; font-weight: 400; }
.result[hidden] { display: none; }
.result.ok { background: var(--ok-weak); color: var(--ok); }
.result.ng { background: var(--ng-weak); color: var(--ng); }
.result strong { font-size: 1.1rem; }
.result-next { margin-left: auto; padding: 8px 16px; border-radius: 8px; background: var(--brand); color: #fff; text-decoration: none; font-weight: 700; }
.explanation > :first-child { margin-top: 0; }
.pager a { flex: 1; text-align: center; }
.pager .up { flex: none; }

/* ---- 一覧 ---- */
.set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; }
.btn-primary { display: inline-block; padding: 10px 20px; border-radius: 10px; background: var(--brand); color: #fff; text-decoration: none; font-weight: 700; }
.set-score { margin: 0; color: var(--muted); font-size: .92rem; }
.set-score[hidden], .link-button[hidden] { display: none; }
.link-button { border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; padding: 0; }
.qmark { flex: none; margin-left: auto; width: 1.5em; text-align: center; font-weight: 700; }
.question-list .is-ok .qmark { color: var(--ok); }
.question-list .is-ng .qmark { color: var(--ng); }
.set-progress { color: var(--ok); font-size: .85rem; }

/* ---- 2カラム（PC は右にサイドバー、スマホは本文の下） ---- */
.content { min-width: 0; }
@media (min-width: 860px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
}
.sidebar { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
@media (min-width: 860px) { .sidebar { margin-top: 0; } }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.side-title { font-size: 1rem; margin: 0 0 10px; padding-left: 8px; border-left: 4px solid var(--brand); }
.side-app { background: linear-gradient(160deg, var(--cta-from), var(--surface) 60%); border-color: var(--cta-border); }
.side-app-head { display: flex; gap: 12px; align-items: center; }
.side-app-head img { flex: none; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.side-app-label { margin: 0; font-size: .75rem; font-weight: 700; color: var(--brand); letter-spacing: .04em; }
.side-app-name { margin: 2px 0 0; font-weight: 700; line-height: 1.45; font-size: .98rem; }
.side-app-lead { margin: 12px 0 8px; font-size: .88rem; line-height: 1.65; }
.side-app-points { list-style: none; margin: 0 0 14px; padding: 0; font-size: .88rem; line-height: 1.6; }
.side-app-points li { padding-left: 1.4em; position: relative; }
.side-app-points li + li { margin-top: 4px; }
.side-app-points li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.side-app-buttons { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.side-app-buttons .store-btn { min-width: 0; text-align: center; align-items: center; }
.side-ad { text-align: center; }
.side-ad-label { margin: 0 0 4px; font-size: .7rem; color: var(--muted); }
.side-sets ul { list-style: none; margin: 0; padding: 0; }
@media (min-width: 860px) { .side-sets ul { max-height: 60vh; overflow-y: auto; } }
.side-sets li + li { border-top: 1px solid var(--line); }
.side-sets a { display: flex; gap: 8px; align-items: baseline; padding: 8px 4px; text-decoration: none; color: var(--text); font-size: .92rem; border-radius: 6px; }
.side-sets a:hover { background: var(--brand-weak); }
.side-sets .set-title { flex: 1; font-weight: 400; }
.side-sets .is-current a { background: var(--brand-weak); color: var(--brand); font-weight: 700; }
.side-more p { margin: 0 0 8px; font-size: .88rem; line-height: 1.7; }
.side-more p:last-child { margin-bottom: 0; }
.side-note { color: var(--muted); }
.year-switch { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .88rem; color: var(--muted); }
.year-switch select { flex: 1; max-width: 260px; padding: 6px 10px; font: inherit; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
@media (min-width: 860px) { .year-switch { display: none; } }

/* ---- 外部サイトへのリンク ---- */
.ext::after, .ext-icon::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .25em; vertical-align: -.05em;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 2h5v5h-1.5V4.6L7 10.1 5.9 9l5.5-5.5H9z M3 4h4v1.5H4.5v6h6V9H12v4H3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 2h5v5h-1.5V4.6L7 10.1 5.9 9l5.5-5.5H9z M3 4h4v1.5H4.5v6h6V9H12v4H3z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ext-icon::before { margin: 0 .2em 0 0; color: var(--brand); }
.ext-links { list-style: none; margin: 0 0 8px; padding: 0; font-size: .88rem; line-height: 1.9; }
.ext-caption { font-size: .75rem !important; color: var(--muted); }

/* ---- 前回の続き・解き直し ---- */
.resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; padding: 16px 18px; background: var(--surface); border: 2px solid var(--brand); border-radius: 14px; }
.resume-text { display: flex; flex-direction: column; gap: 2px; }
.resume-label { font-size: .8rem; font-weight: 700; color: var(--brand); }
.resume-stats { font-size: .85rem; color: var(--muted); }
.resume .btn-primary { flex: none; }
.resume[hidden], .review-bar[hidden], .btn-secondary[hidden] { display: none; }
.btn-secondary { display: inline-block; padding: 10px 18px; border-radius: 10px; border: 2px solid var(--ng); color: var(--ng); background: var(--surface); text-decoration: none; font-weight: 700; }
.review-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 8px 14px; border-radius: 10px; background: var(--ng-weak); color: var(--ng); font-size: .92rem; }
.review-bar a { margin-left: auto; color: var(--muted); font-size: .85rem; }

/* ---- ヘッダーのナビ ---- */
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.site-title { flex: 1 1 auto; }
.site-nav { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.site-nav a { color: #fff; text-decoration: none; font-size: .9rem; font-weight: 700; opacity: .92; }
.site-nav a:hover { opacity: 1; text-decoration: underline; }
.nav-search input { width: 11em; padding: 5px 10px; border: 0; border-radius: 999px; font: inherit; font-size: .85rem; }
@media (max-width: 520px) { .site-nav { width: 100%; } .nav-search { flex: 1; } .nav-search input { width: 100%; } }

/* ---- サイドバーの折りたたみ ---- */
.side-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.side-fold > summary::-webkit-details-marker { display: none; }
.side-fold > summary .side-title { flex: 1; margin-bottom: 0; }
.side-fold > summary::after { content: "▾"; color: var(--muted); transition: transform .15s; }
.side-fold:not([open]) > summary::after { transform: rotate(-90deg); }
.side-fold[open] > summary { margin-bottom: 10px; }

/* ---- 解答後に画面上部へ出す「次へ」 ---- */
.float-next { position: fixed; left: 50%; transform: translateX(-50%); top: 10px; z-index: 40; width: min(560px, calc(100% - 16px)); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.15); font-weight: 700; }
.float-next[hidden] { display: none; }
.float-next.ok span { color: var(--ok); } .float-next.ng span { color: var(--ng); }
.float-next a { margin-left: auto; padding: 8px 14px; border-radius: 8px; background: var(--brand); color: #fff; text-decoration: none; }
body.has-app-bar .float-next { top: 72px; }

/* ---- 検索 ---- */
.search-form { display: flex; gap: 8px; margin: 0 0 8px; }
.search-form input { flex: 1; padding: 10px 14px; font: inherit; border: 2px solid var(--line); border-radius: 10px; }
.search-form input:focus { border-color: var(--brand); outline: none; }
.search-form button { padding: 10px 18px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.search-note { font-size: .85rem; color: var(--muted); margin: 0 0 12px; }
.search-status { font-weight: 700; }
.search-results mark { background: var(--mark); color: inherit; padding: 0 1px; }
.search-results .qsum { -webkit-line-clamp: 3; }
.qnum-wide { width: 7.5em; font-size: .85rem; line-height: 1.4; }

/* ---- ダークモード（端末の設定に合わせる。ヘッダーのボタンで切り替えも可） ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #12161c; --surface: #1b2129; --text: #e4e8ee; --muted: #9aa6b4; --line: #2e3742;
  --brand: #7fb0e0; --brand-weak: #22303f; --ok: #4cc27f; --ok-weak: #18301f; --ng: #f07a6e; --ng-weak: #3a2020;
  --surface-2: #171c23; --code: #11151a; --footer: #161b22; --cta-from: #1d2733; --cta-border: #2d3f52; --mark: #6b5a12; --warn: #e8b44a; --warn-weak: #3a2f14;
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12161c; --surface: #1b2129; --text: #e4e8ee; --muted: #9aa6b4; --line: #2e3742;
  --brand: #7fb0e0; --brand-weak: #22303f; --ok: #4cc27f; --ok-weak: #18301f; --ng: #f07a6e; --ng-weak: #3a2020;
  --surface-2: #171c23; --code: #11151a; --footer: #161b22; --cta-from: #1d2733; --cta-border: #2d3f52; --mark: #6b5a12; --warn: #e8b44a; --warn-weak: #3a2f14;
  color-scheme: dark;
}
.site-header { background: var(--header, var(--brand)); }
:root[data-theme="dark"] { --header: #1f3550; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --header: #1f3550; } }
:root[data-theme="dark"] .q-body img, :root[data-theme="dark"] .explanation img { filter: brightness(.92); }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .result-next, :root[data-theme="dark"] .float-next a, :root[data-theme="dark"] .app-bar-btn, :root[data-theme="dark"] .search-form button { color: #0f1720; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .q-body img, :root:not([data-theme="light"]) .explanation img { filter: brightness(.92); }
  :root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .result-next, :root:not([data-theme="light"]) .float-next a, :root:not([data-theme="light"]) .app-bar-btn, :root:not([data-theme="light"]) .search-form button { color: #0f1720; }
}
.theme-toggle { border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .8rem; cursor: pointer; }

/* ---- 図の拡大 ---- */
.q-body img, .explanation img { cursor: zoom-in; }
.zoom-hint { display: block; text-align: center; font-size: .75rem; color: var(--muted); margin: -6px 0 10px; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.88); overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 48px 8px 24px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: none; width: auto; height: auto; background: #fff; border-radius: 6px; margin: auto; cursor: zoom-out; }
.lightbox.fit img { max-width: 100%; }
.lightbox-bar { position: fixed; top: 8px; right: 8px; display: flex; gap: 8px; z-index: 101; }
.lightbox-bar button { border: 0; border-radius: 999px; padding: 6px 14px; background: rgba(255,255,255,.92); color: #111; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
body.no-scroll { overflow: hidden; }

/* ---- 見て解いた ---- */
.peek-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--warn-weak); color: var(--warn); font-size: .85rem; }
.peek-note[hidden] { display: none; }
.question-list .is-peek .qmark { color: var(--warn); }

/* ---- キーボード操作の案内（マウスのある端末だけ） ---- */
.kbd-hint { display: none; margin: 10px 0 0; font-size: .78rem; color: var(--muted); }
.kbd-hint kbd { display: inline-block; min-width: 1.6em; padding: 0 4px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); font: inherit; font-size: .75rem; text-align: center; }
@media (hover: hover) and (pointer: fine) { .kbd-hint { display: block; } }

/* ---- 回の結果 ---- */
.result-card { background: var(--surface); border: 2px solid var(--brand); border-radius: 14px; padding: 18px 20px; margin: 0 0 20px; }
.result-card[hidden] { display: none; }
.result-card h2 { margin: 0 0 10px; border: 0; padding: 0; }
.result-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 12px; }
.result-stats div { display: flex; flex-direction: column; }
.result-stats strong { font-size: 1.6rem; line-height: 1.2; color: var(--brand); }
.result-stats span { font-size: .8rem; color: var(--muted); }
.result-wrong { margin: 8px 0 12px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.result-wrong a { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--ng-weak); color: var(--ng); text-decoration: none; font-size: .85rem; font-weight: 700; }
.result-wrong a.peek { background: var(--warn-weak); color: var(--warn); }

/* ---- ヘッダー: スマホは検索とメニューをアイコンにまとめて1行に ---- */
.hdr-btn { display: none; flex: none; border: 0; background: transparent; color: #fff; padding: 6px; border-radius: 8px; cursor: pointer; line-height: 0; }
.hdr-btn:hover { background: rgba(255,255,255,.12); }
@media (max-width: 640px) {
  .site-header .wrap { flex-wrap: nowrap; gap: 4px; }
  .site-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
  .hdr-btn { display: inline-flex; }
  .site-nav { display: none; }
  .site-header.nav-open .wrap { flex-wrap: wrap; }
  .site-header.nav-open .site-nav { display: flex; width: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding: 8px 0 4px; }
  .site-header.nav-open .site-nav a { padding: 6px 2px; }
  .site-header.nav-open .nav-search { order: -1; }
  .site-header.nav-open .nav-search input { width: 100%; padding: 9px 14px; font-size: 1rem; }
  .site-header.nav-open .theme-toggle { align-self: flex-start; }
}

/* ---- 404 ---- */
.nf-sets { margin-bottom: 16px; }

/* ---- スマホでは「次へ」を画面下に（広告のアンカーと重ならないよう --anchor 分上げる） ---- */
@media (max-width: 859px) {
  .float-next, body.has-app-bar .float-next { top: auto; bottom: calc(12px + var(--anchor, 0px) + env(safe-area-inset-bottom, 0px)); }
  .float-next a { padding: 12px 18px; }
}

/* ---- ストアのボタン: 黒地に各ストアのマーク ---- */
.store-btn { flex-direction: row; align-items: center; gap: 10px; }
.store-btn > span { display: flex; flex-direction: column; text-align: left; }
.store-mark { width: 26px; height: 26px; flex: none; }
.side-app-buttons .store-btn { justify-content: center; }
:root[data-theme="dark"] .store-btn { border: 1px solid #555; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .store-btn { border: 1px solid #555; } }


/* ---- トップの案内にストアのボタンを直接置く ---- */
.hero-app { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.hero-app p { margin: 0; }
.hero-app-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hero-app-buttons .store-btn { min-width: 0; padding: 5px 12px; font-size: .9rem; gap: 7px; }
.hero-app-buttons .store-mark { width: 20px; height: 20px; }
.hero-app-buttons .store-btn small { font-size: .58rem; }