/* KNK WebEditor メールフォームの最小限の見た目。形はサイトが書いた HTML、見た目はサイトの CSS で整える */
.knk-form input[type="text"], .knk-form input[type="email"], .knk-form input[type="tel"], .knk-form select, .knk-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #bbb; border-radius: 6px; font: inherit; font-size: 16px; background: #fff; color: inherit;
}
.knk-form textarea { resize: vertical; }
.knk-form [aria-invalid="true"] { border-color: #c0392b; }
.knk-step[hidden] { display: none; }
.knk-choices { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.knk-choice { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.knk-choice input { width: 18px; height: 18px; margin: 0; }
.knk-error { display: block; margin-top: 4px; }
.knk-error, .knk-message-error { color: #c0392b; font-size: 14px; }
.knk-error[hidden], .knk-message[hidden] { display: none; }
.knk-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.knk-button { min-width: 140px; padding: 12px 24px; border: 1px solid #888; border-radius: 6px; background: #fff; color: #222; font: inherit; cursor: pointer; }
.knk-button-primary { border-color: #333; background: #333; color: #fff; }
.knk-button:disabled { opacity: .5; cursor: not-allowed; }
.knk-confirm { margin: 0; }
.knk-confirm dt { font-weight: 600; margin-top: 12px; }
.knk-confirm dd { margin: 0; padding-bottom: 12px; border-bottom: 1px solid #ddd; white-space: pre-wrap; overflow-wrap: anywhere; }
.knk-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.knk-acceptance { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.knk-acceptance input { width: 18px; height: 18px; margin: 0; }
.knk-turnstile-preview { display: inline-block; padding: 16px 20px; border: 1px dashed #999; color: #666; font-size: 13px; }
.knk-if[hidden] { display: none !important; }
/* 送信ボタンと押せない理由の吹き出し（位置・色はサイトの CSS で変えてよい） */
.knk-submit { position: relative; display: inline-block; }
.knk-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.knk-hint { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; width: max-content; max-width: 80vw;
  padding: 6px 12px; border-radius: 6px; background: #333; color: #fff; font-size: 13px; line-height: 1.5; }
.knk-hint::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #333; }
.knk-hint[hidden] { display: none; }
/* 個人情報の取り扱い（iframe） */
.knk-policy iframe { display: block; width: 100%; height: 220px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.knk-acceptance input:disabled + span { opacity: .6; }
/* プレビュー・サンプルで送っていないことの注記（完了の画面） */
.knk-nosend { margin: 12px 0 0; padding: 8px 12px; border-radius: 6px; background: rgba(120, 120, 120, .12); color: inherit; font-size: 13px; }
/* テスト送信のリンクから開いたとき（docs/design-p3-modules-form.md §15）。お客さんの送信と見分けがつくように目立たせる */
.knk-test-banner { margin: 0 0 16px; padding: 10px 14px; border: 2px dashed #d35400; border-radius: 6px; background: #fff4e5; color: #7a3300; font-size: 14px; line-height: 1.6; }
/* 画像の添付（[image]。docs/design-form-attach.md §2）：ファイルの欄は隠し、押す場所・置く場所と小さな絵を出す */
.knk-images-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.knk-images-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px; border: 2px dashed #aaa; border-radius: 8px; text-align: center; cursor: pointer; background: rgba(255, 255, 255, .6); }
.knk-images-drop:hover, .knk-images.is-over .knk-images-drop { border-color: #333; }
.knk-images-input:focus-visible + .knk-images-drop { outline: 3px solid #37abe2; outline-offset: 2px; }
.knk-images-pick { font-weight: 600; }
.knk-images-note { font-size: 13px; opacity: .75; }
.knk-images.is-full .knk-images-drop { display: none; }
.knk-images-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.knk-images-list:empty { display: none; }
.knk-images-list li, .knk-confirm-images li { position: relative; display: grid; gap: 4px; justify-items: center; width: 120px; font-size: 12px; }
.knk-images-list img, .knk-confirm-images img { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; background: #f4f4f4; }
.knk-images-list .knk-images-busy { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 8px; background: rgba(120, 120, 120, .15); }
.knk-images-remove { padding: 4px 10px; border: 1px solid #888; border-radius: 999px; background: #fff; color: #222; font: inherit; font-size: 12px; cursor: pointer; }
.knk-confirm-images { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
/* チャットの会話の写し（[chatlog]。§4）：チェックと［プレビュー］だけ。会話は開いたときだけ（読むだけ。お客さまの発言は右、チャットは左） */
.knk-chatlog[hidden], .knk-chatlog-items[hidden] { display: none; }
.knk-chatlog { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.knk-chatlog-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.knk-chatlog-count { font-weight: 400; opacity: .75; }
.knk-chatlog-toggle { padding: 4px 12px; border: 1px solid #888; border-radius: 999px; background: #fff; color: #222; font: inherit; font-size: 13px; cursor: pointer; }
.knk-chatlog-note { flex-basis: 100%; font-size: 13px; opacity: .75; }
.knk-chatlog-items { flex-basis: 100%; display: grid; gap: 6px; max-height: 260px; overflow: auto; margin: 0; padding: 10px; border: 1px solid #ddd; border-radius: 8px; list-style: none; background: rgba(255, 255, 255, .6); }
.knk-chatlog-items li { max-width: 85%; padding: 6px 10px; border-radius: 10px; background: rgba(120, 120, 120, .12); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.knk-chatlog-items li.is-user { justify-self: end; background: #333; color: #fff; }
.knk-chatlog.is-off .knk-chatlog-items { opacity: .45; }