/* find.css — 아이디/비밀번호 찾기 등 (Shooterz 아이디찾기.dc 디자인)
   ※ 인라인 <style>은 Vue가 #main-vue 컴파일 시 제거 → 반드시 <link>로 로드 */

@font-face{font-family:'Pretendard';font-weight:300 800;font-style:normal;font-display:swap;src:url('../fonts/pretendard/PretendardVariable.woff2') format('woff2-variations');}

body{font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;background:#EEF3FA;color:#1A2233;}
.main-container{background:#EEF3FA;min-height:100dvh;}
/* 디자인이 자체 상단바를 가지므로 공통 레이아웃 헤더는 숨김 */
#header,#allmenu,.main_header,.sub_header{display:none !important;}

.sz-page{min-height:100vh;background:#EEF3FA;display:flex;flex-direction:column;align-items:center;}
.sz-page *{box-sizing:border-box;}
.sz-col{width:100%;max-width:430px;min-height:100vh;background:#EEF3FA;display:flex;flex-direction:column;padding:0 26px 30px;}

/* 상단바 */
.sz-topbar{padding-top:24px;display:flex;align-items:center;gap:10px;}
.sz-topbar__back{width:38px;height:38px;border-radius:11px;background:#fff;box-shadow:0 4px 12px rgba(30,58,95,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:none;cursor:pointer;padding:0;}
.sz-topbar__title{font:700 16px Pretendard;letter-spacing:-0.02em;color:#13243D;}

/* 인트로 */
.sz-intro{padding-top:30px;}
.sz-intro__title{font:800 22px Pretendard;letter-spacing:-0.03em;line-height:1.35;color:#13243D;}
.sz-intro__desc{margin-top:10px;font:500 13px Pretendard;letter-spacing:-0.01em;color:#8A93A1;line-height:1.5;}

/* 폼 카드 */
.sz-formcard{margin-top:26px;background:#fff;border-radius:24px;padding:28px 24px;box-shadow:0 18px 44px rgba(30,58,95,.10);display:flex;flex-direction:column;gap:18px;}
.sz-fieldgroup{display:flex;flex-direction:column;gap:8px;}
.sz-label{font:600 13px Pretendard;letter-spacing:-0.01em;color:#3A4658;}
.sz-field{display:flex;align-items:center;height:56px;background:#F4F7FB;border:1px solid #EAF0F7;border-radius:16px;padding:0 16px;gap:12px;transition:border-color .15s,box-shadow .15s;}
.sz-field:focus-within{border-color:#2F6FED;background:#fff;box-shadow:0 0 0 3px rgba(47,111,237,.12);}
.sz-field svg{flex-shrink:0;}
.sz-field input{flex:1;min-width:0;border:none;background:transparent;font:500 15px Pretendard;color:#1A2233;outline:none;}
.sz-field input::placeholder{color:#A9B2BF;}

/* 필드 + 인라인 버튼 */
.sz-inline{display:flex;gap:8px;}
.sz-inline .sz-field{flex:1;min-width:0;padding:0 14px;gap:10px;}
.sz-vbtn{flex-shrink:0;height:56px;padding:0 16px;border:1.5px solid #2F6FED;background:#fff;border-radius:16px;color:#2F6FED;font:700 14px Pretendard;letter-spacing:-0.02em;cursor:pointer;white-space:nowrap;transition:background .15s;}
.sz-vbtn:hover{background:#EEF4FF;}
.sz-vbtn:disabled{border-color:#D7DEE8;color:#A9B2BF;cursor:not-allowed;background:#fff;}
.sz-timer{font:600 13px Pretendard;color:#2F6FED;flex-shrink:0;}

/* 주 버튼 */
.sz-cardbtn{margin-top:4px;width:100%;height:56px;border:none;border-radius:16px;background:#2F6FED;color:#fff;font:700 16px Pretendard;letter-spacing:-0.01em;cursor:pointer;box-shadow:0 10px 22px rgba(47,111,237,.28);transition:filter .15s,transform .1s;}
.sz-cardbtn:hover{filter:brightness(1.05);}
.sz-cardbtn:active{transform:scale(.99);}
.sz-cardbtn:disabled{background:#E5EAF1;color:#A9B2BF;cursor:not-allowed;box-shadow:none;}

/* 결과 박스 */
.sz-idresult{margin-top:16px;background:#EEF4FF;border:1px solid #D7E2F7;border-radius:20px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.sz-idresult__label{font:500 12px Pretendard;color:#5B6B86;}
.sz-idresult__id{font:800 18px Pretendard;letter-spacing:-0.01em;color:#13243D;text-align:center;word-break:break-all;}
.sz-idresult__actions{margin-top:10px;display:flex;gap:8px;width:100%;}
.sz-idresult__actions a{flex:1;height:48px;border-radius:14px;font:700 14px Pretendard;text-decoration:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sz-idresult__actions .primary{background:#2F6FED;color:#fff;}
.sz-idresult__actions .ghost{background:#fff;border:1.5px solid #D7E2F7;color:#2F6FED;}

/* 하단 */
.sz-spacer{flex:1;}
.sz-links{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:14px;font:500 13px Pretendard;color:#8A93A1;}
.sz-links a{color:#8A93A1;text-decoration:none;}
.sz-links .div{width:1px;height:12px;background:#DCE2EB;}
.sz-footer{margin-top:20px;text-align:center;font:500 11px Pretendard;line-height:1.7;color:#9AA4B2;}
.sz-footer a{color:#6B7686;font-weight:600;text-decoration:none;cursor:pointer;}
.sz-footer .dot{color:#C7CFDA;}

/* PC: 중앙 카드 */
@media (min-width:600px){
  .sz-page{justify-content:center;padding:64px 0;}
  .sz-col{min-height:560px;max-width:440px;background:#fff;border-radius:28px;box-shadow:0 24px 64px rgba(19,36,61,.14);padding:48px 24px 44px;}
  .sz-topbar{padding-top:0;}
  .sz-formcard{box-shadow:none;border:1px solid #EDF1F7;padding:34px 30px;margin-top:24px;}
  .sz-spacer{flex:1 1 auto;min-height:40px;}
  .sz-footer{margin-top:28px;}
}