/* ════════ 설치 안내 · 카톡 탈출 화면 ════════ */
.gate{position:fixed;inset:0;z-index:2000;background:var(--bg);color:var(--label);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.gate-in{position:relative;z-index:1;min-height:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column;padding:calc(var(--st) + 64px) 16px calc(var(--sb) + 16px)}
.gate-hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.gate-hero .bicon{border-radius:22.4%;box-shadow:none}
.gate-t{margin:24px 0 0;font:700 28px/34px var(--font);letter-spacing:-.4px}
.gate-s{margin:8px 0 0;font:400 17px/24px var(--font);color:var(--label-2)}
.gate-card{margin:32px 0 0;padding:0;list-style:none;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh-card)}
.gate-step{position:relative;display:flex;align-items:center;gap:16px;min-height:56px;padding:12px 20px;font:400 17px/24px var(--font);text-align:left}
.gate-step+.gate-step::before{content:"";position:absolute;top:0;left:64px;right:0;height:.5px;background:var(--sep)}
.gate-n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--lens);display:grid;place-items:center;font:600 15px/1 var(--font);font-variant-numeric:tabular-nums}
.gate-step b{font-weight:600}
.gate-sub{display:block;margin-top:2px;font-size:15px;line-height:20px;color:var(--label-2)}
.gate-sub .gate-ic{width:18px;height:18px;vertical-align:-4px}
.gate-ic{display:inline-block;width:22px;height:22px;vertical-align:-5px;margin:0 2px;color:var(--blue)}
.gate-acts{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;align-items:stretch;gap:4px}
.gate-btn{-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;width:100%;padding:0 16px;text-align:center;height:52px;border:0;border-radius:var(--r-btn);background:var(--primary);color:var(--on-primary);font:600 17px/1 var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--t-micro) var(--ease-out),opacity var(--t-micro) var(--ease-out)}
.gate-btn:active{transform:scale(.97);opacity:.85}
.gate-link{-webkit-appearance:none;appearance:none;text-align:center;align-self:center;padding:0 16px;border:0;background:none;min-height:44px;color:var(--blue);font:400 15px/22px var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity var(--t-micro)}
.gate-link:active{opacity:.5}
.gate-note{margin:12px 0 0;min-height:20px;font:400 13px/19px var(--font);color:var(--label-2);text-align:center}
.gate-in>*{animation:gateIn var(--t-screen) var(--ease-out) both}
.gate-in>.gate-card{animation-delay:60ms}.gate-in>.gate-acts{animation-delay:120ms}
@keyframes gateIn{from{opacity:0;transform:translateY(8px)}}
@media (min-width:600px){.gate-in{justify-content:center;padding-top:64px}.gate-acts{margin-top:0}}
@media (prefers-reduced-motion:reduce){.gate-in>*{animation:none}}

/* ════════ 로그인·가입: 화면 가운데 · 넓은 화면은 떠 있는 카드 · 글자가 위로 올라가는 입력칸 ════════ */
:root{--fl-bg:#fff;--fl-line:rgba(0,0,0,.10);--fl-ring:rgba(15,52,96,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fl-bg:rgba(255,255,255,.06);--fl-line:rgba(255,255,255,.12);--fl-ring:rgba(239,192,123,.20)}}
:root[data-theme="dark"]{--fl-bg:rgba(255,255,255,.06);--fl-line:rgba(255,255,255,.12);--fl-ring:rgba(239,192,123,.20)}
.scr-in.auth{justify-content:center}
.auth-box{width:100%;max-width:400px;margin:0 auto;padding:24px 16px} /* 좌우 16px(화면 여백 기준) */
.auth-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:28px}
.auth-head .bicon{border-radius:22.4%;margin-bottom:20px;box-shadow:none}
.auth-t{margin:0;font:700 28px/34px var(--font);letter-spacing:-.4px;color:var(--label)}
.auth-s{margin:8px 0 0;font:400 15px/22px var(--font);color:var(--label-2);text-wrap:balance}
.auth-fields{display:grid;gap:12px}
.fl{position:relative;display:block;margin:0}
.fl-in{-webkit-appearance:none;appearance:none;display:block;width:100%;height:56px;margin:0;padding:24px 16px 8px;border:0;border-radius:var(--r-btn);background:var(--fl-bg);box-shadow:inset 0 0 0 1px var(--fl-line);color:var(--label);font:400 17px/24px var(--font);outline:none;transition:box-shadow var(--t-micro) var(--ease-out)}
.fl-lb{position:absolute;left:16px;top:17px;font:400 17px/24px var(--font);color:var(--label-2);pointer-events:none;transform-origin:0 50%;transition:transform var(--t-micro) var(--ease-out)}
.fl-in:focus+.fl-lb,.fl-in:not(:placeholder-shown)+.fl-lb,.fl-in:-webkit-autofill+.fl-lb{transform:translateY(-10px) scale(.76)}
.fl-in:focus{box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px var(--fl-ring)}
.fl-in:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 1px var(--fl-line),inset 0 0 0 1000px var(--fl-bg);-webkit-text-fill-color:var(--label);caret-color:var(--label);transition:background-color 9999s}
.fl-in:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px var(--fl-ring),inset 0 0 0 1000px var(--fl-bg)}
.auth-hint{margin:8px 4px 0;font:400 13px/19px var(--font);color:var(--label-2)}
.auth-consent{margin-top:20px}
.auth-consent .group{margin:0;border-radius:var(--r-in);box-shadow:inset 0 0 0 1px var(--fl-line)}
.auth .err,.sheet-fields+.err{padding:12px 4px 0;text-align:center}
.auth-acts{display:grid;gap:4px;margin-top:24px}
.auth-acts .btn{height:52px}
.auth-note{margin:8px 0 0;font:400 13px/19px var(--font);color:var(--label-2);text-align:center}
.auth .seg{margin:0 0 20px;height:40px}
.auth .seg button{font:600 15px/22px var(--font)}
.auth-fields+.auth-fields{margin-top:20px}
.auth .err.hold{min-height:40px;padding-bottom:9px}
.auth .err.hold:empty{display:block}
.auth .err.hold+.auth-acts{margin-top:0}
.auth-help2{margin:0 0 4px;font:400 13px/19px var(--font);color:var(--label-2);text-align:center}
.auth-help{height:52px;margin:0;display:grid;place-items:center;font:400 15px/22px var(--font);color:var(--label-2);text-align:center}
.sheet-fields{padding:16px 16px 0}
@media (min-width:600px){
  .auth-box{background:var(--surface);border-radius:var(--r-sheet);box-shadow:var(--sh-float),0 0 0 .5px var(--fl-line);padding:40px 36px 28px}
}
/* 마우스를 올려도 버튼 색이 바뀌지 않게 */
@media (hover:hover){.intro .btn.b1:hover{background:var(--primary)}.intro .btn.b2:hover{background:var(--glass-bg)}}
.auth-sec{margin:20px 4px 8px;font:600 13px/19px var(--font);color:var(--label-2)}
.auth-sec:first-of-type{margin-top:0}
.auth-link{display:block;margin:0 auto;height:44px;padding:0 12px;font:400 13px/19px var(--font);color:var(--blue)}
.auth-link[hidden]{display:none} /* 사장님 가입 「로그인하러 가기」: hidden일 때 숨김(전체 점검 #24) */
.auth .chips{padding:0}
.auth-consent .group .todo+.todo{box-shadow:inset 0 .5px 0 var(--sep)} /* 11-12 대리 소 편차 3: 테두리는 줄 높이를 0.5px 늘려 68/69로 어긋났음 → 안쪽 선으로 */
.auth-lbl{margin:4px 4px -4px;font:400 13px/19px var(--font);color:var(--label-2)}
/* 뒤로가기: 안전 영역 아래 8px(닫기 버튼 .scr-x와 같은 기준) */
.scr>.nav{height:calc(var(--st) + 44px)} /* 앱 본문 상단바와 같은 44px(부장 11-11 레이아웃 측정) */
.scr>.scr-in{padding-top:calc(var(--st) + 44px)}
/* 로그인 한 화면: 도메인 칩 줄 */
.lg-sub{display:flex;align-items:center;gap:8px;height:32px;margin:-4px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lg-sub::-webkit-scrollbar{display:none}
.lg-hint{flex:none;padding:0 4px;font:400 13px/19px var(--font);color:var(--label-2)}
.dom-chip{position:relative;flex:none;height:32px;padding:0 12px;border-radius:16px;background:var(--fill-3);font:600 13px/19px var(--font);color:var(--label)}
.dom-chip::before{content:"";position:absolute;inset:-6px -2px}
.dom-chip:active{transform:scale(.95)}
/* 이메일 「아이디 @ 도메인」 */
.em{display:grid;grid-template-columns:minmax(0,1fr) 20px 132px;column-gap:4px;align-items:center}
.em .fl{margin:0}
.em-at{text-align:center;font:400 17px/24px var(--font);color:var(--label-2)}
.em-sel{padding:0 28px 0 14px;font:400 17px/24px var(--font);color:var(--label);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.em-sel:invalid{color:var(--label-2)}
.em-own{grid-column:1/-1;margin-top:12px!important}
.em-own[hidden]{display:none}
/* 가게 주소: 누르면 검색 화면. 읽기 전용 칸 아래 우편번호·지번(참고) */
#stAddr{cursor:pointer;text-overflow:ellipsis}
.addr-sub{margin:-4px 4px 0;font:400 13px/19px var(--font);color:var(--label-2)}
.addr-sub[hidden]{display:none}
.scr.post{background:var(--bg)!important;background-image:none!important}
.post-title{position:absolute;top:calc(var(--st) + 8px);left:0;right:0;height:44px;display:grid;place-items:center;font:600 17px/24px var(--font);pointer-events:none}
#postBox{position:absolute;left:0;right:0;bottom:0;top:calc(var(--st) + 60px)}
.err-in{margin:-4px 4px 0;font:400 13px/19px var(--font);color:var(--red)}
.bank-sel{width:100%;height:56px}
.rrn{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);column-gap:4px;align-items:center}
.rrn .fl{margin:0}
.rrn-eye{position:absolute;right:4px;top:6px;height:44px;min-width:44px;padding:0 8px;font:400 13px/19px var(--font);color:var(--blue);-webkit-user-select:none;user-select:none;touch-action:none}
.rrn .fl:last-child .fl-in{padding-right:52px}
.rrn-note{margin-top:-4px}
/* 가입·로그인 보조 글씨는 밝은 화면에서 4.5:1을 넉넉히 넘기게(본문색의 72%→ 글자 진하기만 올림) */
.auth-hint,.auth-s,.auth-help,.auth-help2,.lg-hint,.addr-sub,.auth-lbl,.auth-sec,.auth-consent .rs,.auth-note{color:var(--label-2);color:color-mix(in srgb,var(--label) 78%,transparent)}
.fl-lb{color:var(--label-2);color:color-mix(in srgb,var(--label) 74%,transparent)}
/* 동의: 필수/선택 알약 + 카드 둘로 구분 */
.cbadge{display:inline-block;margin-right:8px;padding:0 8px;height:20px;border-radius:10px;background:var(--fill-3);color:var(--label);font:600 12px/20px var(--font);font-style:normal;vertical-align:1px}
.cbadge.req{background:var(--primary);color:var(--on-primary)}
.auth-consent .group{margin:0}
.cons-lbl{display:block;margin:16px 4px 8px}
.auth-consent .cons-lbl .cbadge{margin-right:8px}
.auth-legal{display:flex;justify-content:center;align-items:center;gap:4px;margin:0;color:var(--label-2)}
.auth-legal .auth-link{min-height:44px;padding:0 8px;font-size:13px}
.field-ok,.field-wait{display:flex;align-items:center;gap:6px;margin:8px 4px 0;font:400 13px/19px var(--font)}
.field-ok{color:var(--blue)}.field-wait{color:var(--label-2)}
.field-ok svg{width:16px;height:16px;flex:none}
/* 비밀번호 강도 4칸 막대(새 비밀번호 화면). 색 + 글자 같이. 모션 줄이기는 토큰이 0이라 자동 */
.pw-bar{display:flex;align-items:center;gap:4px;margin:8px 4px 0;min-height:19px}
.pw-seg{flex:1;height:4px;border-radius:2px;background:var(--fill-3);transition:background-color var(--t-base) var(--ease-out)}
.pw-tx{flex:none;min-width:72px;margin-left:8px;text-align:right;font:400 13px/19px var(--font);color:rgba(60,60,67,.8)}
.pw-bar[data-n="1"] .pw-seg:nth-child(-n+1){background:var(--red-text)}
.pw-bar[data-n="2"] .pw-seg:nth-child(-n+2),.pw-bar[data-n="3"] .pw-seg:nth-child(-n+3),.pw-bar[data-n="4"] .pw-seg:nth-child(-n+4){background:var(--blue)}
.pw-req-ok{padding-top:4px;color:var(--label)!important;font-weight:600}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pw-tx{color:rgba(235,235,245,.7)}}
:root[data-theme="dark"] .pw-tx{color:rgba(235,235,245,.7)}
/* 비밀번호 보기 토글(글자 버튼 하나, 44px 터치 영역) */
.pw-eye-row{display:flex;justify-content:flex-end;margin:0 4px}
.fl-eye{-webkit-appearance:none;appearance:none;min-width:64px;min-height:44px;padding:0 4px;border:0;background:none;font:400 15px/22px var(--font);color:var(--blue);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity var(--t-micro) var(--ease-out)}
.fl-eye:active{opacity:.4}
/* 인라인 오류 글자 대비 4.5 이상(회색 바탕 #eef2f8 기준 --danger 4.38 → --red-text 4.8, 다크 #ff6961) */
html .fl-msg:not(.ok):not(.wait),html .fl.err .fl-lb{color:var(--red-text)}
/* 가입 업종 칩: 보이는 모양은 그대로(높이 32), 누르는 영역만 위아래 6px 넓혀 44px(다른 칩 화면과 같은 방식) */
.auth .chips .chip{position:relative}
.auth .chips .chip::after{content:"";position:absolute;inset:-6px -2px}
/* 알바생 화면 품질 한 바퀴(11-11): 버전 줄 글자 대비(전 .3 → 보조 글자색), 스위치·세그먼트 누르는 영역 44px(보이는 모양은 그대로) */
html .ver-no{color:var(--label-2);opacity:1}
.sw,.seg button{position:relative}
.sw::after{content:"";position:absolute;inset:-7px -4px}
.seg button::after{content:"";position:absolute;inset:-8px 0}
/* 인증 화면 여백·상단바를 앱 기준에 맞춤(11-11 레이아웃 측정 #3·#8): 430 미만 좌우 16, 430 이상 20 / 상단바 44, 600 이상 56(앱 .nav와 같음) */
@media (min-width:430px){.gate-in{padding-left:20px;padding-right:20px}}
@media (min-width:430px) and (max-width:599px){.auth-box{padding-left:20px;padding-right:20px}}
@media (min-width:600px){.scr>.nav{height:calc(var(--st) + 56px)}.scr>.scr-in{padding-top:calc(var(--st) + 56px)}}
/* 알바 구매 요청 구매처 칩: 보이는 모양은 그대로, 누르는 영역만 44px */
#buyCh .chip{position:relative}
#buyCh .chip::after{content:"";position:absolute;inset:-6px -2px}

/* 배치 2판 PC 첫 화면 안내 문장(디자인 지시 9-2): 폰에서는 숨김 */
.acts-s{display:none}
@media (min-width:1024px){html[data-lay="2"] .scr.intro .acts-s{display:block;margin:0 0 20px;font:400 15px/22px var(--font);color:var(--label-2)}}

/* 가능 시간 체크 줄(디자인 10-2): 한 줄 제목이라 .main 최소 높이를 풀어 48px로 */
#avOk.ck-row .main{min-height:0;padding:0}
#avOk.ck-row{align-items:center}

/* 알바 기록 메모 시트(디자인 지시 3-B) */
.an-body{white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;font:400 15px/22px var(--font)}
.an-head{margin:0;padding:12px 32px 0;font:400 13px/16px var(--font);color:var(--label-2)}
.an-del{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;color:var(--label-2);border-radius:50%}
.an-del:active{background:var(--fill-3)}
.an-box{position:relative}
.an-box .field{width:100%}
.an-cnt{position:absolute;right:12px;bottom:8px;font:400 13px/20px var(--font);color:var(--label-3)}
.sec-f.an-bad{color:var(--danger)}
#anHint{padding:8px 32px 0}
.an-box .field{height:92px;min-height:92px;box-sizing:border-box;resize:none}
.an-tag{display:block;margin:0;font:400 13px/16px var(--font);color:var(--label-2);text-align:right;white-space:nowrap}

/* 명세서 보기 새 배치(배치 2판): 실수령 히어로 */
.pay-hero{margin:16px 16px 0;padding:20px;border-radius:24px;background:var(--lay-hero);color:var(--on-navy);text-align:center}
.pay-hero.first{margin-top:16px}
.ph-k{margin:0;font:400 13px/20px var(--font);opacity:.7}
.ph-tag{margin-left:8px;padding:0 8px;border-radius:8px;background:var(--lens,var(--fill-3));color:var(--primary,var(--label));font:600 11px/20px var(--font)}
.ph-v{margin:4px 0;font:700 28px/34px var(--font)}
.ph-v small{font:400 17px/24px var(--font)}
.ph-s{margin:0;font:400 13px/20px var(--font);opacity:.7}
.ps-s{display:block;font:400 13px/16px var(--font);color:var(--label-2)}
.chev-d svg{transform:rotate(90deg);transition:transform var(--t-base,.25s) var(--ease-out,ease)}
.chev-d.up svg{transform:rotate(-90deg)}
.ps-warn{margin:0;padding:0 0 8px;text-align:center}
.doc-tag{padding:0 8px;border-radius:8px;background:var(--fill-3);font:600 11px/20px var(--font);color:var(--label)}
.sr-box{padding:16px 16px 0}
.sr-box .field{width:100%;height:48px;border-radius:24px;background:var(--fill-3);padding:0 16px;box-sizing:border-box}
#srHint{padding:8px 32px 0}

.sr-box{position:relative}
.sr-x{position:absolute;right:16px;top:16px;width:44px;height:48px;font:400 20px/48px var(--font);color:var(--label-2)}
.sr-box .field{padding-right:48px}
.sr-rec{padding:12px 16px}
.sr-empty{padding:48px 32px 0;text-align:center}
.sr-et{margin:0;font:600 17px/24px var(--font)}
.sr-es{margin:4px 0 8px;font:400 15px/22px var(--font);color:var(--label-2)}
.sr-warn{text-align:center}
.row.rs-w .rs{white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all;overflow-wrap:anywhere}
.row.rs-w{height:auto;min-height:64px}

/* PC(1024+) 로그인 왼쪽 남색 칸: 소개 3줄·약관 링크·서서히 나타남(마크업은 fullscreen.js AUTH_SIDE, 칸 자체·큰 글은 wide.css ::before/::after). 폰·LAY2 꺼짐에서는 숨김 */
.auth-side{display:none}
@media (min-width:1024px){
  html[data-lay="2"] .auth-side{display:block}
  html[data-lay="2"] .auth-side .as-pts{position:fixed;z-index:3;left:64px;top:calc(50% + 92px);width:min(448px,calc(50% - 128px));display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none;font:400 17px/24px var(--font);color:var(--on-navy-2);animation:asIn var(--t-screen,350ms) var(--ease-out) both}
  html[data-lay="2"] .auth-side .as-pts li{display:flex;align-items:center;gap:12px}
  html[data-lay="2"] .auth-side .as-pts li::before{content:"";flex:none;width:20px;height:20px;background:var(--brand-gold);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/20px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/20px no-repeat}
  html[data-lay="2"] .auth-side .as-legal{position:fixed;z-index:3;left:64px;bottom:52px;display:flex;align-items:center;gap:4px;margin:0;color:var(--on-navy-2);animation:asIn var(--t-screen,350ms) var(--ease-out) 80ms both}
  html[data-lay="2"] .auth-side .as-legal .auth-link{margin:0;padding:0 8px 0 0;color:var(--on-navy-2)}
  html[data-lay="2"] .auth-side .as-legal span+.auth-link{padding:0 8px}
}
@media (min-width:1024px) and (max-height:560px){html[data-lay="2"] .auth-side .as-pts{display:none}}
@keyframes asIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html[data-lay="2"] .auth-side .as-pts,html[data-lay="2"] .auth-side .as-legal{animation:none}}

/* 로그인 화면 아래 「마감노트 알아보기」(주소가 있을 때만 그려짐, fullscreen.js kpHomeLink). 작은 보조색 글자, 누를 곳 44px 높이 */
.auth-home{display:flex;align-items:center;justify-content:center;min-height:44px;margin:8px auto 0;padding:0 16px;font:400 13px/20px var(--font);color:var(--label-2);text-decoration:none;-webkit-tap-highlight-color:transparent}
.auth-home:focus-visible{outline:2px solid var(--focus,var(--primary));outline-offset:2px;border-radius:8px}
@media (hover:hover){.auth-home:hover{color:var(--label)}}