/* MCK 통합회원 리뉴얼 CSS
 * 기획서 MCK_통합회원_리뉴얼_v1.1 기반
 * 적용 대상: <section id="contents" class="mck-renew"> 가 붙은 페이지만
 * 레거시 layout.css 와 독립. 로드 순서는 layout.css 다음. */

:root{
  --mck-text:#111;--mck-text-sec:#555;--mck-text-muted:#999;
  --mck-surface:#f7f7f7;--mck-border:#ddd;--mck-border-light:#eee;
  --mck-kakao:#FEE500;--mck-naver:#03C75A;
  --mck-font:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
}

/* #contents 리뉴얼 페이지 공통 리셋 */
#contents.mck-renew{float:none;width:auto;padding-bottom:0;font-family:var(--mck-font);font-size:14px;color:var(--mck-text);background:#fff;min-height:calc(100vh - 88px - 120px);}
#contents.mck-renew *{margin:0;padding:0;box-sizing:border-box;}
#contents.mck-renew img{max-width:100%;}
#contents.mck-renew button{font-family:var(--mck-font);}

/* PAGE */
#contents.mck-renew .page-wrap{width:100%;}
#contents.mck-renew .content-wrap{max-width:500px;margin:0 auto;padding:60px 20px 80px;}

/* 레거시 title_area 스타일 통일 (로그인/회원가입 계열만) */
#contents.mck-renew .title_area{text-align:center;padding:20px 0 36px;}
#contents.mck-renew .title_area .title{font-size:44px;font-weight:800;color:#111;display:inline-block;letter-spacing:-1px;line-height:1.2;margin:0;}
#contents.mck-renew .title_area .separator{display:block;width:60px;height:3px;background:#111;margin:18px auto 22px;}
#contents.mck-renew .title_area .sub_title{font-size:13px;color:var(--mck-text-sec);line-height:1.7;letter-spacing:-0.2px;}

/* find 페이지는 기존 page-title 유지 */
#contents.mck-renew .page-title-area{text-align:left;padding:0 0 40px;}
#contents.mck-renew .page-title{font-size:34px;font-weight:700;letter-spacing:-0.5px;line-height:1.3;color:var(--mck-text);}
#contents.mck-renew .page-desc{font-size:13px;color:var(--mck-text-muted);margin-top:12px;line-height:1.6;letter-spacing:-0.2px;}

/* FORM */
#contents.mck-renew .field-group{display:flex;flex-direction:column;gap:24px;}
#contents.mck-renew .field-label{font-size:14px;font-weight:500;margin-bottom:8px;color:var(--mck-text);display:block;}
#contents.mck-renew .form-input{width:100%;height:50px;border:1px solid var(--mck-border);padding:0 16px;font-size:14px;font-family:var(--mck-font);outline:none;border-radius:4px;transition:border-color .15s;background:#fff;color:var(--mck-text);}
#contents.mck-renew .form-input:focus{border-color:#111;}
#contents.mck-renew .form-input::placeholder{color:#bbb;}
#contents.mck-renew .form-input:disabled{background:var(--mck-surface);color:var(--mck-text-sec);}
#contents.mck-renew .form-row{display:flex;gap:8px;}
#contents.mck-renew .form-row .form-input{flex:1;}

#contents.mck-renew .btn-primary{width:100%;height:50px;background:#111;color:#fff;border:none;font-size:15px;font-weight:600;cursor:pointer;border-radius:4px;}
#contents.mck-renew .btn-outline{width:100%;height:50px;background:#fff;color:#111;border:1px solid var(--mck-border);font-size:15px;font-weight:600;cursor:pointer;border-radius:4px;}
#contents.mck-renew .btn-sm{height:50px;padding:0 18px;font-size:14px;font-weight:600;background:#111;color:#fff;border:none;cursor:pointer;border-radius:4px;white-space:nowrap;}

#contents.mck-renew .login-meta{display:flex;align-items:center;justify-content:space-between;margin-top:24px;flex-wrap:wrap;gap:10px;}
#contents.mck-renew .form-check{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--mck-text-sec);cursor:pointer;}
#contents.mck-renew .form-check input{width:16px;height:16px;accent-color:#111;}
#contents.mck-renew .login-links{font-size:14px;color:var(--mck-text-muted);}
#contents.mck-renew .login-links a{color:var(--mck-text-muted);text-decoration:none;}
#contents.mck-renew .login-links a:hover{color:var(--mck-text);}

/* SNS */
#contents.mck-renew .sns-section{margin-top:48px;}
#contents.mck-renew .sns-section-title{font-size:14px;font-weight:600;margin-bottom:16px;}
#contents.mck-renew .sns-list{display:flex;flex-direction:column;gap:12px;}
#contents.mck-renew .sns-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border:none;font-size:15px;font-weight:600;cursor:pointer;border-radius:4px;width:100%;}
#contents.mck-renew .sns-kakao{background:var(--mck-kakao);color:#191919;}
#contents.mck-renew .sns-naver{background:var(--mck-naver);color:#fff;}
#contents.mck-renew .sns-google{background:#fff;color:var(--mck-text);border:1px solid var(--mck-border);}
#contents.mck-renew .sns-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;}
#contents.mck-renew .sns-icon svg{width:100%;height:100%;}

#contents.mck-renew .divider-or{display:flex;align-items:center;gap:14px;margin:32px 0;color:var(--mck-text-muted);font-size:13px;}
#contents.mck-renew .divider-or::before,
#contents.mck-renew .divider-or::after{content:'';flex:1;height:1px;background:var(--mck-border);}

#contents.mck-renew .legacy-divider{margin:36px 0 16px;display:flex;align-items:center;gap:12px;color:var(--mck-text-muted);font-size:12px;}
#contents.mck-renew .legacy-divider::before,
#contents.mck-renew .legacy-divider::after{content:'';flex:1;height:1px;background:var(--mck-border-light);}
#contents.mck-renew .legacy-btns{display:flex;gap:12px;justify-content:center;}
#contents.mck-renew .legacy-btn{padding:10px 20px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--mck-border);background:#fff;font-size:13px;font-weight:500;cursor:pointer;border-radius:4px;color:var(--mck-text-sec);}
#contents.mck-renew .legacy-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;background:#555;color:#fff;font-size:10px;font-weight:800;font-style:normal;}

/* AUTH BADGE */
#contents.mck-renew .auth-badge{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--mck-surface);border:1px solid var(--mck-border-light);border-radius:4px;margin-bottom:28px;}
#contents.mck-renew .auth-badge-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:14px;font-weight:700;flex-shrink:0;}
#contents.mck-renew .auth-badge-change{margin-left:auto;font-size:12px;color:var(--mck-text-muted);background:none;border:1px solid var(--mck-border);padding:6px 14px;cursor:pointer;border-radius:4px;}

/* TERMS */
#contents.mck-renew .terms{margin:32px 0;}
#contents.mck-renew .terms-all{display:flex;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid var(--mck-border-light);font-size:14px;font-weight:600;cursor:pointer;}
#contents.mck-renew .terms-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:13px;color:var(--mck-text-sec);}
#contents.mck-renew .terms-item label{display:flex;align-items:center;gap:8px;cursor:pointer;}
#contents.mck-renew .terms-arrow{color:var(--mck-text-muted);font-size:14px;cursor:pointer;padding:4px 6px;user-select:none;}
#contents.mck-renew input[type="checkbox"]{width:16px;height:16px;accent-color:#111;}
#contents.mck-renew .terms-content{display:none;margin-top:6px;}
#contents.mck-renew .terms-content.open{display:block;}
#contents.mck-renew .terms-textarea{width:100%;height:140px;border:1px solid var(--mck-border-light);padding:12px;font-size:11px;font-family:var(--mck-font);color:var(--mck-text-sec);line-height:1.7;resize:vertical;background:var(--mck-surface);border-radius:4px;}

/* FIND */
#contents.mck-renew .find-wrap{display:flex;gap:32px;max-width:1060px;margin:0 auto;padding:80px 40px 80px;}
#contents.mck-renew .find-box{flex:1;border:1px solid var(--mck-border);border-radius:4px;padding:40px 36px;}
#contents.mck-renew .find-box h3{font-size:24px;font-weight:700;margin-bottom:10px;letter-spacing:-0.5px;}
#contents.mck-renew .find-box p{font-size:13px;color:var(--mck-text-muted);line-height:1.6;margin-bottom:28px;letter-spacing:-0.2px;}
#contents.mck-renew .find-box .field-group{gap:20px;}
#contents.mck-renew .find-box .form-input{height:50px;font-size:14px;}

/* RESPONSIVE */
@media(max-width:768px){
  #contents.mck-renew .content-wrap{padding:48px 20px 40px;}
  #contents.mck-renew .find-wrap{flex-direction:column;padding:48px 20px 40px;gap:20px;}
  #contents.mck-renew .page-title-area{padding:0 0 28px;}
  #contents.mck-renew .page-title{font-size:26px;}
  #contents.mck-renew .find-box{padding:32px 24px;}
}