/* AI生成画像の商用利用チェックリスト 固有のCSS（接頭辞：ail-）
   色はすべて assets/common.css の CSS変数を使う */

.ail-disclaimer strong { color: var(--tk-text); }

/* ---------- 質問 ---------- */
.ail-q { margin-bottom: 16px; }
.ail-q__legend { font-size: .9375rem; line-height: 1.6; }
.ail-q__num { font-weight: 700; color: var(--tk-accent); margin-right: 6px; }
.ail-q__req, .ail-q__opt, .ail-q__multi { display: inline-block; font-size: .6875rem; font-weight: 700; padding: 0 6px; border-radius: 4px; margin-left: 6px; vertical-align: .1em; line-height: 1.6; }
.ail-q__req { background: var(--tk-danger-soft); color: var(--tk-danger); }
.ail-q__opt { background: var(--tk-surface-2); color: var(--tk-text-muted); }
.ail-q__multi { background: var(--tk-accent-soft); color: var(--tk-accent); }
.ail-q__help { margin: 0 0 8px; }
.ail-q__options { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.ail-opt { margin: 0; padding: 8px 10px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-sm); background: var(--tk-surface); }
.ail-opt:hover { border-color: var(--tk-accent); }
.ail-opt:has(input:checked) { border-color: var(--tk-accent); background: var(--tk-accent-soft); }
.ail-other { margin: 10px 0 0; }
.ail-error { margin: 8px 0 0; }

/* ---------- 結果 ---------- */
.ail-result > * + * { margin-top: 16px; }
.ail-result .ail-disclaimer { margin-bottom: 0; }
.ail-summary { font-size: .9375rem; margin: 0; }

.ail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ail-item { border: 1px solid var(--tk-border); border-left-width: 4px; border-radius: var(--tk-radius-sm); padding: 10px 14px; background: var(--tk-surface); }
.ail-item--high { border-left-color: var(--tk-danger); }
.ail-item--mid { border-left-color: var(--tk-warning); }
.ail-item--low { border-left-color: var(--tk-border-strong); }
.ail-item.is-done { opacity: .6; }
.ail-item.is-done .ail-item__title { text-decoration: line-through; }
.ail-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; cursor: pointer; }
.ail-item__check { accent-color: var(--tk-accent); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.ail-item__title { font-weight: 700; flex-basis: 100%; line-height: 1.5; }
.ail-item__reason { margin: 6px 0 4px; font-size: .9375rem; }
.ail-item__refs { margin: 0; color: var(--tk-text-muted); }
.ail-item__refs-label { font-weight: 600; }
.ail-level--high { background: var(--tk-danger-soft); color: var(--tk-danger); }
.ail-level--mid { background: var(--tk-warning-soft); color: var(--tk-warning); }
.ail-level--low { background: var(--tk-surface-2); color: var(--tk-text-muted); }

.ail-block__title { font-size: 1rem; margin: 0 0 6px; }
.ail-compare { border: 1px solid var(--tk-border); border-radius: var(--tk-radius); padding: 12px 16px; background: var(--tk-surface-2); }
.ail-compare__points { margin: 0 0 8px; padding-left: 1.3em; font-size: .9375rem; }
.ail-compare__example { border-top: 1px solid var(--tk-border); padding-top: 8px; }
.ail-compare__example p { margin: 0 0 4px; }
.ail-md { max-height: 320px; white-space: pre-wrap; font-size: .8125rem; margin: 0; }

@media (min-width: 1024px) {
  .ail-q__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .ail-compare, .ail-md, .tk-copy { display: none !important; }
}