/* 소소도담 휴대폰 인증 공통 UI */
.g5cc-sms-widget{
    --sd-pink:#e88fa8;
    --sd-pink-strong:#d66f8d;
    --sd-pink-soft:#fff5f8;
    --sd-pink-soft2:#fff9fb;
    --sd-line:#eadde2;
    --sd-text:#3f373b;
    --sd-muted:#887a80;
    width:100%;
    margin:10px 0 0;
    padding:14px;
    box-sizing:border-box;
    border:1px solid var(--sd-line);
    border-radius:12px;
    background:#fff;
    color:var(--sd-text);
    font-family:inherit;
    box-shadow:0 4px 16px rgba(102,67,79,.045);
}
.g5cc-sms-widget *{box-sizing:border-box}

.g5cc-sms-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 12px;
}
.g5cc-sms-head-copy{min-width:0}
.g5cc-sms-head-copy strong{
    display:block;
    margin:0;
    color:#4e4146;
    font-size:13px;
    line-height:1.35;
    font-weight:800;
}
.g5cc-sms-head-copy span{
    display:block;
    margin:3px 0 0!important;
    color:#96888d!important;
    font-size:11px!important;
    line-height:1.4!important;
    font-weight:400!important;
}
.g5cc-sms-limit{
    flex:0 0 auto;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-height:24px;
    margin:0!important;
    padding:0 9px;
    border:1px solid #f1dce4;
    border-radius:999px;
    background:var(--sd-pink-soft);
    color:#b05d76!important;
    font-size:10.5px!important;
    line-height:22px!important;
    font-weight:800!important;
    white-space:nowrap;
}

.g5cc-sms-field{margin:0 0 10px}
.g5cc-sms-field label,
.g5cc-sms-code-label{
    display:block;
    margin:0 0 6px;
    color:#75666c;
    font-size:11px;
    line-height:1.35;
    font-weight:700;
}
.g5cc-sms-field input,
.g5cc-sms-code,
.g5cc-sms-reset input{
    display:block;
    width:100%;
    min-width:0;
    height:44px;
    margin:0;
    padding:0 12px;
    border:1px solid #ded4d8!important;
    border-radius:9px!important;
    outline:0;
    background:#fff!important;
    color:#383034!important;
    font-family:inherit;
    font-size:13px;
    line-height:42px;
    box-shadow:none!important;
    -webkit-appearance:none;
    appearance:none;
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.g5cc-sms-field input::placeholder,
.g5cc-sms-code::placeholder,
.g5cc-sms-reset input::placeholder{color:#b2a6aa;opacity:1}
.g5cc-sms-field input:focus,
.g5cc-sms-code:focus,
.g5cc-sms-reset input:focus{
    border-color:#e6a3b6!important;
    box-shadow:0 0 0 3px rgba(232,143,168,.12)!important;
}

.g5cc-sms-code-block{margin:0}
.g5cc-sms-code-row{
    display:grid;
    grid-template-columns:minmax(180px,1fr) 118px;
    gap:7px;
    align-items:stretch;
    width:100%;
}

.g5cc-sms-widget.has-code .g5cc-sms-code-row{
    grid-template-columns:minmax(150px,1fr) 106px 92px;
}
.g5cc-sms-code-shell{position:relative;min-width:0}
.g5cc-sms-code{
    width:100%!important;
    min-width:180px!important;
    height:44px!important;
    padding-right:56px!important;
    font-size:15px!important;
    line-height:42px!important;
    font-weight:800!important;
    letter-spacing:.06em;
    font-variant-numeric:tabular-nums;
}
.g5cc-sms-code[readonly]{background:#faf7f8!important;color:#75686d!important}
.g5cc-sms-time{
    position:absolute;
    top:50%;
    right:12px;
    display:block!important;
    min-width:34px;
    margin:0!important;
    transform:translateY(-50%);
    color:var(--sd-pink-strong)!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:800!important;
    text-align:right;
    font-variant-numeric:tabular-nums;
    pointer-events:none;
}
.g5cc-sms-time:empty{display:none!important}

.g5cc-sms-send,
.g5cc-sms-verify,
.g5cc-sms-reset-submit{
    width:auto;
    min-width:0;
    height:44px;
    margin:0;
    padding:0 12px;
    border:1px solid #ead6dd!important;
    border-radius:9px!important;
    background:#fff7fa!important;
    color:#a95570!important;
    font-family:inherit;
    font-size:11.5px;
    line-height:42px;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
    box-shadow:none!important;
    -webkit-appearance:none;
    appearance:none;
    transition:border-color .15s ease,background .15s ease,color .15s ease,transform .12s ease;
}
.g5cc-sms-send:hover{border-color:#e2afbd!important;background:#fff1f5!important;color:#96455f!important}
.g5cc-sms-verify,
.g5cc-sms-reset-submit{
    border-color:var(--sd-pink)!important;
    background:var(--sd-pink)!important;
    color:#fff!important;
}
.g5cc-sms-verify:hover,
.g5cc-sms-reset-submit:hover{border-color:var(--sd-pink-strong)!important;background:var(--sd-pink-strong)!important;color:#fff!important}
.g5cc-sms-send:active,.g5cc-sms-verify:active,.g5cc-sms-reset-submit:active{transform:translateY(1px)}
.g5cc-sms-send[disabled],
.g5cc-sms-verify[disabled],
.g5cc-sms-reset-submit[disabled]{
    border-color:#e8e1e4!important;
    background:#f4f2f3!important;
    color:#aaa1a5!important;
    cursor:default;
    transform:none;
}
.g5cc-sms-verify[hidden]{display:none!important}

.g5cc-sms-message{
    min-height:0;
    margin:7px 0 0;
    color:#83767b;
    font-size:11px;
    line-height:1.45;
    word-break:keep-all;
}
.g5cc-sms-message:empty{display:none}
.g5cc-sms-message.ok,.g5cc-sms-message.error{position:relative;padding-left:16px;font-weight:700}
.g5cc-sms-message.ok{color:#4f7d67}
.g5cc-sms-message.error{color:#b44f66}
.g5cc-sms-message.ok:before,.g5cc-sms-message.error:before{position:absolute;left:0;top:0;width:12px;text-align:center;font-weight:900}
.g5cc-sms-message.ok:before{content:'✓'}
.g5cc-sms-message.error:before{content:'!'}

.g5cc-sms-notice{
    margin:10px 0 0;
    padding:9px 10px;
    border:1px solid #f0e5e9;
    border-radius:9px;
    background:var(--sd-pink-soft2);
    color:#877a7f;
    font-size:10.5px;
    line-height:1.5;
    word-break:keep-all;
}
.g5cc-sms-notice-main{color:#6d5e64;font-weight:800}
.g5cc-sms-notice-sub{margin-top:1px;color:#9a8d92}
.g5cc-sms-notice-extra{margin-top:5px;padding-top:5px;border-top:1px dashed #ecdde3;color:#7e7076}

.g5cc-sms-result{
    margin-top:10px;
    padding:10px 11px;
    border:1px solid #eadfe3;
    border-radius:9px;
    background:#fff;
    color:#584c51;
    font-size:11.5px;
    line-height:1.6;
}
.g5cc-sms-result strong{color:#41373b;font-weight:800}
.g5cc-sms-reset{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px dashed #eadde2;
}
.g5cc-sms-reset .g5cc-sms-reset-submit{grid-column:1/-1;width:100%}
.g5cc-sms-reset[hidden],.g5cc-sms-result[hidden]{display:none!important}

/* 회원가입 안에서는 별도 카드가 겹쳐 보이지 않도록 폼에 붙는 느낌으로 */
.sodam-auth-widget-wrap .g5cc-sms-widget{
    margin-top:9px;
    border-color:#eee0e5;
    background:linear-gradient(180deg,#fff 0%,#fffafb 100%);
    box-shadow:none;
}

/* 인증 완료 */
.g5cc-sms-widget.is-verified{
    border-color:#cfe4d8;
    background:linear-gradient(180deg,#fff 0%,#fbfffc 100%);
}
.g5cc-sms-widget.is-verified .g5cc-sms-limit{border-color:#d7eadd;background:#f3fbf6;color:#54806a!important}

/* 모바일 */
@media(max-width:760px){
    .g5cc-sms-widget{padding:12px;border-radius:11px}
    .g5cc-sms-head{margin-bottom:10px}
    .g5cc-sms-head-copy span{font-size:10.5px!important}
    .g5cc-sms-code-row,
    .g5cc-sms-widget.has-code .g5cc-sms-code-row{grid-template-columns:minmax(0,1fr) minmax(96px,auto)}
    .g5cc-sms-code-shell{grid-column:1/-1}
    .g5cc-sms-code{min-width:0!important;height:44px!important}
    .g5cc-sms-send,.g5cc-sms-verify{width:100%;height:42px;line-height:40px}
    .g5cc-sms-notice{font-size:10px}
}
@media(max-width:390px){
    .g5cc-sms-head{align-items:flex-start}
    .g5cc-sms-code-row{grid-template-columns:1fr 1fr;gap:6px}
    .g5cc-sms-reset{grid-template-columns:1fr}
    .g5cc-sms-reset .g5cc-sms-reset-submit{grid-column:auto}
}

/* 다크모드 */
html.dark .g5cc-sms-widget,
body.dark .g5cc-sms-widget,
body.darkmode .g5cc-sms-widget,
[data-theme="dark"] .g5cc-sms-widget{
    --sd-line:#403338;
    --sd-text:#eee6e9;
    --sd-muted:#b9aab0;
    --sd-pink-soft:#35262c;
    --sd-pink-soft2:#2c2327;
    border-color:#403338;
    background:#241d20;
    color:#eee6e9;
    box-shadow:none;
}
html.dark .g5cc-sms-head-copy strong,body.dark .g5cc-sms-head-copy strong,body.darkmode .g5cc-sms-head-copy strong,[data-theme="dark"] .g5cc-sms-head-copy strong{color:#eee6e9}
html.dark .g5cc-sms-head-copy span,body.dark .g5cc-sms-head-copy span,body.darkmode .g5cc-sms-head-copy span,[data-theme="dark"] .g5cc-sms-head-copy span{color:#aa9ca1!important}
html.dark .g5cc-sms-field label,html.dark .g5cc-sms-code-label,
body.dark .g5cc-sms-field label,body.dark .g5cc-sms-code-label,
body.darkmode .g5cc-sms-field label,body.darkmode .g5cc-sms-code-label,
[data-theme="dark"] .g5cc-sms-field label,[data-theme="dark"] .g5cc-sms-code-label{color:#b9aab0}
html.dark .g5cc-sms-field input,html.dark .g5cc-sms-code,html.dark .g5cc-sms-reset input,
body.dark .g5cc-sms-field input,body.dark .g5cc-sms-code,body.dark .g5cc-sms-reset input,
body.darkmode .g5cc-sms-field input,body.darkmode .g5cc-sms-code,body.darkmode .g5cc-sms-reset input,
[data-theme="dark"] .g5cc-sms-field input,[data-theme="dark"] .g5cc-sms-code,[data-theme="dark"] .g5cc-sms-reset input{
    border-color:#493c41!important;background:#201a1d!important;color:#f2e9ec!important;
}
html.dark .g5cc-sms-notice,body.dark .g5cc-sms-notice,body.darkmode .g5cc-sms-notice,[data-theme="dark"] .g5cc-sms-notice{border-color:#40343a;background:#2b2226;color:#b5a7ac}
html.dark .g5cc-sms-notice-main,body.dark .g5cc-sms-notice-main,body.darkmode .g5cc-sms-notice-main,[data-theme="dark"] .g5cc-sms-notice-main{color:#ddd1d5}
html.dark .g5cc-sms-notice-extra,body.dark .g5cc-sms-notice-extra,body.darkmode .g5cc-sms-notice-extra,[data-theme="dark"] .g5cc-sms-notice-extra{border-top-color:#493a40;color:#b7a9ae}
html.dark .g5cc-sms-result,body.dark .g5cc-sms-result,body.darkmode .g5cc-sms-result,[data-theme="dark"] .g5cc-sms-result{border-color:#44373c;background:#201a1d;color:#d7cbd0}
html.dark .sodam-auth-widget-wrap .g5cc-sms-widget,body.dark .sodam-auth-widget-wrap .g5cc-sms-widget,body.darkmode .sodam-auth-widget-wrap .g5cc-sms-widget,[data-theme="dark"] .sodam-auth-widget-wrap .g5cc-sms-widget{background:#241d20}

/* 실제 회원 스킨과 연결되는 소소도담 인증 영역 */
.sodam-auth-item{position:relative}
.sodam-auth-field-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 8px;
}
.sodam-auth-field-title{
    display:block!important;
    margin:0!important;
    color:#6e6065!important;
    font-size:12px!important;
    line-height:1.35!important;
    font-style:normal;
    font-weight:700!important;
}
.sodam-auth-required{
    display:inline-flex;
    align-items:center;
    height:22px;
    margin:0;
    padding:0 8px;
    border:1px solid #f0d8e0;
    border-radius:999px;
    background:#fff5f8;
    color:#b45f77;
    font-size:10px;
    line-height:20px;
    font-style:normal;
    font-weight:800;
    white-space:nowrap;
}
.sodam-auth-item > #reg_mb_hp,
.sodam-auth-item > input[name="mb_hp"]{
    width:100%!important;
    min-height:44px;
    border-radius:9px!important;
}
.sodam-auth-widget-wrap{width:100%}

.sodam-recovery-card{
    margin:14px 0 0!important;
    padding:15px!important;
    border:1px solid #eadde2;
    border-radius:13px;
    background:#fff;
    box-shadow:0 4px 16px rgba(103,68,80,.04);
}
.sodam-recovery-head{margin:0 0 10px;text-align:left}
.sodam-recovery-kicker{
    display:inline-flex!important;
    align-items:center;
    height:22px;
    margin:0 0 7px!important;
    padding:0 8px;
    border:1px solid #f0dbe2;
    border-radius:999px;
    background:#fff5f8;
    color:#b45d76!important;
    font-size:10px!important;
    line-height:20px!important;
    font-weight:800!important;
}
.sodam-recovery-head strong{
    display:block;
    margin:0;
    color:#42393d;
    font-size:15px;
    line-height:1.4;
    font-weight:800;
}
.sodam-recovery-head p{
    margin:4px 0 0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#8e8085!important;
    font-size:11px!important;
    line-height:1.5!important;
    text-align:left!important;
}
.sodam-recovery-card .g5cc-sms-widget{
    margin-top:0;
    padding:12px;
    border-color:#f0e5e9;
    background:#fffafd;
    box-shadow:none;
}
.sodam-recovery-card .g5cc-sms-head{display:none}

html.dark .sodam-auth-field-title,body.dark .sodam-auth-field-title,body.darkmode .sodam-auth-field-title,[data-theme="dark"] .sodam-auth-field-title{color:#c8bbc0!important}
html.dark .sodam-auth-required,body.dark .sodam-auth-required,body.darkmode .sodam-auth-required,[data-theme="dark"] .sodam-auth-required{border-color:#543943;background:#35262c;color:#dfa4b5}
html.dark .sodam-recovery-card,body.dark .sodam-recovery-card,body.darkmode .sodam-recovery-card,[data-theme="dark"] .sodam-recovery-card{border-color:#403338;background:#241d20;box-shadow:none}
html.dark .sodam-recovery-head strong,body.dark .sodam-recovery-head strong,body.darkmode .sodam-recovery-head strong,[data-theme="dark"] .sodam-recovery-head strong{color:#eee6e9}
html.dark .sodam-recovery-head p,body.dark .sodam-recovery-head p,body.darkmode .sodam-recovery-head p,[data-theme="dark"] .sodam-recovery-head p{color:#aa9ca1!important}

@media(max-width:760px){
    .sodam-auth-field-head{margin-bottom:7px}
    .sodam-auth-required{height:21px;padding:0 7px;font-size:9.5px;line-height:19px}
    .sodam-recovery-card{margin-top:10px!important;padding:12px!important;border-radius:11px}
    .sodam-recovery-head strong{font-size:14px}
}