/*
 * kvas-mw-skin.css — MW(mw-ui) 프레임워크의 K-VAS 딥블루 재색 스킨 (요구사항 #12/#15)
 *
 * MW 의 인디고(#4f46e5) 브랜드를 K-VAS 딥블루로 override. style.css 다음에 로드한다.
 * 토큰(var) 기반 컴포넌트는 토큰 재정의로, 로그인/1차버튼의 하드코딩 인디고는 직접 override.
 * 다크/라이트는 MW 토큰 체계(:root / html[data-theme="dark"] / prefers-color-scheme)를 따른다.
 */

:root {
    --mw-brand:        #1f5bd6;
    --mw-brand-2:      #2a6df4;
    --mw-brand-strong: #11296b;
    --mw-brand-grad-a: #11296b;
    --mw-brand-grad-b: #1f5bd6;
    --mw-brand-soft:   #eaf1ff;
    --mw-brand-soft-border: #c7d8fb;
    --mw-focus-ring:   rgba(31, 91, 214, 0.30);
    --mw-btn-hover:    #dce7fb;
}

html[data-theme="dark"], :root.dark {
    --mw-brand:        #4d86ff;
    --mw-brand-2:      #5b9bff;
    --mw-brand-strong: #2a6df4;
    --mw-brand-grad-a: #0a1834;
    --mw-brand-grad-b: #11409f;
    --mw-brand-soft:   #14233f;
    --mw-brand-soft-border: #28427a;
    --mw-focus-ring:   rgba(77, 134, 255, 0.35);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --mw-brand:        #4d86ff;
        --mw-brand-2:      #5b9bff;
        --mw-brand-strong: #2a6df4;
        --mw-brand-grad-a: #0a1834;
        --mw-brand-grad-b: #11409f;
        --mw-brand-soft:   #14233f;
        --mw-focus-ring:   rgba(77, 134, 255, 0.35);
    }
}

/* ── 하드코딩 인디고 직접 override (딥블루) ── */
#mw_login_card .mw-login-hero {
    background: linear-gradient(155deg, #2a6df4 0%, #1f5bd6 42%, #11296b 100%) !important;
}
#mw_login_card .mw-login-inp > input:focus {
    border-color: #1f5bd6 !important;
    box-shadow: 0 0 0 3px rgba(31, 91, 214, 0.18) !important;
}
#mw_login_card .mw-login-inp:focus-within > svg { stroke: #1f5bd6 !important; }
#mw_login_card .mw-login-btn.primary {
    background: linear-gradient(135deg, #1f5bd6, #11296b) !important;
    box-shadow: 0 8px 20px -4px rgba(17, 41, 107, 0.45) !important;
}
.mw-btn-primary {
    background: linear-gradient(135deg, #1f5bd6, #11296b) !important;
    box-shadow: 0 4px 12px rgba(17, 41, 107, 0.28) !important;
}
.mw-btn-ghost:hover { border-color: #2a6df4 !important; color: #11296b !important; }

/* 로그인 카드 레이아웃 보정(사용자 피드백):
   - 넓은 화면서 카드가 왜소해 보이지 않게 확대(중앙 정렬은 body flex 가 유지).
   - 히어로/폼 패널 비율을 균형 있게(40/60) 잡고, 폼은 패널 안에서 폭을 캡+중앙 정렬해
     넓은 패널에서 입력칸이 한쪽으로 늘어져 보이는(치우침) 현상을 막는다.
   - 좁은 화면(≤680px)은 기존 규칙(히어로 숨김·max-width 430)을 그대로 둔다. */
@media (min-width: 681px) {
    #mw_login_card { width: min(940px, 94vw); max-width: 940px; }
    #mw_login_card .mw-login-hero { flex: 0 0 40%; box-sizing: border-box; padding: 56px 46px; }
    #mw_login_card .mw-login-panel { flex: 1 1 0; padding: 56px 52px; align-items: center; }
    #mw_login_card .mw-login-panel > * { width: 100%; max-width: 400px; }
}

/* 다크모드에서 로그인 카드 패널 표면/대비 보정 */
html[data-theme="dark"] #mw_login_card .mw-login-inp > input,
:root.dark #mw_login_card .mw-login-inp > input {
    background: var(--mw-surface);
    color: var(--mw-text);
    border-color: var(--mw-border);
}

/* K-VAS 로그인 보조 요소(에러 배너·카피라이트) */
#mw_login_card .mw-login-err {
    background: #fef2f2;
    color: #b42318;
    border: 1px solid #fecdca;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.45;
}
html[data-theme="dark"] #mw_login_card .mw-login-err,
:root.dark #mw_login_card .mw-login-err { background: #3a1620; color: #ffb4ad; border-color: #7a2230; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #mw_login_card .mw-login-err { background: #3a1620; color: #ffb4ad; border-color: #7a2230; }
}
#mw_login_card .mw-login-copy {
    margin-top: 22px;
    text-align: center;
    font-size: 11px;
    color: var(--mw-text-muted);
}

/* ── 로그인 테마 토글 버튼(자체완결 — kvas-theme.css 미로드 컨텍스트) (요구사항 #15) ── */
.kvas-login-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid rgba(31, 91, 214, 0.30);
    background: rgba(255, 255, 255, 0.70);
    color: #1f5bd6;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background-color .15s, border-color .15s;
}
.kvas-login-toggle:hover { background: rgba(255, 255, 255, 0.92); }
.kvas-login-toggle svg { width: 18px; height: 18px; display: block; }
.kvas-login-toggle .kv-icon-sun { display: none; }
.kvas-login-toggle .kv-icon-moon { display: block; }

html[data-theme="dark"] .kvas-login-toggle,
:root.dark .kvas-login-toggle {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.10);
    color: #cfe0ff;
}
html[data-theme="dark"] .kvas-login-toggle:hover,
:root.dark .kvas-login-toggle:hover { background: rgba(255, 255, 255, 0.18); }
html[data-theme="dark"] .kvas-login-toggle .kv-icon-sun,
:root.dark .kvas-login-toggle .kv-icon-sun { display: block; }
html[data-theme="dark"] .kvas-login-toggle .kv-icon-moon,
:root.dark .kvas-login-toggle .kv-icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .kvas-login-toggle {
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.10);
        color: #cfe0ff;
    }
    :root:not([data-theme="light"]) .kvas-login-toggle .kv-icon-sun { display: block; }
    :root:not([data-theme="light"]) .kvas-login-toggle .kv-icon-moon { display: none; }
}

/* 체크박스·라디오 accent 를 K-VAS 딥블루로 — style.css 의 mw 인디고(#4f46e5) 하드코딩을 브랜드 토큰으로 재색.
   style.css 다음 로드 + !important 로 라이트·다크 규칙 모두 override(요구사항 #12/#15 브랜드 일관성). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--mw-brand, #1f5bd6) !important; }

/* 입력 포커스 보더·링을 K-VAS 딥블루로 — style.css 의 mw 인디고(#6366F1) 포커스를 브랜드 토큰으로 재색. */
.input_text:focus, input[type="text"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="email"]:focus, input[type="search"]:focus,
textarea:focus, select:focus {
    border-color: var(--mw-brand, #1f5bd6) !important;
    box-shadow: 0 0 0 3px rgba(31, 91, 214, 0.18) !important;
}

/* 객체 다이얼로그 [확인][취소] 버튼 정합 — 동일 크기·같은 행(요구사항 2026-06 객체 다이얼로그 개편 B2).
   확인은 아이콘+텍스트, 취소는 텍스트뿐이라 폭이 달랐다 → min-width 로 동일 폭, inline-flex 로 아이콘·라벨
   수직 중앙 정렬. 두 버튼은 같은 .float:right 컨테이너에 있어 같은 행을 유지한다(전 객체 다이얼로그 공통). */
.confirm-ok,
.confirm-cancel {
    min-width: 96px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    vertical-align: middle;
}
.confirm-ok + .confirm-cancel,
.confirm-cancel { margin-left: 8px; }