.diary-gate,
.diary-gate *,
.diary-gate *::before,
.diary-gate *::after {
    box-sizing: border-box;
}

.diary-gate {
    max-width: 620px;
    width: 100%;
    margin: 0 auto 25px auto;
    text-align: start;
    line-height: 1.5;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #2d232e;
}

.modal-container.diary-gate {
    max-height: none;
    overflow: visible;
}

    .diary-gate .modal-container-body {
        max-height: none;
        overflow: visible;
    }

    .diary-gate .gate-info {
        font-size: 15px;
        color: #555;
        margin: 0 0 14px 0;
    }

    .diary-gate .gate-error {
        font-size: 15px;
        color: #b00020;
        font-weight: 600;
        margin: 0 0 14px 0;
    }

    .diary-gate .gate-question {
        display: block;
        border: 0;
        padding: 0;
        margin: 0 0 18px 0;
        min-width: 0;
    }

        .diary-gate .gate-question legend {
            display: block;
            float: none;
            width: 100%;
            padding: 0;
            margin: 0 0 8px 0;
            border: 0;
            font-size: 17px;
            font-weight: 700;
            line-height: 1.4;
            color: #2d232e;
        }

    .diary-gate .gate-option {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        padding: 10px 12px;
        margin: 0 0 6px 0;
        border: 1px solid #e3dce2;
        border-radius: 10px;
        background: #fff;
        cursor: pointer;
        font-size: 15px;
        line-height: 1.4;
        color: #2d232e;
        transition: background-color 0.12s ease, border-color 0.12s ease;
    }

        .diary-gate .gate-option:hover {
            background-color: var(--t-gate-hover);
        }

        .diary-gate .gate-option.selected {
            border-color: var(--t-gate);
            background-color: var(--t-gate-soft);
        }

        .diary-gate .gate-option input[type="radio"] {
            margin: 3px 0 0 0;
            accent-color: var(--t-gate);
            flex-shrink: 0;
            width: 16px;
            height: 16px;
        }

        .diary-gate .gate-option span {
            flex: 1;
            font-size: 15px;
        }

    .diary-gate .gate-progress {
        margin-right: auto;
        font-size: 14px;
        color: #777;
    }

    .diary-gate .gate-button {
        width: auto;
        flex: 0 0 auto;
        padding: 12px 22px;
        border-radius: 8px;
        border: 0;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        background-color: var(--t-gate);
        color: #fff;
        transition: background-color 0.15s ease, opacity 0.15s ease;
    }

        .diary-gate .gate-button:hover:not(:disabled) {
            background-color: var(--t-gate-dark);
        }

        .diary-gate .gate-button:disabled {
            background-color: var(--t-gate);
            color: #fff;
            opacity: 0.45;
            cursor: not-allowed;
        }

@media (max-width: 500px) {
    .diary-gate .modal-container-title {
        font-size: 1.25rem;
    }

    .diary-gate .gate-question legend {
        font-size: 16px;
    }

    .diary-gate .modal-container-header,
    .diary-gate .modal-container-body,
    .diary-gate .modal-container-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
}