/* ============================================================
 * BTFM 로그인 화면 테마
 *
 * 원칙: templates/login.html 마크업은 TFM 과 똑같이 두고 CSS 로만 바꾼다.
 *       (로고 이미지 경로·하단 문구는 tools/btfm_rules.pl 이 바꾼다)
 * 로드: templates/common/fragments/loginHeaderFrag.html (tools/btfm_overlay.pl 이 자동 삽입)
 * 범위: 로그인 레이아웃(layoutForLogin)을 쓰는 화면 — login.html, login/loginOtpPage.html
 * 로고: /image/btfm/btfm-logo.svg
 * ============================================================ */

:root {
  --btfm-night: #051530;
  --btfm-navy: #0e2c5f;
  --btfm-harbor: #0b4f86;
  --btfm-blue: #0a5bff;
  --btfm-cyan: #1fe0e8;
  --btfm-muted: #5a6b85;
  --btfm-line: #d6e0ec;
  --btfm-field: #f6f9fd;
}

/* ---------- 바탕: 부산 밤바다, 아래로 파도, 로고의 반짝임 ---------- */
body {
  position: relative;
  overflow-x: hidden;
  background-color: var(--btfm-night);
  background-image:
    radial-gradient(55% 45% at 88% 8%, rgba(31, 224, 232, 0.20), transparent 62%),
    radial-gradient(70% 60% at 8% 100%, rgba(10, 91, 255, 0.34), transparent 62%),
    linear-gradient(160deg, var(--btfm-night) 0%, var(--btfm-navy) 55%, var(--btfm-harbor) 100%);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: 36vh;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 160 C240 120 480 220 720 180 S1200 120 1440 170 V320 H0Z' fill='%231fe0e8' fill-opacity='.10'/%3E%3Cpath d='M0 210 C260 180 520 260 780 225 S1220 190 1440 230 V320 H0Z' fill='%230a5bff' fill-opacity='.20'/%3E%3Cpath d='M0 262 C300 240 600 300 900 270 S1260 250 1440 276 V320 H0Z' fill='%23051530' fill-opacity='.40'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C13 8 16 11 24 12 C16 13 13 16 12 24 C11 16 8 13 0 12 C8 11 11 8 12 0Z' fill='%231fe0e8'/%3E%3C/svg%3E") 14% 20% / 22px 22px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C13 8 16 11 24 12 C16 13 13 16 12 24 C11 16 8 13 0 12 C8 11 11 8 12 0Z' fill='%238fcdea'/%3E%3C/svg%3E") 21% 29% / 11px 11px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C13 8 16 11 24 12 C16 13 13 16 12 24 C11 16 8 13 0 12 C8 11 11 8 12 0Z' fill='%230a5bff'/%3E%3C/svg%3E") 84% 64% / 16px 16px no-repeat;
  opacity: 0.85;
}

/* ---------- 로그인 카드 ---------- */
.login-card {
  position: relative;
  z-index: 1;
  max-width: 392px;
  padding: 42px 34px 26px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow:
    0 36px 70px -24px rgba(2, 10, 30, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.login-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--btfm-blue), var(--btfm-cyan));
}

/* 로고 블록 */
.login-card > div:first-child {
  margin-bottom: 30px;
}
.login-card > div:first-child > div:first-child {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.login-card img[src*="/image/btfm/"] {
  width: 224px;
  height: auto;
  border-radius: 0;
}
.login-card > div:first-child > p {
  margin-top: 16px;
  color: var(--btfm-muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.login-card > div:first-child > div:last-child {
  width: 36px;
  height: 3px;
  margin-top: 12px;
  opacity: 1;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--btfm-blue), var(--btfm-cyan));
}

/* ---------- 입력 ---------- */
.login-card label {
  color: #3d5170;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}
.login-card .form-input {
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--btfm-navy);
  background: var(--btfm-field);
  border: 1px solid var(--btfm-line);
  border-radius: 9px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.login-card .form-input::placeholder {
  color: #9fb0c6;
}
.login-card .form-input:focus {
  background: #fff;
  border-color: var(--btfm-blue);
  box-shadow: 0 0 0 3px rgba(10, 91, 255, 0.16);
  outline: none;
}

/* ---------- 로그인 버튼: 로고 그라데이션 ---------- */
.login-card button[type="submit"] {
  height: 42px;
  margin-top: 6px;
  border-radius: 9px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(100deg, var(--btfm-blue) 0%, #0f86f0 62%, #16c3e9 100%);
  box-shadow: 0 12px 22px -10px rgba(10, 91, 255, 0.65);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.login-card button[type="submit"]:hover {
  background: linear-gradient(100deg, var(--btfm-blue) 0%, #0f86f0 62%, #16c3e9 100%);
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 16px 26px -10px rgba(10, 91, 255, 0.7);
}
.login-card button[type="submit"]:active {
  transform: translateY(0);
}
.login-card button[type="submit"]:focus-visible {
  outline: 2px solid var(--btfm-cyan);
  outline-offset: 2px;
}

/* ---------- 하단 문구 ---------- */
.login-card > div.mt-8 {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid #edf2f8;
}
.login-card > div.mt-8 p {
  color: #8797ad;
  font-size: 11px;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .login-card *,
  .login-card button[type="submit"]:hover {
    transition: none !important;
    transform: none !important;
  }
}