/* かなえスタディ 基本スタイル（スマホ 375px 優先・1カラム）。M1 骨格。 */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
    sans-serif;
  color: #2b2b2b;
  background: #f6f7f9;
  -webkit-text-size-adjust: 100%;
}

/* --- ログイン --- */
.login_body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.login_card {
  width: min(100%, 360px);
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.login_card h1 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  text-align: center;
  color: #3a6ea5;
}
.login_error {
  background: #fdecea;
  color: #b03a2e;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.role_choice {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.role_choice legend {
  padding: 0;
}
.role_option {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  border: 1px solid #d5d9e0;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

/* --- フォーム共通 --- */
.form_label {
  display: block;
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.8rem;
}
.form_input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 0.35rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  font-size: 1rem;
}
.btn_primary {
  display: block;
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 10px;
  background: #3a6ea5;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.btn_primary:hover {
  background: #315d8c;
}

/* --- アプリシェル（375px・下部タブ分の余白を確保） --- */
.app_body {
  background: #f6f7f9;
}
.app_shell {
  width: min(100%, 480px);
  margin: 0 auto;
  min-height: 100vh;
  background: #f6f7f9;
  padding-bottom: 72px; /* タブバーの高さぶん */
}
.app_header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border-bottom: 1px solid #eceef1;
  position: sticky;
  top: 0;
  z-index: 10;
}
/* #3897続報12: 要素が多いヘッダーで、幅が足りず.app_titleが極端に押し縮められると
   CJKテキストが1文字ずつ縦積みで折り返す崩れが起きた（オーナー実機スクショで発覚）。
   white-space:nowrapで折り返し自体を止め、あふれる場合は横スクロールにフォールバックする。 */
.app_title {
  margin: 0;
  font-size: 1.05rem;
  white-space: nowrap;
}
.logout_link {
  font-size: 0.8rem;
  color: #7a8290;
  text-decoration: none;
}
.switch_form {
  margin: 0;
}
.switch_select {
  font-size: 0.8rem;
  color: #333;
  background: #f4f5f7;
  border: 1px solid #e0e2e6;
  border-radius: 6px;
  padding: 0.3rem 0.4rem;
}
/* #3897続報2: アカウントごとの色分け（つぐみ=青系・かなえ=ピンク系・2026-08-29オーナー要望）。
   selectは「今ログイン中の本人」の色、option側は各兄弟の色（開いた選択肢一覧で見分けやすくする）。
   未知のaccount_key（.switch_select単体・.switch_opt単体）は中立グレーのまま（安全側フォールバック）。 */
.switch_select_kanae,
.switch_opt_kanae {
  background: #ffe0ec;
  border-color: #f0a8c0;
  color: #a3305c;
}
.switch_select_tsugumi,
.switch_opt_tsugumi {
  background: #d9ecff;
  border-color: #93bdea;
  color: #1a4c85;
}
.app_main {
  padding: 1rem;
}
.app_main_wide {
  max-width: 100%;
}
.today_label {
  font-size: 0.85rem;
  color: #7a8290;
  margin: 0 0 0.8rem;
}
.placeholder_card {
  background: #fff;
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  color: #555;
  font-size: 0.92rem;
}
.note_small {
  font-size: 0.8rem;
  color: #9098a3;
  margin-top: 0.6rem;
}

/* --- 下部タブバー（4つ） --- */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(100%, 480px);
  display: flex;
  background: #fff;
  border-top: 1px solid #eceef1;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
}
.tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-height: 60px;
  padding: 0.5rem 0;
  text-decoration: none;
  color: #9098a3;
  font-size: 0.7rem;
}
.tab_icon {
  font-size: 1.3rem;
  line-height: 1;
}
.tab.is_active {
  color: #3a6ea5;
}

/* --- チャット（💬・LINE風・まとめて表示） --- */
.chat_header {
  gap: 0.75rem;
}
.persona_switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #7a8290;
}
.persona_select {
  min-height: 36px;
  padding: 0.25rem 1.6rem 0.25rem 0.6rem;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
  color: #2b2b2b;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%237a8290'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}
.chat_main {
  padding: 0.9rem 0.8rem 0.4rem;
}
.chat_log {
  display: flex;
  flex-direction: column;
}
.chat_empty {
  text-align: center;
  color: #9098a3;
  font-size: 0.85rem;
  padding: 2rem 1rem;
}
.chat_row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.chat_row.is_kanae {
  justify-content: flex-end;
}
.chat_row.is_ai {
  justify-content: flex-start;
}
.chat_avatar {
  font-size: 1.3rem;
  line-height: 1;
  flex: 0 0 auto;
  margin-bottom: 0.15rem;
}
.chat_bubble {
  max-width: 78%;
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.is_kanae .chat_bubble {
  background: #7cc36b;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.is_ai .chat_bubble {
  background: #fff;
  color: #2b2b2b;
  border: 1px solid #eceef1;
  border-bottom-left-radius: 4px;
}

/* considering: 考え中ドット3つ */
.chat_dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.chat_dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b6bcc6;
  display: inline-block;
  animation: chat_blink 1.2s infinite ease-in-out both;
}
.chat_dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.chat_dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes chat_blink {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}

/* 入力バー（下部タブの上に固定） */
.chat_input_bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 60px; /* タブバーの高さぶん上に */
  width: min(100%, 480px);
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: #fff;
  border-top: 1px solid #eceef1;
  z-index: 15;
}
.chat_input {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 120px;
  padding: 0.6rem 0.8rem;
  border: 1px solid #cfd4dc;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.4;
  resize: none;
  font-family: inherit;
}
.chat_send_btn {
  flex: 0 0 auto;
  min-width: 60px;
  min-height: 44px;
  border: none;
  border-radius: 12px;
  background: #3a6ea5;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}
.chat_send_btn:disabled {
  background: #a9b6c6;
  cursor: default;
}
/* チャット画面は入力バーぶんの余白を確保（タブ60 + 入力バー約60） */
.chat_main {
  padding-bottom: 80px;
}

/* --- カスタム確認モーダル（ネイティブ confirm/alert 禁止・app.js と対） --- */
.modal_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.modal_overlay.is_visible {
  opacity: 1;
  pointer-events: auto;
}
.confirm_modal {
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  background: #fff;
  border-radius: 8px;
  padding: 1.1rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  margin: 1rem;
}
.confirm_modal_body {
  font-size: 0.92rem;
  color: #444;
  margin-bottom: 1rem;
  white-space: pre-line;
}
.confirm_modal_actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
}
.confirm_modal_actions button {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0.6rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}
.confirm_modal_cancel {
  background: #fff;
  border: 1px solid #ccc;
  color: #555;
}
.confirm_modal_ok {
  background: #c0392b;
  color: #fff;
  border: none;
}
.confirm_modal_ok:hover {
  background: #a93226;
}

/* --- ホーム（🏠） --- */
.home_streak {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  color: #2b2b2b;
}
.home_streak strong {
  font-size: 1.35rem;
  color: #e8791b;
}
.home_streak_total {
  margin-left: 0.6rem;
  font-size: 0.8rem;
  color: #7a8290;
}
.home_next {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 56px;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  margin-bottom: 1rem;
  text-decoration: none;
  font-size: 1rem;
}
.home_next_btn {
  background: #3a6ea5;
  color: #fff;
  box-shadow: 0 3px 10px rgba(58, 110, 165, 0.25);
}
.home_next_chip {
  background: #eef6ee;
  color: #2f6b34;
  border: 1px solid #d7e9d9;
}
.home_next_icon {
  font-size: 1.4rem;
  line-height: 1;
}
.home_next_text {
  font-weight: 600;
}
.home_card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
}
.home_card_title {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  color: #7a8290;
}
.home_row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0;
  border-top: 1px solid #f1f3f5;
  font-size: 0.95rem;
}
.home_row:first-of-type {
  border-top: none;
}
.home_row_top {
  align-items: flex-start;
}
.home_row_label {
  flex: 0 0 3.2rem;
  color: #9098a3;
  font-size: 0.85rem;
}
.home_row_val {
  flex: 1 1 auto;
}
.home_muted {
  color: #b0b6be;
}
.home_chip {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: #eef2f7;
  font-size: 0.85rem;
  color: #3a6ea5;
}
.home_mini_btn {
  display: inline-block;
  min-height: 40px;
  line-height: 40px;
  padding: 0 0.9rem;
  border-radius: 10px;
  background: #f2f6fb;
  border: 1px solid #d5e0ee;
  color: #3a6ea5;
  text-decoration: none;
  font-size: 0.9rem;
}
.home_mini_btn_wide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
}
/* 「絵本をひらく」ポップボタン（#3578）: 明るいオレンジ〜黄色グラデーション＋濃色文字でコントラスト確保 */
.home_mini_btn_pop {
  background: linear-gradient(135deg, #ffd54a, #ff9f43);
  border: none;
  color: #5a3a00;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(255, 159, 67, 0.4);
}
.home_mini_btn_pop:active {
  box-shadow: 0 2px 5px rgba(255, 159, 67, 0.4);
  transform: translateY(1px);
}
.home_todos {
  margin: 0;
  padding-left: 1.1rem;
}
.home_todos li.is_done {
  text-decoration: line-through;
  color: #b0b6be;
}
.home_week {
  display: flex;
  justify-content: space-between;
  gap: 0.2rem;
}
.home_week_day {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0;
  border-radius: 8px;
}
.home_week_day.is_today {
  background: #eef6ee;
}
.home_week_label {
  font-size: 0.75rem;
  color: #9098a3;
}
.home_week_mark {
  font-size: 1rem;
  line-height: 1;
}
.home_week_en {
  font-size: 0.7rem;
  color: #3a6ea5;
  text-decoration: none;
}
.home_chip_link {
  text-decoration: none;
}
.home_en_past {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.home_week_words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid #f1f3f5;
}

/* --- デッキ（🃏） --- */
.deck_flash {
  background: #eef6ee;
  color: #2f6b34;
  border: 1px solid #d7e9d9;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  text-align: center;
}
.deck_count {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  color: #7a8290;
}
.deck_count strong {
  color: #3a6ea5;
}
.deck_card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 1.4rem 1.1rem 1.1rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.2rem;
  min-height: 180px;
}
.deck_subject {
  position: absolute;
  top: 0.8rem;
  left: 0.9rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: #eef2f7;
  color: #3a6ea5;
  font-size: 0.8rem;
}
.deck_face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding-top: 1rem;
}
.deck_text {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.6;
  text-align: center;
  word-break: break-word;
}
.deck_answer {
  color: #1f5038;
  font-weight: 600;
}
.deck_flip_btn {
  min-height: 44px;
  padding: 0 1.4rem;
  border: none;
  border-radius: 12px;
  background: #3a6ea5;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}
.deck_judge {
  display: flex;
  gap: 0.7rem;
  width: 100%;
}
.deck_judge_form {
  flex: 1 1 0;
  margin: 0;
}
.deck_btn {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  cursor: pointer;
}
.deck_btn_ng {
  background: #fdecea;
  color: #b03a2e;
}
.deck_btn_ok {
  background: #7cc36b;
  color: #fff;
}
.deck_backmenu {
  width: 100%;
  text-align: center;
  margin-top: 0.4rem;
}
.deck_backmenu form {
  margin: 0;
}
.deck_delete_btn {
  background: none;
  border: none;
  color: #b0b6be;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}
.deck_done {
  background: #fff;
  border-radius: 16px;
  padding: 2rem 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.2rem;
}
.deck_done_emoji {
  font-size: 2.6rem;
  margin: 0 0 0.5rem;
}
.deck_done_text {
  margin: 0;
  color: #2f6b34;
  font-size: 1rem;
}
.deck_create_toggle {
  width: 100%;
  min-height: 48px;
  border: 1px dashed #cfd4dc;
  border-radius: 12px;
  background: #fff;
  color: #3a6ea5;
  font-size: 0.95rem;
  cursor: pointer;
}
.deck_create_form {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  margin-top: 0.7rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.deck_field {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 0.85rem;
  color: #555;
}
.deck_field > span {
  display: block;
  margin-bottom: 0.3rem;
}
.deck_input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}
.deck_create_submit {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 10px;
  background: #3a6ea5;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

/* === 📓 ノート（notes.php・M4）=== */
.notes_main {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.notes_search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.notes_search_input {
  flex: 1 1 100%;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
.notes_search_subject {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
}
.notes_search_btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 1rem;
  border: none;
  border-radius: 8px;
  background: #3a6ea5;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.notes_tiles {
  display: flex;
  gap: 0.6rem;
}
.notes_tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.7rem 0.4rem;
  background: #f4f7fb;
  border-radius: 12px;
}
.notes_tile_num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3a6ea5;
}
.notes_tile_label {
  font-size: 0.8rem;
  color: #666;
}
.notes_empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #666;
  line-height: 1.8;
}
.notes_empty_link {
  color: #3a6ea5;
  font-weight: 600;
  text-decoration: none;
}
.notes_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.notes_details {
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  overflow: hidden;
}
.notes_summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  list-style: none;
}
.notes_summary::-webkit-details-marker {
  display: none;
}
.notes_date {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: #888;
}
.notes_subject {
  flex: 0 0 auto;
  padding: 0.1rem 0.5rem;
  background: #eaf1f9;
  color: #3a6ea5;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.notes_title {
  flex: 1 1 auto;
  font-size: 0.95rem;
  font-weight: 600;
  color: #222;
}
.notes_body {
  padding: 0 0.8rem 0.8rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #333;
  border-top: 1px solid #f0f2f6;
  padding-top: 0.6rem;
}
.notes_tags {
  margin: 0.3rem 0.8rem 0.7rem;
  font-size: 0.8rem;
  color: #999;
}

/* --- えいごえほん（📖） --- */
.en_back {
  font-size: 0.85rem;
  color: #3a6ea5;
  text-decoration: none;
  flex: 0 0 auto;
}
.en_pageno {
  font-size: 0.8rem;
  color: #7a8290;
  flex: 0 0 auto;
  text-align: right;
}
.en_main {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: center;
}
.en_empty {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1rem;
  text-align: center;
  color: #555;
  line-height: 1.8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.en_empty_sub {
  font-size: 0.85rem;
  color: #9098a3;
}
.en_image {
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: block;
}
.en_text {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-size: 1.05rem;
  line-height: 1.7;
  color: #2b2b2b;
}
/* 複数文ページ（#3578 Phase1試作=aboutのみ）: ①②③番号付きリスト＋文ごとの🔊 */
.en_sent_row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0;
}
.en_sent_row + .en_sent_row {
  border-top: 1px solid #f0f2f5;
}
.en_sent_num {
  flex: 0 0 auto;
  color: #3a6ea5;
  font-weight: bold;
}
.en_sent_text {
  flex: 1 1 auto;
  margin: 0;
}
.en_sent_play {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid #d5e0ee;
  border-radius: 8px;
  background: #f2f6fb;
  cursor: pointer;
  font-size: 1rem;
}
.en_toggle_btn,
.en_audio_btn {
  width: 100%;
  min-height: 48px;
  border: 1px solid #d5e0ee;
  border-radius: 12px;
  background: #f2f6fb;
  color: #3a6ea5;
  font-size: 0.95rem;
  cursor: pointer;
}
.en_audio_btn {
  background: #3a6ea5;
  color: #fff;
  border: none;
}
/* #3897続報: 英語絵本の音声速度切替（左=ゆっくり/右=ふつうの常時タップ可能な2ボタン・
   role=radioのセグメントUI）。選択中の側はis_activeで塗り、非選択側は枠線のみ。
   2026-08-29続報3: 本文上部(旧.en_rate_bar)だと邪魔とのオーナー実機指摘で、
   ヘッダーの切替プルダウンの右へ移動。.en_rate_group_headerでヘッダー内の小型表示に絞る。 */
.en_rate_group {
  display: inline-flex;
  border: 1px solid #3a6ea5;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.en_rate_btn {
  min-height: 32px;
  padding: 0.3rem 0.7rem;
  border: none;
  border-left: 1px solid #3a6ea5;
  background: #fff;
  color: #3a6ea5;
  font-size: 0.8rem;
  cursor: pointer;
}
.en_rate_btn:first-child {
  border-left: none;
}
.en_rate_btn.is_active {
  background: #3a6ea5;
  color: #fff;
}
.en_rate_btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.en_rate_group_header {
  margin-left: auto;
}
.en_rate_group_header .en_rate_btn {
  min-height: 26px;
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
}
.en_audio_hint {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  color: #9098a3;
  line-height: 1.6;
}
.en_done_btn {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 12px;
  background: #3a6ea5;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}
.en_done_btn:disabled {
  background: #eef6ee;
  color: #2f6b34;
  cursor: default;
}
.en_daylist_title {
  width: 100%;
  margin: 0;
  font-size: 0.95rem;
  color: #2b2b2b;
}
.en_daylist_chips {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.en_daylist_chip {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #eef2f7;
  color: #3a6ea5;
  font-size: 0.9rem;
  text-decoration: none;
}
.en_daylist_back {
  text-decoration: none;
  text-align: center;
}

/* --- 親ダッシュボード（📊） --- */
.dash_main {
  padding-bottom: 1.2rem;
}
.dash_flash {
  background: #eef6ee;
  color: #2f6b34;
  border: 1px solid #d7e9d9;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  text-align: center;
}
.dash_week_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.dash_week_btn {
  min-height: 40px;
  line-height: 40px;
  padding: 0 0.9rem;
  border-radius: 10px;
  background: #f2f6fb;
  border: 1px solid #d5e0ee;
  color: #3a6ea5;
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
}
.dash_week_label {
  font-weight: 700;
  color: #333;
  font-size: 0.95rem;
}
.dash_tiles {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.dash_tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.8rem 0.4rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.dash_tile_icon {
  font-size: 1.1rem;
  line-height: 1;
}
.dash_tile_num {
  font-size: 1.35rem;
  font-weight: 700;
  color: #3a6ea5;
}
.dash_tile_unit {
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.1rem;
  color: #7a8290;
}
.dash_tile_label {
  font-size: 0.75rem;
  color: #7a8290;
}
.dash_muted {
  color: #b0b6be;
  font-size: 0.95rem;
  font-weight: 600;
}
.dash_card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
}
.dash_card_title {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  color: #7a8290;
}
.dash_heat {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
}
.dash_heat_day {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0;
  border-radius: 8px;
}
.dash_heat_day.is_today {
  background: #f4f7fb;
}
.dash_heat_label {
  font-size: 0.75rem;
  color: #9098a3;
}
.dash_heat_cell {
  width: 100%;
  min-height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #9098a3;
  background: #f1f3f5;
}
.dash_heat_low {
  background: #d7e9d9;
  color: #2f6b34;
}
.dash_heat_mid {
  background: #9ecf9f;
  color: #1f4d24;
}
.dash_heat_high {
  background: #1f5038;
  color: #fff;
}
.dash_empty {
  color: #666;
  line-height: 1.8;
  padding: 0.6rem 0;
}
.dash_report_body {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #333;
}
.dash_report_body h4,
.dash_report_body h5,
.dash_report_body h6 {
  margin: 0.8rem 0 0.4rem;
  color: #1f5038;
}
.dash_report_body h4:first-child,
.dash_report_body h5:first-child,
.dash_report_body h6:first-child {
  margin-top: 0;
}
.dash_report_body p {
  margin: 0.4rem 0;
}
.dash_report_body ul {
  margin: 0.3rem 0;
  padding-left: 1.2rem;
}
.dash_reply_form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f2f6;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dash_field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: #7a8290;
}
.dash_input {
  font: inherit;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid #d9dee6;
  resize: vertical;
}
.dash_reply_submit {
  min-height: 44px;
  border-radius: 10px;
  border: none;
  background: #3a6ea5;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.dash_replied_chip {
  margin-top: 1rem;
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #eef6ee;
  color: #2f6b34;
  border: 1px solid #d7e9d9;
  font-size: 0.85rem;
}
.dash_replied_body {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: #333;
  line-height: 1.6;
}
.dash_footnote {
  text-align: center;
  font-size: 0.78rem;
  color: #9098a3;
  margin-top: 0.4rem;
}
.dash_entry_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  background: #f2f6fb;
  border: 1px solid #d5e0ee;
  color: #3a6ea5;
  text-decoration: none;
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
}

/* === 📖 英語絵本の登録（english_admin.php・親専用・#3578） === */
.enadm_main {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.enadm_flash {
  background: #eef6ee;
  color: #2f6b34;
  border: 1px solid #d7e9d9;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
}
.enadm_error {
  background: #fdecec;
  color: #b3261e;
  border: 1px solid #f4c7c3;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
}
.enadm_audit_warn {
  background: #fff8e6;
  color: #6b5300;
  border: 1px solid #f0dfa0;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
}
.enadm_audit_warn p {
  margin: 0 0 0.3rem;
  font-weight: bold;
}
.enadm_audit_warn ul {
  margin: 0 0 0.4rem;
  padding-left: 1.2rem;
}
.enadm_form {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.enadm_field {
  display: block;
  font-size: 0.85rem;
  color: #555;
}
.enadm_field > span {
  display: block;
  margin-bottom: 0.3rem;
}
.enadm_input,
.enadm_textarea,
.enadm_file {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}
.enadm_textarea {
  resize: vertical;
}
.enadm_ocr_btn {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d5e0ee;
  border-radius: 10px;
  background: #f2f6fb;
  color: #3a6ea5;
  font-size: 0.9rem;
  cursor: pointer;
}
.enadm_ocr_btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.enadm_ocr_status {
  margin: -0.4rem 0 0;
  font-size: 0.82rem;
  color: #b3261e;
}
.enadm_submit {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 10px;
  background: #3a6ea5;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.enadm_list {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.enadm_list_title {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  color: #7a8290;
}
.enadm_empty {
  color: #9098a3;
  font-size: 0.9rem;
}
.enadm_list_items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.enadm_list_row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  background: #f7f9fc;
  color: #2b2b2b;
  text-decoration: none;
}
.enadm_list_no {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: #3a6ea5;
  font-weight: 600;
}
.enadm_list_word {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: #2f6b34;
  background: #eef6ee;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.enadm_list_text {
  flex: 1 1 auto;
  font-size: 0.85rem;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.enadm_list_audio {
  flex: 0 0 auto;
}

/* 英語絵本: 単語ヘッダ（ビューア最上部・#3578・縦幅圧縮） */
.en_word_head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.en_word {
  font-size: 20px;
  font-weight: 700;
  color: #2a3340;
}
.en_word_audio_btn {
  font-size: 18px;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid #d5dae1;
  border-radius: 8px;
  background: #f4f6f8;
}

/* 英語絵本: 語源1行チップ（デフォルト折りたたみ・タップで詳細展開・#3578 縦幅圧縮） */
.en_roots_chip {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  color: #4a3d75;
  background: #f8f6fc;
  border: 1px solid #d9d2ea;
  border-radius: 10px;
  padding: 8px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.en_roots_detail {
  margin-top: 6px;
}

/* 英語絵本: 挿絵（縦幅を占領しすぎないよう上限・タップで原寸表示・#3578） */
.en_image_trigger {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin-bottom: 10px;
  cursor: pointer;
}
.en_image {
  display: block;
  max-width: 100%;
  max-height: 45vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 10px;
}
.en_sticky_image_nav {
  position: sticky;
  top: 56px;
  z-index: 9;
  width: 100%;
  padding: 0 0 8px;
  background: #f6f7f9;
}
.en_sticky_image_nav .en_image_trigger {
  margin-bottom: 0;
}
.en_image_trigger.en_image_sticky {
  position: sticky;
  top: 56px;
  z-index: 1;
  box-shadow: 0 6px 14px rgba(34, 52, 72, 0.1);
}
.en_sent_nav {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 4px;
  padding: 4px 44px;
  border: 1px solid #d5e0ee;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 8px rgba(34, 52, 72, 0.08);
}
/* #3578: sticky挿絵の開閉（手動トグル＋ドリルシート連動の自動畳み）。
   transformでなくmax-heightで畳むのは、下の文リストを実際にせり上げるため。 */
.en_sticky_image_nav .en_image_trigger {
  overflow: hidden;
  max-height: 50vh;
  transition:
    max-height 0.22s ease-out,
    opacity 0.18s ease-out;
}
.en_sticky_image_nav .en_image_trigger.is_collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.en_img_toggle {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #d5e0ee;
  border-radius: 999px;
  background: #fff;
  color: #3a6ea5;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.en_img_toggle[aria-expanded="false"] {
  background: #eef3f9;
}
@media (prefers-reduced-motion: reduce) {
  .en_sticky_image_nav .en_image_trigger {
    transition: none;
  }
}
.en_sent_nav_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid #d5e0ee;
  border-radius: 999px;
  background: #f2f6fb;
  color: #3a6ea5;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.en_sent_nav_btn.is_active {
  border-color: #3a6ea5;
  background: #3a6ea5;
  color: #fff;
}
.en_image_modal_overlay {
  flex-direction: column;
}
.en_image_modal_img {
  max-width: 92vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.en_image_modal_close {
  margin-top: 12px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 22px;
  border: none;
  background: #fff;
  color: #2a3340;
  font-size: 18px;
}

.en_main {
  padding-bottom: 24px;
}

/* 英語絵本: 文リストUI（#3578刷新）。sticky下部バーを廃止しインライン表示に統一。 */
.en_sentlist {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 0.8rem 1rem;
  /* ドリルのボトムシート表示中はJSがpadding-bottomを付与し、対象行を隠さないようにする
     （#3578・2026-08-21・下の方の文でドリル空欄がシートの裏に隠れる修正）。 */
  transition: padding-bottom 0.2s ease-out;
}
.en_sentlist_multi .en_sent_item {
  scroll-margin-top: min(56vh, 330px);
}
.en_sentlist_head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #eceef1;
  margin-bottom: 0.4rem;
}
.en_sentlist_head .en_audio_btn,
.en_sentlist_head .en_done_btn {
  flex: 1 1 auto;
  width: auto;
  min-height: 40px;
}
.en_audio_hint {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #9098a3;
  margin: 0.3rem 0 0.5rem;
}
.en_sent_item {
  padding: 0.55rem 0;
  border-bottom: 1px solid #f0f2f5;
}
.en_sent_item:last-child {
  border-bottom: none;
}
.en_sent_head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.en_sent_num {
  flex: 0 0 auto;
  color: #3a6ea5;
  font-weight: bold;
  font-size: 15px;
}
.en_sent_check {
  margin-left: 2px;
}
.en_sent_placeholder {
  flex: 1 1 auto;
  color: #b6bcc6;
  letter-spacing: 2px;
}
.en_sent_full {
  flex: 1 1 auto;
  line-height: 1.6;
}
.en_sent_text_btn,
.en_sent_drill_btn {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #d5e0ee;
  border-radius: 8px;
  background: #f2f6fb;
  color: #3a6ea5;
  font-size: 13px;
}

/* 複数文ページの行レイアウト（#3578・2026-08-20オーナー実機フィードバック・現状aboutのみ）:
   3カラム固定。左=①番号＋「ド」ボタンを縦積み（固定幅）／中=英文テキスト（flex:1・①の右横の
   高さから始まる・折返しは中カラム内だけで起きる）／右=🔊と[文]を縦積み（固定幅）。
   英文の表示⇔非表示や折返しに関わらず、3カラムの位置関係は常に一定（2026-08-20再修正）。 */
.en_sent_head_multi {
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.en_sent_left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.en_sent_left .en_sent_drill_btn {
  min-width: 26px;
  min-height: 24px;
  padding: 0 6px;
  font-size: 11px;
}
.en_sent_text_col {
  flex: 1 1 auto;
  min-width: 0; /* flexアイテムの既定min-widthがcontentになり折返しが起きないのを防ぐ */
}
.en_sent_right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  align-self: flex-start;
}
/* 🔊と[文]は同じサイズに統一（オーナー指摘: 🔊だけ一回り大きかった）。 */
.en_sent_audio_btn,
.en_sent_right .en_sent_text_btn {
  min-width: 24px;
  min-height: 18px;
  padding: 6px 8px; /* タップ領域は44px相当を維持するためpaddingで確保（見た目は一回り小さく）。 */
  border: 1px solid #d5e0ee;
  border-radius: 8px;
  background: #f2f6fb;
  font-size: 11px;
  box-sizing: content-box;
}
/* ロック中（音声を1回聞くまで）はグレーアウト・タップは無効化しない（トースト表示のためJS側で判定）。 */
.en_locked {
  background: #eef0f3;
  color: #b6bcc6;
  border-color: #e3e6ea;
}
/* ロック中タップ時の小さいヒント（ネイティブalert禁止・#3578）。 */
.en_toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  width: max-content;
  max-width: 80%;
  margin: 0;
  padding: 8px 14px;
  border-radius: 20px;
  background: rgba(43, 43, 43, 0.85);
  color: #fff;
  font-size: 13px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s,
    transform 0.18s;
  z-index: 40;
}
.en_toast.is_show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.en_sent_drill {
  margin-top: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: #f7fafc;
  border: 1px solid #d9e4ee;
}
.en_sent_drill_text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 3px;
  line-height: 1.55;
  font-size: 15px;
}
.en_role_chunk {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 2px 3px;
  border: 1px solid #c9d8e6;
  border-radius: 7px;
  background: #fbfdff;
  line-height: 1.35;
}
.en_sent_drill_result {
  text-align: center;
  font-weight: 700;
  margin: 8px 0 0;
}
.en_sent_drill_result.is_ok {
  color: #2a5a37;
}
.en_sent_drill_result.is_ng {
  color: #b03a2e;
}
.en_sent_drill_result.is_locked {
  color: #8a6d3b;
}

/* ドリルの選択チップ共有ボトムシート（#3578）: 下からせり上がる・文リストは隠さない。 */
.en_drill_sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(100%, 480px);
  box-sizing: border-box;
  background: #fff;
  border-top: 1px solid #d9e4ee;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  z-index: 30;
  transition: transform 0.22s ease-out;
}
.en_drill_sheet.is_open {
  transform: translate(-50%, 0);
}
/* チップ領域は2行固定・横スクロール（2026-08-22オーナー指示・従来の縦スクロールから変更）。
   シート高さ＝チップ2行＋[チェック][とじる]行のみに詰まる。[チェック][とじる]
   （.en_drill_sheet_actions）はこの外＝常時可視の固定位置に留まる。 */
.en_drill_palette_frame {
  position: relative;
}
.en_drill_palette_scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px;
  scroll-padding: 0 8px;
}
/* 2026-08-29続報2: 矢印オーバーレイ（.en_drill_palette_edge・クリック不可なのにボタンに見えて
   迷わせるとオーナー実機指摘）は廃止。代わりに「本当にヒントだけ」の目立たない1行テキストへ縮小し、
   チェック/とじるボタンの直上に置く（ピル・枠線・背景を持たせない）。 */
.en_drill_swipe_hint {
  margin: 0.2rem 0 0.4rem;
  text-align: center;
  font-size: 0.7rem;
  color: #9098a3;
}
.en_drill_sheet_actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
/* #3897続報5/8: WH語彙集への導線。テキストリンクだと横幅を取りすぎたため、チェック/とじる行の
   一番左端に置く小さい❓アイコンボタンへ変更（2026-08-29オーナー指摘）。続報8でページ遷移をやめ
   その場フリップのトグルボタンに変更したため、選択中(is_active)の見た目も追加。 */
.en_drill_wh_btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border: 1px solid #d5dae1;
  border-radius: 10px;
  background: #fff;
  color: #6b7684;
  font-size: 1.1rem;
}
.en_drill_wh_btn.is_active {
  background: #3a6ea5;
  border-color: #3a6ea5;
  color: #fff;
}
/* WH語彙集パネル（チップの上にその場表示・#3897続報8/9）。チップ自体は隠さず常時表示のまま。
   シートの高さを圧迫しないよう内部だけ縦スクロールにする。 */
.en_drill_glossary_panel {
  max-height: 40vh;
  overflow-y: auto;
  margin: 0 0 10px;
  padding: 2px 2px 0;
  background: #fffaf0;
  border-radius: 12px;
}
.en_drill_glossary_panel .wh_shelf:first-child {
  padding-top: 0.4rem;
}
/* #3897続報9: ❓が押されている間、チップは「空欄埋め」でなく「説明へジャンプ」の役割になる。
   見た目でも伝わるよう、チップパレットに軽いハイライトを付ける（機能を隠さない程度に控えめ）。 */
.en_drill_palette.is_glossary_mode {
  outline: 2px dashed #3a6ea5;
  outline-offset: 4px;
  border-radius: 8px;
}
.en_drill_sheet_actions .en_drill_check {
  flex: 1 1 auto;
}
.en_drill_sheet_close {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #d5dae1;
  border-radius: 10px;
  background: #fff;
  color: #6b7684;
  font-size: 0.95rem;
}

/* 英語絵本: 前後ナビ・ことば図鑑（#3578） */
.en_nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.en_nav_btn {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 18px;
  border: 1px solid #d5dae1;
  border-radius: 10px;
  background: #f4f6f8;
  color: #2a3340;
  text-decoration: none;
  font-weight: 600;
}
.en_index_link {
  margin-left: auto;
  font-size: 14px;
  text-decoration: none;
  color: #4a6fa5;
  padding: 8px;
}

/* 近隣単語チップ（文末ナビ刷新・#3578・2026-08-21）: 前後2語ずつ最大5語の横スクロールstrip。
   2026-08-21同日追加指示でチップ行を◀まえ/つぎ▶(.en_nav)より上（先）に配置。ページ末尾＝
   文リスト/発音のみ案内/できたボタン直下に置く。現在語は強調表示（is_current・タップ不可）。 */
.en_neighbor_nav {
  margin-top: 14px;
}
.en_neighbor_scroll {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.en_neighbor_chip {
  flex: 0 0 auto;
  display: inline-block;
  padding: 8px 14px;
  min-height: 28px;
  border: 1px solid #d5dae1;
  border-radius: 16px;
  background: #f4f6f8;
  color: #6b7684;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
/* 現在語チップの強調色（2026-08-21同日追加指示: 濃緑→スカイブルー系）。
   #4FA8D8前後は白文字コントラスト比が約2.6:1でWCAG AA(4.5:1)未達のため、同系統で
   #1f7fa3まで暗くしてコントラスト比約4.5:1を確保（白文字の可読性を優先）。 */
.en_neighbor_chip.is_current {
  background: #1f7fa3;
  border-color: #1f7fa3;
  color: #fff;
  font-weight: 700;
}
.en_idx_progress {
  margin-bottom: 10px;
}
.en_idx_count {
  font-weight: 700;
  color: #2a3340;
}
.en_idx_bar {
  height: 10px;
  border-radius: 5px;
  background: #e7ebef;
  margin-top: 6px;
  overflow: hidden;
}
.en_idx_bar_fill {
  height: 100%;
  background: #57a86a;
  border-radius: 5px;
}
.en_idx_letters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0 10px;
  -webkit-overflow-scrolling: touch;
}
.en_idx_letter {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 34px;
  line-height: 34px;
  text-align: center;
  border: 1px solid #d5dae1;
  border-radius: 8px;
  background: #fff;
  color: #4a6fa5;
  text-decoration: none;
  font-weight: 700;
}
.en_idx_head {
  font-size: 15px;
  color: #6b7684;
  margin: 12px 0 6px;
  border-bottom: 1px solid #e7ebef;
}
.en_idx_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.en_idx_chip {
  display: inline-block;
  padding: 8px 12px;
  min-height: 28px;
  border: 1px solid #d5dae1;
  border-radius: 16px;
  background: #f4f6f8;
  color: #6b7684;
  text-decoration: none;
}
.en_idx_chip.is_done {
  background: #e8f4ea;
  border-color: #b9dcc1;
  color: #2a5a37;
  font-weight: 600;
}

/* 英語絵本: 挿絵生成プレビュー（#3578） */
.enadm_gen_preview {
  margin: 8px 0;
}
.enadm_gen_img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid #d5dae1;
}
.enadm_gen_note {
  font-size: 13px;
  color: #4a6fa5;
  margin-top: 4px;
}

/* 英語絵本: 音声と英文の不一致注意（#3578） */
.enadm_warn {
  background: #fff7e0;
  border: 1px solid #e8d48a;
  color: #7a5c00;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}

/* 英語絵本: 発音だけのページの案内（#3578） */
.en_pron_note {
  text-align: center;
  color: #4a6fa5;
  font-size: 14px;
  margin: 12px 0;
}

/* 英語絵本: 英文内の相互リンク（#3578・控えめな点線下線） */
.en_wlink {
  color: inherit;
  text-decoration: underline dotted #7fa3c9;
  text-underline-offset: 3px;
}
.en_text p {
  line-height: 2;
}

/* 英語絵本: コアイメージ枠（#3578） */
.en_core {
  border: 1px solid #d9e4ee;
  border-radius: 12px;
  background: #f7fafc;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.en_core_img {
  max-width: 70%;
  border-radius: 8px;
}
.en_core_hint {
  color: #35506e;
  font-size: 15px;
  font-style: italic;
  margin-top: 6px;
}

/* やくわりドリル＋もう一問（#3578） */
.en_drill {
  border: 1px solid #d9e4ee;
  border-radius: 12px;
  background: #f7fafc;
  padding: 12px;
  margin-bottom: 10px;
}
.en_drill_title {
  font-size: 16px;
  margin: 0 0 4px;
  color: #2a3340;
}
.en_drill_lead {
  font-size: 13px;
  color: #6b7684;
  margin: 0 0 10px;
}
.en_drill_text {
  line-height: 2.2;
  font-size: 15px;
}
.rd_blank {
  display: inline-block;
  min-width: 40px;
  min-height: 32px;
  padding: 1px 7px;
  margin: 0;
  border: 1px solid #9fb6cc;
  border-radius: 16px;
  background: #fff;
  color: #35506e;
  font-size: 14px;
  line-height: 1.2;
}
.rd_blank[data-filled="1"] {
  background: #eaf1fa;
  font-weight: 600;
}
.rd_blank.is_correct {
  background: #e8f4ea;
  border-color: #7fbf8f;
  color: #2a5a37;
}
.rd_blank.is_wrong {
  background: #fdecea;
  border-color: #e08a80;
  color: #b03a2e;
}
.rd_blank.is_starred {
  border-style: dotted;
  border-width: 2px;
  border-color: #4a3d75;
  font-weight: 700;
}
.rd_hint {
  color: #9098a3;
  font-size: 12px;
  margin: 0 1px;
}
/* 2行固定・列方向に流すグリッド（2026-08-22オーナー指示）: 類縁順(kanae_english_role_fixed_wh_order
   準拠)を保ったまま「上段→下段→次の列」の順で配置される（CSS Gridのgrid-auto-flow: columnの挙動）。
   同カテゴリが縦2つずつ→次の列という並びになる。 */
.en_drill_palette {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 6px;
  margin: 12px 0;
}
.rd_chip {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #d5dae1;
  border-radius: 14px;
  background: #fff;
  color: #35506e;
  font-size: 13px;
}
.rd_chip:disabled {
  opacity: 0.5;
}
/* ドリルチップのカテゴリ色分け（2026-08-20オーナー追加指示）: 淡色背景＋濃色文字でコントラスト確保。
   選択済み（:disabled・opacity 0.5）や正誤表示（.rd_blank側のis_correct/is_wrong）とは別要素なので衝突しない。 */
.rd_chip.cat_person {
  background: #ffe3c2;
  border-color: #e8b978;
  color: #7a4200;
}
.rd_chip.cat_thing {
  background: #d9f2d3;
  border-color: #9fd693;
  color: #1f5c1f;
}
.rd_chip.cat_action {
  background: #d3e6fb;
  border-color: #93bdea;
  color: #1a4c85;
}
.rd_chip.cat_quantity {
  background: #ead2f7;
  border-color: #c99fe0;
  color: #5a2382;
}
.rd_chip.cat_place {
  background: #fbf0b8;
  border-color: #e0cf6a;
  color: #6b5900;
}
.en_drill_check {
  display: block;
  width: 100%;
  min-height: 44px;
  border: none;
  border-radius: 10px;
  background: #3a6ea5;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
.en_drill_check:disabled {
  background: #a9b6c6;
}
.en_drill_result {
  text-align: center;
  font-weight: 700;
  margin-top: 10px;
}
.en_drill_result.is_ok {
  color: #2a5a37;
}
.en_drill_result.is_ng {
  color: #b03a2e;
}
.en_wh_quiz {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #d5dae1;
}
.en_wh_question {
  font-size: 15px;
  color: #2a3340;
  margin: 0 0 6px;
}
.en_wh_answer_blank {
  color: #6b7684;
  font-size: 14px;
}
.en_wh_answer_text {
  color: #2a5a37;
  font-weight: 700;
  margin-top: 6px;
}

/* 語源図鑑（#3578） */
.rt_head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.rt_root {
  font-size: 30px;
  font-weight: 700;
  color: #2a3340;
}
.rt_kind {
  font-size: 13px;
  color: #6b7684;
}
.rt_meaning {
  color: #35506e;
  font-size: 17px;
  font-style: italic;
  margin: 6px 0 2px;
}
.rt_note {
  color: #4a5561;
  font-size: 14px;
  margin-bottom: 8px;
}
.rt_part {
  color: #8a94a0;
  font-size: 12px;
}
.rt_count {
  display: inline-block;
  margin-left: 4px;
  min-width: 18px;
  border-radius: 9px;
  background: #dde7f2;
  color: #35506e;
  font-size: 12px;
  text-align: center;
}
.en_roots_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.en_roots_label {
  font-size: 13px;
  color: #6b7684;
}
.en_root_chip {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #d9d2ea;
  border-radius: 14px;
  background: #f5f2fb;
  color: #4a3d75;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

/* 英語絵本: 語源のインライン表示（#3578・タップせず意味が見える） */
.en_roots_box {
  border: 1px solid #d9d2ea;
  border-radius: 12px;
  background: #f8f6fc;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.en_root_line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 6px 2px;
  text-decoration: none;
  border-top: 1px solid #e9e4f4;
}
.en_root_line:first-of-type {
  border-top: none;
}
.en_root_name {
  font-weight: 700;
  font-size: 16px;
  color: #4a3d75;
}
.en_root_meaning {
  font-style: italic;
  color: #35506e;
  font-size: 14px;
}
.en_root_note {
  color: #4a5561;
  font-size: 13px;
  flex-basis: 100%;
}
.en_root_more {
  margin-left: auto;
  color: #8a94a0;
  font-size: 12px;
}

/* 語源イメージ（#3578） */
.rt_image {
  max-width: 80%;
  border: 1px solid #e0dced;
  border-radius: 10px;
  margin: 8px 0;
}
.en_root_thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border: 1px solid #e0dced;
  border-radius: 8px;
  background: #fff;
}

/* WH語彙集（#3897続報4〜6・screens/wh_glossary.php）。
   小5〜小6にポップで分かりやすくというオーナー要望（2026-08-29・Artifactで確認済み）で、
   カテゴリごとの色つき棚・絵文字イラスト・ドリルと同じチップ帯を追加。
   .wh_mainの中だけに閉じた配色（他画面のグレー基調には影響させない）。 */
.wh_main {
  background: #fffaf0;
  /* .app_shellの72px（タブバー用・このページはタブバー非表示だが共通スタイルなので既に付いている）
     に加えて、画面下部固定チップナビぶんの余白を追加する。 */
  padding-bottom: 32px;
}
.wh_shelf {
  padding: 1.1rem 0 0.2rem;
}
.wh_shelf_head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.wh_shelf_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 22px;
  flex: 0 0 auto;
}
/* カテゴリの色は既存の.rd_chip.cat_*（ドリルパレット）と同じトーンで統一する。 */
.wh_shelf_person .wh_shelf_icon {
  background: #ffe3c2;
}
.wh_shelf_thing .wh_shelf_icon {
  background: #d9f2d3;
}
.wh_shelf_action .wh_shelf_icon {
  background: #d3e6fb;
}
.wh_shelf_quantity .wh_shelf_icon {
  background: #ead2f7;
}
.wh_shelf_place .wh_shelf_icon {
  background: #fbf0b8;
}

/* 見出し（日本語の説明）は控えめ・その下の英語トークン一覧を大きく目立たせる
   （2026-08-29オーナー指摘: 「だれ？人を聞く」を小さく、「who? / whose?」を大きく）。 */
.wh_shelf_titles h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: #8a7b6f;
}
.wh_shelf_tokens {
  margin: 0 0 0.1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2a3340;
}

.wh_card {
  background: #fff;
  border-radius: 18px;
  padding: 1rem 1rem 1.05rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 4px 0 rgba(59, 47, 42, 0.06);
  scroll-margin-top: 1rem;
}
.wh_card_top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
/* #3897続報10: 英語トークンの下にカタカナ読みを添える（小5〜小6が読み方自体を
   知らない可能性への配慮・音声は今回作らずテキストのルビで対応）。 */
.wh_token_stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}
.wh_reading {
  font-size: 0.68rem;
  font-weight: 500;
  color: #8a7b6f;
}
.wh_badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
}
.wh_shelf_person .wh_badge {
  background: #ffe3c2;
  color: #7a4200;
}
.wh_shelf_thing .wh_badge {
  background: #d9f2d3;
  color: #1f5c1f;
}
.wh_shelf_action .wh_badge {
  background: #d3e6fb;
  color: #1a4c85;
}
.wh_shelf_quantity .wh_badge {
  background: #ead2f7;
  color: #5a2382;
}
.wh_shelf_place .wh_badge {
  background: #fbf0b8;
  color: #6b5900;
}
.wh_meaning {
  font-size: 1.15rem;
  font-weight: 900;
  color: #2a3340;
}

.wh_scene {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.9rem 0.5rem;
  border-radius: 14px;
  margin-bottom: 0.7rem;
  font-size: 2.2rem;
}
.wh_shelf_person .wh_scene {
  background: #ffece1;
}
.wh_shelf_thing .wh_scene {
  background: #e2f7ec;
}
.wh_shelf_action .wh_scene {
  background: #e6f1fe;
}
.wh_shelf_quantity .wh_scene {
  background: #f4e9fb;
}
.wh_shelf_place .wh_scene {
  background: #fff6de;
}
.wh_scene_stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.wh_scene_label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #8a7b6f;
}
.wh_scene_vs {
  font-size: 0.68rem;
  font-weight: 700;
  color: #8a7b6f;
  text-align: center;
  line-height: 1.3;
  max-width: 5rem;
}

.wh_note {
  color: #4a5561;
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0 0 0.7rem;
}
.wh_example {
  border-top: 1px dashed #f0e4d4;
  padding-top: 0.6rem;
  margin-top: 0.4rem;
}
.wh_example_en {
  color: #2a3340;
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0 0 2px;
}
.wh_example_ja {
  color: #8a7b6f;
  font-size: 0.82rem;
  margin: 0;
}

/* --- 画面下部固定のチップナビ（ドリルのボトムシートと同じ2行横スクロール・チェック/とじるは無し） --- */
.chipnav_bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: #fff;
  border-top: 1px solid #f0e4d4;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 16px rgba(59, 47, 42, 0.08);
}
.chipnav_scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.chipnav {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 6px;
}
.wh_navchip {
  display: inline-block;
  text-decoration: none;
}

/* === 🔍 単語データ監査（screens/english_audit.php・親専用・#4321） === */
.enaud_main {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.enaud_error {
  background: #fdecec;
  color: #b3261e;
  border: 1px solid #f4c7c3;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
}
.enaud_tabs {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
}
.enaud_tab {
  flex: 0 0 auto;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  background: #f0f0f0;
  color: #444;
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
}
.enaud_tab.is_active {
  background: #1f5038;
  color: #fff;
}
.enaud_count {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
}
.enaud_pager {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.enaud_pager_btn {
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: #eee;
  color: #333;
  text-decoration: none;
  font-size: 0.85rem;
}
.enaud_pager_btn[aria-disabled="true"] {
  opacity: 0.4;
}
.enaud_jump {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}
.enaud_jump_input {
  width: 4rem;
  padding: 0.3rem;
}
.enaud_jump_btn {
  padding: 0.3rem 0.6rem;
}
.enaud_rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.enaud_row {
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}
.enaud_row_no {
  font-weight: bold;
  color: #666;
}
.enaud_row_word {
  font-weight: bold;
}
.enaud_row_badges {
  font-size: 0.85rem;
  color: #777;
}
.enaud_row_detail {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: #b3261e;
}
.enaud_row_actions {
  flex-basis: 100%;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.3rem;
}
.enaud_row_link {
  font-size: 0.85rem;
}
.enaud_ack_form {
  display: inline;
}
.enaud_ack_btn {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  background: #f0f0f0;
  border: 1px solid #ddd;
}
.enaud_empty {
  color: #888;
  font-size: 0.9rem;
}