/* 気持ちの言葉ずかん */
.tone-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .9rem; color: var(--ink-soft); }
.dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .4em; vertical-align: .05em; }
.dot[data-tone="up"], .kotoba[data-tone="up"] { --tone: var(--tone-up); }
.dot[data-tone="down"], .kotoba[data-tone="down"] { --tone: var(--tone-down); }
.dot[data-tone="mid"], .kotoba[data-tone="mid"] { --tone: var(--tone-mid); }
.dot { background: var(--tone); }
.kotoba-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 12px; margin: 12px 0 0; }
.kotoba { background: var(--sheet); border: 1px solid var(--line); border-top: 5px solid var(--tone); border-radius: var(--radius-s) var(--radius-s) var(--radius-m) var(--radius-m); padding: 12px 16px; }
.kotoba dt { font-weight: 700; font-size: 1.2rem; }
.kotoba dd { margin: 4px 0 0; }
.kotoba .ex { font-size: .9rem; color: var(--ink-soft); }
.kotoba .ex::before { content: "たとえば："; font-weight: 700; }
.teacher-note { margin-top: 40px; background: var(--sheet); border: 1px dashed var(--mikata); border-radius: var(--radius-m); padding: 4px 20px 12px; max-width: 46em; }
.teacher-note h2 { border: none; margin-top: 12px; font-size: 1.1rem; }
.tone-label { display: inline-block; margin-left: 8px; font-size: .75rem; font-weight: 400; color: var(--ink-soft); }