/* 새 로그인 화면 옷 (2026-10-11) — 예전 /app.html 로그아웃 상태와 칸 단위로 같게
   · 예전 app.html 안 <style> 에서 로그인 칸 · html · body 에 실제로 걸리는 규칙만, 고치지 않고 그대로 옮김
     (브라우저에서 칸마다 걸리는 규칙을 하나씩 대조해 고름 — 다른 옷 파일(po-ledger · werp-ui · wk 등)에서 걸리는 규칙은 없음)
   · 붙는 차례: /shell.css → 이 파일 → /werp-glass.css → /werp-motion.css → /werp-font.css (예전 화면과 같은 앞뒤)
   · 아래 "app.html:줄" 은 옮겨 온 자리. 예전 화면 모양이 바뀌면 같이 맞출 것 */

/* app.html:18-32 — 색 이름 · 바탕 · 글자 · 단추/입력칸 글꼴 · 키보드 초점 테두리 */
:root{
  color-scheme:light;
  --bg:#eef2f4; --card:#fff; --paper:#fff; --line:#e3e9ed; --txt:#20313c; --sub:#71818c;
  --blue:#337b35; --blue-l:#edf6e8; --red:#b7444c; --red-l:#fff2f2;
  --green:#4b7935; --green-l:#edf6e8; --amber:#966e32; --amber-l:#fff6e7;
  --lime:#c5ed85; --lime-l:#f7fee7; --orange:#996a24; --orange-l:#fff6e7;
  --badge-blue:#3d729c; --badge-blue-l:#eef4f9;
  --rose:#b7444c; --rose-l:#fff2f2;
  --navy:#122331; --navy2:#1a3342;
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard Variable',Pretendard,'맑은 고딕',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:var(--bg);color:var(--txt);font-size:14px;line-height:1.6}
button,input,select,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #77a952;outline-offset:3px}

/* app.html:35-51 — 로그인 화면 · 로그인 상자 · 입력칸 · 단추 */
/* ===== 로그인 ===== */
#screenLogin{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(160deg,rgba(15,23,42,.32),rgba(30,58,95,.22)),url(/img/login-bg.png) center/cover no-repeat}
.loginbox{background:#fff;border-radius:14px;padding:40px 44px;width:380px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-tagline{position:absolute;top:clamp(16px,2vw,28px);right:clamp(18px,2.5vw,36px)}
.login-tagline img{height:clamp(22px,2.4vw,44px);width:auto;display:block}
.login-logo{height:34px;width:auto;vertical-align:middle;margin-right:0;display:block}
.login-anim{width:168px;height:168px;margin:2px auto 8px}   /* 로고와 네이버웍스 버튼 사이 움직이는 그림 (2026-10-14) */
.loginbox h1{font-size:19px;margin-bottom:12px;color:var(--navy);display:flex;align-items:center;justify-content:center;gap:8px}
.loginbox .tag{display:block;background:none;color:var(--sub);font-size:12px;font-weight:400;padding:0;border-radius:0;margin-bottom:26px;margin-top:10px;text-align:center}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--sub);margin-bottom:5px}
.field input,.field select{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 11px;font-size:13px;font-family:inherit}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue)}
.btn{display:inline-flex;gap:8px;justify-content:center;align-items:center;min-height:39px;border:1px solid #dce4e8;border-radius:7px;padding:8px 14px;background:#fff;color:#455d6a;white-space:nowrap;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit}
.btn:hover{background:#f7f9fa}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.btn.primary:hover{opacity:.9}
.btn.block{width:100%;padding:10px;margin-top:6px}

/* app.html:92-106 — 네이버웍스 단추 · 다른 방법으로 로그인 · 결과 안내 · 오류 글 칸 */
.sso-btn{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700;min-height:46px;font-size:14px}
.sso-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;
  background:rgba(255,255,255,.22);color:#fff;font-size:12px;font-weight:800}
.alt-toggle{width:100%;margin-top:14px;background:none;border:none;cursor:pointer;
  color:var(--sub);font-size:12px;font-family:inherit;padding:8px 0;text-align:center}
.alt-toggle:hover{color:var(--blue)}
.alt-caret{font-size:10px;display:inline-block;transition:transform .18s}
.alt-toggle.open .alt-caret{transform:rotate(90deg)}
.alt-box{display:none;border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.alt-box.show{display:block}
.sso-note{margin-top:12px;font-size:12px;line-height:1.6;display:none}
.sso-note.show{display:block}
.sso-note.warn{background:#fff6e7;border:1px solid #f0dcb4;color:#8a6520;border-radius:8px;padding:11px 13px}
.sso-note.err{background:#fdecec;border:1px solid #f3c2bd;color:#b3261e;border-radius:8px;padding:11px 13px}
.conv-hint{font-size:12px;color:var(--blue);font-weight:700;background:var(--blue-l);border-radius:6px;padding:6px 10px;display:inline-block}

/* app.html:120 — 경고 안내(.sso-note.warn) 글자색을 이 규칙이 덮어씀 (예전 화면에서 실제로 보이는 색) */
.warn{color:var(--orange)!important}

/* app.html:359 · 1670 · 1686 — 가로 넘침 막기 · 입력칸 폭 (예전 화면 뒤쪽 <style> 에 있던 것) */
html,body{max-width:100%;overflow-x:hidden}
select,input[type=text],input[type=search],input[type=number],input[type=date],textarea{max-width:100%}
html,body{max-width:100%;overflow-x:hidden}

/* ===== 화면 배율 '나안' (2026-10-24 대표 결정 · 해상도 최적화) — 화면 폭마다 WERP 전체(사이드바 · 위 줄 · 카드 · 목록 · 창 · 로그인)를 같은 비율로 줄임
   1700 이상 100% · 1500~1700 94% · 1300~1500 88% · 600~1300 85% · 600 아래(휴대폰) 82%
   목록이 쓰는 폭: 1920 1615 · 1680 1482 · 1440 1331 · 1366 1247 · 1280 1201 · 아이폰 16 Pro 447
   화면 폭 규칙(@media)은 실제 화면 폭으로, 목록 칸 규칙(@container)은 줄인 뒤 폭으로 셈 · 인쇄에는 안 걺 */
@media screen and (min-width:1500px) and (max-width:1699.98px){html{zoom:.94}#screenLogin{min-height:calc(100vh / .94)}}
@media screen and (min-width:1300px) and (max-width:1499.98px){html{zoom:.88}#screenLogin{min-height:calc(100vh / .88)}}
@media screen and (min-width:600px) and (max-width:1299.98px){html{zoom:.85}#screenLogin{min-height:calc(100vh / .85)}}
@media screen and (max-width:599.98px){html{zoom:.82}#screenLogin{min-height:calc(100vh / .82)}}

/* ===== 11-06 로그인 화면 뉴모피즘 (대표 "모든 버튼과 카드 디자인은 뉴모피즘으로 통일") =====
   · WERP v2/neu.css 와 같은 면(#edf1ef) · 두 그림자(왼쪽 위 흰 빛 · 오른쪽 아래 그늘) · 곡선(.33,1,.68,1) · 0.45초
   · 로그인 상자 = 솟은 판, 단추 = 솟은 알약(주 단추 초록 면) · 누르면 쏙 들어감, 입력칸 = 눌린 홈
   · 비밀번호 변경 창(ui-confirm.js #w-cf)의 단추도 같은 모양 — 이 화면은 neu.css · fabric.js 를 안 불러서 여기 둠
     (비밀번호를 바꾸기 전엔 login.css 등 몇 파일만 열림 — middleware/auth.js PW_ALLOW_FILES) */
#screenLogin .loginbox{background:#edf1ef;border-radius:26px;
  box-shadow:-10px -10px 26px rgba(255,255,255,.55),16px 18px 42px rgba(24,46,38,.38),inset 1px 1px 0 rgba(255,255,255,.9)}
#screenLogin .btn,body #w-cf .bt button{border:0;border-radius:999px;background:#edf1ef;color:#2a3c46;font-weight:600;
  box-shadow:-6px -6px 14px rgba(255,255,255,.95),6px 6px 16px rgba(46,74,62,.20),inset 0 0 0 1px rgba(255,255,255,.5);
  transition:box-shadow .45s cubic-bezier(.33,1,.68,1),transform .45s cubic-bezier(.33,1,.68,1),opacity .3s cubic-bezier(.33,1,.68,1)}
#screenLogin .btn:hover:not(:disabled),body #w-cf .bt button:hover:not(:disabled){background:#edf1ef;
  box-shadow:-8px -8px 18px #fff,8px 8px 20px rgba(46,74,62,.24),inset 0 0 0 1px rgba(255,255,255,.6);transform:translateY(-1px)}
#screenLogin .btn:active:not(:disabled),body #w-cf .bt button:active:not(:disabled){
  box-shadow:inset 5px 5px 12px rgba(46,74,62,.22),inset -5px -5px 12px rgba(255,255,255,.9);transform:none;transition-duration:.2s}
#screenLogin .btn.primary,body #w-cf .bt button.ok{background:linear-gradient(145deg,#56ad6f,#3c8a55);color:#fff;opacity:1;
  box-shadow:-6px -6px 14px rgba(255,255,255,.9),6px 6px 16px rgba(47,107,70,.36),inset 1px 1px 0 rgba(255,255,255,.25)}
#screenLogin .btn.primary:hover:not(:disabled),body #w-cf .bt button.ok:hover:not(:disabled){background:linear-gradient(145deg,#56ad6f,#3c8a55);opacity:1;
  box-shadow:-8px -8px 18px rgba(255,255,255,.95),8px 8px 20px rgba(47,107,70,.4),inset 1px 1px 0 rgba(255,255,255,.25)}
#screenLogin .btn.primary:active:not(:disabled),body #w-cf .bt button.ok:active:not(:disabled){box-shadow:inset 5px 5px 12px rgba(20,60,35,.35),inset -4px -4px 10px rgba(255,255,255,.25)}
#screenLogin .btn:disabled,body #w-cf .bt button:disabled{opacity:.55;cursor:not-allowed}
#screenLogin .sso-btn{min-height:48px}
#screenLogin .btn.block{margin-top:8px}
/* 다른 방법으로 로그인 — 가운데 작은 솟은 알약 · 펼치면 쏙 눌림 */
#screenLogin .alt-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;margin:18px auto 0;padding:8px 18px;border-radius:999px;
  background:#edf1ef;color:#4a5b68;font-weight:600;box-shadow:-4px -4px 9px rgba(255,255,255,.95),4px 4px 10px rgba(46,74,62,.16);
  transition:box-shadow .35s cubic-bezier(.33,1,.68,1),color .2s cubic-bezier(.33,1,.68,1)}
#screenLogin .alt-toggle:hover{color:#2f6b24;box-shadow:-5px -5px 11px #fff,5px 5px 12px rgba(46,74,62,.2)}
#screenLogin .alt-toggle.open{color:#2f6b24;box-shadow:inset 3px 3px 7px rgba(46,74,62,.18),inset -3px -3px 7px rgba(255,255,255,.92)}
#screenLogin .alt-box{border-top:0;padding-top:18px}
/* 입력칸 — 눌린 홈 · 고르면 초록 테 */
#screenLogin .field input{border:0;border-radius:12px;padding:11px 14px;background:#e6ebe8;color:#20313c;
  box-shadow:inset 3px 3px 7px rgba(46,74,62,.18),inset -3px -3px 7px rgba(255,255,255,.92);transition:box-shadow .3s cubic-bezier(.33,1,.68,1)}
#screenLogin .field input:focus{box-shadow:inset 3px 3px 7px rgba(46,74,62,.18),inset -3px -3px 7px rgba(255,255,255,.92),0 0 0 2px rgba(86,173,111,.55)}

/* 안내 칸 (#ssoNotice.ln) — 11-06 대표 B안: 가운데 정렬 · 위 34px 색 뱃지(상자 제목 뱃지와 같은 그라데이션) · 흰 카드 + 색 테두리 + 뉴모피즘 그림자 */
#ssoNotice.ln{display:none}
#ssoNotice.ln.show{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-top:18px;padding:16px 16px 15px;
  border-radius:16px;background:#f7f9f8;border:1.5px solid var(--ln-c);color:#55636d;font-size:12px;line-height:1.5;word-break:keep-all;
  box-shadow:-6px -6px 14px rgba(255,255,255,.95),6px 6px 16px rgba(46,74,62,.16),0 10px 22px -12px var(--ln-g)}
#ssoNotice.ln .bdg{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;background:var(--ln-bg);box-shadow:0 4px 10px var(--ln-g)}
#ssoNotice.ln .bdg svg{width:21px;height:21px}
#ssoNotice.ln b{display:block;font-size:13.5px;font-weight:700;line-height:1.4;color:var(--ln-tx)}
#ssoNotice.ln span{display:block}
#ssoNotice.ln-w{--ln-c:#f0a020;--ln-g:rgba(240,138,32,.55);--ln-bg:linear-gradient(135deg,#f0a020,#f08a5d);--ln-tx:#c26a00}
#ssoNotice.ln-o{--ln-c:#58BA48;--ln-g:rgba(47,158,68,.5);--ln-bg:linear-gradient(135deg,#58BA48,#1fa39b);--ln-tx:#2f6b24}
#ssoNotice.ln-e{--ln-c:#e0675d;--ln-g:rgba(192,50,47,.45);--ln-bg:linear-gradient(135deg,#e8665a,#c0392b);--ln-tx:#c0322f}
#loginError:empty{display:none}   /* 11-06 오류 글이 없을 때 빈 칸(옅은 초록 바탕)이 작은 점처럼 보이던 것 */

/* ===== 11-06 로그인 카드 안 그림 (대표: Welcome 디자인의 움직이는 그림만 · 카드 안 바탕은 밝게 · 한 카드 ①) =====
   · 카드 뒤 기본 배경(마을 그림 login-bg.png)은 그대로 (대표 "로그인 화면 카드 말고 기본 배경")
   · 그림은 /img/login-hero.svg (SVG 움직임 원본 그대로, 빛 색만 흰색을 섞어 밝게)
   · 화면 배율(html zoom)로 로그인 칸이 창보다 짧아져 아래 띠가 보이던 것 → 칸 높이를 배율로 나눠 창을 꽉 채움 */
#screenLogin .loginbox h1{margin-bottom:2px}
.login-hero{width:300px;max-width:100%;margin:0 auto 8px}
.login-hero img{display:block;width:100%;height:auto}

/* 아이디 · 비밀번호 칸과 로그인 단추를 같은 높이 · 같은 알약 모양 · 같은 폭으로 (11-06 대표 "칸 크기도 다르고") */
#screenLogin .field input{box-sizing:border-box;width:100%;height:48px;padding:0 20px;border-radius:999px}
#screenLogin #btnLogin{box-sizing:border-box;width:100%;height:48px;min-height:48px;margin-top:4px}
#screenLogin .sso-btn{height:48px}