/*
 * 사장님 로그인·회원가입 화면(assets/owner-login-ui.js 가 그린다) 스타일.
 * owner-login.html(전체 화면)과 공통 페이지의 로그인 서랍이 함께 쓴다. 모든 규칙은 .ol 또는 .ol-drawer 안에서만 먹는다.
 * 서브 페이지 규칙처럼 hex 색을 직접 쓴다.
 */
.ol{color:#221A10; line-height:1.7; word-break:keep-all; overflow-wrap:anywhere;}
.ol *{box-sizing:border-box;}
.ol [hidden]{display:none !important;}
.ol .ol-title{font-size:26px; margin:0 0 6px; line-height:1.35;}
.ol p, .ol li{font-size:14.5px; color:#3a2e1f;}
.ol a{color:#F97615; text-decoration:underline;}
.ol :focus-visible{outline:3px solid #F97615; outline-offset:2px;}
.ol .lead{color:#6b5a45; margin:0 0 22px; font-size:14.5px; opacity:1;}
.ol .tabs{display:flex; gap:8px; margin-bottom:20px;}
.ol .tab{flex:1; min-height:44px; font:inherit; font-size:15px; font-weight:700; background:#fff; color:#221A10; border:2px solid #221A10; border-radius:12px; cursor:pointer;}
.ol .tab[aria-selected="true"]{background:#FFC34A;}
.ol .form{display:flex; flex-direction:column; gap:12px;}
.ol .col{display:flex; flex-direction:column; gap:12px; min-width:0;}
/* 전체 화면(owner-login.html, .ol-wide) 의 넓은 화면(900px 이상): 이메일 입력(왼쪽)과 소셜 로그인(오른쪽)을 2단으로 둔다.
   서랍은 폭이 좁아 늘 한 줄로 쌓는다 */
@media (min-width:900px){
.ol-wide .tabs{max-width:460px;}
.ol-wide .form.split{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0 48px; align-items:start;}
.ol-wide .col-social{border-left:1.5px solid #e3d6bd; padding-left:48px; align-self:stretch;}
.ol-wide .col-social .divider{margin-top:0;}
.ol-wide [data-ol="verifyPanel"] .form{max-width:460px;}
}
.ol label.field{display:flex; flex-direction:column; gap:4px; font-size:13.5px; font-weight:700;}
.ol input[type="email"], .ol input[type="password"], .ol input[type="text"]{font:inherit; font-size:16px; padding:12px 14px; background:#fff; color:#221A10; border:2px solid #221A10; border-radius:12px; width:100%;}
.ol .btn{display:block; width:100%; min-height:52px; font:inherit; font-size:16px; font-weight:900; background:#FFC34A; color:#221A10; border:2px solid #221A10; border-radius:14px; box-shadow:4px 4px 0 #221A10; cursor:pointer; margin-top:4px;}
.ol .btn:disabled{opacity:.45; cursor:not-allowed;}
.ol .btn-kakao{background:#FEE500; color:#191919;}
.ol .btn-apple{background:#000; color:#fff; border-color:#000;}
/* 소셜 버튼(카카오·구글·애플): .btn 과 같은 크기·모서리·테두리·그림자에 왼쪽 로고 + 가운데 글자 */
.ol .btn-social{display:flex; align-items:center; justify-content:center; gap:10px; padding:0 16px;}
.ol .btn-social .btn-icon{width:20px; height:20px; flex:none;}
.ol .btn-google{background:#fff; color:#1F1F1F;}
.ol .gsi{display:flex; justify-content:center; min-height:44px;}
.ol .gsi:empty{display:none;}
.ol .link-btn{background:none; border:0; font:inherit; font-size:13.5px; color:#6b5a45; text-decoration:underline; cursor:pointer; min-height:44px; padding:0 8px;}
.ol .link-btn:disabled{opacity:.45; cursor:not-allowed;}
.ol .links{display:flex; justify-content:center; flex-wrap:wrap; gap:4px;}
.ol .divider{display:flex; align-items:center; gap:10px; color:#6b5a45; font-size:12.5px; margin:10px 0 2px;}
.ol .divider::before, .ol .divider::after{content:''; flex:1; height:1.5px; background:#e3d6bd;}
.ol .consent-box{background:#fff; border:2px solid #221A10; border-radius:12px; padding:4px 12px;}
.ol .consent{display:flex; align-items:center; gap:8px; min-height:44px; font-size:14px;}
.ol .consent input{width:20px; height:20px; accent-color:#F97615; flex:none; margin:0;}
.ol .consent label{flex:1; cursor:pointer;}
.ol .consent a{font-size:13px; flex:none; padding:10px 4px;}
.ol .consent.all{font-weight:900; border-bottom:1px solid #e3d6bd;}
.ol .hint{font-size:12.5px; color:#6b5a45; text-align:center; margin:0;}
.ol .msg{font-size:14px; border-radius:10px; padding:12px 14px; margin:16px 0 0; background:#FFF3D9; border:2px solid #221A10;}
.ol .msg.error{background:#FDE7E4; border-color:#B3261E; color:#8C1D18;}
.ol .msg:empty{display:none;}
.ol .policy{font-size:12.5px; color:#6b5a45; text-align:center; margin:6px 0 0;}
.ol .ol-note{font-size:13px; color:#6b5a45; margin:28px 0 0;}
.ol-busy{position:fixed; inset:0; background:rgba(255,251,240,.8); display:flex; align-items:center; justify-content:center; font-weight:700; z-index:220; color:#221A10;}
.ol-busy[hidden]{display:none;}

/* ---------- 로그인 서랍 (공통 페이지 헤더의 '사장님 로그인'·'사장님 회원가입') ---------- */
.ol-drawer{position:fixed; inset:0; z-index:200;}
.ol-drawer[hidden]{display:none;}
.ol-backdrop{position:absolute; inset:0; background:rgba(34,26,16,.55); opacity:0; transition:opacity .25s ease;}
.ol-panel{position:absolute; top:0; right:0; bottom:0; width:min(460px,100%); background:#FFFBF0; border-left:3px solid #221A10; overflow-y:auto; overscroll-behavior:contain; padding:28px 24px 40px; transform:translateX(100%); transition:transform .28s ease; font-family:'Noto Sans KR', sans-serif;}
.ol-panel:focus{outline:none;}
.ol-drawer.open .ol-backdrop{opacity:1;}
.ol-drawer.open .ol-panel{transform:none;}
.ol-close{position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:12px; border:2px solid #221A10; background:#fff; color:#221A10; font-size:18px; line-height:1; cursor:pointer;}
.ol-close:focus-visible{outline:3px solid #F97615; outline-offset:2px;}
.ol-drawer .ol-title{padding-right:56px;}
/* 좁은 화면: 아래에서 올라오는 전체 폭 시트 */
@media (max-width:600px){
.ol-panel{top:auto; left:0; width:100%; max-height:calc(100% - 24px); border-left:0; border-top:3px solid #221A10; border-radius:20px 20px 0 0; padding:24px 16px 32px; transform:translateY(100%);}
.ol-close{top:14px; right:14px;}
}
@media (prefers-reduced-motion:reduce){
.ol-backdrop, .ol-panel{transition:none;}
}