/* ============================================================
   login.css — Ground 로그인 화면의 모양 (PC index.html 과 경비실 로그인 화면 oidc-authorize.html 이 함께 쓴다 — SSO 2단계 결정 11-612 · UI 통일)
   · 2026-10-21 index.html 의 <style> 안 '로그인' 묶음을 그대로 옮겼다(순서 · 값 그대로). 바꾸면 두 화면이 함께 바뀐다
   · 시험: test/sso-idp-ui.test.js 가 두 화면의 로그인 칸 · 단추의 계산된 모양을 대조한다
   ============================================================ */
/* ---------- 로그인: 왼쪽 브랜드 패널 + 오른쪽 폼 ---------- */
#login { height: 100%; display: flex; background: var(--card); }
#login .brand { flex: 1.1; position: relative; overflow: hidden; color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, #3b78e8 0%, #2f6be0 45%, #1f4fb8 100%); }
/* 빛(왼쪽 위)·그늘(오른쪽 아래)·사선 + 로고 격자를 크게 깔아 배경에 결을 준다 */
#login .brand::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 520px at 12% 8%, rgba(255,255,255,.22), transparent 60%), radial-gradient(520px 520px at 100% 100%, rgba(10,32,90,.55), transparent 62%), linear-gradient(115deg, rgba(255,255,255,.06) 0 38%, transparent 38.2%); }
#login .brand::after { content: ""; position: absolute; width: 520px; height: 520px; right: -118px; bottom: -132px; background: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 96%27><rect x=%274%27 y=%274%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%2735%27 y=%274%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%2766%27 y=%274%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%274%27 y=%2735%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%2735%27 y=%2735%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%270.35%27/><rect x=%2766%27 y=%2735%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%274%27 y=%2766%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%2735%27 y=%2766%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%2766%27 y=%2766%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/></svg>") no-repeat center / contain; opacity: .10; }
#login .brand .grid2 { position: absolute; width: 150px; height: 150px; right: 150px; top: 120px; background: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 96%27><rect x=%274%27 y=%274%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%2735%27 y=%274%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%2766%27 y=%274%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%274%27 y=%2735%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%2735%27 y=%2735%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%270.35%27/><rect x=%2766%27 y=%2735%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%274%27 y=%2766%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%2735%27 y=%2766%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/><rect x=%2766%27 y=%2766%27 width=%2726%27 height=%2726%27 fill=%27white%27 opacity=%271%27/></svg>") no-repeat center / contain; opacity: .07; z-index: 0; }
#login .brand > * { position: relative; z-index: 1; }
#login .brand .mark { display: flex; align-items: center; gap: 12px; font-weight: bold; font-size: 18px; letter-spacing: -.01em; }
#login .brand .mark span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
#login .brand .mark svg { width: 34px; height: 34px; } #login .brand .mark b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
#login .brand h1 { font-size: 34px; line-height: 1.3; margin: 0 0 14px; font-weight: bold; letter-spacing: -.02em; }
#login .brand p { font-size: 15px; line-height: 1.7; opacity: .9; margin: 0; max-width: 420px; }
#login .brand .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
#login .brand .chips span { font-size: 12px; padding: 6px 12px; border-radius: 14px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(10px); }
#login .brand .foot { font-size: 12px; opacity: .7; }
#login .pane { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--card); }
#login form { width: 100%; max-width: 360px; }
#login h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.02em; }
#login .sub { margin: 0 0 28px; color: var(--text-2); font-size: 14px; }
.field { position: relative; margin-top: 14px; }
.field input { width: 100%; padding: 22px 14px 8px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--card); outline: none; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.field label { position: absolute; left: 14px; top: 15px; font-size: 14px; color: var(--text-3); pointer-events: none; transition: all .15s; }
.field input:focus, .field input:not(:placeholder-shown) { border-color: var(--accent); }
.field input:focus { box-shadow: 0 0 0 4px rgba(10,132,255,.12); }
.field input:focus + label, .field input:not(:placeholder-shown) + label { top: 7px; font-size: 11px; color: var(--accent); }
#loginBtn { width: 100%; margin-top: 22px; background: var(--accent); color: #fff; padding: 13px; border-radius: 12px; font-weight: bold; font-size: 15px; box-shadow: 0 6px 18px rgba(10,132,255,.3); transition: transform .1s, background .15s; }
#loginBtn:hover { background: var(--accent-2); }
#loginBtn:active { transform: scale(.985); }
#ssoBtn, .login-alt { width: 100%; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-weight: bold; font-size: 14px; }   /* 회사 계정 로그인 — 보조 단추 (11-611) */
#ssoBtn:hover, .login-alt:hover { background: var(--hover); }
#login .pwfold { display: block; margin-top: 14px; font-size: 12.5px; color: var(--text-3); text-decoration: underline; text-align: center; } #login .pwfold[hidden] { display: none; }
#loginError { color: var(--danger); font-size: 12px; min-height: 18px; margin-top: 12px; }
#login .remember { display: flex; align-items: center; gap: 8px; margin: 6px 0 18px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; }
#login .remember input { accent-color: var(--accent); margin: 0; }
#login .help { margin-top: 26px; font-size: 12px; color: var(--text-3); line-height: 1.6; }
/* 밤바다 테마: 남색 패널 + 청록 빛 */
html[data-skin="midnight"] #login .brand { background: linear-gradient(160deg, #1b2a4a 0%, #121e3a 50%, #0b1428 100%); }
html[data-skin="midnight"] #login .brand::before { background: radial-gradient(640px 520px at 12% 8%, rgba(34,184,168,.2), transparent 60%), radial-gradient(520px 520px at 100% 100%, rgba(0,0,0,.5), transparent 62%); }
html[data-skin="midnight"] #login .brand::after, html[data-skin="midnight"] #login .brand .grid2 { opacity: .16; }
html[data-skin="midnight"] #login .brand .mark svg rect { fill: var(--accent-2); }
html[data-skin="midnight"] #login .brand .chips span { background: rgba(34,184,168,.12); border-color: rgba(34,184,168,.4); color: #b8f3ea; }
html[data-skin="midnight"] #loginBtn { color: var(--on-accent); box-shadow: 0 6px 18px rgba(34,184,168,.25); }
html[data-skin="midnight"] .field input:focus { box-shadow: 0 0 0 4px rgba(34,184,168,.15); }
html[data-skin="midnight"] label.remember input[type="checkbox"]:checked { background: var(--accent); }
/* 낡은 종이 테마: 파란 패널 대신 조금 진한 종이 + 갈색 잉크, 로고 격자는 잉크 자국처럼 옅게 */
html[data-theme="paper"] #login .brand { background: #ece3cf; color: var(--text); border-right: 1px solid var(--line-strong); }
html[data-theme="paper"] #login .brand::before { background: radial-gradient(600px 500px at 10% 0%, rgba(255,255,255,.55), transparent 60%), radial-gradient(520px 520px at 100% 100%, rgba(100,70,30,.18), transparent 62%); }
html[data-theme="paper"] #login .brand::after, html[data-theme="paper"] #login .brand .grid2 { opacity: .1; filter: sepia(1) saturate(.5) brightness(.55); }
html[data-theme="paper"] #login .brand .mark svg rect { fill: var(--accent); } html[data-theme="paper"] #login .brand .mark b { color: var(--text); }
html[data-theme="paper"] #login .brand p { opacity: 1; color: var(--text-2); }
html[data-theme="paper"] #login .brand .chips span { background: rgba(255,253,248,.6); border: 1px solid #cdbfa5; color: var(--text-2); backdrop-filter: none; }
html[data-theme="paper"] #login .brand .foot { color: var(--text-3); opacity: 1; }
html[data-theme="paper"] #login .brand h1 { font-size: 36px; }
html[data-theme="paper"] #login .pane { background: transparent; }
html[data-theme="paper"] #login form { background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px; padding: 32px 30px 28px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 14px 30px -18px rgba(80,50,20,.45); max-width: 400px; }
html[data-theme="paper"] .field input:focus { box-shadow: 0 0 0 4px rgba(138,90,43,.12); }
html[data-theme="paper"] #loginBtn { box-shadow: 0 6px 18px rgba(138,90,43,.25); }
html[data-theme="paper"] label.remember input[type="checkbox"]:checked { background: var(--accent); }
/* 크래프트: 왼쪽은 청록 종이 판(모듈 메뉴 판과 같은 종이), 그 위에 크림 쪽지(칩)·로그인 상자는 오려 붙인 크림 종이 */
html[data-theme="craft"] #login .brand { background: var(--craft-teal); color: #fff; border-right: 0; }
html[data-theme="craft"] #login .brand::before { background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%), radial-gradient(560px 480px at 100% 100%, rgba(0,20,30,.28), transparent 62%); }
/* 종이 산은 문구 다음의 독립된 공간에 배치: 낮은 창에서도 글자 뒤로 겹치지 않는다. */
html[data-theme="craft"] #login .brand { justify-content: flex-start; gap: 28px; overflow-y: auto; }
html[data-theme="craft"] #login .brand::after { display: none; }
html[data-theme="craft"] #login .brand .grid2 { display: none; }
.craft-landscape { display: none; }
html[data-theme="craft"] #login .brand .craft-landscape { display: block; flex: 1 0 170px; min-height: 170px; max-height: 310px; margin: auto -40px 0; background: url('/brand/craft-mountains.svg') center bottom / contain no-repeat; pointer-events: none; }
html[data-theme="craft"] #login .brand .foot { margin-top: auto; }
html[data-theme="craft"] #login .pane { overflow-y: auto; }
html[data-theme="craft"] #login form.craft-sheet { margin-block: auto; }
@media (max-width: 480px) { html[data-theme="craft"] #login .pane { padding: 24px 16px; } html[data-theme="craft"] #login form.craft-sheet { padding: 28px 20px 22px; } }
@media print { html[data-theme="craft"] #login .brand .craft-landscape { display: none; } }
html[data-theme="craft"] #login .brand .mark svg rect { fill: var(--card); } html[data-theme="craft"] #login .brand .mark b { color: #fff; }
html[data-theme="craft"] #login .brand h1 { font-family: var(--craft-font); font-weight: normal; font-size: 40px; line-height: 1.2; color: #fff; }
html[data-theme="craft"] #login .brand p { opacity: 1; color: rgba(255,255,255,.82); }
html[data-theme="craft"] #login .brand .chips span { background: var(--card); border: 0; color: var(--craft-teal-2); backdrop-filter: none; font-family: var(--craft-font); box-shadow: 0 2px 0 var(--craft-edge), 0 8px 14px -6px rgba(0,20,30,.5); }
html[data-theme="craft"] #login .brand .chips span:nth-child(3n) { background: var(--accent); color: #fff; box-shadow: 0 2px 0 var(--accent-2), 0 8px 14px -6px rgba(0,20,30,.5); }
html[data-theme="craft"] #login .brand .foot { color: rgba(255,255,255,.6); opacity: 1; }
html[data-theme="craft"] #login .pane { background: transparent; }
html[data-theme="craft"] #login form { background: var(--card); border: 0; border-radius: 10px; padding: 32px 30px 28px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 var(--craft-edge), 0 18px 34px -16px rgba(60,50,35,.5); max-width: 400px; }
html[data-theme="craft"] #login form h2 { font-family: var(--craft-font); font-weight: normal; }
html[data-theme="craft"] .field input:focus { box-shadow: 0 0 0 4px rgba(62,107,120,.14); border-color: var(--craft-teal); }
html[data-theme="craft"] #loginBtn { border-radius: 8px; box-shadow: 0 3px 0 var(--accent-2), 0 10px 18px -8px rgba(201,120,74,.6); font-family: var(--craft-font); font-weight: normal; font-size: 17px; }
html[data-theme="craft"] label.remember input[type="checkbox"]:checked { background: var(--craft-teal); }
@media (max-width: 860px) { #login .brand { display: none; } }