/* 로그인 v4 — 마일고고(milegogo.kr) 첫 화면의 분위기를 우리 자산으로 (2026-09-27)
 *
 * 정본: docs/vpn4/login-DESIGN.md (레퍼런스 실측값과 우리로 옮긴 값)
 * 뼈대: 화면 가득 영상 + 옅은 막 · 왼쪽 큰 흰 제목 + 부제 + 알약 칩 · 오른쪽 흰 카드(제공자 단추 + 사업자 표기)
 * 머리: vpn4 랜딩의 가운데 알약 메뉴 + 글자만 있는 EN | KO
 * 이 파일 하나로 로그인 화면을 그립니다(gvpn.css 를 싣지 않습니다). login.js 가 그리는
 * .pbtn · .ic · .inline-error · .demo-slot · .muted · .btn · .btn--ghost 도 여기서 맡습니다.
 */

@font-face { font-family: 'Switzer'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Switzer-400.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Switzer-500.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/Switzer-600.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 400; font-style: normal; font-display: swap; src: local('Pretendard Regular'), url('../fonts/Pretendard-Regular.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 500; font-style: normal; font-display: swap; src: local('Pretendard Medium'), url('../fonts/Pretendard-Medium.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 700; font-style: normal; font-display: swap; src: local('Pretendard Bold'), url('../fonts/Pretendard-Bold.subset.woff2') format('woff2'); }

:root {
  /* 글자색 — 마일고고 잉크(남색 계열). 하늘 영상과 한 톤으로 맞습니다 */
  --ink-950: #0B1F3A;
  --ink-800: #243B5A;
  --ink-650: #49617F;
  --ink-500: #5F7086;
  --line: #E3E9F0;
  --line-strong: #B7C7D8;
  --surface-blue: #EDF6FF;
  --chip-line: #B8D7F3;
  --blue-600: #1261C9;
  --white: #FFFFFF;
  --danger-ink: #8F181D;
  --danger-soft: #FDF1F1;
  --danger-line: #F0C2C2;
  /* 제공자 규정 색 (gvpn.css · 앱 brand_marks.dart 와 같은 값) */
  --kakao: #FEE500;
  --kakao-label: #000000;
  --google-line: #DADCE0;
  --google-label: #1F1F1F;
  --apple: #000000;

  /* 영상 위 글자 그림자 — 마일고고 .login-pitch h1 · .login-pitch-lead 실측 */
  --halo-h1: 0 1px 2px rgba(9, 26, 48, 0.5), 0 2px 20px rgba(9, 26, 48, 0.55);
  --halo-lead: 0 1px 2px rgba(9, 26, 48, 0.6), 0 2px 14px rgba(9, 26, 48, 0.55);

  /* 모양 */
  --r-card: 24px;       /* 우리 vpn4 카드 모서리(마일고고 18) */
  --r-btn: 10px;        /* 마일고고 --radius-sm 10px = vpn4 --r-btn */
  --r-pill: 14px;       /* vpn4 알약 메뉴 */
  --pill-top: 30px;
  --pill-h: 51px;
  --gutter: 60px;

  --font-sans: 'Switzer', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.44, 0, 0.56, 1);
}
/* 국문 페이지 — 한글·라틴·숫자 모두 Pretendard 먼저 (vpn4 랜딩과 같음) */
html[lang="ko"] { --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #0E2A57; }
body {
  margin: 0;
  min-height: 100svh;
  background: #0E2A57;
  color: var(--ink-950);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
p, h1, h2, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; }
.lg-pitch :focus-visible, .langsw :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 40;
  padding: 10px 14px; border-radius: var(--r-btn);
  background: var(--white); color: var(--ink-950); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ------------------------------------------------------------ 뒤 무대 — 화면 가득 하늘 영상 + 옅은 막 */
.lg-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: #0E2A57 url('/assets/video/hero-sky-poster.jpg') center / cover no-repeat;
}
.lg-bg__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 막 — 마일고고 .login-scrim(위 .18 → 34% .05 → 아래 .42 + 가운데 아래 방사형 .30) 에
   우리 영상의 밝은 구름 때문에 왼쪽(글자 자리)만 옆으로 한 겹 더 깝니다 */
.lg-bg__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 18, 40, 0.60) 0%, rgba(6, 18, 40, 0.50) 40%, rgba(6, 18, 40, 0.22) 58%, rgba(6, 18, 40, 0) 72%),
    linear-gradient(180deg, rgba(11, 31, 58, 0.18) 0%, rgba(11, 31, 58, 0.05) 34%, rgba(11, 31, 58, 0.30) 100%),
    radial-gradient(120% 78% at 50% 62%, rgba(11, 31, 58, 0.20) 0%, rgba(11, 31, 58, 0) 68%);
}

/* 머리글(알약 · EN | KO)은 site-v4.css 가 맡습니다 — 랜딩과 같은 값 (8차) */

/* ------------------------------------------------------------ 본문 — 마일고고 .login-screen · .login-stage */
.lg {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 105px 24px 24px;   /* 위 = 알약 아래 끝(81) + 마일고고 화면 여백 24 */
}
.lg__stage {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: start; gap: 48px;
  width: min(1240px, 100%);
}

/* 왼쪽 — 큰 흰 제목 · 부제 · 알약 칩 */
.lg-pitch { color: var(--white); padding-top: 34px; min-width: 0; }
.lg-pitch h2 {
  margin: 0; max-width: 640px;
  font-size: clamp(50px, 5.4vw, 76px); font-weight: 700; line-height: 1.08; letter-spacing: -0.055em;
  color: var(--white); text-shadow: var(--halo-h1); text-wrap: balance;
}
/* 영문 — Switzer 는 낱말 사이가 좁아 음수 자간이 낱말을 붙여 읽히게 합니다. 제목만 조이고 나머지는 0 */
html[lang="en"] body { letter-spacing: 0; }
html[lang="en"] .lg-pitch h2 { font-weight: 600; letter-spacing: -0.035em; }
html[lang="en"] .lg-card h1 { letter-spacing: -0.01em; }
html[lang="en"] .pbtn, html[lang="en"] .lg-points li, html[lang="en"] .lg-pitch__lead, html[lang="en"] .pill__links a { letter-spacing: 0; }
.lg-pitch__lead {
  max-width: 34em; margin: 16px 0 0;
  font-size: 20px; font-weight: 500; line-height: 1.7; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.93); text-shadow: var(--halo-lead);
}
.lg-points { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin: 26px 0 0; }
.lg-points li {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; max-width: 100%; padding: 7px 14px 7px 12px;
  border: 1px solid var(--chip-line); border-radius: 18px;
  background: var(--surface-blue); color: var(--ink-950);
  font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em;
  animation: lg-point-in 0.5s var(--ease-out) backwards;
}
.lg-points li:nth-child(1) { animation-delay: 60ms; }
.lg-points li:nth-child(2) { animation-delay: 140ms; }
.lg-points li:nth-child(3) { animation-delay: 220ms; }
.lg-points .ic { width: 16px; height: 16px; flex: none; color: var(--blue-600); stroke-width: 2.2; }

/* 오른쪽 — 흰 카드 (마일고고 .login-card) */
.lg-card {
  justify-self: start;   /* 마일고고: 오른쪽 칸의 왼쪽 끝(1440 에서 x 786) — 두 칸 사이 48 */
  width: min(452px, 100%); min-width: 0;
  padding: 30px 30px 22px;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--r-card);
  background: var(--white); color: var(--ink-950);
  box-shadow: 0 28px 70px rgba(11, 31, 58, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.lg-card h1 { margin: 0; font-size: 23px; font-weight: 700; line-height: 1.32; letter-spacing: -0.03em; color: var(--ink-950); }
.lg-card__lead { margin: 9px 0 0; font-size: 14px; line-height: 1.68; color: var(--ink-650); }

/* 제공자 단추 — login.js 가 .pbtn .pbtn--kakao|google|apple 로 그립니다 (마일고고 .login-google 54 높이) */
.auth-providers { display: grid; gap: 10px; margin-top: 22px; }
.pbtn {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; min-height: 54px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-btn);
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em;
  cursor: pointer;
  transition: transform 0.14s var(--ease-std), filter 0.14s var(--ease-std), box-shadow 0.14s var(--ease-std), opacity 0.14s var(--ease-std);
}
.pbtn .ic { width: 20px; height: 20px; flex: none; }
.pbtn:active:not(:disabled) { transform: scale(0.98); box-shadow: inset 0 2px 6px rgba(11, 31, 58, 0.09); }
.pbtn:disabled { opacity: 0.6; cursor: progress; }
.pbtn:hover:not(:disabled) { filter: brightness(0.96); }
.pbtn--kakao { background: var(--kakao); border-color: var(--kakao); color: var(--kakao-label); }
.pbtn--google { background: var(--white); border-color: var(--google-line); color: var(--google-label); }
.pbtn--google:hover:not(:disabled) { filter: none; background: #F8FAFD; border-color: var(--line-strong); }
.pbtn--apple { background: var(--apple); border-color: var(--apple); color: var(--white); }
.pbtn--naver { background: #03C75A; border-color: #03C75A; color: var(--white); }

/* 오류 자리 — 빈 채로 접습니다(display:none 은 live region 을 접근성 트리에서 뺍니다) */
.inline-error {
  margin-top: 12px; padding: 9px 12px;
  border: 1px solid var(--danger-line); border-radius: 9px;
  background: var(--danger-soft); color: var(--danger-ink);
  font-size: 13px; font-weight: 600; line-height: 1.5;
}
.inline-error:empty { margin: 0; padding: 0; border: 0; min-height: 0; }

/* 데모 자리 — 서버가 데모 모드일 때만 login.js 가 붙입니다 */
.demo-slot { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.muted { color: var(--ink-650); font-size: 13px; line-height: 1.6; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 18px; border: 1px solid transparent; border-radius: 11px;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.btn--ghost { background: var(--white); border-color: var(--line-strong); color: var(--ink-950); }
.btn--ghost:hover:not(:disabled) { border-color: var(--blue-600); background: var(--surface-blue); }
.btn:disabled { opacity: 0.6; cursor: progress; }

.auth-note { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-650); }
.auth-note a { color: var(--ink-950); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 카드 아래 — 사업자 표기 (마일고고 .login-biz: 12px · 1.6 · 가운데 · 흐르는 한 문단) */
.lg-foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--ink-500); font-size: 12px; line-height: 1.6; text-align: center;
}
.lg-foot a { color: var(--ink-650); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__biz dl { display: block; }
.site-footer__biz dl > div { display: inline; }
.site-footer__biz dl > div:not(:last-child)::after { content: ' · '; }
.site-footer__biz dt, .site-footer__biz dd { display: inline; }
.site-footer__biz dt::after { content: ' '; }
.site-footer__biz dt { color: var(--ink-650); font-weight: 500; }
.lang-note { margin-top: 6px; }
.site-footer__policy { margin-top: 8px; }
.site-footer__policy a { font-weight: 700; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin-top: 6px; }

/* ------------------------------------------------------------ 움직임 — 마일고고 login-point-in(0.5s · .16,1,.3,1) */
@keyframes lg-point-in { from { opacity: 0; transform: translateY(7px); } }

/* ------------------------------------------------------------ 좁은 화면 — 마일고고 900 이하: 한 줄로 쌓기 */
@media (max-width: 900px) {
  .lg { align-items: flex-start; padding: 92px 16px 30px; }
  .lg__stage { grid-template-columns: 1fr; gap: 16px; width: min(452px, 100%); }
  .lg-pitch { padding-top: 0; }
  .lg-pitch h2 { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.14; letter-spacing: -0.042em; }
  html[lang="en"] .lg-pitch h2 { letter-spacing: -0.03em; }
  .lg-pitch__lead { margin-top: 10px; font-size: 14.5px; line-height: 1.62; }
  .lg-points { gap: 6px; margin-top: 13px; }
  .lg-points li { min-height: 30px; padding: 5px 12px 5px 10px; font-size: 12px; border-radius: 15px; }
  .lg-points .ic { width: 14px; height: 14px; }
  .lg-card { justify-self: stretch; width: 100%; }
  /* 막 — 글자가 위에 오므로 위쪽을 진하게 */
  .lg-bg__shade {
    background:
      linear-gradient(180deg, rgba(6, 18, 40, 0.50) 0%, rgba(6, 18, 40, 0.40) 38%, rgba(6, 18, 40, 0.16) 70%, rgba(6, 18, 40, 0.30) 100%);
  }
}
/* 알약 — 800 이하에서는 왼쪽에 붙이고 작게(영문 알약 535px 가 가운데에서 EN | KO 와 겹치는 768 부근까지 덮습니다) */
@media (max-width: 800px) {
  :root { --pill-top: 16px; --gutter: 16px; }
}
@media (max-width: 560px) {
  .lg-card { padding: 22px 18px 18px; border-radius: 20px; }
  .pbtn { gap: 9px; padding: 0 12px; }
}

/* ------------------------------------------------------------ 움직임 줄이기 — 영상 대신 포스터 한 장 */
@media (prefers-reduced-motion: reduce) {
  .lg-bg__video { display: none; }
  .lg-points li { animation: none; }
  .pbtn { transition: none; }
}

/* ------------------------------------------------------------ 6차 — 로그인 모달 하나 (대표님 캡처 181917)
   환영합니다 → 대표님이 주신 영상(가운데를 16:10 으로 잘라 씀) → 버튼 셋 → 동의 한 줄.
   왼쪽 문구는 걷었고, 사업자 표기는 모달 밖 화면 맨 아래 작은 띠로 옮겼습니다(docs/vpn4/login-legal-refs.md). */
.lg--modal { flex-direction: column; justify-content: center; gap: 20px; padding: 108px 16px 20px; }
.lg-modal {
  width: min(420px, 100%);
  padding: 26px 24px 22px;
  border-radius: 28px;
  background: var(--white); color: var(--ink-950);
  box-shadow: 0 30px 80px rgba(6, 18, 40, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.lg-modal h1 { margin: 0; text-align: center; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; color: var(--ink-950); }
html[lang="en"] .lg-modal h1 { font-weight: 600; letter-spacing: -0.02em; }
.lg-modal__media { position: relative; margin-top: 16px; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #DCEBFA url('/assets/video/welcome-poster.jpg') center / cover no-repeat; }
.lg-modal__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lg-modal .auth-providers { margin-top: 18px; }
/* 8차(대표님 캡처 #79 — 앱 웰컴과 같게): 버튼 바로 위 고정 칸. 기기 안내와 오류를 같은 자리에 겹쳐 두고,
   오류가 있으면 안내를 가립니다. 칸 높이가 그대로라 버튼 셋이 위아래로 움직이지 않습니다. */
.lg-slot { display: grid; align-items: center; height: 46px; margin-top: 14px; }
.lg-slot > * { grid-area: 1 / 1; margin: 0; }
.lg-hint { text-align: center; font-size: 13.5px; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-650); }
html[lang="en"] .lg-hint { letter-spacing: 0; }
.lg-slot .inline-error { position: relative; z-index: 1; margin: 0; padding: 4px 10px; font-size: 12.5px; line-height: 1.35; text-align: center; }
.lg-slot .inline-error:empty { padding: 0; border: 0; }
.lg-slot .inline-error:not(:empty) ~ .lg-hint { visibility: hidden; }
.lg-modal .lg-slot + .auth-providers { margin-top: 10px; }
.lg-modal .auth-note { margin-top: 14px; text-align: center; font-size: 12.5px; line-height: 1.55; }
/* 7차(대표님 캡처 190606) — 한 화면에 꽉(위아래), 스크롤 없이. 아래 사업자 표기는 테두리 없는 흰 작은 글씨 두 줄.
   화면 높이가 모자라면 영상 칸이 먼저 줄어듭니다(560px 아래에서는 0). 버튼 · 동의 한 줄은 늘 보입니다. */
html:has(.lg--modal), html:has(.lg--modal) body { height: 100%; }
.lg--modal { height: 100svh; min-height: 0; padding: 96px 16px 14px; gap: 14px; justify-content: space-between; }
.lg--modal .lg-modal { margin: auto 0; flex: none; }
.lg-modal__media { aspect-ratio: auto; height: clamp(0px, calc(100svh - 580px), 232px); }
.lg-foot--page {
  flex: none; width: min(1240px, 100%); margin: 0 auto; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: rgba(255, 255, 255, 0.86); font-size: 11.5px; line-height: 1.6; text-align: center;
  text-shadow: 0 1px 8px rgba(6, 18, 40, 0.55);
}
.lg-foot--page a { color: var(--white); }
.lg-foot--page .site-footer__biz dt { color: rgba(255, 255, 255, 0.66); }
/* 두 줄 — 사업자 여덟 항목 · 약관 넷 · 저작권을 한 문단으로 흘려 좌우로 길게(넓은 화면은 두 줄에 다 들어감) */
.lg-foot--page .site-footer__biz, .lg-foot--page .site-footer__biz dl, .lg-foot--page .site-footer__policy, .lg-foot--page .site-footer__bottom { display: inline; margin: 0; }
.lg-foot--page .site-footer__policy::before, .lg-foot--page .site-footer__bottom::before { content: ' · '; }
.lg-foot--page .site-footer__bottom > span + span { display: none; } /* 저작권 옆 약관 두 링크는 바로 앞 약관 넷과 겹쳐 뺍니다(마크업은 그대로) */
.lg-foot--page .site-footer__bottom { gap: 0; }
.lg-foot--page > .lg-foot__lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* 영문 쪽 안내 한 줄(등록 값은 한국어 그대로라는 설명)은 두 줄 안에 약관 링크가 들어가도록 이 띠에서만 숨깁니다(마크업은 그대로) — 7차 리뷰 R-001 */
.lg-foot--page .lang-note { display: none; }
/* 7차: 영문은 영어 값이라 국문보다 40% 길어 1240px 두 줄에 안 들어갑니다 — 넓은 화면에서 띠를 좌우로 더 씁니다(대표님 「좌우로 길게」) */
@media (min-width: 1100px) { html[lang="en"] .lg-foot--page { width: min(1480px, calc(100% - 32px)); } }
@media (max-width: 560px) {
  .lg--modal { padding: 84px 12px 10px; gap: 10px; }
  .lg-modal { padding: 20px 16px 16px; border-radius: 24px; }
  .lg-modal h1 { font-size: 22px; }
  .lg-modal__media { height: clamp(0px, calc(100svh - 560px), 204px); margin-top: 12px; }
  .lg-modal .auth-providers { margin-top: 14px; gap: 8px; }
  .lg-modal .pbtn { height: 50px; }
  .lg-foot--page { font-size: 10px; line-height: 1.5; }
}

/* vpn-m (2026-09-29) — 900 이하 규칙(.lg align-items: flex-start)이 모달형 로그인 카드까지 왼쪽에 붙였습니다
   (768 · 가로 844 실측: 가운데에서 -158 · -196px). 모달형은 늘 가운데. 가로 폰은 높이 고정을 풀어 카드 · 아래 띠가 흐르게 */
.lg--modal { align-items: center; }
@media (orientation: landscape) and (max-height: 500px) {
  .lg--modal { height: auto; min-height: 100svh; padding-top: 80px; }
}