/* こえをおくる。正本は development/DESIGN_RULE.md（ベタ塗り・引き算・狙った安さ）。
   色は styles.css の3値（--bg / --ink / --key）だけを使う。ぼかし影なし。 */

.koe-main { max-width: 620px; }

.koe-form { display: block; }

.koe-label {
  display: block;
  margin: 16px 0 6px;
  font-size: var(--t4);
  font-weight: 900;
}

.koe-hint {
  margin: 0 0 6px;
  font-size: var(--t5);
  color: var(--ink-2);
}

.koe-select,
.koe-input,
.koe-textarea {
  display: block;
  width: 100%;
  min-height: 44px; /* タップ目標44px以上（§12） */
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t3);
}

.koe-textarea { resize: vertical; line-height: 1.6; }

.koe-select:focus-visible,
.koe-input:focus-visible,
.koe-textarea:focus-visible,
.koe-send:focus-visible {
  outline: 3px solid var(--key);
  outline-offset: 2px;
}

.koe-count {
  margin: 4px 0 0;
  text-align: right;
  font-size: var(--t5);
  color: var(--ink-3);
}

/* 罠の欄。display:none は埋めないbotがいるので、見えない場所へ追い出す */
.koe-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 押せるものの見た目は1種類（§9）。ハブのカードの「ひらく」と同じ形 */
.koe-send {
  display: inline-block;
  margin-top: 20px;
  min-height: 44px;
  padding: 10px 26px;
  background: var(--key);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.koe-send:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.koe-send:disabled {
  background: var(--bg);
  color: var(--ink-3);
  box-shadow: 0 0 0 var(--ink);
  cursor: default;
}

.koe-msg { margin: 12px 0 0; font-size: var(--t4); font-weight: 900; }
.koe-msg[data-kind="ng"] { color: var(--key); }

/* 完了＝愛嬌の置き場（§3） */
.koe-done {
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 20px 18px;
  margin-top: 8px;
}

.koe-done-mark {
  margin: 0 0 8px;
  font-size: var(--t2);
  font-weight: 900;
  color: var(--key);
}

.koe-done p { margin: 0 0 8px; }
.koe-done a { color: var(--ink); font-weight: 900; }

.koe-note {
  margin: 24px 0 0;
  font-size: var(--t5);
  color: var(--ink-2);
}

.koe-back { margin: 16px 0 0; font-size: var(--t4); }
.koe-back a { color: var(--ink); font-weight: 900; }