/* ==========================================================================
   Outlogin 리디자인 v2 (화이트카드 + 블루 포인트, 다크배경 대응)
   SCOPE: #tm-outlogin
   ========================================================================== */

#tm-outlogin .f-de{
    --ol-blue:#2563eb;
    --ol-blue-2:#1d4ed8;
    --ol-blue-3:#3b82f6;
    --ol-card:#ffffff;
    --ol-card-weak:#f8fafc;
    --ol-text:#0f172a;
    --ol-muted:#6b7280;
    --ol-line:#e5e7eb;
    --ol-shadow:0 8px 22px rgba(2,6,23,.08);
    --ol-focus:rgba(37,99,235,.18);
    font-size:14px;
    color:var(--ol-text);
}

/* 시스템 다크모드 대응 */
@media (prefers-color-scheme: dark){
    #tm-outlogin .f-de{
        --ol-card:#0b1220;
        --ol-card-weak:#0b1220;
        --ol-text:#e5e7eb;
        --ol-muted:#94a3b8;
        --ol-line:#1f2937;
        --ol-shadow:0 10px 26px rgba(0,0,0,.22);
        --ol-focus:rgba(59,130,246,.22);
    }
}

/* 사이트 다크(글래스) 강제 */
.site-dark #tm-outlogin .f-de{
    --ol-card:rgba(13,18,28,.72);
    --ol-card-weak:rgba(13,18,28,.72);
    --ol-text:#e7eefb;
    --ol-muted:#a3b2c7;
    --ol-line:rgba(148,163,184,.25);
    --ol-shadow:0 12px 28px rgba(2,6,23,.35);
    --ol-focus:rgba(96,165,250,.28);
    backdrop-filter:saturate(130%) blur(8px);
}

/* 베이스 카드 */
#tm-outlogin .f-de>*,
#tm-outlogin #basic_outlogin{
    border-top:4px solid #1ea1f2;
    border-radius:0 0 16px 16px;
    box-shadow:var(--ol-shadow);
    padding:16px;
}

/* 입력 그룹 */
#tm-outlogin #basic_outlogin .input-group{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.site-dark #tm-outlogin #basic_outlogin .input-group,
@media (prefers-color-scheme: dark){
    #tm-outlogin #basic_outlogin .input-group{ background:var(--ol-card-weak); }
}
#tm-outlogin #basic_outlogin .input-group:hover{ border-color:#cbd5e1; }
#tm-outlogin #basic_outlogin .input-group:focus-within{
    border-color:var(--ol-blue);
    box-shadow:0 0 0 3px var(--ol-focus);
}

/* 아이콘/인풋 */
#tm-outlogin #basic_outlogin .input-group-text{
    background:transparent; border:0; padding:0 12px; color:#9aa4b2!important;
}
#tm-outlogin #basic_outlogin .form-control{
    background:transparent; border:0!important; height:48px; padding:0 14px;
    font-size:14px; color:#000; box-shadow:none!important;
}
#tm-outlogin #basic_outlogin .form-control::placeholder{ color:#9aa4b2; }

/* 필수표시 */
#tm-outlogin #basic_outlogin label .sr-only + strong,
#tm-outlogin #basic_outlogin label strong{ color:#ef4444; }

/* 버튼 */
#tm-outlogin #basic_outlogin .btn-primary{
    background:linear-gradient(45deg,var(--ol-blue-3),var(--ol-blue));
    border:0; height:48px; border-radius:12px; font-weight:800; letter-spacing:.2px;
    color:#fff; box-shadow:0 10px 20px rgba(37,99,235,.30);
    transition:filter .15s, transform .05s;
}
#tm-outlogin #basic_outlogin .btn-primary:hover{ filter:brightness(.97); }
#tm-outlogin #basic_outlogin .btn-primary:active{ transform:translateY(1px); }

/* 하단 링크 */
#tm-outlogin #basic_outlogin .clearfix{ margin-top:10px; color:var(--ol-muted); }
#tm-outlogin #basic_outlogin a{ color:var(--ol-blue); font-weight:700; text-decoration:none; }
#tm-outlogin #basic_outlogin a:hover{ text-decoration:underline; }
#tm-outlogin #basic_outlogin .na-bar{
    display:inline-block; width:1px; height:12px; background:var(--ol-line); margin:0 8px -2px;
}

/* 스위치/체크박스 */
#tm-outlogin #basic_outlogin .custom-control-label{ padding-top:1px; }
#tm-outlogin #basic_outlogin .custom-control-input,
#tm-outlogin #basic_outlogin input[type="checkbox"]{ accent-color:var(--ol-blue); }

/* 로그인 후 블록 (기존 호환) */
#tm-outlogin .d-flex.align-items-center.mb-3{ margin-bottom:14px!important; }
#tm-outlogin .rounded-circle{ width:56px; height:56px; object-fit:cover; box-shadow:0 6px 14px rgba(0,0,0,.12); }
#tm-outlogin h5{ font-size:15px; margin:0 0 4px; }
#tm-outlogin .f-sm{ color:var(--ol-muted); }
#tm-outlogin .btn-group .btn{
    height:40px; font-weight:700; border-radius:10px!important; border:0; color:#fff;
    background:linear-gradient(45deg,var(--ol-blue-3),var(--ol-blue));
    box-shadow:0 6px 14px rgba(37,99,235,.22);
}
#tm-outlogin .btn-group .btn + .btn{ background:linear-gradient(45deg,#0ea5e9,#0284c7); }

/* 알림 뱃지(공용) */
#tm-outlogin .nt-noti-label{
    position:relative; top:-10px; left:-6px;
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px;
    border-radius:999px; background:#ef4444; color:#fff; font-size:11px;
    box-shadow:0 0 0 3px var(--ol-card);
}

/* 소셜 로그인 */
#tm-outlogin .sns-wrap{ margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#tm-outlogin .sns-wrap .sns-item a{
    display:flex; align-items:center; justify-content:center; gap:8px;
    height:44px; border-radius:12px; font-weight:800;
    border:1px solid var(--ol-line); background:#f3f4f6; color:#111;
}
.site-dark #tm-outlogin .sns-wrap .sns-item a,
@media (prefers-color-scheme: dark){
    #tm-outlogin .sns-wrap .sns-item a{ background:var(--ol-card-weak); color:var(--ol-text); }
}

/* 반응형 */
@media (max-width:420px){
    #tm-outlogin #basic_outlogin{ padding:14px; }
    #tm-outlogin .sns-wrap{ grid-template-columns:1fr; }
}

/* 여백 보정 */
#tm-outlogin .f-de{ margin:0; }
#tm-outlogin #basic_outlogin{ margin:0; }

/* 밝기 보정 */
#tm-outlogin .ol-bright{
    --ol-card:#ffffff!important;
    --ol-card-weak:#ffffff!important;
    --ol-text:#0f172a!important;
    --ol-muted:#6b7280!important;
    --ol-line:#e5e7eb!important;
    --ol-shadow:0 8px 18px rgba(2,6,23,.08)!important;
}

/* 링크 묶음 */
#tm-outlogin #basic_outlogin .login-links{
    display:flex; align-items:center; gap:10px;
}
#tm-outlogin #basic_outlogin .login-links a{
    color:#515151!important; font-weight:600; text-decoration:none;
}
#tm-outlogin #basic_outlogin .login-links a:hover{ text-decoration:underline; }

/* ===== 로그인 상태 '통합 카드' ===== */
#tm-outlogin .tm-member-card{
    background:#ffffff; border:1px solid var(--ol-line); border-radius:16px;
    box-shadow:var(--ol-shadow); overflow:hidden; border-top:4px solid #1ea1f2;
}
#tm-outlogin .tm-member-card__header{
    display:flex; align-items:center; gap:12px; padding:14px 16px; background:#ffffff;
}
#tm-outlogin .tm-member-card__avatar img{
    width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow:0 6px 14px rgba(0,0,0,.12);
}
#tm-outlogin .tm-member-card__meta{ min-width:0; }
#tm-outlogin .tm-member-card__nick{
    font-size:15px; margin:0 0 4px; color:var(--ol-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#tm-outlogin .tm-member-card__sub{ margin:0; color:var(--ol-muted); }
#tm-outlogin .tm-member-card__sub .na-bar{
    display:inline-block; width:1px; height:12px; background:var(--ol-line); margin:0 8px -2px;
}
#tm-outlogin .tm-member-card__admin{ color:var(--ol-blue); font-weight:700; }

#tm-outlogin .tm-member-card__actions{
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    padding:12px 16px 16px;
    background:linear-gradient(180deg,rgba(2,6,23,.02),rgba(2,6,23,0));
}
#tm-outlogin .tm-action{
    display:flex; align-items:center; justify-content:center; gap:8px; height:40px;
    border-radius:10px; color:#fff; text-decoration:none; font-weight:700; border:0;
    background:linear-gradient(45deg,var(--ol-blue-3),var(--ol-blue));
    box-shadow:0 6px 14px rgba(37,99,235,.22);
    transition:filter .15s, transform .05s;
}
#tm-outlogin .tm-action:hover{ filter:brightness(.97); }
#tm-outlogin .tm-action:active{ transform:translateY(1px); }
#tm-outlogin .tm-action--logout{ background:linear-gradient(45deg,#0ea5e9,#0284c7); }
#tm-outlogin .tm-action--noti{ position:relative; }
#tm-outlogin .tm-action--noti .nt-noti-label{
    position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
    border-radius:999px; background:#ef4444; color:#fff; font-size:11px;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 3px var(--ol-card);
}
@media (max-width:360px){
    #tm-outlogin .tm-member-card__actions{ grid-template-columns:repeat(2,1fr); }
}
.site-dark #tm-outlogin .tm-member-card{ backdrop-filter:saturate(130%) blur(8px); }