.bb-tool-island { margin: -60px auto 80px; padding: 48px; background: #fff; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.12); border: 1px solid #edf2f7; position: relative; z-index: 10; max-width: 1040px; box-sizing: border-box; }
.tool-main-header { text-align: left; padding-bottom: 24px; }
.tool-main-title { font-size: 28px; font-weight: 900; color: #1e293b; margin: 0; letter-spacing: -.02em; }
.tool-main-sub { font-size: 14px; color: #64748b; margin-top: 8px; }
.tool-section-label { display: inline-flex; align-items: center; gap: 30px; width: 100%; font-size: 22px; font-weight: 800; color: #444; margin-bottom: 18px; }
.tool-section-label::after { content: ""; height: 1px; flex: 1; background: #f1f5f9; }

/* 2カラム & 追従設定 */
.bb-faq-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 960px) {
  .bb-faq-grid.bb-grid-layout { grid-template-columns: 1.1fr 0.9fr; }
  .bb-tool-preview { position: sticky !important; top: 100px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; z-index: 5; }
}

/* 入力エリアの装飾 */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.form-row label { font-size: 12px; font-weight: 700; color: #475569; }
.form-row input, .form-row select, .form-row textarea { border: 2px solid #e2e8f0; border-radius: 12px; padding: 12px; font-size: 14px; width: 100%; box-sizing: border-box; }
.form-row input:focus, .form-row textarea:focus { border-color: #a78bfa; outline: none; box-shadow: 0 0 0 4px rgba(167,139,250,.1); }

.form-row input:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 4px rgba(99,102,241,0.1); }


/* ボタン */
.btn--generate { background: linear-gradient(135deg,#a78bfa,#f472b6); color: #fff; border: none; border-radius: 50px; font-weight: 900; cursor: pointer; transition: .3s; box-shadow: 0 10px 20px rgba(244,114,182,.3); }
.btn--generate:hover { transform: translateY(-2px); opacity: 0.9; }
.btn--sub, .bb-btn--sub-small { border: 2px solid #e2e8f0; background: #fff; color: #475569; font-weight: 800; cursor: pointer; transition: .2s; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.btn--sub.is-accent { border-color: #a78bfa; color: #7c3aed; background: #fdfaff; }
.btn-row { display: flex; gap: 10px; }

/* プレビュー */
.bb-panel { background: linear-gradient(to bottom right,#f8fafc,#ffffff); border: 1px solid #edf2f7; border-radius: 20px; padding: 25px; box-sizing: border-box; }
.bb-pre { background: #0b1220; color: #e2e8f0; border-radius: 14px; padding: 20px; font-family: monospace; font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-all; flex: 1; overflow-y: auto; }
.bb-links { margin-top: 15px; font-size: 12px; color: #64748b; font-weight: 700; }
.bb-links a { color: #7c3aed; text-decoration: none; border-bottom: 1px solid transparent; transition: .2s; }
.bb-links a:hover { border-bottom-color: #7c3aed; }
.bb-mini {font-weight: 600;font-size: 13px;margin-bottom: 0;}

/* アイテムカード */
.faq-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; margin-top: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.faq-item + .faq-item {margin-top: 16px; }
.faq-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.faq-item .remove-btn { background: #fff; border: 1px solid #fee2e2; color: #ef4444; font-size: 11px; font-weight: 800; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: .2s; }
.faq-item .remove-btn:hover { background: #fef2f2; border-color: #fca5a5; }

.bb-action-area { background: #f1f5f9; padding: 20px; border-radius: 16px; margin-top: 20px; }
.note-box { font-size: 12px; background: rgba(253,250,255,.9); border: 1px dashed #a78bfa; padding: 14px; border-radius: 14px; margin-top: 14px; color: #4b5563; }
/* スマートフォン（768px以下）用調整 */
@media (max-width: 768px) {
  .bb-tool-island {
    padding: 16px;
    margin: -80px 0 40px; /* 左右に少し余白を持たせ、上部の食い込みを緩和 */
  }

.bb-panel {
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
  }
}