/*!
 * JD Publishing CSS v2.1 (Base)
 * Prefix Convention:
 * - l- : layout primitives (structure)
 * - c- : components (cards, labels, buttons)
 * - u- : utilities (spacing, text, display)
 *
 * JD Rule #1: Global box-sizing: border-box
 * Load this file FIRST.
 */

/* =========================================
   4) Components (c-)
   ========================================= */
.c-card {
  background: var(--jd-color-bg);
  border: 1px solid var(--jd-color-border);
  border-radius: var(--jd-radius-2);
  padding: var(--jd-space-4);
  overflow: hidden;
}

.c-card__title {
  font-weight: 700;
  line-height: 1.3;
}

.c-card__meta {
  margin-top: var(--jd-space-1);
  font-size: 0.875rem;
  color: var(--jd-color-muted);
}

.c-label {
  display: inline-flex;
  align-items: center;
  gap: var(--jd-space-1);
  padding: 2px 8px;
  border: 1px solid var(--jd-color-border);
  border-radius: 999px;
  background: var(--jd-color-surface);
  font-size: 0.8125rem;
  color: var(--jd-color-muted);
}

/* 2컬럼 레이아웃: PC */
/* PC: 400px + 나머지 전체 */
/*
.c-auth {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  min-height: 100vh;
}
*/

/* PC: 400px + 나머지 전체 */
.c-auth {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  min-height: 100vh;
}
/* 좌측 패널 */

.c-auth__panel {
  padding: var(--jd-space-8);
}
/* --jd-space-8 은 32px */

/* Header spacing (원본 느낌: 로고는 위, 로그인 블록은 아래로) */
.c-auth__header {
  margin-bottom: var(--jd-space-6);
}

.c-auth__logo {
  display: block;
  /* 로고와 타이틀 사이 “공기감”을 화면 높이에 따라 유연하게 */
  margin-bottom: clamp(var(--jd-space-8), 50vh, var(--jd-space-15));
}

.c-auth__title {
  margin: 0 0 var(--jd-space-2);
}

.c-auth__desc {
  margin: 0;
}
.c-auth__desc-break {
  display: block;
}

/* 우측 프로모 */
.c-auth__promo {
  background: #bdbdbd; /* 기존 UI 느낌 유지용(원하면 토큰화) */
  display: grid;
  place-items: center;
  padding: var(--jd-space-8);
}

/* PAD 이하: 우측 숨김 + 1컬럼 + 폼 영역 가운데 정렬(캡쳐 느낌) */
@media (max-width: 1024px) {
  .c-auth {
    grid-template-columns: 1fr;
    background: #901b1b;
  }
  .c-auth__promo {
    display: none;
  }

  .c-auth__panel {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }

  .c-auth__logo {
    margin-inline: auto;
    margin-bottom: clamp(var(--jd-space-8), 30vh, var(--jd-space-15));
  }
  .l-footer {
    display: block;
  }
}

/* 모바일: 우측 영역 숨기고 1컬럼 */
@media (max-width: 640px) {
  .c-auth {
    grid-template-columns: 1fr;
    background: #2bab67;
  }
  .c-auth__promo {
    display: none;
  }
  .c-auth__logo {
    margin-inline: auto;
    margin-bottom: clamp(var(--jd-space-6), 30vh, var(--jd-space-15));
  }

  .c-auth__desc {
    line-height: 1.6;
  }
}