/* まなびの 書く れんしゅう（/manabi/kaku/）。色・角丸・影は manabi.css の :root の変数だけを使う（manabi/DESIGN.md）。
   見なおす所は 図解の赤（--fig-red）の 波線＋薄い地、ひとことは 点線。色だけに頼らず「見なおそう」「ひとこと」の 札でも示す。 */

.kk { padding-top: 8px; }
.kk [hidden] { display: none !important; }
.kk-head { margin-bottom: 20px; }
.kk-head > div:first-child { max-width: 46em; }
.kk-head__lead { color: var(--ink-soft); }
.kk-promise { margin-top: 10px; padding: 8px 14px; display: inline-block; background: var(--wood-light); border: 2px solid var(--ink); border-radius: var(--radius-s); font-weight: 700; font-size: 14px; }

.kk-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-bottom: 14px; }
.kk-bar__label { font: 900 14px/1 var(--font-head); }
.kk-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-chip {
  min-height: 42px; padding: 0 16px; font: 900 16px/1 var(--font-head); color: var(--ink); cursor: pointer;
  background: var(--panel); border: 2px solid var(--ink); border-radius: var(--radius-pill); transition: background-color var(--t);
}
.kk-chip:hover { background: var(--wood-light); }
.kk-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.kk-tasks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.kk-task {
  min-height: 38px; padding: 0 14px; font: 700 14px/1 var(--font-body); color: var(--ink); cursor: pointer;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-pill); display: inline-flex; gap: 6px; align-items: center;
}
.kk-task[aria-pressed="true"] { background: var(--wood); }
.kk-task__done { font-weight: 900; }

.kk-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.kk-card { background: var(--panel); border: 2.5px solid var(--ink); border-radius: var(--radius-m); box-shadow: var(--lift); padding: 20px 22px; min-width: 0; }
.kk-title { font: 900 24px/1.35 var(--font-head); margin: 0; }
.kk-hint { margin: 6px 0 0; }
.kk-conds { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.kk-cond, .kk-check { display: flex; gap: 8px; align-items: baseline; }
.kk-dot {
  display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; transform: translateY(3px);
  border: 2px solid var(--ink); border-radius: 50%; font: 900 12px/1 var(--font-head); background: var(--panel);
}
.kk-cond--ok .kk-dot, .kk-check--ok .kk-dot { background: var(--ink); color: var(--paper); }
.kk-check--bad .kk-dot { border-color: var(--fig-red); color: var(--fig-red); }
.kk-label { font: 900 14px/1 var(--font-head); display: block; margin-bottom: 6px; }
.kk-text {
  width: 100%; min-height: 200px; resize: vertical; padding: 14px 16px; font: 400 19px/1.9 var(--font-body); color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-s);
}
.kk--long .kk-text { min-height: 340px; }
.kk-counts { font-size: 14px; color: var(--ink-soft); margin-top: 6px; font-variant-numeric: tabular-nums; }
.kk-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.kk-btn {
  min-height: 38px; padding: 0 14px; font: 900 14px/1 var(--font-head); color: var(--ink); cursor: pointer;
  background: var(--wood-light); border: 2px solid var(--ink); border-radius: var(--radius-pill);
}
.kk-example { margin-top: 12px; }
.kk-example summary { cursor: pointer; font-weight: 700; }
.kk-example__text { white-space: pre-wrap; margin-top: 8px; padding: 12px 16px; background: var(--paper); border: 2px dashed var(--ink-soft); border-radius: var(--radius-s); font-size: 17px; line-height: 1.9; }
.kk-sub { font: 900 15px/1 var(--font-head); margin: 18px 0 8px; }
.kk-mirror { white-space: pre-wrap; font-size: 18px; line-height: 2; padding: 12px 16px; border: 2px dashed var(--ink-soft); border-radius: var(--radius-s); min-height: 3em; overflow-wrap: anywhere; }
.kk-mirror__empty { color: var(--ink-soft); }
.kk-mark--fix { text-decoration: underline wavy var(--fig-red) 2px; text-underline-offset: 5px; background: var(--wood-light); border-radius: 3px; }
.kk-mark--tip { text-decoration: underline dotted var(--ink-soft) 2px; text-underline-offset: 5px; }
.kk-lens__row { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 5.6em; gap: 8px; align-items: center; font-size: 13px; margin: 3px 0; font-variant-numeric: tabular-nums; }
.kk-lens__bar { position: relative; height: 14px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 7px; overflow: hidden; }
.kk-lens__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--wood); }
.kk-lens__fill--over { background: var(--fig-red); }
.kk-lens__limit { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.kk-note { font-size: 13px; color: var(--ink-soft); }

.kk-verdict { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 2.5px solid var(--ink); border-radius: var(--radius-m); margin-bottom: 14px; background: var(--paper); }
.kk-verdict--good { background: var(--wood-light); }
.kk-verdict b { font: 900 20px/1.3 var(--font-head); display: block; }
.kk-verdict small { color: var(--ink-soft); }
.kk-stamp { width: 54px; height: 54px; flex: none; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; font: 900 22px/1 var(--font-head); background: var(--panel); }
.kk-verdict--good .kk-stamp { background: var(--ink); color: var(--paper); }
.kk-checks { list-style: none; margin: 0; padding: 0; }
.kk-check { padding: 6px 2px; border-bottom: 1px solid var(--grid); font-size: 14px; }
.kk-check__label { flex: 1; }
.kk-check__n { font-weight: 700; font-size: 13px; white-space: nowrap; }
.kk-check--bad .kk-check__n { color: var(--fig-red); }
.kk-finds { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.kk-find__btn { width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius-s); border: 2px solid var(--ink); background: var(--panel); font: 400 14px/1.6 var(--font-body); color: var(--ink); cursor: pointer; }
.kk-find--fix .kk-find__btn { border-color: var(--fig-red); }
.kk-find--tip .kk-find__btn { border-style: dashed; }
.kk-find__kind { font: 900 12px/1 var(--font-head); padding: 3px 8px; border-radius: var(--radius-pill); margin-right: 6px; background: var(--ink-soft); color: var(--paper); }
.kk-find--fix .kk-find__kind { background: var(--fig-red); }
.kk-find__part { font-weight: 700; margin-right: 4px; }
.kk-legend { font-size: 13px; color: var(--ink-soft); margin: 12px 0 0; }

.kk-teacher { padding: 18px 20px; background: var(--panel); border: 2px solid var(--ink); border-radius: var(--radius-m); }
.kk-teacher__title { font: 900 17px/1.4 var(--font-head); }
.kk-teacher__form { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 10px 0; }
.kk-teacher select { font: inherit; padding: 2px 6px; border: 2px solid var(--ink); border-radius: var(--radius-s); background: var(--panel); color: var(--ink); max-width: 100%; }
.kk-teacher__url code { word-break: break-all; font-size: 13px; }

@media (max-width: 860px) {
  .kk-grid { grid-template-columns: minmax(0, 1fr); }
  .kk-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .kk-chip { transition: none; }
}