/* 清水ピアノ スマホデモ。大きな文字・大きなボタン。ライトテーマ固定（高コントラスト）。 */
:root {
  --bg: #faf7f2; --fg: #1f1b16; --muted: #5c554b; --line: #cfc6b8;
  --primary: #1f4e8c; --primary-fg: #fff; --card: #fff;
  --warn-bg: #fff3cd; --warn-fg: #5c4400; --warn-line: #e0b84a;
  --error-bg: #fde4e1; --error-fg: #8a1c10; --error-line: #d9776c;
  --ok-bg: #dff3e3; --ok-fg: #14532d; --ok-line: #6fbf86;
  --info-bg: #e3edf9; --info-fg: #17365f; --info-line: #8fb0dc;
}
* { box-sizing: border-box; }
html { font-size: 125%; -webkit-text-size-adjust: 100%; }   /* 基本 20px */
body {
  margin: 0; background: var(--bg); color: var(--fg); line-height: 1.65;
  font-family: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  -webkit-tap-highlight-color: rgba(31, 78, 140, .15);
}
.container {
  max-width: 34rem; margin: 0 auto; outline: none;
  padding: 1rem max(1rem, env(safe-area-inset-right)) calc(3rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

/* いつも見える「デモ版・架空データ」 */
.demo-banner {
  position: sticky; top: 0; z-index: 10; background: var(--warn-bg); color: var(--warn-fg);
  border-bottom: 3px solid var(--warn-line); text-align: center; font-weight: 700; font-size: 1.1rem;
  padding: .35rem 1rem; padding-top: calc(.35rem + env(safe-area-inset-top)); line-height: 1.35;
}
.demo-banner span { display: block; font-size: .7rem; font-weight: 400; }

h1 { font-size: 1.55rem; line-height: 1.35; margin: .5rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.75rem 0 .6rem; }
a { color: var(--primary); }
.home-title { font-size: 2rem; text-align: center; margin: 1.25rem 0 .75rem; }
.lead { font-size: 1.05rem; margin: .5rem 0 1.25rem; }
.center { text-align: center; }
.hint, .meta, .kana { color: var(--muted); font-size: .85rem; }
.kana-lg { font-size: 1rem; margin: -.5rem 0 .75rem; }
.count { font-weight: 700; margin: 1rem 0 .25rem; }
.empty { color: var(--muted); }

.topbar { min-height: 2.75rem; }
.btn {
  display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;
  min-height: 3.5rem; padding: .5rem 1.1rem; border: 3px solid var(--primary); border-radius: .85rem;
  background: var(--card); color: var(--primary); font: inherit; font-weight: 700; text-decoration: none;
  cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none; width: 100%;
}
.btn:active { filter: brightness(.92); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .chip:focus-visible, a:focus-visible {
  outline: 4px solid #f5a623; outline-offset: 2px;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-big { min-height: 5rem; font-size: 1.2rem; margin-top: .25rem; }
.btn-small { min-height: 3rem; font-size: .9rem; width: auto; display: inline-flex; padding: .25rem 1rem; }
.btn small { font-weight: 400; font-size: .75rem; margin-top: .1rem; }
.big-buttons { display: grid; gap: 1rem; margin: 1.25rem 0; }

.label { display: block; font-weight: 700; margin-top: .5rem; }
input, select, textarea {
  width: 100%; min-height: 3.5rem; padding: .5rem .75rem; font: inherit; color: var(--fg);
  border: 3px solid var(--line); border-radius: .7rem; background: var(--card);
}
input[type=checkbox] { width: 2rem; height: 2rem; min-height: 0; margin: .15rem .75rem 0 0; flex: none; accent-color: var(--primary); }
.search-input { margin-top: .35rem; border-color: var(--primary); }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0 .25rem; }
.chip {
  min-height: 3rem; padding: .25rem 1.1rem; border: 2px solid var(--primary); border-radius: 999px;
  background: var(--info-bg); color: var(--info-fg); font: inherit; font-weight: 700; touch-action: manipulation;
}

.card-list { list-style: none; padding: 0; margin: .75rem 0; display: grid; gap: .85rem; }
.card, .candidate, .entered, .history-item, .placeholder {
  display: block; padding: .9rem 1rem; background: var(--card); border: 2px solid var(--line);
  border-radius: .85rem; color: var(--fg); text-decoration: none;
}
.card span, .cand-body span { display: block; }
a.card:active { border-color: var(--primary); }
.card-title { font-size: 1.2rem; font-weight: 700; }
.candidate-strong { border-color: var(--warn-line); border-width: 3px; }
.cand-body { margin-bottom: .5rem; }
.badges { margin: .25rem 0; }
.badge { display: inline-block; padding: 0 .6rem; border-radius: .5rem; font-size: .8rem; font-weight: 700; line-height: 1.7; margin: .1rem 0; }
.badge-type { background: var(--info-bg); color: var(--info-fg); }
.badge-warn { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-line); }
.badge-strong { background: var(--error-bg); color: var(--error-fg); border: 1px solid var(--error-line); }

.notice { padding: .8rem 1rem; border-radius: .75rem; border: 2px solid; margin: 1rem 0; }
.notice-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); }
.notice-error { background: var(--error-bg); color: var(--error-fg); border-color: var(--error-line); }
.notice-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); }
.notice-info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-line); }

.info { display: grid; grid-template-columns: 7rem 1fr; gap: .4rem .75rem; margin: 0 0 1rem; padding: .9rem 1rem; background: var(--card); border: 2px solid var(--line); border-radius: .85rem; }
.info dt { font-weight: 700; color: var(--muted); font-size: .85rem; }
.info dd { margin: 0; overflow-wrap: anywhere; }
.history { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.history-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .25rem; }
.history-head time { font-weight: 700; }
.history-item p { margin: .25rem 0; }
.added { color: var(--ok-fg); font-weight: 700; }
.placeholder { margin: 1.25rem 0; border-style: dashed; }
.placeholder h2 { margin-top: 0; font-size: 1rem; }

/* ノート（架空）の見た目 */
.note {
  position: relative; background: #fffdf6 repeating-linear-gradient(transparent 0 2.1rem, #c9d8ee 2.1rem 2.15rem);
  border: 2px solid var(--line); border-left: 1.4rem solid #e8dfc9; border-radius: .4rem;
  padding: 1.6rem .9rem .6rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  font-family: "Hannotate SC", "Yuji Syuku", "Klee", "Hiragino Maru Gothic ProN", "Noto Sans JP", cursive, sans-serif;
  color: #1b2a5c;
}
.note-mark {
  position: absolute; top: .3rem; right: .5rem; font-family: inherit; font-size: .7rem;
  border: 2px solid #b3361f; color: #b3361f; padding: 0 .4rem; border-radius: .3rem; transform: rotate(4deg); background: rgba(255,255,255,.7);
}
.note-line { margin: 0; line-height: 2.15rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.note-line-0 { transform: rotate(-.4deg); }
.note-line-1 { transform: rotate(.3deg); padding-left: .3rem; }
.note-line-2 { transform: rotate(-.15deg); }
.note-small .note { padding-top: 1.4rem; font-size: .8rem; }
.note-small .note-line { line-height: 1.7rem; font-size: .85rem; }
.note-small { max-height: 8.5rem; overflow: hidden; position: relative; margin-bottom: .5rem; }
.scanning { position: relative; overflow: hidden; border-radius: .4rem; }
.scan-bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #2e8b57; box-shadow: 0 0 14px 6px rgba(46, 139, 87, .45); animation: scan 1.8s ease-in-out forwards; }
@keyframes scan { from { top: 0; } to { top: calc(100% - 4px); } }
@media (prefers-reduced-motion: reduce) { .scan-bar { animation: none; top: 50%; } }
.reading { text-align: center; font-size: 1.25rem; font-weight: 700; margin: 1.25rem 0; }
.reading small { font-weight: 400; color: var(--muted); font-size: .8rem; }

/* 読み取り結果フォーム */
.field { margin: 1rem 0 0; }
.field label { display: block; font-weight: 700; margin-bottom: .25rem; }
.field-flag input, .field-flag select, .field-flag textarea { border-color: var(--warn-line); background: #fffbea; }
.flag-msg { margin: .3rem 0 0; color: var(--warn-fg); font-size: .85rem; font-weight: 700; }
.form + p { margin-top: 1.5rem; }

.entered { margin: 1rem 0; background: var(--info-bg); border-color: var(--info-line); }
.entered h2 { margin: 0 0 .4rem; font-size: 1rem; }
.entered p { margin: .15rem 0; overflow-wrap: anywhere; }
.cust-line { font-size: 1.2rem; }
.diffs { margin: .75rem 0; padding: .6rem .75rem; background: #fffbea; border: 2px solid var(--warn-line); border-radius: .6rem; }
.diff-title { margin: 0 0 .4rem; font-weight: 700; font-size: .9rem; }
.check { display: flex; align-items: flex-start; margin: .6rem 0; min-height: 3rem; font-size: .95rem; }
.old { color: var(--muted); text-decoration: line-through; }
.candidate .btn { margin-top: .5rem; }

.about ul { padding-left: 1.4rem; }
.about li { margin: .3rem 0; }
@media (max-width: 22rem) { .info { grid-template-columns: 1fr; } html { font-size: 112.5%; } }