/* 보상닥터 가족간병 — 로그인·회원가입·어드민 공통 스타일
 * style.css 의 토큰(--oc-*)만 사용한다. 토큰 자체는 건드리지 않는다.
 * (style.css 수정은 전 페이지에 영향이 가므로 인증 화면 전용은 여기 둔다) */

/* 로그인·회원가입은 상단 배너 없이 화면 가운데에 둔다.
   헤더 68px + 푸터 약 170px 를 뺀 높이를 채워 세로 중앙 정렬한다. */
.oc-auth-stage{display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - 68px - 170px);padding:48px 20px;box-sizing:border-box;}
.oc-auth-stage > .oc-auth{margin:0;}

.oc-auth{max-width:440px;margin:0 auto;width:100%;box-sizing:border-box;
  background:#fff;border:1px solid var(--oc-line);
  border-radius:var(--oc-radius);padding:32px 28px;box-shadow:var(--oc-shadow-sm);}
.oc-auth__title{text-align:center;color:var(--oc-primary);font-size:1.5rem;margin:0 0 26px;}

.oc-field{margin-bottom:18px;}
.oc-field__label{display:block;color:var(--oc-ink);font-size:.95rem;margin-bottom:7px;}
.oc-field__label .oc-hint{color:var(--oc-gray);font-size:.86rem;margin-left:4px;}
.oc-field__label .oc-req{color:var(--oc-accent);margin-left:3px;}

.oc-input{display:block;width:100%;box-sizing:border-box;padding:13px 14px;
  border:1px solid var(--oc-line);border-radius:var(--oc-radius-sm);
  font-size:1rem;font-family:inherit;color:var(--oc-ink);background:#fff;}
.oc-input::placeholder{color:#B3AC9C;}
.oc-input:focus{outline:none;border-color:var(--oc-primary);box-shadow:0 0 0 3px rgba(29,78,137,.10);}
.oc-input:disabled{background:var(--oc-bg-soft);color:var(--oc-gray);}
.oc-input[readonly],.oc-input.is-locked{background:var(--oc-bg-soft);color:var(--oc-gray);cursor:default;}
.oc-input.is-error{border-color:#D4453C;box-shadow:0 0 0 3px rgba(212,69,60,.10);}

/* 입력칸 + 우측 버튼/타이머 */
.oc-inline{display:flex;gap:8px;align-items:center;}
.oc-inline .oc-input{flex:1;min-width:0;}
.oc-ibtn{flex:0 0 auto;padding:13px 16px;border:0;border-radius:var(--oc-radius-sm);
  background:var(--oc-primary);color:#fff;font-family:inherit;font-size:.95rem;cursor:pointer;
  white-space:nowrap;}
.oc-ibtn:hover:not(:disabled){background:var(--oc-primary-dark);}
.oc-ibtn:disabled{background:#C9C2B4;cursor:not-allowed;}
.oc-timer{flex:0 0 auto;color:var(--oc-accent);font-size:.95rem;min-width:44px;text-align:right;}

.oc-msg{display:block;margin-top:7px;font-size:.88rem;min-height:1.2em;}
.oc-msg--ok{color:var(--oc-gray);}
.oc-msg--err{color:#D4453C;}

/* 체크박스 */
.oc-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:.95rem;color:var(--oc-ink);}
.oc-check input{margin:3px 0 0;width:17px;height:17px;accent-color:var(--oc-primary);flex:0 0 auto;cursor:pointer;}
.oc-check__sub{display:block;color:var(--oc-gray);font-size:.85rem;margin-top:2px;}

/* 버튼 — 규격은 style.css 의 .oc-btn 시스템을 그대로 따른다.
   여기선 인증 화면 전용(가로 꽉·상단 여백)만 덧입힌다. ghost 재정의 제거(중복·충돌 원인). */
.oc-auth .oc-btn{width:100%;margin-top:10px;}
.oc-btn--kakao{background:#FEE500;color:#3C1E1E;}
.oc-btn--kakao:hover{background:#F2DA00;}

/* 또는 구분선 */
.oc-or{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--oc-gray);font-size:.88rem;}
.oc-or::before,.oc-or::after{content:"";flex:1;height:1px;background:var(--oc-line);}

.oc-auth__foot{text-align:center;margin-top:18px;font-size:.92rem;color:var(--oc-gray);}
.oc-auth__foot a{color:var(--oc-primary);}

/* 보험설계사 전용 토글 */
.oc-toggle-box{border:1px solid var(--oc-line);border-radius:var(--oc-radius-sm);
  padding:14px 16px;margin-bottom:18px;background:var(--oc-bg-soft);}
.oc-toggle-box.is-on{border-color:var(--oc-accent);background:#FFF8F1;}
.oc-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.oc-toggle-row strong{color:var(--oc-primary);font-weight:400;}
.oc-switch{position:relative;flex:0 0 auto;width:46px;height:26px;}
.oc-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;}
.oc-switch__track{position:absolute;inset:0;background:#CFC8B8;border-radius:13px;transition:background .18s;}
.oc-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.oc-switch input:checked + .oc-switch__track{background:var(--oc-accent);}
.oc-switch input:checked + .oc-switch__track::after{transform:translateX(20px);}
.oc-switch input:focus-visible + .oc-switch__track{box-shadow:0 0 0 3px rgba(244,145,78,.35);}

.oc-agent-panel{margin-top:14px;padding-top:14px;border-top:1px solid var(--oc-line);}
.oc-agent-note{background:#F1F7EE;border:1px solid #D8E8CF;border-radius:10px;
  padding:10px 12px;font-size:.86rem;color:#3E5B33;margin-bottom:14px;}

/* 파일 업로드 (명함 이미지) */
.oc-file{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;
  border:2px dashed var(--oc-line);border-radius:var(--oc-radius-sm);
  padding:16px 14px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s;}
/* display:flex 가 hidden 속성을 이기므로 명시적으로 눌러준다 */
.oc-file[hidden]{display:none;}
.oc-file:hover{border-color:var(--oc-primary-light);background:var(--oc-bg-soft);}
.oc-file.is-drag{border-color:var(--oc-accent);background:#FFF8F1;}
.oc-file.is-error{border-color:#D4453C;}
.oc-file:focus-within{border-color:var(--oc-primary);box-shadow:0 0 0 3px rgba(29,78,137,.10);}
.oc-file__input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}

.oc-file__icon{flex:0 0 auto;width:38px;height:38px;border-radius:8px;background:var(--oc-beige-deep);
  display:flex;align-items:center;justify-content:center;}
.oc-file__icon svg{width:20px;height:20px;fill:var(--oc-gray);}
.oc-file__text{flex:1;min-width:0;}
.oc-file__main{display:block;color:var(--oc-ink);font-size:.95rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.oc-file__sub{display:block;color:var(--oc-gray);font-size:.82rem;margin-top:2px;}
.oc-file__btn{flex:0 0 auto;border:1px solid var(--oc-primary);border-radius:10px;
  background:#fff;color:var(--oc-primary);font-family:inherit;font-size:.88rem;
  padding:8px 14px;cursor:pointer;white-space:nowrap;}
.oc-file__btn:hover{background:var(--oc-bg-soft);}
.oc-file__acts{flex:0 0 auto;display:flex;gap:6px;align-items:center;}
.oc-file__btn--cam{background:var(--oc-primary);color:#fff;border-color:var(--oc-primary);}
.oc-file__btn--cam:hover{background:var(--oc-primary-dark);}
.oc-file__btn--cam[hidden]{display:none;}

/* 선택 후 미리보기 */
.oc-file-preview{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;
  border:1px solid var(--oc-line);border-radius:var(--oc-radius-sm);padding:12px 14px;background:#fff;}
.oc-file-preview[hidden]{display:none;}
.oc-file-preview img{flex:0 0 auto;width:56px;height:56px;object-fit:cover;
  border-radius:8px;border:1px solid var(--oc-line);background:var(--oc-bg-soft);}
.oc-file-preview__meta{flex:1;min-width:0;}
.oc-file-preview__name{display:block;color:var(--oc-ink);font-size:.92rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.oc-file-preview__size{display:block;color:var(--oc-gray);font-size:.82rem;margin-top:2px;}
.oc-file-preview__acts{flex:0 0 auto;display:flex;gap:6px;}
.oc-file-preview__acts button{border:1px solid var(--oc-line);border-radius:10px;background:#fff;
  font-family:inherit;font-size:.84rem;padding:7px 11px;cursor:pointer;color:var(--oc-primary);}
.oc-file-preview__acts button:hover{background:var(--oc-bg-soft);}
.oc-file-preview__acts .is-danger{color:#B23A31;}

/* 모바일: 아이콘·설명은 윗줄, 버튼 두 개는 아랫줄에 가로로 꽉 채운다.
   명함 촬영은 대부분 휴대폰에서 하므로 터치 영역을 크게 잡는다. */
@media (max-width:560px){
  .oc-file{flex-wrap:wrap;padding:16px 12px;}
  .oc-file__text{flex:1 1 auto;min-width:0;}
  .oc-file__acts{width:100%;gap:8px;margin-top:14px;}
  .oc-file__acts .oc-file__btn{flex:1 1 0;width:auto;text-align:center;
    padding:14px 8px;font-size:.95rem;}
}

/* 앱 안 촬영 화면 (getUserMedia) */
.oc-cam{position:fixed;inset:0;z-index:300;background:#000;display:flex;flex-direction:column;}
.oc-cam__stage{position:relative;flex:1;min-height:0;overflow:hidden;}
.oc-cam__video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}

/* 명함 가이드 — 명함 비율(약 91:55)에 맞춘 안내선 */
.oc-cam__guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;}
.oc-cam__guide span{width:86%;max-width:520px;aspect-ratio:91/55;border:2px solid rgba(255,255,255,.92);
  border-radius:12px;box-shadow:0 0 0 100vmax rgba(0,0,0,.42);}
.oc-cam__hint{position:absolute;left:0;right:0;bottom:18px;margin:0;text-align:center;
  color:#fff;font-size:.95rem;text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none;}

/* 하단 조작 바 — 촬영 버튼을 크게 잡는다 */
.oc-cam__bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:18px 22px calc(22px + env(safe-area-inset-bottom,0px));background:#000;}
.oc-cam__cancel{flex:0 0 64px;background:none;border:0;color:#fff;font-family:inherit;
  font-size:1rem;padding:12px 0;cursor:pointer;text-align:left;}
.oc-cam__spacer{flex:0 0 64px;}
.oc-cam__shot{flex:0 0 auto;width:72px;height:72px;border-radius:50%;
  background:#fff;border:4px solid rgba(255,255,255,.45);background-clip:padding-box;cursor:pointer;}
.oc-cam__shot:active{transform:scale(.94);}

/* 약관 동의 */
.oc-terms{border:1px solid var(--oc-line);border-radius:var(--oc-radius-sm);overflow:hidden;margin-bottom:18px;}
.oc-terms__all{padding:14px 16px;border-bottom:1px solid var(--oc-line);background:var(--oc-bg-soft);}
.oc-terms__row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--oc-line);}
.oc-terms__row:last-child{border-bottom:0;}
.oc-terms__row .oc-check{font-size:.92rem;}
.oc-tag{display:inline-block;background:var(--oc-beige-deep);color:var(--oc-gray);
  font-size:.76rem;padding:2px 7px;border-radius:5px;margin-left:6px;}
.oc-terms__view{flex:0 0 auto;color:var(--oc-primary);font-size:.86rem;text-decoration:none;
  background:none;border:0;cursor:pointer;font-family:inherit;}
.oc-terms__view:hover{text-decoration:underline;}

/* 약관 보기 모달 */
.oc-modal[hidden]{display:none;}
.oc-modal{position:fixed;inset:0;background:rgba(43,40,35,.5);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;}
.oc-modal__box{background:#fff;border-radius:var(--oc-radius);max-width:560px;width:100%;
  max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--oc-shadow);}
.oc-modal__head{padding:18px 22px;border-bottom:1px solid var(--oc-line);
  display:flex;justify-content:space-between;align-items:center;}
.oc-modal__head h3{margin:0;color:var(--oc-primary);font-size:1.1rem;}
.oc-modal__close{background:none;border:0;font-size:1.5rem;line-height:1;color:var(--oc-gray);cursor:pointer;}
.oc-modal__body{padding:20px 22px;overflow-y:auto;font-size:.92rem;line-height:1.75;color:var(--oc-ink);}
.oc-modal__body h4{color:var(--oc-primary);font-size:.98rem;margin:16px 0 6px;}
.oc-modal__body h4:first-child{margin-top:0;}
.oc-modal__foot{padding:14px 22px;border-top:1px solid var(--oc-line);}
.oc-modal__foot .oc-btn{width:100%;border:0;}

/* 전역 알림 */
.oc-alert{border-radius:var(--oc-radius-sm);padding:12px 14px;font-size:.9rem;margin-bottom:18px;}
.oc-alert--warn{background:#FFF6E8;border:1px solid #F3DDB6;color:#7A5A1E;}
.oc-alert--err{background:#FDEFEE;border:1px solid #F3C9C6;color:#9B2F28;}
.oc-alert--ok{background:#F1F7EE;border:1px solid #D8E8CF;color:#3E5B33;}
.oc-alert[hidden]{display:none;}

@media (max-width:520px){
  .oc-auth{padding:24px 18px;}
  .oc-ibtn{padding:13px 12px;font-size:.9rem;}
}

/* 고정 헤더(88/72px) 겹침 보정 — 로그인/회원가입 (2026-08-11) */
.oc-auth-stage{padding-top:128px;}
@media(max-width:960px){ .oc-auth-stage{padding-top:104px;} }