/* 
File Name   : main.css
File Location : /assets/css/main.css
File Explain  : Respecx 메인
*/

/* ============================
   AUTH 별도 네임스페이스 
   prefix: rspxAuth_
============================ */

:root {
    --rspx-blue:#2563eb; --rspx-blue-dark:#1e40af; --rspx-blue-light:#dbeafe;
    --rspx-gray-50:#f9fafb; --rspx-gray-100:#f3f4f6; --rspx-gray-200:#e5e7eb;
    --rspx-gray-300:#e5e7eb; --rspx-gray-400:#9ca3af; --rspx-gray-500:#6b7280;
    --rspx-gray-600:#4b5563; --rspx-gray-700:#374151; --rspx-gray-800:#1f2937;
    --rspx-gray-900:#111827; --rspx-white:#ffffff; --radius-md:10px;
    --radius-lg:16px; --transition:.18s ease;
}

/* 버튼 */
.rspxAuth_btn { display:inline-flex; align-items:center; justify-content:center; padding:11px 20px; border-radius:var(--radius-md); font-size:15px; font-weight:600; cursor:pointer; transition:var(--transition); white-space:nowrap; border:0px;}
.rspxAuth_btnPrimary { background:var(--rspx-blue); color:#fff; }
.rspxAuth_btnPrimary:hover { background:var(--rspx-blue-dark); }
.rspxAuth_btnGhost {background:#fff; border:1px solid var(--rspx-gray-300); color:var(--rspx-gray-700); }
.rspxAuth_btnGhost:hover { border-color:var(--rspx-blue); color:var(--rspx-blue); }
.rspxAuth_btnOutline { border:2px solid var(--rspx-blue); color:var(--rspx-blue); background:transparent; }
.rspxAuth_btnFull { width:100%; margin-bottom: 10px;}

/* 폼 */
.rspxAuth_formGroup {position:relative; margin-bottom:10px; }
.rspxAuth_formLabel { position:absolute; top:50%; left:0%; transform:translate(0, -50%); font-weight:600; font-size:13px; margin-bottom:5px; padding-left:12px; display:block; }
.rspxAuth_formInput { width:100%; padding:15px 12px 15px 75px; border:1px solid var(--rspx-gray-300); border-radius:var(--radius-md); font-size:13px; }
.rspxAuth_formInput:focus { border-color:var(--rspx-blue); outline:none; box-shadow:0 0 0 2px rgba(37,99,235,0.2); }
.rspxAuth_formRow { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; }
.rspxAuth_formAuth { width:100%; }

/* 체크박스 */
.rspxAuth_checkbox { display:inline-flex; align-items:center; cursor:pointer; user-select:none; font-size:13px; color:var(--rspx-gray-700); }
.rspxAuth_checkbox input { display:none; }
.rspxAuth_checkboxBox { width:16px; height:16px; border-radius:4px; border:1px solid var(--rspx-gray-300); margin-right:8px; position:relative; transition:var(--transition); background:#fff; }
.rspxAuth_checkbox input:checked + .rspxAuth_checkboxBox { border-color:var(--rspx-blue); background:var(--rspx-blue); }
.rspxAuth_checkbox input:checked + .rspxAuth_checkboxBox::after { content:''; position:absolute; left:4px; top:1px; width:6px; height:10px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(40deg); }
.rspxAuth_checkboxLabel { font-size:13px; }

/* 링크 */
.rspxAuth_link { font-size:13px; text-decoration:none; color:var(--rspx-blue); transition:var(--transition); }
.rspxAuth_link:hover { color:var(--rspx-blue-dark); }
.rspxAuth_linkMuted { color:var(--rspx-gray-500); font-size:13px;}
.rspxAuth_linkMuted:hover { color:var(--rspx-blue); }

/* 카드 레이아웃 */
.rspxAuth_wrap { width:100%; }
.rspxAuth_card { background:#fff; border-radius:var(--radius-lg); padding:32px; box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.rspxAuth_header { margin-bottom:20px; }
.rspxAuth_title { font-size:21px; font-weight:700; }
.rspxAuth_subtitle { font-size:13px; color:var(--rspx-gray-600); }

/* Divider */
.rspxAuth_divider { position:relative; text-align:center; margin:15px 0; font-size:13px; color:var(--rspx-gray-400); }
.rspxAuth_divider::before, .rspxAuth_divider::after { content:''; position:absolute; top:50%; width:40%; height:1px; background:var(--rspx-gray-200); }
.rspxAuth_divider::before { left:0; }
.rspxAuth_divider::after { right:0; }

/* Actions grid */
.rspxAuth_actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:0px; }
.rspxAuth_col { width:100%; }
.rspxAuth_label { display:block; font-size:13px; font-weight:600; color:var(--rspx-gray-700); margin-bottom:5px; text-align:center; }
.rspxAuth_hint { margin-top:8px; font-size:12px; color:var(--rspx-gray-500); }

/* 검증 안내 */
.rspxAuth_verify { margin-top:18px; }
.rspxAuth_verifyText { font-size:13px; color:var(--rspx-gray-600); margin-bottom:10px; text-align:center; }

/* 반응형 */
@media (max-width:900px){
    .rspxAuth_card { margin-top:32px; }
    .rspxAuth_actions { grid-template-columns:1fr; }
}