/* ============================================================
   socialradar 360 — 로그인 · 비밀번호 변경 (renew_v8)
   v8.css 토큰 위에서만 동작.

   · lgn-*  로그인 (2026-08-13 개편 — 2컬럼 아이덴티티 패널형)
   · lg-*   비밀번호 변경(안전망 화면)의 구 중앙 카드 문법 — 지우지 말 것

   히어로 워드마크는 단축 마크(socialradar·) — 360 을 붙이면 1025~1280
   구간에서 좌측 컬럼을 넘친다. 로고는 화면에 한 번만 (2026-08-13 사용자
   피드백 — 좌우 중복 제거). 제품명(socialradar 360)은 서브 카피가 담당.
   장식 원칙: 아이콘·배지 금지, 타이포와 헤어라인만 (양산형 인상 방지).
   ============================================================ */

/* ---- 프리미엄 스킨 정렬 — renew_v8 각 페이지의 :root 오버라이드와 동일 톤 ---- */
:root {
  --brand: #6366f1; --brand-soft: #eeeffe; --brand-deep: #4338ca;
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  --shadow-hover: 0 12px 28px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
}

/* ════════════════════════════════════════════════════════════
   로그인 — 2컬럼: 좌 아이덴티티 패널(브랜드·태그라인) / 우 폼존
   ════════════════════════════════════════════════════════════ */
.lgn-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface);
}

/* ── 좌: 아이덴티티 ── */
.lgn-id {
  position: relative;
  display: flex;
  padding: 44px 56px;
  border-right: 1px solid var(--border);
  background:
    radial-gradient(circle at 82% 12%, rgba(99, 102, 241, 0.10), transparent 55%),
    radial-gradient(circle at 10% 92%, rgba(34, 183, 90, 0.05), transparent 50%),
    var(--bg);
  overflow: hidden;
}
/* 레이더 링 — 인디고 글로우와 같은 축(우상단)에서 퍼지는 동심원. 장식이므로 아주 옅게 */
.lgn-id::after {
  content: '';
  position: absolute; top: -190px; right: -190px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
    rgba(99, 102, 241, 0) 0 56px,
    rgba(99, 102, 241, 0.075) 56px 57px);
  -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 70%);
  mask-image: radial-gradient(circle, #000 28%, transparent 70%);
  pointer-events: none;
}
.lgn-id-in {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px;
  margin: 0 auto;
}
.lgn-id-center {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 8vh;
}

/* 히어로 — 완전 표기(socialradar360°), 이 화면의 유일한 로고. ° 블립 */
.lgn-wm {
  font-size: 72px; line-height: 1;
  font-weight: 800; letter-spacing: -0.04em;
  white-space: nowrap;
  margin: 0 0 28px;
}
.lgn-wm .b1 { color: var(--ink-3); }
.lgn-wm .b2 { color: var(--ink); }
.lgn-wm .b3 { color: var(--ink); margin-left: 0.055em; }
.lgn-wm .b4 {
  color: var(--brand);
  margin-left: 0.01em;
  display: inline-block;              /* transform 적용을 위해 */
  animation: lgn-blip 2.6s ease-in-out infinite;
  transform-origin: 50% 62%;          /* ° 원의 중심 근처에서 수축 */
}
@keyframes lgn-blip {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .lgn-wm .b4 { animation: none; }
}

.lgn-tag {
  font-size: 30px; line-height: 1.38;
  font-weight: 800; letter-spacing: -0.03em;
  color: var(--ink);
  word-break: keep-all;
  margin: 0 0 14px;
}
.lgn-sub {
  font-size: 15px; line-height: 1.6;
  font-weight: 500;
  color: var(--ink-2);
  word-break: keep-all;
}

.lgn-copy { font-size: 11px; color: var(--ink-4); }

/* ── 우: 로그인 폼 — 그라운드(--bg) 위 서피스 카드 (v8 앱 문법) ── */
.lgn-form {
  display: flex; align-items: center; justify-content: center;
  padding: 44px 40px calc(44px + 8vh);
  background: var(--bg);
}
.lgn-form-in { width: 100%; max-width: 404px; }

.lgn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 34px 32px 30px;
  box-shadow: var(--shadow-card);
}

.lgn-title {
  font-size: 21px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.3;
  color: var(--ink);
  margin: 0 0 6px;
}
.lgn-desc {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.6;
  word-break: keep-all;
  margin: 0 0 24px;
}

.lgn-form-in .sr-notice { margin-bottom: 16px; }
.lgn-form-in .sr-notice span { word-break: keep-all; }

.lgn-sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px;
  background: var(--ink); color: #fff;
  font-size: var(--fs-md); font-weight: 600;
  border-radius: 10px;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.lgn-sso-btn:hover { background: #1e293b; box-shadow: var(--shadow-hover); }
.lgn-sso-btn:active { transform: translateY(1px); box-shadow: none; }
.lgn-sso-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lgn-sso-btn svg, .lgn-sso-btn i { width: 17px; height: 17px; }

.lgn-help {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: baseline;
  gap: 4px 12px;                      /* 안내 문구 ↔ 링크 묶음 사이 여백 */
  margin-top: 24px;
  font-size: 12.5px; text-align: center;
  color: var(--ink-3); line-height: 1.7;
  word-break: keep-all;
}
.lgn-help a { color: var(--brand); font-weight: 600; padding: 2px 1px; }   /* 터치·클릭 여유 */
.lgn-help a:hover { text-decoration: underline; }
.lgn-help .sep { margin: 0 9px; color: var(--ink-4); }

/* 카드 아래 법적 고지 링크 — 로그인 화면의 표준 구성 요소 */
.lgn-legal {
  margin-top: 18px;
  font-size: 11.5px; text-align: center;
  color: var(--ink-4);
}
.lgn-legal a { color: var(--ink-3); }
.lgn-legal a:hover { color: var(--ink); text-decoration: underline; }
.lgn-legal .sep { margin: 0 6px; }

/* 모바일(단일 컬럼)에서만 노출되는 카피라이트 — 데스크톱은 좌측 패널 하단이 담당 */
.lgn-copy-m { display: none; margin-top: 12px; text-align: center; font-size: 11px; color: var(--ink-4); }

/* ── 와이드 (≥1441px) ── */
@media (min-width: 1441px) {
  .lgn-wm     { font-size: 84px; margin-bottom: 32px; }
  .lgn-tag    { font-size: 34px; }
  .lgn-sub    { font-size: 16px; }
  .lgn-id-in  { max-width: 640px; }
}

/* ── 좁은 데스크톱 (1025~1280px) — 폼 컬럼을 줄이고 히어로를 축소해 잘림 방지 ── */
@media (max-width: 1280px) and (min-width: 1025px) {
  .lgn-shell { grid-template-columns: minmax(0, 1fr) 480px; }
  .lgn-id    { padding: 40px 44px; }
  .lgn-wm    { font-size: 54px; margin-bottom: 24px; }
  .lgn-tag   { font-size: 26px; }
}

/* ── 태블릿 이하 (≤1024px) — 단일 컬럼, 패널이 상단 히어로가 된다 ── */
@media (max-width: 1024px) {
  .lgn-shell { grid-template-columns: minmax(0, 1fr); }
  .lgn-id {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 56px 28px 44px;
    text-align: center;
  }
  .lgn-id::after { top: -230px; right: -230px; }
  .lgn-id-center { padding-bottom: 0; align-items: center; }
  .lgn-copy { display: none; }
  .lgn-wm   { font-size: 56px; margin-bottom: 20px; }
  .lgn-tag  { font-size: 22px; }
  .lgn-sub  { font-size: 14px; }
  .lgn-form { padding: 40px 24px calc(52px + env(safe-area-inset-bottom, 0px)); }
  .lgn-copy-m { display: block; }
}

/* ── 모바일 (≤640px) ── */
@media (max-width: 640px) {
  .lgn-id    { padding: 42px 18px 34px; }
  .lgn-wm    { font-size: min(44px, 12vw); margin-bottom: 16px; }
  .lgn-tag   { font-size: 19px; }
  .lgn-card  { padding: 26px 20px 24px; }
  .lgn-sso-btn { font-size: 15px; padding: 14px 16px; }   /* 터치 여유 */
}

/* ════════════════════════════════════════════════════════════
   비밀번호 변경 (안전망 화면) — 구 중앙 카드 문법
   password-change.blade.php 전용. 로그인은 위 lgn-* 만 쓴다.
   ════════════════════════════════════════════════════════════ */
.lg-shell {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px; padding: 40px 20px;
}

.lg-brand {
  display: flex; align-items: baseline; gap: 1px;
  font-size: 28px; font-weight: 800; letter-spacing: -0.04em;
}
.lg-brand .b1 { color: var(--ink-3); }
.lg-brand .b2 { color: var(--ink); }
.lg-brand .b3 { color: var(--ink); margin-left: 0.055em; }
.lg-brand .b4 { color: var(--brand); margin-left: 0.01em; }

.lg-card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 30px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--shadow-card);
}

.lg-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.015em; }
.lg-sub   { font-size: var(--fs-base); color: var(--ink-2); line-height: 1.6; margin-top: 4px; }

.lg-caption { font-size: var(--fs-sm); color: var(--ink-3); text-align: center; line-height: 1.6; }
.lg-caption a { color: var(--brand); font-weight: 600; }
.lg-caption a:hover { text-decoration: underline; }

.lg-foot { font-size: var(--fs-xs); color: var(--ink-4); }

@media (max-width: 640px) {
  .lg-card { padding: 26px 22px; }
}