/* ドイツ語 復習ノート — スタイル（モバイル優先・ダーク対応） */
:root {
  --bg: #f4f6fb; --card: #ffffff; --ink: #1a2236; --muted: #6b7689; --line: #e4e8f0;
  --brand: #1d2b53; --brand-ink: #ffffff; --accent: #f2c14e; --accent-ink: #4a3a00;
  --primary: #6f86c7; --ok: #1ba672; --err: #e0457b; --danger: #e0457b;
  --onwash-ink: var(--ink); --onwash-mut: var(--muted); --onwash-line: var(--line); --onwash-shadow: none;
  --der: #2f6fed; --die: #e0457b; --das: #1ba672;
  --radius: 14px; --shadow: 0 2px 10px rgba(20,30,60,.07);
  --nav-h: 60px; --header-h: 52px;
  /* 部品色（バッジ・注記など）— テーマで上書きできるよう変数化 */
  --cefrA-bg:#e7f7ee; --cefrA-ink:#0d7a4f; --cefrB-bg:#fff1dc; --cefrB-ink:#9a5b00; --cefrC-bg:#fbe4ee; --cefrC-ink:#a01457;
  --note-bg:#fff8e6; --note-ink:#6b5200;
  --refl-bg:#efe6fb; --refl-ink:#6b21a8; --trans-bg:#e2f5ef; --trans-ink:#0f6e56; --reflbox-bg:#f3effb;
  --banner-ok-bg:#e7f7ee; --banner-ok-line:#b6e6cd; --banner-no-bg:#fbe9f1; --banner-no-line:#f3c9dc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1320; --card: #182033; --ink: #e7ecf6; --muted: #93a0b8; --line: #2a3550;
    --brand: #0c1326; --shadow: 0 2px 12px rgba(0,0,0,.4);
    --cefrA-bg:#103024; --cefrA-ink:#5fd6a0; --cefrB-bg:#3a2a0c; --cefrB-ink:#e8b15e; --cefrC-bg:#3a1228; --cefrC-ink:#f08bbb;
    --note-bg:#2e2710; --note-ink:#e8cf86;
    --refl-bg:#2c1b46; --refl-ink:#c9a9f0; --trans-bg:#12332a; --trans-ink:#6fd0b2; --reflbox-bg:#241833;
    --banner-ok-bg:#10301f; --banner-ok-line:#1d5b3c; --banner-no-bg:#341323; --banner-no-line:#5e2143;
  }
}
/* ── テーマ（淡い水彩グラデーション・原色なし・手書き風）──
   [data-theme] は :root より詳細度が高く、システムのライト/ダークより優先される。 */
:root[data-theme="dream"]    { --bg:#eed2df; --bg-grad:radial-gradient(120% 85% at 50% 120%,rgba(250,220,198,.9),transparent 48%),radial-gradient(85% 65% at 15% 10%,rgba(244,190,214,.72),transparent 55%),radial-gradient(80% 60% at 88% 18%,rgba(214,190,236,.68),transparent 55%),linear-gradient(168deg,#f2cbdf,#e7c8e8 45%,#eed6d9 72%,#fbe6d4); --card:#ffffff; --ink:#5a3546; --muted:#9c7285; --line:#f2dbe6; --primary:#c77b9e; --brand:#b5638a; --field:#fdf2f7; --pg:linear-gradient(135deg,#f7d9e4,#efc3d5); --pi:#8a476a; }
:root[data-theme="dawn"]     { --bg:#f4d3cf; --bg-grad:radial-gradient(120% 85% at 50% 120%,rgba(253,222,196,.9),transparent 50%),radial-gradient(85% 65% at 14% 10%,rgba(246,196,182,.72),transparent 55%),radial-gradient(80% 60% at 88% 18%,rgba(243,200,219,.68),transparent 55%),linear-gradient(168deg,#f7d3cf,#f3d0dd 45%,#f8dcd2 72%,#fde8d5); --card:#ffffff; --ink:#5c3d38; --muted:#a0766f; --line:#f4dcd6; --primary:#d67f7a; --brand:#c76a63; --field:#fdf3ef; --pg:linear-gradient(135deg,#f8dcd2,#f3c8c2); --pi:#93463f; }
:root[data-theme="coral"]    { --bg:#f5ccb9; --bg-grad:radial-gradient(120% 85% at 50% 120%,rgba(252,231,201,.9),transparent 50%),radial-gradient(85% 65% at 14% 10%,rgba(246,201,184,.74),transparent 55%),radial-gradient(80% 60% at 88% 16%,rgba(243,192,201,.68),transparent 55%),linear-gradient(168deg,#f6c9b8,#f3c0c9 45%,#f8d6bd 72%,#fce7c9); --card:#ffffff; --ink:#5c4432; --muted:#a17a63; --line:#f5ddcf; --primary:#d68f6a; --brand:#c47447; --field:#fdf4ec; --pg:linear-gradient(135deg,#f8ddc9,#f3c8ac); --pi:#8f4e2c; }
:root[data-theme="candy"]    { --bg:#e6d2ea; --bg-grad:radial-gradient(120% 85% at 50% 120%,rgba(224,242,220,.8),transparent 50%),radial-gradient(85% 65% at 14% 10%,rgba(243,199,224,.7),transparent 55%),radial-gradient(80% 62% at 88% 16%,rgba(196,206,240,.66),transparent 55%),linear-gradient(168deg,#f3d1e4,#dfd3f2 42%,#d2e7ec 74%,#eef0e0); --card:#ffffff; --ink:#4e3d54; --muted:#8a7597; --line:#eddef0; --primary:#b98fc0; --brand:#a06aac; --field:#faf1fa; --pg:linear-gradient(135deg,#eddaf0,#e0c8ea); --pi:#71527d; }
:root[data-theme="violet"]   { --bg:#d3c4ec; --bg-grad:radial-gradient(120% 85% at 50% 120%,rgba(240,224,246,.85),transparent 50%),radial-gradient(85% 65% at 14% 10%,rgba(190,168,226,.72),transparent 55%),radial-gradient(80% 60% at 88% 16%,rgba(206,184,232,.68),transparent 55%),linear-gradient(168deg,#d9cdf0,#c9b8ea 45%,#d8cbee 72%,#efe4f7); --card:#ffffff; --ink:#443b5e; --muted:#7d7099; --line:#e6ddf5; --primary:#8f77c4; --brand:#7d64b5; --field:#f5f1fc; --pg:linear-gradient(135deg,#e2d8f5,#d3c5ee); --pi:#5b4a86; }
:root[data-theme="twilight"] { --bg:#c8c1e6; --bg-grad:radial-gradient(120% 85% at 50% 118%,rgba(247,208,170,.85),transparent 46%),radial-gradient(85% 65% at 12% 8%,rgba(150,170,236,.72),transparent 55%),radial-gradient(85% 62% at 92% 16%,rgba(198,180,233,.7),transparent 55%),linear-gradient(168deg,#b7c1f0,#c2b3e7 45%,#d8c3de 74%,#f1dac9); --card:#ffffff; --ink:#3d3a5c; --muted:#7d7099; --line:#e6e0f4; --primary:#7b74c4; --brand:#6f68b8; --field:#f4f1fb; --pg:linear-gradient(135deg,#ddd6f4,#cdc2ec); --pi:#544a92; }
:root[data-theme="lagoon"]   { --bg:#c6dce2; --bg-grad:radial-gradient(120% 85% at 50% 120%,rgba(206,240,226,.85),transparent 48%),radial-gradient(85% 65% at 14% 10%,rgba(150,205,225,.7),transparent 55%),radial-gradient(80% 60% at 88% 16%,rgba(180,210,240,.66),transparent 55%),linear-gradient(168deg,#bfe0ea,#c7dcee 45%,#d5e6e0 72%,#e9f2e2); --card:#ffffff; --ink:#2f4c50; --muted:#5f8790; --line:#d9ebe8; --primary:#5f9eaa; --brand:#4b8b97; --field:#eef7f6; --pg:linear-gradient(135deg,#d2ecec,#bfe1e4); --pi:#356870; }
:root[data-theme="night"]    { --bg:#aca6d2; --bg-grad:radial-gradient(120% 80% at 50% 122%,rgba(240,214,200,.6),transparent 46%),radial-gradient(85% 65% at 14% 8%,rgba(138,150,215,.75),transparent 55%),radial-gradient(80% 60% at 88% 14%,rgba(170,148,205,.72),transparent 55%),linear-gradient(168deg,#9aa3d8,#a996d0 45%,#b9a6cf 72%,#d8c6d2); --card:#ffffff; --ink:#35315c; --muted:#726a93; --line:#e0daf1; --primary:#6d63b0; --brand:#5b55a0; --field:#f1eff9; --pg:linear-gradient(135deg,#d3cded,#c1b6e4); --pi:#463a80; }
/* 淡色テーマ共通：部品色・影 */
:root[data-theme="dream"],:root[data-theme="dawn"],:root[data-theme="coral"],:root[data-theme="candy"],:root[data-theme="violet"],:root[data-theme="twilight"],:root[data-theme="lagoon"],:root[data-theme="night"],:root[data-theme="chara"] {
  --shadow:0 4px 16px rgba(80,55,80,.13);
  --cefrA-bg:#e7f7ee; --cefrA-ink:#0d7a4f; --cefrB-bg:#fff1dc; --cefrB-ink:#9a5b00; --cefrC-bg:#fbe4ee; --cefrC-ink:#a01457;
  --note-bg:#fff8e6; --note-ink:#6b5200;
  --refl-bg:#efe6fb; --refl-ink:#6b21a8; --trans-bg:#e2f5ef; --trans-ink:#0f6e56; --reflbox-bg:#f3effb;
  --banner-ok-bg:#e7f7ee; --banner-ok-line:#b6e6cd; --banner-no-bg:#fbe9f1; --banner-no-line:#f3c9dc;
}
/* 水彩テーマは背景が色づくので、その上に載る文字（プロフィール等）は白＋影で浮かせる */
:root[data-theme="dream"],:root[data-theme="dawn"],:root[data-theme="coral"],:root[data-theme="candy"],:root[data-theme="violet"],:root[data-theme="twilight"],:root[data-theme="lagoon"],:root[data-theme="night"] {
  --onwash-ink:#ffffff; --onwash-mut:rgba(255,255,255,.94); --onwash-line:rgba(255,255,255,.6); --onwash-shadow:0 1px 4px rgba(40,20,60,.5);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  background: var(--bg-grad, var(--bg)); background-size: cover; background-repeat: no-repeat; color: var(--ink); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* 画面固定シェル：body自体はスクロールさせず、中身(.app-main)だけをスクロール。
     モバイルのアドレスバー伸縮で下メニュー（ボトムナビ）が動く問題を防ぐ */
  height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 16px; }

/* ── ヘッダー ── */
.app-header {
  position: sticky; top: 0; z-index: 20; height: var(--header-h); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: var(--brand); color: var(--brand-ink);
  padding-top: env(safe-area-inset-top);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.brand-name { font-size: 16px; letter-spacing: .02em; }
.flag { width: 22px; height: 15px; border: 1px solid rgba(0,0,0,.12); border-radius: 3px; overflow: hidden; display: inline-block;
  background: radial-gradient(circle at 50% 50%, #bc002d 0 32%, #fff 32%); }
.api-dot { width: 10px; height: 10px; border-radius: 50%; background: #8893a8; box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.api-dot.on { background: #46d39a; }

/* ── メイン / ビュー ── */
/* スクロールする箱は画面いっぱいに広げ、中身だけを中央に寄せる。
   （箱を720pxに絞ると、その外側にマウスを置いたときホイールが効かない） */
.app-main { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; padding: 16px 16px 24px; position: relative; z-index: 1; }
.view { display: none; animation: fade .18s ease; }
.view.active { display: block; max-width: 720px; margin: 0 auto; }   /* 中身だけ中央寄せ（枠は全幅） */
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.view-title { font-size: 20px; margin: 4px 0 2px; }
.view-sub { color: var(--muted); margin: 0 0 16px; font-size: 14px; }

/* ── ボタン / 入力 ── */
.btn { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px 14px 11px 13px;
  padding: 11px 16px; font-size: 15px; font-weight: 600; transition: .12s; }
.btn:hover { border-color: var(--primary); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--pg, var(--primary)); color: var(--pi, #fff); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.block { width: 100%; }
.btn.sm { padding: 8px 12px; font-size: 13.5px; }
.btn.danger { color: var(--danger); border-color: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { background: transparent; border: none; font-size: 22px; color: var(--ink); padding: 4px 8px; border-radius: 8px; }
.field { width: 100%; background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; }
.field:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.field.area { min-height: 160px; resize: vertical; line-height: 1.6; }
.hint { color: var(--muted); font-size: 12.5px; margin: 2px 0 10px; }
.edit-hint { background: var(--note-bg); color: var(--note-ink); padding: 8px 11px; border-radius: 8px; font-size: 13px; }

/* ── セグメント切替 ── */
.seg { display: flex; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.seg-btn { flex: 1; border: none; background: transparent; color: var(--muted); padding: 9px; border-radius: 9px; font-weight: 600; font-size: 14px; }
.seg-btn.active { background: var(--brand); color: #fff; }
.panel.hidden { display: none; }

/* ── 画像ドロップゾーン ── */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 32px 16px; color: var(--muted); cursor: pointer; }
.dropzone:hover { border-color: var(--primary); }
.dropzone.busy { opacity: .6; pointer-events: none; }
.dz-icon { font-size: 34px; }
.hidden-file { display: none; }

/* ── リーダー ── */
.reader-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.reader-titlewrap { min-width: 0; }
.reader-title { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-src { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.reader-hint { color: var(--muted); font-size: 12.5px; margin: 2px 0 12px; }
.reading { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 20px; font-size: 18px; line-height: 1.9; box-shadow: var(--shadow); }
.reading .para { margin: 0 0 .5em; }
.reading .w { cursor: pointer; border-radius: 4px; padding: 0 1px; transition: background .1s; }
.reading .w:hover { background: rgba(47,111,237,.14); }
.reading .w.studied { border-bottom: 2px solid var(--das); }
.reading .w:active { background: rgba(47,111,237,.28); }

/* ── 単語カード（ボトムシート内）── */
.wcard { padding: 4px 2px 8px; }
.wc-head { display: flex; align-items: center; gap: 8px; }
.wc-lemma { font-size: 28px; font-weight: 800; letter-spacing: .01em; }
.wc-head-lemma { font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.wc-inflect { color: var(--muted); font-size: 13px; margin-top: 2px; }
.wc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
/* 自他動詞ペア（⇔ 相手の動詞） */
.wc-pair { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 2px 0 8px; color: var(--ink); }
.wc-pair-w { font-weight: 700; }
.wc-pair-t { color: var(--muted); font-size: 12.5px; }
.badge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.b-gender.g-der { background: var(--der); color: #fff; border-color: transparent; }
.b-gender.g-die { background: var(--die); color: #fff; border-color: transparent; }
.b-gender.g-das { background: var(--das); color: #fff; border-color: transparent; }
.cefr-A1, .cefr-A2 { background: var(--cefrA-bg); color: var(--cefrA-ink); border-color: transparent; }
.cefr-B1, .cefr-B2 { background: var(--cefrB-bg); color: var(--cefrB-ink); border-color: transparent; }
.cefr-C1, .cefr-C2 { background: var(--cefrC-bg); color: var(--cefrC-ink); border-color: transparent; }
.wc-mean { font-size: 19px; font-weight: 700; margin: 6px 0 2px; }
.wc-mean-en { color: var(--muted); font-size: 14px; font-style: italic; }
.wc-ipa { color: var(--muted); font-size: 13px; margin-top: 2px; }
.wc-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0; padding: 12px; background: var(--bg); border-radius: 10px; }
.g-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.g-value { font-size: 15px; font-weight: 600; }
.wc-flags { font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
.wc-conj { width: 100%; border-collapse: collapse; margin: 8px 0; background: var(--bg); border-radius: 10px; overflow: hidden; }
.wc-conj caption { text-align: left; font-size: 12px; color: var(--muted); padding: 6px 10px 2px; font-weight: 700; }
.wc-conj td { padding: 6px 10px; border-top: 1px solid var(--line); }
.conj-p { color: var(--muted); width: 38%; font-size: 13px; }
.conj-f { font-weight: 600; }
.wc-sub { font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.wc-ex { margin-top: 14px; }
.ex-row { padding: 8px 0; border-top: 1px solid var(--line); }
.ex-de { font-size: 15px; }
.ex-ja { color: var(--muted); font-size: 13.5px; }
.wc-note { margin-top: 12px; padding: 10px 12px; background: var(--note-bg); color: var(--note-ink); border-radius: 10px; font-size: 13.5px; }

/* 動詞の種類バッジ */
.b-refl { background: var(--refl-bg); color: var(--refl-ink); border-color: transparent; }
.b-trans { background: var(--trans-bg); color: var(--trans-ink); border-color: transparent; }
.b-sep { background: var(--cefrB-bg); color: var(--cefrB-ink); border-color: transparent; }

/* 再帰動詞の説明ボックス */
.wc-refl { margin: 12px 0; padding: 12px 14px; background: var(--reflbox-bg); border-radius: 10px; }
.wc-refl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; }
.wc-refl-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #7c3aed; color: #fff; }
.wc-refl-form { font-weight: 800; }
.wc-refl-sub { color: var(--muted); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }

/* 例文の用法ラベル */
.ex-label { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 999px; margin-bottom: 5px; background: var(--bg); color: var(--muted); }
.ex-label.refl { background: var(--refl-bg); color: var(--refl-ink); }
.ex-label.trans { background: var(--trans-bg); color: var(--trans-ink); }
.wc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.wc-status.ok { color: var(--ok); font-size: 13px; font-weight: 700; }
.wc-loading, .wc-error { padding: 24px 0; color: var(--muted); }
.wc-error { color: var(--err); }
.wc-upgrading { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); background: var(--bg); padding: 6px 10px; border-radius: 8px; margin-bottom: 10px; }

/* 読み上げボタン */
.spk { background: transparent; border: none; font-size: 15px; padding: 2px 4px; border-radius: 6px; opacity: .8; }
.spk:hover { opacity: 1; background: rgba(47,111,237,.12); }

/* ── ライブラリ ── */
.card-list { display: flex; flex-direction: column; gap: 10px; }
.lib-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); cursor: pointer; transition: .12s; }
.lib-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.lib-title { font-weight: 700; margin-bottom: 4px; }
.lib-snippet { color: var(--muted); font-size: 13px; line-height: 1.5; max-height: 2.9em; overflow: hidden; }
.lib-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 8px; }

/* ── 検索 ── */
.search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.search-row .field { margin-bottom: 0; }
.status-banner { border-radius: var(--radius); padding: 16px; margin-bottom: 16px; border: 1px solid var(--line); }
.status-banner.ok { background: var(--banner-ok-bg); border-color: var(--banner-ok-line); }
.status-banner.no { background: var(--banner-no-bg); border-color: var(--banner-no-line); }
.sb-big { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.status-banner.ok .sb-big { color: var(--ok); }
.status-banner.no .sb-big { color: var(--err); }
.sb-sub { font-size: 13.5px; color: var(--ink); opacity: .85; margin-bottom: 6px; }
.res-sub { font-size: 13px; color: var(--muted); font-weight: 700; margin: 10px 0 8px; }
.word-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wchip { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 9px; padding: 7px 11px; font-size: 14px; text-align: left; }
.wchip span { color: var(--muted); font-size: 12.5px; }
.wchip.g-der { border-left-color: var(--der); }
.wchip.g-die { border-left-color: var(--die); }
.wchip.g-das { border-left-color: var(--das); }

/* ── 設定 ── */
.set-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.set-h { font-weight: 700; margin-bottom: 8px; }
.set-row { font-size: 14px; margin-bottom: 4px; }
.set-sub { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.set-field { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.set-label { color: var(--muted); font-size: 13px; min-width: 40px; }
.set-field .field { margin-bottom: 0; }
.inline { display: flex; align-items: center; gap: 10px; flex: 1; }
.inline input[type=range] { flex: 1; }
.rate-val { color: var(--muted); font-size: 13px; min-width: 40px; }
.set-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.set-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 18px; }
.set-legal { text-align: center; margin-top: 18px; }
.set-legal a { color: var(--muted); font-size: 12.5px; text-decoration: underline; }

/* ── 空状態 / ローディング ── */
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty-icon { font-size: 44px; margin-bottom: 10px; }
.empty-title { font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.empty-sub { font-size: 13.5px; }
.loading-block, .error-block { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 40px 16px; color: var(--muted); flex-direction: column; }
.error-block { color: var(--err); }
.spinner { width: 18px; height: 18px; border: 2.5px solid var(--line); border-top-color: var(--primary); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ボトムナビ ── */
.bottom-nav { flex: 0 0 auto; z-index: 20; min-height: var(--nav-h);
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); }
.nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: transparent; border: none; color: var(--muted); font-size: 10.5px; }
.nav-btn .ni { font-size: 19px; filter: grayscale(.4); }
.nav-btn.active { color: var(--primary); }
.nav-btn.active .ni { filter: none; }

/* ── ボトムシート ── */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(10,14,25,.45); display: none; align-items: flex-end; justify-content: center; }
.sheet-backdrop.show { display: flex; animation: fade .15s; }
.sheet { background: var(--card); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 8px 18px calc(20px + env(safe-area-inset-bottom)); position: relative;
  animation: sheetUp .22s cubic-bezier(.2,.8,.2,1); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet-grip { width: 38px; height: 4px; background: var(--line); border-radius: 99px; margin: 6px auto 4px; }
.sheet-close { position: absolute; top: 8px; right: 12px; background: transparent; border: none; font-size: 26px; color: var(--muted); line-height: 1; }

/* ── トースト ── */
#toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + 14px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { background: #232c44; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.25); max-width: 90%; animation: fade .2s; }
.toast.ok { background: #167a55; } .toast.err { background: #b83264; }
.toast.out { opacity: 0; transition: opacity .3s; }

/* ── 辞書（登録語の一覧） ── */
.dict-head { font-size: 13px; color: var(--muted); font-weight: 700; margin: 4px 0 8px; }
.dict-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.dict-mode { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.dm-btn { border: none; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 8px; }
.dm-btn.on { background: var(--primary); color: #fff; }

.dict-letter { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  font-weight: 700; font-size: 13px; padding: 0; }
.dict-letter.sel { background: var(--primary); border-color: var(--primary); color: #fff; }
.dict-letter.off { opacity: .25; }
.dict-list { display: flex; flex-direction: column; gap: 6px; }
.dict-item { display: flex; align-items: stretch; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 10px; overflow: hidden; }
.dict-item:hover { border-color: var(--primary); }
.di-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; text-align: left;
  background: transparent; border: none; padding: 10px 12px; }
/* 右端の削除✕。ふだんは薄く、ホバー/フォーカスでハッキリ（スマホは常に押せる濃さ） */
.di-del { flex: none; width: 40px; border: none; background: transparent; color: var(--muted);
  font-size: 15px; opacity: .4; border-left: 1px solid var(--line); }
.dict-item:hover .di-del, .di-del:focus-visible { opacity: 1; color: var(--danger); }
.di-del:active { transform: scale(.9); }
.dict-item.g-der { border-left-color: var(--der); }
.dict-item.g-die { border-left-color: var(--die); }
.dict-item.g-das { border-left-color: var(--das); }
.di-art { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.g-der .di-art { color: var(--der); } .g-die .di-art { color: var(--die); } .g-das .di-art { color: var(--das); }
.di-lemma { font-size: 15px; color: var(--ink); }
.di-mean { flex: 1; min-width: 0; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dict-empty { color: var(--muted); font-size: 13.5px; padding: 18px 4px; }

/* ── テーマ選択（設定） ── */
.theme-swatches { display: flex; flex-wrap: wrap; gap: 12px 10px; margin-top: 8px; }
.tsw-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px;
  background: none; border: none; padding: 0; color: var(--muted); font-size: 10.5px; }
.tsw { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line); position: relative; }
.tsw-wrap.sel .tsw { outline: 3px solid var(--primary); outline-offset: 2px; }
.tsw-wrap.sel { color: var(--ink); font-weight: 700; }
.tsw .dot { position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); }

/* ── 例文の「＋クイズ」ボタン ── */
.ex-quiz { margin-left: 8px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--primary); background: transparent; color: var(--primary); }
.ex-quiz.added { border-color: var(--ok); color: var(--ok); background: var(--cefrA-bg); }

/* ── クイズのグループ ── */
.group-bar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 4px; -webkit-overflow-scrolling: touch; }
.gchip { flex: 0 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.gchip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.gchip .gc-count { margin-left: 5px; opacity: .7; font-size: 11.5px; }
.gchip.add { border-style: dashed; color: var(--primary); }
.group-tools { display: flex; gap: 8px; margin: 8px 0 4px; }
.qi-groups { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 2px 8px 4px; }
.gtag { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); }
.gtag.on { background: var(--cefrA-bg); border-color: var(--ok); color: var(--cefrA-ink); }

/* ── クイズ ── */
.quiz-modes { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.mode-chip { text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.mode-chip.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.mode-chip .mc-label { font-weight: 700; font-size: 15px; }
.mode-chip.on .mc-label { color: var(--primary); }
.mode-chip .mc-desc { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.mode-chip::before { content: "○"; float: right; color: var(--muted); font-weight: 700; }
.mode-chip.on::before { content: "●"; color: var(--primary); }
.quiz-list-wrap { margin-top: 20px; }
.quiz-list-h { font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.quiz-list { display: flex; flex-direction: column; gap: 10px; }
.qi-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.qi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qi-answer { font-size: 16px; font-weight: 800; color: var(--primary); }
.qi-sentence { font-size: 15px; line-height: 1.65; margin: 4px 0 2px; }
.qi-hl { color: var(--primary); border-bottom: 2px solid var(--primary); font-weight: 700; }
.qi-ja { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.qi-grouprow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px dashed var(--line); padding-top: 9px; margin-top: 4px; }
.qi-glabel { font-size: 12px; color: var(--muted); font-weight: 700; margin-right: 2px; }
.qi-ghint { font-size: 12px; color: var(--muted); }
.quiz-run { margin-top: 6px; }
.quiz-bar { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-bottom: 10px; font-weight: 600; }
.quiz-score { color: var(--ok); }
.quiz-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.quiz-type { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 2px 9px; border-radius: 999px; margin-bottom: 12px; }
.quiz-prompt { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.quiz-sentence { font-size: 18px; font-weight: 600; line-height: 1.7; margin-bottom: 14px; }
.quiz-listen-btns { display: flex; gap: 8px; margin-bottom: 14px; }
.quiz-answer { display: flex; gap: 8px; }
.quiz-input { flex: 1; margin-bottom: 0; }
.quiz-feedback { margin-top: 14px; }
.quiz-feedback.ok .fb-mark { color: var(--ok); }
.quiz-feedback.ng .fb-mark { color: var(--err); }
.quiz-feedback.close .fb-mark { color: var(--cefrB-ink); }
.fb-mark { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.fb-ans { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.fb-exp { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.btn.next { margin-top: 8px; width: 100%; background: var(--primary); color: #fff; border-color: var(--primary); }
.quiz-summary { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 18px; box-shadow: var(--shadow); }
.sum-big { font-size: 36px; font-weight: 800; }
.sum-pct { color: var(--primary); font-weight: 700; font-size: 18px; margin: 2px 0 8px; }
.sum-msg { color: var(--muted); margin-bottom: 18px; }
.quiz-summary .btn { margin: 4px; }

/* ── プラン / アップグレード ── */
.plan-bar { height: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; margin: 8px 0 4px; }
.plan-bar-fill { height: 100%; background: var(--primary); border-radius: 99px; transition: width .3s; }
.plan-bar-fill.full { background: var(--err); }
.upgrade { padding: 4px 2px 10px; }
.up-title { font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.up-col { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.up-col.pro { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.up-h { font-weight: 800; margin-bottom: 8px; }
.up-col.pro .up-h { color: var(--primary); }
.up-price { font-size: 20px; font-weight: 800; color: var(--primary); margin: -2px 0 8px; }
.up-item { font-size: 13px; margin: 4px 0; color: var(--ink); }

/* ── 合言葉ゲート ── */
.passgate { position: fixed; inset: 0; z-index: 80; background: var(--brand); display: flex; align-items: center; justify-content: center; padding: 24px; }
.passgate-card { background: var(--card); border-radius: var(--radius); padding: 28px 22px calc(24px + env(safe-area-inset-bottom)); width: 100%; max-width: 360px; text-align: center; box-shadow: var(--shadow); }
.passgate-flag { width: 42px; height: 28px; border: 1px solid rgba(0,0,0,.12); margin: 0 auto 14px; border-radius: 4px;
  background: radial-gradient(circle at 50% 50%, #bc002d 0 32%, #fff 32%); }
.passgate-title { font-size: 20px; margin: 0 0 6px; }
.passgate-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.passgate .field { text-align: center; }
.passgate-msg { color: var(--err); font-size: 13px; min-height: 18px; margin: 6px 0 10px; }
/* 認証カードのモード切替タブ（新規登録／ログイン）— 今どちらの操作なのかを常に見せる */
.auth-tabs { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px; margin: 2px 0 16px; }
.auth-tab { flex: 1; padding: 10px 8px; border: none; background: transparent; border-radius: 9px;
  font-size: 14px; font-weight: 700; color: var(--muted); }
.auth-tab.active { background: var(--card); color: var(--primary); box-shadow: 0 1px 5px rgba(0,0,0,.14); }
.auth-hint { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }
/* パスワード再設定：小さなリンクと見出し */
.auth-box { width: 100%; }
.auth-forgot { display: inline-block; margin: 12px auto 0; background: none; border: 0; color: var(--muted);
  font-size: 13px; text-decoration: underline; cursor: pointer; font-family: inherit; }
.auth-forgot:hover { color: var(--primary); }
.auth-reset-title { font-weight: 800; font-size: 16px; margin: 2px 0 14px; }
/* パスワード表示/非表示トグル（右端の👁） */
.pw-field { position: relative; margin-bottom: 10px; }
.pw-field .field { margin-bottom: 0; padding-right: 42px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0;
  font-size: 17px; line-height: 1; padding: 4px 6px; cursor: pointer; opacity: .7; }
.pw-eye:hover { opacity: 1; }
.passgate-card .btn.block { margin-top: 4px; }
/* Googleで続ける ボタン（白地・4色ロゴ。ライト/ダーク両対応で白のまま） */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; background: #fff; color: #1f2430; border: 1px solid #dadce0;
  border-radius: 10px; padding: 11px 16px; font-size: 15px; font-weight: 600; }
.btn-google:hover { background: #f7f8fa; }
.btn-google:active { transform: scale(.99); }
.btn-google:disabled { opacity: .6; }
.btn-google .g-icon { display: inline-flex; }
/* 区切り「または」 */
.auth-or { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0 12px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-or span { padding: 0 12px; }
.passgate-owner { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; text-align: left; }
.passgate-owner summary { color: var(--muted); font-size: 12.5px; cursor: pointer; text-align: center; }
.passgate-row { display: flex; gap: 8px; margin-top: 8px; }
.passgate-row .field { margin-bottom: 0; text-align: left; }
.passgate-or { color: var(--muted); font-size: 12px; margin: 14px 0 8px; }
.passgate-or { color: var(--muted); font-size: 12px; margin: 14px 0 10px; }
.passgate-row { display: flex; gap: 8px; justify-content: center; }
.passgate-row .btn { flex: 1; }

@media (min-width: 720px) { .nt { font-size: 11px; } }

/* ── 日本語版で追加した要素 ───────────────────────────────── */

/* 読み（かな）・ローマ字 */
.wc-reading { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 4px; }
.wc-kana { font-size: 15px; font-weight: 700; }
.wc-romaji { font-size: 13px; color: var(--muted); font-style: italic; }

/* JLPT・動詞/形容詞の種類・敬語レベルのバッジ */
.b-jlpt { font-weight: 800; border-color: transparent; }
.jlpt-N5, .jlpt-N4 { background: var(--cefrA-bg); color: var(--cefrA-ink); }
.jlpt-N3 { background: var(--cefrB-bg); color: var(--cefrB-ink); }
.jlpt-N2, .jlpt-N1 { background: var(--cefrC-bg); color: var(--cefrC-ink); }
.b-vtype, .b-atype { background: var(--refl-bg); color: var(--refl-ink); border-color: transparent; }
.b-keigo { border-color: transparent; color: #fff; }
.k-casual { background: #6b7689; }
.k-polite { background: #2f8f6b; }
.k-respectful { background: #7c3aed; }
.k-humble { background: #c2683a; }
/* 種類タグ（四字熟語・慣用句など）— 琥珀色で他バッジと差別化 */
.b-tag { background: #fbe6c8; color: #7a531a; border-color: #f0d49a; font-weight: 700; }

/* 敬語 */
.wc-keigo { margin: 12px 0; padding: 12px 14px; background: var(--reflbox-bg); border-radius: 10px; }
.wc-keigo-note { color: var(--muted); font-size: 12.5px; margin-top: 8px; line-height: 1.5; }

/* オノマトペ */
.wc-onomat { margin: 12px 0; padding: 12px 14px; background: var(--reflbox-bg); border-radius: 10px; }
.wc-onomat-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wc-onomat-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #e07a5f; color: #fff; }
.wc-onomat-type { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.wc-onomat-use { font-size: 13.5px; margin-top: 6px; line-height: 1.55; }

/* 漢字 */
.wc-kanji { margin: 12px 0; }
.kanji-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.kanji-row:first-of-type { border-top: none; }
.kanji-char { font-size: 30px; font-weight: 800; line-height: 1; min-width: 40px; text-align: center; }
.kanji-info { flex: 1; min-width: 0; }
.kanji-read { font-size: 13px; color: var(--muted); }
.kanji-mean { font-size: 14px; font-weight: 600; }

/* 関連語（似た四字熟語・同じ語の慣用句・似たことわざ） */
.wc-related { margin: 12px 0; }
.rel-row { padding: 8px 0; border-top: 1px solid var(--line); }
.rel-row:first-of-type { border-top: none; }
.rel-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rel-term { font-size: 15px; font-weight: 700; }
.rel-reading { color: var(--muted); font-size: 12.5px; }
.rel-mean { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* 例文のかな表記 */
.ex-reading { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* 言語選択 */
.passgate-card.wide { max-width: 470px; }
.lang-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-top: 6px; }
.lang-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; }
.lang-btn:hover { border-color: var(--primary); }
.lang-btn.sel { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(47,111,237,.18); }
.lang-native { font-size: 15px; font-weight: 700; }
.lang-label { font-size: 11.5px; color: var(--muted); }

/* ── Pro限定テーマ（オリジナルキャラクター）───────────────── */
.tsw-wrap.pro { position: relative; }
.tsw-crown { position: absolute; right: -2px; top: -2px; font-size: 12px; line-height: 1; }
.tsw-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); }
.tsw-wrap.locked .tsw { filter: grayscale(.35) brightness(.95); }
.tsw-wrap.locked { opacity: .85; }
.tsw-chara { position: relative; overflow: hidden;
  background-image: radial-gradient(circle, rgba(0,0,0,.22) 1px, transparent 1px) !important;
  background-size: 6px 6px !important; background-color: #fdfbf7 !important; }
.up-reason { background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px;
  padding: 8px 12px; border-radius: 10px; margin-bottom: 12px; }

/* キャラクターテーマ本体（やわらかい紙＋水玉） */
:root[data-theme="chara"] {
  --bg: #faf7f2; --card: #ffffff; --ink: #2f2a26; --muted: #5f584f; --line: #ebe4da;
  --brand: #f7efe6; --brand-ink: #4a3a30; --primary: #e08aa0; --accent: #f6d4de; --accent-ink: #6b3a48;
  --shadow: 0 2px 12px rgba(120,90,80,.10);
}
:root[data-theme="chara"] body {
  background-color: #faf7f2;
  background-image: radial-gradient(circle, #d9d3ca 1.2px, transparent 1.2px);
  background-size: 24px 24px;   /* ごまろあの世界観に合わせた細かい水玉 */
}

/* Pro限定テーマ: くまちゃんがアイテムを拾いに歩く（内容の上・操作は透過） */
.chara-deco { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; transform: translateZ(0); }
.chara-deco .cd-bear { position: absolute; left: 0; top: 0; width: 62px; height: auto;
  transform-origin: 50% 100%; opacity: .95; will-change: transform; }
.chara-deco .cd-item { position: absolute; left: 0; top: 0; width: 24px; height: 24px;
  font-size: 21px; line-height: 24px; text-align: center;
  opacity: .95; will-change: transform; }   /* 絵文字は色つきのまま */
/* 「文字の後ろで歩かせる」設定のとき（読書の邪魔になりにくい） */
.chara-deco.behind { z-index: -1; }
.chara-opt { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.chara-opt input { width: 16px; height: 16px; accent-color: var(--primary); }
/* ── ホーム画面のプロフィール ── */
/* アイコン → 名前 → 区切り線 → 一言 を縦に。幅は中身ぶんだけ。小さめ軽め。 */
.prof-card { display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: fit-content; min-width: 150px; max-width: 100%; margin: 0 auto 4px;
  padding: 12px 22px; border-radius: var(--radius); cursor: pointer; }
.prof-card:active { transform: scale(.99); }
.prof-card .avatar-wrap { width: 78px; height: 78px; }
.prof-card .avatar { box-shadow: 0 3px 12px rgba(20,30,60,.14); }   /* 背景が無いぶん、影で少し浮かせて目立たせる */
.prof-card .avatar-ph { font-size: 34px; }
.prof-name { font-size: 15.5px; font-weight: 800; text-align: center; max-width: 220px;
  color: var(--onwash-ink); text-shadow: var(--onwash-shadow);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-line { width: 44px; height: 1px; background: var(--onwash-line); border: 0; margin: 1px 0; }
.prof-bio { color: var(--onwash-mut); text-shadow: var(--onwash-shadow); font-size: 12.5px; text-align: center; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 丸いアイコン＋その上に重ねる耳 */
.avatar-wrap { position: relative; width: 62px; height: 62px; flex: 0 0 auto; }
.avatar-wrap.big { width: 96px; height: 96px; margin: 6px auto 12px; }
.avatar { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--bg);
  border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-ph { font-size: 26px; }
.avatar-wrap.big .avatar-ph { font-size: 40px; }
/* アイコンを押して編集・写真選択（押せることが分かるようカメラ印を出す） */
.avatar-wrap.tappable { cursor: pointer; }
.avatar-wrap.tappable:active { transform: scale(.97); }
.avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; font-size: 13px; }
.prof-avatar-slot { display: flex; justify-content: center; }
/* 写真を消す✕（アイコンの左上） */
.avatar-del { position: absolute; left: -2px; top: -2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--danger); font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; }
/* 写真の位置・大きさを決める画面 */
.avatar-stage { display: flex; justify-content: center; margin: 10px 0 6px; }
.avatar-canvas { width: 220px; height: 220px; border-radius: 50%; border: 2px solid var(--line);
  background: var(--bg); touch-action: none; cursor: grab; box-shadow: var(--shadow); }
.avatar-canvas:active { cursor: grabbing; }
.zoom-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.zoom-ico { font-size: 15px; }
.avatar-zoom { flex: 1; accent-color: var(--primary); }
/* ── ホーム画面のシャボン玉 ──
   日本語がふわっと浮かんで消える。触ると単語カードが開く。 */
.bubbles { position: relative; height: 190px; margin: 4px 0 10px; overflow: hidden; }
.bubbles.hidden { display: none; }
.bubble {
  position: absolute; bottom: -46px; max-width: 62%;
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 86%, transparent); color: var(--ink);
  font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 3px 12px rgba(30,45,90,.10), inset 0 1px 0 rgba(255,255,255,.55);
  animation: bubbleUp var(--dur, 11s) linear forwards;
}
.bubble:active { transform: scale(.96); }
@keyframes bubbleUp {
  0%   { transform: translate(0, 0) scale(.92); opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(var(--drift, 0), -230px) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {   /* 動きが苦手な人向け：静かに出して静かに消す */
  .bubble { animation: bubbleFade var(--dur, 11s) linear forwards; }
  @keyframes bubbleFade { 0%,100% { opacity: 0; } 15%,80% { opacity: 1; } }
}
/* ── ホーム：検索＋辞書を1枚のカードにまとめる ── */
.hub-panel { max-width: 560px; margin: 2px auto 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px 24px 19px 25px; box-shadow: var(--shadow); padding: 15px 15px 17px; }
.hub-panel .search-row { margin-bottom: 0; }
/* 虫めがね付きの検索欄（カードの中で少しへこんだ見た目） */
.search-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: var(--field, var(--bg)); border: 1px solid var(--line); border-radius: 13px 12px 14px 12px; padding: 0 13px; }
.search-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.search-ico { font-size: 15px; opacity: .5; flex: none; }
.field.bare { border: 0; background: transparent; margin: 0; padding: 12px 0; border-radius: 0; }
.field.bare:focus { outline: none; }
.hub-panel .search-results:not(:empty) { margin-top: 12px; }
/* カード内の区切り線 */
.panel-div { border: 0; height: 1px; background: var(--line); margin: 15px 0 14px; }
/* 「あなたの辞書」はカードの中の小見出し（囲みは付けない） */
.dict-head { margin: 0 0 10px; font-size: 13.5px; font-weight: 800; color: var(--muted); letter-spacing: .02em; }

/* ── 星（キラキラ）：水彩テーマの背景にふわっと散らす。設定でON/OFF ── */
#mj-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mj-star { position: absolute; color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.9);
  animation: mjTwinkle 3.6s ease-in-out infinite; will-change: opacity; }
@keyframes mjTwinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mj-star { animation: none; opacity: .8; } }

/* 使い方ツアー（実際の画面を暗くして、案内したい部分だけ明るく照らす） */
.tour { position: fixed; inset: 0; z-index: 100; opacity: 0; transition: opacity .2s; }
.tour.show { opacity: 1; }
.tour-hole { position: fixed; border-radius: 14px; border: 2px solid var(--primary);
  box-shadow: 0 0 0 9999px rgba(8,12,24,.66), 0 0 0 6px rgba(47,111,237,.25);
  transition: left .28s, top .28s, width .28s, height .28s; pointer-events: none; }
.tour-hole.nudge { animation: tourNudge .42s ease; }
@keyframes tourNudge { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.tour-tip { position: fixed; max-width: min(340px, calc(100vw - 20px)); background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; box-shadow: 0 12px 34px rgba(0,0,0,.38);
  transition: left .28s, top .28s; }
.tour-text { font-size: 14.5px; line-height: 1.6; }
.tour-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.tour-count { color: var(--muted); font-size: 12px; }
.tour-skip { background: transparent; border: none; color: var(--muted); font-size: 12.5px; text-decoration: underline; padding: 2px 4px; }
/* 使い方ガイド（番号つきの手順は .ins-steps を流用） */
.guide-intro { color: var(--muted); font-size: 13.5px; margin: 2px 0 12px; line-height: 1.6; }
.ins-step .guide-t { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
.ins-step .guide-b { display: block; color: var(--muted); font-size: 13px; line-height: 1.6; }
/* PWA インストール手順 */
.ins-steps { counter-reset: ins; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ins-step { position: relative; padding: 10px 12px 10px 40px; background: var(--reflbox-bg, rgba(127,127,127,.08));
  border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.ins-step::before { counter-increment: ins; content: counter(ins); position: absolute; left: 10px; top: 9px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* iOS: カード背景が消えるバグ対策（内容を独立レイヤーに） */
:root[data-theme="chara"] .set-card { transform: translateZ(0); }
/* Characterテーマの見本スウォッチは水玉だけに（王冠マークと中央ドットを消す） */
.tsw-crown { display: none; }

/* 右上のAI状態ランプは非表示（お客さんには不要） */
.api-dot { display: none; }