/* -----------------------------------------------------------
   CSS Variables (グローバルな変数設定)
------------------------------------------------------------ */
:root {
  --primary-font: "Helvetica", "Arial", sans-serif;
  --base-font-size: 16px; /* ✅ ← ここがデフォルトの文字サイズ定義です */
  --body-bg-color: #fafafa;
  --body-text-color: #333;
  --header-bg: #f2f2f2;
  --table-bg: #fff;
  --table-border-color: #ccc; /* 控えめな罫線用（標準太さ 1px） */
  --table-stripe-bg: #fcfcfc;
  --hover-bg: #f0f8ff;
  --button-bg: #e0e0e0;
  --button-hover-bg: #cfcfcf;
  /* === UIフォントスケール共通変数 === */
  --ui-base: 1rem;        /* 基準サイズ（ページ単位で上書き） */
  --ui-heading-mult: 1;   /* 見出し倍率 */
  --ui-body-mult: 1;      /* 本文倍率 */  
  /* === ここから：大ボタン共通パラメータ（自由に調整できます） === */
  --home-btn-gap: 12px;   /* ← ここが“ボタン間隔”の既定値。数値を上げれば広がる */
  --home-btn-py: 20px;         /* 各ボタンの高さ感（＝上下padding） */
  --home-btn-font: 1.9rem;     /* ラベルの文字サイズ */
  --home-btn-radius: 12px;     /* 角丸の大きさ（任意） */

}

/* === 共通：HOMEと同じ大ボタン寸法/文字サイズ === */
.home-big-btn{
  display:block !important;
  width:100% !important;
  padding: var(--home-btn-py) !important;
  margin: 0 !important;                 /* ← 間隔は親の gap に任せる */
  font-size: var(--home-btn-font) !important;
  line-height:1.6 !important;
  text-decoration:none !important;
  border-radius: var(--home-btn-radius) !important;
  text-align:center !important;
}

/* 追加：ホームのボタン群は常に縦並び＆中央寄せ（gapで間隔管理） */
/* 互換: 旧クラス .home-menu にも同じレイアウトを適用 */
.home-buttons,
.home-menu {
  max-width: 720px;
  margin: 0 auto;
  display: grid !important;     /* ← 念のため強制 */
  grid-auto-rows: min-content;
  gap: var(--home-btn-gap) !important;      /* grid-gap（最新） */
  row-gap: var(--home-btn-gap) !important;  /* 古い実装向けフォールバック */
  column-gap: 0 !important;
}
.home-buttons .btn,
.home-menu .btn { display:block !important; width:100% !important; }
.home-buttons form,
.home-menu form { margin: 0; }  /* 余白は .home-big-btn の margin で統一 */

/* ===== フォールバック：もし gap が無効でも上下に必ず間隔を付ける ===== */
.home-buttons > *,
.home-menu > * {
  margin: 0 !important;
}

/* iOS Safari 用に強制マージンを追加 */
.home-buttons > * + *,
.home-menu > * + * {
  margin-top: var(--home-btn-gap) !important;
}
/* ─ 入れ子対策：直兄弟でなくても確実に間隔を付ける ─ */
.home-menu .home-big-btn + .home-big-btn,
.home-menu .btn + .btn,
.home-menu form + form,
.home-menu form + a.btn,
.home-menu a.btn + form,
.home-menu * + .home-big-btn,
.home-menu * + .btn {
  margin-top: var(--home-btn-gap) !important;
}

/* -----------------------------------------------------------
   共通基本スタイル
------------------------------------------------------------ */
body {
  font-family: var(--primary-font);
  font-size: var(--base-font-size); /* ✅ ← ページ全体の基本フォントサイズに適用 */
  line-height: 1.6;
  margin: 0;
  padding: 10px;
  background-color: var(--body-bg-color);
  color: var(--body-text-color);
}  

/* -----------------------------------------------------------
   UIフォントスケール（Dashboard/Analytics 共通）
   使い方：
     <div class="ui-scale ui-scale-190"> ... </div>
------------------------------------------------------------ */
.ui-scale { font-size: var(--ui-base); }
.ui-scale :is(h1,h2,h3,h4,h5,h6){
  font-size: calc(var(--ui-base) * var(--ui-heading-mult)) !important;
  line-height: 1.2;
  font-weight: 700;
}
.ui-scale :is(p,li,small,.small,label,.form-label,.form-check-label,
              input,select,option,button,
              table,th,td,.back-button){
  font-size: calc(var(--ui-base) * var(--ui-body-mult)) !important;
}
/* プリセット：HOMEボタンと同等の見え方（1.9rem） */
.ui-scale-190 { --ui-base: 1.9rem; --ui-heading-mult: 1; --ui-body-mult: 1; }  
/* 通常スケール（本文 ≈ 16px 相当） ※重複を1つに統一 */
.ui-scale-100 { --ui-base: 1rem; --ui-heading-mult: 1.25; --ui-body-mult: 1; }

/* ← ボタンも基準を継承（ページごとに文字がぶれないように） */
.ui-scale .btn { font-size: inherit !important; }

/* 追加：ページ単位のベース（ホームの特大スケールから分離） */
.page-dashboard,
.page-analytics {
  font-size: var(--base-font-size);
  line-height: 1.6;
  text-align: left; /* 見出し・本文とも左揃えに寄せる（日本語は読みやすい） */  
}

/* 読み幅ラッパー（最大720px、左右16px内側余白） */
:root { --content-max: 720px; --side-pad: 16px; }
.content-wrap {
  max-width: var(--content-max);
  padding-left: var(--side-pad);
  padding-right: var(--side-pad);
  margin: 0 auto;
}

/* 主役ボタンの縦間隔（スマホで詰まり防止） */
.dash-cta { display:inline-block; margin-bottom:.5rem; }
@media (min-width: 641px){
  .dash-cta + .dash-cta { margin-left:.5rem; }
}
/* ===== HOME page ===== */
.home-root{
  font-size: var(--base-font-size);
  line-height: 1.6;
  text-align: left;            /* 日本語は本文左寄せが読みやすい */
}
/* HOME内のCTA（必要なリンク/ボタンに任意で付与） */
.home-cta{ display:inline-block; margin-bottom:.5rem; }
@media (min-width: 641px){
  .home-cta + .home-cta{ margin-left:.5rem; }
}

/* ===== Analytics: narrow content wrap (800px) ===== */
.narrow-wrap{
  display:flex; justify-content:center;
}
.narrow-wrap > *{
  /* ✅ 固定幅は廃止。PCでは最大800px、モバイルは100%で縮む */
  max-width: 800px;
  width: 100%;
}




/* === グラフ表示コンテナ === */
.graph-container {
  margin: 1em 0;
  text-align: center;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px 0 16px;
}

/* 見出しの中央揃えは header 内に限定 */
header h1,
header h2 {
  margin: 0.5em 0;
  text-align: center;
}
/* 本文エリアの見出しは左寄せ（読みやすさ重視） */
.page-analytics h1,
.page-analytics h2,
.page-analytics h3 { text-align: left; }

/* 上書き対策：.page-analytics の左寄せよりも強く、header内は常に中央寄せ */
.page-analytics header h1,
.page-analytics header h2 { text-align: center !important; }

/* 共通：セクション余白（従来の inline margin:2em auto を置換） */
.section-block { margin: 2em auto; }
.section-subtitle { margin-top: 1.5em; text-align: left; }
/* 共通ボタン群（中央寄せ＋上余白） */
.button-group { text-align:center; margin-top:20px; }


/* -----------------------------------------------------------
   テーブルデザイン（罫線あり）【上書き用】
   ※ 以下のスタイルは、HTML 側で <table> タグに class="table" を付けたものに適用します。
------------------------------------------------------------ */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 24px;
}



/* .table クラスのテーブル全体の外枠と基本スタイル */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--table-bg);
  border: 1px solid var(--table-border-color); /* 外枠：1px の薄いグレー */
  margin-bottom: 24px;
}

/* 各セルの罫線とパディング */
.table th,
.table td {
  border: 1px solid var(--table-border-color); /* セルごとの罫線 */
  padding: 10px;
  text-align: center;
  /* デフォルトで折り返し（横スク抑止）。必要なセルだけ .nowrap を使う */
  white-space: normal;
  word-break: break-word;
}

/* 奇数行の背景色 */
.table tr:nth-child(odd) td {
  background-color: var(--table-stripe-bg);
}

/* ホバー時の背景色 */
.table tr:hover td {
  background-color: var(--hover-bg);
}

/* 1列目（例：問題文）は左寄せ */
.table td:first-child,
.table .table-incorrect td:first-child,
.table .incorrect-top3 td:first-child {
  text-align: left !important;
}

/* ✅ 弱点Top5：列幅とヘッダ文字サイズ（見た目は従来同等） */
.weak-question-top5 { width:100%; table-layout:fixed; }
.weak-question-top5 thead th:nth-child(1) { width:20%; font-size:.8em; }
.weak-question-top5 thead th:nth-child(2) { width:50%; }
.weak-question-top5 thead th:nth-child(3) { width:15%; }
.weak-question-top5 thead th:nth-child(4) { width:15%; font-size:.85em; }

/* ✅ 改行・折返し（インライン style="white-space: pre-wrap" を置換） */
.prewrap {
  white-space: pre-wrap;         /* 日本語の文をそのまま改行可 */
  overflow-wrap: anywhere;       /* 長い語でも強制折返し可 */
  word-break: break-word;        /* 辞書分かち書きされない語も折返し */
}


/* -----------------------------------------------------------
   ボタン（共通）
------------------------------------------------------------ */
.back-button {
  display: inline-block;
  margin: 10px auto;
  padding: 10px 20px;
  background: var(--button-bg);
  color: var(--body-text-color);
  text-decoration: none;
  border-radius: 6px;
  text-align: center;
  transition: background 0.2s ease;
}

.back-button:hover {
  background: var(--button-hover-bg);
}
/* ===== Analytics: dense subcategory cards ===== */
.analytics-card{
  border:1px solid #ccc;
  border-radius:10px;
  padding:1em 1.2em;
  margin-bottom:1.5em;
  background-color:#f9f9f9;
}
.analytics-card__title{
  margin-bottom:.5em; font-weight:700;
}
.analytics-ttable{
  font-family: 'Courier New', monospace;
  font-size:1.1em;
  padding:.5em 0;
}
.analytics-ttable--row{
  display:flex;
  justify-content:space-between;
  width:95%;
  margin:0 auto .3em auto;
}
.analytics-ttable__cell{
  width:46%;
  text-align:left;
  white-space:nowrap;
}
.analytics-card__total{
  width:100%;
  text-align:right;
  padding-top:.5em;
}



/* -----------------------------------------------------------
   レスポンシブデザイン（スマホ対応）
------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  :root {
    --base-font-size: 15px; /* ✅ ← スマホ用の文字サイズ（1px小さい） */
  }
  
  body {
    padding: 8px;
  }
  
  .table, .table th, .table td {
    font-size: 14px; /* ✅ ← スマホ時にテーブル文字サイズを小さくしている */
  }
  
  header h1, header h2 {
    font-size: 20px;
  }
  
  .table th, .table td {
    padding: 8px 6px;
  }
  
  .back-button {
    font-size: 14px; /* ✅ ← スマホ時にボタンの文字サイズも調整 */
    padding: 8px 16px;
  }
}

/* .ui-scale を使うページでは、上のスマホ向け縮小を打ち消す（常に基準優先） */
.ui-scale .table, .ui-scale .table th, .ui-scale .table td,
.ui-scale header h1, .ui-scale header h2,
.ui-scale .back-button { font-size: inherit !important; }
/* 追加：アナリティクスの“セレクトフォームだけ”縦積み（スマホ） */
.analytics-filter label { margin-right: .5rem; }
.analytics-filter select { margin-right: .75rem; }
.analytics-filter { margin-bottom: 1em; }  /* ← インラインの余白をクラスに集約 */
/* 新規：PC時はgapで一定間隔、要素が増えても崩れない */
.analytics-filter--gap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem; /* 行間/列間 */
}
/* ← gap併用時は従来の右マージンを打ち消して二重適用を防止 */
.analytics-filter--gap label,
.analytics-filter--gap select {
  margin-right: 0 !important;
}

@media (max-width: 640px){
  .analytics-filter { text-align: left !important; }
  .analytics-filter--gap { display:block; } /* SPは縦積み */
  .analytics-filter label { display:block; margin: .25rem 0 .25rem; }
  .analytics-filter select { display:block; width:100%; margin: 0 0 .5rem 0; }
  .analytics-filter .btn { width:100%; }
}

/* 上書き：ティア・カテゴリ別正答率の1列目だけ中央寄せ */


#tier-category-summary td:first-child {
  text-align: center !important;
}

/* 上書き：ティア別パフォーマンスのティア列中央寄せ */
#tier-performance td:first-child {
  text-align: center !important;
}

/* 上書き：学年別成績推移の学年列を中央揃え */
#grade-trend td:first-child {
  text-align: center !important;
}

/* 上書き：カテゴリ別パフォーマンスのカテゴリ列を中央揃え */
#category-performance td:first-child {
  text-align: center !important;
}


/* 改善度ランキング：識別子を中央揃え、問題文を左揃え */
#improvement-ranking td:nth-child(1) {
  text-align: center !important;
}

#improvement-ranking td:nth-child(2) {
  text-align: left !important;
}

/* ✅ 苦手な問題トップ5：問題文と質問文の列は左寄せ */
.weak-question-top5 td:nth-child(2),
.weak-question-top5 td:nth-child(3){ text-align:left !important; }

@media screen and (max-width: 768px) {
  /* ← モバイル時の“実際の上書き先”。値はお好みで調整してください */
  .home-buttons{
    --home-btn-gap: 14px;   /* ボタン間の間隔（上下マージン） */
    --home-btn-py: 22px;    /* ボタンの高さ（上下パディング） */
    --home-btn-font: 2.0rem;/* ラベル文字サイズ */
  }
  /* 密カードの可読性：必要なら折返し許可（日本語長文対策） */
  .analytics-ttable__cell{ white-space:normal; }  
}


/* ===== Analytics: responsive charts ===== */
.chart-wrap { margin: 0 auto 1rem; max-width: 900px; }
.responsive-chart {
  display:block; width:100%; height:auto; /* 横スクロールを出さない */
}
.chart-caption { text-align:center; font-size:.95rem; color:#666; margin-top:.25rem; }
.chart-details summary { cursor:pointer; margin:.25rem 0 .5rem; }

@media (max-width: 768px){
  .chart-wrap { padding: 0 .5rem; } /* 端の余白を少し確保 */

  /* --- 弱点Top5：スマホで“見出し行プチ固定”＆表のコンパクト化 --- */
  .table-container{ max-height: 60vh; overflow: auto; } /* 縦スク可能域を確保 */
  .weak-question-top5 thead th{
    position: sticky; top: 0;
    background: var(--table-bg);
    z-index: 2; /* 行の上に来るように */
  }
  .weak-question-top5 th, .weak-question-top5 td{
    padding: 6px 6px;            /* わずかにコンパクト化 */
  }
  .weak-question-top5{ font-size: .95em; } /* 見た目ほぼ据え置きで情報量を確保 */  
}


/* === Analytics: 縦積み＆折返し＆横スクロール抑止（追加） === */
/* モバイルで“横並び化”を招くflex指定を抑え、縦に流す */
.page-analytics .narrow-wrap{
  display:block;              /* ← ここで flex を打ち消す！ */  
  max-width: 960px;
  margin: 0 auto;
  padding: 0 12px;
  overflow-x: visible;
}
/* ✅ ページ内の直下要素は常に画面幅にフィット */
.page-analytics .narrow-wrap > *{
  width:100% !important;
  max-width:100% !important;
}


/* ティアのブロックを強制的に縦積み（1カラム） */
.weak-tier{
  display: block;
  width: 100%;
  margin: 16px 0 24px;
  clear: both;
}

/* 弱点Top5テーブル：長文でも崩れないよう折返し */
.weak-question-top5 th,
.weak-question-top5 td{
  word-break: break-word;
  white-space: normal;
  vertical-align: top;
}

/* サブカテゴリ×ティアの“密カード”をスマホで1カラムに */
@media (max-width: 768px){
  .analytics-ttable--row{       /* 2列→1列へ */
    display: block;
    width: 100%;
    margin: 0 0 .4em 0;
  }
  .analytics-ttable__cell{
    width: 100%;
    white-space: normal;        /* 既存nowrapを上書き */
  }
}

/* === Weak Top5: スマホで“カード縦積み”にして横スクをなくす === */
@media (max-width: 900px){  /* ✅ 発火閾値を広げて確実に適用 */
  .table--stackable thead { display: none !important; }      /* 見出し行は非表示 */
  .table--stackable,
  .table--stackable tbody,
  .table--stackable tr,
  .table--stackable td { display: block !important; width:100% !important; }

  .table--stackable tr{
    margin: 0 0 .75rem 0;                                    /* 行間 */
    border: 1px solid var(--table-border-color);
    border-radius: 8px;
    background: var(--table-bg);
    overflow: hidden;
  }
  .table--stackable td{
    border: none;                                            /* セル境界線は消す */
    border-top: 1px solid var(--table-border-color);         /* セクション区切り */
    padding: 8px 10px;
    white-space: normal !important;                          /* 折返し許可（強制） */
    text-align: left;                                        /* 基本は左寄せ */
  }
  .table--stackable td:first-child{ border-top: none; }
  .table--stackable td::before{
    content: attr(data-label);                               /* 見出しラベル */
    display: block;
    font-weight: 700;
    color: #555;
    margin-bottom: .25rem;
  }
  /* 数値セルは右寄せを維持 */
  .table--stackable td.text-center{ text-align: right !important; }

  /* 文字サイズと余白をややコンパクトに */
  .weak-question-top5{ font-size: .95em; }
}

/* どうしても折り返したくないセルは .nowrap を付ける */
.nowrap{ white-space: nowrap !important; }

/* ---- 弱点Top5：サブカテゴリセルの薄色背景（th/td 両対応・縞色より強く） ---- */
.weak-question-top5 .subcat-cell{
  background-color: #eef8e6 !important;   /* 薄い黄緑 */
}
.weak-question-top5 tr:hover .subcat-cell{
  background-color: #e8f4dd !important;   /* ホバー時も維持 */
}

/* ---- 苦手Top5：サブカテゴリ列の強調（薄い黄緑） ---- */
/* PC（通常テーブル） */
.weak-question-top5 td.subcat-cell{
  background-color:#eef9e8 !important; /* 薄い黄緑 */
}

/* モバイル（stackableでカード化時） */
@media (max-width: 900px){
  .weak-question-top5.table--stackable td.subcat-cell{
    background-color:#eef9e8 !important;
    border-left:4px solid #b7e0b2;    /* 視認性UPのワンポイント */
  }
}