.js #ssr { display: none; }
:root {
  --primary: #0075de; --primary-active: #005bab; --secondary: #213183; --on-primary: #fff;
  --canvas: #fff; --canvas-soft: #f6f5f4; --surface: #fff;
  --ink: #000; --ink-2: #31302e; --ink-muted: #615d59; --ink-faint: #a39e98; --hairline: #e6e6e6;
  --sky: #62aef0; --purple: #d6b6f6; --orange: #dd5b00; --teal: #2a9d99;
  --warn-bg: #fff4e5; --warn-ink: #793400;
  --shadow-1: rgba(0,0,0,0.01) 0 0.175px 1.041px, rgba(0,0,0,0.02) 0 0.8px 2.925px, rgba(0,0,0,0.027) 0 2.025px 7.847px, rgba(0,0,0,0.04) 0 4px 18px;
  --shadow-2: rgba(0,0,0,0.02) 0 1px 3px, rgba(0,0,0,0.03) 0 4px 10px, rgba(0,0,0,0.04) 0 10px 24px, rgba(0,0,0,0.05) 0 23px 52px;
  --font: Inter, "Noto Sans JP", -apple-system, system-ui, "Segoe UI", sans-serif;
  --mono: "Noto Sans Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas-soft); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }

header { background: var(--canvas); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 5; }
.bar { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* 幅の狭い画面では、タブの列を横にスクロールさせて画面からはみ出さないようにする */
@media (max-width: 600px) { .tabs { max-width: 100%; overflow-x: auto; } .tabs button { white-space: nowrap; } }
.brand { font-weight: 700; font-size: 20px; letter-spacing: -0.125px; white-space: nowrap; }
.brand small { font-weight: 400; font-size: 14px; color: var(--ink-faint); margin-left: 8px; letter-spacing: 0; }
.search { flex: 1; min-width: 240px; display: flex; gap: 8px; align-items: center; }
.search input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; background: var(--surface); font-size: 15px; }
.search.off { visibility: hidden; }
@media (max-width: 600px) { .search.off { display: none; } }
.search input:focus { outline: none; box-shadow: var(--shadow-1); border-color: var(--primary); }
.seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 6px 10px; font-size: 14px; color: var(--ink-muted); }
.seg button.on { background: var(--canvas-soft); color: var(--ink); font-weight: 600; }
.btn { border: 0; border-radius: 9999px; padding: 8px 18px; font-weight: 500; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:active { background: var(--primary-active); transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-secondary { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); border: 1px solid var(--hairline); }
.btn-utility { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); border-radius: 8px; padding: 4px 14px; }

main { max-width: 1200px; margin: 0 auto; padding: 24px 16px; display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
@media (max-width: 800px) { main { grid-template-columns: 1fr; } }

.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; }
.list { max-height: calc(100vh - 120px); overflow: auto; position: sticky; top: 88px; }
@media (max-width: 800px) { .list { position: static; max-height: 45vh; } }
.list-head { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.125px; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; }
.list-head button { border: 0; background: none; color: var(--primary); font-size: 12px; padding: 0; }
.item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hairline); padding: 10px 16px; }
.item:hover { background: var(--canvas-soft); }
.item.on { background: var(--canvas-soft); box-shadow: inset 3px 0 0 var(--primary); }
.item .f { font-weight: 600; }
.item .g { color: var(--ink-2); margin-left: 8px; }
.item .p { color: var(--ink-faint); font-size: 12px; margin-left: 6px; }
.field { display: flex; justify-content: space-between; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--hairline); padding: 10px 16px; text-align: left; }
.field:hover { background: var(--canvas-soft); }
.field .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.field .n { color: var(--ink-faint); font-size: 14px; }
.empty { padding: 24px 16px; color: var(--ink-faint); font-size: 14px; }

.card { padding: 32px; }
@media (max-width: 600px) { .card { padding: 20px; } }
.head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; }
@media (max-width: 600px) { .form { font-size: 32px; } }
.play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; display: inline-grid; place-items: center; flex: none; }
.play:active { transform: scale(0.9); background: var(--primary-active); }
.play.sm { width: 28px; height: 28px; }
.play.busy { opacity: 0.5; }
.play svg { width: 45%; height: 45%; }
.sub { margin-top: 8px; display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; color: var(--ink-muted); font-size: 15px; }
.ipa { font-family: var(--mono); color: var(--ink-2); }
.badge { display: inline-block; padding: 4px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; background: var(--canvas-soft); color: var(--ink-2); }
.badge.blue { background: #e8f2fc; color: var(--primary); }
.native { color: var(--ink-faint); font-size: 13px; }
.gloss-main { font-size: 26px; font-weight: 700; letter-spacing: -0.625px; margin: 24px 0 8px; }
.sec { margin-top: 28px; }
.sec h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.125px; color: var(--ink-muted); margin: 0 0 8px; text-transform: none; }
.sec p { margin: 0; color: var(--ink-2); white-space: pre-wrap; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 15px; }
.kv dt { color: var(--ink-muted); }
.kv dd { margin: 0; color: var(--ink-2); }

.ex { border-top: 1px solid var(--hairline); padding: 16px 0; }
.ex:first-of-type { border-top: 0; padding-top: 4px; }
.ex-line { display: flex; gap: 10px; align-items: center; }
.ex-text { font-weight: 600; font-size: 18px; }
.igt { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 6px; }
.igt .w { display: flex; flex-direction: column; }
.igt .m { font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.igt .gl { font-size: 13px; color: var(--ink-muted); }
.igt .hl { color: var(--primary); }
.script { font-family: var(--native, sans-serif); font-size: 1.7em; line-height: 1.5; color: var(--ink); }
/* 現地の字は、ラテン文字の符号に字形を当てたフォントで出している。選んで写すと「slūna」のような文字列になって
   転写と紛らわしいので、選べないようにする（綴りは〈 〉の転写で示してある） */
.script, .ex-script, .native-title { user-select: none; -webkit-user-select: none; }
.ex-script { font-family: var(--native, sans-serif); font-size: 26px; line-height: 1.6; color: var(--ink); margin-top: 4px; }
/* 字や語にかぶせる印：泥の線（干潟語からの借用語）、息せぬ弧（声に出さない名）、丸囲み（品名の略字） */
.doro { text-decoration: underline wavy; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.naselen { position: relative; display: inline-block; }
.naselen::before { content: ''; position: absolute; left: -3%; right: -3%; top: 0.05em; height: 0.3em; border-top: 1.5px solid currentColor; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.maru { display: inline-block; border: 1.5px solid currentColor; border-radius: 50%; width: 1.3em; height: 1.3em; line-height: 1.25em; text-align: center; font-size: 0.8em; vertical-align: middle; }
.ex-kana { font-size: 13px; color: var(--ink-muted); margin-top: 2px; letter-spacing: 0.02em; }
.ex-tr { color: var(--ink); }
.ex-note { color: var(--ink-faint); font-size: 14px; margin-top: 4px; }
.ex-src { font-size: 12px; color: var(--ink-faint); margin-left: auto; }
.warn { background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-top: 8px; }

.welcome { padding: 48px 32px; }
.welcome h1 { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; margin: 0 0 12px; }
.welcome p { color: var(--ink-muted); margin: 0; }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.25); display: none; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow: auto; z-index: 10; }
.overlay.open { display: flex; }
.modal { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-2); width: 100%; max-width: 720px; padding: 24px; }
.modal h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.25px; margin: 0 0 16px; }
.modal label { display: block; font-size: 14px; color: var(--ink-muted); margin: 12px 0 4px; }
.modal input, .modal textarea { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 4px; }
.modal textarea { min-height: 64px; resize: vertical; }
.modal select { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 4px; font: inherit; background: var(--surface); color: var(--ink); }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .ed-grid { grid-template-columns: 1fr; } }
.ed-rows .ed-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: start; margin-top: 6px; }
.ed-rows .ed-row textarea { min-height: 40px; }
.head-tools { margin-left: auto; display: flex; gap: 8px; }
.row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.cand { border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; margin-top: 12px; }
.cand .form { font-size: 26px; letter-spacing: -0.625px; }
.cand p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.cand .ety { color: var(--ink-muted); font-size: 14px; }
.cand.pick { display: block; cursor: pointer; }
/* 一般公開用：管理の操作は出さない */
body.public [data-edit-entry], body.public #add-open { display: none !important; }
.cand.pick:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cand.pick .head input { width: 18px; height: 18px; margin: 0 4px 0 0; accent-color: var(--primary); }
.loading { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); padding: 16px 0; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--hairline); border-top-color: var(--primary); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.def { margin: 0; color: var(--ink-2); white-space: pre-wrap; }
.none { color: var(--ink-faint); font-size: 14px; }
.lk { color: var(--primary); text-decoration: none; border-bottom: 1px dotted var(--primary); cursor: pointer; }
.lk:hover { border-bottom-style: solid; }
.sense { border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 20px; margin-top: 12px; }
.sense-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.num { width: 24px; height: 24px; border-radius: 50%; background: var(--secondary); color: #fff; font-size: 13px; font-weight: 600; display: inline-grid; place-items: center; flex: none; }
.sense-gloss { font-size: 20px; font-weight: 600; letter-spacing: -0.125px; }
.sense .ex:first-of-type { margin-top: 8px; }
.rels { border-top: 1px solid var(--hairline); padding-top: 20px; }
.rel { margin-bottom: 16px; }
.rel h3 { font-size: 12px; font-weight: 600; color: var(--ink-muted); margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--hairline); background: var(--surface); border-radius: 9999px; padding: 4px 12px; font-size: 14px; font-weight: 600; }
.chip:hover { background: var(--canvas-soft); }
.chip span { font-weight: 400; color: var(--ink-muted); margin-left: 6px; }
#main-tr, #main-grow { display: block; max-width: 900px; }
#main-grow[hidden], #main-tr[hidden], #main-dict[hidden], #main-book[hidden], #main-read[hidden], #main-gram[hidden], #main-story[hidden] { display: none; }
.ex-num { font-size: 12px; color: var(--ink-faint); margin: 14px 0 -10px; }
#gram-list .toc { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 5px 16px 5px 28px; font-size: 13px; color: var(--ink-muted); cursor: pointer; }
#gram-list .toc.h3 { padding-left: 42px; font-size: 12px; }
#gram-list .toc:hover { color: var(--ink); }
.reading .native-title { font-family: var(--native, sans-serif); font-size: 34px; margin: -6px 0 4px; color: var(--ink); }
.reading .reading-img { width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: 8px; margin: 12px 0; }
.reading .native-sub { color: var(--ink-muted); font-size: 14px; margin-bottom: 16px; }
.lesson { padding: 32px; }
/* 小説：縦長の本文。現地の字の場面は、書かれた物（石・雪・灰・紙）ごとの囲みで、場面の書体のフォントで見せる */
.story { max-width: 760px; }
#story-body { min-width: 0; }
.story .md { font-family: var(--story-font); font-size: var(--story-size); line-height: var(--story-leading); color: var(--ink); }
.story .md p { margin: 0 0 1em; }
.story .md ruby rt { font-family: var(--story-font); font-weight: 400; font-size: 0.7em; color: var(--ruby-ink); }
/* 読む人が選ぶ表示の設定（文字の大きさ・書体・背景・行間）。#main-story の data-* 属性で切り替える */
#main-story { --story-font: Meiryo, "メイリオ", "Noto Sans JP", sans-serif; --story-size: 18px; --story-leading: 2.3; --ruby-ink: #3a3f4a; --note-bg: #fffaf0; }
#main-story[data-size="s"] { --story-size: 16px; }
#main-story[data-size="l"] { --story-size: 21px; }
#main-story[data-font="mincho"] { --story-font: "Noto Serif JP", "Yu Mincho", "游明朝", serif; }
#main-story[data-leading="tight"] { --story-leading: 1.9; }
#main-story[data-leading="loose"] { --story-leading: 2.7; }
#main-story[data-theme="sepia"] #story-body { --surface: #f8f1e3; --canvas-soft: #efe6d3; --hairline: #e2d6bd; --ink: #3b2f22; --ink-2: #4a3d2e; --ink-muted: #6f604c; --ink-faint: #a08f76; --ruby-ink: #5a4a36; --note-bg: #fffaf0; background: var(--surface); color: var(--ink); }
#main-story[data-theme="dark"] #story-body { --surface: #1e1f22; --canvas-soft: #2a2b2f; --hairline: #3a3b40; --ink: #e4e2dd; --ink-2: #cfccc5; --ink-muted: #a29f98; --ink-faint: #7d7a74; --ruby-ink: #b9b6ae; --note-bg: #2d2e33; background: var(--surface); color: var(--ink); }
.story-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--ink-muted); }
.story-tools .spacer { flex: 1; }
.story-tools .seg button { min-width: 36px; color: var(--ink-muted); }
.story-tools .seg button.on { color: var(--ink); }
.story-tools .btn-utility { font-size: 13px; color: var(--ink-2); cursor: pointer; }
.story-settings { position: relative; }
.story-settings summary { list-style: none; }
.story-settings summary::-webkit-details-marker { display: none; }
.story-settings .pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: var(--shadow-2); padding: 12px; display: grid; gap: 10px; white-space: nowrap; max-width: calc(100vw - 32px); }
.story-settings .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; flex-wrap: nowrap; }
.story-settings .lbl { color: var(--ink-muted); }
/* 目次を隠したときは本文を広げ、中央に置く（話を開いていないうちは目次を出したまま） */
#main-story.toc-hidden.reading { grid-template-columns: 1fr; }
#main-story.toc-hidden.reading #story-list { display: none; }
#main-story.toc-hidden.reading .story { margin: 0 auto; }
.story .md ruby.line { ruby-align: center; }
.story .md ruby.line rt { letter-spacing: 0; }
.story .no { color: var(--ink-faint); font-size: 14px; margin-bottom: 4px; }
.lisa { margin: 1.6em auto; padding: 22px 28px; border-radius: 6px; font-size: 34px; line-height: 1.7; text-align: center; overflow-x: auto; }
.lisa-line { overflow-wrap: anywhere; }
.lisa-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.lisa-cell, .lisa-in { font-feature-settings: "calt" 0; }
.lisa-cell { display: inline-flex; flex-direction: column; align-items: center; min-width: 1.2em; }
.lisa-cell small { font-family: var(--font); font-size: 13px; line-height: 1.2; opacity: 0.75; }
.lisa-in { font-size: 1.5em; line-height: 1; color: #2b2118; padding: 0 0.08em; }
.story .md ruby:has(.lisa-in) rt { font-family: var(--font); font-size: 0.75em; color: var(--ink-muted); }
.lisa-rubbing { background: radial-gradient(circle at 40% 35%, #2b2926, #121110 75%); color: #ece4d2; border-radius: 2px;
  border: 1px solid #000; text-shadow: 0 0 1px rgba(236,228,210,0.6); }
.lisa-paper { background: #fbf6ea; color: #2b2118; box-shadow: var(--shadow-1); border: 1px solid #eadfc6; }
.lisa-stone { background: radial-gradient(circle at 30% 20%, #a8a59d, #85827a 70%); color: #4a4741; border-radius: 3px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.35), -1px -1px 0 rgba(0,0,0,0.35); border: 1px solid #6e6b64; }
.lisa-snow { background: linear-gradient(#ffffff, #eef3f8); color: #5b7390; border: 1px solid #dde6ef;
  text-shadow: 0 1px 1px rgba(60,90,130,0.25); }
.lisa-board { background: linear-gradient(90deg, #b99a72, #a8875d 45%, #b48f63); color: #241c14; border-radius: 3px;
  border: 1px solid #8a6b45; box-shadow: inset 0 0 18px rgba(60,40,20,0.35); }
.lisa-sum { display: inline-flex; flex-direction: column; align-items: flex-end; }
.lisa-sum-row { display: flex; justify-content: flex-end; }
.lisa-sum-row span { display: inline-block; width: 0.9em; text-align: center; font-feature-settings: "calt" 0; }
.lisa-sum-rule { align-self: stretch; border-top: 2px solid currentColor; margin: 0.1em 0 0.2em; opacity: 0.8; }
.lisa-ash { background: radial-gradient(circle at 50% 40%, #b5b0a8, #8c877f); color: #3a3530; border-radius: 40% 40% 12px 12px / 18% 18% 12px 12px; }
.story-part { padding: 16px 16px 6px; font-size: 13px; font-weight: 700; color: var(--ink); border-top: 1px solid var(--hairline); }
.story-group { padding: 14px 16px 4px; font-size: 12px; font-weight: 600; color: var(--ink-muted); border-top: 1px solid var(--hairline); }
#story-list .item.side .f { padding-left: 12px; }
.story-nav { display: flex; justify-content: space-between; margin-top: 40px; gap: 12px; }
.story-fig { margin: 1.8em 0; text-align: center; }
.story-fig img { max-width: 100%; height: auto; }
.story-fig figcaption { margin-top: 6px; font-size: 13px; color: var(--ink-muted); line-height: 1.5; }
.story .note { position: relative; border-bottom: 1px dotted var(--ink-muted); cursor: help; }
.story .note-mark { font-size: 0.6em; color: #b5532f; margin-left: 1px; }
.story .note-pop { display: none; position: absolute; left: 0; top: 2em; z-index: 5; width: min(20em, 70vw); background: var(--note-bg); border: 1px solid var(--hairline); border-radius: 6px; padding: 8px 12px; font-size: 13px; line-height: 1.7; color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,0.12); text-indent: 0; font-weight: 400; }
/* マウスのある端末では乗せると開く。タップ（クリック）では .open で開閉する（スマホで :hover が残らないように分ける） */
@media (hover: hover) { .story .note:hover .note-pop { display: block; } }
.story .note.open .note-pop, .story .note:focus-visible .note-pop { display: block; }
.story-notes { margin-top: 32px; border-top: 1px solid var(--hairline); padding-top: 12px; font-size: 14px; line-height: 1.7; }
.story-notes ol { margin: 4px 0 0; padding-left: 2.2em; }
.story-notes li::marker { content: "※" counter(list-item) " "; color: #b5532f; }
@media (max-width: 600px) { .lesson { padding: 20px; } }
.lesson h1 { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; margin: 0 0 16px; }
.lesson h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.625px; margin: 40px 0 12px; }
.lesson h3 { font-size: 20px; font-weight: 600; margin: 24px 0 8px; }
.lesson .md { color: var(--ink-2); }
.lesson .md table { border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.lesson .md th, .lesson .md td { border: 1px solid var(--hairline); padding: 6px 10px; text-align: left; }
.lesson .md th { background: var(--canvas-soft); font-size: 13px; }
.lesson .md code, .vocab code, .lesson h1 code, .lesson h2 code, #book-list code { background: var(--canvas-soft); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 0.92em; }
.vocab { width: 100%; border-collapse: collapse; font-size: 15px; }
.vocab td { border-bottom: 1px solid var(--hairline); padding: 8px 6px; vertical-align: middle; }
.vocab .vf { font-weight: 600; white-space: nowrap; }
.exercise { border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 18px; margin-top: 10px; }
.exercise summary { cursor: pointer; color: var(--primary); font-size: 14px; margin-top: 8px; }
.column { background: var(--canvas-soft); border-radius: 12px; padding: 20px 24px; margin-top: 40px; }
.column h2 { margin-top: 0; font-size: 22px; }
.tr-label { display: block; font-size: 14px; color: var(--ink-muted); margin-bottom: 6px; }
#tr-ja { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; resize: vertical; }
.tr-result { margin-top: 28px; border-top: 1px solid var(--hairline); padding-top: 24px; }
.tr-text { font-size: 26px; font-weight: 700; letter-spacing: -0.625px; }
.missing { display: flex; align-items: center; gap: 12px; border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 14px; margin-top: 8px; }
.missing .m-ja { font-weight: 600; }
.missing .m-note { color: var(--ink-muted); font-size: 14px; flex: 1; }
.missing.done { opacity: 0.55; }
.ok { color: #1aae39; font-size: 14px; margin-top: 8px; }
.grow-counts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#grow-words { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; resize: vertical; }
.req { border-top: 1px solid var(--hairline); margin-top: 28px; padding-top: 20px; }
.req h2 { font-size: 24px; margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.req .why { color: var(--ink-2); font-size: 15px; margin: 6px 0 0; }
.req .quote { color: var(--ink-muted); font-size: 14px; margin: 4px 0 0; }
.req .row { justify-content: flex-start; flex-wrap: wrap; }
.req-small { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 14px; margin-top: 8px; }
.req-small .m-note { color: var(--ink-muted); font-size: 14px; flex: 1; white-space: pre-wrap; }
.error { color: #b42318; font-size: 14px; margin-top: 8px; white-space: pre-wrap; }