/*
  XEMI 로그인 테마 스타일 — Login.dc.html 디자인 적용.
  연한 블루 캔버스 + 물결 배경 위에 흰 카드 하나를 중앙 배치한다.
  본문 폰트는 프로젝트 표준(Pretendard)을 유지하고 디자인 원본 폰트를 폴백으로 둔다.
*/
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  /* 서피스 — 배경은 audioenhance 랜딩(--bg-landing) 그라디언트를 이식했다. */
  --canvas: linear-gradient(158deg, #ffffff 0%, #eef4fe 46%, #cfdffb 88%, #d2e1fb 100%);
  --surface: #ffffff;
  --field-bg: #f1f4fb;

  /* 브랜드 */
  --brand: #3b60e0;
  --brand-hover: #2c49b8;

  /* 텍스트 */
  --ink: #1e293b;
  --ink-strong: #334155;
  --muted: #64748b;
  --muted-soft: #94a3b8;

  /* 라인 */
  --hairline: #e2e8f0;
  --line-select: #c7d3ee;
  --line-ghost: #d5def3;
  --ghost-hover: #f6f9ff;

  /* 상태 */
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --success: #047857;
  --success-bg: #ecfdf5;

  /* 형태 */
  --radius-card: 20px;
  --radius-control: 12px;
  --shadow-card: 0 24px 60px rgba(59, 96, 224, 0.12);

  --font: 'Pretendard Variable', Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body.xemi {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ── 캔버스 ─────────────────────────────────────────────── */

.xemi-main {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  background: var(--canvas);
}

.xemi-col {
  position: relative;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── 카드 ───────────────────────────────────────────────── */

.xemi-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 44px 40px 40px;
}

.xemi-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--brand);
}

.xemi-wordmark {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.xemi-head {
  text-align: center;
  margin: 18px 0 34px;
}

.xemi-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.xemi-sub {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--muted);
}

/* ── 폼 ─────────────────────────────────────────────────── */

.xemi-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.xemi-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xemi-field label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
}

.xemi-field input {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--field-bg);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
}

.xemi-field input::placeholder { color: var(--muted-soft); }

.xemi-field input:focus {
  border-color: var(--brand);
  background: var(--surface);
}

.xemi-field input[aria-invalid="true"] { border-color: var(--danger); }

.xemi-field-error {
  font-size: 13px;
  color: var(--danger);
}

.xemi-btn {
  margin-top: 8px;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius-control);
  background: var(--brand);
  color: var(--surface);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.xemi-btn:hover { background: var(--brand-hover); }

/* ── 알림 ───────────────────────────────────────────────── */

.xemi-alert {
  margin-bottom: 20px;
  padding: 13px 16px;
  border-radius: var(--radius-control);
  font-size: 14px;
  line-height: 1.5;
}

.xemi-alert-error,
.xemi-alert-warning { background: var(--danger-bg); color: var(--danger); }
.xemi-alert-success { background: var(--success-bg); color: var(--success); }
.xemi-alert-info { background: var(--field-bg); color: var(--ink-strong); }

/* ── 기관(SSO) 로그인 ───────────────────────────────────── */

.xemi-sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 22px;
}

.xemi-sep::before,
.xemi-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.xemi-sep span {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-soft);
}

.xemi-sso {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xemi-select { position: relative; }

.xemi-select select {
  width: 100%;
  padding: 15px 44px 15px 18px;
  border: 1px solid var(--line-select);
  border-radius: var(--radius-control);
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--ink-strong);
  appearance: none;
  outline: none;
  cursor: pointer;
}

.xemi-select select:focus { border-color: var(--brand); }

/* 커스텀 화살표. select 위에 겹쳐 두고 클릭은 select로 통과시킨다. */
.xemi-select-caret {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.xemi-btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line-ghost);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.xemi-btn-ghost:hover { background: var(--ghost-hover); }

/* ── 푸터 ───────────────────────────────────────────────── */

.xemi-foot {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted-soft);
}

/* ── base 테마 화면 폴백 ────────────────────────────────
   비밀번호 재설정·OTP·페이지 만료·에러 화면은 base 테마 템플릿이 그린다. 그 마크업은 우리가 정의하지
   않은 PatternFly 클래스(kcFormClass 등)를 쓰므로 클래스가 빈 문자열로 렌더된다. 카드 안에서 최소한
   읽을 수 있도록 요소 선택자로 기본 서식을 준다. 우리 컴포넌트(.xemi-*)는 :not()으로 제외한다. */

.xemi-required {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted-soft);
}

.xemi-required span { color: var(--danger); }

/* 재인증 단계에서 "어떤 계정으로 진행 중인지" 표시 */
.xemi-attempted {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: var(--radius-control);
  background: var(--field-bg);
  font-size: 14px;
  color: var(--ink-strong);
}

.xemi-another-way,
.xemi-info {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.xemi-card a { color: var(--brand); text-decoration: none; }
.xemi-card a:hover { color: var(--brand-hover); text-decoration: underline; }

.xemi-card label:not(.xemi-field label) {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
}

.xemi-card input[type="text"],
.xemi-card input[type="email"],
.xemi-card input[type="password"],
.xemi-card input[type="number"],
.xemi-card textarea {
  width: 100%;
  margin-bottom: 16px;
  padding: 15px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--field-bg);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
}

.xemi-card input[type="submit"],
.xemi-card button:not(.xemi-btn):not(.xemi-btn-ghost) {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius-control);
  background: var(--brand);
  color: var(--surface);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.xemi-card input[type="submit"]:hover,
.xemi-card button:not(.xemi-btn):not(.xemi-btn-ghost):hover { background: var(--brand-hover); }

.xemi-card ul { margin: 0; padding: 0; list-style: none; }

/* ── 반응형 ─────────────────────────────────────────────── */

@media (max-width: 480px) {
  .xemi-main { padding: 24px 12px; }
  .xemi-card { padding: 32px 24px 28px; }
  .xemi-title { font-size: 26px; }
}