/* ============================================================
   로그인 · 회원가입 (carat auth)
   그누보드 기본 스킨 톤을 벗고 요즘 서비스 가입 화면처럼.

   적용 범위
     .carat_auth        — 새로 쓴 화면(로그인 / 약관동의 / 가입완료)
     .register          — 코어 마크업을 그대로 두고 CSS 로만 덮는 화면(가입정보 입력)
   두 곳에만 스코프를 건다. 사이트 다른 화면에 영향이 가지 않도록.
   ============================================================ */

.carat_auth,
.register {
    --au-fg:#191924;
    --au-muted:#6b7280;
    --au-line:#e5e8ee;
    --au-brand:#ff7a1a;
    --au-brand-dark:#e5620a;
    --au-bg:#f6f7f9;
    --au-danger:#dc2626;
}

/* ── 화면 틀 ───────────────────────────────────────────── */
.carat_auth{
    min-height:calc(100vh - 260px);
    display:flex; align-items:flex-start; justify-content:center;
    padding:56px 20px 80px;
    color:var(--au-fg);
    -webkit-font-smoothing:antialiased;
}
.carat_auth *{ box-sizing:border-box; }

.au_card{
    width:100%; max-width:440px;
    background:#fff; border:1px solid var(--au-line); border-radius:20px;
    padding:40px 36px 32px;
    box-shadow:0 2px 8px rgba(17,17,26,.04), 0 12px 40px rgba(17,17,26,.06);
}
.au_card--wide{ max-width:720px; }

/* ── 머리말 ───────────────────────────────────────────── */
.au_head{ text-align:center; margin-bottom:28px; }
.au_head h1{
    margin:0 0 8px; font-size:25px; font-weight:800; letter-spacing:-.5px; line-height:1.3;
}
.au_head p{ margin:0; font-size:14px; color:var(--au-muted); line-height:1.6; }
.au_logo{
    display:inline-block; margin-bottom:16px;
    font-size:22px; font-weight:900; letter-spacing:-.5px; color:var(--au-brand);
    text-decoration:none;
}

/* ── 입력 ─────────────────────────────────────────────── */
.au_field{ margin-bottom:14px; }
.au_field > label{
    display:block; margin:0 0 7px 2px;
    font-size:13px; font-weight:600; color:#4b5563;
}
.au_input{
    width:100%; height:52px; padding:0 16px;
    border:1px solid var(--au-line); border-radius:12px;
    background:#fff; color:var(--au-fg);
    font-size:15px; font-family:inherit;
    transition:border-color .13s, box-shadow .13s;
}
.au_input::placeholder{ color:#b0b4bd; }
.au_input:focus{
    outline:none; border-color:var(--au-brand);
    box-shadow:0 0 0 4px rgba(255,122,26,.13);
}
.au_input:disabled{ background:#f6f7f9; color:#9aa0ab; }

/* 비밀번호 보기 토글 */
.au_pw{ position:relative; }
.au_pw .au_input{ padding-right:52px; }
.au_pw__eye{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:40px; height:40px; padding:0; border:0; border-radius:10px;
    background:none; color:#9aa0ab; font-size:15px; cursor:pointer;
}
.au_pw__eye:hover{ color:var(--au-fg); background:#f4f5f7; }

/* ── 버튼 ─────────────────────────────────────────────── */
.au_btn{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:52px; margin-top:6px;
    border:0; border-radius:12px;
    background:var(--au-brand); color:#fff;
    font-size:16px; font-weight:800; font-family:inherit; letter-spacing:-.2px;
    cursor:pointer; text-decoration:none;
    transition:background .13s, transform .06s;
    box-shadow:0 6px 16px rgba(255,122,26,.22);
}
.au_btn:hover{ background:var(--au-brand-dark); color:#fff; }
.au_btn:active{ transform:translateY(1px); }
.au_btn--ghost{
    background:#fff; color:#4b5563; border:1px solid var(--au-line);
    box-shadow:none; font-weight:600;
}
.au_btn--ghost:hover{ background:#f6f7f9; color:var(--au-fg); }

.au_btns{ display:flex; gap:10px; margin-top:22px; }
.au_btns .au_btn{ margin-top:0; }

/* ── 체크박스 (코어 selec_chk 대체) ───────────────────── */
.au_chk{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.au_chk input{ position:absolute; opacity:0; width:0; height:0; }
.au_chk__box{
    flex:0 0 auto; width:20px; height:20px;
    border:1.5px solid #d2d6de; border-radius:6px; background:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    transition:.13s;
}
.au_chk__box::after{
    content:''; width:5px; height:9px; margin-top:-2px;
    border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
    transition:transform .13s;
}
.au_chk input:checked + .au_chk__box{ background:var(--au-brand); border-color:var(--au-brand); }
.au_chk input:checked + .au_chk__box::after{ transform:rotate(45deg) scale(1); }
.au_chk input:focus-visible + .au_chk__box{ box-shadow:0 0 0 4px rgba(255,122,26,.16); }
.au_chk__label{ font-size:14px; color:#4b5563; }

/* ── 로그인 보조줄 (자동로그인 / 찾기) ─────────────────── */
.au_row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:14px 2px 4px;
}
.au_row a{ font-size:13.5px; color:var(--au-muted); text-decoration:none; }
.au_row a:hover{ color:var(--au-fg); text-decoration:underline; }

/* ── 구분선 · 하단 안내 ───────────────────────────────── */
.au_div{
    display:flex; align-items:center; gap:12px;
    margin:26px 0 20px; color:#b0b4bd; font-size:12.5px;
}
.au_div::before, .au_div::after{ content:''; flex:1; height:1px; background:var(--au-line); }

.au_foot{ margin:22px 0 0; text-align:center; font-size:14px; color:var(--au-muted); }
.au_foot a{ margin-left:6px; color:var(--au-brand); font-weight:700; text-decoration:none; }
.au_foot a:hover{ text-decoration:underline; }

/* 소셜 로그인 버튼이 켜져 있으면(코어 스킨 include) 여백만 맞춘다 */
.au_social{ margin-top:4px; }
.au_social ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.au_social a, .au_social button{ border-radius:12px !important; }

/* ── 약관 동의 ────────────────────────────────────────── */
.au_terms{ margin:0 0 14px; border:1px solid var(--au-line); border-radius:14px; overflow:hidden; }
.au_terms__head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 16px; background:#fafbfc; border-bottom:1px solid var(--au-line);
}
.au_terms__head h2{ margin:0; font-size:14.5px; font-weight:700; }
.au_terms__head .req{ color:var(--au-brand); font-size:12.5px; font-weight:700; }
.au_terms__body{
    max-height:180px; overflow-y:auto;
    padding:16px; font-size:13px; line-height:1.7; color:#4b5563;
    white-space:pre-line; word-break:break-all;
}
.au_terms__body table{ width:100%; border-collapse:collapse; white-space:normal; }
.au_terms__body th, .au_terms__body td{
    border:1px solid var(--au-line); padding:8px 10px; font-size:12.5px; text-align:left; vertical-align:top;
}
.au_terms__body th{ background:#fafbfc; font-weight:700; color:var(--au-fg); }
.au_terms__foot{ padding:12px 16px; border-top:1px solid var(--au-line); background:#fff; }

.au_chkall{
    display:flex; align-items:center;
    margin:18px 0 4px; padding:16px;
    border:1.5px solid var(--au-brand); border-radius:14px; background:#fff8f3;
}
.au_chkall .au_chk__label{ font-size:15px; font-weight:700; color:var(--au-fg); }

/* ── 가입 완료 ────────────────────────────────────────── */
.au_done{ text-align:center; }
.au_done__ico{
    width:64px; height:64px; margin:0 auto 20px;
    border-radius:50%; background:#fff1e6; color:var(--au-brand);
    display:flex; align-items:center; justify-content:center; font-size:28px;
}

/* ============================================================
   가입정보 입력(register_form.skin.php) — 코어 마크업 위에 덮는다.
   마크업이 33KB 라 손대지 않고 CSS 로만 톤을 맞춘다.
   ============================================================ */
.register{
    max-width:720px; margin:48px auto 80px; padding:0 20px;
    color:var(--au-fg);
}
.register h1, .register > h2{
    margin:0 0 26px; font-size:25px; font-weight:800; letter-spacing:-.5px; text-align:center;
}
#register_form{
    background:#fff; border:1px solid var(--au-line); border-radius:20px;
    padding:32px 30px;
    box-shadow:0 2px 8px rgba(17,17,26,.04), 0 12px 40px rgba(17,17,26,.06);
}
.register_form_inner ul{ list-style:none; margin:0; padding:0; }
.register_form_inner li{ margin-bottom:16px; }
.register_form_inner label{
    display:block; margin:0 0 7px 2px; font-size:13px; font-weight:600; color:#4b5563;
}
.register .frm_input,
.register input[type="text"],
.register input[type="password"],
.register input[type="email"],
.register input[type="tel"],
.register select{
    width:100%; height:52px; padding:0 16px;
    border:1px solid var(--au-line); border-radius:12px;
    background:#fff; color:var(--au-fg); font-size:15px; font-family:inherit;
    transition:border-color .13s, box-shadow .13s;
}
.register .frm_input:focus,
.register input:focus, .register select:focus{
    outline:none; border-color:var(--au-brand); box-shadow:0 0 0 4px rgba(255,122,26,.13);
}
.register textarea{
    width:100%; padding:14px 16px; border:1px solid var(--au-line); border-radius:12px;
    font-family:inherit; font-size:14px; line-height:1.7;
}
.register .btn_submit{
    display:block; width:100%; height:52px; border:0; border-radius:12px;
    background:var(--au-brand); color:#fff; font-size:16px; font-weight:800; cursor:pointer;
    box-shadow:0 6px 16px rgba(255,122,26,.22);
}
.register .btn_submit:hover{ background:var(--au-brand-dark); }
.register .btn_close, .register .btn_cancel{
    display:flex; align-items:center; justify-content:center;
    height:52px; padding:0 22px; border-radius:12px;
    border:1px solid var(--au-line); background:#fff; color:#4b5563;
    font-size:15px; font-weight:600; text-decoration:none;
}
.register .btn_close:hover{ background:#f6f7f9; }
.register .btn_confirm{ display:flex; gap:10px; margin-top:24px; }
.register .btn_confirm .btn_submit{ flex:1 1 auto; }
.register .btn_frmline{
    height:52px; padding:0 16px; border:1px solid var(--au-line); border-radius:12px;
    background:#fff; color:#4b5563; font-size:14px; font-weight:600; cursor:pointer;
}
.register .frm_info, .register .cert_desc{
    display:block; margin-top:6px; font-size:12.5px; color:var(--au-muted); line-height:1.6;
}
.register #msg_mb_id, .register #msg_mb_nick, .register #msg_mb_email{
    display:block; margin-top:6px; font-size:12.5px; color:var(--au-danger);
}
.register .half_input{ display:inline-block; width:calc(50% - 5px); vertical-align:top; }
.register .half_input.left_input{ margin-right:8px; }

@media (max-width:720px){
    .carat_auth{ padding:28px 16px 60px; min-height:0; }
    .au_card{ padding:30px 22px 26px; border-radius:16px; }
    .au_head h1{ font-size:22px; }
    .register{ margin:24px auto 60px; padding:0 16px; }
    #register_form{ padding:24px 18px; border-radius:16px; }
    .register .half_input{ width:100%; }
    .register .half_input.left_input{ margin-right:0; }
    .register .btn_confirm{ flex-direction:column-reverse; }
}

/* ── 소셜 로그인 버튼 (skin/social/social_login.skin.php) ──────
   코어 스킨 마크업은 그대로 두고 톤만 맞춘다.
   스킨이 자체 <h3>소셜계정으로 로그인</h3> 를 출력하는데,
   우리는 위에 .au_div("또는") 구분선을 이미 두므로 그건 감춘다. */
.au_social #sns_login > h3{ display:none; }
.au_social .sns-wrap{ display:flex; flex-direction:column; gap:9px; }
.au_social .sns-icon{
    display:flex !important; align-items:center; justify-content:center; gap:8px;
    width:100% !important; height:52px !important;
    border-radius:12px !important; border:1px solid var(--au-line) !important;
    background:#fff; color:#3b4048 !important;
    font-size:15px; font-weight:700; text-decoration:none;
    text-indent:0 !important; overflow:visible !important;
    transition:filter .13s, background .13s;
}
.au_social .sns-icon:hover{ filter:brightness(.97); }
.au_social .sns-icon .ico{
    flex:0 0 auto; width:20px; height:20px;
    background-position:center; background-repeat:no-repeat; background-size:contain;
}
.au_social .sns-icon .txt{ font-size:15px; }
.au_social .sns-icon i{ font-style:normal; }

/* 브랜드 색 — 네이버 초록 / 카카오 노랑 / 구글·페이스북은 기본 톤 유지 */
.au_social .sns-naver{ background:#03c75a !important; border-color:#03c75a !important; color:#fff !important; }
.au_social .sns-kakao{ background:#fee500 !important; border-color:#fee500 !important; color:#191600 !important; }
.au_social .sns-google{ background:#fff !important; }
.au_social .sns-facebook{ background:#1877f2 !important; border-color:#1877f2 !important; color:#fff !important; }
.au_social .sns-payco{ background:#ff1717 !important; border-color:#ff1717 !important; color:#fff !important; }

/* 회원가입 약관 화면의 SNS 버튼은 #sns_register를 사용한다. 기존 social/style.css의
   float·50%·30px 아이콘 규칙을 해제하고 동일한 버튼 그리드로 정렬한다. */
.au_social #sns_register{
    width:100%; margin:0 !important; padding:0 !important;
    border:0 !important; background:transparent !important; overflow:visible;
}
.au_social #sns_register h2{
    float:none !important; display:block !important; width:100% !important;
    height:auto !important; margin:0 0 12px !important; padding:0 !important;
    line-height:1.45 !important; text-align:center !important;
    color:#6b7280; font-size:13px !important; font-weight:600;
}
.au_social #sns_register .sns-wrap{
    float:none !important; display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;
    width:100% !important; height:auto !important;
    margin:0 !important; padding:0 !important; line-height:normal !important;
}
.au_social #sns_register .sns-icon{
    position:relative; display:grid !important;
    grid-template-columns:28px minmax(0,1fr) 28px; align-items:center;
    width:100% !important; height:48px !important; margin:0 !important;
    padding:0 12px !important; line-height:1 !important; text-align:left !important;
    border-radius:12px !important; background-position:13px center !important;
    background-repeat:no-repeat !important; background-size:24px 24px !important;
    overflow:hidden !important; box-sizing:border-box;
}
.au_social #sns_register .sns-icon::after{ content:""; grid-column:3; width:28px; }
.au_social #sns_register .sns-icon .ico{
    grid-column:1; position:static !important; display:block !important;
    width:24px !important; height:24px !important; margin:0 !important;
    background-position:center !important; background-size:contain !important;
}
.au_social #sns_register .sns-icon .txt{
    grid-column:2; position:static !important; display:block !important;
    width:auto !important; height:auto !important; padding:0 !important;
    border:0 !important; overflow:visible !important;
    line-height:1.2 !important; font-size:13px !important; font-weight:700;
    text-align:center !important; white-space:nowrap;
}
.au_social #sns_register .sns-icon .txt i{ font-size:inherit !important; }
@media(max-width:560px){
    .au_social #sns_register .sns-wrap{ grid-template-columns:1fr; }
    .au_social #sns_register .sns-icon{ height:50px !important; }
}

/* ============================================================
   소셜 회원가입 폼 (theme/carat/skin/social/social_register_member.skin.php)
   코어 스킨 마크업은 그대로 두고 CSS 로만 톤을 맞춘다.
   style.css 뒤에 로드되므로 여기 규칙이 이긴다.
   ============================================================ */
.social_register{
    --au-fg:#191924; --au-muted:#6b7280; --au-line:#e5e8ee;
    --au-brand:#ff7a1a; --au-brand-dark:#e5620a;
    max-width:640px; margin:48px auto 80px; padding:0 20px;
    color:var(--au-fg);
}
.social_register *{ box-sizing:border-box; }

/* 머리말 */
.sr_head{ text-align:center; margin-bottom:26px; }
.sr_head h1{ margin:0 0 8px; font-size:25px; font-weight:800; letter-spacing:-.5px; }
.sr_head p{ margin:0; font-size:14px; color:var(--au-muted); }

/* 약관 섹션 — 카드로 */
.social_register #fregister_term,
.social_register #fregister_private,
.social_register .fregister_terms{
    margin:0 0 14px; padding:0;
    border:1px solid var(--au-line); border-radius:14px; overflow:hidden; background:#fff;
}
.social_register #fregister_term > h2,
.social_register #fregister_private > h2,
.social_register .register_form_inner > h2{
    margin:0; padding:14px 16px;
    background:#fafbfc; border-bottom:1px solid var(--au-line);
    font-size:14.5px; font-weight:700; color:var(--au-fg);
}
.social_register textarea{
    display:block; width:100%; max-height:170px; min-height:130px;
    margin:0; padding:16px; border:0; border-bottom:1px solid var(--au-line);
    background:#fff; font-family:inherit; font-size:13px; line-height:1.7; color:#4b5563;
    resize:none;
}
.social_register .fregister_agree{
    margin:0; padding:12px 16px; border:0;
}
.social_register #fregister_private table{
    width:100%; border-collapse:collapse; margin:0;
}
.social_register #fregister_private th,
.social_register #fregister_private td{
    border:1px solid var(--au-line); padding:9px 11px; font-size:12.5px; text-align:left; vertical-align:top;
}
.social_register #fregister_private th{ background:#fafbfc; font-weight:700; }

/* 전체 동의 */
.social_register #fregister_chkall{
    display:flex; align-items:center;
    margin:18px 0 26px; padding:16px;
    border:1.5px solid var(--au-brand); border-radius:14px; background:#fff8f3;
}
.social_register #fregister_chkall label{ font-size:15px; font-weight:700; color:var(--au-fg); }

/* 입력 카드 */
.social_register #register_form{ padding:0; border:0; background:none; box-shadow:none; }
.social_register .register_form_inner{
    margin:0 0 14px; padding:0;
    border:1px solid var(--au-line); border-radius:14px; overflow:hidden; background:#fff;
}
.social_register .register_form_inner table{ width:100%; border-collapse:collapse; }
.social_register .register_form_inner th{
    width:34%; padding:14px 16px; border-bottom:1px solid #f1f3f6;
    background:#fff; font-size:13.5px; font-weight:600; color:#4b5563; text-align:left; vertical-align:middle;
}
.social_register .register_form_inner td{
    padding:12px 16px 12px 0; border-bottom:1px solid #f1f3f6; vertical-align:middle;
}
.social_register .register_form_inner tr:last-child th,
.social_register .register_form_inner tr:last-child td{ border-bottom:0; }

.social_register input[type="text"],
.social_register input[type="password"],
.social_register input[type="email"],
.social_register input[type="tel"],
.social_register select{
    width:100%; height:48px; padding:0 14px;
    border:1px solid var(--au-line); border-radius:11px;
    background:#fff; color:var(--au-fg); font-size:15px; font-family:inherit;
    transition:border-color .13s, box-shadow .13s;
}
.social_register input:focus, .social_register select:focus{
    outline:none; border-color:var(--au-brand); box-shadow:0 0 0 4px rgba(255,122,26,.13);
}
.social_register .frm_info, .social_register .check{
    display:block; margin-top:6px; font-size:12.5px; color:var(--au-muted); line-height:1.6;
}
.social_register .check{ color:#dc2626; }

/* 수신설정 */
.social_register .consent-line{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:12px 16px; border-bottom:1px solid #f1f3f6;
}
.social_register .consent-line:last-child{ border-bottom:0; }

/* 체크박스 — 코어 selec_chk 를 최신 톤으로 */
.social_register .selec_chk + label > span{
    display:inline-block; width:20px; height:20px; margin-right:7px; vertical-align:-4px;
    border:1.5px solid #d2d6de; border-radius:6px; background:#fff;
}
.social_register .selec_chk:checked + label > span{
    border-color:var(--au-brand); background:var(--au-brand);
    box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 20px var(--au-brand);
}
.social_register label{ font-size:14px; color:#4b5563; cursor:pointer; }

/* 버튼 */
.social_register .btn_confirm{ display:flex; gap:10px; margin-top:26px; }
.social_register .btn_submit{
    flex:1 1 auto; height:52px; border:0; border-radius:12px;
    background:var(--au-brand); color:#fff; font-size:16px; font-weight:800; cursor:pointer;
    box-shadow:0 6px 16px rgba(255,122,26,.22);
}
.social_register .btn_submit:hover{ background:var(--au-brand-dark); }
.social_register .btn_close, .social_register .btn_cancel{
    display:flex; align-items:center; justify-content:center;
    height:52px; padding:0 22px; border-radius:12px;
    border:1px solid var(--au-line); background:#fff; color:#4b5563;
    font-size:15px; font-weight:600; text-decoration:none;
}
.social_register .btn_frmline{
    height:48px; padding:0 15px; border:1px solid var(--au-line); border-radius:11px;
    background:#fff; color:#4b5563; font-size:14px; font-weight:600; cursor:pointer;
}

@media (max-width:720px){
    .social_register{ margin:24px auto 60px; padding:0 16px; }
    .sr_head h1{ font-size:21px; }
    .social_register .register_form_inner th{
        display:block; width:100%; padding:14px 16px 0; border-bottom:0;
    }
    .social_register .register_form_inner td{ display:block; padding:8px 16px 14px; }
    .social_register .btn_confirm{ flex-direction:column-reverse; }
}

/* ── 약관 2단 배치 ─────────────────────────────────────────
   약관 두 개를 세로로 쌓으면 가입 화면이 지나치게 길어진다.
   넓은 화면에서는 나란히, 좁아지면 자동으로 1단. */
.au_terms_grid{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;
    align-items:start;
}
.au_terms_grid .au_terms{ margin:0; display:flex; flex-direction:column; }
/* 2단일 때 두 카드의 높이를 맞춘다 — 본문이 늘어나고 동의줄은 바닥에 붙는다 */
.au_terms_grid .au_terms__body{ flex:1 1 auto; max-height:240px; }
.au_terms_grid .au_terms__foot{ margin-top:auto; }

@media (max-width:760px){
    .au_terms_grid{ grid-template-columns:1fr; gap:12px; }
    .au_terms_grid .au_terms__body{ max-height:180px; }
}

/* 소셜 가입폼도 같은 2단 규칙을 쓴다 */
.social_register .au_terms_grid{ margin-bottom:0; }