/* 로그인 화면 공용 레이아웃(2026-09-23) — index · sso-confirm · sso-error 가 함께 쓴다.
   화면을 반으로 나눠 왼쪽에 로그인 영역, 오른쪽에 포털 「테마관리」 배경 사진.
   사진은 login.js 가 받아지면 --login-bg 로 깔고(html.has-bg), 없거나 실패하면 기존 파란 그라데이션.
   각 화면의 인라인 <style> 은 카드 안 요소만 다루고, 바탕·배치는 여기서 정한다(이 파일을 뒤에 링크). */

/* 그라데이션은 html 에 — body 에 두면 body::before(z-index:-1, 사진)보다 위에 칠해져 사진을 가린다. */
html { background: #0f172a linear-gradient(160deg, #0f172a 0%, #1e3a8a 100%) fixed; min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: transparent;
}
/* 사진은 화면 전체에 한 장 — 왼쪽 영역은 그 위에 반투명 면을 얹어 오른쪽과 이어져 보이게 한다. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--login-bg, none) center / cover no-repeat;
  opacity: 0;
  transition: opacity .5s ease;
}
html.has-bg body::before { opacity: 1; }

.pane {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* 소개영상(있으면) → 로그인 카드 */
  gap: 32px;
  padding: 40px 32px;
  /* 사진이 비쳐 보이게 반투명, 흐림 없음(2026-09-23 지시 — 예전 .86 + blur 18px 는 사진이 거의 안 보였다).
     글씨가 읽히는 선에서 더 비치게 하려면 알파를 낮추되 .6 아래는 밝은 사진에서 대비가 무너진다. */
  background: rgba(255, 255, 255, .66);
  box-shadow: 8px 0 40px rgba(0, 0, 0, .18);
}
/* 왼쪽 면이 곧 카드 — 카드 자체의 흰 바탕·그림자는 걷어 낸다. */
.pane .card {
  width: 100%;
  max-width: 400px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.photo { min-height: 100vh; }
/* 소개영상 무대(.login-intro — 포털 빌드가 만든 intro/ 묶음이 .pane 맨 앞에 넣는다) — 로그인 카드 위. */
.pane .login-intro {
  max-width: 560px;
  flex: 0 0 auto;
}
/* 세로가 낮은 넓은 화면에서는 영상이 로그인 칸을 밀어내므로 숨긴다. 좁은 화면은 아래로 스크롤되니 그대로 둔다. */
@media (min-width: 901px) and (max-height: 720px) { .pane .login-intro { display: none; } }
/* 화면 왼쪽 상단 사이트 이름(2026-09-23 지시). body 가 2열 grid 라 흐름에 두면 한 칸을 차지하므로 absolute 로 뺀다. */
.site-title {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: 22px;
  left: 28px;
  z-index: 1;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #0f172a;
}
.site-title b { font-weight: 800; color: #1d4ed8; }
/* 상단 브랜드(2026-09-23 지시 순서): [JAI : 자이] / 제주대학교 AI서비스 통합 브랜드 / https://jai.jejunu.ac.kr / (소개영상) / 카드.
   심볼(포털 jai-portal/frontend/public/assets/jnu-symbol.png 사본)은 좌상단 .site-title 맨 앞으로 옮겼다. 소개영상은 intro/ 묶음이 .brand-top 바로 뒤에 넣는다. */
.brand-top { text-align: center; }
.brand-row { display: inline-flex; align-items: center; gap: 18px; }
.jnu { display: block; height: 36px; width: auto; } /* 좌상단 사이트 이름 앞 작은 심볼 */
.brand-name { font-size: 58px; font-weight: 800; letter-spacing: .02em; color: #0f172a; line-height: 1; white-space: nowrap; }
.brand-name b { font-weight: inherit; color: #1d4ed8; }
.brand-colon { color: #94a3b8; }
.brand-sub { margin-top: 14px; font-size: 20px; font-weight: 600; color: #475569; }
.brand-url {
  display: inline-block;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #1d4ed8;
}
/* 테두리 대신 대괄호(2026-09-23 지시) — 세 화면 공통이라 HTML 이 아니라 여기서 붙인다 */
.brand-url::before { content: "[ "; }
.brand-url::after { content: " ]"; }
/* 괄호는 주소보다 흐리게 — 브랜드 이름의 콜론(.brand-colon)과 같은 색 */
.brand-url::before, .brand-url::after { color: #94a3b8; }
/* 반투명 면 위라 사진 무늬가 비친다 — 보조 글씨(기본 #64748b)를 한 단계 진하게, 테두리 버튼은 바탕을 깔아 읽히게. */
.pane .msg, .pane .foot { color: #475569; }
.pane .ghost { background: rgba(255, 255, 255, .6); }

/* 로그인 영역을 어둡게(2026-09-23 지시) — 넓은 화면(왼쪽)·좁은 화면(아래) 공통.
   각 화면의 인라인 스타일이 쓰는 색 변수(--text·--sub·--border·--err)를 .pane 스코프에서 다시 정의하고,
   변수가 아닌 고정색(#f8fafc 호버·입력칸 흰 바탕·아이콘 원)만 따로 덮는다. */
.pane {
  --text: #f1f5f9;
  --sub: #cbd5e1;
  --border: rgba(255, 255, 255, .24);
  --err: #fca5a5;
  background: rgba(8, 15, 30, .72);
  box-shadow: 8px 0 40px rgba(0, 0, 0, .35);
}
.pane .msg, .pane .foot { color: var(--sub); }
.brand-name, .site-title { color: #fff; }
/* JAI 는 선명한 하늘색(2026-09-23 지시 — 예전 #60a5fa 는 흐려 보였다) */
.site-title b, .brand-name b { color: #38bdf8; }
.brand-colon { color: #64748b; }
.brand-sub { color: #cbd5e1; }
.brand-url { color: #93c5fd; }
.brand-url::before, .brand-url::after { color: #64748b; }
.pane .icon { background: rgba(96, 165, 250, .18); color: #93c5fd; }
.pane .ghost { background: rgba(255, 255, 255, .06); }
.pane .ghost:hover { background: rgba(255, 255, 255, .14) !important; }
.pane input { background: rgba(255, 255, 255, .08); }
.pane input:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, .25); }
.pane .detail { background: rgba(255, 255, 255, .06); }

/* 좁은 화면(2026-09-23 지시): 가르지 않고 **사진 전체에 어두운 음영**을 깔고 화면을 세로 **3등분** —
   위 1/3 가운데 브랜드, 가운데 1/3 영상, 아래 1/3 로그인. 높이는 모바일 주소창을 뺀 실제 높이(100dvh).
   각 칸은 최소 내용 높이를 지키므로(1fr = minmax(auto, 1fr)) 로컬 로그인 폼처럼 길어도 넘치지 않고 늘어난다.
   영상이 없으면(동작 줄이기) 가운데 칸은 비어 있다. 색은 위 공통 블록(.pane 어두운 면)을 그대로 쓴다. */
@media (max-width: 900px) {
  /* body 기본값 min-height:100vh 는 모바일에서 **툴바를 숨긴 최대 높이**라 보이는 화면보다 크다 —
     그 높이로 3등분하면 로그인 버튼이 하단 내비 밑으로 밀린다. 보이는 높이(dvh)로 맞춘다(미지원 브라우저는 vh). */
  body { grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
  .photo { display: none; }
  .pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* 기본 .pane 의 justify-content:center 가 열을 내용 폭으로 줄이지 않게 */
    justify-content: stretch;
    grid-template-rows: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 40px 20px max(16px, env(safe-area-inset-bottom)); /* 위: 좌상단 사이트 이름 자리, 아래: 홈 표시줄 */
    box-shadow: none;
  }
  .pane > .brand-top { grid-row: 1; }
  .pane > .login-intro { grid-row: 2; width: 100%; } /* 가운데 정렬 칸에서는 내용 폭으로 줄어드니 폭을 채운다 */
  .pane > .card { grid-row: 3; width: 100%; max-width: 420px; }
  .site-title { top: 14px; left: 16px; font-size: 15px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
  .jnu { height: 28px; }
  .brand-name { font-size: 50px; }
  .brand-sub { margin-top: 12px; font-size: 18px; }
  .brand-url { margin-top: 10px; font-size: 15px; }
}