/* ==========================================================================
   ご意見箱フォーム(2026-08-06)
   librarian.css の書き方を踏襲: 素のCSS、shn-接頭辞(ここでは.shn-fb-)、
   ダーク基調+金アクセント(--shn-gold: #c9a45c)。.shn-arcスコープ外でも
   壊れないよう、CSS変数には必ずフォールバック値を添える。
   ショートコードで本文中に置かれる想定のため、固定配置(fixed)は使わず
   通常フローのカードとして組む。
   ========================================================================== */

.shn-fb-wrap {
  max-width: 560px;
  margin: 24px auto;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

.shn-fb-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(201, 164, 92, .35);
  background: var(--shn-ink, #0a0f0d);
  border-radius: 4px;
}

.shn-fb-intro {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--shn-text-dim, #9aa79e);
}

.shn-fb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shn-fb-label {
  font-size: 13px;
  color: var(--shn-paper, #d9d0b8);
  font-weight: 600;
}

.shn-fb-required {
  margin-left: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #c9a45c;
  border: 1px solid rgba(201, 164, 92, .5);
  border-radius: 3px;
  padding: 1px 5px;
}

.shn-fb-textarea,
.shn-fb-select,
.shn-fb-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(217, 208, 184, .3);
  background: rgba(255, 255, 255, .04);
  color: var(--shn-text, #d8cfc0);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 14px;
  min-height: 44px;
}

.shn-fb-textarea {
  min-height: 120px;
  line-height: 1.7;
  resize: vertical;
}

.shn-fb-textarea::placeholder,
.shn-fb-input::placeholder {
  color: var(--shn-text-dim, #9aa79e);
}

.shn-fb-select {
  appearance: auto;
}

/* ハニーポット: 画面上は完全に消すが、DOM上は存在させる(ボットのフォーム
   自動入力に引っかけるため)。display:noneより、視覚的に隠す方式にして
   一部の単純なボット検出回避には引っかかりやすくする狙い。 */
.shn-fb-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.shn-fb-submit {
  align-self: flex-start;
  min-width: 140px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid rgba(201, 164, 92, .5);
  background: rgba(201, 164, 92, .14);
  color: var(--shn-gold, #c9a45c);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.shn-fb-submit:hover { background: rgba(201, 164, 92, .24); }
.shn-fb-submit:disabled { opacity: .5; cursor: default; }

.shn-fb-status {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--shn-gold, #c9a45c);
  min-height: 1em;
}
.shn-fb-status-error {
  color: #e0796b;
}

/* ---- モバイル375px想定: 余白を詰める。フィールド自体はもともと縦積みなので
   崩れる要素がない。タップ領域(送信ボタン等)は既に44px以上を確保済み。 ---- */
@media (max-width: 480px) {
  .shn-fb-wrap { margin: 16px auto; }
  .shn-fb-form { padding: 16px; gap: 14px; }
  .shn-fb-submit { align-self: stretch; width: 100%; }
}

/* ---- ライトテーマ(:root[data-theme="light"]、shinen-theme-toggle.jsが
   documentElementへ付与する属性)。.shn-arcスコープ外の要素のため、
   librarian.cssと同様に明側の配色を個別に明示する。 ---- */
:root[data-theme="light"] .shn-fb-form {
  background: #f5f0e3;
  border-color: rgba(156, 113, 48, .4);
}
:root[data-theme="light"] .shn-fb-intro { color: #6b6a5e; }
:root[data-theme="light"] .shn-fb-label { color: #2a2620; }
:root[data-theme="light"] .shn-fb-textarea,
:root[data-theme="light"] .shn-fb-select,
:root[data-theme="light"] .shn-fb-input {
  background: rgba(0, 0, 0, .03);
  color: #2a2620;
  border-color: rgba(42, 38, 32, .2);
}
:root[data-theme="light"] .shn-fb-required { color: #6b4f1d; border-color: rgba(156, 113, 48, .5); }
:root[data-theme="light"] .shn-fb-submit { color: #6b4f1d; }
:root[data-theme="light"] .shn-fb-status { color: #6b4f1d; }

@media print {
  .shn-fb-wrap { display: none !important; }
}