:root{
      --bg: #f6f9ff;
      --card: #ffffff;
      --text: #0f172a;
      --sub: #6b7280;
      --line: #e5e7eb;
      --brand: #2d6cff;
      --brand-600: #2558d6;
      --focus: 0 0 0 4px rgba(45,108,255,.15);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
      color:var(--text);
      background: var(--bg);
      display:grid;
      place-items:center;
    }

    .auth-card{
      width:min(92vw, 380px);
      background:var(--card);
      border-radius:20px;
      padding:44px 40px 34px;
      box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
    }

    .brand{
      text-align:center;
      font-weight:800;
      font-size:28px;
      letter-spacing:.2px;
      margin:4px 0 28px;
      background: linear-gradient(90deg, #2d6cff 0%, #5aa0ff 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    .fields{display:grid; gap:18px;}

    .label{
      display:block;
      font-size:12px;
      font-weight:600;
      color:#64748b;
      margin: 8px 0 0px;
    }

    .field{position:relative}

    input[type="text"],
    input[type="email"],
    input[type="password"]{
      width:100%; height:46px;
      border:1px solid var(--line);
      border-radius:12px;
      padding:0 14px;
      font-size:14px;
      background:#fff;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }

    input::placeholder{color:#9ca3af}

    input:focus{
      border-color: var(--brand);
      box-shadow: var(--focus);
    }

    .field.password{position:relative}
    .field.password input{padding-right:44px}
    .field.password::after{
      content:"";
      position:absolute; right:14px; top:50%; translate:0 -50%;
      width:22px; height:22px; opacity:.6;
      background: center/18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
      pointer-events:none;
    }

    .submit{
      margin-top:18px;
      display:block; width:100%; height:48px;
      border:0; border-radius:12px;
      background:var(--brand); color:white;
      font-weight:700; font-size:14px;
      cursor:pointer;
      box-shadow: 0 10px 18px rgba(45,108,255,.22);
      transition: transform .06s ease, background .15s ease;
    }
    .submit:hover{ background: #2f73ff }
    .submit:active{ transform: translateY(1px); background: var(--brand-600) }

    .meta{
      text-align:center; margin-top:18px;
      font-size:13px; color:#6b7280;
    }
    .meta a{ color:var(--brand); text-decoration:none; font-weight:600 }
    .meta a:hover{ text-decoration:underline }

    .no-bg body{ background:#fff; }

    @media (max-width:420px){
      .auth-card{ padding:32px 22px 26px; border-radius:16px }
      .brand{ font-size:24px; margin-bottom:22px }
    }