/* ノート・文房具風。本文とフォームは無地の紙面に置く。 */
.terms-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 13px; text-underline-offset: 5px; }
.terms-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
:root {
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-synthesis: none;
  color-scheme: light;
  --bg: #f4eedc;
  --paper: #fffcf3;
  --ink: #333d43;
  --muted: #68645b;
  --line: #d2c7ad;
  --accent: #355e79;
  --red: #a44934;
  --label-bg: #fff4c8;
  --label-ink: #594528;
  --heading: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--bg);
  background-image: linear-gradient(#bba98726 1px, transparent 1px), linear-gradient(90deg, #bba98726 1px, transparent 1px);
  background-size: 22px 22px;
}
button, input, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:hover { filter: brightness(.96); }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* 紙面と見出し */
.app {
  position: relative;
  max-width: 960px;
  margin: 20px auto;
  padding: 30px 40px 24px;
  border-left: 1px solid #bd837080;
  border-right: 1px solid #d6cab0;
  background: #fffcf3e8;
}
.app-header { margin-bottom: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.brand-mark { color: var(--red); font-size: 26px; line-height: 1; }
.edition { margin: 24px 0 10px; font: 10px/1.6 ui-monospace, monospace; letter-spacing: 2px; color: #9a503b; }
.edition span { margin-left: 12px; font-size: 9px; }
h1 { margin: 10px 0 8px; font-family: var(--heading); font-size: clamp(25px, 3.5vw, 35px); font-weight: 650; line-height: 1.5; letter-spacing: .015em; }
.intro { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

/* ノートのインデックス。選択状態は塗り・文字色・輪郭で示す。 */
nav { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid var(--accent); }
nav button { flex: 1; min-width: 0; min-height: 52px; padding: 15px 10px; background: #eee7d7; color: var(--muted); border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; font-size: 14px; font-weight: 650; }
nav button > span { display: inline-block; margin-right: 9px; font-size: 19px; font-weight: 500; }
nav button[aria-selected="true"] { color: #fff; background: var(--accent); }

/* 設定から生成、結果への流れは全幅で共通 */
.workspace { display: grid; gap: 28px; }
form { position: relative; min-width: 0; margin: 0; padding: 28px 24px 24px; border: 1px solid #c9bda4; border-radius: 3px; background: var(--paper); box-shadow: 2px 3px 0 #d8cdb5; }
form::before { content: ""; position: absolute; top: -7px; left: calc(50% - 35px); width: 70px; height: 15px; background: #d9c7a5aa; transform: rotate(-2deg); pointer-events: none; }
.section-title { display: flex; align-items: center; gap: 10px; }
.section-title h2 { margin: 0; font: 650 17px/1.6 var(--heading); }
.step { color: var(--red); font: 11px/1.5 ui-monospace, monospace; }
.section-aside { margin-left: auto; color: var(--muted); font: 9px/1.5 ui-monospace, monospace; letter-spacing: 1px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 20px; }
label { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 12px; color: var(--muted); font-weight: 650; }
select, input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #a09784; border-radius: 2px; background: #fffefa; color: var(--ink); font-size: 16px; }
.action { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.count-input { display: flex; align-items: center; gap: 10px; }
.count-input input { width: 76px; }
.count-input small { white-space: nowrap; font-size: 11px; font-weight: 400; }
.primary { min-width: 190px; min-height: 48px; padding: 13px 22px; border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; }
.primary > span { margin-left: 36px; font-size: 20px; line-height: 1; }

/* 本文は読みやすいゴシック体、罫線は文字の下だけ */
.result-section { min-width: 0; }
.result-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.result-head h2 { font-size: 18px; }
#total { margin-left: 8px; color: var(--muted); font-family: "Yu Gothic UI", Meiryo, sans-serif; font-size: 11px; font-weight: 400; white-space: nowrap; }
#copy-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.secondary { min-height: 44px; padding: 10px 12px; border: 1px solid #b4bec2; border-radius: 3px; background: var(--paper); color: var(--accent); font-size: 12px; }
#result-note { margin: 12px 0 18px; color: var(--muted); font-size: 11px; line-height: 1.8; }
#results { min-height: 148px; }
.empty { width: 100%; padding: 26px 12px; border: 1px dashed var(--line); border-radius: 3px; background: var(--paper); text-align: center; }
.empty > span { color: var(--accent); font-size: 32px; opacity: .65; }
.empty h3 { font-size: 13px; font-weight: 600; line-height: 1.8; }
.empty p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.words { display: flex; flex-wrap: wrap; align-content: start; gap: 10px; }
.words .item { min-height: 48px; padding: 13px 19px 13px 22px; border: 1px solid #c9b888; border-left: 4px solid #b99e6a; border-radius: 2px; background: var(--label-bg); color: var(--label-ink); box-shadow: 1px 2px 0 #ded2b6; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; text-align: left; }
.sentences .item { display: flex; align-items: center; gap: 14px; padding: 7px 8px; border-bottom: 1px solid #b6c3c9; background: var(--paper); }
.sentences .item p { flex: 1; min-width: 0; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.index { color: #9a503b; font: 10px/1.5 ui-monospace, monospace; }
.icon { min-width: 44px; min-height: 44px; padding: 8px; border: 0; background: transparent; color: var(--muted); font-size: 22px; }
.colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.colors .item { overflow: hidden; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); box-shadow: 2px 2px #d8cdb5; }
.swatch { height: 125px; }
.color-info { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--paper); }
.color-info strong { font-size: 13px; }
.color-info button { min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font: 13px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; text-align: left; }
.colors .empty { grid-column: 1 / -1; }
footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.8; }
#notice { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 12px 18px; border-radius: 3px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.8; opacity: 0; pointer-events: none; }
#notice.show { opacity: 1; }

@media (max-width: 600px) {
  .app { margin: 12px 10px; padding: 24px 16px 20px; }
  .app-header { margin-bottom: 24px; }
  .brand { font-size: 11px; }
  .edition { margin-top: 20px; font-size: 8px; }
  .edition span, .section-aside { display: none; }
  h1 { font-size: 25px; }
  h1 > span { display: block; }
  .intro { font-size: 12px; }
  nav { margin-bottom: 20px; }
  nav button { padding: 13px 6px; font-size: 13px; }
  nav button > span { margin-right: 5px; font-size: 18px; }
  form { padding: 28px 20px 20px; }
  .fields { grid-template-columns: 1fr; gap: 18px; }
  .action { flex-direction: column; align-items: stretch; gap: 18px; }
  .action > label { flex-direction: row; align-items: center; justify-content: space-between; }
  .count-input input { width: 70px; }
  .primary { width: 100%; min-width: 0; }
  .workspace { gap: 26px; }
  .result-head { flex-direction: column; align-items: start; gap: 12px; }
  .result-head h2 { font-size: 17px; }
  .secondary { padding: 10px; font-size: 11px; }
  .words .item { padding: 12px 15px 12px 20px; font-size: 15px; }
  .sentences .item { gap: 9px; padding: 7px 8px; }
  .sentences .item p { font-size: 14px; line-height: 1.85; }
  .colors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .swatch { height: 100px; }
  .color-info { padding: 12px; }
  .color-info button { font-size: 12px; }
  .empty { padding: 22px 10px; }
  .empty h3 { font-size: 12px; }
  .empty p { font-size: 11px; }
  footer { flex-direction: column; gap: 4px; }
}

/* 採用デザイン：スクラップブックと活版風の文字組み。 */
:root {
  --bg: #e9e3d7;
  --paper: #faf6ec;
  --ink: #303b39;
  --muted: #67675e;
  --line: #d2c7b4;
  --accent: #365951;
  --red: #98513f;
  --heading: "Yu Mincho", "Hiragino Mincho ProN", serif;
}
body { background-image: linear-gradient(#a99d8420 1px, transparent 1px), linear-gradient(90deg, #a99d8420 1px, transparent 1px); background-size: 28px 28px; }
.app { max-width: 1020px; margin: 0 auto 36px; padding: 34px 50px 28px 64px; background: var(--paper); border-left: 1px solid #c9b89e; border-right: 0; box-shadow: 5px 7px 0 #d8d0c0; }
.app::before { content: ""; position: absolute; left: 28px; top: 40px; bottom: 28px; width: 1px; background: #bd8e764d; pointer-events: none; }

/* 見出しは活版のように、字幅・行間・大小を組み合わせる。本文は通常の文字組み。 */
.app-header { margin-bottom: 28px; }
.masthead { display: flex; align-items: start; justify-content: space-between; gap: 24px; border-top: 2px solid var(--ink); padding-top: 12px; }
.brand { color: var(--ink); font-size: 12px; letter-spacing: .045em; }
.brand-mark { color: var(--red); font-size: 23px; }
.issue { color: #706a5c; text-align: right; font: 9px/1.8 ui-monospace, monospace; letter-spacing: 1px; }
.title-composition { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 30px; align-items: center; margin-top: 18px; }
.edition { margin: 0 0 12px 3px; color: var(--red); font-size: 9px; letter-spacing: 2.6px; }
h1 { margin: 0; font-size: 30px; font-weight: 750; line-height: 1.65; letter-spacing: .16em; text-shadow: .4px .5px #fffaf0; }
h1 > span { display: block; margin: 1px 0 0 28px; font-size: 44px; font-weight: 600; letter-spacing: .045em; line-height: 1.5; }
.scrap-note { position: relative; padding: 23px 14px 14px; margin: 7px 10px 0 0; background: #e6dfcc; color: #5b5b4e; border: 1px solid #cfc3aa; transform: rotate(3deg); box-shadow: 2px 2px #ddd3bf; text-align: center; }
.scrap-note::before { content: ""; position: absolute; width: 58px; height: 14px; top: -7px; left: calc(50% - 29px); background: #c5b69199; transform: rotate(-7deg); }
.scrap-note > span { display: block; font: 14px/1.9 var(--heading); letter-spacing: .12em; }
.scrap-note small { display: block; margin-top: 9px; font: 8px/1.8 ui-monospace,monospace; letter-spacing: .7px; }
.intro { margin: 16px 0 0 32px; font-size: 12px; letter-spacing: .04em; }
.print-marks { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: var(--red); font: 9px/1.4 ui-monospace,monospace; letter-spacing: 1px; }
.print-marks > span:first-child { font-size: 17px; }
.print-marks i { flex: 1; height: 1px; background: var(--line); }

/* 見出し票のようなタブ。選択色と下線は明確なままにする。 */
nav { border-bottom: 1px solid var(--ink); gap: 12px; margin-bottom: 28px; align-items: end; }
nav button { border: 1px solid #b8b09e; border-bottom: 0; border-radius: 12px 12px 0 0; min-height: 52px; padding: 12px 8px; background: #eae5d6; letter-spacing: .06em; }
nav button:nth-child(2) { background: #e1e6dd; min-height: 49px; }
nav button:nth-child(3) { background: #e8ded7; }
nav button[aria-selected="true"] { background: var(--accent); color: #fff; min-height: 55px; box-shadow: inset 0 -3px #25433c; }
nav button > span { font-family: var(--heading); font-size: 21px; }

/* 設定欄は記入用の紙。標準のselectと46px以上の操作領域を維持する。 */
form { padding: 22px 24px 24px; border: 0; border-top: 1px solid #b5ab95; border-bottom: 1px solid #b5ab95; border-radius: 0; background: #f1edde; box-shadow: 3px 3px 0 #ded6c5; }
form::before { width: 45px; height: 13px; top: -7px; left: auto; right: 22px; background: #d2c49e99; transform: rotate(5deg); }
.section-title { gap: 11px; }
.section-title h2 { font-size: 18px; letter-spacing: .1em; }
.step { align-self: center; border: 1px solid #a88770; color: #8f4c39; padding: 2px 5px; font-size: 10px; line-height: 1.4; }
.section-aside { font-family: var(--heading); font-size: 11px; letter-spacing: .06em; }
.fields { gap: 24px; margin-top: 21px; }
label { font-size: 12px; letter-spacing: .05em; color: #5e6158; gap: 9px; }
select, input { border: 0; border-bottom: 1px solid #8e927f; border-radius: 0; background: #faf8f0; color: var(--ink); box-shadow: none; padding: 10px 8px; }
.action { border-top: 1px dashed #c6bea8; padding-top: 18px; margin-top: 20px; }
.count-input input { background: #fffaf0; text-align: center; }
.count-input small { letter-spacing: 0; }
.primary { position: relative; background: var(--accent); border: 1px solid #24483f; border-radius: 12px; box-shadow: 3px 3px 0 #b4b9a8; letter-spacing: .12em; font-weight: 650; }
.primary > span { margin-left: 30px; }
.workspace { gap: 34px; }
.result-head { align-items: end; }
#total { letter-spacing: 0; }
.secondary { background: #f9f5e9; border: 1px solid #aeb39f; border-radius: 0; color: #365951; }
#result-note { line-height: 1.9; font-size: 11px; margin: 13px 0 20px; }
.empty { border: 1px dashed #bdb49f; border-radius: 0; background: #f8f3e7; }

/* 紙色・裁断形・耳の違い。文字と実際の操作領域は傾けない。 */
.words { gap: 14px 13px; padding: 3px; }
.words .item { position: relative; isolation: isolate; min-height: 51px; max-width: 100%; border: 0; border-radius: 0; padding: 14px 20px; color: #373e38; background: transparent; box-shadow: none; font: 600 17px/1.65 var(--heading); letter-spacing: .045em; }
.words .item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #efe3bf; border: 1px solid #c8bb9b; box-shadow: 2px 3px 0 #dcd3bf; transform: rotate(-.45deg); pointer-events: none; }
.words .item:nth-child(5n+2)::before { background: #dfe5d4; border-color: #bbc3ab; transform: rotate(.5deg); border-top: 3px solid #8c9e82; }
.words .item:nth-child(5n+3)::before { background: #e9d9cc; border-color: #c9afa0; transform: none; border-right: 3px solid #b88d79; }
.words .item:nth-child(5n+4)::before { background: #dce5e5; border-color: #aebfc0; transform: rotate(.4deg); border-bottom: 2px dashed #99afb1; }
.words .item:nth-child(5n)::before { background: #f6efdf; border-color: #cabfa5; transform: rotate(-.4deg); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
.words:has(.item:nth-child(13)) { gap: 10px; }
.words:has(.item:nth-child(13)) .item { padding: 12px 16px; font-size: 16px; }
.words:has(.item:nth-child(13)) .item::before { transform: none; }

/* 一文は整列したメモカード。コピーの44px領域を余白から独立させる。 */
.sentences { display: grid; gap: 12px; }
.sentences .item { position: relative; margin: 0; min-width: 0; padding: 11px 13px 11px 15px; gap: 16px; border: 1px solid #cfc6b4; border-left: 3px solid #a8b3a0; background: #fffaf0; box-shadow: 2px 2px #e3dccb; }
.sentences .item:nth-child(3n+2) { background: #f6f4e9; border-left-color: #ba9c83; }
.sentences .item:nth-child(3n) { border-left-color: #9bb1b3; }
.sentences .item p { margin: 12px 0; font-size: 15px; line-height: 1.95; letter-spacing: .015em; }
.index { color: #8a5543; font-size: 10px; border-bottom: 1px solid #c2a996; padding-bottom: 3px; }
.icon { flex: none; color: #526657; border: 1px solid #d6d7c6; background: #fbfaf2; min-width: 44px; min-height: 44px; font-size: 21px; }
.sentences:has(.item:nth-child(13)) { gap: 8px; }
.sentences:has(.item:nth-child(13)) .item { padding-top: 7px; padding-bottom: 7px; box-shadow: 1px 1px #e3dccb; }

/* 画材の見本票。色面にはテクスチャ・フィルターをかけず、HEXをそのまま表示。 */
.colors { counter-reset: swatch; gap: 18px; }
.colors .item { position: relative; padding: 11px 11px 0; counter-increment: swatch; border: 1px solid #c5bdab; border-radius: 0; background: #fffdf5; box-shadow: 3px 3px #dcd3c0; }
.colors .item::before { content: "COLOR STUDY / " counter(swatch, decimal-leading-zero); display: block; color: #6e6d60; font: 9px/1.7 ui-monospace, monospace; letter-spacing: 1px; padding: 1px 15px 9px 0; }
.colors .item::after { content: ""; position: absolute; right: 11px; top: 14px; width: 5px; height: 5px; border: 1px solid #a0957e; border-radius: 50%; background: var(--bg); }
.swatch { height: 145px; border: 1px solid #00000014; }
.color-info { background: transparent; margin-top: 12px; padding: 10px 2px 5px; gap: 3px; border-top: 1px solid #ddd3bf; }
.color-info strong { color: #3f4940; font: 600 15px/1.7 var(--heading); letter-spacing: .07em; }
.color-info button { color: #536259; min-height: 44px; }
.colors:has(.item:nth-child(13)) { gap: 14px; }
.colors:has(.item:nth-child(13)) .swatch { height: 110px; }
.colors .empty::before, .colors .empty::after { display: none; }
footer { margin-top: 36px; border-top: 2px solid #7d8475; padding-top: 18px; align-items: start; font-size: 11px; }
.colophon { text-align: right; font: 9px/1.8 ui-monospace,monospace; letter-spacing: .5px; }
#notice { border-radius: 1px; }

@media (max-width: 760px) {
  .app { margin: 0 12px 24px; padding: 28px 28px 24px 36px; }
  .app::before { left: 17px; }
  .title-composition { grid-template-columns: minmax(0,1fr) 112px; gap: 12px; }
  h1 { font-size: 25px; letter-spacing: .10em; }
  h1 > span { font-size: 33px; margin-left: 12px; }
  .scrap-note { margin-right: 2px; padding: 18px 8px 10px; }
  .scrap-note > span { font-size: 12px; }
  .intro { margin-left: 14px; }
}
@media (max-width: 600px) {
  .app { margin: 0 10px 22px; padding: 22px 18px 22px 26px; }
  .app::before { left: 12px; top: 28px; bottom: 24px; }
  .masthead { gap: 10px; padding-top: 10px; }
  .brand { font-size: 10px; gap: 6px; letter-spacing: 0; }
  .brand-mark { font-size: 21px; }
  .issue { display: none; }
  .title-composition { display: block; position: relative; margin-top: 23px; }
  .edition { font-size: 8px; margin: 0 0 10px; letter-spacing: 1.6px; }
  h1 { font-size: 23px; letter-spacing: .12em; line-height: 1.7; }
  h1 > span { font-size: 29px; letter-spacing: .025em; margin-left: 9px; line-height: 1.65; }
  .scrap-note { position: absolute; right: 0; top: -15px; padding: 6px 7px; transform: rotate(3deg); }
  .scrap-note > span { display: none; }
  .scrap-note small { margin: 0; font-size: 7px; letter-spacing: 0; }
  .scrap-note::before { width: 26px; height: 7px; top: -4px; left: 19px; }
  .intro { margin: 13px 0 0; font-size: 11px; }
  .print-marks { margin-top: 16px; }
  nav { gap: 7px; margin-bottom: 24px; }
  nav button { font-size: 12px; min-height: 49px; padding: 12px 3px; letter-spacing: 0; }
  nav button:nth-child(2) { min-height: 47px; }
  nav button[aria-selected=true] { min-height: 52px; }
  nav button > span { font-size: 18px; margin-right: 4px; }
  form { padding: 21px 16px 20px; }
  .section-title h2 { font-size: 17px; letter-spacing: .05em; }
  .fields { gap: 18px; }
  .workspace { gap: 29px; }
  .primary { min-height: 50px; }
  .result-head { align-items: flex-start; gap: 13px; }
  .words { gap: 12px 10px; }
  .words .item { font-size: 16px; padding: 12px 16px; }
  .words:has(.item:nth-child(13)) .item { font-size: 15px; padding: 11px 14px; }
  .sentences .item { padding: 8px 9px; gap: 9px; }
  .sentences .item p { font-size: 14px; line-height: 1.9; margin: 10px 0; }
  .colors { gap: 12px; }
  .colors .item { padding: 8px 8px 0; box-shadow: 2px 2px #dcd3c0; }
  .colors .item::before { font-size: 7px; letter-spacing: .5px; padding-bottom: 8px; }
  .colors .item::after { top: 12px; right: 8px; width: 4px; height: 4px; }
  .swatch { height: 108px; }
  .color-info { padding-top: 7px; margin-top: 9px; }
  .color-info strong { font-size: 14px; letter-spacing: .02em; }
  .colors:has(.item:nth-child(13)) { gap: 10px; }
  .colors:has(.item:nth-child(13)) .swatch { height: 90px; }
  footer { gap: 9px; }
  .colophon { text-align: left; }
}

/* 第二案：面ではなく小さな印と余白で、記入欄と素材の違いをつくる。 */
form { background: #f1edde99; border-top-color: transparent; border-bottom: 1px dashed #b5ab95; box-shadow: 2px 3px 0 #ded6c580; }
form .step { border: 0; border-bottom: 1px solid #a88770; padding: 2px 3px; transform: rotate(-4deg); }
form .section-aside { padding: 3px 7px; background: #e6dfcc; transform: rotate(2deg); }
.fields > label > span { padding-left: 3px; }
select, input { background: #faf8f070; border-bottom: 1px dotted #8e927f; box-shadow: 0 2px 0 #fffaf080; }
select { padding-left: 5px; }
select:hover, input:hover { background: #faf8f0; border-bottom-style: solid; }
select:focus-visible, input:focus-visible { background: #fffaf0; }
.action { border-top: 0; position: relative; padding-top: 19px; }
.action::before { content: ''; position: absolute; top: 0; left: 0; width: 66%; height: 1px; background: repeating-linear-gradient(90deg,#c6bea8 0 3px,transparent 3px 7px); pointer-events: none; }
.count-input input { background: #fffaf080; }
.result-head .step { border: 0; border-radius: 50%; background: #e9d9cc; padding: 5px 6px; }
.result-head .section-title { position: relative; padding-bottom: 6px; }
.result-head .section-title::after { content: ''; position: absolute; bottom: 0; left: 36px; width: 47px; border-bottom: 2px solid #b5ab95; transform: rotate(-2deg); }
#result-note { padding-left: 4px; }
/* 操作領域は整列したまま、紙の留め方だけを変える。 */
.words .item:nth-child(5n+1)::after { content: ''; position: absolute; width: 26px; height: 8px; background: #c5b69188; top: -3px; left: 14px; transform: rotate(-7deg); pointer-events: none; }
.words .item:nth-child(5n+3)::before { border-right-width: 1px; border-left: 4px solid #b88d79; }
.words .item:nth-child(5n+4)::before { border-bottom-style: solid; border-top: 2px dashed #99afb1; }
.words .item:nth-child(5n+2) { padding-top: 17px; padding-bottom: 11px; }
.sentences .item { border-top: 0; border-right: 0; border-bottom: 1px solid #cfc6b4; padding-top: 14px; padding-bottom: 14px; }
.sentences .item p { padding-bottom: 5px; background-image: linear-gradient(transparent calc(100% - 1px),#cfc6b430 1px); background-size: 100% 1.95em; background-position: 0 5px; }
.sentences .index { align-self: flex-start; margin-top: 12px; border-bottom-style: dotted; }
.sentences .item:nth-child(3n+2) { border-left-width: 5px; }
.colors .item::before { width: fit-content; padding: 2px 6px; margin-bottom: 10px; background: #eae5d6; border-left: 2px solid #a0957e; letter-spacing: .6px; }
.colors .item:nth-child(3n+2)::before { background: #e1e6dd; }
.colors .item:nth-child(3n)::before { background: #e8ded7; }
.color-info { border-top-style: dashed; }
/* 密な一覧では、紙片の追加装飾と大きな余白を抑える。 */
.words:has(.item:nth-child(13)) .item::after { display: none; }
.words:has(.item:nth-child(13)) .item { padding: 12px 16px; }
.sentences:has(.item:nth-child(13)) .item { padding-top: 7px; padding-bottom: 7px; }
@media (max-width: 600px) {
  .sentences .item { padding-top: 10px; padding-bottom: 10px; }
  .sentences .item p { background-size: 100% 1.9em; }
  .colors .item::before { padding: 2px 4px; margin-bottom: 8px; font-size: 7px; }
  .words:has(.item:nth-child(13)) .item { padding: 11px 14px; }
}
@media (max-width: 600px) {
  label, .count-input small, #result-note, .secondary, .color-info button { font-size: 13px; }
}

.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* 正式名称「紙片採集室」。採集ラベルと読み仮名はヘッダー内だけに適用。 */
.home-header .brand { font-size: 11px; }
.home-header .name-composition { display: grid; grid-template-columns: minmax(0,1fr) 128px; align-items: center; gap: 25px; margin-top: 26px; }
.home-header .edition { margin: 0 0 14px; font-size: 9px; letter-spacing: 2px; }
.home-header h1 { margin: 0; line-height: 1.7; font-size: 48px; letter-spacing: .18em; white-space: nowrap; font-weight: 600; }
.home-header .reading { margin: 0 0 3px 4px; color: #67675e; font-size: 12px; letter-spacing: .24em; }
.home-header .name-caption { margin: 13px 0 0 3px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.home-header .collection-label { position: relative; border: 1px solid #a9b39e; background: #e1e6dd; padding: 15px 9px 12px; text-align: center; transform: rotate(-2deg); box-shadow: 2px 3px #ddd3bf; }
.home-header .collection-label::after { content: ''; position: absolute; width: 5px; height: 5px; border: 1px solid #a0957e; border-radius: 50%; top: 7px; right: 7px; }
.home-header .collection-label small { font: 8px/1.8 ui-monospace,monospace; letter-spacing: .8px; }
.home-header .collection-label span { display: block; border-block: 1px solid #b8c0ad; margin: 7px 0; padding: 5px 0; font: 16px/1.8 var(--heading); letter-spacing: .12em; }
.home-header .collection-label i { font: 10px/1.8 ui-monospace,monospace; }
@media(max-width:600px) {
  .home-header .brand { font-size: 10px; }
  .home-header .name-composition { display: block; position: relative; margin-top: 28px; }
  .home-header .edition { font-size: 7px; letter-spacing: 1px; }
  .home-header h1 { font-size: 34px; letter-spacing: .12em; }
  .home-header .reading { font-size: 11px; letter-spacing: .18em; margin-bottom: 5px; }
  .home-header .name-caption { font-size: 13px; }
  .home-header .collection-label { position: absolute; right: 0; top: -21px; padding: 3px 7px; }
  .home-header .collection-label small, .home-header .collection-label span, .home-header .collection-label::after { display: none; }
  .home-header .collection-label i { font-size: 8px; }
}

/* キーボード利用時のみ現れる本文への導線。通常の紙面配置は変えない。 */
.skip-link { position: absolute; top: 8px; left: 12px; z-index: 10; padding: 10px 16px; background: #faf6ec; color: #365951; transform: translateY(-180%); }
.skip-link:focus { transform: none; outline: 3px solid #365951; outline-offset: 2px; }

form .section-aside { color: #565b50; }

nav button[aria-selected="false"] { color: #565b50; }