/* --- 共通レイアウト資産 --- */
.tool-island { background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin: -60px 0 20px; border: 1px solid #e2e8f0; overflow: hidden; }
.island-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; min-height: 650px; background: #f1f5f9; gap: 1px; }
@media (max-width: 992px) { .island-grid { grid-template-columns: 1fr; } }
.input-panel, .diagnostic-panel { padding: 30px; background: #fff; }

/* --- 入力エリアの装飾 --- */
.panel-header { margin-bottom: 20px; border-bottom: 2px solid #f1f5f9; padding-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.panel-header .label { font-size: 11px; font-weight: 900; color: #94a3b8; letter-spacing: 0.15em; text-transform: uppercase; }

.option-group { margin-bottom: 20px; }
.option-group-title { font-size: 13px; font-weight: 800; color: #334155; margin-bottom: 8px; display: flex; justify-content: space-between; }
.counter-badge { font-size: 11px; color: #64748b; font-weight: normal; background: #f8fafc; padding: 2px 8px; border-radius: 4px; border: 1px solid #e2e8f0; }

.bb-input-field { width: 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; }
.bb-textarea-field { width: 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; transition: border-color 0.2s; }
.bb-input-field:focus, .bb-textarea-field:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }

/* --- アクションボタン --- */
.primary-btn { width: 100%; padding: 16px; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.primary-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
.primary-btn:active { transform: translateY(0); }

/* --- 診断パネル（右側） --- */
.score-circle-area { text-align: center; padding: 10px 0 20px; }
.score-circle { width: 130px; height: 130px; margin: 0 auto 10px; position: relative; }
.score-circle svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.circle-bg { fill: none; stroke: #f1f5f9; stroke-width: 3; }
.circle-progress { fill: none; stroke: #22c55e; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 1s ease-out; }
.score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 800; color: #1e293b; }
.score-text span { font-size: 36px; }

/* --- プロンプトプレビュー（ダークモード） --- */
.preview-section { margin-top: 15px; }
#out { width: 100%; height: 280px; padding: 16px; border: 1px solid #1e293b; border-radius: 8px; font-family: 'Fira Code', monospace; font-size: 13px; background: #1e293b; color: #e2e8f0; line-height: 1.6; }

.copy-btn { width: 100%; padding: 14px; background: #1e293b; color: #fff; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; transition: background 0.3s; }
.bb-warn { font-size: 11px; font-weight: 700; transition: color 0.3s; }

/* --- プレースホルダー --- */
.placeholder-msg { height: 100%; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-style: italic; text-align: center; line-height: 1.8; }

/* --- モバイル・タブレット最適化 (768px以下) --- */
@media (max-width: 768px) {
    /* 1. 全体の余白を16pxに凝縮 */
    .input-panel, .diagnostic-panel {
        padding: 16px; 
    }

    /* 2. グリッドを縦並びに強制 */
    .island-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    /* 3. ヘッダー周りの調整 */
    .panel-header {
        margin-bottom: 16px;
        padding-bottom: 8px;
    }

    /* 4. 入力項目の間隔を微調整 */
    .option-group {
        margin-bottom: 16px;
    }

    .option-group-title {
        font-size: 12px;
    }

    /* 5. 3つ並びのボタンをスマホでは押しやすく配置 */
    .action-grid {
        grid-template-columns: 1fr; /* 縦並びにしてタップ領域を確保 */
        gap: 8px;
    }

    .primary-btn {
        padding: 14px;
        font-size: 15px; /* 指で押しやすいサイズ */
    }

    /* 6. 診断スコアエリアのコンパクト化 */
    .score-circle-area {
        padding: 10px 0;
    }

    .score-circle {
        width: 100px;
        height: 100px;
    }

    .score-text span {
        font-size: 28px;
    }

    /* 7. プレビューエリアの高さ調整 */
    #out {
        height: 240px;
        font-size: 12px;
        padding: 12px;
    }
}

/* 非常に小さい画面（iPhone SE等）への配慮 */
@media (max-width: 380px) {
    .panel-header .label {
        font-size: 9px;
    }
    .counter-badge {
        display: none; /* スペース確保のためバッジを非表示、またはタイトルの下に逃がす */
    }
}