/* 로그인 화면 디자인 테마 (login.ejs 전용, 다른 화면에는 영향 없음).
   2026-10-23 총무부 요청으로 기본 테마를 GM 블루(gmblue)로 변경하고 시안(총무부요구시안.png) 구성으로
   재배치: 상단 GM 로고 + GM KOREA CHANGWON PLANT, 원형 아이콘, MCS 워드마크, 아이콘 입력칸, 블루 버튼.
   변경 전 디자인(그린 기본)은 backup_design_20261023/ 에 보관.
   [data-ui-theme] 값으로 스위칭 - 로그인 화면은 아직 "어느 계정"인지 모르는 상태라 항상 기본(gmblue)로 보인다.
   - gmblue(기본): GM 블루 - 총무부 시안
   - green: 밥장부모바일 실브랜드 이식(이전 기본)
   - blue: 풀무원 디자인밀 레퍼런스의 비비드 블루
   - gmnavy: GM_NextGen_Dining_Design_Concept.pptx 기반 다크네이비 시안
   폰트는 Pretendard(dynamic-subset, 실제 쓰는 글자만 받아 용량 최소화, 전 테마 공통). */

:root {
  --primary: #0B5BD3;
  --primary-rgb: 11, 91, 211;
  --primary-hover: #0847A8;
  --ink: #0B1F44;
  --ink-muted: #5A6B85;
  --card-bg: #FFFFFF;
  --card-border: rgba(11, 60, 140, 0.10);
  --card-blur: 0px;
  --card-shadow: 0 1px 2px rgba(11, 40, 100, 0.06), 0 28px 56px -16px rgba(11, 40, 100, 0.28);
  --badge-bg: linear-gradient(135deg, #1B78EA, #0A4DC2);
  --eyebrow-bg: #E6F0FD;
  --eyebrow-border: #C7DBF8;
  --eyebrow-text: #0B4FAE;
  --input-bg: #F4F8FE;
  --input-border: rgba(11, 91, 211, 0.22);
  --bg-a: radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 70%);
  --bg-b: radial-gradient(50% 40% at 100% 100%, rgba(11, 91, 211, 0.10), transparent 70%);
  --bg-c: linear-gradient(170deg, #F6FAFF 0%, #E8F1FD 55%, #D9E7FA 100%);
  --blob-a: radial-gradient(300px 300px at 82% 15%, rgba(11, 91, 211, 0.10), transparent 65%);
  --blob-b: radial-gradient(240px 240px at 12% 82%, rgba(11, 91, 211, 0.07), transparent 65%);
  --grain-opacity: 0.02;
  --grain-blend: multiply;
  --danger: #C6412A;
  --disclaimer-bg: #FFF3ED;
  --disclaimer-border: #EFC4B4;
  --disclaimer-text: #AD4B2F;
  --mark-bg: linear-gradient(90deg, #0A2A74 0%, #0A2A74 68%, #1478F0 72%, #2D8CF5 100%);
  --deco-opacity: 1;
  --info-bg: #EAF3FF;
  --info-border: #CDE0FA;
  --info-text: #0B4FAE;
}

:root[data-ui-theme="green"] {
  --primary: #1BAA5C;
  --primary-rgb: 27, 170, 92;
  --primary-hover: #14903F;
  --ink: #17211C;
  --ink-muted: #5B6B63;
  --card-border: rgba(23, 33, 28, 0.08);
  --card-shadow: 0 1px 2px rgba(23, 33, 28, 0.05), 0 24px 48px -14px rgba(23, 33, 28, 0.18);
  --badge-bg: #1C3630;
  --eyebrow-bg: #E9F6EF;
  --eyebrow-border: #CDE9DA;
  --eyebrow-text: #14703F;
  --input-bg: #F7FBF8;
  --input-border: rgba(23, 33, 28, 0.08);
  --bg-a: radial-gradient(50% 55% at 88% 0%, rgba(27, 170, 92, 0.10), transparent 70%);
  --bg-b: radial-gradient(40% 45% at 8% 100%, rgba(27, 170, 92, 0.07), transparent 70%);
  --bg-c: linear-gradient(165deg, #F7FBF8 0%, #EEF5F0 60%, #E6F1EA 100%);
  --blob-a: radial-gradient(300px 300px at 82% 15%, rgba(27, 170, 92, 0.09), transparent 65%);
  --blob-b: radial-gradient(240px 240px at 12% 82%, rgba(27, 170, 92, 0.06), transparent 65%);
  --grain-opacity: 0.025;
  --mark-bg: linear-gradient(135deg, #1BAA5C, #14903F);
  --deco-opacity: 0;
  --info-bg: #FFF3ED;
  --info-border: #EFC4B4;
  --info-text: #AD4B2F;
}

:root[data-ui-theme="blue"] {
  --primary: #2F6FED;
  --primary-rgb: 47, 111, 237;
  --primary-hover: #1D4ED8;
  --ink: #16212B;
  --ink-muted: #56707F;
  --card-border: rgba(22, 46, 61, 0.08);
  --card-shadow: 0 1px 2px rgba(22, 46, 61, 0.05), 0 24px 48px -14px rgba(22, 46, 61, 0.18);
  --badge-bg: linear-gradient(135deg, #2F6FED, #1D4ED8);
  --eyebrow-bg: #E8EFFD;
  --eyebrow-border: #C9DAF8;
  --eyebrow-text: #1D4ED8;
  --input-bg: #F7FAFE;
  --input-border: rgba(22, 46, 61, 0.08);
  --bg-a: radial-gradient(50% 55% at 88% 0%, rgba(47, 111, 237, 0.10), transparent 70%);
  --bg-b: radial-gradient(40% 45% at 8% 100%, rgba(47, 111, 237, 0.07), transparent 70%);
  --bg-c: linear-gradient(165deg, #F5F8FE 0%, #EBF1FC 60%, #E2ECFA 100%);
  --blob-a: radial-gradient(300px 300px at 82% 15%, rgba(47, 111, 237, 0.10), transparent 65%);
  --blob-b: radial-gradient(240px 240px at 12% 82%, rgba(47, 111, 237, 0.07), transparent 65%);
  --mark-bg: linear-gradient(135deg, #2F6FED, #1D4ED8);
  --deco-opacity: 0;
}

:root[data-ui-theme="gmnavy"] {
  --primary: #00B4E5;
  --primary-rgb: 0, 180, 229;
  --primary-hover: #1ec2f0;
  --ink: #FFFFFF;
  --ink-muted: rgba(255, 255, 255, 0.6);
  --card-bg: rgba(30, 41, 59, 0.55);
  --card-border: rgba(255, 255, 255, 0.14);
  --card-blur: 20px;
  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 30px 60px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --badge-bg: linear-gradient(135deg, #00B4E5, #0090c2);
  --eyebrow-bg: rgba(255, 255, 255, 0.08);
  --eyebrow-border: rgba(255, 255, 255, 0.18);
  --eyebrow-text: #6fd4f2;
  --input-bg: rgba(244, 247, 250, 0.06);
  --input-border: rgba(255, 255, 255, 0.14);
  --bg-a: radial-gradient(50% 55% at 88% 0%, rgba(0, 180, 229, 0.20), transparent 70%);
  --bg-b: radial-gradient(40% 45% at 8% 100%, rgba(0, 180, 229, 0.10), transparent 70%);
  --bg-c: linear-gradient(165deg, #0F1D3A 0%, #16244a 55%, #1E293B 100%);
  --blob-a: radial-gradient(300px 300px at 82% 15%, rgba(0, 180, 229, 0.16), transparent 65%);
  --blob-b: radial-gradient(240px 240px at 12% 82%, rgba(0, 180, 229, 0.10), transparent 65%);
  --grain-opacity: 0.05;
  --grain-blend: overlay;
  --danger: #ff8a8a;
  --disclaimer-bg: rgba(239, 196, 180, 0.12);
  --disclaimer-border: rgba(239, 196, 180, 0.32);
  --disclaimer-text: #FFB199;
  --mark-bg: linear-gradient(135deg, #00B4E5, #0090c2);
  --deco-opacity: 0;
  --info-bg: rgba(0, 180, 229, 0.12);
  --info-border: rgba(0, 180, 229, 0.3);
  --info-text: #9fe0f7;
}

.gm-login {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 112px 16px 64px;
  overflow: hidden;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  background: var(--bg-a), var(--bg-b), var(--bg-c);
}

/* 배경 블롭 - 은은하게 떠다니는 느낌 */
.gm-login::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: var(--blob-a), var(--blob-b);
  filter: blur(50px);
  animation: gm-drift 20s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes gm-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-2%, 2%); }
}

/* 미세 그레인 텍스처 */
.gm-login::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  pointer-events: none;
  z-index: 1;
}

/* 시안의 사선 블루 띠 - 사진 없이 CSS 도형만으로 표현(공식 사업장 사진이 생기면 배경 이미지로 교체 가능) */
.gm-bg-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--deco-opacity);
}

.gm-bg-deco span { position: absolute; display: block; }

.gm-bg-deco .deco-a {
  top: 14%;
  right: -4%;
  width: 26%;
  min-width: 90px;
  height: 46%;
  background: linear-gradient(170deg, #4B9BF2 0%, #0B5BD3 55%, #083F9E 100%);
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 78%);
  opacity: 0.88;
}

.gm-bg-deco .deco-b {
  left: -6%;
  top: 40%;
  width: 24%;
  min-width: 80px;
  height: 36%;
  background: linear-gradient(10deg, #1D6FE0 0%, #6FB0F7 100%);
  clip-path: polygon(0 12%, 100% 0, 100% 62%, 0 100%);
  opacity: 0.55;
}

.gm-bg-deco .deco-c {
  left: -10%;
  top: -6%;
  width: 70%;
  height: 34%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}

/* 상단 로고바: GM 로고 + GM KOREA / CHANGWON PLANT (좌), 슬로건 (우) */
.gm-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 16px 0;
}

.gm-brandbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gm-brandbar .gm-logo {
  width: 42px;
  height: 42px;
  flex: none;
  display: block;
}

.gm-brandtext {
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: nowrap;
}

.gm-brandtext b {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--ink);
}

.gm-brandtext i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1;
  color: var(--ink-muted);
}

.gm-tagline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding-top: 8px;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  color: var(--primary);
  text-align: right;
  white-space: nowrap;
}

.gm-tagline em {
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 5px;
  background: var(--primary);
}

:root[data-ui-theme="gmnavy"] .gm-logo { filter: brightness(0) invert(1); }

.gm-hero,
.gm-formpane {
  position: relative;
  z-index: 2;
}

.gm-hero { display: none; }

.gm-formpane {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gm-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--badge-bg);
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.35);
}

.gm-badge-lg {
  width: 56px;
  height: 56px;
  border-radius: 15px;
}

/* 데스크톱 히어로의 로고 - 상단 로고바와 중복되므로 숨김(기존 마크업 호환용으로만 남김) */
.gm-hero .gm-badge-logo { display: none; }

/* 카드 상단에 걸치는 원형 아이콘 (시안) */
.gm-formpane .gm-badge-mobile-only {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 88px;
  margin: 0;
  border-radius: 50%;
  border: 6px solid #FFFFFF;
  background: var(--badge-bg);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.16), 0 12px 26px rgba(var(--primary-rgb), 0.32);
}

.gm-login .card {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 26px;
  padding: 66px 26px 24px;
  width: 100%;
  max-width: 420px;
  backdrop-filter: blur(var(--card-blur));
  -webkit-backdrop-filter: blur(var(--card-blur));
  box-shadow: var(--card-shadow);
  animation: gm-rise 0.5s ease both;
  animation-delay: 0.1s;
}

@keyframes gm-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.gm-login .gm-eyebrow {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--eyebrow-bg);
  border: 1px solid var(--eyebrow-border);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--eyebrow-text);
}

.gm-hero .gm-eyebrow { margin-left: 0; }

/* 카드 안 "—— MEAL CHECK SYSTEM ——" (시안) */
.gm-login .gm-eyebrow-mobile-only {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--ink-muted);
  white-space: nowrap;
  justify-content: center;
}

.gm-login .gm-eyebrow-mobile-only::before,
.gm-login .gm-eyebrow-mobile-only::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--primary-rgb), 0.22);
}

.gm-login .card h1 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: 26px;
}

/* MCS 워드마크 - 시안처럼 "MC"는 네이비, "S"는 블루(테마별 --mark-bg) */
.gm-login .card .gm-brand-mark {
  width: fit-content;
  margin: 6px auto 6px;
  color: var(--primary);
  background: var(--mark-bg);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 68px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.05;
}

.gm-login .card .gm-brand-caption {
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 26px;
}

.gm-login label {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  margin: 14px 0 8px;
}

/* 입력칸 왼쪽 아이콘(사람/자물쇠) */
.gm-input-wrap { position: relative; }

.gm-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: var(--ink-muted);
  opacity: 0.85;
  pointer-events: none;
}

/* 사번 자릿수/형식 안내 (2026-10-23) - 입력칸 바로 아래 빨간 안내문 + 빨간 테두리 */
.gm-login .gm-field-error {
  margin: 8px 2px 0;
  color: var(--danger);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}

.gm-login input.invalid,
.gm-login input.invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(198, 65, 42, 0.16);
}

/* 2026-09-07: 노안이 있는 직원이 많다는 피드백으로 사번/비밀번호 입력 글자를 눈에 띄게 키움 */
.gm-login input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  color: var(--ink);
  padding: 14px 14px 14px 52px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gm-login .password-field {
  position: relative;
}

.gm-login .password-field input {
  width: 100%;
  padding-right: 50px;
}

.gm-login .password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--ink-muted);
  padding: 0;
  cursor: pointer;
}

.gm-login .password-toggle-btn:hover {
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 8px;
  color: var(--primary-hover);
}

.gm-login .password-toggle-btn::after { content: none; }

.gm-login input::placeholder {
  color: var(--ink-muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.7;
}

/* 성명 또는 비밀번호 칸은 아이콘+눈 버튼 때문에 폭이 좁아 안내문이 잘리지 않게 한 단계 작게 */
.gm-login .password-field input::placeholder {
  font-size: 14.5px;
}

.gm-login input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

/* "로그인 유지" 체크박스 (2026-09-17 추가) */
.gm-login .remember-me-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 12px;
  font-size: inherit;
  cursor: pointer;
}

.gm-login .remember-me-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  padding: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.gm-login .remember-me-row span {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
}

/* 로그인 유지 경고 - 시안의 파란 안내 박스(! 아이콘) */
.gm-login .remember-me-warning {
  position: relative;
  margin: 0 0 18px;
  padding: 14px 14px 14px 56px;
  border-radius: 14px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: var(--info-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  word-break: keep-all;
}

.gm-login .remember-me-warning::before {
  content: "!";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
}

/* 알약형 CTA 버튼 (색만 테마별 교체) */
.gm-login button {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: var(--primary);
  box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.3);
  transition: box-shadow 0.2s ease, transform 0.05s ease, background 0.15s ease;
}

.gm-login button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

.gm-login button:hover::after {
  left: 130%;
}

.gm-login button:hover {
  background: var(--primary-hover);
  box-shadow: 0 12px 28px rgba(var(--primary-rgb), 0.4);
}

.gm-login button:active {
  transform: translateY(1px);
}

/* 로그인 버튼: 그라디언트 + 오른쪽 화살표(구분선 포함) - 시안. JS가 버튼 글자를 바꿔도 깨지지 않게 배경으로 그림 */
.gm-login #submit-btn {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  width: 100%;
  min-height: 60px;
  padding: 16px 70px 16px 20px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background:
    var(--arrow) no-repeat right 24px center / 24px 24px,
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) no-repeat right 66px center / 1px 52%,
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, #fff) 0%, var(--primary) 45%, var(--primary-hover) 100%);
  box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.38);
}

.gm-login #submit-btn:hover {
  background:
    var(--arrow) no-repeat right 24px center / 24px 24px,
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) no-repeat right 66px center / 1px 52%,
    linear-gradient(180deg, var(--primary) 0%, var(--primary-hover) 100%);
}

.gm-login .link-row {
  color: var(--ink-muted);
  font-weight: 500;
  word-break: keep-all;
}

.gm-login .link-row a {
  display: block;
  margin-top: 4px;
  color: var(--primary-hover);
  font-weight: 800;
}

/* 2026-09-18: 텍스트 링크만으로는 버튼인지 알아보기 어렵다는 피드백으로 실제 버튼 모양으로 교체.
   메인 로그인 버튼과는 다른 색(인디고)을 써서 두 CTA가 서로 헷갈리지 않게 하고, 이동할
   보안강화 화면(gm-auth-utility-theme)의 강조색과 맞춰 "이 버튼을 누르면 그 화면으로 간다"는
   느낌을 준다. 은은한 pulse 애니메이션으로 눈에 띄게 함(과하지 않게, reduced-motion 존중). */
.gm-login .link-row a.gm-security-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4F46E5, #4338CA);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.35);
  animation: gm-security-pulse 2.4s ease-in-out infinite;
}

.gm-login .link-row a.gm-security-btn svg {
  flex: none;
}

.gm-login .link-row a.gm-security-btn:hover {
  background: linear-gradient(135deg, #4338CA, #3730A3);
}

@keyframes gm-security-pulse {
  0%, 100% { box-shadow: 0 10px 22px rgba(79, 70, 229, 0.35), 0 0 0 0 rgba(79, 70, 229, 0.4); }
  50% { box-shadow: 0 10px 22px rgba(79, 70, 229, 0.35), 0 0 0 8px rgba(79, 70, 229, 0); }
}

/* 사번 입력 시 A안/B안 여부 안내 배지(문의, 2026-09-18) */
.gm-mode-badge {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.gm-mode-badge.mode-a {
  background: var(--eyebrow-bg);
  color: var(--eyebrow-text);
}

.gm-mode-badge.mode-b {
  background: #EEF0FF;
  color: #4338CA;
}

.gm-login .disclaimer {
  margin-top: 16px;
  padding: 10px 12px;
  border-top: none;
  border-radius: 10px;
  background: var(--disclaimer-bg);
  border: 1px solid var(--disclaimer-border);
  color: var(--disclaimer-text);
  font-weight: 700;
  line-height: 1.6;
  font-size: 11px;
  text-align: left;
}

.gm-login .disclaimer p {
  margin: 0 0 6px;
}

.gm-login .disclaimer p:last-child {
  margin-bottom: 0;
}

/* 카드 하단 GENERAL MOTORS KOREA / CHANGWON PLANT (시안) */
.gm-card-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--primary-rgb), 0.16);
  text-align: center;
}

.gm-card-footer .gm-footer-main {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--ink);
}

.gm-card-footer .gm-footer-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--ink-muted);
}

/* 카카오톡 인앱 브라우저 안내 배너 - 페이지 흐름에 끼워넣으면 하단 주간식단표 등 레이아웃이
   전부 밀리므로, 뷰포트 맨 위에 고정으로 얹어서 기존 중앙정렬 레이아웃에 영향을 주지 않는다. */
.gm-kakao-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--disclaimer-bg);
  border-bottom: 1px solid var(--disclaimer-border);
  color: var(--disclaimer-text);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

.gm-kakao-banner span {
  max-width: 640px;
}

.gm-kakao-banner button {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.75;
}

.gm-kakao-banner button:hover {
  opacity: 1;
}

/* 로그아웃 직후 재로그인 안내 - 오류(빨강)와 구분되는 안내 톤 */
.gm-login .notice-msg {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--eyebrow-bg);
  border: 1px solid var(--eyebrow-border);
  color: var(--eyebrow-text);
  font-weight: 700;
  font-size: 12.5px;
  text-align: center;
}

.gm-login .error-msg {
  color: var(--danger);
  font-weight: 700;
}

.gm-version {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 2;
  text-align: center;
  font-size: 11px;
  color: var(--ink-muted);
  opacity: 0.6;
}

@media (max-width: 380px) {
  .gm-brandbar .gm-logo { width: 36px; height: 36px; }
  .gm-brandtext b { font-size: 16px; }
  .gm-brandtext i { font-size: 8px; letter-spacing: 0.2em; }
  .gm-tagline { font-size: 6.5px; letter-spacing: 0.12em; }
  .gm-login .card { padding-left: 20px; padding-right: 20px; }
  .gm-login .card .gm-brand-mark { font-size: 60px; }
}

@media (min-width: 900px) {
  .gm-login {
    justify-content: center;
    gap: 72px;
    padding: 120px 48px 64px;
  }

  .gm-topbar { padding: 26px 40px 0; }
  .gm-brandbar { gap: 14px; }
  .gm-brandbar .gm-logo { width: 56px; height: 56px; }
  .gm-brandtext b { font-size: 26px; }
  .gm-brandtext i { font-size: 12px; }
  .gm-tagline { font-size: 11px; padding-top: 12px; }
  .gm-tagline em { width: 64px; }

  .gm-hero {
    display: block;
    max-width: 460px;
    animation: gm-rise 0.6s ease both;
  }

  .gm-hero-title {
    color: var(--ink);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 18px 0 14px;
    word-break: keep-all;
  }

  .gm-hero-sub {
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    max-width: 360px;
    margin: 0 0 32px;
    word-break: keep-all;
  }

  .gm-hero-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .gm-hero-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
  }

  .gm-hero-feature svg { color: var(--primary); }

  /* 데스크톱은 히어로가 같은 역할을 하므로 카드 안 원형 아이콘/영문 라벨은 숨김 */
  .gm-formpane .gm-badge-mobile-only,
  .gm-login .gm-eyebrow-mobile-only { display: none; }

  .gm-login .card { margin-top: 0; padding-top: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-login *, .gm-login *::before, .gm-login *::after {
    animation: none !important;
    transition: none !important;
  }
}