/* 로그인(14) — 셸 없음·전체 화면 중앙 카드. 14_로그인_화면샘플.html 의 스타일 정본. */
  :root{ --radius:12px; --mono:ui-monospace,"Cascadia Mono","Consolas",monospace;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif; }
  body.scheme-dark{
    --bg:#0b1220; --bg-2:#0e1728; --surface:#141f33; --surface-2:#1a2740; --surface-3:#20304e;
    --line:#243354; --line-soft:#1c2942; --text:#dbe4f0; --text-dim:#8ba0bd; --text-faint:#5f728f;
    --brand:#e23a5b; --accent:#5cc7d4; --gain:#e5484d; --crit:#f0563f; --ok:#35b87a; --logo-ring:transparent;
    --logo-tile:#ffffff; --logo-track:#c9d2df; }
  body.scheme-light{
    --bg:#f4f6fa; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f1f4f9; --surface-3:#e4e9f1;
    --line:#d6dde8; --line-soft:#e7ebf3; --text:#16202f; --text-dim:#4d5c72; --text-faint:#7c8aa0;
    --brand:#c2183a; --accent:#0e7c8c; --gain:#c62828; --crit:#cf3a26; --ok:#1e8a5a; --logo-ring:#dbe2ec;
    --logo-tile:#16202f; --logo-track:#5c6b82; }   /* 라이트는 짙은 타일 — 흰 배경에서 식별 */
  *{box-sizing:border-box}
  html,body{margin:0; min-height:100vh}
  body{background:radial-gradient(1100px 600px at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), var(--bg);
    color:var(--text); font-family:var(--sans); font-size:14px; -webkit-font-smoothing:antialiased;
    display:grid; place-items:center;
    /* 설치형(black-translucent)은 상태바·홈 인디케이터 아래까지 확장된다 — 그 몫을 여기서 받는다. shorthand 로 덮지 말 것. */
    padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom))}
  a{color:inherit; text-decoration:none} .bi{line-height:1}

  /* fixed 라 body 패딩이 닿지 않는다 — 상태바 몫을 따로 준다. */
  .theme-toggle{position:fixed; top:calc(16px + env(safe-area-inset-top)); right:16px; display:flex; gap:4px; padding:3px; background:var(--surface); border:1px solid var(--line); border-radius:9px}
  .theme-toggle button{border:0; background:transparent; color:var(--text-dim); border-radius:6px; width:34px; height:30px; cursor:pointer; font-size:15px}
  .theme-toggle button.on{background:var(--surface-2); color:var(--text)}

  .login-box{width:100%; max-width:380px}
  .brand{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:20px}
  .brand svg{width:34px; height:34px}
  .brand .bt{font-weight:800; font-size:22px; letter-spacing:-.5px}
  .brand .bt i{color:var(--brand); font-style:normal}
  .brand .v2{font-size:11px; font-weight:700; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); padding:2px 7px; border-radius:6px}

  /* 상단 안내 블록 = 기본 접힘 [UI 헌법 00 §2 · 전 UI 강제]. 로그인은 셸이 없어 여기서 정의한다. */
  details.legend{margin-bottom:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:12px 15px}
  details.legend summary{cursor:pointer; list-style:none; font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:8px}
  details.legend summary::-webkit-details-marker{display:none}
  details.legend summary .bi{color:var(--text-dim)}
  details.legend .lg{margin-top:12px; display:grid; gap:10px 20px}
  details.legend dt{font-weight:600; font-size:12px; margin-bottom:2px}
  details.legend dd{margin:0; color:var(--text-dim); font-size:11.5px; line-height:1.45}

  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 24px 26px; box-shadow:0 18px 50px rgba(0,0,0,.28)}
  .card .msg{text-align:center; font-size:13px; color:var(--text-dim); margin:0 0 18px}

  .err{display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:9px; font-size:12.5px; margin-bottom:16px;
    background:color-mix(in srgb, var(--crit) 12%, transparent); border:1px solid color-mix(in srgb, var(--crit) 34%, transparent); color:var(--crit)}
  .err.hide{display:none} .err .bi{font-size:15px}

  .fld{position:relative; margin-bottom:13px}
  .fld input{width:100%; height:44px; background:var(--bg-2); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:0 42px 0 13px; font:inherit; font-size:14px}
  .fld input:focus{outline:none; border-color:var(--accent)}
  .fld .ic{position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:16px}
  .fld .eye{cursor:pointer}

  .row{display:flex; align-items:center; justify-content:space-between; margin:4px 0 18px}
  .chk{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); cursor:pointer; user-select:none}
  .chk input{width:16px; height:16px; accent-color:var(--accent)}
  .btn{width:100%; height:46px; border:1px solid var(--accent); background:var(--accent); color:var(--bg-2); border-radius:9px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px}
  .btn:hover{filter:brightness(1.05)}

  .foot{text-align:center; margin-top:18px; font-size:11px; color:var(--text-faint)}
  .note{max-width:380px; margin:18px auto 0; font-size:11px; color:var(--text-faint); border:1px dashed var(--line); border-radius:9px; padding:11px 14px; line-height:1.6}
  .note b{color:var(--text-dim)}

/* CI 배색 — 셸과 같은 축(계정 메뉴 선택·localStorage). 로그인은 셸이 없어 여기서도 정의한다. */
body[data-ci="D"]{ --logo-tile:#41506b; --logo-track:#98a4b8; --logo-knob:#D8264A; --logo-ring:#dbe2ec; }
body[data-ci="G"]{ --logo-tile:#c2183a; --logo-track:#ffffff; --logo-knob:#ffffff; --logo-ring:#c2183a; }
body[data-ci="H"]{ --logo-tile:#0e7c8c; --logo-track:#ffffff; --logo-knob:#ffffff; --logo-ring:#0e7c8c; }