/* =========================================================
   SG Member Index CSS
   ---------------------------------------------------------
   대상: /index.php
   전제: /inc/member_layout.php 안에서 렌더링
   목적:
   - 로그인/인트로 첫 화면 전용 디자인
   - 공통 sg_member_common.css는 레이아웃/WebView만 담당
   - 여기서는 index 화면만 담당
========================================================= */

/* =========================================================
   1. Index 전체 화면
   - member_layout의 header 아래 content-wrap 안에서만 동작
   - 100dvh를 직접 잡지 않고, header 높이를 뺀 값으로 맞춤
========================================================= */
.sg-login-page{
    position:relative;
    width:100%;
    min-width:0;
    min-height:calc(100dvh - var(--header-height,100px) - var(--webview-statusbar-h,0px));
    display:grid;
    place-items:stretch;
    overflow:hidden;
    isolation:isolate;
    color:#fff;
    background:
        radial-gradient(circle at 18% 18%, rgba(91,140,255,.32), transparent 30%),
        radial-gradient(circle at 82% 78%, rgba(124,58,237,.28), transparent 32%),
        radial-gradient(circle at 70% 20%, rgba(49,233,129,.12), transparent 28%),
        linear-gradient(135deg,#07111f 0%,#0b1730 48%,#101827 100%);
}

/* 움직이는 바둑판형 그리드 */
.sg-login-grid{
    position:absolute;
    inset:-100px;
    z-index:-4;
    opacity:.72;
    transform:rotate(-7deg);
    background-image:
        linear-gradient(rgba(255,255,255,.105) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.105) 1px, transparent 1px);
    background-size:54px 54px;
    background-position:0 0;
    animation:sg-index-grid-diagonal 16s linear infinite;
    pointer-events:none;
}

.sg-login-grid::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(56,189,248,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,189,248,.13) 1px, transparent 1px);
    background-size:162px 162px;
    background-position:0 0;
    animation:sg-index-grid-diagonal-large 26s linear infinite reverse;
}

/* 흐르는 빛 */
.sg-login-page::after{
    content:"";
    position:absolute;
    inset:-30%;
    z-index:-3;
    pointer-events:none;
    opacity:.14;
    background:linear-gradient(115deg,transparent 0%,transparent 43%,rgba(255,255,255,.22) 50%,transparent 57%,transparent 100%);
    animation:sg-index-scan 8s ease-in-out infinite;
}

/* 오로라 도형 */
.sg-orb{
    position:absolute;
    z-index:-3;
    border-radius:999px;
    filter:blur(2px);
    pointer-events:none;
}

.sg-orb.one{
    width:360px;
    height:360px;
    left:-120px;
    top:10%;
    background:radial-gradient(circle, rgba(91,140,255,.32), transparent 68%);
    animation:sg-index-float-a 8s ease-in-out infinite;
}

.sg-orb.two{
    width:460px;
    height:460px;
    right:-170px;
    bottom:-120px;
    background:radial-gradient(circle, rgba(124,58,237,.32), transparent 68%);
    animation:sg-index-float-b 10s ease-in-out infinite;
}

.sg-orb.three{
    width:240px;
    height:240px;
    right:24%;
    top:8%;
    background:radial-gradient(circle, rgba(49,233,129,.16), transparent 68%);
    animation:sg-index-float-c 9s ease-in-out infinite;
}

/* =========================================================
   2. 좌측 소개 + 우측 로그인 구조
========================================================= */
.sg-login-shell{
    width:100%;
    min-height:inherit;
    display:grid;

    /* 좌측 기준선 고정 + 우측 로그인 영역은 화면 오른쪽으로 확장 */
    grid-template-columns:minmax(560px,760px) minmax(460px,1fr);

    align-items:stretch;
    margin:0;
    padding-left:max(24px,calc((100vw - 1440px) / 2));
    padding-right:0;
}

.sg-login-left{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:clamp(30px,4.5vw,56px) clamp(34px,5vw,86px);
    position:relative;
}

.sg-brand{
    display:inline-flex;
    align-items:center;
    gap:14px;
    width:max-content;
    max-width:100%;
    animation:sg-index-up .45s ease both;
}

.sg-brand-mark{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(91,140,255,.95), rgba(124,58,237,.95));
    box-shadow:0 18px 48px rgba(91,140,255,.32);
    font-size:1.32rem;
    color:#fff;
}

.sg-brand-text strong{
    display:block;
    font-size:1.2rem;
    font-weight:950;
    letter-spacing:-.045em;
    color:#fff;
}

.sg-brand-text span{
    display:block;
    margin-top:2px;
    color:rgba(226,232,240,.72);
    font-size:.82rem;
    font-weight:750;
}

.sg-hero{
    max-width:780px;
    padding:clamp(28px,4.2vw,54px) 0 clamp(22px,3vw,38px);
}

.sg-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
    padding:8px 13px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.13);
    color:rgba(255,255,255,.88);
    font-size:.88rem;
    font-weight:850;
    backdrop-filter:blur(12px);
    animation:sg-index-up .5s ease both;
    animation-delay:.04s;
}

.sg-title{
    margin:0;
    max-width:820px;
    font-size:clamp(2.15rem,3.9vw,3.75rem);
    font-weight:850;
    line-height:.98;
    letter-spacing:-.07em;
    color:transparent;
    background:
        linear-gradient(90deg,
            #ffffff 0%,
            #dbeafe 28%,
            #7dd3fc 54%,
            #a7f3d0 74%,
            #ffffff 100%);
    background-size:230% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    text-shadow:0 24px 80px rgba(56,189,248,.18);
    animation:sg-index-title-flow 8s ease-in-out infinite, sg-index-up .58s ease both;
    animation-delay:0s,.09s;
}

.sg-desc{
    max-width:650px;
    margin:22px 0 0;
    color:rgba(226,232,240,.72);
    font-size:1rem;
    line-height:1.68;
    font-weight:600;
    animation:sg-index-up .58s ease both;
    animation-delay:.15s;
}

.sg-main-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px;
    animation:sg-index-up .58s ease both;
    animation-delay:.2s;
}

.sg-main-btn{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 18px;
    border-radius:16px;
    font-size:.92rem;
    font-weight:950;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.sg-main-btn:hover{
    transform:translateY(-2px);
}

.sg-main-btn-primary{
    color:#06111f;
    background:linear-gradient(135deg,#ffffff,#bfdbfe);
    box-shadow:0 16px 34px rgba(56,189,248,.2);
}

.sg-main-btn-glass{
    color:#ffffff;
    background:rgba(255,255,255,.085);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(12px);
}

.sg-quick{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    max-width:760px;
    margin-top:30px;
    animation:sg-index-up .58s ease both;
    animation-delay:.27s;
}

.sg-quick-item{
    min-width:0;
    min-height:88px;
    padding:16px;
    border-radius:22px;
    background:rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    overflow:hidden;
    position:relative;
}

.sg-quick-item::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-120%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
    animation:sg-index-card-light 5.8s ease-in-out infinite;
}

.sg-quick-item:nth-child(2)::after{animation-delay:1.1s;}
.sg-quick-item:nth-child(3)::after{animation-delay:2.2s;}

.sg-quick-item i{
    font-size:1.38rem;
    color:#93c5fd;
}

.sg-quick-item strong{
    display:block;
    margin-top:10px;
    font-size:.94rem;
    font-weight:900;
    letter-spacing:-.035em;
    color:#fff;
}

.sg-quick-item span{
    display:block;
    margin-top:5px;
    color:rgba(226,232,240,.64);
    font-size:.8rem;
    line-height:1.38;
    font-weight:650;
}

.sg-footer-note{
    color:rgba(226,232,240,.58);
    font-size:.84rem;
    font-weight:650;
    animation:sg-index-up .58s ease both;
    animation-delay:.28s;
}

/* =========================================================
   3. 로그인 카드
========================================================= */
.sg-login-right{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:28px 48px;
    background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
    border-left:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(22px);
}

.sg-login-right > div{
    width:100%;
    min-width:0;
}

.sg-login-card{
    width:100%;
    max-width:500px;
    margin:0;
    padding:32px;
    border:1px solid rgba(255,255,255,.62);
    border-radius:30px;
    background:rgba(255,255,255,.93);
    color:#101827;
    box-shadow:0 34px 90px rgba(0,0,0,.32);
    animation:sg-index-card-in .5s ease both;
    overflow:hidden;
    position:relative;
}

.sg-login-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:5px;
    background:linear-gradient(90deg,#5b8cff,#38bdf8,#31e981);
}

.sg-mobile-brand,
.sg-mobile-intro{
    display:none;
}

.sg-login-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:14px;
    padding:7px 11px;
    border-radius:999px;
    background:#eef2ff;
    color:#4338ca;
    font-size:.82rem;
    font-weight:900;
}

.sg-login-title{
    margin-bottom:22px;
}

.sg-login-title h1{
    margin:0;
    font-size:1.72rem;
    font-weight:950;
    letter-spacing:-.055em;
}

.sg-login-title p{
    margin:9px 0 0;
    color:#64748b;
    font-size:.93rem;
    line-height:1.55;
    font-weight:600;
}

.sg-login-page .form-label{
    font-weight:850;
    color:#334155;
    font-size:.9rem;
}

.sg-login-page .input-group-text{
    width:48px;
    justify-content:center;
    border:1px solid #dbe3ef;
    border-right:0;
    border-radius:17px 0 0 17px;
    background:#f8fafc;
    color:#64748b;
}

.sg-login-page .form-control{
    height:52px;
    border:1px solid #dbe3ef;
    border-left:0;
    border-radius:0 17px 17px 0;
    font-weight:700;
    color:#111827;
}

.sg-login-page .form-control:focus{
    border-color:#b8c7ff;
    box-shadow:0 0 0 4px rgba(91,140,255,.14);
}

.password-wrap .form-control{
    padding-right:48px;
}

.password-toggle{
    position:absolute;
    right:12px;
    top:50%;
    z-index:10;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:#64748b;
    line-height:1;
}

.password-toggle:hover{
    background:#f1f5f9;
    color:#334155;
}

.btn-login{
    height:52px;
    border:0;
    border-radius:17px;
    font-weight:950;
    background:linear-gradient(135deg,#5b8cff,#7c3aed);
    box-shadow:0 16px 34px rgba(91,140,255,.32);
    transition:transform .18s ease, box-shadow .18s ease;
}

.btn-login:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 42px rgba(91,140,255,.42);
}

.login-option-row{
    flex-wrap:nowrap;
}

.login-option-row .form-check{
    flex:0 0 auto;
    min-width:108px;
    white-space:nowrap;
}

.login-option-links{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    white-space:nowrap;
    word-break:keep-all;
    line-height:1.2;
}

.login-option-links a,
.login-option-links span{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    word-break:keep-all;
}

.sg-login-notice{
    line-height:1.5;
}

.sg-login-help{
    margin-top:18px;
    padding:14px;
    border-radius:19px;
    background:#f8fafc;
    color:#64748b;
    font-size:.86rem;
    line-height:1.55;
    font-weight:600;
}

.sg-login-help strong{
    color:#334155;
    font-weight:900;
}

.sg-help-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:12px;
}

.sg-help-link{
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 9px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    color:#334155;
    font-size:.84rem;
    font-weight:900;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sg-help-link:hover{
    transform:translateY(-2px);
    border-color:#bfdbfe;
    box-shadow:0 12px 24px rgba(15,23,42,.08);
}

/* 환영 메시지 */
.sg-welcome-message{
    position:fixed;
    top:30%;
    left:50%;
    transform:translate(-50%, -50%) scale(.3);
    padding:1.5rem 2rem;
    font-size:1.5rem;
    color:#444;
    font-weight:700;
    background:rgba(255,255,255,.9);
    border-radius:1rem;
    box-shadow:0 0 20px rgba(0,0,0,.2);
    opacity:0;
    z-index:9999;
    pointer-events:none;
    transition:transform 1s ease-out, opacity 1s ease-out;
}

/* =========================================================
   4. 반응형
========================================================= */
@media (max-width:1199.98px){
    .sg-login-shell{
        grid-template-columns:minmax(500px,620px) minmax(400px,1fr);
        padding-left:24px;
    }

    .sg-login-left{
        padding:34px;
    }

    .sg-quick{
        grid-template-columns:1fr;
        max-width:430px;
    }

    .sg-quick-item{
        min-height:76px;
    }
}

@media (max-width:991.98px){
    .sg-login-page{
        min-height:calc(100dvh - var(--header-height,82px) - var(--webview-statusbar-h,0px));
        place-items:stretch;
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .sg-login-grid{
        inset:-60px;
        opacity:.48;
        background-size:62px 62px;
        animation-duration:18s;
    }

    .sg-orb.one{
        width:240px;
        height:240px;
        left:-120px;
        top:0;
    }

    .sg-orb.two{
        width:320px;
        height:320px;
        right:-160px;
        bottom:-120px;
    }

    .sg-orb.three,
    .sg-login-left{
        display:none;
    }

    .sg-login-shell{
        width:100%;
        min-height:inherit;
        display:block;
        padding-left:0;
        padding-right:0;
    }

    .sg-login-right{
        min-height:inherit;
        padding:22px;
        border-left:0;
        background:transparent;
        backdrop-filter:none;
        align-items:flex-start;
    }

    .sg-login-card{
        max-width:500px;
        padding:28px;
        border-radius:28px;
        background:rgba(255,255,255,.95);
        box-shadow:0 28px 72px rgba(0,0,0,.34);
        animation:sg-index-up .45s ease both;
    }

    .sg-mobile-brand{
        display:flex;
        align-items:center;
        gap:13px;
        margin-bottom:18px;
        color:#fff;
    }

    .sg-mobile-intro{
        display:block;
        color:#fff;
        margin:0 0 14px;
        padding:16px;
        border-radius:22px;
        background:rgba(255,255,255,.08);
        border:1px solid rgba(255,255,255,.12);
        backdrop-filter:blur(14px);
    }

    .sg-mobile-intro strong{
        display:block;
        font-size:1.22rem;
        line-height:1.25;
        font-weight:950;
        letter-spacing:-.055em;
    }

    .sg-mobile-intro p{
        margin:8px 0 0;
        color:rgba(226,232,240,.72);
        font-size:.88rem;
        line-height:1.55;
        font-weight:650;
    }

    .sg-mobile-brand .sg-brand-mark{
        width:46px;
        height:46px;
        border-radius:17px;
    }

    .sg-mobile-brand .sg-brand-text strong{
        color:#fff;
        font-size:1.16rem;
    }

    .sg-mobile-brand .sg-brand-text span{
        color:rgba(226,232,240,.7);
    }

    .sg-login-title{
        margin-bottom:22px;
    }
}

@media (max-width:575.98px){
    .sg-login-right{
        padding:18px 15px;
    }

    .sg-login-card{
        padding:23px;
        border-radius:25px;
    }

    .sg-login-title h1{
        font-size:1.5rem;
    }

    .sg-login-title p,
    .sg-login-help{
        font-size:.86rem;
    }

    .sg-login-page .form-control,
    .sg-login-page .input-group-text,
    .btn-login{
        height:51px;
    }

    .d-flex.login-option-row{
        align-items:flex-start!important;
        flex-direction:column;
        gap:10px!important;
    }

    .login-option-links{
        justify-content:flex-start;
        width:100%;
        font-size:.84rem;
        gap:5px;
    }

    .sg-help-actions{
        grid-template-columns:1fr;
    }
}

@media (max-width:768px){
    .sg-welcome-message{
        top:40%;
        padding:1rem 1.5rem;
        font-size:1.15rem;
    }
}

@media (max-width:380px){
    .login-option-links{
        font-size:.8rem;
        letter-spacing:-.02em;
    }

    .sg-login-card{
        padding:20px;
    }
}


@media (min-width:992px) and (max-width:1080px){
    .sg-login-shell{
        grid-template-columns:minmax(460px,540px) minmax(390px,1fr);
        padding-left:22px;
    }

    .sg-login-left{
        padding-left:28px;
        padding-right:24px;
    }

    .sg-title{
        font-size:clamp(2.15rem,3.9vw,3.75rem);
        line-height:1.04;
        letter-spacing:-.06em;
    }

    .sg-desc{
        font-size:.95rem;
    }

    .sg-login-right{
        padding-left:22px;
        padding-right:22px;
    }

    .sg-login-card{
        padding:28px;
    }
}

@media (min-width:992px) and (max-height:760px){
    .sg-login-left{
        padding-top:22px;
        padding-bottom:20px;
    }

    .sg-hero{
        padding:18px 0 18px;
    }

    .sg-title{
        font-size:clamp(2.4rem,5vw,4.7rem);
    }

    .sg-desc{
        margin-top:14px;
        font-size:.94rem;
        line-height:1.55;
    }

    .sg-quick{
        margin-top:18px;
    }

    .sg-quick-item{
        min-height:72px;
        padding:13px;
    }

    .sg-login-card{
        padding:26px;
    }

    .sg-login-page .form-control,
    .sg-login-page .input-group-text,
    .btn-login{
        height:49px;
    }
}

/* =========================================================
   5. 애니메이션
========================================================= */
@keyframes sg-index-grid-diagonal{
    from{background-position:0 0;}
    to{background-position:162px 108px;}
}

@keyframes sg-index-grid-diagonal-large{
    from{background-position:0 0;}
    to{background-position:-162px 162px;}
}

@keyframes sg-index-scan{
    0%,100%{transform:translateX(-50%);opacity:.04;}
    45%,55%{opacity:.16;}
    100%{transform:translateX(50%);}
}

@keyframes sg-index-float-a{
    0%,100%{transform:translate3d(0,0,0) scale(1);}
    50%{transform:translate3d(28px,22px,0) scale(1.08);}
}

@keyframes sg-index-float-b{
    0%,100%{transform:translate3d(0,0,0) scale(1);}
    50%{transform:translate3d(-30px,-28px,0) scale(1.06);}
}

@keyframes sg-index-float-c{
    0%,100%{transform:translate3d(0,0,0);}
    50%{transform:translate3d(22px,-24px,0);}
}

@keyframes sg-index-title-flow{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
}

@keyframes sg-index-card-light{
    0%,55%{transform:translateX(-120%);}
    82%,100%{transform:translateX(120%);}
}

@keyframes sg-index-card-in{
    from{opacity:0;transform:translateX(28px);}
    to{opacity:1;transform:translateX(0);}
}

@keyframes sg-index-up{
    from{opacity:0;transform:translateY(18px);}
    to{opacity:1;transform:translateY(0);}
}

@media (prefers-reduced-motion:reduce){
    .sg-login-grid,
    .sg-login-grid::after,
    .sg-login-page::after,
    .sg-orb,
    .sg-title,
    .sg-quick-item::after{
        animation:none!important;
    }
}

/* =========================================================
   SG MEMBER SHARED PAGES CSS
   ---------------------------------------------------------
   index.php 디자인 톤을 회원 관련 페이지에 공통 적용
   - /inc/member_layout.php 내부 렌더링 기준
   - PC / Mobile / Android WebView 대응
   - 기존 공통 그리드는 sg_member_common.css 사용
========================================================= */
.sg-member-page{
    position:relative;
    width:100%;
    min-width:0;
    min-height:calc(100dvh - var(--header-height,100px) - var(--webview-statusbar-h,0px));
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 18% 18%, rgba(91,140,255,.24), transparent 30%),
        radial-gradient(circle at 82% 78%, rgba(124,58,237,.20), transparent 32%),
        radial-gradient(circle at 70% 20%, rgba(49,233,129,.10), transparent 28%),
        linear-gradient(135deg,#07111f 0%,#0b1730 48%,#101827 100%);
}

.sg-member-page::before{
    content:"";
    position:absolute;
    inset:-100px;
    z-index:0;
    pointer-events:none;
    opacity:.42;
    transform:rotate(-7deg);
    background-image:
        linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px),
        linear-gradient(rgba(56,189,248,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,189,248,.10) 1px, transparent 1px);
    background-size:54px 54px,54px 54px,162px 162px,162px 162px;
}

.sg-member-shell{
    position:relative;
    z-index:1;
    width:100%;
    min-height:inherit;
    margin:0;
    display:grid;

    /* 공통 회원 페이지: 좌측은 고정 기준, 우측은 화면 오른쪽으로 확장 */
    grid-template-columns:minmax(540px,720px) minmax(420px,1fr);

    align-items:stretch;
    padding-left:max(24px,calc((100vw - 1320px) / 2));
    padding-right:0;
}

.sg-member-shell-wide{
    /* 넓은 폼 페이지는 우측을 더 크게 쓰되, 커질 때 오른쪽으로만 확장 */
    grid-template-columns:minmax(430px,600px) minmax(560px,1fr);
}

.sg-member-left{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:clamp(30px,4.5vw,56px) clamp(34px,5vw,78px);
}

.sg-member-hero{max-width:760px;padding:clamp(24px,4vw,48px) 0;}
.sg-member-kicker{
    display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:8px 13px;border-radius:999px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.88);
    font-size:.88rem;font-weight:850;backdrop-filter:blur(12px);
}
.sg-member-title{
    margin:0;max-width:760px;font-size:clamp(2.15rem,3.9vw,3.75rem);font-weight:850;line-height:1.02;letter-spacing:-.065em;color:transparent;
    background:linear-gradient(90deg,#fff 0%,#dbeafe 28%,#7dd3fc 54%,#a7f3d0 76%,#fff 100%);
    background-size:230% 100%;-webkit-background-clip:text;background-clip:text;text-shadow:0 24px 80px rgba(56,189,248,.18);
}
.sg-member-desc{max-width:640px;margin:22px 0 0;color:rgba(226,232,240,.72);font-size:1rem;line-height:1.68;font-weight:600;}
.sg-member-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:760px;margin-top:30px;}
.sg-member-point{min-width:0;min-height:88px;padding:16px;border-radius:22px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px);}
.sg-member-point i{font-size:1.38rem;color:#93c5fd;}
.sg-member-point strong{display:block;margin-top:10px;font-size:.94rem;font-weight:900;letter-spacing:-.035em;color:#fff;}
.sg-member-point span{display:block;margin-top:5px;color:rgba(226,232,240,.64);font-size:.8rem;line-height:1.38;font-weight:650;}
.sg-member-footer-note{color:rgba(226,232,240,.58);font-size:.84rem;font-weight:650;}

.sg-member-right{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:28px clamp(26px,3vw,48px);
    background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
    border-left:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(22px);
}
.sg-member-right > div{width:100%;min-width:0;}

.sg-member-card{
    width:100%;max-width:520px;margin:0;padding:32px;border:1px solid rgba(255,255,255,.62);border-radius:30px;
    background:rgba(255,255,255,.94);color:#101827;box-shadow:0 34px 90px rgba(0,0,0,.32);overflow:hidden;position:relative;
}
.sg-member-card-wide{max-width:760px;}
.sg-member-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#5b8cff,#38bdf8,#31e981);}
.sg-member-badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;padding:7px 11px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:.82rem;font-weight:900;}
.sg-member-card-title{margin:0;font-size:1.72rem;font-weight:950;letter-spacing:-.055em;color:#101827;}
.sg-member-card-desc{margin:9px 0 22px;color:#64748b;font-size:.93rem;line-height:1.55;font-weight:600;}
.sg-member-help{margin-top:18px;padding:14px;border-radius:19px;background:#f8fafc;color:#64748b;font-size:.86rem;line-height:1.55;font-weight:600;}
.sg-member-help strong{color:#334155;font-weight:900;}
.sg-member-actions{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:18px;}
.sg-member-actions .btn{min-height:48px;border-radius:16px;font-weight:900;}
.sg-member-btn-main{background:linear-gradient(135deg,#5b8cff,#7c3aed)!important;border:0!important;color:#fff!important;box-shadow:0 16px 34px rgba(91,140,255,.30);}
.sg-member-btn-light{background:#fff!important;border:1px solid #e2e8f0!important;color:#334155!important;}
.sg-member-card .form-label{font-weight:850;color:#334155;font-size:.9rem;margin-bottom:7px;}
.sg-member-card .form-control,.sg-member-card .form-select{min-height:50px;border:1px solid #dbe3ef;border-radius:15px;background:#f8fafc;color:#111827;font-weight:700;}
.sg-member-card .form-control:focus,.sg-member-card .form-select:focus{border-color:#b8c7ff;box-shadow:0 0 0 4px rgba(91,140,255,.14);background:#fff;}
.sg-member-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.sg-member-form-grid .full{grid-column:1/-1;}
.sg-member-field{position:relative;}
.sg-member-field-icon{width:45px;height:42px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(135deg,#5b8cff,#7c3aed);color:#fff;box-shadow:0 12px 28px rgba(91,140,255,.24);}
.sg-member-icon-row{display:flex;align-items:center;gap:12px;}
.sg-member-icon-row .form-control{flex:1 1 auto;min-width:0;}
.sg-member-result{display:none;margin:14px 0 0;padding:15px;border-radius:18px;background:#ecfdf5;color:#065f46;border:1px solid #bbf7d0;}
.sg-member-result.show{display:block;}
.sg-member-result small{display:block;color:#047857;font-weight:800;margin-bottom:4px;}
.sg-member-result strong{font-size:1.15rem;}
.sg-member-mobile-intro{display:none;color:#fff;margin:0 0 14px;padding:16px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);}
.sg-member-mobile-intro strong{display:block;font-size:1.22rem;line-height:1.25;font-weight:950;letter-spacing:-.055em;}
.sg-member-mobile-intro p{margin:8px 0 0;color:rgba(226,232,240,.72);font-size:.88rem;line-height:1.55;font-weight:650;}
.sg-member-mini-list{display:grid;gap:8px;margin:16px 0 0;}
.sg-member-mini-item{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;background:#f8fafc;border:1px solid #e2e8f0;color:#475569;font-size:.86rem;line-height:1.45;}
.sg-member-mini-item i{color:#2563eb;margin-top:1px;}
.sg-member-status-icon{width:78px;height:78px;display:grid;place-items:center;margin:0 0 18px;border-radius:26px;color:#2563eb;background:linear-gradient(135deg,rgba(59,130,246,.14),rgba(34,197,94,.14));font-size:2rem;}
.sg-member-status-icon.danger{color:#be123c;background:linear-gradient(135deg,#ffe4e6,#fee2e2);}
.sg-member-status-icon.success{color:#047857;background:linear-gradient(135deg,#dcfce7,#dbeafe);}
.sg-ajax-loading,.ajax-loading{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.62);z-index:9999;color:#fff;backdrop-filter:blur(8px);}
.sg-ajax-loading > div,.ajax-loading > div{padding:22px 26px;border-radius:20px;background:rgba(15,23,42,.88);border:1px solid rgba(255,255,255,.14);}

@media (max-width:1199.98px){
    .sg-member-shell{grid-template-columns:minmax(480px,600px) minmax(400px,1fr);padding-left:24px;}
    .sg-member-shell-wide{grid-template-columns:minmax(380px,500px) minmax(520px,1fr);padding-left:24px;}
    .sg-member-left{padding:34px 30px;}
    .sg-member-title{font-size:clamp(2.25rem,4.5vw,4.2rem);}
    .sg-member-desc{max-width:560px;}
    .sg-member-right{padding:26px 28px;}
    .sg-member-card{padding:30px;}
    .sg-member-points{grid-template-columns:1fr;max-width:430px;}
}

@media (min-width:992px) and (max-width:1080px){
    .sg-member-shell{
        grid-template-columns:minmax(440px,520px) minmax(390px,1fr);
        padding-left:22px;
    }

    .sg-member-shell-wide{
        grid-template-columns:minmax(340px,430px) minmax(500px,1fr);
        padding-left:22px;
    }

    .sg-member-left{
        padding-left:28px;
        padding-right:24px;
    }

    .sg-member-title{
        font-size:clamp(2.15rem,3.9vw,3.75rem);
        line-height:1.05;
        letter-spacing:-.058em;
    }

    .sg-member-desc{
        font-size:.95rem;
    }

    .sg-member-right{
        padding-left:22px;
        padding-right:22px;
    }

    .sg-member-card{
        padding:28px;
    }
}

@media (max-width:991.98px){
    .sg-member-page{min-height:calc(100dvh - var(--header-height,82px) - var(--webview-statusbar-h,0px));overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;}
    .sg-member-shell,.sg-member-shell-wide{width:100%;min-height:inherit;display:block;padding-left:0;padding-right:0;}
    .sg-member-left{display:none!important;}
    .sg-member-right{min-height:inherit;padding:22px;border-left:0;background:transparent;backdrop-filter:none;align-items:flex-start;}
    .sg-member-card,.sg-member-card-wide{max-width:540px;padding:28px;border-radius:28px;background:rgba(255,255,255,.95);box-shadow:0 28px 72px rgba(0,0,0,.34);}
    .sg-member-mobile-intro{display:block;}
    .sg-member-form-grid{grid-template-columns:1fr;}
}
@media (max-width:575.98px){
    .sg-member-right{padding:18px 15px;}
    .sg-member-card,.sg-member-card-wide{padding:23px;border-radius:25px;}
    .sg-member-card-title{font-size:1.5rem;}
    .sg-member-card-desc,.sg-member-help{font-size:.86rem;}
    .sg-member-card .form-control,.sg-member-card .form-select{min-height:48px;border-radius:14px;font-size:.92rem;}
    .sg-member-icon-row{gap:9px;}.sg-member-field-icon{width:38px;height:38px;border-radius:8px;}
    .sg-member-actions{display:grid;grid-template-columns:1fr;}.sg-member-actions .btn{width:100%;}
}