/* ==========================================================
   ONERことば日記 - モックアップ用スタイル
   温かい / やさしい / 余白多め / スマホ優先
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/* ==========================================================
   hidden は、かならず隠す（2026-07-17）
   ----------------------------------------------------------
   HTMLの hidden は「display:none にする」だけの弱い指定なので、
   CSSで display を書いた要素には【負ける】。
   そのせいで「先生用の言語切替（.settings-preview は display:flex）」が、
   hidden を付けているのに【学習者に見えていた】（そめ先生が発見）。
   このファイルには前から .ai-feedback[hidden] { display:none } という行があり、
   同じ問題を一度踏んで、そこだけ塞いだ跡になっていた。ここで根元から塞ぐ。
   ※JSが hidden を外せば（el.hidden = false）ふつうに出る。
   ========================================================== */
[hidden] {
  display: none !important;
}

:root {
  --color-bg: #F3ECDF;
  --color-frame-bg: #FFFCF6;
  --color-primary: #E07A5F;
  --color-primary-dark: #C9613F;
  --color-secondary: #8FA98A;
  --color-yellow: #F2C879;
  --color-text: #4A3F37;
  --color-text-soft: #9C8C7A;
  --color-border: #ECE1CF;
  --color-card: #FFFFFF;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 6px 20px rgba(74, 63, 55, 0.08);
}

/* 中国語を学ぶモードは寒色系（ティール）。日本語＝暖色との切り替えが一目で分かる。
   :root の色変数を上書きするだけで、アプリ全体の色が変わる（色はすべて変数経由のため）。 */
/* 英語を学ぶモード＝ラベンダー（紫）。
   日本語＝暖色テラコッタ／中国語＝寒色ターコイズ の次に来る「第3の点」で、
   三つ並べたときに一目で区別できる。 */
:root[data-learn="en"] {
  --color-bg: #F7F5FE;
  --color-frame-bg: #FDFCFF;
  --color-primary: #C5B9F7;
  --color-primary-dark: #A99BEE;
  --color-secondary: #DCD5FA;
  --color-yellow: #D8D0FA;
  --color-text: #3E3760;
  --color-text-soft: #918BAE;
  --color-border: #EEEAFC;
  --color-card: #FFFFFF;
  --shadow-soft: 0 6px 20px rgba(62, 55, 96, 0.09);
}

:root[data-learn="zh"] {
  --color-bg: #E9F7F8;
  --color-frame-bg: #F5FCFC;
  --color-primary: #61CCD5;
  --color-primary-dark: #48B4BE;
  --color-secondary: #93D2D8;
  --color-yellow: #8EDCE2;
  --color-text: #2C4245;
  --color-text-soft: #74969A;
  --color-border: #D6EDEF;
  --color-card: #FFFFFF;
  --shadow-soft: 0 6px 20px rgba(44, 66, 69, 0.09);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic',
    'Yu Gothic', 'Meiryo', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 32px 16px;
  line-height: 1.7;
}

h1, h2 {
  margin: 0;
  font-weight: 700;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- 電話フレーム ---------- */

.phone {
  position: relative;
  width: 390px;
  max-width: 100%;
  min-height: 780px;
  background: var(--color-frame-bg);
  border-radius: 36px;
  box-shadow: var(--shadow-soft), 0 0 0 10px #fff, 0 0 0 11px var(--color-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 96px; /* ボトムナビの高さぶん余白 */
}

/* ---------- 言語切り替え（JavaScriptなし / ラジオボタン＋:checkedを利用） ---------- */

.lang-switch {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 18px 0;
}

.lang-switch-hint {
  align-self: center;
  font-size: 11px;
  color: var(--color-text-soft);
  margin-right: 2px;
}

.lang-option {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-text-soft);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.lang-pack {
  display: none;
}

#lang-ja:checked ~ .phone .lang-pack-ja,
#lang-zh:checked ~ .phone .lang-pack-zh {
  display: contents;
}

#lang-ja:checked ~ .phone .lang-switch label[for="lang-ja"],
#lang-zh:checked ~ .phone .lang-switch label[for="lang-zh"] {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- 画面の切り替え（JavaScriptなし / CSSの :target を利用） ---------- */

.screen {
  display: none;
  order: 2;
  padding: 28px 22px 40px;
  flex-direction: column;
  gap: 20px;
}

.screen-home {
  display: flex;
  order: 1;
}

.screen:target {
  display: flex;
  order: 1;
}

.screen:target ~ .screen-home {
  display: none;
}

/* ---------- 共通パーツ ---------- */

.screen-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.screen-header h1 {
  font-size: 20px;
}

.back-link {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  font-size: 16px;
}

.screen-date {
  color: var(--color-text-soft);
  font-size: 14px;
}

/* 書く画面の「今日／昨日」切替（前日のひとことを翌朝にも書ける） */
.write-day {
  display: flex;
  gap: 8px;
}
.write-day-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text-soft);
  cursor: pointer;
}
.write-day-btn.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* 先生用ダッシュボード（匿名の全体数） */
.dash-metric {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 12px 0;
}
.dash-metric-label {
  font-size: 13px;
  color: var(--color-text-soft);
}
.dash-metric-num {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 4px;
}
.dash-days {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin: 8px 0 12px;
}
.dash-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dash-day-num {
  font-size: 12px;
  color: var(--color-text-soft);
}
.dash-bar {
  width: 60%;
  min-height: 3px;
  background: var(--color-primary);
  border-radius: 4px 4px 0 0;
}
.dash-day-lab {
  font-size: 11px;
  color: var(--color-text-soft);
}

/* 先生の日記「漢字の読み方を見る」蛇腹（日本語学習のときだけ出る） */
.sensei-reading-toggle {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: none;
  border: none;
  padding: 8px 0 4px;
  cursor: pointer;
  text-align: left;
}
.sensei-reading-toggle::before { content: "▸ "; }
.sensei-reading-toggle[aria-expanded="true"]::before { content: "▾ "; }
.sensei-readings {
  border-top: 1px dashed var(--color-border);
  margin-top: 2px;
  padding-top: 8px;
}
.sensei-reading-item {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.9;
  margin: 0;
}

/* 本文の上に出るふりがな（漢字は読み・外来語は原語）。押したときだけ表示 */
/* 【2026-08-19】ホームのカードだけでなく、過去の日記の画面でもふりがなを出す。
   見た目のクラス（.sensei-journal-body）ではなく、機能だけの目印 .furigana-body に付け替えた。
   （過去の画面のカードは .diary-quote-card で、文字の大きさが違う） */
.furigana-body rt {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-soft);
}
.furigana-host.furigana-on .furigana-body {
  line-height: 2.5; /* ふりがなが乗るぶん、行間を広げて重ならないように */
}

/* 外来語（原語）＝本文の上でなく、下に小さくまとめて出す */
.sensei-loanwords {
  border-top: 1px dashed var(--color-border);
  margin-top: 8px;
  padding-top: 8px;
}
.sensei-loanwords-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-soft);
  margin: 0 0 2px;
}
.sensei-loanword-item {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}

.hint-text {
  color: var(--color-text-soft);
  font-size: 14px;
}

.hint-text.center {
  text-align: center;
}

.cross-link {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-soft);
}

.cross-link a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.btn-primary,
.btn-secondary {
  display: block;
  text-align: center;
  width: 100%;
  padding: 16px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(224, 122, 95, 0.35);
}
.btn-primary:disabled {
  opacity: 0.45;
  box-shadow: none;
  cursor: default;
}

.btn-secondary {
  background: var(--color-card);
  color: var(--color-primary-dark);
  border: 2px solid var(--color-primary);
}

/* ---------- ホーム画面 ---------- */

.home-header {
  padding-top: 8px;
}

.home-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.home-header-top .app-eyebrow {
  margin-bottom: 0;
}

.settings-link {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card);
  box-shadow: var(--shadow-soft);
  font-size: 15px;
}

.app-eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
  font-weight: 700;
  margin-bottom: 6px;
}

/* ホームのいちばん上の一文（アプリの考えを一言で）。
   【2026-08-11】前はここに「今日も、書いてみましょう。」を24pxで出し、この文は下に
   13pxで添えていた。声かけを先生のカードに一本化したので、この文が見出しの位置に上がった。
   24pxのままだとスマホで2行になり、「今日のひとことを書く」が下に押されるので18pxにする
   （そめ先生）。消すには惜しい言葉＝はじめて開いた人に、何をする場所かを伝えている。 */
.home-greeting {
  font-size: 18px;
  margin-bottom: 8px;
}

.home-sub {
  font-size: 13px;
  color: var(--color-text-soft);
}

/* そめ先生の応援＝本人が話しかける“吹き出し”。下の四角いボタンとはっきり分ける。 */
.sensei-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sensei-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  margin-top: 2px;
}

.sensei-content {
  position: relative;
  flex: 1;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  /* 左上を角ばらせて“話しかけ”の吹き出し感 */
  border-radius: 4px 16px 16px 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sensei-content::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 14px;
  width: 12px;
  height: 12px;
  background: var(--color-card);
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transform: rotate(45deg);
}

.sensei-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.sensei-text {
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

/* ---------- ONERからのひとこと（自動声かけ／控えめ） ---------- */

.oner-note-card {
  background: transparent;
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.oner-note-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  opacity: 0.9;
}

.oner-note-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oner-note-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-soft);
}

.oner-note-text {
  font-size: 12px;
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* ---------- そめ先生の日記（読み物・見本） ---------- */

.sensei-journal-card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  border-top: 2px dashed var(--color-border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sensei-journal-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sensei-journal-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
}

.sensei-journal-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
}

.sensei-journal-date {
  font-size: 11px;
  color: var(--color-text-soft);
}

/* 日付が空のときは、よけいなすき間ができないように隠す */
.sensei-journal-date:empty {
  display: none;
}

.sensei-journal-body {
  font-size: 13px;
  line-height: 1.7;
}

.sensei-journal-note {
  font-size: 11px;
  color: var(--color-text-soft);
}

/* 挑戦状のことばが、先生の日記の本文のどこに出ているか（2026-08-29・そめ先生）。
   ★言葉で「今日の日記から」と書くより、本文の中で光らせるほうが早い。
   色は付けず、うすい灰色だけ。日記そのものの読みやすさを邪魔しない。 */
.sensei-term-mark {
  /* ★2026-08-29、うすい灰色では控えめすぎた（そめ先生）。蛍光ペンの色にする。
     var(--color-yellow) は3つのテーマそれぞれの「明るい色」なので、
     日本語＝黄／中国語＝水色／英語＝薄紫 と、どのモードでも下の字が読めるまま光る。
     挑戦状の紙も同じ系統の色なので、「この色＝挑戦状のもの」というつながりも出る。 */
  background: rgba(242, 200, 121, 0.65);
  background: color-mix(in srgb, var(--color-yellow) 70%, transparent);
  border-radius: 3px;
  padding: 0 3px;
  /* 下だけ少し濃くして、ペンで引いた感じにする */
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
}

/* ---------- 今日の挑戦状（設計は CHALLENGE.md） ----------
   そめ先生が投げる一枚。日記の下に、少しだけ紙をずらして置いた見た目にする。
   ★見出しに名前は入れない。最後に「— そめ」と署名する。
     「そめ先生の挑戦状」だと三人称になって、アプリからの課題に戻ってしまう。 */
/* 【2026-08-29・見た目を直した】
   最初は白い枠に薄い背景で、日記の付け足しにしか見えなかった（実機でそめ先生が指摘）。
   ★左に太い線を1本入れて「貼られた一枚」に見せる。色は変数のままなので、
     日本語＝暖色／中国語＝ティール／英語＝ラベンダー のどれでも成り立つ。
   ★ただし【大きくしすぎない】。ここは圧をかける場所ではない。
     いちばん強い合図は、下の［書いてみる］ボタンそのもの。 */
.sensei-challenge {
  margin-top: 18px;
  padding: 0; /* 中身の左右は下の margin で付ける（見出しの帯だけ端まで伸ばすため） */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  /* 紙の色。★2026-08-29、そめ先生「色が同じ色すぎてわかりにくい」。
     アプリの主色（オレンジ）で塗っていたので、まわりに溶けていた。
     和紙のような色にして、帯を【墨色】にした（下）。自分ノートの緑とも、主色とも重ならない。
     color-mix が使えない端末では、上の1行（薄い紙色）がそのまま残る。 */
  background: var(--color-frame-bg);
  background: color-mix(in srgb, var(--color-yellow) 14%, var(--color-card));
  box-shadow: var(--shadow-soft);
  overflow: hidden; /* 見出しの帯の角を、札の角に合わせる */
}

/* ★見出しは【帯】にする。ここが「挑戦状らしさ」の芯。
   実機で「おとなしすぎる」と言われて直した（2026-08-29）。
   色は変数のままなので、日本語＝暖色／中国語＝ティール／英語＝ラベンダー のどれでも成り立つ。 */
.sensei-challenge-title {
  margin: 0;
  padding: 11px 16px;
  /* ★帯は【墨色】。var(--color-text) は3つのテーマすべてで「いちばん濃い色」なので、
     どのモードでも白抜きが読める。しかも主色（オレンジ／ティール／ラベンダー）とも、
     自分ノートの緑とも重ならない＝一目で「これは別のもの」と分かる。
     書状・果たし状は墨で書くもの、という見立てでもある。 */
  background: var(--color-text);
  color: #fff;
  /* 【絵文字のえらび方・2026-08-29】
     ⚔️（交差した剣）も 📜（巻物）も、実機で「わかりにくい」。どちらも線が細かく、
     この大きさだと形が消える。いったん外したが、そめ先生の「遊び心があってそめらしい」で戻した。
     ★条件は【一色の塊であること】。🔥（炎）🎯（的）は、輪郭だけで何か分かるので小さくても残る。
     並べたのは、そめ先生の「いくつか並べてもよさそう」から。
     文字は少し小さくして、絵文字と釣り合わせた。 */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  /* ★左に2つ並べると重心が片寄って落ち着かなかった（そめ先生）。
     【同じ絵文字で挟んで、中央ぞろえ】にすると旗のように見えて収まる。
     左右で違う絵文字にすると、また重心がずれる。 */
  text-align: center;
}

/* 見出し以外は、左右に余白をつける（帯だけ端まで伸ばすため） */
.sensei-challenge > *:not(.sensei-challenge-title) {
  margin-left: 16px;
  margin-right: 16px;
}

/* 「↑ 今日の日記から、ひとつ」。上の日記とこの一枚をつなぐ、ただ一行。
   ★小さくてよい。読ませたいのは下の投げかけのほうなので、ここは道しるべに徹する。 */
.sensei-challenge > .sensei-challenge-from {
  margin-top: 12px;
  font-size: 11px;
  color: var(--color-text-soft);
}

.sensei-challenge > .sensei-challenge-call {
  margin-top: 6px;
}

.sensei-challenge > *:last-child {
  margin-bottom: 14px;
}

/* 日本語を先に、大きく。ここがそめ先生の声。 */
.sensei-challenge-call {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 700;
}

/* 母語は下に、小さく。読めなくて固まる人を出さないための保険であって、主役ではない。 */
.sensei-challenge-call-sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* 署名。★ここだけ「そめ先生」ではなく「そめ」。本人が書いた一枚だという合図なので、
   小さくしすぎない（読み飛ばされたら意味が無い）。 */
.sensei-challenge-sign {
  margin-top: 10px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* ヒントはたたんでおく。先に答えを見せない＝まず自分で考えてもらう。 */
.sensei-challenge-hint {
  margin-top: 10px;
  border-top: 1px dashed var(--color-border);
  padding-top: 8px;
}

.sensei-challenge-summary {
  font-size: 12px;
  color: var(--color-text-soft);
  cursor: pointer;
}

.sensei-challenge-hint p {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.7;
}

/* 「例文」の見出し。意味・使いかたと同じ見た目だと、どこからが例文か分からない。 */
.sensei-challenge-examples-label {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-soft);
  letter-spacing: 0.08em;
}

.sensei-challenge-examples {
  margin-top: 2px;
  color: var(--color-text-soft);
}

/* ---------- 挑戦状に、一文で返すところ（Step 2） ---------- */

.sensei-challenge-answer {
  margin-top: 12px;
}

.sensei-challenge-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-frame-bg);
  /* ★16px より小さくすると、iPhoneが勝手に拡大する。書くところは必ず16px以上。 */
  font-size: 16px;
  line-height: 1.7;
  font-family: inherit;
  resize: vertical;
}

/* ★ボタンも【墨色】にそろえる（2026-08-29・そめ先生）。
   帯が墨・ボタンがオレンジだと、札の中で色が2つ喧嘩する。
   墨でそろえると「この一枚のもの」に見えるし、和紙色の上で白抜きがいちばん強く出る。
   影も墨に合わせる（オレンジの影が残っていると、色が濁って見える）。 */
.sensei-challenge-send {
  width: 100%;
  margin-top: 8px;
  background: var(--color-text);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.sensei-challenge-status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-soft);
}

/* 返ってきたところ。★点数もまるばつも出さない。
   【2026-09-02】前はここに「直した文」しか出していなかった＝何が変わったのか
   本人に分からない。自分ノートと同じ形（書いた文 → 直した文）にそろえた。 */
.sensei-challenge-reply {
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-frame-bg);
}

/* 自分が書いた文。自分ノートの .before / .after と同じ形にする
   ＝矢印と「薄い小さい字 / 濃い太字」の対比だけ。★取り消し線は使わない（上の1412行の理由）。 */
.sensei-challenge-mine {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-soft);
  margin-bottom: 2px;
}

.sensei-challenge-natural {
  font-size: 15px;
  line-height: 1.8;
  font-weight: 700;
}

.sensei-challenge-comment {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
}

.sensei-challenge-kept {
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-text-soft);
}

.action-featured {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: 0 10px 24px rgba(224, 122, 95, 0.35);
}

.action-featured-icon {
  font-size: 30px;
}

.action-featured-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.action-featured-title {
  font-size: 16px;
  font-weight: 700;
}

.action-featured-desc {
  font-size: 12px;
  opacity: 0.9;
}

.action-grid-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.action-card-small {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 14px 6px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.action-icon-small {
  font-size: 20px;
}

.action-title-small {
  font-size: 11px;
  font-weight: 700;
}

.settings-preview {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-preview-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-soft);
}

.settings-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-preview-list li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.settings-key {
  color: var(--color-text-soft);
}

.settings-value {
  font-weight: 700;
  color: var(--color-text);
}

/* 日記の文字数カウンター */
.char-count {
  margin: 4px 2px 0 0;
  font-size: 12px;
  color: var(--color-text-soft);
  text-align: right;
}

.char-count.is-full {
  color: var(--color-primary);
  font-weight: 700;
}

/* 音声入力の案内（書く画面） */
.voice-hint {
  margin: 2px 2px 0;
  font-size: 12px;
  color: var(--color-text-soft);
}

/* 日記を読む画面：その日えらんだ気分（アイコン＋ことば） */
.entry-mood {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 10px;
  padding: 4px 12px 4px 6px;
  background: var(--color-bg);
  border-radius: 999px;
}
.entry-mood[hidden] { display: none; }
.entry-mood-icon {
  width: 24px;
  height: 24px;
}
.entry-mood-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-soft);
}

/* 学ぶ言語の切り替え（設定画面） */
.learn-switch {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.learn-btn {
  flex: 1;
  padding: 10px 4px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-card);
  color: var(--color-text-soft);
  /* 3言語（日本語・中国語・英語）を横一列に並べるので、スマホの幅で折り返さない大きさにする */
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.learn-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.settings-preview-note {
  font-size: 11px;
  color: var(--color-text-soft);
}

.settings-preview-note.is-error {
  color: var(--color-primary);
  font-weight: 700;
}

/* プランの1行だけは太くする。
   ここは【その人がいまどの状態か】を言う唯一の行。
   壁ができた日に「なぜ書けないのか」を探す人が、最初に目を落とす場所になる。
   （LAUNCH_PLAN.md の「10」／文字の大きさと色は、まわりに合わせたまま） */
.settings-preview-note.is-plan {
  font-weight: 700;
}

/* そめ先生の日記を書く欄（先生用） */
.sensei-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.sensei-edit-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
}

.sensei-edit-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
}

textarea.sensei-edit-input {
  resize: vertical;
  min-height: 96px;
  line-height: 1.7;
}

.sensei-edit-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

#ja-screen-sensei .btn-primary {
  margin-top: 10px;
}

/* 先生の日記画面：アイコン写真の行 */
.sensei-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
/* アイコン写真のクロッパー（丸の中でドラッグ＝位置、バー＝大きさ） */
.ava-crop {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  position: relative;
  touch-action: none;
  cursor: grab;
}
.ava-crop:active { cursor: grabbing; }
.ava-crop img {
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 96px;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.ava-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.ava-zoom-row[hidden] { display: none; }
.ava-zoom-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-soft);
}
.ava-zoom-row input[type="range"] { flex: 1; }
.sensei-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sensei-avatar-actions .btn-secondary,
.sensei-avatar-actions .btn-primary {
  margin: 0;
  text-align: center;
}

/* そめ先生の日記につける写真（学習者ホームの表示） */
.sensei-journal-photo {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  margin: 8px 0 4px;
}
.sensei-journal-photo[hidden] { display: none; }

/* 先生の日記画面：日記の写真プレビューと操作 */
.sensei-diary-photo-preview {
  display: block;
  width: 100%;
  max-width: 220px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  margin: 4px 0;
}
.sensei-diary-photo-preview[hidden] { display: none; }
.sensei-photo-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sensei-photo-actions .btn-secondary { margin: 0; }
.btn-text-remove {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text-soft);
  text-decoration: underline;
  cursor: pointer;
}
.btn-text-remove[hidden] { display: none; }

/* ---------- 日記入力画面 ---------- */

.mood-picker-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mood-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

.mood-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.mood-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.mood-icon-frame {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card);
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease;
}

.mood-icon {
  width: 32px;
  height: 32px;
  pointer-events: none;
}

.mood-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-soft);
  white-space: nowrap;
}

.mood-radio:checked + .mood-option .mood-icon-frame {
  box-shadow: 0 6px 14px rgba(74, 63, 55, 0.25);
  transform: scale(1.12);
  outline: 2.5px solid var(--color-primary);
  outline-offset: 2px;
}

.mood-radio:checked + .mood-option .mood-text {
  color: var(--color-primary-dark);
}

.diary-textarea {
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-card);
  resize: vertical;
}

.diary-textarea::placeholder {
  color: #B8AC9C;
}

/* お題ヒント（書き出しのきっかけ。押すたびに変わる） */
.prompt-card {
  background: linear-gradient(135deg, #FBEFE2, #F5E7D6);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.prompt-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.prompt-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
}

.prompt-shuffle {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: #FFFDF8;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}

/* ---------- 写真アップロード画面 ---------- */

.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-md);
  background: #FBF4EC;
  cursor: pointer;
}

.upload-icon {
  font-size: 32px;
}

.upload-text {
  font-size: 13px;
  color: var(--color-text-soft);
}

/* ---------- AI添削結果画面 ---------- */

/* AIコメントが「見本」であることをやさしく伝える注記 */
.sample-note {
  font-size: 12px;
  color: var(--color-text-soft);
  background: #FBF7EF;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  line-height: 1.6;
}

/* あなたの日記の引用（学習者自身のことば。AI・先生の言葉とは区別する） */
.diary-quote-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* hidden属性が付いているときは、display:flexより優先して隠す */
.diary-quote-card[hidden] {
  display: none;
}

.diary-quote-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-soft);
}

.diary-quote-date {
  font-size: 11px;
  color: var(--color-text-soft);
}

.diary-quote-text {
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
}

.result-block h2 {
  font-size: 15px;
  margin-bottom: 10px;
}

.result-block {
  display: flex;
  flex-direction: column;
}

/* 中身が無いブロック（よかった表現・おすすめ表現）は、枠ごと隠す */
.result-block[hidden] {
  display: none;
}

.result-card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-good .result-card {
  border-left: 4px solid var(--color-secondary);
}

.result-fix .result-card {
  border-left: 4px solid var(--color-yellow);
}

.result-tip .result-card {
  border-left: 4px solid var(--color-primary);
  background: #FDF2E4;
}

.read-aloud-block {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.read-aloud-title {
  font-size: 14px;
  font-weight: 700;
}

.read-aloud-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-audio {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #FBF7EF;
  color: var(--color-text);
  cursor: pointer;
}

.btn-audio-record {
  grid-column: span 2;
  background: #FDF2E4;
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.read-aloud-caption {
  font-size: 12px;
  color: var(--color-text-soft);
}

.quote {
  font-size: 14px;
  font-weight: 700;
}

/* 直す前の文。取り消し線は使わない。
   取り消し線は「横棒を1本足す」のと同じで、横棒でできている漢字を別の字に見せてしまう。
   （実例：中国語の「了」に線が入ると「子」に見え、学習者は書いていない字を書いたと誤解する。
   　「了」は中国語で最もよく出る字のひとつ。日本語でも 二→三 のように同じ事故が起きる。）
   「前 → 後」は、矢印と「薄い小さい字 / 濃い太字」の対比で十分に伝わる。 */
.before {
  font-size: 13px;
  color: var(--color-text-soft);
}

.after {
  font-size: 14px;
  font-weight: 700;
}

.comment {
  font-size: 12px;
  color: var(--color-text-soft);
}

.tip-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* ---------- v0.3 本物のAI添削（読み込み・反応・文法ラベル） ---------- */

/* 読み込み中／エラーの表示（他のカードと少し色を変えて“作業中”を目立たせる） */
.ai-status {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: #FDF2E4;
  border: 1px solid var(--color-yellow);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ai-status[hidden] { display: none; }

/* 読み込み中のくるくる（フリーズと間違えないための目印。宗佑さんの指摘#4） */
.ai-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--color-yellow);
  border-top-color: var(--color-primary);
  animation: ai-spin 0.8s linear infinite;
}

@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

/* 「動きは目立たせたいが、めまいには配慮」＝アニメを控える設定の人には止めて出す */
@media (prefers-reduced-motion: reduce) {
  .ai-spinner { animation-duration: 2.4s; }
}

/* AI添削のまとまり（読み込み完了後に表示） */
.ai-feedback {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ai-feedback[hidden] { display: none; }

/* AIの冒頭のひとこと（内容への“反応”。ほめではない） */
.ai-opening {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
}

/* ② AIの感想＝人が話しかけている“吹き出し”。アバター（ONERの葉）＋バブル */
.ai-reaction {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ai-reaction[hidden] { display: none; }
.ai-reaction-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-top: 2px;
}
.ai-reaction-bubble {
  position: relative;
  flex: 1;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  /* 左上だけ角ばらせて“話しかけ”の吹き出し感 */
  border-radius: 4px 16px 16px 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-soft);
}
/* 吹き出しの小さなしっぽ（アバター側を指す三角） */
.ai-reaction-bubble::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 14px;
  width: 12px;
  height: 12px;
  background: var(--color-card);
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transform: rotate(45deg);
}
.ai-reaction-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-soft);
  margin-bottom: 4px;
}
.ai-reaction .ai-opening {
  margin: 0;
  line-height: 1.9;
}

/* ③ AIが直した日記（全文） */
.result-corrected {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.result-corrected[hidden] { display: none; }
.result-corrected-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-soft);
  margin-bottom: 6px;
}
.result-corrected-text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
  white-space: pre-wrap; /* 日記の改行をそのまま出す */
}

/* ④「AIの説明を見る」ボタン（押すと解説が開く） */
.btn-detail-toggle {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: var(--color-card);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 12px;
  cursor: pointer;
}

/* 解説のまとまり（開いたとき）。中のブロック間隔を ai-feedback と同じにそろえる */
.ai-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ai-detail[hidden] { display: none; }

/* 文法の名前の小さなラベル（例：い形容詞の過去形） */
.grammar-label {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: #FDF2E4;
  border-radius: 999px;
  padding: 3px 10px;
}

/* おすすめ表現の例文 */
.tip-example {
  font-size: 13px;
  color: var(--color-text);
}

/* 「もう一度みてもらう」ボタン */
.btn-retry {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
}

/* ---------- v0.3 同意画面（AIに送る前の「はい」） ---------- */
.consent-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74, 63, 55, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.consent-overlay[hidden] { display: none; }

.consent-modal {
  background: var(--color-frame-bg);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  max-width: 340px;
  width: 100%;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.consent-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}
.consent-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
}
.consent-points li {
  /* 【2026-09-02】1項目が「見出しの一行」と「説明」の2段になったので、
     文の中の改行をそのまま出す。切る場所を運まかせにしない。 */
  white-space: pre-line;
}
/* 【2026-09-02・そめ先生】🌱 の絵文字はやめた。
   ここは【預かるものを伝える場所】で、飾ると軽く見える。
   印が無くなったぶん、項目のあいだを少し広げて区切りにする。 */
.consent-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
/* .btn-primary / .btn-secondary を <button> にも使うので、フォントを本文にそろえる */
button.btn-primary,
button.btn-secondary {
  font-family: inherit;
}

/* 先生に送る：コピー用のテキスト（読み取り専用） */
.teacher-text {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  resize: vertical;
  box-sizing: border-box;
}

/* 写真で送る：選んだ写真のプレビュー */
.photo-preview {
  max-width: 100%;
  max-height: 260px;
  border-radius: var(--radius-md);
  display: block;
}
.photo-preview[hidden] { display: none; }

/* 写真で送る：読み取り中／エラーの表示 */
.photo-status {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: #FDF2E4;
  border: 1px solid var(--color-yellow);
  border-radius: var(--radius-md);
  padding: 14px;
  line-height: 1.7;
}
.photo-status[hidden] { display: none; }

/* 「説明を中文で見る／日本語で見る」の切り替えボタン（目立つ黄色のまる） */
/* 解説の言語を切り替えるボタン（解説の中のいちばん下。既定は母語＝中国語→日本語に切替） */
.btn-lang-switch {
  align-self: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text-soft);
  cursor: pointer;
}
.btn-lang-switch:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-lang-switch[hidden] { display: none; }

/* ---------- カレンダー画面 ---------- */

.calendar-month {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}

/* 月の移動（‹ ›）。2026-07-17 追加＝それまで今月しか見られなかった */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.calendar-nav .calendar-month {
  flex: 1;
}

.calendar-nav-btn {
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 22px;
  line-height: 1;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  /* 指で押せる大きさ（スマホ前提） */
  min-width: 44px;
  min-height: 44px;
}

.calendar-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

/* カレンダー本体を1枚のカードに入れて、まとまり感を出す */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
  background: var(--color-frame-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
  box-shadow: var(--shadow-soft);
}

.calendar-dow {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-soft);
  padding-bottom: 6px;
}
/* 日曜・土曜の見出しに、ほんのり色をつける */
.calendar-dow:first-child { color: var(--color-primary-dark); } /* 日 */
.calendar-dow:nth-child(7) { color: #6E8FB0; }                  /* 土 */

.calendar-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 50%;
  /* 書いた日は <button>（2026-07-17）。既定のボタン見た目を消し、書いていない日と同じ形に。
     今日の「輪」で大きさが変わらないよう、はじめから透明の枠を持たせておく。 */
  border: 2px solid transparent;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  padding: 0;
}

/* 書いた日だけ押せる＝押せることが指に分かるように */
button.calendar-day.written {
  cursor: pointer;
  transition: transform 0.1s ease;
}
button.calendar-day.written:hover {
  transform: scale(1.08);
}

.calendar-day.empty {
  visibility: hidden;
}

/* 書いた日＝やわらかいサージ色の丸（“書けた”スタンプがたまっていく感じ） */
.calendar-day.written {
  background: var(--color-secondary);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(143, 169, 138, 0.4);
}

/* 今日＝テラコッタの輪（塗りでなく輪なので、書いた日にも重ねられる） */
.calendar-day.today {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}
.calendar-day.today.written {
  color: #ffffff; /* 今日かつ書いた日＝サージ塗り＋テラコッタの輪 */
}

.calendar-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-soft);
  justify-content: center;
  margin-top: 16px;
}

.calendar-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-secondary);
  display: inline-block;
}

/* ---------- 日記履歴画面 ---------- */

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  position: relative;
  /* 押すと全文が読める（2026-07-17）。それまでは30字の抜粋で行き止まりだった */
  cursor: pointer;
}

/* 「日記を読む」画面のカード（全文） */
.entry-card .diary-quote-text {
  white-space: pre-wrap; /* 学習者が入れた改行を、そのまま残す */
}

.entry-status {
  margin-top: 12px;
  font-size: 12px;
  color: var(--color-text-soft);
}

/* ---------- 日記に写真をつける（2026-07-18） ---------- */
.photo-attach {
  margin: 2px 0 14px;
}
.attach-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: var(--color-card);
  border: 2px solid var(--color-primary);
  cursor: pointer;
}
/* 3枚まで＝横に並べる（2026-08-02。それまでは大きい1枚だけだった） */
.attach-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.attach-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.attach-item {
  min-width: 0;
}
.attach-thumb {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}
.attach-remove {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 4px 0;
  font-size: 12px;
  text-align: center;
  color: var(--color-text-soft);
  background: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.attach-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-soft);
  line-height: 1.5;
}
.entry-photo {
  display: block;
  width: 100%;
  border-radius: 14px;
  margin-top: 14px;
  border: 1px solid var(--color-border);
}
/* 「先生にも見えません」の一行（書きはじめの3本まで出る） */
.write-privacy {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-secondary);
}

/* 書き直しモード（2026-08-02）：いま何をしている画面なのかを、上に一言で出す */
.write-edit-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-primary-dark);
  background: var(--color-card);
  border: 1px dashed var(--color-primary);
}

/* 書き直して保存した直後の「✅ 保存しました」＝もう終わっていることを、はっきり言う */
.entry-saved {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-secondary);
}

/* 読む画面の「最初に書いたひとこと」＝いまの文の下に、うすく小さく */
.entry-first {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}
.entry-first-label {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--color-text-soft);
}
.entry-first-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-soft);
  white-space: pre-wrap;
}

/* 「✏️ 自分で書き直す」「📨 先生に送る」＝主役ではないので、下に控えめに置く */
.entry-edit-btn,
.entry-send-btn,
.result-edit-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

/* AIの添削の残り回数（ボタンのすぐ下） */
.entry-ai-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-soft);
  text-align: center;
}

/* 結果画面の「2回とも使いました」＝責めない色（枠だけ・やわらかく） */
.ai-limit-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

/* 壁のお知らせ（AI添削の手前）2026-08-31。
   すぐ上の .ai-limit-note と【同じ見た目】にそろえてある。
   壁は新しい仕組みではなく、「AIは2回まで」の隣に立つ同じ形のもの。
   ★赤や警告色は使わない。断るのであって、責めるのではない。 */
.ai-wall {
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* いちばん先に読ませる1行＝「日記は消えていない」。だから、ここだけ太い。 */
.ai-wall-keep {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 700;
}

.ai-wall-why,
.ai-wall-mail,
.ai-wall-can {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-soft);
}

/* 誘いの一言（2026-09-02・そめ先生）。事実とボタンの間に置く。
   ★大きくも、太くもしない。ここで声を張ると、お願いではなく売り込みになる。
   薄い字にはせず、本文と同じ濃さにする＝小さな声だが、ちゃんと言っている。 */
.ai-wall-invite {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text);
}

/* 買うときのメール＝間違えるとお金が結びつかないので、読める形にする */
.ai-wall-mail {
  word-break: break-all;
}

/* 先生に送る画面：この日の写真（何が送られるかを目で見せる） */
.teacher-photos {
  margin-top: 14px;
}
.teacher-photos-label {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--color-text-soft);
}
.teacher-photo-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.teacher-photo-thumb {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.teacher-photo-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

.history-photo-badge {
  margin-left: 8px;
  font-size: 13px;
}

/* 使い方の例：日記に混ぜたL1（中国語/英語）の部分を、やさしく強調する */
.mixed {
  background: var(--color-yellow);
  color: var(--color-text);
  border-radius: 4px;
  padding: 0 4px;
}

/* 使い方の例：①②③ の節の見出しと、その説明 */
.howto-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 26px 0 6px;
}
.howto-note {
  font-size: 13px;
  color: var(--color-text-soft);
  line-height: 1.6;
  margin: 0 0 12px;
}

/* 「こまったときは」＝1つずつカードにして、探している所を見つけやすくする（2026-08-03） */
.howto-faq .howto-note {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 14px;
}

/* ---------- ☰ メニュー（右上から出るドロワー） ---------- */
.menu-button {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-primary-dark);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  cursor: pointer;
}
.menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s;
  cursor: pointer;
}
.menu-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78%;
  max-width: 300px;
  z-index: 61;
  background: var(--color-frame-bg);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  padding: 20px 18px;
  overflow-y: auto;
}
.menu-toggle:checked ~ .menu-overlay {
  opacity: 1;
  visibility: visible;
}
.menu-toggle:checked ~ .menu-drawer {
  transform: translateX(0);
}
.menu-close {
  display: block;
  text-align: right;
  font-size: 20px;
  color: var(--color-text-soft);
  cursor: pointer;
  margin-bottom: 4px;
}
.menu-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
  margin: 0 0 10px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 8px;
  font-size: 16px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.menu-item:last-child {
  border-bottom: none;
}
.menu-item-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
}

.history-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.history-excerpt {
  font-size: 13px;
  color: var(--color-text);
  margin-bottom: 10px;
}

.history-badge {
  display: inline-block;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #EAF1E7;
  color: var(--color-secondary);
}

.history-badge.badge-photo {
  background: #FDF2E4;
  color: var(--color-primary-dark);
}

/* display:flex より優先して、hidden のときは隠す */
.history-list[hidden] {
  display: none;
}

/* まだ日記が1件もないときの、やさしい空状態 */
.history-empty {
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-soft);
  padding: 32px 12px;
}

.history-empty[hidden] {
  display: none;
}

/* ---------- 先生に送る画面 ---------- */

.teacher-summary-card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.summary-excerpt {
  font-size: 14px;
}

.summary-ai {
  font-size: 12px;
  color: var(--color-text-soft);
}

.teacher-note {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-soft);
}

/* ---------- ボトムナビゲーション ---------- */

.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 84px;
  background: var(--color-frame-bg);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 10px;
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--color-text-soft);
}

.nav-icon {
  font-size: 18px;
}

.bottom-nav .nav-fab {
  background: var(--color-primary);
  color: #fff;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  justify-content: center;
  margin-top: -22px;
  box-shadow: 0 8px 18px rgba(224, 122, 95, 0.4);
  font-size: 0;
}

.bottom-nav .nav-fab .nav-icon {
  font-size: 20px;
}

.bottom-nav .nav-fab span:last-child {
  display: none;
}

/* いま見ている画面のタブを目立たせる（現在地。app.js が .is-active を付け替える） */
.bottom-nav a.is-active:not(.nav-fab) {
  color: var(--color-primary);
  font-weight: 700;
}

.bottom-nav a.is-active:not(.nav-fab) .nav-icon {
  transform: translateY(-2px);
  transition: transform 0.15s ease;
}

/* ---------- スマホ実機での表示（フレーム枠を外して全画面に） ---------- */

@media (max-width: 460px) {
  body {
    padding: 0;
    background: var(--color-frame-bg);
  }

  .phone {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }

  /* 下バーを画面の下に常時固定（スクロールしても付いてくる）。
     iPhone のホームバーぶんは safe-area で空ける。 */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: auto;
    padding-top: 8px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* 固定した下バーに内容が隠れないよう、各画面の下に余白を足す。 */
  .screen {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================
   自分ノート（2026-08-10）
   ----------------------------------------------------------
   AIの添削は「その日の日記に1つ」しか残らず、もう一度AIに見てもらうと
   前の添削は上書きされて消えていた。ここに3つのたな（直したところ／
   よかったところ／おぼえたい表現）としてためる。
   カードの中身は、結果画面と同じ .before / .after / .comment /
   .grammar-label をそのまま使う（見た目を2つ持たない）。
   ========================================================== */

.note-shelf {
  margin-bottom: 24px;
}

.note-shelf-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.note-shelf-hint {
  font-size: 12px;
  color: var(--color-text-soft);
  margin-bottom: 10px;
}

/* 「きょうの復習」は、たまったものと見分けがつくよう枠で囲む */
.note-shelf-review {
  background: #FDF2E4;
  border: 1px solid var(--color-yellow);
  border-radius: var(--radius-md);
  padding: 16px;
}

.note-card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.note-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.note-date {
  font-size: 12px;
  color: var(--color-text-soft);
}

/* その日のひとことへ戻る小さなボタン（カレンダーや記録をたどらなくてよい） */
.note-open {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #FBF7EF;
  color: var(--color-text-soft);
  cursor: pointer;
  white-space: nowrap;
}

.note-main {
  font-size: 14px;
  font-weight: 700;
}

.note-sub {
  font-size: 13px;
  color: var(--color-text-soft);
}

/* 自分のメモ。書かなくてもよいので、ふだんは静かに置いておく */
.note-memo {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
  background: #FBF7EF;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}

.note-memo:focus {
  outline: none;
  border-style: solid;
  border-color: var(--color-primary);
  background: var(--color-card);
}

.note-card-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.note-known,
.note-again,
.note-delete {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #FBF7EF;
  color: var(--color-text);
  cursor: pointer;
}

.note-known {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

/* 「消す」は取り返しがつかないので、押しやすくしない（前に出さない） */
.note-delete {
  margin-left: auto;
  font-weight: 400;
  color: var(--color-text-soft);
}

/* ホームの「自分ノート」カード（2026-08-10）
   一行のリンクだと他の cross-link と見分けがつかず、押す所に見えなかった
   （そめ先生の指摘）。書くボタンの次に目に入る重さにして、たまった数も見せる。
   ただし「今日のひとことを書く」より強くはしない＝書くことがいちばん大事。 */
.notes-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 枠の色だけだと弱い（そめ先生の指摘）。中にもやわらかい緑を敷いて、
     ひと目で「別のもの」と分かるようにする。書くボタン（オレンジの塗り）とは
     色で役割が分かれる＝書く＝オレンジ／ためる＝緑。 */
  background: #EFF5EC;
  border: 1px solid #CFE0C8;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
  color: var(--color-text);
}

/* 見出しの行（アイコン・題名・復習の印）。説明はこの下で横幅いっぱいに使う
   ＝3行に折り返して窮屈にならない。 */
.notes-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* アイコンは白い丸にのせる＝シールを貼ったような、やわらかい見た目に */
.notes-card-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-card);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notes-card-icon-img {
  width: 26px;
  height: 26px;
  display: block;
}

.notes-card-title {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap; /* 題名は折り返さない（「自分ノー／ト」と割れないように） */
}

/* 数の行。左が「ぜんぶ」、右が「きょう」 */
.notes-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.notes-card-desc {
  font-size: 12px;
  color: var(--color-text-soft);
  line-height: 1.5;
}

/* たまった数。開かなくても「増えている」ことが見えるように。
   白い丸に入れて、右の「きょうの復習」の印と形をそろえる（2つで一組に見える）。 */
.notes-card-count {
  font-size: 12px;
  font-weight: 700;
  color: #5E7A58; /* 緑の地の上でも読める、濃いめの緑 */
  background: var(--color-card);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* きょうの復習がある日だけ出る丸い印（見出しの行の右はし） */
.notes-card-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}

/* 「きょうの復習はおしまいです」 */
.note-shelf-done {
  background: #FBF7EF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
}

.note-done-text {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--color-secondary);
}

/* 先生の日記カードの中の「📅 先生の過去の日記を見る」（2026-08-11）
   ホームに並べていた頃は、下のバーの「カレンダー」＝自分の日記と名前が同じで、
   押すまでどちらが出るのか分からなかった。持ち主の見えるカードの中に入れる。 */
.sensei-journal-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 使い方の画面の蛇腹（2026-08-11）
   説明が3,600字たまって1枚に全部並んでいたので、見出しだけ並べて、
   押した所だけ開くようにした。最初に見えるのが「目次」になる。
   ※この画面はページ内リンク（#〜）が使えない（:target で画面を切り替えているため）。 */
.howto-section {
  border-bottom: 1px solid var(--color-border);
}

.howto-toggle {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 16px 28px 16px 0;
  cursor: pointer;
  position: relative;
  line-height: 1.5;
}

/* 右はしの ▸ ／ 開くと ▾ */
.howto-toggle::after {
  content: "▸";
  position: absolute;
  right: 4px;
  top: 16px;
  color: var(--color-primary-dark);
}

.howto-toggle[aria-expanded="true"]::after {
  content: "▾";
}

.howto-body {
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 自分ノートのたなを「押して開くカード」にする（2026-08-11）
   前は4つのたなが全部ひらいたまま下にずっと続いていて、そめ先生が
   中国語学習版で試して「読みたくなくなる」。使い方の画面と同じ形にした。 */
.note-shelf {
  background: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  margin-bottom: 12px;
  overflow: hidden;
}

.note-shelf-toggle {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 16px 30px 16px 16px;
  cursor: pointer;
  position: relative;
  line-height: 1.5;
}

.note-shelf-toggle::after {
  content: "▸";
  position: absolute;
  right: 12px;
  top: 16px;
  color: var(--color-primary-dark);
}

.note-shelf-toggle[aria-expanded="true"]::after {
  content: "▾";
}

.note-shelf-body {
  padding: 0 12px 12px;
}

/* 「きょうの復習」だけ、はっきり別の色にする（そめ先生「特に大事なので」）。
   ※ 色は学ぶ言語のテーマに合わせる（日本語＝暖色／中国語＝寒色／英語＝紫）。
   前は地だけベージュ固定で、中国語モードの青とぶつかっていた。 */
.note-shelf-review {
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
}

.note-shelf-review .note-shelf-toggle {
  color: var(--color-primary-dark);
}

/* たなの中のカードは、たなの地の上に白で乗る */
.note-shelf-body .note-card {
  margin-bottom: 10px;
}
.note-shelf-body .note-card:last-child {
  margin-bottom: 0;
}

/* 「もっと見る」と「おぼえた◯件」（2026-08-11） */
.note-more {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  width: 100%;
  cursor: pointer;
}

/* たなから消えた「おぼえた」を、数だけ見せる＝努力が消えたように見えないように */
.note-known-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary);
  text-align: center;
  padding: 10px 0 4px;
}

/* 「どう直してほしいか」（2026-08-11）
   ボタンを何個も並べず、一行書くだけで添削の好みを伝える。
   書く欄の下に置くが、主役ではないので静かに。 */
.want-box {
  background: #FBF7EF;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.want-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

.want-input {
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}

.want-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.want-note {
  font-size: 11px;
  color: var(--color-text-soft);
}

/* 結果画面の「あなたの希望：〜」（2026-08-11）
   どんな希望で頼んだかを見せる＝効いていないのか、送られていないのかを見分けられる。 */
.result-want {
  font-size: 12px;
  color: var(--color-text-soft);
  background: #FBF7EF;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* ボタンの下に出す予告（壁が立つ人にだけ）。
   すぐ上の .entry-ai-note（「AIの添削：あと1回」）と同じ場所・同じ大きさ。
   ★目立たせない。ここは【予告】であって、断り文ではない。
   書く前から強い断り文が見えていると、書く気そのものが減る。 */
.ai-wall-hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-soft);
  text-align: center;
  /* 【2026-09-02・そめ先生「一文字下にいっています」】
     最後の数文字だけが次の行に落ちていた。中央揃えなので、余った字が
     真ん中にぽつんと残って目立つ。
     ⚠️ 最初 text-wrap: balance で直そうとしたが【効かなかった】
        （実測 textWrapStyle: auto のまま／行の幅が 323px と 36px）。
     ★だから、切る場所を自分で決める＝文の中の改行をそのまま出す。
       どの端末でも、必ず【文の切れめ】で2行になる。 */
  white-space: pre-line;
}

/* 設定：規約などへのリンク（外のページへ行く）。
   アプリの中に写しを置かず、必ずストアの正式なページへ送る。
   写しを持つと、直したときに二重の食い違いができる。 */
.settings-links {
  margin: 8px 0 0;
  padding-left: 1.2em;
  font-size: 13px;
  line-height: 2;
}

.settings-links a {
  color: var(--color-primary);
}

/* 版の番号。画面のいちばん下に、小さく。 */
.settings-version {
  margin: 18px 0 0;
  font-size: 11px;
  color: var(--color-text-soft);
  text-align: center;
}

/* 退会のところ。
   ★赤い警告色にしない。**責める場所ではないし、脅す場所でもない。**
   ただ、間違って押される場所でもないので、ほかのボタンより静かにする。 */
.account-danger {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.btn-quiet {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-soft);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.account-danger-box {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

/* いちばん先に読ませる1行＝「日記は消えない」。ここだけ太い。 */
.account-danger-keep {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 700;
  color: var(--color-text);
}