/*!
 * 외주관리신청 — 견적 신청 폼 + 비회원 결제 조회 (2026-08-30)
 *
 * ⛔ 이 파일은 `cmshom-site-services-v1.css` 를 «보완»한다(대체가 아니다).
 *    색·간격은 그쪽 `.svc-page` 의 CSS 변수를 그대로 쓴다 — 형제 6쪽과 톤이 갈리면 안 된다.
 * ⛔ 형제 페이지에 영향을 주지 않도록 선택자는 전부 `.oa-` 로 시작한다(`svc-` 규칙을 덮지 않는다).
 */

/* ══ 견적 신청 ═════════════════════════════════════════════════ */
.oa-apply{
    padding:104px 0;
    border-top:1px solid var(--svc-line);
    background:linear-gradient(180deg,#fff 0%,#fbfaf8 100%);
}
.oa-apply__grid{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:64px;
    align-items:start;
}
.oa-apply__intro h2{
    font-size:clamp(32px,3.6vw,46px);
    font-weight:700;
    line-height:1.16;
    letter-spacing:-.04em;
}
.oa-apply__intro > p{
    margin-top:22px;
    color:var(--svc-body);
    font-size:16.5px;
    line-height:1.85;
    letter-spacing:-.015em;
}
.oa-apply__intro strong{color:var(--svc-ink);font-weight:600}
.oa-apply__points{
    list-style:none;
    margin-top:30px;
    padding-top:24px;
    border-top:2px solid var(--svc-ink);
    display:grid;
    gap:0;
}
.oa-apply__points li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 0;
    border-bottom:1px solid var(--svc-line);
    font-size:15px;
    color:var(--svc-ink);
}
.oa-apply__points i{color:var(--svc-teal);font-size:17px}

/* ── 폼 본체 ─────────────────────────────────────────────── */
.oa-form{
    padding:38px;
    border:1px solid var(--svc-line);
    border-radius:4px;
    background:#fff;
    box-shadow:0 22px 60px -34px rgba(22,24,29,.32);
}
.oa-form__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    padding-bottom:22px;
    margin-bottom:28px;
    border-bottom:2px solid var(--svc-ink);
}
.oa-form__head span{
    display:block;
    margin-bottom:8px;
    color:var(--svc-teal);
    font-family:Inter,sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
}
.oa-form__head strong{font-size:21px;font-weight:700;letter-spacing:-.03em}
.oa-form__head i{color:var(--svc-accent);font-size:22px}

.oa-field{display:block;margin-bottom:22px}
.oa-field > span,
.oa-field > legend{
    display:block;
    margin-bottom:9px;
    color:var(--svc-ink);
    font-size:14px;
    font-weight:600;
    letter-spacing:-.01em;
}
.oa-field em{
    margin-left:5px;
    color:var(--svc-accent);
    font-style:normal;
    font-size:11.5px;
    font-weight:600;
}
.oa-field small:not(.oa-field__help){
    margin-left:5px;
    color:#98a0a8;
    font-size:11.5px;
    font-weight:500;
}
.oa-field input[type=text],
.oa-field input[type=email],
.oa-field input[type=tel],
.oa-field textarea{
    width:100%;
    padding:13px 15px;
    border:1px solid var(--svc-line);
    border-radius:3px;
    background:#fdfdfc;
    color:var(--svc-ink);
    font:inherit;
    font-size:15px;
    line-height:1.6;
    transition:border-color .15s,background .15s;
}
.oa-field textarea{resize:vertical;min-height:120px}
.oa-field input:focus,
.oa-field textarea:focus{
    outline:none;
    border-color:var(--svc-teal);
    background:#fff;
    box-shadow:0 0 0 3px rgba(15,118,110,.1);
}
.oa-field input::placeholder,
.oa-field textarea::placeholder{color:#b2b8be}
.oa-field input[type=file]{
    width:100%;
    padding:11px 14px;
    border:1px dashed var(--svc-line);
    border-radius:3px;
    background:#fbfaf8;
    font-size:13.5px;
    color:var(--svc-body);
}
.oa-field__help{
    display:block;
    margin-top:7px;
    color:#8a9199;
    font-size:12.5px;
    line-height:1.6;
}
.oa-field--group{border:0;padding:0;margin-bottom:22px}
.oa-field--group legend{padding:0}

.oa-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.oa-field-row .oa-field{margin-bottom:22px}

/* ── 선택지 (체크박스·라디오) ─────────────────────────────── */
.oa-choices{display:grid;gap:9px}
.oa-choices--inline{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.oa-choice{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:13px 15px;
    border:1px solid var(--svc-line);
    border-radius:3px;
    background:#fdfdfc;
    cursor:pointer;
    transition:border-color .15s,background .15s;
}
.oa-choice:hover{border-color:#cfcbc4;background:#fff}
.oa-choice input{
    flex:none;
    width:17px;
    height:17px;
    margin-top:1px;
    accent-color:var(--svc-accent);
    cursor:pointer;
}
.oa-choice span{font-size:14.5px;line-height:1.5;color:var(--svc-ink)}
.oa-choice small{display:block;margin-top:3px;color:#8a9199;font-size:12.5px;font-weight:400}
.oa-choice:has(input:checked){border-color:var(--svc-accent);background:#fff7f4}
.oa-choices--inline .oa-choice{justify-content:center}
.oa-choices--inline .oa-choice span{font-size:13.5px}

/* ── 동의·제출 ───────────────────────────────────────────── */
.oa-check{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:16px 0 22px;
    border-top:1px solid var(--svc-line);
    margin-top:6px;
    cursor:pointer;
}
.oa-check input{flex:none;width:17px;height:17px;margin-top:2px;accent-color:var(--svc-accent);cursor:pointer}
.oa-check span{font-size:13.5px;line-height:1.65;color:var(--svc-body)}

.oa-honeypot{
    position:absolute !important;
    left:-9999px !important;
    width:1px;height:1px;
    opacity:0;
    pointer-events:none;
}

.oa-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:17px 24px;
    border:1px solid var(--svc-accent);
    border-radius:3px;
    background:var(--svc-accent);
    color:#fff;
    font-size:15.5px;
    font-weight:600;
    letter-spacing:-.01em;
    cursor:pointer;
    transition:background .15s,border-color .15s,transform .1s;
}
.oa-submit:hover:not(:disabled){background:#CE3B12;border-color:#CE3B12}
.oa-submit:active:not(:disabled){transform:translateY(1px)}
.oa-submit:disabled{opacity:.55;cursor:not-allowed}
.oa-submit:focus-visible{outline:3px solid rgba(15,118,110,.28);outline-offset:2px}

.oa-linkbtn{
    display:inline-block;
    margin:14px 14px 0 0;
    padding:0;
    border:0;
    background:none;
    color:var(--svc-body);
    font-size:13.5px;
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
}
.oa-linkbtn:hover{color:var(--svc-ink)}
.oa-linkbtn[disabled]{opacity:.5;cursor:not-allowed;text-decoration:none}

/* ── 상태 문구 ───────────────────────────────────────────── */
.oa-form__status{
    display:none;
    margin-top:18px;
    padding:14px 16px;
    border-radius:3px;
    font-size:14px;
    line-height:1.7;
    white-space:pre-line;
}
.oa-form__status.is-visible{display:block}
.oa-form__status.is-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.oa-form__status.is-success{background:#f0fdf9;border:1px solid #99e6d5;color:#0f766e}
.oa-form__status.is-info{background:#f6f5f2;border:1px solid var(--svc-line);color:var(--svc-body)}

/* ══ 결제하기 (비회원 인증) ════════════════════════════════════ */
.oa-pay{
    padding:104px 0;
    border-top:1px solid var(--svc-line);
    background:var(--svc-ink);
    color:#fff;
}
.oa-pay__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    gap:64px;
    align-items:start;
}
.oa-pay__intro .svc-kicker{color:#79c7be}
.oa-pay__intro h2{
    font-size:clamp(30px,3.4vw,44px);
    font-weight:700;
    line-height:1.16;
    letter-spacing:-.04em;
    color:#fff;
}
.oa-pay__intro > p{
    margin-top:22px;
    color:#b8bec5;
    font-size:16.5px;
    line-height:1.85;
}
.oa-pay__intro strong{color:#fff;font-weight:600}
.oa-pay__note{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:26px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.16);
    color:#9aa2ab;
    font-size:14px;
}
.oa-pay__note i{color:#79c7be;font-size:17px}

.oa-paybox{
    padding:34px;
    border-radius:4px;
    background:#fff;
    color:var(--svc-ink);
    box-shadow:0 26px 70px -30px rgba(0,0,0,.6);
}
.oa-paystep__lead{
    margin-bottom:20px;
    color:var(--svc-body);
    font-size:14.5px;
    line-height:1.75;
}
.oa-paystep__lead b{color:var(--svc-ink);font-weight:600}
.oa-code{
    letter-spacing:.55em;
    text-align:center;
    font-size:26px !important;
    font-weight:700;
    padding:15px !important;
}

/* ── 견적·결제 목록 ──────────────────────────────────────── */
.oa-paylist{display:grid;gap:14px}
.oa-paycard{
    padding:20px;
    border:1px solid var(--svc-line);
    border-radius:3px;
    background:#fdfdfc;
}
.oa-paycard__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
}
.oa-paycard__title{font-size:15.5px;font-weight:600;line-height:1.5;letter-spacing:-.015em}
.oa-paycard__date{margin-top:5px;color:#98a0a8;font-size:12.5px}
.oa-paycard__badge{
    flex:none;
    padding:5px 11px;
    border-radius:100px;
    font-size:11.5px;
    font-weight:600;
    white-space:nowrap;
}
.oa-paycard__badge.is-pending{background:#fff7ed;color:#c2620a;border:1px solid #fed7aa}
.oa-paycard__badge.is-paid{background:#f0fdf9;color:#0f766e;border:1px solid #99e6d5}
.oa-paycard__badge.is-done{background:#f6f5f2;color:var(--svc-body);border:1px solid var(--svc-line)}
.oa-paycard__items{
    list-style:none;
    margin:0 0 12px;
    padding:12px 0;
    border-top:1px dashed var(--svc-line);
    border-bottom:1px dashed var(--svc-line);
}
.oa-paycard__items li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:6px 0;
    font-size:13.5px;
    color:var(--svc-body);
}
.oa-paycard__items li b{color:var(--svc-ink);font-weight:600}
.oa-paycard__total{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
    font-size:17px;
    font-weight:700;
}
.oa-paycard__total span:last-child{color:var(--svc-accent)}
.oa-paycard .oa-submit{padding:14px 20px;font-size:14.5px}
.oa-paycard__paid{
    padding:12px 14px;
    border-radius:3px;
    background:#f0fdf9;
    border:1px solid #99e6d5;
    color:#0f766e;
    font-size:13.5px;
    text-align:center;
}
.oa-paylist__empty{
    padding:28px 20px;
    border:1px dashed var(--svc-line);
    border-radius:3px;
    background:#fbfaf8;
    color:var(--svc-body);
    font-size:14.5px;
    line-height:1.8;
    text-align:center;
}

/* ══ 정기 관리 출구 ════════════════════════════════════════════ */
.oa-regular{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:48px;
    align-items:center;
    padding:44px;
    border:1px solid var(--svc-line);
    border-radius:4px;
    background:var(--svc-band);
}
.oa-regular h2{
    font-size:clamp(24px,2.6vw,33px);
    font-weight:700;
    line-height:1.24;
    letter-spacing:-.035em;
}
.oa-regular p{
    margin-top:18px;
    color:var(--svc-body);
    font-size:15.5px;
    line-height:1.85;
}
.oa-regular strong{color:var(--svc-ink);font-weight:600}
.oa-regular .svc-actions{margin-top:0;flex-direction:column}
.oa-regular .svc-btn{white-space:nowrap}

/* ══ 반응형 ════════════════════════════════════════════════════ */
@media (max-width:1000px){
    .oa-apply__grid,
    .oa-pay__grid{grid-template-columns:1fr;gap:44px}
    .oa-regular{grid-template-columns:1fr;gap:30px;padding:34px}
    .oa-regular .svc-actions{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:700px){
    .oa-apply,.oa-pay{padding:68px 0}
    .oa-form,.oa-paybox{padding:24px 20px}
    .oa-field-row{grid-template-columns:1fr;gap:0}
    .oa-choices--inline{grid-template-columns:1fr 1fr}
    .oa-form__head strong{font-size:18px}
    .oa-code{font-size:22px !important;letter-spacing:.42em}
}

/* ══ 도움말 버튼 + 모달 (2026-08-30 사장님 지시) ═══════════════════
   처음 오신 분이 「그래서 어떻게 되는 건데?」를 묻지 않아도 되게
   신청→확인→견적→결제→작업 전 과정을 한 화면에 편다. */
.oa-helpbtn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:22px;
    padding:13px 18px;
    border:1px solid #cfe8e4;
    border-radius:3px;
    /* 2026-08-30 사장님 지시 — 흰 바탕에 묻히지 않게 «약간» 배경색.
       아이콘과 같은 teal 계열로 두어 강조가 아니라 «안내»로 읽히게 한다
       (⛔accent(주황)를 쓰면 아래 「견적 신청하기」 버튼과 위계가 겹친다). */
    background:#f2faf8;
    color:var(--svc-ink);
    font-size:14.5px;
    font-weight:600;
    letter-spacing:-.01em;
    cursor:pointer;
    transition:border-color .15s,background .15s,box-shadow .15s;
}
.oa-helpbtn:hover{border-color:var(--svc-teal);background:#e6f4f1;box-shadow:0 6px 18px -12px rgba(15,118,110,.5)}
.oa-helpbtn:focus-visible{outline:3px solid rgba(15,118,110,.28);outline-offset:2px}
.oa-helpbtn i:first-child{color:var(--svc-teal);font-size:17px}
.oa-helpbtn i:last-child{color:#b0b6bc;font-size:13px;transition:transform .15s}
.oa-helpbtn:hover i:last-child{transform:translateX(3px)}

.oa-modal{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:24px}
.oa-modal[hidden]{display:none}
/* 형제 서비스 6쪽은 에디토리얼 톤이라 블러를 쓰지 않는다 — 어두운 막만으로 충분하다. */
.oa-modal__backdrop{position:absolute;inset:0;background:rgba(16,18,22,.66)}
.oa-modal__panel{
    position:relative;
    display:flex;
    flex-direction:column;
    width:min(760px,100%);
    max-height:min(88vh,900px);
    border-radius:6px;
    background:#fff;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
    overflow:hidden;
}
.oa-modal__head{
    flex:none;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:30px 32px 22px;
    border-bottom:2px solid var(--svc-ink);
}
.oa-modal__kicker{
    display:block;
    margin-bottom:10px;
    color:var(--svc-teal);
    font-family:Inter,sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
}
.oa-modal__head h2{font-size:clamp(22px,2.6vw,29px);font-weight:700;line-height:1.24;letter-spacing:-.035em}
.oa-modal__x{
    flex:none;
    width:38px;height:38px;
    display:grid;place-items:center;
    border:1px solid var(--svc-line);
    border-radius:3px;
    background:#fff;
    color:var(--svc-body);
    cursor:pointer;
    transition:background .15s,color .15s;
}
.oa-modal__x:hover{background:var(--svc-ink);color:#fff;border-color:var(--svc-ink)}
.oa-modal__x:focus-visible{outline:3px solid rgba(15,118,110,.28);outline-offset:2px}

.oa-modal__body{flex:1 1 auto;overflow-y:auto;padding:26px 32px 30px}
.oa-modal__body:focus-visible{outline:none}
.oa-modal__lead{
    margin-bottom:26px;
    padding-bottom:22px;
    border-bottom:1px solid var(--svc-line);
    color:var(--svc-body);
    font-size:15.5px;
    line-height:1.85;
}
.oa-modal__lead strong{color:var(--svc-ink);font-weight:600}

.oa-steps{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.oa-step{display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;align-items:start}
.oa-step__num{
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:100px;
    background:var(--svc-ink);
    color:#fff;
    font-family:Inter,sans-serif;
    font-size:15px;
    font-weight:700;
}
.oa-step__body h3{
    margin-bottom:9px;
    font-size:17px;
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.4;
}
.oa-step__body h3 small{color:var(--svc-teal);font-size:13px;font-weight:500;letter-spacing:0}
.oa-step__body > p{margin-bottom:9px;color:var(--svc-body);font-size:14.5px;line-height:1.8}
.oa-step__body ul{margin:0 0 10px;padding-left:18px;display:grid;gap:6px}
.oa-step__body li{color:var(--svc-body);font-size:14.5px;line-height:1.75}
.oa-step__body b{color:var(--svc-ink);font-weight:600}

.oa-step__tip,.oa-step__warn{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-top:10px !important;
    padding:12px 14px;
    border-radius:3px;
    font-size:13.5px !important;
    line-height:1.75 !important;
}
.oa-step__tip{background:#f6fbfa;border:1px solid #cfe8e4;color:#0f766e}
.oa-step__tip b{color:#0b5f59}
.oa-step__warn{background:#fff7f4;border:1px solid #ffd6c8;color:#a8390f}
.oa-step__warn b{color:#8f2f0b}
.oa-step__tip i,.oa-step__warn i{flex:none;margin-top:2px;font-size:15px}
/* 🔴 글은 반드시 «한 덩어리»로 감싼다 — flex 컨테이너에서는 <b> 하나하나가 별도 아이템이 되어
   gap 만큼 벌어지고 줄바꿈이 어긋난다(2026-08-30 사장님 지적: 「결제하기」가 5조각으로 쪼개짐). */
.oa-tip__t{flex:1 1 auto;min-width:0}

.oa-faqbox{
    margin-top:30px;
    padding:24px;
    border:1px solid var(--svc-line);
    border-radius:4px;
    background:var(--svc-band);
}
.oa-faqbox h3{
    display:flex;align-items:center;gap:8px;
    margin-bottom:16px;
    font-size:16px;font-weight:700;letter-spacing:-.02em;
}
.oa-faqbox h3 i{color:var(--svc-teal)}
.oa-faqbox dl{margin:0;display:grid;gap:14px}
.oa-faqbox dt{font-size:14.5px;font-weight:600;color:var(--svc-ink);line-height:1.5}
.oa-faqbox dd{margin:5px 0 0;color:var(--svc-body);font-size:14px;line-height:1.8}
.oa-faqbox b{color:var(--svc-ink);font-weight:600}

.oa-modal__foot{
    flex:none;
    padding:18px 32px 24px;
    border-top:1px solid var(--svc-line);
    background:#fdfdfc;
}
.oa-modal__done{
    width:100%;
    padding:16px 24px;
    border:1px solid var(--svc-accent);
    border-radius:3px;
    background:var(--svc-accent);
    color:#fff;
    font-size:15.5px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s,border-color .15s;
}
.oa-modal__done:hover{background:#CE3B12;border-color:#CE3B12}
.oa-modal__done:focus-visible{outline:3px solid rgba(15,118,110,.28);outline-offset:2px}

@media (max-width:700px){
    .oa-modal{padding:0}
    .oa-modal__panel{width:100%;max-height:100vh;border-radius:0}
    .oa-modal__head{padding:22px 20px 18px}
    .oa-modal__body{padding:20px}
    .oa-modal__foot{padding:14px 20px 20px}
    .oa-step{grid-template-columns:32px minmax(0,1fr);gap:12px}
    .oa-step__num{width:32px;height:32px;font-size:14px}
    .oa-helpbtn{width:100%;justify-content:center}
}