:root {
  --wine: #5c1a2e;
  --wine-light: #7d2a42;
  --bg: #faf7f4;
  --card: #ffffff;
  /* 比較表の寸法（style.css「比較表の共通仕様」を参照） */
  --ct-col: 96px;
  --ct-item: 62px;
  --ct-font: .7rem;
  --ct-head: .66rem;
  --text: #2b2320;
  --muted: #8a7d76;
  --border: #e6ddd6;
  --chip-bg: #f3ede7;
  --chip-on-bg: #5c1a2e;
  --chip-on-text: #ffffff;
  --ok: #2e7d4f;
  --ok-bg: #e2f2e8;
  --miss: #b98a00;
  --miss-bg: #fdf3d7;
  --wrong: #c0392b;
  --wrong-bg: #fbe4e0;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--wine);
  color: #fff;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
}
.app-header h1 { font-size: 1.05rem; font-weight: 600; flex: 1; text-align: center; }
.header-btn {
  background: none; border: none; color: #fff; font-size: 1.1rem;
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
}
.header-btn:active { background: rgba(255,255,255,.15); }
.header-spacer { width: 36px; }

main { padding: 16px 14px 120px; max-width: 640px; margin: 0 auto; }

/* ---------- launcher ---------- */
/* minmax(0, 1fr) にしないと、中身（nowrap のバッジなど）より狭くできず
   列幅がばらつき、狭い画面では右にはみ出す。以降のグリッドもすべて同じ理由で 0 を下限にする */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tile {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 14px; min-height: 148px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.tile:active:not(.disabled) { transform: scale(.97); }
.tile-icon { font-size: 1.8rem; }
.tile-title { font-weight: 700; font-size: .9rem; line-height: 1.35; }
.tile-desc { font-size: .74rem; color: var(--muted); line-height: 1.4; }
/* タイルの中は幅が限られるので、バッジは少し小さくし、収まらないときは折り返す */
.tile .src-badge { font-size: .58rem; padding: 2px 7px; white-space: normal; border-radius: 10px; text-align: center; }
.tile.disabled { opacity: .55; cursor: default; background: var(--chip-bg); }
.tile-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--muted); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px;
}

/* トップ画面に常時出す共有のお願い。押すと使い方の該当項目が開く */
.share-note {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  background: #fdf6f8; border: 1px solid #e6ccd5; border-radius: 12px;
  padding: 10px 12px; margin: -6px 0 14px;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.share-note:active { transform: scale(.99); }
.share-note-icon { font-size: 1rem; line-height: 1.5; }
.share-note-text { flex: 1; font-size: .76rem; line-height: 1.6; }
.share-note-text b { color: var(--wine); }
.share-note-more {
  flex: 0 0 auto; align-self: center; white-space: nowrap;
  font-size: .7rem; font-weight: 700; color: var(--wine);
  border: 1px solid #d9bfc7; border-radius: 999px; padding: 3px 9px;
}

/* ---------- home ---------- */
.home-lead { color: var(--muted); font-size: .9rem; margin: 4px 2px 16px; line-height: 1.6; }
.wine-section-title {
  font-size: .85rem; font-weight: 700; color: var(--muted);
  margin: 18px 4px 8px; letter-spacing: .05em;
}
.wine-card {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; margin-bottom: 10px;
  cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.wine-card:active { transform: scale(.985); }
.wine-card .glass { font-size: 1.6rem; }
.wine-card .wine-label { font-weight: 700; }
.wine-card .wine-sub { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.wine-card .wine-src { display: block; margin-top: 5px; }
.wine-card .chev { margin-left: auto; color: var(--muted); }
.wine-card.random { background: linear-gradient(135deg, #5c1a2e, #8a3050); color: #fff; border: none; }
.wine-card.random .wine-sub { color: rgba(255,255,255,.75); }
.wine-card.random .chev { color: rgba(255,255,255,.75); }

.reveal-note { font-size: .8rem; color: var(--muted); margin: 6px 4px 0; line-height: 1.6; }

/* ---------- sheet ---------- */
.sheet-wine-banner {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 14px;
}
.sheet-wine-banner .b-label { font-size: .78rem; color: var(--muted); }
.sheet-wine-banner .b-name { font-weight: 700; margin-top: 2px; }

.group-title {
  font-size: 1rem; font-weight: 800; color: var(--wine);
  margin: 22px 4px 4px; padding-bottom: 4px; border-bottom: 2px solid var(--wine);
  display: flex; align-items: baseline; justify-content: space-between;
}

.section-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px 14px; margin-top: 10px;
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.section-title { font-size: .92rem; font-weight: 700; }
.section-count { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.section-count.full { color: var(--ok); font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-sub { align-items: center; margin-top: 6px; }
.chips-sub:first-of-type { margin-top: 0; }
.chip-sub { font-size: .7rem; font-weight: 700; color: var(--muted); min-width: 2.6em; }
.section-hint { display: block; font-size: .7rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.chip {
  border: 1px solid var(--border); background: var(--chip-bg); color: var(--text);
  border-radius: 999px; padding: 8px 14px; font-size: .88rem; font-family: inherit;
  cursor: pointer; line-height: 1.3;
}
.chip.on { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-text); font-weight: 600; }
.chip:active { transform: scale(.96); }

/* result chips */
.chip.r-ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); font-weight: 700; }
.chip.r-miss { background: var(--miss-bg); border-color: var(--miss); color: #7a5c00; font-weight: 700; }
.chip.r-wrong { background: var(--wrong-bg); border-color: var(--wrong); color: var(--wrong); text-decoration: line-through; }
.chip.r-dim { opacity: .45; }

/* ---------- footer ---------- */
.footer-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.footer-progress { flex: 1; font-size: .82rem; color: var(--muted); line-height: 1.4; }

/* ---------- 更新のお知らせバー ---------- */
.update-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--wine); color: #fff;
  border-top: 1px solid rgba(255,255,255,.25);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 18px rgba(0,0,0,.18);
}
.update-bar.done { background: #2f6b4c; }
.ub-text { flex: 1 1 100%; font-size: .86rem; font-weight: 700; line-height: 1.45; }
@media (min-width: 520px) { .ub-text { flex: 1 1 220px; } }
.ub-sub { display: block; font-size: .74rem; font-weight: 400; opacity: .85; margin-top: 2px; }
.ub-actions { display: flex; gap: 8px; margin-left: auto; }
.ub-btn { padding: 9px 14px; font-size: .84rem; }
.update-bar .btn-secondary { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.45); }
.update-bar .btn-primary { background: #fff; color: var(--wine); }
.update-bar.done .btn-primary { color: #2f6b4c; }
/* バーの分だけフッターと本文を持ち上げる（高さはJSが測って入れる） */
body.has-update-bar .footer-bar { bottom: var(--update-bar-h, 0px); }
body.has-update-bar main { padding-bottom: calc(120px + var(--update-bar-h, 0px)); }
.btn-primary {
  background: var(--wine); color: #fff; border: none; border-radius: 12px;
  padding: 12px 22px; font-size: .95rem; font-weight: 700; font-family: inherit; cursor: pointer;
}
.btn-primary:disabled { opacity: .4; }
.btn-primary:active:not(:disabled) { background: var(--wine-light); }
.btn-secondary {
  background: var(--chip-bg); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 18px; font-size: .95rem; font-weight: 600; font-family: inherit; cursor: pointer;
}

.hidden { display: none !important; }

/* ---------- 出所バッジ ---------- */
.src-badge {
  display: inline-block;
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: 2px 8px;
  vertical-align: 1px; white-space: nowrap;
}
.src-badge.ai { background: #e8e4ef; color: #5b4a7a; border: 1px solid #c9bede; }
.src-badge.real { background: #fdf3d7; color: #8a6a00; border: 1px solid #dcc26a; }
.src-badge.transcribed { background: #fbe9e3; color: #8f4a2c; border: 1px solid #e0b49f; }
.src-badge.teppan { background: #e2f0e8; color: #2f6b4c; border: 1px solid #a9d2bd; }
.src-badge.note { background: #f6e6ee; color: #7a2d55; border: 1px solid #d9a7c2; }
.score-card .src-badge.note { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.4); }
.score-card .src-badge.ai { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.4); }

/* ---------- タイプ別テッパン ---------- */
.tp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tp-tab.active { background: #5c1a2e; color: #fff; border-color: #5c1a2e; }
.tp-lead { font-size: .84rem; line-height: 1.65; margin: 0 0 10px; }
.tp-sub {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  color: #8a6a72; margin: 12px 0 4px;
}
.tp-text { font-size: .82rem; line-height: 1.6; margin: 0; }
.tp-list { margin: 0; padding-left: 1.1rem; font-size: .82rem; line-height: 1.7; }
.tp-list li { margin-bottom: 2px; }
.tp-group {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: #5c1a2e; background: #f6eef0;
  margin: 10px -14px 6px; padding: 5px 14px;
}
.tp-table .tp-group:first-child { margin-top: -4px; }
.tp-row { padding: 7px 0; border-bottom: 1px solid #f0e8ea; }
.tp-row:last-child { border-bottom: none; }
.tp-item { font-size: .74rem; font-weight: 700; color: #8a6a72; }
.tp-base { font-size: .86rem; line-height: 1.5; margin-top: 1px; }
.tp-branch { font-size: .74rem; line-height: 1.55; color: #7a6a6e; margin-top: 3px; }
.tp-caution {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: #fdf3d7; border: 1px solid #dcc26a;
  font-size: .8rem; line-height: 1.6; color: #6b5200;
}

/* ---------- 出題実績・アーカイブの追加表示 ---------- */
.stat-exam-no { font-size: .7rem; color: #9a8a8e; }
.stat-exam-vintage { font-size: .72rem; color: #9a8a8e; text-align: right; }
.stat-exam-sub {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  color: #8a6a72; margin: 8px 0 2px;
}
.stat-exam-sub.sommelier { color: #9a8a8e; }
.ar-exam {
  font-size: .68rem; font-weight: 700; color: #8a6a72;
  background: #f6eef0; border-radius: 4px; padding: 1px 5px;
}
/* ---------- 実物正解 品種×年度 横断 ---------- */
.rc-n { font-size: .68rem; margin-left: 4px; opacity: .7; }
.rc-summary { font-size: .84rem; margin: 0 0 8px; }
.rc-sub { font-weight: 400; color: #9a8a8e; }
.rc-common { color: var(--wine); font-weight: 700; }
.rc-none { color: #c8bcc0; }

/* ---------- 用語の採用率 ---------- */
.ts-n { font-size: .84rem; margin: 6px 0 10px; }
.ts-term { font-size: .82rem; }
.ts-pct { display: block; font-size: .66rem; font-weight: 400; color: #9a8a8e; }

/* ---------- 本番セット練習 ---------- */
.es-toggle { display: flex; align-items: center; gap: 8px; font-size: .86rem; margin: 0 0 12px; }
.es-count { font-size: .78rem; font-weight: 700; color: #8a6a72; }
.es-list { margin-bottom: 10px; }
.es-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: .86rem; }
.es-row:last-child { border-bottom: none; }
.es-no { font-size: .8rem; color: #8a6a72; min-width: 1.2em; }
.es-name { font-weight: 700; }
.es-status { margin-left: auto; font-size: .7rem; color: #9a8a8e; text-align: right; }
.es-na .es-name { color: #b0a4a8; font-weight: 400; }
.es-start { width: 100%; }
.sheet-wine-banner .b-sub { font-size: .74rem; opacity: .8; margin-top: 3px; }

.stat-link { color: var(--wine); text-decoration: underline; text-decoration-color: #d9bfc7; text-underline-offset: 2px; }
.stat-link-mark { font-size: .7rem; }
.ar-practice { display: block; width: 100%; margin: 0 0 10px; font-size: .84rem; }
.ar-note {
  margin-bottom: 8px; padding: 7px 9px; border-radius: 8px;
  background: #fbe9e3; border: 1px solid #e0b49f;
  font-size: .76rem; line-height: 1.55; color: #8f4a2c;
}

/* ---------- flashcards ---------- */
.fc-filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fc-countries { gap: 6px; margin-top: -6px; }
.fc-countries .chip { font-size: .78rem; padding: 6px 11px; }
.fc-shuffle { margin-left: auto; }
.fc-stage { perspective: 1200px; }
.fc-card { cursor: pointer; height: 420px; }
.fc-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s;
}
.fc-inner.flipped { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 18px; border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.fc-front {
  background: linear-gradient(150deg, #5c1a2e, #8a3050);
  color: #fff; border: none;
  align-items: center; justify-content: center; gap: 10px;
}
.fc-glass { font-size: 3rem; }
.fc-name { font-size: 1.5rem; font-weight: 800; text-align: center; padding: 0 16px; }
.fc-colorlabel { font-size: .8rem; opacity: .8; }
.fc-back {
  background: var(--card);
  transform: rotateY(180deg);
  padding: 18px 16px; overflow-y: auto;
}
.fc-back-name { font-weight: 800; color: var(--wine); font-size: 1.1rem; margin-bottom: 10px; }
.fc-facts dt { font-size: .78rem; font-weight: 700; color: var(--muted); margin-top: 10px; }
.fc-facts dd { font-size: .88rem; line-height: 1.55; margin-top: 2px; }
.fc-hint { text-align: center; font-size: .75rem; color: var(--muted); margin: 10px 0 14px; }
.fc-bycountry {
  font-size: .84rem; line-height: 1.55;
  padding: 6px 8px; border-radius: 8px; margin-top: 4px;
  background: var(--chip-bg);
}
.fc-bycountry.highlight { background: var(--wine); color: #fff; }
.fc-bycountry.highlight .fc-bc-country { background: #fff; color: var(--wine); }
.fc-bc-country {
  display: inline-block; background: var(--wine); color: #fff;
  font-size: .7rem; font-weight: 700; border-radius: 999px;
  padding: 1px 8px; margin-right: 6px; vertical-align: 1px;
}
.fc-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fc-counter { font-size: .85rem; color: var(--muted); font-weight: 700; white-space: nowrap; }

/* ---------- quiz ---------- */
.quiz-comment-row { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.quiz-comment-label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.quiz-comment-text { font-size: .9rem; line-height: 1.6; }
.quiz-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.quiz-choice {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 10px; font: inherit; font-size: .9rem; font-weight: 700; color: inherit;
  cursor: pointer; line-height: 1.4;
}
.quiz-choice:active:not(:disabled) { transform: scale(.97); }
.quiz-choice.correct { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.quiz-choice.wrong { background: var(--wrong-bg); border-color: var(--wrong); color: var(--wrong); }
.quiz-choice:disabled:not(.correct):not(.wrong) { opacity: .5; }
.quiz-feedback {
  margin-top: 16px; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.quiz-verdict { font-size: 1.05rem; font-weight: 800; }
.quiz-verdict.good { color: var(--ok); }
.quiz-verdict.bad { color: var(--wrong); }
.quiz-explain { font-size: .85rem; color: var(--muted); line-height: 1.6; }

/* ---------- stats ---------- */
.stat-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.stat-name { flex: 0 0 118px; font-size: .82rem; font-weight: 700; line-height: 1.3; }
.stat-bar-wrap { flex: 1; background: var(--chip-bg); border-radius: 999px; height: 14px; overflow: hidden; }
.stat-bar { display: block; height: 100%; border-radius: 999px; }
.stat-bar.white { background: linear-gradient(90deg, #d9c36a, #b89a2e); }
.stat-bar.red { background: linear-gradient(90deg, #8a3050, #5c1a2e); }
.stat-bar.other { background: linear-gradient(90deg, #c9a46a, #8a6a2e); }
.stat-count { flex: 0 0 34px; text-align: right; font-size: .8rem; font-weight: 700; }
.stat-years { font-size: .68rem; color: var(--muted); margin: 2px 0 0 126px; letter-spacing: .02em; }
.stat-sub { margin-left: 8px; color: #8a6a72; letter-spacing: 0; }
/* アイコン / 出題番号 / 品種 / 生産国 / ヴィンテージ の5列を固定して縦に揃える。
   flex + margin-left:auto を複数使うと余白の取り合いで列位置がずれるため grid にしている */
.stat-exam-item {
  display: grid;
  grid-template-columns: 1.4em 1.2em minmax(0, 1fr) 7.4em 3em;
  align-items: center; gap: 6px;
  padding: 7px 0; border-bottom: 1px dashed var(--border);
  font-size: .88rem;
}
.stat-exam-item:last-child { border-bottom: none; }
.stat-exam-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.stat-exam-country { color: var(--muted); font-size: .78rem; }
.reveal-note a { color: var(--wine); }

/* ---------- compare ---------- */
.cmp-wrap { border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.cmp-head { font-weight: 800; color: var(--wine); }
.cmp-vintage { display: block; font-size: var(--ct-head); color: var(--muted); font-weight: 600; }
.cmp-diff { color: var(--wrong); font-weight: 700; }

@media (min-width: 520px) { :root { --ct-col: 110px; --ct-item: 72px; --ct-font: .74rem; --ct-head: .7rem; } }

/* ---------- 比較表の共通仕様（横並びで見比べる表はここで一括して決める） ----------
   対象: 実物正解 品種×年度（.rc-table）／模範解答 比較閲覧（.cmp-table）／
         テイスティング会メモの比較表（.nt-table-card 配下。こちらは画面幅に収める）
   --ct-col  データ列の幅   --ct-item 左端の項目名列の幅
   --ct-font 本文の文字サイズ   --ct-head 見出しと項目名の文字サイズ
   列を狭くするほど横スクロールは減り、そのぶんセル内で折り返して縦に伸びる。
   用語は .ct-term で囲み、語の途中ではなく語と語の間で折り返す。
*/
.rc-wrap, .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.rc-table, .cmp-table {
  border-collapse: collapse; table-layout: fixed;
  width: auto; min-width: 100%; font-size: var(--ct-font);
}
/* 列幅は colgroup で指定する（table-layout:fixed ではこれがいちばん確実） */
.rc-table col, .cmp-table col { width: var(--ct-col); }
.rc-table col.ct-col-item, .cmp-table col.ct-col-item { width: var(--ct-item); }
.rc-table th, .rc-table td, .cmp-table th, .cmp-table td {
  padding: 5px 6px;
  border-bottom: 1px solid #f0e8ea;
  text-align: left; vertical-align: top; line-height: 1.5;
  overflow-wrap: anywhere;
}
.rc-table thead th, .cmp-table thead th {
  font-size: var(--ct-head); line-height: 1.45;
  background: #fbf7f8; position: sticky; top: 0;
}
.rc-table .rc-item, .cmp-table .cmp-item {
  font-weight: 700; font-size: var(--ct-head); color: #8a6a72;
  position: sticky; left: 0; background: var(--card); z-index: 1;
}
.rc-table thead .rc-item, .cmp-table thead .cmp-item { background: #fbf7f8; z-index: 2; }
.cmp-group .cmp-item, .cmp-group td, .rc-table .cmp-group th, .rc-table .cmp-group td {
  background: var(--wine); color: #fff; font-size: var(--ct-head); font-weight: 700; padding: 4px 6px;
}
/* 用語は1語のかたまりとして扱い、語と語の間で改行する。長すぎる語だけ内部で折る */
.ct-term { display: inline-block; max-width: 100%; vertical-align: top; }
.ct-term:not(:last-child)::after { content: "、"; }

/* ---------- ご意見・不具合の報告 ---------- */
.fb-hint { font-size: .78rem; color: var(--muted); line-height: 1.6; margin: 8px 0 2px; }
.fb-label { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); margin: 14px 0 4px; }
.fb-input {
  width: 100%; font: inherit; font-size: .9rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; line-height: 1.6;
}
.fb-input:focus { outline: 2px solid var(--wine); outline-offset: 1px; }
.fb-area { resize: vertical; min-height: 7em; }
.fb-check { display: flex; align-items: center; gap: 8px; font-size: .84rem; margin-top: 14px; }
.fb-ctx-detail { margin-top: 6px; }
.fb-ctx-detail summary { font-size: .78rem; color: var(--muted); cursor: pointer; }
.fb-ctx-body {
  margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--chip-bg);
  font-size: .72rem; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere;
}
.fb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 10px; }
.fb-actions button { flex: 1 1 auto; }
.help-body .fb-area { margin-top: 8px; }

/* ---------- help modal ---------- */
.help-modal { position: fixed; inset: 0; z-index: 50; }
.help-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.help-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 480px); max-height: 78vh; overflow-y: auto;
  background: var(--card); border-radius: 16px; padding: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.help-head h2 { font-size: 1rem; color: var(--wine); }
.help-head .header-btn { color: var(--muted); }
.help-body { font-size: .87rem; line-height: 1.7; }
.help-body p { margin: 8px 0; }
.help-body ul { margin: 8px 0 8px 4px; padding-left: 16px; }
.help-body li { margin: 6px 0; }
.help-body b { color: var(--wine); }

/* ---------- practice results (一時保存) ---------- */
.pr-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px dashed var(--border);
  font-size: .85rem;
}
.pr-name { flex: 1; font-weight: 700; line-height: 1.4; }
.pr-blind {
  display: inline-block; margin-left: 6px;
  background: var(--chip-bg); color: var(--muted);
  font-size: .65rem; font-weight: 700; border-radius: 999px; padding: 1px 7px;
}
.pr-score { font-weight: 800; color: var(--wine); white-space: nowrap; }
.pr-time { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.pr-clear { width: 100%; margin-top: 12px; }

/* ---------- compare accordion ---------- */
.cmp-acc {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 10px; overflow: hidden;
}
.cmp-acc summary {
  cursor: pointer; list-style: none;
  padding: 12px 14px; font-weight: 700; font-size: .92rem;
  display: flex; align-items: center; gap: 6px;
}
.cmp-acc summary::-webkit-details-marker { display: none; }
.cmp-acc summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .2s; }
.cmp-acc:not([open]) summary::after { transform: rotate(-90deg); }
.cmp-acc-body { padding: 0 14px 14px; margin: 0; }
#cmp-body { margin-top: 4px; }

/* ---------- archive ---------- */
.ar-year { display: flex; flex-direction: column; gap: 8px; }
.ar-wine { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden; }
.ar-wine summary {
  cursor: pointer; list-style: none;
  padding: 10px 12px; font-weight: 700; font-size: .88rem;
}
.ar-wine summary::-webkit-details-marker { display: none; }
.ar-vintage { font-size: .72rem; color: var(--muted); font-weight: 600; margin-left: 6px; }
.ar-body { padding: 0 12px 12px; }
.ar-group {
  background: var(--wine); color: #fff; font-size: .75rem; font-weight: 700;
  border-radius: 8px; padding: 4px 10px; margin: 10px 0 4px;
}
.ar-row {
  display: flex; gap: 10px; padding: 6px 2px;
  border-bottom: 1px dashed var(--border); font-size: .84rem;
}
.ar-row:last-child { border-bottom: none; }
.ar-title { flex: 0 0 96px; font-weight: 700; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.ar-terms { flex: 1; line-height: 1.55; }
.nt-session {
  font-size: .76rem; color: var(--muted); font-weight: 600; line-height: 1.7;
  background: #f6e6ee; border: 1px solid #d9a7c2; border-radius: 12px;
  padding: 8px 12px; margin: 0 0 12px;
}
.nt-mode { margin-bottom: 10px; }
.nt-table-card { padding-bottom: 8px; }
/* こちらだけは横スクロールさせず、列幅を画面幅に合わせる（1語1行で折り返す） */
.nt-table-card .rc-wrap { overflow-x: visible; }
.nt-table-card .rc-table { width: 100%; min-width: 0; }
.nt-table-card .rc-table th, .nt-table-card .rc-table td { padding: 5px 4px; line-height: 1.45; }
.nt-table-card .rc-table col { width: auto; }
.nt-table-card .rc-table col.ct-col-item { width: 4.6em; }
.nt-table-card .rc-table .rc-item { position: static; }
.nt-table-card .rc-table thead th { position: static; }
.nt-table-card .ct-term { display: block; }
.nt-table-card .ct-term::after { content: none; }
.nt-table-card .rc-table .chip-no { margin-right: 2px; }
.rc-table .cmp-group .rc-item { background: var(--wine); color: #fff; }
#screen:has(.ar-year) .sheet-switch { margin-bottom: 6px; }

/* ---------- estimate ---------- */
.est-list { margin: 10px 0 6px 4px; padding-left: 20px; }
.est-row { margin-bottom: 10px; }
.est-main { font-size: .92rem; }
.est-sub { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.est-score {
  display: inline-block; background: var(--wine); color: #fff;
  font-weight: 700; border-radius: 999px; padding: 1px 8px; margin: 0 4px;
}
.est-note { font-size: .75rem; color: var(--muted); }

/* ---------- result ---------- */
.score-card {
  background: linear-gradient(135deg, #5c1a2e, #8a3050); color: #fff;
  border-radius: 16px; padding: 20px 18px; text-align: center; margin-bottom: 6px;
}
.score-card .s-wine { font-size: .85rem; opacity: .85; }
.score-card .s-score { font-size: 2.4rem; font-weight: 800; margin: 6px 0 2px; }
.score-card .s-detail { font-size: .82rem; opacity: .85; }
.legend {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  font-size: .75rem; color: var(--muted); margin: 10px 0 4px;
}
.legend span::before { content: "●"; margin-right: 4px; }
.legend .l-ok::before { color: var(--ok); }
.legend .l-miss::before { color: var(--miss); }
.legend .l-wrong::before { color: var(--wrong); }
.section-score { font-size: .8rem; font-weight: 700; }
.section-score.good { color: var(--ok); }
.section-score.bad { color: var(--wrong); }
.result-actions { display: flex; gap: 10px; margin-top: 22px; }
.result-actions button { flex: 1; }

/* ============================================================
   タブレット（iPad など 768px 以上）
   iPhone 向けの1列レイアウトを、幅がある端末では2〜3列に広げる。
   画面の種類は #screen の中身で判定する（:has）。:has 非対応の古い
   ブラウザでは無視され、1列表示のままになる。
   ============================================================ */
@media (min-width: 768px) {
  main { max-width: 1000px; padding: 20px 24px 120px; }
  .footer-bar { padding-left: max(14px, calc((100% - 1000px) / 2 + 24px)); padding-right: max(14px, calc((100% - 1000px) / 2 + 24px)); }

  /* ランチャー: タイル3列 */
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

  /* 2列グリッドにする画面。見出し・注記・ボタン行は全幅 */
  #screen:has(.sheet-wine-banner),      /* 用語シート */
  #screen:has(.legend),                 /* 採点結果 */
  #screen:has(.stat-exam-item),         /* 出題傾向データ */
  #screen:has(.es-card),                /* 本番セット練習 */
  #screen:has(.ar-year) {               /* 過去問アーカイブ */
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start;
  }
  #screen > .home-lead, #screen > .group-title, #screen > .reveal-note,
  #screen > .sheet-wine-banner, #screen > .score-card, #screen > .legend,
  #screen > .ar-note, #screen > .result-actions, #screen > .es-toggle,
  #screen > .wine-card, #screen > .wine-section-title, #screen > .fc-filters, #screen > details.cmp-acc,
  #screen > .sheet-switch, #screen > .ar-year, #screen > .nt-mode, #screen > .nt-session {
    grid-column: 1 / -1;
  }

  /* 用語の採用率: 項目カードを2列 */
  #ts-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
  #ts-body > .ts-n { grid-column: 1 / -1; }

  /* 比較表: 文字はゆったりに、列は最多の8年ぶんが1画面に収まる幅に */
  :root { --ct-col: 102px; --ct-item: 76px; --ct-font: .78rem; --ct-head: .72rem; }

  /* タイプ別テッパン: 項目表を2列 */
  .tp-table { column-count: 2; column-gap: 24px; }
  .tp-table .tp-group, .tp-table .tp-row { break-inside: avoid; }
  .tp-table .tp-group { margin-left: 0; margin-right: 0; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
}

/* ---------- 用語シート切替・番号付きチップ ---------- */
.sheet-switch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 12px; margin-bottom: 6px;
}
.sheet-switch-label { font-size: .78rem; font-weight: 700; color: var(--muted); margin-right: 2px; }
.sheet-note { margin-bottom: 14px; }
.chip-no {
  display: inline-block; min-width: 1.4em; margin-right: 4px; padding: 0 3px;
  border-radius: 6px; font-size: .68rem; font-weight: 700; text-align: center;
  background: rgba(0,0,0,.08); color: var(--muted); vertical-align: 1px;
}
.chip.on .chip-no { background: rgba(255,255,255,.25); color: #fff; }
.chip.r-ok .chip-no { background: rgba(46,125,79,.15); color: var(--ok); }
.chip.r-miss .chip-no { background: rgba(185,138,0,.18); color: #7a5c00; }
.chip.r-wrong .chip-no { background: rgba(192,57,43,.15); color: var(--wrong); }

/* ---------- 練習の記録 ---------- */
.pr-clickable { cursor: pointer; }
.pr-clickable:active { background: var(--chip-bg); }
.pr-sheet {
  display: inline-block; margin-left: 6px;
  background: #e8e4ef; color: #5b4a7a; border: 1px solid #c9bede;
  font-size: .62rem; font-weight: 700; border-radius: 999px; padding: 1px 7px;
}
.pr-del {
  background: none; border: none; font-size: 1rem; cursor: pointer;
  padding: 4px 6px; border-radius: 8px; color: var(--muted);
}
.pr-del:active { background: var(--wrong-bg); }

/* ---------- 一時保存 ---------- */
.btn-icon { padding: 12px 12px; font-size: 1rem; }
.footer-bar { gap: 8px; }
.pr-row-draft { background: #fffaf0; border-radius: 8px; }
.pr-score.pr-draft { color: #8a6a00; font-size: .74rem; white-space: nowrap; }