/* LM_LOTO_UI_V18 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

:root {
  --lm-font: "Pretendard Variable", Pretendard, "Noto Sans KR",
             "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  --lm-blue: #1268e8;
  --lm-blue-2: #2488ff;
  --lm-navy: #102f66;
  --lm-dark: #0b2149;
  --lm-text: #17233b;
  --lm-muted: #667085;
  --lm-line: #e3e9f3;
  --lm-soft: #f4f7fc;
}

/* 기존 웹 폰트·굵기·자간 유지 */

/* 기존 웹 폰트·굵기·자간 유지 */

/* 기존 웹 폰트·굵기·자간 유지 */

/* 기존 브랜드 글자가 딱딱하게 보이지 않도록 웹 글꼴과 통일 */
/* 기존 웹 폰트·굵기·자간 유지 */

/* 로그인 카드 — 기존 로그인 기능/폼은 그대로 두고 레이아웃만 분할 */
.lm-v18-login-card {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.05fr) !important;
  width: min(920px, calc(100vw - 40px)) !important;
  max-width: 920px !important;
  min-height: 520px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(18, 47, 102, 0.10) !important;
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(12, 35, 78, 0.18) !important;
}

.lm-v18-brand-panel {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 48px 42px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 15%, rgba(67, 163, 255, .34), transparent 34%),
    linear-gradient(145deg, #102f66 0%, #0b2149 58%, #071936 100%);
  overflow: hidden;
}

.lm-v18-brand-panel::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  box-shadow:
    0 0 0 42px rgba(255,255,255,.035),
    0 0 0 92px rgba(255,255,255,.025);
}

.lm-v18-brand-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 38px;
}

.lm-v18-brand-lockup img {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
  padding: 8px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.20);
}

.lm-v18-wordmark {
  min-width: 0;
  line-height: 1.05;
}

.lm-v18-wordmark b {
  display: block;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.lm-v18-wordmark span {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}

.lm-v18-brand-panel h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: 29px;
  line-height: 1.32;
  font-weight: 750;
  letter-spacing: -0.045em;
}

.lm-v18-brand-panel > p {
  position: relative;
  z-index: 1;
  margin: 16px 0 26px;
  color: rgba(255,255,255,.70);
  font-size: 14px;
  line-height: 1.75;
}

.lm-v18-feature-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lm-v18-feature-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  font-weight: 550;
}

.lm-v18-feature-list li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border-radius: 50%;
  color: #fff;
  background: rgba(38, 137, 255, .88);
  font-size: 12px;
  font-weight: 800;
}

.lm-v18-kakao {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 42px;
  margin-top: 30px;
  padding: 0 18px;
  border-radius: 12px;
  color: #191919 !important;
  background: #fee500;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 10px 24px rgba(0,0,0,.17);
}

.lm-v18-form-panel {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 48px 54px !important;
  background: #fff;
}

/* 기존 폼 안 제목/입력/버튼을 부드러운 SaaS 스타일로 */
.lm-v18-form-panel h1,
.lm-v18-form-panel h2,
.lm-v18-form-panel h3 {
  color: var(--lm-text) !important;
  font-weight: 750 !important;
  letter-spacing: -0.04em !important;
}

.lm-v18-form-panel input[type="text"],
.lm-v18-form-panel input[type="email"],
.lm-v18-form-panel input[type="password"] {
  box-sizing: border-box !important;
  min-height: 48px !important;
  border: 1px solid #d9e1ee !important;
  border-radius: 11px !important;
  background: #fff !important;
  font-size: 14px !important;
  transition: border-color .18s, box-shadow .18s !important;
}

.lm-v18-form-panel input:focus {
  border-color: var(--lm-blue) !important;
  box-shadow: 0 0 0 4px rgba(18,104,232,.11) !important;
  outline: none !important;
}

.lm-v18-form-panel button[type="submit"],
.lm-v18-form-panel .login-btn,
.lm-v18-form-panel [class*="login"][class*="button"] {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 11px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--lm-blue), #174fae) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  box-shadow: 0 10px 24px rgba(18,104,232,.22) !important;
}

/* 관리자 사이드바 폭과 본문 위치는 기존 관리자 CSS 사용 */
/* 관리자 로고 영역 */
body.lm-v18-admin .lm-v18-admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.lm-v18-admin .lm-v18-admin-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  padding: 5px;
  border-radius: 11px;
  background: #fff;
}

body.lm-v18-admin .lm-v18-admin-brand b {
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .lm-v18-login-card {
    display: block !important;
    width: min(440px, calc(100vw - 24px)) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 24px);
    overflow-y: auto !important;
    border-radius: 20px !important;
  }

  .lm-v18-brand-panel {
    padding: 28px 26px;
  }

  .lm-v18-brand-panel h2,
  .lm-v18-feature-list {
    display: none;
  }

  .lm-v18-brand-panel > p {
    margin-bottom: 0;
  }

  .lm-v18-kakao {
    margin-top: 18px;
  }

  .lm-v18-form-panel {
    padding: 30px 28px !important;
  }
}