/* ── 로그인 화면 전용 — login.php 만 로드한다 (WS_STYLES 에 넣지 않는다: 보드 DOM 전제가 없는 독립 화면)
     풀스크린 2분할: 좌측 히어로(워드마크·태그라인·오로라) + 우측 리퀴드 글래스 로그인 카드. 색·타입은 tokens.css ── */
  body.page-auth { overflow: auto; display: block; }   /* tokens.css 의 보드 전제(overflow hidden·flex 컬럼) 해제 */

  .auth-split {
    min-height: 100dvh; width: 100%;
    display: grid; grid-template-columns: 1fr minmax(400px, 38%);
  }

  /* ── 좌측 히어로 ── */
  .auth-hero {
    position: relative; overflow: hidden; isolation: isolate;   /* isolate: z-index:-1 오로라가 배경 위·텍스트 아래 */
    display: flex; flex-direction: column;
    /* 좌우 여백은 화면 폭을 따라 넓어진다(큰 화면에서 텍스트가 왼쪽 벽에 붙지 않게) — 정렬은 왼쪽 기준 유지 */
    padding: clamp(40px, 6vw, 120px) clamp(40px, 9vw, 200px);
    background: linear-gradient(150deg, var(--roof), var(--sky-a) 55%, var(--sky-b));
  }
  /* 라이트 오로라 — 보드(board.css .wdg-view::before)의 수채화판. 크기를 % 가 아닌 고정 반지름 원(circle Npx)으로
     잡아 창 비율이 바뀌어도 늘어나지 않고, 블러로 물이 번진 듯 퍼뜨린다.
     두 장(::before/::after)으로 나눠 서로 다른 속도로 아주 느리게 흐른다 — 성능: 블러 레이어는 will-change 로 한 번만
     GPU 래스터되고 transform 만 움직여 합성 비용뿐이다(background-position·filter 애니메이션은 매 프레임 재래스터라 금지) */
  .auth-hero::before, .auth-hero::after {
    content: ''; position: absolute; inset: -15%; z-index: -1; pointer-events: none;
    filter: blur(64px); will-change: transform;
  }
  .auth-hero::before {   /* 블러가 색을 희석하므로 농도는 보드 원본보다 진하게 잡는다 */
    background:
      radial-gradient(circle 360px at 22% 26%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
      radial-gradient(circle 260px at 66% 60%, color-mix(in srgb, #5b9bd5 24%, transparent), transparent 70%);
    animation: auroraA 26s ease-in-out infinite alternate;
  }
  .auth-hero::after {
    background:
      radial-gradient(circle 320px at 80% 18%, color-mix(in srgb, #5b9bd5 38%, transparent), transparent 70%),
      radial-gradient(circle 400px at 52% 90%, color-mix(in srgb, var(--postit) 40%, transparent), transparent 72%);
    animation: auroraB 34s ease-in-out infinite alternate;
  }
  body[data-theme="evening"] .auth-hero::before {
    background:
      radial-gradient(circle 360px at 22% 26%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
  }
  body[data-theme="evening"] .auth-hero::after {
    background:
      radial-gradient(circle 320px at 80% 18%, color-mix(in srgb, #3a5a8c 40%, transparent), transparent 70%),
      radial-gradient(circle 400px at 52% 90%, color-mix(in srgb, #6a5a3a 32%, transparent), transparent 72%);
  }
  /* 이동량은 레이어 크기의 몇 % — 번짐이 "숨 쉬듯" 자리를 옮기는 정도. inset -15% 안에서 끝나므로 가장자리가 드러나지 않는다 */
  @keyframes auroraA { to { transform: translate3d(3%, -2.5%, 0) scale(1.05); } }
  @keyframes auroraB { to { transform: translate3d(-2.5%, 3%, 0) scale(1.04); } }
  .auth-hero-body {
    position: relative; max-width: 680px; margin: auto 0;   /* 세로만 가운데, 가로는 왼쪽 기준 */
    display: flex; flex-direction: column; gap: 24px;
  }
  .auth-wordmark {   /* 로고 이미지 없이 텍스트 투톤 — 그리드 밖 특례(로그인 히어로 전용) */
    font-size: clamp(40px, 4.6vw, 64px); line-height: 1.1;
    font-weight: var(--fw-display); letter-spacing: -0.03em;
  }
  .auth-wordmark .wm-a { margin-right: 0.14em; }   /* 워드마크는 단색 잉크 — 단어 사이 숨만 */
  .auth-tagline {
    font-size: clamp(var(--fs-t9), 2.2vw, var(--fs-t11)); line-height: 1.45;
    font-weight: var(--fw-bold); letter-spacing: -0.02em; word-break: keep-all;
  }
  .auth-caption { font-size: var(--fs-t4); line-height: var(--lh-t4); color: var(--ink-soft); word-break: keep-all; }
  .auth-hero-foot { position: relative; font-size: var(--fs-t2); line-height: var(--lh-t2); color: var(--ink-soft); opacity: 0.7; }

  /* ── 우측 로그인 카드 ── */
  .auth-side {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(24px, 4vw, 48px);
    background: var(--sky-b);
    /* border-left: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); */
  }
  /* 카드 뒤 오로라 — 유리가 굴절시킬 배경(민무늬 위에선 글래스가 안 보인다). 히어로보다 옅게, 역시 두 장이 느리게 흐른다 */
  .auth-side::before, .auth-side::after {
    content: ''; position: absolute; inset: -15%; z-index: -1; pointer-events: none;
    filter: blur(56px); will-change: transform;
  }
  .auth-side::before {
    background:
      radial-gradient(circle 300px at 30% 22%, color-mix(in srgb, #5b9bd5 34%, transparent), transparent 70%),
      radial-gradient(circle 320px at 40% 88%, color-mix(in srgb, var(--postit) 36%, transparent), transparent 72%);
    animation: auroraB 30s ease-in-out infinite alternate;
  }
  .auth-side::after {
    background:
      radial-gradient(circle 240px at 78% 48%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
    animation: auroraA 22s ease-in-out infinite alternate;
  }
  body[data-theme="evening"] .auth-side::before {
    background:
      radial-gradient(circle 300px at 30% 22%, color-mix(in srgb, #3a5a8c 38%, transparent), transparent 70%),
      radial-gradient(circle 320px at 40% 88%, color-mix(in srgb, #6a5a3a 30%, transparent), transparent 72%);
  }
  body[data-theme="evening"] .auth-side::after {
    background:
      radial-gradient(circle 240px at 78% 48%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  }
  .auth-box { position: relative; width: min(420px, 100%); }
  .auth-brand-sm {   /* 히어로가 숨는 좁은 화면 전용 워드마크 */
    display: none; text-align: center; margin-bottom: 24px;
    font-size: var(--fs-t5); line-height: var(--lh-t5); font-weight: var(--fw-bold); letter-spacing: -0.01em;
  }
  .auth-card {   /* 리퀴드 글래스 — 보드 위젯 카드(board.css .wdg-grid .w)와 같은 문법 */
    position: relative;
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    backdrop-filter: blur(28px) saturate(180%);              /* url() 미지원 폴백 */
    backdrop-filter: url(#liquidGlass) blur(9px) saturate(175%) brightness(1.02);
    border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    border-radius: 26px;
    box-shadow:
      inset 0 1px 0 var(--glass-rim),                       /* 윗모서리 림 라이트 */
      inset 1px 0 0 color-mix(in srgb, var(--glass-rim) 55%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--ink) 5%, transparent),
      0 30px 70px -42px var(--shadow), 0 4px 14px -10px var(--shadow);
    padding: clamp(32px, 3.4vw, 40px) clamp(28px, 3vw, 36px);   /* 세로를 더 줘 답답하지 않게 */
  }
  .auth-card::after {   /* 사선 광택 + 볼록면 반사 */
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background:
      radial-gradient(120% 90% at 12% -18%, var(--glass-sheen), transparent 42%),
      linear-gradient(133deg, color-mix(in srgb, var(--glass-sheen) 60%, transparent) 0%, transparent 34%),
      radial-gradient(90% 60% at 50% 118%, color-mix(in srgb, var(--glass-rim) 22%, transparent), transparent 55%);
  }
  .auth-card > * { position: relative; z-index: 1; }   /* 광택 레이어 위에 내용(버튼 클릭 보장) */
  .auth-title { font-size: var(--fs-t7); line-height: var(--lh-t7); font-weight: var(--fw-bold); letter-spacing: -0.01em; margin-bottom: 10px; }
  .auth-lead { font-size: var(--fs-t3); line-height: var(--lh-t3); color: var(--ink-soft); margin-bottom: 30px; word-break: keep-all; }
  .auth-cta {   /* 프라이머리 = ink 배경 (dialogs.css .btn.primary 문법 — accent 단색은 과해서 기각된 전례) */
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    background: var(--ink); color: var(--sky-a); text-decoration: none;
    font-size: var(--fs-t4); font-weight: var(--fw-medium);
    padding: 16px 20px; border-radius: 12px;
    transition: transform var(--hover), box-shadow var(--hover);
  }
  .auth-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -22px var(--shadow); }
  .auth-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .auth-links {
    margin-top: 24px; text-align: center;
    font-size: var(--fs-t2); line-height: var(--lh-t2); color: var(--ink-soft); word-break: keep-all;
  }
  .auth-links b { color: var(--ink); font-weight: var(--fw-medium); }
  .auth-foot {
    margin-top: 20px; text-align: center;
    font-size: var(--fs-t2); line-height: var(--lh-t2); color: var(--ink-soft); opacity: 0.7;
  }

  @media (max-width: 860px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-hero { display: none; }
    .auth-side { border-left: 0; align-items: flex-start; padding-top: clamp(48px, 14vh, 120px); }
    .auth-brand-sm { display: block; }
  }
  @media (prefers-reduced-motion: reduce) {
    .auth-cta { transition: none; }
    .auth-cta:hover { transform: none; }
    .auth-hero::before, .auth-hero::after, .auth-side::before, .auth-side::after { animation: none; will-change: auto; }
  }