/* 로그인/회원가입/회원정보찾기 - design/login_page_mockup.html, register_page_mockup.html 시안 반영 */
/* ----- 로그인(login.php) ----- */
.login-page{min-height:calc(100vh - 100px);display:flex;align-items:center;justify-content:center;padding:60px 20px;}
.login-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--line-strong);border-radius:20px;padding:48px 40px 40px;box-shadow:0 20px 50px rgba(20,18,15,.06);}
.login-head{margin:0 0 32px;text-align:center;}
.login-head h1{margin:0;font-size:26px;letter-spacing:-.03em;}
.login-field{margin-bottom:12px;}
.login-field input{width:100%;padding:14px 16px;border:1px solid var(--line-strong);border-radius:2px;font-size:15px;font-family:inherit;color:#1a1a1a;background:#fbfaf7;transition:border-color .15s ease,background .15s ease;}
.login-field input:focus{outline:none;border-color:var(--brand-primary);background:#fff;}
.login-row{display:flex;align-items:center;justify-content:space-between;margin:14px 0 20px;font-size:13.5px;}
.login-chk{display:flex;align-items:center;gap:7px;color:#6d6d6d;cursor:pointer;}
.login-chk input{width:16px;height:16px;accent-color:var(--brand-primary);}
.login-links{display:flex;gap:10px;color:#9a9a9a;}
.login-links a:hover{color:#1a1a1a;}
.login-links .sep{color:var(--line-strong);}
.login-submit{width:100%;padding:15px;border:none;border-radius:2px;background:var(--brand-primary);color:#fff;font-size:16px;font-weight:800;cursor:pointer;}
.login-submit:hover{background:var(--brand-primary-dark);}
.login-join{margin:18px 0 18px;text-align:center;font-size:15.5px;color:#9a9a9a;}
.login-join a{color:#1a1a1a;font-weight:700;text-decoration:none;}
/* 비회원 구매 - 맨 아래 작은 원형(pill) 테두리 링크, 다른 버튼들보다 톤 낮춤 */
.guest-buy{margin-top:18px;text-align:center;}
.guest-buy a{display:inline-block;padding:8px 20px;border-radius:999px;border:1px solid var(--line-strong);font-size:12.5px;font-weight:700;color:#9a9a9a;text-decoration:none;}
.guest-buy a:hover{border-color:#1a1a1a;color:#1a1a1a;}
.pw-gate-card #login_info .login_if_lpl .sep{color:var(--line-strong);margin:0 4px;}
/* 소셜로그인/회원가입 버튼 - 원본 스킨 클래스(#sns_login/#sns_register .sns-icon .ico/.txt)가
ID셀렉터+스프라이트이미지로 너무 세게 박혀있어서 !important로 계속 덮어써도 자꾸 깨져서
(텍스트 잘림, 크기 이상), 아예 새 마크업(.aramchan-sns-grid/.aramchan-sns-btn)으로 갈아끼움
(JS: login.php/register.php - 원본 만 그대로 가져오고 나머지는 새로 그림). */
.aramchan-sns-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.aramchan-sns-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:2px;font-size:14px;font-weight:700;text-decoration:none;transition:filter .15s ease;}
.aramchan-sns-btn:hover{filter:brightness(.96);}
.aramchan-sns-btn svg{width:18px;height:18px;flex:0 0 auto;}
.aramchan-sns-btn.sns-naver{background:#03C75A;color:#fff;}
.aramchan-sns-btn.sns-kakao{background:#FEE500;color:#1a1a1a;}
.aramchan-sns-btn.sns-facebook{background:#1877F2;color:#fff;}
.aramchan-sns-btn.sns-google{background:#fff;color:#1a1a1a;border:1px solid var(--line-strong);}
.aramchan-sns-btn.sns-twitter{background:#000;color:#fff;}
.aramchan-sns-btn.sns-payco{background:#e6231e;color:#fff;}
/* ----- 회원정보 찾기 모달(password_lost2.php로 실제 제출) ----- */
.find-modal-overlay{position:fixed;inset:0;z-index:500;visibility:hidden;opacity:0;transition:opacity .2s ease,visibility .2s ease;}
.find-modal-overlay.show{visibility:visible;opacity:1;}
.find-modal-backdrop{position:absolute;inset:0;background:rgba(20,18,15,.55);}
.find-modal{position:relative;max-width:440px;margin:140px auto 0;padding:40px 36px;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.25);transform:translateY(-16px);transition:transform .2s ease;}
.find-modal-overlay.show .find-modal{transform:translateY(0);}
.find-modal-close{position:absolute;top:-4px;right:10px;width:44px;height:44px;border:none;background:none;color:#9a9a9a;font-size:32px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.find-modal-close:hover{color:#1a1a1a;}
.find-modal h3{margin:0 0 16px;font-size:19px;letter-spacing:-.02em;}
.find-modal p{margin:0 0 20px;font-size:13.5px;line-height:1.6;color:#6d6d6d;}
.find-modal input[type=text]{width:100%;padding:14px 16px;border:1px solid var(--line-strong);border-radius:2px;font-size:14.5px;font-family:inherit;color:#1a1a1a;background:#fbfaf7;margin-bottom:14px;}
.find-modal input[type=text]:focus{outline:none;border-color:var(--brand-primary);background:#fff;}
.find-modal-submit{width:100%;padding:14px;border:none;border-radius:10px;background:var(--brand-primary);color:#fff;font-size:15px;font-weight:800;cursor:pointer;}
.find-modal-submit:hover{background:var(--brand-primary-dark);}
/* ----- 회원가입(register.php, 약관동의+정보입력 한 페이지로 병합) ----- */
.reg-page{max-width:640px;margin:0 auto;padding:24px 20px 100px;}
.reg-section{border-radius:2px;padding:20px;margin-bottom:20px;}
.reg-section h2{margin:0 0 22px;font-size:18px;font-weight:800;color:#1a1a1a;padding-bottom:14px;border-bottom:1px solid var(--line);}
/* skin/social/style.css의 #fregisterform h2{padding:20px;text-align:left;border-bottom:...} 가
ID셀렉터라 폼 안의 모든 h2(섹션 타이틀 포함)에 왼쪽 패딩까지 얹어놔서 삐뚤어짐 - 왼쪽만 제거 */
#fregisterform h2{padding-left:0 !important;}
.reg-field{margin-bottom:16px;}
.reg-field:last-child{margin-bottom:0;}
.reg-field input[type=text],.reg-field input[type=password]{width:100%;padding:13px 16px;border:1px solid var(--line-strong);border-radius:2px;font-size:14.5px;font-family:inherit;color:#1a1a1a;background:#fbfaf7;transition:border-color .15s ease,background .15s ease;}
.reg-field input:focus{outline:none;border-color:var(--brand-primary);background:#fff;}
.reg-field .half{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* 필수입력 필드 - 라벨을 필드 안(플레이스홀더 자리)에 걸쳐놓고, 포커스/입력시 그냥 사라짐 */
.reg-field-float{position:relative;}
.reg-field-float input{width:100%;padding:13px 16px;border:1px solid var(--line-strong);border-radius:2px;font-size:14.5px;font-family:inherit;color:#1a1a1a;background:#fbfaf7;transition:border-color .15s ease,background .15s ease;}
.reg-field-float input:focus{outline:none;border-color:var(--brand-primary);background:#fff;}
.reg-field-float label{position:absolute;left:17px;top:50%;transform:translateY(-50%);margin:0;font-size:14.5px;font-weight:400;color:#9a9a9a;pointer-events:none;transition:opacity .1s ease;}
.reg-field-float label .req{color:#c23b3b;margin-left:2px;}
.reg-field-float input:focus ~ label,
.reg-field-float input:not(:placeholder-shown) ~ label{opacity:0;}
.reg-term-box{height:120px;overflow-y:auto;padding:14px 16px;border:1px solid var(--line);border-radius:2px;background:#fbfaf7;font-size:14px;line-height:1.7;color:#6d6d6d;white-space:pre-line;margin-bottom:12px;}
.reg-term-table{width:100%;border-collapse:collapse;margin-bottom:12px;font-size:14px;}
.reg-term-table th,.reg-term-table td{border:1px solid var(--line);padding:9px 10px;text-align:left;color:#6d6d6d;}
.reg-term-table th{background:#fbfaf7;color:#1a1a1a;font-weight:700;}
.reg-term-agree{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#1a1a1a;margin-bottom:28px;cursor:pointer;}
.reg-term-agree:last-of-type{margin-bottom:0;}
.reg-term-agree input{width:17px;height:17px;accent-color:var(--brand-primary);flex:0 0 auto;}
.reg-term-all{display:flex;align-items:center;gap:9px;padding:16px 18px;margin-top:4px;background:#f4f7f5;border-radius:2px;font-size:14.5px;font-weight:800;color:#1a1a1a;cursor:pointer;}
.reg-term-all input{width:18px;height:18px;accent-color:var(--brand-primary);flex:0 0 auto;}
.reg-chk-list{display:flex;flex-direction:column;gap:16px;}
/* shop-order.css의 .aramchan-mm-form label{display:block}가 태그셀렉터라 더 세서(마이페이지2 안에서
씀) flex/gap이 통째로 안 먹고 있었음(발견) - !important로 확실히 이김 */
.reg-chk{display:flex !important;align-items:center;gap:20px;font-size:14px;color:#6d6d6d;cursor:pointer;margin-bottom:0 !important;}
.reg-chk input{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:0 0 auto;border:1.5px solid var(--line-strong);border-radius:5px;background:#fff;cursor:pointer;position:relative;transition:background .15s ease,border-color .15s ease;}
.reg-chk input:checked{background:var(--brand-primary);border-color:var(--brand-primary);}
.reg-chk input:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
/* 실제 captcha_html() 출력은
구조라, 바깥 div만 flex로 줘서는 안 먹고 fieldset 자체를 flex로 잡아야 버튼들이 제대로 나옴 */
.reg-captcha #captcha{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:none;margin:0;padding:0;}
.reg-captcha #captcha legend{display:none;}
.reg-captcha #captcha img{border-radius:2px;}
.reg-captcha #captcha input{flex:1;min-width:120px;padding:11px 14px;border:1px solid var(--line-strong);border-radius:2px;font-size:14px;}
.reg-captcha #captcha button{padding:9px 14px;border:1px solid var(--line-strong);border-radius:2px;background:#fff;color:#6d6d6d;font-size:14px;white-space:nowrap;cursor:pointer;}
.reg-captcha #captcha button:hover{border-color:#1a1a1a;color:#1a1a1a;}
.reg-captcha #captcha #captcha_info{flex-basis:100%;margin:20px 0;font-size:14px;color:#9a9a9a;}
/* 회원정보수정(w=u) 전용 - 아이디/이름 readonly, 회원아이콘/이미지 업로드 */
.reg-field input[readonly]{background:#f0efe9;color:#9a9a9a;cursor:not-allowed;}
.reg-hint{display:block;margin:8px 0 0;font-size:14px;color:#9a9a9a;}
.reg-upload-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:4px 0;}
/* 네이티브 파일 인풋은 안 보이게 숨기고, 라벨을 우리 버튼 스타일로 대신 씀 (for=input id로 클릭 위임) */
.reg-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.reg-file-btn{padding:10px 16px;border:1px solid var(--line-strong);border-radius:2px;background:#fff;color:#6d6d6d;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;}
.reg-file-btn:hover{border-color:#1a1a1a;color:#1a1a1a;}
.reg-file-name{font-size:14px;color:#9a9a9a;}
.reg-upload-preview{flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;background:#f1eee7;}
.reg-upload-preview img{width:100%;height:100%;object-fit:cover;}
.reg-upload-del{display:flex;align-items:center;gap:8px;font-size:14px;color:#9a9a9a;}
.reg-upload-del input{width:15px;height:15px;accent-color:#c23b3b;}
/* SNS 로그인 관리(social_u_register_form.skin.php) - 실제 연동/해제 토글 로직은 그대로,
li 태그 스타일만 카드 톤에 맞춤 (id="fregisterform"가 없는 폼에서도 먹게 li 단독 셀렉터로) */
.reg-sns-manage li{list-style:none;}
.reg-sns-manage .frm_label{display:none;} /* 위에서 별도 라벨을 이미 출력함 */
.reg-sns-manage .sns-wrap{display:flex;gap:12px;flex-wrap:wrap;}
.reg-sns-manage .sns-icon{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:2px;font-size:14px;font-weight:700;border:1px solid var(--line-strong);color:#6d6d6d;}
/* 글자뱃지 대신 실제 로고 모양 SVG(로그인 페이지 SNS 버튼과 동일 아이콘) */
.reg-sns-manage .sns-icon .ico{display:block !important;width:16px !important;height:16px !important;background-repeat:no-repeat !important;background-position:center !important;background-size:contain !important;}
.reg-sns-manage .sns-naver .ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2303C75A'%3E%3Cpath d='M16.3 12.6 8.6 2H3v20h6.7v-10.6L17.4 22H23V2h-6.7z'/%3E%3C/svg%3E");}
.reg-sns-manage .sns-naver.sns-icon-not .ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M16.3 12.6 8.6 2H3v20h6.7v-10.6L17.4 22H23V2h-6.7z'/%3E%3C/svg%3E");}
.reg-sns-manage .sns-kakao .ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233c1e1e'%3E%3Cpath d='M12 3C6.5 3 2 6.5 2 10.8c0 2.7 1.8 5.1 4.5 6.5l-1.1 4.1c-.1.4.3.7.7.5l4.8-3.2c.3 0 .7.1 1.1.1 5.5 0 10-3.5 10-7.8S17.5 3 12 3Z'/%3E%3C/svg%3E");}
.reg-sns-manage .sns-kakao.sns-icon-not .ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12 3C6.5 3 2 6.5 2 10.8c0 2.7 1.8 5.1 4.5 6.5l-1.1 4.1c-.1.4.3.7.7.5l4.8-3.2c.3 0 .7.1 1.1.1 5.5 0 10-3.5 10-7.8S17.5 3 12 3Z'/%3E%3C/svg%3E");}
.reg-sns-manage .sns-icon:not(.sns-icon-not){border-color:transparent;}
.reg-sns-manage .sns-naver:not(.sns-icon-not){background:#fff !important;color:#03C75A !important;border-color:#03C75A !important;}
.reg-sns-manage .sns-kakao:not(.sns-icon-not){background:#FEE500;color:#1a1a1a;}
.reg-actions{display:flex;gap:10px;margin-top:8px;}
.reg-actions .cancel{flex:1;padding:16px;text-align:center;border:1px solid var(--line-strong);border-radius:4px;font-size:15px;font-weight:700;color:#6d6d6d;}
.reg-actions .cancel:hover{border-color:#1a1a1a;color:#1a1a1a;}
.reg-actions .submit{flex:2;padding:16px;border:none;border-radius:4px;background:var(--brand-primary);color:#fff;font-size:16px;font-weight:800;}
.reg-actions .submit:hover{background:var(--brand-primary-dark);}
/* SNS 회원가입 섹션 타이틀 - 새 마크업(.aramchan-sns-grid) 앞에 JS가 붙여주는 제목 */
@media(max-width:520px){
.login-page{padding:32px 0;}
/* 모바일에선 카드 박스(테두리/그림자/라운드) 없애고 페이지에 바로 얹음 */
.login-card{width:100%;margin:0;padding:0 20px;border:none;box-shadow:none;border-radius:0;}
.reg-page{width:90%;margin:0 auto;}
.reg-section{padding:24px 20px;}
.find-modal{margin:80px 16px 0;padding:32px 24px;}
}