/* =============================================
   一行掲示板 v1.2.0
   ============================================= */

.ikb-wrap {
  font-size: 14px;
  color: #333;
  margin: 24px 0;
  line-height: 1.6;
}

/* ---- ヘッダー ---- */
.ikb-header {
  border-left: 4px solid #7b4fa0;
  padding: 2px 0 2px 10px;
  margin-bottom: 16px;
}
.ikb-header p { margin: 0; color: #555; font-size: 13px; }

/* ---- フォーム外枠 ---- */
.ikb-form {
  background: #f9eef9;
  border: 1px solid #e0c8e8;
  border-radius: 6px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

.ikb-form-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.ikb-form-row:last-of-type { margin-bottom: 0; }

.ikb-label {
  width: 80px;
  min-width: 80px;
  font-size: 13px;
  color: #555;
  padding-top: 6px;
}

.ikb-form-right {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---- 星評価（入力） ---- */
.ikb-stars {
  display: flex;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.ikb-star {
  font-size: 28px;
  line-height: 1;
  transition: color 0.1s, transform 0.1s;
  outline: none;
}
.ikb-star--empty  { color: #ccc; }
.ikb-star--filled { color: #f5a623; }
.ikb-star--hover  { color: #f7c05a; transform: scale(1.15); }
.ikb-star:focus   { outline: 2px solid #7b4fa0; border-radius: 2px; }
.ikb-rating-hint  { font-size: 12px; color: #e05c5c; }

/* ---- テキスト入力 ---- */
.ikb-name {
  border: 1px solid #d4b8e0;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  width: 240px;
  max-width: 100%;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.ikb-name:focus { border-color: #7b4fa0; }

.ikb-hint { font-size: 12px; color: #999; }

.ikb-comment-row .ikb-form-right { flex-direction: column; align-items: stretch; }

.ikb-comment {
  border: 1px solid #d4b8e0;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  width: 100%;
  resize: vertical;
  background: #fff;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.ikb-comment:focus { border-color: #7b4fa0; }

.ikb-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ikb-counter { font-size: 12px; color: #999; transition: color 0.15s; }
.ikb-counter--over { color: #e05c5c; font-weight: bold; }

.ikb-btn {
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 6px 20px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.ikb-btn:hover:not(:disabled) { background: #f0f0f0; }
.ikb-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- メッセージ ---- */
.ikb-msg { margin: 8px 0 0; font-size: 13px; min-height: 18px; }
.ikb-msg--success { color: #27ae60; }
.ikb-msg--error   { color: #e05c5c; }

/* ---- コメント一覧 ---- */
.ikb-list { margin-top: 4px; }

.ikb-item {
  border: 1px solid #e0d0ec;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #fff;
}

/* 星表示（一覧） */
.ikb-item-rating {
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ikb-stars-display { display: inline-flex; gap: 1px; }
.ikb-sd-filled { color: #f5a623; font-size: 18px; }
.ikb-sd-empty  { color: #ddd;    font-size: 18px; }

.ikb-item-body {
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.ikb-item-name    { font-weight: bold; color: #333; }
.ikb-item-comment { flex: 1; color: #444; word-break: break-all; }
.ikb-item-date    { color: #aaa; font-size: 12px; white-space: nowrap; }

.ikb-loading, .ikb-empty, .ikb-error {
  color: #aaa; font-size: 13px; padding: 10px 0; margin: 0;
}
.ikb-error { color: #e05c5c; }

.ikb-footer-note { color: #aaa; font-size: 11px; margin: 6px 0 0; }

/* ---- レスポンシブ ---- */
@media (max-width: 520px) {
  .ikb-form-row { flex-direction: column; gap: 6px; }
  .ikb-label { padding-top: 0; width: auto; }
  .ikb-name  { width: 100%; }
  .ikb-item-date { width: 100%; }
}

/* ---- ハニーポット（人間には見えない） ---- */
.ikb-hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}