/* 例文Clip 謝罪メール自動作成ツール */

.ramg-wrap {
    max-width: 1100px;
    margin: 32px auto;
    padding: 0;
    font-family: inherit;
    color: #222 !important;
}

.ramg-wrap h2,
.ramg-wrap h3,
.ramg-wrap h4,
.ramg-wrap p,
.ramg-wrap label,
.ramg-wrap li {
    color: #222 !important;
}

/* Cocoonなどの見出し装飾対策 */
.ramg-wrap h2,
.ramg-wrap h3,
.ramg-wrap h4 {
    background: transparent !important;
    background-color: transparent !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.ramg-wrap h2::before,
.ramg-wrap h2::after,
.ramg-wrap h3::before,
.ramg-wrap h3::after,
.ramg-wrap h4::before,
.ramg-wrap h4::after {
    display: none !important;
    content: none !important;
}

.ramg-header {
    background: linear-gradient(135deg, #fff7f7, #ffffff);
    border: 1px solid #ffd6d6;
    border-radius: 18px;
    padding: 26px;
    margin-bottom: 20px;
}

.ramg-header h2 {
    margin: 8px 0 10px !important;
    padding: 0 !important;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.4;
    color: #222 !important;
}

.ramg-header p {
    margin: 0;
    line-height: 1.8;
    color: #222 !important;
}

.ramg-badge {
    display: inline-block;
    background: #fff0f0;
    color: #222 !important;
    border: 1px solid #ffd0d0;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.9rem;
    font-weight: 700;
}

.ramg-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 20px;
}

.ramg-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.ramg-card h3 {
    margin: 0 0 16px !important;
    padding: 0 0 0 10px !important;
    font-size: 1.25rem;
    border-left: 5px solid #d64545 !important;
    color: #222 !important;
}

.ramg-card h4 {
    margin: 18px 0 8px !important;
    padding: 0 !important;
    color: #222 !important;
}

.ramg-card label {
    display: block;
    font-weight: 700;
    margin: 14px 0 6px;
    color: #222 !important;
}

.ramg-card input,
.ramg-card select,
.ramg-card textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 16px;
    background: #fff;
    color: #222;
}

.ramg-card textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.7;
}

#ramg_result {
    min-height: 380px;
    margin-top: 12px;
    white-space: pre-wrap;
}

.ramg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.ramg-actions button,
.ramg-tab,
.ramg-subject-btn {
    border: none;
    border-radius: 10px;
    padding: 11px 15px;
    font-size: 15px;
    cursor: pointer;
    transition: 0.2s ease;
}

.ramg-main-btn {
    background: #d64545;
    color: #fff !important;
    font-weight: 700;
}

.ramg-sub-btn {
    background: #eef2f7;
    color: #223 !important;
}

.ramg-actions button:hover,
.ramg-tab:hover,
.ramg-subject-btn:hover {
    opacity: 0.86;
    transform: translateY(-1px);
}

.ramg-subject-list {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.ramg-subject-btn {
    text-align: left;
    background: #f8fafc;
    color: #1e293b !important;
    border: 1px solid #e2e8f0;
}

.ramg-subject-btn.is-selected {
    border-color: #d64545;
    background: #fff2f2;
    color: #9f1d1d !important;
    font-weight: 700;
}

.ramg-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.ramg-tab {
    background: #f1f5f9;
    color: #1e293b !important;
}

.ramg-tab.is-active {
    background: #d64545;
    color: #fff !important;
    font-weight: 700;
}

.ramg-placeholder {
    color: #64748b !important;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 12px;
}

.ramg-notice {
    min-height: 1.5em;
    margin: 10px 0 0;
    color: #b42318 !important;
    font-weight: 700;
}

.ramg-check {
    margin-top: 18px;
    background: #fff8f8;
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid #ffd6d6;
}

.ramg-check ul {
    margin: 8px 0 0 1.2em;
    padding: 0;
}

.ramg-check li {
    margin-bottom: 6px;
    line-height: 1.7;
    color: #222 !important;
}

@media (max-width: 840px) {
    .ramg-grid {
        grid-template-columns: 1fr;
    }

    .ramg-header,
    .ramg-card {
        padding: 18px;
    }

    #ramg_result {
        min-height: 320px;
    }
}