/* ============================================================
   apply.css — 간병 신청 플로우 전용 스타일
   ------------------------------------------------------------
   style.css 의 색·타이포 토큰과 auth.css 의 모달(.oc-modal)을
   그대로 재사용한다. 여기에는 '플로우 화면'에만 필요한 것만 둔다.

   플로우 화면은 GNB·푸터 없이 한 가지 결정에만 집중시킨다.
   대신 상단에 [뒤로]/[닫기]를 고정해 언제든 빠져나갈 수 있게 한다.

   전역 규칙 준수: 이모지·아이콘 없음, 폰트 굵기 400 단일,
   배경은 흰색/베이지 계열만, 네이비·코랄은 글자·포인트로만.
   ============================================================ */

.oc-flow-body{background:var(--oc-bg-soft);min-height:100vh;display:flex;flex-direction:column;}

/* ---------- 단계 상단 바 (뒤로/닫기) ----------
   공통 GNB(.oc-header, sticky top:0, 높이 68px) 바로 아래에 붙는다.
   GNB 와 겹치지 않도록 top 을 헤더 높이만큼 내리고 z-index 를 낮춘다. */
.oc-flowbar{position:sticky;top:68px;z-index:40;background:#fff;border-bottom:1px solid var(--oc-line);}
.oc-flowbar__inner{max-width:640px;margin:0 auto;padding:0 8px;min-height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;}
.oc-flowbar__title{margin:0;font-size:1.08rem;font-weight:400;color:var(--oc-primary);
  white-space:nowrap;}
.oc-flowbar__btn{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--oc-line);min-height:40px;padding:0 16px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:.95rem;font-weight:400;color:var(--oc-ink);
  min-width:60px;transition:background .15s,border-color .15s,transform .06s;}
.oc-flowbar__btn:hover{background:var(--oc-bg-soft);border-color:var(--oc-primary-light);}
.oc-flowbar__btn:active{transform:translateY(1px);}
.oc-flowbar__btn:focus-visible{outline:2px solid var(--oc-primary);outline-offset:2px;}
.oc-flowbar__btn--back{text-align:left;}
.oc-flowbar__btn--close{text-align:right;}

/* ---------- 본문 ---------- */
.oc-flow{width:100%;max-width:640px;margin:0 auto;padding:28px 20px 8px;}
.oc-flow__q{margin:0 0 20px;font-size:1.5rem;font-weight:400;color:var(--oc-ink);line-height:1.45;}

/* ---------- 선택 카드 (2열) ---------- */
.oc-choice{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.oc-choice__card{position:relative;display:flex;flex-direction:column;gap:6px;
  background:#fff;border:1.5px solid var(--oc-line);border-radius:var(--oc-radius);
  padding:20px 18px;min-height:132px;cursor:pointer;text-align:left;
  font-family:inherit;transition:.15s;}
.oc-choice__card:hover{border-color:var(--oc-primary-light);transform:translateY(-1px);
  box-shadow:var(--oc-shadow-sm);}
.oc-choice__card:focus-visible{outline:2px solid var(--oc-primary);outline-offset:2px;}
/* 선택 표시는 테두리·링으로만. 배경은 팔레트 규칙대로 베이지 계열 유지. */
.oc-choice__card.is-selected{border-color:var(--oc-primary);background:var(--oc-beige);
  box-shadow:0 0 0 3px rgba(29,78,137,.10);}

.oc-choice__name{font-size:1.08rem;font-weight:400;color:var(--oc-primary);line-height:1.4;}
.oc-choice__req{font-size:.82rem;font-weight:400;color:var(--oc-accent-dark);}
.oc-choice__desc{font-size:.88rem;font-weight:400;color:var(--oc-gray);line-height:1.6;}

/* ---------- 선택 안내 문구 ---------- */
.oc-flow__note{margin-top:18px;background:#fff;border:1px solid var(--oc-line);
  border-radius:var(--oc-radius-sm);padding:16px 18px;
  font-size:.94rem;line-height:1.7;color:var(--oc-ink);}
.oc-flow__note em{font-style:normal;color:var(--oc-accent-dark);}

/* ---------- 하단 고정 버튼 ---------- */
/* 진행 버튼: 화면 맨 아래 고정이 아니라 입력창 바로 다음(문서 흐름)에 표시 */
.oc-flow-foot{background:var(--oc-bg-soft);
  border-top:1px solid var(--oc-line);padding:14px 20px calc(14px + env(safe-area-inset-bottom));}
.oc-flow-foot__inner{max-width:640px;margin:0 auto;}
.oc-flow-foot .oc-btn{display:block;width:100%;text-align:center;}

/* ---------- 모달: 확인/취소 2버튼 (auth.css .oc-modal 확장) ---------- */
.oc-modal__foot--two{display:flex;gap:10px;}
.oc-modal__foot--two .oc-btn{flex:1;width:auto;}

/* 경고 모달 본문 — 위반 시 처벌 고지처럼 반드시 읽어야 하는 내용 */
.oc-modal__warn{margin:0;font-size:.96rem;line-height:1.75;color:var(--oc-ink);}
.oc-modal__warn b{font-weight:400;color:var(--oc-accent-dark);}

/* ---------- 준비 중 안내 (다음 단계 화면) ---------- */
.oc-flow__todo{background:#fff;border:1px solid var(--oc-line);border-radius:var(--oc-radius);
  padding:32px 24px;text-align:center;color:var(--oc-gray);font-size:.96rem;line-height:1.8;}
.oc-flow__todo strong{display:block;margin-bottom:8px;font-weight:400;
  font-size:1.1rem;color:var(--oc-primary);}

/* ============================================================
   입력 단계 (간병인·환자·보험/병원·계약·요금·확인)
   폼 부품은 auth.css 의 .oc-field / .oc-input / .oc-msg 를 그대로 쓴다.
   여기에는 신청 플로우에만 있는 것만 둔다.
   ============================================================ */

.oc-flow__lead{margin:-8px 0 20px;font-size:.96rem;line-height:1.7;color:var(--oc-gray);}
.oc-flow__sub{margin:32px 0 16px;font-size:1.22rem;font-weight:400;color:var(--oc-ink);}

/* 빨간 보조 문구 — 잘못 입력하면 청구가 막히는 항목에만 쓴다 */
.oc-hint-warn{display:block;margin-top:8px;font-size:.88rem;line-height:1.6;color:#C0392B;}

/* 주의 박스 (주민번호 오입력 경고 등) */
.oc-warnbox{margin:14px 0 0;background:var(--oc-beige);border:1px solid var(--oc-line);
  border-radius:var(--oc-radius-sm);padding:14px 16px;font-size:.9rem;line-height:1.65;color:var(--oc-ink);}
.oc-warnbox b{font-weight:400;color:var(--oc-accent-dark);}

/* 주민번호: 앞 6자리 - 뒤 7자리 */
.oc-split{display:flex;align-items:center;gap:10px;}
.oc-split .oc-input{flex:1;min-width:0;}
.oc-split__dash{color:var(--oc-gray);}
.oc-mask{flex:1;min-width:0;display:flex;align-items:center;padding:0 14px;height:52px;
  border:1.5px solid var(--oc-line);border-radius:var(--oc-radius-sm);background:var(--oc-bg-soft);
  color:var(--oc-gray);letter-spacing:.35em;font-size:1rem;}

/* 드롭다운처럼 보이는 선택 버튼 (보험사·병원 등 모달을 여는 칸) */
.oc-select-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:52px;padding:0 14px;background:#fff;border:1.5px solid var(--oc-line);
  border-radius:var(--oc-radius-sm);font-family:inherit;font-size:1rem;font-weight:400;
  color:var(--oc-gray);cursor:pointer;text-align:left;transition:.15s;}
.oc-select-btn:hover{border-color:var(--oc-primary-light);}
.oc-select-btn:focus-visible{outline:2px solid var(--oc-primary);outline-offset:2px;}
.oc-select-btn.is-picked{color:var(--oc-ink);border-color:var(--oc-primary);}
.oc-select-btn.is-error{border-color:#C0392B;}
.oc-select-btn__arrow{color:var(--oc-gray);font-size:.8rem;}

/* 모달 안 검색 목록 */
.oc-picker__search{margin-bottom:12px;}
.oc-picker{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.oc-picker__item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  width:100%;padding:14px 16px;background:#fff;border:1.5px solid var(--oc-line);
  border-radius:var(--oc-radius-sm);font-family:inherit;font-size:.96rem;font-weight:400;
  color:var(--oc-ink);text-align:left;cursor:pointer;transition:.15s;}
.oc-picker__item:hover{border-color:var(--oc-primary-light);}
.oc-picker__item.is-picked{border-color:var(--oc-primary);background:var(--oc-beige);}
.oc-picker__addr{flex:0 1 auto;font-size:.84rem;color:var(--oc-gray);text-align:right;line-height:1.5;}
.oc-picker__empty{padding:22px 4px;text-align:center;color:var(--oc-gray);font-size:.92rem;}

/* 요금 카드 */
.oc-feecard{background:#fff;border:1px solid var(--oc-line);border-radius:var(--oc-radius);
  padding:20px 18px;margin-bottom:14px;}
.oc-feecard__t{margin:0 0 12px;font-size:1rem;font-weight:400;color:var(--oc-ink);}
.oc-feecard__t em{font-style:normal;color:var(--oc-primary);}
.oc-feecard__row{display:flex;align-items:center;gap:10px;}
.oc-feecard__row .oc-input{flex:1;min-width:0;text-align:right;}
.oc-feecard__unit{color:var(--oc-gray);}
.oc-feecard__ref{margin:8px 0 0;font-size:.86rem;color:var(--oc-primary);}

/* 계산 결과 줄 (예상 입원일 수 등) */
.oc-calcrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:var(--oc-beige);border-radius:var(--oc-radius-sm);
  font-size:1rem;color:var(--oc-ink);margin-bottom:6px;}
.oc-calcrow__v{color:var(--oc-primary);}

/* 확인 화면 요약표 */
.oc-sum{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--oc-line);
  border-radius:var(--oc-radius);overflow:hidden;margin-bottom:18px;}
.oc-sum th,.oc-sum td{padding:13px 14px;font-size:.94rem;font-weight:400;line-height:1.55;
  border-bottom:1px solid var(--oc-line);vertical-align:top;}
.oc-sum tr:last-child th,.oc-sum tr:last-child td{border-bottom:0;}
.oc-sum th{width:34%;text-align:left;background:var(--oc-beige);color:var(--oc-primary);white-space:nowrap;}
.oc-sum td{text-align:right;color:var(--oc-ink);}
.oc-sum tr.is-total td{color:var(--oc-accent-dark);}

/* 하단 버튼 2개 (이전 / 다음) */
.oc-flow-foot--two .oc-flow-foot__inner{display:flex;gap:10px;}
.oc-flow-foot--two .oc-btn{flex:1;}
.oc-flow-foot--two .oc-btn--ghost{flex:0 0 34%;}

/* 진행 표시 */
.oc-progress{display:flex;gap:5px;max-width:640px;margin:0 auto;padding:10px 20px 0;}
.oc-progress__dot{flex:1;height:4px;border-radius:2px;background:var(--oc-line);}
.oc-progress__dot.is-on{background:var(--oc-accent);}

/* ---------- 모바일 ---------- */
@media (max-width:400px){
  .oc-choice{gap:10px;}
  .oc-choice__card{padding:16px 14px;min-height:120px;}
  .oc-choice__name{font-size:1rem;}
  .oc-flow__q{font-size:1.3rem;}
}

/* 고정 헤더(88/72px) 겹침 보정 — 신청 플로우 (2026-08-11) */
.oc-flow-body{padding-top:88px;box-sizing:border-box;}
.oc-flowbar{top:88px;}
@media(max-width:960px){
  .oc-flow-body{padding-top:72px;}
  .oc-flowbar{top:72px;}
}