/* =========================================================
   멀티맨 통합신청 화면 디자인 보정
   적용 대상: /request.php?focus=service
   기존 기능은 유지하고 화면/모바일 레이아웃만 정리
========================================================= */

:root {
    --mm-blue: #1f5eff;
    --mm-blue-dark: #123a91;
    --mm-navy: #0f2b59;
    --mm-yellow: #ffd43b;
    --mm-yellow-dark: #eab308;
    --mm-bg: #f4f7fb;
    --mm-card: #ffffff;
    --mm-line: #e5eaf2;
    --mm-text: #111827;
    --mm-sub: #64748b;
    --mm-muted: #94a3b8;
    --mm-red: #dc2626;
    --mm-green: #16a34a;
    --mm-radius-lg: 24px;
    --mm-radius-md: 16px;
    --mm-shadow: 0 16px 42px rgba(15, 23, 42, .07);
    --mm-soft-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

/* 전체 배경 */
body {
    background: var(--mm-bg);
}

/* request.php 전용 화면 폭 정리 */
.request-page,
.mm-request-page,
.mm-page,
.request-wrap,
.mm-wrap,
main.request,
main.mm-request,
#requestPage,
#mmRequestPage {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* 화면 안쪽 여백 */
.request-page,
.mm-request-page,
.mm-page,
.request-wrap,
.mm-wrap {
    padding-left: 18px;
    padding-right: 18px;
}

/* 상단 타이틀/안내 영역 */
.request-hero,
.mm-request-hero,
.mm-hero,
.request-title-area,
.mm-title-area {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(255, 212, 59, .45), transparent 34%),
        linear-gradient(135deg, var(--mm-navy), var(--mm-blue));
    color: #fff;
    padding: 34px 28px;
    margin: 22px auto 18px;
    box-shadow: 0 18px 46px rgba(31, 94, 255, .18);
}

.request-hero h1,
.mm-request-hero h1,
.mm-hero h1,
.request-title-area h1,
.mm-title-area h1 {
    margin: 0;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 950;
    letter-spacing: -.055em;
}

.request-hero p,
.mm-request-hero p,
.mm-hero p,
.request-title-area p,
.mm-title-area p {
    max-width: 760px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: 15px;
    line-height: 1.7;
    font-weight: 750;
}

/* 카드 공통 */
.mm-card,
.request-card,
.form-card,
.step-card,
.customer-card,
.service-card,
.cart-card,
.summary-card,
section[class*="card"],
div[class*="card"] {
    border-color: var(--mm-line);
}

/* request 화면에서 카드처럼 보여야 하는 박스 */
.mm-section,
.mm-form-section,
.mm-customer-section,
.mm-service-section,
.mm-cart-section,
.mm-result-section,
.request-section,
.request-box,
.request-panel,
.form-section,
.input-section {
    background: var(--mm-card);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-lg);
    box-shadow: var(--mm-shadow);
    padding: 24px;
    margin-bottom: 18px;
}

/* 섹션 제목 */
.mm-section h2,
.mm-form-section h2,
.mm-customer-section h2,
.mm-service-section h2,
.mm-cart-section h2,
.request-section h2,
.request-box h2,
.request-panel h2,
.form-section h2,
.input-section h2 {
    margin-top: 0;
    margin-bottom: 14px;
    color: var(--mm-text);
    font-size: 21px;
    font-weight: 950;
    letter-spacing: -.04em;
}

/* 작은 설명 */
.mm-section p,
.request-section p,
.request-box p,
.request-panel p,
.form-section p,
.input-section p,
.mm-help,
.help-text,
.form-help,
.field-help {
    color: var(--mm-sub);
    font-size: 13px;
    line-height: 1.65;
    font-weight: 750;
}

/* 입력 폼 그리드 */
.mm-form-grid,
.request-form-grid,
.form-grid,
.customer-grid,
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* 라벨 */
label,
.mm-label,
.form-label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 950;
}

/* input/select/textarea 통일 */
.mm-input,
.mm-select,
.mm-textarea,
.request-input,
.request-select,
.request-textarea,
input[type="text"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="email"],
select,
textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #fff;
    color: var(--mm-text);
    font-size: 15px;
    font-weight: 750;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.mm-input,
.mm-select,
.request-input,
.request-select,
input[type="text"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="email"],
select {
    min-height: 48px;
    padding: 0 13px;
}

.mm-textarea,
.request-textarea,
textarea {
    min-height: 110px;
    padding: 13px;
    line-height: 1.65;
    resize: vertical;
}

.mm-input:focus,
.mm-select:focus,
.mm-textarea:focus,
.request-input:focus,
.request-select:focus,
.request-textarea:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--mm-blue);
    box-shadow: 0 0 0 4px rgba(31, 94, 255, .11);
}

/* 날짜/시간 영역 */
#preferredDate,
#preferredTime,
#preferred_date,
#preferred_time,
#schedule_date,
#schedule_time,
#ifc_preferred_date,
#ifc_preferred_time {
    background-color: #fff;
}

/* 버튼 공통 */
.mm-btn,
.request-btn,
button,
input[type="submit"],
.btn {
    min-height: 44px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.mm-btn:hover,
.request-btn:hover,
button:hover,
.btn:hover {
    transform: translateY(-1px);
}

/* 주요 버튼 */
.mm-btn-primary,
.request-btn-primary,
button[type="submit"],
input[type="submit"],
.primary,
.btn-primary {
    border: 1px solid var(--mm-yellow-dark);
    background: var(--mm-yellow);
    color: #111827;
    box-shadow: 0 10px 22px rgba(234, 179, 8, .18);
}

/* 보조 버튼 */
.mm-btn-secondary,
.request-btn-secondary,
.secondary,
.btn-secondary {
    border: 1px solid #dbe3ee;
    background: #fff;
    color: #334155;
}

/* 파란 버튼 */
.mm-btn-blue,
.request-btn-blue,
.btn-blue {
    border: 1px solid var(--mm-blue);
    background: var(--mm-blue);
    color: #fff;
}

/* 작업선택 큰 영역 */
#mmCartServiceType,
#mmCartServiceOption,
#mmCartExtraOption,
#mmCartProduct {
    min-height: 50px;
}

/* 작업선택 카드형 정리 */
.mm-cart,
.mm-cart-wrap,
.mm-cart-box,
.mm-work-select,
.work-select,
.service-select-area,
.extra-select-area {
    background: #fff;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-lg);
    box-shadow: var(--mm-soft-shadow);
}

/* 작업 선택 내부 줄 간격 */
.mm-cart-row,
.mm-work-row,
.work-row,
.service-row,
.extra-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

/* 작업추가 버튼 */
#mmCartAddBasic,
#mmCartAddExtra,
#basicWorkAddBtn,
#extraWorkAddBtn,
button[id*="Add"],
button[id*="add"] {
    white-space: nowrap;
}

/* 선택된 작업/요약 테이블 */
.mm-cart-list,
.cart-list,
.selected-list,
.summary-list,
.request-summary,
.estimate-summary {
    border: 1px solid var(--mm-line);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.mm-cart-item,
.cart-item,
.selected-item,
.summary-item {
    border-bottom: 1px solid #edf2f7;
    padding: 14px;
}

.mm-cart-item:last-child,
.cart-item:last-child,
.selected-item:last-child,
.summary-item:last-child {
    border-bottom: 0;
}

/* 예상금액 강조 */
.total-price,
.estimate-total,
.mm-total,
.request-total,
#totalAmount,
#estimateTotal,
#mmCartTotal {
    color: var(--mm-blue-dark);
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -.035em;
}

/* 안내/경고 */
.mm-alert,
.request-alert,
.alert,
.notice,
.warning,
.error-message,
.success-message {
    border-radius: 16px;
    padding: 13px 15px;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 850;
}

.mm-alert.info,
.notice,
.info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.mm-alert.warn,
.warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.mm-alert.error,
.error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.mm-alert.success,
.success-message {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #166534;
}

/* 개인정보 동의 영역 */
.privacy-box,
.agree-box,
.consent-box,
.mm-consent,
.request-consent {
    background: #f8fafc;
    border: 1px solid var(--mm-line);
    border-radius: 18px;
    padding: 15px;
}

.privacy-box label,
.agree-box label,
.consent-box label,
.mm-consent label,
.request-consent label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.55;
}

/* 신청내용 확인/하단 버튼 영역 */
.request-actions,
.mm-actions,
.form-actions,
.submit-actions,
.bottom-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* 단계 표시 */
.step-list,
.mm-step-list,
.request-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.step-item,
.mm-step,
.request-step {
    border: 1px solid var(--mm-line);
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--mm-soft-shadow);
}

.step-item strong,
.mm-step strong,
.request-step strong {
    display: block;
    color: var(--mm-text);
    font-size: 14px;
    font-weight: 950;
}

.step-item span,
.mm-step span,
.request-step span {
    display: block;
    margin-top: 5px;
    color: var(--mm-sub);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 760;
}

/* 메인 홈페이지와 비슷한 CTA */
.request-cta,
.mm-request-cta {
    border-radius: 26px;
    background:
        radial-gradient(circle at right top, rgba(255, 212, 59, .36), transparent 35%),
        linear-gradient(135deg, #102a56, #1f5eff);
    color: #fff;
    padding: 24px;
    margin-top: 20px;
}

.request-cta h2,
.mm-request-cta h2 {
    color: #fff;
}

.request-cta p,
.mm-request-cta p {
    color: rgba(255,255,255,.84);
}

/* PC에서 너무 넓은 폼 제한 */
.form-narrow,
.mm-form-narrow {
    max-width: 880px;
}

/* =======================
   모바일 최적화
======================= */
@media (max-width: 900px) {
    .request-page,
    .mm-request-page,
    .mm-page,
    .request-wrap,
    .mm-wrap {
        padding-left: 14px;
        padding-right: 14px;
    }

    .mm-section,
    .mm-form-section,
    .mm-customer-section,
    .mm-service-section,
    .mm-cart-section,
    .mm-result-section,
    .request-section,
    .request-box,
    .request-panel,
    .form-section,
    .input-section {
        padding: 18px;
        border-radius: 22px;
    }

    .mm-form-grid,
    .request-form-grid,
    .form-grid,
    .customer-grid,
    .info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .step-list,
    .mm-step-list,
    .request-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mm-cart-row,
    .mm-work-row,
    .work-row,
    .service-row,
    .extra-row {
        grid-template-columns: 1fr;
    }

    #mmCartAddBasic,
    #mmCartAddExtra,
    #basicWorkAddBtn,
    #extraWorkAddBtn,
    button[id*="Add"],
    button[id*="add"] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    body {
        background: #f6f8fc;
    }

    .request-page,
    .mm-request-page,
    .mm-page,
    .request-wrap,
    .mm-wrap {
        padding-left: 10px;
        padding-right: 10px;
    }

    .request-hero,
    .mm-request-hero,
    .mm-hero,
    .request-title-area,
    .mm-title-area {
        padding: 24px 18px;
        border-radius: 22px;
        margin-top: 12px;
    }

    .request-hero h1,
    .mm-request-hero h1,
    .mm-hero h1,
    .request-title-area h1,
    .mm-title-area h1 {
        font-size: 25px;
    }

    .request-hero p,
    .mm-request-hero p,
    .mm-hero p,
    .request-title-area p,
    .mm-title-area p {
        font-size: 13px;
    }

    .mm-section,
    .mm-form-section,
    .mm-customer-section,
    .mm-service-section,
    .mm-cart-section,
    .mm-result-section,
    .request-section,
    .request-box,
    .request-panel,
    .form-section,
    .input-section {
        padding: 15px;
        border-radius: 20px;
        margin-bottom: 14px;
    }

    .mm-section h2,
    .mm-form-section h2,
    .mm-customer-section h2,
    .mm-service-section h2,
    .mm-cart-section h2,
    .request-section h2,
    .request-box h2,
    .request-panel h2,
    .form-section h2,
    .input-section h2 {
        font-size: 18px;
    }

    .mm-input,
    .mm-select,
    .request-input,
    .request-select,
    input[type="text"],
    input[type="tel"],
    input[type="date"],
    input[type="number"],
    input[type="email"],
    select {
        min-height: 46px;
        font-size: 14px;
        border-radius: 13px;
    }

    textarea,
    .mm-textarea,
    .request-textarea {
        font-size: 14px;
        border-radius: 13px;
    }

    .request-actions,
    .mm-actions,
    .form-actions,
    .submit-actions,
    .bottom-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .request-actions .mm-btn,
    .mm-actions .mm-btn,
    .form-actions .mm-btn,
    .submit-actions .mm-btn,
    .bottom-actions .mm-btn,
    .request-actions button,
    .mm-actions button,
    .form-actions button,
    .submit-actions button,
    .bottom-actions button,
    .request-actions a,
    .mm-actions a,
    .form-actions a,
    .submit-actions a,
    .bottom-actions a {
        width: 100%;
    }

    .step-list,
    .mm-step-list,
    .request-steps {
        grid-template-columns: 1fr;
    }

    .total-price,
    .estimate-total,
    .mm-total,
    .request-total,
    #totalAmount,
    #estimateTotal,
    #mmCartTotal {
        font-size: 19px;
    }

    /* 모바일에서 작업선택 select가 화면 밖으로 번지지 않게 */
    #mmCartServiceType,
    #mmCartServiceOption,
    #mmCartExtraOption,
    #mmCartProduct,
    #preferredDate,
    #preferredTime {
        width: 100%;
        max-width: 100%;
    }

    /* 모바일 버튼 터치영역 */
    button,
    .mm-btn,
    .request-btn,
    .btn {
        min-height: 46px;
    }
}

/* 매우 작은 화면 */
@media (max-width: 380px) {
    .request-page,
    .mm-request-page,
    .mm-page,
    .request-wrap,
    .mm-wrap {
        padding-left: 8px;
        padding-right: 8px;
    }

    .mm-section,
    .request-section,
    .request-box,
    .request-panel,
    .form-section,
    .input-section {
        padding: 13px;
    }

    .request-hero,
    .mm-request-hero,
    .mm-hero {
        padding: 20px 14px;
    }
}