/* 記憶の宮殿メーカー
   暗い背景・主役は写真。差し色は深い青1色（明度違いのみ）。
   動きは「場所から場所へ移るときの横すべり」だけ。押したときは色が変わるだけ。 */
:root {
  /* 色 */
  --bg: #0d1015;          /* 画面の地 */
  --surface: #161a21;     /* カード・帯・入れ物 */
  --surface-2: #1e232c;   /* 押している間・一段上 */
  --field: #0a0d11;       /* 入力欄 */
  --line: #2b313c;        /* 区切り線 */
  --line-strong: #4a5263; /* 押せる物の枠 */
  --text: #eef0f3;        /* 本文（地との差 15:1 以上） */
  --sub: #a3abb8;         /* 補足（地との差 6.8:1 以上） */
  --placeholder: #8e97a5; /* 入力欄の例文（6.6:1） */
  --accent: #1f4fd1;      /* 深い青（白文字 6.8:1） */
  --accent-press: #183fa8;
  --accent-soft: #1a2747; /* 青の薄い面（選んだ語呂・数字の箱） */
  --accent-text: #a9c1ff; /* 暗い地の上で青を文字に使うとき */
  --on-accent: #ffffff;
  --scrim: rgba(0, 0, 0, .55);
  /* 文字 */
  /* rem: 端末の文字の大きさの設定（ルートの font-size）に合わせて大きくなる */
  --fs-xs: .75rem;   /* 12px 写真の上の印だけ */
  --fs-s: .875rem;   /* 14px 補足 */
  --fs-m: 1rem;      /* 16px 本文・ボタン */
  --fs-l: 1.125rem;  /* 18px 語呂の文・強い本文 */
  --fs-xl: 1.375rem; /* 22px 見出し・答え */
  /* 余白 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* 角丸 */
  --r-s: 8px; --r-m: 12px; --r-l: 18px; --r-full: 999px;
  /* 押す場所の高さ */
  --tap: 48px; --tap-l: 56px; --tap-xl: 68px;
  --bottom-h: 80px; /* 下の帯の高さ。dom.js が実際の高さで上書きする（文字を大きくしても中身が隠れない） */
  --font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* 長い名前・答え（スペースの無い日本語）でも画面の幅を超えない */
body { overflow-wrap: anywhere; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-m); line-height: 1.5; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
a { color: var(--accent-text); }
p { margin: var(--sp-2) 0; }

/* ボタン */
button, .btn {
  font: inherit; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-m); padding: var(--sp-3) var(--sp-4); min-height: var(--tap); cursor: pointer; text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
button:active:not(:disabled) { background: var(--surface-2); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:active:not(:disabled) { background: var(--accent-press); border-color: var(--accent-press); }
button.ghost { background: transparent; border-color: transparent; color: var(--sub); font-weight: 500; }
button.ghost:active:not(:disabled) { background: var(--surface-2); }
/* 消すボタン: 差し色は青1色だけなので赤は使わない。目立たない枠ボタン＋確認ダイアログで守る */
button.quiet { color: var(--sub); border-color: var(--line); background: transparent; font-weight: 500; }
button.choose { border-color: var(--accent); color: var(--text); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.lock { flex: none; color: var(--sub); }
button.primary .lock { color: var(--on-accent); }

/* 入力 */
input, textarea, select { font: inherit; font-size: var(--fs-m); color: var(--text); background: var(--field); border: 1px solid var(--line-strong); border-radius: var(--r-m); padding: var(--sp-3); width: 100%; min-height: var(--tap); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, textarea:focus, select:focus { border-color: var(--accent-text); outline: none; }
input[type=checkbox] { min-height: 0; accent-color: var(--accent); }
textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
label { display: block; color: var(--sub); font-size: var(--fs-s); margin: var(--sp-4) 0 var(--sp-2); }

/* 画面の骨組み */
.view { max-width: 640px; margin: 0 auto; padding: 0 var(--sp-4) calc(var(--bottom-h) + var(--sp-5)); min-width: 0; }
[data-testid=key-status] { scroll-margin-bottom: calc(var(--bottom-h) + var(--sp-6)); }
.top { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: env(safe-area-inset-top) var(--sp-2) 0; height: calc(52px + env(safe-area-inset-top)); display: flex; align-items: center; margin: 0 calc(-1 * var(--sp-4)); }
.top .back { background: transparent; border: 0; min-height: var(--tap); padding: 0 var(--sp-3) 0 var(--sp-2); font-size: var(--fs-l); font-weight: 500; color: var(--text); }
.top .back::before { content: ""; width: 10px; height: 10px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); margin: 0 var(--sp-1) 0 var(--sp-2); }
.top .app-name { padding-left: var(--sp-3); color: var(--sub); font-size: var(--fs-s); font-weight: 600; letter-spacing: .04em; }
h1 { font-size: var(--fs-xl); line-height: 1.35; margin: var(--sp-2) 0 var(--sp-4); }
h2 { font-size: var(--fs-s); margin: var(--sp-6) 0 var(--sp-2); color: var(--sub); font-weight: 600; letter-spacing: .04em; }
.sub { color: var(--sub); font-size: var(--fs-s); }
.error { color: var(--text); }
.error::before { content: "！"; font-weight: 700; margin-right: var(--sp-1); }
.ok { color: var(--accent-text); }

/* 下の操作帯（親指の届く所。安全領域込み） */
.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; background: rgba(13, 16, 21, .97); border-top: 1px solid var(--line); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); display: flex; gap: var(--sp-2); justify-content: center; }
.bottom > * { flex: 1; max-width: 608px; }
.bottom > button { min-height: var(--tap-l); font-size: var(--fs-m); }
.bottom > button.primary { flex: 1.4; }
/* 3つ並ぶ帯（宮殿の画面）: 同じ幅・1行で収める */
.bottom.three > button { flex: 1 1 0; min-width: 0; padding-left: var(--sp-2); padding-right: var(--sp-2); }
.bottom { flex-wrap: wrap; }
.bottom > button { min-width: 0; }
.bottom .hint { color: var(--sub); font-size: var(--fs-s); text-align: center; align-self: center; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap-l); }

/* 並び */
.list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); }
.card .grow { flex: 1; min-width: 0; }
.card a.grow { text-decoration: none; color: var(--text); display: flex; flex-direction: column; justify-content: center; min-height: var(--tap); }
.card a.grow:active { opacity: .7; }
.card a.spot-link { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--sp-3); }
.card strong { font-size: var(--fs-m); }
.card a.grow > * { min-width: 0; }
/* 名前は1行で「…」。補足（件数など）は折り返してよい */
.card a.grow strong, .card .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card a.spot-link > span { flex: 1; min-width: 0; }
.spot-head { margin: var(--sp-2) 0 var(--sp-2); }
.spot-head .sub { font-weight: 600; }
.row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.row > * { flex: 1; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.links > button { flex: 0 1 auto; min-width: 0; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-s); background: var(--field); flex: none; }
.num { flex: none; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-s); }
.order-btns { display: flex; flex-direction: column; gap: var(--sp-1); }
.order-btns button { min-height: 44px; min-width: 44px; padding: 0 var(--sp-2); font-size: var(--fs-s); }
.card .del { min-height: var(--tap); padding: 0 var(--sp-2); font-size: var(--fs-s); margin-left: var(--sp-3); }

/* 一覧: 今日の復習・はじめての案内 */
.today { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.nobr { display: inline-block; }
.today .count { font-size: var(--fs-xl); font-weight: 700; margin-right: 2px; }
/* 最初に開いたとき: 見本の玄関を画面の幅いっぱいに。絵の下の端は地の色に溶かす */
.first { margin: 0 calc(-1 * var(--sp-4)); padding-top: env(safe-area-inset-top); }
.first-pic.photo { display: block; margin: 0; overflow: hidden; --art-w: clamp(84px, 30vw, 180px); }
.first-pic.photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(to bottom, rgba(13, 16, 21, 0), var(--bg)); pointer-events: none; z-index: 500; }
.first-body { padding: 0 var(--sp-4); position: relative; z-index: 1; margin-top: calc(-1 * var(--sp-4)); }
.brand { color: var(--accent-text); font-size: var(--fs-s); font-weight: 700; letter-spacing: .08em; margin: 0 0 var(--sp-2); }
.first .lead { font-size: var(--fs-xl); font-weight: 700; line-height: 1.5; margin: 0; letter-spacing: .01em; }
.first + .links { margin-top: var(--sp-3); justify-content: flex-start; }
.first + .links > button.ghost { padding-left: 0; color: var(--accent-text); font-weight: 600; font-size: var(--fs-s); }

/* 宮殿: 名前は見出しとして書き換えられる */
.title-input { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: var(--fs-xl); font-weight: 700; background: transparent; border-color: transparent; padding: var(--sp-2) var(--sp-2); margin: var(--sp-1) calc(-1 * var(--sp-2)) 0; width: calc(100% + var(--sp-4)); }
.title-input:hover, .title-input:focus { background: var(--field); border-color: var(--line-strong); }
.empty-photos { border: 1.5px dashed var(--line-strong); border-radius: var(--r-l); padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--sub); font-size: var(--fs-s); margin: var(--sp-3) 0; }
.empty-photos b { display: block; color: var(--text); font-size: var(--fs-m); margin-bottom: var(--sp-1); }

/* 写真と点 */
/* isolation: 点・絵の重なり順（z-index）を写真の中だけで決め、上の帯・下の帯の上に出さない */
.photo { position: relative; isolation: isolate; margin: 0 calc(-1 * var(--sp-4)); background: #000; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.photo > img.bg { display: block; width: 100%; height: auto; }
/* 点（.pin）の箱は「置いた点」を中心にした小さな丸の大きさ。絵・印はこの箱を基準に外へ並べる。
   transform を使わない（使うと点ごとに重なりの層ができ、番号の丸がほかの点の絵の下に隠れる） */
.pin { position: absolute; width: 30px; height: 30px; margin: calc(-15px + var(--dy, 0px)) 0 0 calc(-15px + var(--dx, 0px)); }
/* 点の番号: 青地に白数字＋白縁＋外側に薄い黒の縁。明るい写真でも暗い写真でも埋もれない。
   番号はどの絵よりも手前（重なっても何番か分かる） */
.pin .dot { position: relative; z-index: 300; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: var(--fs-s); line-height: 1; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .45); }
/* 絵: 置いた点の上に「立てる」。絵の足元（下から12%）が点に重なり、点の物の下半分は見えたまま。
   白い縁（4方向の白い影を重ねて約2px）→ ごく細い黒の縁（明るい写真で白縁を見せる）→ 控えめな落ち影 */
.photo { --art-w: clamp(64px, 24vw, 148px); }
.pin img.art { position: absolute; z-index: var(--z, 1); left: calc(50% - var(--art-w) / 2); bottom: calc(50% - var(--art-w) * .12); width: var(--art-w); max-width: none; height: auto; pointer-events: auto;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 0 .75px rgba(0, 0, 0, .75)) drop-shadow(0 5px 5px rgba(0, 0, 0, .38)); }
/* 見本の家の絵は白縁を絵の中に持っているので、細い黒の縁と落ち影だけ */
.pin img.art.baked { filter: drop-shadow(0 0 .75px rgba(0, 0, 0, .7)) drop-shadow(0 5px 5px rgba(0, 0, 0, .38)); }
/* 同梱の絵は線が太く、震え線（離れた小さな線）がある。白いふちを付けると小さな線ごとに白いギザギザが出るので付けない */
.pin img.art.pack { filter: drop-shadow(0 0 .75px rgba(0, 0, 0, .55)) drop-shadow(0 5px 5px rgba(0, 0, 0, .38)); }
/* 写真の上の端に近い点は、絵を点の下に吊るす（写真の枠で絵が切れて、点の上に押し戻されないように） */
.pin.hang img.art { bottom: auto; top: calc(50% - var(--art-w) * .12); }
.pin.has-art .dot { width: 22px; height: 22px; margin: 4px; font-size: var(--fs-xs); }
/* 選んだ点: 白地に青数字＋青い外輪で一段大きく。絵は白縁の外に青い縁。ほかの点は少し引く */
.pin.selected .dot { background: #fff; color: var(--accent); width: 38px; height: 38px; margin: -4px; font-size: var(--fs-m); z-index: 320; box-shadow: 0 0 0 3px var(--accent), 0 0 0 5px rgba(255, 255, 255, .7), 0 2px 8px rgba(0, 0, 0, .5); }
.pin.has-art.selected .dot { width: 30px; height: 30px; margin: 0; font-size: var(--fs-s); }
.pin.selected img.art { z-index: 250; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 var(--accent)) drop-shadow(-2px 0 0 var(--accent)) drop-shadow(0 2px 0 var(--accent)) drop-shadow(0 -2px 0 var(--accent)) drop-shadow(0 5px 6px rgba(0, 0, 0, .45)); }
.pin img.art.own { filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 0 .75px rgba(0, 0, 0, .7)) drop-shadow(0 5px 5px rgba(0, 0, 0, .38)); }
.pin.selected img.art.own { filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 2px var(--accent)) drop-shadow(0 5px 6px rgba(0, 0, 0, .45)); }
.pin.selected img.art.pack { filter: drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 2px var(--accent)) drop-shadow(0 5px 6px rgba(0, 0, 0, .45)); }
.photo.has-selection .pin:not(.selected) { opacity: .55; }
/* 入れ子の扉印: 白い札に青の扉と枚数（番号の丸の右下） */
.pin .door { position: absolute; z-index: 310; left: 20px; top: 18px; display: inline-flex; align-items: center; gap: 2px; background: #fff; color: var(--accent); border-radius: var(--r-full); padding: 2px 6px 2px 5px; font-size: var(--fs-xs); font-weight: 700; line-height: 1; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .5); }
/* 歩く画面の「ここ」: 白い輪＋青の縁。まわりを少しだけ暗くする */
.ring { position: absolute; z-index: 300; width: 68px; height: 68px; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: var(--r-full); box-shadow: 0 0 0 3px var(--accent), inset 0 0 0 2px rgba(0, 0, 0, .35), 0 0 0 9999px rgba(0, 0, 0, .34); pointer-events: none; }
/* 新しい「ここ」が出たとき: 輪が少し大きい所から締まって、目を連れてくる */
.ring.enter { animation: ring-in .2s ease-out; }
@keyframes ring-in { from { transform: translate(-50%, -50%) scale(1.35); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
/* 答えを見たら: 暗さは消え、輪は縮んで消える。代わりに絵の足元の小さな点が残る */
.ring.landed { box-shadow: none; border-color: transparent; opacity: 0; transform: translate(-50%, -50%) scale(.3); transition: opacity .16s ease-out, transform .16s ease-out; animation: none; }
.foot { position: absolute; z-index: 300; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--r-full); background: var(--accent); border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .5); pointer-events: none; }
/* 絵が出る: 足元から小さく弾んで立ち上がる（0.2秒） */
.pin.pop img.art { animation: art-pop .2s cubic-bezier(.25, 1.35, .45, 1) both; transform-origin: 50% 88%; }
.pin.hang.pop img.art { transform-origin: 50% 12%; }
@keyframes art-pop { from { transform: scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
.photo-hint.top { bottom: auto; top: var(--sp-3); }
.photo-hint { position: absolute; z-index: 400; left: 50%; bottom: var(--sp-3); transform: translateX(-50%); background: rgba(13, 16, 21, .8); color: var(--text); font-size: var(--fs-s); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); white-space: nowrap; pointer-events: none; }

/* 点の状態の印: 作成中「…」／案あり（選ぶ前） */
.pin .state { position: absolute; z-index: 310; left: 50%; top: calc(100% + 1px); transform: translateX(-50%); background: var(--accent); color: var(--on-accent); border: 1.5px solid #fff; border-radius: var(--r-full); padding: 1px 6px; font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* 設定: 詳しい設定の折りたたみ */
details.more { margin-top: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-2); }
details.more > summary { cursor: pointer; color: var(--sub); font-size: var(--fs-s); font-weight: 600; min-height: var(--tap); display: flex; align-items: center; }

/* 下から出る入れ物 */
.sheet-wrap { position: fixed; inset: 0; z-index: 20; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 640px; max-height: 82vh; background: var(--surface); border-radius: var(--r-l) var(--r-l) 0 0; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line); }
.sheet-head strong { font-size: var(--fs-l); }
.sheet-body { overflow: auto; padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.sheet-body > label:first-child { margin-top: var(--sp-3); }
.sample { display: flex; width: 100%; text-align: left; margin: var(--sp-2) 0; flex-direction: column; align-items: flex-start; gap: var(--sp-1); font-weight: 500; border-color: var(--line); }
.sample span { display: block; }
.sample .sample-cat { font-size: var(--fs-xs); color: var(--sub); }
.sample .sample-q { line-height: 1.5; }
.sample .sample-a { font-weight: 700; color: var(--accent-text); }

/* 点の編集（下から出る欄） */
.editor { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; max-height: 62vh; overflow: auto; overscroll-behavior: contain; background: var(--surface); border-top: 1px solid var(--line); border-radius: var(--r-l) var(--r-l) 0 0; padding: 0 var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0, 0, 0, .4); }
.editor-inner { max-width: 640px; margin: 0 auto; }
.editor .head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--surface); padding: var(--sp-2) 0; z-index: 1; border-bottom: 1px solid var(--line); margin: 0 calc(-1 * var(--sp-4)); padding-left: var(--sp-4); padding-right: var(--sp-2); }
.editor .head strong { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-l); }
.editor .head strong::before { content: ""; width: 12px; height: 12px; border-radius: var(--r-full); background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.editor h2 { border-top: 1px solid var(--line); padding-top: var(--sp-4); margin-top: var(--sp-5); }
.editor > .editor-inner > button.primary:first-of-type { margin-top: var(--sp-3); }
.goro-card { background: var(--field); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4); margin: var(--sp-2) 0 var(--sp-3); }
.goro-card.chosen { border-color: var(--accent); background: var(--accent-soft); }
.goro-card > .sub:first-child { color: var(--accent-text); font-weight: 600; margin-bottom: var(--sp-1); }
.goro-card .phrase { font-size: var(--fs-l); font-weight: 700; line-height: 1.5; }
.goro-card .reading { color: var(--sub); font-size: var(--fs-m); line-height: 1.9; margin: var(--sp-1) 0 var(--sp-3); letter-spacing: .03em; }
.goro-card mark { background: var(--accent); color: var(--on-accent); border-radius: 5px; padding: 2px 4px; margin: 0 1px; font-weight: 700; }
.goro-card .shape { font-size: var(--fs-s); color: var(--text); background: var(--surface); border-radius: var(--r-s); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); line-height: 1.6; }
.goro-card.chosen .shape { background: rgba(0, 0, 0, .25); }
.goro-card .shape .k { display: inline-block; min-width: 6em; color: var(--sub); }
.goro-card .shape b { font-size: var(--fs-m); letter-spacing: .04em; }
.goro-card > button:last-child { margin-top: 0; }
.fail { border: 1px solid var(--line-strong); background: var(--field); border-radius: var(--r-m); padding: var(--sp-3); margin: var(--sp-2) 0; }
/* エラー: 色ではなく「！」の記号と暗い面で区別する */
.fail p { margin: 0 0 var(--sp-3); color: var(--text); display: flex; gap: var(--sp-2); }
.fail p::before { content: "！"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-full); border: 1.5px solid var(--text); font-size: var(--fs-xs); font-weight: 700; line-height: 1; }
.art-thumbs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.art-thumb { width: 56px; height: 56px; min-height: 0; padding: 3px; background: var(--field); border-color: var(--line); }
.art-thumb img { width: 100%; height: 100%; object-fit: contain; }
.art-thumb.current { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.art-preview { display: block; width: 168px; height: 168px; object-fit: contain; margin: var(--sp-2) auto; background: repeating-conic-gradient(#20252e 0 25%, #2a303a 0 50%) 0 0/16px 16px; border-radius: var(--r-m); }
/* 待ち: 経過秒が毎秒増える箱（回る飾りは付けない） */
.busy { color: var(--text); background: var(--field); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-s); padding: var(--sp-3); margin: var(--sp-2) 0; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }

/* 歩く */
.walk-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin: var(--sp-1) 0 var(--sp-2); }
.walk-head h1 { font-size: var(--fs-l); margin: 0; }
.walk-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.walk-meta .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.walk-head h1 { min-width: 0; }
.walk-text { margin-top: var(--sp-4); scroll-margin-bottom: calc(var(--bottom-h) + var(--sp-6)); }
.walk-text .q { font-size: var(--fs-l); line-height: 1.5; }
.walk-text .a { font-size: var(--fs-xl); font-weight: 700; margin-top: var(--sp-2); color: var(--text); }
.walk-text .phrase { font-size: var(--fs-m); font-weight: 600; line-height: 1.5; margin-top: var(--sp-2); color: var(--accent-text); }
.walk-text .phrase::before { content: "語呂 "; color: var(--sub); font-weight: 500; font-size: var(--fs-s); }
.rate { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* 3つは明度と記号で区別（覚えている＝青の面・○、あやふや＝明るい枠・△、忘れた＝暗い面・×） */
.rate button { flex: 1 1 6.5em; min-width: 0; min-height: var(--tap-xl); padding: var(--sp-2) var(--sp-1); flex-direction: column; gap: 2px; font-size: var(--fs-m); line-height: 1.2; }
.rate button .mk { font-size: var(--fs-l); line-height: 1; font-weight: 700; }
.rate button .when { font-size: var(--fs-xs); font-weight: 500; opacity: .85; }
.rate .r-unsure { background: var(--surface-2); border-color: #8a93a3; }
.rate .r-forgot { background: var(--field); border-color: var(--line-strong); color: var(--text); }
.photo.fit { overflow: hidden; width: fit-content; max-width: calc(100% + 2 * var(--sp-4)); margin: 0 auto; border-radius: var(--r-s); }
.photo.fit > img.bg { width: auto; max-width: 100%; max-height: 48vh; }
.progress { color: var(--sub); font-size: var(--fs-s); margin: 0; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.result { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-4) 0; }
.result li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-3) var(--sp-2); text-align: center; display: flex; flex-direction: column; gap: 2px; }
.result .mk { color: var(--sub); }
.result strong { font-size: var(--fs-xl); }
.result span:not(.mk) { font-size: var(--fs-s); color: var(--sub); }
.empty { text-align: center; padding: var(--sp-6) var(--sp-4); }
.empty .sub { line-height: 1.7; }

/* 横すべり（場所の移動のときだけ） */
.slide-forward { animation: slide-f .22s ease-out; }
.slide-back { animation: slide-b .22s ease-out; }
@keyframes slide-f { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-b { from { transform: translateX(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slide-forward, .slide-back { animation: none; } * { scroll-behavior: auto !important; } }

/* お知らせ（位置は dom.js が下の帯・編集欄のすぐ上に決める） */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30; background: #262d3a; border: 1px solid var(--line-strong); color: var(--text); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); width: max-content; max-width: calc(100vw - 2 * var(--sp-4)); font-size: var(--fs-s); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.steps { padding-left: 1.4em; line-height: 1.7; margin: 0 0 var(--sp-2); }
.steps a { color: var(--accent-text); }
[data-goro-results], [data-art-section], .fail { scroll-margin-top: 64px; }

/* ---- 2026-10-09 追加: 見本の家・最初の画面・一行ヒント・取り消し・鍵の画面 ---- */
/* 一行ヒント: 今どこを押せばよいか。青の文字で1行だけ */
.guide { color: var(--accent-text); font-size: var(--fs-s); font-weight: 600; margin: var(--sp-2) 0; display: flex; gap: var(--sp-2); align-items: baseline; }
.guide::before { content: "→"; flex: none; }
.empty-photos[data-testid=guide] { color: var(--accent-text); }
/* 下の帯に縦に並べる（最初の画面の2つ・思い出す問題の候補） */
.bottom.stack { flex-direction: column; align-items: stretch; }
.bottom.stack > * { max-width: none; width: 100%; margin: 0 auto; }
.bottom.stack > button { flex: none; }
.bottom > button.big { min-height: var(--tap-xl); font-size: var(--fs-l); }
/* 最初の画面 */
.sample-end .lead { font-size: var(--fs-l); font-weight: 600; line-height: 1.6; margin: 0; }
.free-line { color: var(--sub); font-size: var(--fs-s); margin: var(--sp-2) 0; }
/* 一覧の「見本の家を歩く」 */
a.sample-link { text-decoration: none; color: var(--text); margin-top: var(--sp-5); }
a.sample-link:active { opacity: .7; }
.nudge { margin-top: var(--sp-3); border-color: var(--line-strong); }
.nudge button { flex: none; }
/* 見本の家 */
.sample-goro { margin-top: var(--sp-2); }
.sample-goro .phrase { font-size: var(--fs-m); font-weight: 600; line-height: 1.5; }
.sample-goro .reading { color: var(--sub); line-height: 1.9; }
.sample-goro mark { background: var(--accent); color: var(--on-accent); border-radius: 5px; padding: 2px 4px; margin: 0 1px; font-weight: 700; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.choices button { min-height: var(--tap-l); justify-content: flex-start; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); }
.choices img { width: 40px; height: 40px; flex: none; }
.sample-end { padding-top: var(--sp-2); }
.sample-end .score { font-size: var(--fs-m); }
.sample-end .score strong { font-size: var(--fs-xl); }
.sample-arts { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-1); margin: var(--sp-4) 0; }
.sample-arts img { width: 100%; height: auto; }
/* 記録の手応え: 押したボタンだけ濃く残す */
.rate button.picked { opacity: 1; outline: 2px solid var(--text); outline-offset: 1px; }
/* 取り消せるお知らせ */
.toast.with-action { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.toast-action { min-height: 44px; padding: 0 var(--sp-3); background: transparent; border-color: var(--accent-text); color: var(--accent-text); }
/* 鍵の画面 */
.paywall h3 { font-size: var(--fs-s); color: var(--sub); margin: var(--sp-4) 0 var(--sp-1); }
.paywall ul { margin: 0; padding-left: 1.2em; line-height: 1.7; }
.paywall .note { font-weight: 600; margin-top: var(--sp-4); }

/* ---- 検査1回目の修正 ---- */
/* 歩く画面の下の帯: 取り消しの1行＋「答えを見る」／記録の3つ＋押しても何も起きない行（2回押し対策） */
.walk-bar { gap: var(--sp-2); }
.undo-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-s); color: var(--text); min-height: 44px; }
.undo-row[hidden] { display: none; }
.undo-btn { min-height: 44px; padding: 0 var(--sp-3); background: transparent; border-color: var(--accent-text); color: var(--accent-text); flex: none; }
.rate-foot { min-height: var(--tap-l); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--sub); font-size: var(--fs-s); }
/* 下の帯の中の小さな行（一覧の読み込み・設定） */
.bottom .sub-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.bottom .sub-actions > button { flex: 0 1 auto; min-height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-s); }
.bottom .main-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bottom .main-actions > button { flex: 1 1 8em; min-height: var(--tap-l); min-width: 0; }
.bottom .main-actions > button.primary { flex-grow: 1.4; }
/* 入れ物の「閉じる」は下（親指側） */
.sheet-foot { padding: var(--sp-2) var(--sp-4) var(--sp-3); border-top: 1px solid var(--line); }
.sheet-foot > button { width: 100%; min-height: var(--tap-l); }
/* 次に開く写真（一行ヒントの対象）を強調 */
.card.next { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.card.next .next-tag { color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; }
.danger-zone { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
/* 写真の名前（任意）: 空のときは見出しに見えないよう小さく */
.title-input.small-empty:placeholder-shown { font-size: var(--fs-s); font-weight: 500; }
.field-note { color: var(--accent-text); font-size: var(--fs-s); margin: var(--sp-2) 0 0; }
/* 宅建サンプル: 分野で絞る・使った印 */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; }
.chips button { min-height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-s); border-color: var(--line); }
.chips button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sample .sample-used { font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text); border: 1px solid var(--accent-text); border-radius: var(--r-full); padding: 0 var(--sp-2); }
.sample.used { border-color: var(--accent-soft); background: var(--accent-soft); }
.check-44 { width: 44px; height: 44px; flex: none; display: grid; place-items: center; margin: 0; }
.check-44 input { width: 28px; height: 28px; }
/* 思い出す問題の候補: 文字が大きい・幅が狭いときは1列、横向きは1行に4つ */
.choices { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); }
/* 横向き（高さが低い）: 編集欄は右側に並べ、写真を見えるままにする */
@media (orientation: landscape) and (max-height: 520px) {
  .editor { left: auto; top: 0; width: min(50vw, 440px); max-height: none; border-radius: var(--r-l) 0 0 var(--r-l); border-top: 0; border-left: 1px solid var(--line); }
  body.editor-open .view { margin-left: 0; margin-right: min(50vw, 440px); max-width: none; }
  .first-pic.photo > img.bg { max-height: 50vh; width: auto; margin: 0 auto; --art-w: 20vh; }
  .first-pic.photo { --art-w: 20vh; }
  .first .lead { font-size: var(--fs-l); }
  .photo.fit > img.bg { max-height: 62vh; }
}
.sheet-actions { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.sheet-actions > button { width: 100%; min-height: var(--tap-l); }
.sample-end .tip { color: var(--text); margin: 0 0 var(--sp-2); }
/* 家の画面の写真の行: 幅が狭い・文字が大きいときは ▲▼と消すを次の行へ */
.card.spot-row { flex-wrap: wrap; }
.card.spot-row a.spot-link { flex: 1 1 9em; }
.card.spot-row .row-tools { display: flex; align-items: center; margin-left: auto; }
.bottom.three > button { flex: 1 1 6em; }
/* 歩く画面の帯は、文字が大きいとき記録の3つが縦に並ぶので高めまで許す（下の「何も起きない行」を残す） */
/* 横向き（高さが低い）: 縦に積む帯は横に並べて、写真を隠さない（歩く画面の帯は2回押し対策の並びを保つ） */
@media (orientation: landscape) and (max-height: 520px) {
  .bottom.stack:not(.walk-bar) { flex-direction: row; align-items: center; }
  .bottom.stack:not(.walk-bar) > * { flex: 1 1 0; width: auto; }
  .bottom.stack:not(.walk-bar) > .sub-actions { flex: 0 1 auto; }
  .walk-bar .rate-foot, .walk-bar > button { min-height: var(--tap); }
}

/* ---- 2026-10-09 デザインの作り込み（docs/flow/05-design.md「作り込み」の節） ---- */
/* 押した手応え: 沈む（1px 下がって少し縮む）＋色。0.08秒で戻る */
button, .btn, .card a.grow, a.sample-link, .first-pic { transition: transform .08s ease-out, background-color .12s ease-out, border-color .12s ease-out, opacity .12s ease-out; }
button:active:not(:disabled), .btn:active { transform: translateY(1px) scale(.98); }
.bottom > button:active:not(:disabled), .rate button:active:not(:disabled) { transform: translateY(1px) scale(.97); }
button.ghost:active:not(:disabled) { color: var(--text); }
a.sample-link:active, .card a.grow:active { opacity: 1; background: var(--surface-2); }

/* 歩く: 進み具合の細い線（上の帯の下の端） */
.walk-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); overflow: hidden; }
.walk-line-fill { display: block; height: 100%; background: var(--accent-text); transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s ease-out; }

/* 歩く: 答え・語呂の枠。答えの前は空の帯（何が隠れているか分かる）、答えを見ると中身が短く浮かび上がる */
.walk-text .q { font-size: var(--fs-l); line-height: 1.55; font-weight: 600; }
.slots { margin-top: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.slot { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); }
.slot + .slot { border-top: 1px solid var(--line); }
.slot > .k { color: var(--sub); font-size: var(--fs-s); font-weight: 600; align-self: start; padding-top: .15em; }
.slot-a { min-height: calc(var(--fs-xl) * 1.35 + 2 * var(--sp-3)); }
.slot .blank { display: block; height: .9rem; border-radius: var(--r-full); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.slot-a .blank { width: 4.5em; height: 1.1rem; }
.slot-g .blank { width: 70%; }
.slot .v { min-width: 0; }
.walk-text .slot .a { margin: 0; font-size: var(--fs-xl); line-height: 1.35; }
.walk-text .slot .phrase { margin: 0; color: var(--accent-text); }
.walk-text .slot .phrase::before { content: none; }
.slot.shown .v { animation: slot-in .18s ease-out both; }
.slot-g.shown .v { animation-delay: .04s; }
@keyframes slot-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sample-goro { margin-top: 0; }
.walk-tip { margin-top: var(--sp-3); }

/* 記録: 押したボタンは沈んだまま濃く残り、記号が一度だけ小さく弾む */
.rate button { transition: transform .08s ease-out, background-color .12s ease-out, opacity .12s ease-out; }
.rate button.picked { transform: translateY(1px) scale(.97); outline: 2px solid var(--text); outline-offset: 1px; }
.rate button.picked .mk { animation: mk-tap .22s ease-out; }
.rate button:disabled:not(.picked) { opacity: .35; }
.rate button.picked:disabled { opacity: 1; }
@keyframes mk-tap { 40% { transform: scale(1.35); } }
/* 次の覚える所へ: 同じ写真のままなら、問題と枠だけ短く入れ替わる（写真が変わるときは横すべり） */
.walk-text { animation: slot-in .16s ease-out; }

/* 取り消しの行: 残り時間が細い線で減っていく（5秒） */
.undo-row { position: relative; background: var(--surface-2); border-radius: var(--r-m); padding: 0 var(--sp-1) 0 var(--sp-3); overflow: hidden; }
.undo-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent-text); transform-origin: 0 50%; animation: undo-time 5s linear forwards; opacity: .7; }
@keyframes undo-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.undo-btn { border: 0; text-decoration: underline; text-underline-offset: 3px; }

/* 歩き終わり: 3つの数が順に出る。○の箱は青で縁取る */
.result li { animation: slot-in .2s ease-out both; }
.result li:nth-child(2) { animation-delay: .05s; }
.result li:nth-child(3) { animation-delay: .1s; }
.result .res-remembered { border-color: var(--accent); background: var(--accent-soft); }
.result .res-remembered .mk { color: var(--accent-text); }
.result .mk { font-size: var(--fs-l); font-weight: 700; line-height: 1.2; }

@media (prefers-reduced-motion: reduce) {
  .ring.enter, .pin.pop img.art, .slot.shown .v, .walk-text, .result li, .rate button.picked .mk { animation: none; }
  .ring.landed { transition: none; }
  .walk-line-fill { transition: none; }
  .undo-row::after { display: none; }
  button:active:not(:disabled), .btn:active, .rate button.picked { transform: none; }
}
/* 横向き（高さが低い）: 歩く画面は写真を左、問題と答えを右に並べ、答えを見ても絵が画面から出ない */
@media (orientation: landscape) and (max-height: 520px) {
  .walk-card { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; }
  .walk-card > .walk-head, .walk-card > .walk-meta { grid-column: 1 / -1; }
  .walk-card > .photo.fit { grid-column: 1; margin: 0; }
  .walk-card > .walk-text { grid-column: 2; margin-top: 0; }
  .walk-card .photo.fit > img.bg { max-height: 52vh; }
}
/* 見本の家: 思い出す問題の結果と、終わりの ○× の並び */
.quiz-res { display: block; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line-strong); font-weight: 700; }
.quiz-res.ok { background: var(--accent-soft); border-color: var(--accent); }
.quiz-res + .a { margin-top: var(--sp-3); }
.quiz-marks { list-style: none; display: flex; gap: var(--sp-2); padding: 0; margin: var(--sp-2) 0 var(--sp-3); }
.quiz-marks li { width: 40px; height: 40px; border-radius: var(--r-full); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-l); color: var(--sub); background: var(--surface); border: 1px solid var(--line-strong); animation: slot-in .2s ease-out both; }
.quiz-marks li.ok { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.quiz-marks li:nth-child(2) { animation-delay: .08s; }
.quiz-marks li:nth-child(3) { animation-delay: .16s; }
.sample-arts img { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
@media (prefers-reduced-motion: reduce) { .quiz-marks li { animation: none; } }
/* 待ち: 経過秒の箱の下の端を、細い線がゆっくり行き来する（進んでいることが分かる。回る飾りは付けない） */
.busy { position: relative; overflow: hidden; }
.busy::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30%; height: 2px; background: var(--accent-text); opacity: .8; animation: busy-run 1.6s ease-in-out infinite alternate; }
@keyframes busy-run { from { transform: translateX(-10%); } to { transform: translateX(343%); } }
@media (prefers-reduced-motion: reduce) { .busy::after { animation: none; width: 100%; opacity: .35; } }

/* ---- 検査2回目の修正 ---- */
/* 歩く画面の帯: 2段で高さを変えない。上の段＝一言／記録の3つ、下の段＝［答えを見る］［取り消す］／何も起きない一言 */
.walk-bar { gap: var(--sp-2); }
.walk-bar .bar-a { min-height: var(--tap-xl); display: flex; align-items: stretch; }
.walk-bar .bar-a > * { flex: 1; }
.walk-bar .bar-b { min-height: var(--tap-l); display: flex; gap: var(--sp-2); align-items: stretch; }
.walk-bar .bar-b > button { flex: 1 1 0; min-width: 0; }
.walk-bar .bar-b > button.primary { flex-grow: 1.4; }
.walk-bar .bar-b > .undo-btn { flex: 0 0 auto; }
.walk-bar .bar-b > .rate-foot { flex: 1; }
/* 帯の中の文字は、文字を大きくする設定でも画面の幅に合わせて頭打ちにする（帯が画面を覆わないように） */
.walk-bar, .walk-bar button, .bar-tip, .rate-foot, .undo-row { font-size: clamp(13px, var(--fs-s), 4vw); }
.walk-bar .bar-b > button { font-size: clamp(14px, var(--fs-m), 4.6vw); }
.bar-tip { margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--sub); }
.rate { flex-wrap: nowrap; width: 100%; }
.rate button { flex: 1 1 0; min-width: 0; font-size: clamp(13px, var(--fs-m), 4.4vw); word-break: keep-all; overflow-wrap: normal; }
.rate button .mk { font-size: clamp(15px, var(--fs-l), 5vw); }
.rate button .when { font-size: clamp(11px, var(--fs-xs), 3.3vw); }
.rate button .lbl { white-space: nowrap; }
.undo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .3em; min-height: 0; background: var(--surface-2); padding: var(--sp-2) var(--sp-3); }
.undo-row .kw { white-space: nowrap; }
.undo-btn:disabled { opacity: .45; }
.done-undo { display: flex; gap: var(--sp-2); align-items: stretch; margin: 0 0 var(--sp-3); }
.done-undo:empty { display: none; }
.done-undo .undo-row { flex: 1; justify-content: flex-start; border-radius: var(--r-m); }
.done-undo .undo-btn { flex: none; border: 1px solid var(--accent-text); }
.kw, .nobr { white-space: nowrap; }
/* 下の帯のボタンも、文字が大きい設定で帯が画面を覆わないよう頭打ち */
.bottom button { font-size: clamp(14px, var(--fs-m), 4.8vw); }
/* 見本の思い出す問題の結果: 問題文の下に答え（答えを問題より大きく上に出さない） */
.quiz-ans { margin-top: var(--sp-1); font-size: var(--fs-m); }
.quiz-ans b { font-size: var(--fs-l); }
/* 入れ物: 本文は内側でスクロールし、下の「閉じる」行に主ボタンが隠れない */
.sheet { max-height: 88vh; }
.sheet-body { flex: 1 1 auto; min-height: 0; }
.sheet-head, .sheet-foot { flex: none; }
/* 家の画面: 名前は折り返して全文 */
textarea.title-input { white-space: pre-wrap; resize: none; overflow: hidden; min-height: 0; line-height: 1.35; }
.danger-zone { margin-bottom: var(--sp-6); }
/* 無料の写真で6か所目から: 控えめな印 */
.pin .paid-tag { position: absolute; z-index: 310; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); font-size: var(--fs-xs); line-height: 1.2; padding: 0 5px; border-radius: var(--r-full); background: rgba(13, 16, 21, .8); color: var(--sub); border: 1px solid var(--line-strong); white-space: nowrap; pointer-events: none; }
.paid-note { color: var(--sub); font-size: var(--fs-s); border: 1px dashed var(--line-strong); border-radius: var(--r-s); padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }
/* 写真の画面の下の帯: 一言＋家に戻る */
.spot-bar .hint { min-height: 0; }
.spot-bar > button { min-height: var(--tap); }
.steps a.keep { display: inline-block; }
@media (orientation: landscape) and (max-height: 520px) {
  .walk-bar .bar-a { min-height: 52px; }
  .walk-bar .bar-b { min-height: 44px; }
  .rate button { min-height: 52px; flex-direction: row; gap: .4em; }
  .rate button .when { display: none; }
  /* 写真の画面: 写真を画面の高さに収め、下の帯が下側の点を覆わない */
  .photo:not(.fit) { width: fit-content; max-width: 100%; margin: 0 auto; }
  .photo:not(.fit) > img.bg { width: auto; max-width: 100%; }
  .spot-bar { flex-direction: row; align-items: center; }
  .spot-bar > * { flex: 1 1 auto; }
}

/* とても狭い画面（拡大200%など）では、記録の言葉も折り返してよい（ボタンの外へはみ出さない） */
@media (max-width: 300px) { .rate button { word-break: normal; } .rate button .lbl { white-space: normal; } .rate button .when { display: none; } }
/* 横すべりの途中で画面の幅が広がらないように（スマホでは画面全体が縮んで見え、写真の高さの計算もずれる） */
.view { overflow-x: clip; }
@media (max-width: 300px) {
  .walk-bar .bar-b, .walk-bar .bar-b > button, .walk-bar .rate-foot { min-height: 44px; }
  .walk-bar { padding-top: var(--sp-2); padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* 横向きの歩く画面: 右の文が長くても、左の写真（輪・絵）は画面に残す */
  .walk-card > .photo.fit { position: sticky; top: calc(56px + env(safe-area-inset-top)); align-self: start; }
}

/* ---- 検査3回目の修正 ---- */
/* 歩く画面の帯は1段: ［答えを見る］（帯の幅いっぱい）と記録の3つが同じ場所・同じ高さに出る（上下の動きなし） */
.walk-bar { flex-direction: column; }
.walk-bar .bar-a { min-height: var(--tap-xl); display: flex; align-items: stretch; }
.walk-bar .bar-a > * { flex: 1; width: 100%; }
.walk-bar .reveal-btn { min-height: var(--tap-xl); width: 100%; font-size: clamp(15px, var(--fs-l), 5vw); }
/* 答えを出した直後の受付停止（350ms）は、見た目も押せないと分かるように薄く */
.rate.wait button, .done-btns.wait button { opacity: .4; }
.rate.wait button:disabled:not(.picked) { opacity: .4; }
.done-btns { display: flex; gap: var(--sp-2); }
.done-btns > button { flex: 1 1 0; min-width: 0; min-height: var(--tap-xl); }
.done-btns > button.primary { flex-grow: 1.4; }
/* 取り消しは画面の上（進み具合の横）。親指の通り道から外す */
.top { gap: var(--sp-2); }
.top-undo { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); padding-right: var(--sp-2); font-size: clamp(12px, var(--fs-s), 3.8vw); color: var(--text); }
.top-undo[hidden] { display: none; }
.top-undo .undo-btn { min-height: 40px; min-width: 64px; padding: 0 var(--sp-3); border: 1px solid var(--accent-text); border-radius: var(--r-m); text-decoration: none; }
.top-undo .undo-btn:disabled { opacity: .4; }
/* とても狭い画面では短い語（記号＋2〜4字） */
.rate button .lbl-short { display: none; }
@media (max-width: 300px) {
  .rate button .lbl { display: none; }
  .rate button .lbl-short { display: inline; white-space: nowrap; font-size: 12px; }
}
/* 答えの横の絵の小さな複製（文字が大きくて写真の絵が画面の外のとき） */
/* 画面の右上（上の帯のすぐ下）に固定。答えを送って読んでいる間も絵が見えたまま */
.art-mini { position: fixed; z-index: 6; top: calc(60px + env(safe-area-inset-top)); right: var(--sp-3); width: 64px; height: 64px; object-fit: contain; background: rgba(13, 16, 21, .85); border: 1px solid var(--line-strong); border-radius: var(--r-m); padding: 4px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.same-day { margin-top: var(--sp-2); }
/* 写真を大きく見る */
.zoom-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .9); display: flex; flex-direction: column; }
.zoom-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; }
.zoom-wrap .photo.zoomed { margin: 0; width: fit-content; max-width: 100vw; }
.zoom-wrap .photo.zoomed > img.bg { max-height: calc(100vh - 96px) !important; max-width: 100vw; width: auto; }
.zoom-wrap .photo.zoomed .ring { display: none; }
.zoom-wrap .sheet-foot { background: var(--surface); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
/* 一覧の下の帯: 主ボタン（今日の分／最初の家を歩く）を大きく、新しい家は控えめに。読み込み・設定は枠のある小さなボタン */
.bottom .main-actions > button.quiet { flex: 0 1 auto; }
.bottom .sub-actions > button.small-btn { min-height: 44px; min-width: 88px; font-size: var(--fs-s); font-weight: 500; }
/* 最初の画面: 読み込みは控えめな小さな文字、説明との間を詰める */
.first-import { margin-top: var(--sp-2); justify-content: flex-start; }
.first-import > button { font-size: var(--fs-s); min-height: 44px; padding: 0 var(--sp-2); color: var(--sub); }
@media (max-height: 700px) and (orientation: portrait) {
  .first-pic.photo > img.bg { max-height: 36vh; width: auto; margin: 0 auto; }
}
/* 無料の数・印 */
.free-count { color: var(--sub); font-size: var(--fs-s); margin: var(--sp-1) 0 var(--sp-2); }
.free-tag { display: inline-block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text); border: 1px solid var(--accent-text); border-radius: var(--r-full); padding: 0 var(--sp-2); }
/* 写真の名前: 無いうちは小さな「＋ 名前」だけ */
.spot-label-row { display: flex; align-items: center; gap: var(--sp-2); }
.name-toggle { min-height: 36px; padding: 0 var(--sp-2); font-size: var(--fs-s); }
.title-input[hidden], .name-toggle[hidden] { display: none; }
.confirm-msg { font-size: var(--fs-m); line-height: 1.6; margin: var(--sp-3) 0; }
/* 写真の画面: 高さを抑えるときは、写真の幅も合わせて縮める（縦横の比を保ち、点の位置がずれない） */
.photo.capped:not(.fit) { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.photo.capped:not(.fit) > img.bg { width: auto; max-width: 100%; }

.photo-hint.guide-hint { white-space: normal; text-align: center; max-width: 90%; color: var(--accent-text); font-weight: 600; }

/* ---- 検査4回目の修正 ---- */
/* 消す確認: 赤は使わず、枠線だけのボタン＋注意の文。一番下（押しやすい所）は「やめる」 */
button.danger-outline { background: transparent; border: 1.5px solid var(--text); color: var(--text); width: 100%; min-height: var(--tap-l); }
.confirm-note { color: var(--accent-text); font-size: var(--fs-s); margin: 0 0 var(--sp-2); }
.confirm-warn { color: var(--sub); font-size: var(--fs-s); margin: 0 0 var(--sp-2); }
.sheet-foot > button.primary { border: 0; }

/* 絵の小さな複製は上の帯の右（問題文に重ねない） */
.top .art-mini { position: static; width: 44px; height: 44px; margin-left: auto; margin-right: var(--sp-2); padding: 2px; flex: none; }
.top .top-undo:not([hidden]) + .art-mini, .top .top-undo:not([hidden]) ~ .art-mini { margin-left: 0; }
/* 取り消すは44px以上 */
.top-undo .undo-btn { min-height: 44px; min-width: 88px; }
/* 「タップで答え」の札は、文字が大きくても小さく */
.photo-hint { font-size: clamp(11px, var(--fs-s), 3.6vw); }
/* 横向き: 記録ボタンに日数も出す（1行のまま） */
@media (orientation: landscape) and (max-height: 520px) {
  .rate button .when { display: inline; }
}
/* 「有料」札は暗い写真でも見えるよう白縁と明るい地 */
.pin .paid-tag { background: #eef0f3; color: #16181d; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); font-weight: 700; }
/* 「語呂の案あり」札は番号の丸（選ぶと大きくなる）と重ならない位置に */
.pin .state { top: calc(100% + 8px); }
.bottom .main-for { margin: 0; font-size: var(--fs-s); color: var(--sub); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-why { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.quiz-why .k { display: block; color: var(--sub); font-size: var(--fs-s); }
.name-chips { margin: 0 0 var(--sp-1); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.name-chips button { flex: none; min-height: 40px; }
.name-chips[hidden] { display: none; }

/* ---- リーダーの通し確認で見つけた所 ---- */
/* 歩く画面の語呂: 文＋読み（数字の音を青で強調） */
.walk-goro .reading { color: var(--sub); font-size: var(--fs-s); line-height: 1.8; margin-top: 2px; }
.walk-goro mark { background: var(--accent); color: var(--on-accent); border-radius: 5px; padding: 1px 4px; margin: 0 1px; font-weight: 700; }
/* 家の画面の無料の札は1行 */
.free-tag { white-space: nowrap; }
/* 歩き終わり: 主ボタン（×と△だけもう一回）を広く、終わるを狭く。1行に収める */
.done-btns > button { flex: 1 1 4.5em; }
.done-btns > button.primary { flex: 2.6 1 auto; white-space: nowrap; }
@media (max-width: 340px) { .done-btns > button.primary { white-space: normal; } }
/* 横向きの写真の画面: 見出しまわりを1行に詰める */
@media (orientation: landscape) and (max-height: 520px) {
  .spot-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-3); margin: var(--sp-1) 0; }
  .spot-head .free-count { margin: 0; }
  .spot-head .title-input { width: auto; flex: 1 1 12em; margin-top: 0; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* 横向きの写真の画面: 下の帯を低くして、写真を高く使う */
  .spot-bar { padding-top: var(--sp-1); padding-bottom: calc(var(--sp-1) + env(safe-area-inset-bottom)); }
  .spot-bar > button { min-height: 44px; }
}

/* 同梱の宅建の項目: 次のおすすめ（大きく1つ）と、選ぶ画面の行 */
.next-item { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--r-m); padding: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.next-item > .sub { margin: 0 0 var(--sp-2); }
.next-row { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); }
.next-art { flex: none; width: 96px; height: 96px; object-fit: contain; }
.next-text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.next-text .sample-cat { font-size: var(--fs-xs); color: var(--sub); }
.next-q { font-weight: 600; line-height: 1.5; margin: 2px 0; }
.next-text .sample-a { font-weight: 700; color: var(--accent-text); }
.next-goro { color: var(--sub); font-size: var(--fs-s); line-height: 1.5; margin-top: 2px; }
.pack-item { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.pack-item .pack-thumb { flex: none; width: 56px; height: 56px; object-fit: contain; }
.pack-item .pack-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.pack-item .pack-goro { color: var(--sub); font-size: var(--fs-s); font-weight: 500; }
.sheet-body input[type=search] { width: 100%; margin-top: var(--sp-2); }
.key-notice { border: 1px solid var(--line-strong); background: var(--field); border-radius: var(--r-m); padding: var(--sp-3); margin: var(--sp-3) 0; }
.key-notice p { margin: 0 0 var(--sp-3); line-height: 1.6; }
.spot-bar .bar-row { display: flex; gap: var(--sp-2); }
.spot-bar .bar-row > * { flex: 1; }
.editor .place-foot { position: sticky; bottom: 0; z-index: 1; background: var(--surface); padding: var(--sp-2) 0; margin-bottom: var(--sp-2); }
.next-item { margin-bottom: 0; }
.pack-item .sample-cat .sample-used { display: inline-block; margin-left: var(--sp-2); }

/* ---- 検査5回目 ---- */
/* おすすめの［ここに置く］: 編集欄の下に固定し、中身は上の欄の中だけで動く（ボタンの下に中身がもぐらない） */
.editor.has-foot:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.editor.has-foot > .editor-inner { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; max-width: none; width: 100%;
  padding: 0 max(var(--sp-4), calc((100% - 640px) / 2)) var(--sp-3); }
.editor.has-foot > .editor-inner > .head { margin: 0 calc(-1 * max(var(--sp-4), calc((100% - 640px) / 2))); padding-left: max(var(--sp-4), calc((100% - 640px) / 2)); }
.editor.has-foot > .place-foot { flex: none; position: static; margin: 0; border-top: 1px solid var(--line); background: var(--surface);
  padding: var(--sp-2) max(var(--sp-4), calc((100% - 640px) / 2)) calc(var(--sp-2) + env(safe-area-inset-bottom)); }
/* ［ほかの項目から選ぶ］［自分で書く］: 1行に入らなければ、1字だけ折り返さずに2行に分ける */
.row.fit > * { flex: 1 1 auto; white-space: nowrap; }
/* 選ぶ画面: 背の高い入れ物。探す欄と分野ボタンは上に固定、一覧だけが動く */
.sheet.tall { max-height: calc(100dvh - 8px); }
.pick-top { position: sticky; top: 0; z-index: 2; background: var(--surface); margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-2) var(--sp-4) var(--sp-1); border-bottom: 1px solid var(--line); }
.sheet-body:has(> .pick-top) { padding-top: 0; }
.pick-top input[type=search] { margin-top: 0; min-height: 44px; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.pick-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: var(--sp-2) 0 var(--sp-1); }
.pick-chips button { flex: none; min-height: 40px; }
.pick-count { margin: 0; font-size: var(--fs-xs); }
.pick-top [data-testid=pack-nohit] { margin: var(--sp-1) 0 0; color: var(--text); }
.pack-list .pack-item { margin: var(--sp-1) 0; padding: var(--sp-2) var(--sp-3); align-items: center; min-height: 0; gap: var(--sp-2); }
.pack-item .pack-thumb { width: 44px; height: 44px; }
.pack-item .sample-q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; font-size: var(--fs-s); }
.pack-item .sample-a { font-size: var(--fs-s); line-height: 1.4; }
.pack-item .sample-a .sample-used { display: inline-block; margin-left: var(--sp-2); }
/* 2枚目からの写真: 点ごとの「有料」札は出さず、写真の上に1行だけ（無料の写真の6か所目からの札は小さく） */
.pin .paid-tag { font-size: 10px; font-weight: 600; padding: 0 4px; }
/* 写真の画面の下の帯の一言: 置いたときのお知らせ（通信が無い・無料の範囲の外） */
.spot-bar .hint.note { color: var(--text); }
/* 写真の取り込み中: 一覧の位置にはっきり */
.import-line { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--r-m); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; font-weight: 600; }
/* 設定: キーの取り方のリンクは押せる高さ */
.steps a.keep { display: inline-flex; align-items: center; min-height: 44px; }
.key-notice .key-skip { margin: var(--sp-3) 0 0; color: var(--sub); font-size: var(--fs-s); }

/* ---- 検査6回目 ---- */
/* 続けて置く間の下の帯: 2行まで（1行目に一言、2行目に次の項目を1行で切る）。文字が大きいときは次の項目を出さない */
.spot-bar .hint[data-bulk] { display: block; min-height: 0; text-align: center; }
.spot-bar .hint[data-bulk] .l1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spot-bar .hint[data-bulk] .l2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big-text .spot-bar .hint[data-bulk] .l2 { display: none; }
/* 続けて置く間は名前の候補を畳む（写真を高く見せる） */
.bulk .name-chips, .bulk .name-toggle { display: none; }
/* 文字が大きいとき: 写真の画面の無料の一言は1行 */
.big-text .spot-head .free-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 「＋ 名前（任意）」は押せる高さ */
.name-toggle { min-height: 44px; margin-top: -6px; margin-bottom: -6px; }
/* 自分で書く（キーなし）: ［ここに置く］の下に一言、キーの話は小さく1行 */
.own-note { margin: var(--sp-2) 0 0; }
.own-note.error { color: var(--text); }
.key-line { margin: var(--sp-3) 0 0; color: var(--sub); font-size: var(--fs-s); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-1); }
.key-line .link-btn { background: none; border: 0; padding: 0 var(--sp-1); min-height: 44px; color: var(--accent-text); font-size: var(--fs-s); text-decoration: underline; width: auto; }
/* 通信が無くて、おすすめの絵が読めないとき */
.next-noart { margin: 0 0 var(--sp-2); color: var(--text); font-size: var(--fs-s); border: 1px dashed var(--line-strong); border-radius: var(--r-s); padding: var(--sp-2) var(--sp-3); }
/* 歩く画面: 絵の無い所は番号の印だけ */
.pin.no-art { pointer-events: none; }
/* 答えの後、収まらないとき: 問題は2行で切る（押すと全文） */
.walk-text .q.q-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
/* 文字が大きいとき: 答え・語呂の見出しを上に置き、文を幅いっぱいに（1文字ずつ折り返さない） */
.big-text .slot { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.big-text .slot > .k { padding-top: 0; }
.big-text .walk-goro .reading { line-height: 1.5; }
/* 語呂の文の最後の1字だけが次の行に行かないように */
.phrase, .sample-goro .reading, .walk-goro .reading { text-wrap: balance; }
/* 歩き終わり・一息の画面のボタンは途中で折り返さない */
.done-btns > button { white-space: nowrap; }
@media (max-width: 340px) { .done-btns > button { white-space: normal; } }
/* 家の画面の下の3つ: 折り返すのは「写真を」の後だけ */
.bottom.three > button { word-break: keep-all; }
/* 見本の家: 絵の読み込み中 */
.art-wait { position: absolute; z-index: 310; transform: translate(-50%, -130%); font-size: var(--fs-xs); color: var(--text); background: rgba(13, 16, 21, .85); border: 1px solid var(--line-strong); border-radius: var(--r-full); padding: 2px 8px; white-space: nowrap; pointer-events: none; }
/* 設定: 一番上の一行と、開ける所（▸ で開けると分かる） */
.settings-lead { font-weight: 600; margin: 0 0 var(--sp-3); }
details.more > summary { list-style: none; color: var(--accent-text); gap: var(--sp-2); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--accent-text); }
details.more[open] > summary::before { content: "▾"; }
details.steps-box { margin-top: var(--sp-2); }
/* 横向き: おすすめの中身を詰めて、［ほかの項目から選ぶ］［自分で書く］まで1画面に */
@media (orientation: landscape) and (max-height: 520px) {
  .editor.has-foot .guide { display: none; }
  .editor.has-foot .next-item { padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-1); }
  .editor.has-foot .next-item > .sub { margin-bottom: var(--sp-1); }
  .editor.has-foot .next-row { margin-bottom: 0; }
  .editor.has-foot .next-art { width: 64px; height: 64px; }
  .editor.has-foot .next-q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .editor.has-foot .next-goro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .editor.has-foot .row.fit { margin-top: var(--sp-2); }
}
/* とても狭い画面（拡大200%など）も、文字が大きいときと同じに詰める */
@media (max-width: 300px) {
  .spot-bar .hint[data-bulk] .l2 { display: none; }
  .spot-head .free-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slot { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .slot > .k { padding-top: 0; }
}

/* ---- 検査7回目 ---- */
/* 文字が大きいとき、最初の画面: 玄関の絵を低く、仕組みの1行を本文の大きさに（下の帯で切れない） */
.big-text .first-pic.photo > img.bg { max-height: 22vh; width: auto; margin: 0 auto; }
.big-text .first-pic.photo { --art-w: 12vh; }
.big-text .first .lead { font-size: var(--fs-s); line-height: 1.4; }
.big-text .first .brand { margin-bottom: 0; }
.big-text .first ~ .bottom > button.big { font-size: var(--fs-m); min-height: var(--tap-l); }
/* 文字が大きいとき、ホーム: 見出しと今日の分を詰めて、下の帯で今日の分を隠さない */
.big-text .top .app-name + * { margin-top: 0; }
.big-text h1 { margin: 0 0 var(--sp-2); }
.big-text .list + h2, .big-text .nudge + h2 { margin-top: var(--sp-3); }
.big-text .today { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.big-text .today .count { font-size: var(--fs-l); }
.big-text .bottom .sub-actions > button.small-btn { min-width: 0; }
/* 文字が大きいとき: 有料の注意は1行（置く画面が注意で埋まらない） */
.big-text .editor .paid-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
/* 押せる高さ: 名前の候補・選ぶ画面の分野ボタン */
.name-chips button, .pick-chips button { min-height: 44px; }
/* 文字が大きいとき: 選ぶ画面の問題は3行まで（営業保証金の主たる／従たる、のように区別する語が残る） */
.big-text .pack-item .sample-q { -webkit-line-clamp: 3; }
/* 見本の思い出す問題: 選択肢の絵を大きく（何の絵か分かるように）。2列は絵を上・名前を下に */
.choices button { flex-direction: column; justify-content: center; align-items: center; gap: var(--sp-1); padding: var(--sp-2); text-align: center; }
.choices img { width: clamp(56px, 13vh, 88px); height: clamp(56px, 13vh, 88px); object-fit: contain; }
/* 文字が大きい・1列のときは横並びのまま（縦に長くしない） */
.big-text .choices button { flex-direction: row; justify-content: flex-start; text-align: left; padding: var(--sp-1) var(--sp-3); }
.big-text .choices img { width: 56px; height: 56px; }
@media (orientation: landscape) and (max-height: 520px) {
  .choices button { flex-direction: row; justify-content: flex-start; text-align: left; padding: var(--sp-1) var(--sp-3); }
  .choices img { width: 48px; height: 48px; }
}

/* ---- 絵の入れ方（同梱の3案・描いた絵を撮る・画像から選ぶ・AI） ---- */
/* 同梱の3案: 押すとその案に替わる。青い太枠と右上の丸が使っている絵 */
.pack-arts { display: flex; gap: var(--sp-2); justify-content: center; margin: var(--sp-2) 0 var(--sp-1); }
.pack-art { position: relative; flex: 0 0 auto; width: 64px; height: 64px; min-height: 44px; padding: 3px; background: var(--field); border: 1px solid var(--line); }
.pack-art img { width: 100%; height: 100%; object-fit: contain; }
.pack-art.current { border: 3px solid var(--accent); background: var(--accent-soft); padding: 1px; }
.pack-art.current::after { content: ''; position: absolute; right: -6px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.pack-arts-note { text-align: center; margin: 0 0 var(--sp-2); }
/* 選ぶ画面では一番上・一番大きく（3列） */
.pack-arts.big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-2); padding: 6px 6px 0; }
.pack-arts.big .pack-art { width: 100%; height: auto; aspect-ratio: 1; max-height: 132px; justify-self: center; }
.art-ways-k { font-weight: 600; font-size: var(--fs-s); color: var(--sub); margin: var(--sp-3) 0 var(--sp-2); }
.art-ways { display: grid; gap: var(--sp-2); }
.art-way { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: var(--tap-l); text-align: left; padding: var(--sp-2) var(--sp-3); }
.art-way-label { font-weight: 600; }
.art-way-note { font-size: var(--fs-s); color: var(--sub); font-weight: 400; }
.art-way-off { font-size: var(--fs-s); color: var(--sub); margin: var(--sp-1) 0 0; }
.art-way-off .link-btn { background: none; border: 0; padding: 0 var(--sp-1); min-height: 44px; color: var(--accent-text); font-size: var(--fs-s); text-decoration: underline; width: auto; }
/* 置いた直後の下の帯の3案 */
.spot-bar .art-pick { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 2px var(--sp-2); }
.spot-bar .art-pick .art-pick-k { flex: 1 0 100%; text-align: center; }
.big-text .art-pick .pack-art-note { display: none; }
.spot-bar .art-pick[hidden] { display: none; }
.art-pick-k { font-size: var(--fs-s); color: var(--sub); }
.art-pick .pack-arts { margin: 0; }
.art-pick .pack-art { width: 64px; height: 64px; }
/* 文字が大きいとき: 選ぶ画面を詰めて4つの入れ方を1画面に近づける。帯の「絵を選べます」は省く（3案と印で分かる） */
.big-text .pack-arts.big { gap: var(--sp-2); }
.big-text .pack-arts.big .pack-art { max-height: 84px; }
.big-text .art-ways-k { margin: var(--sp-2) 0 var(--sp-1); }
.big-text .art-ways-k.minor { display: none; }
.big-text .art-way { min-height: 44px; padding: var(--sp-1) var(--sp-3); }
.big-text .art-way-note.minor, .big-text .art-way-note.long { display: none; }
.art-way-note.short { display: none; }
.big-text .art-way-note.short { display: inline; }
/* 文字が大きいときは「絵を選べます」を3案の上の行に回す（文字を消すと押せる物だと分からない） */
.big-text .spot-bar .art-pick { flex-wrap: wrap; row-gap: 2px; }
.big-text .art-pick-k { flex: 1 0 100%; text-align: center; }
/* 編集欄の上: 今の絵の小さな画像と［絵を替える］ */
.art-top { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.art-top-img { width: 48px; height: 48px; object-fit: contain; flex: none; background: var(--field); border: 1px solid var(--line); border-radius: var(--r-s); }
.art-top button { flex: 1; }
/* 描いた絵を貼ったあとの帯: 一言＋切り替え・撮り直しのボタン */
.spot-bar .hint.import-hint { flex-wrap: wrap; row-gap: 4px; }
.spot-bar .hint.import-hint .l1 { flex: 1 1 auto; }
.hint-btn { min-height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-s); flex: 0 0 auto; }
.kept-back { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-1); }
.kept-back .art-ways-k { margin: 0; }
.kept-back .art-thumbs { margin: 0; }
.kept-note { margin: var(--sp-2) 0 0; }

/* 選ぶ画面などの3案: 通信が無くて絵が出ないときの一言と、使っている案の「使用中」 */
.pack-art-off { display: grid; place-items: center; width: 100%; height: 100%; font-size: 11px; line-height: 1.3; color: var(--sub); text-align: center; padding: 2px; }
/* 1案ずつ: 枠の下（枠の外）に「使用中」の札と、何の絵かの短い言葉 */
.pack-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.pack-arts.big .pack-opt { width: 100%; }
.pack-art-on { font-size: var(--fs-xs); line-height: 1.2; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: var(--r-full); padding: 1px 6px; white-space: nowrap; }
.pack-art-note { font-size: var(--fs-xs); line-height: 1.3; color: var(--sub); text-align: center; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.art-pick .pack-opt { width: 72px; }
.art-pick .pack-art-note { -webkit-line-clamp: 1; }
.pack-art.off { cursor: default; opacity: 1; }
.pack-art-on.blank { visibility: hidden; }
.band-camera { min-height: 44px; font-size: var(--fs-s); padding: 0 var(--sp-2); align-self: center; }
/* 文字が大きいとき: 下の帯のボタンの文字も大きく、帯の3案の枠も大きく */
.big-text .spot-bar button { font-size: clamp(14px, var(--fs-m), 6.4vw); }
.big-text .art-pick .pack-art { width: 68px; height: 68px; }
.big-text .art-pick .pack-opt { width: 72px; }
/* 文字が大きいとき: 使っていない案の札の場所はとらない（帯・選ぶ画面を低く）。選ぶ画面の言葉は1行 */
.big-text .pack-art-on.blank { display: none; }
.big-text .pack-arts.big .pack-art-note { -webkit-line-clamp: 1; }
.big-text .band-camera { font-size: var(--fs-s); min-height: 44px; }
.band-camera .short { display: none; }
.big-text .band-camera .short { display: inline; }
.big-text .band-camera .long { display: none; }
/* 文字が大きいとき: 札と言葉は大きくしすぎない。帯は「絵を選べます」と［描いた絵を撮る］を1行目、3案を2行目に */
.big-text .pack-art-on, .big-text .pack-art-note { font-size: clamp(11px, var(--fs-xs), 14px); }
.big-text .spot-bar .art-pick .art-pick-k { flex: 0 1 auto; align-self: center; }
.big-text .spot-bar .art-pick .band-camera { order: 1; }
.big-text .spot-bar .art-pick .pack-arts { order: 2; flex: 1 0 100%; justify-content: center; }
.big-text .pack-arts.big .pack-art { max-height: 72px; }
.pack-arts.big .pack-art-off { font-size: 13px; }
/* 文字が大きいとき: 下の帯の一言は2行まで（写真が帯に隠れないように） */
.big-text .spot-bar .hint:not([data-bulk]):not(.import-hint) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; }
.big-text .spot-bar .hint.import-hint .l1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 歩く画面の足元の印（絵の左上の角。写真の画面の番号の丸と同じ所） */
.pin .dot.foot-dot { width: 14px; height: 14px; margin: 8px; border-width: 2.5px; font-size: 0; }
/* 購入とライセンスキー（src/ui/paywall.js） */
.paywall .buy { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.paywall .buy a.btn { text-decoration: none; text-align: center; }
.license-form { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.license-form textarea { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-s); word-break: break-all; }
.license-form [data-testid="license-msg"]:empty { display: none; }