/* レイアウト基盤 */
.bb-tool-island { margin: -60px auto 80px; padding: 40px; background: #fff; border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,.08); border: 1px solid #f1f5f9; max-width: 1040px; position: relative; z-index: 10; }
.bb-tool-container { max-width: 960px; margin: 0 auto; }
.tool-section { margin-bottom: 24px; }

/* ヘッダーエリアのスタイル */
.tool-main-header {
    text-align: left;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid #f1f5f9;
}

.tool-main-title {
    font-size: 28px;
    font-weight: 900;
    color: #1e293b;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-main-sub {
    font-size: 16px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* ラベルの微調整（既存クラスへの追加） */
.tool-section-label {
    font-size: 22px;
    font-weight: 800;
    color: #334155;
}

/* スマホ対応の調整 */
@media (max-width: 768px) {
    .tool-main-header {
        margin-bottom: 24px;
        padding: 0 25px 16px;
    }
    .tool-main-title {
        font-size: 22px;
        justify-content: center;
    }
    .tool-main-sub {
        font-size: 14px;
    }
.tool-section-label {font-size: 16px;}
}

/* 入力ヘッダー */
.tool-input-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
.bb-btn-test { width: auto; background: #fdf2f8; border: 1px solid #fbcfe8; color: #db2777; padding: 6px 12px; font-size: 12px; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.bb-btn-test:hover { background: #fce7f3; }

/* テキストエリア */
.bb-input { width: 100%; min-height: 500px; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; font-size: 16px; transition: .2s; box-sizing: border-box; font-family: 'Menlo', 'Consolas', monospace; line-height: 1.6; resize: vertical; }
.bb-input:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 4px rgba(99,102,241,0.1); }
.bb-input--readonly { background: #fafbff; border-color: #6366f1; }

/* ボタン・アクション */
.tool-action-main { margin-top: 16px; }
.btn--primary-action { border: none; padding: 16px; width: 100%; border-radius: 10px; font-weight: 800; font-size: 16px; cursor: pointer; transition: .3s; }
.btn--copy {color: #fff; background: linear-gradient(135deg, #4338ca 0%, #1e1b4b 100%); }
.btn-clear {color: #fff;background-color: #cacaca;color: #383838;}
.bb-action-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.tool-divider {text-align: center;}

/* 解説エリア */
.tool-explanation { display: none; margin-top: 16px; padding: 30px; background: #f8fafc; border-left: 4px solid #6366f1; border-radius: 8px; animation: fadeIn 0.5s ease; }
.tool-explanation-title { font-size: 22px; color: #1e293b; margin-bottom: 22px;    margin-top: 8px; font-weight: 800; }
.tool-explanation-list { font-size: 16px; color: #475569; line-height: 1.7; padding-left: 28px; margin: 0; }
.tool-explanation-list li {margin-bottom: 5px;}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* スマホ最適化 */
@media (max-width: 768px) {
    .bb-tool-island { padding: 20px 16px; margin: -80px 0 40px; }
    .bb-action-group { grid-template-columns: 1fr; }
}