/* =========================================================================
   결혼정보 신청모듈 스타일 (테마 비의존 / 독립)
   - CSS 전용 개선: 마크업·name·token·로직 불변, 기존 클래스명만 사용
   ========================================================================= */

:root {
    --ma-primary:        #4338ca;   /* 메인 인디고 */
    --ma-primary-strong: #3730a3;
    --ma-primary-soft:   #eef1fe;
    --ma-accent:         #e11d63;   /* 포인트 로즈 */
    --ma-ink:            #1f2330;   /* 본문 텍스트 */
    --ma-ink-soft:       #4a5160;
    --ma-muted:          #8a90a0;   /* 보조 텍스트 */
    --ma-line:           #e4e7ee;   /* 경계선 */
    --ma-line-strong:    #cfd4df;
    --ma-bg:             #f5f6fa;   /* 페이지 배경 */
    --ma-card:           #ffffff;
    --ma-ok:             #1f9d55;
    --ma-warn:           #e03131;
    --ma-radius:         14px;
    --ma-radius-sm:      9px;
    --ma-shadow:         0 1px 2px rgba(20,24,40,.04), 0 8px 24px rgba(20,24,40,.06);
    --ma-shadow-sm:      0 1px 2px rgba(20,24,40,.06);
    --ma-focus:          0 0 0 3px rgba(67,56,202,.18);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ma-bg);
    color: var(--ma-ink);
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                 "Malgun Gothic", "맑은 고딕", "Noto Sans KR", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;
}

/* 네이티브 컨트롤 강조색 */
input[type=radio], input[type=checkbox] { accent-color: var(--ma-primary); }
::selection { background: rgba(67,56,202,.16); }

/* ---------- 레이아웃 ---------- */
.ma-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 28px 20px 56px;
}

.ma-header {
    margin-bottom: 22px;
    padding: 26px 28px;
    border-radius: var(--ma-radius);
    background: linear-gradient(120deg, var(--ma-primary) 0%, #5b4bd6 55%, #7c4dd1 100%);
    color: #fff;
    box-shadow: var(--ma-shadow);
}
.ma-header h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.ma-main { display: block; }

.ma-footer {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--ma-line);
    color: var(--ma-muted);
    font-size: 12.5px;
    text-align: center;
}

/* ---------- 진행 단계바 ---------- */
.ma-progress ol {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0 0 20px;
}
.ma-progress li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 8px;
    background: #eceef4;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ma-muted);
    transition: all .2s ease;
}
.ma-progress li .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #c8cdda;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}
.ma-progress li.on {
    background: var(--ma-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(67,56,202,.28);
}
.ma-progress li.on .num { background: #fff; color: var(--ma-primary); }
.ma-progress li.done {
    background: #e7f6ec;
    color: var(--ma-ok);
    border-color: #cdeed8;
}
.ma-progress li.done .num { background: var(--ma-ok); }
/* 현재 단계(.on) 이후의 모든 단계는 항상 '미래(회색)' — 잘못 적용된 .done(초록)을 무력화.
   현재 단계 이전 단계는 항상 .done 이 붙어 완료(초록)로 정확히 표시된다. */
.ma-progress li.on ~ li {
    background: #eceef4;
    color: var(--ma-muted);
    border-color: transparent;
    box-shadow: none;
}
.ma-progress li.on ~ li .num { background: #c8cdda; color: #fff; }
.ma-progress .label { white-space: nowrap; }

/* ---------- 섹션(카드) ---------- */
.ma-section {
    margin-bottom: 18px;
}
.ma-section h2 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 2px 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ma-line);
    position: relative;
}
.ma-section h2::before {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 54px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ma-primary), var(--ma-accent));
}
.ma-section h2 small { font-weight: 500; font-size: 13px; color: var(--ma-muted); }
.ma-section h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 22px 0 10px;
    color: var(--ma-primary-strong);
}
.ma-narrow { margin-left: auto; margin-right: auto; }
.ma-center { text-align: center; }

/* ---------- 필드 그리드 ---------- */
.ma-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 22px;
}
.ma-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ma-field.ma-col2 { grid-column: 1 / -1; }
.ma-field > label {
    font-weight: 600;
    font-size: 13px;
    color: var(--ma-ink-soft);
    letter-spacing: -.01em;
}
.req { color: var(--ma-accent); font-weight: 700; margin-left: 2px; }

/* ---------- 입력 컨트롤 ---------- */
.ma-field input[type=text],
.ma-field input[type=email],
.ma-field input[type=password],
.ma-field input[type=number],
.ma-field select,
.ma-field textarea {
    padding: 10px 12px;
    border: 1px solid var(--ma-line-strong);
    border-radius: var(--ma-radius-sm);
    background: #fff;
    color: var(--ma-ink);
    font-size: 14.5px;
    font-family: inherit;
    line-height: 1.4;
    max-width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ma-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a90a0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.ma-field input:focus,
.ma-field select:focus,
.ma-field textarea:focus {
    outline: none;
    border-color: var(--ma-primary);
    box-shadow: var(--ma-focus);
}
.ma-field input::placeholder { color: #b3b8c4; }

.ma-field input.w { width: 100%; }
.ma-field input.s { width: 64px; }

/* 생년월일: 년/월/일/시/만나이/띠 가로 정렬 (마크업 불변, 컨테이너만 grid화) */
.ma-field:has(> input[name="birth_y"]) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px 8px;
    align-items: center;
}
.ma-field:has(> input[name="birth_y"]) > label,
.ma-field:has(> input[name="birth_y"]) > .ma-radio-group {
    grid-column: 1 / -1;   /* 라벨과 양/음력 라디오는 한 줄 전체 차지 */
}
.ma-field:has(> input[name="birth_y"]) > input.s {
    width: 100%;           /* 고정폭(64px) 해제 → grid 셀이 폭 제어 */
}
/* 자동계산 입력(만나이·띠)은 읽기전용 느낌의 회색 */
.ma-auto { background: #f3f4f8 !important; color: var(--ma-ink-soft); }

/* ---------- 그룹(fieldset) ---------- */
.ma-group {
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius-sm);
    padding: 16px 18px 18px;
    margin: 0 0 16px;
    background: #fcfcfe;
}
/* 문장형 입력: "나는 [ ]남 [ ]녀 중 [ ]째 입니다" 한 줄 */
.ma-sentence {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ma-sentence span { font-weight: 600; color: var(--ma-ink-soft); }
.ma-sentence input.s { width: 54px; }

/* 주소 4분할: 반응형 그리드 한 줄 */
.ma-addr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
}
.ma-addr > label { grid-column: 1 / -1; }
.ma-addr > input { width: 100%; }

/* ---------- 라디오 / 체크 ---------- */
.ma-radio-group, .ma-check-group, .ma-pref {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    align-items: center;
}
.ma-radio, .ma-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 400;
    font-size: 13.5px;
    color: var(--ma-ink-soft);
    white-space: nowrap;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 6px;
    transition: color .12s ease;
}
.ma-radio:hover, .ma-check:hover { color: var(--ma-primary); }
.ma-radio input, .ma-check input, .ma-pref input { cursor: pointer; margin: 0; }

/* ---------- 테이블 ---------- */
.ma-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 12px 0;
    font-size: 13.5px;
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius-sm);
    overflow: hidden;
}
.ma-table th, .ma-table td {
    border-bottom: 1px solid var(--ma-line);
    border-right: 1px solid var(--ma-line);
    padding: 9px 8px;
    text-align: center;
    vertical-align: middle;
}
.ma-table tr > th:last-child, .ma-table tr > td:last-child { border-right: 0; }
.ma-table tbody tr:last-child > th, .ma-table tbody tr:last-child > td { border-bottom: 0; }
.ma-table thead th {
    background: #f3f4f9;
    color: var(--ma-ink-soft);
    font-weight: 700;
    border-bottom: 1px solid var(--ma-line-strong);
}
.ma-table tbody th {
    background: #fafbfd;
    font-weight: 600;
    color: var(--ma-ink-soft);
    white-space: nowrap;
}
.ma-table tbody tr:hover td { background: #fbfbfe; }
.ma-table input.t {
    width: 100%;
    min-width: 58px;
    padding: 7px 8px;
    border: 1px solid var(--ma-line-strong);
    border-radius: 7px;
    font-size: 13.5px;
}
.ma-table input.t:focus { outline: none; border-color: var(--ma-primary); box-shadow: var(--ma-focus); }
.ma-table input.s { min-width: 42px; }
.ma-table select {
    padding: 6px 8px;
    border: 1px solid var(--ma-line-strong);
    border-radius: 7px;
    font-size: 13px;
    background: #fff;
}

/* 희망상대 매트릭스 — 섹션별 카드로 구분, 소제목 강조, 라디오 간격 확대 */
.ma-ideal-block {
    margin: 18px 0;
    padding: 14px 14px 16px;
    background: #f7f8fc;
    border-radius: var(--ma-radius-sm);
}
.ma-ideal-block h3 {
    margin: 0 0 12px;
    padding-left: 11px;
    border-left: 3px solid var(--ma-primary);
    font-size: 14.5px;
    line-height: 1.3;
    color: var(--ma-primary-strong);
}
.ma-ideal-block .ma-table { margin: 0; background: #fff; }
.ma-ideal th { width: 46%; text-align: left; font-weight: 500; color: var(--ma-ink); background: #fafbfd; }
.ma-ideal td { text-align: left; padding-left: 12px; }

/* 기본(폴백): 일반 라디오 그룹 */
.ma-pref { gap: 8px 18px; }
.ma-pref label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--ma-ink-soft);
    cursor: pointer;
}
.ma-pref label:hover { color: var(--ma-primary); }

/* :has 지원 브라우저 → 세그먼트(pill) 컨트롤. 값/이름/텍스트 불변, 표시만 변경 */
@supports selector(:has(*)) {
    .ma-pref {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 0;
        border: 1px solid var(--ma-line-strong);
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }
    .ma-pref label {
        margin: 0;
        padding: 7px 13px;
        border-right: 1px solid var(--ma-line);
        border-radius: 0;
        white-space: nowrap;
        transition: background .12s ease, color .12s ease;
    }
    .ma-pref label:last-child { border-right: 0; }
    /* 라디오 동그라미 숨김(클릭·포커스·접근성 유지) */
    .ma-pref input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: 0;
    }
    .ma-pref label:hover { background: #f1f3f9; color: var(--ma-ink); }
    /* 선택 상태 색상 구분: 희망(1)=초록, 꼭원함(2)=인디고, 비희망(3)=회색 */
    .ma-pref label:has(input[value="1"]:checked) { background: var(--ma-ok); color: #fff; }
    .ma-pref label:has(input[value="2"]:checked) { background: var(--ma-primary); color: #fff; }
    .ma-pref label:has(input[value="3"]:checked) { background: #8a90a0; color: #fff; }
    .ma-pref label:has(input:focus-visible) { box-shadow: inset 0 0 0 2px rgba(67,56,202,.35); }
}

/* ---------- 안내 박스 / 서약 ---------- */
.ma-box {
    background: #f7f8fc;
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius-sm);
    padding: 14px 16px;
    margin: 12px 0;
}
.ma-box-pw { background: #fff8e6; border-color: #ffe39a; }
.ma-box-warn { background: #fff1f1; border-color: #ffc9c9; color: #b42318; }
.ma-help { color: var(--ma-muted); font-size: 12.5px; line-height: 1.55; }
.ma-small { font-size: 11.5px; }
.ma-oath {
    background: #f7f8fc;
    border: 1px solid var(--ma-line);
    padding: 16px 18px;
    border-radius: var(--ma-radius-sm);
    font-size: 13.5px;
    color: var(--ma-ink-soft);
    line-height: 1.7;
}

/* ---------- 동의 ---------- */
.ma-agree { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.ma-agree-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--ma-line-strong);
    border-radius: var(--ma-radius-sm);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ma-agree-item:hover { border-color: var(--ma-primary); background: var(--ma-primary-soft); }
.ma-agree-item input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; }
.ma-agree-item span { font-size: 14px; color: var(--ma-ink); }

/* ---------- 버튼 / 액션 ---------- */
.ma-actions { display: flex; justify-content: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.ma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 26px;
    border: 1px solid transparent;
    border-radius: var(--ma-radius-sm);
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ma-btn:active { transform: translateY(1px); }
.ma-btn:focus-visible { outline: none; box-shadow: var(--ma-focus); }
.ma-btn-main {
    background: var(--ma-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(67,56,202,.24);
}
.ma-btn-main:hover { background: var(--ma-primary-strong); box-shadow: 0 8px 20px rgba(67,56,202,.32); }
.ma-btn-sub {
    background: #eef0f5;
    color: var(--ma-ink-soft);
    border-color: var(--ma-line);
}
.ma-btn-sub:hover { background: #e4e7ef; color: var(--ma-ink); }
.ma-btn-lg { padding: 15px 34px; font-size: 16px; border-radius: 11px; }
.ma-add-row {
    margin: 6px 0 14px;
    padding: 8px 16px;
    font-size: 13px;
    background: #fff;
    border: 1px dashed var(--ma-line-strong);
    color: var(--ma-primary);
    border-radius: 8px;
}
.ma-add-row:hover { border-color: var(--ma-primary); background: var(--ma-primary-soft); }

/* ---------- 랜딩 / 완료 ---------- */
.ma-landing { display: flex; gap: 14px; justify-content: center; margin: 24px 0; flex-wrap: wrap; }
.ma-bignum {
    font-size: 19px;
    margin: 16px 0;
    padding: 14px 18px;
    background: var(--ma-primary-soft);
    border-radius: var(--ma-radius-sm);
    color: var(--ma-primary-strong);
}
.ma-bignum b { letter-spacing: .04em; }

/* ---------- 반응형 ---------- */
@media (max-width: 760px) {
    .ma-wrap { padding: 18px 14px 44px; }
    .ma-header { padding: 22px 20px; }
    .ma-header h1 { font-size: 19px; }
    .ma-grid { grid-template-columns: 1fr; gap: 14px; }
    .ma-section { padding: 18px 16px 20px; }
    .ma-progress ol { gap: 5px; }
    .ma-progress li { padding: 9px 6px; }
    .ma-progress .label { display: none; }
    .ma-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .ma-landing { flex-direction: column; }
    .ma-btn-lg { width: 100%; }

    /* 생년월일: 모바일은 3칸 2줄(년/월/일 · 시/만나이/띠) */
    .ma-field:has(> input[name="birth_y"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* 희망상대: 모바일도 세그먼트(pill) 한 줄 유지 → 항목당 1줄로 압축 */
    .ma-ideal-block { padding: 12px 12px 14px; margin: 14px 0; }
    /* 2열 매트릭스는 가로 스크롤 불필요 → 풀폭 고정 테이블, 세그먼트가 한 화면에 맞도록 */
    .ma-table.ma-ideal { display: table; width: 100%; table-layout: fixed; overflow: visible; white-space: normal; }
    .ma-ideal th { width: 36%; padding: 8px 6px 8px 8px; white-space: normal; word-break: keep-all; line-height: 1.35; }
    .ma-ideal td { padding: 6px 6px 6px 4px; }
    .ma-pref label { padding: 6px 0; font-size: 12px; flex: 1 1 0; text-align: center; }

    /* 그룹/주소/문장형 모바일 보정 */
    .ma-group { padding: 14px 13px 15px; }
    .ma-addr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ma-sentence input.s { width: 48px; }
}

/* :has 미지원 폴백 환경에서만 모바일 pref 세로 배치(가독성 확보) */
@media (max-width: 760px) {
    @supports not (selector(:has(*))) {
        .ma-pref { flex-direction: column; align-items: flex-start; gap: 7px; }
    }
}

/* =========================================================================
   오늘의 연인 테마 연동
   - 그누보드 기본 930px 콘텐츠/우측 사이드바 레이아웃 해제
   - 공통 헤더와 동일한 1200px 정렬선 및 브랜드 컬러 적용
   ========================================================================= */

:root {
    --ma-primary:        #a8884c;
    --ma-primary-strong: #80652f;
    --ma-primary-soft:   #f7f1e6;
    --ma-accent:         #c9a96a;
    --ma-ink:            #1b1813;
    --ma-ink-soft:       #5f594f;
    --ma-muted:          #8a8378;
    --ma-line:           #e8e3d8;
    --ma-line-strong:    #d8d0c2;
    --ma-bg:             #ffffff;
    --ma-card:           #ffffff;
    --ma-radius:         8px;
    --ma-radius-sm:      4px;
    --ma-shadow:         0 14px 38px rgba(30, 24, 12, .06);
    --ma-shadow-sm:      0 4px 18px rgba(30, 24, 12, .035);
    --ma-focus:          0 0 0 3px rgba(201, 169, 106, .18);
}

body {
    background: var(--ma-bg);
    color: var(--ma-ink);
    font-family: var(--sans, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif);
}

/* 이 스타일시트는 match_apply 화면에서만 불러오므로 기본 서브페이지 폭을 안전하게 재정의한다. */
#wrapper {
    min-width: 0;
}
#container_wr {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
#container {
    float: none;
    width: 100%;
    min-height: 500px;
    margin: 0;
    padding: 38px 0 88px;
}
#aside {
    display: none !important;
}
#container_title {
    margin: 0 0 22px;
    color: var(--ma-ink);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 700;
    letter-spacing: -.03em;
}
#container_title span {
    display: block;
    margin: 0;
    line-height: 1.35;
}

.ma-wrap {
    max-width: 1200px;
    padding: 38px 24px 88px;
}

.ma-progress ol {
    gap: 10px;
    margin-bottom: 24px;
}
.ma-progress li {
    min-height: 48px;
    padding: 10px 12px;
    background: #f3f1ed;
    color: #8a8378;
    border-color: #eee9e0;
    border-radius: 4px;
}
.ma-progress li .num {
    background: #d4cec3;
}
.ma-progress li.on {
    color: #1a1408;
    background: var(--ma-accent);
    border-color: var(--ma-accent);
    box-shadow: 0 8px 20px rgba(168, 136, 76, .18);
}
.ma-progress li.on .num {
    color: var(--ma-primary-strong);
}
.ma-progress li.done {
    color: var(--ma-primary-strong);
    background: var(--ma-primary-soft);
    border-color: #e6d7bb;
}
.ma-progress li.done .num {
    background: var(--ma-primary);
}


.ma-section h2 {
    margin-top: 0;
    padding-bottom: 15px;
    font-size: clamp(18px, 1.8vw, 22px);
}
.ma-section h2::before {
    width: 46px;
    height: 2px;
    background: var(--ma-accent);
}
.ma-section h3 {
    color: var(--ma-primary-strong);
}
.ma-grid {
    gap: 18px 28px;
}
.ma-field {
    gap: 8px;
}
.ma-field > label {
    color: var(--ma-ink-soft);
    font-size: 13.5px;
}
.req {
    color: #b24b42;
}

.ma-field input[type=text],
.ma-field input[type=email],
.ma-field input[type=password],
.ma-field input[type=number],
.ma-field input[type=tel],
.ma-field input[type=url],
.ma-field select,
.ma-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--ma-line-strong);
    border-radius: 4px;
    background-color: #fff;
    color: var(--ma-ink);
    font: inherit;
    font-size: 14.5px;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ma-field input:hover,
.ma-field select:hover,
.ma-field textarea:hover {
    border-color: #bcae96;
}
.ma-field input:focus,
.ma-field select:focus,
.ma-field textarea:focus {
    border-color: var(--ma-accent);
}

.ma-group {
    padding: 24px 22px 26px;
    margin-bottom: 20px;
    border-color: var(--ma-line);
    border-radius: 6px;
    background: #fdfcfb;
}
.ma-box {
    border-radius: 6px;
    background: #faf8f4;
}
.ma-box-pw {
    background: #fffaf0;
    border-color: #e6d09f;
}
.ma-auto {
    background: #f3f1ed !important;
}

.ma-table,
.ma-table input.t,
.ma-table select {
    border-radius: 4px;
}
.ma-table thead th {
    background: #f4f1eb;
}
.ma-ideal-block {
    background: #faf8f4;
    border-radius: 6px;
}
.ma-ideal-block h3 {
    border-left-color: var(--ma-accent);
}

.ma-radio:hover,
.ma-check:hover,
.ma-pref label:hover {
    color: var(--ma-primary-strong);
}
input[type=radio],
input[type=checkbox] {
    accent-color: var(--ma-primary);
}

.ma-btn {
    min-height: 46px;
    padding: 12px 28px;
    border-radius: 4px;
}
.ma-btn-main {
    color: #1a1408;
    background: var(--ma-accent);
    box-shadow: 0 7px 18px rgba(168, 136, 76, .16);
}
.ma-btn-main:hover {
    color: #fff;
    background: var(--ma-primary);
    box-shadow: 0 9px 22px rgba(128, 101, 47, .22);
}
.ma-btn-sub {
    color: var(--ma-ink-soft);
    background: #f5f2ed;
    border-color: var(--ma-line);
}
.ma-btn-sub:hover {
    background: #ece7de;
}
.ma-btn-lg {
    padding: 15px 34px;
    border-radius: 4px;
}

@media (max-width: 760px) {
    #container_wr {
        padding: 0 16px;
    }
    #container {
        padding: 26px 0 60px;
    }
    #container_title {
        margin-bottom: 18px;
    }
    .ma-wrap {
        padding: 26px 16px 60px;
    }
    .ma-section {
        padding: 22px 16px;
    }
    .ma-progress li {
        min-height: 42px;
        padding: 8px 5px;
    }
    .ma-group {
        padding: 19px 14px 21px;
    }
}

@media (max-width: 480px) {
    #container_wr {
        padding: 0 14px;
    }
    .ma-progress ol {
        gap: 5px;
    }
    .ma-progress li .num {
        width: 25px;
        height: 25px;
    }
}

/* ---------- 단계별 신청서 구성 ---------- */
.ma-section-head {
    margin-bottom: clamp(28px, 3.5vw, 42px);
}
.ma-section-head .ma-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--ma-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .18em;
}
.ma-section-head h2 {
    margin: 0 0 12px;
    padding-bottom: 16px;
}
.ma-section-head p {
    max-width: 760px;
    margin: 0;
    color: var(--ma-muted);
    font-size: 14.5px;
    line-height: 1.75;
}
.ma-section-head h2 + p {
    margin-top: 0;
}

.ma-form-block + .ma-form-block {
    margin-top: 22px;
}

.ma-subsection + .ma-subsection {
    margin-top: clamp(36px, 5vw, 58px);
    padding-top: clamp(30px, 4vw, 44px);
    border-top: 1px solid var(--ma-line);
}
.ma-subsection-title,
.ma-section .ma-subsection-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 18px;
    color: var(--ma-ink);
    font-size: 17px;
    font-weight: 700;
}
.ma-subsection > .ma-subsection-title:first-child {
    margin-top: 0;
}
.ma-subsection-title > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 29px;
    height: 23px;
    padding: 0 7px;
    color: #fff;
    background: var(--ma-primary);
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .05em;
}

.ma-table-wrap {
    width: 100%;
    margin: 14px 0 20px;
    overflow-x: auto;
    border: 1px solid var(--ma-line);
    border-radius: 4px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}
.ma-table-wrap .ma-table {
    display: table;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
.ma-table-wrap-wide .ma-table-wide {
    min-width: 1160px;
}
.ma-table-education {
    min-width: 860px;
}
.ma-table-wrap::-webkit-scrollbar {
    height: 8px;
}
.ma-table-wrap::-webkit-scrollbar-thumb {
    background: #d4cab9;
    border-radius: 999px;
}
.ma-table-wrap::-webkit-scrollbar-track {
    background: #f5f2ed;
}

.ma-inline-controls {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 360px;
}
.ma-inline-controls input {
    min-width: 0;
}
.ma-inline-controls span {
    flex: 0 0 auto;
    color: var(--ma-muted);
    font-size: 13.5px;
}
.ma-time-controls {
    max-width: 560px;
}
.ma-time-controls input {
    width: 120px;
}
.ma-select-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ma-ideal-grid {
    display: block;
    columns: 2;
    column-gap: 16px;
}
.ma-ideal-grid .ma-ideal-block {
    display: inline-block;
    width: 100%;
    min-width: 0;
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid var(--ma-line);
    background: #fdfcf9;
    break-inside: avoid;
    page-break-inside: avoid;
}
.ma-detail-grid {
    margin-top: clamp(30px, 4vw, 44px);
    padding-top: clamp(26px, 3vw, 36px);
    border-top: 1px solid var(--ma-line);
}

.ma-submit-notice {
    margin-bottom: 22px;
    padding: 17px 19px;
    border-left: 3px solid var(--ma-accent);
    background: #fffaf0;
}
.ma-submit-notice strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ma-ink);
    font-size: 14px;
}
.ma-submit-notice p {
    margin: 0;
    color: var(--ma-muted);
    font-size: 13.5px;
}
.ma-agree-item span b {
    color: var(--ma-primary-strong);
}

/* 메인 테마의 choice 컴포넌트와 같은 선택형 칩 */
.ma-radio,
.ma-check {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--ma-line-strong);
    border-radius: 4px;
    background: #fff;
    color: var(--ma-ink-soft);
}
.ma-radio:hover,
.ma-check:hover {
    border-color: var(--ma-accent);
    background: #fffaf0;
}
@supports selector(label:has(input:checked)) {
    .ma-radio:has(input:checked),
    .ma-check:has(input:checked) {
        color: var(--ma-primary-strong);
        border-color: var(--ma-accent);
        background: #fdf8ee;
        box-shadow: 0 0 0 2px rgba(201, 169, 106, .1);
        font-weight: 600;
    }
}

.ma-oath {
    padding: 20px 22px;
    border-left: 3px solid var(--ma-accent);
    background: #faf8f4;
}

@media (max-width: 900px) {
    .ma-ideal-grid {
        columns: 1;
    }
}

@media (max-width: 760px) {
    .ma-section-head {
        margin-bottom: 28px;
    }
    .ma-section-head p {
        font-size: 14px;
    }
    .ma-subsection-title,
    .ma-section .ma-subsection-title {
        font-size: 16px;
    }
    .ma-table-wrap .ma-table {
        white-space: nowrap;
    }
    .ma-select-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .ma-time-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        max-width: none;
    }
    .ma-time-controls input {
        width: 100%;
    }
    .ma-radio-group,
    .ma-check-group {
        gap: 7px;
    }
    .ma-radio,
    .ma-check {
        min-height: 36px;
        padding: 7px 10px;
        font-size: 13px;
    }
}